/*
 * Marke: Tourismusverband Oberlausitz e. V., nach dem Corporate Design Handbuch TVO 1.1 (Oktober 2026),
 * Quelle vsc_projects/tvo-corporate-design. Werkzeug des Verbands, darum die Absendermarke »tvo.« oben rechts.
 *   Text #1A1A1A, Überschriften und Auszeichnung Dunkelblau #0056A3, Verbandsgrau #706D6E nur für Hilfstexte,
 *   Hellblau #EAF1F8 als Grund, Farbspektrum nur als schmale Akzentfläche ohne Schrift, keine Leitthemen-Streifen.
 *   Schrift: Calibri, sonst Carlito (OFL, als Webschrift ausgeliefert). Bree nie.
 */
@font-face { font-family: 'Carlito'; font-style: normal; font-weight: 400; font-display: swap; src: url('/web-schrift/carlito-regular.woff2') format('woff2'); }
@font-face { font-family: 'Carlito'; font-style: normal; font-weight: 700; font-display: swap; src: url('/web-schrift/carlito-bold.woff2') format('woff2'); }

:root {
  --rot: #0056A3;
  --rot-dunkel: #00427D;
  --rot-hell: #EAF1F8;
  --auf-marke: #FFFFFF;
  --text: #1A1A1A;
  --leise: #5F5C5D;
  --gedaempft: #706D6E;
  --flaeche: #F4F6F9;
  --flaeche-2: #F9FAFC;
  --linie: #D9DDE3;
  --blau: #0056A3;
  --blau-hell: #EAF1F8;
  --radius: 8px;
  --kopf: 64px;
  --schatten: 0 1px 2px rgba(16, 37, 66, .06), 0 2px 10px rgba(16, 37, 66, .06);
  --schatten-hoch: 0 10px 34px rgba(16, 37, 66, .18);
  --schrift: Calibri, Carlito, 'Segoe UI', Arial, sans-serif;
  --marke: Calibri, Carlito, 'Segoe UI', Arial, sans-serif;
  --tvo-spektrum: linear-gradient(90deg, #F39346 0%, #F6A220 20%, #DBAF04 40%, #A7AC18 50%, #53A330 60%, #1B9156 70%, #017B7C 80%, #006499 90%, #0056A3 100%);
  --tvo-rot: #CB3811;
}

body { font-size: 16.5px; letter-spacing: .005em; }
h1, h2, h3, h4 { color: var(--rot); font-weight: 700; letter-spacing: -.005em; }
h1 { font-size: 32px; }
.karte h2, .karte h3 { color: var(--rot); }

/* Kopf: weiß, Spektrum als Akzentfläche an der Unterkante, Absendermarke »tvo.« oben rechts (eigene Medien) */
.kopfleiste { background: #fff; color: var(--text); border-bottom: 1px solid var(--linie); }
.kopfleiste::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--tvo-spektrum); }
.kopfleiste .logo { height: 34px; }
.kopfleiste > a:has(.logo) { order: 99; margin-left: 8px; }
.kopfleiste .titel { order: 1; color: var(--rot); font-weight: 700; font-size: 17px; border-left: 0; padding-left: 0; opacity: 1; }
.kopfleiste .titel small { color: var(--gedaempft); font-weight: 400; opacity: 1; }
.kopfleiste .raum { order: 2; }
.kopfleiste .nutzer { order: 3; }
.kopfleiste .k { color: var(--rot); border-color: transparent; }
.kopfleiste .k:hover { background: var(--rot-hell); }
.nutzer .rolle { background: var(--rot-hell); color: var(--rot); font-weight: 700; }

/* Navigation: aktive Seite mit dunkelblauer Kante wie der hervorgehobene Kasten */
.nav-punkt.aktiv { background: var(--rot-hell); color: var(--rot); font-weight: 700; }
.nav-gruppe { color: var(--gedaempft); font-weight: 700; }
.seitenleiste .fuss { color: var(--gedaempft); }

/* Knöpfe und Fokus */
.k { font-family: var(--schrift); font-size: 15.5px; }
.k-haupt { background: var(--rot); border-color: var(--rot); }
.k-ki { background: #10253F; border-color: #10253F; }
.k-ki .icon { color: #F6A220; }
.k:focus-visible, .eingabe:focus-visible, .nav-punkt:focus-visible, a:focus-visible, .vw-stunde:focus-visible { outline: 3px solid rgba(0, 86, 163, .35); }
.k.nimmt-auf { background: var(--tvo-rot); }
@keyframes puls { 50% { box-shadow: 0 0 0 6px rgba(203, 56, 17, .18); } }
.k-gefahr { color: var(--tvo-rot); border-color: #EBB9A8; }
.k-gefahr:hover { background: #FBEDE8; border-color: var(--tvo-rot); }

/* Karten: hervorgehobener Kasten nach Handbuch (weiß, graue Kontur, linke Kante Dunkelblau) */
.karte { border: 1px solid #E6E9EE; box-shadow: var(--schatten); }
.karte.balken::before { width: 4px; background: var(--rot); }

/* Anmeldung: weiße Bühne mit Weißraum, Spektrum als Akzentfläche unter dem Titel */
.anmeldung .buehne { background: #fff; color: var(--text); border-right: 1px solid var(--linie); position: relative; }
.anmeldung .buehne::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--tvo-spektrum); }
.anmeldung .buehne img { width: 150px; align-self: flex-end; }
.anmeldung .buehne h1 { color: var(--rot); font-size: 44px; }
.anmeldung .buehne h1::after { content: ''; display: block; width: 220px; height: 5px; margin-top: 18px; background: var(--tvo-spektrum); }
.anmeldung .buehne p { color: var(--text); opacity: 1; }
.anmeldung .buehne p.klein { color: var(--gedaempft); }
.anmeldung .demo-band { background: var(--rot-hell); color: var(--rot); font-weight: 700; }
.anmeldung .formular { background: var(--flaeche); }
.anmeldung form h2 { color: var(--rot); }

@media (max-width: 900px) {
  .anmeldung .buehne { border-right: 0; }
  .anmeldung .buehne h1 { font-size: 32px; }
  .anmeldung .buehne img { width: 110px; }
  .kopfleiste .logo { height: 28px; }
}

/* ---------- Rollen (TVO, 13.11.2026) ---------- */
body[data-rolle="gast"] .inhalt::before { content: 'Sie sind als Gast angemeldet: Sie können alles lesen, aber nichts ändern.'; display: block; margin: 0 0 16px; padding: 10px 14px; background: var(--rot-hell); border-left: 4px solid var(--rot); border-radius: var(--radius); font-size: 14px; }
body[data-rolle="gast"] .inhalt .k-ki, body[data-rolle="gast"] .inhalt .k-gefahr { display: none; }