/*
  GENO Group eG — components.css
  Buttons, Header/Nav, Footer, Cards, Accordion, Formulare, Hero, Badges.
*/

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  text-align: center;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:hover  { color: inherit; }

.btn-primary   { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }

.btn-secondary { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary-hover); }

.btn-accent    { background: var(--color-accent); color: var(--color-on-accent); }
.btn-accent:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }

.btn-ghost     { background: transparent; color: var(--color-text); border-color: transparent; padding-inline: 0.5em; }
.btn-ghost:hover { color: var(--color-primary-hover); }

.btn-block { width: 100%; }
.btn .icon { flex-shrink: 0; }

/* ---------------------------------------------------------
   Header / Navigation
--------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border-soft);
  transition: box-shadow var(--transition-fast);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--color-text);
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo img { height: clamp(2.75rem, 2.3rem + 1.6vw, 3.75rem); width: auto; }
.site-logo:hover { color: var(--color-text); }

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}
.main-nav__list a {
  display: inline-block;
  padding: 0.5em 0.2em;
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--color-text-soft);
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;  /* Nav-Punkte ("Über uns", "Stadtteile Magdeburg") nie umbrechen */
}
.main-nav__list a:hover,
.main-nav__list a[aria-current="page"] {
  color: var(--color-text);
  border-color: var(--color-primary);
}

/* Dropdown "Leistungen" */
.has-dropdown { position: relative; }
.has-dropdown > button {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5em 0.2em;
  font: inherit;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  cursor: pointer;
}
.has-dropdown > button:hover,
.has-dropdown.is-open > button {
  color: var(--color-text);
  border-color: var(--color-primary);
}
.has-dropdown > button .icon { transition: transform var(--transition-fast); }
.has-dropdown.is-open > button .icon { transform: rotate(180deg); }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  display: grid;
  gap: 0.15rem;
  min-width: 250px;
  padding: 0.5rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  list-style: none;
  margin: 0;
}
.has-dropdown:not(.is-open) .dropdown-menu { display: none; }
.dropdown-menu a {
  display: block;
  padding: 0.6em 0.8em;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-soft);
  text-decoration: none;
  border-bottom: none !important;
}
.dropdown-menu a:hover,
.dropdown-menu a:focus-visible {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Telefon hinter Button verstecken (Briefing: nie offen anzeigen außer Rechtsseiten) */
.phone-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.65em 1.25em;
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}
.phone-button:hover { border-color: var(--color-primary); background: var(--color-bg-card); color: var(--color-text); }
.phone-button .icon { color: var(--color-primary); }

/* Kompakter Anruf-Button: IMMER sichtbar (alle Breakpoints) — runder
   Icon-Button in .cluster außerhalb der Nav. Der Text-Button in
   .header-actions wird per CSS versteckt (desktop/tablet) und nur im
   aufgeklappten Mobilmenü wieder eingeblendet. */
.phone-button--compact {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  justify-content: center;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* Text-Version (in .header-actions / desktop-Nav) auf allen Breakpoints
   standardmäßig versteckt — nur der kompakte Icon-Button bleibt sichtbar. */
.header-actions .phone-button { display: none; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.theme-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); transform: rotate(15deg); }
/* Sonne/Mond: beide SVGs liegen im DOM, CSS schaltet je nach data-theme um (kein JS-Icon-Swap nötig) */
[data-theme="light"] .theme-toggle .icon-moon,
[data-theme="dark"]  .theme-toggle .icon-sun {
  display: none;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text);
  cursor: pointer;
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Mobile Navigation — fluid, kein fester Pixel-Breakpoint */
@container style(--force-mobile-nav: 1) {
  /* Platzhalter für zukünftige Container-Query-Erweiterung */
}

/* Hamburger-Grenze bewusst hoch: 6 Nav-Punkte + Telefon brauchen ab ~1280px
   Platz — darunter quetscht die Desktop-Nav ("Über uns"/"Stadtteile Magdeburg"
   brechen um, User-Report 12.06.2026) */
@media (max-width: 1279px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: fixed;
    inset: var(--header-h, 4.5rem) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-bg);
    padding: var(--space-lg) var(--container-padding);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition-base);
  }
  .main-nav.is-open { transform: translateX(0); }
  /* .site-header nutzt backdrop-filter (siehe oben), wodurch der Header zum
     Containing Block für position:fixed-Nachfahren wird (CSS-Spezifikation:
     filter/backdrop-filter != none erzeugt einen neuen Containing Block).
     .main-nav ist hier IMMER position:fixed (offen UND geschlossen) — träfe
     das zu, würde sich das Menü nicht am Viewport, sondern am ca. 70px hohen
     Header ausrichten: im geschlossenen Zustand ein sichtbarer kaputter
     ~50px-Streifen statt korrekt off-screen, im offenen Zustand ein auf den
     Header zusammengeschrumpftes Overlay statt Vollbild. Lösung: backdrop-filter
     am Header für die GESAMTE Mobile-Ansicht deaktivieren (nicht nur bei
     offenem Menü) – dadurch bleibt durchgehend der Viewport der Containing Block. */
  .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* Kompakter Button ist bereits global inline-flex — kein Override nötig */
  /* Text-Button im aufgeklappten Mobilmenü wieder einblenden */
  .header-actions .phone-button { display: flex; }
  .main-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .main-nav__list a {
    padding: 0.9em 0.2em;
    border-bottom: 1px solid var(--color-border-soft);
  }
  .has-dropdown { width: 100%; }
  .has-dropdown > button {
    width: 100%;
    justify-content: space-between;
    padding: 0.9em 0.2em;
    border-bottom: 1px solid var(--color-border-soft);
  }
  .dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    margin: 0.25rem 0 0.5rem 0;
    background: var(--color-bg-alt);
  }
  .header-actions { margin-top: var(--space-md); }
  .phone-button { flex: 1; justify-content: center; }
}

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(26rem, 70vh, 42rem);
  color: #fff;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: hero-ken-burns 24s ease-out both;
}
/* Ken-Burns deaktiviert (zu aufdringlich) */
@keyframes hero-ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1); }
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: -1;
}
.hero__content { max-width: 46rem; padding-block: var(--space-2xl); }
.hero__content h1 { color: #fff; margin-bottom: var(--space-md); }
.hero__content p  { color: rgba(255,255,255,0.88); font-size: var(--text-lg); margin-bottom: var(--space-lg); max-width: 38rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero__actions .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.6); }
.hero__actions .btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Hero-Einblende: sanftes Fade + minimales translateY (12 px) mit Stagger */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__content > *                   { animation: hero-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero__content > *:nth-child(2)      { animation-delay: 0.12s; }
.hero__content > *:nth-child(3)      { animation-delay: 0.22s; }
.hero__content > *:nth-child(n+4)    { animation-delay: 0.30s; }

.hero--compact { min-height: clamp(18rem, 42vh, 26rem); }
.hero--compact .hero__content { padding-block: var(--space-xl); }
.hero--compact .hero__content h1 { font-size: var(--text-4xl); }

/* Hero-Hintergrund ohne Foto: dezenter CI-Farbverlauf auf dunkler Basis (Weiß-Text
   bleibt in beiden Themes lesbar — wie .hero__overlay arbeitet sie mit fixen
   Dunkeltönen statt Theme-Variablen). Für Unterseiten ohne ehrlichen Foto-Match
   (vgl. card__media--abstract-Begründung); spart zudem die Bild-Pipeline auf jeder
   der ~20 neuen Seiten. Echte Fotos bleiben die erste Wahl, wo ein Match existiert. */
.hero--gradient {
  background:
    radial-gradient(ellipse 1100px 700px at 16% -12%, color-mix(in srgb, var(--color-primary) 38%, transparent), transparent 60%),
    radial-gradient(ellipse 900px 640px at 90% 96%,  color-mix(in srgb, var(--color-accent) 36%, transparent), transparent 58%),
    linear-gradient(160deg, #1a1f26 0%, #11151b 100%);
}

/* ---------------------------------------------------------
   Scroll-Reveal: Fade + sanftes translateY (18 px), Stagger
   für Gruppen (3 Kinder gestaffelt, ab 4. kein Delay mehr).
--------------------------------------------------------- */
.js .reveal,
.js .reveal-group > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .reveal.is-visible,
.js .reveal-group.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger: jedes folgende Kind 80 ms später */
.reveal-group.is-visible > *:nth-child(2) { transition-delay: 80ms;  }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: 240ms; }
/* Ab Kind 5 kein Delay — Grid-Zeile 2 fühlt sich nicht verzögert an */
.reveal-group.is-visible > *:nth-child(n+5) { transition-delay: 0ms; }

/* filter-instant: Transitions kurz deaktivieren während JS-Filter läuft,
   damit Karten sofort sichtbar erscheinen (kein ungewollter opacity-Fade). */
.filter-instant > * {
  transition: none !important;
  transition-delay: 0ms !important;
}

/* ---------------------------------------------------------
   Breadcrumb
--------------------------------------------------------- */
.breadcrumb {
  padding-block: var(--space-sm);
  font-size: var(--text-sm);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--color-text-muted);
}
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary-hover); }
.breadcrumb li[aria-current="page"] { color: var(--color-text); font-weight: 600; }
.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-inline-start: 0.4em;
  color: var(--color-border);
}

/* ---------------------------------------------------------
   Karten (Services, Blog, Team, Testimonials …)
--------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  transition: box-shadow var(--transition-base), border-color var(--transition-base),
              background-color var(--transition-base), transform var(--transition-base);
  align-self: stretch;
}
/* Karten-Hover: nur für Karten mit aktivem Link (card selbst ist <a>, enthält card__link, oder ist post-card) */
a.card:hover,
.card:has(.card__link):hover,
.card.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-hover);
  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--glass-border));
  background: var(--glass-bg-hover);
}
/* Etwas Abstand über der Kartenüberschrift, damit Cluster-Label + Icon nicht drängen */
.card h3 { margin: 0; margin-top: var(--space-xs); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card { background: var(--color-bg-card); }
}

/* Karten-Bildbereich — bricht aus dem Padding aus ("Bleed"), füllt die Karte oben
   randlos, behält den Karten-Radius an den oberen Ecken. Einheitliche Höhe (16:9)
   für alle Karten, egal ob Echtfoto oder dekorativer Verlauf (siehe --abstract). */
.card__media {
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}
a.card:hover .card__media img,
.card:has(.card__link):hover .card__media img,
.card.post-card:hover .card__media img { transform: scale(1.06); }

/* Dezenter Marken-Verlauf für Karten ohne passendes Echtfoto — bewusst abstrakt,
   damit kein Bild fälschlich als "unser Gebäude / unser Team" gelesen werden kann
   (gleiche Vorsicht wie bei Testimonials/Team). Greift die Aurora-Optik des
   Seitenhintergrunds im Kleinen auf, damit die Karte trotzdem "lebendig" wirkt. */
.card__media--abstract {
  background:
    radial-gradient(ellipse at 26% 24%, color-mix(in srgb, var(--color-primary) 65%, transparent), transparent 58%),
    radial-gradient(ellipse at 80% 78%, color-mix(in srgb, var(--color-accent) 42%, transparent), transparent 56%),
    var(--color-bg-alt);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: var(--color-text);
}
.card__icon .icon { color: var(--color-text); }
.card h3 { margin: 0; }
.card p { margin: 0; flex-grow: 1; }
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
}
.card__link .icon { transition: transform var(--transition-fast); color: var(--color-primary); }
.card__link:hover .icon { transform: translateX(3px); }
.card__link:hover { color: var(--color-text); }

.card--cluster-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

/* Kennzahlen / Stat-Boxen */
.stat-box {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}
.stat-box__value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-3xl);
  color: var(--color-gold-text);
  line-height: 1;
  margin-bottom: 0.4em;
}
[data-theme="dark"] .stat-box__value { color: var(--color-primary); }
.stat-box__label { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Testimonial-Karten */
.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.testimonial:hover {
  box-shadow: var(--glass-shadow-hover);
  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--glass-border));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .testimonial { background: var(--color-bg-card); }
}
.testimonial__stars {
  display: inline-flex;
  gap: 0.15em;
  color: var(--color-gold-text);
}
[data-theme="dark"] .testimonial__stars { color: var(--color-primary); }
.testimonial__quote { color: var(--color-text); font-style: italic; }
.testimonial__author { font-size: var(--text-sm); color: var(--color-text-muted); font-style: normal; }
.testimonial__badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

/* Blog-/Ratgeber-Karten */
.post-card { overflow: hidden; padding: 0; }
.post-card__media { position: relative; }
.post-card__media .img-placeholder { border-radius: 0; aspect-ratio: 16/10; }
.post-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--transition-base);
}
.post-card:hover .post-card__media img { transform: scale(1.06); }
.post-card__category {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  padding: 0.35em 0.9em;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-full);
}
.post-card__body { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg); flex-grow: 1; }
.post-card__meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.post-card h3 { font-size: var(--text-lg); }
.post-card h3 a { color: var(--color-text); text-decoration: none; }
.post-card h3 a:hover { color: var(--color-primary-hover); }
.post-card p { font-size: var(--text-sm); }

/* ---------------------------------------------------------
   Prozess-Schritte
--------------------------------------------------------- */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-lg);
  counter-reset: step;
}
.process-step { position: relative; padding-top: var(--space-lg); }
.process-step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 800;
  font-size: var(--text-lg);
}
.process-step h3 { margin-bottom: 0.3em; }
.process-step p { font-size: var(--text-sm); }

/* ---------------------------------------------------------
   Checkliste (Sektion „Digital erreichbar" etc.)
--------------------------------------------------------- */
.check-list {
  display: grid;
  /* explizite Spalte (statt impliziter "auto"-Spur): verhindert, dass die
     Grid-Spur sich an der Max-Content-Breite langer <li>-Inhalte (z. B.
     unweiche zusammengesetzte Wörter in <strong>) orientiert und dadurch
     auf schmalen Viewports über den Container hinauswächst (verifiziert:
     ohne dies wurde die Spur auf 374px berechnet bei 284px verfügbarer
     Breite → 74px Overflow). minmax(0, 1fr) erzwingt die Container-Breite
     als Obergrenze und erlaubt Schrumpfen auf 0 als Minimum. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  font-size: var(--text-base);
}
.check-list .icon {
  flex-shrink: 0;
  margin-top: 0.2em;
  color: var(--color-primary);
}
/* Direkte Kind-Checklisten im Fullwidth-Container → 2 Spalten ab Tablet.
   Betrifft Service-Hauptseiten (weg-verwaltung, hausmeister, etc.) und
   Über-uns-Seiten, NICHT Ratgeber-Prosa (dort nie direkte Container-Kinder). */
@media (min-width: 768px) {
  .container > .check-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------
   Flow-Diagramm (dekorativ: Anliegen -> Ticket -> Lösung)
--------------------------------------------------------- */
.flow-diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}
.flow-diagram__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
  width: 8rem;
}
.flow-diagram__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: var(--color-primary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.flow-diagram__step:hover .flow-diagram__icon {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-3px);
}
.flow-diagram__arrow {
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}
.flow-diagram__label {
  font-size: var(--text-sm);
  font-weight: 700;
}

/* ---------------------------------------------------------
   CTA-Banner
--------------------------------------------------------- */
.cta-banner {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
}
.cta-banner h2 { color: var(--color-on-primary); }
.cta-banner p  { color: color-mix(in srgb, var(--color-on-primary) 75%, transparent); margin-bottom: var(--space-lg); }
.cta-banner .btn-accent:hover { background: var(--color-accent-hover); }

/* Schlanker Hinweiskasten für vertrauensbildende Zusatzinfos (z. B. auf Preisseiten:
   Kostendeckelungen, Fairness-Regeln) – dezenter als .cta-banner, damit er nicht mit
   einem Handlungsaufruf verwechselt wird. */
.callout {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-alt));
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
}
.callout .icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: var(--color-primary-hover);
}
.callout strong { display: block; margin-bottom: var(--space-xs); }
.callout p { margin: 0; color: var(--color-text-soft); }

/* ---------------------------------------------------------
   Artikel-Querverweise — Visuelle Lese-Boxen
   Zwei Varianten:
   1) .article-link-box  → frei platzierbares Element (a-Tag)
   2) .stack > a.card__link → "Verwandte Artikel"-Abschnitt (CSS-only-Upgrade)
--------------------------------------------------------- */

/* Variante 1: explizit gesetztes Lese-Box-Element */
.article-link-box {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-alt);
  border: 1.5px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  margin-block: var(--space-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
}
.article-link-box:hover {
  border-left-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
  color: inherit;
}
.article-link-box__icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-radius: var(--radius-md);
  color: var(--color-gold-text);
}
.article-link-box__body { flex: 1; min-width: 0; }
.article-link-box__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 0.2em;
}
.article-link-box__title {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article-link-box__arrow {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.article-link-box:hover .article-link-box__arrow {
  color: var(--color-accent);
  transform: translateX(4px);
}

/* Variante 2: CSS-only — "Verwandte Artikel & Themen"-Abschnitt
   Selector zielt auf: <div class="stack"> > <a class="card__link">
   Wandelt die schlichte Textlink-Liste in visuell klare Link-Boxen um. */
.stack > a.card__link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-alt);
  border: 1.5px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
}
.stack > a.card__link:hover {
  border-left-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
  color: var(--color-accent);
}
.stack > a.card__link .icon {
  flex-shrink: 0;
  margin-left: auto;
  transition: transform var(--transition-fast);
}
.stack > a.card__link:hover .icon { transform: translateX(4px); }

/* Inline-Querverweise im Artikelfließtext: Hervorhebung ohne Störung des Leseflusses */
article .container-narrow section p a:not([class]) {
  color: var(--color-text);
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  padding: 0.05em 0.2em;
  border-radius: 3px;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  transition: background var(--transition-fast), color var(--transition-fast),
              text-decoration-color var(--transition-fast);
}
article .container-narrow section p a:not([class]):hover {
  color: var(--color-accent-hover);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  text-decoration-color: var(--color-accent);
}

/* ---------------------------------------------------------
   Accordion (FAQ)
--------------------------------------------------------- */
.accordion { display: grid; gap: var(--space-sm); }
.accordion-item {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  overflow: hidden;
}
.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: none;
  border: none;
  font: inherit;
  font-weight: 700;
  font-size: var(--text-base);
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
}
.accordion-trigger .icon {
  flex-shrink: 0;
  color: var(--color-primary);
  transition: transform var(--transition-fast);
}
.accordion-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* Eingeklappt nur mit ".js" (s. Scroll-Reveal-Konvention oben): ohne JavaScript
   bleibt der Inhalt normal sichtbar -- der Trigger-Klick haette sonst keine
   Wirkung und wuerde Inhalte (z.B. das Inhaltsverzeichnis) dauerhaft verstecken. */
.accordion-panel { display: grid; grid-template-rows: 1fr; }
.js .accordion-panel {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-base);
}
.js .accordion-panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion-panel > div { overflow: hidden; }
.accordion-panel p {
  padding: 0 var(--space-lg) var(--space-lg);
  margin: 0;
  font-size: var(--text-base);
}

/* ---------------------------------------------------------
   Inhaltsverzeichnis (TOC)
   Zielt auf: <nav class="card accordion" aria-label="Inhaltsverzeichnis">
   --------------------------------------------------------- */
nav.card[aria-label="Inhaltsverzeichnis"] {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  gap: 0;
}
nav.card[aria-label="Inhaltsverzeichnis"]:hover {
  transform: none;
}
nav.card[aria-label="Inhaltsverzeichnis"] .accordion-panel > div {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}

/* TOC-Liste: ol & ul — gemeinsame Basis */
nav.card[aria-label="Inhaltsverzeichnis"] ol,
nav.card[aria-label="Inhaltsverzeichnis"] ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav.card[aria-label="Inhaltsverzeichnis"] li {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 0.45em 0;
  border-bottom: 1px solid var(--color-border-soft);
  line-height: 1.35;
}
nav.card[aria-label="Inhaltsverzeichnis"] li:last-child {
  border-bottom: none;
}
nav.card[aria-label="Inhaltsverzeichnis"] li a {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  text-decoration: none;
  transition: color var(--transition-fast);
  flex: 1;
}
nav.card[aria-label="Inhaltsverzeichnis"] li a:hover {
  color: var(--color-primary);
}

/* ol: CSS-Counter ersetzt kaputtes display:grid marker-Rendering */
nav.card[aria-label="Inhaltsverzeichnis"] ol {
  counter-reset: toc;
}
nav.card[aria-label="Inhaltsverzeichnis"] ol li {
  counter-increment: toc;
}
nav.card[aria-label="Inhaltsverzeichnis"] ol li::before {
  content: counter(toc, decimal) ".";
  min-width: 2.2em;
  font-size: 0.78em;
  font-weight: 700;
  color: var(--color-primary);
  opacity: 0.75;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}

/* ---------------------------------------------------------
   Formulare (Kontakt)
--------------------------------------------------------- */
.form-grid { display: grid; gap: var(--space-md); }
.form-row { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.form-field { display: flex; flex-direction: column; gap: 0.4em; min-width: 0; }
.form-field label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.form-field .hint { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 400; }
.form-field input,
.form-field textarea,
.form-field select {
  padding: 0.85em 1em;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  color: var(--color-text);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.form-field textarea { resize: vertical; min-height: 8rem; }
.form-checkbox { display: flex; align-items: flex-start; gap: 0.6em; font-size: var(--text-sm); color: var(--color-text-soft); }
.form-checkbox input { margin-top: 0.3em; width: 1.15em; height: 1.15em; accent-color: var(--color-primary); flex-shrink: 0; }
.form-note { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Kundentyp-Auswahl (Anfrage-Routing, siehe inquiry-routing.js)
   Steuert Empfänger-Postfach + SLA-Hinweis: Bestandskunden → service@
   (sofortige Eskalation), Neukunden/Allgemein → info@ (24h). */
.form-kundentyp {
  border: none;
  padding: 0;
  margin: 0;
}
.form-kundentyp legend {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  padding: 0;
  margin-bottom: 0.4em;
}
.radio-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.radio-pill {
  position: relative;
  cursor: pointer;
}
.radio-pill input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.radio-pill span {
  display: inline-block;
  padding: 0.5em 1.1em;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-card);
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  user-select: none;
}
.radio-pill:hover span {
  border-color: var(--color-primary);
}
.radio-pill input:checked + span {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
}
.radio-pill input:focus-visible + span {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
/* SLA-Hinweis unter der Auswahl — wechselt mit dem Kundentyp */
.form-sla {
  margin: 0.5em 0 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  padding: 0.55em 0.9em;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}
.form-sla--priority {
  border-left-color: var(--color-gold-text);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-alt));
  color: var(--color-text);
  font-weight: 500;
}

/* Routing-Karten (ersetzen Radio-Pills im Kundentyp-Fieldset)
   Drei Karten nebeneinander; Bestandskunde bekommt Gold-Hervorhebung.
   Steuert via inquiry-routing.js das Empfänger-Postfach + Betreff-Präfix. */
.routing-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* 0-Minimum → echte Gleichverteilung */
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.routing-card {
  position: relative;
  cursor: pointer;
  display: flex;        /* lässt __inner auf volle Grid-Zellen-Höhe wachsen */
}
.routing-card input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.routing-card__inner {
  flex: 1;
  min-height: 7.2rem;   /* Garantiert gleiche Höhe bei 2-zeiliger Beschreibung */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.25em;
  padding: 0.9em 0.6em 0.8em;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.routing-card:hover .routing-card__inner {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.routing-card input:checked + .routing-card__inner {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card));
  box-shadow: var(--shadow-sm);
}
.routing-card input:focus-visible + .routing-card__inner {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.routing-card__icon {
  width: 1.6em; height: 1.6em;
  stroke: var(--color-text-muted);
  fill: none;
  transition: stroke var(--transition-fast);
}
.routing-card input:checked + .routing-card__inner .routing-card__icon {
  stroke: var(--color-gold-text);
}
.routing-card__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}
.routing-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.3;
  min-height: 2.6em;  /* Reserviert immer 2 Zeilen → alle Karten gleich hoch */
}
/* Bestandskunde-Karte: gold accent wenn selektiert */
.routing-card--priority input:checked + .routing-card__inner {
  border-color: var(--color-gold-text);
  background: color-mix(in srgb, var(--color-primary) 16%, var(--color-bg-card));
}

/* Kundennummer-Feld — erscheint mit Animation wenn Bestandskunde gewählt */
.form-kundennummer-wrap {
  animation: kn-appear 0.2s ease;
  padding: 0.85em 1em;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card));
}
.form-kundennummer-wrap[hidden] { display: none; }
.betreff-freitext-wrap[hidden]  { display: none; }
@keyframes kn-appear {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.form-kundennummer-wrap .kundennummer-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 0.35em;
}

/* Spam-Falle (Honeypot): liegt außerhalb des sichtbaren Bereichs und ist über
   aria-hidden + tabindex="-1" am Feld auch für Hilfstechnologien unerreichbar
   — bewusst NICHT .visually-hidden (die bleibt für Screenreader auffindbar).
   Echte Besucher:innen begegnen ihr nie; simple Bots, die Formulare blind
   ausfüllen, tappen jedoch hinein. Siehe form-guard.js. */
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

[role="alert"] {
  padding: 0.75em 1em;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ---------------------------------------------------------
   Karten-Einwilligung (Klick-zum-Laden für Google Maps)
   Lädt den iframe erst nach Zustimmung, siehe map-consent.js
   und Datenschutzerklärung Abschnitt 4 + 5.
--------------------------------------------------------- */
.map-consent { display: flex; flex-direction: column; gap: var(--space-xs); height: 100%; }
.map-consent__frame { position: relative; flex-grow: 1; }
.map-consent__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-bg-card);
}
.map-consent__overlay[hidden] { display: none; }
.map-consent__overlay p { margin: 0; }
.map-consent__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-consent__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}
.map-consent__note .btn { font-size: var(--text-xs); padding: 0.5em 1em; }

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */
.site-footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border-soft);
  padding-block: var(--space-2xl) var(--space-lg);
  margin-top: var(--space-2xl);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.footer-col h2,
.footer-col h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6em; }
.footer-col a {
  color: var(--color-text-soft);
  text-decoration: none;
  font-size: var(--text-sm);
}
.footer-col a:hover { color: var(--color-primary-hover); }
.footer-col .site-logo { margin-bottom: var(--space-sm); }
.footer-contact { display: grid; gap: 0.5em; font-size: var(--text-sm); color: var(--color-text-soft); }
.footer-contact li { display: flex; align-items: flex-start; gap: 0.6em; }
.footer-contact .icon { flex-shrink: 0; margin-top: 0.2em; color: var(--color-primary); }

/* Kontakt-Reveal: Telefon/Mail erst nach Klick sichtbar (contact-reveal.js) */
.contact-reveal {
  display: inline-block;
  padding: 0.3em 0.9em;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--glass-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.contact-reveal:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.contact-reveal:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.footer-legal nav ul { display: flex; flex-wrap: wrap; gap: var(--space-md); list-style: none; padding: 0; margin: 0; }
.footer-legal a { color: var(--color-text-muted); text-decoration: none; }
.footer-legal a:hover { color: var(--color-primary-hover); }

/* ---------------------------------------------------------
   Tabellen (Preise, Vergleiche)
--------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
caption { text-align: left; padding: var(--space-sm) var(--space-lg); font-weight: 700; color: var(--color-text); background: var(--color-bg-alt); }
th, td { padding: 0.85em var(--space-md); text-align: left; border-bottom: 1px solid var(--color-border-soft); }
th { font-weight: 700; color: var(--color-text); background: var(--color-bg-alt); white-space: nowrap; }
td { color: var(--color-text-soft); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }

/* ---------------------------------------------------------
   Badges / TODO-Hinweise (nur intern sichtbar im Quelltext, nicht beworben)
--------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.85em;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.badge--accent  { background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent); }
.badge--primary { background: color-mix(in srgb, var(--color-primary) 22%, transparent); color: var(--color-text); }
.badge--soft    { background: var(--color-bg-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* ---------------------------------------------------------
   Genossenschafts-/Vorteils-Listen, Definitionstabellen
--------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-md);
}
.feature-grid > div {
  padding: var(--space-md);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
}

dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.5em var(--space-md); font-size: var(--text-sm); }
dl.kv dt { font-weight: 700; color: var(--color-text); }
dl.kv dd { margin: 0; color: var(--color-text-soft); }

/* Skip-Link-Ziel */
#main:focus { outline: none; }

/* ==========================================================
   ENHANCED ANIMATIONS & VISUAL EFFECTS
   Alle neuen Effekte sind in einer globalen prefers-reduced-
   motion-Regel am Ende dieses Blocks deaktiviert.
   ========================================================== */

/* Hero: Parallax-Performance-Hint */
.hero__media { will-change: auto; }

/* ----------------------------------------------------------
   Section Heading: Gold-Balken wächst beim Einblenden
   ---------------------------------------------------------- */
.section-head h2 { padding-bottom: 0.4em; }
.section-head h2::after {
  content: '';
  display: block;
  width: 3rem;                           /* Fallback: immer sichtbar (kein JS / kein reveal) */
  height: 3px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  margin-top: 0.25em;
}
/* Nur wenn JS aktiv + reveal-Klasse vorhanden: Balken startet bei 0 und wächst beim Einblenden */
.js .section-head.reveal h2::after {
  width: 0;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.js .section-head.reveal.is-visible h2::after { width: 3rem; }
.section-head.center h2::after              { margin-inline: auto; }

/* Eyebrow: leichter Y-Slide – nur für section-heads mit reveal-Klasse */
.js .section-head.reveal .eyebrow {
  display: inline-block;
  transform: translateY(8px);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}
.js .section-head.reveal.is-visible .eyebrow { transform: translateY(0); }
/* Eyebrow außerhalb section-head (Hero, Cards): immer sichtbar */
.eyebrow { display: inline-block; }

/* CTA-Banner: Shimmer entfernt */
.cta-banner { position: relative; }

/* ----------------------------------------------------------
   Hover-Effekte: vereinfacht, kein Transform-Bounce
   ---------------------------------------------------------- */
.card__icon { transition: background 0.25s ease; }
a.card:hover .card__icon,
.card:has(.card__link):hover .card__icon { background: color-mix(in srgb, var(--color-primary) 20%, transparent); }

/* ----------------------------------------------------------
   Filter-Buttons
   ---------------------------------------------------------- */
.filter-btn {
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

/* ----------------------------------------------------------
   Accordion: Chevron dreht beim Öffnen
   ---------------------------------------------------------- */
.accordion-trigger .icon {
  transition: transform 0.25s ease !important;
}
.accordion-trigger[aria-expanded="true"] .icon {
  transform: rotate(180deg) !important;
}

/* ----------------------------------------------------------
   Tabellen-Zeilen: sanfter Hover-Übergang
   ---------------------------------------------------------- */
tbody tr { transition: background var(--transition-fast); }

/* ----------------------------------------------------------
   ol.breadcrumb (Stadtteile-Seiten: ol trägt direkt die Klasse)
   ---------------------------------------------------------- */
ol.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
ol.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
ol.breadcrumb a:hover { color: var(--color-primary-hover); }
ol.breadcrumb li[aria-current="page"] { color: var(--color-text); font-weight: 600; }
ol.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-inline-start: 0.4em;
  color: var(--color-border);
}
/* In hero context: alles weiß */
.hero__content ol.breadcrumb,
.hero__content ol.breadcrumb a { color: rgba(255,255,255,0.75); }
.hero__content ol.breadcrumb li[aria-current="page"] { color: #fff; font-weight: 600; }
.hero__content ol.breadcrumb a:hover { color: #fff; }
.hero__content ol.breadcrumb li:not(:last-child)::after { color: rgba(255,255,255,0.4); }

/* ----------------------------------------------------------
   Tag-Liste (Stadtteil-Navigation, Filter-ähnliche Chips)
   ---------------------------------------------------------- */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}
.tag-list a {
  display: inline-block;
  padding: 0.45em 1.1em;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.tag-list a:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.tag-list a[aria-current="page"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  pointer-events: none;
  font-weight: 600;
}

/* ==========================================================
   Rechtstexte-Prosa (Impressum, Datenschutz, AGB)
   Aktiviert über: <article class="... legal-article">
   Ziel: dokumentengerechte Typografie mit klarer Abschnitts-
   hierarchie und ausreichend Luft zwischen §-Paragraphen.
   ========================================================== */

/* Globales section { padding-block: space-2xl } überschreiben */
.legal-article section {
  padding-block: 0;
  margin-top: var(--space-xl);
}
.legal-article section:first-of-type { margin-top: var(--space-md); }

/* Seitentitel */
.legal-article > h1 {
  font-size: var(--text-3xl);
  margin-bottom: 0;
}

/* §-Überschriften: kompakter als globales text-3xl, klar abgetrennt */
.legal-article h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--color-border);
}

/* Erstes h2 direkt nach h1/Callout: etwas weniger Abstand */
.legal-article > h2:first-of-type,
.legal-article section:first-of-type > h2 { margin-top: var(--space-lg); }

/* Unter-Überschriften (z. B. Cloudflare-Turnstile-Unterabschnitt) */
.legal-article h3 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

/* Fließtext: mehr Zeilenabstand für dichten Gesetzestext */
.legal-article p {
  line-height: 1.75;
  margin-top: var(--space-sm);
}

/* Key-Value-Listen: auf Basis-Schriftgröße hochskalieren */
.legal-article dl.kv {
  font-size: var(--text-base);
  gap: 0.75em var(--space-md);
  margin-top: var(--space-sm);
}

/* Einfache Listen: korrekt eingerückt, mit Luft zwischen Punkten */
.legal-article ul:not([class]),
.legal-article ol:not([class]) {
  padding-left: 1.5em;
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  line-height: 1.75;
}

/* Inline-Links in Rechtstext: dezentes Gold, klar erkennbar */
.legal-article a:not([class]) {
  color: var(--color-gold-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.legal-article a:not([class]):hover { color: var(--color-primary-hover); }

/* ----------------------------------------------------------
   prefers-reduced-motion: alle neuen Animationen deaktivieren
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Alle Animations- und Transitions-Effekte deaktivieren */
  .hero__content > *,
  .hero__media,
  .card__icon,
  .filter-btn,
  .accordion-trigger .icon {
    animation: none !important;
    transition: none !important;
  }
  /* Scroll-reveal sofort einblenden, kein Y-Versatz */
  .js .reveal,
  .js .reveal-group > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Section-Heading-Balken sofort voll breit */
  .js .section-head.reveal h2::after  { width: 3rem !important; transition: none !important; }
  /* Eyebrow-Slide sofort */
  .js .section-head.reveal .eyebrow { transform: none !important; transition: none !important; }
  /* Card-Hover kein Transform */
  .card { transition: box-shadow var(--transition-base), border-color var(--transition-base), background-color var(--transition-base) !important; }
  .card:hover { transform: none !important; }
}