/* Admin-Panel nutzt die volle Fensterbreite statt der zentrierten, auf
   --max-width begrenzten .container-Regel der Gast-Seiten (admin.css wird nur
   hier geladen, betrifft also keine andere Seite). #admin-login behält seine
   eigene schmale Breite (siehe weiter unten), ist von dieser Regel unberührt. */
#main-content {
  max-width: none;
}

/* Geht bis an den Fensterrand statt als abgesetzte Karte zu schweben — daher
   negative Margin gleich der horizontalen .container-Polsterung (1.25rem) und
   eckige statt runde Ecken. Bleibt beim Scrollen ganz oben sichtbar. */
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.75rem;
  margin: 0 -1.25rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 30;
}

.admin-header-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.admin-header-title h1 {
  margin: 0 0 0.15rem;
  font-size: 1.2rem;
}

/* Reserviert den Platz fürs künftige Marken-Logo — bewusst als erkennbarer
   Platzhalter (gestrichelter Rahmen) statt eines echten Icons, da noch keins
   existiert. */
.admin-logo-placeholder {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.admin-logo-placeholder svg {
  width: 1.4rem;
  height: 1.4rem;
}

.admin-header-apartment-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: none;
}

.admin-header-apartment-link:hover {
  color: var(--color-accent);
}

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Mobil: Kopfzeile bleibt einzeilig — Titel kürzt sich, Glocke & Co. stehen rechts. */
@media (max-width: 899px) {
  .admin-header {
    flex-wrap: nowrap;
    padding: 0.75rem 1rem;
  }

  .admin-header-title {
    min-width: 0;
    flex: 1;
  }

  .admin-header-title > div {
    min-width: 0;
  }

  .admin-header-title h1,
  .admin-header-apartment-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .admin-header-actions {
    margin-left: auto;
    flex-shrink: 0;
  }

  .admin-logo-placeholder {
    display: none;
  }
}

/* Hamburger-Button — nur ab Tablet-Breite abwärts sichtbar (siehe
   .admin-sidenav-Regeln weiter unten), auf Desktop bleibt die Seitenleiste
   permanent sichtbar und der Button ist überflüssig. Zwei Klassen kombiniert
   (statt nur .sidenav-toggle-btn), damit diese Regel zuverlässig gegen
   .icon-btns eigenes display:inline-flex gewinnt (gleiche Spezifität sonst,
   Reihenfolge im Stylesheet würde entscheiden). */
.icon-btn.sidenav-toggle-btn {
  display: none;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  line-height: 1;
  cursor: pointer;
}

.icon-btn svg {
  width: 1.2rem;
  height: 1.2rem;
}

.icon-btn:hover {
  background: var(--color-surface);
}

.icon-btn[aria-current="page"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.icon-btn-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

/* [hidden] hat per UA-Stylesheet display:none, wird aber von der eigenen
   display:flex-Regel oben überschrieben (gleiche Spezifität, Reihenfolge zählt) —
   ohne diese Regel bliebe der Punkt auch ohne Benachrichtigungen sichtbar. */
.icon-btn-badge[hidden] {
  display: none;
}

.notifications-wrap {
  position: relative;
}

.notifications-dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 2.5rem);
  max-height: 380px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.5rem;
  z-index: 40;
}

.notifications-empty {
  padding: 0.75rem;
  margin: 0;
}

.notifications-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.notifications-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.notifications-item:hover {
  background: var(--color-surface);
}

.notifications-item.is-conflict {
  background: var(--color-danger-bg);
}

.notifications-conflict {
  color: var(--color-danger);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Mitteilungen des Betreibers (admin-announcements.js) */
.notifications-section {
  margin-bottom: 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
}

.notifications-heading {
  margin: 0.2rem 0.7rem 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.notifications-announcement.is-unread strong::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: middle;
}

.notifications-announcement.is-important.is-unread {
  background: var(--color-accent-light);
}

.announcement-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-size: 0.95rem;
}

.announcement-banner[hidden] {
  display: none;
}

.notifications-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0.5rem 0;
}

.notifications-log-heading {
  margin: 0.2rem 0.7rem 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.notifications-log-item {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  cursor: default;
}

.notifications-log-item span:first-child {
  flex: 1;
}

.notifications-log-item .muted {
  font-size: 0.75rem;
  white-space: nowrap;
}

.notifications-log-delete {
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-sm);
}

.notifications-log-delete:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.notifications-add-form {
  display: flex;
  gap: 0.4rem;
  padding: 0.5rem 0.5rem 0.3rem;
}

.notifications-add-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.55rem;
  font-family: inherit;
  font-size: 0.82rem;
}

/* Schmale Seitennavigation: Übersicht/Einstellungen oben, darunter (nur wenn
   Einstellungen aktiv ist) die einzelnen Themenbereiche als eingerückte Liste.
   Ersetzt die vorherige horizontale Tab-Leiste innerhalb von Einstellungen. */
.admin-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.admin-sidenav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--color-surface);
  padding: 0.6rem;
  transition: width 0.15s ease;
}

.admin-main {
  min-width: 0;
}

/* Ab Tablet-Breite abwärts: keine Dauer-Leiste, nur der Menü-Knopf im Header.
   Er öffnet die Seitenleiste als Menü UNTER der Kopfzeile — so bleibt der Knopf
   sichtbar und schließt das Menü wieder (Symbol wechselt zu ×, js/ui/shell.js). */
@media (max-width: 899px) {
  /* Zwei Klassen, damit die Regel gegen .icon-btn.sidenav-toggle-btn (oben) gewinnt. */
  .icon-btn.sidenav-toggle-btn {
    display: inline-flex;
  }

  .admin-sidenav {
    display: none;
  }

  .admin-sidenav.is-open {
    display: flex;
    position: fixed;
    top: var(--admin-header-height, 4.75rem);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0.6rem);
  }

  /* Im Menü randlose Zeilen mit voller Beschriftung. */
  .admin-sidenav.is-open .sidenav-btn {
    margin: 0 -0.6rem;
    width: calc(100% + 1.2rem);
    padding-left: 0.7rem;
  }

  /* Einklappen gibt es nur am Desktop. */
  .admin-sidenav .sidenav-footer {
    display: none;
  }
}

@media (min-width: 900px) {
  .admin-shell {
    flex-direction: row;
    align-items: flex-start;
  }

  /* position:fixed statt sticky — die Leiste soll beim Scrollen der
     Hauptspalte überhaupt nicht mitlaufen, sondern komplett stehen bleiben.
     Bezieht sich auf den Viewport (kein Vorfahre setzt transform/filter),
     dadurch automatisch randlos an der linken Kante, ohne den vorherigen
     negative-Margin-Trick. */
  .admin-sidenav {
    position: fixed;
    top: var(--admin-header-height, 4.75rem);
    left: 0;
    width: 11rem;
    height: calc(100vh - var(--admin-header-height, 4.75rem));
    overflow-y: auto;
    border-right: 1px solid var(--color-border);
    z-index: 20;
  }

  /* .admin-main startet nach .container-eigenem Padding (1.75rem) im
     normalen Fluss — margin-left gleicht das aus, damit der Inhalt exakt
     Sidebar-Breite + 1rem Abstand vom Fensterrand beginnt, egal wie breit
     das Container-Padding gerade ist. */
  .admin-main {
    flex: 1;
    margin-left: calc(11rem + 1rem - 1.75rem);
  }

  .admin-sidenav.is-collapsed ~ .admin-main {
    margin-left: calc(3.6rem + 1rem - 1.75rem);
  }

  /* Manuell ein-/ausklappbar per .sidenav-collapse-btn (nur Desktop — ab
     Tablet abwärts übernimmt bereits der Hamburger-Button das Ein-/Ausblenden
     der kompletten Seitenleiste, ein zusätzlicher Einklapp-Modus wäre dort
     redundant). Text bleibt im DOM (Screenreader, schnelles Zurückklappen),
     wird nur visuell versteckt. */
  .admin-sidenav.is-collapsed {
    width: 3.6rem;
  }

  .admin-sidenav.is-collapsed .sidenav-btn span,
  .admin-sidenav.is-collapsed .sidenav-version {
    display: none;
  }

  .admin-sidenav.is-collapsed .sidenav-btn {
    justify-content: center;
    padding: 0.55rem;
  }

  .admin-sidenav.is-collapsed .sidenav-collapse-btn {
    transform: rotate(180deg);
  }

  /* Eigenes, gestyltes Tooltip statt nur des nativen title-Attributs (das
     bleibt zusätzlich für den Accessible-Name bestehen, da <span> ja
     display:none ist). Reines CSS über content:attr(), kein JS nötig. */
  .admin-sidenav.is-collapsed .sidenav-btn {
    position: relative;
  }

  .admin-sidenav.is-collapsed .sidenav-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 0.6rem);
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-left: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 50;
  }

  .admin-sidenav.is-collapsed .sidenav-btn[data-tooltip]:hover::after,
  .admin-sidenav.is-collapsed .sidenav-btn[data-tooltip]:focus-visible::after {
    opacity: 1;
  }
}

/* Schiebt Versionsnummer + Einklapp-Button gemeinsam ans Ende der
   Seitennavigation, egal wie viele Themenbereiche gerade sichtbar sind. */
.sidenav-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.7rem 0.2rem;
}

.sidenav-version {
  font-size: 0.78rem;
  color: var(--color-text);
}

/* Flache Zeilen statt einzelner "Buttons" — kein Eckenradius, aktiver
   Eintrag markiert sich nur über eine Akzent-Linie vorne + dezente Füllung
   (statt einer satt gefüllten Pille), einheitlich in jedem Zustand
   (Desktop, eingeklappt, mobiles Overlay). */
.sidenav-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.7rem 0.55rem calc(0.7rem - 3px);
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* Zähler rechts im Navigationspunkt (z. B. neue Fehler in der Betreiber-Konsole) */
.sidenav-count {
  margin-left: auto;
  min-width: 1.3rem;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

.admin-sidenav.is-collapsed .sidenav-count {
  display: none;
}

a.sidenav-btn {
  text-decoration: none;
}

/* Klapp-Button für den Desktop-Einklapp-Modus, unten in der Seitenleiste neben
   der Versionsnummer (siehe .sidenav-footer). */
.sidenav-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.sidenav-collapse-btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

.sidenav-collapse-btn:hover {
  background: #fff;
  color: var(--color-text);
}

/* Nur Desktop relevant (siehe Kommentar oben) — muss NACH der Basisregel
   stehen, sonst gewinnt bei gleicher Spezifität die spätere .sidenav-collapse-btn-
   Regel und der Button bliebe trotz Media Query sichtbar. */
@media (max-width: 899px) {
  .sidenav-collapse-btn {
    display: none;
  }

}

.sidenav-btn svg {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

.sidenav-btn:hover {
  background: #fff;
}

.sidenav-btn[aria-current="page"] {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  border-left-color: var(--color-accent);
}

/* Themenblöcke (Preise & Konditionen, Wohnung, …) unter Übersicht, optisch
   leicht abgesetzt durch eine dünne Trennlinie. */
.sidenav-group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
}

/* "Einstellungen" ist bewusst kein Themenblock, sondern ein eigener,
   vorerst leerer Bereich — daher zusätzlich abgesetzt statt Teil der
   .sidenav-group-Liste. */
/* Letzter Eintrag (Hilfe & Ideen) sitzt unten über der Versionszeile */
.sidenav-btn--bottom {
  margin-top: auto;
}

.sidenav-btn--bottom + .sidenav-footer {
  margin-top: 0;
}

/* Kopf des Bereichs Hilfe & Ideen */
.help-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.help-card h3 {
  margin-top: 0;
}

.help-card p {
  margin-bottom: 0;
}

.sidenav-btn--separated {
  margin-top: 0.6rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

/* Große, auffällige Warnung über allem, sobald es Überschneidungen gibt. */
.conflict-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.75rem;
}

/* [hidden] hat per UA-Stylesheet display:none, wird aber von der eigenen
   display:flex-Regel oben überschrieben (gleiche Spezifität, Reihenfolge zählt) —
   ohne diese Regel bliebe das Banner als leerer roter Balken sichtbar. */
.conflict-banner[hidden] {
  display: none;
}

.conflict-banner-icon {
  font-size: 1.9rem;
  line-height: 1;
}

.conflict-banner strong {
  display: block;
  color: var(--color-danger);
  font-size: 1.15rem;
}

.conflict-banner p {
  margin: 0.15rem 0 0;
}

/* Überschneidung an der einzelnen Buchung */
.booking-item-card.is-conflict {
  border-color: var(--color-danger);
}

.booking-item-conflict {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-danger);
}

/* Dashboard: KPI-Kacheln + Kalender/Filter-Reihe */
/* Jede Hauptansicht (Buchungsübersicht/Einstellungen) hat eine eigene
   Überschrift und darunter GENAU einen umschließenden Container — .card liefert
   Rahmen/Schatten, .admin-view überschreibt nur den Hintergrund auf weiß, damit
   verschachtelte Karten (Kennzahlen-Kacheln, Formulare) mit ihrem eigenen
   --color-surface-Hintergrund sichtbar Kontrast zum Container haben, statt
   Fläche auf Fläche zu verschwimmen. */
.admin-view {
  background: #fff;
  margin-bottom: 1.75rem;
}

/* Überschrift + Aktion (z. B. Link zur Wohnungsseite) in einer Zeile, statt
   die Aktion irgendwo im Formular zu verstecken. */
.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5em;
}

.section-heading-row h2,
.section-heading-row h3 {
  margin-bottom: 0;
}

.section-heading-row .btn svg {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  margin-right: 0.3em;
}

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.stat-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.stat-tile:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.stat-tile-label {
  margin: 0 0 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

a.stat-tile {
  display: block;
  color: inherit;
  text-decoration: none;
}

.stat-tile-value {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 600;
  font-variant-numeric: proportional-nums;
}

.stat-tile-hint {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.stat-tile-value.is-danger {
  color: var(--color-danger);
}

.stat-tile.is-danger-tile {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
}

@media (max-width: 480px) {
  .stat-tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
    margin-bottom: 1rem;
  }

  .stat-tile {
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-sm);
  }

  .stat-tile-label {
    font-size: 0.58rem;
    line-height: 1.15;
    margin-bottom: 0.1rem;
  }

  .stat-tile-value {
    font-size: 1rem;
  }
}

.dashboard-calendar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  margin-bottom: 1.75rem;
}

/* Ohne min-width:0 bleibt der Grid-Item auf Content-Breite und sprengt die Card
   auf schmalen Viewports, statt dass #admin-calendars eigenes overflow-x:auto greift. */
.dashboard-calendar-col {
  min-width: 0;
}

@media (min-width: 900px) {
  .dashboard-calendar-row {
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  }

  /* Beim Einklappen der Seitenleiste wird Platz frei — der Kalender darf
     dann etwas breiter werden, statt dass nur die Buchungsliste rechts davon
     profitiert. Allgemeiner Geschwister-Selektor, da .admin-sidenav und
     .admin-main Geschwister unter .admin-shell sind (keine Verschachtelung). */
  .admin-sidenav.is-collapsed ~ .admin-main .dashboard-calendar-row {
    grid-template-columns: minmax(320px, 480px) minmax(0, 1fr);
  }
}

/* Toolbar über der Buchungsliste: Filter-Tabs links, Sortierung rechts. */
.bookings-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}

/* Horizontale Tab-Liste zum Filtern der Buchungsliste, ähnliche Optik wie die
   Einstellungen-Unter-Tabs (.sub-tabs/.sub-tab-btn), aber eigene Klassen — sonst
   würde admin.js' generischer Tab-Umschalter (der nach data-subtab sucht) auch
   hier zuschlagen. */
.filter-tab-list {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.6em 0.8em;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

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

.filter-tab.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.filter-tab-count {
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.8;
}

.sort-toggle {
  display: flex;
  gap: 0.35rem;
  padding-bottom: 0.6rem;
}

/* Beschriftung + Pfeil-Icon statt reiner Icon-Buttons — ohne Text war nicht
   erkennbar, wonach die beiden Buttons überhaupt sortieren. */
.sort-toggle .sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.sort-toggle .sort-btn svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
}

.sort-toggle .sort-btn:hover {
  color: var(--color-text);
}

.sort-toggle .sort-btn.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* Zweite Instanz nur fürs Filter-Dropdown auf schmalen Breiten (siehe
   Media-Query weiter unten) — dort ist Platz für Icon + Beschriftung, damit
   die Bedeutung ohne Tooltip erkennbar bleibt. */
.sort-toggle-dropdown {
  display: none;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.8rem;
}

.sort-toggle-dropdown .sort-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.sort-toggle-dropdown .sort-btn svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.sort-toggle-dropdown .sort-btn.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
  color: var(--color-accent);
}

@media (max-width: 640px) {
  .sort-toggle {
    display: none;
  }

  .sort-toggle-dropdown {
    display: flex;
  }
}

.bookings-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.6rem;
  /* Hält die Gruppe rechtsbündig auch dann, wenn sie (z. B. mobil, sobald der
     Sort-Toggle hier ausgeblendet ist) allein auf eine neue Zeile umbricht —
     .bookings-toolbars space-between reicht dafür nicht, das zentriert eine
     einzelne umgebrochene Gruppe sonst links. Wichtig für den Filter-Dropdown,
     der sich rechtsbündig an dieser Gruppe orientiert (right:0). */
  margin-left: auto;
}

.bookings-search-wrap {
  position: relative;
}

/* Gleiche Optik/Positionierung wie .notifications-dropdown (Glocke im Header) —
   Name + Zeitraum filtern zusätzlich zu den Status-Tabs oben. */
.bookings-search-panel {
  position: absolute;
  top: calc(100% + 1rem);
  right: 0;
  width: 280px;
  max-width: calc(100vw - 2.5rem);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.85rem;
  z-index: 40;
}

.bookings-search-panel .field {
  margin-bottom: 0.6rem;
}

/* Jede Buchung als eigene Karte statt Tabellenzeile. */
.booking-card-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.team-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
}

.team-row strong {
  display: block;
  font-size: 0.95rem;
}

.team-row p {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
}

.booking-item-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Klick auf eine Karte hebt ihren Zeitraum im Kalender hervor (admin-calendar.js). */
.booking-item-card.is-selected {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-text);
}

.booking-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}

.booking-item-header > div {
  min-width: 0;
}

.booking-item-header strong {
  display: block;
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.booking-item-header .badge {
  white-space: nowrap;
  flex-shrink: 0;
}

.booking-item-dates {
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
}

.booking-item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.4rem;
}

.booking-item-quick-actions {
  display: flex;
  gap: 0.4rem;
}

/* Häkchen/Kreuz für Annehmen/Ablehnen — dezent umrandet in Ruhe, volle Farbe
   erst bei Hover/Fokus, damit die Karte nicht sofort nach Ampel aussieht. */
.quick-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.quick-action-btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

.quick-action-btn.is-accept {
  color: var(--color-success);
}

.quick-action-btn.is-accept:hover {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}

.quick-action-btn.is-decline {
  color: var(--color-danger);
}

.quick-action-btn.is-decline:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}

.booking-item-actions select,
.booking-item-actions input[type="number"] {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.4em 0.5em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  max-width: 8em;
}

#admin-login {
  max-width: 360px;
  margin: 4rem auto;
}

/* Einzige verbleibende Tab-Ebene: innerhalb von "Einstellungen" (Preise, Fotos,
   Rechtliches, …) — die vorherige Haupt-Tab-Leiste (Buchungen/Einstellungen) ist
   der Kopfzeilen-Navigation (Zahnrad/Glocke) gewichen, siehe admin.js initHeaderNav. */
.sub-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.5rem;
}

.sub-tab-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0.55em 0.75em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.sub-tab-btn.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Visuelle Gruppierung nach Relevanz (Preise & Konditionen / Wohnung /
   Kommunikation / Technik / Rechtliches) — nur eine dünne Trennlinie vor dem
   ersten Button einer neuen Gruppe, keine verschachtelten Elemente im
   role="tablist", damit die Tab-Semantik für Screenreader korrekt bleibt. */
.sub-tab-btn.group-start {
  margin-left: 0.5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--color-border);
}

.sub-tab-panel {
  display: none;
}

.sub-tab-panel.is-active {
  display: block;
}

/* Horizontal scroll-Container für Tabellen, gleiches Muster wie .sub-tabs/.filter-tab-list —
   ohne den Wrapper laufen .admin-table-Zeilen auf schmalen Tablet-Breiten über. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll .admin-table {
  min-width: 560px;
}

/* Trix-Editor (Beschreibung, Rechtstexte) ans Projekt-Design angepasst — die
   Bibliothek bringt ihre eigene, recht altbackene Button-Leiste mit (jeder
   Button einzeln umrandet wie ein Segmented Control). Hier stattdessen
   randlose Icon-Buttons mit Hover-Fläche und dezenten Trennstrichen zwischen
   den Gruppen statt Kästchen um jeden Button — braucht höhere Spezifität als
   Trix' eigene Regeln, siehe .trix-button-group--file-tools unten, das
   gleiche, bereits etablierte Muster. Der Datei-Anhang-Button bleibt aus
   (keine Upload-Anbindung dafür vorhanden, siehe admin.js
   trix-file-accept-Handler, der Drops zusätzlich hart verhindert). */
trix-toolbar {
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 0.4rem 0.5rem;
  background: var(--color-surface);
}

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

trix-toolbar .trix-button-group {
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0 0.4rem;
  display: flex;
  gap: 0.1rem;
  position: relative;
}

trix-toolbar .trix-button-group:first-child {
  padding-left: 0;
}

trix-toolbar .trix-button-group + .trix-button-group::before {
  content: "";
  position: absolute;
  left: -0.05rem;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--color-border);
}

trix-toolbar .trix-button {
  font-family: inherit;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  width: 1.65rem;
  height: 1.65rem;
  transition: background-color 0.12s ease, color 0.12s ease;
}

trix-toolbar .trix-button:hover:not(:disabled) {
  background: var(--color-accent-light);
}

trix-toolbar .trix-button.trix-active {
  background: var(--color-accent);
  color: #fff;
}

/* Höhere Spezifität als Trix' eigene ".trix-button-group { display: flex }"-Regel
   (gleiche Spezifität würde sonst je nach Lade-/Einfüge-Reihenfolge der
   Stylesheets uneinheitlich gewinnen). */
trix-toolbar .trix-button-group--file-tools {
  display: none;
}

trix-editor.trix-content {
  min-height: 8rem;
  max-height: 24rem;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 0.75em 0.9em;
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
  color: var(--color-text);
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

trix-editor.trix-content:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 0.7em 0.6em;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.admin-table th {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.booking-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Kalenderübersicht: Tagesstatus über tatsächliche Buchungen statt Gast-Auswahl. */
#admin-calendar .calendar-day {
  cursor: default;
}

/* Sicherheitsnetz, gleiches Muster wie .filter-tab-list/.table-scroll an
   anderer Stelle — das Grid selbst (repeat(7, 1fr)) läuft nie über, aber ohne
   dedizierte Breakpoint-Anpassungen (siehe unten) wurden die Zellen auf
   schmalen Handys durch doppeltes Container/Card-Padding sehr eng. */
#admin-calendar {
  overflow-x: auto;
}

@media (max-width: 480px) {
  #admin-calendar .calendar-header h3 {
    font-size: 0.95rem;
  }

  #admin-calendar .calendar-nav button {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 0.9rem;
  }

  #admin-calendar .calendar-weekdays span {
    font-size: 0.62rem;
  }

  #admin-calendar .calendar-day {
    font-size: 0.72rem;
  }

  #admin-calendar .calendar-legend {
    font-size: 0.7rem;
    gap: 0.5rem;
  }
}

.calendar-day.is-admin-free {
  border: 1px solid var(--color-border);
}

.calendar-day.is-admin-requested {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-weight: 600;
}

.calendar-day.is-admin-confirmed {
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
}

.calendar-day.is-admin-conflict {
  background: var(--color-danger);
  color: #fff;
  font-weight: 700;
}

#admin-calendar .calendar-day.is-selectable {
  cursor: pointer;
}

/* Ring statt vollflächigem Hintergrund — ein voller Akzent-Hintergrund würde
   optisch mit is-admin-confirmed kollidieren, das dieselbe Farbe nutzt. */
.calendar-day.is-select-start,
.calendar-day.is-select-end {
  box-shadow: inset 0 0 0 3px var(--color-accent-dark);
}

.calendar-day.is-select-range {
  box-shadow: inset 0 0 0 2px var(--color-accent-dark);
}

.calendar-header-nav-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.calendar-select-clear {
  border: none;
  background: none;
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0.4rem;
}

.calendar-legend .swatch-admin-free {
  border: 1px solid var(--color-border);
}

.calendar-legend .swatch-admin-requested {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
}

.calendar-legend .swatch-admin-confirmed {
  background: var(--color-accent);
}

.calendar-legend .swatch-admin-conflict {
  background: var(--color-danger);
}

.overlap-warning {
  display: block;
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: var(--color-warning);
  font-weight: 600;
}

.overlap-warning.is-severe {
  color: var(--color-danger);
}

.host-photo-preview {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin-bottom: 0.5rem;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.photo-grid figure {
  margin: 0;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.photo-grid img {
  width: 100%;
  height: 110px;
  object-fit: cover;
}

.photo-grid figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
  background: var(--color-surface);
}

.settings-form {
  max-width: 480px;
}

/* Ausstattung & Aktivitäten: eine Zeile pro Eintrag mit Icon-Auswahl,
   Live-Vorschau des gewählten Icons, Text und Entfernen-Button. */
.amenities-editor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.amenity-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.amenity-row-preview {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-accent);
}

.amenity-row-preview svg {
  width: 18px;
  height: 18px;
}

.amenity-row-icon {
  flex: 0 0 auto;
  max-width: 12rem;
}

.amenity-row-text {
  flex: 1 1 auto;
  min-width: 0;
}

.amenity-row-remove {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.amenity-row-remove:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.add-booking-toggle {
  margin-bottom: 1rem;
}

.add-booking-form {
  margin-bottom: 1.5rem;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem 1rem;
}

.field-grid .field {
  margin-bottom: 0;
}

/* Zwischenüberschrift innerhalb eines .field-grid, um Felder in sichtbare
   Gruppen zu sortieren (z. B. Kontakt / Aufenthalt / Preis & Status im
   "Neue Buchung"-Formular). */
.field-grid-group-label {
  grid-column: 1 / -1;
  margin: 0.5rem 0 -0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.field-grid-group-label:first-child {
  margin-top: 0;
}

/* Größere, deutlicher sichtbare Checkbox für Endreinigung — bislang komplett
   ungestylte native Checkbox, daher kein Konflikt mit bestehendem CSS. */
.field-checkbox--lg input[type="checkbox"] {
  width: 1.4rem;
  height: 1.4rem;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.field-checkbox--lg label {
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.add-booking-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.template-editor {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1rem;
}

.template-editor h4 {
  margin: 0 0 0.75rem;
}

.placeholder-hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: -0.5rem;
  margin-bottom: 1rem;
}

.placeholder-hint code {
  background: var(--color-surface);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

/* Buchungsdetail-Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1rem;
  background: rgba(20, 18, 15, 0.5);
  overflow-y: auto;
}

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

.modal-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.75rem;
}

.modal-card-lg {
  max-width: 720px;
  padding: 2.5rem;
}

.modal-card h3 {
  margin: 0 0 0.2rem;
  font-size: 1.4rem;
}

.modal-card h4 {
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
}

.modal-card .listing-divider {
  margin: 1.75rem 0;
}

.modal-card textarea {
  width: 100%;
}

.modal-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0;
}

.modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.modal-close:hover {
  background: var(--color-surface);
}

.booking-detail-resend-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.resend-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.resend-check {
  color: var(--color-accent);
  font-weight: 700;
  margin-right: 0.35em;
}

/* .btn setzt display:inline-flex mit gleicher Spezifität wie [hidden] — ohne
   diese Regel bliebe der Button trotz hidden-Attribut sichtbar (gleiches
   Muster wie .icon-btn-badge[hidden] weiter oben in dieser Datei). */
.resend-confirm[hidden] {
  display: none;
}

.email-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
}

.email-log-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55em 0;
  border-bottom: 1px solid var(--color-border);
}

.email-log-list li:last-child {
  border-bottom: none;
}

/* Häkchen davor, damit auf einen Blick klar ist: diese Mail ist raus. */
.email-log-list li span::before {
  content: "✓ ";
  color: var(--color-success);
  font-weight: 700;
}

.email-log-list li time {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

/* ── Abo-Tab ─────────────────────────────────────────────────────────── */
.billing-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.billing-summary .billing-fact {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0.75rem 1rem;
}

.billing-summary .billing-fact span {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.billing-summary .billing-fact strong {
  display: block;
  margin-top: 0.25rem;
}

.billing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.suspended-banner {
  margin-bottom: 1rem;
}

/* ── Komponente: leerer Zustand ───────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 2rem 1rem;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}

.empty-state strong {
  color: var(--color-text);
  font-size: 1rem;
}

.empty-state p {
  margin: 0 0 0.5rem;
  max-width: 36ch;
  line-height: 1.45;
}

/* ── Status-Banner (Entwurf / gesperrt) ────────────────────────────────── */
.status-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-accent-light);
  color: var(--color-text);
}

.status-banner.is-suspended {
  background: var(--color-danger-bg);
}

.status-banner-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.profile-logout {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* Platzhalter fürs Gastgeber-Foto, solange keins hochgeladen ist */
.host-photo-placeholder-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.host-photo-placeholder-wrap[hidden] {
  display: none;
}

.host-photo-placeholder {
  display: grid;
  place-items: center;
  background: var(--color-accent-light);
  color: var(--color-accent);
  flex-shrink: 0;
}

/* Gästemappe: Bilder mit Bildunterschrift */
.guest-folder-admin-images {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.guest-folder-admin-image {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 0.75rem;
  align-items: center;
}

.guest-folder-admin-image img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.guest-folder-upload {
  cursor: pointer;
}

/* ── Checkliste "Deine Seite fertigstellen" (eigene Seite) ──────────────── */
.setup-checklist {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  background: var(--color-bg);
  max-width: 640px;
}

.setup-checklist-count {
  margin: 0;
  font-weight: 600;
}

.setup-checklist-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--color-surface);
  margin: 0.75rem 0 0.5rem;
  overflow: hidden;
}

.setup-checklist-bar span {
  display: block;
  height: 100%;
  background: var(--color-accent-bright);
  border-radius: inherit;
  transition: width 0.4s;
}

.setup-checklist-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.setup-checklist-list li + li {
  border-top: 1px solid var(--color-border);
}

.setup-checklist-list button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 0.25rem;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
}

.setup-checklist-list button:hover:not(:disabled) .setup-checklist-label {
  color: var(--color-accent-dark);
}

.setup-checklist-label {
  flex: 1;
}

.setup-checklist-arrow {
  color: var(--color-text-muted);
  font-size: 1.3rem;
}

.setup-checklist-list button.is-primary .setup-checklist-label {
  font-weight: 700;
  color: var(--color-accent-dark);
}

.setup-checklist-list li.is-done button {
  color: var(--color-text-muted);
  cursor: default;
}

.setup-checklist-list li.is-done .setup-checklist-label {
  text-decoration: line-through;
}

.setup-checklist-list li.is-done .setup-checklist-arrow {
  visibility: hidden;
}

.setup-checklist-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}

.setup-checklist-list li.is-done .setup-checklist-check {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 3px var(--color-bg);
}

/* Kurzes Banner in der Seitennavigation, über "Anfragen" */
.sidenav-setup {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--color-accent-light);
  border-radius: var(--radius-md);
  background: var(--color-accent-light);
  font: inherit;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
}

.sidenav-setup[hidden] {
  display: none;
}

.sidenav-setup[aria-current="page"] {
  border-color: var(--color-accent);
}

.sidenav-setup-ring {
  --progress: 0%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--color-accent) var(--progress), #fff 0);
}

.sidenav-setup-ring span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent-light);
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--color-accent-dark);
}

.sidenav-setup-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.sidenav-setup-text strong {
  font-size: 0.85rem;
}

.sidenav-setup-text small {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

/* Eingeklappte Leiste / schmale Ansicht: nur der Fortschrittsring */
.admin-sidenav.is-collapsed .sidenav-setup-text {
  display: none;
}

.admin-sidenav.is-collapsed .sidenav-setup {
  justify-content: center;
  padding: 0.4rem;
}

@media (max-width: 899px) {
  .admin-sidenav:not(.is-open) .sidenav-setup-text {
    display: none;
  }

  .admin-sidenav:not(.is-open) .sidenav-setup {
    justify-content: center;
    padding: 0.4rem;
  }
}

.setup-checklist-list button.is-blocked {
  cursor: not-allowed;
  opacity: 0.8;
}

.setup-checklist-hint {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

/* Komponente: Bestell-Bestätigung (zahlungspflichtig) */
.order-consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  text-align: left;
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 0.25rem 0 0.75rem;
}

.order-consent input {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.billing-order {
  max-width: 520px;
}

/* ── Komponente: Rückfrage-Dialog ─────────────────────────────────────── */
.mbk-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(20, 24, 31, 0.45);
  display: grid;
  place-items: center;
  padding: 1rem;
}

.mbk-dialog {
  width: min(480px, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(20, 18, 15, 0.25);
  padding: 1.5rem;
}

.mbk-dialog h2 {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
}

.mbk-dialog-body p {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.mbk-dialog-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
}

.mbk-dialog-summary dt {
  color: var(--color-text-muted);
}

.mbk-dialog-summary dd {
  margin: 0;
  font-weight: 600;
}

.mbk-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Felder im Raster unten bündig, auch wenn eine Beschriftung umbricht */
.field-grid .field {
  justify-content: flex-end;
}

.field-grid-hint {
  margin: 0.4rem 0 1rem;
  font-size: 0.82rem;
}

/* ── Support (js/admin/support.js): schwebender Knopf + Chat-Fenster ─────── */
.support-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  /* Über dem Einrichtungs-Assistenten (1000), unter Dialogen (1100) */
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 1.1rem;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

/* Mobil: Menü offen -> Hilfe-Knopf ausblenden, er läge sonst über der Navigation. */
body:has(.admin-sidenav.is-open) .support-fab {
  display: none;
}

.support-fab:hover {
  background: var(--color-accent-dark);
}

.support-fab-icon {
  display: inline-flex;
}

.support-panel {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 2rem));
  height: min(560px, calc(100vh - 2.5rem));
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(20, 18, 15, 0.22);
  overflow: hidden;
}

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

.support-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.support-close {
  width: 2rem;
  height: 2rem;
  font-size: 1.2rem;
  line-height: 1;
}

.support-log {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.support-msg {
  max-width: 85%;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  line-height: 1.45;
}

.support-msg p {
  margin: 0;
  white-space: pre-wrap;
}

.support-msg--assistant {
  align-self: flex-start;
  background: var(--color-surface);
}

.support-msg--user {
  align-self: flex-end;
  background: var(--color-accent);
  color: #fff;
}

.support-msg--system {
  align-self: stretch;
  max-width: none;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.support-msg.is-typing p {
  color: var(--color-text-muted);
  letter-spacing: 0.2em;
}

.support-msg-actions {
  margin-top: 0.5rem;
}

.support-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.support-chip {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-accent);
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  cursor: pointer;
  text-align: left;
}

.support-input {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  padding: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.support-input textarea {
  flex: 1;
  resize: none;
  min-height: 2.4rem;
  max-height: 8rem;
  font-size: 0.9rem;
}

.support-foot {
  display: flex;
  justify-content: space-between;
  padding: 0 0.9rem 0.6rem;
}

.support-foot .btn-link {
  margin: 0;
  font-size: 0.82rem;
}

@media (max-width: 600px) {
  .support-panel {
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }

  .support-fab span:last-child {
    display: none;
  }

  .support-fab {
    padding: 0.85rem;
  }
}

/* KI-Vorschlag-Knopf neben der Beschreibung im Admin (Optik wie im Assistenten) */
.onboarding-ai-btn.ai-btn-inline {
  position: static;
}

#info-description-wrap .onboarding-scan {
  padding-top: 1.25rem;
  border: 1px solid var(--color-border);
}

/* Sprungziel aus Chat/Checkliste kurz hervorheben (js/admin/admin-actions.js) */
.is-spotlight {
  animation: spotlight 2.4s ease-out;
  border-radius: var(--radius-sm);
}

@keyframes spotlight {
  0%,
  40% {
    box-shadow: 0 0 0 4px rgba(30, 157, 255, 0.45);
  }
  100% {
    box-shadow: 0 0 0 4px rgba(30, 157, 255, 0);
  }
}

/* Sprungknöpfe unter einer Chat-Antwort */
.support-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.support-jump .btn {
  font-size: 0.8rem;
}

/* Handy: mehr Platz — Inhalt nur 0.75rem vom Rand, Karten gehen randlos bis an
   den Bildschirmrand (ohne Seitenrahmen/Rundung, nur oben/unten eine Linie).
   Karten in Karten bleiben normale Kästen. Die Seitenleiste gibt es mobil nur
   über den Menü-Knopf (siehe .admin-sidenav, max-width: 899px). */
@media (max-width: 640px) {
  #main-content.container {
    padding: 0 0.75rem;
  }

  .admin-header {
    margin: 0 -0.75rem 0.75rem;
  }

  .admin-shell {
    margin-top: 0;
  }

  .admin-main .card:not(.card .card) {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
    padding: 1rem 0.75rem;
  }
}

/* Profil: Login-Adresse mit "Ändern"-Knopf */
.profile-email-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.profile-email-row p {
  margin: 0;
}

.profile-email-form {
  margin-bottom: 1.5rem;
}

.profile-email-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.profile-email-row .btn[hidden] {
  display: none;
}

/* Aktion im Hinweis „Live schalten“ */
.status-banner-promo {
  flex-basis: 100%;
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
}

/* Ideen & Abstimmung */
.idea-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.idea-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
}

.idea-text p {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
}

.idea-vote {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  background: #fff;
}

.idea-vote.is-voted {
  background: var(--color-accent-light);
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

.idea-form {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

/* Passwort vergessen (Login) */
.login-forgot {
  margin-top: 1rem;
}
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent-dark);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Konto löschen (Profil) */
.profile-delete {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.profile-delete h4 {
  margin-top: 0;
}