/* =============================================================================
 * TSG Padel Community — Design Tokens & Basis-Layout
 * Farben, Radien und Nav-Struktur aus screendesigns_padel-community.html
 * und Flyer-Typografie (siehe docs/design-discovery.md).
 *
 * Fonts lokal via @font-face (Anforderung: keine externen CDNs zur Laufzeit):
 *   Poppins (Body, 400/600/800), Permanent Marker (Sektions-H2, Brush),
 *   Bungee (Hero-H1, condensed Grunge).
 * ========================================================================== */

/* ---------- Font-Face-Definitionen ---------- */
/* Poppins 400 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 600 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 800 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/poppins-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/poppins-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Permanent Marker */
@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/permanent-marker-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
}
/* Bungee */
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/bungee-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/bungee-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Navy-Familie — abgeglichen mit Flyer Padel Typo.jpg (docs/design-discovery.md) */
  --navy-dark:  #0F2559;  /* schwer, Header/Footer, Text auf Lime */
  --navy:       #1A3B9A;  /* aus Flyer — Standard-Navy, Buttons, Card-Titel */
  --navy-light: #2E56C6;  /* Hover-States, Info-Backgrounds */
  --sky:        #E8EEFA;  /* sehr helles Blau, dezenter Card-Background */

  /* Lime — Vereinsfarbe, unverändert */
  --lime:  #A6CE39;
  --lime2: #C3E05A;

  /* Neutral + Semantik */
  --bg:      #F4F6FA;
  --card:    #FFFFFF;
  --text:    #1a2233;
  --muted:   #6b7590;
  --danger:  #B3261E;
  --success: #4e8a06;

  /* Legacy-Aliase — bleiben bis alle Templates auf die neuen Namen migriert sind.
     Neuer Code soll --navy / --navy-dark / --navy-light nutzen. */
  --navy2: var(--navy-light);
  --navy3: var(--navy-dark);

  /* Font-Stacks */
  --font-body:   'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-brush:  'Permanent Marker', 'Poppins', system-ui, sans-serif;
  /* Aktuell ungenutzt: der Hero verwendet seit der Angleichung an die
     Sektionstitel --font-brush. Als Token erhalten, damit die Schrift fuer
     Sonderformate verfuegbar bleibt; ungenutzte @font-face werden vom
     Browser ohnehin nicht geladen. */
  --font-hero:   'Bungee', 'Poppins', system-ui, sans-serif;

  --radius: 16px;
  --radius-sm: 12px;
  --shadow-card: 0 2px 10px rgba(22, 51, 127, .08);
  --shadow-nav:  0 -2px 12px rgba(22, 51, 127, .07);
  --nav-height: 68px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Das hidden-Attribut muss auch dann greifen, wenn eine Klasse display
   setzt — sonst bleibt ein per JS verstecktes Element sichtbar. Ohne das
   brauchte jede betroffene Komponente ihre eigene [hidden]-Regel. */
[hidden] { display: none !important; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0));
  /* Bessere Anti-Aliasing für Poppins auf macOS/iOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Icons ---------- */
/* Basis-Klasse für alle Lucide-Icons — nutzt currentColor per stroke. */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.icon-lg { width: 24px; height: 24px; }
.icon-sm { width: 16px; height: 16px; }

/* ---------- Header ---------- */
.apphead {
  background: var(--navy-dark);  /* schweres Blau oben — sitzt besser (docs/design-discovery.md) */
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;

  /*
   * Als App vom Home-Bildschirm läuft der Inhalt bis unter die Statusleiste:
   * viewport-fit=cover zusammen mit status-bar-style black-translucent (siehe
   * templates/layout/app.php). Ohne diesen Abstand lägen Logo und Avatar unter
   * der Dynamic Island und wären nicht antippbar.
   *
   * Der Abstand gehört auf .apphead, nicht auf .apphead-inner: So reicht das
   * Navy bis an die Bildschirmkante und die Statusleiste steht auf farbigem
   * Grund statt auf einer weißen Kante.
   *
   * Im Browser ist der Wert 0 — dort verhält sich nichts anders als bisher.
   */
  padding-top: env(safe-area-inset-top, 0);
}
.apphead-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Seitliche Aussparungen greifen im Querformat, wenn die Kamera links
     oder rechts sitzt. */
  padding: 12px calc(16px + env(safe-area-inset-right, 0))
           12px calc(16px + env(safe-area-inset-left, 0));
  max-width: 720px;
  margin: 0 auto;
}
.apphead-brand { display: flex; align-items: center; gap: 10px; color: #fff; }
.apphead-brand:hover { text-decoration: none; }
.apphead-logo {
  /* TSG-Wappen aus Logo.svg. Weißer BG-Chip trägt das mehrfarbige Logo,
     damit es auf Navy-Header lesbar bleibt. */
  background: #fff;
  padding: 4px 6px;
  border-radius: 6px;
  height: 32px;
  width: auto;
  display: block;
  object-fit: contain;
}
.apphead-title { display: flex; flex-direction: column; line-height: 1.1; }
.apphead-title b { font-size: 15px; font-weight: 700; }
.apphead-title span { font-size: 10.5px; color: var(--lime2); }
.apphead-user, .apphead-login {
  margin-left: auto;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.apphead-user {
  /* Seit F17 ist der Avatar der einzige Zugang zum Profil — „Profil" ist aus
     der Bottom-Nav verschwunden. Als dekorativer Initialen-Kreis war er dafuer
     zu unauffaellig und mit 36 px zu klein: Die uebliche Untergrenze fuer ein
     Touch-Ziel liegt bei 44 px. Der Rahmen macht ihn als Schaltflaeche
     erkennbar, ohne den Abmelden-Knopf daneben zu ueberstrahlen. */
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy2);
  border: 2px solid rgba(255, 255, 255, .35);
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase;
  font-size: 15px;
  flex: 0 0 auto;
}
.apphead-user:hover,
.apphead-user:focus-visible {
  border-color: var(--lime);
}
/* Ist ein Profilbild hinterlegt, tritt es an die Stelle der Initiale.
   overflow: hidden schneidet es auf den Kreis zu, object-fit: cover
   verhindert Verzerrung bei nicht quadratischen Bildern. */
.apphead-user { overflow: hidden; padding: 0; }
.apphead-user img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.apphead-user:hover { text-decoration: none; }
.apphead-logout { margin-left: 6px; }
.apphead-logout button {
  background: transparent;
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.25);
  font: inherit;
  font-size: 11.5px;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.apphead-logout button:hover { color: #fff; border-color: rgba(255,255,255,.6); }

/* ---------- Main ---------- */
.app-main {
  flex: 1;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 4px 0 16px;
}

/* ---------- Sections + Cards ---------- */
.sect { padding: 16px 16px 4px; }
.sect h2 {
  font-family: var(--font-brush);
  font-size: 20px;
  color: var(--navy);
  margin: 0 0 8px;
  font-weight: 400;   /* Brush braucht kein Bold — die Font ist von Haus aus kräftig */
  letter-spacing: .5px;
}
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin: 10px 16px;
  overflow: hidden;
}
.card-pad { padding: 16px; }
.card-title {
  font-size: 15px;
  margin: 0 0 4px;
  color: var(--navy);
  font-weight: 700;
}
.card-body { font-size: 13.5px; color: var(--text); margin: 6px 0 0; line-height: 1.45; }
.meta { font-size: 11px; color: var(--muted); }
.muted { color: var(--muted); }

/* ---------- Hero ---------- */
.hero {
  margin: 12px 16px 4px;
  border-radius: var(--radius);
  padding: 24px 20px;
  background:
    linear-gradient(135deg, rgba(15, 37, 89, .82), rgba(30, 73, 168, .78)),
    radial-gradient(circle at 80% 20%, rgba(166, 206, 57, .3), transparent 60%);
  background-color: var(--navy3);
  color: #fff;
}
.hero-title {
  /* Dieselbe Schrift wie die Sektionstitel (.sect h2). Vorher stand hier
     Bungee — die blockige Grunge-Schrift stach gegen die Pinselschrift der
     Ueberschriften ab, statt mit ihr zu sprechen.
     Permanent Marker traegt breiter als Bungee, deshalb etwas mehr Groesse
     und weniger Laufweite: Sperrung laesst eine Handschrift auseinanderfallen. */
  font-family: var(--font-brush);
  font-size: 30px;
  margin: 0 0 8px;
  color: var(--lime);
  font-weight: 400;
  letter-spacing: .5px;
  line-height: 1.15;
}
.hero-sub { font-size: 13.5px; margin: 0 0 14px; opacity: .9; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  border: none;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  line-height: 1.2;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--lime); color: var(--navy3); }
.btn-primary:hover { background: var(--lime2); }
.btn-ghost { background: #fff; color: var(--navy); border: 2px solid var(--navy); }
.btn-block { display: block; width: 100%; }

/* ---------- Flash-Nachrichten ---------- */
.flash-stack { padding: 8px 16px 0; }
.flash {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 8px;
  background: #eef1f7;
  color: var(--navy3);
}
.flash-success { background: #e6f4dc; color: #325a09; }
.flash-info    { background: #e2e9fb; color: var(--navy); }
.flash-error   { background: #fce6e4; color: var(--danger); }

/* ---------- Bottom-Nav ---------- */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid #e3e7f0;
  box-shadow: var(--shadow-nav);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 8px calc(6px + env(safe-area-inset-right, 0))
           calc(10px + env(safe-area-inset-bottom, 0))
           calc(6px + env(safe-area-inset-left, 0));
  z-index: 20;
}
.nav-btn {
  flex: 1;
  max-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
}
.nav-btn:hover { text-decoration: none; }
.nav-btn.on { color: var(--navy); }
.nav-btn .i {
  /* SVG aus dem Lucide-Sprite. Vorher war das ein leeres span, das hier als
     farbiges Quadrat gezeichnet wurde — Platzhalter fuer ein Icon, das nie
     kam. stroke: currentColor laesst das Icon der Textfarbe folgen, also
     auch dem aktiven Zustand .nav-btn.on. */
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}
.nav-btn.on .i { opacity: 1; }
.nav-fab {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--lime); color: var(--navy3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin-top: -28px;
  box-shadow: 0 6px 16px rgba(166, 206, 57, .5);
  font-size: 9.5px; font-weight: 800;
  gap: 0;
}
.nav-fab:hover { text-decoration: none; background: var(--lime2); }
.nav-fab .fab-i {
  width: 22px; height: 22px;
  fill: none;
  stroke: var(--navy3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 2px;
}

/* ---------- Footer ---------- */
.app-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 11px;
  color: var(--muted);
  padding: 8px 0 6px;
}
.app-footer a { color: var(--muted); }

/* ---------- Forms & Button-Stacks ----------
   Rand-Konvention: identisch zu einer .card in einer .sect
   (Section-Padding 16 + Card-Margin 16 = 32 vom Fensterrand).
   `.actions` ist die selbe Layout-Konvention für Button-Stapel ohne <form>. */
.form, .actions { padding: 4px 32px 24px; }
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--navy3); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  border: 1.5px solid #d7ddeb;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
  color: var(--text);
  min-height: 44px;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: 2px solid var(--navy2);
  outline-offset: 1px;
  border-color: var(--navy2);
}
.form-field-error { color: var(--danger); font-size: 12px; margin-top: 4px; }

.checkbox-list { display: flex; flex-direction: column; gap: 6px; }
.checkbox-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 500; color: var(--text);
  padding: 6px 0;
}
.checkbox-row input[type="checkbox"] { width: auto; min-height: auto; margin: 0; }
/* Zweispaltige Formularzeilen.
 *
 * Die Vorlagen setzen display:flex direkt am Element; hier steht nur, was
 * dort fehlte: Flex-Kinder haben min-width:auto und schrumpfen nicht unter
 * ihre Inhaltsbreite. Ein datetime-local-Feld ist von Haus aus breiter als
 * die halbe Breite eines 375-px-Displays — die Zeile lief deshalb über den
 * Rand hinaus und machte die ganze Seite waagerecht verschiebbar. Sichtbar
 * war das im Umfrage-Formular bei „Start" und „Ende", betrifft aber jede
 * .row mit Datums- oder Zeitfeldern.
 */
.row > * { min-width: 0; }

.row-avatar { display: flex; align-items: center; gap: 14px; }

/* ---------- Profil ---------- */
.profile-header {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 16px 8px; gap: 8px;
}
.profile-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--navy2); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 34px;
  border: 4px solid var(--lime);
  object-fit: cover;
}
.profile-avatar-sm { width: 64px; height: 64px; font-size: 22px; border-width: 3px; }
.profile-avatar-initial { background: var(--navy2); color: #fff; }
.profile-name { font-size: 20px; margin: 0; color: var(--navy); font-weight: 700; }
.profile-badge {
  display: inline-block;
  background: var(--lime); color: var(--navy3);
  font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
  padding: 4px 10px; border-radius: 999px; text-transform: uppercase;
}
.profile-meta { font-size: 12.5px; color: var(--muted); }
.profile-line { font-size: 13px; margin-top: 8px; }
.profile-times { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.profile-times .muted { width: 100%; }
.pill {
  display: inline-block;
  font-size: 11px; background: #eef3e0; color: #5c7a12;
  border-radius: 999px; padding: 4px 10px; font-weight: 600;
}

/* ---------- Benachrichtigungs-Tabelle ---------- */
.notif-header, .notif-row {
  display: grid;
  grid-template-columns: 1fr 60px 60px;
  align-items: center;
  padding: 12px 16px;
  font-size: 13.5px;
}
.notif-header {
  background: #f6f8fc;
  color: var(--muted);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.notif-row + .notif-row { border-top: 1px solid #eef1f7; }
.notif-col { text-align: center; }
.notif-col input[type="checkbox"] {
  width: auto; min-height: auto;
  transform: scale(1.3);
  margin: 0;
}

/* ---------- Avatar-Editor ---------- */
.avatar-editor {
  margin-top: 12px;
  padding: 14px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.avatar-editor-stage {
  position: relative;
  width: 300px; height: 300px;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #0a1330;
  touch-action: none;   /* Pan im Canvas soll die Seite nicht scrollen. */
}
.avatar-editor-stage canvas {
  display: block;
  width: 300px; height: 300px;
  cursor: grab;
}
.avatar-editor-stage canvas:active { cursor: grabbing; }
.avatar-editor-mask {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center,
      transparent 0, transparent 148px,
      rgba(15, 37, 89, .55) 150px, rgba(15, 37, 89, .55) 100%);
  border-radius: 12px;
}
.avatar-editor-controls {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
}
.avatar-editor-controls label {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--navy3);
}
.avatar-editor-controls input[type="range"] {
  flex: 1;
  accent-color: var(--lime);
}
.avatar-editor-error { width: 100%; margin: 0; }
.avatar-editor-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 300px;
}
.avatar-editor-actions .btn { flex: 1; min-width: 0; }

/* ---------- Info-Seiten / CMS ---------- */
.page-title {
  font-size: 20px;
  color: var(--navy);
  margin: 0 0 10px;
  font-weight: 700;
}
.cms-body { font-size: 14px; line-height: 1.55; color: var(--text); }
.cms-body h1, .cms-body h2, .cms-body h3 {
  color: var(--navy);
  margin: 18px 0 6px;
  line-height: 1.25;
}
.cms-body h1 { font-size: 20px; }
.cms-body h2 { font-size: 16.5px; }
.cms-body h3 { font-size: 14.5px; }
.cms-body p  { margin: 8px 0; }
.cms-body ul { padding-left: 20px; margin: 6px 0; }
.cms-body li { margin: 4px 0; }
.cms-body a  { color: var(--navy2); }
.cms-body a:hover { text-decoration: underline; }
.cms-body code {
  background: #eef1f7;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
}

/* Tabellen in redaktionellen Texten — gebraucht für die Übersicht der
   Speicherfristen in der Datenschutzerklärung.

   Der Rahmen scrollt seitlich, die Tabelle selbst nicht umgebrochen: Eine
   Frist wie „12 Monate nach dem Spieltermin" darf nicht mitten im Wort
   brechen, sonst ist die Spalte unlesbar. Auf einem 375-px-Display passt die
   zweispaltige Fassung; breitere Tabellen bleiben dank des Rahmens bedienbar,
   ohne die ganze Seite waagerecht zu verschieben. */
.md-table-wrap {
  overflow-x: auto;
  margin: 12px 0;
  -webkit-overflow-scrolling: touch;
}
.md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.md-table th,
.md-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line, #e3e8f2);
  vertical-align: top;

  /* Ohne Trennung braucht die Übersicht der Speicherfristen auf einem
     375-px-Display 332 px und muss seitlich geschoben werden — ein einziges
     Wort ist schuld („Moderationsentscheidungen"). Mit Silbentrennung passt
     dieselbe Tabelle in 279 px. Das <html> trägt lang="de", die Trennregeln
     stimmen also. break-word ist der Auffangfall für Wörter, für die der
     Browser keine Trennstelle kennt. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.md-table th {
  font-weight: 600;
  color: var(--navy);
  background: #eef1f7;
}
.md-table tr:last-child td { border-bottom: 0; }

/* Zweispaltige Tabellen: erste Spalte etwas schmaler als die Hälfte.
   Der Browser verteilt sonst nach Inhalt und gibt der Beschreibungsspalte zu
   wenig — dann wird dort in fast jeder Zeile getrennt, während rechts Platz
   frei bleibt. Nur für genau zwei Spalten, bei mehr wäre eine feste Breite
   für die erste willkürlich. Browser ohne :has() bleiben bei der
   Standardverteilung; die ist lesbar, nur unruhiger. */
.md-table:has(thead th:nth-child(2)):not(:has(thead th:nth-child(3))) th:first-child,
.md-table:has(thead th:nth-child(2)):not(:has(thead th:nth-child(3))) td:first-child {
  width: 47%;
}

.info-row {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
  border-top: 1px solid #eef1f7;
}
.info-row:first-child { border-top: none; }
.info-row:hover { text-decoration: none; background: #f6f8fc; }
.info-row-title { flex: 1; }
.info-row-chev {
  color: var(--muted); font-size: 20px; line-height: 1;
  margin-left: 12px;
}

/* ---------- FAQ Akkordeon ---------- */
.faq-item {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  margin: 8px 16px;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy3);
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--muted);
  transition: transform .2s;
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-answer {
  padding: 0 16px 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}
.faq-answer p:first-child { margin-top: 0; }

/* ---------- Buchen-Landing ---------- */
/* .booking-tiles ist eine .sect — Section-Padding steuert den äußeren Abstand,
   das margin auf .booking-tile bringt die Kacheln auf dieselbe Breite wie
   die .card-Container darunter (Section-Padding 16 + Card-Margin 16 = 32 vom Rand). */
.booking-tiles {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.booking-tile {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  color: var(--text);
  margin: 10px 16px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.booking-tile:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(22, 51, 127, .14);
}
.booking-tile-media {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 5;
  background: var(--navy3);
  overflow: hidden;
}
.booking-tile-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.booking-tile-body { padding: 14px 16px 16px; }
.booking-tile-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}
.booking-tile-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
}
.booking-tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--navy3);
  font-size: 12.5px;
  font-weight: 700;
}
.booking-tile-ext { font-size: 14px; line-height: 1; }

/* ---------- News ---------- */
.news-card { color: var(--text); display: block; }
.news-card:hover { text-decoration: none; box-shadow: 0 6px 18px rgba(22, 51, 127, .14); }

/* Verfügbarkeitsmeldungen (F4) müssen auf einen Blick von Neuigkeiten
   unterscheidbar sein — Lime-Kante plus eigenes Label. Der Kanal für freie
   Plätze ist der Kern der neuen Positionierung und darf im Feed nicht
   untergehen. */
.news-card-availability {
  border-left: 4px solid var(--lime);
  background: linear-gradient(180deg, rgba(166, 206, 57, .10), transparent 60px);
}
.pill-availability {
  background: var(--lime);
  color: var(--navy-dark);
  font-weight: 700;
}
.news-availability-body {
  white-space: pre-line;
  font-size: 13.5px;
  line-height: 1.55;
}
.news-card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg);
}
.news-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.news-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 14px;
}
.news-gallery img {
  width: 100%; height: 140px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* ---------- Admin-Rows ---------- */
.admin-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: var(--text);
  border-top: 1px solid #eef1f7;
}
.admin-row:first-child { border-top: none; }
.admin-row:hover { text-decoration: none; background: #f6f8fc; }
.admin-row-body { flex: 1; }
.admin-row-title { font-weight: 600; font-size: 14px; color: var(--navy); }
.admin-row-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.pill-draft     { background: #fde9c0; color: #7a5c00; }
.pill-published { background: #e6f4dc; color: #325a09; }

.admin-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 0 16px;
}
.admin-image {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  aspect-ratio: 1;
}
.admin-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.admin-image form {
  position: absolute;
  top: 4px; right: 4px;
  margin: 0;
}
.admin-image button {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}
.admin-image button:hover { background: var(--danger); }

/* ---------- View-Toggle (Liste/Monat) ---------- */
.view-toggle {
  display: flex;
  background: #e6eaf4;
  border-radius: var(--radius-sm);
  padding: 4px;
  margin: 0 16px;
}
.view-toggle-item {
  flex: 1;
  text-align: center;
  padding: 9px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  border-radius: 9px;
}
.view-toggle-item:hover { text-decoration: none; }
.view-toggle-item.on { background: var(--navy); color: #fff; }

/* ---------- Kalender ---------- */
.calendar-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 6px;
}
.calendar-nav-title { flex: 1; text-align: center; font-weight: 700; color: var(--navy); font-size: 15px; }
.calendar-nav-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy); font-size: 18px; font-weight: 700;
}
.calendar-nav-btn:hover { text-decoration: none; background: var(--bg); }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: 0 16px 8px;
}
.calendar-head {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.calendar-cell {
  aspect-ratio: 1;
  background: #fff;
  border-radius: 8px;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--text);
  font-size: 12px;
  min-height: 44px;
  box-shadow: 0 1px 2px rgba(22, 51, 127, .04);
}
.calendar-cell.is-out { background: transparent; box-shadow: none; }
.calendar-cell.is-weekend { background: #f8faff; }
.calendar-cell.is-today .calendar-day {
  background: var(--navy);
  color: #fff;
  border-radius: 50%;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.calendar-cell.has-events { background: #f2f7e6; }
.calendar-cell.has-events:hover { text-decoration: none; background: #e9f2d4; }
.calendar-day { font-weight: 600; }
.calendar-dots { display: flex; gap: 3px; }
.calendar-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--lime); display: inline-block;
}

/* ---------- Event-Meta (Detail-Seite) ---------- */
.event-meta {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: 74px 1fr;
  row-gap: 4px;
  column-gap: 12px;
  font-size: 13px;
}
.event-meta dt { color: var(--muted); font-weight: 500; }
.event-meta dd { margin: 0; color: var(--text); font-weight: 600; }
.event-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.event-counts { font-size: 14px; color: var(--text); }
.event-counts strong { color: var(--navy); font-size: 16px; }

/* ---------- Partnerbörse ---------- */
.contact-box {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eef7dc;
  color: var(--navy3);
  font-size: 13px;
  font-weight: 500;
}
.contact-box a { color: var(--navy); font-weight: 600; }

.btn-small-inline {
  padding: 10px 12px;
  font-size: 12.5px;
  min-height: 40px;
}

/* ---------- Beiträge ---------- */
.post-card { margin: 10px 16px; overflow: hidden; }
.post-head { display: flex; gap: 10px; align-items: center; padding: 14px 16px 8px; }
.post-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy2); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  object-fit: cover; flex-shrink: 0;
}
.post-avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.post-avatar-initial { background: var(--navy2); color: #fff; }
.post-head-body { flex: 1; min-width: 0; }
.post-author { font-size: 14px; font-weight: 700; color: var(--navy); }
.post-author a { color: var(--navy); }
.post-time { font-size: 11px; color: var(--muted); margin-top: 1px; }
.post-body { padding: 0 16px 12px; font-size: 14px; line-height: 1.5; color: var(--text); }

.post-media { display: grid; gap: 3px; background: #dfe5f0; }
.post-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-media a { display: block; line-height: 0; }
.post-media-1 { grid-template-columns: 1fr; }
.post-media-1 img { max-height: 480px; }
.post-media-2 { grid-template-columns: 1fr 1fr; }
.post-media-2 img { aspect-ratio: 1; }
.post-media-3 { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
.post-media-3 a:first-child { grid-row: span 2; }
.post-media-3 a:first-child img { height: 100%; }
.post-media-4 { grid-template-columns: 1fr 1fr; }
.post-media-4 img { aspect-ratio: 1; }

.post-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 12px;
  border-top: 1px solid #eef1f7;
}
.post-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.post-btn:hover { text-decoration: none; background: #f0f3f9; color: var(--navy); }
.post-btn.is-active { background: #eef7dc; color: #325a09; }
.post-btn-ghost { padding: 6px 8px; }
.post-action { padding: 0; margin: 0; }
.post-action-spacer { flex: 1; }

.comment-card { margin: 8px 16px; }
.comment-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  border-top: 1px solid #eef1f7;
  padding-top: 6px;
}

/* ---------- Systemstatus ---------- */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.status-tile {
  background: #f6f8fc;
  padding: 12px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
.status-tile b {
  color: var(--navy);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
}
.status-tile span {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.status-tile-warn { background: #fdece9; }
.status-tile-warn b { color: var(--danger); }

/* ---------- Dashboard ---------- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
/* Schmale Kennzahlen-Tabelle, etwa für Opt-ins je Kategorie. */
.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dash-table th,
.dash-table td {
  text-align: left;
  padding: 6px 4px;
  border-bottom: 1px solid var(--line, #e6eaf2);
}
.dash-table th { color: var(--muted); font-weight: 600; font-size: 11.5px; }
.dash-table td + td,
.dash-table th + th { text-align: right; width: 72px; }
.sparkline {
  display: block;
  margin-top: 8px;
  width: 100%;
  height: 40px;
}
.route-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid #eef1f7;
  font-size: 12.5px;
}
.route-row:first-of-type { border-top: none; }
.route-row code {
  flex: 1;
  background: #eef1f7;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  word-break: break-all;
}
.route-row .pill { min-width: 42px; text-align: center; }

/* ---------- Responsive Feinschliff ---------- */
@media (min-width: 720px) {
  .app-main, .apphead-inner { max-width: 720px; }
}

/* ---------- F17: Bereich „Spielen" ---------- */

/* Das Kachelraster erbt die Optik von .booking-tile — nur die Anordnung ist
   anders. Auf schmalen Displays einspaltig, ab 600 px zweispaltig: Ab dieser
   Breite passen zwei Kacheln nebeneinander, ohne dass die Bilder zu klein
   werden, um noch etwas zu zeigen. */
.guide-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 600px) {
  .guide-tiles {
    grid-template-columns: 1fr 1fr;
  }
  /* Die erste Kachel bleibt auch im zweispaltigen Raster über die volle
     Breite. Sie ist das Ziel des QR-Codes am Platzeingang und soll nicht
     zwischen den übrigen verschwinden. */
  .guide-tiles-lead {
    grid-template-columns: 1fr;
  }
}

/* Die Startkachel bekommt mehr Bildfläche und einen Akzentrand — sie ist der
   Einstieg für jemanden, der zum ersten Mal auf dem Platz steht. */
.guide-tile-lead {
  border: 2px solid var(--lime);
}
.guide-tile-lead .booking-tile-media {
  aspect-ratio: 16 / 9;
}
.guide-tile-lead .booking-tile-title {
  font-size: 18px;
}

/* Kopfbild der Detailseite. */
.guide-hero {
  margin: 0 16px;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--navy3);
}
.guide-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Der Kernsatz. Steht vor Video und Fließtext und ist für jemanden gedacht,
   der auf dem Platz steht und keine Zeit zum Lesen hat — deshalb größer als
   der Fließtext und durch den Lime-Balken sofort als eigene Ebene erkennbar. */
.guide-lead {
  border-left: 4px solid var(--lime);
  padding: 2px 0 2px 14px;
  margin: 14px 0 18px;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--navy);
}

.guide-video {
  margin: 0 0 18px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.guide-video video {
  width: 100%;
  height: auto;
  display: block;
}

.guide-graphic {
  margin: 18px 0 0;
}
.guide-graphic img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Fußnavigation: vorherige und nächste Kachel. Die Touch-Ziele sind bewusst
   großzügig — gelesen wird das hier mit einer Hand am Spielfeldrand. */
.guide-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 16px 0;
}
.guide-nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  max-width: 48%;
}
.guide-nav-link:hover { text-decoration: none; }
.guide-nav-next { margin-left: auto; text-align: right; }
.guide-nav-dir { font-size: 16px; line-height: 1; opacity: .7; }
.guide-nav-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Einstiegskarte auf der Startseite. Lime-Akzent, damit sie sich vom
   News-Feed darunter absetzt, ohne den Hero zu ueberstrahlen. */
.guide-teaser {
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 4px solid var(--lime);
  color: var(--text);
}
.guide-teaser:hover { text-decoration: none; }
.guide-teaser .card-pad { flex: 1 1 auto; }
.guide-teaser-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
}
.guide-teaser-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.guide-teaser-chev {
  font-size: 20px;
  color: var(--navy2);
  padding-right: 14px;
  line-height: 1;
}

/* Video in einer Impression. Gleiche Rundung wie die Bildkacheln darueber,
   damit beide Medienarten im Feed als dieselbe Ebene lesbar sind. */
.post-video {
  margin: 10px 0 0;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.post-video video {
  width: 100%;
  height: auto;
  display: block;
  max-height: 70vh;
}

/* Rückweg am Seitenende. Grosszuegiger Abstand nach oben, damit er nicht als
   Teil des letzten Listeneintrags gelesen wird, und ein Touch-Ziel, das man
   mit dem Daumen trifft. */
.back-link {
  text-align: center;
  font-size: 12px;
  margin: 18px 16px 4px;
}
.back-link a {
  display: inline-block;
  padding: 10px 16px;
  min-height: 44px;
  line-height: 24px;
  color: var(--navy2);
  font-weight: 600;
}

/* ---------- Emoji-Auswahl ---------- */

.emoji-picker { margin-top: 6px; }
.emoji-toggle {
  background: transparent;
  border: 1px solid var(--line, rgba(22,51,127,.2));
  border-radius: 999px;
  padding: 7px 14px;
  min-height: 36px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy2);
  cursor: pointer;
}
.emoji-toggle:hover { border-color: var(--navy2); }
.emoji-panel {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 12px;
}
.emoji-group-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin: 6px 0 4px;
}
.emoji-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
/* 40 px Kantenlaenge: Emojis werden mit dem Daumen getroffen, nicht mit der
   Maus. Etwas unter den 44 px der Navigation, weil hier zwoelf Ziele
   nebeneinander liegen und die Tafel sonst den halben Bildschirm fuellt. */
.emoji-btn {
  width: 40px; height: 40px;
  font-size: 21px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.emoji-btn:hover { background: rgba(22, 51, 127, .08); }

/* --- Bildzuschnitt (News-Titelbild) -------------------------------------- */
/* Der Canvas ist das eigentliche Bedienelement: ziehen verschiebt den
   Ausschnitt. touch-action: none verhindert, dass die Seite mitscrollt. */
.cropper {
  margin: 12px 0 4px;
}
.cropper-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px;
}
.cropper-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: var(--bg);
  cursor: grab;
  touch-action: none;
}
.cropper-canvas:active { cursor: grabbing; }
.cropper-zoom {
  display: block;
  width: 100%;
  margin: 12px 0 0;
}
.cropper-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.cropper-actions .btn { width: auto; padding: 6px 14px; font-size: 13px; }

/* Autorenzeile unter News-Titeln */
.news-author {
  margin: -2px 0 10px;
  font-size: 12px;
  color: var(--muted);
}
.news-author strong { font-weight: 600; color: var(--text); }

/* --- Hero-Aktionen und Webcam ------------------------------------------- */
/* Zwei Knöpfe nebeneinander, auf schmalen Geräten umbrechend. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
/* Der Ghost-Knopf steht im Hero auf dunklem Grund und braucht helle Kanten. */
.btn-on-hero {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .08);
}
.btn-on-hero:hover,
.btn-on-hero:focus-visible {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, .18);
}

/* aspect-ratio statt min-height: reserviert den Platz für das Bild, bevor es
   da ist. Ohne das springt der Text darunter nach unten, sobald die Kamera
   geantwortet hat — genau dann, wenn jemand schon zu lesen angefangen hat.
   4:3 ist das Format der Kamera. */
.webcam-frame {
  position: relative;
  background: var(--bg);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.webcam-frame img {
  display: block;
  width: 100%;
  height: 100%;
  /* Liefert die Kamera eines Tages ein anderes Format als 4:3, entstehen
     Ränder statt eines Anschnitts. Bei einem Livebild ist ein Balken das
     kleinere Übel als ein weggeschnittener Platz. */
  object-fit: contain;
}
.webcam-error {
  margin: 0;
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* Zeigt der Rahmen nur den Platzhalter, braucht er die reservierte Höhe
   nicht — ein leeres 4:3-Feld mit einer Zeile Text in der Mitte wäre ein
   sehr großes Nichts. */
.webcam-frame:has(img[hidden]) {
  aspect-ratio: auto;
  min-height: 180px;
}