/* ============================================================
   PROJEKT — Komponenten dieses Projekts über base.css hinaus.
   KEINE Rohwerte: alles referenziert tokens.css (Audit-Regel 4).
   Jede Klasse hier existiert zuerst im Styleguide, dann auf Seiten.
   ============================================================ */

/* Plakat-Headline: Hero-H1 nimmt die volle Display-Stufe (Typo-Sprung 2.4) */
.h-plakat { font-size: var(--text-display); letter-spacing: -0.015em; }

/* Kicker: Zeile in Akzentfarbe über einer Headline (ZEIT-Abstraktion).
   Sentence case, KEIN uppercase, KEIN letter-spacing (Verbotskatalog). */
.kicker {
  font-family: var(--schrift-display);
  font-weight: 700;
  color: var(--farbe-akzent);
  font-size: var(--text-m);
}

/* Die EINE Dunkelfläche pro Seite (Oberflächen-Register: Tönung) */
.band--dunkel { background: var(--farbe-dunkel); color: var(--farbe-auf-dunkel); }
.band--dunkel h2, .band--dunkel h3, .band--dunkel a { color: inherit; }
.band--dunkel .meta { color: color-mix(in srgb, var(--farbe-auf-dunkel) 72%, transparent); }
.band--dunkel .kennzahl { color: var(--farbe-akzent-hell); }

/* Kräftige Kontur: Fassung für Karten mit Gewicht.
   Regel: pro Elementklasse Kontur ODER Schatten, nie beides. */
.karte--kontur { border: var(--kontur); box-shadow: var(--schatten-keine); }

/* Flacher Schatten: Job = Beweis- und Interaktions-Elemente abheben
   (Bewertungskarten, Formularkarte, freigestellte Bilder). */
.abgehoben { box-shadow: var(--schatten-flach); border: none; }

/* Primärer CTA trägt den Akzent-Verlauf (einzige Verlaufs-Klasse) */
.knopf:not(.knopf--sekundaer) {
  background: var(--verlauf-akzent);
  border-color: var(--farbe-akzent-tief);
  font-weight: 700;
}
.knopf--sekundaer { border: var(--kontur); font-weight: 700; }

/* Meta-Zeile unter Karten (ZEIT-Abstraktion: Bildkopf-Karte mit Fußzeile) */
.karte .meta { margin-top: auto; }

/* ============================================================
   KOMPOSITION Linie B "Bühne" — Port aus sektions-varianten.html v5,
   freigegeben von Paul am 03.08.2026. Vertrag: dna.yaml → komposition.
   Klassennamen behalten das b-Präfix der freigegebenen Linie.
   ============================================================ */

/* Chrome: Header sticky, volle Breite, Logo groß, schrumpft beim Scrollen */
.b-header { background: var(--farbe-flaeche); box-shadow: var(--schatten-flach); position: sticky; top: 0; z-index: 50; }
.b-header__zeile { display: flex; align-items: center; gap: var(--raum-3); padding: var(--raum-2) var(--raum-3); transition: padding .25s ease; }
.b-header__nav { display: flex; gap: var(--raum-3); margin-left: auto; align-items: center; flex-wrap: wrap; }
.b-header__nav a {
  text-decoration: none; color: var(--farbe-text); font-weight: 600;
  font-size: var(--text-m); text-underline-offset: .35em;
}
.b-header__nav a:hover { text-decoration: underline; }
.b-header__nav a[aria-current="page"] { color: var(--farbe-akzent); text-decoration: underline; }
.b-header__nav a.knopf { color: var(--farbe-auf-akzent); text-decoration: none; }
.b-header__logo { height: 4rem; width: auto; transition: height .25s ease; }
.b-header.geschrumpft .b-header__logo { height: 2.5rem; }
.b-header.geschrumpft .b-header__zeile { padding-block: var(--raum-1); }

/* Mobiles Menü: details-basiert, ohne JS-Pflicht, nur unter 900px sichtbar */
.mobilmenue { display: none; margin-left: auto; position: relative; }
.mobilmenue summary { list-style: none; cursor: pointer; font-family: var(--schrift-display); font-weight: 700; padding: var(--raum-1) var(--raum-2); border: var(--linie); border-radius: var(--radius); }
.mobilmenue summary::-webkit-details-marker { display: none; }
.mobilmenue[open] summary { background: var(--farbe-flaeche-alt); }
.mobilmenue nav {
  position: absolute; right: 0; top: calc(100% + var(--raum-1)); z-index: 60;
  display: flex; flex-direction: column; gap: var(--raum-2); min-width: 16rem;
  background: var(--farbe-flaeche); box-shadow: var(--schatten-flach);
  border-radius: var(--ecke-klein); padding: var(--raum-3);
}
.mobilmenue nav a { text-decoration: none; color: var(--farbe-text); font-weight: 600; }
.mobilmenue nav a.knopf { color: var(--farbe-auf-akzent); }

/* Hero: Kopf links, Bild rechts (Oberkante auf der Kicker-Zeile);
   mobil folgt das Bild direkt auf die H1. Abstaende eng (Paul 03.08.2026). */
.b-hero { padding-block: var(--raum-4) calc(var(--raum-4) * 2 + var(--raum-3)); }
.b-hero__grid {
  display: grid; grid-template-columns: 10fr 11fr; gap: var(--raum-2) var(--raum-4);
  grid-template-areas: "kopf media" "rest media"; align-items: start;
}
.b-hero__kopf { grid-area: kopf; }
.b-hero__rest { grid-area: rest; }
.b-hero__media { grid-area: media; position: relative; }
.b-hero__grid h1 { font-size: var(--text-3xl); margin-top: var(--raum-2); }
.b-hero__media picture img { border-radius: var(--ecke-gross); box-shadow: var(--schatten-flach); aspect-ratio: 5 / 4; object-fit: cover; width: 100%; }
.b-formkarte { background: var(--farbe-flaeche); border-radius: var(--ecke-karte); box-shadow: var(--schatten-flach); padding: var(--raum-3); }
.trust {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(-1 * var(--raum-4) - var(--raum-3));
  width: min(30rem, 96%);
  background: var(--farbe-flaeche); border-radius: var(--ecke-karte); box-shadow: var(--schatten-flach);
  padding: var(--raum-2) var(--raum-3) var(--raum-3);
  text-align: center;
}
.trust h2 { font-size: var(--text-m); }
.trust__spalten { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--raum-2); margin-top: var(--raum-2); align-items: center; }
.trust__spalten img { max-height: 6rem; width: auto; margin-inline: auto; }
.trust__google strong { display: block; font-family: var(--schrift-display); font-weight: 700; }
.trust__sterne { color: var(--farbe-sterne); }

/* Inhaber-Zahlen (vertrauensleiste): Statement links, 2x2 Zahlen rechts */
.zahlen__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--raum-4); align-items: start; }
.zahlen__statement { font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-l); line-height: 1.4; }
/* text-l statt text-xl seit dem laengeren Erklaer-Statement (Text-Briefing 03.08.2026) */
.zahlen__vier { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-3) var(--raum-4); }
.zahlen__vier strong { display: block; font-family: var(--schrift-display); font-weight: 900; font-size: var(--text-2xl); }
.banken { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--raum-3); margin-top: var(--raum-4); }
.banken img { max-height: 2.8rem; width: auto; object-fit: contain; }
.banken img.banken--sparkasse { max-height: 2.2rem; }

/* Kopf-Split: schmale Titel-Spalte links, Inhalt rechts */
.b-split { display: grid; grid-template-columns: 1fr 2fr; gap: var(--raum-4); align-items: start; }
.b-split--fuss { align-items: end; }

/* Vier Wege: Titel-Liste links, fester Panel-Bereich rechts (kein Höhen-Jump) */
.wege { display: grid; grid-template-columns: 5fr 7fr; gap: var(--raum-4); align-items: stretch; }
.wege__liste { list-style: none; padding: 0; margin: 0; }
.wege__liste li { border-bottom: var(--linie); }
.wege__liste li:first-child { border-top: var(--linie); }
.wege__titel {
  display: flex; gap: var(--raum-3); align-items: baseline; width: 100%;
  padding: var(--raum-3) var(--raum-1);
  font-family: var(--schrift-display); font-weight: 900; font-size: var(--text-xl);
  color: var(--farbe-text); text-decoration: none;
}
.wege__titel .nr { font-size: var(--text-m); font-weight: 700; color: var(--farbe-text-gedimmt); }
.wege__liste li:is(:hover, :focus-within) .wege__titel,
.wege__liste li:is(:hover, :focus-within) .nr { color: var(--farbe-akzent); }
.wege__panels { display: grid; min-height: 21rem; }
.wege__panel {
  grid-area: 1 / 1; opacity: 0; transition: opacity .3s ease; z-index: 1;
  background: var(--farbe-flaeche-alt);
  border-radius: var(--ecke-karte); padding: var(--raum-4);
  display: flex; flex-direction: column; gap: var(--raum-2); justify-content: center;
}
.wege__panel svg { color: var(--farbe-akzent); }
.wege[data-aktiv="1"] .wege__panel:nth-child(1),
.wege[data-aktiv="2"] .wege__panel:nth-child(2),
.wege[data-aktiv="3"] .wege__panel:nth-child(3),
.wege[data-aktiv="4"] .wege__panel:nth-child(4) { opacity: 1; z-index: 2; }
.wege[data-aktiv="1"] .wege__liste li:nth-child(1) .wege__titel,
.wege[data-aktiv="2"] .wege__liste li:nth-child(2) .wege__titel,
.wege[data-aktiv="3"] .wege__liste li:nth-child(3) .wege__titel,
.wege[data-aktiv="4"] .wege__liste li:nth-child(4) .wege__titel { color: var(--farbe-akzent); }
.wege[data-aktiv="1"] .wege__liste li:nth-child(1) .nr,
.wege[data-aktiv="2"] .wege__liste li:nth-child(2) .nr,
.wege[data-aktiv="3"] .wege__liste li:nth-child(3) .nr,
.wege[data-aktiv="4"] .wege__liste li:nth-child(4) .nr { color: var(--farbe-akzent); }

/* Ablauf: horizontaler Zeitstrahl mit vier Stationen */
.b-strahl { position: relative; margin-top: var(--raum-4); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--raum-3); padding-left: 0; }
.b-strahl::before { content: ""; position: absolute; top: 0.55rem; left: 2%; right: 2%; height: 2.5px; background: var(--farbe-linie); }
.b-station { position: relative; padding-top: var(--raum-3); list-style: none; }
.b-station::before { content: ""; position: absolute; top: 0; left: 0; width: 1.1rem; height: 1.1rem; border-radius: var(--ecke-rund); background: var(--farbe-akzent); }
.b-station h3 { font-size: var(--text-l); }

/* Fall-Split (ergebnis-beweis): dunkle Zitat-Karte + helle Zahl-Karte */
.fall { display: grid; grid-template-columns: 3fr 2fr; gap: var(--raum-3); margin-top: var(--raum-4); align-items: stretch; }
.fall__zitat { background: var(--farbe-dunkel); color: var(--farbe-auf-dunkel); border-radius: var(--ecke-gross); padding: var(--raum-4); display: flex; flex-direction: column; gap: var(--raum-3); }
.fall__zitat blockquote { border-left: 3px solid var(--farbe-akzent-hell); color: inherit; font-size: var(--text-l); }
.fall__zitat .meta { color: inherit; opacity: .7; }
.fall__zahl { background: var(--farbe-flaeche-alt); border-radius: var(--ecke-gross); box-shadow: var(--schatten-flach); padding: var(--raum-4); display: flex; flex-direction: column; justify-content: space-between; gap: var(--raum-3); }
.fall__zahl .kennzahl { font-size: calc(var(--text-display) * 1.8); color: var(--farbe-akzent); line-height: 1; }

/* Beispielrechnung (preis-transparenz) + dezente Tilgungskurve */
.rechnung { display: grid; grid-template-columns: 3fr 2fr; gap: var(--raum-3); align-items: stretch; }
.rechnung__kopf { text-align: center; max-width: 60ch; margin-inline: auto; }
.rechnung__eingaben { background: var(--farbe-flaeche); border-radius: var(--ecke-karte); box-shadow: var(--schatten-flach); padding: var(--raum-3); }
.rechnung__eingaben table { margin-top: var(--raum-2); }
.rechnung__eingaben td:last-child { text-align: right; }
.rechnung__ergebnis { background: var(--farbe-dunkel); color: var(--farbe-auf-dunkel); border-radius: var(--ecke-karte); padding: var(--raum-3); display: flex; flex-direction: column; gap: var(--raum-2); justify-content: center; }
.rechnung__ergebnis .kennzahl { color: var(--farbe-akzent-hell); }
.rechnung__ergebnis .meta { color: inherit; opacity: .7; }
.tilgungskurve { width: 100%; height: auto; opacity: .45; margin-top: var(--raum-2); color: var(--farbe-akzent-hell); }

/* Kundenstimmen: Collage im 12-Spalten-Raster, Hover holt die Karte nach vorn */
.collage { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--raum-3); margin-top: var(--raum-4); }
a.g-karte { display: block; color: inherit; text-decoration: none; }
.g-karte {
  background: var(--farbe-flaeche); border-radius: var(--ecke-karte); box-shadow: var(--schatten-flach);
  padding: var(--raum-3); margin: 0; position: relative;
  transition: transform .25s ease;
}
.g-karte:hover { transform: scale(1.04); z-index: 10; }
.g-karte__kopf { display: flex; align-items: center; gap: var(--raum-2); }
.g-karte__avatar {
  width: 2.4rem; height: 2.4rem; border-radius: var(--ecke-rund); flex: none;
  background: var(--farbe-akzent); color: var(--farbe-auf-akzent);
  display: grid; place-items: center; font-family: var(--schrift-display); font-weight: 700;
}
.g-karte blockquote { border-left: none; padding-left: 0; font-size: var(--text-m); margin-top: var(--raum-2); }
.g-karte .meta { margin-top: var(--raum-2); }
.g-karte__sterne { color: var(--farbe-sterne); }
.g-karte--1 { grid-column: 1 / 5; grid-row: 1; }
.g-karte--2 { grid-column: 5 / 9; grid-row: 1; transform: translateY(var(--raum-3)); }
.g-karte--2:hover { transform: translateY(var(--raum-3)) scale(1.04); }
.g-karte--3 { grid-column: 9 / 13; grid-row: 1; }
.g-karte--4 { grid-column: 3 / 7; grid-row: 2; }
.g-karte--5 { grid-column: 7 / 11; grid-row: 2; transform: translateY(var(--raum-2)); }
.g-karte--5:hover { transform: translateY(var(--raum-2)) scale(1.04); }
.g-badge {
  display: inline-flex; gap: var(--raum-1); align-items: center;
  background: var(--farbe-flaeche); border-radius: var(--ecke-rund); box-shadow: var(--schatten-flach);
  padding: var(--raum-1) var(--raum-2); font-family: var(--schrift-display); font-weight: 700;
}

/* CTA-Band: Zusage links, Bild rechts (Dummy bis Kundenfotos, Paul 03.08.2026) */
.cta-band__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--raum-4); align-items: center; }
.cta-band__bild { margin: 0; }
.cta-band__bild picture img { border-radius: var(--ecke-gross); box-shadow: var(--schatten-flach); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* FAQ: zentrierte Textspalte (Poster-Archetyp: nichts klebt am linken Rand) */
.faq-mittig { max-width: var(--textspalte); margin-inline: auto; }

/* Partner-Leiste: farbige Logos, ruhig zentriert */
.b-partner { text-align: center; }
.b-partner__zeile { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--raum-3) var(--raum-4); margin-top: var(--raum-3); }
.b-partner__zeile img { max-height: 3.2rem; max-width: 15rem; width: auto; object-fit: contain; }

/* Person-Vorstellung: zwei versetzte Porträts */
.b-personen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-4); align-items: start; }
.b-portraet { position: relative; margin: 0; }
.b-portraet picture img { border-radius: var(--ecke-gross); box-shadow: var(--schatten-flach); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.b-portraet--versetzt { margin-top: var(--raum-4); }
.b-portraet figcaption { margin-top: var(--raum-2); font-family: var(--schrift-display); font-weight: 700; }

/* Footer (chrome-footer): hellblaue Fläche, Logo + 3 Spalten + Pflichtzeile */
.fuss { background: var(--farbe-flaeche-alt); padding-block: var(--raum-4); }
.fuss__grid { display: grid; grid-template-columns: 4fr 2fr 2fr 2fr; gap: var(--raum-4); align-items: start; }
.fuss__logo { height: 3.5rem; width: auto; }
.fuss__titel { font-family: var(--schrift-display); font-weight: 700; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li + li { margin-top: var(--raum-1); }
.fuss a { color: var(--farbe-text); }
.fuss__zeile { border-top: var(--linie); margin-top: var(--raum-4); padding-top: var(--raum-2); }

@media (max-width: 900px) {
  .b-hero__grid { grid-template-columns: 1fr; grid-template-areas: "kopf" "media" "rest"; }
  .b-split, .b-strahl, .b-personen, .rechnung, .fall, .zahlen__grid, .wege { grid-template-columns: 1fr; }
  .zahlen__vier { grid-template-columns: 1fr 1fr; }
  .wege__liste { display: none; }
  .wege__panels { min-height: 0; display: flex; flex-direction: column; gap: var(--raum-3); }
  .wege__panel { opacity: 1 !important; }
  .trust { position: static; transform: none; width: 100%; margin-top: var(--raum-3); }
  .b-hero { padding-bottom: var(--raum-4); }
  .collage { display: flex; flex-direction: column; gap: var(--raum-3); }
  .g-karte--2, .g-karte--5 { transform: none; }
  .cta-band__grid { grid-template-columns: 1fr; }
  .b-header__nav { display: none; }
  .mobilmenue { display: block; }
  .b-portraet--versetzt { margin-top: 0; }
  .fuss__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .fuss__grid { grid-template-columns: 1fr; }
}