/* -------------------------------------------------------------------------
   Farb-Tokens: Standard = dunkles Anthrazit-Theme.
   [data-theme="light"] überschreibt die Werte fürs helle Theme.
   Umgeschaltet wird per Button in der Kopfzeile (siehe base.html).
---------------------------------------------------------------------------*/

:root {
  --bg: #101114;
  --surface: #17181d;
  --surface-2: #1e2027;
  --surface-hover: #24262e;
  --border: #2a2c34;
  --text: #edecf1;
  --muted: #9a9aa6;
  --accent: #8b5cf6;
  --accent-strong: #7c3aed;
  --accent-contrast: #ffffff;
  --danger: #f87171;
  --success: #4ade80;
  --warn: #facc15;
  --magenta: #e879f9;
  --corporate: #38bdf8;
  --club: #fb923c;
  --sonstiges: #2dd4bf;
  --technik: #94a3b8;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  --bg-gradient-start: #0d0e12;
  --bg-gradient-end: #1c1f26;
}

:root[data-theme="light"] {
  --bg: #f5f5f8;
  --surface: #ffffff;
  --surface-2: #f2f1f6;
  --surface-hover: #ebe9f2;
  --border: #e1dfe8;
  --text: #18181f;
  --muted: #68667a;
  --accent: #7c3aed;
  --accent-strong: #6d28d9;
  --accent-contrast: #ffffff;
  --danger: #dc2626;
  --success: #16a34a;
  --warn: #b45309;
  --magenta: #a21caf;
  --corporate: #0284c7;
  --club: #c2410c;
  --sonstiges: #0d9488;
  --technik: #475569;
  --shadow: 0 2px 10px rgba(30, 20, 60, 0.08);
}

* { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; height: 100%; }
input, select, textarea, button { max-width: 100%; }
fieldset { min-width: 0; }

/* Sticky Footer: Body als Flex-Spalte ueber die volle Bildschirmhoehe, damit
   der Footer (Copyright) auch bei kurzem Seiteninhalt (z.B. Login-Seite)
   immer unten am Bildschirmrand steht statt mitten auf der Seite. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  transition: background-color 0.2s ease, color 0.2s ease;
}
/* Helles Theme: einfarbiger Hintergrund wie bisher, kein Verlauf - der
   Verlauf ist als "schwarz/anthrazit"-Effekt bewusst nur fuers dunkle
   Theme gedacht (siehe Einstellungen > Darstellung & Kontakt). */
:root[data-theme="light"] body {
  background: var(--bg);
}
.topbar { flex-shrink: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: 880px;
  margin: 0 auto;
  padding: 16px 16px 64px;
  width: 100%;
  flex: 1 0 auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 12px 20px;
  background: rgba(23, 24, 29, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
:root[data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.85); }

.topbar .brand { font-weight: 700; color: var(--text); font-size: 1.05rem; display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }
.topbar nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.link-muted { color: var(--muted); font-size: 0.9rem; }

/* Einstellungen-Dropdown im Header: Hover (bzw. Fokus per Tastatur) zeigt
   eine Liste aller Einstellungs-Reiter, damit man direkt zum gewuenschten
   Bereich springen kann, ohne erst die Einstellungsseite zu laden und dann
   dort noch den Reiter zu wechseln. Der Link selbst bleibt normal klickbar
   und fuehrt weiterhin auf die Einstellungsseite (Standard-Reiter). */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; }
.nav-dropdown-caret { font-size: 0.7em; opacity: 0.7; transition: transform 0.15s ease; }
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 230px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 20;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown:focus-within .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus {
  background: var(--surface-hover);
  text-decoration: none;
}
@media (max-width: 480px) {
  .nav-dropdown-menu { right: auto; left: 0; min-width: 210px; }
}

/* Logo dezent im Header. Die Datei ist reines Weiß auf transparent - passt
   so direkt zum dunklen Standard-Theme; im hellen Theme wird sie per Filter
   eingefärbt, damit sie dort ebenfalls sichtbar bleibt.
   Auf Seiten mit Kopfleiste (eingeloggt) ersetzt sie das Kopfhörer-Emoji
   links im Logo-Schriftzug; auf der Login-Seite (keine Kopfleiste) ist sie
   fest in der oberen rechten Ecke platziert. */
.brand-icon {
  height: 22px;
  width: auto;
  opacity: 0.95;
  pointer-events: none;
}
:root[data-theme="light"] .brand-icon { filter: brightness(0); opacity: 0.8; }
:root[data-theme="light"] .brand-icon.brand-icon-custom { filter: none; opacity: 1; }

/* Header-Logo im eingeloggten Bereich (Dashboard-Kopfzeile): eigene,
   groessere Darstellung inkl. dazu passender Schriftgroesse des
   "DJ-DESK"-Schriftzugs. Bewusst ueber eigene Klassen (.header-logo /
   .brand-dashboard) und NICHT ueber die geteilten .brand-icon / .topbar
   .brand-Regeln geloest, da diese auch von der oeffentlichen
   Fragebogen-Kopfzeile genutzt werden und dort unveraendert bleiben soll. */
.brand-dashboard {
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--text);
  font-size: 1.3rem;
  gap: 16px;
}
/* Login-Karte: gleicher Marken-Look wie im Dashboard-Header, aber
   ueber der Karte zentriert statt linksbuendig in der Kopfzeile. */
.login-card h1.brand-dashboard { justify-content: center; margin: 0 0 10px; }
.brand-icon.header-logo { height: 40px; }
/* Neues DJDesk-Logo (Icon+Schriftzug bereits im Bild enthalten, freigestellt/
   transparent). Der weisse "DJ"-Teil war auf dem hellen Theme (naheihin
   weisse Kopfzeile/Login-Karte) kaum zu erkennen - ein Schlagschatten allein
   reichte nicht. Stattdessen jetzt zwei fertige Logo-Varianten (jeweils
   volle Deckkraft, kein Filter-Trick): .header-logo-dark fuers dunkle Theme
   (Original, weisses "DJ") und .header-logo-light fuers helle Theme
   (brand-logo-djdesk-light.png, dunkles "DJ" statt weiss) - per data-theme
   umgeschaltet, das jeweils andere Bild ausgeblendet. */
.header-logo-djdesk {
  height: 34px;
}
.header-logo-light { display: none; }
:root[data-theme="light"] .header-logo-dark { display: none; }
:root[data-theme="light"] .header-logo-light { display: inline-block; }
@media (max-width: 480px) {
  .header-logo-djdesk { height: 26px; }
}

/* Schriftzug im Chrom-/Gold-Look passend zum Logo: "DJ" in Gold (wie das
   goldene "J" im Logo), "-DESK" in einem metallischen Silber-Verlauf.
   Per background-clip:text realisiert; getrennte, theme-eigene Verlaeufe
   fuer helles/dunkles Theme, damit der Kontrast auf beiden Hintergruenden
   passt (analog zum Logo-Bild selbst). */
.brand-dashboard .brand-text,
.brand-dashboard .brand-text-accent {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
}
.brand-dashboard .brand-text {
  background-image: linear-gradient(180deg, #f7f9fb 0%, #d6dade 28%, #9aa0a6 50%, #dee2e6 72%, #b6bbc1 100%);
  color: #c3c8cd;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.brand-dashboard .brand-text-accent {
  background-image: linear-gradient(180deg, #ffedb0 0%, #f6c84f 35%, #c98a12 68%, #ffe08a 100%);
  color: #e0b23f;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
:root[data-theme="light"] .brand-dashboard .brand-text {
  background-image: linear-gradient(180deg, #7a7f85 0%, #4a4d51 30%, #202124 52%, #55585c 74%, #34363a 100%);
  color: #3a3c3f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
:root[data-theme="light"] .brand-dashboard .brand-text-accent {
  background-image: linear-gradient(180deg, #caa23a 0%, #a2740f 40%, #7a5406 68%, #b98f28 100%);
  color: #8a660f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.brand-logo-fixed {
  position: fixed;
  top: 14px;
  right: 16px;
  height: 26px;
  width: auto;
  opacity: 0.9;
  z-index: 50;
  pointer-events: none;
}
:root[data-theme="light"] .brand-logo-fixed { filter: brightness(0); opacity: 0.75; }
:root[data-theme="light"] .brand-logo-fixed.brand-icon-custom { filter: none; opacity: 1; }
@media (max-width: 480px) {
  .brand-icon { height: 18px; }
  .brand-logo-fixed { height: 18px; top: 8px; right: 10px; }
  .topbar { padding: 10px 14px; }
  .topbar .brand { font-size: 0.95rem; }
  .brand-dashboard { font-size: 1.05rem; gap: 10px; }
  .brand-icon.header-logo { height: 28px; }
}

/* ------------------------------------------------------------------ */
/* Sidebar-Navigation (eingeloggter Bereich): auf dem Handy weiterhin eine
   horizontale Kopfleiste (wie bisher optisch), ab 900px Breite eine
   stehende Seitenleiste im Stil des DJDesk-Dashboard-Mockups. Die
   oeffentliche Fragebogen-Seite (.topbar) bleibt davon komplett unberuehrt -
   eigene Klassen (.app-shell/.sidebar/.main-col), keine geteilten Regeln. */
.app-shell {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: 100%;
}
.main-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.sidebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 12px 20px;
  background: rgba(23, 24, 29, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}
:root[data-theme="light"] .sidebar { background: rgba(255, 255, 255, 0.85); }
.sidebar-brand { flex: 1 1 auto; min-width: 0; }
.sidebar-links,
.sidebar-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
}
/* Nick, 2026-09-22: auf dem Handy (mobile Kopfleiste) waren die Reiter
   bisher reiner Fließtext ohne eigene Klickflaeche - wirkte klein/gedraengt
   und war entsprechend fummelig zu treffen. Jetzt wie die Desktop-Sidebar
   (siehe .sidebar-link weiter unten in der 900px-Media-Query) eine echte
   Chip-Flaeche mit Padding, abgerundeten Ecken und Tap-Feedback - der Gap
   oben wurde dafuer reduziert (die Chips bringen ihren Abstand jetzt selbst
   mit), damit trotzdem alle Reiter auf einem iPhone-Bildschirm umbrechen,
   ohne unnoetig viele Zeilen zu brauchen. */
.sidebar-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
}
.sidebar-link:hover,
.sidebar-link:active { background: var(--surface-hover); text-decoration: none; }
.sidebar-link.active { background: rgba(139, 92, 246, 0.14); color: var(--accent); font-weight: 600; }
/* Reiter umsortieren per langem Drauf-Halten (wie beim iPhone-Homescreen -
   siehe Script weiter unten in base.html): [data-nav-id] markiert alle per
   Long-Press verschiebbaren Reiter. touch-action:none verhindert, dass ein
   gehaltener Finger stattdessen die Seite scrollt, sobald gezogen wird -
   ein kurzer Tipp/Klick bleibt davon unberuehrt. Gilt fuer Handy (obere
   Leiste) UND Desktop (linke Spalte) gleichermassen. */
.sidebar-link[data-nav-id] {
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.sidebar-link[data-nav-id].dragging {
  opacity: 0.55;
  transform: scale(1.04);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  z-index: 5;
  position: relative;
}
@keyframes sidebar-jiggle {
  0% { transform: rotate(-1.4deg); }
  50% { transform: rotate(1.4deg); }
  100% { transform: rotate(-1.4deg); }
}
.sidebar-links.reorder-mode .sidebar-link[data-nav-id]:not(.dragging) {
  animation: sidebar-jiggle 0.22s ease-in-out infinite;
}
.sidebar-links.reorder-mode .sidebar-link[data-nav-id]:nth-child(even):not(.dragging) {
  animation-delay: -0.11s;
}
.sidebar-new-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sidebar-new-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

@media (min-width: 900px) {
  .app-shell { flex-direction: row; align-items: stretch; min-height: 100vh; }
  /* .sidebar (Nick, 2026-09-22): echtes position:fixed statt vorher sticky/
     stretch. Vorherige Ansaetze (siehe style.css.bak_20260911_* und der
     Kommentar-Verlauf davor) haben die Sidebar per Flexbox auf die Hoehe
     der Hauptspalte (main-col) gestreckt und sie dann per position:sticky
     "oben angeheftet" - das fuehrte auf laengeren Seiten (z.B. Auftraege-
     Liste) dazu, dass sich .sidebar-inner beim Scrollen vom Rest der
     Sidebar loeste, sobald das Ende der (sehr langen) Hauptspalte in Sicht
     kam: unten blieb eine Luecke zwischen Sidebar-Inhalt und Seitenrand.
     position:fixed umgeht das Problem komplett - die Sidebar liegt jetzt
     ausserhalb des normalen Seitenflusses, haengt an nichts anderem mehr
     und bewegt sich beim Scrollen ueberhaupt nicht mehr. Nur .main-col
     (und der Footer, siehe unten) bekommen dafuer einen linken Abstand in
     Breite der Sidebar, damit ihr Inhalt nicht darunter verschwindet. */
  .sidebar {
    display: flex;
    align-items: stretch;
    width: 232px;
    border-bottom: none;
    border-right: 1px solid var(--border);
    background: var(--surface);
    backdrop-filter: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 15;
    padding: 0;
  }
  :root[data-theme="light"] .sidebar { background: var(--surface); }
  .sidebar-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    padding: 22px 16px;
    gap: 4px;
  }
  /* Hauptspalte + Footer bekommen den Platz der (jetzt fixierten) Sidebar
     als linken Aussenabstand reserviert. Transition + die beiden :has()-
     Regeln darunter sorgen dafuer, dass sich dieser Abstand automatisch
     mitanpasst, falls Nick die "automatisch einklappende Seitenleiste"
     (Einstellungen) nutzt - ohne die waere links sonst eine leere Luecke
     bzw. der Inhalt teilweise unter der schmalen/breiten Sidebar versteckt. */
  .main-col, .app-footer { margin-left: 232px; transition: margin-left 0.24s cubic-bezier(0.4, 0, 0.2, 1); }
  .app-shell:has(.sidebar.sidebar-auto-collapse) ~ .app-footer,
  .app-shell:has(.sidebar.sidebar-auto-collapse) .main-col { margin-left: 68px; }
  .app-shell:has(.sidebar.sidebar-auto-collapse:hover) ~ .app-footer,
  .app-shell:has(.sidebar.sidebar-auto-collapse:focus-within) ~ .app-footer,
  .app-shell:has(.sidebar.sidebar-auto-collapse:hover) .main-col,
  .app-shell:has(.sidebar.sidebar-auto-collapse:focus-within) .main-col { margin-left: 232px; }
  .sidebar-brand {
    flex: 0 0 auto;
    padding-bottom: 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-new-btn { width: 100%; margin-bottom: 14px; }
  .sidebar-links,
  .sidebar-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .sidebar-bottom {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9rem;
  }
  .sidebar-link:hover { background: var(--surface-hover); text-decoration: none; }
  .sidebar-link.active { background: rgba(139, 92, 246, 0.14); color: var(--accent); font-weight: 600; }
  .sidebar .nav-dropdown { display: block; }
  .sidebar .nav-dropdown-menu {
    top: 0;
    left: 100%;
    right: auto;
    margin-left: 6px;
    transform: translateX(-4px);
  }
  .sidebar .nav-dropdown:hover .nav-dropdown-menu,
  .sidebar .nav-dropdown:focus-within .nav-dropdown-menu {
    transform: translateX(0);
  }
  .sidebar .theme-toggle { margin-top: 10px; align-self: flex-start; }

  .sidebar-link.dragging { opacity: 0.4; }

  /* Automatisch einklappende Seitenleiste (in den Einstellungen aktivierbar):
     im Ruhezustand nur schmale Icon-Spalte, beim Ueberfahren mit der Maus
     (oder Fokus per Tastatur) fährt sie auf volle Breite aus. Nur auf dem
     Desktop relevant - die mobile horizontale Kopfleiste bleibt unberuehrt,
     da diese Regeln innerhalb dieser 900px-Media-Query liegen. */
  .sidebar.sidebar-auto-collapse {
    width: 68px;
    flex: 0 0 68px;
    overflow: hidden;
    transition: width 0.24s cubic-bezier(0.4, 0, 0.2, 1),
                flex-basis 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar.sidebar-auto-collapse .sidebar-inner {
    padding-left: 10px;
    padding-right: 10px;
    transition: padding 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar.sidebar-auto-collapse:hover,
  .sidebar.sidebar-auto-collapse:focus-within {
    width: 232px;
    flex: 0 0 232px;
    overflow-x: hidden;
    z-index: 30;
  }
  .sidebar.sidebar-auto-collapse:hover .sidebar-inner,
  .sidebar.sidebar-auto-collapse:focus-within .sidebar-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
  .sidebar.sidebar-auto-collapse .sidebar-link-label {
    display: inline-block;
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.16s ease, width 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar.sidebar-auto-collapse:hover .sidebar-link-label,
  .sidebar.sidebar-auto-collapse:focus-within .sidebar-link-label {
    opacity: 1;
    width: auto;
    transition: opacity 0.2s ease 0.06s, width 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Logo im eingeklappten Zustand: das Logo-Bild enthaelt Wellen-Icon UND
     Schriftzug in einem Stueck (kein separates Icon-Bild vorhanden) und ist
     im ausgeklappten Zustand 34px hoch, entsprechend ca. 130px breit -
     wuerde bei nur 48px Innenbreite abgeschnitten aussehen (halb zu sehen).
     Per object-fit:cover + object-position:left wird stattdessen der
     linke Bildausschnitt (die bunten Balken) sauber auf eine kleine
     34x34px-Flaeche skaliert - zeigt also wirklich nur das kleine Icon,
     nicht einen abgeschnittenen Rest. Beim Ausklappen (Hover/Fokus) wieder
     die normale volle Breite. */
  .sidebar.sidebar-auto-collapse .sidebar-brand {
    justify-content: center;
  }
  .sidebar.sidebar-auto-collapse:hover .sidebar-brand,
  .sidebar.sidebar-auto-collapse:focus-within .sidebar-brand {
    justify-content: flex-start;
  }
  .sidebar.sidebar-auto-collapse .header-logo-djdesk {
    width: 34px;
    height: 34px;
    object-fit: cover;
    object-position: left center;
    transition: width 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar.sidebar-auto-collapse:hover .header-logo-djdesk,
  .sidebar.sidebar-auto-collapse:focus-within .header-logo-djdesk {
    width: auto;
    height: 34px;
    object-fit: fill;
    object-position: left center;
  }

  /* "+ Neue Anfrage"-Button im eingeklappten Zustand: statt der vollen,
     breiten Schaltflaeche (die bei nur 48px Innenbreite unschoen gedrungen
     wirkte) ein kleines, zentriertes quadratisches Icon-Feld - beim
     Ausklappen wieder der gewohnte volle Button mit Text. */
  .sidebar.sidebar-auto-collapse .sidebar-new-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    transition: width 0.24s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.24s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.24s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar.sidebar-auto-collapse:hover .sidebar-new-btn,
  .sidebar.sidebar-auto-collapse:focus-within .sidebar-new-btn {
    width: 100%;
    height: auto;
    padding: 7px 14px;
    display: inline-flex;
    margin: 0 0 14px;
  }
}

.app-footer {
  text-align: center;
  padding: 24px 16px 32px;
  color: var(--muted);
  font-size: 0.78rem;
  flex-shrink: 0;
}

h1 { font-size: 1.4rem; margin: 0 0 4px; }
h2 { font-size: 0.95rem; margin: 0 0 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

.page-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 18px 0 16px;
}

/* Theme-Umschalter */
.theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}
.theme-toggle:hover { background: var(--surface-hover); }

/* Buttons */
.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
  text-align: center;
}
.btn:hover { text-decoration: none; background: var(--surface-hover); }
.btn-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-color: var(--accent-strong);
  color: var(--accent-contrast);
  font-weight: 600;
}
.btn-accent:hover { filter: brightness(1.06); }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-muted { background: var(--surface-2); color: var(--text); }
.btn-small { padding: 7px 14px; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* Icons (inline SVG, theme-aware via currentColor) */
.icon {
  display: inline-block;
  vertical-align: -3px;
  flex-shrink: 0;
}
.icon + span, .icon + a { margin-left: 6px; }
h1 .icon, h2 .icon, h3 .icon { vertical-align: -4px; margin-right: 8px; }
.btn .icon, .link-muted .icon, .sidebar-link .icon { margin-right: 6px; vertical-align: -3px; }
.icon-only { margin-right: 0; }
.link-danger { background: none; border: none; padding: 0; color: var(--danger); text-decoration: underline; cursor: pointer; font-size: 0.85rem; }

/* Flash messages */
.flash-stack { margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.flash { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.9rem; }
.flash-success { background: rgba(74, 222, 128, 0.14); color: var(--success); }
.flash-error { background: rgba(248, 113, 113, 0.14); color: var(--danger); }
.flash-warning { background: rgba(250, 204, 21, 0.14); color: var(--warn); }

/* Login */
/* Hintergrundbild auf allen Login-/Passwort-Seiten (login.html, login_forgot.html,
   login_reset.html teilen sich .login-wrap). Absichtlich auf body.auth-bg
   (nicht auf .login-wrap) gesetzt: .login-wrap steckt in .container, das auf
   max-width: 880px begrenzt ist - das Bild waere sonst nur in einer schmalen
   Spalte in der Mitte sichtbar. body hat keine solche Breitenbegrenzung und
   bereits min-height: 100vh (siehe Sticky-Footer weiter oben), deckt also die
   ganze Seite ab. background-size: cover sorgt dafuer, dass das Bild
   unabhaengig von der Bildschirmgroesse proportional (nicht verzerrt) den
   ganzen Bereich ausfuellt und dabei mittig zugeschnitten wird. Ein dunkler
   Verlauf liegt zusaetzlich darueber, damit die Marketing-Grafiken/Texte im
   Bild dezent im Hintergrund bleiben und nicht mit der Login-Karte
   konkurrieren - die Karte selbst hat ohnehin ihren eigenen deckenden
   Hintergrund (siehe .login-card), Lesbarkeit ist also so oder so gegeben. */
body.auth-bg {
  background-image: linear-gradient(180deg, rgba(8, 8, 12, 0.72) 0%, rgba(8, 8, 12, 0.82) 100%), url("/static/login-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Das DJDesk-Logo war urspruenglich mittig oben ins Hintergrundbild
   eingebacken - jetzt aus dem Bild entfernt (siehe login-bg.jpg) und
   stattdessen als eigenstaendiges Element links auf der Seite platziert,
   unabhaengig vom Bild positionierbar. Nutzt dieselbe freigestellte
   Logo-Datei wie Header/Login-Karte. position: fixed, damit es unabhaengig
   von der Kartenposition/Bildschirmgroesse immer am linken Rand sitzt. Auf
   schmalen Bildschirmen ausgeblendet, damit es der (dann volle Breite
   einnehmenden) Login-Karte nicht in die Quere kommt. */
body.auth-bg::before {
  content: "";
  position: fixed;
  top: 7%;
  left: 4%;
  width: 260px;
  height: 68px;
  background-image: url("/static/brand-logo-djdesk.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 900px) {
  body.auth-bg::before { display: none; }
}
.login-wrap {
  display: flex;
  justify-content: center;
  padding-top: 8vh;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 2;
}
.login-card h1 { text-align: center; }
.login-card > p { text-align: center; margin-top: 14px; }
.login-forgot { text-align: center; margin-top: 10px; }
.muted { color: var(--muted); }
.small { font-size: 0.82rem; }

/* Forms */
.stack { display: flex; flex-direction: column; gap: 10px; }
label { font-size: 0.85rem; color: var(--muted); margin-top: 6px; }
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 0; background: var(--surface); }
legend { padding: 0 6px; color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; display: flex; gap: 8px; align-items: baseline; }
.form-card { margin-top: 8px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sent-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
  align-self: center;
}
.sent-badge-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.confirm-dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  width: min(360px, 90vw);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.confirm-dialog-title { margin: 0; font-size: 1.05rem; }
.confirm-dialog input[type="password"] { width: 100%; }
.confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.checkbox-inline { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); margin-top: 0; }
.checkbox-inline input { width: auto; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 4px 0 2px; }

/* ------------------------------------------------------------------ */
/* Fragebogen-Empfangsdesign (Nick, 2026-09-21): eigene, waermere Farbwelt
   + Typografie nur fuer die oeffentliche Hochzeits-Fragebogen-Seite - ueber
   Token-Overrides auf body.fragebogen-page. Alle bestehenden var(--...)
   Regeln im Stylesheet (Buttons, Inputs, Karten, Topbar, ...) greifen
   dadurch automatisch mit den neuen Werten, ohne dass jede Regel einzeln
   angefasst werden muss. Dashboard, Login und alle anderen Seiten (kein
   .fragebogen-page auf <body>) bleiben komplett unveraendert. */
body.fragebogen-page {
  --bg: #1a1420;
  --bg-gradient-start: #170f1c;
  --bg-gradient-end: #201526;
  --surface: #221a2b;
  --surface-2: #2b2136;
  --surface-hover: #322638;
  --border: #3c3049;
  --text: #f5ede2;
  --muted: #b3a3ba;
  --accent: #d4a35c;
  --accent-strong: #c68a3d;
  --accent-contrast: #241a12;
  --radius: 16px;
  --radius-sm: 12px;
  background: var(--bg);
  font-family: 'Karla', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
:root[data-theme="light"] body.fragebogen-page {
  --bg: #faf6ef;
  --bg-gradient-start: #faf6ef;
  --bg-gradient-end: #faf6ef;
  --surface: #ffffff;
  --surface-2: #f7efe1;
  --surface-hover: #f1e5d1;
  --border: #e7dac5;
  --text: #2b2130;
  --muted: #7c6f78;
  --accent: #b8823f;
  --accent-strong: #9c6c2f;
  --accent-contrast: #ffffff;
  background: var(--bg);
}
body.fragebogen-page h1,
body.fragebogen-page h2,
body.fragebogen-page h3 {
  font-family: 'Fraunces', Georgia, serif;
}
body.fragebogen-page .topbar {
  background: rgba(34, 26, 43, 0.88);
}
body.fragebogen-page .topbar .brand-icon {
  height: 32px;
}
body.fragebogen-page .btn {
  border-radius: 999px;
}
body.fragebogen-page .checkbox-inline {
  position: relative;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.fragebogen-page .checkbox-inline input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
body.fragebogen-page .checkbox-inline:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent-strong);
  color: var(--accent-contrast);
  font-weight: 600;
}
body.fragebogen-page .checkbox-inline:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
body.fragebogen-page .checkbox-group {
  gap: 8px 10px;
}
body.fragebogen-page .detail-card h2 {
  font-size: 1.25rem;
}

/* Veranstaltungsfragebogen (öffentliche, freundliche Ansicht fürs Brautpaar) */
.fragebogen-hero {
  position: relative;
  overflow: hidden;
  padding: 30px 20px 34px;
  margin: 4px 0 20px;
  text-align: center;
}
.fragebogen-hero::before {
  content: "";
  position: absolute;
  top: -130px;
  left: 50%;
  transform: translateX(-50%);
  width: 440px;
  height: 300px;
  background: radial-gradient(circle, rgba(212, 163, 92, 0.28), rgba(212, 163, 92, 0) 70%);
  pointer-events: none;
}
.fragebogen-hero-spark {
  position: absolute;
  color: var(--accent);
  opacity: 0.5;
  font-size: 0.8rem;
  pointer-events: none;
}
.fragebogen-hero-spark-1 { top: 22px; left: 16%; }
.fragebogen-hero-spark-2 { top: 44px; right: 15%; font-size: 0.65rem; opacity: 0.35; }
.fragebogen-hero-eyebrow {
  position: relative;
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.fragebogen-hero h1 {
  position: relative;
  font-weight: 600;
  font-size: 2.1rem;
  margin: 0 0 8px;
  letter-spacing: -0.3px;
}
.fragebogen-hero-date { position: relative; margin: 0; color: var(--muted); font-size: 1.05rem; }

.deadline-note {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 14px 22px;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
}
.deadline-note p { margin: 0; font-size: 0.9rem; color: var(--text); line-height: 1.5; }
.deadline-note strong { color: var(--accent); }

.changelog-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.changelog-entry {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  line-height: 1.5;
}
.changelog-entry:last-child { border-bottom: none; }
.changelog-date { flex: 0 0 100px; color: var(--accent); font-weight: 600; white-space: nowrap; }
.changelog-text { color: var(--text); }

#fragebogen-form { gap: 18px; }

/* Fragebogen-Abschnitte als Akkordeon: eingeklappt, mit sanfter Animation
   beim Auf-/Zuklappen (Höhe wird beim Öffnen/Schließen per JS gemessen). */
.fragebogen-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.fragebogen-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  padding: 20px;
  margin: 0;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius);
  transition: background 0.15s ease;
}
.fragebogen-section-toggle:hover { background: var(--surface-hover); }
.fragebogen-section-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fragebogen-section-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.9rem;
  transition: transform 0.25s ease;
}
.fragebogen-section.open .fragebogen-section-chevron { transform: rotate(180deg); }
.fragebogen-section-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: middle;
  flex: 0 0 auto;
}
.fragebogen-section-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.fragebogen-section.open .fragebogen-section-body { padding: 0 20px 20px; }
.fragebogen-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--accent);
  flex: 0 0 auto;
}
.fragebogen-section-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.fragebogen-autosave-status {
  text-align: right;
  font-size: 0.78rem;
  margin-top: -6px;
}

@media (max-width: 480px) {
  .fragebogen-hero { padding: 20px 16px; margin: 12px 0 16px; }
  .fragebogen-hero h1 { font-size: 1.4rem; }
  .fragebogen-hero-date { font-size: 0.95rem; }
  .fragebogen-section-toggle { padding: 16px; }
  .fragebogen-section-body { padding: 0 16px; }
  .fragebogen-section.open .fragebogen-section-body { padding: 0 16px 16px; }
}

/* ------------------------------------------------------------------ */
/* Fragebogen "Professionell"-Design (Nick, 2026-09-23): eigene, sachliche
   Farbwelt + Typografie fuer Corporate Event (und optional Sonstiges) -
   ueber Token-Overrides auf body.fragebogen-corporate, genau nach dem
   gleichen Prinzip wie das Hochzeits-Design oben (body.fragebogen-page).
   Wird nur zusaetzlich zu .fragebogen-page gesetzt, wenn fuer die jeweilige
   Veranstaltungsart in den Einstellungen "Professionell" gewaehlt ist
   (siehe get_questionnaire_design() in app.py) - das Hochzeits-Design bleibt
   davon komplett unberuehrt, weil dessen Regeln oben unveraendert bleiben
   und body.fragebogen-corporate hier bewusst NACH ihnen im Stylesheet steht
   (gleiche Spezifitaet, spaetere Regel gewinnt). */
body.fragebogen-corporate {
  /* Basis-Regel = Dark-Default, genau wie bei body.fragebogen-page oben
     (die Seite startet ohne data-theme-Attribut im Dunkelmodus, siehe
     Inline-Script im <head> von fragebogen_form.html). Zuvor stand hier
     faelschlich bereits eine helle Palette, wodurch Hell- und Dunkelmodus
     nahezu identisch (beide hell) aussahen - siehe :root[data-theme="light"]
     Block unten fuer den eigentlichen Hell-Modus. Kuehle, sachliche
     Dunkel-Palette (Blaugrau statt des warmen Bordeaux/Plum vom
     Hochzeits-Design), damit beide Designs klar getrennt bleiben. */
  --bg: #10151c;
  --bg-gradient-start: #0d1119;
  --bg-gradient-end: #141b24;
  --surface: #1a212c;
  --surface-2: #212a37;
  --surface-hover: #283242;
  --border: #2e3846;
  --text: #eef2f6;
  --muted: #93a1b0;
  --accent: #5fa8dc;
  --accent-strong: #7fbce6;
  --accent-contrast: #0b1420;
  --radius: 8px;
  --radius-sm: 5px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  background: var(--bg);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
:root[data-theme="light"] body.fragebogen-corporate {
  /* WICHTIG: hier bewusst JEDES Token einzeln erneut gesetzt (nicht nur die
     paar, die sich tatsaechlich aendern) - sonst gewinnt fuer die
     ausgelassenen Tokens die gleich spezifische Hochzeits-Regel
     (:root[data-theme="light"] body.fragebogen-page), z.B. --surface-hover,
     und es blitzt an einzelnen Stellen (z.B. beim Hover uebers Akkordeon)
     die warme Hochzeitsfarbe statt der kuehlen Corporate-Farbe durch. */
  --bg: #eef1f5;
  --bg-gradient-start: #eef1f5;
  --bg-gradient-end: #eef1f5;
  --surface: #ffffff;
  --surface-2: #e7ecf1;
  --surface-hover: #dde4ea;
  --border: #cfd8e1;
  --text: #151b24;
  --muted: #55636f;
  --accent: #1a6499;
  --accent-strong: #124a72;
  --accent-contrast: #ffffff;
  --radius: 8px;
  --radius-sm: 5px;
  --shadow: 0 1px 2px rgba(15, 23, 34, 0.06);
  background: var(--bg);
}
body.fragebogen-corporate h1,
body.fragebogen-corporate h2,
body.fragebogen-corporate h3 {
  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.3px;
}
body.fragebogen-corporate .topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-top: 3px solid var(--accent);
}
body.fragebogen-corporate .topbar .brand-icon {
  height: 26px;
  border-radius: 4px;
}
body.fragebogen-corporate .btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
}
body.fragebogen-corporate .theme-toggle {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
body.fragebogen-corporate .checkbox-inline {
  position: relative;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.fragebogen-corporate .checkbox-inline input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
body.fragebogen-corporate .checkbox-inline:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent-strong);
  color: var(--accent-contrast);
  font-weight: 600;
}
body.fragebogen-corporate .checkbox-inline:has(input:checked)::before {
  content: "✓";
  margin-right: 6px;
}
body.fragebogen-corporate .checkbox-inline:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
body.fragebogen-corporate .checkbox-group { gap: 8px; }
body.fragebogen-corporate .fragebogen-section-toggle {
  font-weight: 700;
  font-size: 0.95rem;
}
body.fragebogen-corporate .fragebogen-section-icon { border-radius: 4px; }
body.fragebogen-corporate .fragebogen-section-check { border-radius: 4px; }
body.fragebogen-corporate .fragebogen-hero {
  text-align: left;
  padding: 28px 28px 30px;
  margin: 20px 0 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
body.fragebogen-corporate .fragebogen-hero::before,
body.fragebogen-corporate .fragebogen-hero-spark {
  display: none;
}
body.fragebogen-corporate .fragebogen-hero-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.1em;
}
body.fragebogen-corporate .fragebogen-hero h1 { font-size: 1.9rem; }
body.fragebogen-corporate .deadline-note { background: var(--surface-2); }

/* Felder als strukturiertes 2-Spalten-Raster statt einfacher Liste - siehe
   .fragebogen-field/.fragebogen-field-wide in fragebogen_form.html. Fuer das
   Hochzeits-Design bleiben das ganz normale, unsichtbare Bloecke (keine
   Grid-Regeln dafuer oben), daher hat diese Umstellung keine Auswirkung dort. */
body.fragebogen-corporate .fragebogen-section-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  align-items: start;
}
body.fragebogen-corporate .fragebogen-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.fragebogen-corporate .fragebogen-field-wide,
body.fragebogen-corporate .location-fotos {
  grid-column: 1 / -1;
}
body.fragebogen-corporate .fragebogen-field label {
  margin-top: 0;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

@media (max-width: 640px) {
  body.fragebogen-corporate .fragebogen-section-body { grid-template-columns: 1fr; }
  body.fragebogen-corporate .fragebogen-field-wide { grid-column: auto; }
}

/* Adress-Autocomplete */
.autocomplete-wrap { position: relative; }
.autocomplete-list {
  list-style: none;
  margin: 2px 0 0;
  padding: 4px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  max-height: 220px;
  overflow-y: auto;
}
.autocomplete-list li {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
}
.autocomplete-list li:hover { background: var(--surface-hover); }

/* Dashboard greeting */
.dashboard-greeting {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.dashboard-greeting-text { font-size: 1.5rem; font-weight: 700; }
.dashboard-greeting-datetime { font-size: 1rem; color: var(--muted); }

/* Stats */
.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0 0 16px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), transparent 60%);
  pointer-events: none;
}
.stat-card-icon { font-size: 1.25rem; margin-bottom: 6px; opacity: 0.9; position: relative; }
.stat-value { font-size: 1.5rem; font-weight: 700; background: linear-gradient(135deg, var(--text), var(--muted)); -webkit-background-clip: text; background-clip: text; position: relative; }
.stat-label { font-size: 0.78rem; color: var(--muted); margin-top: 2px; position: relative; }

/* Zweiter Wert auf der Umsatz-Kachel (Nick, 2026-09-23): "kommt noch" -
   Honorar der bereits gebuchten Auftraege mit Termin ab heute bis
   Jahresende. Im ueberarbeiteten Design (body.ui-modern) ist die Kachel
   jetzt die grosse, volle Breite einnehmende Hero-Kachel und hat dafuer
   sichtbar Platz; im klassischen Design (kompakte Kachel im 4er-Raster)
   passt eine zweite, kleinere Zeile ebenfalls noch gut darunter. */
.stat-card-secondary {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  position: relative;
}
.stat-card-secondary-value { display: block; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.stat-card-secondary-label { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 1px; }

/* Dashboard-Kacheln anklickbar (Nick, 2026-09-23): "Anstehende Events" und
   "Anfragen offen" verlinken auf die gefilterte Auftraege-Liste (siehe
   STATUS_QUICK_FILTERS in app.py), "Offene Aufgaben" springt zur Hinweise-
   Box weiter unten. Als <a> statt <div> markiert, daher hier die
   Link-Grundformatierung + ein dezenter Hover/Focus-Hinweis, dass die
   Kachel klickbar ist. Die Umsatz-Kachel bleibt bewusst ein <div> (hat
   schon ihr eigenes Hover-Tooltip, siehe .stat-card-hoverable oben).*/
.stat-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.stat-card-link:hover,
.stat-card-link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.stat-card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sensible Zahlen (Honorar/Umsatz) am Dashboard: per Auge-Button
   ein-/ausblendbar (verwaschen), z.B. beim Bildschirm teilen. Zustand
   liegt in data-figures auf <html>, siehe base.html/dashboard.html. */
.stat-figures-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--muted);
  opacity: 0.7;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}
.stat-figures-toggle:hover { opacity: 1; background: var(--surface-hover); }
.figure-sensitive { transition: filter 0.15s ease; }
html[data-figures="hidden"] .figure-sensitive {
  filter: blur(7px);
  user-select: none;
}

/* Honorar-Kachel (Nick, 2026-09-23): frueher ein Hover-Tooltip direkt an der
   Kachel - im ueberarbeiteten Design (body.ui-modern, siehe weiter unten)
   ragt die Kachel jetzt ueber die volle Breite und das Tooltip landete
   dadurch sichtbar HINTER den darunterliegenden Kacheln. Daher jetzt ein
   Klick-Popup (siehe #umsatz-dialog, <dialog>, gleiches Muster wie
   .confirm-dialog bei "Rechnung loeschen") statt Hover. .stat-card-hoverable
   bleibt als Klassenname bestehen (targetet u.a. die Gross-Kachel im
   body.ui-modern-Design weiter unten), cursor jetzt "pointer" statt
   "default", da die Kachel klickbar ist. */
.stat-card-hoverable { cursor: pointer; overflow: visible; }
.stat-tooltip-list { display: flex; flex-direction: column; gap: 5px; }
.stat-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
}
.stat-tooltip-row-label { color: var(--muted); }
.stat-tooltip-row-value { color: var(--text); font-weight: 600; white-space: nowrap; }
.stat-tooltip-divider { border: none; border-top: 1px solid var(--border); margin: 6px 0; }

/* Honorar-Popup (#umsatz-dialog): erbt Grundformatierung von .confirm-dialog
   (siehe oben, "Rechnung loeschen"), nur breiter fuers Monat/Jahr-Diagramm. */
.stats-dialog { width: min(480px, 92vw); text-align: left; }
.stats-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.stats-dialog-close {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
}
.stats-dialog-close:hover { background: var(--surface-hover); color: var(--text); }
.stats-dialog-cols { display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 10px 0; }
.stats-dialog-block { flex: 1 1 180px; min-width: 0; }
.stats-dialog-block-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.stats-dialog-chart-wrap { margin: 10px 0 4px; overflow-x: auto; }
.stats-chart { width: 100%; height: auto; min-width: 320px; display: block; }
.stats-chart-baseline { stroke: var(--border); stroke-width: 1; }
.stats-chart-bar { fill: var(--accent); }
.stats-chart-bar-current { fill: var(--accent-strong); }
.stats-chart-month-label { font-size: 8px; fill: var(--muted); text-anchor: middle; }
.stats-chart-month-label-current { fill: var(--text); font-weight: 700; }
.stats-dialog-chart-summary { margin: 2px 0 0; }

/* Filter bar */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
  align-items: center;
}
.filter-bar input[type="search"] { flex: 1 1 200px; }
.filter-bar select { flex: 0 1 160px; }
#dashboard-eventtyp-select { flex: 1 1 240px; min-width: 240px; }
.filter-bar .search-status { min-width: 90px; }

/* Card list */
.card-list { display: flex; flex-direction: column; gap: 10px; }
.inquiry-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.inquiry-card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }
.inquiry-card-title { font-weight: 600; }
.inquiry-card-meta { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
.inquiry-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--muted);
}

/* Badges */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.badge-anfrage { background: rgba(139, 92, 246, 0.18); color: var(--accent); }
.badge-offen { background: rgba(250, 204, 21, 0.18); color: var(--warn); }
.badge-angebot-verschickt { background: rgba(56, 130, 246, 0.18); color: #60a5fa; }
.badge-gebucht { background: rgba(74, 222, 128, 0.18); color: var(--success); }
.badge-rechnung-gesendet { background: rgba(232, 121, 249, 0.18); color: var(--magenta); }
.badge-erledigt { background: rgba(154, 154, 166, 0.18); color: var(--muted); }
.badge-abgesagt { background: rgba(248, 113, 113, 0.18); color: var(--danger); }
/* Gleiche Farben wie im Kalender auf dem Dashboard (.cal-type-x, .dot-x),
   damit eine Veranstaltungsart ueberall im Tool gleich aussieht. */
.badge-eventtyp-hochzeit { background: rgba(232, 121, 249, 0.2); color: var(--magenta); }
.badge-eventtyp-corporate { background: rgba(56, 189, 248, 0.2); color: var(--corporate); }
.badge-eventtyp-club { background: rgba(251, 146, 60, 0.2); color: var(--club); }
.badge-eventtyp-sonstiges { background: rgba(45, 212, 191, 0.2); color: var(--sonstiges); }
.badge-eventtyp-technik { background: rgba(148, 163, 184, 0.2); color: var(--technik); }

.tag { display: inline-block; font-size: 0.72rem; padding: 3px 9px; border-radius: 999px; margin-left: 6px; white-space: nowrap; line-height: 1.3; }
.tag-eventtype { background: rgba(139, 92, 246, 0.16); color: var(--accent); font-weight: 600; }
.tag-soon { background: rgba(250, 204, 21, 0.18); color: var(--warn); }
.tag-past { background: rgba(154, 154, 166, 0.18); color: var(--muted); }
.tag-success { background: rgba(74, 222, 128, 0.18); color: var(--success); }

/* Detail page */
.detail-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.spacer { flex: 1; }
@media (max-width: 620px) {
  .detail-toolbar .spacer { display: none; }
}
.detail-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.detail-card.dragging { opacity: 0.4; }
.drag-handle {
  display: inline-block;
  cursor: grab;
  color: var(--muted);
  margin-right: 6px;
  font-size: 0.95em;
  user-select: none;
  -webkit-user-select: none;
}
.drag-handle:active { cursor: grabbing; }
dl { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 8px 10px; }
dt { color: var(--muted); font-size: 0.85rem; }
dd { margin: 0; }
.pre { white-space: pre-wrap; }

/* ------------------------------------------------------------------ */
/* Auftrag-Detail: ueberarbeiteter Header (Avatar, Chips, Aktionen) und
   Karten-Layout fuer "Basis"/"Preis & Zahlung" (Nick, 2026-09-23,
   Entwurf "Option B - Kachel-Layout"). Die Kachel-Gestaltung bleibt
   dauerhaft, die Akzentfarbe wurde auf Wunsch wieder auf das
   urspruengliche, im ganzen Tool verwendete Violet (--accent) zurueckgesetzt
   (siehe .hero-scope weiter unten). Die --hero-amber/-2 Token (Name
   historisch gewachsen, Wert jetzt Violet) werden zentral von .hero-scope
   definiert - inquiry_detail.html wird komplett in .hero-scope eingepackt,
   damit auch die Karten unterhalb des Headers (z.B. .detail-field-chip)
   die Token erreichen; eigene, nur hier verwendete Token statt der
   globalen --accent, damit sich die Auftrag-Detail-Seite weiterhin
   isoliert vom Rest des Tools anpassen laesst. */
.inquiry-hero {
  margin-bottom: 22px;
}
.inquiry-hero-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}
.inquiry-hero-back:hover { color: var(--text); }
.inquiry-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.inquiry-hero-identity { display: flex; gap: 16px; align-items: flex-start; }
.inquiry-hero-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--hero-amber), var(--hero-amber-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
  color: var(--hero-amber-contrast);
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.25);
}
.inquiry-hero-title { margin: 0 0 9px; font-size: 24px; font-weight: 700; letter-spacing: -0.2px; }
.inquiry-hero-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
}
.hero-chip .icon { margin: 0; }
.hero-chip-accent { color: var(--hero-amber-2); font-weight: 700; }
.hero-chip-neutral { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.hero-chip-anfrage { background: rgba(139, 92, 246, 0.18); color: var(--accent); }
.hero-chip-offen { background: rgba(250, 204, 21, 0.18); color: var(--warn); }
.hero-chip-angebot-verschickt { background: rgba(56, 130, 246, 0.18); color: #60a5fa; }
.hero-chip-gebucht { background: rgba(74, 222, 128, 0.18); color: var(--success); }
.hero-chip-rechnung-gesendet { background: rgba(232, 121, 249, 0.18); color: var(--magenta); }
.hero-chip-erledigt { background: rgba(154, 154, 166, 0.18); color: var(--muted); }
.hero-chip-abgesagt { background: rgba(248, 113, 113, 0.18); color: var(--danger); }
.hero-chip-eventtyp-hochzeit { background: rgba(232, 121, 249, 0.2); color: var(--magenta); }
.hero-chip-eventtyp-corporate { background: rgba(56, 189, 248, 0.2); color: var(--corporate); }
.hero-chip-eventtyp-club { background: rgba(251, 146, 60, 0.2); color: var(--club); }
.hero-chip-eventtyp-sonstiges { background: rgba(45, 212, 191, 0.2); color: var(--sonstiges); }
.hero-chip-eventtyp-technik { background: rgba(148, 163, 184, 0.2); color: var(--technik); }

.inquiry-hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-hero-primary {
  background: linear-gradient(135deg, var(--hero-amber), var(--hero-amber-2));
  color: var(--hero-amber-contrast);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.28);
}
.btn-hero-primary:hover { filter: brightness(1.05); }
.btn-hero-secondary { background: transparent; border-color: var(--border); color: var(--text); }
.btn-hero-secondary:hover { background: var(--surface-hover); }
.btn-hero-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.btn-hero-icon:hover { background: var(--surface-hover); }
.btn-hero-icon .icon { margin: 0; }

.hero-menu { position: relative; }
.hero-menu-panel {
  position: absolute;
  top: 48px;
  right: 0;
  width: 210px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 20;
}
.hero-menu-panel[hidden] { display: none; }
.hero-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--text);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.hero-menu-item:hover { background: var(--surface-hover); }
.hero-menu-item .icon { margin: 0; }
.hero-menu-item-danger { color: var(--danger); }

/* Basis / Preis & Zahlung: Icon-Feld-Raster statt dl/dt/dd-Liste */
.detail-card-fields-head { margin-bottom: 18px; }
.detail-card-fields-head h2 { margin: 0; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
@media (max-width: 640px) {
  .field-grid { grid-template-columns: 1fr; }
}
.detail-field { display: flex; gap: 12px; align-items: flex-start; }
.detail-field-wide { grid-column: 1 / -1; }
.detail-field-chip {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--hero-amber-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.detail-field-chip .icon { margin: 0; }
.detail-field-lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.detail-field-val { font-size: 15px; font-weight: 600; color: var(--text); }
.detail-field-val.pre { white-space: pre-wrap; font-weight: 600; }
.detail-field-note { font-size: 12.5px; color: var(--muted); font-style: italic; margin-top: 3px; font-weight: 400; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); display: inline-block; margin-right: 7px; opacity: 0.55; }
.status-dot-on { background: var(--success); opacity: 1; }

.price-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 12px;
}
.price-hero-amount { font-size: 30px; font-weight: 700; line-height: 1.1; margin-top: 4px; }
.price-hero-sub { font-size: 13px; color: var(--muted); margin-top: 8px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.status-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.status-pill-offen { background: rgba(250, 204, 21, 0.15); color: var(--warn); }
.status-pill-angezahlt { background: rgba(56, 189, 248, 0.15); color: var(--corporate); }
.status-pill-vollstaendig-bezahlt { background: rgba(74, 222, 128, 0.15); color: var(--success); }

.file-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.file-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.upload-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.upload-form input[type="file"] { flex: 1 1 200px; padding: 6px; }

/* Fragebogen */
.contact-footer { margin-top: 24px; }
.link-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.send-row { flex-wrap: wrap; align-items: center; margin: 10px 0; }
.email-form-wrap { margin: 4px 0 14px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.link-row input { flex: 1; font-size: 0.85rem; }
.status-line { margin: 4px 0 12px; font-size: 0.9rem; }
.questionnaire-summary { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.questionnaire-summary h3 {
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--muted); margin: 16px 0 8px;
}
.questionnaire-summary h3:first-child { margin-top: 0; }

/* Übersicht (Dashboard): Kalender links, Suche/Anfragenliste rechts daneben */
.dashboard-columns {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 20px;
  align-items: start;
}
.dashboard-col-list { display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 760px) {
  .dashboard-columns { grid-template-columns: 1fr; }
}

/* Monatskalender (Dashboard) */
.calendar-card { margin: 0; padding: 14px 16px; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.calendar-title { font-size: 0.88rem; font-weight: 600; margin: 0; text-transform: none; letter-spacing: 0; color: var(--text); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calendar-weekday { text-align: center; font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; padding-bottom: 3px; }
.calendar-cell {
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.calendar-cell-outside { opacity: 0.35; }
.calendar-cell-today { border-color: var(--accent); border-width: 2px; }
.calendar-daynum { font-size: 0.62rem; color: var(--muted); }
.calendar-event {
  display: block;
  font-size: 0.58rem;
  padding: 1px 3px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  font-weight: 600;
}
.calendar-event:hover { text-decoration: underline; }
.cal-status-anfrage { background: rgba(139, 92, 246, 0.18); color: var(--accent); }
.cal-status-angebot-verschickt { background: rgba(56, 130, 246, 0.18); color: #60a5fa; }
.cal-status-gebucht { background: rgba(74, 222, 128, 0.18); color: var(--success); }
.cal-status-erledigt { background: rgba(154, 154, 166, 0.18); color: var(--muted); }
.cal-type-hochzeit { background: rgba(232, 121, 249, 0.2); color: var(--magenta); }
.cal-type-corporate { background: rgba(56, 189, 248, 0.2); color: var(--corporate); }
.cal-type-club { background: rgba(251, 146, 60, 0.2); color: var(--club); }
.cal-type-sonstiges { background: rgba(45, 212, 191, 0.2); color: var(--sonstiges); }
.cal-type-termin { background: rgba(250, 204, 21, 0.2); color: var(--warn); }

/* Legende unter dem Kalender */
.calendar-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; font-size: 0.72rem; color: var(--muted); }
.calendar-legend-item { display: flex; align-items: center; gap: 5px; }
.calendar-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.calendar-legend-dot.dot-hochzeit { background: var(--magenta); }
.calendar-legend-dot.dot-corporate { background: var(--corporate); }
.calendar-legend-dot.dot-club { background: var(--club); }
.calendar-legend-dot.dot-sonstiges { background: var(--sonstiges); }
.calendar-legend-dot.dot-termin { background: var(--warn); }

.dashboard-col-calendar { display: flex; flex-direction: column; gap: 16px; }

/* Toolbox (Dashboard): Hinweise auf kuerzlich ausgefuellte Fragebogen und
   noch offene Rechnungen, unterhalb des Kalenders */
.toolbox-card { margin: 0; padding: 14px 16px; }
.toolbox-title { margin: 0 0 10px; font-size: 1rem; }
.toolbox-section + .toolbox-section { margin-top: 14px; }
.toolbox-section-title {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.toolbox-section-title-warn { color: var(--danger); }
.toolbox-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.toolbox-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.toolbox-list li a { color: var(--text); font-weight: 500; }
.toolbox-list li a:hover { color: var(--accent); }
.toolbox-item-right { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.toolbox-dismiss-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
}
.toolbox-dismiss-btn:hover { color: var(--danger); background: var(--surface-hover); }

/* Datums-Konflikt-Warnhinweis im Anfrage-Formular */
.date-conflict-warning {
  background: rgba(250, 204, 21, 0.14);
  color: var(--warn);
  border: 1px solid rgba(250, 204, 21, 0.35);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.85rem;
  margin-top: -2px;
}

@media (max-width: 480px) {
  .calendar-card { padding: 10px 12px; }
  .calendar-cell { min-height: 32px; padding: 2px; }
  .calendar-event { font-size: 0.52rem; }
}

/* Einstellungen: Feldverwaltung */
.field-mgmt-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 10px; }
.field-mgmt-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

/* Rechnungsübersicht: Zeile je Rechnung (Checkbox + Infos / Aktionen / Löschen) */
.invoice-row-info { display: flex; align-items: flex-start; gap: 10px; }
.invoice-select-checkbox {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 3px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.invoice-row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.invoice-row-delete { flex-basis: 100%; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 2px; }
.invoice-delete-confirm { margin-top: 10px; background: rgba(248, 113, 113, 0.08); border: 1px solid var(--danger); border-radius: var(--radius-sm); padding: 10px 12px; }
.invoice-delete-confirm-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.invoice-delete-confirm-row input[type="password"] { width: auto; flex: 1 1 200px; }

@media (min-width: 640px) {
  .stats-row { grid-template-columns: repeat(4, 1fr); }
  .page-head { flex-direction: row; align-items: baseline; justify-content: space-between; }
}

@media (max-width: 480px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  dl { grid-template-columns: 110px 1fr; }
  .topbar nav { gap: 10px; }
}

/* Einstellungen: Tab-Navigation + Panels für mehr Übersicht */
.settings-tabnav {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 2px 2px 10px;
  margin: 4px 0 10px;
  border-bottom: 1px solid var(--border);
}
.settings-tabnav::-webkit-scrollbar { height: 6px; }
.settings-tabnav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.settings-tabnav::-webkit-scrollbar-track { background: transparent; }
.settings-tab-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.83rem;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.settings-tab-btn:hover { background: var(--surface-hover); }
.settings-tab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.settings-tab-panel { margin-top: 6px; }

.settings-group-heading {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.container > .detail-card { margin-bottom: 14px; }
.container > .detail-card:last-child { margin-bottom: 0; }

@media (max-width: 480px) {
  .settings-tab-btn { padding: 7px 12px; font-size: 0.8rem; }
  .settings-group-heading { font-size: 0.95rem; }
}

/* Fragebogen: Textfeld mit Aktions-Button daneben (z. B. Spotify-Link) */
.input-with-button { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.input-with-button input { flex: 1 1 200px; }
.input-with-button .btn { flex: 0 0 auto; white-space: nowrap; }

.location-fotos { margin: 10px 0 16px; }
.foto-gallery { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 8px 0 12px; }
.foto-gallery li { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.foto-thumb {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: block;
}

/* Rechnungstool: Positionen-Editor (Menge / Bezeichnung+Kurzbeschreibung / Einzelpreis / entfernen) */
.invoice-item-labels {
  display: grid;
  grid-template-columns: 70px 1fr 110px 70px;
  gap: 10px;
  padding: 0 0 4px;
  font-size: 0.78rem;
  color: var(--muted);
}
.invoice-item-row {
  display: grid;
  grid-template-columns: 70px 1fr 110px 70px;
  gap: 10px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.invoice-item-row:last-child { border-bottom: none; }
.invoice-item-menge, .invoice-item-preis { width: 100%; }
.invoice-item-desc { display: flex; flex-direction: column; gap: 4px; }
.invoice-item-desc input:first-child { font-weight: 600; }
.invoice-item-desc textarea {
  font-size: 0.85rem;
  color: var(--muted);
  font-family: inherit;
  resize: vertical;
}
.invoice-item-row .link-danger { justify-self: end; margin-top: 8px; }

.invoice-item-row-freitext {
  grid-template-columns: 1fr 70px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  border-bottom: 1px dashed var(--border);
}
.invoice-item-desc-freitext { display: flex; flex-direction: column; gap: 4px; }
.invoice-item-desc-freitext > span.muted { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }

@media (max-width: 640px) {
  .invoice-item-labels { display: none; }
  .invoice-item-row { grid-template-columns: 1fr; }
  .invoice-item-row .link-danger { justify-self: start; margin-top: 0; }
}

/* Technik-Pakete: Positionen-Editor (Artikel-Auswahl / Menge / entfernen) -
   eigenes 3-Spalten-Layout, analog zum Rechnungs-Positionen-Editor oben,
   aber mit eigenen Spaltenbreiten statt der 4-spaltigen Rechnungs-Variante. */
.paket-item-labels {
  display: grid;
  grid-template-columns: 1fr 90px 70px;
  gap: 10px;
  padding: 0 0 4px;
  font-size: 0.78rem;
  color: var(--muted);
}
.paket-item-row {
  display: grid;
  grid-template-columns: 1fr 90px 70px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.paket-item-row:last-child { border-bottom: none; }
.paket-item-menge { width: 100%; }
.paket-item-row .link-danger { justify-self: end; }

@media (max-width: 640px) {
  .paket-item-labels { display: none; }
  .paket-item-row { grid-template-columns: 1fr; }
  .paket-item-row .link-danger { justify-self: start; }
}

/* Variante mit zusaetzlicher Preis-Spalte (Zusatz-Technik im Anfrage-
   Formular: Bezeichnung / Menge / Preis / entfernen) - ergaenzt die
   3-spaltige .paket-item-row/-labels-Basis oben um eine vierte Spalte,
   ohne das bestehende 3-spaltige Layout (Technik-Paket-Positionen-Editor)
   zu beeinflussen. */
.paket-item-labels-preis.paket-item-labels,
.paket-item-row-preis.paket-item-row {
  grid-template-columns: 1fr 70px 90px 70px;
}
@media (max-width: 640px) {
  .paket-item-labels-preis.paket-item-labels { display: none; }
  .paket-item-row-preis.paket-item-row { grid-template-columns: 1fr; }
}

/* Technik-Paket-Auswahl im Anfrage-Formular: eine Option pro Paket mit
   Checkbox, aufklappbarer Artikel-Baumansicht (details/summary) und einem
   Preisfeld, das nur bei angehaktem Paket sichtbar wird. */
.technik-paket-option {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.technik-paket-option:last-child { border-bottom: none; }
.technik-paket-tree {
  margin: 4px 0 0 26px;
  font-size: 0.85rem;
}
.technik-paket-tree summary {
  cursor: pointer;
  color: var(--muted);
}
.technik-paket-tree ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.technik-paket-preis-wrap {
  margin: 8px 0 0 26px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.technik-paket-preis-wrap label {
  margin: 0;
  white-space: nowrap;
}
.technik-paket-preis-input { width: 120px; }

/* Rechnungstool: Summenzeile rechtsbuendig und groesser hervorgehoben */
.invoice-total-line {
  text-align: right;
  font-size: 0.95rem;
}
.invoice-total-line strong {
  font-size: 1.5em;
  margin-left: 6px;
}

/* Rechnungstool: Abstand der Aktions-Buttons (Speichern/Vorschau/...) zu den
   Kacheln davor (Formular) und danach (E-Mail versenden) */
.invoice-actions-row {
  margin: 24px 0;
}

/* Einklappbare Kacheln in den Einstellungen (gleiches Verhalten wie die
   Ausklapp-Abschnitte im Fragebogen), damit nicht alle Karten pro Reiter
   gleichzeitig ausgeklappt und ueberladen wirken. */
.collapsible-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.collapsible-card-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: 18px;
  margin: 0;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius);
  transition: background 0.15s ease;
}
.collapsible-card-toggle:hover { background: var(--surface-hover); }
.collapsible-card-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.collapsible-card-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.9rem;
  transition: transform 0.25s ease;
}
.collapsible-card.open .collapsible-card-chevron { transform: rotate(180deg); }
.collapsible-card-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 18px;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.collapsible-card.open .collapsible-card-body { padding: 0 18px 18px; }

/* =========================================================================
   Modernes Design (Nick, 2026-09-22): optionaler dynamischerer Look fuer
   Seitenleiste + Dashboard, per Schalter in den Einstellungen
   (Darstellung & Kontakt > Design) an/ausschaltbar - siehe
   modern_design_enabled()/body.ui-modern in base.html und
   settings_modern_design_update() in app.py.

   Bewusst NUR zusaetzliche, hoeher-spezifische Regeln unter body.ui-modern
   statt Aenderungen an den bestehenden Klassen oben: die Original-Regeln
   bleiben unangetastet, sodass "altes Design zurückholen" ausschliesslich
   bedeutet, dass body.ui-modern fehlt (Checkbox aus) - nichts davon kann
   das klassische Design kaputt machen, egal in welcher Reihenfolge diese
   Datei geladen wird. Markup/JS bleiben komplett unveraendert, es werden
   nur bestehende Elemente umgestylt.
   ========================================================================= */

/* Seitenleiste: schwebendes, freigestelltes Panel statt randlos/eckig -
   nur ab 900px (Desktop-Seitenleiste), die mobile Kopfleiste bleibt gleich. */
@media (min-width: 900px) {
  body.ui-modern .sidebar {
    left: 16px;
    top: 16px;
    bottom: 16px;
    border-radius: 24px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  body.ui-modern .main-col,
  body.ui-modern .app-footer {
    margin-left: 264px;
  }
  body.ui-modern .app-shell:has(.sidebar.sidebar-auto-collapse) ~ .app-footer,
  body.ui-modern .app-shell:has(.sidebar.sidebar-auto-collapse) .main-col {
    margin-left: 100px;
  }
  body.ui-modern .app-shell:has(.sidebar.sidebar-auto-collapse:hover) ~ .app-footer,
  body.ui-modern .app-shell:has(.sidebar.sidebar-auto-collapse:focus-within) ~ .app-footer,
  body.ui-modern .app-shell:has(.sidebar.sidebar-auto-collapse:hover) .main-col,
  body.ui-modern .app-shell:has(.sidebar.sidebar-auto-collapse:focus-within) .main-col {
    margin-left: 264px;
  }
  /* Aktiver Reiter: kraeftige Fuellung statt dezentem Farbton - besser
     erkennbar, passend zum insgesamt dynamischeren Look. */
  body.ui-modern .sidebar-link.active {
    background: var(--accent);
    color: #fff;
  }
  /* "+ Neue Anfrage": voll abgerundete Pille statt eckigem Button. */
  body.ui-modern .sidebar-new-btn { border-radius: 999px; }
}

/* Dashboard-Begruessung: groesser/kraeftiger. */
body.ui-modern .dashboard-greeting-text { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.01em; }
body.ui-modern .dashboard-greeting { margin-bottom: 22px; }

/* Kennzahlen-Kacheln: die Umsatz-Kachel (staerkste Zahl, bereits eigene
   Klasse .stat-card-hoverable) wird zur grossen, farbig gefuellten
   "Hero"-Kachel ueber die volle Breite, Events/Anfragen/Aufgaben ruecken
   als kompaktes Trio darunter - statt vier optisch gleich gewichteter
   Kacheln in einer Reihe. */
body.ui-modern .stats-row { gap: 14px; }
@media (min-width: 640px) {
  body.ui-modern .stats-row { grid-template-columns: repeat(3, 1fr); }
}
body.ui-modern .stat-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
body.ui-modern .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}
body.ui-modern .stat-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  margin-bottom: 10px;
}
body.ui-modern .stats-row .stat-card:nth-child(1) .stat-card-icon { background: rgba(139, 92, 246, 0.16); color: var(--accent); }
body.ui-modern .stats-row .stat-card:nth-child(2) .stat-card-icon { background: rgba(56, 189, 248, 0.16); color: var(--corporate); }
body.ui-modern .stats-row .stat-card:nth-child(3) .stat-card-icon { background: rgba(251, 146, 60, 0.18); color: var(--club); }

body.ui-modern .stat-card-hoverable {
  order: -1;
  grid-column: 1 / -1;
  background: linear-gradient(150deg, var(--accent-strong) 0%, var(--accent) 100%);
  border-color: transparent;
  padding: 22px 26px 24px;
}
/* .stat-card-hoverable hat overflow:visible (siehe oben, fuer den
   Hover-Tooltip) - ein per ::before angedeutetes Dekor-Element wuerde also
   nicht am Kachelrand abgeschnitten und liefe sichtbar ueber; deshalb hier
   bewusst nur die vorhandene, dezente Verlaufs-Ueberlagerung ausblenden
   statt ein eigenes Dekor-Element zu positionieren. */
body.ui-modern .stat-card-hoverable::before {
  display: none;
}
body.ui-modern .stat-card-hoverable .stat-card-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
body.ui-modern .stat-card-hoverable .stat-label { color: rgba(255, 255, 255, 0.82); }
body.ui-modern .stat-card-hoverable .stat-value {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: #fff;
  font-size: 2.15rem;
}
body.ui-modern .stat-card-hoverable .stat-figures-toggle { color: rgba(255, 255, 255, 0.85); }
body.ui-modern .stat-card-hoverable .stat-figures-toggle:hover { background: rgba(255, 255, 255, 0.18); }
body.ui-modern .stat-card-hoverable .stat-card-secondary { border-top-color: rgba(255, 255, 255, 0.25); margin-top: 14px; padding-top: 12px; }
body.ui-modern .stat-card-hoverable .stat-card-secondary-value { color: #fff; font-size: 1.15rem; }
body.ui-modern .stat-card-hoverable .stat-card-secondary-label { color: rgba(255, 255, 255, 0.82); }

/* Kalender- und Hinweise-Karte: etwas kraeftigere Flaeche/Rundung als das
   Standard-.detail-card, damit sie als eigene "Kachel" wirken. */
body.ui-modern .dashboard-col-calendar .detail-card {
  border-radius: 18px;
  background: var(--surface-2);
}

/* Naechste-Events-Liste: etwas rundere Karten mit staerkerem Hover-Effekt. */
body.ui-modern .dashboard-col-list .inquiry-card {
  border-radius: 16px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
body.ui-modern .dashboard-col-list .inquiry-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}
body.ui-modern .dashboard-col-list .badge { font-weight: 700; }

/* =========================================================================
   Farb-Rueckbau (Nick, 2026-09-23): Dashboard, Kunden-Bereich und
   Einstellungen wurden wieder komplett auf den Zustand vor dem
   Graphite/Amber-Redesign zurueckgesetzt (siehe templates/dashboard.html,
   kunden_list.html, kunde_detail.html, kunden_form.html, settings.html -
   keine dieser Seiten traegt noch eine Scope-Klasse dafuer, daher wurde der
   dafuer noetige CSS-Block komplett entfernt). Einzig Auftrag-Detail
   (inquiry_detail.html) behaelt das neue Kachel-Layout bei (Header,
   Basis-/Preis&Zahlung-Karten im Icon-Grid, siehe .inquiry-hero weiter
   oben) - dort aber wieder mit der urspruenglichen, im ganzen Tool
   verwendeten Violet-Akzentfarbe (--accent) statt Amber. Die --hero-amber/
   -2/-contrast Token (Name historisch gewachsen) tragen jetzt exakt die
   gleichen Werte wie das globale --accent/--accent-strong/--accent-contrast,
   bleiben aber bewusst als eigene, nur auf .hero-scope gesetzte Kopie
   erhalten statt die globalen Variablen zu nutzen - so laesst sich die
   Akzentfarbe von Auftrag-Detail weiterhin isoliert vom Rest des Tools
   anpassen, falls spaeter gewuenscht. */
.hero-scope {
  --hero-amber: #8b5cf6;
  --hero-amber-2: #7c3aed;
  --hero-amber-contrast: #ffffff;
}
:root[data-theme="light"] .hero-scope {
  --hero-amber: #7c3aed;
  --hero-amber-2: #6d28d9;
}