/* Kodran — Entwurf B, Unterseiten-Stil (Version 0.260822.1)
   Gleiche Welt wie shaderportal.html: Tokens, Schrift, Bewegung.
   Statischer Grund statt Shader — die Unterseiten sollen sofort tragen. */

@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;
  --tanne:#123829;
  --glut:#3DC98A;
  --glut-tief:#1C7A52;
  --glut-hover:#4FDB9A;
  --auf-glut:#04120C;
  --befund:#E0705C;
  --tinte:#E4EDE7;
  --gedaempft:#8FA79A;
  --menue:#B4C7BB;
  --linie:rgba(228,237,231,.14);
  --linie-stark:rgba(228,237,231,.3);
  --wisch:rgba(228,237,231,.04);
  --schatten:0 30px 60px -30px rgba(0,0,0,.75);
  --schleier-rgb:7,19,16;
  /* Gemeinsame Leseschutzfläche wie auf der Startseite. */
  --schutzflaeche:color-mix(in srgb,var(--grund) 78%,transparent);
  --karte:var(--schutzflaeche);
  --karte-hervor:var(--schutzflaeche);
  --radius-knopf:10px;
  --mass:clamp(1.5rem,3.2vw,3.4rem);
  --ease:cubic-bezier(.16,1,.3,1);
}
html[data-theme="hell"]{
  --grund:#F1F4F1;
  --grund-hoch:#E9EEE9;
  --glut:#196B48;
  --glut-tief:#2E8F63;
  --glut-hover:#124F36;
  --auf-glut:#F1F4F1;
  --befund:#B04A3B;
  --tinte:#10201A;
  --gedaempft:#4E5F57;
  --menue:#45564E;
  --linie:rgba(16,32,26,.13);
  --linie-stark:rgba(16,32,26,.3);
  --wisch:rgba(16,32,26,.045);
  --schatten:0 24px 48px -26px rgba(16,32,26,.28);
  --schleier-rgb:241,244,241;
  --karte:var(--schutzflaeche);
  --karte-hervor: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;
}
::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)}
a{color:inherit}
.spalte{width:min(1140px,100% - 2*var(--mass));margin-inline:auto}

/* ---------- Kopfzeile (identisch zur Startseite) ---------- */
.kopf{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--grund) 86%,transparent);
  backdrop-filter:blur(12px) saturate(125%);
  border-bottom:1px solid var(--linie);
}
.kopf-innen{
  width:min(1140px,100% - 2*var(--mass));margin-inline:auto;
  display:flex;align-items:center;gap:clamp(1rem,2vw,2.4rem);
  padding-block:.75rem;
}
.marke{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex:0 0 auto;color:var(--tinte)}
.marke svg{display:block;width:28px;height:28px}
.marke-text{font-weight:300;letter-spacing:.24em;text-transform:uppercase;font-size:.85rem;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)}
.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)}
.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}
.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);
}
.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}
.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),color .32s var(--ease),transform .15s var(--ease);
}
.kopf-tat:hover{border-color:var(--glut);color:var(--glut)}
.kopf-tat:active{transform:scale(.97)}
.brenner{display:none}

/* ---------- Faserfeld-Baender: der Startseiten-Shader als Band ----------
   Gleiche Welt wie der Startseiten-Kopf, aber raeumlich begrenzt: einmal im
   Seitenkopf, einmal unten. Weiche Kanten per Maske; ohne WebGL bleibt der
   CSS-Verlauf stehen, das Skript zeichnet dann nichts darueber. */
.feld-band{
  position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;
  background:linear-gradient(155deg,#0C231B 0%,var(--grund) 62%);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
}
html[data-theme="hell"] .feld-band{background:linear-gradient(155deg,#E2EAE3 0%,var(--grund) 62%)}

/* ---------- Seitenkopf ---------- *//* Leseschutz ueber den Baendern: links, wo der Text steht, wird das Feld ruhig —
   dasselbe Prinzip wie der Schleier im Startseiten-Kopf. */
.held::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(92% 96% at 8% 55%,rgba(var(--schleier-rgb),.96),transparent 72%),
    linear-gradient(to top,rgba(var(--schleier-rgb),.45),transparent 30%);
}
.feld-band--boden{top:auto;bottom:0;height:min(300px,62%)}
.mit-faden{position:relative;overflow:hidden}
.mit-faden > .spalte{position:relative}
.mit-faden::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(var(--schleier-rgb),.92) 0%,rgba(var(--schleier-rgb),.5) 32%,transparent 60%);
}
.held > .spalte,.mit-faden > .spalte{z-index:1}

/* ---------- Seitenkopf ---------- */
.held{
  position:relative;overflow:hidden;
  padding-block:clamp(3.4rem,7vw,6.5rem) clamp(2.4rem,4.5vw,4rem);
  background:
    radial-gradient(90% 120% at 85% -20%,#0F2A20,var(--grund) 62%),
    var(--grund);
  border-bottom:1px solid var(--linie);
}
html[data-theme="hell"] .held{
  background:radial-gradient(90% 120% at 85% -20%,#E2EBE4,var(--grund) 62%);
}
.held-weg{margin:1rem 0 0;font-family:"GeistMono",ui-monospace,monospace;font-size:.78rem;letter-spacing:.04em;color:var(--glut)}
h1{
  margin:.6rem 0 0;font-weight:250;
  font-size:clamp(2.2rem,5.4vw,4rem);line-height:1.04;letter-spacing:-.038em;
  max-width:18ch;text-wrap:balance;
}
h1 em{font-style:normal;font-weight:530;color:var(--glut)}
.held p{margin:1.3rem 0 0;max-width:58ch;color:var(--gedaempft);font-size:clamp(1.02rem,.5vw + .92rem,1.16rem);line-height:1.66}
.held p b{color:var(--tinte);font-weight:500}
.held > .spalte{position:relative}

main section{padding-block:clamp(2.8rem,5.5vw,5rem)}
h2{margin:0;font-weight:250;font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.1;letter-spacing:-.03em;max-width:26ch}
h2 em{font-style:normal;font-weight:530;color:var(--glut)}
.vorspann{margin:1rem 0 0;max-width:62ch;color:var(--gedaempft);line-height:1.64}

/* ---------- Stufen-Spur (Weg 1) — Knoten und Linie im selben Element ---------- */
.pfad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.6vw,2.4rem);
  height:15px;position:relative;margin:clamp(2rem,3.6vw,3rem) 0 1.2rem}
.pfad-linie{position:absolute;left:6px;right:0;top:50%;height:1px;
  transform:translateY(-50%) scaleX(1);transform-origin:left;
  background:linear-gradient(to right,
    color-mix(in srgb,var(--glut) 75%,transparent),
    color-mix(in srgb,var(--glut) 30%,transparent) 60%,
    color-mix(in srgb,var(--glut) 55%,transparent));
  transition:transform 1.4s var(--ease);
}
.pfad-knoten{width:12px;height:12px;border-radius:50%;align-self:center;justify-self:start;
  background:var(--glut);box-shadow:none;
  position:relative;z-index:1;transition:opacity .5s var(--ease) calc(.25s + var(--i,0)*.4s),transform .5s var(--ease) calc(.25s + var(--i,0)*.4s)}
.stufen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.6vw,2.4rem)}
/* Die drei Stufen kommen bewusst langsamer und weicher als der Rest der Seite
   (Wunsch Aranđel, 05.09.2026): sie sind der Kern der Pruefungsseite und sollen
   beim Hereinscrollen nacheinander auftauchen, nicht gemeinsam hochschnappen.
   Dazu blendet jede Stufe zusaetzlich auf, vorher rutschte sie nur hoch. */
 .stufe{position:relative;background:var(--schutzflaeche);
  transition:transform 1.05s var(--ease) calc(.2s + var(--i,0)*.45s),
             opacity .95s var(--ease) calc(.2s + var(--i,0)*.45s)}
html.js-bewegung [data-zeichnen] .pfad-linie{transform:translateY(-50%) scaleX(0)}
html.js-bewegung [data-zeichnen] .pfad-knoten{opacity:0;transform:scale(.4)}
html.js-bewegung [data-zeichnen] .stufe{opacity:0;transform:translateY(26px)}
html.js-bewegung [data-zeichnen].sichtbar .pfad-linie{transform:translateY(-50%) scaleX(1)}
html.js-bewegung [data-zeichnen].sichtbar .pfad-knoten{opacity:1;transform:scale(1)}
html.js-bewegung [data-zeichnen].sichtbar .stufe{opacity:1;transform:none}
.stufe-marke{font-family:"GeistMono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--glut)}
.stufe h3{margin:.5rem 0 .45rem;font-size:clamp(1.2rem,1.4vw,1.4rem);font-weight:500;letter-spacing:-.016em;line-height:1.3}
.stufe p{margin:0;font-size:.92rem;line-height:1.58;color:var(--gedaempft)}
.stufe-preis{margin-top:.9rem !important;font-family:"GeistMono",ui-monospace,monospace;font-size:.86rem;color:var(--tinte) !important}
.stufe-preis strong{font-weight:500;font-size:1.3rem}
.stufe-preis .zusatz{font-size:.75rem;color:var(--gedaempft);letter-spacing:.03em}

/* ---------- Angebote und Pakete (Weg 2) ---------- */
.angebote{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(1.2rem,2.4vw,2rem);align-items:stretch;margin-top:clamp(2rem,3.6vw,3rem)}
.angebot{border:1px solid var(--linie);padding:clamp(1.2rem,2.2vw,1.8rem);position:relative;
  background:var(--schutzflaeche);display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.angebot > p{margin:0}
.angebot .angebot-preis{margin-top:auto !important;padding-top:.9rem}
.angebot.empfohlen{border-color:rgba(61,201,138,.5);background:var(--schutzflaeche)}
.abzeichen{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--auf-glut);background:var(--glut);padding:.26rem .6rem;border-radius:7px}
.abzeichen--leise{background:transparent;color:var(--glut);border:1px solid var(--glut-tief)}
.angebot h3{margin:.7rem 0 .4rem;font-size:clamp(1.2rem,1.45vw,1.45rem);font-weight:500;letter-spacing:-.014em}
.angebot > p{margin:0;font-size:.93rem;line-height:1.6;color:var(--gedaempft)}
.angebot-preis{margin:.9rem 0 0 !important;font-family:"GeistMono",ui-monospace,monospace;color:var(--tinte) !important}
.angebot-preis strong{font-weight:500;font-size:1.35rem}
.angebot-preis .zusatz{font-size:.75rem;color:var(--gedaempft);letter-spacing:.03em}

.pakete{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(1.8rem,3vw,2.4rem)}
.paket{border:1px solid var(--linie);padding:clamp(1.1rem,2vw,1.5rem);display:grid;gap:.45rem;align-content:start;
  background:var(--karte)}
.paket.hervor{border-color:rgba(61,201,138,.45);background:var(--schutzflaeche)}
.paket-name{font-weight:500;font-size:1.12rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.paket-claim{font-size:.8rem;color:var(--glut)}
.paket-preis{font-family:"GeistMono",ui-monospace,monospace;font-size:1.1rem;color:var(--tinte)}
.paket-preis .zusatz{font-size:.75rem;color:var(--gedaempft)}
.paket ul{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.55rem}
.paket li{position:relative;padding-left:1.35rem;font-size:.88rem;line-height:1.5;color:var(--gedaempft)}
.paket li::before{content:"";position:absolute;left:0;top:.42em;width:.8em;height:.45em;
  border-left:1.6px solid var(--glut);border-bottom:1.6px solid var(--glut);transform:rotate(-45deg)}
.paket li b{color:var(--tinte);font-weight:500}

/* Endet exakt auf der Seitenmitte: die Spalte ist zentriert, 50 % ihrer Breite
   ist damit die Blattmitte (nicht textbasiert wie zuvor mit 72ch). */
details.mehr{margin-top:clamp(1.8rem,3vw,2.4rem);border:1px solid var(--linie);width:50%}
details.mehr summary{padding:1rem clamp(1rem,2vw,1.5rem);cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:.8rem;font-weight:500;font-size:.98rem}
details.mehr summary::-webkit-details-marker{display:none}
details.mehr summary::after{content:"";margin-left: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)}
details.mehr[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
details.mehr summary:hover{background:var(--wisch)}
details.mehr .mehr-inhalt{padding:1.1rem clamp(1rem,2vw,1.5rem) 1.3rem;border-top:1px solid var(--linie);font-size:.88rem;line-height:1.62;color:var(--gedaempft)}
/* Schriftgroesse, Zeilenhoehe und Farbe stehen am Container, nicht erst am <p> (13.09.2026):
   beim Bearbeiten legt der Browser fuer einen neuen Absatz auch mal ein <div> statt eines <p>
   an -- eine Regel, die nur auf p zielt, griffe dort nicht und der Text spraenge um. */
details.mehr p{max-width:58ch}

/* ---------- Sichtbarkeit (Weg 3) ---------- */
.sicht{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);gap:clamp(1.8rem,4vw,4rem);align-items:start;margin-top:0}
.sicht .vorspann{margin-top:1.1rem}
.sicht h2{margin-bottom:0}
/* Rasterkarte: 5x5-Messpunkte, die vom Strich zur Platzierung werden — von innen nach aussen */
.rasterkarte{border:1px solid var(--linie);background:var(--schutzflaeche)}
.rk-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.8rem 1rem;border-bottom:1px solid var(--linie)}
.rk-titel{font-family:"GeistMono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gedaempft)}
.rk-beispiel{font-size:.78rem;color:var(--gedaempft)}
.rk-gitter{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:1rem}
.rz{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--linie);
  font-family:"GeistMono",ui-monospace,monospace;font-size:1rem;line-height:1}
.rz-vorher,.rz-wert{line-height:1}
.rz-vorher,.rz-wert{grid-area:1/1}
.rz-vorher{color:var(--gedaempft);opacity:0;display:none}
.rz-wert{font-weight:560;color:var(--gedaempft)}
.rz[data-guete="top"] .rz-wert{color:var(--glut)}
.rz[data-guete="mittel"] .rz-wert{color:var(--tinte)}
.rk-fuss{margin:0;padding:.8rem 1rem;border-top:1px solid var(--linie);
  font-size:.78rem;line-height:1.5;color:var(--gedaempft)}
/* Ruhig getaktet: je Ring 0,95 s Abstand, 0,7 s Übergang — die Reihenfolge
   von innen nach außen soll man mitlesen können (Rückmeldung 22.08.2026). */
html.js-bewegung [data-zeichnen] .rz-vorher{display:block;opacity:1;
  transition:opacity .45s var(--ease) calc(.85s + var(--d,0)*.95s)}
html.js-bewegung [data-zeichnen] .rz-wert{opacity:0;transform:scale(.55);
  transition:opacity .7s var(--ease) calc(.95s + var(--d,0)*.95s),transform .7s var(--ease) calc(.95s + var(--d,0)*.95s)}
html.js-bewegung [data-zeichnen].sichtbar .rz-vorher{opacity:0}
html.js-bewegung [data-zeichnen].sichtbar .rz-wert{opacity:1;transform:scale(1)}
.bausteine{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,28rem));gap:.7rem clamp(1.6rem,3vw,3rem)}
.baustein{position:relative;padding-left:1.5rem;font-size:.95rem;line-height:1.5;color:var(--tinte);
  transition:opacity .45s var(--ease) calc(var(--i,0)*.07s),transform .45s var(--ease) calc(var(--i,0)*.07s)}
.baustein::before{content:"";position:absolute;left:0;top:.42em;width:.85em;height:.45em;
  border-left:1.6px solid var(--glut);border-bottom:1.6px solid var(--glut);transform:rotate(-45deg)}
html.js-bewegung [data-zeichnen] .baustein{opacity:0;transform:translateY(8px)}
html.js-bewegung [data-zeichnen].sichtbar .baustein{opacity:1;transform:none}
.bausteine-titel{margin:0;font-size:.96rem;font-weight:500}

/* ---------- Gemeinsames ---------- */
.weg-merk{margin:1.8rem 0 0;font-size:.87rem;line-height:1.6;color:var(--gedaempft);
  padding-left:1rem;border-left:1px solid var(--glut-tief);max-width:62ch}
.weg-merk b{color:var(--tinte);font-weight:500}
.weg-fuss{margin-top:clamp(1.8rem,3vw,2.4rem);display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.weg-tat{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);
  transition:background .26s var(--ease),transform .15s var(--ease),box-shadow .26s var(--ease)}
.weg-tat:hover{background:var(--glut-hover);transform:translateY(-1px);box-shadow:0 8px 16px -10px rgba(0,0,0,.45)}
.weg-tat:active{transform:scale(.97);box-shadow:none}
.weg-neben{font-size:.85rem;color:var(--gedaempft)}
.recht-hinweis{margin-top:clamp(1.8rem,3vw,2.4rem);font-size:.8rem;line-height:1.6;color:var(--gedaempft);max-width:64ch}

/* Sanftes Erscheinen ganzer Abschnitte */
html.js-bewegung [data-zeichnen].weich{opacity:0;transform:translateY(14px);
  transition:opacity .56s var(--ease),transform .56s var(--ease)}
html.js-bewegung [data-zeichnen].weich.sichtbar{opacity:1;transform:none}

/* ---------- Fusszeile ---------- */
/* Drei feste Plaetze wie auf kodran.de: Kuendigung links, Marke MITTIG, Rechtslinks
   rechts. Die 1fr-Aussenspalten halten die Marke unabhaengig von den Linkbreiten. */
.fuss{padding-block:clamp(2.4rem,4vw,3.6rem);border-top:1px solid var(--linie);font-size:.87rem;color:var(--gedaempft)}
.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){
  .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}
}

@media (max-width:1080px){
  .angebote,.sicht{grid-template-columns:1fr}
  .pakete{grid-template-columns:1fr}
  .paket{padding:1.1rem 1rem}
  .bausteine{grid-template-columns:1fr}
  .rasterkarte{margin-left:0}
  details.mehr{width:100%}
}
@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}
  .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}
  .pfad{display:none}
  .stufen{grid-template-columns:1fr;gap:1.7rem;position:relative;padding-left:1.9rem}
  .stufen::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;
    background:linear-gradient(to bottom,
      color-mix(in srgb,var(--glut) 75%,transparent),
      color-mix(in srgb,var(--glut) 30%,transparent) 60%,
      color-mix(in srgb,var(--glut) 55%,transparent))}
  .stufe::before{content:"";position:absolute;left:calc(-1.9rem + 6.5px);top:8px;width:11px;height:11px;
    border-radius:50%;transform:translateX(-50%);
    background:var(--glut)}
}
/* Mobile-Leseschutz 0.260915.2: Bänder bleiben sichtbar, der Text bleibt kontrastreich. */
@media (max-width:820px){
  .held::after,.mit-faden::after{
    background:linear-gradient(to right,
      rgba(var(--schleier-rgb),.98) 0%,
      rgba(var(--schleier-rgb),.96) 62%,
      rgba(var(--schleier-rgb),.88) 100%);
  }
}

/* ============ ANMUTUNG DER BEWEGUNG (05.09.2026) ============
   Gegenstueck zu start.css. Die Hover-Zustaende der Unterseiten sind reine
   Farbwechsel und auf Beruehrungsgeraeten unkritisch; hier fehlte nur das
   Druckgefuehl am Aufklapper.
*/
details.mehr summary:active{background:var(--wisch)}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html.js-bewegung [data-zeichnen] .pfad-linie{transform:translateY(-50%) scaleX(1)}
  html.js-bewegung [data-zeichnen] .pfad-knoten,html.js-bewegung [data-zeichnen] .stufe,
  html.js-bewegung [data-zeichnen] .baustein,html.js-bewegung [data-zeichnen].weich,
  html.js-bewegung [data-zeichnen] .rz-wert{opacity:1;transform:none}
  html.js-bewegung [data-zeichnen] .rz-vorher{display: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%)}
/* Gemeinsame Zeilen richten Überschriften und Absatzanfänge aus. */
@media(min-width:821px){
 .stufen>.stufe{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;align-content:start}
 .stufe>.stufe-marke{grid-row:1}
 .stufe>h3{grid-row:2}
 .stufe>p:not(.stufe-preis){grid-row:3}
 .stufe>.stufe-preis{grid-row:4}
}

/* Inhalte bleiben beim Scrollen lesbar, Bewegung nur über Versatz. */
html.js-bewegung [data-zeichnen] .stufe{opacity:1}
html.js-bewegung [data-zeichnen].weich{opacity:1}
h2{line-height:1.3}
.stufe-marke{text-transform:none;letter-spacing:.04em}

.stufe-marke{font-size:.8rem}