: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; }
body {
  margin: 0;
  overflow-x: hidden;
  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);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
}
.sidebar-brand {
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  font-size: 1.05rem;
  padding: 0 20px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  display: block;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; flex: 1; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.94rem;
}
.sidebar-nav a:hover { background: #f2effa; }
.sidebar-nav a.active { background: var(--accent); color: #fff; }
.sidebar-user {
  padding: 14px 20px 0;
  border-top: 1px solid var(--border);
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--muted);
}
.sidebar-user 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"] {
  width: 60px;
  height: 38px;
  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-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-size: 0.9rem;
}

.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; }

.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); }
.stacked-form .form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.stacked-form .form-row > label, .stacked-form .form-row > div { flex: 1; min-width: 180px; }
.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                                         */
/* ---------------------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0 32px; }
.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: start; }
@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; }
.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), keine dritte Farbe mehr. */
.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; }
.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: Sidebar wird zur horizontal scrollbaren Kopfleiste statt
     fest 230px breiter Spalte - auf schmalen Bildschirmen würde eine
     Seitenspalte sonst den Hauptinhalt zu stark einengen. */
  .app-shell { flex-direction: column; min-height: 0; }
  .sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
    overflow-x: auto;
    gap: 4px;
  }
  .sidebar-brand { border-bottom: none; padding: 0 14px 0 0; margin-bottom: 0; white-space: nowrap; }
  .sidebar-nav { flex-direction: row; padding: 0; gap: 2px; flex: 0 0 auto; }
  .sidebar-nav a { white-space: nowrap; padding: 8px 10px; font-size: 0.85rem; min-height: 44px; }
  .sidebar-user {
    padding: 0 0 0 14px; border-top: none; margin-top: 0; margin-left: auto;
    white-space: nowrap; flex-shrink: 0;
  }
  .sidebar-user > div:first-child { display: none; } /* Name ausblenden, Rolle+Abmelden bleiben knapp sichtbar */

  .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- statt Tabellen-Layout für explizit markierte Tabellen (Klasse
     "table-cards"), gedacht für Zeilen mit viel interaktivem Inhalt pro
     Zeile (z. B. Inline-Bearbeitungsformulare) - dort ist "Zeile nach rechts
     scrollen, um an ein Eingabefeld zu kommen" spürbar fummelig. Andere
     Tabellen bleiben bewusst beim horizontal scrollbaren Standard oben
     (für reine Lese-/Filterlisten ist Scrollen okay und genügt). */
  table.table-cards { display: block; overflow-x: visible; max-width: 100%; }
  table.table-cards thead { display: none; }
  table.table-cards tbody { display: block; }
  table.table-cards tr {
    display: block; width: 100%; margin-bottom: 12px;
    border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px; background: #fff;
  }
  table.table-cards tr:last-child { margin-bottom: 0; }
  table.table-cards td {
    display: block; width: 100%; white-space: normal;
    border-bottom: 1px solid var(--border); padding: 10px 0;
  }
  table.table-cards td:last-child { border-bottom: none; }
  table.table-cards td::before {
    content: attr(data-label);
    display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.02em; color: var(--muted); margin-bottom: 4px;
  }
  /* Inline-Bearbeitungsformulare (z. B. Teilnehmername/-mail) in einer
     Karten-Zelle sollen die volle Breite nutzen statt der am Desktop
     kompakten Fixbreiten (100-150px), die auf 320-375px Screens zu dritt
     nicht nebeneinander passen. */
  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) {
  .sidebar-nav a svg { display: none; }
  .sidebar-nav a { padding: 7px 9px; font-size: 0.8rem; }
  .event-subnav a { padding: 7px 8px; font-size: 0.8rem; }
  .sidebar-brand { font-size: 0.95rem; padding-right: 10px; }
}