/*
 * Die Startseite (15.10.2026, Entwurf 6 „Abend in der Stadt“).
 *
 * Oben der Abend: Grund und Akzente aus dem Farbprofil „Nacht“, davor echte App-Karten im hellen
 * Grunddesign. Beim Scrollen bleiben die Häuser stehen, dahinter wird es Morgen, und die Seite geht
 * in den hellen App-Look über. Nur die Startseite nutzt diese Datei - die Textseiten haben site.css.
 *
 * Die Zeichnungen (Avatare, Mitbewohner, Geschenke, Raumzeichen) stehen als SVG direkt in index.html.
 */
@font-face { font-family: 'Righteous'; font-weight: 400; font-display: swap; src: url('fonts/righteous-latin.woff2') format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
img, svg { display: block; }
.brand { display: inline-flex; align-items: center; gap: .3em; text-decoration: none; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.brand .mark { width: 1.15em; height: 1.15em; }
.mark .bowl { stroke: var(--bowl, #0E9B72); } .mark .winkarc { stroke: var(--winkc, #E8A31E); }
.name { color: var(--namec, #0E9B72); font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.name .i { position: relative; display: inline-block; }
.name .wink { position: absolute; left: 50%; top: 0.035em; width: 0.3em; height: 0.18em; transform: translateX(-50%); overflow: visible; }
.name .wink path { fill: none; stroke: var(--winkc, #E8A31E); stroke-width: 3; stroke-linecap: round; }
.gift { filter: drop-shadow(.6px .9px .5px rgba(30, 24, 40, .45)); overflow: visible; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
}

.m-card { background: var(--m-bg, #fff); color: var(--m-ink, #17292D); border-radius: var(--m-r, 20px); box-shadow: var(--m-shadow, 0 18px 40px rgba(23,41,45,.16)); font-family: Figtree, system-ui, sans-serif; font-size: 14px; line-height: 1.4; text-align: left; }
.m-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.m-head .room, .m-head .gift { width: 36px; height: 36px; flex: none; }
.m-head b { display: block; font-family: "Bricolage Grotesque", sans-serif; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.m-head small { display: block; color: var(--m-ink2, #4f5d61); font-size: 12px; }
.m-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; background: var(--m-cool-soft, #DDF3EA); color: var(--m-cool-ink, #0A6E51); font-weight: 700; font-size: 11.5px; }
.m-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--m-cool, #0E9B72); }
.m-msgs { list-style: none; margin: 0; padding: 4px 14px 8px; display: grid; gap: 9px; }
.m-msgs li { display: flex; gap: 8px; align-items: flex-end; }
.m-msgs .av { width: 34px; height: 34px; flex: none; }
.m-bub { background: var(--m-soft, #F1F6F4); padding: 7px 11px 8px; border-radius: 16px 16px 16px 5px; max-width: 80%; position: relative; }
.m-bub b { display: block; font-size: 12px; color: var(--m-cool-ink, #0A6E51); }
.m-msgs .me { justify-content: flex-end; }
.m-msgs .me .m-bub { background: var(--m-cool, #0E9B72); color: var(--m-on-cool, #fff); border-radius: 16px 16px 5px 16px; }
.m-react { position: absolute; right: -6px; bottom: -10px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 4px; background: var(--m-bg, #fff); border-radius: 99px; box-shadow: 0 2px 6px rgba(23,41,45,.15); font-size: 11px; font-weight: 700; }
.m-react .gift { width: 14px; height: 14px; }
.m-input { margin: 4px 12px 12px; display: flex; align-items: center; padding: 9px 9px 9px 14px; border-radius: 99px; border: 1.5px solid var(--m-line, #DDE5E2); color: var(--m-ink3, #7a8a8e); font-size: 13px; }
.m-input i { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--m-cool, #0E9B72); position: relative; }
.m-input i::after { content: ''; position: absolute; left: 8px; top: 8px; border: 5px solid transparent; border-left: 9px solid var(--m-on-cool, #fff); transform: translateX(1px); }
.m-sticker { display: inline-flex; align-items: center; gap: 4px; }
.m-sticker .gift { width: 26px; height: 26px; }

.m-profile { overflow: hidden; }
.m-banner { height: 74px; background: var(--m-banner, #F2749F); position: relative; overflow: hidden; }
.m-banner span { position: absolute; border-radius: 50%; background: rgba(255,255,255,.22); }
.m-pbody { padding: 0 16px 16px; position: relative; }
.m-pbody > .av { width: 88px; height: 88px; margin-top: -50px; }
.m-pname { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.m-pname b { font-family: "Bricolage Grotesque", sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.m-level { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; background: var(--m-warm, #E8A31E); color: var(--m-on-warm, #2E1D00); font-weight: 800; font-size: 12px; }
.m-level .gift { width: 15px; height: 15px; }
.m-pbody > .av { width: 96px; height: 96px; }
.m-sub { color: var(--m-ink2, #4f5d61); font-size: 12.5px; }
.m-badge { position: absolute; right: 14px; top: 10px; padding: 4px 9px; border-radius: 8px; background: #C2185B; color: #fff; font-size: 11px; font-weight: 800; transform: rotate(3deg); }
.m-vitrine { display: flex; gap: 6px; margin-top: 12px; }
.m-vitrine span { flex: 1; aspect-ratio: 1; border-radius: 12px; background: var(--m-warm-soft, #FCEFD2); display: grid; place-items: center; position: relative; }
.m-vitrine .gift { width: 62%; height: 62%; }
.m-vitrine em { position: absolute; right: 3px; bottom: 1px; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--m-warm-ink, #7A4E00); }
.m-guest { display: flex; gap: 8px; margin-top: 12px; padding: 9px 10px; border-radius: 14px; background: var(--m-soft, #F1F6F4); font-size: 12.5px; align-items: center; }
.m-guest .av { width: 30px; height: 30px; flex: none; }
.m-guest b { color: var(--m-cool-ink, #0A6E51); }

.m-lager .m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 14px; }
.m-lager .m-grid span { aspect-ratio: 1; border-radius: 14px; background: var(--m-warm-soft, #FCEFD2); display: grid; place-items: center; position: relative; }
.m-lager .m-grid .gift { width: 54%; height: 54%; }
.m-lager .m-grid em { position: absolute; right: 6px; bottom: 3px; font-style: normal; font-weight: 800; font-size: 11px; color: var(--m-warm-ink, #7A4E00); }
.m-purse { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 14px; }
.m-purse .coin { width: 20px; height: 20px; }
.m-go { margin: 12px 14px 14px; padding: 10px; text-align: center; border-radius: 99px; background: var(--m-warm, #E8A31E); color: var(--m-on-warm, #2E1D00); font-weight: 800; }

.m-petroom { overflow: hidden; }
.m-scene { position: relative; height: 190px; background: var(--m-wall, #FCE0BE); overflow: hidden; }
.m-scene .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; background: var(--m-floor, #C98E5A); }
.m-scene .floor::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10'%3E%3Crect x='46' width='2' height='10' fill='%23000' fill-opacity='.08'/%3E%3C/svg%3E"); }
.m-scene .rug { position: absolute; left: 50%; bottom: 14px; width: 190px; height: 34px; margin-left: -95px; border-radius: 50%; background: var(--m-rug, #6FAFD8); border: 3px solid #4B4853; }
.m-scene .win { position: absolute; left: 18px; top: 18px; width: 64px; height: 70px; border: 3px solid #4B4853; border-radius: 30px 30px 6px 6px; background: #9ED3F2; overflow: hidden; }
.m-scene .win::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #4B4853; }
.m-scene .win::after { content: ''; position: absolute; right: 8px; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: #F5C64E; }
.m-scene .pic { position: absolute; right: 22px; top: 22px; width: 54px; height: 44px; border: 3px solid #4B4853; border-radius: 6px; background: #FFF3E2; display: grid; place-items: center; transform: rotate(4deg); }
.m-scene .pic .gift { width: 26px; height: 26px; }
.m-scene .pet { position: absolute; left: 50%; bottom: 18px; width: 150px; margin-left: -75px; overflow: visible; }
.m-scene .bowlx { position: absolute; left: 30px; bottom: 16px; width: 44px; height: 16px; background: #E45B5B; border: 3px solid #4B4853; border-radius: 4px 4px 14px 14px; }
.m-petbar { display: flex; align-items: center; gap: 8px; padding: 11px 14px 13px; flex-wrap: wrap; }
.m-petbar b { font-family: "Bricolage Grotesque", sans-serif; font-size: 17px; font-weight: 800; }
.m-chip { padding: 4px 10px; border-radius: 99px; background: var(--m-soft, #F1F6F4); font-size: 12px; font-weight: 700; }
.m-chip.warm { background: var(--m-warm-soft, #FCEFD2); color: var(--m-warm-ink, #7A4E00); }
.m-btn { margin-left: auto; padding: 6px 13px; border-radius: 99px; background: var(--m-cool, #0E9B72); color: var(--m-on-cool, #fff); font-size: 12.5px; font-weight: 800; }

.m-game .m-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 4px 14px 14px; }
.m-game .m-board span { aspect-ratio: 1; border-radius: 11px; background: var(--m-cool, #0E9B72); display: grid; place-items: center; position: relative; }
.m-game .m-board span:nth-child(odd) { background: var(--m-cool2, #13B585); }
.m-game .m-board span.o { background: var(--m-warm-soft, #FCEFD2); }
.m-game .m-board span.o .gift { width: 58%; height: 58%; }
.m-game .m-board span:not(.o)::after { content: ''; width: 30%; height: 14%; border: 3px solid rgba(255,255,255,.55); border-bottom: 0; border-radius: 40px 40px 0 0; }
.m-score { margin-left: auto; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 18px; }
.m-score small { display: block; text-align: right; font-family: Figtree, sans-serif; font-size: 11px; font-weight: 700; color: var(--m-ink2, #4f5d61); }

.m-toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 18px; }
.m-toast .gift, .m-toast .av { width: 38px; height: 38px; flex: none; }
.m-toast p { margin: 0; font-size: 13.5px; }
.m-toast b { font-weight: 800; }


/*
 * Entwurf 6 - Neon-Nacht trifft Karten-Collage.
 * Oben Nacht: Grund und Akzente aus dem Farbprofil "Nacht" (#121A1C, #2FC395, #F2B23A), Leuchtschilder
 * in den Kachelfarben der Raeume, Fenster in den Spielfarben, davor App-Karten im hellen Grunddesign.
 * Ein Sonnenaufgang fuehrt in den hellen Teil - derselbe Aufbau wie Entwurf 4, nur im App-Look.
 */
:root {
  /* app, Grundfassung */
  --ink: #17292D; --teal: #0E9B72; --honey: #E8A31E; --on-warm: #2E1D00; --line: #E6E6E2;
  --teal-dark: #0B795A; --teal-soft: #E7F5EF; --honey-soft: #FDF1D8; --honey-deep: #A8761A;
  --ink-2: #4F5D61; --ink-soft: #2D3B3E;
  /* app, Farbprofil "Nacht" */
  --n-ground: #121A1C; --n-card: #1A2427; --n-line: #2A3639; --n-ink: #EEF3F2; --n-ink2: #AEBCBA;
  --n-cool: #2FC395; --n-warm: #F2B23A;
  /* Tag */
  --day: #FFF8EC;
  --bowl: var(--n-cool); --winkc: var(--n-warm); --namec: var(--n-ink);
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: Figtree, system-ui, sans-serif;
  --m-shadow: 0 2px 0 rgba(23,41,45,.06), 0 22px 46px rgba(23,41,45,.16);
}
html, body { overflow-x: clip; }
html { background: var(--day); color: var(--ink); }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; margin: 0; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* ---------- Knoepfe ---------- */
.b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 26px; border-radius: 99px; font: 800 16px/1 var(--body); text-decoration: none; border: 0; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; }
.b:hover { transform: translateY(-2px); }
.b.cool { background: var(--n-cool); color: var(--n-ground); box-shadow: 0 0 24px rgba(47,195,149,.45); }
.b.cool:hover { box-shadow: 0 0 0 4px rgba(47,195,149,.22), 0 0 38px rgba(47,195,149,.65); }
.b.white { background: #fff; color: var(--ink); }
.b.line { border: 2px solid var(--n-cool); color: var(--n-cool); background: transparent; padding: 9px 18px; font-size: 14.5px; box-shadow: 0 0 14px rgba(47,195,149,.3), inset 0 0 10px rgba(47,195,149,.15); }
.code { display: flex; align-items: center; gap: 6px; border-radius: 99px; padding: 4px 4px 4px 18px; border: 2px solid var(--n-line); background: var(--n-card); }
.code input { border: 0; outline: 0; background: transparent; color: var(--n-ink); font: 700 15px var(--body); letter-spacing: .05em; width: 160px; min-width: 0; }
.code input::placeholder { color: #8FA19E; }
.code button { border: 0; border-radius: 99px; background: var(--n-warm); color: var(--n-ground); font: 800 14.5px var(--body); padding: 11px 18px; cursor: pointer; }
.code:focus-within { border-color: var(--n-cool); box-shadow: 0 0 16px rgba(47,195,149,.35); }

/* ---------- Kopf ---------- */
.top { position: absolute; left: 0; right: 0; top: 0; z-index: 20; }
.top .wrap { display: flex; align-items: center; height: 76px; gap: 22px; }
.top .brand { font-size: 26px; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 24px; font-weight: 700; font-size: 15px; color: var(--n-ink2); }
.top nav a { text-decoration: none; }
.top nav a:hover { color: #fff; }

/* ---------- Hero: der Abend (mindestens bildschirmhoch, ohne Haeuser) ---------- */
.hero { position: relative; overflow: hidden; color: var(--n-ink); min-height: 100vh; display: flex; align-items: center; padding: calc(90px + 14vh) 0;
  background: linear-gradient(180deg, #0B1114 0%, #0F181B 45%, #121E21 100%); }
.hero > .wrap { width: 100%; }
/* mittig auf dem Bildschirm (16.10.2026): oben so viel Luft wie unten. Die Stadt darunter ragt am
   Desktop in den Hero hinein - der Inhalt liegt darueber, damit Knopf und Code klickbar bleiben */
.hero > .wrap { position: relative; z-index: 3; }
.hero::before { content: ''; position: absolute; right: -10%; top: 6%; width: 70%; height: 80%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47,195,149,.12), rgba(47,195,149,0)); pointer-events: none; }
.stars { position: absolute; inset: 0; translate: 0 calc(var(--sy, 0) * .12px); }
.stars i { position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%; background: #FFF4D6; animation: e6-tw 3.4s ease-in-out infinite; }
@keyframes e6-tw { 50% { opacity: .2; } }
.moon { position: absolute; left: 42%; top: max(92px, calc(54vh - 400px)); width: 80px; height: 80px; z-index: 1; translate: calc(var(--mx, 0) * 6px) calc(var(--my, 0) * 6px + var(--sy, 0) * .2px); transition: translate .3s ease-out; }
.moon svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 22px rgba(242,178,58,.5)); }
.moon .lid { animation: e6-wink 7s ease-in-out infinite; transform-origin: 62px 44px; }
@keyframes e6-wink { 0%, 86%, 100% { transform: scaleY(1); } 90%, 94% { transform: scaleY(.15); } }

/* Textspalte links, rechts ein kompakter Kartenstapel mit fester Breite - dazwischen viel Luft (15.10.2026) */
.hero .grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(64px, 8vw, 140px); align-items: center; }
.sign { position: relative; display: inline-flex; font-size: clamp(38px, 3.8vw, 54px); padding: 14px 24px 18px; margin-top: 46px; border: 3px solid var(--n-cool); border-radius: 22px; background: rgba(18,26,28,.55);
  box-shadow: 0 0 18px rgba(47,195,149,.5), inset 0 0 18px rgba(47,195,149,.25); }
.sign::before, .sign::after { content: ''; position: absolute; top: -48px; width: 3px; height: 46px; background: var(--n-line); }
.sign::before { left: 18%; } .sign::after { right: 18%; }
.sign .brand { pointer-events: none; }
.sign .name { color: #D8FFF0; text-shadow: 0 0 6px var(--n-cool), 0 0 20px var(--n-cool), 0 0 44px rgba(47,195,149,.55); }
.sign .mark { filter: drop-shadow(0 0 7px var(--n-cool)) drop-shadow(0 0 18px rgba(47,195,149,.6)); }
.sign .name .wink { filter: drop-shadow(0 0 5px var(--n-warm)) drop-shadow(0 0 12px var(--n-warm)); }
.sign .wink path, .sign .mark .winkarc { animation: e6-flick 6s linear infinite; }
@keyframes e6-flick { 0%, 46%, 50%, 54%, 100% { opacity: 1; } 48%, 52% { opacity: .15; } }
.hero h1 { font-size: clamp(44px, 5vw, 74px); line-height: .96; letter-spacing: -0.05em; margin: 42px 0 18px; color: #fff; }
.glow-w { color: var(--n-warm); text-shadow: 0 0 8px rgba(242,178,58,.75), 0 0 26px rgba(242,178,58,.45); }
.hero .lead { font-size: clamp(17px, 1.35vw, 19px); color: var(--n-ink2); max-width: 29em; margin: 0; }
/*
 * Drei Gruppen (16.10.2026): Satz + Beschreibung, dann Knopf + Code + die Zeile darunter, ganz
 * unten der kleine Hinweis. Innerhalb einer Gruppe eng, zwischen den Gruppen viel Luft.
 */
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; align-items: center; }
/* in der Voranmeldung stehen Knopf und Code untereinander; in der Testphase steht der Code allein */
html.prelaunch .ctas + .ctas { margin-top: 14px; }
.fine { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 14px; font-weight: 600; color: var(--n-ink2); }
.fine i { width: 8px; height: 8px; border-radius: 50%; background: var(--n-cool); box-shadow: 0 0 10px var(--n-cool); animation: e6-pulse 1.8s ease-in-out infinite; }
@keyframes e6-pulse { 50% { transform: scale(1.6); opacity: .45; } }

/* die Collage: alle Karten, etwas kleiner skaliert (zoom) */
.collage { position: relative; width: 640px; height: 780px; zoom: .9; }
/* der Mauseffekt deutlich (15.10.2026): jede Karte folgt je nach Tiefe `--d` bis zu gut 25 px,
   der ganze Stapel kippt dazu leicht in den Raum - vorn liegende Karten wandern weiter als hintere */
.collage { --pull: 4.2; transform: perspective(1400px) rotateY(calc(var(--mx, 0) * 9deg)) rotateX(calc(var(--my, 0) * -7deg)); transition: transform .4s ease-out; transform-style: preserve-3d; }
.cl { position: absolute; translate: calc(var(--mx, 0) * var(--d) * var(--pull, 1) * 1px) calc(var(--my, 0) * var(--d) * var(--pull, 1) * 1px + var(--sy, 0) * var(--d) * -0.05px); transition: translate .35s ease-out; }
.cl > * { animation: e6-float 7s ease-in-out infinite; animation-delay: var(--del, 0s); }
@keyframes e6-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.cl .m-card { width: 100%; --m-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 26px 60px rgba(0,0,0,.55), 0 0 60px rgba(47,195,149,.12); }
.c-chat { width: 320px; left: 0; top: 62px; rotate: -3deg; --d: 9; z-index: 3; }
.c-prof { width: 284px; right: 0; top: 24px; rotate: 3deg; --d: 7; z-index: 2; --del: -2s; }
.c-pet { width: 300px; left: 18px; top: 452px; rotate: 2deg; --d: 8; z-index: 2; --del: -4s; }
.c-game { width: 262px; right: 10px; top: 400px; rotate: -3deg; --d: 10; z-index: 4; --del: -1s; }
.c-t1 { width: 270px; left: 186px; top: 0; rotate: -2deg; --d: 12; z-index: 6; --del: -5s; }
.c-t2 { width: 230px; right: -22px; top: 338px; rotate: 3deg; --d: 12; z-index: 6; --del: -2.5s; }
.c-t1 .m-toast, .c-t2 .m-toast { background: #F7C350; color: var(--on-warm); }
.sticker { position: absolute; z-index: 7; width: 92px; height: 92px; --d: 12; }
.sticker .av { width: 100%; height: 100%; overflow: visible; }
.st1 { left: 288px; top: 690px; rotate: -10deg; }
.st2 { right: -30px; top: 230px; rotate: 10deg; width: 74px; height: 74px; }

/* ---------- die Stadt: Haeuser bleiben stehen, dahinter wird es Morgen ---------- */
/* die Stadt beginnt schon im leeren unteren Teil des Hero (kuerzerer Weg bis zu den Haeusern, 15.10.2026);
   die Ueberlappung schliesst auch die helle Haarlinie, die zwischen beiden Flaechen durchschien */
.town { position: relative; height: 230vh; --p: 0; margin-top: -1px;
  background: linear-gradient(180deg, rgba(18,30,33,0) 0%, #121E21 7%, #14282E 14%, #1A3A45 28%, #2D5866 40%, #8A7D8E 50%, #CF9493 58%, #F2B88A 68%, #FAD6A6 79%, #FDEBCB 89%, var(--day) 100%); }
.town .stars { inset: 0 0 70% 0; translate: none; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.sun { position: absolute; left: 50%; bottom: calc(var(--sky, 300px) + 28px); width: 150px; height: 150px; margin-left: -75px; border-radius: 50%; background: #F7C350; z-index: 1;
  opacity: min(1, calc(var(--p) * 2.2)); box-shadow: 0 0 70px rgba(247,195,80,.6), 0 0 180px rgba(247,195,80,.4); translate: 0 calc((1 - var(--p)) * (var(--sky, 300px) + 150px)); }
.sun::after { content: ''; position: absolute; left: 32px; top: 22px; width: 34px; height: 20px; border-top: 6px solid rgba(255,255,255,.5); border-radius: 50%; }
/*
 * --e (0..1) waechst am Ende der Stadt: der Dunst unten wird hoeher, damit die Haeuser nicht hart
 * vom unteren Rand abreissen, wenn die Buehne weiterscrollt (16.10.2026). Absinken lassen ging
 * nicht - die Buehne schneidet ab, und unten entstand eine harte Kante.
 */
.town { --e: 0; }
.skyline { position: absolute; left: 50%; bottom: 0; translate: -50% 0; z-index: 2; display: flex; align-items: flex-end; zoom: 1.05;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(62% - var(--e) * 42%), transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 calc(62% - var(--e) * 42%), transparent 100%); padding-top: 50px; }
.bld { position: relative; flex: none; background: color-mix(in srgb, var(--c, #18252A) calc((1 - var(--p)) * 100%), #A97E86); border-radius: 5px 5px 0 0; display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 10px; padding: 16px 12px; align-content: start; }
.bld .w { height: 17px; border-radius: 3px; background: color-mix(in srgb, #22343A calc((1 - var(--p)) * 100%), #C79A98); }
.bld .w.on { background: var(--l); box-shadow: 0 0 12px var(--l); opacity: calc(1 - var(--p) * .8); }
.bld .w.bl { animation: e6-lamp 8s steps(1) infinite; animation-delay: var(--dl, 0s); }
@keyframes e6-lamp { 0%, 62% { background: var(--l); box-shadow: 0 0 12px var(--l); } 63%, 100% { background: #22343A; box-shadow: none; } }
.bld .win-av { position: absolute; width: 72px; height: 62px; border-radius: 8px; background: var(--l); box-shadow: 0 0 22px var(--l); overflow: hidden; }
.bld .win-av .char { width: 100%; height: auto; margin-top: 4px; }
.bld .win-av .pet { width: 120%; margin: 6px -10% 0; overflow: visible; }
.roof { position: absolute; top: -36px; left: 50%; translate: -50% 0; white-space: nowrap; font-family: "Righteous", var(--display); font-size: 18px; line-height: 1; padding: 5px 11px 6px; border: 2px solid var(--s); border-radius: 9px; color: var(--s); background: rgba(11,17,20, calc(.7 - var(--p) * .7)); opacity: calc(1 - var(--p) * .4);
  text-shadow: 0 0 6px var(--s), 0 0 18px var(--s); box-shadow: 0 0 14px color-mix(in srgb, var(--s) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--s) 30%, transparent); }
.roof.bz { animation: e6-buzz 6s linear infinite; }
@keyframes e6-buzz { 0%, 88%, 92%, 100% { opacity: 1; } 90% { opacity: .35; } }

/* ---------- danach: im Hellen ---------- */
.hello { text-align: center; padding: 110px 0 40px; }
.hello h2 { font-size: clamp(40px, 5vw, 72px); line-height: .98; margin: 0 auto 16px; max-width: 13em; }
.hello p { font-size: 19px; font-weight: 500; max-width: 30em; margin: 0 auto; color: #3B3A33; }

/* ---------- Abschnitte (Aufbau wie Entwurf 4, im hellen App-Look) ---------- */
section.s { padding: 170px 0; position: relative; }
section.s.band { background: var(--bg); border-top: 1px solid var(--bl); border-bottom: 1px solid var(--bl); }
.eyebrow { display: inline-block; font-family: "Righteous", var(--display); font-size: 18px; letter-spacing: .03em; color: var(--e, var(--teal-dark)); }
.s h2 { font-size: clamp(38px, 4.8vw, 66px); line-height: 1; margin: 10px 0 16px; }
.s .lead { font-size: 19px; color: var(--ink-soft); max-width: 32em; margin: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.shot .m-card { --m-shadow: 0 2px 0 rgba(23,41,45,.05), 0 24px 50px rgba(23,41,45,.15); }

/* Raeume */
.signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.rs { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: flex; gap: 14px; align-items: center; box-shadow: 0 2px 0 rgba(23,41,45,.04); transition: transform .2s, box-shadow .2s; }
.rs:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(23,41,45,.1); }
.rs .room { width: 52px; height: 52px; flex: none; }
.rs b { display: block; font-family: var(--display); font-size: 19px; letter-spacing: -0.02em; }
.rs span { color: var(--ink-2); font-size: 14.5px; line-height: 1.4; display: block; }
.rs em { font-style: normal; font-weight: 800; color: var(--honey-deep); }

/* Profil */
.duo { position: relative; padding: 60px 30px 0 0; }
.duo > .m-card { position: relative; z-index: 2; max-width: 390px; rotate: -2deg; }
.night-card { position: absolute; z-index: 1; width: 320px; right: 0; top: 0; rotate: 6deg;
  --m-bg: #1A2427; --m-ink: #EEF3F2; --m-ink2: #AEBCBA; --m-soft: #22302F; --m-line: #2A3639;
  --m-cool: #2FC395; --m-cool2: #29AC84; --m-on-cool: #121A1C; --m-cool-ink: #2FC395; --m-cool-soft: #1E3A33;
  --m-warm: #F2B23A; --m-on-warm: #121A1C; --m-warm-soft: #2B2A20; --m-warm-ink: #F2B23A; --m-banner: #24453D;
  --m-shadow: 0 22px 46px rgba(23,41,45,.25); }
.night-card .m-badge { display: none; }
.night-tag { position: absolute; z-index: 3; right: 10px; top: -20px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 99px; background: var(--n-ground); color: var(--n-ink); font-weight: 800; font-size: 13px; rotate: 4deg; box-shadow: 0 8px 20px rgba(18,26,28,.25); }
.night-tag i { width: 10px; height: 10px; border-radius: 50%; background: var(--n-warm); box-shadow: 0 0 8px var(--n-warm); }
.avs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; }
.avs .av { width: 72px; height: 72px; overflow: visible; }
.unlock { display: inline-flex; gap: 10px; align-items: center; margin-top: 22px; padding: 10px 16px; border-radius: 14px; background: var(--n-ground); color: var(--n-ink); font-weight: 700; }
.unlock .sw { display: flex; gap: 4px; } .unlock .sw i { width: 16px; height: 16px; border-radius: 5px; background: var(--x); }

/* Geschenke */
.giftband { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.giftband span { width: 72px; height: 72px; border-radius: 20px; background: var(--honey-soft); border: 1px solid #F3D9A0; display: grid; place-items: center; }
.giftband .gift { width: 44px; height: 44px; }
.s-gifts .shot .m-card { max-width: 400px; margin-left: auto; rotate: -2deg; }

/* Spielhalle */
.s-arcade .shot .m-card { max-width: 400px; margin: 0 auto; rotate: 2deg; }
.arcade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.arcade div { border-radius: 18px; padding: 14px 6px 12px; text-align: center; background: color-mix(in srgb, var(--t) 16%, #fff); border: 1px solid color-mix(in srgb, var(--t) 38%, #fff); font-weight: 800; font-size: 13.5px; line-height: 1.2; }
.arcade .gift { width: 46px; height: 46px; margin: 0 auto 8px; }

/* Mitbewohner */
.s-pet .shot .m-card { max-width: 430px; rotate: 1.5deg; }
.petsrow { display: flex; flex-wrap: wrap; margin-top: 22px; }
.petsrow .pet { width: 82px; height: 74px; overflow: visible; }
.lvl { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 7px 13px 7px 8px; border-radius: 99px; background: var(--honey-soft); border: 1px solid #F3D9A0; color: #6E4B00; font-weight: 800; font-size: 14px; }
.lvl .gift { width: 20px; height: 20px; }
.hearts { position: absolute; z-index: 5; width: 26px; height: 26px; animation: e6-rise 3.2s ease-in-out infinite; }
@keyframes e6-rise { 0% { opacity: 0; transform: translate(0, 10px) scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -40px) scale(1); } }

/* Stufen */
.from { display: grid; gap: 10px; margin-top: 26px; max-width: 470px; }
.from .m-card { --m-shadow: none; border: 1px solid var(--line); border-radius: 16px; }
.from .m-toast .av { width: 38px; height: 38px; }
.from .m-toast p { flex: 1; }
.from em { font-style: normal; font-weight: 800; color: var(--honey-deep); white-space: nowrap; padding-left: 8px; }
.note { margin: 16px 0 0; font-size: 15px; color: var(--ink-2); max-width: 32em; }
.tower { display: flex; flex-direction: column-reverse; gap: 8px; }
.tl { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.tl b { font-family: var(--display); font-size: 28px; letter-spacing: -0.03em; color: #B9AE99; }
.tl span { font-weight: 700; }
.tl small { color: var(--ink-2); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.tl .gift { width: 26px; height: 26px; }
.tl.on { background: var(--honey-soft); border-color: #F3D9A0; }
.tl.on b { color: var(--honey-deep); }
.tl.night { background: var(--n-ground); border-color: var(--n-ground); color: var(--n-ink); }
.tl.night b { color: var(--n-warm); text-shadow: 0 0 10px rgba(242,178,58,.6); }
.tl .sw { display: flex; gap: 4px; } .tl .sw i { width: 14px; height: 14px; border-radius: 4px; background: var(--x); }

/* Hausregeln */
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 46px; text-align: left; }
.badge { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 22px; padding: 24px 20px; box-shadow: 0 2px 0 rgba(23,41,45,.04); }
.badge b { font-family: "Righteous", var(--display); font-weight: 400; font-size: 50px; line-height: 1; color: var(--c); }
.badge h3 { font-size: 21px; margin: 12px 0 6px; letter-spacing: -0.02em; }
.badge p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
.rules { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.rules span { padding: 8px 14px; border-radius: 99px; background: var(--teal-soft); border: 1px solid #C9E8DC; font-weight: 700; font-size: 15px; }
.rules a { padding: 8px 4px; font-weight: 800; color: var(--teal-dark); }
.safe { margin: 22px auto 0; font-size: 15.5px; color: var(--ink-2); max-width: 40em; }

/* Schluss */
.s-end { text-align: center; padding: 170px 0 180px; background: var(--teal); color: #fff; overflow: hidden; }
.open { display: inline-block; font-family: "Righteous", var(--display); font-size: clamp(26px, 3vw, 38px); color: var(--on-warm); background: #F7C350; padding: 6px 24px 8px; border-radius: 16px; rotate: -3deg; box-shadow: 0 10px 24px rgba(0,0,0,.15); }
.s-end h2 { font-size: clamp(44px, 6.4vw, 96px); line-height: .95; margin: 30px 0 18px; }
.s-end h2 span { color: #FFD06B; }
.s-end .lead { color: #E3F6EF; margin: 0 auto; }
.s-end .ctas { justify-content: center; }
.s-end .code { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); }
.s-end .code input { color: #fff; } .s-end .code input::placeholder { color: #CDEDE2; }
.s-end .code button { background: #fff; color: var(--ink); }

footer { padding: 54px 0 36px; }
footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
footer .brand { font-size: 26px; --bowl: var(--teal); --winkc: var(--honey); --namec: var(--teal); }
footer h4 { margin: 0 0 10px; font-family: var(--display); font-size: 15px; color: var(--honey-deep); }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
footer a { text-decoration: none; font-weight: 600; }
footer a:hover { text-decoration: underline; }
footer .base { display: flex; justify-content: space-between; margin-top: 36px; padding-top: 18px; border-top: 1px solid #E8DFCC; font-size: 14px; font-weight: 600; }

@media (min-width: 1181px) {
  .town { margin-top: -32vh; }
}

/* Laptops (bis 1700 px breit, z. B. 1440/1470/1512): Text und Karten ruecken zusammen.
   Die Textspalte endet mit dem Text, der Kartenstapel steht direkt daneben - der Rest bleibt rechts. */
@media (min-width: 1181px) and (max-width: 1700px) {
  .hero .grid { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); column-gap: 32px; }
  .hero .collage { justify-self: center; }
}

/* ---------- Laptop: alle Karten, nur kleiner ---------- */
@media (min-width: 1181px) and (max-height: 920px) {
  .hero { padding: calc(70px + 12vh) 0; }
  .sign { font-size: 40px; margin-top: 40px; padding: 11px 20px 14px; }
  .sign::before, .sign::after { top: -42px; height: 40px; }
  .hero h1 { font-size: clamp(42px, 4.3vw, 62px); margin: 34px 0 14px; }
  .hero .lead { font-size: 17px; }
  .ctas { margin-top: 36px; }
  .hero .hint { margin-top: 30px; }
  .moon { width: 64px; height: 64px; top: 84px; }
  .collage { zoom: .78; }
  .skyline { zoom: .92; }
}
@media (min-width: 1181px) and (max-height: 760px) {
  .hero { padding: calc(60px + 10vh) 0; }
  .sign { font-size: 34px; margin-top: 36px; }
  .hero h1 { font-size: clamp(40px, 4vw, 54px); margin: 28px 0 18px; }
  .hero .lead { font-size: 16.5px; max-width: 30em; }
  .collage { zoom: .7; }
}

/* ---------- schmaler ---------- */
@media (max-width: 1180px) {
  /*
   * Untereinander (19.10.2026, Adrian): die Karten stehen hier UNTER dem Text. Das Gleiten beim
   * Scrollen (--sy) schob sie nach oben - bis zu einem halben Pixel je Pixel - und damit ueber Code-
   * Feld und Hinweis. Ohne Maus gibt es auch kein Neigen; sie stehen still, nur das Schweben bleibt.
   */
  .cl { translate: none; transition: none; }
  .collage { transform: none; }
  /*
   * Und die Stadt beginnt hier nicht im Hero, sondern darunter: ihr durchsichtiger Anfang liess den
   * hellen Seitengrund als Streifen mitten im Nachthimmel durchscheinen. Darunter dieselbe Farbe,
   * mit der der Hero endet - dann ist die Naht unsichtbar.
   */
  .town { background-color: #121E21; }
  .hero .grid { grid-template-columns: 1fr; }
  .collage { margin: 40px auto 0; zoom: .85; }
  .hero { min-height: 0; }
  .moon { left: auto; right: 6%; top: 110px; }
}
@media (max-width: 900px) {
  .two { grid-template-columns: 1fr; gap: 40px; }
  .signs { grid-template-columns: 1fr 1fr; }
  .badges { grid-template-columns: 1fr 1fr; }
  .s-gifts .shot .m-card { margin: 0 auto; }
  .s-arcade .two > .shot { order: 2; }
  footer .cols { grid-template-columns: 1fr 1fr; }
  footer .about { grid-column: 1 / -1; }
  section.s { padding: 120px 0; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .top nav .hs { display: none; }
  .top .brand { font-size: 23px; }
  .hero { padding: 92px 0 80px; }
  .sign { font-size: 38px; margin-top: 44px; padding: 12px 18px 15px; border-radius: 20px; }
  .sign::before, .sign::after { height: 40px; top: -42px; }
  .moon { width: 54px; height: 54px; top: 104px; right: 6%; }
  .hero h1 { font-size: 44px; margin-top: 36px; }
  /*
   * Der Stapel am Telefon (19.10.2026, Adrian): mehr Luft zum Hinweis darueber und eine klare
   * Ordnung - oben links die Meldung, rechts mona, darunter der Raum, unten der Sticker neben dem
   * Spiel. Vorher lagen Meldung, Raum und mona uebereinander, und links unten klaffte ein Loch.
   */
  .collage { height: 860px; zoom: .68; width: 100%; margin: 76px auto 0; }
  .c-t1 { left: 0; top: 0; width: 250px; rotate: -2deg; }
  .c-prof { right: 0; top: 24px; width: 262px; rotate: 3deg; }
  .c-chat { left: 0; top: 196px; width: 300px; rotate: -2deg; }
  .c-game { right: 0; top: 470px; width: 264px; rotate: 2deg; }
  .st1 { left: 7%; top: 560px; width: 130px; height: 130px; }
  .c-pet, .c-t2, .st2 { display: none; }
  .code { width: 100%; } .code input { flex: 1; }
  .ctas .b.cool { width: 100%; padding: 18px; }
  .skyline { zoom: .66; }
  .sun::after { left: 22px; top: 15px; width: 22px; height: 14px; border-top-width: 4px; }
  .town { height: 200vh; }
  .sun { width: 100px; height: 100px; margin-left: -50px; bottom: calc(var(--sky, 200px) + 20px); }
  .hello { padding: 72px 0 10px; }
  .hello p { font-size: 17px; }
  .s .lead { font-size: 17px; }
  .signs { gap: 10px; }
  .rs { padding: 12px; gap: 10px; border-radius: 16px; flex-direction: column; align-items: flex-start; }
  .rs .room { width: 40px; height: 40px; } .rs b { font-size: 16px; } .rs span { font-size: 13px; }
  .duo { padding: 50px 14px 0 0; }
  .night-card { width: 70%; }
  .duo > .m-card { max-width: 88%; }
  .avs .av { width: 58px; height: 58px; }
  .arcade { gap: 8px; } .arcade div { font-size: 11.5px; padding: 10px 2px 8px; border-radius: 14px; } .arcade .gift { width: 34px; height: 34px; }
  .petsrow .pet { width: 56px; height: 52px; }
  .tl { grid-template-columns: 40px 1fr auto; gap: 10px; padding: 10px 12px; } .tl b { font-size: 22px; } .tl span { font-size: 15px; } .tl small { font-size: 12px; }
  .badge { padding: 16px 14px; } .badge b { font-size: 38px; } .badge h3 { font-size: 17px; } .badge p { font-size: 14px; }
  .s-end { padding: 130px 0 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .cl, .stars, .moon { translate: none !important; }
}

/* ---------- Testphase / Voranmeldung (vorab.js setzt .prelaunch an <html>) ---------- */
html:not(.prelaunch) .only-prelaunch { display: none !important; }
html.prelaunch .only-teaser { display: none !important; }
.hint { margin: 40px 0 0; font-size: 14px; color: var(--n-ink2); max-width: 30em; }
.hint a { color: var(--n-cool); font-weight: 700; }
.b.ghost { border: 2px solid var(--n-line); color: var(--n-ink); background: transparent; }
.b.ghost:hover { border-color: var(--n-cool); }
.code.big input { width: 200px; }

/* die Vorteile der Voranmeldung - nur, solange sie läuft */
.perks-section { padding: 120px 0 40px; }
.perks-section .lead { margin: 0 auto; text-align: center; }
.perks-section h2 { text-align: center; }
.perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.perk { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 22px; padding: 22px 20px; }
.perk h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; }
.perk p { margin: 8px 0 0; color: var(--ink-soft); font-size: 15.5px; }
.perk p b { color: var(--ink); }
.perks-go { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 18px; margin: 32px 0 0; color: var(--ink-2); font-size: 15px; }
.b.teal { background: var(--teal); color: #fff; }

/* die fünf Grundsätze, ausführlich wie früher */
.principles { list-style: none; margin: 40px auto 0; padding: 0; max-width: 760px; display: grid; gap: 10px; text-align: left; counter-reset: g; }
.principles li { counter-increment: g; display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px; }
.principles li::before { content: counter(g); flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal-dark); font-family: var(--display); font-weight: 800; }
.principles b { display: block; }
.principles span { color: var(--ink-2); font-size: 15px; }
.principles-more { margin: 20px 0 0; }
.principles-more a { font-weight: 800; color: var(--teal-dark); }

footer .about p { color: var(--ink-2); }
.s-end .lead a { color: #fff; font-weight: 700; }
@media (max-width: 900px) { .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .perks { grid-template-columns: minmax(0, 1fr); }
  .perks-section { padding: 80px 0 20px; }
  .code.big input { width: auto; }
  .ctas .b.ghost { width: 100%; }
}

/* ---------- Vorteile der Voranmeldung: vier getönte Kacheln mit Bild (v3) ---------- */
.pks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 48px; align-items: start; }
.pk { position: relative; background: var(--t); border: 1px solid var(--tl); border-radius: 30px; padding: 0 22px 26px; rotate: -1.2deg; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, rotate .25s ease; box-shadow: 0 2px 0 rgba(23,41,45,.04); }
.pk:nth-child(even) { rotate: 1.2deg; margin-top: 34px; }
.pk:hover { transform: translateY(-8px); rotate: 0deg; box-shadow: 0 24px 44px rgba(23,41,45,.13); }
.pk h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.pk p { margin: 8px 0 0; color: var(--ink-soft); font-size: 15.5px; }
.pk p b { color: var(--ink); }
.pk-art { position: relative; height: 196px; margin: 0 -22px 18px; display: grid; place-items: center; align-content: center; gap: 10px; border-bottom: 1px dashed var(--tl); }
/* Name */
.pk-field { background: #fff; border: 1px solid var(--tl); border-radius: 18px; padding: 12px 14px 14px; width: 78%; box-shadow: 0 12px 24px rgba(23,41,45,.08); rotate: -2deg; }
.pk-field small { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.pk-input { display: flex; align-items: center; margin-top: 6px; padding: 8px 12px; border: 2px solid var(--teal); border-radius: 12px; font: 800 20px/1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.pk-caret { width: 2px; height: 20px; margin-left: 2px; background: var(--teal); animation: e6-caret 1.1s steps(1) infinite; }
@keyframes e6-caret { 50% { opacity: 0; } }
.pk-free { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 3px 10px 3px 4px; border-radius: 99px; background: var(--teal); color: #fff; font-size: 12px; font-weight: 800; }
.pk-free svg { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.22); }
.pk-taken { font-size: 12px; font-weight: 700; color: var(--k); opacity: .75; text-decoration: line-through; text-decoration-thickness: 1.5px; }
/* Münzen */
.pk-coins { position: relative; width: 150px; height: 104px; }
.pk-coins .coin { position: absolute; width: 74px; height: 74px; filter: drop-shadow(0 6px 8px rgba(138,95,18,.22)); }
.pk-coins .c1 { left: 0; top: 26px; rotate: -14deg; } .pk-coins .c2 { left: 40px; top: 0; z-index: 2; width: 82px; height: 82px; } .pk-coins .c3 { left: 80px; top: 28px; rotate: 12deg; }
.pk-count { display: flex; align-items: baseline; gap: 10px; font-family: var(--display); }
.pk-count b { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; color: var(--k); line-height: 1; }
.pk-count span { font-size: 18px; font-weight: 800; color: var(--k); opacity: .6; } .pk-count s { text-decoration-thickness: 2.5px; }
.pk-heads, .pk-day { z-index: 1; }
/* Abzeichen */
.pk-badge { width: 104px; height: 104px; filter: drop-shadow(0 10px 14px rgba(163,22,78,.18)); animation: e6-swing 5s ease-in-out infinite; transform-origin: 50% 20%; }
@keyframes e6-swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.pk-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px 3px 5px; border-radius: 99px; background: #FDF1D8; border: 1px solid #F3DFB1; font-size: 13px; font-weight: 800; color: #8A5F12; box-shadow: 0 6px 14px rgba(23,41,45,.08); }
.pk-tag svg { width: 20px; height: 20px; }
/* Erste in der Stadt */
.pk-city { position: absolute; left: 16px; right: 16px; bottom: 0; display: flex; align-items: flex-end; gap: 6px; height: 80px; }
.pk-city i { flex: 1; background: #DDD4F4; border-radius: 6px 6px 0 0; }
.pk-heads { position: relative; display: flex; margin-top: -30px; }
.pk-heads .av { width: 62px; height: 62px; margin: 0 -8px; overflow: visible; }
.pk-day { position: relative; padding: 5px 12px; border-radius: 99px; background: var(--k); color: #fff; font-size: 12.5px; font-weight: 800; }
@media (max-width: 1100px) { .pks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pk:nth-child(even) { margin-top: 0; } .pk:nth-child(n+3) { margin-top: 8px; } }
@media (max-width: 640px) { .pks { grid-template-columns: minmax(0, 1fr); gap: 16px; } .pk, .pk:nth-child(even) { rotate: 0deg; margin-top: 0; } .pk-art { height: 176px; } }
@media (prefers-reduced-motion: reduce) { .pk { transition: none; } .pk:hover { transform: none; } }
/* /pks */








/* ===== App-Bausteine (v3): nachgebaut aus hellu_frontend, Klassen ar- (Räume), ad- (Durchblick), am- (Mitbewohner), ag- (Geschenke, Profil, Hinweise, Raum) ===== */
/* --- rooms --- */
/* Nachbildung der Raumkarten aus hellu_frontend/src/app/rooms/room-list + room-icon (Stand 15.10.2026) */



/* die Farben aus main.scss (:root, Grundprofil) - hier am Raster, damit nichts global wirkt */
.ar-grid {
    --ar-ground: #F7F7F5;
    --ar-card: #FFFFFF;
    --ar-line: #E6E6E2;
    --ar-ink: #17292D;
    --ar-honey: #E8A31E;
    --ar-teal: #0E9B72;
    --ar-ink-2: color-mix(in srgb, var(--ar-ink) 68%, var(--ar-ground));
    --ar-ink-3: color-mix(in srgb, var(--ar-ink) 45%, var(--ar-ground));
    --ar-teal-dark: color-mix(in srgb, var(--ar-teal) 78%, #000000);
    --ar-honey-soft: color-mix(in srgb, var(--ar-honey) 11%, var(--ar-card));
    --ar-honey-line: color-mix(in srgb, var(--ar-honey) 30%, var(--ar-card));
    --ar-honey-deep: color-mix(in srgb, var(--ar-honey) 75%, var(--ar-ink));
    --ar-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    --ar-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
    color: var(--ar-ink);
    font-family: var(--ar-body);
    font-size: 15.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) {
    .ar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ar-grid *, .ar-grid *::before, .ar-grid *::after { box-sizing: border-box; }

/* die Karte: flach in der Farbe ihrer Kachel getoent */
.ar-room {
    --ar-tone: var(--ar-teal);
    --ar-tone-line: color-mix(in srgb, var(--ar-tone) 22%, var(--ar-line));
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 16px 14px;
    border: 1px solid var(--ar-tone-line);
    border-radius: 20px;
    background: color-mix(in srgb, var(--ar-tone) 5%, var(--ar-card));
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ar-ink) 6%, transparent);
    transition: transform 180ms cubic-bezier(.2, .8, .2, 1), box-shadow 180ms ease, border-color 180ms ease;
}
.ar-room:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--ar-tone) 55%, var(--ar-line));
    box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--ar-tone) 60%, transparent),
                0 2px 6px color-mix(in srgb, var(--ar-ink) 6%, transparent);
}
.ar-room--busiest {
    --ar-tone-line: var(--ar-honey-line);
    background: color-mix(in srgb, var(--ar-honey) 9%, var(--ar-card));
}

.ar-top {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
    column-gap: 14px;
    margin-bottom: 14px;
    padding-right: 30px;
}
.ar-thumb {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    overflow: hidden;
}
.ar-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
}

/* das Raumzeichen (room-icon): Squircle, Lichtkante, zweitonige Glyphe */
.ar-room-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 1px 1.5px rgba(23, 41, 45, 0.16));
}
.ar-icon-rim { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 0.4; }
.ar-icon-t { fill: rgba(255, 255, 255, 0.3); stroke: none; }
.ar-icon-s { fill: #FFFFFF; stroke: none; }

.ar-words { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ar-name {
    font-family: var(--ar-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    line-height: 1.25;
    min-width: 0;
    color: var(--ar-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ar-sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--ar-ink-2);
    font-size: 13.5px;
    line-height: 1.4;
    min-width: 0;
    overflow: hidden;
}

.ar-hot {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
    padding: 1px 9px 1px 6px;
    border-radius: 999px;
    background: var(--ar-honey-soft);
    color: var(--ar-honey-deep);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.ar-hot svg { width: 13px; height: 13px; color: #F07A3A; }

.ar-skyline {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 150px;
    height: 46px;
    z-index: -1;
    fill: color-mix(in srgb, var(--ar-tone) 14%, transparent);
    pointer-events: none;
}

.ar-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--ar-ink-3) 80%, var(--ar-card));
}
.ar-fav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

.ar-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--ar-tone) 14%, var(--ar-line));
}

.ar-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ar-teal-dark);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.ar-live--alone { color: var(--ar-ink-3); font-weight: 600; }

.ar-crowd { display: inline-flex; margin-right: 2px; }
.ar-crowd i {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-left: -7px;
    border-radius: 50%;
    overflow: hidden;
    background: color-mix(in srgb, var(--ar-tone) 22%, var(--ar-card));
    color: color-mix(in srgb, var(--ar-tone) 75%, var(--ar-ink));
    box-shadow: 0 0 0 2px var(--ar-card);
}
.ar-crowd i:first-child { margin-left: 0; }
.ar-crowd i:nth-child(2) { background: color-mix(in srgb, var(--ar-teal) 20%, var(--ar-card)); color: var(--ar-teal-dark); }
.ar-crowd i:nth-child(3) { background: color-mix(in srgb, var(--ar-honey) 24%, var(--ar-card)); color: var(--ar-honey-deep); }
.ar-crowd svg { width: 15px; height: 15px; margin-top: 3px; fill: currentColor; }

.ar-pip {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ar-teal);
}
.ar-live--alone .ar-pip { background: none; box-shadow: inset 0 0 0 1.5px var(--ar-ink-3); }
.ar-live:not(.ar-live--alone) .ar-pip { animation: e6-ar-atmen 2.6s ease-in-out infinite; }
@keyframes e6-ar-atmen {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ar-teal) 45%, transparent); }
    60%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ar-teal) 0%, transparent); }
}

.ar-when {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ar-ink) 5%, var(--ar-card));
    color: var(--ar-ink-2);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.55;
    white-space: nowrap;
}
.ar-when svg { width: 13px; height: 13px; }
.ar-when--open-till {
    background: color-mix(in srgb, var(--ar-tone) 10%, var(--ar-card));
    color: color-mix(in srgb, var(--ar-tone) 60%, var(--ar-ink));
}

.ar-lock { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ar-ink-3); font-weight: 600; }
.ar-lock svg { width: 13px; height: 13px; }

@media (prefers-reduced-motion: reduce) {
    .ar-room { transition: none; }
    .ar-room:hover { transform: none; }
    .ar-live:not(.ar-live--alone) .ar-pip { animation: none; }
}

/* --- durchblick --- */
.ad-card {
    --ad-card: #FFFFFF;
    --ad-line: #E6E6E2;
    --ad-line-2: #A8ADAC;
    --ad-ink: #17292D;
    --ad-ink-2: #5F6B6D;
    --ad-ink-3: #929A9B;
    --ad-teal: #0E9B72;
    --ad-teal-dark: #0B7959;
    --ad-tone: #6FAFD8;
    --ad-tone-soft: #E8F2F9;
    --ad-tile: #E0F2ED;
    --ad-tile-dot: #ABDCCE;
    --ad-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    --ad-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
    box-sizing: border-box;
    width: 400px;
    max-width: 100%;
    padding: 18px 20px 20px;
    border: 1px solid var(--ad-line-2);
    border-radius: 14px;
    background: var(--ad-card);
    color: var(--ad-ink);
    font-family: var(--ad-body);
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.06);
}
.ad-card *, .ad-card *::before, .ad-card *::after { box-sizing: border-box; }

/* Kopf des Spielfensters: Spiel, rechts Aufgeben und das Kreuz */
.ad-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--ad-line); }
.ad-title { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ad-display); font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.ad-give-up { flex: 0 0 auto; margin-left: auto; padding: 6px 12px; border: 1px solid var(--ad-line-2); border-radius: 999px; background: var(--ad-card); color: var(--ad-ink-2); font: inherit; font-size: 13px; font-weight: 600; }
.ad-close { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; margin-left: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--ad-tone-soft); color: var(--ad-ink-2); font: inherit; font-size: 15px; }

/* das Bild: 4 x 4 Kacheln, zu ist eine ruhige Flaeche mit Punkt */
.ad-board { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 3px; width: 100%; aspect-ratio: 4 / 3; margin-top: 14px; padding: 3px; border-radius: 16px; background: var(--ad-tone-soft); overflow: hidden; }
.ad-tile { position: relative; min-width: 0; min-height: 0; border-radius: 6px; background: var(--ad-tile); overflow: hidden; }
.ad-tile::after { content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ad-tile-dot); }
.ad-tile--shown::after { display: none; }
.ad-tile svg { display: block; width: 100%; height: 100%; }
.ad-tile--new svg { animation: e6-ad-turn 0.6s ease-out both; }
@keyframes e6-ad-turn { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }

/* darunter: offen / gesamt, der Balken bis zur naechsten, die Versuche */
.ad-progress { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; color: var(--ad-ink-3); }
.ad-count { min-width: 40px; font-variant-numeric: tabular-nums; }
.ad-count b { color: var(--ad-ink); }
.ad-bar { flex: 1 1 auto; height: 4px; border-radius: 999px; background: var(--ad-tile); overflow: hidden; }
.ad-bar > span { display: block; width: 62%; height: 100%; border-radius: inherit; background: var(--ad-teal); }
.ad-tries { display: inline-flex; gap: 4px; }
.ad-tries i { width: 8px; height: 8px; border-radius: 50%; background: var(--ad-teal); }
.ad-tries i.ad-used { background: var(--ad-line-2); }

/* gegen einen Freund: die Bilanz als leise Zeile */
.ad-duel { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; margin: 8px 0 0; font-size: 13px; color: var(--ad-ink-3); }
.ad-duel b { color: var(--ad-ink-2); font-weight: 600; }
.ad-duel-score { font-family: var(--ad-display); font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ad-ink); }
.ad-duel-score i { padding: 0 4px; font-style: normal; color: var(--ad-ink-3); }

/* raten: Feld und Knopf in einer Zeile */
.ad-guess { display: flex; gap: 8px; margin-top: 12px; }
.ad-answer { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; padding: 9px 14px; border: 1px solid var(--ad-teal); border-radius: 999px; background: var(--ad-card); color: var(--ad-ink); font-size: 14.5px; box-shadow: 0 0 0 3px rgba(14, 155, 114, 0.18); }
.ad-caret { display: inline-block; width: 1.5px; height: 17px; margin-left: 1px; background: var(--ad-ink); animation: e6-ad-blink 1s steps(1) infinite; }
@keyframes e6-ad-blink { 50% { opacity: 0; } }
.ad-btn { padding: 8px 16px; border: 1px solid var(--ad-teal); border-radius: 999px; background: var(--ad-teal); color: #FFFFFF; font: inherit; font-size: 14px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .ad-tile--new svg, .ad-caret { animation: none; } }

/* --- roommate --- */
/* the light theme of main.scss :root, color-mix() resolved */
.am-wrap {
  --am-ground: #F7F7F5; --am-card: #FFFFFF; --am-line: #E6E6E2; --am-line-2: #A8ADAC;
  --am-ink: #17292D; --am-ink-2: #5F6B6D; --am-ink-3: #929A9B; --am-card-2: #F1F2F2;
  --am-honey: #E8A31E; --am-honey-soft: #FCF5E6; --am-honey-deep: #B48522; --am-teal: #0E9B72;
  --am-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --am-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  display: flex; align-items: flex-start; gap: 32px; flex-wrap: wrap;
  padding: 32px; background: var(--am-ground);
  color: var(--am-ink); font-family: var(--am-body); font-size: 15.5px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
.am-wrap *, .am-wrap *::before, .am-wrap *::after { box-sizing: border-box; }

/* ===== the card ===== */
.am-card { background: var(--am-card); border: 1px solid var(--am-line); border-radius: 14px; padding: 18px 20px 16px; }
.am-card--large { width: 430px; }
.am-card--small { width: 300px; }
.am-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.am-card__title { display: flex; align-items: center; margin: 0; font-family: var(--am-display); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.am-card-icon { flex: none; width: 22px; height: 22px; margin-right: 8px; overflow: visible; fill: none; stroke: #D987D6; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.am-card__links { display: inline-flex; align-items: center; gap: 14px; }
.am-link { color: var(--am-ink-3); font-size: 13.5px; font-weight: 500; }
.am-closet { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border: 1px solid var(--am-honey); border-radius: 999px; background: var(--am-honey); color: #FFFFFF; font-size: 13px; font-weight: 700; line-height: 1.2; }
.am-closet svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* narrow card: the room above the values (the app's <=720px layout) */
.am-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 10px; }
.am-card--small .am-home { gap: 14px; }

/* ===== the room frame ===== */
.am-room { position: relative; height: 220px; border-radius: 18px; overflow: hidden; background: #FFF3E2; }
.am-card--small .am-room { height: 180px; border-radius: 16px; }
.am-room-bar { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; display: flex; align-items: center; gap: 8px; }
.am-sky { position: relative; margin-left: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 1px 4px rgba(30, 33, 72, 0.18); }
.am-sky__btn { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--am-ink-3); }
.am-sky__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.am-sky__btn--day.am-on { background: #F5C64E; color: #FFFFFF; }

/* ===== the room itself (roommate-room) ===== */
.am-scene { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: #FFF3E2; z-index: 0; }
.am-wall, .am-floor, .am-layer { position: absolute; }
.am-wall { inset: 0; background: #FFF3E2; }
.am-floor { left: 0; right: 0; bottom: 0; background: #F3DDBF; border-top: 2px solid rgba(239, 192, 141, 0.6); }
.am-layer { inset: 0; width: 100%; height: 100%; display: block; }
.am-wall[data-wall="mb_tapete_salbei"] { background: #D5E6D3; }
.am-floor[data-floor="mb_belag_dielen"] { background-color: #D9A774; background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22168%22%20height=%2248%22%20viewBox=%220%200%20168%2048%22%3E%3Crect%20width=%22168%22%20height=%2224%22%20fill=%22%23D9A774%22/%3E%3Crect%20x=%22104%22%20width=%2264%22%20height=%2224%22%20fill=%22%23DEAF7E%22/%3E%3Crect%20y=%2224%22%20width=%22168%22%20height=%2224%22%20fill=%22%23CF9C68%22/%3E%3Crect%20y=%2224%22%20width=%2244%22%20height=%2224%22%20fill=%22%23D4A26E%22/%3E%3Cg%20fill=%22none%22%20stroke=%22%23B9844F%22%20stroke-opacity=%22.45%22%20stroke-width=%221%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M10%209q26-3%2052%201t36-1%22/%3E%3Cpath%20d=%22M112%2015q20%202%2046-1%22/%3E%3Cpath%20d=%22M54%2033q28%203%2060-1t40%202%22/%3E%3Cpath%20d=%22M6%2040q16-2%2032%201%22/%3E%3C/g%3E%3Cg%20stroke=%22%238E5E33%22%20stroke-opacity=%22.6%22%20stroke-width=%221.6%22%3E%3Cpath%20d=%22M0%2023.2h168M0%2047.2h168%22/%3E%3Cpath%20d=%22M104%200v23.2M44%2024v23.2%22/%3E%3C/g%3E%3C/svg%3E"); background-size: 168px 48px; }

/* the stage of the figure, set in percent of the room height */
.am-stage { position: absolute; left: 50%; aspect-ratio: 210 / 190; }
.am-figure { position: relative; width: 100%; height: 100%; transform-origin: 50% 100%; transform: scale(var(--am-age, 1)); }
.am-figure > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.am-fur { fill: var(--fur); }
.am-second { fill: var(--second); }
.am-accent { fill: var(--accent); }
.am-fur-line { stroke: var(--fur); }
.am-second-line { stroke: var(--second); opacity: 0.7; }
.am-head, .am-body, .am-ear-l, .am-ear-r, .am-pupils { transform-box: fill-box; }
.am-head { transform-origin: 50% 90%; }
.am-ear-l { transform-origin: 70% 10%; }
.am-ear-r { transform-origin: 30% 10%; }
.am-axolotl .am-ear-l { transform-origin: 100% 50%; }
.am-axolotl .am-ear-r { transform-origin: 0% 50%; }
/* life phases */
.am-phase-baby { --am-age: 0.62; }
.am-phase-jung { --am-age: 0.8; }
.am-phase-baby .am-head { scale: 1.16; }
.am-phase-baby .am-body { scale: 0.94; }
.am-phase-baby .am-pupils { scale: 1.25; }
.am-phase-jung .am-head { scale: 1.06; }
.am-phase-jung .am-pupils { scale: 1.1; }
/* bored: the ears sink a little */
.am-bored .am-ear-l { transform: rotate(8deg); }
.am-bored .am-ear-r { transform: rotate(-8deg); }

/* the speech bubble over his head */
.am-bubble { position: absolute; left: 62%; bottom: 84%; z-index: 1; padding: 5px 10px; border: 2px solid #4B4853; border-radius: 14px; background: #FFFFFF; font-size: 12.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; color: var(--am-ink-2); }
.am-bubble::after { content: ""; position: absolute; left: 12px; bottom: -8px; width: 11px; height: 11px; border-right: 2px solid #4B4853; border-bottom: 2px solid #4B4853; background: #FFFFFF; transform: rotate(45deg); }

/* the name tag at his feet */
.am-name-tag { position: absolute; left: -4%; bottom: 1%; z-index: 1; display: inline-flex; align-items: center; max-width: 62%; padding: 1px 8px; border: 2px solid #4B4853; border-radius: 7px; background: #F3DDB5; color: #4B4853; font-family: var(--am-display); font-size: 11.5px; font-weight: 700; line-height: 1.35; white-space: nowrap; transform: rotate(-4deg); }
.am-card--small .am-name-tag { font-size: 10.5px; padding: 0 6px; }

/* the photo corner: a line under the window sill, photos of the phases behind him */
.am-corner { position: absolute; left: 50%; aspect-ratio: 112 / 46; }
.am-corner__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.am-photo { position: absolute; width: 23.2%; transform: rotate(var(--am-tilt, 0deg)); transform-origin: 50% 0; }
.am-photo__card { display: block; padding: 7% 7% 20%; background: #FFFDF8; border: 1.5px solid #4B4853; border-radius: 3px; }
.am-photo__picture { display: block; width: 100%; aspect-ratio: 1 / 1; border: 1px solid #4B4853; overflow: hidden; }
.am-photo__peg { position: absolute; z-index: 1; top: -6%; left: 43%; width: 14%; height: 18%; border: 1px solid #4B4853; border-radius: 1.5px; background: #E3A24F; }

/* ===== beside the room: who, how he is, what you can do ===== */
.am-side { display: flex; flex-direction: column; min-width: 0; }
.am-who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.am-who__name { font-family: var(--am-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.am-who__kind { font-size: 13px; color: var(--am-ink-3); }
.am-mood { margin: 4px 0 0; font-size: 13.5px; color: var(--am-ink-2); min-height: 19px; }
.am-needs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.am-need { display: grid; grid-template-columns: 74px 1fr 28px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--am-ink-3); }
.am-bar { display: block; height: 7px; border-radius: 999px; background: var(--am-card-2); overflow: hidden; }
.am-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--am-teal); }
.am-need--low .am-bar > span { background: var(--am-honey); }
.am-need__value { text-align: right; font-variant-numeric: tabular-nums; color: var(--am-ink-2); }
.am-grow { display: flex; flex-direction: column; gap: 5px; margin-top: 15px; }
.am-grow__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.am-grow__line { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--am-ink-2); line-height: 1.35; }
.am-grow__open { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid #E7C88A; border-radius: 50%; background: var(--am-honey-soft); color: var(--am-honey-deep); }
.am-grow__open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.am-grow__track { display: block; height: 6px; border-radius: 999px; background: var(--am-honey-soft); overflow: hidden; }
.am-grow__track > span { display: block; height: 100%; border-radius: inherit; background: var(--am-honey); }
.am-foot { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--am-line); }
.am-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.am-btn { width: 100%; padding: 8px; border: 1px solid var(--am-line-2); border-radius: 999px; background: var(--am-card); color: var(--am-ink); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.55; cursor: pointer; }
.am-btn:disabled { opacity: 0.55; cursor: default; }
.am-card--small .am-btn { font-size: 13px; padding: 6px 4px; }
.am-card--small .am-card__head { gap: 8px; }

/* --- gifts-profile --- */
/* ---------- tokens: main.scss :root (light), prefixed ---------- */
.ag-app {
    --ag-ground: #F7F7F5;
    --ag-card: #FFFFFF;
    --ag-line: #E6E6E2;
    --ag-ink: #17292D;
    --ag-honey: #E8A31E;
    --ag-teal: #0E9B72;
    --ag-card-2: color-mix(in srgb, var(--ag-card) 94%, var(--ag-ink));
    --ag-line-2: color-mix(in srgb, var(--ag-line) 70%, var(--ag-ink));
    --ag-ink-2: color-mix(in srgb, var(--ag-ink) 68%, var(--ag-ground));
    --ag-ink-3: color-mix(in srgb, var(--ag-ink) 45%, var(--ag-ground));
    --ag-teal-dark: color-mix(in srgb, var(--ag-teal) 78%, #000000);
    --ag-teal-soft: color-mix(in srgb, var(--ag-teal) 12%, var(--ag-card));
    --ag-teal-line: color-mix(in srgb, var(--ag-teal) 28%, var(--ag-card));
    --ag-honey-2: color-mix(in srgb, var(--ag-honey) 80%, #FFFFFF);
    --ag-honey-soft: color-mix(in srgb, var(--ag-honey) 11%, var(--ag-card));
    --ag-honey-line: color-mix(in srgb, var(--ag-honey) 30%, var(--ag-card));
    --ag-honey-deep: color-mix(in srgb, var(--ag-honey) 75%, var(--ag-ink));
    --ag-premium: #0E8C93;
    --ag-on-cool: #FFFFFF;
    --ag-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    --ag-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
    --ag-radius: 14px;
}

/* ---------- preview page only ---------- */

/* ---------- shared atoms ---------- */
.ag-app { box-sizing: border-box; color: var(--ag-ink); font-family: var(--ag-body); font-size: 15.5px; line-height: 1.55; text-align: left; }
.ag-app *, .ag-app *::before, .ag-app *::after { box-sizing: border-box; }
.ag-app p { margin: 0; }
.ag-app svg { display: block; }
.ag-h2 { margin: 0; font-family: var(--ag-display); font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.ag-gift, .ag-coin, .ag-shopicon, .ag-smiley { overflow: visible; filter: drop-shadow(1px 1px 1.1px rgba(0, 0, 0, .8)); }
.ag-app .ag-coin { display: inline-block; width: .95em; height: .95em; vertical-align: -.12em; }
.ag-times { position: relative; top: 1px; margin-left: -1px; }
.ag-av { display: block; flex: 0 0 auto; overflow: visible; }
.ag-av--sm { width: 32px; height: 32px; }
.ag-av--xl { width: 84px; height: 84px; }
.ag-close { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ag-card-2); color: var(--ag-ink-2); font-size: 14px; line-height: 1; }
.ag-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ag-card { background: var(--ag-card); border: 1px solid var(--ag-line); border-radius: var(--ag-radius); padding: 20px 22px; }
.ag-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ag-card-title { font-size: 17px; display: flex; align-items: center; }
.ag-cardicon { width: 22px; height: 22px; margin-right: 8px; flex: none; fill: none; stroke: #EDAA2C; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ag-rare { display: inline-flex; align-items: center; padding: 4px 6px 3px; border-radius: 999px; background: var(--ag-honey); box-shadow: 0 1px 2px color-mix(in srgb, var(--ag-honey-deep) 30%, transparent); color: #FFFFFF; font-size: 7.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; line-height: 1; }
.ag-rare--premium { background: var(--ag-premium); }
.ag-star { position: relative; display: block; line-height: 0; }
.ag-star svg { width: 100%; height: 100%; filter: drop-shadow(1px 1px 1.1px rgba(0, 0, 0, .8)); }
.ag-star-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 9.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ag-field { position: relative; display: flex; align-items: center; min-height: 38px; padding: 8px 46px 8px 15px; border: 1px solid var(--ag-line-2); border-radius: 999px; background: var(--ag-card); font-size: 15px; line-height: 1.4; }
.ag-field-text { display: inline-flex; align-items: center; gap: 5px; }
.ag-field-text .ag-smiley { width: 1.45em; height: 1.45em; }
.ag-field-placeholder { color: var(--ag-ink-3); }
.ag-field-open { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; color: var(--ag-ink-3); }
.ag-field-open svg { width: 22px; height: 22px; }

/* ---------- 1 · gift picker (sheet from-profile, at phone width) ---------- */
.ag-picker { width: 400px; display: flex; flex-direction: column; background: var(--ag-card); border: 1px solid var(--ag-line-2); border-radius: 18px; padding: 22px 22px 0; box-shadow: 0 18px 50px color-mix(in srgb, var(--ag-ink) 22%, transparent); overflow: hidden; }
.ag-picker .ag-sheet-head { align-items: flex-start; margin-bottom: 14px; }
.ag-sheet-title { margin-right: auto; min-width: 0; }
.ag-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ag-honey-deep); }
.ag-sheet-title .ag-h2 { margin-top: 2px; }
.ag-balance { display: grid; justify-items: end; gap: 2px; margin-top: 2px; }
.ag-balance-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ag-ink-3); }
.ag-balance-sum { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 6px; border-radius: 999px; background: var(--ag-honey-soft); font-size: 13.5px; }
.ag-balance-sum .ag-coin { width: 16px; height: 16px; }
.ag-balance-sum b { color: var(--ag-honey-deep); font-variant-numeric: tabular-nums; }
.ag-step { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px !important; font-size: 13.5px; font-weight: 700; }
.ag-step--next { margin-top: 18px !important; }
.ag-step small { font-size: 13.5px; font-weight: 500; color: var(--ag-ink-3); }
.ag-step-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ag-honey-soft); color: var(--ag-honey-deep); font-size: 11.5px; font-weight: 800; }
.ag-pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.ag-pick-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px 10px; border: 1px solid var(--ag-line); border-radius: 14px; background: var(--ag-card); font: inherit; color: var(--ag-ink); cursor: default; }
.ag-pick-item--picked { border-color: var(--ag-honey); background: var(--ag-honey-soft); box-shadow: inset 0 0 0 1px var(--ag-honey); }
.ag-pick-glyph { display: grid; place-items: center; }
.ag-pick-glyph .ag-gift { width: 40px; height: 40px; }
.ag-pick-name { margin-top: 4px; font-size: 13px; font-weight: 600; line-height: 1.2; }
.ag-pick-price { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--ag-honey-deep); font-variant-numeric: tabular-nums; }
.ag-pick-price .ag-coin { width: 12px; height: 12px; }
.ag-pick-price--stash { color: var(--ag-teal-dark); }
.ag-pick-rare { position: absolute; top: 6px; right: 6px; }
/* das Verschenken-Fenster seit dem 15.10.2026: nur das Lager, mit der Anzahl - und darunter „Mehr holen“ */
.ag-pick-count { margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: var(--ag-teal-soft); color: var(--ag-teal-dark); font-size: 12px; font-weight: 800; line-height: 1.4; font-variant-numeric: tabular-nums; }
.ag-pick-item--picked .ag-pick-count { background: var(--ag-card); }
.ag-more { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 14px; border: 1.5px dashed var(--ag-honey-line); border-radius: 14px; background: color-mix(in srgb, var(--ag-honey) 7%, var(--ag-card)); }
.ag-more-plus { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ag-honey); color: #FFFFFF; font-size: 20px; font-weight: 700; line-height: 1; }
.ag-more-text { display: grid; gap: 1px; margin-right: auto; min-width: 0; }
.ag-more-text b { font-size: 14px; color: var(--ag-ink); }
.ag-more-text small { font-size: 12px; color: var(--ag-ink-3); }
.ag-more-go { font-size: 22px; line-height: 1; color: var(--ag-honey-deep); }
.ag-why { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 8px 2px 0 !important; font-size: 12.5px; line-height: 1.45; color: var(--ag-ink-3); }
.ag-why-left { flex: 0 0 auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.ag-picker-foot { display: flex; align-items: center; gap: 12px; margin: 14px -22px 0; padding: 12px 22px 14px; border-top: 1px solid var(--ag-line); background: var(--ag-card); }
.ag-summary { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; min-width: 0; font-size: 13.5px; color: var(--ag-ink-2); }
.ag-summary .ag-gift { width: 26px; height: 26px; flex: 0 0 auto; }
.ag-summary b { color: var(--ag-ink); }
.ag-btn-gift { flex: 0 0 auto; padding: 11px 22px; border-radius: 999px; border: 1px solid var(--ag-honey); background: var(--ag-honey); color: #FFFFFF; font-size: 14.5px; font-weight: 700; line-height: 1.2; }

/* ---------- 2 · profile head card + vitrine ---------- */
.ag-profile-stack { width: 380px; display: flex; flex-direction: column; gap: 14px; }
.ag-profile { --ag-band-h: 92px; position: relative; display: grid; grid-template-columns: 1fr; gap: 0; padding: calc(var(--ag-band-h) + 18px) 22px 20px; background: var(--ag-card); border: 1px solid var(--ag-line); border-radius: var(--ag-radius); overflow: hidden; }
.ag-band { --ag-tint: #F2749F; position: absolute; top: 0; left: 0; right: 0; height: var(--ag-band-h); border-radius: calc(var(--ag-radius) - 1px) calc(var(--ag-radius) - 1px) 0 0; overflow: hidden; background: color-mix(in srgb, var(--ag-tint) 17%, #FFFFFF); }
.ag-band-layer { position: absolute; top: 0; left: 0; width: calc(100% / .82); height: calc(100% / .82); transform: scale(.82); transform-origin: 0 0; overflow: visible; }
.ag-band-tone { fill: color-mix(in srgb, var(--ag-tint) 44%, #FFFFFF); }
.ag-band-soft { fill: color-mix(in srgb, var(--ag-tint) 30%, #FFFFFF); }
.ag-band-disc { fill: color-mix(in srgb, var(--ag-tint) 27%, #FFFFFF); }
.ag-band-heart { fill: color-mix(in srgb, var(--ag-honey) 80%, #FFFFFF); }
.ag-profile-main { position: relative; display: flex; align-items: flex-end; gap: 18px; min-width: 0; }
.ag-portrait { flex: 0 0 auto; align-self: flex-start; margin-top: -50px; }
.ag-portrait-shot { position: relative; line-height: 0; }
.ag-portrait-shot .ag-av { filter: drop-shadow(0 2.5px 0 #FFFFFF) drop-shadow(0 -2.5px 0 #FFFFFF) drop-shadow(2.5px 0 0 #FFFFFF) drop-shadow(-2.5px 0 0 #FFFFFF); }
.ag-star--portrait { position: absolute; top: -10px; left: -10px; width: 34px; height: 34px; }
.ag-identity { flex: 1 1 auto; min-width: 0; align-self: flex-start; }
.ag-profile-name { margin: 0; font-family: var(--ag-display); font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.ag-profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; font-size: 14px; color: var(--ag-ink-2); }
.ag-special { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 4px; border-radius: 999px; background: var(--ag-honey-soft); border: 1px solid var(--ag-honey-line); font-size: 12.5px; font-weight: 700; line-height: 1.4; color: var(--ag-honey-deep); white-space: nowrap; }
.ag-special svg { width: 18px; height: 18px; }
.ag-special-ribbon { fill: var(--ag-honey-deep); }
.ag-special-disc { fill: var(--ag-honey); }
.ag-special-stitch { fill: none; stroke: #FFFFFF; stroke-width: 1.4; stroke-dasharray: 2.4 2.4; }
.ag-special-star { fill: #FFFFFF; }
.ag-about { position: relative; margin: 12px 0 0 !important; font-size: 14.5px; line-height: 1.45; color: var(--ag-ink-2); }
.ag-profile-side { position: relative; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ag-line); }
.ag-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ag-btn { min-width: 0; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--ag-line-2); background: var(--ag-card); color: var(--ag-ink); font-size: 13.5px; font-weight: 600; text-align: center; white-space: nowrap; }
.ag-btn--gift { background: var(--ag-honey); border-color: var(--ag-honey); color: #FFFFFF; }
.ag-tallies { margin-left: auto; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.ag-tally { display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; color: var(--ag-ink-2); background: var(--ag-honey-soft); }
.ag-tally b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ag-tally--premium { color: #FFFFFF; background: var(--ag-premium); }
.ag-tally--selten { color: #FFFFFF; background: var(--ag-honey); }
.ag-vitrine { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 2px; }
.ag-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ag-slot { --ag-tone: var(--ag-ink); position: relative; height: 84px; min-width: 0; border-radius: 16px; background: color-mix(in srgb, var(--ag-honey) 7%, var(--ag-card)); }
.ag-slot[data-mark] { background: color-mix(in srgb, var(--ag-tone) 9%, var(--ag-card)); box-shadow: inset 0 0 0 1.5px var(--ag-tone); }
.ag-slot[data-mark="selten"] { --ag-tone: var(--ag-honey); }
.ag-slot[data-mark="premium"] { --ag-tone: var(--ag-premium); }
.ag-slot-gift { position: absolute; inset: 0; display: grid; place-items: center; }
.ag-slot-thing { position: relative; z-index: 1; display: grid; place-items: center; transform: translateY(-4px); }
.ag-slot-thing .ag-gift { width: 40px; height: 40px; }
.ag-slot-floor { position: absolute; left: 50%; top: calc(50% + 19px); width: 32px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ag-ink) 28%, transparent); filter: blur(3px); transform: translateX(-50%); }
.ag-slot-count { position: absolute; right: 6px; bottom: 6px; z-index: 2; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 800; line-height: 16px; color: var(--ag-ink-2); background: var(--ag-card); box-shadow: 0 1px 2px color-mix(in srgb, var(--ag-ink) 20%, transparent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ag-slot-count .ag-times { font-size: 9.5px; opacity: .7; }

/* ---------- 3 · notices ---------- */
.ag-notices { width: 380px; display: flex; flex-direction: column; gap: 22px; }
.ag-news { padding: 18px 20px 12px; }
.ag-card-head--tight { margin-bottom: 8px; }
.ag-happening { display: flex; align-items: center; gap: 12px; margin: 0 -10px; padding: 12px 10px; border-radius: 12px; }
.ag-happening--new { background: var(--ag-teal-soft); box-shadow: inset 3px 0 0 var(--ag-teal); }
.ag-happening--new::after { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ag-teal); }
.ag-happening-face { position: relative; flex: 0 0 auto; display: inline-flex; }
.ag-happening-said { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-happening-line { font-size: 14.5px; line-height: 1.4; color: var(--ag-ink); }
.ag-happening-who { font-weight: 600; }
.ag-happening-meta { font-size: 12.5px; color: var(--ag-ink-3); }
.ag-dot { color: var(--ag-line-2); }
.ag-happening-where { color: var(--ag-teal); font-weight: 600; }
.ag-rewarded { width: 380px; background: var(--ag-card); border: 1px solid var(--ag-line-2); border-radius: 18px; padding: 22px; box-shadow: 0 18px 50px color-mix(in srgb, var(--ag-ink) 22%, transparent); }
.ag-rewarded .ag-sheet-head { margin-bottom: 14px; }
.ag-medal { display: flex; align-items: center; gap: 14px; margin: 2px 0 6px; padding: 12px 14px; border-radius: 18px; background: color-mix(in srgb, var(--ag-honey) 12%, var(--ag-card)); box-shadow: inset 0 0 0 1px var(--ag-honey-line); }
.ag-medal-disc { flex: 0 0 auto; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--ag-card); box-shadow: 0 0 0 3px var(--ag-honey), 0 6px 16px color-mix(in srgb, var(--ag-honey) 30%, transparent); }
.ag-star--medal { width: 40px; height: 40px; }
.ag-medal-says { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-medal-step { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ag-honey-deep); line-height: 1.3; }
.ag-medal-name { font-family: var(--ag-display); font-size: 21px; font-weight: 700; line-height: 1.15; }
.ag-lead { margin: 10px 0 0 !important; font-size: 15px; line-height: 1.5; color: var(--ag-ink-2); }
.ag-got { display: flex; align-items: center; gap: 12px; padding: 12px 2px 2px; }
.ag-got-shape { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; }
.ag-got-shape .ag-shopicon { width: 38px; height: 38px; }
.ag-got-says { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ag-got-thing { font-size: 15px; font-weight: 700; line-height: 1.35; }
.ag-got-for { font-size: 13px; line-height: 1.4; color: var(--ag-ink-2); }
.ag-rewarded-actions { display: flex; align-items: center; gap: 6px 12px; padding-top: 12px; margin-top: 18px; }
.ag-btn-honey { padding: 10px 22px; border-radius: 999px; border: 1px solid var(--ag-honey); background: var(--ag-honey); color: #FFFFFF; font-size: 15px; font-weight: 700; line-height: 1.3; }
.ag-later { padding: 8px 10px; color: var(--ag-ink-3); font-size: 14px; font-weight: 600; }

/* ---------- 4 · room chat ---------- */
.ag-room { width: 460px; }
.ag-roomhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 18px 22px 16px; background: var(--ag-card); border: 1px solid var(--ag-line); border-bottom: none; border-radius: var(--ag-radius) var(--ag-radius) 0 0; }
.ag-roomicon { flex: 0 0 auto; width: 44px; height: 44px; }
.ag-room-name { margin: 0; font-family: var(--ag-display); font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.ag-fav { display: grid; place-items: center; width: 32px; height: 32px; color: var(--ag-teal); }
.ag-fav svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.ag-room-sub { flex: 1 1 100%; color: var(--ag-ink-2); font-size: 14.5px; }
.ag-topic { display: inline-flex; align-items: baseline; gap: 6px; }
.ag-topic b { padding: 0 7px; border-radius: 999px; background: var(--ag-teal-soft); color: var(--ag-teal-dark); font-size: 11px; font-weight: 700; line-height: 18px; }
.ag-stream { background: var(--ag-card); border: 1px solid var(--ag-line); border-radius: 0 0 var(--ag-radius) var(--ag-radius); overflow: hidden; }
.ag-log { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 8px; }
.ag-msg { display: flex; gap: 11px; margin-inline: -10px; padding: 5px 10px; border-radius: 12px; }
.ag-msg--cont { margin-top: -8px; }
.ag-msg-spacer { width: 32px; flex: 0 0 auto; }
.ag-msg-body { flex: 1 1 auto; min-width: 0; }
.ag-msg-line { display: flex; align-items: baseline; gap: 8px; }
.ag-msg-who { font-size: 14.5px; font-weight: 600; }
.ag-msg-when { font-size: 12px; color: var(--ag-ink-3); }
.ag-msg-text { margin: 1px 0 0 !important; font-size: 15px; line-height: 1.45; }
.ag-daily-tag { display: inline-block; margin-right: 6px; vertical-align: 1px; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, #7B5CF0 10%, var(--ag-card)); color: #5B3FC4; font-size: 11px; font-weight: 700; line-height: 18px; }
.ag-msg-tools { flex: 0 1 auto; display: flex; align-items: flex-start; margin-left: auto; }
.ag-reaction { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px 0 4px; border: 1px solid var(--ag-line); border-radius: 999px; background: var(--ag-card); box-shadow: 0 1px 2px color-mix(in srgb, var(--ag-ink) 8%, transparent); color: var(--ag-ink-2); font-size: 12px; font-weight: 700; line-height: 1; }
.ag-reaction .ag-smiley { width: 17px; height: 17px; }
.ag-reaction--mine { border-color: var(--ag-teal-line); background: var(--ag-teal-soft); color: var(--ag-teal-dark); box-shadow: none; }
.ag-reaction-count { font-variant-numeric: tabular-nums; }
.ag-join { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 4px auto !important; padding: 3px 6px 3px 4px; border-radius: 999px; background: var(--ag-honey-soft); color: var(--ag-ink-2); font-size: 13px; line-height: 1.3; }
.ag-join .ag-av { width: 24px; height: 24px; }
.ag-join b { color: var(--ag-ink); }
.ag-wave { padding: 3px 11px; border: 1px solid var(--ag-honey-line); border-radius: 999px; background: var(--ag-card); color: var(--ag-honey-deep); font-size: 12px; font-weight: 700; }
.ag-effect { display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; max-width: 100%; margin: 4px auto !important; padding: 5px 14px; border-radius: 999px; background: var(--ag-teal-soft); color: var(--ag-ink-2); font-size: 13px; line-height: 1.3; }
.ag-effect .ag-gift { width: 22px; height: 22px; flex: none; }
.ag-effect b { color: var(--ag-ink); font-weight: 700; }
.ag-effect-when { font-size: 11.5px; color: var(--ag-ink-3); }
.ag-composer { display: flex; gap: 10px; align-items: center; padding: 14px 22px 18px; }
.ag-field--room { flex: 1 1 auto; min-width: 0; }
.ag-btn-send { align-self: stretch; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; border: 1px solid var(--ag-teal); background: var(--ag-teal); color: var(--ag-on-cool); font-size: 14.5px; font-weight: 600; }
/* Einbau: Wrapper und Nacht-Variante */
.cl .ag-app, .cl .ad-card, .cl .am-wrap { width: 100%; max-width: none; }
.cl .ag-room, .cl .ag-profile, .cl .ad-card, .cl .am-card, .cl .ag-happening, .cl .ag-medal { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 26px 60px rgba(0,0,0,.55), 0 0 60px rgba(47,195,149,.12); }
.c-chat .ag-msg--cont, .c-chat .ag-join, .c-chat .ag-effect, .c-chat .ag-room-sub, .c-chat .ag-msg:last-of-type { display: none; }
.c-pet .am-mood, .c-pet .am-needs, .c-pet .am-foot, .c-pet .am-card__links { display: none; }
.c-t1 .ag-happening { background: #fff; }
/* App-Karten in den Abschnitten: etwas größer, leicht schräg, mit Schatten */
.s .shot > .ag-picker, .s .shot > .ad-card, .s .shot > .am-wrap .am-card { box-shadow: 0 2px 0 rgba(23,41,45,.05), 0 30px 60px rgba(23,41,45,.16); }
.s-gifts .shot > .ag-picker { margin-left: auto; rotate: -1.5deg; }
.s-arcade .shot > .ad-card { margin: 0 auto; rotate: 1.5deg; }
.s-pet .shot > .am-wrap { rotate: 1deg; }
@media (min-width: 1100px) { .s .shot > .ag-picker, .s .shot > .ad-card, .s .shot > .am-wrap, .duo > .ag-profile-stack, .duo > .night-card { zoom: 1.1; } }
/* Deine Seite: das helle Profil vorn, „Nacht“ dahinter */
.duo > .ag-profile-stack { position: relative; z-index: 2; max-width: 380px; rotate: -2deg; }
.duo > .ag-profile-stack .ag-profile, .duo > .ag-profile-stack .ag-showcase { box-shadow: 0 2px 0 rgba(23,41,45,.05), 0 26px 50px rgba(23,41,45,.15); }
.duo .night-card { width: 300px; right: -10px; top: 0; }
@media (max-width: 640px) { .duo > .ag-profile-stack { max-width: 86%; } .duo .night-card { width: 66%; right: -6px; } }
@media (max-width: 900px) {
  .two { grid-template-columns: minmax(0, 1fr); }
  .s .shot .ad-card, .s .shot .ag-picker, .s .shot .am-wrap, .s .shot .am-card { width: 100% !important; max-width: 460px; }
  .s-arcade .shot > .ad-card, .s-gifts .shot > .ag-picker { margin: 0 auto; }
}
/* Stufen: die Punkte-Zeilen im Stil von „Neues“ der App */
.from .m-card.m-toast { background: #E7F5EF; border: 0; border-left: 3px solid #0E9B72; border-radius: 12px; }
@media (max-width: 640px) { .c-chat .ag-composer { display: none; } }
.c-game .ad-give-up, .c-prof .ag-profile-side, .c-prof .ag-about { display: none; }

.am-wrap.am-solo { display: block; padding: 0; background: none; gap: 0; }
.am-wrap.am-solo .am-card { width: 100%; }
.ag-app.ag-night { --ag-ground: #121A1C; --ag-card: #1A2427; --ag-line: #2A3639; --ag-ink: #EEF3F2; --ag-honey: #F2B23A; --ag-teal: #2FC395; color: var(--ag-ink); }
/* ===== /App-Bausteine ===== */

/* ===== Profilseiten (v4): drei ganze Profilansichten, nachgebaut aus der App, Klassen ap- ===== */
/*
 * Drei Profilseiten aus zwinka - nachgebaut aus main.scss, profile.component.scss und den Karten.
 * Alles hier beginnt mit ap- (Klassen, Variablen) bzw. e6-ap- (Keyframes); kein Selektor greift
 * ohne .ap--Vorfahr. Die Seiten sind ein 520 px breiter Handy-Ausschnitt, verkleinert (--ap-k).
 */



@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/fraunces-latin.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/caveat-latin.woff2") format("woff2"); }

@property --ap-glint { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ================= Rahmen: Fächer ab 1000 px, darunter eine wischbare Reihe ================= */
.ap-fan {
    --ap-k: 0.5769;                       /* 520 px Ausschnitt -> 300 px */
    display: flex;
    gap: 16px;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    padding: 12px 16px 20px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ap-fan::-webkit-scrollbar { display: none; }
.ap-fan *, .ap-fan *::before, .ap-fan *::after { box-sizing: border-box; }
.ap-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: calc(520px * var(--ap-k));
    scroll-snap-align: center;
}
.ap-page {
    position: relative;
    width: calc(520px * var(--ap-k));
    height: calc(1000px * var(--ap-k));
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 0 0 1px rgba(36, 31, 20, 0.08), 0 2px 6px rgba(36, 31, 20, 0.08), 0 24px 48px -20px rgba(36, 31, 20, 0.35);
}
.ap-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 100%; }
.ap-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ap-tag-tone) 9%, #FFFFFF);
    border: 1px solid color-mix(in srgb, var(--ap-tag-tone) 30%, #FFFFFF);
    color: #241F14;
    font-family: "Figtree", "Segoe UI", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}
.ap-tag b { margin-left: 4px; font-weight: 800; color: color-mix(in srgb, var(--ap-tag-tone) 70%, #241F14); }
.ap-item--juna { --ap-tag-tone: #2FC395; }
.ap-item--mona { --ap-tag-tone: #F2749F; }
.ap-item--kalle { --ap-tag-tone: #3F6488; }

@media (min-width: 1000px) {
    .ap-fan {
        --ap-k: 0.6923;                   /* 520 px Ausschnitt -> 360 px */
        justify-content: center;
        overflow: visible;
        scroll-snap-type: none;
        gap: 0;
        padding: 48px 0 24px;
    }
    .ap-item {
        position: relative;
        margin-inline: -26px;
        transition: transform 0.45s cubic-bezier(.34, 1.4, .64, 1);
    }
    .ap-item:nth-child(1) { z-index: 1; transform: translateY(28px) rotate(-4deg); transform-origin: 100% 100%; }
    .ap-item:nth-child(2) { z-index: 2; transform: translateY(-6px); }
    .ap-item:nth-child(3) { z-index: 1; transform: translateY(28px) rotate(4deg); transform-origin: 0 100%; }
    .ap-item:hover, .ap-item:focus-within { z-index: 3; transform: translateY(-14px) rotate(0deg); }
    .ap-item:nth-child(2):hover { transform: translateY(-14px); }
    .ap-item .ap-tags { opacity: .9; }
}

/* ================= die Seite: ein Handy-Ausschnitt, 520 px breit ================= */
.ap-screen {
    --ap-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    --ap-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
    --ap-radius: 14px;
    --ap-stack: 14px;
    --ap-premium: #0E8C93;
    --ap-u: 1px;
    --ap-pattern: color-mix(in srgb, var(--ap-pattern-ink, var(--ap-ink)) calc(var(--ap-pattern-alpha, 26) * 1%), transparent);
    --ap-pattern-soft: color-mix(in srgb, var(--ap-pattern-ink, var(--ap-ink)) calc(var(--ap-pattern-alpha, 26) * 0.73%), transparent);
    /* die Profilschrift: ohne Wahl die Hausschrift */
    --ap-pf: var(--ap-display);
    --ap-pf-weight: 700;
    --ap-pf-adjust: none;
    --ap-pf-spacing: -0.02em;

    position: absolute;
    top: 0;
    left: 0;
    width: 520px;
    height: 1000px;
    padding: 18px 14px;
    transform: scale(var(--ap-k));
    transform-origin: 0 0;
    background-color: var(--ap-ground);
    color: var(--ap-ink);
    font-family: var(--ap-body);
    font-size: 15.5px;
    line-height: 1.55;
    text-align: left;
    -webkit-font-smoothing: antialiased;

    /* alles Abgeleitete wie in main.scss :root */
    --ap-card-2: color-mix(in srgb, var(--ap-card) 94%, var(--ap-ink));
    --ap-line-2: color-mix(in srgb, var(--ap-line) 70%, var(--ap-ink));
    --ap-ink-2: color-mix(in srgb, var(--ap-ink) 68%, var(--ap-ground));
    --ap-ink-3: color-mix(in srgb, var(--ap-ink) 45%, var(--ap-ground));
    --ap-teal-dark: color-mix(in srgb, var(--ap-teal) 78%, #000000);
    --ap-teal-soft: color-mix(in srgb, var(--ap-teal) 12%, var(--ap-card));
    --ap-teal-line: color-mix(in srgb, var(--ap-teal) 28%, var(--ap-card));
    --ap-honey-soft: color-mix(in srgb, var(--ap-honey) 11%, var(--ap-card));
    --ap-honey-line: color-mix(in srgb, var(--ap-honey) 30%, var(--ap-card));
    --ap-honey-deep: color-mix(in srgb, var(--ap-honey) 75%, var(--ap-ink));
    --ap-rim: color-mix(in srgb, var(--ap-ink) 22%, var(--ap-line));
}
.ap-screen p { margin: 0; }
.ap-screen svg { display: block; }

/* die Farbprofile (personalisation.constants.ts THEMES) */
.ap-screen--nacht {
    --ap-ground: #121A1C; --ap-card: #1A2427; --ap-line: #2A3639; --ap-ink: #EEF3F2;
    --ap-honey: #F2B23A; --ap-teal: #2FC395; --ap-on-warm: #121A1C; --ap-on-cool: #121A1C;
}
.ap-screen--rose {
    --ap-ground: #FBF6F9; --ap-card: #FFFFFF; --ap-line: #EFE2E9; --ap-ink: #2A1B24;
    --ap-honey: #F2749F; --ap-teal: #8B5CF6; --ap-on-warm: #3A0A20; --ap-on-cool: #FFFFFF;
}
.ap-screen--sanddorn {
    --ap-ground: #FFF6EE; --ap-card: #FFFFFF; --ap-line: #F5E2D2; --ap-ink: #2A1A10;
    --ap-honey: #EF6C1F; --ap-teal: #12A0C4; --ap-on-warm: #2B1004; --ap-on-cool: #04303A;
}
.ap-screen--silber {
    --ap-ground: #E7EBEF; --ap-card: #FAFBFC; --ap-line: #C4CCD5; --ap-ink: #1D242B;
    --ap-honey: #A8741C; --ap-teal: #3F6488; --ap-on-warm: #FFFFFF; --ap-on-cool: #FFFFFF;
    /* das Profildesign Silber (main.scss html[data-design='silber']) */
    --ap-design-card: linear-gradient(135deg, #FFFFFF 0%, #E6EAEE 42%, #FAFBFC 58%, #DCE2E7 100%);
    --ap-design-edge: #AEB8C2;
    background: linear-gradient(160deg, #C3CBD3 0%, #EEF1F4 28%, #AEB8C2 58%, #E3E7EB 82%, #BCC5CE 100%);
}

/* der feste Verlauf als Grund (main.scss [data-grad="sonnenaufgang"]) */
.ap-screen--sonnenaufgang {
    background-image: linear-gradient(180deg,
        color-mix(in srgb, #F7A35C 28%, var(--ap-ground)),
        color-mix(in srgb, #F2889F 14%, var(--ap-ground)) 55%,
        var(--ap-ground));
}

/* das Muster liegt auf dem Grund, hinter allem (main.scss [data-bg]) */
.ap-ground { position: absolute; inset: 0; pointer-events: none; }
.ap-screen--sterne .ap-ground {
    background-image:
        radial-gradient(ellipse calc(1.3 * var(--ap-u)) calc(6 * var(--ap-u)) at 47.1% 79.7%, var(--ap-pattern) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(6 * var(--ap-u)) calc(1.3 * var(--ap-u)) at 47.1% 79.7%, var(--ap-pattern) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(1.1 * var(--ap-u)) calc(4.6 * var(--ap-u)) at 93.6% 47.8%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(4.6 * var(--ap-u)) calc(1.1 * var(--ap-u)) at 93.6% 47.8%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(0.9 * var(--ap-u)) calc(3.2 * var(--ap-u)) at 28.9% 74.6%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(3.2 * var(--ap-u)) calc(0.9 * var(--ap-u)) at 28.9% 74.6%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(1.3 * var(--ap-u)) calc(6 * var(--ap-u)) at 10.0% 64.2%, var(--ap-pattern) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(6 * var(--ap-u)) calc(1.3 * var(--ap-u)) at 10.0% 64.2%, var(--ap-pattern) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(1.1 * var(--ap-u)) calc(4.6 * var(--ap-u)) at 25.4% 52.7%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(4.6 * var(--ap-u)) calc(1.1 * var(--ap-u)) at 25.4% 52.7%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(0.9 * var(--ap-u)) calc(3.2 * var(--ap-u)) at 47.0% 53.3%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(3.2 * var(--ap-u)) calc(0.9 * var(--ap-u)) at 47.0% 53.3%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(1.3 * var(--ap-u)) calc(6 * var(--ap-u)) at 92.5% 16.1%, var(--ap-pattern) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(6 * var(--ap-u)) calc(1.3 * var(--ap-u)) at 92.5% 16.1%, var(--ap-pattern) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(1.1 * var(--ap-u)) calc(4.6 * var(--ap-u)) at 73.4% 46.3%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(4.6 * var(--ap-u)) calc(1.1 * var(--ap-u)) at 73.4% 46.3%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(0.9 * var(--ap-u)) calc(3.2 * var(--ap-u)) at 71.5% 33.1%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(3.2 * var(--ap-u)) calc(0.9 * var(--ap-u)) at 71.5% 33.1%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(1.3 * var(--ap-u)) calc(6 * var(--ap-u)) at 80.5% 9.9%, var(--ap-pattern) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(6 * var(--ap-u)) calc(1.3 * var(--ap-u)) at 80.5% 9.9%, var(--ap-pattern) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(1.1 * var(--ap-u)) calc(4.6 * var(--ap-u)) at 2.5% 82.0%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(4.6 * var(--ap-u)) calc(1.1 * var(--ap-u)) at 2.5% 82.0%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(0.9 * var(--ap-u)) calc(3.2 * var(--ap-u)) at 49.4% 39.0%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(3.2 * var(--ap-u)) calc(0.9 * var(--ap-u)) at 49.4% 39.0%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(1.3 * var(--ap-u)) calc(6 * var(--ap-u)) at 84.2% 94.2%, var(--ap-pattern) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(6 * var(--ap-u)) calc(1.3 * var(--ap-u)) at 84.2% 94.2%, var(--ap-pattern) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(1.1 * var(--ap-u)) calc(4.6 * var(--ap-u)) at 3.5% 29.7%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(4.6 * var(--ap-u)) calc(1.1 * var(--ap-u)) at 3.5% 29.7%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(0.9 * var(--ap-u)) calc(3.2 * var(--ap-u)) at 56.6% 19.2%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(3.2 * var(--ap-u)) calc(0.9 * var(--ap-u)) at 56.6% 19.2%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(1.3 * var(--ap-u)) calc(6 * var(--ap-u)) at 14.0% 48.2%, var(--ap-pattern) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(6 * var(--ap-u)) calc(1.3 * var(--ap-u)) at 14.0% 48.2%, var(--ap-pattern) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(1.1 * var(--ap-u)) calc(4.6 * var(--ap-u)) at 57.5% 2.2%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(4.6 * var(--ap-u)) calc(1.1 * var(--ap-u)) at 57.5% 2.2%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(0.9 * var(--ap-u)) calc(3.2 * var(--ap-u)) at 27.6% 19.7%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(3.2 * var(--ap-u)) calc(0.9 * var(--ap-u)) at 27.6% 19.7%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(1.3 * var(--ap-u)) calc(6 * var(--ap-u)) at 55.2% 68.0%, var(--ap-pattern) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(6 * var(--ap-u)) calc(1.3 * var(--ap-u)) at 55.2% 68.0%, var(--ap-pattern) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(1.1 * var(--ap-u)) calc(4.6 * var(--ap-u)) at 44.4% 22.4%, var(--ap-pattern-soft) 0 45%, transparent 72%),
        radial-gradient(ellipse calc(4.6 * var(--ap-u)) calc(1.1 * var(--ap-u)) at 44.4% 22.4%, var(--ap-pattern-soft) 0 45%, transparent 72%);
        background-size: calc(480 * var(--ap-u)) calc(480 * var(--ap-u));
}
.ap-screen--konfetti .ap-ground {
    background-image:
        radial-gradient(circle calc(3.4 * var(--ap-u)) at 29.9% 31.7%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(2.4 * var(--ap-u)) at 18.9% 54.8%, var(--ap-pattern-soft) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(1.8 * var(--ap-u)) at 7.0% 15.1%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(2.9 * var(--ap-u)) at 84.5% 62.7%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(3.4 * var(--ap-u)) at 57.8% 82.1%, var(--ap-pattern-soft) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(2.4 * var(--ap-u)) at 25.5% 5.9%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(1.8 * var(--ap-u)) at 18.5% 41.5%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(2.9 * var(--ap-u)) at 18.5% 74.3%, var(--ap-pattern-soft) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(3.4 * var(--ap-u)) at 91.4% 19.1%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(2.4 * var(--ap-u)) at 28.5% 93.9%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(1.8 * var(--ap-u)) at 69.2% 52.0%, var(--ap-pattern-soft) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(2.9 * var(--ap-u)) at 74.8% 25.8%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(3.4 * var(--ap-u)) at 47.6% 17.2%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(2.4 * var(--ap-u)) at 75.8% 34.0%, var(--ap-pattern-soft) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(1.8 * var(--ap-u)) at 59.9% 62.3%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(2.9 * var(--ap-u)) at 43.8% 10.0%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(3.4 * var(--ap-u)) at 62.3% 89.0%, var(--ap-pattern-soft) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(2.4 * var(--ap-u)) at 73.0% 73.6%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(1.8 * var(--ap-u)) at 5.2% 76.0%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(2.9 * var(--ap-u)) at 89.9% 32.4%, var(--ap-pattern-soft) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(3.4 * var(--ap-u)) at 53.3% 6.3%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(2.4 * var(--ap-u)) at 27.5% 45.6%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(1.8 * var(--ap-u)) at 36.3% 64.2%, var(--ap-pattern-soft) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(2.9 * var(--ap-u)) at 84.3% 79.7%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(3.4 * var(--ap-u)) at 18.0% 31.2%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(2.4 * var(--ap-u)) at 5.3% 44.4%, var(--ap-pattern-soft) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(1.8 * var(--ap-u)) at 17.6% 12.1%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(2.9 * var(--ap-u)) at 56.6% 27.1%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(3.4 * var(--ap-u)) at 39.9% 48.7%, var(--ap-pattern-soft) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(2.4 * var(--ap-u)) at 27.8% 16.6%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(1.8 * var(--ap-u)) at 44.7% 32.7%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(2.9 * var(--ap-u)) at 55.2% 35.0%, var(--ap-pattern-soft) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(3.4 * var(--ap-u)) at 90.5% 68.6%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%),
        radial-gradient(circle calc(2.4 * var(--ap-u)) at 47.3% 77.9%, var(--ap-pattern) calc(100% - 0.6px), transparent 100%);
        background-size: calc(480 * var(--ap-u)) calc(480 * var(--ap-u));
}
.ap-screen--konfetti .ap-ground { background-position: calc(-64 * var(--ap-u)) calc(-40 * var(--ap-u)); }

/* die Profilschriften (main.scss [data-font]) */
.ap-screen--plakat { --ap-pf: 'Righteous', var(--ap-display); --ap-pf-weight: 400; --ap-pf-adjust: 0.5; --ap-pf-spacing: 0; }
.ap-screen--gemuetlich { --ap-pf: 'Fraunces', Georgia, serif; --ap-pf-weight: 600; --ap-pf-adjust: 0.5; --ap-pf-spacing: 0; }
.ap-screen--handschrift { --ap-pf: 'Caveat', 'Comic Sans MS', cursive; --ap-pf-weight: 700; --ap-pf-adjust: 0.5; --ap-pf-spacing: 0; }
.ap-h1, .ap-h2 {
    font-family: var(--ap-pf);
    font-weight: var(--ap-pf-weight);
    font-size-adjust: var(--ap-pf-adjust);
    letter-spacing: var(--ap-pf-spacing);
}

/* ================= die Kopfkarte (profile.component.scss, am Telefon) ================= */
.ap-profile {
    --ap-band-h: 92px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: calc(var(--ap-band-h) + 18px) 22px 18px;
    background: var(--ap-card);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
}
.ap-band {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ap-band-h);
    border-radius: calc(var(--ap-radius) - 1px) calc(var(--ap-radius) - 1px) 0 0;
    overflow: hidden;
    --ap-band-card: var(--ap-card);
}
.ap-main { position: relative; display: flex; align-items: flex-end; gap: 18px; min-width: 0; }
.ap-portrait { flex: 0 0 auto; align-self: flex-start; margin-top: -50px; }
.ap-shot { position: relative; line-height: 0; }
.ap-av { display: block; flex: 0 0 auto; overflow: visible; }
.ap-av--xl { width: 84px; height: 84px; }
.ap-av--sm { width: 32px; height: 32px; }
.ap-shot .ap-av {
    filter: drop-shadow(0 2.5px 0 var(--ap-band-ring, var(--ap-card))) drop-shadow(0 -2.5px 0 var(--ap-band-ring, var(--ap-card)))
        drop-shadow(2.5px 0 0 var(--ap-band-ring, var(--ap-card))) drop-shadow(-2.5px 0 0 var(--ap-band-ring, var(--ap-card)));
}
.ap-star { position: absolute; top: -10px; left: -10px; width: 34px; height: 34px; display: block; line-height: 0; }
.ap-star svg { width: 100%; height: 100%; fill: var(--ap-honey); filter: drop-shadow(1px 1px 1.1px rgba(0, 0, 0, 0.8)); }
.ap-star-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 9.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

.ap-identity { flex: 1 1 200px; min-width: 0; align-self: flex-start; }
.ap-headline { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: start; column-gap: 12px; }
.ap-name { grid-column: 1; min-width: 0; }
.ap-h1 { display: block; font-size: 30px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ap-ink); }
.ap-meta { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; font-size: 14px; color: var(--ap-ink-2); }
.ap-special {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 4px; border-radius: 999px;
    background: var(--ap-honey-soft); border: 1px solid var(--ap-honey-line);
    font-size: 12.5px; font-weight: 700; line-height: 1.4; color: var(--ap-honey-deep); white-space: nowrap;
}
.ap-special svg { width: 18px; height: 18px; }
.ap-special-ribbon { fill: var(--ap-honey-deep); }
.ap-special-disc { fill: var(--ap-honey); }
.ap-special-stitch { fill: none; stroke: var(--ap-card); stroke-width: 1.4; stroke-dasharray: 2.4 2.4; }
.ap-special-star { fill: var(--ap-card); }
.ap-about { margin-top: 10px !important; font-size: 14.5px; line-height: 1.45; color: var(--ap-ink-2); }

/* die Abzeichen: neun Plaketten, 5 + 4, auf 62 % (badge.component.scss) */
.ap-badges { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(5, 28.5px); gap: 2px 3px; justify-items: center; }
.ap-badges > :nth-child(6) { grid-area: 2 / 2; }
.ap-badges > :nth-child(7) { grid-area: 2 / 3; }
.ap-badges > :nth-child(8) { grid-area: 2 / 4; }
.ap-badges > :nth-child(9) { grid-area: 2 / 5; }
.ap-badge { display: block; width: 28.5px; height: 28.5px; }
.ap-badge svg { width: 100%; height: 100%; overflow: visible; }
.ap-badge-body { fill: var(--ap-b-body); }
.ap-badge-shine { fill: var(--ap-b-shine); opacity: 0.85; }
.ap-badge-stitch { fill: none; stroke: #FFFFFF; stroke-width: 2.6; stroke-dasharray: 6 5; stroke-linecap: round; opacity: 0.9; }
.ap-badge-tail { fill: var(--ap-b-tail); }
.ap-badge-band { fill: var(--ap-b-band); }
.ap-badge-metal { fill: #FFFFFF; font-family: var(--ap-body); font-size: 16px; font-weight: 800; letter-spacing: 0.5px; }
.ap-badge-face path { fill: none; stroke: color-mix(in srgb, var(--ap-b-band) 70%, #000000); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.ap-badge--t1 { --ap-b-body: #E3AE7E; --ap-b-shine: #F0C9A4; --ap-b-band: #A9652F; --ap-b-tail: #8A4E20; }
.ap-badge--t2 { --ap-b-body: #D7DDE3; --ap-b-shine: #EEF1F4; --ap-b-band: #8593A1; --ap-b-tail: #677482; }
.ap-badge--t3 { --ap-b-body: #F7D361; --ap-b-shine: #FCE7A0; --ap-b-band: #CF9512; --ap-b-tail: #A97907; }
.ap-badge--t4 { --ap-b-body: #3C3A45; --ap-b-shine: #5A5766; --ap-b-band: #CF9512; --ap-b-tail: #A97907; }
.ap-badge--t4 .ap-badge-metal { fill: #3B2A05; }
.ap-badge--t4 .ap-badge-face path { stroke: #F7D361; }

/* die rechte Spalte, am Telefon unter dem Rest */
.ap-side { position: relative; display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--ap-line); }
.ap-corner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -4px; }
.ap-friendship { display: inline-flex; align-items: center; gap: 6px; margin-left: -6px; padding: 4px 6px; font-size: 14px; font-weight: 600; color: var(--ap-teal); }
.ap-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ap-more { display: inline-grid; place-items: center; width: 32px; height: 32px; color: var(--ap-ink-3); font-size: 18px; line-height: 1; }
.ap-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ap-btn {
    display: block; min-width: 0; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--ap-line-2);
    background: var(--ap-card); color: var(--ap-ink); font-size: 13.5px; font-weight: 600; line-height: 1.4;
    text-align: center; white-space: nowrap;
}
.ap-btn--gift { background: var(--ap-honey); border-color: var(--ap-honey); color: #FFFFFF; }
.ap-btn--go { background: var(--ap-teal); border-color: var(--ap-teal); color: var(--ap-on-cool); }

/* ================= die Titelbänder (title-band.component.scss) ================= */
.ap-tb { position: absolute; top: 0; left: 0; width: calc(100% / 0.82); height: calc(100% / 0.82); transform: scale(0.82); transform-origin: 0 0; overflow: hidden; }
.ap-tb-layer { position: absolute; left: 0; width: 100%; overflow: visible; }
.ap-tb-full { top: 0; height: 100%; }

/* Blüte - frei, Stufe 10 */
.ap-tb--bluete { --ap-tint: #F2749F; background: color-mix(in srgb, var(--ap-tint) 17%, var(--ap-band-card)); }
.ap-tb-tone { fill: color-mix(in srgb, var(--ap-tint) 44%, var(--ap-band-card)); }
.ap-tb-tone--soft { fill: color-mix(in srgb, var(--ap-tint) 30%, var(--ap-band-card)); }
.ap-tb-disc { fill: color-mix(in srgb, var(--ap-tint) 27%, var(--ap-band-card)); }
.ap-tb-heart { fill: color-mix(in srgb, var(--ap-honey) 80%, var(--ap-band-card)); }

/* Stadt bei Nacht - Laden */
.ap-tb--stadt { background: linear-gradient(180deg, #0B1114 0 40%, #0F181B 40% 72%, #121E21 72% 100%); }
.ap-tb-star { fill: #FFF4D6; fill-opacity: 0.8; }
.ap-tb-twinkle { animation: e6-ap-twinkle 3.6s ease-in-out infinite alternate; }
.ap-tb-moon { position: absolute; right: 9%; top: 9px; width: 40px; height: 40px; overflow: visible; filter: drop-shadow(0 0 12px rgba(242, 178, 58, 0.5)); }
.ap-tb-lid { transform-origin: 62px 44px; animation: e6-ap-wink 7s ease-in-out infinite; }
.ap-tb-city { bottom: 0; }
.ap-tb-city--far .ap-tb-house { fill: #1C2D34; }
.ap-tb-city--far .ap-tb-pane { fill: #253A41; }
.ap-tb-city--near .ap-tb-house { fill: #101A1E; }
.ap-tb-city--near .ap-tb-pane { fill: #1B282D; }
.ap-tb-city .ap-tb-pane--lit { fill: #F2B23A; }
.ap-tb-city--near .ap-tb-pane--lit { fill: #FFD06B; }
.ap-tb-city .ap-tb-pane--cool { fill: #7FD8C0; }
.ap-tb-beacon { fill: #E45B5B; }
.ap-tb-lit { animation: e6-ap-lights steps(1, end) infinite; }
.ap-tb-lit--0 { animation-duration: 13s; }
.ap-tb-lit--1 { animation-duration: 9s; animation-delay: -4s; }
.ap-tb-lit--2 { animation-duration: 17s; animation-delay: -11s; }
.ap-tb-blink { animation: e6-ap-blink 2.2s steps(1, end) infinite; }

/* Meer - Laden */
.ap-tb--meer { background: linear-gradient(180deg, #BFE4F4 0 30%, #D2EDF8 30% 100%); }
.ap-tb-sun { fill: #F5C64E; }
.ap-tb-sun-ring { fill: #FBE3A1; }
.ap-tb-cloud { fill: #FFFFFF; }
.ap-tb-wave { bottom: 0; }
.ap-tb-wave--far { height: 52%; }
.ap-tb-wave--mid { height: 38%; }
.ap-tb-wave--near { height: 24%; }
.ap-tb-wave--far path:not(.ap-tb-foam) { fill: #8ACBE7; }
.ap-tb-wave--mid path:not(.ap-tb-foam) { fill: #55A8D6; }
.ap-tb-wave--near path:not(.ap-tb-foam) { fill: #2F84BA; }
.ap-tb-foam { fill: none; stroke: #FFFFFF; stroke-opacity: 0.8; stroke-width: 2; stroke-linecap: round; }
.ap-tb-drift { animation: e6-ap-drift linear infinite; }
.ap-tb-drift--far { --ap-tile: 160; animation-duration: 48s; }
.ap-tb-drift--mid { --ap-tile: 120; animation-duration: 30s; }
.ap-tb-drift--near { --ap-tile: 96; animation-duration: 19s; }
.ap-tb-boat { position: absolute; left: 63%; bottom: calc(38% - 9px); width: 42px; height: 37px; overflow: visible; transform-origin: 50% 85%; animation: e6-ap-bob 4.6s ease-in-out infinite alternate; }
.ap-tb-boat path { stroke: #4B4853; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ap-tb-mast { fill: none; stroke-width: 2; }
.ap-tb-sail { fill: #FFF3E2; }
.ap-tb-sail--small { fill: #F5C64E; }
.ap-tb-hull { fill: #E45B5B; }

/* ================= das Profildesign Silber (main.scss + profile.component.scss) ================= */
.ap-profile[data-design] {
    --ap-rivet: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1.2px, rgba(0, 0, 0, 0.35) 1.8px 3.2px, transparent 3.6px);
    --ap-metal: linear-gradient(135deg, #6F7780 0%, #C7CED6 28%, #F7F9FB 46%, #A9B2BC 62%, #5E666F 100%);
    --ap-metal-edge: #7D8790;
    --ap-metal-glow: #3E454D;
    --ap-ink: #12171C;
    --ap-ink-2: #26303A;
    --ap-ink-3: #3A4652;
    --ap-line: rgba(0, 0, 0, 0.18);
    --ap-teal: #26303A;
    --ap-card: rgba(255, 255, 255, 0.5);
    --ap-band-ring: #FFFFFF;
    border: 1px solid var(--ap-metal-edge);
    background:
        var(--ap-rivet) 9px 9px / 8px 8px no-repeat,
        var(--ap-rivet) calc(100% - 9px) 9px / 8px 8px no-repeat,
        var(--ap-rivet) 9px calc(100% - 9px) / 8px 8px no-repeat,
        var(--ap-rivet) calc(100% - 9px) calc(100% - 9px) / 8px 8px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0.1) 100%),
        linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)),
        var(--ap-metal);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 0 rgba(0, 0, 0, 0.18), inset 0 0 0 3px rgba(255, 255, 255, 0.12),
        0 14px 30px -18px var(--ap-metal-glow), 0 2px 6px rgba(0, 0, 0, 0.12);
    color: var(--ap-ink);
}
.ap-profile[data-design] .ap-h1 { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 -1px 0 rgba(0, 0, 0, 0.28); letter-spacing: 0.01em; }
.ap-profile[data-design] .ap-band {
    --ap-band-card: #FFFFFF;
    top: 4px; left: 4px; right: 4px;
    border-radius: calc(var(--ap-radius) - 5px) calc(var(--ap-radius) - 5px) 4px 4px;
    box-shadow: 0 0 0 1px var(--ap-metal-edge);
}
.ap-profile[data-design] .ap-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ap-rivet) 5px 5px / 8px 8px no-repeat, var(--ap-rivet) calc(100% - 5px) 5px / 8px 8px no-repeat;
    pointer-events: none;
}
.ap-profile[data-design] .ap-btn--gift { color: #FFFFFF; }
.ap-metal-shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 1; }
.ap-metal-shine::before {
    content: '';
    position: absolute;
    inset: -40%;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.45) 50%, transparent 58%);
    transform: translateX(-70%);
    animation: e6-ap-sweep 7s ease-in-out infinite;
}
.ap-metal-seal {
    position: absolute;
    top: -15px;
    left: 50%;
    margin-left: -17px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12.5px;
    font-weight: 800;
    color: #12171C;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.7), transparent 45%), var(--ap-metal);
    box-shadow: 0 0 0 2px var(--ap-metal-edge), 0 0 0 4px rgba(255, 255, 255, 0.85), 0 3px 8px rgba(0, 0, 0, 0.3);
}
/* die Seite mit Design: oben Platz fuer das Siegel */
.ap-screen--silber { padding-top: 26px; }

/* die Karten im Design: helles Metall mit Glanzkante und wanderndem Licht */
.ap-screen--silber .ap-card {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 30%), var(--ap-design-card);
    border-color: var(--ap-design-edge);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 18px -12px rgba(0, 0, 0, 0.35);
}
.ap-screen--silber .ap-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    padding: 3px;
    background: conic-gradient(from var(--ap-glint), transparent 0deg 210deg, rgba(255, 255, 255, 0) 215deg,
        rgba(255, 255, 255, 0.35) 270deg, rgba(255, 255, 255, 0.8) 305deg, #FFFFFF 322deg, rgba(255, 255, 255, 0) 336deg, transparent 360deg);
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    animation: e6-ap-glint 6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.ap-screen--silber .ap-cell:nth-child(2) .ap-card::before { animation-delay: -1.8s; }
.ap-screen--silber .ap-grid > :nth-child(3) .ap-card::before { animation-delay: -3.5s; }

/* ================= der Rahmen Naht (main.scss @include framed('naht')) ================= */
.ap-screen--naht .ap-card, .ap-screen--naht .ap-profile { position: relative; }
.ap-screen--naht .ap-card::after, .ap-screen--naht .ap-profile::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px dashed var(--ap-rim);
    border-radius: calc(var(--ap-radius) - 5px);
    pointer-events: none;
}

/* ================= das Raster: zehn Bahnen, je Zeile klein + groß ================= */
.ap-grid {
    margin-top: var(--ap-stack);
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-auto-rows: 292px;
    gap: var(--ap-stack);
}
.ap-screen--silber .ap-grid { grid-auto-rows: 262px 262px; }
.ap-cell { position: relative; min-width: 0; display: flex; flex-direction: column; }
.ap-cell--4 { grid-column: span 4; }
.ap-cell--6 { grid-column: span 6; }
.ap-cell--10 { grid-column: span 10; }
.ap-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ap-card);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-radius);
    padding: 18px 18px 16px;
}
.ap-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ap-h2 { display: block; min-width: 0; font-size: 17px; line-height: 1.25; color: var(--ap-ink); }
.ap-cardicon {
    display: inline-block; width: 24px; height: 24px; margin-right: 6px; vertical-align: middle; position: relative; top: -0.1em;
    overflow: visible; fill: none; stroke: var(--ap-icon); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.ap-cardicon-dot { stroke-width: 2.9; }
.ap-screen .ap-cardicon { display: inline-block; }
.ap-cardicon[data-name='gaestebuch'] { --ap-icon: #F0965C; }
.ap-cardicon[data-name='freunde'] { --ap-icon: #2FBF97; }
.ap-cardicon[data-name='vitrine'] { --ap-icon: #EDAA2C; }
.ap-cardicon[data-name='spiele'] { --ap-icon: #9C7DF0; }
.ap-cardicon[data-name='mitbewohner'] { --ap-icon: #D987D6; }
.ap-tally { flex: 0 1 auto; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ap-ink-3); text-align: right; }

/* Gästebuch: die Pinnwand */
.ap-board-notes { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 9px; margin: 0 -8px; padding: 8px 8px 3px; overflow: hidden; }
.ap-note {
    --ap-tint: var(--ap-honey);
    --ap-tilt: -0.7deg;
    position: relative;
    flex: 0 0 auto;
    width: 96%;
    display: flex;
    gap: 11px;
    padding: 10px 14px 9px;
    border-radius: 6px 6px 12px 6px;
    background: color-mix(in srgb, var(--ap-tint) 11%, color-mix(in srgb, var(--ap-card) 88%, transparent));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--ap-tint) 22%, transparent), 0 4px 10px -6px color-mix(in srgb, var(--ap-ink) 30%, transparent);
    transform: rotate(var(--ap-tilt));
}
.ap-note::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ap-tint) 85%, var(--ap-ink));
    box-shadow: inset -2px -2px 0 color-mix(in srgb, var(--ap-ink) 25%, transparent), inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.55), 0 2px 3px color-mix(in srgb, var(--ap-ink) 30%, transparent);
}
.ap-note:nth-child(odd) { align-self: flex-start; }
.ap-note:nth-child(even) { align-self: flex-end; }
.ap-note:nth-child(3n + 2) { --ap-tint: var(--ap-teal); --ap-tilt: 0.5deg; }
.ap-note:nth-child(3n + 3) { --ap-tint: #A98BE0; --ap-tilt: -0.4deg; }
.ap-note-pic { flex: 0 0 auto; align-self: center; display: flex; }
.ap-note-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.ap-note-top { display: flex; align-items: baseline; gap: 10px; line-height: 1.3; white-space: nowrap; }
.ap-note-who { font-size: 14.5px; font-weight: 600; color: var(--ap-ink); }
.ap-note-when { font-size: 12px; color: var(--ap-ink-3); }
.ap-note-text { display: block; margin-top: 1px; font-size: 14px; line-height: 1.32; color: var(--ap-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-all { display: block; margin-top: 10px; padding: 7px 14px; border: 1px solid var(--ap-line); border-radius: 999px; color: var(--ap-ink-2); font-size: 13.5px; font-weight: 600; text-align: center; }

/* Gemeinsame Freunde */
.ap-friend-list { display: flex; flex-direction: column; gap: 4px; margin: 0 -6px; }
.ap-friend { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 12px; }
.ap-friend-name { min-width: 0; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Spielhalle (fremde Seite): die Spiele, die er hat */
.ap-their-games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.ap-their-game { display: flex; min-width: 0; }
.ap-their-pick { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 6px 2px 7px; border: 1px solid transparent; border-radius: 14px; }
.ap-their-pick--on { border-color: color-mix(in srgb, var(--ap-tone) 55%, var(--ap-line)); background: color-mix(in srgb, var(--ap-tone) 12%, var(--ap-card)); }
.ap-their-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid color-mix(in srgb, var(--ap-tone) 35%, var(--ap-line)); border-radius: 12px; background: color-mix(in srgb, var(--ap-tone) 14%, var(--ap-card)); }
.ap-their-icon .ap-gift { width: 26px; height: 26px; }
.ap-their-name { max-width: 100%; font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--ap-ink-2); }
.ap-gift { overflow: visible; filter: drop-shadow(1px 1px 1.1px rgba(0, 0, 0, .8)); }

/* Vitrine */
.ap-tallies { margin-left: auto; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.ap-tally { display: inline-flex; align-items: baseline; gap: 3px; }
.ap-tallies .ap-tally { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; color: var(--ap-ink-2); background: var(--ap-honey-soft); }
.ap-tallies .ap-tally b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ap-tallies .ap-tally--premium { color: #FFFFFF; background: var(--ap-premium); }
.ap-tallies .ap-tally--selten { color: #FFFFFF; background: var(--ap-honey); }
.ap-vitrine { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 2px; }
.ap-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ap-slot { --ap-tone: var(--ap-ink); position: relative; height: 84px; min-width: 0; border-radius: 16px; background: color-mix(in srgb, var(--ap-honey) 7%, var(--ap-card)); }
.ap-slot[data-mark] { background: color-mix(in srgb, var(--ap-tone) 9%, var(--ap-card)); box-shadow: inset 0 0 0 1.5px var(--ap-tone); }
.ap-slot[data-mark="selten"] { --ap-tone: var(--ap-honey); }
.ap-slot[data-mark="premium"] { --ap-tone: var(--ap-premium); }
.ap-slot-gift { position: absolute; inset: 0; display: grid; place-items: center; }
.ap-slot-thing { position: relative; z-index: 1; display: grid; place-items: center; transform: translateY(-4px); }
.ap-slot-thing .ap-gift { width: 40px; height: 40px; }
.ap-slot-floor { position: absolute; left: 50%; top: calc(50% + 19px); width: 32px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ap-ink) 28%, transparent); filter: blur(3px); transform: translateX(-50%); }
.ap-slot-count { position: absolute; right: 6px; bottom: 6px; z-index: 2; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 800; line-height: 16px; color: var(--ap-ink-2); background: var(--ap-card); box-shadow: 0 1px 2px color-mix(in srgb, var(--ap-ink) 20%, transparent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-slot-count .ap-times { font-size: 9.5px; opacity: .7; }

.ap-vitrine { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 4px 2px 2px; }
.ap-vitrine .ap-slot { height: 76px; }
.ap-showcase .ap-card-head { flex-wrap: wrap; row-gap: 6px; }
.ap-showcase--small .ap-tallies { margin-left: 0; justify-content: flex-start; }
.ap-showcase--small .ap-vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-showcase--small .ap-slot { height: 66px; }
.ap-slot-thing .ap-gift { width: 38px; height: 38px; }

/* ================= Mitbewohner (roommate.component, Besuch) ================= */
/* ===== the room frame ===== */
.ap-rm-room { position: relative; height: 220px; border-radius: 18px; overflow: hidden; background: #FFF3E2; }
.ap-roommate .ap-rm-room { height: 180px; border-radius: 16px; }
.ap-rm-room-bar { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; display: flex; align-items: center; gap: 8px; }
.ap-rm-sky { position: relative; margin-left: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 1px 4px rgba(30, 33, 72, 0.18); }
.ap-rm-sky__btn { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--ap-ink-3); }
.ap-rm-sky__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-rm-sky__btn--day.ap-rm-on { background: #F5C64E; color: #FFFFFF; }

/* ===== the room itself (roommate-room) ===== */
.ap-rm-scene { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: #FFF3E2; z-index: 0; }
.ap-rm-wall, .ap-rm-floor, .ap-rm-layer { position: absolute; }
.ap-rm-wall { inset: 0; background: #FFF3E2; }
.ap-rm-floor { left: 0; right: 0; bottom: 0; background: #F3DDBF; border-top: 2px solid rgba(239, 192, 141, 0.6); }
.ap-rm-layer { inset: 0; width: 100%; height: 100%; display: block; }
.ap-rm-wall[data-wall="mb_tapete_salbei"] { background: #D5E6D3; }

/* the stage of the figure, set in percent of the room height */
.ap-rm-stage { position: absolute; left: 50%; aspect-ratio: 210 / 190; }
.ap-rm-figure { position: relative; width: 100%; height: 100%; transform-origin: 50% 100%; transform: scale(var(--ap-age, 1)); }
.ap-rm-figure > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ap-rm-fur { fill: var(--fur); }
.ap-rm-second { fill: var(--second); }
.ap-rm-accent { fill: var(--accent); }
.ap-rm-fur-line { stroke: var(--fur); }
.ap-rm-second-line { stroke: var(--second); opacity: 0.7; }
.ap-rm-head, .ap-rm-body, .ap-rm-ear-l, .ap-rm-ear-r, .ap-rm-pupils { transform-box: fill-box; }
.ap-rm-head { transform-origin: 50% 90%; }
.ap-rm-ear-l { transform-origin: 70% 10%; }
.ap-rm-ear-r { transform-origin: 30% 10%; }
.ap-rm-axolotl .ap-rm-ear-l { transform-origin: 100% 50%; }
.ap-rm-axolotl .ap-rm-ear-r { transform-origin: 0% 50%; }
/* life phases */
.ap-rm-phase-baby { --am-age: 0.62; }
.ap-rm-phase-jung { --am-age: 0.8; }
.ap-rm-phase-baby .ap-rm-head { scale: 1.16; }
.ap-rm-phase-baby .ap-rm-body { scale: 0.94; }
.ap-rm-phase-baby .ap-rm-pupils { scale: 1.25; }
.ap-rm-phase-jung .ap-rm-head { scale: 1.06; }
.ap-rm-phase-jung .ap-rm-pupils { scale: 1.1; }
/* bored: the ears sink a little */
.ap-rm-bored .ap-rm-ear-l { transform: rotate(8deg); }
.ap-rm-bored .ap-rm-ear-r { transform: rotate(-8deg); }

/* the speech bubble over his head */
.ap-rm-bubble { position: absolute; left: 62%; bottom: 84%; z-index: 1; padding: 5px 10px; border: 2px solid #4B4853; border-radius: 14px; background: #FFFFFF; font-size: 12.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; color: var(--ap-ink-2); }
.ap-rm-bubble::after { content: ""; position: absolute; left: 12px; bottom: -8px; width: 11px; height: 11px; border-right: 2px solid #4B4853; border-bottom: 2px solid #4B4853; background: #FFFFFF; transform: rotate(45deg); }

/* the name tag at his feet */
.ap-rm-name-tag { position: absolute; left: -4%; bottom: 1%; z-index: 1; display: inline-flex; align-items: center; max-width: 62%; padding: 1px 8px; border: 2px solid #4B4853; border-radius: 7px; background: #F3DDB5; color: #4B4853; font-family: var(--ap-display); font-size: 11.5px; font-weight: 700; line-height: 1.35; white-space: nowrap; transform: rotate(-4deg); }
.ap-roommate .ap-rm-name-tag { font-size: 10.5px; padding: 0 6px; }

/* the photo corner: a line under the window sill, photos of the phases behind him */
.ap-rm-corner { position: absolute; left: 50%; aspect-ratio: 112 / 46; }
.ap-rm-corner__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ap-rm-photo { position: absolute; width: 23.2%; transform: rotate(var(--ap-tilt, 0deg)); transform-origin: 50% 0; }
.ap-rm-photo__card { display: block; padding: 7% 7% 20%; background: #FFFDF8; border: 1.5px solid #4B4853; border-radius: 3px; }
.ap-rm-photo__picture { display: block; width: 100%; aspect-ratio: 1 / 1; border: 1px solid #4B4853; overflow: hidden; }
.ap-rm-photo__peg { position: absolute; z-index: 1; top: -6%; left: 43%; width: 14%; height: 18%; border: 1px solid #4B4853; border-radius: 1.5px; background: #E3A24F; }

.ap-rm-home { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.ap-roommate .ap-rm-room { height: 100%; border-radius: 16px; }
.ap-rm-side { display: flex; flex-direction: column; min-width: 0; }
.ap-rm-who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ap-rm-who-name { font-family: var(--ap-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.ap-rm-who-kind { font-size: 13px; color: var(--ap-ink-3); }
.ap-rm-mood { margin-top: 4px !important; font-size: 13.5px; color: var(--ap-ink-2); }
.ap-rm-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.ap-rm-foot .ap-btn { padding: 8px 10px; font-size: 14px; }
.ap-rm-note { font-size: 11.5px; line-height: 1.35; color: var(--ap-ink-3); text-align: center; }

/* ================= Bewegung ================= */
@keyframes e6-ap-twinkle { from { opacity: 1; } to { opacity: 0.35; } }
@keyframes e6-ap-wink { 0%, 86%, 100% { transform: scaleY(1); } 90%, 94% { transform: scaleY(0.15); } }
@keyframes e6-ap-lights { 0% { opacity: 1; } 78% { opacity: 0; } 90% { opacity: 1; } }
@keyframes e6-ap-blink { 0% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes e6-ap-drift { to { transform: translateX(calc(-1px * var(--ap-tile))); } }
@keyframes e6-ap-bob { from { transform: translateY(1px) rotate(-3deg); } to { transform: translateY(-2px) rotate(3deg); } }
@keyframes e6-ap-sweep { 0%, 60% { transform: translateX(-70%); } 100% { transform: translateX(70%); } }
@keyframes e6-ap-glint { to { --ap-glint: 360deg; } }

@media (prefers-reduced-motion: reduce) {
    .ap-item { transition: none !important; }
    .ap-tb, .ap-tb *, .ap-metal-shine::before { animation: none !important; }
    .ap-screen--silber .ap-card::before { animation: none; --ap-glint: 200deg; }
}
.ap-guestbook .ap-h2 { flex: 0 0 auto; white-space: nowrap; }
.seite-intro { max-width: 760px; }
.seite-fan { margin-top: 56px; }
/* ===== /Profilseiten ===== */

/* ===== Räume (r9, 16.10.2026): Bento mit lebendigem Raum, Kacheln je einer Sache, Raumkarten als Wischreihe ===== */
/*
 * Jede Kachel ist flach getoent (keine Verlaeufe, kein Grau), jede zeigt genau eine Sache aus der App.
 * Die Leisten (Raumquiz, Frage eines Stammgasts) sind aus room-quiz/room-question nachgebaut,
 * die Nachtliste aus den Farben des Profils „Nacht“. Was sich bewegt, steuert start.js.
 */
.s-rooms { padding-bottom: 110px; }
.r9-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.r9-intro h2 { margin-bottom: 0; max-width: 9.5em; }
.r9-intro .lead { margin: 0 0 6px; }

.r9-bento {
  --r9-gap: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "live quiz quiz"
    "live ask  ask"
    "live fx   night"
    "quote quote reg";
  gap: var(--r9-gap);
  margin-top: 56px;
}
.r9-tile {
  --t: #FFFFFF; --tl: var(--line); --tk: var(--ink);
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 26px 26px 24px; border-radius: 28px;
  background: var(--t); border: 1px solid var(--tl); color: var(--tk);
  overflow: hidden; isolation: isolate;
}
.r9-h { font-size: 25px; line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 8px; }
.r9-p { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 30em; }
.r9-live  { grid-area: live; --t: #E6EEF4; --tl: #CFDDE8; padding: 20px; }
.r9-quiz  { grid-area: quiz; --t: #FFFFFF; --tl: #E6E6E2; }
.r9-ask   { grid-area: ask;  --t: #EFEAFB; --tl: #DDD4F4; }
.r9-fx    { grid-area: fx;   --t: #FDECF1; --tl: #F6D3DE; }
.r9-night { grid-area: night; --t: #121A1C; --tl: #2A3639; --tk: #EEF3F2; }
.r9-quote { grid-area: quote; --t: #E7F5EF; --tl: #C9E8DC; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; }
.r9-reg   { grid-area: reg;  --t: #FDF1D8; --tl: #F3DFB1; }
.r9-quiz .r9-bar, .r9-ask .r9-bar { margin-top: auto; }

/* --- der lebendige Raum --- */
.r9-live-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 14px; }
.r9-onair { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; color: #2C4F69; }
.r9-onair i { width: 9px; height: 9px; border-radius: 50%; background: #0E9B72; animation: r9-pulse 2.4s ease-in-out infinite; }
.r9-here { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #0B795A; }
.r9-crowd { display: inline-flex; }
.r9-crowd i { display: grid; place-items: center; width: 24px; height: 24px; margin-left: -7px; border-radius: 50%; background: #D6E3EC; color: #4E7C9E; box-shadow: 0 0 0 2px #E6EEF4; overflow: hidden; }
.r9-crowd i:first-child { margin-left: 0; }
.r9-crowd i:nth-child(2) { background: #CDEBDF; color: #0B795A; }
.r9-crowd i:nth-child(3) { background: #F8E3B8; color: #A8761A; }
.r9-crowd svg, .r9-mini-line i svg { width: 16px; height: 16px; margin-top: 4px; fill: currentColor; }
@keyframes r9-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(14,155,114,.45); } 60% { box-shadow: 0 0 0 6px rgba(14,155,114,0); } }

.r9-room { width: auto; flex: 1 1 auto; display: flex; flex-direction: column; box-shadow: 0 2px 0 rgba(23,41,45,.05), 0 24px 48px -18px rgba(44,79,105,.35); border-radius: 14px; }
.r9-room .ag-stream { flex: 1 1 auto; display: flex; flex-direction: column; }
/* das Gespraech hat eine feste Hoehe: neue Zeilen kommen unten dazu, alte wandern oben hinaus */
.r9-room .ag-log { flex: 1 1 0; min-height: 360px; justify-content: flex-end; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px); mask-image: linear-gradient(to bottom, transparent 0, #000 36px); }
.r9-room .ag-log > * { flex: none; }
.r9-new { animation: r9-in .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes r9-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.r9-room .ag-msg.r9-new { animation-name: r9-in, r9-glow; animation-duration: .5s, 2.4s; }
@keyframes r9-glow { 0% { background: #E7F5EF; } 100% { background: rgba(231,245,239,0); } }
/* die Denkblase: wer gerade tippt */
.r9-think .ag-msg-who { color: var(--ag-ink-3); font-weight: 600; }
.r9-dots { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 9px 12px; border-radius: 4px 14px 14px 14px; background: #EEF2F4; }
.r9-dots i { width: 6px; height: 6px; border-radius: 50%; background: #8A9A9E; animation: r9-dot 1.2s ease-in-out infinite; }
.r9-dots i:nth-child(2) { animation-delay: .15s; } .r9-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes r9-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.r9-pop { animation: r9-pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes r9-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: none; } }

/* --- die Leisten: Raumquiz und Frage eines Stammgasts (wie room-quiz / room-question) --- */
.r9-bar {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 38px 10px 8px; border: 1px solid #F3DFB1; border-radius: 14px; background: #FDF1D8;
  color: var(--ink); font-size: 14px; overflow: hidden;
}
.r9-bar[data-status="geloest"] { border-color: #BFE3D3; background: #E7F5EF; }
.r9-bar-badge { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #FFFFFF; }
.r9-bar-badge svg { width: 20px; height: 20px; }
.r9-bar--ask .r9-bar-badge svg { width: 18px; height: 18px; fill: #E8A31E; }
.r9-bar[data-status="offen"] .r9-bar-badge { animation: r9-nudge 2.4s ease-in-out infinite; }
@keyframes r9-nudge { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-12deg); } 86% { transform: rotate(10deg); } 94% { transform: rotate(-4deg); } }
.r9-bar-label { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8A5F12; }
.r9-bar[data-status="geloest"] .r9-bar-label { color: #0B795A; }
.r9-bar-what { flex: 1 1 220px; min-width: 0; margin: 0; font-weight: 600; line-height: 1.35; }
.r9-bar[data-status="geloest"] .r9-bar-what { font-weight: 500; color: var(--ink-2); }
.r9-bar-what b { color: var(--ink); font-weight: 700; }
.r9-bar-left { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: #6C7A7D; white-space: nowrap; font-variant-numeric: tabular-nums; }
.r9-bar-left b { color: #8A5F12; }
.r9-bar-go { flex: none; padding: 4px 12px; border: 1px solid #F3DFB1; border-radius: 999px; background: #FFFFFF; color: #8A5F12; font-size: 12px; font-weight: 700; }
.r9-bar-honour { flex: none; padding: 0 8px; border-radius: 999px; background: #FFFFFF; color: #8A5F12; font-size: 11px; font-weight: 700; line-height: 19px; white-space: nowrap; }
.r9-bar-won { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 1px 8px; border-radius: 999px; background: #FFFFFF; color: #8A5F12; font-size: 12.5px; font-weight: 700; }
.r9-bar-won[hidden], .r9-bar [hidden] { display: none; }
.r9-bar-x { position: absolute; top: 12px; right: 9px; display: grid; place-items: center; width: 22px; height: 22px; color: #8A9A9E; }
.r9-bar-x svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.r9-bar-clock { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(232,163,30,.18); }
.r9-bar-clock span { display: block; height: 100%; background: #E8A31E; transition: width 1s linear; }
.r9-bar[data-status="geloest"] .r9-bar-clock { display: none; }
.r9-coin { flex: none; width: 15px; height: 15px; }

/* --- der Effekt: ein kleiner Raum, das Konfetti fliegt ueber den ganzen --- */
.r9-mini { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; min-height: 170px; padding: 14px 14px 12px; border-radius: 18px; background: #FFFFFF; border: 1px solid #F6D3DE; overflow: hidden; }
.r9-mini-head + .r9-mini-line { margin-top: 12px; }
.r9-mini-line { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r9-mini-line b { color: var(--ink); font-weight: 700; }
.r9-mini-line i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; color: var(--c); background: color-mix(in srgb, var(--c) 18%, #FFFFFF); }
.r9-mini-line i svg { width: 15px; height: 15px; margin-top: 3px; }
.r9-mini-say { margin-top: 4px; }
.r9-mini-head { display: flex; align-items: center; gap: 8px; margin: 0 0 auto; padding-bottom: 12px; font-size: 14px; }
.r9-mini-head .ar-room-svg { width: 26px; height: 26px; flex: none; }
.r9-mini-head b { font-family: var(--display); letter-spacing: -0.01em; }
.r9-mini-head .r9-nlive { color: #0B795A; }
.r9-mini-head .r9-nlive i { background: #0E9B72; box-shadow: none; }
.r9-fx .ar-icon-rim { fill: none; stroke: rgba(255,255,255,.14); stroke-width: .4; }
.r9-fx .ar-icon-t { fill: rgba(255,255,255,.3); stroke: none; }
.r9-fx .ar-icon-s { fill: #FFFFFF; stroke: none; }
.r9-mini-say .ag-effect { margin: 0 auto !important; }
.r9-mini-say .ag-effect[hidden] { display: none; }
.r9-fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.r9-fx-layer i { position: absolute; top: -14px; left: var(--x); width: 7px; height: 11px; border-radius: 2px; background: var(--c); opacity: 0; }
.r9-fx-layer i.r9-round { width: 8px; height: 8px; border-radius: 50%; }
.r9-fx-layer[data-on="konfetti"] i { animation: r9-fall 3.4s cubic-bezier(.35,.15,.6,1) var(--d) both; }
@keyframes r9-fall {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  8% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), 300px) rotate(var(--r)); }
}
.r9-fx-layer b { position: absolute; bottom: -24px; left: var(--x); width: var(--s); height: var(--s); color: var(--c); opacity: 0; }
.r9-fx-layer b svg { width: 100%; height: 100%; fill: currentColor; }
.r9-fx-layer[data-on="herzen"] b { animation: r9-rise 2.8s ease-out var(--d) both; }
@keyframes r9-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  15% { opacity: 1; }
  30% { transform: translate(calc(var(--dx) * .4), -60px) scale(1.05); }
  45% { transform: translate(calc(var(--dx) * .6), -95px) scale(.92); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -210px) scale(1); }
}

/* --- abends dunkel: die Raumliste in den Farben des Profils „Nacht“ --- */
.r9-night .r9-p { color: #AEBCBA; }
.r9-nlist { margin-top: auto; padding: 12px; border-radius: 18px; background: #1A2427; border: 1px solid #2A3639; }
.r9-nhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 10px; }
.r9-nhead b { font-family: var(--display); font-size: 16px; letter-spacing: -0.02em; }
.r9-sun { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border: 1px solid #3A474A; border-radius: 999px; color: #F2B23A; font-size: 12px; font-weight: 700; white-space: nowrap; }
.r9-sun svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.r9-sun svg circle { fill: currentColor; }
.r9-sun svg { animation: r9-spin 16s linear infinite; }
@keyframes r9-spin { to { transform: rotate(360deg); } }
.r9-nlist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.r9-nlist li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; background: #202C30; font-size: 14px; }
.r9-nlist li .ar-room-svg { flex: none; width: 28px; height: 28px; }
.r9-nname { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r9-nwhen { font-size: 11.5px; color: #AEBCBA; white-space: nowrap; }
.r9-nlive { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #2FC395; font-size: 12px; font-weight: 700; white-space: nowrap; }
.r9-nlive i { width: 7px; height: 7px; border-radius: 50%; background: #2FC395; box-shadow: 0 0 8px rgba(47,195,149,.7); }
.r9-night .ar-icon-rim { fill: none; stroke: rgba(255,255,255,.14); stroke-width: .4; }
.r9-night .ar-icon-t { fill: rgba(255,255,255,.3); stroke: none; }
.r9-night .ar-icon-s { fill: #FFFFFF; stroke: none; }

/* --- der Satz --- */
.r9-quote-text { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.02; letter-spacing: -0.035em; flex: 0 1 auto; }
.r9-quote-text span { color: var(--teal-dark); }
.r9-quote-join .ag-join { margin: 0 !important; background: #FFFFFF; box-shadow: 0 8px 20px -10px rgba(23,41,45,.25); }

/* --- Stammgast werden --- */
.r9-stat { margin-top: auto; padding: 16px; border-radius: 18px; background: #FFFFFF; border: 1px solid #F3DFB1; }
.r9-stat-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.r9-stat-label { font-size: 13.5px; font-weight: 700; }
.r9-stat-count { font-size: 12.5px; color: #6C7A7D; white-space: nowrap; }
.r9-stat-count b { font-family: var(--display); font-size: 22px; color: #8A5F12; letter-spacing: -0.02em; }
.r9-stat-bar { height: 8px; margin: 8px 0 10px; border-radius: 999px; background: #F6EBD3; overflow: hidden; }
.r9-stat-bar span { display: block; height: 100%; width: 62.5%; border-radius: 999px; background: #E8A31E; }
.js .r9-reg .r9-stat-bar span { width: 0; transition: width 1.4s cubic-bezier(.2,.8,.2,1) .35s; }
.js .r9-reg.in .r9-stat-bar span { width: 62.5%; }
.r9-stat-hint { margin: 0; font-size: 12.5px; line-height: 1.45; color: #6C7A7D; }
.r9-stat-coins { display: inline-flex; align-items: center; gap: 2px; color: #8A5F12; vertical-align: -2px; }

/* --- die Raumkarten: eine Reihe zum Wischen, am Desktop ein Laufband --- */
.r9-strip { margin-top: 64px; }
.r9-strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.r9-strip-title { font-size: 25px; letter-spacing: -0.03em; }
.r9-strip-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #8A5F12; }
.r9-strip-hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.r9-band {
  --r9-pad: max(28px, calc((100% - 1184px) / 2));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--r9-pad);
  padding: 6px 0 22px; scrollbar-width: none;
}
.r9-band::-webkit-scrollbar { display: none; }
.r9-track.ar-grid { display: flex; gap: 0; width: max-content; padding-inline: var(--r9-pad); }
.r9-track .ar-room { flex: 0 0 304px; margin-right: 16px; scroll-snap-align: start; }
.r9-track .ar-room:last-child { margin-right: 0; }
.r9-track .ar-room:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(23,41,45,.10); }
/* Laufband (start.js setzt .r9-run und haengt die Karten ein zweites Mal an) */
.r9-band.r9-run { overflow: hidden; scroll-snap-type: none; }
.r9-run .r9-track { padding-inline: 0; animation: r9-band 64s linear infinite; }
.r9-run .r9-track .ar-room:last-child { margin-right: 16px; }
.r9-run:hover .r9-track, .r9-off .r9-run .r9-track { animation-play-state: paused; }
@keyframes r9-band { to { transform: translateX(-50%); } }
.r9-strip:has(.r9-run) .r9-strip-hint { display: none; }

@media (max-width: 1099px) {
  .r9-bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "live live" "quiz quiz" "ask ask" "fx night" "quote reg"; }
  .r9-room .ag-log { min-height: 330px; }
}
@media (max-width: 900px) {
  .r9-intro { grid-template-columns: minmax(0, 1fr); }
  .s-rooms { padding-bottom: 100px; }
}
@media (max-width: 700px) {
  .r9-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "live" "quiz" "ask" "fx" "night" "reg" "quote"; gap: 14px; margin-top: 40px; }
  .r9-tile { padding: 22px 18px 18px; border-radius: 24px; }
  .r9-live { padding: 14px 10px 10px; }
  .r9-live-top { padding: 2px 6px 12px; }
  .r9-h { font-size: 23px; }
  .r9-room .ag-roomhead { padding: 14px 16px 12px; }
  .r9-room .ag-room-name { font-size: 24px; }
  .r9-room .ag-roomicon { width: 38px; height: 38px; }
  .r9-room .ag-log { padding: 14px 16px 6px; min-height: 340px; }
  .r9-room .ag-composer { padding: 12px 14px 14px; gap: 8px; }
  .r9-room .ag-btn-send { padding: 0 14px; }
  .r9-bar-what { flex-basis: 100%; order: 3; }
  .r9-bar-left, .r9-bar-honour { order: 4; }
  .r9-bar-go, .r9-bar-won { order: 5; margin-left: auto; }
  .r9-quote-text { font-size: 28px; }
  .r9-strip { margin-top: 48px; }
  .r9-strip-title { font-size: 22px; }
  .r9-band { --r9-pad: 16px; }
  .r9-track .ar-room { flex-basis: min(300px, 80vw); margin-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .r9-onair i, .r9-bar-badge, .r9-sun svg, .r9-dots i, .r9-new, .r9-pop, .r9-fx-layer i, .r9-fx-layer b { animation: none !important; }
  .r9-run .r9-track { animation: none; }
  .js .r9-reg .r9-stat-bar span { transition: none; width: 62.5%; }
  .r9-bar-clock span { transition: none; }
}
/* ===== /Räume ===== */