/* Andrang Design-System — gemeinsame Basis aller Seiten */ :root{ --bg:#0d1730; --bg-raised:#101d38; --bg-input:#0a1226; --border:#26355c; --text:#ffffff; --text-dim:#9fb3e8; --text-faint:#8093c4; /* >=4.5:1 auf --bg und --bg-raised (WCAG AA) */ --primary:#1f7a33; /* weiß darauf 5.4:1 (WCAG AA; #2e9e44 lag bei 3.45:1) */ --primary-hover:#23863a; /* weiß darauf 4.6:1 */ --secondary:#2e2560; --secondary-hover:#3a2f78; --danger:#7a2b24; --danger-hover:#93362d; --neutral:#3a4763; /* neutrales Grau-Blau: Schließen/Verwerfen (nicht die Marken-Aktion) */ --neutral-hover:#495a7d; --accent:#f2c12e; --on-accent:#101d38; /* Textfarbe AUF dem Akzent (aktive Buttons/Chips) */ /* Karten-Farben (MapLibre + Marker) — V-75: zentral, damit ein Schema-Wechsel auch die Karte mitnimmt. glmap.js liest genau diese Variablen. */ --map-bg:#0e1a34; /* Wasser / Karten-Hintergrund */ --map-land:#1a2947; /* Landfläche */ --map-country:#f2c12e; /* Ländergrenzen */ --map-region:#33456e; /* Regionsgrenzen */ --map-road-0:#7a8fc2; --map-road-1:#6d81b4; --map-road-2:#4d5f8f; --map-road-3:#44557f; --map-rail:#6cc9bf; /* Fernbahn/Fähre */ --map-rail-dim:#4fa89e; /* Nahverkehr */ --map-marker-festival:#f2c12e; --map-marker-concert:#9d6ee0; --map-marker-past:#5f719c; --map-marker-stroke:#0e1a34; /* Pin-Rand */ --map-label:#ffffff; /* Pin-Beschriftung */ --map-label-shadow:#0e1a34; --radius:8px; --radius-sm:5px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --shadow:0 8px 24px rgba(0,0,0,.45); } /* ── Farbschemen (V-75/V-77) ─────────────────────────────────────────────── „night" ist das Standard-:root oben und bleibt UNANGETASTET (Andrang-Original). Umschalten global über (core.js: Andrang.setScheme). Kontraste nach WCAG AA geprüft (Fließtext ≥4.5:1, UI/ Grafik ≥3:1 — Basis von Apple HIG / Material). Im Editor /theme.html anpassbar. */ :root[data-scheme="day"]{ /* Strand — weiß/gelb/blau, hell */ --bg:#e9f6ff; --bg-raised:#ffffff; --bg-input:#ffffff; --border:#bcd8ea; --text:#0b2b40; --text-dim:#38637e; --text-faint:#4a6f88; /* >=4.5:1 auf #fff und --bg (WCAG AA) */ --primary:#1f7a33; --primary-hover:#23863a; --secondary:#dcecf7; --secondary-hover:#cbe3f2; --danger:#b23b30; --danger-hover:#c9483b; --neutral:#c6d9e6; --neutral-hover:#b1cadc; --accent:#a87400; /* Sonnen-Amber, 3.7:1 auf hellem BG (AA) */ --on-accent:#ffffff; /* heller Text auf dem dunklen Amber-Akzent (4.1:1) */ --shadow:0 8px 24px rgba(30,80,120,.18); --map-bg:#8fd3ea; /* Wasser hellblau */ --map-land:#f5edd4; /* Sand */ --map-country:#e0a72c; --map-region:#cfe3d9; --map-road-0:#8a97a3; --map-road-1:#9fabb5; --map-road-2:#b4bec6; --map-road-3:#c3ccd2; --map-rail:#51b181; --map-rail-dim:#51b181; --map-marker-festival:#f2a900; --map-marker-concert:#2f79c9; --map-marker-past:#9ab0c2; --map-marker-stroke:#ffffff; --map-label:#0b2b40; --map-label-shadow:#ffffff; } :root[data-scheme="dusk"]{ /* Dämmerung — kühles Twilight-Slate + warmer Sonnen-Akzent */ --bg:#2b3140; --bg-raised:#353c4d; --bg-input:#232834; --border:#49526a; --text:#f5f7fb; --text-dim:#c4cddb; /* 6.9:1 auf --bg-raised (AA) */ --text-faint:#a0abbe; /* 4.8:1 auf --bg-raised (AA) */ --primary:#1f7a33; --primary-hover:#23863a; --secondary:#3a4258; --secondary-hover:#47506a; --danger:#b23b30; --danger-hover:#c9483b; --neutral:#414a5e; --neutral-hover:#505b72; --accent:#ff9e64; /* warmer Sonnenuntergang-Akzent, 6.4:1 auf --bg (AA) */ --on-accent:#101d38; /* dunkler Text auf dem hellen Korall-Akzent (8.2:1) */ --shadow:0 8px 24px rgba(0,0,0,.45); --map-bg:#2f3a4e; --map-land:#3c4356; --map-country:#ff9e64; --map-region:#4e576e; --map-road-0:#8f9db0; --map-road-1:#7d8ba0; --map-road-2:#66748a; --map-road-3:#59667c; --map-rail:#8fd0c8; --map-rail-dim:#6fb0a8; --map-marker-festival:#ffb454; --map-marker-concert:#8ea2ff; --map-marker-past:#7f8ba0; --map-marker-stroke:#2b3140; --map-label:#ffffff; --map-label-shadow:#2b3140; } :root[data-scheme="oled"]{ /* OLED — true black, hoher Kontrast (spart Strom, kein Halo) */ --bg:#000000; --bg-raised:#000000; /* full black: Karten/Flächen via --border abgegrenzt */ --bg-input:#000000; --border:#2c2c30; --text:#f2f2f4; /* leicht gebrochenes Weiß (weniger Halation) */ --text-dim:#b3b3b8; /* 9:1 auf --bg-raised (AA) */ --text-faint:#8f8f96; /* 5.9:1 auf --bg-raised (AA) */ --primary:#1f7a33; --primary-hover:#23863a; --secondary:#1a1a1e; --secondary-hover:#232329; --danger:#b23b30; --danger-hover:#c9483b; --neutral:#262629; --neutral-hover:#33333a; --accent:#f2c12e; /* Marken-Gelb, 12.4:1 auf Schwarz (AAA) */ --on-accent:#101d38; /* dunkler Text auf dem gelben Akzent (9.9:1) */ --shadow:0 8px 24px rgba(0,0,0,.7); --map-bg:#3a3a3a; /* Wasser: dunkles Grau, hebt sich vom schwarzen Land ab */ --map-land:#000000; /* Land/Basis full black */ --map-country:#f2c12e; --map-region:#2a2a30; --map-road-0:#3a3a42; --map-road-1:#303038; --map-road-2:#262630; --map-road-3:#20202a; --map-rail:#37c0b6; --map-rail-dim:#2a8f88; --map-marker-festival:#f2c12e; --map-marker-concert:#b98cff; --map-marker-past:#6a6a72; --map-marker-stroke:#000000; --map-label:#ffffff; --map-label-shadow:#000000; } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} /* Das hidden-Attribut MUSS verstecken – sonst überschreibt jede display:flex/grid-Regel die UA-Voreinstellung (display:none) und das Element bleibt sichtbar. Häufige Falle. */ [hidden]{display:none!important} body{background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif; line-height:1.45;padding:var(--space-3) var(--space-2) 40px} /* Neon-Glow (gelb, --accent) für Logos: Andrang-A, Festival-Logos, später Band-Logos. drop-shadow folgt dem Alphakanal – transparente PNGs/SVGs leuchten in Kontur. */ .neon{filter:drop-shadow(0 0 5px rgba(242,193,46,.85)) drop-shadow(0 0 16px rgba(242,193,46,.45)) drop-shadow(0 0 40px rgba(242,193,46,.22))} /* Karten & Layout */ .card{background:var(--bg-raised);border:1px solid var(--border); border-radius:var(--radius);padding:var(--space-6);box-shadow:var(--shadow)} .wrap-narrow{max-width:420px;margin:8vh auto 0} .wrap{max-width:820px;margin:0 auto} /* Buttons: mind. 44px Tap-Ziel */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px; min-height:44px;padding:10px 20px;border:none;border-radius:var(--radius-sm); font-size:14px;font-weight:700;font-family:inherit;cursor:pointer; color:var(--text);background:var(--secondary);text-decoration:none} .btn:hover{background:var(--secondary-hover)} .btn-primary{background:var(--primary)} .btn-primary:hover{background:var(--primary-hover)} .btn-danger{background:var(--danger)} .btn-danger:hover{background:var(--danger-hover)} /* Warn-Stufe zwischen neutral und danger (z.B. „Absagen" neben „Abbrechen") */ .btn-warn{background:#7a5a14} .btn-warn:hover{background:#94701c} .btn:disabled{opacity:.5;cursor:not-allowed} .btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible, button:focus-visible,textarea:focus-visible{ outline:2px solid var(--accent);outline-offset:2px} /* Formulare: Labels, Inline-Fehler */ .field{margin-bottom:var(--space-4)} .field label{display:block;font-size:13px;font-weight:700;color:var(--text-dim); margin-bottom:var(--space-1)} .field input,.field select{width:100%;min-height:44px;padding:10px 12px; font-size:16px;font-family:inherit;color:var(--text); background:var(--bg-input);border:1px solid var(--border); border-radius:var(--radius-sm)} .field input::placeholder{color:var(--text-faint)} .field .err{display:none;color:#ff9d94;font-size:12.5px;margin-top:var(--space-1)} .field.invalid input{border-color:var(--danger-hover)} .field.invalid .err{display:block} /* ============================================================================ Komponenten – gemeinsamer Vorrat. NICHT pro Seite neu erfinden: Wer ein Auswahl-Menü, ein Popover, ein Modal oder Toggle-Chips braucht, nimmt DIESE Klassen. So bleibt die Bedienung überall gleich und modern. ============================================================================ */ /* .chip-toggle — Segmented/Umschalt-Chip (an/aus), z.B. Typ- oder Genre-Filter. (Name bewusst nicht ".chip": das ist auf einzelnen Seiten anders belegt.) */ .chip-toggle{min-height:36px;padding:6px 14px;border-radius:18px;border:1px solid var(--border); background:var(--bg-raised);color:var(--text-dim);font-size:13px;font-weight:700; font-family:inherit;cursor:pointer} .chip-toggle:hover{border-color:var(--accent)} .chip-toggle[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} /* .pickbtn — Button, der ein Popover/Menü öffnet (sieht aus wie ein Select). */ .pickbtn{min-height:44px;padding:8px 12px;border-radius:var(--radius-sm); border:1px solid var(--border);background:var(--bg-input);color:var(--text); font-size:14px;font-family:inherit;cursor:pointer;text-align:left;white-space:nowrap} .pickbtn:hover{border-color:var(--accent)} .pickbtn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} /* .popover — leichtes Aufklapp-Panel (Kalender, Mehrfachauswahl …). */ .popover{max-width:340px;margin:var(--space-2) auto 0;background:var(--bg-raised); border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-4); box-shadow:0 12px 40px rgba(0,0,0,.5)} .popover-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .popover-head b{font-size:14px} .popover-foot{display:flex;align-items:center;gap:8px;margin-top:var(--space-3)} .popover-info{flex:1;font-size:12px;color:var(--text-dim)} .popover-search{width:100%;min-height:44px;padding:8px 12px;border-radius:var(--radius-sm); border:1px solid var(--border);background:var(--bg-input);color:var(--text); font-size:16px;font-family:inherit;margin-bottom:8px} .popover-list{max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:2px} /* V-82: native