/* ============================================================
   Event-Gästeverwaltung – Design-System v2.1
   Minimalistisch, ruhig, Mobile First.
   Gastseiten: Editorial-Look (Serif-Display, viel Weißraum).
   Management: klares SaaS-Layout.
   ============================================================ */

:root {
  --c1: #1e3a5f;                 /* Primärfarbe: tiefes Marineblau (einstellbar) */
  --c2: #b9974e;                 /* Akzentfarbe: gedämpftes Gold (einstellbar) */
  --bg: #f7f7f5;
  --card: #ffffff;
  --text: #16181d;
  --muted: #71757e;
  --border: #e8e8e4;
  --danger: #c2362b;
  --ok: #1d8a4e;
  --warn: #b97309;
  /* Aus --c1/--c2 abgeleitete Töne. Sie werden serverseitig berechnet und im
     Seitenkopf gesetzt (theme_style()); die Werte hier sind der Standard und
     greifen, solange keine eigenen Farben eingestellt sind. Bewusst KEIN
     color-mix() im Stylesheet: das kennen ältere Browser nicht und verwerfen
     dann die komplette Deklaration – der Hero blieb dadurch weiß auf weiß. */
  --c1-05: #f4f5f7;
  --c1-08: #edeff2;
  --c1-09: #ebedf1;
  --c1-45: #9aa6b7;
  --c1-a04: rgba(30, 58, 95, .04);
  --c1-a10: rgba(30, 58, 95, .10);
  --c1-dark: #1c3557;
  --c1-deep: #162442;
  --c2-22: #f0e8d8;
  --c2-a26: rgba(185, 151, 78, .26);
  --warn-55: #d9b278;
  --radius: 18px;
  --radius-s: 11px;
  --shadow: 0 1px 2px rgba(20, 22, 26, .04), 0 8px 24px -12px rgba(20, 22, 26, .10);
  --font-display: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c1); text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1 { font-size: 1.4rem; margin: .6rem 0 1.2rem; letter-spacing: -.015em; }
h2 { font-size: 1.08rem; margin: 0 0 .7rem; letter-spacing: -.01em; }
p { margin: .4rem 0 .8rem; }
.small { font-size: .85rem; }
.muted { color: var(--muted); }

.eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c1);
  margin-bottom: .35rem;
}

:focus-visible {
  outline: 3px solid var(--c1-45);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: no-preference) {
  .card, .stat, .block { animation: rise .35s cubic-bezier(.21,.61,.35,1) both; }
  .card:nth-child(2) { animation-delay: .04s; }
  .card:nth-child(3) { animation-delay: .08s; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* --- Container ---------------------------------------------------------- */
.wrap { max-width: 680px; margin: 0 auto; padding: 1.1rem; }

/* --- Karten --------------------------------------------------------------- */
.card, .block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.5rem;
  margin: 0 0 1.1rem;
}
@media (max-width: 480px) { .card, .block { padding: 1.25rem 1.1rem; } }

.callout, .block-hint {
  background: #fdf6e7;
  border: 1px solid #f3e3bd;
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.1rem;
}

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

/* --- Formulare ----------------------------------------------------------------- */
.form-row { margin-bottom: 1.05rem; }
.form-row label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .9rem; }
.form-row .hint { color: var(--muted); font-size: .8rem; margin-top: .3rem; }
.req { color: var(--danger); }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel],
input[type=date], input[type=time], input[type=datetime-local], input[type=color],
input[type=file], select, textarea {
  width: 100%;
  padding: .68rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-s);
  font: inherit;
  background: #fcfcfb;
  color: var(--text);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--c1);
  background: #fff;
  box-shadow: 0 0 0 4px var(--c1-a10);
  outline: none;
}
input[type=color] { padding: .18rem; height: 2.8rem; }
textarea { resize: vertical; }

/* Großes Code-Eingabefeld (Gast-Login) */
.code-input {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 1.25rem !important;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  padding: .9rem 1rem !important;
}

.check { font-weight: 400 !important; display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; }
/* flex:0 0 auto + feste Größe -> Checkbox schrumpft auf schmalen Displays nicht
   weg und bleibt gut tippbar (vorher konnte langer Text die Checkbox verdrängen) */
.check input { margin-top: .15rem; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; accent-color: var(--c1); }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 600px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* --- Ja/Nein-Auswahl (RSVP) ----------------------------------------------- */
.choice-grid { display: grid; grid-template-columns: 1fr; gap: .7rem; }
@media (min-width: 520px) { .choice-grid { grid-template-columns: 1fr 1fr; } }
.choice {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .15rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem 1rem 1.15rem;
  cursor: pointer;
  background: #fcfcfb;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.choice:hover { transform: translateY(-1px); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .choice-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: #eef0ee; color: var(--muted);
  font-size: 1.3rem; font-weight: 700;
  margin-bottom: .45rem;
  transition: background .15s ease, color .15s ease;
}
.choice strong { font-size: 1.02rem; }
.choice .sub { color: var(--muted); font-size: .82rem; }
/* Markierung der gewählten Karte. Die .is-checked-Regeln setzt app.js; sie
   stehen BEWUSST in eigenen Regeln und nicht per Komma neben den :has()-
   Varianten: Kennt ein Browser :has() nicht, verwirft er eine Auswahlliste
   komplett – die Markierung wäre dann auch über .is-checked verloren. */
.choice.is-checked { border-color: var(--c1); background: var(--c1-05); }
.choice.yes.is-checked { border-color: var(--ok); background: #f2faf5; }
.choice.yes.is-checked .choice-icon { background: var(--ok, #1d8a4e); color: #fff; }
.choice.no.is-checked { border-color: #b9bdc4; background: #f6f7f8; }
.choice.no.is-checked .choice-icon { background: #6b7280; color: #fff; }
/* Dritte Ebene, ganz ohne JavaScript: Der Geschwister-Selektor färbt wenigstens
   das Symbol ein. Er funktioniert in jedem Browser und auch dann, wenn Skripte
   im Firmennetz abgeschaltet sind – der Gast sieht immer, was er gewählt hat. */
.choice.yes input:checked + .choice-icon { background: var(--ok, #1d8a4e); color: #fff; }
.choice.no input:checked + .choice-icon { background: #6b7280; color: #fff; }
.choice:has(input:checked) { border-color: var(--c1); background: var(--c1-05); }
.choice.yes:has(input:checked) { border-color: var(--ok); background: #f2faf5; }
.choice.yes:has(input:checked) .choice-icon { background: var(--ok, #1d8a4e); color: #fff; }
.choice.no:has(input:checked) { border-color: #b9bdc4; background: #f6f7f8; }
.choice.no:has(input:checked) .choice-icon { background: #6b7280; color: #fff; }

/* Klassische Radio-Karten (Management) */
.radio-cards { display: grid; gap: .5rem; }
.radio-cards label {
  display: flex; gap: .6rem; align-items: center; font-weight: 500;
  border: 1.5px solid var(--border); border-radius: var(--radius-s); padding: .8rem 1rem;
  cursor: pointer; background: #fcfcfb; font-size: .92rem;
}
.radio-cards input { width: auto; accent-color: var(--c1); }
.radio-cards label.is-checked { border-color: var(--c1); background: var(--c1-05); }
.radio-cards label:has(input:checked) { border-color: var(--c1); background: var(--c1-05); }

/* --- Begleitpersonen ------------------------------------------------------------ */
.companion-row {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: #fcfcfb;
  padding: 1.1rem 1rem .6rem;
  margin-bottom: .7rem;
}
.remove-companion {
  position: absolute; top: .55rem; right: .55rem;
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: #eceeec; color: var(--muted);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.remove-companion:hover { background: #fbe5e2; color: var(--danger); }

.add-tile {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%;
  border: 1.5px dashed #c9ccc9;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text);
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: .9rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.add-tile:hover { border-color: var(--c1); background: var(--c1-a04); }
.add-tile .plus {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: #1e3a5f;
  background: var(--c1, #1e3a5f); color: #fff;
  font-size: 1.15rem; font-weight: 700; line-height: 1;
}
.counter { font-size: .82rem; }

/* --- Buttons --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  /* Erst die feste Farbe, dann die einstellbare: Ein Browser ohne var() verwirft
     nur die zweite Zeile. Ohne die erste stünde weiße Schrift auf durchsichtigem
     Grund – der Button wäre unsichtbar. */
  background: #1e3a5f;
  background: var(--c1, #1e3a5f); color: #fff;
  border: 0; border-radius: 999px;
  padding: .68rem 1.45rem;
  font: inherit; font-weight: 600; font-size: .95rem;
  cursor: pointer; text-decoration: none;
  transition: filter .12s ease, transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 1px 2px rgba(20,22,26,.12);
}
.btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn-sec { background: #3c4250; }
.btn-ghost { background: transparent; color: var(--text); border: 1.5px solid #d4d6d2; box-shadow: none; }
.btn-ghost:hover { border-color: var(--c1); color: var(--c1); filter: none; }
.btn-danger { background: var(--danger); }
.btn-ok { background: var(--ok); }
.btn-small { padding: .38rem .95rem; font-size: .84rem; }
.btn-xl { padding: .95rem 1.9rem; font-size: 1.06rem; min-height: 54px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn svg { width: 18px; height: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; align-items: center; }

/* --- Klickbare Symbol-Kacheln (selbsterklärende Aktionen) ------------------- */
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.tile {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .45rem;
  padding: 1.25rem 1rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: #fcfcfb;
  text-decoration: none;
  color: var(--text);
  font-weight: 600; font-size: .93rem;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tile:hover {
  border-color: var(--c1);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.tile .ico {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c1-08);
  color: var(--c1);
}
.tile .ico svg { width: 21px; height: 21px; }
.tile .sub { font-weight: 400; color: var(--muted); font-size: .78rem; }

/* --- Hinweise --------------------------------------------------------------------- */
.flash { border-radius: var(--radius-s); padding: .8rem 1.05rem; margin: 0 0 1rem; font-size: .93rem; }
.flash-ok   { background: #eef9f1; border: 1px solid #c4e8d0; color: #14532d; }
.flash-err  { background: #fdf1f0; border: 1px solid #f3cbc6; color: #8c241c; }
.flash-info { background: #eff4fc; border: 1px solid #cdddf5; color: #1e3f76; }
.flash-warn { background: #fdf6e7; border: 1px solid #f3e3bd; color: #845207; }

/* --- Hinweis-Banner (Dashboard-Warnungen mit Icon und Aktionen) ---------- */
.notice {
  display: flex; gap: .65rem; align-items: flex-start;
  background: var(--card); border: 1px solid var(--border);
  border-left-width: 3px; border-radius: var(--radius-s);
  padding: .55rem .8rem; margin: 0 0 .55rem; font-size: .86rem; line-height: 1.45;
}
.notice-icon {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-top: .1rem;
}
.notice-icon svg { width: 13px; height: 13px; }
.notice-body { flex: 1 1 auto; min-width: 0; }
.notice-title { font-weight: 700; margin: 0; font-size: .87rem; }
.notice-body p { margin: 0 0 .15rem; }
.notice-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .35rem; }
.notice-actions .btn { padding: .28rem .7rem; font-size: .78rem; }
.notice-warn { border-left-color: var(--warn); }
.notice-warn .notice-icon  { background: #fdf6e7; color: var(--warn); }
.notice-warn .notice-title { color: #845207; }
.notice-info { border-left-color: var(--c1); }
.notice-info .notice-icon  { background: #eff4fc; color: var(--c1); }
.notice-info .notice-title { color: #1e3f76; }

/* Sprungziel „Geänderte Kerndaten" nach Klick auf die Warnung hervorheben */
#kerndaten-block:target { outline: 2px solid var(--warn-55); outline-offset: 3px; }

/* --- Tabellen ---------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th {
  background: #fafaf8;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted);
  position: sticky; top: 0;
}
tbody tr:hover td { background: #fbfbf9; }
tbody tr:last-child td { border-bottom: 0; }

.badge {
  display: inline-block; padding: .14rem .62rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600; white-space: nowrap;
}
.badge-open { background: #eef0ee; color: #595f59; }
.badge-yes  { background: #e6f5eb; color: #14532d; }
.badge-no   { background: #fdeeec; color: #8c241c; }
.badge-in   { background: var(--c2-22); color: #7a4d06; }
.badge-warn { background: #fdf6e7; color: #845207; }

/* ============ GAST-BEREICH ============ */
.guest-head {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: .85rem 1rem;
  display: flex; align-items: center; gap: .7rem; justify-content: center;
}
.guest-head .logo { max-height: 34px; }
.guest-head-title { font-weight: 600; font-size: .98rem; letter-spacing: -.01em; }

/* Hero */
.hero {
  position: relative;
  /* Der Text im Hero ist weiß. Deshalb MUSS hier immer ein dunkler Grund liegen –
     auch wenn Verläufe, Variablen oder das SVG ausfallen. Die erste Zeile ist die
     unterste Rückfallebene (feste Farbe, jeder Browser), die zweite trägt das
     Dekor. Wer die zweite nicht versteht, behält die erste. */
  background: #1c3557;
  /* Dekoratives Netzwerk-SVG als oberste Hintergrundebene (liegt hinter dem Text,
     da Background-Images stets hinter dem Inhalt gezeichnet werden -> kein z-index nötig).
     Wird das SVG vom Netz blockiert, bleiben die Verläufe darunter erhalten. */
  background:
    url(hero-network.svg) center / cover no-repeat,
    radial-gradient(900px 380px at 80% -10%, var(--c2-a26, rgba(185,151,78,.26)), transparent 60%),
    linear-gradient(150deg, var(--c1-dark, #1c3557), var(--c1-deep, #162442));
  color: #fff;
  padding: 3.4rem 1.3rem 4.4rem;
  text-align: center;
  overflow: hidden;
}
.hero .logo { max-height: 52px; margin-bottom: 1.1rem; }
/* Hauptlogo oben – gut erkennbar, mittig (links/rechts genug Platz) */
.hero .hero-mainlogo { display: block; max-height: 64px; max-width: 60%; width: auto; margin: 0 auto 1.1rem; object-fit: contain;
  /* weicher Leucht-Halo (folgt der transparenten Logo-Silhouette) */
  filter: drop-shadow(0 0 16px rgba(150, 185, 235, .55)) drop-shadow(0 0 38px rgba(110, 150, 210, .40)); }
/* Bis zu 5 Logos IMMER in EINER Reihe: Grid mit gleich breiten Spalten -> kein Umbruch.
   Sitzen unten im Hero (unter dem Rückmeldung-Button): Abstand nach oben. */
.hero .hero-logos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .7rem; align-items: center; width: 100%; margin-top: 1.6rem; }
.hero .hero-logos .logo { width: 100%; height: 44px; object-fit: contain; object-position: center; margin: 0; }
@media (max-width: 560px) {
  .hero .hero-mainlogo { max-height: 48px; max-width: 70%; }
  .hero .hero-logos { gap: .4rem; margin-top: 1.2rem; }
  .hero .hero-logos .logo { height: 30px; }
}
.hero .hero-eyebrow {
  font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  opacity: .8; margin-bottom: .8rem;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 6vw, 3rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0 0 .7rem;
}
.hero .hero-meta { font-size: 1rem; opacity: .88; margin: 0 0 1.4rem; }
.hero .hero-meta .dot { opacity: .5; margin: 0 .45rem; }
.hero .status-pill {
  display: inline-block;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: .38rem 1.05rem;
  font-size: .86rem;
  margin-bottom: 1.6rem;
}
.hero .cta-row { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.hero .btn-yes { background: #fff; color: var(--c1); box-shadow: 0 10px 28px -10px rgba(0,0,0,.45); }
.hero .btn-no { background: transparent; border: 1.5px solid rgba(255,255,255,.55); color: #fff; box-shadow: none; }
.hero .btn-no:hover { border-color: #fff; }
/* QR-Sprunglink als Detail-Eintrag in der „Wann & Wo"-Karte */
.detail .qr-jump { color: var(--c1); text-decoration: underline; font-weight: 500; display: inline-block; }
.detail .qr-jump:hover { opacity: .85; }
/* Große Nummer auf den QR-Namensschildern (schnelles Auffinden) */
.qr-no { display: block; font-size: 1.3rem; font-weight: 700; letter-spacing: .02em; margin: .15rem 0 .1rem; }
/* Check-in-Ergebnis: sehr große Gastnummer + Suchzeilen-Badge + Scan-Historie */
.result-card .r-no { font-size: 2.6rem; font-weight: 800; line-height: 1.05; letter-spacing: .01em; margin-bottom: .1rem; }
.r-no-inline { display: inline-block; font-weight: 700; background: rgba(0,0,0,.06); border-radius: 6px; padding: 0 .4rem; }
.scan-history { margin-top: .4rem; }
.scan-hist-line { display: flex; justify-content: space-between; gap: .6rem; padding: .25rem .1rem; border-bottom: 1px solid rgba(0,0,0,.08); }
.scan-hist-line.r-ok span:first-child { color: #15803d; font-weight: 600; }
.scan-hist-line.r-warn span:first-child { color: #b45309; font-weight: 600; }
.scan-hist-line.r-err span:first-child { color: #b91c1c; font-weight: 600; }
.has-hero .wrap { margin-top: -2.4rem; position: relative; }

/* Detailzeilen mit Icons (Wann & Wo) */
.detail-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; margin-top: .4rem; }
@media (min-width: 560px) { .detail-grid { grid-template-columns: 1fr 1fr; } }
.detail { display: flex; gap: .8rem; align-items: flex-start; }
.detail .ico {
  flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--c1-08);
  color: var(--c1);
}
.detail .ico svg { width: 19px; height: 19px; }
.detail .lbl { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.detail .val { font-weight: 600; font-size: .95rem; }

/* Inhaltsblöcke */
.block h2, .qr-card h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; }
.agenda { list-style: none; margin: .3rem 0 0; padding: 0; }
.agenda-item { display: flex; gap: 1.1rem; padding: .65rem 0; position: relative; }
.agenda-time {
  font-weight: 700; color: var(--c1);
  min-width: 3.6rem; font-variant-numeric: tabular-nums;
  font-size: .92rem; padding-top: .1rem;
}
.agenda-body { border-left: 2px solid var(--border); padding-left: 1.1rem; padding-bottom: .2rem; }
.agenda-item:last-child .agenda-body { border-left-color: transparent; }
.agenda-body strong { font-size: .97rem; }

.faq-item { border-bottom: 1px solid var(--border); padding: .55rem 0; }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary {
  font-weight: 600; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item summary::after { content: "+"; color: var(--c1); font-size: 1.2rem; font-weight: 400; transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--muted); margin: .4rem 0 .3rem; }

.block-img { max-width: 100%; border-radius: var(--radius-s); }
.map-frame { width: 100%; height: 320px; border: 0; border-radius: var(--radius-s); }

/* QR-Karte */
.qr-card { text-align: center; }
.qr-card .qr-box {
  display: inline-block;
  background: #fff;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow);
  margin: .4rem 0 .6rem;
}

.token-box {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  background: #f4f4f2; border: 1px dashed #d4d6d2; border-radius: var(--radius-s);
  padding: .6rem .8rem; word-break: break-all; font-size: .88rem;
}

.site-foot { text-align: center; color: var(--muted); padding: 1.6rem 1rem 2.6rem; font-size: .85rem; }
.site-foot a { color: var(--muted); }

/* ============ MANAGEMENT (helles SaaS-Layout) ============ */
.topbar {
  background: #fff; color: var(--text);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .8rem;
  padding: .65rem 1rem;
  position: sticky; top: 0; z-index: 30;
}
.topbar .brand { font-weight: 700; font-size: .95rem; letter-spacing: -.01em; }
.topbar-logo { max-height: 26px; }
.login-logo { display: block; max-height: 52px; margin: 0 auto 1.1rem; }
.topbar-user { margin-left: auto; font-size: .83rem; color: var(--muted); }
.role-pill {
  background: var(--c1-09); color: var(--c1);
  border-radius: 999px; padding: .14rem .62rem; font-size: .7rem;
  font-weight: 600; margin-left: .4rem;
}
.version-pill {
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
  padding: .12rem .55rem; font-size: .68rem; font-weight: 600;
  margin-left: .35rem; letter-spacing: .02em;
}
.burger { background: none; border: 0; color: var(--text); font-size: 1.3rem; cursor: pointer; padding: .2rem .4rem; }

.layout { display: flex; min-height: calc(100vh - 50px); }
.sidebar {
  background: #fbfbfa;
  border-right: 1px solid var(--border);
  width: 242px; flex-shrink: 0;
  padding: 1.1rem .75rem 2rem;
  display: none;
}
.sidebar.open {
  display: block; position: fixed; top: 50px; bottom: 0; left: 0; z-index: 25;
  overflow-y: auto; box-shadow: 0 20px 50px -10px rgba(20,22,26,.25);
}
.nav-group { margin-bottom: 1.15rem; }
.nav-group-title {
  display: block; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .11em; color: #9a9fa6; margin: 0 .7rem .35rem;
}
.sidebar a {
  display: flex; align-items: center; gap: .6rem;
  color: #474d56; text-decoration: none;
  padding: .46rem .7rem; border-radius: 9px; font-size: .89rem;
}
.sidebar a svg { width: 17px; height: 17px; opacity: .65; flex-shrink: 0; }
.sidebar a:hover { background: #f0f1ef; color: var(--text); }
.sidebar a.active {
  background: var(--c1-09);
  color: var(--c1); font-weight: 600;
}
.sidebar a.active svg { opacity: 1; }

.content { flex: 1; padding: 1.4rem; max-width: 1200px; min-width: 0; }

@media (min-width: 900px) {
  .sidebar { display: block; }
  .burger { display: none; }
}

/* Dashboard */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1.1rem; }
.stat {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem 1.05rem;
}
.stat .num { font-size: 1.75rem; font-weight: 800; color: var(--c1); line-height: 1.15; letter-spacing: -.02em; }
.stat .lbl { color: var(--muted); font-size: .78rem; margin-top: .1rem; }
/* Klickbare Kacheln (verlinken auf die gefilterte Gästeliste) */
a.stat { display: block; text-decoration: none; color: inherit; cursor: pointer;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease; }
a.stat:hover { border-color: var(--c1); transform: translateY(-2px);
  box-shadow: 0 6px 18px -8px rgba(20,22,26,.22); }
.stat.stat-warn .num { color: var(--warn); }
.stat.stat-ok .num { color: var(--ok); }

.bar-chart { display: grid; gap: .5rem; }
.bar-row { display: grid; grid-template-columns: 90px 1fr 44px; align-items: center; gap: .7rem; font-size: .87rem; }
.bar-track { background: #eef0ee; border-radius: 999px; height: 10px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--c1); transition: width .5s ease; }
.bar-fill.f-yes { background: var(--ok); }
.bar-fill.f-no { background: var(--danger); }
.bar-fill.f-open { background: #aab0ab; }

.searchbar { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.searchbar input[type=text], .searchbar select { width: auto; flex: 1 1 170px; }

/* ============ CHECK-IN (Tablet) ============ */
.checkin-shell { max-width: 680px; margin: 0 auto; padding: 1.1rem; }
.checkin-counters { display: flex; gap: .8rem; justify-content: center; margin-bottom: 1.1rem; }
.checkin-counters .stat { text-align: center; flex: 1; }
#scanArea { max-width: 420px; margin: 0 auto 1.1rem; border-radius: var(--radius); overflow: hidden; }
.result-card {
  border-radius: var(--radius);
  padding: 1.4rem;
  margin-bottom: 1.1rem;
  border: 2px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow);
}
.result-card.r-ok { border-color: var(--ok); background: #f4fbf6; }
.result-card.r-warn { border-color: var(--warn); background: #fdf8ec; }
.result-card.r-err { border-color: var(--danger); background: #fdf2f1; }
.result-card .r-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.search-results .result-line {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: .8rem 1rem; margin-bottom: .55rem;
  box-shadow: var(--shadow);
}
.search-results .result-line .grow { flex: 1; min-width: 150px; }

/* ============ DRUCK ============ */
@media print {
  .topbar, .sidebar, .searchbar, .actions, .btn, .no-print { display: none !important; }
  body { background: #fff; font-size: 10.5pt; }
  .content { padding: 0; max-width: none; }
  .card, .table-wrap { border: 0; box-shadow: none; }
  .table-wrap { overflow: visible; }
  th { position: static; }
  @page { size: A4; margin: 14mm 12mm; }
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }
  .print-head { display: block !important; }
  .qr-sheet-item { page-break-inside: avoid; }
}
.print-head { display: none; margin-bottom: .6rem; }
.qr-sheet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.qr-sheet-item { border: 1px dashed #999; border-radius: 8px; padding: 1rem; text-align: center; }

/* ============ EINLASSKARTE (Gast-Ticket) ============ */
.ticket {
  max-width: 400px;
  margin: 0 auto 1.2rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.1rem 1.7rem 1.6rem;
  text-align: center;
}
.ticket .tk-logo { max-height: 44px; margin-bottom: .9rem; }
.ticket .tk-eyebrow {
  display: block;
  font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--c2); margin-bottom: .45rem;
}
.ticket .tk-event {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.5rem; letter-spacing: -.01em; line-height: 1.2;
  margin: 0 0 .35rem;
}
.ticket .tk-meta { color: var(--muted); font-size: .88rem; margin: 0 0 1.1rem; }
.ticket .tk-qr { margin-bottom: .4rem; }
.ticket .tk-qr-box {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .9rem .9rem .6rem;
}
.ticket .tk-name { font-weight: 700; font-size: 1.12rem; margin: .7rem 0 .15rem; }
.ticket .tk-comp { color: var(--muted); font-size: .85rem; margin: 0; }
.ticket .tk-divider { border-top: 1.5px dashed var(--border); margin: 1.1rem -1.7rem; }
.ticket .tk-note { color: var(--muted); font-size: .78rem; margin: 0; }

@media print {
  body.guest .guest-head, body.guest .site-foot, body.guest .flash { display: none !important; }
  body.guest { background: #fff; }
  body.guest .wrap { max-width: none; padding: 0; }
  .ticket { box-shadow: none; border: 1px solid #888; margin-top: 12mm; page-break-inside: avoid; }
}

/* ============ EINLADUNGSKARTEN (Seriendruck) ============ */
.invite-sheet { display: grid; gap: 1rem; max-width: 620px; margin: 0 auto; }
.invite-card {
  border: 1px dashed #b5b8b5;            /* Schnittlinie */
  border-radius: 12px;
  background: #fff;
  padding: 2rem 1.8rem 1.7rem;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.invite-card .ic-logo { max-height: 38px; margin-bottom: .7rem; }
.invite-card .ic-eyebrow {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .2em; color: var(--c2);
  margin-bottom: .5rem;
}
.invite-card .ic-event {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.55rem; letter-spacing: -.01em; line-height: 1.2;
  margin: 0 0 .3rem;
}
.invite-card .ic-meta { color: var(--muted); font-size: .88rem; margin: 0 0 .9rem; }
.invite-card .ic-name { font-weight: 700; font-size: 1.05rem; margin: 0 0 .9rem; }
.invite-card .ic-qr { display: flex; justify-content: center; margin: 0 0 .9rem; }
.invite-card .ic-code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 1.12rem; letter-spacing: .12em; font-weight: 600;
  border: 1.5px solid var(--border); border-radius: 9px;
  padding: .45rem 1rem; display: inline-block; margin: 0 0 .7rem;
}
.invite-card .ic-note { color: var(--muted); font-size: .78rem; max-width: 40ch; margin: 0; }
@media print {
  .invite-sheet { gap: 6mm; max-width: none; }
  .invite-card { height: 128mm; page-break-inside: avoid; border-radius: 0; }
}

/* ============ LOGOUT (CSRF-geschütztes POST-Formular statt Link) ============ */
.logout-form { display: inline; margin: 0; }
.logout-btn {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-decoration: underline;
}
.logout-btn:hover { opacity: .8; }
/* Im Verwaltungs-Menü wie ein normaler Navigationseintrag aussehen */
.sidebar .logout-form { display: block; }
.sidebar .logout-btn {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  color: #474d56; text-decoration: none;
  padding: .46rem .7rem; border-radius: 9px; font-size: .89rem; text-align: left;
}
.sidebar .logout-btn svg { width: 17px; height: 17px; opacity: .65; flex-shrink: 0; }
.sidebar .logout-btn:hover { background: #f0f1ef; color: var(--text); opacity: 1; }

/* ============ ANFAHRT (Kartendienst-Auswahl, kein JS, kein iframe) ============ */
.anfahrt { margin-top: 1.1rem; }
.map-locations { margin-top: .4rem; }
.map-locations .maps-directions { margin: .3rem 0; }
/* Adresse/Ziel als klickbarer Link (kein separater Button) */
.maps-directions > summary {
  display: inline-block; cursor: pointer; list-style: none;
  color: var(--c1); text-decoration: underline; font-weight: 500; font-size: .92rem;
}
.maps-directions > summary::-webkit-details-marker { display: none; }
.maps-directions > summary::before { content: "📍 "; text-decoration: none; }
.maps-directions.maps-directions--park > summary::before { content: "🅿 "; }
.maps-directions[open] > summary { margin-bottom: .55rem; }
.maps-directions-body { border-left: 3px solid var(--c2); padding: .2rem 0 .2rem .8rem; }
.maps-providers { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

/* --- Rückfallebene: Flexbox ohne gap ---------------------------------------
   Setzt app.js über die Klasse no-flexgap am <html>, wenn der Browser gap in
   Flex-Containern nicht kennt (vor Chrome/Edge 84, Safari 14.1). Dort ersetzen
   Außenabstände den fehlenden Zwischenraum, damit Schaltflächen nicht
   aneinanderkleben. Auf allen anderen Browsern greift keine dieser Regeln. */
.no-flexgap .actions > *,
.no-flexgap .notice-actions > *,
.no-flexgap .hero .cta-row > *,
.no-flexgap .maps-providers > *,
.no-flexgap .searchbar > * { margin-right: .6rem; margin-bottom: .4rem; }
.no-flexgap .btn > svg,
.no-flexgap .check > input,
.no-flexgap .detail > .ico,
.no-flexgap .notice > .notice-icon,
.no-flexgap .agenda-item > .agenda-time,
.no-flexgap .sidebar a > svg,
.no-flexgap .topbar > * { margin-right: .55rem; }