body { min-height: 100dvh; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
body.no-nav { padding-bottom: 0; }

/* ---------- Check-in ---------- */
.checkin {
  min-height: 100dvh; max-width: 560px; margin: 0 auto;
  padding: calc(28px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 28px;
}
.checkin-top .logo { width: 132px; }
.checkin-hero { display: grid; gap: 10px; margin-top: 8vh; }
.checkin-title { font-size: clamp(34px, 10vw, 48px); line-height: 1.08; }
.checkin-claim { margin: 0; font-size: 18px; color: var(--muted); }
.checkin-claim:empty { display: none; }
.checkin-form { display: grid; gap: 18px; margin-top: auto; padding: 30px 22px 34px; box-shadow: 0 10px 26px rgba(0, 0, 0, .06); }
.btn.big { width: 100%; min-height: 54px; font-size: 18px; }
/* Hintergrund: ruhiger Grundton mit weichem Spektrum-Schimmer oben rechts */
body.no-nav { background: radial-gradient(120% 60% at 100% 0%, #e9def3 0%, rgba(233, 222, 243, 0) 60%), radial-gradient(90% 50% at 0% 30%, #dcefe8 0%, rgba(220, 239, 232, 0) 60%), var(--paper); }

.color-pick { border: 0; padding: 0; margin: 0; }
.color-pick legend { font-weight: 700; font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
.color-pick-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 8px; }
.color-pick label { position: relative; display: grid; place-items: center; gap: 6px; padding: 12px 4px; border-radius: var(--r); background: var(--chip); cursor: pointer; font-size: 14px; }
.color-pick label i { width: 32px; height: 32px; border-radius: 50%; background: var(--c); }
.color-pick input { position: absolute; opacity: 0; }
.color-pick input:checked + i { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #000; }
.color-pick input:focus-visible + i { outline: 2px solid var(--lila); outline-offset: 6px; }

/* ---------- Gruppen-Reveal: der eine große Moment ---------- */
.reveal {
  position: fixed; inset: 0; z-index: 40; background: var(--group); color: var(--on-group);
  display: flex; flex-direction: column; justify-content: center; padding: 32px 28px;
  clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%); animation: unfold .9s cubic-bezier(.7, 0, .2, 1) forwards;
}
@keyframes unfold { to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
.reveal::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--spectrum); }
.reveal-pre { font-size: 20px; margin: 0; opacity: .85; }
.reveal-name { font-size: clamp(80px, 26vw, 168px); font-weight: 700; letter-spacing: -0.02em; line-height: .95; margin: 6px 0 18px; }
.reveal-sub { font-size: 18px; max-width: 30ch; margin: 0 0 40px; }
.reveal-btn { background: var(--on-group); color: var(--group); align-self: flex-start; padding-inline: 28px; }
.reveal-btn:hover { background: var(--on-group); filter: brightness(.95); }

/* ---------- Kopf der App ---------- */
.top { background: var(--surface); position: sticky; top: 0; z-index: 10; padding-top: env(safe-area-inset-top); }
.top::after { content: ""; display: block; height: 3px; background: var(--spectrum); }
.top-bar { max-width: 640px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.top .logo { width: 84px; }
.group-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 9999px; background: var(--chip); font-size: 15px; font-weight: 700; }
.group-pill i { width: 14px; height: 14px; border-radius: 50%; background: var(--group); }

/* ---------- „Jetzt“-Karte in Gruppenfarbe ---------- */
.now {
  max-width: 600px; margin: 16px auto 0; width: calc(100% - 32px);
  background: var(--group); color: var(--on-group); padding: 24px 22px 30px;
}
.now::before { display: none; }
.now-hello { margin: 0 0 14px; font-size: 15px; opacity: .85; }
.now .overline { color: currentColor; opacity: .85; }
.now-title { font-size: clamp(28px, 8vw, 38px); margin-top: 4px; }
.now-meta { margin: 8px 0 0; font-size: 17px; opacity: .92; }
.now-meta:empty { display: none; }
.now-next { margin-top: 18px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--on-group) 30%, transparent); font-size: 15px; }
.now-next span:first-child { opacity: .8; margin-right: 4px; }
body.compact .now { display: none; }

/* ---------- Karten, Tabs ---------- */
.tabs { max-width: 640px; margin: 0 auto; }
.tab { padding: 26px 20px 32px; }
.tab-title { font-size: 28px; margin-bottom: 16px; }
.push-card { width: calc(100% - 32px); max-width: 600px; margin: 16px auto 0; padding: 24px 20px 28px; display: grid; gap: 12px; }
.push-card h2 { font-size: 20px; }
.push-card p { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }
.push-card .btn { justify-self: start; }
.link { background: none; border: 0; padding: 4px 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start; font-size: 14px; }
.ios-steps { margin: 8px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 15px; }

.announce { background: var(--soft); color: var(--ink); padding: 12px 20px; font-weight: 700; padding-top: calc(12px + env(safe-area-inset-top)); }
.offline { background: #000; color: #fff; padding: 8px 20px; font-size: 14px; }

/* ---------- Agenda (Zeitleiste) ---------- */
.agenda { list-style: none; margin: 0; padding: 0; position: relative; }
.agenda::before { content: ''; position: absolute; left: 58px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.ag { display: grid; grid-template-columns: 48px 1fr; gap: 22px; padding: 10px 0; position: relative; }
.ag-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-2); padding-top: 2px; text-align: right; }
.ag::after { content: ''; position: absolute; left: 54px; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .3); }
.ag-body h3 { font-size: 17px; line-height: 1.3; }
.ag-body p { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.ag-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); margin-top: 8px; padding: 3px 10px 3px 8px; border-radius: 9999px; background: var(--chip); }
.ag-tag i { width: 9px; height: 9px; border-radius: 50%; background: var(--group); }
.ag.past { opacity: .45; }
.ag.now-item .ag-body { position: relative; background: var(--surface); margin: -8px 0 -8px -12px; padding: 12px 14px 14px; clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.ag.now-item .ag-body::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--group); }
.ag.now-item::after { background: var(--group); box-shadow: 0 0 0 4px color-mix(in srgb, var(--group) 22%, transparent); }
.ag.now-item .ag-time { color: var(--ink); }
.empty { color: var(--muted); padding: 24px 0; }

/* ---------- Timer ---------- */
.timer { display: grid; justify-items: center; text-align: center; padding-top: 8px; }
.timer-label { font-size: 22px; font-weight: 700; margin: 0 0 18px; }
.timer-ring { position: relative; width: min(78vw, 340px); aspect-ratio: 1; }
.timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--chip); stroke-width: 7; }
.ring-fg { fill: none; stroke: var(--group); stroke-width: 7; stroke-linecap: butt; stroke-dasharray: 339.29; stroke-dashoffset: 0; transition: stroke-dashoffset .5s linear; }
.timer-digits { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: clamp(56px, 20vw, 92px); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.timer-state { margin: 18px 0 0; color: var(--ink-2); max-width: 30ch; font-size: 17px; }
.timer.done .timer-digits { color: var(--group); animation: pulse 1s ease-in-out 3; }
@keyframes pulse { 50% { transform: scale(1.05); } }
.timer-next { margin-top: 18px; padding: 16px 20px 18px; background: var(--group); color: var(--on-group); font-size: 18px; font-weight: 700; clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }

/* ---------- Social ---------- */
.social { display: grid; gap: 22px; margin-top: 16px; }
.post { overflow: hidden; }
.post img { display: block; width: 100%; height: auto; background: var(--chip); margin-top: 4px; }
.post-body { padding: 18px 18px 28px; display: grid; gap: 12px; }
.post-body h3 { font-size: 11px; line-height: 18px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.post-text { white-space: pre-wrap; margin: 0; font-size: 16px; }
.post-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.post-open { display: flex; gap: 16px; font-size: 14px; }
.post-open a { color: var(--ink-2); text-underline-offset: 3px; }

/* ---------- Feedback ---------- */
.fb { display: grid; gap: 24px; }
.fb-block { border: 0; padding: 0; margin: 0; }
.fb-block legend, .fb-block > label { font-weight: 700; font-size: 17px; margin-bottom: 10px; display: block; color: var(--ink); }
.nps { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.nps label { position: relative; }
.nps input { position: absolute; opacity: 0; }
.nps span { display: grid; place-items: center; height: 44px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; font-size: 15px; }
.nps input:checked + span { background: #000; color: #fff; box-shadow: none; }
.nps input:focus-visible + span { outline: 2px solid var(--lila); outline-offset: 2px; }
.nps-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; margin-top: 6px; }
.stars { display: flex; gap: 6px; }
.stars label { position: relative; cursor: pointer; }
.stars input { position: absolute; opacity: 0; }
.stars svg { width: 36px; height: 36px; fill: var(--surface); stroke: rgba(0, 0, 0, .3); stroke-width: 1.3; }
.stars label.on svg { fill: var(--lila); stroke: var(--lila); }
.stars input:focus-visible + svg { outline: 2px solid var(--lila); outline-offset: 2px; border-radius: 4px; }
.rate-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rate-row:last-child { border-bottom: 0; }
.rate-row span { font-weight: 700; }
.fb-done { padding: 30px 22px 34px; }
.fb-done h3 { font-size: 32px; }
.fb-done p { color: var(--ink-2); }
.fb-done .btn { margin-top: 8px; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface); box-shadow: 0 -1px 0 var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav button { position: relative; border: 0; background: none; padding: 11px 0 12px; display: grid; justify-items: center; gap: 3px; font-size: 12px; color: var(--muted); cursor: pointer; }
.nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav button[aria-current='page'] { color: #000; font-weight: 700; }
.nav button[aria-current='page']::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; background: var(--spectrum); }

@media (min-width: 700px) {
  .nav { max-width: 640px; margin: 0 auto 16px; border-radius: var(--r); box-shadow: 0 0 0 1px var(--line), 0 10px 26px rgba(0, 0, 0, .09); overflow: hidden; }
}

/* ---------- Einrichtung nach dem Check-in ---------- */
.setup {
  position: fixed; inset: 0; z-index: 35; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: radial-gradient(120% 50% at 100% 0%, #e9def3 0%, rgba(233, 222, 243, 0) 60%), radial-gradient(90% 40% at 0% 25%, #dcefe8 0%, rgba(220, 239, 232, 0) 60%), var(--paper);
}
.setup::before { content: ""; position: sticky; top: 0; display: block; height: 6px; background: var(--spectrum); z-index: 1; }
.setup-inner {
  max-width: 560px; margin: 0 auto; display: grid; gap: 22px;
  padding: calc(22px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
}
.setup-head { display: grid; gap: 12px; }
.setup-alert {
  justify-self: start; margin: 0; display: inline-flex; align-items: center; gap: 10px;
  background: #000; color: #fff; border-radius: 999px; padding: 7px 16px 7px 7px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  animation: alert-pulse 2.4s var(--ease) infinite;
}
.setup-alert span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #c05bdb; font-size: 15px; letter-spacing: 0; }
@keyframes alert-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192, 91, 219, .45); } 50% { box-shadow: 0 0 0 8px rgba(192, 91, 219, 0); } }
.setup-title { font-size: clamp(28px, 8vw, 40px); line-height: 1.1; }
.setup-lead { margin: 0; font-size: 17px; color: var(--ink-2); }
.setup-device { margin: 0; justify-self: start; font-size: 13px; font-weight: 700; color: var(--lila); background: rgba(100, 63, 191, .09); padding: 4px 10px; border-radius: 999px; }
.setup.all-done .setup-alert { animation: none; background: var(--gruen-deep); }
.setup.all-done .setup-alert span { background: #fff; color: var(--gruen-deep); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.step {
  position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start;
  background: var(--surface); padding: 22px 18px 24px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .06);
}
.step::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--spectrum); }
.step-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #000; color: #fff; font-weight: 700; font-size: 18px; }
.step-main h2 { font-size: 20px; margin: 6px 0 8px; }
.step-main p { margin: 0 0 10px; color: var(--ink-2); }
.step-main p:last-child { margin-bottom: 0; }
.howto { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 10px; font-size: 16px; }
.howto li::marker { font-weight: 700; }
.ico { width: 22px; height: 22px; vertical-align: -5px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico circle[r="1.6"] { fill: currentColor; stroke: none; }
.step-note { font-size: 14px; }
.step-code { font-size: 14px; background: var(--chip); border-radius: var(--r); padding: 10px 12px; }
.step-code b { display: block; font-size: 26px; letter-spacing: 6px; color: #000; font-variant-numeric: tabular-nums; margin-top: 4px; }
.step-btn { min-height: 50px; padding-inline: 22px; margin: 4px 0 8px; }
.step.done { box-shadow: none; background: rgba(255, 255, 255, .7); }
.step.done::before { background: var(--gruen); }
.step.done .step-num { background: var(--gruen); }
.step.done.na .step-num { background: var(--muted); }
.step.waiting { opacity: .62; }
.step.waiting .step-num { background: transparent; color: #000; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); }
.step.blocked::before { background: #e5484d; }
.step.blocked .step-num { background: #e5484d; }

.setup-actions { display: grid; gap: 6px; justify-items: center; }
.setup-skip { justify-self: center; font-size: 14px; color: var(--muted); padding: 10px; text-align: center; max-width: 34ch; }
.setup-skip.armed { color: #b42318; }

/* Code-Rückweg beim Check-in */
.code-card { padding: 16px 20px 18px; background: rgba(255, 255, 255, .75); }
.code-card summary { cursor: pointer; font-size: 15px; color: var(--ink-2); list-style: none; }
.code-card summary::-webkit-details-marker { display: none; }
.code-card summary strong { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.code-form p { margin: 12px 0 10px; font-size: 14px; color: var(--muted); }
.code-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.code-input { text-transform: uppercase; letter-spacing: 4px; font-size: 20px; font-weight: 700; }