/* ==========================================================================
   HausChat — Startseite, Abschnitt „Der Alltag“ (dunkles Grün)
   Wird nur von index.html nach styles.css geladen. Oben ein Umschalter:
   verstreute Meldungen aus Telefon, Briefkasten, Postfach und WhatsApp —
   oder dieselben Meldungen geordnet im HausChat-Eingang. Darunter zwei
   Glas-Karten mit kleinen Szenen.
   Links stehen die Kanäle als echte Logos, wie in „So läuft es“.
   Bewusste Abweichungen vom Regelwerk, nur hier:
   – Schwebende Bausteine tragen Schatten, die Karten sind Milchglas.
   – Rote Zähler an den Kanälen: sie zeigen den Stress, nicht eine Frist.
   Die Bühne ist in festen Maßen gezeichnet (1180 × 520, schmal 360 × 800)
   und wird per Skript auf die Breite skaliert (--s).
   ========================================================================== */

.usecases{--glas:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.03));--glas-rand:rgba(255,255,255,.11);
  --al-dash:color-mix(in srgb,var(--violet-200) 50%,transparent);--al-schatten:0 18px 38px -14px rgba(0,0,0,.55);--al-rot:var(--red-500);--al-ease:cubic-bezier(.22,.61,.36,1)}

/* „Oder HausChat.“ — ein helles Band wandert durch die Schrift. */
.al-oder{color:var(--teal-200)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .al-oder{background-image:linear-gradient(100deg,var(--teal-300) 0%,var(--teal-300) 35%,#FFFFFF 50%,var(--teal-300) 65%,var(--teal-300) 100%);
    background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
    animation:al-schimmer 4.5s linear infinite}
}
@keyframes al-schimmer{to{background-position:-200% center}}

/* ── Umschalter ──────────────────────────────────────────────────────── */
.al-switch{position:relative;display:flex;width:max-content;margin:0 auto 36px;padding:5px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.08);border:1px solid var(--glas-rand);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.al-switch__thumb{position:absolute;left:0;top:5px;bottom:5px;width:0;border-radius:var(--radius-pill);background:#FFFFFF;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.45);transition:translate .45s var(--al-ease),width .45s var(--al-ease)}
.al-switch__btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 22px;border:0;border-radius:var(--radius-pill);
  background:none;font-family:var(--font-body);font-weight:var(--fw-bold);font-size:16px;color:var(--teal-100);cursor:pointer;transition:color .3s var(--al-ease)}
.al-switch__btn:hover{color:#FFFFFF}
.al-switch__btn.is-on{color:var(--ink)}
.al-switch__icons{display:flex;gap:12px}
.al-switch__icons .icon{width:19px;height:19px}
.al-switch__btn img{width:24px;height:24px;border-radius:7px}
/* Ohne Skript gibt es keinen wandernden Daumen, dann trägt der aktive Knopf die Fläche. */
html:not(.js) .al-switch__btn.is-on{background:#FFFFFF}

/* ── Bühne ───────────────────────────────────────────────────────────── */
/* --s setzt das Skript an der Bühne; ohne Skript gelten grobe Stufen. */
.al-stage{position:relative;height:calc(520px * var(--s,1));margin-bottom:88px}
html:not(.js) .al-stage{--s:.62}
@media (min-width:1100px){html:not(.js) .al-stage{--s:.85}}
@media (min-width:1300px){html:not(.js) .al-stage{--s:1}}
.al-board{position:absolute;left:50%;top:0;width:1180px;height:520px;translate:-50% 0;scale:var(--s);transform-origin:50% 0}

/* Leitungen: im Alltag nur blasse Spuren, mit HausChat laufen sie in den Eingang. */
.al-wires{position:absolute;left:0;top:0;width:1180px;height:520px;overflow:visible;pointer-events:none}
.al-wires path{fill:none;stroke-linecap:round;transition:opacity .5s var(--al-ease)}
.al-wires__base{stroke:rgba(255,255,255,.12);stroke-width:1.5;stroke-dasharray:3 8}
.al-wires__to{stroke:var(--al-dash);stroke-width:1.6;stroke-dasharray:5 6;opacity:0;animation:al-strom 1.2s linear infinite}
@keyframes al-strom{to{stroke-dashoffset:-22}}
[data-view="hauschat"] .al-wires__base{opacity:0}
[data-view="hauschat"] .al-wires__to{opacity:1;transition-delay:.35s}

.al-dot{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--teal-200);opacity:0;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--violet-200) 22%,transparent),0 0 18px 4px color-mix(in srgb,var(--violet-200) 65%,transparent)}
.al-dot--1{offset-path:path("M366 68 C500 68 500 150 640 150")}
.al-dot--2{offset-path:path("M366 194 C500 194 500 230 640 230")}
.al-dot--3{offset-path:path("M366 320 C500 320 500 310 640 310")}
.al-dot--4{offset-path:path("M366 446 C500 446 500 390 640 390")}
[data-view="hauschat"] .al-dot{animation:al-lauf 2.4s linear infinite}
[data-view="hauschat"] .al-dot--2{animation-delay:.6s}
[data-view="hauschat"] .al-dot--3{animation-delay:1.2s}
[data-view="hauschat"] .al-dot--4{animation-delay:1.8s}
@keyframes al-lauf{0%{offset-distance:0%;opacity:0}15%,85%{opacity:1}100%{offset-distance:100%;opacity:0}}

/* Kanäle links: Glas, 3D-Kachel, Titel und Satz. */
/* --sx0/--sxi: wohin jedes Logo rückt, wenn sich die Reihe ordnet (siehe unten). */
.al-lanes{--sx0:-4.6px;--sxi:5.8px;position:absolute;left:0;top:0;width:360px;height:520px}
.al-lane{position:absolute;left:0;width:360px;height:100px;display:flex;align-items:center;gap:20px;padding:0 18px;
  background:var(--glas);border:1px solid var(--glas-rand);border-radius:22px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.al-lane--1{top:18px}
.al-lane--2{top:144px}
.al-lane--3{top:270px}
.al-lane--4{top:396px}
/* Logos als kleiner, unordentlicher Fächer: vorn liegt das erste, die anderen
   schauen dahinter hervor. --i ist die Stelle in der Reihe. */
.al-lane__tiles{position:relative;display:flex;align-items:center;flex:0 0 auto}
.al-logo{--i:0;position:relative;z-index:4;display:grid;place-items:center;flex:0 0 auto;width:46px;height:46px;border-radius:13px;background:#FFFFFF;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.6);rotate:-6deg;
  transition:rotate .55s var(--al-ease) calc(.1s + var(--i) * 70ms),translate .55s var(--al-ease) calc(.1s + var(--i) * 70ms),
    scale .55s var(--al-ease) calc(.1s + var(--i) * 70ms)}
.al-logo+.al-logo{margin-left:-11px}
.al-logo:nth-child(2){--i:1;z-index:3;rotate:5deg;translate:0 -4px}
.al-logo:nth-child(3){--i:2;z-index:2;rotate:-4deg;translate:0 3px}
.al-logo:nth-child(4){--i:3;z-index:1;rotate:7deg;translate:0 -3px}
/* Mit HausChat ordnen sich die Logos, eins nach dem anderen, zu einer geraden
   Reihe mit Abstand: etwas kleiner (0,8), damit die Reihe fast so breit
   bleibt wie der Fächer und der Text daneben nicht springt.
   Verschiebung je Logo = Ziel-Mitte − Mitte im Fächer:
   (46·0,8/2 + i·(46·0,8 + 4)) − (46/2 + i·35) = −4,6 + 5,8·i */
[data-view="hauschat"] .al-lane .al-logo{rotate:0deg;scale:.8;translate:calc(var(--sx0) + var(--i) * var(--sxi)) 0}
.al-logo img{width:58%;height:58%;object-fit:contain}
.al-logo--wort img{width:76%;height:64%}
.al-logo--breit img{width:80%;height:42%}
.al-badge{position:absolute;top:-9px;right:-11px;z-index:5;display:grid;place-items:center;min-width:25px;height:25px;padding:0 7px;border-radius:var(--radius-pill);
  background:var(--al-rot);color:#FFFFFF;font-style:normal;font-weight:var(--fw-bold);font-size:12px;line-height:1;box-shadow:0 0 0 3px #1B4213;
  transition:background-color .35s var(--al-ease)}
.al-badge>*{grid-area:1/1;transition:opacity .25s var(--al-ease),scale .25s var(--al-ease)}
.al-badge .icon{width:13px;height:13px;opacity:0;scale:.5}
[data-view="hauschat"] .al-badge{background:var(--violet-500)}
[data-view="hauschat"] .al-badge span{opacity:0;scale:.5}
[data-view="hauschat"] .al-badge .icon{opacity:1;scale:1}
.al-lane__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.al-lane__t strong{font-weight:var(--fw-bold);font-size:17px;line-height:1.3;color:#FFFFFF}
.al-lane__t span{font-size:14px;line-height:1.4;color:var(--teal-200)}
/* Im Alltag klingelt das Telefon. */
[data-view="alltag"] .al-logo--ring{animation:al-klingeln 2.6s ease-in-out infinite}
@keyframes al-klingeln{0%,30%,100%{rotate:-5deg}5%{rotate:-16deg}10%{rotate:6deg}15%{rotate:-13deg}20%{rotate:3deg}25%{rotate:-8deg}}

/* Eingang rechts, erscheint nur mit HausChat. */
.al-window{position:absolute;left:640px;top:10px;width:540px;height:500px;background:#F4F6F1;border-radius:26px;overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6);opacity:0;scale:.96;translate:0 14px;
  transition:opacity .45s var(--al-ease),scale .45s var(--al-ease),translate .45s var(--al-ease)}
.al-window__head{display:flex;align-items:center;gap:12px;height:64px;padding:0 20px;background:#FFFFFF;border-bottom:1px solid var(--hairline)}
.al-window__head img{width:30px;height:30px;border-radius:8px}
.al-window__head b{font-family:var(--font-heading);font-weight:400;font-size:21px;color:var(--ink)}
.al-window__count{margin-left:auto;display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:var(--radius-pill);
  background:var(--teal-50);color:var(--teal-700);font-size:12.5px;font-weight:var(--fw-bold)}
[data-view="hauschat"] .al-window{opacity:1;scale:1;translate:0 0}

/* Meldungen: dieselben fünf Elemente in beiden Ansichten, nur Lage und Breite ändern sich. */
.al-items{position:absolute;inset:0;pointer-events:none}
.al-item{position:absolute;left:0;top:0;z-index:2;width:var(--w);translate:var(--x) var(--y);rotate:var(--r);
  transition:translate .8s var(--al-ease),rotate .8s var(--al-ease),width .8s var(--al-ease);transition-delay:var(--dl,0s)}
[data-view="alltag"] .al-item{--x:var(--ax);--y:var(--ay);--r:var(--ar);--w:300px}
[data-view="hauschat"] .al-item{--x:656px;--y:var(--by);--r:0deg;--w:508px}
.al-item--0{--ax:410px;--ay:190px;--ar:-5deg;--by:84px;--dl:0s}
.al-item--1{--ax:520px;--ay:312px;--ar:3deg;--by:154px;--dl:.07s}
.al-item--2{--ax:860px;--ay:40px;--ar:-3deg;--by:224px;--dl:.14s}
.al-item--5{--ax:820px;--ay:430px;--ar:-4deg;--by:294px;--dl:.21s}
.al-item--3{--ax:820px;--ay:206px;--ar:5deg;--by:364px;--dl:.28s}
.al-item--4{--ax:452px;--ay:60px;--ar:6deg;--by:434px;--dl:.35s}

.al-item__in{display:flex;align-items:center;gap:12px;height:62px;padding:0 14px;background:#FFFFFF;border-radius:16px;overflow:hidden;
  box-shadow:var(--al-schatten);color:var(--ink);transition:box-shadow .5s var(--al-ease)}
[data-view="alltag"] .al-item__in{animation:al-wackeln 3.4s ease-in-out infinite alternate}
[data-view="alltag"] .al-item--1 .al-item__in{animation-delay:-.9s;animation-duration:2.9s}
[data-view="alltag"] .al-item--2 .al-item__in{animation-delay:-1.7s}
[data-view="alltag"] .al-item--3 .al-item__in{animation-delay:-2.4s;animation-duration:3.8s}
[data-view="alltag"] .al-item--4 .al-item__in{animation-delay:-.4s;animation-duration:3.1s}
[data-view="alltag"] .al-item--5 .al-item__in{animation-delay:-1.3s;animation-duration:3.6s}
@keyframes al-wackeln{from{translate:0 0}to{translate:0 -7px}}
[data-view="hauschat"] .al-item__in{box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 6%,transparent),0 8px 18px -10px color-mix(in srgb,var(--ink) 22%,transparent)}

.al-ch{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:50%;color:#FFFFFF}
.al-ch .icon{width:17px;height:17px}
.al-ch--wa{background:var(--violet-500)}
.al-ch--mail{background:#3D7FEA}
.al-ch--post{background:var(--sonne-500)}
.al-ch--tel{background:var(--himmel-500)}
.al-ch--portal{background:#12A58A}
.al-item__t{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.al-item__t b{font-size:14px;font-weight:var(--fw-bold);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-item__t span{font-size:13px;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-item time{flex:0 0 auto;max-width:64px;overflow:hidden;white-space:nowrap;font-size:12px;color:var(--muted);
  transition:max-width .4s var(--al-ease),opacity .3s var(--al-ease)}
/* Objekt und Status kommen erst im Eingang dazu, die Uhrzeit tritt zurück. */
.al-item__tag,.al-item__chip{flex:0 0 auto;max-width:0;opacity:0;overflow:hidden;
  transition:max-width .5s var(--al-ease),opacity .35s var(--al-ease)}
.al-item__tag{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0;border-radius:var(--radius-pill);
  background:#F1F4EE;color:var(--teal-700);font-size:12px;font-weight:var(--fw-bold);white-space:nowrap}
.al-item__tag .icon{width:13px;height:13px;flex:0 0 auto}
[data-view="hauschat"] .al-item__tag{max-width:170px;opacity:1;padding:0 10px;transition-delay:.55s}
[data-view="hauschat"] .al-item__chip{max-width:130px;opacity:1;transition-delay:.65s}
[data-view="hauschat"] .al-item time{max-width:0;opacity:0;margin-left:-12px}

/* Zusätzliche Unruhe im Alltag. */
.al-noise{position:absolute;left:0;top:0;z-index:1;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 11px;border-radius:var(--radius-pill);
  background:#FFFFFF;box-shadow:var(--al-schatten);font-size:13px;font-weight:var(--fw-bold);color:var(--ink);white-space:nowrap;
  transition:opacity .4s var(--al-ease),scale .4s var(--al-ease),translate .8s var(--al-ease)}
.al-noise i{width:8px;height:8px;border-radius:50%;background:var(--al-rot);animation:al-blinken 1.2s ease-in-out infinite}
@keyframes al-blinken{50%{opacity:.3}}
.al-noise--1{translate:880px 336px;rotate:-4deg}
.al-noise--2{translate:720px 138px;rotate:4deg}
.al-noise--3{translate:560px 440px;rotate:3deg}
[data-view="hauschat"] .al-noise{opacity:0;scale:.6;translate:880px 260px}

/* ── Karten ──────────────────────────────────────────────────────────── */
.al-cards{align-items:stretch}
.al-card{display:flex;flex-direction:column;padding:10px;border-radius:28px;background:var(--glas);border:1px solid var(--glas-rand)}
/* Bildfeld hell wie ein Blick in die App: weiße Karten auf fast weißem Grund. */
.al-art{position:relative;border-radius:20px;overflow:hidden;container-type:inline-size;
  background:radial-gradient(80% 75% at 50% 42%,#FFFFFF 0%,#F3F6F0 62%,#E8EDE4 100%)}
.al-art__fit{--k:1;position:relative;height:calc(320px * var(--k) + 36px)}
@container (min-width:560px){.al-art__fit{--k:1.08}}
@container (min-width:480px) and (max-width:559.98px){.al-art__fit{--k:.92}}
@container (min-width:420px) and (max-width:479.98px){.al-art__fit{--k:.8}}
@container (min-width:370px) and (max-width:419.98px){.al-art__fit{--k:.7}}
@container (max-width:369.98px){.al-art__fit{--k:.62}}

.al-card__text{padding:26px 22px 24px}
/* Oben das Thema klein, darunter der Nutzen als Überschrift. */
.usecases .al-card__eyebrow{display:block;margin-bottom:10px;font-size:13px;font-weight:var(--fw-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-300)}
.al-card h3{font-size:var(--fs-h2);line-height:var(--lh-h2);color:#FFFFFF}
.usecases .al-card__sub{margin:8px 0 6px;font-size:16px;line-height:1.55;color:var(--teal-200)}
/* ── Bilder der zwei Karten: feste Bühne 520 × 320, mittig im Bildfeld ─
   Ruhig und hell: wenige weiße Karten, feine gestrichelte Wege, ein grüner
   Punkt, der die Nachricht trägt. Ohne JavaScript steht alles im Endzustand. */
.ill{--ill-rand:color-mix(in srgb,var(--ink) 7%,transparent);--ill-schatten:0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent),0 14px 34px -16px color-mix(in srgb,var(--ink) 22%,transparent);
  --ill-grau:var(--muted);--ill-gruen:var(--violet-500);--ill-ring:0 0 0 3px color-mix(in srgb,var(--violet-500) 14%,transparent);
  position:absolute;left:50%;top:50%;width:520px;height:320px;translate:-50% -50%;scale:var(--k,1);transition:opacity .3s var(--al-ease)}
.ill.is-fade{opacity:0}
.ill.is-reset *{transition:none!important;animation:none!important}
.ill-karte{position:absolute;display:block;background:#FFFFFF;border:1px solid var(--ill-rand);border-radius:14px;box-shadow:var(--ill-schatten);color:var(--ink)}
.ill-lbl{display:block;font-size:10px;font-weight:var(--fw-bold);line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--ill-grau);white-space:nowrap}
.ill-text{display:block;font-size:13px;line-height:1.5;color:var(--body)}
.ill-linien{position:absolute;left:0;top:0;width:520px;height:320px;overflow:visible;pointer-events:none}
.ill-weg{fill:none;stroke:#CDD3DB;stroke-width:1.5;stroke-dasharray:4 5;stroke-linecap:round}
.ill-weg--aktiv{stroke:var(--teal-300)}
.ill-punkt{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ill-gruen);opacity:0;
  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)}
@keyframes ill-lauf{0%{offset-distance:0%;opacity:0}15%,85%{opacity:1}100%{offset-distance:100%;opacity:0}}

/* Links: Nachricht kommt an und landet beim Zuständigen. */
.ill-nachricht{left:16px;top:70px;width:244px;padding:14px 16px}
.ill-absender{display:flex;align-items:center;gap:9px;margin:10px 0 8px}
.ill-absender img{width:26px;height:26px}
.ill-absender b{font-size:14px;font-weight:var(--fw-bold)}
.ill-absender time{margin-left:auto;font-size:12px;color:var(--ill-grau)}
.ill-erkannt{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:4px 10px;border-radius:99px;background:var(--teal-50);color:var(--teal-700);font-size:11.5px;font-weight:var(--fw-bold)}
.ill-erkannt .icon{width:13px;height:13px}
.ill-fach{display:flex;align-items:center;gap:10px;width:188px;height:58px;padding:0 12px}
.ill-fach--1{left:300px;top:38px;border-color:color-mix(in srgb,var(--violet-500) 45%,transparent);box-shadow:var(--ill-ring),var(--ill-schatten)}
.ill-fach--2{left:316px;top:131px;opacity:.7}
.ill-fach--3{left:332px;top:224px;opacity:.5}
.ill-fach__t{display:flex;flex-direction:column;gap:1px;min-width:0}
.ill-fach__t b{font-size:13px;font-weight:var(--fw-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ill-fach__t span{font-size:11.5px;color:var(--ill-grau);white-space:nowrap}
.ill-av{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:50%;font-size:11px;font-weight:var(--fw-bold)}
.ill-av--sk{background:var(--red-50);color:var(--red-500)}
.ill-av--tb{background:var(--himmel-100);color:var(--himmel-700)}
.ill-av--ay{background:var(--amber-50);color:var(--amber-500)}
.ill-neu{position:absolute;right:-8px;top:-9px;padding:3px 8px;border-radius:99px;background:var(--ill-gruen);color:#FFFFFF;
  font-style:normal;font-size:10.5px;font-weight:var(--fw-bold);box-shadow:0 4px 10px -4px color-mix(in srgb,var(--violet-500) 70%,transparent)}
.ill--rein .ill-punkt{offset-path:path("M260 124 C282 124 280 67 300 67")}

html.js .ill--rein .ill-nachricht{opacity:0;translate:-10px 0;transition:opacity .45s var(--al-ease) .1s,translate .45s var(--al-ease) .1s}
html.js .ill--rein .ill-erkannt{opacity:0;scale:.85;transition:opacity .3s var(--al-ease) 1s,scale .3s var(--al-ease) 1s}
html.js .ill--rein .ill-weg{opacity:0;transition:opacity .3s var(--al-ease) 1.3s}
html.js .ill--rein .ill-fach--1{border-color:var(--ill-rand);box-shadow:var(--ill-schatten);transition:border-color .3s var(--al-ease) 2.3s,box-shadow .3s var(--al-ease) 2.3s}
html.js .ill--rein .ill-neu{opacity:0;scale:.6;transition:opacity .25s var(--al-ease) 2.4s,scale .35s cubic-bezier(.34,1.56,.64,1) 2.4s}
html.js .ill--rein.is-play .ill-nachricht{opacity:1;translate:0 0}
html.js .ill--rein.is-play .ill-erkannt{opacity:1;scale:1}
html.js .ill--rein.is-play .ill-weg{opacity:1}
html.js .ill--rein.is-play .ill-punkt{animation:ill-lauf .9s var(--al-ease) 1.5s both}
html.js .ill--rein.is-play .ill-fach--1{border-color:color-mix(in srgb,var(--violet-500) 45%,transparent);box-shadow:var(--ill-ring),var(--ill-schatten)}
html.js .ill--rein.is-play .ill-neu{opacity:1;scale:1}

/* Rechts: Antwort schreiben, Senden, zurück über WhatsApp. */
.ill-antwort{left:40px;top:34px;width:330px;padding:14px 16px 16px}
.ill-antwort__kopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ill-vorlage{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border:1px solid var(--ill-rand);border-radius:99px;
  font-size:11px;font-weight:var(--fw-bold);color:var(--body)}
.ill-vorlage .icon{width:12px;height:12px;color:var(--ill-grau)}
.ill-antwort .ill-text{min-height:63px;margin-top:10px;font-size:14px;color:var(--ink)}
.ill-caret{display:inline-block;width:1.5px;height:16px;margin-left:2px;vertical-align:-3px;background:var(--ink);animation:ill-blink 1s steps(1) infinite}
@keyframes ill-blink{50%{opacity:0}}
.ill-senden{display:flex;align-items:center;gap:7px;width:max-content;height:34px;margin:12px 0 0 auto;padding:0 14px;border-radius:10px;
  background:var(--knopf-gruen,var(--teal-700));border:1px solid var(--knopf-gruen-rand,#2A5E1E);box-shadow:var(--knopf-gruen-schatten,none);
  color:#FFFFFF;font-size:13px;font-weight:var(--fw-bold)}
.ill-senden .icon{width:14px;height:14px}
.ill-kanal{position:absolute;top:224px;display:grid;place-items:center;width:62px;height:62px;border-radius:16px;background:#FFFFFF;
  border:1px solid var(--ill-rand);box-shadow:var(--ill-schatten);color:#9AA3AF}
.ill-kanal .icon{width:24px;height:24px}
.ill-kanal img{width:32px;height:32px}
.ill-kanal>span{position:absolute;top:calc(100% + 7px);left:50%;translate:-50% 0;font-size:11px;color:var(--ill-grau);white-space:nowrap}
.ill-kanal--1{left:176px;border-color:color-mix(in srgb,var(--violet-500) 45%,transparent);box-shadow:var(--ill-ring),var(--ill-schatten)}
.ill-kanal--2{left:256px}
.ill-kanal--3{left:336px}
.ill-ok{position:absolute;right:-7px;top:-7px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ill-gruen);
  color:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF}
.ill-ok .icon{width:11px;height:11px}
.ill-zeiger{--c:var(--teal-700);position:absolute;left:338px;top:174px;display:flex;align-items:flex-start;gap:2px}
.ill-zeiger svg{width:18px;height:18px;fill:var(--c);stroke:#FFFFFF;stroke-width:1.2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.ill-zeiger em{margin-top:14px;padding:3px 9px;border-radius:99px;background:var(--c);color:#FFFFFF;font-style:normal;font-size:11px;font-weight:var(--fw-bold)}
.ill--raus .ill-punkt{offset-path:path("M96 204 V255 H176")}
@keyframes ill-druck{50%{scale:.94}}

html.js .ill--raus .ill-zeiger{opacity:0;translate:70px 80px;transition:opacity .3s var(--al-ease) .2s,translate .8s var(--al-ease) .2s}
html.js .ill--raus .ill-weg{opacity:0;transition:opacity .3s var(--al-ease) 1.3s}
html.js .ill--raus .ill-kanal--1{border-color:var(--ill-rand);box-shadow:var(--ill-schatten);transition:border-color .3s var(--al-ease) 2.3s,box-shadow .3s var(--al-ease) 2.3s}
html.js .ill--raus .ill-ok{scale:0;transition:scale .35s cubic-bezier(.34,1.56,.64,1) 2.4s}
html.js .ill--raus.is-play .ill-zeiger{opacity:1;translate:0 0}
html.js .ill--raus.is-play .ill-senden{animation:ill-druck .3s var(--al-ease) 1.1s}
html.js .ill--raus.is-play .ill-weg{opacity:1}
html.js .ill--raus.is-play .ill-punkt{animation:ill-lauf .9s var(--al-ease) 1.4s both}
html.js .ill--raus.is-play .ill-kanal--1{border-color:color-mix(in srgb,var(--violet-500) 45%,transparent);box-shadow:var(--ill-ring),var(--ill-schatten)}
html.js .ill--raus.is-play .ill-ok{scale:1}

/* ── Schmal: Bühne 360 × 690, Kanäle oben, Meldungen darunter ────────── */
@media (max-width:760px){
  .al-stage{height:calc(800px * var(--s,1));margin-bottom:64px}
  html:not(.js) .al-stage{--s:.95}
  .al-board{width:360px;height:800px}
  .al-wires,.al-dot{display:none}
  /* Schmal: 34er Logos, Fächer-Schritt 26, geordnet 0,8 mit 3px Abstand. */
  .al-lanes{--sx0:-3.4px;--sxi:4.2px;width:360px;height:280px}
  .al-lane{width:360px;height:64px;gap:14px;padding:0 14px;border-radius:18px}
  .al-lane--1{top:0}
  .al-lane--2{top:72px}
  .al-lane--3{top:144px}
  .al-lane--4{top:216px}
  .al-logo{width:34px;height:34px;border-radius:10px}
  .al-logo+.al-logo{margin-left:-8px}
  .al-badge{top:-7px;right:-9px;min-width:21px;height:21px;padding:0 6px;font-size:11px;box-shadow:0 0 0 2px #1B4213}
  .al-lane__t strong{font-size:15px}
  .al-lane__t span{font-size:12.5px}
  .al-window{left:0;top:300px;width:360px;height:490px;border-radius:22px}
  .al-window__head{height:56px;padding:0 16px}
  .al-window__head b{font-size:19px}
  [data-view="alltag"] .al-item{--w:232px}
  [data-view="hauschat"] .al-item{--x:10px;--w:340px}
  .al-item--0{--ax:16px;--ay:318px;--ar:-4deg;--by:366px}
  .al-item--4{--ax:112px;--ay:392px;--ar:5deg;--by:696px}
  .al-item--2{--ax:16px;--ay:466px;--ar:3deg;--by:498px}
  .al-item--3{--ax:118px;--ay:540px;--ar:-5deg;--by:630px}
  .al-item--1{--ax:16px;--ay:614px;--ar:4deg;--by:432px}
  .al-item--5{--ax:112px;--ay:688px;--ar:-3deg;--by:564px}
  .al-item__in{gap:10px;padding:0 12px}
  .al-ch{width:30px;height:30px}
  .al-ch .icon{width:15px;height:15px}
  .al-item__tag{display:none}
  .al-noise--1{translate:160px 760px}
  .al-noise--2{translate:16px 758px}
  .al-noise--3{display:none}
  [data-view="hauschat"] .al-noise{translate:150px 540px}
}
@media (max-width:640px){
  .al-switch__btn{height:42px;padding:0 16px;font-size:15px}
  .al-switch__icons{gap:9px}
  .al-switch__icons .icon{width:17px;height:17px}
  .al-card__text{padding:22px 14px 18px}
  .al-card h3{font-size:26px}
}

@media (prefers-reduced-motion:reduce){
  .al-oder{animation:none;background-image:none;color:var(--teal-200);-webkit-text-fill-color:var(--teal-200)}
  .al-board *,.al-switch__thumb{transition:none!important;animation:none!important}
  .al-dot,.ill-punkt{display:none}
  .ill *{transition:none!important;animation:none!important}
}