:root {
  --accent: #4b2e83;
  --accent-light: #6b4fa0;
  --accent-dark: #382263;
  --bg: #f5f4f8;
  --text: #1f1d29;
  --muted: #6b6b76;
  --border: #e3e0eb;
  --sidebar-width: 230px;
}

* { box-sizing: border-box; }

html { overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: hidden; overflow-x: clip;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
/* Sicherheitsnetz gegen Seiten-weites horizontales Scrollen (Feedback:
   "nicht mobiloptimiert" - Screenshot zeigte, dass eine zu breite Tabelle
   die GESAMTE Seite inkl. Kopfzeile/Menü nach rechts verschieben konnte,
   statt dass nur die Tabelle selbst scrollt). Mit overflow-x:hidden auf
   html/body kann die Seite als Ganzes nicht mehr seitlich wandern - jedes
   zu breite Element (Tabelle, Sidebar, Tab-Leiste, <pre>) muss stattdessen
   selbst scrollen, siehe die einzelnen overflow-x:auto-Regeln dafür weiter
   unten. */

a { color: var(--accent); }

h1 { color: var(--text); font-size: 1.5rem; margin: 0; }
h2 { color: var(--text); }

/* ---------------------------------------------------------------------- */
/* App-Shell: Sidebar + Hauptbereich                                      */
/* ---------------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 14px;
  color: var(--text); text-decoration: none;
  font-weight: 700; font-size: 1rem; line-height: 1.2;
  min-width: 0;
}
.sidebar-logo { height: 34px; width: auto; max-width: 84px; object-fit: contain; flex-shrink: 0; border-radius: 6px; }
.sidebar-brand-name { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.global-search { position: relative; padding: 0 12px 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.global-search .gs-icon { position: absolute; left: 23px; top: 11px; color: var(--muted); pointer-events: none; }
#global-search input[type=search] {
  width: 100%; box-sizing: border-box; height: 38px; margin: 0;
  padding: 6px 34px 6px 34px; font-size: 0.9rem;
  border: 1px solid var(--border); border-radius: 9px; background: #f7f6fa;
}
#global-search input[type=search]:focus { background: #fff; border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.global-search .gs-kbd { position: absolute; right: 21px; top: 9px; font-size: 0.75rem; color: var(--muted); pointer-events: none; }
.global-search input:focus ~ .gs-kbd, .global-search input:not(:placeholder-shown) ~ .gs-kbd { display: none; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px 12px; flex: 1; overflow-y: auto; min-height: 0; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.94rem;
}
.sidebar-nav a svg { flex-shrink: 0; }
.sidebar-nav a:hover { background: #f2effa; }
.sidebar-nav a.active { background: var(--accent); color: #fff; }
.sidebar-user {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 6px;
  padding: 12px 12px 14px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}
.sidebar-user-card { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; padding: 4px; border-radius: 8px; }
.sidebar-user-card:hover { background: #f2effa; }
.sidebar-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.sidebar-user-text { display: flex; flex-direction: column; min-width: 0; }
.sidebar-user-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-role { font-size: 0.78rem; color: var(--muted); }
.sidebar-logout-form { margin: 0; }
.sidebar-logout { background: none; border: 0; padding: 8px; margin: 0; height: auto; min-height: 0; color: var(--muted); cursor: pointer; border-radius: 8px; display: inline-flex; }
.sidebar-logout:hover { background: #f2effa; color: var(--accent); }
.sidebar-logout-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sidebar-lang { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: 0; }
.sidebar-lang select { flex: 1; min-width: 0; width: auto; font-size: 0.8rem; padding: 4px 6px; height: auto; margin: 0; background: #fff; }
.sidebar-meta { grid-column: 1 / -1; font-size: 0.72rem; }
.sidebar-meta a { color: var(--accent); text-decoration: none; }

.main-area { flex: 1; min-width: 0; }
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar-title { font-weight: 700; font-size: 1.05rem; }
.content { max-width: 1160px; margin: 0 auto; padding: 32px; }

/* ---------------------------------------------------------------------- */
/* Formulare                                                              */
/* ---------------------------------------------------------------------- */
.auth-card {
  max-width: 380px;
  margin: 60px auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px;
}
.auth-card-logo { display: block; max-height: 64px; max-width: 220px; margin: 0 auto 20px; }

form label {
  display: block;
  margin-bottom: 14px;
  font-size: 0.9rem;
  color: var(--muted);
}
form input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
form select,
form textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
}
form input[type="checkbox"], form input[type="radio"] {
  width: auto;
  margin: 0 8px 0 0;
  vertical-align: middle;
}
form input[type="color"] {
  display: block;
  margin-top: 4px;
  width: 60px;
  height: 40px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
label.checkbox-line {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 10px;
}
label.checkbox-line input { margin-top: 0; }

.radio-group label {
  display: inline-flex;
  align-items: center;
  margin-right: 24px;
  margin-bottom: 10px;
  font-size: 1rem;
  color: var(--text);
}

details.advanced-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 20px 18px;
  margin-bottom: 20px;
}
details.advanced-section summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
  padding: 14px 0;
}
details.advanced-section[open] summary { margin-bottom: 6px; }

button, input[type="submit"] {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-family: inherit;  /* Knöpfe übernehmen sonst die Systemschrift */
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
button:hover { background: var(--accent-light); }
button.secondary { background: #fff; color: var(--accent); border: 1px solid var(--border); }
button.secondary:hover { background: #f2effa; }
button.danger { background: #fff; color: #b3261e; border: 1px solid #b3261e; }
button.danger:hover { background: #fdecea; }

.link-button {
  background: none;
  color: var(--accent);
  border: none;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  font-weight: inherit;
  height: auto;
  min-height: 0;
  line-height: inherit;
}
.link-button:hover { background: none; color: var(--accent-dark, var(--accent)); }

.error { color: #b3261e; background: #fdecea; border: 1px solid #f3b8b3; border-radius: 8px; padding: 10px 14px; }
.notice { color: #6b5a10; background: #fff7e0; border: 1px solid #f0dfa0; border-radius: 8px; padding: 10px 14px; }
.muted { color: var(--muted); }

.callout {
  background: #eee9f7;
  border: 1px solid var(--accent-light);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 24px;
}

/* ---------------------------------------------------------------------- */
/* Karten & Tabellen                                                      */
/* ---------------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
}

table { width: 100%; border-collapse: collapse; margin-bottom: 32px; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #faf9fc; }
th { color: var(--muted); font-weight: 600; background: #fbfaFD; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; }

.inline-form { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 18px; margin-bottom: 24px; }
.inline-form label { margin-bottom: 0; min-width: 220px; }
.inline-form button { height: 42px; align-self: flex-end; }

code { background: #eee; padding: 2px 6px; border-radius: 4px; font-size: 0.85em; word-break: break-word; }
pre { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
img { max-width: 100%; height: auto; }

.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 16px; }
.page-head-actions { display: flex; align-items: center; gap: 12px; }

.badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.badge-draft { background: #fff; border: 1px solid #c7c3d1; color: var(--muted); }
.badge-live { background: var(--accent); color: #fff; }
.badge-archived { background: #45424f; color: #fff; }
.badge-defect { background: #b42318; color: #fff; }

.stacked-form fieldset {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 20px;
}
.stacked-form legend { font-weight: 700; color: var(--text); padding: 0 6px; }
/* Feedback Runde 20: lokaler Editor (contenteditable + execCommand, siehe
   app/static/js/rich_editor.js) statt Quill von einem CDN - keine externe
   Abhängigkeit mehr. */
.rich-editor-local { background: #fff; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 4px; overflow: hidden; }
.rel-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; background: #f8f7fb; border-bottom: 1px solid var(--border); }
.rel-btn {
  min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--text); font-size: 0.9rem; line-height: 1; cursor: pointer;
}
.rel-btn:hover { background: #fff; border-color: var(--border); }
.rel-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.rel-format-select { height: 30px; border: 1px solid var(--border); border-radius: 5px; background: #fff; font-size: 0.85rem; padding: 0 4px; }
.rel-color { width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 5px; background: #fff; cursor: pointer; }
.rel-content { min-height: 180px; padding: 12px 14px; outline: none; font-size: 0.95rem; line-height: 1.5; }
.rel-content:focus { background: #fffdf8; }
.rel-content blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--muted); }
/* Zeilenabstand kommt vom margin-bottom der Labels - kein zusätzlicher
   row-gap, sonst sind umbrechende Felder (mobil) weiter auseinander als
   Felder außerhalb einer Zeile. */
.stacked-form .form-row { display: flex; gap: 0 16px; flex-wrap: wrap; }
/* Feedback 10/2026: Spalten nicht zu schmal - lange Auswahltexte wurden
   abgeschnitten, umbrechende Beschriftungen schoben Felder aus der Linie.
   Lieber eine Zeile mehr als gequetschte Felder. */
.stacked-form .form-row > label, .stacked-form .form-row > div { flex: 1 1 240px; min-width: 240px; }
@media (max-width: 600px) { .stacked-form .form-row > label, .stacked-form .form-row > div { min-width: 100%; } }
td select { min-width: 200px; max-width: 100%; }
.cq-section-heading { margin: 18px 0 8px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.95rem; color: var(--text); }
.cq-section-heading:first-child { margin-top: 0; padding-top: 0; border-top: none; }

section { margin-bottom: 40px; }
section h2 { color: var(--text); font-size: 1.15rem; }

/* ---------------------------------------------------------------------- */
/* Dashboard: Stat-Cards mit Icon                                         */
/* ---------------------------------------------------------------------- */
/* Kacheln gleichmäßig verteilen: max. 3 je Zeile (6 Kacheln = 2 volle
   Zeilen statt 5 + 1 einzelne), schmal 2, sehr schmal 1. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin: 24px 0 32px; }
@media (max-width: 700px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .stat-grid { grid-template-columns: 1fr; } }
.stat-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.stat-value { font-size: 1.5rem; font-weight: 700; }
.stat-label { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }

.icon-box {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.icon-box svg { width: 22px; height: 22px; }
.icon-purple { background: #6b46c1; }
.icon-blue { background: #2563eb; }
.icon-pink { background: #db2777; }
.icon-orange { background: #ea580c; }
.icon-teal { background: #0d9488; }
.icon-green { background: #16a34a; }

.dashboard-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.dashboard-columns > .widget-card { height: 100%; box-sizing: border-box; }
@media (max-width: 900px) { .dashboard-columns { grid-template-columns: 1fr; } }

.widget-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; }
.widget-card h2 { margin: 0 0 14px; font-size: 1.02rem; }
.widget-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.widget-row:last-child { border-bottom: none; }
.widget-row-main { flex: 1; min-width: 0; }
.widget-row-title { font-weight: 600; font-size: 0.92rem; }
.widget-row-sub { color: var(--muted); font-size: 0.8rem; }
.widget-row-value { font-weight: 700; text-align: right; white-space: nowrap; }
.widget-empty { color: var(--muted); font-size: 0.9rem; padding: 8px 0; }

.avatar-circle {
  width: 34px; height: 34px; border-radius: 50%; background: #eee9f7; color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}
.date-box {
  width: 44px; text-align: center; border: 1px solid var(--border); border-radius: 8px; padding: 4px 0; flex-shrink: 0;
}
.date-box .day { font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.date-box .mon { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; }

/* ---------------------------------------------------------------------- */
/* Event-Subnav: horizontale Tab-Leiste innerhalb eines Events             */
/* ---------------------------------------------------------------------- */
.event-subnav {
  display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.event-subnav a {
  display: inline-block; padding: 10px 16px; color: var(--muted); text-decoration: none;
  font-size: 0.92rem; font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap;
}
.event-subnav a:hover { color: var(--text); }
.event-subnav a.active { color: var(--accent); border-bottom-color: var(--accent); }
.event-subnav-title { padding: 6px 4px 14px; }
.event-subnav-title h1 { font-size: 1.3rem; }

/* ---------------------------------------------------------------------- */
/* Settings: Sidebar-Tabs                                                 */
/* ---------------------------------------------------------------------- */
.settings-layout { display: flex; gap: 28px; align-items: flex-start; }
.settings-nav { width: 210px; flex-shrink: 0; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.settings-nav a {
  display: block; padding: 10px 14px; border-radius: 8px; color: var(--text);
  text-decoration: none; font-size: 0.92rem; margin-bottom: 2px;
}
.settings-nav a:hover { background: #f2effa; }
.settings-nav a.active { background: var(--accent); color: #fff; }
.settings-panel { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------------- */
/* Öffentliche Buchungsseite                                              */
/* ---------------------------------------------------------------------- */
.public-content { max-width: 720px; }
.public-card {
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.event-description { margin: 16px 0; white-space: pre-line; }
/* Logo auf der öffentlichen Event-Seite (Feedback Runde 10: "schöner
   einbauen") - vorher ein nacktes, linksbündiges <img> ohne jede Fassung,
   das auf farbigem Seitenhintergrund und bei transparenten/weißen Logos
   wie ein loses Bild statt wie platzierte Veranstalter-Marke wirkte. Jetzt
   zentriert, mit dezenter Karte (weißer Hintergrund, Innenabstand, Schatten)
   gerahmt und auf eine ruhige Standardgröße begrenzt statt beliebig groß. */
.event-logo {
  max-width: 220px; max-height: 140px; width: auto; height: auto;
  display: block; margin: 0 auto 24px;
  background: #fff; padding: 12px; border-radius: 14px;
  border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  object-fit: contain;
}
.event-detail-logo { max-height: 56px; max-width: 200px; border-radius: 6px; margin-right: 12px; }

.ticket-type-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.ticket-type-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
}
.ticket-type-card.highlighted { border-color: var(--accent); background: #f7f4fc; }
/* min-width:0 ist der eigentliche Fix gegen Überlappungen: ohne das darf ein
   Flex-Item nicht unter seine intrinsische Inhaltsbreite schrumpfen, wodurch
   lange Ticketnamen/-beschreibungen Preis und "Hinzufügen"-Button auf
   schmalen Bildschirmen überlappt haben statt umzubrechen. */
.ticket-type-main { flex: 1 1 200px; min-width: 0; }
.ticket-type-name { font-weight: 600; }
/* Ausklappbare Tickettyp-Beschreibung: bleibt innerhalb der Karte (kein
   Overflow/kein Ueberlappen von Preis/Button), auch bei langem Text -
   word-break faengt sehr lange Woerter/Links ab. */
.ticket-type-description { max-width: 100%; }
.ticket-type-description summary { cursor: pointer; word-break: break-word; }
.ticket-type-description[open] summary { margin-bottom: 2px; }
.ticket-type-description div { word-break: break-word; }
.ticket-type-price { font-weight: 700; min-width: 90px; text-align: right; flex-shrink: 0; }
/* Rabattpreis-Anzeige (Feedback Runde 12): alter Preis durchgestrichen,
   neuer Preis daneben - sofort sichtbar statt erst im Warenkorb. */
.ticket-type-price .price-original { text-decoration: line-through; color: var(--muted); font-weight: 400; margin-right: 6px; }
.ticket-type-price .price-discounted { color: var(--accent); }
.ticket-type-action { flex-shrink: 0; }
.ticket-type-action form { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }

.promo-code-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 16px 14px;
  margin: 14px 0;
}
.promo-code-box summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 12px 0; }
.promo-code-box[open] summary { margin-bottom: 4px; }

/* ---------------------------------------------------------------------- */
/* Standalone-Eventseite (Feedback Runde 25, Vorbild Hi Events): eigene    */
/* Gestaltung für den direkten Aufruf von /e/<slug> - die Widget/iFrame-   */
/* Einbettung (public_event.html, .public-card) bleibt bewusst unverändert */
/* kompakt/neutral, da sie sich in eine fremde Seite einfügen soll.        */
/* ---------------------------------------------------------------------- */
.event-page { max-width: 640px; margin: 0 auto; }
.event-hero {
  height: 220px; border-radius: 16px 16px 0 0; background-size: cover; background-position: center;
  background-color: #eee9f7;
}
.event-hero-placeholder { background-image: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, black)); }
.event-page-card {
  background: #fff; border-radius: 0 0 16px 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  padding: 24px 28px; margin-bottom: 20px;
}
.event-page-card:not(:first-of-type) { border-radius: 16px; }
@media (max-width: 480px) { .event-page-card { padding: 20px; } }

.event-page-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.event-org-pill {
  display: inline-flex; align-items: center; gap: 6px; background: #f1eefa; color: var(--accent);
  border-radius: 999px; padding: 5px 12px 5px 6px; font-size: 0.82rem; font-weight: 600;
}
.event-org-pill img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.event-share-btn {
  background: #fff; border: 1px solid var(--border); color: var(--muted); border-radius: 50%;
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; flex-shrink: 0;
}
.event-share-btn:hover { border-color: var(--accent); color: var(--accent); }
.event-share-btn svg { width: 17px; height: 17px; }

.event-meta-list { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.event-meta-row { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; }
.event-meta-row svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); margin-top: 1px; }
.event-meta-row.event-meta-warning svg { color: #c62828; }
.event-meta-row.event-meta-warning span { color: #c62828; font-weight: 600; }

.event-action-row { margin-top: 8px; }
.secondary-link-btn {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--accent);
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 16px; font-size: 0.9rem;
  font-weight: 600; cursor: pointer; text-decoration: none;
}
.secondary-link-btn:hover { border-color: var(--accent); }
.secondary-link-btn svg { width: 16px; height: 16px; }
.event-calendar-dropdown { position: relative; display: inline-block; }
.event-calendar-dropdown summary { list-style: none; }
.event-calendar-dropdown summary::-webkit-details-marker { display: none; }
.event-calendar-menu {
  position: absolute; top: calc(100% + 6px); left: 0; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 6px; min-width: 220px; z-index: 5;
  display: flex; flex-direction: column;
}
.event-calendar-menu a { padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 0.9rem; }
.event-calendar-menu a:hover { background: #f7f6fa; }

.event-map-frame { width: 100%; height: 260px; border: 1px solid var(--border); border-radius: 10px; margin-top: 12px; }

.occurrence-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.occurrence-table td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.occurrence-table tr:last-child td { border-bottom: none; }

.attendee-block { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }
.attendee-block:first-child { border-top: none; margin-top: 0; padding-top: 0; }

/* ---------------------------------------------------------------------- */
/* Ticket-Ansicht (öffentlich, /ticket/<token>) - "Boarding-Pass"-Look     */
/* ---------------------------------------------------------------------- */
.ticket-card-modern {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1); max-width: 420px; margin: 0 auto;
}
.ticket-card-header {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, black));
  color: #fff; text-align: center; padding: 32px 24px 26px;
}
.ticket-card-header h1 { color: #fff; font-size: 1.3rem; margin: 0 0 6px; }
.ticket-card-header p { margin: 2px 0; opacity: 0.92; font-size: 0.92rem; }
.ticket-card-venue { font-weight: 600; }
.ticket-card-logo { max-height: 84px; max-width: 220px; margin: 0 auto 16px; display: block; }
.ticket-card-stub { padding: 28px 28px 32px; text-align: center; }
.ticket-card-qr { display: flex; flex-direction: column; align-items: center; }
.ticket-card-qr #qrcode { padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; display: inline-flex; color-scheme: only light; }
.ticket-card-qr #qrcode img { display: block; max-width: 100%; height: auto; }
.ticket-card-divider { display: flex; align-items: center; gap: 8px; margin: 22px 0; }
.ticket-card-divider span { flex: 1; border-top: 2px dashed var(--border); }
.ticket-card-info { margin: 0 auto; text-align: left; }
.ticket-card-info th { color: var(--muted); font-weight: 600; padding: 6px 16px 6px 0; border: none; background: none; text-transform: none; font-size: 0.88rem; }
.ticket-card-info td { padding: 6px 0; border: none; font-size: 0.92rem; }
.ticket-description { text-align: left; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width: 480px) {
  .ticket-card-header { padding: 26px 18px 20px; }
  .ticket-card-stub { padding: 22px 18px 26px; }
}

/* Honeypot-Feld der Kasse: für Menschen unsichtbar (auch für Screenreader
   dank aria-hidden im Markup), aber im DOM vorhanden - einfache Bots, die
   Formularfelder blind ausfüllen, tappen hinein. */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.totals { margin: 20px 0; text-align: right; }
.totals-final { font-weight: 700; font-size: 1.15rem; color: var(--accent); }

/* ---------------------------------------------------------------------- */
/* Formulardesigner (Drag&Drop + Live-Vorschau)                           */
/* ---------------------------------------------------------------------- */
.form-designer-layout { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
@media (max-width: 1000px) { .form-designer-layout { grid-template-columns: 1fr; } }
.fd-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; min-height: 12px; }
.fd-card {
  display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; cursor: grab;
}
.fd-card.fd-dragging { opacity: 0.4; }
.fd-handle { color: var(--muted); font-size: 1.1rem; flex-shrink: 0; }
.fd-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fd-card-main > div:first-child { font-size: 0.92rem; }
.fd-section-input { max-width: 220px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.82rem; }
.fd-card-actions { display: flex; gap: 10px; flex-shrink: 0; font-size: 0.85rem; white-space: nowrap; }
.form-designer-preview { position: sticky; top: 16px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; }
.fd-preview-iframe { width: 100%; height: 640px; border: 1px solid var(--border); border-radius: 10px; background: #fafafa; }

/* ---------------------------------------------------------------------- */
/* Check-in                                                                */
/* ---------------------------------------------------------------------- */
.checkin-event-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 20px; }
.checkin-event-card {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 20px;
  text-decoration: none; color: var(--text); display: block;
}
.checkin-event-card:hover { border-color: var(--accent); }
.checkin-event-card h3 { margin: 0 0 6px; font-size: 1.02rem; }
.checkin-progress { background: var(--border); border-radius: 999px; height: 8px; margin: 12px 0 6px; overflow: hidden; }
.checkin-progress-bar { background: var(--accent); height: 100%; }
.checkin-progress-label { color: var(--muted); font-size: 0.82rem; }

.checkin-layout { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .checkin-layout { grid-template-columns: 1fr; } }

.checkin-scan-box { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
#checkin-video-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #111; border-radius: 10px; overflow: hidden; margin-bottom: 14px; border: 4px solid transparent; transition: border-color 0.15s ease; }
#checkin-video-wrap video { width: 100%; height: 100%; object-fit: cover; }
/* Feedback Runde 19: der Rahmen der Kamera wird bislang nur von der Scanner-
   Bibliothek selbst grün, sobald sie GRAFISCH einen QR-Code im Bild erkennt -
   das sagt nichts darüber aus, ob der Scan bei UNS gültig war (bezahlt,
   noch nicht eingecheckt, ...). Diese beiden Klassen spiegeln stattdessen
   das tatsächliche Scan-ERGEBNIS wider (siehe checkin_scanner.html). */
#checkin-video-wrap.scan-flash-ok { border-color: #1a7f37; }
#checkin-video-wrap.scan-flash-error { border-color: #c62828; }

/* Feedback Runde 21: html5-qrcode zeichnet selbst weiße Eck-Markierungen,
   die nur grafisch (grün) reagieren, sobald irgendein QR-Code erkannt wird -
   unabhängig vom tatsächlichen Check-in-Ergebnis. Diese eigenen, selbst
   kontrollierten Eckmarkierungen liegen über dem Videobild und folgen
   stattdessen exakt dem echten Ergebnis (scan-flash-ok/-error), genau wie
   der Rahmen von #checkin-video-wrap. */
.checkin-qr-corner {
  position: absolute;
  width: 32px;
  height: 32px;
  border-color: #fff;
  border-style: solid;
  border-width: 0;
  transition: border-color 0.15s ease;
  pointer-events: none;
  z-index: 5;
}
.checkin-qr-corner.tl { top: 18%; left: 18%; border-top-width: 4px; border-left-width: 4px; }
.checkin-qr-corner.tr { top: 18%; right: 18%; border-top-width: 4px; border-right-width: 4px; }
.checkin-qr-corner.bl { bottom: 18%; left: 18%; border-bottom-width: 4px; border-left-width: 4px; }
.checkin-qr-corner.br { bottom: 18%; right: 18%; border-bottom-width: 4px; border-right-width: 4px; }
#checkin-video-wrap.scan-flash-ok .checkin-qr-corner { border-color: #1a7f37; }
#checkin-video-wrap.scan-flash-error .checkin-qr-corner { border-color: #c62828; }

.checkin-manual { display: flex; gap: 8px; margin-top: 6px; }
.checkin-manual input { flex: 1; }

.checkin-stats-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.checkin-stats-bar .stat-value { font-size: 1.3rem; }

.checkin-result { border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; border: 1px solid var(--border); }
.checkin-result.result-ok { background: #eafaf0; border-color: #86d9a8; }
.checkin-result.result-error { background: #fdecea; border-color: #f3b8b3; }
/* Feedback Runde 18: kurze, groß hervorgehobene Statuszeile - bewusst nur
   Grün (Erfolg) oder Rot (alles andere: nicht gültig/nicht bezahlt, bereits
   eingecheckt, Fehler). Ausnahme seit 10/2026: Orange für "Nicht für diesen
   Termin gültig" beim Check-in pro Termin (siehe .result-warn). */
.checkin-result-status { font-weight: 800; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.02em; }
.checkin-result.result-ok .checkin-result-status { color: #1a7f37; }
.checkin-result.result-error .checkin-result-status { color: #c62828; }
/* "Nicht für diesen Termin gültig" (Check-in pro Termin): Orange */
.checkin-result.result-warn { background: #fff4e5; border-color: #f5b971; }
.checkin-result.result-warn .checkin-result-status { color: #c25e00; }
.checkin-result.result-warn .checkin-extra-infos { color: #8a4300; font-weight: 600; }
#checkin-video-wrap.scan-flash-warn { border-color: #e67e00; }
#checkin-video-wrap.scan-flash-warn .checkin-qr-corner { border-color: #e67e00; }
.checkin-result-name { font-weight: 700; font-size: 1.1rem; margin-top: 2px; }
.checkin-result-sub { color: var(--muted); font-size: 0.88rem; margin-top: 2px; }

.checkin-log { max-height: 420px; overflow-y: auto; }
.checkin-log-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.checkin-log-row:last-child { border-bottom: none; }
.checkin-log-empty { color: var(--muted); font-size: 0.9rem; }

/* ---------------------------------------------------------------------- */
/* Mobile / Responsive                                                    */
/* ---------------------------------------------------------------------- */
/* Breiter als die eigentliche "Mobile Chrome"-Grenze (780px) gefasst, weil
   das hier reine Schutzregeln gegen zu breiten Inhalt sind (keine optische
   Umschaltung) - sie müssen auch Quer-Format-Handys abdecken (z. B. iPhone
   14 quer ≈ 844px), die zwischen 780 und ~960px liegen. Ohne das würde dort
   eine zu breite Tabelle durch das overflow-x:hidden auf html/body (siehe
   oben) einfach abgeschnitten statt scrollbar zu sein - schlimmer als vor
   dem Sicherheitsnetz. Bei echten Desktop-Breiten (Content max-width 1160px)
   ist die Regel ein No-Op, weil dort kaum eine Tabelle breiter als der
   verfügbare Platz ist. */
@media (max-width: 960px) {
  /* Tabellen: horizontal scrollbar statt Zeilenumbruch/Überlappung.
     WICHTIG: hier bewusst KEIN width:100% auf thead/tbody/tr setzen - das
     hätte die Spalten auf die (schmale) Viewport-Breite gequetscht statt
     der Tabelle ihre natürliche Inhaltsbreite zu lassen, wodurch der
     horizontale Scroll wirkungslos blieb und Zellen ineinander gequetscht
     wurden (genau das vom Nutzer gemeldete "ganz extrem" auf Mobilgeräten).
     Ohne width:100% schrumpft/wächst die (anonyme) Tabelle auf ihre
     Inhaltsbreite, overflow-x:auto macht genau diese Breite scrollbar. */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table thead, table tbody, table tr { display: table; }
  table th, table td { white-space: nowrap; }
}

@media (max-width: 780px) {
  .content { padding: 16px; }
  .public-card { padding: 20px; }
  .card { padding: 16px 18px; }

  .app-shell { flex-direction: column; min-height: 0; }

  .topbar { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
  .page-head { flex-wrap: wrap; }

  /* Touch-Targets: Buttons/Links auf mind. ~44px Höhe bringen (Empfehlung
     44-48px), ohne die Desktop-Maße anzufassen - alles hier liegt bewusst
     nur innerhalb dieser Media Query. */
  button, input[type="submit"] { min-height: 44px; }
  .link-button, table td > a {
    min-height: 44px; padding: 10px 4px; display: inline-flex; align-items: center;
  }

  /* Karten-Layout für Tabellen mit Klasse "table-cards" - kompakt
     (Feedback 10/2026: bisher stand jedes Feld untereinander mit eigener
     Überschrift, ein Eintrag füllte den ganzen Bildschirm). Jetzt: erste
     Spalte als fette Titelzeile, alle weiteren Felder fließend nebeneinander
     als "LABEL Wert"; Zellen mit Eingabefeldern/Formularen nehmen die volle
     Breite. Leere Zellen entfallen. */
  table.table-cards { display: block; overflow-x: visible; max-width: 100%; border: none; background: none; box-shadow: none; }
  table.table-cards thead { display: none; }
  table.table-cards tbody { display: block; }
  table.table-cards tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
    padding: 10px 12px; margin-bottom: 8px; background: #fff;
    border: 1px solid var(--border); border-radius: 10px;
  }
  table.table-cards td { display: block; width: auto; padding: 0; border: none; white-space: normal; font-size: 0.88rem; background: none; }
  table.table-cards td:empty { display: none; }
  table.table-cards td::before {
    content: attr(data-label); display: inline; margin-right: 6px;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted);
  }
  table.table-cards td[data-label=""]::before, table.table-cards td:not([data-label])::before { display: none; }
  table.table-cards td:first-child { flex-basis: 100%; font-weight: 600; font-size: 0.97rem; }
  table.table-cards td:first-child::before { display: none; }
  table.table-cards td:first-child:has(> input[type="checkbox"]) { flex-basis: auto; }
  table.table-cards td:first-child:has(> input[type="checkbox"]) + td { flex: 1 1 0; font-weight: 600; }
  table.table-cards td.m-hide { display: none; }
  table.table-cards td.tc-title { order: -1; flex-basis: 100%; font-weight: 600; font-size: 0.97rem; }
  table.table-cards td.tc-title::before { display: none; }
  table.table-cards td:has(input[type="text"], input[type="email"], input[type="number"], select, textarea) { flex-basis: 100%; }
  table.table-cards td > a, table.table-compact td > a, table.table-cards .link-button, table.table-compact .link-button { min-height: 0; padding: 0; display: inline; }
  table.table-cards td form input[type="text"],
  table.table-cards td form input[type="email"] { width: 100%; }

  .settings-layout { flex-direction: column; }
  .settings-nav { width: 100%; display: flex; overflow-x: auto; gap: 2px; padding: 6px; }
  .settings-nav a { white-space: nowrap; margin-bottom: 0; min-height: 44px; display: flex; align-items: center; }

  .auth-card { margin: 24px auto; padding: 24px; width: calc(100% - 32px); }

  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form label { min-width: 0; }

  .event-subnav-title h1 { font-size: 1.1rem; }
  h1 { font-size: 1.25rem; }

  .ticket-type-price { text-align: left; }
  .ticket-type-action form { flex-wrap: wrap; }

  /* Event-Subnav auf schmalen Screens: kompakter, damit die vielen Tabs
     nicht wie eine kaputte, überlaufende Leiste wirken. */
  .event-subnav { gap: 0; margin-bottom: 16px; }
  .event-subnav a { padding: 8px 10px; font-size: 0.85rem; min-height: 44px; display: inline-flex; align-items: center; }

  .page-head { gap: 10px; }
  .page-head-actions { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 480px) {
  .event-subnav a { padding: 7px 8px; font-size: 0.8rem; }
}

/* Fotos zu Tickettypen / Stundenplan (anklickbare Thumbnails + Lightbox) */
.photo-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.photo-thumb { display: block; line-height: 0; }
.photo-thumb img, .photo-strip .photo-new { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(128,128,128,0.35); cursor: zoom-in; display: block; }
.photo-strip-small .photo-thumb img { width: 36px; height: 36px; border-radius: 50%; }
.photo-admin .photo-existing { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.8rem; }
.photo-admin .photo-existing img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(128,128,128,0.35); }
.lb-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.88); display: flex; align-items: center; justify-content: center; }
.lb-overlay[hidden] { display: none; }
.lb-overlay img { max-width: 92vw; max-height: 88vh; border-radius: 6px; box-shadow: 0 6px 30px rgba(0,0,0,0.5); }
.lb-btn { position: absolute; background: rgba(255,255,255,0.15); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; }
.lb-btn:hover { background: rgba(255,255,255,0.3); }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: #fff; font-size: 0.9rem; }

/* Stundenplan (Ticketlink/Landingpage): Tages-Timeline, linksbündig */
.sched { margin-top: 28px; text-align: left; }
.sched-occurrences { margin-top: 22px; }
.sched-card { line-height: 1.55; padding: 12px 14px; border-radius: 10px; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, #fff); }
.sched-card-link { margin-top: 6px; }
.sched-cal-actions { margin-top: 10px; }
.sched-about-text { white-space: pre-line; line-height: 1.55; padding: 12px 14px; border-radius: 10px; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, #fff); }
.sched-title { margin: 0 0 14px; text-align: center; font-size: 1.1rem; letter-spacing: 0.02em; }
.sched-day { margin-bottom: 18px; }
.sched-day-head { display: flex; align-items: baseline; gap: 8px; padding: 0 2px 6px; margin-bottom: 8px; border-bottom: 2px solid var(--accent); }
.sched-weekday { font-weight: 700; color: var(--accent); font-size: 1rem; }
.sched-date { color: #6b6b6b; font-size: 0.85rem; }
.sched-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sched-item { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: start; padding: 10px 12px; border-radius: 10px; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, #fff); }
.sched-time { display: flex; flex-direction: column; line-height: 1.25; font-variant-numeric: tabular-nums; }
.sched-time strong { font-size: 1rem; color: var(--accent); }
.sched-time span { font-size: 0.78rem; color: #6b6b6b; }
.sched-time .sched-allday { font-size: 0.82rem; }
.sched-next-day { font-style: normal; font-size: 0.68rem; font-weight: 600; margin-top: 3px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); align-self: flex-start; }
.sched-name { font-weight: 600; line-height: 1.3; }
.sched-meta { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 0.85rem; color: #555; }
.sched-meta svg { width: 14px; height: 14px; flex-shrink: 0; fill: currentColor; opacity: 0.7; }
.sched-notes { margin-top: 5px; font-size: 0.82rem; font-style: italic; color: #666; }
.sched-photos .photo-strip { margin: 0; flex-wrap: nowrap; }
@media (max-width: 380px) {
  .sched-item { grid-template-columns: 54px 1fr; }
  .sched-photos { grid-column: 2; }
  .sched-photos .photo-strip { flex-wrap: wrap; }
}

/* Detailansichten (Teilnehmer/Bestellung): Fakten-Abschnitte */
.data-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; margin-bottom: 24px; }
.data-section { background: var(--surface, #fff); border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.data-section h3 { margin: 0; padding: 8px 14px; font-size: 14px; background: var(--accent, #2c3e50); color: #fff; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 6px 14px; border-top: 1px solid #f0f1f3; word-break: break-word; }
.data-table th { width: 38%; font-weight: 600; color: #6b7280; }
.data-table tr:first-child th, .data-table tr:first-child td { border-top: 0; }
.data-ticket { margin-bottom: 20px; }
.data-ticket > h4 { margin: 0 0 8px; }

/* Seitentour (app/static/js/tour.js, Schritte in app/tours.py) */
.tour-launch { position: fixed; right: 18px; bottom: 18px; z-index: 900; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px; border: 0; cursor: pointer; font-size: 14px; font-weight: 600;
  background: var(--accent, #2c3e50); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.tour-launch:hover { filter: brightness(1.1); }
.tour-launch .tour-q { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.25); align-items: center; justify-content: center; font-size: 13px; }
.tour-shield { position: fixed; inset: 0; z-index: 9000; }
.tour-shield.tour-dim { background: rgba(15,23,42,.6); }
.tour-spot { position: fixed; z-index: 9001; border-radius: 8px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(15,23,42,.6), 0 0 0 3px var(--accent, #2c3e50) inset; }
.tour-pop { position: fixed; z-index: 9002; width: 380px; background: #fff; color: #1f2937; border-radius: 12px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: 14px; line-height: 1.45; }
.tour-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.tour-title { font-weight: 700; font-size: 15px; color: var(--accent, #2c3e50); }
.tour-close { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: #6b7280; padding: 0 4px; }
.tour-body { white-space: pre-line; }
.tour-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.tour-count { color: #6b7280; font-size: 12px; }
.tour-btns { display: flex; gap: 8px; }
.tour-btn { padding: 6px 14px; border-radius: 8px; border: 0; cursor: pointer; font-size: 14px; background: var(--accent, #2c3e50); color: #fff; }
.tour-btn.secondary { background: #e5e7eb; color: #1f2937; }
@media print { .tour-launch, .tour-shield, .tour-spot, .tour-pop { display: none !important; } }

/* Event-Reiter als erste Leiste unter dem Hauptmenü, Seitenüberschrift (Topbar) darunter */
.main-area > .event-subnav { background: #fff; padding: 0 32px; margin-bottom: 0; border-bottom: 1px solid var(--border); }
@media (max-width: 780px) { .main-area > .event-subnav { padding: 0 8px; } }
.main-area > .event-subnav a { padding: 12px 12px; }
@media (max-width: 780px) { .main-area > .event-subnav a { padding: 8px 10px; } }

/* Globale Suche (Sidebar) */
.gs-results {
  position: fixed; z-index: 1000; width: 360px; max-width: calc(100vw - 16px); max-height: 70vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 4px 0;
}
.gs-group { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #777); padding: 8px 12px 2px; }
.gs-item { display: block; padding: 6px 12px; text-decoration: none; color: inherit; }
.gs-item:hover, .gs-item.active { background: color-mix(in srgb, var(--accent) 10%, white); }
.gs-title { display: block; font-weight: 600; font-size: 0.9rem; }
.gs-sub { display: block; font-size: 0.78rem; color: var(--muted, #777); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-all, .gs-empty { display: block; padding: 8px 12px; font-size: 0.85rem; border-top: 1px solid var(--border); margin-top: 4px; }
.gs-empty { border-top: none; color: var(--muted, #777); }
kbd { border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 0.85em; background: #f7f7f9; }
/* Ticket: Aktionen (Kalender, Google Wallet) */
.ticket-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ticket-action {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border, #ddd); text-decoration: none; color: inherit; font-size: 0.9rem; background: #fff;
}
.ticket-action:hover { border-color: var(--accent); }
.ticket-action[hidden] { display: none; }
.ticket-gcal { position: relative; }
.ticket-gcal > summary { list-style: none; cursor: pointer; }
.ticket-gcal > summary::-webkit-details-marker { display: none; }
.ticket-gcal > summary::after { content: " \25BE"; }
.ticket-gcal-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; }
.ticket-gcal-list a { padding: 4px 2px; text-decoration: none; }
.gwallet-btn { background: #1f1f1f; color: #fff; border-color: #1f1f1f; font-weight: 600; }
.gwallet-btn:hover { background: #000; color: #fff; }
.ticket-maps-link { color: inherit; text-decoration: none; }

/* Meine Buchungen */
.my-bookings .mb-event { border-top: 1px solid var(--border, #e5e5e5); padding: 12px 0; }
.my-bookings .mb-past { opacity: .75; }
.my-bookings .mb-order { margin: 8px 0 0; }
.my-bookings .mb-order-head { font-weight: 600; font-size: .92rem; }
.my-bookings .mb-tickets { margin: 4px 0 0; padding-left: 18px; }
.my-bookings .mb-tickets li { margin: 4px 0; }

/* Check-in pro Termin / Anwesenheitsliste */
.checkin-occ-select select { min-width: min(360px, 100%); }
.attendance-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.attendance-table { border-collapse: collapse; width: 100%; display: table; }
.attendance-table th, .attendance-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; font-size: 0.88rem; }
.attendance-table .att-name { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; }
.attendance-table thead th { font-weight: 600; vertical-align: bottom; }
.att-yes { color: #1b7f3b; font-weight: 700; font-size: 1.1rem; }
.att-no { color: #b0b0b0; font-size: 1.2rem; }
.att-na { color: #d0d0d0; }
.att-sum { font-weight: 600; }
/* globale Mobil-Regeln (table als block) für diese Matrix zurücksetzen */
.attendance-wrap table.attendance-table { display: table; max-width: none; overflow: visible; }
.attendance-wrap .attendance-table thead { display: table-header-group; }
.attendance-wrap .attendance-table tbody { display: table-row-group; }
.attendance-wrap .attendance-table tfoot { display: table-footer-group; }
.attendance-wrap .attendance-table tr { display: table-row; }

/* Interne Anmerkungen */
.internal-note-card { border-left: 4px solid #d97706; }
.internal-note-card textarea { width: 100%; box-sizing: border-box; margin-top: 6px; }
.ticket-note { margin-top: 6px; font-size: 0.88rem; }
.ticket-note summary { cursor: pointer; color: var(--muted, #666); }
.ticket-note textarea { width: 100%; min-width: 220px; box-sizing: border-box; }
.note-flag { cursor: help; }

/* PWA-Installationsleiste am unteren Rand (Muster aus der Japanisch-App) */
.pwa-install-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: color-mix(in srgb, var(--accent) 8%, white);
  border-top: 1px solid color-mix(in srgb, var(--accent) 22%, white);
  box-shadow: 0 -4px 14px rgba(0,0,0,.06);
  color: var(--accent-dark, var(--accent)); font-size: 0.85rem;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
/* Platz schaffen, damit die Leiste nichts verdeckt (auch den Tour-Button) */
body.pwa-banner-visible { padding-bottom: 56px; }
body.pwa-banner-visible .tour-launch { bottom: 72px; }
.pwa-install-banner[hidden] { display: none; }
.pwa-install-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.pwa-install-actions button[hidden] { display: none; }
#pwa-install-btn { padding: 4px 12px; font-size: 0.8rem; border-radius: 8px; white-space: nowrap; }
.pwa-install-dismiss { background: none; border: none; color: inherit; opacity: .6; cursor: pointer; padding: 2px 4px; font-size: 1rem; }
.pwa-install-dismiss:hover { opacity: 1; }

/* Kommunikationszentrale: Reiter, Gesprächsliste, Chat */
.nav-badge { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #d93025; color: #fff;
  font-size: 11px; font-weight: 700; align-items: center; justify-content: center; margin-left: auto; }
.messages-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.messages-tabs::-webkit-scrollbar { display: none; }
.messages-tabs a { padding: 8px 14px; text-decoration: none; color: var(--muted, #666); border-bottom: 2px solid transparent; display: inline-flex; gap: 6px; align-items: center;
  white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 720px) {
  .messages-tabs { margin-left: -4px; margin-right: -4px; }
  .messages-tabs a { padding: 8px 10px; font-size: 0.9rem; min-height: 44px; }
}
.messages-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.chat-layout { display: grid; grid-template-columns: 320px 1fr; gap: 0; border: 1px solid var(--border); border-radius: 12px; background: #fff;
  height: calc(100vh - 230px); min-height: 460px; overflow: hidden; }
.chat-list { border-right: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; }
.chat-filter { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-bottom: 1px solid var(--border); }
.chat-filter input, .chat-filter select { width: 100%; box-sizing: border-box; }
.chat-views { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.chat-views a { font-size: 0.78rem; padding: 3px 9px; border-radius: 999px; text-decoration: none; color: var(--muted, #666); border: 1px solid var(--border); }
.chat-views a.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.chat-item { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.chat-item:hover { background: #f7f6fa; }
.chat-item.active { background: color-mix(in srgb, var(--accent) 9%, white); }
.chat-item-top { display: flex; justify-content: space-between; gap: 8px; font-size: 0.9rem; }
.chat-item-top .muted { font-size: 0.72rem; white-space: nowrap; }
.chat-item-meta { font-size: 0.75rem; color: var(--muted, #777); }
.chat-item-preview { font-size: 0.82rem; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 26px; }
.chat-item.unread .chat-item-preview { color: #111; font-weight: 600; }
.chat-unread { position: absolute; right: 12px; bottom: 10px; background: var(--accent); color: #fff; border-radius: 9px; font-size: 11px; min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; font-weight: 700; }
.chat-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-empty { margin: auto; padding: 24px; text-align: center; max-width: 420px; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.chat-head-who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-head-who .muted { font-size: 0.8rem; }
.chat-back { display: none; text-decoration: none; font-size: 1.3rem; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip { font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, white); color: var(--accent-dark, var(--accent)); text-decoration: none; }
.chip-warn { background: #fff4e5; color: #8a4300; }
.chat-assign { padding: 6px 16px; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.chat-assign summary { cursor: pointer; color: var(--muted, #666); }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; background: #f6f5f9; display: flex; flex-direction: column; gap: 8px; }
.chat-day { text-align: center; margin: 6px 0; }
.chat-day span { font-size: 0.72rem; background: #e9e7ef; color: #666; padding: 2px 10px; border-radius: 999px; }
.bubble-row { display: flex; }
.bubble-row.out { justify-content: flex-end; }
.bubble { max-width: min(640px, 78%); padding: 8px 12px; border-radius: 14px; box-shadow: 0 1px 1px rgba(0,0,0,.06); background: #fff; }
.bubble-row.in .bubble { border-bottom-left-radius: 4px; }
.bubble-row.out .bubble { background: color-mix(in srgb, var(--accent) 14%, white); border-bottom-right-radius: 4px; }
.bubble.failed { background: #fdecea; border: 1px solid #f3b8b3; }
.bubble.auto { opacity: .75; }
.bubble-subject { font-size: 0.72rem; color: var(--muted, #777); margin-bottom: 2px; }
.bubble-text { white-space: pre-wrap; word-wrap: break-word; font-size: 0.92rem; line-height: 1.4; }
.bubble-full summary { font-size: 0.75rem; color: var(--muted, #777); cursor: pointer; margin-top: 4px; }
.bubble-full .bubble-text { margin-top: 6px; font-size: 0.82rem; color: #555; border-left: 2px solid #ddd; padding-left: 8px; }
.bubble-attach { font-size: 0.78rem; margin-top: 4px; }
.bubble-meta { font-size: 0.7rem; color: var(--muted, #888); margin-top: 4px; text-align: right; }
.chat-compose { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--border); background: #fff; margin: 0; }
.chat-compose textarea { flex: 1; resize: none; min-height: 42px; max-height: 220px; border-radius: 20px; padding: 10px 14px; box-sizing: border-box; }
.chat-compose button { border-radius: 20px; }
@media (max-width: 780px) {
  .chat-layout { grid-template-columns: 1fr; height: calc(100vh - 200px); }
  .chat-layout.has-current .chat-list { display: none; }
  .chat-layout:not(.has-current) .chat-pane { display: none; }
  .chat-back { display: inline; }
  .bubble { max-width: 88%; }
}

/* Fester Betreff-Anfang (Bestellnummer) bei Mailvorlagen/freien Mails */
.subject-prefix-group { display: flex; align-items: stretch; width: 100%; }
.subject-prefix { display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--border); border-right: 0;
  border-radius: 8px 0 0 8px; background: #f1eff6; color: #555; font-size: 0.85rem; white-space: nowrap; cursor: not-allowed; user-select: none; }
.subject-prefix-group input { flex: 1; border-top-left-radius: 0; border-bottom-left-radius: 0; min-width: 0; }

/* Fußzeile: manueller Override in Mailvorlagen */
.footer-manual-badge { background: #fff4e5; color: #8a4300; border: 1px solid #f5b971; margin-left: 6px; }

/* Chat: eingeklappte Fußzeile, formatiert */
.bubble-footer summary { color: var(--muted, #888); }
.footer-frame { display: block; width: 100%; min-width: 240px; height: 90px; border: 1px solid var(--border); border-radius: 8px; margin-top: 6px; background: #fff; }
.chat-footer-hint { font-size: 0.75rem; margin: 0; padding: 0 14px 8px; background: #fff; }

/* Kompakte Mobil-Listen (Feedback 10/2026: Teilnehmer-/Bestell-/Check-in-
   Listen zeigten am Handy pro Eintrag eine lange Karte mit allen Feldern).
   Desktop: normale Tabelle. Mobil: je Eintrag eine Zeile mit Name +
   Status-Badge, darunter die wichtigsten Infos als kurze Zeile. Spalten:
   tc-main (Name), tc-badge (Status rechts), tc-sub (Kurzinfos), tc-check
   (Auswahl), tc-actions (Aktionen), tc-hide (nur am Desktop). */
.m-only { display: none; }
a.plain-link { color: inherit; text-decoration: none; }
a.plain-link:hover { text-decoration: underline; }
@media (max-width: 780px) {
  .m-only { display: inline; }
  .d-only { display: none; }
  table.table-compact { display: block; overflow-x: visible; max-width: 100%; border: none; background: none; box-shadow: none; }
  table.table-compact thead { display: none; }
  table.table-compact tbody { display: block; }
  table.table-compact tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px;
    padding: 9px 12px; margin-bottom: 6px; background: #fff;
    border: 1px solid var(--border); border-radius: 10px;
  }
  table.table-compact tr::after { content: ""; flex-basis: 100%; height: 0; order: 1; }
  table.table-compact td { display: block; padding: 0; border: none; width: auto; white-space: normal; background: none; }
  table.table-compact td.tc-hide { display: none; }
  table.table-compact td.tc-check { order: 0; }
  table.table-compact td.tc-check input { width: 20px; height: 20px; margin: 0; }
  table.table-compact td.tc-main { order: 0; flex: 1 1 0; min-width: 0; font-weight: 600; font-size: 0.97rem; overflow-wrap: anywhere; }
  table.table-compact td.tc-badge { order: 0; margin-left: auto; text-align: right; font-size: 0.8rem; }
  table.table-compact td.tc-badge .badge { white-space: nowrap; }
  table.table-compact td.tc-badge .muted { font-size: 0.75rem !important; }
  table.table-compact td.tc-sub { order: 2; font-size: 0.82rem; color: var(--muted); }
  table.table-compact tr { position: relative; column-gap: 14px; }
  table.table-compact td.tc-main a::after { content: ""; position: absolute; inset: 0; }
  table.table-compact td.tc-sub a, table.table-compact td.tc-check, table.table-compact td.tc-actions { position: relative; z-index: 1; }
  table.table-compact td.tc-actions { order: 3; flex-basis: 100%; padding-top: 6px; }
}

/* Stammdaten: Trainer-Karten (Admin) und Trainer/Räume auf der Eventseite */
.trainer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.trainer-card { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: inherit; text-decoration: none; }
.trainer-card:hover { border-color: var(--accent); }
.trainer-card.inactive { opacity: 0.6; }
.trainer-card img, .trainer-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.trainer-avatar { display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); font-weight: 700; font-size: 1.3rem; }
.trainer-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 0.88rem; }
.trainer-card-body strong { font-size: 0.97rem; }
.md-field { margin: 10px 0; }
.md-label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
.md-pick { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; padding: 4px 0; }
.md-pick label.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: #fff; cursor: pointer; font-size: 0.88rem; margin: 0; }
.md-pick label.chip:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); }
.md-pick label.chip input { margin: 0; }
.md-pick img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* Eventinfo-Seite mit Reitern (Feedback 10/2026) */
.event-tabs {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; padding: 8px;
  position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--accent) 6%, #fff);
  border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.event-tabs::-webkit-scrollbar { display: none; }
.event-tabs a { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; text-decoration: none; color: inherit; font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.event-tabs a.active { background: var(--accent); color: #fff; }
body:not(.event-tabs-on) .event-tabs { display: none; }
.event-panel[hidden] { display: none; }
.ev-trainers { display: flex; flex-direction: column; gap: 14px; }
.ev-trainer { padding: 14px; border: 1px solid var(--border); border-radius: 14px; }
.ev-trainer-head { display: flex; gap: 14px; align-items: center; }
.ev-trainer-head h3 { margin: 0 0 2px; font-size: 1.08rem; }
.ev-trainer-photo img, .ev-trainer-head .trainer-avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ev-trainer-photo img { display: block; }
.ev-trainer-head .trainer-avatar { display: inline-flex; font-size: 1.8rem; }
.ev-trainer-bio { white-space: pre-line; line-height: 1.55; margin: 10px 0 0; }
.ev-trainer-slots { margin: 10px 0 0; padding-left: 18px; font-size: 0.9rem; }
.ev-trainer-slots li { margin: 3px 0; }
.ev-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 16px; }
.ev-room { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.ev-room h3 { margin: 0 0 4px; font-size: 1rem; }

/* Video (click-to-load) und Workshop-Beschreibung (Feedback 10/2026) */
.video-box { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; margin: 12px 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, #000), color-mix(in srgb, var(--accent) 45%, #000));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; text-align: center; padding: 12px; }
.video-box.is-loaded { padding: 0; background: #000; }
.video-box iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-load { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.15); color: #fff; border: 2px solid rgba(255,255,255,0.7); border-radius: 999px; padding: 10px 20px; font-weight: 700; cursor: pointer; }
.video-load:hover { background: rgba(255,255,255,0.28); }
.video-play { font-size: 1.2rem; }
.video-note { margin: 0; font-size: 0.78rem; opacity: 0.85; max-width: 420px; }
.video-note a { color: #fff; }
.sched-more { margin-top: 6px; font-size: 0.86rem; }
.sched-more summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; }
.sched-more summary::-webkit-details-marker { display: none; }
.sched-more summary::before { content: "\25B8 "; }
.sched-more[open] summary::before { content: "\25BE "; }
.sched-more-text { white-space: pre-line; line-height: 1.5; margin-top: 4px; color: #444; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.gallery-grid a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.gallery-grid a:hover img { transform: scale(1.04); }
@media (max-width: 480px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; } }

.gallery-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 16px; }
.gallery-admin-item { margin: 0; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 6px; }
.gallery-admin-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }
.gallery-caption input { width: 100%; margin-top: 6px; font-size: 0.82rem; padding: 4px 6px; }
.gallery-admin-actions { display: flex; gap: 8px; justify-content: space-between; margin-top: 4px; }
.gallery-admin-actions form { margin: 0; }

.inline-type-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-type-form input[type=text] { flex: 1 1 160px; min-width: 0; }

.slot-preview { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow-y: auto; }
.slot-chip { padding: 4px 9px; border-radius: 999px; font-size: 0.82rem; background: color-mix(in srgb, var(--accent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 30%, #fff); white-space: nowrap; }
.slot-chip.is-conflict { background: #fdecea; border-color: #f3b4ad; color: #9b1c12; text-decoration: line-through; }

/* Zahlung im Check-in-Scanner (Feedback 10/2026) */
.checkin-payment { margin: -6px 0 14px; padding: 12px 16px; }
.checkin-payment-now { margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.checkin-payment-form { margin-top: 10px; }
.checkin-payment-form label { display: block; margin-bottom: 8px; }
.checkin-payment-question { padding: 10px 12px; border-radius: 10px; background: #fff4e5; border: 1px solid #f5b971; }
.checkin-payment-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.checkin-payment-actions button { min-height: 44px; }
.checkin-payment-msg { margin-top: 6px; font-size: 0.85rem; }

/* Gruppen & Rechte */
.role-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.role-chips .chip { white-space: nowrap; }
.role-perms .checkbox-line { align-items: flex-start; }

/* Belegungsübersicht */
.occupancy-days { display: grid; gap: 12px; }
.occupancy-day h3 { margin: 0 0 8px; font-size: 1rem; }
.occupancy-list { list-style: none; margin: 0; padding: 0; }
.occupancy-item { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); align-items: baseline; }
.occupancy-item:first-child { border-top: none; }
.occupancy-time { min-width: 92px; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.occupancy-main { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.occupancy-item.occ-offered { opacity: 0.6; }
.occupancy-item.occ-conflict { background: #fdecea; border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.occ-conflict-label { color: #b3261e; font-weight: 600; font-size: 0.85rem; }
@media (max-width: 640px) { .occupancy-item { flex-direction: column; gap: 2px; } .occupancy-time { min-width: 0; } }

/* Ablauf (Termine + Programm je Tag) */
.ablauf { display: grid; gap: 12px; margin-bottom: 20px; }
.ablauf-day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ablauf-day-head h3 { margin: 0 0 8px; font-size: 1rem; }
.ablauf-day-head a { font-size: 0.85rem; }
.ablauf-occ { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, white); margin-bottom: 6px; }
.ablauf-entries { list-style: none; margin: 0; padding: 0; }
.ablauf-entries li { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); align-items: baseline; }
.ablauf-entries li:first-child { border-top: none; }
.ablauf-time { min-width: 96px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ablauf-main { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.ablauf-actions { white-space: nowrap; display: flex; gap: 8px; }
.ablauf-form > summary { cursor: pointer; margin: 8px 0 12px; }
@media (max-width: 640px) { .ablauf-entries li { flex-direction: column; gap: 2px; } .ablauf-time { min-width: 0; } }
.ablauf-actions a, .ablauf-actions .link-button { font-size: 0.85rem; font-weight: 600; }

/* Videogalerie */
.video-admin video, .video-grid video { width: 100%; display: block; border-radius: 8px; background: #000; aspect-ratio: 16 / 9; }
.video-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.video-grid figure { margin: 0; }
.video-grid figcaption { margin-top: 6px; font-size: 0.9rem; }
.video-admin { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Systemstatus */
.status-ok { --st: #2e7d32; } .status-warn { --st: #c77700; } .status-fail { --st: #c62828; } .status-info { --st: #1e6fb8; } .status-none { --st: #d6d3df; }
.status-hero { border-left: 6px solid var(--st); }
.status-hero-main { display: flex; gap: 14px; align-items: center; }
.status-hero-title { font-size: 1.3rem; font-weight: 700; color: var(--st); }
.status-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--st); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--st) 18%, transparent); }
.status-hero .status-dot { width: 20px; height: 20px; }
.status-hist { margin-top: 16px; }
.status-hist-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 0.85rem; margin-bottom: 6px; }
.status-bars { display: flex; gap: 1px; height: 14px; margin-top: 6px; overflow: hidden; border-radius: 4px; }
.status-bars-lg { height: 30px; }
.status-bar { flex: 1 1 0; min-width: 0; background: var(--st); opacity: 0.9; }
@media (max-width: 900px) { .status-bars { gap: 0; } }
.status-bar:hover { opacity: 1; filter: brightness(1.15); }
.status-list { list-style: none; margin: 0 0 12px; padding: 0; }
.status-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); align-items: flex-start; }
.status-row:first-child { border-top: none; }
.status-row .status-dot { margin-top: 4px; }
.status-row-main { flex: 1; min-width: 0; }
.status-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--st); border: 1px solid var(--st); border-radius: 999px; padding: 0 8px; margin-left: 4px; }
.status-detail { font-size: 0.88rem; overflow-wrap: anywhere; }
.status-endpoints li, .status-steps li { margin-bottom: 6px; overflow-wrap: anywhere; }
.status-token { display: flex; gap: 8px; } .status-token input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; }

/* Trainer-Couples */
.couple-tag { font-size: 0.8rem; color: var(--accent); font-weight: 600; }
.md-couples { margin-bottom: 6px; }
.couple-chip { cursor: pointer; border: 1px dashed var(--accent); background: color-mix(in srgb, var(--accent) 8%, #fff); color: var(--accent); font: inherit; font-size: 0.85rem; }
.ev-trainer-couple .ev-trainer-photos { display: flex; }
.ev-trainer-couple .ev-trainer-photos > * + * { margin-left: -16px; }
.ev-trainer-couple .ev-trainer-photos img, .ev-trainer-couple .ev-trainer-photos .trainer-avatar { border: 3px solid #fff; }
.ev-trainer-member { margin-top: 10px; }
.ev-trainer-member h4 { margin: 0 0 2px; font-size: 0.95rem; }
.couple-list { margin: 4px 0 0; padding-left: 18px; }

/* Dashboards (Feedback 10/2026): Zu erledigen, Umsatzverlauf, Auslastung */
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f0f1f3; font-size: 0.92rem; }
.todo-list li:last-child { border-bottom: none; }
.todo-list a { color: var(--text); text-decoration: none; flex: 1; }
.todo-list a:hover { color: var(--accent); }
.todo-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; }
.todo-dot.warn { background: #b26a00; }
.todo-dot.danger { background: #c62828; }
.todo-dot.info { background: #3b6fb6; }
.todo-ok { color: #2e7d32; font-size: 0.92rem; margin: 0; }
.sales-chart-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.sales-chart-total { font-size: 1.5rem; font-weight: 700; }
.sales-chart-trend { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.sales-chart-trend.up { color: #2e7d32; }
.sales-chart-trend.down { color: #c62828; }
.sales-chart-svg { width: 100%; height: auto; display: block; }
.sales-chart-svg .val { fill: var(--accent); }
.sales-chart-svg .bar:hover .val { fill: var(--accent-light); }
.sales-chart-svg .hit { fill: transparent; }
.sales-chart-svg .bar:hover .hit { fill: rgba(75, 46, 131, 0.06); }
.sales-chart-svg .axis { stroke: #d6d8de; stroke-width: 1; }
.sales-chart-svg .grid { stroke: #eef0f3; stroke-width: 1; stroke-dasharray: 3 3; }
.sales-chart-svg .lbl { font-size: 11px; fill: var(--muted); }
.sales-chart-table { margin-top: 8px; font-size: 0.85rem; }
.sales-chart-table summary { cursor: pointer; color: var(--muted); }
.fill-bar { height: 8px; border-radius: 4px; background: #eef0f3; overflow: hidden; margin-top: 5px; }
.fill-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.fill-bar.high > span { background: #b26a00; }
.fill-bar.full > span { background: #c62828; }
.dashboard-wide { margin-top: 24px; }
.pay-split { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: #fff; }
.pay-split > span { display: block; min-width: 4px; }
.pay-legend { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.85rem; }
.pay-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.pay-paid { background: #2e7d32; }
.pay-pending { background: #b26a00; }
.pay-external { background: #3b6fb6; }
.pay-refunded { background: #8a8f98; }
.pay-failed { background: #c62828; }
.stat-card .fill-bar { margin-top: 8px; }

/* Mehrsprachigkeit: Übersetzungsfelder in Formularen (_i18n_fields.html) */
.i18n-fields { margin: 4px 0 12px; border: 1px dashed var(--border, #d0d5dd); border-radius: 6px; padding: 4px 10px; background: rgba(0,0,0,0.015); }
.i18n-fields > summary { cursor: pointer; font-size: 0.88em; color: var(--muted, #667085); padding: 4px 0; }
.i18n-fields[open] > summary { margin-bottom: 6px; }
.i18n-fields-body label { display: block; margin-bottom: 8px; }
.i18n-badge { display: inline-block; font-size: 0.75em; padding: 0 5px; margin-left: 4px; border-radius: 4px; border: 1px solid var(--border, #d0d5dd); color: var(--muted, #667085); }
.i18n-badge.done { background: #e7f6ec; border-color: #9ad3ae; color: #1e6b3a; }
.lang-switch { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.lang-switch a { padding: 2px 8px; border-radius: 4px; text-decoration: none; font-size: 0.9em; border: 1px solid transparent; }
.lang-switch a.active { border-color: currentColor; font-weight: 600; }
.i18n-edit input[type=text], .i18n-edit textarea { width: 100%; }
.public-lang-switch { display: flex; justify-content: flex-end; margin: 0 0 8px; }

/* "Eventseite anzeigen" rechts in der Event-Leiste */
.event-subnav a.subnav-external { margin-left: auto; color: var(--accent); }

/* Aktions-Spalte in Tabellen: Links/Buttons nebeneinander, kein Umbruch */
td.row-actions { white-space: nowrap; width: 1%; text-align: right; vertical-align: middle; }
td.row-actions > div { display: inline-flex; gap: 12px; align-items: center; flex-wrap: nowrap; }
td.row-actions > div > form { margin: 0; display: inline-flex; }
@media (max-width: 780px) {
  table.table-cards td.row-actions { width: auto; text-align: left; }
  table.table-cards td.row-actions > div { flex-wrap: wrap; }
}
.waitlist-modes { margin: 8px 0 10px; padding-left: 18px; }
.waitlist-modes li { margin-bottom: 4px; transition: opacity .15s; }
.waitlist-fieldset .form-row > label { flex: 1 1 280px; }
.waitlist-target-tasks { display: block; margin-top: 4px; }


/* Mobile Kopfzeile (Neugestaltung 10/2026): Zeile 1 = Logo/Name | Profil |
   Abmelden, Zeile 2 = Suche, Zeile 3 = Hauptmenü als wischbare Leiste. */
@media (max-width: 780px) {
  .sidebar {
    position: static; height: auto; width: 100%;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand user" "search search" "nav nav";
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .sidebar-brand { grid-area: brand; padding: 10px 14px; font-size: 0.95rem; }
  .sidebar-logo { height: 28px; }
  .sidebar-brand-name { -webkit-line-clamp: 1; }
  .global-search { grid-area: search; padding: 0 14px 8px; border-bottom: none; margin: 0; }
  .global-search .gs-icon { left: 25px; }
  .global-search .gs-kbd { display: none; }
  .sidebar-user { grid-area: user; border-top: none; padding: 6px 10px; display: flex; gap: 2px; }
  .sidebar-user-text, .sidebar-lang, .sidebar-meta { display: none; }
  .sidebar-avatar { width: 30px; height: 30px; }
  .sidebar-nav {
    grid-area: nav; flex-direction: row; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding: 2px 14px 10px; gap: 6px;
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-nav.more-right { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
  .sidebar-nav.more-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 15%); mask-image: linear-gradient(to right, transparent, #000 15%); }
  .sidebar-nav.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
  .sidebar-nav a { white-space: nowrap; flex-shrink: 0; padding: 7px 12px; font-size: 0.85rem; min-height: 36px; border-radius: 999px; background: #f4f2f8; }
  .sidebar-nav a svg { display: none; }
  .sidebar-nav a.active { background: var(--accent); color: #fff; }
}

/* Event-Übersicht: Schnell-Einstellungen als ruhige Liste */
.event-quick { background: #fff; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 32px; }
.event-quick-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; flex-wrap: wrap; }
.event-quick-row + .event-quick-row { border-top: 1px solid var(--border); }
.event-quick-row form { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.event-quick-label { font-weight: 600; }
.event-quick-hint { display: block; font-size: 0.82rem; color: var(--muted); font-weight: 400; }
.event-quick-row select { width: auto; min-width: 160px; margin: 0; }
.event-quick-row label.switch-line { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.92rem; }
.auth-card h1 { margin: 0 0 18px; }

/* Couple: Reiter je Person nebeneinander (Feedback 10/2026) */
.ev-couple-tabs { margin-top: 12px; }
.ev-couple-radio { position: absolute; opacity: 0; pointer-events: none; }
.ev-couple-tablist { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; background: #f4f2f8; padding: 4px; border-radius: 999px; }
.ev-couple-tab { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 10px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 0.92rem; margin: 0; min-width: 0; border: 1px solid transparent; }
.ev-couple-tab span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-couple-tab img, .ev-couple-tab .trainer-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; font-size: 0.8rem; }
.ev-couple-panel { display: none; margin-top: 10px; }
.ev-couple-radio:nth-of-type(1):checked ~ .ev-couple-panel:nth-of-type(2){ display: block; }
.ev-couple-radio:nth-of-type(1):checked ~ .ev-couple-tablist .ev-couple-tab:nth-child(1){ background: var(--accent, #4b2e83); color: #fff; border-color: var(--accent, #4b2e83); }
.ev-couple-radio:nth-of-type(2):checked ~ .ev-couple-panel:nth-of-type(3){ display: block; }
.ev-couple-radio:nth-of-type(2):checked ~ .ev-couple-tablist .ev-couple-tab:nth-child(2){ background: var(--accent, #4b2e83); color: #fff; border-color: var(--accent, #4b2e83); }
.ev-couple-radio:nth-of-type(3):checked ~ .ev-couple-panel:nth-of-type(4){ display: block; }
.ev-couple-radio:nth-of-type(3):checked ~ .ev-couple-tablist .ev-couple-tab:nth-child(3){ background: var(--accent, #4b2e83); color: #fff; border-color: var(--accent, #4b2e83); }
.ev-couple-radio:nth-of-type(4):checked ~ .ev-couple-panel:nth-of-type(5){ display: block; }
.ev-couple-radio:nth-of-type(4):checked ~ .ev-couple-tablist .ev-couple-tab:nth-child(4){ background: var(--accent, #4b2e83); color: #fff; border-color: var(--accent, #4b2e83); }
.event-head-main { display: flex; align-items: center; min-width: 0; }
.event-detail-logo { object-fit: contain; background: #fff; }
@media (max-width: 780px) {
  .event-head-main { flex-direction: column; align-items: flex-start; gap: 10px; }
  .event-head-main .event-detail-logo { margin-right: 0; max-height: 48px; }
}

.event-hero-logo-wrap { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; height: 200px; background: #fff; }
.event-hero-bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(28px) saturate(1.2); opacity: 0.28; }
.event-hero-logo { position: relative; max-height: 150px; max-width: 80%; object-fit: contain; border-radius: 8px; }
@media (max-width: 480px) { .event-hero-logo-wrap { height: 160px; } .event-hero-logo { max-height: 118px; } }

/* Mobile Kopfzeile anheften (Feedback 10/2026, Einstellung je Benutzer) */
.sidebar-pin { display: none; background: none; border: 0; padding: 8px; margin: 0; height: auto; min-height: 0; color: var(--muted); cursor: pointer; border-radius: 8px; }
.sidebar-pin[aria-pressed="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, white); }
@media (max-width: 780px) {
  .sidebar-pin { display: inline-flex; }
  body.mobile-pinned .sidebar { position: sticky; top: 0; z-index: 60; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
  body.mobile-pinned .event-subnav { position: sticky; top: var(--mh, 140px); z-index: 55; background: var(--bg, #f6f5fa); }
}
.recovery-codes { background: #f7f6fa; border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; font-size: 1.05rem; line-height: 1.7; columns: 2; max-width: 360px; }
.totp-qr { margin: 12px 0 6px; background: #fff; display: inline-block; padding: 8px; border: 1px solid var(--border); border-radius: 10px; }
.totp-secret { font-size: 1.05rem; letter-spacing: 0.06em; word-break: break-all; }
.setup-steps li { margin-bottom: 14px; }

/* Merchandise-Lieferstatus (app/article_stock.py) */
.article-status { display: inline-block; margin: 4px 0 2px; padding: 2px 8px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; }
.article-status-in_stock { background: #e7f5ea; color: #1e6b33; }
.article-status-out_of_stock { background: #fff4e0; color: #8a5300; }
.article-status-unavailable { background: #f3f3f5; color: #6b6b75; }
.article-variant-table input[type=number] { width: 80px; }
.article-variant-table input[type=date] { width: 150px; }
.article-variant-table input[type=text] { width: 110px; }
.article-variant-table td { vertical-align: middle; }
.shop-grid .ticket-type-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.shop-grid .ticket-type-card { flex-direction: column; align-items: stretch; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.occupancy-item.occ-rented { background: #f1effa; border-radius: 8px; padding-left: 8px; padding-right: 8px; }
fieldset { min-width: 0; }
@media (max-width: 720px) {
  .article-variant-table thead { display: none; }
  .article-variant-table, .article-variant-table tbody { display: block; }
  .article-variant-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .article-variant-table td { display: block; border: 0; padding: 0; }
  .article-variant-table td:first-child { grid-column: 1 / -1; }
  .article-variant-table td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); }
  .article-variant-table input[type=number], .article-variant-table input[type=date], .article-variant-table input[type=text], .article-variant-table select { width: 100%; }
}
.shop-grid .ticket-type-main { flex: 1 1 auto; } .shop-grid .ticket-type-price { text-align: left; margin-top: 8px; }

/* Checkboxen in einer Formularzeile nicht auf Spaltenbreite ziehen */
.stacked-form .form-row > label.checkbox-line { flex: 0 1 auto; min-width: 0; }
/* Auswahl als Chips (z. B. Wochentage) */
.field-label { display: block; font-size: 0.9rem; color: var(--muted); margin-bottom: 6px; }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.chip-group label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 40px;
  padding: 0 14px; margin: 0; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text);
  font-weight: 600; cursor: pointer; user-select: none; }
.chip-group input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip-group label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-group label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) {
  .fd-card { flex-wrap: wrap; }
  .fd-card-actions { flex-basis: 100%; flex-wrap: wrap; padding-left: 26px; }
}
.fd-card-actions { align-items: center; }
.fd-card-actions form { margin: 0; display: inline-flex; }
.fd-card-actions .link-button { padding: 0 2px; line-height: inherit; }
.article-variant-table { width: 100%; }
.article-variant-table td:first-child { white-space: nowrap; }
.article-variant-table select { min-width: 0; width: 100%; }
.article-variant-table input[type=text] { width: 100%; min-width: 90px; }
.article-variant-table select { min-width: 140px; }
@media (max-width: 720px) { .article-variant-table select { min-width: 0; } }
/* Shop (Backend) */
.shop-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.shop-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
.shop-cards .card { margin: 0; }

/* Passkeys (Login, 2FA, Profil) */
.auth-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.9rem; margin: 16px 0 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.passkey-button { width: 100%; }
/* Login-Seite (Feedback 10/2026): gleich breite Knöpfe, Passkey mit Symbol */
.auth-card form button[type="submit"], .auth-card .passkey-button { width: 100%; min-height: 44px; }
.auth-card form label { margin-bottom: 14px; }
.passkey-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.passkey-button[hidden] { display: none; }
.passkey-button svg { width: 18px; height: 18px; flex: none; }
.auth-links { margin: 16px 0 0; text-align: center; font-size: 0.9rem; }
.auth-links a { color: var(--muted); }
.auth-links a:hover { color: var(--accent); }
.passkey-login .error { margin-top: 10px; }
.passkey-list { list-style: none; margin: 0; padding: 0; }
.passkey-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.passkey-item:first-child { border-top: 0; }
.passkey-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.passkey-actions summary { cursor: pointer; color: var(--accent); }
.passkey-actions[open] { flex-basis: 100%; }
.passkey-actions form { margin-top: 8px; }
.passkey-rename { display: flex; gap: 10px; flex-wrap: wrap; }
.passkey-rename input { flex: 1 1 200px; margin: 0; }

/* Ressourcen: Filter + nach Typ ausklappbar */
.res-filter { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 0 0 12px; }
.res-filter label { margin: 0; flex: 1 1 160px; min-width: 0; }
.res-filter label:first-child { flex: 2 1 220px; }
.res-filter input, .res-filter select { width: 100%; margin: 0; }
.res-filter-actions { display: flex; gap: 12px; align-items: center; height: 42px; }
.res-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.res-group { background: #fff; border: 1px solid var(--border); border-radius: 10px; margin: 0 0 10px; }
.res-group > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; }
.res-group > summary::-webkit-details-marker, .res-types > summary::-webkit-details-marker { display: none; }
.res-group > summary::before, .res-types > summary::before { content: "▸"; color: var(--muted); margin-right: 8px; transition: transform .15s; display: inline-block; }
.res-group[open] > summary::before, .res-types[open] > summary::before { transform: rotate(90deg); }
.res-group-title { display: flex; align-items: baseline; gap: 10px; flex: 1; flex-wrap: wrap; min-width: 0; }
.res-group > table { margin: 0; border-top: 1px solid var(--border); }
.res-group[open] > summary { border-bottom: 0; }
.res-types { margin-top: 28px; }
.res-types > summary { display: flex; align-items: center; cursor: pointer; list-style: none; }
.res-types > summary h2 { margin: 0; display: inline; }
.res-types[open] > summary { margin-bottom: 8px; }
@media (max-width: 760px) {
  .res-filter label, .res-filter label:first-child { flex: 1 1 100%; }
  .res-group > summary { padding: 12px; }
}

/* Shop-Backend: Artikelliste */
.shop-item-list { list-style: none; margin: 0; padding: 0; }
.shop-item-row { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.shop-item-row:first-child { border-top: 0; }
.shop-item-thumb { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--accent) 8%, white); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; text-decoration: none; }
.shop-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.shop-item-main { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.shop-item-main > div { flex-basis: 100%; }
.shop-item-price { font-weight: 700; white-space: nowrap; }
.shop-item-actions { display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.shop-item-actions form { margin: 0; }
.shop-unlinked { margin-top: 14px; }
.shop-unlinked summary { cursor: pointer; color: var(--accent); }
.form-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) {
  .shop-item-row { grid-template-columns: 48px 1fr auto; }
  .shop-item-thumb { width: 48px; height: 48px; }
  .shop-item-actions { grid-column: 2 / -1; }
}

/* ===== Öffentlicher Shop (public_shop.html, static/js/shop.js) ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.public-content:has(.shop-page) { max-width: 1120px; }
.shop-page { --shop-radius: 16px; }
.shop-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 8px 0 20px; }
.shop-header-embed { margin-top: 0; justify-content: flex-end; }
.shop-brand { display: flex; gap: 16px; align-items: center; min-width: 0; }
.shop-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(20, 16, 40, .08); padding: 6px; flex-shrink: 0; }
.shop-brand h1 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.01em; }
.shop-intro { margin: 4px 0 0; color: var(--muted); max-width: 60ch; white-space: pre-line; }
.shop-cart-btn { position: sticky; top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--border); color: var(--text); text-decoration: none; font-weight: 600; box-shadow: 0 2px 8px rgba(20, 16, 40, .06); white-space: nowrap; z-index: 5; }
.shop-cart-btn svg { width: 20px; height: 20px; }
.shop-cart-btn.has-items { background: var(--accent); border-color: var(--accent); color: #fff; }
.shop-cart-count { background: #fff; color: var(--accent); border-radius: 999px; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; padding: 0 6px; }
.shop-toast { background: #e7f5ea; color: #1e6b33; border-radius: 12px; padding: 10px 14px; margin: 0 0 16px; }
.shop-toast a { color: inherit; font-weight: 600; margin-left: 6px; }
.shop-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.shop-search { flex: 1 1 260px; position: relative; margin: 0; }
.shop-search svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.shop-search input { width: 100%; margin: 0; padding-left: 38px; border-radius: 999px; background: #fff; }
.shop-sort { margin: 0; flex: 0 1 200px; }
.shop-sort select { margin: 0; border-radius: 999px; background-color: #fff; }
.shop-switch { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--border); cursor: pointer; font-size: .92rem; white-space: nowrap; }
.shop-switch input { margin: 0; width: auto; }
.shop-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; scrollbar-width: thin; }
.shop-cat { background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px; font-weight: 600; font-size: .9rem; white-space: nowrap; cursor: pointer; }
.shop-cat.active { background: var(--text); color: #fff; border-color: var(--text); }
.shop-filters { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; margin-bottom: 12px; }
.shop-filters summary { cursor: pointer; font-weight: 600; }
.shop-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.shop-filter-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: 4px; min-width: 64px; }
.shop-chip { background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 5px 11px; font-size: .88rem; font-weight: 500; cursor: pointer; min-width: 38px; }
.shop-chip.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, white); color: var(--accent); font-weight: 700; }
.shop-chip.is-static { cursor: default; display: inline-block; }
.shop-chip.is-off { color: #a3a3ad; text-decoration: line-through; background: #f6f6f8; }
.shop-filter-reset { margin-top: 8px; }
.shop-count { margin: 4px 0 12px; font-size: .9rem; }
.shop-grid-v2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.shop-card { background: #fff; border-radius: var(--shop-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(20, 16, 40, .05), 0 0 0 1px rgba(20, 16, 40, .05); transition: box-shadow .15s, transform .15s; }
.shop-card:hover { box-shadow: 0 10px 28px rgba(20, 16, 40, .10), 0 0 0 1px rgba(20, 16, 40, .05); transform: translateY(-2px); }
.shop-card[hidden] { display: none; }
.shop-card-media { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: 0; background: #f4f3f7; cursor: zoom-in; overflow: hidden; }
.shop-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.shop-card:hover .shop-card-media img { transform: scale(1.03); }
.shop-card-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: color-mix(in srgb, var(--accent) 45%, white); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, white), #f4f3f7); }
.shop-card-placeholder svg { width: 38%; height: 38%; }
.shop-card-flag { position: absolute; left: 10px; top: 10px; border-radius: 999px; padding: 4px 10px; font-size: .75rem; font-weight: 700; background: rgba(255, 255, 255, .92); color: var(--text); }
.shop-card.is-out .shop-card-media img { filter: grayscale(.6); opacity: .75; }
.shop-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.shop-card-cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.shop-card-title { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.shop-card-title .link-button { color: var(--text); font-weight: 700; text-align: left; padding: 0; text-decoration: none; font-size: inherit; }
.shop-card-variants { margin: 0; color: var(--muted); font-size: .85rem; }
.shop-card-foot { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.shop-card-foot form { margin: 0; }
.shop-price { font-weight: 800; font-size: 1.1rem; white-space: nowrap; }
.shop-price s { color: var(--muted); font-weight: 500; font-size: .9em; margin-right: 4px; }
.shop-price-lg { font-size: 1.5rem; margin: 4px 0 8px; }
.shop-add { border-radius: 999px; padding: 8px 14px; font-size: .88rem; white-space: nowrap; }
.shop-empty { text-align: center; padding: 32px 0; }
.shop-promo { margin-top: 28px; }
.shop-dialog { border: 0; border-radius: 20px; padding: 0; width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 24px 60px rgba(20, 16, 40, .25); }
.shop-dialog::backdrop { background: rgba(20, 16, 40, .5); }
.shop-dialog-close { position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; border-radius: 50%; padding: 0; font-size: 1.4rem; line-height: 1; background: rgba(255, 255, 255, .9); color: var(--text); border: 1px solid var(--border); z-index: 2; }
.shop-dialog-grid { display: grid; grid-template-columns: 1.1fr 1fr; }
.shop-dialog-media { background: #f4f3f7; }
.shop-dialog-main { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.shop-dialog-placeholder { aspect-ratio: 1 / 1; }
.shop-dialog-thumbs { display: flex; gap: 8px; padding: 10px; overflow-x: auto; }
.shop-dialog-thumbs button { width: 60px; height: 60px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: none; flex-shrink: 0; }
.shop-dialog-thumbs button.active { border-color: var(--accent); }
.shop-dialog-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.shop-dialog-info { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 6px; }
.shop-dialog-info h2 { margin: 0; font-size: 1.5rem; }
.shop-desc { white-space: pre-line; color: #3d3b47; margin: 6px 0; }
.shop-attr { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.shop-dialog-add { display: flex; gap: 10px; margin-top: 12px; }
.shop-dialog-add label { margin: 0; flex: 0 0 84px; }
.shop-dialog-add input { margin: 0; }
.shop-dialog-add button { flex: 1; border-radius: 999px; }
@media (max-width: 760px) {
  .shop-header { flex-direction: column; align-items: stretch; }
  .shop-cart-btn { align-self: flex-end; }
  .shop-logo { width: 52px; height: 52px; }
  .shop-grid-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .shop-card-body { padding: 10px 12px 12px; }
  .shop-card-title { font-size: .95rem; }
  .shop-add { width: 100%; padding: 8px 10px; }
  .shop-card-foot form { width: 100%; }
  .shop-sort { flex: 1 1 140px; }
  .shop-dialog-grid { grid-template-columns: 1fr; }
  .shop-dialog-info { padding: 18px; }
  .shop-filter-label { min-width: 0; flex-basis: 100%; }
}
.shop-search input[type="search"] { height: 44px; border: 1px solid var(--border); font-size: 0.95rem; -webkit-appearance: none; appearance: none; box-shadow: none; }
.shop-sort select { height: 44px; border: 1px solid var(--border); padding: 0 14px; font-size: 0.92rem; }
.shop-cat:hover { border-color: var(--text); background: #fff; color: var(--text); }
.shop-cat.active:hover { background: var(--text); color: #fff; }
.shop-chip:hover { border-color: var(--accent); background: #fff; color: var(--text); }
.shop-chip.active:hover { background: color-mix(in srgb, var(--accent) 12%, white); color: var(--accent); }
.shop-filter-reset[hidden], .shop-empty[hidden] { display: none !important; }
.shop-card-out { font-size: .82rem; color: var(--muted); font-weight: 600; }
.sidebar-version { color: inherit; text-decoration: none; }
.sidebar-version:hover { text-decoration: underline; }
.release-notes h1 { display: none; }
.release-notes h2 { margin: 24px 0 6px; padding-top: 16px; border-top: 1px solid var(--border); }
.release-notes h2:first-of-type { border-top: 0; padding-top: 0; }
.release-notes h3 { margin: 16px 0 4px; font-size: 1rem; }
.release-notes ul { margin: 4px 0 8px; padding-left: 20px; }
.release-notes li { margin: 3px 0; }

/* Einstellungen → Backup */
.backup-card { margin-bottom: 18px; }
.backup-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.backup-head form { margin: 0; }
.backup-key-text { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; width: 100%; word-break: break-all; }
.backup-key-once { border-left: 4px solid #b26a00; }
.backup-list { list-style: none; margin: 0; padding: 0; }
.backup-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.backup-item:first-child { border-top: 0; }
.backup-item-incr { padding-left: 18px; border-left: 3px solid var(--border); }
.backup-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; word-break: break-all; }
.backup-item-actions { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.backup-item-actions form { margin: 0; }
.backup-item-actions details[open] { flex-basis: 100%; order: 3; }
.backup-item-actions summary { cursor: pointer; color: var(--accent); }
.backup-restore-form { margin-top: 8px; max-width: 520px; }
.button-link { text-decoration: none; }

/* Bestelllimit erreicht (Feedback 10/2026) */
.order-limit-hint { margin: 6px 0 0; font-size: 0.85em; color: var(--muted, #666); }
.order-limit-hint.is-reached { color: #b45309; font-weight: 600; }
form.is-limit-reached input, form.is-limit-reached select { opacity: .55; }
button:disabled, .shop-add:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(1); }

/* Kalender-Abos (Feedback 10/2026) */
.cal-feeds-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.cal-feeds-head p { flex: 1 1 320px; }
.cal-feed-list { display: flex; flex-direction: column; gap: 14px; }
.cal-feed.is-new { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(75, 46, 131, .15); }
.cal-feed-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cal-feed-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cal-feed-actions form { margin: 0; }
.cal-feed-kinds { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }
.cal-feed-link { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cal-feed-link input { flex: 1 1 260px; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; }
.cal-feed-venue { padding: 8px 0; border-top: 1px solid var(--border); }
.cal-feed-venue:first-of-type { border-top: 0; }
.cal-feed-rooms { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0 26px; }
/* Detailstufe je Auswahl: Auswahl links, Stufe rechts */
.cal-feed-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 2px 0; }
.cal-feed-item .checkbox-line { margin: 0; flex: 1 1 220px; min-width: 0; }
select.cal-feed-detail { width: auto; max-width: 100%; padding: 3px 6px; font-size: 0.85rem; margin: 0; }
.cal-feed-choices { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.cal-feed-scroll { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.cal-feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 18px; margin-bottom: 10px; }