/* ═══════════════════════════════════════════════════════════════════════
   Zebra AI — Landing page · section styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── HERO ────────────────────────────────────────────────────────────── */
.hero{
  position:relative; padding-top:calc(var(--nav-h) + 64px); padding-bottom:64px;
  overflow:hidden;
}
.hero__bg{position:absolute; inset:0; z-index:0; pointer-events:none;}
/* light theme bg: faint grid + soft cyan glow */
.hero__bg::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(1100px 520px at 78% -8%, var(--zebra-cyan-50), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--app-bg));
}
.hero__grid-lines{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(900px 480px at 75% 0%, #000 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(900px 480px at 75% 0%, #000 0%, transparent 70%);
  opacity:.6;
}
.hero .wrap{position:relative; z-index:1;}

.hero__inner{display:grid; gap:56px; align-items:center; grid-template-columns:1fr 1fr;}
/* min-width:0: der Trust-Ticker (breiter Track) darf die Grid-Spalte
   nicht über ihre Min-Content-Breite aufblähen */
.hero__copy{max-width:560px; min-width:0;}
.hero__pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px;
  border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-full);
  font-size:12px; font-weight:600; color:var(--fg-muted); box-shadow:var(--shadow-xs);
}
.hero__pill b{color:var(--zebra-cyan-700);}
.hero__pill .tag{background:var(--zebra-cyan); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:var(--radius-full); letter-spacing:.03em;}
.hero h1{
  margin-top:0; font-size:clamp(30px,4.2vw,46px); font-weight:800; line-height:1.08;
  letter-spacing:-.025em; text-wrap:balance;
}
.hero h1 .accent{color:var(--zebra-cyan);}
.hero__lead{margin-top:18px; font-size:clamp(16px,1.55vw,18px); font-weight:500; color:var(--fg-muted); line-height:1.6; max-width:500px; text-wrap:pretty;}
.hero__cta{margin-top:32px; display:flex; flex-wrap:wrap; gap:12px;}
.hero__trust{margin-top:26px;}
.hero__trust-track{display:flex; align-items:center; gap:8px 18px; flex-wrap:wrap;}
.hero__trust .trust-item{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--fg-muted);}
.hero__trust .trust-item svg{width:15px; height:15px; color:var(--zebra-cyan); flex:none;}
.hero__trust .trust-item--dup{display:none;}  /* nur für den Mobile-Ticker */
.hero__avatars{display:flex;}
.hero__avatars span{width:32px; height:32px; border-radius:50%; border:2px solid var(--surface); margin-left:-8px; background-size:cover; background-position:center; font-size:12px; font-weight:700; color:#fff; display:flex; align-items:center; justify-content:center;}
.hero__avatars span:first-child{margin-left:0;}
.hero__trust-txt{font-size:13px; color:var(--fg-muted); line-height:1.4;}
.hero__trust-txt b{color:var(--fg);}
.stars{color:#f59e0b; letter-spacing:1px; font-size:13px;}

/* hero visual cluster */
.hero__visual{position:relative;}
.hero__visual .appwin{position:relative; z-index:2;}
.hero__float{
  position:absolute; z-index:3; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow-xl); padding:12px 14px;
  animation:floaty 6s ease-in-out infinite;
}
.hero__float--a{top:-22px; left:-30px; width:226px;}
.hero__float--b{bottom:-26px; right:-26px; width:248px; animation-delay:-3s;}
.hero__float .fl-h{display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; color:var(--fg-muted); margin-bottom:8px;}
.hero__float .fl-h svg{width:14px; height:14px; color:var(--zebra-cyan);}

/* hero module carousel — slides cross-fade inside the mocked app window.
   Grid stacking: every slide shares cell 1/1, so the container auto-sizes to
   the tallest slide and the dots always sit cleanly below it. Slides are
   centered vertically so shorter ones don't leave a dead area at the bottom. */
.miniapp__main .slides{display:grid; grid-template-columns:minmax(0,1fr); align-items:center; min-height:100%;}
.slide{min-width:0;}
.slide{grid-area:1 / 1; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; pointer-events:none;}
.slide.on{opacity:1; visibility:visible; transform:none; pointer-events:auto;}
.slide__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.slide__t{font-size:16px; font-weight:800; letter-spacing:-.02em;}
.miniapp__ni{cursor:pointer;}
/* wrapper so the dots can sit just below the whole app window without
   resizing it or shifting the floating cards */
.hero__carousel{position:relative;}
.carousel-dots{position:absolute; left:0; right:0; bottom:-46px; display:flex; gap:14px; justify-content:center;}
.carousel-dots .dot{position:relative; width:7px; height:7px; padding:0; border-radius:var(--radius-full); background:var(--border-strong); transition:width .25s, background .25s;}
/* invisible touch padding so the tiny dots meet finger-sized tap targets */
.carousel-dots .dot::after{content:""; position:absolute; inset:-12px;}
.carousel-dots .dot.on{width:20px; background:var(--zebra-cyan);}

/* ── Slide: voice dictation ──────────────────────────────────────────── */
.dictate{display:flex; align-items:center; gap:16px; margin-bottom:16px;}
.dictate__mic{position:relative; width:46px; height:46px; flex:none;}
.dictate__btn{position:absolute; inset:0; z-index:2; border-radius:50%; background:var(--danger); color:#fff; display:flex; align-items:center; justify-content:center;}
.dictate__btn svg{width:20px; height:20px;}
.dictate__ring{position:absolute; inset:0; border-radius:50%; background:var(--danger); opacity:.3; animation:micpulse 2.2s ease-out infinite;}
.dictate__ring:nth-child(2){animation-delay:1.1s;}
@keyframes micpulse{0%{transform:scale(1); opacity:.32} 100%{transform:scale(2.15); opacity:0}}
.dictate__wave{flex:1; display:flex; align-items:center; gap:3px; height:42px;}
.dictate__wave i{flex:1; min-width:2px; max-width:5px; height:18%; background:var(--zebra-cyan); border-radius:3px; transform-origin:center; animation:wavebar 1.1s ease-in-out infinite;}
.dictate__wave i:nth-child(3n){background:var(--zebra-cyan-600);}
.dictate__wave i:nth-child(2){animation-delay:-.95s;} .dictate__wave i:nth-child(3){animation-delay:-.5s;}
.dictate__wave i:nth-child(4){animation-delay:-.8s;}  .dictate__wave i:nth-child(5){animation-delay:-.2s;}
.dictate__wave i:nth-child(6){animation-delay:-.65s;} .dictate__wave i:nth-child(7){animation-delay:-.35s;}
.dictate__wave i:nth-child(8){animation-delay:-.9s;}  .dictate__wave i:nth-child(9){animation-delay:-.15s;}
.dictate__wave i:nth-child(10){animation-delay:-.55s;} .dictate__wave i:nth-child(11){animation-delay:-.75s;}
.dictate__wave i:nth-child(12){animation-delay:-.3s;} .dictate__wave i:nth-child(13){animation-delay:-.6s;}
.dictate__wave i:nth-child(14){animation-delay:-.45s;}
@keyframes wavebar{0%,100%{height:15%} 50%{height:88%}}
.dictate__script{font-size:13px; line-height:1.65; color:var(--fg); font-weight:600;}
.dictate__script .w{display:inline-block; opacity:0; animation-duration:7s; animation-iteration-count:infinite; animation-timing-function:ease-in-out;}
/* scoped to .on so the reveal restarts every time the slide is shown */
.slide.on .dictate__script .w:nth-of-type(1){animation-name:dw1;}
.slide.on .dictate__script .w:nth-of-type(2){animation-name:dw2;}
.slide.on .dictate__script .w:nth-of-type(3){animation-name:dw3;}
@keyframes dw1{0%{opacity:0; transform:translateY(4px)} 5%{opacity:1; transform:none} 92%{opacity:1} 100%{opacity:0}}
@keyframes dw2{0%,18%{opacity:0; transform:translateY(4px)} 24%{opacity:1; transform:none} 92%{opacity:1} 100%{opacity:0}}
@keyframes dw3{0%,36%{opacity:0; transform:translateY(4px)} 42%{opacity:1; transform:none} 92%{opacity:1} 100%{opacity:0}}
.dictate__caret{display:inline-block; width:2px; height:14px; margin-left:1px; vertical-align:-2px; background:var(--zebra-cyan); animation:caret 1s steps(1) infinite;}
@keyframes caret{0%,50%{opacity:1} 51%,100%{opacity:0}}

/* ── Slide: report assistant chat ────────────────────────────────────── */
.chat{display:flex; flex-direction:column; gap:8px;}
.chat__msg{display:flex; align-items:flex-end; gap:8px; opacity:0; animation-duration:9s; animation-iteration-count:infinite; animation-timing-function:ease-in-out;}
.chat__msg--me{flex-direction:row-reverse;}
.chat__av{width:24px; height:24px; border-radius:50%; background:var(--zebra-cyan); color:#fff; display:flex; align-items:center; justify-content:center; flex:none;}
.chat__av svg{width:13px; height:13px;}
.chat__bubble{max-width:78%; padding:8px 11px; border-radius:13px; font-size:12.5px; font-weight:600; line-height:1.45;}
.chat__msg--bot .chat__bubble{background:var(--surface-muted); color:var(--fg); border-bottom-left-radius:4px;}
.chat__msg--me .chat__bubble{background:var(--zebra-cyan); color:#fff; border-bottom-right-radius:4px;}
.chat__stack{display:grid; justify-items:start;}
.chat__stack > *{grid-area:1 / 1;}
.chat__bubble--typing{display:inline-flex; gap:4px; align-items:center; padding:11px 12px;}
.chat__bubble--typing i{width:6px; height:6px; border-radius:50%; background:var(--fg-subtle); animation:typedot 1.3s ease-in-out infinite;}
.chat__bubble--typing i:nth-child(2){animation-delay:.18s;}
.chat__bubble--typing i:nth-child(3){animation-delay:.36s;}
@keyframes typedot{0%,60%,100%{transform:translateY(0); opacity:.45} 30%{transform:translateY(-4px); opacity:1}}
/* scoped to .on so the conversation replays each time the slide is shown */
.slide.on .chat .c1{animation-name:cm1;}
.slide.on .chat .c2{animation-name:cm2;}
.slide.on .chat .c3{animation-name:cm3;}
@keyframes cm1{0%{opacity:0; transform:translateY(8px)} 4%{opacity:1; transform:none} 95%{opacity:1} 100%{opacity:0}}
@keyframes cm2{0%,14%{opacity:0; transform:translateY(8px)} 18%{opacity:1; transform:none} 95%{opacity:1} 100%{opacity:0}}
@keyframes cm3{0%,30%{opacity:0; transform:translateY(8px)} 34%{opacity:1; transform:none} 95%{opacity:1} 100%{opacity:0}}
.t-typing{opacity:0; animation-duration:9s; animation-iteration-count:infinite; animation-timing-function:ease-in-out;}
.t-answer{opacity:0; animation-duration:9s; animation-iteration-count:infinite; animation-timing-function:ease-in-out;}
.slide.on .t-typing{animation-name:typingShow;}
.slide.on .t-answer{animation-name:answerShow;}
@keyframes typingShow{0%,34%{opacity:0} 38%{opacity:1} 56%{opacity:1} 62%{opacity:0} 100%{opacity:0}}
@keyframes answerShow{0%,60%{opacity:0; transform:translateY(3px)} 66%{opacity:1; transform:none} 95%{opacity:1} 100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .dictate__script .w, .chat__msg, .t-answer{opacity:1 !important; transform:none !important;}
  .t-typing{opacity:0 !important;}
}

/* ── Floating-card rich bodies ───────────────────────────────────────── */
.fl-body{font-size:12px; color:var(--fg); font-weight:600;}
.fl-big{font-size:24px; font-weight:800; letter-spacing:-.02em;}
.fl-up{font-size:13px; color:var(--success); font-weight:700;}
.fl-mut{color:var(--fg-muted); font-weight:600;}
.fl-tip{font-size:12.5px; font-weight:700; color:var(--fg); line-height:1.35;}
.fl-mt{margin-top:7px;}
.fl-body .bdg{display:inline-flex; white-space:normal; text-align:left;}
.fl-list{display:flex; flex-direction:column; gap:6px;}
.fl-li{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600;}
.fl-li .pdot{width:7px; height:7px; flex:none;}
.fl-li .pdot::after{display:none;}            /* no ping inside list popovers */
.fl-li .fl-mut{margin-left:auto; font-size:11px;}
.fl-util{display:flex; align-items:baseline; gap:7px;}
.fl-util .fl-mut{font-size:11px;}
.fl-body .prog{width:100%;}
.fl-li .fl-chk{flex:none; width:14px; text-align:center; font-weight:800; font-size:13px; line-height:1;}
/* mini holiday calendar inside the slide-5 popover (Urlaubskalender) */
.fl-cal{display:grid; grid-template-columns:repeat(7,1fr); gap:3px; text-align:center; margin-top:2px;}
.fl-cal > span{font-size:10.5px; font-weight:700; color:var(--fg); padding:3px 0; border-radius:5px;}
.fl-cal .fl-cal__h{color:var(--fg-muted); font-size:9px; font-weight:800; padding:2px 0;}
.fl-cal .we{color:var(--fg-subtle);}
.fl-cal .vac{background:var(--p-vac); color:#fff;}

/* ── Slide: daily report (placeholder content) ───────────────────────── */
.report__top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:14px;}
.report__title{font-size:14px; font-weight:800; letter-spacing:-.01em;}
.report__meta{font-size:11px; color:var(--fg-muted); margin-top:2px; font-weight:600;}
.report__sec{margin-bottom:12px;}
.report__h{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--zebra-cyan-700); margin-bottom:4px;}
.report__p{font-size:12.5px; color:var(--fg); line-height:1.5; font-weight:500;}
.report__photos{display:flex; gap:8px; align-items:center; margin-top:14px;}
.report__ph{width:46px; height:46px; border-radius:8px; background:linear-gradient(135deg, var(--zebra-cyan-100), var(--surface-muted)); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--zebra-cyan-700);}
.report__ph svg{width:18px; height:18px;}
.report__more{font-size:12px; font-weight:700; color:var(--fg-muted);}

.hero__logos{margin-top:64px; display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center;}
.hero__logos .lbl{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--fg-subtle);}
.hero__logos .row{display:flex; flex-wrap:wrap; gap:36px 48px; align-items:center; justify-content:center;}
.hero__logos .row span{font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--fg-subtle); opacity:.85;}

/* ── HERO layout variants (set via [data-hero-layout]) ───────────────── */
/* A — split (default, defined above) */

/* B — centered, preview below */
[data-hero-layout="b"] .hero__inner{grid-template-columns:1fr; text-align:center; gap:40px; justify-items:center;}
[data-hero-layout="b"] .hero__copy{max-width:780px;}
[data-hero-layout="b"] .hero__lead{margin-left:auto; margin-right:auto;}
[data-hero-layout="b"] .hero__cta,[data-hero-layout="b"] .hero__trust{justify-content:center;}
[data-hero-layout="b"] .hero__eyebrow-wrap{justify-content:center;}
[data-hero-layout="b"] .hero__visual{width:100%; max-width:920px; margin-top:8px;}
[data-hero-layout="b"] .hero__float--a{left:-18px;}
[data-hero-layout="b"] .hero__float--b{right:-18px;}
[data-hero-layout="b"] .hero__bg::before{background:radial-gradient(1000px 520px at 50% -10%, var(--zebra-cyan-50), transparent 62%), linear-gradient(180deg, var(--surface), var(--app-bg));}
[data-hero-layout="b"] .hero__grid-lines{mask-image:radial-gradient(900px 460px at 50% 0%, #000, transparent 70%); -webkit-mask-image:radial-gradient(900px 460px at 50% 0%, #000, transparent 70%);}

/* C — asymmetric, copy narrower left, large offset preview */
[data-hero-layout="c"] .hero__inner{grid-template-columns:0.85fr 1.15fr; gap:40px;}
[data-hero-layout="c"] .hero__visual{transform:perspective(1600px) rotateY(-9deg) rotateX(2deg); transform-origin:left center;}
[data-hero-layout="c"] .hero__float--a{top:8%; left:-44px;}
[data-hero-layout="c"] .hero__float--b{bottom:6%; right:-18px;}

/* ── HERO dark theme ─────────────────────────────────────────────────── */
[data-hero-theme="dark"] .hero{background:#0b1220;}
[data-hero-theme="dark"] .hero__bg::before{
  background:
    radial-gradient(1100px 560px at 78% -10%, rgb(0 177 235 / .22), transparent 60%),
    radial-gradient(800px 500px at 10% 110%, rgb(0 177 235 / .10), transparent 60%),
    #0b1220;
}
[data-hero-theme="dark"] .hero__grid-lines{
  background-image:linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px);
}
[data-hero-theme="dark"] .hero h1{color:#fff;}
[data-hero-theme="dark"] .hero__lead{color:#94a3b8;}
[data-hero-theme="dark"] .hero__pill{background:rgb(255 255 255 / .06); border-color:rgb(255 255 255 / .12); color:#cbd5e1;}
[data-hero-theme="dark"] .hero__pill b{color:var(--zebra-cyan);}
[data-hero-theme="dark"] .eyebrow{color:#38bdf8;}
[data-hero-theme="dark"] .hero__trust-txt{color:#94a3b8;}
[data-hero-theme="dark"] .hero__trust-txt b{color:#fff;}
[data-hero-theme="dark"] .hero__avatars span{border-color:#0b1220;}
[data-hero-theme="dark"] .btn--outline{background:rgb(255 255 255 / .06); color:#fff; border-color:rgb(255 255 255 / .18);}
[data-hero-theme="dark"] .btn--outline:hover{background:rgb(255 255 255 / .12);}
[data-hero-theme="dark"] .hero__logos .lbl{color:#475569;}
[data-hero-theme="dark"] .hero__logos .row span{color:#475569;}
[data-hero-theme="dark"] .nav:not(.scrolled){background:transparent;}
[data-hero-theme="dark"] .hero__float{background:#111c30; border-color:rgb(255 255 255 / .10);}
[data-hero-theme="dark"] .hero__float .fl-h{color:#94a3b8;}

/* ── FEATURES ────────────────────────────────────────────────────────── */
.features{padding:96px 0; background:var(--app-bg); border-top:1px solid var(--border);}
.feat-grid{margin-top:56px; display:grid; grid-template-columns:repeat(12,1fr); gap:20px;}
.feat{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:26px; box-shadow:var(--shadow-sm); overflow:hidden; position:relative;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.feat:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--zebra-cyan-100);}
.feat--wide{grid-column:span 7;}
.feat--tall{grid-column:span 5;}
.feat--third{grid-column:span 4;}
.feat__icon{width:44px; height:44px; border-radius:11px; background:var(--zebra-cyan-50); color:var(--zebra-cyan-700); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.feat__icon svg{width:22px; height:22px;}
.feat h3{font-size:20px; font-weight:700; letter-spacing:-.01em;}
.feat p{margin-top:10px; font-size:15px; color:var(--fg-muted); line-height:1.6;}
.feat__visual{margin-top:22px;}
/* on stacked layouts the app previews collapse behind this toggle */
.feat__toggle{display:none; align-items:center; gap:6px; margin-top:6px; padding:12px 0; font-size:14px; font-weight:700; color:var(--zebra-cyan-700);}
.feat__toggle svg{width:16px; height:16px; transition:transform .25s;}
.feat--open .feat__toggle svg{transform:rotate(180deg);}

/* feature inline mock bits */
.fv-rows{display:flex; flex-direction:column; gap:8px;}
.fv-row{display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--app-bg); border:1px solid var(--border); border-radius:9px;}
.fv-row .nm{font-size:13px; font-weight:600;}
.fv-row .mt{margin-left:auto; font-size:11px; color:var(--fg-muted);}

.report-card{background:var(--app-bg); border:1px solid var(--border); border-radius:12px; padding:16px;}
.report-card .line{height:9px; border-radius:5px; background:var(--border); margin-bottom:9px;}
.report-card .line.w1{width:70%;} .report-card .line.w2{width:90%;} .report-card .line.w3{width:55%;}
.report-card .photo-row{display:flex; gap:8px; margin-top:14px;}
.report-card .ph{flex:1; height:48px; border-radius:8px; background:linear-gradient(135deg, var(--zebra-cyan-100), var(--surface-muted)); border:1px solid var(--border);}

/* live stats + attendance forecast (feature tile) */
.astat-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;}
.astat{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px; box-shadow:var(--shadow-xs);}
.astat__l{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted);}
.astat__v{font-size:26px; font-weight:800; letter-spacing:-.02em; margin-top:4px;}
.astat__v small{font-size:13px; font-weight:600; color:var(--fg-muted);}
.astat__d{font-size:10px; color:var(--fg-muted); margin-top:5px; display:flex; align-items:center; gap:5px; font-weight:600;}
.astat__d svg{width:11px; height:11px; color:var(--success);}
.astat__d--ok{color:var(--success-fg);}
.astat__d--ok .d{width:7px; height:7px; border-radius:50%; background:var(--success); flex:none; position:relative;}
.astat__d--ok .d::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--success); opacity:.35; animation:pingdot 1.8s cubic-bezier(0,0,.2,1) infinite;}
.fcast{background:var(--app-bg); border:1px solid var(--border); border-radius:10px; padding:12px;}
.fcast__h{display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:700; color:var(--fg-muted); margin-bottom:10px;}
.fcast__avg{color:var(--zebra-cyan-700);}
.fcast__chart{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; align-items:end; height:74px;}
.fcast__col{height:100%; display:flex; align-items:flex-end; justify-content:center;}
.fcast__bar{width:100%; max-width:26px; min-height:8px; border-radius:5px 5px 3px 3px; background:linear-gradient(180deg, var(--zebra-cyan), var(--zebra-cyan-600));}
.fcast__bar--low{background:linear-gradient(180deg, var(--warning), #d97706);}
.fcast__days{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:6px;}
.fcast__days span{text-align:center; font-size:10px; font-weight:700; color:var(--fg-subtle);}

/* time-tracking tile: punch clock + per-project entries side by side */
.tt-cards{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:stretch;}
.pte__h{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted); margin-bottom:8px;}
.pte__row{display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid var(--border); font-size:13px;}
.pte__row .pdot{width:8px; height:8px; flex:none;}
.pte__row .pdot::after{display:none;}
.pte__nm{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pte__hrs{margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; color:var(--zebra-cyan-700);}
.pte__total{display:flex; justify-content:space-between; padding-top:9px; font-size:13px; font-weight:800;}
.pte__total span:last-child{font-variant-numeric:tabular-nums;}
@media (max-width:560px){ .tt-cards{grid-template-columns:1fr;} }

/* mock push notification (forgotten-stamp reminder) */
.pushnote{display:flex; gap:11px; align-items:flex-start; margin-top:12px; padding:11px 13px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-md);}
.pushnote__icon{width:30px; height:30px; border-radius:8px; background:var(--zebra-cyan); flex:none; display:flex; align-items:center; justify-content:center;}
.pushnote__icon svg{width:18px; height:18px;}
.pushnote__body{flex:1; min-width:0;}
.pushnote__top{display:flex; align-items:center; gap:8px; margin-bottom:2px;}
.pushnote__app{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-muted);}
.pushnote__time{margin-left:auto; font-size:11px; color:var(--fg-subtle); font-weight:600;}
.pushnote__title{font-size:13px; font-weight:800; letter-spacing:-.01em;}
.pushnote__text{font-size:12.5px; color:var(--fg-muted); line-height:1.4; margin-top:2px;}

/* project-related tasks (Projekte & Disposition tile) */
.tasks__h{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted); margin-bottom:8px;}
.task{display:flex; align-items:center; gap:9px; padding:6px 0; font-size:13px;}
.task + .task{border-top:1px solid var(--border);}
.task__check{width:16px; height:16px; border-radius:5px; border:1.5px solid var(--border-strong); flex:none; display:flex; align-items:center; justify-content:center; color:#fff;}
.task--done .task__check{background:var(--zebra-cyan); border-color:var(--zebra-cyan);}
.task__check svg{width:11px; height:11px;}
.task__nm{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.task--done .task__nm{color:var(--fg-subtle); text-decoration:line-through;}
.task__proj{margin-left:auto; flex:none; font-size:10px; font-weight:700; padding:2px 8px; border-radius:var(--radius-full);}
.task__proj--cyan{background:var(--zebra-cyan-50); color:var(--zebra-cyan-700);}
.task__proj--purple{background:#ede9fe; color:#6d28d9;}
.task__proj--green{background:var(--success-soft); color:var(--success-fg);}

/* absence calendar (Urlaub & Abwesenheiten tile) */
.cal__h{display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:700; color:var(--fg-muted); margin-bottom:9px;}
.cal__legend{display:flex; gap:10px;}
.cal__legend i{display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; font-style:normal; color:var(--fg-muted);}
.cal__legend i::before{content:""; width:7px; height:7px; border-radius:2px; display:inline-block;}
.cal__legend .vac::before{background:var(--p-vac);}
.cal__legend .sick::before{background:var(--p-sick);}
.cal__grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px;}
.cal__wd{text-align:center; font-size:9px; font-weight:700; color:var(--fg-subtle); padding-bottom:2px;}
.cal__d{height:22px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; color:var(--fg); border-radius:5px;}
.cal__d--we{color:var(--fg-subtle);}
.cal__d--vac{background:var(--p-vac); color:#fff;}
.cal__d--sick{background:var(--p-sick); color:#fff;}
.cal__d--today{box-shadow:inset 0 0 0 1.5px var(--zebra-cyan); color:var(--zebra-cyan-700); font-weight:800;}
.cal__d--mut{visibility:hidden;}

/* ── ZEBRA MODULE ────────────────────────────────────────────────────── */
.modules{padding:96px 0; background:var(--surface);}
.mod-grid{margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.mod{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px; box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s, border-color .25s;}
.mod:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--zebra-cyan-100);}
.mod__icon{width:44px; height:44px; border-radius:11px; background:var(--zebra-cyan-50); color:var(--zebra-cyan-700); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.mod__icon svg{width:22px; height:22px;}
.mod__t{font-size:17px; font-weight:700; letter-spacing:-.01em;}
.mod__d{margin-top:8px; font-size:14px; color:var(--fg-muted); line-height:1.55;}

/* animated module hub */
.hub{margin-top:44px; display:flex; justify-content:center;}
.hub__svg{width:100%; max-width:660px; height:auto; overflow:visible;}
.hub__wire{stroke:#00b1eb; stroke-opacity:.16; stroke-width:1.5;}
.hub__orbit{fill:none; stroke:#00b1eb; stroke-opacity:.13; stroke-width:1.5; stroke-dasharray:2 11; stroke-linecap:round;}
.hub__orbit--2{stroke-opacity:.08; stroke-dasharray:2 16;}
.hub__packet{fill:#00b1eb; filter:drop-shadow(0 0 5px rgba(0,177,235,.95));}
.hub__packet--in{fill:#7dd3fc;}        /* lighter return flow = bidirectional */
.hub__core{fill:#00b1eb; filter:drop-shadow(0 8px 20px rgba(0,177,235,.5));}
.hub__logo path{fill:#fff;}
.hub__halo{fill:none; stroke:#00b1eb; stroke-width:2; transform-box:fill-box; transform-origin:center; animation:hubHalo 4.4s ease-out infinite;}
.hub__halo--2{animation-delay:2.2s;}
@keyframes hubHalo{0%{stroke-opacity:.45; transform:scale(1);} 100%{stroke-opacity:0; transform:scale(2.7);}}
.hub__node{transform-box:fill-box; transform-origin:center; animation:hubPulse 5s ease-in-out infinite; animation-delay:var(--d);}
@keyframes hubPulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.045);}}
.hub__node-bg{fill:#fff; stroke:var(--zebra-cyan-100); stroke-width:1.5; filter:drop-shadow(0 3px 8px rgba(11,18,32,.10));}
.hub__node-ic{color:var(--zebra-cyan-700);}
.hub__label{fill:var(--fg); font-family:var(--font-sans); font-size:15px; font-weight:700; letter-spacing:-.01em;}
.hub__sub{fill:var(--fg-subtle); font-family:var(--font-sans); font-size:12px; font-weight:600;}
@media (prefers-reduced-motion:reduce){ .hub__halo,.hub__node{animation:none;} }
/* compact hub (app.js shrinks ring & centre below 640px — keep in sync) */
@media (max-width:640px){
  .hub{margin-top:28px;}
  .hub__label{font-size:20px;}
  .hub__sub{font-size:16px;}
}

/* ── BEFORE / AFTER ──────────────────────────────────────────────────── */
.ba{padding:96px 0 0; background:var(--app-bg); border-top:1px solid var(--border);}
.ba__stage{position:relative; margin-top:48px; height:clamp(360px,40vw,500px); overflow:hidden; background:#0b1220;}
/* each photo lives in its own ~58%-wide box (overlapping in the middle) so it
   shows almost fully; the diagonal only trims the inner edges near the seam */
.ba__half{position:absolute; top:0; bottom:0; width:58%; overflow:hidden;}
.ba__half img,.ba__half video{width:100%; height:100%; object-fit:cover; display:block;}
.ba__before{left:0; clip-path:polygon(0 0, 100% 0, 87% 100%, 0 100%);}
.ba__before img,.ba__before video{object-position:50% 24%; filter:grayscale(.12) brightness(.92);}
.ba__after{right:0; z-index:2; clip-path:polygon(13% 0, 100% 0, 100% 100%, 0 100%);}
.ba__after img,.ba__after video{object-position:46% 42%;}
/* seam matches the after box's diagonal left edge (42% + 13%·58% ≈ 49.5% top, 42% bottom) */
.ba__seam{position:absolute; inset:0; z-index:3; pointer-events:none; clip-path:polygon(49.5% 0, 50.3% 0, 42.8% 100%, 42% 100%); background:var(--zebra-cyan);}
.ba__scrim{position:absolute; inset:0;}
.ba__before .ba__scrim{background:linear-gradient(180deg, rgba(11,18,32,.45), transparent 32%, transparent 60%, rgba(11,18,32,.72));}
.ba__after .ba__scrim{background:linear-gradient(180deg, rgba(11,18,32,.3), transparent 38%, transparent 64%, rgba(11,18,32,.55));}
.ba__chip{position:absolute; top:22px; display:inline-flex; align-items:center; padding:7px 14px; border-radius:var(--radius-full); font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; z-index:4;}
.ba__chip--before{left:24px; background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(6px);}
.ba__chip--after{right:24px; background:var(--zebra-cyan); color:#fff; box-shadow:var(--shadow-md);}
.ba__cap{position:absolute; bottom:26px; max-width:36%; font-size:clamp(14px,1.5vw,18px); font-weight:700; color:#fff; line-height:1.35; z-index:4; text-shadow:0 2px 14px rgba(0,0,0,.55);}
.ba__before .ba__cap{left:24px;}
.ba__after .ba__cap{right:24px; text-align:right;}
/* play button on the seam: opens the Meister-Müller video popup; the pulsing
   ring draws the eye so the video stops being overlooked. While the user
   scrolls, --x (0…1, set in app.js) morphs the circle into a pill that
   reveals its label — fully open once the button reaches mid-viewport. */
.ba__play{position:absolute; top:50%; left:46%; transform:translate(-50%,-50%); z-index:5; height:62px; border-radius:var(--radius-full); background:#fff; color:var(--zebra-cyan); display:flex; align-items:center; box-shadow:var(--shadow-xl); transition:transform .2s; --x:0;}
.ba__play:hover{transform:translate(-50%,-50%) scale(1.06);}
.ba__play-ic{flex:none; width:62px; height:62px; display:flex; align-items:center; justify-content:center;}
.ba__play-ic svg{width:26px; height:26px; margin-left:3px;}
.ba__play-label{display:block; max-width:calc(var(--x) * 240px); padding-right:calc(var(--x) * 24px); opacity:var(--x); overflow:hidden; white-space:nowrap; font-size:15px; font-weight:700; color:var(--fg);}
.ba__play::before{content:""; position:absolute; inset:0; border-radius:inherit; animation:ba-pulse 2.6s ease-out infinite;}
@keyframes ba-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.6);}
  70%{box-shadow:0 0 0 22px rgba(255,255,255,0);}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}
}
@media (prefers-reduced-motion:reduce){.ba__play::before{animation:none;}}
@media (max-width:700px){
  .ba__stage{height:auto; background:transparent;}
  .ba__half{position:relative; top:auto; bottom:auto; width:100%; height:300px; clip-path:none !important;}
  .ba__after{margin-top:4px;}
  .ba__before img,.ba__before video{object-position:center;} .ba__after img,.ba__after video{object-position:center;}
  .ba__seam{display:none;}
  .ba__cap{max-width:60%;}
  /* the pill sits on the junction and reaches ~31px into the upper video,
     so its caption needs more clearance than the 26px default */
  .ba__before .ba__cap{bottom:56px;}
  .ba__play{top:50%; left:50%;}
}
/* portrait phones show the portrait cuts, so give the boxes a taller frame */
@media (max-width:700px) and (orientation:portrait){
  .ba__half{height:auto; aspect-ratio:4 / 5;}
}

/* ── TESTIMONIALS / SOCIAL PROOF ─────────────────────────────────────── */
.proof{padding:96px 0; background:var(--app-bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-bottom:64px; text-align:center;}
.metric{padding:8px;}
.metric__v{font-size:clamp(34px,4vw,48px); font-weight:800; letter-spacing:-.03em; color:var(--zebra-cyan-700);}
.metric__l{margin-top:8px; font-size:14px; font-weight:600; color:var(--fg-muted);}
.metrics .metric + .metric{border-left:1px solid var(--border);}

.tgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:20px;}
.tcard{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;}
.tcard--feature{background:var(--zebra-cyan); color:#fff; border-color:transparent;}
.tcard__stars{color:#f59e0b; font-size:15px; letter-spacing:2px; margin-bottom:14px;}
.tcard--feature .tcard__stars{color:#fff;}
.tcard__q{font-size:17px; font-weight:600; line-height:1.55; letter-spacing:-.01em; flex:1; text-wrap:pretty;}
.tcard--feature .tcard__q{font-size:21px;}
.tcard__by{margin-top:22px; display:flex; align-items:center; gap:12px;}
.tcard__av{width:42px; height:42px; border-radius:50%; background:var(--surface-muted); flex:none; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--zebra-cyan-700); font-size:15px;}
.tcard--feature .tcard__av{background:rgb(255 255 255 / .2); color:#fff;}
.tcard__nm{font-size:14px; font-weight:700;}
.tcard__ro{font-size:12px; color:var(--fg-muted);}
.tcard--feature .tcard__ro{color:rgb(255 255 255 / .8);}

/* ── PRICING (interaktiver Preisrechner) ─────────────────────────────── */
.pricing{padding:96px 0; background:var(--surface); border-top:1px solid var(--border);}
.calc{margin-top:48px;}
.calc [hidden]{display:none !important;}

/* Zahlungsweise-Schalter Monatlich/Jährlich + Spar-Hinweis */
.calc__billing{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:28px;}
.billing-seg{display:inline-flex; background:var(--surface-muted); border:1px solid var(--border); border-radius:var(--radius-full); padding:4px; gap:2px;}
.billing-seg button{font-size:14px; font-weight:600; color:var(--fg-muted); padding:8px 20px; border-radius:var(--radius-full); transition:color .2s, background .2s; white-space:nowrap;}
.billing-seg button:hover{color:var(--fg);}
.billing-seg button.on{background:var(--zebra-cyan); color:#fff; box-shadow:var(--shadow-sm);}
.billing-save{display:inline-flex; align-items:center; font-size:13px; font-weight:700; color:var(--zebra-cyan); background:var(--zebra-cyan-100); border-radius:var(--radius-full); padding:7px 14px; white-space:nowrap;}

/* Staffel-Auswahl */
.calc__offers{display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 auto 28px; padding:14px 22px; max-width:760px; background:var(--zebra-cyan-50); border:1px solid var(--zebra-cyan-100); border-radius:var(--radius-xl); font-size:15px; color:var(--fg); text-align:center;}
.calc__offers-badge{flex:none; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:var(--radius-full); background:var(--zebra-cyan); color:#fff; font-size:13px; font-weight:800;}
.calc__offers a{color:var(--zebra-cyan-700); font-weight:600; text-decoration:none;}
.calc__offers a:hover{text-decoration:underline;}
.calc__sizes{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;}
.calc__sizes-label{font-size:14px; font-weight:700; color:var(--fg-muted);}
.calc__seg{display:inline-flex; flex-wrap:wrap; justify-content:center; background:var(--surface-muted); border:1px solid var(--border); border-radius:var(--radius-full); padding:4px; gap:2px;}
.calc__seg button{font-size:14px; font-weight:600; color:var(--fg-muted); padding:7px 16px; border-radius:var(--radius-full); transition:color .2s, background .2s;}
.calc__seg button:hover{color:var(--fg);}
.calc__seg button.on{background:var(--zebra-cyan); color:#fff; box-shadow:var(--shadow-sm);}

/* Modul-Karten als Toggles */
.calc__grid{margin-top:28px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch;}
.mcard{
  position:relative; display:flex; flex-direction:column; gap:6px; text-align:left;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:20px; cursor:pointer; box-shadow:var(--shadow-sm); user-select:none;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.mcard:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.mcard.on{border-color:var(--zebra-cyan); box-shadow:0 0 0 1px var(--zebra-cyan), var(--shadow-md);}
.mcard__check{position:absolute; top:14px; right:14px; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--border-strong); background:var(--surface); display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s;}
.mcard__check svg{width:12px; height:12px; color:#fff; opacity:0; transition:opacity .2s;}
.mcard.on .mcard__check{background:var(--zebra-cyan); border-color:var(--zebra-cyan);}
.mcard.on .mcard__check svg{opacity:1;}
.mcard__ic{width:38px; height:38px; border-radius:10px; background:var(--zebra-cyan-100); display:flex; align-items:center; justify-content:center;}
.mcard__ic svg{width:20px; height:20px; color:var(--zebra-cyan);}
.mcard__name{margin-top:6px; padding-right:24px; font-size:15px; font-weight:700; line-height:1.3;}
.mcard__desc{font-size:13px; color:var(--fg-muted); line-height:1.45; flex:1;}
.mcard__price{margin-top:10px; display:flex; flex-direction:column; gap:2px;}
.mcard__nums{display:inline-flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.mcard__was{font-size:14px; font-weight:600; color:var(--fg-subtle); text-decoration:line-through; font-variant-numeric:tabular-nums; white-space:nowrap;}
.mcard__num{font-size:20px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap;}
.mcard__per{font-size:12px; color:var(--fg-muted); font-weight:600; line-height:1.35;}

/* Nutzer-Stepper (Projektberichte / Azubi-Tool) */
.mcard__count{margin-top:10px; padding-top:12px; border-top:1px dashed var(--border); display:none; align-items:center; justify-content:space-between; gap:10px;}
.mcard.on .mcard__count{display:flex;}
.mcard__count-label{font-size:12px; font-weight:600; color:var(--fg-muted); line-height:1.3;}
.stepper{display:inline-flex; align-items:center; gap:2px; background:var(--surface-muted); border:1px solid var(--border); border-radius:var(--radius-full); padding:2px; flex:none;}
.stepper__btn{width:26px; height:26px; border-radius:50%; font-size:16px; font-weight:700; color:var(--fg-muted); display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s;}
.stepper__btn:hover{background:var(--zebra-cyan); color:#fff;}
.stepper__btn:disabled{opacity:.35; pointer-events:none;}
.stepper__val{min-width:26px; text-align:center; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;}

/* KI-Karte, solange Projektberichte/Azubi fehlen */
.mcard--locked{opacity:.55; cursor:not-allowed;}
.mcard--locked:hover{transform:none; box-shadow:var(--shadow-sm);}
.mcard__lock{display:none; margin-top:10px; padding-top:12px; border-top:1px dashed var(--border); font-size:12px; font-weight:600; color:var(--fg-subtle);}
.mcard--locked .mcard__lock{display:block;}

/* „40+" → individuelles Angebot */
.calc__contact{margin-top:28px; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:48px 32px; box-shadow:var(--shadow-sm);}
.calc__contact-ic{width:52px; height:52px; margin:0 auto 16px; border-radius:14px; background:var(--zebra-cyan-100); display:flex; align-items:center; justify-content:center;}
.calc__contact-ic svg{width:26px; height:26px; color:var(--zebra-cyan);}
.calc__contact h3{font-size:22px; font-weight:800; letter-spacing:-.01em;}
.calc__contact p{margin:10px auto 22px; font-size:15px; color:var(--fg-muted); max-width:420px; line-height:1.55;}

/* Summen-Karte */
.calc__summary{margin:28px auto 0; max-width:560px; background:var(--surface); border-radius:18px; padding:28px 30px; box-shadow:0 0 0 1px var(--zebra-cyan), var(--shadow-lg);}
.calc__sum-head{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted);}
.calc__items{margin-top:14px; display:flex; flex-direction:column; gap:8px;}
.calc__items li{display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:14px; font-weight:500;}
.calc__items .amt{font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums;}
.calc__min{margin-top:14px; font-size:14px; font-weight:600; color:var(--fg-muted);}
.calc__totals{margin-top:16px; padding-top:16px; border-top:1px solid var(--border);}
.calc__month{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.calc__month .was{font-size:20px; font-weight:600; color:var(--fg-subtle); text-decoration:line-through; font-variant-numeric:tabular-nums;}
.calc__month .num{font-size:38px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums;}
.calc__month .per{font-size:14px; color:var(--fg-muted); font-weight:600;}
.calc__year{margin-top:2px; font-size:14px; color:var(--fg-muted); font-weight:600; font-variant-numeric:tabular-nums;}
.calc__year .was{text-decoration:line-through; color:var(--fg-subtle);}
.calc__summary .btn{margin-top:20px;}
.calc__term{margin-top:12px; text-align:center; font-size:12px; font-weight:600; color:var(--fg-subtle); line-height:1.4;}
.pricing__note{margin-top:28px; text-align:center; font-size:14px; color:var(--fg-muted);}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq{padding:96px 0; background:var(--app-bg); border-top:1px solid var(--border);}
.faq__wrap{display:grid; grid-template-columns:0.8fr 1.2fr; gap:48px; align-items:start;}
.faq__list{display:flex; flex-direction:column; gap:12px;}
.fitem{background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; transition:box-shadow .2s, border-color .2s;}
.fitem.open{box-shadow:var(--shadow-md); border-color:var(--zebra-cyan-100);}
.fitem__q{width:100%; display:flex; align-items:center; gap:16px; padding:20px 22px; text-align:left; font-size:16px; font-weight:700; color:var(--fg);}
.fitem__q .ico{margin-left:auto; flex:none; width:24px; height:24px; border-radius:50%; background:var(--surface-muted); display:flex; align-items:center; justify-content:center; transition:transform .25s, background .2s;}
.fitem__q .ico svg{width:15px; height:15px; color:var(--fg-muted);}
.fitem.open .fitem__q .ico{background:var(--zebra-cyan); transform:rotate(180deg);}
.fitem.open .fitem__q .ico svg{color:#fff;}
.fitem__a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.fitem__a p{padding:0 22px 22px; font-size:15px; color:var(--fg-muted); line-height:1.6;}

/* ── FINAL CTA ───────────────────────────────────────────────────────── */
.cta{padding:96px 0;}
.cta__box{
  position:relative; overflow:hidden; border-radius:28px; padding:64px 56px;
  background:linear-gradient(135deg, var(--zebra-cyan) 0%, var(--zebra-cyan-700) 100%);
  color:#fff; box-shadow:var(--shadow-xl);
}
.cta__box::before{content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgb(255 255 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .07) 1px, transparent 1px);
  background-size:40px 40px; mask-image:radial-gradient(700px 400px at 80% 0%, #000, transparent 70%); -webkit-mask-image:radial-gradient(700px 400px at 80% 0%, #000, transparent 70%);}
.cta__inner{position:relative; z-index:1; display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center;}
.cta h2{font-size:clamp(30px,3.6vw,44px); font-weight:800; letter-spacing:-.02em; line-height:1.08; text-wrap:balance;}
.cta p{margin-top:16px; font-size:18px; color:rgb(255 255 255 / .9); line-height:1.6; max-width:480px;}
.cta__actions{display:flex; flex-direction:column; gap:12px;}
.cta__actions .btn{width:100%;}
.cta__note{font-size:13px; color:rgb(255 255 255 / .85); display:flex; align-items:center; gap:8px; justify-content:center;}
.cta__note svg{width:15px; height:15px;}

/* mobile-only mid-page CTA between sections */
.midcta{display:none; justify-content:center; padding:34px 24px; background:var(--app-bg);}
.midcta--after-ba{padding-top:52px;}

/* desktop pricing: summary follows the scroll next to the module grid */
@media (min-width:961px){
  .calc{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start;}
  .calc__billing{grid-column:1 / -1;}
  .calc__offers{grid-column:1 / -1;}
  .calc__sizes{grid-column:1 / -1;}
  .calc__grid{grid-template-columns:repeat(3,1fr); margin-top:0;}
  .calc__contact{grid-column:1 / -1; margin-top:0;}
  .calc__summary{position:sticky; top:calc(var(--nav-h) + 16px); margin:0; max-width:none;}
}

/* ── Responsive (sections) ───────────────────────────────────────────── */
@media (max-width:960px){
  .midcta{display:flex;}
  /* features: previews collapsed behind the toggle once cards stack */
  .feat__toggle{display:inline-flex;}
  .feat__visual{display:none;}
  .feat--open .feat__visual{display:block;}
  .hero__inner{grid-template-columns:1fr !important; text-align:center; justify-items:center;}
  .hero__copy{width:100%; max-width:680px;}
  .hero__lead{margin-left:auto; margin-right:auto;}
  .hero__cta,.hero__trust,.hero__eyebrow-wrap{justify-content:center;}
  .hero__visual{width:100%; max-width:720px; margin-top:24px; transform:none !important;}
  [data-hero-layout="c"] .hero__visual{transform:none !important;}
  /* keep the floating cards from spilling past the screen edge once the hero
     visual is full-width */
  .hero__float--a{left:-8px;}
  .hero__float--b{right:-8px;}
  .feat--wide,.feat--tall,.feat--third{grid-column:span 12 !important;}
  .mod-grid{grid-template-columns:1fr 1fr;}
  .tgrid{grid-template-columns:1fr;}
  .calc__grid{grid-template-columns:repeat(2,1fr);}
  .faq__wrap{grid-template-columns:1fr; gap:28px;}
  .cta__inner{grid-template-columns:1fr; text-align:center;}
  .cta p{margin-left:auto; margin-right:auto;}
  .metrics{grid-template-columns:repeat(2,1fr); gap:32px 24px;}
  .metrics .metric:nth-child(3){border-left:0;}
}
@media (max-width:560px){
  .hero__float{display:none;}
  .carousel-dots{bottom:-30px;}   /* floats hidden — dots sit tight under the mock again */
  /* compact hero: smaller type, tighter spacing, no dead bottom area */
  .hero{padding-top:calc(var(--nav-h) + 30px); padding-bottom:48px;}
  .hero h1{font-size:27px;}
  .hero__lead{margin-top:14px; font-size:15px;}
  .hero__cta{margin-top:22px;}
  .hero__cta .btn--lg{height:48px; padding:0 22px; font-size:15px;}
  .hero__cta .btn--outline{display:none;}     /* sekundärer CTA fliegt auf Mobile raus */
  .hero__inner{gap:18px;}
  .hero__visual{margin-top:0;}
  /* Trust-Zeile als durchlaufender Ticker statt drei Zeilen */
  .hero__trust{margin-top:16px; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
  .hero__trust-track{flex-wrap:nowrap; gap:0; width:max-content; animation:trustTicker 18s linear infinite;}
  .hero__trust .trust-item{margin-right:34px; white-space:nowrap; font-size:12px;}
  .hero__trust .trust-item--dup{display:inline-flex;}
  /* mock window: let the week grid shrink instead of clipping at the edge */
  .slide__head{flex-wrap:wrap; gap:6px;}
  .slide__t{font-size:14px;}
  .week{grid-template-columns:auto repeat(5,minmax(0,1fr)); gap:4px;}
  .week .nm{font-size:10px;}
  .bar{font-size:8.5px; padding:0 3px; height:22px;}
  .week .cell{height:22px;}
  .miniapp__main{padding:12px;}
  .miniapp{grid-template-columns:50px minmax(0,1fr);}
  .punch__time{font-size:26px;}
  .punch__btn{height:36px; padding:0 12px; font-size:13px;}
  .report__ph{width:38px; height:38px;}
  .chat__bubble{max-width:90%;}
  /* flacheres App-Fenster: den Tagesbericht einkürzen */
  .slide .report__sec + .report__sec{display:none;}    /* Tagesbericht: ohne zweiten Absatz */
  .slide .report__photos{margin-top:8px;}
  /* kompaktere Sektionsabstände: 96px-Paddings summieren sich auf Mobile */
  .features,.modules,.pricing,.faq,.cta{padding:52px 0;}
  .ba{padding:52px 0 0;}
  .midcta{padding:8px 24px 30px;}
  .midcta--after-ba{padding-top:44px;}
  .feat-grid{margin-top:28px;}
  .calc{margin-top:26px;}
  .pricing__note{margin-top:20px;}
  .metrics{grid-template-columns:1fr 1fr;}
  .metrics .metric + .metric{border-left:0;}
  .cta__box{padding:40px 26px;}
  .feat{padding:22px;}
  .mod-grid{grid-template-columns:1fr;}
  .calc__grid{grid-template-columns:1fr;}
  .calc__summary{padding:24px 20px;}
  /* Staffel-Auswahl: aus der Pille wird ein 3×2-Chip-Raster */
  .calc__sizes{flex-direction:column; gap:10px;}
  .calc__seg{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; max-width:360px; background:none; border:0; padding:0;}
  .calc__seg button{padding:12px 0; text-align:center; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-sm);}
  .calc__seg button.on{border-color:var(--zebra-cyan);}
  /* finger-friendly touch targets (Apple HIG: ~44pt) */
  .stepper__btn{width:36px; height:36px;}
  .stepper__val{min-width:32px;}
  .footer__col a{padding:10px 0;}
  /* Video-Popup: enger an die Viewport-Ränder, Close-Button näher heran */
  .vmodal{padding:16px;}
  .vmodal__close{top:-8px; right:-8px; width:38px; height:38px;}
}

/* ── Legal pages (Nutzungsbedingungen etc.) ──────────────────────────── */
.legal-head{border-bottom:1px solid var(--border); background:var(--surface);}
.legal-head__in{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;}
.legal-head__in img{height:34px;}
.legal{padding:64px 0 96px; background:var(--surface);}
.legal .wrap{max-width:820px;}
.legal h1{font-size:clamp(30px,4vw,40px); font-weight:800; letter-spacing:-.02em;}
.legal h2{font-size:26px; font-weight:800; letter-spacing:-.01em; margin-top:64px; padding-top:40px; border-top:1px solid var(--border);}
.legal h3{font-size:18px; font-weight:700; margin-top:36px;}
.legal h4{font-size:15px; font-weight:700; margin-top:24px;}
.legal p{margin-top:10px; font-size:15px; line-height:1.7;}
.legal .legal__meta{color:var(--fg-muted); font-size:14px;}
.legal ol{margin:10px 0 0 26px;}
.legal ol li{margin-top:6px; font-size:15px; line-height:1.7; padding-left:4px;}
.legal .legal__list{margin:10px 0 0 26px; list-style:disc;}
.legal .legal__list li{margin-top:6px; font-size:15px; line-height:1.7;}
.legal-foot{padding:28px 0;}
.legal-foot .footer__bottom{margin-top:0; padding-top:0; border-top:0;}

/* ── Video-Popup (Geschichte von Meister Müller) ─────────────────────── */
.vmodal{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px;}
.vmodal[hidden]{display:none;}
.vmodal__backdrop{position:absolute; inset:0; background:rgba(11,18,32,.82); backdrop-filter:blur(4px); animation:vmodalFade .2s ease;}
.vmodal__dialog{position:relative; z-index:1; display:flex; justify-content:center; align-items:center; width:min(960px,100%); max-height:calc(100dvh - 48px); animation:vmodalPop .22s ease;}
.vmodal__video{width:100%; max-height:calc(100dvh - 48px); border-radius:var(--radius-xl); background:#000; box-shadow:var(--shadow-xl); display:block;}
/* Hochkant-Fassung: Höhe begrenzt, Breite folgt dem 9:16-Verhältnis */
.vmodal__video--portrait{width:auto; max-width:100%; aspect-ratio:9/16;}
.vmodal__close{position:absolute; top:-14px; right:-14px; z-index:2; width:42px; height:42px; border-radius:50%; background:#fff; color:var(--fg); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); cursor:pointer; transition:.15s;}
.vmodal__close:hover{background:var(--surface-muted); transform:scale(1.05);}
.vmodal__close svg{width:20px; height:20px;}
body.vmodal-open{overflow:hidden;}
@keyframes vmodalFade{from{opacity:0;}}
@keyframes vmodalPop{from{opacity:0; transform:scale(.96);}}

/* trust ticker loop: track holds two identical sets, so -50% is seamless */
@keyframes trustTicker{to{transform:translateX(-50%);}}
@media (max-width:560px) and (prefers-reduced-motion:reduce){
  .hero__trust{-webkit-mask-image:none; mask-image:none;}
  .hero__trust-track{animation:none; flex-wrap:wrap; gap:6px 14px; width:auto;}
  .hero__trust .trust-item{margin-right:0; white-space:normal;}
  .hero__trust .trust-item--dup{display:none;}
}