/* ============================================================================
   hubfox.de — Designsystem
   Dunkel, präzise, Produkt im Mittelpunkt. Ein Akzent, Hairlines, Lichtschleier.
   ========================================================================= */

/* ---------- Schrift (selbst gehostet, kein Google) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Token: dunkel ist der Standard ---------- */
:root{
  color-scheme: dark;

  --grund:     #08090a;
  --grund-2:   #0c0d0f;
  --flaeche:   #101113;
  --flaeche-2: #16181c;
  --erhaben:   #1c1f24;

  --linie:       rgba(255,255,255,.07);
  --linie-stark: rgba(255,255,255,.13);

  --text:   #f7f8f8;
  --text-2: #9ca3af;
  --text-3: #818997;

  /* dunkler als urspruenglich (#6e62f5): weisser Text darauf braucht 4,5:1 */
  --akzent:      #665af0;
  --akzent-hell: #8b82ff;
  --akzent-tief: #4b3fd8;
  --gruen:  #3fb950;
  --gelb:   #d29922;
  --rot:    #f85149;

  --mass:     1180px;
  --radius:   16px;
  --radius-s: 10px;
  --takt:     132px;

  --schrift: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --glanz: 0 1px 0 rgba(255,255,255,.05) inset;
  --hebung: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px -12px rgba(0,0,0,.7);
}

/* Heller Modus nur, wenn ausdrücklich gewählt */
html[data-theme="light"]{
  color-scheme: light;
  --grund:     #ffffff;
  --grund-2:   #fafafb;
  --flaeche:   #ffffff;
  --flaeche-2: #f6f7f9;
  --erhaben:   #eef0f4;
  --linie:       rgba(10,12,20,.10);
  --linie-stark: rgba(10,12,20,.20);
  --text:   #101114;
  --text-2: #4c525f;
  --text-3: #636a77;
  --akzent: #5546e8;
  /* als Textfarbe muss der helle Akzent auf Weiss 4,5:1 erreichen */
  --akzent-hell: #5546e8;
  /* Statusfarben eigens fuer Weiss: die dunklen Toene erreichten nur 2,4 bis 3,4:1 */
  --gruen: #1f7a2e;
  --gelb:  #8a6410;
  --rot:   #b52b25;
  --glanz: none;
  --hebung: 0 1px 2px rgba(16,17,20,.05), 0 14px 34px -16px rgba(16,17,20,.20);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--grund); color:var(--text);
  font-family:var(--schrift); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (max-width:760px){ body{font-size:15.5px} :root{--takt:82px} }

a{color:inherit; text-decoration:none}
/* Ein Verweis mitten im Text muss auch ohne Farbwahrnehmung erkennbar sein,
   deshalb unterstrichen. Knoepfe und Kachelverweise sind davon ausgenommen. */
p a:not([class]), li a:not([class]), dd a:not([class]), address a:not([class]){
  color:var(--akzent-hell); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, currentColor 45%, transparent)}
p a:not([class]):hover, li a:not([class]):hover, dd a:not([class]):hover,
address a:not([class]):hover{text-decoration-color:currentColor}
img{max-width:100%; display:block}
h1,h2,h3,h4{margin:0; font-weight:650; letter-spacing:-.03em; line-height:1.08}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
::selection{background:color-mix(in srgb, var(--akzent) 40%, transparent)}
:focus-visible{outline:2px solid var(--akzent-hell); outline-offset:3px; border-radius:5px}

/* Sprungmarke: liegt ausserhalb des Bildes und kommt beim ersten Tabulator hervor.
   Rein ueber CSS, damit sie auch ohne JavaScript funktioniert. */
.sprungmarke{position:fixed; left:12px; top:12px; z-index:200; transform:translateY(-200%);
  background:var(--akzent); color:#fff; font-size:.94rem; font-weight:550;
  padding:.7rem 1.15rem; border-radius:10px; transition:transform .18s ease}
.sprungmarke:focus-visible{transform:translateY(0); outline:2px solid var(--text); outline-offset:3px}
#inhalt{scroll-margin-top:78px}

/* ---------- Raster ---------- */
.mass{max-width:var(--mass); margin:0 auto; padding:0 26px}
@media (max-width:760px){ .mass{padding:0 18px} }
section{padding:var(--takt) 0; position:relative}
.trenn{border-top:1px solid var(--linie)}

.marke-zeile{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:.73rem; letter-spacing:.11em; text-transform:uppercase; color:var(--text-3)}
.marke-zeile::before{content:""; width:18px; height:1px; background:var(--akzent)}

.kopf{max-width:760px; margin-bottom:60px}
.kopf h2{font-size:clamp(1.9rem, 3.9vw, 3rem); letter-spacing:-.038em}
.kopf .sub{margin-top:18px; color:var(--text-2); font-size:1.1rem; max-width:60ch}
.kopf .marke-zeile{margin-bottom:20px}

/* ---------- Lichtschleier ---------- */
.schleier{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.schleier i{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.schleier .s1{width:46rem; height:30rem; left:-12rem; top:-16rem;
  background:radial-gradient(circle, rgba(110,98,245,.42), transparent 68%)}
.schleier .s2{width:38rem; height:26rem; right:-10rem; top:-6rem;
  background:radial-gradient(circle, rgba(64,120,255,.26), transparent 68%)}
.schleier .s3{width:40rem; height:24rem; left:34%; top:22rem;
  background:radial-gradient(circle, rgba(160,70,255,.16), transparent 70%)}
html[data-theme="light"] .schleier i{opacity:.3; filter:blur(80px)}

/* ---------- Kopfzeile ---------- */
.nav{position:sticky; top:0; z-index:90; border-bottom:1px solid transparent;
  background:color-mix(in srgb, var(--grund) 72%, transparent);
  backdrop-filter:blur(18px) saturate(1.6); transition:border-color .25s, background .25s}
.nav.fest{border-bottom-color:var(--linie); background:color-mix(in srgb, var(--grund) 88%, transparent)}
.navin{display:flex; align-items:center; gap:30px; height:62px}
.marke{display:flex; align-items:center; gap:10px; font-weight:600; font-size:1.06rem; letter-spacing:-.035em}
.marke svg{width:26px; height:26px; flex:0 0 auto}
/* Dachmarke monochrom: der Fuchs nimmt die Textfarbe an, die Innenflächen den Grund.
   Farbe gehört den einzelnen Werkzeugen, nicht der Dachmarke. */
.fuchs .aussen{fill:currentColor}
.fuchs .innen{fill:var(--grund)}
.marke{color:var(--text)}
.marke .fx{color:var(--text-2)}
.navlinks{display:flex; gap:2px; margin-left:auto}
.navlinks a{padding:.42rem .7rem; border-radius:7px; font-size:.9rem; color:var(--text-2); transition:color .15s, background .15s}
.navlinks a:hover{color:var(--text); background:var(--flaeche-2)}
.navwerkzeug{display:flex; align-items:center; gap:8px}
/* Burger: unter 980px ersetzt er die Reiter, das Menü klappt darunter auf */
.burger{display:none; width:34px; height:34px; place-items:center; border-radius:8px;
  border:1px solid var(--linie); background:var(--flaeche); color:var(--text); cursor:pointer}
.burger:hover{border-color:var(--linie-stark)}
.menue{display:none}
@media (max-width:980px){
  .navlinks{display:none}
  .navwerkzeug{margin-left:auto}
  .burger{display:grid}
  .navwerkzeug .knopf-voll{display:none}
  /* Sichtbarkeit über das hidden-Attribut: unabhängig von Animationen,
     funktioniert auch ohne JavaScript-Feinheiten und ist für Hilfsmittel klar. */
  .menue{display:block; position:fixed; left:0; right:0; top:62px; z-index:89;
    max-height:calc(100vh - 62px); overflow-y:auto;
    background:var(--grund); border-bottom:1px solid var(--linie);
    box-shadow:0 24px 48px -24px rgba(0,0,0,.7)}
  .menue[hidden]{display:none}
  .menue{animation:menue-auf .22s cubic-bezier(.16,1,.3,1)}
  @keyframes menue-auf{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
  .menue-in{padding:14px 18px 24px; display:grid; gap:2px}
  .menue a{padding:.72rem .6rem; border-radius:8px; font-size:1.02rem; color:var(--text-2)}
  .menue a:hover, .menue a:focus-visible{color:var(--text); background:var(--flaeche-2)}
/* Der Handlungsknopf im Menue behaelt seine eigene Schriftfarbe */
.menue a.knopf-voll, .menue a.knopf-voll:hover{color:#fff; background:var(--akzent)}
  .menue .knopf{margin-top:12px}
  .menue .trennlinie{height:1px; background:var(--linie); margin:10px 0}
  .menue .klein{font-size:.86rem; color:var(--text-3); padding:.4rem .6rem}
}

.knopf{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem 1.05rem; border-radius:9px; font-weight:550; font-size:.92rem;
  border:1px solid transparent; cursor:pointer; font-family:inherit; white-space:nowrap;
  transition:background .16s, border-color .16s, color .16s}
.knopf-voll{background:var(--akzent); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.14) inset}
.knopf-voll:hover{background:var(--akzent-hell)}
.knopf-rand{border-color:var(--linie-stark); color:var(--text); background:var(--flaeche)}
.knopf-rand:hover{border-color:var(--text-3); background:var(--flaeche-2)}
.knopf-gross{padding:.78rem 1.4rem; font-size:.98rem; border-radius:10px}
.ikonknopf{width:34px; height:34px; display:grid; place-items:center; border-radius:8px;
  border:1px solid var(--linie); background:var(--flaeche); color:var(--text-2); cursor:pointer}
.ikonknopf:hover{color:var(--text); border-color:var(--linie-stark)}
html[data-theme="light"] .sonne{display:none} html[data-theme="light"] .mond{display:block}
.sonne{display:block} .mond{display:none}

/* ---------- Aufmacher ---------- */
.auf{padding:clamp(38px,7.5vw,96px) 0 0; text-align:center; position:relative; overflow:hidden}
.auf > .mass{position:relative; z-index:1}
.plakette{display:inline-flex; align-items:center; gap:8px; padding:.34rem .8rem .34rem .5rem;
  border:1px solid var(--linie); border-radius:999px; background:var(--flaeche);
  font-size:.82rem; color:var(--text-2); box-shadow:var(--glanz)}
.plakette b{font-weight:600; color:var(--text); background:var(--erhaben);
  border-radius:999px; padding:.12rem .5rem; font-size:.76rem}
.auf h1{margin:clamp(18px,3.5vw,28px) auto 0; max-width:19ch; font-size:clamp(2.7rem, 6.4vw, 4.9rem);
  letter-spacing:-.045em; line-height:1.02; font-weight:600}
.auf h1 em{font-style:normal; background:linear-gradient(100deg, var(--akzent-hell), #7db8ff 55%, #c99bff);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.auf .fuehrung{margin:clamp(18px,3vw,26px) auto 0; max-width:60ch;
  font-size:clamp(1.02rem,2.6vw,1.14rem); color:var(--text-2)}
.auf .tasten{display:flex; gap:11px; justify-content:center;
  margin-top:clamp(22px,4vw,34px); flex-wrap:wrap}
.auf .beiwerk{margin-top:18px; font-size:.87rem; color:var(--text-3)}

/* Bühne für das Haupt-Mockup */
.buehne{position:relative; margin-top:clamp(38px,6vw,66px); padding-bottom:2px}
.buehne::before{content:""; position:absolute; left:50%; top:-6%; transform:translateX(-50%);
  width:min(1100px,96%); height:70%; border-radius:50%; filter:blur(70px); opacity:.5;
  background:radial-gradient(ellipse, rgba(110,98,245,.5), transparent 65%); z-index:0}
.buehne-in{position:relative; z-index:1; -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent);
  mask-image:linear-gradient(180deg,#000 74%,transparent)}

/* ---------- Branchenleiste ---------- */
.branchen{padding:52px 0; border-top:1px solid var(--linie); border-bottom:1px solid var(--linie)}
.branchen p{text-align:center; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-3); margin-bottom:26px}
.branchen ul{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 38px}
.branchen li{font-size:1rem; font-weight:550; color:var(--text-2); letter-spacing:-.01em}
@media (max-width:600px){ .branchen ul{gap:10px 22px} .branchen li{font-size:.92rem} }

/* ---------- Bento ---------- */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:16px}
.b-karte{grid-column:span 2; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--radius); padding:28px 26px; box-shadow:var(--glanz);
  position:relative; overflow:hidden; transition:border-color .2s}
.b-karte:hover{border-color:var(--linie-stark)}
.b-karte.gross{grid-column:span 3}
.b-karte.breit{grid-column:span 6}
.b-karte h3{font-size:1.12rem; margin-bottom:9px; letter-spacing:-.022em}
.b-karte p{color:var(--text-2); font-size:.96rem}
.b-karte .ikon{width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  border:1px solid var(--linie); background:var(--flaeche-2); color:var(--akzent-hell); margin-bottom:18px}
.b-karte .ikon svg{width:17px; height:17px}
@media (max-width:900px){ .bento{grid-template-columns:repeat(2,1fr)}
  .b-karte,.b-karte.gross,.b-karte.breit{grid-column:span 1} }
@media (max-width:560px){ .bento{grid-template-columns:1fr} }

/* ---------- Fähigkeit: Text und Mockup im Wechsel ---------- */
.faehig{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:70px; align-items:center}
.faehig + .faehig{margin-top:140px}
.faehig.getauscht .f-text{order:2}
.faehig h3{font-size:clamp(1.5rem,2.7vw,2.1rem); letter-spacing:-.032em}
.faehig .f-lead{margin-top:16px; color:var(--text-2); font-size:1.05rem}
.faehig ul{margin-top:26px; display:grid; gap:13px}
.faehig li{display:flex; gap:12px; font-size:.97rem; color:var(--text-2)}
.faehig li svg{width:16px; height:16px; color:var(--akzent-hell); flex:0 0 auto; margin-top:.3rem}
.faehig li b{color:var(--text); font-weight:600}
@media (max-width:940px){
  .faehig{grid-template-columns:1fr; gap:38px}
  .faehig.getauscht .f-text{order:0}
  .faehig + .faehig{margin-top:86px}
}

/* ---------- Projekte ---------- */
.filter{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:28px}
.filter button{font-family:inherit; font-size:.86rem; cursor:pointer; padding:.38rem .78rem;
  border-radius:999px; border:1px solid var(--linie); background:var(--flaeche); color:var(--text-2)}
.filter button:hover{border-color:var(--linie-stark); color:var(--text)}
.filter button[aria-pressed="true"]{background:var(--text); color:var(--grund); border-color:var(--text)}

.projekte{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (max-width:880px){ .projekte{grid-template-columns:1fr} }
.projekt{border:1px solid var(--linie); border-radius:var(--radius); background:var(--flaeche);
  padding:26px 25px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--glanz);
  transition:border-color .2s}
.projekt:hover{border-color:var(--linie-stark)}
.projekt.aus{display:none}
/* Statusmeldung zur Auswahl: wird beim Filtern angekuendigt (WCAG 4.1.3) */
.filterstand{margin:0 0 18px; font-size:.9rem; color:var(--text-3); min-height:1.3em}
.pkopf{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.pbranche{font-family:var(--mono); font-size:.71rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--akzent-hell); background:color-mix(in srgb, var(--akzent) 14%, transparent);
  padding:.24rem .55rem; border-radius:6px}
.pform{font-family:var(--mono); font-size:.71rem; color:var(--text-3)}
.projekt h3{font-size:1.12rem; line-height:1.3}
.pkurz{color:var(--text-2); font-size:.96rem}
.pmehr{border-top:1px solid var(--linie); padding-top:13px}
.pmehr summary{cursor:pointer; list-style:none; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-3);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  /* mindestens 24px hohe Zielflaeche (WCAG 2.5.8) */
  min-height:28px; padding:3px 0}
.pmehr summary::-webkit-details-marker{display:none}
.pmehr summary::after{content:"+"; font-size:1.05rem; line-height:1; transition:transform .2s}
.pmehr[open] summary{color:var(--akzent-hell)}
.pmehr[open] summary::after{transform:rotate(45deg)}
.pmehr > dl:first-of-type{margin-top:15px}
.pzeile{display:grid; grid-template-columns:82px 1fr; gap:13px; font-size:.93rem;
  align-items:start; margin:0 0 11px}
.pzeile dt{font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-3); padding-top:.2rem}
.pzeile dd{margin:0; color:var(--text-2)}
.ptech{display:flex; flex-wrap:wrap; gap:5px; margin-top:auto; padding-top:4px}
.ptech span{font-family:var(--mono); font-size:.72rem; color:var(--text-3);
  border:1px solid var(--linie); border-radius:5px; padding:.16rem .42rem}

/* ---------- Vorgehen ---------- */
.schritte{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--linie);
  border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden}
@media (max-width:1000px){ .schritte{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .schritte{grid-template-columns:1fr} }
.schritt{background:var(--flaeche); padding:26px 22px}
.schritt b{font-family:var(--mono); font-size:.72rem; color:var(--akzent-hell); letter-spacing:.07em}
.schritt h3{font-size:1.02rem; margin:11px 0 8px}
.schritt p{font-size:.92rem; color:var(--text-2)}

/* ---------- Technik ---------- */
.technik{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start}
@media (max-width:900px){ .technik{grid-template-columns:1fr; gap:40px} }
.stapel{border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden; background:var(--flaeche)}
.stapel-zeile{display:grid; grid-template-columns:118px 1fr; gap:16px; padding:14px 20px;
  border-bottom:1px solid var(--linie); font-size:.93rem}
.stapel-zeile:last-child{border-bottom:0}
.stapel-zeile dt{font-family:var(--mono); font-size:.74rem; color:var(--text-3);
  letter-spacing:.05em; text-transform:uppercase; padding-top:.15rem}
.stapel-zeile dd{margin:0; color:var(--text-2)}
.merksatz{border-left:2px solid var(--akzent); padding:2px 0 2px 20px; margin:26px 0 0}
.merksatz p{font-size:1.04rem; color:var(--text)}
.merksatz cite{display:block; margin-top:9px; font-style:normal; font-size:.84rem; color:var(--text-3)}
.pruefliste li{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--linie);
  font-size:.95rem; color:var(--text-2)}
.pruefliste li:last-child{border-bottom:0}
.pruefliste svg{width:16px; height:16px; color:var(--gruen); flex:0 0 auto; margin-top:.28rem}
.pruefliste b{color:var(--text); font-weight:600}

/* ---------- Fox-Familie ---------- */
.familie{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1px;
  background:var(--linie); border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden}
.fox{background:var(--flaeche); padding:19px; display:flex; gap:12px; align-items:flex-start; transition:background .18s}
.fox:hover{background:var(--flaeche-2)}
.fox img{width:32px; height:32px; border-radius:8px; flex:0 0 auto}
.fox b{display:block; font-size:.95rem; font-weight:600}
.fox span{display:block; font-size:.82rem; color:var(--text-3); line-height:1.45; margin-top:2px}
.fox .bald{font-family:var(--mono); font-size:.68rem; color:var(--text-3); border:1px solid var(--linie);
  border-radius:4px; padding:0 .3rem; margin-top:6px; display:inline-block}

/* ---------- Zusammenarbeit ---------- */
.modelle{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){ .modelle{grid-template-columns:1fr} }
.modell{border:1px solid var(--linie); border-radius:var(--radius); padding:28px 26px;
  background:var(--flaeche); box-shadow:var(--glanz)}
.modell.hervor{border-color:color-mix(in srgb, var(--akzent) 55%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--akzent) 9%, var(--flaeche)), var(--flaeche))}
.modell h3{font-size:1.08rem; margin-bottom:7px}
.modell .wofuer{font-size:.88rem; color:var(--text-3); margin-bottom:18px}
.modell ul{display:grid; gap:10px}
.modell li{display:flex; gap:10px; font-size:.93rem; color:var(--text-2)}
.modell li svg{width:15px; height:15px; color:var(--akzent-hell); flex:0 0 auto; margin-top:.3rem}
.modell .preis{margin-top:22px; padding-top:16px; border-top:1px solid var(--linie);
  font-size:.9rem; color:var(--text-3)}

/* ---------- Fragen ---------- */
.fragen{border-top:1px solid var(--linie)}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen summary{cursor:pointer; list-style:none; padding:21px 0; display:flex;
  justify-content:space-between; gap:24px; font-weight:550; font-size:1.02rem; align-items:center}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+"; font-family:var(--mono); font-size:1.25rem;
  color:var(--text-3); transition:transform .2s; line-height:1}
.fragen details[open] summary::after{transform:rotate(45deg); color:var(--akzent-hell)}
.fragen .antwort{padding:0 0 23px; color:var(--text-2); max-width:76ch; font-size:.99rem}
.fragen .antwort p + p{margin-top:12px}
.fragen a{color:var(--akzent-hell)}

/* ---------- Abschluss ---------- */
.abschluss{position:relative; overflow:hidden; border:1px solid var(--linie);
  border-radius:24px; background:var(--flaeche); padding:clamp(38px,6vw,78px); text-align:center}
.abschluss::before{content:""; position:absolute; left:50%; top:-60%; transform:translateX(-50%);
  width:120%; height:140%; background:radial-gradient(ellipse at center, rgba(110,98,245,.26), transparent 62%);
  filter:blur(50px)}
.abschluss > *{position:relative}
.abschluss h2{font-size:clamp(1.8rem,3.6vw,2.7rem); letter-spacing:-.036em}
.abschluss p{margin:18px auto 0; color:var(--text-2); font-size:1.06rem; max-width:56ch}
.abschluss .tasten{display:flex; gap:11px; justify-content:center; margin-top:32px; flex-wrap:wrap}

/* ---------- Fuß ---------- */
footer{border-top:1px solid var(--linie); padding:60px 0 40px; background:var(--grund-2)}
.fuss{display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:40px}
/* Startseite: eine Spalte mehr */
.fuss.breit{grid-template-columns:1.4fr repeat(4,1fr); gap:32px}
@media (max-width:1040px){ .fuss.breit{grid-template-columns:1.5fr repeat(3,1fr); gap:40px} }
@media (max-width:820px){ .fuss, .fuss.breit{grid-template-columns:1fr 1fr; gap:40px} }
@media (max-width:520px){ .fuss, .fuss.breit{grid-template-columns:1fr} }
.fuss h2, .fuss h3, .fuss h4{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:15px; font-weight:400}
.fuss a{display:block; padding:5px 0; font-size:.91rem; color:var(--text-2)}
.fuss a:hover{color:var(--text)}
.fuss p{font-size:.91rem; color:var(--text-2); max-width:38ch}
.fussende{margin-top:46px; padding-top:22px; border-top:1px solid var(--linie);
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; font-size:.85rem; color:var(--text-3)}
.fussende a{color:var(--text-3)} .fussende a:hover{color:var(--text)}
.fussende .rechts{margin-left:auto}

/* ---------- Sticky CTA (Telefone) ---------- */
.sticky-cta{display:none}
@media (max-width:760px){
  .sticky-cta{display:flex; gap:10px; align-items:center; position:fixed; left:14px; right:14px; bottom:14px;
    z-index:95; padding:11px 12px; border-radius:14px; border:1px solid var(--linie-stark);
    background:color-mix(in srgb, var(--flaeche) 94%, transparent); backdrop-filter:blur(16px);
    box-shadow:0 18px 44px -14px rgba(0,0,0,.8);
    transform:translateY(150%); transition:transform .3s cubic-bezier(.32,.72,0,1);
    padding-bottom:calc(11px + env(safe-area-inset-bottom))}
  .sticky-cta.an{transform:translateY(0)}
  .sticky-cta .sc-text{flex:1; min-width:0; font-size:.8rem; color:var(--text-3); line-height:1.3}
  .sticky-cta .sc-text b{display:block; color:var(--text); font-size:.92rem; font-weight:600}
  .sticky-cta .sc-zu{flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center;
    border:0; background:transparent; color:var(--text-3); cursor:pointer; border-radius:8px;
    margin:-4px -4px -4px 0}
  .sticky-cta .sc-zu:hover, .sticky-cta .sc-zu:focus-visible{color:var(--text); background:var(--flaeche-2)}
  body{padding-bottom:84px}
}

/* ---------- Bewegung ---------- */
.js .auf-an{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1)}
.js .auf-an.da{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .js .auf-an{opacity:1; transform:none}
}

/* ============================================================================
   Lesestopper und Gliederung
   Drei Kapitel ordnen die Seite; dazwischen Blöcke, an denen das Auge anhält.
   ========================================================================= */

/* Kapitel-Trenner: volle Breite, große Nummer, kurzer Satz */
.kapitel{padding:96px 0 0; position:relative}
.kapitel-in{border-top:1px solid var(--linie-stark); padding-top:34px;
  display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:baseline}
.kapitel .nr{font-family:var(--mono); font-size:clamp(2.6rem,6vw,4.6rem); line-height:.85;
  font-weight:300; letter-spacing:-.05em;
  background:linear-gradient(180deg, var(--text-2), transparent 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.kapitel h2{font-size:clamp(1.8rem,4.4vw,3.4rem); letter-spacing:-.042em; line-height:1.02}
.kapitel .sub{margin-top:16px; color:var(--text-2); font-size:1.12rem; max-width:58ch}
@media (max-width:700px){
  .kapitel{padding-top:66px}
  .kapitel-in{grid-template-columns:1fr; gap:14px}
  .kapitel .nr{font-size:2.4rem}
}
/* Nach einem Kapitel-Trenner braucht der erste Abschnitt weniger Luft */
.kapitel + section{padding-top:56px}
.kapitel + section > .mass > .kopf{margin-bottom:44px}

/* Zahlenband: drei große Werte, volle Breite */
.zahlenband{border-top:1px solid var(--linie); border-bottom:1px solid var(--linie);
  background:var(--grund-2)}
.zahlenband .mass{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--linie); padding:0}
.zahlenband .zelle{background:var(--grund-2); padding:44px 30px}
.zahlenband b{display:block; font-size:clamp(2.4rem,5vw,3.8rem); font-weight:600;
  letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums}
.zahlenband .was{display:block; margin-top:12px; font-size:1.02rem; color:var(--text)}
.zahlenband .dazu{display:block; margin-top:6px; font-size:.9rem; color:var(--text-3); line-height:1.5}
@media (max-width:820px){
  .zahlenband .mass{grid-template-columns:1fr}
  .zahlenband .zelle{padding:30px 22px}
}

/* Prinzip: ein Satz, groß gesetzt, als Halt im Scrollfluss */
.prinzip{padding:var(--takt) 0}
.prinzip-in{max-width:880px; margin:0 auto; text-align:center; position:relative}
.prinzip .zeichen{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-3)}
.prinzip blockquote{margin:26px 0 0; font-size:clamp(1.5rem,3.4vw,2.5rem); line-height:1.24;
  letter-spacing:-.03em; font-weight:500}
.prinzip blockquote em{font-style:normal; color:var(--akzent-hell)}
.prinzip cite{display:block; margin-top:22px; font-style:normal; font-size:.92rem; color:var(--text-3)}

/* Gegenüberstellung: der Zustand heute gegen den Zustand danach */
.gegen{display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch;
  border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden; background:var(--flaeche)}
.gegen > div{padding:34px 32px}
.gegen .heute{background:var(--grund-2)}
.gegen .pfeil{display:grid; place-items:center; padding:0 8px; border-left:1px solid var(--linie);
  border-right:1px solid var(--linie); background:var(--grund-2); color:var(--text-3)}
.gegen .pfeil svg{width:20px; height:20px}
.gegen .titel{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-3); margin-bottom:18px}
.gegen .danach .titel{color:var(--akzent-hell)}
.gegen ul{display:grid; gap:11px}
.gegen li{font-size:1rem; color:var(--text-2); display:flex; gap:11px; align-items:flex-start}
.gegen li svg{width:15px; height:15px; flex:0 0 auto; margin-top:.32rem}
.gegen .heute li svg{color:var(--text-3)}
.gegen .danach li svg{color:var(--gruen)}
.gegen .danach li{color:var(--text)}
@media (max-width:820px){
  .gegen{grid-template-columns:1fr}
  /* Nur das Symbol drehen, nicht den Kasten: gedreht würde der volle Breite hohe Kasten
     als senkrechter Balken quer durch den Text laufen. */
  .gegen .pfeil{border:0; border-top:1px solid var(--linie); border-bottom:1px solid var(--linie);
    padding:14px 0; transform:none}
  .gegen .pfeil svg{transform:rotate(90deg)}
  .gegen > div{padding:26px 22px}
}

/* Gruppentitel innerhalb eines Rasters */
.gruppe{grid-column:1 / -1; display:flex; align-items:center; gap:16px; margin:14px 0 -2px}
.gruppe:first-child{margin-top:0}
.gruppe h3{font-size:1.04rem; letter-spacing:-.02em; white-space:nowrap}
.gruppe .strich{flex:1; height:1px; background:var(--linie)}
.gruppe .anzahl{font-family:var(--mono); font-size:.74rem; color:var(--text-3)}

/* ============================================================================
   Unterseiten: Lesetypografie und Gerüst
   ========================================================================= */
.unter-kopf{padding:clamp(34px,6vw,76px) 0 clamp(32px,4.5vw,52px); position:relative;
  overflow:hidden}
.unter-kopf > .mass{position:relative; z-index:1}
.zurueck{display:flex; width:fit-content; align-items:center; gap:8px; font-size:.9rem;
  color:var(--text-2); margin-bottom:24px;
  /* mindestens 24px Zielflaeche (WCAG 2.5.8) */
  min-height:28px; padding:4px 8px 4px 0}
.zurueck:hover{color:var(--text)}
.zurueck svg{width:15px; height:15px}
.unter-kopf h1{font-size:clamp(2.1rem,4.6vw,3.5rem); letter-spacing:-.042em; max-width:22ch; line-height:1.04}
.unter-kopf .lead{margin-top:22px; font-size:1.14rem; color:var(--text-2); max-width:62ch}

/* Merkmalszeile unter dem Titel */
.merkmale{display:flex; flex-wrap:wrap; gap:0; margin-top:38px; border:1px solid var(--linie);
  border-radius:var(--radius); overflow:hidden; background:var(--flaeche)}
.merkmale > div{flex:1 1 180px; padding:18px 20px; border-right:1px solid var(--linie)}
.merkmale > div:last-child{border-right:0}
.merkmale dt{font-family:var(--mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-3)}
.merkmale dd{margin:6px 0 0; font-size:.98rem; font-weight:550}
@media (max-width:700px){ .merkmale > div{border-right:0; border-bottom:1px solid var(--linie)} }

/* Fließtext */
.artikel{max-width:760px}
.artikel h2{font-size:clamp(1.4rem,2.7vw,1.9rem); letter-spacing:-.03em; margin:58px 0 16px; scroll-margin-top:88px}
/* Wischbare Bildflaechen sind per Tabulator erreichbar (WCAG 2.1.1) */
.f-bild[tabindex], .buehne-in[tabindex]{border-radius:14px}
.f-bild[tabindex]:focus-visible, .buehne-in[tabindex]:focus-visible{
  outline:2px solid var(--akzent-hell); outline-offset:4px}
.artikel h2:first-child{margin-top:0}
.artikel h3{font-size:1.1rem; margin:34px 0 10px}
.artikel p{color:var(--text-2); font-size:1.04rem; margin-bottom:16px}
.artikel p strong, .artikel li strong{color:var(--text); font-weight:600}
.artikel ul{display:grid; gap:11px; margin:0 0 20px; list-style:none}
/* Kein flex/grid auf dem li: ein <strong> am Satzanfang wuerde sonst zu einem eigenen
   Element neben dem restlichen Satz und beide stuenden in zwei schmalen Spalten. */
.artikel ul li{position:relative; padding-left:18px; color:var(--text-2); font-size:1.02rem}
.artikel ul li::before{content:""; position:absolute; left:0; top:.62rem;
  width:5px; height:5px; border-radius:50%; background:var(--akzent)}
.artikel ol{counter-reset:a; display:grid; gap:20px; margin:0 0 24px}
.artikel ol li{counter-increment:a; display:grid; grid-template-columns:30px 1fr; gap:16px; list-style:none}
.artikel ol li::before{content:counter(a,decimal-leading-zero); font-family:var(--mono);
  font-size:.78rem; color:var(--akzent-hell); padding-top:.3rem; grid-column:1}
/* Ohne das landet der zweite Absatz in der 30px schmalen Zahlenspalte */
.artikel ol li > *{grid-column:2}
.artikel ol li h3{margin:0 0 6px; font-size:1.06rem}
.artikel ol li p{margin:0; font-size:1rem}
.artikel a{color:var(--akzent-hell); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, var(--akzent-hell) 40%, transparent)}
.artikel a:hover{text-decoration-color:var(--akzent-hell)}

/* Einschub: Lehre, Hinweis, Warnung */
.einschub{border:1px solid var(--linie); border-left:2px solid var(--akzent); border-radius:0 12px 12px 0;
  background:var(--flaeche); padding:22px 24px; margin:28px 0}
.einschub .titel{font-family:var(--mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--akzent-hell); margin-bottom:10px}
.einschub p{margin:0; color:var(--text); font-size:1.01rem}
.einschub p + p{margin-top:10px}
.einschub a{color:var(--akzent-hell); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--akzent-hell) 40%, transparent)}
.einschub a:hover{text-decoration-color:var(--akzent-hell)}
.einschub.warnung{border-left-color:var(--gelb)}
.einschub.warnung .titel{color:var(--gelb)}

/* Zweispaltig: Text und Randnotiz */
.mit-rand{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:60px; align-items:start}
/* Zusammensetzungen wie „Barrierefreiheitsstaerkungsgesetz" sprengen sonst die Spalte */
.artikel{overflow-wrap:break-word}
/* Trennstriche erst, wenn die Spalte wirklich schmal ist */
@media (max-width:640px){ .artikel{hyphens:auto} }
.mit-rand .rand{position:sticky; top:88px; display:grid; gap:18px}
.rand-block{border:1px solid var(--linie); border-radius:var(--radius); background:var(--flaeche); padding:20px}
.rand-block h3, .rand-block h4{font-family:var(--mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:12px; font-weight:400}
.rand-block ul{display:grid; gap:8px}
.rand-block li{font-size:.9rem; color:var(--text-2)}
.rand-block .wert{font-size:1.5rem; font-weight:600; letter-spacing:-.03em}
.rand-block .wert + span{display:block; font-size:.85rem; color:var(--text-3); margin-top:2px}
@media (max-width:980px){
  .mit-rand{grid-template-columns:minmax(0,1fr); gap:34px}
  .mit-rand .rand{position:static;
    grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
}

/* Tabelle im Fließtext */
.tabelle{width:100%; border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden;
  border-collapse:separate; border-spacing:0; margin:24px 0; font-size:.96rem}
.tabelle th, .tabelle td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--linie);
  vertical-align:top}
.tabelle th{font-family:var(--mono); font-size:.7rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-3); background:var(--flaeche-2); font-weight:400}
.tabelle tr:last-child td{border-bottom:0}
.tabelle td:first-child{color:var(--text); font-weight:550}
.tabelle td{color:var(--text-2)}
.tabelle-rolle{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* Prüfwerkzeug */
.werkzeug{border:1px solid var(--linie); border-radius:var(--radius); background:var(--flaeche);
  padding:clamp(24px,4vw,38px); box-shadow:var(--glanz)}
.frage{padding:22px 0; border:0; border-bottom:1px solid var(--linie); min-width:0}
.frage:first-child{padding-top:0}
.frage:last-of-type{border-bottom:0}
.frage legend, .frage .text{display:block; float:left; width:100%; font-size:1.06rem;
  font-weight:550; margin-bottom:6px; padding:0}
.frage legend + *{clear:both}
.frage .hilfe{font-size:.9rem; color:var(--text-3); margin-bottom:14px}
/* Echte Radiofelder, optisch als Knopfreihe. Das Feld selbst liegt unsichtbar
   hinter seiner Beschriftung, damit Tastatur und Vorleseprogramme greifen. */
.wahl{display:flex; flex-wrap:wrap; gap:9px}
.wahl input[type="radio"]{position:absolute; width:1px; height:1px; margin:0;
  opacity:0; pointer-events:none}
.wahl label{font-size:.95rem; cursor:pointer; padding:.6rem 1.1rem; min-height:44px;
  display:inline-flex; align-items:center; border-radius:9px;
  border:1px solid var(--linie-stark); background:var(--grund-2); color:var(--text-2)}
.wahl label:hover{border-color:var(--text-3); color:var(--text)}
.wahl input:checked + label{background:var(--akzent); border-color:transparent; color:#fff}
.wahl input:focus-visible + label{outline:2px solid var(--akzent-hell); outline-offset:3px}

.fortschritt{margin:22px 0 0; font-family:var(--mono); font-size:.76rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-3)}
.ergebnis{margin-top:28px; padding-top:26px; border-top:1px solid var(--linie-stark)}
.ergebnis[hidden]{display:none}
.ergebnis .marke-zeile{margin-bottom:14px}
.ergebnis h2, .ergebnis h3{font-size:clamp(1.3rem,2.6vw,1.7rem); letter-spacing:-.03em}
.ergebnis .was{margin-top:14px; color:var(--text-2); font-size:1.04rem}
.ergebnis ul{margin-top:18px; display:grid; gap:10px}
.ergebnis li{display:flex; gap:11px; font-size:.99rem; color:var(--text-2)}
.ergebnis li svg{width:16px; height:16px; flex:0 0 auto; margin-top:.28rem; color:var(--akzent-hell)}
.ergebnis .tasten{display:flex; gap:11px; flex-wrap:wrap; margin-top:26px}
.haftung{margin-top:22px; font-size:.86rem; color:var(--text-3); line-height:1.6}

/* ============================================================================
   Fuer wen wir nicht passen - bewusst ruhiger als der Rest der Seite
   ========================================================================= */
.nicht-raster{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));
  gap:16px}
.nicht-karte{border:1px solid var(--linie); border-radius:var(--radius); background:var(--flaeche);
  padding:24px; display:flex; flex-direction:column; gap:12px}
.nicht-karte .marker{display:flex; align-items:center; gap:10px}
.nicht-karte .marker svg{width:16px; height:16px; color:var(--rot); flex:0 0 auto}
.nicht-karte .marker span{font-family:var(--mono); font-size:.68rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-3)}
.nicht-karte h3{font-size:1.08rem; letter-spacing:-.02em}
.nicht-karte p{color:var(--text-2); font-size:.98rem; margin:0}
.nicht-karte .statt{margin-top:auto; padding-top:14px; border-top:1px solid var(--linie);
  display:flex; gap:10px; align-items:flex-start}
.nicht-karte .statt svg{width:15px; height:15px; color:var(--akzent-hell); flex:0 0 auto; margin-top:.22rem}
.nicht-karte .statt p{font-size:.93rem; color:var(--text-3)}
.nicht-karte .statt strong{color:var(--text-2); font-weight:600}
.nicht-schluss{margin-top:28px; padding:24px 26px; border:1px solid var(--linie-stark);
  border-radius:var(--radius); background:var(--grund-2);
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center}
.nicht-schluss .haken{width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--akzent) 16%, transparent); color:var(--akzent-hell)}
.nicht-schluss .haken svg{width:20px; height:20px}
.nicht-schluss p{margin:0; color:var(--text); font-size:1.04rem}
.nicht-schluss a{color:var(--akzent-hell); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--akzent-hell) 40%, transparent)}
.nicht-schluss a:hover{text-decoration-color:var(--akzent-hell)}
@media (max-width:620px){
  .nicht-schluss{grid-template-columns:1fr; gap:14px}
}

/* Verweis von einer Projektkarte auf die Langfassung */
.projekt .pseite{display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  font-size:.92rem; font-weight:550; color:var(--akzent-hell);
  min-height:28px; padding:2px 0}
.projekt .pseite svg{width:14px; height:14px; transition:transform .18s ease}
.projekt .pseite:hover svg{transform:translateX(3px)}

/* ============================================================================
   Rechtstexte, 404 und Danke im Seitendesign
   ========================================================================= */
.artikel address{font-style:normal; color:var(--text); font-size:1.04rem; line-height:1.8;
  border-left:2px solid var(--akzent); padding-left:18px; margin:0 0 18px}
.artikel address a{font-weight:550}
.artikel h3{color:var(--text)}
.artikel code{font-family:var(--mono); font-size:.9em; background:var(--flaeche-2);
  border:1px solid var(--linie); border-radius:5px; padding:.1em .42em}
.artikel > p:last-child{margin-bottom:0}
.artikel .stand{font-family:var(--mono); font-size:.76rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-3); margin-bottom:0}

/* Mittig gesetzte Seiten: 404 und Danke */
.mitte{min-height:clamp(520px,68vh,760px); display:grid; place-items:center;
  padding:clamp(44px,8vw,96px) 0 clamp(40px,6vw,76px); position:relative; overflow:hidden;
  text-align:center}
.mitte > .mass{position:relative; z-index:1; max-width:660px}
.mitte h1{font-size:clamp(1.9rem,4.4vw,3rem); letter-spacing:-.04em; margin:0 0 18px}
.mitte .lead{color:var(--text-2); font-size:1.1rem; margin:0 auto; max-width:54ch}
.mitte .tasten{justify-content:center; margin-top:32px}
.mitte .klein{display:block; margin-top:30px; font-size:.92rem; color:var(--text-3)}
.mitte .klein a{color:var(--akzent-hell); font-weight:550}
.grosszahl{font-family:var(--mono); font-size:clamp(4rem,13vw,8rem); line-height:1;
  letter-spacing:-.04em; font-weight:500; margin-bottom:6px;
  background:linear-gradient(180deg, var(--text-2), transparent 88%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hakenkreis{width:62px; height:62px; margin:0 auto 26px; border-radius:50%; display:grid;
  place-items:center; color:var(--gruen);
  background:color-mix(in srgb, var(--gruen) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--gruen) 34%, transparent)}
.hakenkreis svg{width:28px; height:28px}

/* Wegweiser auf der 404-Seite */
.wegweiser{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:12px; margin-top:38px; text-align:left}
.wegweiser a{border:1px solid var(--linie); border-radius:var(--radius); background:var(--flaeche);
  padding:16px 18px; display:block}
.wegweiser a:hover{border-color:var(--linie-stark); background:var(--flaeche-2)}
.wegweiser b{display:block; font-size:.99rem; margin-bottom:3px}
.wegweiser span{font-size:.88rem; color:var(--text-3)}

/* Drei Schritte auf der Danke-Seite */
/* Drei Schritte untereinander: bei 660px Spaltenbreite liest sich das besser
   als drei schmale Karten mit vier Wörtern je Zeile. */
.schrittreihe{display:grid; gap:1px; margin-top:40px; text-align:left;
  border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden;
  background:var(--linie)}
.schrittreihe > div{background:var(--flaeche); padding:20px 22px;
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:baseline}
.schrittreihe b{font-family:var(--mono); font-size:.78rem; color:var(--akzent-hell)}
.schrittreihe span{font-size:1rem; color:var(--text-2)}

/* Inhaltsverzeichnis in der Randspalte der Rechtstexte */
.rand-block.verzeichnis h2{font-family:var(--mono); font-size:.7rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-3); margin:0 0 12px; font-weight:400}
.verzeichnis ol{list-style:none; display:grid; gap:7px; margin:0; padding:0}
.verzeichnis li{counter-increment:v; font-size:.9rem; line-height:1.45}
.verzeichnis a{color:var(--text-2); display:block}
.verzeichnis a:hover{color:var(--text)}
@media (max-width:980px){
  .verzeichnis ol{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
}

/* ============================================================================
   Partnerseite: Whitelabel-Vorschau und Modellbeschreibung
   ========================================================================= */
.wl{display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:34px; align-items:start}
@media (max-width:860px){ .wl{grid-template-columns:minmax(0,1fr)} }
.wl label{display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-3); margin:0 0 9px}
.wl input[type="text"]{width:100%; font-family:inherit; font-size:1rem; color:var(--text);
  background:var(--grund-2); border:1px solid var(--linie); border-radius:10px; padding:.72rem .9rem}
.wl input[type="text"]:focus-visible{border-color:var(--akzent)}
.farben{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.farben .sw{width:30px; height:30px; border-radius:8px; cursor:pointer; border:1px solid var(--linie)}
.farben .sw[aria-pressed="true"]{outline:2px solid var(--text); outline-offset:2px}
.wl .hinweis{font-size:.92rem; color:var(--text-3); margin:0}

/* Vorschau: faerbt sich nach --wlc um */
.wlapp{--wlc:#7c3aed}
.wlapp .kopfband{display:flex; align-items:center; gap:11px; padding:13px 15px;
  border-bottom:1px solid var(--linie)}
.wlapp .wlogo{width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  background:var(--wlc); color:#fff; font-weight:700; font-size:.95rem; flex:0 0 auto}
.wlapp .wtitel{font-weight:600; letter-spacing:-.02em}
.wlapp .wknopf{margin-left:auto; background:var(--wlc); color:#fff; font-size:.8rem; font-weight:550;
  border-radius:7px; padding:.35rem .7rem}
.wlapp .balken{height:8px; border-radius:99px; background:var(--linie); margin:10px 0}
.wlapp .balken.b1{width:76%}
.wlapp .balken.b2{width:54%; background:var(--wlc); opacity:.75}
.wlapp .balken.b3{width:88%}
/* Die Leiste der Vorschau soll sich wie die uebrigen Fenster verhalten */
.wlapp .app-leiste{background:var(--flaeche-2)}

/* Modell ohne Zahlen: was die Provision bestimmt */
.modellzeile{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:16px}
.modellzeile > div{border:1px solid var(--linie); border-radius:var(--radius);
  background:var(--flaeche); padding:22px}
.modellzeile .nr{font-family:var(--mono); font-size:.72rem; color:var(--akzent-hell); display:block;
  margin-bottom:10px}
.modellzeile h3{font-size:1.04rem; margin-bottom:7px}
.modellzeile p{font-size:.96rem; color:var(--text-2); margin:0}