/* LEVELMADE. — Schichtbuch
   Leitidee: Das Logo (gestapelte Balken über einer Zeitlinie mit Punkt) ist das
   Arbeitsprotokoll des Assistenten. Balken = erledigte Vorgänge, Linie = der Tag,
   Punkt = jetzt.
   Farben tragen Bedeutung: Teal = vom Assistenten erledigt,
   Lampe (Bernstein) = wartet auf Ihre Freigabe. Sonst keine Akzentfarben.
   Schrift: Familjen Grotesk (Marke, Überschriften, Bedienung) ·
   Source Serif 4 (Fließtext) · JetBrains Mono nur für Uhrzeiten und Beträge. */

:root{
  --nacht:#16191b;        /* Logogrund */
  --nacht-2:#1e2427;
  --nacht-text:#e6ece9;
  --nacht-grau:#9aa7a2;
  --papier:#eef2ef;
  --papier-2:#ffffff;
  --ink:#16191b;
  --grau:#56605b;
  --linie:#d3dbd6;
  --teal:#0e8c82;
  --teal-ink:#0a6c64;
  --teal-hell:#46c4b5;
  --lampe:#e9a93b;
  --knopf:#0b7168;        /* Teal für Flächen mit weißer Schrift, Kontrast 5,8:1 */
  --knopf-hover:#085a53;
  --lampe-ink:#8a5a0c;
  --shell:1200px;
  --rund:14px;
  --pille:999px;

  /* Altnamen, weiter benutzt von konto.css */
  --paper:var(--papier);
  --paper-2:var(--papier-2);
  --line:var(--linie);
  --muted:var(--grau);
  --deep:var(--nacht);

  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papier:#0f1213; --papier-2:#171c1e; --ink:#e6ece9; --grau:#9aa7a2;
    --linie:#283032; --teal:#35b3a6; --teal-ink:#4cc9bb; --lampe-ink:#f0b85a;
    --nacht:#0b0d0e; --nacht-2:#161b1d;
  }
}
:root[data-theme="dark"]{
  --papier:#0f1213; --papier-2:#171c1e; --ink:#e6ece9; --grau:#9aa7a2;
  --linie:#283032; --teal:#35b3a6; --teal-ink:#4cc9bb; --lampe-ink:#f0b85a;
  --nacht:#0b0d0e; --nacht-2:#161b1d;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;
  background:var(--papier);
  color:var(--ink);
  font-family:"Source Serif 4","Iowan Old Style",Georgia,serif;
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

.shell{max-width:var(--shell);margin:0 auto;padding-inline:24px}
img{max-width:100%}

a{color:var(--teal-ink);text-underline-offset:.18em}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--teal);outline-offset:3px
}

/* ---------- Kopf ---------- */
.top{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--papier) 86%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--linie);
}
.top .row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px;flex-wrap:wrap}
.brand{
  display:flex;align-items:center;gap:11px;
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:600;font-size:1.42rem;
  letter-spacing:-.018em;color:var(--ink);text-decoration:none;
}
.brand img{width:38px;height:38px;border-radius:9px;display:block}
.brand b{font-weight:600}
.brand i{color:var(--teal);font-style:normal}
.top nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.98rem}
.top nav a{color:var(--grau);text-decoration:none;padding:7px 12px;border-radius:var(--pille)}
.top nav a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.top nav a.nav-knopf{background:var(--ink);color:var(--papier);font-weight:600;margin-left:6px}
.top nav a.nav-knopf:hover{background:var(--knopf);color:#fff}
@media (max-width:640px){
  .top nav{gap:0;margin-inline:-12px}
  .top nav a{padding:6px 10px;font-size:.92rem}
}

/* ---------- Grundraster ---------- */
.block{border-bottom:1px solid var(--linie)}
.grid{display:block;padding-block:96px}
@media (max-width:760px){.grid{padding-block:60px}}

.abs{
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:500;
  font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.08;letter-spacing:-.03em;
  margin:0 0 14px;max-width:20ch;text-wrap:balance;
}
p.vor{color:var(--grau);max-width:60ch;margin:0 0 30px}

/* Knöpfe */
.tun{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.tun a{
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:1.02rem;font-weight:600;
  text-decoration:none;padding:14px 24px;border-radius:var(--pille);
  transition:background-color .2s,color .2s,border-color .2s;
}
.tun .voll{background:var(--knopf);color:#fff}
.tun .voll:hover{background:var(--knopf-hover)}
.tun .leer{color:var(--ink);border:1.5px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.tun .leer:hover{border-color:var(--teal)}

/* ---------- Auftakt mit Schichtbuch ---------- */
.auftakt{border-bottom:1px solid var(--linie);overflow:hidden}
.auftakt-raster{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;
  padding-block:72px 88px;
}
@media (max-width:980px){
  .auftakt-raster{grid-template-columns:minmax(0,1fr);gap:44px;padding-block:48px 64px}
}
.auftakt h1{
  font-family:"Familjen Grotesk",system-ui,sans-serif;
  font-size:clamp(2.5rem,5.6vw,4.4rem);line-height:.98;letter-spacing:-.04em;
  font-weight:500;margin:0 0 28px;max-width:13ch;text-wrap:balance;
}
.auftakt h1 em{font-style:normal}
.auftakt p.stand{font-size:1.14rem;max-width:48ch;margin:0 0 18px;color:var(--ink)}
.auftakt p.stand + p.stand{color:var(--grau);margin-bottom:34px}

.schichtbuch{
  --tag:0;              /* 0 = Morgen, 1 = später Abend; setzt das Skript */
  margin:0;position:relative;
  border-radius:26px;
  color:var(--nacht-text);
  background:
    radial-gradient(120% 70% at 85% 0%, color-mix(in srgb,#2c4a47 calc((1 - var(--tag)) * 100%), #1a1714) 0%, transparent 62%),
    radial-gradient(60% 40% at 12% 100%, rgba(233,169,59,calc(var(--tag) * .20)) 0%, transparent 70%),
    var(--nacht);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 40px 80px -40px rgba(11,31,29,.55);
  padding:22px 22px 18px;
  transition:background .8s;
}
.sb-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.sb-uhr{font-family:"Familjen Grotesk",system-ui,sans-serif;color:var(--nacht-grau);font-size:.95rem}
.sb-uhr b{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;font-size:1.9rem;
  letter-spacing:-.02em;color:#fff;margin-right:8px;font-variant-numeric:tabular-nums;
}
.sb-sie{font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.95rem;color:var(--nacht-grau)}
.sb-sie span{color:#fff}

/* Stapel: älteste unten und am breitesten, neueste oben und in Teal wie im Logo */
.sb-stapel{
  list-style:none;margin:0;padding:0;min-height:330px;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;
}
.ereignis{
  --breite:100%;
  width:var(--breite);
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:start;
  padding:11px 16px 11px 12px;border-radius:20px;
  background:rgba(255,255,255,.94);color:var(--nacht);
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.93rem;line-height:1.3;
  transition:width .6s cubic-bezier(.2,.8,.2,1),background-color .4s,color .4s;
}
.ereignis svg{grid-row:span 2;width:30px;height:30px;padding:6px;border-radius:50%;background:rgba(22,25,27,.08);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ereignis .e-zeile{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;min-width:0}
.ereignis time{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.78rem;color:#5b6660}
.ereignis b{font-weight:600}
.ereignis .e-status{font-size:.82rem;color:#0a6c64}
.ereignis .e-status::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:.08em}
.ereignis.freigabe .e-status{color:#8a5a0c}
.ereignis.neu{background:#0b7168;color:#fff}
.ereignis.neu svg{background:rgba(255,255,255,.16)}
.ereignis.neu time,.ereignis.neu .e-status{color:rgba(255,255,255,.86)}
.ereignis.neu.freigabe{background:var(--lampe);color:var(--nacht)}
.ereignis.neu.freigabe svg{background:rgba(22,25,27,.1)}
.ereignis.neu.freigabe time,.ereignis.neu.freigabe .e-status{color:rgba(22,25,27,.72)}
.ereignis.rein{animation:rein .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes rein{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}

/* Zeitlinie mit Punkt — die unterste Zeile des Logos */
.sb-linie{position:relative;margin:18px 4px 0;height:46px}
.sb-linie::before{
  content:"";position:absolute;left:0;right:26px;top:10px;height:12px;border-radius:var(--pille);
  background:linear-gradient(90deg,rgba(255,255,255,.95) 0 73.3%,rgba(233,169,59,.9) 73.3% 100%);
}
.sb-punkt{
  position:absolute;top:6px;left:calc(var(--zeit,0) * (100% - 46px));
  width:20px;height:20px;border-radius:50%;background:var(--teal-hell);
  box-shadow:0 0 0 5px rgba(70,196,181,.22);
  transition:left .9s cubic-bezier(.4,0,.2,1);
}
.sb-marken{position:absolute;left:0;right:26px;top:28px;display:flex;justify-content:space-between;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.7rem;color:var(--nacht-grau)}
.sb-marken span:nth-child(2){position:absolute;left:73.3%;transform:translateX(-50%);color:var(--lampe)}
.schichtbuch figcaption{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.84rem;color:var(--nacht-grau);
}
.sb-knopf{
  font:inherit;color:var(--nacht-text);background:transparent;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);border-radius:var(--pille);padding:5px 12px;
}
.sb-knopf:hover{border-color:var(--teal-hell)}
.sb-knopf[hidden]{display:none}
@media (max-width:520px){
  .schichtbuch{padding:18px 14px 14px;border-radius:20px}
  .sb-stapel{min-height:430px}
  .ereignis{font-size:.88rem;padding:10px 12px 10px 10px}
}

/* ---------- Kommt Ihnen das bekannt vor? ---------- */
.zwei{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
@media (max-width:860px){.zwei{grid-template-columns:minmax(0,1fr);gap:26px}}
ul.faelle{list-style:none;margin:0;padding:0;max-width:60ch}
ul.faelle li{
  position:relative;padding:16px 0 16px 34px;border-top:1px solid var(--linie);
  font-size:1.08rem;
}
ul.faelle li:first-child{border-top:0;padding-top:4px}
ul.faelle li::before{
  content:"";position:absolute;left:0;top:1.35em;width:18px;height:6px;border-radius:var(--pille);
  background:color-mix(in srgb,var(--ink) 22%,transparent);
}
ul.faelle li:first-child::before{top:calc(4px + .62em)}
p.schluss{
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:1.3rem;font-weight:500;line-height:1.3;
  letter-spacing:-.015em;margin:28px 0 0;max-width:34ch;
}

/* ---------- Assistenten ---------- */
.assistenten{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:40px;
}
@media (max-width:980px){.assistenten{grid-template-columns:minmax(0,1fr)}}
.posten{
  display:flex;flex-direction:column;gap:10px;
  padding:28px 26px 30px;border-radius:var(--rund);
  background:var(--papier-2);border:1px solid var(--linie);
}
.posten .zeichen{width:72px;height:44px;margin-bottom:12px;display:block}
.posten .zeichen .s{fill:color-mix(in srgb,var(--ink) 16%,transparent)}
.posten .zeichen .t{fill:var(--teal)}
.posten h3{
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:600;
  font-size:1.45rem;letter-spacing:-.02em;margin:0;
}
.posten p{margin:0;color:var(--ink)}
p.claim{
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:1.06rem;font-weight:500;line-height:1.35;
  color:var(--teal-ink);margin:0;
}
.posten p:not(.claim){color:var(--grau);font-size:1rem}
.assistenten + p.schluss{margin-top:34px}

/* ---------- Ablauf, echte Reihenfolge ---------- */
ol.ablauf{list-style:none;margin:0;padding:0;counter-reset:s}
ol.ablauf li{counter-increment:s;position:relative;padding:0 0 30px 58px;max-width:64ch}
ol.ablauf li::before{
  content:counter(s);
  position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.98rem;font-weight:600;
  background:var(--papier-2);color:var(--teal-ink);border:1.5px solid var(--teal);
}
ol.ablauf li::after{content:"";position:absolute;left:17px;top:38px;bottom:4px;width:2px;background:var(--linie)}
ol.ablauf li:last-child::after{display:none}
ol.ablauf li:last-child::before{background:var(--knopf);border-color:var(--knopf);color:#fff}
ol.ablauf h3{font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:1.2rem;letter-spacing:-.01em;margin:3px 0 6px;font-weight:600}
ol.ablauf p{margin:0;color:var(--grau)}

/* Auf der Startseite waagerecht wie die Zeitlinie im Logo */
ol.ablauf.quer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:44px}
ol.ablauf.quer li{padding:62px 0 0;max-width:none}
ol.ablauf.quer li::before{top:0}
ol.ablauf.quer li::after{left:44px;right:-24px;top:17px;bottom:auto;width:auto;height:2px}
@media (max-width:900px){
  ol.ablauf.quer{grid-template-columns:minmax(0,1fr);gap:0}
  ol.ablauf.quer li{padding:0 0 30px 58px}
  ol.ablauf.quer li::after{left:17px;right:auto;top:38px;bottom:4px;width:2px;height:auto}
}

/* ---------- Ihre Vorgaben, dunkel ---------- */
.regel{background:var(--nacht);color:var(--nacht-text);border-block:1px solid var(--linie)}
.regel .grid{padding-block:96px}
.regel .zwei{align-items:center}
.regel h2{
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:500;
  font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.08;letter-spacing:-.03em;
  margin:0 0 20px;max-width:16ch;text-wrap:balance;color:#fff;
}
.regel p{margin:0 0 14px;max-width:56ch;color:#c3cdc9}
.regel strong{color:#fff;font-weight:600}
.vorgaben{
  margin:0;padding:10px 22px;border-radius:20px;
  background:var(--nacht-2);border:1px solid rgba(255,255,255,.08);
}
.vorgaben figcaption{font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.86rem;color:var(--nacht-grau);padding:12px 0 6px}
.vorgaben dl{margin:0}
.vorgaben div{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:center;
  padding:16px 0;border-top:1px solid rgba(255,255,255,.08);
}
.vorgaben dt{font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:600;color:#fff}
.vorgaben dd{margin:0;grid-column:1;color:var(--nacht-grau);font-size:.95rem}
.schalter{
  grid-row:1 / span 2;grid-column:2;
  width:46px;height:26px;border-radius:var(--pille);background:rgba(255,255,255,.14);position:relative;
}
.schalter::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff}
.schalter.an{background:var(--teal)}
.schalter.an::after{left:23px}
.schalter.lampe{background:var(--lampe)}
.schalter.lampe::after{left:23px;background:var(--nacht)}

/* ---------- Schluss ---------- */
.kontakt{background:transparent}
.kontakt .grid{padding-block:110px}
.kontakt h2.abs{font-size:clamp(2.1rem,5vw,3.8rem);max-width:17ch;line-height:1}
.kontakt .mail{
  display:inline-flex;align-items:center;gap:12px;
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:1.12rem;font-weight:600;
  text-decoration:none;color:#fff;background:var(--knopf);
  padding:16px 28px;border-radius:var(--pille);transition:background-color .2s;
}
.kontakt .mail:hover{background:var(--knopf-hover)}
.kontakt .endlinie{display:block;width:min(420px,100%);height:18px;margin-top:56px}
.kontakt .endlinie .l{fill:color-mix(in srgb,var(--ink) 18%,transparent)}
.kontakt .endlinie .p{fill:var(--teal)}

/* ---------- Fuß ---------- */
footer{padding-block:34px 60px;font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.95rem;border-top:1px solid var(--linie)}
footer .fl{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--grau)}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer a{color:var(--grau);text-decoration:none}
footer a:hover{color:var(--teal-ink)}

/* ---------- Rechtstexte ---------- */
article{padding-block:64px 88px;max-width:70ch}
article h1{
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:500;
  font-size:clamp(2rem,4.4vw,2.9rem);letter-spacing:-.03em;line-height:1.05;margin:0 0 12px;
}
article h2{
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:600;
  font-size:1.14rem;letter-spacing:-.01em;margin:2.6rem 0 .5rem;
}
article p{margin:0 0 1rem}
article address{font-style:normal;margin:0 0 1rem}
article .meta{font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.95rem;color:var(--grau);margin-bottom:.4rem}
article .meta + h2,article .meta:last-of-type{margin-bottom:2.2rem}
code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.88em;background:var(--papier-2);border:1px solid var(--linie);padding:.08em .35em;border-radius:5px}

/* ---------- Buchung: Seitenkopf ---------- */
.buchung-kopf{padding-block:72px 8px}
.buchung-kopf h1{
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:500;
  font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;letter-spacing:-.035em;margin:0 0 18px;max-width:16ch;text-wrap:balance;
}

/* ---------- Auswahlhilfe ---------- */
div.hilfe{
  border-radius:20px;background:var(--nacht);color:var(--nacht-text);
  padding:30px 30px 32px;margin:0 0 48px;max-width:820px;
}
div.hilfe h2,div.hilfe h3{font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:1.35rem;font-weight:600;letter-spacing:-.015em;margin:0 0 6px;color:#fff}
div.hilfe > p{color:var(--nacht-grau);margin:0 0 18px;max-width:60ch}
.frage{border-top:1px solid rgba(255,255,255,.1);padding-block:18px}
.f-text{margin:0 0 12px;max-width:60ch;color:#fff}
.f-wahl{display:flex;gap:8px;flex-wrap:wrap}
.f-wahl button{
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.96rem;
  background:transparent;color:var(--nacht-text);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--pille);padding:9px 18px;cursor:pointer;transition:background-color .2s,border-color .2s;
}
.f-wahl button:hover{border-color:var(--teal-hell)}
.f-wahl button.an{background:var(--knopf);border-color:var(--teal-hell);color:#fff}
.h-ergebnis{
  margin:20px 0 0;padding:16px 18px;border-radius:14px;background:rgba(70,196,181,.12);
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:1.04rem;font-weight:500;max-width:62ch;color:#fff;
}
.h-ergebnis[hidden]{display:none}

/* ---------- Buchungsformular ---------- */
.formular{max-width:820px}
.formular fieldset{border:0;margin:0 0 44px;padding:0;min-width:0}
.formular legend{
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:1.4rem;font-weight:600;letter-spacing:-.015em;
  color:var(--ink);padding:0;margin-bottom:16px;
}
.formular .wahl{
  display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:16px;align-items:start;
  padding:20px 22px;margin-bottom:10px;cursor:pointer;
  background:var(--papier-2);border:1.5px solid var(--linie);border-radius:var(--rund);
  transition:border-color .2s,box-shadow .2s;
}
.formular .wahl:hover{border-color:color-mix(in srgb,var(--teal) 55%,var(--linie))}
.formular .wahl input{margin-top:.32rem;width:20px;height:20px;accent-color:var(--teal)}
.formular .wahl:has(input:checked){border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 16%,transparent)}
.w-text b{display:block;font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:1.14rem;font-weight:600}
.w-text em{font-style:normal;color:var(--grau);font-size:.98rem}
.w-preis{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.9rem;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.w-preis small{display:block;color:var(--grau);font-size:.76rem;margin-top:3px}
.w-preis.aktiv{color:var(--teal-ink)}
@media (max-width:620px){
  .formular .wahl{grid-template-columns:22px minmax(0,1fr);padding:16px}
  .w-preis{grid-column:2;text-align:left;margin-top:4px}
}
.hinweis{color:var(--grau);font-size:.92rem;max-width:64ch;margin:16px 0 0}
.felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.formular label{display:block}
.felder label,.voll-feld{font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.95rem;font-weight:500;color:var(--ink)}
.voll-feld{margin-top:18px}
.formular input[type=text],.formular input[type=email],.formular input[type=tel],.formular textarea{
  display:block;width:100%;margin-top:7px;padding:13px 14px;
  font-family:"Source Serif 4",Georgia,serif;font-size:1rem;font-weight:400;
  color:var(--ink);background:var(--papier-2);border:1.5px solid var(--linie);border-radius:10px;
}
.formular input:focus,.formular textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.formular .zustimmung{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;font-size:1rem;color:var(--ink)}
.formular .zustimmung input{margin-top:.3rem;width:20px;height:20px;accent-color:var(--teal)}
.absenden{
  margin-top:24px;font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:1.08rem;font-weight:600;
  background:var(--knopf);color:#fff;border:0;border-radius:var(--pille);padding:16px 30px;cursor:pointer;
  transition:background-color .2s;
}
.absenden:hover{background:var(--knopf-hover)}

/* Mengen und Summe */
.formular .menge{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.formular .menge label,.formular .menge .menge-name{font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.92rem;font-weight:500;color:var(--ink);margin:0}
.formular .menge select{
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.98rem;padding:7px 12px;
  background:var(--papier);color:var(--ink);border:1.5px solid var(--linie);border-radius:10px;
}
.formular .menge small{color:var(--grau);font-size:.86rem}
.formular .menge[hidden]{display:none}
.summe{
  margin-top:22px;padding:22px 24px;border-radius:var(--rund);
  background:var(--nacht);color:var(--nacht-text);
}
.summe[hidden]{display:none}
.s-zeile{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:6px;
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:1rem;color:var(--nacht-grau);
}
.s-zeile b{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:1.5rem;font-weight:500;
  letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;
}
.s-fuss{color:var(--nacht-grau);font-size:.88rem;max-width:64ch;margin:14px 0 0}
.s-rabatt{
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.95rem;font-weight:500;
  color:var(--teal-hell);margin:10px 0 0;
}
.s-rabatt[hidden]{display:none}

/* ---------- Zeitfresser: Karten zum Umdrehen ----------
   Vorderseite = was es Sie kostet, Rückseite = was sich mit Assistent ändert.
   Ohne Skript stehen beide Seiten untereinander. Das Skript setzt .zf-an
   und schaltet erst dann die 3D-Drehung ein. */
.zf-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.zf-kopf .vor{margin-bottom:0}
.zf-schalter{
  display:inline-flex;padding:4px;border-radius:var(--pille);cursor:pointer;
  background:var(--papier-2);border:1px solid var(--linie);
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:1rem;font-weight:600;color:var(--grau);
}
.zf-schalter[hidden]{display:none}
.zf-schalter span{padding:10px 18px;border-radius:var(--pille);transition:background-color .3s,color .3s}
.zf-schalter[aria-pressed="false"] .zf-s-ohne{background:var(--ink);color:var(--papier)}
.zf-schalter[aria-pressed="true"] .zf-s-mit{background:var(--knopf);color:#fff}

.zf-karten{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;
  perspective:1600px;
}
.zf-karte{grid-column:span 2;position:relative;min-width:0}
.zf-karte:nth-child(4),.zf-karte:nth-child(5){grid-column:span 3}
@media (max-width:980px){
  .zf-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zf-karte,.zf-karte:nth-child(4){grid-column:span 1}
  .zf-karte:nth-child(5){grid-column:span 2}
}
@media (max-width:620px){
  .zf-karten{grid-template-columns:minmax(0,1fr)}
  .zf-karte:nth-child(5){grid-column:span 1}
}
.zf-innen{display:grid;height:100%}
.zf-seite{border-radius:20px;padding:24px 24px 26px;display:flex;flex-direction:column;gap:12px}
.zf-vorn{background:var(--papier-2);border:1px solid var(--linie)}
.zf-hinten{
  background:
    radial-gradient(90% 70% at 100% 0%,rgba(70,196,181,.22),transparent 60%),
    var(--nacht);
  color:var(--nacht-text);margin-top:10px;border:1px solid rgba(255,255,255,.06);
}
.zf-marke{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.92rem;font-weight:500;color:var(--grau);
}
.zf-marke svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zf-hinten .zf-marke{color:var(--teal-hell)}
.zf-vorn h3{font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:1.26rem;line-height:1.22;letter-spacing:-.015em;font-weight:600;margin:0;text-wrap:balance}
.zf-vorn p{margin:0;color:var(--grau);font-size:1rem}
.zf-gewinn{margin:0;font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:1.22rem;line-height:1.35;font-weight:500;color:#fff;text-wrap:pretty}
.zf-drehen{display:none}

.zf-an .zf-innen{
  transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.3,.1,.15,1);
}
.zf-an.welle .zf-innen{transition-delay:calc(var(--i) * 90ms)}
.zf-an .zf-seite{grid-area:1 / 1;margin:0;padding-bottom:70px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.zf-an .zf-hinten{transform:rotateY(180deg)}
.zf-an .zf-karte.gedreht .zf-innen{transform:rotateY(180deg)}
@media (hover:hover){
  .zf-an:not(.welle) .zf-karte:not(.gedreht):hover .zf-innen{transform:rotateY(-9deg) rotateX(3deg)}
  .zf-an:not(.welle) .zf-karte.gedreht:hover .zf-innen{transform:rotateY(189deg) rotateX(3deg)}
}
.zf-an .zf-drehen{
  display:inline-flex;position:absolute;left:24px;bottom:20px;z-index:2;
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.95rem;font-weight:600;
  padding:9px 16px;border-radius:var(--pille);cursor:pointer;
  background:transparent;color:var(--ink);border:1.5px solid color-mix(in srgb,var(--ink) 22%,transparent);
  transition:color .3s,border-color .3s;
}
.zf-an .zf-drehen:hover{border-color:var(--teal)}
.zf-an .zf-karte.gedreht .zf-drehen{color:#fff;border-color:rgba(255,255,255,.3)}

/* ---------- Zeitrechner: Regler und Tabelle ---------- */
.zr-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
@media (max-width:900px){.zr-raster{grid-template-columns:minmax(0,1fr);gap:36px}}
.zr-regler{display:grid;gap:20px;margin:8px 0 24px;max-width:560px}
.zr-feld{display:block}
.zr-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.zr-name{font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:500;font-size:1.02rem}
.zr-feld output{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:1.1rem;font-variant-numeric:tabular-nums;color:var(--teal-ink);min-width:3ch;text-align:right}

.zr-feld input[type=range]{
  --fuell:30%;
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;
  background:transparent;cursor:pointer;
}
.zr-feld input[type=range]::-webkit-slider-runnable-track{
  height:8px;border-radius:var(--pille);
  background:linear-gradient(90deg,var(--teal) var(--fuell),var(--linie) var(--fuell));
}
.zr-feld input[type=range]::-moz-range-track{height:8px;border-radius:var(--pille);background:var(--linie)}
.zr-feld input[type=range]::-moz-range-progress{height:8px;border-radius:var(--pille);background:var(--teal)}
.zr-feld input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;
  background:#fff;border:3px solid var(--teal);box-shadow:0 2px 8px rgba(11,31,29,.25);
}
.zr-feld input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--teal)}
.zr-feld input[type=range]:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:8px}

.zr-tafel{
  border-radius:26px;padding:30px 30px 26px;color:var(--nacht-text);
  background:
    radial-gradient(80% 60% at 100% 0%,rgba(70,196,181,.18),transparent 65%),
    var(--nacht);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 40px 80px -40px rgba(11,31,29,.55);
}
.zr-gross{margin:0 0 22px;font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:1.15rem;color:var(--nacht-grau)}
.zr-gross b{
  display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;
  font-size:clamp(3rem,7vw,4.6rem);line-height:1;letter-spacing:-.04em;color:#fff;
  font-variant-numeric:tabular-nums;margin-bottom:6px;
}
.zr-tabelle{width:100%;border-collapse:collapse;font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:1rem}
.zr-tabelle caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.zr-tabelle th,.zr-tabelle td{padding:12px 0;text-align:left;border-top:1px solid rgba(255,255,255,.09)}
.zr-tabelle thead th{border-top:0;padding-top:0;font-weight:500;font-size:.88rem;color:var(--nacht-grau)}
.zr-tabelle tbody th{font-weight:500;color:var(--nacht-text)}
.zr-tabelle td{text-align:right;font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap;padding-left:16px}
.zr-tabelle thead th:not(:first-child){text-align:right;padding-left:16px}
.zr-tabelle tfoot th,.zr-tabelle tfoot td{border-top:1.5px solid rgba(255,255,255,.35);font-weight:600;color:var(--teal-hell)}
.zr-vergleich{margin:18px 0 0;font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:1.02rem;line-height:1.45;color:var(--nacht-grau)}
.zr-vergleich b{color:#fff;font-weight:600}
@media (max-width:520px){
  .zr-tafel{padding:24px 18px 20px;border-radius:20px}
  .zr-tabelle{font-size:.92rem}
}

/* ---------- Hintergrund: Aufgaben finden ihren Platz ----------
   Canvas hinter dem ganzen Inhalt; seite-index.js zeichnet die Pillen. */
.raum{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,footer{position:relative;z-index:1}

/* Hero: leichte Neigung zum Zeiger, nur mit feinem Zeiger und ohne reduzierte Bewegung */
.schichtbuch{transform:perspective(1400px) rotateX(var(--nx,0deg)) rotateY(var(--ny,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1),background .8s}