:root {
  --bg: #f3f5fa;
  --surface: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --primary: #2563eb;
  --primary-soft: #dbeafe;
  --border: #e5e7eb;
  --theme-bg: #f3f5fa;
  --theme-surface: #ffffff;
  --theme-text: #1f2937;
  --theme-muted: #6b7280;
  --theme-primary: #2563eb;
  --theme-primary-soft: #dbeafe;
  --theme-border: #e5e7eb;
  --theme-control-bg: #ffffff;
  --theme-nav-bg: #f3f5fa;
  --theme-nav-text: #000000;
  --theme-nav-hover: #ffc68d;
  --theme-nav-active: #b9e3fd;
  --theme-hero-overlay-start: #0f172a;
  --theme-hero-overlay-end: #0f172a;
  --theme-intro-night: #050814;
  --theme-intro-glow: #ffd08b;
  --theme-cloud-color: #ffffff;
  --theme-bird-color: #244563;
  /* Farbe des Glanzes (aktiver Navigationsknopf und Titel im Hero): das Leuchten des
     jeweiligen Themes. Beim Überfahren von Knöpfen kommt die Komplementärfarbe dazu
     (im Farbkreis um 180 Grad gedreht). */
  --theme-shine: var(--theme-intro-glow);
  --theme-shine-hover: var(--theme-intro-glow);
  --theme-hero-focus: center 48%;
  --theme-intro-focus: center 36%;
  --page-backdrop-image: url('landscape.svg');
}

/* Relative Farbwerte (hier: Drehung im Farbkreis) unterstuetzen nicht alle Browser; sonst
   bleibt es beim Leuchten des Themes. */
@supports (color: hsl(from red calc(h + 180) s l)) {
  :root { --theme-shine-hover: hsl(from var(--theme-intro-glow) calc(h + 180) s l); }
}

/* Mauszeiger beim Loslassen der Maus: script.js haengt fuer eine kurze Bewegung die Klasse
   theme-click-cursor an den body und setzt je Bild die Variable --theme-click-cursor-anim
   (Symbole und Zuordnung: generate_cursor_icons.py bzw. script.js). Die Regel gilt auch
   fuer alle Kinder, damit sie das cursor: pointer von Knoepfen uebersteuert. Das "auto"
   hinter dem Komma ist Pflicht: ohne abschliessendes Schluesselwort gilt die Angabe als
   ungueltig (die erste Zeile ist nur der Rueckfall, falls die Variable fehlt). */
body.theme-click-cursor, body.theme-click-cursor * { cursor: auto; cursor: var(--theme-click-cursor-anim), auto; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--theme-text);
  background: var(--theme-bg);
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.74)),
    var(--page-backdrop-image) var(--theme-hero-focus) / cover no-repeat;
  opacity: 0.65;
  filter: saturate(1.05) blur(2px);
  transform: scale(1.04);
  transition: opacity 0.35s ease;
}

.matrix-rain-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.4;
  transition: opacity 0.35s ease;
}

body[data-theme="matrix"] .matrix-rain-backdrop {
  display: block;
}

/* Themen mit gezeichneter Szene im Hero (AI 2029, Blade Duel, Water Drop)
   übertragen dieselbe Szene live in den Seitenhintergrund: script.js kopiert das Szenen-Canvas
   passgenau über das Hintergrundbild (siehe transferHeroSceneToBackdrop). Weichzeichnen und
   Abdunkeln entsprechen dem festen Hintergrundbild (.body::before), damit die Szene dahinter
   zurücktritt. */
.hero-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.6;
  filter: saturate(1.05) blur(2px);
  transform: scale(1.04);
  transition: opacity 0.35s ease;
}

body[data-theme="ki"] .hero-backdrop,
body[data-theme="klingen"] .hero-backdrop,
body[data-theme="wassertropfen"] .hero-backdrop {
  display: block;
}

/* Beim Laden wächst die Seite aus der Bildmitte langsam auf ihre endgültige Größe und wird
   dabei sichtbar. Der Ursprung ist die Mitte des sichtbaren Bereichs. */
.page-shell {
  width: min(1120px, calc(100% - 2rem));
  margin: 1.25rem auto;
  transform-origin: 50% var(--intro-reveal-origin, 50vh);
  animation: introPageGrow var(--intro-reveal-duration, 3.2s) ease-in-out 80ms both;
}

/* Ohne Intro (schon gesehen) steht die Seite sofort in ihrer endgültigen Größe. */
body.intro-skip .page-shell { animation: none; }

.matrix-rain { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
body[data-theme="matrix"] .matrix-rain { display: block; }
.matrix-rain-hero { z-index: 3; }

/* Water Drop-Theme: Tropfen, Spritzer und Wellen zeichnet script.js auf dieses Canvas. */
.water-scene { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
body[data-theme="wassertropfen"] .water-scene { display: block; }

/* AI 2029: Maschine, Soldaten, Schuesse und Explosionen zeichnet script.js auf dieses Canvas. */
.ki-scene { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
body[data-theme="ki"] .ki-scene { display: block; }

/* Blade Duel: der Kampf (Roben, Lichtklingen, Blitze, Kräfte) läuft in script.js. */
.klingen-scene { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
body[data-theme="klingen"] .klingen-scene { display: block; }

/* Ring Portal-Theme: Ereignishorizont, Chevrons, Palmkronen, Tiere, Sand weht. */
.sternentor-scene { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
body[data-theme="sternentor"] .sternentor-scene { display: block; }

/* Der Hero wird live in den Seitenhintergrund übertragen: dasselbe Bild wie im Hero,
   nur weichgezeichnet und abgedunkelt. */
.sternentor-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.65;
  filter: saturate(1.05) blur(2px);
  transform: scale(1.04);
  transition: opacity 0.35s ease;
}
body[data-theme="sternentor"] .sternentor-backdrop { display: block; }

@keyframes introPageGrow {
  0% { opacity: 0; transform: scale(0.62); filter: blur(8px); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* Oben rechts: Klang-Schalter links, Sprachauswahl rechts – beide so hoch wie die Knöpfe links
   oben (Theme/Intro). Die Höhe steckt in --hero-control-height, damit sie zusammenpasst. */
.hero-top-right { position: absolute; top: 0.85rem; right: 0.85rem; z-index: 20; display: flex; flex-direction: row; align-items: center; gap: 0.5rem; --hero-control-height: 1.82rem; }
.language-switch { display: flex; align-items: center; gap: 0.25rem; height: var(--hero-control-height); padding: 0 0.4rem; background: var(--theme-control-bg); border: 1px solid var(--theme-border); border-radius: 999px; box-shadow: 0 8px 20px rgb(15 23 42 / 14%); }
/* Klang-Schalter: Zeigt die Schallwellen, solange die Hintergrundmusik läuft, und das
   Lautlos-Zeichen, wenn sie abgeschaltet ist (aria-pressed steuert die Anzeige). */
.sound-toggle { height: var(--hero-control-height); min-width: 2.1rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.5rem; border: 1px solid var(--theme-border); border-radius: 999px; background: var(--theme-control-bg); color: var(--theme-nav-text); cursor: pointer; box-shadow: 0 8px 20px rgb(15 23 42 / 14%); }
.sound-toggle:hover { background: color-mix(in srgb, var(--theme-nav-hover) 65%, white); border-color: var(--theme-primary); }
.sound-icon { width: 1rem; height: 1rem; display: block; }
.sound-speaker { fill: currentColor; }
.sound-waves, .sound-slash { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.sound-toggle[aria-pressed="false"] .sound-waves { display: none; }
.sound-toggle[aria-pressed="true"] .sound-slash { display: none; }
.intro-replay-wrap { position: absolute; top: 0.85rem; left: 0.85rem; z-index: 20; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.intro-replay-btn { border: 1px solid var(--theme-border); background: var(--theme-control-bg); color: var(--theme-nav-text); border-radius: 999px; padding: 0.36rem 0.72rem; font-size: 0.85rem; cursor: pointer; box-shadow: 0 8px 20px rgb(15 23 42 / 14%); }
.intro-replay-btn:hover { background: color-mix(in srgb, var(--theme-nav-hover) 65%, white); border-color: var(--theme-primary); color: var(--theme-nav-text); }
.theme-chooser-wrap { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; --theme-chooser-width: 10rem; }
.theme-chooser-btn { min-width: var(--theme-chooser-width); text-align: left; }
/* Die Auswahl liegt als Liste unter dem Knopf und darf über den Hero hinausragen: nur der
   Bildkasten (.hero-media) wird beschnitten. Die Breite richtet sich nach dem längsten
   Theme-Namen (max-content), mindestens so breit wie der Knopf. */
.theme-chooser-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 30;
  width: max-content;
  min-width: var(--theme-chooser-width);
  max-width: min(22rem, calc(100vw - 1.6rem));
  max-height: min(72vh, 33rem);
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--theme-border);
  border-radius: 14px;
  background: var(--theme-control-bg);
  box-shadow: 0 14px 32px rgb(15 23 42 / 18%);
  backdrop-filter: blur(8px);
}
.theme-chooser-title { margin: 0.15rem 0 0.45rem; padding: 0 0.5rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--theme-muted); white-space: nowrap; }
.theme-choice-list { display: grid; gap: 0.15rem; }
.theme-choice-btn { display: flex; align-items: center; gap: 0.5rem; width: 100%; border: 1px solid transparent; border-radius: 10px; padding: 0.32rem 0.5rem; background: transparent; color: var(--theme-text); font: inherit; font-size: 0.9rem; text-align: left; white-space: nowrap; cursor: pointer; }
.theme-choice-btn:hover { background: color-mix(in srgb, var(--theme-nav-hover) 55%, white); border-color: var(--theme-primary); }
.theme-choice-btn.active { background: var(--theme-primary-soft); border-color: var(--theme-primary); font-weight: 600; }
.theme-choice-swatch { flex: 0 0 auto; width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 1px solid rgb(15 23 42 / 22%); background: var(--swatch, var(--theme-primary)); }
.theme-choice-name { flex: 1 1 auto; }
.theme-choice-check { flex: 0 0 auto; font-size: 0.8rem; color: var(--theme-primary); visibility: hidden; }
.theme-choice-btn.active .theme-choice-check { visibility: visible; }
.theme-choice-reset { width: 100%; margin-top: 0.45rem; border: 1px solid var(--theme-border); border-radius: 10px; padding: 0.42rem 0.6rem; background: var(--theme-control-bg); color: var(--theme-text); font: inherit; font-size: 0.88rem; cursor: pointer; }
.theme-choice-reset:hover { background: color-mix(in srgb, var(--theme-nav-hover) 55%, white); border-color: var(--theme-primary); }
.lang-btn { border: 1px solid transparent; background: transparent; border-radius: 999px; padding: 0.1rem 0.2rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lang-btn.active { border-color: var(--theme-primary); background: var(--theme-primary-soft); }
/* Flaggen als wehende GIFs: Windows zeigt Flaggen-Emojis nur als "DE"/"GB", und ein GIF
   sieht dort genauso aus wie auf dem iPad. Je Sprache gibt es ein bewegtes GIF und ein
   ruhiges PNG (siehe generate_flag_gifs.py); bei reduzierter Bewegung greift das PNG. */
.flag-icon { display: block; height: 1.1rem; width: auto; filter: drop-shadow(0 0 1px rgb(15 23 42 / 40%)); }
.flag-still { display: none; }

.layout { display: grid; grid-template-columns: max-content 1fr; gap: 1.25rem; }
.sidebar { background: transparent; color: var(--theme-nav-text); padding: 0; border: none; border-radius: 14px; align-self: start; }
nav { display: grid; gap: 0.45rem; width: max-content; justify-items: stretch; }
.nav-link { width: 100%; max-width: 100%; text-align: left; border: 1px solid var(--theme-border); background: var(--theme-nav-bg); color: var(--theme-nav-text); font-size: 1rem; border-radius: 10px; padding: 0.72rem 0.45rem 0.72rem 0.55rem; margin: 0; appearance: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.nav-link:hover { background: var(--theme-nav-hover); border-color: var(--theme-primary); color: var(--theme-nav-text); }
.nav-link.active { background: var(--theme-nav-active); border-color: var(--theme-primary); color: var(--theme-nav-text); font-weight: 600; }
.subnav { margin-top: 0.1rem; margin-left: 0.9rem; padding-top: 0; border-top: none; display: grid; gap: 0.35rem; width: calc(100% - 0.9rem); justify-items: stretch; box-sizing: border-box; }
.subnav-link { width: 100%; max-width: 100%; text-align: left; border: 1px solid var(--theme-border); background: var(--theme-nav-bg); color: var(--theme-nav-text); font-size: 0.92rem; border-radius: 10px; padding: 0.52rem 0.45rem 0.52rem 0.55rem; margin: 0; appearance: none; cursor: pointer; }
.subnav-link:hover { background: color-mix(in srgb, var(--theme-nav-hover) 72%, white); border-color: var(--theme-primary); color: var(--theme-nav-text); }
.subnav-link.active { background: color-mix(in srgb, var(--theme-nav-active) 82%, white); border-color: var(--theme-primary); color: var(--theme-nav-text); font-weight: 600; }

/* Glanz auf den Knöpfen: beim aktiven Navigationsknopf zieht alle paar Sekunden ein
   Lichtstreifen in der Leuchtfarbe des Themes darüber. Beim Überfahren laeuft er ohne
   Pause immer wieder von links nach rechts – in der Komplementaerfarbe. */
.nav-link, .subnav-link, .intro-replay-btn { position: relative; overflow: hidden; }
.nav-link::after, .subnav-link::after, .intro-replay-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 75%;
  background: linear-gradient(100deg, transparent, var(--theme-shine) 50%, transparent);
  opacity: 0;
  transform: translateX(-140%);
  pointer-events: none;
}
.nav-link.active::after, .subnav-link.active::after { opacity: 0.85; animation: navShine 7s ease-in-out infinite; }
.nav-link:hover::after, .subnav-link:hover::after, .intro-replay-btn:hover::after {
  opacity: 0.85;
  background: linear-gradient(100deg, transparent, var(--theme-shine-hover) 50%, transparent);
  animation: navShineHover 1.8s linear infinite;
}
@keyframes navShine {
  0%, 45% { transform: translateX(-140%); }
  78%, 100% { transform: translateX(280%); }
}
@keyframes navShineHover {
  0% { transform: translateX(-140%); }
  100% { transform: translateX(280%); }
}

/* Rahmen um den Inhaltsbereich: er traegt die Farbe des gerade ausgewaehlten
   Navigationsknopfes und schliesst direkt am Inhalt an (align-self: start, damit der
   Rahmen nicht auf die Hoehe der Navigation gestreckt wird). */
.main {
  min-width: 0;
  align-self: start;
  border: 1px solid var(--theme-primary);
  border-radius: 15px;
}
.hero { position: relative; width: 100%; aspect-ratio: 1600 / 520; margin-bottom: 1.4rem; border-radius: 16px; border: 1px solid var(--theme-border); box-shadow: 0 10px 30px rgb(15 23 42 / 10%); }
/* Nur der Bildkasten wird beschnitten (runde Ecken). Der Hero selbst bleibt offen, damit die
   Theme-Auswahl und andere Bedienelemente darüber hinausragen können. */
.hero-media { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--theme-bg); }
/* Nur das Landschaftsbild des Heros (die Flaggen der Sprachauswahl liegen im selben
   Bereich und wuerden sonst ebenfalls auf 100 % gestreckt). */
.hero-stage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--theme-hero-focus); position: relative; z-index: 1; }
.hero-stage { display: contents; }

.sunrise-scene { display: none; position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
body[data-theme="sonnenaufgang"] .sunrise-scene { display: block; }
.sunrise-sky { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 100% 68.846%, 81.375% 47.308%, 65.375% 65.385%, 47.5% 35.769%, 30% 67.692%, 14% 46.538%, 0 65%); }
.sunrise-sun { position: absolute; left: 60.375%; top: 38.08%; width: 8%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #fffbd0 0%, #ffe98f 55%, #ffd36b 100%); box-shadow: 0 0 36px 14px rgb(255 224 140 / 55%), 0 0 90px 40px rgb(255 190 120 / 30%); translate: 0 0; transition: translate 0.5s ease-out, box-shadow 0.4s ease; }
.sunrise-sun::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.sunrise-scene:not(.rise) .sunrise-sun { transform: translateY(125%); }
.sunrise-scene.rise .sunrise-sun { animation: sunriseRise 12s cubic-bezier(0.25, 0.6, 0.3, 1) both; }
.sunrise-sun.excited { box-shadow: 0 0 52px 24px rgb(255 232 150 / 70%), 0 0 120px 60px rgb(255 190 120 / 40%); }
.sunrise-sun.pulse::after { animation: sunPulse 1.1s ease-out; }

.sunrise-balloon { position: absolute; width: 5%; aspect-ratio: 0.72; pointer-events: auto; cursor: pointer; translate: 0 0; transition: translate 0.6s ease-out; --b1: #ff7a59; --b2: #ffe0a3; }
.sunrise-balloon.sb-1 { left: 10%; top: 24%; }
.sunrise-balloon.sb-2 { left: 33%; top: 8%; width: 3.8%; --b1: #7a5bd6; --b2: #ffd4e6; }
.sunrise-balloon.sb-3 { left: 82%; top: 14%; width: 4.4%; --b1: #2fb5a8; --b2: #fff0b8; }
.sunrise-balloon.boost { animation: balloonBoost 6s ease-in-out; }
.sb-body { position: absolute; inset: 0; animation: balloonDrift 9s ease-in-out infinite alternate; transform-origin: 50% 0; }
.sunrise-balloon.sb-2 .sb-body { animation-duration: 11s; animation-delay: -3s; }
.sunrise-balloon.sb-3 .sb-body { animation-duration: 13s; animation-delay: -6s; }
.sb-body i { position: absolute; display: block; }
.sb-env { left: 0; top: 0; width: 100%; height: 80%; border-radius: 50% 50% 44% 44% / 56% 56% 44% 44%; background: radial-gradient(circle at 34% 28%, rgb(255 255 255 / 40%), transparent 45%), repeating-linear-gradient(90deg, var(--b1) 0 16.66%, var(--b2) 16.66% 33.33%); box-shadow: inset -6px -8px 14px rgb(60 20 50 / 28%); }
.sb-ropes { left: 30%; width: 40%; top: 74%; height: 14%; background: linear-gradient(to top right, transparent 46%, #6b4a38 48% 52%, transparent 54%), linear-gradient(to top left, transparent 46%, #6b4a38 48% 52%, transparent 54%); }
.sb-basket { left: 38%; width: 24%; bottom: 0; height: 12%; background: linear-gradient(#a8744c, #7b4f34); border-radius: 2px 2px 4px 4px; }
.sb-flame { left: 45%; width: 10%; top: 80%; height: 9%; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: radial-gradient(circle at 50% 70%, #fff7c2, #ffa43a 70%, transparent); opacity: 0; transition: opacity 0.3s ease; }
.sunrise-balloon.boost .sb-flame { opacity: 1; animation: flameFlicker 0.18s ease-in-out infinite alternate; }

.sunrise-bird { position: absolute; left: 0; top: 0; width: 18px; height: 9px; border-top: 2px solid color-mix(in srgb, var(--theme-bird-color) 85%, transparent); border-radius: 50% 50% 0 0; translate: -40px -40px; animation: sunriseWing 0.7s ease-in-out infinite alternate; }
.sunrise-bird:nth-of-type(2n) { animation-duration: 0.55s; width: 14px; height: 7px; }

.sunrise-lantern { position: absolute; width: 14px; height: 18px; border-radius: 4px 4px 6px 6px; background: linear-gradient(#ffe29a, #ff9a55); box-shadow: 0 0 12px 5px rgb(255 190 110 / 65%); margin: -9px 0 0 -7px; animation: lanternRise 7s ease-out forwards; }

@keyframes sunriseRise { from { transform: translateY(125%); } to { transform: translateY(0); } }
@keyframes sunPulse { 0% { box-shadow: 0 0 36px 14px rgb(255 224 140 / 55%); } 30% { box-shadow: 0 0 70px 36px rgb(255 240 170 / 90%); } 100% { box-shadow: 0 0 36px 14px rgb(255 224 140 / 55%); } }
@keyframes balloonDrift { from { transform: translate(-8px, 4px) rotate(-2.5deg); } to { transform: translate(10px, -10px) rotate(2.5deg); } }
@keyframes balloonBoost { 0% { transform: translateY(0); } 35% { transform: translateY(-140%); } 100% { transform: translateY(0); } }
@keyframes flameFlicker { from { transform: scale(1, 0.85); } to { transform: scale(1.15, 1.2); } }
@keyframes sunriseWing { from { transform: scaleY(1); } to { transform: scaleY(-0.55); } }
@keyframes lanternRise { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(14px, -120px) scale(1); } 100% { transform: translate(-10px, -280px) scale(0.8); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung erscheint die Seite sofort in ihrer endgültigen Größe. */
  .page-shell { animation: none; }
  .sunrise-scene .sunrise-sun, .sunrise-scene .sb-body, .sunrise-scene .sunrise-bird, .sunrise-scene .sunrise-balloon { animation: none !important; }
  .sunrise-scene .sunrise-sun { transform: none !important; }
  /* Wellen und Tropfen sind Bewegung: script.js zeichnet dann nur ein Standbild
     (die Seerosenblätter liegen im Canvas und fehlen sonst im Bild). */
  /* Ein GIF lässt sich per CSS nicht anhalten, deshalb zeigt die Sprachauswahl das
     ruhige Standbild (generate_flag_gifs.py). */
  .flag-waving { display: none; }
  .flag-still { display: block; }
  /* Der Glanz ist Bewegung: der Streifen bleibt ausserhalb des Knopfes, der Titel steht
     wieder in einfachem Weiss. */
  .nav-link::after, .subnav-link::after, .intro-replay-btn::after { animation: none; transform: translateX(-140%); opacity: 0; }
  .hero-overlay h2 { animation: none; background-position: 100% 0; }
}

.hero-overlay { position: absolute; left: 0; right: 0; bottom: 0; color: #fff; padding: 1rem 1.2rem; background: linear-gradient(to top, color-mix(in srgb, var(--theme-hero-overlay-start) 82%, transparent), color-mix(in srgb, var(--theme-hero-overlay-end) 15%, transparent)); z-index: 6; }
.hero-overlay h2 { margin: 0 0 0.25rem; font-size: 1.3rem; }
/* Glanz auf dem Titel: die Schrift ist mit einem Farbverlauf gefuellt, durch den alle paar
   Sekunden ein heller Streifen in der Leuchtfarbe des Themes laeuft. Der Verlauf ist
   breiter als die Schrift und deckt sie in jeder Position ab (background-position bleibt
   zwischen 100 % und 0 %), sonst waeren Buchstaben ohne Verlauf unsichtbar. Ohne
   Unterstuetzung von background-clip: text bliebe der Titel ebenfalls unsichtbar,
   deshalb das @supports. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero-overlay h2 {
    display: inline-block;
    background-image: linear-gradient(100deg, #fff 0 30%, var(--theme-shine) 42% 50%, #fff 62% 100%);
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: titleShine 7s ease-in-out infinite;
  }
  @keyframes titleShine {
    0%, 25% { background-position: 100% 0; }
    62%, 100% { background-position: 0% 0; }
  }
}
.hero-overlay p { color: color-mix(in srgb, var(--theme-primary-soft) 80%, white); }


.content-wrapper { width: 100%; }
.content-section { display: none; background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 14px; box-shadow: 0 10px 30px rgb(15 23 42 / 8%); padding: 2rem; width: 100%; }
.content-section.active { display: block; }
.page-section-html > :first-child { margin-top: 0; }
.page-section-html table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.page-section-html th, .page-section-html td { border: 1px solid #d1d5db; padding: 0.55rem 0.65rem; text-align: left; }
.page-section-html img { max-width: 100%; height: auto; border-radius: 12px; display: block; margin-top: 1rem; }
.page-section-html::after { content: ''; display: block; clear: both; }
.page-section-html .align-right { float: right; margin: 0 0 1rem 1rem; }
.page-section-html .align-left { float: left; margin: 0 1rem 1rem 0; }
.page-section-html img.align-right, .page-section-html img.align-left { max-width: min(100%, 50%); }
.contact-note { margin-top: 0.75rem; }
.card-panel { margin-top: 1rem; border: 1px solid var(--theme-border); border-radius: 12px; padding: 1rem; background: color-mix(in srgb, var(--theme-surface) 92%, white); }
.hidden { display: none !important; }
.stack-form { display: grid; gap: 0.55rem; }
.grid-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0.6rem; align-items: center; }
.create-user-form { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
.edit-user-form { grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto; }

input, select, textarea { width: 100%; border: 1px solid var(--theme-border); border-radius: 10px; padding: 0.62rem 0.72rem; font: inherit; color: var(--theme-text); background: var(--theme-control-bg); }
textarea { resize: vertical; }

input[type="color"] {
  padding: 0.18rem;
  min-height: 3rem;
  cursor: pointer;
  overflow: hidden;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 8px;
}

input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 8px;
}

.primary-btn, .secondary-btn, .tab-btn { border-radius: 10px; padding: 0.62rem 0.86rem; font: inherit; cursor: pointer; }
.primary-btn { border: 1px solid var(--theme-primary); background: var(--theme-primary-soft); color: var(--theme-primary); font-weight: 600; }
.secondary-btn { border: 1px solid var(--theme-border); background: var(--theme-control-bg); color: var(--theme-text); }

.select-mode-btn.is-active {
  border-color: var(--theme-primary);
  background: var(--theme-primary-soft);
  color: var(--theme-primary);
  font-weight: 600;
}

.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.welcome-text { margin: 0; font-weight: 600; color: var(--theme-primary); }
.tab-view { display: none; }
.tab-view.active { display: block; }
.admin-create-panel { margin-top: 0.9rem; padding: 0.85rem; border: 1px dashed var(--theme-border); border-radius: 12px; background: color-mix(in srgb, var(--theme-primary-soft) 26%, white); }

.toolbar { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; position: relative; }
.toolbar-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; }

.file-input-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
.file-pick-btn { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--theme-primary); border-radius: 10px; padding: 0.62rem 0.86rem; background: var(--theme-primary-soft); color: var(--theme-primary); font: inherit; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.file-pick-btn::before { content: "+"; font-weight: 800; font-size: 1.1em; line-height: 1; }
.file-pick-btn:hover { background: color-mix(in srgb, var(--theme-primary) 20%, var(--theme-control-bg)); }
.file-input-hidden:focus-visible + .file-pick-btn { outline: 2px solid var(--theme-primary); outline-offset: 2px; }
.file-pick-btn.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
body[data-theme="matrix"] .file-pick-btn { font-family: "Courier New", monospace; letter-spacing: 0.04em; box-shadow: 0 0 10px color-mix(in srgb, var(--theme-primary) 35%, transparent); }
body[data-theme="ki"] .file-pick-btn { box-shadow: 0 0 12px color-mix(in srgb, var(--theme-primary) 45%, transparent); }
body[data-theme="sternentor"] .file-pick-btn { letter-spacing: 0.06em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-primary) 40%, transparent); }
.upload-file-label { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; color: var(--theme-muted); }

.upload-progress { margin-top: 0.8rem; padding: 0.65rem 0.8rem; border: 1px solid var(--theme-border); border-radius: 12px; background: var(--theme-control-bg); color: var(--theme-text); }
.upload-progress-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; font-size: 0.88rem; }
.upload-progress progress { display: block; width: 100%; height: 0.85rem; accent-color: var(--theme-primary); }
/* Diagnose unter dem Fortschritt: hilft beim Melden von Upload-Problemen (Text kopierbar). */
.upload-diagnostics { margin-top: 0.6rem; padding: 0.6rem 0.75rem; border: 1px dashed var(--theme-border); border-radius: 12px; background: var(--theme-control-bg); color: var(--theme-text); }
.upload-diagnostics-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.4rem; font-size: 0.85rem; font-weight: 600; }
.upload-diagnostics-head .small-btn { padding: 0.2rem 0.6rem; font-size: 0.78rem; }
.upload-diagnostics-actions { display: inline-flex; align-items: center; gap: 0.4rem; }
.upload-diagnostics-log { margin: 0; max-height: 11rem; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: Consolas, "Courier New", monospace; font-size: 0.78rem; line-height: 1.45; }

.drive-message:empty { display: none; }
.drive-message { padding: 0.6rem 0.8rem; border: 1px solid var(--theme-primary); border-radius: 10px; background: var(--theme-primary-soft); color: var(--theme-text); font-weight: 600; }
.drive-message.is-error { border-color: #dc2626; background: color-mix(in srgb, #dc2626 12%, var(--theme-control-bg)); }

.selection-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.85rem; padding: 0.55rem 0.8rem; border: 1px solid var(--theme-border); border-radius: 12px; background: var(--theme-control-bg); color: var(--theme-text); }
.selection-all { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; cursor: pointer; }
.selection-count { margin-right: auto; font-size: 0.9rem; color: var(--theme-muted); }
.danger-btn { border-color: #dc2626; color: #dc2626; font-weight: 600; }
.danger-btn:hover:not(:disabled) { background: color-mix(in srgb, #dc2626 14%, var(--theme-control-bg)); }
.danger-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.select-box { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--theme-primary); cursor: pointer; }
.select-box-wrap { display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem; cursor: pointer; }
.select-cell { width: 2.6rem; padding-right: 0 !important; }
.file-window { position: relative; }
.file-window .select-box-wrap { position: absolute; top: 0.45rem; left: 0.45rem; z-index: 2; border: 1px solid var(--theme-border); border-radius: 8px; background: rgb(255 255 255 / 0.9); }
.file-window.is-selected { border-color: var(--theme-primary); box-shadow: 0 0 0 2px var(--theme-primary), 0 8px 18px rgb(15 23 42 / 7%); }
.file-row.is-selected td { background: var(--theme-primary-soft); }

.file-window-preview { position: relative; overflow: hidden; }
.file-window-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s ease; }
.file-window-thumb.is-loaded { opacity: 1; }
.file-window-preview.has-thumb .file-window-icon { visibility: hidden; }
.drive-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}

.breadcrumb-btn {
  border: none;
  background: transparent;
  color: #2563eb;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.breadcrumb-btn.is-drop-target {
  color: #1d4ed8;
  text-decoration: underline;
}

.breadcrumb-current,
.breadcrumb-sep {
  color: #64748b;
}

.drive-controls {
  display: grid;
  gap: 0.8rem;
  margin-top: 0.9rem;
  padding: 0.9rem;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.drive-controls-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.drive-page-size {
  max-width: 11rem;
}

.drive-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.pagination-info {
  font-size: 0.9rem;
  color: #475569;
}

.drive-view-toggle {
  display: inline-flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.drive-view-btn.active {
  border-color: #93c5fd;
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 600;
}

.drive-filter-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}

.filter-field {
  display: grid;
  gap: 0.35rem;
  font-size: 0.88rem;
  color: #475569;
}

.filter-field span {
  font-weight: 600;
}

.hint, .status-text { margin-top: 0.6rem; font-size: 0.9rem; color: var(--theme-muted); }
.file-list {
  position: relative;
  margin-top: 0.85rem;
}

.file-table-wrap {
  border: 1px solid #dbe3f0;
  border-radius: 14px;
  overflow: auto;
  background: #ffffff;
}

.drive-list-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.drive-list-table th,
.drive-list-table td {
  padding: 0.72rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid #eef2f7;
}

.drive-list-table th {
  font-size: 0.82rem;
  color: #64748b;
  background: #f8fafc;
  white-space: nowrap;
}

.file-row {
  cursor: default;
}

.file-row.is-folder .file-row-icon,
.file-window.is-folder .file-window-icon {
  color: #b45309;
  background: #fffbeb;
  border-color: #fcd34d;
}

.file-window.is-folder .file-window-preview {
  background: linear-gradient(135deg, rgb(254 243 199 / 0.95), rgb(255 251 235 / 0.98));
}

.file-row:hover td,
.file-row:focus-visible td {
  background: #f8fbff;
  outline: none;
}

.file-row.is-drop-target td,
.file-window.is-drop-target {
  border-color: #60a5fa;
  background: #eff6ff;
}

.file-row.is-dragging,
.file-window.is-dragging {
  opacity: 0.45;
}

.file-row-main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.file-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 28px;
  border-radius: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 700;
}

.file-row-name {
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.file-window {
  display: grid;
  grid-template-rows: 96px auto;
  align-self: start;
  border: 1px solid #dbe3f0;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 8px 18px rgb(15 23 42 / 7%);
  cursor: default;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.file-window.is-image,
.file-window.is-video {
  grid-template-rows: 1fr;
  aspect-ratio: 1 / 1;
}

.file-window.is-image .file-window-preview,
.file-window.is-video .file-window-preview {
  border-bottom: none;
}

/* Der Vorschaufilm nimmt keine Klicks, kein Ziehen und kein Kontextmenü an: Kachel, Auswahl
   und Bedienung verhalten sich wie bei den übrigen Elementen. */
.file-window-video {
  pointer-events: none;
}

/* Kleines Abspielsymbol auf der Videokachel, damit sie sich von einer Bildkachel
   unterscheiden lässt. Es erscheint nur, wenn das Standbild wirklich geladen ist. */
.file-window.is-video .file-window-preview.has-thumb::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: rgb(15 23 42 / 65%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 0.5l6 3.5-6 3.5z' fill='%23ffffff'/%3E%3C/svg%3E") center / 0.62rem no-repeat;
}

.file-window:hover,
.file-window:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgb(15 23 42 / 12%);
  border-color: #93c5fd;
  outline: none;
}

.file-window-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgb(219 234 254 / 0.88), rgb(239 246 255 / 0.92)),
    repeating-linear-gradient(135deg, transparent 0 16px, rgb(255 255 255 / 0.4) 16px 32px);
  border-bottom: 1px solid #dbeafe;
}

.file-window-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 56px;
  padding: 0 0.7rem;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.86);
  border: 1px solid #bfdbfe;
  font-size: 0.82rem;
  font-weight: 800;
  color: #1d4ed8;
  letter-spacing: 0.06em;
}

.file-window-body {
  padding: 0.72rem 0.8rem 0.82rem;
}

.file-window-name {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-window-meta,
.file-window-updated,
.file-window-hint {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
}

.file-window-updated {
  margin-top: 0.35rem;
}

.file-window-hint {
  display: inline-block;
  margin-top: 0.7rem;
  color: #2563eb;
}

.drive-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1150;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgb(15 23 42 / 58%);
}

.drive-preview-dialog {
  width: min(980px, 100%);
  max-height: calc(100vh - 2.4rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgb(191 219 254 / 0.9);
  background: #ffffff;
  box-shadow: 0 30px 65px rgb(15 23 42 / 24%);
}

.drive-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.drive-preview-header h4 {
  margin: 0;
}

.drive-preview-header-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.drive-preview-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 1.1rem 0.9rem;
  border-top: 1px solid #e2e8f0;
  background: linear-gradient(0deg, #ffffff 0%, #f8fbff 100%);
}

.preview-counter {
  font-size: 0.88rem;
  font-weight: 600;
  color: #64748b;
}

.preview-nav-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.drive-preview-video {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 72vh;
  border: 1px solid #dbe3f0;
  border-radius: 14px;
  background: #000000;
}

.drive-preview-content {
  overflow: auto;
  padding: 1rem 1.1rem 1.2rem;
  background: #f8fafc;
}

.drive-preview-image,
.drive-preview-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 420px;
  border: 1px solid #dbe3f0;
  border-radius: 14px;
  background: #ffffff;
}

.drive-preview-image {
  min-height: 0;
  max-height: 72vh;
  object-fit: contain;
}

/* PDF-Vorschau: das eingebettete PDF bekommt das ganze Dialogfeld und scrollt dort selbst. */
.drive-preview-dialog.is-pdf {
  height: calc(100vh - 2.4rem);
}

.drive-preview-content.is-pdf {
  padding: 0;
  overflow: hidden;
}

.drive-preview-content.is-pdf .hint {
  margin: 1rem 1.1rem;
}

.drive-preview-content.is-pdf .drive-preview-frame {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

/* Eigener PDF-Renderer: gestapelte Seiten, die im Dialog scrollbar sind. */
.drive-pdf-viewer {
  height: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
  padding: 0.9rem;
  background: #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.drive-pdf-page {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgb(15 23 42 / 12%);
}

.drive-pdf-page canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.drive-pdf-page.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 12px, #eef2f7 12px, #eef2f7 24px);
}

.drive-pdf-page.is-failed::after {
  content: '⚠';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #94a3b8;
  font-size: 1.5rem;
}

.drive-pdf-viewer .hint {
  margin: 0 0 0.4rem;
}

.drive-preview-text {
  margin: 0;
  padding: 1rem;
  border: 1px solid #dbe3f0;
  border-radius: 14px;
  background: #ffffff;
  color: #0f172a;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: Consolas, "Courier New", monospace;
  line-height: 1.55;
}

.file-context-menu {
  position: fixed;
  z-index: 1100;
  min-width: 190px;
  padding: 0.4rem;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.98);
  box-shadow: 0 20px 45px rgb(15 23 42 / 20%);
}

.context-menu-item {
  display: block;
  width: 100%;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #0f172a;
  text-align: left;
  padding: 0.65rem 0.75rem;
  font: inherit;
  cursor: pointer;
}

.context-menu-item:hover,
.context-menu-item:focus-visible {
  background: #eff6ff;
  outline: none;
}

.context-menu-item.danger {
  color: #b91c1c;
}

.context-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.context-menu-item:disabled:hover {
  background: transparent;
}

.page-editor-box {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

.admin-subpanel {
  display: none;
}

.admin-subpanel.active {
  display: block;
}

.admin-subpanel .page-editor-box,
.admin-subpanel .theme-editor-box {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.page-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.page-editor-header h4 {
  margin: 0;
}

.page-editor-panel {
  margin-top: 0.9rem;
  padding: 1rem;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.theme-editor-box {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--theme-border);
}

.theme-editor-panel {
  margin-top: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--theme-border);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--theme-surface) 94%, white), color-mix(in srgb, var(--theme-primary-soft) 24%, white));
}

.theme-editor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.theme-image-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.theme-preview-note {
  margin-top: 0.8rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--theme-primary-soft) 35%, white);
  color: var(--theme-text);
  font-weight: 600;
}

/* Hintergrundmusik je Theme: Datei auswählen, hochladen oder wieder entfernen. Der Upload
   läuft bei Bedarf stückweise (siehe uploadThemeAudio in script.js). */
.theme-audio-box {
  display: grid;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.9rem;
  border: 1px solid var(--theme-border);
  border-radius: 14px;
  background: var(--theme-control-bg);
}

.theme-audio-head {
  display: grid;
  gap: 0.25rem;
}

.theme-audio-head h5 {
  margin: 0;
  font-size: 0.98rem;
}

.theme-audio-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.theme-audio-note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--theme-muted);
}

.page-editor-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.html-toolbox {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.85rem 0;
}

#pageHtmlEditor {
  min-height: 320px;
  font-family: Consolas, "Courier New", monospace;
}

.page-history-box {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

.page-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.page-history-header h5 {
  margin: 0;
}

.page-history-list {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.85rem;
}

.page-history-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid #dbe3f0;
  border-radius: 12px;
  background: #ffffff;
}

.page-history-main {
  min-width: 0;
}

.page-history-main strong {
  display: block;
  color: #0f172a;
}

.page-history-main p {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  color: #64748b;
}

.user-list table { width: 100%; border-collapse: collapse; margin-top: 0.7rem; }
.user-list th, .user-list td { border-bottom: 1px solid var(--theme-border); text-align: left; padding: 0.55rem 0.4rem; font-size: 0.92rem; }
.row-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.mini-btn { border: 1px solid var(--theme-border); border-radius: 8px; background: var(--theme-control-bg); color: var(--theme-text); padding: 0.35rem 0.5rem; cursor: pointer; font-size: 0.82rem; }
.mini-btn:hover { background: color-mix(in srgb, var(--theme-nav-hover) 58%, white); border-color: var(--theme-primary); color: var(--theme-primary); }
.user-list .row-actions .danger-btn { color: #dc2626; border-color: #dc2626; }
.user-list .row-actions .danger-btn:hover { background: color-mix(in srgb, #dc2626 14%, var(--theme-control-bg)); color: #dc2626; border-color: #dc2626; }
.user-self-note { font-size: 0.78rem; color: var(--theme-muted); }
.editor-area { margin-top: 0.9rem; border: 1px solid var(--theme-border); border-radius: 10px; padding: 0.8rem; background: #fff; }
.editor-actions { margin-top: 0.6rem; display: flex; gap: 0.45rem; }

/* ---------------------------------------------------------------- Musik */

.music-player {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.9rem;
}

.music-player-top {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem;
  border: 1px solid var(--theme-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--theme-surface) 0%, var(--theme-primary-soft) 100%);
}

.music-now { display: grid; gap: 0.15rem; }
.music-now-title { font-weight: 700; font-size: 1.05rem; color: var(--theme-text); }
.music-now-meta { font-size: 0.88rem; color: var(--theme-muted); }

.music-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.music-play-btn { min-width: 8rem; }
.music-controls button:disabled { opacity: 0.5; cursor: not-allowed; }

.music-seek-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.music-time { font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--theme-muted); min-width: 2.6rem; text-align: center; }
.music-seek { flex: 1 1 12rem; min-width: 8rem; accent-color: var(--theme-primary); }
.music-volume { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--theme-muted); }
.music-volume input { width: 7rem; accent-color: var(--theme-primary); }
#musicAudio { display: none; }

.music-library {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid var(--theme-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--theme-surface) 92%, white);
}

.music-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.music-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.music-status { margin-top: 0; }
.music-status.is-error { color: #dc2626; font-weight: 600; }
.music-status.is-success { color: var(--theme-text); }

.music-track-list { display: grid; gap: 0.4rem; }
.music-empty { margin: 0; font-size: 0.9rem; color: var(--theme-muted); }

.music-track {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  background: var(--theme-control-bg);
}

.music-track.is-playing { border-color: var(--theme-primary); box-shadow: 0 0 0 2px var(--theme-primary-soft); }
.music-track-play { border-radius: 999px; padding: 0.4rem 0.7rem; font-size: 0.85rem; }
.music-track-info { display: grid; gap: 0.1rem; min-width: 0; }
.music-track-title { font-weight: 600; color: var(--theme-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-track-meta { font-size: 0.82rem; color: var(--theme-muted); }
.music-track-actions { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }

.music-admin-box { display: grid; gap: 1.1rem; }
.music-upload-box { display: grid; gap: 0.7rem; padding: 0.9rem; border: 1px solid var(--theme-border); border-radius: 14px; background: var(--theme-control-bg); }
.music-upload-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 0.6rem; align-items: end; }

.music-admin-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; }
.music-admin-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }

.checkbox-field { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; color: var(--theme-muted); font-weight: 600; }
.checkbox-field input { width: 1.05rem; height: 1.05rem; accent-color: var(--theme-primary); cursor: pointer; }

.music-admin-list { overflow-x: auto; }
.music-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.music-table th, .music-table td { border-bottom: 1px solid var(--theme-border); text-align: left; padding: 0.5rem 0.4rem; font-size: 0.92rem; vertical-align: middle; }
.music-table .select-cell { width: 2.6rem; }
.music-table .music-table-actions { width: 12rem; }
.music-table tr.is-selected td { background: var(--theme-primary-soft); }
.music-hidden-badge { display: inline-block; font-size: 0.78rem; color: var(--theme-muted); }
.music-public-badge { display: inline-block; font-size: 0.78rem; font-weight: 600; color: var(--theme-primary); }

.music-edit-box,
.music-playlist-box {
  padding: 0.9rem;
  border: 1px solid var(--theme-border);
  border-radius: 14px;
  background: var(--theme-control-bg);
}

.music-playlist-list { display: grid; gap: 0.5rem; margin-top: 0.7rem; }
.music-playlist-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--theme-surface) 90%, white);
}
.music-playlist-info { display: grid; gap: 0.1rem; min-width: 0; }
.music-playlist-name { font-weight: 600; color: var(--theme-text); }
.music-playlist-meta { font-size: 0.82rem; color: var(--theme-muted); }

.music-playlist-editor { margin-top: 0.9rem; padding: 0.9rem; border: 1px solid var(--theme-primary); border-radius: 14px; background: color-mix(in srgb, var(--theme-surface) 92%, white); }
.music-playlist-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; align-items: end; margin-top: 0.6rem; }
.music-playlist-track-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; align-items: end; margin-top: 0.8rem; }
.music-playlist-tracks { display: grid; gap: 0.3rem; margin-top: 0.6rem; max-height: 18rem; overflow-y: auto; }
.music-playlist-track { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border: 1px solid var(--theme-border); border-radius: 10px; background: var(--theme-control-bg); font-size: 0.9rem; }
.music-playlist-track label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; min-width: 0; }
.music-playlist-track span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

h2 { margin-top: 0; margin-bottom: 0.75rem; }
p { margin: 0; line-height: 1.65; color: var(--theme-muted); }
a { color: var(--theme-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .page-shell { width: calc(100% - 1rem); margin: 0.5rem auto 1rem; }
  .layout { grid-template-columns: 1fr; gap: 1rem; }
  .main { border-radius: 15px; }
  .sidebar { border: none; padding: 0; }
  nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-link, .subnav-link { text-align: center; }
  .grid-form { grid-template-columns: 1fr; }
  .create-user-form { grid-template-columns: 1fr; }
  .edit-user-form { grid-template-columns: 1fr; }
  .page-editor-controls { grid-template-columns: 1fr; }
  .theme-editor-grid,
  .theme-image-grid { grid-template-columns: 1fr; }
  .drive-filter-grid { grid-template-columns: 1fr; }
  .music-filter-grid,
  .music-admin-filters,
  .music-upload-fields,
  .music-playlist-fields,
  .music-playlist-track-head { grid-template-columns: 1fr; }
  .music-track { grid-template-columns: auto minmax(0, 1fr); }
  .music-track-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .drive-controls-head { flex-direction: column; align-items: stretch; }
  .drive-page-size { max-width: none; }
  /* Die Bedienelemente liegen auch in der schmalen Ansicht auf dem Hero oben (nicht in einer
     eigenen Zeile darüber); die Theme-Auswahl darf dabei über den Bildkasten hinausragen. */
  .hero { display: block; aspect-ratio: 1600 / 520; background: var(--theme-bg); }
  .hero-media { position: absolute; inset: 0; }
  .hero-stage { display: contents; }
  .intro-replay-wrap { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 25; flex-direction: column; align-items: flex-start; gap: 0.35rem; min-width: 0; margin: 0; }
  .theme-chooser-wrap { display: flex; }
  .theme-chooser-btn { min-width: min(var(--theme-chooser-width), calc(100vw - 7rem)); max-width: calc(100vw - 7rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
  .theme-chooser-panel { max-width: calc(100vw - 1.6rem); }
  .hero-top-right { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 25; margin: 0; }
  .hero-overlay { padding: 0.55rem 0.8rem; }
  .hero-overlay h2 { margin: 0; font-size: 1.05rem; }
  .file-window-grid { grid-template-columns: 1fr; }
  .drive-list-table { min-width: 560px; }
  .drive-preview-dialog { width: 100%; max-height: calc(100vh - 1rem); }
  .drive-preview-image,
  .drive-preview-frame { min-height: 280px; }
  .page-history-item,
  .page-history-header { flex-direction: column; align-items: stretch; }
}