/* ============================================================ theme-dark.css — dunkles Design der Roadshows-Seite Aktiv nur, wenn die Klasse theme-dark traegt (gesetzt im Kopf von roadshows.html: Vorschau ueber ?design=dunkel, dauerhaft ueber DUNKEL_STANDARD). Alles Schwarze wird weiss, Rot bleibt der Akzent, Fotos werden leicht abgedunkelt, dahinter treibt der Nebel aus assets/js/fog.js. Ohne die Klasse hat diese Datei keine Wirkung. ============================================================ */ .theme-dark body { background: var(--tho-black); color: var(--tho-white); } /* Hintergrund: das Velo schemenhaft (entsaettigt, stark abgedunkelt, Raender ins Schwarz), darueber der Nebel — beide fest hinter dem Inhalt */ .theme-dark .fog-bg { position: fixed; inset: 0; z-index: 0; background: var(--tho-black); /* etwa 30 % Helligkeit, sichtbar nur durch die Nebel-Loecher */ filter: grayscale(1) brightness(0.3) contrast(1.2); pointer-events: none; overflow: hidden; } /* Das Velo selbst: eingepasst und um 5 % vergroessert */ .theme-dark .fog-bg::before { content: ""; position: absolute; inset: 0; background: url('/assets/img/roadshow-bike.webp') center / contain no-repeat; transform: scale(1.12); } /* Handy: darf seitlich ueber den Rand hinaus, rund 60 % der Bildschirmhoehe */ @media (max-width: 920px) { .theme-dark .fog-bg::before { background-size: auto 60%; transform: none; } } .theme-dark .fog-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(13, 13, 13, 0) 35%, rgba(13, 13, 13, 0.7) 75%, var(--tho-black) 100%); } .theme-dark .fog { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; /* grob gerechnet, weich vergroessert: Unschaerfe nimmt den Loechern die Kanten */ filter: blur(16px); opacity: 1; } .theme-dark .site-header, .theme-dark main, .theme-dark .site-footer { position: relative; z-index: 1; } /* ── Kopfleiste ────────────────────────────────────────────── */ .theme-dark .site-header { background: var(--tho-black); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .theme-dark .site-header__logo img { filter: brightness(0) invert(1); } .theme-dark .lang__btn { color: var(--tho-gray-300); } .theme-dark .lang__sep { color: var(--tho-gray-700); } /* ── Hero: nur die beiden Textbausteine auf Nebel und Velo ─────── Hintergrundbild, Abdunkelung und Verlaeufe sind AUSGEBLENDET (nicht geloescht) — im hellen Design sind sie unveraendert da. */ .theme-dark .hero { background: transparent; } .theme-dark .hero picture, .theme-dark .hero__media, .theme-dark .hero::after, .theme-dark .hero__fade, .theme-dark .hero-fade-out { display: none; } /* ── Sprungleiste ──────────────────────────────────────────── */ /* Sprungleiste ohne schwarzen Block: Nebel und Velo scheinen durch. Erst wenn sie beim Scrollen oben anliegt, bekommt sie einen leicht durchscheinenden Grund, damit die Knoepfe ueber dem Inhalt lesbar bleiben. */ .theme-dark .anchornav { background: transparent; } .theme-dark .anchornav.is-stuck { background: rgba(13, 13, 13, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom-color: rgba(255, 255, 255, 0.12); box-shadow: none; } .theme-dark .anchornav__logo img { filter: brightness(0) invert(1); } .theme-dark .anchornav__link { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.4); } .theme-dark .anchornav__link:hover { color: #fff; border-color: #fff; } /* ── Texte ─────────────────────────────────────────────────── */ .theme-dark .intro p, .theme-dark .h-section, .theme-dark .card__title, .theme-dark .canvas__block-label { color: #fff; } .theme-dark .section-lead, .theme-dark .card__text { color: var(--tho-gray-300); } /* ── Fotos: leicht abgedunkelt, weich ins Schwarz eingebettet ── */ .theme-dark .breaker img, .theme-dark .card__media img, .theme-dark .bigteaser img { filter: brightness(0.78) saturate(0.9); } .theme-dark .card__media { position: relative; background: var(--tho-gray-900); } .theme-dark .card__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.65); } .theme-dark .breaker::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, var(--tho-black) 0%, rgba(13, 13, 13, 0) 28%, rgba(13, 13, 13, 0) 72%, var(--tho-black) 100%); } /* ── Knoepfe ───────────────────────────────────────────────── */ .theme-dark .btn--outline { background: transparent; color: #fff; border-color: #fff; } .theme-dark .btn--outline:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } /* ── Roadshow-Karte ────────────────────────────────────────── */ .theme-dark .roadshow__panel { background: transparent; color: #fff; } /* Kartenbild: Umriss schwarz -> weiss, Flaechen weiss -> schwarz */ .theme-dark .roadshow__mapimg { filter: invert(1); } .theme-dark .roadshow__marker--upcoming circle, .theme-dark .roadshow__marker--tba circle { fill: var(--tho-black); stroke: #fff; } .theme-dark .roadshow__marker--past circle { fill: #5A5A5A; stroke: #5A5A5A; } /* Hover/Auswahl im Dunkeln: roter Rand, Fuellung bleibt, Ziffer weiss */ .theme-dark .roadshow__marker:hover circle, .theme-dark .roadshow__marker.is-hover circle, .theme-dark .roadshow__marker.is-selected circle { fill: var(--tho-black); stroke: var(--tho-red); } .theme-dark .roadshow__marker--current:hover circle, .theme-dark .roadshow__marker--current.is-hover circle, .theme-dark .roadshow__marker--current.is-selected circle { fill: var(--tho-red); stroke: #fff; } .theme-dark .roadshow__marker:hover text, .theme-dark .roadshow__marker.is-hover text, .theme-dark .roadshow__marker.is-selected text { fill: #fff; } /* Ortsnamen und das fahrende Velo auf der Karte */ .theme-dark .roadshow__label { fill: #fff; stroke: var(--tho-black); } .theme-dark .roadshow__bike * { stroke: #fff; } .theme-dark .roadshow__stop { border-color: rgba(255, 255, 255, 0.55); } .theme-dark .roadshow__stop:hover, .theme-dark .roadshow__stop.is-hover { border-color: var(--tho-red); background: rgba(211, 175, 55, 0.12); } .theme-dark .roadshow__stop--current { background: rgba(211, 175, 55, 0.16); } .theme-dark .roadshow__stop.is-selected { background: rgba(211, 175, 55, 0.22); } .theme-dark .roadshow__name, .theme-dark .roadshow__dates { color: #fff; } .theme-dark .roadshow__street, .theme-dark .roadshow__place { color: var(--tho-gray-400); } .theme-dark .roadshow__desc { color: var(--tho-gray-300); } .theme-dark .roadshow__tag { border-color: #fff; color: #fff; } .theme-dark .roadshow__more { border-color: #fff; color: #fff; } .theme-dark .roadshow__more:hover { border-color: var(--tho-red); color: var(--tho-red); } .theme-dark .roadshow__list { scrollbar-color: #fff var(--tho-black); } /* ── Anmeldung: dunkle Formular-Variante (Klassen setzt roadshow.js) ── */ .theme-dark .formshell, .theme-dark .formshell--light { background: transparent; padding: 0; } .theme-dark .formshell__inner { margin: 0; max-width: none; } .theme-dark .formshell iframe { background: transparent; color-scheme: normal; } .theme-dark .confirm, .theme-dark .confirm--light { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); } .theme-dark .confirm--light .confirm__title { color: #fff; } .theme-dark .confirm--light p { color: var(--tho-gray-300); } /* ── Footer ────────────────────────────────────────────────── */ .theme-dark .site-footer { border-top: 1px solid rgba(255, 255, 255, 0.12); }