/* TractionCoaching — Designsystem
   Zwei Hemisphären, zwei Temperaturen: Effizienz kühl auf Papier,
   Effektivität warm auf Tinte. Wortmarke aus Sans + Serif-Kursiv. */

@font-face{font-family:"Instrument Sans";src:url("/schriften/instrument-sans-var.woff2")format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/schriften/instrument-serif.woff2")format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/schriften/instrument-serif-italic.woff2")format("woff2");
  font-weight:400;font-style:italic;font-display:swap}

:root{
  --tinte:#0B0D12; --tinte-2:#141821; --tinte-3:#1D2330; --tinte-4:#2A3243;
  --papier:#FBFAF7; --papier-2:#F2EFE9; --papier-3:#E6E1D7;
  --effizienz:#2D43E8; --effizienz-hell:#E8EBFE; --effizienz-tief:#1B2BA8;
  --effektivitaet:#EE7149; --effektivitaet-hell:#FDEDE6; --effektivitaet-tief:#C8410F;
  --gold:#C99A2E;

  /* lokale, pro Sektion umschaltbare Rollen */
  --grund:var(--papier); --grund-2:var(--papier-2);
  --text:#12151B; --text-leise:#5A6070; --text-still:#8A8F9E;
  --linie:rgba(18,21,27,.10); --linie-stark:rgba(18,21,27,.18);
  --karte:#FFFFFF; --karte-rand:rgba(18,21,27,.09);
  --akzent:var(--effizienz); --akzent-hell:var(--effizienz-hell); --akzent-tief:var(--effizienz-tief);

  --r-s:8px; --r:14px; --r-l:22px; --r-xl:30px;
  --sp:clamp(1rem,2.2vw,1.6rem);
  --rand:clamp(1.15rem,5vw,4.5rem);
  --breite:1280px;
  --schatten:0 1px 2px rgba(11,13,18,.04),0 8px 24px -12px rgba(11,13,18,.10);
  --schatten-l:0 2px 4px rgba(11,13,18,.05),0 28px 60px -28px rgba(11,13,18,.22);
  --fed:cubic-bezier(.2,.7,.25,1);
}
[data-ton="dunkel"]{
  --grund:var(--tinte); --grund-2:var(--tinte-2);
  --text:#F4F3F0; --text-leise:#A2A9B8; --text-still:#737C8D;
  --linie:rgba(255,255,255,.12); --linie-stark:rgba(255,255,255,.22);
  --karte:#151A24; --karte-rand:rgba(255,255,255,.10);
  --akzent:var(--effektivitaet); --akzent-hell:rgba(238,113,73,.16); --akzent-tief:#FFA683;
  --schatten:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.5);
  --schatten-l:0 2px 6px rgba(0,0,0,.35),0 34px 70px -30px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{margin:0;background:var(--papier);color:var(--text);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem;line-height:1.6;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--akzent);outline-offset:3px;border-radius:4px}
::selection{background:var(--akzent);color:#fff}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.028em;line-height:1.08;text-wrap:balance}
.serif{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.012em}
.kursiv{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.004em}
.t-riese{font-size:clamp(2.6rem,6.6vw,5.2rem)}
.t-gross{font-size:clamp(2rem,4.4vw,3.4rem)}
.t-mittel{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.022em}
.t-klein{font-size:clamp(1.12rem,1.5vw,1.3rem);letter-spacing:-.016em;line-height:1.3}
.vor{display:inline-flex;align-items:center;gap:.6em;font-size:.73rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--text-still)}
.vor::before{content:"";width:1.6rem;height:1px;background:currentColor;opacity:.6}
.fuehrung{font-size:clamp(1.06rem,1.45vw,1.22rem);line-height:1.52;color:var(--text-leise);
  max-width:62ch;letter-spacing:-.012em}
.leise{color:var(--text-leise)}

/* ---------- Gerüst ---------- */
.bahn{background:var(--grund);color:var(--text);position:relative}
.innen{width:100%;max-width:var(--breite);margin:0 auto;padding-inline:var(--rand)}
.abschnitt{padding-block:clamp(4.5rem,9vw,8.5rem)}
.abschnitt-schmal{padding-block:clamp(3rem,6vw,5.5rem)}

/* ---------- Konzeptstudie-Leiste ---------- */
.studie{background:var(--tinte);color:#D8D5CE;font-size:.8rem;letter-spacing:-.002em;
  border-bottom:1px solid rgba(255,255,255,.08);position:relative;z-index:60}
.studie .innen{display:flex;gap:.85rem;align-items:center;justify-content:center;
  padding-block:.52rem;text-align:center;flex-wrap:wrap}
.studie b{color:#fff;font-weight:600}
.studie .punkt{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;
  box-shadow:0 0 0 3px rgba(201,154,46,.22)}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:50;background:rgba(251,250,247,.82);
  backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid transparent;
  transition:border-color .3s var(--fed),background .3s var(--fed)}
.kopf.gescrollt{border-bottom-color:var(--linie);background:rgba(251,250,247,.94)}
.kopf .innen{display:flex;align-items:center;gap:1.2rem;min-height:4.4rem}
.marke{display:inline-flex;align-items:baseline;gap:.11em;font-size:1.3rem;line-height:1;flex:none}
.marke .m1{font-weight:600;letter-spacing:-.045em}
.marke .m2{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
.kopf nav{margin-left:auto;display:flex;align-items:center;gap:.3rem}
.kopf nav a{padding:.45rem .7rem;border-radius:var(--r-s);font-size:.93rem;font-weight:500;
  color:var(--text-leise);transition:color .18s,background .18s}
.kopf nav a:hover{color:var(--text);background:var(--papier-2)}
.kopf nav a .zahl{color:var(--text-still);font-size:.78em;margin-right:.3em;font-variant-numeric:tabular-nums}
@media(max-width:860px){.kopf nav a.verbergen{display:none}}

.ich{display:inline-flex;align-items:center;gap:.5rem;padding:.34rem .34rem .34rem .7rem;
  border:1px solid var(--linie);border-radius:999px;font-size:.86rem;color:var(--text-leise);background:var(--karte)}
.ich .initial{width:1.55rem;height:1.55rem;border-radius:50%;display:grid;place-items:center;
  background:var(--tinte);color:#fff;font-size:.74rem;font-weight:600;flex:none}
.ich button{background:none;border:0;color:var(--text-still);cursor:pointer;padding:.1rem .3rem;
  font-size:.8rem;border-radius:4px}
.ich button:hover{color:var(--text)}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.82rem 1.4rem;border-radius:999px;border:1px solid transparent;cursor:pointer;
  font-size:.97rem;font-weight:600;letter-spacing:-.012em;background:var(--tinte);color:#fff;
  transition:transform .18s var(--fed),box-shadow .22s var(--fed),background .18s,opacity .18s;
  box-shadow:0 1px 2px rgba(11,13,18,.16),0 10px 22px -12px rgba(11,13,18,.5)}
.knopf:hover{transform:translateY(-1.5px);box-shadow:0 2px 4px rgba(11,13,18,.18),0 16px 30px -14px rgba(11,13,18,.55)}
.knopf:active{transform:translateY(0)}
.knopf[disabled]{opacity:.55;cursor:default;transform:none}
[data-ton="dunkel"] .knopf{background:var(--papier);color:var(--tinte)}
.knopf-2{background:transparent;color:var(--text);border-color:var(--linie-stark);box-shadow:none}
.knopf-2:hover{background:var(--grund-2);box-shadow:none}
[data-ton="dunkel"] .knopf-2{background:transparent;color:var(--text)}
.knopf-akzent{background:var(--akzent);color:#fff}
.knopf-klein{padding:.5rem .95rem;font-size:.88rem}

/* ---------- Hero ---------- */
.hero{background:var(--tinte);color:#F4F3F0;position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-30% -10% auto;height:110%;z-index:-1;
  background:radial-gradient(60% 55% at 22% 18%,rgba(45,67,232,.34),transparent 70%),
             radial-gradient(52% 50% at 82% 30%,rgba(238,113,73,.26),transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(70% 60% at 50% 35%,#000,transparent 75%)}
.hero .innen{padding-top:clamp(3.4rem,7vw,6rem);padding-bottom:0}
.hero-kopf{max-width:50rem}
.hero h1{font-size:clamp(2.45rem,5.9vw,4.7rem);letter-spacing:-.035em;line-height:1.03}
.hero h1 .kursiv{color:#fff}
.hero .fuehrung{color:#C6CAD6;margin-top:1.45rem;max-width:50ch}
.hero-versprechen{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-bottom:1.6rem;
  font-size:clamp(.95rem,1.3vw,1.08rem);font-weight:500;color:#fff}
.hero-versprechen span{padding:.38rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.055);backdrop-filter:blur(6px)}
.hero-versprechen span.kuehl{border-color:rgba(109,135,255,.5);background:rgba(45,67,232,.2)}
.hero-versprechen span.warm{border-color:rgba(238,113,73,.5);background:rgba(238,113,73,.18)}
.hero-tun{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.2rem;align-items:center}
.hero-merkmale{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;margin-top:2.6rem;
  font-size:.86rem;color:#8E96A8}
.hero-merkmale li{display:flex;align-items:center;gap:.5rem;list-style:none}
.hero-merkmale li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
.hero-merkmale{padding:0;margin-inline:0}
.hero-bild{margin-top:clamp(2.8rem,5vw,4.5rem);position:relative}
.hero-bild img{width:100%;border-radius:var(--r-l) var(--r-l) 0 0;border:1px solid rgba(255,255,255,.14);
  border-bottom:0;box-shadow:0 -1px 0 rgba(255,255,255,.1),0 -40px 90px -50px rgba(45,67,232,.8)}
.hero-bild figcaption{position:absolute;bottom:1rem;left:1rem;right:1rem;font-size:.74rem;color:#A8AEBD;
  background:rgba(11,13,18,.72);backdrop-filter:blur(8px);padding:.4rem .7rem;border-radius:999px;
  width:max-content;max-width:calc(100% - 2rem);border:1px solid rgba(255,255,255,.1)}

/* ---------- Problem-Säulen ---------- */
.saeulen{display:grid;gap:clamp(1.2rem,2.4vw,2rem);margin-top:clamp(2.4rem,4vw,3.4rem)}
@media(min-width:800px){.saeulen{grid-template-columns:1fr 1fr}}
.saeule{padding:clamp(1.6rem,2.6vw,2.3rem);background:var(--karte);border:1px solid var(--karte-rand);
  border-radius:var(--r-l);box-shadow:var(--schatten);position:relative;overflow:hidden}
.saeule::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--akzent);opacity:.85}
.saeule:nth-child(2)::before{background:var(--effektivitaet)}
.saeule .nr{font-family:"Instrument Serif",Georgia,serif;font-size:2.4rem;line-height:1;color:var(--text-still);
  display:block;margin-bottom:.7rem}
.saeule h3{font-size:clamp(1.22rem,1.8vw,1.5rem);margin-bottom:.6rem}
.saeule p{margin:0;color:var(--text-leise)}

/* ---------- Hemisphären-Übersicht ---------- */
.uebersicht{display:grid;gap:clamp(1.4rem,3vw,2.6rem);align-items:start}
@media(min-width:900px){.uebersicht{grid-template-columns:1fr 1fr}}
.halbkarte{border-radius:var(--r-l);padding:clamp(1.5rem,2.6vw,2.2rem);border:1px solid var(--karte-rand);
  background:var(--karte);box-shadow:var(--schatten);display:flex;flex-direction:column;gap:1.1rem}
.halbkarte.kuehl{background:linear-gradient(170deg,var(--effizienz-hell),var(--karte) 60%)}
.halbkarte.warm{background:linear-gradient(170deg,var(--effektivitaet-hell),var(--karte) 60%)}
.halbkarte .marke-zeile{display:flex;align-items:center;gap:.7rem;font-size:.78rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise)}
.halbkarte .scheibe{width:1.5rem;height:1.5rem;border-radius:50%;flex:none}
.kuehl .scheibe{background:conic-gradient(from 180deg,var(--effizienz) 0 50%,transparent 50%);
  border:1.5px solid var(--effizienz)}
.warm .scheibe{background:conic-gradient(from 0deg,var(--effektivitaet) 0 50%,transparent 50%);
  border:1.5px solid var(--effektivitaet)}
.halbkarte ol{margin:0;padding:0;list-style:none;display:grid;gap:.1rem;counter-reset:k}
.halbkarte ol li{display:flex;gap:.8rem;align-items:baseline;padding:.55rem 0;border-top:1px solid var(--linie);
  font-size:.97rem}
.halbkarte ol li .n{font-variant-numeric:tabular-nums;color:var(--text-still);font-size:.82rem;flex:none;width:1.6rem}
.halbkarte ol li b{font-weight:500}
.halbkarte ol li .z{margin-left:auto;color:var(--text-still);font-size:.8rem;flex:none}

/* ---------- Hemisphären-Sektion ---------- */
.hemi{position:relative}
.hemi.kuehl{--akzent:var(--effizienz);--akzent-hell:var(--effizienz-hell);--akzent-tief:var(--effizienz-tief)}
.hemi-kopf{padding-block:clamp(3.4rem,7vw,6rem) clamp(2rem,4vw,3rem);position:relative}
.hemi-kopf .zeile{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.hemi-nummer{font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:.4rem .85rem;border-radius:999px;background:var(--akzent);color:#fff}
.hemi-fuer{font-size:.82rem;color:var(--text-leise)}
.hemi-kopf h2{font-size:clamp(2.1rem,5vw,3.7rem)}
.hemi-kopf .versprechen{font-family:"Instrument Serif",Georgia,serif;font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.65rem);line-height:1.35;color:var(--akzent);margin-top:1rem;max-width:34ch}
[data-ton="dunkel"] .hemi-kopf .versprechen{color:var(--akzent-tief)}
.hemi-kopf .fuehrung{margin-top:1.3rem}
.hemi-leiste{height:4px;background:linear-gradient(90deg,var(--akzent),transparent)}

/* ---------- Kategorie ---------- */
.kategorie{padding-block:clamp(2.2rem,4vw,3.4rem);border-top:1px solid var(--linie)}
.kat-kopf{display:grid;gap:.6rem 2rem;margin-bottom:clamp(1.4rem,2.4vw,2rem);align-items:baseline}
@media(min-width:1000px){.kat-kopf{grid-template-columns:auto 1fr;}}
.kat-nr{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(2.2rem,4vw,3.2rem);line-height:.9;
  color:var(--akzent);opacity:.85;font-variant-numeric:tabular-nums}
.kat-kopf h3{font-size:clamp(1.4rem,2.4vw,1.95rem)}
.kat-kopf .einleitung{color:var(--text-leise);margin:.35rem 0 0;max-width:60ch}

.karten{display:grid;gap:clamp(.9rem,1.6vw,1.3rem)}
@media(min-width:680px){.karten{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.karten{grid-template-columns:repeat(3,1fr)}}

.karte{background:var(--karte);border:1px solid var(--karte-rand);border-radius:var(--r);
  display:flex;flex-direction:column;box-shadow:var(--schatten);position:relative;
  transition:box-shadow .25s var(--fed),transform .25s var(--fed),border-color .25s}
.karte:hover{box-shadow:var(--schatten-l);border-color:var(--linie-stark)}
.karte-text{padding:clamp(1.15rem,1.9vw,1.5rem);display:flex;flex-direction:column;gap:.55rem;flex:1}
.karte .kennung{font-size:.72rem;font-weight:600;letter-spacing:.06em;color:var(--akzent);
  font-variant-numeric:tabular-nums}
.karte h4{font-size:1.08rem;letter-spacing:-.022em;line-height:1.2}
.karte .claim{font-weight:600;font-size:.99rem;letter-spacing:-.014em;margin:0}
.karte p.beschreibung{margin:0;font-size:.93rem;line-height:1.56;color:var(--text-leise)}

/* ---------- Plus-Karte (Feature-Vorschlag) ---------- */
.plus-karte{grid-column:1/-1;border:1.5px dashed var(--linie-stark);border-radius:var(--r);
  background:transparent;display:flex;align-items:center;gap:1.1rem;padding:1.1rem 1.3rem;
  text-align:left;cursor:pointer;width:100%;transition:border-color .2s,background .2s,transform .2s var(--fed)}
.plus-karte:hover{border-color:var(--akzent);background:var(--akzent-hell);transform:translateY(-1px)}
.plus-karte .plus{width:2.6rem;height:2.6rem;border-radius:50%;border:1.5px solid var(--linie-stark);
  display:grid;place-items:center;flex:none;font-size:1.5rem;line-height:1;color:var(--akzent);
  transition:border-color .2s,background .2s}
.plus-karte:hover .plus{border-color:var(--akzent);background:var(--karte)}
.plus-karte b{display:block;font-size:.98rem;font-weight:600}
.plus-karte span.hinweis{font-size:.87rem;color:var(--text-leise)}
.plus-karte.gross{padding:clamp(1.3rem,2.4vw,2rem);border-radius:var(--r-l);gap:1.4rem}
.plus-karte.gross .plus{width:3.2rem;height:3.2rem;font-size:1.9rem}

/* ---------- Rückmeldeleiste ---------- */
.rueck{border-top:1px solid var(--linie);padding:.5rem .6rem;display:flex;align-items:center;gap:.2rem;
  flex-wrap:wrap}
.rueck button{background:none;border:1px solid transparent;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:.33rem;padding:.33rem .55rem;font-size:.82rem;
  color:var(--text-still);transition:color .16s,background .16s,border-color .16s}
.rueck button:hover{color:var(--text);background:var(--grund-2)}
.rueck button svg{width:15px;height:15px;flex:none}
.rueck button .z{font-variant-numeric:tabular-nums;font-weight:600;min-width:.6em}
.rueck button.daumen.an{color:var(--akzent);background:var(--akzent-hell);border-color:color-mix(in srgb,var(--akzent) 30%,transparent)}
.rueck button.runter.an{color:var(--effektivitaet-tief);background:var(--effektivitaet-hell);
  border-color:rgba(238,113,73,.35)}
[data-ton="dunkel"] .rueck button.runter.an{color:#FFB79B;background:rgba(238,113,73,.18)}
.rueck .fuell{margin-left:auto}
.rueck button.mikro.laeuft{color:#fff;background:#D33B2C;border-color:#D33B2C;animation:pulsen 1.5s infinite}
@keyframes pulsen{0%,100%{box-shadow:0 0 0 0 rgba(211,59,44,.5)}50%{box-shadow:0 0 0 6px rgba(211,59,44,0)}}
.rueck button.info.an{color:var(--text);background:var(--grund-2)}
.rueck .punkt-neu{width:5px;height:5px;border-radius:50%;background:var(--gold);margin-left:.1rem}

/* ---------- Gesprächsfach ---------- */
.fach{border-top:1px solid var(--linie);display:none;padding:.9rem clamp(1.15rem,1.9vw,1.5rem) 1.1rem;
  background:var(--grund-2)}
.fach.auf{display:block;animation:einblenden .28s var(--fed)}
@keyframes einblenden{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.fach .leer{font-size:.88rem;color:var(--text-still);margin:0 0 .8rem}
.beitrag{padding:.6rem 0;border-top:1px solid var(--linie)}
.beitrag:first-of-type{border-top:0}
.beitrag .wer{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-leise);margin-bottom:.25rem;
  flex-wrap:wrap}
.beitrag .wer b{color:var(--text);font-weight:600}
.beitrag .wer .art{font-size:.7rem;padding:.08rem .4rem;border-radius:4px;background:var(--linie);
  color:var(--text-leise);letter-spacing:.02em}
.beitrag .wer .stimmung{font-weight:600}
.beitrag .wer .stimmung.gut{color:var(--akzent)}
.beitrag .wer .stimmung.schlecht{color:var(--effektivitaet-tief)}
[data-ton="dunkel"] .beitrag .wer .stimmung.schlecht{color:#FFB79B}
.beitrag p{margin:0;font-size:.92rem;line-height:1.55}
.beitrag .antworten{margin:.5rem 0 0;padding-left:.9rem;border-left:2px solid var(--linie)}
.beitrag .antwort-knopf{background:none;border:0;padding:.2rem 0;margin-top:.3rem;font-size:.8rem;
  color:var(--text-still);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.beitrag .antwort-knopf:hover{color:var(--text)}
.schreiben{display:flex;gap:.5rem;align-items:flex-end;margin-top:.9rem}
.schreiben textarea{flex:1;min-height:2.6rem;max-height:9rem;resize:vertical;padding:.55rem .75rem;
  border:1px solid var(--linie-stark);border-radius:var(--r-s);background:var(--karte);font-size:.92rem;
  line-height:1.45;font-family:inherit}
.schreiben textarea::placeholder{color:var(--text-still)}

/* ---------- Produktansicht (Mockup-Block) ---------- */
.ansicht{margin-top:clamp(2rem,4vw,3.4rem);border-radius:var(--r-l);overflow:hidden;
  border:1px solid var(--karte-rand);background:var(--karte);box-shadow:var(--schatten-l)}
.ansicht img{width:100%}
.ansicht figcaption{padding:.85rem 1.2rem;font-size:.84rem;color:var(--text-leise);
  border-top:1px solid var(--linie);display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.ansicht figcaption b{color:var(--text);font-weight:600}
.ansicht figcaption .studie-marke{margin-left:auto;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-still)}
.bild-paar{display:grid;gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:860px){.bild-paar{grid-template-columns:1fr 1fr}}

/* ---------- Haltung ---------- */
.nicht-liste{display:grid;gap:.1rem;margin:clamp(1.6rem,3vw,2.4rem) 0 0;padding:0;list-style:none;max-width:46rem}
.nicht-liste li{display:flex;gap:.9rem;align-items:flex-start;padding:.8rem 0;border-top:1px solid var(--linie);
  font-size:1rem;color:var(--text-leise)}
.nicht-liste li svg{width:17px;height:17px;flex:none;margin-top:.22rem;color:var(--text-still)}

/* ---------- Newsletter ---------- */
.news{display:grid;gap:clamp(1.6rem,3vw,3rem);align-items:center}
@media(min-width:900px){.news{grid-template-columns:1.05fr .95fr}}
.news-form{background:var(--karte);border:1px solid var(--karte-rand);border-radius:var(--r-l);
  padding:clamp(1.4rem,2.6vw,2.1rem);box-shadow:var(--schatten)}
.feld{display:block;margin-bottom:.9rem}
.feld span{display:block;font-size:.84rem;font-weight:600;margin-bottom:.35rem}
.feld input{width:100%;padding:.78rem .9rem;border:1px solid var(--linie-stark);border-radius:var(--r-s);
  background:var(--grund);font-size:1rem}
.zustimmung{display:flex;gap:.65rem;align-items:flex-start;font-size:.85rem;color:var(--text-leise);
  margin:.3rem 0 1.1rem;line-height:1.45}
.zustimmung input{margin-top:.22rem;width:1.05rem;height:1.05rem;accent-color:var(--akzent);flex:none}
.news-form .antwort{margin:.8rem 0 0;font-size:.9rem;min-height:1.2em}
.news-form .antwort.gut{color:var(--akzent)}
.news-form .antwort.schlecht{color:#D33B2C}

/* ---------- Fuß ---------- */
.fuss{background:var(--tinte);color:#9AA1B0;font-size:.88rem;padding-block:clamp(2.6rem,5vw,4rem)}
.fuss .innen{display:grid;gap:1.6rem}
@media(min-width:800px){.fuss .innen{grid-template-columns:1.4fr 1fr 1fr}}
.fuss .marke{color:#fff;font-size:1.15rem;margin-bottom:.7rem}
.fuss h5{margin:0 0 .6rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#6C7486;font-weight:600}
.fuss ul{margin:0;padding:0;list-style:none;display:grid;gap:.35rem}
.fuss a:hover{color:#fff}
.fuss .klein{font-size:.8rem;color:#6C7486;max-width:46ch}

/* ---------- Meldungen ---------- */
.meldungen{position:fixed;bottom:1.1rem;left:1.1rem;z-index:90;display:flex;flex-direction:column;gap:.5rem;
  max-width:min(24rem,calc(100vw - 2.2rem));pointer-events:none}
.meldung{background:var(--tinte);color:#F2F1EE;border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  padding:.65rem .9rem;font-size:.88rem;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);pointer-events:auto;
  animation:einfahren .3s var(--fed);display:flex;gap:.6rem;align-items:flex-start}
.meldung.weg{animation:ausfahren .25s var(--fed) forwards}
.meldung b{color:#fff;font-weight:600}
.meldung.fehler{border-color:rgba(211,59,44,.6)}
.meldung .strich{width:3px;border-radius:2px;background:var(--gold);align-self:stretch;flex:none}
.meldung.fehler .strich{background:#D33B2C}
@keyframes einfahren{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ausfahren{to{opacity:0;transform:translateY(8px) scale(.97)}}

/* ---------- Dialog ---------- */
dialog.schicht{border:0;padding:0;background:transparent;max-width:min(34rem,calc(100vw - 2rem));width:100%}
dialog.schicht::backdrop{background:rgba(8,10,14,.62);backdrop-filter:blur(5px)}
.dialog-kasten{background:var(--papier);color:#12151B;border-radius:var(--r-l);padding:clamp(1.5rem,3vw,2.2rem);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);border:1px solid rgba(18,21,27,.1)}
.dialog-kasten h3{font-size:1.4rem;margin-bottom:.5rem}
.dialog-kasten p{color:#5A6070;font-size:.95rem;margin:0 0 1.2rem}
.dialog-kasten .reihe{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem;align-items:center}
.dialog-kasten textarea{width:100%;min-height:6.5rem;padding:.7rem .85rem;border:1px solid rgba(18,21,27,.18);
  border-radius:var(--r-s);font-family:inherit;font-size:.95rem;resize:vertical;background:#fff}
.dialog-kasten input[type=text]{width:100%;padding:.78rem .9rem;border:1px solid rgba(18,21,27,.18);
  border-radius:var(--r-s);font-size:1rem;background:#fff}
.dialog-kasten .oder{display:flex;align-items:center;gap:.8rem;margin:1rem 0;color:#8A8F9E;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase}
.dialog-kasten .oder::before,.dialog-kasten .oder::after{content:"";flex:1;height:1px;background:rgba(18,21,27,.12)}
.dialog-kasten .schliessen{background:none;border:0;color:#8A8F9E;cursor:pointer;font-size:.88rem;
  margin-left:auto;padding:.4rem}
.dialog-kasten .schliessen:hover{color:#12151B}
.mikro-gross{display:inline-flex;align-items:center;gap:.6rem}

/* ---------- Bewegung ---------- */
.auf-zeigen{opacity:0;transform:translateY(16px)}
.auf-zeigen.sichtbar{opacity:1;transform:none;transition:opacity .7s var(--fed),transform .7s var(--fed)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .auf-zeigen{opacity:1;transform:none}
}

/* ---------- Vorschlagsleiste (unter der Plus-Karte) ---------- */
.plus-bereich{margin-top:clamp(1.6rem,3vw,2.4rem)}
.vorschlag-leiste{grid-column:1/-1;display:flex;justify-content:flex-end;margin-top:-.2rem}
.vorschlag-leiste .zeiger{background:none;border:0;cursor:pointer;font-size:.85rem;color:var(--text-leise);
  padding:.35rem .5rem;border-radius:var(--r-s);display:inline-flex;gap:.4rem;align-items:center}
.vorschlag-leiste .zeiger:hover{color:var(--text);background:var(--grund-2)}
.vorschlag-leiste .zeiger .z{font-weight:600;font-variant-numeric:tabular-nums;color:var(--akzent)}
.fach-breit{grid-column:1/-1;border:1px solid var(--linie);border-top:1px solid var(--linie);
  border-radius:var(--r);margin-top:.5rem}

/* ---------- Nachbesserungen ---------- */
/* Eine Klasse mit display:flex schlägt sonst das hidden-Attribut. */
.vorschlag-leiste[hidden]{display:none}
.fach[hidden]{display:none}
.fuss .klein{color:#8A92A4}
.fuss ul{color:#9AA1B0}
/* Kästchen auf dunklem Grund: das Standard-Weiß wirkt wie ein Loch. */
[data-ton="dunkel"] .zustimmung input[type=checkbox]{appearance:none;border:1.5px solid var(--linie-stark);
  border-radius:4px;background:rgba(255,255,255,.06);display:grid;place-items:center;cursor:pointer}
[data-ton="dunkel"] .zustimmung input[type=checkbox]:checked{background:var(--akzent);border-color:var(--akzent)}
[data-ton="dunkel"] .zustimmung input[type=checkbox]:checked::after{content:"";width:.3rem;height:.55rem;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg) translate(-1px,-1px)}
/* Newsletter schließt direkt an den Fuß an, das Dunkel läuft durch. */
#newsletter{padding-bottom:clamp(3rem,5vw,4.5rem)}
/* Auf schmalen Geräten trägt der Kopf nur Marke und Namen; die Sprungmarken
   passen dort nicht nebeneinander und stehen ohnehin in der Übersicht. */
@media(max-width:700px){
  .kopf nav a{display:none}
  .ich{padding-left:.34rem}
  .ich .n{display:none}
  .ich button{font-size:.78rem}
}