/* Gemeinsames Stylesheet der Wegweiser-Shortlist (25.10.2026). Farbfassung per <html data-farbe="...">:
   blau-himmel, blau-kornblume, blau-lagune, gelb-gold, neu-zweiklang; ohne Attribut Gelb (v2). Einmal aus stil.css
   erzeugt, seither die Quelle fuer alle Wegweiser-v2-Seiten (stil.css bleibt fuer v1). Farben nur ueber Variablen:
   --feld* (Seite), --tinte, --platte*, --panel (Bloecke), --hl und --p-* (Schrift darauf), --hell, --rot, --stopp.
   Seiten-CSS der Agenten: seite-*.css, ebenfalls nur mit Variablen. */
/* Entwurf C «Wegweiser» – Festival Guide als Entscheidungshilfe.
   Farbfeld Signalgelb (Wanderweg-Gelb), Tinte Schwarz, Platten Weiss, Rot nur fuer Signale.
   Schriften: Big Shoulders Display (Anzeige, Ortsschild/Anzeigetafel), Overpass (Text, Strassenschild-Grotesk). */
:root {
  --feld: #FFD21A;
  --feld-2: #F6C500;
  --feld-3: #EBB700;
  --tinte: #141414;
  --tinte-2: #46443c;
  --leise: rgba(var(--tinte-rgb), .66);
  --platte: #FFFFFF;
  --platte-2: #FFF7D1;
  --rot: #E3241B;
  --meer: #151515;
  --land: #2d2c29;
  --grenze: #4a4842;
  --stopp: #FFD21A;
  --b4: 2px; --b3: 1.5px; --b2: 1.5px;  /* Rahmenstaerken, bis 25.10.2026: 4/3/2 px */
  --rand: var(--b3);
  --d: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --t: "Overpass", "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --feld: #1B1A12; --feld-2: #23221A; --feld-3: #2C2A20; --tinte: #F6EFCF; --tinte-2: #CFC7A6; --leise: rgba(246, 239, 207, .66);
    --platte: #262418; --platte-2: #2F2C1D; --meer: #0d0d0b; --land: #2a2922; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --feld: #1B1A12; --feld-2: #23221A; --feld-3: #2C2A20; --tinte: #F6EFCF; --tinte-2: #CFC7A6; --leise: rgba(246, 239, 207, .66);
  --platte: #262418; --platte-2: #2F2C1D; --meer: #0d0d0b; --land: #2a2922; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--feld); color: var(--tinte); font-family: var(--t); font-size: 16px; line-height: 1.45;
  font-variant-numeric: tabular-nums; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; color: inherit; }
.d { font-family: var(--d); }
.leise { color: var(--leise); }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rahmen { max-width: 1440px; margin: 0 auto; padding: 0 32px; }

/* ---------- Kopf: eine Zeile ---------- */
.kopf { display: flex; align-items: center; gap: 22px; height: 72px; padding: 0 32px; border-bottom: var(--b4) solid var(--tinte);
  background: var(--feld); position: relative; z-index: 20; }
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.marke img { height: 30px; width: auto; }
.marke span { font-family: var(--d); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: .02em;
  border-left: var(--b3) solid var(--tinte); padding-left: 10px; line-height: 1; }
.wege { display: flex; gap: 6px; margin-left: 8px; }
.wege .weg { font-family: var(--d); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .03em; text-decoration: none;
  background: var(--platte); color: var(--tinte); padding: 9px 30px 7px 14px; line-height: 1;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%); white-space: nowrap; }
.wege .weg:hover { background: var(--platte-2); }
.wege .weg.aktiv { background: var(--panel); color: var(--hl); }
.werkzeuge { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.wz { height: 38px; min-width: 38px; border: var(--rand) solid var(--tinte); background: transparent; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; padding: 0 9px; border-radius: 3px; cursor: pointer; position: relative; font-weight: 700; font-size: 14px; }
.wz svg { width: 18px; height: 18px; }
.wz.kontinent { font-family: var(--d); font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 0 10px; white-space: nowrap; }
.suche { display: flex; align-items: center; height: 38px; border: var(--rand) solid var(--tinte); background: var(--platte); width: 250px;
  border-radius: 3px; padding: 0 10px; gap: 8px; }
.suche input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 14px; }
.suche svg { width: 17px; height: 17px; flex: none; }
.sprache { display: flex; border: var(--rand) solid var(--tinte); border-radius: 3px; overflow: hidden; height: 38px; }
.sprache a { padding: 0 9px; display: flex; align-items: center; font-weight: 800; font-size: 13px; text-decoration: none; }
.sprache a.an { background: var(--panel); color: var(--hl); }
.zahl-marke { position: absolute; top: -9px; right: -9px; background: var(--rot); color: #fff; font-size: 11px; font-weight: 800;
  min-width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: var(--b2) solid var(--feld); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--panel); color: var(--hl); display: flex; align-items: center;
  justify-content: center; font-family: var(--d); font-weight: 900; font-size: 18px; text-decoration: none; flex: none; }
.kontinent-menue { position: absolute; top: 62px; right: 330px; background: var(--platte); border: var(--rand) solid var(--tinte); width: 260px;
  padding: 6px; z-index: 30; }
.kontinent-menue a { display: flex; justify-content: space-between; padding: 6px 10px 4px; text-decoration: none; font-weight: 700; }
.kontinent-menue a.an { background: var(--panel); color: var(--hl); }
.kontinent-menue a.bald { color: var(--leise); pointer-events: none; }
.kontinent-menue a.bald small { font-family: var(--d); font-weight: 800; text-transform: uppercase; font-size: 14px; }
.kontinent-menue p { margin: 6px 10px 4px; font-size: 12px; color: var(--leise); }

/* ---------- Ueberschriften als Wegweiser-Platten ---------- */
.schild { display: inline-block; font-family: var(--d); font-weight: 900; font-size: 40px; line-height: 1; text-transform: uppercase;
  letter-spacing: .01em; background: var(--panel); color: var(--hl); padding: 10px 46px 8px 18px; margin: 0;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%); }
.schild.weiss { background: var(--platte); color: var(--tinte); }
.schild.klein { font-size: 26px; padding: 8px 34px 6px 14px; clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 50%, calc(100% - 17px) 100%, 0 100%); }
.kopfzeile { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 22px; }
.kopfzeile .rechts { margin-left: auto; }
.abschnitt { padding-top: 56px; padding-bottom: 56px; border-bottom: var(--b4) solid var(--tinte); }
.abschnitt:last-of-type { border-bottom: 0; }

/* ---------- Knoepfe, Reiter ---------- */
.knopf { display: inline-flex; align-items: center; gap: 8px; border: var(--rand) solid var(--tinte); background: var(--platte); color: var(--tinte);
  font-weight: 800; font-size: 15px; padding: 9px 14px 7px; border-radius: 3px; text-decoration: none; cursor: pointer; line-height: 1.1; }
.knopf svg { width: 18px; height: 18px; flex: none; }
.knopf.voll { background: var(--panel); color: var(--hl); }
.knopf.gruen { background: #1DB954; border-color: #1DB954; color: #0b0b0b; }
.knopf.pfeil { padding-right: 30px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); border-right: 0; }
.reiter { display: flex; border: var(--rand) solid var(--tinte); border-radius: 3px; overflow: hidden; }
.reiter a, .reiter button { border: 0; background: var(--platte); padding: 8px 14px 6px; font-weight: 800; font-size: 14px; text-decoration: none;
  cursor: pointer; border-right: var(--rand) solid var(--tinte); }
.reiter > :last-child { border-right: 0; }
.reiter .an { background: var(--panel); color: var(--hl); }
.marke-q { display: inline-block; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 3px 6px 1px;
  border: var(--b2) solid var(--tinte); border-radius: 2px; line-height: 1.2; white-space: nowrap; }
.marke-q.voll { background: var(--panel); color: var(--hl); }
.marke-q.rot { background: var(--rot); border-color: var(--rot); color: #fff; }
.marke-q.weiss { background: var(--platte); }

/* ---------- Equalizer: sechs Kriterien ---------- */
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 30px; }
.eq i { display: block; width: 8px; background: var(--tinte); min-height: 3px; }
.passt .eq i { background: var(--hl); }
.eq.gross { height: 64px; gap: 6px; }
.eq.gross i { width: 20px; }
.eq.hell i { background: var(--hl); }
.eq-legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; font-weight: 700; }
.eq-legende span { display: inline-flex; align-items: center; gap: 5px; }
.eq-legende svg { width: 16px; height: 16px; }
.krit-icons { display: inline-flex; gap: 3px; }
.krit-icons svg { width: 8px; height: 8px; }

/* ---------- Gewicht 0–3 ---------- */

/* ---------- Fuss ---------- */
.fuss { background: var(--panel); color: var(--p-text); padding: 44px 0 32px; margin-top: 0; font-size: 14px; }
.fuss a { color: var(--p-text); }
.fuss-gitter { display: grid; grid-template-columns: 1.3fr 1fr 1fr 2fr; gap: 36px; }
.fuss h3 { font-family: var(--d); font-weight: 800; font-size: 20px; text-transform: uppercase; margin: 0 0 10px; color: var(--hl); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin: 0 0 6px; }
.fuss .klein { font-size: 12.5px; color: var(--p-leise); line-height: 1.5; }
.fuss img { height: 28px; width: auto; margin-bottom: 14px; }

/* ---------- Startseite ---------- */
.start-held { display: grid; grid-template-columns: minmax(0, 1fr) 700px; gap: 40px; padding: 48px 0 56px; border-bottom: var(--b4) solid var(--tinte); }
/* Satz waechst mit der Spalte; lange Bausteine (viele Kuenstler) brechen in ihrer Spalte um statt unter die Schilder zu
   ragen (Ed 25.10.2026: «Pfeil Ueberschneidung mit Text») */
.satz { font-family: var(--d); font-weight: 800; font-size: clamp(40px, 3.4vw, 62px); line-height: 1.08; text-transform: uppercase; margin: 0 0 26px;
  letter-spacing: .005em; min-width: 0; overflow-wrap: anywhere; }
.token { background: var(--panel); color: var(--hl); padding: 0 12px 0 10px; white-space: normal; display: inline-block; max-width: 100%;
  line-height: 1.12; margin: 3px 0; position: relative; text-align: left; }
.token small { font-size: .55em; vertical-align: .35em; margin-left: 4px; color: var(--p-stark); }
/* Kriterium mit Gewicht 0: «egal»-Fassung, zurueckgenommen (Ed 26.10.2026) */
.token.aus { background: transparent; color: inherit; box-shadow: inset 0 0 0 var(--b2) var(--tinte); }
.token.aus::after { border-top-color: currentColor; }
.token::after { content: ""; display: inline-block; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 10px solid var(--hl); margin-left: 10px; vertical-align: .18em; }
.held-unten { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
/* Kompass-Karte auf der Startseite (Ed 26.10.2026): Kuenstler hinzufuegen, Kriterien als Chips */
.mein-kompass { background: var(--platte); border: var(--b4) solid var(--tinte); margin: 0 0 18px; max-width: 760px; }
.mk-kopf { background: var(--panel); color: var(--hl); padding: 10px 16px 9px; }
.mk-kopf h2 { font-family: var(--d); font-weight: 900; font-size: 26px; line-height: 1; text-transform: uppercase; margin: 0; }
.mk-kopf small { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--p-text); }
.mk-zeile { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 11px 16px; border-bottom: var(--b2) solid var(--tinte); }
.mk-label { flex: 1 1 100%; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.mk-kuenstler { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.mk-leer { margin: 0; font-size: 14px; color: var(--leise); }
.mk-dazu { display: flex; gap: 6px; flex: 1 1 100%; }
.mk-dazu input { flex: 1 1 200px; min-width: 0; height: 38px; border: var(--b3) solid var(--tinte); padding: 0 10px; font: inherit; font-size: 15px;
  background: var(--platte); color: var(--tinte); }
.mk-dazu .knopf { height: 38px; }
.mk-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1 1 100%; font-size: 13px; }
.mk-vorschlaege[hidden] { display: none; }
.mk-stufen { flex: 1 1 100%; min-width: 0; }
.mk-kuenstler .kk-chips { margin-top: 0; }
.mk-oeffnen { display: flex; align-items: center; gap: 7px; width: 100%; padding: 10px 16px 9px; border: 0; background: transparent; color: inherit;
  font: inherit; font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.mk-oeffnen svg { width: 16px; height: 16px; flex: none; }
.stand { font-size: 13px; color: var(--leise); margin-top: 18px; }

/* Wegweiser mit Platten links und rechts vom Pfosten */
.wegweiser { position: relative; padding-top: 0; }
.pfosten { position: absolute; left: 50%; top: 40px; bottom: -56px; width: 18px; margin-left: -9px; background: var(--panel); }
.standort { position: relative; margin: 0 auto 18px; width: 300px; background: var(--platte); border: var(--b4) solid var(--tinte); text-align: center;
  padding: 10px 10px 6px; z-index: 2; }
.standort b { display: block; font-family: var(--d); font-weight: 900; font-size: 34px; line-height: 1; text-transform: uppercase; }
.standort small { font-size: 12.5px; font-weight: 700; }
.platten { list-style: none; margin: 0; padding: 0; position: relative; z-index: 2; display: grid; gap: 10px; }
.platte { position: relative; width: 50%; min-height: 86px; display: flex; align-items: stretch; text-decoration: none; }
.platte.rechts { margin-left: calc(50% - 9px); }
.platte.links { margin-left: 9px; flex-direction: row-reverse; }
.platte .innen { background: var(--platte); flex: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px;
  padding: 10px 40px 8px 16px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%); }
.platte.links .innen { padding: 10px 16px 8px 40px; clip-path: polygon(28px 0, 100% 0, 100% 100%, 28px 100%, 0 50%); grid-template-columns: auto 1fr;
  text-align: right; }
.platte.links .innen .pt-wert { order: -1; }
.platte.erste .innen { background: var(--panel); color: var(--hl); }
.pt-name { font-family: var(--d); font-weight: 800; font-size: 25px; line-height: .98; text-transform: uppercase; display: block; }
.pt-info { font-size: 12.5px; font-weight: 700; display: block; margin-top: 5px; }
.pt-wert { font-family: var(--d); font-weight: 900; font-size: 44px; line-height: .9; text-align: center; }
.pt-wert small { display: block; font-family: var(--t); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.platte.erste .pt-info { color: var(--p-stark); }
.wegweiser-notiz { font-size: 12.5px; text-align: center; margin: 16px auto 0; position: relative; z-index: 2; background: var(--feld);
  width: max-content; max-width: 100%; padding: 4px 10px; font-weight: 700; }

.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.news { list-style: none; margin: 0; padding: 0; border-top: var(--b4) solid var(--tinte); }
.news li { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 16px; padding: 13px 12px 11px; align-items: baseline; }
.news li:nth-child(even) { background: var(--feld-2); }
.news li.match { background: var(--platte); }
.news .wann { font-family: var(--d); font-weight: 800; font-size: 20px; text-transform: uppercase; line-height: 1; }
.news .was b { font-weight: 800; }
.news .was a { text-decoration: none; }
.news .was a:hover { text-decoration: underline; }
.news .hinweis { display: block; font-size: 12.5px; font-weight: 800; margin-top: 3px; }
.news .hinweis svg { width: 12px; height: 12px; vertical-align: -1px; }
.mehr-link { display: inline-block; margin-top: 14px; font-weight: 800; }

.countdown { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.countdown li { background: var(--platte); border: var(--rand) solid var(--tinte); display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 14px 10px; }
.countdown .cd-tage { font-family: var(--d); font-weight: 900; font-size: 48px; line-height: .85; text-align: right; }
.countdown .cd-tage small { display: block; font-family: var(--t); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.countdown .cd-name { font-family: var(--d); font-weight: 800; font-size: 24px; text-transform: uppercase; line-height: 1; text-decoration: none; }
.countdown .cd-info { font-size: 13px; margin-top: 4px; }

/* Startseiten-Block «Schritt fuer Schritt» (.fragen, .monate, .distanz, .genres) am 27.10.2026 entfernt; die alte
   Regel .distanzen machte die Flughafenliste der Festivalseite zweispaltig */

.koepfe { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border: var(--b4) solid var(--tinte); }
.kopf-k { position: relative; text-decoration: none; border-right: var(--b4) solid var(--panel); aspect-ratio: 4 / 5; overflow: hidden; background: var(--panel); }
.kopf-k:last-child { border-right: 0; }
.kopf-k img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.kopf-k:hover img { filter: none; }
.kopf-k .schildchen { position: absolute; left: 0; bottom: 14px; background: var(--feld); color: var(--tinte); padding: 6px 26px 4px 10px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); max-width: 92%; }
.kopf-k .schildchen b { display: block; font-family: var(--d); font-weight: 900; font-size: 24px; text-transform: uppercase; line-height: 1; }
.kopf-k .schildchen small { font-size: 12px; font-weight: 800; }
.kopf-k .credit, .foto-credit { position: absolute; top: 0; right: 0; background: rgba(var(--tinte-rgb), .78); color: #eee; font-size: 10px; padding: 2px 5px;
  max-width: 100%; }
.kopf-k .stern-an { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; background: var(--feld); border-radius: 50%; display: flex;
  align-items: center; justify-content: center; }
.kopf-k .stern-an svg { width: 16px; height: 16px; }

/* ---------- Festival summer by region (24.10.2026): Raster Region x Monat, Kriterium Wetter ---------- */
.sr-kopf-text { margin: 0; font-weight: 700; font-size: 14px; max-width: 560px; }
.sr-auswahl { display: block; margin-top: 4px; font-weight: 400; font-size: 13px; }
.sr-platte { position: relative; background: var(--platte); border: var(--b4) solid var(--tinte); }
.sr-scroll { overflow-x: auto; scrollbar-width: thin; }
.sr-gitter { display: grid; grid-template-columns: 186px repeat(12, minmax(0, 1fr)); gap: 3px; padding: 0 0 3px; background: var(--platte); }
.sr-ecke, .sr-mon { background: var(--panel); color: var(--hl); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 8px 7px; line-height: 1.15; }
.sr-mon { text-align: left; }
.sr-mon.fenster { background: var(--feld); color: var(--tinte); box-shadow: inset 0 calc(-1 * var(--b4)) 0 var(--tinte); }
.sr-mon.fenster small { display: block; font-size: 9.5px; letter-spacing: .03em; }
.sr-reg { display: flex; flex-direction: column; justify-content: center; padding: 6px 12px 4px 12px; background: var(--platte); }
.sr-reg b { font-family: var(--d); font-weight: 800; font-size: 22px; line-height: .95; text-transform: uppercase; }
.sr-reg small { font-size: 11.5px; font-weight: 700; margin-top: 3px; color: var(--leise); }
.sr-z { position: relative; height: 78px; padding: 7px 8px 6px; color: #141414; text-decoration: none; display: grid; grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto; }
.sr-z b { font-family: var(--d); font-weight: 900; font-size: 32px; line-height: .9; display: flex; align-items: flex-start; gap: 3px; }
.sr-z b sup { font-size: 17px; line-height: 1; }
.sr-z .ok { width: 17px; height: 17px; border-radius: 50%; background: #141414; color: #FFD21A; font-family: var(--t); font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; position: absolute; right: 7px; bottom: 22px; }
.sr-z .n { font-weight: 800; font-size: 14px; line-height: 1; text-align: right; }
.sr-z .n small { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; opacity: .7; }
.sr-z .r { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; line-height: 1; }
.sr-regen { flex: 1; height: 7px; position: relative; display: block; border: 1.5px solid #141414;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(var(--tinte-rgb), .35) calc(10% - 1px) 10%); }
.sr-regen i { position: absolute; left: 0; top: 0; bottom: 0; background: #141414; }
.sr-z.leer { background: transparent; color: var(--leise); display: grid; place-items: center; grid-template-columns: 1fr; grid-template-rows: 1fr;
  font-weight: 800; box-shadow: inset 0 0 0 1px rgba(var(--tinte-rgb), .1); }
.sr-z.ohne { background: var(--platte); box-shadow: inset 0 0 0 var(--b2) rgba(var(--tinte-rgb), .3); }
.sr-z.ohne .sr-regen { border-style: dashed; border-color: rgba(var(--tinte-rgb), .4); background: none; }
.sr-z.offen { outline: var(--b4) solid #141414; outline-offset: 2px; z-index: 2; }
.sr-z:not(.leer):hover { box-shadow: inset 0 0 0 var(--b3) #141414; }
.t1 { background: #bcd3dc; } .t2 { background: #dce8e2; } .t3 { background: #f6f0d8; } .t4 { background: #FFE680; }
.t5 { background: #FFD21A; } .t6 { background: #FF9F2E; } .t7 { background: #F26B21; }
.sr-wisch { display: none; }
.sr-unten { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 26px; margin-top: 26px; align-items: start; }
.sr-auf { background: var(--panel); color: var(--hl); padding: 16px 52px 18px 20px;
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 50%, calc(100% - 32px) 100%, 0 100%); }
.sr-auf .oben { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--p-text); }
.sr-auf h3 { font-family: var(--d); font-weight: 900; font-size: 40px; line-height: .95; text-transform: uppercase; margin: 6px 0 6px; }
.sr-auf .wann { font-size: 13.5px; font-weight: 700; color: var(--p-text); }
.sr-auf ol { list-style: none; margin: 12px 0 14px; padding: 0; }
.sr-auf li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0 6px; border-top: var(--b2) solid var(--p-linie); }
.sr-auf li .nr { font-family: var(--d); font-weight: 900; font-size: 22px; }
.sr-auf li b { font-family: var(--d); font-weight: 800; font-size: 21px; text-transform: uppercase; line-height: 1; display: block; color: var(--hl); }
.sr-auf li small { font-size: 12px; font-weight: 700; color: var(--p-leise); }
.sr-auf li .w { font-size: 12.5px; font-weight: 800; text-align: right; color: var(--p-text); white-space: nowrap; }
.sr-auf li .w .ja { display: inline-block; background: var(--hl); color: var(--panel); font-size: 10.5px; padding: 2px 5px 0; margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }
.sr-auf .knopf { background: var(--hl); color: var(--panel); border-color: var(--hl); }
.sr-trocken { background: var(--platte); border: var(--b4) solid var(--tinte); }
.sr-trocken h3, .sr-lesen h3 { font-family: var(--d); font-weight: 900; font-size: 28px; text-transform: uppercase; line-height: 1; margin: 0;
  background: var(--panel); color: var(--hl); padding: 10px 14px 8px; }
.sr-trocken h3 small, .sr-lesen h3 small { display: block; font-family: var(--t); font-size: 12px; font-weight: 700; text-transform: none; color: var(--p-text); margin-top: 3px; }
.sr-trocken ol { list-style: none; margin: 0; padding: 0; }
.sr-trocken li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px 7px; border-bottom: var(--b3) solid var(--feld-2); }
.sr-trocken li:last-child { border-bottom: 0; }
.sr-trocken li .nr { font-family: var(--d); font-weight: 900; font-size: 22px; }
.sr-trocken li b { font-family: var(--d); font-weight: 800; font-size: 20px; text-transform: uppercase; line-height: 1; display: block; }
.sr-trocken li small { font-size: 12px; font-weight: 700; }
.sr-trocken li .w { font-family: var(--d); font-weight: 900; font-size: 26px; line-height: .9; text-align: right; }
.sr-trocken li .w small { display: block; font-family: var(--t); font-size: 9.5px; font-weight: 800; text-transform: uppercase; }
.sr-lesen { background: var(--platte); border: var(--b4) solid var(--tinte); }
.sr-lesen .innen { padding: 12px 14px 14px; }
.sr-skala { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.sr-skala span { height: 28px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #141414; }
.sr-muster { display: grid; grid-template-columns: 100px 1fr; gap: 12px; align-items: center; margin-top: 12px; font-size: 13px; line-height: 1.4; }
.sr-muster p { margin: 0; }
.sr-muster .ok-bsp { display: inline-flex; width: 15px; height: 15px; border-radius: 50%; background: #141414; color: #FFD21A; font-size: 10px; font-weight: 800;
  align-items: center; justify-content: center; vertical-align: -2px; }
.sr-quelle { font-size: 12px; font-weight: 700; color: var(--leise); margin: 12px 0 0; padding-top: 10px; border-top: var(--b3) solid var(--feld-2); }
.sr-lesen .knopf { margin-top: 12px; }
@media (max-width: 760px) {
  /* Handy: Regionen bleiben Zeilen, Monate seitlich wischen; Regionsspalte steht fest */
  .sr-kopf-text { font-size: 13px; }
  .sr-wisch { display: flex; align-items: center; gap: 10px; background: var(--panel); color: var(--hl); padding: 8px 10px 6px; font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em; }
  .sr-wisch svg { width: 18px; height: 18px; flex: none; }
  .sr-wo { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin-left: auto; width: 96px; }
  .sr-wo i { height: 8px; border: 1.5px solid var(--hl); display: block; }
  .sr-wo i.an { background: var(--hl); }
  .sr-gitter { grid-template-columns: 92px repeat(12, 64px); width: max-content; }
  .sr-ecke, .sr-reg { position: sticky; left: 0; z-index: 3; }
  .sr-reg { box-shadow: var(--b3) 0 0 var(--tinte); padding: 6px 8px 4px; }
  .sr-ecke { box-shadow: var(--b3) 0 0 var(--tinte); }
  .sr-reg b { font-size: 17px; overflow-wrap: anywhere; hyphens: auto; }
  .sr-reg small { font-size: 10.5px; }
  .sr-mon { padding: 8px 6px 6px; font-size: 11px; }
  .sr-mon.fenster small { font-size: 8.5px; }
  .sr-z { height: 70px; padding: 6px 6px 5px; }
  .sr-z b { font-size: 26px; }
  .sr-z b sup { font-size: 14px; }
  .sr-z .ok { width: 14px; height: 14px; font-size: 9px; right: 6px; bottom: 19px; }
  .sr-z .n { font-size: 12.5px; }
  .sr-z .n small { font-size: 8px; }
  .sr-z .r { font-size: 10px; gap: 3px; }
  .sr-z.offen { outline-offset: -4px; }
  .sr-platte::after { content: ""; position: absolute; top: 34px; right: 0; bottom: 0; width: 34px; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--platte)); }
  .sr-unten { grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
  .sr-auf { padding: 14px 40px 16px 16px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
  .sr-auf h3 { font-size: 32px; }
  .sr-auf li b { font-size: 18px; }
  .sr-auf .knopf { width: 100%; justify-content: center; }
}

/* ---------- Festivals finden ---------- */
.finden { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 32px; padding: 36px 0 56px; align-items: start; }
/* Hoeher als der Bildschirm: eigene Bildlaufleiste statt festkleben und spaeter wegspringen (Ed 25.10.2026) */
.kompass { background: var(--platte); border: var(--b4) solid var(--tinte); position: sticky; top: 16px;
  max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.kompass-kopf { background: var(--panel); color: var(--hl); padding: 14px 16px 12px; }
.kompass-kopf h2 { font-family: var(--d); font-weight: 900; font-size: 32px; text-transform: uppercase; line-height: 1; margin: 0; }
.kompass-kopf p { margin: 4px 0 0; font-size: 13px; color: var(--p-text); }
.kompass-kopf .heim { display: flex; align-items: center; gap: 8px; margin-top: 10px; background: var(--hl); color: var(--panel); padding: 6px 10px 4px;
  font-weight: 800; font-size: 14px; }
.kompass-kopf .heim svg { width: 16px; height: 16px; }
.kompass-kopf .heim a { margin-left: auto; font-size: 12px; }
.krit { padding: 13px 16px 14px; border-bottom: var(--b3) solid var(--tinte); }
.krit:nth-child(even) { background: var(--platte-2); }
.krit-kopf { display: flex; align-items: center; gap: 8px; }
.krit-kopf svg { width: 20px; height: 20px; flex: none; }
.krit-kopf b { font-family: var(--d); font-weight: 800; font-size: 21px; text-transform: uppercase; line-height: 1; }
/* Stufen je Kriterium (Ed 26.10.2026, Variante A): Egal / Wichtig / Muss */
.krit-kopf { flex-wrap: wrap; }
.krit-kopf .seg { margin-left: auto; }
.seg button { padding: 5px 9px 3px; font-size: 12px; cursor: pointer; color: var(--tinte); font-family: inherit; }
.seg button + button { border-left: var(--b2) solid var(--tinte); }
.seg button.an { background: var(--panel); color: var(--hl); }
.seg button.s-muss.an { background: var(--rot); color: var(--p-stark); }
.krit-hinweis-muss { margin: 5px 0 0; font-size: 12px; font-weight: 700; color: var(--leise); }
.krit.krit-egal .krit-kopf b { color: var(--leise); }
.krit-egal { margin: 4px 0 0; font-size: 13px; }
.krit.krit-egal .krit-body { margin-top: 0; }
.eq i.st-egal { opacity: .3; }
.eq i.st-muss { background: var(--rot); }
#passt-gruende li.st-egal { opacity: .45; }
/* Wirkung einer Kompass-Aenderung, Platzwechsel, «Warum dieser Fit?» */
.wirkung { margin: 0 0 10px; padding: 8px 12px 6px; border: var(--b3) dashed var(--tinte); background: var(--platte); font-size: 14px; }
.wirkung.neu { animation: wirkung-blitz 1.2s ease-out; }
@keyframes wirkung-blitz { from { background: var(--hl); } to { background: var(--platte); } }
.rz-delta { display: block; font-family: var(--t); font-size: 11px; font-weight: 800; margin-top: 2px; }
.rz-delta.hoch { color: #1b7a3a; }
.rz-delta.runter { color: var(--rot); }
.rz-warum { font-weight: 900; font-size: 15px; }
.rang-zeile > .rz-erkl { grid-column: 1 / -1; grid-row: auto; border-top: var(--b2) dashed currentColor; padding-top: 8px; font-size: 13.5px; }
.rz-erkl p { margin: 0 0 6px; }
.rz-erkl ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; max-width: 520px; }
.rz-erkl li { display: grid; grid-template-columns: 130px minmax(0, 1fr) 34px; gap: 8px; align-items: center; }
.rz-erkl li small { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--rot); }
.rz-erkl .balken { height: 8px; border: var(--b2) solid currentColor; display: block; }
.rz-erkl .balken i { display: block; height: 100%; background: currentColor; }
.rz-erkl li b { text-align: right; }
.krit-body { margin-top: 10px; font-size: 13.5px; }
.krit-body .zeile-k { display: flex; flex-wrap: wrap; gap: 5px; }
.wahl { display: inline-flex; align-items: center; gap: 5px; border: var(--b2) solid var(--tinte); padding: 3px 7px 1px; font-weight: 700; font-size: 13px;
  border-radius: 2px; cursor: pointer; background: transparent; }
.wahl.an { background: var(--panel); color: var(--hl); }
.wahl small { font-weight: 600; opacity: .75; }
.monate-klein { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.monate-klein button { min-width: 0; overflow: hidden; }
.monate-klein span { text-align: center; font-size: 11.5px; font-weight: 800; border: var(--b2) solid var(--tinte); padding: 3px 0 1px; cursor: pointer; }
.monate-klein span.an { background: var(--panel); color: var(--hl); }
.monate-klein span.leer { opacity: .35; }
.schieber { width: 100%; accent-color: #141414; }
.schieber-werte { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; }
.filter-titel { padding: 12px 16px 10px; background: var(--panel); color: var(--hl); font-family: var(--d); font-weight: 900; font-size: 22px;
  text-transform: uppercase; }
.filter-titel small { font-family: var(--t); font-size: 12px; color: var(--p-text); font-weight: 600; text-transform: none; margin-left: 6px; }
.filter-gruppe { padding: 11px 16px 12px; border-bottom: var(--b3) solid var(--tinte); }
.filter-gruppe:last-child { border-bottom: 0; }
.filter-gruppe h4 { margin: 0 0 7px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
/* Festival finden links (Ed 26.10.2026): Filter zuerst, Kompass-Karte darunter */
.filter-titel h2 { font: inherit; margin: 0; display: inline; font-size: 32px; line-height: 1; }
.filter-titel small { display: block; margin: 4px 0 0; }
.zeile-k.f-monate { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.zeile-k.f-monate .wahl { justify-content: center; text-align: center; padding-left: 0; padding-right: 0; margin: 0; }
.filter-gruppe .wahl.leer { opacity: .4; }
.kompass-karte { border-top: var(--b4) solid var(--tinte); }
.kk-kopf { background: var(--panel); color: var(--hl); padding: 12px 16px 10px; }
.kk-kopf h2 { font-family: var(--d); font-weight: 900; font-size: 26px; text-transform: uppercase; line-height: 1; margin: 0; }
.kk-kopf small { display: block; margin-top: 4px; font-size: 12px; color: var(--p-text); font-weight: 600; }
.kk-satz { margin: 0; padding: 12px 16px 4px; font-family: var(--d); font-weight: 800; font-size: 19px; line-height: 1.3; text-transform: uppercase; }
.kk-satz .token { padding: 0 7px 0 6px; margin: 1px 0; }
.kk-satz .token::after { border-left-width: 5px; border-right-width: 5px; border-top-width: 6px; margin-left: 6px; }
.kk-gewichte { display: flex; gap: 10px; align-items: flex-end; padding: 8px 16px 10px; font-size: 12.5px; line-height: 1.3; }
.kk-gewichte .eq { height: 34px; flex: 0 0 auto; }
.kk-gewichte b { display: block; font-size: 13px; }
.kompass-karte > .knopf { margin: 4px 16px 16px; }
/* Kompass-Karte neu (Ed 27.10.2026, Variante 1 + Fassung C): Kuenstler-Chips nach Anzahl Festivals, Symbolkacheln */
.kk-oben { padding: 12px 16px; background: var(--hell); border-bottom: var(--b3) solid var(--tinte); }
.kk-oben-kopf { display: flex; align-items: baseline; gap: 8px; }
.kk-lab { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.kk-stufe { margin-left: auto; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px 0;
  border: var(--b2) solid var(--tinte); }
.kk-stufe.s-muss { background: var(--rot); border-color: var(--rot); color: var(--p-stark); }
.kk-stufe.s-wichtig { background: var(--panel); border-color: var(--panel); color: var(--hl); }
.kk-stufe.s-egal { border-style: dashed; color: var(--leise); }
.kk-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.kk-chip sup { font-size: 10.5px; font-weight: 800; margin-left: 1px; color: var(--p-text); vertical-align: 1px; }
.wahl.an.kk-chip.null { background: var(--platte); color: var(--leise); border-style: dashed; }
.kk-chip.null sup { color: var(--leise); }
.kk-rest { display: none; }
.kk-chips.offen .kk-rest { display: contents; }
.kk-chips.offen .kk-mehr { display: none; }
.wahl.kk-mehr { background: var(--platte); }
.wahl.kk-dazu { border-style: dashed; background: transparent; }
.kk-ohne { margin-top: 8px; font-size: 12.5px; color: var(--leise); font-weight: 700; }
.kk-ohne > button { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; border-bottom: 1px dotted currentColor; cursor: pointer; }
.kk-ohne-liste { display: none; }
.kk-ohne.offen > button { display: none; }
.kk-ohne.offen .kk-ohne-liste { display: inline-flex; flex-wrap: wrap; gap: 5px; vertical-align: top; }
.kk-leer { margin: 8px 0 0; font-size: 13.5px; color: var(--leise); }
.kk-kacheln { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 12px 16px 0; }
.kk-kachel { border: var(--b3) solid var(--tinte); background: var(--platte); color: var(--tinte); font: inherit; cursor: pointer; min-width: 0;
  padding: 8px 2px 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.kk-kachel svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kk-kachel b { font-size: 11.5px; font-weight: 800; line-height: 1.15; }
.kk-kachel small { font-size: 10.5px; font-weight: 700; color: var(--leise); line-height: 1.15; min-height: 2.3em; overflow-wrap: anywhere; }
.kk-st { align-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; height: 6px; padding: 0 4px 5px; box-sizing: content-box; }
.kk-st i { background: rgba(var(--tinte-rgb), .15); }
.kk-st i.an { background: var(--tinte); }
.kk-kachel.s-muss { border: var(--b4) solid var(--rot); }
.kk-kachel.s-muss .kk-st i.an { background: var(--rot); }
.kk-kachel.s-egal { border-style: dashed; color: var(--leise); }  /* ohne opacity: Kontrast bleibt lesbar */
@media (max-width: 420px) { .kk-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }  /* «Reisezeit» passt sonst nicht */
.kk-kachel:hover, .kk-kachel:focus-visible { outline: var(--b3) solid var(--tinte); outline-offset: 2px; }
.kk-leg { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 11px; font-weight: 700; color: var(--leise); padding: 8px 16px 6px; }
.kk-leg > span:first-child { display: flex; gap: 10px; flex-wrap: wrap; }
.kk-leg .kk-st { display: inline-grid; width: 18px; height: 6px; padding: 0; vertical-align: 1px; }
.kk-leg-muss .kk-st i.an { background: var(--rot); }
.mk-stufen .kk-kacheln, .mk-stufen .kk-leg { padding-left: 0; padding-right: 0; }

.ergebnis-kopf { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.ergebnis-kopf h1 { font-family: var(--d); font-weight: 900; font-size: 58px; line-height: .95; text-transform: uppercase; margin: 0; }
.ergebnis-kopf h1 small { display: block; font-family: var(--t); font-size: 15px; font-weight: 700; text-transform: none; margin-top: 8px; }
.ergebnis-kopf .rechts { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.rang-kopf, .rang-zeile { display: grid; grid-template-columns: 40px minmax(0, 1fr) 64px 50px 124px 74px 100px 56px 70px; gap: 10px; align-items: center; }
.wahl svg { width: 12px; height: 12px; }
.weitere .eq-legende svg { width: 15px; height: 15px; }
.rang-kopf { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 10px 12px 8px; background: var(--panel);
  color: var(--hl); }
.rang-kopf svg { width: 12px; height: 12px; }
.rangliste { list-style: none; margin: 0; padding: 0; }
.rang-zeile { padding: 11px 40px 9px 12px; position: relative; }
.rang-kopf { padding-right: 40px; }
.rang-kopf .krit-icons svg { width: 11px; height: 11px; }
.rang-zeile:nth-child(even) { background: var(--feld-2); }
.rang-zeile.top { background: var(--platte); margin: 8px 0; padding: 14px 40px 12px 12px;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); }
.rang-zeile.top.eins { background: var(--panel); color: var(--hl); }
.rang-zeile.top.eins .eq i { background: var(--hl); }
.rang-zeile.top.eins .klein, .rang-zeile.top.eins small { color: var(--p-text); }
.rang-zeile .rang { font-family: var(--d); font-weight: 900; font-size: 30px; line-height: 1; }
.rz-name a { font-family: var(--d); font-weight: 800; font-size: 23px; text-transform: uppercase; line-height: 1; text-decoration: none; display: block; }
.rz-name a:hover { text-decoration: underline; }
.rz-name small { display: block; font-size: 13px; font-weight: 700; margin-top: 3px; }
.rz-name .klein { font-size: 12px; margin-top: 3px; display: block; }
.rz-fit { font-family: var(--d); font-weight: 900; font-size: 40px; line-height: .9; text-align: right; }
.rz-zelle { font-size: 14px; font-weight: 800; line-height: 1.2; }
.rz-zelle small { display: block; font-weight: 600; font-size: 12px; }
.rz-aktion { display: flex; gap: 6px; justify-content: flex-end; }
.ikon-knopf { width: 32px; height: 32px; border: var(--b2) solid currentColor; background: transparent; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 2px; cursor: pointer; padding: 0; }
.ikon-knopf svg { width: 16px; height: 16px; }
.ikon-knopf.an { background: var(--panel); color: var(--hl); border-color: var(--panel); }
.rang-zeile.top.eins .ikon-knopf.an { background: var(--hl); color: var(--panel); border-color: var(--hl); }
.weitere { margin-top: 14px; display: flex; gap: 12px; align-items: center; }
.vergleich-leiste { margin-top: 44px; }
.vergleich { width: 100%; border-collapse: collapse; background: var(--platte); border: var(--b4) solid var(--tinte); table-layout: fixed; }
.vergleich th, .vergleich td { text-align: left; vertical-align: top; padding: 11px 14px 9px; border-bottom: var(--b3) solid var(--feld-2); font-size: 14px; }
.vergleich thead th { background: var(--panel); color: var(--hl); border-bottom: 0; }
.vergleich thead th b { display: block; font-family: var(--d); font-weight: 900; font-size: 28px; text-transform: uppercase; line-height: 1; }
.vergleich thead th small { font-size: 12.5px; color: var(--p-text); font-weight: 700; }
.vergleich tbody th { width: 190px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; background: var(--platte-2); }
.vergleich td.bester { background: var(--hell); }
.vergleich .gross-zahl { font-family: var(--d); font-weight: 900; font-size: 44px; line-height: .9; }
.vergleich tr:last-child th, .vergleich tr:last-child td { border-bottom: 0; }

/* ---------- Festivalseite ---------- */
.f-kopf { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 36px; padding: 36px 0 0; }
.pfad { font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.pfad a { text-decoration: none; border-bottom: var(--b2) solid var(--tinte); }
.f-titel { font-family: var(--d); font-weight: 900; font-size: 112px; line-height: .86; text-transform: uppercase; margin: 0 0 20px; letter-spacing: -.005em; }
.f-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 18px; font-weight: 800; margin-bottom: 18px; }
.f-meta span { display: inline-flex; align-items: center; gap: 7px; }
.f-meta svg { width: 20px; height: 20px; }
.f-marken { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.f-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.f-foto { position: relative; border: var(--b4) solid var(--panel); background: var(--panel); align-self: start; }
.f-foto img { width: 100%; height: 390px; object-fit: cover; }
.f-foto .foto-credit { top: auto; bottom: 0; right: 0; font-size: 11px; padding: 3px 7px; }
.passt { margin: 36px 0 0; background: var(--panel); color: var(--hl); display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.passt-wert { padding: 22px 22px 18px; border-right: var(--b4) solid var(--hl); }
.passt-wert .zahl { font-family: var(--d); font-weight: 900; font-size: 120px; line-height: .8; }
.passt-wert .zahl small { font-size: 28px; }
.passt-wert p { margin: 8px 0 14px; font-size: 13px; color: var(--p-text); }
.passt-gruende { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.passt-gruende li { padding: 15px 20px 13px; border-bottom: var(--b2) solid var(--p-linie); border-right: var(--b2) solid var(--p-linie); display: grid;
  grid-template-columns: 26px 1fr 56px; gap: 10px; align-items: start; color: var(--p-text); font-size: 14px; }
.passt-gruende li svg { width: 22px; height: 22px; color: var(--hl); }
.passt-gruende li b { display: block; color: var(--hl); font-family: var(--d); font-weight: 800; font-size: 20px; text-transform: uppercase; line-height: 1;
  margin-bottom: 3px; }
.passt-gruende .balken { height: 8px; background: var(--p-linie); margin-top: 8px; position: relative; }
.passt-gruende .balken i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--hl); }
.passt-gruende .kw { font-family: var(--d); font-weight: 900; font-size: 30px; color: var(--hl); text-align: right; line-height: 1; }
.passt-gruende .kw small { display: block; font-family: var(--t); font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--p-leise); }

.poster { background: var(--platte); border: var(--b4) solid var(--tinte); padding: 30px 34px 26px; text-align: center; }
.poster .hl { font-family: var(--d); font-weight: 900; text-transform: uppercase; line-height: 1.04; font-size: 54px; margin: 0 0 14px; }
.poster .hl a, .poster .rest a { text-decoration: none; }
.poster .hl a:hover, .poster .rest a:hover { text-decoration: underline; }
.poster .trenn { color: var(--rot); margin: 0 .18em; }
.poster .mein { background: var(--panel); color: var(--hl); padding: 0 .16em; }
.poster h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin: 22px 0 6px; font-weight: 800; }
.poster .tag-kopf { font-family: var(--d); font-weight: 900; font-size: 26px; text-transform: uppercase; background: var(--feld); display: inline-block;
  padding: 4px 14px 2px; margin: 26px 0 4px; }
.poster .rest { font-family: var(--d); font-weight: 700; font-size: 25px; text-transform: uppercase; line-height: 1.2; }
.poster .rest.k { font-size: 20px; font-weight: 600; }
.poster .poster-fuss { margin-top: 22px; font-size: 13px; color: var(--leise); }
.lineup-gitter { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 30px; align-items: start; }
.playlist { background: var(--panel); color: var(--p-text); border: var(--b4) solid var(--panel); }
.playlist-kopf { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 16px; }
.cover { width: 96px; height: 96px; background: var(--hl); color: var(--panel); font-family: var(--d); font-weight: 900; text-transform: uppercase;
  font-size: 19px; line-height: .92; padding: 8px; display: flex; flex-direction: column; justify-content: space-between; }
.cover small { font-size: 26px; }
.playlist-kopf b { font-family: var(--d); font-size: 23px; font-weight: 800; text-transform: uppercase; line-height: 1; color: var(--hl); display: block; }
.playlist-kopf p { margin: 6px 0 0; font-size: 12.5px; }
.titel-liste { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.titel-liste li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; padding: 8px 16px 6px; border-top: var(--b2) solid #2b2a22; font-size: 13.5px;
  counter-increment: t; }
.titel-liste li::before { content: counter(t); color: var(--p-leise); font-weight: 700; }
.titel-liste li b { color: var(--p-stark); font-weight: 700; }
.titel-liste li span { color: var(--p-leise); display: block; font-size: 12.5px; }
.titel-liste li em { font-style: normal; color: var(--hl); font-size: 11px; font-weight: 800; text-transform: uppercase; align-self: center; }
.playlist-fuss { padding: 14px 16px 16px; border-top: var(--b2) solid #2b2a22; }
.playlist-fuss p { font-size: 13px; margin: 0 0 12px; }
.playlist-fuss p b { color: var(--hl); }

.info-gitter { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; border: var(--b4) solid var(--tinte); background: var(--platte); }
.info { padding: 22px 22px 20px; border-right: var(--b4) solid var(--tinte); border-bottom: var(--b4) solid var(--tinte); }
.info h3 { font-family: var(--d); font-weight: 900; font-size: 30px; text-transform: uppercase; line-height: 1; margin: 0 0 12px; display: flex;
  align-items: center; gap: 10px; }
.info h3 svg { width: 26px; height: 26px; }
.info p { margin: 0 0 10px; font-size: 14.5px; }
.info .quelle { font-size: 12px; color: var(--leise); }
.s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: span 12; }
.info.ohne-r { border-right: 0; }
.info.ohne-u { border-bottom: 0; }
.temp { display: flex; gap: 24px; align-items: flex-end; margin-bottom: 12px; }
.temp div { font-family: var(--d); font-weight: 900; font-size: 72px; line-height: .85; }
.temp div small { display: block; font-family: var(--t); font-size: 12px; font-weight: 800; text-transform: uppercase; margin-top: 6px; }
.regen { display: flex; gap: 4px; margin: 4px 0 8px; }
.regen i { width: 22px; height: 22px; border: var(--b2) solid var(--tinte); display: block; }
.regen i.an { background: var(--panel); }
.distanzen { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.distanzen li { display: grid; grid-template-columns: 52px 1fr 64px; gap: 8px; align-items: center; font-size: 13.5px; }
.distanzen li b { font-family: var(--d); font-size: 20px; font-weight: 900; }
.distanzen li i { height: 10px; background: var(--panel); display: block; }
.distanzen li span:last-child { text-align: right; font-weight: 800; }
.vor-ort { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vor-ort li { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; }
.vor-ort li span { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--d); font-weight: 900;
  font-size: 22px; border: var(--b3) solid var(--tinte); }
.vor-ort li.ja span { background: var(--panel); color: var(--hl); }
.vor-ort li.nein { color: var(--leise); }
.zeitstrahl { list-style: none; margin: 10px 0 12px; padding: 0; display: flex; gap: 0; }
.zeitstrahl li { flex: 1; border-top: 6px solid var(--tinte); padding-top: 8px; font-size: 13px; position: relative; }
.zeitstrahl li::before { content: ""; position: absolute; top: -12px; left: 0; width: 14px; height: 14px; background: var(--panel); border: var(--b3) solid var(--platte); border-radius: 50%; }
.zeitstrahl li b { display: block; font-family: var(--d); font-weight: 900; font-size: 22px; line-height: 1; }
.zeitstrahl li.prognose { border-top-style: dashed; }
.zeitstrahl li.prognose::before { background: var(--feld); border-color: var(--tinte); }
.quellen { columns: 2; column-gap: 34px; font-size: 13.5px; margin: 0; padding: 0 0 0 20px; }
.quellen li { margin: 0 0 6px; break-inside: avoid; }
.quellen li small { color: var(--leise); }
.leiste-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: var(--b4) solid var(--tinte); }
.leiste-liste li { padding: 14px 16px 12px; border-right: var(--b4) solid var(--tinte); border-bottom: var(--b4) solid var(--tinte); background: var(--platte); }
.leiste-liste li:nth-child(3n) { border-right: 0; }
.leiste-liste li:nth-last-child(-n+3) { border-bottom: 0; }
.leiste-liste b { font-family: var(--d); font-weight: 800; font-size: 22px; text-transform: uppercase; line-height: 1; display: block; }
.leiste-liste b a { text-decoration: none; }
.leiste-liste small { font-size: 13px; }
.mini-foto { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.mini-foto img, .mini-foto .ph { width: 64px; height: 64px; object-fit: cover; filter: grayscale(1); border: var(--b3) solid var(--tinte); }
.mini-foto .ph { background: var(--feld-2); display: flex; align-items: center; justify-content: center; font-family: var(--d); font-weight: 900; font-size: 26px; }

/* ---------- Kuenstlerseite ---------- */
.k-kopf { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 40px; padding: 36px 0 44px; border-bottom: var(--b4) solid var(--tinte); align-items: start; }
.k-foto { position: relative; border: var(--b4) solid var(--panel); background: var(--panel); }
.k-foto img { width: 100%; height: 440px; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.k-foto .foto-credit { top: auto; bottom: 0; font-size: 11px; padding: 3px 7px; }
.k-name { font-family: var(--d); font-weight: 900; font-size: 168px; line-height: .8; text-transform: uppercase; margin: 6px 0 18px; }
.k-unter { font-size: 19px; font-weight: 800; margin: 0 0 16px; }
.k-zahlen { display: flex; gap: 0; margin: 0 0 20px; border: var(--b4) solid var(--tinte); width: max-content; background: var(--platte); }
.k-zahlen div { padding: 10px 18px 8px; border-right: var(--b4) solid var(--tinte); }
.k-zahlen div:last-child { border-right: 0; }
.k-zahlen b { display: block; font-family: var(--d); font-weight: 900; font-size: 46px; line-height: .9; }
.k-zahlen small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.k-bio { font-size: 16px; max-width: 760px; margin: 0 0 18px; }
.k-bio small { display: block; font-size: 12px; color: var(--leise); margin-top: 4px; }

.tour { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 0; border: var(--b4) solid var(--tinte); background: var(--meer); }
.tourkarte { position: relative; min-height: 640px; }
.tourkarte svg { display: block; width: 100%; height: 100%; }
.tour-seite { background: var(--platte); border-left: var(--b4) solid var(--tinte); display: flex; flex-direction: column; }
.tour-zusammen { list-style: none; margin: 0; padding: 14px 18px 12px; background: var(--panel); color: var(--hl); display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-weight: 800; font-size: 14px; }
.stationen { list-style: none; margin: 0; padding: 0; flex: 1; }
.stationen li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 12px 18px 10px; border-bottom: var(--b3) solid var(--feld-2); }
.stationen li:hover, .stationen li.aktiv { background: var(--hell); }
.stationen .nr { width: 36px; height: 36px; border-radius: 50%; background: var(--panel); color: var(--hl); font-family: var(--d); font-weight: 900; font-size: 22px;
  display: flex; align-items: center; justify-content: center; }
.stationen li.offen .nr { background: var(--platte); color: var(--tinte); border: var(--b3) dashed var(--tinte); }
.stationen b { font-family: var(--d); font-weight: 800; font-size: 22px; text-transform: uppercase; line-height: 1; display: block; }
.stationen b a { text-decoration: none; }
.stationen small { display: block; font-size: 13px; font-weight: 700; margin-top: 2px; }
.stationen .weg-info { display: block; font-size: 12px; font-weight: 700; color: var(--leise); margin-top: 3px; }
.stationen .gleich { display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; border: var(--b2) solid var(--tinte); padding: 1px 4px 0;
  margin-left: 6px; vertical-align: 3px; }
.stationen .fit { font-family: var(--d); font-weight: 900; font-size: 15px; }
.tour-legende { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 18px; background: var(--meer); color: #e9e3c8; font-size: 12.5px; font-weight: 700;
  border-top: var(--b4) solid var(--tinte); grid-column: 1 / -1; }
.tour-legende span { display: inline-flex; align-items: center; gap: 8px; }
.tour-legende svg { height: 18px; width: auto; }
.konzerte { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 28px; font-size: 13.5px; }
.poster a { white-space: nowrap; }
.konzerte li { break-inside: avoid; display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 6px 0 5px; border-bottom: var(--b2) solid var(--feld-2); }
.konzerte li b { font-weight: 800; }
.konzerte li small { display: block; color: var(--leise); font-size: 12px; }
.konzerte .punkt-k { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: var(--b2) solid var(--tinte); margin-right: 6px; vertical-align: 0; }
.beispiel { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: var(--platte);
  border: var(--b2) dashed var(--tinte); padding: 2px 6px 0; }
.disko { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: var(--b4) solid var(--tinte); background: var(--platte); }
.disko div { padding: 14px 14px 12px; border-right: var(--b3) solid var(--tinte); border-bottom: var(--b3) solid var(--tinte); }
.disko div:nth-child(5n) { border-right: 0; }
.disko b { font-family: var(--d); font-weight: 900; font-size: 34px; line-height: .9; display: block; }
.disko span { display: block; font-weight: 800; font-size: 14.5px; margin-top: 4px; line-height: 1.2; }
.disko small { font-size: 11.5px; text-transform: uppercase; font-weight: 800; letter-spacing: .05em; }
.disko div.neu { background: var(--panel); color: var(--hl); }
.disko div.neu span { color: var(--p-stark); }

/* ---------- Kuenstleruebersicht ---------- */
.a-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: end; padding: 36px 0 26px; }
.a-kopf h1 { font-family: var(--d); font-weight: 900; font-size: 104px; line-height: .85; text-transform: uppercase; margin: 0; }
.a-kopf p { font-size: 17px; font-weight: 700; margin: 12px 0 0; max-width: 680px; }
.mosaik { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 170px; gap: 0; border: var(--b4) solid var(--panel); background: var(--panel); }
.mosaik a { position: relative; overflow: hidden; text-decoration: none; outline: var(--b2) solid var(--tinte); }
.mosaik a.g { grid-column: span 2; grid-row: span 2; }
.mosaik a.b { grid-column: span 2; }
.mosaik img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.mosaik .schildchen { position: absolute; left: 0; bottom: 10px; background: var(--feld); padding: 5px 22px 3px 9px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); max-width: 94%; }
.mosaik .schildchen b { display: block; font-family: var(--d); font-weight: 900; font-size: 19px; line-height: 1; text-transform: uppercase; }
.mosaik a.g .schildchen b { font-size: 30px; }
.mosaik .schildchen small { font-size: 10.5px; font-weight: 800; display: block; white-space: nowrap; }
.mosaik a:not(.g) .schildchen b { font-size: 17px; }
.reiter svg { width: 14px; height: 14px; vertical-align: -2px; }
.mosaik .credit { position: absolute; top: 0; right: 0; background: rgba(var(--tinte-rgb), .78); color: #eee; font-size: 9.5px; padding: 2px 5px; }
.a-werkzeug { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 30px 0 14px; }
.a-werkzeug .suche { width: 320px; height: 44px; }
.abc { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 14px; }
.abc a { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-family: var(--d); font-weight: 900; font-size: 18px;
  border: var(--b2) solid var(--tinte); text-decoration: none; }
.abc a.an { background: var(--panel); color: var(--hl); }
.abc a.leer { opacity: .3; }
.k-tabelle { list-style: none; margin: 0; padding: 0; border-top: var(--b4) solid var(--tinte); }
.k-kopfzeile, .k-zeile { display: grid; grid-template-columns: 52px minmax(0, 1.25fr) 170px 96px 120px minmax(0, 2fr) 44px; gap: 14px; align-items: center; }
.k-kopfzeile { background: var(--panel); color: var(--hl); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px 8px; }
.k-zeile { padding: 10px 14px 8px; }
.k-zeile:nth-child(even) { background: var(--feld-2); }
.k-zeile.mein { background: var(--platte); }
.k-zeile .nr { font-family: var(--d); font-weight: 900; font-size: 24px; }
.k-zeile .nm { font-family: var(--d); font-weight: 800; font-size: 23px; text-transform: uppercase; line-height: 1; text-decoration: none; }
.k-zeile .nm small { display: block; font-family: var(--t); font-size: 12px; font-weight: 700; text-transform: none; margin-top: 3px; }
.punkte { display: flex; gap: 3px; align-items: center; }
.punkte i { width: 13px; height: 13px; background: var(--panel); display: block; }
.punkte i.hl { background: var(--rot); }
.punkte b { margin-left: 6px; font-family: var(--d); font-weight: 900; font-size: 22px; }
.k-zeile .fl { font-size: 13px; }
.k-zeile .fl a { font-weight: 700; }
.k-zeile .cc { font-size: 12.5px; font-weight: 800; letter-spacing: .03em; }

/* ---------- Mein Bereich ---------- */
.m-kopf { display: flex; align-items: center; gap: 24px; padding: 36px 0 30px; border-bottom: var(--b4) solid var(--tinte); }
.m-kopf .avatar { width: 96px; height: 96px; font-size: 44px; }
.m-kopf h1 { font-family: var(--d); font-weight: 900; font-size: 84px; text-transform: uppercase; line-height: .85; margin: 0; }
.m-kopf p { margin: 8px 0 0; font-weight: 700; }
.m-kopf .rechts { margin-left: auto; display: flex; gap: 8px; }
.m-gitter { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; padding: 40px 0 56px; align-items: start; }
.block { background: var(--platte); border: var(--b4) solid var(--tinte); margin-bottom: 30px; }
.block-kopf { display: flex; align-items: center; gap: 12px; padding: 12px 16px 10px; background: var(--panel); color: var(--hl); }
.block-kopf svg { width: 26px; height: 26px; flex: none; }
.block-kopf h2 { font-family: var(--d); font-weight: 900; font-size: 30px; text-transform: uppercase; margin: 0; line-height: 1; }
.block-kopf .rechts { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--p-text); }
.block-kopf .rechts a { color: var(--hl); }
.kompass-zeilen { list-style: none; margin: 0; padding: 0; }
.kompass-zeilen li { display: grid; grid-template-columns: 26px 130px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px 10px;
  border-bottom: var(--b3) solid var(--feld-2); font-size: 14px; }
.kompass-zeilen li:last-child { border-bottom: 0; }
.kompass-zeilen svg { width: 22px; height: 22px; }
.kompass-zeilen b { font-family: var(--d); font-weight: 800; font-size: 20px; text-transform: uppercase; }
.match-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.match-liste li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px 10px; border-bottom: var(--b3) solid var(--feld-2);
  border-right: var(--b3) solid var(--feld-2); }
.match-liste img, .match-liste .ph { width: 56px; height: 56px; object-fit: cover; filter: grayscale(1); border: var(--b3) solid var(--tinte); }
.match-liste b { font-family: var(--d); font-weight: 800; font-size: 21px; text-transform: uppercase; line-height: 1; display: block; }
.match-liste b a { text-decoration: none; }
.match-liste small { font-size: 12.5px; font-weight: 700; }
.glocke-an { width: 30px; height: 30px; border: var(--b2) solid var(--panel); display: flex; align-items: center; justify-content: center; background: var(--panel); color: var(--hl); }
.glocke-an.aus { background: transparent; color: var(--tinte); opacity: .5; }
.glocke-an svg { width: 15px; height: 15px; }
.meldungen { list-style: none; margin: 0; padding: 0; }
.meldungen li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; padding: 13px 16px 11px; border-bottom: var(--b3) solid var(--feld-2);
  align-items: start; font-size: 14px; }
.meldungen li:last-child { border-bottom: 0; }
.meldungen li .neu { width: 12px; height: 12px; border-radius: 50%; background: var(--rot); margin-top: 4px; }
.meldungen li.gelesen .neu { background: transparent; border: var(--b2) solid var(--leise); }
.meldungen li.gelesen { color: var(--tinte-2); }
.meldungen li small { display: block; font-size: 12px; color: var(--leise); margin-top: 3px; font-weight: 700; }
.meldungen li .art { font-size: 11px; font-weight: 800; text-transform: uppercase; }
.einst { list-style: none; margin: 0; padding: 0; }
.einst li { display: flex; align-items: center; gap: 12px; padding: 12px 16px 10px; border-bottom: var(--b3) solid var(--feld-2); font-size: 14px; font-weight: 700; }
.einst li:last-child { border-bottom: 0; }
.einst li small { display: block; font-weight: 600; color: var(--leise); font-size: 12.5px; }
.schalter { margin-left: auto; width: 46px; height: 26px; border: var(--b3) solid var(--tinte); position: relative; flex: none; background: var(--platte); }
.schalter::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--panel); }
.schalter.an { background: var(--panel); }
.schalter.an::after { left: auto; right: 2px; background: var(--feld); }
.kurzliste { list-style: none; margin: 0; padding: 0; }
.kurzliste li { display: grid; grid-template-columns: 40px minmax(0, 1fr) 70px 64px 58px; gap: 12px; align-items: center; padding: 12px 16px 10px;
  border-bottom: var(--b3) solid var(--feld-2); }
.kurzliste li:last-child { border-bottom: 0; }
.kurzliste .nr { font-family: var(--d); font-weight: 900; font-size: 26px; }
.kurzliste a.n { font-family: var(--d); font-weight: 800; font-size: 22px; text-transform: uppercase; line-height: 1; text-decoration: none; display: block; }
.kurzliste small { font-size: 12.5px; font-weight: 700; }
.kurzliste .tg { font-family: var(--d); font-weight: 900; font-size: 26px; text-align: right; line-height: .9; }
.kurzliste .tg small { display: block; font-family: var(--t); font-size: 10px; text-transform: uppercase; }
.kurzliste .ft { font-family: var(--d); font-weight: 900; font-size: 32px; text-align: right; }
.block-fuss { padding: 12px 16px; display: flex; gap: 8px; flex-wrap: wrap; border-top: var(--b3) solid var(--tinte); }

/* ---------- Uebersicht index ---------- */
.ix-gitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: var(--b4) solid var(--tinte); background: var(--platte); margin-bottom: 40px; }
.ix-gitter > div { padding: 18px 20px; border-right: var(--b4) solid var(--tinte); border-bottom: var(--b4) solid var(--tinte); }
.ix-gitter > div:nth-child(2n) { border-right: 0; }
.ix-gitter b { font-family: var(--d); font-weight: 900; font-size: 30px; text-transform: uppercase; display: block; line-height: 1; }
.ix-gitter p { margin: 8px 0 10px; font-size: 14.5px; }
.ix-gitter a { font-weight: 800; }

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  .rahmen { padding: 0 16px; }
  .kopf { height: 60px; padding: 0 16px; gap: 10px; }
  .marke img { height: 24px; }
  .marke span, .wege, .suche, .sprache, .wz.thema { display: none; }
  .werkzeuge { gap: 8px; }
  .wz { height: 36px; min-width: 36px; }
  .handy-nav { display: grid !important; }
  body { padding-bottom: 70px; }
  .schild { font-size: 28px; padding: 9px 36px 7px 14px; }
  .abschnitt { padding-top: 36px; padding-bottom: 36px; }
  .start-held { grid-template-columns: minmax(0, 1fr); padding: 26px 0 36px; gap: 26px; }
  .satz { font-size: 33px; }
  .reiter a, .reiter button { padding: 7px 8px 5px; font-size: 12.5px; }
  .k-zahlen small { font-size: 10px; letter-spacing: 0; }
  .held-unten { gap: 12px; }
  .pfosten { bottom: -36px; }
  .standort { width: 220px; }
  .standort b { font-size: 26px; }
  /* Schmal: Schilder fast volle Breite, aber weiter nach Westen (links) oder Osten (rechts) zeigend und leicht versetzt
     (Ed 25.10.2026: «Richtung funktioniert in sehr schmalen Screens nicht») */
  .platte { width: calc(100% - 16px); }
  .platte.rechts { margin-left: 16px; }
  .platte.links { margin-left: 0; }
  .platte .innen { padding: 10px 34px 8px 14px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
  .platte.links .innen { padding: 10px 14px 8px 34px; clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%); }
  .pt-name { font-size: 22px; }
  .pt-wert { font-size: 38px; }
  .zwei-spalten { grid-template-columns: 1fr; gap: 30px; }
  .news li { grid-template-columns: 56px minmax(0, 1fr); }
  .news li .marke-q { grid-column: 2; justify-self: start; }
  .koepfe { grid-template-columns: repeat(2, 1fr); }
  .kopf-k:nth-child(2n) { border-right: 0; }
  .kopf-k { border-bottom: var(--b4) solid var(--tinte); }
  .fuss-gitter { grid-template-columns: 1fr; gap: 24px; }
  .k-kopf { grid-template-columns: 1fr; gap: 20px; padding: 20px 0 30px; }
  .k-foto img { height: 300px; }
  .k-name { font-size: 96px; }
  .k-zahlen { width: 100%; }
  .k-zahlen div { flex: 1; padding: 8px 7px 6px; min-width: 0; }
  .k-zahlen b { font-size: 34px; }
  .tour { grid-template-columns: 1fr; }
  .tourkarte { min-height: 380px; }
  .tour-seite { border-left: 0; border-top: var(--b4) solid var(--tinte); }
  .konzerte { columns: 1; }
  .disko { grid-template-columns: repeat(2, 1fr); }
  .disko div:nth-child(5n) { border-right: var(--b3) solid var(--tinte); }
  .disko div:nth-child(2n) { border-right: 0; }
  .leiste-liste { grid-template-columns: 1fr; }
  .leiste-liste li { border-right: 0 !important; border-bottom: var(--b4) solid var(--tinte) !important; }
  .leiste-liste li:last-child { border-bottom: 0 !important; }
  .k-tour-rang .rang-zeile { grid-template-columns: 34px minmax(0, 1fr) 60px; }
  .k-tour-rang .rang-zeile > .rz-zelle, .k-tour-rang .rang-zeile > .eq { display: none; }
}
.handy-nav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--panel); grid-template-columns: repeat(4, 1fr);
  padding: 6px 6px 8px; gap: 4px; }
.handy-nav a { color: var(--p-text); text-decoration: none; text-align: center; font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 6px 2px 2px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; }
.handy-nav a svg { width: 22px; height: 22px; }
.handy-nav a.an { background: var(--hl); color: var(--panel); }

/* Featured festivals (25.10.2026) */
.fest-k .fit-an { position: absolute; top: 8px; left: 8px; min-width: 44px; padding: 6px 7px 4px; background: var(--panel); color: var(--hl);
  font-family: var(--d); font-weight: 900; font-size: 24px; line-height: 1; text-align: center; }
.fest-k .fit-an small { display: block; font-family: var(--t); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.fest-k .schildchen small { display: block; line-height: 1.3; margin-top: 3px; }
.kopf-k .schildchen .zeile2 { font-weight: 700; margin-top: 1px; }

/* Handy: Unterseiten (25.10.2026) */
@media (max-width: 760px) {
  /* Kontinent-Menue auf dem Handy (Ed 26.10.2026: Globus im Kopf): volle Breite unter dem Kopf statt am Knopf */
  .kopf .kontinent-wahl { position: static; }
  .kopf .kontinent-wahl .kontinent-menue { top: 100%; left: 16px; right: 16px; width: auto; margin-top: 4px; }

  /* Find my festival: Kompass oben, Rangliste als Karten mit beschrifteten Zellen, Kopf-an-Kopf als Zeilen */
  .finden { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 20px 0 36px; }
  .kompass { position: static; max-height: none; overflow: visible; }
  .kompass-kopf h2 { font-size: 28px; }
  .ergebnis-kopf { gap: 12px; }
  .ergebnis-kopf h1 { font-size: 44px; }
  .ergebnis-kopf h1 small { font-size: 13.5px; }
  .ergebnis-kopf .rechts { margin-left: 0; flex-wrap: wrap; gap: 8px; }
}
/* Rangliste als Karten schon ab 1100 px: daneben steht die Filterspalte, die Tabelle ragte bei 800 px 280 px ueber den
   Rand (26.10.2026) */
@media (max-width: 1100px) {
  :is(.finden, .rang-bereich) .rang-kopf { display: none; }
  :is(.finden, .rang-bereich) .rangliste { border-top: var(--b4) solid var(--tinte); }
  :is(.finden, .rang-bereich) .rang-zeile { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px 10px; align-items: start; padding: 12px 12px 10px; }
  :is(.finden, .rang-bereich) .rang-zeile.top { padding: 14px 32px 12px 12px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); }
  :is(.finden, .rang-bereich) .rang-zeile > .rang { grid-column: 1; grid-row: 1; font-size: 26px; }
  :is(.finden, .rang-bereich) .rz-name { grid-column: 2 / 4; grid-row: 1; }
  :is(.finden, .rang-bereich) .rz-name a { font-size: 22px; }
  :is(.finden, .rang-bereich) .rz-fit { grid-column: 4; grid-row: 1; font-size: 38px; }
  :is(.finden, .rang-bereich) .rang-zeile > .eq { grid-column: 4; grid-row: 2; justify-self: end; height: 26px; }
  :is(.finden, .rang-bereich) .rang-zeile > .rz-zelle:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  :is(.finden, .rang-bereich) .rang-zeile > .rz-zelle:nth-of-type(3) { grid-column: 3; grid-row: 2; }
  :is(.finden, .rang-bereich) .rang-zeile > .rz-zelle:nth-of-type(4) { grid-column: 2; grid-row: 3; }
  :is(.finden, .rang-bereich) .rang-zeile > .rz-zelle:nth-of-type(5) { grid-column: 3; grid-row: 3; }
  :is(.finden, .rang-bereich) .rz-aktion { grid-column: 4; grid-row: 3; align-self: end; }
  :is(.finden, .rang-bereich) .rz-zelle { font-size: 14px; overflow-wrap: anywhere; }
  :is(.finden, .rang-bereich) .rz-zelle::before { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--leise);
    margin-bottom: 1px; }
  :is(.finden, .rang-bereich) .rz-zelle[data-label]::before { content: attr(data-label); }
  :is(.finden, .rang-bereich) .rang-zeile.top.eins .rz-zelle::before { color: var(--p-leise); }
  :is(.finden, .rang-bereich) .weitere { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .vergleich-leiste { margin-top: 36px; }
  .vergleich-leiste .kopfzeile { gap: 10px; }
  .vergleich-leiste .vergleich, .vergleich-leiste .vergleich thead, .vergleich-leiste .vergleich tbody { display: block; }
  .vergleich-leiste .vergleich tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vergleich-leiste .vergleich thead th:first-child { display: none; }
  .vergleich-leiste .vergleich th, .vergleich-leiste .vergleich td { padding: 9px 8px 7px; font-size: 13px; overflow-wrap: anywhere; }
  .vergleich-leiste .vergleich tbody th { grid-column: 1 / -1; width: auto; padding: 7px 8px 5px; font-size: 11px; border-bottom: 0; }
  .vergleich-leiste .vergleich td + td { border-left: var(--b2) solid var(--feld-2); }
  .vergleich-leiste .vergleich thead th b { font-size: 21px; }
  .vergleich-leiste .vergleich thead th small { display: block; font-size: 11px; margin-top: 3px; }
  .vergleich-leiste .vergleich .gross-zahl { font-size: 36px; }
  .vergleich-leiste .vergleich td .eq { display: flex; height: 24px; margin-top: 4px; }

  /* Festivalseite */
  .f-kopf { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 0 0; }
  /* kompakter, damit das Line-up frueher kommt (Ed 25.10.2026) */
  .f-titel { font-size: 52px; margin-bottom: 12px; }
  .f-meta { font-size: 15px; gap: 6px 16px; }
  .f-meta svg { width: 18px; height: 18px; }
  .f-foto img, .f-foto .zoom img { height: 150px; }
  .passt { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .passt-wert { border-right: 0; border-bottom: var(--b4) solid var(--hl); padding: 18px 16px 16px; display: grid; grid-template-columns: auto auto;
    justify-content: space-between; align-items: end; }
  .passt-wert .zahl { grid-column: 1; grid-row: 1; font-size: 96px; }
  .passt-wert .eq { grid-column: 2; grid-row: 1; }
  .passt-wert p { grid-column: 1 / -1; grid-row: 2; margin: 10px 0 0; }
  .passt-gruende { grid-template-columns: minmax(0, 1fr); }
  .passt-gruende li { border-right: 0; padding: 13px 16px 11px; grid-template-columns: 22px minmax(0, 1fr) 44px; font-size: 13.5px; }
  .passt-gruende li:last-child { border-bottom: 0; }
  .passt-gruende li b { font-size: 19px; }
  .passt-gruende .kw { font-size: 26px; }
  .lineup-gitter { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .poster { padding: 22px 14px 18px; }
  .poster .hl { font-size: 32px; line-height: 1.1; }
  .poster .rest { font-size: 20px; }
  .poster .rest.k { font-size: 17px; }
  .poster .tag-kopf { font-size: 19px; padding: 4px 10px 2px; margin-top: 20px; }
  /* Namen bleiben zusammen, brechen nur, wenn ein Name allein breiter ist als die Zeile */
  .poster .hl > span, .poster .rest > span { display: inline-block; max-width: 100%; white-space: normal !important; }
  .poster a { white-space: normal; }
  .info-gitter { display: block; }
  .info-gitter .info { padding: 18px 16px 16px; border-right: 0; border-bottom: var(--b4) solid var(--tinte); }
  .info-gitter .info:last-child { border-bottom: 0; }
  .info h3 { font-size: 26px; }
  .temp div { font-size: 58px; }
  .zeitstrahl li { font-size: 12px; padding-right: 4px; }
  .zeitstrahl li b { font-size: 19px; }
  .quellen { columns: 1; }

  /* Kuenstleruebersicht: Tabelle als Karten (Name, Quadrate und Headliner, Laender, Festivals) */
  .a-kopf { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px 0 22px; }
  .a-kopf h1 { font-size: 64px; }
  .a-kopf p { font-size: 15px; }
  .mosaik { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 132px; }
  .mosaik a.g .schildchen b { font-size: 26px; }
  .a-werkzeug { margin: 24px 0 12px; gap: 10px; }
  .a-werkzeug .suche { width: 100%; }
  .a-werkzeug .rechts { margin-left: 0 !important; font-size: 13px; }
  .k-kopfzeile { display: none; }
  .k-zeile { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 5px 10px; align-items: center; padding: 11px 12px 10px; }
  .k-zeile > .nr { grid-column: 1; grid-row: 1; align-self: start; font-size: 22px; line-height: 1.1; }
  .k-zeile > .nm { grid-column: 2; grid-row: 1; font-size: 22px; }
  .k-zeile > .ikon-knopf { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; }
  .k-zeile > .punkte { grid-column: 2; grid-row: 2; flex-wrap: wrap; }
  .k-zeile > .cc:nth-of-type(3) { grid-column: 3; grid-row: 2; justify-self: end; }
  .k-zeile > .cc:nth-of-type(4) { grid-column: 2 / 4; grid-row: 3; }
  .k-zeile > .cc:nth-of-type(4)::before { content: "Countries "; color: var(--leise); }
  .k-zeile > .fl { grid-column: 2 / 4; grid-row: 4; }

  /* Mein Bereich: eine Spalte, Listen als Karten */
  .m-kopf { flex-wrap: wrap; gap: 14px 16px; padding: 22px 0; }
  .m-kopf .avatar { width: 64px; height: 64px; font-size: 30px; }
  .m-kopf > div { flex: 1 1 200px; min-width: 0; }
  .m-kopf h1 { font-size: 56px; }
  .m-kopf p { font-size: 14px; }
  .m-kopf .rechts { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .m-gitter { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 24px 0 36px; }
  .m-gitter .block { margin-bottom: 24px; }
  .m-gitter .block-kopf { flex-wrap: wrap; gap: 4px 10px; padding: 11px 14px 9px; }
  .m-gitter .block-kopf h2 { font-size: 26px; }
  .m-gitter .block-kopf .rechts { margin-left: 0; flex-basis: 100%; }
  .kurzliste li { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px 14px 10px; }
  .kurzliste li > .nr { grid-column: 1; grid-row: 1; align-self: start; line-height: 1; }
  .kurzliste li > div { grid-column: 2; grid-row: 1; }
  .kurzliste li > .ft { grid-column: 3; grid-row: 1; align-self: start; line-height: .9; }
  .kurzliste li > .eq { grid-column: 2; grid-row: 2; }
  .kurzliste li > .tg { grid-column: 3; grid-row: 2; font-size: 22px; }
  .kurzliste .tg small { display: inline; margin-left: 3px; }
  .kurzliste li > div small, .match-liste small { display: block; line-height: 1.35; margin-top: 3px; }
  .match-liste { grid-template-columns: minmax(0, 1fr); }
  .match-liste li { border-right: 0; padding: 10px 14px 8px; grid-template-columns: 48px minmax(0, 1fr) auto; }
  .match-liste img, .match-liste .ph { width: 48px; height: 48px; }
  .kompass-zeilen li { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 10px; padding: 11px 14px 9px; }
  .kompass-zeilen li > svg { grid-column: 1; grid-row: 1; }
  .kompass-zeilen li > b { grid-column: 2; grid-row: 1; }
  .kompass-zeilen li > .gewicht { grid-column: 3; grid-row: 1; }
  .kompass-zeilen li > span:not(.gewicht) { grid-column: 2 / 4; grid-row: 2; font-size: 13.5px; }
  .meldungen li { padding: 12px 14px 10px; gap: 10px; }
  .einst li { padding: 12px 14px 10px; }
  /* Sprachwahl in den Einstellungen bleibt sichtbar (im Kopf ist .sprache auf dem Handy ausgeblendet) */
  .einst .sprache { display: flex; }
}

/* Farbwahl in den Einstellungen (25.10.2026) */
.einst li.farben { flex-wrap: wrap; }
.farbwahl { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.farbwahl button { font: inherit; font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 4px;
  background: var(--platte); color: var(--tinte); border: var(--b2) solid var(--tinte); cursor: pointer; }
.farbwahl button[aria-pressed="true"] { background: var(--panel); color: var(--hl); border-color: var(--panel); }
/* Muster zeigen die Fassung selbst (Seite | Block), deshalb feste Werte */
.muster { width: 22px; height: 14px; display: inline-block; border: 1px solid rgba(0, 0, 0, .35); }
.muster-gelb { background: linear-gradient(90deg, #FFD21A 60%, #141414 60%); }
.muster-blau-himmel { background: linear-gradient(90deg, #4DB2FF 60%, #141414 60%); }
.muster-blau-kornblume { background: linear-gradient(90deg, #86A5FF 60%, #121A3A 60%); }
.muster-blau-lagune { background: linear-gradient(90deg, #3FCADB 60%, #0E2630 60%); }
.muster-gelb-gold { background: linear-gradient(90deg, #FFBE1A 60%, #1B3FA0 60%); }
.muster-neu-zweiklang { background: linear-gradient(90deg, #5BB8FF 60%, #FFD21A 60%); }
@media (max-width: 760px) { .farbwahl { margin-left: 0; width: 100%; justify-content: flex-start; margin-top: 8px; } }

/* Zwischenbreiten: Kopf darf nicht ueberlaufen (deutsche Wegschilder sind laenger) */
@media (max-width: 1320px) {
  button.suche { width: 38px; min-width: 38px; flex: none; justify-content: center; padding: 0; }
  button.suche span { display: none; }
}
@media (max-width: 1120px) {
  .marke span { display: none; }
  .wege .weg { font-size: 16px; }
  .wz.kontinent { font-size: 0; padding: 0 8px; }
  .wz.kontinent svg { width: 18px; height: 18px; }
}
@media (max-width: 760px) {
  button.suche { display: inline-flex; width: 36px; height: 36px; padding: 0; justify-content: center; border-width: var(--rand); background: transparent; }
  button.suche span { display: none; }
  .knopf.anmelden { height: 36px; padding: 0 10px; font-size: 14px; }
  .suche-panel { padding: 12px 16px 14px; }
  .suche-treffer { flex-direction: column; gap: 2px; }
  .suche-treffer .st-meta { text-align: left; }
  .vorschau-hinweis { font-size: 11.5px; }
}

/* Website v2: Rahmen der echten Seite (Kopf mit Suche als Knopf, Kontinentwahl, Vorschau-Hinweis) – 25.10.2026 */
.vorschau-hinweis { background: var(--panel); color: var(--p-text); font-size: 12.5px; font-weight: 700; text-align: center; padding: 6px 16px 5px; }
.vorschau-hinweis a { color: var(--hl); }
.kopf { position: relative; }
button.suche { font: inherit; color: var(--leise); cursor: pointer; gap: 8px; text-align: left; font-size: 14px; }
button.suche span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kontinent-wahl { position: relative; }
.kontinent-wahl summary { list-style: none; cursor: pointer; }
.kontinent-wahl summary::-webkit-details-marker { display: none; }
.kontinent-wahl .kontinent-menue { top: 46px; right: auto; left: 0; z-index: 30; }
.kontinent-menue .bald { display: flex; justify-content: space-between; padding: 6px 10px 4px; color: var(--leise); font-weight: 700; }
.kontinent-menue .bald small { font-family: var(--d); font-weight: 800; text-transform: uppercase; font-size: 14px; }
/* Kontinentwahl nur als Globus, bis der Kopf genug Platz hat (bei 1180 px ragte «Anmelden» 24 px hinaus) */
@media (max-width: 1260px) {
  .wz.kontinent { font-size: 0; padding: 0 8px; }
  .wz.kontinent svg { width: 18px; height: 18px; }
}
.km-sprache { display: none; align-items: center; gap: 6px; padding: 8px 10px; border-top: var(--b2) solid var(--tinte); font-weight: 700; }
.km-sprache span { margin-right: auto; }
.km-sprache a { padding: 3px 10px 1px; border: var(--b2) solid var(--tinte); text-decoration: none; font-weight: 800; font-size: 13px; }
.km-sprache a.an { background: var(--panel); color: var(--hl); }
@media (max-width: 980px) { .km-sprache { display: flex; } }
/* Sehr schmale Handys (320 px): Kopf mit Globus verdichten, grosse Balken schmaler, Rest abschneiden statt seitlich
   scrollen (overflow-x: clip laesst position: sticky intakt) */
@media (max-width: 360px) {
  body { overflow-x: clip; }
  .nz-kopf h1 { font-size: 54px; }
  h1 { overflow-wrap: anywhere; }
  .eq.gross { gap: 4px; }
  .eq.gross i { width: 14px; }
  .monate-klein button { font-size: 10px; }
  .kopf { gap: 6px; padding: 0 10px; }
  .werkzeuge { gap: 5px; }
  .wz, button.suche { min-width: 32px; width: 32px; height: 34px; }
  .knopf.anmelden { padding: 0 8px; font-size: 13px; }
}
.knopf.anmelden { height: 38px; white-space: nowrap; }
.wz.thema { color: var(--tinte); }
.suche-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 35; background: var(--platte); border-bottom: var(--b4) solid var(--tinte);
  padding: 14px 32px 16px; }
.suche-panel[hidden] { display: none; }
.suche-feld { display: flex; align-items: center; gap: 10px; border: var(--b3) solid var(--tinte); padding: 0 12px; height: 48px; max-width: 760px; }
.suche-feld svg { width: 20px; height: 20px; flex: none; }
.suche-feld input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; color: var(--tinte); }
.suche-zu { border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--tinte); }
.suche-liste { max-width: 760px; }
.suche-gruppe { font-family: var(--d); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; margin: 12px 0 4px; }
.suche-treffer { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px 6px; text-decoration: none; border-bottom: var(--b3) solid var(--feld-2); }
.suche-treffer:hover, .suche-treffer[aria-selected="true"] { background: var(--hell); }
.suche-treffer .st-name { font-weight: 800; }
.suche-treffer .st-meta { font-size: 13px; color: var(--leise); text-align: right; }
.suche-treffer mark { background: var(--feld); color: var(--tinte); }
.suche-leer { padding: 10px; color: var(--leise); }
.werkzeuge { min-width: 0; }
button.suche { width: 220px; flex: 0 1 220px; min-width: 120px; }
/* Zwischenbreiten: Kopf darf nicht ueberlaufen (deutsche Wegschilder sind laenger) */
@media (max-width: 1320px) {
  button.suche { width: 38px; min-width: 38px; flex: none; justify-content: center; padding: 0; }
  button.suche span { display: none; }
}
@media (max-width: 1120px) {
  .marke span { display: none; }
  .wege .weg { font-size: 16px; }
  .wz.kontinent { font-size: 0; padding: 0 8px; }
  .wz.kontinent svg { width: 18px; height: 18px; }
}
/* Tablet: Wegschilder wandern in die Leiste unten wie auf dem Handy */
@media (max-width: 980px) {
  .wege, .sprache { display: none; }
  .handy-nav { display: grid; }
  body { padding-bottom: 64px; }
}
@media (max-width: 760px) {
  button.suche { display: inline-flex; width: 36px; height: 36px; padding: 0; justify-content: center; border-width: var(--rand); background: transparent; }
  button.suche span { display: none; }
  .knopf.anmelden { height: 36px; padding: 0 10px; font-size: 14px; }
  .suche-panel { padding: 12px 16px 14px; }
  .suche-treffer { flex-direction: column; gap: 2px; }
  .suche-treffer .st-meta { text-align: left; }
  .vorschau-hinweis { font-size: 11.5px; }
}

/* Website v2: Startseite – Satzteile, Platten, Fragen als Knoepfe und Dialog zum Bearbeiten (25.10.2026) */
[hidden] { display: none !important; }
button.standort, .ed-option input { font: inherit; color: inherit; cursor: pointer; }
button.token { font: inherit; cursor: pointer; border: 0; text-transform: inherit; letter-spacing: inherit; margin: 0; }
.news .wann small { display: block; font-family: var(--t); font-size: 11.5px; font-weight: 700; text-transform: none; margin-top: 3px; }
button.token:hover, button.token:focus-visible { outline: var(--b3) solid var(--tinte); outline-offset: 3px; }
button.standort { display: block; padding: 10px 12px 8px; }
.platte .pt-wert { font-family: var(--d); font-weight: 900; font-size: 40px; line-height: .9; text-align: center; }
.platte .pt-wert small { display: block; font-family: var(--t); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.klein-text { font-size: 13px; font-weight: 700; }
.editor { border: var(--b4) solid var(--tinte); padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--platte); color: var(--tinte); }
.editor::backdrop { background: rgba(var(--tinte-rgb), .45); }
.editor form { padding: 20px 22px 18px; }
.editor h2 { font-family: var(--d); font-weight: 900; font-size: 34px; line-height: 1; text-transform: uppercase; margin: 0 0 10px; }
.ed-text { font-size: 14px; margin: 0 0 12px; }
.ed-zeile { display: flex; gap: 8px; margin-bottom: 12px; }
.ed-zeile input { flex: 1; min-width: 0; height: 40px; border: var(--b3) solid var(--tinte); padding: 0 10px; font: inherit; background: var(--platte); color: var(--tinte); }
.ed-liste { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ed-liste li { display: inline-flex; align-items: center; gap: 4px; background: var(--panel); color: var(--hl); padding: 3px 4px 2px 9px; font-weight: 800; font-size: 14px; }
.ed-liste .ikon-knopf { width: 24px; height: 24px; border: 0; background: transparent; color: var(--hl); font-size: 18px; line-height: 1; cursor: pointer; }
.ed-monate { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ed-monate .wahl { justify-content: center; padding: 8px 4px 6px; font-size: 15px; cursor: pointer; background: var(--platte); }
.ed-monate .wahl.an { background: var(--panel); color: var(--hl); }
.ed-wahl { display: grid; gap: 6px; }
.ed-option { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; border: var(--b3) solid var(--tinte); padding: 10px 12px 8px; cursor: pointer; }
.ed-option small { grid-column: 2; font-size: 13px; }
.ed-option.an { background: var(--panel); color: var(--hl); }
.ed-option.an small { color: var(--p-text); }
.ed-gewichte { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ed-gewichte li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 800; }
.ed-gewichte .quadrate { display: flex; gap: 4px; }
.ed-gewichte .q { width: 34px; height: 34px; border: var(--b3) solid var(--tinte); background: var(--platte); color: var(--tinte); font: inherit; font-weight: 800; cursor: pointer; }
.ed-gewichte .q.an { background: var(--panel); color: var(--hl); }
.ed-gewichte .q.gewaehlt { outline: var(--b3) solid var(--tinte); outline-offset: 2px; }
#ed-standort { margin-top: 2px; }
.editor-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
@media (max-width: 1180px) and (min-width: 761px) {
  .start-held { grid-template-columns: minmax(0, 1fr); }
  .wegweiser { max-width: 700px; width: 100%; margin: 0 auto; }
  .zwei-spalten { grid-template-columns: minmax(0, 1fr); }
  .koepfe { grid-template-columns: repeat(3, 1fr); }
  .kopf-k:nth-child(3n) { border-right: 0; }
  .kopf-k { border-bottom: var(--b4) solid var(--tinte); }
}
@media (max-width: 760px) {
  .editor form { padding: 16px; }
  .editor h2 { font-size: 28px; }
  .ed-monate { grid-template-columns: repeat(4, 1fr); }
}

/* Website v2: Festival finden – Kompass mit Knoepfen, Filter-Chips, Vergleichsleiste (25.10.2026) */
.monate-klein button { font: inherit; text-align: center; font-size: 11.5px; font-weight: 800; border: var(--b2) solid var(--tinte); padding: 3px 0 1px;
  cursor: pointer; background: transparent; color: var(--tinte); }
.monate-klein button.an { background: var(--panel); color: var(--hl); }
.monate-klein button.leer { opacity: .35; }
.schieber { accent-color: var(--tinte); }
button.wahl { font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; background: transparent; color: var(--tinte); }
button.wahl.an { background: var(--panel); color: var(--hl); }
.wahl .weg { display: inline-flex; align-items: center; border: 0; background: transparent; color: inherit; line-height: 1;
  cursor: pointer; padding: 0 0 0 7px; }
.wahl .weg svg { width: 9px; height: 9px; }
.zeile-k { display: flex; flex-wrap: wrap; gap: 5px; }
.dazu { display: inline-flex; gap: 4px; width: 100%; margin-top: 2px; }
.dazu input, .kompass-kopf .heim input { min-width: 0; flex: 1; height: 30px; border: var(--b2) solid var(--tinte); padding: 0 8px; font: inherit; font-size: 13px;
  background: var(--platte); color: var(--tinte); }
.kompass-kopf .heim { flex-wrap: wrap; }
.kompass-kopf .heim input { width: 100%; flex: 1 1 100%; margin-top: 4px; }
/* Wohnort-Vorschlaege im Fluss statt schwebend: die Kompass-Spalte scrollt selbst und wuerde sie abschneiden */
.ke-heim-feld { display: block; width: 100%; flex: 1 1 100%; }
.ke-orte { list-style: none; margin: 0; padding: 0; background: var(--platte); color: var(--tinte); border: var(--b2) solid var(--tinte);
  border-top: 0; max-height: 264px; overflow-y: auto; font-weight: 400; }
.ke-orte button { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; font: inherit;
  font-size: 13px; padding: 7px 8px 5px; cursor: pointer; }
.ke-orte button span { color: var(--leise, inherit); opacity: .75; font-size: 12px; }
.ke-orte [aria-selected="true"] button, .ke-orte button:hover { background: var(--hl); color: var(--panel); }
.ke-orte-leer { padding: 7px 8px 5px; font-size: 13px; }
.ke-orte-quelle { padding: 3px 8px; font-size: 10.5px; opacity: .6; border-top: var(--b1, 1px) solid var(--tinte); }
.krit-hinweis { margin: 7px 0 0; font-size: 12.5px; }
.ke-unter { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 5px; }
.ke-vorschlaege { margin-top: 8px; align-items: center; }
.ke-vorschlaege .leise { font-size: 12px; font-weight: 700; margin-right: 2px; }
.ke-vorschlaege .wahl, .mk-vorschlaege .wahl { border-style: dashed; }
.aktive-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.aktive-filter:empty { display: none; }
.kompass-knopf { display: none; }
.vergleich-schwebe { position: fixed; right: 24px; bottom: 24px; z-index: 30; }
.rz-name a { text-decoration: none; }
.rz-name a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .kompass-knopf { display: inline-flex; margin-bottom: 12px; }
  .finden .kompass { display: none; }
  .finden.kompass-offen .kompass { display: block; }
  .finden.kompass-offen > section { display: none; }
  .vergleich-schwebe { right: 16px; bottom: 76px; }
}

/* Website v2: Region x Monat (aus dem Mockup monat.html, 25.10.2026) */

  /* ---------- Kopf: Wegweiserplatte ---------- */
.mo-oben { padding-top: 26px; padding-bottom: 40px; border-bottom: var(--b4) solid var(--tinte); }
.mo-kopf { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: stretch; }
.mo-platte { background: var(--panel); color: var(--hl); padding: 22px 76px 24px 26px;
  clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 50%, calc(100% - 46px) 100%, 0 100%); }
.mo-platte .oben { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--p-text); }
.mo-platte h1 { font-family: var(--d); font-weight: 900; font-size: 92px; line-height: .86; text-transform: uppercase; margin: 10px 0 20px;
  letter-spacing: -.005em; }
.mo-platte h1 .trenn { color: var(--p-stark); margin: 0 .12em; }
.mo-zahlen { display: flex; flex-wrap: wrap; border: var(--b3) solid var(--p-linie); width: max-content; max-width: 100%; }
.mo-zahlen div { padding: 10px 18px 8px; border-right: var(--b3) solid var(--p-linie); }
.mo-zahlen div:last-child { border-right: 0; }
.mo-zahlen b { display: block; font-family: var(--d); font-weight: 900; font-size: 54px; line-height: .9; color: var(--hl); }
.mo-zahlen b sup { font-size: 26px; vertical-align: .55em; }
.mo-zahlen small { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--p-text); margin-top: 4px; }
.mo-ok { display: inline-flex; align-items: center; gap: 8px; background: var(--hl); color: var(--panel); font-weight: 800; font-size: 13.5px;
  padding: 6px 12px 4px; margin-top: 16px; text-transform: uppercase; letter-spacing: .04em; }
.mo-quelle { font-size: 12.5px; color: var(--p-leise); margin: 12px 0 0; max-width: 760px; }

.mo-pruefung { background: var(--platte); border: var(--b4) solid var(--tinte); display: flex; flex-direction: column; }
.mo-pruefung .block-fuss { margin-top: auto; }
.mo-check { list-style: none; margin: 0; padding: 0; }
.mo-check li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 11px 16px 9px; border-bottom: var(--b3) solid var(--feld-2);
  font-size: 13.5px; align-items: start; }
.mo-check li:last-child { border-bottom: 0; }
.mo-check li b { display: block; font-family: var(--d); font-weight: 800; font-size: 20px; text-transform: uppercase; line-height: 1; margin-bottom: 2px; }
.mo-check .z { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px;
  border: var(--b3) solid var(--tinte); }
.mo-check .z.ja { background: var(--panel); color: var(--hl); border-color: var(--panel); }
.mo-anteile { display: flex; height: 12px; margin-top: 7px; border: var(--b2) solid var(--tinte); }
.mo-anteile i { display: block; height: 100%; }
.mo-anteile i.ja { background: var(--tinte); }
.mo-anteile i.heiss { background: repeating-linear-gradient(135deg, var(--tinte) 0 2px, transparent 2px 5px); }
.mo-anteile i.nass { background: transparent; }

  /* ---------- Monatsleiste der Region ---------- */
.mo-text { margin: 0; font-weight: 700; font-size: 14px; max-width: 560px; }
.mo-jahr.sr-gitter { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.mo-jahr .sr-mon small.da { display: block; font-size: 9.5px; letter-spacing: .03em; }
.mo-regionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.mo-regionen > b { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.mo-reg { display: inline-flex; align-items: center; gap: 8px; border: var(--b3) solid var(--tinte); background: var(--platte); color: var(--tinte);
  padding: 6px 10px 4px; font-weight: 800; font-size: 14px; text-decoration: none; line-height: 1.15; }
.mo-reg small { font-weight: 700; font-size: 12px; }
.mo-reg.an { background: var(--panel); color: var(--hl); border-color: var(--panel); }
.mo-reg.an small { color: var(--p-text); }
.mo-reg:not(.an):hover { background: var(--platte-2); }
.mo-sw { display: inline-block; width: 14px; height: 14px; flex: none; box-shadow: inset 0 0 0 1.5px rgba(var(--tinte-rgb), .45); }

  /* ---------- Hauptteil: Rangliste + Seitenblock ---------- */
.mo-haupt { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.mo-unter { margin: -8px 0 16px; font-size: 14px; font-weight: 700; }
.mo-rang .eq i { background: var(--tinte); }
.mo-rang .rang-zeile.top.eins .leise { color: var(--p-leise); }
.mo-temp { display: inline-block; width: 10px; height: 10px; margin-right: 5px; box-shadow: inset 0 0 0 1.5px rgba(var(--tinte-rgb), .5); }
.mo-ja { font-weight: 900; }
.mo-notiz { font-size: 12.5px; font-weight: 700; color: var(--leise); margin: 12px 0 0; }
.mo-rang .weitere { flex-wrap: wrap; }

.mo-seite > * + * { margin-top: 26px; }
.mo-seite .block { margin-bottom: 0; }
.mo-karte > svg { display: block; width: 100%; height: auto; background: var(--platte-2); }
.mo-land { fill: var(--feld); stroke: var(--tinte); stroke-width: 2; stroke-linejoin: round; }
.mo-grenze { fill: none; stroke: var(--tinte); stroke-width: 1.5; stroke-dasharray: 4 3; }
.mo-punkt { fill: var(--tinte); stroke: var(--platte); stroke-width: 1.5; }
.mo-punkt.top { fill: var(--panel); stroke: var(--tinte); stroke-width: 2; }
.mo-nr { fill: var(--hl); font-family: var(--d); font-weight: 900; font-size: 13px; }
.mo-stadt { fill: var(--tinte); font-size: 10.5px; font-weight: 800; paint-order: stroke; stroke: var(--feld); stroke-width: 3px; stroke-linejoin: round; }
.mo-meer { fill: var(--leise); font-size: 11px; font-weight: 700; font-style: italic; letter-spacing: .08em; }
.mo-zh rect { fill: var(--panel); }
.mo-zh text { fill: var(--hl); font-family: var(--d); font-weight: 900; font-size: 15px; }
.mo-zh path { fill: none; stroke: var(--hl); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mo-karte-leg { padding: 10px 14px 10px; font-size: 12.5px; font-weight: 700; border-top: var(--b3) solid var(--tinte); line-height: 1.4; }
.mo-karte-leg .pk { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tinte); vertical-align: 0; margin-right: 4px; }

.mo-nah { list-style: none; margin: 0; padding: 0; }
.mo-nah li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px 8px;
  border-bottom: var(--b3) solid var(--feld-2); }
.mo-nah li:last-child { border-bottom: 0; }
.mo-nah li .mo-sw { width: 16px; height: 16px; }
.mo-nah b { display: block; font-family: var(--d); font-weight: 800; font-size: 20px; text-transform: uppercase; line-height: 1; }
.mo-nah b a { text-decoration: none; }
.mo-nah small { font-size: 12px; font-weight: 700; }
.mo-urteil { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border: var(--b2) solid var(--tinte); padding: 2px 5px 0;
  white-space: nowrap; }
.mo-urteil.ja { background: var(--panel); color: var(--hl); border-color: var(--panel); }
.mo-zwischen { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 8px 14px 6px; background: var(--platte-2);
  border-bottom: var(--b3) solid var(--feld-2); }
.mo-seite .sr-trocken h3 small { color: var(--p-text); }

@media (max-width: 1100px) {
  .mo-kopf { grid-template-columns: minmax(0, 1fr); }
  .mo-platte h1 { overflow-wrap: anywhere; hyphens: auto; }
  .mo-haupt { grid-template-columns: 1fr; }
  .mo-seite { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }
  .mo-seite > * + * { margin-top: 0; }
}

@media (max-width: 760px) {
  .mo-oben { padding-top: 16px; padding-bottom: 28px; }
  .pfad { font-size: 12px; line-height: 1.7; }
  .mo-kopf { gap: 18px; }
  .mo-platte { padding: 16px 40px 18px 16px; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%); }
  .mo-platte h1 { font-size: 48px; margin: 8px 0 14px; }
  .mo-zahlen { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .mo-zahlen div { padding: 8px 10px 6px; border-right: var(--b3) solid var(--p-linie); border-bottom: var(--b3) solid var(--p-linie); }
  .mo-zahlen div:nth-child(2n) { border-right: 0; }
  .mo-zahlen div:nth-last-child(-n+2) { border-bottom: 0; }
  .mo-zahlen b { font-size: 40px; }
  .mo-zahlen b sup { font-size: 20px; }
  .mo-zahlen small { font-size: 10px; }
  .mo-ok { font-size: 12px; }
  .mo-text { font-size: 13px; }
  .mo-jahr.sr-gitter { grid-template-columns: repeat(12, 64px); }
  .mo-regionen { gap: 6px; }
  .mo-regionen > b { width: 100%; }
  .mo-reg { font-size: 13px; padding: 5px 8px 3px; }

  .mo-rang .weitere { display: block; }
  .mo-rang .weitere .eq-legende { margin-top: 8px; }
  .mo-seite { grid-template-columns: 1fr; }
}

/* Website v2: Sammelseiten (25.10.2026) */
.sa-oben { padding-top: 26px; }
.sa-titel { font-family: var(--d); font-weight: 900; font-size: 72px; line-height: .9; text-transform: uppercase; margin: 12px 0 12px; }
.sa-lede { font-size: 17px; font-weight: 700; max-width: 860px; margin: 0 0 18px; }
.pfad { font-size: 13px; font-weight: 700; }
.pfad a { color: inherit; }
@media (max-width: 760px) {
  .sa-titel { font-size: 46px; }
  .sa-lede { font-size: 15px; }
}

/* Website v2: Festivalseite (25.10.2026) – Ergaenzungen zum Mockup-Stil */
.f-jahr { font-weight: 800; opacity: .55; }
.f-text { font-size: 17px; max-width: 720px; margin: 0 0 20px; }
.f-stand { font-size: 12.5px; font-weight: 700; color: var(--leise); margin: 12px 0 0; }
.f-meta .countdown { font-weight: 800; }
.f-foto .zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.f-foto .zoom img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-foto .foto-credit a { color: inherit; }
.kopf-notiz { margin: 0; font-weight: 700; }
.nb { white-space: nowrap; }
.poster a.mein { background: var(--panel); color: var(--hl); padding: 0 .12em; text-decoration: none; }
.lineup-gitter.ohne-playlist { grid-template-columns: minmax(0, 1fr); }
.buchen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.buchen-liste li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.buchen-liste small { font-size: 12px; font-weight: 700; color: var(--leise); }
.buchen-liste .knopf { white-space: normal; text-align: left; }
.kartenbox { position: relative; }
.detailkarte { height: 230px; border: var(--b3) solid var(--tinte); background: var(--platte-2); }
.kartenzoom { position: absolute; inset: 52px 22px auto 22px; height: 230px; background: transparent; border: 0; cursor: zoom-in; }
.pin { width: 18px; height: 18px; border-radius: 50%; background: var(--panel); border: 3px solid var(--hl); box-shadow: 0 0 0 2px var(--tinte); }
dialog.gross { border: var(--b4) solid var(--tinte); padding: 0; max-width: min(1100px, 94vw); max-height: 92vh; background: var(--platte); }
dialog.gross::backdrop { background: rgba(var(--tinte-rgb), .6); }
dialog.gross img { display: block; max-width: 100%; max-height: 88vh; }
dialog.gross .zu { position: absolute; top: 6px; right: 8px; z-index: 2; border: 0; background: var(--panel); color: var(--hl); font-size: 24px; width: 36px; height: 36px; cursor: pointer; }
.grosskarte { width: min(1000px, 90vw); height: 75vh; }
.glance { margin: 0; font-size: 14px; }
.glance dt { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-top: 10px; }
.glance dd { margin: 2px 0 0; }
.f-quellen p { font-size: 13.5px; margin: 0 0 8px; }
.f-quellen a { overflow-wrap: anywhere; }
.info-gitter.f-info { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); border-right: 0; border-bottom: 0; }
.f-info .kartenbox { grid-column: span 2; }
@media (max-width: 760px) { .f-info .kartenbox { grid-column: auto; } .info-gitter.f-info { border-right: var(--b4) solid var(--tinte); border-bottom: var(--b4) solid var(--tinte); } }
.mehr-wie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mehr-wie a.wahl { text-decoration: none; }
@media (max-width: 760px) {
  .f-text { font-size: 15px; }
  .detailkarte, .kartenzoom { height: 200px; }
}

/* Website v2: Vergleich (aus dem Mockup vergleich.html, 25.10.2026) */

  /* ---------- Kopfbereich ---------- */
.vg-held { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end; padding: 34px 0 24px; }
.vg-pfad { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.vg-pfad a { text-decoration: none; border-bottom: var(--b2) solid var(--tinte); }
.vg-held h1 { font-family: var(--d); font-weight: 900; font-size: 100px; line-height: .84; text-transform: uppercase; margin: 0; }
.vg-unter { font-size: 17px; font-weight: 700; margin: 14px 0 0; max-width: 780px; }
.vg-aktionen { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vg-kasten { width: 16px; height: 16px; border: var(--b2) solid currentColor; display: inline-block; flex: none; position: relative; }
.knopf[aria-pressed="true"] { background: var(--panel); color: var(--hl); }
.knopf[aria-pressed="true"] .vg-kasten::after { content: ""; position: absolute; inset: 2px; background: currentColor; }

  /* ---------- Zusammenfassung ---------- */
.vg-fazit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--panel); color: var(--hl); }
.vg-fazit li { padding: 14px 18px 12px; border-right: var(--b3) solid var(--p-linie); display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 10px; align-items: start; }
.vg-fazit li:last-child { border-right: 0; }
.vg-fazit svg { width: 24px; height: 24px; color: var(--hl); margin-top: 2px; }
.vg-fazit small { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--p-text); }
.vg-fazit b { display: block; font-family: var(--d); font-weight: 900; font-size: 30px; line-height: .95; text-transform: uppercase; margin: 5px 0 4px; color: var(--hl); }
.vg-fazit span { font-size: 13.5px; font-weight: 700; color: var(--p-text); }
.vg-warnung { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--platte); border: var(--rand) solid var(--tinte);
  border-left: 12px solid var(--rot); padding: 10px 14px 8px; margin-top: 12px; font-size: 14px; font-weight: 700; }
.vg-warnung a { font-weight: 800; }
.vg-signal { display: inline-block; background: var(--rot); color: var(--p-stark); font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; padding: 3px 6px 1px; line-height: 1.2; white-space: nowrap; }

  /* ---------- Vergleichstabelle ---------- */
.vg-platte { margin-top: 26px; }
.vg-wisch { display: none; }
.vg-scroll { overflow-x: auto; border: var(--b4) solid var(--tinte); background: var(--platte); }
.vg-tab { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.vg-tab col.c-label { width: 236px; }
.vg-tab col.c-slot { width: 172px; }
.vg-tab th, .vg-tab td { text-align: left; vertical-align: top; padding: 11px 14px 9px; font-size: 14px; line-height: 1.35;
  border-bottom: var(--b3) solid var(--feld-2); border-right: var(--b3) solid var(--feld-2); }
.vg-tab tr > :last-child { border-right: 0; }

  /* Spaltenkoepfe */
.vg-ecke { background: var(--platte-2); }
.vg-ecke b { display: block; font-family: var(--d); font-weight: 900; font-size: 24px; line-height: 1; text-transform: uppercase; }
.vg-ecke p { margin: 6px 0 12px; font-size: 13px; font-weight: 700; }
.vg-ecke p.handy { display: none; }
.vg-ecke .eq-legende { display: grid; gap: 4px; font-size: 12.5px; }
.vg-ecke .eq-legende svg { width: 15px; height: 15px; }
.vg-ecke .eq-legende em { font-style: normal; color: var(--leise); margin-left: 4px; }
.vg-tab thead .vg-kopf { background: var(--panel); color: var(--hl); padding: 0; border-bottom: 0; border-right: var(--b3) solid var(--platte); }
.vg-foto { position: relative; height: 150px; background: var(--panel); overflow: hidden; }
.vg-foto img { width: 100%; height: 100%; object-fit: cover; }
.vg-credit { position: absolute; left: 0; bottom: 0; background: var(--panel); color: var(--p-text); font-size: 10px; font-weight: 700; padding: 2px 6px 1px;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-weg { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; background: var(--panel); color: var(--hl); border: var(--b2) solid var(--hl);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; border-radius: 2px; }
.vg-weg svg { width: 16px; height: 16px; }
.vg-rang { position: absolute; top: 8px; left: 0; background: var(--hl); color: var(--panel); font-family: var(--d); font-weight: 900; font-size: 16px;
  text-transform: uppercase; letter-spacing: .02em; padding: 4px 20px 2px 9px; line-height: 1;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.vg-kopf-text { padding: 12px 14px 12px; }
.vg-kopf-text .n { font-family: var(--d); font-weight: 900; font-size: 28px; line-height: .95; text-transform: uppercase; display: block; min-height: 1.9em;
  text-decoration: none; color: var(--hl); }
.vg-kopf-text .n:hover { text-decoration: underline; }
.vg-kopf-text small { display: block; font-size: 12.5px; font-weight: 700; color: var(--p-text); margin-top: 5px; }
.vg-fit { display: flex; align-items: flex-end; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: var(--b2) solid var(--p-linie); }
.vg-fit .z { font-family: var(--d); font-weight: 900; font-size: 54px; line-height: .8; color: var(--hl); }
.vg-fit .z small { display: block; font-family: var(--t); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--p-text); margin-top: 5px; }
.vg-fit .eq { height: 44px; }
.vg-fit .eq i { width: 10px; }
.vg-slot-kopf { background: var(--platte-2); }
.vg-tab thead .vg-slot-kopf { padding: 10px; }
.vg-slot { border: var(--b3) dashed var(--tinte); padding: 14px 10px 12px; display: flex; flex-direction: column; gap: 9px; text-align: center; }
.vg-slot .plus { font-family: var(--d); font-weight: 900; font-size: 22px; text-transform: uppercase; line-height: 1; display: flex; flex-direction: column;
  align-items: center; gap: 6px; text-decoration: none; }
.vg-slot .plus svg { width: 34px; height: 34px; border: var(--b3) solid var(--tinte); padding: 4px; }
.vg-slot p { margin: 0; font-size: 12px; font-weight: 700; }
.vg-vorschlag { display: block; border: var(--rand) solid var(--tinte); background: var(--platte); padding: 8px 9px 6px; text-align: left; font-size: 12px;
  font-weight: 700; text-decoration: none; }
.vg-vorschlag b { display: block; font-family: var(--d); font-weight: 900; font-size: 19px; text-transform: uppercase; line-height: 1; }
.vg-vorschlag:hover { background: var(--hell); color: rgb(var(--tinte-rgb)); }
.vg-tab td.vg-leer { background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(var(--tinte-rgb), .05) 9px 18px); }

  /* Zeilenkoepfe und Gruppen */
.vg-tab tbody th { background: var(--platte-2); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; }
.vg-tab tbody th small { display: block; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12px; color: var(--leise); margin-top: 3px; }
.vg-tab tbody th .beispiel { margin-top: 6px; font-size: 10px; letter-spacing: .04em; }
.vg-tab tr.vg-gruppe th, .vg-tab tr.vg-gruppe td { background: var(--panel); color: var(--p-text); border-bottom: 0; border-right-color: var(--p-linie); padding: 10px 14px 7px;
  vertical-align: middle; }
.vg-tab tr.vg-gruppe th { color: var(--hl); font-family: var(--d); font-size: 25px; font-weight: 900; letter-spacing: .01em; text-transform: uppercase; line-height: 1; }
.vg-tab tr.vg-gruppe th span { display: inline-flex; align-items: center; gap: 9px; }
.vg-tab tr.vg-gruppe th svg { width: 22px; height: 22px; flex: none; }
.vg-tab tr.vg-gruppe td { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.vg-tab tr.vg-gruppe td.vg-leer { background: var(--panel); }
.vg-tab tr:last-child > * { border-bottom: 0; }

  /* Werte */
.vg-tab td.bester { background: var(--hell); color: rgb(var(--tinte-rgb)); box-shadow: inset 6px 0 0 rgb(var(--tinte-rgb)); }
.vg-w { display: block; font-family: var(--d); font-weight: 900; font-size: 28px; line-height: .95; }
.vg-w small { font-size: 16px; font-weight: 800; }
.vg-n { display: block; font-size: 12.5px; font-weight: 700; margin-top: 4px; }
.vg-leise { color: var(--leise); }
.bester .vg-leise { color: rgba(var(--tinte-rgb), .7); }
.vg-bar { display: block; height: 9px; border: 1.5px solid currentColor; margin-top: 7px; position: relative; }
.vg-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: currentColor; min-width: 2px; }
.vg-temp { display: inline-flex; align-items: flex-start; font-family: var(--d); font-weight: 900; font-size: 30px; line-height: .9; padding: 6px 10px 3px;
  color: rgb(var(--tinte-rgb)); box-shadow: inset 0 0 0 1px rgba(var(--tinte-rgb), .15); }
.vg-temp sup { font-size: 16px; line-height: 1; }
.vg-regen { display: flex; gap: 3px; margin-top: 7px; }
.vg-regen i { width: 13px; height: 13px; border: var(--b2) solid currentColor; display: block; }
.vg-regen i.an { background: currentColor; }
.vg-mk { display: inline-flex; width: 26px; height: 26px; border: var(--b3) solid currentColor; align-items: center; justify-content: center; font-family: var(--d);
  font-weight: 900; font-size: 18px; line-height: 1; vertical-align: middle; margin-right: 6px; }
.vg-mk.ja { background: var(--tinte); color: var(--platte); border-color: var(--tinte); }
.bester .vg-mk.ja { background: rgb(var(--tinte-rgb)); color: var(--hell); border-color: rgb(var(--tinte-rgb)); }
.vg-mk.offen { border-style: dashed; }
.vg-zeile-mk { display: flex; align-items: center; margin: 0 0 5px; font-weight: 700; font-size: 13px; }
.vg-namen { margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; font-weight: 700; line-height: 1.35; }
.vg-namen .mein { font-weight: 800; }
.vg-stern { display: inline-block; line-height: 1; }
.vg-stern svg { width: 12px; height: 12px; vertical-align: -1px; }
.vg-clash { display: block; border-left: 5px solid var(--rot); padding: 1px 0 0 8px; font-weight: 700; margin-top: 6px; font-size: 13px; line-height: 1.3; }
.vg-clash b { font-weight: 800; }
.vg-ok { font-weight: 800; }

  /* Legende und Hinweise unter der Tabelle */
.vg-legende { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-size: 13px; font-weight: 700; align-items: center; }
.vg-legende .muster { display: inline-block; width: 24px; height: 15px; background: var(--hell); box-shadow: inset 5px 0 0 rgb(var(--tinte-rgb));
  border: 1px solid rgba(var(--tinte-rgb), .3); vertical-align: -3px; margin-right: 6px; }
.vg-legende .muster.clash { background: var(--platte); box-shadow: inset 5px 0 0 var(--rot); }
.vg-tab.nur-unterschiede tr.vg-gleich { display: none; }
/* Schwebende Kopfzeile des Vergleichs (vergleich.js, schwebeLage) */
.vg-schwebe { position: fixed; top: 0; z-index: 40; display: flex; background: var(--panel); color: var(--hl); border: var(--b4) solid var(--tinte);
  border-top: 0; box-shadow: 0 4px 0 rgba(var(--tinte-rgb), .12); }
.vg-schwebe[hidden] { display: none; }
.vg-s-ecke { flex: none; background: var(--panel); border-right: var(--b3) solid var(--p-linie); }
.vg-s-fenster { flex: 1; overflow: hidden; }
.vg-s-reihe { display: flex; will-change: transform; }
.vg-s-zelle { flex: none; box-sizing: border-box; padding: 9px 14px 7px; border-right: var(--b3) solid var(--p-linie); text-decoration: none; color: var(--hl); }
.vg-s-zelle:last-child { border-right: 0; }
.vg-s-zelle b { display: block; font-family: var(--d); font-weight: 900; font-size: 21px; line-height: 1; text-transform: uppercase; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.vg-s-zelle span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--p-text); margin-top: 3px; }
@media (max-width: 760px) { .vg-s-zelle { padding: 7px 8px 5px; } .vg-s-zelle b { font-size: 15px; } }
.vg-hinweise { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; margin-top: 40px; }
.vg-hinweise .block { margin-bottom: 0; }
.vg-hinweise ul { margin: 0; padding: 14px 16px 14px 34px; font-size: 13.5px; }
.vg-hinweise li { margin: 0 0 6px; }

  /* ---------- Handy ---------- */
@media (max-width: 760px) {
  .vg-held { grid-template-columns: minmax(0, 1fr); padding: 20px 0 16px; gap: 14px; }
  .vg-held h1 { font-size: 60px; }
  .vg-unter { font-size: 14px; margin-top: 10px; }
  .vg-aktionen { justify-content: flex-start; gap: 6px; }
  .vg-aktionen .knopf { font-size: 13px; padding: 8px 10px 6px; }
  .vg-fazit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vg-fazit li { padding: 11px 10px 9px; grid-template-columns: minmax(0, 1fr); border-bottom: var(--b3) solid var(--p-linie); }
  .vg-fazit li:nth-child(2n) { border-right: 0; }
  .vg-fazit li:nth-last-child(-n+2) { border-bottom: 0; }
  .vg-fazit svg { display: none; }
  .vg-fazit b { font-size: 21px; }
  .vg-fazit span { font-size: 12px; }
  .vg-fazit small { font-size: 10.5px; }
  .vg-warnung { font-size: 13px; border-left-width: 8px; padding: 9px 10px 7px; gap: 8px; }
  .vg-platte { margin-top: 18px; }
  /* Festivals seitlich wischen, Zeilenkoepfe stehen fest; zwei Festivals nebeneinander */
  .vg-wisch { display: flex; align-items: center; gap: 10px; background: var(--panel); color: var(--hl); padding: 8px 10px 6px; font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em; }
  .vg-wisch svg { width: 18px; height: 18px; flex: none; }
  .vg-wo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-left: auto; width: 70px; flex: none; }
  .vg-wo i { height: 9px; border: 1.5px solid var(--hl); display: block; }
  .vg-wo i.an { background: var(--hl); }
  .vg-scroll { scroll-snap-type: x mandatory; scroll-padding-left: 96px; overscroll-behavior-x: contain; border-top: 0; }
  .vg-tab { width: max-content; }
  .vg-tab col.c-label { width: 96px; }
  .vg-tab col.c-f, .vg-tab col.c-slot { width: 127px; }
  .vg-tab th, .vg-tab td { padding: 8px 8px 7px; font-size: 12.5px; }
  .vg-tab thead th { scroll-snap-align: start; }
  .vg-tab tbody th, .vg-tab thead th.vg-ecke, .vg-tab tr.vg-gruppe th { position: sticky; left: 0; z-index: 3; box-shadow: var(--b3) 0 0 var(--tinte); }
  .vg-tab tbody th { font-size: 10.5px; letter-spacing: .03em; hyphens: auto; }
  .vg-tab tbody th small { font-size: 10.5px; }
  .vg-ecke b { font-size: 17px; }
  .vg-ecke p { font-size: 11.5px; margin: 5px 0 0; }
  .vg-ecke .eq-legende, .vg-ecke p.gross { display: none; }
  .vg-ecke p.handy { display: block; }
  .vg-foto { height: 84px; }
  .vg-weg { width: 26px; height: 26px; top: 6px; right: 6px; }
  .vg-rang { font-size: 13px; padding: 3px 16px 1px 7px; top: 6px; }
  .vg-kopf-text { padding: 9px 8px 10px; }
  .vg-kopf-text .n { font-size: 19px; min-height: 2.85em; }
  .vg-kopf-text small { font-size: 11px; }
  .vg-fit { flex-direction: row; align-items: flex-end; gap: 8px; margin-top: 8px; padding-top: 8px; }
  .vg-fit .z { font-size: 38px; }
  .vg-fit .eq { height: 32px; gap: 2px; }
  .vg-fit .eq i { width: 6px; }
  .vg-slot { padding: 10px 6px; gap: 7px; }
  .vg-slot .plus { font-size: 17px; }
  .vg-vorschlag b { font-size: 16px; }
  .vg-tab tr.vg-gruppe th { font-size: 16px; padding: 9px 8px 6px; }
  .vg-tab tr.vg-gruppe th svg { display: none; }
  .vg-tab tr.vg-gruppe td { font-size: 10px; padding: 9px 8px 6px; }
  .vg-tab td.bester { box-shadow: inset 4px 0 0 rgb(var(--tinte-rgb)); }
  .vg-w { font-size: 21px; }
  .vg-w small { font-size: 13px; }
  .vg-n { font-size: 11.5px; }
  .vg-namen, .vg-clash, .vg-zeile-mk { font-size: 12px; }
  .vg-temp { font-size: 23px; padding: 5px 7px 2px; }
  .vg-temp sup { font-size: 12px; }
  .vg-regen { gap: 2px; }
  .vg-regen i { width: 9px; height: 9px; border-width: 1.5px; }
  .vg-mk { width: 22px; height: 22px; font-size: 15px; border-width: var(--b2); margin-right: 4px; }
  .vg-legende { font-size: 12px; gap: 6px 14px; }
  .vg-hinweise { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 28px; }
}

/* Website v2: Kuenstlerseite (25.10.2026) – Tourkarte mit kuenstler.js wie bisher, Stil Wegweiser */
:root { --primaer: var(--tinte); }
.k-kopf-v2 { padding-top: 26px; }
.k-held { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 32px; margin-top: 14px; align-items: start; }
.k-foto { position: relative; border: var(--b4) solid var(--tinte); background: var(--panel); aspect-ratio: 4 / 5; overflow: hidden; }
.k-foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); display: block; }
.k-foto .foto-credit a { color: inherit; }
.k-name { font-family: var(--d); font-weight: 900; font-size: 96px; line-height: .86; text-transform: uppercase; margin: 0 0 10px; }
.k-unter { font-size: 16px; font-weight: 700; margin: 0 0 16px; }
.k-zahlen { display: flex; flex-wrap: wrap; border: var(--b3) solid var(--tinte); width: max-content; max-width: 100%; background: var(--platte); margin-bottom: 16px; }
.k-zahlen div { padding: 8px 16px 6px; border-right: var(--b3) solid var(--tinte); }
.k-zahlen div:last-child { border-right: 0; }
.k-zahlen b { display: block; font-family: var(--d); font-weight: 900; font-size: 42px; line-height: .9; }
.k-zahlen small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.k-bio { font-size: 15px; max-width: 760px; margin: 0 0 16px; }
.k-folgen { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; margin: 14px 0 0; }
.k-fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; margin: 24px 0 0; border: var(--b3) solid var(--tinte); background: var(--platte); }
.k-fakten div { padding: 10px 14px 8px; border-right: var(--b3) solid var(--feld-2); }
.k-fakten dt { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.k-fakten dd { margin: 3px 0 0; font-size: 14px; font-weight: 700; }
.tour-karte-teil { background: var(--meer); }
.tourkarte { height: 520px; }
.tour-seite { background: var(--platte); max-height: 640px; overflow: auto; }
.tour-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 10px 14px; list-style: none; font-size: 12.5px; font-weight: 700; color: #e9e3c8; }
.tour-legende li { display: inline-flex; align-items: center; gap: 7px; }
.tour-legende svg { color: var(--stopp); }
.leg-schalter { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.leg-konzert { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #bdb59a; display: inline-block; }
.zeit { list-style: none; margin: 0; padding: 0; }
.zeit li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; padding: 12px 16px 10px; border-bottom: var(--b3) solid var(--feld-2); }
.zeit li:hover, .zeit li.aktiv { background: var(--hell); }
.zeit .punkt { width: 36px; height: 36px; border-radius: 50%; background: var(--panel); color: var(--hl); display: grid; place-items: center;
  font-family: var(--d); font-weight: 900; font-size: 20px; cursor: pointer; }
.zeit .punkt.klein { width: 14px; height: 14px; margin: 6px 11px 0; background: var(--platte); border: 2.5px solid var(--leise); }
.zeit .titellink { text-decoration: none; }
.zeit b { font-family: var(--d); font-weight: 800; font-size: 20px; text-transform: uppercase; line-height: 1; }
.zeit small { display: block; font-size: 12.5px; font-weight: 700; margin-top: 3px; }
.zeit .weg { grid-column: 2; font-size: 12px; color: var(--leise); }
.zeit .gleich, .zeit .k-marke { font-size: 10.5px; font-weight: 800; text-transform: uppercase; border: var(--b2) solid var(--tinte); padding: 1px 4px 0; margin-left: 6px; }
.tour-zusammen { list-style: none; margin: 0; padding: 12px 16px 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; background: var(--panel); color: var(--hl);
  font-weight: 800; font-size: 13px; }
.stopp { width: 30px; height: 30px; border-radius: 50%; background: var(--stopp); color: #141414; border: 3px solid #141414; display: grid; place-items: center;
  font-family: var(--d); font-weight: 900; font-size: 16px; cursor: pointer; box-sizing: border-box; }
.stopp.aktiv { transform: scale(1.2); }
.konzert-punkt { width: 11px; height: 11px; border-radius: 50%; background: var(--meer); border: 2px solid #bdb59a; box-sizing: border-box; }
.konzert-punkt.aktiv { transform: scale(1.35); border-color: var(--stopp); }
.konzert-liste { list-style: none; margin: 0 0 12px; padding: 0; columns: 2; column-gap: 32px; }
.konzert-liste li { break-inside: avoid; display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto; gap: 10px; align-items: start; padding: 7px 0 6px;
  border-bottom: var(--b3) solid var(--feld-2); font-size: 14px; }
.konzert-liste li.leg-kopf { display: block; border-bottom: var(--b3) solid var(--tinte); padding-top: 14px; font-weight: 700; }
.konzert-liste li.leg-kopf b { font-family: var(--d); font-size: 20px; text-transform: uppercase; }
.konzert-liste time { font-weight: 800; }
.knopf.klein { height: 30px; font-size: 12.5px; padding: 0 10px; }
.k-festivals { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.gleiche-v2 { display: flex; flex-wrap: wrap; gap: 6px; }
.gleiche-v2 a { text-decoration: none; }
.disko-v2 .neu { background: var(--panel); color: var(--hl); padding: 14px 16px 12px; }
.disko-v2 .neu small { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--p-text); }
.disko-v2 .neu b { display: block; font-family: var(--d); font-weight: 900; font-size: 28px; text-transform: uppercase; line-height: 1; margin: 4px 0; }
.disko-v2 .neu span { font-size: 13px; color: var(--p-text); }
.disko-liste { list-style: none; margin: 0; padding: 0; background: var(--platte); border: var(--b3) solid var(--tinte); border-top: 0; }
.disko-liste li { padding: 7px 14px 5px; border-bottom: var(--b3) solid var(--feld-2); font-size: 14px; }
.disko-liste .j { font-weight: 800; margin-right: 8px; }
.k-quelle { padding: 12px 32px 24px; }
@media (max-width: 1100px) {
  .tour { grid-template-columns: minmax(0, 1fr); }
  .tour-seite { max-height: none; }
}
@media (max-width: 760px) {
  .k-held { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .k-foto { aspect-ratio: 16 / 10; }
  .k-name { font-size: 54px; }
  .tourkarte { height: 340px; }
  .konzert-liste { columns: 1; }
  .konzert-liste li { grid-template-columns: 84px minmax(0, 1fr); }
  .konzert-liste li > :nth-child(3), .konzert-liste li > :nth-child(4) { grid-column: 2; justify-self: start; }
  .k-festivals { grid-template-columns: repeat(2, 1fr); }
  .k-quelle { padding: 12px 16px 20px; }
}

/* Website v2: Kuenstlerliste (25.10.2026) */
.kl-mosaik { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
/* Suchfeld und Schalter auf eine Unterkante, gleich hoch (Ed 25.10.2026: «Felder nicht sauber ausgerichtet») */
.kl-werkzeuge-v2 { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin: 0 0 10px; }
.kl-werkzeuge-v2 .suche-zeile { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; flex: 1 1 280px; }
.kl-werkzeuge-v2 input[type="search"] { box-sizing: border-box; height: 42px; margin: 0; border: var(--b3) solid var(--tinte); padding: 0 12px; font: inherit;
  font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: 0; background: var(--platte); color: var(--tinte); }
.kl-werkzeuge-v2 label.wahl { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; height: 42px; margin: 0; padding: 0 14px;
  border: var(--b3) solid var(--tinte); background: var(--platte); cursor: pointer; font-size: 14px; line-height: 1; white-space: nowrap; }
.kl-werkzeuge-v2 label.wahl input { margin: 0; width: 16px; height: 16px; accent-color: var(--tinte); }
.kl-werkzeuge-v2 + .mo-unter { margin: 0 0 12px; }
.kl-liste-v2 .kl-fest .sep { margin: 0 .35em; }
/* Rechtsseiten im Festival-Design (Ed 26.10.2026): Text aus den gemeinsamen Bausteinen von pitchorado.com */
.recht-v2 { padding-top: 0; }
.recht-platte { background: var(--platte); border: var(--b4) solid var(--tinte); padding: 26px 32px 22px; max-width: 860px;
  font-size: 15.5px; line-height: 1.6; }
.recht-platte h2 { font-family: var(--d); font-weight: 900; font-size: 26px; line-height: 1; text-transform: uppercase; margin: 28px 0 8px; }
.recht-platte h2:first-of-type { margin-top: 10px; }
.recht-platte h3 { font-family: var(--d); font-weight: 800; font-size: 20px; text-transform: uppercase; margin: 18px 0 6px; }
.recht-platte p { margin: 0 0 12px; }
.recht-platte ul { margin: 0 0 12px; padding-left: 22px; }
.recht-platte li { margin: 0 0 4px; }
.recht-platte .klein { font-size: 13px; color: var(--leise); }
.recht-platte a { color: inherit; text-underline-offset: 2px; }
.recht-wechsel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
@media (max-width: 760px) { .recht-platte { padding: 18px 16px 14px; font-size: 15px; } .recht-platte h2 { font-size: 22px; } }
.kl-meine { background: var(--platte); border: var(--b3) solid var(--tinte); padding: 12px 14px 10px; margin: 0 0 16px; }
.kl-meine-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 8px; font-size: 13px; }
.kl-meine-kopf b { font-family: var(--d); font-weight: 800; font-size: 20px; text-transform: uppercase; }
.kl-meine-kopf .knopf { margin-left: auto; }
.kl-meine .wahl a { color: inherit; text-decoration: none; }
.kl-name-zelle { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.kl-stern { flex: none; border: 0; background: transparent; color: var(--tinte); font-size: 20px; line-height: 1; padding: 0 2px; cursor: pointer; }
.kl-stern.an { color: var(--rot); }
.kl-stern:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }
.kl-liste-v2 { list-style: none; margin: 0; padding: 0; border-top: var(--b4) solid var(--tinte); }
.kl-liste-v2 li { display: grid; grid-template-columns: minmax(0, 280px) 50px minmax(0, 1fr) 140px; gap: 12px; align-items: baseline; padding: 10px 12px 8px;
  border-bottom: var(--b3) solid var(--feld-2); }
.kl-liste-v2 li:nth-child(even) { background: var(--feld-2); }
.kl-liste-v2 .kl-name { font-family: var(--d); font-weight: 800; font-size: 21px; text-transform: uppercase; line-height: 1.05; text-decoration: none; }
.kl-liste-v2 .stern { margin-left: 6px; font-size: 15px; }
.kl-zahl-v2 { font-family: var(--d); font-weight: 900; font-size: 26px; line-height: 1; text-align: right; }
.kl-zahl-v2 small { display: block; font-family: var(--t); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--leise); margin-top: 2px; }
.kl-liste-v2 .kl-fest { font-size: 13.5px; }
.kl-liste-v2 .kl-fest small { display: block; font-size: 12px; font-weight: 700; color: var(--leise); margin-top: 3px; }
.kl-liste-v2 .kl-land { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--leise); text-align: right; }
@media (max-width: 760px) {
  .kl-liste-v2 li { grid-template-columns: minmax(0, 1fr) 40px; gap: 4px 10px; }
  .kl-liste-v2 .kl-fest, .kl-liste-v2 .kl-land { grid-column: 1 / -1; text-align: left; }
  .kl-mosaik { grid-template-columns: repeat(2, 1fr); }
}

/* Website v2: News (25.10.2026, aus Mockup seite-news.css) */
/* ---------- Seitenkopf ---------- */
.nz-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; padding-top: 36px; padding-bottom: 30px;
  border-bottom: var(--b4) solid var(--tinte); }
.nz-kopf h1 { font-family: var(--d); font-weight: 900; font-size: 104px; line-height: .85; text-transform: uppercase; margin: 0; }
.nz-unter { font-size: 17px; font-weight: 700; margin: 14px 0 0; max-width: 700px; }
.nz-lauf { background: var(--panel); color: var(--p-text); padding: 14px 58px 13px 18px; min-width: 380px;
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%); }
.nz-lauf .oben { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.nz-lauf .oben svg { width: 15px; height: 15px; color: var(--hl); }
.nz-lauf b { display: block; font-family: var(--d); font-weight: 900; font-size: 44px; line-height: .95; text-transform: uppercase; color: var(--hl); margin: 4px 0 4px; }
.nz-lauf small { font-size: 13px; font-weight: 700; }

/* ---------- Raster: Meldungen links, Seitenbloecke rechts ---------- */
.nz-gitter { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 40px; padding-top: 30px; padding-bottom: 56px; align-items: start; }
.nz-haupt { min-width: 0; }

/* Filter */
.nz-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.nz-filter .reiter button { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.nz-filter .reiter svg { width: 13px; height: 13px; vertical-align: 0; }
.nz-zahl { font-size: 11.5px; font-weight: 800; border: var(--b2) solid currentColor; border-radius: 9px; min-width: 22px; padding: 1px 5px 0; text-align: center;
  line-height: 1.2; }
.nz-wisch-hinweis { display: none; }
.nz-leer { font-weight: 800; padding: 18px; background: var(--platte); border: var(--rand) solid var(--tinte); }
/* «Fuer dich»: Regel in einem Satz und Knopf zum Kompass (27.10.2026) */
.nz-fd { margin: -10px 0 22px; font-size: 14px; line-height: 1.5; }
.nz-fd[hidden] { display: none; }
.nz-fd button, .nz-block-text .knopf-link { font: inherit; font-weight: 800; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }

/* Tagesgruppen */
.nz-tag { margin-bottom: 30px; }
.nz-tag[hidden], .nz-liste li[hidden], .nz-leer[hidden] { display: none; }
.nz-tag-kopf { display: flex; align-items: center; gap: 14px; padding: 10px 0 8px; border-bottom: var(--b4) solid var(--tinte); position: sticky; top: 0;
  background: var(--feld); z-index: 5; }
.nz-tag-kopf h2 { font-family: var(--d); font-weight: 900; font-size: 32px; line-height: 1; text-transform: uppercase; margin: 0; display: flex;
  align-items: center; gap: 12px; }
.nz-heute, .nz-gestern { font-size: 20px; padding: 5px 24px 3px 10px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); }
.nz-heute { background: var(--panel); color: var(--hl); }
.nz-gestern { background: var(--platte); color: var(--tinte); }
.nz-tag-kopf .rechts { margin-left: auto; font-size: 13px; font-weight: 700; }

/* Meldungen (baut auf .news auf) */
.news.nz-liste { border-top: 0; }
.news.nz-liste li { grid-template-columns: 138px minmax(0, 1fr) 118px; gap: 18px; padding: 14px 14px 12px 24px; align-items: start; }
.news.nz-liste li.match { background: var(--platte); box-shadow: inset 8px 0 0 var(--panel); }
.nz-wann { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; padding-top: 2px; }
.nz-wann b { font-family: var(--d); font-weight: 900; font-size: 25px; letter-spacing: 0; line-height: 1; }
.nz-neu { width: 10px; height: 10px; border-radius: 50%; background: var(--rot); flex: none; align-self: center; margin-right: 1px; }
.nz-fest { font-family: var(--d); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; text-decoration: none; }
.nz-fest:hover { text-decoration: underline; }
.nz-ort { font-size: 12.5px; font-weight: 700; color: var(--leise); margin-left: 10px; white-space: nowrap; }
.nz-text { margin: 5px 0 0; font-size: 15.5px; line-height: 1.4; }
mark.mein { background: var(--panel); color: var(--hl); font-weight: 800; padding: 0 3px; white-space: nowrap; }
.nz-vorbehalt { font-weight: 800; }
.news.nz-liste .hinweis { display: inline-flex; align-items: center; gap: 4px; margin: 6px 14px 0 0; }
.news.nz-liste .hinweis svg { width: 13px; height: 13px; vertical-align: 0; }
.nz-quelle { display: block; font-size: 12px; font-weight: 700; color: var(--leise); margin-top: 5px; }
.nz-quelle a { color: inherit; }
.nz-art { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; padding-top: 3px; }
.marke-q.nz-match { background: var(--panel); color: var(--hl); border-color: var(--panel); display: inline-flex; align-items: center; gap: 4px; }
.marke-q.nz-match svg { width: 11px; height: 11px; }
.marke-q.nz-geruecht { border-style: dashed; }
.news.nz-liste li.geruecht .nz-text { color: var(--tinte-2); }

.nz-mehr { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; font-weight: 700; }

/* ---------- Seitenbloecke ---------- */
.nz-seite .block { margin-bottom: 26px; }
.nz-seite .block-kopf h2 { font-size: 27px; }
.nz-block-text { margin: 0; padding: 12px 16px 10px; font-size: 13px; font-weight: 600; }
.nz-zwischen { margin: 0; padding: 8px 16px 6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  background: var(--platte-2); border-top: var(--b3) solid var(--tinte); border-bottom: var(--b3) solid var(--tinte); }
.nz-alarm-liste { list-style: none; margin: 0; padding: 0; }
.nz-alarm-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto 30px; gap: 10px; align-items: center; padding: 9px 16px 7px;
  border-bottom: var(--b3) solid var(--feld-2); }
.nz-alarm-liste li:last-child { border-bottom: 0; }
.nz-alarm-liste b { font-family: var(--d); font-weight: 800; font-size: 20px; text-transform: uppercase; line-height: 1; }
.nz-alarm-liste b a { text-decoration: none; }
.nz-alarm-liste small { font-size: 12px; font-weight: 700; color: var(--leise); white-space: nowrap; }
.nz-wie .nz-block-text { font-weight: 700; font-size: 12.5px; }

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  .nz-kopf { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 22px; padding-bottom: 22px; }
  .nz-kopf h1 { font-size: 72px; }
  .nz-unter { font-size: 15px; margin-top: 10px; }
  .nz-lauf { min-width: 0; padding: 12px 44px 11px 14px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
  .nz-lauf b { font-size: 34px; }
  .nz-lauf small { font-size: 12.5px; }
  .nz-gitter { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 20px; padding-bottom: 36px; }

  /* Filter als wischbare Reiterzeile bis an den Rand, Verlauf zeigt: es geht weiter */
  .nz-filter { gap: 10px; margin-bottom: 18px; }
  .nz-wisch-rahmen { position: relative; width: calc(100% + 32px); margin: 0 -16px; }
  .nz-wisch-rahmen::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--feld)); }
  .nz-wisch { overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
  .nz-wisch::-webkit-scrollbar { display: none; }
  .nz-wisch .reiter { width: max-content; }
  .nz-filter .reiter button { padding: 9px 10px 7px; font-size: 13px; }
  .nz-wisch-hinweis { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
  .nz-wisch-hinweis svg { width: 16px; height: 16px; }

  .nz-tag { margin-bottom: 22px; }
  .nz-tag-kopf { flex-wrap: wrap; gap: 4px 10px; padding: 8px 0 6px; }
  .nz-tag-kopf h2 { font-size: 25px; gap: 8px; }
  .nz-heute, .nz-gestern { font-size: 16px; padding: 4px 19px 2px 8px; }
  .nz-tag-kopf .rechts { font-size: 12px; }

  .news.nz-liste li { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px 12px 11px 18px; }
  .news.nz-liste li.match { box-shadow: inset 6px 0 0 var(--panel); }
  .nz-wann { grid-column: 1; grid-row: 1; font-size: 12px; }
  .nz-wann b { font-size: 21px; }
  .nz-art { grid-column: 2; grid-row: 1; flex-direction: row; padding-top: 0; }
  .news.nz-liste .was { grid-column: 1 / -1; grid-row: 2; }
  .nz-fest { font-size: 22px; }
  .nz-ort { display: block; margin: 3px 0 0; white-space: normal; }
  .nz-text { font-size: 15px; }
  .news.nz-liste .hinweis { margin-right: 10px; }

  .nz-mehr .knopf { width: 100%; justify-content: center; }
}

/* Anpassungen Website v2 (25.10.2026): Seitenblock ohne Glocke, Pfad im Kopf, Hinweise als Zeile */
.nz-kopf .pfad { margin-bottom: 10px; }
.nz-deine .nz-alarm-liste li { grid-template-columns: minmax(0, 1fr) auto; }
.nz-hinweise:empty { display: none; }
.nz-hinweise { display: block; }
.nz-tag-kopf .rechts b { font-weight: 800; }

/* Website v2: News ohne Uhrzeit (Ed 25.10.2026), der Tag steht im Gruppenkopf; «neu»-Punkt vor dem Festivalnamen */
.news.nz-liste li { grid-template-columns: minmax(0, 1fr) 118px; }
.news.nz-liste .was .nz-neu { display: inline-block; vertical-align: 3px; margin-right: 8px; }
@media (max-width: 760px) {
  .news.nz-liste li { grid-template-columns: minmax(0, 1fr) auto; }
  .news.nz-liste .was { grid-column: 1; grid-row: 1; }
  .nz-art { align-self: start; }
}

/* Website v2: Konto und Mein Bereich (25.10.2026) */
.me-rang .rangliste { margin: 0; }
.me-rang { padding: 0; }
.me-kuenstler .ph { display: grid; place-items: center; font-family: var(--d); font-weight: 900; font-size: 28px; background: var(--panel); color: var(--hl); }
.me-kuenstler .me-weg { cursor: pointer; font-size: 18px; font-weight: 800; line-height: 1; }
.me-k-dazu { align-items: center; }
.me-k-dazu input, .me-anmelden input { flex: 1 1 200px; height: 40px; border: var(--b3) solid var(--tinte); padding: 0 10px; font: inherit; font-size: 15px;
  background: var(--platte); color: var(--tinte); min-width: 0; }
.me-anmelden { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.me-anmelden .knopf { height: 40px; }
.me-anmelden[hidden] { display: none; }
.me-code label { flex: 1 1 100%; font-weight: 800; font-size: 13px; }
.me-code input { flex: 0 1 160px; font-size: 22px; letter-spacing: 3px; text-align: center; font-variant-numeric: tabular-nums; }
.me-meldung { flex-basis: 100%; margin: 4px 0 0; font-weight: 700; font-size: 13.5px; }
.me-meldung:empty { display: none; }
.me-klein { font-size: 12px; padding-top: 0; }
/* Konto mit Passwort (10.11.2026): Wege als Reiter, Haekchen «Angemeldet bleiben», Zugang in Mein Bereich */
.me-wege { padding: 0 16px 10px; }
.me-wege .reiter { display: inline-flex; flex-wrap: wrap; }
.me-anmelden .me-klein { flex-basis: 100%; margin: 0; padding: 0; }
.me-vergessen a { color: inherit; }
.me-bleiben { display: flex; gap: 10px; align-items: flex-start; padding: 2px 16px 12px; font-weight: 700; font-size: 14px; }
.me-bleiben input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--tinte); flex: none; }
.me-bleiben small { display: block; font-weight: 600; color: var(--leise); font-size: 12.5px; }
.me-login .me-bleiben { padding: 0 0 14px; }
.me-zugang { border-top: var(--b3) solid var(--feld-2); padding-top: 12px; }
.me-zugang h3 { flex-basis: 100%; margin: 0; font-size: 15px; }
.me-zugang label { flex-basis: 100%; font-weight: 800; font-size: 13px; margin-bottom: -4px; }
.me-zugang input { flex-basis: 100%; }
.knopf.me-gefahr { border-color: var(--rot); color: var(--rot); background: var(--platte); }
.knopf.voll.me-gefahr { background: var(--rot); color: #fff; }
.me-login { padding-top: 40px; padding-bottom: 60px; max-width: 760px; }
.me-login p { font-size: 16px; font-weight: 600; }
.wz.glocke { position: relative; }
.zahl-marke { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--rot); color: #fff;
  font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; line-height: 1; }
.kopf .avatar { text-decoration: none; flex: none; }
.rueckfrage { border: var(--b4) solid var(--tinte); background: var(--platte); color: var(--tinte); padding: 22px; max-width: min(460px, calc(100vw - 32px)); }
.rueckfrage::backdrop { background: rgba(20, 20, 20, .5); }
.rueckfrage p { margin: 0 0 18px; font-weight: 600; line-height: 1.45; }
.rueckfrage-knoepfe { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.einst .reiter button { padding: 6px 10px 4px; }
@media (max-width: 760px) {
  .m-gitter { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 24px; }
  .match-liste.me-kuenstler { grid-template-columns: minmax(0, 1fr); }
  .m-kopf { flex-wrap: wrap; }
  .m-kopf .rechts { margin-left: 0; }
  .einst li { flex-wrap: wrap; }
}

/* Website v2: Mein Bereich mit Seitenrand (Mockup-Regeln setzen padding ohne Rand), Merkliste als Kurzliste */
.rahmen.m-kopf { padding-left: 32px; padding-right: 32px; }
.rahmen.m-gitter { padding-left: 32px; padding-right: 32px; }
#me-merkliste li { grid-template-columns: 34px minmax(0, 1fr) 56px 50px 30px; }
#me-merkliste small { display: block; margin-top: 3px; }
@media (max-width: 760px) {
  .rahmen.m-kopf, .rahmen.m-gitter { padding-left: 16px; padding-right: 16px; }
  #me-merkliste li { grid-template-columns: 26px minmax(0, 1fr) 44px 30px; gap: 8px; }
  #me-merkliste .tg { display: none; }
}

/* Website v2: Kartenansicht in Festival finden (25.10.2026) */
.ergebnis-kopf .rechts { display: flex; flex-wrap: wrap; gap: 8px; }
.karte-bereich { margin-top: 8px; }
.karte-bereich .mo-unter { margin-top: 10px; }
.karte-v2 { height: min(70vh, 680px); border: var(--b4) solid var(--tinte); background: #e8e4d8; }
.karte-v2.start-karte { height: min(60vh, 520px); }
.karte-popup .maplibregl-popup-content { border: var(--b3) solid var(--tinte); border-radius: 0; padding: 12px 14px 10px; font-family: var(--t); color: #141414;
  box-shadow: none; }
.karte-popup b { display: block; font-family: var(--d); font-weight: 900; font-size: 20px; text-transform: uppercase; line-height: 1.05; }
.karte-popup span { display: block; font-size: 13px; font-weight: 700; margin-top: 3px; }
.karte-popup .fit { font-family: var(--d); font-size: 18px; font-weight: 900; }
.karte-popup a { display: inline-block; margin-top: 6px; font-weight: 800; color: #141414; }
@media (max-width: 760px) {
  .karte-v2 { height: clamp(360px, 62vh, 520px); }
}

/* Website v2: Grundliste fuer Crawler ohne JavaScript; mit JavaScript ausgeblendet (Klasse js am html-Element) */
.grundliste { columns: 2 320px; column-gap: 32px; margin: 12px 0 0; padding-left: 22px; font-size: 14px; }
.grundliste li { break-inside: avoid; margin: 0 0 4px; }
.js .grundliste { display: none; }

/* Website v2: Seite nicht gefunden (25.10.2026) */
.fehler-404 { padding-bottom: 80px; }
.schild-404 { display: inline-block; font-family: var(--d); font-weight: 900; font-size: 120px; line-height: .9; margin: 0 0 12px;
  background: var(--panel); color: var(--hl); padding: 10px 70px 4px 22px;
  clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 50%, calc(100% - 46px) 100%, 0 100%); }
.knopfreihe-404 { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 760px) { .schild-404 { font-size: 80px; padding: 8px 52px 2px 16px; } }

/* Website v2: Schalter Mail-Benachrichtigung in Mein Bereich */
.me-alarm { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px 10px; border-bottom: var(--b3) solid var(--feld-2);
  font-size: 14px; font-weight: 700; cursor: pointer; }
.me-alarm input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--tinte); flex: none; }
.me-alarm small { display: block; font-weight: 600; color: var(--leise); font-size: 12.5px; }

/* Website v2: frueheres Line-up getrennt unter dem Plakat (25.10.2026) */
.frueher { margin-top: 18px; padding: 14px 16px 12px; border: var(--b3) dashed var(--leise); background: transparent; }
.frueher h3 { font-family: var(--d); font-weight: 800; font-size: 22px; text-transform: uppercase; margin: 0 0 4px; }
.frueher p { margin: 0 0 8px; font-size: 13.5px; }
.frueher-namen { display: flex; flex-wrap: wrap; gap: 6px; }
.frueher-namen span { font-size: 13px; font-weight: 700; padding: 3px 8px 2px; border: var(--b2) solid var(--leise); color: var(--tinte-2); }

/* Pfeil-Knoepfe (Ed 25.10.2026: Rahmen nicht durchgezogen): clip-path schneidet bei umrandeten Knoepfen rechten Rand
   und Schraegen weg. Umrandet: voller Rahmen und Pfeil als Zeichen; gefuellt (.voll): Spitze wie bisher. */
.knopf.pfeil:not(.voll) { clip-path: none; border-right: var(--rand) solid var(--tinte); padding-right: 14px; }
.knopf.pfeil:not(.voll)::after { content: "→"; font-weight: 900; margin-left: 2px; }

/* Website v2: gemeinsamer Kompass-Editor als Fenster und eingebettet (25.10.2026) */
.kompass-dialog { padding: 0; border: var(--b4) solid var(--tinte); background: var(--platte); color: var(--tinte); width: min(480px, calc(100vw - 24px));
  max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.kompass-dialog:not([open]) { display: none; }
.kompass-dialog::backdrop { background: rgba(20, 20, 20, .55); }
.kompass-dialog .kompass { position: static; border: 0; overflow-y: auto; flex: 1 1 auto; }
.kd-fuss { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 10px 14px; border-top: var(--b3) solid var(--tinte);
  background: var(--platte); font-size: 12.5px; }
.krit.ke-fokus, .kompass-kopf.ke-fokus { outline: 3px solid var(--rot); outline-offset: -3px; }
.ke-standort { margin-top: 6px; }
.me-kompass { position: static; margin-bottom: 30px; }
.passt-wert .ke-knopf { margin-top: 10px; }
/* Line-up gleich unter dem Kopf (Ed 25.10.2026), Fit-Block danach mit Abstand zum naechsten Abschnitt */
.abschnitt.f-lineup { padding-top: 34px; }
.f-lineup + .rahmen .passt { margin: 36px 0 0; }
@media (max-width: 760px) { .abschnitt.f-lineup { padding-top: 22px; } }
.kopfzeile .ke-knopf { margin-left: auto; }
.kopfzeile .ke-knopf + .reiter { margin-left: 8px; }
@media (max-width: 760px) {
  .kompass-dialog { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; margin: 0; }
  .kopfzeile .ke-knopf { margin-left: 0; }
}

/* Kompass als Wizard im Fenster (Ed 27.10.2026, Mockup W1 «Pfeil-Leiste»): Schritte als Pfeile, Stufen als Karten */
.wz-dialog { width: min(820px, calc(100vw - 24px)); }
.wz-rahmen { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.wz-kopf { flex: none; position: relative; background: var(--panel); color: var(--hl); padding: 14px 60px 12px 20px; }
.wz-kopf h2 { font-family: var(--d); font-weight: 900; font-size: 28px; text-transform: uppercase; line-height: 1; margin: 0 0 10px; }
.wz-zu { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: var(--b4) solid var(--hl); background: transparent; color: var(--hl);
  font-size: 20px; font-weight: 800; line-height: 1; cursor: pointer; }
.wz-pfeile { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.wz-pfeile::-webkit-scrollbar { display: none; }
.wz-pfeile button { flex: none; border: 0; cursor: pointer; font-family: var(--d); font-weight: 800; font-size: 15px; text-transform: uppercase; white-space: nowrap;
  background: var(--p-linie); color: var(--p-text); padding: 7px 22px 5px 17px;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 8px 50%); }
.wz-pfeile button:first-child { padding-left: 12px; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%); }
.wz-pfeile button.fertig { background: var(--p-leise); color: var(--panel); }
.wz-pfeile button.fertig::before { content: "✓ "; }
.wz-pfeile button.jetzt { background: var(--hl); color: var(--panel); }
.wz-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px 20px; }
.wz-nr { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.wz-frage { font-family: var(--d); font-weight: 900; font-size: 36px; text-transform: uppercase; line-height: .95; margin: 2px 0 6px; }
.wz-text { margin: 0 0 14px; font-size: 15px; max-width: 640px; }
.wz-eingabe .heim { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--hl); color: var(--panel); padding: 7px 10px 6px;
  font-weight: 800; font-size: 13.5px; margin-bottom: 12px; }
.wz-eingabe .heim input { width: 100%; height: 34px; margin-top: 2px; border: var(--b2) solid var(--tinte); padding: 0 8px; font: inherit; font-size: 14px;
  background: var(--platte); color: var(--tinte); }
.wz-lab { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 6px; }
.wz-stufen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wz-stufe { border: var(--b4) solid var(--tinte); background: var(--platte); color: var(--tinte); text-align: left; padding: 10px 12px 8px; font: inherit; cursor: pointer; }
.wz-stufe b { display: flex; align-items: center; gap: 7px; font-family: var(--d); font-weight: 900; font-size: 22px; text-transform: uppercase; line-height: 1; }
.wz-stufe b i { width: 14px; height: 14px; border: var(--b4) solid currentColor; border-radius: 50%; flex: none; }
.wz-stufe small { display: block; font-size: 12.5px; line-height: 1.35; margin-top: 5px; color: var(--leise); }
.wz-stufe span { display: block; margin-top: 7px; font-size: 12px; font-weight: 800; }
.wz-stufe.an { background: var(--panel); color: var(--hl); }
.wz-stufe.an small { color: var(--p-text); }
.wz-stufe.an b i { background: currentColor; }
.wz-stufe.an.s-muss { outline: 4px solid var(--rot); outline-offset: -4px; }
.wz-satz { font-size: 19px; line-height: 1.45; margin: 4px 0 14px; }
.wz-zus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wz-zus button { border: var(--b3) solid var(--tinte); background: var(--platte); color: var(--tinte); text-align: left; padding: 8px 10px 6px; font: inherit;
  font-size: 13px; cursor: pointer; min-width: 0; }
.wz-zus em { display: block; font-style: normal; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.wz-zus b { display: block; font-family: var(--d); font-weight: 900; font-size: 19px; text-transform: uppercase; line-height: 1.05; }
.wz-zus span { display: block; overflow-wrap: anywhere; }
.wz-zus .s-muss { border: 3px solid var(--rot); }
.wz-zus .s-egal { border-style: dashed; color: var(--leise); }
.wz-fuss { flex: none; background: var(--platte-2); font-size: 14px; }
.wz-live { margin-right: auto; font-weight: 700; }
.wz-live b { font-family: var(--d); font-size: 26px; vertical-align: -2px; }
@media (max-width: 760px) {
  .wz-dialog { width: 100vw; }
  .wz-kopf { padding: 12px 56px 10px 14px; }
  .wz-kopf h2 { font-size: 24px; }
  .wz-inhalt { padding: 14px; }
  .wz-frage { font-size: 28px; }
  .wz-stufen { grid-template-columns: 1fr; }
  .wz-zus { grid-template-columns: 1fr 1fr; }
  .wz-fuss { padding: 10px 12px; }
  .wz-live { font-size: 12.5px; }
  .wz-eingabe input[type=text] { font-size: 16px; }  /* unter 16 px zoomt iOS beim Antippen */
}

/* Festivalseite, «Reise planen»: Spaltenklassen s3-s7 aus dem 12er-Raster gelten im auto-fit-Raster nicht (sie erzeugten
   zusaetzliche Spalten und seitlichen Ueberlauf, gemessen 1'632 px bei 1'440 px Fensterbreite) */
.info-gitter.f-info > .info { grid-column: auto; min-width: 0; }
.info-gitter.f-info > .kartenbox { grid-column: span 2; }
@media (max-width: 760px) { .info-gitter.f-info > .kartenbox { grid-column: auto; } }

/* Festivalseite: lange Etiketten (z. B. Besucherzahl mit Erklaerung) umbrechen statt seitlich ueberlaufen */
.f-marken .marke-q { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }

/* Standard = Wegweiser v2 (Gelb): Bloecke in Tintenfarbe, Schrift darauf in Feldfarbe – wie stil.css */
:root {
  --tinte-rgb: 20, 20, 20; --hell: #FFF1A6; --panel: var(--tinte); --hl: var(--feld);
  --p-text: #f6efd0; --p-leise: #cfc59b; --p-linie: #3a3820; --p-stark: #fff;
}

/* Blau 1 · Himmel */
:root[data-farbe="blau-himmel"] {
  --feld: #4DB2FF; --feld-2: #40A6F7; --feld-3: #3399EE;
  --tinte: #141414; --tinte-rgb: 20, 20, 20; --leise: rgba(20, 20, 20, .70);
  --platte-2: #EAF6FF; --hell: #FFF1A6; --rot: #E3241B; --stopp: #FFD21A;
  --panel: #141414; --hl: #FFD21A; --p-text: #f6efd0; --p-leise: #cfc59b;
  --p-linie: #3a3820; --p-stark: #fff;
  --meer: #151515; --land: #2d2c29; --grenze: #4a4842;
}

/* Blau 2 · Kornblume */
:root[data-farbe="blau-kornblume"] {
  --feld: #86A5FF; --feld-2: #7A99FA; --feld-3: #6D8CF2;
  --tinte: #121A3A; --tinte-rgb: 18, 26, 58; --leise: rgba(18, 26, 58, .70);
  --platte-2: #EFF3FF; --hell: #FFF1A6; --rot: #E3241B; --stopp: #FFD84D;
  --panel: #121A3A; --hl: #FFD84D; --p-text: #EAF0FF; --p-leise: #A9B6D6;
  --p-linie: #2A3A66; --p-stark: #fff;
  --meer: #0E1A36; --land: #1E2D52; --grenze: #33466F;
}

/* Blau 3 · Lagune */
:root[data-farbe="blau-lagune"] {
  --feld: #3FCADB; --feld-2: #33BDCF; --feld-3: #27AFC2;
  --tinte: #0E2630; --tinte-rgb: 14, 38, 48; --leise: rgba(14, 38, 48, .70);
  --platte-2: #E4F9FB; --hell: #FFF1A6; --rot: #E3241B; --stopp: #FFD21A;
  --panel: #0E2630; --hl: #FFD21A; --p-text: #E6F6F8; --p-leise: #9DBFC6;
  --p-linie: #24414C; --p-stark: #fff;
  --meer: #0B1E26; --land: #1A333D; --grenze: #2C4A55;
}

/* Gelb 3 · Gold mit Königsblau */
:root[data-farbe="gelb-gold"] {
  --feld: #FFBE1A; --feld-2: #F5B100; --feld-3: #E8A300;
  --tinte: #141414; --tinte-rgb: 20, 20, 20; --leise: rgba(20, 20, 20, .70);
  --platte-2: #FFF3D4; --hell: #FFE7AD; --rot: #2F6BFF; --stopp: #FFBE1A;
  --panel: #1B3FA0; --hl: #FFBE1A; --p-text: #EEF2FF; --p-leise: #B9C6EE;
  --p-linie: #2F55B8; --p-stark: #fff;
  --meer: #151515; --land: #2d2c29; --grenze: #4a4842;
}

/* Neu 1 · Zweiklang */
:root[data-farbe="neu-zweiklang"] {
  --feld: #5BB8FF; --feld-2: #4EACF7; --feld-3: #41A0EE;
  --tinte: #141414; --tinte-rgb: 20, 20, 20; --leise: rgba(20, 20, 20, .70);
  --platte-2: #EAF6FF; --hell: #FFF1A6; --rot: #E3241B; --stopp: #FFD21A;
  --panel: #FFD21A; --hl: #141414; --p-text: #2A2400; --p-leise: #5C4F00;
  --p-linie: #E3B800; --p-stark: #141414;
  --meer: #151515; --land: #2d2c29; --grenze: #4a4842;
}

/* Dunkelmodus je Farbfassung (25.10.2026): dunkles Feld im Farbton der Fassung, Bloecke in ihrer Signalfarbe mit dunkler
   Schrift (Wegweiser bei Nacht). Erzeugt mit dunkel_bauen.py; Werte nur hier aendern. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-farbe]) {
    --feld: #17160F; --feld-2: #201E15; --feld-3: #2A271B; --tinte: #F4EDD0; --tinte-rgb: 244, 237, 208;
    --tinte-2: rgba(244, 237, 208, .82); --leise: rgba(244, 237, 208, .68); --platte: #232117; --platte-2: #2C291C;
    --panel: #FFD21A; --hl: #141414; --p-text: #2A2400; --p-leise: #5C4F00; --p-linie: #E3B800;
    --p-stark: #141414; --hell: #4A4320; --rot: #FF5A4E; --stopp: #FFD21A;
    --meer: #0d0d0b; --land: #2a2922; --grenze: #4a4842; color-scheme: dark;
  }
}
:root[data-theme="dark"]:not([data-farbe]) {
  --feld: #17160F; --feld-2: #201E15; --feld-3: #2A271B; --tinte: #F4EDD0; --tinte-rgb: 244, 237, 208;
  --tinte-2: rgba(244, 237, 208, .82); --leise: rgba(244, 237, 208, .68); --platte: #232117; --platte-2: #2C291C;
  --panel: #FFD21A; --hl: #141414; --p-text: #2A2400; --p-leise: #5C4F00; --p-linie: #E3B800;
  --p-stark: #141414; --hell: #4A4320; --rot: #FF5A4E; --stopp: #FFD21A;
  --meer: #0d0d0b; --land: #2a2922; --grenze: #4a4842; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-farbe="blau-himmel"] {
    --feld: #0E1A24; --feld-2: #13222F; --feld-3: #192B3A; --tinte: #E8F3FC; --tinte-rgb: 232, 243, 252;
    --tinte-2: rgba(232, 243, 252, .82); --leise: rgba(232, 243, 252, .68); --platte: #15232F; --platte-2: #1B2C3A;
    --panel: #4DB2FF; --hl: #0A1620; --p-text: #08243A; --p-leise: #1F4A6B; --p-linie: #2E8FD6;
    --p-stark: #06121C; --hell: #1F3B52; --rot: #FF5A4E; --stopp: #FFD21A;
    --meer: #0d0d0b; --land: #2a2922; --grenze: #4a4842; color-scheme: dark;
  }
}
:root[data-theme="dark"][data-farbe="blau-himmel"] {
  --feld: #0E1A24; --feld-2: #13222F; --feld-3: #192B3A; --tinte: #E8F3FC; --tinte-rgb: 232, 243, 252;
  --tinte-2: rgba(232, 243, 252, .82); --leise: rgba(232, 243, 252, .68); --platte: #15232F; --platte-2: #1B2C3A;
  --panel: #4DB2FF; --hl: #0A1620; --p-text: #08243A; --p-leise: #1F4A6B; --p-linie: #2E8FD6;
  --p-stark: #06121C; --hell: #1F3B52; --rot: #FF5A4E; --stopp: #FFD21A;
  --meer: #0d0d0b; --land: #2a2922; --grenze: #4a4842; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-farbe="blau-kornblume"] {
    --feld: #11152A; --feld-2: #161B34; --feld-3: #1C223F; --tinte: #E7ECFF; --tinte-rgb: 231, 236, 255;
    --tinte-2: rgba(231, 236, 255, .82); --leise: rgba(231, 236, 255, .68); --platte: #181E38; --platte-2: #1F2645;
    --panel: #86A5FF; --hl: #0E1430; --p-text: #121A3A; --p-leise: #33467A; --p-linie: #6D8CF2;
    --p-stark: #0A0F24; --hell: #2A3566; --rot: #FF5A4E; --stopp: #FFD84D;
    --meer: #0d0d0b; --land: #2a2922; --grenze: #4a4842; color-scheme: dark;
  }
}
:root[data-theme="dark"][data-farbe="blau-kornblume"] {
  --feld: #11152A; --feld-2: #161B34; --feld-3: #1C223F; --tinte: #E7ECFF; --tinte-rgb: 231, 236, 255;
  --tinte-2: rgba(231, 236, 255, .82); --leise: rgba(231, 236, 255, .68); --platte: #181E38; --platte-2: #1F2645;
  --panel: #86A5FF; --hl: #0E1430; --p-text: #121A3A; --p-leise: #33467A; --p-linie: #6D8CF2;
  --p-stark: #0A0F24; --hell: #2A3566; --rot: #FF5A4E; --stopp: #FFD84D;
  --meer: #0d0d0b; --land: #2a2922; --grenze: #4a4842; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-farbe="blau-lagune"] {
    --feld: #0B1B21; --feld-2: #10242B; --feld-3: #152D35; --tinte: #E2F6F8; --tinte-rgb: 226, 246, 248;
    --tinte-2: rgba(226, 246, 248, .82); --leise: rgba(226, 246, 248, .68); --platte: #12252C; --platte-2: #183039;
    --panel: #3FCADB; --hl: #072027; --p-text: #062A31; --p-leise: #1D5560; --p-linie: #27AFC2;
    --p-stark: #041519; --hell: #1C4650; --rot: #FF5A4E; --stopp: #FFD21A;
    --meer: #0d0d0b; --land: #2a2922; --grenze: #4a4842; color-scheme: dark;
  }
}
:root[data-theme="dark"][data-farbe="blau-lagune"] {
  --feld: #0B1B21; --feld-2: #10242B; --feld-3: #152D35; --tinte: #E2F6F8; --tinte-rgb: 226, 246, 248;
  --tinte-2: rgba(226, 246, 248, .82); --leise: rgba(226, 246, 248, .68); --platte: #12252C; --platte-2: #183039;
  --panel: #3FCADB; --hl: #072027; --p-text: #062A31; --p-leise: #1D5560; --p-linie: #27AFC2;
  --p-stark: #041519; --hell: #1C4650; --rot: #FF5A4E; --stopp: #FFD21A;
  --meer: #0d0d0b; --land: #2a2922; --grenze: #4a4842; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-farbe="gelb-gold"] {
    --feld: #18140A; --feld-2: #211C0F; --feld-3: #2A2414; --tinte: #F6EEDA; --tinte-rgb: 246, 238, 218;
    --tinte-2: rgba(246, 238, 218, .82); --leise: rgba(246, 238, 218, .68); --platte: #221D11; --platte-2: #2B2516;
    --panel: #FFBE1A; --hl: #13245C; --p-text: #1B2A5E; --p-leise: #5A4A10; --p-linie: #E8A300;
    --p-stark: #0E1A45; --hell: #3D3415; --rot: #6E95FF; --stopp: #FFBE1A;
    --meer: #0d0d0b; --land: #2a2922; --grenze: #4a4842; color-scheme: dark;
  }
}
:root[data-theme="dark"][data-farbe="gelb-gold"] {
  --feld: #18140A; --feld-2: #211C0F; --feld-3: #2A2414; --tinte: #F6EEDA; --tinte-rgb: 246, 238, 218;
  --tinte-2: rgba(246, 238, 218, .82); --leise: rgba(246, 238, 218, .68); --platte: #221D11; --platte-2: #2B2516;
  --panel: #FFBE1A; --hl: #13245C; --p-text: #1B2A5E; --p-leise: #5A4A10; --p-linie: #E8A300;
  --p-stark: #0E1A45; --hell: #3D3415; --rot: #6E95FF; --stopp: #FFBE1A;
  --meer: #0d0d0b; --land: #2a2922; --grenze: #4a4842; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-farbe="neu-zweiklang"] {
    --feld: #0E1A24; --feld-2: #13222F; --feld-3: #192B3A; --tinte: #E8F3FC; --tinte-rgb: 232, 243, 252;
    --tinte-2: rgba(232, 243, 252, .82); --leise: rgba(232, 243, 252, .68); --platte: #15232F; --platte-2: #1B2C3A;
    --panel: #FFD21A; --hl: #141414; --p-text: #2A2400; --p-leise: #5C4F00; --p-linie: #E3B800;
    --p-stark: #141414; --hell: #3A3518; --rot: #FF5A4E; --stopp: #FFD21A;
    --meer: #0d0d0b; --land: #2a2922; --grenze: #4a4842; color-scheme: dark;
  }
}
:root[data-theme="dark"][data-farbe="neu-zweiklang"] {
  --feld: #0E1A24; --feld-2: #13222F; --feld-3: #192B3A; --tinte: #E8F3FC; --tinte-rgb: 232, 243, 252;
  --tinte-2: rgba(232, 243, 252, .82); --leise: rgba(232, 243, 252, .68); --platte: #15232F; --platte-2: #1B2C3A;
  --panel: #FFD21A; --hl: #141414; --p-text: #2A2400; --p-leise: #5C4F00; --p-linie: #E3B800;
  --p-stark: #141414; --hell: #3A3518; --rot: #FF5A4E; --stopp: #FFD21A;
  --meer: #0d0d0b; --land: #2a2922; --grenze: #4a4842; color-scheme: dark;
}
.kopf-k .credit, .foto-credit, .mosaik .credit { background: rgba(20, 20, 20, .78); }
/* Logo: Pfeil je Fassung (hell), Schrift in Tintenfarbe; im Fuss einfarbig in der Schriftfarbe der Bloecke */
:root:not([data-farbe]) { --lg-a1: #E39B00; --lg-a2: #B86E00; --lg-b1: #8A4F00; --lg-b2: #4F2C00; --lg-c1: #F0B000; --lg-c2: #C98500; --lg-schrift: var(--tinte); }
:root[data-farbe="blau-himmel"] { --lg-a1: #1E7FD0; --lg-a2: #0F5596; --lg-b1: #0E4A85; --lg-b2: #062A4D; --lg-c1: #2F95E8; --lg-c2: #1466B0; --lg-schrift: var(--tinte); }
:root[data-farbe="blau-kornblume"] { --lg-a1: #4F6FE0; --lg-a2: #2E47A8; --lg-b1: #26388A; --lg-b2: #121A3A; --lg-c1: #6585F0; --lg-c2: #3A55C2; --lg-schrift: var(--tinte); }
:root[data-farbe="blau-lagune"] { --lg-a1: #149AAE; --lg-a2: #0B6878; --lg-b1: #0B5260; --lg-b2: #0E2630; --lg-c1: #1FB0C2; --lg-c2: #0E7F8E; --lg-schrift: var(--tinte); }
:root[data-farbe="gelb-gold"] { --lg-a1: #D98E00; --lg-a2: #A86400; --lg-b1: #2F55B8; --lg-b2: #1B3FA0; --lg-c1: #E8A300; --lg-c2: #B97A00; --lg-schrift: var(--tinte); }
:root[data-farbe="neu-zweiklang"] { --lg-a1: #FFE15C; --lg-a2: #F5B800; --lg-b1: #1E7FD0; --lg-b2: #0F5596; --lg-c1: #FFD21A; --lg-c2: #E0A800; --lg-schrift: var(--tinte); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-farbe]) { --lg-a1: #FFE36B; --lg-a2: #FFD21A; --lg-b1: #FFC21A; --lg-b2: #D99A00; --lg-c1: #FFEA8A; --lg-c2: #F5BE00; --lg-schrift: var(--tinte); } }
:root[data-theme="dark"]:not([data-farbe]) { --lg-a1: #FFE36B; --lg-a2: #FFD21A; --lg-b1: #FFC21A; --lg-b2: #D99A00; --lg-c1: #FFEA8A; --lg-c2: #F5BE00; --lg-schrift: var(--tinte); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-farbe="blau-himmel"] { --lg-a1: #8FD0FF; --lg-a2: #4DB2FF; --lg-b1: #4DB2FF; --lg-b2: #1F7FD0; --lg-c1: #B5E0FF; --lg-c2: #6CC0FF; --lg-schrift: var(--tinte); } }
:root[data-theme="dark"][data-farbe="blau-himmel"] { --lg-a1: #8FD0FF; --lg-a2: #4DB2FF; --lg-b1: #4DB2FF; --lg-b2: #1F7FD0; --lg-c1: #B5E0FF; --lg-c2: #6CC0FF; --lg-schrift: var(--tinte); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-farbe="blau-kornblume"] { --lg-a1: #B8C9FF; --lg-a2: #86A5FF; --lg-b1: #86A5FF; --lg-b2: #5272E6; --lg-c1: #D2DCFF; --lg-c2: #9DB5FF; --lg-schrift: var(--tinte); } }
:root[data-theme="dark"][data-farbe="blau-kornblume"] { --lg-a1: #B8C9FF; --lg-a2: #86A5FF; --lg-b1: #86A5FF; --lg-b2: #5272E6; --lg-c1: #D2DCFF; --lg-c2: #9DB5FF; --lg-schrift: var(--tinte); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-farbe="blau-lagune"] { --lg-a1: #8FE6EF; --lg-a2: #3FCADB; --lg-b1: #3FCADB; --lg-b2: #1A9AAD; --lg-c1: #B5F0F5; --lg-c2: #5CD6E4; --lg-schrift: var(--tinte); } }
:root[data-theme="dark"][data-farbe="blau-lagune"] { --lg-a1: #8FE6EF; --lg-a2: #3FCADB; --lg-b1: #3FCADB; --lg-b2: #1A9AAD; --lg-c1: #B5F0F5; --lg-c2: #5CD6E4; --lg-schrift: var(--tinte); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-farbe="gelb-gold"] { --lg-a1: #FFD66B; --lg-a2: #FFBE1A; --lg-b1: #6E95FF; --lg-b2: #2F6BFF; --lg-c1: #FFE39A; --lg-c2: #F5B100; --lg-schrift: var(--tinte); } }
:root[data-theme="dark"][data-farbe="gelb-gold"] { --lg-a1: #FFD66B; --lg-a2: #FFBE1A; --lg-b1: #6E95FF; --lg-b2: #2F6BFF; --lg-c1: #FFE39A; --lg-c2: #F5B100; --lg-schrift: var(--tinte); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-farbe="neu-zweiklang"] { --lg-a1: #FFE36B; --lg-a2: #FFD21A; --lg-b1: #8FD0FF; --lg-b2: #4DB2FF; --lg-c1: #FFEA8A; --lg-c2: #F5BE00; --lg-schrift: var(--tinte); } }
:root[data-theme="dark"][data-farbe="neu-zweiklang"] { --lg-a1: #FFE36B; --lg-a2: #FFD21A; --lg-b1: #8FD0FF; --lg-b2: #4DB2FF; --lg-c1: #FFEA8A; --lg-c2: #F5BE00; --lg-schrift: var(--tinte); }
.fuss .logo { --lg-a1: var(--hl); --lg-a2: var(--hl); --lg-b1: var(--hl); --lg-b2: var(--hl); --lg-c1: var(--hl); --lg-c2: var(--hl);
  --lg-ao1: .7; --lg-bo1: .45; --lg-bo2: .8; --lg-co1: .6; --lg-co2: .95; --lg-schrift: var(--hl); }
.marke .logo { height: 30px; width: auto; display: block; }
/* Festorado (10.11.2026): Symbol mit eigenen Farben, etwas hoeher als die alte Wortmarke, damit das Publikum lesbar bleibt */
.marke .logo[aria-label="Festorado"] { height: 36px; }
.fuss .logo { height: 28px; width: auto; display: block; margin-bottom: 14px; }
@media (max-width: 760px) { .marke .logo { height: 24px; } .marke .logo[aria-label="Festorado"] { height: 28px; } }