/* ==========================================================================
   semco CARE · Motion Layer
   Teil 1: core.css des web-motion-blocks-Skills (unverändert übernommen –
           nicht forken, nur die :root-Tokens unten überschreiben).
   Teil 2: Marken-Tokens semco CARE.
   Teil 3: Block-spezifische Styles der drei eingebauten Bausteine.
   Teil 4: Seiten-Reveal – nutzt DIESELBEN Motion-Tokens, damit Seite und
           Bausteine wie aus einem Guss laufen.
   ========================================================================== */

/* ============================================================
   web-motion-blocks · core.css
   The single design-system layer. EVERY block imports this and
   pulls from these tokens, so ten different blocks read as one
   family. Override ONLY the :root token values per brand — never
   fork the structural rules below.
   ============================================================ */

:root{
  /* ---- BRAND TOKENS (override these per project) ---- */
  --wmb-bg-1:#0d1b2a;          /* card background, darkest */
  --wmb-bg-2:#132a3f;          /* card background, lighter corner */
  --wmb-surface:#1f6f8b;       /* primary fill for shapes/bars/states */
  --wmb-surface-2:#2a9d8f;     /* secondary fill (gradients, alt series) */
  --wmb-accent:#f4a259;        /* highlight: active state, key number, pins */
  --wmb-ink:#eaf4ff;           /* primary text on card */
  --wmb-muted:#8fb0c9;         /* secondary text, labels */
  --wmb-stroke:rgba(233,244,255,.85);
  --wmb-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wmb-radius:22px;
  --wmb-shadow:0 24px 60px -20px rgba(0,0,0,.55);

  /* ---- MOTION SPEC (locked — see references/motion-spec.md) ----
     Consistency comes from every block reusing THESE curves and
     rhythm. Change them here once if you want a different feel; do
     not hand-tune per block. */
  --wmb-ease:cubic-bezier(.22,.61,.36,1);   /* the house easing */
  --wmb-dur-in:.7s;                          /* single element entrance */
  --wmb-dur-draw:.85s;                       /* svg path draw-in */
  --wmb-stagger:95ms;                        /* delay between sequential items */
  --wmb-lead:140ms;                          /* delay before the sequence starts */
}

*,*::before,*::after{box-sizing:border-box}

.wmb-card{
  position:relative;
  font-family:var(--wmb-font);
  width:100%;max-width:640px;margin:0 auto;
  background:radial-gradient(120% 120% at 20% 0%, var(--wmb-bg-2), var(--wmb-bg-1) 70%);
  border-radius:var(--wmb-radius);
  padding:28px 26px 22px;
  color:var(--wmb-ink);
  box-shadow:var(--wmb-shadow);
  overflow:hidden;
}
.wmb-card::before{               /* subtle accent glow, ties the family together */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 42% at 85% 8%, color-mix(in srgb, var(--wmb-accent) 16%, transparent), transparent 60%);
}

/* ---- Header ---- */
.wmb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;position:relative;z-index:2;margin-bottom:10px}
.wmb-eyebrow{font-size:12px;letter-spacing:.7px;text-transform:uppercase;color:var(--wmb-accent);font-weight:700;margin:0 0 6px}
.wmb-title{font-size:26px;font-weight:800;line-height:1.05;margin:0}
.wmb-sub{font-size:13.5px;color:var(--wmb-muted);margin:7px 0 0;line-height:1.4;max-width:46ch}

/* ---- Footer / controls ---- */
.wmb-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;position:relative;z-index:2}
.wmb-hint{font-size:12px;color:var(--wmb-muted)}
.wmb-btn{
  appearance:none;border:1px solid color-mix(in srgb, var(--wmb-ink) 22%, transparent);
  background:color-mix(in srgb, var(--wmb-ink) 6%, transparent);
  color:var(--wmb-ink);font-size:12px;font-weight:600;padding:7px 14px;border-radius:999px;cursor:pointer;
  transition:background .2s var(--wmb-ease),border-color .2s var(--wmb-ease);
}
.wmb-btn:hover{background:color-mix(in srgb, var(--wmb-accent) 16%, transparent);border-color:var(--wmb-accent)}

/* ---- Tooltip (shared across map, chart, etc.) ---- */
.wmb-tip{
  position:absolute;pointer-events:none;z-index:6;white-space:nowrap;
  background:color-mix(in srgb, var(--wmb-bg-1) 92%, #000);color:#fff;
  padding:6px 10px;border-radius:9px;font-size:13px;font-weight:600;
  border:1px solid color-mix(in srgb, var(--wmb-accent) 40%, transparent);
  transform:translate(-50%,-130%);opacity:0;transition:opacity .12s var(--wmb-ease);
}
.wmb-tip.on{opacity:1}

/* ============================================================
   MOTION PRIMITIVES  (driven by motion.js adding .wmb-in)
   Blocks only need to add these classes + data attributes; the
   rhythm and easing are inherited from the tokens above.
   ============================================================ */

/* fade + rise, used for cards, list rows, stat tiles */
[data-motion="rise"]{opacity:0;transform:translateY(14px);transition:opacity var(--wmb-dur-in) var(--wmb-ease),transform var(--wmb-dur-in) var(--wmb-ease)}
.wmb-in [data-motion="rise"].wmb-go{opacity:1;transform:none}

/* scale-in, used for pins, badges, rings */
[data-motion="pop"]{opacity:0;transform:scale(.7);transform-box:fill-box;transform-origin:center;transition:opacity .45s var(--wmb-ease),transform .45s var(--wmb-ease)}
.wmb-in [data-motion="pop"].wmb-go{opacity:1;transform:none}

/* grow from a baseline, used for bars (set --wmb-h via inline style) */
[data-motion="grow-y"]{transform:scaleY(0);transform-origin:bottom;transition:transform var(--wmb-dur-in) var(--wmb-ease)}
.wmb-in [data-motion="grow-y"].wmb-go{transform:scaleY(1)}
[data-motion="grow-x"]{transform:scaleX(0);transform-origin:left;transition:transform var(--wmb-dur-in) var(--wmb-ease)}
.wmb-in [data-motion="grow-x"].wmb-go{transform:scaleX(1)}

/* svg path draw-in (motion.js sets dasharray/offset from getTotalLength) */
[data-motion="draw"]{transition:stroke-dashoffset var(--wmb-dur-draw) var(--wmb-ease),fill-opacity var(--wmb-dur-in) var(--wmb-ease) .15s}

/* pulsing marker (for pins / live dots) */
.wmb-pulse{transform-box:fill-box;transform-origin:center;animation:wmb-pulse 2s var(--wmb-ease) infinite}
@keyframes wmb-pulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(3.2);opacity:0}100%{opacity:0}}

/* Respect users who ask for less motion — show the end state instantly. */
@media (prefers-reduced-motion: reduce){
  [data-motion]{transition:none !important;animation:none !important;opacity:1 !important;transform:none !important}
  .wmb-pulse{display:none}
}

/* ==========================================================================
   TEIL 2 · Marken-Tokens semco CARE
   Nur diese Werte weichen vom Skill-Default ab (CI der Live-Seite).
   ========================================================================== */
:root{
  /* STATION – warmer Grund statt Weiß. Der Akzent muss dunkler sein als das
     CI-Lime: #8FCA14 hat auf Weiß nur 1,98:1, #3F7A16 erreicht 5,3:1. */
  --wmb-bg-1:#FFFFFF;
  --wmb-bg-2:#FAF7F0;
  --wmb-surface:#3F7A16;
  --wmb-surface-2:#8FCA14;
  --wmb-accent:#3F7A16;
  --wmb-ink:#1E2419;
  --wmb-muted:#66705E;
  --wmb-stroke:rgba(30,36,25,.85);
  --wmb-font:"Baloo2",system-ui,-apple-system,Arial,sans-serif;
  --wmb-radius:28px;
  --wmb-shadow:0 2px 6px rgba(31,61,11,.05), 0 26px 52px -28px rgba(31,61,11,.5);
}
/* Karte an das Seiten-System angleichen: gleicher Rand wie .card */
.wmb-card{border:0}

/* Bausteine sitzen in der Seite, nicht in einem iframe: etwas Luft nach oben/unten.
   width:100% ist Pflicht – in einer Flex-Spalte schaltet `margin:auto` das
   Strecken ab, und die Karte fällt sonst auf ihre Inhaltsbreite zusammen. */
.wmb-embed{width:100%;margin:0 auto;max-width:660px}

/* ==========================================================================
   TEIL 3 · Block-Styles (kpi-countup, process-timeline, compare-vs)
   ========================================================================== */

/* --- kpi-countup --- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:14px;position:relative;z-index:2;margin-top:6px}
.kpi-tile{background:color-mix(in srgb,var(--wmb-ink) 6%,transparent);border:1px solid color-mix(in srgb,var(--wmb-ink) 12%,transparent);border-radius:16px;padding:18px 16px}
.kpi-tile.accent{background:color-mix(in srgb,var(--wmb-accent) 16%,transparent);border-color:color-mix(in srgb,var(--wmb-accent) 45%,transparent)}
.kpi-num{font-size:34px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi-tile.accent .kpi-num{color:var(--wmb-accent)}
.kpi-cap{font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--wmb-muted);margin-bottom:6px}
.kpi-label{font-size:13px;color:var(--wmb-muted);margin-top:8px;line-height:1.35}

/* --- process-timeline --- */
.pt-list{position:relative;z-index:2;margin-top:8px;padding-left:6px}
.pt-step{display:grid;grid-template-columns:44px 1fr;gap:14px;position:relative;padding-bottom:22px}
.pt-step:last-child{padding-bottom:0}
.pt-rail{position:absolute;left:21px;top:38px;bottom:6px;width:2px;background:color-mix(in srgb,var(--wmb-accent) 55%,transparent);transform-origin:top}
.pt-node{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;background:color-mix(in srgb,var(--wmb-surface) 85%,transparent);border:1px solid color-mix(in srgb,var(--wmb-ink) 20%,transparent);color:var(--wmb-bg-1)}
.pt-step.on .pt-node{background:var(--wmb-accent);color:var(--wmb-bg-1)}
.pt-body h3{margin:9px 0 3px;font-size:16px;font-weight:700}
.pt-body p{margin:0;font-size:13.5px;color:var(--wmb-muted);line-height:1.45}

/* --- compare-vs --- */
.cv-grid{position:relative;z-index:2;margin-top:8px;display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch}
.cv-col{background:color-mix(in srgb,var(--wmb-ink) 6%,transparent);border:1px solid color-mix(in srgb,var(--wmb-ink) 12%,transparent);border-radius:16px;padding:18px 16px}
.cv-col.win{background:color-mix(in srgb,var(--wmb-accent) 15%,transparent);border-color:color-mix(in srgb,var(--wmb-accent) 45%,transparent)}
.cv-h{font-size:15px;font-weight:800;margin:0 0 12px}
.cv-col.win .cv-h{color:#1F3D0B}   /* --wmb-accent kam auf 4,21:1 über der hellgrünen Fläche */
.cv-row{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.4;margin-bottom:10px;color:var(--wmb-ink)}
.cv-row:last-child{margin-bottom:0}
.cv-row .ic{flex:none;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-top:1px}
.cv-row .yes{background:var(--wmb-accent);color:var(--wmb-bg-1)}
.cv-row .no{background:color-mix(in srgb,var(--wmb-ink) 18%,transparent);color:#3F4A39}  /* 3,15:1 mit --wmb-muted */
.cv-mid{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--wmb-muted)}
.cv-vs{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--wmb-bg-1);border:1px solid color-mix(in srgb,var(--wmb-ink) 20%,transparent)}
@media (max-width:559px){
  .cv-grid{grid-template-columns:1fr}
  .cv-mid{padding:2px 0}
}

/* ==========================================================================
   TEIL 4 · Seiten-Reveal
   Bewusst dieselben Tokens wie die Bausteine (--wmb-ease/-dur-in/-stagger),
   damit bestehende Sektionen und neue Motion-Blocks im gleichen Rhythmus
   laufen. Der Startzustand hängt an .rv-on am <html> – das setzt ein
   Inline-Schnipsel im <head>. Ohne JavaScript bleibt also alles sichtbar,
   statt unsichtbar hängenzubleiben.
   ========================================================================== */

.rv-on [data-rv]{
  opacity:0;
  transform:translateY(28px) scale(.985);
  transition:opacity var(--wmb-dur-in) var(--wmb-ease),
             transform var(--wmb-dur-in) var(--wmb-ease);
  will-change:opacity,transform;
}
.rv-on [data-rv].rv-go{opacity:1;transform:none;will-change:auto}

/* Bild-/Medienblöcke kommen etwas ruhiger und aus der Tiefe */
.rv-on [data-rv="media"]{transform:translateY(34px) scale(.955)}

/* Hero: NUR Transform, keine Opazität. Der Text malt sofort, damit die
   LCP-Messung (und der 670-ms-Load) nicht durch eine Einblendung verzögert
   wird – Motion-Spec: über dem Falz nicht scroll-triggern. */
.rv-on [data-rv="hero"]{opacity:1;transform:translateY(30px)}
.rv-on [data-rv="hero"].rv-go{transform:none}

/* Das Hero-Bild darf blenden, es ist dekorativ und nicht das LCP-Element. */
.rv-on [data-rv="hero-media"]{opacity:1;transform:translateY(26px) scale(.955)}
.rv-on [data-rv="hero-media"].rv-go{transform:none}

/* Zahlen, die hochzählen, brauchen feste Breite – sonst springt der Text. */
.count{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .rv-on [data-rv],
  .rv-on [data-rv].rv-go{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ==========================================================================
   TEIL 5 · Helle Karten-Variante
   Für Bausteine, die auf dem dunkelgrünen Seiten-Hintergrund sitzen – dort
   würde die dunkle Karte mit dem Abschnitt verschmelzen. Es werden nur
   Token-WERTE lokal überschrieben, die Struktur bleibt wie im Skill.
   Der Akzent muss hier dunkler sein: das CI-Lime #8FCA14 hat auf Weiß nur
   1,98:1 und wäre als Textfarbe unlesbar. #3D8500 erreicht 4,6:1.
   ========================================================================== */
.wmb-card_light{/* seit v3 identisch mit dem Standard – die ganze Seite ist hell */}

/* ==========================================================================
   TEIL 6 · Verstärkte Bewegung (v3-Markup)
   Amplitude oben angehoben (16 → 28 px). Hier die Richtungsvarianten und die
   Hero-Atmosphäre. Timing bleibt auf den Skill-Tokens – nur die Wege sind
   größer.
   ========================================================================== */

/* --- Richtung: Text von links, Medien von rechts ------------------------- */
.rv-on [data-rv="left"]{transform:translateX(-46px)}
.rv-on [data-rv="right"]{transform:translateX(46px)}
.rv-on [data-rv="left"].rv-go,
.rv-on [data-rv="right"].rv-go{transform:none}
@media (max-width:959px){
  /* Seitwärts auf schmalen Screens vermeiden – sonst wackelt die Seite
     horizontal, obwohl overflow versteckt ist. */
  .rv-on [data-rv="left"],
  .rv-on [data-rv="right"]{transform:translateY(28px) scale(.985)}
}

/* --- Hero: driftender Lichtschleier -------------------------------------- */
/* Die H1 selbst bekommt bewusst KEIN data-rv: sie ist der ruhende Punkt und
   malt sofort – das schützt zusätzlich die LCP-Messung. */
.rv-on .hero__glow{animation:rv-drift 22s var(--wmb-ease) infinite alternate}
@keyframes rv-drift{
  0%  {translate:-3% 0;   scale:1}
  50% {translate:3% -3.5%; scale:1.09}
  100%{translate:5% 1.5%;  scale:1.03}
}

/* Sanftes Schweben des Hero-Bilds – wird erst zugeschaltet, wenn der
   Eintritt fertig ist, sonst kämpfen Animation und Transition um transform. */
.hero__media img.rv-float{animation:rv-float 7s ease-in-out infinite}
@keyframes rv-float{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-14px)}
}

/* --- Icon-Badges: Ring läuft einmal nach außen --------------------------- */
.badge{position:relative;transition:transform .5s var(--wmb-ease)}
.badge::after{
  content:"";position:absolute;inset:-5px;border-radius:inherit;
  border:2px solid var(--wmb-surface-2);opacity:0;pointer-events:none;
}
.rv-on [data-rv].rv-go .badge{animation:rv-icon-pop .6s var(--wmb-ease) both}
.rv-on [data-rv].rv-go .badge::after{animation:rv-ring 1s var(--wmb-ease) .18s both}
@keyframes rv-icon-pop{0%{transform:scale(.55) rotate(-12deg)}70%{transform:scale(1.06) rotate(2deg)}100%{transform:none}}
@keyframes rv-ring{0%{opacity:.95;transform:scale(.72)}100%{opacity:0;transform:scale(1.45)}}
.card_hover:hover .badge{transform:scale(1.08) rotate(-4deg)}

@media (prefers-reduced-motion:reduce){
  .rv-on .hero__glow,
  .hero__media img.rv-float,
  .rv-on [data-rv].rv-go .badge,
  .rv-on [data-rv].rv-go .badge::after{animation:none !important}
  .badge::after{opacity:0 !important}
}

/* ==========================================================================
   TEIL 7 · Styles der zwei zusätzlichen Bausteine
   ========================================================================== */

/* --- feature-reveal --- */
.fr-list{position:relative;z-index:2;margin-top:8px;display:flex;flex-direction:column;gap:16px}
.fr-row{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start}
.fr-badge{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--wmb-accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--wmb-accent) 40%,transparent)}
.fr-ic{width:24px;height:24px;color:var(--wmb-accent);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fr-body h3{margin:6px 0 3px;font-size:16px;font-weight:700}
.fr-body p{margin:0;font-size:13.5px;color:var(--wmb-muted);line-height:1.45}

/* --- milestone-track (neuer Archetyp: waagerechte Strecke) --- */
.mt-track{position:relative;z-index:2;margin:14px 0 18px;display:flex;align-items:center;gap:8px}
.mt-node{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;background:var(--wmb-accent);color:var(--wmb-bg-1)}
.mt-line{flex:1;height:2px;border-radius:2px;background:color-mix(in srgb,var(--wmb-accent) 55%,transparent);transform-origin:left}
.mt-labels{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mt-labels h3{margin:0 0 3px;font-size:14.5px;font-weight:700;line-height:1.25}
.mt-labels p{margin:0;font-size:12.5px;color:var(--wmb-muted);line-height:1.4}
.mt-step{font-size:11px;font-weight:800;letter-spacing:.6px;color:var(--wmb-accent);display:block;margin-bottom:3px}
@media (max-width:639px){
  .mt-labels{grid-template-columns:repeat(2,1fr)}
  .mt-node{width:32px;height:32px;font-size:13px}
}

/* ==========================================================================
   TEIL 8 · Archetyp device-mockup
   iPad + iPhone komplett in CSS – keine Bilddatei, kein Video. Die Fotos auf
   der Seite (features.png, person.png) haben ihre Bildschirme als Pixel
   eingebrannt, da lässt sich nichts einzeln bewegen. Also sind die Geräte hier
   nachgebaut; die Inhalte sind 1:1 die der echten App-Screenshots.

   Drei geschachtelte Query-Container:
     .dv-wrap   – entscheidet das Layout (nebeneinander / gestapelt)
     .dv-pad    – alle Innenmaße des Tablets sind RELATIV ZUM TABLET
     .dv-phone  – dito für das Telefon
   Das ist der Punkt: so skaliert die Oberfläche mit ihrem Gerät und nicht mit
   der Bühne. Wird das Telefon größer, wächst seine Schrift mit.
   Ein Container kann sich nicht selbst abfragen – deshalb .dv-wrap um .dv-stage.
   ========================================================================== */
.dv-wrap{container-type:inline-size;container-name:dvstage;width:100%;position:relative;z-index:2;margin-top:4px}
.dv-stage{position:relative;width:100%;aspect-ratio:16/11}

/* --- iPad ---------------------------------------------------------------- */
/* WICHTIG: cqw an einem Container-Element selbst löst gegen den ÜBERGEORDNETEN
   Container auf, nicht gegen sich selbst. Deshalb trägt .dv-pad nur Position und
   Größe (in Bühnen-Einheiten) und die Blende sitzt in .dv-frame – dort rechnen
   cqw gegen das Tablet, und das Gerät skaliert als Ganzes richtig. */
.dv-pad{container-type:inline-size;container-name:dvpad;position:absolute;top:0;right:0;width:76cqw;aspect-ratio:4/3}
.dv-frame{width:100%;height:100%;background:#1C2118;border-radius:3.1cqw;padding:2cqw;
  box-shadow:0 4cqw 9cqw -5cqw rgba(0,0,0,.45)}
.dv-screen{width:100%;height:100%;background:#eef0ea;border-radius:1.6cqw;overflow:hidden;display:flex;flex-direction:column}
.dv-bar{flex:none;height:7.1cqw;background:linear-gradient(180deg,#76af00,#8fca14);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:3cqw}
.dv-grid{flex:1;display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-auto-rows:1fr;gap:1.45cqw;padding:1.85cqw}
.dv-tile{background:#fff;border-radius:1.3cqw;padding:1.6cqw;display:flex;flex-direction:column;justify-content:center;gap:.5cqw}
.dv-tile_brand{align-items:center;text-align:center;justify-content:center}
.dv-brand{font-weight:800;font-size:3.4cqw;color:#12152d;line-height:1}
.dv-brand span{color:#76af00}
.dv-sub{font-size:2cqw;color:#7b8272}
.dv-num{font-weight:800;font-size:4.1cqw;color:#12152d;line-height:1;font-variant-numeric:tabular-nums}
.dv-lbl{font-size:2cqw;color:#666D5E;line-height:1.25}  /* war #7b8272 = 3,98:1 */
.dv-dot{width:3.15cqw;height:3.15cqw;border-radius:.8cqw;background:#8fca14;margin-bottom:.4cqw}
.dv-tabs{flex:none;height:5.8cqw;background:#f7f8f5;border-top:1px solid #e2e5dd;
  display:flex;align-items:center;justify-content:space-around;padding:0 2cqw}
.dv-tab{width:2.6cqw;height:2.6cqw;border-radius:.7cqw;background:#c9cec2}
.dv-tab_on{background:#76af00}

/* --- iPhone, davor ------------------------------------------------------- */
.dv-phone{container-type:inline-size;container-name:dvphone;position:absolute;left:0;bottom:1cqw;width:26cqw;aspect-ratio:1/2.05}
.dv-pframe{width:100%;height:100%;background:#1C2118;border-radius:13cqw;padding:3.8cqw;
  box-shadow:0 9cqw 18cqw -9cqw rgba(0,0,0,.5)}
.dv-pscreen{width:100%;height:100%;background:#eef0ea;border-radius:10cqw;overflow:hidden;display:flex;flex-direction:column}
.dv-pbar{flex:none;height:17.7cqw;background:linear-gradient(180deg,#76af00,#8fca14);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:6.6cqw}
.dv-rows{flex:1;padding:3.8cqw;display:flex;flex-direction:column;gap:3.1cqw}
.dv-row{background:#fff;border-radius:3.1cqw;padding:3.3cqw 3.8cqw;display:flex;align-items:center;
  justify-content:space-between;gap:2.3cqw;font-size:5.4cqw;color:#12152d;line-height:1.2}
.dv-pill{flex:none;font-size:4.4cqw;font-weight:700;padding:1.2cqw 2.7cqw;border-radius:4cqw;
  background:#e8efdc;color:#3d6b00;white-space:nowrap}
.dv-pill_work{background:#fdf0d8;color:#8a5a00}
.dv-row_new{border:1px solid #8fca14;background:#f6fbec}
.dv-live{flex:none;width:5.8cqw;height:5.8cqw;border-radius:50%;background:#76af00;position:relative}
.dv-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:#76af00}
.dv-ptabs{flex:none;height:13.7cqw;background:#f7f8f5;border-top:1px solid #e2e5dd;
  display:flex;align-items:center;justify-content:space-around;padding:0 3.8cqw}
.dv-ptab{width:5.8cqw;height:5.8cqw;border-radius:1.5cqw;background:#c9cec2}
.dv-ptab_on{background:#76af00}

/* Die Zeilen des Telefons kommen nach der Hauptsequenz gestaffelt nach –
   der Versatz kommt aus dem Skill-Token, nicht aus Handarbeit. */
.dv-rows [data-after]{opacity:0;transform:translateY(4cqw);
  transition:opacity var(--wmb-dur-in) var(--wmb-ease),transform var(--wmb-dur-in) var(--wmb-ease)}
.dv-rows [data-after].wmb-show{opacity:1;transform:none}
.dv-rows [data-after]:nth-child(2){transition-delay:calc(var(--wmb-stagger) * 1)}
.dv-rows [data-after]:nth-child(3){transition-delay:calc(var(--wmb-stagger) * 2)}
.dv-rows [data-after]:nth-child(4){transition-delay:calc(var(--wmb-stagger) * 3)}
.dv-rows [data-after]:nth-child(5){transition-delay:calc(var(--wmb-stagger) * 4)}
.dv-rows [data-after].wmb-show .dv-live::after{animation:wmb-pulse 2s var(--wmb-ease) infinite}

/* --- Schmale Bühne: stapeln statt nebeneinander --------------------------
   Nebeneinander verdeckt das Telefon eine Kachel, und beide Geräte werden zu
   klein zum Lesen. Gestapelt bekommt das Tablet die volle Breite (Schrift
   wächst mit, weil sie am Tablet hängt) und das Telefon steht darunter. */
@container dvstage (max-width:430px){
  /* Bühnenhöhe = Tablet (75cqw) + Lücke (4cqw) + Telefon (52 × 2,05 = 106,6cqw) */
  .dv-stage{aspect-ratio:100/186}
  .dv-pad{width:100cqw}
  .dv-grid{grid-template-columns:1fr 1fr}
  .dv-tile_brand{grid-column:span 2}
  .dv-phone{width:52cqw;left:50%;translate:-50% 0;bottom:0}
}

@media (prefers-reduced-motion:reduce){
  .dv-rows [data-after]{opacity:1 !important;transform:none !important;transition:none !important}
  .dv-live::after{animation:none !important}
}

/* Im Bento sitzt die Karte in ihrer eigenen Zelle – keine Extra-Breite nötig. */
.bento .wmb-card{max-width:none}
.bento__full .wmb-card{max-width:none}