/* ══════════════════════════════════════════════════════════════════
   STEMPEL 4.0 — STYLESHEET
   ──────────────────────────────────────────────────────────────────
   Gestaltungskonzept "Tinte & Papier":
   • Dunkler Schreibtisch (Hero, Rechner, Showroom, Bewertungen)
     im Wechsel mit warmem Papier (Vorteile, Ablauf, FAQ) →
     Rhythmus beim Scrollen, jede Sektion hat eine eigene Stimmung.
   • Stempelabdrücke mit SVG-Filter #ink (in index.html) als
     wiederkehrendes Markenzeichen.
   • Schriften: Anton (Headlines, Marke), Inter (Fließtext, Marke),
     IBM Plex Mono (Daten, Labels, Stempeltext → "Formular"-Gefühl).
   Gliederung: 1 Tokens · 2 Basis · 3 Komponenten · 4 Sektionen
               (in Seitenreihenfolge) · 5 Animationen · 6 Responsive
═══════════════════════════════════════════════════════════════════ */

/* ── 1 · FONTS (lokal, DSGVO-konform) ─────────────────────────────── */
@font-face{font-family:'Anton';font-weight:400;font-display:swap;src:url('../fonts/anton-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2')}

/* ── 1 · DESIGN-TOKENS ────────────────────────────────────────────── */
:root{
  /* Flächen */
  --desk:#0b0d12;        /* dunkler "Schreibtisch" */
  --desk-2:#11141b;      /* zweite Dunkelstufe für Sektionswechsel */
  --card:#161a23;        /* Karten auf dunkel */
  --paper:#f4f1ea;       /* warmes Papier */
  --paper-2:#ebe6da;     /* Papier, eine Stufe dunkler */
  --white:#ffffff;
  /* Text */
  --t-light:#f3f4f6;
  --t-muted:#9aa3b2;
  --t-dark:#15171c;
  --t-dark-muted:#5b5f69;
  /* Marke & Tinte */
  --sky:#38bdf8;         /* Markenfarbe (UI-Akzent auf dunkel) */
  --sky-deep:#0ea5e9;
  --stamp:#1f4fd1;       /* Stempeltinte auf Papier (kräftiger als sky) */
  --red:#cf3522;         /* "Bezahlt"-Tinte */
  /* Linien, Radien, Schatten */
  --line-l:rgba(255,255,255,.09);
  --line-d:rgba(21,23,28,.12);
  --r:14px;
  --shadow:0 30px 80px -20px rgba(0,0,0,.6),0 10px 30px -10px rgba(0,0,0,.4);
  /* Schriften */
  --ff-d:'Anton',Impact,'Arial Narrow',sans-serif;
  --ff-b:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-m:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  /* Layout */
  --wrap:1180px;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --nav-h:68px;
  /* Safe-Area (iPhone-Notch) */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
}

/* ── 2 · BASIS ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--sat) + 12px);-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-b);font-size:1.0625rem;line-height:1.6;
  color:var(--t-light);background:var(--desk);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* Papierkorn über die ganze Seite — sehr dezent, gibt Tiefe statt Flachheit */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px}
.paper-bg :focus-visible,.cta :focus-visible{outline-color:var(--stamp)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--sky);color:#000;padding:.6rem 1rem;font-weight:600}
.skip:focus{left:1rem;top:1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ── 3 · KOMPONENTEN ──────────────────────────────────────────────── */

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:600;font-size:.95rem;letter-spacing:.01em;
  padding:.95rem 1.5rem;border-radius:999px;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s,box-shadow .2s,color .2s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-sky{background:var(--sky);color:#04121b;box-shadow:0 10px 30px -10px rgba(56,189,248,.7)}
.btn-sky:hover{background:#5ccbfa;box-shadow:0 14px 36px -10px rgba(56,189,248,.9)}
.btn-ghost{border:1.5px solid var(--line-l);color:var(--t-light)}
.btn-ghost:hover{border-color:var(--sky);color:var(--sky)}
.btn-ink{background:var(--t-dark);color:#fff}
.btn-ink:hover{background:#000}
.btn-sm{padding:.6rem 1.1rem;font-size:.85rem}
.btn-block{width:100%}

/* Kicker = kleine Mono-Überzeile */
.kicker{
  font-family:var(--ff-m);font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--stamp);margin-bottom:1rem;
}
.kicker.sky{color:var(--sky)}
/* Sektionsüberschrift */
.h2{
  font-family:var(--ff-d);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:.95;letter-spacing:.005em;
  margin-bottom:1.5rem;
}
.h2-sm{font-size:clamp(2rem,4.2vw,3.2rem)}
.h2-xl{font-size:clamp(2.8rem,7vw,5.6rem)}
.muted{color:var(--t-muted);max-width:52ch}
.muted-d{color:var(--t-dark-muted)}
.link-arrow{font-weight:600;border-bottom:2px solid currentColor;padding-bottom:2px;display:inline-block;margin-top:1rem}
.link-arrow:hover{color:var(--stamp)}
.dark .link-arrow:hover{color:var(--sky)}

/* Tinte: raue Kanten via SVG-Filter + Multiply wie echte Farbe auf Papier */
.ink{filter:url(#ink)}

/* ── 4 · SEKTIONEN ────────────────────────────────────────────────── */
.section{padding:clamp(4.5rem,9vw,8rem) 0;position:relative}
.dark{background:var(--desk)}
.dark-2{background:var(--desk-2)}
.paper-bg{background:var(--paper);color:var(--t-dark)}
.paper-2{background:var(--paper-2)}

/* ── NAVIGATION ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:calc(var(--nav-h) + var(--sat));padding:var(--sat) var(--pad) 0;
  display:flex;align-items:center;justify-content:space-between;
  transition:background .3s,backdrop-filter .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(11,13,18,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line-l)}
.brand{display:flex;align-items:center;gap:.65rem}
.brand-mark{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--sky);color:var(--sky);font-family:var(--ff-d);font-size:.9rem;
  transform:rotate(-12deg);
}
.brand-name{font-family:var(--ff-d);font-size:1.3rem;letter-spacing:.03em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:1.75rem}
.nav-links a:not(.btn){font-size:.9rem;font-weight:500;color:var(--t-muted);transition:color .2s}
.nav-links a:not(.btn):hover{color:var(--t-light)}
.burger{display:none;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--t-light);transition:transform .3s,top .3s}
.burger span:first-child{top:17px}.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}

/* ── HERO ── */
.hero{
  min-height:100svh;display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(2rem,4vw,4rem);
  align-items:center;max-width:1320px;margin:0 auto;
  padding:calc(var(--nav-h) + var(--sat) + 2.5rem) var(--pad) 3.5rem;position:relative;
}
/* Lichtkegel + feines Raster im Hintergrund */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 55% at 78% 45%,rgba(56,189,248,.16),transparent 70%),
    radial-gradient(40% 40% at 10% 90%,rgba(31,79,209,.18),transparent 70%),
    linear-gradient(var(--line-l) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,var(--line-l) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:radial-gradient(80% 80% at 60% 45%,#000 30%,transparent 85%);
          mask-image:radial-gradient(80% 80% at 60% 45%,#000 30%,transparent 85%);
}
.hero h1{font-weight:400;margin-bottom:1.5rem}
.eyebrow{
  display:block;font-family:var(--ff-m);font-size:.78rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:1.25rem;
}
.h1-line{display:block;font-family:var(--ff-d);text-transform:uppercase;font-size:clamp(3.6rem,8.4vw,7.6rem);line-height:.92}
/* Das Wort "Gestempelt." als echter Stempelabdruck */
.stamp-word{
  display:inline-block;color:var(--sky);
  border:.06em solid currentColor;outline:.025em solid currentColor;outline-offset:-.12em;
  padding:.06em .16em .02em;margin-top:.12em;border-radius:.06em;
  transform:rotate(-4deg);transform-origin:30% 60%;
}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);color:#c9cfda;max-width:34rem;margin-bottom:2rem}
.lead strong{color:var(--t-light);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2rem}
.trust-row{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.85rem;color:var(--t-muted)}
.trust-row strong{color:var(--t-light)}
.trust-row a:hover{color:var(--t-light)}
.tp-star{color:#00b67a}

/* ── LIVE-DEMO ── */
.demo{
  background:#1b1f29;border:1px solid var(--line-l);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;position:relative;
}
.demo-chrome{
  display:flex;align-items:center;gap:1rem;padding:.7rem 1rem;
  background:#232835;border-bottom:1px solid var(--line-l);font-size:.78rem;color:var(--t-muted);
}
.dots{display:flex;gap:6px}
.dots i{width:11px;height:11px;border-radius:50%;background:#3b4150}
.dots i:first-child{background:#ff5f57}.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}
.demo-file{font-family:var(--ff-m);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Modus-Umschalter (Segmented Control) in der Fensterleiste */
.demo-modes{display:flex;background:#161a23;border:1px solid var(--line-l);border-radius:8px;padding:2px;flex:none}
.dm{padding:.32rem .7rem;border-radius:6px;font-size:.74rem;font-weight:600;color:var(--t-muted);transition:background .2s,color .2s;white-space:nowrap}
.dm:hover{color:var(--t-light)}
.dm[aria-checked="true"]{background:rgba(56,189,248,.18);color:var(--sky)}
.demo-stage{position:relative;padding:clamp(1rem,2.5vw,1.75rem);background:#2a2f3b}
/* Die PDF-Seite. Cursor = kleiner Stempel (SVG-Data-URI, Hotspot mittig unten) */
.paper{
  position:relative;background:#fff;color:#222;border-radius:3px;
  padding:clamp(1rem,2.6vw,1.75rem);font-size:.72rem;line-height:1.5;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.5);min-height:520px;overflow:hidden;
  display:flex;flex-direction:column;   /* .inv-space füllt die Resthöhe */
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%231f4fd1' stroke='white' stroke-width='.8' d='M9 2h6v7l3 3v3H6v-3l3-3V2zm-4 15h14v3H5z'/%3E%3C/svg%3E") 16 30,crosshair;
  user-select:none;-webkit-user-select:none;
}
.paper.shake{animation:paperShake .28s ease-out}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.1rem;gap:1rem}
.inv-from{font-weight:700;font-size:.85rem}
.inv-addr{color:#777}
.inv-title{font-family:var(--ff-d);font-size:1.5rem;letter-spacing:.06em;color:#333}
.inv-meta{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;font-family:var(--ff-m);font-size:.66rem;color:#666;padding:.5rem 0;border-top:1px solid #eee;border-bottom:1px solid #eee;margin-bottom:.9rem}
.inv-table{width:100%;border-collapse:collapse;font-size:.72rem}
.inv-table td{padding:.32rem 0;border-bottom:1px dashed #eee}
.inv-table td:last-child{text-align:right;font-family:var(--ff-m)}
.inv-table .sum td{color:#666;border-bottom:0;padding:.15rem 0}
.inv-table .total td{font-weight:700;font-size:.85rem;border-top:2px solid #222;border-bottom:0;padding-top:.45rem}
/* Anschriftzone: Empfänger links, rechts freie Stempelfläche */
.inv-top{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;min-height:108px}
.inv-to{font-size:.72rem;line-height:1.45;color:#333}
.inv-to small{display:block;font-size:.55rem;color:#999;text-decoration:underline;text-underline-offset:2px;margin-bottom:.35rem}
.inv-free{position:relative}
.inv-note{margin-top:.8rem;font-size:.66rem;color:#777}
.inv-space{flex:1;min-height:80px}            /* zweite freie Stempelfläche */
.inv-lines{display:grid;gap:.4rem}
.inv-lines i{display:block;height:6px;background:#f0f0f0;border-radius:3px}

/* Hinweis-Bubble */
.demo-hint{
  position:absolute;left:50%;bottom:3.2rem;transform:translateX(-50%);width:max-content;max-width:calc(100% - 1.5rem);white-space:nowrap;display:flex;align-items:center;gap:.55rem;
  background:var(--t-dark);color:#fff;font-size:.8rem;padding:.6rem .9rem;border-radius:999px;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.5);pointer-events:none;transition:opacity .3s,transform .3s;
}
.demo-hint strong{color:var(--sky)}
.demo-hint.gone{opacity:0;transform:translate(-50%,8px)}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--sky);position:relative;flex:none}
.pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--sky);animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite}

/* Gesetzter Demo-Stempel (von JS erzeugt) */
.dstamp{
  --c:var(--stamp);
  position:absolute;left:0;top:0;pointer-events:none;
  color:var(--c);border:3px solid var(--c);outline:1.5px solid var(--c);outline-offset:-7px;
  border-radius:6px;padding:.7rem .9rem .6rem;min-width:190px;
  font-family:var(--ff-m);font-size:.66rem;line-height:1.45;font-weight:600;
  mix-blend-mode:multiply;filter:url(#ink);background:rgba(255,255,255,.01);
  transform:translate(-50%,-50%) rotate(var(--rot,-5deg)) scale(var(--s,1));
  animation:stampIn .42s cubic-bezier(.3,1.4,.5,1) both;
}
.dstamp.red{--c:var(--red)}
.dstamp .ds-title{font-family:var(--ff-d);font-weight:400;font-size:1.3rem;letter-spacing:.08em;line-height:1;margin-bottom:.35rem}
.dstamp .ds-row{white-space:nowrap}
.dstamp .ds-status{margin-top:.3rem;padding-top:.3rem;border-top:1.5px solid var(--c)}

/* ══════════════════════════════════════════════
   DEMO · AUFMERKSAMKEITSLENKUNG
══════════════════════════════════════════════ */
/* Einladung: Seite "atmet" in Markenfarbe, bis zum ersten Klick */
.paper.invite{animation:invite 2.4s ease-in-out infinite}
@keyframes invite{0%,100%{box-shadow:0 12px 30px -8px rgba(0,0,0,.5),0 0 0 0 rgba(56,189,248,0)}
  50%{box-shadow:0 12px 30px -8px rgba(0,0,0,.5),0 0 0 6px rgba(56,189,248,.35)}}

/* Geister-Stempel: gestrichelter Rahmen als konkretes Klickziel */
.ghost{
  position:absolute;left:50%;top:50%;width:min(180px,calc(100% - 12px));height:88px;transform:translate(-50%,-50%) rotate(-4deg);
  border:2px dashed rgba(31,79,209,.55);border-radius:8px;display:grid;place-items:center;pointer-events:none;
  background:rgba(56,189,248,.06);animation:ghostPulse 1.8s ease-in-out infinite;transition:opacity .3s;
}
.ghost span{font-family:var(--ff-m);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--stamp)}
.ghost.gone{opacity:0;animation:none}
@keyframes ghostPulse{0%,100%{transform:translate(-50%,-50%) rotate(-4deg) scale(1)}50%{transform:translate(-50%,-50%) rotate(-4deg) scale(1.05)}}

/* Coaching-Modus: Rechnung tritt zurück, nur der Stempel bleibt im Fokus */
.paper .inv-head,.paper .inv-meta,.paper .inv-table,.paper .inv-lines{transition:opacity .4s,filter .4s}
.paper.coaching .inv-head,.paper.coaching .inv-meta,.paper.coaching .inv-table,.paper.coaching .inv-lines{opacity:.28;filter:blur(1px)}
.paper.coaching .dstamp:not(.active){opacity:.35}

/* Coach-Bubble: sitzt neben dem aktiven Feld (JS setzt side-r/-l/-t),
   Pfeil zeigt aufs Feld; Position gleitet beim Feldwechsel mit */
.coach{
  position:absolute;left:0;top:0;z-index:4;pointer-events:none;
  background:var(--t-dark);color:#fff;border-radius:10px;padding:.5rem .75rem .45rem;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.6);text-align:left;white-space:nowrap;
  transition:left .3s cubic-bezier(.2,.8,.2,1),top .3s cubic-bezier(.2,.8,.2,1);
}
.coach[hidden]{display:none}
.coach::after{content:"";position:absolute;width:12px;height:12px;background:var(--t-dark);border-radius:2px}
.coach.side-r{transform:translateY(-50%);animation:bobX 1.4s ease-in-out infinite}
.coach.side-r::after{left:-5px;top:var(--arrow,50%);transform:translateY(-50%) rotate(45deg)}
.coach.side-l{transform:translate(-100%,-50%);animation:bobXl 1.4s ease-in-out infinite}
.coach.side-l::after{right:-5px;top:var(--arrow,50%);transform:translateY(-50%) rotate(45deg)}
.coach.side-t{transform:translate(-50%,calc(-100% - 10px));text-align:center;animation:coachBob 1.4s ease-in-out infinite}
.coach.side-t::after{left:var(--arrow,50%);bottom:-6px;transform:translateX(-50%) rotate(45deg)}
.coach.side-b{transform:translate(-50%,10px);text-align:center;animation:coachBob 1.4s ease-in-out infinite}
.coach.side-b::after{left:var(--arrow,50%);top:-6px;transform:translateX(-50%) rotate(45deg)}
@keyframes bobX{0%,100%{margin-left:0}50%{margin-left:5px}}
@keyframes bobXl{0%,100%{margin-left:0}50%{margin-left:-5px}}
.coach-txt{display:block;font-size:.8rem;font-weight:700;color:var(--sky)}
.coach-sub{display:block;font-family:var(--ff-m);font-size:.62rem;color:#aab3c2;margin-top:.1rem}
.coach.warn .coach-txt{color:#ffb4a8}
@keyframes coachBob{0%,100%{margin-top:0}50%{margin-top:-4px}}

/* Stempel mit direkter Eingabe: Rahmen + Text als "Tinte",
   Eingabefelder bleiben gestochen scharf (kein Filter) */
.dstamp.direct{filter:none;border:0;outline:0;mix-blend-mode:normal;pointer-events:auto;min-width:200px;background:transparent}
.dstamp.direct .ds-frame{position:absolute;inset:0;border:3px solid var(--c);outline:1.5px solid var(--c);outline-offset:-7px;border-radius:6px;filter:url(#ink);mix-blend-mode:multiply;pointer-events:none}
.dstamp.direct .ds-title,.dstamp.direct .ds-row{filter:url(#ink);mix-blend-mode:multiply}
.ds-fields{display:grid;gap:.3rem;margin-top:.4rem}
.ds-f{display:grid;grid-template-columns:3.6em 1fr;align-items:center;gap:.4rem;cursor:text}
.ds-f span{filter:url(#ink)}
.ds-f input{
  width:100%;min-width:0;border:0;border-bottom:1.5px dashed var(--c);border-radius:3px 3px 0 0;
  background:rgba(56,189,248,.1);color:var(--c);font-family:var(--ff-m);font-weight:600;font-size:.72rem;
  padding:.18rem .35rem;outline:none;transition:background .2s,box-shadow .2s;
}
.ds-f input::placeholder{color:rgba(31,79,209,.35)}
/* Aktives Feld: leuchtender Ring, pulsiert */
.ds-f.is-target input{background:rgba(56,189,248,.2);box-shadow:0 0 0 2px var(--sky);animation:fieldGlow 1.3s ease-in-out infinite}
@keyframes fieldGlow{0%,100%{box-shadow:0 0 0 2px var(--sky)}50%{box-shadow:0 0 0 5px rgba(56,189,248,.35)}}
.ds-f.nudge input{animation:nudge .35s ease}
@keyframes nudge{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
/* Ausgefüllt: wirkt wie eingetragen, bleibt aber editierbar (wie im echten PDF) */
.dstamp.done .ds-f input{background:transparent;border-bottom-color:transparent;box-shadow:none;animation:none}
.dstamp.done .ds-f input:hover,.dstamp.done .ds-f input:focus{background:rgba(56,189,248,.1)}
/* Touch-Geräte: ≥16 px, sonst zoomt iOS beim Antippen hinein */
@media (pointer:coarse){.ds-f input{font-size:16px;padding:.15rem .35rem}.ds-f{grid-template-columns:3.4em 1fr}}

/* Stempel-Vorschau am Mauszeiger (nur Maus/Trackpad):
   ersetzt den Zeiger → "ich kann überall stempeln" wird sofort klar */
.paper.previewing{cursor:none}
.dstamp.preview{opacity:.5;animation:none;pointer-events:none;z-index:3;filter:none;transition:opacity .15s}
.dstamp.preview[hidden]{display:none}
.dstamp.preview .ds-frame,.dstamp.preview .ds-title,.dstamp.preview .ds-row,.dstamp.preview .ds-f span{filter:none}
.ds-ph{display:block;height:.95rem;border-bottom:1.5px dashed var(--c);background:rgba(56,189,248,.1);border-radius:3px 3px 0 0}
@media (pointer:coarse){.paper{--s:.8}}

/* Dialog im Stil eines Programmdialogs */
.demo-dialog{
  position:absolute;inset:0;display:grid;place-items:center;padding:1rem;
  background:rgba(12,14,20,.45);backdrop-filter:blur(2px);z-index:5;
}
.demo-dialog[hidden]{display:none}
.dd-box{
  width:min(330px,100%);max-height:100%;overflow:auto;background:#f6f7f9;color:#1d2027;border-radius:10px;
  box-shadow:0 24px 60px -10px rgba(0,0,0,.6);padding:1.1rem 1.2rem 1rem;
  animation:dialogIn .22s ease-out both;font-size:.85rem;
}
.dd-title{font-weight:700;font-size:.95rem;margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem}
.dd-title::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--stamp)}
.dd-field{display:grid;gap:.25rem;margin-bottom:.7rem;border:0}
.dd-field > span,.dd-field legend{font-size:.72rem;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.06em}
.dd-field input[type=text],.dd-field select{
  width:100%;padding:.5rem .6rem;border:1px solid #cfd3db;border-radius:6px;background:#fff;
}
.dd-field input[type=text]:focus,.dd-field select:focus{outline:2px solid var(--stamp);outline-offset:0;border-color:var(--stamp)}
.dd-field small{font-size:.68rem;color:#888}
.dd-status label{display:flex;align-items:center;gap:.45rem;padding:.2rem 0;cursor:pointer}
.dd-status em{color:var(--red);font-style:normal;font-size:.72rem}
.dd-status input{accent-color:var(--stamp)}
.dd-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.4rem}
.dd-cancel{padding:.5rem .9rem;border-radius:6px;color:#555}
.dd-cancel:hover{background:#e8eaee}
.dd-ok{padding:.5rem 1.1rem;border-radius:6px;background:var(--stamp);color:#fff;font-weight:600}
.dd-ok:hover{background:#1a43b3}

.demo-foot{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.7rem 1rem;font-size:.8rem;color:var(--t-muted);border-top:1px solid var(--line-l);min-height:44px;
}
.demo-foot b{color:var(--sky)}
.demo-reset{font-size:.78rem;color:var(--sky);font-weight:600;padding:.25rem .5rem;border-radius:6px}
.demo-reset:hover{background:rgba(56,189,248,.12)}

/* ── KOMPATIBILITÄTS-LEISTE ── */
.compat{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem 1.6rem;
  padding:1.25rem var(--pad);border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);
  font-family:var(--ff-m);font-size:.78rem;color:#c9cfda;background:var(--desk-2);
}
.compat-label{color:var(--t-muted);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem}
.compat-soft{color:var(--t-muted)}

/* ── VORHER / NACHHER ── */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:stretch;margin:3rem 0}
.vs-col{border-radius:var(--r);padding:clamp(1.5rem,3vw,2.25rem);position:relative}
.vs-before{border:2px dashed var(--line-d);color:var(--t-dark-muted)}
.vs-after{background:var(--white);border:2px solid var(--stamp);box-shadow:0 20px 50px -25px rgba(31,79,209,.45)}
.vs-tag{
  font-family:var(--ff-m);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  display:inline-block;padding:.3rem .7rem;border-radius:999px;margin-bottom:1.25rem;
  background:var(--paper-2);color:var(--t-dark-muted);
}
.vs-after .vs-tag{background:var(--stamp);color:#fff}
.vs ol{list-style:none;counter-reset:s;display:grid;gap:.9rem}
.vs li{counter-increment:s;position:relative;padding-left:2.4rem}
.vs li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.2em;font-family:var(--ff-m);font-size:.75rem;font-weight:600;color:inherit;opacity:.6}
.vs-after li::before{color:var(--stamp);opacity:1}
.vs-before b{color:var(--t-dark);text-decoration:line-through;text-decoration-color:rgba(207,53,34,.55);text-decoration-thickness:2px}
.vs-after b{color:var(--t-dark)}
.vs-sum{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line-d);font-weight:600;color:var(--t-dark)}
.vs-arrow{align-self:center;font-family:var(--ff-d);font-size:2.5rem;color:var(--stamp)}

.pull{max-width:52rem;margin:0 auto;text-align:center}
.pull blockquote{font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.5;font-weight:500;color:var(--t-dark);position:relative}
.pull blockquote::before{content:"“";display:block;font-family:var(--ff-d);font-size:4.5rem;line-height:1;height:2.6rem;color:var(--stamp);margin-bottom:.6rem}
.pull figcaption{margin-top:1rem;font-family:var(--ff-m);font-size:.78rem;color:var(--t-dark-muted);letter-spacing:.06em}

/* ── EINSATZBEREICHE (Stempelabdrücke) ── */
.uses{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem}
.use{
  background:var(--paper);border:1px solid var(--line-d);border-radius:var(--r);
  padding:1.6rem 1.25rem 1.25rem;display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
}
.use:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(0,0,0,.35)}
.imprint{
  --c:var(--stamp);
  font-family:var(--ff-d);font-weight:400;text-transform:uppercase;font-size:1.25rem;letter-spacing:.06em;line-height:1.05;
  color:var(--c);border:3px solid var(--c);outline:1.5px solid var(--c);outline-offset:-6px;
  padding:.45rem .75rem .35rem;border-radius:5px;mix-blend-mode:multiply;hyphens:manual;
  transform:rotate(var(--r,-3deg));transition:transform .35s cubic-bezier(.3,1.4,.5,1);
}
.imprint.red{--c:var(--red)}
.use:nth-child(2n) .imprint{--r:2.5deg}
.use:nth-child(3n) .imprint{--r:-1.5deg}
.use:nth-child(5n) .imprint{--r:4deg}
.use:hover .imprint{transform:rotate(0) scale(1.05)}
.use p{font-size:.92rem;color:var(--t-dark-muted);line-height:1.5}
.uses-note{margin-top:2rem;text-align:center;color:var(--t-dark-muted)}
.uses-note a{color:var(--stamp);font-weight:600;border-bottom:1.5px solid currentColor}

/* ── ZEITERSPARNIS-RECHNER ── */
.roi{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.roi-box{background:var(--card);border:1px solid var(--line-l);border-radius:var(--r);padding:clamp(1.5rem,3vw,2.25rem)}
.roi-in{display:block;margin-bottom:1.4rem}
.roi-in > span{display:flex;justify-content:space-between;align-items:baseline;font-size:.88rem;color:var(--t-muted);margin-bottom:.55rem}
.roi-in output{font-family:var(--ff-m);font-weight:600;color:var(--t-light);font-size:1rem}
/* Schieberegler – einheitlich in allen Browsern */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--sky) var(--fill,50%),#2c3240 var(--fill,50%))}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:#2c3240}
input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--sky)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:#fff;border:4px solid var(--sky);box-shadow:0 2px 8px rgba(0,0,0,.4)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--sky)}
.roi-out{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1.4rem 0;border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);margin-top:.4rem}
.roi-big{display:block;font-family:var(--ff-d);font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1;font-variant-numeric:tabular-nums}
.roi-big.sky{color:var(--sky)}
.roi-lbl{font-size:.8rem;color:var(--t-muted)}
.roi-pay{margin-top:1.1rem;font-size:.92rem;color:#c9cfda}
.roi-pay b{color:var(--t-light)}

/* ── SHOWROOM & PREISE ── */
.sr-intro{margin-bottom:2.5rem}
.sr-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:1.25rem}
.sr-tab{
  text-align:left;padding:1rem 1.15rem;border-radius:12px;border:1.5px solid var(--line-l);
  background:var(--card);display:flex;flex-direction:column;gap:.15rem;transition:border-color .2s,background .2s,transform .2s;
}
.sr-tab span{font-family:var(--ff-d);font-size:1.35rem;text-transform:uppercase;letter-spacing:.02em}
.sr-tab b{font-family:var(--ff-m);font-size:.8rem;font-weight:600;color:var(--t-muted)}
.sr-tab:hover{border-color:rgba(56,189,248,.5)}
.sr-tab[aria-selected="true"]{border-color:var(--sky);background:linear-gradient(160deg,rgba(56,189,248,.16),rgba(56,189,248,.03))}
.sr-tab[aria-selected="true"] b{color:var(--sky)}
.sr-body{display:grid;grid-template-columns:1.4fr 1fr;gap:1.25rem}
.sr-viewer{background:var(--card);border:1px solid var(--line-l);border-radius:var(--r);padding:.8rem;display:flex;flex-direction:column}
.sr-screen{position:relative;background:#fff;border-radius:8px;overflow:hidden;aspect-ratio:16/10;display:grid;place-items:center}
.sr-screen img{width:100%;height:100%;object-fit:contain;transition:opacity .25s}
.sr-screen.loading img{opacity:.15}
.sr-loader{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s;
  background:linear-gradient(100deg,transparent 30%,rgba(56,189,248,.18) 50%,transparent 70%) 0 0/200% 100%}
.sr-screen.loading .sr-loader{opacity:1;animation:shimmer 1.1s linear infinite}
.sr-viewer figcaption{display:flex;justify-content:space-between;align-items:center;padding:.8rem .4rem .2rem;font-weight:600}
.sr-viewer figcaption b{font-family:var(--ff-m);color:var(--sky)}
.sr-panel{background:var(--card);border:1px solid var(--line-l);border-radius:var(--r);padding:1.4rem;display:flex;flex-direction:column;height:100%}
.sr-panel[hidden]{display:none}
.sr-desc{color:#c9cfda;font-size:.95rem;margin-bottom:1.2rem}
.sr-vars{list-style:none;display:grid;gap:.45rem;margin-bottom:1.25rem}
.sr-vars-grid{grid-template-columns:1fr 1fr}
.sr-var{
  width:100%;text-align:left;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  padding:.75rem .9rem;border-radius:10px;border:1px solid var(--line-l);font-size:.9rem;
  transition:border-color .2s,background .2s;
}
.sr-var b{font-family:var(--ff-m);font-weight:600;color:var(--t-muted)}
.sr-var:hover{border-color:rgba(56,189,248,.5)}
.sr-var.is-active{border-color:var(--sky);background:rgba(56,189,248,.1)}
.sr-var.is-active b{color:var(--sky)}
.sr-cta{margin-top:auto}
.sr-note{margin-top:1.5rem;text-align:center;color:var(--t-muted);font-size:.92rem}

/* ══════════════════════════════════════════════
   LIGHTBOX (Showroom) — natives <dialog>
   ::backdrop dunkelt die Seite ab und macht sie
   leicht unscharf; die Karte "schwebt" darüber.
══════════════════════════════════════════════ */
/* Betrachter wirkt klickbar */
.sr-screen{cursor:zoom-in}
.sr-zoom{
  position:absolute;right:.6rem;top:.6rem;z-index:2;font-size:.72rem;font-weight:600;
  background:rgba(11,13,18,.78);color:#fff;padding:.3rem .6rem;border-radius:999px;
  opacity:.85;transition:opacity .2s,transform .2s;pointer-events:none;
}
.sr-screen:hover .sr-zoom{opacity:1;transform:scale(1.05)}

.lb{
  margin:auto;padding:0;border:0;background:transparent;color:var(--t-light);
  width:min(980px,calc(100vw - 2rem));max-width:none;max-height:calc(100svh - 2rem);overflow:visible;
}
.lb::backdrop{background:rgba(5,7,10,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lb[open]{animation:lbIn .28s cubic-bezier(.2,.8,.2,1)}
.lb[open]::backdrop{animation:lbFade .28s ease}
.lb.closing{animation:lbOut .18s ease forwards}
.lb.closing::backdrop{animation:lbFadeOut .18s ease forwards}
@keyframes lbIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes lbOut{to{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
@keyframes lbFadeOut{to{opacity:0}}
/* Seite im Hintergrund nicht mitscrollen, solange das Fenster offen ist */
html.lb-open{overflow:hidden}

.lb-card{
  background:var(--card);border:1px solid var(--line-l);border-radius:18px;overflow:hidden;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.8),0 0 0 1px rgba(56,189,248,.08);
  display:flex;flex-direction:column;max-height:calc(100svh - 2rem);
}
.lb-head{display:flex;align-items:center;gap:1rem;padding:1rem 1rem 1rem 1.4rem;border-bottom:1px solid var(--line-l)}
.lb-titles{flex:1;min-width:0}
.lb-cat{font-family:var(--ff-m);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.lb-title{font-family:var(--ff-d);font-weight:400;font-size:clamp(1.3rem,2.6vw,1.8rem);text-transform:uppercase;letter-spacing:.02em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-price{font-family:var(--ff-m);font-weight:600;font-size:1rem;color:var(--sky);background:rgba(56,189,248,.12);padding:.35rem .7rem;border-radius:999px;white-space:nowrap}
.lb-price:empty{display:none}
.lb-x{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid var(--line-l);color:var(--t-muted);transition:background .2s,color .2s,transform .2s;
}
.lb-x:hover{background:rgba(255,255,255,.08);color:#fff;transform:rotate(90deg)}

.lb-stage{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;padding:1rem;min-height:0;flex:1}
.lb-screen{
  position:relative;background:#fff;border-radius:10px;overflow:hidden;
  display:grid;place-items:center;aspect-ratio:16/10;max-height:calc(100svh - 12rem);width:100%;
}
.lb-screen img{width:100%;height:100%;object-fit:contain;transition:opacity .2s}
.lb-screen.loading img{opacity:.15}
.lb-loader{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 30%,rgba(56,189,248,.2) 50%,transparent 70%) 0 0/200% 100%}
.lb-screen.loading .lb-loader{opacity:1;animation:shimmer 1.1s linear infinite}
.lb-err{display:none;position:absolute;inset:0;place-content:center;text-align:center;padding:1.5rem;color:#5b5f69;font-size:.9rem;line-height:1.7;
  background:repeating-linear-gradient(45deg,#f6f7f9 0 12px,#eef0f3 12px 24px)}
.lb-err a{color:var(--stamp);font-weight:600;border-bottom:1.5px solid currentColor}
.lb-screen.error .lb-err{display:grid}
.lb-screen.error img{opacity:0}
.lb-nav{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid var(--line-l);color:var(--t-light);transition:background .2s,border-color .2s,transform .2s;
}
.lb-nav:hover{background:rgba(56,189,248,.16);border-color:var(--sky);color:var(--sky)}
.lb-nav:active{transform:scale(.94)}
.lb-nav[hidden]{visibility:hidden;display:grid}   /* Platz behalten → Bild springt nicht */
.lb-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.4rem 1.1rem;border-top:1px solid var(--line-l)}
.lb-count{font-family:var(--ff-m);font-size:.8rem;color:var(--t-muted)}

@media (max-width:640px){
  .lb{width:calc(100vw - 1rem)}
  .lb-head{padding:.8rem .8rem .8rem 1rem;gap:.6rem}
  .lb-stage{grid-template-columns:1fr;padding:.6rem}
  /* Pfeile liegen auf dem Bild */
  .lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;background:rgba(11,13,18,.72)}
  .lb-prev{left:1rem}.lb-next{right:1rem}
  .lb-nav:active{transform:translateY(-50%) scale(.94)}
  .lb-foot{flex-direction:column-reverse;align-items:stretch;text-align:center;padding:.8rem 1rem 1rem}
  .lb-foot .btn{width:100%}
}

/* ══════════════════════════════════════════════
   SHOWROOM-PLAYER — live gerenderte Vorführungen
   (ersetzt die GIFs; Logik: assets/js/showroom-player.js)
   Logische Bühne 640 × 400 px, per JS auf die
   Containerbreite skaliert → alle Maße hier in px.
══════════════════════════════════════════════ */
.pl{position:absolute;inset:0;overflow:hidden;background:#dfe3ea;font-family:var(--ff-b);color:#1d2027;transition:opacity .4s}
.pl.fading{opacity:0}
.pl-canvas{position:absolute;left:0;top:0;width:640px;height:400px;transform-origin:0 0}
.pl-world{position:absolute;left:0;top:0;width:640px;height:400px;transform-origin:0 0;will-change:transform}
/* Werkzeugleiste des "PDF-Programms" */
.pl-bar{position:absolute;left:0;right:0;top:0;height:34px;background:#2b303b;color:#cfd5df;display:flex;align-items:center;gap:10px;padding:0 12px;font-size:11px}
.pl-file{flex:1;font-family:var(--ff-m)}
.pl-pages{font-family:var(--ff-m);color:#9aa3b2}
.pl-xbtns{display:flex;gap:6px}
.pl-xbtn.hov{background:#38bdf8;color:#04121b}
.pl-xbtn{background:#3a4150;border-radius:5px;padding:4px 8px;font-weight:600;font-size:10.5px;color:#fff;animation:plPop .3s}
.pl-tool{background:rgba(56,189,248,.18);color:#7dd3fc;border-radius:5px;padding:4px 9px;font-weight:600}
.pl-tool.open{background:#38bdf8;color:#04121b}
/* Seite */
.pl-page{position:absolute;left:40px;top:50px;width:560px;height:338px;background:#fff;border-radius:2px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.pl-page.thud{animation:plThud .25s ease-out}
.pl-page.flip{animation:plFlip .4s ease}
.pl-doc{padding:22px 26px;display:grid;gap:8px;font-size:11px}
.pl-doc b{font-size:12px}
.pl-doc em{position:absolute;right:26px;top:20px;font-family:var(--ff-d);font-style:normal;font-size:20px;letter-spacing:.06em;color:#333}
.pl-doc i{display:block;height:7px;border-radius:3px;background:#eceef2}
.pl-doc hr{border:0;border-top:1px solid #eee;margin:4px 0}
.pl-layer{position:absolute;inset:0}
/* Mauszeiger */
.pl-cur{position:absolute;left:0;top:0;z-index:30;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.pl-cur svg{display:block;transition:transform .12s}
.pl-cur.press svg{transform:scale(.82)}
.pl-cur-stamp{position:absolute;left:14px;top:16px;width:34px;height:22px;border:2px dashed #1f4fd1;border-radius:3px;background:rgba(56,189,248,.18);opacity:0;transition:opacity .2s}
.pl-cur.stamping .pl-cur-stamp{opacity:1}
.pl-ripple{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:2px solid #38bdf8;z-index:29;pointer-events:none;animation:plRipple .55s ease-out forwards}
/* Menü, Listen, Hinweise */
.pl-menu{position:absolute;right:10px;top:36px;z-index:25;background:#fff;border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.28);padding:6px;min-width:150px;display:grid;font-size:12px;animation:plPop .2s}
.pl-menu small{font-size:9.5px;color:#888;text-transform:uppercase;letter-spacing:.08em;padding:3px 8px}
.pl-menu span{padding:6px 8px;border-radius:5px}
.pl-menu span.hov,.pl-list span.hov{background:#1f4fd1;color:#fff}
.pl-list{position:absolute;z-index:26;background:#fff;border:1px solid #cfd3db;border-radius:6px;box-shadow:0 10px 24px rgba(0,0,0,.25);display:grid;font-size:11px;font-family:var(--ff-b);font-weight:500;color:#1d2027;animation:plPop .18s;white-space:nowrap}
.pl-list span{padding:5px 8px}
.pl-toast{position:absolute;z-index:27;transform:translate(-50%,-50%);background:#15171c;color:#fff;font-size:11px;font-weight:600;padding:6px 10px;border-radius:999px;white-space:nowrap;animation:plPop .2s}
.pl-toast.ok{background:#15803d}.pl-toast.warn{background:#cf3522}
.pl-toast.out{opacity:0;transition:opacity .25s}
.pl-key{position:absolute;right:12px;bottom:48px;z-index:40;font-family:var(--ff-m);font-weight:600;font-size:14px;color:#15171c;background:#fff;border:1px solid #bbb;border-bottom-width:4px;border-radius:8px;padding:6px 12px;opacity:0;transform:translateY(6px);transition:opacity .15s,transform .15s}
.pl-key.on{opacity:1;transform:none;animation:plKey .3s}
/* Bildunterschrift */
.pl-cap{position:absolute;left:50%;bottom:10px;z-index:40;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:rgba(15,17,23,.9);color:#fff;border-radius:999px;padding:5px 14px 5px 5px;font-size:13px;font-weight:600;line-height:1.3;width:max-content;max-width:calc(100% - 20px);opacity:0;transition:opacity .25s;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.pl-cap.on{opacity:1}
.pl-cap.pop{animation:plCap .35s cubic-bezier(.3,1.4,.5,1)}
.pl-cap-n{flex:none;min-width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#38bdf8;color:#04121b;font-family:var(--ff-m);font-size:11px}

/* Stempel auf der Bühne */
.ps{position:absolute;z-index:10;--c:#1f4fd1;color:var(--c);border:2.5px solid var(--c);outline:1.2px solid var(--c);outline-offset:-6px;border-radius:5px;background:rgba(255,255,255,.72);
  padding:9px 12px 8px;font-family:var(--ff-m);font-size:11px;font-weight:600;line-height:1.55;white-space:nowrap;
  transform:translate(-50%,-50%) rotate(var(--rot,-3deg)) scale(var(--sc,1));
  transition:color .45s,border-color .45s,outline-color .45s,left .8s cubic-bezier(.45,0,.2,1),top .8s cubic-bezier(.45,0,.2,1),transform .8s cubic-bezier(.45,0,.2,1)}
.ps.slam{animation:plSlam .42s cubic-bezier(.3,1.4,.5,1)}
.ps-t{font-family:var(--ff-d);font-weight:400;font-size:19px;letter-spacing:.08em;line-height:1.05;margin-bottom:4px}
.ps-r{display:flex;align-items:center;gap:8px;min-height:19px}
.ps-r > span{min-width:48px;opacity:.85}
.ps-r b{font-weight:600}
.ps-foot{margin-top:4px;padding-top:3px;border-top:1.5px solid var(--c);font-size:10px}
.ps b.auto,.ps .auto{animation:plAuto .9s ease}
/* Formularfelder */
.pf{display:inline-block;min-height:17px;padding:1px 5px;background:rgba(56,189,248,.16);border-bottom:1.5px dashed var(--c);border-radius:3px 3px 0 0;font-style:normal;color:var(--c);position:relative;transition:background .2s,box-shadow .2s}
.pf.sel::after{content:"▾";position:absolute;right:4px;top:0;opacity:.6}
.pf.focus,.pl-in.focus{box-shadow:0 0 0 2px #38bdf8;background:rgba(56,189,248,.28)}
.pf.focus::before,.pl-in.focus::before{content:"";position:absolute;right:3px;top:3px;bottom:3px;width:1.5px;background:currentColor;animation:plCaret .8s steps(2) infinite}
.pf.req:not(.filled){box-shadow:0 0 0 1.5px #cf3522;background:rgba(207,53,34,.08)}
.pcb-w{display:inline-flex;align-items:center;gap:4px;margin-right:8px}
.pcb{display:inline-grid;place-items:center;width:13px;height:13px;border:1.5px solid var(--c);border-radius:2px;font-style:normal;background:rgba(56,189,248,.14)}
.pcb.on::after{content:"✓";font-size:11px;line-height:1;animation:plPop .2s}
.ps-grid{display:grid;grid-template-columns:auto auto;gap:4px 8px;align-items:center;margin-top:2px}
.ps-grid.g3{grid-template-columns:repeat(3,auto)}
.ps-grid > span{font-size:9.5px;opacity:.8}
.ps-sum{font-size:10px!important}
.ps-check{margin-top:5px;font-size:10px;padding:2px 6px;border-radius:4px;background:rgba(207,53,34,.12);color:#cf3522;transition:background .3s,color .3s}
.ps-check.ok{background:rgba(21,128,61,.14);color:#15803d}
.ps-num{font-size:13px;letter-spacing:.04em}
.ps-rows{display:grid;gap:4px}
.ps-grow{display:flex;gap:6px}
.ps-grow.new{animation:plGrow .35s ease}
.ps-plus{display:inline-block;margin-top:5px;font-size:10px;padding:2px 7px;border-radius:999px;border:1.2px solid var(--c)}
.ps-sig{margin-top:5px;width:190px;height:44px;border:1.5px dashed #cf3522;border-radius:4px;display:grid;place-items:center;position:relative;background:rgba(207,53,34,.05);color:#cf3522}
.ps-flag{font-size:10px;font-weight:700}
.ps-sig.signed{border-color:var(--c);background:transparent;color:var(--c)}
.ps-ink{width:150px;height:32px}
.ps-ink path{fill:none;stroke:#1f3a8a;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320;animation:plDraw 1.1s ease forwards}
.ps-sig small{position:absolute;bottom:1px;right:4px;font-size:8px;opacity:.7}
.ps.corner{border-width:3px;padding:6px 18px}
/* Gesperrt (wie "Lock all Fields" im Original): Feld-Hinterlegung verschwindet,
   Inhalt wirkt wie gedruckt; Text nur noch markierbar */
.ps.locked .pf{background:transparent;border-bottom-color:transparent}
.pf.marked{background:rgba(56,189,248,.45)!important}
.ps.shake{animation:plShake .35s}
.ps.selected{box-shadow:0 0 0 2px #fff,0 0 0 4px #38bdf8}
.ps.gone{transition:transform .35s,opacity .35s;opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(20deg)}
.pl-bit{position:absolute;z-index:28;width:6px;height:6px;border-radius:1px;background:#1f4fd1;animation:plBit .65s ease-out forwards}
.pl-badge{position:absolute;top:-9px;left:-8px;width:15px;height:15px;border-radius:50%;background:#38bdf8;color:#04121b;font-size:9px;font-weight:700;display:grid;place-items:center;animation:plPop .25s}
.pl-badge.done{background:#1f4fd1;color:#fff}
.pl-rect{position:absolute;z-index:12;width:0;height:0;border:1.5px dashed #1f4fd1;background:rgba(56,189,248,.12)}
.pl-fly{position:absolute;z-index:28;transform:translate(-50%,-50%);font-family:var(--ff-m);font-size:12px;font-weight:700;color:#1f4fd1;background:#fff;padding:2px 6px;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.25);transition:left .7s cubic-bezier(.45,0,.2,1),top .7s cubic-bezier(.45,0,.2,1)}
/* Dialoge im "PDF-Programm" */
.pl-dlg,.pl-panel{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:20;background:#f6f7f9;border-radius:9px;box-shadow:0 20px 50px rgba(0,0,0,.4);font-size:12px;animation:plDlg .25s ease;overflow:visible}
.pl-panel{width:300px;top:42%}
.pl-dlg.out,.pl-panel.out{opacity:0;transform:translate(-50%,-46%);transition:opacity .2s,transform .2s}
.pl-dlg.shake{animation:plShakeC .4s}
.pl-dlg-t{background:#e6e9ef;padding:7px 12px;font-weight:700;border-radius:9px 9px 0 0;font-size:11.5px}
.pl-dlg-b{padding:10px 12px 4px;display:grid;gap:7px;position:relative}
.pl-dr{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:8px}
.pl-dr > span{font-size:11px;color:#555}
.pl-dr em{color:#cf3522;font-style:normal}
.pl-in{display:block;min-height:22px;padding:3px 7px;background:#fff;border:1px solid #cfd3db;border-radius:4px;font-style:normal;font-size:11.5px;position:relative}
.pl-in.sel::after{content:"▾";position:absolute;right:6px;top:3px;color:#888}
.pl-in.err{border-color:#cf3522;box-shadow:0 0 0 2px rgba(207,53,34,.2)}
.pl-err{color:#cf3522;font-size:11px;font-weight:600;animation:plPop .2s}
.pl-rg{display:flex;flex-wrap:nowrap}
.pl-radio{display:inline-flex;align-items:center;gap:4px;margin-right:10px;font-size:11px}
.pl-radio::before{content:"";width:11px;height:11px;border-radius:50%;border:1.5px solid #888;background:#fff}
.pl-radio.on::before{border-color:#1f4fd1;background:radial-gradient(#1f4fd1 38%,#fff 42%)}
.pl-dep{display:grid;max-height:0;overflow:hidden;opacity:0;transition:max-height .4s,opacity .4s}
.pl-dep.show{max-height:40px;opacity:1;overflow:visible}
.pl-dep.show .pl-dr{background:rgba(56,189,248,.12);border-radius:5px;padding:2px 4px;margin:0 -4px}
.pl-dlg-a{display:flex;justify-content:flex-end;gap:6px;padding:8px 12px 10px}
.pl-btn{padding:4px 12px;border-radius:5px;font-size:11px;color:#555;font-style:normal}
.pl-btn.ok{background:#1f4fd1;color:#fff;font-weight:700}
.pl-sigpop{position:absolute;z-index:26;background:#fff;border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.3);padding:8px 10px;display:grid;gap:3px;font-size:11px;animation:plPop .2s}
.pl-sigpop span{color:#666;font-size:10px}
.pl-sigpop .pl-btn{justify-self:start;margin-top:3px}
/* Keyframes */
@keyframes plSlam{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--rot)) scale(calc(var(--sc,1)*2.2))}60%{opacity:1;transform:translate(-50%,-50%) rotate(var(--rot)) scale(calc(var(--sc,1)*.94))}100%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(var(--sc,1))}}
@keyframes plThud{30%{transform:translateY(2px)}}
@keyframes plFlip{0%{transform:none}45%{transform:translateX(-30px) rotateY(12deg);opacity:.3}55%{transform:translateX(30px);opacity:.3}100%{transform:none;opacity:1}}
@keyframes plRipple{to{width:44px;height:44px;margin:-22px 0 0 -22px;opacity:0}}
@keyframes plPop{from{opacity:0;transform:scale(.9)}to{opacity:1}}
@keyframes plCap{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes plKey{40%{transform:translateY(3px);border-bottom-width:1px}}
@keyframes plAuto{0%{background:#fde68a;color:#15171c}100%{background:transparent}}
@keyframes plCaret{50%{opacity:0}}
@keyframes plDlg{from{opacity:0;transform:translate(-50%,-44%) scale(.96)}}
@keyframes plShake{20%,60%{margin-left:-5px}40%,80%{margin-left:5px}}
@keyframes plShakeC{20%,60%{transform:translate(calc(-50% - 7px),-50%)}40%,80%{transform:translate(calc(-50% + 7px),-50%)}}
@keyframes plBit{to{transform:translate(var(--dx),var(--dy)) rotate(180deg);opacity:0}}
@keyframes plGrow{from{opacity:0;transform:translateY(-6px)}}
@keyframes plDraw{to{stroke-dashoffset:0}}
/* Wenn der Player läuft: GIF-Bild ausblenden */
.has-player > img{display:none}
.has-player .sr-loader,.has-player .lb-loader{display:none}

/* ══════════════════════════════════════════════
   SHOWROOM-PLAYER · Tabellen-Stempel & Details
   (nachgebaut nach den Original-Vorlagen)
══════════════════════════════════════════════ */
/* Tabellen-Stempel: Rahmen außen, Zellen mit Linien in Stempelfarbe */
.ps.tbl{padding:0;outline:none;border-width:2px;border-radius:2px;background:rgba(255,255,255,.93)}
.pt{display:grid}
.pt > .c{display:flex;align-items:center;gap:4px;min-height:19px;padding:2px 5px;font-size:10px;
  border-right:1.2px solid var(--c);border-bottom:1.2px solid var(--c)}
.pt > .c small{font-size:8.5px;opacity:.85;white-space:nowrap}
.pt > .c.ctr{justify-content:center;text-align:center}
.pt > .c.col{flex-direction:column;align-items:flex-start;gap:1px}
.pt > .c.ctr.col{align-items:center}
.pt > .c.hdr{background:rgba(31,79,209,.06)}
.pt .pf{min-height:14px;font-size:9.5px}
.ps-hd{font-family:var(--ff-b);font-weight:700;font-size:11px;letter-spacing:.04em}
.pt-logo{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--c);
  font-family:var(--ff-d);font-size:12px;transform:rotate(-10deg)}
/* zentrierte Zeilen, großes Datum, kleiner Fußtext, Kasten */
.ps-ctr{text-align:center;display:flex;justify-content:center}
.ps-big{font-size:14px;font-weight:600}
.ps-small{font-size:8px;opacity:.8;margin-top:2px}
.ps-hd2{font-weight:700;font-size:10.5px;margin-bottom:3px}
.ps-x{font-weight:700}
.ps-box{margin:4px auto 2px;padding:2px 8px;border:1.5px solid var(--c);text-align:center;font-weight:700;font-size:11px;width:max-content}
/* Unterschriftenfeld im Tabellen-Stempel */
.pf.psig{min-width:74px;min-height:26px;background:rgba(207,53,34,.06);border:1.2px dashed #cf3522;border-radius:3px;display:grid;place-items:center}
.pf.psig::before{content:"▸";color:#cf3522;font-size:9px}
.pf.psig.signed{background:transparent;border-color:transparent}
.pf.psig.signed::before{content:none}
.pf.psig .ps-ink{width:74px;height:22px}

/* Kalender-Popup am Datumsfeld */
.pl-cal{position:absolute;z-index:27;background:#fff;border:1px solid #cfd3db;border-radius:6px;box-shadow:0 10px 24px rgba(0,0,0,.25);
  padding:6px;font:500 9.5px var(--ff-b);color:#1d2027;animation:plPop .18s;transform:rotate(0)}
.pl-cal b{display:flex;justify-content:space-between;gap:10px;font-size:10px;margin-bottom:4px}
.pl-cal-g{display:grid;grid-template-columns:repeat(7,19px);gap:1px;text-align:center}
.pl-cal-g i{font-style:normal;padding:2px 0;border-radius:3px}
.pl-cal-g i.wd{opacity:.55;font-weight:700}
.pl-cal-g i.today{outline:1.5px solid #1f4fd1;outline-offset:-1.5px}
.pl-cal-g i.hov{background:#38bdf8;color:#04121b}

/* Dialog-Details: Zwischenüberschrift, "Heute"-Knopf, Checkbox-Raster, Optionsfelder */
.pl-dlg{--c:#4b5563}
.pl-dh{font-size:10.5px;font-weight:700;margin:7px 0 4px;color:#374151}
.pl-mini{display:inline-block;margin-left:6px;padding:2px 9px;border:1px solid #cfd3db;border-radius:4px;background:#e9ebef;font-size:10px;font-weight:600;white-space:nowrap}
.pl-mini.hov{background:#38bdf8;border-color:#38bdf8;color:#04121b}
.pl-dg{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;font-size:10.5px}
.prd-w{display:inline-flex;align-items:center;gap:3px;margin-right:9px;font-size:10.5px;white-space:nowrap}
.prd{display:inline-grid;place-items:center;width:11px;height:11px;border-radius:50%;border:1.3px solid #6b7280;font-style:normal}
.prd.on::after{content:"";width:5px;height:5px;border-radius:50%;background:#1f4fd1;animation:plPop .2s}
.pl-dq{display:flex;align-items:center;gap:4px;padding:3px 0;border-top:1px solid #e5e7eb;font-size:10.5px}
.pl-dq > span:first-child{flex:1;min-width:112px}

/* ── ABLAUF ── */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin:3rem 0 2.5rem;counter-reset:none}
.step{position:relative;padding-top:.5rem}
.step-n{
  display:block;font-family:var(--ff-d);font-size:4.2rem;line-height:1;margin-bottom:.8rem;
  color:transparent;-webkit-text-stroke:1.5px var(--stamp);
}
.step h3{font-size:1.1rem;font-weight:700;margin-bottom:.4rem}
.step p{font-size:.93rem;color:var(--t-dark-muted)}
/* Verbindungslinie zwischen den Schritten (nur Desktop) */
.step:not(:last-child)::after{
  content:"";position:absolute;top:2.6rem;left:5.2rem;right:-.6rem;height:0;border-top:2px dashed rgba(31,79,209,.3);
}
.incl{
  display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;
  padding:1.1rem 1.4rem;background:var(--white);border-radius:var(--r);border:1px solid var(--line-d);font-size:.9rem;font-weight:500;
}
.incl-lbl{font-family:var(--ff-m);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--stamp);margin-right:.5rem}

/* ── BEWERTUNGEN ── */
.rv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:2.5rem}
.rv-head .h2{margin-bottom:0}
.tp-badge{
  display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:1rem;align-items:center;
  padding:1rem 1.25rem;border:1px solid var(--line-l);border-radius:var(--r);background:var(--card);transition:border-color .2s;
}
.tp-badge:hover{border-color:#00b67a}
.tp-stars{grid-column:1/3;color:#00b67a;font-size:1.2rem;letter-spacing:.1em}
.tp-stars .half{background:linear-gradient(90deg,#00b67a 50%,#3b4150 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tp-score{font-family:var(--ff-d);font-size:2.6rem;line-height:1}
.tp-meta{font-size:.8rem;color:var(--t-muted);line-height:1.4}
.tp-meta u{color:var(--t-light);text-decoration-color:#00b67a;text-underline-offset:3px}
.marquee{
  overflow-x:auto;padding:.5rem 0 1rem;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee::-webkit-scrollbar{display:none}
.marquee-track{list-style:none;display:flex;gap:1rem;width:max-content;padding:0 var(--pad)}
/* Endlos-Animation nur, wenn JS die Liste verdoppelt hat */
.marquee.is-looping{overflow:hidden}
.marquee.is-looping .marquee-track{animation:marquee 70s linear infinite;padding:0}
.marquee.is-looping:hover .marquee-track,.marquee.is-looping:focus-within .marquee-track,.marquee.is-looping:focus .marquee-track{animation-play-state:paused}
.rv{
  width:min(380px,82vw);flex:none;background:var(--card);border:1px solid var(--line-l);border-radius:var(--r);
  padding:1.4rem 1.4rem 1.2rem;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;
}
.rv p{font-size:.95rem;color:#d7dbe3;line-height:1.55;flex:1}
.rv footer{font-size:.78rem;color:var(--t-muted);font-family:var(--ff-m)}
.rv footer b{color:var(--t-light);font-family:var(--ff-b);font-weight:600}

/* ── PERSÖNLICH ── */
.person{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;max-width:980px}
.person-mark{
  width:clamp(130px,16vw,190px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  font-family:var(--ff-d);font-size:clamp(3rem,6vw,4.6rem);color:var(--stamp);
  border:5px solid var(--stamp);outline:2px solid var(--stamp);outline-offset:-14px;
  transform:rotate(-10deg);mix-blend-mode:multiply;
}
.person p:not(.kicker){color:var(--t-dark-muted);max-width:56ch}

/* ── FAQ ── */
.faq{display:grid;grid-template-columns:.8fr 1.7fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.faq-side{position:sticky;top:calc(var(--nav-h) + 2rem)}
.faq-grp{font-family:var(--ff-m);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--stamp);margin:2rem 0 .5rem}
.faq-grp:first-child{margin-top:0}
.faq details{border-bottom:1px solid var(--line-d)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.1rem 0;font-weight:600;font-size:1.02rem;color:var(--t-dark);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--line-d);font-size:1.2rem;font-weight:400;transition:transform .3s,background .2s,color .2s,border-color .2s;
}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--stamp);color:#fff;border-color:var(--stamp)}
.faq summary:hover{color:var(--stamp)}
.faq details p{color:var(--t-dark-muted);padding:0 3rem 1rem 0;font-size:.97rem}
.faq details p b{color:var(--t-dark)}
.faq details[open] > p{animation:fadeUp .3s ease-out}
.faq .tip{background:var(--paper-2);border-radius:10px;padding:.9rem 1rem;margin:0 0 1rem;font-size:.9rem}
kbd{font-family:var(--ff-m);font-size:.8em;padding:.1rem .4rem;border:1px solid #bbb;border-bottom-width:2px;border-radius:4px;background:#fff}
.faq .dl{display:flex;flex-wrap:wrap;gap:.6rem}
.faq .dl a{padding:.55rem 1rem;border-radius:999px;background:var(--t-dark);color:#fff;font-size:.85rem;font-weight:600}
.faq .dl a:hover{background:var(--stamp)}

/* ── ANFRAGE (CTA) ── */
.cta{background:var(--sky);color:#04121b;overflow:hidden}
.cta::before{ /* großer Stempelring als Hintergrund-Grafik */
  content:"";position:absolute;right:-12vw;top:-10vw;width:48vw;aspect-ratio:1;border-radius:50%;
  border:3vw solid rgba(4,18,27,.07);outline:.8vw solid rgba(4,18,27,.07);outline-offset:-5vw;pointer-events:none;
}
.cta .kicker{color:#04121b;opacity:.75}
.cta-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,5rem);align-items:center;position:relative}
.cta-copy > p{font-size:1.05rem;max-width:40ch;color:#0b2c3d}
.cta-direct{margin-top:1.75rem;font-weight:500}
.cta-direct a{font-weight:700;border-bottom:2px solid currentColor}
.copy-btn{margin-left:.6rem;font-size:.78rem;font-weight:600;padding:.3rem .7rem;border-radius:999px;border:1.5px solid rgba(4,18,27,.35)}
.copy-btn:hover{background:rgba(4,18,27,.08)}
.cfg{background:var(--paper);color:var(--t-dark);border-radius:18px;padding:clamp(1.25rem,3vw,2rem);box-shadow:0 30px 70px -30px rgba(4,18,27,.55)}
.cfg-grp{border:0;margin-bottom:1.2rem;display:block}
.cfg-grp legend,.cfg-grp .legend{display:block;font-family:var(--ff-m);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--t-dark-muted);margin-bottom:.55rem}
.cfg-grp .legend em{text-transform:none;letter-spacing:0;font-style:normal;opacity:.7}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chips label{
  position:relative;padding:.55rem .95rem;border-radius:999px;border:1.5px solid var(--line-d);background:#fff;
  font-size:.88rem;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s,color .15s;
}
.chips label:hover{border-color:var(--stamp)}
/* Radio unsichtbar, aber fokussierbar (Tastatur/Screenreader) */
.chips input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chips label:has(input:checked){background:var(--t-dark);border-color:var(--t-dark);color:#fff}
.chips label:has(input:focus-visible){outline:2px solid var(--stamp);outline-offset:2px}
.cfg textarea{width:100%;border:1.5px solid var(--line-d);border-radius:12px;padding:.75rem .9rem;background:#fff;resize:vertical;font-size:.92rem}
.cfg textarea:focus{outline:2px solid var(--stamp);outline-offset:0;border-color:var(--stamp)}
/* Programm-spezifischer Hinweis (z. B. Foxit) direkt unter der Auswahl */
.cfg-note{margin-top:.6rem;padding:.6rem .8rem;border-radius:10px;background:#fff4e0;border:1px solid #f3c77a;color:#6b4a0c;font-size:.82rem;line-height:1.45}
.cfg-note[hidden]{display:none}
.cfg-hint{margin-top:.8rem;font-size:.8rem;color:var(--t-dark-muted);text-align:center}

/* ── FOOTER ── */
.foot{background:var(--desk);border-top:1px solid var(--line-l);padding:3rem 0 calc(2rem + var(--sab));color:var(--t-muted);font-size:.9rem}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap}
.foot-brand{margin-bottom:.5rem;color:var(--t-light)}
.foot nav{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}
.foot nav a:hover{color:var(--t-light)}
.foot-copy{margin-top:2rem;font-size:.75rem;opacity:.7}

/* ── MOBILE-CTA (fixiert unten) ── */
.mcta{
  display:none;position:fixed;left:1rem;right:1rem;bottom:calc(1rem + var(--sab));z-index:60;
  background:var(--sky);color:#04121b;font-weight:700;text-align:center;padding:1rem;border-radius:999px;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.6);transform:translateY(160%);transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.mcta.show{transform:translateY(0)}

/* ── 5 · ANIMATIONEN ──────────────────────────────────────────────── */
@keyframes stampIn{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--rot,-5deg)) scale(calc(var(--s,1) * 2.3))}
  60%{opacity:1;transform:translate(-50%,-50%) rotate(var(--rot,-5deg)) scale(calc(var(--s,1) * .94))}
  100%{opacity:1;transform:translate(-50%,-50%) rotate(var(--rot,-5deg)) scale(var(--s,1))}
}
@keyframes heroSlam{
  0%{opacity:0;transform:rotate(-4deg) scale(2.1)}
  55%{opacity:1;transform:rotate(-4deg) scale(.95)}
  100%{opacity:1;transform:rotate(-4deg) scale(1)}
}
@keyframes paperShake{0%,100%{transform:none}30%{transform:translateY(2px)}60%{transform:translateY(-1px)}}
@keyframes dialogIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ping{75%,100%{transform:scale(1.8);opacity:0}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Orchestrierter Seitenaufbau im Hero (einmalig beim Laden) */
.h1-a,.eyebrow{animation:fadeUp .6s .05s both}
.stamp-word{animation:heroSlam .5s .55s cubic-bezier(.3,1.4,.5,1) both}
.lead{animation:fadeUp .6s .8s both}
.hero-cta{animation:fadeUp .6s .9s both}
.trust-row{animation:fadeUp .6s 1s both}
.demo{animation:fadeUp .8s .35s both}

/* Einblenden beim Scrollen (Klassen setzt site.js → REVEAL) */
html.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
html.js .reveal.in{opacity:1;transform:none}

/* Barrierefreiheit: Bewegung reduzieren */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none}
  .marquee.is-looping{overflow-x:auto}
}

/* ── 6 · RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width:1080px){
  .uses{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:2.5rem}
  .step::after{display:none}
  .sr-body{grid-template-columns:1fr}
}
@media (max-width:900px){
  :root{--nav-h:60px}
  .burger{display:block}
  .nav-links{
    position:fixed;top:calc(var(--nav-h) + var(--sat));left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(11,13,18,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    padding:.5rem var(--pad) 1.5rem;border-bottom:1px solid var(--line-l);
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;
  }
  .nav-links.open{opacity:1;transform:none;visibility:visible}
  .nav-links a:not(.btn){padding:1rem 0;border-bottom:1px solid var(--line-l);font-size:1.05rem;color:var(--t-light)}
  .nav-links .btn{margin-top:1rem}
  .nav:has(.nav-links.open){background:rgba(11,13,18,.97)}

  .hero{grid-template-columns:1fr;min-height:0;padding-top:calc(var(--nav-h) + var(--sat) + 2rem);gap:2.5rem}
  .roi,.faq,.cta-grid{grid-template-columns:1fr}
  .faq-side{position:static}
  .vs{grid-template-columns:1fr}
  .vs-arrow{transform:rotate(90deg);justify-self:center;line-height:1}
  .sr-tabs{grid-template-columns:repeat(2,1fr)}
  .mcta{display:block}
  .foot{padding-bottom:calc(6rem + var(--sab))} /* Platz für den fixierten Button */
}
@media (max-width:560px){
  .uses{grid-template-columns:1fr 1fr;gap:.7rem}
  .use{padding:1.2rem .9rem 1rem}
  .imprint{font-size:1rem}
  .steps{grid-template-columns:1fr}
  .person{grid-template-columns:1fr}
  .sr-vars-grid{grid-template-columns:1fr}
  .roi-out{grid-template-columns:1fr}
  .dstamp{font-size:.58rem;min-width:160px}
  .dstamp .ds-title{font-size:1.05rem}
  .paper{min-height:470px}                /* Platz für Dialog + Freiflächen */
  .dd-box{padding:.9rem 1rem .8rem;font-size:.82rem}
  .dd-field{margin-bottom:.5rem}
  .dd-field small{display:none}          /* Hinweis nur auf Desktop */
  .demo-file{display:none}
  .demo-chrome{justify-content:space-between}
  .inv-top{gap:.6rem}
  .faq details p{padding-right:0}
  .copy-btn{margin:.5rem 0 0;display:inline-block}
}

/* Handy: Untertitel etwas kompakter */
@media (max-width:560px){.pl-cap{font-size:11.5px;bottom:6px;padding:4px 10px 4px 4px}.pl-cap-n{min-width:19px;height:19px;font-size:10px}.pl-key{font-size:12px;bottom:40px}}

/* Hinweis ohne JavaScript im Showroom-Betrachter */
.sr-noscript{position:absolute;inset:0;display:grid;place-items:center;color:#5b5f69;font-size:.9rem;padding:1rem;text-align:center}

/* Dialog-Zeile mit "Heute"-Knopf: Feld + Knopf nebeneinander */
.pl-dr:has(.pl-mini){grid-template-columns:96px 1fr auto}
.pl-dr .pl-mini{margin-left:0}
/* Große Dialoge (Prüf- und Wareneingangsstempel) kompakter, damit
   OK-Knopf und Untertitel sich nicht überdecken */
.pl-dlg.compact{top:46%;font-size:11px}
.pl-dlg.compact .pl-dlg-b{padding:7px 12px 2px;gap:4px}
.pl-dlg.compact .pl-in{min-height:19px;padding:2px 7px;font-size:10.5px}
.pl-dlg.compact .pl-dh{margin:4px 0 2px}
.pl-dlg.compact .pl-dlg-a{padding:5px 12px 7px}
.pl-dlg.compact .pl-dq{padding:2px 0}

/* ── Rechner: Kontrast "pro Jahr statt einmalig" ── */
.roi-vs{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;margin-top:1rem;padding:.8rem 1rem;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line-l)}
.roi-vs-a{font-family:var(--ff-m);font-weight:600;color:#ff9d8f;text-decoration:line-through;text-decoration-thickness:2px}
.roi-vs-mid{font-size:.8rem;color:var(--t-muted);text-transform:uppercase;letter-spacing:.12em}
.roi-vs-b{font-family:var(--ff-m);font-weight:600;color:var(--sky);font-size:1.05rem}
/* ── Formular: Fortschritt ── */
.cfg-prog{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem;font-size:.8rem;font-weight:600;color:var(--t-dark-muted)}
.cfg-prog-bar{flex:1;height:8px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.cfg-prog-bar i{display:block;height:100%;width:50%;border-radius:99px;background:linear-gradient(90deg,var(--stamp),var(--sky));transition:width .45s cubic-bezier(.2,.8,.2,1)}
.cfg-prog-bar.full i{background:#15803d}
/* ── Verweis auf den Konstruktor im Anfrage-Bereich ── */
.cta-konst{margin-top:1.4rem;font-weight:600}
.cta-konst a{border-bottom:2px solid currentColor}
.uses-note a + a{margin-left:0}

.roi-vs[hidden]{display:none}