/* Grundlage der Unterseiten. Auf der Startseite übernimmt das die Hülle der Veröffentlichung */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;padding:0}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* Layout: „Die Schleife“ – heller Grund, eine lebende ∞-Schleife als Ökosystem im Hero; jede Station der Schleife ist ein Abschnitt. Bewusst nur helles Thema (Markenregel: Hintergrund weiß). */
:root{
  color-scheme: light;
  --papier:#ffffff;
  --grund:#fbf5f8;
  --flaeche:#f6e7ef;
  --tinte:#333333;
  --text:#333333;
  --leise:#6b6b6b;
  --linie:#eedbe5;
  --linie-2:#daa7c6;
  --marke:#b72f67;
  --marke-tief:#9c1943;
  --violett:#9c54a1;
  --magenta:#dd428c;
  --koralle:#f2696c;
  --gut:#1e7a57;
  --gut-bg:#e2f3eb;
  --warn:#8a5300;
  --warn-bg:#fcefd3;
  --schlecht:#b3261e;
  --schlecht-bg:#fce8e5;
  --verlauf:linear-gradient(105deg,#9c54a1 0%,#dd428c 52%,#f2696c 100%);
  --verlauf-tief:linear-gradient(120deg,#9c54a1 0%,#b72f67 100%);
  --verlauf-text:linear-gradient(105deg,#9c54a1 0%,#dd428c 55%,#d9485a 100%);
  --geraet:#221a25;
  --display:"Montserrat","Poppins","Avenir Next","Segoe UI",Arial,sans-serif;
  --body:"Open Sans","Lato","Segoe UI",Arial,sans-serif;
  --r-l:1.3rem; --r-m:1rem; --r-s:.75rem;
  --schatten:0 1px 2px rgba(58,16,56,.05),0 18px 40px -18px rgba(58,16,56,.22);
  --schatten-hoch:0 2px 4px rgba(58,16,56,.06),0 30px 60px -24px rgba(183,47,103,.32);
  --breite:76rem;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6.5rem}
body{background:var(--papier);color:var(--text);font-family:var(--body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--papier)}
h1,h2,h3,h4{font-family:var(--display);color:var(--tinte);margin:0;text-wrap:balance;letter-spacing:-.03em}
p{margin:0}
a{color:var(--marke)}
img{max-width:100%;display:block}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px;border-radius:.4rem}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--tinte);color:#fff;padding:.6rem 1rem;border-radius:999px;text-decoration:none;font-weight:600}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + .75rem)}

.wrap{max-width:var(--breite);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:720px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
.band{padding-block:clamp(4.5rem,9vw,8rem)}
.band.zart{background:var(--grund)}

.etikett{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--marke);display:inline-flex;align-items:center;gap:.6rem}
.etikett::before{content:"";width:1.6rem;height:2px;border-radius:2px;background:var(--verlauf)}
.h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:900;line-height:1.02;letter-spacing:-.04em}
.h3{font-size:clamp(1.25rem,2vw,1.55rem);font-weight:800;line-height:1.15}
.lead{font-size:clamp(1.08rem,1.5vw,1.25rem);color:var(--leise);max-width:40rem}
.verlauf-text{background:var(--verlauf-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.kopf-block{display:grid;gap:1.1rem;max-width:46rem;margin-bottom:clamp(2.5rem,5vw,4rem)}

/* Status-Pillen */
.pille{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px;white-space:nowrap}
.pille::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.pille.beta{color:var(--marke);background:#fbe4ee}
.pille.dev{color:var(--violett);background:#f2e7f8}
.pille.spaeter{color:var(--leise);background:#f1e9ee}
.pille.beta::before{animation:puls 2s var(--ease) infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(183,47,103,.45)}70%{box-shadow:0 0 0 .5rem rgba(183,47,103,0)}100%{box-shadow:0 0 0 0 rgba(183,47,103,0)}}

/* Buttons */
.knopf{--mx:0px;--my:0px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.01em;padding:1rem 1.6rem;border-radius:999px;border:0;cursor:pointer;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s;transform:translate(var(--mx),var(--my));min-height:3.25rem}
.knopf.haupt{color:#fff;background:linear-gradient(120deg,#9c54a1 0%,#b72f67 55%,#c42f6c 100%);background-size:180% 100%;box-shadow:0 10px 30px -10px rgba(221,66,140,.65)}
.knopf.haupt:hover{background-position:100% 0;box-shadow:0 16px 38px -10px rgba(221,66,140,.75)}
.knopf.leise{color:var(--tinte);background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--linie-2)}
.knopf.leise:hover{box-shadow:inset 0 0 0 1.5px var(--marke)}
.knopf svg{width:1.1rem;height:1.1rem;flex:none}
.knopf.haupt svg{transition:transform .35s var(--ease)}
.knopf.haupt:hover svg{transform:translateX(3px)}

/* Kopfzeile */
.kopf{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.kopf.gescrollt{border-color:var(--linie);box-shadow:0 8px 30px -22px rgba(58,16,56,.45)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.55rem}
.logo{display:block;line-height:0;flex:none}
.logo img{height:4.1rem;width:auto;transition:height .35s var(--ease)}
.kopf.gescrollt .logo img{height:3.4rem}
.nav{display:flex;align-items:center;gap:.25rem}
.nav a{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--tinte);text-decoration:none;padding:.55rem .8rem;border-radius:999px;transition:background .2s,color .2s}
.nav a:hover,.nav a[aria-current="true"]{background:var(--flaeche);color:var(--marke)}
.kopf-cta{padding:.75rem 1.2rem;font-size:.92rem;min-height:2.9rem;white-space:nowrap}
.nav a{white-space:nowrap}
@media (min-width:1061px) and (max-width:1280px){.nav{gap:.1rem}.nav a{padding:.5rem .55rem;font-size:.86rem}.kopf-cta{padding:.7rem 1rem;font-size:.86rem}.logo img{height:3.6rem}}
.menue-knopf{display:none;width:3rem;height:3rem;border-radius:999px;border:0;background:var(--flaeche);color:var(--tinte);cursor:pointer;align-items:center;justify-content:center}
.menue-knopf svg{width:1.4rem;height:1.4rem}
.fortschritt{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--verlauf);transform-origin:0 50%;transform:scaleX(var(--p,0))}
@media (max-width:1060px){
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:.15rem;background:var(--papier);border-bottom:1px solid var(--linie);padding:.75rem max(16px,env(safe-area-inset-right,0px)) 1.2rem max(16px,env(safe-area-inset-left,0px));box-shadow:0 30px 40px -30px rgba(58,16,56,.35)}
  .nav[data-offen="false"]{display:none}
  .nav a{padding:.85rem 1rem;font-size:1.02rem}
  .menue-knopf{display:inline-flex}
  .kopf-rechts .kopf-cta{display:none}
}
.kopf-rechts{display:flex;align-items:center;gap:.6rem}
.nav .nav-cta{display:none}
@media (max-width:1060px){.nav .nav-cta{display:block;margin-top:.5rem;text-align:center;color:#fff;background:linear-gradient(120deg,#9c54a1,#b72f67);font-weight:700}.nav .nav-cta:hover{color:#fff;background:linear-gradient(120deg,#9c54a1,#b72f67)}}
@media (max-width:520px){.logo img{height:3.3rem}.kopf.gescrollt .logo img{height:2.9rem}}

/* Hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(2.5rem,5vw,4.5rem) clamp(3.5rem,6vw,5.5rem)}
.hero::before{content:"";position:absolute;top:6%;right:-12%;width:62vw;height:62vw;max-width:58rem;max-height:58rem;background:radial-gradient(closest-side,rgba(221,66,140,.16),rgba(156,84,161,.08) 55%,transparent 72%);pointer-events:none}
.hero-raster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;position:relative}
.hero-text{display:grid;gap:1.6rem;min-width:0}
.hero h1{font-size:clamp(2.7rem,5.7vw,5.1rem);font-weight:900;line-height:.94;letter-spacing:-.05em}
.hero h1 .zeile{display:block}
.hero .lead{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--text);max-width:34rem}
.hero .lead strong{color:var(--tinte)}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:.8rem}
.vertrauen{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.9rem;color:var(--leise);padding:0;margin:0;list-style:none}
.vertrauen li{display:inline-flex;align-items:center;gap:.45rem}
.vertrauen svg{width:1rem;height:1rem;color:var(--gut)}
.buehne{position:relative;aspect-ratio:1/0.92;min-width:0;max-width:100%}
.buehne canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.buehne .fallback{position:absolute;inset:12%;display:flex;align-items:center;justify-content:center}
.buehne .fallback img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(183,47,103,.25))}
.station{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:.45rem;font-family:var(--display);font-weight:700;font-size:.8rem;color:var(--tinte);background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--linie);padding:.4rem .75rem .4rem .45rem;border-radius:999px;text-decoration:none;white-space:nowrap;box-shadow:0 8px 22px -12px rgba(58,16,56,.4);transition:opacity .3s,box-shadow .25s;will-change:transform}
.station i{width:.65rem;height:.65rem;border-radius:50%;background:var(--verlauf);box-shadow:0 0 0 3px rgba(221,66,140,.18)}
.station:hover{box-shadow:0 10px 26px -10px rgba(183,47,103,.55);color:var(--marke)}
.station[hidden]{display:none!important}
.buehne-hinweis{position:absolute;right:0;bottom:-.25rem;font-size:.78rem;color:var(--leise)}
@media (max-width:900px){
  .hero-raster{grid-template-columns:1fr}
  .buehne{aspect-ratio:1.3/1;margin-inline:-8px}
  .station{font-size:.72rem;padding:.32rem .6rem .32rem .38rem}
}

/* Schmerz-Leiste */
.leiste{border-block:1px solid var(--linie);background:var(--papier)}
.leiste .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.schmerz{padding:1.6rem 1.4rem;display:grid;gap:.4rem;border-left:1px solid var(--linie)}
.schmerz:first-child{border-left:0;padding-left:0}
.schmerz b{font-family:var(--display);font-weight:800;color:var(--tinte);font-size:1.05rem;line-height:1.25;letter-spacing:-.02em}
.schmerz span{color:var(--leise);font-size:.95rem}
@media (max-width:820px){.leiste .wrap{grid-template-columns:1fr}.schmerz{border-left:0;border-top:1px solid var(--linie);padding-inline:0}.schmerz:first-child{border-top:0}}

/* Werte-Laufband */
.laufband{overflow:hidden;padding-block:1.1rem;background:var(--verlauf-tief);color:#fff;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.laufband-spur{display:flex;gap:2.5rem;width:max-content;animation:lauf 38s linear infinite}
.laufband span{font-family:var(--display);font-weight:800;font-size:clamp(1.05rem,2vw,1.4rem);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;display:inline-flex;align-items:center;gap:2.5rem}
.laufband span::after{content:"∞";font-weight:400;letter-spacing:0;color:#ffd3df;font-size:1.3em}
@keyframes lauf{to{transform:translateX(-50%)}}

/* Vision */
.vision-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.vision-bild{position:relative;border-radius:var(--r-l);overflow:hidden;background:#fff;box-shadow:var(--schatten)}
.vision-bild img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 50%;transform:scale(1.02);transition:transform 1.2s var(--ease)}
.vision-bild:hover img{transform:scale(1.08)}
.vision-text{display:grid;gap:1.4rem;min-width:0}
.leitsatz{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.35;letter-spacing:-.02em;color:var(--tinte);max-width:36rem}
.kreislauf{position:relative;margin:clamp(3rem,6vw,5rem) auto clamp(1.5rem,3vw,2.5rem);max-width:40rem;display:grid}
.kreislauf svg{width:100%;height:auto;overflow:visible}
.kreis-pfad{fill:none;stroke:url(#kreisVerlauf);stroke-width:3;stroke-linecap:round}
.kreis-schatten{fill:none;stroke:var(--linie);stroke-width:14;stroke-linecap:round}
.kreis-punkt{offset-path:path("M300,90 C390,0 530,0 530,90 C530,180 390,180 300,90 C210,0 70,0 70,90 C70,180 210,180 300,90");offset-rotate:0deg;animation:kreisen 9s linear infinite}
@keyframes kreisen{from{offset-distance:0%}to{offset-distance:100%}}
.schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;counter-reset:s}
.schritt{display:grid;gap:.4rem;padding:1.4rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie)}
.schritt b{font-family:var(--display);font-weight:800;color:var(--tinte);font-size:1.15rem;letter-spacing:-.02em;display:flex;gap:.6rem;align-items:baseline}
.schritt b::before{counter-increment:s;content:counter(s);font-size:.78rem;font-weight:800;color:#fff;background:var(--verlauf);width:1.5rem;height:1.5rem;border-radius:50%;display:inline-grid;place-items:center;flex:none;transform:translateY(-.1rem)}
.schritt span{color:var(--leise);font-size:.95rem}
@media (max-width:900px){.vision-raster{grid-template-columns:1fr}.schritte{grid-template-columns:1fr}}

/* Produkte */
.flagschiff-alt{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(1.4rem,3.5vw,3rem);border-radius:calc(var(--r-l) + .4rem);background:var(--papier);box-shadow:var(--schatten-hoch);overflow:hidden;isolation:isolate}
.flagschiff::before{content:"";position:absolute;inset:0;padding:1.5px;border-radius:inherit;background:var(--verlauf);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.85}
.flag-text{display:grid;gap:1.2rem;min-width:0}
.flag-text h3{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:900;line-height:1;letter-spacing:-.045em}
.merkmale{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.merkmale li{display:grid;grid-template-columns:2.2rem 1fr;gap:.8rem;align-items:start}
.merkmale .ico{width:2.2rem;height:2.2rem;border-radius:.7rem;background:var(--flaeche);display:grid;place-items:center;color:var(--marke)}
.merkmale .ico svg{width:1.15rem;height:1.15rem}
.merkmale b{font-family:var(--display);font-weight:700;color:var(--tinte);display:block;line-height:1.3}
.merkmale span{color:var(--leise);font-size:.95rem;line-height:1.5}
.preis-hinweis{font-size:.9rem;color:var(--leise);padding:.9rem 1rem;border-radius:var(--r-s);background:var(--grund);border:1px dashed var(--linie-2)}
.preis-hinweis b{color:var(--tinte)}

.produkte-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.foto.breit img{aspect-ratio:16/10}
@media (max-width:900px){.produkte-kopf{grid-template-columns:1fr}}
.produkt-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;margin-top:1.4rem}
.produkt{--x:50%;--y:50%;position:relative;display:grid;gap:1rem;align-content:start;padding:clamp(1.4rem,3vw,2.2rem);border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.produkt::before{content:"";position:absolute;inset:0;background:radial-gradient(28rem circle at var(--x) var(--y),rgba(221,66,140,.09),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
.produkt:hover{transform:translateY(-4px);box-shadow:var(--schatten)}
.produkt:hover::before{opacity:1}
.produkt-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.produkt h3{font-size:clamp(1.35rem,2.2vw,1.75rem);font-weight:900;letter-spacing:-.04em;line-height:1.05}
.produkt p{color:var(--leise)}
.produkt ul{margin:0;padding-left:1.1rem;display:grid;gap:.35rem;color:var(--text);font-size:.95rem}
.produkt ul li::marker{color:var(--magenta)}
.produkt .mehr{font-family:var(--display);font-weight:700;font-size:.92rem;text-decoration:none;color:var(--marke);display:inline-flex;gap:.4rem;align-items:center}
.produkt .mehr:hover{text-decoration:underline}
.mini-tag{font-size:.88rem;color:var(--leise)}
.trans-verbund{display:grid;gap:.35rem;padding:1rem 1.1rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie);border-left:4px solid var(--magenta)}
.trans-verbund b{font-family:var(--display);font-weight:800;color:var(--tinte)}
.trans-verbund>span{font-size:.95rem;color:var(--text)}
.mini-tag b{color:var(--tinte);font-family:var(--display);font-weight:800}
.tagesbalken{display:grid;gap:.5rem;padding:1rem;border-radius:var(--r-m);background:var(--grund);border:1px solid var(--linie)}
.tagesbalken .nr1{font-family:var(--display);font-weight:800;color:var(--tinte);font-size:1rem;display:flex;gap:.5rem;align-items:center}
.tagesbalken .nr1::before{content:"";width:.9rem;height:.9rem;border-radius:.3rem;border:2px solid var(--marke);flex:none}
.zahlen{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.82rem;color:var(--leise)}
.zahlen b{font-family:var(--display);font-weight:800;color:var(--tinte);font-size:1.05rem;font-variant-numeric:tabular-nums;margin-right:.25rem}
.shop-zeile{margin-top:1.4rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.1rem 1.3rem;border-radius:var(--r-m);background:var(--grund);border:1px solid var(--linie)}
.shop-zeile p{color:var(--leise);flex:1;min-width:14rem}
.shop-zeile b{color:var(--tinte);font-family:var(--display)}
@media (max-width:820px){.produkt-paar{grid-template-columns:1fr}}

/* App */
.app-raster{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,6vw,5rem);align-items:center}
.app-text{display:grid;gap:1.4rem;min-width:0}
.funktionen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.funktion{display:grid;gap:.35rem;padding:1.15rem 1.2rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie)}
.funktion b{font-family:var(--display);font-weight:800;color:var(--tinte);letter-spacing:-.02em;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.funktion span{color:var(--leise);font-size:.93rem;line-height:1.55}
.funktion .pille{font-size:.62rem;padding:.2rem .5rem}
.telefon{position:relative;width:min(20rem,82vw);aspect-ratio:9/18.5;border-radius:2.6rem;padding:.65rem;background:var(--geraet);box-shadow:0 40px 70px -30px rgba(34,26,37,.65),inset 0 0 0 1.5px rgba(255,255,255,.08);transform:rotate(-2.5deg);transition:transform .8s var(--ease)}
.telefon:hover{transform:rotate(0) translateY(-6px)}
.telefon::before{content:"";position:absolute;top:1.05rem;left:50%;width:5.2rem;height:1.25rem;border-radius:999px;background:#120d14;transform:translateX(-50%);z-index:3}
.screen{position:relative;height:100%;border-radius:2rem;overflow:hidden;background:var(--grund);display:flex;flex-direction:column}
.screen-kopf{padding:2.4rem 1rem .7rem;background:var(--papier);border-bottom:1px solid var(--linie);display:flex;align-items:center;justify-content:space-between}
.screen-kopf img{height:2.1rem;width:auto}
.screen-kopf span{font-family:var(--display);font-weight:800;font-size:.85rem;color:var(--tinte)}
.feed{flex:1;overflow:hidden;position:relative}
.feed-spur{display:grid;gap:.6rem;padding:.7rem;animation:feed 22s var(--ease) infinite alternate}
@keyframes feed{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(-38%)}}
.post{background:var(--papier);border-radius:1rem;padding:.75rem;border:1px solid var(--linie);display:grid;gap:.45rem}
.post .wer{display:flex;align-items:center;gap:.45rem;font-size:.66rem;color:var(--leise)}
.post .wer i{width:1.4rem;height:1.4rem;border-radius:50%;background:var(--verlauf);display:grid;place-items:center;color:#fff;font-style:normal;font-family:var(--display);font-weight:800;font-size:.55rem}
.post b{font-family:var(--display);font-weight:800;color:var(--tinte);font-size:.82rem;line-height:1.25;letter-spacing:-.01em}
.post .bild{height:4.4rem;border-radius:.6rem;background-size:cover;background-position:center}
.post .tags{display:flex;gap:.3rem;flex-wrap:wrap}
.post .tags span{font-size:.56rem;font-weight:700;color:var(--marke);background:#fbe4ee;padding:.15rem .45rem;border-radius:999px}
.post .aktionen{display:flex;gap:.35rem}
.post .aktionen button{flex:1;font-family:var(--display);font-weight:700;font-size:.6rem;border:1px solid var(--linie);background:var(--grund);color:var(--tinte);padding:.4rem .3rem;border-radius:999px;cursor:pointer}
.post .aktionen button.an{background:var(--verlauf);color:#fff;border-color:transparent}
.ki-blase{font-size:.68rem;line-height:1.45;color:var(--tinte);background:#f2e7f8;border-radius:.8rem .8rem .8rem .2rem;padding:.6rem .7rem}
.ki-blase b{font-size:.62rem;color:var(--violett);display:block;margin-bottom:.15rem;letter-spacing:.06em;text-transform:uppercase}
.tab-leiste{display:flex;justify-content:space-around;padding:.55rem .4rem 1rem;background:var(--papier);border-top:1px solid var(--linie)}
.tab-leiste span{width:1.5rem;height:.3rem;border-radius:999px;background:var(--linie)}
.tab-leiste span:first-child{background:var(--verlauf)}
.telefon-notiz{text-align:center;font-size:.8rem;color:var(--leise);margin-top:1rem}
@media (max-width:900px){.app-raster{grid-template-columns:1fr}.telefon-wrap{justify-self:center}}
@media (max-width:560px){.funktionen{grid-template-columns:1fr}}

/* Community */
.community-raster{display:grid;grid-template-columns:minmax(0,1fr);max-width:58rem;gap:clamp(2rem,5vw,4rem);align-items:start}
.foto{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--schatten)}
.foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform 1.2s var(--ease)}
.foto:hover img{transform:scale(1.04)}
.foto figcaption{position:absolute;left:0;bottom:0;right:0;padding:2.5rem 1rem .9rem;font-size:.85rem;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(20,12,24,.62));text-shadow:0 1px 6px rgba(0,0,0,.35)}
.gegenueber{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.liste-box{padding:1.3rem;border-radius:var(--r-m);display:grid;gap:.7rem;align-content:start}
.liste-box h3{font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.liste-box ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.95rem}
.liste-box li{display:grid;grid-template-columns:1.2rem 1fr;gap:.5rem;line-height:1.45}
.liste-box svg{width:1.1rem;height:1.1rem;margin-top:.15rem}
.liste-box.ja{background:var(--papier);border:1.5px solid var(--linie-2)}
.liste-box.ja svg{color:var(--gut)}
.liste-box.nein{background:var(--grund);border:1px solid var(--linie)}
.liste-box.nein li{color:var(--leise);text-decoration:line-through;text-decoration-color:rgba(183,47,103,.45);text-decoration-thickness:1.5px}
.liste-box.nein svg{color:var(--marke)}
.wege{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:clamp(2.5rem,5vw,3.5rem);position:relative}
.wege::before{content:"";position:absolute;left:1.2rem;right:1.2rem;top:1.2rem;height:2px;background:linear-gradient(90deg,var(--violett),var(--magenta),var(--koralle),var(--linie-2));opacity:.55}
.weg{position:relative;display:grid;gap:.45rem;padding-top:3.2rem}
.weg::before{content:"";position:absolute;top:.55rem;left:.55rem;width:1.3rem;height:1.3rem;border-radius:50%;background:#fff;border:3px solid var(--magenta);box-shadow:0 0 0 5px var(--papier)}
.weg:last-child::before{border-color:var(--linie-2)}
.weg b{font-family:var(--display);font-weight:800;color:var(--tinte);font-size:1.1rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.weg span{color:var(--leise);font-size:.93rem}
.kanaele{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem;align-items:center}
.kanal{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:700;font-size:.9rem;padding:.6rem 1rem;border-radius:999px;background:var(--papier);border:1px solid var(--linie);color:var(--tinte);text-decoration:none;min-height:2.75rem}
.kanal:hover{border-color:var(--marke);color:var(--marke)}
.kanal svg{width:1.05rem;height:1.05rem}
@media (max-width:900px){.community-raster{grid-template-columns:1fr}.wege{grid-template-columns:repeat(2,minmax(0,1fr))}.wege::before{display:none}}
@media (max-width:520px){.gegenueber{grid-template-columns:1fr}.wege{grid-template-columns:1fr}}

/* Trainings */
.formate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.format{position:relative;display:grid;gap:.8rem;align-content:start;padding:1.6rem;border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.format:hover{transform:translateY(-4px);box-shadow:var(--schatten)}
.format .preis{font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gut)}
.format .preis.offen{color:var(--leise)}
.format h3{font-size:1.3rem;font-weight:900;letter-spacing:-.03em}
.format p{color:var(--leise);font-size:.95rem}
.themen-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:clamp(2.5rem,5vw,4rem)}
.themen{list-style:none;margin:0;padding:0;display:grid;gap:.2rem;counter-reset:t}
.themen li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--linie)}
.themen li::before{counter-increment:t;content:"Modul " counter(t);font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--marke);white-space:nowrap}
.themen b{font-family:var(--display);font-weight:800;color:var(--tinte);letter-spacing:-.02em;font-size:1.08rem;display:block}
.themen span{color:var(--leise);font-size:.93rem}
@media (max-width:900px){.formate{grid-template-columns:1fr}.themen-raster{grid-template-columns:1fr}}

/* Transformation */
.trans{position:relative;overflow:hidden}
.trans-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.trans-text{display:grid;gap:1.3rem;min-width:0}
.saeulen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.saeule{padding:1rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie);display:grid;gap:.3rem}
.saeule b{font-family:var(--display);font-weight:800;color:var(--tinte)}
.saeule span{font-size:.86rem;color:var(--leise);line-height:1.45}
@media (max-width:900px){.trans-raster{grid-template-columns:1fr}.saeulen{grid-template-columns:1fr}}

/* Arbeitsspeicher: Gehirn und Speicher-Karte */
.hirn-block{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1.2rem;margin-top:clamp(2rem,4vw,3rem)}
.hirn-buehne{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-l);padding:1.3rem 1.3rem 1.1rem;display:grid;gap:.6rem;color:#f6e6ef;background:radial-gradient(70% 60% at 30% 35%,rgba(221,66,140,.30),transparent 70%),radial-gradient(60% 60% at 80% 80%,rgba(156,84,161,.35),transparent 70%),linear-gradient(160deg,#0b0a0c,#0e0c0f 60%,#070608);box-shadow:0 30px 60px -30px rgba(43,17,48,.55)}
.hirn-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.hirn-kopf b{font-family:var(--display);font-weight:800;font-size:1.05rem;color:#fff}
.hirn-kopf span{order:2;font-size:.75rem;color:#e0bfd3}
#hirn{width:100%;aspect-ratio:4/3;display:block}
.hirn-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.hirn-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .75rem;border-radius:99px;font-size:.82rem;font-weight:600;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:background .4s,border-color .4s,transform .4s}
.hirn-chip i{width:.55rem;height:.55rem;border-radius:50%}
.hirn-chip b{font-family:var(--display);font-weight:800;color:#fff}
.hirn-chip.an{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);transform:translateY(-1px)}
.ram-karte{display:grid;gap:1rem;align-content:start;padding:1.5rem;border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie)}
.ram-zahl{display:flex;align-items:baseline;gap:.6rem}
.ram-zahl b{font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,5vw,3.2rem);letter-spacing:-.04em;line-height:1;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.ram-zahl span{color:var(--leise);font-weight:600}
.ram-riegel{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;padding:6px;border-radius:8px;background:#f8eef3;border:1px solid var(--linie)}
.ram-riegel i{height:22px;border-radius:3px;background:linear-gradient(180deg,#e6d3de,#d9c2cf)}
.ram-riegel i:not(.voll){background:var(--verlauf);background-size:2000% 100%}
.ram-riegel i:nth-child(n){background-position:calc(var(--n,0) * 5%) 0}
.ram-liste{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.ram-liste li{display:grid;gap:.15rem;padding-top:.8rem;border-top:1px solid var(--linie)}
.ram-liste b{font-family:var(--display);font-weight:800;color:var(--tinte);font-size:.98rem}
.ram-liste span{font-size:.86rem;color:var(--leise);line-height:1.45}
.ram-liste em{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--marke)}
@media (max-width:900px){.hirn-block{grid-template-columns:1fr}}

/* Fahrplan-Zeitleiste */
.plan-spur{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;height:22px;margin-bottom:.6rem}
.spur-linie{position:absolute;left:1.5rem;right:1.5rem;top:50%;height:3px;transform:translateY(-50%);border-radius:3px;background:var(--linie)}
.spur-linie i{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;background:var(--verlauf);transition:width 1.6s cubic-bezier(.2,.7,.2,1) .2s}
.plan-spur.sichtbar .spur-linie i,.plan-spur.ist-da .spur-linie i{width:22%}
.spur-punkt{position:relative;justify-self:start;margin-left:1.5rem;width:14px;height:14px;margin-top:4px;border-radius:50%;background:var(--papier);border:3px solid var(--linie-2)}
.spur-punkt.an{border-color:transparent;background:var(--verlauf);box-shadow:0 0 0 6px rgba(221,66,140,.16)}
.spur-punkt.an::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(221,66,140,.5);animation:spurPuls 2.2s ease-out infinite}
@keyframes spurPuls{from{transform:scale(.6);opacity:1}to{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.spur-punkt.an::after{animation:none}.spur-linie i{transition:none;width:22%}}
@media (max-width:900px){.plan-spur{display:none}}

/* Fahrplan */
.plan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;position:relative}
.phase{display:grid;gap:.9rem;align-content:start;padding:1.5rem;border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie)}
.phase.jetzt{border:1.5px solid transparent;background:linear-gradient(var(--papier),var(--papier)) padding-box,var(--verlauf) border-box;box-shadow:var(--schatten)}
.phase h3{font-size:1.25rem;font-weight:900;letter-spacing:-.03em;display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.phase ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.phase li{display:grid;grid-template-columns:1rem 1fr;gap:.6rem;font-size:.95rem;line-height:1.45}
.phase li::before{content:"";width:.6rem;height:.6rem;border-radius:50%;margin-top:.45rem;background:var(--linie-2)}
.phase.jetzt li::before{background:var(--verlauf)}
@media (max-width:900px){.plan{grid-template-columns:1fr}}

/* Team */
.team{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-top:clamp(3rem,6vw,5rem)}
.team-foto{position:relative;margin:0;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--schatten);max-width:26rem}
.team-foto img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.team-foto figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:2.5rem 1.1rem 1rem;background:linear-gradient(transparent,rgba(20,12,24,.6))}
.team-foto figcaption span{font-family:var(--display);font-weight:800;color:#fff;font-size:.95rem;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:.3rem .7rem;border-radius:999px}
.team-text{display:grid;gap:1rem;min-width:0}
.person{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;padding:1rem 1.1rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie)}
.avatar{width:3.8rem;height:3.8rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--papier),0 0 0 5px #e7b9d0}
.person b{font-family:var(--display);font-weight:800;color:var(--tinte);display:block}
.person span{font-size:.92rem;color:var(--leise);display:block}
.person .rolle{display:inline-block;margin:.15rem 0 .35rem;font-style:normal;font-family:var(--display);font-weight:800;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--marke)}
@media (max-width:760px){.team{grid-template-columns:1fr}.team-foto{max-width:none}.team-foto img{aspect-ratio:4/3;object-position:50% 40%}}

/* FAQ */
.faq-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.faq{display:grid;gap:.6rem}
.faq details{border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie);transition:border-color .25s,box-shadow .25s}
.faq details[open]{border-color:var(--linie-2);box-shadow:var(--schatten)}
.faq summary{list-style:none;cursor:pointer;padding:1.1rem 1.2rem;font-family:var(--display);font-weight:700;color:var(--tinte);display:flex;justify-content:space-between;gap:1rem;align-items:center;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:.7rem;height:.7rem;border-right:2px solid var(--marke);border-bottom:2px solid var(--marke);transform:rotate(45deg) translateY(-25%);transition:transform .3s var(--ease);flex:none}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 1.2rem 1.2rem;color:var(--leise)}
@media (max-width:900px){.faq-raster{grid-template-columns:1fr}}

/* Mitmachen */
.mitmachen{position:relative;overflow:hidden;background:var(--grund)}
.mitmachen::before{content:"";position:absolute;left:-10%;bottom:-40%;width:60rem;height:60rem;max-width:120vw;background:radial-gradient(closest-side,rgba(156,84,161,.14),rgba(242,105,108,.08) 55%,transparent 72%);pointer-events:none}
.mit-raster{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.vorteile{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.vorteile li{display:grid;grid-template-columns:2rem 1fr;gap:.8rem;align-items:start}
.vorteile .ico{width:2rem;height:2rem;border-radius:50%;background:var(--verlauf);display:grid;place-items:center;color:#fff}
.vorteile .ico svg{width:1rem;height:1rem}
.vorteile b{font-family:var(--display);font-weight:800;color:var(--tinte);display:block}
.vorteile span{font-size:.94rem;color:var(--leise)}
.formular-karte{position:relative;padding:clamp(1.3rem,3vw,2.2rem);border-radius:calc(var(--r-l) + .3rem);background:var(--papier);box-shadow:var(--schatten-hoch)}
form{display:grid;gap:1.1rem}
.feld{display:grid;gap:.4rem}
.feld label,.feld legend{font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--tinte)}
.feld label small,.feld legend small{font-family:var(--body);font-weight:400;color:var(--leise)}
.feld input[type=text],.feld input[type=email],.feld textarea{font:inherit;font-size:1rem;color:var(--tinte);background:var(--grund);border:1.5px solid var(--linie);border-radius:.8rem;padding:.85rem 1rem;width:100%;transition:border-color .2s,background .2s,box-shadow .2s;min-height:3.1rem}
.feld textarea{min-height:5.5rem;resize:vertical}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--magenta);background:#fff;box-shadow:0 0 0 4px rgba(221,66,140,.14)}
.feld[data-fehler] input,.feld[data-fehler] textarea{border-color:var(--schlecht);background:var(--schlecht-bg)}
.fehlertext{font-size:.85rem;color:var(--schlecht);font-weight:600;min-height:0}
.fehlertext:empty{display:none}
fieldset.feld{border:0;padding:0;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--display);font-weight:700;font-size:.85rem;padding:.6rem .9rem;border-radius:999px;border:1.5px solid var(--linie);background:var(--papier);color:var(--leise);cursor:pointer;transition:all .2s;min-height:2.7rem}
.chip span::before{content:"";width:.95rem;height:.95rem;border-radius:.3rem;border:1.5px solid var(--linie-2);transition:all .2s;flex:none}
.chip input:checked + span{border-color:var(--marke);color:var(--marke);background:#fdf0f5}
.chip input:checked + span::before{background:var(--verlauf) ;border-color:transparent;box-shadow:inset 0 0 0 2px #fff}
.chip input:focus-visible + span{outline:3px solid var(--magenta);outline-offset:2px}
.einwilligung{display:grid;grid-template-columns:1.3rem 1fr;gap:.7rem;align-items:start;font-size:.88rem;color:var(--leise);line-height:1.5}
.einwilligung input{width:1.25rem;height:1.25rem;margin:.15rem 0 0;accent-color:var(--marke)}
.einwilligung[data-fehler]{color:var(--schlecht)}
.form-fuss{display:grid;gap:.7rem}
.form-fuss .knopf{width:100%}
.form-fuss small{font-size:.82rem;color:var(--leise);text-align:center}
.knopf[aria-busy="true"]{pointer-events:none;opacity:.85}
.knopf .lader{width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:dreh .8s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
.status{border-radius:var(--r-m);padding:1rem 1.1rem;font-size:.95rem;display:grid;gap:.5rem}
.status.fehler{background:var(--schlecht-bg);color:#6b1510;border:1px solid #f3c4bd}
.status b{font-family:var(--display)}
.kopierzeile{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.kopierzeile code{font-family:var(--body);font-weight:700;user-select:all;background:rgba(255,255,255,.7);padding:.25rem .55rem;border-radius:.4rem;color:var(--tinte)}
.kopierzeile button{font-family:var(--display);font-weight:700;font-size:.8rem;border:1px solid currentColor;background:transparent;color:inherit;border-radius:999px;padding:.35rem .75rem;cursor:pointer;min-height:2.2rem}
.erfolg{display:grid;gap:1.1rem;text-align:left}
.erfolg .haken{width:3.6rem;height:3.6rem;border-radius:50%;background:var(--verlauf);display:grid;place-items:center;color:#fff;box-shadow:0 14px 30px -12px rgba(221,66,140,.7)}
.erfolg .haken svg{width:1.7rem;height:1.7rem;stroke-dasharray:30;stroke-dashoffset:30;animation:haken .7s .2s var(--ease) forwards}
@keyframes haken{to{stroke-dashoffset:0}}
.erfolg h3{font-size:1.7rem;font-weight:900;letter-spacing:-.04em}
.erfolg p{color:var(--leise)}
@media (max-width:900px){.mit-raster{grid-template-columns:1fr}}

/* Fuß */
.fuss{background:var(--papier);border-top:1px solid var(--linie);padding-block:3rem 2rem}
.fuss-raster{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:2rem}
.fuss-raster img{height:5rem;width:auto}
.fuss h4{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;margin-bottom:.8rem}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.95rem}
.fuss a{color:var(--text);text-decoration:none}
.fuss a:hover{color:var(--marke);text-decoration:underline}
.fuss p{color:var(--leise);font-size:.93rem;max-width:22rem}
.mail{user-select:all;font-weight:600;color:var(--tinte)}
.rechtliches{margin-top:2.5rem;display:grid;gap:.6rem}
.rechtliches details{border:1px solid var(--linie);border-radius:var(--r-m);background:var(--grund)}
.rechtliches summary{cursor:pointer;padding:.9rem 1.1rem;font-family:var(--display);font-weight:700;color:var(--tinte)}
.rechtliches .inhalt-r{padding:0 1.1rem 1.2rem;display:grid;gap:.7rem;font-size:.92rem;color:var(--text);max-width:48rem}
.rechtliches h5{font-family:var(--display);font-size:.95rem;margin:.4rem 0 0;color:var(--tinte)}
.platzhalter{background:var(--warn-bg);color:var(--warn);font-weight:700;padding:0 .3rem;border-radius:.25rem}
.entwurf-hinweis{font-size:.85rem;color:var(--warn);background:var(--warn-bg);border-radius:.6rem;padding:.6rem .8rem}
.fuss-unten{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--linie);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--leise)}
@media (max-width:900px){.fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.fuss-raster{grid-template-columns:1fr}}

/* Auftritt beim Scrollen: nur Bewegung, Inhalt bleibt immer sichtbar */
.js .auf{transform:translateY(26px);transition:transform .9s var(--ease)}
.js .auf.da{transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .auf{transform:none}
  .laufband-spur{animation:none}
  .kreis-punkt{offset-distance:12%}
}

/* ===== Fassung 3: Community zuerst, Trainings, Deskstella im Detail, Transformations-Cockpit ===== */

/* Trainings als Videobibliothek */
.video-raster{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.4rem;align-items:stretch}
.video{position:relative;display:grid;gap:.9rem;align-content:start;text-decoration:none;color:inherit}
.thumb{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/9;background:var(--flaeche);box-shadow:var(--schatten);isolation:isolate}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(22,10,24,.55));z-index:1}
.video:hover .thumb img{transform:scale(1.05)}
.play{position:absolute;left:50%;top:50%;z-index:2;width:4.4rem;height:4.4rem;border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--marke);box-shadow:0 14px 40px -10px rgba(0,0,0,.45);transition:transform .4s var(--ease)}
.play svg{width:1.5rem;height:1.5rem;margin-left:.2rem}
.play::before{content:"";position:absolute;inset:-.55rem;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:wellen 2.4s var(--ease) infinite}
@keyframes wellen{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.35);opacity:0}}
.video:hover .play{transform:translate(-50%,-50%) scale(1.06)}
.thumb .marke-oben{position:absolute;left:1rem;top:1rem;z-index:2;display:flex;gap:.4rem;flex-wrap:wrap}
.chip-dunkel{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.04em;color:#fff;background:rgba(20,12,24,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:.32rem .65rem;border-radius:999px}
.chip-hell{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.04em;color:var(--marke);background:rgba(255,255,255,.92);padding:.32rem .65rem;border-radius:999px}
.thumb .unten{position:absolute;left:1.1rem;right:1.1rem;bottom:1rem;z-index:2;color:#fff;display:grid;gap:.2rem}
.thumb .unten b{font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,2vw,1.55rem);letter-spacing:-.03em;line-height:1.15;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.thumb .unten small{font-size:.85rem;opacity:.9}
.video-text{display:grid;gap:.35rem}
.video-text b{font-family:var(--display);font-weight:800;color:var(--tinte);font-size:1.05rem;letter-spacing:-.02em;line-height:1.25}
.video-text span{color:var(--leise);font-size:.93rem}
.folgen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.folgen .thumb{border-radius:var(--r-m)}
.folgen .play{width:3rem;height:3rem}
.folgen .play svg{width:1.1rem;height:1.1rem}
.folgen .play::before{display:none}
.folge-nr{font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--marke)}
.formate-zeile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:clamp(2rem,4vw,3rem)}
.format-klein{display:grid;grid-template-columns:2.6rem 1fr;gap:.9rem;align-items:start;padding:1.15rem 1.2rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie)}
.format-klein .ico{width:2.6rem;height:2.6rem;border-radius:.8rem;background:var(--flaeche);display:grid;place-items:center;color:var(--marke)}
.format-klein .ico svg{width:1.25rem;height:1.25rem}
.format-klein b{font-family:var(--display);font-weight:800;color:var(--tinte);display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;letter-spacing:-.02em}
.format-klein span{color:var(--leise);font-size:.92rem;line-height:1.5}
.format-klein .preis{font-family:var(--display);font-weight:800;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gut);background:var(--gut-bg);padding:.18rem .5rem;border-radius:999px}
.format-klein .preis.offen{color:var(--leise);background:#f1e9ee}
@media (max-width:980px){.video-raster{grid-template-columns:1fr}}
@media (max-width:760px){.formate-zeile{grid-template-columns:1fr}}
@media (max-width:520px){.folgen{grid-template-columns:1fr}}


.video-haupt{display:flex;flex-direction:column}
.thumb-haupt{flex:1 1 auto;aspect-ratio:auto;min-height:22rem;background:radial-gradient(120% 90% at 85% 10%,#b72f67 0%,#2a1028 45%,#0e0c0f 100%)}
.thumb-haupt::after{background:linear-gradient(90deg,rgba(30,10,32,.92) 0%,rgba(30,10,32,.55) 42%,rgba(30,10,32,0) 70%),linear-gradient(180deg,transparent 55%,rgba(22,10,24,.6))}
.thumb-haupt img{position:absolute;right:-8%;top:12%;width:78%;height:auto;object-fit:contain;border-radius:.9rem;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.18);transform:perspective(1400px) rotateY(-16deg) rotateX(5deg) rotateZ(-1deg);transform-origin:right center}
.video-haupt:hover .thumb-haupt img{transform:perspective(1400px) rotateY(-10deg) rotateX(3deg) rotateZ(0deg) scale(1.02)}
.thumb-haupt .play{left:auto;right:30%;top:58%}
.thumb-haupt .unten{max-width:24rem;bottom:1.4rem;left:1.4rem}
.thumb-haupt .unten b{font-size:clamp(1.4rem,2.6vw,2rem)}
@media (max-width:980px){.thumb-haupt{min-height:0;aspect-ratio:16/10}.thumb-haupt img{width:72%;top:10%}}
@media (max-width:520px){.thumb-haupt{aspect-ratio:4/5}.thumb-haupt img{width:96%;right:-30%;top:8%}.thumb-haupt .play{right:20%;top:45%}.thumb-haupt::after{background:linear-gradient(0deg,rgba(30,10,32,.95) 0%,rgba(30,10,32,.6) 40%,rgba(30,10,32,.05) 75%)}}

/* Deskstella: eigener Hauptbereich */
.pz-band{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#fff 0%,#fdf6fa 45%,#fff 100%)}
.pz-band::before{content:"";position:absolute;z-index:-1;inset:-10% -20% auto auto;width:60rem;height:60rem;border-radius:50%;background:radial-gradient(closest-side,rgba(221,66,140,.13),transparent);pointer-events:none}
.pz-band::after{content:"";position:absolute;z-index:-1;left:-25rem;top:28%;width:55rem;height:55rem;border-radius:50%;background:radial-gradient(closest-side,rgba(156,84,161,.10),transparent);pointer-events:none}
.pz-kopf{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:clamp(2rem,4vw,3rem)}
.pz-kopf-text{display:grid;gap:1.1rem;min-width:0}
.pcz-name{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.pcz-name img{width:3.6rem;height:3.6rem;border-radius:1.1rem;background:var(--papier);padding:.4rem;box-shadow:0 10px 24px -12px rgba(183,47,103,.5),inset 0 0 0 1px var(--linie)}
.pz-produkt{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.3rem);font-weight:900;line-height:1;letter-spacing:-.045em;color:var(--tinte)}
.pz-fakten-wrap{display:grid;gap:.8rem;min-width:0}
.pz-fakten{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.pz-fakten li{display:grid;grid-template-columns:minmax(7.5rem,auto) 1fr;gap:1rem;align-items:center;padding:.85rem 1.1rem;border-radius:var(--r-m);background:rgba(255,255,255,.8);border:1px solid var(--linie);box-shadow:var(--schatten)}
.pz-fakten b{font-family:var(--display);font-weight:900;font-size:1.15rem;letter-spacing:-.03em;background:var(--verlauf-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.pz-fakten span{font-size:.95rem;color:var(--text)}
.pz-name-hinweis{font-size:.82rem;color:var(--leise)}
.pz-h3{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;line-height:1.06;letter-spacing:-.04em;color:var(--tinte)}

/* Ansichten zum Durchklicken */
.pz-tour{display:grid;gap:1rem}
.ansicht-tabs{display:flex;gap:.3rem;padding:.3rem;border-radius:999px;background:var(--flaeche);flex-wrap:wrap;width:max-content;max-width:100%}
.ansicht-tabs button{font-family:var(--display);font-weight:700;font-size:.9rem;border:0;background:transparent;color:var(--leise);padding:.6rem 1.15rem;border-radius:999px;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s;min-height:2.75rem}
.ansicht-tabs button:hover{color:var(--tinte)}
.ansicht-tabs button[aria-selected="true"]{background:var(--papier);color:var(--marke);box-shadow:0 4px 14px -6px rgba(58,16,56,.35)}
.pz-buehne{position:relative;display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.8rem);align-items:center;padding:clamp(1rem,3vw,2.6rem);border-radius:calc(var(--r-l) + .6rem);overflow:hidden;isolation:isolate;background:
  radial-gradient(60% 70% at 8% 10%,rgba(156,84,161,.42),transparent 70%),
  radial-gradient(55% 65% at 70% 20%,rgba(221,66,140,.32),transparent 70%),
  radial-gradient(60% 70% at 40% 100%,rgba(242,105,108,.34),transparent 70%),
  #f6e8f0;box-shadow:var(--schatten-hoch)}
.pz-glas{position:relative;display:grid;place-items:center;min-height:12rem}
.pz-glas img{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 40px rgba(58,16,56,.28));transition:opacity .45s var(--ease),transform .7s var(--ease)}
.pz-glas img.wechselt{opacity:0;transform:translateY(8px) scale(.985)}
.pz-glas.schmal img{width:auto;max-width:100%;max-height:36rem}
.pz-glas.karte img{width:auto;max-width:min(100%,32rem)}
.ansicht-text{display:grid;gap:.9rem;min-width:0;padding:clamp(1.1rem,2vw,1.6rem);border-radius:var(--r-l);background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 40px -24px rgba(58,16,56,.35)}
.pz-nr{font-family:var(--display);font-weight:800;font-size:.75rem;letter-spacing:.18em;color:var(--marke)}
.ansicht-text h3{font-family:var(--display);font-weight:900;font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.12;letter-spacing:-.035em;color:var(--tinte);margin:0}
.ansicht-text p{color:var(--leise)}
.ansicht-text ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.ansicht-text li{display:grid;grid-template-columns:1.3rem 1fr;gap:.6rem;font-size:.96rem;line-height:1.5}
.ansicht-text li svg{width:1.1rem;height:1.1rem;color:var(--gut);margin-top:.2rem}
.echt-hinweis{font-size:.8rem;color:var(--leise)}

/* Suche */
.pz-suche-block{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;margin-top:clamp(4rem,8vw,6.5rem)}
.pz-suche-bild{position:relative;padding:clamp(.8rem,2.5vw,2rem);border-radius:calc(var(--r-l) + .6rem);background:radial-gradient(70% 80% at 0% 0%,rgba(156,84,161,.30),transparent 70%),radial-gradient(70% 80% at 100% 100%,rgba(242,105,108,.30),transparent 70%),#f7ebf2}
.pz-suche-bild img{width:100%;height:auto;display:block;filter:drop-shadow(0 26px 34px rgba(58,16,56,.25))}
.pz-suche-text{display:grid;gap:1.1rem;min-width:0}
.pz-tippen{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.pz-tippen-feld{display:inline-flex;align-items:center;gap:.6rem;min-width:min(100%,16rem);padding:.75rem 1rem;border-radius:999px;background:var(--papier);border:1.5px solid var(--linie-2);font-family:var(--display);font-weight:800;font-size:1.1rem;color:var(--tinte)}
.pz-tippen-feld svg{width:1.15rem;height:1.15rem;color:var(--marke);flex:none}
.pz-tippen-feld i{width:2px;height:1.2rem;background:var(--marke);animation:blinken 1s steps(1) infinite}
@keyframes blinken{50%{opacity:0}}
.pz-taste{font-family:var(--display);font-weight:700;font-size:.8rem;padding:.35rem .6rem;border-radius:.5rem;border:1px solid var(--linie-2);background:var(--grund);color:var(--leise)}
.pz-findet{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.pz-findet li{display:grid;grid-template-columns:2.4rem 1fr;gap:.8rem;align-items:center}
.pz-ic{width:2.4rem;height:2.4rem;border-radius:.8rem;display:grid;place-items:center;background:#fbe4ee;color:var(--marke)}
.pz-ic svg{width:1.2rem;height:1.2rem}
.pz-findet b{display:block;font-family:var(--display);font-weight:800;color:var(--tinte)}
.pz-findet span{font-size:.93rem;color:var(--leise)}

/* Vorher / Nachher */
.pz-zwischen{display:grid;gap:.9rem;max-width:46rem;margin:clamp(4rem,8vw,6.5rem) 0 clamp(1.6rem,3vw,2.4rem)}
.pz-vorher{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.vn{display:grid;gap:.75rem;align-content:start;padding:1.3rem;border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.vn:hover{transform:translateY(-3px);box-shadow:var(--schatten-hoch)}
.vn-gross{background:linear-gradient(160deg,#fff 0%,#fdf0f6 100%);border-color:#efc9dc}
.vn-ic{width:2.8rem;height:2.8rem;border-radius:.9rem;display:grid;place-items:center;color:#fff;background:var(--verlauf)}
.vn-ic svg{width:1.35rem;height:1.35rem}
.vn h4{font-family:var(--display);font-weight:900;font-size:1.15rem;letter-spacing:-.03em;color:var(--tinte);margin:0}
.vn p{font-size:.94rem;line-height:1.5}
.vn p>span{display:block;margin-bottom:.2rem;font-family:var(--display);font-weight:800;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.vn-ohne{color:var(--leise)}
.vn-ohne span{color:#a08a99}
.vn-mit{color:var(--text);padding-top:.7rem;border-top:1px dashed var(--linie-2)}
.vn-mit span{color:var(--gut)}
.vn-mit b{color:var(--marke)}

/* Bausteine */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}
.b-kachel{margin:0;display:flex;flex-direction:column;gap:.2rem;padding:.6rem .6rem 1rem;border-radius:calc(var(--r-l) + .2rem);background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.b-kachel:hover{transform:translateY(-3px);box-shadow:var(--schatten-hoch)}
.b-kachel img{width:100%;height:auto;display:block;border-radius:var(--r-m)}
.b-kachel figcaption{display:grid;gap:.2rem;padding:.5rem .5rem 0;margin-top:auto}
.b-kachel figcaption b{font-family:var(--display);font-weight:800;color:var(--tinte)}
.b-kachel figcaption span{font-size:.92rem;color:var(--leise)}
.b-2{grid-column:span 2}.b-3{grid-column:span 3}.b-4{grid-column:span 4}

/* Handy als Fernbedienung von Deskstella */
.fernbedienung{display:grid;gap:.9rem;width:min(20rem,82vw);margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid var(--linie)}
.fb-h3{font-family:var(--display);font-size:clamp(1.45rem,2.4vw,1.85rem);font-weight:900;line-height:1.08;letter-spacing:-.04em;color:var(--tinte)}
.fernbedienung>p{color:var(--leise);font-size:.98rem}
.fb-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.fb-knoepfe span{padding:.6rem .5rem;border-radius:.9rem;background:var(--papier);font-family:var(--display);font-weight:700;font-size:.82rem;color:var(--tinte);text-align:center;box-shadow:inset 0 0 0 1px var(--linie);transition:background .35s,color .35s,box-shadow .35s,transform .35s var(--ease)}
.fb-knoepfe span.an{background:var(--verlauf);color:#fff;box-shadow:0 10px 22px -10px rgba(221,66,140,.7);transform:translateY(-2px)}
.fb-strecke{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;padding:.8rem 1rem;border-radius:var(--r-m);background:var(--grund);border:1px solid var(--linie)}
.fb-geraet{width:2.4rem;height:2.4rem;border-radius:.8rem;display:grid;place-items:center;background:var(--papier);color:var(--marke);box-shadow:inset 0 0 0 1px var(--linie)}
.fb-geraet svg{width:1.25rem;height:1.25rem}
.fb-geraet.pc.empfang{animation:empfang .9s var(--ease)}
@keyframes empfang{0%{box-shadow:inset 0 0 0 1px var(--linie),0 0 0 0 rgba(221,66,140,.5)}60%{box-shadow:inset 0 0 0 1.5px var(--magenta),0 0 0 .6rem rgba(221,66,140,0)}100%{box-shadow:inset 0 0 0 1px var(--linie),0 0 0 0 rgba(221,66,140,0)}}
.fb-linie{position:relative;height:2px;background:repeating-linear-gradient(90deg,var(--linie-2) 0 6px,transparent 6px 11px)}
.fb-linie i{position:absolute;top:50%;left:0;width:.6rem;height:.6rem;margin-top:-.3rem;border-radius:50%;background:var(--verlauf);box-shadow:0 0 0 4px rgba(221,66,140,.18);opacity:0}
.fb-linie.senden i{animation:senden .85s var(--ease) forwards}
@keyframes senden{0%{left:0;opacity:1}90%{opacity:1}100%{left:calc(100% - .6rem);opacity:0}}
.fb-wirkung{font-size:.92rem;color:var(--text)!important;min-height:3em;transition:opacity .3s}
.fb-wirkung b{font-family:var(--display);color:var(--marke)}
@media (max-width:900px){.fernbedienung{margin-inline:auto}}

/* Verbund */
.verbund{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;margin-top:clamp(4rem,8vw,6.5rem)}
.verbund-text{display:grid;gap:1.1rem;min-width:0}
.verbund-liste{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.verbund-liste li{padding:.9rem 1.1rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie)}
.verbund-liste b{display:block;font-family:var(--display);font-weight:800;color:var(--tinte)}
.verbund-liste span{font-size:.93rem;color:var(--leise)}
.verbund-grafik svg{width:100%;height:auto;display:block;overflow:visible}

.pcz-fuss{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem;align-items:center;margin-top:clamp(3rem,6vw,4.5rem)}

@media (max-width:1060px){.pz-vorher{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.pz-kopf,.pz-buehne,.pz-suche-block,.verbund{grid-template-columns:1fr}.pz-glas.schmal img{max-height:30rem}}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.b-2,.b-3,.b-4{grid-column:span 2}.pcz-fuss{grid-template-columns:1fr}}
@media (max-width:620px){.pz-vorher{grid-template-columns:1fr}.ansicht-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:1.4rem}.ansicht-tabs button{padding:.55rem .6rem;font-size:.84rem}.pz-fakten li{grid-template-columns:1fr;gap:.2rem}}
@media (prefers-reduced-motion:reduce){.vb-punkte{display:none}.pz-tippen-feld i{animation:none}}

/* Mini-Grafik DailyBIOS in der Produktkarte */
.mini-cockpit{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;padding:1rem;border-radius:var(--r-m);background:var(--grund);border:1px solid var(--linie)}
.mini-cockpit svg{width:5.6rem;height:5.6rem}
.mini-cockpit .werte{display:grid;gap:.35rem;font-size:.84rem;color:var(--leise)}
.mini-cockpit .werte span{display:flex;align-items:center;gap:.45rem}
.mini-cockpit .werte i{width:.6rem;height:.6rem;border-radius:50%}
.mini-cockpit .werte b{font-family:var(--display);font-weight:800;color:var(--tinte);font-variant-numeric:tabular-nums}

/* Transformations-Cockpit */
.cockpit{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(1.2rem,3vw,2rem);align-items:stretch}
.cockpit-karte{position:relative;padding:clamp(1.3rem,3vw,2rem);border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten);display:grid;gap:1.2rem;align-content:start}
.cockpit-kopf{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:baseline}
.cockpit-kopf b{font-family:var(--display);font-weight:800;color:var(--tinte);font-size:1.05rem}
.cockpit-kopf small{font-size:.8rem;color:var(--leise)}
.ringe-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,3vw,2rem);align-items:center}
.ringe{position:relative;width:min(15rem,52vw);aspect-ratio:1}
.ringe svg{width:100%;height:100%;transform:rotate(-90deg)}
.ringe .spur{fill:none;stroke:var(--flaeche);stroke-width:13}
.ringe .wert{fill:none;stroke-width:13;stroke-linecap:round;transition:stroke-dashoffset 1.6s var(--ease)}
.ringe .mitte{position:absolute;inset:0;display:grid;place-items:center;text-align:center;align-content:center;gap:.1rem}
.ringe .mitte b{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,5vw,3rem);line-height:1;letter-spacing:-.04em;color:var(--tinte);font-variant-numeric:tabular-nums}
.ringe .mitte small{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--marke)}
.ring-legende{display:grid;gap:.85rem}
.ring-legende div{display:grid;grid-template-columns:.8rem 1fr auto;gap:.6rem;align-items:center}
.ring-legende i{width:.8rem;height:.8rem;border-radius:50%}
.ring-legende span{color:var(--leise);font-size:.92rem}
.ring-legende b{font-family:var(--display);font-weight:800;color:var(--tinte);font-variant-numeric:tabular-nums;font-size:.98rem}
.ring-legende em{display:block;font-style:normal;font-size:.78rem;color:var(--leise)}
.woche{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem;align-items:end;padding-top:.4rem}
.woche div{display:grid;gap:.35rem;justify-items:center}
.woche .spur{height:5rem;width:100%;display:flex;align-items:flex-end;justify-content:center}
.woche i{display:block;width:100%;max-width:2.2rem;border-radius:.45rem .45rem .2rem .2rem;background:linear-gradient(180deg,#dd428c,#9c54a1);transform-origin:bottom;transition:transform 1.1s var(--ease)}
.woche div.heute i{background:linear-gradient(180deg,#f2696c,#dd428c);box-shadow:0 6px 18px -6px rgba(221,66,140,.7)}
.woche small{font-size:.72rem;color:var(--leise);font-variant-numeric:tabular-nums}
.einblicke{display:grid;gap:.8rem}
.einblick{display:grid;grid-template-columns:2.4rem 1fr;gap:.85rem;align-items:start;padding:1rem 1.1rem;border-radius:var(--r-m);background:var(--grund);border:1px solid var(--linie)}
.einblick .ico{width:2.4rem;height:2.4rem;border-radius:.75rem;display:grid;place-items:center;color:#fff}
.einblick .ico svg{width:1.15rem;height:1.15rem}
.einblick b{font-family:var(--display);font-weight:800;color:var(--tinte);display:block;letter-spacing:-.01em}
.einblick span{color:var(--leise);font-size:.92rem;line-height:1.5}
.einblick.ki{background:#f6eefa;border-color:#e6d3ef}
.einblick.ki .ki-label{font-family:var(--display);font-weight:800;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--violett)}
.js .cockpit:not(.da) .ringe .wert{stroke-dashoffset:var(--voll) !important}
.js .cockpit:not(.da) .woche i{transform:scaleY(.08)}
@media (max-width:980px){.cockpit{grid-template-columns:1fr}}
@media (max-width:520px){.ringe-wrap{grid-template-columns:1fr;justify-items:center}.ring-legende{width:100%}}
@media (prefers-reduced-motion:reduce){.js .cockpit:not(.da) .ringe .wert{stroke-dashoffset:var(--ziel) !important}.js .cockpit:not(.da) .woche i{transform:none}}

/* V7: Faq-Text als ein Block */
.faq summary .sum-t{flex:1 1 auto;min-width:0}
/* V7: Trainings-Kacheln */
.thumb-kachel{background:radial-gradient(120% 110% at 100% 0%,#c23a72 0%,#2a1028 50%,#0e0c0f 100%)}
.thumb-kachel.k03{background:radial-gradient(120% 110% at 0% 0%,#8a4aa0 0%,#4d1a55 52%,#22102a 100%)}
.thumb-kachel.k04{background:radial-gradient(120% 110% at 100% 100%,#e2566f 0%,#2e1129 52%,#0e0c0f 100%)}
.thumb-kachel.k05{background:radial-gradient(120% 110% at 0% 100%,#a3489a 0%,#5a1a58 52%,#26112d 100%)}
.thumb-kachel::after{background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 40%),radial-gradient(60% 60% at 50% 50%,transparent 60%,rgba(0,0,0,.18))}
.thumb-kachel .k-nr{position:absolute;left:1rem;bottom:.2rem;z-index:2;font-family:var(--display);font-weight:800;font-size:clamp(3.6rem,6.4vw,5.4rem);line-height:1;letter-spacing:-.05em;color:rgba(255,255,255,.2)}
.thumb-kachel .play{display:none}
.thumb-kachel .k-ico{position:absolute;right:1.1rem;bottom:1rem;z-index:2;width:clamp(2.6rem,22%,4.2rem);height:auto;color:rgba(255,255,255,.88)}
.video:hover .thumb-kachel .k-ico{color:#fff}
/* V7: Transformation Beispielansicht */
.tm-flaeche{aspect-ratio:4/3;display:grid;place-items:center;padding:clamp(1rem,4vw,2.4rem);background:radial-gradient(120% 110% at 100% 0%,#c23a72 0%,#2a1028 50%,#0e0c0f 100%)}
.tm-karte{width:min(100%,24rem);display:grid;gap:.8rem;padding:1.2rem 1.25rem;border-radius:1.2rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;box-shadow:0 30px 60px -25px rgba(0,0,0,.6)}
.tm-kopf{display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.tm-chip{font-family:inherit;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;background:rgba(255,255,255,.16)}
.tm-z{display:grid;grid-template-columns:1.25rem 5.5rem 1fr;align-items:center;gap:.6rem;font-size:.92rem}
.tm-z svg{width:1.15rem;height:1.15rem;opacity:.9}
.tm-z b{font-weight:600}
.tm-z i{display:block;height:.5rem;border-radius:999px;background:rgba(255,255,255,.14);position:relative;overflow:hidden}
.tm-z i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,#f6a0c2,#fff)}
.tm-fuss{display:flex;align-items:center;gap:.5rem;margin-top:.3rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.18);font-size:.88rem;opacity:.95}
.tm-fuss svg{width:1rem;height:1rem;flex:none}
/* V7: Vision ohne Bild */
.vision-raster .vision-text{justify-items:center;text-align:center}.vision-raster .vision-text>*{margin-inline:auto}
.vision-raster{grid-template-columns:1fr!important;max-width:54rem;margin-inline:auto;text-align:center;justify-items:center}
.post .bild-verlauf{background:linear-gradient(135deg,var(--violett),var(--magenta) 55%,var(--koralle))}
/* Academy: drei Lernpfade nebeneinander (Variante A, gewählt am 19.10.2026) */
.ak-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.ak-pfad{display:grid;gap:.95rem;align-content:start;padding:clamp(1.2rem,2.4vw,1.6rem);border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.ak-pfad:hover{transform:translateY(-4px);box-shadow:var(--schatten)}
.ak-pfad.erst{border:1.5px solid transparent;background:linear-gradient(var(--papier),var(--papier)) padding-box,var(--verlauf) border-box;box-shadow:var(--schatten)}
.ak-kopf{display:grid;gap:.4rem}
.ak-werk{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--violett)}
.ak-pfad h3{font-size:clamp(1.2rem,1.8vw,1.4rem);font-weight:900;line-height:1.15;letter-spacing:-.03em}
.ak-kopf p{color:var(--leise);font-size:.93rem}
.ak-fort{display:grid;gap:.35rem}
.ak-balken{height:.5rem;border-radius:999px;background:var(--flaeche);overflow:hidden}
.ak-balken i{display:block;height:100%;width:var(--p);border-radius:999px;background:var(--verlauf)}
.ak-fort small{font-size:.8rem;color:var(--leise)}
.ak-schritte{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ak-schritte li{display:grid;grid-template-columns:1.75rem 1fr;gap:.7rem;align-items:start}
.ak-nr{width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.78rem;color:var(--marke);border:1.5px solid var(--linie-2);background:var(--papier)}
.ak-schritte b{display:block;font-family:var(--display);font-weight:700;color:var(--tinte);font-size:.96rem;line-height:1.3}
.ak-schritte small{display:block;color:var(--leise);font-size:.82rem;line-height:1.45}
.ak-ziel{font-size:.92rem;padding:.85rem .95rem;border-radius:var(--r-s);background:var(--grund);border:1px dashed var(--linie-2)}
.ak-ziel b{font-family:var(--display);color:var(--tinte)}
.ak-zwischen{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin:clamp(2.5rem,5vw,3.5rem) 0 1rem}
.ak-zwischen h3{font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:900;letter-spacing:-.035em}
.ak-zwischen p{color:var(--leise);font-size:.95rem;max-width:34rem}
.ak-vorlagen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.ak-vorlagen li{display:grid;gap:.35rem;align-content:start;padding:1.1rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie)}
.ak-art{font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--marke)}
.ak-vorlagen b{font-family:var(--display);font-weight:800;color:var(--tinte);line-height:1.25;letter-spacing:-.01em}
.ak-vorlagen span:last-child{color:var(--leise);font-size:.88rem;line-height:1.5}
.ak-projekte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.ak-projekt{display:grid;gap:.3rem;align-content:start;padding:1.1rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie)}
.ak-projekt b{font-family:var(--display);font-weight:800;color:var(--tinte)}
.ak-projekt span{color:var(--leise);font-size:.9rem}
.ak-projekt.offen{border-style:dashed;border-color:var(--linie-2);background:transparent}
.ak-fuss{display:flex;align-items:center;gap:1rem 1.4rem;flex-wrap:wrap;margin-top:clamp(2rem,4vw,3rem)}
.ak-fuss p{color:var(--leise);font-size:.93rem;max-width:36rem}
@media (max-width:1060px){.ak-raster{grid-template-columns:1fr}.ak-vorlagen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.ak-projekte{grid-template-columns:1fr}}
@media (max-width:520px){.ak-vorlagen{grid-template-columns:1fr}}
/* Fitnesswoche im Handy */
.post .post-woche{position:relative;display:flex;align-items:flex-end;gap:.22rem;padding:1.1rem .55rem .45rem;background:linear-gradient(135deg,var(--violett),var(--magenta) 55%,var(--koralle))}
.post-woche small{position:absolute;left:.55rem;top:.35rem;font-family:var(--display);font-size:.5rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.post-woche span{flex:1;height:var(--h);border-radius:.22rem .22rem .08rem .08rem;background:rgba(255,255,255,.55)}
.post-woche span.heute{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.7)}
/* Sternbild */
.sternbild{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(4.5rem,9vw,8rem);background:radial-gradient(60% 50% at 15% 20%,rgba(156,84,161,.35),transparent 70%),radial-gradient(50% 45% at 85% 80%,rgba(221,66,140,.28),transparent 70%),linear-gradient(180deg,#09080a 0%,#0e0c0f 55%,#070608 100%);color:#f6e6ef}
.sternbild canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1}
.stern-inhalt{position:relative}
.stern-kopf{display:grid;gap:1.1rem;max-width:46rem}
.sternbild .etikett{color:#ffb3cf}
.sternbild .h2{color:#fff}
.sternbild .lead{color:#e3cddb}
.stern-feld{position:relative;aspect-ratio:16/7;margin-top:clamp(1.5rem,4vw,3rem)}
.stern-label{position:absolute;transform:translate(-50%,1.1rem);display:grid;justify-items:center;gap:.05rem;text-align:center;text-decoration:none;color:#fff;padding:.4rem .75rem;border-radius:.9rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap;transition:background .25s,border-color .25s,transform .35s var(--ease)}
.stern-label b{font-family:var(--display);font-weight:800;font-size:.92rem;letter-spacing:-.01em}
.stern-label small{font-size:.72rem;color:#e3cddb}
.stern-label:hover,.stern-label:focus-visible{background:rgba(255,255,255,.16);border-color:rgba(255,179,207,.6);transform:translate(-50%,.95rem)}
.stern-label.gross b{font-size:1.15rem}
.stern-label.leise{opacity:.7}
@media (max-width:720px){.stern-feld{aspect-ratio:4/5}.stern-label{padding:.3rem .55rem}.stern-label b{font-size:.8rem}.stern-label small{display:none}.stern-label.gross b{font-size:.98rem}}


/* v14: Kosmos (Universum + Vision) */
@property --rot{syntax:'<angle>';inherits:false;initial-value:0deg}
.kosmos{position:relative;isolation:isolate;overflow:clip;color:#f6e6ef;background:linear-gradient(180deg,#14061a 0%,#1d0a24 22%,#220b2a 50%,#1b0820 72%,#2a0f30 100%)}
.kosmos-himmel{position:sticky;top:0;height:100vh;margin-bottom:-100vh;z-index:0;pointer-events:none}
.kosmos-himmel canvas{display:block;width:100%;height:100%}
.kosmos .sternbild{background:none;overflow:visible;isolation:auto;position:relative;z-index:1}
.kosmos .etikett{color:#ffb3cf}
.vision-kosmos{position:relative;z-index:1}
.kosmos::before{content:"";position:absolute;left:50%;bottom:3rem;width:min(80rem,160vw);height:28rem;transform:translateX(-50%);background:radial-gradient(50% 60% at 50% 100%,rgba(242,105,108,.42),rgba(221,66,140,.22) 45%,transparent 75%);z-index:0;pointer-events:none}
.kosmos::after{content:"";position:absolute;left:-25%;right:-25%;bottom:-2px;height:clamp(4.5rem,9vw,8rem);background:var(--papier);border-radius:50% 50% 0 0/100% 100% 0 0;box-shadow:0 -2px 0 rgba(255,190,220,.95),0 -18px 50px rgba(221,66,140,.55),0 -60px 120px rgba(242,105,108,.35);z-index:2;pointer-events:none}
.manifest{display:grid;gap:1.6rem;max-width:64rem;padding-block:clamp(5rem,13vw,11rem) clamp(2rem,5vw,4rem)}
.manifest-titel{font-family:var(--display);font-weight:900;font-size:clamp(2.3rem,6.2vw,5.4rem);line-height:1.02;letter-spacing:-.045em;margin:0;color:#fff}
.manifest-titel .zeile{display:block;text-wrap:balance}
.ohne-umbruch{white-space:nowrap}
.manifest-titel .zeile.klein{font-size:.52em;letter-spacing:-.03em;line-height:1.2;margin:.35em 0 .3em;font-weight:800}
.mw{display:inline-block;color:rgba(255,255,255,.13);transition:color .7s ease,opacity .7s ease,transform .7s var(--ease);transform:translateY(.06em)}
.mw.an{color:#fff;transform:none}
.mw.g{color:transparent;opacity:.2}
.mw.g.an{opacity:1}
.manifest-text{max-width:40rem;color:#e3cddb;font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.6}
.kosmos-h3{font-family:var(--display);font-weight:900;font-size:clamp(1.7rem,3.4vw,2.7rem);letter-spacing:-.035em;line-height:1.06;color:#fff;margin:0}
.kosmos-lead{color:#d9bfd0;max-width:38rem}
.kreis-block,.versprechen-block{display:grid;gap:clamp(1.6rem,3.5vw,2.8rem);padding-block:clamp(3rem,7vw,6rem)}
.kreis-kopf{display:grid;gap:.9rem;max-width:46rem}
.kreis-raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.kreis{--a:0deg;position:relative;width:min(34rem,100%);aspect-ratio:1;justify-self:center}
.kreis-bahn{position:absolute;inset:9%;border-radius:50%;border:1.5px dashed rgba(255,255,255,.16);box-shadow:inset 0 0 60px rgba(221,66,140,.12)}
.kreis-glanz{position:absolute;inset:0;filter:drop-shadow(0 0 6px rgba(255,120,180,.9)) drop-shadow(0 0 18px rgba(221,66,140,.6))}
.kreis-schweif{position:absolute;inset:9%;border-radius:50%;background:conic-gradient(from calc(var(--a) - 130deg),rgba(156,84,161,0) 0deg,rgba(156,84,161,.25) 50deg,rgba(221,66,140,.9) 120deg,#fff 130deg,rgba(255,255,255,0) 130.6deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))}
.kreis-arm{position:absolute;inset:9%;transform:rotate(var(--a));pointer-events:none}
.kreis-arm::after{content:"";position:absolute;left:50%;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(255,150,200,.95),0 0 36px 10px rgba(221,66,140,.65)}
.kreis-kern{position:absolute;inset:31%;border-radius:50%;display:grid;place-content:center;justify-items:center;text-align:center;gap:.15rem;background:radial-gradient(circle,rgba(221,66,140,.30),rgba(156,84,161,.10) 58%,transparent 72%)}
.kreis-kern span{font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.2em;color:#ffb3cf}
.kreis-kern b{font-family:var(--display);font-weight:900;font-size:clamp(1.5rem,4vw,2.6rem);letter-spacing:-.04em;color:#fff;line-height:1}
.kreis-kern.wechsel b,.kreis-panel.wechsel>*{animation:kreisRein .6s var(--ease) both}
.kreis-panel.wechsel>*:nth-child(2){animation-delay:.05s}.kreis-panel.wechsel>*:nth-child(3){animation-delay:.1s}.kreis-panel.wechsel>*:nth-child(5){animation-delay:.15s}
@keyframes kreisRein{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.kreis-knoten{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:.3rem;background:none;border:0;padding:0;color:#fff;font:inherit;cursor:pointer;z-index:2}
.knoten-ico{width:clamp(3rem,6.5vw,4.1rem);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#2a0f31;border:1.5px solid rgba(255,255,255,.2);box-shadow:0 0 0 6px rgba(29,10,36,.9);transition:background .45s,box-shadow .45s,transform .45s var(--ease),border-color .45s}
.knoten-ico svg{width:46%;height:46%}
.knoten-name{font-family:var(--display);font-weight:800;font-size:.92rem;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.knoten-produkt{font-size:.72rem;color:#d9b9cc;margin-top:-.25rem}
.kreis-knoten:hover .knoten-ico{border-color:rgba(255,179,207,.7)}
.kreis-knoten:focus-visible{outline:none}.kreis-knoten:focus-visible .knoten-ico{outline:2px solid #ffb3cf;outline-offset:4px}
.kreis-knoten.an .knoten-ico{background:linear-gradient(135deg,#9c54a1,#dd428c 55%,#f2696c);border-color:transparent;transform:scale(1.14);box-shadow:0 0 0 6px rgba(221,66,140,.18),0 0 40px rgba(221,66,140,.8)}
.kreis-panel{display:grid;gap:1rem;align-content:start;padding:clamp(1.4rem,3vw,2.2rem);border-radius:calc(var(--r-l) + .3rem);background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.panel-kopf{display:flex;justify-content:space-between;gap:1rem;font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.16em;color:#ffb3cf}
.panel-produkt{color:#fff;letter-spacing:.04em}
.panel-titel{font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,5vw,3.6rem);letter-spacing:-.045em;line-height:1;margin:0;background:var(--verlauf-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.panel-text{color:#ead5e2;font-size:1.04rem;line-height:1.6;min-height:5.2em}
.panel-fortschritt{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.panel-fortschritt i{height:4px;border-radius:4px;background:rgba(255,255,255,.12);transition:background .5s}
.panel-fortschritt i.an{background:linear-gradient(90deg,#dd428c,#f2696c)}
.panel-link{justify-self:start;color:#fff;font-family:var(--display);font-weight:700;text-decoration:none;border-bottom:2px solid rgba(255,179,207,.5);padding-bottom:.1rem}
.panel-link:hover{border-color:#ffb3cf}
.versprechen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.v-karte{--mx:50%;--my:0%;position:relative;display:grid;gap:.6rem;align-content:start;padding:1.6rem 1.4rem 1.7rem;border-radius:var(--r-l);isolation:isolate;overflow:hidden;background:radial-gradient(20rem circle at var(--mx) var(--my),rgba(221,66,140,.22),transparent 45%),rgba(255,255,255,.035)}
.v-karte::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--rot),rgba(255,255,255,.08) 0deg,rgba(255,255,255,.08) 200deg,rgba(255,140,190,.95) 300deg,rgba(255,255,255,.08) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.v-gross{font-family:var(--display);font-weight:900;font-size:clamp(2rem,3.3vw,2.8rem);letter-spacing:-.045em;line-height:1;padding-bottom:.15rem;background:var(--verlauf-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.v-karte b{font-family:var(--display);font-weight:800;color:#fff;font-size:1.06rem;letter-spacing:-.01em}
.v-karte>span:last-child{color:#d9bfd0;font-size:.93rem;line-height:1.55}
.vision-finale{position:relative;display:grid;justify-items:center;text-align:center;gap:1.3rem;padding:clamp(4rem,9vw,7rem) 0 clamp(10rem,18vw,15rem)}
.finale-zeile{font-family:var(--display);font-weight:900;font-size:clamp(3rem,9vw,7.2rem);letter-spacing:-.055em;line-height:.95;color:#fff;margin:0}
.finale-text{max-width:36rem;color:#e3cddb;font-size:1.08rem}
.finale-knoepfe{justify-content:center}
.knopf.geist{color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.knopf.geist:hover{background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1.5px rgba(255,179,207,.7)}
@media (prefers-reduced-motion:no-preference){
  .v-karte::before{animation:randDreh 7s linear infinite}
  .v-karte:nth-child(2)::before{animation-delay:-1.75s}.v-karte:nth-child(3)::before{animation-delay:-3.5s}.v-karte:nth-child(4)::before{animation-delay:-5.25s}
  @keyframes randDreh{to{--rot:360deg}}
  .v-karte{transition:translate .4s var(--ease)}
  .v-karte:hover{translate:0 -6px}
  .kosmos::before{animation:horizontAtmen 6s ease-in-out infinite alternate}
  @keyframes horizontAtmen{from{opacity:.75}to{opacity:1}}
  .finale-zeile .verlauf-text{animation-duration:4s}
}
@media (max-width:1000px){.versprechen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.kreis-raster{grid-template-columns:1fr}.kreis{width:min(30rem,88vw)}}
@media (max-width:560px){.versprechen{grid-template-columns:1fr}.knoten-produkt{display:none}.knoten-name{font-size:.8rem}.panel-text{min-height:0}}

/* v14: Verlauf in der Speicher-Karte */
.ram-karte{display:flex;flex-direction:column;gap:1rem}
.ram-verlauf{position:relative;margin-top:auto;padding-top:.9rem;border-top:1px solid var(--linie)}
.ram-verlauf-kopf{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}
.ram-verlauf-kopf b{font-family:var(--display);font-weight:800;color:var(--tinte);font-size:.92rem}
.ram-verlauf-kopf span{font-size:.75rem;color:var(--leise)}
.ram-verlauf svg{display:block;width:100%;height:4.2rem;overflow:visible}
.ram-verlauf .ram-punkt{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#f2696c;box-shadow:0 0 0 4px rgba(242,105,108,.22)}
.ram-kurve{position:relative}
.js .ram-li{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.3,.7,.2,1) .3s}
.js .ram-fl{opacity:0;transition:opacity 1s ease 1.2s}
.js .ram-karte.laeuft .ram-li{stroke-dashoffset:0}
.js .ram-karte.laeuft .ram-fl{opacity:1}
@media (prefers-reduced-motion:no-preference){.ram-verlauf .ram-punkt::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(242,105,108,.6);animation:spurPuls 2s ease-out infinite}}
@media (prefers-reduced-motion:reduce){.js .ram-li{stroke-dashoffset:0;transition:none}.js .ram-fl{opacity:1}}

/* v13: Ringe gross und zentriert */
.einblicke{align-content:center;align-self:center}
.ringe-wrap{grid-template-columns:1fr;justify-items:center}
.ringe{width:min(19rem,72vw)}
.ringe .mitte b{font-size:clamp(1.7rem,3.4vw,2.25rem)}
.ring-legende{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.ring-legende div{grid-template-columns:.8rem minmax(0,1fr);row-gap:.25rem;align-items:start}
.ring-legende div i{margin-top:.3rem}
.ring-legende div b{grid-column:2}
@media (max-width:520px){.ring-legende{grid-template-columns:1fr}.ring-legende div{grid-template-columns:.8rem 1fr auto}.ring-legende div b{grid-column:auto}}

/* v13: Gehirn-Zonen klickbar */
.hirn-chip{font:inherit;color:inherit;cursor:pointer;position:relative;overflow:hidden}
.hirn-chip::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:var(--p,0%);background:linear-gradient(90deg,#ff6fb0,#c99bf0)}
.hirn-chip:hover{background:rgba(255,255,255,.12)}
.hirn-chip:focus-visible{outline:2px solid #ffb3cf;outline-offset:2px}
.hirn-chip.fix::after{width:100%}
.hirn-hinweis{font-size:.75rem;color:#cfaec2}

/* v13: Speicherleiste und Zahl animiert */
.ram-riegel{position:relative;overflow:hidden}
.ram-riegel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);transform:translateX(-110%);pointer-events:none}
.ram-riegel i{transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1.3)}
.js .ram-riegel i:not(.voll){opacity:.12;transform:scaleY(.35)}
.js .ram-riegel i.an{opacity:1;transform:none}
.ram-riegel.puls::after{animation:ramGlanz 3.4s ease-in-out infinite}
.ram-riegel.puls i.voll{animation:ramBelegt 2.2s ease-in-out infinite alternate}
@keyframes ramGlanz{0%{transform:translateX(-110%)}55%,100%{transform:translateX(110%)}}
@keyframes ramBelegt{from{opacity:1}to{opacity:.45}}
.js .ram-liste li{opacity:.35;translate:0 14px;transition:opacity .6s ease,translate .6s cubic-bezier(.2,.7,.2,1)}
.js .ram-karte.laeuft .ram-liste li{opacity:1;translate:0 0}
.ram-karte.laeuft .ram-liste li:nth-child(2){transition-delay:.15s}
.ram-karte.laeuft .ram-liste li:nth-child(3){transition-delay:.3s}
.ram-liste li.hell{background:linear-gradient(90deg,rgba(221,66,140,.08),transparent);border-radius:.6rem}
.ram-liste li{transition:background .5s}

/* v13: Bewegung auf der ganzen Seite */
@media (prefers-reduced-motion:no-preference){
  .verlauf-text{background-size:220% 100%;animation:verlaufFluss 7s ease-in-out infinite alternate}
  .etikett::before{background-size:220% 100%;animation:verlaufFluss 5s ease-in-out infinite alternate}
  @keyframes verlaufFluss{from{background-position:0% 50%}to{background-position:100% 50%}}
  .knopf.haupt{overflow:hidden;isolation:isolate}
  .knopf.haupt::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);animation:knopfGlanz 5s ease-in-out infinite;pointer-events:none;z-index:-1}
  @keyframes knopfGlanz{0%,62%{left:-60%}100%{left:130%}}
  .saeule,.einblick,.phase,.schritt,.ram-karte,.cockpit-karte,.person{transition:translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
  .saeule:hover,.einblick:hover,.phase:hover,.schritt:hover,.person:hover{translate:0 -4px;box-shadow:0 18px 40px -22px rgba(183,47,103,.45);border-color:var(--linie-2)}
  .ram-karte:hover,.cockpit-karte:hover{translate:0 -3px}
  .einblick .ico{animation:icoSchweben 4.2s ease-in-out infinite}
  .einblick:nth-child(2) .ico{animation-delay:-1s}.einblick:nth-child(3) .ico{animation-delay:-2s}.einblick:nth-child(4) .ico{animation-delay:-3s}
  @keyframes icoSchweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  .ringe .mitte b{animation:mittePuls 3.6s ease-in-out infinite}
  @keyframes mittePuls{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
  .woche i{transition:transform 1.1s var(--ease),filter .3s}
  .woche div:hover i{filter:brightness(1.15) saturate(1.2)}
  .phase.jetzt{animation:phaseGlow 3s ease-in-out infinite alternate}
  @keyframes phaseGlow{from{box-shadow:0 0 0 0 rgba(221,66,140,0)}to{box-shadow:0 0 0 6px rgba(221,66,140,.10)}}
}

/* v16-START */
/* v16: Kern-Band – Academy und Deskstella groß, Arbeitsspeicher direkt unter Deskstella */
.kern-band{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(4rem,8vw,6.5rem);background:linear-gradient(180deg,#fff 0%,var(--grund) 55%,#fff 100%)}
.kern-band::before{content:"";position:absolute;z-index:-1;right:-15rem;top:-10rem;width:50rem;height:50rem;border-radius:50%;background:radial-gradient(closest-side,rgba(221,66,140,.12),transparent);pointer-events:none}
.kern-kopf{display:grid;gap:1.1rem;max-width:50rem;margin-bottom:clamp(2rem,4vw,3rem)}
.kern-raster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:1.2rem}
.kern-karte.academy{grid-row:1 / span 2}
.kern-karte{--rot:0deg;--mx:50%;--my:0%;position:relative;isolation:isolate;display:grid;gap:.9rem;align-content:start;padding:clamp(1.4rem,3vw,2.2rem);border-radius:calc(var(--r-l) + .3rem);background:radial-gradient(26rem circle at var(--mx) var(--my),rgba(221,66,140,.08),transparent 55%),var(--papier);text-decoration:none;color:var(--text);box-shadow:var(--schatten);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.kern-karte::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--rot),#9c54a1,#dd428c,#f2696c,#ffd3df,#9c54a1);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.kern-karte.mittel::before{padding:1.5px;opacity:.6}
.kern-karte:hover{transform:translateY(-5px);box-shadow:var(--schatten-hoch)}
.kern-karte:focus-visible{outline:3px solid var(--magenta);outline-offset:4px}
.kern-marke{display:flex;align-items:center;gap:.85rem}
.kern-ico{width:3.6rem;height:3.6rem;border-radius:1.1rem;display:grid;place-items:center;color:#fff;background:var(--verlauf);box-shadow:0 12px 26px -12px rgba(221,66,140,.7)}
.kern-ico svg{width:1.8rem;height:1.8rem}
.kern-marke img,.kern-logo svg{width:3.6rem;height:3.6rem;border-radius:1.1rem;display:block;box-shadow:0 10px 24px -12px rgba(183,47,103,.5),inset 0 0 0 1px var(--linie)}
.kern-marke img{background:var(--papier);padding:.4rem}
.kern-logo{line-height:0}
.kern-stufe{font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--marke)}
.kern-karte h3{font-size:clamp(2rem,3.8vw,3.1rem);font-weight:900;letter-spacing:-.05em;line-height:1}
.kern-karte.mittel h3{font-size:clamp(1.55rem,2.6vw,2.15rem)}
.kern-karte p{color:var(--leise);font-size:1.02rem;max-width:34rem}
.kern-weg{list-style:none;margin:.3rem 0 .2rem;padding:0;display:grid;gap:.55rem;counter-reset:w}
.kern-weg li{counter-increment:w;display:flex;align-items:center;gap:.75rem;font-family:var(--display);font-weight:700;color:var(--tinte);padding:.7rem .85rem;border-radius:.9rem;background:var(--grund);border:1px solid var(--linie)}
.kern-weg li::before{content:counter(w);width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;font-size:.78rem;color:#fff;background:var(--verlauf);flex:none}
.kern-link{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--display);font-weight:800;color:var(--marke)}
.kern-link svg{width:1.05rem;height:1.05rem;transition:transform .3s var(--ease)}
.kern-karte:hover .kern-link svg{transform:translateX(4px)}
@media (prefers-reduced-motion:no-preference){
  .kern-karte::before{animation:randDreh 6s linear infinite}
  .kern-karte.desk::before{animation-delay:-2s}.kern-karte.speicher::before{animation-delay:-4s;animation-duration:9s}
  .kern-ico{animation:icoSchweben 4.2s ease-in-out infinite}
  .kern-weg li{animation:wegLicht 8s ease-in-out infinite}
  .kern-weg li:nth-child(2){animation-delay:2s}.kern-weg li:nth-child(3){animation-delay:4s}.kern-weg li:nth-child(4){animation-delay:6s}
  @keyframes wegLicht{0%,30%,100%{background:var(--grund);border-color:var(--linie)}10%,20%{background:#fbe4ee;border-color:var(--linie-2)}}
}
@media (max-width:820px){.kern-raster{grid-template-columns:1fr}.kern-karte.academy{grid-row:auto}}

/* Academy: Dein Weg mit uns */
.academy-weg{position:relative;display:grid;gap:1.4rem;margin:0 0 clamp(2.5rem,5vw,3.5rem);padding:clamp(1.4rem,3vw,2.2rem);border-radius:calc(var(--r-l) + .3rem);background:linear-gradient(var(--papier),var(--papier)) padding-box,var(--verlauf) border-box;border:1.5px solid transparent;box-shadow:var(--schatten)}
.weg-kopf{display:flex;justify-content:space-between;align-items:end;gap:.6rem 2rem;flex-wrap:wrap}
.weg-kopf h3{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:900;letter-spacing:-.04em}
.weg-kopf p{color:var(--leise);max-width:34rem;font-size:.97rem}
.weg-spur{position:relative;height:4px;border-radius:4px;background:var(--flaeche);margin:0 1.1rem}
.weg-spur i{position:absolute;inset:0 auto 0 0;width:var(--fort,0%);border-radius:inherit;background:var(--verlauf);box-shadow:0 0 14px rgba(221,66,140,.55);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.weg-etappen{list-style:none;margin:-1.75rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.weg-etappe{display:grid;gap:.45rem;align-content:start;padding:0 .2rem;cursor:default}
.weg-nr{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:.9rem;color:var(--marke);background:var(--papier);border:2px solid var(--linie-2);box-shadow:0 0 0 5px var(--papier);transition:background .35s,color .35s,border-color .35s,transform .35s cubic-bezier(.2,.8,.2,1.3),box-shadow .35s}
.weg-etappe b{font-family:var(--display);font-weight:800;color:var(--tinte);font-size:1.08rem;letter-spacing:-.02em;margin-top:.35rem}
.weg-etappe>span:not(.weg-nr){color:var(--leise);font-size:.92rem;line-height:1.5}
.weg-etappe .pille{justify-self:start}
.weg-etappe.war .weg-nr{background:#fbe4ee;border-color:var(--marke)}
.weg-etappe.an .weg-nr{color:#fff;background:var(--verlauf);border-color:transparent;transform:scale(1.15);box-shadow:0 0 0 5px var(--papier),0 0 0 9px rgba(221,66,140,.18),0 10px 24px -8px rgba(221,66,140,.7)}
@media (max-width:900px){
  .weg-spur{display:none}
  .weg-etappen{margin:0;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){.weg-etappen{grid-template-columns:1fr}}

/* Fahrplan neu */
.plan-neu{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:1.2rem;padding-top:2.6rem}
.plan-linie{position:absolute;left:0;right:0;top:.9rem;height:4px;border-radius:4px;background:var(--linie)}
.plan-linie i{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:var(--verlauf);box-shadow:0 0 16px rgba(221,66,140,.6);transition:width 1.8s cubic-bezier(.2,.7,.2,1) .2s}
.plan-neu.ist-da .plan-linie i{width:31%}
.etappe{position:relative;display:grid;gap:1rem;align-content:start;padding:clamp(1.3rem,2.6vw,1.9rem);border-radius:calc(var(--r-l) + .2rem);background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.etappe:hover{transform:translateY(-4px);box-shadow:var(--schatten-hoch)}
.etappe::before{content:"";position:absolute;top:calc(-1.6rem - 11px);left:1.6rem;width:22px;height:22px;border-radius:50%;background:var(--papier);border:3px solid var(--linie-2);box-sizing:border-box}
.etappe.jetzt::before{background:var(--verlauf);border-color:#fff;box-shadow:0 0 0 2px rgba(221,66,140,.5),0 0 18px rgba(221,66,140,.7)}
.etappe.naechstes::before{border-color:var(--magenta)}
.etappe.spaeter::before{border-style:dashed}
.etappe-kopf{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.etappe-nr{font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--marke)}
.etappe h3{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:900;letter-spacing:-.045em;line-height:1}
.etappe ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.etappe li{display:grid;grid-template-columns:1.2rem minmax(0,1fr);gap:.65rem;align-items:start;padding:.65rem .75rem;border-radius:.85rem;background:var(--grund);border:1px solid var(--linie);font-size:.95rem;line-height:1.4;color:var(--text)}
.stand{width:1.1rem;height:1.1rem;border-radius:50%;margin-top:.1rem;border:2px solid var(--linie-2);box-sizing:border-box}
.etappe.naechstes .stand{border-color:var(--magenta)}
.etappe.spaeter{background:var(--grund);border-style:dashed;box-shadow:none}
.etappe.spaeter li{background:var(--papier)}
.etappe.spaeter .stand{border-style:dashed}
.etappe.jetzt{color:#f6e6ef;border-color:transparent;background:radial-gradient(80% 70% at 100% 0%,rgba(242,105,108,.5),transparent 60%),radial-gradient(70% 80% at 0% 100%,rgba(156,84,161,.6),transparent 65%),linear-gradient(150deg,#151116,#0e0c0f 55%,#22131e);box-shadow:0 34px 70px -30px rgba(91,23,71,.75)}
.etappe.jetzt h3{color:#fff}
.etappe.jetzt .etappe-nr{color:#ffb3cf}
.etappe.jetzt li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#f6e6ef}
.etappe.jetzt .stand{border-color:rgba(255,255,255,.25);border-top-color:#ff9cc8;border-right-color:#ff9cc8}
.live{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--display);font-weight:800;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.12);padding:.35rem .7rem;border-radius:999px}
.live i{width:.55rem;height:.55rem;border-radius:50%;background:#5ef0b0}
.js .plan-neu .etappe li{transition:opacity .5s ease,transform .5s var(--ease)}
.js .plan-neu:not(.ist-da) .etappe li{opacity:.25;transform:translateY(8px)}
.plan-neu .etappe li:nth-child(2){transition-delay:.08s}.plan-neu .etappe li:nth-child(3){transition-delay:.16s}.plan-neu .etappe li:nth-child(4){transition-delay:.24s}
.plan-neu .naechstes li{transition-delay:.3s}.plan-neu .spaeter li{transition-delay:.5s}
@media (prefers-reduced-motion:no-preference){
  .etappe.jetzt::after{content:"";position:absolute;top:calc(-1.6rem - 18px);left:calc(1.6rem - 7px);width:36px;height:36px;border-radius:50%;border:2px solid rgba(221,66,140,.55);animation:spurPuls 2s ease-out infinite;pointer-events:none}
  .etappe.jetzt .stand{animation:drehen 1.3s linear infinite}
  .live i{animation:livePuls 1.6s ease-out infinite}
  @keyframes livePuls{0%{box-shadow:0 0 0 0 rgba(94,240,176,.7)}80%,100%{box-shadow:0 0 0 .55rem rgba(94,240,176,0)}}
  .etappe.jetzt{background-size:140% 140%;animation:etappeAurora 9s ease-in-out infinite alternate}
  @keyframes etappeAurora{from{background-position:0% 0%}to{background-position:100% 100%}}
}
@media (max-width:980px){
  .plan-neu{grid-template-columns:1fr;padding-top:0;padding-left:2.2rem}
  .plan-linie{left:.55rem;right:auto;top:0;bottom:0;width:4px;height:auto}
  .plan-linie i{inset:0 0 auto 0;width:100%;height:0;transition:height 1.8s cubic-bezier(.2,.7,.2,1) .2s}
  .plan-neu.ist-da .plan-linie i{width:100%;height:28%}
  .etappe::before{top:1.9rem;left:calc(-2.2rem + .55rem + 2px - 11px)}
  .etappe.jetzt::after{top:calc(1.9rem - 7px);left:calc(-2.2rem + .55rem + 2px - 18px)}
}

/* Team: heller, menschlicher, kräftigere Akzente */
.team-band{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#fff 0%,#fdf1f6 50%,#fff 100%)}
.team-band::before{content:"";position:absolute;z-index:-1;left:-12rem;top:10%;width:46rem;height:46rem;border-radius:50%;background:radial-gradient(closest-side,rgba(242,105,108,.14),transparent);pointer-events:none}
.team-band::after{content:"";position:absolute;z-index:-1;right:-14rem;bottom:-8rem;width:48rem;height:48rem;border-radius:50%;background:radial-gradient(closest-side,rgba(156,84,161,.12),transparent);pointer-events:none}
.team-band .team{margin-top:0;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center}
.team-foto{max-width:30rem;padding:6px;background:var(--verlauf);border-radius:calc(var(--r-l) + 6px);box-shadow:0 30px 60px -28px rgba(183,47,103,.55)}
.team-foto img{border-radius:var(--r-l);filter:brightness(1.12) saturate(1.1) contrast(1.02)}
.team-foto figcaption{left:6px;right:6px;bottom:6px;border-radius:0 0 var(--r-l) var(--r-l);background:linear-gradient(transparent,rgba(43,17,48,.45))}
.team-foto figcaption span{background:rgba(255,255,255,.88);color:var(--tinte)}
.team-text{gap:1.1rem}
.team-band .person{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:1.1rem;padding:1.2rem 1.3rem;border:2px solid transparent;background:linear-gradient(var(--papier),var(--papier)) padding-box,var(--verlauf) border-box;box-shadow:0 18px 40px -26px rgba(183,47,103,.5)}
.team-band .avatar{width:4.4rem;height:4.4rem;box-shadow:0 0 0 3px var(--papier),0 0 0 6px var(--magenta),0 10px 22px -8px rgba(221,66,140,.6);filter:brightness(1.08) saturate(1.06)}
.person-text{display:grid;gap:.55rem;min-width:0}
.person-kopf{display:flex;align-items:center;gap:.4rem .7rem;flex-wrap:wrap}
.person-kopf b{font-size:1.12rem}
.team-band .person .rolle{margin:0;color:#fff;background:var(--verlauf-tief);padding:.28rem .6rem;border-radius:999px;font-size:.64rem}
.person-text p{font-size:.95rem;color:var(--text);line-height:1.6}
.person-themen{list-style:none;margin:.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.person-themen li{font-family:var(--display);font-weight:700;font-size:.74rem;color:var(--marke);background:#fbe4ee;padding:.25rem .6rem;border-radius:999px}
@media (prefers-reduced-motion:no-preference){
  .team-foto{background-size:200% 200%;animation:verlaufFluss 6s ease-in-out infinite alternate}
  .team-band .person{background:linear-gradient(var(--papier),var(--papier)) padding-box,linear-gradient(105deg,#9c54a1,#dd428c,#f2696c,#dd428c,#9c54a1) border-box;background-size:100% 100%,250% 100%;animation:randFluss 7s ease-in-out infinite alternate}
  @keyframes randFluss{from{background-position:0 0,0% 0}to{background-position:0 0,100% 0}}
}
@media (max-width:760px){.team-band .team{grid-template-columns:1fr}.team-foto{max-width:none}}

/* Fragen mit Themen */
.faq-seite{display:grid;gap:1.1rem;align-content:start;min-width:0}
@media (min-width:901px){.faq-seite{position:sticky;top:7rem}}
.faq-filter{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.4rem}
.faq-filter button{font-family:var(--display);font-weight:700;font-size:.85rem;padding:.55rem .95rem;border-radius:999px;border:1.5px solid var(--linie-2);background:var(--papier);color:var(--tinte);cursor:pointer;min-height:2.6rem;transition:background .2s,color .2s,border-color .2s,transform .2s}
.faq-filter button:hover{border-color:var(--marke);color:var(--marke)}
.faq-filter button[aria-pressed="true"]{background:var(--verlauf-tief);border-color:transparent;color:#fff;box-shadow:0 8px 20px -10px rgba(183,47,103,.7)}
.faq-filter button:focus-visible{outline:3px solid var(--magenta);outline-offset:2px}
.faq details{transition:border-color .25s,box-shadow .25s,transform .25s}
.faq details:hover{border-color:var(--linie-2)}
.faq details[open]{border-color:transparent;background:linear-gradient(var(--papier),var(--papier)) padding-box,var(--verlauf) border-box;border:1.5px solid transparent}
.faq-antwort{overflow:hidden;transition:height .26s cubic-bezier(.2,.8,.2,1),opacity .26s ease}
.faq .faq-antwort p{padding:0 1.2rem .9rem;color:var(--text);line-height:1.65}
.faq .faq-antwort p:last-child{padding-bottom:1.25rem}
.faq-antwort a{font-family:var(--display);font-weight:700}
.faq summary::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--linie-2);flex:none;transition:background .25s,box-shadow .25s}
.faq details[open] summary::before{background:var(--magenta);box-shadow:0 0 0 4px rgba(221,66,140,.18)}
.faq summary{gap:.8rem}

/* Gründungsmitglied: mehr Bewegung */
.mitmachen::after{content:"";position:absolute;right:-12rem;top:-8rem;width:44rem;height:44rem;border-radius:50%;background:radial-gradient(closest-side,rgba(221,66,140,.16),transparent);pointer-events:none}
.formular-karte{--rot:0deg;isolation:isolate}
.formular-karte::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--rot),rgba(156,84,161,.35),#dd428c,#f2696c,rgba(156,84,161,.35) 60%,rgba(156,84,161,.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.form-fort{display:grid;gap:.4rem}
.form-fort-spur{position:relative;height:6px;border-radius:6px;background:var(--flaeche);overflow:hidden}
.form-fort-spur i{position:absolute;inset:0 auto 0 0;width:var(--f,0%);border-radius:inherit;background:var(--verlauf);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.form-fort small{font-family:var(--display);font-weight:700;font-size:.75rem;letter-spacing:.04em;color:var(--leise)}
.form-fort.voll small{color:var(--gut)}
.form-fort.voll + .feld input:not(:focus){border-color:var(--linie)}
.feld input[type=text],.feld input[type=email],.feld textarea{background-image:linear-gradient(var(--magenta),var(--magenta));background-size:0% 2px;background-repeat:no-repeat;background-position:50% 100%;transition:border-color .2s,background-color .2s,box-shadow .2s,background-size .35s cubic-bezier(.2,.8,.2,1)}
.feld input:focus,.feld textarea:focus{background-size:100% 2px}
.chip input:checked + span{animation:chipPop .35s cubic-bezier(.2,.8,.2,1.4)}
@keyframes chipPop{0%{transform:scale(.94)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.konfetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
.konfetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;animation:konfettiFall 2.4s cubic-bezier(.25,.6,.4,1) forwards}
@keyframes konfettiFall{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--x),520px) rotate(var(--r));opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .formular-karte::before{animation:randDreh 5s linear infinite}
  .form-fort.voll ~ .form-fort-spur,.form-fort.voll .form-fort-spur i{box-shadow:0 0 14px rgba(221,66,140,.6)}
  .vorteile .ico{animation:icoSchweben 4s ease-in-out infinite}
  .vorteile li:nth-child(2) .ico{animation-delay:-1s}.vorteile li:nth-child(3) .ico{animation-delay:-2s}.vorteile li:nth-child(4) .ico{animation-delay:-3s}
  .vorteile .ico svg path{stroke-dasharray:24;stroke-dashoffset:0;animation:hakenZiehen 4s ease-in-out infinite}
  @keyframes hakenZiehen{0%,8%{stroke-dashoffset:24}22%,100%{stroke-dashoffset:0}}
  .vorteile li:nth-child(2) .ico svg path{animation-delay:.4s}.vorteile li:nth-child(3) .ico svg path{animation-delay:.8s}.vorteile li:nth-child(4) .ico svg path{animation-delay:1.2s}
  .mitmachen::after{animation:orbWandern 14s ease-in-out infinite alternate}
  @keyframes orbWandern{from{transform:translate(0,0)}to{transform:translate(-8rem,6rem)}}
}
.stern-label.mittel b{font-size:1.04rem}
.stern-label.gross{padding:.5rem .9rem}
.team-band .person .pn,.team-band .person-themen .pn{display:inline;font-size:inherit;color:inherit}
.mitmachen::after{z-index:0}
.mitmachen .mit-raster{z-index:1}
.team-band .person:hover{border-color:transparent}

/* v16: Hero – Logo-Doppelschleife, breitere Bühne, gewichtete Stationen */
@media (min-width:901px){
  .hero-raster{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr)}
  .buehne{aspect-ratio:1.5/1;width:calc(100% + clamp(2rem,9vw,10rem));margin-right:calc(-1 * clamp(2rem,9vw,10rem))}
}
.hero::before{top:-4%;right:-18%;width:78vw;height:62vw;max-width:72rem;max-height:52rem;background:radial-gradient(closest-side,rgba(221,66,140,.17),rgba(156,84,161,.09) 55%,transparent 74%)}
.station{gap:.5rem}
.station span{display:grid;line-height:1.1;text-align:left}
.station small{font-family:var(--body);font-weight:700;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--marke)}
.station.kern{font-size:1.08rem;padding:.55rem 1.15rem .55rem .6rem;border:1.5px solid transparent;background:linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.94)) padding-box,var(--verlauf) border-box;box-shadow:0 18px 40px -16px rgba(183,47,103,.6);z-index:4!important}
.station.kern b{font-weight:900;letter-spacing:-.02em}
.station.kern i{width:1.05rem;height:1.05rem;box-shadow:0 0 0 4px rgba(221,66,140,.18),0 0 22px rgba(221,66,140,.7)}
.station.stufe2{font-size:.92rem;padding:.45rem .95rem .45rem .5rem;border:1.5px solid var(--linie-2);z-index:3!important}
.station.stufe2 i{width:.8rem;height:.8rem}
.station.klein{font-size:.74rem;padding:.32rem .65rem .32rem .4rem;z-index:2!important}
.station.klein i{width:.5rem;height:.5rem}
@media (prefers-reduced-motion:no-preference){
  .station.kern i,.station.stufe2 i{animation:stationPuls 2.4s ease-out infinite}
  .station.stufe2 i{animation-delay:-1.2s}
  @keyframes stationPuls{0%{box-shadow:0 0 0 0 rgba(221,66,140,.55),0 0 18px rgba(221,66,140,.6)}70%{box-shadow:0 0 0 .7rem rgba(221,66,140,0),0 0 18px rgba(221,66,140,.6)}100%{box-shadow:0 0 0 0 rgba(221,66,140,0),0 0 18px rgba(221,66,140,.6)}}
}
@media (max-width:900px){
  .buehne{aspect-ratio:1.35/1}
  .station.kern{font-size:.86rem;padding:.4rem .8rem .4rem .45rem}
  .station.stufe2{font-size:.76rem}
  .station.klein{font-size:.66rem}
  .station small{font-size:.55rem}
}
@media (max-width:520px){.station.klein{display:none!important}}

/* v16: Kreislauf schneller und lebendiger */
.kreis-funken{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.kreis-arm{will-change:transform}
.kreis-schweif{will-change:background}
.knoten-ico{position:relative;transition:background .2s ease,box-shadow .25s ease,transform .25s cubic-bezier(.2,.8,.2,1.25),border-color .2s ease}
.kreis-knoten.an .knoten-ico{transform:scale(1.18);box-shadow:0 0 0 6px rgba(221,66,140,.2),0 0 46px rgba(221,66,140,.85)}
.kreis-knoten:hover .knoten-ico{transform:scale(1.08)}
.kreis-knoten.an:hover .knoten-ico{transform:scale(1.2)}
.knoten-ico::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(255,170,210,.95);opacity:0;pointer-events:none}
.kreis-knoten.knall .knoten-ico::after{animation:knotenKnall .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes knotenKnall{from{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(2.1)}}
.kreis-kern::before{content:"";position:absolute;inset:6%;border-radius:50%;background:conic-gradient(from var(--a),rgba(156,84,161,0),rgba(221,66,140,.55),rgba(242,105,108,.15),rgba(156,84,161,0) 70%);-webkit-mask:radial-gradient(farthest-side,transparent 72%,#000 74%,#000 100%);mask:radial-gradient(farthest-side,transparent 72%,#000 74%,#000 100%);opacity:.9}
.kreis-kern{z-index:1}
.kreis-kern.wechsel{animation:kernPop .4s cubic-bezier(.2,.8,.2,1.3)}
@keyframes kernPop{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.kreis-kern.wechsel b,.kreis-panel.wechsel>*{animation:kreisRein2 .3s cubic-bezier(.2,.8,.2,1) both}
.kreis-panel.wechsel>*:nth-child(2){animation-delay:.03s}
.kreis-panel.wechsel>*:nth-child(3){animation-delay:.06s}
.kreis-panel.wechsel>*:nth-child(4){animation-delay:.08s}
.kreis-panel.wechsel>*:nth-child(5){animation-delay:.1s}
@keyframes kreisRein2{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
.panel-fortschritt i{transition:background .25s ease}
.panel-fortschritt i.an{box-shadow:0 0 12px rgba(242,105,108,.6)}
.kreis-panel{transition:border-color .3s ease,box-shadow .3s ease}
.kreis-panel.wechsel{border-color:rgba(255,170,210,.35);box-shadow:0 0 0 1px rgba(255,170,210,.12),0 30px 80px -40px rgba(221,66,140,.65)}
@media (prefers-reduced-motion:reduce){.kreis-funken{display:none}}

/* v16: Arbeitsspeicher – Systemfluss, neues Zeichen, Ringanzeige */
.trans-raster{align-items:center}
@media (max-width:900px){.trans-text{order:-1}}
.as-name .as-logo{display:block;line-height:0}
.as-name .as-logo svg{width:3.6rem;height:3.6rem;border-radius:1.1rem;box-shadow:0 10px 24px -12px rgba(183,47,103,.5),inset 0 0 0 1px var(--linie)}
.speicherring .zelle{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .speicherring .zelle.an{animation:tickWelle 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * 70ms)}
  @keyframes tickWelle{0%,70%,100%{opacity:1}35%{opacity:.45}}
  .speicherring .kernpunkt{transform-box:fill-box;transform-origin:center;animation:kernAtmen 2.4s ease-in-out infinite}
  @keyframes kernAtmen{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
}

/* Systemfluss statt Foto */
.fluss{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-l);padding:clamp(1.2rem,2.6vw,1.8rem);display:grid;gap:1.1rem;color:#f6e6ef;background:radial-gradient(70% 55% at 15% 8%,rgba(221,66,140,.34),transparent 70%),radial-gradient(60% 60% at 92% 96%,rgba(156,84,161,.4),transparent 70%),linear-gradient(160deg,#0b0a0c,#0e0c0f 60%,#070608);box-shadow:0 40px 80px -40px rgba(43,17,48,.6)}
.fluss::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.3px);background-size:18px 18px;-webkit-mask:linear-gradient(180deg,#000,transparent 85%);mask:linear-gradient(180deg,#000,transparent 85%)}
.fluss-kopf{display:flex;justify-content:space-between;gap:.4rem .8rem;flex-wrap:wrap;align-items:baseline}
.fluss-kopf b{font-family:var(--display);font-weight:800;font-size:1.05rem;color:#fff;letter-spacing:-.01em}
.fluss-kopf span{font-size:.75rem;color:#e0bfd3}
.fluss-schritte{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;position:relative}
.fluss-schritte::before{content:"";position:absolute;left:calc(.7rem + 1.55rem - 1px);top:1.8rem;bottom:1.8rem;width:2px;border-radius:2px;background:linear-gradient(180deg,#9c54a1,#dd428c 55%,#f2696c);opacity:.4}
.fluss-schritte::after{content:"";position:absolute;left:calc(.7rem + 1.55rem - 2px);top:1.8rem;bottom:1.8rem;width:4px;border-radius:4px;background:linear-gradient(180deg,transparent 0 38%,rgba(255,160,205,.95) 46%,#fff 50%,transparent 58% 100%);background-size:100% 190px;filter:drop-shadow(0 0 6px rgba(255,122,184,.9))}
.fluss-schritt{position:relative;display:grid;grid-template-columns:3.1rem minmax(0,1fr);gap:.9rem;align-items:start;padding:.75rem .8rem .75rem .7rem;border-radius:1rem;border:1px solid transparent;transition:background .45s ease,border-color .45s ease}
.fluss-knoten{position:relative;z-index:1;width:3.1rem;height:3.1rem;border-radius:1rem;display:grid;place-items:center;background:#2c1234;border:1px solid rgba(255,255,255,.14);color:#ffd0e4;transition:background .45s ease,box-shadow .45s ease,transform .45s cubic-bezier(.2,.8,.2,1.3),border-color .45s}
.fluss-knoten svg{width:1.45rem;height:1.45rem}
.fluss-knoten.logo-knoten{background:#fcf6f9;border-color:transparent}
.fluss-knoten.logo-knoten svg{width:1.8rem;height:1.8rem}
.fluss-schritt.an{background:rgba(255,255,255,.065);border-color:rgba(255,170,210,.22)}
.fluss-schritt.an .fluss-knoten{background:linear-gradient(135deg,#9c54a1,#dd428c 55%,#f2696c);border-color:transparent;color:#fff;transform:scale(1.07);box-shadow:0 0 0 5px rgba(221,66,140,.2),0 0 34px rgba(221,66,140,.75)}
.fluss-schritt.an .fluss-knoten.logo-knoten{background:#fff}
.fluss-inhalt{display:grid;gap:.22rem;min-width:0}
.fluss-inhalt small{font-family:var(--display);font-weight:800;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:#ff9cc8}
.fluss-inhalt>b{font-family:var(--display);font-weight:800;color:#fff;font-size:1.02rem;letter-spacing:-.01em}
.fluss-inhalt>span{font-size:.88rem;color:#e3cddb;line-height:1.5}
.fluss-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.3rem}
.fluss-chips i{font-style:normal;font-family:var(--display);font-weight:700;font-size:.72rem;padding:.24rem .58rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;white-space:nowrap}
.fluss-chips i.aus{background:linear-gradient(120deg,rgba(156,84,161,.4),rgba(242,105,108,.32));border-color:rgba(255,170,190,.45)}
.fluss-schalter{display:inline-flex;align-items:center;gap:.5rem;margin-top:.3rem;font-family:var(--display);font-weight:700;font-size:.76rem;color:#b9f0d7}
.schalter{position:relative;width:2.4rem;height:1.35rem;border-radius:999px;background:#1e7a57;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 14px rgba(30,122,87,.55)}
.schalter i{position:absolute;top:.15rem;left:.15rem;width:1.05rem;height:1.05rem;border-radius:50%;background:#fff;transform:translateX(1.05rem);transition:transform .35s cubic-bezier(.2,.8,.2,1.3)}
.fluss-wert{display:flex;align-items:baseline;gap:.55rem;margin-top:.2rem}
.fluss-wert b{font-family:var(--display);font-weight:900;font-size:1.7rem;letter-spacing:-.04em;line-height:1;background:linear-gradient(105deg,#ff9cc8,#f2696c);-webkit-background-clip:text;background-clip:text;color:transparent}
.fluss-wert span{font-size:.8rem;color:#e3cddb}
.fluss-rueck{display:flex;gap:.55rem;align-items:center;font-size:.84rem;color:#e0bfd3;margin:0;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.1)}
.fluss-rueck svg{width:1.05rem;height:1.05rem;flex:none;color:#ff9cc8}
@media (prefers-reduced-motion:no-preference){
  .fluss-schritte::after{animation:flussTropfen 2.2s linear infinite}
  @keyframes flussTropfen{from{background-position:0 -190px}to{background-position:0 0}}
  .fluss-schritt.an .fluss-chips i{animation:chipRein .45s cubic-bezier(.2,.8,.2,1) both}
  .fluss-schritt.an .fluss-chips i:nth-child(2){animation-delay:.08s}.fluss-schritt.an .fluss-chips i:nth-child(3){animation-delay:.16s}
  @keyframes chipRein{from{opacity:0;transform:translate3d(0,6px,0) scale(.94)}to{opacity:1;transform:none}}
  .fluss-schritt.an .schalter i{animation:schalterKlick .6s cubic-bezier(.2,.8,.2,1.3)}
  @keyframes schalterKlick{from{transform:translateX(0)}to{transform:translateX(1.05rem)}}
  .fluss-schritt.an .fluss-wert b{animation:wertPop .5s cubic-bezier(.2,.8,.2,1.3)}
  @keyframes wertPop{from{transform:scale(.8);opacity:.3}to{transform:none;opacity:1}}
  .puls-linie{stroke-dasharray:14;stroke-dashoffset:14;animation:pulsZeichnen 1.6s ease-in-out infinite}
  @keyframes pulsZeichnen{0%{stroke-dashoffset:14}55%,100%{stroke-dashoffset:-14}}
  .fluss-rueck svg{animation:drehen 6s linear infinite}
  @keyframes drehen{to{transform:rotate(-360deg)}}
}

/* Ringanzeige im Zellen-Stil */
.ringe svg{transform:none;filter:drop-shadow(0 10px 22px rgba(221,66,140,.22))}
.ringe .zelle{transition:opacity .35s ease,stroke-width .3s ease}
.ringe .zelle.an{transition-delay:calc(var(--i) * 26ms + 150ms)}
.cockpit.fertig .ringe .zelle{transition-delay:0s}
.js .cockpit:not(.da) .ringe .zelle.an{opacity:.1}
.ring-z{transition:opacity .3s ease}
.ring-z.matt{opacity:.22}
.ring-z.hell .zelle.an{stroke-width:15}
.ringe-glanz{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from var(--rot),transparent 0deg,rgba(255,255,255,.75) 14deg,transparent 34deg,transparent 360deg);-webkit-mask:radial-gradient(farthest-side,transparent 40%,#000 41%,#000 99%,transparent 100%);mask:radial-gradient(farthest-side,transparent 40%,#000 41%,#000 99%,transparent 100%);mix-blend-mode:soft-light;opacity:.9}
.ringe .mitte{gap:.15rem}
.mitte-logo{line-height:0;margin-bottom:.15rem}
.mitte-logo svg{width:1.9rem;height:1.9rem}
@media (prefers-reduced-motion:no-preference){
  .ringe-glanz{animation:randDreh 4.5s linear infinite}
  .ringe .zelle.kopf{animation:kopfPuls 1.6s ease-in-out infinite}
  @keyframes kopfPuls{0%,100%{stroke-width:12}50%{stroke-width:16}}
  .mitte-logo svg{animation:drehen 12s linear infinite}
}
.ring-legende .leg{display:grid;grid-template-columns:.8rem minmax(0,1fr);column-gap:.6rem;row-gap:.25rem;align-items:start;text-align:left;font:inherit;color:inherit;background:var(--papier);border:1px solid var(--linie);border-radius:var(--r-s);padding:.7rem .75rem;cursor:pointer;transition:border-color .25s,box-shadow .25s,transform .25s}
.ring-legende .leg i{width:.8rem;height:.8rem;border-radius:50%;margin-top:.3rem}
.ring-legende .leg span{color:var(--leise);font-size:.92rem}
.ring-legende .leg em{display:block;font-style:normal;font-size:.74rem;color:var(--leise)}
.ring-legende .leg b{grid-column:2;font-family:var(--display);font-weight:800;color:var(--tinte);font-variant-numeric:tabular-nums;font-size:1rem}
.ring-legende .leg:hover,.ring-legende .leg[aria-pressed="true"]{border-color:var(--linie-2);box-shadow:0 14px 30px -18px rgba(183,47,103,.55);transform:translateY(-2px)}
.ring-legende .leg[aria-pressed="true"]{background:linear-gradient(var(--papier),var(--papier)) padding-box,var(--verlauf) border-box;border-color:transparent}
.ring-legende .leg:focus-visible{outline:3px solid var(--magenta);outline-offset:2px}
.leg-hinweis{font-size:.75rem;color:var(--leise);text-align:center}
@media (max-width:520px){.ring-legende .leg{grid-template-columns:.8rem 1fr auto}.ring-legende .leg b{grid-column:auto}}
.woche i{position:relative;background:linear-gradient(180deg,#f2696c,#dd428c 45%,#9c54a1);background-size:100% 200%}
.woche i::after{content:attr(data-w);position:absolute;left:50%;bottom:calc(100% + .3rem);transform:translate(-50%,4px);font-family:var(--display);font-weight:800;font-size:.68rem;color:var(--tinte);white-space:nowrap;opacity:0;transition:opacity .25s,transform .25s}
.woche div:hover i::after,.woche div.heute i::after{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:no-preference){.woche i{animation:balkenFluss 3.6s ease-in-out infinite alternate}@keyframes balkenFluss{from{background-position:0 0}to{background-position:0 100%}}}

/* Speicher-Karte als breite Zeile */
.ram-karte.ram-breit{margin-top:1.2rem;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,1.1fr);gap:clamp(1rem,3vw,2.2rem);align-items:start;box-shadow:var(--schatten)}
.ram-breit .ram-sp1{display:grid;gap:1rem;align-content:start}
.ram-breit .ram-liste li:first-child{border-top:0;padding-top:0}
.ram-breit .ram-verlauf{margin-top:0;border-top:0;padding-top:0}
.ram-riegel i{border-radius:5px}
.ram-riegel i.an{box-shadow:0 0 10px rgba(221,66,140,.35)}
@media (max-width:980px){.ram-karte.ram-breit{grid-template-columns:1fr}.ram-breit .ram-verlauf,.ram-breit .ram-liste li:first-child{border-top:1px solid var(--linie);padding-top:.9rem}}

/* v16-ENDE */
/* v17-START */
/* ===== Fassung 17: „Kennst du das?“ mit Bildern, anklickbare Schritte, Rückmeldung bei jedem Klick ===== */

/* Jeder Klick ist sichtbar */
.knopf:active,.kanal:active,.kern-link:active,.station:active,.nav a:active,.ansicht-tabs button:active,.faq-filter button:active,.kw:active,.fb-knoepfe button:active,.kn-weiter:active,.weg-etappe:active,.fluss-schritt:active,.kreis-knoten:active,.ring-legende .leg:active{scale:.97}
.welle{position:absolute;border-radius:50%;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;background:rgba(221,66,140,.35);transform:scale(0);animation:welle .6s cubic-bezier(.2,.8,.2,1) forwards;z-index:0}
.knopf.haupt .welle,.kw[aria-pressed="true"] .welle,.fb-knoepfe button.an .welle{background:rgba(255,255,255,.45)}
@keyframes welle{to{transform:scale(var(--w,24));opacity:0}}
.wellen-rahmen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}

/* Kennst du das? */
.kennst{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(3.5rem,7vw,5.5rem);background:linear-gradient(180deg,#fff 0%,var(--grund) 100%);border-top:1px solid var(--linie)}
.kennst::before{content:"";position:absolute;z-index:-1;left:50%;top:-14rem;width:70rem;height:30rem;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(221,66,140,.12),transparent);pointer-events:none}
.kennst-kopf{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end;gap:1rem 3rem;margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.kennst-kopf>div{display:grid;gap:.9rem}
.kennst-kopf .lead{max-width:34rem}
@media (max-width:900px){.kennst-kopf{grid-template-columns:1fr}}
.kennst-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem}
.problem{--rot:0deg;position:relative;isolation:isolate;display:grid;grid-template-rows:auto 1fr;border-radius:calc(var(--r-l) + .3rem);background:var(--papier);box-shadow:var(--schatten);transition:transform .45s var(--ease),box-shadow .45s var(--ease);overflow:hidden}
.problem::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--rot),#9c54a1,#dd428c,#f2696c,#ffd3df,#9c54a1);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.55;transition:opacity .4s}
.problem:hover{transform:translateY(-6px);box-shadow:var(--schatten-hoch)}
.problem:hover::before{opacity:1}
.problem-bild{position:relative;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(80% 90% at 20% 10%,rgba(221,66,140,.34),transparent 60%),radial-gradient(70% 80% at 90% 100%,rgba(156,84,161,.42),transparent 65%),linear-gradient(160deg,#0b0a0c,#0e0c0f 55%,#060507)}
.problem-bild::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1.4px);background-size:22px 22px;opacity:.07;pointer-events:none}
.problem-bild svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.problem-nr-alt{position:absolute;left:1rem;top:1rem;z-index:2;font-family:var(--display);font-weight:900;font-size:.78rem;letter-spacing:.14em;color:#fff;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);padding:.3rem .65rem;border-radius:999px}
.problem-text{display:flex;flex-direction:column;gap:.75rem;padding:clamp(1.2rem,2.4vw,1.6rem)}
.problem-text .loesung{margin-top:auto}
.problem-text .ort{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:800;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--marke)}
.problem-text .ort em{font-style:normal;font-weight:900;font-size:.72rem;letter-spacing:.06em;color:#fff;background:var(--verlauf);padding:.22rem .55rem;border-radius:999px;box-shadow:0 8px 16px -8px rgba(221,66,140,.8)}
.problem-text .ort::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--linie-2),transparent)}
.problem-text h3{font-size:clamp(1.25rem,1.9vw,1.5rem);font-weight:900;line-height:1.12;letter-spacing:-.035em}
.problem-text>p{color:var(--leise);font-size:.97rem;line-height:1.6}
.loesung{display:grid;grid-template-columns:2rem 1fr;gap:.7rem;align-items:start;padding:.85rem .95rem;border-radius:var(--r-m);background:linear-gradient(135deg,#fdf0f6,#fbf5f8);border:1px solid var(--linie-2)}
.loesung i{width:2rem;height:2rem;border-radius:.7rem;display:grid;place-items:center;color:#fff;background:var(--verlauf);box-shadow:0 10px 20px -10px rgba(221,66,140,.8)}
.loesung i svg{width:1.05rem;height:1.05rem}
.loesung p{font-size:.94rem;color:var(--text);line-height:1.5}
.loesung b{font-family:var(--display);font-weight:800;color:var(--tinte);display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.1rem}
.problem .kern-link{margin-top:.2rem;text-decoration:none;align-self:flex-start;position:relative}
.problem:hover .kern-link svg{transform:translateX(4px)}
@media (max-width:1000px){.kennst-raster{grid-template-columns:1fr}.problem{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto}.problem-bild{aspect-ratio:auto;min-height:100%}}
@media (max-width:700px){.problem{grid-template-columns:1fr}.problem-bild{aspect-ratio:16/9}}
@media (prefers-reduced-motion:no-preference){.problem::before{animation:randDreh 7s linear infinite}.problem:nth-child(2)::before{animation-delay:-2.3s}.problem:nth-child(3)::before{animation-delay:-4.6s}}

.kennst-fuss{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;margin-top:clamp(1.6rem,3vw,2.2rem);padding:clamp(1.1rem,2.4vw,1.5rem) clamp(1.2rem,2.6vw,1.8rem);border-radius:calc(var(--r-l) + .3rem);background:linear-gradient(120deg,#0e0c0f,#1c1219 55%,#2c1426);color:#f6e6ef;box-shadow:var(--schatten)}
.kennst-fuss p{font-size:1.02rem;line-height:1.5;max-width:40rem;color:#f3dbe7}
.kennst-fuss p b{font-family:var(--display);font-weight:800;color:#fff;display:block;font-size:1.15rem;letter-spacing:-.02em}
.kennst-fuss .knopf-reihe{margin:0}

/* Bild 1: Fenster ordnen sich */
.fw{transform-box:fill-box;transform-origin:center;transform:translate(var(--cx),var(--cy)) rotate(var(--cr))}
.fw-ordnung{opacity:0}
.fw-maus{transform:translate(322px,146px)}
.laeuft .fw{animation:fwOrdnen 8s cubic-bezier(.65,0,.25,1) infinite;animation-delay:var(--d,0s)}
.laeuft .fw-ordnung{animation:fwSchild 8s ease infinite}
.laeuft .fw-maus{animation:fwMaus 8s cubic-bezier(.5,0,.2,1) infinite}
.laeuft .fw-klick{animation:fwKlick 8s ease infinite}
@keyframes fwOrdnen{0%,30%{transform:translate(var(--cx),var(--cy)) rotate(var(--cr))}44%,86%{transform:translate(var(--ox),var(--oy)) rotate(0deg)}100%{transform:translate(var(--cx),var(--cy)) rotate(var(--cr))}}
@keyframes fwSchild{0%,44%{opacity:0;transform:translateY(6px)}50%,84%{opacity:1;transform:none}92%,100%{opacity:0}}
@keyframes fwMaus{0%,6%{transform:translate(322px,146px)}24%,32%{transform:translate(60px,176px)}46%,100%{transform:translate(322px,146px)}}
@keyframes fwKlick{0%,27%{opacity:0;transform:scale(.4)}30%{opacity:.9;transform:scale(1)}40%,100%{opacity:0;transform:scale(1.8)}}
.fw-klick{transform-box:fill-box;transform-origin:center}

/* Bild 2: Prompts landen im Baukasten */
.pc-verlauf{animation:none}
.laeuft .pc-verlauf{animation:pcScroll 9s linear infinite}
@keyframes pcScroll{from{transform:translateY(0)}to{transform:translateY(-96px)}}
.pc-flug{opacity:0}
.pc-platz{opacity:.35}
.laeuft .pc-flug.f1{animation:pcF1 9s cubic-bezier(.5,0,.2,1) infinite}
.laeuft .pc-flug.f2{animation:pcF2 9s cubic-bezier(.5,0,.2,1) infinite}
.laeuft .pc-flug.f3{animation:pcF3 9s cubic-bezier(.5,0,.2,1) infinite}
@keyframes pcF1{0%{opacity:0;transform:translate(0,0) scale(.85)}5%{opacity:1;transform:translate(0,0) scale(1)}17%,90%{opacity:1;transform:translate(var(--tx),var(--ty)) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty))}}
@keyframes pcF2{0%,30%{opacity:0;transform:translate(0,0) scale(.85)}35%{opacity:1;transform:translate(0,0) scale(1)}47%,90%{opacity:1;transform:translate(var(--tx),var(--ty)) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty))}}
@keyframes pcF3{0%,60%{opacity:0;transform:translate(0,0) scale(.85)}65%{opacity:1;transform:translate(0,0) scale(1)}77%,90%{opacity:1;transform:translate(var(--tx),var(--ty)) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty))}}
.pc-zaehler tspan{opacity:0}
.pc-zaehler .z0{opacity:1}
.laeuft .pc-zaehler .z0{animation:pcZ0 9s steps(1) infinite}
.laeuft .pc-zaehler .z1{animation:pcZ1 9s steps(1) infinite}
.laeuft .pc-zaehler .z2{animation:pcZ2 9s steps(1) infinite}
.laeuft .pc-zaehler .z3{animation:pcZ3 9s steps(1) infinite}
@keyframes pcZ0{0%,16%{opacity:1}17%,100%{opacity:0}}
@keyframes pcZ1{0%,16%{opacity:0}17%,46%{opacity:1}47%,100%{opacity:0}}
@keyframes pcZ2{0%,46%{opacity:0}47%,76%{opacity:1}77%,100%{opacity:0}}
@keyframes pcZ3{0%,76%{opacity:0}77%,96%{opacity:1}97%,100%{opacity:0}}

/* Bild 3: Versprechen gegen echten Gewinn */
.kv-hype{stroke-dasharray:420;stroke-dashoffset:0}
.kv-balken rect{transform-box:fill-box;transform-origin:50% 100%}
.laeuft .kv-hype{animation:kvHype 8s ease-in-out infinite}
.laeuft .kv-balken rect{animation:kvBalken 8s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--i) * .18s)}
.laeuft .kv-pfeil{animation:kvPfeil 8s ease infinite}
@keyframes kvHype{0%{stroke-dashoffset:420;opacity:1}30%,62%{stroke-dashoffset:0;opacity:1}80%,100%{stroke-dashoffset:0;opacity:.25}}
@keyframes kvBalken{0%,20%{transform:scaleY(.05)}42%,90%{transform:scaleY(1)}100%{transform:scaleY(.05)}}
@keyframes kvPfeil{0%,45%{opacity:0;transform:translateY(8px)}55%,88%{opacity:1;transform:none}100%{opacity:0}}

/* Kern: Academy mit anklickbaren Schritten */
div.kern-karte{cursor:default}
.kern-weg.knoepfe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin:.3rem 0 0}
.kw{position:relative;overflow:hidden;display:flex;align-items:center;gap:.7rem;text-align:left;font:700 .98rem/1.25 var(--display);letter-spacing:-.01em;color:var(--tinte);padding:.75rem .85rem;border-radius:.95rem;background:var(--grund);border:1.5px solid var(--linie);cursor:pointer;min-height:3.2rem;transition:background .25s,border-color .25s,color .25s,box-shadow .3s,transform .2s}
.kw:hover{border-color:var(--linie-2);background:#fdf0f6}
.kw .kw-nr{width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;flex:none;font-size:.8rem;color:#fff;background:var(--verlauf);position:relative;z-index:1}
.kw span:last-child{position:relative;z-index:1}
.kw[aria-pressed="true"]{color:#fff;border-color:transparent;background:linear-gradient(120deg,#9c54a1 0%,#b72f67 60%,#c42f6c 100%);box-shadow:0 14px 28px -14px rgba(183,47,103,.8)}
.kw[aria-pressed="true"] .kw-nr{background:#fff;color:var(--marke)}
.kw-detail{display:grid;gap:.35rem;padding:1rem 1.1rem;border-radius:var(--r-m);background:linear-gradient(135deg,#fdf0f6,#fff);border:1px solid var(--linie-2);min-height:6.4rem}
.kw-detail .kd-kopf{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.kw-detail b{font-family:var(--display);font-weight:800;color:var(--tinte);font-size:1.05rem;letter-spacing:-.02em}
.kw-detail small{font-family:var(--display);font-weight:800;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--marke)}
.kw-detail p{color:var(--text);font-size:.95rem;line-height:1.55;max-width:none}
.kw-detail.neu>*{animation:kwRein .35s cubic-bezier(.2,.8,.2,1) both}
.kw-detail.neu>*:nth-child(2){animation-delay:.05s}
@keyframes kwRein{from{opacity:0;transform:translateY(6px)}}
.kern-karte a.kern-link{text-decoration:none;justify-self:start}
@media (max-width:520px){.kw{font-size:.86rem;padding:.6rem .6rem;gap:.5rem;min-height:3rem}.kw .kw-nr{width:1.55rem;height:1.55rem;font-size:.72rem}}
.kern-pfade{display:grid;gap:.5rem;margin-top:.2rem}
.kern-pfade>small{font-family:var(--display);font-weight:800;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--leise)}
.kern-pfade a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.4rem .8rem;padding:.72rem .9rem;border-radius:.9rem;border:1px solid var(--linie);text-decoration:none;color:var(--tinte);background:var(--papier);transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
.kern-pfade a:hover{border-color:var(--linie-2);transform:translateX(4px);box-shadow:0 14px 26px -20px rgba(183,47,103,.7)}
.kern-pfade i{width:.6rem;height:.6rem;border-radius:50%;background:var(--verlauf)}
.kern-pfade b{font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:-.01em;line-height:1.3}
.kern-pfade em{font-style:normal;font-size:.78rem;color:var(--marke);font-weight:700;background:#fbe4ee;padding:.22rem .6rem;border-radius:999px;white-space:nowrap}
@media (max-width:820px){.kern-pfade{display:none}}

/* Kern: Deskstella mit kleinem Startblatt */
.desk-mini{position:relative;display:grid;gap:.6rem;padding:.85rem;border-radius:var(--r-m);background:linear-gradient(160deg,#2a1030,#1d0b20);box-shadow:0 22px 40px -26px rgba(43,17,48,.9);color:#f6e6ef;overflow:hidden}
.desk-mini::after{content:"";position:absolute;right:-4rem;top:-4rem;width:12rem;height:12rem;border-radius:50%;background:radial-gradient(closest-side,rgba(221,66,140,.35),transparent);pointer-events:none}
.dm-kopf{display:flex;align-items:center;gap:.35rem;font-family:var(--display);font-weight:700;font-size:.74rem;color:#e7c9da}
.dm-kopf i{width:.5rem;height:.5rem;border-radius:50%;background:rgba(255,255,255,.25)}
.dm-kopf i:first-child{background:#f2696c}
.dm-kopf span{margin-left:.4rem}
.dm-kopf b{margin-left:auto;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.dm-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
.dm-raster span{height:2.1rem;border-radius:.55rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:.35rem;padding:0 .5rem;font-size:.68rem;font-weight:600;color:#f3dbe7;white-space:nowrap;overflow:hidden}
.dm-raster span::before{content:"";width:.7rem;height:.7rem;border-radius:.25rem;flex:none;background:var(--verlauf)}
.dm-fuss{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.dm-knopf{font-family:var(--display);font-weight:800;font-size:.74rem;color:#fff;padding:.42rem .8rem;border-radius:999px;background:linear-gradient(120deg,#9c54a1,#dd428c)}
.dm-fuss small{font-size:.72rem;color:#d9b8cb}
@media (prefers-reduced-motion:no-preference){
  .desk-mini.laeuft .dm-raster span{animation:dmKachel 6s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--i) * .12s + .4s)}
  .desk-mini.laeuft .dm-knopf{animation:dmKnopf 6s ease infinite}
}
@keyframes dmKachel{0%,6%{opacity:0;transform:translateY(8px) scale(.9)}16%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes dmKnopf{0%,4%{box-shadow:0 0 0 0 rgba(221,66,140,.7)}10%{box-shadow:0 0 0 8px rgba(221,66,140,0)}100%{box-shadow:0 0 0 0 rgba(221,66,140,0)}}

/* Weg in der Academy: anklickbar, bleibt stehen */
.weg-etappen{margin-top:-3.45rem}
.weg-kopf{padding-bottom:.9rem}
.weg-etappe{position:relative;cursor:pointer;padding:.85rem .8rem .9rem;border-radius:1rem;border:1.5px solid transparent;transition:background .25s,border-color .25s,box-shadow .3s}
.weg-etappe:hover{background:#fdf6f9;border-color:var(--linie)}
.weg-etappe.an{background:linear-gradient(160deg,#fdf0f6,#fff);border-color:var(--linie-2);box-shadow:0 18px 34px -24px rgba(183,47,103,.6)}
.weg-etappe.an b{color:var(--marke)}
.weg-etappe:focus-visible{outline:3px solid var(--magenta);outline-offset:2px}
.weg-hinweis{font-size:.85rem;color:var(--leise);display:inline-flex;align-items:center;gap:.4rem}
.weg-hinweis::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--verlauf)}
@media (max-width:900px){.weg-etappen{margin-top:0}.weg-kopf{padding-bottom:0}}

/* Smartphone-Knöpfe sind jetzt echte Knöpfe */
.fb-knoepfe button{padding:.6rem .5rem;border-radius:.9rem;background:var(--papier);font-family:var(--display);font-weight:700;font-size:.82rem;color:var(--tinte);text-align:center;border:0;box-shadow:inset 0 0 0 1px var(--linie);cursor:pointer;position:relative;overflow:hidden;transition:background .25s,color .25s,box-shadow .25s,transform .25s;min-height:2.6rem}
.fb-knoepfe button:hover{box-shadow:inset 0 0 0 1.5px var(--linie-2)}
.fb-knoepfe button.an{background:var(--verlauf);color:#fff;box-shadow:0 10px 22px -10px rgba(221,66,140,.7);transform:translateY(-2px)}

/* Community: Pinnwand mit echten Projekten */
.community-raster.mit-wand{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);max-width:none;align-items:center}
.wand{position:relative;min-height:25rem;display:grid;place-items:center}
.wand::before{content:"";position:absolute;inset:8% 6%;border-radius:2rem;background:radial-gradient(closest-side,rgba(221,66,140,.16),transparent);z-index:-1}
.wand-stapel{position:relative;width:min(100%,25rem);display:grid;gap:.9rem}
.wk{display:grid;grid-template-columns:2.8rem 1fr;gap:.85rem;align-items:center;padding:1rem 1.05rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.wk:nth-child(1){transform:rotate(-1.6deg) translateX(-.6rem)}
.wk:nth-child(2){transform:rotate(1.2deg) translateX(1rem)}
.wk:nth-child(3){transform:rotate(-.6deg) translateX(-.2rem);border:1.5px dashed var(--linie-2);background:linear-gradient(135deg,#fdf0f6,#fff)}
.wand:hover .wk{transform:none}
.wk .wk-bild{width:2.8rem;height:2.8rem;border-radius:.85rem;display:grid;place-items:center;background:var(--flaeche);overflow:hidden}
.wk .wk-bild img{width:100%;height:100%;object-fit:cover}
.wk .wk-bild svg{width:1.4rem;height:1.4rem;color:var(--marke)}
.wk small{font-family:var(--display);font-weight:800;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--marke)}
.wk b{font-family:var(--display);font-weight:800;color:var(--tinte);display:block;letter-spacing:-.02em;line-height:1.25}
.wk span{display:block;font-size:.88rem;color:var(--leise);line-height:1.45}
.wk-reaktion{display:flex;gap:.35rem;margin-top:.45rem;flex-wrap:wrap}
.wk-reaktion i{font-style:normal;font-family:var(--display);font-weight:700;font-size:.68rem;color:var(--marke);background:#fbe4ee;padding:.15rem .5rem;border-radius:999px}
.wand-notiz{font-size:.8rem;color:var(--leise);text-align:center;margin-top:.4rem}
@media (prefers-reduced-motion:no-preference){.wand-stapel{animation:wandSchweben 7s ease-in-out infinite}}
@keyframes wandSchweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:900px){.community-raster.mit-wand{grid-template-columns:1fr}.wand{min-height:0;padding-block:1rem}.wk:nth-child(1){transform:rotate(-1deg)}.wk:nth-child(2){transform:rotate(.8deg)}.wk:nth-child(3){transform:none}}

@media (prefers-reduced-motion:reduce){
  .fw{transform:translate(var(--ox),var(--oy))}
  .fw-ordnung{opacity:1}
  .pc-flug{opacity:1;transform:translate(var(--tx),var(--ty))}
  .pc-zaehler .z0{opacity:0}.pc-zaehler .z3{opacity:1}
  .welle{display:none}
}

/* Weniger Leerraum zwischen den Bereichen, damit mehr Inhalt auf einen Blick passt */
.band{padding-block:clamp(4rem,7vw,6.25rem)}
/* Deskstella-Fakten: Zahlen und Texte stehen in einer Flucht */
@media (min-width:621px){@supports (grid-template-columns:subgrid){.pz-fakten{grid-template-columns:auto 1fr}.pz-fakten li{grid-column:1 / -1;grid-template-columns:subgrid}}}

.fluss-schritt{cursor:pointer}
/* v17-ENDE */
/* v18-START */
/* ===== Fassung 18: Ankündigung, Mega-Menü, Claude-Guide, Spickzettel, Termine, Einladung ===== */

/* Ankündigungsleiste */
.ankuendigung{position:relative;z-index:51;background:linear-gradient(90deg,#fdf0f6 0%,#ffffff 50%,#fdf0f6 100%);border-bottom:1px solid var(--linie);font-size:.9rem;color:var(--text)}
.ankuendigung .wrap{display:flex;align-items:center;justify-content:center;gap:.4rem .8rem;padding-block:.5rem;padding-right:max(3rem,env(safe-area-inset-right,0px));flex-wrap:wrap;text-align:center}
.an-neu{font-family:var(--display);font-weight:900;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--verlauf);padding:.22rem .6rem;border-radius:999px;box-shadow:0 6px 14px -8px rgba(221,66,140,.9)}
.ankuendigung p{line-height:1.45}
.ankuendigung p b{font-family:var(--display);font-weight:800;color:var(--tinte)}
.an-link{font-family:var(--display);font-weight:700;font-size:.82rem;color:var(--tinte);text-decoration:none;background:var(--papier);border:1px solid var(--linie-2);padding:.32rem .85rem;border-radius:999px;transition:border-color .2s,color .2s,box-shadow .2s}
.an-link:hover{border-color:var(--marke);color:var(--marke);box-shadow:0 8px 18px -12px rgba(183,47,103,.6)}
.an-zu{position:absolute;right:max(10px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);width:2rem;height:2rem;border:0;border-radius:50%;background:transparent;color:var(--leise);cursor:pointer;display:grid;place-items:center}
.an-zu:hover{background:var(--flaeche);color:var(--tinte)}
.an-zu svg{width:1rem;height:1rem}
@media (max-width:620px){.ankuendigung p span{display:none}.ankuendigung{font-size:.85rem}}

/* Mega-Menü */
.nav-mega{position:static;display:flex;align-items:center}
.nav-mega-knopf{display:inline-flex;align-items:center;gap:.25rem;font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--tinte);background:transparent;border:0;padding:.55rem .7rem .55rem .8rem;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.nav-mega-knopf svg{width:1rem;height:1rem;transition:transform .3s var(--ease)}
.nav-mega-knopf:hover,.nav-mega[data-offen="true"] .nav-mega-knopf{background:var(--flaeche);color:var(--marke)}
.nav-mega[data-offen="true"] .nav-mega-knopf svg{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% - .2rem);left:50%;width:min(64rem,calc(100vw - 32px));transform:translate(-50%,8px);opacity:0;visibility:hidden;pointer-events:none;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);background:var(--papier);border:1px solid var(--linie);border-radius:1.4rem;box-shadow:0 2px 6px rgba(58,16,56,.06),0 40px 80px -30px rgba(58,16,56,.35);overflow:hidden;transition:opacity .22s var(--ease),transform .28s var(--ease),visibility 0s linear .28s;z-index:60}
.nav-mega[data-offen="true"] .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .22s var(--ease),transform .28s var(--ease),visibility 0s}
.mega small{display:block;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--leise);margin-bottom:.6rem}
.mega-ueberblick{padding:1.6rem 1.4rem;border-right:1px solid var(--linie);background:linear-gradient(180deg,#fff,#fdf6f9);display:grid;align-content:start;gap:.2rem}
.nav .mega a{display:block;white-space:normal;padding:.42rem .7rem;margin-inline:-.7rem;border-radius:.7rem;font-weight:500;font-size:.95rem;color:var(--tinte);background:transparent;line-height:1.35}
.nav .mega a:hover{background:var(--flaeche);color:var(--marke)}
.nav .mega a[aria-current="true"]{background:transparent;color:var(--tinte)}
.nav .mega a.mega-gross{padding:.55rem .7rem}
.mega-gross b{display:block;font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:-.02em;color:var(--tinte)}
.mega-gross span{display:block;font-size:.84rem;color:var(--leise)}
.nav .mega a.mega-alle{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;font-family:var(--display);font-weight:700;font-size:.86rem;color:var(--marke)}
.mega-alle svg{width:1rem;height:1rem}
.mega-spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;padding:1.6rem 1.6rem 1rem}
.mega-spalten>div{display:grid;align-content:start;gap:.05rem}
.mega a em{font-style:normal;font-family:var(--display);font-weight:800;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--verlauf);padding:.12rem .45rem;border-radius:999px;margin-left:.3rem;vertical-align:.12em}
.nav .mega a.mega-promo{grid-column:1 / -1;display:flex;align-items:center;gap:1rem;margin:0;padding:1rem 1.4rem;border-radius:0;border-top:1px solid var(--linie);background:linear-gradient(100deg,#0e0c0f,#1c1219 60%,#2c1426);color:#f6e6ef}
.nav .mega a.mega-promo:hover{color:#fff;background:linear-gradient(100deg,#331438,#561a52 60%,#7b2060)}
.mega-promo b{display:block;font-family:var(--display);font-weight:800;color:#fff}
.mega-promo span span{display:block;font-size:.86rem;color:#e7c9da}
.mega-promo-bild{flex:none;width:3rem;height:3rem;border-radius:.9rem;background:var(--verlauf);display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:.65rem;box-shadow:0 10px 24px -12px rgba(221,66,140,.9)}
.mega-promo-bild i{background:rgba(255,255,255,.9);border-radius:2px}
.mega-promo-bild i:nth-child(2){opacity:.6}.mega-promo-bild i:nth-child(3){opacity:.35}
@media (min-width:1061px) and (max-width:1280px){.nav-mega-knopf{padding:.5rem .45rem .5rem .55rem;font-size:.86rem}}
@media (max-width:1060px){
  .nav-mega{display:block}
  .nav-mega-knopf{width:100%;justify-content:space-between;padding:.85rem 1rem;font-size:1.02rem;border-radius:999px}
  .mega{position:static;transform:none;width:auto;opacity:1;visibility:visible;pointer-events:auto;display:none;grid-template-columns:1fr;border-radius:1rem;box-shadow:none;margin:.3rem 0 .6rem;transition:none}
  .nav-mega[data-offen="true"] .mega{display:grid;transform:none}
  .mega-ueberblick{border-right:0;border-bottom:1px solid var(--linie);padding:1rem}
  .mega-spalten{grid-template-columns:1fr 1fr;padding:1rem;gap:1rem}
  .nav .mega a{padding:.5rem .7rem;font-size:.95rem}
  .nav .mega a.mega-promo{padding:1rem}
}
@media (max-width:520px){.mega-spalten{grid-template-columns:1fr}}

/* Claude-Guide */
.guide{position:relative;overflow:hidden;isolation:isolate;background:var(--papier)}
.guide::before{content:"";position:absolute;z-index:-1;right:-12rem;top:-10rem;width:42rem;height:42rem;border-radius:50%;background:radial-gradient(closest-side,rgba(221,66,140,.1),transparent);pointer-events:none}
.guide-kopf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.4rem 3rem;align-items:end;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.guide-kopf-links{display:grid;gap:.9rem}
.guide-kopf-rechts{display:grid;gap:1rem}
.guide-zahlen{display:flex;gap:.6rem;flex-wrap:wrap}
.guide-zahlen span{display:inline-flex;align-items:baseline;gap:.35rem;font-size:.88rem;color:var(--leise);padding:.45rem .8rem;border-radius:999px;background:var(--grund);border:1px solid var(--linie)}
.guide-zahlen b{font-family:var(--display);font-weight:900;font-size:1.05rem;color:var(--tinte)}
.guide-fort{display:grid;gap:.35rem;max-width:26rem}
.gf-spur{display:block;height:6px;border-radius:6px;background:var(--flaeche);overflow:hidden}
.gf-spur i{display:block;height:100%;width:0;background:var(--verlauf);border-radius:inherit;transition:width .6s var(--ease)}
.guide-fort small{font-size:.82rem;color:var(--leise)}
.guide-suche{display:flex;align-items:center;gap:.8rem;padding:.95rem 1.1rem;border-radius:1rem;border:1.5px solid var(--linie);background:var(--papier);box-shadow:var(--schatten);transition:border-color .2s,box-shadow .2s;cursor:text}
.guide-suche:focus-within{border-color:var(--marke);box-shadow:0 0 0 4px rgba(221,66,140,.12),var(--schatten)}
.guide-suche svg{width:1.25rem;height:1.25rem;color:var(--leise);flex:none}
.guide-suche input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:600 1rem var(--display);color:var(--tinte);letter-spacing:.01em}
.guide-suche input::placeholder{color:#a58c9c;font-weight:500}
.guide-suche kbd{font:700 .78rem var(--display);color:var(--leise);border:1px solid var(--linie-2);border-bottom-width:2px;border-radius:.4rem;padding:.1rem .45rem;background:var(--grund)}
.guide-reiter{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;margin:1.1rem 0 1.6rem;padding-bottom:.2rem;border-bottom:1px solid var(--linie)}
.guide-reiter::-webkit-scrollbar{display:none}
.guide-reiter button,.guide-reiter .gr-link{position:relative;flex:none;display:grid;justify-items:center;gap:.45rem;padding:.8rem 1.1rem .9rem;border:0;background:transparent;cursor:pointer;color:var(--leise);font:800 .74rem var(--display);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-radius:.8rem .8rem 0 0;transition:color .2s,background .2s}
.guide-reiter svg{width:1.45rem;height:1.45rem}
.guide-reiter em{position:absolute;top:.4rem;right:.35rem;font-style:normal;font-size:.62rem;letter-spacing:0;color:var(--marke);background:#fbe4ee;border-radius:999px;padding:.05rem .4rem}
.guide-reiter button:hover,.guide-reiter .gr-link:hover{color:var(--tinte);background:var(--grund)}
.guide-reiter button[aria-pressed="true"]{color:var(--marke)}
.guide-reiter button[aria-pressed="true"]::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:-1px;height:3px;border-radius:3px;background:var(--verlauf)}
.guide-raster{display:grid;grid-template-columns:13.5rem minmax(0,1fr);gap:1.8rem;align-items:start}
.guide-filter{position:sticky;top:6.5rem}
.gf-details{display:grid;gap:1rem}
.gf-details summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.6rem;cursor:pointer;font-family:var(--display);font-weight:800;color:var(--tinte);font-size:1rem;padding:.2rem 0 .8rem;border-bottom:1px solid var(--linie)}
.gf-details summary::-webkit-details-marker{display:none}
.gf-summary-plus{display:none;font-size:.8rem;font-weight:700;color:var(--marke);border:1px solid var(--linie-2);padding:.2rem .65rem;border-radius:999px}
.guide-filter fieldset{border:0;margin:1.1rem 0 0;padding:0;display:grid;gap:.15rem}
.guide-filter legend{font-family:var(--display);font-weight:800;font-size:.95rem;color:var(--tinte);margin-bottom:.45rem;padding:0}
.gf-cb{display:flex;align-items:center;gap:.65rem;padding:.38rem .2rem;cursor:pointer;color:var(--text);font-size:.95rem;border-radius:.5rem}
.gf-cb input{appearance:none;-webkit-appearance:none;width:1.1rem;height:1.1rem;margin:0;border:1.5px solid var(--linie-2);border-radius:.32rem;background:var(--papier);display:grid;place-items:center;flex:none;cursor:pointer;transition:background .2s,border-color .2s}
.gf-cb input::after{content:"";width:.55rem;height:.3rem;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.gf-cb input:checked{background:var(--marke);border-color:var(--marke)}
.gf-cb input:checked::after{opacity:1}
.gf-cb input:focus-visible{outline:3px solid var(--magenta);outline-offset:2px}
.gf-cb:hover{color:var(--tinte);background:var(--grund)}
.gf-aktiv{display:flex;flex-wrap:wrap;gap:.35rem}
.gf-aktiv button{display:inline-flex;align-items:center;gap:.35rem;font:700 .78rem var(--display);color:var(--tinte);background:var(--flaeche);border:0;border-radius:999px;padding:.32rem .7rem;cursor:pointer}
.gf-aktiv button::after{content:"×";font-size:.95rem;line-height:1;color:var(--marke)}
.gf-reset{justify-self:start;font:700 .85rem var(--display);color:var(--marke);background:transparent;border:0;padding:.2rem 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.guide-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 1.3rem}
.gk{display:grid;grid-template-rows:auto 1fr;gap:.9rem;min-width:0}
.gk[hidden]{display:none!important}
.gk-vorschau{position:relative;display:block;width:100%;padding:0;border:0;border-radius:1.1rem;cursor:pointer;background:none;overflow:hidden;box-shadow:0 1px 2px rgba(58,16,56,.08),0 18px 36px -20px rgba(43,17,48,.55);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.gk-vorschau:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(58,16,56,.08),0 28px 50px -22px rgba(183,47,103,.5)}
.gk-vorschau:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}
.gk-text{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.gk-zeile{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:.3rem}
.gk-zeile h3{font-size:1.08rem;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.gk-bereich{flex:none;font:800 .64rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--marke)}
.gk-text>p{font-size:.92rem;color:var(--leise);line-height:1.5}
.gk-meta{display:flex;flex-wrap:wrap;gap:.35rem}
.gk-meta span{font:700 .72rem var(--display);color:var(--marke);background:#fbe4ee;border-radius:999px;padding:.18rem .6rem}
.gk-meta .gk-gelesen{display:none;color:var(--gut);background:var(--gut-bg)}
.gk.gelesen .gk-gelesen{display:inline-block}
.gk.gelesen .gk-vorschau::after{content:"✓";position:absolute;top:.7rem;right:.7rem;width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;font:900 .85rem var(--display);color:#fff;background:var(--gut);box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.gk-knoepfe{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:auto;padding-top:.2rem}
.gk-knopf{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.4rem;font:700 .86rem var(--display);padding:.6rem .95rem;border-radius:.7rem;cursor:pointer;border:1.5px solid var(--linie-2);background:var(--papier);color:var(--tinte);transition:border-color .2s,background .2s,color .2s,box-shadow .2s}
.gk-knopf svg{width:1rem;height:1rem}
.gk-knopf:hover{border-color:var(--marke);color:var(--marke)}
.gk-knopf.haupt{border-color:transparent;color:#fff;background:linear-gradient(120deg,#9c54a1 0%,#b72f67 60%,#c42f6c 100%);box-shadow:0 10px 22px -12px rgba(183,47,103,.8)}
.gk-knopf.haupt:hover{color:#fff;box-shadow:0 14px 28px -12px rgba(183,47,103,.9)}
.gk-knopf.kopiert{border-color:var(--gut);color:var(--gut);background:var(--gut-bg)}
.gk-knopf:active{scale:.97}
.guide-leer{display:grid;justify-items:start;gap:.5rem;padding:2rem;border-radius:var(--r-l);border:1.5px dashed var(--linie-2);background:var(--grund)}
.guide-leer b{font-family:var(--display);font-weight:800;color:var(--tinte);font-size:1.1rem}
.guide-leer span{color:var(--leise)}
.guide-hinweis{margin-top:1.6rem;font-size:.8rem;color:var(--leise);max-width:52rem}
@media (max-width:1180px){.guide-karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .guide-kopf{grid-template-columns:1fr}
  .guide-raster{grid-template-columns:1fr;gap:1.2rem}
  .guide-filter{position:static;border:1px solid var(--linie);border-radius:1rem;padding:.8rem 1rem;background:var(--grund)}
  .gf-details summary{border-bottom:0;padding:.2rem 0}
  .gf-details[open] summary{border-bottom:1px solid var(--linie);padding-bottom:.8rem}
  .gf-summary-plus{display:inline-block}
  .guide-filter fieldset{grid-template-columns:repeat(auto-fill,minmax(10rem,1fr))}
  .guide-filter legend{grid-column:1 / -1}
}
@media (max-width:620px){.guide-karten{grid-template-columns:1fr;gap:1.8rem}.guide-reiter button,.guide-reiter .gr-link{padding:.7rem .75rem .8rem;font-size:.68rem}}

/* Vorschaubilder */
.vs{position:relative;display:block;aspect-ratio:16/11;padding:1rem;overflow:hidden;text-align:left;font-family:var(--body);background:radial-gradient(90% 80% at 15% 0%,rgba(221,66,140,.38),transparent 60%),radial-gradient(80% 80% at 100% 100%,rgba(156,84,161,.45),transparent 65%),linear-gradient(160deg,#0b0a0c,#0e0c0f 55%,#060507)}
.vs::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.4px);background-size:20px 20px;opacity:.07;pointer-events:none}
.vs-fenster,.vs-term{position:relative;height:100%;border-radius:.8rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 40px -24px rgba(0,0,0,.8);overflow:hidden;display:flex;flex-direction:column;gap:.45rem;padding:0 0 .7rem;transition:transform .5s var(--ease)}
.gk-vorschau:hover .vs-fenster,.gk-vorschau:hover .vs-term{transform:translateY(-3px) scale(1.01)}
.vs-leiste{display:flex;align-items:center;gap:.28rem;padding:.45rem .6rem;background:rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.1)}
.vs-leiste i{width:.42rem;height:.42rem;border-radius:50%;background:rgba(255,255,255,.3)}
.vs-leiste i:first-child{background:#f2696c}
.vs-leiste span{margin-left:.35rem;font:700 .62rem var(--display);color:#e7c9da;letter-spacing:.02em}
.vs-blase{margin:0 .7rem;padding:.45rem .6rem;border-radius:.7rem;font-size:.66rem;line-height:1.4;color:#f6e6ef;display:grid;gap:.3rem}
.vs-blase.du{justify-self:end;max-width:84%;margin-left:auto;background:linear-gradient(120deg,#9c54a1,#dd428c);color:#fff;position:relative}
.vs-blase.ki{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);max-width:88%}
.vs-blase.ki b{font:800 .6rem var(--display);color:#ffb3cf;letter-spacing:.06em;text-transform:uppercase}
.vs-blase.schlecht{background:rgba(255,255,255,.12);color:#d9b8cb}
.vs-blase.schlecht s{text-decoration-color:#f2696c;text-decoration-thickness:2px}
.vs-blase.gut{box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.vs-mark{position:absolute;top:-.45rem;left:-.45rem;width:1.1rem;height:1.1rem;border-radius:50%;display:grid;place-items:center;font-style:normal;font:900 .6rem var(--display);color:#fff}
.vs-mark.nein{background:#d9485a}.vs-mark.ja{background:#1e7a57}
.vs .z{display:block;height:.38rem;width:var(--b,80%);border-radius:.3rem;background:rgba(255,255,255,.22)}
.vs .z.ki{background:rgba(242,105,108,.45)}
.vs-chips{display:flex;flex-wrap:wrap;gap:.25rem}
.vs-chips em{font-style:normal;font:700 .56rem var(--display);color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);padding:.12rem .4rem;border-radius:999px}
.vs-eingabe{margin:auto .7rem 0;display:flex;align-items:center;justify-content:space-between;padding:.4rem .55rem;border-radius:.6rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:.6rem;color:#c9a6bc}
.vs-eingabe i{width:1rem;height:1rem;border-radius:.35rem;background:var(--verlauf)}
.vs-pruef{margin:0 .7rem;display:grid;gap:.35rem;font-size:.64rem;color:#f6e6ef}
.vs-pruef b{font:800 .66rem var(--display);color:#fff}
.vs-pruef span{display:flex;align-items:center;gap:.4rem;padding:.3rem .45rem;border-radius:.5rem;background:rgba(255,255,255,.06)}
.vs-pruef i{font-style:normal;font:800 .54rem var(--display);letter-spacing:.04em;padding:.1rem .4rem;border-radius:999px;color:#fff;flex:none}
.vs-pruef i.sicher{background:#1e7a57}.vs-pruef i.wahr{background:#8a5300}.vs-pruef i.geraten{background:#b3261e}
.vs-pruef .vs-fazit{background:none;color:#ffb3cf;font-weight:700;padding:0}
.vs-split{display:grid;grid-template-columns:38% 1fr;gap:.55rem;margin:0 .7rem;flex:1;min-height:0}
.vs-seite,.vs-haupt{display:grid;align-content:start;gap:.3rem;min-width:0}
.vs-seite small,.vs-haupt small,.vs-liste small{font:800 .52rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:#b996ad}
.vs-seite span{font-size:.6rem;color:#e7c9da;padding:.25rem .4rem;border-radius:.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-seite span.an{background:rgba(255,255,255,.12);color:#fff;font-weight:700}
.vs-chatklein{padding-top:.2rem;gap:.4rem}
.vs-datei{font-size:.58rem;color:#fff;padding:.25rem .4rem;border-radius:.4rem;background:rgba(255,255,255,.1);border-left:3px solid #dd428c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-app{display:grid;gap:.28rem;padding:.5rem;border-radius:.6rem;background:#fff;color:var(--tinte);align-content:start}
.vs-app b{font:800 .64rem var(--display)}
.vs-app span{display:flex;justify-content:space-between;align-items:center;font-size:.56rem;padding:.2rem .35rem;border-radius:.35rem;background:var(--grund)}
.vs-app small{color:var(--leise)}
.vs-app em{font-style:normal;font-weight:700}
.vs-app strong{font:900 .95rem var(--display);background:var(--verlauf-text);-webkit-background-clip:text;background-clip:text;color:transparent;text-align:right}
.vs-liste{margin:0 .7rem;display:grid;gap:.2rem}
.vs-schalter{display:flex;justify-content:space-between;align-items:center;padding:.2rem .45rem;border-radius:.45rem;background:rgba(255,255,255,.06);font-size:.6rem;color:#f6e6ef}
.vs-schalter b{font-weight:600}
.vs-schalter i{width:1.5rem;height:.85rem;border-radius:999px;background:var(--verlauf);position:relative;flex:none}
.vs-schalter i::after{content:"";position:absolute;right:.1rem;top:.1rem;width:.65rem;height:.65rem;border-radius:50%;background:#fff}
.vs-schalter.eigen{border:1px dashed rgba(255,179,207,.6);background:rgba(221,66,140,.14)}
.vs-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin:0 .7rem}
.vs-kachel{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.4rem;align-items:center;padding:.45rem;border-radius:.6rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.vs-kachel i{grid-row:1 / 3;width:1.4rem;height:1.4rem;border-radius:.45rem;display:grid;place-items:center;font:900 .62rem var(--display);font-style:normal;color:#fff;background:var(--verlauf)}
.vs-kachel b{font:700 .62rem var(--display);color:#fff}
.vs-kachel em{font-style:normal;font-size:.52rem;color:#7fd8b0}
.vs-kachel.neu{border-style:dashed;border-color:rgba(255,179,207,.5)}
.vs-kachel.neu em{color:#ffb3cf}
.vs-kachel.neu i{background:rgba(255,255,255,.18)}
.vs-balken{display:block;height:.35rem;border-radius:.3rem;background:rgba(255,255,255,.14);overflow:hidden}
.vs-balken i{display:block;height:100%;width:64%;background:var(--verlauf);border-radius:inherit}
.vs-term{background:rgba(12,6,14,.72)}
.vt-inhalt{display:grid;gap:.3rem;padding:.2rem .75rem 0;font-family:ui-monospace,"Cascadia Code","SFMono-Regular",Consolas,monospace;font-size:.6rem;line-height:1.45;color:#e8d5e0}
.vt-z{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-z b{color:#ffb3cf;font-weight:700}
.vt-z.aus{color:#b996ad}
.vt-z.ok{color:#7fd8b0}
.vt-z.box{white-space:normal;justify-self:start;padding:.3rem .55rem;border:1px solid rgba(242,105,108,.6);border-radius:.4rem;color:#fff}
.vt-z.datei{white-space:normal;padding:.4rem .5rem;border-radius:.45rem;background:rgba(255,255,255,.07);border-left:3px solid #dd428c;color:#f6e6ef}
.vt-z.datei small{display:block;font:800 .5rem var(--display);letter-spacing:.12em;color:#b996ad;margin-bottom:.15rem}
.vt-z.status{justify-self:start;color:#333333;background:#ffb3cf;padding:.05rem .45rem;border-radius:.3rem;font-weight:700}
.vt-z.plan{white-space:normal;padding:.35rem .5rem;border-radius:.45rem;background:rgba(255,255,255,.07);color:#f6e6ef}
.vt-z.wahl{color:#fff;font-weight:700}
.vt-z.wahl2{color:#b996ad}
@media (prefers-reduced-motion:no-preference){
  .gk-vorschau:hover .vt-z.wahl{animation:wahlBlink 1.2s steps(2) infinite}
}
@keyframes wahlBlink{50%{color:#ffb3cf}}

/* Kapitelansicht */
.kapitel-dialog{padding:0;border:0;margin:0 0 0 auto;width:min(44rem,100vw);max-width:100vw;height:100dvh;max-height:100dvh;background:transparent;color:var(--text);overflow:visible}
.kapitel-dialog::backdrop{background:rgba(23,9,25,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.kapitel-dialog[open] .kd-rahmen{animation:kdRein .35s var(--ease)}
@keyframes kdRein{from{transform:translateX(24px);opacity:0}}
.kd-rahmen{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--papier);box-shadow:-30px 0 60px -30px rgba(23,9,25,.6);border-radius:1.4rem 0 0 1.4rem;overflow:hidden}
.kd-kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:calc(.9rem + env(safe-area-inset-top,0px)) max(1.4rem,env(safe-area-inset-right,0px)) .9rem 1.4rem;border-bottom:1px solid var(--linie)}
.kd-meta{display:flex;gap:.4rem;flex-wrap:wrap}
.kd-meta span{font:700 .72rem var(--display);color:var(--marke);background:#fbe4ee;border-radius:999px;padding:.2rem .65rem}
.kd-zu{width:2.6rem;height:2.6rem;border-radius:50%;border:0;background:var(--grund);color:var(--tinte);cursor:pointer;display:grid;place-items:center;flex:none}
.kd-zu:hover{background:var(--flaeche);color:var(--marke)}
.kd-zu svg{width:1.2rem;height:1.2rem}
.kd-inhalt{overflow-y:auto;overscroll-behavior:contain;padding:1.5rem max(1.4rem,env(safe-area-inset-right,0px)) 2rem 1.4rem;display:grid;grid-auto-rows:max-content;gap:1rem;align-content:start}
.kd-kicker{font:800 .72rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--marke)}
.kd-inhalt h2{font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:900;line-height:1.08;letter-spacing:-.04em}
.kd-darum{font-size:1.05rem;color:var(--text);line-height:1.65}
.kd-inhalt h3{font-size:1.05rem;font-weight:800;margin-top:.4rem}
.kd-schritte{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:.55rem}
.kd-schritte li{counter-increment:s;display:grid;grid-template-columns:2rem 1fr;gap:.7rem;align-items:start;padding:.75rem .85rem;border-radius:.9rem;background:var(--grund);border:1px solid var(--linie);line-height:1.5}
.kd-schritte li::before{content:counter(s);width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font:900 .85rem var(--display);color:#fff;background:var(--verlauf)}
.kd-code{border-radius:1rem;overflow:hidden;background:#1b0a1f;box-shadow:0 18px 40px -26px rgba(23,9,25,.9)}
.kd-code-kopf{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.55rem .6rem .55rem 1rem;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.08)}
.kd-code-kopf span{font:700 .78rem var(--display);color:#e7c9da}
.kd-kopieren{display:inline-flex;align-items:center;gap:.35rem;font:700 .78rem var(--display);color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:.55rem;padding:.4rem .7rem;cursor:pointer}
.kd-kopieren svg{width:.95rem;height:.95rem}
.kd-kopieren:hover{background:rgba(255,255,255,.18)}
.kd-kopieren.kopiert{background:#1e7a57;border-color:#1e7a57}
.kd-code pre{margin:0;padding:1rem 1.1rem;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,"Cascadia Code","SFMono-Regular",Consolas,monospace;font-size:.9rem;line-height:1.6;color:#f6e6ef}
.kd-boxen{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.kd-tipp,.kd-fehler{padding:.85rem 1rem;border-radius:.9rem;font-size:.92rem;line-height:1.5}
.kd-tipp{background:var(--gut-bg);color:#0f4d36}
.kd-fehler{background:var(--warn-bg);color:#5c3800}
.kd-tipp b,.kd-fehler b{display:block;font:800 .74rem var(--display);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.2rem}
.kd-unten{display:flex;align-items:center;justify-content:space-between;gap:.8rem 1.2rem;flex-wrap:wrap;padding-top:.4rem}
.kd-claude{display:inline-flex;align-items:center;gap:.4rem;font:700 .9rem var(--display);color:#fff;text-decoration:none;padding:.65rem 1rem;border-radius:.75rem;background:var(--tinte)}
.kd-claude:hover{background:#4a1747}
.kd-claude svg{width:1rem;height:1rem}
.kd-quelle{font-size:.82rem;color:var(--leise)}
.kd-fuss{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;padding:.9rem max(1.4rem,env(safe-area-inset-right,0px)) calc(.9rem + env(safe-area-inset-bottom,0px)) 1.4rem;border-top:1px solid var(--linie);background:var(--grund)}
.kd-gelesen{display:inline-flex;align-items:center;gap:.5rem;font:700 .88rem var(--display);color:var(--tinte);background:var(--papier);border:1.5px solid var(--linie-2);border-radius:.75rem;padding:.6rem .9rem;cursor:pointer}
.kd-gelesen::before{content:"";width:1rem;height:1rem;border-radius:.3rem;border:1.5px solid var(--linie-2)}
.kd-gelesen[aria-pressed="true"]{color:var(--gut);border-color:var(--gut);background:var(--gut-bg)}
.kd-gelesen[aria-pressed="true"]::before{background:var(--gut);border-color:var(--gut);box-shadow:inset 0 0 0 2px #fff}
.kd-nav{display:flex;gap:.4rem}
.kd-nav button{display:inline-flex;align-items:center;gap:.35rem;font:700 .88rem var(--display);color:var(--tinte);background:var(--papier);border:1.5px solid var(--linie);border-radius:.75rem;padding:.6rem .9rem;cursor:pointer}
.kd-nav button:hover{border-color:var(--marke);color:var(--marke)}
.kd-nav button:disabled{opacity:.4;cursor:default}
.kd-nav svg{width:1rem;height:1rem}
@media (max-width:620px){
  .kapitel-dialog{width:100vw;height:100dvh;margin:0}
  .kd-rahmen{border-radius:0}
  .kd-boxen{grid-template-columns:1fr}
}

/* Spickzettel */
.spick{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2rem 3rem;align-items:center;margin-top:clamp(3rem,6vw,4.5rem);padding:clamp(1.4rem,3vw,2.4rem);border-radius:calc(var(--r-l) + .5rem);background:linear-gradient(160deg,#fdf0f6,#fff 60%);border:1px solid var(--linie);scroll-margin-top:6.5rem}
.spick-text{display:grid;gap:.9rem;align-content:center}
.spick-text h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:900;letter-spacing:-.04em;line-height:1.08}
.spick-text p{color:var(--leise)}
.spick-text .kern-link{justify-self:start;text-decoration:none}
.spick-terminal{position:relative;border-radius:1.1rem;overflow:hidden;background:#140816;box-shadow:0 30px 60px -30px rgba(23,9,25,.9);min-width:0}
.st-kopf{display:flex;align-items:center;gap:1rem;padding:.6rem .8rem;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08);flex-wrap:wrap}
.st-punkte{display:flex;gap:.3rem}
.st-punkte i{width:.6rem;height:.6rem;border-radius:50%;background:rgba(255,255,255,.25)}
.st-punkte i:first-child{background:#f2696c}
.st-tabs{display:flex;gap:.25rem;flex-wrap:wrap}
.st-tabs button{font:700 .8rem var(--display);color:#c9a6bc;background:transparent;border:1px solid transparent;border-radius:.55rem;padding:.35rem .7rem;cursor:pointer}
.st-tabs button:hover{color:#fff;background:rgba(255,255,255,.06)}
.st-tabs button[aria-pressed="true"]{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16)}
.st-inhalt{padding:.5rem;max-height:23rem;overflow-y:auto}
.st-panel{display:grid;gap:.15rem}
.st-zeile{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) auto;gap:.8rem;align-items:center;width:100%;text-align:left;padding:.55rem .7rem;border-radius:.6rem;border:0;background:transparent;color:#e8d5e0;cursor:pointer;font:inherit}
.st-zeile code,.st-zeile kbd{font-family:ui-monospace,"Cascadia Code","SFMono-Regular",Consolas,monospace;font-size:.86rem;color:#ffb3cf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-zeile kbd{justify-self:start;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-bottom-width:2px;border-radius:.4rem;padding:.12rem .5rem}
.st-zeile span{font-size:.86rem;color:#c9a6bc;line-height:1.4}
.st-zeile em{font-style:normal;font:700 .7rem var(--display);color:#b996ad;opacity:0;transition:opacity .2s}
button.st-zeile:hover{background:rgba(255,255,255,.06)}
button.st-zeile:hover em,button.st-zeile:focus-visible em{opacity:1}
button.st-zeile.kopiert{background:rgba(30,122,87,.25)}
button.st-zeile.kopiert em{opacity:1;color:#7fd8b0}
.st-zeile.tasten{cursor:default;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.st-status{position:absolute;right:.8rem;bottom:.6rem;font:700 .74rem var(--display);color:#7fd8b0}
@media (max-width:900px){.spick{grid-template-columns:1fr}}
@media (max-width:520px){.st-zeile{grid-template-columns:1fr;gap:.15rem}.st-zeile em{display:none}.st-zeile.tasten{grid-template-columns:1fr}}

/* Termine */
.termine-kopf{display:flex;justify-content:space-between;align-items:end;gap:1rem 3rem;flex-wrap:wrap;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.termine-kopf>div{display:grid;gap:.9rem;max-width:40rem}
.termine-kopf .lead{max-width:30rem}
.termin-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem}
.termin{display:grid;grid-template-rows:auto 1fr;border-radius:calc(var(--r-l) + .2rem);overflow:hidden;background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.termin[hidden]{display:none}
.termin:hover{transform:translateY(-4px);box-shadow:var(--schatten-hoch)}
.termin-bild{position:relative;aspect-ratio:16/9;overflow:hidden}
.art-a{display:grid;grid-template-columns:1fr 1fr;background:#f4efe9}
.ta-links{display:grid;grid-template-rows:auto 1fr auto;padding:1.1rem 1.2rem;color:var(--tinte)}
.ta-marke{font:900 .9rem var(--display);letter-spacing:-.02em}
.ta-links strong{align-self:center;font:500 clamp(1.2rem,2.2vw,1.6rem)/1.15 var(--display);letter-spacing:-.03em}
.ta-links small{font-size:.72rem;color:var(--leise)}
.ta-rechts{position:relative;background:radial-gradient(60% 70% at 30% 30%,#3a62c8 0%,transparent 70%),radial-gradient(60% 60% at 80% 80%,#f28a52 0%,transparent 70%),radial-gradient(50% 50% at 70% 20%,#dd428c 0%,transparent 70%),#9c54a1}
.ta-rechts::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.75) 1.1px,transparent 1.5px);background-size:12px 12px;-webkit-mask:linear-gradient(115deg,transparent 10%,#000 45%,transparent 90%);mask:linear-gradient(115deg,transparent 10%,#000 45%,transparent 90%);opacity:.8}
.art-b{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto 1fr;background:#201a1f;color:#fff;padding:1.1rem 1.2rem;gap:.8rem}
.tb-text{grid-column:1 / -1;display:grid;gap:.15rem}
.tb-text strong{font:600 clamp(1.05rem,1.9vw,1.4rem)/1.2 var(--display);letter-spacing:-.02em}
.tb-text span{color:#b9adb6;font-size:.86rem}
.tb-streifen{border-radius:.5rem;background:linear-gradient(100deg,#f2a3c3 0%,#dd428c 30%,#9c54a1 55%,#3d2b3a 80%);filter:blur(8px) saturate(1.2);opacity:.9}
.tb-leute{display:grid;align-content:end;gap:.45rem}
.tb-leute span{display:grid;grid-template-columns:2.1rem 1fr;column-gap:.5rem;align-items:center}
.tb-leute img{grid-row:1 / 3;width:2.1rem;height:2.1rem;border-radius:.4rem;object-fit:cover}
.tb-leute b{font:700 .72rem var(--display);line-height:1.2}
.tb-leute small{font-size:.64rem;color:#b9adb6;line-height:1.2}
.tb-leute em{font-style:normal;font:700 .62rem var(--display);color:#ffb3cf;margin-top:.2rem}
.art-c,.art-d{display:grid;place-content:center;justify-items:center;gap:.4rem;text-align:center;color:#fff;background:radial-gradient(80% 80% at 20% 10%,rgba(221,66,140,.55),transparent 60%),radial-gradient(70% 80% at 90% 100%,rgba(156,84,161,.6),transparent 65%),linear-gradient(160deg,#0b0a0c,#0e0c0f 55%,#060507)}
.art-c strong,.art-d strong{font:800 1.2rem var(--display);letter-spacing:-.02em}
.art-c small,.art-d small{font-size:.78rem;color:#e7c9da}
.tc-ring svg{width:4.6rem;height:4.6rem}
.td-handy{width:3rem;height:5.2rem;border-radius:.8rem;border:2px solid rgba(255,255,255,.7);display:grid;align-content:center;gap:.3rem;padding:.4rem}
.td-handy i{height:.7rem;border-radius:.25rem;background:var(--verlauf)}
.td-handy i:nth-child(2){opacity:.7}.td-handy i:nth-child(3){opacity:.45}
.termin-text{display:grid;gap:.55rem;align-content:start;padding:1.2rem 1.3rem 1.3rem}
.termin-datum{justify-self:start;display:inline-flex;align-items:center;gap:.4rem;font:800 .72rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--tinte);background:var(--grund);border:1px solid var(--linie);border-radius:.55rem;padding:.3rem .6rem}
.termin-datum svg{width:1rem;height:1rem;color:var(--marke)}
.termin-text h3{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.termin-text p{font-size:.95rem;color:var(--leise);line-height:1.55}
.termin-erinnern{justify-self:start;background:none;border:0;padding:0;cursor:pointer;font-family:var(--display)}
.termin-mehr{display:flex;justify-content:center;margin-top:1.6rem}
.termin-mehr[hidden]{display:none}
@media (max-width:820px){.termin-raster{grid-template-columns:1fr}}
@media (max-width:420px){.art-a{grid-template-columns:1.2fr 1fr}.art-b{grid-template-columns:1fr}.tb-streifen{display:none}}

/* Einladung im Formular */
.einladung{display:grid;justify-items:center;gap:.25rem;text-align:center;margin:calc(-1 * clamp(1.3rem,3vw,2.2rem)) calc(-1 * clamp(1.3rem,3vw,2.2rem)) 1.4rem;padding:1.6rem 1.2rem 1.3rem;background:radial-gradient(70% 90% at 50% 0%,rgba(221,66,140,.35),transparent 70%),linear-gradient(160deg,#0e0c0f,#08070a);color:#f6e6ef;border-radius:calc(var(--r-l) + .3rem) calc(var(--r-l) + .3rem) 0 0}
.ein-logo{width:4.2rem;height:4.2rem;border-radius:1.1rem;background:#fff;display:grid;place-items:center;padding:.55rem;box-shadow:0 14px 30px -14px rgba(0,0,0,.7);margin-bottom:.4rem}
.ein-logo img{width:100%;height:auto}
.ein-zeile{font-size:.92rem;color:#e7c9da}
.ein-name{font:900 1.35rem var(--display);letter-spacing:-.02em;color:#fff}
.ein-status{display:flex;gap:.4rem 1rem;flex-wrap:wrap;justify-content:center;font-size:.82rem;color:#e7c9da;margin-top:.15rem}
.ein-status span{display:inline-flex;align-items:center;gap:.35rem}
.ein-status i{width:.55rem;height:.55rem;border-radius:50%;background:#d9b8cb}
.ein-status i.an{background:#3fbf7f;box-shadow:0 0 0 3px rgba(63,191,127,.25)}
@media (prefers-reduced-motion:no-preference){.ein-status i.an{animation:puls 2s var(--ease) infinite}}

@media (prefers-reduced-motion:reduce){
  .kapitel-dialog[open] .kd-rahmen{animation:none}
  .gk-vorschau,.gk-vorschau:hover,.termin:hover{transform:none}
}

/* v18-ENDE */
/* v19-START */
/* ===== Fassung 19: Website mit eigenen Unterseiten ===== */

/* Kopfzeile: breiter als der Inhalt, wie bei den großen Seiten. Platz für das Ressourcen-Menü */
.kopf .wrap{max-width:88rem}
.nav-mega.aktiv .nav-mega-knopf{color:var(--marke)}
.nav-mega.aktiv .nav-mega-knopf::after{content:"";position:absolute;left:.8rem;right:1.6rem;bottom:.2rem;height:2px;border-radius:2px;background:var(--verlauf)}
.nav-mega-knopf{position:relative}
@media (min-width:1281px){.nav{gap:.1rem}.nav a,.nav-mega-knopf{padding-left:.62rem;padding-right:.62rem}}
@media (min-width:1061px) and (max-width:1280px){.nav{gap:0}.nav a,.nav-mega-knopf{padding:.5rem .42rem;font-size:.84rem}.nav-mega-knopf svg{width:.9rem;height:.9rem}.kopf-cta{padding:.68rem .9rem;font-size:.84rem}.logo img{height:3.3rem}}
.nav .mega a[aria-current="page"]{color:var(--marke);background:var(--flaeche)}

/* Knopf oben rechts: zwischen 1061 und 1179 Pixeln kurze Beschriftung, damit alles in eine Zeile passt */
.cta-kurz{display:none}
@media (min-width:1061px) and (max-width:1179px){.kopf-cta .cta-lang{display:none}.kopf-cta .cta-kurz{display:inline}}

/* Startseite: Wege zu den Unterseiten */
.guide-seitenlinks{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.guide-seitenlinks a{display:inline-flex;align-items:center;gap:.45rem;font:700 .92rem var(--display);color:var(--tinte);text-decoration:none;padding:.7rem 1rem;border-radius:.8rem;border:1.5px solid var(--linie-2);background:var(--papier);transition:border-color .2s,color .2s,box-shadow .2s}
.guide-seitenlinks a:hover{border-color:var(--marke);color:var(--marke);box-shadow:0 12px 24px -16px rgba(183,47,103,.6)}
.guide-seitenlinks a.haupt{color:#fff;border-color:transparent;background:linear-gradient(120deg,#9c54a1 0%,#b72f67 60%,#c42f6c 100%)}
.guide-seitenlinks svg{width:1rem;height:1rem}
.kd-seite{display:inline-flex;align-items:center;gap:.35rem;font:700 .88rem var(--display);color:var(--marke);text-decoration:none;padding:.6rem .4rem}
.kd-seite:hover{text-decoration:underline;text-underline-offset:3px}
.ak-mehr,.termine-alle a{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none}
.ak-mehr{margin-top:1rem}
.termine-alle{display:flex;justify-content:center;margin-top:.9rem}
.fuss-raster{grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr))}
@media (max-width:900px){.fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))}.fuss-raster>div:first-child{grid-column:1 / -1}}

/* Unterseiten: Grundgerüst */
html,body{margin:0}
.unterseite{background:var(--papier)}
.unterseite main{display:block}
.seiten-kopf{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(2.4rem,5vw,4rem) clamp(1.8rem,3vw,2.6rem);background:linear-gradient(180deg,#fff 0%,var(--grund) 100%);border-bottom:1px solid var(--linie)}
.seiten-kopf::before{content:"";position:absolute;z-index:-1;right:-10rem;top:-14rem;width:46rem;height:46rem;border-radius:50%;background:radial-gradient(closest-side,rgba(221,66,140,.13),transparent);pointer-events:none}
.seiten-kopf .wrap{display:grid;gap:.9rem;justify-items:start}
.seiten-kopf h1{font-size:clamp(2.3rem,5.2vw,4rem);font-weight:900;line-height:1.02;letter-spacing:-.045em;max-width:52rem}
.seiten-kopf .lead{max-width:44rem}
.brotkrumen{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.86rem;color:var(--leise)}
.brotkrumen a{color:var(--leise);text-decoration:none}
.brotkrumen a:hover{color:var(--marke)}
.brotkrumen i{font-style:normal;color:var(--linie-2)}
.brotkrumen [aria-current]{color:var(--tinte);font-weight:600}
.seiten-band{padding-block:clamp(1.8rem,4vw,3rem) clamp(3.5rem,7vw,5.5rem)}
.seiten-band .guide-suche{margin-top:.4rem}

/* Schlanke Kopfbereiche wie bei bolt, Lovable und ElevenLabs: Titel, ein Satz, darunter sofort Suche und Reiter */
.seiten-kopf.kompakt{padding-block:clamp(1.3rem,2.6vw,2rem) clamp(.6rem,1.4vw,1rem);background:var(--papier);border-bottom:0}
.seiten-kopf.kompakt::before{display:none}
.seiten-kopf.kompakt .wrap{gap:.7rem;justify-items:stretch}
.seiten-kopf.kompakt .brotkrumen{justify-self:start}
.sk-zeile{display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem 2rem;flex-wrap:wrap}
.sk-text{display:grid;gap:.3rem;max-width:46rem;min-width:0}
.seiten-kopf.kompakt h1{font-size:clamp(2rem,3.6vw,2.75rem);line-height:1.05;letter-spacing:-.045em}
.seiten-kopf.kompakt .lead{font-size:1.04rem;color:var(--leise);line-height:1.6;max-width:44rem}
.seiten-kopf.kompakt .guide-zahlen{margin:0}
.seiten-kopf.galerie .guide-suche{margin-top:.4rem;padding:1.05rem 1.2rem}
.seiten-kopf.galerie .guide-reiter{margin:.3rem 0 0}
.seiten-kopf.galerie .termin-filter{margin:.4rem 0 .2rem}
.galerie-band{padding-top:clamp(1.3rem,2.6vw,1.9rem)}
.galerie-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.galerie-titel{font-size:1.3rem;font-weight:800;letter-spacing:-.025em}
.galerie-titel .gt-zahl{color:var(--leise);font-weight:600}
.gf-fort{display:grid;gap:.35rem;margin:.15rem .2rem .45rem}
.gf-fort small{font-size:.82rem;color:var(--leise)}
@media (max-width:620px){.sk-zeile .guide-zahlen{display:none}.seiten-kopf.galerie .guide-suche{padding:.85rem 1rem}}

/* Empfohlener Weg und Weiterleitungen */
.empfohlen{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:1.2rem 2.4rem;align-items:center;margin-top:3rem;padding:clamp(1.2rem,2.6vw,1.8rem);border-radius:calc(var(--r-l) + .3rem);background:linear-gradient(120deg,#fdf0f6,#fff);border:1px solid var(--linie)}
.empfohlen h2{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:900;letter-spacing:-.035em;margin-top:.5rem}
.empfohlen p{color:var(--leise);margin-top:.35rem}
.weg-schritte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;counter-reset:w}
.weg-schritt{position:relative;display:grid;gap:.25rem;align-content:start;padding:1rem;border-radius:1rem;background:var(--papier);border:1px solid var(--linie);text-decoration:none;color:var(--text);box-shadow:var(--schatten);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.weg-schritt:hover{transform:translateY(-3px);border-color:var(--linie-2);box-shadow:var(--schatten-hoch)}
.weg-schritt span{width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;font:900 .82rem var(--display);color:#fff;background:var(--verlauf);margin-bottom:.3rem}
.weg-schritt b{font-family:var(--display);font-weight:800;color:var(--tinte);line-height:1.25}
.weg-schritt small{font-size:.78rem;color:var(--leise)}
.weiter-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.4rem}
.weiter-karte{display:grid;gap:.35rem;padding:1.3rem 1.4rem;border-radius:calc(var(--r-l) + .2rem);border:1px solid var(--linie);background:var(--grund);text-decoration:none;color:var(--text);transition:transform .3s var(--ease),border-color .3s,background .3s}
.weiter-karte:hover{transform:translateY(-3px);border-color:var(--linie-2);background:#fff}
.weiter-karte small{font:800 .7rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--marke)}
.weiter-karte b{font-family:var(--display);font-weight:800;font-size:1.12rem;color:var(--tinte)}
.weiter-karte span{font-size:.92rem;color:var(--leise)}
.gk-zeile h3 a{color:inherit;text-decoration:none}
.gk-zeile h3 a:hover{color:var(--marke)}
a.gk-vorschau{display:block;text-decoration:none;color:inherit}
a.gk-knopf{text-decoration:none}
@media (max-width:1100px){.weg-schritte{grid-template-columns:repeat(2,minmax(0,1fr))}.empfohlen{grid-template-columns:1fr}}
@media (max-width:760px){.weiter-raster{grid-template-columns:1fr}}
@media (max-width:460px){.weg-schritte{grid-template-columns:1fr}}

/* Abschlussband */
.cta-band{padding-block:0 clamp(3.5rem,7vw,5.5rem)}
.cta-karte{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;padding:clamp(1.2rem,2.6vw,1.7rem) clamp(1.3rem,2.8vw,2rem);border-radius:calc(var(--r-l) + .3rem);background:linear-gradient(120deg,#fdf0f6 0%,#fff 55%,#fbe4ee 100%);border:1px solid var(--linie-2)}
.cta-karte b{display:block;font-family:var(--display);font-weight:900;font-size:1.25rem;letter-spacing:-.02em;color:var(--tinte)}
.cta-karte p{color:var(--leise);max-width:40rem;margin-top:.2rem}

/* Dokumentation: Kapitel und Befehle */
.doku{display:grid;grid-template-columns:15rem minmax(0,1fr) 12.5rem;gap:2.6rem;align-items:start;padding-block:clamp(1.6rem,3.5vw,2.6rem) clamp(3rem,6vw,4.5rem)}
.doku-befehle{grid-template-columns:14rem minmax(0,1fr)}
.doku-nav{position:sticky;top:6.2rem;max-height:calc(100vh - 7rem);overflow-y:auto;scrollbar-width:thin}
.dn-details summary{display:none;cursor:pointer;list-style:none;font:800 .95rem var(--display);color:var(--tinte);padding:.75rem 1rem;border-radius:.8rem;border:1px solid var(--linie);background:var(--grund)}
.dn-details summary::-webkit-details-marker{display:none}
.dn-details summary::after{content:"";float:right;width:.55rem;height:.55rem;margin-top:.35rem;border-right:2px solid var(--marke);border-bottom:2px solid var(--marke);transform:rotate(45deg);transition:transform .25s var(--ease)}
.dn-details[open] summary::after{transform:rotate(-135deg);margin-top:.6rem}
.dn-uebersicht{display:inline-block;font:700 .85rem var(--display);color:var(--marke);text-decoration:none;margin-bottom:1rem}
.dn-gruppe{display:grid;gap:.05rem;margin-bottom:1.2rem}
.dn-gruppe small{display:flex;align-items:center;gap:.4rem;font:800 .7rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--leise);margin-bottom:.35rem}
.dn-gruppe small svg{width:1rem;height:1rem;color:var(--marke)}
.dn-gruppe a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.92rem;color:var(--text);text-decoration:none;padding:.42rem .7rem;border-radius:.6rem;border-left:2px solid transparent;line-height:1.35}
.dn-gruppe a:hover{background:var(--grund);color:var(--tinte)}
.dn-gruppe a[aria-current="page"],.dn-gruppe a.aktiv{background:#fdf0f6;color:var(--marke);font-weight:700;border-left-color:var(--marke)}
.dn-gruppe a em{font-style:normal;font:700 .7rem var(--display);color:var(--leise)}
.doku-inhalt{min-width:0;display:grid;gap:1.1rem;align-content:start}
.doku-inhalt>.brotkrumen{margin-bottom:.2rem}
.doku-inhalt h1{font-size:clamp(2rem,4.2vw,3rem);font-weight:900;line-height:1.05;letter-spacing:-.045em}
.doku-inhalt section{display:grid;gap:.9rem;margin-top:1rem}
.doku-inhalt section h2{font-size:1.4rem;font-weight:900;letter-spacing:-.03em}
.doku-meta{display:flex;flex-wrap:wrap;gap:.4rem}
.doku-meta span{font:700 .78rem var(--display);color:var(--marke);background:#fbe4ee;border-radius:999px;padding:.25rem .7rem}
.doku-lead{font-size:1.15rem;line-height:1.7;color:var(--text);max-width:46rem}
.doku-gelesen{justify-self:start}
.doku-uebung{padding:1rem 1.15rem;border-radius:1rem;border:1.5px dashed var(--linie-2);background:#fdf6f9;line-height:1.6}
.doku-quellen{margin:0;padding-left:1.1rem;display:grid;gap:.3rem}
.doku-stand{font-size:.84rem;color:var(--leise)}
.doku-blaettern{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1.6rem}
.db-karte{display:grid;gap:.2rem;padding:1rem 1.15rem;border-radius:1rem;border:1px solid var(--linie);text-decoration:none;color:var(--text);transition:border-color .2s,box-shadow .2s}
.db-karte:hover{border-color:var(--linie-2);box-shadow:0 14px 28px -22px rgba(183,47,103,.6)}
.db-karte.weiter{text-align:right}
.db-karte small{font:700 .78rem var(--display);color:var(--marke)}
.db-karte b{font-family:var(--display);font-weight:800;color:var(--tinte)}
.doku-toc{position:sticky;top:6.2rem;display:grid;gap:.15rem;font-size:.88rem}
.doku-toc small{font:800 .7rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--leise);margin-bottom:.4rem}
.doku-toc a{color:var(--leise);text-decoration:none;padding:.3rem 0 .3rem .8rem;border-left:2px solid var(--linie)}
.doku-toc a:hover{color:var(--tinte)}
.doku-toc a.aktiv{color:var(--marke);border-left-color:var(--marke);font-weight:600}
.toc-fort{display:grid;gap:.35rem;margin-top:1.2rem}
.toc-fort small{font:600 .78rem var(--body);letter-spacing:0;text-transform:none;color:var(--leise);margin:0}
@media (max-width:1200px){.doku{grid-template-columns:14rem minmax(0,1fr)}.doku-toc{display:none}}
@media (max-width:900px){
  .doku,.doku-befehle{grid-template-columns:1fr;gap:1.2rem}
  .doku-nav{position:static;max-height:none;overflow:visible}
  .dn-details summary{display:block}
  .dn-details[open] summary{margin-bottom:1rem}
  .doku-blaettern{grid-template-columns:1fr}
  .db-karte.weiter{text-align:left}
}

/* Befehle */
.bz-treffer{font-size:.88rem;color:var(--leise);min-height:1.2em}
.bz-teil{margin-top:1.4rem}
.bz-teil[hidden]{display:none}
.bz-text{color:var(--leise);margin-top:-.4rem}
.bz-liste{display:grid;border:1px solid var(--linie);border-radius:1rem;overflow:hidden;background:var(--papier)}
.bz{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) auto;gap:.6rem 1.2rem;align-items:center;padding:.8rem 1rem;border-top:1px solid var(--linie)}
.bz:first-child{border-top:0}
.bz[hidden]{display:none}
.bz:hover{background:#fdf9fb}
.bz-befehl{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;min-width:0}
.bz code{font-family:ui-monospace,"Cascadia Code","SFMono-Regular",Consolas,monospace;font-size:.88rem;color:#7a1a45;background:#fbeef4;border:1px solid #f3d6e3;padding:.22rem .5rem;border-radius:.45rem;white-space:pre-wrap;word-break:break-word}
.bz-tag{font:700 .68rem var(--display);color:var(--leise);background:var(--grund);border:1px solid var(--linie);padding:.12rem .45rem;border-radius:999px}
.bz p{font-size:.94rem;color:var(--text);line-height:1.5}
.bz-kopieren{display:inline-flex;align-items:center;gap:.35rem;font:700 .8rem var(--display);color:var(--tinte);background:var(--papier);border:1.5px solid var(--linie-2);border-radius:.6rem;padding:.42rem .7rem;cursor:pointer;white-space:nowrap}
.bz-kopieren svg{width:.95rem;height:.95rem}
.bz-kopieren:hover{border-color:var(--marke);color:var(--marke)}
.bz-kopieren.kopiert{border-color:var(--gut);color:var(--gut);background:var(--gut-bg)}
.bz-tasten{display:flex;gap:.3rem;flex-wrap:wrap}
.bz-tasten kbd{font:700 .82rem ui-monospace,Consolas,monospace;color:var(--tinte);background:var(--grund);border:1px solid var(--linie-2);border-bottom-width:3px;border-radius:.45rem;padding:.18rem .55rem}
.bz.warnung{background:var(--schlecht-bg)}
.bz.warnung code{color:var(--schlecht);background:#fff;border-color:#f3c9c3}
.bz-nav a.aktiv{background:#fdf0f6;color:var(--marke);font-weight:700;border-left-color:var(--marke)}
@media (max-width:760px){.bz{grid-template-columns:1fr;gap:.35rem}.bz-kopieren{justify-self:start}}

/* Vorlagen: Vorschaubild */
.vs--vorlage{display:grid;place-items:center;padding:1.1rem}
.vs--vorlage[data-kat="mail"]{background:linear-gradient(var(--wink,135deg),#dd428c 0%,#f2696c 100%)}
.vs--vorlage[data-kat="planung"]{background:linear-gradient(var(--wink,135deg),#9c54a1 0%,#dd428c 100%)}
.vs--vorlage[data-kat="recherche"]{background:linear-gradient(var(--wink,135deg),#fbe4ee 0%,#f3c1dc 55%,#e3a6d6 100%)}
.vs--vorlage[data-kat="content"]{background:linear-gradient(var(--wink,135deg),#f2696c 0%,#f9a77c 100%)}
.vs--vorlage[data-kat="vibe"]{background:linear-gradient(var(--wink,135deg),#9c54a1 0%,#f2696c 100%)}
.vs--vorlage[data-kat="code"]{background:linear-gradient(var(--wink,135deg),#b72f67 0%,#9c54a1 100%)}
.vv-karte{position:relative;display:grid;gap:.55rem;width:100%;max-width:19rem;padding:.85rem .95rem;border-radius:.85rem;background:#fff;color:var(--tinte);box-shadow:0 24px 40px -22px rgba(0,0,0,.85);transform:rotate(var(--kipp,-1.2deg));transition:transform .45s var(--ease)}
.gk-vorschau:hover .vv-karte{transform:rotate(0) translateY(-3px)}
.vv-kopf{display:flex;align-items:center;gap:.45rem}
.vv-kopf svg{width:1.05rem;height:1.05rem;color:var(--marke)}
.vv-kopf b{font:800 .62rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--marke)}
.vv-text{font-size:.76rem;line-height:1.5;color:var(--text)}
.vv-text mark,.vk-ersetzen mark,.kd-code pre mark{background:#fbe4ee;color:var(--marke);border-radius:.25rem;padding:0 .15rem;font-weight:700}
.vv-fuss{display:flex;gap:.3rem}
.vv-fuss em{font-style:normal;font:700 .58rem var(--display);color:var(--leise);background:var(--grund);border-radius:999px;padding:.12rem .45rem}
.vk-ersetzen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.vk-ersetzen li{font-size:.9rem}
.kd-hinweis{font-size:.8rem;color:var(--leise)}

/* Termine-Seite */
.termin-filter{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.4rem}
.termin-filter button{font:700 .86rem var(--display);color:var(--tinte);background:var(--papier);border:1.5px solid var(--linie);border-radius:999px;padding:.5rem 1rem;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.termin-filter button:hover{border-color:var(--linie-2)}
.termin-filter button[aria-pressed="true"]{color:#fff;border-color:transparent;background:var(--verlauf-tief)}
.vergangen{margin-top:3rem;display:grid;gap:1rem}
.vergangen h2{font-size:1.5rem;font-weight:900;letter-spacing:-.03em}
.vergangen-leer{display:grid;gap:.3rem;padding:1.6rem;border-radius:var(--r-l);border:1.5px dashed var(--linie-2);background:var(--grund)}
.vergangen-leer b{font-family:var(--display);font-weight:800;color:var(--tinte)}
.vergangen-leer span{color:var(--leise)}

/* Neuigkeiten */
.neu-liste{display:grid;gap:0;max-width:62rem}
.neu-eintrag{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:1.2rem 2.4rem;padding-block:2rem;border-top:1px solid var(--linie)}
.neu-eintrag:first-child{border-top:0;padding-top:.4rem}
.neu-datum{display:grid;gap:.4rem;align-content:start;position:sticky;top:6.5rem}
.neu-datum time{font:800 .95rem var(--display);color:var(--tinte)}
.neu-datum span{justify-self:start;font:800 .7rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--verlauf);border-radius:999px;padding:.2rem .6rem}
.neu-text{display:grid;gap:.7rem}
.neu-text h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:900;letter-spacing:-.035em;line-height:1.15}
.neu-text p{color:var(--leise)}
.neu-text ul{margin:0;padding-left:1.15rem;display:grid;gap:.4rem}
@media (max-width:760px){.neu-eintrag{grid-template-columns:1fr;gap:.6rem}.neu-datum{position:static;grid-auto-flow:column;justify-content:start;align-items:center;gap:.7rem}}

/* Kleinigkeiten */
a.termin-erinnern{text-decoration:none}
.dn-gruppe a.gelesen::after{content:"✓";flex:none;font:800 .8rem var(--display);color:var(--gut)}
.bz-nav a.leer{opacity:.45}
.fuss .mail{overflow-wrap:anywhere}
@media (max-width:520px){.fuss-raster{gap:1.6rem 1.2rem}}
@media (max-width:1060px){.nav-mega.aktiv .nav-mega-knopf::after{display:none}}

@media (max-width:760px){.kapitel-dialog .kd-hinweis{display:none}}

/* Vorschaubilder im Stil von Lovable: kräftige Markenverläufe statt dunklem Lila.
   claude.ai erscheint hell wie im Original, Terminals bleiben dunkel wie im Original */
.vs::before{opacity:.16}
.vs--chat{background:linear-gradient(135deg,#dd428c 0%,#f2696c 100%)}
.vs--vergleich{background:linear-gradient(135deg,#9c54a1 0%,#dd428c 100%)}
.vs--pruefen{background:linear-gradient(135deg,#f2696c 0%,#f9a77c 100%)}
.vs--projekt{background:linear-gradient(140deg,#fbe4ee 0%,#f3c1dc 55%,#e3a6d6 100%)}
.vs--artefakt{background:linear-gradient(135deg,#9c54a1 0%,#f2696c 100%)}
.vs--schalter{background:linear-gradient(135deg,#dd428c 0%,#9c54a1 100%)}
.vs--konnektor{background:linear-gradient(140deg,#f6e7ef 0%,#e9c6e4 55%,#d3a3dc 100%)}
.vs--erinnerung{background:linear-gradient(135deg,#f9a77c 0%,#e86aa6 100%)}
.vs--terminal{background:linear-gradient(135deg,#b72f67 0%,#9c54a1 100%)}
.vs--projekt::before,.vs--konnektor::before,.vs--vorlage[data-kat="recherche"]::before{background-image:radial-gradient(rgba(183,47,103,.5) 1px,transparent 1.4px);opacity:.12}
.vs-fenster{background:#fffdfc;border:1px solid rgba(255,255,255,.9);box-shadow:0 26px 44px -24px rgba(58,16,56,.6)}
.vs-fenster .vs-leiste{background:#f8f2f5;border-bottom:1px solid #efe3ea}
.vs-fenster .vs-leiste i{background:#e3d4dd}
.vs-fenster .vs-leiste i:first-child{background:#f2696c}
.vs-fenster .vs-leiste span{color:#7d6676}
.vs-fenster .vs-blase{color:var(--text)}
.vs-fenster .vs-blase.du{color:#fff}
.vs-fenster .vs-blase.ki{background:#f8f2f5;border:1px solid #efe3ea}
.vs-fenster .vs-blase.ki b{color:var(--marke)}
.vs-fenster .vs-blase.schlecht{background:#f3ecef;color:#8d7685}
.vs-fenster .vs-blase.gut{box-shadow:0 0 0 2px rgba(30,122,87,.5)}
.vs-fenster .z{background:rgba(43,17,48,.13)}
.vs-fenster .z.ki{background:rgba(221,66,140,.32)}
.vs-fenster .vs-chips em{color:var(--tinte);background:#fff;border:1px solid #ead7e2}
.vs-fenster .vs-eingabe{background:#fff;border:1px solid #ead7e2;color:#9a8592}
.vs-fenster .vs-pruef{color:var(--text)}
.vs-fenster .vs-pruef b{color:var(--tinte)}
.vs-fenster .vs-pruef span{background:#f8f2f5}
.vs-fenster .vs-pruef .vs-fazit{background:none;color:var(--marke)}
.vs-fenster .vs-seite small,.vs-fenster .vs-haupt small,.vs-fenster .vs-liste small{color:#9a8592}
.vs-fenster .vs-seite span{color:#6b6b6b}
.vs-fenster .vs-seite span.an{background:#fbe4ee;color:var(--marke)}
.vs-fenster .vs-datei{color:var(--tinte);background:#f8f2f5}
.vs-fenster .vs-app{border:1px solid #efe3ea;box-shadow:0 12px 24px -16px rgba(58,16,56,.45)}
.vs-fenster .vs-schalter{background:#f8f2f5;color:var(--text)}
.vs-fenster .vs-schalter.eigen{border:1px dashed #e7a1c9;background:#fdf0f6}
.vs-fenster .vs-kachel{background:#f8f2f5;border:1px solid #efe3ea}
.vs-fenster .vs-kachel b{color:var(--tinte)}
.vs-fenster .vs-kachel em{color:var(--gut)}
.vs-fenster .vs-kachel.neu{border-color:#e7a1c9}
.vs-fenster .vs-kachel.neu em{color:var(--marke)}
.vs-fenster .vs-kachel.neu i{background:#e9d7e1;color:var(--marke)}
.vs-fenster .vs-balken{background:#efe3ea}
.vs-term{background:#17131a;border:1px solid rgba(255,255,255,.14);box-shadow:0 26px 44px -22px rgba(23,9,25,.75)}

/* v19-ENDE */
/* v20-START */
/* ===== Fassung 20: Community, Konnektoren, Anleitungen, 7-Tage-Challenge ===== */

/* Gemeinsamer Einstieg wie bei Lovable: zentriert, groß, ruhig */
.cm-held{position:relative;overflow:hidden;padding-block:clamp(2.4rem,6vw,4.8rem) clamp(2rem,4vw,3rem);background:radial-gradient(60rem 30rem at 50% -12%,#fdeef5,transparent 70%),var(--papier);text-align:center}
.cm-held .wrap{display:grid;justify-items:center;gap:1.3rem}
.cm-held .brotkrumen{justify-self:center}
.cm-pille{display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.3rem;border-radius:999px;background:var(--papier);border:1px solid var(--linie);box-shadow:0 10px 30px -18px rgba(58,16,56,.35);font:700 1rem var(--display);color:var(--tinte);text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s}
.cm-pille svg{width:1.1rem;height:1.1rem}
.cm-pille:hover{transform:translateY(-2px);box-shadow:0 16px 36px -18px rgba(183,47,103,.5)}
.cm-held h1{font-size:clamp(2.8rem,7.4vw,5.9rem);font-weight:900;line-height:.98;letter-spacing:-.055em;max-width:14ch;margin-inline:auto}
.cm-lead{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.6;color:var(--leise);max-width:40rem;margin-inline:auto}
.cm-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
.knopf.cm-dunkel{color:#fff;background:var(--tinte);box-shadow:0 12px 26px -14px rgba(43,17,48,.8)}
.knopf.cm-dunkel:hover{background:#45193f}
.cm-kopf{display:grid;gap:.7rem;max-width:46rem;margin-bottom:2rem;justify-items:start}
.cm-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 3.5rem;align-items:start}
.cm-zwei .cm-kopf{margin-bottom:0}
.cm-klein{font-size:1rem;font-weight:800;margin-top:.6rem}
.cm-haken{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.cm-haken li{position:relative;padding-left:1.7rem;line-height:1.5}
.cm-haken li::before{content:"✓";position:absolute;left:0;top:0;font-weight:900;color:var(--gut)}
.mail-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.mail-zeile .mail{font:800 1.02rem var(--display);color:var(--tinte);user-select:all}
@media (max-width:900px){.cm-zwei{grid-template-columns:1fr}}

/* Community: Foto im Rahmen mit schwebenden Hinweisen */
.cm-bild{position:relative;width:min(100%,46rem);margin-top:1.4rem;padding:1rem 2.6rem 0}
.cm-rahmen{position:relative}
.cm-foto{margin:0;padding:.7rem;border-radius:1.6rem;background:var(--papier);box-shadow:0 30px 60px -30px rgba(58,16,56,.45),0 0 0 1px var(--linie);transform:rotate(-2deg)}
.cm-foto img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 74%;border-radius:1.1rem}
.cm-chip{position:absolute;display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem .6rem .6rem;border-radius:1rem;background:rgba(255,255,255,.96);box-shadow:0 18px 36px -18px rgba(58,16,56,.55);border:1px solid var(--linie);text-align:left}
.cm-chip svg{width:2.1rem;height:2.1rem;padding:.42rem;border-radius:.65rem;color:#fff;background:var(--verlauf);flex:none}
.cm-chip b{display:block;font:800 .88rem var(--display);color:var(--tinte)}
.cm-chip small{display:block;font-size:.76rem;color:var(--leise)}
.cm-chip.c1{left:-2.2rem;top:10%;transform:rotate(-3deg)}
.cm-chip.c2{right:-2.2rem;top:48%;transform:rotate(2.5deg)}
.cm-chip.c3{left:10%;bottom:-1.3rem;transform:rotate(1.5deg)}
.cm-foto-text{margin-top:2.6rem;font-size:.92rem;color:var(--leise)}
@media (prefers-reduced-motion:no-preference){
  .cm-chip{animation:cmSchweben 6s ease-in-out infinite}
  .cm-chip.c2{animation-delay:-2s}.cm-chip.c3{animation-delay:-4s}
}
@keyframes cmSchweben{50%{translate:0 -6px}}
@media (max-width:620px){
  .cm-bild{padding:.4rem .2rem 0}
  .cm-rahmen{display:grid;gap:.5rem;justify-items:center}
  .cm-foto-text{margin-top:1rem}
  .cm-foto{transform:none}
  .cm-chip{position:static;transform:none!important;animation:none!important;width:max-content;max-width:100%}
}

/* Text, der sich beim Scrollen füllt */
.cm-fuellen{padding-block:clamp(3rem,8vw,6.5rem)}
.fuell-text{max-width:58rem;font:800 clamp(1.6rem,3.6vw,3rem)/1.24 var(--display);letter-spacing:-.035em;color:var(--tinte);text-wrap:pretty}
.js .fuell-text .w{color:#dccbd5;transition:color .35s var(--ease)}
.js .fuell-text .w.an{color:var(--tinte)}
.fuell-chip{display:inline-grid;place-items:center;width:1.6em;height:1.2em;vertical-align:-.16em;margin:0 .08em;border-radius:.34em;background:var(--papier);border:1px solid var(--linie);box-shadow:0 8px 18px -12px rgba(58,16,56,.45)}
.fuell-chip svg{width:.62em;height:.62em;color:var(--marke)}

/* Community: Wege, Kacheln, Treffen, Richtlinien, Einladen */
.cm-wege{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.cm-weg{display:grid;gap:.6rem;align-content:start;padding:1.4rem;border-radius:calc(var(--r-l) + .2rem);background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten);transition:transform .3s var(--ease),box-shadow .3s}
.cm-weg:hover{transform:translateY(-3px);box-shadow:var(--schatten-hoch)}
.cm-weg-ico svg{width:2.7rem;height:2.7rem;padding:.62rem;border-radius:.9rem;color:#fff;background:var(--verlauf)}
.cm-weg h3{font-size:1.15rem;font-weight:800}
.cm-weg p{color:var(--leise);font-size:.95rem;line-height:1.55}
.cm-weg .kern-link{margin-top:.3rem;text-decoration:none}
.cm-kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.cm-kachel{display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;row-gap:.15rem;align-items:center;padding:1.15rem 1.3rem;border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie);text-decoration:none;color:var(--text);transition:border-color .2s,transform .3s var(--ease)}
.cm-kachel:hover{border-color:var(--linie-2);transform:translateY(-2px)}
.cm-kachel-ico{grid-row:1 / 3}
.cm-kachel-ico svg{width:2.5rem;height:2.5rem;padding:.58rem;border-radius:.8rem;background:#fbe4ee;color:var(--marke)}
.cm-kachel b{font-family:var(--display);font-weight:800;color:var(--tinte)}
.cm-kachel>span:last-child{font-size:.9rem;color:var(--leise);line-height:1.45}
.tr-karte{display:grid;gap:1rem;padding:1.5rem;border-radius:calc(var(--r-l) + .3rem);background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten-hoch)}
.tr-kopf{display:flex;align-items:center;gap:.8rem}
.tr-kopf svg{width:2.7rem;height:2.7rem;padding:.62rem;border-radius:.9rem;color:#fff;background:var(--verlauf);flex:none}
.tr-kopf b{display:block;font:800 1.1rem var(--display);color:var(--tinte)}
.tr-kopf small{color:var(--leise)}
.tr-agenda{list-style:none;margin:0 0 0 .45rem;padding:0;display:grid;border-left:2px solid var(--linie-2)}
.tr-agenda li{position:relative;display:grid;gap:.15rem;padding:.1rem 0 1.1rem 1.3rem}
.tr-agenda li::before{content:"";position:absolute;left:-.48rem;top:.35rem;width:.85rem;height:.85rem;border-radius:50%;background:var(--verlauf);box-shadow:0 0 0 3px var(--papier)}
.tr-zeit{font:800 .72rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--marke)}
.tr-agenda b{font-family:var(--display);font-weight:800;color:var(--tinte)}
.tr-agenda span:last-child{color:var(--leise);font-size:.95rem;line-height:1.5}
.tr-karte .kern-link{text-decoration:none}
.rl-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.rl-regel{position:relative;display:grid;gap:.55rem;align-content:start;padding:1.3rem;border-radius:var(--r-l);background:var(--grund);border:1px solid var(--linie)}
.rl-nr{position:absolute;top:.8rem;right:1rem;font:900 2rem var(--display);color:#efd9e5;letter-spacing:-.04em}
.rl-ico svg{width:2.4rem;height:2.4rem;padding:.52rem;border-radius:.75rem;background:var(--papier);color:var(--marke);border:1px solid var(--linie)}
.rl-regel h3{font-size:1.03rem;font-weight:800;padding-right:2rem}
.rl-regel p{font-size:.93rem;color:var(--leise);line-height:1.5}
.rl-melden{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:1.4rem;padding:1.2rem 1.4rem;border-radius:var(--r-l);border:1.5px dashed var(--linie-2);background:#fdf6f9}
.rl-melden b{font-family:var(--display);font-weight:800;color:var(--tinte)}
.rl-melden p{color:var(--leise);max-width:36rem}
.cm-einladen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.4rem 3rem;align-items:center;padding:clamp(1.4rem,3vw,2.2rem);border-radius:calc(var(--r-l) + .4rem);background:linear-gradient(120deg,#fdf0f6,#fff 60%,#fbe4ee);border:1px solid var(--linie)}
.cm-einladen .cm-kopf,.cm-einladen>div:first-child{margin:0;display:grid;gap:.6rem}
@media (max-width:1060px){.cm-wege,.rl-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.cm-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}.cm-einladen{grid-template-columns:1fr}}
@media (max-width:560px){.cm-wege,.rl-raster,.cm-kacheln{grid-template-columns:1fr}}

/* Teilen ohne Web-Share */
.teilen{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.teilen-titel{flex-basis:100%;font:800 .72rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--leise)}
.teilen-knopf{display:inline-flex;align-items:center;gap:.45rem;font:700 .9rem var(--display);color:var(--tinte);background:var(--papier);border:1.5px solid var(--linie-2);border-radius:999px;padding:.6rem 1rem;text-decoration:none;cursor:pointer;transition:border-color .2s,color .2s,transform .2s}
.teilen-knopf:hover{border-color:var(--marke);color:var(--marke);transform:translateY(-1px)}
.teilen-knopf svg{width:1rem;height:1rem}
.teilen-knopf.kopiert{border-color:var(--gut);color:var(--gut);background:var(--gut-bg)}
.teilen.klein .teilen-titel{display:none}
.teilen.klein .teilen-knopf{padding:.42rem .78rem;font-size:.82rem}
.kap-teilen{margin-top:1.2rem;padding:1rem 1.15rem;border-radius:1rem;background:var(--grund);border:1px solid var(--linie)}

/* Konnektoren */
.kn-held{background:radial-gradient(60rem 28rem at 50% -12%,#f6e7ef,transparent 70%),var(--papier)}
.kn-held h1{max-width:16ch}
.kn-emp-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:2rem 3.5rem;align-items:center}
.kn-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.4rem}
.kn-chip{display:inline-flex;align-items:center;gap:.6rem;padding:.55rem 1rem .55rem .55rem;border-radius:999px;background:var(--papier);border:1px solid var(--linie);font:700 .98rem var(--display);color:var(--tinte)}
.kn-logo{display:inline-grid;place-items:center;flex:none;width:2.6rem;height:2.6rem;border-radius:.8rem;font:900 .92rem var(--display);letter-spacing:-.02em;color:#fff;background:var(--f,#b72f67);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 8px 16px -10px rgba(58,16,56,.6)}
.kn-logo.klein{width:1.9rem;height:1.9rem;border-radius:.6rem;font-size:.7rem}
.kn-logo.gross{width:3.4rem;height:3.4rem;border-radius:1rem;font-size:1.08rem}
.kn-grafik{position:relative;display:grid;grid-template-columns:auto minmax(2rem,1fr) minmax(0,1.5fr);align-items:center;padding:1.6rem;border-radius:calc(var(--r-l) + .4rem);background:linear-gradient(140deg,#fdf0f6,#fff 50%,#f6e7ef);border:1px solid var(--linie);min-height:18rem}
.kn-quellen{position:relative;z-index:1;display:grid;gap:1.4rem}
.kn-linien{width:100%;height:12rem;overflow:visible}
.kn-linien path{fill:none;stroke:var(--linie-2);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:4 5}
@media (prefers-reduced-motion:no-preference){.kn-linien path{animation:knFluss 1.2s linear infinite}}
@keyframes knFluss{to{stroke-dashoffset:-18}}
.kn-chat{position:relative;z-index:1;display:grid;gap:.6rem;padding:0 0 .9rem;border-radius:1rem;background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten-hoch);overflow:hidden;text-align:left}
.kn-chat-kopf{display:flex;align-items:center;gap:.3rem;padding:.5rem .7rem;background:#f8f2f5;border-bottom:1px solid #efe3ea;font:700 .7rem var(--display);color:#7d6676}
.kn-chat-kopf i{width:.45rem;height:.45rem;border-radius:50%;background:#e3d4dd}
.kn-chat-kopf i:first-child{background:#f2696c}
.kn-blase{margin:0 .8rem;padding:.55rem .7rem;border-radius:.8rem;font-size:.84rem;line-height:1.45}
.kn-blase.du{justify-self:end;color:#fff;background:linear-gradient(120deg,#9c54a1,#dd428c)}
.kn-blase.ki{background:#f8f2f5;border:1px solid #efe3ea;color:var(--text)}
.kn-blase.ki b{display:block;font:800 .66rem var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--marke)}
.aw-liste{display:grid;gap:clamp(2.4rem,5vw,4rem)}
.aw{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.6rem 3.5rem;align-items:center}
.aw.gedreht .aw-text{order:2}
.aw-label{font:800 .74rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--leise)}
.aw h3{font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:900;letter-spacing:-.035em;line-height:1.1;margin:.5rem 0 .7rem}
.aw p{color:var(--leise);font-size:1.05rem;line-height:1.65}
.aw-karte{position:relative;display:grid;gap:.75rem;padding:clamp(1.4rem,3.5vw,2.6rem);border-radius:1.6rem;overflow:hidden}
.aw-a{background:linear-gradient(135deg,#f2696c,#dd428c 45%,#9c54a1)}
.aw-b{background:linear-gradient(135deg,#9c54a1,#dd428c 55%,#f9a77c)}
.aw-c{background:linear-gradient(135deg,#f9a77c,#e86aa6 50%,#c0569b)}
.aw-d{background:linear-gradient(135deg,#b72f67,#9c54a1 60%,#e0587a)}
.aw-karte::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 50% at 82% 8%,rgba(255,255,255,.35),transparent 70%),radial-gradient(50% 60% at 8% 100%,rgba(255,255,255,.25),transparent 70%);pointer-events:none}
.aw-beispiel{position:relative;justify-self:end;font:800 .64rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(43,17,48,.3);padding:.2rem .6rem;border-radius:999px}
.aw-zeile{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;padding:.85rem 1rem;border-radius:1rem;background:rgba(255,255,255,.95);box-shadow:0 14px 30px -18px rgba(58,16,56,.6)}
.aw-zeile:nth-child(3){background:rgba(255,255,255,.84)}
.aw-zeile:nth-child(4){background:rgba(255,255,255,.72)}
.aw-zeile b{font:700 1rem var(--display);color:var(--tinte);min-width:0}
.aw-zeile time{font:600 .9rem var(--body);color:var(--leise);font-variant-numeric:tabular-nums}
.kn-verzeichnis .guide-suche{margin-bottom:1rem}
.kn-pillen{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.3rem;margin-bottom:1.4rem}
.kn-pillen::-webkit-scrollbar{display:none}
@media (min-width:900px){.kn-pillen{flex-wrap:wrap;overflow:visible}}
.kn-pillen button{flex:none;display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.2rem;border-radius:999px;border:1.5px solid var(--linie);background:var(--papier);font:700 .95rem var(--display);color:var(--tinte);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.kn-pillen button em{font-style:normal;font-weight:600;color:var(--leise)}
.kn-pillen button[aria-pressed="true"]{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.kn-pillen button[aria-pressed="true"] em{color:#e7c9da}
.kn-pillen.suche-aktiv button[aria-pressed="true"]{background:var(--papier);color:var(--tinte);border-color:var(--linie)}
.kn-pillen.suche-aktiv button[aria-pressed="true"] em{color:var(--leise)}
.kn-treffer{font-size:.88rem;color:var(--leise);min-height:1.2em;margin:-.6rem 0 .6rem}
.kn-gruppen{display:grid;gap:2.4rem}
.kn-gruppe-kopf{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.kn-gruppe-kopf h3{font-size:1.5rem;font-weight:900;letter-spacing:-.03em}
.kn-anzahl{color:var(--leise);font-weight:600}
.kn-gruppe-text{color:var(--leise);margin:.3rem 0 1rem}
.kn-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem 2rem}
.kn-zeile{display:flex;align-items:flex-start;gap:1rem;padding:.9rem .6rem;border-radius:1rem;transition:background .2s}
.kn-zeile:hover{background:var(--grund)}
.kn-zeile>span:last-child{min-width:0}
.kn-zeile b{display:block;font:800 1.02rem var(--display);color:var(--tinte)}
.kn-zeile b+span{display:block;color:var(--leise);font-size:.95rem;line-height:1.45;margin-top:.15rem}
.kn-plaene{display:grid;gap:.7rem}
.kn-plan{display:grid;gap:.2rem;padding:1rem 1.15rem;border-radius:1rem;background:var(--papier);border:1px solid var(--linie)}
.kn-plan b{font-family:var(--display);font-weight:800;color:var(--tinte)}
.kn-plan span{color:var(--leise);font-size:.95rem}
.kn-weiter{display:grid;gap:.5rem;margin-top:.6rem}
.kn-weiter .kern-link{text-decoration:none}
@media (max-width:900px){.kn-emp-raster,.aw{grid-template-columns:1fr}.aw.gedreht .aw-text{order:0}}
@media (max-width:760px){.kn-liste{grid-template-columns:1fr}}
@media (max-width:560px){.kn-grafik{grid-template-columns:1fr;gap:1rem;min-height:0}.kn-quellen{grid-auto-flow:column;justify-content:start;gap:.6rem}.kn-linien{display:none}}

/* Anleitungen: Übersicht */
.al-reiter{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--linie);margin-top:.4rem}
.al-reiter::-webkit-scrollbar{display:none}
.al-reiter button{flex:none;position:relative;display:inline-flex;align-items:center;gap:.45rem;padding:.85rem .9rem;border:0;background:none;font:700 1rem var(--display);color:var(--leise);cursor:pointer}
.al-reiter button em{font-style:normal;font-size:.72rem;color:var(--marke);background:#fbe4ee;border-radius:999px;padding:.05rem .45rem}
.al-reiter button:hover{color:var(--tinte)}
.al-reiter button[aria-pressed="true"]{color:var(--tinte)}
.al-reiter button[aria-pressed="true"]::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:-1px;height:3px;border-radius:3px;background:var(--verlauf)}
.al-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2rem 1.4rem}
.al-karte{min-width:0}
.al-karte.gross{grid-column:1 / -1}
.al-link{display:grid;gap:1rem;text-decoration:none;color:inherit}
.al-karte.gross .al-link{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:1.4rem 2.6rem}
.al-text{display:grid;gap:.45rem;min-width:0}
.al-kat{font:700 .88rem var(--display);color:var(--marke)}
.al-titel{font:800 1.28rem/1.2 var(--display);letter-spacing:-.025em;color:var(--tinte);text-wrap:balance;transition:color .2s}
.al-karte.gross .al-titel{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:900;line-height:1.08}
.al-anriss{color:var(--leise);font-size:.98rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.al-meta{font-size:.86rem;color:var(--leise)}
.al-link:hover .al-titel{color:var(--marke)}
.al-link:hover .ab{transform:translateY(-3px);box-shadow:var(--schatten-hoch)}
@media (max-width:1060px){.al-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.al-raster{grid-template-columns:1fr}.al-karte.gross .al-link{grid-template-columns:1fr}}

/* Anleitungen: Bildkacheln in Markenverläufen */
.ab{position:relative;display:grid;place-items:center;aspect-ratio:16/10;max-width:100%;padding:1.2rem;border-radius:1.2rem;overflow:hidden;box-shadow:var(--schatten);transition:transform .35s var(--ease),box-shadow .35s}
.ab::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.6) 1px,transparent 1.4px);background-size:18px 18px;opacity:.18;pointer-events:none}
.ab.gross{aspect-ratio:16/8}
.ab--vergleich{background:linear-gradient(135deg,#fbe4ee,#f6e7ef 50%,#f3c1dc)}
.ab--app-code{background:linear-gradient(135deg,#9c54a1,#dd428c)}
.ab--buero{background:linear-gradient(135deg,#f2696c,#dd428c 50%,#9c54a1)}
.ab--app{background:linear-gradient(135deg,#9c54a1,#f2696c)}
.ab--formel{background:linear-gradient(135deg,#fde7f1,#f6c6dd 60%,#e7a1c9)}
.ab--pruefen{background:linear-gradient(135deg,#f2696c,#f9a77c)}
.ab--konnektor{background:linear-gradient(140deg,#f6e7ef,#e9c6e4 55%,#d3a3dc)}
.ab--werkzeuge{background:linear-gradient(135deg,#b72f67,#9c54a1)}
.ab--vergleich::before,.ab--formel::before,.ab--konnektor::before{background-image:radial-gradient(rgba(183,47,103,.5) 1px,transparent 1.4px);opacity:.12}
.ab-karte{position:relative;display:grid;gap:.7rem;width:min(100%,24rem);padding:1.1rem 1.2rem;border-radius:1rem;background:#fff;box-shadow:0 24px 44px -24px rgba(58,16,56,.6);text-align:left}
.ab-karte small{font:800 .58rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--leise)}
.ab-karte b{font:900 1.35rem/1.1 var(--display);letter-spacing:-.04em;color:var(--tinte)}
.ab-karte b i{font-style:normal;color:var(--leise)}
.ab-zwei{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.ab-box{display:grid;gap:.2rem;padding:.6rem .65rem;border-radius:.6rem;border:1px solid var(--linie);background:var(--grund)}
.ab-box em{font-style:normal;font:700 .74rem/1.3 var(--display);color:var(--tinte)}
.ab-box.an{background:var(--verlauf-tief);border-color:transparent}
.ab-box.an small,.ab-box.an em{color:#fff}
.ab-split{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;width:100%}
.ab-fenster,.ab-term{position:relative;display:grid;gap:.45rem;align-content:start;padding:0 0 .7rem;border-radius:.8rem;overflow:hidden;text-align:left;min-height:7.5rem}
.ab-fenster{background:#fffdfc;box-shadow:0 20px 36px -22px rgba(58,16,56,.6)}
.ab-term{background:#17131a;box-shadow:0 20px 36px -22px rgba(23,9,25,.8)}
.ab-leiste{display:flex;align-items:center;gap:.25rem;padding:.4rem .55rem;font:700 .58rem var(--display);color:#7d6676;background:#f8f2f5;border-bottom:1px solid #efe3ea}
.ab-term .ab-leiste{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08);color:#e7c9da}
.ab-leiste i{width:.38rem;height:.38rem;border-radius:50%;background:#e3d4dd}
.ab-leiste i:first-child{background:#f2696c}
.ab-blase{margin:0 .55rem;padding:.4rem .5rem;border-radius:.55rem;font-size:.62rem;line-height:1.35}
.ab-blase.du{justify-self:end;color:#fff;background:linear-gradient(120deg,#9c54a1,#dd428c)}
.ab-blase.ki{background:#f8f2f5;border:1px solid #efe3ea;color:var(--text)}
.ab-code{margin:0 .6rem;font:600 .62rem ui-monospace,Consolas,monospace;color:#e8d5e0}
.ab-code b{color:#ffb3cf}.ab-code.aus{color:#b996ad}.ab-code.ok{color:#7fd8b0}
.ab-stapel{position:relative;display:grid;gap:.5rem;width:min(100%,22rem)}
.ab-meldung{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:.8rem;background:rgba(255,255,255,.95);box-shadow:0 12px 24px -16px rgba(58,16,56,.6);text-align:left}
.ab-meldung:nth-child(2){background:rgba(255,255,255,.85)}.ab-meldung:nth-child(3){background:rgba(255,255,255,.74)}
.ab-meldung b{font:700 .82rem var(--display);color:var(--tinte)}
.ab-meldung time{font-size:.72rem;color:var(--leise)}
.ab-fenster.schmal{width:min(100%,14rem)}
.ab-rechner{display:grid;gap:.3rem;padding:0 .6rem}
.ab-rechner b{font:800 .72rem var(--display);color:var(--tinte)}
.ab-rechner span{display:flex;justify-content:space-between;font-size:.62rem;padding:.2rem .35rem;border-radius:.35rem;background:var(--grund)}
.ab-rechner small{color:var(--leise)}
.ab-rechner em{font-style:normal;font-weight:700}
.ab-rechner strong{justify-self:end;font:900 1rem var(--display);background:var(--verlauf-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.ab-formel{position:relative;display:grid;gap:.35rem;width:min(100%,19rem)}
.ab-formel span{display:flex;align-items:center;gap:.6rem;padding:.42rem .7rem;border-radius:.7rem;background:#fff;box-shadow:0 10px 20px -14px rgba(58,16,56,.6);font-size:.7rem;color:var(--text);transform:translateX(calc(var(--n) * .55rem))}
.ab-formel b{flex:none;min-width:4.2rem;font:800 .62rem var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--marke)}
.ab-pruef{position:relative;display:grid;gap:.35rem;width:min(100%,19rem);padding:.8rem;border-radius:.9rem;background:#fff;box-shadow:0 20px 36px -22px rgba(58,16,56,.6);text-align:left;font-size:.68rem;color:var(--text)}
.ab-pruef b{font:800 .74rem var(--display);color:var(--tinte)}
.ab-pruef span{display:flex;align-items:center;gap:.4rem;padding:.3rem .4rem;border-radius:.45rem;background:#f8f2f5}
.ab-pruef i{font-style:normal;font:800 .54rem var(--display);padding:.1rem .4rem;border-radius:999px;color:#fff;flex:none}
.ab-pruef i.sicher{background:#1e7a57}.ab-pruef i.wahr{background:#8a5300}.ab-pruef i.geraten{background:#b3261e}
.ab-knoten{position:relative;display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto auto;gap:.8rem 2.4rem;align-items:center;justify-items:center}
.ab-knoten>.kn-logo:nth-child(1){grid-column:1;grid-row:1}
.ab-knoten>.kn-logo:nth-child(2){grid-column:1;grid-row:2}
.ab-mitte{grid-column:2;grid-row:1 / 3;display:grid;place-items:center;width:5rem;height:5rem;border-radius:1.4rem;background:#fff;font:900 .95rem var(--display);color:var(--marke);box-shadow:0 20px 40px -20px rgba(58,16,56,.6)}
.ab-knoten>.kn-logo:nth-child(4){grid-column:3;grid-row:1}
.ab-knoten>.kn-logo:nth-child(5){grid-column:3;grid-row:2}
.ab-raster{position:relative;display:grid;grid-template-columns:repeat(4,auto);gap:.7rem}
@media (max-width:420px){.ab{padding:.8rem}.ab-raster{gap:.45rem}.ab-raster .kn-logo.gross,.ab-knoten .kn-logo.gross{width:2.7rem;height:2.7rem;font-size:.9rem}.ab-knoten{column-gap:1.4rem}}

/* Anleitungen: Artikelseite */
.al-artikel{display:grid;grid-template-columns:minmax(0,46rem) 13rem;justify-content:center;gap:3.5rem;align-items:start;padding-block:clamp(1.6rem,3.5vw,2.6rem) clamp(3rem,6vw,4.5rem)}
.al-artikel-inhalt{min-width:0;display:grid;gap:1.1rem;align-content:start}
.al-artikel-inhalt h1{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:900;line-height:1.06;letter-spacing:-.045em}
.al-autor{display:flex;align-items:center;gap:.7rem}
.al-avatar{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;font:900 .8rem var(--display);color:#fff;background:var(--verlauf);flex:none}
.al-autor b{display:block;font-family:var(--display);font-weight:800;color:var(--tinte)}
.al-autor small{color:var(--leise)}
.al-text-inhalt{display:grid;gap:1rem;min-width:0}
.al-text-inhalt h2{font-size:1.5rem;font-weight:900;letter-spacing:-.03em;line-height:1.18;text-wrap:balance;margin-top:1.2rem}
.al-text-inhalt>p{font-size:1.06rem;line-height:1.75;color:var(--text)}
.al-liste{margin:0;padding-left:1.3rem;display:grid;gap:.5rem;font-size:1.04rem;line-height:1.65}
.al-tabelle{overflow-x:auto;border:1px solid var(--linie);border-radius:1rem;background:var(--papier)}
.al-tabelle table{width:100%;border-collapse:collapse;min-width:34rem;font-size:.95rem}
.al-tabelle th,.al-tabelle td{padding:.75rem .9rem;text-align:left;vertical-align:top;border-top:1px solid var(--linie);line-height:1.45}
.al-tabelle thead th{border-top:0;background:var(--grund);font:800 .74rem var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}
.al-tabelle tbody th{font-family:var(--display);font-weight:800;color:var(--tinte);white-space:nowrap}
.al-vergleich{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.alv{display:grid;gap:.35rem;padding:1rem 1.1rem;border-radius:1rem;border:1px solid var(--linie)}
.alv small{font:800 .72rem var(--display);letter-spacing:.12em;text-transform:uppercase}
.alv.vorher{background:var(--schlecht-bg)}
.alv.vorher small{color:var(--schlecht)}
.alv.vorher p{text-decoration:line-through;text-decoration-color:rgba(179,38,30,.5)}
.alv.nachher{background:var(--gut-bg)}
.alv.nachher small{color:var(--gut)}
.al-aufgaben{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:a}
.al-aufgaben li{counter-increment:a;display:grid;gap:.7rem;padding:1rem 1.1rem;border-radius:1.1rem;border:1px solid var(--linie);background:var(--papier)}
.ala-kopf{display:grid;grid-template-columns:auto 1fr;column-gap:.8rem;align-items:center}
.ala-kopf::before{content:counter(a);grid-row:1 / 3;width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;font:900 .9rem var(--display);color:#fff;background:var(--verlauf)}
.ala-kopf b{font-family:var(--display);font-weight:800;color:var(--tinte);font-size:1.05rem}
.ala-kopf span{color:var(--leise);font-size:.95rem}
.al-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.alk{display:grid;grid-template-columns:auto 1fr;column-gap:.8rem;row-gap:.4rem;align-items:center;align-content:start;padding:1rem;border-radius:1.1rem;border:1px solid var(--linie);background:var(--papier);min-width:0}
.alk>.kn-logo{grid-row:1 / 3}
.alk>b{font-family:var(--display);font-weight:800;color:var(--tinte)}
.alk>span:not(.kn-logo){grid-column:2;color:var(--leise);font-size:.92rem;line-height:1.45}
.alk code{grid-column:1 / -1;order:4;display:block;font:600 .84rem/1.5 ui-monospace,Consolas,monospace;color:#7a1a45;background:#fbeef4;border:1px solid #f3d6e3;border-radius:.6rem;padding:.55rem .7rem;white-space:pre-wrap;word-break:break-word}
.alk-kopie{grid-column:1 / -1;order:5;justify-self:start}
.al-teilen{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--linie)}
.al-weiter{display:grid;gap:1rem;margin-top:2rem}
.al-weiter>h2{font-size:1.4rem;font-weight:900;letter-spacing:-.03em}
.al-weiter-raster{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.al-weiter .doku-blaettern{margin-top:.6rem}
.al-toc .al-toc-cta{margin-top:1rem;border-left:0;padding:.65rem .8rem;border-radius:.7rem;background:var(--verlauf-tief);color:#fff;font-weight:700;text-align:center}
.al-toc .al-toc-cta:hover{color:#fff;filter:brightness(1.05)}
@media (max-width:1100px){.al-artikel{grid-template-columns:minmax(0,46rem)}.al-toc{display:none}}
@media (max-width:620px){.al-vergleich,.al-karten,.al-weiter-raster{grid-template-columns:1fr}}

/* 7-Tage-Challenge */
.ch-held{text-align:left}
.ch-held .wrap.ch-held-raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:2rem 3rem;align-items:center;justify-items:stretch}
.ch-held-text{display:grid;gap:1.1rem;justify-items:start}
.ch-held .brotkrumen{justify-self:start}
.ch-held h1{margin-inline:0;max-width:12ch;font-size:clamp(2.6rem,6vw,4.8rem)}
.ch-held .cm-lead{margin-inline:0}
.ch-held .cm-knoepfe{justify-content:flex-start}
.ch-fort{display:grid;gap:.4rem;width:min(100%,24rem)}
.ch-fort small{font-size:.86rem;color:var(--leise)}
.ch-woche{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.ch-kreis{display:grid;justify-items:center;gap:.35rem;padding:1rem .5rem;border-radius:1.2rem;background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten);text-align:center;transition:background .3s}
.ch-kreis b{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;font:900 1rem var(--display);color:var(--marke);background:#fbe4ee;transition:background .3s,color .3s}
.ch-kreis small{font:700 .72rem/1.25 var(--display);color:var(--leise)}
.ch-kreis.fertig{background:linear-gradient(135deg,#fdf0f6,#fff)}
.ch-kreis.fertig b{color:#fff;background:var(--verlauf)}
.ch-liste{list-style:none;margin:0 auto;padding:0;display:grid;gap:1.1rem;max-width:54rem}
.ch-tag{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem;align-items:start;padding:1.3rem;border-radius:calc(var(--r-l) + .2rem);background:var(--papier);border:1px solid var(--linie);box-shadow:var(--schatten);transition:border-color .3s,background .3s}
.ch-nr span{display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:1rem;font:900 1.3rem var(--display);color:var(--marke);background:#fbe4ee}
.ch-tag.fertig{border-color:#bfe3d1;background:linear-gradient(135deg,#f3fbf7,#fff 60%)}
.ch-tag.fertig .ch-nr span{color:#fff;background:var(--gut)}
.ch-koerper{display:grid;gap:.55rem;min-width:0}
.ch-kicker{font:800 .72rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--marke)}
.ch-koerper h2{font-size:1.4rem;font-weight:900;letter-spacing:-.03em}
.ch-knoepfe{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}
.ch-knoepfe a.gk-knopf{text-decoration:none}
.ch-geschafft{display:inline-flex;align-items:center;gap:.5rem;font:700 .86rem var(--display);color:var(--tinte);background:var(--papier);border:1.5px solid var(--linie-2);border-radius:.7rem;padding:.6rem .95rem;cursor:pointer}
.ch-geschafft::before{content:"";width:1rem;height:1rem;border-radius:.3rem;border:1.5px solid var(--linie-2);flex:none}
.ch-geschafft[aria-pressed="true"]{color:var(--gut);border-color:var(--gut);background:var(--gut-bg)}
.ch-geschafft[aria-pressed="true"]::before{background:var(--gut);border-color:var(--gut);box-shadow:inset 0 0 0 2px #fff}
.ch-teilen-details summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.4rem;font:700 .86rem var(--display);color:var(--marke)}
.ch-teilen-details summary::-webkit-details-marker{display:none}
.ch-teilen-details summary::after{content:"+";font-weight:900}
.ch-teilen-details[open] summary::after{content:"−"}
.ch-teilen-details .teilen{margin-top:.6rem}
.ch-abz-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:2rem 3.5rem;align-items:center}
.ch-abz-raster .cm-kopf{margin:0}
.ch-name{display:grid;gap:.35rem;width:min(100%,22rem)}
.ch-name span{font:700 .9rem var(--display);color:var(--tinte)}
.ch-name input{font:600 1rem var(--body);padding:.8rem 1rem;border-radius:.8rem;border:1.5px solid var(--linie-2);background:var(--papier);color:var(--tinte)}
.ch-name input:focus{outline:3px solid rgba(221,66,140,.35);outline-offset:1px;border-color:var(--marke)}
.ch-zuruecksetzen{background:none;border:0;padding:0;cursor:pointer;font-size:.92rem}
.ch-abzeichen{position:relative;display:grid;place-items:center;aspect-ratio:1;width:min(100%,22rem);justify-self:center;border-radius:2rem;overflow:hidden;background:var(--grund);border:2px dashed var(--linie-2)}
.cha-gesperrt{display:grid;justify-items:center;gap:.4rem;color:var(--leise);text-align:center;padding:1rem}
.cha-gesperrt svg{width:3rem;height:3rem;color:var(--linie-2)}
.cha-gesperrt b{font:800 1.1rem var(--display);color:var(--tinte)}
.cha-frei{display:none}
.ch-abzeichen[data-frei="true"]{border:0;background:linear-gradient(135deg,#9c54a1,#dd428c 55%,#f2696c);box-shadow:0 40px 80px -40px rgba(183,47,103,.8)}
.ch-abzeichen[data-frei="true"]::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.7) 1px,transparent 1.4px);background-size:18px 18px;opacity:.18}
.ch-abzeichen[data-frei="true"] .cha-gesperrt{display:none}
.ch-abzeichen[data-frei="true"] .cha-frei{position:relative;display:grid;justify-items:center;gap:.45rem;text-align:center;color:#fff;padding:1.4rem}
.cha-pokal svg{width:4.6rem;height:4.6rem;padding:1rem;border-radius:50%;background:rgba(255,255,255,.2);color:#fff}
.cha-frei small{font:800 .76rem var(--display);letter-spacing:.16em;text-transform:uppercase;opacity:.92}
.cha-frei b{font:900 1.5rem/1.1 var(--display);letter-spacing:-.03em;max-width:12ch}
.cha-name{font:800 1.12rem var(--display)}
@media (max-width:900px){
  .ch-held .wrap.ch-held-raster,.ch-abz-raster{grid-template-columns:1fr}
  .ch-woche{grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem}
  .ch-kreis{padding:.55rem .1rem;border-radius:.9rem}
  .ch-kreis small{display:none}
  .ch-kreis b{width:2.1rem;height:2.1rem;font-size:.85rem}
}
@media (max-width:560px){.ch-tag{grid-template-columns:1fr;gap:.8rem}.ch-nr span{width:2.6rem;height:2.6rem;font-size:1.05rem}}

/* Startseite: neue Wege zur Community und zur Challenge */
.community-wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}
.cw-karte{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.2rem;border-radius:var(--r-l);background:var(--papier);border:1px solid var(--linie);text-decoration:none;color:var(--text);box-shadow:var(--schatten);transition:transform .3s var(--ease),border-color .2s}
.cw-karte:hover{transform:translateY(-3px);border-color:var(--linie-2)}
.cw-karte svg{flex:none;width:2.7rem;height:2.7rem;padding:.62rem;border-radius:.9rem;color:#fff;background:var(--verlauf)}
.cw-karte b{display:block;font-family:var(--display);font-weight:800;color:var(--tinte)}
.cw-karte span span{display:block;font-size:.9rem;color:var(--leise);line-height:1.45}
.ch-teaser-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 3rem;align-items:center;padding:clamp(1.6rem,4vw,3rem);border-radius:calc(var(--r-l) + .6rem);background:linear-gradient(120deg,#fdf0f6 0%,#fff 50%,#fbe4ee 100%);border:1px solid var(--linie-2)}
.ch-teaser-raster>div{display:grid;gap:1rem;justify-items:start}
.ch-teaser-knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.4rem}
.ch-teaser-tage{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;counter-reset:t}
.ch-teaser-tage li{counter-increment:t;display:flex;align-items:center;gap:.8rem;padding:.6rem .85rem;border-radius:.9rem;background:var(--papier);border:1px solid var(--linie);font:700 .95rem var(--display);color:var(--tinte)}
.ch-teaser-tage li::before{content:counter(t);display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;font:900 .8rem var(--display);color:#fff;background:var(--verlauf);flex:none}
.ch-teaser-tage li small{margin-left:auto;font:600 .8rem var(--body);color:var(--leise)}
.fuss-raster{grid-template-columns:minmax(0,1.2fr) repeat(5,minmax(0,1fr))}
@media (max-width:1060px){.fuss-raster{grid-template-columns:repeat(3,minmax(0,1fr))}.fuss-raster>div:first-child{grid-column:1 / -1}}
@media (max-width:900px){.community-wege,.ch-teaser-raster{grid-template-columns:1fr}.fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Fassung 20: Wunschkarte im Anleitungs-Raster */
.al-wunsch{grid-column:span 2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.75rem;padding:clamp(1.4rem,3vw,2.2rem);border:1.5px dashed #e3bfd3;border-radius:1.25rem;background:linear-gradient(135deg,#fdf5f9,#fff)}
.al-wunsch p{margin:0;max-width:34rem;color:var(--text);line-height:1.6}
.al-wunsch-titel{margin:0;font:900 clamp(1.35rem,2.4vw,1.75rem)/1.12 var(--display);letter-spacing:-.03em;color:var(--tinte)}
.al-raster.gefiltert .al-wunsch{grid-column:auto}
@media (max-width:1060px){.al-wunsch{grid-column:auto}}
/* Fassung 20: Beispiel-Kennzeichnung im Chat-Bild */
.kn-chat-kopf em{margin-left:auto;font-style:normal;font:800 .62rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--marke);background:#fbe7f0;padding:.2rem .45rem;border-radius:999px}
/* Fassung 20: Vergleichstabellen auf dem Handy als Karten */
@media (max-width:620px){
  .al-tabelle{overflow:visible;border:0;background:none}
  .al-tabelle table{min-width:0;display:block}
  .al-tabelle thead{display:none}
  .al-tabelle tbody{display:grid;gap:.7rem}
  .al-tabelle tr{display:grid;gap:.35rem;padding:.9rem 1rem;border:1px solid var(--linie);border-radius:1rem;background:var(--papier)}
  .al-tabelle th,.al-tabelle td{padding:0;border:0}
  .al-tabelle tbody th{white-space:normal;font-size:1rem}
  .al-tabelle td{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:.6rem}
  .al-tabelle td::before{content:attr(data-spalte);font:800 .7rem/1.5 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
}

/* v20-ENDE */
/* v21-START */
/* Fassung 21: Warnhinweise in Guide und Befehlen */
.kd-warnung{grid-column:1/-1;padding:.85rem 1rem;border-radius:.9rem;font-size:.92rem;line-height:1.5;background:#fdecef;color:#6d1530;border:1px solid #f4c7d2}
.kd-warnung b{display:block;font:800 .74rem var(--display);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.2rem}
.bz-warnung{margin:.1rem 0 .9rem;max-width:46rem}
.bz-hinweis,.guide-version{padding:.75rem 1rem;border-radius:.9rem;background:var(--grund);border:1px solid var(--linie);font-size:.9rem;line-height:1.5;color:var(--text);max-width:46rem}
.bz-hinweis{margin-top:.7rem}
.bz-hinweis b,.guide-version b{display:block;font:800 .72rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--leise);margin-bottom:.15rem}

/* Fassung 21: Anmeldung ohne Kopplung */
.nl-angebot{display:grid;gap:.45rem}
.nl-titel{font:900 1.25rem/1.15 var(--display);letter-spacing:-.03em;color:var(--tinte);margin:0;text-wrap:balance}
.nl-angebot p{margin:0;font-size:.92rem;line-height:1.55;color:var(--text)}
.nl-angebot .nl-begriff{font-size:.84rem;color:var(--leise)}
.nl-ohne{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .9rem;padding:.75rem .9rem;border-radius:.9rem;background:var(--grund);border:1px dashed #e3bfd3}
.nl-ohne small{flex-basis:100%;font:800 .7rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--leise)}
.nl-link{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.35rem;font:700 .88rem/1.35 var(--display);color:var(--marke);text-decoration:none}
.nl-link svg{width:.95rem;height:.95rem;flex:none}
a.nl-link{display:inline}
a.nl-link svg{display:inline;vertical-align:-.16em;margin-left:.3rem}
.nl-link.folgt{color:var(--leise);cursor:default}
.nl-link.folgt em{font-style:normal;font-weight:700;font-size:.72rem;padding:.12rem .5rem;border-radius:999px;background:#fff;border:1px solid var(--linie);color:var(--leise)}
.nl-pflicht{margin:-.35rem 0 0;font-size:.82rem;color:var(--leise)}
#feldEinwilligung span{font-size:.84rem}
#formHinweis{text-align:left;line-height:1.5}
#formHinweis a{color:var(--marke)}
.erfolg .nl-ohne{margin-top:.1rem}

/* v21-ENDE */

/* Fassung 23: ruhige Symbole und Orbit im Menü */
.vn-ic,.kern-ico,.loesung i,.vorteile .ico,.cm-weg-ico svg{color:var(--marke);background:#fbeef4;box-shadow:inset 0 0 0 1px #f2d6e4}
.nav-orbit::before{content:"";display:inline-block;vertical-align:middle;width:.45rem;height:.45rem;margin:-.12rem .42rem 0 0;border-radius:50%;background:var(--verlauf);box-shadow:0 0 0 3px rgba(221,66,140,.16)}

/* Fassung 24: Navigationspunkt für Unternehmen */
.nav a.nav-firmen{border:1px solid rgba(156,84,161,.38);border-radius:999px;padding:.42rem .95rem;line-height:1.2}
.nav a.nav-firmen:hover,.nav a.nav-firmen[aria-current="page"]{background:#fbeef4;border-color:#dd428c}
@media (max-width:1060px){.nav a.nav-firmen{border-radius:12px}}
@media (min-width:1061px) and (max-width:1439px){.nav > a.nav-breit{display:none}}
.kv-ki .kv-eu{width:1.5em!important;height:1.5em!important;flex:none;display:inline-block;vertical-align:-.4em;margin-right:.15em;position:static!important;opacity:1!important}

/* ===== Fassung 26: Kopfzeile mit dem Menüpunkt „Vibe Coding“ ===== */
@media (min-width:1280px) and (max-width:1439px){#kopf .nav > a.nav-breit{display:block}#kopf .nav{gap:0}#kopf .nav a,#kopf .nav-mega-knopf{padding:.5rem .42rem;font-size:.84rem}#kopf .nav-mega-knopf svg{width:.9rem;height:.9rem}#kopf .kopf-cta .cta-lang{display:none}#kopf .kopf-cta .cta-kurz{display:inline}}
@media (min-width:1440px){#kopf .nav{gap:0}#kopf .nav a,#kopf .nav-mega-knopf{padding:.5rem .46rem;font-size:.86rem}}

/* Fassung 25: ruhige Kopfzeile auf dem Handy. Hinweisleiste nur ab Tablet, eigener Mitmachen-Knopf, kleineres Logo */
@media (max-width:760px){.ankuendigung{display:none}}
@media (max-width:1060px){
  .kopf-rechts .kopf-cta{display:inline-flex;min-height:2.65rem;padding:.55rem 1.05rem;font-size:.9rem;box-shadow:0 8px 20px -10px rgba(183,47,103,.7)}
  .kopf-cta .cta-lang{display:none}
  .kopf-cta .cta-kurz{display:inline}
  .logo img{height:3rem}
  .kopf.gescrollt .logo img{height:2.7rem}
  .menue-knopf{width:2.65rem;height:2.65rem}
}
@media (max-width:520px){
  .kopf .wrap{padding-block:.45rem;gap:.6rem}
  .logo img{height:2.4rem}
  .kopf.gescrollt .logo img{height:2.2rem}
  .kopf-rechts{gap:.45rem}
}

@media (max-width:1060px){.kopf .wrap{padding-block:.85rem}}
@media (max-width:760px){.kopf .logo img{height:4.4rem}.kopf.gescrollt .logo img{height:3.5rem}}