/* MEET · meet-bty.com · nach CI-Entwurf v0.5
   Nachtviolett trägt, Lime macht jung. Space Grotesk für Logo & Headlines,
   Geist für Fliesstext, Geist Mono für Labels.
   Version 2: drei Screens (Heute, Schreiben, Danke), ein Screen, eine Aufgabe. */

@font-face{font-family:"Space Grotesk";src:url("assets/fonts/SpaceGrotesk.ttf") format("truetype");font-weight:300 700;font-display:swap}
@font-face{font-family:"Geist";src:url("assets/fonts/Geist.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("assets/fonts/GeistMono.ttf") format("truetype");font-weight:100 900;font-display:swap}

:root{
  --night:#2F1041;
  --night2:#3D1B55;
  --night3:#4A2466;
  --lime:#D4F65A;
  --paper:#F7F4EF;
  --lilac:#EEDEF7;
  --violet:#602184;
  --sun:#FF8A3D;
  --sunl:#FFC49B;
  --pink:#FF5FA8;
  --muted:#B9A6CC;      /* Labels auf Dunkel */
  --soft:#CDBEDD;       /* Fliesstext gedämpft auf Dunkel */
  --field:rgba(61,27,85,.72);
  --head:"Space Grotesk",system-ui,sans-serif;
  --body:"Geist",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.3,.9,.25,1);
  --topbar:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;background:var(--night)}
body{
  font-family:var(--body);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  min-height:100dvh;
}
a{color:var(--lime);text-decoration:none}
a:hover,a:focus-visible{color:#fff}
img,svg{display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* hidden muss gewinnen – sonst überstimmt display:flex das Attribut */
[hidden]{display:none !important}

/* ---- Bühne: ruhiges Nachtviolett, der körnige Verlauf nur oben ---- */
.page{
  min-height:100vh;
  min-height:100dvh;
  background:var(--night);
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  isolation:isolate;
}
.page::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:min(72vh,640px);
  background:url("assets/verlauf-9x16.png") center top / cover no-repeat;
  -webkit-mask-image:linear-gradient(#000 25%,transparent);
  mask-image:linear-gradient(#000 25%,transparent);
  z-index:-1;
  pointer-events:none;
}
@media (min-aspect-ratio: 1/1){
  .page::before{background-image:url("assets/verlauf-16x9.png")}
}

/* ---- Kopf: MEET_ links, YOUTH b+ rechts – bleibt oben kleben ---- */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  width:100%;
  display:flex;
  justify-content:center;
  background:rgba(47,16,65,0);
  transition:background .5s ease,box-shadow .5s ease;
}
.topbar.is-compact{
  background:rgba(47,16,65,.82);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.topbar-in{
  width:100%;
  max-width:430px;
  padding:22px 22px 12px;
  padding-left:max(22px,env(safe-area-inset-left));
  padding-right:max(22px,env(safe-area-inset-right));
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
/* Kompakt ändert NUR Hintergrund und Logo-Morph – nie die Höhe: ein klebender Kopf, der beim Scrollen schrumpft,
   verschiebt den ganzen Inhalt und ruckelt (iOS). Höhe bleibt immer --topbar. */
.logo{display:block;color:inherit}
.logo-stack{display:block;height:38px}

/* ---- Ein Logo, zwei Zustände: Signet M_ (klein) und Wortmarke MEET_ (gross).
   Die Buchstaben E, E, T wandern aus dem M heraus, der Balken schiebt nach rechts,
   der Kreis löst sich auf. Gleicher Übergang im Intro, beim Scrollen und beim Screen-Wechsel. ---- */
.morph{height:38px;width:auto;overflow:visible;display:block}
.morph *{transform-box:view-box}
.m-root{transform-origin:402px 559px;transition:transform 1.05s var(--ease)}
.m-circle{fill:#2F1041;stroke:rgba(255,255,255,.3);stroke-width:56;opacity:0;transform:scale(1.18);transform-origin:860px 596px;
  transition:opacity .75s ease-in-out,transform 1.05s var(--ease)}
.m-E1,.m-E2,.m-T{opacity:1;filter:blur(0px);
  transition:transform 1.05s var(--ease),opacity .8s ease-in-out,filter .8s ease-in-out}
.m-E1{transition-delay:.06s}.m-E2{transition-delay:.18s}.m-T{transition-delay:.30s}
.m-bar{transition:transform 1.05s var(--ease) .08s}
.is-signet .m-root{transform:scale(.373)}
.is-signet .m-circle{opacity:1;transform:scale(1)}
.is-signet .m-E1{transform:translateX(-800px);opacity:0;filter:blur(14px);transition-delay:.24s}
.is-signet .m-E2{transform:translateX(-1306px);opacity:0;filter:blur(14px);transition-delay:.12s}
.is-signet .m-T{transform:translateX(-1813px);opacity:0;filter:blur(14px);transition-delay:0s}
.is-signet .m-bar{transform:translate(-1569px,-4px);transition-delay:0s}
.cursor{animation:meetCursor 1.8s ease-in-out infinite}
.logo-stack.is-solid .cursor{animation:none;opacity:1}
@keyframes meetCursor{0%,35%{opacity:1}50%,85%{opacity:0}100%{opacity:1}}
.sender-link{display:block;padding:6px;margin:-2px -6px 0 0;border-radius:8px}

.sender{height:16px;width:auto;opacity:.9;transition:opacity .2s}
.sender-link:hover .sender,.sender-link:focus-visible .sender{opacity:1}

/* ---- Intro: Signet M_ erscheint mittig, wird beim Rauszoomen zur Wortmarke MEET_ ---- */
.splash{display:none;position:fixed;inset:0;z-index:20;pointer-events:none}
html.intro .splash{display:block}
.splash-logo{position:fixed;left:50%;top:42%;height:112px;transform:translate(-56px,-50%);will-change:transform}
html.intro .page{opacity:0}
html.ready .page{opacity:1;animation:zoomOut 1.1s var(--ease) backwards}
@keyframes zoomOut{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
html.intro .logo{opacity:0}
html.ready .screen--home>*{animation:rise .6s var(--spring) both}
html.ready .screen--home>*:nth-child(1){animation-delay:.18s}
html.ready .screen--home>*:nth-child(2){animation-delay:.26s}
html.ready .screen--home>*:nth-child(3){animation-delay:.34s}
html.ready .screen--home>*:nth-child(5){animation-delay:.44s}
html.ready .screen--home>*:nth-child(6){animation-delay:.5s}
html.ready .screen--home>*:nth-child(7){animation-delay:.56s}
html.ready .screen--home>*:nth-child(8){animation-delay:.62s}
@keyframes rise{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* ---- Screens: einer sichtbar, Wechsel schiebt seitlich ---- */
.screens{width:100%;max-width:430px;display:flex;flex-direction:column;flex:1}
.screen{
  width:100%;
  min-height:calc(100vh - var(--topbar));
  min-height:calc(100dvh - var(--topbar));
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:6px 22px 24px;
  padding-left:max(22px,env(safe-area-inset-left));
  padding-right:max(22px,env(safe-area-inset-right));
  padding-bottom:max(24px,env(safe-area-inset-bottom));
}
.screen.enter-fwd{animation:slideFwd .42s var(--ease) both}
.screen.enter-back{animation:slideBack .42s var(--ease) both}
@keyframes slideFwd{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes slideBack{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.grow{flex:1 1 0}

/* ---- Typo-Bausteine ---- */
.label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
h1{
  font-family:var(--head);
  font-weight:700;
  font-size:clamp(28px,8.6vw,34px);
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:pretty;
}
h2{
  font-family:var(--head);
  font-weight:700;
  font-size:26px;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:pretty;
}
.lead{font-size:16px;line-height:1.45;color:var(--soft);margin:0;text-wrap:pretty}
.hint{font-size:14px;line-height:1.45;color:var(--soft);margin:0;text-wrap:pretty}

/* ---- 1 · Heute ---- */
.day{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px 18px 20px;
  border-radius:18px;
  background:var(--field);
  margin-top:4px;
}
.passage{font-family:var(--head);font-weight:700;font-size:clamp(26px,7.6vw,30px);letter-spacing:-.02em;line-height:1.05}
.stack{display:flex;flex-direction:column;gap:4px}
.soon{text-align:center;font-size:12px;color:var(--muted);margin:0}
.foot{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:6px;font-size:11px;color:var(--muted)}
.foot nav{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.foot a{color:var(--muted);text-decoration:underline;text-decoration-color:rgba(185,166,204,.4);text-underline-offset:.2em}
.foot a:hover{color:#fff}
.foot .foot-links{font-family:var(--head);font-weight:700;font-size:12px;color:var(--lime);text-decoration:none;margin-bottom:2px}
.foot .foot-links:hover{color:#fff}
.claim{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:-.01em;color:#fff;opacity:.85}

/* ---- MEET DAILY: die zwei Videos von heute Morgen nebeneinander – Titel oben, darunter ein Standbild aus dem Video
   im selben Kasten wie der Tagesblock (18px Rundung, Feldfarbe); der Play-Knopf ist durchsichtig, das Gesicht bleibt sichtbar ---- */
.daily{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.daily-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.clip{
  display:flex;flex-direction:column;
  min-height:0;
  padding:0;
  border-radius:18px;
  background:transparent;
  border:0;
  color:#fff;
  text-align:center;
  font:inherit;
  cursor:pointer;
  transition:transform .2s;
  -webkit-tap-highlight-color:transparent;
}
.clip:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.clip:active{transform:scale(.985)}
.clip-head{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:38px;padding:0 4px}
.clip-who{display:block}
.clip-name{font-family:var(--head);font-weight:700;font-size:16px;letter-spacing:-.01em;line-height:1.15;color:#fff;text-align:center}
.clip-media{position:relative;display:block;margin:8px 0 0;aspect-ratio:9/11;flex:1;border-radius:18px;background:var(--field);isolation:isolate}
/* Kasten wie der Tagesblock, der das Standbild mit einem schmalen Rand in Feldfarbe umrahmt */
.clip-img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);border-radius:13px;object-fit:cover;object-position:center 30%;pointer-events:none;background:#000}
.clip-dur{
  position:absolute;right:14px;bottom:13px;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  padding:3px 8px;border-radius:999px;
  background:rgba(47,16,65,.7);color:#fff;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.clip-play{
  position:absolute;left:50%;top:50%;
  width:52px;height:52px;margin:-26px 0 0 -26px;
  border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.16);
  border:1.4px solid rgba(255,255,255,.65);
  color:#fff;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  box-shadow:0 6px 20px rgba(0,0,0,.3);
  transition:transform .25s var(--spring),background .2s;
}
.clip-play svg{width:20px;height:20px;margin-left:3px}
.clip:hover .clip-play{transform:scale(1.08);background:rgba(255,255,255,.28)}
.clip--soon{cursor:default}
.clip--soon .clip-media{border:1.2px dashed rgba(255,255,255,.14);background:transparent}
.clip--soon .clip-name{color:var(--soft)}
.clip--soon .clip-time{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);margin-top:3px}
.clip--soon .clip-media{aspect-ratio:auto;flex:1;min-height:60px}

/* Wochenende: oben „Am Montag geht's weiter“, als Überschrift der Claim, dann nur der Blick zurück auf die Woche.
   Teilen, Frage, Wand-Zugang und der Claim im Fuss bleiben weg – es gibt keinen Text, den man liest. */
.day--weekend .passage{font-size:clamp(24px,7vw,28px)}
.screen--weekend .lead,.screen--weekend .stack,.screen--weekend .claim{display:none}
.row.row--week{
  min-height:88px;
  padding:16px 18px 16px 14px;
  background:var(--lime);
  border-color:var(--lime);
  color:var(--night);
  box-shadow:0 10px 30px rgba(212,246,90,.18);
}
.row.row--week:hover,.row.row--week:focus-visible{background:var(--lime);border-color:#fff;color:var(--night)}
.row.row--week .row-icon{background:rgba(47,16,65,.12);color:var(--night)}
.row.row--week .row-name{font-size:18px;line-height:1.15;color:var(--night)}
.row.row--week .row-handle{white-space:normal;color:rgba(47,16,65,.7)}
.row.row--week .row-arrow{color:var(--night);width:24px;height:24px}

/* Player: Video gross in der Mitte, Rest abgedunkelt */
.player{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center}
.player[hidden]{display:none}
.player-back{position:absolute;inset:0;background:rgba(22,7,32,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:popFade .25s ease both}
.player-box{
  position:relative;
  display:flex;flex-direction:column;gap:8px;
  width:min(100vw,calc((100dvh - 120px) * 9 / 16 + 24px));
  max-width:560px;
  padding:max(8px,env(safe-area-inset-top)) 12px max(8px,env(safe-area-inset-bottom));
  animation:rise .35s var(--spring) both;
}
.player-head{display:flex;align-items:center;gap:10px;min-height:44px}
.player-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.player-text strong{font-family:var(--head);font-size:16px;letter-spacing:-.01em;line-height:1.15;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player video{width:100%;aspect-ratio:9/16;max-height:calc(100dvh - 120px);border-radius:18px;background:#000;display:block}
.player-box.has-react video{max-height:calc(100dvh - 196px)}
/* Reaktionen im Player (nur MEETmoment): die sechs Emojis der WhatsApp-Schnellauswahl, die eigene leuchtet Lime */
.react{display:flex;gap:5px;padding:2px 0 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.react::-webkit-scrollbar{display:none}
/* mittig, solange Platz ist – bei mehr Emojis scrollbar bis an beide Enden (margin:auto statt justify-content) */
.react-btn{flex:none}
.react-btn:first-child{margin-left:auto}
.react-btn:last-child{margin-right:auto}
.react-btn--more .e{font-size:22px;font-weight:700;color:var(--lime)}
/* Auswahl beliebiger Emojis (Plus-Knopf): Raster häufiger Emojis plus Feld für die Emoji-Tastatur */
.react-pick{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);animation:rise .25s var(--spring) both}
.react-pick[hidden]{display:none}
.react-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.react-grid button{min-height:40px;border:0;border-radius:10px;background:transparent;font:inherit;font-size:22px;line-height:1;cursor:pointer;color:#fff;-webkit-tap-highlight-color:transparent}
.react-grid button:hover,.react-grid button:focus-visible{background:rgba(255,255,255,.1)}
.react-grid button:active{transform:scale(.9)}
.react-own{display:flex;align-items:center;gap:8px}
.react-own input{flex:1;min-width:0;min-height:44px;padding:0 14px;border-radius:12px;border:1.2px solid rgba(255,255,255,.18);background:rgba(47,16,65,.6);color:#fff;font:inherit;font-size:18px}
.react-own input::placeholder{color:var(--muted);font-size:14px}
.react-own input:focus{outline:none;border-color:var(--lime)}
.player-box.has-pick video{max-height:calc(100dvh - 470px)}
.react-btn{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:42px;min-height:50px;padding:5px 5px;border-radius:14px;
  background:rgba(255,255,255,.07);border:1.2px solid transparent;color:#fff;
  font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .2s var(--spring),background .2s,border-color .2s;
}
.react-btn .e{font-size:22px;line-height:1}
.react-btn .c{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;line-height:1;min-height:11px;color:var(--muted)}
.react-btn.is-on{background:rgba(212,246,90,.14);border-color:var(--lime)}
.react-btn.is-on .c{color:var(--lime)}
.react-btn:active{transform:scale(.92)}
.react-btn.pop .e{animation:reactPop .4s var(--spring)}
@keyframes reactPop{0%{transform:scale(1)}50%{transform:scale(1.55)}100%{transform:scale(1)}}
/* Kachel: die Reaktionen von heute als Blase rechts oben, die wie bei WhatsApp leicht über den Bildrand ragt */
.clip-react{
  position:absolute;top:-9px;right:-8px;z-index:2;
  display:inline-flex;align-items:center;gap:3px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;font-weight:600;
  padding:4px 9px 4px 7px;border-radius:999px;
  background:var(--night);color:#fff;
  border:1.4px solid rgba(255,255,255,.22);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.clip-react .e{font-size:14px;line-height:1}
.clip-react{cursor:pointer;max-width:calc(100% + 16px)}
.clip-react:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.cr-sum{display:inline-flex;align-items:center;gap:3px}
.cr-all{display:none}
/* aufgeklappt: alle Emojis mit Zahl, umbrechend, rechts verankert; kleines Aufploppen */
.clip-react.is-open{padding:6px 10px;background:var(--night2);border-color:rgba(212,246,90,.55);animation:bubbleOpen .32s var(--spring) both}
.clip-react.is-open .cr-sum{display:none}
.clip-react.is-open .cr-all{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px 9px}
.cr-item{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.cr-item .e{font-size:16px}
.cr-item b{font-weight:600}
@keyframes bubbleOpen{0%{transform:scale(.8);opacity:.6}60%{transform:scale(1.07);opacity:1}100%{transform:scale(1)}}
/* „Sag mir Bescheid“ (Push) – nach dem Einschalten kurz bestätigt, dann weg */
.row--push.is-done{border-color:var(--lime)}
.row--push:disabled{cursor:default;transform:none}

/* ---- Buttons ---- */
.btn{
  border:0;
  cursor:pointer;
  font-family:var(--head);
  font-weight:700;
  letter-spacing:-.01em;
  transition:opacity .2s,transform .2s,background .2s,color .2s;
}
.btn:active{transform:scale(.985)}
.btn--primary{min-height:50px;padding:0 22px;border-radius:25px;font-size:16px;background:var(--lime);color:var(--night)}
.btn--primary:disabled{opacity:.45;cursor:not-allowed}
.btn--primary.is-busy{opacity:.7;cursor:progress}
.btn--full{width:100%;min-height:56px;border-radius:28px;font-size:17px}
.btn--ghost{min-height:46px;padding:0 20px;border:1.2px solid var(--lime);border-radius:23px;background:transparent;color:var(--lime);font-size:15px}
.btn--ghost:hover{color:var(--night);background:var(--lime)}
.btn--ghost.btn--full{min-height:54px;border-radius:27px;font-size:16px}
.btn--text{background:transparent;color:var(--lime);min-height:48px;padding:0 12px;font-weight:500;font-size:15px;border-radius:12px}
.btn--text:hover{color:#fff}
.btn--left{align-self:flex-start;padding:0;min-height:40px}
.btn--sm{min-height:40px;padding:0 18px;border-radius:20px;font-size:15px;align-self:flex-start;margin-top:4px}

/* ---- 2 · Schreiben ---- */
.back{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:0;
  padding:8px 10px 8px 4px;
  margin-left:-4px;
  border-radius:8px;
  color:var(--muted);
  font-size:15px;
  cursor:pointer;
}
.back::before{content:"";width:9px;height:9px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-left:4px}
.back:hover{color:#fff}
.write{display:flex;flex-direction:column;gap:16px;flex:1;min-height:0}
.write-head{display:flex;flex-direction:column;gap:6px}
textarea,input[type="text"]{
  width:100%;
  border:1.2px solid transparent;
  background:var(--field);
  color:#fff;
  font-family:var(--body);
  transition:border-color .2s,background .2s;
}
textarea{flex:1;min-height:38vh;min-height:38dvh;resize:none;border-radius:16px;font-size:18px;line-height:1.5;padding:16px}
input[type="text"]{min-height:50px;border-radius:14px;font-size:16px;padding:0 16px}
textarea::placeholder,input::placeholder{color:var(--muted);opacity:1}
textarea:focus,input:focus{outline:none;border-color:var(--lime)}
.name-row{display:flex;flex-direction:column}
.error{margin:0;font-size:14px;line-height:1.45;color:var(--sunl)}

/* ---- 3 · Danke ---- */
.screen--done{align-items:flex-start}
.signet{width:72px;height:72px}
.screen--done .stack{width:100%}
.screen--done .btn--full{width:100%}

/* ---- Haken: „Mein Moment darf anonym auf der MEET WALL erscheinen“ ---- */
.check{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 14px 14px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1.2px solid rgba(255,255,255,.1);
  cursor:pointer;
  transition:border-color .2s,background .2s;
  -webkit-tap-highlight-color:transparent;
}
.check:hover{border-color:rgba(212,246,90,.45)}
.check input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.check-box{
  flex:none;
  width:24px;height:24px;
  margin-top:1px;
  border-radius:8px;
  border:1.6px solid var(--muted);
  display:grid;place-items:center;
  color:var(--night);
  transition:background .2s,border-color .2s,transform .2s var(--spring);
}
.check-box svg{opacity:0;transform:scale(.6);transition:opacity .15s,transform .25s var(--spring)}
.check input:checked ~ .check-box{background:var(--lime);border-color:var(--lime)}
.check input:checked ~ .check-box svg{opacity:1;transform:scale(1)}
.check input:focus-visible ~ .check-box{outline:2px solid var(--lime);outline-offset:3px}
.check:has(input:checked){border-color:rgba(212,246,90,.55);background:rgba(212,246,90,.06)}
.check-text{display:block;font-size:14.5px;line-height:1.4;color:#fff}
.check-text b{font-family:var(--head);font-weight:700;color:var(--lime);letter-spacing:-.01em;white-space:nowrap}
.check-text small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}

/* ---- Heute-Screen: Zugang zur Wand, sobald das Gerät einmal geteilt hat ---- */
.row--wall{width:100%;text-align:left;cursor:pointer;font:inherit;min-height:64px;margin-top:2px}
.row--wall .row-icon{color:var(--lime)}
.row--wall .row-handle{white-space:normal}
.row-badge{
  flex:none;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  padding:5px 9px;
  border-radius:999px;
  background:var(--lime);
  color:var(--night);
  font-weight:600;
}

/* ---- Danke-Screen: Push-Benachrichtigung für die Antwort auf eine Frage ---- */
.push{display:flex;flex-direction:column;gap:8px;width:100%;margin-bottom:6px}
.push-hint{text-align:center;font-size:13px;color:var(--muted)}
.push .btn.is-on{border-color:var(--lime);color:var(--lime)}

/* ---- Heute-Screen: „Deine Frage“ – gestellte Fragen dieses Geräts samt Antwort ---- */
.asks{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.ask{
  position:relative;
  display:flex;flex-direction:column;gap:8px;
  padding:14px 16px 13px;
  border-radius:16px;
  background:var(--field);
  border:1.2px solid rgba(255,255,255,.08);
  animation:rise .5s var(--spring) both;
}
.ask--answered{border-color:rgba(212,246,90,.55);background:rgba(212,246,90,.06)}
.ask-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ask-head .label{margin:0}
.ask-state{
  flex:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;font-weight:600;
  padding:5px 9px;border-radius:999px;
  background:rgba(255,255,255,.1);color:var(--soft);
}
.ask--answered .ask-state{background:var(--lime);color:var(--night)}
.ask-text{margin:0;font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;text-wrap:pretty;color:#fff}
.ask-answer{
  margin:2px 0 0;padding:10px 12px;
  border-left:3px solid var(--lime);border-radius:0 10px 10px 0;
  background:rgba(255,255,255,.06);
  font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;text-wrap:pretty;color:#fff;
}
.ask-answer b{display:block;font-family:var(--head);font-weight:700;font-size:12.5px;letter-spacing:.02em;color:var(--lime);margin-bottom:3px}
.ask--mine .ask-state{background:rgba(212,246,90,.14);color:var(--lime)}
.ask-hint{margin:0;font-size:12.5px;line-height:1.4;color:var(--muted)}
.ask-when{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
/* Link unter „Ich habe eine Frage zum Text“: öffnet das Pop-up mit den früheren Fragen */
.ask-past{
  align-self:center;
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;border:0;cursor:pointer;
  font:inherit;font-size:13px;color:var(--muted);white-space:nowrap;
  min-height:40px;padding:0 12px;margin-top:-4px;
  text-decoration:underline;text-decoration-color:rgba(185,166,204,.45);text-underline-offset:.2em;
}
.ask-past:hover{color:#fff}
.ask-past-badge{
  flex:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;font-weight:600;
  padding:4px 8px;border-radius:999px;background:var(--lime);color:var(--night);
}

/* ---- Pop-up: schiebt sich von unten über die Seite ---- */
.pop{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.pop[hidden]{display:none}
.pop-back{position:absolute;inset:0;background:rgba(22,7,32,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:popFade .25s ease both}
.pop-sheet{
  position:relative;
  width:100%;max-width:430px;
  max-height:min(82vh,82dvh);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:14px;
  padding:18px 20px 22px;
  padding-left:max(20px,env(safe-area-inset-left));
  padding-right:max(20px,env(safe-area-inset-right));
  padding-bottom:max(22px,env(safe-area-inset-bottom));
  background:var(--night2);
  border:1px solid rgba(212,246,90,.28);border-bottom:0;
  border-radius:24px 24px 0 0;
  box-shadow:0 -18px 50px rgba(0,0,0,.35);
  animation:popUp .38s var(--ease) both;
}
.pop-head{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;margin:-18px -20px 0;padding:18px 20px 10px;background:var(--night2)}
.pop-head .label{margin:0}
.pop-close{
  flex:none;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(212,246,90,.35);background:transparent;color:var(--lime);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
}
.pop-close svg{width:16px;height:16px}
.pop-close:hover{background:var(--lime);color:var(--night)}
.pop-note{margin:0;text-align:center;font-size:12px;color:var(--muted)}
body.pop-open{overflow:hidden}
@keyframes popUp{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
@keyframes popFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pop-back,.pop-sheet{animation:none}}

/* ---- 4 · MEET WALL: Pinnwand – kurze Momente nebeneinander, lange über die ganze Breite ---- */
.screen--wall{gap:16px}
.wall-head{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.wall-title{display:inline-flex;align-items:flex-end;gap:.06em;font-size:clamp(34px,10vw,42px)}
.wall-bar{display:inline-block;width:.62em;height:.17em;margin-bottom:.02em;background:var(--lime);animation:meetCursor 1.8s ease-in-out infinite}
.wall{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  /* kein „dense“: sonst rutscht eine halbe Karte in die Lücke eines FRÜHEREN Tages hinauf */
  gap:14px 12px;
  padding:6px 2px 10px;
}
.wall-group{grid-column:1 / -1;padding:10px 4px 0}
.wall-group:first-child{padding-top:0}
.moment{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:22px 14px 12px;
  border-radius:16px;
  background:var(--field);
  border:1.2px solid transparent;
  animation:rise .5s var(--spring) both;
}
.moment--wide{grid-column:1 / -1;padding:24px 16px 12px}
/* der Pin oben, leicht schief wie an einer Korkwand */
.moment::before{
  content:"";
  position:absolute;
  top:-5px;left:50%;
  width:12px;height:12px;
  margin-left:-6px;
  border-radius:50%;
  background:var(--sun);
  box-shadow:0 2px 4px rgba(0,0,0,.45),inset 0 -2px 2px rgba(0,0,0,.25);
}
.wall > .moment:nth-child(5n+1){transform:rotate(-1.1deg)}
.wall > .moment:nth-child(5n+2){transform:rotate(.9deg)}
.wall > .moment:nth-child(5n+3){transform:rotate(-.5deg)}
.wall > .moment:nth-child(5n+4){transform:rotate(1.2deg)}
.wall > .moment:nth-child(5n+5){transform:rotate(-.8deg)}
.wall > .moment:nth-child(4n+2){background:var(--night3)}
.wall > .moment:nth-child(7n+4){background:rgba(96,33,132,.55)}
.wall > .moment:nth-child(3n+2)::before{background:var(--lime)}
.wall > .moment:nth-child(4n+3)::before{background:var(--pink)}
.moment--own{border-color:var(--lime)}
.moment--own::before{background:var(--lime)}
.moment-text{margin:0;flex:1;font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;text-wrap:pretty}
.moment--wide .moment-text{font-size:16.5px;line-height:1.5}
.moment-meta{margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
.moment--own .moment-meta{color:var(--lime)}
.moment--no{border-color:var(--sunl)}
.moment--no::before{background:var(--sun)}
.moment--no .moment-meta{color:var(--sunl)}
.moment-reason{margin:8px 0 0;padding-top:8px;border-top:1px solid rgba(255,196,155,.25);font-size:13.5px;line-height:1.45;color:var(--soft)}
.wall-loading{grid-column:1 / -1;text-align:center;padding:24px 0;color:var(--muted)}
.wall-note{text-align:center;padding:8px 0}
.wall-past{
  align-self:center;
  background:transparent;
  border:0;
  padding:10px 12px;
  border-radius:10px;
  font-size:13px;
  color:var(--muted);
  text-decoration:underline;
  text-decoration-color:rgba(185,166,204,.4);
  text-underline-offset:.25em;
  cursor:pointer;
}
.wall-past:hover{color:#fff}
.screen--wall .btn--text{align-self:center}

/* ---- Hinweis: MEET auf den Home-Bildschirm (nur Handy, siehe homescreen.js) ---- */
.a2hs{
  position:fixed;
  left:12px;
  right:12px;
  bottom:max(12px,env(safe-area-inset-bottom));
  z-index:20;
  max-width:406px;
  margin:0 auto;
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 48px 16px 16px;
  background:var(--night3);
  border:1px solid rgba(212,246,90,.35);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
  animation:rise .45s var(--spring) both;
}
.a2hs-icon{width:52px;height:52px;border-radius:12px;flex:none}
.a2hs-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.a2hs h2{font-size:17px;line-height:1.2;letter-spacing:-.01em}
.a2hs .hint b{color:#fff;font-weight:600}
.a2hs-share{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.18em;margin-right:.15em;color:#fff}
.a2hs-close{
  position:absolute;
  top:4px;
  right:4px;
  width:44px;
  height:44px;
  border:0;
  border-radius:22px;
  background:transparent;
  color:var(--soft);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.a2hs-close:hover{color:#fff;background:rgba(255,255,255,.08)}

/* ---- Links-Seite (/links): WhatsApp-Kanal MEET DAILY im Fokus, dann Social Media ---- */
.links{gap:20px}
.links-head{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.links-head .lead{max-width:34ch}
.channel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:20px 18px 18px;
  border-radius:22px;
  background:var(--field);
  border:1px solid rgba(255,255,255,.06);
}
/* Sonnenaufgang – die Projektfarbe von MEET DAILY, sparsam als Schimmer in der Ecke */
.channel--daily::before{
  content:"";
  position:absolute;
  right:-30%;
  top:-45%;
  width:85%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,138,61,.38),rgba(255,138,61,0));
  z-index:-1;
  pointer-events:none;
}
.channel-logo{height:22px;width:auto;align-self:flex-start}
/* MEET App: Hauptverlauf Nachtviolett → Violett als Schimmer, App-Icon wie auf dem Home-Bildschirm */
.channel--app::before{
  content:"";
  position:absolute;
  right:-30%;
  top:-45%;
  width:85%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(96,33,132,.75),rgba(96,33,132,0));
  z-index:-1;
  pointer-events:none;
}
.channel-app{display:flex;align-items:center;gap:14px}
.channel-icon{width:56px;height:56px;border-radius:14px;flex:none;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.btn--app{gap:10px}
.btn--app svg{width:20px;height:20px;flex:none}
.channel-head{display:flex;flex-direction:column;gap:6px}
.channel h2{font-size:24px}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.15}
.btn--wa{gap:10px}
.btn--wa svg{width:22px;height:22px;flex:none}
a.btn--primary:hover,a.btn--primary:focus-visible{color:var(--night)}
.btn[aria-disabled="true"]{opacity:.45;cursor:default;pointer-events:none}
.trust{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:12.5px;line-height:1.4;color:var(--muted)}
.trust svg{width:14px;height:14px;flex:none;margin-top:2px}
.section{display:flex;flex-direction:column;gap:10px}
.section>.label{padding-left:4px}
.rows{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.row{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:68px;
  padding:12px 16px 12px 12px;
  border-radius:18px;
  background:var(--field);
  border:1.2px solid transparent;
  color:#fff;
  transition:border-color .2s,background .2s,transform .2s;
}
.row:hover,.row:focus-visible{border-color:var(--lime);background:var(--night3);color:#fff}
.row:active{transform:scale(.985)}
.row-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff;flex:none}
.row-icon svg{width:22px;height:22px}
.row-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.row-name{font-family:var(--head);font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1.1}
.row-handle{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-arrow{width:20px;height:20px;color:var(--lime);flex:none;transition:transform .2s}
.row:hover .row-arrow{transform:translate(2px,-2px)}
.links .foot{padding-top:10px}
html.links-in .links>*{animation:rise .55s var(--spring) both}
html.links-in .links>*:nth-child(1){animation-delay:.05s}
html.links-in .links>*:nth-child(2){animation-delay:.14s}
html.links-in .links>*:nth-child(3){animation-delay:.24s}
html.links-in .links>*:nth-child(5){animation-delay:.32s}
html.links-in .links>*:nth-child(6){animation-delay:.38s}

/* ---- Grössere Screens: Bühne bleibt schmal, Rand atmet ---- */
@media (min-width:700px){
  :root{--topbar:90px}
  .topbar-in{padding-top:40px}
  .screen{padding-top:12px;padding-bottom:56px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ---- Mein MEET-Moment: heute gross und hell, die letzten Tage klein, Fragen mit Antworten dazwischen ---- */
.mine-today,.mine-past{display:flex;flex-direction:column;gap:10px}
.mine-today .ask--mine{border-color:rgba(212,246,90,.5);background:rgba(212,246,90,.07)}
.mine-today .ask-text{font-size:17px;line-height:1.45}
.asks--small .ask{padding:11px 14px 10px;gap:6px;animation:none}
.asks--small .ask-text{font-size:14px;line-height:1.4}
.asks--small .ask-answer{font-size:13.5px}
.mine-day{margin-top:6px}
.mine-day:first-child{margin-top:0}
.mine-more{align-self:flex-start;margin-top:-6px;padding-left:0}
/* Badge „n neu“ (neue Antworten) am Lime-Knopf: dunkel auf hell */
.btn-badge{margin-left:10px;background:var(--night);color:var(--lime)}
/* Startseite: der Hauptteil ist mindestens einen Bildschirm hoch (.grow verteilt den Rest), der Fuss mit MEET2gether-Hinweis,
   Claim und Rechtlichem folgt direkt darunter – also nie im ersten Bild, aber ohne grosse Lücke */
.screen--home{min-height:0}
.home-main{display:flex;flex-direction:column;gap:18px;min-height:calc(100vh - var(--topbar) - 30px);min-height:calc(100dvh - var(--topbar) - 30px)}
.deep{display:flex;flex-direction:column;gap:18px;margin-top:22px}
/* Startseite ohne dehnbaren Zwischenraum: die Videos bleiben direkt unter dem Claim, Knöpfe rücken nach,
   egal ob die Push-Zeile noch da ist; freier Platz bleibt unten */
.screen--home .grow{display:none}
.screen--home .daily{margin-top:4px}

/* ---- MEET WALL · Video-Karte: der MEETmoment des Morgens hängt als erster Pin im Tagesbereich, Standbild + Name ---- */
.moment--video{padding:18px 10px 10px}
.mv{display:block;width:100%;padding:0;border:0;background:transparent;color:#fff;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s}
.mv:active{transform:scale(.97)}
.mv:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:12px}
.mv-media{position:relative;display:block;width:100%;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--night3)}
.mv-media .mv-img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;pointer-events:none}
.mv-play{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);border:1.3px solid rgba(255,255,255,.7);color:#fff;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mv-play svg{width:16px;height:16px;margin-left:2px}
.mv-dur{position:absolute;right:7px;bottom:7px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;padding:2px 6px;border-radius:999px;background:rgba(47,16,65,.75);color:#fff}
.moment--video .moment-meta{color:#fff}