@font-face{font-family:'Signal';src:url(fonts/Jura-Light.ttf) format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Signal';src:url(fonts/Jura-Medium.ttf) format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Lauf';src:url(fonts/InstrumentSans-Regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lauf';src:url(fonts/InstrumentSans-Bold.ttf) format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Lauf';src:url(fonts/InstrumentSans-Italic.ttf) format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Zaehl';src:url(fonts/GeistMono-Regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}

/* ══════════════════════════════════════════════════════════════════════════
   CENTRIC — Website

   Haltung: durchgehender Betrieb. Der Grund ist Nacht, in ihn sind Bögen aus
   Papier eingelegt — der Aushang ist das Licht. Aufgebaut wie ein Planbogen:
   links eine Beschriftungsspalte, rechts das Feld, dazwischen eine
   durchlaufende Haarlinie. Es gibt keine schwebenden Karten und keine runden
   Ecken; rund ist auf dieser Seite ausschließlich eine Schicht.

   Schrift: Signal (schmale Signalschrift, trägt lange Komposita groß),
   Lauf (Grotesk für Fließtext), Zaehl (Festbreite für alles Zählbare).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Nachtgrund: die Grundeinstellung der ganzen Seite ── */
:root{
  /* Übernommen aus src/farben.js der Anwendung, Satz C — der helle
     Modus. Inhalt liegt auf Papier, der Grund ist einen Hauch
     zurückgenommen, und die Hierarchie kommt aus der dunklen
     Seitenleiste und der Typografie, nicht aus Rändern um jedes
     Kästchen. Genau so ist diese Seite aufgebaut. */
  --grund:#EDF2F4;              /* bg */
  --flaeche:#FFFFFF;            /* flaeche · das Papier */
  --still:#E1EAEE;              /* flaecheStill · Sea Salt */
  --tief:#001619;               /* sidebarTief · Blue Charcoal */
  --sidebar:#071317;            /* sidebar · Midnight Edition */
  --text:#071317;               /* 14,55:1 */
  --text-dim:#3D4E55;
  --text-schwach:#5B6B72;
  --linie:#BCCDD4;              /* line */
  --linie-weich:#CBDAE0;        /* lineSoft */
  --linie-stark:#9DB3BC;        /* lineStark */
  --akzent:#017070;             /* accent · 4,56:1 */
  --akzent-hell:#028E8E;        /* accentHi */
  --akzent-tief:#023441;        /* accentDeep · Natural Indigo */
  --glanz:#50E8F4;              /* accentGlanz — nur auf Dunkel */
  --akzent-flaeche:#DFF0F0;     /* accentLight */
  --auf-akzent:#FFFFFF;         /* 5,91:1 auf dem Akzent */
  --ok:#0E6B45; --warn:#955410; --danger:#4E0401; --violett:#316C81;
  /* Schichtarten aus derselben Sammlung, Helligkeit fällt zur Nacht hin */
  --fruh:#02A0A0; --spat:#017070; --nachtm:#023441;
  --frei:#CBDAE0;              /* lineSoft — freie Zeiten treten zurück */
  --leucht:none;                /* Leuchten gehört auf Dunkel, nicht aufs Papier */

  --wrap:1280px;
  --pad:clamp(20px,4vw,44px);
  --rail:150px;
  --spalt:40px;
  --rand:max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));

  --sig:"Signal","Jura",system-ui,sans-serif;
  --lauf:"Lauf","Helvetica Neue",Arial,sans-serif;
  --zaehl:"Zaehl",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}

/* ── Papierbogen: dieselben Rollen, andere Werte ──
   Die abgedunkelten Akzente stammen aus dem Farbschema der Anwendung; die
   Originaltöne tragen auf Sea Salt keinen Text (2,48:1 statt 4,5:1). */


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition-duration:.01ms!important}
  .p-gitter{transform:none!important}
  .p-gitter .m{opacity:1!important}
}

body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font-family:var(--lauf);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

img,svg{max-width:100%}
p{margin:0 0 1em}
ul{margin:0 0 1em; padding-left:1.1em}

h1,h2,h3{
  font-family:var(--sig);
  font-weight:300;
  line-height:1.06;
  letter-spacing:.015em;
  text-wrap:balance;
  margin:0 0 .34em;
}
h1{font-size:clamp(2.3rem,1.5rem + 3.4vw,4.3rem);
  text-shadow:var(--leucht)}
h2{font-size:clamp(1.75rem,1.25rem + 2.1vw,3rem);
  text-shadow:var(--leucht)}
h3,.zelle h2,.artikel h2,h2.tf-name{font-size:clamp(1.12rem,1.02rem + .5vw,1.4rem);
  font-weight:500; line-height:1.2; margin-bottom:.5em}
/* Die Stufe einer Überschrift beschreibt die Gliederung, nicht die Größe.
   Auf zwei Seiten steht eine Kartengruppe direkt unter der h1 und ist damit
   selbst die oberste Ebene — sie wird zur h2 und sieht aus wie vorher. */
.zelle h2,.artikel h2,h2.tf-name{text-shadow:none}

a{color:var(--akzent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:.28em;
  text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--akzent); outline-offset:3px}

.skip{position:absolute; left:-9999px; top:0; background:var(--akzent);
  color:var(--auf-akzent); padding:14px 20px; z-index:100; font-family:var(--zaehl);
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase}
.skip:focus{left:0}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}

/* ── Marken und Beschriftungen: alles Zählbare in Festbreite ── */
.rail-lab,.eyebrow,.kat,.band-lab{
  font-family:var(--zaehl);
  font-size:.7rem;
  line-height:1.5;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--text-schwach);
  margin:0 0 1.1em;
}
.eyebrow.tint,.kat{color:var(--akzent)}
.lead{font-size:clamp(1.08rem,1rem + .4vw,1.28rem); line-height:1.55;
  color:var(--text-dim); max-width:60ch; margin-bottom:0}
.klein{font-size:.87rem; line-height:1.6; color:var(--text-schwach); max-width:74ch}
.klein.mitte{text-align:center}
.mehr{margin:44px 0 0}

/* ══ Kopf ══════════════════════════════════════════════════════════════ */
.kopf{position:sticky; top:0; z-index:60; background:rgba(237,242,244,.88);
  backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid var(--linie)}
.kopf-in{display:flex; align-items:center; gap:clamp(16px,3vw,44px); min-height:66px}
.marke{color:var(--text)}
.marke:hover{text-decoration:none}
.wortmarke{display:inline-flex; align-items:center; gap:10px}
.wortmarke-text{font-family:var(--sig); font-weight:500; font-size:1.02rem;
  letter-spacing:.3em; line-height:1; padding-top:.1em}
.nav{display:flex; gap:clamp(14px,2.2vw,30px); margin-left:auto}
.nav a{font-family:var(--zaehl); font-size:.76rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--text-dim); padding:8px 0;
  border-bottom:1px solid transparent}
.nav a:hover{color:var(--text); text-decoration:none; border-bottom-color:var(--linie-stark)}
.nav a[aria-current]{color:var(--akzent); border-bottom-color:var(--akzent)}
.kopf-akt{display:flex; align-items:center; gap:8px}

/* ── Schalter: eckig, beschriftet wie an einem Gerät ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--zaehl); font-size:.76rem; letter-spacing:.11em;
  text-transform:uppercase; padding:11px 18px;
  border:1px solid var(--linie-stark); color:var(--text);
  background:transparent; cursor:pointer; border-radius:0;
  transition:background .16s, color .16s, border-color .16s;
}
.btn:hover{border-color:var(--akzent); color:var(--akzent);
  background:var(--akzent-flaeche); text-decoration:none}
.btn-voll-akzent{background:var(--akzent); color:var(--auf-akzent); border-color:var(--akzent)}
.btn-voll-akzent:hover{background:transparent; color:var(--akzent); border-color:var(--akzent)}
.btn-gross{padding:15px 26px; font-size:.8rem}
.btn-voll{width:100%; margin-top:20px}

.burger{display:none; width:40px; height:36px; border:1px solid var(--linie-stark);
  background:transparent; padding:11px 10px; cursor:pointer; border-radius:0}
.burger span{display:block; height:1px; background:var(--text)}
.burger span+span{margin-top:6px}

/* ══ Abschnitte: der Planbogen ═════════════════════════════════════════ */
.sect{padding:clamp(64px,7vw,112px) 0; background:var(--grund); color:var(--text);
  position:relative}
.sect>.wrap{position:relative; display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr); column-gap:var(--spalt)}
.sect>.wrap>*{grid-column:2; min-width:0}
/* die durchlaufende Linie zwischen Beschriftung und Feld */
.sect>.wrap::before{content:""; position:absolute; top:-.6em; bottom:-.6em;
  left:calc(var(--pad) + var(--rail) + var(--spalt)/2); width:1px;
  background:var(--linie)}
.sect-kopf{display:contents}
.sect-kopf>.rail-lab,.sect>.wrap>.rail-lab{grid-column:1; align-self:start;
  position:sticky; top:98px; margin:0}
.sect-kopf>.titel{grid-column:2; margin-bottom:clamp(38px,4vw,60px)}
.sect-kopf>.titel>h1,.sect-kopf>.titel>h2{margin-bottom:.3em}

.sect-hell{--grund:#E1EAEE}

/* ── Midnight: die Rolle der Seitenleiste. Traditional Turquoise und
   Fluorescent Blue leben laut Farbdatei genau hier — auf Dunkel. ── */
.dunkel{
  --grund:#071317; --flaeche:#001619; --still:#0C1E24;
  --text:#EDF2F4; --text-dim:#9FB2B9; --text-schwach:#7A8D95;
  --linie:#1E3138; --linie-weich:#152830; --linie-stark:#33454C;
  --akzent:#02A0A0;             /* accentOrig · 5,87:1 auf der Seitenleiste */
  --akzent-hell:#50E8F4;        /* accentGlanz */
  --akzent-flaeche:#0C2A2E; --auf-akzent:#001619;
  --fruh:#50E8F4; --spat:#02A0A0; --nachtm:#316C81; --frei:#1E3138;
  --leucht:0 0 30px rgba(80,232,244,.3);
}
.sect-titel{padding:clamp(52px,6vw,88px) 0 clamp(26px,3vw,40px)}
.sect-titel+.sect{padding-top:clamp(30px,3vw,48px)}
.sect-titel .lead{margin-top:1.2em}

/* Planmuster als Atmosphäre — dieselbe Teilung wie im Raster oben */
.sect-dunkel,.sect-nacht{
  background:
    repeating-linear-gradient(90deg, var(--linie-weich) 0 1px, transparent 1px 72px),
    var(--grund);
  border-block:1px solid var(--linie);
}
.sect-band{padding:clamp(30px,3.4vw,44px) 0; background:var(--flaeche);
  border-block:1px solid var(--linie)}

/* ══ Spiegelhalle — der Kopf der Startseite ════════════════════════════
   Eine Rotunde aus leuchtenden Tafeln über stillem, spiegelndem Wasser.
   Der HUD darüber ist reines DOM: Vignette, Haarlinienrahmen mit
   Eckwinkeln, Masthead, Fokuszeile, Zugwink. Nur die Leinwand nimmt
   Zeiger entgegen. */
.halle{position:relative; height:100svh; min-height:600px; overflow:hidden;
  background:radial-gradient(120% 70% at 50% 0%, #072429 0%, #001619 64%), #001619}
.halle canvas{position:absolute; inset:0; width:100%; height:100%; display:block;
  touch-action:pan-y; cursor:grab}
.halle canvas.-zieht{cursor:grabbing}
.halle.flach canvas{display:none}
.halle .hud{position:absolute; inset:0; z-index:3; pointer-events:none; color:var(--text)}
.halle .vignette{position:absolute; inset:0; background:
  radial-gradient(130% 90% at 50% 42%, transparent 52%, rgba(4,10,12,.55) 100%),
  linear-gradient(to bottom, rgba(4,10,12,.42) 0%, transparent 20%, transparent 62%, rgba(4,10,12,.62) 100%)}
.halle .rahmen{position:absolute; inset:clamp(14px,2.4vh,26px);
  border:1px solid var(--linie); box-shadow:inset 0 0 60px rgba(0,22,25,.5)}
.halle .rahmen::before,.halle .rahmen::after{content:""; position:absolute;
  width:9px; height:9px; border:1px solid rgba(2,160,160,.6)}
.halle .rahmen::before{top:-1px; left:-1px; border-right:0; border-bottom:0}
.halle .rahmen::after{bottom:-1px; right:-1px; border-left:0; border-top:0}
.halle .mast{position:absolute; top:clamp(30px,6.6vh,66px); left:50%;
  transform:translateX(-50%); width:92%; text-align:center}
.halle .kicker{font-family:var(--zaehl); font-size:clamp(8.5px,.95vw,10px);
  letter-spacing:.42em; text-transform:uppercase; color:var(--text-schwach);
  margin:0 0 15px}
.halle .kicker b{color:var(--akzent); font-weight:600}
.halle .mast h1{margin:0 auto; font-weight:300; font-size:clamp(30px,5.6vw,66px);
  line-height:1.06; letter-spacing:.015em; color:var(--text); max-width:17ch;
  text-wrap:balance;
  text-shadow:0 2px 44px rgba(80,232,244,.28), 0 1px 3px rgba(0,0,0,.55)}
.halle .sub{margin:16px 0 0; font-size:clamp(10.5px,1.25vw,13px);
  letter-spacing:.05em; color:var(--text-dim)}
.halle .fokus{position:absolute; bottom:clamp(34px,7vh,74px); left:50%;
  transform:translateX(-50%); width:92%; display:flex; flex-direction:column;
  align-items:center; gap:13px}
.halle .zaehler{display:flex; align-items:baseline; gap:7px;
  font-family:var(--zaehl); font-size:12px; letter-spacing:.16em}
.halle .zaehler .num{color:var(--akzent-hell); font-size:14px;
  text-shadow:0 0 16px rgba(80,232,244,.5)}
.halle .zaehler i{color:var(--text-schwach); font-style:normal}
.halle .zaehler span:last-child{color:var(--text-dim)}
.halle .name{font-family:var(--sig); font-weight:300;
  font-size:clamp(20px,3.4vw,34px); letter-spacing:.12em; text-transform:uppercase;
  color:var(--text); text-shadow:0 2px 30px rgba(80,232,244,.28), 0 1px 2px rgba(0,0,0,.6);
  will-change:transform,opacity,filter}
@keyframes fokusTausch{from{opacity:0; transform:translateY(9px); filter:blur(5px)}
  to{opacity:1; transform:none; filter:blur(0)}}
.halle .name.-tausch{animation:fokusTausch .5s cubic-bezier(.22,.61,.36,1) both}
.halle .punkte{display:flex; align-items:center; gap:9px; margin-top:2px}
.halle .punkte i{width:5px; height:5px; border-radius:4px;
  background:var(--linie-stark);
  transition:width .5s cubic-bezier(.22,.61,.36,1), background .5s ease, box-shadow .5s ease}
.halle .punkte i.-an{width:22px; background:var(--akzent-hell);
  box-shadow:0 0 12px rgba(80,232,244,.55)}
.halle .fokus-link{pointer-events:auto; margin-top:6px; font-family:var(--zaehl);
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--akzent);
  border:1px solid rgba(2,160,160,.5); padding:9px 16px}
.halle .fokus-link:hover{background:var(--akzent-flaeche); text-decoration:none}
.halle .wink{position:absolute; bottom:clamp(34px,7vh,74px);
  right:clamp(26px,4vw,58px); display:flex; align-items:center; gap:9px; margin:0;
  font-family:var(--zaehl); font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--text-dim); transition:opacity .8s ease}
.halle .wink::before{content:""; width:22px; height:1px;
  background:var(--text-schwach); animation:winkSchub 2.4s ease-in-out infinite}
@keyframes winkSchub{0%,100%{transform:translateX(0); opacity:.35}
  50%{transform:translateX(6px); opacity:.9}}
/* Einblendung: nur wenn das Skript da ist, wird zuerst versteckt */
.halle-js .halle .mast,.halle-js .halle .fokus,.halle-js .halle .wink{opacity:0;
  transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.22,.61,.36,1)}
.halle-js .halle .mast{transform:translateX(-50%) translateY(-12px)}
.halle-js .halle .fokus{transform:translateX(-50%) translateY(14px)}
body.-bereit .halle .mast{opacity:1; transform:translateX(-50%) translateY(0)}
body.-bereit .halle .fokus{opacity:1; transform:translateX(-50%) translateY(0)}
body.-bereit .halle .wink{opacity:1}
body.-gezogen .halle .wink{opacity:0!important}
.halle-js .halle .rahmen{opacity:0; transition:opacity 1.6s ease}
body.-bereit .halle .rahmen{opacity:1}
@media (max-width:620px){
  .halle .wink{display:none}
  .halle .fokus{bottom:clamp(26px,5vh,40px)}
}

.hero-akt{display:flex; gap:10px; flex-wrap:wrap; margin-top:clamp(28px,3vw,40px)}

/* Der Plan als Instrument. Er läuft rechts aus dem Bild — er hört nicht auf. */
.instrument{position:relative; z-index:1; border-top:1px solid var(--linie-stark);
  background:var(--flaeche); overflow:hidden}
.instrument-leiste{display:grid; grid-template-columns:var(--rail) minmax(0,1fr) auto;
  column-gap:var(--spalt); align-items:end; padding-block:22px 20px}
.i-stand .rail-lab{margin-bottom:.5em}
.i-datum{font-family:var(--sig); font-weight:300; font-size:clamp(1.6rem,1.1rem + 1.8vw,2.5rem);
  line-height:1; margin:0; letter-spacing:.02em}
.i-steuer{display:flex; gap:0; flex-wrap:wrap}
.i-steuer button{font-family:var(--zaehl); font-size:.72rem; letter-spacing:.09em;
  text-transform:uppercase; padding:9px 13px; background:transparent;
  color:var(--text-dim); border:1px solid var(--linie); margin-left:-1px;
  cursor:pointer; border-radius:0; transition:color .15s, background .15s}
.i-steuer button:hover{color:var(--auf-akzent); background:var(--akzent);
  border-color:var(--akzent); position:relative; z-index:1}
.i-notiz{font-family:var(--zaehl); font-size:.7rem; line-height:1.6;
  letter-spacing:.06em; color:var(--text-schwach); margin:0; text-align:right}

/* Bühne: links die feste Beschriftung, rechts das laufende Gitter.
   Beide teilen dieselben Zeilenhöhen, damit die Zeilen fluchten. */
.plan-buehne{
  --pitch:26px; --zh:21px; --kh:30px; --luecke:5px; --takt:2.4s;
  display:grid; grid-template-columns:56px minmax(0,1fr);
  padding:6px 0 18px; padding-left:var(--rand); contain:paint;
}
.p-marken,.p-gitter{display:grid;
  grid-template-rows:var(--kh) repeat(6,var(--zh)); row-gap:var(--luecke);
  align-items:center}
.p-lauf{overflow:hidden}
.p-gitter{grid-template-columns:repeat(var(--spalten),var(--pitch));
  column-gap:0; will-change:transform;
  animation:laufen var(--takt) linear infinite}
@keyframes laufen{from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--pitch)))}}
.p-tag{display:flex; flex-direction:column; align-items:center; gap:1px;
  font-family:var(--zaehl); font-size:.56rem; letter-spacing:.04em;
  color:var(--text-schwach)}
.p-tag i{font-style:normal; opacity:.62}
.p-tag b{font-weight:400; font-size:.66rem; color:var(--text-dim)}
.p-tag.we b,.p-tag.we i{color:var(--akzent); opacity:.85}
.p-lab{font-family:var(--zaehl); font-size:.68rem; letter-spacing:.12em;
  color:var(--text-schwach)}
.p-z{display:flex; justify-content:center}

/* Das einzig Runde auf dieser Seite: eine Schicht. */
.m{display:block; width:13px; height:21px; border-radius:7px; background:var(--frei)}
.m.f{background:var(--fruh)}
.m.s{background:var(--spat)}
.m.n{background:var(--nachtm)}
.m.o{background:none; box-shadow:inset 0 0 0 1px var(--frei)}

@keyframes rechnen{from{opacity:0; transform:translateY(7px) scaleY(.55)}
  to{opacity:1; transform:none}}
.frisch .p-gitter>*{animation:rechnen .46s cubic-bezier(.2,.75,.3,1) both;
  animation-delay:calc(var(--i,0) * 13ms)}

/* Die Welle: eine Helligkeit, die diagonal durch den Plan wandert. Sie
   läuft nur über besetzte Schichten — die Lücken bleiben ruhig. */
@keyframes atmen{0%,100%{opacity:.55} 50%{opacity:1}}
.p-gitter .m.f,.p-gitter .m.s,.p-gitter .m.n{
  animation:atmen 9s ease-in-out infinite;
  animation-delay:calc(var(--ph,0) * -1ms)}

.i-legende{display:flex; gap:12px 26px; flex-wrap:wrap; align-items:center;
  padding-block:16px; border-top:1px solid var(--linie);
  font-family:var(--zaehl); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-schwach)}
.i-legende span{display:inline-flex; align-items:center; gap:9px}
.i-legende .m{width:9px; height:15px; border-radius:5px}
.i-regel{margin-left:auto; color:var(--text-dim)}

/* ══ Fachwelten-Band ═══════════════════════════════════════════════════ */
.branchen-band{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linie)}
.branchen-band li{background:var(--flaeche); padding:16px 20px; display:grid;
  grid-template-columns:1fr auto; align-items:baseline; gap:2px 12px}
.branchen-band b{font-family:var(--sig); font-size:1.05rem; font-weight:500;
  letter-spacing:.03em}
.branchen-band span{grid-column:1; font-size:.85rem; color:var(--text-schwach)}
.branchen-band em{font-family:var(--zaehl); font-style:normal; font-size:.8rem;
  color:var(--akzent)}

/* ══ Zellen statt Karten ═══════════════════════════════════════════════ */
.feld-3,.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--linie); border-block:1px solid var(--linie)}
.feld-3>*,.grid-3>*{background:var(--flaeche); padding:26px 24px 30px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--linie); border-block:1px solid var(--linie)}
.grid-4>*{background:var(--flaeche); padding:24px 22px 28px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--linie); border-block:1px solid var(--linie)}
.grid-2>*{background:var(--flaeche); padding:28px 26px 32px}
.zelle,.karte{position:relative}
.zelle p,.karte p{color:var(--text-dim); font-size:.97rem; margin-bottom:0}
.zelle p+p,.karte p+p{margin-top:.8em}
/* die Linie über der Zelle füllt sich beim Überfahren */
.feld-3>.zelle::before,.grid-3>.karte::before,.grid-4>.karte::before,
.grid-2>.karte::before{
  content:""; position:absolute; top:-1px; left:0; width:0; height:1px;
  background:var(--akzent); transition:width .32s cubic-bezier(.2,.75,.3,1)}
.feld-3>.zelle:hover::before,.grid-3>.karte:hover::before,
.grid-4>.karte:hover::before,.grid-2>.karte:hover::before{width:100%}
.karte-still{background:var(--still)!important}
.karte-link a{font-family:var(--zaehl); font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; display:inline-block; margin-top:16px}
.preis-mini{font-family:var(--zaehl); font-size:.82rem; color:var(--akzent)!important;
  margin-top:14px!important}

/* Aufzählung: das Zeichen ist eine Schicht */
.tick{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:9px}
.tick li{position:relative; padding-left:24px; color:var(--text-dim); font-size:.95rem;
  line-height:1.5}
.tick li::before{content:""; position:absolute; left:0; top:.44em; width:9px; height:15px;
  border-radius:5px; background:var(--akzent); opacity:.85}
.tick.gross li{font-size:1.02rem}

/* ══ Zweispalter ═══════════════════════════════════════════════════════ */
.split{display:grid; grid-template-columns:1fr .92fr; gap:clamp(36px,5vw,72px);
  align-items:center}
.split-eng{grid-template-columns:1fr .86fr}
.split.umgekehrt>div:first-child{order:2}
.split h2{margin-bottom:.34em}
.split .lead{margin-bottom:1.4em}
.split .btn{margin-top:26px}
.ring{display:flex; flex-direction:column; gap:18px; align-items:center}
.bild-lab{font-family:var(--zaehl); font-size:.72rem; line-height:1.7;
  letter-spacing:.05em; color:var(--text-schwach); text-align:center;
  max-width:44ch; margin:0}

/* ══ Schritte: eine echte Folge, deshalb nummeriert ════════════════════ */
.schritte{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linie);
  border-block:1px solid var(--linie)}
.schritte li{background:var(--flaeche); padding:24px 22px 30px}
.schritte .nr{display:block; font-family:var(--zaehl); font-size:.72rem;
  letter-spacing:.14em; color:var(--akzent); margin-bottom:22px}
.schritte h3{margin-bottom:.5em}
.schritte p{margin:0; font-size:.94rem; color:var(--text-dim)}

/* ══ Prüfliste ═════════════════════════════════════════════════════════ */
.pruef-liste{display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--linie); border-block:1px solid var(--linie)}
.pruef-liste>div{background:var(--flaeche); padding:18px 22px; display:grid; gap:3px}
.pruef-liste strong{font-family:var(--sig); font-weight:500; font-size:1.05rem;
  letter-spacing:.02em; line-height:1.3}
.pruef-liste span{font-size:.9rem; color:var(--text-dim)}

/* ══ Tafeln ════════════════════════════════════════════════════════════ */
.tabelle-w{overflow-x:auto; border-block:1px solid var(--linie-stark)}
.tab{width:100%; border-collapse:collapse; min-width:580px}
.tab th,.tab td{text-align:left; padding:15px 20px 15px 0;
  border-bottom:1px solid var(--linie); font-size:.95rem}
.tab th{font-family:var(--zaehl); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-schwach); padding-top:0}
.tab td:first-child,.tab th:first-child{padding-left:0}
.tab tbody tr:last-child td{border-bottom:0}
.tab tbody tr{transition:background .15s}
.tab tbody tr:hover{background:var(--flaeche)}
.tab strong{font-weight:700}
.kurz{font-family:var(--zaehl); font-size:.72rem; letter-spacing:.1em;
  color:var(--akzent)}

/* ══ Stimmen: Zitate mit hängender Quelle, keine Kästen ════════════════ */
.stimmen{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--linie); border-block:1px solid var(--linie)}
.stimmen figure{margin:0; background:var(--flaeche); padding:30px 26px;
  display:flex; flex-direction:column; gap:22px}
.stimmen blockquote{margin:0; font-family:var(--sig); font-weight:300;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem); line-height:1.3;
  letter-spacing:.01em; text-wrap:pretty}
.stimmen figcaption{margin-top:auto; display:grid; gap:3px;
  font-family:var(--zaehl); font-size:.72rem; letter-spacing:.07em}
.stimmen figcaption b{font-weight:400; color:var(--text)}
.stimmen figcaption span{color:var(--text-schwach); text-transform:uppercase;
  font-size:.66rem; letter-spacing:.11em}

/* ══ Preise ════════════════════════════════════════════════════════════ */
.tarif-tafel{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--linie-stark); border-block:1px solid var(--linie-stark)}
.tf-sp{background:var(--flaeche); padding:28px 26px 32px; display:flex;
  flex-direction:column}
.tf-sp-mitte{background:var(--still)}
.tf-name{font-family:var(--zaehl); font-size:.74rem; letter-spacing:.16em;
  font-weight:400; margin:0;
  text-transform:uppercase; color:var(--akzent); margin:0 0 18px}
.tf-preis{display:flex; align-items:baseline; gap:10px; margin:0 0 16px}
.tf-preis b{font-family:var(--sig); font-weight:300; font-size:clamp(3.2rem,2rem + 3.6vw,4.6rem);
  line-height:.86; letter-spacing:0; color:var(--akzent);
  text-shadow:var(--leucht)}
.tf-preis span{font-family:var(--zaehl); font-size:.7rem; line-height:1.5;
  letter-spacing:.07em; color:var(--text-schwach)}
.tf-claim{color:var(--text-dim); font-size:.96rem; margin-bottom:14px}
.tf-grenze{font-family:var(--zaehl); font-size:.72rem; letter-spacing:.05em;
  color:var(--text-schwach); border-top:1px solid var(--linie); padding-top:14px;
  margin:0}
.tf-sp .tick{flex:1}

.preis-teaser{border-block:1px solid var(--linie-stark)}
.pt-zeile{display:grid; grid-template-columns:1fr auto; gap:2px 20px;
  padding:18px 0; border-bottom:1px solid var(--linie); align-items:baseline}
.pt-zeile:last-of-type{border-bottom:0}
.pt-zeile>span:first-child{font-family:var(--sig); font-size:1.35rem; font-weight:500;
  letter-spacing:.02em}
.pt-preis{font-family:var(--sig); font-weight:300; font-size:1.9rem; line-height:1;
  color:var(--akzent); text-shadow:var(--leucht)}
.pt-bis{grid-column:1/-1; font-family:var(--zaehl); font-size:.72rem;
  letter-spacing:.05em; color:var(--text-schwach)}
.preis-teaser .klein{margin:16px 0 0}

/* ══ Rechner: ein Gerät, kein Formular ═════════════════════════════════ */
.rechner{display:grid; grid-template-columns:1.1fr .9fr; gap:1px;
  background:var(--linie-stark); border:1px solid var(--linie-stark)}
/* Drei Ringe nebeneinander, solange die Spalte es trägt — darunter bricht
   der letzte um. Feste zwei Spalten ließen den dritten Ring allein in
   einer eigenen Zeile stehen, mit viel Weiß daneben. */
.rechner-ein{background:var(--flaeche); padding:30px 28px; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(146px,1fr)); gap:22px 16px;
  align-content:start; align-items:end}
.feld{display:grid; gap:8px}
.feld-voll{grid-column:1/-1}
.feld label,.feld legend{font-family:var(--zaehl); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-schwach); padding:0}
fieldset.feld{border:0; margin:0; padding:0}
input:not([type=checkbox]):not([type=radio]),select,textarea{
  font-family:var(--zaehl); font-size:1rem; padding:12px 14px;
  border:1px solid var(--linie-stark); border-radius:0; background:var(--flaeche);
  color:var(--text); width:100%}
textarea{font-family:var(--lauf)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--akzent);
  box-shadow:inset 0 -2px 0 var(--akzent)}
/* ── Der Ringregler im Preisrechner ── */
.ringfeld{justify-items:center; gap:16px; align-content:start}
/* „Personen je Standort" bricht auf zwei Zeilen, „Standorte" nicht. Ohne
   feste Höhe stünden die Scheiben daneben um eine Zeile versetzt. */
.ring-lab{font-family:var(--zaehl); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-schwach); justify-self:start;
  display:flex; align-items:flex-end; min-height:2.6em; line-height:1.3}
.ring{display:grid; justify-items:center; gap:14px; width:100%}
.rr-scheibe{width:min(200px,100%); aspect-ratio:1; border-radius:50%;
  cursor:pointer; touch-action:none}
/* Der Fokusring hugt die Scheibe, statt weit außen einen zweiten Kreis
   zu zeichnen — sonst sieht er aus wie Teil der Grafik. */
.rr-scheibe:focus-visible{outline:2px solid var(--akzent); outline-offset:-1px}
.rr-scheibe:active{cursor:grabbing}
.ring-svg-regler{display:block; width:100%; height:100%; overflow:visible}
.rr-spur{fill:none; stroke:var(--linie); stroke-width:1; opacity:.7}
.rr-stufe{fill:none; stroke-linecap:round; stroke:var(--linie-weich);
  transition:stroke .18s ease, stroke-width .18s ease}
.rr-stufe.-belegt{stroke:var(--akzent)}
.rr-stufe.-griff{stroke:var(--akzent-hell)}
.-aktiv .rr-stufe.-belegt{filter:drop-shadow(0 0 6px var(--akzent-hell))}
.rr-zahl{fill:var(--text); font-family:var(--sig); font-weight:300; font-size:42px;
  letter-spacing:-.02em}
.rr-einheit{fill:var(--text-schwach); font-family:var(--zaehl); font-size:10px;
  letter-spacing:.16em}
.rr-tasten{display:flex; align-items:center; gap:8px; font-family:var(--zaehl);
  font-size:.72rem; letter-spacing:.06em; color:var(--text-schwach)}
.rr-tasten button{width:32px; height:32px; border:1px solid var(--linie-stark);
  background:var(--flaeche); color:var(--text); font-size:16px; line-height:1;
  border-radius:0; cursor:pointer}
.rr-tasten button:hover:not(:disabled){border-color:var(--akzent); color:var(--akzent)}
.rr-tasten button:disabled{opacity:.35; cursor:default}
.rr-tasten span{min-width:72px; text-align:center}

/* ── Branchenpakete als Schalter, nicht als nackte Kästchen ── */
.checks{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.checks .check{position:relative; cursor:pointer}
.checks .check input{position:absolute; opacity:0; width:1px; height:1px}
.check-feld{display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; width:100%; padding:12px 14px; border:1px solid var(--linie-stark);
  background:var(--flaeche); transition:border-color .16s, background .16s}
.check-feld b{font-weight:400; font-size:.93rem}
.check-feld em{font-family:var(--zaehl); font-style:normal; font-size:.76rem;
  color:var(--text-schwach)}
.checks .check:hover .check-feld{border-color:var(--akzent)}
.checks .check input:focus-visible + .check-feld{outline:2px solid var(--akzent);
  outline-offset:2px}
.checks .check input:checked + .check-feld{border-color:var(--akzent);
  background:var(--akzent-flaeche)}
.checks .check input:checked + .check-feld em{color:var(--akzent)}
.feld .check,.check{display:flex; align-items:flex-start; gap:11px;
  font-family:var(--lauf); font-size:.93rem; line-height:1.45; letter-spacing:0;
  text-transform:none; color:var(--text); cursor:pointer}
.check input{margin-top:.3em; accent-color:var(--akzent); width:16px; height:16px;
  flex-shrink:0}
.check em{font-family:var(--zaehl); font-style:normal; font-size:.8rem;
  color:var(--text-schwach)}

.rechner-aus{background:var(--grund); color:var(--text); padding:30px 28px}
.ra-lab{font-family:var(--zaehl); font-size:.68rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--text-schwach); margin:0 0 10px}
.ra-summe{font-family:var(--sig); font-weight:300; font-size:clamp(3.2rem,2rem + 4.4vw,5.2rem);
  line-height:.86; color:var(--akzent); text-shadow:var(--leucht);
  margin:0 0 24px}
.ra-summe em{font-style:normal; font-size:.34em; color:var(--text-dim)}
.ra-zeilen{margin:0 0 18px; padding-top:18px; border-top:1px solid var(--linie);
  display:grid; grid-template-columns:1fr auto; gap:9px 18px;
  font-family:var(--zaehl); font-size:.78rem; letter-spacing:.03em}
.ra-zeilen dt{color:var(--text-schwach)}
.ra-zeilen dd{margin:0; text-align:right; color:var(--text)}
.ra-kopf{font-size:.86rem; line-height:1.55; color:var(--text-dim); margin:0 0 22px}
.rechner-aus .btn-voll{margin-top:0}

/* ══ Fragen ════════════════════════════════════════════════════════════ */
.faq{border-top:1px solid var(--linie-stark); max-width:none}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer; padding:20px 48px 20px 0; position:relative;
  list-style:none; display:block}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{font-family:var(--sig); font-weight:500;
  font-size:clamp(1.05rem,.95rem + .4vw,1.3rem); line-height:1.25; letter-spacing:.02em}
.faq summary:hover span{color:var(--akzent)}
.faq summary::after{content:""; position:absolute; right:6px; top:calc(50% - 1px);
  width:15px; height:1px; background:var(--akzent)}
.faq summary::before{content:""; position:absolute; right:13px; top:calc(50% - 8px);
  width:1px; height:15px; background:var(--akzent); transition:transform .22s,opacity .22s}
.faq details[open] summary::before{transform:scaleY(0); opacity:0}
.faq-a{padding:0 12% 24px 0; color:var(--text-dim); max-width:74ch}
.faq-a:last-child{margin:0}
.sect h2+.faq{margin-bottom:52px}

/* ══ Zahlen ════════════════════════════════════════════════════════════ */
.zahlen{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--linie); border-block:1px solid var(--linie)}
.zahlen>div{background:var(--flaeche); padding:26px 22px 30px}
.zahlen strong{display:block; font-family:var(--sig); font-weight:300;
  font-size:clamp(3rem,2rem + 3vw,4.2rem); line-height:.86; color:var(--akzent);
  text-shadow:var(--leucht)}
.zahlen span{display:block; margin-top:16px; font-size:.92rem; color:var(--text-dim)}

/* ══ Artikel ═══════════════════════════════════════════════════════════ */
.artikel h2 a{color:var(--text)}
.artikel h2 a:hover{color:var(--akzent); text-decoration:none}
.artikel-text{max-width:70ch; font-size:1.06rem}
.artikel-text h2{margin-top:1.9em; font-size:clamp(1.7rem,1.3rem + 1.6vw,2.4rem)}
.artikel-text p{color:var(--text-dim)}
.artikel-text strong{color:var(--text)}
.art-bild{margin:48px 0; text-align:center}
.art-bild .ring-svg{max-width:420px}
.art-bild figcaption{font-family:var(--zaehl); font-size:.72rem; line-height:1.7;
  color:var(--text-schwach); margin-top:16px}
.art-schluss{margin-top:2em; padding-top:1.5em; border-top:1px solid var(--linie-stark);
  font-family:var(--sig); font-weight:300; font-size:clamp(1.4rem,1.15rem + 1vw,1.9rem);
  line-height:1.25; color:var(--akzent)!important;
  text-shadow:var(--leucht)}

/* ══ Kontakt ═══════════════════════════════════════════════════════════ */
.kontakt{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,3vw,44px);
  align-items:start}
.k-form{border:1px solid var(--linie-stark); padding:32px 30px; display:grid;
  grid-template-columns:repeat(2,1fr); gap:20px}
.k-form h2,.k-form>.klein,.k-form>button,.k-hinweis{grid-column:1/-1}
.k-form h2{margin-bottom:0}
.k-hinweis{margin:0; font-family:var(--zaehl); font-size:.8rem; color:var(--akzent);
  min-height:1.5em}
.k-seite{display:grid; gap:1px; background:var(--linie); border:1px solid var(--linie)}
.k-seite .karte{background:var(--flaeche); padding:24px 24px 26px}
.k-seite p{font-size:.94rem; color:var(--text-dim)}
.k-seite p:last-child{margin-bottom:0}

/* ══ Rechtstexte ═══════════════════════════════════════════════════════ */
.recht{max-width:72ch}
.recht h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem); margin-top:2em}
.recht p,.recht li{color:var(--text-dim)}
.muster{margin-top:2.6em; padding:18px 20px; background:var(--flaeche);
  border-left:2px solid var(--warn)}
.vier{max-width:60ch}
.vier .hero-akt{display:flex; gap:10px; flex-wrap:wrap; margin-top:32px}

/* ══ Band, Aufruf, Fuß ═════════════════════════════════════════════════ */
.band{display:flex; gap:12px 28px; flex-wrap:wrap; font-family:var(--zaehl);
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-dim)}
.band-mitte{justify-content:center}

.sect-cta{padding:clamp(52px,5.5vw,84px) 0}
.sect-cta>.wrap{display:block}
.sect-cta>.wrap::before{display:none}
.cta{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,4vw,64px);
  align-items:end; border:1px solid var(--linie-stark);
  padding:clamp(26px,3.5vw,44px); box-shadow:inset 0 0 60px rgba(4,10,12,.4)}
.cta h2{margin-bottom:.24em}
.cta p{color:var(--text-dim); max-width:52ch; margin:0}
.cta .rail-lab{color:var(--text-dim)}
.cta-akt{display:flex; gap:10px; flex-wrap:wrap}
/* Eckwinkel — dieselbe Sprache wie der Rahmen der Halle */
.cta,.rechner,.k-form,.karte-bild{position:relative}
.cta::before,.cta::after,.rechner::before,.rechner::after,
.k-form::before,.k-form::after,.karte-bild::before,.karte-bild::after{
  content:""; position:absolute; width:9px; height:9px; z-index:1;
  border:1px solid var(--akzent)}
.cta::before,.rechner::before,.k-form::before,.karte-bild::before{
  top:-1px; left:-1px; border-right:0; border-bottom:0}
.cta::after,.rechner::after,.k-form::after,.karte-bild::after{
  bottom:-1px; right:-1px; border-left:0; border-top:0}

/* Der Fuß trug bisher Midnight und stieß ohne Naht an das ebenfalls
   dunkle Aufrufband — die letzten 825 px waren ein einziger Block. Das
   Aufrufband bleibt der letzte laute Moment; der Fuß ist ein Verzeichnis
   und tritt zurück. */
.fuss{background:var(--still); color:var(--text-dim);
  border-top:1px solid var(--linie-stark);
  padding:clamp(52px,5vw,76px) 0 26px; font-size:.92rem}
.fuss-oben{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,2fr);
  gap:clamp(32px,4vw,64px); padding-bottom:40px; border-bottom:1px solid var(--linie)}
.fuss-marke .wortmarke-text{color:var(--text)}
.fuss-marke p{max-width:36ch; margin:20px 0 0; color:var(--text-dim)}
.fuss-adr{font-family:var(--zaehl); font-size:.76rem; line-height:1.8;
  color:var(--text-schwach)!important}
.fuss a{color:var(--text-dim)}
.fuss a:hover{color:var(--akzent)}
.fuss-spalten{display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
.fuss-spalten h2{font-family:var(--zaehl); font-weight:400; font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-schwach);
  margin-bottom:16px}
.fuss-spalten ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.fuss-unten{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:22px; font-family:var(--zaehl); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-schwach)}
.fuss-unten p{margin:0}

/* ══ Beispielbögen auf der Branchenseite ═══════════════════════════════ */
.karte-bild{padding:24px!important; border:1px solid var(--linie)}
.plan-kopf{display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  font-family:var(--zaehl); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-schwach); margin-bottom:18px}
.lab{color:var(--akzent)}
.plan-fuss{display:flex; gap:16px; flex-wrap:wrap; margin-top:18px;
  font-family:var(--zaehl); font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-schwach)}
.plan-fuss span{display:inline-flex; align-items:center; gap:7px}
.pt{width:8px; height:13px; border-radius:4px; display:inline-block; background:var(--frei)}
.pt.f{background:var(--fruh)} .pt.s{background:var(--spat)}
.pt.n{background:var(--nachtm)}
.pt.o{background:none; box-shadow:inset 0 0 0 1px var(--frei)}

/* ── Grafiken nehmen die Werte ihrer Fläche an ── */
.logo .lb{fill:var(--text)}
.logo .lm{fill:var(--akzent)}
.logo .lk{fill:none; stroke:var(--text); stroke-width:2.6; stroke-linecap:round;
  opacity:.8}

.plan-svg .f{fill:var(--fruh)}
.plan-svg .s{fill:var(--spat)}
.plan-svg .n{fill:var(--nachtm)}
.plan-svg .o{fill:none; stroke:var(--frei); stroke-width:.8}
.ring-svg .b{fill:none; stroke-linecap:round; stroke-width:var(--sw)}
.ring-svg .b.f{stroke:var(--fruh)}
.ring-svg .b.s{stroke:var(--spat)}
.ring-svg .b.n{stroke:var(--nachtm)}
.ring-svg .b.o{stroke:var(--frei); stroke-width:.9}
.ring-svg{transform-box:view-box}
.ring-svg .rg{transform-box:view-box; will-change:transform;
  animation:ringgang var(--dauer,60s) linear infinite}
@keyframes ringgang{to{transform:rotate(calc(var(--richtung,1) * 360deg))}}
.ring-svg .mitte-ring{fill:none; stroke:var(--linie-stark); stroke-width:1.2}
.ring-svg .mitte{fill:var(--text); font-family:var(--sig); font-weight:300}
.ring-svg .mitte-lab{fill:var(--text-schwach); font-family:var(--zaehl);
  letter-spacing:3px}

/* ══ Schmale Bildschirme ═══════════════════════════════════════════════ */
@media (max-width:1040px){
  :root{--rail:120px; --spalt:28px}
  .split,.split-eng,.rechner,.kontakt{grid-template-columns:1fr}
  .split.umgekehrt>div:first-child{order:0}
  .grid-4,.schritte,.zahlen,.branchen-band{grid-template-columns:repeat(2,1fr)}
  .feld-3,.grid-3,.stimmen,.tarif-tafel{grid-template-columns:repeat(2,1fr)}
  .fuss-oben{grid-template-columns:1fr}
  .fuss-spalten{grid-template-columns:repeat(2,1fr)}
  .instrument-leiste{grid-template-columns:1fr auto; row-gap:18px}
  .i-notiz{display:none}
  .ring{max-width:400px; margin-inline:auto}
}
@media (max-width:820px){
  body{font-size:16px}
  :root{--rail:0px; --spalt:0px}
  .sect>.wrap{grid-template-columns:1fr}
  .sect>.wrap>*,.sect-kopf>.rail-lab,.sect-kopf>.titel{grid-column:1}
  .sect-kopf>.rail-lab,.sect>.wrap>.rail-lab{position:static}
  .sect>.wrap::before{display:none}
  .nav{position:absolute; top:100%; left:0; right:0; background:var(--grund);
    border-bottom:1px solid var(--linie-stark); flex-direction:column; gap:0;
    padding:4px var(--pad) 16px; display:none}
  .nav.offen{display:flex}
  .nav a{padding:14px 0; border-bottom:1px solid var(--linie); width:100%;
    font-size:.85rem}
  .burger{display:block}
  .nur-breit{display:none}
  .feld-3,.grid-2,.grid-3,.grid-4,.stimmen,.schritte,.zahlen,.pruef-liste,
  .checks,.rechner-ein,.k-form,.tarif-tafel,.branchen-band,.fuss-spalten,
  .cta{grid-template-columns:1fr}
  .cta{align-items:start}
  .plan-buehne{--pitch:22px; grid-template-columns:44px minmax(0,1fr)}
  .faq-a{padding-right:0}
}