/* =====================================================================
   mnjam.mnjam — Home v2: Animationen & Visualisierungen (hell & pop)
   ===================================================================== */

/* ---------------------------------------------------------------------
   HERO — drei driftende Farb-Blobs + Wort-Reveal
   --------------------------------------------------------------------- */
.hero{ isolation:isolate; }
.hero__blobs{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.hero__blob{ position:absolute; border-radius:50%; filter: blur(60px); opacity:0.55; }
.hero__blob.b1{ width:42vw; max-width:520px; aspect-ratio:1; background: var(--coral); top:-12%; right:4%; animation: drift1 16s ease-in-out infinite; }
.hero__blob.b2{ width:34vw; max-width:420px; aspect-ratio:1; background: var(--green); top:30%; right:24%; animation: drift2 19s ease-in-out infinite; }
.hero__blob.b3{ width:30vw; max-width:380px; aspect-ratio:1; background: var(--yellow); top:-6%; right:30%; animation: drift3 22s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-30px,30px) scale(1.08); } }
@keyframes drift2{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(30px,-20px) scale(1.12); } }
@keyframes drift3{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-20px,-30px) scale(0.92); } }

/* Word-by-word reveal */
.hero h1 .w{ display:inline-block; opacity:0; transform: translateY(0.4em); animation: wordIn .6s var(--ease-pop) forwards; }
.hero h1 .w em{ font-style:normal; color: var(--coral); }
@keyframes wordIn{ to{ opacity:1; transform:none; } }

.hero .lede, .hero__actions, .hero__note{ opacity:0; transform: translateY(14px); animation: heroUp .6s var(--ease) forwards; }
.hero .lede{ animation-delay:.5s; }
.hero__actions{ animation-delay:.62s; }
.hero__note{ animation-delay:.74s; }
@keyframes heroUp{ to{ opacity:1; transform:none; } }

.hero__scroll{ display:flex; align-items:center; gap:10px; margin-top:34px; font-size:0.74rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color: var(--ink-3); opacity:0; animation: heroUp .6s var(--ease) .9s forwards; }
.hero__scroll i{ display:block; width:2px; height:30px; border-radius:2px; background: var(--line); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; top:-30px; left:0; width:2px; height:30px; background: var(--coral); animation: scrollDot 1.7s var(--ease) infinite; }
@keyframes scrollDot{ to{ transform: translateY(60px); } }

/* ---------------------------------------------------------------------
   REVENUE CALCULATOR — hell & pop
   --------------------------------------------------------------------- */
.calc{ border:2px solid var(--ink); border-radius: var(--radius-lg); background: var(--card); overflow:hidden; box-shadow: var(--shadow); }
.calc__grid{ display:grid; grid-template-columns: 0.95fr 1.05fr; }
@media (max-width: 900px){ .calc__grid{ grid-template-columns:1fr; } }
.calc__controls{ padding: clamp(28px,4vw,44px); border-right:2px solid var(--line); }
@media (max-width: 900px){ .calc__controls{ border-right:0; border-bottom:2px solid var(--line); } }

.calc__slider{ margin-bottom: 30px; }
.calc__slider:last-child{ margin-bottom:0; }
.calc__slider-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.calc__slider-label{ font-size:0.96rem; font-weight:600; color: var(--ink); }
.calc__slider-val{ font-family: var(--font-display); font-weight:800; font-size:1.7rem; color: var(--coral); letter-spacing:-0.03em; }
.calc__slider-val span{ font-size:0.55em; color: var(--ink-2); margin-left:2px; }

input[type="range"].rng{
  -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:8px;
  background: linear-gradient(90deg, var(--coral) var(--fill,40%), var(--line) var(--fill,40%));
  outline:none; cursor:pointer;
}
input[type="range"].rng::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%;
  background:#fff; border:4px solid var(--coral); box-shadow: var(--shadow-sm); transition: transform .15s var(--ease-pop); margin-top:-1px;
}
input[type="range"].rng::-webkit-slider-thumb:hover{ transform: scale(1.18); }
input[type="range"].rng::-moz-range-thumb{ width:26px; height:26px; border-radius:50%; background:#fff; border:4px solid var(--coral); box-shadow: var(--shadow-sm); cursor:pointer; }
.calc__hint{ font-size:0.82rem; color: var(--ink-3); margin-top:9px; }

.calc__result{ padding: clamp(28px,4vw,44px); display:flex; flex-direction:column; justify-content:center; background: var(--bg-tint); }
.calc__formula-mini{ font-weight:700; font-size:0.82rem; color: var(--ink-2); display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-bottom:20px; text-transform:uppercase; letter-spacing:0.03em; }
.calc__formula-mini b{ color: var(--ink); }
.calc__formula-mini .op{ color: var(--coral); }
.calc__big-label{ font-weight:700; font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase; color: var(--ink-3); }
.calc__big{ font-family: var(--font-display); font-weight:800; font-size: clamp(2.6rem,5.5vw,3.8rem); line-height:1; color: var(--ink); margin: 6px 0 4px; letter-spacing:-0.04em; }
.calc__big .cur{ color: var(--coral); }
.calc__sub{ font-size:0.94rem; color: var(--ink-2); }
.calc__sub b{ color: var(--green-deep); font-weight:700; }

.calc__bars{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.calc__bar-head{ display:flex; justify-content:space-between; font-size:0.86rem; font-weight:600; color: var(--ink-2); margin-bottom:7px; }
.calc__bar-head .amt{ font-weight:800; color: var(--ink); }
.calc__track{ height:16px; border-radius: var(--radius-pill); background:#fff; border:1px solid var(--line); overflow:hidden; }
.calc__fill{ height:100%; border-radius: var(--radius-pill); width:0; transition: width .6s var(--ease-pop); }
.calc__fill--now{ background: var(--ink-3); }
.calc__fill--opt{ background: linear-gradient(90deg, var(--coral), var(--yellow)); }
.calc__delta{ margin-top:16px; font-size:0.9rem; color: var(--ink-2); }
.calc__delta b{ color: var(--coral-deep); font-weight:800; }
.calc__disclaimer{ margin-top:18px; font-size:0.76rem; color: var(--ink-3); }

/* ---------------------------------------------------------------------
   GHOST KITCHEN WORKFLOW — selbstzeichnende Linie (frisch)
   --------------------------------------------------------------------- */
.flow{ position:relative; }
.flow svg{ width:100%; height:auto; display:block; overflow:visible; }
.flow .flow-line{ fill:none; stroke: var(--coral); stroke-width:3; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition: stroke-dashoffset 2.2s var(--ease); }
.flow .flow-node{ opacity:0; transition: opacity .5s var(--ease); }
.flow.is-drawn .flow-node{ opacity:1; }
.flow__labels{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-top:24px; }
@media (max-width:640px){ .flow__labels{ grid-template-columns: repeat(2,1fr); } }
.flow__label{ opacity:0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease-pop); }
.flow.is-drawn .flow__label{ opacity:1; transform:none; }
.flow.is-drawn .flow__label:nth-child(1){ transition-delay:.3s; }
.flow.is-drawn .flow__label:nth-child(2){ transition-delay:.8s; }
.flow.is-drawn .flow__label:nth-child(3){ transition-delay:1.3s; }
.flow.is-drawn .flow__label:nth-child(4){ transition-delay:1.8s; }
.flow__label .n{ display:inline-block; font-family: var(--font-display); font-weight:800; font-size:1.4rem; color:#fff; background: var(--coral); width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.flow__label:nth-child(2) .n{ background: var(--green); }
.flow__label:nth-child(3) .n{ background: var(--yellow); color: var(--ink); }
.flow__label:nth-child(4) .n{ background: var(--grape); }
.flow__label h4{ font-size:1.08rem; margin:12px 0 5px; }
.flow__label p{ font-size:0.9rem; color: var(--ink-2); }

/* ---------------------------------------------------------------------
   MARGEN-VISUALISIERUNG — "Wohin fließt 1 € Umsatz?"
   --------------------------------------------------------------------- */
.margin__bar{ display:flex; height:74px; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); }
.margin__seg{ width:0; transition: width 1s var(--ease-pop); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.95rem; color:#fff; white-space:nowrap; overflow:hidden; }
.margin.is-shown .margin__seg{ width: var(--w); }
.margin__seg--ware{ background: var(--coral); }
.margin__seg--personal{ background: var(--green); }
.margin__seg--fix{ background: var(--grape); }
.margin__seg--gewinn{ background: var(--yellow); color: var(--ink); }
.margin__legend{ display:flex; flex-wrap:wrap; gap:18px; margin-top:22px; }
.margin__leg{ display:flex; align-items:center; gap:8px; font-size:0.9rem; font-weight:500; color: var(--ink-2); }
.margin__dot{ width:13px; height:13px; border-radius:4px; }
.margin__cap{ margin-top:10px; }

/* ---------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .hero__blob{ animation:none; }
  .hero h1 .w, .hero .lede, .hero__actions, .hero__note, .hero__scroll{ opacity:1 !important; transform:none !important; animation:none !important; }
  .hero__scroll i::after{ animation:none; }
  .flow .flow-line{ stroke-dashoffset:0 !important; transition:none; }
  .flow .flow-node, .flow__label{ opacity:1 !important; transform:none !important; }
  .calc__fill, .margin__seg{ transition:none; }
}

/* ---------------------------------------------------------------------
   HERO — verlinkte Branchen-Zeile
   --------------------------------------------------------------------- */
.hero__note a{ color: var(--ink-2); font-weight:600; border-bottom:2px solid transparent; transition: color .18s var(--ease), border-color .18s var(--ease); }
.hero__note a:hover{ color: var(--coral); border-bottom-color: var(--coral); }

/* ---------------------------------------------------------------------
   HERO — Live-Umsatz-Dashboard (rechte Spalte)
   --------------------------------------------------------------------- */
.hero__viz{ perspective: 1100px; }
.liveboard{
  position:relative; background: var(--card); border:2px solid var(--ink); border-radius: var(--radius-lg);
  padding: 22px 24px 24px; box-shadow: var(--shadow);
  transform-style: preserve-3d; transition: transform .35s var(--ease);
  background-image: radial-gradient(rgba(27,26,22,0.05) 1.1px, transparent 1.1px);
  background-size: 18px 18px; overflow:hidden;
}
.liveboard__glow{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s var(--ease);
  background: radial-gradient(280px circle at var(--mx,50%) var(--my,30%), rgba(255,90,54,0.16), transparent 60%); }
.liveboard:hover .liveboard__glow{ opacity:1; }
.liveboard__inner{ position:relative; transform: translateZ(32px); }
.liveboard__head{ display:flex; justify-content:space-between; align-items:center; }
.liveboard__tag{ font-weight:800; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--ink-3); }
.liveboard__live{ display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color: var(--coral); }
.liveboard__live i{ width:8px; height:8px; border-radius:50%; background: var(--coral); animation: lbPulse 1.8s infinite; }
@keyframes lbPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,90,54,0.55);} 70%{ box-shadow:0 0 0 9px rgba(255,90,54,0);} 100%{ box-shadow:0 0 0 0 rgba(255,90,54,0);} }
.liveboard__big{ font-family: var(--font-display); font-weight:800; font-size: clamp(2.2rem,4vw,3rem); line-height:1; color: var(--ink); margin-top:16px; letter-spacing:-0.035em; }
.liveboard__big .cur{ color: var(--coral); }
.liveboard__sub{ font-size:0.82rem; color: var(--ink-3); margin-top:7px; }
.liveboard__spark{ width:100%; height:74px; margin:14px 0 6px; display:block; cursor: crosshair; }
.liveboard__spark #lbHit{ touch-action:none; }
.liveboard__spark.is-scrub #lbLine{ stroke-width:3; }
.liveboard__formula{ display:flex; align-items:stretch; gap:8px; margin-top:8px; }
.lbtile{ flex:1; background:#fff; border:2px solid var(--line); border-radius: var(--radius-sm); padding:11px 8px; display:flex; flex-direction:column; gap:3px; align-items:center; cursor:pointer; transition: transform .18s var(--ease-pop), border-color .18s var(--ease), background .18s var(--ease); }
.lbtile:hover{ border-color: var(--coral); background: var(--coral-soft); transform: translateY(-3px); }
.lbtile__l{ font-size:0.66rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color: var(--ink-3); }
.lbtile__v{ font-family: var(--font-display); font-weight:800; font-size:1.12rem; color: var(--ink); }
.lbx{ align-self:center; color: var(--coral); font-weight:800; font-size:1.05rem; }

@media (prefers-reduced-motion: reduce){
  .liveboard{ transform:none !important; }
  .liveboard__live i{ animation:none; }
}

/* ---------------------------------------------------------------------
   GHOST-KITCHEN HERO — Live-Bestellfeed
   --------------------------------------------------------------------- */
.orderboard{
  position:relative; background:var(--card); border:2px solid var(--ink); border-radius:var(--radius-lg);
  padding:22px 24px 24px; box-shadow:var(--shadow); transform-style:preserve-3d; transition:transform .35s var(--ease);
  background-image: radial-gradient(rgba(27,26,22,0.05) 1.1px, transparent 1.1px); background-size:18px 18px; overflow:hidden;
}
.orderboard__glow{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s var(--ease);
  background: radial-gradient(280px circle at var(--mx,50%) var(--my,30%), rgba(255,90,54,0.16), transparent 60%); }
.orderboard:hover .orderboard__glow{ opacity:1; }
.orderboard__inner{ position:relative; transform: translateZ(30px); }
.orderboard__head{ display:flex; justify-content:space-between; align-items:center; }
.orderboard__tag{ font-weight:800; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); }
.orderboard__stats{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:14px; }
.orderboard__big{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem,3.4vw,2.5rem); line-height:1; color:var(--ink); letter-spacing:-0.03em; }
.orderboard__big .cur{ color:var(--coral); }
.orderboard__sub{ font-size:0.8rem; color:var(--ink-3); margin-top:7px; }
.orderboard__avg{ text-align:right; }
.orderboard__avg-l{ display:block; font-size:0.64rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-3); }
.orderboard__avg-v{ font-family:var(--font-display); font-weight:800; font-size:1.2rem; color:var(--green-deep); }
.orderboard__feed{ list-style:none; margin:16px 0 16px; display:flex; flex-direction:column; gap:8px; min-height:204px; }
.orderboard__row{ display:flex; align-items:center; gap:11px; padding:10px 12px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; transition:border-color .18s var(--ease); animation: obIn .45s var(--ease-pop); }
.orderboard__row:hover{ border-color:var(--coral); }
@keyframes obIn{ from{ opacity:0; transform: translateY(-12px) scale(.97);} to{ opacity:1; transform:none; } }
.orderboard__dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.orderboard__dishwrap{ flex:1; display:flex; flex-direction:column; min-width:0; }
.orderboard__dish{ font-weight:600; font-size:0.9rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.orderboard__chan{ font-size:0.7rem; font-weight:500; color:var(--ink-3); margin-top:1px; }
.orderboard__price{ font-family:var(--font-display); font-weight:800; font-size:0.98rem; color:var(--ink); white-space:nowrap; }
.orderboard__margin-head{ display:flex; justify-content:space-between; font-size:0.78rem; font-weight:600; color:var(--ink-2); margin-bottom:7px; }
.orderboard__margin-head span:last-child{ font-weight:800; color:var(--green-deep); }
.orderboard__margin-track{ height:10px; border-radius:var(--radius-pill); background:#fff; border:1px solid var(--line); overflow:hidden; }
.orderboard__margin-fill{ height:100%; width:28%; border-radius:var(--radius-pill); background:linear-gradient(90deg,var(--green),var(--green-deep)); transition:width .6s var(--ease-pop); }
@media (prefers-reduced-motion: reduce){ .orderboard{ transform:none !important; } .orderboard__row{ animation:none; } }

/* ---------------------------------------------------------------------
   LEISTUNGEN HERO — interaktives Betriebs-Cockpit
   --------------------------------------------------------------------- */
.cockpit{
  position:relative; background:var(--card); border:2px solid var(--ink); border-radius:var(--radius-lg);
  padding:22px 24px 22px; box-shadow:var(--shadow); transform-style:preserve-3d; transition:transform .35s var(--ease);
  background-image: radial-gradient(rgba(27,26,22,0.05) 1.1px, transparent 1.1px); background-size:18px 18px; overflow:hidden;
}
.cockpit__glow{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s var(--ease);
  background: radial-gradient(280px circle at var(--mx,50%) var(--my,30%), rgba(255,90,54,0.16), transparent 60%); }
.cockpit:hover .cockpit__glow{ opacity:1; }
.cockpit__inner{ position:relative; transform: translateZ(28px); }
.cockpit__head{ display:flex; justify-content:space-between; align-items:center; }
.cockpit__tag{ font-weight:800; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); }
.cockpit__count{ font-weight:800; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--coral); }
.cockpit__top{ display:flex; align-items:center; gap:20px; margin-top:16px; }

.gauge{ position:relative; width:118px; height:118px; flex:none; }
.gauge svg{ width:100%; height:100%; display:block; }
.gauge__track{ fill:none; stroke:var(--line); stroke-width:11; }
.gauge__fill{ fill:none; stroke:var(--coral); stroke-width:11; stroke-linecap:round; transition: stroke-dashoffset .7s var(--ease-pop), stroke .3s var(--ease); }
.gauge__center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gauge__val{ font-family:var(--font-display); font-weight:800; font-size:1.8rem; line-height:1; color:var(--ink); letter-spacing:-0.03em; }
.gauge__unit{ font-family:var(--font-display); font-weight:800; font-size:0.85rem; color:var(--coral); margin-top:-2px; }
.gauge__lbl{ font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-3); margin-top:4px; }

.cockpit__profit{ min-width:0; }
.cockpit__profit-lbl{ font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-3); }
.cockpit__profit-val{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem,3.2vw,2.2rem); line-height:1; color:var(--ink); margin-top:5px; letter-spacing:-0.03em; }
.cockpit__profit-val .cur{ color:var(--coral); }
.cockpit__mini{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-size:0.82rem; color:var(--ink-2); }
.cockpit__mini b{ font-weight:800; color:var(--ink); }

.cockpit__levers{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.lever{ font-family:var(--font-body); font-weight:700; font-size:0.8rem; padding:8px 14px; border-radius:var(--radius-pill);
  border:2px solid var(--line); background:#fff; color:var(--ink-2); cursor:pointer; transition: all .18s var(--ease-pop); display:inline-flex; align-items:center; gap:7px; }
.lever::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--line); transition: background .18s var(--ease); }
.lever:hover{ border-color:var(--coral); color:var(--ink); transform:translateY(-2px); }
.lever.is-on{ background:var(--coral); border-color:var(--coral); color:#fff; box-shadow:var(--shadow-coral); }
.lever.is-on::before{ background:#fff; }
.cockpit__note{ font-size:0.74rem; color:var(--ink-3); margin-top:16px; }

@media (prefers-reduced-motion: reduce){ .cockpit{ transform:none !important; } }

/* ---------------------------------------------------------------------
   STARTSEITE — Leistungsbereiche als reichere Service-Karten
   --------------------------------------------------------------------- */
.svc-area{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 30px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .25s var(--ease-pop), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.svc-area:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--coral); }
.svc-area__head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.svc-area__icon{ width:48px; height:48px; border-radius:14px; background:var(--coral-soft); color:var(--coral-deep); display:flex; align-items:center; justify-content:center; flex:none; }
.svc-area__icon svg{ width:24px; height:24px; }
.svc-area__label{ font-weight:800; font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-3); }
.svc-area h3{ font-size:1.4rem; margin-bottom:10px; }
.svc-area > p{ color:var(--ink-2); font-size:0.97rem; }
.svc-area:nth-child(2) .svc-area__icon{ background:var(--green-soft); color:var(--green-deep); }
.svc-area:nth-child(2):hover{ border-color:var(--green); }

.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 26px; }
.tags li{ font-size:0.8rem; font-weight:600; color:var(--ink-2); background:var(--bg-tint); border:1px solid var(--line); border-radius:var(--radius-pill); padding:6px 13px; transition:border-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease-pop); }
.tags li:hover{ border-color:var(--coral); color:var(--coral-deep); transform:translateY(-2px); }
.svc-area:nth-child(2) .tags li:hover{ border-color:var(--green); color:var(--green-deep); }
.svc-area .btn-link{ margin-top:auto; align-self:flex-start; }

/* ---------------------------------------------------------------------
   STARTSEITE — Ablauf-Schritte als Karten (statt schwebendem Text)
   --------------------------------------------------------------------- */
.flow__labels{ gap:20px; }
.flow__label{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 20px; box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease-pop), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.flow__label:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--coral); }
.flow__label:nth-child(2):hover{ border-color:var(--green); }
.flow__label:nth-child(3):hover{ border-color:var(--yellow); }
.flow__label:nth-child(4):hover{ border-color:var(--grape); }
.flow__label .n{ box-shadow:var(--shadow-sm); }

/* ---------------------------------------------------------------------
   STARTSEITE — Statistik-Karten (ersetzt die flache KPI-Leiste)
   --------------------------------------------------------------------- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:900px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .stat-grid{ grid-template-columns:1fr; } }
.stat-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 26px; box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease-pop), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.stat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.stat-card__icon{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; background:var(--coral-soft); color:var(--coral-deep); }
.stat-card__icon svg{ width:23px; height:23px; }
.stat-card:nth-child(2) .stat-card__icon{ background:var(--green-soft); color:var(--green-deep); }
.stat-card:nth-child(3) .stat-card__icon{ background:var(--yellow-soft); color:#B57F00; }
.stat-card:nth-child(4) .stat-card__icon{ background:#EAE4FF; color:var(--grape); }
.stat-card:nth-child(1):hover{ border-color:var(--coral); }
.stat-card:nth-child(2):hover{ border-color:var(--green); }
.stat-card:nth-child(3):hover{ border-color:var(--yellow); }
.stat-card:nth-child(4):hover{ border-color:var(--grape); }
.stat-card__value{ font-family:var(--font-display); font-weight:800; font-size:2.6rem; line-height:1; color:var(--ink); letter-spacing:-0.03em; }
.stat-card__label{ margin-top:12px; font-size:0.9rem; color:var(--ink-2); line-height:1.45; }