/* ==========================================================================
   siinovation – gemeinsames Stylesheet für / und /en

   FARBSYSTEM
   Die vier Markenfarben stammen aus Two Ways. One Us und bleiben erhalten:
     Rose #E75480 · Gold #E3A33C · Teal #3E9E96 · Plum #8E5A9E
   Sie sind DEKORATIV (Logo, Linien, Verläufe). Für Text und Buttons gibt es
   eigene Töne, die WCAG AA erfüllen. Geprüfte Werte (hell / dunkel):
     Text auf Hintergrund          17,2 : 1   / 16,7 : 1
     Nebentext auf Hintergrund      5,5 : 1   /  6,7 : 1
     Weiß auf Button (#C43A64)      5,1 : 1   /  5,1 : 1
     Akzent-Text auf Hintergrund    4,6 : 1   /  7,2 : 1
     Gold-, Teal-, Plum-Text        5,4 / 5,7 / 6,9 : 1  (dunkel ≥ 6,4 : 1)
     Formularrahmen, Fokusring      3,4 / 4,6 : 1       (dunkel 3,6 / 7,2 : 1)
   Die alte Kombination Weiß auf #E75480 lag bei 3,5 : 1 und fällt durch.
   ========================================================================== */

@font-face{
  font-family:"Space Grotesk"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(/assets/fonts/space-grotesk-latin.woff2) format("woff2");
}

:root{
  color-scheme:light dark;

  /* Marke, nur dekorativ */
  --brand-rose:#E75480; --brand-gold:#E3A33C; --brand-teal:#3E9E96; --brand-plum:#8E5A9E;

  /* Flächen und Text */
  --bg:#F7F4F1;
  --surface:#FFFFFF;
  --surface-2:#FBF9F7;
  --border:#E6DFDA;
  --border-strong:#958A84;      /* Formularfelder: 3,4 : 1 gegen Weiß */
  --text:#141110;
  --text-muted:#6B615C;

  /* Aktion */
  --accent:#C43A64;             /* Buttons, Links */
  --accent-hover:#A92F55;
  --on-accent:#FFFFFF;
  --accent-text:#C43A64;
  --accent-wash:#FCEEF3;
  --focus:#C43A64;

  /* Produkt-Töne für Text (AA) und Flächen */
  --rose-text:#C43A64; --rose-wash:#FCEEF3;
  --gold-text:#8A5A0F; --gold-wash:#FDF3E2;
  --teal-text:#236B65; --teal-wash:#E6F4F2;
  --plum-text:#71427F; --plum-wash:#F3EBF6;

  --ok-text:#236B65; --ok-wash:#E6F4F2;
  --err-text:#A3263F; --err-wash:#FCEBEE;

  /* Form */
  --radius-sm:10px; --radius:14px; --radius-lg:22px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(20,17,16,.05), 0 4px 14px rgba(20,17,16,.05);
  --shadow-md:0 2px 4px rgba(20,17,16,.05), 0 18px 40px rgba(20,17,16,.10);

  /* Typografie: Skala 1,25 auf 17 px Grundgröße */
  --font-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs:.8125rem;   /* 13 */
  --fs-sm:.9375rem;   /* 15 */
  --fs-base:1.0625rem;/* 17 */
  --fs-lg:1.25rem;    /* 20 */
  --fs-h3:1.375rem;   /* 22 */
  --fs-h2:clamp(1.875rem, 1.3rem + 2.2vw, 2.625rem);
  --fs-h1:clamp(2.25rem, 1.45rem + 3.4vw, 3.5rem);
  --measure:65ch;

  /* Rhythmus */
  --gutter:clamp(16px, 4vw, 28px);
  --section-y:clamp(64px, 8vw, 104px);
  --stack:clamp(28px, 4vw, 44px);
  --maxw:1140px;

  --ease:cubic-bezier(.2,.7,.2,1);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#121010;
    --surface:#1B1817;
    --surface-2:#221E1D;
    --border:#2E2926;
    --border-strong:#7A6F6A;
    --text:#F4F0ED;
    --text-muted:#A89D97;

    --accent:#C43A64;
    --accent-hover:#A92F55;
    --accent-text:#F07A9E;
    --accent-wash:#2A1720;
    --focus:#F07A9E;

    --rose-text:#F07A9E; --rose-wash:#2A1720;
    --gold-text:#E3A33C; --gold-wash:#2A2113;
    --teal-text:#4FB5AC; --teal-wash:#12251F;
    --plum-text:#B98BC9; --plum-wash:#231A2A;

    --ok-text:#7FD3CA; --ok-wash:#12251F;
    --err-text:#FF9DB0; --err-wash:#2E141B;

    --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
    --shadow-md:0 2px 4px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.45);
  }
}

/* Produkt- bzw. Abschnittston */
.tone-rose{ --tone:var(--brand-rose); --tone-text:var(--rose-text); --tone-wash:var(--rose-wash); }
.tone-gold{ --tone:var(--brand-gold); --tone-text:var(--gold-text); --tone-wash:var(--gold-wash); }
.tone-teal{ --tone:var(--brand-teal); --tone-text:var(--teal-text); --tone-wash:var(--teal-wash); }
.tone-plum{ --tone:var(--brand-plum); --tone-text:var(--plum-text); --tone-wash:var(--plum-wash); }

/* ===== Grundlagen ===== */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-base); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{ font-family:var(--font-display); line-height:1.12; letter-spacing:-.02em; font-weight:700; text-wrap:balance; }
p{ text-wrap:pretty; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button,input,textarea{ font:inherit; color:inherit; }
ul[role="list"]{ list-style:none; }

:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
main:focus{ outline:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip-link{
  position:absolute; left:var(--gutter); top:-100px; z-index:100;
  background:var(--accent); color:var(--on-accent); font-weight:700;
  padding:12px 18px; border-radius:var(--radius-sm); text-decoration:none;
}
.skip-link:focus{ top:12px; }

/* ===== Text-Bausteine ===== */
.eyebrow{
  display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tone-text, var(--accent-text)); margin-bottom:14px;
}
.h2{ font-size:var(--fs-h2); }
.lead{ color:var(--text-muted); font-size:var(--fs-lg); line-height:1.5; margin-top:16px; max-width:52ch; }
.muted{ color:var(--text-muted); }
.small{ font-size:var(--fs-sm); }

.text-link{
  color:var(--accent-text); font-weight:700; text-decoration:underline;
  text-decoration-thickness:1.5px; text-underline-offset:3px;
}
.text-link:hover{ text-decoration-thickness:2.5px; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 22px; border-radius:var(--radius);
  font-weight:700; font-size:var(--fs-sm); line-height:1.2; text-decoration:none; text-align:center;
  border:1.5px solid transparent; cursor:pointer;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.65; cursor:progress; }
.btn-primary{ background:var(--accent); color:var(--on-accent); }
.btn-primary:hover{ background:var(--accent-hover); }
.btn-secondary{ background:transparent; color:var(--text); border-color:var(--border-strong); }
.btn-secondary:hover{ border-color:var(--text); background:var(--surface); }
.btn-small{ min-height:44px; padding:10px 16px; }

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .25s var(--ease);
}
.site-header.pinned{ border-bottom-color:var(--border); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px; }
.brand{
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  font-family:var(--font-display); font-weight:700; font-size:1.25rem; letter-spacing:-.03em; text-decoration:none;
}
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 12px; border-radius:var(--radius-sm);
  font-weight:600; font-size:var(--fs-sm); color:var(--text-muted); text-decoration:none; position:relative;
}
.nav-links a:hover{ color:var(--text); }
.nav-links a[aria-current="true"]{ color:var(--text); }
.nav-links a[aria-current="true"]::after{
  content:""; position:absolute; left:12px; right:12px; bottom:8px; height:2px; border-radius:2px; background:var(--brand-rose);
}
.nav-links .lang{ margin-left:8px; border:1.5px solid var(--border); color:var(--text); }
.nav-links .lang:hover{ border-color:var(--border-strong); }

.menu-btn{
  display:none; align-items:center; justify-content:center; gap:8px;
  min-width:44px; min-height:44px; padding:0 12px; border-radius:var(--radius-sm);
  background:transparent; border:1.5px solid var(--border); font-weight:700; font-size:var(--fs-sm); cursor:pointer;
}
.menu-btn svg{ width:20px; height:20px; }

@media (max-width:820px){
  .menu-btn{ display:inline-flex; }
  .js .nav-links{ display:none; }
  .js .nav-links.open{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; left:0; right:0; top:100%;
    background:var(--bg); border-bottom:1px solid var(--border); padding:8px var(--gutter) 16px;
    box-shadow:var(--shadow-md);
  }
  .js .nav-links.open a{ min-height:48px; padding:0 8px; font-size:var(--fs-base); }
  .js .nav-links.open a[aria-current="true"]::after{ left:8px; right:auto; width:24px; bottom:10px; }
  .js .nav-links.open .lang{ margin:8px 0 0; justify-content:center; }
  /* Ohne JavaScript bleibt die Navigation sichtbar und bricht um */
  html:not(.js) .nav{ flex-wrap:wrap; padding:8px 0; }
  html:not(.js) .nav-links{ flex-wrap:wrap; }
}

/* ===== Abschnitte ===== */
.section{ padding:var(--section-y) 0; }
.section + .section{ padding-top:0; }
.section-head{ margin-bottom:var(--stack); }

/* ===== Hero ===== */
.hero{ position:relative; overflow:hidden; padding:clamp(40px, 7vw, 88px) 0 clamp(48px, 6vw, 80px); }
.hero > .wrap{ position:relative; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(32px, 6vw, 72px); align-items:center; }
.hero h1{ font-size:var(--fs-h1); max-width:18ch; }
.hero .lead{ max-width:46ch; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:2; }
}
@media (max-width:480px){ .cta-row .btn{ flex:1 1 100%; } }

/* Geräterahmen für echte Screenshots */
.device{
  width:min(280px, 72vw); margin:0 auto;
  padding:9px; border-radius:40px; background:#161312;
  box-shadow:var(--shadow-md), inset 0 0 0 1.5px #3A3432;
}
.device img{ width:100%; border-radius:31px; }
.device .placeholder{ width:100%; aspect-ratio:600/1176; border-radius:31px; }
.device.small{ width:150px; padding:6px; border-radius:26px; }
.device.small img,.device.small .placeholder{ border-radius:20px; }
.hero-visual figcaption{ margin-top:16px; text-align:center; font-size:var(--fs-xs); color:var(--text-muted); }

/* Platzhalter: bewusst sichtbar als solcher gekennzeichnet */
.placeholder{
  display:grid; place-items:center; text-align:center; padding:16px;
  border:2px dashed var(--border-strong); color:var(--text-muted);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em;
  background:repeating-linear-gradient(135deg, var(--surface) 0 12px, var(--surface-2) 12px 24px);
}

/* ===== Produkte ===== */
.products{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
@media (max-width:1023px){ .products{ grid-template-columns:1fr; } }

.card{
  position:relative; display:flex; flex-direction:column; gap:18px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:clamp(20px, 3vw, 28px); box-shadow:var(--shadow-sm);
}
.card::before{
  content:""; position:absolute; left:24px; right:24px; top:-1px; height:3px; border-radius:0 0 3px 3px; background:var(--tone);
}
.card-head{ display:flex; align-items:center; gap:14px; }
.app-icon{ width:56px; height:56px; border-radius:14px; flex:0 0 auto; box-shadow:var(--shadow-sm); overflow:hidden; }
.app-icon img{ width:100%; height:100%; }
.card h3{ font-size:var(--fs-h3); }
.kind{ font-size:var(--fs-sm); font-weight:600; color:var(--tone-text); }
.badge{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-size:var(--fs-xs); font-weight:700; padding:5px 12px; border-radius:var(--radius-pill); justify-self:start;
  background:var(--tone-wash); color:var(--tone-text);
}
.badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.card p{ color:var(--text-muted); }
.checks{ display:grid; gap:8px; font-size:var(--fs-sm); }
.checks li{ display:grid; grid-template-columns:18px 1fr; gap:10px; align-items:start; }
.checks svg{ width:18px; height:18px; margin-top:3px; color:var(--tone-text); }
.card-media{ display:flex; justify-content:center; gap:12px; padding:20px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-top:auto; }
.card-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
.card-actions .btn{ flex:1 1 auto; }
.card-actions .text-link{ display:inline-flex; align-items:center; min-height:44px; }
.card-actions .note{ font-size:var(--fs-sm); color:var(--text-muted); }

/* Mittlere Breite: Karte quer, Bild rechts */
@media (min-width:640px) and (max-width:1023px){
  .card{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:28px; }
  .card > *{ grid-column:1; }
  .card .card-media{ grid-column:2; grid-row:1 / span 6; border:0; padding:0; margin:0; align-self:center; }
}

/* ===== Arbeitsweise ===== */
.principles{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 48px; }
@media (max-width:720px){ .principles{ grid-template-columns:1fr; } }
.principle{ display:grid; grid-template-columns:40px 1fr; gap:14px; padding:24px 0; border-top:1px solid var(--border); }
.principle .n{ font-family:var(--font-display); font-weight:700; font-size:1.125rem; color:var(--tone-text); padding-top:2px; }
.principle h3{ font-size:var(--fs-lg); }
.principle p{ color:var(--text-muted); margin-top:6px; max-width:var(--measure); }

.honest{
  margin-top:var(--stack); padding:22px 24px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border); max-width:78ch;
}
.honest h3{ font-size:var(--fs-base); }
.honest ul{ margin:10px 0 0 20px; display:grid; gap:6px; color:var(--text-muted); font-size:var(--fs-sm); }
.honest p{ margin-top:10px; font-size:var(--fs-sm); }

/* ===== Studio ===== */
.studio{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px, 5vw, 56px); align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:clamp(24px, 5vw, 52px); position:relative; overflow:hidden;
}
.studio::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, var(--brand-rose), var(--brand-plum), var(--brand-teal), var(--brand-gold));
}
.studio p{ color:var(--text-muted); margin-top:16px; max-width:var(--measure); }
@media (max-width:860px){ .studio{ grid-template-columns:1fr; } }

.facts{ display:grid; gap:22px; padding-left:clamp(0px, 4vw, 48px); border-left:1px solid var(--border); }
@media (max-width:860px){ .facts{ display:flex; flex-wrap:wrap; gap:16px 40px; padding:24px 0 0; border-left:0; border-top:1px solid var(--border); } }
.facts div{ display:flex; flex-direction:column-reverse; }
.facts dt{ font-size:var(--fs-sm); color:var(--text-muted); }
.facts dd{ font-family:var(--font-display); font-weight:700; font-size:2rem; line-height:1.1; color:var(--tone-text); }

/* ===== Formulare ===== */
.two-col{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px, 5vw, 64px); align-items:start; }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; } }

.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:clamp(20px, 3vw, 32px); box-shadow:var(--shadow-sm);
}
.form{ display:grid; gap:18px; }
.field{ display:grid; gap:6px; }
.field label,.fieldset legend{ font-weight:700; font-size:var(--fs-sm); }
.field .req{ color:var(--text-muted); font-weight:400; }
.field input,.field textarea{
  width:100%; min-height:48px; padding:12px 14px; border-radius:var(--radius-sm);
  background:var(--surface); border:1.5px solid var(--border-strong); font-size:1rem;
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus-visible,.field textarea:focus-visible{ outline-offset:1px; border-color:var(--focus); }
.field [aria-invalid="true"]{ border-color:var(--err-text); }
.field-error{ color:var(--err-text); font-size:var(--fs-sm); font-weight:600; }
.field-error:empty{ display:none; }

.fieldset{ border:0; display:grid; gap:4px; }
.fieldset legend{ margin-bottom:6px; }
.check{ display:flex; align-items:center; gap:12px; min-height:44px; cursor:pointer; }
.check input{ width:22px; height:22px; accent-color:var(--accent); flex:0 0 auto; }

/* Honeypot: für Menschen unsichtbar und nicht erreichbar */
.hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

.form-note{ font-size:var(--fs-sm); color:var(--text-muted); }
.status{ border-radius:var(--radius-sm); padding:14px 16px; font-weight:600; font-size:var(--fs-sm); }
.status:empty{ display:none; }
.status.ok{ background:var(--ok-wash); color:var(--ok-text); }
.status.err{ background:var(--err-wash); color:var(--err-text); }
.status a{ color:inherit; }

.copy-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:20px; }
.copy-row .mail{ font-weight:700; font-size:var(--fs-lg); word-break:break-all; }
.copy-status{ font-size:var(--fs-sm); color:var(--ok-text); font-weight:600; min-height:1.5em; }

/* ===== Footer ===== */
.site-footer{ border-top:1px solid var(--border); padding:28px 0 40px; color:var(--text-muted); font-size:var(--fs-sm); }
.foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; }
.foot ul{ display:flex; flex-wrap:wrap; gap:0 6px; list-style:none; }
.foot a{ display:inline-flex; align-items:center; min-height:44px; padding:0 8px; text-decoration:none; font-weight:600; }
.foot a:hover{ color:var(--text); text-decoration:underline; }

/* ===== Bewegung =====
   Einmaliges, kurzes Einblenden. Versteckt wird nur, wenn JavaScript läuft
   (html.js) – sonst bliebe Inhalt ohne JS unsichtbar. */
.js .reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }

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

/* ===== Lebendigkeit =====
   Alles hier läuft nur, wenn niemand reduzierte Bewegung eingestellt hat.
   Dauerhaft bewegt sich nur der weiche Farbschein hinter dem Hero und das
   leicht schwebende Telefon – langsam genug, um nicht abzulenken. */

/* Farbschein aus den vier Markenfarben hinter dem Hero */
.hero-glow{ position:absolute; inset:0; pointer-events:none; -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent); mask-image:linear-gradient(to bottom, #000 55%, transparent); }
.hero-glow span{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.28; }
.hero-glow span:nth-child(1){ width:420px; height:420px; background:var(--brand-rose); right:6%; top:-80px; }
.hero-glow span:nth-child(2){ width:340px; height:340px; background:var(--brand-gold); right:26%; bottom:-120px; opacity:.22; }
.hero-glow span:nth-child(3){ width:300px; height:300px; background:var(--brand-teal); right:-60px; top:40%; opacity:.18; }
@media (prefers-color-scheme: dark){ .hero-glow span{ opacity:.18; } }
@media (max-width:860px){ .hero-glow span:nth-child(1){ right:-120px; top:auto; bottom:10%; } }

.card{ transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.card .device.small{ transition:transform .45s var(--ease); }
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform:skewX(-18deg);
}

@media (prefers-reduced-motion: no-preference){
  /* Einstieg: Zeile für Zeile */
  .intro{ animation:rise .7s var(--ease) both; animation-delay:calc(var(--i, 0) * 110ms + 80ms); }
  @keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

  /* Wortmarke baut sich auf: Punkte fallen, Balken wachsen */
  .brand svg{ overflow:visible; }
  .brand svg use{ animation:markIn .8s cubic-bezier(.34,1.56,.64,1) both; transform-origin:50% 100%; }
  @keyframes markIn{ from{ opacity:0; transform:translateY(-6px) scaleY(.4); } to{ opacity:1; transform:none; } }
  .brand:hover svg{ animation:wiggle .6s var(--ease); }
  @keyframes wiggle{ 30%{ transform:rotate(-8deg) scale(1.08); } 60%{ transform:rotate(4deg); } }

  /* Farbschein driftet langsam */
  .hero-glow span{ animation:drift 18s ease-in-out infinite alternate; }
  .hero-glow span:nth-child(2){ animation-duration:23s; animation-delay:-6s; }
  .hero-glow span:nth-child(3){ animation-duration:27s; animation-delay:-11s; }
  @keyframes drift{ 0%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-40px,30px) scale(1.08); } 100%{ transform:translate(30px,-20px) scale(.95); } }

  /* Telefon schwebt */
  .hero-visual .device{ animation:float 7s ease-in-out infinite; }
  @keyframes float{ 0%,100%{ transform:translateY(0) rotate(-1deg); } 50%{ transform:translateY(-12px) rotate(1deg); } }

  /* Karten: gestaffelt einblenden, beim Hovern anheben */
  .js .reveal{ transition-delay:calc(var(--i, 0) * 90ms); }
  .card:hover,.js .card.reveal.in:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb, var(--tone) 45%, var(--border)); }
  .card:hover .device.small{ transform:translateY(-6px) rotate(-2deg); }

  /* Nummern der Arbeitsweise springen beim Einblenden auf */
  .js .principle .n{ display:inline-block; transform:scale(.4); opacity:0; transition:transform .6s cubic-bezier(.34,1.56,.64,1), opacity .4s; transition-delay:calc(var(--i, 0) * 90ms + 150ms); }
  .js .principle.in .n{ transform:none; opacity:1; }

  /* Glanz über primäre Buttons */
  .btn-primary:hover::after{ animation:shine .8s var(--ease); }
  @keyframes shine{ to{ left:130%; } }

  /* Farbverlauf der Studio-Kante wandert */
  .studio::before{ background-size:200% 100%; animation:slide 9s linear infinite; background-image:linear-gradient(90deg, var(--brand-rose), var(--brand-plum), var(--brand-teal), var(--brand-gold), var(--brand-rose)); }
  @keyframes slide{ to{ background-position:200% 0; } }
}

/* ===== Detailseite /apps ===== */
.page-hero{ position:relative; overflow:hidden; padding:clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px); }
.page-hero h1{ font-size:var(--fs-h1); max-width:20ch; }
.app-list{ display:grid; gap:20px; padding-bottom:var(--section-y); }

.app-detail{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.app-detail > summary{
  list-style:none; cursor:pointer; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  padding:clamp(18px, 3vw, 26px) clamp(18px, 3vw, 28px); position:relative;
}
.app-detail > summary::-webkit-details-marker{ display:none; }
.app-detail > summary::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--tone); }
.app-detail > summary:hover{ background:var(--surface-2); }
.app-detail > summary:focus-visible{ outline-offset:-3px; }
.app-detail .app-icon{ width:64px; height:64px; border-radius:16px; }
.app-detail h2{ font-size:clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
.sum-text{ display:grid; gap:4px; }
.sum-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.sum-meta .badge{ white-space:nowrap; }
@media (max-width:480px){
  .app-detail > summary{ gap:12px; }
  .app-detail .app-icon{ width:48px; height:48px; border-radius:12px; align-self:start; }
}
.chev{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--border); color:var(--tone-text); transition:transform .35s var(--ease), background .2s;
}
.chev svg{ width:18px; height:18px; }
.app-detail[open] .chev{ transform:rotate(180deg); background:var(--tone-wash); }
.sum-hint{ font-size:var(--fs-sm); color:var(--text-muted); }

.detail-body{ padding:4px clamp(18px, 3vw, 28px) clamp(22px, 3vw, 32px); display:grid; grid-template-columns:minmax(0,1fr); gap:28px; }
.detail-body > p{ max-width:var(--measure); color:var(--text-muted); font-size:var(--fs-lg); line-height:1.5; }
.detail-body h3{ font-size:var(--fs-lg); margin-bottom:12px; }
.detail-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 48px; }
@media (max-width:760px){ .detail-cols{ grid-template-columns:1fr; } }
.features{ display:grid; gap:10px; }
.features li{ display:grid; grid-template-columns:18px 1fr; gap:10px; }
.features svg{ width:18px; height:18px; margin-top:4px; color:var(--tone-text); }
.features b{ font-weight:700; }
.features span{ color:var(--text-muted); }

.gallery{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 16px;
  scrollbar-width:thin; overscroll-behavior-x:contain;
}
.gallery figure{ flex:0 0 auto; scroll-snap-align:start; width:min(220px, 62vw); margin:0; }
.gallery.play figure{ width:min(240px, 66vw); }
.gallery img{ width:100%; border-radius:16px; box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.gallery .device{ width:100%; }
.gallery figcaption{ margin-top:10px; font-size:var(--fs-sm); color:var(--text-muted); }
.gallery-hint{ font-size:var(--fs-xs); color:var(--text-muted); }
.detail-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding-top:20px; border-top:1px solid var(--border); }
.detail-actions .text-link{ display:inline-flex; align-items:center; min-height:44px; }

@media (prefers-reduced-motion: no-preference){
  .app-detail[open] .detail-body > *{ animation:rise .5s var(--ease) both; }
  .app-detail[open] .detail-body > *:nth-child(2){ animation-delay:.06s; }
  .app-detail[open] .detail-body > *:nth-child(3){ animation-delay:.12s; }
  .app-detail[open] .detail-body > *:nth-child(4){ animation-delay:.18s; }
  .gallery img{ transition:transform .35s var(--ease); }
  .gallery figure:hover img{ transform:translateY(-4px); }
  .app-detail{ transition:box-shadow .3s var(--ease); }
  .app-detail:hover{ box-shadow:var(--shadow-md); }
}

[hidden]{ display:none !important; }