/* ============================================================
   PLANBAR — Design System
   Typeface: Zalando Sans Variable (wdth 75–125 · wght 200–900 · slnt 0…−10)
   Eine Familie, drei Stimmen: Condensed (Daten & Labels),
   Normal (Lesetext), Expanded (Display).
   ============================================================ */

@font-face{
  font-family:"Zalando Sans Var";
  src:url("../assets/fonts/ZalandoSans-Variable.woff2") format("woff2");
  font-weight:200 900;
  font-stretch:75% 125%;
  font-display:swap;
}

:root{
  /* Farben */
  --paper:#fef7ec;
  --paper-2:#f7edda;
  --card:#FBFAF5;
  --ink:#171511;
  --ink-soft:rgba(23,21,17,.74);
  --ink-faint:rgba(23,21,17,.64);
  --line:rgba(18,41,29,.14);
  --line-strong:rgba(18,41,29,.28);
  --accent:#f3562e;
  --accent-hover:#d9431d;
  --accent-ink:#b8371a;   /* AA-tauglicher Akzent für Text/Links auf hellem Grund (~5:1) */
  --dark:#171511;
  --dark-deep:#0f0d0a;
  --matcha:#e0ebde;
  --matcha-2:#cfdfca;
  --marker:#f3562e;
  --marker-ink:#171511;
  --rhubarb:#ffb09c;
  --pickle:#00363e;
  --seaweed:#565438;
  --cherry:#531f28;
  --almond:#bcad96;
  --cream:#fef7ec;
  --cream-soft:rgba(254,247,236,.76);
  --cream-line:rgba(254,247,236,.17);

  /* Typo */
  --font:"Zalando Sans Var","Zalando Sans",system-ui,"Segoe UI",Arial,sans-serif;
  --fs-hero:clamp(2.55rem,6vw,4.7rem);
  --fs-h2:clamp(1.55rem,3.3vw,2.55rem); /* kleiner seit Caps-Umstellung (einzeilig) */
  --fs-h3:clamp(1.2rem,2vw,1.45rem);
  --fs-body:clamp(1rem,1.1vw,1.075rem);
  --fs-small:.9rem;
  --fs-label:.76rem;

  /* Layout */
  --wrap:1180px;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --sec:clamp(4.5rem,9vw,7.5rem);
  --r-s:0px;
  --r-m:0px;
  --r-l:0px;
  --shadow:0 14px 40px -18px rgba(10,44,29,.28);
  --shadow-s:0 6px 20px -12px rgba(10,44,29,.25);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:92px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-body);
  font-weight:400;
  font-stretch:100%;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block}
a{color:inherit}
::selection{background:var(--marker);color:var(--ink)}

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

.skip{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--ink);color:var(--cream);padding:.7rem 1.1rem;border-radius:0;
  font-stretch:88%;font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- Typo-Rollen ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--fs-label);font-weight:640;font-stretch:82%;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft);
}
.kicker::before{content:"";width:9px;height:9px;border-radius:0;background:var(--marker);flex:none}
.on-dark .kicker{color:var(--cream-soft)}

/* Lange deutsche Woerter muessen trennen duerfen. Ohne das schob
   „Datenschutzerklärung“ die Seite auf dem Handy 98 px zur Seite —
   gemessen bei 375 px: 473 statt 375. hyphens:auto trennt, weil die
   Seiten lang="de" fuehren; overflow-wrap faengt Browser ab, die nicht
   trennen. Die Schriftgroesse bleibt unangetastet. */
h1,h2,h3,h4{overflow-wrap:break-word;hyphens:auto}
h1,h2,h3,h4{margin:0;font-stretch:118%;letter-spacing:-.015em;line-height:1.08;text-wrap:balance}
/* Briefing 11.07.: Überschriften ausschließlich Großbuchstaben, expanded, einzeilig */
h1,h2{text-transform:uppercase;letter-spacing:.012em;line-height:1.06}
h1{font-size:var(--fs-hero);font-weight:790}
h2{font-size:var(--fs-h2);font-weight:760}
.sec-head h1{font-size:var(--fs-h2);font-weight:760}  /* Unterseiten-Hauptüberschrift als h1, Optik wie h2 */
h3{font-size:var(--fs-h3);font-weight:700;font-stretch:112%;line-height:1.22}
.lead{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--ink-soft);line-height:1.65;max-width:56ch}
.on-dark .lead{color:var(--cream-soft)}
p{margin:0}

.mark{
  background:linear-gradient(120deg,var(--marker),var(--marker)) no-repeat 0 66%;
  background-size:0% .42em;
  padding:0 .06em;margin:0 -.06em;
  transition:background-size .8s cubic-bezier(.6,0,.2,1) .55s;
  border-radius:0;
}
.mark.in{background-size:100% .42em}
@media (prefers-reduced-motion:reduce){.mark{background-size:100% .42em;transition:none}}

.tilt{font-variation-settings:"slnt" -9;font-weight:640}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.92rem 1.5rem;border-radius:999px;
  font:inherit;font-weight:650;font-stretch:104%;font-size:1rem;line-height:1;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .18s ease}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--accent);color:var(--cream);box-shadow:var(--shadow-s)}
.btn-solid:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-light{background:var(--cream);color:var(--dark)}
.btn-light:hover{background:#fff;transform:translateY(-1px)}
.btn-ghost-light{border-color:var(--cream-line);color:var(--cream)}
.btn-ghost-light:hover{border-color:var(--cream)}
.btn-amber{background:var(--marker);color:var(--ink)}
.btn-amber:hover{background:#ffb09c;transform:translateY(-1px)}

:where(a,button,summary):focus-visible{outline:2.5px solid var(--marker);outline-offset:3px;border-radius:0}

/* ---------- Header ---------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease;
  border-bottom:1px solid transparent;
}
.site-head.scrolled{
  background:rgba(254,247,236,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-color:var(--line);
}
.nav{display:flex;align-items:center;gap:1.5rem;height:74px}
.brand{display:inline-flex;align-items:baseline;gap:14px;text-decoration:none;color:var(--ink)}
.brand-mark{height:20.5px;width:auto;flex:none;color:var(--accent)}
.brand-name{
  font-weight:800;font-stretch:122%;letter-spacing:.015em;font-size:1.22rem;
  transition:font-stretch .5s ease;
}
.brand:hover .brand-name{font-stretch:78%}
@media (prefers-reduced-motion:reduce){.brand:hover .brand-name{font-stretch:122%}}

.nav-links{display:flex;align-items:center;gap:.25rem;margin-left:1rem;list-style:none;padding:0}
.nav-links a{
  text-decoration:none;font-weight:560;font-stretch:96%;font-size:.96rem;color:var(--ink-soft);
  padding:.55rem .8rem;border-radius:0;position:relative;transition:color .18s ease;
}
.nav-links a::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.28rem;height:2px;
  background:var(--marker);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;border-radius:0;
}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a.active::after,.nav-links a:hover::after{transform:scaleX(1)}

/* Der Raumeditor ist der einzige Punkt in der Leiste, an dem man selbst etwas
   tun kann. Er bekommt eine umrandete Pille: eine Stufe ueber den Textlinks,
   eine Stufe unter dem gefuellten Kontakt-Knopf, damit nicht zwei Knoepfe um
   denselben Klick kaempfen. Der Unterstrich entfaellt, er wuerde in der Pille
   liegen. */
.nav-links a.nav-raum{color:var(--accent-ink);border:1.5px solid var(--accent);
  border-radius:999px;padding:.42rem .85rem;margin:0 .25rem;font-weight:660;
  transition:color .18s ease,background-color .18s ease}
.nav-links a.nav-raum::after{display:none}
.nav-links a.nav-raum:hover,.nav-links a.nav-raum.active{color:var(--cream);background:var(--accent)}
body.head-on-dark .site-head:not(.scrolled) .nav-links a.nav-raum{color:var(--accent);border-color:var(--accent)}
body.head-on-dark .site-head:not(.scrolled) .nav-links a.nav-raum:hover,
body.head-on-dark .site-head:not(.scrolled) .nav-links a.nav-raum.active{color:var(--cream);background:var(--accent)}
.mobile-menu a.nav-raum{color:var(--accent-ink);font-weight:780}
.nav-cta{margin-left:auto}
.nav-cta .btn{padding:.68rem 1.15rem;font-size:.95rem}

.nav-toggle{
  display:none;margin-left:auto;background:none;border:1.5px solid var(--line-strong);
  border-radius:0;padding:.55rem .6rem;cursor:pointer;color:var(--ink);
}
.nav-toggle svg{width:20px;height:20px}
.nav-toggle .x{display:none}

.mobile-menu{display:none}

@media (max-width:900px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:inline-flex}
  .site-head.open{background:var(--paper);border-color:var(--line)}
  .site-head.open .nav-toggle .bars{display:none}
  .site-head.open .nav-toggle .x{display:block}
  .site-head.open .mobile-menu{display:block}
  .mobile-menu{border-top:1px solid var(--line);padding:1rem var(--pad) 1.4rem;background:var(--paper)}
  .mobile-menu ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
  .mobile-menu a{display:block;padding:.85rem .35rem;text-decoration:none;font-weight:620;font-stretch:106%;font-size:1.15rem;border-bottom:1px solid var(--line)}
  .mobile-menu .btn{margin-top:1.1rem;width:100%;justify-content:center}
}

/* ---------- Unterseiten: Platz unter dem fixierten Header ---------- */
main.subpage > .sec:first-child{padding-top:calc(74px + clamp(2.8rem,6vw,4.8rem))}

/* ---------- Header-Variante für Seiten mit dunklem Einstieg ---------- */
body.head-on-dark .site-head:not(.scrolled) .nav-links a{color:var(--cream-soft)}
body.head-on-dark .site-head:not(.scrolled) .nav-links a:hover,
body.head-on-dark .site-head:not(.scrolled) .nav-links a.active{color:var(--cream)}
body.head-on-dark .site-head:not(.scrolled) .nav-toggle{color:var(--cream);border-color:var(--cream-line)}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding-top:calc(74px + clamp(3rem,7vw,5.5rem));
  padding-bottom:clamp(3.5rem,7vw,6rem);
  background:
    linear-gradient(180deg,rgba(221,229,210,.5),rgba(244,242,235,0) 46%),
    var(--paper);
}
.hero::before{ /* Planungsraster */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--line) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(18,41,29,.06) 1px,transparent 1px);
  background-size:calc(100%/12) 100%, 100% 96px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.14) 55%,transparent 92%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.14) 55%,transparent 92%);
  opacity:.5;
}
.hero .wrap{position:relative;display:block;text-align:center} /* Feedback 11.07.: Hero zentriert */
.hero h1{margin:1.1rem 0 1.3rem}
.hero h1 .ww{display:inline-block;white-space:nowrap}
.hero h1 .w{display:inline-block}
/* Briefing 10.07.: Marke groß, fett, orange — Subline als zweite Zeile */
/* Bildmarke und Wortmarke stehen nebeneinander, der Claim faellt darunter.
   Das erzwingt flex-basis:100% auf dem Claim, nicht ein Zeilenumbruch im
   Markup: die Buchstaben-Animation baut den Inhalt der Wortmarke neu auf und
   wuerde ein <br> dabei verlieren. */
/* justify-content muss mit: sobald die Ueberschrift ein Flex-Kasten ist,
   greift das geerbte text-align:center nicht mehr auf Bildmarke und
   Schriftzug, und die erste Zeile haengt links, waehrend Kicker, Claim,
   Knopf und Belegzeile mittig stehen. */
#heroH1{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  column-gap:clamp(.5rem,1.5vw,1.15rem)}
.hero-mark{flex:0 0 auto;display:inline-flex;align-items:center;color:var(--accent)}
.hero-mark svg{display:block;height:clamp(3.1rem,8.2vw,6.2rem);width:auto}
.hero-brand{flex:0 0 auto;display:block;color:var(--accent);font-size:clamp(3.6rem,9.5vw,7.2rem);line-height:.94;letter-spacing:-.022em}
.hero-tag{flex:1 0 100%;display:block;margin-top:.42em;font-size:clamp(1.5rem,3.2vw,2.45rem);line-height:1.12;color:var(--ink)}
/* Zwei kurze Zeilen statt eines Absatzes: sie sollen als Paar wirken, deshalb
   eng zusammen und beide auf der Mittelachse. */
/* 66ch statt 52ch (08.09.2026): Die Subline zählt sechs Bereiche auf und ist
   63 Zeichen lang. In der alten Breite fiel „Ein System.“ auf eine zweite
   Zeile. .hero-sub steht nur im Hero der Startseite, sonst nirgends. */
.hero-sub{max-width:66ch;margin-inline:auto;margin-top:1.4rem}
.hero-sub .lead{max-width:none;margin:0}
.hero-sub .lead + .lead{margin-top:.45rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem;justify-content:center}
.hero-proof{
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;margin-top:1.7rem;padding-top:1.35rem;
  border-top:1px solid var(--line);justify-content:center;
  font-size:var(--fs-small);color:var(--ink-soft);font-stretch:94%;font-weight:500;
}
.hero-proof span{display:inline-flex;align-items:center;gap:.45rem}
.hero-proof svg{width:15px;height:15px;color:var(--accent);flex:none}

/* ---------- Kupferstiche (CI-Bildsprache) ---------- */
.etch{margin:0;display:grid;gap:.7rem;justify-items:center}
.etch img{max-width:100%;height:auto;opacity:.92}
.etch figcaption{
  font-size:.68rem;font-weight:640;font-stretch:82%;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);white-space:normal;text-align:center;max-width:100%;text-wrap:balance;
}
.on-dark .etch figcaption{color:rgba(254,247,236,.55)}
.head-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:end;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.head-row .sec-head{margin-bottom:0}
.head-row .etch img{width:clamp(200px,25vw,320px)}
.etch-end{margin-top:clamp(2.6rem,5vw,4rem)}
.etch-end img{width:clamp(220px,30vw,330px)}
.etch-tall img{width:clamp(150px,16vw,210px)}

/* Original-Kupferstiche auf hellen Flaechen: dunkle Tafel als Rahmen */
.etch.framed{
  background:linear-gradient(180deg,#211d17,var(--dark) 60%);
  padding:clamp(1.2rem,2.6vw,1.9rem) clamp(1.2rem,2.6vw,1.9rem) clamp(.95rem,2vw,1.4rem);
  box-shadow:var(--shadow-s);
}
.etch.framed figcaption{color:rgba(254,247,236,.55)}

/* ---------- Kontaktformular — Edition 2026 (definierte Felder mit Icons) ---------- */
.form-sec{background:var(--paper-2)}
.kform{
  position:relative;background:#fffdf8;border:0;
  padding:clamp(1.9rem,4vw,3.1rem);
  box-shadow:0 34px 80px -44px rgba(23,21,17,.42),0 8px 22px -14px rgba(23,21,17,.25);
  display:grid;gap:clamp(1.5rem,2.8vw,2rem);
}
.kform::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)}
.kf-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.1rem,2.4vw,1.5rem)}

/* Feld: Label oben, gefülltes Eingabefeld mit Icon links */
.kf-field{display:grid;gap:.5rem;min-width:0}
.kf-label{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.kf-label i{font-style:normal;font-weight:600;letter-spacing:.04em;text-transform:none;opacity:.85}
.kf-input{
  display:flex;align-items:center;gap:.7rem;
  background:#fff;border:1.5px solid rgba(23,21,17,.16);border-radius:0;padding:0 .95rem;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.kf-input:hover{border-color:rgba(23,21,17,.32)}
.kf-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(243,86,46,.16)}
.kf-input svg{width:19px;height:19px;flex:none;color:var(--ink-faint);transition:color .2s ease}
.kf-input:focus-within svg{color:var(--accent)}
.kf-input input,.kf-input textarea{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  font:inherit;font-size:1.02rem;color:var(--ink);padding:.9rem 0;
}
.kf-input input::placeholder,.kf-input textarea::placeholder{color:var(--ink-faint)}
.kf-input-area{align-items:flex-start;padding:.9rem .95rem}
.kf-input-area svg{margin-top:.15rem}
.kf-input textarea{resize:vertical;min-height:150px;line-height:1.55;padding:0}
.kf-full{grid-column:1/-1}

/* Themen als Kachelraster */
.kf-themen{border:0;margin:0;padding:0;display:grid;gap:.7rem}
.kf-themen legend{padding:0;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.kf-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.kf-chips label{cursor:pointer;position:relative}
.kf-chips input{position:absolute;opacity:0;pointer-events:none}
.kf-chips span{
  display:flex;align-items:center;gap:.6rem;
  border:1.5px solid rgba(23,21,17,.16);border-radius:0;padding:.85rem 1rem;
  font-size:.95rem;font-weight:640;color:var(--ink-soft);background:#fff;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.kf-chips span::before{content:"";width:.8em;height:.8em;flex:none;border-radius:50%;border:1.6px solid currentColor;opacity:.4;transition:background-color .2s ease,border-color .2s ease,opacity .2s ease}
.kf-chips label:hover span{border-color:var(--accent);color:var(--ink)}
.kf-chips input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.kf-chips input:checked + span::before{background:var(--ink);border-color:var(--ink);opacity:1}
.kf-chips input:focus-visible + span{box-shadow:0 0 0 3px rgba(243,86,46,.28)}
@media (max-width:520px){.kf-chips{grid-template-columns:1fr}}

.kf-hp{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0}
.kf-foot{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.kf-consent{margin:0;font-size:.8rem;color:var(--ink-faint);max-width:48ch}
.kf-foot .btn{transition:transform .25s cubic-bezier(.22,1,.36,1),background-color .2s ease}
.kf-foot .btn:hover{transform:translateY(-2px)}
.kf-status{margin:0;font-size:.9rem;font-weight:600;color:var(--accent-ink)}
.kf-status:empty{display:none}
.kform-done{
  position:relative;background:linear-gradient(180deg,#211d17,var(--dark));color:var(--cream);
  padding:clamp(2rem,5vw,3.2rem);
}
.kform-done::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)}
.kform-done h3{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:760;font-stretch:114%;letter-spacing:-.015em;margin:0 0 .7rem}
.kform-done h3 em{font-style:normal;font-variation-settings:"slnt" -9;color:var(--accent)}
.kform-done p{margin:0;color:var(--cream-soft)}
@media (max-width:700px){.kf-grid{grid-template-columns:1fr}.kf-foot{justify-content:stretch}.kf-foot .btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.kf-label,.kf-chips span,.kf-foot .btn{transition:none}}

@media (max-width:820px){
  .head-row{grid-template-columns:1fr;align-items:start}
  .head-row .etch{justify-items:start}
  .head-row .etch img{width:190px}
}

/* ---------- Ticker ---------- */
.ticker{
  background:var(--dark);color:var(--cream);overflow:hidden;
  border-block:1px solid var(--dark-deep);
}
.ticker-track{display:flex;width:max-content;animation:marquee 64s linear infinite} /* 64s: gleiche Laufgeschwindigkeit bei 4 statt 2 Kopien */
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.ticker ul{
  list-style:none;margin:0;padding:.8rem 0;display:flex;align-items:center;gap:2.6rem;padding-right:2.6rem;
  font-weight:640;font-stretch:82%;letter-spacing:.16em;font-size:.82rem;text-transform:uppercase;white-space:nowrap;
}
.ticker li{display:flex;align-items:center;gap:2.6rem}
.ticker li::after{content:"";width:8px;height:8px;border-radius:0;background:var(--marker);flex:none}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;width:100%;overflow:auto}}

/* ---------- Sektionen (allgemein) ---------- */
.sec{padding-block:var(--sec)}
.sec-head{display:grid;gap:1.1rem;margin-bottom:clamp(2.5rem,5vw,4rem)} /* Breite offen seit Caps-Headlines (einzeilig); Leads begrenzt .lead auf 56ch */
/* Briefing 10.07.: Überschriften/Sublines, die auf eine Zeile sollen */
.sec-head.sh-wide{max-width:none}
.sec-head h1.h1-fit,.sec-head h2.h1-fit{font-size:clamp(1.35rem,2.85vw,2.2rem)}
.lead-line{max-width:none}
/* Sternchen-Fußnote (Preisgarantie, Briefing 10.07.) */
.fine-note{margin:1.1rem 0 0;font-size:.8rem;color:var(--ink-faint)}
.on-dark .fine-note,.ed-dark .fine-note{color:rgba(254,247,236,.6)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .kicker{justify-content:center}
.sec-head.center .lead{margin-inline:auto}

.on-dark{background:var(--dark);color:var(--cream)}
.on-dark ::selection{background:var(--marker);color:var(--ink)}

/* ---------- Problem ---------- */
.problem{position:relative;overflow:hidden}
.problem::after{
  content:"";position:absolute;right:-140px;top:-140px;width:460px;height:460px;border-radius:0;
  background:radial-gradient(closest-side,rgba(242,178,60,.14),transparent 70%);pointer-events:none;
}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.5rem}
.pain{
  border:1px solid var(--cream-line);border-radius:0;padding:1.5rem 1.4rem;
  background:rgba(246,244,236,.045);
}
.pain q,.pain .pain-t{
  quotes:"„" "“";display:block;font-weight:720;font-stretch:112%;font-size:1.14rem;
  letter-spacing:-.01em;line-height:1.3;margin:0 0 .6rem;text-transform:none;
}
.pain q .strike,.pain .pain-t .strike{color:var(--marker);font-variation-settings:"slnt" -9;white-space:nowrap}
.pain p{color:var(--cream-soft);font-size:.96rem}
.problem-punch{
  margin-top:clamp(2.4rem,5vw,3.6rem);
  font-size:clamp(1.3rem,2.45vw,2.15rem);font-weight:730;font-stretch:116%;letter-spacing:-.015em;line-height:1.15;
}
.problem-punch em{
  font-style:normal;font-variation-settings:"slnt" -9;color:var(--marker);
}
@media (max-width:860px){.pain-grid{grid-template-columns:1fr}}

/* ---------- 3-Schritte-System ---------- */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.step{
  counter-increment:step;position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:0;
  padding:1.7rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.75rem;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.step-no{
  font-weight:800;font-stretch:76%;font-size:2.6rem;line-height:1;letter-spacing:.01em;color:var(--matcha-2);
}
.step-no::before{content:"0" counter(step)}
.step:hover .step-no{color:var(--marker)}
.step h3{margin-top:.1rem}
.step p{color:var(--ink-soft);font-size:.98rem}
.step-tag{
  align-self:flex-start;font-size:.7rem;font-weight:660;font-stretch:84%;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--matcha);padding:.3rem .6rem;border-radius:0;
}
.step-arrow{
  position:absolute;top:50%;right:-19px;transform:translateY(-50%);z-index:2;
  width:38px;height:38px;border-radius:0;background:var(--paper);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-soft);
}
.step-arrow svg{width:16px;height:16px}
.step:last-child .step-arrow{display:none}
.steps-cta{margin-top:2.2rem;display:flex;justify-content:center}
@media (max-width:900px){
  .steps{grid-template-columns:1fr}
  .step-arrow{top:auto;bottom:-19px;right:auto;left:50%;transform:translateX(-50%) rotate(90deg)}
}

/* ---------- Vorteile ---------- */
.sec-alt{background:var(--paper-2);border-block:1px solid var(--line)}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.benefit{
  background:var(--card);border:1px solid var(--line);border-radius:0;
  padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.8rem;
  transition:transform .25s ease,box-shadow .25s ease;
}
.benefit:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.benefit-tag{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:670;font-stretch:82%;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);
}
.benefit-tag::before{content:"";width:22px;height:2.5px;background:var(--marker);border-radius:0}
.benefit p{color:var(--ink-soft);font-size:.98rem;flex:1}
.mini{
  margin-top:.4rem;border-top:1px dashed var(--line);padding-top:1rem;
  min-height:86px;display:flex;align-items:flex-end;
}
/* Mini 1: Balken Einkauf */
.mini-bars{display:flex;align-items:flex-end;gap:1.4rem;width:100%}
.mini-bar{flex:1;display:grid;gap:.35rem;justify-items:center}
.mini-bar i{width:100%;max-width:74px;border-radius:0;background:var(--matcha-2);height:58px}
.mini-bar.b2 i{height:34px;background:var(--accent)}
.mini-bar span{font-size:.66rem;font-weight:620;font-stretch:84%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.mini-bar.b2 span{color:var(--accent-ink)}
/* Mini 2: Prep-Checks */
.mini-checks{display:grid;gap:.45rem;width:100%;font-stretch:92%;font-size:.85rem}
.mini-checks div{display:flex;align-items:center;gap:.55rem;color:var(--ink-soft)}
.mini-checks svg{width:15px;height:15px;color:var(--accent);flex:none}
.mini-checks i{flex:1;border-bottom:1.5px dashed var(--line);transform:translateY(2px)}
.mini-checks b{font-weight:700;font-stretch:82%}
/* Mini 3: Gewinnlinie */
.mini-chart{width:100%}
.mini-chart svg{width:100%;height:74px;overflow:visible}
.mini-chart .grid-l{stroke:var(--line);stroke-width:1}
.mini-chart .pl{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.mini-chart .dot{fill:var(--marker);stroke:var(--card);stroke-width:2}
.mini-chart text{font:640 9.5px var(--font);font-stretch:84%;letter-spacing:.08em;fill:var(--ink-faint);text-transform:uppercase}
@media (max-width:900px){.benefits{grid-template-columns:1fr}.mini{min-height:0}}

/* ---------- Wirkung / Zahl + Fonds ---------- */
.impact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.big-num{
  font-weight:820;font-stretch:75%;letter-spacing:.005em;line-height:.95;
  font-size:clamp(4rem,10vw,7.6rem);font-feature-settings:"tnum";
  color:var(--accent);
}
.big-num sup{font-size:.32em;font-stretch:100%;font-weight:700;vertical-align:.9em;letter-spacing:0;color:var(--marker-ink)}
.impact-note{margin-top:1.2rem;color:var(--ink-soft);max-width:44ch}
.impact-note b{font-weight:680}
.impact-fine{margin-top:.9rem;font-size:.8rem;color:var(--ink-faint);max-width:46ch}

.fonds{background:var(--card);border:1px solid var(--line);border-radius:0;padding:1.9rem 1.7rem;box-shadow:var(--shadow-s)}
.fonds h3{margin-bottom:.55rem}
.fonds > p{color:var(--ink-soft);font-size:.97rem;margin-bottom:1.5rem}
.fonds-bar{display:flex;height:56px;border-radius:0;overflow:hidden;border:1px solid var(--line)}
.fonds-bar i{
  display:grid;place-items:center;font-weight:780;font-stretch:80%;font-size:1rem;font-style:normal;
  color:var(--cream);transition:flex-grow 1s cubic-bezier(.6,0,.2,1);
  flex-grow:1;flex-basis:0;min-width:0;
}
.fonds-bar .f1{background:var(--accent)}
.fonds-bar .f2{background:#00363e}
.fonds-bar .f3{background:#565438;}
.fonds-bar .f4{background:var(--marker);color:var(--ink)}
.impact.in .fonds-bar .f1{flex-grow:4}
.impact.in .fonds-bar .f2{flex-grow:3}
.impact.in .fonds-bar .f3{flex-grow:2}
.impact.in .fonds-bar .f4{flex-grow:1}
@media (prefers-reduced-motion:reduce){
  .fonds-bar .f1{flex-grow:4}.fonds-bar .f2{flex-grow:3}.fonds-bar .f3{flex-grow:2}.fonds-bar .f4{flex-grow:1}
}
.fonds-legend{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.55rem}
.fonds-legend li{display:flex;gap:.7rem;align-items:baseline;font-size:.93rem;color:var(--ink-soft)}
.fonds-legend b{font-weight:780;font-stretch:80%;color:var(--ink);min-width:3.1em;font-feature-settings:"tnum"}
.fonds-legend i{width:10px;height:10px;border-radius:0;flex:none;transform:translateY(.5px)}
.fonds-tag{
  margin-top:1.3rem;padding-top:1.1rem;border-top:1px dashed var(--line);
  font-size:.78rem;font-weight:650;font-stretch:84%;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);
}
@media (max-width:960px){.impact .wrap{grid-template-columns:1fr}}

/* ---------- Pioniere ---------- */
.pioneer{position:relative;overflow:hidden}
.pioneer::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(to right,var(--cream-line) 1px,transparent 1px);
  background-size:calc(100%/12) 100%;
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.pioneer .wrap{position:relative}
.badge-limit{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--marker);color:var(--ink);border-radius:0;
  padding:.42rem .95rem;font-size:.74rem;font-weight:700;font-stretch:86%;letter-spacing:.13em;text-transform:uppercase;
}
.perks{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:.4rem}
.perk{
  border:1px solid var(--cream-line);border-radius:0;padding:1.4rem 1.3rem;
  background:rgba(246,244,236,.05);display:flex;flex-direction:column;gap:.7rem;
  transition:background-color .25s ease,transform .25s ease;
}
.perk:hover{background:rgba(246,244,236,.09);transform:translateY(-3px)}
.perk-ic{
  width:42px;height:42px;border-radius:0;display:grid;place-items:center;
  background:rgba(242,178,60,.16);color:var(--marker);
}
.perk-ic svg{width:21px;height:21px}
.perk h3{font-size:1.06rem;font-stretch:110%}
.perk p{color:var(--cream-soft);font-size:.92rem}
.perk .price-hint{font-weight:760;font-stretch:84%;color:var(--marker)}

.timeline{
  margin-top:clamp(2.6rem,5vw,3.8rem);padding-top:clamp(2.2rem,4vw,3rem);
  border-top:1px solid var(--cream-line);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;counter-reset:tl;
}
.tl-step{counter-increment:tl;position:relative;padding-top:1.4rem}
.tl-step::before{
  content:"0" counter(tl);position:absolute;top:-1.05rem;left:0;
  font-weight:800;font-stretch:76%;font-size:.9rem;letter-spacing:.06em;
  background:var(--dark);color:var(--marker);padding:.45rem .1rem .45rem 0;padding-right:.9rem;
}
.tl-step::after{
  content:"";position:absolute;top:-.32rem;left:0;right:-1.4rem;height:1.5px;background:var(--cream-line);z-index:-1;
}
.tl-step:last-child::after{right:0}
.tl-step h3{font-size:1.02rem;font-stretch:110%;margin-bottom:.4rem}
.tl-step p{color:var(--cream-soft);font-size:.9rem}
.pioneer-cta{margin-top:2.6rem;display:flex;gap:.8rem;flex-wrap:wrap}
@media (max-width:980px){.perks{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.timeline{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.perks,.timeline{grid-template-columns:1fr}}

/* ---------- Preise ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;align-items:stretch}
/* Vier Pakete statt drei. Die Fussnote je Karte traegt den Vorbehalt, der zum
   Preis gehoert (TSE, vorhandene Kasse). Signature ist sichtbar, aber nicht
   buchbar: gedaempft, ohne Knopf, mit stillem Hinweis an dessen Stelle. */
/* Der Umfang steht einmal in der Vergleichstabelle statt dreimal als lange
   Aufzaehlung. In den Karten stehen nur noch die Punkte, die die Pakete
   voneinander unterscheiden. */

.paket-huelle{margin-top:2.4rem;overflow-x:auto}
.paket-tab{width:100%;border-collapse:collapse;font-size:.86rem}
/* Der Tabellentitel war eine kleine Beschriftung. Er traegt jetzt die Typografie
   der Abschnitts-Ueberschriften des Hauses: Versalien, 118 Prozent Breite, enge
   Sperrung. Kleiner als die H1 der Seite, damit er ihr nicht die Schau stiehlt. */
.paket-tab caption{text-align:left;padding-bottom:.85rem;
  font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:800;font-stretch:118%;
  letter-spacing:.012em;text-transform:uppercase;color:var(--ink);line-height:1.08}
.paket-tab th,.paket-tab td{border-bottom:1px solid var(--line);padding:.5rem .6rem;vertical-align:middle}
/* Die Breiten standen bisher nur auf den Koerperzellen. Die Kopfzellen hatten
   keine, also verteilte der Browser die Spalten nach dem laengsten Kopftext und
   die drei Paketspalten wurden unterschiedlich breit. Jetzt tragen Kopf und
   Koerper dieselben Angaben, damit die Namen ueber ihren Haken stehen. */
.paket-tab thead th{font-size:.74rem;font-weight:700;font-stretch:88%;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);text-align:center;width:18%;
  border-bottom:1.5px solid var(--line-strong)}
.paket-tab thead th:first-child{text-align:left;width:46%}
/* Zwei Zeilen tragen keine Unterzeile und waren dadurch niedriger als die
   uebrigen acht. Eine Mindesthoehe je Zeile haelt den Abstand gleich; Zeilen
   mit mehr Inhalt duerfen weiterhin wachsen. Spaltenbreiten bleiben unberuehrt. */
.paket-tab tbody tr{height:3.2rem}
.paket-tab tbody th{text-align:left;font-weight:650;line-height:1.3;width:46%}
.paket-tab tbody th span{display:block;font-weight:400;font-size:.78rem;color:var(--ink-faint);line-height:1.35}
.paket-tab td{text-align:center;width:18%}
/* Die Haken sind Bloecke; text-align greift bei ihnen nicht, sie sassen
   deshalb am linken Zellenrand statt unter der Spaltenueberschrift. */
.paket-tab td svg{width:17px;height:17px;margin-inline:auto}
.paket-tab .ja{color:var(--accent)}
.paket-tab .nein{color:var(--line-strong)}
/* Das Pruefbuch ist in keinem Paket ohne Zusatz zu haben. Statt in jede der
   drei Spalten ein eigenes Sternchen zu setzen, steht eines mittig ueber alle
   drei: so ist zu sehen, dass die Einschraenkung fuer alle gilt. */
.paket-tab .stern{text-align:center;font-weight:700;font-size:1.05rem;color:var(--ink-soft)}
/* Der Stern haengt am Namen, nicht in den Spalten: das Pruefbuch braucht
   Hardware, der Aufpreis gilt also fuer die Zeile und nicht fuer ein Paket. */
.stern-mark{display:inline;font-weight:700;color:var(--ink);
  margin-left:.1em;vertical-align:super;font-size:.8em}
.paket-fuss{margin:.75rem 0 0;font-size:.78rem;color:var(--ink-faint);line-height:1.5}
.paket-tab .sig{color:var(--ink-faint);font-size:.8rem;line-height:1.4;background:rgba(23,21,17,.03)}
.paket-fuss{margin-top:.9rem;font-size:.78rem;color:var(--ink-faint);line-height:1.5}
.paket-fuss sup{font-weight:700;color:var(--ink-soft)}
@media (max-width:820px){.paket-tab{min-width:620px}}

.plan-fine{margin:0;font-size:.78rem;line-height:1.45;color:var(--ink-faint)}
.plan-hi .plan-fine{color:rgba(23,21,17,.8)}
.plan-soon{opacity:.66}
.plan-hint{margin:auto 0 0;text-align:center;padding:.9rem 1.2rem;
  border:1.5px dashed var(--line-strong);font-size:.9rem;font-weight:650;color:var(--ink-faint)}
.plan{
  background:var(--card);border:1.5px solid var(--line-strong);border-radius:0;
  padding:1.8rem 1.6rem;display:flex;flex-direction:column;gap:1.1rem;position:relative;
  transition:transform .25s ease,box-shadow .25s ease;
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
/* Der Paketname war eine kleine Beschriftung ueber dem Preis und ging neben
   der grossen Zahl unter. Jetzt traegt er selbst Gewicht: groesser, dunkler,
   weniger gesperrt, mit einem kurzen Strich darunter als Anker. */
.plan-name{display:block;font-size:1.18rem;font-weight:780;font-stretch:104%;
  letter-spacing:.01em;text-transform:none;color:var(--ink);line-height:1.15;
  padding-bottom:.55rem;border-bottom:2px solid var(--accent);width:fit-content}
.plan-hi .plan-name{border-bottom-color:var(--ink)}
/* Der Knopf der Pionier-Karte traegt dieselbe Farbe wie ihre Flaeche und war
   dadurch nur an der Schrift zu erkennen. Ein Rahmen macht ihn zum Knopf. */
.plan-hi .btn-amber{border-color:var(--ink)}
/* Beim Ueberfahren bleibt die Farbe stehen. Der Knopf hebt sich nur einen Punkt
   an und bekommt eine Spur mehr Rand; das reicht als Rueckmeldung. Vorher wurde
   er schwarz, was auf der orangen Karte zu laut war. Das :hover der Hausklasse
   .btn-amber wird hier bewusst ueberschrieben. */
.plan-hi .btn-amber:hover,.plan-hi .btn-amber:focus-visible{
  background:var(--marker);color:var(--ink);
  transform:translateY(-1px);box-shadow:0 0 0 1px var(--ink)}
.plan-price{display:flex;align-items:baseline;gap:.45rem;font-feature-settings:"tnum"}
.plan-price b{font-weight:820;font-stretch:76%;font-size:3.1rem;line-height:1;letter-spacing:.005em}
.plan-price span{font-size:.86rem;font-weight:560;font-stretch:92%;color:var(--ink-faint)}
/* Drei Zeilen fest reservieren (3 x Zeilenhoehe 1.65). Sonst starten die
   Hakenlisten auf unterschiedlicher Hoehe, sobald ein Einordnungstext eine
   Zeile kuerzer ausfaellt als die der Nachbarkarten. */
.plan-desc{font-size:.93rem;color:var(--ink-soft);min-height:4.95em}
.plan ul{list-style:none;margin:0;padding:1.1rem 0 0;border-top:1px dashed var(--line);display:grid;gap:.58rem;flex:1}
.plan li{display:flex;gap:.6rem;font-size:.93rem;color:var(--ink-soft);line-height:1.45}
.plan li svg{width:16px;height:16px;flex:none;color:var(--accent);margin-top:.18rem}
.plan .btn{justify-content:center;width:100%}
/* Auf dem orangen Paket traegt nur Dark Cocoa. --marker ist derselbe Ton wie
   --accent, der Paketname stand also unsichtbar auf seinem eigenen Grund.
   Vanilla kommt hier nur auf 2,4 zu 1 und ist damit ebenfalls zu schwach. */
/* Der Rahmen der Pionier-Karte trug bisher die Farbe ihrer eigenen Flaeche und
   war damit nicht zu sehen. Jetzt Tinte, wie der Knopf und der Strich unter
   dem Namen. */
.plan-hi{background:var(--accent);color:var(--ink);border-color:var(--ink)}
.plan-hi .plan-name{color:var(--ink)}
.plan-hi .plan-price span,.plan-hi .plan-desc,.plan-hi li{color:rgba(23,21,17,.92)}
.plan-hi ul{border-top-color:rgba(23,21,17,.22)}
.plan-hi li svg{color:var(--ink)}
.plan-flag{
  position:absolute;top:-13px;left:1.4rem;
  background:var(--marker);color:var(--ink);border-radius:0;padding:.32rem .8rem;
  font-size:.68rem;font-weight:720;font-stretch:86%;letter-spacing:.12em;text-transform:uppercase;
}
.plans-fine{margin-top:1.4rem;text-align:center;font-size:.82rem;color:var(--ink-faint)}
@media (max-width:960px){.plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:.7rem}
.faq details{
  background:var(--card);border:1px solid var(--line);border-radius:0;
  overflow:hidden;transition:border-color .2s ease;
}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:1rem;
  padding:1.15rem 1.35rem;font-weight:660;font-stretch:108%;font-size:1.04rem;letter-spacing:-.005em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{
  margin-left:auto;flex:none;width:30px;height:30px;border-radius:0;
  border:1.5px solid var(--line-strong);display:grid;place-items:center;
  transition:transform .25s ease,background-color .25s ease,border-color .25s ease,color .25s ease;
}
.faq summary .pm svg{width:14px;height:14px}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);color:var(--cream)}
.faq .a{padding:0 1.35rem 1.25rem;color:var(--ink-soft);font-size:.98rem;max-width:62ch}

/* ---------- Finale CTA ---------- */
.final{position:relative;overflow:hidden;text-align:center}
.final::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(to right,var(--cream-line) 1px,transparent 1px),linear-gradient(to bottom,var(--cream-line) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 70% 90% at 50% 50%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 50% 50%,#000 30%,transparent 78%);
}
.final .wrap{position:relative;max-width:820px}
.final h2,.final h1{font-size:clamp(1.6rem,3.3vw,2.5rem)}
.final .lead{margin:1.2rem auto 0;max-width:52ch}
.final-ctas{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}
.final-hint{margin-top:1.4rem;font-size:.85rem;color:var(--cream-soft);font-stretch:92%}

/* ---------- Footer ---------- */
.foot{background:var(--dark-deep);color:var(--cream);padding:3.6rem 0 2rem}
.foot-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.5rem;padding-bottom:2.4rem;border-bottom:1px solid var(--cream-line)}
.foot .brand{color:var(--cream)}
.foot-claim{margin-top:1rem;color:var(--cream-soft);font-size:.95rem;max-width:34ch}
.foot h4{font-size:.74rem;font-weight:670;font-stretch:84%;letter-spacing:.17em;text-transform:uppercase;color:var(--cream-soft);margin-bottom:1rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot ul a{text-decoration:none;color:var(--cream-soft);font-size:.95rem;font-stretch:98%;transition:color .18s ease}
.foot ul a:hover{color:var(--cream)}
.socials{display:flex;gap:.55rem;flex-wrap:wrap}
.socials a{
  width:38px;height:38px;border-radius:0;border:1px solid var(--cream-line);
  display:grid;place-items:center;color:var(--cream-soft);
  transition:color .18s ease,border-color .18s ease,transform .18s ease;
}
.socials a:hover{color:var(--cream);border-color:var(--cream-soft);transform:translateY(-2px)}
.socials svg{width:17px;height:17px}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;padding-top:1.6rem;
  font-size:.82rem;color:var(--cream-soft);
}
.foot-bottom nav{display:flex;gap:1.3rem;margin-left:auto}
.foot-bottom a{color:var(--cream-soft);text-decoration:none}
.foot-bottom a:hover{color:var(--cream)}
@media (max-width:820px){.foot-top{grid-template-columns:1fr;gap:2rem}.foot-bottom nav{margin-left:0;width:100%}}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .step:hover,.benefit:hover,.plan:hover,.perk:hover,.btn:hover{transform:none}
}

/* ===== CI-Refit: Marke, Vorher/Nachher, Impressum ===== */
.brand-name{color:var(--accent)}
.brand-foot{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:5px;align-items:baseline}
.brand-foot .brand-claim{grid-column:2}
.brand-claim{font-size:.68rem;font-weight:640;letter-spacing:.34em;text-transform:uppercase;color:var(--cream-soft);font-stretch:88%;padding-left:.05em}
.btn-solid,.btn-solid:hover,.btn-solid:focus-visible{color:var(--ink)}
.vn{padding-block:clamp(3.5rem,7vw,6rem);overflow-x:clip} /* Einflug-Transforms dürfen die Seite nicht verbreitern */
.vn-wrap{max-width:1060px}
.vn .sec-head{margin-bottom:clamp(1.9rem,4vw,2.8rem)}
/* Heute/Morgen-Gegenüberstellung — Briefing 3 Teil 2: Paare fliegen beim
   Scrollen von links (Heute) und rechts (Morgen) ein (Pro-und-Contra-Prinzip) */
.vn-flow{display:grid;gap:clamp(.55rem,1.4vw,.85rem)}
.vn-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.55rem,1.4vw,.85rem)}
.vn-cell{
  padding:clamp(.95rem,2vw,1.3rem) clamp(1.2rem,2.6vw,1.8rem);
  font-size:clamp(1rem,1.55vw,1.28rem);line-height:1.35;
}
.vn-cell-f{ /* Heute: Dark Cocoa mit Planungsraster */
  background:
    linear-gradient(to right,rgba(254,247,236,.05) 1px,transparent 1px) 0 0/64px 100%,
    linear-gradient(180deg,#211d17,var(--dark) 55%);
  color:rgba(254,247,236,.66);font-weight:470;font-stretch:97%;
  box-shadow:0 18px 44px -26px rgba(23,21,17,.5);
}
.vn-cell-h{ /* Morgen: Blood Orange mit Lichtkante */
  background:linear-gradient(168deg,rgba(255,255,255,.12),rgba(255,255,255,0) 42%,rgba(15,13,10,.14)),var(--accent);
  color:var(--cream);font-weight:800;font-stretch:110%;letter-spacing:-.015em;
  box-shadow:0 18px 44px -26px rgba(186,55,20,.55);
}
.vn-cell-head{
  padding-block:.7rem;
  font-size:.7rem;font-weight:700;font-stretch:86%;letter-spacing:.24em;text-transform:uppercase;
}
.vn-cell-f.vn-cell-head{color:rgba(254,247,236,.55)}
.vn-cell-h.vn-cell-head{color:rgba(23,21,17,.62);font-weight:700}
.vn-immer{font-style:normal;font-variation-settings:"slnt" -9}
/* Einflug von links/rechts, ausgelöst per IntersectionObserver (main.js) */
.vn-cell{opacity:0;transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.24,1)}
.vn-cell-f{transform:translateX(-52px)}
.vn-cell-h{transform:translateX(52px)}
.vn-pair.in .vn-cell{opacity:1;transform:none}
.vn-pair.in .vn-cell-h{transition-delay:.07s}
@media (prefers-reduced-motion:reduce){
  .vn-cell{opacity:1;transform:none;transition:none}
}
.vn-punch{
  margin:clamp(1.6rem,3.5vw,2.4rem) 0 0;text-align:right;
  font-size:clamp(1.25rem,2.6vw,1.9rem);font-weight:720;font-stretch:112%;letter-spacing:-.012em;line-height:1.2;
}
.vn-punch em{font-style:normal;font-variation-settings:"slnt" -9;color:var(--accent)}
@media (max-width:700px){
  .vn-cell{padding:.75rem .85rem;font-size:.92rem}
  .vn-cell-f{transform:translateX(-28px)}
  .vn-cell-h{transform:translateX(28px)}
}
/* ============================================================
   EDITION 2026 (Beta) — Bento, Stats, Timelines, Checklisten,
   Editorial-Quotes, Kontakt-Rail, Formular-Feinschliff
   ============================================================ */
.ed-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.9rem,2vw,1.3rem)}
.ed-c3{grid-column:span 3}.ed-c4{grid-column:span 4}.ed-c5{grid-column:span 5}.ed-c6{grid-column:span 6}
.ed-c7{grid-column:span 7}.ed-c8{grid-column:span 8}.ed-c9{grid-column:span 9}.ed-c12{grid-column:span 12}
@media (max-width:900px){.ed-grid>[class*="ed-c"]{grid-column:1/-1}}

.ed-card{
  position:relative;overflow:hidden;
  background:#fffcf5;
  border:1px solid rgba(23,21,17,.13);
  padding:clamp(1.3rem,2.6vw,2rem);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s ease,box-shadow .35s ease;
}
.ed-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 20px 44px -24px rgba(23,21,17,.4)}
.ed-card h3{margin:.2rem 0 .55rem;font-size:clamp(1.08rem,1.9vw,1.3rem);font-weight:760;font-stretch:108%;letter-spacing:-.01em}
.ed-card p{margin:0;color:var(--ink-soft);line-height:1.55}
.ed-card .kicker{margin-bottom:.5rem}
.on-dark .ed-card{background:rgba(254,247,236,.045);border-color:rgba(254,247,236,.15);color:var(--cream)}
.on-dark .ed-card p{color:var(--cream-soft)}
.on-dark .ed-card:hover{border-color:var(--accent);box-shadow:0 20px 44px -20px rgba(0,0,0,.5)}
.ed-card.ed-dark{background:linear-gradient(180deg,#211d17,var(--dark));border-color:rgba(254,247,236,.15);color:var(--cream)}
.ed-card.ed-dark p{color:var(--cream-soft)}
/* Erscheinungsbild PLANBAR FoodLab, aus der Designvorlage vom 13.08.2026
   ausgemessen: dunkles Petrol als Flaeche, Creme als Schrift. Das Signal ist
   dasselbe Blood Orange wie im Haus (Vorlage #F25C36, Haus #F3562E), deshalb
   bleibt --accent stehen. Nur die Flaeche unterscheidet FoodLab von PLANBAR. */
/* Auf dem Signature-Balken traegt der Name die Zeile, nicht der Preis: das
   Paket ist noch nicht buchbar, die Zahl waere die falsche Hauptaussage. */
/* Der Kontaktbalken sitzt im selben Raster wie der Signature-Balken und spannt
   dieselben zwoelf Spalten. Dadurch stimmt seine Laenge auf den Pixel mit dem
   Balken darueber ueberein. Hoehe bleibt Knopfhoehe. */
/* Der Kontaktbalken haengt ohne Fuge unter dem Signature-Balken: das Raster
   setzt zwischen beiden eine Luecke, die hier mit demselben Wert wieder
   herausgerechnet wird. Beide lesen sich dadurch als ein Block, und wer vom
   Signature-Balken nach unten geht, landet zwangslaeufig auf dem Knopf. */
/* Der Balken unter der Signature-Kachel bleibt eckig. Er ist kein Knopf,
   der frei steht, sondern eine Leiste, die buendig an der Kachel klebt.
   Rund gesetzt wuerde er sich von ihr abloesen. */
.paket-balken{justify-content:center;border-radius:0;
  margin-top:calc(-1 * clamp(.9rem,2vw,1.3rem))}

.ed-signature{margin:0;display:grid;gap:.4rem}
/* Stiller Hinweis auf dem Signature-Balken: die Strukturformel von Vanillin,
   dem Aromamolekuel. Kein Text, keine Aussage,
   nur eine Spur ins FoodLab, in dessen Farben der Balken ohnehin steht. Bei 12
   Gross und am Kartenrand angeschnitten liest sie sich als Struktur, nicht als
   Molekuel. Bei 7 Prozent Deckkraft faellt sie beim Ueberfliegen nicht auf. Der Selektor ist
   zweistellig, weil .ed-card>* allen Kindern position:relative gibt. */
.ed-card>.ei-foodlab{position:absolute;right:-72px;bottom:-104px;
  width:430px;height:262px;color:#efe5d5;opacity:.07;pointer-events:none;
  transition:opacity .8s ease}
.ed-foodlab:hover>.ei-foodlab{opacity:.19}
@media (max-width:640px){.ed-card>.ei-foodlab{display:none}}
.ed-signature b{font-size:clamp(1.55rem,3.2vw,2.35rem);font-weight:800;font-stretch:106%;
  letter-spacing:-.008em;line-height:1.08}
.ed-signature span{font-size:.95rem;line-height:1.5;color:rgba(239,229,213,.76)}

.ed-card.ed-foodlab{background:#002127;border-color:rgba(239,229,213,.18);color:#efe5d5}
.ed-card.ed-foodlab p{color:#efe5d5}
.ed-card.ed-foodlab .ed-stat span{color:rgba(239,229,213,.76)}
.ed-card.ed-foodlab .ed-no{color:rgba(239,229,213,.13)}

.ed-card.ed-accent{background:linear-gradient(168deg,rgba(255,255,255,.12),rgba(255,255,255,0) 42%,rgba(15,13,10,.14)),var(--accent);border-color:transparent;color:var(--cream)}
/* Dieselbe Rechnung wie beim Paket oben: Vanilla auf Blood Orange erreicht
   2,9 zu 1, Dark Cocoa dagegen 5,7. Auf der orangen Karte liest sich dunkel. */
.ed-card.ed-accent{color:var(--ink)}
.ed-card.ed-accent p{color:rgba(23,21,17,.92)}
.ed-card.ed-accent h3{color:var(--ink)}

a.ed-card{display:block;text-decoration:none;color:inherit}
a.ed-card:hover{color:inherit}
a.ed-card .ed-arrow{margin-top:.9rem;color:var(--accent-ink)}
/* Auf der orangen Karte waere der Akzent orange auf orange und damit
   unlesbar. Dark Cocoa statt Vanilla, weil nur Dunkel auf diesem Orange die
   geforderten 4,5 zu 1 erreicht: Vanilla kommt auf 3,2 und gilt damit nur
   fuer grosse Schrift. Der Hover-Zustand muss mit, sonst verschwindet der
   Pfeil genau in dem Moment, in dem man ihn ansteuert. */
.ed-card.ed-accent .ed-arrow,
a.ed-card.ed-accent .ed-arrow,
a.ed-card.ed-accent:hover .ed-arrow,
.ed-card.ed-accent .ed-arrow:hover{color:var(--ink)}
a.ed-card:hover .ed-arrow svg{transform:translateX(.35em)}

.ed-no{
  position:absolute;top:.2rem;right:.8rem;z-index:0;pointer-events:none;
  font-size:clamp(3.2rem,7vw,4.8rem);font-weight:800;font-stretch:115%;line-height:1.1;
  color:rgba(23,21,17,.17);font-feature-settings:"tnum";
}
.on-dark .ed-no,.ed-dark .ed-no,.ed-accent .ed-no{color:rgba(254,247,236,.26)}
.ed-card>*{position:relative;z-index:1}
.ed-card>.ed-no{z-index:0}

.ed-stat{margin:0;display:grid;gap:.3rem;align-content:start}
.ed-stat b{font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:800;font-stretch:112%;letter-spacing:-.02em;line-height:1;color:var(--accent)}
.ed-card.ed-accent .ed-stat b{color:var(--cream)}  /* Zahl weiß auf oranger Karte (sonst orange-auf-orange) */
.ed-stat span{font-size:.74rem;font-weight:660;letter-spacing:.15em;text-transform:uppercase;opacity:.7;line-height:1.4}

.ed-steps{list-style:none;margin:0;padding:0}
.ed-steps li{position:relative;padding:0 0 clamp(1.1rem,2.2vw,1.5rem) 2rem}
.ed-steps li::before{content:"";position:absolute;left:.42rem;top:.5rem;bottom:-.3rem;width:2px;background:linear-gradient(180deg,var(--accent),rgba(243,86,46,.12))}
.ed-steps li:last-child::before{display:none}
.ed-steps li::after{content:"";position:absolute;left:.06rem;top:.22rem;width:.78rem;height:.78rem;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px rgba(243,86,46,.16)}
.ed-steps i{display:block;font-style:normal;font-size:.72rem;font-weight:680;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.15rem}
.ed-steps b{display:block;font-weight:760;font-stretch:106%;margin-bottom:.2rem}
.ed-steps span{display:block;opacity:.78;line-height:1.5;font-size:.95em}

.ed-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
/* Folgt die Hakenliste auf einen Absatz, braucht sie Luft nach oben — sonst
   klebt der erste Haken am letzten Textzeilenrand. Groesser als der Abstand
   zwischen den Haken (.7rem), damit die Liste als eigener Block liest.
   Greift nicht, wenn die Liste direkt unter einer Ueberschrift steht. */
p + .ed-list{margin-top:1.1rem}
.ed-list li{position:relative;padding-left:1.9rem;line-height:1.5}
.ed-list li::before{
  content:"";position:absolute;left:0;top:.22em;width:1.1em;height:1.1em;background-color:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ed-list.ed-neutral li::before{background-color:currentColor;opacity:.55;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' d='M5 12h14'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' d='M5 12h14'/%3E%3C/svg%3E")}

.ed-quote{margin:0;padding:0;border:0}
.ed-quote p{margin:0;font-size:clamp(1.55rem,3.6vw,2.6rem);font-weight:780;font-stretch:110%;letter-spacing:-.015em;line-height:1.18}
.ed-quote em{font-style:normal;font-variation-settings:"slnt" -9;color:var(--accent)}
.ed-quote+.ed-quote{margin-top:clamp(1rem,2.4vw,1.6rem)}

.ed-arrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:inherit;text-decoration:none}
.ed-arrow svg{width:1.05em;height:1.05em;flex:none;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.ed-arrow:hover{color:var(--accent)}
.ed-arrow:hover svg{transform:translateX(.35em)}

.ed-formwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.56fr);gap:clamp(1.4rem,3vw,2.4rem);align-items:start}
.ed-formwrap .kform{max-width:none}
.ed-rail{position:sticky;top:96px;display:grid;gap:clamp(1rem,2vw,1.4rem)}
@media (max-width:980px){
  .ed-formwrap{grid-template-columns:1fr}
  .ed-rail{position:static}
}

/* Erklärvideos — Click-to-Load-Facade (lädt YouTube erst auf Klick) */
/* --- FAQ: Umschalter zwischen Videos und Fragen (04.09.2026) --- */
.fq-wahl{display:flex;gap:.6rem;flex-wrap:wrap}
.fq-tab{font:inherit;font-weight:700;font-size:.95rem;padding:.7rem 1.3rem;cursor:pointer;
  border:1.5px solid var(--line);border-radius:999px;background:none;color:var(--ink);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.fq-tab:hover{border-color:var(--accent)}
.fq-tab.on{background:var(--accent);border-color:var(--accent);color:var(--cream)}
.fq-tab:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#faqWahl{padding-bottom:0}
/* --- Grosses Fenster mit Liste daneben --- */
.ev-buehne{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);
  gap:clamp(1rem,2.2vw,1.6rem);align-items:start}
.ev-gross{position:relative;aspect-ratio:16/9;border-radius:var(--r-m,0);overflow:hidden;
  background:var(--ink);color:var(--cream);display:grid;place-items:center;cursor:pointer}
.ev-gross:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ev-gross iframe,.ev-gross video{position:absolute;inset:0;width:100%;height:100%;border:0;
  background:var(--ink);object-fit:contain}
.ev-gross-titel{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.2rem .9rem;
  font-weight:700;font-size:clamp(1rem,1.6vw,1.2rem);text-align:left;
  background:linear-gradient(to top,rgba(23,21,17,.82),rgba(23,21,17,0))}
.ev-liste{display:flex;flex-direction:column;gap:.6rem}
.ev-wahl{font:inherit;text-align:left;cursor:pointer;display:flex;gap:.8rem;align-items:flex-start;
  padding:.85rem .95rem;border:1.5px solid var(--line);border-radius:var(--r-s,0);
  background:none;color:var(--ink);transition:border-color .18s ease,background-color .18s ease}
.ev-wahl:hover{border-color:var(--accent)}
.ev-wahl.on{border-color:var(--accent);background:#fdeee8}
.ev-wahl:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ev-nr{flex:none;width:1.7rem;height:1.7rem;border-radius:999px;display:grid;place-items:center;
  background:var(--ink);color:var(--cream);font-size:.78rem;font-weight:800;
  font-variant-numeric:tabular-nums}
.ev-wahl.on .ev-nr{background:var(--accent)}
.ev-wahl-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.ev-wahl-text strong{font-size:.95rem;line-height:1.3}
.ev-wahl-text span{font-size:.83rem;color:var(--ink-soft,#8a8175);line-height:1.4}
.ev-hinweis{font-size:.85rem;color:var(--ink-soft,#8a8175);margin-top:1rem;max-width:62ch}
@media (max-width:880px){
  .ev-buehne{grid-template-columns:1fr}
}
.ev-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.6rem)}
@media (max-width:640px){.ev-grid{grid-template-columns:1fr}}
.ev-card{display:flex;flex-direction:column}
.ev-frame{
  position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;cursor:pointer;
  background:linear-gradient(150deg,#211d17,#0f0d0a);
  border:1px solid rgba(254,247,236,.14);
  display:grid;place-items:center;
}
.ev-frame::after{ /* feines Planungsraster wie auf den Dunkelflächen */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(254,247,236,.04) 1px,transparent 1px) 0 0/48px 100%,
            linear-gradient(to bottom,rgba(254,247,236,.04) 1px,transparent 1px) 0 0/48px 100%;
}
.ev-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}
.ev-play{
  position:relative;z-index:1;
  width:clamp(52px,7vw,70px);height:clamp(52px,7vw,70px);border-radius:50%;
  background:var(--accent);display:grid;place-items:center;
  box-shadow:0 12px 32px -8px rgba(243,86,46,.6);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.ev-frame:hover .ev-play{transform:scale(1.09)}
.ev-play svg{width:42%;height:42%;fill:var(--cream);margin-left:.14em}
.ev-soon{
  position:absolute;top:.7rem;left:.7rem;z-index:1;
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-soft);
  background:rgba(23,21,17,.6);padding:.28rem .6rem;border:1px solid rgba(254,247,236,.18);
}
.ev-frame.is-soon{cursor:default}
.ev-frame.is-soon .ev-play{background:rgba(254,247,236,.13);box-shadow:none}
.ev-frame.is-soon:hover .ev-play{transform:none}
/* Laeuft ein Player, verschwindet die Auflage: sonst liegt der orange
   Knopf ueber dem Video und faengt Klicks ab, die der Steuerung gelten. */
.ev-gross.laeuft{cursor:default}
.ev-gross.laeuft .ev-play,
.ev-gross.laeuft .ev-soon,
.ev-gross.laeuft .ev-gross-titel{display:none}
.ev-dur{
  position:absolute;bottom:.7rem;right:.7rem;z-index:1;
  font-size:.66rem;font-weight:660;letter-spacing:.05em;color:var(--cream);
  background:rgba(23,21,17,.72);padding:.2rem .5rem;
}
.ev-meta{padding:1rem .1rem 0}
.ev-meta h3{margin:0 0 .3rem;font-size:1.1rem;font-weight:760;font-stretch:106%;letter-spacing:-.01em}
.ev-meta p{margin:0;color:var(--ink-soft);line-height:1.5;font-size:.95rem}
.on-dark .ev-meta p{color:var(--cream-soft)}
.ev-frame:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .ed-card,.ed-card:hover{transform:none;transition:none}
  .ed-arrow svg{transition:none}
  .ev-play,.ev-frame:hover .ev-play{transition:none}
}

/* ---------- Rechtstexte ---------- */
.legal-wrap{max-width:860px}
.legal h2,.legal h1{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:1rem 0 1.4rem}
.legal h3{font-size:1.06rem;font-weight:720;font-stretch:108%;margin:2rem 0 .55rem}
.legal p{margin:0 0 .9rem;color:var(--ink-soft);font-size:.98rem;line-height:1.7}
.legal a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.legal a:hover{text-decoration:underline;text-underline-offset:.22em}
.legal-hinweis{
  background:var(--matcha);border:1px solid var(--matcha-2);padding:.9rem 1.1rem;
  font-size:.9rem;color:var(--ink);margin:0 0 1.2rem;
}
/* Aufzaehlung in den Rechtstexten, etwa die Pflichten des Kunden. Gleiche
   Schriftgroesse und Zeilenhoehe wie die Absaetze daneben, nur eingerueckt. */
.legal-liste{margin:0 0 .9rem;padding-left:1.2rem;color:var(--ink-soft);
  font-size:.98rem;line-height:1.7}
.legal-liste li{margin-bottom:.45rem}
.legal-stand{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--ink-faint)}

.imp{background:var(--paper-2);border-top:2px solid var(--ink);padding-block:clamp(2.6rem,6vw,4.2rem)}
.imp-h{font-size:clamp(1.35rem,2.6vw,1.9rem);font-stretch:112%;font-weight:780;letter-spacing:-.015em;margin:0 0 1.6rem}
.imp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.15rem 2.4rem;margin:0}
.imp-item dt{font-size:.72rem;font-weight:680;letter-spacing:.22em;text-transform:uppercase;font-stretch:80%;color:var(--ink-faint);margin:0 0 .3rem}
.imp-item dd{margin:0;font-size:.98rem;line-height:1.5;color:var(--ink)}
.imp-item a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.imp-item a:hover{color:var(--accent-hover);text-decoration:underline;text-decoration-thickness:.09em;text-underline-offset:.22em}
.imp-note{margin:1.7rem 0 0;font-size:.85rem;color:var(--ink-soft)}
.kicker{display:inline-block;line-height:1.5}
.kicker::before{display:inline-block;margin-right:.55rem;vertical-align:.06em}


/* ---------- Consent-Banner (schlafend, siehe main.js CONSENT_AKTIV) ---------- */
.consent{
  position:fixed;inset:auto 0 0 0;z-index:300;
  background:var(--dark);color:var(--cream);
  border-top:2px solid var(--accent);
  box-shadow:0 -12px 40px -18px rgba(0,0,0,.5);
}
.consent-inner{
  max-width:var(--wrap);margin-inline:auto;padding:1.1rem var(--pad);
  display:flex;flex-wrap:wrap;gap:.9rem 2rem;align-items:center;justify-content:space-between;
}
.consent p{margin:0;font-size:.92rem;color:var(--cream-soft);max-width:62ch}
.consent a{color:var(--accent)}
/* Einwilligungsleiste. 98 % der Besuche kommen vom Handy — deshalb
   unten angeschlagen, volle Breite, Knoepfe untereinander gross genug
   zum Treffen. Ab 640 px nebeneinander. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--dark);color:var(--cream);
  border-top:3px solid var(--accent);
  box-shadow:0 -8px 30px rgba(23,21,17,.28)}
.consent-inner{max-width:var(--wrap);margin:0 auto;padding:1rem 1.1rem 1.15rem;
  display:flex;flex-direction:column;gap:.85rem}
.consent-inner p{font-size:.9rem;line-height:1.55;margin:0;max-width:70ch}
.consent-inner a{color:var(--cream);text-decoration:underline}
.consent-btns{display:flex;gap:.6rem;flex-wrap:wrap}
/* Beide Knoepfe gleich: kein hervorgehobenes Ja. */
.btn-consent{flex:1 1 12rem;justify-content:center;
  background:none;border:1.5px solid var(--cream);color:var(--cream)}
.btn-consent:hover{background:var(--cream);color:var(--dark)}
.btn-consent:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (min-width:640px){
  .consent-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:1.6rem}
  .consent-btns{flex:0 0 auto}
  .btn-consent{flex:0 0 auto}
}
.consent .btn{padding:.6rem 1.05rem;font-size:.9rem}

/* ============================================================
   AGENDA 2030 / SDG-Sektion (Briefing 3 Teil 2, 17.07.)
   Blätterbar: eine Karte pro Ziel, Pfeile links/rechts,
   klickbare Ziel-Leiste darunter. Ohne JS: alle Karten sichtbar.
   ============================================================ */
.sdg-head{grid-template-columns:1fr auto;align-items:end;column-gap:clamp(1.2rem,3vw,2.4rem)}
.sdg-head>.sdg-wheel{grid-column:2;grid-row:1/span 2}
.sdg-wheel{width:clamp(86px,10vw,124px);height:auto;flex:none}
@media (max-width:640px){.sdg-head{grid-template-columns:1fr}.sdg-head>.sdg-wheel{grid-column:1;grid-row:auto}}

.sdg-pager{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(.55rem,1.5vw,1rem);align-items:center}
.sdg-arrow{
  appearance:none;cursor:pointer;font-family:inherit;
  width:46px;height:46px;display:none;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(23,21,17,.22);border-radius:0;color:var(--ink);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.sdg-arrow svg{width:20px;height:20px}
.sdg-arrow:hover,.sdg-arrow:focus-visible{background:var(--marker);border-color:var(--marker);color:var(--cream)}
.sdg-js .sdg-arrow{display:inline-flex}
@media (max-width:640px){.sdg-pager{grid-template-columns:1fr auto auto;grid-template-areas:"stage stage stage" ". prev next"}.sdg-pager .sdg-stage{grid-area:stage}.sdg-pager .sdg-prev{grid-area:prev}.sdg-pager .sdg-next{grid-area:next}}

.sdg-stage{display:grid;gap:1rem}
.sdg-card{
  position:relative;overflow:hidden;
  background:#fffcf5;border:1px solid rgba(23,21,17,.13);border-top:5px solid var(--sdg,var(--marker));
  padding:clamp(1.4rem,3vw,2.1rem) clamp(1.3rem,3vw,2.3rem) clamp(1.5rem,3.2vw,2.3rem);
  box-shadow:var(--shadow-s);
}
.sdg-js .sdg-stage{gap:0}
.sdg-js .sdg-card{
  grid-area:1/1;visibility:hidden;
  opacity:0;transform:translateY(12px);
  transition:opacity .45s ease,transform .45s ease,visibility 0s .45s;
}
.sdg-js .sdg-card.act{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.sdg-tag{
  /* Die Schriftfarbe steht je Karte im Markup, weil sie von der Helligkeit des
     Ziels abhaengt: auf Gelb und Hellgruen kam Weiss nur auf 2,0 zu 1. */
  display:inline-block;background:var(--sdg,var(--marker));color:var(--sdg-fg,#fff);
  font-size:.72rem;font-weight:700;font-stretch:86%;letter-spacing:.16em;text-transform:uppercase;
  padding:.32rem .6rem;
}
.sdg-card h3{margin:.75rem 0 .55rem;text-transform:none}
.sdg-card p{color:var(--ink-soft);max-width:64ch;position:relative;z-index:1}
.sdg-ghost{
  position:absolute;right:clamp(.6rem,2vw,1.4rem);bottom:-.18em;z-index:0;pointer-events:none;
  font-weight:800;font-stretch:76%;line-height:1;font-size:clamp(4.2rem,10vw,7.5rem);
  color:var(--sdg,var(--marker));opacity:.16;font-feature-settings:"tnum";
}
@media (prefers-reduced-motion:reduce){.sdg-js .sdg-card{transition:none}}

/* Die amtlichen Symbole sind quadratisch genormt. Deshalb ein Raster aus
   gleich grossen Quadraten statt der frueheren breiten Rechtecke. Die Farbe
   steckt jetzt im SVG selbst, nicht mehr in einer CSS-Variablen. */
.sdg-strip{
  display:grid;gap:.6rem;margin-top:clamp(1.2rem,2.6vw,1.8rem);
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr))
}
.sdg-tab{
  appearance:none;border:0;border-radius:0;padding:0;cursor:pointer;
  font-family:inherit;background:none;line-height:0;
  /* Volle Deckkraft fuer alle Kacheln. Die Farben der siebzehn Ziele sind
     genormt, und auf dem hellen Vanilla-Grund wuerde jede Abschwaechung sie
     sichtbar aufhellen. Der aktive Zustand laeuft deshalb ueber den Rahmen,
     nicht ueber die Farbe. */
  transition:transform .25s ease;
}
.sdg-ico{display:block;width:100%;height:auto;aspect-ratio:1}
.sdg-ico-nr{
  fill:#fff;font-size:68px;font-weight:800;font-stretch:80%;letter-spacing:-.02em
}
.sdg-ico-t{
  fill:#fff;font-size:20.5px;font-weight:760;font-stretch:76%;letter-spacing:.005em
}
.sdg-tab:hover{transform:translateY(-3px)}
.sdg-tab[aria-current="true"] .sdg-ico{
  outline:3px solid var(--ink);outline-offset:3px
}
.sdg-tab:focus-visible{outline:none}
.sdg-tab:focus-visible .sdg-ico{outline:3px solid var(--accent);outline-offset:5px}
@media (prefers-reduced-motion:reduce){.sdg-tab:hover{transform:none}}

/* Unter 640px passen neun Quadrate nicht nebeneinander: waagerecht scrollen
   statt sie auf Briefmarkengroesse zu schrumpfen. */
@media (max-width:640px){
  .sdg-strip{
    display:flex;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:.4rem
  }
  .sdg-tab{flex:0 0 108px;scroll-snap-align:start}
}

/* Agenda-2030-Rad in der Hauptnavigation (rechts neben FAQ) */
.nav-sdg{display:inline-flex;align-items:center}
.nav-sdg svg{width:21px;height:21px;transition:transform .5s cubic-bezier(.22,.9,.24,1)}
/* Fusszeilen-Navigation: fuenf Verweise in einer Spalte, daneben die neun
   Nachhaltigkeitsziele als Kacheln. Jede Kachel fuehrt auf ihren eigenen
   Beitrag im Agenda-Abschnitt der Startseite (#sdg-<nr>), nicht nur auf den
   Abschnitt. Damit ersetzen die Kacheln das frueher dort stehende Rad. */
/* Die drei Kaesten "Fuer wen PLANBAR gebaut ist" sollen unter der Ueberschrift
   auf gleicher Hoehe beginnen. "Inhabergefuehrtes Restaurant" laeuft ueber zwei
   Zeilen, die beiden anderen ueber eine. Statt die Woerter zu kuerzen, reserviert
   die Ueberschrift hier immer zwei Zeilen: 2 x line-height 1.22 = 2.44em. */
#fuer-wen .ed-card h3{min-height:2.44em}

.foot-nav-row{display:flex;align-items:flex-start;gap:2.2rem;flex-wrap:wrap}
.foot-nav-row ul{display:grid;row-gap:.6rem;margin:0;padding:0;list-style:none}
/* Das Rad zeigt nur die neun Ziele, auf die PLANBAR wirkt: neun Segmente zu je
   40 Grad statt der siebzehn des vollen Zeichens. Jedes Segment ist ein eigener
   Verweis auf seinen Beitrag. Masse wie beim Rad in der Kopfleiste, damit beide
   als dasselbe Zeichen gelesen werden. */
.foot-rad{width:96px;height:96px;display:block;overflow:visible}
.foot-rad a{cursor:pointer}
.foot-rad a path{transition:opacity .16s ease,transform .16s ease;transform-origin:100px 100px;opacity:.9}
.foot-rad a:hover path,.foot-rad a:focus-visible path{opacity:1;transform:scale(1.06)}
.foot-rad a:focus-visible{outline:none}
.nav-sdg:hover svg,.nav-sdg:focus-visible svg{transform:rotate(38deg)}
@media (prefers-reduced-motion:reduce){.nav-sdg:hover svg,.nav-sdg:focus-visible svg{transform:none}}

/* ============================================================
   Deutschlandkarte der Pionierplätze (pioniere.html)
   Bewusst NICHT .etch: amadeus.js greift sich jedes figure.etch img
   und baut daraus eine Tilt-Szene. Die Karte soll das nicht.
   Der Füllgrad steckt in --f und wird von js/de-karte.js gesetzt.
   ============================================================ */
.de-map{margin:0;display:grid;gap:.7rem}
.de-svg{display:block;width:100%;height:auto;max-width:420px;margin-inline:auto;overflow:visible}
.de-land path{
  fill:var(--accent);fill-opacity:var(--f,.10);
  stroke:var(--cream);stroke-width:1;stroke-linejoin:round;
  transition:fill-opacity .35s ease,stroke-width .2s ease
}
.de-land:hover path{stroke-width:2.5}
.de-punkt{fill:var(--cream)}
.de-leiter{stroke:var(--cream);stroke-width:1;opacity:.5}
.de-stadt{fill:var(--cream);fill-opacity:.78;font-size:13px;font-weight:640;font-stretch:96%}
.de-zahl{fill:var(--cream);font-size:13px;font-weight:800;font-stretch:100%}
/* Voll belegt heißt deckendes Orange: darauf muss der Text dunkel werden */
.de-stadt[data-voll],.de-zahl[data-voll]{fill:var(--ink);fill-opacity:1}

.de-hinweis{
  margin:0;text-align:center;min-height:1.5em;
  font-size:.8rem;font-weight:640;letter-spacing:.03em;color:var(--cream-soft)
}
.de-map figcaption{
  margin:0;text-align:center;
  font-size:.68rem;letter-spacing:.04em;line-height:1.5;color:var(--cream-soft);opacity:.72
}

.de-liste{
  width:100%;border-collapse:collapse;margin-top:clamp(2rem,4vw,3rem);
  font-size:.86rem;color:var(--cream)
}
.de-liste caption{
  text-align:left;padding-bottom:.7rem;
  font-size:.72rem;font-weight:660;letter-spacing:.15em;text-transform:uppercase;
  color:var(--cream-soft)
}
.de-liste th,.de-liste td{
  padding:.55rem .8rem;text-align:left;border-bottom:1px solid var(--cream-line)
}
.de-liste thead th{
  font-size:.68rem;font-weight:660;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream-soft)
}
.de-liste tbody th{font-weight:660}
.de-td-zahl{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.de-td-zahl[data-voll]{color:var(--accent)}

/* Schmale Schirme: die Beschriftungen in der Karte werden unlesbar,
   dort trägt die Liste die Zahlen allein. */
@media (max-width:720px){
  .de-marker{display:none}
  .de-hinweis{display:none}
  .de-svg{max-width:300px}
  .de-liste th,.de-liste td{padding:.5rem .4rem}
}
@media (prefers-reduced-motion:reduce){.de-land path{transition:none}}

/* Nur fuer Bildschirmleser: die Haken in der Tabelle brauchen ein Wort. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== Raumplan mit Regler ==================================================
   Uebernommen aus dem Reservierungs-Backoffice (style.css der Demo), damit die
   Seite dasselbe Bild zeigt wie das Produkt. Der Regler bleibt bewusst der
   Regler des Browsers, nur ueber accent-color eingefaerbt: jede selbstgebaute
   Fassung wirkt daneben klobig. Tische lassen sich mit der Maus verschieben,
   ein reiner Klick schaltet zwischen PLANBAR und Walk-in um.
   ========================================================================= */
/* Frei auf der Seite, kein umrandeter Kasten: nur der Grundriss selbst traegt
   eine Kante, alles andere steht offen. Getrennt wird mit feinen Linien. */
.rp{margin-top:clamp(1.6rem,3vw,2.4rem)}
.rp-kopf{display:flex;align-items:center;justify-content:flex-end;gap:1rem;
  flex-wrap:wrap;margin-bottom:.6rem}
.rp-zaehler{margin:0;font-size:.85rem;color:var(--ink-faint);font-feature-settings:"tnum"}

/* Tiefenwirkung ohne echte Perspektive: Dielenboden, der nach hinten heller
   wird, ein Schatten von der Rueckwand und dunklere Raumecken. Die Ebene
   selbst bleibt flach -- sonst waere das Verschieben nicht mehr berechenbar. */
/* Auf dieser Seite ist der Boden die ganze Seite: das Fliesenraster liegt am
   Koerper, die Planflaeche selbst ist durchsichtig und traegt nur noch die
   Bedienung. Deshalb hier kein Rahmen, kein Grund, kein Schatten. */
.rp-flaeche{display:none;position:relative;--rpH:clamp(360px,54vh,680px);--rpZoom:1;
  height:var(--rpH);
  overflow:visible;border:0;background:none;box-shadow:none;touch-action:none}
/* Auf schmalen Geraeten sind Tische und Stuehle in Pixeln gleich gross wie am
   Schreibtisch, der Raum aber nur ein Viertel so breit. Ein Tisch nahm dort
   16 Prozent der Breite ein statt 4, entsprechend klebte alles aneinander.
   Die ganze Flaeche wird deshalb verkleinert dargestellt: innen rechnet sie
   mit der vollen Groesse weiter, angezeigt wird sie gestaucht. Der negative
   Aussenabstand holt die Zeilen darunter wieder heran, weil eine Skalierung
   den Platzbedarf im Fluss nicht veraendert. */
/* Auch auf Tablets und schmalen Fenstern ist der Raum zu klein fuer die
   ungestauchte Darstellung: bei 780 Pixeln stand Tisch 1 in der Bar. Die
   Verkleinerung setzt deshalb schon ab 1000 Pixeln ein, die Aufstellung
   wechselt aber erst bei 760 ins Hochformat. */
@media (max-width:1000px){
  .rp-flaeche{--rpZoom:.72;
    width:calc(100% / var(--rpZoom));
    height:calc(var(--rpH) / var(--rpZoom));
    margin-bottom:calc(var(--rpH) - var(--rpH) / var(--rpZoom));
    transform:scale(var(--rpZoom));transform-origin:top left}
}
@media (max-width:760px){
  .rp-flaeche{--rpZoom:.62;
    width:calc(100% / var(--rpZoom));
    height:calc(var(--rpH) / var(--rpZoom));
    margin-bottom:calc(var(--rpH) - var(--rpH) / var(--rpZoom));
    transform:scale(var(--rpZoom));transform-origin:top left}
}
@media (max-width:430px){
  .rp-flaeche{--rpZoom:.54}
}
.rp-flaeche.ist-an{display:block}
/* Der Tisch ist jetzt eine Zeichnung, kein gefuellter Kasten: der Knopf selbst
   bleibt durchsichtig, das SVG darin traegt das Bild. Die Beschriftung sitzt
   darunter, damit sie die Platte nicht verdeckt. */
.rp-tisch{position:absolute;z-index:2;display:block;padding:0;font:inherit;
  font-size:.62rem;line-height:1.1;cursor:grab;user-select:none;
  background:none;border:0;color:var(--ink);
  transition:filter .2s ease}
.rp-moebel{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none}
.rp-tisch b{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
  white-space:nowrap;font-weight:780;color:var(--ink);
  background:rgba(254,247,236,.78);padding:0 .25rem}
.rp-tisch em{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
  font-style:normal;color:var(--ink-faint);font-feature-settings:"tnum"}
.rp-tisch{filter:drop-shadow(0 6px 8px rgba(23,21,17,.3))}
.rp-tisch:active{cursor:grabbing}
.rp-tisch b{font-weight:800}
.rp-tisch em{font-style:normal;opacity:.72;font-feature-settings:"tnum"}
/* Fuer PLANBAR vorgesehen: die Platte wird orange eingefaerbt. */
.rp-tisch[aria-pressed="true"]{filter:drop-shadow(0 6px 10px rgba(23,21,17,.4))}
.rp-tisch[aria-pressed="true"] .rp-moebel path[fill="#8a6a45"],
.rp-tisch[aria-pressed="true"] .rp-moebel ellipse[fill="#8a6a45"]{fill:var(--accent)}
.rp-tisch[aria-pressed="true"] .rp-moebel path[fill="#6b5134"],
.rp-tisch[aria-pressed="true"] .rp-moebel ellipse[fill="#6b5134"]{fill:#b8371a}
/* Das Zeichen auf der Platte gehoert nur den PLANBAR-Tischen. Es liegt in
   jedem Tisch bereit und wird hier ein- und ausgeblendet, damit der Plan beim
   Umschalten nichts nachzeichnen muss. */
.rp-moebel .rp-logo{display:none}
.rp-tisch[aria-pressed="true"] .rp-moebel .rp-logo{display:block}
.rp-tisch:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* Die Tischbeschriftung liegt ueber allem und faengt keine Klicks ab. Sie sass
   frueher im Knopf selbst; seit die Stuecke nach ihrer Standlinie gemalt
   werden, deckte der vordere Stuhl den Namen zur Haelfte ab. */
.rp-schild{position:absolute;z-index:3;pointer-events:none;transform:translateX(-50%);
  text-align:center;white-space:nowrap;font-size:.62rem;line-height:1.15}
.rp-schild b{display:block;font-weight:800;color:var(--ink);
  background:rgba(254,247,236,.78);padding:0 .25rem}
.rp-schild em{display:block;font-style:normal;color:var(--ink-faint);
  opacity:.72;font-feature-settings:"tnum"}
.rp-stuehle i{position:absolute;width:9px;height:9px;border-radius:50%;
  background:var(--almond);border:1px solid var(--dark);
  box-shadow:0 2px 3px rgba(23,21,17,.34);transform:translate(-50%,-50%)}
.rp-tisch[aria-pressed="true"] .rp-stuehle i{background:#fff}


.rp-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin:.5rem 0 .7rem}
.rp-label{font-size:1rem;font-weight:760;color:var(--ink)}
.rp-wert{margin:0;font-size:1rem;color:var(--ink-soft);font-feature-settings:"tnum"}
.rp-wert b{font-size:1.2rem;font-weight:820;color:var(--accent-ink)}
/* Der Griff ist das PLANBAR-Zeichen, ausgespart aus einer Scheibe in der
   Farbe der Schiene. Dadurch wirkt er wie ein Teil des Reglers und nicht
   wie ein aufgeklebtes Abzeichen. Die Fuellung setzt das Skript ueber
   --fuell, weil ein Bereichsregler keinen Fortschritt kennt. */
.rp-regler{-webkit-appearance:none;appearance:none;width:100%;height:26px;
  background:transparent;outline:none;cursor:pointer;--fuell:50%;--schiene:var(--accent)}
.rp-regler::-webkit-slider-runnable-track{height:6px;border:0;
  background:linear-gradient(to right,var(--schiene) 0 var(--fuell),var(--line-strong) var(--fuell) 100%)}
.rp-regler::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;
  margin-top:-10px;border:0;border-radius:50%;cursor:grab;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23f3562e'/%3E%3Cpath fill='%23fef7ec' transform='translate(11.3 8) scale(0.0157)' d='M130 0H358A242 242 0 0 1 600 242V592A123 123 0 0 1 477 715H333V322A64 64 0 0 0 269 258H0V130A130 130 0 0 1 130 0ZM109 322H255V910A110 110 0 0 1 145 1020H72A72 72 0 0 1 0 948V431A109 109 0 0 1 109 322ZM360 749H490A110 110 0 0 1 600 859V908A112 112 0 0 1 488 1020H333V776A27 27 0 0 1 360 749Z'/%3E%3C/svg%3E") center/contain no-repeat}
.rp-regler:active::-webkit-slider-thumb{cursor:grabbing}
.rp-regler::-moz-range-track{height:6px;border:0;
  background:linear-gradient(to right,var(--schiene) 0 var(--fuell),var(--line-strong) var(--fuell) 100%)}
.rp-regler::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;cursor:grab;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23f3562e'/%3E%3Cpath fill='%23fef7ec' transform='translate(11.3 8) scale(0.0157)' d='M130 0H358A242 242 0 0 1 600 242V592A123 123 0 0 1 477 715H333V322A64 64 0 0 0 269 258H0V130A130 130 0 0 1 130 0ZM109 322H255V910A110 110 0 0 1 145 1020H72A72 72 0 0 1 0 948V431A109 109 0 0 1 109 322ZM360 749H490A110 110 0 0 1 600 859V908A112 112 0 0 1 488 1020H333V776A27 27 0 0 1 360 749Z'/%3E%3C/svg%3E") center/contain no-repeat}
.rp-regler:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
/* Unter 60 Prozent traegt die Vorausplanung den Abend nicht mehr allein: die
   Schiene verliert das Akzentorange und geht ins Gedeckte, das Zeichen im Griff
   ebenso. Kein Alarmrot, sondern ein Zuruecknehmen der Farbe. */
.rp-regler.ist-knapp{--schiene:var(--almond)}
.rp-regler.ist-knapp::-webkit-slider-thumb{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23bcad96'/%3E%3Cpath fill='%23fef7ec' transform='translate(11.3 8) scale(0.0157)' d='M130 0H358A242 242 0 0 1 600 242V592A123 123 0 0 1 477 715H333V322A64 64 0 0 0 269 258H0V130A130 130 0 0 1 130 0ZM109 322H255V910A110 110 0 0 1 145 1020H72A72 72 0 0 1 0 948V431A109 109 0 0 1 109 322ZM360 749H490A110 110 0 0 1 600 859V908A112 112 0 0 1 488 1020H333V776A27 27 0 0 1 360 749Z'/%3E%3C/svg%3E") center/contain no-repeat}
.rp-regler.ist-knapp::-moz-range-thumb{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23bcad96'/%3E%3Cpath fill='%23fef7ec' transform='translate(11.3 8) scale(0.0157)' d='M130 0H358A242 242 0 0 1 600 242V592A123 123 0 0 1 477 715H333V322A64 64 0 0 0 269 258H0V130A130 130 0 0 1 130 0ZM109 322H255V910A110 110 0 0 1 145 1020H72A72 72 0 0 1 0 948V431A109 109 0 0 1 109 322ZM360 749H490A110 110 0 0 1 600 859V908A112 112 0 0 1 488 1020H333V776A27 27 0 0 1 360 749Z'/%3E%3C/svg%3E") center/contain no-repeat}
.rp-steuer.ist-knapp .rp-wert b{color:var(--seaweed)}
.rp-sicherheit{display:block;margin-top:.15rem;font-size:.8rem;color:var(--ink-faint)}
.rp-steuer.ist-knapp .rp-sicherheit{color:var(--seaweed);font-weight:640}
.rp-ausgabe{margin:.8rem 0 0;font-size:.92rem;color:var(--ink-soft)}
.rp-ausgabe b{font-weight:780;color:var(--ink);font-feature-settings:"tnum"}
.rp-hinweis{margin:.5rem 0 0;font-size:.8rem;color:var(--ink-faint)}
/* Werkzeuge unter dem Grundriss: Tisch anlegen, ausgewaehlten Tisch aendern.
   Der ausgewaehlte Tisch traegt einen Ring, damit man ihn im Plan wiederfindet. */
/* Ausstattung liegt unter den Tischen: sie moebliert den Raum, sie belegt ihn
   nicht. Deshalb eigene Ebene und gedaempfte Farben. */
/* Stuehle liegen zwischen Ausstattung und Tischen: sie stehen im Raum, aber
   ein Tisch darf sie verdecken. Einzeln fassbar und verschiebbar. */
.rp-stuhl{position:absolute;z-index:2;display:block;cursor:grab;user-select:none;
  transform:translate(-50%,-62%);line-height:0;
  filter:drop-shadow(0 5px 5px rgba(23,21,17,.28))}
.rp-stuhl:active{cursor:grabbing}
.rp-stuhl svg{width:100%;height:100%;display:block;overflow:visible}
.rp-stuhl.ist-gewaehlt{outline:2px dashed var(--ink);outline-offset:2px}
.rp-deko{position:absolute;z-index:1;display:block;cursor:grab;user-select:none;
  line-height:0;opacity:.9;filter:drop-shadow(0 7px 6px rgba(23,21,17,.3));
  transition:opacity .2s ease}
.rp-deko:hover{opacity:1}
.rp-deko:active{cursor:grabbing}
.rp-deko svg{width:100%;height:100%;display:block}
/* Pflanzen und Bar bringen ihre Farben selbst mit, die Saeule faerbt sich
   ueber currentColor. */
.rp-deko-echt{color:inherit}
.rp-deko-gruen{color:var(--seaweed)}
.rp-deko-holz{color:var(--almond)}
.rp-deko.ist-gewaehlt{outline:2px dashed var(--ink);outline-offset:3px;opacity:1}
.rp-tisch.ist-gewaehlt{outline:2px dashed var(--ink);outline-offset:3px}
/* Loeschkreuz. Es liegt im Stueck selbst und zeigt sich, wenn man darueber
   faehrt oder das Stueck angewaehlt hat. Der zweite Weg ist der fuer Finger,
   dort gibt es kein Ueberfahren. */
.rp-weg{position:absolute;top:-9px;right:-9px;z-index:4;width:19px;height:19px;
  border-radius:50%;background:var(--ink);color:var(--cream);
  display:grid;place-items:center;cursor:pointer;
  opacity:0;transform:scale(.6);pointer-events:none;
  transition:opacity .15s ease,transform .15s ease,background-color .15s ease}
.rp-weg svg{width:11px;height:11px;display:block}
.rp-tisch:hover>.rp-weg,.rp-stuhl:hover>.rp-weg,.rp-deko:hover>.rp-weg,
.rp-tisch.ist-gewaehlt>.rp-weg,.rp-stuhl.ist-gewaehlt>.rp-weg,.rp-deko.ist-gewaehlt>.rp-weg{
  opacity:1;transform:scale(1);pointer-events:auto}
.rp-weg:hover{background:var(--accent)}
.rp-stuhl>.rp-weg{top:-4px;right:-2px;width:16px;height:16px}
.rp-stuhl>.rp-weg svg{width:9px;height:9px}
/* Stuehle stehen fest am Tisch. Antippen waehlt sie an; ein Ziehen am
   Stuhl bewegt den ganzen Tisch, weil der Finger den Stuhl haeufiger
   trifft als die Platte. Der Zeiger sagt das an. */
.rp-stuhl{cursor:grab}
.rp-stuhl:active{cursor:grabbing}
/* Fuer den Finger: kein Doppeltippen-Zoom und kein Textmarkieren, sonst
   waehlt ein etwas laengerer Griff die Beschriftung aus statt zu ziehen. */
.rp-stuhl,.rp-tisch,.rp-deko{touch-action:none;-webkit-user-select:none}
.rp-werkzeuge{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1.6rem 2.2rem;margin-top:1.5rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.rp-werkzeug strong{display:block;font-size:.74rem;font-weight:700;font-stretch:88%;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.6rem}
.rp-neu{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.rp-neu input[type=text]{flex:1 1 8rem;min-width:0}
.rp-neu input[type=number]{width:4.2rem}
.rp-neu input,.rp-neu select{font:inherit;font-size:.88rem;padding:.45rem .55rem;
  border:1.5px solid var(--line-strong);background:var(--card);color:var(--ink);border-radius:0}
.rp-neu input:focus-visible,.rp-neu select:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.btn-klein{padding:.45rem .9rem;font-size:.85rem}
.rp-klein{display:block;margin-top:.45rem;font-size:.78rem;color:var(--ink-faint)}
.tp-fine{margin-top:1.4rem;font-size:.8rem;color:var(--ink-faint)}
@media (prefers-reduced-motion:reduce){.rp-tisch,.rp-deko{transition:none}}

/* Auf dieser Seite ist der Raumeditor die Hauptsache. Der Text darueber bleibt
   lesbar, tritt aber zurueck; die Flaeche darf breiter werden als der sonstige
   Satzspiegel, damit man wirklich Platz zum Einrichten hat. */
/* Die Kopfleiste steht fest. Der obere Abstand muss ihre Hoehe uebersteigen,
   sonst laeuft die Ueberschrift darunter. Unten wird dafuer gespart, damit
   der Editor auf einen Bildschirm passt. */
#kapazitaet{padding-top:clamp(6.5rem,9vw,8rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
#kapazitaet > .wrap{max-width:min(1560px,94vw)}
#kapazitaet .sec-head{max-width:none}
#kapazitaet .kicker{color:var(--ink-faint)}
#kapazitaet h1{font-size:clamp(1.45rem,2.6vw,2.05rem);color:var(--ink-soft);
  letter-spacing:.01em;margin-bottom:.35rem}
/* .lead ist sonst auf 56 Zeichen begrenzt; hier soll der erste Satz in einer
   Zeile stehen, also wird die Begrenzung aufgehoben. */
#kapazitaet .lead{font-size:.93rem;color:var(--ink-faint);line-height:1.55;max-width:none}
#kapazitaet .head-row{margin-bottom:.4rem}
#kapazitaet .rp{margin-top:clamp(1rem,2vw,1.5rem)}

/* Boden der ganzen Seite: helles Papier mit Fliesenraster und ein paar warmen
   Lichtinseln. Die Fugen sind zwei Linienraster, die Inseln liegen darueber. */
body.seite-raum{
  background-color:var(--paper);
  background-image:
    radial-gradient(circle 260px at 18% 30%,rgba(255,206,128,.20),transparent 70%),
    radial-gradient(circle 300px at 62% 22%,rgba(255,206,128,.16),transparent 70%),
    radial-gradient(circle 280px at 86% 44%,rgba(255,206,128,.16),transparent 70%),
    radial-gradient(circle 320px at 34% 72%,rgba(255,206,128,.16),transparent 70%),
    linear-gradient(to right,rgba(23,21,17,.055) 0 1px,transparent 1px),
    linear-gradient(to bottom,rgba(23,21,17,.055) 0 1px,transparent 1px);
  background-size:auto,auto,auto,auto,84px 84px,84px 84px;
  background-attachment:fixed,fixed,fixed,fixed,scroll,scroll;
}

/* Ueberschrift links, Regler rechts daneben: der Anteil laesst sich einstellen,
   ohne erst zu scrollen. Unter dem Plan bleiben nur die Werkzeuge zum
   Hinzufuegen; entfernt wird per Doppelklick auf das Stueck selbst. */
.rp-oben{display:grid;grid-template-columns:minmax(0,1fr) minmax(19rem,27rem);
  gap:clamp(1.4rem,3vw,2.6rem);align-items:start;margin-bottom:clamp(1rem,2vw,1.6rem)}
.rp-oben .sec-head{margin-bottom:0}
/* Kein Kasten: der Regler steht frei neben der Ueberschrift, nur die Schiene
   und die Zahlen sind zu sehen. Die Anzeige laeuft dezent mit, damit der Blick
   am Raum bleibt und nicht an der Beschriftung haengt. */
.rp-steuer{border:0;background:none;padding:0;display:grid;gap:.35rem}
.rp-steuer .kicker{margin-bottom:.1rem}
.rp-steuer .rp-wert{margin:0;font-size:.95rem;color:var(--ink-soft);font-feature-settings:"tnum"}
.rp-steuer .rp-wert b{font-size:1.35rem;font-weight:820;color:var(--accent-ink)}
.rp-steuer .rp-label{font-size:.72rem;font-weight:700;font-stretch:88%;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.rp-steuer .rp-ausgabe{margin:.15rem 0 0;font-size:.84rem;line-height:1.5;
  color:var(--ink-faint)}
.rp-steuer .rp-ausgabe b{font-weight:760;color:var(--ink-soft)}
@media (max-width:900px){.rp-oben{grid-template-columns:1fr}}

/* Fussnote unter dem Raumplan. Sie gehoert zum Sternchen im Vorspann und sagt,
   was bei wenig Vorausplanung nicht mehr traegt. */
.rp-fussnote{margin:1.1rem 0 0;font-size:.8rem;line-height:1.55;color:var(--ink-faint);max-width:62ch}


/* .btn-demo — am 04.09.2026 aus dem <style>-Block in index.html hierher
   verschoben. Vorher kannte nur die Startseite die Regel; jede andere
   Seite mit dem Demo-Knopf zeigte ihn orange statt schwarz. */
/* Neu-Abzeichen an den Neuerungen (04.09.2026). Bewusst klein und ohne
   Animation: es soll auffallen, nicht blinken. */
.neu-abz{display:inline-block;margin-left:.4em;padding:.12em .5em;border-radius:999px;
  background:var(--accent);color:var(--cream);font-size:.62em;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;vertical-align:middle;line-height:1.6}
.btn .neu-abz{background:var(--cream);color:var(--accent)}
.btn-demo .neu-abz{background:var(--accent);color:#fff}
.nav-links .neu-abz,.mobile-menu .neu-abz{font-size:.58em}
.btn-demo{background:#171511;color:#fff}
.btn-demo:hover{background:#000;color:#fff}

/* ============================================================
   ERKLAERVIDEO-BUEHNE (08.09.2026)
   Die Fassade laedt YouTube erst auf Klick — so steht es in der
   Datenschutzerklaerung, Abschnitt 7. Das Vorschaubild ist ein
   Standbild aus der eigenen Videodatei und liegt auf dem eigenen
   Server; ein Bild von img.youtube.com waere schon beim
   Seitenaufbau ein Kontakt zu Google.
   ============================================================ */
.pb-vid{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;cursor:pointer;
  background:#0f0d0a;border:1px solid rgba(23,21,17,.16);display:grid;place-items:center}
.pb-vid-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pb-vid::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:rgba(15,13,10,.34)}   /* hebt den Knopf vom hellen Standbild ab */
.pb-vid iframe,.pb-vid video{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;
  background:var(--ink);object-fit:cover}
.pb-vid-play{position:relative;z-index:2;
  /* An der Fensterbreite bemessen, nicht am Bildschirm: der Knopf soll im
     920er Fenster genauso sitzen wie im schmalen am Handy. */
  width:clamp(54px,9%,96px);aspect-ratio:1;height:auto;
  border-radius:50%;background:var(--accent);display:grid;place-items:center;
  box-shadow:0 14px 36px -8px rgba(243,86,46,.62);
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.pb-vid:hover .pb-vid-play{transform:scale(1.09)}
.pb-vid-play svg{width:40%;height:40%;fill:var(--cream);margin-left:.14em}
.pb-vid-titel{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:2.2rem 1.1rem .9rem;
  text-align:left;font-weight:700;font-size:clamp(.95rem,1.5vw,1.12rem);color:var(--cream);
  background:linear-gradient(to top,rgba(23,21,17,.86),rgba(23,21,17,0))}
.pb-vid-dauer{position:absolute;top:.7rem;right:.7rem;z-index:2;font-size:.66rem;font-weight:700;
  letter-spacing:.06em;color:var(--cream);background:rgba(23,21,17,.72);padding:.24rem .55rem;
  font-variant-numeric:tabular-nums}
.pb-vid:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pb-vid.laeuft{cursor:default}
.pb-vid.laeuft .pb-vid-play,.pb-vid.laeuft .pb-vid-titel,.pb-vid.laeuft .pb-vid-dauer,
.pb-vid.laeuft .pb-vid-bild,.pb-vid.laeuft::after{display:none}

/* Aufbau wie bei den Nachbarabschnitten: linksbuendiger Kopf, Inhalt darunter.
   Das Video sitzt mittig und laeuft nicht auf die volle Wrap-Breite von 1180px
   auf — so gross gelesen kippt das 16:9-Fenster die Seitenmitte. */
.pb-vid-halter{max-width:min(920px,100%);margin-inline:auto}

/* ---------- Agenda 2030 als eigene Seite (08.09.2026) ---------- */
.nav-sdg[aria-current="page"]{outline:2px solid var(--accent);outline-offset:3px;border-radius:999px}