/* ============================================================
   Sternenschwert — Zentrales Stylesheet
   Alle Farben, Fonts und Maße oben als Variablen.
   Einen Wert ändern = ganze Seite zieht mit.
   ============================================================ */

:root {
    /* Hintergrund (Gradient hinter allem), dunkel-türkisgrün */
    --color-bg-glow:    #5e3a92;   /* heller Schein oben */
    --color-bg-mid:     #2c1b52;
    --color-bg-outer:   #090512;   /* dunkler Rand unten */

    /* Inhaltsfläche: Paper-Textur über Creme-Basis */
    --color-content:    #f0e8d4;

    /* Text & Überschriften (dunkel auf hellem Grund) */
    --color-text:       #2e2a20;
    --color-heading:    #3a3022;

    /* Links */
    /* Akzent (Mitspielen, aktiver Nav-Punkt) = satte Gradient-Mitte
       des aktiven Schemas; Hover-Farbe = dessen heller Glow.
       Beides zieht bei jedem Schemawechsel automatisch mit. */
    --color-accent:      var(--color-bg-mid);
    --color-link:        #4a3c28;
    --color-link-hover:  color-mix(in srgb, var(--color-bg-glow) 15%, #ffffff);

    /* Divider-Schatten */
    --color-divider:    rgba(40, 32, 20, 0.85);

    /* Status-Punkte */
    --color-online:     #2e7d32;
    --color-offline:    #b3261e;

    /* Formulare */
    --color-input-bg:     rgba(255, 255, 255, 0.55);
    --color-input-border: #b5a47e;

    /* Fonts: einmal zugewiesen, überall benutzt */
    --font-ui:      'Crimson';        /* Navigation, Links, Bedienelemente */
    --font-heading: 'Vollkorn';       /* Überschriften */
    --font-text:    'IMFellDWPica';   /* Fließtext */

    /* Logo-Anzeigebreite (Datei darf größer sein, wird scharf
       runterskaliert — hier eine Zahl ändern genügt) */
    --logo-width: 280px;

    /* Breite der Login-Felder UND des Anmelden-Buttons */
    --login-field-width: 170px;

    /* Randschatten links/rechts auf der Paper-Fläche:
       gefakte Abrundung über einen Verlauf nach außen */
    --edge-shade-width: 20px;
    --edge-shade-color: rgba(0, 0, 0, 0.5);

    /* Einheitlicher Innenabstand der Inhaltsfläche
       (Header, Main und Footer nutzen denselben Wert —
       damit fluchten obere und untere Texteinzüge) */
    --content-pad: 45px;

    /* ----- Vertikale Abstände (alle an einer Stelle) -----
       Hinweis: Der Gesamtabstand Divider -> Inhalt setzt sich
       zusammen aus Divider-Puffer (~20px, fix wegen Schattenauslauf)
       + content-top + ggf. elementeigenem Abstand wie poem-top. */
    --space-content-top:    20px;   /* Luft unter dem Header-Divider */
    --space-content-bottom: 20px;   /* Luft über dem Footer-Divider */
    --space-poem-top:       0px;    /* zusätzlicher Abstand über dem Gedicht */
    --space-poem-bottom:    40px;   /* Abstand unter dem Gedicht */

    /* Silber-Gold: Dunkelmodus-Schrift und Goldstaender */
    --color-silvergold: #d9cfae;

    /* Partikelfarben des aktiven Schemas (liest der FX-Controller aus) */
    --fx-particle-color: #93f8ff;
    --fx-particle-line:  #d7f7ff;

    /* Höhe der Hover-Linie unter Navigations- und Footer-Links */
    --hover-line-height: 2px;

    /* Schwert-Zeichnung: freie Ebene auf dem Papier, unabhängig vom Text */
    --page-art-width:   550px;      /* Breite, Höhe skaliert proportional mit */
    --page-art-top:     -150px;      /* Abstand von der Oberkante des Inhaltsbereichs
                                       (negativ = ragt nach oben hinein) */
    --page-art-opacity: 0.4;        /* multipliziert sich mit dem Alpha der PNG */

}

/* ----- Fonts ------------------------------------------------ */

@font-face {
    font-family: 'Crimson';
    src: url('../fonts/crimson.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

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

@font-face {
    font-family: 'IMFellDWPica-Italic';
    src: url('../fonts/IMFellDWPica-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* ----- Grundgerüst ------------------------------------------ */

* {
    box-sizing: border-box;
}

/* Text auf der Seite ist nicht markierbar —
   Eingabefelder bleiben davon ausgenommen */
body {
    user-select: none;
}

input,
textarea {
    user-select: text;
}

body {
    margin: 0;
    padding: 0;
    color: var(--color-text);
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 1.6;
    /* Deutlich sichtbarer Verlauf: türkiser Schein oben,
       läuft nach unten ins Dunkle aus */
    background: radial-gradient(
        ellipse 140% 90% at 50% -15%,
        var(--color-bg-glow) 0%,
        var(--color-bg-mid)  45%,
        var(--color-bg-outer) 100%
    );
    background-attachment: fixed;
    min-height: 100vh;
}

.page-container {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
}

.main-wrapper {
    width: 90%;
    max-width: 1200px;
    padding: 0 var(--content-pad);
    background-color: var(--color-content);
    background-image: url('../images/paper.jpg?v=2');
    background-repeat: repeat;
    box-shadow: 0 0 90px rgba(0, 0, 0, 0.75);
    display: flex;
    flex-direction: column;
    position: relative;   /* Bezugsrahmen für die Randschatten */
}

/* Goldstaender: 5px-Saeulen an den Aussenkanten der Inhaltsflaeche.
   Quer-Verlauf dunkel -> Silber-Gold -> dunkel = Rundung einer
   Metallstange. Liegen ueber den Randschatten. */
.gold-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7px;
    background: linear-gradient(90deg, #1a1408 0%, var(--color-silvergold) 50%, #1a1408 100%);
    z-index: 6;
    pointer-events: none;
}

.gold-rail.left  { left: 0; }
.gold-rail.right { right: 0; }

/* Randschatten: schmale Verlaufstreifen an beiden Paper-Kanten,
   innen transparent, außen dunkel — wirkt wie eine Wölbung */
.main-wrapper::before,
.main-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--edge-shade-width);
    pointer-events: none;
    z-index: 5;
}

.main-wrapper::before {
    left: 0;
    background: linear-gradient(to left, transparent, var(--edge-shade-color));
}

.main-wrapper::after {
    right: 0;
    background: linear-gradient(to right, transparent, var(--edge-shade-color));
}

/* ----- Überschriften & Fließtext ----------------------------- */

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: normal;
    color: var(--color-heading);
}

h1 { font-size: 2.2em; }
h2 { font-size: 1.7em; }

/* Seitenüberschriften mittig */
main h1 {
    text-align: center;
}

/* Bühne für Bild + Text: beide Ebenen übereinander gestapelt.
   Die Bühne wird immer so hoch wie die größere der beiden Ebenen —
   das Papier endet nie vor dem Bild, der Footer sitzt immer darunter,
   nichts wird beschnitten. */
.welcome-stage {
    display: grid;
}

.welcome-stage > * {
    grid-area: 1 / 1;   /* alle Kinder teilen sich dieselbe Zelle */
}

/* Schwert-Zeichnung: liegt unter dem Text */
.page-art {
    justify-self: center;
    margin-top: var(--page-art-top);
    width: var(--page-art-width);
    height: auto;
    opacity: var(--page-art-opacity);
    pointer-events: none;
    z-index: 0;
}

/* Textebene über dem Bild */
.welcome-content {
    z-index: 1;
}

/* Eingangsgedicht in IM Fell Italic, zentriert */
.welcome-poem {
    font-family: 'IMFellDWPica-Italic';
    font-style: italic;
    text-align: center;
    font-size: 1.2em;       /* Größe des Gedichts */
    line-height: 1.55;
    color: var(--color-heading);
    margin: var(--space-poem-top) auto var(--space-poem-bottom);
}

/* Strophenabstand */
.welcome-poem p {
    margin: 0 0 0.9em;
}

/* Zentrierter Einleitungstext (z. B. Willkommenstext) */
.intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.15em;   /* Größe des Hinweistexts unter dem Gedicht */
}

/* ----- Header: obere Leiste ---------------------------------- */

header {
    padding-top: 18px;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    min-height: 92px;
}

/* Infopanel links: Datum, Serverstatus, Wache Seelen */
.server-info {
    flex: 1;
    font-family: var(--font-ui);
    font-size: 0.95em;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.server-status {
    display: flex;
    align-items: center;
    gap: 7px;
}

.status-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.online {
    background-color: var(--color-online);
    box-shadow: 0 0 6px var(--color-online);
}

.status-dot.offline {
    background-color: var(--color-offline);
    box-shadow: 0 0 6px var(--color-offline);
}

/* === S2-ÄNDERUNG 2026-06-07 ===
   Zeitenrad links neben dem Status. Dreht sich bei Online,
   steht still bei Offline. Tempo über die animation-duration
   unten regeln (Startwert: 8s pro Umdrehung). */
.zeitenrad {
    display: inline-flex;
    align-items: center;
    color: var(--color-accent);
}

.zeitenrad svg {
    display: block;
    transform-origin: 50% 50%;
}

.zeitenrad.dreht svg {
    animation: zeitenrad-dreh 8s linear infinite;
}

@keyframes zeitenrad-dreh {
    to { transform: rotate(360deg); }
}

/* Respektiert Systemeinstellung „Bewegung reduzieren" */
@media (prefers-reduced-motion: reduce) {
    .zeitenrad.dreht svg {
        animation: none;
    }
}

/* Loginbereich rechts */
.login-area {
    flex: 1;
    font-family: var(--font-ui);
    font-size: 0.95em;
}

.login-form .login-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.login-form label {
    white-space: nowrap;
}

.login-form input {
    width: var(--login-field-width);
    padding: 4px 8px;
    font-family: var(--font-text);
    font-size: 0.95em;
    color: var(--color-text);
    background: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    border-radius: 2px;
}

.login-form input:focus {
    outline: none;
    border-color: var(--color-link);
}

.btn-login,
.btn-logout {
    display: block;
    margin-left: auto;
    width: var(--login-field-width);   /* exakt so breit wie die Felder */
    padding: 5px 0;
    font-family: var(--font-ui);
    font-size: 1em;
    text-align: center;
    color: var(--color-content);
    background: var(--color-link);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-login:hover,
.btn-logout:hover {
    background: var(--color-link-hover);
}

/* Eingeloggter Zustand */
.account-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.account-name {
    transition: filter 0.2s ease;
}

.account-name.hidden-name {
    filter: blur(5px);
}

.toggle-name {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--color-link);
    display: flex;
    align-items: center;
}

.toggle-name:hover {
    color: var(--color-link-hover);
}

/* ----- Logo --------------------------------------------------- */

/* Sitzt zwischen Infopanel und Login in der oberen Leiste,
   Oberkante bündig mit der Datumszeile */
.logo-container {
    flex: 0 0 auto;
    text-align: center;
    line-height: 0;
}

.logo-container img {
    width: var(--logo-width);
    max-width: 100%;
    height: auto;
}

.logo-container a {
    border: none;
}

/* ----- Navigation --------------------------------------------- */

.main-nav {
    margin: 15px 0 5px;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.main-nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-nav li {
    margin: 0 30px;
}

.nav-group-left,
.nav-group-center,
.nav-group-right {
    flex: 1;
}

.nav-group-left   { justify-content: flex-start; }
.nav-group-center { justify-content: center; }
.nav-group-right  { justify-content: flex-end; }

/* ----- Links: Hover mit weichem Schatten ----------------------- */

a {
    color: var(--color-link);
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 1.1em;
    text-transform: uppercase;
    display: inline-block;
    padding-bottom: 3px;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-link-hover);
}

.main-nav a,
.footer-nav a {
    position: relative;
}

.main-nav a::after,
.footer-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: var(--hover-line-height);
    background: url('../images/longdivider_b.png') no-repeat center bottom;
    background-size: 100% 100%;   /* auf Linienmaß strecken — 'contain' hatte
                                     die breite Grafik auf ~1px Höhe geschrumpft */
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.main-nav a:hover::after,
.footer-nav a:hover::after {
    opacity: 1;
}

.main-nav a.active {
    color: var(--color-accent);
    font-weight: bold;
}

/* Mitspielen als hervorgehobener Mittel-Punkt */
.nav-cta {
    font-weight: bold;
    letter-spacing: 0.5px;
    color: var(--color-accent);
}

/* === S2-ÄNDERUNG 2026-06-08 ===
   Mitspielen-Eigenzeile über der Navigation. Je eine 1px-Linie
   über und unter dem Text (gleiche Grafik wie der Hover-Strich),
   die den Text links/rechts um 10px überragt. Kein Hover-Strich,
   da das Element außerhalb von .main-nav liegt und dessen ::after
   damit nicht greift. */
.mitspielen-zeile {
    text-align: center;
    margin-top: 5px;            /* === S2-ÄNDERUNG 2026-06-08 === mehr Abstand zum Logo darüber */
    margin-bottom: 10px;        /* Abstand zur Navigation — Regler */
}

.mitspielen-solo {
    position: relative;
    display: inline-block;
    padding: 6px 10px;          /* 10px links/rechts: Linien fangen den Text +10px ein */
}

.mitspielen-solo::before,
.mitspielen-solo::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: url('../images/longdivider_b.png') no-repeat center;
    background-size: 100% 100%;
    pointer-events: none;
}

.mitspielen-solo::before { top: 2px; }   /* === S2-ÄNDERUNG 2026-06-08 === 2px tiefer */
.mitspielen-solo::after  { bottom: 0; }

/* Fließtext-Links innerhalb von Absätzen bleiben normal gesetzt */
main p a {
    font-family: var(--font-text);
    text-transform: none;
    font-size: 1em;
}

/* ----- Geschwungener Schatten-Divider (reines CSS) ------------- */
/* Läuft über die volle Breite der Inhaltsfläche, inkl. Innenabstand */

.h-divider {
    position: relative;
    width: calc(100% + 2 * var(--content-pad));
    margin-left: calc(-1 * var(--content-pad));
    margin-right: calc(-1 * var(--content-pad));
    margin-top: 12px;
}

.h-divider .shadow {
    overflow: hidden;
    height: 40px;
}

.h-divider .shadow::after {
    content: '';
    display: block;
    margin: -50px auto 0;
    width: 100%;
    height: 50px;
    border-radius: 125px / 24px;
    box-shadow: 0 0 16px var(--color-divider);
}

/* Im Footer zeigt der Bogen nach unten: Divider gespiegelt */
footer .h-divider {
    transform: scaleY(-1);
    margin-top: 0;
    margin-bottom: 12px;
}

/* ----- Hauptinhalt --------------------------------------------- */

main {
    padding: var(--space-content-top) 0 var(--space-content-bottom);
    min-height: 60vh;
    flex: 1 0 auto;   /* schiebt den Footer ans Seitenende */
}

/* ----- Footer ---------------------------------------------------
   "Sticky": klebt am unteren Bildschirmrand und ist dadurch
   IMMER sichtbar — auch wenn die Seite lang ist und man oben liest.
   Gleicher horizontaler Einzug wie der Header (--content-pad). */

footer {
    position: sticky;
    bottom: 0;
    z-index: 10;            /* über den Inhaltsebenen — sonst fängt die
                               unsichtbare Bühnen-Box die Maus vor den Links ab */
    pointer-events: none;   /* der transparente Footer-Körper selbst blockiert
                               nichts, was beim Scrollen hinter ihm liegt ... */
    padding-bottom: 12px;
    text-align: center;
}

footer a,
footer select,
footer button {
    pointer-events: auto;   /* ... nur seine Bedienelemente fangen die Maus */
}

/* Sicherheitsstopp: Ist das Fenster zu niedrig, würde der klebende
   Footer in den Header ragen — ab dieser Fensterhöhe abwärts löst er
   sich und steht normal am Seitenende. Wert bei Bedarf anpassen. */
@media (max-height: 620px) {
    footer {
        position: static;
    }
}

@media (min-width: 901px) {
    .main-wrapper {
        height: 100vh;
    }

    header,
    footer {
        flex: 0 0 auto;
    }

    footer {
        position: static;
    }

    main {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

.footer-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* links | FX-Leiste | rechts */
    align-items: center;
    padding-top: 4px;
}

.footer-left,
.footer-right {
    display: flex;
    gap: 20px;
    align-items: center;
}

.footer-left  { justify-self: start; }
.footer-right { justify-self: end; }

/* === S2-ÄNDERUNG 2026-06-08 ===
   Rechtliche Links links unten bewusst schlicht: untereinander,
   Fließtext-Schrift, klein, kein Versalsatz — sollen NICHT wie die
   Hauptnavigation wirken. Rechts (Discord) bleibt im Crimson-Stil. */
.footer-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.footer-left a {
    font-family: var(--font-text);
    text-transform: none;
    font-size: 1em;
    letter-spacing: 0;
}

/* === S2-ÄNDERUNG 2026-06-08 === Hover-Linie der Rechtslinks auf 1px */
.footer-left a::after {
    height: 1px;
}

.footer-center {
    font-family: var(--font-ui);
    font-size: 0.85em;
    color: var(--color-link);
    margin-top: 10px;
}

/* ----- Responsive ----------------------------------------------
   PC zuerst, aber Tablet/Phone bleiben sauber nutzbar. */

@media (max-width: 900px) {
    :root {
        --content-pad: 15px;
    }

    .main-wrapper {
        width: 100%;
    }

    .header-top {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        min-height: 0;
    }

    .server-info {
        align-items: center;
    }

    .login-form .login-row,
    .account-row {
        justify-content: center;
    }

    .btn-login,
    .btn-logout {
        margin: 0 auto;
    }

    .nav-container {
        flex-direction: column;
        gap: 12px;
    }

    .main-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .main-nav li {
        margin: 4px 0;
    }

    /* === S2-ÄNDERUNG 2026-06-07 ===
       Bugfix: .footer-nav ist display:grid — flex-direction war
       auf Grid wirkungslos (stiller No-Op), der Footer stapelte
       sich nie. Korrekt: Grid auf eine Spalte umschalten. */
    .footer-nav {
        /* flex-direction: column; */
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .footer-left,
    .footer-right {
        justify-content: center;
        justify-self: center;   /* === S2-ÄNDERUNG 2026-06-07 === Grid-Zentrierung statt start/end */
        width: 100%;
    }
}

/* ============================================================
   === S2-ÄNDERUNG 2026-06-07 (Schritt 2) ===
   BURGER-NAVIGATION — Basisstyles. Auf Desktop/Tablet komplett
   unsichtbar (Button: display none, Panel: hidden-Attribut).
   Sichtbar wird der Button nur in der 600px-Query oben.
   ============================================================ */

/* Burger-Knopf: sitzt oben rechts auf der Creme-Fläche
   (absolut zum .main-wrapper, der position:relative hat) */
.burger-button {
    display: none;              /* Desktop/Tablet: aus */
    position: absolute;
    top: 14px;                  /* Abstand zur Papier-Oberkante — Regler */
    right: 12px;                /* Abstand zur rechten Kante — Regler */
    z-index: 20;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: none;
    border: none;
    color: var(--color-link);
    cursor: pointer;
    transition: color 0.2s ease;
}

.burger-button:hover {
    color: var(--color-link-hover);
}

/* Menüpanel: klappt unter dem Knopf auf, gleiche Papieroptik
   wie die Inhaltsfläche, liegt über allem Inhalt */
.burger-menu {
    position: absolute;
    top: 56px;                  /* Abstand zur Papier-Oberkante — Regler */
    left: 10px;
    right: 10px;
    z-index: 25;
    padding: 16px 10px;
    background-color: var(--color-content);
    background-image: url('../images/paper.jpg?v=2');
    background-repeat: repeat;
    border: 1px solid var(--color-input-border);
    border-radius: 2px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
}

/* Dunkelmodus: gleiches Rausch-Korn wie die Inhaltsfläche
   (identische SVG-Turbulenz, sonst bliebe hier Paper stehen) */
html[data-mode="dunkel"] .burger-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Linkgruppen: vertikal, zentriert */
.burger-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Sekundärlinks (Recht & Discord) bewusst kleiner — untergeordnet */
.burger-sekundaer a {
    font-size: 0.8em;
}

/* Trennlinie zwischen Haupt- und Sekundärgruppe */
.burger-trenner {
    height: 1px;
    margin: 14px 28px;
    background: color-mix(in srgb, var(--color-divider) 40%, transparent);
}

/* Aktiver Punkt: gleiche Semantik wie in der Hauptnavigation */
.burger-menu a.active {
    color: var(--color-accent);
    font-weight: bold;
}


/* ============================================================
   FARBSCHEMEN — obsidian / arcane / scarlet / nature / royal
   arcane ist der Standard und lebt oben in :root.
   Jedes Schema überschreibt nur: Gradient (3 Werte), Akzent
   und die zwei Partikelfarben. Alle Hex-Werte sind Startwerte
   zum Feintunen — pro Schema ein Block, eine Stelle.
   ============================================================ */

/* OBSIDIAN — fast Schwarz bis Dunkelgrau, silbergoldene Partikel */
html[data-scheme="obsidian"] {
    --color-bg-glow:     #3c3c41;
    --color-bg-mid:      #1d1d20;
    --color-bg-outer:    #0a0a0b;
    --fx-particle-color: #ded6b8;
    --fx-particle-line:  #efe9d5;
}

/* SCARLET — dunkles Rot mit einem Hauch Wein, goldene Partikel */
html[data-scheme="scarlet"] {
    --color-bg-glow:     #7d1f2e;
    --color-bg-mid:      #46101c;
    --color-bg-outer:    #16060a;
    --fx-particle-color: #ffd27a;
    --fx-particle-line:  #ffe3a8;
}

/* NATURE — dunkles Waldgrün, orange Partikel (Glow folgt als Patch) */
html[data-scheme="nature"] {
    --color-bg-glow:     #2c5e38;
    --color-bg-mid:      #143323;
    --color-bg-outer:    #06140c;
    --fx-particle-color: #ffa040;
    --fx-particle-line:  #ffc080;
}

/* ROYAL — Navyblau, silberne Partikel */
html[data-scheme="royal"] {
    --color-bg-glow:     #2a4a80;
    --color-bg-mid:      #14264a;
    --color-bg-outer:    #060d1c;
    --fx-particle-color: #d9dee8;
    --fx-particle-line:  #eef1f6;
}

/* ============================================================
   FX-LEISTE im Footer: zwei Dropdowns + Auge-Schalter
   ============================================================ */

.fx-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;                  /* 10px Luft zwischen allen Elementen */
    pointer-events: none;       /* nur die Bedienelemente fangen die Maus */
}

.fx-bar select,
.fx-bar label,
.fx-bar .fx-eye {
    pointer-events: auto;
}

/* Checkbox-Schalter (Nebel, Cursor) */
.fx-bar label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-ui);
    font-size: 0.85em;
    color: var(--color-link);
    cursor: pointer;
    white-space: nowrap;
}

.fx-bar input[type="checkbox"] {
    accent-color: var(--color-accent);
    cursor: pointer;
}

.fx-bar select {
    width: 110px;               /* alle Dropdowns gleich breit */
    font-family: var(--font-ui);
    font-size: 0.85em;
    color: var(--color-link);
    background: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    border-radius: 2px;
    padding: 2px 6px;
    cursor: pointer;
}

.fx-bar select:focus {
    outline: none;
    border-color: var(--color-link);
}

/* Aufgeklappte Listen: dunkle Schemafarbe statt System-Hellgrau */
.fx-bar option {
    background-color: var(--color-bg-mid);
    color: #f0e8d4;
}

/* Auswahl-Hervorhebung: Schema-Glow statt System-Blau.
   Der Verlauf-Trick zwingt den Browser, seine blaue
   Standardmarkierung durch unsere Farbe zu ersetzen. */
.fx-bar option:checked,
.fx-bar option:hover {
    background-color: var(--color-bg-glow);   /* Firefox/Librewolf: solide Farbe */
    background-image: linear-gradient(var(--color-bg-glow), var(--color-bg-glow));
                                              /* Chrome: Verlauf verdraengt das Systemblau */
    color: #ffffff;
}

/* Auge-Schalter: blendet die Dropdowns ein/aus */
.fx-eye {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--color-link);
    opacity: 0.85;
    display: flex;
    align-items: center;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.fx-eye:hover {
    color: var(--color-link-hover);
}

/* ----- Eigenbau-Dropdowns (browseruebergreifend identisch) -----
   Das native <select> bleibt unsichtbar als Werttraeger erhalten;
   ohne JavaScript erscheint es als Fallback. */

.s2dd {
    position: relative;
    pointer-events: auto;
}

.s2dd-original {
    display: none;   /* wird vom Eigenbau ersetzt */
}

.s2dd-knopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    width: 110px;               /* gleiche Breite wie zuvor die Selects */
    padding: 2px 6px;
    font-family: var(--font-ui);
    font-size: 0.85em;
    text-align: left;
    color: var(--color-link);
    background: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    border-radius: 2px;
    cursor: pointer;
}

.s2dd-knopf::after {
    content: '\25BE';          /* kleines Dreieck */
    font-size: 0.8em;
    opacity: 0.7;
}

.s2dd-knopf:hover {
    border-color: var(--color-link);
}

/* Liste klappt nach OBEN auf (Leiste sitzt am Seitenende) */
.s2dd-liste {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    margin: 0;
    padding: 3px;
    list-style: none;
    background: var(--color-bg-mid);
    border: 1px solid var(--color-input-border);
    border-radius: 2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    z-index: 30;
}

.s2dd-liste li {
    padding: 3px 8px;
    font-family: var(--font-ui);
    font-size: 0.85em;
    color: #f0e8d4;
    border-radius: 2px;
    white-space: nowrap;
    cursor: pointer;
}

/* Konsistente Semantik in JEDEM Browser:
   Hover = volle Glow-Markierung, aktuelle Auswahl = fett + Glow-Ton */
.s2dd-liste li:hover {
    background: var(--color-bg-glow);
    color: #ffffff;
}

.s2dd-liste li.selected {
    font-weight: bold;
    background: color-mix(in srgb, var(--color-bg-glow) 35%, transparent);
}

.s2dd-liste li.selected:hover {
    background: var(--color-bg-glow);
}

/* Eingeklappt: Bedienelemente weg, nur das seichte dunkle Auge bleibt */
.fx-bar.collapsed select,
.fx-bar.collapsed label,
.fx-bar.collapsed .s2dd {
    display: none;
}

.fx-bar.collapsed .fx-eye {
    opacity: 0.35;
}


/* ============================================================
   HELL/DUNKEL-MODUS — Anker fuer das kommende Dark Theme.
   data-mode="dunkel" am <html> aktiviert diesen Block.
   Schriftfarben in hellem Gold-Silber folgen nach Auras Ansage;
   bis dahin aendert "Dunkel" bewusst noch nichts.
   ============================================================ */
html[data-mode="dunkel"] {
    /* Inhaltsflaeche = mittlere Schemafarbe, 50% abgedunkelt */
    --color-content:     color-mix(in srgb, var(--color-bg-mid) 50%, #000000);

    /* Schrift durchgehend Silber-Gold, auch Mitspielen/Akzent */
    --color-text:        var(--color-silvergold);
    --color-heading:     #e6dcbc;
    --color-link:        var(--color-silvergold);
    --color-accent:      var(--color-silvergold);

    /* Divider-Schatten hell, sonst unsichtbar auf dunklem Grund */
    --color-divider:     color-mix(in srgb, var(--color-silvergold) 60%, transparent);

    /* Eingabefelder: dunkler Grund, Silber-Gold-Rahmen */
    --color-input-bg:     rgba(0, 0, 0, 0.35);
    --color-input-border: color-mix(in srgb, var(--color-silvergold) 50%, transparent);
}

/* Dunkelmodus: statt Paper ein hauchfeines Rausch-Korn (raue Oberflaeche).
   Erzeugt rein im Code per SVG-Turbulenz — keine Bilddatei noetig.
   Staerke-Regler: slope='0.05' (= 5% Sichtbarkeit) in der Daten-URL. */
html[data-mode="dunkel"] .main-wrapper {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}


/* === S2-ÄNDERUNG 2026-06-07 ===
   PHONE-LAYOUT (max. 600px): nur Variablen-Overrides und
   Ausblendungen — Desktop und Tablet bleiben unberührt.
   Alle Werte sind Startwerte zum Feintunen.
   WICHTIG: Diese Query MUSS am DATEIENDE stehen — Media Queries
   erhöhen die Spezifität nicht, bei Gleichstand gewinnt die
   spätere Regel. Stünde sie weiter oben, würden die Basisblöcke
   (FX-Leiste, Burger) ihre display-Regeln wieder überschreiben. */
@media (max-width: 600px) {
    :root {
        --content-pad: 12px;                 /* Innenabstand der Creme-Fläche */
        --logo-width: 220px;                 /* Logo verkleinert */
        --edge-shade-width: 10px;            /* Randschatten schmaler */
        --page-art-width: min(550px, 88vw);  /* Schwert nie breiter als der Viewport */
        --page-art-top: -90px;               /* Versatz proportional verkleinert — Regler */
    }

    /* Goldständer schmaler (Breite ist kein :root-Regler, daher hier) */
    .gold-rail {
        width: 4px;
    }

    /* Effekt-Ebene aus: auf Phone zählt nur die Inhaltsfläche */
    #skyfield {
        display: none;
    }

    /* FX-Leiste aus — Effekte werden mobil nicht umgestellt */
    .fx-bar {
        display: none;
    }

    /* Sticky-Footer lösen: frisst auf Phone zu viel Bildschirmhöhe.
       (Footer wandert in Schritt 2 komplett in den Burger.) */
    footer {
        position: static;
    }

    /* === S2-ÄNDERUNG 2026-06-08 ===
       Login mobil: Felder mittig wie der Anmelden-Button. Da die
       Labels „Name" und „Pass" gleich lang sind, fluchten die Felder
       beim zeilenweisen Zentrieren sauber. „Passwort" → „Pass" über
       das ausgeblendete .pw-rest. */
    .login-form {
        max-width: 100%;
    }

    .login-form .login-row {
        justify-content: center;
    }

    .pw-rest {
        display: none;
    }

    /* === S2-ÄNDERUNG 2026-06-07 (Schritt 2) ===
       Burger ersetzt auf Phone die Hauptnavigation und die
       Footer-Linkleiste. Die Copyright-Zeile bleibt als einzige
       Mini-Zeile am Seitenende stehen. */
    .burger-button {
        display: flex;
    }

    .main-nav {
        display: none;
    }

    .footer-nav {
        display: none;
    }
}