/* =========================================================================
   ALTERSVORSORGE — Wissensseite

   Gehört nur zu wissen/altersvorsorge/. Keine Regel hier verändert etwas
   auf einer anderen Seite. Alle Klassen beginnen mit av.

   Farblogik wie überall auf der Website:
     dunkelbraun  = dein eigenes Geld
     orange       = Förderung, Zulagen, Hinweis
     helles Beige = Wertentwicklung, also Geld, das nicht von dir kommt
   ========================================================================= */

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.av-hero h1 {
  max-width: 20ch;
}
/* Die zweite Zeile ist bewusst kleiner. Sie erklärt die erste, sie ist
   nicht gleichwertig. Kein max-width hier — sonst kämpft es mit dem
   max-width der Überschrift. */
.av-hero h1 .italic {
  display: block;
  font-size: 0.55em;
  line-height: 1.3;
  margin-top: 12px;
}
.av-hero .lede {
  max-width: 58ch;
  margin-top: 18px;
}
.av-hero .cta-row {
  margin-top: 28px;
}

@media (min-width: 1000px) {
  .av-hero h1 { max-width: 17ch; }
  .av-hero h1 .italic { font-size: 0.48em; }
}

/* Zwei Spalten ab 900 px. Darunter steht der Text oben und das Bild
   darunter — geregelt über die Reihenfolge im Raster, nicht über eine
   zweite Kopie im Markup. */
.avh-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.avh-text { min-width: 0; }
.avh-bild { min-width: 0; position: relative; }

.avh-bild picture,
.avh-bild img {
  display: block;
  width: 100%;
  height: clamp(380px, 46vw, 560px);
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
}

@media (max-width: 899px) {
  .avh-raster { grid-template-columns: 1fr; gap: 30px; }
  .avh-text  { order: 1; }
  .avh-bild  { order: 2; }
  /* Hochformat auf dem Handy. Ein breiter Streifen würde Kopf oder
     Oberkörper anschneiden, und genau das soll nicht passieren. */
  .avh-bild picture,
  .avh-bild img {
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 62vh;
    object-position: 50% 18%;
  }
}

/* -------------------------------------------------------------------------
   Zahlenkacheln „Warum für Frauen"
   ------------------------------------------------------------------------- */

.av-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  margin-top: 30px;
}

.avz-karte {
  background: var(--white);
  border-radius: var(--r);
  border: 1px solid rgba(90, 60, 35, 0.08);
  box-shadow: var(--shadow-card);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.avz-karte.ist-gross {
  background: var(--charcoal);
  border-color: transparent;
}

.avz-wert {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--orange);
}
.avz-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--warm-grey);
}
.ist-gross .avz-label { color: var(--orange-light); }

.avz-text {
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--anthracite);
}
.ist-gross .avz-text { color: rgba(255, 255, 255, 0.8); }
.avz-text b { color: var(--charcoal); font-weight: 600; }
.ist-gross .avz-text b { color: var(--white); }

.avz-quelle,
.avz-stand {
  font-size: 0.7rem;
  color: var(--warm-grey);
  margin-top: auto;
  padding-top: 10px;
}
.avz-quelle {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
}
.avz-quelle:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
.ist-gross .avz-quelle { color: rgba(255, 255, 255, 0.5); }
.ist-gross .avz-quelle:hover { color: var(--orange-light); border-bottom-color: var(--orange-light); }

/* Zwei Werte nebeneinander: Frauen und Männer */
.avz-paar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 12px;
}
.avz-paar::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  width: 1px;
  height: 34px;
  background: rgba(90, 60, 35, 0.14);
  align-self: center;
}
.avzp-seite {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.avzp-seite:first-child { grid-column: 1; }
.avzp-seite.ist-mehr { grid-column: 3; }

.avzp-wert {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--orange);
}
.avzp-seite.ist-mehr .avzp-wert { color: var(--charcoal); }
.avzp-wer {
  font-size: 0.75rem;
  color: var(--warm-grey);
}

/* -------------------------------------------------------------------------
   Gründe für die Lücke
   ------------------------------------------------------------------------- */

.av-zwischen {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.02em;
  margin: 46px 0 18px;
}

.av-gruende {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 14px;
}
.avg-karte {
  background: var(--white);
  border-radius: var(--r-sm);
  border: 1px solid rgba(90, 60, 35, 0.08);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.avg-emoji { font-size: 1.35rem; line-height: 1; }
.avg-titel {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-top: 4px;
}
.avg-text {
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--anthracite);
}

.av-schluss {
  font-family: var(--serif-lesbar);
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.13rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--charcoal);
  max-width: 58ch;
  margin: 34px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--orange);
}

/* -------------------------------------------------------------------------
   Lebenssituationen
   Hier ist immer nur eine offen, deshalb auch auf dem Desktop ein Pfeil.
   ------------------------------------------------------------------------- */

.av-situationen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  margin-top: 28px;
  align-items: start;
}

.avl-karte {
  background: var(--white);
  border-radius: var(--r);
  border: 1px solid rgba(90, 60, 35, 0.09);
  overflow: hidden;
}
.avl-karte[open] {
  border-color: rgba(255, 97, 0, 0.4);
  box-shadow: var(--shadow-card);
}
.avl-karte > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  cursor: pointer;
  min-height: 44px;
}
.avl-karte > summary::-webkit-details-marker { display: none; }
.avl-karte > summary:hover .avl-titel { color: var(--orange-dark); }

.avl-emoji { font-size: 1.3rem; line-height: 1; flex: none; }
.avl-titel {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.35;
  transition: color 0.2s ease;
}
.avl-zeichen {
  flex: none;
  margin-left: auto;
  width: 10px; height: 10px;
  position: relative;
  opacity: 0.55;
  transition: transform 0.24s ease;
}
.avl-zeichen::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 7px; height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
}
.avl-karte[open] .avl-zeichen { transform: rotate(180deg); }

.avl-inhalt {
  padding: 0 20px 20px;
}
.avl-inhalt > p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--anthracite);
  margin: 0 0 14px;
}
.avl-schritte {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.avl-schritte li {
  counter-increment: schritt;
  position: relative;
  padding-left: 32px;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--charcoal);
}
.avl-schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0; top: -1px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--orange-pale);
  color: var(--orange-dark);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avl-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--orange-dark);
  text-decoration: none;
}
.avl-link:hover { color: var(--orange); }
.avl-link .btn-arrow { transition: transform 0.22s ease; }
.avl-link:hover .btn-arrow { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   Hinweis am Rentenlückenrechner
   ------------------------------------------------------------------------- */

.av-rechnerhinweis {
  background: var(--white);
  border: 1px solid rgba(90, 60, 35, 0.1);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-sm);
  padding: 18px 20px 16px;
  margin: 22px 0 0;
  max-width: 62ch;
}
.av-rechnerhinweis strong {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 8px;
}
.av-rechnerhinweis p {
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--anthracite);
  margin: 0 0 8px;
}
.av-rechnerlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--orange-dark);
  text-decoration: none;
}
.av-rechnerlink:hover { color: var(--orange); }
.av-rechnerlink .btn-arrow { transition: transform 0.22s ease; }
.av-rechnerlink:hover .btn-arrow { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   Was kostet Warten
   ------------------------------------------------------------------------- */

.av-warten {
  margin-top: 32px;
}
.avw-balken {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 3vw, 40px);
  align-items: end;
  height: 340px;
  padding: 0 4px;
}
.avw-spalte {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  min-width: 0;
}
.avw-summe {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.8rem + 1vw, 1.55rem);
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  white-space: nowrap;
}
.avw-saeule {
  width: 100%;
  max-width: 150px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 40px;
}
.avw-zuwachs,
.avw-eigen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}
.avw-zuwachs { background: var(--beige); }
.avw-eigen { background: var(--charcoal); }

.avw-teil {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 4px;
}
.avw-zuwachs .avw-teil { color: var(--charcoal); }
.avw-eigen .avw-teil { color: rgba(255, 255, 255, 0.9); }

.avw-start {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-top: 12px;
  text-align: center;
}
.avw-jahre {
  font-size: 0.75rem;
  color: var(--warm-grey);
  margin-top: 2px;
}

.avw-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 26px;
  font-size: 0.78rem;
  color: var(--anthracite);
}
.avw-legende span { display: inline-flex; align-items: center; gap: 7px; }
.avw-pkt-eigen,
.avw-pkt-zuwachs {
  width: 11px; height: 11px;
  border-radius: 3px;
  display: inline-block;
}
.avw-pkt-eigen { background: var(--charcoal); }
.avw-pkt-zuwachs { background: var(--beige); border: 1px solid rgba(90, 60, 35, 0.15); }

.avw-hinweis {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--warm-grey);
  margin: 12px 0 0;
  max-width: 68ch;
}

@media (max-width: 560px) {
  .avw-balken { height: 260px; gap: 9px; }
  .avw-teil { font-size: 0.63rem; }
  .avw-saeule { border-radius: 8px 8px 0 0; }
}
/* Unter 380 px stehen drei Beträge nebeneinander in je rund 87 px.
   „456.302 €" darf dort nicht über die Spalte hinauslaufen. */
@media (max-width: 380px) {
  .avw-balken { gap: 6px; height: 240px; }
  .avw-summe { font-size: 0.82rem; letter-spacing: -0.03em; }
  .avw-teil { font-size: 0.56rem; padding: 0 2px; }
  .avw-start { font-size: 0.78rem; }
  .avw-jahre { font-size: 0.7rem; }
}

/* -------------------------------------------------------------------------
   Familie und Elternzeit
   ------------------------------------------------------------------------- */

.av-elternzeit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 14px;
  margin-top: 30px;
}
.ave-phase {
  background: var(--white);
  border-radius: var(--r);
  border: 1px solid rgba(90, 60, 35, 0.08);
  padding: 24px 22px 22px;
  position: relative;
}
.ave-nr {
  position: absolute;
  top: 20px; right: 20px;
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sand);
}
.ave-emoji { font-size: 1.5rem; line-height: 1; display: block; }
.ave-phase h3 {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.02em;
  margin: 10px 0 12px;
  max-width: 20ch;
  position: relative;
}
.ave-phase ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ave-phase li {
  position: relative;
  padding-left: 18px;
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--anthracite);
}
.ave-phase li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.ave-phase li b { font-weight: 600; color: var(--charcoal); }

/* -------------------------------------------------------------------------
   Häufige Fehler
   ------------------------------------------------------------------------- */

.av-fehlerblock {
  background: var(--white);
  border-radius: var(--r);
  padding: clamp(26px, 4vw, 46px);
  box-shadow: var(--shadow-card);
}
.av-fehlerblock .section-head { margin-bottom: 26px; }

.av-merksatz {
  font-family: var(--serif-lesbar);
  font-size: clamp(1rem, 0.94rem + 0.4vw, 1.15rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--charcoal);
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 2px solid var(--orange);
  max-width: 60ch;
}

/* -------------------------------------------------------------------------
   Weiterführende Seiten
   ------------------------------------------------------------------------- */

.av-weiter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
  margin-top: 26px;
}
.avwf-karte {
  background: var(--white);
  border-radius: var(--r-sm);
  border: 1px solid rgba(90, 60, 35, 0.09);
  padding: 20px 20px 18px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 44px;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.avwf-karte:hover {
  border-color: rgba(255, 97, 0, 0.4);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.avwf-emoji { font-size: 1.3rem; line-height: 1; }
.avwf-titel {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-top: 3px;
}
.avwf-text {
  font-size: 0.85rem;
  line-height: 1.58;
  color: var(--anthracite);
}
.avwf-karte .btn-arrow {
  color: var(--orange-dark);
  margin-top: 6px;
  transition: transform 0.22s ease;
}
.avwf-karte:hover .btn-arrow { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   Abschluss
   ------------------------------------------------------------------------- */

.av-abschluss {
  background: var(--charcoal);
  padding: clamp(56px, 8vw, 104px) 0;
}
.ava-inner {
  max-width: 640px;
}
.ava-inner .eyebrow { color: var(--orange-light); }
.ava-inner h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--white);
  margin: 0 0 16px;
}
.ava-inner > p {
  font-size: 0.96rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 28px;
  max-width: 56ch;
}
.ava-meta {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 16px 0 0;
}
.ava-pe {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 8px 0 0;
}
.ava-pe span[aria-hidden] { color: var(--orange-light); letter-spacing: 0.08em; }

/* -------------------------------------------------------------------------
   Das Drei-Schichten-Modell

   Von oben nach unten 1 → 2 → 3. Eine senkrechte Linie am linken Rand
   verbindet die drei Nummern, damit man sieht: das ist eine Abfolge und
   keine Auswahl.
   ------------------------------------------------------------------------- */

.av-schichten {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
  position: relative;
}

.avsch-block {
  background: var(--white);
  border: 1px solid rgba(90, 60, 35, 0.09);
  border-radius: var(--r);
  padding: clamp(20px, 2.6vw, 30px);
  position: relative;
}
/* Schicht 1 trägt alles. Das darf man sehen. */
.avsch-basis {
  background: var(--charcoal);
  border-color: transparent;
}
.avsch-basis .avsch-text,
.avsch-basis .avschb-wer { color: rgba(255, 255, 255, 0.72); }
.avsch-basis .avsch-titelzeile h3 { color: var(--white); }
.avsch-basis .avsch-kurz { color: rgba(255, 255, 255, 0.55); }
.avsch-basis .avsch-nr { background: var(--orange); color: var(--white); }
.avsch-basis .avschb-karte { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.12); }
.avsch-basis a.avschb-karte:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 161, 99, 0.5); }
.avsch-basis .avschb-titel { color: var(--white); }
.avsch-basis .avschb-pfeil { color: var(--orange-light); }
.avsch-basis .avsch-merkmal { color: rgba(255, 255, 255, 0.45); border-top-color: rgba(255, 255, 255, 0.14); }
.avsch-basis .avsch-text b { color: var(--white); }

.avsch-kopf {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}
.avsch-nr {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avsch-titelzeile { min-width: 0; }
.avsch-titelzeile h3 {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.85vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin: 0;
  line-height: 1.25;
}
.avsch-kurz {
  font-family: var(--serif-lesbar);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--warm-grey);
}
.avsch-text {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--anthracite);
  margin: 0 0 18px;
  max-width: 68ch;
}
.avsch-text b { color: var(--charcoal); font-weight: 600; }

.avsch-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 10px;
}
.avsch-liste li { display: flex; }

/* Die Karte ist entweder ein <a> oder ein <span>. Beide sehen gleich
   aus, nur der Link reagiert und trägt einen Pfeil. So entsteht nie ein
   Link, hinter dem nichts liegt. */
.avschb-karte {
  flex: 1 1 auto;
  background: var(--offwhite);
  border: 1px solid rgba(90, 60, 35, 0.08);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  position: relative;
}
a.avschb-karte {
  min-height: 44px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
a.avschb-karte:hover {
  border-color: rgba(255, 97, 0, 0.45);
  background: var(--white);
  transform: translateY(-2px);
}
a.avschb-karte:hover .avschb-pfeil { transform: translateX(3px); }

.avschb-emoji { font-size: 1.2rem; line-height: 1; }
.avschb-titel {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.3;
  margin-top: 3px;
}
.avschb-wer {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--warm-grey);
}
.avschb-pfeil {
  position: absolute;
  top: 13px; right: 14px;
  font-size: 0.85rem;
  color: var(--orange-dark);
  transition: transform 0.2s ease;
}

.avsch-merkmal {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(90, 60, 35, 0.16);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--warm-grey);
}

.avsch-schluss { margin-top: 30px; max-width: 64ch; }
.avsch-schluss-gross {
  font-family: var(--serif-lesbar);
  font-size: clamp(1.02rem, 0.95rem + 0.45vw, 1.2rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--charcoal);
  margin: 0 0 10px;
  padding-left: 18px;
  border-left: 2px solid var(--orange);
}
.avsch-schluss-klein {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--warm-grey);
  margin: 0 0 0 20px;
}

/* -------------------------------------------------------------------------
   Aktuell-Kachel zur Reform
   ------------------------------------------------------------------------- */

.av-aktuell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(30px, 3.6vw, 46px);
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px);
  background: var(--white);
  border: 1px solid rgba(255, 97, 0, 0.35);
  border-left: 4px solid var(--orange);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}
.av-aktuell .ava-emoji { font-size: 1.7rem; line-height: 1; }
.ava-inhalt { min-width: 0; }
.ava-kennzeichen {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--orange);
  border-radius: 999px;
  padding: 3px 9px;
  margin-bottom: 8px;
}
.av-aktuell h3 {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.95rem + 0.65vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  line-height: 1.3;
  margin: 0 0 5px;
}
.av-aktuell p {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--anthracite);
  margin: 0;
}
.ava-link {
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--orange-dark);
  text-decoration: none;
}
.ava-link:hover { color: var(--orange); }
.ava-link .btn-arrow { transition: transform 0.22s ease; }
.ava-link:hover .btn-arrow { transform: translateX(3px); }

@media (max-width: 820px) {
  /* Der Link rutscht unter den Text. Nebeneinander bliebe für die
     Überschrift zu wenig Platz. */
  .av-aktuell { grid-template-columns: auto minmax(0, 1fr); }
  .ava-link { grid-column: 1 / -1; white-space: normal; }
}

/* -------------------------------------------------------------------------
   Der Navigator
   ------------------------------------------------------------------------- */

.av-navigator { margin-top: 30px; }

.avn-wahl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
/* Fünf Knöpfe passen nur auf breiten Bildschirmen nebeneinander.
   Darunter 3 + 2 und 2 + 2 + 1 — das liest sich ruhiger als 4 + 1. */
@media (max-width: 999px) { .avn-wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .avn-wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.avn-knopf {
  font: inherit;
  background: var(--white);
  border: 1px solid rgba(90, 60, 35, 0.12);
  border-radius: var(--r-sm);
  padding: 16px 14px;
  min-height: 44px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  color: var(--charcoal);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.avn-knopf:hover { border-color: rgba(255, 97, 0, 0.45); }
.avn-knopf[aria-selected="true"] {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--white);
}
.avnk-emoji { font-size: 1.4rem; line-height: 1; }
.avnk-titel {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
}

.avn-feld {
  background: var(--white);
  border: 1px solid rgba(90, 60, 35, 0.09);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  padding: clamp(22px, 3vw, 34px);
  margin-top: 14px;
}
.avn-feld[hidden] { display: none; }

.avn-einleitung {
  font-size: 0.94rem;
  line-height: 1.68;
  color: var(--anthracite);
  margin: 0 0 16px;
  max-width: 70ch;
}
.avn-einleitung b { color: var(--charcoal); font-weight: 600; }

.avn-hinweis {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 15px 17px;
  margin-bottom: 22px;
  max-width: 70ch;
}
.avn-hinweis p {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--anthracite);
  margin: 0;
}
.avn-hinweis b { color: var(--charcoal); font-weight: 700; }
.avn-quelle {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--warm-grey);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.avn-quelle:hover { color: var(--orange-dark); border-bottom-color: var(--orange); }

.avn-gruppen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 14px;
}
.avn-gruppe {
  border-radius: var(--r-sm);
  padding: 16px 17px;
  background: var(--offwhite);
  border-top: 3px solid var(--sand);
}
/* Die Farbe sagt, um welche Schicht es geht. */
.avn-basis   { border-top-color: var(--charcoal); }
.avn-zusatz  { border-top-color: var(--orange); }
.avn-privat  { border-top-color: var(--sage-deep); }
.avn-klaeren { border-top-color: var(--orange); background: var(--orange-pale); }

.avn-gruppentitel {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin-bottom: 10px;
}
.avn-klaeren .avn-gruppentitel { color: var(--orange-dark); }

.avn-gruppe ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.avn-gruppe li {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.avn-eintrag {
  font-size: 0.87rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--charcoal);
}
/* Heißt bewusst avn-detail und nicht avn-zusatz. Letzteres ist schon
   die Klasse der mittleren Gruppe — zwei Bedeutungen für einen Namen
   führen früher oder später zu einer Regel, die zufällig greift. */
.avn-detail {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--warm-grey);
}

.avn-fussnote {
  font-size: 0.83rem;
  line-height: 1.62;
  color: var(--warm-grey);
  margin: 20px 0 0;
  padding-left: 15px;
  border-left: 2px solid var(--sand);
  max-width: 72ch;
}
.avn-fussnote b { color: var(--charcoal); font-weight: 600; }

.avn-cta { margin-top: 24px; }

/* -------------------------------------------------------------------------
   Alle Bausteine im Vergleich
   Zwei Ebenen Accordion: Schicht, darin Baustein.
   ------------------------------------------------------------------------- */

.av-bausteine {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.avb-schicht {
  background: var(--white);
  border: 1px solid rgba(90, 60, 35, 0.09);
  border-radius: var(--r);
  overflow: hidden;
}
.avb-schicht > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  cursor: pointer;
  min-height: 44px;
}
.avb-schicht > summary::-webkit-details-marker { display: none; }
.avbs-nr {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avbs-titel {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--charcoal);
}
.avbs-anzahl {
  font-size: 0.75rem;
  color: var(--warm-grey);
  margin-left: auto;
  white-space: nowrap;
}
@media (max-width: 620px) {
  /* Auf dem Handy fehlt der Platz. Der Pfeil sagt ohnehin, dass sich
     hier etwas öffnet. */
  .avbs-anzahl { display: none; }
  .avb-schicht > summary { padding: 17px 16px; gap: 11px; }
}
.avbs-zeichen,
.avb-zeichen {
  flex: none;
  width: 10px; height: 10px;
  position: relative;
  opacity: 0.5;
  transition: transform 0.24s ease;
}
.avbs-zeichen { margin-left: 12px; }
.avb-zeichen  { margin-left: auto; }
.avbs-zeichen::before,
.avb-zeichen::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 7px; height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
}
.avb-schicht[open] > summary .avbs-zeichen,
.avb-karte[open] > summary .avb-zeichen { transform: rotate(180deg); }

.avb-liste {
  padding: 0 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.avb-karte {
  background: var(--offwhite);
  border: 1px solid rgba(90, 60, 35, 0.08);
  border-radius: var(--r-sm);
  overflow: hidden;
  scroll-margin-top: 100px;
}
.avb-karte[open] { border-color: rgba(255, 97, 0, 0.35); background: var(--white); }
.avb-karte > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 17px;
  cursor: pointer;
  min-height: 44px;
}
.avb-karte > summary::-webkit-details-marker { display: none; }
.avb-karte > summary:hover .avb-titel { color: var(--orange-dark); }
.avb-emoji { flex: none; font-size: 1.2rem; line-height: 1; }
.avb-titel {
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.3;
  transition: color 0.2s ease;
}

.avb-inhalt { padding: 0 17px 18px; }
.avb-was {
  font-size: 0.89rem;
  line-height: 1.65;
  color: var(--anthracite);
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(90, 60, 35, 0.1);
  max-width: 72ch;
}

.avb-felder {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px 26px;
}
.avb-feld { min-width: 0; }
.avb-feld dt {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin-bottom: 4px;
}
.avb-feld dd {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--anthracite);
}
.avb-feld dd b { color: var(--charcoal); font-weight: 600; }

.avb-mehr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--orange-dark);
  text-decoration: none;
}
.avb-mehr:hover { color: var(--orange); }
.avb-mehr .btn-arrow { transition: transform 0.22s ease; }
.avb-mehr:hover .btn-arrow { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   Aha-Kasten und Schrittliste in den Lebenssituationen
   ------------------------------------------------------------------------- */

.avl-text { margin: 0 0 14px; }

.avl-aha {
  background: var(--charcoal);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.avl-ahatitel {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-light);
  margin-bottom: 7px;
}
.avl-aha p {
  font-size: 0.87rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.avl-aha b { color: var(--white); font-weight: 700; }

.avl-schrittelabel {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin-bottom: 10px;
}

.avl-fussnote {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--warm-grey);
  margin: 16px 0 0;
  padding-left: 15px;
  border-left: 2px solid var(--sand);
}

/* -------------------------------------------------------------------------
   Der Kundinnen-Case hinter dem Rechner

   ZU DEN ABSTÄNDEN
   Oben braucht der Case Luft zum Rechner-Aufruf, damit er als eigener
   Baustein gelesen wird. Unten dagegen gehört er dicht an die nächste
   Sektion — vorher stand er in einer großen leeren Fläche und wirkte
   wie ein vergessenes Element.

   Deshalb bekommt die Rechner-Sektion an dieser Stelle unten weniger
   Innenabstand als sonst. Die Regel steht bewusst hier bei den anderen
   Case-Regeln und nicht irgendwo in style.css.
   ------------------------------------------------------------------------- */

#rechner .av-case { margin-top: clamp(46px, 6vw, 84px); }

/* Der Case schließt die Sektion ab. Danach folgt „Was kostet Warten?"
   direkt, ohne Loch dazwischen. */
#rechner { padding-bottom: clamp(34px, 4vw, 56px) !important; }

/* „Was kostet Warten?" schließt direkt an. Beide Sektionen liegen auf
   demselben cremefarbenen Grund, deshalb ist die Kante ohnehin
   unsichtbar — der Abstand darf klein sein. */
#warten { padding-top: clamp(38px, 4.5vw, 64px) !important; }

.av-case {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: clamp(20px, 3vw, 42px);
  align-items: stretch;
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  max-width: 960px;
}

.avc-bild { min-width: 0; }
.avc-bild picture,
.avc-bild img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  /* Gesicht im oberen Drittel. Ausschnitt gerendert und angesehen. */
  object-position: 50% 12%;
}

.avc-text {
  min-width: 0;
  padding: clamp(24px, 3vw, 38px) clamp(22px, 3vw, 38px) clamp(24px, 3vw, 34px) 0;
  display: flex;
  flex-direction: column;
}

.avc-label {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-dark);
}
.avc-wer {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin: 6px 0 20px;
}

.avc-schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
/* Eine Linie verbindet die drei Schritte. Sie sind eine Abfolge und
   keine Aufzählung. */
.avc-schritte::before {
  content: "";
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--sand), var(--orange), var(--sand));
}

.avc-schritt {
  position: relative;
  padding-left: 24px;
}
.avc-schritt::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--sand);
}
.avc-schritt:last-child::before { border-color: var(--orange); background: var(--orange); }

.avc-phase {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin-bottom: 5px;
}
.avc-schritt blockquote {
  margin: 0;
  font-family: var(--serif-lesbar);
  font-size: clamp(0.98rem, 0.92rem + 0.4vw, 1.14rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--charcoal);
}
.avc-schritt blockquote::before { content: "„"; }
.avc-schritt blockquote::after  { content: "“"; }

.avc-schritt.ist-sachlich p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--anthracite);
}

.avc-cta {
  align-self: flex-start;
  margin-top: 22px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--orange-dark);
  text-decoration: none;
}
.avc-cta:hover { color: var(--orange); }
.avc-cta .btn-arrow { transition: transform 0.22s ease; }
.avc-cta:hover .btn-arrow { transform: translateX(3px); }

.avc-hinweis {
  margin: 14px 0 0;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--warm-grey);
}

@media (max-width: 760px) {
  .av-case { grid-template-columns: 1fr; gap: 0; }
  .avc-bild picture,
  .avc-bild img {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .avc-text { padding: clamp(20px, 5vw, 28px); }
}

/* -------------------------------------------------------------------------
   Weiterweg unter dem Zeitdiagramm
   ------------------------------------------------------------------------- */

.avw-weiter {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(90, 60, 35, 0.12);
}
.avw-weiter p {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin: 0 0 14px;
  max-width: 40ch;
}

/* -------------------------------------------------------------------------
   Häufige Fehler, nummeriert
   ------------------------------------------------------------------------- */

.av-fehler {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 4px 34px;
}
.avf-punkt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(90, 60, 35, 0.1);
}
.avf-nr {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sand);
  letter-spacing: -0.02em;
}
.avf-text h3 {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.35;
  margin: 0 0 6px;
}
.avf-kurz {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--charcoal);
  margin: 0 0 6px;
}
.avf-lang {
  font-size: 0.85rem;
  line-height: 1.62;
  color: var(--warm-grey);
  margin: 0;
}
.avf-lang b, .avf-kurz b { color: var(--charcoal); font-weight: 600; }
.avf-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--orange-dark);
  text-decoration: none;
}
.avf-link:hover { color: var(--orange); }

/* -------------------------------------------------------------------------
   Weniger Bewegung
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .avl-link .btn-arrow,
  .av-rechnerlink .btn-arrow,
  .avwf-karte,
  .avwf-karte .btn-arrow,
  .avb-mehr .btn-arrow,
  .avbs-zeichen,
  .avb-zeichen,
  .avn-knopf,
  .ava-zeichen,
  .avl-zeichen {
    transition: none;
  }
  .avwf-karte:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   NACHZÜGLER FÜR SCHMALE GERÄTE

   Diese beiden Regeln standen weiter oben in einem @media-Block — und
   wurden von den Grundregeln darunter wieder aufgehoben. Bei gleicher
   Spezifität gewinnt die spätere Regel, unabhängig davon, ob eine
   Medienabfrage sie umschließt.

   Sie stehen deshalb hier ganz unten. Der Mobiltest prüft diese
   Fehlerklasse jetzt automatisch — gefunden wurden die beiden von ihm.
   ------------------------------------------------------------------------- */

@media (max-width: 620px) {
  /* Ohne die Anzahl daneben soll der Pfeil ganz nach rechts. */
  .avbs-zeichen { margin-left: auto; }
  /* Enger, weil der Rand des Bildschirms bereits Abstand genug ist. */
  .avb-liste { padding: 0 10px 12px; }
}