/* ============================================================
   CC Consult – style.css
   ============================================================ */

/* === CUSTOM PROPERTIES === */
:root {
  --primary:       #295f3f;
  --primary-dark:  #1a3d28;
  --primary-light: #357a52;
  --accent:        #C4873A;
  --accent-hover:  #A8702A;
  --bg:            #FFFFFF;
  --surface:       #f2f7f4;
  --surface-alt:   #e3efe8;
  --text:          #1A1A2A;
  --text-muted:    #64748B;
  --border:        #d4e4da;
  --white:         #FFFFFF;
  --radius:        8px;
  --radius-lg:     16px;
  --shadow:        0 2px 16px rgba(41,95,63,0.10);
  --shadow-lg:     0 8px 40px rgba(41,95,63,0.16);
  --transition:    0.2s ease;
  --max-w:         1100px;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* === BASE === */
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; color: var(--primary); }
h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
h2 { font-size: clamp(1.45rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 0.95rem; }

/* === LAYOUT === */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.section { padding-block: 5rem; }
.section--surface { background: var(--surface); }

.section__header {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 3rem;
}
.section__header p {
  margin-top: 0.75rem;
  color: var(--text-muted);
  font-size: 1.05rem;
}

.section__tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary);
  color: var(--white);
}
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-accent {
  background: var(--accent);
  color: var(--white);
}
.btn-accent:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.45);
}
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.1); }

.btn-outline-dark {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-outline-dark:hover { background: var(--primary); color: var(--white); }

/* === NAVIGATION === */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
  gap: 2rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-logo img {
  height: 46px;
  width: auto;
  max-width: none;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav-item { position: relative; }

.nav-link {
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.nav-link:hover { color: var(--primary); background: var(--surface); }
.nav-link.active { color: var(--primary); font-weight: 600; }
.nav-link.nav-cta {
  background: var(--primary);
  color: var(--white);
  padding: 0.45rem 1.2rem;
  margin-left: 0.5rem;
}
.nav-link.nav-cta:hover { background: var(--primary-dark); }

/* Dropdown arrow indicator */
.has-dropdown > .nav-link::after {
  content: '▾';
  font-size: 0.6rem;
  opacity: 0.55;
  margin-left: 0.1rem;
}

/* === DROPDOWN MENU === */
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  padding: 0.4rem;
  z-index: 200;
  flex-direction: column;
  gap: 0.05rem;
  animation: dropIn 0.15s ease;
}
.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 9px;
  height: 9px;
  background: var(--white);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
@keyframes dropIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu { display: flex; }

.dropdown-section-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.6rem 0.85rem 0.2rem;
  display: block;
}
.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 0.3rem 0.5rem;
}
.dropdown-menu a {
  display: block;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius);
  font-size: 0.83rem;
  color: var(--text);
  transition: var(--transition);
  white-space: nowrap;
}
.dropdown-menu a:hover { background: var(--surface); color: var(--primary); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  border-radius: var(--radius);
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: var(--transition);
}

/* === HERO === */
.hero {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%);
  color: var(--white);
  padding-block: 6rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}
/* Der Punkteraster (.hero::before) ist positioniert und wuerde sonst ueber
   dem Inhalt liegen – deshalb bekommt der Container position: relative. */
.hero > .container { position: relative; }
.hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 3.5rem;
  align-items: center;
}
.hero__inner {
  position: relative;
  max-width: 720px;
}
/* Portrait im Hero: dasselbe Bild wie auf "Ueber uns", nur deutlich kleiner
   und im gleichen 4/5-Ausschnitt. */
.hero__portrait {
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 300px;
}
.hero__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}
.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.88);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 100px;
  margin-bottom: 1.5rem;
}
.hero h1 { color: var(--white); margin-bottom: 1.25rem; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__lead {
  color: rgba(255,255,255,0.8);
  font-size: 1.15rem;
  margin-bottom: 2.5rem;
  max-width: 560px;
}
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__trust {
  display: flex;
  gap: 2.5rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  flex-wrap: wrap;
}
.hero__trust-item { display: flex; flex-direction: column; }
.hero__trust-item strong {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.hero__trust-item span {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* === PAGE HERO (inner pages) === */
.page-hero {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: var(--white);
  padding-block: 4rem;
  text-align: center;
}
.page-hero h1 { color: var(--white); margin-bottom: 0.75rem; }
.page-hero p {
  color: rgba(255,255,255,0.78);
  font-size: 1.05rem;
  max-width: 540px;
  margin-inline: auto;
}

/* === INLINE-ICONS ===
   Ersetzen die frueheren Emoji, siehe _includes/icons.php.

   Zwei Eigenschaften erbt jedes Icon von seinem Container, statt sie selbst
   mitzubringen:

     Groesse ueber 1em  – die font-size-Regeln der Icon-Container weiter unten
                          (.card__icon, .branche-icon, .blog-card__img ...)
                          galten schon fuer die Emoji und gelten unveraendert
                          weiter. Es gibt keine zweite Groessenliste.
     Farbe ueber currentColor – gesetzt wird color am Container.

   inline-block statt des block aus dem Reset: Ein Teil der Icons steht mitten
   im Text (Fusszeile, Kontaktzeilen in den Seitenspalten). Innerhalb der
   Flex-Container wird inline-block ohnehin zu block, die Regel schadet dort
   also nicht. */
.cc-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.125em;
}
/* Icon unmittelbar vor einem Text - der Abstand kommt hier aus dem Rand,
   weil in reinem Fliesstext kein gap zur Verfuegung steht. */
.cc-icon--vor { margin-right: 0.45rem; color: var(--primary); }

/* === SERVICE CARDS === */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: var(--transition);
  /* Spalte, damit der Link unten buendig sitzt - siehe .card__link */
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card__icon {
  width: 48px;
  height: 48px;
  background: var(--surface-alt);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--primary);
  margin-bottom: 1.25rem;
}
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.65; }
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.875rem;
  transition: var(--transition);
  /* margin-top:auto schiebt den Link an das untere Ende der Karte. Im Raster
     sind alle Karten einer Zeile gleich hoch (align-items:stretch), die Links
     stehen damit auf einer Linie - unabhaengig davon, wie lang der Text
     darueber ist.

     Steht nur eine Karte in der Zeile, etwa auf schmalen Displays, ist die
     Karte genau so hoch wie ihr Inhalt. Dann bleibt kein Platz zu verteilen,
     auto wird zu 0 und der Link rueckt von selbst direkt unter den Text.

     Der Abstand nach oben liegt deshalb im padding und nicht im margin: ein
     margin-top wuerde von auto ueberschrieben und der Link klebte im
     Einspaltigen am Absatz. */
  padding-top: 1.25rem;
  margin-top: auto;
  align-self: flex-start;
}
.card__link:hover { gap: 0.5rem; }

/* === NUMBERS BAR === */
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  text-align: center;
}
.number-item strong {
  display: block;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.number-item p { color: var(--text-muted); font-size: 0.875rem; }

/* === BRANCHEN GRID === */
.branchen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.branche-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  border: 1px solid var(--border);
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  transition: var(--transition);
}
.branche-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.branche-icon { font-size: 1.75rem; line-height: 1; flex-shrink: 0; color: var(--primary); }
.branche-card h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.branche-card p { font-size: 0.85rem; color: var(--text-muted); }

/* === ABOUT TEASER === */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
}
.about-image {
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.875rem;
  flex-direction: column;
  gap: 0.5rem;
}
.about-image span { font-size: 2.5rem; }
.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.about-text h2 { margin-bottom: 1rem; }
.about-text p { color: var(--text-muted); margin-bottom: 1rem; line-height: 1.75; }
.about-list {
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.about-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-muted);
  font-size: 0.925rem;
}
.about-list li::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
}

/* === BLOG CARDS === */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.blog-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.blog-card__img {
  background: var(--surface-alt);
  height: 160px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--primary-light);
}
/* Der Koerper traegt den Link und muss deshalb selbst die volle Resthoehe
   bekommen - sonst haette margin-top:auto am Link keinen Platz zu verteilen. */
.blog-card__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-card__meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}
.blog-card__tag {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: rgba(196,135,58,0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
}
.blog-card__date { font-size: 0.78rem; color: var(--text-muted); }
.blog-card h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.blog-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; }
.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.85rem;
  padding-top: 1rem;
  margin-top: auto;
  align-self: flex-start;
  transition: var(--transition);
}
.blog-card__link:hover { gap: 0.5rem; }

/* === CTA BANNER === */
.cta-banner {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: white;
  padding-block: 5rem;
  text-align: center;
}
.cta-banner h2 { color: white; margin-bottom: 1rem; }
.cta-banner p {
  color: rgba(255,255,255,0.78);
  font-size: 1.05rem;
  max-width: 520px;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}
.cta-banner__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* === FOOTER === */
.footer { background: var(--primary-dark); color: rgba(255,255,255,0.7); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-block: 4rem;
}
.footer-logo { margin-bottom: 1.1rem; }
.footer-logo img {
  height: 54px;
  width: auto;
  max-width: none;
}
.footer-brand p { font-size: 0.875rem; line-height: 1.7; color: rgba(255,255,255,0.55); }
.footer h4 {
  color: var(--white);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.footer ul { display: flex; flex-direction: column; gap: 0.5rem; }
.footer ul a { font-size: 0.875rem; color: rgba(255,255,255,0.6); transition: var(--transition); }
.footer ul a:hover { color: var(--white); }
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  margin-bottom: 0.6rem;
}
.footer-contact-item .cc-icon { color: rgba(255,255,255,0.45); margin-right: 0; }
.footer-contact-item a { color: rgba(255,255,255,0.6); transition: var(--transition); }
.footer-contact-item a:hover { color: var(--white); }
.footer-bottom {
  padding-block: 1.5rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
}
.footer-bottom a { color: rgba(255,255,255,0.45); transition: var(--transition); }
.footer-bottom a:hover { color: var(--white); }
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-legal {
  padding-bottom: 1.5rem;
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.32);
}

/* === LEISTUNGEN PAGE === */
.leistungen-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: start;
}
.leistung-block {
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
}
.leistung-block:last-child { border-bottom: none; margin-bottom: 0; }
.leistung-block h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
}
.leistung-block h3 .icon { font-size: 1.4rem; line-height: 1; }
/* Der Abstand zum Einleitungsabsatz stand vorher nirgends: Er entstand
   zufaellig aus der Zeilenhoehe, die das Emoji in der Ueberschrift aufspannte.
   Das Icon ist genau so hoch wie seine Schriftgroesse, damit es mittig zur
   Ueberschrift sitzt - also muss der Abstand hier ausgeschrieben werden. */
.lead-text + .leistung-block { margin-top: 2rem; }
.leistung-block p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; margin-bottom: 0.75rem; }
.leistung-block ul {
  list-style: disc;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.leistung-block ul li { color: var(--text-muted); font-size: 0.875rem; }

.sidebar-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--border);
  position: sticky;
  top: 90px;
}
.sidebar-card h3 { font-size: 1.1rem; margin-bottom: 0.75rem; }
.sidebar-card p { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 1.5rem; line-height: 1.65; }
.sidebar-card hr { border: none; border-top: 1px solid var(--border); margin-block: 1.5rem; }

/* === FAQ === */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 760px;
  margin-inline: auto;
}
details {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
summary {
  padding: 1.25rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--primary);
  font-size: 0.95rem;
  gap: 1rem;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--accent);
  transition: transform var(--transition);
  flex-shrink: 0;
  line-height: 1;
}
details[open] summary::after { transform: rotate(45deg); }
details > div {
  padding: 0 1.5rem 1.25rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* === BRANCHEN PAGE === */
.branchen-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.branche-detail-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--border);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.branche-detail-card:hover { box-shadow: var(--shadow); border-color: var(--primary-light); }
.branche-detail-card .icon { font-size: 2rem; line-height: 1; margin-bottom: 1rem; color: var(--primary); }
.branche-detail-card h3 { margin-bottom: 0.5rem; }
.branche-detail-card p { color: var(--text-muted); font-size: 0.875rem; line-height: 1.65; margin-bottom: 0.75rem; }
.branche-detail-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.branche-detail-card ul li {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding-left: 1rem;
  position: relative;
}
.branche-detail-card ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* === BLOG PAGE === */
.blog-page-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
  align-items: start;
}
.blog-post-list { display: flex; flex-direction: column; gap: 1.5rem; }
.blog-post-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  gap: 0;
  flex-direction: column;
  transition: var(--transition);
}
.blog-post-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.blog-post-card__img {
  height: 200px;
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--primary-light);
}
.blog-post-card__body { padding: 1.75rem; }
.blog-post-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.blog-tag {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: rgba(196,135,58,0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
}
.blog-date { font-size: 0.78rem; color: var(--text-muted); }
.blog-post-card h2 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.blog-post-card p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.65; }
.blog-post-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.875rem;
  margin-top: 1.25rem;
  transition: var(--transition);
}
.blog-post-card__link:hover { gap: 0.5rem; }

.blog-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 90px; }
.blog-sidebar-widget {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--border);
}
.blog-sidebar-widget h3 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; color: var(--text-muted); }
.topic-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.topic-tag {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: var(--transition);
  cursor: pointer;
}
.topic-tag:hover { border-color: var(--primary); color: var(--primary); }

/* === KUNDENINFO PAGE === */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.info-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.info-card h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 1.05rem;
}
.info-card ul { display: flex; flex-direction: column; gap: 0.5rem; }
.info-card ul li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  color: var(--text-muted);
  font-size: 0.875rem;
}
.info-card ul li::before { content: '→'; color: var(--accent); flex-shrink: 0; }
.info-card h3 .icon { font-size: 1.3rem; line-height: 1; }

.deadline-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.deadline-table th {
  background: var(--primary);
  color: white;
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.deadline-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.deadline-table td:first-child { color: var(--text); font-weight: 500; }
.deadline-table tr:last-child td { border-bottom: none; }
.deadline-table tr:hover td { background: var(--surface); }

/* === CONTACT PAGE === */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
  align-items: start;
}
.contact-detail {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.75rem;
}
.contact-detail__icon {
  font-size: 1.35rem;
  color: var(--primary);
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--surface-alt);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-detail h4 { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; margin-bottom: 0.2rem; text-transform: uppercase; letter-spacing: 0.06em; }
.contact-detail p, .contact-detail a { font-size: 0.95rem; color: var(--text); }
.contact-detail a:hover { color: var(--primary); }

.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  transition: var(--transition);
  appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(41,95,63,0.1);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.75rem; }

/* --- Zustimmungs-Checkbox ---------------------------------------------
   Die Feldregel weiter oben setzt appearance:none und ein grosszuegiges
   Padding. Auf eine Checkbox angewandt heisst das: kein Haken, kein
   Rahmenzustand, dafuer ein grosses leeres Kaestchen. Sie schaltet zwar
   um, zeigt es aber nicht - fuer den Benutzer sieht das aus, als liesse
   sie sich nicht setzen. Deshalb bekommt sie hier eine eigene
   Darstellung mit sichtbarem Haken.
   Die Selektoren sind bewusst zwei Stufen tief, damit sie die allgemeine
   Regel ".form-group input" auch wirklich ueberschreiben.             */
.form-group label.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 0;
}
.form-group .form-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.12rem 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--white);
  cursor: pointer;
}
.form-group .form-check input[type="checkbox"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}
/* Der Haken: zwei Kanten eines Rechtecks, um 45 Grad gedreht. */
.form-group .form-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 0.34rem;
  top: 0.12rem;
  width: 0.26rem;
  height: 0.55rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.form-group .form-check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(41,95,63,0.18);
}
.form-check a { color: var(--primary); }

/* === ÜBER UNS PAGE === */
.ueberuns-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: start;
}
.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1rem;
}
.value-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.25rem;
  border: 1px solid var(--border);
}
.value-card .icon { font-size: 1.5rem; line-height: 1; margin-bottom: 0.75rem; color: var(--primary); }
.value-card h4 { font-size: 0.9rem; margin-bottom: 0.25rem; }
.value-card p { font-size: 0.8rem; color: var(--text-muted); }

.qualifikation-list { display: flex; flex-direction: column; gap: 1rem; }
.qualifikation-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.qualifikation-item .icon { font-size: 1.25rem; line-height: 1; flex-shrink: 0; color: var(--primary); }
.qualifikation-item h4 { font-size: 0.9rem; margin-bottom: 0.15rem; }
.qualifikation-item p { font-size: 0.8rem; color: var(--text-muted); }

/* ============================================================
   NEUE KOMPONENTEN (Textrelaunch)
   ============================================================ */

/* Claim im Hero: "Persönlich. Präzise. Professionell." */
.hero__claim {
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 1.25rem;
}
.hero__lead { margin-bottom: 1.25rem; }
.hero__text {
  color: rgba(255,255,255,0.72);
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 600px;
  margin-bottom: 0.9rem;
}
.hero__text + .hero__actions { margin-top: 2rem; }

/* Schmalerer Textcontainer für Unterseiten */
.container.narrow { max-width: 760px; }

.lead-text {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--text-muted);
}

.note-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 1.5rem;
}

/* Vorteils-/Check-Raster */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.85rem 2rem;
  max-width: 860px;
  margin-inline: auto;
}
.usp-grid--three { max-width: 980px; }
.usp-grid li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
.usp-grid li::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin-top: 1px;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Kartenraster mit zwei breiten Karten */
.cards-grid--two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* Nutzenversprechen auf einer Karte */
.card__claim {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

/* Nummerierte Prozessschritte */
.process-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 760px;
  margin-inline: auto;
  counter-reset: none;
}
.process-step {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: var(--transition);
}
.process-step:hover { box-shadow: var(--shadow); border-color: var(--primary-light); }
.process-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
  font-size: 1.05rem;
}
.process-step h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.process-step p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; }

/* Vertrauensbereich am Seitenende */
.trust-block {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow);
}
.trust-block h2 { margin-bottom: 1.25rem; }
.trust-block .about-list {
  display: inline-flex;
  text-align: left;
  margin: 0 0 1.75rem;
}

/* Branchen: Nutzenzeile + Herausforderungen */
.branche-claim {
  color: var(--accent) !important;
  font-weight: 600;
  font-size: 0.875rem !important;
  margin-bottom: 0.5rem !important;
}
.challenge-box {
  margin-top: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.challenge-box h4 {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.challenge-box ul { display: flex; flex-direction: column; gap: 0.3rem; }
.challenge-box ul li {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding-left: 1rem;
  position: relative;
}
.challenge-box ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Linklisten in Sidebars */
.sidebar-links { display: flex; flex-direction: column; gap: 0.5rem; }
.sidebar-links a {
  font-size: 0.85rem;
  color: var(--primary);
  font-weight: 500;
  transition: var(--transition);
}
.sidebar-links a::before { content: '→ '; color: var(--accent); }
.sidebar-links a:hover { color: var(--primary-dark); }

/* Downloads & Links */
.download-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.5rem;
}
.download-list li {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.4rem;
  transition: var(--transition);
}
.download-list li:hover { box-shadow: var(--shadow); border-color: var(--primary-light); }
.download-list__icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; color: var(--primary); }
.download-list h3 { font-size: 1rem; margin-bottom: 0.15rem; }
.download-list p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
.download-list li > div { flex: 1; }
.download-list__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.download-list__link:hover { color: var(--accent); }

/* Hinweiskasten im Blogbeitrag */
.blog-tip {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem !important;
  color: var(--text) !important;
}

/* Aufzählungen innerhalb von Beiträgen */
.blog-post-card__body .about-list { margin: 1rem 0; }

/* === ANFORDERUNGS-MODAL === */
/* Dialog auf der Downloads-Seite. Er ist eine Abkürzung, kein Ersatz: Ohne
   JavaScript wird er nie geöffnet und die Links führen wie bisher auf
   /kundeninfo/anfordern.

   Die erste Regel deckt zusätzlich Browser ab, die <dialog> nicht kennen. Dort
   wäre das Element ein unbekannter Container ohne eigenes Verhalten – das
   Formular stünde sonst offen mitten in der Seite. */
.anforderung-modal:not([open]) { display: none; }
.anforderung-modal {
  /* margin:auto zentriert den modalen Dialog im Viewport. Der Browser setzt das
     selbst, aber der Reset ganz oben (`*` mit margin:0) nimmt es ihm wieder weg
     – ohne diese Zeile klebt der Dialog in der linken oberen Ecke. */
  margin: auto;
  width: min(38rem, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}
.anforderung-modal::backdrop { background: rgba(26,26,42,0.55); }
.anforderung-modal__inner { padding: 1.75rem; }
.anforderung-modal__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.anforderung-modal__titel { font-size: 1.25rem; line-height: 1.3; }
.anforderung-modal__text { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.3rem; }
.anforderung-modal__schliessen {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}
.anforderung-modal__schliessen:hover { background: var(--surface); color: var(--text); }
.anforderung-modal__schliessen:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(41,95,63,0.18); }

/* Der Hintergrund soll nicht mitscrollen, solange der Dialog offen ist.

   Abgeleitet aus dem Dialog selbst, nicht über eine Zustandsklasse vom Skript.
   Der Grund ist ein gemessener Fehler: Wird die Klasse beim close-Ereignis
   entfernt, bleibt sie gelegentlich hängen, weil der Dialog in seltenen Fällen
   schon während der Ereignisverteilung schließt und close dann nicht mehr bei
   jedem Zuhörer ankommt. Zurück blieb ein <body> mit overflow:hidden – eine
   Seite, die sich nicht mehr scrollen ließ, bis man sie neu lud.

   Diese Regel kann nicht auseinanderlaufen: Sie greift genau so lange, wie das
   open-Attribut gesetzt ist. Browser ohne :has() (Firefox vor 121) scrollen den
   Hintergrund mit – unschön, aber harmlos, und der Dialog selbst funktioniert
   dort weiterhin. */
body:has(.anforderung-modal[open]) { overflow: hidden; }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  /* Ab hier wird die Textspalte zu schmal fuer zwei Spalten: Portrait rutscht
     unter den Text und wird noch einmal kleiner. */
  .hero__layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__portrait { justify-self: start; max-width: 240px; }
}

@media (max-width: 900px) {
  .blog-page-grid { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
  .leistungen-layout { grid-template-columns: 1fr; }
  .sidebar-card { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .site-header { position: relative; }
  .nav { gap: 1rem; }
  .nav-logo img { height: 40px; }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    padding: 0.75rem;
    gap: 0.15rem;
    box-shadow: var(--shadow);
    z-index: 99;
  }
  .nav-menu.open { display: flex; }
  .nav-link { text-align: left; padding: 0.65rem 1rem; }
  .nav-link.nav-cta { margin-left: 0; margin-top: 0.25rem; text-align: center; }

  /* Mobile dropdowns */
  .has-dropdown > .nav-link::after { margin-left: auto; }
  .dropdown-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: var(--radius);
    background: var(--surface);
    padding: 0.25rem 0.5rem;
    margin-top: 0.15rem;
    display: none;
    animation: none;
  }
  .dropdown-menu::before { display: none; }
  .has-dropdown.open > .dropdown-menu { display: flex; }
  .has-dropdown:hover .dropdown-menu,
  .has-dropdown:focus-within .dropdown-menu { display: none; }
  .has-dropdown.open > .dropdown-menu { display: flex; }

  .hero { padding-block: 3.5rem; }
  .hero__trust { gap: 1.5rem; }

  .about-grid,
  .contact-grid,
  .ueberuns-grid { grid-template-columns: 1fr; gap: 2rem; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }

  .form-row { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }

  .section { padding-block: 3.5rem; }
}

@media (max-width: 480px) {
  .nav-logo img { height: 34px; }
  .footer-logo img { height: 48px; }
  .hero__actions,
  .cta-banner__actions { flex-direction: column; align-items: flex-start; }
  .cta-banner__actions { align-items: center; }
  .numbers-grid { grid-template-columns: 1fr 1fr; }
}

/* Responsive-Anpassungen der neuen Komponenten */
@media (max-width: 768px) {
  /* Lange Button-Labels dürfen auf schmalen Displays umbrechen,
     statt aus dem Container zu laufen (nowrap aus .btn aufheben). */
  .btn {
    white-space: normal;
    max-width: 100%;
    justify-content: center;
    text-align: center;
  }
  .trust-block .btn { display: flex; }

  .usp-grid { grid-template-columns: 1fr; max-width: 520px; }
  .process-step { padding: 1.25rem; gap: 1rem; }
  .trust-block { padding: 2rem 1.5rem; }
  .trust-block .about-list { display: flex; }
  .download-list li { flex-wrap: wrap; }
  .download-list li > div { flex: 1 1 100%; }
  .download-list__link { margin-left: auto; }
  .hero__text { font-size: 0.9rem; }

  /* Auf schmalen Displays zählt jeder Millimeter Breite für die Felder. */
  .anforderung-modal__inner { padding: 1.25rem; }
  .anforderung-modal__kopf { margin-bottom: 1.25rem; }
}