/* =====================================================================
   TimeShift – Design-System (gemeinsam für alle Seiten)
   Dunkel, ruhig, rot akzentuiert. Farbwerte der Partikel kommen aus der App:
   Markenrot #E03C2D (Particle Globe), Sally-Signalrot #E8352B.
   ===================================================================== */

:root{
  --bg:#0a0a0b;
  --bg2:#101012;
  --card:#141416;
  --card2:#18181b;
  --text:#f5f5f5;
  --muted:#a3a3a8;
  --muted2:#6f6f76;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.14);
  --red:#f64b56;
  --brand:#E03C2D;      /* App: kParticleGlobeBrandRed */
  --sally:#E8352B;      /* App: Sally Signal Rot */
  --green:#3ddc84;
  --amber:#F0A93C;      /* App: Sally Ember */
  --shadow:0 14px 40px rgba(0,0,0,.55);
  --shadow-soft:0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
  --radius-sm:12px;
  --max:1120px;
  --nav-h:72px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
html,body{max-width:100%; overflow-x:hidden}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(900px 500px at 25% 0%, rgba(224,60,45,.12), transparent 55%),
    radial-gradient(900px 500px at 85% 20%, rgba(224,60,45,.05), transparent 55%),
    var(--bg);
  line-height:1.5;
  position:relative;
}
a{color:inherit; text-decoration:none}
img,video,svg{max-width:100%}
img{height:auto}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:6px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px; position:relative}

main, footer, .trust-strip{position:relative; z-index:1}

/* ---------------- Hintergrund-Partikel (Ambient) ----------------
   Dezente, ruhige Partikelwolke hinter dem Inhalt (z-index 0, unter main/nav/footer).
   Driftet träge zum Abschnitt im Fokus, verdeckt nie Text, keine Pointer-Events.
   Bei prefers-reduced-motion zeigt die Ebene ein statisches Bild. */
#ts-particles{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%;
}
.ts-no-particles #ts-particles{display:none}

/* ---------------- Icons ---------------- */
.icon{width:22px; height:22px; display:inline-block; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0}
.icon-lg{width:28px; height:28px}
.icon-box{
  width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, rgba(224,60,45,.22), rgba(224,60,45,.06));
  border:1px solid rgba(224,60,45,.28); color:#ff8a7f; margin-bottom:14px;
}

/* ---------------- NAV ---------------- */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px);
  background:rgba(10,10,11,.72);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1400px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h); gap:18px;
}
.brand{display:flex; gap:10px; align-items:center; font-weight:800; letter-spacing:.2px; flex-shrink:0; white-space:nowrap}
.brand-logo{height:30px; width:30px; display:block}
.brand-text{font-weight:800}
.navlinks{display:flex; gap:2px; align-items:center; min-width:0}
.navlinks a{font-size:14px; color:var(--muted); white-space:nowrap; padding:9px 11px; border-radius:10px; transition:.15s ease}
.navlinks a:hover, .navlinks a[aria-current="page"]{color:var(--text); background:rgba(255,255,255,.05)}
.nav-more{position:relative}
.nav-more-btn{
  display:inline-flex; align-items:center; gap:4px;
  font:inherit; font-size:14px; font-weight:600; color:var(--muted);
  background:transparent; border:none; padding:9px 11px; border-radius:10px; cursor:pointer;
}
.nav-more-btn .icon{width:16px; height:16px; transition:transform .15s ease}
.nav-more-btn[aria-expanded="true"]{color:var(--text); background:rgba(255,255,255,.05)}
.nav-more-btn[aria-expanded="true"] .icon{transform:rotate(180deg)}
.nav-more-panel{
  position:absolute; top:calc(100% + 10px); left:0; min-width:220px; z-index:30;
  display:flex; flex-direction:column; gap:2px; padding:8px;
  background:#141416; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.nav-more-panel[hidden]{display:none}
.nav-more-panel a{color:var(--text); font-weight:600; padding:9px 10px; border-radius:10px; font-size:14px}
.nav-more-panel a:hover{background:rgba(255,255,255,.05)}
.nav-more-panel a[aria-current="page"]{background:rgba(224,60,45,.12); color:var(--text)}
.nav-more-divider{height:1px; background:var(--line); margin:6px 2px}
.nav-more-label{font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted2); padding:4px 10px 2px; pointer-events:none}
.nav-cta{display:flex; gap:8px; align-items:center; flex-shrink:0}
.nav-login{color:var(--text); font-weight:600; font-size:14px; padding:9px 10px; white-space:nowrap; border-radius:10px}
.nav-login:hover{background:rgba(255,255,255,.05)}
.nav-toggle{
  display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line);
  background:rgba(255,255,255,.03); color:var(--text); cursor:pointer; align-items:center; justify-content:center;
}
.nav-mobile{
  display:none; border-top:1px solid var(--line); background:rgba(10,10,11,.96);
  padding:10px 16px 16px; flex-direction:column; gap:4px;
}
.nav-mobile a{padding:12px 10px; border-radius:10px; color:var(--text); font-weight:600; font-size:15px}
.nav-mobile a:hover{background:rgba(255,255,255,.05)}
.nav-mobile .btn{justify-content:center; margin-top:6px}
.nav.open .nav-mobile{display:flex}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:12px; border:1px solid var(--line2);
  background:rgba(255,255,255,.03); color:var(--text); font-weight:700; font-size:15px;
  white-space:nowrap; cursor:pointer; transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.06)}
.btn-red{
  border-color:rgba(246,75,86,.4); background:linear-gradient(180deg, #ff5a63, #ef3f4a);
  color:#0b0b0b; box-shadow:0 14px 40px rgba(246,75,86,.28);
}
.btn-red:hover{background:linear-gradient(180deg, #ff6a72, #f64b56)}
.btn-sm{padding:9px 14px; font-size:13px; border-radius:10px}
.btn-block{width:100%}
.btn .icon{width:18px; height:18px}

/* ---------------- Typo & Sections ---------------- */
section{padding:72px 0}
section.tight{padding-top:28px}
.kicker{color:#ff7d74; font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase}
h1{font-size:clamp(34px, 5vw, 60px); line-height:1.03; margin:0 0 18px; letter-spacing:-.9px; font-weight:800}
h2{margin:10px 0 0; font-size:clamp(26px, 3vw, 36px); letter-spacing:-.5px; line-height:1.12; font-weight:800}
h3{margin:0 0 8px; font-size:18px; letter-spacing:-.2px}
.lead{color:var(--muted); margin:14px 0 0; max-width:70ch; font-size:17px; line-height:1.65}
.lead strong, .card p strong, li strong{color:var(--text)}
.center{text-align:center}
.center .lead{margin-left:auto; margin-right:auto}
.section-head{max-width:760px}
.section-head.center{margin:0 auto}
.def{
  margin:18px 0 0; padding:16px 18px; border-left:3px solid var(--brand);
  background:rgba(224,60,45,.06); border-radius:0 12px 12px 0; color:var(--text); font-size:16px; line-height:1.6;
}
.def b{color:#ffb3ad}
.appstore-review{
  margin:28px auto 0; max-width:560px; text-align:left;
  background:#fff; color:#1d1d1f; border-radius:18px; padding:16px 18px 14px;
  box-shadow:0 12px 32px rgba(0,0,0,.32);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
}
.appstore-review .as-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
.appstore-review .as-stars{display:inline-flex; gap:2px; color:#f5a623}
.appstore-review .as-stars svg{width:15px; height:15px; display:block; fill:currentColor}
.appstore-review .as-store{font-size:12px; font-weight:600; color:#6e6e73}
.appstore-review blockquote{margin:0; padding:0; border:0; background:transparent; color:#1d1d1f; font-size:15px; line-height:1.45; font-weight:400}
.appstore-review figcaption{margin-top:12px; font-size:13px; font-weight:600; color:#6e6e73}
.note{color:var(--muted2); font-size:13px; margin-top:12px; line-height:1.6}
.pillrow{display:flex; gap:8px; flex-wrap:wrap}
.pill{border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--muted); padding:7px 12px; border-radius:999px; font-size:13px; display:inline-flex; align-items:center; gap:7px}
.pill .icon{width:15px; height:15px}
.badge{display:inline-flex; align-items:center; gap:6px; background:rgba(246,75,86,.14); border:1px solid rgba(246,75,86,.3); color:#ff8a93; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px}
.badge-green{background:rgba(61,220,132,.12); border-color:rgba(61,220,132,.3); color:#6ee7a4}
.badge-muted{background:rgba(255,255,255,.04); border-color:var(--line); color:var(--muted)}

/* ---------------- Cards & Grids ---------------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-soft);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-2px); border-color:rgba(224,60,45,.3); box-shadow:0 18px 50px rgba(0,0,0,.55)}
.card p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.6}
.card ul{margin:10px 0 0; padding-left:18px; color:var(--muted)}
.card li{margin:7px 0; font-size:14px}
.check-list{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:9px}
.check-list li{position:relative; padding-left:28px; color:var(--muted); font-size:14.5px; line-height:1.5}
.check-list li strong{color:var(--text)}
.check-list li::before{content:""; position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:50%;
  background:rgba(246,75,86,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a93' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat}

.split{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px}
.feature-row{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; margin-top:36px}
.feature-row.reverse > :first-child{order:2}
.feature-row h3{font-size:22px; margin:0 0 10px}
.feature-row p{color:var(--muted); font-size:15.5px; line-height:1.65; margin:0 0 14px}

.screenshot-box{
  border-radius:var(--radius); border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:220px;
}
.screenshot-box img{width:100%; height:auto; display:block}
.screenshot-box.portrait{max-width:360px; margin:0 auto}
.screenshot-box.portrait img{max-height:620px; width:auto}

/* ---------------- Steps ---------------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; counter-reset:step}
.step{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:relative; counter-increment:step}
.step::before{content:counter(step, decimal-leading-zero); position:absolute; top:16px; right:18px; font-size:34px; font-weight:900; color:rgba(224,60,45,.16); line-height:1; letter-spacing:-1px}
.step h3{margin:0 0 8px; font-size:17px}
.step p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.6}
.steps-4{grid-template-columns:repeat(4,1fr)}

/* ---------------- Accordion (details/summary) ---------------- */
.acc{border:1px solid var(--line); border-radius:var(--radius); background:var(--card); overflow:hidden; transition:border-color .18s ease}
.acc + .acc{margin-top:12px}
.acc[open]{border-color:rgba(224,60,45,.32)}
.acc summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:18px 20px; font-weight:700; font-size:16px}
.acc summary::-webkit-details-marker{display:none}
.acc summary .acc-sub{display:block; color:var(--muted); font-weight:500; font-size:13.5px; margin-top:2px}
.acc summary .acc-chev{margin-left:auto; width:28px; height:28px; border-radius:50%; border:1px solid var(--line2); display:flex; align-items:center; justify-content:center; transition:transform .25s ease; flex-shrink:0}
.acc[open] summary .acc-chev{transform:rotate(180deg); border-color:rgba(224,60,45,.5); color:#ff8a93}
.acc-body{padding:0 20px 22px; color:var(--muted); font-size:15px; line-height:1.65}
.acc-body p{margin:0 0 10px}
.acc-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:start}
@media (max-width:860px){ .acc-grid{grid-template-columns:1fr} }

/* ---------------- Demo-Panels ---------------- */
.demo{
  background:radial-gradient(400px 200px at 50% 0%, rgba(224,60,45,.12), transparent 70%), var(--bg2);
  border:1px solid var(--line); border-radius:14px; padding:18px; position:relative; overflow:hidden;
}
.demo-title{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted2); font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:8px}
.demo-title::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--sally); box-shadow:0 0 10px var(--sally)}
.demo-status{margin-top:12px; font-size:14px; color:var(--muted); min-height:22px}
.demo-status.ok{color:#6ee7a4}
.demo-status.warn{color:#ffb86b}
.demo .btn{font-size:13px; padding:9px 14px}

/* PIN-Pad */
.pinpad{display:grid; grid-template-columns:repeat(3,64px); gap:10px; justify-content:center; margin:0 auto}
.pinpad button{height:56px; border-radius:14px; border:1px solid var(--line2); background:rgba(255,255,255,.04); color:var(--text); font-size:20px; font-weight:700; cursor:pointer; transition:.12s ease}
.pinpad button:hover{background:rgba(255,255,255,.09)}
.pinpad button:active{transform:scale(.96)}
.pin-dots{display:flex; justify-content:center; gap:12px; margin:0 0 16px}
.pin-dots span{width:14px; height:14px; border-radius:50%; border:1px solid var(--line2); background:transparent; transition:.15s ease}
.pin-dots span.on{background:var(--red); border-color:var(--red); box-shadow:0 0 12px rgba(246,75,86,.6)}

/* QR Scan */
.qr-frame{position:relative; width:170px; height:170px; margin:0 auto; border-radius:14px; background:#fff; padding:14px; display:flex; align-items:center; justify-content:center}
.qr-frame svg{width:100%; height:100%}
.qr-corner{position:absolute; width:28px; height:28px; border:3px solid var(--sally); border-radius:4px}
.qr-corner.tl{top:-8px; left:-8px; border-right:none; border-bottom:none}
.qr-corner.tr{top:-8px; right:-8px; border-left:none; border-bottom:none}
.qr-corner.bl{bottom:-8px; left:-8px; border-right:none; border-top:none}
.qr-corner.br{bottom:-8px; right:-8px; border-left:none; border-top:none}
.qr-line{position:absolute; left:6px; right:6px; height:2px; background:linear-gradient(90deg, transparent, var(--sally), transparent); top:10px; opacity:0; box-shadow:0 0 12px var(--sally)}
.qr-frame.scanning .qr-line{opacity:1; animation:qrScan 1.1s ease-in-out}
@keyframes qrScan{0%{top:10px} 100%{top:calc(100% - 12px)}}

/* NFC Tap */
.nfc-stage{position:relative; height:190px; display:flex; align-items:center; justify-content:center}
.nfc-terminal{width:120px; height:150px; border-radius:16px; background:linear-gradient(180deg, #1c1c1f, #0f0f11); border:1px solid var(--line2); position:relative; display:flex; align-items:flex-start; justify-content:center; padding-top:16px}
.nfc-terminal .nfc-screen{width:88px; height:52px; border-radius:8px; background:#0a0a0b; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--muted); font-weight:700; transition:.2s ease}
.nfc-terminal.ok .nfc-screen{color:#6ee7a4; border-color:rgba(61,220,132,.4); box-shadow:0 0 18px rgba(61,220,132,.25)}
.nfc-waves{position:absolute; bottom:28px; left:50%; transform:translateX(-50%); width:50px; height:50px}
.nfc-waves span{position:absolute; inset:0; border:2px solid var(--sally); border-radius:50%; opacity:0}
.nfc-stage.tap .nfc-waves span{animation:nfcWave 1s ease-out}
.nfc-stage.tap .nfc-waves span:nth-child(2){animation-delay:.2s}
.nfc-stage.tap .nfc-waves span:nth-child(3){animation-delay:.4s}
@keyframes nfcWave{0%{transform:scale(.3); opacity:.9} 100%{transform:scale(1.6); opacity:0}}
.nfc-chip{position:absolute; left:calc(50% + 70px); top:40px; width:58px; height:38px; border-radius:8px; background:linear-gradient(135deg, #f64b56, #b3222c); box-shadow:0 10px 30px rgba(246,75,86,.35); transition:transform .5s cubic-bezier(.2,.9,.3,1.2)}
.nfc-chip::after{content:""; position:absolute; left:8px; top:10px; width:16px; height:12px; border-radius:3px; background:rgba(255,220,120,.9)}
.nfc-stage.tap .nfc-chip{transform:translate(-78px, 70px) rotate(-8deg)}

/* Self-Service Karte */
.map{position:relative; height:250px; border-radius:12px; overflow:hidden; background:
  linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/28px 28px, #0e0e11}
.map-site{position:absolute; width:86px; height:86px; margin:-43px 0 0 -43px; border-radius:50%; border:1px dashed rgba(224,60,45,.55); background:rgba(224,60,45,.08); display:flex; align-items:flex-end; justify-content:center; cursor:pointer; transition:.2s ease; padding-bottom:10px}
.map-site:hover{background:rgba(224,60,45,.14)}
.map-site.in{border-style:solid; border-color:var(--sally); background:rgba(232,53,43,.18); box-shadow:0 0 24px rgba(232,53,43,.35)}
.map-site small{position:static; white-space:nowrap; font-size:11px; color:var(--muted); font-weight:700; line-height:1}
.map-site::before{content:""; position:absolute; left:50%; top:38%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--sally)}
.map-worker{position:absolute; left:0; top:0; width:22px; height:22px; margin:0; border-radius:50%; background:#fff; border:3px solid var(--sally); box-shadow:0 4px 14px rgba(0,0,0,.5); z-index:3}
.ss-start{display:flex; flex-direction:column; gap:10px; margin-bottom:14px; padding:12px; border-radius:14px; background:#fff; border:1px solid var(--ap-border, rgba(0,0,0,.08))}
.ss-person{display:flex; align-items:center; gap:10px}
.ss-avatar{width:40px; height:40px; border-radius:50%; background:#1E88E5; color:#fff; font-weight:800; font-size:13px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0}
.ss-person strong{display:block; color:#17324d; font-size:15px}
.ss-person small{color:#5c6b7a; font-size:12.5px}
.ss-note{margin:0; font-size:12.5px; color:#5c6b7a; text-align:center}
.ss-note[hidden]{display:none}
.ss-entry{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px; background:#f4f7fb; border:1px solid #e3e8ef}
.ss-entry[hidden]{display:none}
.ss-when{min-width:0}
.ss-when strong{display:block; color:#17324d; font-size:13px}
.ss-when span{display:block; margin-top:2px; color:#17324d; font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap}
.ss-when small{display:block; margin-top:2px; color:#5c6b7a; font-size:12px}
.ss-wait{margin:0; flex-shrink:0; max-width:9.2em; text-align:right; font-size:12px; font-weight:700; line-height:1.35; color:#9a6700}
.ss-start .app-btn{width:100%}
.ss-start.running .app-btn{background:#0e9f6e}

/* ---------------- Toggles ("Du entscheidest") ---------------- */
.switch{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line)}
.switch[hidden]{display:none}
.switch:last-child{border-bottom:none}
.switch .sw-label{font-weight:700; font-size:15px}
.switch .sw-sub{display:block; color:var(--muted); font-size:13px; font-weight:500; margin-top:2px}
.sw{position:relative; width:46px; height:26px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid var(--line2); cursor:pointer; flex-shrink:0; transition:.2s ease}
.sw::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.2s ease}
.sw[aria-checked="true"]{background:var(--red); border-color:var(--red)}
.sw[aria-checked="true"]::after{left:23px}
.seg{display:inline-flex; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:4px; gap:4px}
.seg button{padding:8px 16px; border-radius:9px; border:none; cursor:pointer; font-weight:700; font-size:13.5px; background:transparent; color:var(--muted); transition:.15s ease}
.seg button[aria-selected="true"]{background:var(--red); color:#0b0b0b}

/* ---------------- Plan-Grid Demo ---------------- */
.plan{display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; margin-top:12px}
.plan .ph{font-size:11px; color:var(--muted2); text-align:center; font-weight:700; letter-spacing:.06em}
.plan .slot{min-height:36px; border-radius:8px; border:1px dashed rgba(255,255,255,.18); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:5px 3px; font-size:11.5px; font-weight:700; color:var(--muted); background:transparent; transition:.35s ease; position:relative; overflow:hidden; text-align:center}
.plan .slot.off{opacity:.35; border-style:dotted}
.plan .slot .slot-time{display:none}
.plan .slot .seats{display:flex; flex-direction:column; gap:2px; width:100%}
.plan .slot .seat{display:block; font-style:normal; font-size:10px; line-height:1.4; min-height:14px; border-radius:4px; border:1px dashed rgba(255,255,255,.14); color:var(--muted2); padding:0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:.3s ease}
.plan .slot .seat.on{border-style:solid; border-color:rgba(224,60,45,.35); background:rgba(224,60,45,.18); color:#ffd7d3}
.plan .slot .apps{font-size:10px; color:#ffd79a}
.plan .slot.filled{border-style:solid; border-color:rgba(224,60,45,.45); background:rgba(224,60,45,.10); color:#ffd7d3}
.plan .slot.applied{border-style:solid; border-color:rgba(240,169,60,.5); background:rgba(240,169,60,.12); color:#ffd79a}
.plan .slot.gap{border-color:rgba(255,120,110,.6); color:#ff8a7f; animation:gapPulse 1.6s ease-in-out infinite}
@keyframes gapPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,53,43,0)} 50%{box-shadow:0 0 0 4px rgba(232,53,43,.18)}}
.plan .slot small{position:absolute; top:2px; right:5px; font-size:9px; opacity:.8}
.phase-bar{display:flex; gap:6px; margin-top:14px; flex-wrap:wrap}
.phase-bar span{font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted2)}
.phase-bar span.on{border-color:rgba(224,60,45,.5); color:#ffb3ad; background:rgba(224,60,45,.12)}
.phase-bar span.done{color:var(--muted); border-color:var(--line2)}

/* ---------------- Sally Notification ---------------- */
.sally-card{display:flex; gap:14px; align-items:flex-start; background:var(--card2); border:1px solid var(--line); border-radius:14px; padding:14px 16px; animation:msgIn .35s ease}
.sally-card + .sally-card{margin-top:10px}
.sally-avatar{width:40px; height:40px; border-radius:12px; background:#0d0d0d; border:1px solid var(--line); flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center}
.sally-avatar canvas{width:40px; height:40px; display:block}
.sally-name{font-weight:800; font-size:13px; display:flex; align-items:center; gap:8px}
.sally-name small{color:var(--muted2); font-weight:600}
.sally-text{color:var(--muted); font-size:14px; line-height:1.55; margin-top:4px}
.sally-text b{color:var(--text)}
.sally-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
@keyframes msgIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ---------------- Protokoll-Demo ---------------- */
.sheet{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#0f0f11}
.sheet table{width:100%; border-collapse:collapse; font-size:14px}
.sheet th{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2); text-align:left; padding:10px 12px; border-bottom:1px solid var(--line)}
.sheet td{padding:10px 12px; border-bottom:1px solid var(--line)}
.sheet tr:last-child td{border-bottom:none}
.sheet input{width:auto; min-width:96px; background:rgba(255,255,255,.05); border:1px solid var(--line2); color:var(--text); border-radius:8px; padding:6px 8px; font:inherit; font-size:14px; text-align:center}
.sheet input:focus{outline:none; border-color:var(--red)}
.log{font-family:var(--mono); font-size:12.5px; color:var(--muted); background:#0d0d0f; border:1px solid var(--line); border-radius:12px; padding:14px; min-height:120px; line-height:1.6}
.log .l{padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.08); animation:msgIn .3s ease}
.log .l:last-child{border-bottom:none}
.log .k{color:var(--muted2)}
.log .v{color:#ffd7d3}
.log .arrow{color:#ff8a7f; padding:0 4px}
.pdf-preview{margin-top:12px; border:1px solid var(--line); border-radius:12px; background:#f7f7f5; color:#111; padding:16px; font-size:12px; line-height:1.5; display:none}
.pdf-preview.show{display:block}
.pdf-preview h4{margin:0 0 6px; font-size:13px}
.pdf-preview .pdf-page{border-top:1px dashed #bbb; margin-top:10px; padding-top:10px}

/* =====================================================================
   App-Look für Demos – Tokens aus dem App-Code
   ProColors: primary #1976D2, primaryDark #115293, primaryLight #64B5F6,
   background #F5F5F5, surface #FFF, textDark #212121, textMuted #6B7280,
   border rgba(0,0,0,.08); TeamPreviewTheme: glassCard radius 16, border
   primary .18, shadow primary .07 blur 14, openSeat #0E9F6E, warning
   #F57C00, danger #D32F2F; headerGradient #1E88E5 → #115293 radius 18;
   FilledButton radius 14 / 54 px; Felder radius 10.
   ===================================================================== */
.app-ui{
  --ap:#1976D2; --ap-dark:#115293; --ap-light:#64B5F6; --ap-bg:#F5F5F5; --ap-surface:#FFFFFF;
  --ap-text:#212121; --ap-muted:#6B7280; --ap-line:rgba(0,0,0,.08); --ap-border:rgba(25,118,210,.18);
  --ap-open:#0E9F6E; --ap-warn:#F57C00; --ap-danger:#D32F2F;
  background:var(--ap-bg); color:var(--ap-text); border-radius:18px; border:1px solid var(--ap-border);
  box-shadow:0 4px 14px rgba(25,118,210,.07), 0 18px 50px rgba(0,0,0,.45); overflow:hidden; font-size:14px; line-height:1.4;
}
.app-ui *{box-sizing:border-box}
.app-head{background:linear-gradient(135deg,#1E88E5,#115293); color:#fff; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.app-head h4{margin:0; font-size:16px; font-weight:800; letter-spacing:0; color:#fff}
.app-head small{display:block; color:#E3F2FD; font-size:11px; font-weight:600; margin-top:2px}
.app-pill{background:rgba(255,255,255,.2); border-radius:20px; padding:4px 10px; font-size:12px; font-weight:600; color:#fff; white-space:nowrap}
.app-body{padding:14px}
.app-card{background:var(--ap-surface); border-radius:16px; border:1px solid var(--ap-border); box-shadow:0 4px 14px rgba(25,118,210,.07); padding:14px}
.app-card + .app-card{margin-top:10px}
.app-card h5{margin:0 0 10px; font-size:15.5px; font-weight:700; color:var(--ap-text)}
.app-label{font-size:13px; font-weight:600; color:var(--ap-muted); margin:0 0 8px}
.app-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ap); color:#fff; border:none; border-radius:14px; height:46px; padding:0 20px; font:inherit; font-size:15px; font-weight:600; cursor:pointer; transition:.15s ease; box-shadow:0 6px 16px rgba(25,118,210,.25)}
.app-btn[hidden], .app-chip[hidden]{display:none}
.app-btn:hover{background:#1E88E5}
.app-btn:active{transform:scale(.98)}
.app-btn:disabled{opacity:.4; cursor:default; box-shadow:none}
.app-btn:disabled:hover{background:var(--ap); transform:none}
.onb .app-body{display:flex; flex-direction:column; gap:10px; max-height:460px; overflow:auto}
.onb-choice{display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:12px 14px; cursor:pointer; color:var(--ap-text); font:inherit; box-shadow:0 4px 12px rgba(0,0,0,.03)}
.onb-choice[aria-pressed="true"]{border:2px solid var(--ap); box-shadow:0 6px 16px rgba(25,118,210,.12)}
.onb-ico{width:44px; height:44px; border-radius:14px; background:rgba(25,118,210,.08); color:var(--ap); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0}
.onb-choice[aria-pressed="true"] .onb-ico{background:rgba(25,118,210,.15)}
.onb-ico .icon{width:22px; height:22px}
.onb-copy{flex:1; min-width:0}
.onb-titleline{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.onb-titleline strong{font-size:15px; font-weight:800}
.onb-choice small{display:block; margin-top:3px; color:var(--ap-muted); font-size:12.5px; font-weight:500; line-height:1.35}
.onb-rec{font-size:10.5px; font-weight:800; color:#2e7d32; background:rgba(46,125,50,.12); border:1px solid rgba(46,125,50,.28); border-radius:8px; padding:2px 7px}
.onb-tick{width:20px; height:20px; margin-left:auto; flex-shrink:0; color:var(--ap); opacity:0}
.onb-choice[aria-pressed="true"] .onb-tick{opacity:1}
.onb-detail{margin-top:10px; font-size:12.5px; line-height:1.45; color:#424242}
.onb-flow{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:8px; padding:10px; border-radius:12px; background:rgba(25,118,210,.05); border:1px solid rgba(25,118,210,.1)}
.onb-flow b{font-size:11px; font-weight:700; color:var(--ap-dark); background:#fff; border-radius:8px; padding:5px 8px}
.onb-flow .icon{width:14px; height:14px; color:var(--ap)}
.onb-note{margin:2px 0 0; font-size:12.5px; line-height:1.4; color:var(--ap-muted)}
.onb-steps{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.onb-steps li{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.4}
.onb-num{width:24px; height:24px; border-radius:50%; background:rgba(25,118,210,.12); color:var(--ap-dark); font-weight:800; font-size:12px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0}
.onb-modes{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px}
.onb-mode{background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:12px 14px}
.onb-mode.rec{border-color:rgba(46,125,50,.35)}
.onb-mode h5{margin:0 0 2px; font-size:14px}
.onb-mode p{margin:0 0 8px; font-size:12px; color:var(--ap-muted)}
.onb-mode ul{margin:0; padding-left:16px; font-size:12.5px; line-height:1.4}
.onb-nav{display:flex; gap:10px; padding:0 14px 14px}
.onb-nav .app-btn{flex:1}
.app-btn.ghost{background:transparent; color:var(--ap); border:1px solid rgba(25,118,210,.35); box-shadow:none}
.app-btn.sm{height:38px; padding:0 14px; font-size:14px; border-radius:12px}
.app-field{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ap-line); border-radius:10px; padding:10px 12px; font-size:15px; font-weight:600; background:#fff; color:var(--ap-text)}
.app-ui select, .app-ui input[type="time"]{background:#fff; color:var(--ap-text); border:1px solid var(--ap-line); border-radius:10px; padding:8px 10px; font:inherit; font-size:14px; font-weight:600}
.app-ui select:focus, .app-ui input:focus{outline:none; border-color:var(--ap); box-shadow:0 0 0 3px rgba(25,118,210,.15)}
.app-chip{display:inline-flex; align-items:center; gap:6px; border-radius:999px; border:1px solid var(--ap-line); background:#fff; color:var(--ap-text); padding:8px 14px; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:.15s ease}
.app-chip[aria-pressed="true"], .app-chip.on{background:rgba(25,118,210,.10); border-color:rgba(25,118,210,.45); color:var(--ap-dark)}
.app-chip[aria-pressed="true"]::before{content:"✓"; font-size:12px}
.app-divider{height:1px; background:var(--ap-line); margin:0}
.app-note{font-size:12.5px; color:var(--ap-muted)}
/* Material-Switch (SwitchListTile) */
.app-ui .switch{border-bottom:1px solid var(--ap-line); padding:12px 0}
.app-ui .switch:last-of-type{border-bottom:none}
.app-ui .switch .sw-label{font-size:15px; font-weight:600; color:var(--ap-text)}
.app-ui .switch .sw-sub{color:var(--ap-muted); font-size:13px}
.app-ui .sw{width:40px; height:16px; background:rgba(0,0,0,.26); border:none; border-radius:999px; overflow:visible}
.app-ui .sw::after{top:-3px; left:-2px; width:22px; height:22px; background:#FAFAFA; box-shadow:0 1px 3px rgba(0,0,0,.4)}
.app-ui .sw[aria-checked="true"]{background:rgba(25,118,210,.5)}
.app-ui .sw[aria-checked="true"]::after{left:20px; background:var(--ap)}
/* Segmente in der App (Tabs) */
.app-seg{display:inline-flex; background:#fff; border:1px solid var(--ap-line); border-radius:12px; padding:3px; gap:3px}
.app-seg button{padding:7px 12px; border-radius:9px; border:none; background:transparent; color:var(--ap-muted); font:inherit; font-size:13px; font-weight:700; cursor:pointer}
.app-seg button[aria-selected="true"]{background:var(--ap); color:#fff}

/* --- Plan-Grid im App-Look (Skelett-Screen: Tageskarte, Schichtzeile) --- */
.app-ui .plan{gap:6px; margin-top:0}
.app-ui .plan .ph{font-size:13px; font-weight:800; color:var(--ap-dark); letter-spacing:0; text-transform:none; padding:4px 0 2px}
.app-ui .plan .ph.today{color:var(--ap)}
.app-ui .plan .slot{min-height:44px; border-radius:12px; border:1.2px solid rgba(25,118,210,.22); background:rgba(25,118,210,.06); color:var(--ap-dark); padding:6px 4px 5px; gap:3px}
.app-ui .plan .slot .slot-name{font-size:12px; font-weight:800; color:var(--ap-dark); line-height:1.1}
.app-ui .plan .slot .slot-time{display:block; font-size:9.5px; font-weight:600; color:rgba(0,0,0,.45); line-height:1.1}
.app-ui .plan .slot .seat{border:1px dashed rgba(14,159,110,.55); color:var(--ap-open); background:rgba(14,159,110,.06); border-radius:6px; font-size:10.5px; font-weight:700; min-height:17px; line-height:1.6}
.app-ui .plan .slot .seat:empty::before{content:"offen"; opacity:.9}
.app-ui .plan .slot .seat.on{border:1px solid rgba(25,118,210,.28); background:#fff; color:var(--ap-dark)}
.app-ui .plan .slot .seat.rx-up::after,
.app-ui .plan .slot .seat.rx-down::after,
.app-ui .plan .slot .seat.rx-mid::after{display:block; font-size:13px; line-height:1.15; margin-top:1px}
.app-ui .plan .slot .seat.rx-up::after{content:"👍"}
.app-ui .plan .slot .seat.rx-down::after{content:"👎"}
.app-ui .plan .slot .seat.rx-mid::after{content:"🤷"}
.app-ui .plan .slot:has(.rx-up),
.app-ui .plan .slot:has(.rx-down),
.app-ui .plan .slot:has(.rx-mid){overflow:visible; min-height:62px}
.app-ui .plan .slot .apps{font-size:10.5px; font-weight:700; color:var(--ap-warn); background:rgba(245,124,0,.10); border-radius:6px; padding:1px 4px}
.app-ui .plan .slot.filled{background:rgba(25,118,210,.08); border-color:rgba(25,118,210,.32)}
.app-ui .plan .slot.applied{background:rgba(245,124,0,.07); border-color:rgba(245,124,0,.45)}
.app-ui .plan .slot.gap{border-color:rgba(211,47,47,.55); background:rgba(211,47,47,.05); animation:gapPulseApp 1.6s ease-in-out infinite}
.app-ui .plan .slot.gap .seat:empty{border-color:rgba(211,47,47,.6); color:var(--ap-danger); background:rgba(211,47,47,.06)}
@keyframes gapPulseApp{0%,100%{box-shadow:0 0 0 0 rgba(211,47,47,0)} 50%{box-shadow:0 0 0 4px rgba(211,47,47,.14)}}
.app-ui .plan .slot.off{opacity:1; border:1px solid rgba(0,0,0,.08); background:rgba(0,0,0,.03); color:rgba(0,0,0,.45)}
.app-ui .plan .slot.off .slot-name{color:rgba(0,0,0,.45); font-weight:600; font-size:11px}
.app-ui .plan .slot.rest{border-style:dashed}
/* Phasen (Farben aus schicht_pro_a1/a2_phase_colors.dart) */
.app-ui .phase-bar{margin-top:12px; gap:6px}
.app-ui .phase-bar span{font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.10); color:var(--ap-muted); background:#fff}
.app-ui .phase-bar span.done{color:#fff; border-color:transparent; opacity:.55}
.app-ui .phase-bar span.on{color:#fff; border-color:transparent; box-shadow:0 2px 10px rgba(0,0,0,.12)}
.app-ui .phase-bar span.done, .app-ui .phase-bar span.on{background:var(--ph, var(--ap))}
.app-ui .phase-bar .ph-skeleton{--ph:#5C6BC0}
.app-ui .phase-bar .ph-planning{--ph:#1565C0}
.app-ui .phase-bar .ph-feedback{--ph:#00897B}
.app-ui .phase-bar .ph-intake{--ph:#00897B}
.app-ui .phase-bar .ph-processing{--ph:#EF6C00}
.app-ui .phase-bar .ph-live{--ph:#2E7D32}

/* --- PIN-Terminal wie PinTerminalScreen (black87, Tasten grey[800]) --- */
.app-terminal{background:#1b1b1b; border-radius:18px; border:1px solid rgba(255,255,255,.08); padding:18px 14px 16px; text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.45)}
.app-terminal .term-title{color:rgba(255,255,255,.7); font-size:18px; font-weight:500; margin-bottom:10px}
.app-terminal .pin-dots{gap:6px; min-height:56px; align-items:center; margin:0 0 10px}
.app-terminal .pin-dots span{width:22px; height:56px; border:none; border-radius:0; background:transparent; position:relative}
.app-terminal .pin-dots span::before{content:"–"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.22); font-size:40px; font-weight:400; line-height:1}
.app-terminal .pin-dots span.on{box-shadow:none}
.app-terminal .pin-dots span.on::before{content:"*"; color:#fff; padding-top:14px}
.app-terminal .pinpad{grid-template-columns:repeat(3,72px); gap:8px}
.app-terminal .pinpad button{height:64px; border-radius:12px; border:none; background:#424242; color:#fff; font-size:32px; font-weight:400}
.app-terminal .pinpad button:hover{background:#4f4f4f}
.app-terminal .pinpad button[data-key="ok"]{background:rgba(255,255,255,.15); border-radius:16px; font-size:22px; font-weight:600}
.app-terminal .pinpad button[data-key="del"]{font-size:26px; background:#333}
.app-terminal .term-status{margin-top:14px; min-height:22px; font-size:15px; color:rgba(255,255,255,.75)}
.app-terminal .term-status.ok{color:#6ee7a4}

/* --- Sally im "Signal Rot"-Design (sally_brand.dart) --- */
.sally-feed{background:#0D0D0D; border:1px solid #1C1C1C; border-radius:16px; padding:10px}
.sally-feed .sally-card{background:#141414; border:1px solid #1C1C1C; border-radius:14px; color:#F4F2EF}
.sally-feed .sally-avatar{background:#121212; border-color:#1C1C1C}
.sally-feed .sally-name{color:#F4F2EF}
.sally-feed .sally-name small{color:#8C8A87}
.sally-feed .sally-text{color:#8C8A87}
.sally-feed .sally-text b{color:#F4F2EF}
.sally-feed .sally-actions .btn{border-radius:12px; border-color:#1C1C1C; color:#F4F2EF; background:#0D0D0D}
.sally-feed .sally-actions .btn-red{background:#E8352B; color:#0A0A0A; border-color:#E8352B}

/* --- Zeiterfassung (QR / NFC / Self-Service) im hellen App-Screen --- */
.app-ui .qr-frame{box-shadow:0 4px 14px rgba(25,118,210,.10); border:1px solid var(--ap-border)}
.app-ui .qr-corner{border-color:var(--ap)}
.app-ui .qr-line{background:linear-gradient(90deg, transparent, var(--ap), transparent); box-shadow:0 0 12px rgba(25,118,210,.6)}
.app-ui .map{background:
  linear-gradient(rgba(25,118,210,.08) 1px, transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg, rgba(25,118,210,.08) 1px, transparent 1px) 0 0/28px 28px, #EAF2FB; border:1px solid var(--ap-border)}
.app-ui .map-site{border-color:rgba(25,118,210,.6); background:rgba(25,118,210,.08)}
.app-ui .map-site:hover{background:rgba(25,118,210,.14)}
.app-ui .map-site.in{border-color:var(--ap-open); background:rgba(14,159,110,.16); box-shadow:0 0 24px rgba(14,159,110,.3)}
.app-ui .map-site::before{background:var(--ap)}
.app-ui .map-site small{color:var(--ap-dark)}
.app-ui .map-worker{border-color:var(--ap); box-shadow:0 4px 14px rgba(25,118,210,.35)}
.app-ui .nfc-terminal{background:linear-gradient(180deg,#2a2a2e,#141416); border-color:rgba(0,0,0,.2)}
.app-ui .nfc-waves span{border-color:var(--ap)}
.app-ui .nfc-chip{background:linear-gradient(135deg,#1E88E5,#115293); box-shadow:0 10px 30px rgba(25,118,210,.35)}

/* --- Stundenzettel & Protokoll im App-Look --- */
.app-ui .sheet{background:#fff; border-color:var(--ap-line)}
.app-ui .sheet th{color:var(--ap-muted); border-color:var(--ap-line)}
.app-ui .sheet td{border-color:var(--ap-line); color:var(--ap-text)}
.app-ui .sheet input{background:#fff; border-color:var(--ap-line); color:var(--ap-text)}
.app-ui .log{font-family:inherit; background:#fff; border-color:var(--ap-line); color:var(--ap-text); font-size:13px}
.app-ui .log .l{border-color:var(--ap-line)}
.app-ui .log .k{color:var(--ap-muted)}
.app-ui .log .v{color:var(--ap-dark); font-weight:700}
.app-ui .log .arrow{color:var(--ap-warn)}
.app-ui .pdf-preview{border-color:var(--ap-line); background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.08)}

/* --- Arbeitszeit-Vorlagen: Typischer Tag → Woche → Skelett --- */
.tpl-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tpl-row label{display:block}
.tpl-row .app-field{width:100%; padding:8px 12px}
.tpl-row .app-field input[type="time"]{border:none; padding:0; background:transparent; font-size:16px; font-weight:600; width:100%}
.tpl-row select{width:100%}
.tpl-preview{display:flex; gap:6px}
.tpl-seg{flex:1; min-width:0; border-radius:12px; border:1.2px solid rgba(25,118,210,.22); background:rgba(25,118,210,.06); padding:10px 8px; text-align:center}
.tpl-seg b{display:block; font-size:13px; font-weight:800; color:var(--ap-dark)}
.tpl-seg span{display:block; font-size:12px; font-weight:600; color:var(--ap-text); margin-top:2px}
.tpl-seg small{display:block; font-size:11px; color:rgba(0,0,0,.5); margin-top:3px}
.tpl-days{display:grid; gap:8px; max-height:430px; overflow:auto; padding-right:4px; scrollbar-width:thin}
.tpl-day{border-radius:14px; border:1.2px solid rgba(25,118,210,.22); background:rgba(25,118,210,.06); padding:10px 12px}
.tpl-day.rest{background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.08)}
.tpl-day-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:6px}
.tpl-day-head b{font-size:15px; font-weight:800; color:var(--ap-dark)}
.tpl-day.rest .tpl-day-head b{color:rgba(0,0,0,.55)}
.tpl-day-head small{font-size:12px; color:rgba(0,0,0,.5)}
.tpl-rest{font-size:14px; color:rgba(0,0,0,.45); display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap}
.tpl-shift{display:flex; justify-content:space-between; align-items:center; gap:8px; background:rgba(255,255,255,.72); border-radius:12px; padding:7px 10px; margin-top:6px}
.tpl-time{font-size:13px; font-weight:800; color:var(--ap-dark)}
.tpl-time em{font-style:normal; font-weight:600; color:rgba(0,0,0,.55); margin-left:4px}
.tpl-cap{display:inline-flex; align-items:center; gap:6px}
.tpl-cap button{width:26px; height:26px; border-radius:50%; border:1px solid rgba(25,118,210,.35); background:#fff; color:var(--ap); font:inherit; font-size:16px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center}
.tpl-cap button:hover{background:rgba(25,118,210,.08)}
.tpl-cap b{font-size:15px; font-weight:800; color:var(--ap-text); min-width:14px; text-align:center}
.tpl-cap small{font-size:11px; font-weight:600; color:rgba(0,0,0,.4)}
.tpl-link{background:none; border:none; color:var(--ap); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:6px 0 0}
.tpl-templates{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px}
.tpl-templates .app-chip{cursor:default; padding:6px 11px; font-size:12.5px}
@media (max-width:520px){ .tpl-row{grid-template-columns:1fr} .tpl-preview{flex-direction:column} }

/* ---------------- WhiteGate (App-Fenster: Typischer Tag / Typische Woche) ---------------- */
.wg-frame{
  background:#F5F5F5; color:#212121; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(25,118,210,.18);
  max-width:860px; margin:0 auto;
  font-family:inherit;
}
.wg-bar{
  height:52px; background:#1976D2; color:#fff; display:flex; align-items:center; gap:4px; padding:0 8px;
}
.wg-bar h4{flex:1; margin:0; text-align:center; font-size:17px; font-weight:700; letter-spacing:.2px; padding-right:40px}
.wg-back{
  width:40px; height:40px; border:0; background:transparent; color:#fff; border-radius:20px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.wg-back .icon{width:18px; height:18px; transform:rotate(90deg)}
.wg-back:hover{background:rgba(255,255,255,.12)}
.wg-back[hidden]{visibility:hidden}
.wg-page{padding:16px 20px 20px; background:#F5F5F5}
.wg-field{
  background:#fff; border:1px solid #e0e0e0; border-radius:8px; margin-bottom:12px; overflow:hidden;
}
.wg-label{display:block; font-size:13px; font-weight:600; color:#212121; margin:0 0 6px; padding:0}
.wg-field .wg-label{padding:12px 14px 0}
.wg-field select{
  width:100%; border:0; background:#fff; color:#212121; font:inherit; font-size:15px; padding:10px 14px 12px;
  appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%231976D2'><path d='M6 8l4 4 4-4'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
}
.wg-expand{
  width:100%; background:#fff; border:1px solid #e0e0e0; border-radius:8px; padding:14px 16px;
  display:flex; justify-content:space-between; align-items:center; font:inherit; font-size:15px; font-weight:600;
  color:#212121; cursor:pointer; margin-bottom:12px;
}
.wg-expand .icon{width:18px; height:18px; color:#1976D2; transition:transform .2s}
.wg-expand.open .icon{transform:rotate(180deg)}
.wg-caps{background:#fff; border:1px solid #e0e0e0; border-radius:8px; padding:8px 12px 12px; margin:-6px 0 12px}
.wg-cap-row{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0}
.wg-cap-row span{font-size:16px; color:#212121}
.wg-cap-row select{width:140px; border:1px solid #e0e0e0; border-radius:8px; padding:8px 12px; font:inherit; background:#fff}
.wg-primary{
  width:100%; margin-top:16px; background:#1976D2; color:#fff; border:0; border-radius:12px;
  min-height:54px; font:inherit; font-size:16px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.wg-primary .icon{width:18px; height:18px}
.wg-primary:hover{background:#1565C0}
.wg-preview{
  background:#fff; border-radius:12px; box-shadow:0 3px 8px rgba(0,0,0,.05); padding:28px 150px 36px 84px;
  overflow:visible;
}
.wg-preview.light{background:rgba(25,118,210,.04); border:1px solid rgba(25,118,210,.12); box-shadow:none; border-radius:16px; padding:16px 150px 20px 72px}
.wg-gate{position:relative; height:var(--wg-h,320px); max-width:220px; margin:0 auto}
.wg-time{position:absolute; left:-64px; font-size:14px; font-weight:700; color:#115293; white-space:nowrap; background:transparent; border:0; padding:0; font-family:inherit; cursor:pointer}
.wg-time-start{top:0}
.wg-time-end{bottom:0}
.wg-stack{
  position:absolute; inset:0; border-radius:20px; border:1.2px solid rgba(25,118,210,.28);
  background:#fff; box-shadow:0 4px 16px rgba(25,118,210,.08); overflow:visible;
}
.wg-shift{
  position:absolute; left:0; right:0;
  background:linear-gradient(90deg, rgba(100,181,246,.22), rgba(25,118,210,.10));
  border-top:1px solid rgba(25,118,210,.12);
  display:flex; align-items:center; justify-content:center;
}
.wg-shift.alt{background:linear-gradient(90deg, rgba(25,118,210,.18), rgba(17,82,147,.08))}
.wg-shift.first{border-top:0; border-radius:19px 19px 0 0}
.wg-shift.last{border-radius:0 0 19px 19px}
.wg-shift.first.last{border-radius:19px}
.wg-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:20px;
  background:rgba(25,118,210,.10); border:1px solid rgba(25,118,210,.28);
  font-size:13px; font-weight:700; color:#115293;
}
.wg-chip .icon{width:14px; height:14px; color:#1976D2}
.wg-brace{position:absolute; right:-20px; top:0; height:100%; width:20px; pointer-events:none; z-index:1; overflow:visible}
.wg-handle{
  position:absolute; right:-78px; transform:translate(0,-50%); z-index:2;
  border:0; background:transparent; padding:0; cursor:ns-resize; touch-action:none;
  display:flex; align-items:center; justify-content:center; width:52px; height:48px;
}
.wg-handle-knob{
  width:50px; height:26px; border-radius:15px; background:#fff; border:1.5px solid #1976D2;
  color:#1976D2; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.10);
}
.wg-handle-knob svg{width:18px; height:18px}
.wg-handle.on .wg-handle-knob{width:58px; height:30px; background:#1976D2; color:#fff; box-shadow:0 2px 14px rgba(25,118,210,.35)}
.wg-arm-time{
  position:absolute; right:-132px; transform:translateY(-50%); z-index:4; pointer-events:none;
  font-size:14px; font-weight:600; color:#5B6B63; white-space:nowrap; font-variant-numeric:tabular-nums;
  transition:right .12s ease, background .12s ease, color .12s ease, padding .12s ease;
}
.wg-arm-time.on{
  right:-148px; background:#1976D2; color:#fff; padding:5px 10px; border-radius:10px;
  box-shadow:0 3px 10px rgba(25,118,210,.35); font-weight:800;
}
.wg-chips{display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; padding:4px 0 12px; scrollbar-width:thin; -webkit-overflow-scrolling:touch}
.wg-chip-day{
  flex:0 0 auto; min-width:44px; height:36px; padding:0 14px; border-radius:20px; border:1px solid rgba(0,0,0,.08);
  background:#fff; color:#212121; font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.wg-chip-day .icon{width:14px; height:14px; color:#6B7280}
.wg-chip-day.on{background:#1976D2; color:#fff; border-color:#1976D2}
.wg-chip-day.on .icon{color:rgba(255,255,255,.7)}
.wg-chip-day.rest:not(.on){color:rgba(33,33,33,.45)}
.wg-week-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
.wg-week-head h5{margin:0; font-size:22px; font-weight:800; color:#212121}
.wg-rest{border:0; background:transparent; color:#e20b0b; font:inherit; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.wg-rest .icon{width:20px; height:20px}
.wg-rest.off{color:#1976D2}
.wg-week-stage{position:relative; display:block; min-height:280px}
.wg-week-main{display:grid; grid-template-columns:1fr 136px; gap:8px; min-height:260px}
.wg-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:36px; height:36px; border:0; border-radius:50%; background:rgba(255,255,255,.92);
  color:#1976D2; box-shadow:0 1px 4px rgba(0,0,0,.12); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.wg-nav.prev{left:2px}
.wg-nav.next{right:2px}
.wg-nav .icon{width:22px; height:22px}
.wg-nav.prev .icon{transform:rotate(90deg)}
.wg-nav.next .icon{transform:rotate(-90deg)}
.wg-nav:disabled{opacity:.4; cursor:default}
.wg-rail{
  background:#fff; border:1px solid rgba(25,118,210,.2); border-radius:14px; padding:12px 10px;
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
}
.wg-rail > .icon{width:26px; height:26px; color:#1976D2; flex-shrink:0}
.wg-rail b{font-size:12px; font-weight:800; letter-spacing:.2px}
.wg-rail span, .wg-rail-stat{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:13px; font-weight:700; color:#212121; line-height:1.15;
  background:transparent; border:0; padding:0; font-family:inherit;
}
.wg-rail-stat{cursor:pointer}
.wg-rail span .icon, .wg-rail-stat .icon{width:16px; height:16px; color:#5B6B63; flex-shrink:0}
.wg-rail small, .wg-rail-stat small{font-size:11px; font-weight:600; color:#6B7280}
.wg-edit{
  width:100%; border:0; background:rgba(25,118,210,.12); color:#1976D2; border-radius:10px;
  padding:10px 4px; font:inherit; font-size:12px; font-weight:700; cursor:pointer;
}
.wg-ruhetag{
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  color:#6B7280; font-weight:600; min-height:240px;
}
.wg-ruhetag .icon{width:64px; height:64px}
.wg-sheet{background:#fff; border-radius:16px; padding:14px; margin-top:12px; border:1px solid rgba(25,118,210,.15)}
.wg-note{font-size:13.5px; color:#5B6B63; line-height:1.45; margin:12px 0 0}
.wg-done-lead{font-size:15px; font-weight:600; color:#212121; margin:0 0 12px}
.wg-hint{
  position:fixed; z-index:80; pointer-events:none; max-width:min(260px, calc(100vw - 20px));
  background:#212121; color:#fff; font-size:13px; font-weight:600; line-height:1.35;
  padding:8px 12px; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.28);
  opacity:0; transition:opacity .4s ease;
}
.wg-hint.on{opacity:1}
@media (max-width:720px){
  .demo[data-demo="skeleton"]{padding:12px 8px}
  .wg-page{padding:12px}
  .wg-preview{padding:16px 64px 20px 52px}
  .wg-preview.light{padding:12px 56px 14px 48px}
  .wg-week-main{grid-template-columns:1fr 108px}
  .wg-week-head h5{font-size:18px}
  .wg-time{left:-48px; font-size:12px}
  .wg-handle{right:-34px; width:44px}
  .wg-handle-knob, .wg-handle.on .wg-handle-knob{width:42px; height:24px}
  .wg-chip-day{min-width:38px; padding:0 10px; font-size:12px}
  .wg-nav{width:32px; height:32px}
  .wg-arm-time, .wg-arm-time.on{
    right:auto; left:8px; background:rgba(255,255,255,.94); color:#115293;
    padding:4px 8px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,.08); font-size:13px; font-weight:700;
  }
}
@media (max-width:560px){
  .wg-week-main{grid-template-columns:1fr}
  .wg-rail{
    flex-direction:row; flex-wrap:wrap; justify-content:space-around;
    gap:8px 10px; padding:10px 8px; margin-top:8px;
  }
  .wg-rail > .icon{width:20px; height:20px}
  .wg-edit{width:auto; min-width:88px; padding:8px 12px}
  .wg-preview.light{padding:14px 16px 12px 48px}
}
@media (pointer: coarse) {
  .wg-arm-time, .wg-arm-time.on{
    right:auto; left:8px; background:rgba(255,255,255,.94); color:#115293;
    padding:4px 8px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,.08); font-size:13px; font-weight:700;
  }
}

/* Demo-Kontrollen über dem App-Screen */
.demo-controls{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:12px}

/* ---------------- Roadmap ---------------- */
.roadmap{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; position:relative}
.roadmap::before{content:""; position:absolute; top:34px; left:12%; right:12%; height:1px; background:linear-gradient(90deg, var(--brand), rgba(224,60,45,.2)); z-index:0}
.rm{position:relative; z-index:1; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px}
.rm .rm-dot{width:20px; height:20px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 6px rgba(224,60,45,.15); margin-bottom:16px}
.rm.now .rm-dot{box-shadow:0 0 0 6px rgba(224,60,45,.25), 0 0 24px rgba(224,60,45,.6)}
.rm.next .rm-dot{background:rgba(224,60,45,.45)}
.rm.later .rm-dot{background:rgba(224,60,45,.2); box-shadow:0 0 0 6px rgba(224,60,45,.06)}
.rm h3{margin:0 0 6px}
.rm p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.6}
.rm .rm-tag{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted2); font-weight:800; margin-bottom:8px}

/* ---------------- Preise ---------------- */
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px}
.price-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; position:relative; transition:transform .18s ease, border-color .18s ease}
.price-card:hover{transform:translateY(-2px); border-color:rgba(224,60,45,.3)}
.price-card.featured{border-color:rgba(246,75,86,.45); background:linear-gradient(160deg, rgba(246,75,86,.08), var(--card))}
.price-label{font-size:14px; color:var(--muted); margin:0 0 6px}
.price-big{font-size:42px; font-weight:900; letter-spacing:-1px; margin:0 0 4px; line-height:1}
.price-sub{color:var(--muted); font-size:14px; margin:0 0 18px}
.price-divider{border:none; border-top:1px solid var(--line); margin:18px 0}
.price-table{width:100%; border-collapse:collapse; font-size:15px}
.price-table th{text-align:left; padding:12px 16px; color:var(--muted); font-weight:600; border-bottom:1px solid var(--line); font-size:13px; letter-spacing:.06em; text-transform:uppercase}
.price-table td{padding:14px 16px; border-bottom:1px solid var(--line)}
.price-table tr:last-child td{border-bottom:none}
.price-table tr.hl{background:linear-gradient(90deg, rgba(246,75,86,.08), transparent)}
.unlock-note{
  margin-top:16px; padding:14px 16px; border-radius:12px; display:flex; gap:12px; align-items:flex-start;
  background:rgba(224,60,45,.08); border:1px solid rgba(224,60,45,.28); font-size:14px; color:var(--muted); line-height:1.6;
}
.unlock-note .icon{color:#ff8a7f; margin-top:2px}
.unlock-note b{color:var(--text)}

/* ---------------- CTA & Footer ---------------- */
.cta{background:radial-gradient(700px 380px at 20% 10%, rgba(224,60,45,.18), transparent 60%), var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:72px 0}
.cta-box{border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.02); padding:34px; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:space-between; gap:24px}
.footer{padding:40px 0 30px; color:var(--muted); font-size:14px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px}
.footer h4{margin:0 0 12px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2)}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.footer a:hover{color:var(--text)}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-top:28px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted2); font-size:13px}
.footer-badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.footer-badges .pill{font-size:12px; padding:5px 10px}

/* ---------------- Trust Strip ---------------- */
.trust-strip{border-top:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.015); height:52px; overflow:hidden; position:relative}
.trust-strip::before,.trust-strip::after{content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none}
.trust-strip::before{left:0; background:linear-gradient(to right, var(--bg), transparent)}
.trust-strip::after{right:0; background:linear-gradient(to left, var(--bg), transparent)}
.trust-track{display:inline-flex; align-items:center; height:52px; white-space:nowrap; will-change:transform}
.trust-item{display:inline-flex; align-items:center; gap:9px; padding:0 34px; font-size:13px; font-weight:600; color:rgba(255,255,255,.4)}
.trust-item .icon{width:18px; height:18px; opacity:.7}
.trust-dot{width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.15); flex-shrink:0}

/* ---------------- FAQ ---------------- */
.faq .acc summary{font-size:15.5px}

/* ---------------- Breadcrumb ---------------- */
.crumbs{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted2); margin:22px 0 0; flex-wrap:wrap}
.crumbs a:hover{color:var(--text)}
.crumbs span[aria-current]{color:var(--muted)}

/* ---------------- Hero (Partikel) ---------------- */
.hero-p{position:relative; isolation:isolate; min-height:calc(100svh - var(--nav-h)); display:flex; align-items:center; padding:48px 0 40px; overflow:hidden}
/* Partikel-Canvas füllt den ganzen Hero (hinter dem Text, ohne Pointer-Events).
   Die Formen entstehen im Bereich von .hero-stage, freie Partikel laufen über
   die ganze Fläche; an den Rändern blenden sie aus, damit keine Kante sichtbar ist. */
#hero-particles{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; background:transparent}
.hero-p .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:32px; align-items:center}
.hero-p .wrap > :first-child{position:relative; z-index:2}
.hero-p .wrap > :first-child::before{
  content:""; position:absolute; inset:-32px -24px -24px -16px; pointer-events:none; z-index:-1;
  background:radial-gradient(120% 90% at 28% 42%, rgba(10,10,11,.78) 0%, rgba(10,10,11,.42) 52%, rgba(10,10,11,0) 78%);
}
.hero-p h1 span{display:block; color:#ff8a7f}
.hero-p .lead{font-size:18px}
.hero-stage{position:relative; aspect-ratio:1/1; max-width:520px; margin:0 auto; width:100%; pointer-events:none; background:transparent; overflow:visible}
.hero-fallback{position:absolute; inset:0; display:none; align-items:center; justify-content:center}
.ts-no-particles .hero-fallback{display:flex}
.ts-no-particles #hero-particles{display:none}
.hero-caption{position:absolute; left:50%; bottom:6%; transform:translateX(-50%); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted2); font-weight:700; white-space:nowrap; transition:opacity .4s ease}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.hero-meta{display:flex; gap:18px; flex-wrap:wrap; margin-top:22px; color:var(--muted); font-size:14px}
.hero-meta span{display:inline-flex; gap:8px; align-items:center}
.hero-meta .icon{width:16px; height:16px; color:#ff8a7f}
.scroll-cue{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:var(--muted2); font-size:11px; letter-spacing:.14em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:6px}
.scroll-cue i{width:14px; height:14px; border-right:2px solid var(--muted2); border-bottom:2px solid var(--muted2); transform:rotate(45deg); animation:cue 1.6s infinite}
@keyframes cue{0%,100%{transform:rotate(45deg) translate(0,0)} 50%{transform:rotate(45deg) translate(4px,4px)}}
@media (prefers-reduced-motion: reduce){ .scroll-cue i, .plan .slot.gap{animation:none} }

/* Alter Scroll-Video-Hero (per Config aktivierbar) */
.scroll-video-section{position:relative; height:420vh; display:none}
.hero-video-mode .scroll-video-section{display:block}
.hero-video-mode .hero-p{display:none}
.scroll-video-sticky{position:sticky; top:0; height:100vh; width:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#000}
.scroll-video-sticky video{width:100%; height:100%; object-fit:cover; display:block}
.scroll-video-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.55) 100%); pointer-events:none}
.scroll-video-caption{position:absolute; left:0; right:0; bottom:56px; text-align:center; z-index:2; pointer-events:none}
.scroll-video-caption h2{font-size:clamp(24px, 3.4vw, 40px); margin:0; text-shadow:0 6px 30px rgba(0,0,0,.6)}
.scroll-video-caption p{color:var(--muted); margin:8px 0 0; font-size:15px}
@media (max-width:720px){ .scroll-video-section{height:240vh} }

/* ---------------- Chat Widget ---------------- */
#chat-toggle{position:fixed; bottom:26px; right:26px; width:56px; height:56px; background:var(--brand); border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 24px rgba(224,60,45,.45); z-index:1000; transition:transform .2s ease}
#chat-toggle:hover{transform:scale(1.06)}
#chat-window{position:fixed; bottom:96px; right:26px; width:360px; max-height:540px; background:#121214; border:1px solid var(--line); border-radius:18px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 8px 48px rgba(0,0,0,.7); z-index:999; transform:translateY(20px) scale(.96); opacity:0; pointer-events:none; transition:all .25s cubic-bezier(.34,1.56,.64,1)}
#chat-window.open{transform:none; opacity:1; pointer-events:all}
#chat-window .chat-header{background:#18181b; padding:14px 16px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line)}
#chat-window .chat-avatar{width:36px; height:36px; background:var(--brand); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0}
#chat-window .chat-header-name{color:#fff; font-size:14px; font-weight:600}
#chat-window .chat-header-status{color:#6ee7a4; font-size:11px; display:flex; align-items:center; gap:4px; margin-top:2px}
#chat-window .status-dot{width:6px; height:6px; background:#6ee7a4; border-radius:50%}
#chat-window #messages{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; min-height:120px}
#chat-window .message{max-width:84%; padding:10px 14px; border-radius:14px; font-size:13.5px; line-height:1.5; animation:msgIn .3s ease}
#chat-window .message.bot{background:#1d1d20; color:#e0e0e0; border-bottom-left-radius:4px; align-self:flex-start; border:1px solid var(--line)}
#chat-window .message.user{background:var(--brand); color:#fff; border-bottom-right-radius:4px; align-self:flex-end}
#chat-window .typing{display:flex; gap:4px; align-items:center; padding:12px 14px}
#chat-window .typing span{width:6px; height:6px; background:#666; border-radius:50%; animation:chatBounce 1.2s infinite}
#chat-window .typing span:nth-child(2){animation-delay:.2s}
#chat-window .typing span:nth-child(3){animation-delay:.4s}
@keyframes chatBounce{0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)}}
#chat-window .quick-replies{display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 12px}
#chat-window .quick-reply{background:transparent; border:1px solid rgba(224,60,45,.45); color:#ff8a7f; padding:6px 12px; border-radius:20px; font-size:12px; cursor:pointer; transition:.2s}
#chat-window .quick-reply:hover{background:rgba(224,60,45,.12)}
#chat-window .chat-input-area{padding:12px 16px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:center; background:#121214}
#chat-window #user-input{flex:1; background:#1d1d20; border:1px solid var(--line); border-radius:24px; padding:10px 16px; color:#fff; font-size:13px; outline:none}
#chat-window #user-input:focus{border-color:rgba(224,60,45,.5)}
#chat-window #send-btn{width:36px; height:36px; background:var(--brand); border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0}
#chat-window #send-btn:disabled{background:#333; cursor:not-allowed}
#chat-window .demo-notice{text-align:center; color:#555; font-size:10px; padding:6px}
@media (max-width:480px){
  #chat-toggle{width:50px; height:50px; bottom:16px; right:16px}
  #chat-window{top:16px; left:16px; right:16px; bottom:80px; width:auto; max-height:none}
}

/* ---------------- Responsive ---------------- */
@media (max-width:1180px){
  .navlinks a{padding:9px 8px; font-size:13px}
  .nav-cta .btn{padding:10px 14px; font-size:13px}
}
/* ---------- Formulare ---------- */
.form-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow)}
.form-card[hidden]{display:none}
.field{margin-bottom:16px}
.field label, .field-label{display:block; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:6px; letter-spacing:.02em}
.field input, .field textarea, .field select, .field-input, .info-request-row input{
  width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line2); color:var(--text); border-radius:10px;
  padding:12px 14px; font:inherit; font-size:15px; transition:border-color .15s, box-shadow .15s}
.field input:focus, .field textarea:focus, .field-input:focus, .info-request-row input:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(246,75,86,.18)}
.radio-group{display:grid; gap:10px}
.radio-option{display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--line2); border-radius:12px; cursor:pointer; background:rgba(255,255,255,.02); transition:border-color .15s, background .15s}
.radio-option:has(input:checked){border-color:rgba(246,75,86,.6); background:rgba(246,75,86,.08)}
.radio-option input{margin-top:4px; accent-color:var(--red)}
.radio-option .opt-title{font-weight:800; color:var(--text)}
.radio-option .opt-desc{font-size:13.5px; color:var(--muted); display:block; margin-top:2px}
.form-status{margin-top:14px; font-size:14px; text-align:center; color:var(--muted); min-height:1.4em}
.form-status.ok{color:#7ee2a8}
.form-status.warn{color:#ffb3a7}
.form-note{font-size:12.5px; color:var(--muted2); margin:12px 0 0}
.form-optional{margin:22px 0 12px; font-size:16px}
.field-error{display:block; margin-top:6px; color:#ffb3a7; font-size:13px; font-weight:700}
.field-error:empty{display:none}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"]{border-color:#ffb3a7}
.field input, .field select, .field textarea{min-height:48px}
#website-form{position:relative; padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px))}
#website-form fieldset.field{border:0; margin:0 0 20px; padding:0; min-width:0}
#website-form .field{margin-bottom:20px}
#website-form .field > label,
#website-form .field-label{margin-bottom:8px}
#website-form .field-hint{font-weight:500; color:var(--muted2)}
#website-form .field > input,
#website-form .field > textarea{
  font-size:16px; min-height:48px; scroll-margin-top:calc(var(--nav-h) + 16px); scroll-margin-bottom:40vh;
}
#website-form textarea{height:120px; min-height:120px; max-height:120px; resize:none}
#website-form .choice-chips{display:flex; flex-wrap:wrap; gap:10px; max-width:100%}
#website-form .visually-hidden{
  position:absolute; width:1px; height:1px; min-height:0; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
#website-form .field label.choice-chip{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:44px; min-height:44px; padding:0 16px; margin:0; max-width:100%; box-sizing:border-box;
  border:1px solid var(--line2); border-radius:999px; background:transparent;
  color:var(--text); font-size:16px; font-weight:400; line-height:1.2; letter-spacing:0; cursor:pointer;
}
#website-form .choice-chips input:checked + .choice-chip{
  background:rgba(246,75,86,.15); border-color:var(--red); color:var(--red);
}
#website-form .choice-chips input:checked + .choice-chip::before{
  content:""; width:14px; height:14px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M6.2 11.6 2.6 8l1.2-1.2 2.4 2.4 6-6L13.4 4.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M6.2 11.6 2.6 8l1.2-1.2 2.4 2.4 6-6L13.4 4.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#website-form .choice-chips input:focus-visible + .choice-chip{
  outline:2px solid var(--text); outline-offset:3px;
}
#website-form .hp-field{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}
#website-form .btn-block{
  display:flex; width:100%; height:52px; min-height:52px; margin-top:28px; padding-top:0; padding-bottom:0; box-sizing:border-box;
}
#website-form .form-privacy{margin-top:16px; font-size:13px; line-height:1.5; color:var(--muted)}
#website-form .form-privacy a{color:var(--text); text-decoration:underline}
@media (max-width:720px){
  #website-form.form-card{padding:20px 20px calc(32px + env(safe-area-inset-bottom, 0px))}
}
.form-error{color:#ffb3a7; font-size:14px; margin-top:12px}
.form-success{background:rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.3); border-radius:12px; padding:18px}
.form-success h3{margin:0 0 6px; font-size:18px}
.form-success p{margin:0; color:var(--muted); font-size:14.5px}
.info-request{margin-top:22px; padding:18px; border:1px dashed rgba(246,75,86,.35); border-radius:12px; background:rgba(246,75,86,.05)}
.info-request-title{font-weight:800; margin-bottom:4px; display:flex; align-items:center; gap:8px}
.info-request-sub{font-size:13.5px; color:var(--muted); margin-bottom:12px}
.info-request-row{display:grid; grid-template-columns:1fr 1fr auto; gap:10px}
.info-status{margin-top:10px; font-size:13.5px; color:var(--muted); min-height:1.3em}
.info-status.ok{color:#7ee2a8}
.info-status.warn{color:#ffb3a7}
.job-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; margin-top:22px; box-shadow:var(--shadow)}
.job-card h2{font-size:24px; margin:6px 0 10px}
.job-sub{font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--red)}
.job-card ul{padding-left:0; list-style:none}
.job-card .more summary{list-style:none; cursor:pointer; color:var(--red); font-weight:700; font-size:14px; margin:14px 0 0}
.job-card .more summary::-webkit-details-marker{display:none}
.job-card .more .more-close{display:none}
.job-card .more[open] .more-open{display:none}
.job-card .more[open] .more-close{display:inline}
.job-card .more-content h3{font-size:16px; margin:18px 0 8px}
.callout{margin-top:26px; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; font-size:15px}
.callout a{color:var(--red); font-weight:800}

@media (max-width:980px){
  .navlinks{display:none}
  .nav-cta .hide-on-mobile{display:none !important}
  .nav-toggle{display:inline-flex}
  .cards, .cards-2, .cards-4{grid-template-columns:1fr 1fr}
  .steps, .steps-4{grid-template-columns:1fr 1fr}
  .roadmap{grid-template-columns:1fr}
  .roadmap::before{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-p .wrap{grid-template-columns:1fr; text-align:center}
  .hero-p .lead, .hero-actions, .hero-meta{justify-content:center; margin-left:auto; margin-right:auto}
  .hero-stage{max-width:380px; order:-1}
}
@media (max-width:720px){
  section{padding:56px 0}
  .cards, .cards-2, .cards-4, .steps, .steps-4, .split, .price-grid, .feature-row{grid-template-columns:1fr}
  .feature-row.reverse > :first-child{order:0}
  .footer-grid{grid-template-columns:1fr}
  .cta-box{flex-direction:column; align-items:flex-start}
  .pinpad{grid-template-columns:repeat(3,58px)}
  .plan{grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px}
  .plan .slot{font-size:10px; height:auto; min-height:32px}
  .demo[data-demo="automatik"] .seg{display:flex; flex-wrap:wrap; width:100%}
  .demo[data-demo="automatik"] .seg button{flex:1 1 140px; white-space:normal; text-align:center; line-height:1.25}
  .demo[data-demo="automatik"] .app-body{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .demo[data-demo="automatik"] .plan{min-width:620px; grid-template-columns:repeat(7, minmax(84px, 1fr))}
  .demo[data-demo="automatik"] .app-ui .plan .slot{height:auto; min-height:58px; overflow:visible}
  .hero-p{min-height:auto; padding:28px 0 36px}
  .hero-stage{max-width:300px}
  .hero-p h1{font-size:clamp(32px, 9vw, 42px)}
  .hero-actions .btn{width:100%}
  /* Chat-Knopf sitzt unten rechts. Die Hero-Buttons bleiben daneben lesbar. */
  .hero-actions{padding-right:68px; box-sizing:border-box}
  .info-request-row{grid-template-columns:1fr}
}

/* ---------------- Kostenlose Rechner ---------------- */
.tool-layout{display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; align-items:start; margin-top:22px; width:100%; min-width:0}
.tool-layout > *{min-width:0; max-width:100%}
.tool-panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.tool-panel h2{font-size:18px; margin:0 0 12px}
.tool-row{display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; margin-bottom:12px}
.tool-row .field{margin:0; min-width:0; width:100%; max-width:100%}
.tool-row .field label, .tool-row .field-label{margin-bottom:6px}
.tool-row .field input, .tool-row .field select{width:100%; max-width:100%; box-sizing:border-box; min-width:0}
#soll-app, .tool-panel{min-width:0; max-width:100%; overflow-x:clip}
.tool-input-wrap{display:block; width:100%; max-width:100%; min-width:0; overflow:hidden; box-sizing:border-box}
.tool-input-wrap > input, .tool-input-wrap > select{
  display:block; width:100%; max-width:100%; min-width:0; box-sizing:border-box; margin:0;
}
.tool-row select, .tool-day-bounds select, .tool-shift-field select{
  font:inherit; font-size:14px; background:#141416; color:var(--text); border:1px solid var(--line2); border-radius:10px; padding:10px 28px 10px 12px;
  width:100%; max-width:100%; min-width:0; box-sizing:border-box;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238B909A' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:12px 8px;
}
.tool-shift-times{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:8px;
  width:100%; max-width:100%; min-width:0; box-sizing:border-box;
}
.tool-shift-times .tool-shift-field{min-width:0; max-width:100%}
.tool-emp-name{display:flex; align-items:center; gap:8px; min-width:0; width:100%}
.tool-emp-dot{width:10px; height:10px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 1px rgba(255,255,255,.85)}
.tool-emp-name input{flex:1; min-width:0}
.tool-subblock{margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.tool-subtitle{font-size:14px; font-weight:800; margin:0 0 4px}
.tool-day-bounds{display:grid; grid-template-columns:minmax(0, 1fr); gap:12px}
.tool-day-bounds .field{margin:0; min-width:0}
.tool-day-bounds .field span{display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:4px}
.tool-day-bounds input{width:100%; box-sizing:border-box; background:#141416; color:var(--text); border:1px solid var(--line2); border-radius:10px; padding:8px; font:inherit; font-size:14px}
.tool-shift-field{display:grid; grid-template-columns:minmax(0, 1fr); gap:4px; align-items:stretch; min-width:0; max-width:100%; overflow:hidden}
.tool-shift-lbl{font-size:12px; font-weight:700; color:var(--muted); display:block}
.tool-tabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.tool-tabs button, .tool-choice button{
  font:inherit; font-size:13px; font-weight:700; color:var(--muted);
  background:transparent; border:1px solid var(--line); border-radius:999px; padding:7px 12px; cursor:pointer;
}
.tool-tabs button[aria-selected="true"], .tool-choice button[aria-selected="true"]{color:var(--text); border-color:rgba(224,60,45,.55); background:rgba(224,60,45,.12)}
.tool-choice{display:flex; flex-wrap:wrap; gap:6px}
.tool-wdays{display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; margin-bottom:12px}
.tool-wdays label{display:flex; align-items:center; justify-content:center; gap:4px; font-size:13px; font-weight:700; border:1px solid var(--line); border-radius:10px; padding:8px 0; cursor:pointer}
.tool-shift{
  display:flex; flex-direction:column; gap:8px; align-items:stretch;
  padding:12px; margin-bottom:10px; border:1px solid var(--line); border-radius:12px; background:#101012;
  width:100%; max-width:100%; box-sizing:border-box; overflow:hidden;
}
.tool-emp{
  display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--line); border-radius:12px; margin-bottom:8px;
}
.tool-shift .tool-iconbtn{width:100%; max-width:140px; align-self:flex-end; margin-top:2px}
.tool-shift input, .tool-shift-field input, .tool-emp input, .tool-day select{
  width:100%; min-width:0; max-width:100%; box-sizing:border-box; background:#141416; color:var(--text); border:1px solid var(--line2); border-radius:10px; padding:8px; font:inherit; font-size:14px;
}
.tool-iconbtn{width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer}
.tool-day{border-top:1px solid var(--line); padding-top:10px; margin-top:10px}
.tool-day h3{font-size:14px; margin:0 0 8px}
.tool-stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:0 0 14px}
.tool-stat{background:#141416; border-radius:12px; padding:10px}
.tool-stat b{display:block; font-size:20px; line-height:1.2}
.tool-stat span{color:var(--muted); font-size:12px; font-weight:700}
.tool-chart{display:block}
.tool-chart svg, .pie-svg{width:160px; height:160px; overflow:visible}
.pie-row{display:flex; align-items:center; gap:12px}
.pie-row b{display:block; font-size:20px}
.pie-row span{color:var(--muted); font-size:12px}
.pie-svg [data-slice]{cursor:pointer}
.budget-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.budget-head h2{margin:0 0 2px}
.chart-switch{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; flex:none}
.chart-switch button{width:34px; height:32px; border:0; border-right:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; display:grid; place-items:center; padding:0}
.chart-switch button:last-child{border-right:0}
.chart-switch button[aria-selected="true"]{background:rgba(224,60,45,.16); color:var(--text)}
.chart-callout{min-height:36px; display:flex; align-items:flex-end; margin:4px 0 8px}
.slice-callout{display:inline-flex; align-items:center; gap:6px; border:1px solid; border-radius:8px; padding:6px 10px; font-size:12.5px; font-weight:700}
.slice-callout i, .leg-chip i{width:9px; height:9px; border-radius:50%; display:inline-block; box-shadow:0 0 0 1px #fff}
.hbar{display:flex; height:28px; border-radius:8px; overflow:hidden; background:#141416}
.hbar-seg{border:0; padding:0; min-width:4px; height:100%; cursor:pointer}
.vbars{display:flex; align-items:flex-end; gap:6px; height:148px}
.vbar{flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; gap:4px; background:transparent; border:0; color:var(--text); cursor:pointer; padding:0}
.vbar-val{font-size:10px; font-weight:700; text-align:center; color:var(--muted)}
.vbar-col{display:block; width:100%; border-radius:6px 6px 0 0; min-height:8px}
.chart-legend{display:flex; flex-wrap:wrap; gap:6px 8px; margin-top:10px}
.leg-chip{display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; color:var(--text); font:inherit; font-size:12px; font-weight:500; border-radius:8px; padding:3px 6px; cursor:pointer}
.leg-chip.is-hot{font-weight:700}
.tool-step{margin-top:14px}
.tool-step-title{font-size:15px; margin:0 0 4px}
.tool-skel-in{animation:skelIn .45s ease}
@keyframes skelIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.tool-legend{display:flex; flex-direction:column; gap:6px; font-size:13px}
.tool-legend i{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px}
.tool-bar{height:10px; border-radius:999px; background:#141416; overflow:hidden; margin-top:4px}
.tool-bar span{display:block; height:100%; border-radius:999px}
.tool-note, .tool-holiday{font-size:13px; color:var(--muted); line-height:1.5}
.tool-holiday{margin:6px 0 0}
.tool-warn{color:#ffb3ad; font-size:13px; margin:8px 0 0}
.tool-teaser{margin-top:16px; padding:14px; border-radius:14px; border:1px dashed var(--line2); opacity:.72}
.tool-teaser h3{margin:0 0 6px; font-size:15px}
.tool-teaser button{opacity:.6; cursor:not-allowed}
.tool-cta{margin-top:16px; display:flex; flex-direction:column; align-items:stretch; gap:10px; width:100%; max-width:100%}
.tool-cta .btn{
  display:flex; width:100%; max-width:100%; box-sizing:border-box;
  white-space:normal; text-align:center; line-height:1.35;
  overflow-wrap:break-word; word-break:break-word; hyphens:auto;
}
.tool-disclaimer{margin-top:18px; font-size:13px; color:var(--muted2)}
.tool-out{position:sticky; top:calc(var(--nav-h) + 12px)}

/* Dienstleistungen: 5 Gründe + YouTube-Fassade */
.gruende-lead{max-width:720px; margin:28px auto 0}
.gruende-grid{
  display:grid; grid-template-columns:1fr; gap:16px; margin-top:16px;
}
.gruende-card{display:flex; flex-direction:column; gap:10px; min-width:0}
.gruende-card h3{margin:0; font-size:17px; line-height:1.35}
.gruende-nr{margin:0; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--red)}
.gruende-more-wrap{text-align:center; margin:18px 0 0}
.gruende-more{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .4s ease;
}
.gruende-more.is-open{grid-template-rows:1fr}
.gruende-more-inner{overflow:hidden; min-height:0}
.gruende-cta{margin:28px 0 0; text-align:center}
.yt-facade{
  position:relative; width:100%; max-width:100%; aspect-ratio:16/9;
  border-radius:12px; overflow:hidden; background:#0a0a0b; border:1px solid var(--line);
}
.yt-facade-thumb{display:block; width:100%; height:100%; object-fit:cover}
.yt-facade-play{
  position:absolute; left:50%; top:46%; transform:translate(-50%, -50%);
  width:64px; height:64px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(224,60,45,.92); color:#fff; display:grid; place-items:center;
  box-shadow:0 12px 40px rgba(0,0,0,.45); transition:transform .18s ease, background .18s ease;
}
.yt-facade-play .icon{width:26px; height:26px; margin-left:4px}
.yt-facade-play:hover, .yt-facade-play:focus-visible{background:var(--red); outline:2px solid rgba(255,255,255,.85); outline-offset:3px}
.yt-facade-note{
  position:absolute; left:0; right:0; bottom:0; margin:0; padding:8px 10px;
  font-size:11.5px; line-height:1.4; color:rgba(255,255,255,.92);
  background:linear-gradient(transparent, rgba(0,0,0,.82));
}
.yt-facade-note a{color:#ffb8b0; text-decoration:underline}
.yt-facade-soon-label{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  font-size:14px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text); background:rgba(10,10,11,.78); border:1px solid var(--line2);
  border-radius:999px; padding:10px 18px;
}
.yt-facade.is-loaded{aspect-ratio:16/9; border:0}
.yt-embed{display:block; width:100%; height:100%; border:0}
@media (min-width:721px){
  .gruende-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (prefers-reduced-motion: reduce){
  .gruende-card:hover{transform:none; box-shadow:none}
  .yt-facade-play{transition:none}
  .gruende-more{transition:none}
}
@media (max-width:720px){
  .tool-panel{padding:14px}
  .tool-out{position:static}
  .tool-chart{display:block}
  .pie-row{flex-wrap:wrap}
  .tool-stats{grid-template-columns:1fr}
  .budget-head{flex-wrap:wrap}
  .tool-row .field.hidden{display:none}
  .tool-wdays{grid-template-columns:repeat(4, minmax(0, 1fr))}
  .tool-wdays label{font-size:12px; padding:10px 0; min-width:0}
  .tool-emp input{width:100%}
  .tool-emp .tool-iconbtn{align-self:flex-end}
  .tool-choice{flex-direction:column; align-items:stretch}
  .tool-choice button{width:100%; text-align:center; font-size:12px; padding:10px 12px; white-space:normal; line-height:1.3}
  .tool-shift input[type="time"], .tool-day-bounds input[type="time"]{
    font-size:16px; display:block; width:100%; max-width:100%; min-width:0; box-sizing:border-box;
  }
  .tool-shift-field input, .tool-shift-field select{min-width:0; max-width:100%; font-size:16px}
  .tool-shift-times{gap:6px}
  .wrap:has(#soll-app){padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right))}
  .chart-legend, .leg-chip{max-width:100%; overflow-wrap:anywhere}
}
@media (min-width:721px){
  .tool-layout{grid-template-columns:minmax(0, 1.05fr) minmax(280px, .95fr); gap:22px}
  .tool-row{display:flex; flex-wrap:wrap; gap:10px}
  .tool-row .field{flex:1 1 160px}
  .tool-day-bounds{grid-template-columns:1fr 1fr}
  .tool-shift{
    display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr) minmax(52px, 72px) 40px; gap:8px;
    padding:0; margin-bottom:8px; border:0; border-radius:0; background:transparent; overflow:visible;
  }
  .tool-shift-times{align-self:stretch}
  .tool-shift-field{display:flex; flex-direction:column; align-items:stretch; gap:4px; overflow:visible}
  .tool-shift-lbl{font-size:10px; font-weight:700; color:var(--muted2); letter-spacing:.02em}
  .tool-shift .tool-iconbtn{width:36px; max-width:none; align-self:end; margin-top:0}
  .tool-emp{display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) 36px; gap:6px; padding:0; border:0; margin-bottom:8px; align-items:center}
}