/* SkiReal – Gestaltung nach DESIGN.md: immer dunkel, App statt Website */
:root {
  --bg: #000000;
  --surface: #141414;
  --surface-2: #1f1f1f;
  --text: #ffffff;
  --muted: #8e8e93;
  --line: #2a2a2a;
  --rot: #ff3b4f;
  --auf-rot: #ffffff;
  --gelb: #ffd60a;
  --blau: #4c9bff;
  --scrim: rgb(0 0 0 / 0.6);
  --kopf-h: 52px;
  --tabs-h: 64px;
  --oben: env(safe-area-inset-top, 0px);
  --unten: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  overscroll-behavior: none;
}
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.45 system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: manipulation;
}
/* App-Gefühl: Bedienelemente lassen sich nicht markieren, Texte von Menschen schon */
button, a, .tabs, .app-kopf, .kamera, img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.kommentar, .kommentar-inhalt, .zusatz { -webkit-user-select: text; user-select: text; }
body.kamera-offen { overflow: hidden; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
a { color: var(--blau); text-decoration: none; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
button { font: inherit; color: inherit; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.datei { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.leise { color: var(--muted); }

/* ---------- App-Rahmen ---------- */
.app-kopf {
  position: fixed; inset: 0 0 auto; z-index: 20;
  height: calc(var(--kopf-h) + var(--oben)); padding: var(--oben) 8px 0;
  display: grid; grid-template-columns: 56px 1fr 56px; align-items: center;
  background: rgb(0 0 0 / 0.86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.logo { margin: 0; text-align: center; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.logo span { color: var(--rot); }
.kopf-rechts { display: flex; justify-content: flex-end; min-width: 0; }
.kopf-name { color: var(--muted); font-size: 0.8rem; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-inhalt {
  max-width: 600px; margin: 0 auto;
  padding: calc(var(--kopf-h) + var(--oben) + 8px) 4px calc(32px + var(--unten));
  min-height: 100dvh;
}
body.mit-tabs .app-inhalt { padding-bottom: calc(var(--tabs-h) + var(--unten) + 24px); }

.tabs {
  position: fixed; inset: auto 0 0; z-index: 20;
  height: calc(var(--tabs-h) + var(--unten)); padding: 0 24px var(--unten);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center;
  background: rgb(0 0 0 / 0.9);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.tab {
  display: grid; justify-items: center; gap: 2px; min-width: 72px; min-height: 48px; padding-top: 6px;
  color: var(--muted); font-size: 0.7rem; font-weight: 600;
}
.tab[aria-current="page"] { color: var(--text); }
.tab-icon { display: grid; place-items: center; }
.tab-ausloeser {
  width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--text); background: transparent;
  display: grid; place-items: center; padding: 0; cursor: pointer; transform: translateY(-6px);
}
.tab-ausloeser-innen { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); }
.tab-ausloeser.scharf { border-color: var(--rot); }
.tab-ausloeser.scharf .tab-ausloeser-innen { background: var(--rot); color: var(--auf-rot); }
@media (prefers-reduced-motion: no-preference) {
  .tab-ausloeser.scharf { animation: puls 1.6s ease-in-out infinite; }
  @keyframes puls { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 59 79 / 0.5); } 50% { box-shadow: 0 0 0 10px rgb(255 59 79 / 0); } }
}

/* Ziehen zum Aktualisieren */
.ptr {
  position: fixed; left: 50%; top: calc(var(--kopf-h) + var(--oben) - 34px); z-index: 15;
  width: 34px; height: 34px; margin-left: -17px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  opacity: 0; display: grid; place-items: center; pointer-events: none; will-change: transform;
}
.ptr span { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--muted); border-top-color: transparent; }
.ptr.bereit span { border-color: var(--text); border-top-color: transparent; }
.app-inhalt { will-change: transform; }
@media (prefers-reduced-motion: no-preference) { .ptr.laedt span { animation: drehen 0.8s linear infinite; } }
@keyframes drehen { to { transform: rotate(360deg); } }

/* Übergänge zwischen Ansichten */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }

/* ---------- Typografie ---------- */
.overline { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 4px; }
h2, h3 { margin: 0 0 8px; }
h3 { font-size: 1.1rem; }
.hinweis { font-size: 0.85rem; color: var(--muted); margin: 12px 0; }
.hinweis-mitte { text-align: center; color: var(--muted); margin: 16px 16px; }
.fehler { color: var(--rot); font-weight: 650; margin: 12px 0 0; min-height: 1.2em; }
.fehler:empty { display: none; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 54px; padding: 12px 20px; border-radius: 14px; border: 0;
  background: var(--rot); color: var(--auf-rot); font-size: 1.05rem; font-weight: 700; cursor: pointer; text-align: center;
}
.knopf--zweit { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.knopf:disabled { opacity: 0.45; cursor: default; }
.knopf:active:not(:disabled), .rund-knopf:active, .aktion:active { transform: scale(0.97); }
.knopfreihe { display: grid; gap: 12px; margin: 16px 12px; }
.textknopf {
  background: none; border: 0; padding: 0 4px; min-height: 44px; color: var(--blau);
  font-weight: 650; cursor: pointer;
}
.textknopf--mitte { display: block; margin: 8px auto 0; }
.textknopf--klein { font-size: 0.8rem; min-height: 36px; color: var(--muted); }
.rund-knopf {
  width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgb(255 255 255 / 0.12); color: var(--text); cursor: pointer; flex: none;
}
.rund-knopf--flach { background: transparent; }
.rund-knopf--rot { background: var(--rot); color: var(--auf-rot); }
.rund-knopf.an { background: var(--gelb); color: #000; }
.rund-platz { width: 44px; height: 44px; }

/* ---------- Feed ---------- */
.feed-kopf { padding: 8px 12px 4px; text-align: center; }
.feed-titel { font-size: 1.25rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.feed-info { color: var(--muted); font-size: 0.85rem; margin: 0; }
.zusatz { font-style: italic; margin: 0 0 6px; }

.countdown { text-align: center; padding: 12px 0 4px; }
.countdown-zahl { font-size: clamp(2.8rem, 16vw, 4.5rem); font-weight: 800; line-height: 1; color: var(--rot); font-variant-numeric: tabular-nums; margin: 0 0 6px; }
.countdown-text { color: var(--muted); margin: 0; font-size: 0.9rem; }
.countdown--vorbei .countdown-zahl { color: var(--muted); }
.feed-kopf .countdown { padding-top: 6px; }
.feed-kopf .countdown-zahl { font-size: 1.6rem; display: inline; margin-right: 6px; }
.feed-kopf .countdown-text { display: inline; }

.feed { display: grid; gap: 28px; margin-top: 12px; }
.post { min-width: 0; }
.post-kopf { display: flex; align-items: center; gap: 10px; padding: 0 8px 8px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--surface-2); color: var(--text); font-weight: 750; border: 1px solid var(--line);
}
.avatar--klein { width: 30px; height: 30px; font-size: 0.85rem; }
.post-wer { flex: 1; min-width: 0; }
.post-name { margin: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-zeit { margin: 0; color: var(--muted); font-size: 0.82rem; }
.spaet { flex: none; background: var(--gelb); color: #000; border-radius: 999px; padding: 2px 9px; font-size: 0.72rem; font-weight: 700; }

.post-foto { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--surface-2); }
.post-flaeche { width: 100%; height: 100%; touch-action: pan-y; }
/* beim Zoomen darf das Bild über die Karte hinauswachsen */
.post-foto.zoomt { overflow: visible; z-index: 30; }
.post-foto.zoomt .post-bild { border-radius: 16px; }
.post-foto.zoomt .selfie-ecke { opacity: 0; }
.post-bild { width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.post-bild.geladen, .selfie-ecke img.geladen { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .post-bild, .selfie-ecke img { transition: opacity 200ms; } }
.selfie-ecke {
  all: unset; position: absolute; top: 12px; left: 12px; width: 28%; aspect-ratio: 3 / 4;
  border: 2px solid #000; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--surface-2);
}
.selfie-ecke:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
.selfie-ecke img { width: 100%; height: 100%; object-fit: cover; }

.post-aktionen { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 0; min-height: 44px; }
.reaktionen { all: unset; display: flex; align-items: center; min-height: 40px; cursor: pointer; }
.reaktionen:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; border-radius: 20px; }
.reaktion { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--bg); background: var(--surface-2); margin-right: -8px; flex: none; }
.reaktion img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.reaktion-nur-emoji { display: grid; place-items: center; width: 100%; height: 100%; font-size: 1rem; }
.reaktion-plakette { position: absolute; right: -4px; bottom: -4px; font-size: 0.72rem; line-height: 1; }
.reaktion--gross { width: 52px; height: 52px; margin-right: 0; }
.reaktion--gross .reaktion-plakette { font-size: 1.1rem; }
.aktion {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  border: 0; border-radius: 20px; background: var(--surface); color: var(--text); font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.aktion--leise { background: transparent; color: var(--muted); padding: 0; }
.post-kommentare { padding: 4px 8px 0; }
.kommentar { margin: 4px 0 0; font-size: 0.92rem; overflow-wrap: anywhere; }

/* Unscharfe Vorschau */
.vorschau-bereich { position: relative; margin-top: 24px; }
.vorschau-feed { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vorschau-karte { aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.vorschau-karte img { width: 100%; height: 100%; object-fit: cover; filter: blur(14px) saturate(1.2); transform: scale(1.25); }
.vorschau-text {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88%, 320px); margin: 0;
  padding: 14px 16px; border-radius: 14px; background: var(--scrim); text-align: center; font-weight: 650;
}

/* Warten auf Netz */
.kasten { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 12px 8px; }
.kasten h3 { margin-top: 0; }
.wartet { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: start; border-color: var(--gelb); }
.wartet-bild { width: 88px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; }
.wartet p { margin: 0 0 12px; color: var(--muted); font-size: 0.9rem; }

/* Einrichtung (Home-Bildschirm, Mitteilungen) */
.einrichtung .knopf { margin-top: 4px; }
.schritte { padding-left: 1.3rem; margin: 0 0 8px; }
.schritte li { margin-bottom: 6px; }

/* Leerzustände */
.leer { text-align: center; padding: 56px 24px 24px; }
.leer-emoji { font-size: 3rem; margin: 0 0 8px; line-height: 1; }
.leer-titel { font-size: 1.15rem; font-weight: 750; margin: 0 0 6px; }
.leer-text { color: var(--muted); margin: 0; }

/* ---------- Rückblick ---------- */
.tag { margin: 20px 8px 0; }
.tag-titel { font-size: 0.95rem; color: var(--muted); font-weight: 650; margin: 0 4px 8px; }
.tag-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kachel { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--surface-2); color: var(--text); }
.kachel img { width: 100%; height: 100%; object-fit: cover; }
.kachel--verpasst { background: transparent; border: 1.5px dashed var(--line); display: grid; place-items: center; }
.kachel-leer { color: var(--muted); font-size: 0.8rem; }
.kachel-zeit {
  position: absolute; left: 6px; bottom: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--scrim); font-size: 0.72rem; font-weight: 650; font-variant-numeric: tabular-nums;
}

/* ---------- Beitreten ---------- */
.willkommen { padding: 32px 16px; max-width: 420px; margin: 0 auto; }
.willkommen-emoji { font-size: 3.5rem; margin: 0 0 12px; line-height: 1; text-align: center; }
.willkommen-titel { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; text-align: center; }
.willkommen-text { color: var(--muted); text-align: center; margin: 0 0 28px; }
label.feld { display: block; margin-bottom: 12px; font-weight: 650; }
.feld input, .kommentar-feld {
  display: block; width: 100%; min-height: 54px; padding: 12px 16px;
  font: inherit; font-size: 1rem; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px;
}
.feld input:focus, .kommentar-feld:focus { outline: none; border-color: var(--blau); }
.feld input::placeholder, .kommentar-feld::placeholder { color: var(--muted); }

/* ---------- Blatt von unten ---------- */
dialog.blatt {
  padding: 0; margin: 0; border: 0; background: transparent; color: var(--text);
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
}
dialog.blatt::backdrop { background: var(--scrim); }
.blatt-flaeche {
  position: absolute; inset: auto 0 0; margin: 0 auto; max-width: 600px; max-height: 82dvh;
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: 20px 20px 0 0; border: 1px solid var(--line); border-bottom: 0;
  padding-bottom: var(--unten);
}
@media (prefers-reduced-motion: no-preference) {
  dialog.blatt[open] .blatt-flaeche { animation: hoch 220ms ease-out; }
  @keyframes hoch { from { transform: translateY(100%); } }
}
.blatt-kopf { padding: 8px 16px 4px; touch-action: none; cursor: grab; }
.blatt-griff { width: 36px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 10px; }
.blatt-titel { font-size: 1rem; text-align: center; margin: 0 0 8px; }
.blatt-koerper { overflow-y: auto; padding: 0 16px 12px; overscroll-behavior: contain; }
.blatt-auswahl { display: grid; gap: 10px; padding-bottom: 8px; }
.blatt-hinweis { color: var(--muted); text-align: center; margin: 0 0 16px; font-size: 0.9rem; }
.blatt-liste { list-style: none; margin: 0; padding: 0; }
.blatt-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.blatt-zeile--oben { align-items: flex-start; }
.blatt-zeile:last-child { border-bottom: 0; }
.blatt-name { font-weight: 650; }
.blatt-leer { color: var(--muted); text-align: center; padding: 24px 0; }
.kommentar-inhalt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.kommentar-inhalt p { margin: 0; }
.kommentar-kopf { font-size: 0.9rem; }
.blatt-fuss { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.kommentar-feld { min-height: 44px; border-radius: 22px; padding: 8px 16px; }
.emoji-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.emoji-knopf {
  aspect-ratio: 1; border-radius: 18px; border: 1px solid var(--line); background: var(--surface-2);
  font-size: 2.2rem; cursor: pointer;
}
.emoji-knopf.gewaehlt { border: 2px solid var(--text); }

/* ---------- Kamera ---------- */
.kamera {
  position: fixed; inset: 0; z-index: 50; background: #000; color: #fff;
  display: grid; grid-template-rows: auto 1fr auto auto;
  padding: var(--oben) 0 calc(var(--unten) + 12px);
}
.kamera-kopf { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; }
.kamera-titel { margin: 0; font-weight: 800; text-align: center; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px; }
.kamera-bild {
  position: relative; align-self: start; justify-self: center;
  width: min(100vw - 16px, (100dvh - var(--oben) - var(--unten) - 220px) * 0.75); aspect-ratio: 3 / 4;
  border-radius: 20px; overflow: hidden; background: #111; touch-action: none;
}
.sucher-video, .vorschau-haupt { width: 100%; height: 100%; object-fit: cover; }
.sucher-video.gespiegelt { transform: scaleX(-1); }
.kamera-hinweis {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-size: clamp(2rem, 14vw, 4rem); font-weight: 800; text-shadow: 0 2px 16px rgb(0 0 0 / 0.6);
}
.kamera-hinweis:empty { display: none; }
.kamera-text { text-align: center; color: rgb(255 255 255 / 0.75); margin: 12px 24px 0; min-height: 1.4em; font-size: 0.92rem; }
.kamera-leiste { display: flex; align-items: center; justify-content: space-evenly; gap: 16px; padding: 16px 24px 0; min-height: 100px; }
.kamera-leiste .knopf { max-width: 280px; }
.ausloeser { width: 78px; height: 78px; border-radius: 50%; border: 5px solid #fff; background: transparent; padding: 4px; cursor: pointer; }
.ausloeser span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; }
.ausloeser:active span { transform: scale(0.9); }
.ausloeser:disabled { opacity: 0.5; }
.kamera-nochmal { color: #fff; }
.kamera-senden { flex: 1; }
.kamera-blendung { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 2; }
.kamera-blendung.an { opacity: 1; }
.kamera-system { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 24px; gap: 4px; }
.kamera-system p { margin: 0; }
.kamera .selfie-ecke { border-color: #000; }

/* Selfie-Reaktion */
.kamera--reaktion { grid-template-rows: auto 1fr auto; }
.reaktion-kreis {
  position: relative; align-self: center; justify-self: center; width: min(72vw, 300px); aspect-ratio: 1;
  border-radius: 50%; overflow: visible;
}
.reaktion-kreis .sucher-video { border-radius: 50%; background: #111; }
.reaktion-zahl { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4rem; font-weight: 800; text-shadow: 0 2px 16px rgb(0 0 0 / 0.6); }
.reaktion-emoji { position: absolute; right: -6px; bottom: -6px; font-size: 3.4rem; line-height: 1; }

/* ---------- Großansicht ---------- */
dialog.gross { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100%; height: 100%; }
dialog.gross::backdrop { background: rgb(0 0 0 / 0.94); }
.gross-inhalt { display: grid; place-items: center; height: 100%; padding: calc(var(--oben) + 60px) 8px calc(var(--unten) + 16px); touch-action: pinch-zoom; }
dialog.gross img { max-width: 100%; max-height: 100%; border-radius: 14px; object-fit: contain; }
.gross-zu { position: fixed; top: calc(var(--oben) + 8px); right: 8px; }

/* ---------- Hinweis (Toast) ---------- */
.toasts {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabs-h) + var(--unten) + 12px); z-index: 60;
  display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 16px;
}
.toast {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 16px; font-weight: 650; font-size: 0.92rem; max-width: 420px; text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: rein 180ms ease-out; transition: opacity 250ms; }
  @keyframes rein { from { opacity: 0; transform: translateY(8px); } }
}
.toast--weg { opacity: 0; }

/* ---------- Admin ---------- */
.seite { max-width: 600px; margin: 0 auto; padding: calc(var(--kopf-h) + var(--oben) + 12px) 12px 32px; }
.seite--breit { max-width: 1100px; }
.abschnitt { margin-bottom: 32px; }
.segmente { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border: 0; padding: 0; margin: 0 0 16px; }
.segmente legend { font-weight: 650; margin-bottom: 6px; padding: 0; }
.segmente label { position: relative; }
.segmente input { position: absolute; opacity: 0; inset: 0; }
.segmente span { display: grid; place-items: center; min-height: 50px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-weight: 700; cursor: pointer; }
.segmente input:checked + span { border: 2px solid var(--text); }
.segmente input:focus-visible + span { outline: 3px solid var(--blau); outline-offset: 2px; }
.kasten pre { white-space: pre-wrap; word-break: break-word; font: inherit; margin: 0 0 12px; }
.liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.liste li { border-bottom: 1px solid var(--line); }
.liste a, .liste .zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 8px 0; color: var(--text); }
.liste .titel { font-weight: 700; font-variant-numeric: tabular-nums; }
.liste .info { color: var(--muted); font-size: 0.88rem; text-align: right; }
.feed--gitter { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }

/* ---------- Tagesrückblick ---------- */
.tr {
  position: fixed; inset: 0; z-index: 55; background: #000; color: #fff;
  display: grid; grid-template-rows: auto 1fr auto; padding: var(--oben) 0 calc(var(--unten) + 12px);
}
.tr-kopf { display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.tr-balken { flex: 1; display: flex; gap: 3px; }
.tr-balken span { flex: 1; height: 3px; border-radius: 2px; background: rgb(255 255 255 / 0.25); overflow: hidden; }
.tr-balken i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.tr-buehne { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 8px; }
.tr-canvas { max-width: 100%; max-height: 100%; aspect-ratio: 9 / 16; border-radius: 16px; background: #000; cursor: pointer; }
.tr-spielen {
  position: absolute; width: 84px; height: 84px; border-radius: 50%; border: 0;
  background: rgb(255 255 255 / 0.92); color: #000; display: grid; place-items: center; cursor: pointer; padding-left: 6px;
}
.tr-fuss { display: grid; gap: 10px; padding: 12px 16px 0; justify-items: center; }
.tr-status { margin: 0; color: rgb(255 255 255 / 0.7); font-size: 0.88rem; text-align: center; min-height: 1.3em; }
.tr-export { max-width: 360px; }
.tag-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 4px 8px; }
.tag-kopf .tag-titel { margin: 0; }
.tag-rueckblick { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 18px; border: 0; background: var(--surface); color: var(--text); font-weight: 650; font-size: 0.85rem; cursor: pointer; }