/* =============================================================
   ASB Wohnpark Lausitzer Seenland — components.css
   Wiederverwendbare Bausteine: Header/Nav, Logo-Platzhalter, Buttons,
   Karten, Störer/Badges, Akkordeon, Footer.
   ============================================================= */

/* -------------------------------------------------------------
   LOGO-PLATZHALTER
   -------------------------------------------------------------
   Das offizielle ASB-Logo liegt nur im internen Portal RITA (Login).
   Solange es fehlt: Text-Platzhalter inkl. Schutzraum-Box rendern, damit
   die Stelle technisch korrekt vorbereitet ist.
   CD-Regeln fürs spätere echte Logo: zweifarbig (Rot/Gelb), Schutzraum +
   Mindestgröße einhalten, NICHT auf Rot, nur auf Weiß/hell/Gelb/Anthrazit-20%.
   Austausch: .brand-logo-text durch <img src="assets/logo/asb-logo-rgb.svg"> ersetzen.
------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--text);
}

.brand-logo-text {
  /* Schutzraum-Box: simuliert den CD-Schutzraum um das Logo. */
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding: .55rem .8rem;
  border: 2px dashed var(--asb-anthracite-20);
  border-radius: var(--radius-sm);
  line-height: 1.1;
  background: var(--bg);
}
.brand-logo-text .bl-asb {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .04em;
  color: var(--asb-red);
}
.brand-logo-text .bl-sub {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: .72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-name .bn-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
}
.brand-name .bn-sub {
  font-family: var(--font-head);
  font-size: .8rem;
  color: var(--text-muted);
}
/* Auf schmalen Viewports den langen Markennamen neben dem Logo ausblenden. */
@media (max-width: 560px) {
  .brand-name .bn-sub { display: none; }
}

/* Echtes Wohnpark-Logo (Bild) im Header. */
.brand-logo { height: 46px; width: auto; }
.brand-sub {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.2;
  max-width: 16ch;
}
@media (max-width: 620px) { .brand-sub { display: none; } }

/* -------------------------------------------------------------
   HEADER / NAVIGATION
------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 72px;
  padding-block: var(--space-1);
}

/* Burger-Button (mobil). Mind. 44×44px Trefferfläche. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 .75rem;
  background: var(--bg);
  border: 2px solid var(--asb-anthracite);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-head);
  font-weight: 700;
  cursor: pointer;
}
.nav-toggle .nt-label { font-size: .95rem; }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Hauptnavigation */
.main-nav ul {
  list-style: none;
  display: flex;
  gap: var(--space-1);
  align-items: center;
}
.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: .4rem .8rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .98rem;
  text-decoration: none;
  color: var(--text);
  border-radius: var(--radius-sm);
  /* Anthraziter Text mit rotem Unterstrich im Hover (kein roter Text als Body). */
  border-bottom: 3px solid transparent;
}
.main-nav a:hover { background: var(--bg-soft); }
.main-nav a[aria-current="page"] {
  border-bottom-color: var(--asb-red);
}

/* Mobiles Verhalten: Nav als ausklappbares Panel.
   Ohne JS bleibt die Nav sichtbar (progressive enhancement) — siehe main.js,
   das beim Laden [data-nav] zusammenklappt. */
@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: var(--space-2) var(--space-3) var(--space-3);
  }
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .main-nav li { border-bottom: 1px solid var(--asb-anthracite-10); }
  .main-nav a {
    width: 100%;
    border-bottom: none;
    border-left: 3px solid transparent;
    border-radius: 0;
  }
  .main-nav a[aria-current="page"] { border-left-color: var(--asb-red); }

  /* Wenn JS aktiv ist, wird die Nav per [hidden] geschlossen. */
  .main-nav[hidden] { display: none; }
}
@media (min-width: 1025px) {
  .nav-toggle { display: none; }
  /* Sicherstellen, dass die Nav am Desktop immer sichtbar ist,
     auch wenn JS sie auf Mobil mit [hidden] versehen hat. */
  .main-nav[hidden] { display: block; }
}

/* -------------------------------------------------------------
   SUBMENÜ ("Pflege")-Dropdown
   Bündelt die Pflege-Angebote, damit die Hauptnav schlank bleibt.
   Auslöser ist ein <button aria-expanded> (kein Link → kein Ziel).
   Desktop: öffnet bei Hover/Fokus (CSS) ODER per Klick (aria-expanded via JS).
   Mobil:  Teil des Panels, per Button auf-/zuklappbar.
   Ohne JS: Desktop via :hover/:focus-within bedienbar; mobil dauerhaft offen.
   Selektoren mit .main-nav-Präfix, um die generischen .main-nav-Regeln
   (Spezifität) gezielt zu überschreiben.
------------------------------------------------------------- */
.main-nav .has-sub { position: relative; }

/* Auslöser sieht aus wie ein Nav-Link, ist aber ein <button>. */
.main-nav .nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: var(--tap-min);
  padding: .4rem .8rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .98rem;
  color: var(--text);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.main-nav .nav-sub-toggle:hover { background: var(--bg-soft); }
.main-nav .nav-caret { width: 18px; height: 18px; transition: transform .18s ease; }
.main-nav .nav-sub-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

/* Aktiver Zweig: aktuelle Unterseite liegt im Submenü → Auslöser markieren. */
.main-nav .has-sub:has(.nav-sub a[aria-current="page"]) > .nav-sub-toggle {
  border-bottom-color: var(--asb-red);
}

.main-nav .nav-sub { list-style: none; }
.main-nav .nav-sub a {
  width: 100%;
  justify-content: flex-start;
  border-bottom: none;
}
.main-nav .nav-sub a[aria-current="page"] { color: var(--asb-red); }

@media (min-width: 1025px) {
  /* Desktop: Submenü als schwebende Karte unter dem Auslöser. */
  .main-nav .nav-sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-1);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    z-index: 30;
  }
  .main-nav .has-sub:hover > .nav-sub,
  .main-nav .has-sub:focus-within > .nav-sub,
  .main-nav .nav-sub-toggle[aria-expanded="true"] + .nav-sub { display: flex; }
  .main-nav .has-sub:hover > .nav-sub-toggle .nav-caret { transform: rotate(180deg); }
}

@media (max-width: 1024px) {
  /* Mobil: Auslöser über die volle Breite, wie die übrigen Nav-Links. */
  .main-nav .nav-sub-toggle {
    width: 100%;
    justify-content: space-between;
    border-bottom: none;
    border-left: 3px solid transparent;
    border-radius: 0;
  }
  .main-nav .has-sub:has(.nav-sub a[aria-current="page"]) > .nav-sub-toggle {
    border-bottom: none;
    border-left-color: var(--asb-red);
  }
  /* Untereinträge eingerückt. */
  .main-nav .nav-sub { padding-left: var(--space-3); }
  /* Mit JS standardmäßig zugeklappt, bis der Button expandiert wird. */
  html.js-nav .main-nav .nav-sub-toggle[aria-expanded="false"] + .nav-sub { display: none; }
}

/* -------------------------------------------------------------
   BUTTONS
   Mind. 44×44px Trefferfläche. Sichtbarer Focus-Ring (global via :focus-visible).
------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--tap-min);
  padding: .7rem 1.4rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--motion) ease, color var(--motion) ease,
              border-color var(--motion) ease, transform var(--motion) ease,
              box-shadow var(--motion) ease;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

/* Primär: Fläche ASB-Rot, Text weiß. Weiß auf #E30613 ≈ 4.9:1 → AA. */
.btn--primary {
  background: var(--asb-red);
  color: var(--on-dark);
  border-color: var(--asb-red);
  box-shadow: 0 6px 18px rgba(227, 6, 19, .22);
}
.btn--primary:hover {
  background: var(--asb-red-dark);
  border-color: var(--asb-red-dark);
  box-shadow: 0 10px 26px rgba(227, 6, 19, .30);
}

/* Sekundär: weiße Fläche, anthrazitfarbener Rand + Text; Hover füllt anthrazit. */
.btn--secondary {
  background: var(--bg);
  color: var(--text);
  border-color: var(--asb-anthracite);
}
.btn--secondary:hover {
  background: var(--asb-anthracite);
  color: var(--on-dark);
}

/* Variante für dunkle Flächen (Footer/Anthrazit): heller Rand. */
.btn--on-dark {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--on-dark);
}
.btn--on-dark:hover {
  background: var(--on-dark);
  color: var(--asb-anthracite);
}

/* Dezenter Pfeil-Textlink (z. B. in Karten). Anthrazit + roter Pfeil/Hover. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}
.link-arrow svg { width: 1.1em; height: 1.1em; color: var(--asb-red); }
.link-arrow:hover { text-decoration: underline; text-decoration-color: var(--asb-red); text-underline-offset: 4px; }
.link-arrow:hover svg { transform: translateX(3px); transition: transform var(--motion) ease; }

/* Inline-Textlink im Fließtext: Anthrazit mit rotem Unterstrich (CD-konform). */
.prose a:not(.btn):not(.link-arrow),
.text-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--asb-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.prose a:hover,
.text-link:hover { color: var(--asb-red); }

/* -------------------------------------------------------------
   KARTEN (4 Pflege-Bereiche)
   Bild oben, Titel (Noto Sans Bold), kurzer Text, dezenter Pfeil-Link.
   Hover: leichtes Anheben + Schatten.
------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--motion) ease, box-shadow var(--motion) ease;
}
.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.card-media {
  aspect-ratio: 16 / 10;
  background: var(--asb-anthracite-10);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  flex: 1;
}
.card-body h3 { font-family: var(--font-head); }
.card-body p { font-size: var(--fs-small); margin: 0; }
.card-body .link-arrow { margin-top: auto; }

/* Ganze Karte klickbar, ohne Verschachtelung von Links:
   der Titel-Link spannt per ::after über die Karte. */
.card .stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card { position: relative; }

/* -------------------------------------------------------------
   STÖRER / BADGES (CD-Element „Störer": runde Kreise, sehr sparsam)
   Gelb/Rot/Anthrazit. Gelb IMMER mit anthrazitfarbenem Text.
------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .85rem;
  line-height: 1.2;
}
.badge--yellow { background: var(--asb-yellow); color: var(--asb-anthracite); }
.badge--red    { background: var(--asb-red);    color: var(--on-dark); }
.badge--dark   { background: var(--asb-anthracite); color: var(--on-dark); }

/* Runder Störer-Kreis (CD-Designelement) für kurze, wichtige Infos.
   Drei Farben (Gelb/Rot/Anthrazit) und drei Größen. Sehr sparsam einsetzen,
   darf nichts (v. a. das Logo) optisch bedrängen. */
.stoerer {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: var(--stoerer-md); height: var(--stoerer-md);
  border-radius: 50%;
  padding: var(--space-2);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.15;
  hyphens: auto;
}
.stoerer .st-big { font-size: 1.6em; line-height: 1; display: block; }

/* Farbvarianten — Kontrast geprüft:
   Gelb IMMER mit Anthrazit-Text; Rot/Anthrazit mit weißem (fettem) Text. */
.stoerer--yellow { background: var(--asb-yellow);     color: var(--asb-anthracite); }
.stoerer--red    { background: var(--asb-red);        color: var(--on-dark); }
.stoerer--dark   { background: var(--asb-anthracite); color: var(--on-dark); }

/* Größen */
.stoerer--sm { width: var(--stoerer-sm); height: var(--stoerer-sm); font-size: .8rem; }
.stoerer--lg { width: var(--stoerer-lg); height: var(--stoerer-lg); font-size: 1.05rem; }

/* Frei über ein Element gelegter Störer (Eyecatcher an einer Bild-/Kartenecke).
   pointer-events:none → blockiert nie den darunterliegenden Link.
   Elternelement braucht position:relative (z. B. .card, .split-media). */
.stoerer--float {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  box-shadow: var(--shadow);
}
.stoerer--tr { top: calc(-1 * var(--space-2)); right: calc(-1 * var(--space-2)); }
.stoerer--tl { top: calc(-1 * var(--space-2)); left:  calc(-1 * var(--space-2)); }
.stoerer--br { bottom: calc(-1 * var(--space-2)); right: calc(-1 * var(--space-2)); }
/* „Inset“-Varianten sitzen INNERHALB des Elements — für Container mit
   overflow:hidden (z. B. .card), wo herausragende Störer geclippt würden. */
.stoerer--inset-tr { top: var(--space-2); right: var(--space-2); }
.stoerer--inset-tl { top: var(--space-2); left:  var(--space-2); }

/* Nicht-klippender Anker: umschließt ein gerundetes Bild (overflow:hidden),
   damit ein außen überlappender Störer nicht abgeschnitten wird. */
.stoerer-anchor { position: relative; }

/* Dezente Einblendung NUR ohne reduced-motion-Wunsch (sonst sofort sichtbar). */
@media (prefers-reduced-motion: no-preference) {
  .stoerer--float {
    animation: stoerer-pop var(--motion) ease-out both;
  }
  @keyframes stoerer-pop {
    from { opacity: 0; transform: scale(.85); }
    to   { opacity: 1; transform: scale(1); }
  }
}

/* -------------------------------------------------------------
   AKKORDEON (z. B. FAQ / Pflegekosten). Funktioniert auch ohne JS:
   nutzt <details>/<summary> als progressive Basis.
------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--border); }
.accordion details {
  border-bottom: 1px solid var(--border);
}
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-2) 0;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--asb-red);
  transition: transform var(--motion) ease;
}
.accordion details[open] summary::after { content: "–"; }
.accordion .acc-panel { padding-bottom: var(--space-3); }

/* -------------------------------------------------------------
   FOOTER
------------------------------------------------------------- */
.site-footer {
  background: var(--bg-dark);
  color: var(--on-dark);
  padding-block: var(--space-6) var(--space-4);
}
/* Footer-Links sind weiß — Buttons aber NICHT (sonst weißer Text auf weißem
   Button-Grund → unsichtbar). Buttons behalten ihre eigenen Farben. */
.site-footer a:not(.btn) { color: var(--on-dark); }
.footer-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.footer-col h3 {
  font-size: 1.05rem;
  color: var(--on-dark);
  margin-bottom: var(--space-2);
}
.footer-col ul { list-style: none; display: grid; gap: .5rem; }
.footer-col a {
  text-decoration: none;
  text-underline-offset: 3px;
}
.footer-col a:hover { text-decoration: underline; }

/* Job-Teaser im Footer (dezent). Gelb-Akzent mit anthrazitfarbenem Text. */
.job-teaser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  background: var(--asb-yellow);
  color: var(--asb-anthracite);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-5);
}
.job-teaser p { margin: 0; color: var(--asb-anthracite); max-width: none; }
.job-teaser .jt-title { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; }

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: var(--fs-small);
}
.footer-meta nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.footer-meta a { text-decoration: none; }
.footer-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-copy { color: rgba(255,255,255,.8); }

/* Paritätischer-Logo als Vertrauensbadge — auf weißer Platte, da der Footer dunkel ist. */
.footer-paritaet { margin-top: var(--space-3); max-width: none; }
.footer-paritaet img {
  background: #fff;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  width: auto; height: 46px;
}

/* =============================================================
   MARKENBÜHNE (CD-Layoutsystem)
   -------------------------------------------------------------
   Gelbe Markenfläche mit Logo + Claim, die auf einem Bildmotiv aufsitzt
   und unten bündig abschließt (Logo links, Claim rechts). Bewusst EIN
   prägnanter Block — kein gelb geflutetes Vollbild. Die Seiten-Headline
   steht darüber auf weißem Grund (kein zweites Gelb auf derselben
   Sichtfläche → CD-Doppelungsverbot eingehalten).
   Sonderfall sensible Themen: .markenbuehne--sensibel (Anthrazit 20 %).
============================================================= */
.markenbuehne { padding-block: var(--space-5) var(--space-5); }

.mb-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 62ch;
  margin-bottom: var(--space-4);
}
.mb-intro h1 { margin: 0; }
.mb-intro .mb-lead {
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  color: var(--text-muted);
  max-width: 58ch;
}
.mb-intro .hero-actions { margin-top: var(--space-1); }

/* Bild + aufsitzende gelbe Bühne */
.mb-frame { position: relative; }
.mb-media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--asb-anthracite-10);
  box-shadow: var(--shadow);
}
.mb-media img { width: 100%; height: 100%; object-fit: cover; }

/* Die gelbe Bühnenfläche: Logo + Claim, unten bündig abschließend. */
.mb-stage {
  background: var(--asb-yellow);
  color: var(--asb-anthracite);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  flex-wrap: wrap;
}
/* Claim auf der Bühne: ASB-Rot, zweizeilig (Rot auf Gelb ≈ 5.4:1 → AA). */
.mb-stage .claim {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  margin-left: auto;
  text-align: right;
}

/* Logo auf der gelben Bühne: weiße Platte (CD: Logo nur auf Weiß/hell, nicht
   direkt auf Gelb). Trägt das echte Wohnpark-Logo. */
.mb-logo {
  display: inline-flex;
  align-items: center;
  padding: .7rem 1rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 12px rgba(45, 45, 70, .14);
}
.mb-logo img { height: 44px; width: auto; display: block; }

/* Schmales Handy: Bühne stapeln (Logo oben, Claim darunter, linksbündig),
   damit der Claim nicht aus der gelben Fläche herausläuft. */
@media (max-width: 719px) {
  .mb-stage {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .mb-stage .claim {
    margin-left: 0;
    text-align: left;
  }
}

/* Ab Tablet sitzt die gelbe Bühne als Band unten auf dem Bild auf. */
@media (min-width: 720px) {
  .markenbuehne { padding-bottom: var(--space-6); }
  .mb-stage {
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    bottom: calc(-1 * var(--space-3));
    margin-top: 0;
  }
}

/* Sonderfall sensible Themen: statt Gelb eine Anthrazit-20-%-Fläche.
   Text bleibt anthrazit (Kontrast ~9:1), Claim ausnahmsweise anthrazit
   statt Rot, da Rot auf Anthrazit-20 % zu schwach wäre. */
.markenbuehne--sensibel .mb-stage { background: var(--asb-anthracite-20); }
.markenbuehne--sensibel .mb-stage .claim { color: var(--asb-anthracite); }

/* Startseiten-Hero (.markenbuehne--split, nur Startseite): durchgehend VOLLE BREITE.
   Text-Band oben (Intro über die ganze Breite), darunter das Markenbild als breites
   Banner mit der gelben Bühne (Logo links, Claim rechts) am unteren Rand — konsistent
   mit der Unterseite und robust ohne :has(). Lead ohne Breitenbeschränkung (auf Wunsch). */
.markenbuehne--split .mb-intro { max-width: none; }
.markenbuehne--split .mb-intro .mb-lead { max-width: none; }
/* Ab Tablet/Desktop ein breites Kino-Banner statt eines hohen 16:9-Blocks
   (gilt für Start- UND Unterseite → einheitliche Bildwirkung). */
@media (min-width: 720px) {
  .markenbuehne .mb-media { aspect-ratio: 2.4 / 1; }
}

/* =============================================================
   GELBE AKZENT-FLÄCHEN (CD: Flächen-Elemente zur Hervorhebung)
   -------------------------------------------------------------
   Gezielt gesetzte gelbe Sektionen — NIE auf derselben Sichtfläche wie
   die Markenbühne (genug Abstand zwischen den gelben Blöcken halten).
   Text immer Anthrazit.
============================================================= */
.section--accent      { background: var(--asb-yellow);      color: var(--asb-anthracite); }
.section--accent-soft { background: var(--asb-yellow-soft); color: var(--asb-anthracite); }
.section--accent-tint { background: var(--asb-yellow-tint); color: var(--asb-anthracite); }
.section--accent h2,
.section--accent h3,
.section--accent-soft h2,
.section--accent-soft h3,
.section--accent-tint h2,
.section--accent-tint h3 { color: var(--asb-anthracite); }
.section--accent .section-head p { color: var(--asb-anthracite); }

/* Kennzahlen auf Gelb: keine graue Karten-Fläche, nur Zahlen + Trennung. */
.section--accent .stat,
.section--accent-soft .stat {
  background: rgba(255, 255, 255, .45);
}
.section--accent .stat .stat-label,
.section--accent-soft .stat .stat-label { color: var(--asb-anthracite); }

/* Hervorhebungs-Box (Zitat/Headline/Kurztext) als gelbe Farbfläche. */
.callout--yellow {
  background: var(--asb-yellow);
  color: var(--asb-anthracite);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.callout--yellow > * { max-width: none; color: var(--asb-anthracite); }
.callout--yellow .callout-title {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-h3); margin-bottom: var(--space-1);
}

/* =============================================================
   ASB-ICONS (Platzhalter im CD-Stil)
   -------------------------------------------------------------
   CD: Outline, abgerundete Ecken, gleichmäßige Linienstärke, rote Outline
   + gelbes Highlight. Diese Inline-SVGs sind Platzhalter — echte Icons aus
   RITA (assets/icons/) sind ein reiner SVG-Tausch. Icons sind dekorativ
   (aria-hidden) — die Kartenbedeutung steht im Text.
============================================================= */
.asb-icon { width: 100%; height: 100%; display: block; }
.asb-icon .ai-hl   { fill: var(--asb-yellow); stroke: none; }   /* gelbes Highlight */
.asb-icon .ai-line {
  fill: none;
  stroke: var(--asb-red);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Runder Icon-Chip, der die Bildunterkante der Karte überlappt. */
.card-body { position: relative; }
.card-iconwrap {
  position: absolute;
  top: 0;
  left: var(--space-3);
  transform: translateY(-50%);
  width: 64px; height: 64px;
  padding: 13px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--asb-anthracite-10);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
}
/* Platz für den überlappenden Chip schaffen. */
.card .card-body { padding-top: calc(var(--space-3) + 24px); }

/* =============================================================
   HEADER-CTA — „Anrufen“-Button (Zielgruppe Senioren/Angehörige,
   Kontakt immer einen Klick entfernt). Mobil nur Icon (≥44px).
============================================================= */
.header-inner > .brand { margin-right: auto; }
.header-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.header-cta .hours {
  font-family: var(--font-head); font-weight: 700;
  font-size: .72rem; color: var(--text-muted); white-space: nowrap;
}
.btn--call {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: var(--tap-min); min-width: var(--tap-min);
  padding: .5rem 1rem;
  background: var(--asb-red); color: var(--on-dark);
  border: 2px solid var(--asb-red); border-radius: var(--radius);
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  text-decoration: none; white-space: nowrap;
  transition: background var(--motion) ease, border-color var(--motion) ease;
}
.btn--call:hover { background: var(--asb-red-dark); border-color: var(--asb-red-dark); }
.btn--call svg { width: 1.2em; height: 1.2em; flex: none; }
@media (max-width: 620px) {
  .btn--call { padding: .5rem; }
  .btn--call .call-num { display: none; }
  .header-cta .hours { display: none; }
}

/* =============================================================
   GEPUNKTETE ASB-LINIEN (CD-Linienelement: optische Unterteilung)
============================================================= */
.asb-dotline { border: 0; border-top: 3px dotted var(--asb-red); opacity: .5; margin: 0; }
/* Kurzer dekorativer Dot-Akzent unter (zentrierten) Headlines. */
.dot-accent { width: 56px; height: 0; border-top: 3px dotted var(--asb-red); opacity: .7; margin-top: var(--space-2); }
.section-head.is-center .dot-accent { margin-inline: auto; }

/* =============================================================
   KARTEN-HOVER: Bild-Zoom (lebendiger, Bild bleibt durch overflow gerundet)
============================================================= */
.card-media { overflow: hidden; }
.card-media img { transition: transform 400ms ease; }
.card:hover .card-media img,
.card:focus-within .card-media img { transform: scale(1.05); }

/* =============================================================
   KENNZAHLEN — größere Zahlen + gepunkteter Trenner (CD)
============================================================= */
.stat { position: relative; }
.stat .stat-num { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); }
@media (min-width: 700px) {
  .stats .stat + .stat::before {
    content: ""; position: absolute;
    left: calc(-1 * var(--space-3) / 2 - 1px);
    top: 18%; bottom: 18%;
    border-left: 3px dotted var(--asb-anthracite);
    opacity: .35;
  }
}

/* =============================================================
   ANSPRECHPARTNER / BERATUNGS-KARTE (Vertrauen, Zielgruppe)
============================================================= */
.person-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.person-media { aspect-ratio: 4 / 3; background: var(--asb-anthracite-10); }
.person-media img { width: 100%; height: 100%; object-fit: cover; }
.person-body { padding: var(--space-3); display: grid; gap: .4rem; }
.person-kicker {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-small); letter-spacing: .06em; text-transform: uppercase;
  color: var(--asb-red);
}
.person-name { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; }
.person-role { color: var(--text-muted); font-size: var(--fs-small); }
.person-body p { font-size: var(--fs-small); margin: 0; max-width: none; }

/* =============================================================
   PROZESS-SCHRITTE „Ihr Weg zu uns“
============================================================= */
.steps { display: grid; gap: var(--space-3); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  position: relative;
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3) var(--space-3);
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--asb-yellow); color: var(--asb-anthracite);
  font-family: var(--font-head); font-weight: 700; font-size: 1.25rem;
  margin-bottom: var(--space-2);
}
.step h3 { margin: 0 0 var(--space-1); }
.step p { font-size: var(--fs-small); margin: 0; max-width: none; }
@media (min-width: 760px) {
  .step + .step::before {
    content: "›"; position: absolute;
    left: calc(-1 * var(--space-3) / 2); top: 50%;
    transform: translateY(-50%);
    color: var(--asb-anthracite-60); font-size: 1.8rem; font-weight: 700;
  }
}

/* =============================================================
   SCROLL-REVEAL — nur mit JS aktiv (html.js-reveal) und nur ohne
   reduced-motion-Wunsch. Ohne JS bleibt alles sofort sichtbar.
============================================================= */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
  }
  html.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
  html.js-reveal .card-grid .card:nth-child(2).is-visible { transition-delay: 80ms; }
  html.js-reveal .card-grid .card:nth-child(3).is-visible { transition-delay: 160ms; }
  html.js-reveal .card-grid .card:nth-child(4).is-visible { transition-delay: 240ms; }
}