/* snapmate Cloud – Veranstalterbereich (Dashboard)
   Design-System: Eukalyptus 03B */

/* Alle Schriften LOKAL (DSGVO-Fix 26.08.: vorher lud jede Marketingseite
   Poppins 300/500 live von fonts.googleapis.com/fonts.gstatic.com – das ist
   ein Datentransfer an Google beim reinen Seitenaufruf, ohne Einwilligung.
   Jetzt liegen alle Schnitte als Datei im Repo, keine externe Anfrage mehr.
   Es gibt keine lokale Poppins-Medium(500)-Datei – CSS-Stellen mit
   font-weight:500 wurden auf 400 oder 600 gezogen, siehe dort. */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Editorial-Serif für große Überschriften auf den Marketingseiten (index/
   preise/so-funktionierts), wie snapmate.de – Variable Font, deckt 300–900
   ab. Bedienoberfläche (Dashboard/Gast/Designer) bleibt bewusst bei Poppins. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f2f6f2;
  --card: #ffffff;
  --text: #2f3a38;
  --text-muted: #5f6d69;
  --accent: #4f7060;
  --accent-dark: #3d5a4c;
  --sage: #a9c4b1;
  --band: #e4ede6;
  --cream: #ead9c0;
  --line: rgba(47, 58, 56, 0.12);

  /* Radien-System (Token-Spec 26.08., 3 Stufen): --r-s für Buttons/Inputs/
     Tabs, --r-m für Karten/Medienflächen/Panels, 999px bleibt nur kleinen
     Tags/Status-Pills/Marken-Badges vorbehalten. Die alten --radius-*-Namen
     bleiben als Aliase bestehen (an >40 Stellen im CSS genutzt) und zeigen
     jetzt auf die neuen zwei Stufen, statt drei eigene Werte zu pflegen. */
  --r-s: 8px;
  --r-m: 14px;
  --radius-lg: var(--r-m);
  --radius-md: var(--r-m);
  --radius-sm: var(--r-s);
  --shadow-card: 0 1px 2px rgba(47, 58, 56, 0.04), 0 4px 16px rgba(47, 58, 56, 0.05);

  /* Höhe der unteren Tab-Bar (Umbau 28.09.2026, nur ≤760px sichtbar, siehe
     .tabbar unten) – als Variable, damit Fußzeile/Auswahl-Leiste ihr in der
     mobilen Media Query ausweichen können, ohne den Wert zu duplizieren. */
  --tabbar-h: 60px;
}

* {
  box-sizing: border-box;
}

/* Das [hidden]-Attribut steuert Login/Dashboard/Leerer-Zustand (app.js).
   Ohne diese Regel gewinnt ein eigenes "display: flex/grid" auf derselben
   Klasse gegen die (niedrig priorisierte) UA-Regel [hidden]{display:none} –
   das Element bliebe sichtbar. Deshalb hier explizit erzwingen. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* iOS-Safari: verhindert, dass ein überlaufendes Element den Layout-Viewport
     aufbläht und dadurch die max-width-Media-Queries (mobile Nav) aushebelt. */
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Layout ---------- */

.page {
  min-height: 100vh;
}

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Top-Nav ---------- */

.topnav {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.topnav__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 84px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
}

.brand__logo {
  width: 44px;
  height: 44px;
  display: block;
}

.brand__name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand__title {
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.brand__sub {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.tabs {
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 1;
}

.tab {
  background: none;
  border: none;
  padding: 8px 2px;
  font-size: 15px;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  /* Tab-Beschriftungen bleiben einzeilig ("Fotos ansehen" darf nie
     zweizeilig umbrechen) und werden in der Wischzeile nicht gestaucht. */
  white-space: nowrap;
  flex-shrink: 0;
  /* Kein lokales Poppins Medium (500) mehr – 400 statt 500, damit der
     aktive Tab (font-weight:600 weiter unten) sich weiter klar abhebt. */
  font-weight: 400;
}

.tab:hover {
  color: var(--text);
}

.tab[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

.tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Untere Tab-Bar (Umbau 28.09.2026): NUR mobil (≤760px, s. Media Query
   unten), löst über dieselben data-tab-target-Attribute + denselben
   Klick-Handler (app.js) exakt dieselbe Navigation aus wie die obere .tabs-
   Leiste – hier nur die Optik. Ab 761px bleibt sie unsichtbar, die obere
   Leiste führt dort weiter. */
.tabbar {
  display: none;
}

.event-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
}

.event-switcher:hover {
  border-color: var(--sage);
}

.event-switcher__icon {
  color: var(--accent);
  flex-shrink: 0;
}

.event-switcher__chevron {
  color: var(--text-muted);
  flex-shrink: 0;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  padding: 4px;
  flex-shrink: 0;
}

.user-menu__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--band);
}

.user-menu__name {
  font-size: 14px;
  font-weight: 600;
}

.user-menu__chevron {
  color: var(--text-muted);
}

/* Popover-Wrapper für Event-Umschalter + User-Menü (Etappe 2) */
.event-switcher-wrap,
.user-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

.popover-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 8px;
  z-index: 20;
}

.event-switcher-wrap .popover-panel {
  left: 0;
  right: auto;
}

.popover-panel__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}

.popover-panel__item:hover {
  background: var(--band);
}

.user-menu-panel__email {
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 4px 6px 10px;
  margin: 0;
  word-break: break-all;
}

/* ---------- Header ---------- */

.page-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 40px 0 28px;
}

.page-header__icon {
  color: var(--sage);
  margin-top: 6px;
  flex-shrink: 0;
}

/* Eventname + Status zusammen auf einer Zeile (wrapt auf schmalen Screens) –
   macht den Kopfbereich zur klaren Quelle für "wo stehe ich gerade". */
.page-header__row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.page-header__title {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.page-header__subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
}

/* Eventstatus-Pille im Kopfbereich. app.js setzt zusätzlich die Klasse
   .event-status-pill--off (weiter unten), wenn die Galerie für Gäste
   abgeschaltet ist, damit das nicht übersehen wird. Radius bleibt 999px:
   es ist ein Status-Pill, kein Button. */
.event-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--band);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 600;
}

.event-status-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* Kompakter Kopf außerhalb der Übersicht: Der volle Begrüßungskopf (Icon +
   große Zeile + "Schön, dass Sie da sind…") steht nur in der Übersicht.
   In "Fotos ansehen"/"Fotos freigeben"/"Einstellungen" bleibt ein schlanker
   Titel + Status-Pille, damit die eigentliche Ansicht direkt oben beginnt.
   app.js setzt data-view auf #appRoot (showView), der Startwert steht im
   HTML – es wird nur ausgeblendet, nichts entfernt. */
#appRoot:not([data-view="events"]) .page-header {
  padding: 20px 0 14px;
}

#appRoot:not([data-view="events"]) .page-header__icon,
#appRoot:not([data-view="events"]) .page-header__subtitle {
  display: none;
}

#appRoot:not([data-view="events"]) .page-header__title {
  font-size: 21px;
}

#appRoot:not([data-view="events"]) .page-header__row {
  margin-bottom: 0;
}

/* ---------- Kennzahl-Karten ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  min-width: 0;
}

/* Ruhige Kennzahl (Umbau 25.09.): kleines Label oben, große Zahl darunter,
   ohne Icon-Quadrat und ohne doppelte Hinweise ("Uploads heute" + "Heute").
   Nur die Speicher-Karte behält Balken + Zusatzzeilen. */
.stat-card {
  padding: 18px 22px 20px;
}

.stat-card__body {
  min-width: 0;
}

.stat-card__label {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 4px;
}

.stat-card__value {
  font-size: 28px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

.stat-card__value--accent {
  color: var(--accent);
}

.stat-card__hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.stat-card__progress {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: var(--band);
  overflow: hidden;
}

.progress-bar__fill {
  /* <span> braucht display:block – als inline-Element ignoriert der Browser
     width/height komplett und der Füllstand war schlicht unsichtbar
     (aufgefallen beim Gäste-Umbau 25.09., betraf alle Fortschrittsbalken). */
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
}

.stat-card__progress-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}

/* ---------- Hauptaktionen: Link teilen · Uploads prüfen · alles laden ----------
   Dashboard-Umbau 26.08.: die drei Dinge, für die Veranstalter das Dashboard
   überhaupt öffnen, stehen zuerst und sichtbar größer/primär – vorher lagen
   sie gleichrangig neben "Einstellungen" und "Privat & sicher" in einem
   3-spaltigen Raster ohne Rangfolge. */
.hero-actions {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 28px;
}

.hero-action {
  display: flex;
  flex-direction: column;
}

.hero-action .panel__title {
  font-size: 19px;
}

.hero-action__text {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0 0 16px;
}

/* Review-/Download-Karten haben keinen QR-Block – der Inhalt bleibt oben
   gebündelt, nur der Knopfbereich rutscht per margin-top:auto nach unten
   (statt space-between, das ließ eine halbleere Mitte entstehen). */
.hero-action--review .btn {
  margin-top: auto;
}

.hero-action--download .select-control {
  margin-top: auto;
}

.hero-action .btn:disabled {
  opacity: 0.65;
  cursor: default;
}

.panel {
  padding: 24px;
}

.panel__title {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 600;
}

/* QR-Karte */

.qr-card__body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.qr-code {
  width: 128px;
  height: 128px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px;
  background: #fff;
  flex-shrink: 0;
}

.qr-code img,
.qr-code svg,
.qr-code canvas {
  width: 100%;
  height: 100%;
  display: block;
  /* Canvas wird größer gerendert als angezeigt (Retina) – Module bleiben
     beim Herunterskalieren scharfkantig statt weichgezeichnet. */
  image-rendering: pixelated;
}

/* Aktionszeile unter dem Link: kopieren + QR-Downloads (PNG/SVG).
   Alle Buttons mindestens 44px hoch = sicheres Touch-Ziel. */
.qr-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.qr-actions .btn {
  min-height: 44px;
  flex: 1 1 auto;
}

.qr-actions .qr-actions__svg {
  flex: 0 0 auto;
  min-width: 44px;
}

.qr-card__text {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
}

.link-row {
  /* Read-only Link-Kasten: lange Links brechen sauber um und sind komplett
     lesbar, statt in einem einzeiligen Feld horizontal wegzuscrollen (wirkte
     unprofessionell). break-word bricht notfalls mitten im Wort/Token. */
  display: block;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 14px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 18px;
  cursor: pointer;
  /* Auch <a class="btn"> (QR-Aufsteller, Abholung, Fotowand, Audio) sieht wie
     ein Knopf aus – ohne das kam der Browser-Unterstrich durch. */
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease,
    box-shadow 0.2s ease;
}

.btn:active {
  transform: translateY(1px);
}

/* Deaktiviert / Upload läuft: gedimmt + kein Klick-Cursor, damit der Lade-
   Zustand (gast.js setzt disabled + aria-busy während des Uploads) sichtbar
   ist und niemand mehrfach tippt. */
.btn:disabled,
.btn[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

/* "Mehr laden"-Knopf der Gäste-Galerie: zentriert unter dem Grid. */
.guest-gallery-more {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* Primärer Knopf: grüner Verlauf, 1:1 aus der Token-Spec/Landingpage
   (.lp-btn--primary) übernommen – eine Optik für Dashboard, Gast und
   Marketingseiten. */
.btn--primary {
  background: linear-gradient(160deg, #56796a 0%, var(--accent) 55%, var(--accent-dark) 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 10px 24px -10px rgba(61, 90, 76, 0.55);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 16px 32px -12px rgba(61, 90, 76, 0.6);
  }
}

.btn--block {
  width: 100%;
}

.btn--cream {
  background: var(--cream);
  color: var(--text);
}

.btn--cream:hover {
  background: #e2cda3;
}

.btn--outline {
  background: var(--card);
  border-color: var(--line);
  color: var(--text);
}

.btn--outline:hover {
  border-color: var(--sage);
}

.btn small,
.btn .btn__hint {
  display: block;
  font-weight: 400;
  font-size: 11.5px;
  opacity: 0.85;
}

.btn__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

/* Einstellungen & Steuerung */

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.setting-row:last-child {
  border-bottom: none;
}

.setting-row__label {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 2px;
}

.setting-row__desc {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
}

/* Toggle switch */

.switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 999px;
  border: none;
  background: var(--line);
  cursor: pointer;
  padding: 0;
}

/* Unsichtbar vergrößerte Tippfläche: der 44×24-Schalter bekommt so ein
   volles 44-px-Touch-Ziel, ohne optisch größer zu werden. */
.switch::before {
  content: "";
  position: absolute;
  inset: -10px -6px;
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.switch[aria-checked="true"] {
  background: var(--accent);
}

.switch[aria-checked="true"]::after {
  transform: translateX(20px);
}

@media (prefers-reduced-motion: reduce) {
  .switch::after {
    transition: none;
  }
}

/* ---------- Zweitrangige Zeile: Einstellungen-Verweis + Datenschutz-Hinweis ----------
   Dashboard-Umbau 26.08.: bewusst OHNE Kartenrahmen/Schatten (im Gegensatz zu
   .hero-action/.stat-card) – Trennung entsteht durch Abstand, nicht durch
   eine weitere Box. Das nimmt den beiden Punkten sichtbar Gewicht gegenüber
   den drei Hauptaktionen oben. */
.secondary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding-top: 4px;
}

.secondary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.secondary-item__body {
  min-width: 0;
}

.secondary-item__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 600;
}

.secondary-item__text {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 46ch;
}

.privacy-card__icon {
  color: var(--accent);
  flex-shrink: 0;
}

/* ---------- Bottom-Reihe: Downloads + Fotobox + Moderation ---------- */

.lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: 20px;
  align-items: start;
}

.side-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Komplett-Download (ZIP): Fortschrittsbalken + Statuszeile unter dem Button */
.download-progress {
  display: flex;
  margin-top: 12px;
}

.download-status {
  font-size: 13px;
  color: var(--text-muted);
  margin: 8px 0 0;
}

/* ---------- Medien moderieren ---------- */

.moderation-card {
  padding: 24px;
}

.moderation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.moderation-header__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.mod-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.mod-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 4px;
  margin-right: 22px;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  /* Einzeilig halten – in der Wischzeile darf kein Tab-Text umbrechen. */
  white-space: nowrap;
  flex-shrink: 0;
  /* Kein lokales Poppins Medium (500) mehr – 400 statt 500, Kontrast zum
     ausgewählten Tab (600, weiter unten) bleibt erhalten. */
  font-weight: 400;
}

/* Flaggen-Symbol + roter Punkt im "Gemeldet"-Tab (ersetzt das Emoji). */
.mod-tab__alert {
  position: relative;
  display: inline-flex;
  margin-right: 6px;
  vertical-align: -2px;
}

.mod-tab__alert::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c0402c;
  box-shadow: 0 0 0 2px var(--card);
}

.mod-tab:hover {
  color: var(--text);
}

.mod-tab[aria-selected="true"] {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.mod-toolbar {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.select-control,
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  min-height: 44px; /* sicheres Touch-Ziel */
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
}

.filter-btn:hover,
.select-control:hover {
  border-color: var(--sage);
}

.select-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235f6d69' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ---------- Fotos freigeben: Kachelraster (ersetzt die alte Tabelle, 06.09.2026)
   Bild zuerst (Google-Fotos-Muster): Status-Badge als Overlay oben links,
   Auswahl-Kreis oben rechts, EIN Freigeben/Ausblenden-Knopf unten auf dem
   Bild. Ein Renderer für Handy UND Desktop, kein Seitwärts-Scrollen mehr. */

.moderation-header--tools {
  margin-bottom: 14px;
  gap: 10px;
}

.source-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  position: relative;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

/* Unsichtbar vergrößerte Tippfläche (Touch-Ziel min. 44 px), der Chip
   selbst bleibt optisch schlank – gleiches Muster wie die Gäste-Kachel-Chips. */
.chip::before {
  content: "";
  position: absolute;
  inset: -6px -2px;
}

.chip:hover {
  border-color: var(--sage);
}

.chip[aria-pressed="true"] {
  background: var(--band);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.selectall-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  min-height: 44px; /* gleiche Höhe wie die Auswahlfelder daneben, Touch-Ziel */
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

.selectall-control input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.selectall-hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-muted);
}

.mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

.mod-tile {
  margin: 0;
  min-width: 0;
}

.mod-tile__frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--band);
}

.mod-tile__media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: none;
  background: var(--band);
  cursor: zoom-in;
}

.mod-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mod-tile__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.mod-tile__nofile {
  position: absolute;
  top: 40px;
  left: 8px;
}

.mod-tile--nofile .mod-tile__img {
  filter: grayscale(1);
  opacity: 0.75;
}

/* Meldungs-Flagge auf der Kachel: dunkler Glas-Chip mit Flaggen-SVG (statt
   Emoji), gleiche Optik wie die Chips der Gäste-Galerie. */
.mod-tile__flag {
  position: absolute;
  top: 8px;
  right: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: #f3b0a4;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: var(--r-m);
  padding: 5px;
  pointer-events: none;
}

/* Auswahl-Kreis: immer sichtbar (Touch kennt kein Hover), gefüllt = gewählt. */
.mod-tile__select {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: rgba(31, 38, 36, 0.28);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Unsichtbar vergrößerte Tippfläche für den 32px-Kreis (Touch-Ziel 44 px). */
.mod-tile__select::before {
  content: "";
  position: absolute;
  inset: -6px;
}

.mod-tile__select svg {
  opacity: 0;
}

.mod-tile__select[aria-pressed="true"] {
  background: var(--accent);
  border-color: #fff;
}

.mod-tile__select[aria-pressed="true"] svg {
  opacity: 1;
}

.mod-tile--reported .mod-tile__frame {
  outline: 2px solid rgba(160, 61, 46, 0.65);
  outline-offset: -2px;
}

.mod-tile--selected .mod-tile__frame {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* Der EINE Aktions-Knopf direkt auf dem Bild. */
.mod-tile__toggle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border: none;
  cursor: pointer;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  background: linear-gradient(to top, rgba(31, 38, 36, 0.82), rgba(31, 38, 36, 0.38));
}

.mod-tile__toggle:hover {
  background: linear-gradient(to top, rgba(31, 38, 36, 0.95), rgba(31, 38, 36, 0.5));
}

.mod-tile__toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mod-tile__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 2px 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.mod-tile__who {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mod-tile__when {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mod-tile__delete {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  color: #93433c;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  display: inline-flex;
}

/* Unsichtbar vergrößerte Tippfläche (Touch-Ziel min. 44 px). */
.mod-tile__delete::before {
  content: "";
  position: absolute;
  inset: -9px;
}

.mod-tile__delete:hover {
  background: #f6ecec;
}

/* Meldungs-Zeile unter der Kachel: Gründe + Erledigt-Knopf. */
.mod-tile__report {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 2px 0;
}

.mod-tile__reasons {
  margin: 0;
  font-size: 12px;
  color: #a03d2e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mod-empty {
  margin: 0;
  padding: 28px 14px;
  text-align: center;
  color: var(--text-muted);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge--pending {
  background: #faeecb;
  color: #8a6a1f;
}

.badge--approved {
  background: var(--band);
  color: var(--accent-dark);
}

.badge--hidden {
  background: #f0e3e3;
  color: #93433c;
}

.row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.link-btn--wrap {
  white-space: normal;
  text-align: left;
  margin-left: -9px;
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-btn:hover {
  background: var(--bg);
}

.link-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.link-btn:disabled:hover {
  background: none;
}

.link-btn--approve {
  color: var(--accent-dark);
}

.link-btn--hide {
  color: #8a6a1f;
}

.link-btn--delete {
  color: #93433c;
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.load-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.load-more:hover {
  border-color: var(--sage);
}

.load-more:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  background: var(--text);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 400;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 100;
}

.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}

footer.site-footer {
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
  padding: 32px 20px 44px;
}

.site-footer__text {
  margin: 0 0 10px;
}

.site-footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 10px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--accent-dark);
  text-decoration: underline;
}

.site-footer__links a + a {
  border-left: 1px solid var(--line);
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .hero-actions {
    grid-template-columns: 1fr 1fr;
  }
  .hero-action--share {
    grid-column: 1 / -1;
  }
  .lower-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .secondary-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .container {
    padding: 0 20px;
  }
}

@media (max-width: 760px) {
  /* Kompakter Kopf: Marke + Nutzer-Menü teilen sich die erste Zeile,
     darunter der Event-Umschalter, darunter die Tabs als Wischzeile.
     Drei schlanke Zeilen statt vier voller Breite. */
  .topnav__inner {
    height: auto;
    flex-wrap: wrap;
    padding: 10px 0;
    gap: 10px 12px;
  }
  .brand {
    order: 1;
    flex: 1 1 auto;
  }
  .user-menu-wrap {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .user-menu__name {
    display: none; /* Avatar reicht, die E-Mail steht im Menü selbst */
  }
  .event-switcher-wrap {
    order: 3;
    flex: 0 0 100%;
  }
  .event-switcher {
    width: 100%;
    justify-content: space-between;
  }
  /* Obere Tab-Leiste entfällt mobil komplett (Umbau 28.09.2026) – die untere
     Tab-Bar (.tabbar, eigener Block weiter unten) übernimmt die Navigation. */
  .tabs {
    display: none;
  }
  /* Platz für die fest stehende untere Tab-Bar reservieren, sonst verdeckt
     sie die letzte Zeile von Inhalt/Fußzeile. */
  body {
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  }
  footer.site-footer {
    padding-bottom: 24px;
  }
  .tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    height: var(--tabbar-h);
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 0 max(4px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-right));
  }
  .tabbar__btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 500;
    padding: 6px 2px;
    cursor: pointer;
  }
  .tabbar__ic {
    position: relative;
    display: inline-flex;
    line-height: 0;
  }
  .tabbar__ic svg {
    width: 22px;
    height: 22px;
  }
  .tabbar__label {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tabbar__btn[aria-current="page"] {
    color: var(--accent-dark);
  }
  .tabbar__badge {
    position: absolute;
    top: -6px;
    right: -12px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    white-space: nowrap;
  }
  .hero-actions {
    grid-template-columns: 1fr;
  }
  .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .page-header {
    padding: 28px 0 20px;
  }
  .page-header__title {
    font-size: 26px;
  }
  .qr-card__body {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .moderation-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .mod-toolbar {
    margin-left: 0;
    width: 100%;
  }
  .select-control,
  .filter-btn {
    flex: 1;
    justify-content: center;
    /* min. 16px, sonst zoomt iOS beim Öffnen des Auswahlfelds in die Seite */
    font-size: 16px;
  }
  .mod-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    /* Wischzeile mit Fade-Kante rechts (wie die Hauptnavigation oben). */
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
  .mod-tabs::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 520px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }
  .container {
    padding: 0 14px;
  }
  .card,
  .panel,
  .moderation-card {
    border-radius: var(--radius-md);
  }
  .panel {
    padding: 18px;
  }
  .moderation-card {
    padding: 18px;
  }
}

/* ---------- Boot-Status (kurzer Ladehinweis vor Auth-Entscheidung) ---------- */

.boot-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  color: var(--text-muted);
  font-size: 14px;
}

/* ---------- Organizer-Login (Magic Link) ---------- */

.login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}

.login-card {
  width: 100%;
  max-width: 380px;
  padding: 36px 32px;
  text-align: center;
}

.login-card__logo {
  margin: 0 auto 16px;
}

.login-card__title {
  font-size: 22px;
  margin: 0 0 8px;
}

.login-card__subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 24px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.login-form__label {
  font-size: 13px;
  font-weight: 600;
}

.login-form__input {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 16px; /* min. 16px, sonst zoomt iOS beim Antippen in die Seite */
  font-family: inherit;
  color: var(--text);
  margin-bottom: 6px;
}

.login-form__input:focus-visible {
  border-color: var(--accent);
}

.login-status {
  min-height: 18px;
  font-size: 13px;
  color: var(--text-muted);
  margin: 16px 0 0;
}

/* ---------- Leerer Zustand (Organizer ohne Event) ---------- */

.empty-state {
  padding: 40px 32px;
  text-align: center;
  margin-bottom: 24px;
}

.empty-state__title {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
}

.empty-state__text {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  max-width: 480px;
  margin-inline: auto;
}

/* Nicht-persistierbare Einstellung (z. B. Auto-Löschung, kein eigenes Schema-Feld) */
.switch:disabled {
  cursor: default;
  opacity: 0.7;
}

/* ============================================================
   Gäste-Seite (gast.html, Etappe 3) – nach mockups/gast-upload.png
   Schmale, zentrierte Spalte; wiederverwendet Buttons/Karten/Toast.
   ============================================================ */

.guest-container {
  max-width: 640px;
}

.guest-topnav {
  justify-content: space-between;
  gap: 16px;
}

/* Die Dashboard-Mobilregeln (max-width 760px) stapeln .topnav__inner-Kinder
   untereinander – die schlanke Gäste-Nav bleibt aber IMMER einzeilig:
   Logo links, Event-Name rechts. Gleiche Spezifität, steht später im
   Stylesheet → gewinnt die Kaskade gegen die Media-Query-Regeln oben. */
.guest-topnav.topnav__inner {
  flex-wrap: nowrap;
  height: 72px;
  padding: 0 20px;
}

.guest-topnav.topnav__inner > * {
  flex: 0 1 auto;
}

.guest-topnav .brand {
  order: 0;
}

.guest-eventname {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Hero --- */

.guest-hero {
  text-align: center;
  padding: 44px 0 8px;
}

.guest-hero__event {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 600;
  color: var(--accent-dark);
  letter-spacing: 0.01em;
}

.guest-hero__laurel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--sage);
  margin-bottom: 18px;
}

.guest-hero__line {
  width: 56px;
  height: 1px;
  background: var(--sage);
  opacity: 0.7;
}

.guest-hero__title {
  margin: 0 0 14px;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.guest-hero__text {
  margin: 0 auto 26px;
  max-width: 440px;
  color: var(--text-muted);
  font-size: 15px;
}

.guest-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto 14px;
}

/* Gast-Umbau 26.08.: "Fotos hochladen" ist die eindeutige Handlung auf dieser
   Seite – größer/kräftiger. "Galerie ansehen" bleibt erreichbar, tritt aber
   bewusst zurück (kein Rahmen/Schatten, reiner Textlink-Look). */
.guest-hero__actions .btn--primary {
  padding: 17px 20px;
  font-size: 16.5px;
}

.guest-hero__actions .btn--outline {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-muted);
  font-weight: 400;
  padding: 8px;
}

.guest-hero__actions .btn--outline:hover {
  color: var(--text);
  text-decoration: underline;
}

.guest-private-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 6px;
}

/* --- Vertrauens-Badges ---
   Kompakter als zuvor (kleinere Icons, ohne zweite Textzeile je Punkt) –
   das ist ergänzende Beruhigung, nicht die Hauptsache auf der Seite, und
   soll dem Upload-Bereich darunter nicht die Aufmerksamkeit nehmen. */

.guest-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 16px 0;
  padding: 12px 8px;
  text-align: center;
}

.guest-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  color: var(--text-muted);
  font-size: 12.5px;
}

.guest-badge + .guest-badge {
  border-left: 1px solid var(--line);
}

.guest-badge svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex-shrink: 0;
}

.guest-badge__title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

/* Zweite Zeile je Badge entfällt in der kompakten Ansicht (siehe HTML-
   Kommentar bei .guest-badges) – die Regel bleibt als Absicherung stehen,
   falls ein Badge doch wieder mit Untertext genutzt wird. */
.guest-badge__text {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* --- Upload-Zone --- */

.guest-uploads-off {
  padding: 26px 22px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14.5px;
}

.guest-uploads-off p {
  margin: 0;
}

.guest-dropzone {
  border: 2px dashed var(--sage);
  border-radius: var(--radius-lg);
  /* Deckend statt rgba(255,255,255,0.6): halbtransparente Flächen wirkten am
     Handy wie "durchscheinender" Untergrund (Sebis Test 24.09.). Der Farbton
     bleibt derselbe (60 % Karte über Seitengrund), nur eben blickdicht. */
  background: var(--card); /* Fallback für Browser ohne color-mix */
  background: color-mix(in srgb, var(--card) 60%, var(--bg));
  text-align: center;
  padding: 34px 20px;
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.guest-dropzone:hover,
.guest-dropzone--active {
  border-color: var(--accent);
  background: var(--band);
}

.guest-dropzone svg {
  margin: 0 auto 10px;
  display: block;
}

.guest-dropzone__title {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.guest-dropzone__hint {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--text-muted);
}

.guest-dropzone__link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}

.guest-dropzone__meta {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* --- Warteschlange --- */

.guest-queue {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.guest-queue__item {
  background: var(--card);
  border: 1px solid var(--line);
  /* Linker Farbstreifen je Zustand (Gast-Umbau 26.08.) – Warteschlangen-
     Zustände (bereit/lädt/hochgeladen/Fehler) sollen auf einen Blick
     unterscheidbar sein, nicht nur am Textlabel. gast.js setzt weiterhin
     nur guest-queue__item--<status>, hier kommt nur die Optik dazu. */
  border-left: 4px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}

.guest-queue__item--uploading {
  border-left-color: var(--sage);
}

.guest-queue__item--done {
  border-left-color: var(--accent);
}

.guest-queue__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.guest-queue__name {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.guest-queue__size {
  font-size: 12.5px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.guest-queue__bar {
  display: block;
}

.guest-queue__status {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.guest-queue__item--done .guest-queue__status {
  color: var(--accent-dark);
  font-weight: 600;
}

.guest-queue__item--error {
  border-color: #d9b3ae;
  border-left-color: #c46a5f;
}

.guest-queue__item--error .guest-queue__status {
  color: #93433c;
  font-weight: 600;
}

.guest-queue__item--error .progress-bar__fill {
  background: #c46a5f;
}

/* "Wird vorbereitet": gleicher Farbstreifen wie beim Hochladen, aber ein
   unbestimmter, laufender Balken – es gibt in dieser Phase keinen echten
   Prozentwert (HEIC-Wandlung/Poster laufen clientseitig). */
.guest-queue__item--preparing {
  border-left-color: var(--sage);
}

/* Aktionen je Datei: Erneut versuchen / Entfernen. Echte Buttons mit ausreichend
   großer Trefferfläche (>= 44px), damit am Handy nicht "Entfernen" statt "Erneut
   versuchen" getroffen wird (Analyse 06.09.). Die beiden bewusst optisch trennen. */
.guest-queue__actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.guest-queue__btn {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}

/* "Erneut versuchen" ist die Rettung nach einem Netzfehler: klar als Hauptaktion. */
.guest-queue__retry {
  border-color: var(--accent);
  color: var(--accent);
}

.guest-queue__remove {
  color: var(--text-muted);
}

.guest-queue__bar.is-indeterminate .progress-bar__fill {
  width: 40%;
  animation: guest-indeterminate 1.1s ease-in-out infinite;
}

@keyframes guest-indeterminate {
  0% { transform: translateX(-115%); }
  100% { transform: translateX(260%); }
}

/* Hinweis in der stillen Phase zwischen Antippen und Erscheinen der Datei. */
/* Auffällig wie die Gesamt-Anzeige (guest-overall): Das ist in der
   Vorbereitungsphase das EINZIGE Lebenszeichen der Seite — bei einem großen
   Video minutenlang. Zu dezent = Gast glaubt, die Seite hängt, und bricht ab
   (Sebis Live-Test 20.09.). */
.guest-prepare-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  padding: 14px 16px;
  background: var(--card); /* Fallback für Browser ohne color-mix */
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  border: 1px solid var(--line);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.guest-prepare-hint__spinner {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2.5px solid var(--line);
  border-top-color: var(--accent);
  animation: guest-spin 0.8s linear infinite;
}

@keyframes guest-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .guest-queue__bar.is-indeterminate .progress-bar__fill { animation: none; width: 100%; opacity: 0.55; }
  .guest-prepare-hint__spinner { animation: none; }
}

/* Der Zieh-Hinweis gilt nur am Desktop: am Handy (90 % der Gäste) gibt es kein
   Drag-and-drop, dort steht nur "Tipp hier …". Ab 700px eingeblendet. */
.guest-dropzone__desktop { display: none; }
@media (min-width: 700px) {
  .guest-dropzone__desktop { display: inline; }
}

/* Umgekehrt: der "Fotos-Fenster bleibt kurz offen"-Hinweis betrifft nur den
   mobilen System-Fotowähler (Sheet über der Seite) — am Desktop wäre er
   verwirrend, dort schließt der Dateidialog sofort. */
@media (min-width: 700px) {
  .guest-dropzone__mobilehint { display: none; }
}

/* Bleibende Ergebnis-Meldung nach dem Upload (statt nur eines flüchtigen Toasts). */
.guest-result {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--card); /* Fallback für Browser ohne color-mix */
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--text);
}
.guest-result--error {
  background: var(--card);
  background: color-mix(in srgb, #c0392b 8%, var(--card));
  border-color: color-mix(in srgb, #c0392b 30%, var(--line));
}

/* Gesamt-Fortschritt über den ganzen Upload-Schwung: die eine Anzeige, die bei
   vielen Fotos immer im Blick bleibt ("Lädt hoch … 5 / 31"). Klebt beim Scrollen
   oben, damit der Gast auch weit unten in der Liste sieht, dass es weiterläuft. */
.guest-overall {
  position: sticky;
  /* top: 0 statt 8px – in dem 8px-Spalt liefen Warteschlange und Dropzone-
     Hinweis beim Scrollen sichtbar hinter der Box durch (Sebis iPhone-Test
     24.09., wirkte wie durchscheinender Text). Dazu voll deckende Karten-
     farbe, kleiner Radius (kaum offene Eckzwickel am oberen Rand) und
     z-index über allen Inhalts-Karten; Melde-Dialog (60), Toast (100) und
     Lightbox (1000) bleiben darüber. */
  top: 0;
  z-index: 30;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--r-s);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(47, 58, 56, 0.14);
}
.guest-overall__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.guest-overall__label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.guest-overall__count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  flex-shrink: 0;
}
.guest-overall__bar {
  /* .progress-bar ist ein <span> (inline) – ohne display:block kollabiert die
     Höhe und der Gesamt-Balken war schlicht unsichtbar (aufgefallen beim
     Kachel-Umbau 25.09.; die Warteschlangen-Balken setzen block längst). */
  display: block;
  height: 8px;
}

/* "Bitte Seite offen lassen"-Hinweis während eines laufenden Uploads. */
.guest-keep-open {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

/* --- Einwilligung + Upload-Start --- */

.guest-consent-card {
  margin-top: 14px;
  padding: 18px;
}

.guest-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  cursor: pointer;
}

.guest-consent a {
  color: var(--accent-dark);
  text-decoration: underline;
}

.guest-consent__box {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}

.guest-consent__error {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #93433c;
}

.guest-name {
  display: block;
  margin: 14px 0 16px;
  font-size: 13px;
  font-weight: 600;
}

.guest-name em {
  font-weight: 400;
  color: var(--text-muted);
  font-style: normal;
}

.guest-name input {
  display: block;
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 16px; /* min. 16px, sonst zoomt iOS beim Antippen in die Seite */
  font-family: inherit;
  color: var(--text);
}

.guest-name input:focus-visible {
  border-color: var(--accent);
}

/* --- Galerie --- */

.guest-gallery-section {
  margin: 30px 0 10px;
}

.guest-gallery-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 12px;
}

.guest-gallery-empty {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.guest-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

.guest-gallery-cell {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--band);
}

.guest-gallery-cell img,
.guest-gallery-cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Fußzeile --- */

.guest-footer {
  text-align: center;
  padding: 34px 20px 44px;
  color: var(--text-muted);
  font-size: 13px;
}

.guest-footer__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--text);
}

.guest-footer__secure svg {
  color: var(--accent);
  flex-shrink: 0;
}

.guest-privacy {
  max-width: 520px;
  margin: 0 auto;
}

.guest-privacy summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent-dark);
}

.guest-privacy p {
  text-align: left;
  margin: 10px 0 0;
  line-height: 1.6;
}

.guest-privacy a {
  color: var(--accent-dark);
  text-decoration: underline;
}

.guest-footer__legal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 18px;
}

.guest-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 10px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.guest-footer__legal a:hover,
.guest-footer__legal a:focus-visible {
  color: var(--accent-dark);
  text-decoration: underline;
}

.guest-footer__legal a + a {
  border-left: 1px solid var(--line);
}

/* Hinweistext über der Einwilligungs-Checkbox (recht/gaeste-einwilligung.md §2) */
.guest-consent__hint {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* --- Responsive --- */

@media (max-width: 560px) {
  .guest-hero {
    padding-top: 30px;
  }
  .guest-hero__title {
    font-size: 28px;
  }
  .guest-badges {
    padding: 18px 4px;
  }
  .guest-badge {
    padding: 4px 8px;
  }
}

@media (max-width: 420px) {
  /* Kompakte Badges (flex-wrap) brauchen auf sehr schmalen Screens keine
     Trennlinien mehr zwischen den Zeilen – die Umbrüche wirken sonst wie
     halbe Rahmen. */
  .guest-badge + .guest-badge {
    border-left: none;
  }
  .guest-badge {
    padding: 4px 10px;
  }
}

/* ============================================================
   "Bild melden" (Etappe 4)
   Gäste-Seite: dezenter melden-Button je Galerie-Bild + Mini-Modal.
   Dashboard: Meldungs-Badge, Gründe, Takedown-Warteschlange.
   ============================================================ */

/* --- Gäste-Galerie: Bedienelemente auf der Kachel (Umbau 25.09.) ---
   Das Foto steht im Vordergrund. Alle Bedienelemente sind kleine, dunkle
   Chips in den Ecken (Muster wie in Foto-Apps, gleiche Optik wie das
   Play-Symbol und der "wird optimiert"-Chip): Herz mit Zähler unten rechts,
   melden als kleines Fahnen-Symbol oben rechts, der Vorname als schmale
   weiße Zeile unten links. Vorher: zwei große weiße Pillen nebeneinander am
   unteren Rand plus Namens-Pille oben – zusammen verdeckten sie auf einer
   ~110px-Kachel das halbe Bild (Sebis iPhone-Test 24.09.). */

.guest-gallery-cell {
  position: relative;
}

/* Sanfter Verlauf am unteren Kachelrand: macht weiße Beschriftung (Name,
   Herz-Zähler) auf jedem Motiv lesbar, ohne das Bild zuzudecken. Liegt unter
   den Chips (z-index 1 vs. 2), fängt keine Tipps ab. */
.guest-gallery-cell::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}

/* melden: bewusst das kleinste Element (sekundär zum Herz) – nur das
   Fahnen-Symbol als 24px-Chip oben rechts, der Text "melden" bleibt für
   Screenreader als aria-label erhalten. */
.guest-report-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--r-m);
  padding: 0;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.guest-report-btn span {
  display: none; /* Beschriftung übernimmt das aria-label */
}

.guest-report-btn:hover {
  background: rgba(0, 0, 0, 0.55);
}

.guest-report-btn:focus-visible,
.guest-heart-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

/* Unsichtbar vergrößerte Klickfläche: der Chip bleibt dezent, das
   Touch-Ziel kommt trotzdem auf mindestens 44 px. */
.guest-report-btn::before {
  content: "";
  position: absolute;
  inset: -10px;
}

.guest-report-btn svg {
  flex-shrink: 0;
}

/* --- Herzen (Migration 0034): kleiner Chip mit Zähler, unten rechts.
   Aktives Herz füllt sich in einem warmen Rosé (heller Ton, lesbar auf dem
   dunklen Chip) – ruhig, ohne Blinken, nur eine kurze Größenreaktion. --- */

.guest-heart-btn {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: var(--r-m);
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.guest-heart-btn:hover {
  background: rgba(0, 0, 0, 0.6);
}

/* Unsichtbar vergrößerte Klickfläche (Touch-Ziel min. 44 px, wie melden). */
.guest-heart-btn::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.guest-heart-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

/* Aktiv: gefülltes Herz, kurzer sanfter "Pop" beim Setzen. Der Zähler bleibt
   weiß, nur das Herz selbst färbt sich. */
.guest-heart-btn--on svg {
  color: #e8a79c;
  fill: currentColor;
  transform: scale(1.08);
}

.guest-heart-btn__count {
  min-width: 1ch;
  line-height: 1;
}

/* Uploader-Signatur „Foto von <Name>": schmale weiße Zeile auf dem Verlauf,
   unten links; rechts Platz fürs Herz reserviert, Überlänge wird gekappt. */
.guest-namelabel {
  position: absolute;
  left: 8px;
  bottom: 9px;
  right: 48px; /* Platz fürs Herz inkl. Zähler (Chip wird mit Zahl breiter) */
  z-index: 2;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Nach dem Absenden: stille Bestätigung direkt am Bild (ersetzt das
   Fahnen-Symbol oben rechts, gleiche Chip-Optik). */
.guest-report-done {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-m);
  padding: 4px 9px;
  font-size: 10.5px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.guest-gallery-cell--reported img,
.guest-gallery-cell--reported video {
  opacity: 0.75;
}

/* Demo-Modus: Kennzeichnung eigener Test-Uploads – die sieht nur dieser
   Browser (demo-data.js), das Etikett macht genau das sichtbar. Gleiche
   dunkle Chip-Optik wie die übrigen Kachel-Elemente; endet vor dem
   melden-Chip oben rechts, damit sich nichts überlappt. */
.guest-own-badge {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 2;
  max-width: calc(100% - 40px);
  display: inline-block;
  border-radius: var(--r-m);
  padding: 4px 9px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* --- Melde-Modal (Gäste-Seite) --- */

.report-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sichere Ränder auch bei Notch/abgerundeten Ecken (env) und schmalen Geräten. */
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(47, 58, 56, 0.45);
}

.report-dialog {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(47, 58, 56, 0.25);
  /* Der Dialog selbst scrollt: klappen beim snapmate-Weg die Zusatzfelder auf
     (Kategorien + E-Mail + Grund), wird er auf kleinen Displays länger als der
     Bildschirm. dvh statt vh berücksichtigt die eingeblendete Tastatur/URL-
     Leiste am Smartphone, sonst wäre der Absenden-Knopf unten unerreichbar. */
  padding: 24px 22px 0;
  max-height: min(90dvh, 760px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.report-dialog__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
}

.report-dialog__text {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
}

.report-dialog__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.report-dialog__label em {
  font-weight: 400;
  font-style: normal;
  color: var(--text-muted);
}

.report-dialog__reason {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 16px; /* min. 16px, sonst zoomt iOS beim Antippen in die Seite */
  font-family: inherit;
  color: var(--text);
  resize: vertical;
  min-height: 72px;
}

.report-dialog__reason:focus-visible {
  border-color: var(--accent);
}

.report-dialog__error {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #93433c;
}

.report-dialog__actions {
  display: flex;
  gap: 10px;
  /* Aktionsleiste bleibt beim Scrollen sichtbar am unteren Rand kleben, damit
     "Melden"/"Schließen" immer erreichbar ist. Bleedet über die 22px-Innen-
     ränder des Dialogs bis an dessen Kanten und trägt die untere Innenpolsterung
     (der Dialog hat unten padding:0), inkl. Safe-Area gegen die Home-Leiste. */
  position: sticky;
  bottom: 0;
  margin: 18px -22px 0;
  padding: 14px 22px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.report-dialog__actions .btn {
  flex: 1;
  min-height: 44px;
}

/* Empfänger-Wahl (an die Gastgeber / direkt an snapmate, Migration 0035) */

.report-choice {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.report-choice__option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
}

.report-choice__option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(47, 58, 56, 0.04);
}

.report-choice__option input {
  margin-top: 3px;
  accent-color: var(--accent);
  flex: none;
}

.report-choice__body {
  display: block;
}

.report-choice__name {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.report-choice__desc {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 2px;
}

/* Meldegrund-Auswahl des snapmate-Wegs */

.report-category {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.report-category__option {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13.5px;
  cursor: pointer;
}

.report-category__option input {
  accent-color: var(--accent);
  flex: none;
}

.report-dialog__email {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 16px; /* min. 16px, sonst zoomt iOS beim Antippen in die Seite */
  font-family: inherit;
  color: var(--text);
}

.report-dialog__email:focus-visible {
  border-color: var(--accent);
}

.report-dialog__hint {
  margin: 6px 0 14px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* --- Dashboard: Meldungs-Badge, Gründe, Warteschlange --- */

/* Eigener Alarm-Ton (kein Wiederverwenden von badge--hidden, damit
   "gemeldet" auf einen Blick von "ausgeblendet" unterscheidbar ist). */
.badge--reported {
  background: #fbe3d8;
  color: #a03d2e;
}

/* "Datei fehlt" – abgebrochener Upload, Zeile ohne echtes Bild. */
.badge--nofile {
  background: #efe7d9;
  color: #7a6a4d;
}

/* Auswahl-Leiste für die Massen-Freigabe (erscheint bei ≥1 gewähltem Foto).
   Fest am unteren Bildschirmrand (Safe-Area beachtet): wer bei Foto 80 von
   100 auswählt, sieht Zähler und Knöpfe trotzdem. */
.bulk-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 90;
  width: min(720px, calc(100vw - 28px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 34px rgba(31, 38, 36, 0.22);
}

.bulk-bar .btn {
  padding: 9px 14px;
  min-height: 44px; /* sicheres Touch-Ziel, auch am Handy */
  font-size: 13px;
}

/* Symbole der Sekundär-Aktionen (Ausblenden/Löschen): erst am Handy sichtbar,
   dort ersetzen sie die Textbeschriftung (aria-label bleibt). */
.bulk-bar__btnicon {
  display: none;
  line-height: 0;
}

/* "Auswahl aufheben" als X-Knopf (Muster wie in Foto-Apps), rund und 44 px. */
.bulk-bar__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text-muted);
  cursor: pointer;
}

.bulk-bar__clear:hover {
  border-color: var(--sage);
  color: var(--text);
}

/* Sichtbare Auswahl-Leiste verdeckt sonst die letzte Kachelreihe: der
   Bereich unter dem Raster (Weitere-laden-Zeile) bekommt so viel Luft,
   dass alles über die Leiste hinweg scrollbar bleibt. */
.bulk-bar:not([hidden]) ~ .mod-grid,
.bulk-bar:not([hidden]) ~ .load-more-wrap {
  scroll-margin-bottom: 96px;
}

.bulk-bar:not([hidden]) ~ .load-more-wrap {
  padding-bottom: 84px;
}

/* Untere Tab-Bar (Umbau 28.09.2026, ≤760px): die Auswahl-Leiste muss darüber
   schweben, sonst verdecken sich beide fest positionierten Leisten. Diese
   Regeln stehen bewusst NACH den Basis-.bulk-bar-Regeln oben (gleiche
   Spezifität, CSS-Kaskade zählt Quellreihenfolge – in der @media-Ecke ganz
   oben in der Datei hätten die Basisregeln hier unten sonst gewonnen). */
@media (max-width: 760px) {
  .bulk-bar {
    bottom: calc(14px + var(--tabbar-h) + env(safe-area-inset-bottom));
  }
  .bulk-bar:not([hidden]) ~ .load-more-wrap {
    padding-bottom: calc(84px + var(--tabbar-h));
  }
}

/* Farbige Massen-Knöpfe im gleichen Ton wie die Status-Badges. */
.btn--approve {
  background: var(--accent);
  color: #fff;
}

.btn--approve:hover {
  background: var(--accent-dark);
}

.btn--hide {
  background: #faeecb;
  color: #8a6a1f;
}

.btn--delete {
  background: #f0e3e3;
  color: #93433c;
}

.bulk-bar__count {
  font-size: 13.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.bulk-bar__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Handy: eine kompakte Zeile – Zähler, "Freigeben" mit Text, Ausblenden/
   Löschen nur als Symbol, rechts das X zum Aufheben. Nichts wrappt. */
@media (max-width: 640px) {
  .bulk-bar {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 10px;
  }
  .bulk-bar__actions {
    flex-wrap: nowrap;
  }
  .bulk-bar__count-word {
    display: none; /* "ausgewählt" entfällt, die Zahl + Kontext reichen */
  }
  .bulk-bar__btnicon {
    display: inline-flex;
  }
  .btn--hide .bulk-bar__btnlabel,
  .btn--delete .bulk-bar__btnlabel {
    display: none;
  }
  .bulk-bar .btn--hide,
  .bulk-bar .btn--delete {
    min-width: 44px;
    padding: 9px 10px;
  }
}

.mod-tab--reported {
  color: #a03d2e;
}

.mod-tab--reported:hover {
  color: #7f2f22;
}

.mod-tab--reported[aria-selected="true"] {
  color: #a03d2e;
  border-bottom-color: #a03d2e;
}

.link-btn--resolve {
  color: var(--accent-dark);
}

/* ============================================================
   Öffentliche Startseite (index.html) – Eingangstür von
   cloud.snapmate.de. Eigene Kopfzeile (kein Tab-Menü, kein
   Event-Switcher), deshalb kein Wiederverwenden von .topnav__inner
   und dessen Mobil-Stapel-Regeln (order/flex-wrap für Tabs/Menüs).
   ============================================================ */

.landing-header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.landing-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 84px;
}

/* Verteidigt gegen die unscoped ".brand { order: 1 }"-Regel aus der
   Dashboard-Mobilansicht (max-width: 760px) – hier soll das Logo immer
   links stehen, ganz ohne Tab-Stapelei. */
.landing-header__inner .brand {
  order: 0;
}

.landing-header__login {
  flex-shrink: 0;
  white-space: nowrap;
}

.landing-hero {
  padding: 64px 0 56px;
  text-align: center;
  background: radial-gradient(ellipse 900px 420px at 50% -10%, var(--band) 0%, var(--bg) 68%);
}

.landing-hero__inner {
  max-width: 720px;
  margin: 0 auto;
}

.landing-hero__eyebrow {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.landing-hero__title {
  margin: 0 0 18px;
  font-size: 44px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.landing-hero__text {
  max-width: 560px;
  margin: 0 auto 30px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

.landing-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.landing-hero__actions .btn {
  padding: 14px 26px;
  font-size: 15px;
}

.landing-section-title {
  text-align: center;
  margin: 0 0 36px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.landing-steps {
  padding: 56px 0;
}

.landing-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.landing-step {
  text-align: center;
}

.landing-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.landing-step__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
}

.landing-step__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.landing-trust {
  padding: 8px 0 56px;
}

.landing-trust__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.landing-trust__card {
  padding: 26px 24px;
  text-align: center;
}

.landing-trust__card svg {
  display: block;
  margin: 0 auto 14px;
  color: var(--accent);
}

.landing-trust__title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.landing-trust__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.landing-cta {
  background: var(--band);
  padding: 56px 0;
}

.landing-cta__inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.landing-cta__title {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 600;
}

.landing-cta__text {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.landing-cta__note {
  margin: 18px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.landing-cta__note a {
  color: var(--accent-dark);
  text-decoration: underline;
}

@media (max-width: 900px) {
  .landing-hero__title {
    font-size: 34px;
  }
  .landing-steps__list,
  .landing-trust__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 520px) {
  .landing-header__inner {
    height: auto;
    padding: 14px 0;
  }
  .landing-hero {
    padding: 40px 0 40px;
  }
  .landing-hero__title {
    font-size: 28px;
  }
  .landing-hero__text {
    font-size: 14.5px;
  }
  .landing-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .landing-steps {
    padding: 40px 0;
  }
  .landing-trust {
    padding: 0 0 40px;
  }
  .landing-cta {
    padding: 40px 0;
  }
}

/* ============================================================
   Rechtsseiten (impressum.html, datenschutz.html,
   nutzungsbedingungen.html) – Entwurfs-Vorschau der Texte aus
   recht/*.md, gleiches Layout wie die Startseite (schlanker Kopf,
   Zurück-Link), eigene Lese-Typografie für Fließtext/Listen.
   ============================================================ */

.legal-header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.legal-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 84px;
}

/* Gleiche Verteidigung wie bei .landing-header__inner .brand. */
.legal-header__inner .brand {
  order: 0;
}

.legal-header__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  flex-shrink: 0;
}

.legal-header__back:hover,
.legal-header__back:focus-visible {
  color: var(--accent-dark);
}

.legal-page {
  max-width: 760px;
  padding: 40px 32px 64px;
}

.legal-draft-banner {
  margin: 0 0 28px;
  padding: 14px 18px;
  border: 1px solid #e3cd8f;
  border-radius: var(--radius-md);
  background: #faeecb;
  color: #5c4a16;
  font-size: 13.5px;
  line-height: 1.55;
}

.legal-page__title {
  margin: 0 0 24px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.legal-content h2 {
  margin: 34px 0 12px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  margin: 22px 0 10px;
  font-size: 16px;
  font-weight: 600;
}

.legal-content p {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.7;
}

.legal-content ul,
.legal-content ol {
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.7;
}

.legal-content li {
  margin-bottom: 6px;
}

.legal-content li > p {
  margin-bottom: 6px;
}

.legal-content strong {
  font-weight: 600;
}

.legal-content a {
  color: var(--accent-dark);
  text-decoration: underline;
}

.legal-content blockquote {
  margin: 0 0 14px;
  padding: 14px 18px;
  border-left: 3px solid var(--sage);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--band);
  color: var(--text-muted);
  font-size: 14px;
}

.legal-content blockquote p:last-child {
  margin-bottom: 0;
}

.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 14px;
  font-size: 13.5px;
}

.legal-content th,
.legal-content td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

@media (max-width: 520px) {
  .legal-header__inner {
    height: auto;
    padding: 14px 0;
  }
  .legal-page {
    padding: 28px 18px 48px;
  }
  .legal-page__title {
    font-size: 24px;
  }
}

/* ==========================================================================
   DASHBOARD-UMBAU (Unterseiten-Navigation, Galerie, Einstellungen-Kategorien,
   Event-Design, Profilfoto, Demo-Modus)
   --------------------------------------------------------------------------
   Styles zur neuen Struktur in dashboard.html: die Kopfzeilen-Tabs schalten
   echte Ansichten (.view[data-view]) um, "Einstellungen" gliedert sich in
   vier Kategorien (Allgemein / Design / Datenschutz / Upload & E-Mail).
   Alles auf den bestehenden Eukalyptus-Tokens (:root oben), keine neuen
   Farbwerte außer den rein dekorativen Overlay-Tönen.
   ========================================================================== */

/* ---------- Demo-Banner (dashboard.html?demo=1) ---------- */

.demo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--accent);
  color: #ffffff;
  padding: 9px 18px;
  position: relative;
  z-index: 40; /* über dem sticky Header, damit der Hinweis nie verdeckt wird */
}

.demo-banner__text {
  margin: 0;
  font-size: 13.5px;
  /* Kein lokales Poppins Medium (500) – 600 statt 500, damit der Hinweis
     auf dem grünen Banner weiter gut lesbar bleibt. */
  font-weight: 600;
  letter-spacing: 0.01em;
}

.demo-banner__leave {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  /* echter Button → Radien-System --r-s statt voll rund */
  border-radius: var(--r-s);
  padding: 5px 14px;
  cursor: pointer;
}

.demo-banner__leave:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Unsichtbar vergrößerte Tippfläche (Touch-Ziel min. 44 px). */
.demo-banner__leave::before {
  content: "";
  position: absolute;
  inset: -9px -4px;
}

/* Auf der Gäste-Demo ist der "Verlassen"-Knopf ein Link (kein Logout nötig). */
a.demo-banner__leave {
  text-decoration: none;
}

/* ---------- Login-Karte: Hinweis unter dem Formular ---------- */

.login-card__note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ---------- Ansichten-Umschaltung ---------- */

/* Die Abschnitte innerhalb einer Ansicht behalten ihre eigenen Abstände
   (stat-grid, hero-actions …) – .view selbst braucht nur den Block-Kontext.
   [hidden] gewinnt dank display-Regeln der Kinder ohnehin, wir stellen es
   trotzdem sicher, falls ein Kind display setzt. */
.view[hidden] {
  display: none !important;
}

/* ---------- Galerie-Ansicht ---------- */

.gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.gallery-toolbar .panel__title {
  margin: 0;
}

.gallery-empty {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

/* Alben-Kreise (Umbau 28.09.2026): horizontale Wischzeile über den Fotos,
   ersetzt optisch das Album-Dropdown. min-width:0 auf Wrapper + Zeile ist
   PFLICHT (ETAPPEN-LOG 27.09.: lange Album-/Token-Namen dürfen die Seite
   nie zum horizontalen Scrollen bringen) – nur die Zeile selbst scrollt,
   jeder Name bricht innerhalb seines Kreises mit Ellipsis ab. */
.album-circles-wrap {
  min-width: 0;
  margin: 0 0 18px;
}

.album-circles {
  display: flex;
  gap: 16px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}

.album-circles::-webkit-scrollbar {
  display: none;
}

.album-circle {
  flex: 0 0 auto;
  width: 68px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--text-muted);
  cursor: pointer;
}

.album-circle__img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 2px var(--card);
}

.album-circle[aria-pressed="true"] .album-circle__img {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent);
}

.album-circle[aria-pressed="true"] .album-circle__name {
  color: var(--text);
  font-weight: 600;
}

.album-circle__name {
  display: block;
  max-width: 68px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.album-circles-manage {
  margin: -8px 0 18px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.gallery-cell {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--band);
  cursor: pointer;
}

.gallery-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.gallery-cell:hover img,
.gallery-cell:focus-visible img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .gallery-cell img {
    transition: none;
  }
}

.gallery-cell__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(31, 38, 36, 0.62);
  color: #ffffff;
  pointer-events: none;
}

/* Kachel-Chips der Veranstalter-Galerie: seit 25.09. dieselbe dunkle
   Glas-Optik wie auf der Gäste-Seite (ein Chip-Stil für die ganze Cloud),
   Radius aus dem Token-System (--r-m wirkt auf der Chip-Höhe wie eine Pille). */
.gallery-cell__flag {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: #f3b0a4;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: var(--r-m);
  padding: 5px;
  pointer-events: none;
}

/* Herz-Zähler auf der Galerie-Kachel (0034): erscheint nur bei >= 1 Herz,
   unten links, rein informativ (das Herz-Setzen des Paars wohnt in der
   Lightbox-Leiste). Helles Rosé-Herz auf dunklem Glas – kein Blinken. */
.gallery-cell__hearts {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: var(--r-m);
  padding: 5px 8px;
  pointer-events: none;
}

.gallery-cell__hearts svg {
  fill: #e8a79c;
  color: #e8a79c;
}

/* Aufgaben-Etikett auf der Galerie-Kachel (0033): oben links, dunkler
   Glas-Chip mit dem Aufgaben-Symbol. Zeigt, dass dieses Foto zu einer
   Fotoaufgabe gehört; der volle Aufgabentext steht im title/aria-label und in
   der Lightbox-Bildunterschrift. */
.gallery-cell__task {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: var(--r-m);
  padding: 5px;
  line-height: 0;
  pointer-events: none;
}

/* ---------- Galerie-Overlay (große Ansicht) ---------- */

.gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 30, 28, 0.92);
  padding: 48px;
}

.gallery-overlay[hidden] {
  display: none;
}

.gallery-overlay__stage {
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-overlay__media {
  max-width: 100%;
  max-height: calc(100vh - 96px);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

.gallery-overlay__close,
.gallery-overlay__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  cursor: pointer;
}

.gallery-overlay__close:hover,
.gallery-overlay__nav:hover {
  background: rgba(255, 255, 255, 0.24);
}

.gallery-overlay__close {
  top: 18px;
  right: 18px;
}

.gallery-overlay__nav--prev {
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
}

.gallery-overlay__nav--next {
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}

/* ---------- Einstellungen: Unternavigation ---------- */

/* Einstellungs-Unterreiter (26.09.2026, Icon-Karten): heller Karten-Container,
   je Kategorie ein weißer Button mit Symbol + Text, der aktive gefüllt in
   Akzentgrün. Am Handy ein 3×2-Raster (alle sechs auf einen Blick),
   ab Tablet eine Zeile. */
.settings-subnav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  background: var(--band);
  padding: 10px;
  border-radius: 16px;
  margin-bottom: 18px;
}

.settings-subtab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  /* Kein lokales Poppins Medium (500) – 600 statt 500. */
  font-weight: 600;
  border-radius: 12px;
  padding: 11px 6px;
  min-height: 48px;
  cursor: pointer;
  /* Lange Beschriftungen („Upload & E-Mail") dürfen am Handy zweizeilig
     werden – besser als Überlaufen; ab Tablet (unten) wieder einzeilig. */
  white-space: normal;
  line-height: 1.25;
  text-align: center;
  min-width: 0;
}

.settings-subtab span {
  text-wrap: balance;
}

.settings-subtab svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.settings-subtab:hover {
  border-color: var(--accent);
}

.settings-subtab[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(79, 112, 96, 0.35);
}

/* Ab Tablet: eine Zeile, Buttons so breit wie ihr Inhalt. */
@media (min-width: 761px) {
  .settings-subnav {
    display: flex;
    flex-wrap: wrap;
    max-width: max-content;
  }
  .settings-subtab {
    padding: 11px 16px;
    white-space: nowrap;
  }
}

/* Design-Unterreiter-Pillen (Umbau 28.09.2026): ersetzen die Icon-Karten
   oben, solange die Settings-Subview "design" aktiv ist (app.js toggelt
   settings-subnav/designSubnav gegenläufig). Gleiche Pillen-Optik wie
   .gallery-subnav, "Gäste-Design" ist reine Kennzeichnung (kein Klick-Ziel),
   "QR-Designer ↗" verlässt zu designer.html. */
.design-subnav {
  display: inline-flex;
  gap: 4px;
  background: var(--band);
  padding: 4px;
  border-radius: 999px;
  margin: 0 0 18px;
}

.design-subtab {
  border: 0;
  background: transparent;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.design-subtab[aria-current="page"] {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  font-weight: 600;
}

.design-subtab--link:hover {
  color: var(--text);
}

.settings-panel-card {
  max-width: 860px;
}

.settings-panel[hidden] {
  display: none;
}

/* ---------- Einstellungen: Formular-Bausteine ---------- */

.form-field {
  margin: 0 0 16px;
}

.form-field__label {
  display: block;
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.form-input {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 16px; /* min. 16px, sonst zoomt iOS beim Antippen in die Seite */
  padding: 10px 12px;
}

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

.form-input[readonly] {
  background: var(--band);
  color: var(--text-muted);
}

.form-input--date {
  max-width: 220px;
}

.form-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Formulargruppe "Überschrift + Datum" im Panel Allgemein: der Speichern-
   Knopf gilt NUR für diese beiden Felder. Die Trennlinie darunter grenzt die
   Gruppe sichtbar von Profilfoto und Auto-Speicher-Schaltern ab (die beide
   sofort selbst speichern) – so wirkt der Knopf nicht wie ein Panel-weiter
   Speichern-Knopf mitten zwischen Schaltern. */
.settings-form-group {
  padding-bottom: 22px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.settings-subheading {
  margin: 26px 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.settings-note {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Toggle-Gruppen: nutzen die bestehenden .setting-row/.switch-Bausteine,
   der Container trennt sie nur optisch vom Formular darüber. */
.settings-toggles {
  margin-top: 18px;
  border-top: 1px solid var(--line);
}

/* ---------- Einstellungen: Profilfoto des Brautpaars ---------- */

.profile-photo-block {
  margin-top: 26px;
}

.profile-photo-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.profile-photo-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--band);
  color: var(--text-muted);
  border: 1px solid var(--line);
}

.profile-photo-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Sicherheitsleine: Bild bzw. Platzhalter dürfen bei gesetztem [hidden] NICHT
   sichtbar bleiben. Die Regel oben (display:block) würde das UA-[hidden] sonst
   überstimmen; auf dem SVG-Platzhalter greift .hidden per JS nicht zuverlässig
   (hidden ist ein HTMLElement-Property, kein SVGElement-Property), deshalb
   toggeln wir in app.js das Attribut – und hier zieht es sicher durch. */
.profile-photo-avatar img[hidden],
.profile-photo-avatar svg[hidden] {
  display: none;
}

.profile-photo-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Das Label wirkt als Datei-Auswahl-Button – gleiche Optik wie .btn--outline,
   nur Cursor/Verhalten eines Labels. */
.profile-photo-actions label.btn {
  cursor: pointer;
}

.profile-photo-progress {
  margin-top: 12px;
  max-width: 320px;
}

/* ---------- Design-Tab: separates großes Titelbild (hero/editorial) ---------- */
.design-photo-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.design-photo-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.design-photo-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Rechteckige Vorschau (Querformat), passend zum großen Hero-Motiv –
   bewusst anders als der runde Profilfoto-Kreis, damit klar ist: anderes Bild. */
.design-photo-preview {
  width: 148px;
  height: 92px;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--band);
  color: var(--text-muted);
  border: 1px solid var(--line);
}

.design-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Wie beim Profilfoto: [hidden] muss display schlagen, und der SVG-Platzhalter
   wird per toggleAttribute (nicht .hidden) geschaltet. */
.design-photo-preview img[hidden],
.design-photo-preview svg[hidden] {
  display: none;
}

.design-photo-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.design-photo-actions label.btn {
  cursor: pointer;
}

/* ---------- Einstellungen: Datenschutz (Meldungs-Verweis) ---------- */

.report-jump {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.report-jump__text {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

/* ---------- Einstellungen: Design-Kategorie ---------- */

/* Design-Tab braucht mehr Breite als die übrigen Panels: links die
   nummerierten Schritte, rechts die iPhone-Vorschau (Entwurf 26.09.). */
.settings-panel-card--design {
  max-width: 1100px;
}

.design-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  align-items: start;
}

/* Nummerierte Schritte (Vorlage _preview/entwurf/einstellungen-design.html):
   jeder Schritt eine ruhige Zeile mit Kreisnummer, Titel, Hinweis. */
.design-step {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.design-step:first-child {
  padding-top: 6px;
}

.design-step:last-of-type {
  border-bottom: none;
}

.design-step__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.design-step__num {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--band);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 600;
}

.design-step__title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
}

.design-step__optional {
  font-weight: 400;
  color: var(--text-muted);
}

.design-step__hint {
  margin: 0 0 14px 34px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Schritt-Inhalte leicht unter die Nummer eingerückt (wie im Entwurf). */
.design-step .color-swatches,
.design-step .template-grid,
.design-step .color-free,
.design-step .form-field,
.design-step .layout-cards,
.design-step .setting-row--inline {
  margin-left: 34px;
}

.design-step .template-grid {
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .design-step .color-swatches,
  .design-step .template-grid,
  .design-step .color-free,
  .design-step .form-field,
  .design-step .layout-cards,
  .design-step .setting-row--inline,
  .design-step__hint {
    margin-left: 0;
  }
}

/* Schalter-Zeile innerhalb eines Schritts (Überzeile ausblenden): nutzt die
   .setting-row/.switch-Bausteine, nur ohne Panel-Trennlinie. */
.setting-row--inline {
  border-bottom: none;
  padding-top: 2px;
}

/* ---------- Farbkombination: reiche Vorlagen-Karten (Foto + Hex) ---------- */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin: 0 0 4px;
}
.palette-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.palette-card:hover {
  border-color: #9bb3a6;
  transform: translateY(-1px);
}
.palette-card[aria-pressed="true"] {
  border-color: #4f7060;
  box-shadow: 0 0 0 1px #4f7060, 0 8px 20px -12px rgba(47, 58, 56, 0.5);
}
.palette-card__hero {
  position: relative;
  border-radius: 11px;
  overflow: hidden;
  aspect-ratio: 1864 / 484;
  background: var(--band);
}
.palette-card__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.palette-card__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #5b8f6e;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}
.palette-card[aria-pressed="true"] .palette-card__check {
  display: flex;
}
.palette-card__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  padding: 0 2px;
}
.palette-card__colors {
  display: flex;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 9px 2px 2px;
}
.palette-card__color {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}
.palette-card__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  flex: 0 0 auto;
}
.palette-card__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.palette-card__ctitle {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}
.palette-card__chex {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* "Farbe anpassen"-Regler (Hintergrund + Akzent) */
.color-adjust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 16px 0 0;
}
.color-adjust {
  flex: 1 1 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 14px 16px;
}
.color-adjust__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
.color-adjust__sw {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  flex: 0 0 auto;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.color-adjust__sw:hover {
  transform: scale(1.06);
  box-shadow: 0 0 0 3px rgba(79, 112, 96, 0.16);
}
.color-adjust__titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.color-adjust__label {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}
.color-adjust__sub {
  font-size: 12.5px;
  color: var(--text-muted);
}
.color-adjust__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.color-adjust__native {
  width: 46px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
}
.color-adjust__native::-webkit-color-swatch-wrapper { padding: 2px; }
.color-adjust__native::-webkit-color-swatch { border: none; border-radius: 7px; }
.color-adjust__native::-moz-color-swatch { border: none; border-radius: 7px; }
/* Hex-Feld + Haken-Button als eine Einheit (Input-Gruppe) */
.color-adjust__field {
  display: flex;
  flex: 1 1 auto;
  min-width: 120px;
}
.color-adjust__hex {
  flex: 1 1 auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  text-transform: uppercase;
}
.color-adjust__hex.is-invalid {
  border-color: #c0392b;
  animation: hexShake 0.3s ease;
}
@keyframes hexShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.color-adjust__hexok {
  flex: 0 0 auto;
  width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-left: none;
  border-radius: 0 9px 9px 0;
  background: var(--card);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.color-adjust__hexok:hover {
  background: var(--band);
  color: var(--text);
}
.color-adjust__hexok.is-ok {
  background: #5b8f6e;
  border-color: #5b8f6e;
  color: #fff;
}
.color-adjust__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font-size: 13.5px;
  white-space: nowrap;
}
/* Schmale Screens: Hex voll lesbar, "Farbe anpassen" rückt in die zweite Zeile. */
@media (max-width: 480px) {
  .color-adjust__row { flex-wrap: wrap; }
  .color-adjust__hex { flex: 1 1 120px; }
  .color-adjust__btn { flex: 1 1 100%; justify-content: center; margin-top: 2px; }
}

/* Upload-Fortschritt mit Prozent-Text (Profilfoto + Titelbild) */
.upload-progress__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.upload-progress__hint {
  font-weight: 400;
}

/* ---------- Schritt 1: Layout-Karten mit Mini-Vorschau ---------- */

.layout-cards {
  display: grid;
  /* 4 Layouts seit „Snap Signature" (27.09.2026): 2×2 statt 3er-Reihe. */
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 400px;
}

.layout-card {
  position: relative;
  display: block;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card);
  padding: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.layout-card:hover {
  border-color: var(--accent-dark);
}

.layout-card[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.layout-card__badge {
  position: absolute;
  top: -9px;
  right: 10px;
  z-index: 1;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.layout-card__badge[hidden] {
  display: none;
}

.layout-card__mini {
  display: block;
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #eef3ee;
  margin-bottom: 8px;
}

.layout-card__label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.layout-card__desc {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
  padding: 1px 2px 2px;
}

/* Mini-Vorschauen rein aus CSS: ein Foto-artiger Verlauf steht fürs
   Brautpaar-Foto, Balken für Text und Button (Entwurf 26.09.). */
.lm {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 3px;
}

.lm-std__photo {
  top: 14%;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(150deg, #c9d6c3, #8ba08c 55%, #5f7263);
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.lm-std__l1 { top: 46%; width: 52%; height: 7%; background: #cfdcd2; }
.lm-std__l2 { top: 57%; width: 34%; height: 4%; background: #e0e8e1; }
.lm-std__btn { top: 70%; width: 62%; height: 10%; background: var(--accent); }

.layout-card__mini--hero {
  background: linear-gradient(160deg, #a7b8a4, #6d8271 45%, #3d4c43);
}

.lm-hero__scrim {
  inset: 0;
  left: 0;
  width: 100%;
  transform: none;
  border-radius: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(16, 22, 20, 0.66));
}

.lm-hero__l1 { top: 58%; width: 54%; height: 7%; background: rgba(255, 255, 255, 0.92); }
.lm-hero__l2 { top: 69%; width: 32%; height: 4%; background: rgba(255, 255, 255, 0.6); }
.lm-hero__btn { top: 79%; width: 62%; height: 10%; background: #ffffff; }

/* Editorial: Foto-Verlauf oben, läuft per Maske weich in die Creme-Fläche
   aus, Textzeilen linksbündig darunter. */
/* Snap Signature: Foto-Grund, Creme-Karte mit Rand, Siegel-Punkt oben */
.layout-card__mini--sig {
  background: linear-gradient(165deg, #b9c8b3, #86997f 55%, #5c6e5f);
}
.lm-sig__card {
  top: 22%;
  width: 78%;
  height: 72%;
  border-radius: 8px 8px 3px 3px;
  background: rgba(252, 250, 244, 0.94);
}
.lm-sig__seal {
  top: 13%;
  width: 17%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7fa38d, #4f7060 70%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.lm-sig__l1 { top: 40%; width: 46%; height: 7%; border-radius: 3px; background: #47544b; }
.lm-sig__l2 { top: 51%; width: 30%; height: 4.5%; border-radius: 3px; background: #9aa79d; }
.lm-sig__btn { top: 66%; width: 56%; height: 10%; border-radius: 999px; background: #4f7060; }

.layout-card__mini--ed {
  background: #f4efe4;
}

.lm-ed__img {
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 62%;
  border-radius: 0;
  background: linear-gradient(165deg, #b9c8b3, #82977f 50%, #55665a);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 40%, transparent 96%);
}

.lm-ed__l1 { top: 58%; left: 10%; transform: none; width: 52%; height: 7%; background: #ddd3bd; }
.lm-ed__l2 { top: 69%; left: 10%; transform: none; width: 34%; height: 4%; background: #e8e0cd; }
.lm-ed__btn { top: 79%; left: 10%; transform: none; width: 48%; height: 10%; background: var(--accent); border-radius: 4px; }

/* Mehrzeiliges Textfeld (Einleitungstext) + Zeichen-Zähler. */
.form-input--textarea {
  max-width: 520px;
  min-height: 88px;
  resize: vertical;
  line-height: 1.5;
}

.char-counter {
  margin: 4px 0 0;
  max-width: 520px;
  text-align: right;
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.template-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card);
  cursor: pointer;
  font-family: inherit;
}

.template-card:hover {
  border-color: var(--accent-dark);
}

.template-card[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.template-card__swatch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  overflow: hidden;
}

.template-card__sample {
  font-size: 24px;
  line-height: 1;
}

.template-card__button {
  position: absolute;
  bottom: 8px;
  width: 46px;
  height: 12px;
}

.template-card__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}

/* Farb-Presets (Akzent/Hintergrund) – Kreis + sichtbarer Farbname */
.color-swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.color-swatch {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12.5px;
  padding: 5px 12px 5px 6px;
  cursor: pointer;
}

.color-swatch:hover {
  background: var(--band);
}

.color-swatch[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  color: var(--text);
}

.color-swatch__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line);
  flex: 0 0 auto;
}

/* Fertige Farbkombinationen: etwas größere Chips mit zweifarbigem Punkt
   (linke Hälfte Hintergrund, rechte Hälfte Akzent – per inline-Gradient gesetzt). */
.color-swatches--palette {
  margin-bottom: 4px;
}

.palette-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12.5px;
  padding: 5px 14px 5px 6px;
  cursor: pointer;
}

.palette-swatch:hover {
  background: var(--band);
}

.palette-swatch[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  color: var(--text);
}

.palette-swatch__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  flex: 0 0 auto;
}

.form-field__hint {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.color-free {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
}

.color-free input[type="color"] {
  width: 40px;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  cursor: pointer;
}

/* Speichern + Zurücksetzen nebeneinander (umbrechend auf schmalen Schirmen). */
.design-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* ---------- Design-Vorschau: Handy-Rahmen ---------- */

.design-preview {
  position: sticky;
  top: 90px;
}

.design-preview__label {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

.phone-frame {
  width: 220px;
  margin: 0 auto;
  border: 8px solid #2c3532;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: #2c3532;
}

/* Live-Vorschau: echte Gäste-Seite als iframe im iPhone-Rahmen
   (assets/img/cloud/iphone-frame.png, 941x1672, Bildschirm transparent
   ausgestanzt). Das iframe sitzt exakt im Bildschirm-Ausschnitt (Prozentwerte
   aus dem freigegebenen Entwurf), das Rahmen-PNG liegt darüber. Das Dashboard
   schickt bei jeder Änderung das Design per postMessage in das iframe;
   app.js (fitDesignPreview) skaliert die 390px-Seite in den Ausschnitt. */
.iphone-shell {
  position: relative;
  width: 340px;
  max-width: 100%;
  aspect-ratio: 941 / 1672;
  margin: 0 auto;
  filter: drop-shadow(0 24px 48px rgba(47, 58, 56, 0.22));
}

.iphone-shell__screen {
  position: absolute;
  left: 12.96%;
  top: 3.05%;
  width: 74.07%;
  height: 92.88%;
  border-radius: 13% / 6%;
  overflow: hidden;
  background: #f2f6f2;
}

.iphone-shell__screen iframe {
  display: block;
  width: 390px;   /* echte Handy-Breite der Gäste-Seite … */
  height: 869px;  /* … app.js überschreibt Höhe + Scale passend zum Ausschnitt */
  border: 0;
  transform-origin: top left;
}

/* Rahmen-PNG (inkl. Dynamic Island) liegt ÜBER dem iframe. */
.iphone-shell__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.design-preview__note {
  margin: 14px auto 0;
  max-width: 300px;
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}

.phone-frame__screen {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 16px;
  border-radius: 22px;
  text-align: center;
  transition: background 0.2s ease;
}

.phone-frame__headline {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.phone-frame__date {
  margin: 0;
  font-size: 12.5px;
  opacity: 0.75;
}

.phone-frame__btn {
  margin-top: 14px;
  padding: 9px 20px;
  font-size: 12.5px;
  font-weight: 600;
}

/* ---------- Einstellungen: Diashow (design.wall) ----------
   Aufbau wie der Design-Tab: links die Bedienelemente, rechts eine Vorschau.
   Die Vorschau ist die echte wand.html im Demo-Modus, verkleinert auf eine
   16:9-Leinwand (iframe rendert in 4-facher Größe und wird auf ein Viertel
   skaliert, damit die Beamer-Proportionen stimmen). */

.wand-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 28px;
  align-items: start;
}

.wand-settings-preview {
  position: sticky;
  top: 90px;
}

.wand-preview-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #edf1ea; /* Bühnen-Creme der Diashow, bis das iframe lädt */
  box-shadow: var(--shadow-card);
}

.wand-preview-frame iframe {
  width: 400%;
  height: 400%;
  transform: scale(0.25);
  transform-origin: top left;
  border: 0;
  pointer-events: none; /* reine Vorschau, Klicks (Vollbild) bleiben draußen */
}

/* Diashow-Design-Kacheln: nutzen die .template-card-Bausteine des Design-Tabs,
   nur die Eukalyptus-Kachel trägt als Mini-Vorschau die echte Ranken-Grafik. */
.template-grid--wand {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  max-width: 420px;
}

.template-card__wand-leaf {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 52px;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
}

/* Schieberegler "Sekunden pro Bild" mit sichtbarem Wert daneben. */
.range-row {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 360px;
}

.range-row input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.range-row__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  min-width: 3em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Responsiv ---------- */

@media (max-width: 900px) {
  .design-layout,
  .wand-settings-layout {
    grid-template-columns: 1fr;
  }
  .design-preview,
  .wand-settings-preview {
    position: static;
  }
}

@media (max-width: 520px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
  }
  .gallery-overlay {
    padding: 16px;
  }
  .gallery-overlay__media {
    max-height: calc(100vh - 32px);
  }
  .gallery-overlay__nav--prev {
    left: 6px;
  }
  .gallery-overlay__nav--next {
    right: 6px;
  }
  .demo-banner {
    padding: 8px 12px;
    gap: 8px;
  }
  /* Icon-Karten: „Upload & E-Mail" ist der längste Reiter – auf schmalen
     Handys Schrift/Icon leicht verkleinern, damit die 3er-Zelle reicht. */
  .settings-subtab {
    font-size: 12px;
    gap: 5px;
    padding: 11px 4px;
  }
  .settings-subtab svg {
    width: 15px;
    height: 15px;
  }
}

/* Kleine Androids (bis 374px): „Datenschutz" ist ein unbrechbares Wort und
   passt mit Icon nicht in die 3er-Zelle – dort nur Text, Icons weglassen. */
@media (max-width: 374px) {
  .settings-subtab {
    font-size: 12px;
    padding: 11px 2px;
  }
  .settings-subtab svg {
    display: none;
  }
}

/* ===== Vorlagen-Katalog (vorlagen.html) ===== */
.katalog-intro { padding: 56px 0 80px; }
.katalog-titel {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 500; color: var(--text); margin: 6px 0 14px; line-height: 1.1;
}
.katalog-lead { max-width: 640px; color: var(--text-muted); font-size: 16px; line-height: 1.6; margin: 0 0 28px; }
.katalog-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.katalog-tab {
  border: 1px solid var(--line); background: var(--card); color: var(--text-muted);
  border-radius: 999px; padding: 9px 18px; font-family: inherit; font-size: 14px; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.katalog-tab:hover { background: var(--band); }
.katalog-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.katalog-grid { display: grid; gap: 18px; }
.katalog-grid--a5 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.katalog-grid--tischaufsteller,
.katalog-grid--visitenkarte { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.katalog-card {
  margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m);
  overflow: hidden; box-shadow: 0 18px 40px -30px rgba(47,58,56,.5);
}
.katalog-card img { display: block; width: 100%; height: auto; }
.katalog-card figcaption { padding: 10px 12px; font-size: 13.5px; color: var(--text); text-align: center; }
.katalog-note { margin: 26px 0 0; font-size: 13.5px; color: var(--text-muted); max-width: 640px; }
.katalog-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* Logo-Seitenuebergang: kurzes Vollbild-Overlay (Logo + Wortmarke) beim internen Seitenwechsel.
   Per transition.js via .aktiv gesteuert; ~0,9 s gesamt, prefers-reduced-motion aus. */
.seitenintro{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:#f2f6f2;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s ease,visibility 0s linear .35s}
.seitenintro.aktiv{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease}
.seitenintro__inner{display:flex;flex-direction:column;align-items:center;gap:.55rem;
  transform:translateY(5px) scale(.95);opacity:0;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .4s ease}
.seitenintro.aktiv .seitenintro__inner{transform:none;opacity:1}
.seitenintro__inner img{width:76px;height:76px}
/* Wortmarke exakt wie das Logo-Lockup (.brand__title = Poppins 600), NICHT Serif. */
.seitenintro__inner b{font-weight:600;font-size:1.9rem;letter-spacing:-.02em;color:#2f3a38}
.seitenintro__inner small{font-size:.63rem;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:#4f7060;margin-top:2px}
@media(prefers-reduced-motion:reduce){.seitenintro{display:none}}

/* Zielseite eines Uebergangs: Overlay ab dem ERSTEN Paint deckend (kein Aufblitzen der neuen Seite).
   Das synchrone Inline-Head-Skript setzt html.sm-intro-in noch vor dem Paint; nach ~600 ms entfernt es
   die Klasse wieder -> Overlay blendet ueber die Basis-Transition (opacity .35s) aus und gibt die Seite frei. */
html.sm-intro-in .seitenintro { opacity: 1; visibility: visible; pointer-events: auto; }
html.sm-intro-in .seitenintro__inner { opacity: 1; transform: none; }

/* ============================================================
   Freigabe-Umbau 06.09.2026: neue Bausteine außerhalb der
   Moderations-Sektion (Kopf-Pille, Speicherwarnung, Abhol-Karte,
   Lightbox-Aktionen des Veranstalters).
   ============================================================ */

/* Status-Pille im Kopf: rötlich, wenn die Galerie für Gäste aus ist. */
.event-status-pill--off {
  background: #f0e3e3;
  color: #93433c;
}

.event-status-pill--off .event-status-pill__dot {
  background: #b5714f;
}

/* Speicherwarnung ab ~90 % (renderHeader). */
.stat-card__warn {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #93433c;
}

.progress-bar__fill--warn {
  background: #b5714f;
}

/* Abhol-Karte (Events-Tab): nur Verweis + Zähler aufs Abhol-Portal. */
.delivery-card {
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
  margin-bottom: 24px;
}

.delivery-card__body {
  flex: 1 1 320px;
  min-width: 0;
}

.delivery-card__body .link-row {
  margin: 12px 0 0;
}

.delivery-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Host-Buttons in der Lightbox-Leiste (opts.actions): Freigeben/Ausblenden/
   Herz im Veranstalterbereich, Herz geben/wegnehmen auf der Gäste-Seite
   (seit 0034 – vorher rief die Gäste-Seite ohne actions auf). */
.lb__host-btn {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lb__host-btn:hover {
  background: rgba(255, 255, 255, 0.26);
}

.lb__host-btn:disabled {
  opacity: 0.5;
  cursor: progress;
}

.lb__host-btn--approve {
  background: rgba(79, 112, 96, 0.9);
}

.lb__host-btn--approve:hover {
  background: rgba(79, 112, 96, 1);
}

/* Herz geben/wegnehmen (0034): seit dem Gäste-Umbau 25.09. derselbe ruhige
   Glas-Chip wie die übrigen Leisten-Knöpfe – die frühere Rosé-Vollfläche war
   das lauteste Element der ganzen Großansicht und zog den Blick vom Foto weg. */
.lb__host-btn--heart {
  background: rgba(255, 255, 255, 0.16);
}

.lb__host-btn--heart:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Sehr schmale Handys: zwei feste Spalten statt auto-fill (sonst stünde
   eine einzelne Riesen-Kachel pro Zeile). */
@media (max-width: 400px) {
  .mod-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* =========================================================================
   Alben je Programmpunkt (Migration 0032): Karte im Events-Tab.
   Alles auf den bestehenden Tokens (:root oben), keine neuen Farben.
   ========================================================================= */
.albums-card { display: flex; flex-direction: column; gap: 14px; }

.albums-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.album-row {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card);
}

.album-row__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.album-row__name { font-weight: 600; color: var(--text); }

.album-row__badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--band);
  border-radius: 999px;
  padding: 2px 10px;
}

.album-row__link { font-size: 0.8rem; word-break: break-all; }

.album-row__actions { display: flex; gap: 6px; flex-wrap: wrap; }

.album-row__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--card);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.album-row__btn:hover {
  color: var(--accent-dark);
  border-color: var(--accent);
  background: var(--bg);
}

.albums-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.albums-photographer {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.albums-photographer__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Die Aktions-Knöpfe des Fotografen-Blocks nicht über die volle Breite
   dehnen (die generische .qr-actions-Reihe streckt in Grid-Kontexten). */
.albums-photographer .qr-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.albums-photographer .qr-actions .btn { flex: 0 0 auto; }

/* ===========================================================================
   Fotoaufgaben (Migration 0033)
   a) Gäste-Seite: Karte „Kleine Fotoaufgaben" (gast.html #tasksSection).
      Nutzt dieselben Tokens wie der Rest der Gäste-Seite (--text/--accent/
      --line/--card), die gast-design.css bei Event-Designs ummappt – die
      Karte färbt sich also automatisch mit dem gewählten Design mit.
   b) Dashboard: Karte „Fotoaufgaben" (dashboard.html #tasksCard), gleiche
      Formensprache wie die Alben-Karte (album-row-Muster, Radien --r-m/--r-s).
   =========================================================================== */

.guest-tasks {
  padding: 20px 18px;
  margin: 16px 0;
}

.guest-tasks__title {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--text);
}

.guest-tasks__text {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.guest-tasks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Eine Aufgabe = eine antippbare Zeile. Bewusst dezent (Outline statt
   Voll-Farbe), damit der Upload-Bereich die Hauptsache bleibt. */
.guest-task {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.guest-task:hover {
  border-color: var(--accent);
}

.guest-task--selected {
  border-color: var(--accent);
  background: var(--band);
}

.guest-task__icon {
  color: var(--accent);
  flex-shrink: 0;
  display: inline-flex;
  margin-top: 2px;
}

.guest-task__text { flex: 1; }

/* Gewählte Aufgabe in der Consent-Karte (vor „Jetzt hochladen"). */
.guest-task-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--band);
  font-size: 13px;
  color: var(--text);
}

.guest-task-choice__clear {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}

.guest-task-choice__clear:hover { color: var(--text); }

/* --- Dashboard-Karte „Fotoaufgaben" -------------------------------------- */

.tasks-card { display: flex; flex-direction: column; gap: 14px; }

.tasks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-row {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--card);
}

/* Inaktive Aufgaben bleiben sichtbar (Verwalten!), treten aber zurück. */
.task-row--inactive { opacity: 0.62; }

.task-row__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.task-row__toggle input { accent-color: var(--accent); }

.task-row__text {
  flex: 1 1 240px;
  min-width: 0;
  font-size: 0.88rem;
  color: var(--text);
}

.task-row__count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--band);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* Klickbarer Zähler: öffnet die Fotos der Aufgabe in der Lightbox. Sieht aus
   wie die Pill, verhält sich wie ein Knopf (Cursor, Hover, Fokus). */
.task-row__count--btn {
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.task-row__count--btn:hover {
  background: var(--accent-soft, var(--band));
  border-color: var(--accent);
}

.task-row__count--btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.task-row__actions { display: flex; gap: 6px; flex-wrap: wrap; }

.tasks-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Vorlagen-Auswahl (Startset nach Anlass) */
.tasks-catalog {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tasks-catalog__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.tasks-catalog__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 10px 12px;
}

.tasks-catalog__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}

.tasks-catalog__item input { accent-color: var(--accent); margin-top: 3px; }

.tasks-catalog__item--taken { opacity: 0.5; }

.tasks-catalog__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* =====================================================================
   Übersicht neu (26.09.2026) – Namensraum .ov-* / #view-events.
   Additiv: nichts Bestehendes wird überschrieben, alle alten Regeln für
   Galerie, Freigabe und Einstellungen bleiben gültig. Vorlage:
   _preview/entwurf/uebersicht-final.html (Sebis Freigabe).
   ===================================================================== */
.ov {
  --ov-ink: #1f2926;
  --ov-ink-2: #5f6d69;
  --ov-surface-2: #f4f7f4;
  --ov-line: rgba(47, 58, 56, 0.09);
  --ov-shadow: 0 1px 2px rgba(31, 41, 38, 0.04), 0 10px 30px -14px rgba(31, 41, 38, 0.18);
  --ov-ok: #3f7d5a;
  --ov-ok-bg: #e4f1e9;
  --ov-pad: 32px;
  color: var(--ov-ink);
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 40px;
}
.ov h2, .ov h3, .ov p { margin: 0; }
/* :where() hält die Spezifität bei (0,0,1), damit die Klassen darunter ihre eigene Schriftgröße setzen können. */
:where(.ov) button { font: inherit; cursor: pointer; }

/* Der Seitenkopf (Titel + Status-Pille) weicht dem Titelbild-Hero, sobald
   ein Event geladen ist. #pageTitle/#statGalleryVisible bleiben im DOM. */
#appRoot[data-view="events"][data-has-event="1"] .page-header { display: none; }

/* ---- Hero ---- */
.ov-hero { position: relative; margin: 18px 0 0; height: 320px; overflow: hidden; border-radius: 22px; background: var(--band); }
.ov-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); }
.ov-hero__t { position: absolute; left: 20px; right: 20px; bottom: 6px; }
.ov-eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-dark); font-weight: 600; }
.ov-name { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 40px; line-height: 1.02; letter-spacing: -0.015em; margin-top: 4px; color: var(--ov-ink); text-wrap: balance; }
.ov-meta { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ov-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--ov-ok-bg); color: var(--ov-ok); }
.ov-pill--date { background: #fff; color: var(--ov-ink-2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }

.ov-note { margin-top: 12px; font-size: 13px; color: var(--ov-ink-2); padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--ov-line); }
.ov-note--warn { color: #7a3b3b; background: #fbeeee; border-color: rgba(122, 59, 59, 0.18); }

/* ---- Bausteine ---- */
.ov-card { background: #fff; border-radius: 18px; box-shadow: var(--ov-shadow); border: 1px solid var(--ov-line); }
.ov-sec { margin-top: 22px; }
.ov-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 0 2px; }
.ov-sec__title { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ov-ink-2); }
.ov-sec__count { font-weight: 400; letter-spacing: 0; text-transform: none; }
.ov-sec__link { font-size: 13px; color: var(--accent); font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; }
.ov-sec__link:hover { text-decoration: underline; }
.ov-help { font-size: 13px; color: var(--ov-ink-2); margin: -2px 2px 12px; }

.ov-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 12px 16px; font-weight: 600; font-size: 14px; border: 1px solid transparent; text-decoration: none; line-height: 1.2; min-height: 44px; /* sicheres Touch-Ziel (verify_qr) */ }
.ov-btn--primary { background: var(--accent); color: #fff; }
.ov-btn--primary:hover { background: var(--accent-dark); }
.ov-btn--outline { background: #fff; color: var(--ov-ink); border-color: rgba(47, 58, 56, 0.18); }
.ov-btn--outline:hover { border-color: var(--accent); color: var(--accent-dark); }
.ov-btn--block { width: 100%; margin-top: 10px; }
.ov-btn--sm { padding: 8px 12px; font-size: 13px; border-radius: 10px; }
.ov-btn svg { width: 16px; height: 16px; flex: none; }
.ov-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ov-badge { display: inline-block; white-space: nowrap; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; }
.ov-badge--soft { background: var(--band); color: var(--accent-dark); }
.ov-badge--muted { background: var(--ov-surface-2); color: var(--ov-ink-2); }
.ov-iconbtn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(47, 58, 56, 0.16); background: #fff; color: var(--ov-ink); display: inline-grid; place-items: center; text-decoration: none; }
.ov-iconbtn svg { width: 16px; height: 16px; }
.ov-iconbtn:hover { border-color: var(--accent); color: var(--accent-dark); }

/* ---- Gäste-Link ---- */
.ov-share { margin-top: 14px; padding: 14px; }
.ov-share__row { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; }
.ov-share__qr { width: 84px; height: 84px; border-radius: 12px; border: 1px solid var(--ov-line); padding: 5px; background: #fff; }
.ov-share__qr canvas, .ov-share__qr img { width: 100% !important; height: 100% !important; display: block; }
.ov-share__body { min-width: 0; }
.ov-share__lab { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ov-ink-2); font-weight: 600; }
.ov-share__album { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ov-ink-2); margin-top: 3px; min-width: 0; }
.ov-share__album > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-share__album strong { color: var(--ov-ink); font-weight: 600; }
.ov-share__switch { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 600; font-size: 12.5px; text-decoration: underline; text-decoration-color: rgba(79, 112, 96, 0.4); text-underline-offset: 2px; flex: none; }
/* Link vollständig lesbar (26.09.2026): bricht statt „…" – Gäste sollen die
   Adresse notfalls abtippen können. Der Hinweissatz darunter ist raus. */
.ov-share__url { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; line-height: 1.5; color: var(--ov-ink); white-space: normal; word-break: break-all; margin-top: 3px; }
.ov-share__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ov-share__acts .ov-btn { padding: 12px 8px; font-size: 13.5px; white-space: nowrap; }

/* Popover-Menü (Hauptalbum wechseln, Album-Aktionen) */
.ov-menu-wrap { position: relative; }
.ov-menu { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); min-width: 230px; max-width: min(320px, 90vw); background: #fff; border-radius: 14px; border: 1px solid var(--ov-line); box-shadow: 0 14px 40px -12px rgba(31, 41, 38, 0.3); padding: 6px; }
.ov-menu--left { right: auto; left: 0; }
.ov-menu__title { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ov-ink-2); font-weight: 600; padding: 8px 10px 4px; }
.ov-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; padding: 9px 10px; font-size: 14px; color: var(--ov-ink); }
.ov-menu__item:hover { background: var(--ov-surface-2); }
.ov-menu__item svg { width: 16px; height: 16px; flex: none; color: var(--accent-dark); }
.ov-menu__item[aria-checked="true"] { font-weight: 600; }
.ov-menu__item[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--ov-ok); }
.ov-menu__item:disabled { opacity: 0.5; cursor: default; }
.ov-menu__sep { height: 1px; background: var(--ov-line); margin: 4px 6px; }
.ov-menu__item--danger { color: #8a3b3b; }
.ov-menu__item--danger svg { color: #8a3b3b; }

/* ---- Einrichtungs-Check ---- */
.ov-steps { padding: 0 0 6px; }
.ov-steps__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.ov-steps__head .ov-sec__title { flex: 1; }
.ov-steps__prog { font-size: 12.5px; font-weight: 600; color: var(--ov-ink-2); }
.ov-steps__foot { display: flex; justify-content: flex-end; padding: 8px 16px 12px; border-top: 1px solid var(--ov-line); }
.ov-bar { height: 5px; border-radius: 999px; background: var(--band); overflow: hidden; margin: 0 16px 4px; }
.ov-bar > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width 0.3s ease; }
.ov-step { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--ov-line); }
.ov-step__dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(47, 58, 56, 0.22); display: grid; place-items: center; flex: none; color: var(--ov-ink-2); font-size: 12px; font-weight: 600; }
.ov-step__dot svg { width: 13px; height: 13px; }
.ov-step--done .ov-step__dot { background: var(--ov-ok); border-color: var(--ov-ok); color: #fff; }
.ov-step--skipped .ov-step__dot { background: #c7d3cc; border-color: #c7d3cc; color: #fff; }
.ov-step--next .ov-step__dot { border-color: var(--accent); color: var(--accent); }
.ov-step__b { flex: 1; min-width: 0; }
.ov-step__t { font-weight: 600; font-size: 14.5px; }
.ov-step__s { font-size: 12.5px; color: var(--ov-ink-2); }
.ov-step--done .ov-step__t, .ov-step--skipped .ov-step__t { color: var(--ov-ink-2); font-weight: 500; text-decoration: line-through; text-decoration-color: rgba(47, 58, 56, 0.3); font-size: 14px; }
.ov-step--done, .ov-step--skipped { padding: 9px 16px; }
.ov-step--next { background: rgba(79, 112, 96, 0.06); }
.ov-step__r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ov-step__r .ov-btn { min-width: 96px; }
.ov-step__skip, .ov-step__cta { background: none; border: 0; padding: 0; font-size: 11.5px; color: var(--ov-ink-2); text-decoration: underline; text-decoration-color: rgba(47, 58, 56, 0.3); text-underline-offset: 2px; }
.ov-step__cta { font-size: 12.5px; font-weight: 600; text-decoration: none; }
.ov-step__cta:hover, .ov-step__skip:hover { color: var(--accent-dark); }

/* ---- Schnellzugriff 2×2 + Aufklapp-Karten ---- */
.ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ov-tile { position: relative; padding: 14px; border-radius: 16px; text-decoration: none; color: inherit; min-height: 108px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; text-align: left; font: inherit; }
.ov-tile:hover { border-color: rgba(79, 112, 96, 0.4); }
.ov-tile[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, var(--ov-shadow); }
.ov-tile__ic { width: 34px; height: 34px; border-radius: 10px; background: var(--band); color: var(--accent-dark); display: grid; place-items: center; }
.ov-tile__ic svg { width: 18px; height: 18px; }
.ov-tile__t { display: block; font-weight: 600; font-size: 14.5px; margin-top: 10px; }
.ov-tile__s { display: block; font-size: 12px; color: var(--ov-ink-2); }
.ov-tile__badge { position: absolute; top: 12px; right: 12px; }
.ov-tile--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.ov-tile--primary:hover { background: var(--accent-dark); }
.ov-tile--primary .ov-tile__ic { background: rgba(255, 255, 255, 0.18); color: #fff; }
.ov-tile--primary .ov-tile__s { color: rgba(255, 255, 255, 0.8); }
.ov-tile--primary .ov-badge { background: #fff; color: var(--accent-dark); }

.ov-panel { margin-top: 10px; padding: 14px 16px 16px; }
.ov-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ov-panel__title { font-size: 16px; font-weight: 600; }
.ov-panel__close { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--ov-surface-2); color: var(--ov-ink-2); font-size: 20px; line-height: 1; display: grid; place-items: center; }
.ov-panel__text { font-size: 13.5px; color: var(--ov-ink-2); margin-bottom: 12px; }
.ov-panel .tasks-card { padding: 0; border: 0; box-shadow: none; background: transparent; }
.ov-panel .tasks-card .panel__title { display: none; }
.ov-wall { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
.ov-wall__qr { width: 96px; height: 96px; border-radius: 12px; border: 1px solid var(--ov-line); padding: 5px; }
.ov-wall__qr canvas { width: 100% !important; height: 100% !important; display: block; }
.ov-wall__body { min-width: 0; }
.ov-wall__acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ---- Alben ---- */
.ov-albums { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
/* min-width:0: Grid-Items haben min-width:auto – die lange Token-URL würde
   das Item sonst über den Schirm drücken (Seite horizontal scrollbar, Sebis
   iPhone-Fund 27.09.); erst mit 0 darf es schrumpfen und die Ellipsis greift. */
.ov-album { padding: 12px 14px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.ov-album__ic { width: 46px; height: 46px; border-radius: 12px; background: var(--band); color: var(--accent-dark); display: grid; place-items: center; flex: none; }
.ov-album__ic svg { width: 20px; height: 20px; }
.ov-album--off .ov-album__ic { background: var(--ov-surface-2); color: var(--ov-ink-2); }
.ov-album__b { flex: 1; min-width: 0; }
.ov-album__n { font-weight: 600; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 15px; }
.ov-album__n > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ov-album__s { display: block; font-size: 12px; color: var(--ov-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, "SF Mono", Menlo, monospace; margin-top: 2px; }
.ov-album__acts { display: flex; gap: 6px; flex: none; }
.ov-add { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 1.5px dashed rgba(79, 112, 96, 0.45); border-radius: 14px; background: rgba(79, 112, 96, 0.04); color: var(--accent-dark); }
.ov-add:hover { background: rgba(79, 112, 96, 0.08); }
.ov-add:disabled { opacity: 0.6; cursor: not-allowed; }
.ov-add__plus { width: 42px; height: 42px; border-radius: 12px; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; font-size: 24px; font-weight: 300; line-height: 1; }
.ov-add__body { min-width: 0; display: flex; flex-direction: column; }
.ov-add__t { font-weight: 600; }
.ov-add__s { font-size: 12.5px; color: var(--ov-ink-2); }

/* ---- QR-Code-Design ---- */
.ov-q { padding: 14px 16px 16px; }
.ov-q__row { display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: center; }
.ov-q__prev { width: 116px; height: 116px; border-radius: 14px; border: 1px solid var(--ov-line); padding: 6px; background: #fff; }
.ov-q__prev canvas, .ov-q__prev img { width: 100% !important; height: 100% !important; display: block; }
.ov-q__body { min-width: 0; }
.ov-q__lab { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ov-ink-2); font-weight: 600; margin-bottom: 6px; }
.ov-q__lab--gap { margin-top: 10px; }
.ov-q__styles { display: flex; gap: 6px; }
.ov-q__style { flex: 1; border: 1.5px solid rgba(47, 58, 56, 0.16); background: #fff; border-radius: 10px; padding: 7px 4px 5px; display: grid; justify-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--ov-ink-2); }
.ov-q__style svg { width: 20px; height: 20px; }
.ov-q__style[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-dark); background: rgba(79, 112, 96, 0.06); }
.ov-q__colors { display: flex; gap: 8px; align-items: center; }
/* Eigene QR-Farbe: Farbrad-Swatch + Hex-Feld + „Farbe anpassen" (Bausteine
   .color-adjust__* aus dem Design-Tab, hier nur kompakt angeordnet). */
.ov-q__custom { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ov-q__custom .color-adjust__field { flex: 1 1 130px; }
.ov-q__custom .color-adjust__btn { flex: 0 0 auto; }
.ov-q__color { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(47, 58, 56, 0.18); padding: 0; }
.ov-q__color[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.ov-q__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.ov-q__note { font-size: 12px; color: var(--ov-ink-2); margin-top: 10px; }

/* ---- Weiteres (Listenzeilen) ---- */
.ov-list { padding: 4px 0; }
.ov-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; text-decoration: none; color: inherit; border: 0; width: 100%; text-align: left; background: none; }
/* Trennlinie nur zwischen SICHTBAREN Zeilen (Fotobox/Laufzeit können fehlen). */
.ov-row:not([hidden]) ~ .ov-row:not([hidden]) { border-top: 1px solid var(--ov-line); }
.ov-row--link:hover { background: var(--ov-surface-2); }
.ov-row__ic { width: 40px; height: 40px; border-radius: 12px; background: var(--ov-surface-2); display: grid; place-items: center; color: var(--accent); flex: none; }
.ov-row__ic svg { width: 20px; height: 20px; }
.ov-row__b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ov-row__t { font-weight: 600; font-size: 15px; }
.ov-row__s { display: block; font-size: 12.5px; color: var(--ov-ink-2); }
.ov-row__chev { color: #aab5b0; flex: none; }
.ov-row__acts { display: flex; gap: 6px; flex: none; align-items: center; }

.ov-foot { margin-top: 26px; font-size: 12px; color: var(--ov-ink-2); display: flex; gap: 8px; align-items: flex-start; padding: 0 4px; }
.ov-foot svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--accent); }

/* ---- Foto-Galerie: Unterreiter Fotos / Fotos freigeben ---- */
.gallery-subnav { display: inline-flex; gap: 4px; background: var(--band); padding: 4px; border-radius: 999px; margin: 0 0 18px; }
.gallery-subtab { border: 0; background: transparent; padding: 8px 18px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 500; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.gallery-subtab[aria-current="page"] { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); font-weight: 600; }
.gallery-subtab__count { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #fff; }

/* ---- Desktop: zwei Spalten ---- */
@media (min-width: 1000px) {
  .ov-hero { height: 360px; }
  .ov-hero__t { left: 28px; right: 28px; bottom: 14px; }
  .ov-name { font-size: 48px; }
  .ov-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
  .ov-col > .ov-sec:first-child { margin-top: 14px; }
  .ov-col > .ov-share { margin-top: 14px; }
  .ov-col > .ov-share + .ov-sec { margin-top: 22px; }
}

/* ---- Mobil: Hero randlos wie im Entwurf ---- */
@media (max-width: 900px) {
  .ov-hero { margin: 0 -20px; height: 300px; border-radius: 0; }
  .ov-hero__t { left: 20px; right: 20px; }
}
@media (max-width: 520px) {
  .ov-hero { margin: 0 -14px; }
  .ov-hero__t { left: 16px; right: 16px; }
  .ov-name { font-size: 36px; }
}