/* ===========================================================================
   pia. landing page, Release 2 (MGMT-504), approved 10.10.2026
   ---------------------------------------------------------------------------
   Colour and radius come only from css/tokens.css (which maps TOMORIS.Design
   roles to the names pia. has used since the prototype). This file holds
   layout, hierarchy, type and motion, and no colour literal except the
   one white highlight of the single CTA shine, carried over from index.html.

   It is a separate file on purpose: the Report-Only CSP of the house
   (server/static.mjs) already says style-src 'self'. Inline <style> and
   style="" attributes would be the first thing to break once it is enforced.

   MOTION, one rule set for the whole page (catalogue in docs/landing-r2/FREIGABE.md):
     B1  hover lifts by 1px, --dur-fast
     B2  sections below the fold build up once when they come into view,
         --dur-slow, staggered by 60ms; above the fold nothing moves
     B3  the main button gets ONE shine on load, never again
     B4  exactly ONE endless loop: the dot in the announcement bar
     B5  the veil sequence plays once when it comes into view, with a button
         to show it again; never on its own a second time
     B6  switching a feature tab cross-fades the panel, --dur-fast
     prefers-reduced-motion: every one of them is off, final states shown.
     Without JavaScript nothing is hidden: hiding is opt-in by the script.
   =========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:'Nunito Sans',system-ui,sans-serif;background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%;overflow-wrap:break-word}
h1,h2,h3,.logo{font-family:'Fredoka',system-ui,sans-serif;font-weight:500;letter-spacing:.2px;color:var(--ink);
  hyphens:auto;overflow-wrap:break-word}
a{color:var(--primary-text)}
img,svg{max-width:100%;height:auto;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Skip link: the first stop for the keyboard ---------- */
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--card);color:var(--ink);
  border:2px solid var(--primary);border-radius:var(--r-button);padding:10px 18px;font-weight:800;
  text-decoration:none;transition:top var(--dur-fast) var(--ease)}
.skip:focus{top:10px}

/* ---------- Announcement bar (B4: the only endless loop) ---------- */
.ansage{background:var(--sun);color:var(--sun-ink);text-align:center;font-size:13.5px;font-weight:700;
  padding:9px 14px;line-height:1.5}
.ansage a{margin-left:6px}
.ansage a{color:var(--sun-ink);text-decoration:underline;text-underline-offset:2px}
.ansage .pulspunkt{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sun-ink);
  margin-right:8px;vertical-align:1px;
  animation:puls 2.4s var(--ease) infinite}
@keyframes puls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}

/* ---------- Header ---------- */
header.top{position:sticky;top:0;background:var(--glass);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--glass-line);z-index:50}
.topin{display:flex;align-items:center;gap:18px;padding:10px 0;min-height:64px}
.logo{font-size:28px;color:var(--ink);text-decoration:none;line-height:1;padding:6px 0}
.logo .dot{color:var(--sun)}
nav.main{display:flex;gap:4px;margin-left:auto}
nav.main a{font-size:14.5px;font-weight:700;color:var(--ink2);text-decoration:none;
  padding:10px 10px;border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
nav.main a:hover{color:var(--primary-text);border-bottom-color:var(--primary)}
.topactions{display:flex;align-items:center;gap:8px}

/* Disclosure menus are <details>: they open and close without JavaScript.
   The script only adds Escape, outside click and focus return. */
.menue{position:relative}
.menue>summary{list-style:none;cursor:pointer}
.menue>summary::-webkit-details-marker{display:none}
.menue-liste{position:absolute;right:0;top:calc(100% + 8px);min-width:250px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-overlay);padding:8px;z-index:60}
.menue-liste a{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border-radius:var(--r-box);
  color:var(--ink);text-decoration:none;font-weight:800;font-size:15px;min-height:44px;justify-content:center}
.menue-liste a .unter{font-weight:600;font-size:13px;color:var(--mut)}
.menue-liste a:hover{background:var(--hover);color:var(--primary-text)}
.nav-mobil{display:none}
/* The mobile menu hangs from the HEADER, not from its button: the button is
   not at the right edge, and a list anchored to it ran off the left side at
   320-390 px. The sticky header is the containing block. */
.nav-mobil.menue{position:static}
.nav-mobil .menue-liste{left:16px;right:16px;top:100%;min-width:0}

/* ---------- Buttons: round, because --tm-radius-button is 999px for pia. ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  background:var(--primary);color:var(--primary-ink);border:1.5px solid transparent;
  border-radius:var(--r-button);padding:11px 22px;font-weight:800;font-size:15px;line-height:1.25;
  text-decoration:none;cursor:pointer;font-family:'Nunito Sans',sans-serif;box-shadow:var(--sh-sm);text-align:center;
  transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.btn:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--sh)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line3);box-shadow:none}
.btn.ghost:hover{background:var(--hover);border-color:var(--primary);color:var(--primary-text)}
.btn.pine{background:var(--pine);color:var(--pinetx);border-color:var(--line3)}
.btn.pine:hover{background:var(--pine3)}
.btn.stage{background:var(--sun);color:var(--sun-ink)}
.btn.stage:hover{background:var(--sun);filter:brightness(1.08)}
.btn.big{padding:14px 28px;font-size:16.5px}
.btn.klein{padding:9px 16px;font-size:14px}
.textlink{font-weight:800;color:var(--primary-text);text-underline-offset:3px;display:inline-flex;
  align-items:center;min-height:44px}

/* B3: the ONE shine. Runs once over the main button and never again. */
.btn.glanz{position:relative;overflow:hidden}
.btn.glanz::after{content:"";position:absolute;top:0;bottom:0;width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(-260%);animation:glanz 900ms var(--ease) 620ms 1 forwards}
@keyframes glanz{to{transform:translateX(420%)}}

/* ---------- Status chips: one vocabulary, three states ----------
   The state is carried by word AND shape (dot, ring, dash), never by colour
   alone. Changing a state after a deploy is one attribute plus one word. */
.status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;
  border-radius:var(--r-pill);padding:4px 11px 4px 9px;border:1px solid transparent;line-height:1.3}
.status::before{content:"";width:9px;height:9px;border-radius:50%;flex:none}
.status[data-status="verfuegbar"]{background:var(--ok-fill);color:var(--ok-ink)}
.status[data-status="verfuegbar"]::before{background:var(--ok-text)}
.status[data-status="einrichtung"]{background:var(--info-fill);color:var(--info-ink)}
.status[data-status="einrichtung"]::before{background:transparent;box-shadow:inset 0 0 0 2.5px var(--info-text)}
.status[data-status="vorbereitung"]{background:var(--unknown-fill);color:var(--unknown-ink);border-color:var(--line3)}
.status[data-status="vorbereitung"]::before{height:3px;border-radius:2px;background:var(--unknown-text)}
.neu{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  background:var(--sun);color:var(--sun-ink);border-radius:var(--r-pill);padding:3px 9px}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- Hero ---------- */
.hero{padding:56px 0 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:center}
.hero h1{font-size:clamp(32px,5vw,54px);line-height:1.08}
.hero h1 .zweite{display:block;color:var(--primary-text)}
.hero p.sub{font-size:18.5px;color:var(--ink2);margin:18px 0 24px;max-width:34em}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .hinweis{font-size:13.5px;color:var(--mut);margin-top:10px}
.vertrauen{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:26px;list-style:none;max-width:36em}
.vertrauen li{font-size:14px;color:var(--ink2);padding-left:26px;position:relative}
.vertrauen li::before{content:"✓";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;
  background:var(--ok-fill);color:var(--ok-ink);font-weight:800;font-size:11.5px;text-align:center;line-height:19px}
.vertrauen b{color:var(--ink);font-weight:800}

/* Device frame for product views: the bezel is the stage colour, the picture
   keeps its intrinsic 1280x800 ratio (width/height attributes, no layout shift). */
.geraet{background:var(--pine);border-radius:22px;padding:10px;box-shadow:var(--sh)}
.geraet img{border-radius:13px;width:100%}
figure.ansicht figcaption{font-size:12.5px;color:var(--mut);margin-top:10px;text-align:center}
figure.ansicht figcaption b{color:var(--ink2)}

/* ---------- Sections ---------- */
section{padding:60px 0}
section.alt{background:var(--card2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--primary-text);margin-bottom:10px}
h2.sec{font-size:clamp(26px,3.6vw,38px);line-height:1.15;max-width:24em}
p.lead{font-size:17px;color:var(--ink2);margin-top:12px;max-width:44em}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-sm);
  padding:22px;display:flex;flex-direction:column;gap:8px;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.card:hover{transform:translateY(-1px);box-shadow:var(--sh);border-color:var(--line3)}
.card h3{font-size:18.5px;line-height:1.25}
.card p{font-size:14.5px;color:var(--ink2)}
.card .weiter{margin-top:auto;padding-top:6px}
.card .em{font-size:28px;line-height:1}
ul.checks{list-style:none;margin-top:14px}
ul.checks li{padding:6px 0 6px 32px;position:relative;font-size:15.5px;color:var(--ink2)}
ul.checks li::before{content:"✓";position:absolute;left:0;top:6px;width:22px;height:22px;border-radius:50%;
  background:var(--ok-fill);color:var(--ok-ink);font-weight:800;text-align:center;line-height:22px;font-size:13px}
.paket-hinweis{font-size:12px;font-weight:800;color:var(--mut);border:1px solid var(--line3);border-radius:var(--r-pill);
  padding:1px 7px;margin-left:4px;white-space:nowrap}

/* ---------- Who it is for ---------- */
.wer{font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut)}

/* ---------- The veil: the core, on the dark stage ---------- */
section.schleier{background:var(--pine);color:var(--pinetx);border:0}
section.schleier h2,section.schleier h3{color:var(--pinetx)}
section.schleier .kicker{color:var(--sun)}
section.schleier p.lead{color:var(--pinetx2)}
section.schleier ul.checks li{color:var(--pinetx2)}
section.schleier ul.checks li::before{background:var(--pine3);color:var(--sun)}
section.schleier a{color:var(--sun)}
section.schleier :focus-visible{outline-color:var(--sun)}
.schleier-weg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px;list-style:none}
.schritt{background:var(--pine2);border:1px solid var(--pine3);border-radius:var(--r-card);padding:16px 14px;position:relative;
  transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.schritt:hover{transform:translateY(-1px)}
.schritt .nr{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  background:var(--sun);color:var(--sun-ink);font-size:12px;font-weight:800;margin-bottom:9px}
.schritt b{display:block;font-family:'Fredoka',system-ui,sans-serif;font-weight:500;font-size:17px;color:var(--pinetx);margin-bottom:3px}
.schritt span.t{font-size:13px;color:var(--pinetx2);display:block;line-height:1.45}
.schritt.ki{background:var(--pine3);border-color:var(--sun)}
/* The swap in step 2: both lines exist in the DOM, the final one is the
   readable state. Screen readers get the final text only (the other is
   aria-hidden). Whole lines, not just the name: a hidden "Lena" kept its
   width and left a gap in "K1      hat". */
.schritt b.tausch{display:grid}
.tausch>*{grid-area:1/1}
.tausch .vorher{opacity:0}
.schleier-fuss{margin-top:20px;font-size:14px;color:var(--pinetx2);border-top:1px solid var(--pine3);padding-top:16px;max-width:72ch}
.schleier-fuss b{color:var(--sun)}
.nochmal{margin-top:14px;background:transparent;color:var(--pinetx);border:1.5px solid var(--pine3);border-radius:var(--r-button);
  min-height:44px;padding:8px 16px;font:inherit;font-weight:800;font-size:14px;cursor:pointer}
.nochmal:hover{border-color:var(--sun)}
.nochmal[hidden]{display:none}
.zwei-spalten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;margin-top:34px}

/* B5: the sequence. Only runs once .spielt is set by the script; without it
   (no JS, reduced motion) every step shows its final state. */
.spielt .schritt{animation:schritt-an var(--dur-slow) var(--ease) both}
.spielt .schritt:nth-child(2){animation-delay:420ms}
.spielt .schritt:nth-child(3){animation-delay:840ms}
.spielt .schritt:nth-child(4){animation-delay:1260ms}
@keyframes schritt-an{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}
.spielt .tausch .vorher{animation:wort-weg var(--dur-slow) var(--ease) 700ms both}
.spielt .tausch .nachher{animation:wort-her var(--dur-slow) var(--ease) 700ms both}
@keyframes wort-weg{from{opacity:1}to{opacity:0}}
@keyframes wort-her{from{opacity:0}to{opacity:1}}

/* ---------- Feature tabs ----------
   Without JavaScript the tab list is not shown and every panel is visible
   one below the other. The script turns it into a tab widget (B6). */
.reiter-liste{display:none}
.lp-js .reiter-liste{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:28px}
.reiter{min-height:52px;background:var(--card);color:var(--ink2);border:1.5px solid var(--line);border-radius:var(--r-box);
  padding:8px 10px;font:inherit;font-weight:800;font-size:14px;line-height:1.25;cursor:pointer;text-align:center;
  hyphens:auto;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.reiter:hover{border-color:var(--primary);color:var(--primary-text)}
.reiter[aria-selected="true"]{background:var(--pine);border-color:transparent;color:var(--pinetx)}
.bereich{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:36px;align-items:start;margin-top:28px;
  padding-top:28px;border-top:1px solid var(--line)}
.lp-js .bereich{border-top:0;padding-top:0}
.bereich[hidden]{display:none}
/* A link to #bereich-x focuses the panel. The focus stays visible (keyboard
   users need to see where they landed), but quieter than the accent ring that
   framed the whole panel in red. */
.bereich:focus-visible{outline:2px dashed var(--line3);outline-offset:10px;border-radius:var(--r-card)}
.lp-js .bereich.zeigt{animation:einblenden var(--dur-fast) var(--ease) both}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
.bereich h3{font-size:clamp(22px,2.6vw,28px);line-height:1.2;margin-top:10px}
.bereich p{color:var(--ink2);margin-top:8px}
.teil{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.teil h4{font-family:'Fredoka',system-ui,sans-serif;font-weight:500;font-size:19px;margin:8px 0 2px}
.teil p{font-size:15px}
.grenze{font-size:14px;color:var(--ink2);background:var(--card2);border:1px solid var(--line);border-radius:var(--r-box);
  padding:10px 14px;margin-top:12px}

/* SVG illustration roles, carried over from index.html (Etappe B) */
.il-flaeche{fill:var(--card)}
.il-grund{fill:var(--paper)}
.il-linie{stroke:var(--line);fill:none}
.il-buehne{fill:var(--brand-pine)}
.il-buehne-tx{fill:var(--pinetx)}
.il-tx{fill:var(--ink)}
.il-mut{fill:var(--mut)}
.il-warn{fill:var(--warn-fill)}

/* ---------- Leadership and providers ---------- */
details.frage{background:var(--card);border:1px solid var(--line);border-radius:var(--r-box);margin-top:10px}
details.frage summary{cursor:pointer;font-weight:800;padding:14px 46px 14px 16px;min-height:52px;position:relative;list-style:none}
details.frage summary::-webkit-details-marker{display:none}
details.frage summary::after{content:"+";position:absolute;right:16px;top:12px;font-size:20px;color:var(--mut);
  transition:transform var(--dur-fast) var(--ease)}
details.frage[open] summary::after{transform:rotate(45deg)}
details.frage .antwort{padding:0 16px 16px;color:var(--ink2);font-size:15px}
.fragen{margin-top:30px;max-width:820px}
.fragen h3{font-size:20px}

/* ---------- Packages ---------- */
.paket .preis{font-family:'Fredoka',system-ui,sans-serif;font-size:26px;color:var(--ink);line-height:1.15}
.paket .per{font-size:13px;color:var(--mut)}
.paket ul.checks li{font-size:14.5px}
.paket.betont{border-color:var(--primary);border-width:2px}
.paket .btn{margin-top:auto}
.paket-fuss{font-size:13px;color:var(--mut);margin-top:14px;max-width:70ch}

/* ---------- Value, calculator, trust, municipalities (Release 10, BA-469) ----------
   Same tokens and parts as above: card, checks, status chip, button, the
   states of css/zustand.css. No colour literal, no transition of its own. */
.wert-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:28px;align-items:start}
.stapel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-sm);overflow:hidden}
.stapel-liste{list-style:none}
.stapel-liste li{display:grid;grid-template-columns:minmax(0,10.5em) minmax(0,1fr);gap:4px 16px;padding:14px 20px;
  border-bottom:1px solid var(--line);align-items:start}
.stapel-was{font-weight:800;color:var(--ink);padding-left:30px;position:relative;line-height:1.35}
.stapel-was::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  background:var(--ok-fill);color:var(--ok-ink);font-weight:800;text-align:center;line-height:22px;font-size:13px}
.stapel-wie{font-size:14.5px;color:var(--ink2);line-height:1.5}
.stapel-liste .status{grid-column:2;justify-self:start}
.stapel-liste .stapel-ki{background:var(--primary-soft)}
.stapel-summe{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:16px 20px 6px}
.stapel-summe-titel{flex-basis:100%;font-weight:800;color:var(--ink)}
.stapel-preis{font-family:'Fredoka',system-ui,sans-serif;font-size:30px;color:var(--ink);line-height:1.15}
.stapel-zusatz{font-size:13.5px;color:var(--mut)}
.stapel-weiter{padding:0 20px 10px}

.rechner{gap:12px}
.rechner h3,.angebot h3{font-size:21px}
.rechner-lead{font-size:14.5px}
.felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;align-items:start}
.feld{display:flex;flex-direction:column;gap:5px;min-width:0}
.feld label{font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.3}
.feld input,.feld textarea{width:100%;min-height:44px;font:inherit;font-size:16px;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line3);border-radius:var(--r-box);padding:9px 12px}
.feld textarea{min-height:88px;resize:vertical}
.feld input[aria-invalid="true"]{border-color:var(--crit-text)}
.feld-fehler{font-size:12.5px;font-weight:700;color:var(--crit-text)}
.feld-fehler[hidden]{display:none}
.umschalter,.einwilligung{display:flex;gap:10px;align-items:center;min-height:44px;padding:4px 0;
  font-size:14px;line-height:1.45;color:var(--ink2);cursor:pointer}
.umschalter input,.einwilligung input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--primary)}
.ergebnis{border-top:1px solid var(--line)}
.ergebnis>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.ergebnis dt{font-size:14px;color:var(--ink2);line-height:1.4}
.ergebnis dt [hidden]{display:none}
.ergebnis dd{font-family:'Fredoka',system-ui,sans-serif;font-size:19px;color:var(--ink);white-space:nowrap;text-align:right}
.ergebnis .betont dt{font-weight:800;color:var(--ink)}
.ergebnis .betont dd{font-size:22px;color:var(--primary-text)}
.rechner-fuss{font-size:12.5px;color:var(--mut);line-height:1.5}
.card p.rechner-fuss{font-size:12.5px;color:var(--mut)}
/* Without a script the calculator cannot reckon and the form cannot send;
   they say so instead of looking broken. The script sets .lp-js on <html>. */
.ohne-js{font-size:13.5px;color:var(--ink2)}
.lp-js .ohne-js{display:none}


.gemeinde{border-top:1px solid var(--line)}
.gemeinde-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:start}
.voranschlag{margin-top:22px;background:var(--card2);border:1px solid var(--line);border-radius:var(--r-box);padding:14px 16px}
.voranschlag h3{font-size:17px}
.voranschlag dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin-top:8px;font-size:15px}
.voranschlag dt{font-weight:800;color:var(--ink)}
.voranschlag dd{color:var(--ink2)}
.voranschlag p{font-size:13px;color:var(--mut);margin-top:8px}
.angebot-felder{display:none;flex-direction:column;gap:12px}
.lp-js .angebot-felder{display:flex}
.angebot-klein{font-size:12.5px;color:var(--mut)}
.card p.angebot-klein{font-size:12.5px;color:var(--mut)}
.angebot-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.angebot .btn:disabled{opacity:.6;cursor:default;transform:none}
.angebot-zustand .zustand[hidden],.angebot-zustand [hidden]{display:none}
.angebot-zustand .vorgang{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:800;overflow-wrap:anywhere}

/* ---------- Entry paths ---------- */
.einstieg-weg .schritt-text{font-size:14px;color:var(--ink2)}
.einstieg-weg dl{font-size:13.5px;color:var(--ink2);display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:4px 0 8px}
.einstieg-weg dt{font-weight:800;color:var(--ink)}
.einstieg-weg .knoepfe{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.einstieg-weg .knoepfe .btn{width:100%}

/* ---------- Closing call ---------- */
section.schluss{text-align:center}
section.schluss h2{margin:0 auto}
section.schluss p.lead{margin:12px auto 24px}
section.schluss .ctas{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
footer{background:var(--pine);color:var(--pinetx);padding:40px 0 30px}
footer .cols{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer .logo{color:var(--pinetx);font-size:24px}
footer nav a{color:var(--pinetx2);font-size:14px;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin-right:16px}
footer nav a:hover{color:var(--pinetx);text-decoration:underline}
footer :focus-visible{outline-color:var(--sun)}
.powered{font-size:13px;color:var(--pinetx2)}
.powered b{color:var(--pinetx);letter-spacing:1px}
.powered .odot{color:var(--sun)}

/* ---------- Rueckmeldung: hier leben sechs der sieben Zustaende ---------- */
#fbBtn{position:fixed;right:18px;bottom:18px;z-index:80;background:var(--pine);color:var(--pinetx);
  border:0;border-radius:var(--r-button);padding:13px 19px;font-weight:800;font-size:14px;cursor:pointer;
  box-shadow:var(--sh);font-family:'Nunito Sans',sans-serif;
  transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
#fbBtn:hover{background:var(--pine3);transform:translateY(-1px)}
#fbPanel{position:fixed;right:18px;bottom:74px;z-index:81;width:min(340px,calc(100vw - 36px));
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh-overlay);padding:16px;display:none}
#fbPanel.on{display:block}
#fbPanel h3{font-size:16px;margin-bottom:8px}
#fbPanel label{display:block;font-size:11.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;color:var(--mut);margin:9px 0 4px}
#fbPanel select,#fbPanel textarea,#fbPanel input{width:100%;font-family:inherit;font-size:14px;
  color:var(--ink);border:1.5px solid var(--line);border-radius:var(--r-box);padding:8px 10px;
  background:var(--card)}
#fbPanel textarea{min-height:80px;resize:vertical}
#fbZustand{margin-top:10px}
#fbZustand:empty{display:none}
.fbclose{position:absolute;top:10px;right:12px;background:none;border:0;font-size:17px;
  color:var(--mut);cursor:pointer;font-family:inherit}
.fbclose:hover{color:var(--ink)}

/* ---------- B2: build-up when a section comes into view ----------
   .wartet is set by the script ONLY for elements below the fold, so nothing
   that is already on screen ever disappears and comes back. */
.lp-js [data-aufbau].wartet{opacity:0;transform:translateY(10px)}
.lp-js [data-aufbau].da{animation:auf var(--dur-slow) var(--ease) both}
.lp-js [data-aufbau].da:nth-child(2){animation-delay:60ms}
.lp-js [data-aufbau].da:nth-child(3){animation-delay:120ms}
.lp-js [data-aufbau].da:nth-child(4){animation-delay:180ms}
@keyframes auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Breakpoints: 1440 / 1024 / 768 / 430 / 390 / 360 / 320 ---------- */
@media (max-width:1060px){
  nav.main a{padding:10px 7px;font-size:14px}
  .lp-js .reiter-liste{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
  nav.main{display:none}
  .nav-mobil{display:block;margin-left:auto}
  .hero{grid-template-columns:minmax(0,1fr);padding-top:34px;gap:30px}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:minmax(0,1fr)}
  .bereich,.zwei-spalten,.wert-raster,.gemeinde-raster{grid-template-columns:minmax(0,1fr)}
  .schleier-weg{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  section{padding:46px 0}
  .wrap{padding:0 16px}
  .grid4{grid-template-columns:minmax(0,1fr)}
  .lp-js .reiter-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vertrauen{grid-template-columns:minmax(0,1fr)}
  .felder{grid-template-columns:minmax(0,1fr)}
  .stapel-liste li{grid-template-columns:minmax(0,1fr);padding:14px 16px}
  .stapel-liste .status{grid-column:1}
  .stapel-summe{padding:16px 16px 6px}
  .stapel-weiter{padding:0 16px 10px}
  .schleier-weg{grid-template-columns:minmax(0,1fr)}
  .hero .ctas .btn{width:100%}
  .topin{gap:8px}
  .topactions .btn{padding:9px 14px;font-size:14px}
  .logo{font-size:25px}
}
@media (max-width:380px){
  /* Hidden for the eye only: display:none would also take "Anmelden" out of
     the accessible name, and the button would be called "(für Team, …)". */
  .topactions .anmelden-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .lp-js .reiter-liste{grid-template-columns:minmax(0,1fr)}
}

/* Print: whatever has not come into view yet must not print as empty space. */
@media print{
  .lp-js [data-aufbau].wartet{opacity:1;transform:none}
  header.top{position:static}
  .ansage,.skip,.nochmal,#fbBtn,#fbPanel{display:none}
}

/* Motion sparingly, and on request not at all. The package base layer also
   shortens every duration; this block stands here because the base layer is
   optional. Opacity is the only remainder, it moves nothing. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ansage .pulspunkt{animation:none}
  .btn.glanz::after{display:none}
  .lp-js [data-aufbau].wartet,.lp-js [data-aufbau].da{animation:none;opacity:1;transform:none}
  .spielt .schritt,.spielt .tausch .vorher,.spielt .tausch .nachher,.lp-js .bereich.zeigt{animation:none}
  .btn,.card,.schritt,.reiter,nav.main a,.skip,#fbBtn{transition-property:opacity}
  .btn:hover,.card:hover,.schritt:hover,#fbBtn:hover{transform:none}
  details.frage summary::after{transition:none}
}