/* ===========================================================================
   Oeffentliche Website voxaria.net (Spec 2026-09-22, Abschnitt 7).
   Eigener, kleiner Stil - unabhaengig von stil.css des Dashboards.

   Vertrag mit `src/web/website-html.ts` (dort steht die Struktur, hier nur
   das Aussehen): <html> traegt `data-vorlage`, `data-kartenstil`,
   `data-aurora`, `data-kopf`; <body class="w-seite">; Breitenbahn ist
   `.w-bahn`; ein Abschnitt ist
   `section.w-abschnitt.w-typ-<typ>.w-breite-<b>.w-abstand-<a>.w-hg-<art>`.
   Die Design-Variablen kommen aus `designCss` als `:root{…}` im Kopf; die
   Werte hier sind nur die Rueckfallebene und liegen deshalb in einer eigenen
   Kaskadenschicht.

   Reihenfolge: Schriften, Tokens, Grundlagen, Hintergrund, Kopf, Abschnitte,
   Bausteine, Abschnittstypen, Fusszeile, Vorlagen, Breakpoints, Ruhe, Druck.
   Handy zuerst (375 px), danach min-width 480 / 720 / 1100.
   Keine Fremd-Adressen: alles liegt unter /schriften und /website.
   =========================================================================== */

/* ------------------------------------------------------------------ Schriften */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: local("Inter"), url("/schriften/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: local("Inter"), url("/schriften/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: local("Lora"), url("/schriften/lora-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: local("Lora"), url("/schriften/lora-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: local("JetBrains Mono"), url("/schriften/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: local("JetBrains Mono"), url("/schriften/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* --------------------------------------------------------------------- Tokens */
/* Die Vorgaben liegen in einer eigenen Kaskadenschicht: unbeschichtete Regeln
   gewinnen immer gegen beschichtete, egal in welcher Reihenfolge sie stehen.
   So setzt sich das <style> mit `designCss` durch - auch dann, wenn es im Kopf
   vor dem <link> auf diese Datei stuende. */
@layer w-vorgabe {
  :root {
    color-scheme: dark;

    /* Farben - Vorlage „reich“ als Rueckfall (designCss setzt die echten). */
    --w-bg: #140d1f;
    --w-bg-tief: #0b0714;
    --w-karte: #20162f;
    --w-rand: #3d2c57;
    --w-text: #f4ece0;
    --w-dezent: #c3b0d2;
    --w-akzent: #c49bf5;
    --w-gold: #e3b84a;
    --w-ok: #5fd39a;
    --w-fehler: #ff8080;

    /* Gestalt - ebenfalls aus designCss. */
    --w-radius: 14px;
    --w-ornamente: 0.8;
    --w-koernung: 0.25;
    --w-schrift-display: "Lora", Georgia, "Times New Roman", serif;
    --w-schrift-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  }
}

:root {
  /* Abgeleitet - nie von designCss gesetzt. */
  --w-radius-klein: calc(var(--w-radius) * 0.5);
  --w-radius-gross: calc(var(--w-radius) * 1.7);
  --w-breite-schmal: 44rem;
  --w-breite-normal: 60rem;
  --w-breite-breit: 78rem;
  --w-gasse: 16px;
  --w-kopf-hoehe: 58px;
  --w-schatten: 0 18px 44px rgba(0, 0, 0, .45);
  --w-schatten-klein: 0 6px 18px rgba(0, 0, 0, .3);

  /* Toenungen: erst eine feste Rueckfallfarbe, dann die gemischte. */
  --w-ton-akzent: rgba(255, 255, 255, .08);
  --w-ton-akzent: color-mix(in srgb, var(--w-akzent) 14%, transparent);
  --w-ton-gold: rgba(255, 255, 255, .08);
  --w-ton-gold: color-mix(in srgb, var(--w-gold) 16%, transparent);
  --w-ton-karte: rgba(255, 255, 255, .05);
  --w-ton-karte: color-mix(in srgb, var(--w-karte) 80%, transparent);
  --w-linie: rgba(255, 255, 255, .14);
  --w-linie: color-mix(in srgb, var(--w-rand) 88%, transparent);

  /* Abstaende je Abschnitt (Handy; groessere Schirme legen zu). */
  --w-abstand-eng: 22px;
  --w-abstand-normal: 40px;
  --w-abstand-weit: 64px;

  /* Kartenstil - die vier Auspraegungen setzen nur diese vier Werte. */
  --w-karte-flaeche: var(--w-ton-karte);
  --w-karte-rand: 1px solid var(--w-linie);
  --w-karte-schatten: var(--w-schatten-klein);
  --w-karte-ecke: none;
}

/* ------------------------------------------------------------------ Kartenstil */
html[data-kartenstil="gold"] {
  --w-karte-flaeche: var(--w-ton-karte);
  --w-karte-rand: 1px solid var(--w-gold);
  --w-karte-schatten: var(--w-schatten-klein), inset 0 1px 0 var(--w-ton-gold);
  --w-karte-ecke: block;
}
html[data-kartenstil="glas"] {
  --w-karte-flaeche: rgba(255, 255, 255, .05);
  --w-karte-rand: 1px solid rgba(255, 255, 255, .16);
  --w-karte-schatten: var(--w-schatten), inset 0 1px 0 rgba(255, 255, 255, .12);
}
html[data-kartenstil="rahmen"] {
  --w-karte-flaeche: var(--w-karte);
  --w-karte-rand: 2px solid var(--w-rand);
  --w-karte-schatten: 6px 6px 0 var(--w-ton-gold);
}
html[data-kartenstil="flach"] {
  --w-karte-flaeche: var(--w-ton-karte);
  --w-karte-rand: 1px solid transparent;
  --w-karte-schatten: none;
}

/* ----------------------------------------------------------------- Grundlagen */
*, *::before, *::after { box-sizing: border-box; }

html {
  background-color: var(--w-bg-tief);
  background-image:
    radial-gradient(120% 70% at 18% -10%, var(--w-ton-akzent), transparent 60%),
    radial-gradient(90% 60% at 100% 0%, var(--w-ton-gold), transparent 55%),
    linear-gradient(180deg, var(--w-bg) 0%, var(--w-bg-tief) 100%);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--w-kopf-hoehe) + 12px);
}

body.w-seite {
  margin: 0;
  background: transparent;
  color: var(--w-text);
  font-family: var(--w-schrift-text);
  font-size: 16px;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--w-akzent); text-decoration-color: var(--w-linie); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--w-akzent); outline-offset: 2px; border-radius: var(--w-radius-klein); }

::selection { background: var(--w-ton-gold); color: var(--w-text); }

/* --------------------------------------------------------- Hintergrund-Ebenen */
/* Aurora (::before) und Koernung (::after) haengen am Body und liegen hinter
   dem Inhalt; die Grundfarbe traegt <html>, damit beide sichtbar bleiben.
   website-html.ts liefert dafuer keine eigenen Elemente - deshalb Pseudos. */
body.w-seite::before, body.w-seite::after {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
}

body.w-seite::before { display: none; }
html[data-aurora="an"] body.w-seite::before {
  display: block;
  background-repeat: no-repeat;
  background-size: 62vmax 62vmax, 54vmax 54vmax, 70vmax 70vmax;
  background-position: -12vmax -14vmax, 86vmax 6vmax, 26vmax 88vmax;
  background-image:
    radial-gradient(circle at 50% 50%, var(--w-akzent), transparent 66%),
    radial-gradient(circle at 50% 50%, var(--w-gold), transparent 66%),
    radial-gradient(circle at 50% 50%, var(--w-ok), transparent 70%);
  opacity: .32;
  filter: blur(46px);
  animation: w-aurora 40s ease-in-out infinite alternate;
  will-change: background-position;
}

@keyframes w-aurora {
  from { background-position: -12vmax -14vmax, 86vmax 6vmax, 26vmax 88vmax; }
  to { background-position: 14vmax 4vmax, 58vmax 30vmax, 4vmax 62vmax; }
}

body.w-seite::after {
  background-image: url("/website/ornamente/koernung.svg");
  background-size: 200px 200px;
  opacity: var(--w-koernung);
  mix-blend-mode: overlay;
}

/* ----------------------------------------------------------------- Sprunglink */
.w-skip {
  position: absolute; left: 12px; top: -90px; z-index: 40;
  padding: 10px 16px; border-radius: var(--w-radius);
  background: var(--w-karte); color: var(--w-text);
  border: 1px solid var(--w-gold); text-decoration: none;
  transition: top .15s ease;
}
.w-skip:focus { top: 12px; }

/* --------------------------------------------------------------------- Baender */
.w-band {
  margin: 0; padding: 10px var(--w-gasse);
  text-align: center; font-size: 14px;
  border-bottom: 1px solid var(--w-linie);
}
.w-band-vorschau { background: var(--w-ton-akzent); color: var(--w-text); }
.w-band-wartung { background: var(--w-ton-gold); color: var(--w-text); }

/* ------------------------------------------------------------------ Breitenbahn */
.w-bahn {
  position: relative; z-index: 1;
  max-width: var(--w-breite-normal);
  margin-inline: auto;
  padding-inline: var(--w-gasse);
}
.w-breite-normal > .w-bahn { max-width: var(--w-breite-normal); }
.w-breite-schmal > .w-bahn { max-width: var(--w-breite-schmal); }
.w-breite-breit > .w-bahn { max-width: var(--w-breite-breit); }
.w-breite-voll > .w-bahn { max-width: none; }

/* ----------------------------------------------------------------------- Kopf */
.w-kopf {
  position: relative; z-index: 20;
  border-bottom: 1px solid var(--w-linie);
  background: var(--w-ton-karte);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html[data-kopf="fest"] .w-kopf { position: sticky; top: 0; }

.w-kopf-bahn {
  max-width: var(--w-breite-breit);
  padding-block: 8px;
  min-height: var(--w-kopf-hoehe);
  display: flex; align-items: center; gap: 12px;
}

.w-marke {
  display: flex; align-items: center; gap: 10px;
  color: var(--w-text); text-decoration: none;
  font-family: var(--w-schrift-display);
  font-size: 20px; font-weight: 700; letter-spacing: .04em;
  margin-right: auto;
}
.w-marke-bild { width: 32px; height: 32px; border-radius: var(--w-radius-klein); object-fit: cover; flex: none; }
/* Ohne min-width schrumpft das Flex-Element nie unter seine Textbreite: ein
   langer Titel-Zusatz schoebe den Menue-Knopf aus dem Bild - und mit
   `overflow-x: hidden` am body waere er nicht mehr erreichbar. */
.w-marke { min-width: 0; }
.w-marke-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.w-nav { display: none; align-items: center; gap: 4px; }
.w-nav-link {
  display: inline-block; padding: 8px 12px;
  color: var(--w-dezent); text-decoration: none;
  border-radius: var(--w-radius-klein);
  font-size: 15px;
  transition: color .15s ease, background .15s ease;
}
.w-nav-link:hover { color: var(--w-text); background: var(--w-ton-akzent); }
.w-nav-aktiv { color: var(--w-gold); }
.w-nav .w-nav-aktiv::after {
  content: ""; display: block; height: 2px; margin-top: 4px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--w-gold), transparent);
}

/* Mobiles Menue: reines <details>, funktioniert auch ohne JavaScript. */
.w-menue { position: relative; margin-left: auto; flex: none; }
.w-menue-knopf {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 8px 14px;
  font-size: 15px; font-weight: 600;
  border: 1px solid var(--w-linie); border-radius: var(--w-radius-klein);
  background: var(--w-ton-karte);
}
.w-menue-knopf::-webkit-details-marker { display: none; }
.w-menue-knopf::after {
  content: ""; flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.w-menue[open] .w-menue-knopf { border-color: var(--w-gold); color: var(--w-gold); }
.w-menue[open] .w-menue-knopf::after { transform: translateY(2px) rotate(225deg); }

.w-menue-nav {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: min(74vw, 260px);
  display: flex; flex-direction: column;
  padding: 8px; gap: 2px;
  background: var(--w-karte);
  border: 1px solid var(--w-linie);
  border-radius: var(--w-radius);
  box-shadow: var(--w-schatten);
}
.w-menue-nav .w-nav-link { padding: 10px 12px; color: var(--w-text); }
.w-menue-nav .w-nav-aktiv { color: var(--w-gold); background: var(--w-ton-akzent); }

/* --------------------------------------------------------------------- Haupt */
.w-main { flex: 1 0 auto; display: block; }
.w-leer { min-height: 40vh; }

/* Platzhalterseite, solange nichts veroeffentlicht ist. */
.w-leerseite { display: block; text-align: center; padding-block: 18vh; }
.w-leerseite h1 { font-family: var(--w-schrift-display); font-size: clamp(36px, 10vw, 72px); margin: 0 0 12px; letter-spacing: .08em; }
.w-leerseite p { color: var(--w-dezent); }
.w-leerseite code { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; color: var(--w-gold); }

/* ------------------------------------------------------------------ Abschnitt */
.w-abschnitt { position: relative; padding-block: var(--w-abstand-normal); }
.w-abstand-eng { padding-block: var(--w-abstand-eng); }
.w-abstand-weit { padding-block: var(--w-abstand-weit); }

/* Hintergrund je Abschnitt als eigene Ebene, damit Bild und Abdunkeln
   getrennt bleiben und der Inhalt immer darueber liegt. */
.w-hg-verlauf::before, .w-hg-bild::before, .w-hg-ornament::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.w-hg-verlauf::before {
  background:
    radial-gradient(90% 120% at 50% 0%, var(--w-a-farbe, var(--w-ton-akzent)), transparent 70%),
    linear-gradient(180deg, var(--w-ton-gold), transparent 60%);
}
.w-hg-ornament::before {
  background-image: linear-gradient(180deg, var(--w-gold), var(--w-akzent));
  -webkit-mask-image: url("/website/ornamente/muster.svg");
  mask-image: url("/website/ornamente/muster.svg");
  -webkit-mask-size: 48px 48px;
  mask-size: 48px 48px;
  opacity: calc(var(--w-ornamente) * .3);
}
.w-hg-bild::before {
  background-image:
    linear-gradient(rgba(0, 0, 0, var(--w-a-dunkel, .45)), rgba(0, 0, 0, var(--w-a-dunkel, .45))),
    var(--w-a-bild, none);
  background-size: cover;
  background-position: center;
}
.w-hg-karte > .w-bahn {
  padding: clamp(18px, 4vw, 34px);
  background: var(--w-a-farbe, var(--w-karte-flaeche));
  border: var(--w-karte-rand);
  border-radius: var(--w-radius-gross);
  box-shadow: var(--w-karte-schatten);
}
html[data-kartenstil="glas"] .w-hg-karte > .w-bahn { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* --------------------------------------------------------------- Typografie */
.w-abschnitt-titel {
  font-family: var(--w-schrift-display);
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1.2;
  margin: 0 0 18px;
  letter-spacing: .01em;
}
.w-abschnitt-titel::after {
  content: ""; display: block;
  width: 56px; height: 2px; margin-top: 10px; border-radius: 2px;
  background: linear-gradient(90deg, var(--w-gold), transparent);
}
.w-aus-mitte .w-abschnitt-titel::after { margin-inline: auto; }
.w-aus-rechts .w-abschnitt-titel::after { margin-inline-start: auto; }

.w-fliess { color: var(--w-text); }
/* Freitext darf bis zu 8000 Zeichen lang sein und rohe Adressen enthalten.
   Ohne Umbruch waere eine lange URL auf dem Handy breiter als die Bahn - und
   weil `body.w-seite` `overflow-x: hidden` setzt, stumm abgeschnitten. */
.w-fliess, .w-fliess :is(p, li, blockquote, h3, h4), .w-regel-text, .w-antwort, .w-regel-titel, .w-frage-kopf, .w-fuss-text { overflow-wrap: anywhere; }
:is(.w-fliess code, .w-ip-text, .w-status-feld code) { overflow-wrap: anywhere; }
.w-fliess > :first-child { margin-top: 0; }
.w-fliess > :last-child { margin-bottom: 0; }
.w-fliess p { margin: 0 0 14px; }
.w-fliess h3, .w-fliess h4 {
  font-family: var(--w-schrift-display);
  line-height: 1.25; margin: 26px 0 10px;
}
.w-fliess h3 { font-size: clamp(19px, 3.6vw, 23px); color: var(--w-gold); }
.w-fliess h4 { font-size: 17px; }
.w-fliess strong { color: var(--w-gold); font-weight: 600; }
.w-fliess ol { margin: 0 0 16px; padding-left: 22px; }
.w-fliess ul { margin: 0 0 16px; padding-left: 0; list-style: none; }
.w-fliess li { margin: 6px 0; }
.w-fliess ul > li { position: relative; padding-left: 22px; }
.w-fliess ul > li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 9px; height: 9px;
  background: var(--w-gold);
  -webkit-mask-image: url("/website/ornamente/raute.svg");
  mask-image: url("/website/ornamente/raute.svg");
  -webkit-mask-size: contain; mask-size: contain;
}
.w-fliess blockquote {
  margin: 18px 0; padding: 10px 16px;
  border-left: 3px solid var(--w-gold);
  background: var(--w-ton-karte);
  border-radius: 0 var(--w-radius-klein) var(--w-radius-klein) 0;
  color: var(--w-dezent);
}
.w-fliess code {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: .92em; padding: 2px 6px;
  border-radius: var(--w-radius-klein);
  background: var(--w-ton-akzent);
}
.w-fliess hr { border: 0; border-top: 1px solid var(--w-linie); margin: 24px 0; }

/* Huellen der Bausteine: gleicher Abstand zwischen Ueberschrift und Inhalt. */
:is(.w-schritte, .w-regeln, .w-faq, .w-zahlen, .w-video, .w-textbild-text) > .w-abschnitt-titel { margin-bottom: 18px; }
.w-schritt-inhalt, .w-fuss-spalte { min-width: 0; }
.w-sozial-text { white-space: nowrap; }

/* -------------------------------------------------------------------- Karten */
/* Eine Liste, vier Auspraegungen - gesteuert ueber die --w-karte-*-Tokens. */
.w-kachel, .w-status, .w-schritt, .w-regel, .w-frage {
  background: var(--w-karte-flaeche);
  border: var(--w-karte-rand);
  border-radius: var(--w-radius);
  box-shadow: var(--w-karte-schatten);
}
html[data-kartenstil="glas"] :is(.w-kachel, .w-status, .w-schritt, .w-regel, .w-frage) {
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
html[data-kartenstil="gold"] :is(.w-kachel, .w-status, .w-schritt, .w-regel, .w-frage) {
  border-color: color-mix(in srgb, var(--w-gold) 45%, transparent);
}
/* Eckzier nur beim Kartenstil „gold“ und nur auf den grossen Flaechen -
   auf kleinen Karten wirkt sie wie ein Fehler. */
.w-status, .w-hg-karte > .w-bahn { position: relative; }
.w-status::before, .w-status::after,
.w-hg-karte > .w-bahn::before, .w-hg-karte > .w-bahn::after {
  content: ""; display: var(--w-karte-ecke);
  position: absolute;
  width: 30px; height: 30px;
  background: var(--w-gold);
  -webkit-mask-image: url("/website/ornamente/ecke.svg");
  mask-image: url("/website/ornamente/ecke.svg");
  -webkit-mask-size: contain; mask-size: contain;
  opacity: calc(var(--w-ornamente) * .9);
  pointer-events: none;
}
.w-status::before, .w-hg-karte > .w-bahn::before { left: 7px; top: 7px; }
.w-status::after, .w-hg-karte > .w-bahn::after { right: 7px; bottom: 7px; transform: rotate(180deg); }

/* ------------------------------------------------------------------- Knoepfe */
.w-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.w-knoepfe.w-aus-mitte { justify-content: center; }
.w-knoepfe.w-aus-rechts { justify-content: flex-end; }

.w-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 20px;
  border: 1px solid transparent; border-radius: var(--w-radius);
  font: inherit; font-weight: 600; font-size: 15px;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.w-knopf:hover { transform: translateY(-2px); }
.w-knopf:active { transform: translateY(0); }

.w-knopf-ok {
  color: var(--w-bg-tief);
  background: linear-gradient(135deg, var(--w-gold), var(--w-akzent));
  box-shadow: var(--w-schatten-klein);
}
.w-knopf-ok:hover { box-shadow: var(--w-schatten); }

.w-knopf-leise { color: var(--w-text); background: var(--w-ton-karte); border-color: var(--w-linie); }
.w-knopf-leise:hover { border-color: var(--w-gold); color: var(--w-gold); }

.w-knopf-gefahr { color: var(--w-fehler); background: transparent; border-color: var(--w-fehler); }
.w-knopf-gefahr:hover { background: var(--w-fehler); color: var(--w-bg-tief); }

/* Kopier-Knopf fuer Adressen (Held und Serverstatus). */
.w-ip-knopf {
  min-height: 38px; padding: 7px 14px;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--w-text); background: var(--w-ton-akzent);
  border: 1px solid var(--w-linie); border-radius: var(--w-radius-klein);
  transition: color .15s ease, border-color .15s ease;
}
.w-ip-knopf:hover { border-color: var(--w-gold); color: var(--w-gold); }
.w-ip-knopf[data-kopiert="ja"] { color: var(--w-ok); border-color: var(--w-ok); }
.w-ip-knopf[data-kopiert="nein"] { color: var(--w-fehler); border-color: var(--w-fehler); }

/* -------------------------------------------------------------- Statuspunkt */
.w-punkt {
  display: inline-block; flex: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--w-dezent);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .08);
}
.w-punkt[data-status="online"] { background: var(--w-ok); animation: w-pulsen 2.4s ease-in-out infinite; }
.w-punkt[data-status="wartung"], .w-punkt[data-status="startet"] { background: var(--w-gold); }
.w-punkt[data-status="offline"] { background: var(--w-fehler); }

@keyframes w-pulsen {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); }
  50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, .02); }
}

/* ----------------------------------------------------------------------- Held */
.w-typ-held { overflow: hidden; }
.w-held { position: relative; text-align: center; }
.w-held-hintergrund {
  position: absolute; inset: calc(var(--w-abstand-weit) * -1) calc(var(--w-gasse) * -1);
  z-index: 0; overflow: hidden; border-radius: var(--w-radius-gross);
}
.w-held-hintergrund::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .78));
}
.w-held-bild { width: 100%; height: 100%; object-fit: cover; }

.w-held-inhalt {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
/* Wappen ueber dem Titel - rein dekorativ, faellt ohne Ornamente weg. */
.w-held-inhalt::before {
  content: "";
  width: clamp(64px, 16vw, 100px); height: clamp(75px, 19vw, 118px);
  background: linear-gradient(180deg, var(--w-gold), var(--w-akzent));
  -webkit-mask-image: url("/website/ornamente/wappen.svg");
  mask-image: url("/website/ornamente/wappen.svg");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  opacity: var(--w-ornamente);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5));
}

.w-held-titel {
  font-family: var(--w-schrift-display);
  font-size: clamp(38px, 12vw, 84px);
  line-height: 1.02;
  margin: 0;
  letter-spacing: .06em;
  text-wrap: balance;
}
.w-held-titel::after { content: none; }
.w-held-unter {
  margin: 0; max-width: 46rem;
  color: var(--w-dezent);
  font-size: clamp(16px, 3.6vw, 20px);
  text-wrap: pretty;
}

.w-ip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--w-linie); border-radius: var(--w-radius);
  background: var(--w-ton-karte);
}
.w-ip-text {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: clamp(15px, 4vw, 19px); letter-spacing: .06em;
  color: var(--w-gold);
}
.w-held-knoepfe { justify-content: center; }

/* ----------------------------------------------------------------------- Text */
.w-text .w-fliess { max-width: 70ch; }
.w-aus-mitte { text-align: center; }
.w-aus-mitte .w-fliess { margin-inline: auto; }
.w-aus-mitte .w-fliess ul > li { display: inline-block; text-align: left; }
.w-aus-rechts { text-align: right; }
.w-aus-rechts .w-fliess { margin-inline-start: auto; }

/* ------------------------------------------------------------- Text mit Bild */
.w-textbild { display: grid; gap: clamp(16px, 4vw, 32px); align-items: center; }
.w-textbild .w-abschnitt-titel { margin-bottom: 12px; }
.w-textbild-figur { margin: 0; }
.w-textbild-bild { width: 100%; border-radius: var(--w-radius); box-shadow: var(--w-schatten-klein); }

/* -------------------------------------------------------------------- Schritte */
.w-schritt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.w-schritt {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  padding: 16px;
}
.w-schritt-nummer {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  font-family: var(--w-schrift-display); font-size: 19px; font-weight: 700;
  color: var(--w-bg-tief);
  background: linear-gradient(135deg, var(--w-gold), var(--w-akzent));
}
.w-schritt-titel { margin: 0 0 6px; font-family: var(--w-schrift-display); font-size: 18px; }
.w-schritt-bild { width: 100%; margin-top: 10px; border-radius: var(--w-radius-klein); }

/* -------------------------------------------------------------- Regeln und FAQ */
.w-regel-liste, .w-faq-liste { display: grid; gap: 10px; margin: 0; padding: 0; }
.w-regel-nummern { list-style: none; counter-reset: w-regel; }
.w-regel, .w-frage { overflow: hidden; }
.w-regel[open], .w-frage[open] { border-color: color-mix(in srgb, var(--w-gold) 50%, var(--w-rand)); }

.w-regel-kopf, .w-frage-kopf {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 14px 16px; min-height: 48px;
  font-family: var(--w-schrift-display); font-size: 17px; font-weight: 600;
}
.w-regel-kopf::-webkit-details-marker, .w-frage-kopf::-webkit-details-marker { display: none; }
details > .w-regel-kopf:hover, .w-frage-kopf:hover { background: var(--w-ton-akzent); }
/* Aufklapp-Pfeil nur bei den aufklappbaren Formen. */
details > .w-regel-kopf::after, .w-frage-kopf::after {
  content: ""; margin-left: auto; flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--w-dezent); border-bottom: 2px solid var(--w-dezent);
  transform: rotate(45deg); transform-origin: 65% 65%;
  transition: transform .2s ease;
}
.w-regel[open] > .w-regel-kopf::after, .w-frage[open] > .w-frage-kopf::after { transform: rotate(225deg); }
/* Nummerierte Liste statt Akkordeon. */
.w-regel-nummern .w-regel { counter-increment: w-regel; }
.w-regel-nummern .w-regel-kopf { cursor: default; }
.w-regel-nummern .w-regel-kopf::before {
  content: counter(w-regel) ".";
  flex: none; color: var(--w-gold);
  font-variant-numeric: tabular-nums;
}
.w-regel-icon { flex: none; font-size: 19px; line-height: 1; }
.w-regel-titel, .w-frage-kopf { min-width: 0; }
.w-regel-text, .w-antwort { padding: 0 16px 16px; color: var(--w-dezent); }
.w-regel-nummern .w-regel-text { padding-top: 0; }

/* -------------------------------------------------------------------- Zahlen */
.w-kacheln {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.w-kachel {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 12px; text-align: center;
}
.w-kachel-wert {
  font-family: var(--w-schrift-display);
  font-size: clamp(28px, 7vw, 40px); font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--w-gold), var(--w-akzent));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.w-kachel-label { font-size: 13px; color: var(--w-dezent); letter-spacing: .04em; text-transform: uppercase; }

/* -------------------------------------------------------------- Serverstatus */
.w-status { display: grid; gap: 14px; padding: clamp(16px, 3.4vw, 24px); }
.w-status .w-abschnitt-titel { margin-bottom: 0; }
.w-status-zustand { display: flex; align-items: center; gap: 10px; margin: 0; }
.w-status-text { font-weight: 600; }
.w-status-daten { display: grid; gap: 8px; margin: 0; }
.w-status-feld {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding-bottom: 8px; border-bottom: 1px dashed var(--w-linie);
}
.w-status-feld:last-child { border-bottom: 0; padding-bottom: 0; }
.w-status-feld dt { margin: 0; font-size: 13px; color: var(--w-dezent); text-transform: uppercase; letter-spacing: .05em; }
.w-status-feld dd { margin: 0 0 0 auto; display: flex; align-items: center; gap: 10px; font-weight: 600; }
.w-status-feld code {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color: var(--w-gold);
}
.w-status-hinweis { margin: 0; font-size: 14px; color: var(--w-dezent); }

/* --------------------------------------------------------------------- Video */
.w-video-text { margin: 0 0 12px; color: var(--w-dezent); }
.w-video-link {
  position: relative; display: block;
  border-radius: var(--w-radius); overflow: hidden;
  border: 1px solid var(--w-linie);
}
.w-video-bild { width: 100%; }
.w-video-platz {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--w-ton-akzent), var(--w-ton-gold));
}
.w-video-play {
  position: absolute; inset: 0; margin: auto;
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 26px; line-height: 1; color: var(--w-gold);
  background: var(--w-ton-gold);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 2px solid var(--w-gold);
}
.w-video-link:hover .w-video-play { background: var(--w-gold); color: var(--w-bg-tief); }

/* ----------------------------------------------------------------- Bildbanner */
.w-typ-bildBanner { padding-block: 0; }
.w-typ-bildBanner > .w-bahn { padding-inline: 0; }
.w-banner { position: relative; }
.w-banner-bild { width: 100%; object-fit: cover; height: clamp(160px, 38vw, 260px); }
.w-banner-klein .w-banner-bild { height: clamp(120px, 26vw, 180px); }
.w-banner-gross .w-banner-bild { height: clamp(220px, 56vw, 420px); }
.w-banner-beschriftung {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(16px, 4vw, 32px);
  background: linear-gradient(0deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .35));
  text-align: center;
}
.w-banner-titel { margin: 0 0 6px; font-family: var(--w-schrift-display); font-size: clamp(22px, 5vw, 36px); }
.w-banner-titel::after { content: none; }
.w-banner-text { margin: 0; color: var(--w-dezent); }
/* Ohne Bild bleibt nur die Beschriftung - dann braucht sie eine Flaeche. */
.w-banner-beschriftung:only-child { position: static; background: var(--w-ton-karte); border-radius: var(--w-radius); }

/* -------------------------------------------------------------------- Trenner */
.w-typ-trenner { padding-block: var(--w-abstand-eng); }
.w-trenner { display: flex; justify-content: center; }
.w-trenner-figur {
  display: block;
  width: min(360px, 80%); height: 40px;
  background: linear-gradient(90deg, transparent, var(--w-gold), transparent);
  -webkit-mask-image: url("/website/ornamente/trenner.svg");
  mask-image: url("/website/ornamente/trenner.svg");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  opacity: calc(.3 + var(--w-ornamente) * .7);
}
.w-trenner-linie .w-trenner-figur {
  height: 1px; width: 100%;
  -webkit-mask-image: none; mask-image: none;
  background: linear-gradient(90deg, transparent, var(--w-linie) 20%, var(--w-linie) 80%, transparent);
  opacity: 1;
}
.w-trenner-wappen .w-trenner-figur {
  width: 64px; height: 76px;
  -webkit-mask-image: url("/website/ornamente/wappen.svg");
  mask-image: url("/website/ornamente/wappen.svg");
  background: linear-gradient(180deg, var(--w-gold), var(--w-akzent));
}

/* -------------------------------------------------------------------- Abstand */
.w-typ-abstand { padding-block: 0; }
.w-leerraum { height: 32px; }
.w-leerraum-klein { height: 16px; }
.w-leerraum-gross { height: 64px; }

/* ----------------------------------------------------- Spaetere Etappen */
.w-spaeter {
  margin: 0; padding: 14px 16px;
  border: 1px dashed var(--w-linie); border-radius: var(--w-radius);
  color: var(--w-dezent); font-size: 14px; text-align: center;
}

/* ------------------------------------------------------------------ Fusszeile */
.w-fuss {
  flex: none; margin-top: auto;
  border-top: 1px solid var(--w-linie);
  background: var(--w-ton-karte);
  padding-block: 32px 24px;
}
.w-fuss-spalten { display: grid; gap: 22px; grid-template-columns: 1fr; }
.w-fuss-titel {
  margin: 0 0 10px; font-family: var(--w-schrift-display);
  font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--w-gold);
}
.w-fuss-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.w-fuss-link { color: var(--w-dezent); text-decoration: none; }
.w-fuss-link:hover { color: var(--w-text); text-decoration: underline; }
.w-sozial { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.w-sozial-link {
  display: inline-flex; align-items: center; min-height: 38px; padding: 8px 14px;
  border: 1px solid var(--w-linie); border-radius: var(--w-radius-klein);
  color: var(--w-dezent); text-decoration: none; font-size: 14px;
}
.w-sozial-link:hover { color: var(--w-gold); border-color: var(--w-gold); }
.w-fuss-text {
  margin: 22px 0 0; padding-top: 18px;
  border-top: 1px solid var(--w-linie);
  font-size: 13px; color: var(--w-dezent);
}

/* ------------------------------------------------------------------ Vorlagen */
/* Damit die drei Vorlagen auf den ersten Blick auseinandergehen, bekommt jede
   ein eigenes Merkmal - nicht nur andere Farben. */

/* Reich: Serifen, Goldschimmer im Held, Ornamentrahmen um den Kopfbereich. */
html[data-vorlage="reich"] .w-held-titel {
  background: linear-gradient(180deg, var(--w-text) 30%, var(--w-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-vorlage="reich"] .w-typ-held::after {
  content: ""; position: absolute; inset: 12px;
  border: 1px solid var(--w-ton-gold); border-radius: var(--w-radius-gross);
  pointer-events: none;
}
html[data-vorlage="reich"] .w-marke-text { letter-spacing: .12em; }

/* Aurora: ruhig, eng gesetzt, weicher Verlauf im Titel, breite Titellinie. */
html[data-vorlage="aurora"] .w-abschnitt-titel { letter-spacing: -.02em; font-weight: 600; }
html[data-vorlage="aurora"] .w-abschnitt-titel::after { width: 100%; opacity: .35; background: linear-gradient(90deg, var(--w-akzent), transparent); }
html[data-vorlage="aurora"] .w-held-titel {
  letter-spacing: -.03em; font-weight: 700;
  background: linear-gradient(120deg, var(--w-akzent), var(--w-gold) 60%, var(--w-text));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-vorlage="aurora"] :is(.w-kachel-label, .w-status-feld dt) { text-transform: none; letter-spacing: 0; }

/* Stein: kantig, Versalien, Monospace-Ueberschriften, harte Kanten. */
html[data-vorlage="stein"] :is(.w-abschnitt-titel, .w-held-titel, .w-marke-text) {
  text-transform: uppercase; letter-spacing: .08em;
}
html[data-vorlage="stein"] .w-held-titel { font-size: clamp(32px, 10vw, 68px); }
html[data-vorlage="stein"] .w-abschnitt-titel::after { width: 100%; height: 3px; background: var(--w-gold); }
html[data-vorlage="stein"] :is(.w-knopf, .w-schritt-nummer, .w-ip-knopf) { border-radius: 0; }
html[data-vorlage="stein"] .w-kachel-wert { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--w-gold); }

/* --------------------------------------------------------------- Breakpoints */
@media (min-width: 480px) {
  :root { --w-gasse: 20px; }
  .w-kacheln { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}

@media (min-width: 720px) {
  :root {
    --w-gasse: 28px;
    --w-abstand-eng: 32px;
    --w-abstand-normal: 64px;
    --w-abstand-weit: 104px;
    --w-kopf-hoehe: 66px;
  }
  .w-nav { display: flex; }
  .w-menue { display: none; }
  .w-fuss-spalten { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .w-textbild { grid-template-columns: 1fr 1fr; }
  /* Gemeint ist immer die Breite der BILD-Spalte. Der Renderer gibt erst den
     Text und dann die Figur aus; bei „Bild links“ dreht `order` die beiden um,
     also muessen die Verhaeltnisse mitdrehen - sonst bekaeme „links + gross“
     die schmale Spalte. */
  .w-textbild.w-bild-klein { grid-template-columns: 1.7fr 1fr; }
  .w-textbild.w-bild-gross { grid-template-columns: 1fr 1.7fr; }
  .w-textbild.w-bild-links.w-bild-klein { grid-template-columns: 1fr 1.7fr; }
  .w-textbild.w-bild-links.w-bild-gross { grid-template-columns: 1.7fr 1fr; }
  .w-textbild.w-bild-links .w-textbild-text { order: 2; }
  .w-textbild.w-bild-links .w-textbild-figur { order: 1; }
  .w-schritt { grid-template-columns: 56px 1fr; padding: 20px; }
  .w-schritt-nummer { width: 56px; height: 56px; font-size: 22px; }
  .w-spalten-2 .w-fliess { columns: 2; column-gap: 40px; max-width: none; }
  .w-spalten-2 .w-fliess > * { break-inside: avoid; }
}

@media (min-width: 1100px) {
  :root { --w-gasse: 36px; --w-abstand-weit: 128px; }
  body.w-seite { font-size: 17px; }
  .w-typ-held > .w-bahn { max-width: var(--w-breite-breit); }
}

/* ------------------------------------------------------------ Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .w-knopf:hover { transform: none; }
}

/* ---------------------------------------------------------------------- Druck */
/* Fuer Impressum und Datenschutz: nur der Text, schwarz auf weiss, Adressen
   hinter den Links, kein Schmuck, alle Akkordeons offen. */
@media print {
  html, body.w-seite { background: #fff !important; color: #000 !important; }
  html { background-image: none !important; }
  body.w-seite::before, body.w-seite::after { display: none !important; }
  .w-skip, .w-nav, .w-menue, .w-band, .w-sozial, .w-fuss-spalten,
  .w-knopf, .w-ip-knopf, .w-video-play, .w-trenner-figur,
  .w-held-hintergrund, .w-held-inhalt::before { display: none !important; }
  .w-kopf { position: static !important; background: none; border-bottom: 1px solid #999; }
  .w-marke, .w-marke-text { color: #000; }
  .w-abschnitt { padding-block: 12pt !important; break-inside: avoid; }
  .w-abschnitt::before, .w-typ-held::after,
  .w-status::before, .w-status::after,
  .w-hg-karte > .w-bahn::before, .w-hg-karte > .w-bahn::after { display: none !important; }
  .w-bahn { max-width: none !important; padding-inline: 0 !important; }
  .w-hg-karte > .w-bahn { border: 1px solid #999; background: none; box-shadow: none; }
  :is(.w-abschnitt-titel, .w-held-titel, .w-banner-titel, .w-fliess h3, .w-fliess h4) {
    color: #000 !important; background: none !important; -webkit-text-fill-color: #000 !important;
  }
  .w-abschnitt-titel::after { display: none; }
  :is(.w-fliess, .w-fliess strong, .w-regel-text, .w-antwort, .w-fuss-text, .w-status-feld dt) { color: #000 !important; }
  :is(.w-kachel, .w-status, .w-schritt, .w-regel, .w-frage) {
    border: 1px solid #999 !important; background: none !important; box-shadow: none !important;
  }
  .w-kachel-wert { background: none !important; -webkit-text-fill-color: #000 !important; color: #000 !important; }
  details > :not(summary) { display: block !important; }
  /* Chrome/Edge blenden zugeklappte <details> seit kurzem ueber
     content-visibility aus; die display-Regel allein reicht dort nicht. */
  details::details-content { content-visibility: visible !important; block-size: auto !important; }
  .w-fliess a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .w-fuss { border-top: 1px solid #999; background: none; }
  .w-fuss-text { border-top: 0; margin-top: 0; }
}
