/* ==========================================================================
   HausChat.de — Über uns
   Wird nur von ueber-uns.html nach styles.css geladen.
   Oben ein ruhiger Einstieg: Überschrift, Einleitung und eine Leiste mit
   drei Zahlen samt Quelle, feste Schriftstufen (siehe unten). Darunter
   bewegte Bilder: Firmenausweise am Band, eine Zeitleiste mit
   Logo-Verwandlung, drei Grundsätze mit ruhigen, hellen Bildern und die
   Pilotphase als Ticket.
   Bewusste Abweichungen vom Regelwerk, nur hier:
   – Schwebende Bausteine tragen weiche Schatten.
   – Dauerbewegung (Schwingen, Schweben, laufende Punkte) mit ease-in-out.
   Bei reduzierter Bewegung steht alles still im Endzustand.
   Ablauf: js/ueber-uns.js (Zeitleiste), js/szenen.js (Szenen
   mit data-play) und js/ticket.js (Ticket, Styles in css/ticket.css).
   ========================================================================== */

:root{--us-shadow:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent),0 14px 32px -12px color-mix(in srgb,var(--ink) 26%,transparent);--us-ease:cubic-bezier(.22,.61,.36,1)}

/* ── Einblenden beim Scrollen: 200ms, 8px, einmal ─────────────────────── */
.rv{opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.rv.is-in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}

@keyframes us-lauf{0%{offset-distance:0%;opacity:0}15%,85%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes us-rein{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes us-druck{50%{scale:.92}}
@keyframes us-zeigen{from{translate:0 0}to{translate:-10px -8px}}

/* Gemeinsame Bausteine: Zeiger mit Namensschild, leuchtender Punkt. */
.us-cursor{position:absolute;z-index:5;width:18px;height:18px;pointer-events:none}
.us-cursor svg{display:block;width:18px;height:18px;overflow:visible}
.us-cursor path{fill:var(--c,var(--teal-500));stroke:#FFFFFF;stroke-width:1.5;stroke-linejoin:round}
.us-cursor em{position:absolute;left:13px;top:15px;padding:3px 9px;border-radius:var(--radius-pill);background:var(--c,var(--teal-500));color:#FFFFFF;
  font-style:normal;font-size:12px;font-weight:var(--fw-bold);line-height:1.3;white-space:nowrap;box-shadow:0 6px 14px -4px color-mix(in srgb,var(--ink) 35%,transparent)}
.sv-glow{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:#7DBA45;opacity:0;offset-rotate:0deg;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--violet-500) 22%,transparent),0 0 16px 4px color-mix(in srgb,var(--violet-500) 55%,transparent)}

/* ── Einstieg — feste Schriftstufen, nichts dazwischen ───────────────────
     Label      Almarai 700, 12px, Großbuchstaben   (das einzige Fette)
     H1         Liter 400, bis 72px
     Zahl       Liter 400, 48px
     Einleitung Almarai 400, 19px
     Text       Almarai 400, 16px
     Hinweis    Almarai 400, 14px                                          */
.ueber .u-label{display:block;font-family:var(--font-body);font-weight:var(--fw-bold);font-size:12px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-500)}
.ueber .u-h1{font-family:var(--font-heading);font-size:clamp(32px,4.2vw,56px);font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.ueber .u-num{font-family:var(--font-heading);font-weight:400;font-size:48px;line-height:1;letter-spacing:-.02em;color:var(--teal-700)}
.ueber .u-lead{font-family:var(--font-body);font-weight:400;font-size:19px;line-height:1.6;color:var(--body)}
.ueber .u-body{font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.65;color:var(--body)}
.ueber .u-meta{font-family:var(--font-body);font-weight:400;font-size:14px;line-height:1.45;color:var(--muted)}
.ueber .u-wrap{max-width:1264px}

.u-hero{padding:calc(128px + var(--nav-height)) 0 96px;
  background:radial-gradient(70% 70% at 90% 0%,color-mix(in srgb,var(--violet-500) 16%,transparent),color-mix(in srgb,var(--violet-500) 0%,transparent) 70%),
    linear-gradient(180deg,var(--teal-50) 0,var(--page) 100%)}
.u-hero__top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:end}
.u-hero__title{display:flex;flex-direction:column;gap:20px}
.u-hero .u-h1{max-width:11em}
.u-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:80px 0 0;border-top:1px solid var(--hairline)}
.u-fact{display:flex;flex-direction:column;gap:16px;padding:36px 36px 0 0}
.u-fact+.u-fact{padding-left:36px;border-left:1px solid var(--hairline)}
.u-fact dd{display:flex;flex-direction:column;gap:6px;margin:0}
.ueber .u-fact .u-body{color:var(--ink)}

/* ── Team — Firmenausweise am Band ───────────────────────────────────── */
.team{background:var(--page);overflow-x:clip}
.team .sec-head h2{font-size:40px}
.team__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;max-width:980px;margin:0 auto}
.member{display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center}
.team .member__text{max-width:28em;font-size:16px;line-height:1.6;color:var(--teal-700)}
/* Der Ausweis hängt am oberen Rand und pendelt um diesen Punkt. */
.badge{position:relative;width:300px;padding-top:96px;transform-origin:50% 0;animation:us-pendeln 4.4s ease-in-out infinite alternate}
.badge--2{animation-delay:-2.2s}
@keyframes us-pendeln{from{rotate:-2deg}to{rotate:2deg}}
.badge__band{position:absolute;left:50%;top:-48px;width:24px;height:150px;margin-left:-12px;border-radius:3px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.16) 0 2px,transparent 2px 12px),linear-gradient(90deg,var(--teal-900),var(--teal-700) 50%,var(--teal-900));
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 70px);mask-image:linear-gradient(180deg,transparent 0,#000 70px)}
.badge__clip{position:absolute;left:50%;top:86px;z-index:2;width:38px;height:28px;margin-left:-19px;border-radius:8px 8px 11px 11px;
  background:linear-gradient(180deg,#F4F6F8,#AFB7C0);box-shadow:0 3px 6px color-mix(in srgb,var(--ink) 25%,transparent),inset 0 -2px 0 rgba(0,0,0,.08)}
.badge__clip::after{content:"";position:absolute;left:9px;right:9px;bottom:6px;height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 30%,transparent)}
.badge__card{position:relative;display:flex;flex-direction:column;align-items:center;padding:30px 16px 18px;background:#FFFFFF;border-radius:22px;
  box-shadow:0 2px 6px color-mix(in srgb,var(--ink) 6%,transparent),0 40px 60px -30px color-mix(in srgb,var(--ink) 40%,transparent)}
.badge__slot{position:absolute;left:50%;top:12px;width:46px;height:9px;margin-left:-23px;border-radius:5px;background:var(--page);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--ink) 25%,transparent)}
.badge__top{display:flex;align-items:center;gap:7px;width:100%;margin:6px 0 12px;padding:0 4px}
.badge__top img{width:22px;height:22px;border-radius:6px}
.badge__top .wort{font-size:16px;color:#000000}
.badge__top em{margin-left:auto;padding:4px 9px;border-radius:var(--radius-pill);background:var(--teal-50);color:var(--teal-500);font-style:normal;font-size:10px;font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase}
.badge__foto{position:relative;display:block;width:100%;aspect-ratio:4/5}
.badge__foto img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:16px;background:#000000}
.badge__name{margin-top:16px;font-family:var(--font-heading);font-weight:400;font-size:26px;line-height:1.2;color:var(--ink)}
.badge__role{display:inline-flex;align-items:center;height:26px;margin-top:8px;padding:0 12px;border-radius:var(--radius-pill);background:var(--teal-50);color:var(--teal-700);
  font-size:12px;font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase}
/* Kleiner Strichcode aus Fenstern, wie im Zeichen. */
.badge__code{display:flex;gap:3px;margin-top:16px}
.badge__code i{width:8px;height:14px;border-radius:2px;background:var(--teal-100)}
.badge__code i.on{background:var(--blue-900)}
.badge__sticker{position:absolute;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px 0 10px;border-radius:var(--radius-pill);background:#FFFFFF;
  box-shadow:0 12px 24px -10px color-mix(in srgb,var(--ink) 45%,transparent);font-size:13px;font-weight:var(--fw-bold);color:var(--ink);white-space:nowrap}
.badge__sticker .icon{width:16px;height:16px}
.badge__sticker--kassel{left:-26px;top:24px;rotate:-7deg}
.badge__sticker--kassel .icon{color:var(--sonne-500)}
.badge__sticker--pause{right:-34px;bottom:28px;rotate:6deg}
.badge__sticker--pause .icon{color:var(--teal-500)}
.badge__cursor{right:-44px;animation:us-zeigen 2.8s ease-in-out infinite alternate}
.badge__cursor--r{--c:var(--sonne-500);top:250px}
.badge__cursor--l{--c:var(--teal-500);top:330px;animation-delay:-1.4s}

/* ── Geschichte — Zeitleiste, das Bild links geht beim Scrollen mit ─────── */
.story{--t-500:var(--violet-500);--t-700:var(--violet-700);
  background:linear-gradient(180deg,var(--page) 0,var(--violet-50) 260px,var(--violet-50) calc(100% - 260px),var(--page) 100%)}
.story__head{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:760px;margin:0 auto 32px;text-align:center}
.story__head .eyebrow{color:var(--violet-500)}
.story__head h2{font-size:40px;line-height:1.12;letter-spacing:var(--ls-heading);color:var(--ink)}
.story__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
.story__stick{position:sticky;top:calc(var(--nav-height) + 40px)}
.story__visual{position:relative;width:100%;max-width:540px;aspect-ratio:1;margin-left:auto;border-radius:32px;overflow:hidden;container-type:inline-size;
  border:1px solid color-mix(in srgb,var(--ink) 6%,transparent);
  background:radial-gradient(80% 75% at 50% 42%,#FFFFFF 0%,#F3F6F0 62%,#E8EDE4 100%)}

/* Szenen: feste Bühne 480 × 480, immer nur eine sichtbar. */
.sv{--k:1;position:absolute;left:50%;top:50%;width:480px;height:480px;translate:-50% calc(-50% + 14px);scale:var(--k);opacity:0;visibility:hidden;
  transition:opacity .45s var(--us-ease),translate .45s var(--us-ease),visibility 0s linear .45s}
@container (min-width:520px){.sv{--k:1.08}}
@container (min-width:490px) and (max-width:519.98px){.sv{--k:1.01}}
@container (min-width:440px) and (max-width:489.98px){.sv{--k:.9}}
@container (min-width:380px) and (max-width:439.98px){.sv{--k:.78}}
@container (min-width:320px) and (max-width:379.98px){.sv{--k:.66}}
@container (max-width:319.98px){.sv{--k:.58}}
.story__visual[data-step="0"] .sv--1,.story__visual[data-step="1"] .sv--2,
.story__visual[data-step="2"] .sv--3,.story__visual[data-step="3"] .sv--4{opacity:1;visibility:visible;translate:-50% -50%;transition-delay:0s}

.sv-lines{position:absolute;left:0;top:0;width:480px;height:480px;overflow:visible;pointer-events:none}
.sv-lines path{fill:none;stroke:color-mix(in srgb,var(--teal-500) 45%,transparent);stroke-width:1.6;stroke-dasharray:5 5;stroke-linecap:round}
/* Ruhige Bausteine: weiße Karten mit feinem Rand, helle runde Symbole. */
.sv-k{position:absolute;display:block;background:#FFFFFF;border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);border-radius:18px;box-shadow:var(--us-shadow);color:var(--ink);text-align:left}
.sv-tile{position:absolute;display:grid;place-items:center;width:60px;height:60px;background:#FFFFFF;border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);border-radius:18px;box-shadow:var(--us-shadow)}
.sv-tile .icon{width:26px;height:26px}
.sv-tile img{width:32px;height:32px}
.sv-farbe--gelb{color:var(--amber-500)}
.sv-farbe--blau{color:#3D6FD6}
.sv-farbe--gruen{color:var(--teal-700)}
.sv-chip{position:absolute;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px 0 6px;background:#FFFFFF;border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
  border-radius:var(--radius-pill);box-shadow:var(--us-shadow);font-size:14px;font-weight:var(--fw-bold);color:var(--ink);white-space:nowrap}
.sv-ic{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%}
.sv-ic .icon{width:15px;height:15px}
.sv-ic--lg{width:46px;height:46px}
.sv-ic--lg .icon{width:23px;height:23px}
.sv-ic--gruen{background:var(--teal-50);color:var(--teal-700)}
.sv-ic--amber{background:var(--amber-50);color:var(--amber-500)}
.sv-ic--ink{background:#EEF0F3;color:var(--ink)}
.sv-lbl{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:var(--fw-bold);line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-500)}
.sv-lbl .icon{width:14px;height:14px}
.sv-name{position:absolute;font-size:13px;font-weight:var(--fw-bold);color:var(--muted);text-align:center}
.sv-marke{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 9px;border-radius:var(--radius-pill);background:#F1F5EE;
  color:var(--teal-700);font-size:12.5px;font-weight:var(--fw-bold);white-space:nowrap}
.sv-marke .icon{width:14px;height:14px}

/* 1 · Letterble liest Post: Brief rein, in einem Satz verstanden, abgelegt. */
.sv1-tile{position:absolute;left:58px;top:96px;width:108px;height:108px;border-radius:28px;overflow:hidden;box-shadow:0 20px 40px -18px rgba(1,47,130,.45)}
.sv1-tile img{display:block;width:100%;height:100%}
.sv1-name{left:58px;top:216px;width:108px}
.sv1-brief{left:250px;top:44px;width:176px;height:236px;padding:16px 16px 0;border-radius:8px;overflow:hidden;font-size:8px;line-height:1.5;color:var(--body)}
.sv1-brief__kopf{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:var(--fw-bold);color:var(--ink)}
.sv1-brief__kopf i{width:13px;height:13px;border-radius:3px;background:var(--ink)}
.sv1-brief__an{display:block;margin-top:14px;font-size:8.5px;line-height:1.4;color:var(--ink)}
.sv1-brief__betreff{display:block;margin-top:14px;font-size:10px;font-weight:var(--fw-bold);line-height:1.35;color:var(--ink)}
.sv1-brief__text{display:block;margin-top:8px}
.sv1-ergebnis{left:44px;top:304px;width:392px;padding:16px 18px}
.sv1-satz{display:block;margin-top:8px;font-size:15px;line-height:1.45;color:var(--ink)}
.sv1-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sv1-glow{offset-path:path("M166 150 C206 150 210 128 250 128");animation:us-lauf 2.2s linear infinite}
.story__visual[data-step="0"] .sv1-ergebnis{animation:us-rein .5s var(--us-ease) .4s both}
.story__visual[data-step="0"] .sv-marke{animation:us-rein .4s var(--us-ease) .8s both}
.story__visual[data-step="0"] .sv-marke+.sv-marke{animation-delay:1s}

/* 2 · Fokus auf Hausverwaltungen: viele Kanäle laufen in ein Haus mit vielen Fenstern. */
.sv2-in--1{left:52px;top:94px}
.sv2-in--2{left:380px;top:176px}
.sv2-in--3{left:44px;top:274px}
.sv2-haus{position:absolute;left:176px;top:96px;width:128px;height:236px;border-radius:12px 12px 10px 10px;background:linear-gradient(180deg,#1F4A16,var(--blue-900));
  box-shadow:0 30px 50px -22px color-mix(in srgb,var(--blue-900) 60%,transparent)}
.sv2-dach{position:absolute;left:-10px;right:-10px;top:-14px;height:20px;border-radius:10px;background:var(--teal-700)}
.sv2-fenster{position:absolute;left:14px;right:14px;top:22px;bottom:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:8px}
.sv2-fenster i{border-radius:4px;background:#24501A}
.story__visual[data-step="1"] .sv2-fenster i{animation:sv2-licht 3.4s ease-in-out infinite}
.story__visual[data-step="1"] .sv2-fenster i:nth-child(3n){animation-delay:.5s}
.story__visual[data-step="1"] .sv2-fenster i:nth-child(4n+1){animation-delay:1.1s}
.story__visual[data-step="1"] .sv2-fenster i:nth-child(5n){animation-delay:1.7s}
.story__visual[data-step="1"] .sv2-fenster i:nth-child(7n){animation-delay:2.3s}
@keyframes sv2-licht{0%,100%{background:#24501A}35%,65%{background:#F8E7A6}}
.sv2-einheiten{left:152px;top:36px}
.sv2-uhr{position:absolute;left:80px;top:362px;width:320px;height:78px;display:flex;align-items:center;gap:14px;padding:0 18px;background:#FFFFFF;
  border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);border-radius:18px;box-shadow:var(--us-shadow)}
.sv2-uhr__t{display:flex;flex-direction:column;gap:2px;text-align:left}
.sv2-uhr__t b{font-size:17px;line-height:1.25;color:var(--ink)}
.sv2-uhr__t small{font-size:13px;color:var(--muted)}
.story__visual[data-step="1"] .sv2-uhr,.story__visual[data-step="1"] .sv2-einheiten{animation:us-rein .5s var(--us-ease) .3s both}

/* 3 · Aus Letterble wird HausChat: das Zeichen dreht sich um, die Fenster gehen an. */
.sv3-cap{left:138px;top:94px;height:36px;padding:0 16px;font-size:13px}
.sv3-k{width:64px;height:64px;border-radius:20px}
.sv3-k img{width:36px;height:36px}
.sv3-k .icon{width:28px;height:28px}
.sv3-k--1{left:68px;top:68px}
.sv3-k--2{left:348px;top:68px}
.sv3-k--3{left:68px;top:348px}
.sv3-k--4{left:348px;top:348px}
.sv3-flip{position:absolute;left:172px;top:172px;width:136px;height:136px;perspective:700px}
.sv3-face{position:absolute;inset:0;border-radius:30px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  box-shadow:0 26px 50px -20px rgba(0,0,0,.45);transition:rotate .8s var(--us-ease)}
.sv3-face img,.sv3-face svg{display:block;width:100%;height:100%}
.sv3-face--alt{rotate:y 0deg}
.sv3-face--neu{rotate:y -180deg}
.story__visual[data-step="2"] .sv3-face--alt{rotate:y 180deg;transition-delay:.5s}
.story__visual[data-step="2"] .sv3-face--neu{rotate:y 0deg;transition-delay:.5s}
.sv3-h rect{fill:var(--teal-900);transition:fill .25s var(--us-ease)}
.story__visual[data-step="2"] .sv3-h rect{fill:#FFFFFF}
.story__visual[data-step="2"] .sv3-h rect:nth-child(1){transition-delay:1.3s}
.story__visual[data-step="2"] .sv3-h rect:nth-child(2){transition-delay:1.38s}
.story__visual[data-step="2"] .sv3-h rect:nth-child(3){transition-delay:1.46s}
.story__visual[data-step="2"] .sv3-h rect:nth-child(4){transition-delay:1.54s}
.story__visual[data-step="2"] .sv3-h rect:nth-child(5){transition-delay:1.62s}
.story__visual[data-step="2"] .sv3-h rect:nth-child(6){transition-delay:1.7s}
.story__visual[data-step="2"] .sv3-h rect:nth-child(7){transition-delay:1.78s}
.sv3-glow--1{offset-path:path("M100 100 L176 176")}
.sv3-glow--2{offset-path:path("M380 100 L304 176")}
.sv3-glow--3{offset-path:path("M100 380 L176 304")}
.sv3-glow--4{offset-path:path("M380 380 L304 304")}
/* Die vier Punkte laufen nacheinander, es ist immer nur einer unterwegs. */
.story__visual[data-step="2"] .sv3-glow{animation:sv3-lauf 6.4s linear 2s infinite}
.story__visual[data-step="2"] .sv3-glow--2{animation-delay:3.6s}
.story__visual[data-step="2"] .sv3-glow--3{animation-delay:5.2s}
.story__visual[data-step="2"] .sv3-glow--4{animation-delay:6.8s}
@keyframes sv3-lauf{0%{offset-distance:0%;opacity:0}4%,21%{opacity:1}25%,100%{offset-distance:100%;opacity:0}}
.story__visual[data-step="2"] .sv3-cap{animation:us-rein .5s var(--us-ease) 2s both}

/* 4 · Heute in Kassel. */
.sv4-foto{position:absolute;left:36px;top:70px;width:408px;height:292px;padding:10px;background:#FFFFFF;border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);border-radius:20px;
  box-shadow:0 24px 50px -26px color-mix(in srgb,var(--ink) 40%,transparent)}
.sv4-foto img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px}
.sv4-pin{left:320px;top:40px}
.sv4-park{left:20px;top:340px}
.sv4-pilot{left:190px;top:400px;padding-left:16px}
.sv4-puls{width:10px;height:10px;border-radius:50%;background:var(--violet-500);animation:sv-puls 1.8s ease-out infinite}
@keyframes sv-puls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--violet-500) 55%,transparent)}100%{box-shadow:0 0 0 12px color-mix(in srgb,var(--violet-500) 0%,transparent)}}
.story__visual[data-step="3"] .sv4-pin{animation:sv-pin .6s var(--us-ease) .3s both}
@keyframes sv-pin{from{opacity:0;translate:0 -24px}to{opacity:1;translate:0 0}}
.story__visual[data-step="3"] .sv4-park{animation:us-rein .5s var(--us-ease) .55s both}
.story__visual[data-step="3"] .sv4-pilot{animation:us-rein .5s var(--us-ease) .8s both}

/* Zeitleiste rechts: Linie, Fortschritt, ein Punkt je Abschnitt. */
.story__timeline{position:relative;padding-left:52px}
.story__timeline::before{content:"";position:absolute;left:13px;top:0;bottom:0;width:2px;border-radius:2px;background:color-mix(in srgb,var(--teal-500) 16%,transparent)}
.story__prog{position:absolute;left:13px;top:0;width:2px;height:0;border-radius:2px;background:linear-gradient(180deg,var(--violet-300),var(--violet-500))}
.story__steps{margin:0;padding:0;list-style:none}
.ts{position:relative;display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:64vh;padding:40px 0;opacity:.35;transition:opacity .4s var(--us-ease)}
.ts.is-on{opacity:1}
.ts::before{content:"";position:absolute;left:-52px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--card);
  border:2px solid color-mix(in srgb,var(--teal-500) 30%,transparent);box-shadow:0 0 0 6px var(--violet-50);transition:background-color .3s var(--us-ease),border-color .3s var(--us-ease)}
.ts::after{content:"";position:absolute;left:-43px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#FFFFFF;opacity:0;transition:opacity .3s var(--us-ease)}
.ts.is-on::before,.ts.is-done::before{background:var(--violet-500);border-color:var(--violet-500)}
.ts.is-on::after{opacity:1}
.ts__lbl{align-self:flex-start;display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:var(--radius-pill);background:#FFFFFF;
  box-shadow:0 8px 18px -10px color-mix(in srgb,var(--blue-900) 35%,transparent);font-size:12px;font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--violet-700)}
.story .ts p{font-size:19px;line-height:1.65;color:var(--violet-700)}
.story .ts p strong{color:var(--ink)}
html:not(.js) .ts{opacity:1}

/* ── Grundsätze — drei Karten mit Szene ──────────────────────────────── */
.principles{--t-500:var(--teal-500);--t-700:var(--teal-700);background:var(--page);
  padding-bottom:calc(var(--section-py-web) + 120px)}
.principles .sec-head h2{font-size:40px}
.principles .sec-head .eyebrow{color:var(--teal-500)}
.principles .sec-head .lead{color:var(--teal-700)}
.pcard{display:flex;flex-direction:column;gap:12px;padding:10px 10px 30px;border-radius:24px;
  background:linear-gradient(160deg,var(--teal-100),var(--teal-50));border:1px solid var(--teal-200)}
.pcard__art{position:relative;height:252px;margin-bottom:10px;border-radius:16px;overflow:hidden;container-type:inline-size;
  background:radial-gradient(80% 75% at 50% 42%,#FFFFFF 0%,#F6F9F3 62%,#EDF2E8 100%)}
.pcard__n,.pcard h3,.pcard>p{margin:0 22px}
.pcard__n{font-family:var(--font-heading);font-weight:400;font-size:15px;color:var(--teal-500)}
.pcard h3{font-size:24px;line-height:1.25;color:var(--ink)}
.pcard>p{font-size:15px;line-height:1.55;color:var(--teal-700)}

/* Szenen: feste Bühne 340 × 236. Ruhig und hell: weiße Karten, feine
   gestrichelte Wege, höchstens ein grüner Punkt. Die Startzustände gelten
   nur mit html.js, ohne JavaScript steht jedes Bild im Endzustand. */
.us-sc{--k:1;position:absolute;left:50%;top:50%;width:340px;height:236px;translate:-50% -50%;scale:var(--k);transition:opacity .3s var(--us-ease)}
.us-sc.is-fade{opacity:0}
.us-sc.is-reset *,.us-sc.is-reset *::after{transition:none!important;animation:none!important}
@container (max-width:356px){.us-sc{--k:.92}}
@container (max-width:320px){.us-sc{--k:.8}}
.gs{--gs-rand:color-mix(in srgb,var(--ink) 7%,transparent);--gs-schatten:0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent),0 14px 34px -16px color-mix(in srgb,var(--ink) 22%,transparent);
  --gs-grau:var(--muted);--gs-gruen:var(--violet-500);--gs-ring:0 0 0 3px color-mix(in srgb,var(--violet-500) 14%,transparent)}
.gs .icon{flex:0 0 auto}
.gs-k{position:absolute;display:block;background:#FFFFFF;border:1px solid var(--gs-rand);border-radius:14px;box-shadow:var(--gs-schatten);color:var(--ink)}
.gs-lbl{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:var(--fw-bold);line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--gs-grau);white-space:nowrap}
.gs-lbl .icon{width:12px;height:12px;color:var(--teal-500)}
.gs-text{display:block;font-size:12.5px;line-height:1.5;color:var(--ink)}
.gs-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.gs-t b{font-size:12.5px;font-weight:var(--fw-bold);line-height:1.3;white-space:nowrap}
.gs-ic{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#F1F3F5;color:var(--muted)}
.gs-ic .icon{width:12px;height:12px}
.gs-ic--blau{background:#E8F0FD;color:#3D6FD6}
.gs-ic--gelb{background:var(--amber-50);color:var(--amber-500)}
.gs-ic--gruen{background:var(--teal-50);color:var(--teal-700)}
.gs-ic--rot{background:var(--red-50);color:#C8453F}
.gs-ok{display:grid;place-items:center;flex:0 0 auto;width:18px;height:18px;margin-left:auto;border-radius:50%;background:var(--gs-gruen);color:#FFFFFF}
.gs-ok .icon{width:10px;height:10px}
.gs-linien{position:absolute;left:0;top:0;width:340px;height:236px;overflow:visible;pointer-events:none}
.gs-weg{fill:none;stroke:#CDD3DB;stroke-width:1.5;stroke-dasharray:4 5;stroke-linecap:round}
.gs-weg--ja{stroke:var(--teal-300)}
.gs-punkt{position:absolute;z-index:3;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--gs-gruen);opacity:0;offset-rotate:0deg;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--violet-500) 16%,transparent),0 0 12px color-mix(in srgb,var(--violet-500) 55%,transparent)}
.gs-schalter{position:relative;flex:0 0 auto;width:32px;height:18px;margin-left:auto;border-radius:99px;background:var(--gs-gruen)}
.gs-schalter::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#FFFFFF;translate:14px 0;
  box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 25%,transparent)}
/* Zeiger mit Namensschild, --c ist die Farbe der Person. */
.gs-zeiger{position:absolute;z-index:6;display:flex;align-items:flex-start;gap:2px;pointer-events:none}
.gs-zeiger svg{width:18px;height:18px;overflow:visible;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.gs-zeiger path{fill:var(--c,var(--teal-700));stroke:#FFFFFF;stroke-width:1.2;stroke-linejoin:round}
.gs-zeiger em{margin-top:14px;padding:3px 9px;border-radius:99px;background:var(--c,var(--teal-700));color:#FFFFFF;
  font-style:normal;font-size:11px;font-weight:var(--fw-bold);line-height:1.3;white-space:nowrap}

/* 01 · Nur Kommunikation: Nachrichten gehen zu HausChat, der Rest bleibt im eigenen Programm. */
.gs-frage{left:92px;top:26px;width:156px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);
  font-size:12px;font-weight:var(--fw-bold);white-space:nowrap}
.gs-ast{position:absolute;top:60px;padding:1px 6px;border-radius:var(--radius-pill);background:#FFFFFF;font-size:10.5px;font-weight:var(--fw-bold);line-height:1.4;color:var(--gs-grau)}
.gs-ast--ja{left:100px;color:var(--teal-500)}
.gs-ast--nein{left:206px}
.gs-spalte{top:84px;width:148px;padding:10px 12px}
.gs-spalte--hc{left:12px;border-color:color-mix(in srgb,var(--violet-500) 45%,transparent);box-shadow:var(--gs-ring),var(--gs-schatten)}
.gs-spalte--prog{left:180px;background:#FAFAFB}
.gs-kopf{display:flex;align-items:center;gap:8px;margin-bottom:4px;padding-bottom:8px;border-bottom:1px solid #EEF1F4;font-size:12.5px;font-weight:var(--fw-bold)}
.gs-kopf>img{width:22px;height:22px;border-radius:6px}
.gs-zeile{display:flex;align-items:center;gap:8px;height:28px;font-size:12px;color:var(--body)}
.gs-zeile>img{width:22px;height:22px}
.gs-spalte--prog .gs-kopf,.gs-spalte--prog .gs-zeile{color:var(--gs-grau)}
.gs--nur .gs-punkt{offset-path:path("M170 56 C170 70 86 64 86 84")}

html.js .gs--nur .gs-weg{opacity:0;transition:opacity .3s var(--us-ease) .4s}
html.js .gs--nur .gs-spalte--hc{border-color:var(--gs-rand);box-shadow:var(--gs-schatten);
  transition:border-color .3s var(--us-ease) 1.5s,box-shadow .3s var(--us-ease) 1.5s}
html.js .gs--nur .gs-ok{scale:0;transition:scale .35s cubic-bezier(.34,1.56,.64,1) 1.6s}
html.js .gs--nur.is-play .gs-weg{opacity:1}
html.js .gs--nur.is-play .gs-punkt{animation:us-lauf .9s var(--us-ease) .6s both}
html.js .gs--nur.is-play .gs-spalte--hc{border-color:color-mix(in srgb,var(--violet-500) 45%,transparent);box-shadow:var(--gs-ring),var(--gs-schatten)}
html.js .gs--nur.is-play .gs-ok{scale:1}

/* 02 · Kontrolle: Sie senden den Vorschlag selbst; automatisch geht nur, was eine Regel erlaubt. */
.gs-vorschlag{left:14px;top:14px;width:268px;padding:14px 16px}
.gs-vorschlag .gs-text{margin-top:8px}
.gs-knoepfe{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.gs-knopf{display:grid;height:30px;border-radius:9px;font-size:12px;font-weight:var(--fw-bold);white-space:nowrap}
.gs-knopf>span,.gs-knopf--hell{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px}
.gs-knopf>span{grid-area:1/1;transition:opacity .2s var(--us-ease)}
.gs-knopf .icon{width:13px;height:13px}
.gs-knopf--hell{border:1px solid var(--gs-rand);color:var(--body)}
.gs-knopf--senden{background:var(--green-500);border:1px solid #176B41;color:#FFFFFF}
.gs-knopf--senden .a{opacity:0}
.gs-regel{left:58px;top:164px;width:268px;height:50px;display:flex;align-items:center;gap:10px;padding:0 12px}
.gs-regel .gs-ic{width:28px;height:28px}
.gs-regel .gs-ic .icon{width:14px;height:14px}
.gs--kontrolle .gs-zeiger{left:229px;top:117px}

html.js .gs--kontrolle .gs-knopf--senden{background:var(--knopf-gruen,var(--teal-700));transition:background-color .25s var(--us-ease) 1.6s}
html.js .gs--kontrolle .gs-knopf--senden .a{opacity:1;transition-delay:1.6s}
html.js .gs--kontrolle .gs-knopf--senden .b{opacity:0;transition-delay:1.6s}
html.js .gs--kontrolle .gs-zeiger{opacity:0;translate:60px 90px;transition:opacity .3s var(--us-ease) .5s,translate .8s var(--us-ease) .5s}
html.js .gs--kontrolle .gs-regel{opacity:0;translate:0 10px;transition:opacity .45s var(--us-ease) 2.2s,translate .45s var(--us-ease) 2.2s}
html.js .gs--kontrolle.is-play .gs-knopf--senden{background:var(--green-500);animation:us-druck .3s var(--us-ease) 1.4s}
html.js .gs--kontrolle.is-play .gs-knopf--senden .a{opacity:0}
html.js .gs--kontrolle.is-play .gs-knopf--senden .b,html.js .gs--kontrolle.is-play .gs-zeiger,html.js .gs--kontrolle.is-play .gs-regel{opacity:1}
html.js .gs--kontrolle.is-play .gs-zeiger,html.js .gs--kontrolle.is-play .gs-regel{translate:0 0}

/* 03 · Daten: der Export läuft vollständig durch, dazu EU-Server und kein KI-Training. */
.gs-export{left:44px;top:36px;width:252px;padding:12px 16px 14px}
.gs-export .gs-kopf{margin-bottom:0;padding-bottom:0;border-bottom:0}
.gs-export .gs-ic{width:28px;height:28px}
.gs-export .gs-ic .icon{width:14px;height:14px}
.gs-status{display:grid;font-size:11px;color:var(--gs-grau)}
.gs-status>span{grid-area:1/1;white-space:nowrap;transition:opacity .25s var(--us-ease)}
.gs-status .a{opacity:0}
.gs-status .b{color:var(--teal-500);font-weight:var(--fw-bold)}
.gs-balken{position:relative;display:block;height:6px;margin:12px 0 10px;border-radius:var(--radius-pill);background:#EEF1F4;overflow:hidden}
.gs-balken i{position:absolute;inset:0;border-radius:var(--radius-pill);background:var(--gs-gruen);transform-origin:0 50%}
.gs-posten{display:flex;align-items:center;gap:8px;height:26px;font-size:12px;color:var(--body)}
.gs-posten b{margin-left:auto;font-size:12px;color:var(--ink)}
.gs-haken{display:grid;place-items:center;flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:var(--gs-gruen);color:#FFFFFF}
.gs-haken .icon{width:9px;height:9px}
.gs-pille{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 5px;border-radius:var(--radius-pill);font-size:12px;font-weight:var(--fw-bold);white-space:nowrap}
.gs-pille--eu{left:170px;top:18px}
.gs-pille--ki{left:14px;top:186px}
.gs-flagge{flex:0 0 auto;width:20px;height:20px}

html.js .gs--daten .gs-status .a{opacity:1;transition-delay:2.3s}
html.js .gs--daten .gs-status .b{opacity:0;transition-delay:2.3s}
html.js .gs--daten .gs-balken i{scale:0 1;transition:scale 1.6s var(--us-ease) .6s}
html.js .gs--daten .gs-haken{background:#DDE2E8;transition:background-color .25s var(--us-ease) 1s}
html.js .gs--daten .gs-posten--2 .gs-haken{transition-delay:1.5s}
html.js .gs--daten .gs-posten--3 .gs-haken{transition-delay:2s}
html.js .gs--daten .gs-pille{opacity:0;translate:0 6px;transition:opacity .35s var(--us-ease) 2.5s,translate .35s var(--us-ease) 2.5s}
html.js .gs--daten .gs-pille--ki{transition-delay:2.8s}
html.js .gs--daten.is-play .gs-status .a{opacity:0}
html.js .gs--daten.is-play .gs-status .b,html.js .gs--daten.is-play .gs-pille{opacity:1}
html.js .gs--daten.is-play .gs-balken i{scale:1 1}
html.js .gs--daten.is-play .gs-haken{background:var(--gs-gruen)}
html.js .gs--daten.is-play .gs-pille{translate:0 0}

/* ── Pilotphase — als Ticket ─────────────────────────────────────────── */
.channels{--t-100:var(--teal-100);--t-200:var(--teal-200);--t-300:var(--teal-300);
  position:relative;margin-top:-120px;padding:420px 0 110px;
  background:
    radial-gradient(150% 480px at 14% -150px,color-mix(in srgb,var(--page) 55%,transparent),color-mix(in srgb,var(--page) 0%,transparent) 70%),
    radial-gradient(130% 400px at 78% -120px,color-mix(in srgb,var(--page) 45%,transparent),color-mix(in srgb,var(--page) 0%,transparent) 68%),
    linear-gradient(180deg,
      color-mix(in srgb,var(--page) 100%,transparent) 0px,color-mix(in srgb,var(--page) 98%,transparent) 40px,color-mix(in srgb,var(--page) 92.6%,transparent) 80px,
      color-mix(in srgb,var(--page) 84.4%,transparent) 120px,color-mix(in srgb,var(--page) 74.1%,transparent) 160px,color-mix(in srgb,var(--page) 62.4%,transparent) 200px,
      color-mix(in srgb,var(--page) 50%,transparent) 240px,color-mix(in srgb,var(--page) 37.6%,transparent) 280px,color-mix(in srgb,var(--page) 25.9%,transparent) 320px,
      color-mix(in srgb,var(--page) 15.6%,transparent) 360px,color-mix(in srgb,var(--page) 7.4%,transparent) 400px,color-mix(in srgb,var(--page) 2%,transparent) 440px,
      color-mix(in srgb,var(--page) 0%,transparent) 480px),
    linear-gradient(160deg,var(--teal-700),var(--teal-900) 72%,var(--teal-900) 100%)}
.channels .sec-head h2{font-size:40px}
.channels .sec-head .eyebrow{color:var(--teal-200)}
/* Das Ticket selbst steht in css/ticket.css, weil die Startseite es auch zeigt. */

/* ── Breiten ───────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .u-hero{padding:calc(88px + var(--nav-height)) 0 72px}
  /* Untereinander steht der Einstieg mittig, wie die Abschnitte darunter. */
  .u-hero__top{grid-template-columns:1fr;gap:24px;justify-items:center;text-align:center}
  .u-hero__title{align-items:center}
  .ueber .u-hero .u-lead{max-width:34em}
  .u-facts{grid-template-columns:1fr;margin-top:48px}
  .u-fact,.u-fact+.u-fact{align-items:center;padding:24px 0;border-left:0;text-align:center}
  .u-fact dd{align-items:center}
  .u-fact+.u-fact{border-top:1px solid var(--hairline)}
  .team .sec-head h2,.story__head h2,.principles .sec-head h2,.channels .sec-head h2{font-size:32px}
  .team__grid{grid-template-columns:1fr;gap:64px;max-width:560px}
  .principles{padding-bottom:calc(var(--section-py-web) + 70px)}
  /* Zeitleiste: das Bild klebt oben, der Text läuft darunter durch. */
  .story__grid{grid-template-columns:1fr;gap:0}
  .story__stick{top:calc(var(--nav-height) + 4px);z-index:3;padding:8px 0 16px;background:var(--violet-50)}
  .story__visual{max-width:none;height:300px;aspect-ratio:auto;margin:0;border-radius:24px}
  .story .sv{--k:.6}
  .ts{min-height:58vh;padding:28px 0}
  .story .ts p{font-size:17px}
}
@media (max-width:640px){
  .ueber .u-lead{font-size:17px}
  .ueber .u-num{font-size:40px}
  .badge{width:270px}
  .badge__cursor{right:-4px}
  .badge__sticker--kassel{left:-14px}
  .badge__sticker--pause{right:-14px}
  .channels{margin-top:-70px;padding-top:260px;background:
    radial-gradient(150% 300px at 20% -100px,color-mix(in srgb,var(--page) 50%,transparent),color-mix(in srgb,var(--page) 0%,transparent) 70%),
    linear-gradient(180deg,color-mix(in srgb,var(--page) 100%,transparent) 0px,color-mix(in srgb,var(--page) 90%,transparent) 50px,color-mix(in srgb,var(--page) 62%,transparent) 110px,color-mix(in srgb,var(--page) 30%,transparent) 180px,color-mix(in srgb,var(--page) 8%,transparent) 240px,color-mix(in srgb,var(--page) 0%,transparent) 290px),
    linear-gradient(160deg,var(--teal-700),var(--teal-900) 72%,var(--teal-900) 100%)}
}

@media (prefers-reduced-motion:reduce){
  .badge,.badge__cursor,.sv-glow,.sv4-puls,.story__visual .sv *,.us-sc *{animation:none!important}
  .sv,.sv3-face,.sv3-h rect,.us-sc *,.us-sc *::after{transition:none!important}
  .sv-glow,.gs-punkt{display:none}
}