/* dEVils-Nails – Admin-Bereich (Login, Dashboard). Tokens siehe tokens.css. */

/* Ausdrücklich, nicht nur über die Browser-Vorgabe: admin.js blendet die
   Zähler über das hidden-Attribut ein und aus. Bekäme ein Element später
   einmal ein eigenes display, wäre hidden sonst wirkungslos – und ein Zähler,
   der sich nicht mehr ausblenden lässt, zeigt dauerhaft eine falsche Zahl. */
[hidden] { display: none !important; }

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2rem;
  width: 100%;
  max-width: 380px;
}

.card h1 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin: 0 0 1.5rem;
  color: var(--color-accent);
}

.field {
  margin-bottom: 1.25rem;
}

.field label {
  display: block;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 0.375rem;
}

.field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  width: 100%;
  padding: 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 1rem;
}

.field input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* Schieberegler (Video-Generator): braucht weder Rahmen noch Polsterung. */
.field input[type="range"] {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--color-accent);
}

/* Ankreuzfeld mit Beschriftung daneben. Stand bisher nur in site.css und
   damit im Adminbereich gar nicht zur Verfuegung -- Kaestchen und Text lagen
   dort untereinander statt nebeneinander. */
.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.45;
}

.check input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  accent-color: var(--color-accent);
}

.alert ul {
  margin: 0;
  padding-left: 1.25rem;
}

.alert li + li {
  margin-top: 0.25rem;
}

.alert {
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

.alert-success {
  background: rgba(87, 217, 163, 0.12);
  border-color: #57d9a3;
  color: #57d9a3;
}

/* --- Admin-Kopf und Navigation (templates/layout.twig) ---

   Zwei Ebenen statt einer langen Reihe: vier taeglich gebrauchte Ziele stehen
   immer sichtbar, alles Uebrige liegt hinter "Mehr". Auf dem Handy sitzt die
   Leiste UNTEN -- dort ist sie mit dem Daumen erreichbar, und man sieht auf
   einen Blick, was es gibt, statt seitlich schieben zu muessen. */

.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  padding-top: max(0.7rem, env(safe-area-inset-top));
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1rem;
  white-space: nowrap;
}

.app-brand img { display: block; height: 26px; width: auto; }
.app-brand-zusatz { color: var(--color-text-muted); }

.app-header-rechts { display: flex; align-items: center; gap: 0.5rem; }

.app-kopf-link {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  color: var(--color-text-muted);
  text-decoration: none;
}
.app-kopf-link:hover { background: var(--color-surface-alt); color: var(--color-text); }
.app-kopf-link svg { width: 20px; height: 20px; }

/* --- Die Navigationsleiste --- */

.app-nav {
  position: sticky;
  top: 3.6rem;
  z-index: 25;
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.app-nav-ziel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* 2.75rem = 44 px: die Mindestgroesse, die sich mit dem Daumen sicher
     treffen laesst. */
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.app-nav-ziel::-webkit-details-marker { display: none; }
.app-nav-ziel:hover { color: var(--color-text); background: var(--color-surface-alt); }
.app-nav-ziel[aria-current="page"] { color: #fff; background: var(--color-accent); }

.app-nav-icon { position: relative; display: grid; place-items: center; }
.app-nav-icon svg { width: 20px; height: 20px; }

/* Rotes Zeichen an "Termine", solange Anfragen unbearbeitet sind. */
.app-nav-punkt {
  position: absolute;
  top: -5px;
  right: -8px;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: var(--color-danger);
  color: #fff;
  font-family: var(--mono, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
}

/* --- Das Mehr-Menü --- */

.app-mehr { position: relative; }
.app-mehr > summary { display: inline-flex; }

/* Abdunkeln, was hinter dem geöffneten Menü liegt. */
.app-mehr[open]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.5);
}

.app-mehr-panel {
  position: absolute;
  z-index: 45;
  top: calc(100% + 0.5rem);
  left: 0;
  width: min(22rem, calc(100vw - 2rem));
  max-height: min(32rem, calc(100vh - 8rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.app-mehr-kopf {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.app-mehr-zu {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: inherit;
  cursor: pointer;
}
.app-mehr-zu svg { width: 20px; height: 20px; }

.app-mehr-titel {
  margin: 0.65rem 0 0.2rem;
  font-family: var(--mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.app-mehr-titel:first-of-type { margin-top: 0.2rem; }

.app-mehr-liste { list-style: none; margin: 0; padding: 0; }
.app-mehr-liste a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.6rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
}
.app-mehr-liste a:hover { background: var(--color-surface-alt); }
.app-mehr-liste a[aria-current="page"] { background: var(--color-surface-alt); color: var(--color-accent); }
.app-mehr-icon { display: grid; place-items: center; flex: none; color: var(--color-text-muted); }
.app-mehr-icon svg { width: 20px; height: 20px; }
.app-mehr-liste strong { display: block; font-size: 0.94rem; font-weight: 600; }
.app-mehr-hinweis { display: block; color: var(--color-text-muted); font-size: 0.75rem; line-height: 1.3; }

.app-mehr-abmelden { display: none; margin-top: 0.8rem; }

/* --- Handy: Navigation nach unten --- */

@media (max-width: 720px) {
  .app-header { padding: 0.6rem 0.9rem; padding-top: max(0.6rem, env(safe-area-inset-top)); }
  .app-brand { font-size: 0.92rem; }
  .app-brand-zusatz { display: none; }

  .app-nav {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 35;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 0.3rem 0.2rem;
    padding-bottom: max(0.3rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
    border-bottom: 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.28);
  }

  .app-nav-ziel {
    flex-direction: column;
    gap: 0.15rem;
    min-height: 3.4rem;
    padding: 0.35rem 0.2rem;
    border-radius: var(--radius);
    font-size: 0.68rem;
    font-weight: 600;
  }
  .app-nav-ziel[aria-current="page"] {
    background: none;
    color: var(--color-accent);
  }
  .app-nav-text { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  .app-mehr > summary { display: flex; width: 100%; }

  /* Als Blatt von unten -- dort, wo der Daumen ohnehin ist. */
  .app-mehr-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    max-height: 78vh;
    padding: 1rem 1rem 1.2rem;
    padding-bottom: max(1.2rem, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .app-mehr-kopf { display: flex; }
  .app-mehr-abmelden { display: block; }
  .app-mehr-abmelden .btn { width: 100%; }
}

/* Platz fuer die untere Leiste, damit sie nichts verdeckt. */
@media (max-width: 720px) {
  body.hat-app-nav { padding-bottom: 4.6rem; }
}

.app-main {
  padding: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}

.app-main h1 {
  font-family: var(--font-heading);
  margin: 0 0 0.5rem;
}

.page-intro {
  color: var(--color-text-muted);
  margin: 0 0 1.5rem;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  margin: 2rem 0 0.75rem;
}

.back-link {
  display: inline-block;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.back-link:hover {
  color: var(--color-accent);
}

/* --- Dashboard und Kennzahlen --- */

/* Kacheln im Stil des Mehr-Menues (13.09.2026): dasselbe Symbol wie dort,
   die Bezeichnung in Grundschrift, darunter die Zahl und ein kurzer Hinweis.
   Vorher rosa Serifen-Ueberschriften in grossen, weit gerundeten Karten --
   die erste Fassung. Gilt auch fuer die Kacheln in der Buchhaltung.

   Zwei Kacheln nebeneinander schon auf dem Handy: die Zahlen sind kurz,
   und sechs Kacheln untereinander bedeuten, dass man an der Uebersicht
   vorbeiscrollt, statt sie zu ueberblicken. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0.5rem 0 1.5rem;
}

@media (min-width: 640px) {
  .stat-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.8rem;
  }
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.8rem 0.9rem 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
}

a.stat-card {
  transition: background-color 0.15s, border-color 0.15s;
}

a.stat-card:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-accent);
}

.stat-card h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text-muted);
}

.stat-icon {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--color-text-muted);
}

.stat-icon svg {
  width: 18px;
  height: 18px;
}

.stat-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

/* Spezifitaet muss .stat-card p (0-1-1) schlagen, sonst erscheint die
   Kennzahl gedaempft und klein. */
.stat-card .stat-number {
  margin: 0.1rem 0 0;
  font-size: clamp(1.35rem, 6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  color: var(--color-text);
}

/* Wo etwas zu tun ist (neue Anfrage, ungelesene Mail): Rahmen, Zahl und
   Symbol in Akzentfarbe. */
.stat-card.ist-offen {
  border-color: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-border));
}

.stat-card.ist-offen .stat-number,
.stat-card.ist-offen .stat-icon {
  color: var(--color-accent);
}

/* Ueberschrift ueber einer Kachelgruppe -- wie die Gruppen im Mehr-Menue. */
.gruppen-titel {
  margin: 1.25rem 0 0.4rem;
  font-family: var(--mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.quick-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .quick-links {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.quick-link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
}

.quick-link:hover {
  border-color: var(--color-accent);
}

.quick-link span {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* --- Login --- */

.auth-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.auth-logo {
  max-width: 200px;
  height: auto;
}

/* --- Karten mit voller Breite (Konto, Design) --- */

.card-wide {
  max-width: none;
  margin: 1.5rem 0;
}

.card-wide h2 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

/* Schmal ist der Normalfall (Login-artige Formulare). Formulare mit vielen
   Feldern nebeneinander tragen zusaetzlich .form-wide und behalten die
   volle Kartenbreite -- sonst bricht z. B. die Hashtag-Zeile in eine
   420 px schmale Saeule um. */
.card-wide form:not(.form-wide) {
  max-width: 420px;
  margin-top: 1rem;
}

.card-wide form.form-wide {
  margin-top: 1rem;
}

.card-wide .btn,
.card-wide .btn-danger {
  width: auto;
  padding: 0.75rem 1.5rem;
}

/* --- Design: Logo-Vorschau --- */

.logo-preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1rem 0 0.5rem;
}

@media (min-width: 640px) {
  .logo-preview-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

.logo-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
  padding: 1.5rem;
  min-height: 180px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.logo-preview img {
  display: block;
  max-width: 100%;
  max-height: 110px;
  width: auto;
  height: auto;
}

.logo-preview figcaption {
  font-size: 0.8rem;
  text-align: center;
}

.logo-preview-dark {
  background: var(--color-bg);
}

.logo-preview-dark figcaption {
  color: var(--color-text-muted);
}

.logo-preview-light {
  background: var(--color-text);
}

.logo-preview-light figcaption {
  color: var(--color-bg);
}

.logo-pill {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.logo-pill img {
  max-height: 80px;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 1.5rem;
}

.filter-chip {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.85rem;
}

.filter-chip.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.booking-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.booking-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  text-decoration: none;
  color: var(--color-text);
}

.booking-meta {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.booking-row-details {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.status-badge {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-neu {
  background: rgba(230, 25, 122, 0.18);
  color: #ff5fa8;
}

.status-kontakt_aufgenommen {
  background: rgba(255, 200, 87, 0.18);
  color: #ffc857;
}

.status-bestaetigt {
  background: rgba(87, 217, 163, 0.18);
  color: #57d9a3;
}

.status-abgelehnt,
.status-storniert {
  background: rgba(255, 107, 107, 0.18);
  color: var(--color-danger);
}

.status-abgeschlossen {
  background: rgba(183, 174, 194, 0.18);
  color: var(--color-text-muted);
}

.detail-grid {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
}

.detail-label {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.15rem;
}

.status-form {
  max-width: 420px;
}

.status-form select,
.status-form textarea {
  width: 100%;
  padding: 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
}

.status-form .field {
  margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
  .detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Galerie --- */

.gallery-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.gallery-header h1 {
  margin: 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}

@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gallery-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.gallery-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-surface-alt);
}

.gallery-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  border-bottom: 1px dashed var(--color-border);
}

.gallery-card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.gallery-card-body h3 {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--color-text);
}

.gallery-card-category {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Die Karte ist eine Flex-Spalte mit align-items:stretch -- ohne diese Zeile
   wird aus dem kompakten Abzeichen ein Balken ueber die ganze Kartenbreite. */
.gallery-card-body .status-badge {
  align-self: flex-start;
}

.gallery-card-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Ohne min-height:0 behaelt .btn die 3rem aus tokens.css, waehrend
   .btn-outline/.btn-danger daneben nur rund 35 px hoch sind -- die Knoepfe
   standen sichtbar versetzt in derselben Zeile. */
.gallery-card-actions .btn,
.gallery-card-actions .btn-outline,
.gallery-card-actions .btn-danger {
  width: auto;
  min-height: 0;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

/* Gleiche Geometrie wie .btn in tokens.css -- sonst steht der Loeschknopf
   in jeder Aktionszeile rund 14 px niedriger als seine Nachbarn. */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.55rem 1.45rem;
  border-radius: 999px;
  border: 1px solid var(--color-danger);
  background: transparent;
  color: var(--color-danger);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

.btn-danger:hover {
  background: var(--color-danger);
  color: #fff;
}

.status-draft {
  background: rgba(183, 174, 194, 0.18);
  color: var(--color-text-muted);
}

.status-published {
  background: rgba(87, 217, 163, 0.18);
  color: #57d9a3;
}

/* --- Galerie-Formular --- */

.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
}

.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.field textarea {
  resize: vertical;
}

.field input[type="file"] {
  width: 100%;
  padding: 0.6rem;
  border-radius: var(--radius);
  border: 1px dashed var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.field-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0.35rem 0 0;
}

.image-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.75rem;
  margin: 0.5rem 0 1.5rem;
}

.image-thumb {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

.image-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.image-thumb-actions {
  position: absolute;
  bottom: 0.35rem;
  right: 0.35rem;
  left: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* Flex-Items schrumpfen sonst nicht unter ihre Mindestbreite -- der
   "Entfernen"-Knopf ragte ueber den rechten Kachelrand hinaus. */
.image-thumb-actions form {
  flex: 1 1 auto;
  min-width: 0;
}

.btn-small {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--radius);
  border: none;
  background: rgba(20, 17, 26, 0.75);
  color: #fff;
  cursor: pointer;
}

.btn-small:hover {
  background: rgba(20, 17, 26, 0.95);
}

/* Die native Steuerleiste braucht rund 200 px; unter etwa 140 px
   ueberlagern sich Play-, Zeit- und Lautstaerkeelement. Das Seitenverhaeltnis
   haelt den Platz frei, bevor die Metadaten geladen sind (sonst Layoutsprung). */
.tiktok-video-thumb {
  width: 150px;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  background: var(--color-surface-alt);
}

.image-thumb-actions form:last-child .btn-small:hover {
  background: var(--color-danger);
}

/* --- Bewertungen --- */

.review-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.review-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}

.review-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  overflow-wrap: anywhere;
}

/* TikTok-Beschreibungen sind oft lange Hashtag-Ketten ohne Leerzeichen.
   Ohne min-width:0 waechst das Flex-Item ueber die Karte hinaus. */
.review-row-head > strong {
  flex: 1 1 auto;
  min-width: 0;
}

.review-row-head .status-badge {
  margin-left: auto;
}

/* Bei zwei Abzeichen nebeneinander wuerde der freie Platz auf beide
   Auto-Aussenabstaende verteilt -- sie standen mit grosser Luecke
   auseinander statt buendig rechts. */
.review-row-head .status-badge + .status-badge {
  margin-left: 0;
}

.review-stars {
  letter-spacing: 0.05em;
  color: var(--star-off);
  font-size: 1.05rem;
}

.review-stars .is-on {
  color: var(--star);
}

.review-row-photo {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius);
  margin: 0.75rem 0 0;
}

.review-row-body {
  margin: 0.75rem 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* Fliesstext unter einer Kartenueberschrift. Frueher wurde dafuer
   .review-row-meta benutzt -- das ist eine Flex-Chip-Zeile, in der jedes
   <span>/<small> zu einem eigenen Element mit 1.25rem Luecke wird (Loecher
   mitten im Satz) und <br> je nach Browser wirkt oder nicht. */
.sync-status {
  display: block;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.sync-status .status-error {
  color: var(--color-danger);
}

.review-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0 0 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.review-row-meta a {
  color: var(--color-text);
}

.status-pending {
  background: rgba(230, 25, 122, 0.18);
  color: #ff5fa8;
}

.status-approved {
  background: rgba(87, 217, 163, 0.18);
  color: #57d9a3;
}

.status-rejected {
  background: rgba(255, 107, 107, 0.18);
  color: var(--color-danger);
}

/* --- Blog-Editor --- */

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.editor-toolbar button {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}

.editor-toolbar button:hover {
  border-color: var(--color-accent);
}

.editor-body {
  min-height: 260px;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.6;
}

.editor-body:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.editor-body p {
  margin: 0 0 0.8em;
}

.editor-body h2,
.editor-body h3 {
  margin: 1em 0 0.4em;
  font-family: var(--font-heading);
}

.editor-body a {
  color: var(--color-accent);
}

.editor-body blockquote {
  margin: 0.8em 0;
  padding-left: 1rem;
  border-left: 3px solid var(--color-accent);
  color: var(--color-text-muted);
}

.editor-body ul,
.editor-body ol {
  padding-left: 1.4rem;
}

/* --- Kompakte Listenuebersicht, nach Monaten gruppiert (Galerie) ---
   Die Adminuebersicht ist eine Arbeitsliste, keine Schaufenster-Galerie:
   kleines Vorschaubild, eine Zeile pro Eintrag, Monate zum Aufklappen.
   <details> braucht dafuer kein JavaScript. */

.month-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.month-group > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  list-style: none;
}

/* Eigenes Dreieck, damit es in beiden Browsern gleich aussieht. */
.month-group > summary::-webkit-details-marker { display: none; }

.month-group > summary::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.2s;
}

.month-group[open] > summary::before {
  transform: rotate(90deg);
}

.month-group > summary:hover {
  background: var(--color-surface-alt);
}

.month-count {
  margin-left: auto;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
}

.item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.item-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
}

.item-row:last-child {
  border-bottom: 0;
}

.item-thumb {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--color-surface-alt);
}

.item-thumb-empty {
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
}

.item-main {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  /* Ohne min-width:0 sprengen lange Titel die Zeile. */
  min-width: 0;
  flex: 1 1 auto;
}

.item-title {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.item-title:hover {
  color: var(--color-accent);
}

.item-meta {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.item-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
}

.btn-compact {
  width: auto;
  min-height: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

@media (max-width: 720px) {
  /* Listen am Handy (15.09.2026): feste Plaetze statt Umbruch je nach
     Titellaenge -- Text links, Betrag rechts, Status immer darunter, Knoepfe
     immer in eigener Zeile. Vorher sprang die Status-Pille bei langen Titeln.
     Zeilen mit Vorschaubild tragen zusaetzlich .item-row-mit-bild. */
  .item-row {
    display: grid;
    grid-template-columns: [text] minmax(0, 1fr) [betrag] auto;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
    align-items: start;
    padding-block: 0.8rem;
  }
  .item-row[hidden] { display: none; }
  .item-row > .item-main { grid-column: text; grid-row: 1; }
  .item-row > .status-badge { grid-column: text; grid-row: 2; justify-self: start; }
  .item-row > .item-betrag { grid-column: betrag; grid-row: 1; text-align: right; }
  .item-row > .item-actions { grid-column: 1 / -1; grid-row: 3; flex-wrap: wrap; margin-top: 0.25rem; }

  .item-row-mit-bild { grid-template-columns: [bild] 48px [text] minmax(0, 1fr) [betrag] auto; }
  .item-row-mit-bild > .item-thumb { grid-column: bild; grid-row: 1 / span 2; }
}

/* --- Besucherstatistik --- */

.unit-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.unit-switch .is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.stat-bars {
  width: 100%;
  border-collapse: collapse;
}

.stat-bars th,
.stat-bars td {
  padding: 0.3rem 0.5rem 0.3rem 0;
  text-align: left;
  font-weight: 400;
  vertical-align: middle;
}

.stat-bars th {
  width: 1%;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Der Balken selbst ist Dekoration -- die Zahl daneben traegt die Information,
   deshalb steht er als aria-hidden im Markup. */
.stat-bar {
  display: block;
  min-width: 2px;
  height: 0.7rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-accent), #ff5aa5);
}

.stat-bar-value {
  width: 1%;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

/* Blaettern zwischen den Tagen ueber der Zeitachse. */
.tag-blaettern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.tag-aktuell {
  flex: 1 1 auto;
  text-align: center;
  font-size: 1.02rem;
}

/* Kein Vortag/Folgetag vorhanden: der Knopf bleibt stehen, damit die Zeile
   nicht springt, ist aber sichtbar tot. */
.tag-blaettern .is-aus {
  opacity: .35;
  cursor: default;
}

/* ---- Zeitachse: Besuche nach Uhrzeit --------------------------------
   24 Saeulen nebeneinander. Bewusst kein Diagramm-Skript: die Hoehe steht
   als Prozentwert im style-Attribut, das kostet kein Kilobyte JavaScript
   und funktioniert auch, wenn im Admin mal etwas blockiert wird. */
.stunden-achse {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 170px;
  margin-top: 1.2rem;
  padding-bottom: 1.3rem;   /* Platz fuer die Stundenzahlen darunter */
}

.stunde {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  height: 100%;
}

.stunde-zahl {
  font-size: .62rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--color-text-muted);
  margin-bottom: .25rem;
}

/* Der Behaelter nimmt den Platz unter der Zahl ein. Die Saeule sitzt darin
   absolut am Boden -- so bezieht sich ihre Prozenthoehe auf diesen Platz und
   wird nicht vom Flex-Layout gestaucht. */
.stunde-saeule {
  position: relative;
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

.stunde-balken {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #ff5aa5, var(--color-accent));
  /* Die Hoehe kommt aus dem style-Attribut, hier steht nur das Aussehen. */
}

/* Stunden ohne Besuch: ein Strich auf der Grundlinie, damit die Achse
   durchgehend lesbar bleibt statt an manchen Stellen abzureissen. */
.stunde.is-leer .stunde-balken {
  background: var(--color-border);
}

.stunde.is-spitze .stunde-balken {
  background: linear-gradient(180deg, #ffd166, var(--color-accent));
}
.stunde.is-spitze .stunde-zahl {
  color: var(--color-text);
  font-weight: 600;
}

.stunde-marke {
  position: absolute;
  bottom: -1.15rem;
  font-size: .62rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.stunden-fuss {
  margin-top: .4rem;
  text-align: center;
}

@media (max-width: 640px) {
  .stunden-achse { height: 130px; gap: 1px; }
  .stunde-zahl { display: none; }   /* zu eng fuer 24 Zahlen nebeneinander */
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.detail-empty {
  color: var(--color-text-muted);
}

/* --- Kleine Buchhaltung --- */

/* Positionszeile im Rechnungsformular: auf breiten Schirmen nebeneinander,
   auf schmalen untereinander. */
.position-zeile {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.position-zeile .field { flex: 1 1 14rem; margin-bottom: 0.6rem; }
.position-zeile .field-schmal { flex: 0 1 7rem; }
/* Leere Beschriftungen ab der zweiten Zeile nehmen sonst trotzdem Platz weg. */
.position-zeile .field label:empty { display: none; }

.item-betrag {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.betrag-plus { color: #4ade80; }
.betrag-minus { color: var(--color-text-muted); }

/* Kleinunternehmergrenze */
.grenze-balken {
  height: 0.85rem;
  margin: 0.5rem 0 0.6rem;
  border-radius: 999px;
  background: var(--color-surface-alt);
  overflow: hidden;
}
.grenze-fuellung {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-accent), #ff5aa5);
  transition: width 0.4s var(--ease, ease);
}
.ampel-gelb .grenze-fuellung { background: linear-gradient(90deg, #d97706, #fbbf24); }
.ampel-rot .grenze-fuellung { background: linear-gradient(90deg, #b91c1c, #ef4444); }

.grenze-text { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); }
.grenze-text.ampel-gelb { color: #fbbf24; }
.grenze-text.ampel-rot { color: #ef4444; }

/* Positionstabelle in der Rechnungsansicht */
.rechnung-tabelle { width: 100%; border-collapse: collapse; }
.rechnung-tabelle th,
.rechnung-tabelle td {
  padding: 0.5rem 0.4rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.rechnung-tabelle thead th { color: var(--color-text-muted); font-size: 0.82rem; font-weight: 600; }
.rechnung-tabelle .rechts { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rechnung-tabelle tfoot th { border-bottom: 0; border-top: 2px solid var(--color-border); font-size: 1.05rem; }

/* --- Empfehlungen (Affiliate) --- */

/* Anzahl neben einer Abschnitts-Ueberschrift. */
.anzahl-chip {
  display: inline-grid;
  place-items: center;
  min-width: 1.6rem;
  margin-left: .5rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-family: var(--mono, monospace);
  font-size: .72rem;
  font-weight: 400;
  vertical-align: middle;
}

/* Vorschau eines schon hinterlegten oder gerade ausgelesenen Bildes. */
.vorschau-bild {
  display: block;
  max-width: 180px;
  height: auto;
  margin-bottom: .6rem;
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 10px;
  background: #fff;
}

/* Einzeiliges Formular (Link einlesen): bricht auf schmalen Schirmen um. */
.form-inline { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.form-inline .field { flex: 1 1 14rem; margin: 0; }
.form-inline button { flex: 0 0 auto; }

/* Kontrollkaestchen mit Beschriftung daneben statt darueber. */
.field-check label { display: flex; align-items: center; gap: .55rem; cursor: pointer; }
.field-check input[type="checkbox"] { width: 1.1rem; height: 1.1rem; margin: 0; }

/* Zwei Felder nebeneinander (PLZ + Ort). Bricht auf schmalen Schirmen um. */
.field-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.field-row .field { flex: 1 1 10rem; }

/* --- Hinweis, wenn während des Betrachtens eine Anfrage eintrifft --- */
/*
 * Liegt die Terminliste offen und kommt eine neue Anfrage herein, ändert sich
 * die Liste selbst nicht. Nur die Zahl oben hochzuzählen übersieht man leicht;
 * die Seite ungefragt neu zu laden wäre dagegen übergriffig -- Evi könnte
 * gerade etwas tippen. Deshalb dieser Streifen mit einem Knopf: sie entscheidet,
 * wann neu geladen wird.
 */
.app-neu-hinweis {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* Über der unteren Navigation auf dem Handy, plus Geräte-Sicherheitsabstand. */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 4.75rem);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem 0.75rem 0.6rem 1rem;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-danger);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
  font-size: 0.9rem;
}

@media (min-width: 900px) {
  /* Am Rechner sitzt die Navigation oben -- der Streifen darf ganz nach unten. */
  .app-neu-hinweis { bottom: 1.5rem; }
}

/* --- Zeichenzähler mit Zielbereich --- */
/*
 * Nur zwei Zustände, bewusst keine Ampel mit drei Farben: entweder der Text
 * liegt im Zielbereich oder nicht. Eine dritte Stufe würde eine Genauigkeit
 * suggerieren, die es nicht gibt.
 */
[data-zaehler-zustand] { font-variant-numeric: tabular-nums; font-weight: 700; }
[data-zaehler-zustand="gut"] { color: #57d9a3; }
[data-zaehler-zustand="daneben"] { color: var(--color-accent); }

/* --- KI-Schreibhilfe im Galerie-Formular --- */

[data-ki-zustand="fehler"] { color: var(--color-danger); }

/* Die Merkmalsliste. Es gibt eine gleichnamige Klasse in site.css, aber der
   Adminbereich lädt site.css nicht -- ohne diese Regeln stünde die Liste als
   nackte Aufzählung da, und die Markierung "unsicher" wäre unsichtbar. */
.app-main .tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}
.app-main .tags li {
  padding: .35rem .8rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-alt);
  font-size: .85rem;
}

/*
 * Merkmale, bei denen die KI selbst unsicher war. Nicht rot: es ist kein
 * Fehler, sondern eine Bitte hinzusehen. Rot wäre nach dem dritten Mal
 * Hintergrundrauschen.
 */
.app-main .tags li[data-ki-unsicher] {
  border-color: var(--color-accent);
  border-style: dashed;
  color: var(--color-text);
}
.app-main .tags li[data-ki-unsicher]::after {
  content: " ?";
  color: var(--color-accent);
  font-weight: 700;
}

/* Der Beleg, woran die KI das Finish festmacht. Kleiner und blasser als das
   Merkmal selbst -- er soll lesbar sein, aber nicht mit ihm konkurrieren. */
.app-main .tags li .ki-beleg {
  color: var(--color-text-muted);
  font-size: .92em;
}

/* --- Posteingang (/admin/postfach) -------------------------------------
   Drei Postfaecher untereinander, je eine Liste aus Absender, Betreff und
   Datum. Auf dem Handy stapeln sich die drei Angaben, auf dem Schreibtisch
   stehen sie nebeneinander -- der Betreff bekommt dabei den Platz, weil er
   die Frage "muss ich da ran?" beantwortet. */
.postfach-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.postfach-kopf h2 {
  margin: 0;
}

.postfach-stand {
  margin: .35rem 0 0;
  font-size: .8rem;
  color: var(--color-text-muted);
}

.postfach-zahl {
  margin-left: .5rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-accent);
  white-space: nowrap;
}

.postfach-liste {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.postfach-liste li {
  display: grid;
  gap: .1rem .75rem;
  padding: .6rem 0;
  border-top: 1px solid var(--color-border);
}

.postfach-liste li:first-child {
  border-top: 0;
}

.postfach-von {
  font-size: .85rem;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.postfach-betreff {
  overflow-wrap: anywhere;
}

.postfach-liste .ist-ungelesen .postfach-betreff {
  font-weight: 600;
}

.postfach-datum {
  font-size: .8rem;
  color: var(--color-text-muted);
}

@media (min-width: 40rem) {
  .postfach-liste li {
    grid-template-columns: 14rem 1fr auto;
    align-items: baseline;
  }
}

/* Auswahlfeld ueber der Leistungsbezeichnung in der Rechnung. Sitzt bewusst
   UEBER dem Textfeld und nicht daneben: es fuellt dieses Feld, und die
   Reihenfolge soll das zeigen. */
.pos-vorlage {
  margin-bottom: .35rem;
  font-size: .85rem;
}

/* --- Gemeinsame Bausteine (13.09.2026) ----------------------------------
   Anlass: im Adminbereich lief Text ueber Knoepfe hinaus. Ursache war nicht
   der Knopf, sondern die Zeile daneben: Eingabefelder AUSSERHALB von .field
   hatten gar keine Grundregel -- also flickte jede Vorlage sie mit einem
   Inline-Stil zurecht (ueber 130 Stueck), und in einer Flex-Zeile ohne
   Umbruch schrumpften sie nicht unter ihre natuerliche Breite. Der Knopf
   wurde aus der Karte geschoben.

   Diese Bausteine ersetzen die Inline-Stile:
     .zeile     Felder und Knopf nebeneinander, bricht auf dem Handy um
     .aktionen  eine Reihe Knoepfe
     .btn-klein Knopf in einer Listenzeile */

.app-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
.app-main select,
.app-main textarea {
  max-width: 100%;
  padding: 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
}

.app-main select:focus,
.app-main textarea:focus,
.app-main input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
}

/* min-width:0 ist die eigentliche Reparatur: ohne sie behaelt ein Feld in
   einer Flex-Zeile seine natuerliche Breite und schiebt alles daneben aus
   dem Bild. */
.zeile > input,
.zeile > select,
.zeile > textarea,
.zeile > .field {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
}

.zeile > .btn,
.zeile > .btn-danger,
.zeile > button {
  flex: none;
}

/* Die 420-px-Grenze fuer schmale Formulare gilt nicht fuer Zeilen. */
.card-wide form.zeile {
  max-width: none;
}

.aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.abstand-unten { margin-bottom: 1.5rem; }

.app-main .btn,
.app-main .btn-danger {
  max-width: 100%;
}

.btn-klein,
.card-wide .btn-klein {
  min-height: 0;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* --- Social Media (/admin/social) ----------------------------------------
   Aufbau: Verbindungen als Kacheln, "Zu erledigen" nur bei Bedarf, darunter
   drei Bereiche mit Sprungleiste. Pro Video eine kompakte Zeile; alles, was
   man selten braucht, klappt auf. */

.plattformen {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .plattformen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.plattform {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
}

.plattform.ist-verbunden { border-color: rgba(87, 217, 163, 0.45); }
.plattform.ist-geplant { opacity: 0.7; }

.plattform-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.plattform-text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.plattform form { margin: 0; max-width: none; }
.plattform .btn { align-self: flex-start; }

.zaehler {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--on-accent, #fff);
  font-family: inherit;
  font-size: 0.8rem;
  vertical-align: middle;
}

/* Sprungleiste: klebt beim Scrollen oben, damit man auf dem Handy nicht
   durch alle Videos zurueck muss. */
.unterbereiche {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 0.4rem;
  margin: 1.5rem 0 0.5rem;
  padding: 0.6rem 0;
  overflow-x: auto;
  background: var(--color-bg);
  scrollbar-width: none;
}

/* Kompakt genug, dass alle drei Chips auf 390 px nebeneinander passen --
   ein abgeschnittener letzter Chip sah aus wie ein Fehler, auch wenn man
   seitlich haette schieben koennen. */
.unterbereiche a {
  flex: none;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
}

.unterbereiche a:hover { border-color: var(--color-accent); }

/* Sprungziele nicht unter der klebenden Leiste verstecken. */
.bereich { scroll-margin-top: 4.5rem; }

.medien-liste {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.medien-liste .card-wide { margin: 0; }

.medien-eintrag {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

/* Auf dem Handy fressen 2 rem Innenabstand je Seite den Platz, den der Text
   neben dem Vorschaubild braucht -- die Zeile lief rechts aus dem Bild. */
@media (max-width: 720px) {
  .card.medien-eintrag { padding: 1rem; }
  .medien-eintrag { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.7rem; }
}

.zu-erledigen .medien-eintrag + .medien-eintrag {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.medien-bild {
  width: 100%;
  /* height: auto ist hier der entscheidende Punkt. Die Vorschaubilder bringen
     ihre Groesse als Attribute mit (width="720" height="1280"), und ein
     Attribut schlaegt die aspect-ratio, solange die Hoehe nicht ausdruecklich
     auf auto steht. Ohne diese Zeile wurde das Bild 104 Pixel breit und 1280
     hoch gerechnet -- lang gezogen ueber die halbe Seite (gemessen 16.09.2026). */
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
  background: var(--color-surface-alt);
}

/* TikToks Titelbilder sind 3:4, unsere eigenen Videodateien 9:16. Beide in
   denselben Rahmen zu zwingen heisst, eines von beiden unnoetig zu
   beschneiden -- also bekommt jede Sorte ihr eigenes Format. Innerhalb eines
   Abschnitts sind ohnehin alle gleich. */
img.medien-bild { aspect-ratio: 3 / 4; }
video.medien-bild { aspect-ratio: 9 / 16; background: #000; }

.medien-inhalt {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.medien-inhalt form { margin: 0; max-width: none; }

/* Lange TikTok-Beschreibungen auf drei Zeilen kuerzen -- vollstaendig
   stehen sie beim Bearbeiten. */
.medien-titel {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.medien-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.medien-warnung {
  margin: 0;
  color: var(--color-danger);
  font-size: 0.85rem;
}

.plattform-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}

/* Jede Plattform als eigene Gruppe mit Rand: vorher standen "TikTok",
   "Im TikTok-Postfach", "YouTube" und "Online" in einer Zeile nebeneinander
   und man musste raten, welcher Stand zu welcher Plattform gehoert. */
.plattform-status li {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-alt);
}

.plattform-name { color: var(--color-text-muted); }

.aufklapper > summary {
  cursor: pointer;
  color: var(--color-accent);
  font-size: 0.9rem;
  list-style-position: inside;
}

.card-wide.aufklapper > summary {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-text);
}

.aufklapper-inhalt {
  margin-top: 0.9rem !important;
}

.aufklapper-inhalt + .aufklapper-inhalt {
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
}

.aufklapper-loeschen {
  margin-top: 1rem !important;
}

.leer-hinweis {
  color: var(--color-text-muted);
}

.feld-schmal { max-width: 8rem; }

@media (min-width: 720px) {
  .medien-eintrag { grid-template-columns: 8.5rem minmax(0, 1fr); }
}

/* Feldbreiten in einer .zeile: eine Prioritaet braucht keine 12rem, die
   Stichwoerter duerfen den Rest nehmen. */
.zeile > .field.ist-schmal { flex: 0 1 6rem; }
.zeile > .field.ist-mittel { flex: 0 1 10rem; }
.zeile > .field.ist-breit { flex: 2 1 16rem; }
.zeile > .field input,
.zeile > .field select { width: 100%; }

/* Ankreuzfeld in einer Zeile auf Hoehe der Eingabefelder ausrichten. */
.zeile > .zeile-check { flex: none; margin: 0 0 0.8rem; }

.zaehler-leise {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* --- Hashtags (/admin/tiktok/hashtags) --- */

.hashtag-eintrag {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hashtag-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* --- Video-Generator (/admin/tiktok/videos/neu/...) ---
   Links die Vorschau, rechts die Einstellungen; auf dem Handy untereinander,
   die Vorschau dann mittig. */

.generator {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.generator-vorschau {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.generator-canvas,
.generator-video {
  display: block;
  width: 180px;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  border-radius: 12px;
  background: #100d15;
}

.generator-einstellungen {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.generator-einstellungen .card-wide form:not(.form-wide),
.generator-einstellungen form { max-width: none; margin: 0; }

.generator-link { font-size: 0.9rem; }

/* Wie viele Fotos eine Vorlage nutzt -- und die Warnung, wenn die Arbeit
   weniger hat. Die Marke steht bewusst vor dem Satz: sie ist die Antwort auf
   "reicht das hier?", der Satz nur die Begruendung. */
.vorlage-fotos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.35rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.vorlage-marke {
  flex: none;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-size: 0.8rem;
  white-space: nowrap;
}

.vorlage-fotos [hidden] { display: none; }

/* Textfaecher der Vorlage: je Fach ein Feld, darunter Zaehler und -- wenn es
   nicht mehr passt -- die Warnung, statt dass das Video still kuerzt. */
.video-texte .aufklapper-inhalt { display: grid; gap: 0.9rem; }

.video-text { margin: 0; }

.video-text input { width: 100%; }

.video-text input.ist-zu-lang { border-color: var(--color-danger); }

.video-text .field-hint { margin-top: 0.25rem; }

.video-text-warnung {
  margin: 0.25rem 0 0;
  color: var(--color-danger);
  font-size: 0.85rem;
  line-height: 1.45;
}

.generator-status {
  min-height: 1.5em;
  margin: 0;
  color: var(--color-text-muted);
}

@media (min-width: 720px) {
  .generator { grid-template-columns: auto minmax(0, 1fr); }
  .generator-vorschau { align-items: flex-start; }
}

/* --- Veroeffentlichen (Social Media) ---------------------------------------
   Ein Haken je verbundener Plattform, darunter der Stand je Plattform. */

.veroeffentlichen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  max-width: none;
  margin: 0;
}

.ziele {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ziele legend {
  margin: 0 0 0.35rem;
  padding: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.ziel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 1rem 0.35rem 0;
  cursor: pointer;
}

.ziel[hidden] { display: none; }
.ziel input { margin: 0; }
.ziel small { color: var(--color-text-muted); }

.generator-ziele { margin: 0.25rem 0 1rem; }

.veroeffentlichen-stand {
  flex-basis: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  line-height: 1.45;
}

.veroeffentlichen-stand li { margin: 0.2rem 0; }
.veroeffentlichen-stand .ist-laeuft { color: var(--color-text-muted); }
.veroeffentlichen-stand .ist-ok { color: #57d9a3; }
.veroeffentlichen-stand .ist-fehler { color: var(--color-danger); }

.plattform-klein {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Eigene Videos ohne Datei auf dem Server: sagen statt schwarz zeigen. */
.medien-fehlt {
  display: grid;
  place-items: center;
  padding: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  text-align: center;
}

/* --- Musik im Video-Generator ------------------------------------------------
   Kategorien als Knoepfe, darunter die Auswahl der Kategorie, darunter der
   gewaehlte Titel mit Startpunkt. */

.musik-label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.musik-kategorien {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.app-main .musik-kategorie {
  min-height: 0;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.app-main .musik-kategorie[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: rgba(236, 72, 153, 0.16);
}

.musik-liste {
  display: grid;
  gap: 0.35rem;
  max-height: 22rem;
  margin: 0.6rem 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.musik-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.musik-zeile.ist-gewaehlt { border-color: var(--color-accent); }

.musik-aktionen { margin-top: 0.5rem; }

.musik-info {
  display: grid;
  flex: 1 1 12rem;
  min-width: 0;
}

.musik-info strong { overflow-wrap: anywhere; }

.musik-meta {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.musik-gewaehlt {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius);
  background: var(--color-surface-alt);
}

.musik-name {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

/* --- Matze, der Schreib-Chat (templates/admin/matze/) --------------------
   Aufgebaut wie ein Messenger (Matthias, 14.09.2026: "mehr Richtung
   WhatsApp" und "Chat und Vorschlag brauchen klare Abgrenzung"):
   - Das Gespraech hat einen eigenen, dunkleren Grund mit feinem Muster, oben
     Name und Status, unten die Eingabe -- alles in einem Rahmen, der selbst
     scrollt, statt die ganze Seite zu verschieben.
   - Evi rechts in Beere, Matze links in Grau, Sprueche gestrichelt.
   - Der ENTWURF steht darunter auf hellem Papier. Auf dem dunklen Admin
     sieht man sofort: das ist der Text, nicht das Gespraech. */

.matze { margin: 1.2rem 0; }

.matze-chat {
  --chat-grund: #0b141a;
  --chat-kopf: #1f2c34;
  --chat-feld: #2a3942;
  --chat-matze: #202c33;
  --chat-evi: #7a1c4d;
  --chat-text: #e9edef;
  --chat-leise: #8696a0;
  --chat-linie: #26343c;
  display: flex;
  flex-direction: column;
  height: min(72vh, 640px);
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--chat-linie);
  border-radius: var(--radius-lg);
  background: var(--chat-grund);
  color: var(--chat-text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Kopf */
.matze-chat-kopf {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem 0.55rem 0.9rem;
  border-bottom: 1px solid var(--chat-linie);
  background: var(--chat-kopf);
}
.matze-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5aa5, #7c4dff);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
}
.matze-chat-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.matze-chat-name strong { font-size: 1rem; }
.matze-status { overflow: hidden; color: var(--chat-leise); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.matze-kopf-knopf {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--chat-leise);
  cursor: pointer;
}
.matze-kopf-knopf:hover { background: rgba(255, 255, 255, 0.07); color: var(--chat-text); }
.matze-kopf-knopf svg { width: 1.25rem; height: 1.25rem; }
.matze-kopf-knopf[aria-pressed="false"] .matze-ton-an,
.matze-kopf-knopf[aria-pressed="true"] .matze-ton-aus { display: none; }

/* Verlauf */
.matze-chat-verlauf {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.8rem 0.9rem 0.5rem;
  background-color: var(--chat-grund);
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1.2px),
    radial-gradient(rgba(255, 90, 165, 0.045) 1px, transparent 1.2px);
  background-position: 0 0, 11px 17px;
  background-size: 22px 22px, 38px 38px;
}
.matze-tag { margin: 0.1rem 0 0.8rem; text-align: center; }
.matze-tag span { display: inline-block; padding: 0.2rem 0.75rem; border-radius: 0.5rem; background: #182229; color: var(--chat-leise); font-size: 0.75rem; }
.matze-verlauf { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0 2.3rem; list-style: none; }

/* Avatare: im Kopf und an der ersten Blase einer Reihe */
img.matze-avatar { object-fit: cover; padding: 0; background: #1f2c34; }
.matze-blase-avatar { position: absolute; top: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; object-fit: cover; }
.matze-blase[data-rolle="matze"] > .matze-blase-avatar,
.matze-blase[data-rolle="spruch"] > .matze-blase-avatar { left: -2.4rem; }
.matze-blase[data-rolle="evi"] > .matze-blase-avatar,
.matze-blase[data-rolle="evi_roast"] > .matze-blase-avatar { right: -2.4rem; }
.matze-avatare { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.matze-avatar-karte { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; }
.matze-avatar-gross { width: 4.5rem; height: 4.5rem; border-radius: 50%; font-size: 1.8rem; }
.matze-alte-hilfe { margin-top: 0.6rem; }

.matze-blase {
  position: relative;
  max-width: min(80%, 34rem);
  padding: 0.4rem 0.6rem 0.3rem;
  border-radius: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
/* Zeilenumbrueche nur im Text selbst -- auf der ganzen Blase erzeugte der
   Zeilenumbruch in der Vorlage eine leere erste Zeile. */
.matze-blase-text { white-space: pre-line; }
.matze-blase::after { content: ""; display: block; clear: both; }
.matze-zeit { float: right; margin: 0.4rem 0 -0.1rem 0.7rem; color: rgba(233, 237, 239, 0.6); font-size: 0.68rem; white-space: nowrap; }
.matze-haken { margin-left: 0.25rem; letter-spacing: -0.2em; }
.matze-haken.ist-gelesen { color: #53bdeb; }

.matze-blase[data-rolle="matze"],
.matze-blase[data-rolle="spruch"] { align-self: flex-start; border-top-left-radius: 0; background: var(--chat-matze); }
.matze-blase[data-rolle="evi"],
.matze-blase[data-rolle="evi_roast"] { align-self: flex-end; border-top-right-radius: 0; background: var(--chat-evi); }

/* Die kleinen Zipfel oben an den Blasen */
.matze-blase[data-rolle="matze"]::before,
.matze-blase[data-rolle="spruch"]::before { content: ""; position: absolute; top: 0; left: -0.45rem; border-top: 0.55rem solid var(--chat-matze); border-left: 0.5rem solid transparent; }
.matze-blase[data-rolle="evi"]::before,
.matze-blase[data-rolle="evi_roast"]::before { content: ""; position: absolute; top: 0; right: -0.45rem; border-top: 0.55rem solid var(--chat-evi); border-right: 0.5rem solid transparent; }

.matze-blase[data-rolle="spruch"] { outline: 1px dashed rgba(255, 90, 165, 0.6); outline-offset: -1px; font-style: italic; }
.matze-blase-marke { display: block; margin-bottom: 0.1rem; color: #ff7ab8; font-size: 0.72rem; font-style: normal; font-weight: 700; }
.matze-blase[data-rolle="evi_roast"] .matze-blase-text::before { content: "🔥 "; }
.matze-spruch-aus {
  display: block;
  clear: both;
  margin-top: 0.15rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--chat-leise);
  font-size: 0.72rem;
  font-style: normal;
  text-decoration: underline;
  cursor: pointer;
}
.matze-blase.ist-aus { opacity: 0.5; }

/* Listen im Chat: was Matze sieht, Warnungen, Ergaenzungen */
.matze-blase ul { margin: 0.15rem 0 0.1rem; padding-left: 1.15rem; }
.matze-blase ul li { margin: 0.12rem 0; }
.matze-blase-liste .matze-blase-marke { color: var(--chat-leise); }
.matze-blase li[data-ki-unsicher] { text-decoration: underline dashed #ff7ab8; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.matze-blase li[data-ki-unsicher]::after { content: " ?"; color: #ff7ab8; font-weight: 700; }
.matze-blase-fuss { display: block; margin-top: 0.25rem; color: var(--chat-leise); font-size: 0.75rem; }
.matze-blase.matze-blase-warnung { background: #3a2c14; }
.matze-blase.matze-blase-warnung::before { border-top-color: #3a2c14; }
.matze-blase-warnung .matze-blase-marke { color: #ffd279; }

.matze-system { align-self: center; margin: 0.35rem 0; }
.matze-system-knopf { padding: 0.3rem 0.85rem; border: 0; border-radius: 0.5rem; background: #182229; color: #ffd279; font-size: 0.8rem; cursor: pointer; }
.matze-system-knopf:hover { background: #1f2c34; }

.matze-tippt { display: flex; gap: 0.28rem; padding: 0.65rem 0.8rem; }
.matze-tippt::after { display: none; }
.matze-tippt span { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--chat-leise); animation: matze-punkt 1.2s infinite ease-in-out; }
.matze-tippt span:nth-child(2) { animation-delay: 0.15s; }
.matze-tippt span:nth-child(3) { animation-delay: 0.3s; }
@keyframes matze-punkt {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .matze-tippt span { animation: none; opacity: 0.7; }
}

/* Schnellantworten, Auswahl, Konter */
.matze-schnell,
.matze-schnell-innen { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.matze-schnell { padding: 0.5rem 0.9rem 0.6rem; border-top: 1px solid rgba(255, 255, 255, 0.04); background: var(--chat-grund); }
.matze-schnell[hidden] { display: none; }
.matze-chip {
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--chat-feld);
  border-radius: 999px;
  background: var(--chat-kopf);
  color: var(--chat-text);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.matze-chip:hover { border-color: #ff5aa5; }
.matze-chip.ist-haupt { border-color: transparent; background: var(--color-accent); color: #fff; font-weight: 600; }
.matze-chip:disabled { cursor: default; opacity: 0.5; }

.matze-leiste { padding: 0.55rem 0.9rem; border-top: 1px solid var(--chat-linie); background: var(--chat-kopf); }
.matze-leiste label,
.matze-leiste p { display: block; margin: 0 0 0.35rem; color: var(--chat-leise); font-size: 0.8rem; }
.matze .matze-leiste select,
.matze .matze-leiste input { width: 100%; margin: 0; border: 0; background: var(--chat-feld); color: var(--chat-text); }
.matze-eigener-konter { display: flex; gap: 0.4rem; margin-top: 0.45rem; }
.matze-eigener-konter input { flex: 1; min-width: 0; }

/* Eingabe */
.matze-eingabe { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.55rem 0.65rem; background: var(--chat-kopf); }
.matze .matze-eingabe textarea {
  flex: 1;
  min-width: 0;
  min-height: 2.6rem;
  max-height: 9rem;
  margin: 0;
  padding: 0.62rem 1rem;
  border: 0;
  border-radius: 1.3rem;
  background: var(--chat-feld);
  color: var(--chat-text);
  line-height: 1.35;
  resize: none;
}
.matze .matze-eingabe textarea::placeholder { color: var(--chat-leise); }
.matze .matze-eingabe textarea:disabled { opacity: 0.6; }
.matze-rund { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
.matze-senden { background: var(--color-accent); color: #fff; }
.matze-senden:hover { background: var(--color-accent-hover); }
.matze-senden svg { width: 1.15rem; height: 1.15rem; margin-left: 0.15rem; }
.matze-senden:disabled { opacity: 0.55; }
.matze-roast-knopf { background: var(--chat-feld); font-size: 1.15rem; }
.matze-roast-knopf[hidden] { display: none; }

.matze-hinweis { min-height: 1.2em; margin: 0.45rem 0.2rem 0; font-size: 0.85rem; }

/* --- Der Entwurf: helles Papier, klar getrennt vom Gespraech --- */
.matze-entwurf {
  margin-top: 1rem;
  padding: 1rem 1.15rem 1.15rem;
  border-top: 5px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: #fbf6ef;
  color: #231a27;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
/* Helles Papier: Radio und Textfeld hell zeichnen, nicht im Admin-Dunkel. */
.matze-entwurf { color-scheme: light; }
.matze-entwurf[hidden] { display: none; }
.matze-entwurf-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.6rem; }
.matze-entwurf-titelzeile { color: #231a27; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; }
.matze-entwurf-stand { padding: 0.15rem 0.65rem; border-radius: 999px; background: #f3dbe6; color: #8a1147; font-size: 0.75rem; font-weight: 700; }
.matze-entwurf p,
.matze-entwurf li,
.matze-entwurf .check { color: #231a27; }
.matze-entwurf .detail-label,
.matze-entwurf .field-hint,
.matze-entwurf .matze-zaehler { color: #6b5d6f; }
.matze-entwurf-titel { margin: 0.3rem 0 0.35rem; font-size: 1.08rem; font-weight: 700; }
.matze-entwurf-text { margin: 0 0 0.6rem; line-height: 1.5; }
.matze-zaehler { font-size: 0.85em; }
.matze .matze-entwurf textarea { width: 100%; border: 1px solid #d9cdd4; background: #fff; color: #231a27; }
.matze-inhalt { margin: 0.8rem 0; padding: 0.8rem 1rem; border: 1px solid #eadfd3; border-radius: var(--radius); background: #fff; line-height: 1.55; }
.matze-inhalt h2 { margin: 0.9rem 0 0.35rem; color: #231a27; font-size: 1.1rem; }
.matze-inhalt h3 { margin: 0.7rem 0 0.3rem; font-size: 1rem; }
.matze-inhalt a { color: #b0125f; }
.app-main .matze-entwurf .tags li { border-color: #d9cdd4; background: #fff; color: #231a27; }
.app-main .matze-entwurf .tags li[data-ki-unsicher] { border-color: #b0125f; }
.matze-entwurf .btn-outline { border-color: #cbbac4; background: transparent; color: #231a27; }
.matze-entwurf .btn-outline:hover { background: #f1e6ea; }
.matze-entwurf .aufklapper > summary { color: #231a27; }
.matze-warnungen { margin: 0.6rem 0; padding: 0.6rem 0.9rem 0.6rem 1.8rem; border: 1px solid #f3c7b6; border-radius: var(--radius); background: #fff1ec; color: #8a2c0d; }
.matze-warnungen li { color: #8a2c0d; }

@media (max-width: 720px) {
  /* Handy (15.09.2026): der Chat fuellt genau den Platz zwischen Kopf und Leiste unten.
     Vorher war er 4rem kleiner -- dann scrollte mal die Seite, mal der Verlauf. */
  .matze-chat { height: calc(100dvh - 8.4rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 340px; border-radius: var(--radius); scroll-margin-top: 4.1rem; }
  .matze-verlauf { padding: 0 2.1rem; }
  .matze-blase { max-width: 88%; }
}

/* --- Seite "Matze" (Gedaechtnis) --- */
.matze-regel,
.matze-beispiel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}
.matze-regel p,
.matze-beispiel p { flex: 1 1 18rem; min-width: 0; margin: 0; }
.matze-beispiel.ist-aus { opacity: 0.55; }
.matze-tabelle { overflow-x: auto; }
.matze-gags { margin: 0; padding-left: 1.2rem; }

/* Wunschdesign am Termin (14.09.2026): kleines Vorschaubild unter dem Titel. */
.termin-wunschdesign img {
  display: block;
  width: 7rem;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-top: .45rem;
  border-radius: 10px;
}

/* --- Diktat bei Matze (14.09.2026): Mikrofon neben "Senden" --- */
.matze-mikro { background: var(--chat-feld); color: inherit; }
.matze-mikro[hidden] { display: none; }
.matze-mikro svg { width: 1.2rem; height: 1.2rem; }
.matze-mikro[aria-pressed="true"] { background: var(--color-accent); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
    .matze-mikro[aria-pressed="true"] { animation: matze-zuhoeren 1.4s ease-in-out infinite; }
}
@keyframes matze-zuhoeren {
    50% { box-shadow: 0 0 0 0.4rem color-mix(in srgb, var(--color-accent) 25%, transparent); }
}
.matze-mikro.ist-ohne-diktat { opacity: 0.55; }

/* --- Matze nimmt Audio auf (14.09.2026): die Wartezeit wie bei WhatsApp --- */
.matze-tippt.ist-audio { align-items: center; gap: 0.5rem; color: var(--chat-leise); }
.matze-tippt.ist-audio svg { width: 1.05rem; height: 1.05rem; flex: none; color: #ff5aa5; animation: matze-aufnahme 1.3s ease-in-out infinite; }
.matze-tippt.ist-audio small { font-size: 0.82rem; }
.matze-pegel { display: inline-flex; align-items: center; gap: 0.16rem; height: 1rem; font-style: normal; }
.matze-pegel i { display: block; width: 0.18rem; height: 100%; border-radius: 1px; background: var(--chat-leise); transform: scaleY(0.35); animation: matze-pegel 0.9s ease-in-out infinite; }
.matze-pegel i:nth-child(2) { animation-delay: 0.12s; }
.matze-pegel i:nth-child(3) { animation-delay: 0.24s; }
.matze-pegel i:nth-child(4) { animation-delay: 0.36s; }
.matze-pegel i:nth-child(5) { animation-delay: 0.48s; }
@keyframes matze-aufnahme { 50% { opacity: 0.35; } }
@keyframes matze-pegel { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .matze-tippt.ist-audio svg, .matze-pegel i { animation: none; }
  .matze-pegel i { transform: scaleY(0.7); }
}

/* --- Gutscheine (15.09.2026) --- */
.status-gutschein-offen { background: rgba(83, 189, 120, 0.16); color: #7ed2a4; }
.status-gutschein-teilweise { background: rgba(233, 180, 94, 0.16); color: #e9b45e; }
.status-gutschein-eingeloest { background: rgba(255, 255, 255, 0.08); color: var(--color-text-muted); }
.status-gutschein-abgelaufen { background: rgba(240, 106, 164, 0.14); color: #f06aa4; }

/* --- Gutschein-Motive (15.09.2026) --- */
.motiv-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.6rem; margin: 0 0 1.2rem; padding: 0; border: 0; }
.motiv-wahl legend { margin-bottom: 0.4rem; font-weight: 600; }
.motiv-karte { position: relative; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.45rem; border: 2px solid var(--color-border); border-radius: var(--radius); cursor: pointer; }
.motiv-karte input { position: absolute; opacity: 0; pointer-events: none; }
.motiv-karte:has(input:checked) { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.motiv-karte:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.motiv-farbe { display: block; height: 2.6rem; border-radius: calc(var(--radius) - 3px); }
.motiv-name { font-size: 0.85rem; text-align: center; }
.motiv-klassisch .motiv-farbe { background: radial-gradient(circle at 80% 20%, #ff4f9e 0 18%, transparent 40%), linear-gradient(135deg, #6a1348, #1e0716); }
.motiv-geburtstag .motiv-farbe { background: radial-gradient(circle at 20% 30%, #ffc53d 0 7%, transparent 8%), radial-gradient(circle at 70% 60%, #3fd6c6 0 6%, transparent 7%), radial-gradient(circle at 45% 75%, #ff4f9e 0 6%, transparent 7%), linear-gradient(135deg, #3b1a6b, #12081f); }
.motiv-valentinstag .motiv-farbe { background: radial-gradient(circle at 75% 35%, #ff4d6d 0 16%, transparent 34%), linear-gradient(135deg, #7a0f33, #26040f); }
.motiv-muttertag .motiv-farbe { background: radial-gradient(circle at 25% 40%, #f7a8c0 0 12%, transparent 13%), radial-gradient(circle at 65% 65%, #ffd8b5 0 10%, transparent 11%), linear-gradient(135deg, #5b2a44, #1f0c17); }
.motiv-weihnachten .motiv-farbe { background: radial-gradient(circle at 30% 30%, #fff 0 4%, transparent 5%), radial-gradient(circle at 75% 55%, #e8c15f 0 9%, transparent 10%), linear-gradient(135deg, #0f4a39, #051c15); }
.motiv-danke .motiv-farbe { background: radial-gradient(circle at 70% 35%, #7fe0c8 0 14%, transparent 30%), linear-gradient(135deg, #124654, #061b22); }

/* --- Hilfe-Chat mit Matze (15.09.2026) --- */
.hilfe { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; }
.hilfe-knopf {
  display: grid; place-items: center; width: 3.2rem; height: 3.2rem; padding: 0;
  border: 0; border-radius: 50%; background: var(--color-accent); color: #fff; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.hilfe-knopf:hover { background: var(--color-accent-hover); }
.hilfe-knopf svg { width: 1.5rem; height: 1.5rem; }
.hilfe-knopf[aria-expanded="true"] { background: var(--color-surface-alt); color: var(--color-text); }
.hilfe-fenster {
  position: absolute; right: 0; bottom: 3.9rem;
  display: flex; flex-direction: column;
  width: min(22rem, calc(100vw - 2rem)); height: min(30rem, calc(100dvh - 8rem));
  overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.hilfe-fenster[hidden] { display: none; }
.hilfe-kopf { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--color-border); }
.hilfe-zu { width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.hilfe-verlauf { flex: 1; display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 0.8rem; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.hilfe-blase { max-width: 88%; padding: 0.5rem 0.7rem; border-radius: 0.8rem; font-size: 0.9rem; line-height: 1.4; }
.hilfe-blase p { margin: 0; white-space: pre-line; }
.hilfe-blase a { display: inline-block; margin-top: 0.35rem; font-weight: 600; }
.hilfe-blase.ist-matze { align-self: flex-start; border-top-left-radius: 0.2rem; background: var(--color-surface-alt); }
.hilfe-blase.ist-evi { align-self: flex-end; border-top-right-radius: 0.2rem; background: var(--color-accent); color: #fff; }
.hilfe-blase.ist-tippt p { letter-spacing: 0.2em; opacity: 0.7; }
.hilfe-vorschlaege { display: flex; gap: 0.35rem; padding: 0 0.8rem 0.5rem; overflow-x: auto; }
.hilfe-vorschlaege button { flex: none; padding: 0.3rem 0.65rem; border: 1px solid var(--color-border); border-radius: 999px; background: transparent; color: var(--color-text); font-size: 0.78rem; cursor: pointer; }
.hilfe-eingabe { display: flex; gap: 0.4rem; padding: 0.6rem 0.8rem; border-top: 1px solid var(--color-border); }
.hilfe-eingabe input { flex: 1; min-width: 0; }
.hilfe-hinweis { margin: 0; padding: 0 0.8rem 0.5rem; color: var(--color-text-muted); font-size: 0.72rem; }
/* Handy: ueber der unteren Leiste, nicht auf ihr */
@media (max-width: 720px) {
  .hilfe { bottom: calc(4.6rem + env(safe-area-inset-bottom)); right: 0.8rem; }
  .hilfe-knopf { width: 2.9rem; height: 2.9rem; }
}
/* Im Matze-Schreibchat stoert das zweite Chat-Symbol -- dort ausblenden. */
body:has([data-matze]) .hilfe { display: none; }

/* --- Balken der Uebungsseite (16.09.2026) ---
   Absichtlich in Warnfarben und NICHT im Design der Verwaltung: der Balken
   soll erkennbar nicht dazugehoeren, sonst liest ihn nach zwei Tagen niemand
   mehr. Deshalb feste Farbwerte statt Tokens -- er sieht ueberall gleich aus
   und wird von keiner Jahreszeit umgefaerbt.
   Nicht fixiert und nicht klebend: am Handy waere eine dauerhaft mitlaufende
   Zeile verlorene Hoehe, und beim Aufrufen der Seite steht er ohnehin im Bild. */
.uebung-balken {
  margin: 0;
  padding: 0.55rem 1rem;
  background: repeating-linear-gradient(135deg, #ffd166 0 14px, #f4bb3c 14px 28px);
  color: #1b1206;
  border-bottom: 2px solid #1b1206;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
@media (max-width: 600px) {
  .uebung-balken { padding: 0.5rem 0.7rem; font-size: 0.8rem; }
}

/* Rueckweg im Uebungsbalken (16.09.2026): im Balken selbst, damit er ueberall
   dort ist, wo auch der Hinweis steht -- und nicht im Menue untergeht. */
.uebung-zurueck {
  margin-left: .6rem;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}

/* --- Visitenkarten (/admin/karten, 16.09.2026) ---------------------------
   Drei Ausgaben nebeneinander statt untereinander: sie gehoeren in eine
   Reihenfolge (erst Testblatt, dann Karten, die Druckerei-Datei zuletzt), und
   nebeneinander sieht man auf einen Blick, dass es drei verschiedene Dinge
   sind -- untereinander las es sich wie dreimal derselbe Knopf. */
.karten-frage {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.karten-ausgaben {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}

.karten-ausgabe {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
}

.karten-ausgabe h3 {
  margin: 0;
  font-size: 1rem;
}

/* Der Text waechst, der Knopf sitzt trotzdem in allen drei Kacheln auf
   gleicher Hoehe -- sonst tanzt die Reihe. */
.karten-ausgabe p {
  flex: 1;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.karten-ausgabe .btn,
.karten-ausgabe .btn-outline {
  align-self: flex-start;
}

/* Die Warnung zur Skalierung im Druckdialog. Bewusst kraeftiger als ein
   .field-hint: sie ist der haeufigste Fehler und kostet jedes Mal einen Bogen
   Karton. Kein .alert, denn nichts ist schiefgegangen. */
.karten-warnung {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--accent-line);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* --- Wareneinsatz-Rechner (16.09.2026) ------------------------------------
   Eine Zeile je Produkt als Raster statt als Tabelle: am Handy kippt es dann
   untereinander, ohne dass jemand seitlich scrollen muss. */
/* Schritt 1 und die Gegenprobe haben ihr eigenes Raster: mit .zeile wurde die
   Behandlung schmal und der Preis breit -- genau andersherum als gedacht. */
.we-kopfzeile { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: start; }
.we-kopfzeile-drei { grid-template-columns: 2fr 1fr 1fr; }
.we-kopfzeile .field { margin: 0; }
.we-kopfzeile input { width: 100%; }

.we-gespeichert-liste { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem; }
.we-gespeichert-liste li {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between;
  padding: .6rem .8rem; border: 1px solid var(--color-border); border-radius: var(--radius);
}
.we-gespeichert-liste .we-label { display: block; }
.we-gespeichert-liste .aktionen { display: flex; gap: .4rem; margin: 0; }
.we-gespeichert-liste form { margin: 0; }

.we-tabelle { display: grid; gap: .4rem; margin-top: 1rem; }
/* minmax(0,...) verhindert, dass ein langer Wert wie "Anwendung" die Spalte
   sprengt statt sich hineinzufuegen; die Einheit bekommt dafuer mehr Platz. */
.we-kopf,
.we-zeile { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1.15fr) minmax(0, 1.2fr) 2.2rem; gap: .5rem; align-items: center; }
.we-kopf-schmal,
.we-zeile-schmal { grid-template-columns: 3fr 1fr 2.2rem; }
.we-kopf { font-size: .78rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.we-zeile input { width: 100%; min-width: 0; }
.we-weg {
  width: 2.2rem; height: 2.2rem; padding: 0; border: 1px solid var(--color-border); border-radius: 50%;
  background: transparent; color: var(--color-text-muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.we-weg:hover:not([disabled]) { border-color: var(--color-danger); color: var(--color-danger); }
.we-weg[disabled] { opacity: .35; cursor: not-allowed; }
.we-rueckblick summary { cursor: pointer; padding: .2rem 0; }
.we-abschluss { margin: 1.2rem 0 2rem; align-items: center; }
.we-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.we-zahlen > div { display: grid; gap: .2rem; padding: .9rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); }
.we-zahl { font-size: 1.7rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.we-label { font-size: .8rem; color: var(--color-text-muted); }
.we-einordnung { margin: .8rem 0; padding: .8rem 1rem; border-left: 3px solid var(--color-accent); background: var(--color-surface-alt); border-radius: 0 var(--radius) var(--radius) 0; }
/* Vier Spalten mit Euro-Betraegen sind auf dem Handy breiter als der Schirm.
   Statt die Seite seitlich wegzuschieben, scrollt nur die Tabelle. */
.we-tabelle-huelle { overflow-x: auto; }
.we-auswertung { width: 100%; min-width: 22rem; border-collapse: collapse; margin-top: 1rem; font-size: .9rem; }
.we-auswertung th, .we-auswertung td { padding: .45rem .6rem; text-align: left; border-bottom: 1px solid var(--color-border); }
.we-auswertung td:not(:first-child), .we-auswertung th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.we-auswertung tfoot th, .we-auswertung tfoot td { font-weight: 700; border-bottom: 0; }
.we-fehlt { color: var(--color-danger); font-size: .82rem; }
.we-liste { margin: .6rem 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.we-fuss { margin-top: 1.2rem; font-size: .78rem; color: var(--color-text-muted); }

@media (max-width: 720px) {
  .we-kopfzeile,
  .we-kopfzeile-drei { grid-template-columns: 1fr; gap: .6rem; }
  /* Auf dem Handy faellt die Kopfzeile weg. Dann stuenden dort nur noch
     nackte Zahlen ("24,90" / "30" / "4") und niemand wuesste, welche wozu
     gehoert -- also werden die sonst versteckten Beschriftungen sichtbar und
     stehen links neben ihrem Feld. */
  .we-kopf { display: none; }
  /* Die Karten haben sonst 2 rem Innenabstand links und rechts. Auf 375 px
     bleiben dann fuer das Eingabefeld keine 140 px uebrig -- ein Materialname
     war nach "Haftgel /" zu Ende. */
  .we-seite .card { padding-left: 1rem; padding-right: 1rem; }
  .we-zeile,
  .we-zeile-schmal { grid-template-columns: 6.4rem 1fr; gap: .35rem .5rem; padding: .6rem; border: 1px solid var(--color-border); border-radius: var(--radius); }
  .we-zeile label.visually-hidden,
  .we-zeile-schmal label.visually-hidden {
    position: static; width: auto; height: auto; margin: 0; padding: 0;
    clip: auto; clip-path: none; overflow: visible; white-space: normal;
    align-self: center; font-size: .74rem; line-height: 1.25; color: var(--color-text-muted);
  }
  .we-zeile .we-weg,
  .we-zeile-schmal .we-weg { grid-column: 2; justify-self: end; }
}

/* Drucken: nur das Ergebnis, ohne Menue, Formular und Knoepfe -- Evi legt das
   Blatt in ihre Unterlagen. */
@media print {
  .app-nav, .app-header, .uebung-balken, .hilfe, [data-we-form], .we-drucken, .we-gespeichert, .back-link { display: none !important; }
  .we-seite { padding: 0; }
  .we-ergebnis { border: 0; box-shadow: none; padding: 0; }
  .we-tabelle-huelle { overflow-x: visible; }
  .we-zahlen > div { border: 1px solid #999; }
  .we-einordnung { border-left: 3px solid #999; background: transparent; }
  .we-auswertung th, .we-auswertung td { border-bottom: 1px solid #bbb; }
  body { background: #fff; color: #000; }
}


/* "Auf der Website" (17.09.2026): kleine Kacheln mit Titelbild und Schalter. */
.website-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.website-video {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.website-video.ist-aus .website-video-bild { opacity: 0.45; filter: grayscale(0.6); }
.website-video-bild {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
  background: var(--color-surface-alt);
}
.website-video-inhalt { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.website-video-inhalt form { margin: 0; }

/* --- Musik (/admin/musik, nur Superadmin) --------------------------------
   Formular fuer einen neuen Titel, darunter je Stimmung die eigenen Titel. */

.musik-quellen p { margin: 0 0 0.6rem; font-size: 0.9rem; }
.musik-quellen p:last-child { margin-bottom: 0; }

.musik-formular { margin-top: 1rem; }

.musik-andere { display: grid; gap: 0; }

/* So wie der Nachweis im Video steht: weiss auf dunkel, in beiden Themes. */
.musik-vorschau {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.6rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  background: #17121d;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  overflow-wrap: anywhere;
}

.musik-stimmungen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

.musik-stimmungen li {
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.musik-stimmungen strong { color: var(--color-text); font-weight: 600; }

/* Wenig Auswahl: hier lohnt sich ein neuer Titel am meisten. */
.musik-stimmungen li.ist-duenn { border-color: var(--color-accent); }

.musik-titel-liste {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.musik-titel {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.musik-titel:first-child { padding-top: 0; border-top: 0; }

.musik-titel.ist-aus .medien-titel { color: var(--color-text-muted); }

.musik-titel audio { width: 100%; max-width: 28rem; height: 2.5rem; }

.musik-titel form { margin: 0; max-width: none; }

.musik-nachweis-zeile {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

/* Seit 17.09.2026 eine Zeile im Video; bricht sie doch um, zeigt die
   Vorschau die Reihen untereinander. */
.musik-vorschau span { white-space: pre-line; }

.field-hint.ist-warnung { color: #fbbf24; }
html[data-theme="light"] .field-hint.ist-warnung { color: #9a5b00; }

/* Nicht freigegebene Titel: der naechste Schritt steht sichtbar da. */
.musik-freigeben { justify-self: start; }

.musik-liedtext {
  max-height: 16rem;
  margin: 0;
  padding: 0.75rem 0.9rem;
  overflow: auto;
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- Mit KI erzeugen (Google Lyria) ------------------------------------ */

.ki-budget { margin: 1rem 0 0.5rem; }
.ki-budget .aufklapper { margin-top: 0.4rem; }
.ki-budget .zeile { align-items: end; }

.ki-regel strong { color: var(--color-text); }

/* Gesperrt (kein Schluessel, nicht der Server, Grenze) oder laeuft gerade. */
[data-ki-formular] .btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

.ki-status {
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.ki-status[data-art="ok"] { border-color: #57d9a3; }
.ki-status[data-art="fehler"] { border-color: var(--color-danger); }
.ki-status[data-art="unklar"] { border-color: #d97706; }

.ki-untertitel { margin: 1.6rem 0 0.6rem; font-size: 1rem; }

.ki-auftraege {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ki-auftrag {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-border);
}
.ki-auftrag:first-child { padding-top: 0; border-top: 0; }
.ki-auftrag .medien-titel { overflow-wrap: anywhere; }
.ki-meldung { margin: 0 0 0.5rem; font-size: 0.9rem; }
.ki-prompt {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Womoeglich berechnet, aber ohne Ergebnis: weder gruen noch rot. */
.status-unklar {
  background: rgba(217, 119, 6, 0.18);
  color: #fbbf24;
}
html[data-theme="light"] .status-unklar { color: #8a5100; }

/* Sprungziele auf dieser Seite nicht unter der klebenden Kopfleiste
   verstecken -- wie .bereich. Nach einem Auftrag landet man auf #ki oder
   direkt beim neuen Titel. */
#ki,
#hinzufuegen,
.musik-titel { scroll-margin-top: 4.5rem; }

/* Weder gut noch schlecht: der Auftrag laeuft noch. */
.alert-hinweis {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Womoeglich berechnet, aber ohne Ergebnis. */
.alert-unklar {
  background: rgba(217, 119, 6, 0.14);
  border-color: #d97706;
  color: #fbbf24;
}
html[data-theme="light"] .alert-unklar { color: #8a5100; }

/* Die Laufzeit neben dem Text: feste Ziffernbreite, damit nichts springt. */
.ki-uhr { margin-left: 0.35rem; font-variant-numeric: tabular-nums; }

/* Gerade erzeugt: hebt den Titel hervor, zu dem die Seite gesprungen ist. */
.musik-titel.ist-neu { border-left: 3px solid var(--color-accent); padding-left: 0.7rem; }

.musik-neu {
  margin: 0 0 0.2rem;
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 600;
}

/* --- Videoeditor in Schritten (18.09.2026) ----------------------------------
   Stil bzw. Video -> (Schneiden) -> Musik -> Text & Effekte -> Fertig. Die
   Vorschau bleibt im Blick: am Handy klebt sie oben (Bild links, Abspielen
   rechts daneben), am Rechner steht sie links neben den Schritten. */

.generator-leinwand { position: relative; }

.generator-wiedergabe {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.generator-wiedergabe input[type="range"] { width: 100%; }
.generator-play { align-self: flex-start; }

.generator-zeit {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.generator-zieh-hinweis {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Bildausschnitt ziehen: nur wenn es etwas zu verschieben gibt -- sonst
   bliebe am Handy das Scrollen ueber der Vorschau haengen. */
.generator-canvas.ist-verschiebbar { cursor: grab; touch-action: none; }
.generator-canvas.ist-verschiebbar:active { cursor: grabbing; }

/* Im Vorschaufenster sichtbar machen, DASS man ziehen kann: ein kleines
   Zeichen mit Pfeil in der Ecke (Matthias fand vorher "nichts zum Ziehen"). */
.generator-leinwand:has(.generator-canvas.ist-verschiebbar)::after {
  content: "↕ ziehen";
  position: absolute;
  top: .45rem;
  right: .45rem;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: rgba(11, 9, 15, .72);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  pointer-events: none;
}
.generator-leinwand:has(.generator-canvas.ist-quer)::after { content: "↔ ziehen"; }

@media (max-width: 719px) {
  .generator-vorschau {
    position: sticky;
    top: 3.3rem;
    z-index: 4;
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
    margin: -0.5rem 0 0;
    padding: 0.6rem 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
  }

  .generator-leinwand { flex: none; width: 38%; max-width: 150px; }
  .generator-leinwand .generator-canvas,
  .generator-leinwand .generator-video { width: 100%; }
  .generator-wiedergabe { flex: 1 1 auto; }
}

@media (min-width: 720px) {
  .generator-vorschau {
    position: sticky;
    top: 7.6rem;
    align-self: start;
  }

  .generator-canvas,
  .generator-video { width: 240px; }
  .generator-wiedergabe { width: 240px; }
}

/* Schrittleiste: bricht um statt zu scrollen -- ein abgeschnittener
   letzter Schritt saehe aus, als fehle er. */
.generator-schritte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1.1rem;
}

.generator-schritt-knopf {
  flex: none;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.generator-schritt-knopf[aria-current="step"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.generator-schritt-knopf:disabled { opacity: 0.45; cursor: not-allowed; }
.generator-schritt-knopf:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.generator-schritt { display: grid; gap: 1.1rem; min-width: 0; }
.generator-schritt[hidden] { display: none; }
.generator-schritt > .field { margin: 0; }

.generator-schritt-titel {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.2rem;
}

.generator-weiter {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

/* "Weiter" steht immer rechts -- auch wenn es kein "Zurück" gibt. */
.generator-weiter [data-schritt-weiter] { margin-left: auto; }

.feld-titel { display: block; margin-bottom: 0.35rem; font-weight: 600; }
.feld-freiwillig { color: var(--color-text-muted); font-size: 0.8rem; font-weight: 400; }

/* Stil als Karten statt Auswahlliste */
.stil-karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.6rem;
}

.stil-karte {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
  cursor: pointer;
}

.stil-karte input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.stil-karte:has(input:checked) { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.stil-karte:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.stil-name { font-weight: 700; }
.stil-text { color: var(--color-text-muted); font-size: 0.8rem; line-height: 1.35; }
.stil-fotos { color: var(--color-text-muted); font-size: 0.72rem; }

/* Eigenes Video waehlen: grosser Knopf statt nacktem Dateifeld */
.clip { position: relative; display: grid; gap: 0.5rem; min-width: 0; }

/* Das Dateifeld selbst ist nur fuer Vorleseprogramme da (der Knopf ist das
   Label). ".field input { width: 100% }" schlug sonst .visually-hidden und
   machte es so breit wie die Seite -- am Handy ragte es seitlich hinaus. */
.clip input[type="file"].visually-hidden { width: 1px; max-width: 1px; }

/* Handy-Dateinamen haben oft kein Leerzeichen ("PXL_20260918_1734.mp4") --
   ohne Umbruch schoben sie die Seite am Handy seitlich ueber den Rand. */
.clip .field-hint,
.clip-dauer { overflow-wrap: anywhere; }
.clip-waehlen { justify-self: start; cursor: pointer; }
.clip:has(input[type="file"]:focus-visible) .clip-waehlen { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.clip-regler { display: grid; gap: 1rem; }
.clip-regler input[type="range"] { width: 100%; }
.clip-regler-einfach { display: grid; gap: 0.6rem; }
.clip-regler-einfach[hidden] { display: none; }
.clip-dauer { margin: 0; font-variant-numeric: tabular-nums; }

/* Segmente: Tempo, Staerke, Zeitraum, Bildausschnitt */
.segmente { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.segment { position: relative; }
.segment input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }

.segment span,
.segment-knopf {
  display: inline-block;
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.segment input:checked + span {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-weight: 600;
}

.segment input:focus-visible + span,
.segment-knopf:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* --- Push-Nachrichten und Matzes Morgen-Spruch (21.09.2026) --- */

.push-formular fieldset { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
/* Foto-Einverstaendnis je Kanal (21.09.2026): unter "Ja" eingerueckt, nur bei "Ja" zu sehen. */
.foto-kanaele { display: grid; gap: .25rem; margin: .1rem 0 .4rem 1.6rem; }
[role="radiogroup"]:has(input[name="foto_einverstaendnis"][value="ja"]:not(:checked)) .foto-kanaele { display: none; }
/* Eigene Adresse nur, wenn "Andere Adresse" gewaehlt ist. */
.push-formular:has(#push-ziel option[value="extern"]:not(:checked)) .push-extern { display: none; }
.push-anzahl { color: var(--color-text-muted); font-size: 0.78rem; font-weight: 400; }
.segment input:checked + span .push-anzahl { color: inherit; opacity: 0.85; }

.push-schalter { align-items: center; margin: 1rem 0; }
.push-stand { flex: 1 1 16rem; margin: 0; }
.push-punkt {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--color-text-muted);
  vertical-align: 0.05em;
}
.push-punkt.ist-an { background: var(--color-success, #3fb67a); }

.push-unter { margin: 1.4rem 0 0.5rem; font-size: 1rem; }

/* So sieht es auf dem Sperrbildschirm ungefaehr aus. */
.push-vorschau {
  display: grid;
  gap: 0.2rem;
  max-width: 26rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  background: var(--color-surface-alt);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.push-vorschau-titel { font-weight: 700; }
.push-vorschau-text { line-height: 1.45; overflow-wrap: anywhere; }

.push-lage,
.push-verlauf,
.push-konten { display: grid; gap: 0.55rem; margin: 0; padding-left: 1.1rem; }
.push-lage .field-hint,
.push-konten .field-hint { display: inline; margin: 0; }
.push-konten ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.push-verlauf li { display: grid; gap: 0.1rem; }
.push-verlauf-kopf { color: var(--color-text-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }

.push-vorrat { width: 100%; max-width: 30rem; margin-top: 0.6rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.push-vorrat th,
.push-vorrat td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--color-border); text-align: left; }
.push-vorrat th:not(:first-child),
.push-vorrat td:not(:first-child) { text-align: right; }
/* Gewaehlter Bildausschnitt -- sieht aus wie ein gewaehltes Segment. */
.segment-knopf[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: #fff; font-weight: 600; }
.segment-knopf:hover { border-color: var(--color-accent); }

/* Effekte als Knoepfe; eingeschaltete zeigen darunter ihre Einstellungen. */
.effekt-knoepfe { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.effekt-knopf {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.effekt-knopf[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.effekt-knopf[aria-pressed="true"]::before { content: "✓ "; }
.effekt-knopf:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.effekt-optionen-liste { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.effekt-optionen-liste:empty { display: none; }

.effekt-optionen {
  display: grid;
  gap: 0.65rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
}

.effekt-optionen[hidden] { display: none; }
.effekt-optionen-kopf { margin: 0; color: var(--color-text-muted); font-size: 0.85rem; line-height: 1.4; }
.effekt-optionen-kopf strong { color: var(--color-text); }

.farbtupfer { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.tupfer { position: relative; }
.tupfer input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }

/* "Automatisch" als Farbkreis aus den Markenfarben. */
.tupfer-punkt {
  display: block;
  width: 1.9rem;
  height: 1.9rem;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: conic-gradient(#ff5aa5, #ffc53d, #7fe0c8, #9b7bff, #ff5aa5);
  cursor: pointer;
}

.tupfer input:checked + .tupfer-punkt { box-shadow: 0 0 0 2px var(--color-surface-alt), 0 0 0 4px var(--color-accent); }
.tupfer input:focus-visible + .tupfer-punkt { outline: 2px solid var(--color-accent); outline-offset: 5px; }

.effekt-eigen { display: grid; gap: 0.4rem; }
.effekt-eigen[hidden] { display: none; }

.effekt-eigen-regler {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.effekt-eigen-regler input[type="range"] { width: 100%; }

/* --- Filmstreifen (Videoeditor) --- */
/* Zuschneiden eines Handyvideos (clip-filmstreifen.js): eine Reihe
   Vorschaubilder, zwei Laschen fuer Anfang und Ende, ein Abspielkopf; im
   Modus "titelbild" statt der Laschen ein Rahmen fuers Titelbild.
   Lage und Groesse setzt das Skript als Variablen: --filmstreifen-von, -bis,
   -titel und -kopf als Anteil 0..1 der Quelle, -hoehe und -zelle in px.
   Links und rechts der Bilder bleibt je eine Laschenbreite Platz, damit die
   Laschen auch ganz am Anfang und am Ende im Bild bleiben.
   Die Abdunklung ist in beiden Farbschemata dunkel: sie liegt auf den
   Videobildern, nicht auf der Seite. */

.filmstreifen {
  --filmstreifen-lasche: 18px;
  --filmstreifen-rand: 3px;
  --filmstreifen-hoehe: 64px;
  --filmstreifen-zelle: 36px;
  --filmstreifen-von: 0;
  --filmstreifen-bis: 1;
  --filmstreifen-titel: 0;
  --filmstreifen-kopf: 0;
  --filmstreifen-innen: calc(100% - 2 * var(--filmstreifen-lasche));
  --filmstreifen-dunkel: rgba(12, 8, 16, 0.62);
  position: relative;
  padding-top: 0.25rem;
  /* Die Tippflaechen der Laschen ragen am Rand ueber den Streifen hinaus --
     das darf die Seite auf dem Handy nicht seitlich verschiebbar machen. */
  overflow-x: clip;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* pan-y: senkrecht wischen scrollt die Seite, waagerecht gehoert dem Streifen.
   Waehrend des Ziehens gar nichts mehr fuer den Browser. */
.filmstreifen-bahn {
  position: relative;
  height: calc(var(--filmstreifen-hoehe) + 2 * var(--filmstreifen-rand));
  touch-action: pan-y;
  cursor: pointer;
}

.filmstreifen-zieht .filmstreifen-bahn { touch-action: none; cursor: grabbing; }
.filmstreifen[data-zieht="von"] .filmstreifen-bahn,
.filmstreifen[data-zieht="bis"] .filmstreifen-bahn { cursor: ew-resize; }

.filmstreifen-bilder {
  position: absolute;
  inset: var(--filmstreifen-rand) var(--filmstreifen-lasche);
  display: flex;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-surface-alt);
}

/* Platzhalter, bis das Bild da ist: Flaeche mit feiner Trennlinie. */
.filmstreifen-zelle {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 75%), var(--color-surface-alt);
  box-shadow: inset -1px 0 0 var(--color-border);
}

.filmstreifen-zelle:last-child { box-shadow: none; }

.filmstreifen-bild {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.filmstreifen-zelle.filmstreifen-geladen .filmstreifen-bild { opacity: 1; }

.filmstreifen-schatten {
  position: absolute;
  top: var(--filmstreifen-rand);
  bottom: var(--filmstreifen-rand);
  background: var(--filmstreifen-dunkel);
  pointer-events: none;
}

.filmstreifen-schatten-links {
  left: var(--filmstreifen-lasche);
  width: calc(var(--filmstreifen-von) * var(--filmstreifen-innen));
  border-radius: 6px 0 0 6px;
}

.filmstreifen-schatten-rechts {
  right: var(--filmstreifen-lasche);
  width: calc((1 - var(--filmstreifen-bis)) * var(--filmstreifen-innen));
  border-radius: 0 6px 6px 0;
}

/* Die Auswahl: Akzentrahmen oben und unten, die Laschen sind die Seiten. */
.filmstreifen-rahmen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--filmstreifen-lasche) + var(--filmstreifen-von) * var(--filmstreifen-innen));
  right: calc(var(--filmstreifen-lasche) + (1 - var(--filmstreifen-bis)) * var(--filmstreifen-innen));
  border-block: var(--filmstreifen-rand) solid var(--color-accent);
  cursor: grab;
  transition: box-shadow 0.15s;
}

.filmstreifen[data-zieht="bereich"] .filmstreifen-rahmen { box-shadow: 0 0 0 3px var(--accent-soft); }

/* Abspielkopf: duenne helle Linie, mit Schatten auch auf hellen Bildern zu sehen. */
.filmstreifen-kopf {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: calc(var(--filmstreifen-lasche) + var(--filmstreifen-kopf) * var(--filmstreifen-innen) - 1px);
  width: 2px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.filmstreifen-zieht .filmstreifen-kopf { opacity: 0; }

/* Griff = 44 px Tippflaeche, mittig darin die sichtbare Lasche. Welche Lasche
   ein Finger trifft, rechnet das Skript; die Flaeche hier sorgt fuer
   touch-action: none und den Mauszeiger. */
.filmstreifen-griff {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 44px;
  touch-action: none;
  cursor: ew-resize;
  outline: none;
}

.filmstreifen-griff-von {
  left: calc(var(--filmstreifen-lasche) / 2 + var(--filmstreifen-von) * var(--filmstreifen-innen) - 22px);
}

.filmstreifen-griff-bis {
  left: calc(var(--filmstreifen-lasche) * 1.5 + var(--filmstreifen-bis) * var(--filmstreifen-innen) - 22px);
}

.filmstreifen-lasche {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - var(--filmstreifen-lasche) / 2);
  width: var(--filmstreifen-lasche);
  background: var(--color-accent);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.5);
  transition: background-color 0.15s, box-shadow 0.15s;
}

.filmstreifen-griff-von .filmstreifen-lasche { border-radius: 8px 0 0 8px; }
.filmstreifen-griff-bis .filmstreifen-lasche { border-radius: 0 8px 8px 0; }

/* Griffmulde: zwei kurze Striche -- die Lasche sieht nach Anfassen aus. */
.filmstreifen-lasche::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-inline: 2px solid var(--on-accent);
  border-radius: 1px;
  opacity: 0.9;
}

@media (hover: hover) {
  .filmstreifen-griff:hover .filmstreifen-lasche { background: var(--color-accent-hover); }
}

.filmstreifen[data-zieht="von"] .filmstreifen-griff-von .filmstreifen-lasche,
.filmstreifen[data-zieht="bis"] .filmstreifen-griff-bis .filmstreifen-lasche,
.filmstreifen[data-zieht="bereich"] .filmstreifen-lasche {
  background: var(--color-accent-hover);
}

/* Fokus bewusst in --fokus-ring statt Akzent: um eine pinke Lasche waere ein
   pinker Ring unsichtbar. */
.filmstreifen-griff:focus-visible .filmstreifen-lasche,
.filmstreifen-griff:focus-visible .filmstreifen-marke {
  outline: 2px solid var(--fokus-ring);
  outline-offset: 2px;
}

/* Titelbild-Modus: ein weisser Rahmen in Groesse eines Vorschaubilds. */
.filmstreifen-griff-titel {
  left: calc(var(--filmstreifen-lasche) + var(--filmstreifen-titel) * var(--filmstreifen-innen) - 22px);
  cursor: pointer;
}

.filmstreifen-marke {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: clamp(28px, var(--filmstreifen-zelle), 56px);
  transform: translateX(-50%);
  border: 3px solid #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 8px 18px -6px rgba(0, 0, 0, 0.65);
}

.filmstreifen[data-modus="titelbild"] { --filmstreifen-dunkel: rgba(12, 8, 16, 0.74); }

.filmstreifen[data-modus="titelbild"] .filmstreifen-rahmen {
  border: 2px solid var(--accent-line);
  border-radius: 8px;
  cursor: pointer;
}

/* Zeitangaben unter den Griffen; das Skript setzt --filmstreifen-x so, dass
   sie im Streifen bleiben und nie uebereinander liegen. */
.filmstreifen-zeiten {
  position: relative;
  height: 1.4rem;
  margin-top: 0.35rem;
}

.filmstreifen-zeit {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(var(--filmstreifen-x, 0px));
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.1rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}

.filmstreifen-zeit-titel { color: var(--color-text); font-weight: 600; }

.filmstreifen[data-zieht="von"] .filmstreifen-zeit-von,
.filmstreifen[data-zieht="bis"] .filmstreifen-zeit-bis,
.filmstreifen[data-zieht="bereich"] .filmstreifen-zeit-von,
.filmstreifen[data-zieht="bereich"] .filmstreifen-zeit-bis,
.filmstreifen[data-zieht="titel"] .filmstreifen-zeit-titel {
  background: var(--color-accent);
  color: var(--on-accent);
}

/* Eigene Regel: ein Browser ohne :has() verwirft nur diese, nicht die obere. */
.filmstreifen:has(.filmstreifen-griff-von:focus-visible) .filmstreifen-zeit-von,
.filmstreifen:has(.filmstreifen-griff-bis:focus-visible) .filmstreifen-zeit-bis,
.filmstreifen:has(.filmstreifen-griff-titel:focus-visible) .filmstreifen-zeit-titel {
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

@media (prefers-reduced-motion: reduce) {
  .filmstreifen-bild,
  .filmstreifen-rahmen,
  .filmstreifen-lasche,
  .filmstreifen-zeit { transition: none; }
}

/* --- Videos -> Erstellen: zwei gleichwertige Wege (18.09.2026) --- */
.erstellen-wege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.erstellen-weg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
}

.erstellen-weg h3 { margin: 0; font-size: 1.05rem; }
.erstellen-weg .field-hint { margin: 0; }
.erstellen-form { display: grid; gap: 0.7rem; width: 100%; max-width: none; margin: 0; }
.erstellen-form .field { margin: 0; }
.erstellen-form .btn { justify-self: start; }