/* ============================================================
   Klarstellar — Website
   Visuelle Sprache: .claude/skills/design-system-klarstellar/SKILL.md
   Alle Werte dort sind gesperrt. Hier wird kein Wert neu erfunden.

   Schriften selbst gehostet, nie über das Google-Fonts-CDN.
   Grund: LG München I, 20.01.2022, Az. 3 O 17493/20.
   Drei Familien: Poppins fuer H1 und H2, Raleway fuer alles Uebrige,
   Roboto Mono fuer Systemtext und Meldungen. Raleway liegt als Variable
   Font mit Gewichtsbereich 400-700, die anderen als einzelner Schnitt.
   Die Groessenangaben sind Orientierung, keine festgesetzten Regeln.
   ============================================================ */

@font-face{
  font-family:'Poppins';
  src:url('../fonts/poppins-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Raleway';
  src:url('../fonts/raleway-var.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Raleway';
  src:url('../fonts/raleway-italic-400.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Roboto Mono';
  src:url('../fonts/robotomono-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

:root{
  /* Marke */
  --primary:#132B52;  --secondary:#466391;  --accent:#B39C83;
  /* Neutrale */
  --ink:#26313D;  --muted:#5E6B80;  --line:#D7DEE6;
  --mist:#EEF2F5; --bg:#F5F6F8;     --surface:#E6E9EC;
  /* Funktional */
  --success:#3F7D5A; --warning:#C49A3A; --error:#A94A46; --info:#3E6F9E;
  /* Sheen */
  --sheen:linear-gradient(100deg,#132B52 0%,#466391 28%,#B39C83 50%,#466391 72%,#132B52 100%);
  --sheen-light:linear-gradient(100deg,#E6E9EC 0%,#B39C83 30%,#EEF2F5 50%,#B39C83 70%,#E6E9EC 100%);
  /* Schrift */
  --display:'Poppins','Trebuchet MS',sans-serif;
  --body:'Raleway','Segoe UI',system-ui,sans-serif;
  --mono:'Roboto Mono',Consolas,monospace;
  /* Struktur */
  --wrap:1160px; --pad:32px;
  --r-pill:999px; --r-card:24px; --r-inner:16px; --r-tiny:10px;
  /* Schatten */
  --sh-1:0 1px 2px rgba(19,43,82,.04),0 2px 8px rgba(19,43,82,.05);
  --sh-2:0 8px 24px rgba(19,43,82,.08);
  --sh-3:0 16px 40px rgba(19,43,82,.12);
  --sh-btn:0 6px 18px rgba(19,43,82,.18);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.55);
  --ring:0 0 0 3px rgba(70,99,145,.35);
  /* Bewegung */
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- Basis ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* [hidden] muss jede display-Regel schlagen, sonst reicht eine Klasse wie
   .btn{display:inline-block} oder .wizard-step{display:grid}, um ein per
   JS gesetztes hidden-Attribut unwirksam zu machen. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--body);
  font-size:1rem; line-height:1.5; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
ul,ol{list-style:none}
a{color:var(--secondary);text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--primary)}

:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-tiny)}

.skip{
  position:fixed; left:50%; top:-100px; transform:translateX(-50%); z-index:90;
  background:var(--primary); color:var(--bg); font-weight:600; font-size:.8rem;
  padding:10px 20px; border-radius:var(--r-pill); box-shadow:var(--sh-inset),var(--sh-btn);
  transition:top .3s var(--ease);
}
.skip:focus{top:18px}

/* ---------- Typografie ---------- */
/* H1 Standard 36-48px. Der Hero bricht bewusst aus, siehe .hero h1. */
h1{font-family:var(--display);font-weight:600;font-size:clamp(2.25rem,4vw,3rem);
   line-height:1.05;letter-spacing:-.02em;color:var(--primary);max-width:20ch}
h2{font-family:var(--display);font-weight:600;font-size:clamp(1.75rem,3.2vw,2rem);
   line-height:1.15;letter-spacing:-.01em;color:var(--primary);max-width:760px}
h3{font-family:var(--body);font-weight:600;font-size:clamp(1.25rem,2vw,1.5rem);
   line-height:1.3;color:var(--ink)}
p{max-width:640px}
strong,b{font-weight:600}
em{font-style:normal;font-weight:600}

.kicker{display:flex;align-items:center;gap:14px;margin-bottom:22px;
  font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--secondary)}
.kicker::before{content:"";width:34px;height:1px;background:var(--accent);flex:none}
.lede{font-size:1.125rem;line-height:1.45;color:var(--muted);max-width:640px}

.sheen{background:var(--sheen);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheenShift 8s linear infinite}
.sheen-light{background:var(--sheen-light);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheenShift 8s linear infinite}
@keyframes sheenShift{to{background-position:300% 0}}

/* ---------- Raster und Bänder ---------- */
section{max-width:var(--wrap);margin:0 auto;padding:120px var(--pad);scroll-margin-top:110px}
.band{background:var(--surface)}
.band > section{background:transparent}
/* Ruhiges Blaugrau erreicht auf Sanftem Blaugrau nur 4,45:1 und verfehlt AA.
   Text, der direkt auf einem Band liegt, wird deshalb Anthrazitblau. */
.band .lede,
.band .about-text p,
.band .metrics dd,
.band .case-block p{color:var(--ink)}

.head{max-width:760px}
.head .lede{margin-top:20px}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:90px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:90px}
/* Raster auf die Breite des Textblocks darueber begrenzt, siehe .head. */
.grid-textwidth{max-width:760px}

/* ---------- Scroll-Fortschritt ---------- */
/* scaleX statt width: kein Layout bei jedem Scroll-Frame (28.09.2026) */
#progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;z-index:70;
  background:var(--sheen);background-size:300% 100%;animation:sheenShift 8s linear infinite}

/* ---------- Navigation ---------- */
/* Klassische Leiste: sitzt bündig am oberen Rand und läuft von Kante zu Kante.
   Keine Rundung, nur eine Trennlinie nach unten. Logo aussen links,
   Navigation mittig, CTA aussen rechts. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:10px var(--pad);border-radius:0;
  background:rgba(245,246,248,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:0;border-bottom:1px solid var(--line);box-shadow:var(--sh-1);
}
.nav .logo{
  display:inline-flex;align-items:center;gap:9px;padding:8px 16px;white-space:nowrap;
  font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.08em;color:var(--primary);
}
/* Wortmarke und Bildmarke liegen beide im Link, CSS blendet je nach Breite eine aus. */
.logo-full{display:block;height:24px;width:auto;flex:none}
.logo-mark{display:none;height:28px;width:auto;flex:none}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{
  display:inline-flex;align-items:center;font-weight:500;font-size:.8rem;color:var(--muted);
  padding:8px 14px;border-radius:var(--r-pill);white-space:nowrap;
  transition:color .25s var(--ease),background .25s var(--ease);
}
.nav-links a::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:transparent;margin-right:8px;flex:none;transition:background .25s var(--ease);
}
.nav-links a:hover{color:var(--primary);background:var(--mist)}
.nav-links a.is-active{color:var(--primary)}
.nav-links a.is-active::before{background:var(--accent)}
.nav-toggle{
  display:none;padding:8px 18px;border-radius:var(--r-inner);border:1px solid var(--line);
  background:transparent;color:var(--primary);font-weight:600;font-size:.8rem;cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.nav-toggle:hover{background:var(--mist);border-color:var(--secondary)}
.nav .btn{border-radius:12px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-family:var(--body);font-weight:600;font-size:.9rem;
  letter-spacing:.01em;padding:15px 32px;border-radius:var(--r-inner);border:0;cursor:pointer;
  text-align:center;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
             background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn-sm{padding:10px 20px}
.btn-block{display:block;width:100%}
.btn-primary{background:var(--primary);color:var(--bg);box-shadow:var(--sh-inset),var(--sh-btn)}
.btn-primary:hover{box-shadow:var(--sh-inset),var(--sh-3)}
.btn-secondary{background:transparent;color:var(--primary);border:1px solid var(--line)}
.btn-secondary:hover{background:var(--mist);border-color:var(--secondary)}
.btn-accent{background:var(--accent);color:var(--primary);box-shadow:var(--sh-inset),var(--sh-btn)}
.btn-accent:hover{box-shadow:var(--sh-inset),var(--sh-3)}
.btn:disabled{opacity:.55;cursor:default;transform:none}

/* ---------- Standard-Button mit Pfeil-Kachel ----------
   Adaption des shadcn-Buttons "Get Started" auf die Klarstellar-Tokens.
   Rechts im Button sitzt eine schmale Pill-Kachel mit Chevron. Beim Hover
   wächst sie über die volle Breite, das Label blendet aus.
   Markup:
     <a class="btn btn-primary btn-arrow" href="#">
       <span class="btn-label">Text</span>
       <i class="btn-tile" aria-hidden="true"><svg ...></svg></i>
     </a>
   Kombinierbar mit btn-primary, btn-secondary, btn-accent, btn-sm, btn-block.
   Ohne .btn-arrow bleibt der schlichte Button unverändert verfügbar. */
.btn-arrow{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;padding-right:76px;
}
.btn-arrow.btn-sm{padding-right:56px}
.btn-arrow.btn-block{display:flex}
.btn-label{display:inline-block;transition:opacity .5s var(--ease)}
.btn-tile{
  position:absolute;top:5px;right:5px;bottom:5px;width:56px;
  display:grid;place-items:center;border-radius:var(--r-tiny);
  background:rgba(245,246,248,.15);color:var(--bg);
  transition:width .5s var(--ease),transform .3s var(--ease);
}
.btn-tile svg{width:16px;height:16px;display:block}
.btn-sm .btn-tile{top:4px;right:4px;bottom:4px;width:42px}
/* Auf hellen Fills kehrt sich die Kachel um: dunkler Auftrag statt hellem */
.btn-secondary .btn-tile{background:rgba(19,43,82,.08);color:var(--primary)}
.btn-accent .btn-tile{background:rgba(19,43,82,.12);color:var(--primary)}
.btn-arrow:hover .btn-label{opacity:0}
.btn-arrow:hover .btn-tile{width:calc(100% - 10px)}
.btn-sm.btn-arrow:hover .btn-tile{width:calc(100% - 8px)}
.btn-arrow:active .btn-tile{transform:scale(.97)}
.btn-arrow:disabled:hover .btn-label{opacity:1}
.btn-arrow:disabled:hover .btn-tile{width:56px}
/* Ohne echten Zeiger bleibt der Ruhezustand stehen, sonst verschwindet
   das Label nach dem Antippen und kommt nicht zurück. */
@media(hover:none){
  .btn-arrow:hover .btn-label{opacity:1}
  .btn-arrow:hover .btn-tile{width:56px}
  .btn-sm.btn-arrow:hover .btn-tile{width:42px}
}
@media(prefers-reduced-motion:reduce){
  .btn-arrow:hover .btn-label{opacity:1}
  .btn-arrow:hover .btn-tile{width:56px}
  .btn-sm.btn-arrow:hover .btn-tile{width:42px}
}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ---------- Tags ---------- */
.tag{
  display:inline-block;font-weight:600;font-size:.72rem;letter-spacing:.12em;line-height:1;
  text-transform:uppercase;color:var(--muted);padding:7px 16px;
  border:1px solid var(--line);border-radius:var(--r-pill);white-space:nowrap;
}
.tag-filled{background:var(--surface);color:var(--ink)}
.band .tag-filled{background:var(--mist)}
.tags{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- Hero ---------- */
.hero{max-width:var(--wrap);margin:0 auto;padding:190px var(--pad) 90px;text-align:center}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:34px;
  font-weight:600;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--secondary);padding:8px 18px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--mist);
}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
/* Der Hero bricht bewusst aus der H1-Spanne aus: gross, eng gesetzt,
   starker Sprung zum Rest der Seite. Alle anderen H1 folgen 36-48px. */
.hero h1{font-size:clamp(2.6rem,8vw,6.4rem);line-height:.92;letter-spacing:-.03em;max-width:14ch;margin-left:auto;margin-right:auto}
.hero-sub{margin-top:34px;font-size:1.125rem;line-height:1.45;color:var(--muted);max-width:640px;margin-left:auto;margin-right:auto}
.hero-note{margin-top:22px;font-size:.93rem;color:var(--muted)}
.hero .actions{justify-content:center}

/* ---------- Kundenbeleg unter dem Hero ---------- */
.proof{margin-top:90px;padding-top:34px;border-top:1px solid var(--line)}
.proof-label{font-size:.93rem;color:var(--muted);max-width:640px;margin-left:auto;margin-right:auto}
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;margin-top:22px}
.logos img{height:26px;width:auto;filter:grayscale(1);opacity:.6;
  transition:opacity .3s var(--ease),filter .3s var(--ease)}
.logos img:hover{filter:grayscale(0);opacity:1}
.logo-slot{
  display:flex;align-items:center;justify-content:center;min-width:124px;padding:10px 20px;
  border:1px dashed var(--line);border-radius:var(--r-pill);background:var(--mist);
  font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}

/* ---------- Laufband ---------- */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--mist);padding:18px 0;overflow:hidden;white-space:nowrap;
}
.marquee-track{display:inline-block;animation:scrollLoop 28s linear infinite}
.marquee span{
  font-family:var(--body);font-weight:600;font-size:.8125rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted);margin:0 34px;
}
@keyframes scrollLoop{to{transform:translateX(-50%)}}

/* ---------- Karten ---------- */
.card{
  background:var(--mist);border:1px solid var(--line);border-radius:var(--r-card);
  padding:34px 30px;box-shadow:var(--sh-1);display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--secondary)}
.card h3{margin-bottom:12px}
.card p{color:var(--muted);font-size:.93rem;max-width:none;margin-bottom:22px}
.card > p:last-child{margin-bottom:0}
.card .num{
  font-family:var(--body);font-weight:600;font-size:clamp(2rem,4vw,2.75rem);line-height:1;
  color:var(--accent);display:block;margin-bottom:16px;
}
/* Der Tag sitzt immer unten, damit die Karten einer Reihe auf einer Linie enden. */
.card .tag{align-self:flex-start;margin-top:auto}
.band .card{background:var(--bg)}

/* Kartenvariante mit Umriss: Flaeche wie der Seitengrund,
   dauerhaft sichtbarer Rand im Anthrazit der Markenpalette.
   Nur gesperrte Tokens. */
.card-outline{background:var(--bg);border-color:var(--ink)}
.card-outline:hover{border-color:var(--line)}
/* Kleinere Ueberschrift, weil die Karte nur noch rund 240px breit ist. */
.card-outline h3{font-size:1.125rem}
.band .card-outline{background:var(--bg)}

/* Erweiterung zum System: Aufzählung in einer Karte.
   Nur gesperrte Tokens, siehe Notiz im Projektbericht. */
.card-list{margin-top:22px;padding-top:22px;border-top:1px solid var(--line);display:grid;gap:10px}
.card-list li{position:relative;padding-left:20px;font-size:.93rem;color:var(--muted)}
.card-list li::before{
  content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
  border-radius:50%;background:var(--secondary);
}

/* ---------- Bildplatzhalter und Medienrahmen ---------- */
.thumb{
  aspect-ratio:4/3;border:1px dashed var(--line);border-radius:var(--r-inner);
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  padding:22px;text-align:center;
}
.band .thumb{background:var(--mist)}
.thumb::after{
  content:attr(data-label);font-weight:600;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.thumb-tall{aspect-ratio:5/6;border-radius:var(--r-card)}
.thumb-square{aspect-ratio:1/1;border-radius:var(--r-card)}
.card .thumb{margin-bottom:22px}

/* ---------- Listenzeilen ---------- */
.list{margin-top:90px;border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:90px 1fr auto;gap:26px;align-items:center;
  padding:32px 10px;border-bottom:1px solid var(--line);color:inherit;
  transition:padding .35s var(--ease),background .35s var(--ease);
}
.row:hover{padding-left:26px;background:linear-gradient(90deg,rgba(179,156,131,.10),transparent 70%)}
.row .index{font-family:var(--body);font-weight:600;font-size:.8125rem;
  letter-spacing:.02em;color:var(--muted)}
.row h3::after{
  content:"\27F6";margin-left:14px;color:var(--accent);opacity:0;display:inline-block;
  transform:translateX(-10px);transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.row:hover h3::after{opacity:1;transform:none}
.row p{color:var(--muted);font-size:.93rem;margin-top:6px;max-width:520px}
.band .row p{color:var(--ink)}
.row .tags{margin-top:14px}

/* ---------- Fallstudie ---------- */
.case{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start;margin-top:56px}
.case-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:34px}
.case-block{margin-bottom:22px}
.case-block .kicker{margin-bottom:10px}
.case-block p{color:var(--muted);font-size:.95rem}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:34px 0;
  padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Kennzahlenrolle statt Stat-Rolle: die Zahlen stehen in einer schmalen
   Dreierspalte, die grosse Stat-Groesse bricht dort um. Deshalb hier das
   untere Drittel der Zahlen-Spanne statt der vollen 64px. */
.metrics dt{font-family:var(--body);font-weight:600;font-size:clamp(1.75rem,3vw,2.25rem);
  line-height:1;letter-spacing:-.02em;color:var(--primary)}
.metrics dd{margin-top:10px;font-size:.8rem;color:var(--muted)}

/* ---------- Info-Panel ---------- */
.note{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:30px 26px;
}
.band .note{background:var(--bg)}
.note p{color:var(--ink);font-size:.93rem;max-width:none}
.note cite{display:block;margin-top:14px;font-style:normal;font-size:.8rem;color:var(--muted)}
/* Info-Panel als eigenstaendiger Block unter einem Raster statt in einer Spalte.
   22px ist derselbe Abstand, den .fit und .card-list schon verwenden. */
.note-block{margin-top:22px}
.note-block p + p{margin-top:14px}

/* ---------- Warum / Passt ---------- */
.fit{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:22px}
.fit-col{background:var(--mist);border:1px solid var(--line);border-radius:var(--r-card);padding:34px 30px}
.band .fit-col{background:var(--bg)}
.fit-col h3{margin-bottom:22px}
.fit-col ul{display:grid;gap:12px}
.fit-col li{position:relative;padding-left:26px;font-size:.93rem;color:var(--muted)}
.fit-col li::before{position:absolute;left:0;top:0;font-weight:600;line-height:1.5}
.fit-yes li::before{content:"+";color:var(--secondary)}
.fit-no li::before{content:"\2013";color:var(--muted)}

/* ---------- Stimmen ---------- */
.quote{display:flex;flex-direction:column}
/* Einziger Ort fuer Kursiv im System: das Zitat. */
.quote blockquote{font-style:italic;font-size:clamp(1.125rem,2vw,1.5rem);line-height:1.45;
  color:var(--ink);margin-bottom:22px}
.quote figcaption{
  display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:22px;
  border-top:1px solid var(--line);
}
.quote figcaption > span{display:flex;flex-direction:column;gap:2px}
.quote strong{font-size:.93rem;color:var(--ink)}
.quote em{font-style:normal;font-weight:400;font-size:.8rem;color:var(--muted)}
.avatar{
  width:42px;height:42px;border-radius:var(--r-pill);flex:none;background:var(--surface);
  border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.band .avatar{background:var(--mist)}
.avatar::after{content:attr(data-label)}

/* ---------- Preise ---------- */
.plan{position:relative}
.plan-featured{box-shadow:var(--sh-2)}
/* Das Abzeichen sitzt auf der Kartenkante, damit die drei Pakete oben
   auf einer Linie beginnen. */
.plan .tag-badge{position:absolute;top:-14px;left:30px;margin:0}
.card .plan-price{font-family:var(--body);font-weight:600;font-size:clamp(2rem,4vw,2.75rem);
  line-height:1;letter-spacing:-.02em;color:var(--primary);margin-bottom:10px}
.card .plan-price .unit{font-family:var(--body);font-weight:600;font-size:.9rem;letter-spacing:.01em;
  color:var(--muted);display:block;margin-bottom:8px}
.card .plan-dur{display:block;font-size:.8rem;color:var(--muted);margin-bottom:22px}
/* Die Leistungsliste sitzt unten, damit die drei Pakete auf einer Linie enden.
   Die 22px oben bleiben als Mindestabstand erhalten. */
.plan .card-list{margin-top:auto}

/* ---------- Über uns ---------- */
.about{display:grid;grid-template-columns:400px 1fr;gap:56px;align-items:center}
.about-text p{margin-top:20px;color:var(--muted)}
.about-sig{display:flex;flex-direction:column;gap:2px;margin-top:34px}
.about-sig strong{font-size:.95rem;color:var(--ink)}
.about-sig span{font-size:.8rem;color:var(--muted)}
.band .about-sig span{color:var(--ink)}

/* ---------- Kontakt, das eine dunkle Band ---------- */
.dark-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) 120px;scroll-margin-top:110px}
.band-dark{background:var(--primary);color:var(--bg);border-radius:var(--r-card);padding:90px 56px}
.band-dark h2,.band-dark h3{color:var(--bg)}
.band-dark .kicker{color:var(--accent)}
.band-dark .kicker::before{background:var(--accent)}
.band-dark .lede{color:#C9D2DE;margin-top:20px}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.cta-direct{margin-top:34px;display:grid;gap:12px;justify-items:start}
.cta-direct a{
  font-size:1.05rem;font-weight:600;color:var(--bg);
  border-bottom:1px solid rgba(245,246,248,.35);padding-bottom:4px;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.cta-direct a:hover{border-bottom-color:var(--accent);color:var(--accent)}

/* ---------- Formular ---------- */
.form{display:grid;gap:22px}
.form label{display:block;font-weight:600;font-size:.8rem;color:var(--bg);margin-bottom:8px}
.field{
  width:100%;font-family:var(--body);font-size:.95rem;color:var(--bg);
  background:rgba(245,246,248,.06);border:1px solid rgba(245,246,248,.18);
  border-radius:var(--r-inner);padding:14px 22px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.field::placeholder{color:rgba(245,246,248,.45)}
textarea.field{border-radius:var(--r-card);min-height:132px;resize:vertical}
/* Die native Dropdown-Liste eines <select> ignoriert das dunkle Formular-
   Rezept und rendert meist auf weissem Systemhintergrund. Ohne eigene
   Textfarbe fuer <option> erbt sie color:var(--bg) vom <select> und wird auf
   Weiss praktisch unsichtbar, bis der Hover-Zustand sie einfaerbt. */
select.field option{color:var(--ink);background:var(--bg)}
.field:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring);background:rgba(245,246,248,.1)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.8rem;color:#C9D2DE;line-height:1.6;cursor:pointer}
/* Eigene Checkbox, weil die des Browsers scharfe Ecken hat. 10px ist der
   gesperrte Radius fuer Checkbox, Radio und kleine Symbolflaechen. */
.check input{
  appearance:none;-webkit-appearance:none;margin:3px 0 0;width:18px;height:18px;flex:none;
  border:1px solid rgba(245,246,248,.35);border-radius:var(--r-tiny);
  background:rgba(245,246,248,.06);cursor:pointer;position:relative;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.check input:hover{border-color:var(--accent)}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);
  transform:rotate(45deg);
}
.check input:focus-visible{outline:none;box-shadow:var(--ring)}
.check a{color:var(--bg);border-bottom:1px solid rgba(245,246,248,.35)}
.check a:hover{border-bottom-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* Systemtext laut Design System: Roboto Mono 500, 12-14px. Bislang ungenutzt
   im Stylesheet, obwohl das Markup die Klasse schon an drei Stellen traegt
   (Schritt-Label, Terminwahl-Hinweis, Datenschutz-Hinweis in der
   Zusammenfassung) - dort lief die Schrift ohne diese Regel auf die
   Standardgroesse (16px Raleway) statt auf Systemtext. */
.sys{font-family:var(--mono);font-weight:500;font-size:.8125rem;line-height:1.5}
/* Die Meldung wird eine gefuellte Pille. Als Textfarbe waeren die
   Funktionsfarben auf Integritaetsblau zu dunkel, als Flaeche mit Altweiss
   darauf erreichen sie 5,5:1 bzw. 4,9:1. So bleibt die Palette gesperrt. */
.form-msg{font-family:var(--mono);font-weight:500;font-size:.8125rem;min-height:1px;max-width:none}
.form-msg:not(:empty){
  display:inline-block;padding:10px 20px;border-radius:var(--r-pill);
  background:var(--error);color:var(--bg);box-shadow:var(--sh-inset);
}
.form-msg.ok:not(:empty){background:var(--success)}
/* Mehrzeilige Meldung (Erfolg nach einer Terminanfrage): als Pille mit
   999px wuerden die Zeilenenden abgeschnitten wirken, deshalb hier der
   Radius fuer Inneres einer Karte. */
.form-msg.is-block:not(:empty){display:block;border-radius:var(--r-inner);padding:14px 22px}

/* ---------- Terminseiten (termin.php) ----------
   Schlichte Seiten hinter den Links in den Termin-Mails, fuer Kunden und
   Inhaber. Nutzen das dunkle Formular-Rezept der Kontakt-Sektion, damit
   Knopf, Auswahl-Pillen, Zusammenfassung und Meldungen ohne eigene Stile
   funktionieren. Kein Tracking, kein JavaScript. */
.tp-kopf{max-width:720px;margin:0 auto;padding:34px var(--pad) 22px}
.tp-kopf .logo-full{height:24px}
.tp-wrap{max-width:720px;margin:0 auto;padding:0 var(--pad) 90px}
.tp-band{padding:56px}
.tp-band > * + *{margin-top:22px}
.tp-band .kicker + h2{margin-top:0}
.tp-band h2 + .lede{margin-top:14px}
.tp-form{display:grid;gap:22px;margin-top:34px}
.tp-tage{display:grid;gap:22px}
.tp-tagname{font-weight:600;font-size:.9rem;color:var(--bg);margin-bottom:10px}
.tp-hinweis{color:#C9D2DE;font-size:.95rem}
.tp-band a:not(.btn){color:var(--bg);border-bottom:1px solid rgba(245,246,248,.35);transition:border-color .3s var(--ease),color .3s var(--ease)}
.tp-band a:not(.btn):hover{color:var(--accent);border-bottom-color:var(--accent)}
@media(max-width:768px){
  .tp-kopf,.tp-wrap{padding-left:22px;padding-right:22px}
  .tp-band{padding:34px 22px}
}

/* ---------- Formular, mehrstufiger Assistent ---------- */
.wizard-step{
  display:grid;gap:22px;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.wizard-step.step-enter{opacity:0;transform:translateY(14px)}
.wizard-step-label{color:var(--accent);letter-spacing:.08em;margin-bottom:-4px}
.wizard-question{font-family:var(--body);font-weight:600;font-size:1.05rem;color:var(--bg);max-width:none}
.opt{font-weight:400;color:#C9D2DE;text-transform:none;letter-spacing:0}

/* Schritt-Anzeige: Kreise mit Haekchen fuer erledigte Schritte, verbindende
   Linie, die sich fuellt, plus ein duenner Gesamt-Fortschrittsbalken. Nach
   dem mitgeschickten React/shadcn-Referenzcode, hier ohne Framework und auf
   gesperrten Marken-Token statt Tailwind-Klassen nachgebaut. */
.wizard-progress{display:grid;gap:14px}
.wizard-dots{display:flex;align-items:center;justify-content:center;gap:8px}
.wizard-dot{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:28px;height:28px;border-radius:var(--r-pill);
  font-family:var(--mono);font-weight:500;font-size:.72rem;color:rgba(245,246,248,.45);
  background:rgba(245,246,248,.06);border:1px solid rgba(245,246,248,.18);
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
}
.wizard-dot svg{width:13px;height:13px}
.wizard-dot.is-active{background:var(--accent);color:var(--primary);border-color:var(--accent)}
.wizard-dot.is-done{background:rgba(245,246,248,.16);color:var(--bg);border-color:rgba(245,246,248,.32)}
.wizard-dot-line{flex:0 0 22px;height:1.5px;background:rgba(245,246,248,.18);position:relative;overflow:hidden}
.wizard-dot-line::after{
  content:'';position:absolute;inset:0;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.wizard-dot-line.is-done::after{transform:scaleX(1)}
.wizard-bar{height:2px;border-radius:999px;background:rgba(245,246,248,.14);overflow:hidden}
.wizard-bar-fill{height:100%;width:0;background:var(--accent);transition:width .6s var(--ease)}

.wizard-hint{color:#C9D2DE;margin-top:-8px}

/* ---------- Terminwahl: 7-Tage-Ansicht ----------
   Muster nach dem Screenshot-Vorbild des Nutzers vom 11.09.2026 (Monat oben,
   Pfeile, 7 Tagesspalten mit Wochentag und Datum, freie Zeiten darunter,
   Monatsmarke beim Monatswechsel). Uebernommen ist nur das Muster, alle
   Werte kommen aus dem Design System und dem dunklen Formular-Rezept.
   Siehe planung-terminbuchung.md 5.11.
   Breit: Pfeile links und rechts neben der Tagesleiste. Schmal (520px):
   Pfeile neben den Monat, die Tage bekommen die volle Breite. */
.cal{
  display:grid;grid-template-columns:34px minmax(0,1fr) 34px;
  grid-template-areas:"head head head" "prev week next";
  column-gap:10px;row-gap:22px;
  background:rgba(245,246,248,.06);border:1px solid rgba(245,246,248,.18);
  border-radius:var(--r-card);padding:22px 14px;
}
.cal-head{grid-area:head;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:34px;padding:0 6px}
.cal-month{font-weight:600;font-size:.95rem;color:var(--bg);max-width:none}
.cal-today{
  font-family:var(--body);font-weight:600;font-size:.8rem;color:var(--bg);cursor:pointer;
  background:none;border:0;border-bottom:1px solid rgba(245,246,248,.35);padding:0 0 3px;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.cal-today:hover{color:var(--accent);border-bottom-color:var(--accent)}
.cal-today:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-tiny)}
/* visibility statt display:none, damit der Kopf beim Blaettern nicht springt */
.cal-today:disabled{visibility:hidden}

.cal-nav{
  align-self:start;margin-top:10px;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  color:var(--bg);background:rgba(245,246,248,.06);border:1px solid rgba(245,246,248,.18);
  border-radius:var(--r-tiny);cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease),opacity .3s var(--ease);
}
.cal-prev{grid-area:prev}
.cal-next{grid-area:next}
.cal-nav svg{width:16px;height:16px}
.cal-nav:hover:not(:disabled){border-color:var(--accent);background:rgba(245,246,248,.1)}
.cal-nav:focus-visible{outline:none;box-shadow:var(--ring)}
.cal-nav:disabled{opacity:.3;cursor:default}

.cal-week{
  grid-area:week;position:relative;display:grid;
  grid-template-columns:var(--cols,repeat(7,minmax(0,1fr)));
  grid-template-rows:auto 1px auto;column-gap:6px;
}
.cal-dayhead{
  grid-row:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:6px 0 14px;
}
.cal-wd{font-weight:600;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#C9D2DE}
.cal-dn{font-weight:600;font-size:1.25rem;line-height:1;color:var(--bg)}
/* Gedimmt werden nur die Texte, nicht der ganze Kopf, damit Heute-Punkt und
   Monatsmarke auch an Tagen ohne freie Zeiten voll sichtbar bleiben. Heute
   hat wegen des Mindestvorlaufs nie freie Zeiten, eine Sandfarbe auf
   gedimmtem Text wuerde dort nur trueb wirken, deshalb der Punkt. */
.cal-dayhead.is-empty .cal-wd,
.cal-dayhead.is-empty .cal-dn{opacity:.4}
.cal-dayhead.is-today::after{
  content:'';position:absolute;left:50%;bottom:4px;width:6px;height:6px;margin-left:-3px;
  border-radius:var(--r-pill);background:var(--accent);
}
/* Monatsmarke: senkrechte Linie an der Grenze zum neuen Monat, Kuerzel
   darueber im Abstand zum Kopf. Markierung wie der Kicker-Strich, keine
   Trennlinie, deshalb --accent. */
.cal-dayhead.is-monthstart::before{
  content:'';position:absolute;left:-3px;top:-6px;bottom:0;width:1px;background:var(--accent);
}
.cal-mtag{
  position:absolute;left:-3px;top:-22px;padding-left:6px;
  font-weight:600;font-size:.62rem;line-height:1;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}
.cal-rule{grid-column:1/-1;grid-row:2;background:rgba(245,246,248,.18)}
.cal-times{grid-row:3;display:flex;flex-direction:column;gap:6px;padding-top:14px}
.cal .slot-btn{width:100%;padding:10px 0;font-size:.75rem}
.cal-status{grid-column:1/-1;grid-row:1/-1;color:#C9D2DE;padding:6px;max-width:none}
/* Solange keine Tage da sind (laedt, keine freien Termine), nur der Hinweis */
.cal.is-nodata{grid-template-areas:"week week week"}
.cal.is-nodata .cal-head,
.cal.is-nodata .cal-nav{display:none}

@media(max-width:520px){
  .cal{grid-template-areas:"prev head next" "week week week";padding:14px 10px;row-gap:22px}
  /* Pfeile auf Hoehe der Monatszeile, nicht mittig zum ganzen Kopf, der
     darunter noch Platz fuer "Heute" reserviert */
  .cal-nav{align-self:start;margin-top:0}
  .cal-head{flex-direction:column;justify-content:flex-start;gap:6px;padding:6px 0 0;text-align:center}
  .cal-month{font-size:.9rem}
  .cal-dn{font-size:1.05rem}
  .cal .slot-btn{font-size:.7rem}
}

.choice-grid{display:grid;gap:14px}
.choice-card{
  display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;
  width:100%;font-family:var(--body);color:var(--bg);
  background:rgba(245,246,248,.06);border:1px solid rgba(245,246,248,.18);
  border-radius:var(--r-card);padding:22px 24px;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.choice-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.choice-card:focus-visible{outline:none;box-shadow:var(--ring)}
.choice-card.is-selected{border-color:var(--accent);background:rgba(179,156,131,.14)}
.choice-title{font-weight:700;font-size:1rem}
.choice-hint{font-size:.85rem;color:#C9D2DE}

.pill-select{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:4px}
.pill-option{position:relative}
.pill-option input{position:absolute;opacity:0;width:1px;height:1px}
.pill-option span{
  display:inline-block;font-size:.85rem;font-weight:600;color:var(--bg);cursor:pointer;
  background:rgba(245,246,248,.06);border:1px solid rgba(245,246,248,.18);
  border-radius:var(--r-inner);padding:10px 20px;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.pill-option:hover span{border-color:var(--accent)}
.pill-option:has(input:checked) span{background:var(--accent);border-color:var(--accent);color:var(--primary)}
.pill-option input:focus-visible + span{outline:none;box-shadow:var(--ring)}
.wizard-sub{display:grid;gap:22px;margin-top:4px}

.slot-btn{
  font-family:var(--mono);font-weight:500;font-size:.8rem;color:var(--bg);cursor:pointer;
  background:rgba(245,246,248,.06);border:1px solid rgba(245,246,248,.18);
  border-radius:var(--r-inner);padding:10px 16px;text-align:center;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.slot-btn:hover{border-color:var(--accent)}
.slot-btn.is-selected{background:var(--accent);border-color:var(--accent);color:var(--primary)}
.slot-btn:focus-visible{outline:none;box-shadow:var(--ring)}

.summary-list{display:grid;gap:14px 22px;grid-template-columns:1fr 1.4fr}
.summary-list dt{font-weight:600;font-size:.8rem;color:#C9D2DE}
.summary-list dd{font-size:.9rem;color:var(--bg)}
.summary-list dt.is-highlight,
.summary-list dd.is-highlight{font-weight:700;color:var(--accent)}

.wizard-nav{display:flex;gap:14px;align-items:center}
.wizard-nav .btn-secondary{background:transparent;color:var(--bg);border-color:rgba(245,246,248,.3)}
.wizard-nav .btn-secondary:hover{background:rgba(245,246,248,.08);border-color:var(--accent)}
.wizard-nav #wizardNext{margin-left:auto}
.wizard-nav #wizardSubmit{flex:1 1 auto;width:auto}

@media(max-width:520px){
  .summary-list{grid-template-columns:1fr}
  /* Sechs Kreise plus fuenf feste 22px-Linien ergaben 358px und waren damit
     breiter als die dunkle Flaeche (346px bei 390px Bildschirm), die ganze
     Seite liess sich seitlich verschieben. Behoben am 11.09.2026: Die Linien
     duerfen hier bis 6px schrumpfen. */
  .wizard-dots{gap:6px}
  .wizard-dot-line{flex:0 1 22px;min-width:6px}
}
/* Schmale Handys: "Zurueck" und "Weiter" bzw. "Termin anfragen" passten bei
   360px nicht nebeneinander (292px bei 264px Platz). Auf Wunsch des Nutzers
   (11.09.2026) bleiben beide nebeneinander, dafuer kleinere Schrift, weniger
   Innenabstand und die kompakte Pfeilkachel von .btn-sm. */
@media(max-width:400px){
  .wizard-nav{gap:10px}
  .wizard-nav .btn{font-size:.8125rem;padding:10px 14px}
  .wizard-nav .btn-arrow{padding-right:56px}
  .wizard-nav .btn-arrow .btn-tile{top:4px;right:4px;bottom:4px;width:42px}
  .wizard-nav .btn-arrow:hover .btn-tile{width:calc(100% - 8px)}
}
@media(max-width:400px) and (hover:none){
  .wizard-nav .btn-arrow:hover .btn-tile{width:42px}
}
@media(max-width:400px) and (prefers-reduced-motion:reduce){
  .wizard-nav .btn-arrow:hover .btn-tile{width:42px}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--surface);color:var(--ink);border-top:1px solid var(--line)}
.footer-inner{
  max-width:var(--wrap);margin:0 auto;padding:56px var(--pad);
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px;
}
.footer-brand .logo{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.08em;
  color:var(--primary);margin-bottom:14px;
}
.footer-brand .logo-full{height:27px}
.footer-brand p{font-size:.78rem;color:var(--ink);max-width:34ch}
.footer-head{
  font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--secondary);margin-bottom:14px;
}
.footer-col a{
  display:block;font-size:.78rem;color:var(--ink);padding:6px 0;
  transition:color .25s var(--ease);
}
.footer-col a:hover{color:var(--secondary)}
.footer-bottom{
  max-width:var(--wrap);margin:0 auto;padding:22px var(--pad) 34px;
  border-top:1px solid var(--line);
}
.footer-bottom p{font-size:.78rem;color:var(--ink);max-width:none}

/* ---------- Rechtstexte ---------- */
.legal{max-width:760px;margin:0 auto;padding:190px var(--pad) 120px}
.legal .back{display:inline-block;margin-bottom:34px;font-size:.8rem;color:var(--muted)}
.legal .back:hover{color:var(--primary)}
.legal h1{font-family:var(--display);font-weight:600;font-size:clamp(2.25rem,4vw,3rem);
  line-height:1.05;letter-spacing:-.02em;color:var(--primary);max-width:760px;margin-bottom:14px}
.legal .updated{font-weight:600;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--secondary);margin-bottom:56px}
/* Rechtstexte sind dicht gesetzt, daher das untere Ende der H2-Spanne. */
.legal h2{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,2.4vw,1.75rem);
  line-height:1.15;letter-spacing:-.01em;color:var(--primary);margin:56px 0 14px}
.legal h3{font-family:var(--body);font-weight:600;font-size:1.125rem;line-height:1.3;
  color:var(--ink);margin:34px 0 10px}
.legal p{color:var(--ink);font-size:.95rem;margin-bottom:14px;max-width:none}
.legal ul{margin-bottom:14px;display:grid;gap:10px}
.legal li{position:relative;padding-left:20px;color:var(--ink);font-size:.95rem}
.legal li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
  border-radius:50%;background:var(--secondary)}
.legal a{color:var(--secondary);border-bottom:1px solid var(--line)}
.legal a:hover{border-bottom-color:var(--secondary)}
.legal .note{margin:34px 0}
.legal .note strong{display:block;margin-bottom:6px;color:var(--primary)}

/* ---------- Dauerschleifen ausserhalb des Bildes anhalten ----------
   .is-offscreen setzt main.js per IntersectionObserver (28.09.2026). */
.is-offscreen,.is-offscreen *,.is-offscreen *::before,.is-offscreen *::after{animation-play-state:paused!important}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ---------- Platzhalter-Markierung (DEV) ---------- */
/* .ph markiert Textstellen und bleibt deshalb inline. Flaechige Platzhalter
   behalten ihre eigene Darstellung, sonst fallen sie auf Textgroesse zusammen. */
.ph{display:inline}
.thumb.ph,.logo-slot.ph,.avatar.ph{display:flex}
body.show-ph .ph{
  background:rgba(196,154,58,.16);box-shadow:0 0 0 2px var(--warning);border-radius:var(--r-tiny);
}
body.show-ph .thumb,
body.show-ph .logo-slot,
body.show-ph .avatar{border-color:var(--warning);border-style:solid}
.ph-toggle{
  position:fixed;right:18px;bottom:18px;z-index:65;
  background:var(--primary);color:var(--bg);border:0;border-radius:var(--r-pill);
  padding:10px 20px;font-weight:600;font-size:.8rem;cursor:pointer;
  box-shadow:var(--sh-inset),var(--sh-btn);opacity:.55;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.ph-toggle:hover{opacity:1;transform:translateY(-2px)}
.ph-toggle[aria-pressed="true"]{background:var(--warning);color:var(--primary);opacity:1}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:900px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .case{grid-template-columns:1fr;gap:34px}
  .case-visual{max-width:420px}
  .about{grid-template-columns:1fr;gap:34px}
  .about-img{max-width:340px}
  .cta-grid{grid-template-columns:1fr;gap:56px}
  .footer-inner{grid-template-columns:1fr 1fr}

  /* Die Leiste zeigt nur noch Logo, Menue-Schalter und CTA.
     Die Links klappen buendig darunter auf, ebenfalls ueber die volle Breite. */
  .nav{gap:4px;padding:8px 22px}
  .nav .logo{padding:8px 12px}
  .nav-toggle{display:inline-block}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:2px;padding:10px 16px 16px;
    background:var(--bg);border:0;border-bottom:1px solid var(--line);border-radius:0;
    box-shadow:var(--sh-2);
  }
  .nav-links.is-open{display:flex}
  .nav-links a{padding:12px 16px;font-size:.9rem}
}

@media(max-width:768px){
  section{padding:90px 22px;scroll-margin-top:96px}
  .hero{padding:150px 22px 90px}
  .legal{padding:150px 22px 90px}
  .dark-wrap{padding:0 22px 90px}
  .band-dark{padding:56px 26px}
  .grid-2,.grid-3,.fit,.metrics{grid-template-columns:1fr}
  .metrics{gap:26px}
  .row{grid-template-columns:1fr;gap:10px;padding:26px 10px}
  .row .tag{justify-self:start}
  .footer-inner{grid-template-columns:1fr;gap:34px}
}

@media(max-width:520px){
  /* Die Wortmarke weicht der Bildmarke, damit der CTA in der Leiste bleibt.
     Der Link zur Startseite bleibt dabei erhalten. */
  .nav .logo-full{display:none}
  .nav .logo-mark{display:block}
  .nav{padding:8px 16px}
  .nav .logo{padding:6px 10px}
  .nav-toggle{padding:8px 14px}
  .actions .btn{flex:1 1 100%}
  .hero{padding:140px 22px 72px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

@media print{
  .nav,.ph-toggle,.marquee,#progress,.form,.skip{display:none!important}
  .reveal{opacity:1;transform:none}
  body{background:#fff;font-size:11pt}
  .band-dark{background:none;color:var(--ink);border:1px solid var(--line)}
  .band-dark h2,.band-dark h3,.cta-direct a{color:var(--ink)}
  .card-outline{background:none}
}

/* Ohne JavaScript und im Druck bleibt kein Text unsichtbar. Die Einblend-Effekte
   starten bei Deckkraft 0 und warten auf main.js bzw. die *-surprise.js, ohne
   Skript waere die Seite sonst fast leer. Greift nur in diesen beiden Faellen,
   mit JavaScript am Bildschirm aendert sich nichts. !important, weil die
   Sektions-Dateien nach style.css geladen werden. */
@media (scripting:none), print{
  .reveal,.asl-line,.asl-card,.wid-list li,.sig-module,.zh-stage,.rp-step,
  .rp-pulse-label,.rp-hold-label,.aw-station,.wr-badge,.wr-tablet,.wr-ticket li{
    opacity:1!important;transform:none!important;animation:none!important;transition:none!important;
  }
  #faq.rg .rg-panel-wrap{grid-template-rows:1fr!important}
}