/* neu/start.css — Gestaltung der Kodran-Startseite (Shader-Portal).
   Am 23.08.2026 aus dem <style>-Block von index.php herausgeloest, ZEICHENGLEICH.
   Grund: Die Seite wird zur Baustein-Seite des Editor-Kerns; ihr Rahmen soll so
   schlank sein wie der der Unterseiten. Ausserdem ist ausgelagertes CSS das, was
   eine erzwungene CSP verlangt -- kodran.de faehrt sie heute nur als Report-Only,
   aber bei Gampf hat genau diese Sorte Inline-Code am 22.08.2026 die Seite
   lahmgelegt, sobald die Richtlinie scharf war.

   0.260830.2: Teaser-Scan — Buehne der Pruef-Animation, zweite Zahlenspalte fuer das
   Besucherergebnis, RDG-Hinweis und Weiter-Knopf. Alles startet verborgen; sichtbar
   macht es start.js. Farben ueber die vorhandenen Tokens, damit die Flaechen dem
   Hell/Dunkel-Umschalter folgen.

   0.260830.3: Review-Fund A2 — .portal-spalten fasst dl.zaehler-ergebnis und dl.zaehler
   zu einem gemeinsamen zweiten Rasterkind von .portal-gitter zusammen (das Gitter hat nur
   zwei Spalten; zwei eigene Kinder rissen die Kodran-Spalte in eine neue Zeile). Dazu
   Review-Fund C1 — die Auftritts-Choreografie (Zeile ~717ff.) darf .zaehler-ergebnis nicht
   mittreffen, sonst ueberschreibt ihre hoehere Blockspezifitaet den eigenen Opacity-
   Uebergang der Ergebnisspalte (.zaehler-ergebnis/.zaehler-ergebnis.da) lautlos.

   0.260830.4: Drei-Phasen-Ablauf der Teaser-Animation (Vorgabe des Inhabers). Neues Attribut
   data-phase="warten"|"raster" an .pe-buehne, gesetzt von start.js: "warten" (Phase 1, der
   Scan laeuft im Hintergrund) zeigt immer den ruhigen Balken, nie das Punktraster -- es gibt
   ja noch keine Zahlen zu zeigen. "raster" (Phase 2, GENAU EIN Durchlauf mit den echten
   Funden) zeigt das Canvas. data-ruhig="1" bleibt UNVERAENDERT der Capability-Schalter fuer
   "kein Canvas oder reduzierte Bewegung" (siehe Kommentar dort) -- beide Attribute regeln
   verschiedene Dinge (Zeitpunkt vs. Faehigkeit) und ueberschneiden sich nie: start.js setzt
   data-phase="raster" nur, wenn data-ruhig gerade NICHT gesetzt ist.

   0.260830.6: Balkenlaufzeit auf 45 s korrigiert (AV_SCAN_GESAMTBUDGET, die echte
   Obergrenze eines Scans — die frueheren 30 s waren eine Schaetzung aus dem Spec-Text).
   Statt hart zu deckeln kriecht der Balken danach weiter; im Kriechbereich glimmt seine
   Spitze, weil dort Bruchteile eines Pixels je Sekunde nicht mehr sichtbar sind.
   0.260830.5: Wartephase zeigt einen ECHTEN Fortschrittsbalken statt des wandernden
   Musters (Rueckmeldung Aranđel: "kein Gefuehl von Fortschritt"). Fuellt gleichmaessig
   ueber 30 s, deckelt bei 95 % und wird erst voll, wenn die Antwort da ist. Dazu die
   Fund-Punkte der Auswertung deutlich groesser (Radius 4,2-6,0 statt 1,9-3,5), voll
   deckend und mit einem weichen Hof darunter, der sie vom Raster loest.
*/

/*
  ENTWURF B — Vergleichsentwurf vom 22.08.2026, Version 0.260822.1
  Eigenständige Datei. Greift NICHT auf content.json, render_lib.php oder seite.php zu.
  Der Shader ist eigener Code, keine Bibliothek, kein Fremd-Server.
*/
@font-face{font-family:"Archivo";src:url(assets/fonts/archivo-var-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url(assets/fonts/archivo-var-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"GeistMono";src:url(assets/fonts/geist-mono-var-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --grund:#071310;
  --grund-hoch:#0C1F19;
  --feld:#0F2A21;
  --tanne:#123829;
  --glut:#3DC98A;
  --glut-tief:#1C7A52;
  --glut-hover:#4FDB9A;
  --auf-glut:#04120C;
  --befund:#E0705C;
  --tinte:#E4EDE7;
  --gedaempft:#8FA79A;
  --menue:#B4C7BB;
  --platzhalter:#7FA392;
  --linie:rgba(228,237,231,.14);
  --linie-stark:rgba(228,237,231,.3);
  --punkt-aus:rgba(228,237,231,.12);
  --wisch:rgba(228,237,231,.04);
  --schleier-rgb:7,19,16;
  --schatten:0 30px 60px -30px rgba(0,0,0,.75);
  /* Gemeinsame Leseschutzfläche: Das Faserband bleibt sichtbar, der Text bleibt ruhig. */
  --schutzflaeche:color-mix(in srgb,var(--grund) 78%,transparent);
  --karte:var(--schutzflaeche);
  --radius-knopf:10px;
  --mass:clamp(1.5rem,3.2vw,3.4rem);
  --ease:cubic-bezier(.16,1,.3,1);

  /* ---------- Design-Bruecke zum Editor-Kern (23.08.2026) ----------
     Der Kern-Editor laedt dieses Stylesheet und liest daraus 15 --av-*-Variablen, damit die
     Bearbeitungsoberflaeche in den Farben DIESER Website erscheint und nicht in denen von
     Overstage, aus dem der Kern herausgeloest wurde (Fund Aranđel 16.08.2026: "sieht trotz
     korrekter Akzentfarbe IMMER NOCH nach Overstage aus" -- Hintergrund, Panel, Text und
     Rahmen waren nie Teil der Akzentanpassung).
     Bewusst ALIASE auf die eigenen Tokens, keine zweiten Farbwerte: sonst waeren es zwei
     Pflegestellen fuer dieselbe Farbe. Wer hier oben etwas aendert, aendert den Editor mit. */
  --av-bg: var(--grund);
  --av-flaeche: var(--karte);
  --av-flaeche-2: var(--grund-hoch);
  --av-linie: var(--linie);
  --av-linie-stark: var(--linie-stark);
  --av-text: var(--tinte);
  --av-gedaempft: var(--gedaempft);
  /* Drittes Grau, eine Stufe schwaecher -- fuer Hilfszeilen im Editor. */
  --av-gedaempft-2: color-mix(in srgb, var(--gedaempft) 72%, var(--grund));
  --av-akzent: var(--glut);
  --av-auf-akzent: var(--auf-glut);
  --av-fehler: var(--befund);
  --av-erfolg: var(--glut);
  --av-radius: var(--radius-knopf);
  --av-breite: 1300px;
  --av-schrift: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --av-anzeige: var(--av-schrift);
}
/* Helles Design: dieselbe Welt als Tinte auf Papier. Der Umschalter sitzt in der
   Kopfleiste; die Wahl liegt im localStorage (funktional notwendig, kein Cookie). */
html[data-theme="hell"]{
  --grund:#F1F4F1;
  --grund-hoch:#E9EEE9;
  --feld:#DFE7E1;
  --glut:#196B48;
  --glut-tief:#2E8F63;
  --glut-hover:#124F36;
  --auf-glut:#F1F4F1;
  --befund:#B04A3B;
  --tinte:#10201A;
  --gedaempft:#4E5F57;
  --menue:#45564E;
  --platzhalter:#55665E;
  --linie:rgba(16,32,26,.13);
  --linie-stark:rgba(16,32,26,.3);
  --punkt-aus:rgba(16,32,26,.16);
  --wisch:rgba(16,32,26,.045);
  --schleier-rgb:241,244,241;
  --schatten:0 24px 48px -26px rgba(16,32,26,.28);
  --karte:var(--schutzflaeche);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--grund);color:var(--tinte);
  font:400 clamp(1rem,.55vw + .88rem,1.1rem)/1.64 "Archivo","Helvetica Neue",Arial,sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

/* --- Browser-Oberflächen thematisiert --- */
::selection{background:var(--glut);color:var(--grund)}
:focus-visible{outline:2px solid var(--glut);outline-offset:3px;border-radius:2px}
html{scrollbar-color:var(--glut-tief) var(--grund);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--grund)}
::-webkit-scrollbar-thumb{background:var(--glut-tief);border:3px solid var(--grund)}
::-webkit-scrollbar-thumb:hover{background:var(--glut)}
input{caret-color:var(--glut)}
a{color:inherit}

.spalte{width:min(1300px,100% - 2*var(--mass));margin-inline:auto}

/* ============ KOPFLEISTE ============ */
.kopf{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.kopf[data-fest="ja"]{
  background:color-mix(in srgb,var(--grund) 82%,transparent);
  backdrop-filter:blur(14px) saturate(130%);
  border-bottom-color:var(--linie);
}
.kopf-innen{
  width:min(1300px,100% - 2*var(--mass));margin-inline:auto;
  display:flex;align-items:center;gap:clamp(1rem,2vw,2.4rem);
  padding-block:clamp(1rem,1.8vw,1.7rem);
}
.kopf[data-fest="ja"] .kopf-innen{padding-block:.6rem}

.marke{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex:0 0 auto;color:var(--tinte)}
.marke svg{display:block;width:30px;height:30px;transform-origin:left center;transition:transform .5s var(--ease)}
.kopf[data-fest="ja"] .marke svg{transform:scale(.85)}
.marke-text{
  font-weight:300;letter-spacing:.24em;text-transform:uppercase;
  font-size:.9rem;line-height:1;
}

.menue{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.menue-knopf,.menue > a{
  font:inherit;font-size:.78rem;font-weight:400;
  letter-spacing:.15em;text-transform:uppercase;
  background:none;border:0;padding:.7rem .85rem;
  color:var(--menue);text-decoration:none;cursor:pointer;
  position:relative;display:inline-flex;align-items:center;gap:.45rem;
  transition:color .32s var(--ease);
}
.menue-knopf:hover,.menue > a:hover,.menue-knopf[aria-expanded="true"]{color:var(--tinte)}
/* Die Unterstreichung wächst als Lichtlinie */
.menue-knopf::after,.menue > a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.42rem;height:1px;
  background:linear-gradient(to right,var(--glut),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease);
}
.menue-knopf:hover::after,.menue > a:hover::after,.menue-knopf[aria-expanded="true"]::after{transform:scaleX(1)}
.menue-knopf svg{width:8px;height:8px;transition:transform .38s var(--ease)}
.menue-knopf[aria-expanded="true"] svg{transform:rotate(180deg)}

/* Dropdown: löst sich als Lichtfläche aus dem Feld */
.detail-huelle{position:relative}
.detail{
  position:absolute;top:calc(100% + .4rem);left:0;
  width:min(280px,calc(100vw - 2*var(--mass)));
  background:color-mix(in srgb,var(--grund-hoch) 92%,transparent);
  backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--linie);
  padding:.5rem;display:grid;grid-template-columns:1fr;gap:.1rem;
  opacity:0;transform:translateY(-8px) scale(.985);
  transform-origin:top left;pointer-events:none;
  transition:opacity .34s var(--ease),transform .44s var(--ease);
  box-shadow:var(--schatten);
}
.detail[data-offen="ja"]{opacity:1;transform:none;pointer-events:auto}
.detail-pos{
  display:flex;align-items:baseline;gap:.8rem;
  padding:.75rem .85rem;text-decoration:none;position:relative;
  transition:background .26s var(--ease);
}
.detail-pos::before{
  content:"";position:absolute;left:0;top:.8rem;bottom:.8rem;width:1px;
  background:var(--glut);transform:scaleY(0);transform-origin:top;
  transition:transform .32s var(--ease);
}
.detail-pos:hover{background:var(--wisch)}
.detail-pos:hover::before{transform:scaleY(1)}
.detail-titel{font-weight:500;font-size:.95rem;letter-spacing:-.005em}

.kopf-tat{
  flex:0 0 auto;font-size:.93rem;font-weight:560;
  min-height:42px;display:inline-flex;align-items:center;
  padding:8px 20px;color:var(--tinte);text-decoration:none;
  border:1px solid var(--linie-stark);border-radius:var(--radius-knopf);
  transition:border-color .32s var(--ease),box-shadow .32s var(--ease),color .32s var(--ease),transform .15s var(--ease);
}
.kopf-tat:active{transform:scale(.97)}
.kopf-tat:hover{border-color:var(--glut);color:var(--glut)}

/* Hell/Dunkel-Umschalter */
.thema{
  flex:0 0 auto;width:40px;height:40px;border-radius:var(--radius-knopf);
  border:1px solid var(--linie-stark);background:none;color:var(--tinte);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.thema:hover{border-color:var(--glut);color:var(--glut)}
.thema svg{width:17px;height:17px}
.thema .t-mond{display:none}
html[data-theme="hell"] .thema .t-mond{display:block}
html[data-theme="hell"] .thema .t-sonne{display:none}

.brenner{display:none}

/* ============ DAS FELD: ERSTER VIEWPORT ============ */
.portal{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(2.4rem,5vw,4.5rem);
  padding-top:clamp(7rem,12vw,10rem);
  overflow:hidden;
}
#feld{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:0;
  /* Fallback, falls WebGL fehlt: das Feld bleibt als Farbverlauf stehen */
  background:linear-gradient(155deg,#0C231B 0%,var(--grund) 62%);
}
/* Filmkorn über dem Feld */
.korn{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
html[data-theme="hell"] .korn{opacity:.12}
html[data-theme="hell"] #feld{
  background:linear-gradient(155deg,#E2EAE3 0%,var(--grund) 62%);
}
/* Leseschutz: das Messfeld wird unter dem Text und im Kopfbereich ruhig,
   sonst tragen Haarstrich-Typo und Fliesstext nicht. */
.schleier{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(var(--schleier-rgb),.52) 0%,rgba(var(--schleier-rgb),.34) 26%,rgba(var(--schleier-rgb),.12) 56%,rgba(var(--schleier-rgb),0) 78%),
    linear-gradient(to bottom,rgba(var(--schleier-rgb),.62) 0%,rgba(var(--schleier-rgb),.2) 12%,rgba(var(--schleier-rgb),0) 22%),
    radial-gradient(95% 85% at 6% 62%,rgba(var(--schleier-rgb),.88),transparent 66%);
}
.portal-inhalt{position:relative;z-index:2}
.portal-gitter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}

h1{
  margin:0;font-weight:290;
  font-size:clamp(3rem,10.5vw,8.5rem);
  line-height:.92;letter-spacing:-.045em;
  max-width:14ch;text-wrap:balance;
}
h1 em{font-style:normal;font-weight:530;color:var(--glut)}
h1 .zeile{display:block;overflow:visible;padding-bottom:.14em;margin-bottom:-.14em}
h1 .zeile > span{display:block;will-change:transform}

.portal-text{
  margin:clamp(1.6rem,2.8vw,2.4rem) 0 0;max-width:54ch;
  font-size:clamp(1.02rem,.5vw + .92rem,1.18rem);
  color:var(--gedaempft);line-height:1.66;
}
.portal-text b{color:var(--tinte);font-weight:500}

/* Eingabe: Lichtlinie im Feld */
.portal-eingabe{margin-top:clamp(2rem,3.4vw,3rem);max-width:600px}
.pe-marke{
  display:block;font-family:"GeistMono",ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gedaempft);margin-bottom:.7rem;
}
.pe-form{display:flex;align-items:center;gap:0;position:relative;
  border:1px solid var(--linie-stark);border-radius:12px;
  background:color-mix(in srgb,var(--grund) 55%,transparent);backdrop-filter:blur(10px);
  padding:.35rem .35rem .35rem 1.1rem;
  transition:border-color .34s var(--ease),box-shadow .34s var(--ease);
}
.pe-form:focus-within{border-color:var(--glut);box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
.pe-feld{
  flex:1 1 auto;min-width:0;font:inherit;font-size:1.02rem;
  background:transparent;border:0;color:var(--tinte);padding:.75rem 0;
}
.pe-feld:focus{outline:0}
.pe-feld::placeholder{color:var(--platzhalter)}
.pe-knopf{
  flex:0 0 auto;font:inherit;font-size:.95rem;font-weight:560;
  min-height:44px;padding:.6rem 1.4rem;border-radius:var(--radius-knopf);cursor:pointer;
  background:var(--glut);color:var(--auf-glut);border:0;
  transition:background .26s var(--ease),transform .15s var(--ease);
}
.pe-knopf:active{transform:scale(.97)}
.pe-knopf:hover{background:var(--glut-hover);transform:translateY(-1px)}
.pe-fuss{margin:.9rem 0 0;font-size:.84rem;color:var(--gedaempft);padding-left:.2rem}

/* ---- Teaser-Prüfung (30.08.2026) ----
   Die Bühne liegt zwischen Prüfknopf und Zahlenspalten. Alles startet mit [hidden];
   start.js nimmt das Attribut weg. Ohne JavaScript bleibt die Startseite damit exakt
   die bisherige. */
.pe-buehne{margin-top:1rem;height:64px;border-radius:10px;overflow:hidden;
  background:color-mix(in srgb,var(--feld) 34%,transparent);border:1px solid var(--linie);position:relative}
.pe-buehne[hidden]{display:none}
#pe-raster{display:block;width:100%;height:100%}
/* Rückfall bei reduzierter Bewegung oder fehlendem Canvas: ein ruhiger Balken. */
/* Wartephase: ECHTER Fortschrittsbalken, kein wanderndes Muster (Rückmeldung Aranđel
   30.08.2026: „aktuell hat man beim Warten kein Gefühl von Fortschritt"). Die Spur ist die
   Rinne, das span darin die Füllung — deren Breite setzt start.js.
   Warum eine Fuellung statt der frueheren Endlos-Wanderung: Ein wanderndes Muster zeigt nur
   „es passiert etwas", ein wachsender Balken zeigt „wie weit". Die Laufzeit von 30 s ist die
   dokumentierte Obergrenze eines Scans; sie deckelt bei 95 %, damit der Balken nie voll
   dasteht, waehrend noch gewartet wird — voll wird er ausschliesslich, wenn die Antwort da
   ist (start.js zieht ihn dann zuegig hoch). */
.pe-fortschritt{position:absolute;inset:0;display:none;align-items:center;padding:0 12px}
.pe-fortschritt::before{content:"";position:absolute;left:12px;right:12px;height:3px;
  border-radius:2px;background:var(--linie)}
.pe-fortschritt span{display:block;height:3px;width:0;border-radius:2px;position:relative;
  background:linear-gradient(90deg,var(--glut-tief),var(--glut));
  transition:width .25s linear}
.pe-buehne[data-ruhig="1"] #pe-raster{display:none}
.pe-buehne[data-ruhig="1"] .pe-fortschritt{display:flex}
/* Phase 1 (Warten): immer der Balken, nie das Raster — es gibt noch keine Zahlen, die es
   zeigen könnte. Phase 2 (Raster): das Canvas, sofern data-ruhig nicht bereits den Rückfall
   erzwingt (dann bleibt der Balken ohnehin stehen, siehe Regeln oben — start.js setzt
   data-phase="raster" in diesem Fall gar nicht erst). */
.pe-buehne[data-phase="warten"] #pe-raster{display:none}
.pe-buehne[data-phase="warten"] .pe-fortschritt{display:flex}
.pe-buehne[data-phase="raster"] #pe-raster{display:block}
.pe-buehne[data-phase="raster"] .pe-fortschritt{display:none}
/* Zäher Bereich (nach 45 s, also über der Obergrenze eines Scans): Der Balken wächst dort
   nur noch um Bruchteile eines Pixels je Sekunde — rechnerisch bewegt er sich, sichtbar
   nicht. Das Glimmen an seiner Spitze zeigt, dass weiter gearbeitet wird, ohne Fortschritt
   zu behaupten. start.js setzt data-zaeh, sobald die lineare Strecke vorbei ist, und nimmt
   es beim Vollmachen wieder weg. */
.pe-buehne[data-zaeh="1"] .pe-fortschritt span{animation:pe-glimmen 1.6s ease-in-out infinite}
@keyframes pe-glimmen{
  0%,100%{box-shadow:0 0 0 0 rgba(61,201,138,0)}
  50%    {box-shadow:0 0 10px 1px color-mix(in srgb,var(--glut) 55%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  /* Kein Pulsieren, stattdessen ein ruhiger, dauerhafter Schein — dieselbe Aussage ohne
     Bewegung. */
  .pe-buehne[data-zaeh="1"] .pe-fortschritt span{animation:none;
    box-shadow:0 0 8px 1px color-mix(in srgb,var(--glut) 45%,transparent)}
}

/* Bei reduzierter Bewegung bleibt der Balken erhalten — er ist Information, keine Zierde:
   Er sagt dem Besucher, wie weit die Pruefung ist, und genau darauf soll niemand verzichten
   muessen. Nur der weiche Uebergang faellt weg, damit die Breite springt statt zu gleiten. */
@media (prefers-reduced-motion:reduce){
  .pe-fortschritt span{transition:none}
}

.pe-rdg{margin:1rem 0 0;max-width:58ch;font-size:.82rem;line-height:1.6;color:var(--gedaempft)}
.pe-rdg[hidden],.pe-weiter[hidden],.pe-status[hidden]{display:none}
.pe-weiter{display:inline-block;margin-top:.9rem;padding:.7rem 1.3rem;border-radius:var(--radius-knopf);
  background:var(--glut);color:var(--auf-glut);font-weight:700;text-decoration:none;
  transition:background .2s var(--ease),transform .2s var(--ease)}
.pe-weiter:hover{background:var(--glut-hover);transform:translateY(-1px)}

/* Gemeinsamer Rahmen der beiden Zahlenspalten (Review-Fund A2, 30.08.2026): .portal-gitter
   ist ein Grid mit GENAU zwei Spalten (minmax(0,1fr) auto). dl.zaehler-ergebnis und
   dl.zaehler muessen deshalb EIN gemeinsames zweites Rasterkind sein, sonst rutscht das
   dritte/vierte Kind in eine neue Rasterzeile und reisst die Kodran-Spalte mit nach unten.
   Reihenfolge im Markup (Ergebnis zuerst) plus flex-direction:row genuegt fuer "links
   neben der Kodran-Spalte"; justify-content:flex-end haelt die Kodran-Spalte an ihrer
   bisherigen Stelle, wenn die Ergebnisspalte [hidden] (also display:none, ohne Breite)
   ist — der Ruhezustand bleibt damit unveraendert. */
.portal-spalten{display:flex;flex-direction:row;align-items:flex-end;justify-content:flex-end}

/* Ergebnisspalte: LINKS neben der Kodran-Spalte. Die Kodran-Spalte bleibt unverändert —
   sie ist die Zusage, diese hier ist der Befund des Besuchers. */
.zaehler-ergebnis{margin-right:2.4rem;opacity:0;transform:translateX(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.zaehler-ergebnis[hidden]{display:none}
.zaehler-ergebnis.da{opacity:1;transform:none}
.zaehler-ergebnis .ze-hoch{color:var(--befund)}
.zaehler-ergebnis .ze-mittel{color:#D9A24A}
.zaehler-ergebnis .ze-gering{color:var(--gedaempft)}
.pe-status{margin:.7rem 0 0;font-size:.84rem;color:var(--gedaempft);max-width:44ch}

/* Kennzahlen als Lichtpunkte am rechten Rand */
.zaehler{
  display:flex;flex-direction:column;gap:1.3rem;text-align:right;
  font-family:"GeistMono",ui-monospace,monospace;
}
.zaehler div{display:grid;gap:.2rem}
.zaehler dt{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gedaempft)}
.zaehler dd{margin:0;font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:400;color:var(--tinte);line-height:1}
.zaehler dd b{color:var(--glut);font-weight:400}

/* ============ MESSUNG: DER PRUEFBERICHT ============ */
.messung{padding-block:clamp(4rem,8vw,8rem);position:relative;background:var(--grund)}
.messung h2{
  margin:0;font-weight:200;font-size:clamp(1.95rem,4.4vw,3.4rem);
  line-height:1.06;letter-spacing:-.036em;max-width:22ch;
}
.messung h2 em{font-style:normal;font-weight:530;color:var(--glut)}
.messung-vor{margin:1.2rem 0 0;max-width:44ch;color:var(--gedaempft);line-height:1.64}
.messung-gitter{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,4.5vw,4.5rem);align-items:start;margin-top:0}
.messung-quelle{
  margin:1.6rem 0 0;font-size:.83rem;line-height:1.62;
  color:var(--gedaempft);max-width:42ch;padding-left:1.1rem;
  border-left:1px solid var(--linie-stark);
}
.messung-quelle b{color:var(--tinte);font-weight:500}
.wieder{
  margin-top:1.6rem;display:none;align-items:center;gap:.55rem;
  font:inherit;font-size:.92rem;font-weight:560;
  min-height:42px;padding:8px 18px;border-radius:var(--radius-knopf);cursor:pointer;
  background:none;border:1px solid var(--linie-stark);color:var(--tinte);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
html.js-bewegung .wieder{display:inline-flex}
.wieder:hover{border-color:var(--glut);color:var(--glut)}
.wieder svg{width:14px;height:14px}

/* Das Berichtsblatt */
.bericht{
  border:1px solid var(--linie);
  background:color-mix(in srgb,var(--grund-hoch) 70%,var(--grund));
  box-shadow:var(--schatten);
}
.bericht-kopf{
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding:clamp(1rem,1.8vw,1.4rem) clamp(1.1rem,2vw,1.6rem);
  border-bottom:1px solid var(--linie);
}
.bericht-art{font-family:"GeistMono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gedaempft)}
.bericht-objekt{font-weight:500;font-size:.98rem}
.bericht-stand{
  margin-left:auto;font-family:"GeistMono",ui-monospace,monospace;font-size:.82rem;
  color:var(--gedaempft);display:flex;align-items:baseline;gap:.45rem;
}
.bericht-zahl{
  display:inline-block;font-size:1.5rem;font-weight:500;color:var(--befund);
  min-width:1.4ch;text-align:right;transition:color .5s var(--ease);
}
.bericht.fertig .bericht-zahl{color:var(--glut)}
.bericht-zahl.pop{animation:zahlPop .4s var(--ease)}
@keyframes zahlPop{from{transform:translateY(-6px);opacity:.2}to{transform:none;opacity:1}}

.befunde{list-style:none;margin:0;padding:0}
.befund{
  display:flex;align-items:center;gap:1rem;
  padding:.85rem clamp(1.1rem,2vw,1.6rem);
  border-bottom:1px solid var(--linie);
}
.befund-schwere{
  flex:0 0 5.2rem;font-family:"GeistMono",ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:opacity .6s var(--ease);
}
.befund-schwere::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.befund[data-schwere="hoch"]   .befund-schwere{color:var(--befund)}
.befund[data-schwere="mittel"] .befund-schwere{color:#D9A24A}
.befund[data-schwere="gering"] .befund-schwere{color:var(--gedaempft)}
/* .befund-inhalt umschliesst Text + Haken als GEMEINSAMES Flex-Kind von .befund, damit
   .befund-text selbst NICHT direktes Kind eines Flex-Containers ist. Grund (Fund
   30.08.2026 + Nachfund 30.08.2026): Ein "inline"-Flex-Item wird vom Browser zu "block"
   blockifiziert (CSS Display Level 3) -- ein Hintergrund/::after auf einer blockifizierten
   Box deckt IMMER die volle Boxbreite ab, nie nur die tatsaechlich sichtbare Textbreite
   jeder umbrochenen Zeile. Der erste Reparaturversuch (Wiederhol-Muster im Zeilentakt)
   loeste zwar die Positionierung, strich aber weiterhin die gesamte Boxbreite durch --
   bei der kuerzeren letzten Zeile eines umbrochenen Textes auch die leere Flaeche
   dahinter. Bleibt .befund-text dagegen ein normales Inline-Element (Kind eines
   NICHT-Flex-Containers), fragmentiert der Browser es von sich aus in echte Zeilen-Boxen,
   von denen jede exakt so breit ist wie ihr sichtbarer Text -- box-decoration-break:clone
   dupliziert die Hintergrund-Deko dann korrekt auf jede dieser eng anliegenden Boxen. */
.befund-inhalt{position:relative;flex:1 1 auto;min-width:0;padding-right:1.9rem}
.befund-text{
  font-size:.94rem;line-height:1.45;
  background-image:linear-gradient(var(--gedaempft),var(--gedaempft));
  background-repeat:no-repeat;background-position:0 52%;background-size:0 1px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:color .6s var(--ease),background-size .7s var(--ease);
}
.befund .haken{
  position:absolute;top:50%;right:0;width:18px;height:18px;color:var(--glut);
  opacity:0;transform:translateY(-50%) scale(.5);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.befund.behoben .befund-text{color:var(--gedaempft);background-size:100% 1px}
.befund.behoben .befund-schwere{opacity:1;color:var(--gedaempft)}
.befund.behoben .haken{opacity:1;transform:translateY(-50%) scale(1)}

.bericht-fuss{
  display:flex;align-items:center;gap:1rem;
  padding:clamp(1rem,1.8vw,1.4rem) clamp(1.1rem,2vw,1.6rem);
  opacity:0;transform:translateY(8px);
  transition:opacity .7s var(--ease) .2s,transform .7s var(--ease) .2s;
}
.bericht.fertig .bericht-fuss{opacity:1;transform:none}
.siegel{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--glut);color:var(--glut);
  display:inline-flex;align-items:center;justify-content:center;

}
.siegel svg{width:19px;height:19px}
.bericht-fazit{font-weight:500;font-size:1.02rem}
.bericht-fazit small{display:block;font-weight:400;font-size:.8rem;color:var(--gedaempft);margin-top:.2rem}

/* ============ POSITIONEN: DREI KACHELN ============ */
.positionen{padding-block:clamp(4rem,8vw,8rem);background:var(--grund-hoch)}
.positionen,.fragen{position:relative;overflow:hidden}
.positionen > .spalte,.fragen > .spalte{position:relative;z-index:1}
.zier-band{
  position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
}
.positionen h2{margin:0;font-weight:200;font-size:clamp(1.95rem,4.4vw,3.4rem);line-height:1.06;letter-spacing:-.036em;max-width:26ch}
.positionen h2 em{font-style:normal;font-weight:530;color:var(--glut)}
.positionen-vor{margin:1.2rem 0 0;max-width:64ch;color:var(--gedaempft);line-height:1.64}

.kacheln{
  margin-top:clamp(2.4rem,4.4vw,4rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);
}
.kachel{
  position:relative;display:flex;flex-direction:column;gap:.75rem;
  min-height:clamp(300px,30vw,380px);
  padding:clamp(1.5rem,2.6vw,2.2rem);
  border:1px solid var(--linie);
  background:color-mix(in srgb,var(--grund-hoch) 45%,var(--grund));
  text-decoration:none;overflow:hidden;
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.kachel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(85% 65% at 88% 0%,color-mix(in srgb,var(--glut) 11%,transparent),transparent 70%);
  opacity:0;transition:opacity .45s var(--ease);
}
.kachel:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--glut) 45%,transparent);
  box-shadow:0 22px 44px -28px rgba(0,0,0,.55);
}
.kachel:hover::after{opacity:1}
.kachel-nr{font-family:"GeistMono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--glut)}
.kachel h3{margin:0;font-size:clamp(1.25rem,1.7vw,1.55rem);font-weight:500;letter-spacing:-.02em;line-height:1.22;max-width:14ch}
.kachel p{margin:0;font-size:.94rem;line-height:1.6;color:var(--gedaempft);max-width:34ch}
.kachel-preis{
  margin-top:auto;padding-top:1.2rem;
  font-family:"GeistMono",ui-monospace,monospace;font-size:.84rem;color:var(--tinte);
}
.kachel-preis .zusatz{font-size:.75rem;color:var(--gedaempft)}
.kachel-mehr{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.7rem;
  color:var(--glut);font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
}
.kachel-mehr svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.kachel:hover .kachel-mehr svg{transform:translateX(5px)}

/* Auftritt der Kacheln */
html.js-bewegung .kacheln .kachel{opacity:0;transform:translateY(18px)}
html.js-bewegung .kacheln.sichtbar .kachel{
  opacity:1;transform:none;
  transition:opacity .56s var(--ease) calc(var(--i,0)*.16s),transform .56s var(--ease) calc(var(--i,0)*.16s);
}
html.js-bewegung .kacheln.sichtbar .kachel:hover{transition-delay:0s}

.ausserdem{
  margin-top:clamp(2rem,3.4vw,2.8rem);padding-top:1.6rem;border-top:1px solid var(--linie);
  display:grid;grid-template-columns:1fr 1fr;gap:1.2rem clamp(1.6rem,3vw,3rem);
  font-size:.9rem;line-height:1.65;color:var(--gedaempft);
}
.ausserdem p{margin:0;max-width:58ch}
.ausserdem b{color:var(--tinte);font-weight:500}
.ausserdem a{color:var(--glut);text-decoration:none;text-underline-offset:4px}
.ausserdem a:hover{text-decoration:underline}
.recht-hinweis{margin-top:1.4rem;font-size:.8rem;line-height:1.6;color:var(--gedaempft);max-width:64ch}

/* ============ PROJEKTE ============ */
.projekte{padding-block:clamp(4rem,8vw,8rem)}
.projekte h2{margin:0;font-weight:200;font-size:clamp(1.95rem,4.4vw,3.4rem);line-height:1.06;letter-spacing:-.036em;max-width:26ch}
.projekte h2 em{font-style:normal;font-weight:530;color:var(--glut)}
.projekte-vor{margin:1.2rem 0 0;max-width:58ch;color:var(--gedaempft);line-height:1.64}
.projektfeld{margin-top:clamp(2.4rem,4.4vw,4rem);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.4vw,2rem)}
.projekt{
  display:flex;flex-direction:column;gap:.55rem;text-decoration:none;
  border:1px solid var(--linie);background:var(--karte);
  padding:.85rem .85rem 1.15rem;
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
a.projekt:hover{transform:translateY(-4px);border-color:var(--linie-stark);box-shadow:0 20px 40px -26px rgba(0,0,0,.6)}
.projekt-schirm{display:block;overflow:hidden;border:1px solid var(--linie)}
.projekt-schirm img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .6s var(--ease)}
a.projekt:hover .projekt-schirm img{transform:scale(1.03)}
.projekt-zeile{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;padding:0 .3rem;margin-top:.4rem}
.projekt-name{font-weight:560;font-size:1.08rem;letter-spacing:-.014em}
.projekt-art{font-family:"GeistMono",ui-monospace,monospace;font-size:.78rem;letter-spacing:.05em;color:var(--gedaempft)}
.projekt-text{padding:0 .3rem;font-size:.92rem;line-height:1.55;color:var(--gedaempft);max-width:52ch}
html.js-bewegung .projektfeld .projekt{opacity:0;transform:translateY(18px)}
html.js-bewegung .projektfeld.sichtbar .projekt{opacity:1;transform:none;
  transition:opacity .56s var(--ease) calc(var(--i,0)*.14s),transform .56s var(--ease) calc(var(--i,0)*.14s)}
html.js-bewegung .projektfeld.sichtbar a.projekt:hover{transition-delay:0s}

/* ============ ABSCHLUSS ============ */
.abschluss{padding-block:clamp(4rem,8vw,7.5rem);position:relative;overflow:hidden}
.abschluss::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 120% at 50% 130%,rgba(28,122,82,.4),transparent 62%);
}
.abschluss h2{margin:0;font-weight:200;font-size:clamp(2rem,4.8vw,3.6rem);line-height:1.03;letter-spacing:-.04em;max-width:20ch}
.abschluss h2 em{font-style:normal;font-weight:500;color:var(--glut)}
/* ============ FRAGEN ============ */
.fragen{padding-block:clamp(4rem,8vw,8rem);background:var(--grund-hoch)}
.fragen h2{margin:0;font-weight:200;font-size:clamp(1.95rem,4.4vw,3.4rem);line-height:1.06;letter-spacing:-.036em}
.fragen h2 em{font-style:normal;font-weight:530;color:var(--glut)}
.fragen-gitter{
  margin-top:clamp(2rem,3.6vw,3rem);
  display:grid;grid-template-columns:minmax(0,72ch) minmax(16rem,24rem);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.fragenliste{border-top:1px solid var(--linie)}
.fragen-karte{
  position:sticky;top:96px;
  border:1px solid var(--linie);background:var(--karte);
  padding:clamp(1.2rem,2vw,1.6rem);display:grid;gap:.7rem;
}
.fragen-karte h3{margin:0;font-size:1.12rem;font-weight:560;letter-spacing:-.014em}
.fragen-karte > p{margin:0;font-size:.92rem;line-height:1.6;color:var(--gedaempft)}
.fk-zeile{display:flex;gap:.9rem;align-items:baseline}
.fk-marke{flex:0 0 4.6rem;font-family:"GeistMono",ui-monospace,monospace;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--glut)}
.fk-zeile a{font-family:"GeistMono",ui-monospace,monospace;font-size:.9rem;color:var(--tinte);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--linie-stark);transition:color .25s var(--ease)}
.fk-zeile a:hover{color:var(--glut)}
.fk-mehr{
  margin-top:.4rem;display:inline-flex;align-items:center;gap:.5rem;
  color:var(--glut);font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;
}
.fk-mehr svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.fk-mehr:hover svg{transform:translateX(4px)}
.frage{border-bottom:1px solid var(--linie)}
.frage summary{
  padding:1.05rem .2rem;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:.9rem;
  font-weight:500;font-size:1.02rem;letter-spacing:-.012em;
  transition:color .25s var(--ease);
}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{
  content:"";margin-left:auto;flex:0 0 auto;width:8px;height:8px;
  border-right:1.5px solid var(--glut);border-bottom:1.5px solid var(--glut);
  transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease);
}
.frage[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.frage summary:hover{color:var(--glut)}
.frage p{margin:0;padding:0 .2rem 1.2rem;font-size:.93rem;line-height:1.62;color:var(--gedaempft);max-width:64ch}

/* Kontakt nach dem Muster der Live-Seite */
.kontakt-kopf{text-align:center}
.kontakt-kopf h2{margin-inline:auto}
.kontakt-intro{margin:1.1rem auto 0;max-width:46ch;color:var(--gedaempft);line-height:1.64}
.kontakt-gitter{
  margin-top:clamp(2.4rem,4.4vw,3.6rem);
  display:grid;grid-template-columns:minmax(0,27rem) 1px minmax(0,27rem);
  justify-content:center;gap:clamp(1.8rem,4.5vw,4.5rem);
  align-items:stretch;
}
.kontakt-weg{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.kontakt-weg h3{margin:0;font-size:clamp(1.1rem,1.4vw,1.3rem);font-weight:560;letter-spacing:-.016em}
.kontakt-weg p{margin:0;font-size:.95rem;line-height:1.62;color:var(--gedaempft);max-width:44ch}
.kt-knopf{
  margin-top:auto;font-size:.96rem;font-weight:560;
  min-height:44px;display:inline-flex;align-items:center;
  padding:10px 22px;border-radius:var(--radius-knopf);text-decoration:none;
  background:var(--glut);color:var(--auf-glut);border:1px solid var(--glut);
  transition:background .26s var(--ease),transform .15s var(--ease);
}
.kt-knopf:hover{background:var(--glut-hover);border-color:var(--glut-hover);transform:translateY(-1px)}
.kt-knopf:active{transform:scale(.97)}
.kt-knopf--leise{background:transparent;color:var(--tinte);border-color:var(--linie-stark)}
.kt-knopf--leise:hover{background:var(--wisch);color:var(--tinte);border-color:var(--gedaempft)}
.kontakt-trenner{
  width:1px;align-self:stretch;
  background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--glut) 55%,transparent),transparent);
}
.kontakt-fuss{
  margin-top:clamp(2.2rem,3.8vw,3.2rem);padding-top:1.4rem;border-top:1px solid var(--linie);
  text-align:center;font-size:.92rem;color:var(--gedaempft);
}
.kontakt-fuss p{margin:0}
/* Kontaktwege wie auf kodran.de (dort .wege-punkte / .wege-punkt): je Weg ein eigenes
   Flex-Element, Marke und Wert mit gap .5em aneinander. Vorher lagen beide Wege in einem
   Absatz mit einem 1,8rem breiten Abstandhalter -- die Zeile brach dadurch mitten in
   "WhatsApp: Nachricht schreiben" um. Werte 1:1 von kodran.de uebernommen; der waagerechte
   Abstand am Rechner wandert damit von 28,8 auf 32 px. */
.kf-wege{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:10px 32px}
.kf-weg{display:inline-flex;align-items:baseline;gap:.5em;margin:0}
.kf-marke{color:var(--gedaempft)}
.kontakt-fuss a{
  font-family:"GeistMono",ui-monospace,monospace;color:var(--tinte);
  text-decoration:underline;text-underline-offset:5px;
  text-decoration-color:var(--linie-stark);transition:color .25s var(--ease);
}
.kontakt-fuss a:hover{color:var(--glut)}
.kf-zusage{margin-top:.8rem !important;font-size:.85rem}

.fuss{padding-block:clamp(2.4rem,4vw,3.6rem);border-top:1px solid var(--linie);font-size:.87rem;color:var(--gedaempft)}
/* Drei feste Plaetze wie auf kodran.de: Kuendigung links, Marke MITTIG, Rechtslinks
   rechts. Die 1fr-Aussenspalten halten die Marke unabhaengig von den Linkbreiten. */
.fuss-zeile{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.fuss-links.fuss-kuendigung{justify-self:start;justify-content:flex-start}
.fuss-logo{justify-self:center;font-size:.88rem;display:inline-flex;align-items:center;gap:.5rem;color:var(--tinte)}
.fuss-logo svg{height:19px;width:auto}
.fuss-links{justify-self:end;display:flex;flex-wrap:nowrap;white-space:nowrap;gap:10px 22px;justify-content:flex-end}
.fuss a{color:var(--gedaempft);text-decoration:none;font-weight:500;text-underline-offset:4px}
.fuss a:hover{text-decoration:underline;color:var(--glut)}
.fuss-zeile-2{color:var(--gedaempft);font-size:.88rem;margin:28px 0 0;text-align:center;line-height:1.6}
.fuss-zeile-2 .fuss-vertrauen,.fuss-zeile-2 .fuss-copy{display:inline-block}
@media (max-width:720px){
  /* Kontaktkarte der Fragen-Sektion: uebernimmt die Anordnung von kodran.de (dort
     .wege-punkt), auf Anweisung Aranđels vom 23.08.2026 -- "guck wie es bei kodran.de
     ist". Dort kleben Marke und Wert mit gap .5em aneinander und die Marke ist so breit
     wie ihr Text; hier stand stattdessen eine feste Spalte von 4,6rem. Auf dem schmalen
     Telefon riss die eine Luecke wie in einer Tabelle, und unter etwa 345 px Breite
     drueckte sie "Nachricht schreiben" in eine zweite Zeile (gemessen: ab 270 px
     Kartenbreite verdoppelte sich die Zeilenhoehe). Dieselbe Umbruchbreite wie auf
     kodran.de, wo .wege-punkte ab 720 px untereinander stehen.
     Am Rechner bleibt die Karte unveraendert -- dort war sie nicht beanstandet. */
  .fk-zeile{gap:.5em}
  /* Derselbe Schritt fuer den Kontaktfuss der Abschluss-Sektion (29.08.2026): kodran.de
     stellt .wege-punkte ab genau dieser Breite untereinander statt nebeneinander. */
  .kf-wege{flex-direction:column;align-items:center;gap:12px}
  .fk-marke{flex:0 0 auto}
  .fuss-zeile{grid-template-columns:1fr;gap:0;justify-items:center}
  .fuss-logo{order:-1;font-size:1rem;justify-self:center}
  .fuss-logo svg{height:21px}
  .fuss-links.fuss-kuendigung{order:1;justify-self:center;margin-top:0}
  .fuss-links{margin-top:24px;flex-direction:column;flex-wrap:nowrap;gap:0;align-items:center;justify-self:center}
  .fuss-links a{padding:9px 4px}
  .fuss-zeile-2{margin-top:24px;font-size:.82rem}
  .fuss-zeile-2 .fuss-vertrauen,.fuss-zeile-2 .fuss-copy{display:block}
  .fuss-zeile-2 .fuss-vertrauen{margin-bottom:6px;max-width:34ch;margin-left:auto;margin-right:auto}
}

/* ============ AUFTRITT ============ */
html.js-bewegung [data-auftritt] h1 .zeile > span{transform:translateY(104%)}
html.js-bewegung [data-auftritt] .portal-text,html.js-bewegung [data-auftritt] .portal-eingabe,html.js-bewegung [data-auftritt] .zaehler:not(.zaehler-ergebnis){opacity:0;transform:translateY(16px)}
html.js-bewegung [data-auftritt="fertig"] h1 .zeile > span{transform:translateY(0);transition:transform .56s var(--ease)}
html.js-bewegung [data-auftritt="fertig"] h1 .zeile:nth-child(2) > span{transition-delay:.1s}
html.js-bewegung [data-auftritt="fertig"] h1 .zeile:nth-child(3) > span{transition-delay:.2s}
html.js-bewegung [data-auftritt="fertig"] .portal-text{opacity:1;transform:none;transition:opacity .56s var(--ease) .34s,transform .56s var(--ease) .34s}
html.js-bewegung [data-auftritt="fertig"] .portal-eingabe{opacity:1;transform:none;transition:opacity .56s var(--ease) .48s,transform .56s var(--ease) .48s}
/* Review-Fund C1 (30.08.2026): :not(.zaehler-ergebnis) ist Pflicht, nicht Kosmetik. Ohne sie
   trifft diese Regel auch die Ergebnisspalte (die die Klasse .zaehler mit-traegt) und
   gewinnt gegen .zaehler-ergebnis/.zaehler-ergebnis.da (start.js togglet .da) durch spaetere
   Quellreihenfolge bei GLEICHER Spezifitaet — der eigene opacity/transform-Uebergang der
   Ergebnisspalte wuerde dauerhaft ueberschrieben (data-auftritt ist ab kurz nach dem Laden
   immer "fertig"), und sie poppt beim Einblenden ohne jeden Uebergang auf. */
html.js-bewegung [data-auftritt="fertig"] .zaehler:not(.zaehler-ergebnis){opacity:1;transform:none;transition:opacity .56s var(--ease) .62s,transform .56s var(--ease) .62s}

@media (max-width:1080px){
  /* Einspaltig rutscht der Knopf "Ablauf noch einmal ansehen" mit der Textspalte NACH
     OBEN, also vor die Animation, die er wiederholen soll (Fund Aranđel 23.08.2026).
     Am Rechner steht er links neben der Animation und ist damit richtig platziert.
     Loesung ohne Eingriff ins Markup: Die Textspalte gibt ihre Box auf, dadurch werden
     ihre Kinder selbst Gitterzellen und der Knopf laesst sich per order hinter die
     Animation stellen. Das Zeilen-gap muss dabei auf 0, sonst reisst es die vier
     Textelemente auseinander -- deren Abstaende kommen aus ihren eigenen Raendern. */
  .messung-gitter{grid-template-columns:1fr;column-gap:2rem;row-gap:0}
  .messung-gitter > div:first-child{display:contents}
  .messung-gitter > .bericht{margin-top:2rem}
  /* NACHKOMMEN-Selektor, nicht Kind: display:contents macht den Knopf zur Gitterzelle,
     laesst aber die DOM-Elternschaft unberuehrt -- sein Elternteil bleibt das innere
     div. Mit ">" greift die Regel nicht (am 23.08.2026 zuerst genau so danebengegangen). */
  .messung-gitter .wieder{order:1;justify-self:start;margin-top:1.6rem}
  .messung-vor,.messung-quelle{max-width:64ch}
  .kacheln{grid-template-columns:1fr}
  .projektfeld{grid-template-columns:1fr}
  .fragen-gitter{grid-template-columns:1fr}
  .fragen-karte{position:static}
  .kachel{min-height:0}
  .kontakt-gitter{grid-template-columns:1fr}
  .kontakt-trenner{display:none}
  .detail{grid-template-columns:1fr}
  .portal-gitter{grid-template-columns:1fr}
  .zaehler{flex-direction:row;text-align:left;gap:2.4rem;margin-top:2.4rem;flex-wrap:wrap}
}
@media (max-width:820px){
  .menue{display:none}
  .brenner{display:inline-flex;flex-direction:column;gap:4px;margin-left:auto;background:none;border:0;padding:.6rem;cursor:pointer}
  .brenner span{display:block;width:21px;height:1.5px;background:var(--tinte);transition:transform .34s var(--ease),opacity .3s}
  .brenner[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .brenner[aria-expanded="true"] span:nth-child(2){opacity:0}
  .brenner[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
  .kopf-tat{display:none}
  .thema{width:36px;height:36px}
  .kopf{position:sticky}
  .menue[data-mobil="ja"]{
    display:grid;position:absolute;left:0;right:0;top:100%;
    background:color-mix(in srgb,var(--grund) 96%,transparent);
    backdrop-filter:blur(18px);border-bottom:1px solid var(--linie);
    padding:.6rem var(--mass) 1.3rem;gap:0;margin:0;
  }
  .menue[data-mobil="ja"] > a,.menue[data-mobil="ja"] .menue-knopf{
    padding:.9rem .2rem;border-bottom:1px solid var(--linie);width:100%;justify-content:space-between;
  }
  .menue[data-mobil="ja"] .detail{
    position:static;width:auto;border:0;box-shadow:none;padding:.3rem 0 .7rem;
    grid-template-columns:1fr;background:transparent;backdrop-filter:none;
    opacity:1;transform:none;pointer-events:auto;
  }
  .menue[data-mobil="ja"] .detail[data-offen="nein"]{display:none}
  .ausserdem{grid-template-columns:1fr}
  .befund{flex-wrap:wrap;gap:.4rem .8rem}
  .befund-schwere{flex-basis:100%}
  .bericht-stand{margin-left:0;flex-basis:100%}
  .pe-form{flex-direction:column;align-items:stretch;border-radius:12px;padding:1rem}
  .pe-knopf{width:100%;margin-top:.7rem}
  /* Schmale Geräte: beide Spalten untereinander, das Ergebnis des Besuchers zuerst —
     die Kodran-Zusage ist dort das Argument NACH dem Befund, nicht davor. Der Wrapper
     wechselt dafür selbst auf Spalte (Review-Fund A2, 30.08.2026) — sonst blieben die
     beiden dl trotz .zaehler-ergebnis' eigener Regeln in einer flex-row nebeneinander. */
  .portal-spalten{flex-direction:column;align-items:stretch}
  .zaehler-ergebnis{margin-right:0;margin-bottom:1.4rem;transform:translateY(14px)}
  .pe-buehne{height:52px}
}
/* Mobile-Leseschutz 0.260915.2: Bänder bleiben sichtbar, der Text bleibt kontrastreich. */
@media (max-width:820px){
  .schleier{
    background:
      linear-gradient(to top,
        rgba(var(--schleier-rgb),.96) 0%,
        rgba(var(--schleier-rgb),.90) 35%,
        rgba(var(--schleier-rgb),.76) 100%);
  }
}


/* ============ ANMUTUNG DER BEWEGUNG (05.09.2026) ============
   Drei Nachbesserungen nach den Regeln von Emil Kowalski:
   1. Hover nur noch auf Geraeten MIT Zeiger. Eine Beruehrung loest Hover
      mit aus: auf dem Telefon blieb eine angetippte Kachel angehoben
      stehen, bis man woanders hin tippte.
   2. Hover von .45s auf .2s verkuerzt. Beim Zeigen erwartet das Auge
      sofortige Antwort; die langen Kurven bleiben den Auftritten
      vorbehalten, wo sie hingehoeren.
   3. Druckgefuehl auch auf den grossen Flaechen. Die Knoepfe hatten es
      schon, die Kacheln und Projektkarten nicht.
   Alles laeuft ueber transform und opacity, also auf der Grafikeinheit.
   Die reduced-motion-Regel weiter unten setzt es weiterhin komplett still.

   VERWORFEN: das weiche Aufgehen der Fragen ueber ::details-content und
   interpolate-size. Sieht auf dem Papier gut aus, hat im Test aber den
   Aufklapper auf website.php geschlossen gelassen (Inhalt 890 px, Kasten
   blieb bei 85 px). Nicht erneut versuchen, ohne beide Aufklapper wirklich
   im Browser zu oeffnen.
*/

/* 1 + 2: Zeigergeraete bekommen die kurze Hover-Kurve. */
@media (hover:hover) and (pointer:fine){
  .kachel{transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
  .kachel::after{transition:opacity .2s var(--ease)}
  .kachel .kachel-mehr svg{transition:transform .2s var(--ease)}
  a.projekt{transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
  .projekt-schirm img{transition:transform .4s var(--ease)}
}

/* Beruehrungsgeraete: kein haengengebliebener Hover-Zustand. */
@media (hover:none),(pointer:coarse){
  .kachel:hover{transform:none;border-color:var(--linie);box-shadow:none}
  .kachel:hover::after{opacity:0}
  .kachel:hover .kachel-mehr svg{transform:none}
  a.projekt:hover{transform:none;border-color:var(--linie);box-shadow:none}
  a.projekt:hover .projekt-schirm img{transform:none}
}

/* 3: Druckgefuehl. Bewusst schwaecher als bei den Knoepfen, weil die Flaeche
   viel groesser ist: 0.99 reicht, 0.97 wirkt hier wie ein Wackler. */
.kachel:active,a.projekt:active{transform:scale(.99);transition-duration:.12s}
.frage summary:active{color:var(--glut)}
.frage summary:active::after{transform:rotate(45deg) translateY(-2px) scale(.88)}
.frage[open] summary:active::after{transform:rotate(-135deg) translateY(-2px) scale(.88)}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html.js-bewegung [data-auftritt] h1 .zeile > span{transform:none}
  html.js-bewegung [data-auftritt] .portal-text,html.js-bewegung [data-auftritt] .portal-eingabe,html.js-bewegung [data-auftritt] .zaehler{opacity:1;transform:none}
}

/* 0.260906.5: Blur auf eigener Ebene verhindert verschachtelte Backdrop-Wurzeln. */
.kopf,.kopf[data-fest="ja"]{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;isolation:isolate}
.kopf::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--grund) 86%,transparent);backdrop-filter:blur(12px) saturate(125%);-webkit-backdrop-filter:blur(12px) saturate(125%)}
.detail{background:color-mix(in srgb,var(--grund-hoch) 82%,transparent);-webkit-backdrop-filter:blur(20px) saturate(140%)}

/* Software-Einstieg mit eigenem Schwerpunkt innerhalb des Leistungsbereichs. */
#werkzeuge{scroll-margin-top:110px;margin-top:clamp(3rem,7vw,6rem);padding:clamp(1.5rem,4vw,3rem);border:1px solid var(--linie);background:var(--schutzflaeche);position:relative;gap:2rem 3rem}
#werkzeuge p:first-child{grid-column:1/-1;max-width:76ch;font-size:1rem}
#werkzeuge p:first-child b{display:block;font-size:clamp(1.7rem,3.3vw,2.6rem);line-height:1.15;letter-spacing:-.025em;max-width:28ch;margin-bottom:1rem}
#werkzeuge p:not(:first-child) b{display:block;font-size:1.15rem;line-height:1.35;margin-bottom:.6rem}
#werkzeuge a{display:table;margin-top:.7rem;font-weight:500}
@media(max-width:780px){#werkzeuge{grid-template-columns:1fr}}

/* 0.260906.13 · Startseite: transparenter Einstieg, Leiste ab 40 px Scrollweg. */
.kopf::before{opacity:0;transition:opacity .3s var(--ease)}
.kopf[data-fest="ja"]::before{opacity:1}
@media(prefers-reduced-motion:reduce){.kopf::before{transition:none}}

/* Projektmockups vollständig im Geräteformat zeigen. */
.projekt-schirm img{aspect-ratio:8/5;object-fit:contain}
/* Ruhige Raumfotografien als ergänzende Hintergründe. */
#werkzeuge,#kontakt{position:relative;isolation:isolate}
#werkzeuge::before,#kontakt::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-size:cover;background-position:right center}
#werkzeuge::before{background-image:none}
#kontakt::before{background-image:linear-gradient(90deg,color-mix(in srgb,var(--grund) 92%,transparent),color-mix(in srgb,var(--grund) 83%,transparent) 65%,color-mix(in srgb,var(--grund) 64%,transparent)),url('assets/img/hintergrund-kontakt-0.260906.22.png')}
#kontakt .kontakt-weg{background:color-mix(in srgb,var(--grund) 84%,transparent);padding:clamp(1.2rem,2.4vw,2rem);border-radius:12px}
@media(max-width:820px){#werkzeuge::before,#kontakt::before{background-position:75% center;opacity:.6}}

/* Persönlicher Einstieg statt pauschaler Prüfpunktzahl. */
.pruefkarte{width:min(100%,340px);text-align:left;padding:1rem 0 0 1rem}
.pruefkarte-schritte{margin:0;display:grid;gap:1.8rem;border-left:1px solid var(--glut)}
.pruefkarte-schritte>div{position:relative;padding-left:1.4rem}
.pruefkarte-schritte>div::before{content:"";position:absolute;left:-4px;top:.5rem;width:7px;height:7px;border-radius:50%;background:var(--glut)}
.pruefkarte dt{font-size:1rem;font-weight:600;line-height:1.4;color:var(--tinte)}
.pruefkarte dd{margin:.35rem 0 0;font-size:.92rem;line-height:1.5;color:var(--gedaempft)}
.pruefkarte>p{margin:1.5rem 0 0 1.4rem;font-size:.78rem;color:var(--glut);line-height:1.5}
html.js-bewegung [data-auftritt="fertig"] .pruefkarte-schritte>div{animation:pruefkarte-ein .65s both;animation-delay:.4s}
html.js-bewegung [data-auftritt="fertig"] .pruefkarte-schritte>div:nth-child(2){animation-delay:.55s}
html.js-bewegung [data-auftritt="fertig"] .pruefkarte-schritte>div:nth-child(3){animation-delay:.7s}
@keyframes pruefkarte-ein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:820px){.pruefkarte{margin-top:1.5rem;width:100%;padding-left:.3rem}}
@media(prefers-reduced-motion:reduce){html.js-bewegung [data-auftritt="fertig"] .pruefkarte-schritte>div{animation:none}}

/* Leicht durchscheinende Angebotsflächen, deckend bei Interaktion. */
.kacheln .kachel{background:var(--schutzflaeche)}
.kacheln .kachel:hover,.kacheln .kachel:focus-visible{background:var(--schutzflaeche)}
html.js-bewegung .kacheln.sichtbar .kachel{transition:opacity .56s var(--ease),transform .56s var(--ease),background-color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
#werkzeuge{background:var(--schutzflaeche)}
#werkzeuge::before{opacity:.32}
@media(prefers-reduced-motion:reduce){html.js-bewegung .kacheln.sichtbar .kachel{transition:none}}

/* Detect: gut lesbare Textmaße im Softwarebereich. */
#werkzeuge p:first-child{max-width:70ch}
#werkzeuge p:first-child b{line-height:1.32}