/* Mockup-Telefone: aus dem Konzeptentwurf übernommen, ohne Inline-Stile (CSP). */
:root {
  --p-sam: #3B6FD8; --p-robin: #B0469B; --p-jona: #E07A1F; --p-ella: #1E9C8A; --p-mufi: #8A6B4A;
  --phone-bg: #FAFBFA; --phone-frame: #16302C; --ok: #2E8B57;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --p-sam: #7EA3F0; --p-robin: #DA7FC6; --p-jona: #F3A15A; --p-ella: #4FC7B4; --p-mufi: #C09C78; --phone-bg: #111D1B; --phone-frame: #000000; --ok: #5CC28A; }
}
:root[data-theme="dark"] { --p-sam: #7EA3F0; --p-robin: #DA7FC6; --p-jona: #F3A15A; --p-ella: #4FC7B4; --p-mufi: #C09C78; --phone-bg: #111D1B; --phone-frame: #000000; --ok: #5CC28A; }
/* ---------- Phones ---------- */
.phones { display: flex; gap: 28px; overflow-x: auto; padding-block: 8px 20px; scroll-snap-type: x mandatory; }
.phone-col { flex: none; display: flex; flex-direction: column; gap: 12px; scroll-snap-align: start; }
.phone-cap { display: flex; flex-direction: column; gap: 2px; max-width: 270px; }
.phone-cap b { font-family: var(--display); font-size: 1rem; }
.phone-cap span { font-size: 0.86rem; color: var(--muted); }
.phone { width: 270px; height: 560px; background: var(--phone-frame); border-radius: 40px; padding: 10px; box-shadow: 0 18px 40px -18px rgba(10, 30, 26, 0.45); }
.screen { width: 100%; height: 100%; background: var(--phone-bg); border-radius: 31px; overflow: hidden; display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.35; position: relative; }
.status { display: flex; justify-content: space-between; padding: 10px 20px 4px; font-family: var(--mono); font-size: 10.5px; color: var(--ink); }
.appbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 10px; gap: 8px; }
.hh { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; background: var(--pine-soft); color: var(--pine); border-radius: 999px; padding: 4px 10px 4px 6px; }
.hh i { width: 16px; height: 16px; border-radius: 50%; background: var(--pine); display: inline-block; }
.avatars { display: flex; }
.av { width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--phone-bg); margin-left: -6px; font-style: normal; }
.av.sm { width: 20px; height: 20px; font-size: 9.5px; margin-left: 0; border-width: 0; }
.bg-sam { background: var(--p-sam); } .bg-robin { background: var(--p-robin); } .bg-jona { background: var(--p-jona); } .bg-ella { background: var(--p-ella); } .bg-mufi { background: var(--p-mufi); }
.body { flex: 1; overflow: hidden; padding: 0 14px; display: flex; flex-direction: column; gap: 10px; }
.scr-title { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.scr-sub { color: var(--muted); font-size: 11.5px; }
.screen .card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.screen .row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row .grow { flex: 1; min-width: 0; }
.time { font-family: var(--mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; width: 38px; flex: none; }
.t { font-weight: 600; }
.meta { color: var(--muted); font-size: 11px; }
.screen .pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 8px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.screen .pill.open { background: var(--claim); color: var(--claim-ink); }
.screen .pill.mine { background: var(--pine-soft); color: var(--pine); }
.screen .pill.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.screen .pill.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.btn-claim { border: 0; cursor: pointer; background: var(--claim); color: var(--claim-ink); font: 700 11px var(--body); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.btn-claim:focus-visible, .tab:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.btn-claim.done { background: var(--pine-soft); color: var(--pine); }
.focusbar { border-radius: 14px; padding: 10px 12px; background: var(--pine); color: var(--phone-bg); display: flex; flex-direction: column; gap: 6px; }
.focusbar .meta { color: color-mix(in srgb, var(--phone-bg) 75%, transparent); }
.lane { display: flex; gap: 6px; align-items: center; }
.lane .bar { flex: 1; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--phone-bg) 20%, transparent); position: relative; overflow: hidden; }
.lane .bar b { position: absolute; top: 0; bottom: 0; background: var(--claim); border-radius: 4px; }
.lane small { font-family: var(--mono); font-size: 9.5px; width: 34px; }
.divider-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.tabbar { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); background: var(--surface); padding: 8px 6px 14px; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 9.5px; color: var(--muted); font-weight: 600; }
.tab svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab.on { color: var(--pine); }
.map { height: 118px; border-radius: 14px; background:
  linear-gradient(0deg, transparent 47%, var(--line) 47%, var(--line) 53%, transparent 53%),
  linear-gradient(90deg, transparent 30%, var(--line) 30%, var(--line) 35%, transparent 35%),
  linear-gradient(90deg, transparent 72%, var(--line) 72%, var(--line) 75%, transparent 75%),
  var(--pine-soft); position: relative; border: 1px solid var(--line); }
.pin { position: absolute; left: 58%; top: 26%; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--pine); display: grid; place-items: center; }
.pin svg { transform: rotate(45deg); width: 16px; height: 16px; stroke: var(--phone-bg); fill: none; stroke-width: 2; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 11.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; }
.chk { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line); flex: none; }
.chk.on { background: var(--ok); border-color: var(--ok); }
.strike { text-decoration: line-through; color: var(--muted); }
.hh-row { display: flex; align-items: center; gap: 10px; }
.hh-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; color: #fff; flex: none; }
.role { font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.week { display: grid; grid-template-columns: 34px repeat(5, 1fr); gap: 3px; font-size: 10px; align-items: center; }
.week .h { font-family: var(--mono); color: var(--muted); text-align: center; font-size: 9.5px; }
.week .l { color: var(--muted); font-size: 9.5px; }
.slot { height: 22px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 10px; }
.slot.gap { background: transparent; border: 1.5px dashed var(--claim); color: var(--claim-ink); }
.slot.gap span { background: var(--claim); border-radius: 4px; padding: 0 4px; }


.lane .bar b.b1 { left: 10%; width: 22%; }
.lane .bar b.b2 { left: 55%; width: 30%; }
.lane .bar b.b3 { left: 30%; width: 40%; }
.bg-muted { background: var(--muted); }
.bg-pine { background: var(--pine); }
.warn-text { color: var(--warn); }
.t13 { font-size: 13px; }
.m0 { margin: 0; }
.pl44 { padding-left: 44px; }
.phone-cap { max-width: 270px; }

/* Danke-Seite der Umfrage: Galerie wie auf der Startseite, randlos über die ganze Breite.
   Der Innenabstand (bezogen auf die Textspalte) setzt den ersten Entwurf bündig an den Text. */
body:has(.l-mockups-kurz) { overflow-x: clip; }
.l-mockups-kurz { margin-top: 56px; }
.l-mockups-kurz .phones { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: none;
  margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); padding-block: 22px 30px; }
.l-mockups-kurz .phones:focus-visible { outline: 2px solid var(--pine); outline-offset: 4px; }

/* Arbeitszeit: helle Bahnen mit Zeitachse und Jetzt-Linie */
.zeitplan { gap: 7px; }
.zeitachse .lane-name { width: 34px; flex: none; }
.achse { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; color: var(--muted); }
.lane.hell .bar { background: var(--pine-soft); overflow: visible; }
.lane.hell small { color: var(--ink); }
.lane .bar b.b4 { left: 0; width: 34%; }
.lane .bar b.b5 { left: 62%; width: 24%; }
.lane .bar b.b6 { left: 8%; width: 46%; }
.lane .bar b.b7 { left: 70%; width: 30%; }
.jetzt-strich { position: absolute; left: 22%; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--pine); }

/* Sperrbildschirm mit Mitteilungen */
.screen.sperr { background: linear-gradient(165deg, var(--pine) 0%, #0F2925 100%); color: #F1F4F2; gap: 10px; }
.screen.sperr .status { color: #F1F4F2; }
.sperr-zeit { display: flex; flex-direction: column; align-items: center; padding: 26px 0 18px; }
.sperr-zeit b { font-family: var(--display); font-size: 56px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.sperr-zeit span { font-size: 12px; opacity: .85; margin-top: 6px; }
.noti { margin: 0 12px; background: color-mix(in srgb, #FFFFFF 92%, transparent); color: #16302C; border-radius: 18px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); }
.noti .meta { color: #5B6F6A; }
.noti.klein { opacity: .82; }
.noti-kopf { display: flex; align-items: center; justify-content: space-between; }
.noti-app { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #1F4A43; }
.noti-app i { width: 14px; height: 14px; border-radius: 4px; background: #1F4A43; display: inline-block; }
.noti-knoepfe { margin-top: 4px; gap: 6px; }
.noti-leise { font-size: 11px; font-weight: 700; color: #5B6F6A; padding: 5px 10px; border-radius: 999px; background: #E3ECE8; }
.noti .btn-claim.done { background: #E3ECE8; color: #1F4A43; }

/* Ein Entwurf fest im Dunkelmodus: zeigt die Variante auch auf hellen Geräten */
.phone.dunkel {
  --phone-bg: #111D1B; --phone-frame: #000000; --surface: #172522; --ink: #E4EEEA; --muted: #9DB2AC;
  --line: #2A3D39; --pine: #7FC4B4; --pine-soft: #1D302C; --claim: #F5BE45; --claim-ink: #2A1E00;
  --warn: #F08A64; --ok: #5CC28A; --on-pine: #0F1A18;
  --p-sam: #7EA3F0; --p-robin: #DA7FC6; --p-jona: #F3A15A; --p-ella: #4FC7B4; --p-mufi: #C09C78;
  color: var(--ink);
}

/* Galerie und Interaktion (Startseite und Danke-Seite) */
.l-probier { display: flex; align-items: center; gap: 10px; margin: -8px 0 0; font-size: .93rem; color: var(--muted); }
.l-probier[hidden] { display: none; }
.l-probier-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--claim); box-shadow: 0 0 0 0 color-mix(in srgb, var(--claim) 60%, transparent); animation: l-puls 2s ease-out infinite; flex: none; }
@keyframes l-puls { to { box-shadow: 0 0 0 10px transparent; } }
.phones .phone-col { transition: transform .3s ease, opacity .3s ease; transform-origin: 50% 45%; }
.phones .phone { transition: box-shadow .3s ease; }
@media (hover: hover) {
  :is(.l-mockups, .l-mockups-kurz) .phones:hover .phone-col { opacity: .62; }
  :is(.l-mockups, .l-mockups-kurz) .phones .phone-col:hover, :is(.l-mockups, .l-mockups-kurz) .phones .phone-col:focus-within { opacity: 1; transform: scale(1.045); }
  :is(.l-mockups, .l-mockups-kurz) .phones .phone-col:hover .phone { box-shadow: 0 30px 60px -22px rgba(10, 30, 26, .6); }
}
.klickbar { cursor: pointer; }
.klickbar:focus-visible { outline: 2px solid var(--claim); outline-offset: 2px; border-radius: 8px; }
.screen .row.klickbar, .screen .card.klickbar { border-radius: 10px; transition: background .15s ease; }
@media (hover: hover) {
  .screen .row.klickbar:hover, .screen .card.klickbar:hover { background: color-mix(in srgb, var(--pine) 6%, transparent); }
  .btn-claim.klickbar:hover { filter: brightness(.94); }
  .slot.gap.klickbar:hover { background: color-mix(in srgb, var(--claim) 25%, transparent); }
  .tab.klickbar:hover { color: var(--pine); }
}
.blitz { animation: l-blitz .55s ease; }
@keyframes l-blitz { 0% { transform: scale(1); } 35% { transform: scale(1.04); } 100% { transform: scale(1); } }
.pin { animation: l-pin 2.4s ease-in-out infinite; }
@keyframes l-pin { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

/* Galerie ohne Scrollbalken: Ziehen mit der Maus, Pfeil-Knöpfe, Wischen, Tastatur */
:is(.l-mockups, .l-mockups-kurz) .phones { scrollbar-width: none; }
:is(.l-mockups, .l-mockups-kurz) .phones::-webkit-scrollbar { display: none; }
:is(.l-mockups, .l-mockups-kurz) .phones.ziehbar { cursor: grab; }
:is(.l-mockups, .l-mockups-kurz) .phones.ziehen { cursor: grabbing; scroll-snap-type: none; user-select: none; }
:is(.l-mockups, .l-mockups-kurz) .phones.ziehen .phone-col { transition: none; }
.l-galerie-knoepfe { display: inline-flex; gap: 8px; margin-left: auto; }
.l-galerie-knoepfe button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--pine); display: grid; place-items: center; cursor: pointer; transition: background .15s ease, color .15s ease, opacity .15s ease; }
.l-galerie-knoepfe button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.l-galerie-knoepfe button:hover:not(:disabled) { background: var(--pine); color: var(--on-pine); }
.l-galerie-knoepfe button:disabled { opacity: .35; cursor: default; }
.l-probier { flex-wrap: wrap; }
.l-probier > span:not(.l-probier-punkt):not(.l-galerie-knoepfe) { flex: 1 1 240px; min-width: 0; }