/* =================================================================
   FINALE, BEREINIGTE VERSION VON main.css
   Zuletzt aktualisiert: 22.09.2025
   - Alle Duplikate und Fehler entfernt
   - Logische Struktur mit Kommentaren
   - Finale Layout-Logik für view-basiertes Scrolling implementiert
   ================================================================= */

/* =================================================================
   1. Design System & CSS-Variablen
   ================================================================= */
:root {
  /* Apple-like System Fonts */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  /* Apple-like Colors (Light Mode) */
  --color-background: #f5f5f7; /* Light gray background */
  --color-surface: #ffffff;
  --color-surface-transparent: rgba(255, 255, 255, 0.8);
  --color-text-primary: #1d1d1f; /* Almost black */
  --color-text-secondary: #86868b; /* Gray text */
  --color-border: #d2d2d7;
  --color-accent: #0071e3; /* Apple Blue */

  /* Header with Glassmorphism - Apple Red */
  --color-header-bg: rgba(
    255,
    59,
    48,
    0.95
  ); /* Stärkeres Rot, weniger Transparenz */
  --color-header-text: #ffffff;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-apple: 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* =================================================================
   2. Basis-Styling & Globaler Reset
   ================================================================= */
html {
  font-size: 15px;
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.6;
  /* Standard-Layout: Scrollen erlauben */
  overflow-y: auto;
  /* Smooth transition nur für Hintergrundfarbe, NICHT für background-image */
  transition: background-color 0.3s ease-in-out;
  /* Standard Hintergrundfarbe für alle Lernfelder */
  background-color: #f8fafc;
  -webkit-font-smoothing: antialiased; /* Apple font smoothing */
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  top: 0 !important;
}

/* Mobile/Responsive: sichere Defaults gegen "zu groß"/Overflow */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

#app-container {
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
}

#main-header {
  margin-top: 0 !important;
  top: 0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Lernfelder: Weißer Hintergrund, KEIN Bild */
body[data-route^="lf"],
body.view-lernfeld {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Lernfeld: Sidebar immer sichtbar & sticky (Desktop) */
@media (min-width: 1024px) {
  body.view-lernfeld #content-wrapper {
    /* Alte Logik: Wrapper füllt den Viewport unter dem Header,
       Content scrollt innen (kein Body-Scroll) */
    overflow: hidden;
    height: calc(100vh - var(--header-height, 0px));
    min-height: calc(100vh - var(--header-height, 0px));
    align-items: stretch;
  }

  body.view-lernfeld #sidebar {
    display: block !important;
    /* Direkt unter dem Header, bündig mit dem Container */
    position: relative;
    top: 0;
    height: 100%;
    overflow-y: auto;
  }

  body.view-lernfeld #content-area {
    overflow-y: auto;
    height: 100%;
  }
}

/* AUSNAHME: NUR für das Dashboard erlauben wir das Scrollen der ganzen Seite */
body.dashboard-view {
  overflow-y: auto;
}

/* Hintergrundbild NUR für Übersicht */
body[data-route="uebersicht"],
body[data-route=""],
body:not([data-route]) {
  background-color: #e0f2fe;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* Keine Transition für background-image! */
}

/* Alle anderen Routes: Explizit KEIN Hintergrundbild */
body[data-route^="lf"],
body[data-route="mediathek"],
body[data-route="glossar"],
body[data-route="impressum"],
body.view-lernfeld {
  background-color: #ffffff !important;
  background-image: none !important;
}

img {
  max-width: 100%;
  height: auto;
}

/* =================================================================
   3. App-Layout (Container, Header, Wrapper)
   ================================================================= */
#app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Entferne ALLE Hintergrundbilder bei Lernfeldern */
body[data-route^="lf"] #app-container,
body.view-lernfeld #app-container {
  background: none !important;
  background-image: none !important;
}

body.dashboard-view #app-container {
  min-height: 100vh; /* Stellt sicher, dass der Footer unten bleibt */
  height: auto;
}

#app-container.has-background::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--background-image-url);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.8;
  z-index: -1;
  transition: opacity 0.3s ease;
}

/* Verstecke Hintergrundbild bei Lernfeld-Ansichten KOMPLETT */
body.view-lernfeld #app-container.has-background::before,
body[data-route^="lf"] #app-container.has-background::before {
  display: none;
}

#main-header {
  background-color: var(--color-header-bg);
  color: var(--color-header-text);
  position: sticky;
  top: 0;
  /* Muss über View-internen Sticky-Leisten (z.B. E‑Akte Tabs) liegen */
  z-index: 200;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.content-wrapper {
  display: flex;
  flex-grow: 1;
  overflow: visible;
  align-items: flex-start;
}

#sidebar {
  flex-shrink: 0;
  width: 20rem;
  background-color: var(--color-surface-transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--color-border);
  /* transition wurde entfernt */
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  overflow-y: auto;
}

#sidebar.hidden {
  /* Anstatt 'transform' verwenden wir 'display' zum Ausblenden */
  display: none;
}

#content-area {
  flex-grow: 1;
  height: auto; /* Erlaubt Body-Scroll, damit Sidebar sticky bleibt */
  overflow-y: visible;
  background-color: var(--color-background);
  transition: opacity 0.2s ease-in-out;
}

/* =================================================================
   MOBILE-OPTIMIERUNG (Smartphones)
   - verhindert, dass Sidebar + Content nebeneinander "zu breit" werden
   - vermeidet iOS-Probleme mit background-attachment: fixed
   ================================================================= */
@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
  .content-wrapper {
    flex-direction: column;
    overflow: visible;
  }

  #sidebar {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    overflow-y: visible;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  #content-area {
    height: auto;
    overflow-y: visible;
  }

  body[data-route="uebersicht"],
  body[data-route=""],
  body:not([data-route]) {
    background-attachment: scroll !important;
  }

  #app-container.has-background::before {
    background-attachment: scroll !important;
  }

  /* Allgemeine Responsive-Sicherungen (Standalone-Inhalte, Tabellen, Medien) */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  pre,
  code {
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
  }

  iframe,
  embed,
  object,
  video {
    max-width: 100%;
  }

  /* Quiz-Player: Buttons/Container dürfen umbrechen statt überlaufen */
  .view-quiz-player .quiz-navigation {
    flex-wrap: wrap;
  }

  .view-quiz-player .question-container {
    min-height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
}

/* Spezifische Ansichten mit transparentem Hintergrund (für Hintergrundbild) */
.view-dashboard #content-area,
.view-wissenscheck #content-area,
.view-mediathek #content-area,
.view-laws #content-area,
.view-kategorie #content-area,
.view-gemeinde #content-area,
.view-archiv #content-area,
.view-gemeinderat-sitzungen #content-area {
  background-color: transparent !important;
}

/* Dashboard Header & Footer Override: KEINE Transparenz, sattes Rot */
body.dashboard-view #main-header,
body.view-dashboard #main-header {
  background-color: #ff3b30 !important; /* Apple Red Solid */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none;
}

body.dashboard-view #app-footer,
body.view-dashboard #app-footer {
  background-color: #ff3b30 !important; /* Apple Red Solid */
  color: white;
}

/* =================================================================
   WISSENSQUIZ-ARENA: Transparente Elemente für Hintergrundbild
   ================================================================= */

/* Content-Area transparent für Wissensquiz-Views */
.view-wissensquiz #content-area,
.view-quiz-hub #content-area,
.view-quiz-player #content-area {
  background-color: transparent !important;
}

/* Hero-Header Texte weiß mit schwarzem Schatten */
.view-quiz-hub .hero-section h1,
.view-quiz-hub .hero-section p,
.view-wissensquiz .hero-section h1,
.view-wissensquiz .hero-section p {
  color: #ffffff !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
}

/* Section-Header weiß mit schwarzem Schatten */
.view-quiz-hub h2,
.view-wissensquiz h2 {
  color: #ffffff !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
}

/* Stat-Cards mit mehr Transparenz (65% opak statt 70%) */
.view-quiz-hub .stat-card,
.view-wissensquiz .stat-card {
  background-color: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(10px);
}

/* Mode-Cards mit mehr Transparenz (70% opak statt 75%) */
.view-quiz-hub .mode-card,
.view-wissensquiz .mode-card {
  background-color: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px);
}

/* Subject-Cards (Fachgebiete) mit mehr Transparenz (80% opak statt 85%) */
.view-quiz-hub .subject-card,
.view-wissensquiz .subject-card {
  background-color: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(8px);
}

/* Quiz-Header transparent (80% opak statt 85%) */
.view-quiz-player .quiz-header {
  background-color: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(10px);
}

/* Question-Container transparent (80% opak statt 85%) */
.view-quiz-player .question-container {
  background-color: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(10px);
}

/* Info-Banner: Gleicher Stil wie Subject-Cards */
.view-quiz-hub .info-banner {
  background-color: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(8px);
  border: 2px solid rgba(203, 213, 225, 0.5) !important;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Info-Banner: Icon-Farbe anpassen */
.view-quiz-hub .info-banner .fas {
  color: #3b82f6 !important;
}

/* Info-Banner: Schwarze Schrift (wie Subject-Cards) */
.view-quiz-hub .info-banner h3,
.view-quiz-hub .info-banner li,
.view-quiz-hub .info-banner p {
  color: #1e293b !important;
  text-shadow: none !important;
}

/* =================================================================
   AUTO-SAVE & QUIZ-BEENDEN FEATURES
   ================================================================= */

/* Auto-Save Indikator Animation */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Auto-Save Indikator Styling */
.autosave-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #10b981;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10000;
  animation: slideIn 0.3s ease-out;
}

/* Quiz-Beenden-Button Styling */
.btn-warning {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: white !important;
  font-weight: 600;
}

.btn-warning:hover {
  background: #d97706 !important;
  border-color: #d97706 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* =================================================================
   TABLET-OPTIMIERUNG (iPad, Android Tablets)
   ================================================================= */

/* Tablets: 768px - 1024px (iPad, Android Tablets) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  body {
    zoom: 0.85; /* 85% Skalierung für Tablets */
  }

  /* Alternative: transform (falls zoom nicht unterstützt) */
  #app-container {
    transform: scale(0.85);
    transform-origin: top center;
  }
}

/* Touch-Optimierung für Drag & Drop */
@media (hover: none) and (pointer: coarse) {
  .sortable-item,
  .draggable-item {
    touch-action: none; /* Verhindert Scrollen beim Drag */
    user-select: none;
  }

  .sortable-item:active,
  .draggable-item:active {
    cursor: grabbing !important;
    opacity: 0.5;
    transform: scale(1.05);
    z-index: 1000;
  }
}

/* Action Buttons bleiben undurchsichtig für bessere Lesbarkeit */
.view-quiz-hub .quick-actions button,
.view-quiz-player .action-buttons button {
  backdrop-filter: blur(8px);
}

/* Content-Area Smooth Transitions */
#content-area.transitioning {
  opacity: 0.95;
}

/* =================================================================
   4. Header-Inhalte (Top-Bar, Navigation, Dropdowns)
   ================================================================= */
#main-header .top-bar h1,
#main-header .top-bar p {
  color: var(--color-header-text);
}

.main-nav-bar .nav-button {
  color: var(--color-header-text);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
  text-decoration: none;
  border: none;
  cursor: pointer;
  background: none;
}

.main-nav-bar .nav-button:hover {
  background-color: transparent;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
  transform: scale(1.05);
}

#user-actions .nav-button {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  white-space: nowrap;
}

#user-actions .nav-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.dropdown-content {
  position: absolute;
  left: 0;
  margin-top: 0.5rem;
  width: 18rem;
  background-color: white;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 0.25rem 0;
  z-index: 120;
  display: none;
}

.nav-dropdown {
  overflow: visible;
}

.nav-dropdown.is-open .dropdown-content {
  display: block;
}

.dropdown-item {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #374151;
  white-space: normal;
  line-height: 1.4;
  text-decoration: none;
}

.dropdown-item:hover {
  background-color: #f3f4f6;
}

.dropdown-header {
  font-weight: bold;
  color: #0ea5e9;
}

/* Block 1: Positionierung des Dropdowns */
#search-results-container {
  position: absolute;
  width: 100%;
  top: 100%; /* Beginnt direkt unter dem Elternelement (dem Suchfeld-Wrapper) */
  margin-top: 0.5rem; /* Ein kleiner Abstand nach unten */
  z-index: 60; /* Stellt sicher, dass es über anderen Elementen liegt */
  /* Maximal ~5 Treffer sichtbar, Rest scrollbar */
  max-height: 23.75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Block 2: Das "Google-Look & Feel" für die Ergebnisliste */
#search-results-container ul {
  list-style: none; /* Entfernt die Aufzählungspunkte */
  margin: 0;
  padding: 0.5rem; /* Innenabstand für die Treffer */
  background-color: var(--color-surface); /* Weißer Hintergrund */
  border-radius: 0.75rem; /* Abgerundete Ecken */
  border: 1px solid var(--color-border); /* Dezenter Rahmen */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Weicher Schatten für den Schwebe-Effekt */
}

/* =================================================================
   SUCHLEISTE - Textfarbe erzwingen (FIX für weiße/transparente Schrift)
   ================================================================= */
#global-search-input {
  color: #1e293b !important;
  background-color: #ffffff !important;
}

#global-search-input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

/* Stelle sicher, dass die Suchleiste in ALLEN Views dunkel bleibt */
body[data-route="dashboard"] #global-search-input,
body[data-route="lernfeld"] #global-search-input,
body[data-route^="lf"] #global-search-input,
body:not([data-route]) #global-search-input {
  color: #1e293b !important;
  background-color: #ffffff !important;
}

/* =================================================================
   5. Sidebar-Inhalte
   ================================================================= */
/* In style/main.css hinzufügen */

/* Sidebar-Header: etwas mehr Luft nach oben (nicht gequetscht) */
#sidebar-header {
  padding-top: 0.75rem;
}

#sidebar-title {
  font-size: 1.25rem;
  font-weight: 600;
}

#sidebar-nav {
  padding: 0.75rem 0.75rem 8rem 0.75rem; /* Extra Platz am Ende für besseres Scrollen */
}

.sidebar-back-button-wrapper {
  padding: 0.75rem 0.75rem 1rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}

.sidebar-back-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: white;
  background-color: var(--color-accent);
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.3);
}

.sidebar-back-button:hover {
  background-color: #0077ed;
  transform: scale(1.02);
}

.sidebar-group summary {
  list-style: none;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.sidebar-group summary:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.sidebar-group summary::-webkit-details-marker {
  display: none;
}

.sidebar-list {
  list-style: none;
  padding: 0.25rem 0 0.5rem 1rem;
  margin-left: 0.5rem;
  border-left: 1px solid var(--color-border);
}

.sidebar-link {
  display: block;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  transition: all 0.2s;
}

.sidebar-link:hover {
  color: var(--color-text-primary);
  background-color: rgba(0, 0, 0, 0.03);
}

.sidebar-link.active {
  color: var(--color-accent);
  font-weight: 600;
  background-color: rgba(0, 113, 227, 0.1);
}

/* =================================================================
   6. Hauptinhalts-Styling (Lernfelder, Prose, etc.)
   ================================================================= */
.lernfeld-content-box {
  background-color: var(--color-surface);
  padding: 0.9rem 3rem 3rem;
  border-radius: 18px;
  box-shadow: var(--shadow-apple);
  /* Nimmt die Mindesthöhe des Containers ein, um Navigation am Ende zu positionieren */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  opacity: 1;
  transition: opacity 300ms ease-in-out;
}

@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
  .lernfeld-content-box {
    padding: 0.85rem 1.25rem 2rem;
  }
}

/* =================================================================
   6a. Theme: Staatsrecht & Grundgesetz (scoped)
   ================================================================= */
.theme-sgg {
  --sgg-accent: #4f46e5; /* indigo-600 */
  --sgg-accent-strong: #4338ca; /* indigo-700 */
  --sgg-tint: rgba(79, 70, 229, 0.12);
  --sgg-tint-strong: rgba(124, 58, 237, 0.16);
}

.theme-sgg .lernfeld-content-box,
.lernfeld-content-box.theme-sgg {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(238, 242, 255, 0.9) 100%
  );
  border: 1px solid var(--sgg-tint);
}

.theme-sgg .prose a,
.lernfeld-content-box.theme-sgg .prose a {
  color: var(--sgg-accent);
}

.theme-sgg .prose a:hover,
.lernfeld-content-box.theme-sgg .prose a:hover {
  color: var(--sgg-accent-strong);
}

.theme-sgg .prose h2,
.theme-sgg .prose h3,
.lernfeld-content-box.theme-sgg .prose h2,
.lernfeld-content-box.theme-sgg .prose h3 {
  position: relative;
  padding-left: 0.9rem;
}

.theme-sgg .prose h2::before,
.theme-sgg .prose h3::before,
.lernfeld-content-box.theme-sgg .prose h2::before,
.lernfeld-content-box.theme-sgg .prose h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sgg-accent) 0%, #7c3aed 100%);
}

/* Pop: Lernboxen/Callouts */
.theme-sgg .key-concept-container,
.lernfeld-content-box.theme-sgg .key-concept-container {
  background: linear-gradient(
    135deg,
    rgba(238, 242, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.95) 70%
  );
  border-left-color: var(--sgg-accent);
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.12);
}

.theme-sgg .summary-box-container,
.lernfeld-content-box.theme-sgg .summary-box-container {
  background: linear-gradient(
    135deg,
    rgba(219, 234, 254, 0.9) 0%,
    rgba(255, 255, 255, 0.9) 70%
  );
  border-left-color: #2563eb; /* blue-600 */
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.1);
}

.theme-sgg .pitfall-box-container,
.lernfeld-content-box.theme-sgg .pitfall-box-container {
  background: linear-gradient(
    135deg,
    rgba(254, 226, 226, 0.9) 0%,
    rgba(255, 255, 255, 0.9) 70%
  );
  border-left-color: #ef4444; /* red-500 */
  box-shadow: 0 10px 22px rgba(239, 68, 68, 0.1);
}

.theme-sgg .example-box,
.lernfeld-content-box.theme-sgg .example-box {
  background: linear-gradient(
    135deg,
    rgba(254, 243, 199, 0.9) 0%,
    rgba(255, 255, 255, 0.9) 70%
  );
  border-color: rgba(245, 158, 11, 0.55); /* amber-500 */
  box-shadow: 0 10px 22px rgba(245, 158, 11, 0.1);
}

.theme-sgg .law-box-container,
.lernfeld-content-box.theme-sgg .law-box-container {
  box-shadow: 0 10px 22px rgba(2, 132, 199, 0.1);
  border-radius: 16px;
}

.theme-sgg .info-box,
.lernfeld-content-box.theme-sgg .info-box {
  box-shadow: 0 10px 22px rgba(99, 102, 241, 0.08);
  border-radius: 16px;
}

/* Pop: Vergleichskarten */
.theme-sgg .visual-comparison-container .comparison-item,
.lernfeld-content-box.theme-sgg .visual-comparison-container .comparison-item {
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}

/* Pop: MC-Container subtil akzentuieren */
.theme-sgg .multiple-choice-container,
.lernfeld-content-box.theme-sgg .multiple-choice-container {
  border-color: rgba(79, 70, 229, 0.3);
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.08);
}

.prose {
  flex-grow: 1; /* Sorgt dafür, dass der Inhalt wächst und die Navigation nach unten drückt */
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose p,
.prose li {
  color: var(--color-text-primary);
}

.prose a {
  color: var(--color-accent);
}

/* Verhindere Layout-Shift beim Kapitel-Wechsel */
.lernfeld-content {
  min-height: 60vh;
}

/* =================================================================
   7. Dashboard-spezifische Regeln
   ================================================================= */
.dashboard-view #content-area > #titelbild-hero {
  margin-top: 0;
}

.dashboard-view #content-area > .mx-4 {
  margin-top: 3rem;
}

.dashboard-view #app-footer > div {
  background-color: var(--color-header-bg);
}

/* =================================================================
   8. Modale (Law, Quiz) - PDF-Modal entfernt
   ================================================================= */
.quiz-modal-overlay,
.law-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.q-wrap,
.law-modal-content {
  width: 100%;
  max-width: 960px;
  height: 85vh;
  max-height: 700px;
  background-color: var(--color-background);
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* =================================================================
   9. Mediathek (Spotify Style)
   ================================================================= */
.mediathek-container {
  display: flex;
  height: 100%;
  flex-direction: column;
  background-color: #121212; /* Spotify Dark Background */
  color: #ffffff;
}

.mediathek-sidebar {
  flex-shrink: 0;
  background-color: #000000;
  padding: 1.5rem;
  overflow-y: auto;
  border-right: 1px solid #282828;
}

.mediathek-main {
  flex-grow: 1;
  padding: 2rem;
  overflow-y: auto;
  background: linear-gradient(180deg, #2a2a2a 0%, #121212 100%);
}

@media (min-width: 768px) {
  .mediathek-container {
    flex-direction: row;
  }
  .mediathek-sidebar {
    width: 320px;
  }
}

.mediathek-nav-link {
  display: block;
  padding: 0.75rem 1rem;
  color: #b3b3b3;
  border-radius: 4px;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.mediathek-nav-link:hover {
  color: #ffffff;
  background-color: #282828;
}

.mediathek-nav-link.active {
  background-color: #282828;
  color: #1db954; /* Spotify Green */
  font-weight: 700;
}

.video-list-item {
  background-color: #181818;
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  border: none;
  transition: background-color 0.3s ease;
}

.video-list-item:hover {
  background-color: #282828;
}

.video-list-item h3 {
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.video-list-item p {
  color: #b3b3b3;
}

.video-item-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .video-list-item {
    flex-direction: row;
    align-items: center;
  }
  .video-item-actions {
    margin-top: 0;
  }
}

.action-btn-play,
.action-btn-download {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.2s;
  border: none;
  cursor: pointer;
}

.action-btn-play {
  background-color: var(--color-accent);
  color: white;
}
.action-btn-play:hover {
  background-color: #0284c7;
}
.action-btn-download {
  background-color: var(--color-border);
  color: var(--color-text-secondary);
}
.action-btn-download:hover {
  background-color: #cbd5e1;
}

/* =================================================================
   10. Keywords & Responsive Anpassungen
   ================================================================= */
.keyword-link {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 2px solid #93c5fd; /* blue-300 */
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.keyword-link:hover {
  background-color: transparent !important;
  border-bottom-color: #2563eb; /* blue-600 */
}

@media (max-width: 1024px) {
  #orgchart-mount .text-sm {
    font-size: 0.8rem;
  }
  #orgchart-mount .p-4 {
    padding: 0.75rem;
  }
}
/* In style/main.css, ganz am Ende hinzufügen */

/* =================================================================
   12. KORREKTUR für Gesetze-Karten
   ================================================================= */

.law-card {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.3);
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.law-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Stellt sicher, dass der Text IN den Karten immer dunkel und lesbar ist */
.law-card h3,
.law-card p {
  color: #1e293b;
}

/* =================================================================
   13. Übergangs-Animationen (Fades) - REPARIERT
/* Sanfte Übergänge für Lernfeld-Content */

/* Fade-Out Animation während des Wechsels */
.lernfeld-content-box.is-transitioning {
  opacity: 0;
}

/* Fade-In Animation nach dem Laden */
.lernfeld-content-box.fade-in {
  animation: fadeInContent 300ms ease-in-out forwards;
}

@keyframes fadeInContent {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Sanfte Übergänge für Content-Area allgemein */

#content-area.loading {
  opacity: 0.7;
}

/* Definiert die Animation für das Einblenden */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Definiert die Animation für das Ausblenden */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* =================================================================
   14. Info Card Styling - Goldstandard Farben durchsetzen
   ================================================================= */

/* Stellt sicher, dass die JSON-Farbwerte (style-Attribute) in info_card-Komponenten 
   Vorrang vor anderen CSS-Regeln haben */
.info-card,
[data-component="info-card"],
.info_card {
  /* Basis-Styling für info_card */
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
  border-width: 1px;
  border-style: solid;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* Überschreibt alle anderen Farbregeln - Goldstandard durchsetzen */
.info-card[style*="backgroundColor"],
[data-component="info-card"][style*="backgroundColor"],
.info_card[style*="backgroundColor"],
/* Erweitert für verschachtelte Content-Strukturen */
.content-item .info-card[style*="backgroundColor"],
.section-content .info-card[style*="backgroundColor"],
div[data-type="info_card"][style*="backgroundColor"] {
  /* Die Inline-Styles aus JSON haben höchste Priorität */
  background-color: var(--info-card-bg, #ecfdf5) !important;
  border-color: var(--info-card-border, #10b981) !important;
}

/* Fallback für info_cards ohne explizite Farben - nutzt Goldstandard */
.info-card:not([style*="backgroundColor"]),
[data-component="info-card"]:not([style*="backgroundColor"]),
.info_card:not([style*="backgroundColor"]),
/* Erweitert für alle verschachtelten Strukturen */
.content-item .info-card:not([style*="backgroundColor"]),
.section-content .info-card:not([style*="backgroundColor"]),
div[data-type="info_card"]:not([style*="backgroundColor"]),
/* Sehr spezifische Selektoren für hartnäckige Cases */
.lf-content .info-card,
.chapter-content .info-card,
*[class*="info"] {
  background-color: #ecfdf5 !important;
  border-color: #10b981 !important;
}

/* Stellt sicher, dass Text in info_cards immer lesbar ist */
.info-card h1,
.info-card h2,
.info-card h3,
.info-card h4,
.info-card h5,
.info-card h6,
.info-card p,
.info-card div,
.info-card span,
[data-component="info-card"] h1,
[data-component="info-card"] h2,
[data-component="info-card"] h3,
[data-component="info-card"] h4,
[data-component="info-card"] h5,
[data-component="info-card"] h6,
[data-component="info-card"] p,
[data-component="info-card"] div,
[data-component="info-card"] span,
.info_card h1,
.info_card h2,
.info_card h3,
.info_card h4,
.info_card h5,
.info_card h6,
.info_card p,
.info_card div,
.info_card span {
  color: #1e293b !important; /* Dunkler Text für bessere Lesbarkeit */
}

/* =================================================================
   NOTFALL-OVERRIDE: Ersetzt ALLE blauen info_card Styles
   ================================================================= */

/* Überschreibt jede mögliche blaue Farbkombination */
*[class*="info"],
*[data-type*="info"],
*[data-component*="info"],
div:has(.info-card),
.info-card,
.info_card {
  /* Überschreibt bekannte problematische Farbkombinationen */
  background-color: #ecfdf5 !important;
  border-color: #10b981 !important;
  border-width: 1px !important;
  border-style: solid !important;
}

/* Spezifische Überschreibung für LF19 Baurecht */
*[class*="baurecht"] .info-card,
*[id*="lf19"] .info-card,
*[id*="baurecht"] .info-card {
  background-color: #ecfdf5 !important;
  border-color: #10b981 !important;
}

/* Überschreibt alle dunkelblauen Hintergründe (#334155, #1e293b, etc.) */
*[style*="#334155"],
*[style*="#1e293b"],
*[style*="#475569"],
*[style*="rgb(51, 65, 85)"],
*[style*="rgb(30, 41, 59)"] {
  background-color: #ecfdf5 !important;
  border-color: #10b981 !important;
}

/* =================================================================
   15. Modale (Welcome, Login)
   ================================================================= */

/* Welcome Modal */
#welcome-modal {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 50;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Login Modal */
/* Login Modal */
#login-modal {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 50;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Smooth Navigation Buttons */
.nav-button {
  transition: all 0.2s ease-in-out;
}

/* Gesetzestext-Modal Styling */
.law-ref {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.15);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

.law-ref:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Law-Ref auf hellem Hintergrund (Standard) */
.bg-white .law-ref,
.bg-slate-50 .law-ref,
.bg-gray-50 .law-ref,
[class*="bg-white"] .law-ref {
  color: #0ea5e9;
  background-color: rgba(14, 165, 233, 0.08);
  border-bottom-color: #0ea5e9;
}

.bg-white .law-ref:hover,
.bg-slate-50 .law-ref:hover,
.bg-gray-50 .law-ref:hover,
[class*="bg-white"] .law-ref:hover {
  background-color: rgba(14, 165, 233, 0.15);
}

/* Law-Ref auf dunklen/farbigen Hintergründen - weiß statt gelb */
[class*="bg-gradient"] .law-ref,
[class*="bg-indigo"] .law-ref,
[class*="bg-violet"] .law-ref,
[class*="bg-blue-6"] .law-ref,
[class*="bg-blue-7"] .law-ref,
[class*="bg-slate-8"] .law-ref,
[class*="bg-slate-9"] .law-ref {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.15);
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

[class*="bg-gradient"] .law-ref:hover,
[class*="bg-indigo"] .law-ref:hover,
[class*="bg-violet"] .law-ref:hover,
[class*="bg-blue-6"] .law-ref:hover,
[class*="bg-blue-7"] .law-ref:hover,
[class*="bg-slate-8"] .law-ref:hover,
[class*="bg-slate-9"] .law-ref:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

/* SGG: Law-Refs gut lesbar (schwarz + leichtes Blau) */
.theme-sgg .law-ref,
.lernfeld-content-box.theme-sgg .law-ref {
  color: #0f172a;
  background-color: rgba(14, 165, 233, 0.1);
  border-bottom-color: rgba(14, 165, 233, 0.55);
}

.theme-sgg .law-ref:hover,
.lernfeld-content-box.theme-sgg .law-ref:hover {
  background-color: rgba(14, 165, 233, 0.16);
}

/* SGG: Auf wirklich dunklen/farbigen Flächen wieder weiß */
.theme-sgg [class*="bg-gradient"] .law-ref,
.theme-sgg [class*="bg-indigo"] .law-ref,
.theme-sgg [class*="bg-violet"] .law-ref,
.theme-sgg [class*="bg-blue-6"] .law-ref,
.theme-sgg [class*="bg-blue-7"] .law-ref,
.theme-sgg [class*="bg-slate-8"] .law-ref,
.theme-sgg [class*="bg-slate-9"] .law-ref,
.lernfeld-content-box.theme-sgg [class*="bg-gradient"] .law-ref,
.lernfeld-content-box.theme-sgg [class*="bg-indigo"] .law-ref,
.lernfeld-content-box.theme-sgg [class*="bg-violet"] .law-ref,
.lernfeld-content-box.theme-sgg [class*="bg-blue-6"] .law-ref,
.lernfeld-content-box.theme-sgg [class*="bg-blue-7"] .law-ref,
.lernfeld-content-box.theme-sgg [class*="bg-slate-8"] .law-ref,
.lernfeld-content-box.theme-sgg [class*="bg-slate-9"] .law-ref {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.15);
  border-bottom-color: rgba(255, 255, 255, 0.7);
}

.theme-sgg [class*="bg-gradient"] .law-ref:hover,
.theme-sgg [class*="bg-indigo"] .law-ref:hover,
.theme-sgg [class*="bg-violet"] .law-ref:hover,
.theme-sgg [class*="bg-blue-6"] .law-ref:hover,
.theme-sgg [class*="bg-blue-7"] .law-ref:hover,
.theme-sgg [class*="bg-slate-8"] .law-ref:hover,
.theme-sgg [class*="bg-slate-9"] .law-ref:hover,
.lernfeld-content-box.theme-sgg [class*="bg-gradient"] .law-ref:hover,
.lernfeld-content-box.theme-sgg [class*="bg-indigo"] .law-ref:hover,
.lernfeld-content-box.theme-sgg [class*="bg-violet"] .law-ref:hover,
.lernfeld-content-box.theme-sgg [class*="bg-blue-6"] .law-ref:hover,
.lernfeld-content-box.theme-sgg [class*="bg-blue-7"] .law-ref:hover,
.lernfeld-content-box.theme-sgg [class*="bg-slate-8"] .law-ref:hover,
.lernfeld-content-box.theme-sgg [class*="bg-slate-9"] .law-ref:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

/* SGG: ...aber in weißen/hellen Cards innerhalb von Gradients wieder dunkel (Fix für „weiß auf weiß“) */
.theme-sgg [class*="bg-gradient"] [class*="bg-white"] .law-ref,
.theme-sgg [class*="bg-indigo"] [class*="bg-white"] .law-ref,
.theme-sgg [class*="bg-violet"] [class*="bg-white"] .law-ref,
.theme-sgg [class*="bg-blue-6"] [class*="bg-white"] .law-ref,
.theme-sgg [class*="bg-blue-7"] [class*="bg-white"] .law-ref,
.theme-sgg [class*="bg-slate-8"] [class*="bg-white"] .law-ref,
.theme-sgg [class*="bg-slate-9"] [class*="bg-white"] .law-ref,
.lernfeld-content-box.theme-sgg
  [class*="bg-gradient"]
  [class*="bg-white"]
  .law-ref,
.lernfeld-content-box.theme-sgg
  [class*="bg-indigo"]
  [class*="bg-white"]
  .law-ref,
.lernfeld-content-box.theme-sgg
  [class*="bg-violet"]
  [class*="bg-white"]
  .law-ref,
.lernfeld-content-box.theme-sgg
  [class*="bg-blue-6"]
  [class*="bg-white"]
  .law-ref,
.lernfeld-content-box.theme-sgg
  [class*="bg-blue-7"]
  [class*="bg-white"]
  .law-ref,
.lernfeld-content-box.theme-sgg
  [class*="bg-slate-8"]
  [class*="bg-white"]
  .law-ref,
.lernfeld-content-box.theme-sgg
  [class*="bg-slate-9"]
  [class*="bg-white"]
  .law-ref {
  color: #0f172a;
  background-color: rgba(14, 165, 233, 0.1);
  border-bottom-color: rgba(14, 165, 233, 0.55);
}

.theme-sgg [class*="bg-gradient"] [class*="bg-white"] .law-ref:hover,
.theme-sgg [class*="bg-indigo"] [class*="bg-white"] .law-ref:hover,
.theme-sgg [class*="bg-violet"] [class*="bg-white"] .law-ref:hover,
.theme-sgg [class*="bg-blue-6"] [class*="bg-white"] .law-ref:hover,
.theme-sgg [class*="bg-blue-7"] [class*="bg-white"] .law-ref:hover,
.theme-sgg [class*="bg-slate-8"] [class*="bg-white"] .law-ref:hover,
.theme-sgg [class*="bg-slate-9"] [class*="bg-white"] .law-ref:hover,
.lernfeld-content-box.theme-sgg
  [class*="bg-gradient"]
  [class*="bg-white"]
  .law-ref:hover,
.lernfeld-content-box.theme-sgg
  [class*="bg-indigo"]
  [class*="bg-white"]
  .law-ref:hover,
.lernfeld-content-box.theme-sgg
  [class*="bg-violet"]
  [class*="bg-white"]
  .law-ref:hover,
.lernfeld-content-box.theme-sgg
  [class*="bg-blue-6"]
  [class*="bg-white"]
  .law-ref:hover,
.lernfeld-content-box.theme-sgg
  [class*="bg-blue-7"]
  [class*="bg-white"]
  .law-ref:hover,
.lernfeld-content-box.theme-sgg
  [class*="bg-slate-8"]
  [class*="bg-white"]
  .law-ref:hover,
.lernfeld-content-box.theme-sgg
  [class*="bg-slate-9"]
  [class*="bg-white"]
  .law-ref:hover {
  background-color: rgba(14, 165, 233, 0.16);
}

.law-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.law-modal-content {
  background-color: white;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.law-modal-header {
  padding: 1rem;
  background-color: var(--color-header-bg);
  color: var(--color-text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.law-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex-grow: 1;
}

.law-modal-close {
  /* Tailwind classes handle the styling now */
  background: white;
  border: none;
  color: #1e293b;
  font-size: 1.25rem;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  z-index: 60;
}

.law-modal-close:hover {
  background-color: #f1f5f9;
  transform: scale(1.1);
}

/* =================================================================
   16. PRÄSENTATIONEN - White Background Styling
   ================================================================= */

/* White background for Präsentationen-View */
.view-praesentationen body {
  background: #ffffff !important;
  background-image: none !important;
}

/* Content-Area transparent für Präsentationen */
.view-praesentationen #content-area {
  background: transparent !important;
}

/* App-Container White Background for Präsentationen */
.view-praesentationen #app-container {
  background: #ffffff !important;
  background-image: none !important;
}

/* Stelle sicher, dass Präsentationen-View keinen anderen Hintergrund hat */
.view-praesentationen #app-container.has-background::before {
  display: none !important;
}

/* Generic Fade In for Tools */
.fade-in {
  animation: fadeInContent 0.5s ease-out forwards;
}
/* Erklärbär Styles */
#erklaerbaer-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.eb-avatar {
  width: 70px;
  height: 70px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  border: 3px solid #3b82f6; /* Tailwind blue-500 */
  position: relative;
  transition: transform 0.2s ease;
  overflow: hidden;
  padding: 5px;
}

.eb-avatar:hover {
  transform: scale(1.1);
}

.eb-avatar img {
  width: 100%;
  height: 100%;
}

.eb-close-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: none; /* Nur zeigen wenn man will */
}

.eb-bubble {
  background: white;
  padding: 15px 20px;
  border-radius: 15px 15px 0 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  margin-bottom: 15px;
  max-width: 300px;
  position: relative;
  transition: all 0.3s ease;
  border-left: 4px solid #3b82f6;
}

.eb-bubble h4 {
  margin: 0 0 8px 0;
  color: #1e293b;
  font-weight: 700;
  font-size: 1rem;
}

.eb-bubble p {
  margin: 0;
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.5;
}

.eb-arrow {
  position: absolute;
  bottom: -10px;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
}

/* Puls-Animation bei Textwechsel */
@keyframes ebPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.eb-pulse {
  animation: ebPulse 0.3s ease-in-out;
}

/* --- Meine Akte (E-Akte) mobile tweaks --- */
body[data-route="meine-akte"] .meine-akte-view {
  max-width: none;
  margin: 0;
}

body[data-route="meine-akte"] .meine-akte-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.9),
    rgba(14, 165, 233, 0.9)
  );
}

body[data-route="meine-akte"] .meine-akte-nav button {
  color: #e2e8f0;
}

body[data-route="meine-akte"] .meine-akte-nav button[aria-current="true"],
body[data-route="meine-akte"] .meine-akte-nav button.bg-black,
body[data-route="meine-akte"] .meine-akte-nav button.bg-opacity-25 {
  color: #fff;
}

body[data-route="meine-akte"] .meine-akte-header {
  background: linear-gradient(135deg, #0f172a, #0ea5e9);
  color: #e2e8f0;
}

body[data-route="meine-akte"] .meine-akte-mobile-menu {
  background: #0f172a;
  color: #e2e8f0;
}

/* --- Globale Mobile-Skalierung (~80-90%) --- */
@media (max-width: 1180px) {
  #app-container {
    position: relative;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    transform-origin: top center;
    width: 100%;
    max-width: 1200px;
  }
}

@media (max-width: 920px) {
  #app-container {
    position: relative;
    left: 50%;
    transform: translateX(-50%) scale(0.84);
    transform-origin: top center;
    width: 100%;
    max-width: 1200px;
  }
}

/* Verhindere Doppel-Skalierung der Meine-Akte-View, wenn global skaliert wird */
@media (max-width: 1180px) {
  body[data-route="meine-akte"] .meine-akte-view {
    transform: none;
  }
}

@media (max-width: 920px) {
  body[data-route="meine-akte"] .meine-akte-view {
    transform: none;
  }
}