/* Canaletto Sky — Bauschicht v1.0 · 2026-09-21
   Liegt NACH site.css (Entwurf) und den Bauteilen, VOR Barrierefreiheit und RAVARO-Schicht.
   Enthält nur, was der Bau über den eingefrorenen Entwurf hinaus braucht:
   1 Sprunglink · 2 eine Navigation für alle Breiten · 3 Bauteile auf die Marke ·
   4 Bewegung (nur mit html.bewegung — ohne JS steht alles da) · 5 dossier-verwandlung ·
   6 Navigator-Zustände · 7 Fuß · 8 reduzierte Bewegung. */

:root {
  --bau-kurve: cubic-bezier(.22, .9, .3, 1);
  --bau-dauer: 760ms;
}

/* ---------- 1 · Sprunglink ---------- */
.sprung {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--tinte); color: var(--papier); padding: 12px 18px; text-decoration: none;
  font: 500 15px var(--text);
}
.sprung:focus { top: 12px; }

/* ---------- 2 · Eine Navigation: breit als Zeile, schmal als Blatt ---------- */
/* site.css kannte zwei Elemente (.nav + .menue). Im Bau trägt EIN <nav> beide Rollen,
   deshalb werden die Entwurfsregeln für .menue auf breiten Schirmen aufgehoben. */
:root {
  --menue-grund: var(--papier);
  --menue-farbe: var(--tinte);
  --menue-akzent: var(--kupfer);
  --menue-rand: var(--linie);
  --menue-kopf-hoehe: var(--kopf-h);
}
@media (min-width: 1081px) {
  .nav.menue {
    position: static; opacity: 1; transform: none; visibility: visible;
    background: none; border: 0; padding: 0; transition: none;
  }
  .nav .nur-blatt { display: none; }
  /* Entwurfsregel „.menue a“ (Blatt-Optik) gilt hier nicht — breit ist das eine Zeile */
  .nav.menue a:not(.knopf) { min-height: 44px; border-bottom: 0; font: 400 15.5px var(--text); padding: 0 14px; }
  /* Der Schalter trägt .knopf — die Grundschicht würde ihn sonst auch breit zeigen */
  .kopf .menue-schalter { display: none; }
}
@media (max-width: 1080px) {
  .kopf .nav.mobil-menue {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    padding: 16px var(--rand) 32px; gap: 0;
  }
  .kopf-innen .menue-schalter { margin-left: auto; color: var(--tinte); }
  .kopf-innen .sprache { margin-left: 0; }
  .nav.mobil-menue a:not(.knopf) { padding: 0 2px; }
  .nav.mobil-menue a[aria-current="page"] { color: var(--kupfer); text-decoration: none; }
  .nav .nur-blatt { display: inline-flex; justify-content: center; }
  /* Menütextfarbe (Tinte) traf auch den vollen Knopf → schwarz auf schwarz */
  .nav.mobil-menue a.knopf-voll { color: var(--papier); font-size: 17px; min-height: 52px; }
  /* „.kopf .knopf“ gibt 0 20px Polster — das quetschte die Balken des Schalters */
  .kopf .menue-schalter { padding: 0; gap: 5px; width: 44px; height: 44px; min-height: 44px; border: 1px solid var(--linie); }  /* gap 5 = Bauteil-Rechnung translateY(7px) */
}

/* ---------- 3 · Bauteile auf die Marke ---------- */
[data-konfigurator] {
  --kk-text: var(--tinte);
  --kk-leise: var(--graphit);
  --kk-grund: #FBF9F5;
  --kk-grund-sanft: var(--papier-tief);
  --kk-linie: var(--linie);
  --kk-linie-aktiv: var(--tinte);
  --kk-akzent: var(--tinte);
  --kk-akzent-text: var(--papier);
  --kk-wahl: #F1EAE0;
  --kk-ok: var(--gruen);
  --kk-radius: 0px;
  --kk-radius-klein: 0px;
  font-family: var(--text);
}
[data-konfigurator] .kk-frage { font: 400 clamp(26px, 2.2vw, 34px)/1.15 var(--display); letter-spacing: 0; }
[data-konfigurator] .kk-kicker { font-family: var(--mono); color: var(--kupfer); }
.pruefstrecke {
  --pruef-akzent: var(--kupfer); --pruef-haken: var(--gruen);
  --pruef-linie: var(--linie); --pruef-akte: var(--mono);
}
.pruefstrecke h2, .pruefstrecke__titel { font-family: var(--display); font-weight: 400; }

/* Die Prüfpunkte im Suchprofil (Entwurf: .pruefstrecke — umbenannt, weil das Bauteil denselben Namen trägt) */
.pruefstrecke-live { list-style: none; padding: 0; margin: 12px 0 18px; font-size: 14.5px; }
.pruefstrecke-live li {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px dotted var(--linie);
  transition: color .3s ease;
}
.pruefstrecke-live li[data-stand="wartet"] { color: var(--graphit); }
.ampel.leer { color: var(--linie); }
.ampel.leer::before { background: transparent; border: 1.5px solid #B9AE9F; }
.frisch { animation: frisch 1.1s ease-out; }
@keyframes frisch { 0% { background-color: rgba(196,157,132,.45); } 100% { background-color: transparent; } }

/* ---------- 4 · Bewegung — nur, wenn bau.js sie freigibt ---------- */
html.bewegung .auftritt {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--bau-dauer) var(--bau-kurve), transform var(--bau-dauer) var(--bau-kurve);
  transition-delay: calc(var(--staffel-i, 0) * 80ms);
}
html.bewegung .auftritt.sichtbar { opacity: 1; transform: none; }

html.bewegung .bild-auftritt {
  clip-path: inset(0 0 100% 0); opacity: 0; transform: translateY(12px);
  transition: clip-path 1s var(--bau-kurve), opacity .6s ease, transform 1s var(--bau-kurve);
}
html.bewegung .bild-auftritt.sichtbar { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }

/* Anstreichung: der Kupferstrich zieht sich von links */
html.bewegung .strich.anstrich { background-size: 0% 0.07em; transition: background-size 1.1s var(--bau-kurve) .25s; }
html.bewegung .strich.anstrich.sichtbar { background-size: 100% 0.07em; }
html.bewegung .strich.markiert { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 1.1s var(--bau-kurve) .2s; }
html.bewegung .strich.markiert.sichtbar { background-size: 100% 100%; }
[data-zahl] { font-variant-numeric: tabular-nums; }

/* Hero: Himmel, Text, Paar, Notizen setzen sich nacheinander */
.hero-v3.ankommen .hero-himmel { opacity: 0; transform: scale(1.04); transition: opacity 1.4s ease, transform 2.2s var(--bau-kurve); }
/* Text bleibt ab dem ersten Bild sichtbar (größtes Element beim Laden — ein Einblenden aus 0 verschob es um Sekunden); er hebt sich nur. */
.hero-v3.ankommen .hero-text > * { transform: translateY(14px); transition: transform .8s var(--bau-kurve); }
.hero-v3.ankommen .hero-text > :nth-child(2) { transition-delay: .12s; }
.hero-v3.ankommen .hero-text > :nth-child(3) { transition-delay: .24s; }
.hero-v3.ankommen .hero-text > :nth-child(n+4) { transition-delay: .36s; }
.hero-v3.ankommen .hero-duo { opacity: 0; transform: translateY(24px); transition: opacity 1s ease .3s, transform 1.2s var(--bau-kurve) .3s; }
.hero-v3.ankommen .notiz { opacity: 0; transition: opacity .7s ease 1.1s; }
.hero-v3.ankommen .notiz-deborah { transition-delay: 1.3s; }
.hero-v3.angekommen .hero-himmel { opacity: .85; transform: none; }
.hero-v3.angekommen .hero-text > *, .hero-v3.angekommen .hero-duo { opacity: 1; transform: none; }
.hero-v3.angekommen .notiz { opacity: 1; }

/* ---------- 5 · dossier-verwandlung: Rendering → Prüfbogen ---------- */
.dossier-strecke { position: relative; overflow-x: clip; }  /* Startzustand des Stempels (scale 1.5) ragte 39 px über den Rand */
/* Schwelle 860 px Höhe — dieselbe Zahl steht in bau.js (matchMedia). Festgehalten wird nur,
   wenn Bogen UND Stempel ganz ins Bild passen; sonst passiert der Höhepunkt unter dem Rand. */
@media (min-width: 1001px) and (min-height: 860px) {
  .dossier-strecke.lebt.gepinnt { height: 190vh; }
  .dossier-strecke.lebt.gepinnt .dossier { position: sticky; top: calc(var(--kopf-h) + 12px); }
  .dossier-strecke.lebt.gepinnt .bogen { margin-top: 20px; padding: 22px 28px 26px; }
  .dossier-strecke.lebt.gepinnt .bogen h3 { margin: 10px 0 2px; }
  .dossier-strecke.lebt.gepinnt .bogen .zeile { padding: 6px 0; }
  .dossier-strecke.lebt.gepinnt .stempel { bottom: -22px; }
}
.dossier-strecke.lebt .dossier-bild img {
  /* Das Rendering verliert mit der Prüfung seinen Glanz: Farbe raus, Licht nüchtern */
  filter: saturate(calc(1.05 - var(--p, 0) * .45)) contrast(calc(1 - var(--p, 0) * .06));
  transform: scale(calc(1.035 - var(--p, 0) * .035));
  transform-origin: 30% 50%;
}
.dossier-strecke.lebt .bogen { opacity: 0; transform: translate(40px, 16px) rotate(1.2deg); transition: opacity .7s ease, transform .9s var(--bau-kurve); }
.dossier-strecke.lebt .bogen.da { opacity: 1; transform: none; }
.dossier-strecke.lebt .bogen .zeile dd { opacity: .28; transition: opacity .45s ease; }
.dossier-strecke.lebt .bogen .zeile .ampel { opacity: 0; transform: translateX(-6px); transition: opacity .4s ease, transform .4s var(--bau-kurve); }
.dossier-strecke.lebt .bogen .zeile.geprueft dd { opacity: 1; }
.dossier-strecke.lebt .bogen .zeile.geprueft .ampel { opacity: 1; transform: none; }
.dossier-strecke.lebt .stempel { opacity: 0; transform: rotate(-6deg) scale(1.5); transition: opacity .25s ease, transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.dossier-strecke.lebt .stempel.gesetzt { opacity: 1; transform: rotate(-6deg) scale(1); }
button.stempel { cursor: pointer; font: 600 12px/1.35 var(--mono); }
button.stempel:focus-visible { outline: 2px solid var(--tinte); outline-offset: 4px; }
html.bewegung .randnotiz-dossier { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s var(--bau-kurve); }
html.bewegung .randnotiz-dossier.sichtbar { opacity: 1; transform: none; }

/* ---------- 6 · Navigator: Lead-Karte, Senden, Fertig, Fehler ---------- */
.lead-karte { transition: border-color .4s ease, background-color .4s ease; }
html.bewegung .lead-karte { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateX(-12px); transition: clip-path 1.1s var(--bau-kurve), opacity .5s ease, transform 1.1s var(--bau-kurve), border-color .4s ease, background-color .4s ease; }
html.bewegung .lead-karte.enthuellt { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }
.lead-karte.belebt { border-style: solid; border-color: var(--blaugrau); background: #E8EFF0; }

.navi-senden, .navi-fertig, .navi-fehler { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--linie); background: #FBF9F5; }
.navi-fertig { border-top: 3px solid var(--gruen); }
.navi-fehler { border-top: 3px solid var(--kupfer); }
.navi-fertig .kk-frage, .navi-fehler .kk-frage, .navi-senden .kk-frage { margin-bottom: 14px; }
.navi-fertig-person { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; margin: 20px 0 22px; padding-top: 18px; border-top: 1px solid var(--linie); }
.navi-fertig-person img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 55% 25%; }
.navi-fertig-person p { margin: 0; line-height: 1.45; }
.navi-auswege { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.navi-senden .kk-frage::after { content: ""; display: inline-block; width: .9em; height: 1px; margin-left: 8px; vertical-align: middle; background: var(--kupfer); animation: senden 1s ease-in-out infinite alternate; }
@keyframes senden { from { transform: scaleX(.2); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }

/* ---------- 7 · Fuß ---------- */
.fuss-titel { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blaugrau); margin: 0 0 14px; }
.fuss-logo { width: 150px; height: auto; display: block; margin-bottom: 16px; }
.fuss-satz { color: var(--graphit); font-size: 15px; max-width: 34ch; margin: 0; }
.fuss-unten a { display: inline; min-height: 0; text-decoration: underline; text-decoration-color: var(--linie); text-underline-offset: 3px; }
.fuss-unten .vermerk { line-height: 1.9; }

/* ---------- 8 · Reduzierte Bewegung: alles steht, nichts wartet ---------- */
html.ruhig .auftritt, html.ruhig .bild-auftritt, html.ruhig .lead-karte, html.ruhig .randnotiz-dossier { opacity: 1 !important; transform: none !important; clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  .frisch, .navi-senden .kk-frage::after { animation: none; }
  .dossier-strecke .dossier-bild img { transform: none; }
}

/* Anker-Sprünge landen unter der klebenden Kopfleiste, nicht dahinter */
section[id], [id="lead-karte"] { scroll-margin-top: calc(var(--kopf-h) + 16px); }

/* Der Konfigurator setzt nach jedem Schritt den Fokus auf die Frage (für Screenreader richtig).
   Der Standardrahmen wirkte wie ein Fehlerkasten und überdeckte die Schrittzeile — hier leise in Kupfer. */
[data-konfigurator] .kk-frage:focus-visible { outline: 1px dotted var(--kupfer); outline-offset: 6px; box-shadow: none; }
[data-konfigurator] .kk-kicker { margin-bottom: 8px; }

/* ---------- 9 · Standortseiten (SEO-Ebene) ---------- */
.seo-bild { margin: 0; }
.seo-bild img { display: block; width: 100%; height: clamp(220px, 34vw, 520px); object-fit: cover; filter: saturate(.8) contrast(.96); }
.seo-einstieg { align-items: start; }
.seo-text p { font-size: 17.5px; line-height: 1.7; margin: 0 0 1.1em; }
.seo-text p:first-child::first-line { font-weight: 600; }
.projekt dl dt:nth-last-of-type(1), .projekt dl dd:last-of-type { color: var(--kupfer-text); }
.seo-fragen { align-items: start; }
.seo-videos { margin-top: 36px; }
.seo-videos ul { list-style: none; padding: 0; margin: 14px 0 10px; }
.seo-videos li { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.ansprech { display: grid; grid-template-columns: 160px 1fr; gap: clamp(24px, 3vw, 48px); align-items: center; }
.ansprech img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; object-position: 55% 25%; }
.ansprech h2 { margin: 8px 0 2px; font-size: clamp(30px, 3vw, 44px); }
.ansprech .cta-reihe { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
@media (max-width: 860px) {
  .seo-einstieg, .seo-fragen { grid-template-columns: 1fr; }
  .ansprech { grid-template-columns: 1fr; }
  .ansprech img { width: 120px; height: 120px; }
}
.blick-titel { font-size: clamp(26px, 2.2vw, 34px); margin: 14px 0 18px; }
.auf-einen-blick { margin: 0; border-top: 1px solid var(--tinte); max-width: 440px; }
.auf-einen-blick div { padding: 12px 0; border-bottom: 1px solid var(--linie); }
.auf-einen-blick dt { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--graphit); }
.auf-einen-blick dd { margin: 3px 0 0; font: 400 20px/1.3 var(--display); }

/* ---------- 10 · Bauteile Themenfilter + Kontaktformular auf die Marke ---------- */
.kanal-wahl { --tf-akzent: var(--kupfer); --tf-haken: var(--papier); --tf-linie: var(--linie); --tf-flaeche: #FBF9F5;
  --tf-tief: var(--tinte); --tf-text: var(--tinte); --tf-leise: var(--graphit); --tf-akte: var(--mono); margin-bottom: 28px; }
.kanal-schalter__knopf { font-family: var(--text); border-radius: 0; }
.filter-ansage { margin: 12px 0 0; }
.projekt[hidden] { display: none; }
[data-kontaktformular] { --kf-text: var(--tinte); --kf-leise: var(--graphit); --kf-grund: #FBF9F5; --kf-linie: var(--linie);
  --kf-linie-aktiv: var(--tinte); --kf-akzent: var(--tinte); --kf-akzent-text: var(--papier); --kf-ok: var(--gruen); --kf-radius: 0px;
  font-family: var(--text); }

/* ---------- 11 · Rechtsjournal: Videos erst nach Zustimmung ---------- */
.video-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.video-karte { display: flex; flex-direction: column; gap: 14px; }
.video-karte h3 { font-size: 21px; margin: 0; }
.video-karte .knopf { align-self: flex-start; }
.video-flaeche { position: relative; aspect-ratio: 16 / 9; background: var(--band); color: #EEE8DF; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 20px; }
.video-flaeche .vermerk { color: #9DB6C0; }
.video-nr { font: 400 64px/1 var(--display); color: var(--kupfer-hell); }
.video-flaeche.frage { justify-content: center; gap: 12px; font-size: 15px; line-height: 1.5; }
.video-flaeche.frage p { margin: 0; }
.video-flaeche.frage .textlink { color: #EEE8DF; }
.video-wege { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.video-flaeche.laeuft { padding: 0; }
.video-flaeche iframe { width: 100%; height: 100%; border: 0; }
.video-karte:target .video-flaeche { outline: 3px solid var(--kupfer); outline-offset: 4px; }
html.js .nur-ohne-js { display: none; }
html:not(.js) [data-video-start] { display: none; }
@media (max-width: 1000px) { .video-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .video-raster { grid-template-columns: 1fr; } }
.video-flaeche .knopf-voll { background: var(--papier); color: var(--tinte); border-color: var(--papier); }

/* ---------- 12 · Handy: Startzustände bleiben im Bild (T5, gemessen 21.09.) ---------- */
/* Der Bogen startete 40 px rechts versetzt und der Stempel mit scale(1.5) — bei 390 px lief
   beides rechts aus dem Bild (bis 454 px). Schmal: nur von unten, Stempel kaum größer. */
@media (max-width: 1000px) {
  .dossier-strecke.lebt .bogen { transform: translateY(24px); }
  .dossier-strecke.lebt .stempel { transform: rotate(-6deg) scale(1.08); }
  .dossier-strecke { overflow-x: clip; }
}

/* ---------- 13 · Begehung 21.09.: Trefferflächen, Kontrast, Bildgrößen ---------- */
.sprung { min-height: 44px; display: inline-flex; align-items: center; }
.sprache a, .sprache span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.brotkrumen a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.fuss-seo a { min-height: 44px; }
.fuss-unten a { display: inline-flex; align-items: center; min-height: 44px; }
.fuss-titel, .fuss-seo .vermerk { color: #3F5A64; }           /* vorher Blaugrau 3,47:1 auf Papier-tief */
.fuss-unten .vermerk { color: var(--graphit); }
/* Standortbild: in der linken Einstiegsspalte statt als randloses Band — die geernteten
   Bilder sind 1024–1600 px breit und würden randlos unscharf. */
.seo-einstieg .seo-bild { margin: 0 0 28px; }
.seo-einstieg .seo-bild img { height: auto; aspect-ratio: 16 / 10; }
.fuss-links a { min-width: 44px; }
.kontakt-liste a { display: inline-flex; align-items: center; min-height: 46px; }

/* ---------- 14 · Begehung 21.09.: Textkontrast und Luft ---------- */
/* Blaugrau #5E7F8C trägt Linien und Rahmen; als TEXT erreichte es nur 3,5–3,9:1.
   Derselbe Farbton dunkler: ≥ 4,8:1 auf allen Papiertönen (gerechnet, nicht geschätzt). */
:root { --blaugrau-text: #4A6874; }
.vermerk, .vermerk a, .fuss h4, .randnotiz, .lead-karte dt, .brotkrumen a, .fuss-titel, .fuss-seo .vermerk { color: var(--blaugrau-text); }
.fuss-unten .vermerk, .fuss-unten a { color: var(--graphit); }
@media (max-width: 620px) {
  .kriterien { row-gap: 12px; }
  .kontakt-liste { row-gap: 12px; }
}
/* Kupfer #9A6B4F und Amber #A77B2E bleiben für Linien, Rahmen, Sterne, Anstreichung.
   Als kleiner TEXT: dieselben Farbtöne dunkler — Kupfer ≥ 4,8:1, Amber ≥ 4,6:1. */
:root { --kupfer-text: #86593F; --amber-text: #86601C; }
.kicker, .ampel.klaeren, .stempel, .pruef-fuss h4, .zeitleiste .nr, .sterne, .hero-v3 .lede strong { color: var(--kupfer-text); }
[data-konfigurator] .kk-kicker { color: var(--kupfer-text); }
.projekt dl dt:nth-last-of-type(1), .projekt dl dd:last-of-type { color: var(--kupfer-text); }
.randnotiz-bogen { color: var(--kupfer-text); }
.wahl label:has(input:checked)::after { color: var(--kupfer-text); }
.dunkel .kicker { color: var(--kupfer-hell); }
.ampel.offen { color: var(--amber-text); }
@media (max-width: 620px) {
  .cta-reihe + .reihe, .knopf + .reihe { margin-top: 20px; }
  .leck + .leck { margin-top: 12px; }
  .kontakt-liste li + li { margin-top: 8px; }
  .seo-liste { row-gap: 8px; } .seo-liste li + li { margin-top: 8px; }
}
.projekt .fuer-wen b { color: var(--kupfer-text); }
@media (max-width: 620px) { .kopf-zeile + .reihe { margin-top: 20px; } }
.bogen .ampel-zelle { margin: 0; }

/* ---- Analyse-Seite (Vorlage Hendry, page-blueprint.md; Tor G14) ---- */
.an-kopfzeile .kopf-innen { justify-content: space-between; }
.an-kopf { padding-block: clamp(72px, 9vw, 128px) clamp(56px, 6vw, 88px); }
.an-zahl { font: 400 clamp(96px, 13vw, 184px)/0.9 var(--display); margin: 18px 0 20px; letter-spacing: -0.02em; }
.an-zahl small { font-size: 0.34em; color: var(--kupfer); margin-left: 6px; }
.an-satz { font: 400 clamp(24px, 2.2vw, 34px)/1.25 var(--display); max-width: 30ch; margin-bottom: 20px; }
.an-kopf .cta-reihe { margin: 32px 0 20px; display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; }
.an-quelle { max-width: 70ch; }
.an-vergleich h2, .an-detail h2, .an-hebel h2, .an-rechnung h2, .an-entscheidung h2, .an-status h2 { margin-bottom: 18px; }
.an-bilder { margin-top: 36px; }
.an-bilder figure { margin: 0; }
.an-bilder img { width: 100%; height: auto; border: 1px solid var(--linie); display: block; }
.an-bilder figcaption { margin-top: 12px; font-size: 15px; color: var(--graphit); }
.an-noten { display: flex; align-items: center; gap: clamp(20px, 4vw, 56px); margin-top: 40px; }
.an-noten b { display: block; font: 400 clamp(56px, 7vw, 96px)/1 var(--display); }
.an-noten b small { font-size: .32em; margin-left: .15em; color: var(--kupfer-text); }
.an-noten div:last-child b { color: var(--kupfer); }
.an-noten span { font: 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--graphit); }
.an-pfeil { font-size: 40px !important; color: var(--kupfer) !important; }
.an-noch { margin-top: 28px; max-width: 70ch; }
.an-kriterien { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 4vw, 64px); border-top: 1px solid var(--tinte); }
.an-kriterien li { display: grid; grid-template-columns: 92px 1fr; gap: 4px 20px; padding: 26px 0; border-bottom: 1px solid var(--linie); }
.an-wert { grid-row: span 2; font: 400 34px/1 var(--display); color: var(--kupfer); }
.an-kriterien h3 { font-size: 21px; margin: 0; }
.an-kriterien p { margin: 0; font-size: 16px; color: var(--graphit); }
.an-hebel-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 64px); margin-top: 36px; counter-reset: h; border-top: 1px solid var(--tinte); }
.an-hebel-liste > div { counter-increment: h; padding: 24px 0; border-bottom: 1px solid var(--linie); }
.an-hebel-liste > div::before { content: counter(h, decimal-leading-zero); display: block; font: 12px var(--mono); color: var(--kupfer); margin-bottom: 8px; }
.an-hebel-liste h3 { font-size: 21px; margin: 0 0 6px; }
.an-hebel-liste p { margin: 0; font-size: 16px; color: var(--graphit); }
.an-rechen-satz { font: 400 clamp(24px, 2.2vw, 32px)/1.3 var(--display); max-width: 34ch; margin: 18px 0; }
.an-rechnung .fliess { max-width: 62ch; }
.an-wahl { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin: 32px 0 20px; }
.an-nein { color: #9DB6C0; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
.an-status .raster-3 { margin-top: 32px; }
.an-status ul { margin: 0; padding-left: 18px; color: var(--graphit); font-size: 16px; }
.an-status li { margin-bottom: 8px; }
.an-quellen { margin-top: 40px; max-width: 80ch; }
@media (max-width: 900px) {
  .an-kriterien, .an-hebel-liste { grid-template-columns: 1fr; }
  .an-status .raster-3 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .an-kriterien li { grid-template-columns: 64px 1fr; }
  .an-wert { font-size: 26px; }
  .an-bilder { grid-template-columns: 1fr; }
}
/* Analyse — Nachschliff nach eigenem Blick 22.09.: 58 nicht an der Zeile darüber, Kriterien oben bündig, Fuß frei von der RAVARO-Karte */
.an-zahl { margin-top: 36px; }
.an-kriterien li { align-content: start; }
.an-fuss { padding-top: 0; }
.an-fuss .fuss-unten { justify-content: flex-start; gap: 12px 40px; flex-wrap: wrap; }
@media (max-width: 620px) { .an-kopfzeile .knopf { display: none; } }

/* Barrierefreiheit am Handy (bf-handy.js): Knopf erst nach dem ersten Scrollen, Menüeintrag jederzeit */
.nav .nur-blatt.bf-oeffnen { justify-content: flex-start; }
@media (max-width: 640px) {
  html:not(.gescrollt) .bf-knopf { opacity: 0; pointer-events: none; transform: translateY(8px); }
  .bf-knopf { transition: opacity .25s ease, transform .25s cubic-bezier(.23,1,.32,1); }
}
@media (min-width: 1081px) { .nav.menue a.bf-oeffnen { display: none; } }  /* breit: Knopf unten links genügt */
@media (max-width: 640px) { html:not(.gescrollt) .bf-knopf[aria-expanded="true"] { opacity: 1; pointer-events: auto; transform: none; } }  /* offene Leiste braucht ihren Schließ-Knopf */

/* Projektreihe: am Rechner umbrechen statt waagerecht scrollen (v1.3).
   Vorher war sie ein Scroller — mit Trackpad ließ sie sich wegen des weichen Scrollens
   nicht bewegen, die sechste Karte blieb abgeschnitten, und das Scrollen fühlte sich an,
   als hinge die Seite (Ralph, 23.09.2026). Am Handy bleibt das Wischen, dort gibt
   data-lenis-prevent-horizontal die Geste an die Reihe zurück. */
@media (min-width: 721px) {
  .reihe {
    grid-auto-flow: row; grid-auto-columns: auto;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    overflow-x: visible; scroll-snap-type: none; row-gap: 48px;
  }
}