/* ── Die Hülle auf hell umlegen ─────────────────────────────────────────── */ body.design-serienleiste { --bg: #f1f2f4; --bg-raised: #ffffff; --glass: rgba(255, 255, 255, .88); --line: #e2e4e9; --text: #14161a; --text-dim: #565c66; --accent: #da1f25; --font-display: 'Figtree', 'Inter', system-ui, sans-serif; --font-body: 'Figtree', 'Inter', system-ui, sans-serif; /* Eigene Marken dieses Designs */ --sr-paper: #ffffff; --sr-ground: #f1f2f4; --sr-ground-2: #e9eaee; --sr-ink: #14161a; --sr-ink-2: #565c66; --sr-ink-3: #888e98; /* Noch eine Stufe blasser als ink-3: fuer Nebenangaben, die nur auf Nachfrage gelesen werden — die Fahrerzahl unter einem Klassennamen zum Beispiel. */ --sr-ink-4: #a7acb5; --sr-line: #e2e4e9; --sr-line-2: #cfd3da; /* Und eine Linie, die nur trennt, ohne selbst mitzulesen — die Senkrechten im Stand. */ --sr-line-soft: #eef0f3; --sr-red: #da1f25; --sr-red-2: #f0353b; --sr-outside: #e2e5ea; --sr-frame: 1320px; /* Die Hoehe des zusammengezogenen Kopfstreifens. EINE Stelle, weil sie an zweien gebraucht wird: das Stilblatt setzt damit die Mindesthoehe, und die Steuerung rechnet damit, wie viel Hoehe der Hero beim Rollen abgeben darf (siehe KLEIN() in home-serienleiste). Zwei von Hand gepflegte Zahlen liefen beim ersten Feilen auseinander, und die Folge waere ein Streifen, der die Karte darin anschneidet. */ --sr-hero-klein: 230px; --sr-shadow: 0 1px 2px rgba(20, 22, 26, .05), 0 6px 20px rgba(20, 22, 26, .05); /* Der Schein beim Zeigen — Klassenkacheln und Terminzeilen tragen denselben (08.10.2026). */ --sr-hover-glow: 0 0 16px 1px rgba(11, 13, 16, .30); /* Die dunkle Hälfte: Leiste und Hero kommen aus dem Entwurf „Serien-Umschalter" und haben eigene Marken, damit der helle Rest der Seite sie nicht aus Versehen erbt. */ --sr-dark: #0b0d10; --sr-dark-2: #0f1216; --sr-dark-ink: #f3f4f6; --sr-dark-ink-2: #b9bec7; --sr-dark-line: rgba(255, 255, 255, .09); --sr-dark-line-2: rgba(255, 255, 255, .16); --font-display-hero: 'Anton', Impact, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; color-scheme: light; background: var(--sr-outside); color: var(--sr-ink); font-family: var(--font-body); } /* ── Die Leiste, dunkel wie im Entwurf „Serien-Umschalter" ─────────────── Sie stand hier hell auf hellem Grund und trug den Inhalt nur durch eine Linie. Jetzt ist sie wieder die dunkle Glasscheibe, die der Entwurf zeigt — der Inhalt darunter bleibt hell. */ body.design-serienleiste .sl-topnav, body.design-serienleiste .sl-topnav.is-stuck { background: rgba(11, 13, 16, .86); border-bottom: 1px solid var(--sr-dark-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--sr-dark-ink); transition: background .25s ease, border-color .25s ease; /* Die Leiste liegt fest ueber die volle Breite, der Inhalt steht im Blatt. Ohne dieses Polster klebte die Wortmarke am Bildschirmrand statt an der Inhaltskante. Prozent, nicht vw: das rechnet ohne die Rollleiste und trifft damit dieselbe Kante wie der zentrierte Rahmen. */ padding-left: max(1rem, calc((100% - var(--sr-frame)) / 2 + 26px)); padding-right: max(1rem, calc((100% - var(--sr-frame)) / 2 + 26px)); } body.design-serienleiste .sl-topnav::before { display: none; } /* Das Warenkorb-Zeichen steht am Rechner ganz rechts in der Leiste, an der Stelle des früheren Knopfs „Trackday buchen“ (Ansage Sven 01.11.2026: „lass uns den "book en trackday" button aus dem header entfernen und dort den warenkorb icon einbauen, dann könnte er auch wieder die alte grösse haben“). Derselbe Look wie das Profil-Symbol abgemeldet (Sven: „gleicher look wie das ausgeloggte profil icon“): 32-px-Glasscheibe mit Lichtschein, feiner heller Kante innen, rotem Ring und Schein; beim Darüberfahren rot. Die Zahl inzwischen oben rechts, der Schein nur beim Darüberfahren (siehe unten). */ /* Auch am Telefon derselbe Kreis wie das Profil (Sven 01.11.2026: „die kreise von profil und warenkorb müssen gleich gross sein“) — dort war der Warenkorb ein 40-px-Zeichen ohne Scheibe. Nur das Freihalten des Platzes gilt am Rechner. */ @media all { body.design-serienleiste .sl-topnav .sl-nav-cart { width: 32px; height: 32px; border-radius: 50%; /* Dasselbe klarere Glas wie am Profil (siehe .sl-nav-account-disc). */ background: radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, 0) 70%); backdrop-filter: blur(5px) saturate(1.9) brightness(1.18); -webkit-backdrop-filter: blur(5px) saturate(1.9) brightness(1.18); /* Der rote Schein nur beim Darüberfahren (Ansage Sven 01.11.2026: „roter glow nur beim hovern“), der schmale rote Ring bleibt. Rechts Luft für die Zahl oben rechts (Sven: „achte auf ausreichend platz nach rechts“). */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 1px rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 1.5px var(--sr-red); margin-right: 12px; transition: background .15s ease, box-shadow .18s ease; } body.design-serienleiste .sl-topnav .sl-nav-cart:hover { background: var(--sr-red); box-shadow: 0 0 0 1.5px var(--sr-red), 0 0 12px 4px rgba(218, 31, 37, 1), 0 0 28px 10px rgba(218, 31, 37, .7); } /* Farbe am Zeichen selbst: die Regel für Leistenlinks über dem Hero (:has(.sr-hero) … a) gewinnt sonst am Link. */ body.design-serienleiste .sl-topnav .sl-nav-cart svg { width: 18px; height: 18px; color: var(--sr-dark-ink); stroke: currentColor; } /* Ohne die Sperrung der Leistenschrift (.16em) — sie hängt Luft hinter jede Ziffer, die Zahl saß dadurch links (Sven: „die zahl ist nicht mittig“). */ /* Die Zahl oben rechts (Ansage Sven 01.11.2026: „mach die zahl am warenkorb auch oben rechts“ — wie die Fahne am Profil). */ /* Genau wie die Fahne am Profil (Sven 01.11.2026: „die weisse border bei der zahl raus, das soll genau aussehen, wie die flagge“): 16 px rund, oben rechts mit 3 px Überstand, kein Rand, roter Schein. Ohne die Sperrung der Leistenschrift (sonst saß die Zahl links, Sven: „die zahl ist nicht mittig“). */ body.design-serienleiste .sl-topnav .sl-nav-cart .sl-nav-cart-count { top: -3px; right: -3px; bottom: auto; left: auto; min-width: 16px; height: 16px; padding: 0 3px; display: grid; place-items: center; line-height: 1; font-size: .6rem; letter-spacing: 0; font-variant-numeric: tabular-nums; border: 0; border-radius: 999px; box-shadow: 0 0 5px 1px rgba(218, 31, 37, .95), 0 0 12px 3px rgba(218, 31, 37, .6); } } /* Die Glasfläche um Menü, Profil und Warenkorb (Ansage Sven 01.11.2026, Vorgabe: Unschärfe 14 px, feine helle Kante, Form wie der Serienumschalter, Schrift weiß und halbfett). Am Telefon keine eigene Box: die Kinder stehen wie bisher in der Leiste. */ body.design-serienleiste .sl-topnav-glas { display: contents; } @media (min-width: 901px) { body.design-serienleiste .sl-topnav-glas { display: flex; align-items: center; gap: .85rem; margin-left: auto; /* Klares Glas ohne Tönung (Ansage Sven 01.11.2026: „glass look ohne farbe“) — nur Unschärfe, ein Hauch Licht und die feine helle Kante; vorher dunkles Glas mit 48 %. */ /* Maximal durchsichtig (Sven: „maximal durchsichtig“): keine Fläche, nur ein Hauch Unschärfe (1 px, Sven: „der blur in der leiste soll weniger sein“) und die Kante. */ background: transparent; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); /* Verzerrt wie Glas (Sven: „verzerre es mehr“) — wo der Browser den Filter hinter Flächen nicht kennt, verwirft er diese Zeile und behält die darüber. */ backdrop-filter: url(#sl-glas-brechung) blur(1px); /* Dieselbe Form wie der Serienumschalter links (Ansage Sven 01.11.2026: „gleiches shape wie der serienumschalter“): 44 px hoch, ganz gerundete Enden (22 px). Rechts wenig Polster, damit die runden Knöpfe in der Rundung sitzen. */ border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px; box-sizing: border-box; height: 44px; padding: 0 5px 0 18px; /* Kleiner weißer Schatten innen (Ansage Sven 01.11.2026): ein Lichtsaum an der Innenkante, oben etwas kräftiger. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 12px rgba(255, 255, 255, .32); } body.design-serienleiste .sl-topnav-glas .sl-topnav-links { margin-left: 0; } body.design-serienleiste .sl-topnav-glas .sl-topnav-links a, body.design-serienleiste .sl-topnav-glas .sl-topnav-links button { color: #fff; font-weight: 600; } /* Die Wörter optisch auf die Mitte der Kreise von Profil und Warenkorb (Ansage Sven 02.11.2026: „die einträge in der top nav müssen mittig zu den kreisen … ausgerichtet sein“). Die Zeile ist mittig, die Großbuchstaben darin nicht: die Schrift hält unten Platz für Unterlängen frei, darum saßen sie 1,4 px zu hoch (gemessen bei 10,9 px Schrift). */ body.design-serienleiste .sl-topnav-glas .sl-topnav-links > a:not(.sl-nav-cart), body.design-serienleiste .sl-topnav-glas .sl-topnav-links > .sl-nav-group > .sl-nav-top { translate: 0 .13em; } /* Der Warenkorb steht seit 02.11.2026 vor dem Profil (Ansage Sven: Positionen tauschen) — kein eigener Abstand, der Abstand der Liste reicht auch für seine Zahl oben rechts. */ body.design-serienleiste .sl-topnav .sl-topnav-glas .sl-nav-cart { margin-right: 0; } } @media (min-width: 901px) { /* Leer behält er seinen Platz, unsichtbar (Ansage Sven 01.11.2026: „die navigation darf sich aber nicht bewegen, wenn das warenkorb icon da ist oder nicht“) — sonst rückten Menü und Profil um seine Breite nach rechts. */ body.design-serienleiste .sl-topnav .sl-nav-cart[hidden] { display: inline-flex; visibility: hidden; pointer-events: none; } /* Am Rechner gilt der Warenkorb in der Liste (vor dem Profil), der äußere ist fürs Telefon. */ body.design-serienleiste .sl-topnav .sl-nav-cart-aussen { display: none !important; } } @media (max-width: 900px) { body.design-serienleiste .sl-topnav .sl-nav-cart-innen { display: none !important; } } /* Wo ein Hero steht, sitzt die Leiste IM Bild und nicht als eigenes Band darüber: keine Fläche, keine Linie, nur ihr Inhalt. Sobald gerollt wird, läuft helle Seite unter ihr durch — dann bekommt sie ihre Glasscheibe zurück (.is-stuck setzt die Hülle). */ body.design-serienleiste:has(.sr-hero) .sl-topnav:not(.is-stuck) { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } /* Ohne Fläche darunter muss die Schrift selbst tragen: heller, mit einem Saum gegen den hellen Himmel im Foto. Gedämpftes Grau ginge dort unter. */ body.design-serienleiste:has(.sr-hero) .sl-topnav:not(.is-stuck) a, body.design-serienleiste:has(.sr-hero) .sl-topnav:not(.is-stuck) button { color: var(--sr-dark-ink); text-shadow: 0 1px 3px rgba(11, 13, 16, .55); } body.design-serienleiste:has(.sr-hero) .sl-topnav:not(.is-stuck) > a[data-sr-anchor] { text-shadow: none; } /* Beim Rollen bekommt sie wieder eine dunkle Scheibe — aber nur SO BREIT WIE DIE SEITE, buendig mit dem Hero-Streifen darunter, nicht ueber die volle Fensterbreite (Ansage Sven 04.10.2026: „wenn sich der hero verkleinert war sonst ein dunkler hintergrund hinter der topnav, damit sie besser lesbar ist … dann haben wir ihn auf die seitenbreite verringert. diesen letzten zustand brauchen wir zurueck"; hebt das „ohne Abdunkeln" vom 30.09.2026 auf). Die Leiste selbst bleibt durchsichtig und liegt weiter ueber die volle Breite; die Scheibe ist eine eigene Ebene dahinter, auf die Kanten des Hero-Streifens gerechnet (Rahmen --sr-frame mittig, ohne seine Bildlaufleiste). Am Telefon, auf dem Kaufweg und im Profil bleibt die Scheibe ueber die volle Breite wie bisher. */ @media (min-width: 701px) { body.design-serienleiste:has(.sr-hero-in:not(.sr-hero-profil)):not(:has([data-sr-kaufweg])) .sl-topnav.is-stuck { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } body.design-serienleiste:has(.sr-hero-in:not(.sr-hero-profil)):not(:has([data-sr-kaufweg])) .sl-topnav::after { content: ""; position: absolute; top: 0; bottom: -22px; z-index: -1; pointer-events: none; /* Der Rahmen (#sl-scroll) steht mittig ueber der vollen Breite, mit 1 px Rand; seine Bildlaufleiste liegt innen rechts — der Hero endet davor. Am Bildschirm nachgemessen. */ left: calc(max(0px, (100% - var(--sr-frame)) / 2) + 1px); width: calc(min(var(--sr-frame), 100%) - var(--sl-sbw, 0px)); /* Dunkles Glas, das nach unten ganz auslaeuft (Ansagen Sven 04.10.2026: „glass transparent, schon sehr dunkel aber glass effekt", dann „der kann noch transparenter und nach unten zu 100% transparenz auslaufen"). Die Maske blendet Farbe UND Unschaerfe gemeinsam aus — ein Verlauf nur in der Farbe liesse unten eine scharfe Kante der Unschaerfe stehen. Oben bis zur Mitte der Leiste bleibt es dicht genug fuer die Schrift; der Auslauf reicht 22 px darunter. Keine Haarlinie und kein Schatten: beides waere eine Kante, wo keine sein soll. */ background: rgba(11, 13, 16, .58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); /* Weniger Unschärfe (Ansage Sven 01.11.2026: „der blur in der leiste soll weniger sein“): 8 statt 18 px. */ -webkit-backdrop-filter: blur(8px) saturate(1.6); backdrop-filter: blur(8px) saturate(1.6); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%); opacity: 0; transition: opacity .25s ease; } /* Die Scheibe bleibt aus (Ansage Sven 14.10.2026: „nimm den schwarzen schatten am oberen rand des kleinen heros wieder raus" — „ich meinte die farbe, die wir hinter die navigationslinks legen, die nach unten hin ausläuft"). Die Ebene oben bleibt stehen, unsichtbar: zurückholen heißt hier wieder `.is-stuck::after { opacity: 1; }`. Lesbar hält die Links der Textschatten darunter. */ body.design-serienleiste:has(.sr-hero-in:not(.sr-hero-profil)):not(:has([data-sr-kaufweg])) .sl-topnav.is-stuck a, body.design-serienleiste:has(.sr-hero-in:not(.sr-hero-profil)):not(:has([data-sr-kaufweg])) .sl-topnav.is-stuck button { color: var(--sr-dark-ink); text-shadow: 0 1px 3px rgba(11, 13, 16, .55); } body.design-serienleiste:has(.sr-hero-in:not(.sr-hero-profil)):not(:has([data-sr-kaufweg])) .sl-topnav.is-stuck > a[data-sr-anchor] { text-shadow: none; } } body.design-serienleiste .sl-topnav a, body.design-serienleiste .sl-topnav button { color: var(--sr-dark-ink-2); text-shadow: none; font: 600 .68rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; } body.design-serienleiste .sl-topnav a:hover { color: var(--sr-dark-ink); } body.design-serienleiste .sl-topnav svg { stroke: currentColor; } /* Die Leiste ist dunkel — ihre Menues sind es auch. Sie nahmen sonst die helle Glasscheibe der Huelle und trugen darauf die helle Schrift der Leiste: hell auf hell, unlesbar. */ body.design-serienleiste .sl-nav-drop { background: rgba(11, 13, 16, .96); border-color: var(--sr-dark-line-2); box-shadow: 0 18px 40px rgba(11, 13, 16, .35); } body.design-serienleiste .sl-topnav .sl-nav-group .sl-nav-drop a, body.design-serienleiste .sl-topnav .sl-nav-group .sl-nav-drop button { color: var(--sr-dark-ink-2); text-shadow: none; } body.design-serienleiste .sl-topnav .sl-nav-group .sl-nav-drop a:hover, body.design-serienleiste .sl-topnav .sl-nav-group .sl-nav-drop button:hover { background: rgba(255, 255, 255, .08); color: var(--sr-dark-ink); } body.design-serienleiste .sl-topnav .sl-nav-group .sl-nav-drop a.sl-nav-lang-active { color: var(--sr-red-2); } body.design-serienleiste .sl-nav-drop-sep { background: var(--sr-dark-line); } /* Die Wortmarke steht links; die Leiste selbst baut rechtsbuendig, also schiebt sie den Rest mit margin-right:auto vor sich her. */ /* Die Wortmarke haengt unter die Leiste hinaus — sie ist groesser als die Leiste hoch ist und liegt mit ihrer unteren Haelfte im Hero. Die Leiste darf dafuer nicht abschneiden. */ body.design-serienleiste .sl-topnav { overflow: visible; } body.design-serienleiste .sr-brand { display: flex; align-items: center; margin-right: auto; flex: none; } body.design-serienleiste .sr-brand .sr-brand-ball { display: none; } @media (max-width: 900px) { /* Am Telefon die Wortmarke beim grossen Hero oben, der drehende Ball erst im kleinen Kopf (Ansage Sven 05.11.2026: „bei grossem header das zenergylogo zu sehen, bei kleiner navigation das drehende logo“ — vom 04.11.2026 bis 05.11.2026 war es unabhaengig von der Rollposition immer nur der Ball). Dieselbe Klasse sr-hero-klein steuert auch den Hero selbst und, am Schreibtisch, die verkleinerte Wortmarke (siehe unten) — beide wechseln also immer im selben Moment, und es gibt keinen Zwischenzustand mehr, in dem schon der Ball, aber der Kopf noch nicht klein steht (Befund Sven 05.11.2026). Server-gerendert fuer Seiten mit festem kleinen Kopf (s. $heroFest), daher ohne Aufblitzen der Wortmarke beim Laden. */ body.design-serienleiste.sr-hero-klein .sr-brand .sr-brand-wort { display: none; } body.design-serienleiste.sr-hero-klein .sr-brand .sr-brand-ball { display: block; width: 32px; height: 32px; margin: 0; filter: drop-shadow(0 3px 8px rgba(11, 13, 16, .45)); animation: sr-ball-dreh 12s linear infinite; will-change: transform; } /* Der Burger immer weiß (Ansage Sven 04.11.2026) — die Hülle färbt ihn im festgeklebten Kopf dunkel, dieser Kopf ist aber dunkel. */ body.design-serienleiste .sl-topnav .sl-burger, body.design-serienleiste .sl-topnav.is-stuck .sl-burger { color: #fff; } } @keyframes sr-ball-dreh { to { transform: rotate(360deg); } } /* Der Kopf am Telefon über die ganze Breite (Ansage Sven 04.11.2026: „nutze den platz in der breite voll aus, zenergy ball ganz links, warenkorb und profil daneben. zenergy ball in der gleichen grösse wie der warenkorb und profil kreis. das event icon nicht rot und als kalenderblatt mit einer 27 drin“): links Ball, Warenkorb, Profil — rechts Buchen, Info, Ergebnisse, Burger. Die Hülle baut rechtsbündig; hier löst sich die Gruppe der Zeichen auf (display: contents), damit Profil und Zeichen getrennt stehen können. Der Ball 32 px wie die beiden Kreise. */ @media (max-width: 900px) { body.design-serienleiste .sl-topnav { justify-content: flex-start; gap: .25rem; padding: 0 12px; } /* min-width statt width (Ansage Sven 06.11.2026: „Mobil ist die Position des großen Logos und des Profil Buttons nicht optimal“): die Wortmarke im großen Kopf ist 78 px breit — im 44-px-Kasten ragte sie links aus dem Bild, und der Profilkreis daneben lag auf ihr. Der Ball im kleinen Kopf füllt die 44 px weiter allein. */ body.design-serienleiste .sl-topnav .sr-brand { order: 0; margin-right: .3rem; min-width: 44px; height: 44px; justify-content: center; } body.design-serienleiste .sl-topnav .sl-nav-cart-aussen { order: 1; margin: 0 6px; } body.design-serienleiste .sl-mobil-wege { display: contents; } body.design-serienleiste .sl-mobil-wege .sl-mobil-konto { order: 2; } body.design-serienleiste .sl-mobil-wege a:not(.sl-mobil-konto) { order: 3; } body.design-serienleiste .sl-mobil-wege a:not(.sl-mobil-konto):first-child { margin-left: auto; background-color: currentColor; } body.design-serienleiste .sl-topnav .sl-burger { order: 4; } } @media (prefers-reduced-motion: reduce) { body.design-serienleiste .sr-brand .sr-brand-ball { animation: none; } } /* Am Telefon ist der kleine Kopf nicht mehr schwarz, sondern Milchglas (Ansage Sven 06.11.2026: „Mach den kleinen Header nicht schwarz sondern wie den Glass Look in der Desktop Ansicht“, dann auf Rückfrage „hell getöntes Glas“): die Form der Glasfläche am Rechner (.sl-topnav-glas — Verzerrung #sl-glas-brechung, helle Kante, Lichtsaum innen), aber hell getönt und stärker verwischt, weil hier beim Rollen die weiße Karte darunter durchläuft — klares Glas ließ die weißen Zeichen dort verschwinden. Darum die Zeichen im kleinen Kopf dunkel (Masken-Zeichen nehmen die Schriftfarbe; Burger und Warenkorb sind fest weiß gesetzt und werden hier eigens umgestellt). Volle Breite, ohne Rundung. Die Zeile mit :has(.sr-hero):not(.is-stuck): ist der Kopf schon klein, aber noch nicht festgeklebt, gewann sonst die ältere Regel „über dem Hero durchsichtig“ — die Leiste stand dann ohne Fläche über der hellen Seite (Befund Sven 06.11.2026 mit Bildschirmfoto). Bis 700 px: darüber legt die Rechner-Regel den festgeklebten Kopf ohnehin anders. */ @media (max-width: 700px) { body.design-serienleiste .sl-topnav.is-stuck, body.design-serienleiste.sr-hero-klein:has(.sr-hero) .sl-topnav:not(.is-stuck), body.design-serienleiste.sr-hero-klein .sl-topnav { /* Weißes Milchglas, nur leicht getönt (Ansage Sven 06.11.2026: „der navbar auf dem telefon soll doch weisse milchglas bekommen, aber mach es nur leicht getönt“). Ohne die Verzerrung #sl-glas-brechung: mit ihr fiel die Unschärfe auf dem Telefon weg, die Leiste wirkte durchsichtig und Knöpfe darunter sahen antippbar aus. */ background: rgba(255, 255, 255, .32); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 12px rgba(255, 255, 255, .5), 0 4px 14px rgba(11, 13, 16, .08); } body.design-serienleiste .sl-topnav.is-stuck a, body.design-serienleiste .sl-topnav.is-stuck button, body.design-serienleiste .sl-topnav.is-stuck .sl-burger, body.design-serienleiste.sr-hero-klein:has(.sr-hero) .sl-topnav:not(.is-stuck) a, body.design-serienleiste.sr-hero-klein:has(.sr-hero) .sl-topnav:not(.is-stuck) button, body.design-serienleiste.sr-hero-klein:has(.sr-hero) .sl-topnav:not(.is-stuck) .sl-burger, body.design-serienleiste.sr-hero-klein .sl-topnav a, body.design-serienleiste.sr-hero-klein .sl-topnav button, body.design-serienleiste.sr-hero-klein .sl-topnav .sl-burger { color: var(--sr-ink); text-shadow: none; } body.design-serienleiste .sl-topnav.is-stuck .sl-nav-cart svg, body.design-serienleiste.sr-hero-klein:has(.sr-hero) .sl-topnav:not(.is-stuck) .sl-nav-cart svg, body.design-serienleiste.sr-hero-klein .sl-topnav .sl-nav-cart svg { color: var(--sr-ink); } } body.design-serienleiste .sr-brand img { /* Genau die untere Haelfte der Kugel haengt heraus: die Kugel sitzt im Bild zwischen 70 und 100 % der Hoehe, ihre Mitte also bei rund 85 %. Der negative Rand schiebt das mittig ausgerichtete Bild so weit nach unten, dass diese Mitte auf der Unterkante der Leiste liegt. */ width: 95px; height: auto; position: relative; z-index: 1; margin-bottom: -15px; filter: drop-shadow(0 6px 14px rgba(11, 13, 16, .45)); } /* Im zusammengezogenen Streifen sitzt die Marke GANZ in der Leiste (Ansage vom 30.09.2026): mit ihrem Ueberhang reichte sie bis 74 px, und das Mantra „Ride // Learn …" beginnt dort bei 69 px — die Kugel lag darauf. Kleiner und ohne Ueberhang statt eines hoeheren Streifens, der eben erst flacher geworden ist. Ab 901 px ist das die Wortmarke (gilt hier); darunter zeigt der kleine Kopf stattdessen den drehenden Ball (s.o.), diese Regel greift dort also gar nicht mehr. */ @media (min-width: 701px) { body.design-serienleiste .sr-brand img { transition: width .3s ease, margin-bottom .3s ease; } body.design-serienleiste.sr-hero-klein .sr-brand img { width: 78px; margin-bottom: 0; } } /* Der freie Platz, wo sonst der Live-Verweis stand — seit 14.10.2026 weg, die Leiste rückt an das Konto heran (Ansage Sven: „die topnav kann weiter nach rechts rücken"). */ body.design-serienleiste .sl-nav-gap { display: none; } /* Beim Darüberfahren ein weißer Schein statt des dunklen Saums (Ansage Sven 14.10.2026: „und beim hovern einen weissen glow bekommen"). Nur die Hauptpunkte am Rechner; die Untermenüs und die Tafel am Telefon behalten ihre Regeln. */ @media (min-width: 901px) { body.design-serienleiste .sl-topnav .sl-topnav-links > a, body.design-serienleiste .sl-topnav .sl-topnav-links > .sl-nav-group > a, body.design-serienleiste .sl-topnav .sl-topnav-links > .sl-nav-group > button { transition: color .18s ease, text-shadow .18s ease; } body.design-serienleiste .sl-topnav .sl-topnav-links > a:hover, body.design-serienleiste .sl-topnav .sl-topnav-links > a:focus-visible, body.design-serienleiste .sl-topnav .sl-topnav-links > .sl-nav-group > a:hover, body.design-serienleiste .sl-topnav .sl-topnav-links > .sl-nav-group > button:hover, body.design-serienleiste:has(.sr-hero) .sl-topnav:not(.is-stuck) .sl-topnav-links > a:hover, body.design-serienleiste:has(.sr-hero) .sl-topnav:not(.is-stuck) .sl-topnav-links > .sl-nav-group > a:hover, body.design-serienleiste:has(.sr-hero) .sl-topnav:not(.is-stuck) .sl-topnav-links > .sl-nav-group > button:hover { color: #fff; /* Stärker nach „mach den glow etwas stärker“ (14.10.2026): drei Lagen statt zwei, weiter und dichter. */ text-shadow: 0 0 4px #fff, 0 0 10px rgba(255, 255, 255, .95), 0 0 22px rgba(255, 255, 255, .7); } } /* Das Konto als runde Scheibe — wie die Flagge daneben. Das Wort tritt weg, das Symbol traegt; angemeldet faerbt sich die Scheibe rot, oder sie zeigt das hochgeladene Bild. */ body.design-serienleiste .sl-nav-account { display: inline-flex; align-items: center; gap: .3rem; } body.design-serienleiste .sl-nav-account-text { display: none; } body.design-serienleiste .sl-nav-account-disc { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--sr-dark-ink); transition: background .15s ease, color .15s ease, box-shadow .18s ease; } body.design-serienleiste .sl-nav-account:hover .sl-nav-account-disc { background: var(--sr-red); color: #fff; } body.design-serienleiste .sl-nav-account-disc > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Angemeldet ist die Scheibe rot — das ist der Unterschied, den man im Vorbeigehen sieht. */ body.design-serienleiste .sl-nav-account.is-in .sl-nav-account-disc { background: var(--sr-red); color: #fff; } body.design-serienleiste .sl-nav-account.is-in:hover .sl-nav-account-disc { background: var(--sr-red-2); } /* Liegt ein Profilbild vor, deckt es die Scheibe; das Rot bleibt darunter stehen, damit ein fehlendes Bild nicht als leeres Loch endet, und umgibt das Bild als schmaler Ring. */ body.design-serienleiste .sl-nav-account.is-in .sl-nav-account-disc.has-photo { box-shadow: 0 0 0 1.5px var(--sr-red); } /* Zusätzlich ein weißer Ring außen und dahinter ein roter Schein (Ansage Sven 14.10.2026: „gib dem profilicon eine zusätzliche weisse outline und dahinter einen roten glow", dann „weisse rand schmaler roter glow stärker", „nimm mal den inneren weisse rand weg" — der weiße Ring ist wieder heraus). Mit Bild bleibt der schmale rote Ring innen. */ body.design-serienleiste .sl-nav-account .sl-nav-account-disc, body.design-serienleiste .sl-nav-account.is-in .sl-nav-account-disc.has-photo { box-shadow: 0 0 0 1.5px var(--sr-red), 0 0 10px 3px rgba(218, 31, 37, .95), 0 0 22px 8px rgba(218, 31, 37, .6); } /* Weicher Sprachwechsel (14.10.2026): der Browser blendet alte und neue Seite ineinander. Eingeschaltet wird der Uebergang nur beim Sprachwechsel — auf der alten Seite vom Seitenskript, auf der neuen vom Server (layouts/public-v3). */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* Abgemeldet: die Sprachfahne am Profilkreis, halb überlappend (Ansage Sven 14.10.2026: „die sprachauswahl bei ausgeloggt unten links an den profilkreis, sodass der sprachkreis halb überlappt“, dann „flagge oben rechts und ohne border“). Die Fahne steht vorn, ihr Menü klappt wie bisher auf. Nur am Rechner; am Telefon steht beides wie gewohnt nebeneinander. */ body.design-serienleiste .sl-nav-gast { display: contents; } @media (min-width: 901px) { body.design-serienleiste .sl-nav-gast { display: inline-flex; position: relative; } body.design-serienleiste .sl-nav-gast > .sl-nav-sprache { position: absolute; right: -3px; top: -3px; z-index: 2; order: 2; } /* Mitte der 16-px-Fahne auf dem Kreisrand oben rechts (bei 45°) — sie liegt halb auf dem Kreis („halb überlappend“). */ body.design-serienleiste .sl-nav-gast > .sl-nav-sprache > .sl-nav-top { padding: 0; line-height: 0; } /* Das Menü so breit wie die vier Fahnen und nach LINKS aufklappend (Ansage Sven 01.11.2026: „die sprachauswahl ist zu breit und soll nach links aufpoppen anstatt nach rechts“) — rechts ragte es aus dem Fenster. */ body.design-serienleiste .sl-nav-gast > .sl-nav-sprache > .sl-nav-drop { left: auto; right: -4px; min-width: 0; width: max-content; } body.design-serienleiste .sl-nav-gast > .sl-nav-sprache .sl-nav-langs { width: auto; } body.design-serienleiste .sl-nav-gast > .sl-nav-sprache > .sl-nav-top img, body.design-serienleiste .sl-nav-gast > .sl-nav-sprache > .sl-nav-top svg { width: 16px; height: 16px; border-radius: 50%; border: 0; display: block; /* Roter Schein statt Rand (Ansagen Sven 14.10.2026: „gib der flagge einen weisse glow“, dann „jetzt glow rot“) — Markenrot als Gestaltung wie am Profilkreis, kein Fehlerzeichen. */ box-shadow: 0 0 5px 1px rgba(218, 31, 37, .95), 0 0 12px 3px rgba(218, 31, 37, .6); } } /* Abgemeldet: innen Glas statt flacher Scheibe (Ansage Sven 14.10.2026: „und wenn ausgeloged innen glass look") — durchscheinend mit Unschärfe, oben ein Lichtschein, eine feine helle Kante innen. Beim Darüberfahren wird sie rot wie bisher. */ /* Klarer als zuerst (Sven 01.11.2026: „sieht aus, als wenn dort ein grauer hintergrund mit verlauf ist und kein glaseffekt“): kaum weiße Füllung, dafür das Bild dahinter leicht aufgehellt und satter, eine helle Lichtkante oben und ein schwacher Gegenschein unten — so liest es sich als Glas und nicht als graue Scheibe. Gleich am Warenkorb. */ body.design-serienleiste .sl-nav-account:not(.is-in) .sl-nav-account-disc { background: radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, 0) 70%); backdrop-filter: blur(5px) saturate(1.9) brightness(1.18); -webkit-backdrop-filter: blur(5px) saturate(1.9) brightness(1.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 1px rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 1.5px var(--sr-red), 0 0 10px 3px rgba(218, 31, 37, .95), 0 0 22px 8px rgba(218, 31, 37, .6); } body.design-serienleiste .sl-nav-account:not(.is-in):hover .sl-nav-account-disc { background: var(--sr-red); } body.design-serienleiste .sl-nav-account:hover .sl-nav-account-disc { box-shadow: 0 0 0 1.5px var(--sr-red), 0 0 12px 4px rgba(218, 31, 37, 1), 0 0 28px 10px rgba(218, 31, 37, .7); } /* Das Foto fest in den Kreis geklemmt: als Rasterkind nahm es seine eigene Höhe und hing unten heraus (Ansage Sven 10.10.2026: „beim profil icon läuft das bild aus dem rahmen"). */ body.design-serienleiste .sl-nav-account-disc.has-photo { overflow: hidden; } body.design-serienleiste .sl-nav-account-photo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } /* Der Buchen-Knopf mit der angeschraegten Kante aus dem Entwurf. */ /* Der Buchungsknopf der Kopfleiste. Adressiert ueber sein Attribut und nicht ueber .sl-btn, weil die Huelle diese Klasse auch anderswo vergibt. Er trug bis zum 19.09.2026 data-rail-modal-open (er oeffnete das Buchungsfenster); seit er nur noch zur Terminschiene springt, heisst das Attribut data-sr-anchor. Wer den Knopf wieder umbenennt, muss diese drei Regeln mitnehmen — sonst steht er unformatiert in der Leiste, und im Quelltext sieht alles richtig aus. */ /* „>" und nicht irgendein Nachfahre: dasselbe Attribut traegt am Telefon auch das Buchungszeichen in .sl-mobil-wege, und das ist kein Knopf. Ohne den direkten Bezug bekam es Grund, Beschnitt und Innenabstand eines Knopfes — ein rotes Rechteck mit abgeschnittener Ecke statt eines Zeichens. */ body.design-serienleiste .sl-topnav > a[data-sr-anchor] { background: var(--sr-red); color: #fff; border-color: transparent; text-shadow: none; font-weight: 600; letter-spacing: .12em; border-radius: 6px; padding-right: 1.7rem; clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); } body.design-serienleiste .sl-topnav > a[data-sr-anchor]:hover { background: var(--sr-red-2); color: #fff; } /* Eine fast weisse Gruppenfarbe verlangt die Grundfarbe — siehe $isPale in der Ansicht. */ /* ── Der Fuss ──────────────────────────────────────────────────────────── Dunkel wie Leiste und Hero, mit demselben Foto blass dahinter. Vier Spalten: Wortmarke mit dem Anspruch der Serie, zwei Spalten Verweise, rechts der Kontakt. Darunter eine Zeile mit dem Urhebervermerk links und dem Mantra rechts. */ body.design-serienleiste .sr-foot { position: relative; overflow: hidden; background: var(--sr-dark); color: var(--sr-dark-ink); } .sr-foot-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Cockpit-Bild (01.11.2026): weit unten verankert, damit Display und Lenker im Fuss stehen (Ansage Sven: „schieb das bild nach oben, ich will mehr vom cockpit sehen“). */ object-position: 50% 42%; opacity: .17; filter: grayscale(.4) contrast(1.02); } /* Ein leichter Lichtsaum statt einer zweiten Flaeche — der Fuss soll sich vom Band darueber absetzen und nicht wie dessen Fortsetzung wirken. */ .sr-foot::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 140% at 12% 0%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%), /* Oben darf das Foto mehr durch; unten, wo gelesen wird, tritt es zurueck. */ linear-gradient(180deg, rgba(11,13,16,.80) 0%, rgba(11,13,16,.88) 38%, rgba(11,13,16,.94) 100%); } /* `.sr-foot` davor: `.sr-wrap` steht weiter unten und nahm dem Fuss sonst oben und unten den Innenabstand — solange der Aufruf darueber stand, fiel das nicht auf (08.10.2026). */ .sr-foot .sr-foot-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, .8fr)) minmax(0, 1.2fr); gap: 1.6rem 2.2rem; padding: 2.1rem 26px 2rem; align-items: start; } .sr-foot-brand { display: flex; align-items: center; gap: 1rem; min-width: 0; } .sr-foot-brand > img { width: 118px; height: auto; flex: none; filter: drop-shadow(0 6px 14px rgba(11, 13, 16, .5)); } /* Der Anspruch: zwei Zeilen, die zweite rot — dieselbe Behandlung wie im Hero. Nur die Serie, die gerade gilt; das ausdrueckliche display:block schlug sonst das hidden der anderen, und beide Ansprueche standen nebeneinander da. */ .sr-foot-claim { position: relative; display: block; min-width: 0; } .sr-foot-claim[hidden] { display: none; } .sr-foot-claim b { display: block; font: 400 1.55rem/1.02 var(--font-display-hero); text-transform: uppercase; letter-spacing: .005em; color: #fff; } /* Die rote Haelfte bekommt ihre eigene Zeile — wie im Hero und wie in der Vorlage. */ .sr-foot-claim b em, .sr-foot-claim b i, .sr-foot-claim b strong, .sr-foot-claim b b { display: block; font-style: normal; font-weight: inherit; color: var(--sr-red); } .sr-foot-swoosh { display: block; height: 3px; width: 62%; margin-top: .3rem; border-radius: 2px; background: linear-gradient(90deg, var(--sr-red), rgba(218, 31, 37, 0)); transform: rotate(-2.2deg); transform-origin: 0 50%; } .sr-foot-col { display: flex; flex-direction: column; gap: .42rem; min-width: 0; } .sr-foot-col h2 { margin: 0 0 .25rem; font: 800 .64rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: #fff; } .sr-foot-col a { font-size: .82rem; color: var(--sr-dark-ink-2); text-decoration: none; } .sr-foot-col a:hover { color: #fff; } .sr-foot-follow { margin-top: .6rem; font: 800 .6rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--sr-dark-ink-2); } .sr-foot-social { display: flex; gap: .5rem; margin-top: .45rem; } .sr-foot-social a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .1); color: #fff; transition: background .15s ease; } .sr-foot-social a:hover { background: var(--sr-red); } .sr-foot-social svg { width: 17px; height: 17px; fill: currentColor; display: block; } .sr-foot .sr-foot-base { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .9rem 26px 1.1rem; } .sr-foot-base small { font-size: .72rem; color: var(--sr-dark-ink-3, rgba(255, 255, 255, .5)); } /* Eine Zeile (Ansage Sven 08.10.2026): Rechtevermerk | Crafted with ♥ by #16 — der senkrechte Strich trennt; wird es zu schmal, rutscht die Signatur ohne Strich in die naechste Zeile. */ .sr-foot-recht { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 0; overflow: hidden; } .sr-foot-recht > small + small::before { content: ""; display: inline-block; width: 1px; height: .95em; margin: 0 .75em; background: currentColor; opacity: .55; vertical-align: middle; } .sr-foot-made { display: inline-flex; align-items: center; gap: .3em; } /* Das Rot der Zenergy-Schrift im Logo: #da1f25 — gemessen am Logo, dasselbe wie --sr-red. */ .sr-foot-made svg { width: 1.1em; height: 1.1em; fill: var(--sr-red, #da1f25); flex: none; margin: -.1em 0; } .sr-foot-intro { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sr-dark-ink-2); text-decoration: none; display: inline-flex; gap: .5em; align-items: center; } .sr-foot-intro span { color: var(--sr-red); font-size: .55rem; } .sr-foot-intro:hover { color: #fff; } /* Das Relaunch-Intro: weißes Tuch über allem, Video mittig in seinem eigenen Format (4:3 — die weißen Ränder fallen auf dem weißen Tuch nicht auf). Ein- und Ausblendung des Videos laufen über .sr-intro-video-an, das Heben des Tuchs über .sr-intro-aus; die Dauer muss zur Konstante FADE im Skript passen. */ .sr-intro { position: fixed; inset: 0; z-index: 10000; background: #fff; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity .7s ease; } .sr-intro-aus { opacity: 0; pointer-events: none; } .sr-intro-video { display: block; width: 100vw; height: 100vh; object-fit: contain; background: #fff; opacity: 0; transition: opacity .7s ease; } .sr-intro-video-an .sr-intro-video { opacity: 1; } .sr-intro-skip { position: absolute; top: 1.4rem; right: 1.6rem; z-index: 2; appearance: none; border: 0; background: transparent; cursor: pointer; font-family: var(--font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sr-ink); padding: .5rem .2rem; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; } .sr-intro-skip:hover, .sr-intro-skip:focus-visible { color: var(--sr-red); border-bottom-color: var(--sr-red); outline: none; } .sr-intro-skip span { display: inline-block; margin-left: .3em; } .sr-foot-mantra { margin: 0; color: var(--sr-dark-ink-2); } /* ── Das Blatt: der ganze Inhalt zwischen zwei Senkrechten ──────────────── */ body.design-serienleiste #sl-scroll { max-width: var(--sr-frame); margin: 0 auto; background: var(--sr-ground); border-left: 1px solid var(--sr-line-2); border-right: 1px solid var(--sr-line-2); } /* Die Huelle gibt JEDEM
6rem Polster oben und unten (layouts/public-v3, die nackte Regel `section {}`). Hero und Band sind Sections, also wuchs der Hero um 192 px und alles rutschte nach unten. :where() haelt den Reset spezifitaetsfrei, damit jede eigene Regel ihn schlaegt — dieselbe Vorsicht wie bei Apex 2. */ .sr :where(section) { padding: 0; } /* Platz fuer die feste Leiste der Huelle: darunter faengt der Hero an, so wie in der Vorlage, wo die Leiste im Fluss stand. */ .sr { font-family: var(--font-body); color: var(--sr-ink); } .sr *, .sr *::before, .sr *::after { box-sizing: border-box; } .sr img { display: block; max-width: 100%; } /* Muss !important sein: die eigenen display-Regeln unten stehen später in der Kaskade und würden [hidden] sonst überstimmen — beide Serien stünden gleichzeitig da. */ .sr [hidden] { display: none !important; } .sr-wrap { max-width: var(--sr-frame); margin: 0 auto; padding: 0 26px; } .sr-display { font-weight: 900; font-style: italic; text-transform: uppercase; line-height: .96; letter-spacing: -.015em; margin: 0; } .sr-hand { font-family: 'Caveat', cursive; font-weight: 700; } .sr-lede { color: var(--sr-ink-2); font-size: .9rem; margin: 0; } .sr-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: .82rem 1.3rem; border-radius: 6px; text-decoration: none; font: 700 .78rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; transition: background .15s ease, border-color .15s ease, transform .15s ease; white-space: nowrap; } .sr-btn:hover { transform: translateY(-1px); } .sr-btn-red { background: var(--sr-red); color: #fff; } .sr-btn-red:hover { background: var(--sr-red-2); color: #fff; } .sr-btn-white { background: var(--sr-paper); color: var(--sr-ink); border: 1px solid var(--sr-line-2); } .sr-btn-white:hover { border-color: var(--sr-ink-3); color: var(--sr-ink); } /* Der zweite Knopf im dunklen Hero: nur Rand und ein Hauch Fuellung. */ .sr-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ── Hero ─────────────────────────────────────────────────────────────── So breit wie das Blatt und randlos bis an dessen Kanten — keine hellen Streifen links und rechts, kein Ausbruch über den Rahmen hinaus. Nach unten hört er nicht auf, er läuft aus. Die Leiste der Hülle liegt durchsichtig darüber (siehe oben), also trägt der Hero selbst den Platz dafür. */ .sr-hero { position: relative; background: var(--sr-dark); color: var(--sr-dark-ink); overflow: hidden; } .sr-hero-box { position: relative; } .sr-hero-photo { position: absolute; inset: 0; } .sr-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 40%; opacity: 0; transition: opacity .6s ease; /* Kraeftiger statt gedaempft: das Foto war entsaettigt, damit die Schrift daneben ruhig steht — sie steht links im Dunklen und braucht das nicht. */ filter: saturate(1.12) contrast(1.06); } .sr-hero-photo img.on { opacity: 1; } /* Supermoto-Hero am Rechner 155 px nach rechts (Ansage Sven 14.10.2026: „miss die breite des bildes, um diesen wert muss der SM Hero weiter nach rechts" — Bildausschnitt 155 px). Das Bild füllt die Breite schon ganz, darum verschoben statt anders angesetzt; seine linke Kante läuft weich in den dunklen Grund aus, dort liegt ohnehin der Verlauf mit 88 % Dunkel. Auf dem Telefon nicht — dort wären 155 px ein Drittel der Breite. */ @media (min-width: 901px) { .sr-hero-photo img[data-sr-hero="sm"] { transform: translateX(155px); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 160px); mask-image: linear-gradient(90deg, transparent 0, #000 160px); } /* MC bekommt links denselben dunklen Bereich hinter dem Text (Ansage Sven 14.10.2026: „im MC Hero würde ich links hinter den hero texte auch einen dunklen bereich wollen, wie es gezwungenermaßen bei SM ist, dann kann man den text besser lesen") — ohne das Bild zu verschieben: es läuft an derselben Stelle aus wie das verschobene SM-Bild (bis 155 px ganz dunkel, bis 315 px eingeblendet). */ .sr-hero-photo img[data-sr-hero="mc"] { -webkit-mask-image: linear-gradient(90deg, transparent 155px, #000 315px); mask-image: linear-gradient(90deg, transparent 155px, #000 315px); } } /* Profil ohne eigenes Bild (08.10.2026): die rote Flagge oben links angesetzt — das Rot links soll im Bild sein. */ .sr-hero-photo img.is-profil-standard { object-position: left top; } /* Der Text steht links im Dunklen, das Foto trägt rechts — aber links ist nicht schwarz: der Verlauf ist zurueckgenommen, sodass Strecke und Fahrerlager hinter der Schrift noch zu ahnen sind. Das ist die Grenze, an der die weisse Schrift noch sicher traegt. */ .sr-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,13,16,.88) 0%, rgba(11,13,16,.76) 30%, rgba(11,13,16,.26) 58%, rgba(11,13,16,0) 78%), linear-gradient(180deg, rgba(11,13,16,.42) 0%, rgba(11,13,16,.06) 22%, rgba(11,13,16,0) 42%, rgba(11,13,16,.14) 100%); } /* Mit dem Standardbild des Profils (rote Flagge) nur ein leichter Schleier: das Rot links soll leuchten, weiße Schrift trägt darauf auch so (Ansage Sven 08.10.2026: „damit das rot mit dabei ist"). */ .sr-hero-photo:has(img.is-profil-standard)::after { background: linear-gradient(90deg, rgba(11,13,16,.38) 0%, rgba(11,13,16,.22) 35%, rgba(11,13,16,0) 65%), linear-gradient(180deg, rgba(11,13,16,.3) 0%, rgba(11,13,16,0) 30%, rgba(11,13,16,0) 70%, rgba(11,13,16,.25) 100%); } /* ── Zierrat im Hero ───────────────────────────────────────────────────── Feine Diagonalen, zwei rote Fadenkreuze, drei Punkte und ein angedeuteter Zeitenzettel — die Motive aus der Vorlage. Alles in Prozent gesetzt, damit es mit dem Bild mitwandert, und alles so blass, dass es die Schrift nicht stoert. Es liegt ueber dem Foto und unter dem Text; die Abdunklung am Fuss legt sich darueber und nimmt es dort zurueck. */ .sr-hero-hud { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .sr-hero-hud > * { position: absolute; } .sr-hud-line { height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.17), rgba(255,255,255,0)); transform-origin: 0 0; } .sr-hud-line-1 { left: 9%; top: 2%; width: 26%; transform: rotate(41deg); } .sr-hud-line-2 { left: -4%; top: 62%; width: 22%; transform: rotate(39deg); } .sr-hud-line-3 { left: 54%; top: -6%; width: 18%; transform: rotate(44deg); opacity: .6; } .sr-hud-cross { width: 11px; height: 11px; opacity: .85; } .sr-hud-cross::before, .sr-hud-cross::after { content: ""; position: absolute; background: var(--sr-red); } .sr-hud-cross::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); } .sr-hud-cross::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); } .sr-hud-cross-1 { left: 20%; top: 9%; } .sr-hud-cross-2 { left: 63%; top: 74%; opacity: .5; } /* Steht der Serienumschalter links in der Kopfleiste, liegt er über dieser Zierde (Zeitenanzeige und Kreuz oben links) — sie tritt dann ab (01.11.2026, Umschalter fest an der Wortmarke). */ .sr-hud-tele, .sr-hud-cross-1 { transition: opacity .26s ease; } body.sr-switch-oben:has(.sl-topnav .sr-switch-mini) .sr-hud-tele, body.sr-switch-oben:has(.sl-topnav .sr-switch-mini) .sr-hud-cross-1 { opacity: 0; } .sr-hud-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.32); } .sr-hud-dot-2 { left: 3%; top: 86%; } .sr-hud-dot-3 { left: 8.5%; top: 96%; } /* Der Zeitenzettel: Zierschrift im Stil einer Zeitnahme, keine Messung. */ .sr-hud-tele { left: 22%; top: 7%; font: 400 .58rem/1.55 var(--font-mono); letter-spacing: .1em; color: rgba(255, 255, 255, .34); white-space: nowrap; } .sr-hud-tele i { font-style: normal; color: rgba(218, 31, 37, .8); margin-right: .55em; } /* Der Hero hoert mit einer geraden Kante auf und laeuft nicht mehr aus. Der weiche, nach links ansteigende Auslauf zog das Helle ueber 330 px ins Bild und nahm dem Foto seinen unteren Rand; im Entwurf steht eine saubere waagerechte Kante, auf der die Pille liegt. Die letzten Zentimeter des Fotos werden nur leicht abgedunkelt, damit die Kante nicht schneidet, sondern schliesst. */ .sr-hero-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none; background: linear-gradient(180deg, rgba(11, 13, 16, 0) 0%, rgba(11, 13, 16, .42) 100%); } .sr-hero-in { position: relative; z-index: 1; max-width: var(--sr-frame); margin: 0 auto; /* Keine Mindesthöhe mehr (bis 26.10.2026: 430 px): seit die vier Merkmale fehlen, gibt der Inhalt die Höhe vor — Mantra, Titel, Serienzeile und der Fließtext, der sich selbst gleich hoch hält, damit der Serienwechsel nicht springt. */ display: grid; grid-template-columns: minmax(0, 560px) 1fr; align-items: center; /* Unten 3.2 statt 4.2rem (Ansage Sven 26.10.2026: „im grossen hero kann zwischen der textzeile und dem serienumschalter noch leerraum weg“): die Pille lappt 27 px herein, darüber bleiben rund 24 px Luft. */ padding: calc(64px + 2.6rem) 26px 3.2rem; } .sr-hero-col { min-width: 0; } /* ── Der Hero zieht sich beim Rollen zusammen ───────────────────────────── Auftrag vom 24.09.2026: beim Ankommen steht er, wie er gebaut ist; sobald gerollt wird, bleiben nur die beiden grossen Zeilen stehen — der Titel mit seiner roten zweiten Zeile —, und wer wieder ganz nach oben rollt, bekommt ihn zurueck. Die Zustaende sind zwei Klassen am KOERPER und nicht an der Wurzel `.sr`: der weiche Seitenwechsel schreibt deren Klassenliste aus der Serverantwort neu (siehe wechsle() in home-serienleiste) und wuerde den Zustand bei jedem Tausch verlieren. `sr-hero-klein` — zusammengezogen. `sr-hero-weich` — die Uebergaenge sind eingeschaltet. Sie kommen erst nach dem ersten Bild dazu, damit ein direkt aufgerufener Termin (der schon gerollt aufsetzt) nicht sichtbar zusammenfaehrt. Der Kopf der PROFILSEITE teilt sich den Kasten mit dem Hero, aber nicht diese Regel: dort stehen Name, Rang und Punkte, und die sind kein Schaufenster, das zurueckzutreten haette. Darum haengt jede Regel hier an `:not(.sr-hero-profil)`. */ /* Der STREIFEN selbst fährt mit — seit dem 25.09.2026, weil die Hoehe nicht mehr am Rollweg haengt, sondern an der Schwelle: sie wechselt in einem Schritt, und ohne Fahrt waere das ein Sprung. Dieselbe Dauer und dieselbe Kurve wie sein Inneres darunter, damit es EINE Bewegung ist und nicht zwei, die zufaellig zusammen anfangen. Der Abstand nach unten fährt mit derselben Kurve: er ist das Gegenstueck zur Hoehe (Hoehe + Abstand = offene Hoehe), und liefe er anders, bewegte sich der Inhalt darunter waehrend der Fahrt — genau das, was diese Rechnung verhindern soll. */ body.sr-hero-weich .sr-hero:not(:has(.sr-hero-profil)) { transition: height .46s cubic-bezier(.22, .7, .25, 1), margin-bottom .46s cubic-bezier(.22, .7, .25, 1), background-color .30s ease, box-shadow .30s ease; } body.sr-hero-weich .sr-hero-in:not(.sr-hero-profil) { transition: min-height .46s cubic-bezier(.22, .7, .25, 1), padding .46s cubic-bezier(.22, .7, .25, 1); } body.sr-hero-weich .sr-hero-in:not(.sr-hero-profil) .sr-eyebrow, body.sr-hero-weich .sr-hero-in:not(.sr-hero-profil) .sr-hero-sub, body.sr-hero-weich .sr-hero-in:not(.sr-hero-profil) .sr-lede { transition: opacity .24s ease, max-height .46s cubic-bezier(.22, .7, .25, 1), min-height .46s cubic-bezier(.22, .7, .25, 1), margin .46s cubic-bezier(.22, .7, .25, 1), transform .46s cubic-bezier(.22, .7, .25, 1); } body.sr-hero-weich .sr-hero-in:not(.sr-hero-profil) .sr-hero-h1 { transition: font-size .46s cubic-bezier(.22, .7, .25, 1); } body.sr-hero-weich .sr-hero-tag { transition: opacity .26s ease, transform .46s cubic-bezier(.22, .7, .25, 1); } /* Ein Deckel im offenen Zustand, damit es im zusammengezogenen etwas zu schliessen gibt: von `none` auf `0` laesst sich nichts fahren. Grosszuegig bemessen — er soll nie schneiden, sondern nur einen Anfangswert haben, von dem aus die Fahrt losgeht. */ .sr-hero-in:not(.sr-hero-profil) .sr-hero-sub { max-height: 4rem; } .sr-hero-in:not(.sr-hero-profil) .sr-lede { max-height: 14rem; } /* Die Karte „naechster Termin" liegt seit dem 30.09.2026 als flacher Streifen frei am unteren Rand und braucht keine eigene Hoehe mehr — der Streifen ist ueberall 200 px. */ /* 535 → 200 px. Was bleibt, ist die Kopfleiste (sie liegt durchsichtig darueber und will ihre 64 px), Mantra, Titel und Serienzeile — und seit dem 25.09.2026 die Karte „naechster Termin" rechts. 200 px war die Ansage vom 24.09.2026 und gilt wieder: die Karte „naechster Termin" liegt seit dem 30.09.2026 als flacher Streifen frei unten rechts und braucht keine eigene Hoehe. */ body.sr-hero-klein .sr-hero-in:not(.sr-hero-profil) { min-height: var(--sr-hero-klein); padding-top: calc(64px + .3rem); /* Die letzten 29 px des Streifens gehoeren der Pille des Umschalters, die auf seiner Kante liegt. Der Text muss darueber aufhoeren, sonst schneidet sie ihm die zweite Zeile an — seit das Mantra im Streifen bleibt (24.09.2026), ist das knapp: oben die 64 px der Kopfleiste, dann Mantra und zwei Zeilen Titel, unten die Pille. */ padding-bottom: 1.4rem; } /* Serienzeile, Fliesstext und die vier Merkmale treten weg — nicht nur blass, sondern ohne Hoehe. Der Fliesstext bringt eine eigene Mindesthoehe mit (vier Zeilen Platz, damit der Hero beim Serienwechsel nicht springt); auch die muss weg, sonst haelt sie 4,65 Zeilen Luft fest, die niemand mehr sieht. DAS MANTRA BLEIBT (Ansage vom 24.09.2026: „Ride // Learn // Improve // Repeat ... soll immer sichtbar sein"), und seit dem 25.09.2026 auch DIE SERIENZEILE darunter — sie steht so in der Vorlage, und der Streifen hat den Platz dafuer, seit die Karte rechts sein Mass vorgibt. Der Fliesstext und die vier Merkmale treten weiter weg: die tragen den Schaufenster-Teil, und der ist es, der zurueckzutreten hatte. */ body.sr-hero-klein .sr-hero-in:not(.sr-hero-profil) .sr-lede { opacity: 0; max-height: 0; min-height: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; transform: translateY(-4px); pointer-events: none; } /* Die Handschrift steht frei im Foto und kostet keine Hoehe — sie geht trotzdem mit: sie haengt bei 30 % der Hoehe, und die ist gleich nicht mehr da. Die Drehung bleibt stehen, sonst richtet sie sich beim Verschwinden noch auf. */ body.sr-hero-klein .sr-hero-tag { opacity: 0; transform: rotate(-12deg) translateY(-14px); pointer-events: none; } /* Die beiden Zeilen bleiben — kleiner, aber es bleiben die grossen Zeilen. Behielten sie ihre Groesse, waere der Hero am Ende 210 px hoch und der halbe Gewinn dahin. Das Mass ist so gewaehlt, dass Kopfleiste, Mantra, zwei Zeilen und die Pille zusammen unter 200 px bleiben. */ body.sr-hero-klein .sr-hero-in:not(.sr-hero-profil) .sr-hero-h1 { font-size: clamp(1.55rem, 2.6vw, 2.2rem); } /* Und das Mantra rueckt naeher an den Titel: die 0,9 rem darunter sind fuer den offenen Hero gerechnet, im Streifen sind sie der Unterschied zwischen „passt" und „die Pille schneidet die zweite Zeile an". */ /* 0,9 statt 0,4 rem (Ansage Sven 08.10.2026: „unter der zeile, damit der kreis des A mehr platz hat") — der Ring des „Å" in „SMÅ BANER" stiess sonst ans Mantra. Die 8 px kommen unten vom Polster des Streifens (1,4 statt 1,9 rem), die Hoehe bleibt. */ body.sr-hero-klein .sr-hero-in:not(.sr-hero-profil) .sr-eyebrow { margin-bottom: .9rem; } /* ── Die Karte „naechster Termin" im zusammengezogenen Streifen ────────── Ansage vom 25.09.2026, nach einer Vorlage: im minimierten Kopf steht rechts, wann es das naechste Mal losgeht — Ort, Art, ein laufender Zaehler und der Weg zum Termin. NUR zusammengezogen. Offen steht der Hero mit Fliesstext, vier Merkmalen und der Handschrift da; eine zweite Tafel daneben waere dort ein drittes Angebot auf derselben Flaeche. `visibility` und nicht bloss `opacity`: ein unsichtbarer Verweis, den die Tabulatortaste trotzdem findet, ist eine Falle. Sie liegt in derselben Rasterzelle wie die Handschrift (.sr-hero-tag, absolut gesetzt) — die beiden koennen sich nie begegnen, weil die eine geht, wenn die andere kommt. */ /* Seit dem 30.09.2026 ein flacher Streifen in EINER Zeile, unten rechts am Rand des Heros (Ansage: „ganz flach als streifen … an den unteren rechten rand … alles in einer zeile"): Flagge, Name, Zaehler nebeneinander, Milchglas. Er liegt frei ueber dem Foto und kostet den Streifen darum keine Hoehe mehr. */ .sr-hero-next { /* Rechtsbuendig mit dem Knopf „Trackday buchen" (Ansage vom 30.09.2026). Die Leiste liegt fest ueber der vollen Fensterbreite (mit ihrem Polster, siehe .sl-topnav), dieser Kasten im Rahmen des Inhalts (#sl-scroll, --sr-frame breit, samt Bildlaufleiste) — daher die Rechnung: Polster der Leiste, minus der Rand, um den der Rahmen eingerueckt ist, minus die Bildlaufleiste. Ohne Rahmen (kein Rand, kaum Flaeche) und ohne Schatten: fast nur Unschaerfe. */ position: absolute; bottom: .9rem; z-index: 2; right: calc(max(1rem, (100vw - var(--sr-frame)) / 2 + 26px) - max(0px, (100vw - var(--sr-frame)) / 2) - var(--sl-sbw, 0px)); display: flex; align-items: center; gap: .6rem; max-width: calc(100% - 52px); padding: .32rem .45rem .32rem .4rem; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .06); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); color: var(--sr-dark-ink); text-decoration: none; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; } .sr-hero-next[hidden] { display: none; } body.sr-hero-klein .sr-hero-next { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } /* Sie kommt eine Spur SPAETER als der Streifen sich zusammenzieht: eine Karte, die waehrend der Fahrt schon dasteht, sieht aus, als waere sie im Weg gewesen. */ body.sr-hero-weich .sr-hero-next { transition: opacity .28s ease .12s, transform .42s cubic-bezier(.22, .7, .25, 1) .12s, visibility 0s linear .0s; } body.sr-hero-weich:not(.sr-hero-klein) .sr-hero-next { transition-delay: 0s, 0s, .28s; } .sr-hero-next:hover { background: rgba(255, 255, 255, .12); } .sr-hero-next-flag { flex: none; padding: .22rem .45rem; border-radius: 4px; background: var(--sr-red); color: #fff; font: 800 .56rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; } /* Live: gruener Punkt, der atmet, statt der roten Marke (30.09.2026). */ .sr-hero-next-flag.is-live { display: inline-flex; align-items: center; gap: .35rem; background: #15803d; } .sr-hero-next-flag.is-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: sr-live-puls 1.6s ease-in-out infinite; } @keyframes sr-live-puls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .sr-hero-next-flag.is-live::before { animation: none; } } /* Live: Marke und Name sind der Weg zum Termin, rechts daneben der Weg ins Livetiming. */ .sr-hero-next-zum { display: flex; align-items: center; gap: .6rem; min-width: 0; color: inherit; text-decoration: none; } .sr-hero-next-timing { flex: none; display: inline-flex; align-items: center; gap: .3rem; padding: .26rem .55rem; border-radius: 6px; background: var(--sr-red); color: #fff; text-decoration: none; font: 800 .64rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; transition: background-color .15s ease; } .sr-hero-next-timing:hover { background: var(--sr-red-2); } .sr-hero-next-timing svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .sr-hero-next-live { flex: none; padding: .22rem .5rem; border-radius: 6px; background: rgba(255, 255, 255, .1); font: 800 .66rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #fff; } .sr-hero-next-name { min-width: 0; font: 900 .95rem/1 var(--font-display, var(--font-body)); letter-spacing: -.01em; text-transform: uppercase; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Der Zaehler als Reihe kleiner Glasfelder: Zahl und Einheit nebeneinander. Feste Breite je Zahl (tabellarische Ziffern), sonst zappelt die Zeile bei jedem Tick. */ .sr-hero-next-clock { flex: none; display: flex; gap: .2rem; } .sr-hero-next-cell { display: flex; align-items: baseline; gap: .15rem; padding: .22rem .35rem; border-radius: 6px; background: rgba(255, 255, 255, .1); } .sr-hero-next-cell b { min-width: 1.3ch; text-align: right; font: 900 .82rem/1 var(--font-body); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .sr-hero-next-cell > span { font: 700 .46rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } /* ── Zusammengezogen wird er zu Milchglas mit Schatten ──────────────────── Ansage vom 24.09.2026: „wenn der Hero verkleinert ist, weil gescrollt wurde, braucht er einen Schatten nach unten und muss minimalen Glass-Look haben, damit man dahinter Inhalt scrollen sieht." Beides gilt NUR im zusammengezogenen Zustand: oben steht er im Fluss, dort gibt es nichts dahinter und nichts zu beschatten. Durchsichtig werden muessen ZWEI Schichten, nicht eine: der dunkle Grund des Heros und das Foto darauf. Bliebe eine davon deckend, laege dahinter nichts zu sehen. „Minimal" ist woertlich zu nehmen — die weisse Schrift steht darauf, und ein Streifen, durch den man liest, waere keiner mehr. Die Unschaerfe macht den Unterschied zwischen „man ahnt Bewegung" und „zwei Bilder uebereinander". */ body.sr-hero-klein .sr-hero:not(:has(.sr-hero-profil)) { background: rgba(11, 13, 16, .58); backdrop-filter: blur(13px) saturate(1.08); -webkit-backdrop-filter: blur(13px) saturate(1.08); box-shadow: 0 12px 30px rgba(11, 13, 16, .34), 0 2px 0 rgba(255, 255, 255, .07) inset; } /* Schatten unter dem Hero, der 12–18 px in den Inhalt läuft (Ansage Sven 01.11.2026: „Ein Schatten unterhalb des Heros, der etwa 12–18 px in den Content hineinläuft. Erzeugt Tiefe und signalisiert, dass der Hero vor dem Inhalt liegt“). Zwei Lagen: eine dichte Kante direkt unter dem Hero und ein Auslauf bis 16 px; die negative Ausdehnung hält ihn an den Seiten fast weg (6 px). Ersetzt den breiten, blassen Schatten (0 12px 30px, 34 %), der sich verlor. Am Rechner, offen und klein; am Telefon geht der Hero beim Rollen auf null. */ @media (min-width: 901px) { body.design-serienleiste .sr-hero:not(:has(.sr-hero-profil)) { box-shadow: 0 2px 3px rgba(11, 13, 16, .28), 0 10px 14px -8px rgba(11, 13, 16, .5); } body.sr-hero-klein .sr-hero:not(:has(.sr-hero-profil)) { box-shadow: 0 2px 3px rgba(11, 13, 16, .28), 0 10px 14px -8px rgba(11, 13, 16, .5), 0 2px 0 rgba(255, 255, 255, .07) inset; } } body.sr-hero-klein .sr-hero:not(:has(.sr-hero-profil)) .sr-hero-photo { opacity: .82; } /* Der kleine Streifen zeigt den oberen Teil dessen, was der große Hero zeigt — er schneidet ab, statt das Bild neu anzusetzen (Ansagen Sven 14.10.2026: „der minimierte hero bereich soll aber den oberen bereich des herobildes zeigen und nicht in der mitte bleiben" — „jetzt zeigst du dort aber einen ausschnitt vom bild, den man im grossen hero auch gar nicht sieht"). Das Foto behält dafür die offene Höhe, oben verankert; das Skript misst sie (--sr-hero-offen). Wo der Server den Streifen gleich klein setzt (Unterseiten), gibt es keine offene Höhe zu messen — dort die übliche. */ body.sr-hero-klein .sr-hero:not(:has(.sr-hero-profil)) .sr-hero-photo { bottom: auto; height: var(--sr-hero-offen, 529px); } /* Der kleine Streifen als eigenes Bild (Ansage Sven 14.10.2026: „warum legen wir nicht einfach eine kleine grafik an, extrahiert aus der jetzigen position"). Er liegt über dem großen Foto, oben, genau so hoch wie der kleine Streifen, und zeigt sich nur im kleinen Zustand: beim Laden sofort, beim Einklappen durch Rollen blendet er am Ende der Fahrt über das große Foto — beide zeigen dann denselben Ausschnitt. Nur am Rechner (am Telefon geht der Streifen auf 0). */ .sr-hero-photo img.sr-hero-streifen { display: none; } @media (min-width: 901px) { .sr-hero-photo img.sr-hero-streifen { display: block; top: 0; bottom: auto; height: var(--sr-hero-klein); object-fit: cover; object-position: 50% 50%; opacity: 0; transition: none; } body.sr-hero-klein .sr-hero:not(:has(.sr-hero-profil)) .sr-hero-photo img.sr-hero-streifen.on { opacity: 1; } body.sr-hero-weich .sr-hero-photo img.sr-hero-streifen { transition: opacity .18s ease; } body.sr-hero-weich.sr-hero-klein .sr-hero-photo img.sr-hero-streifen.on { transition: opacity .2s ease .36s; } /* Zoom und Ausschnitt wieder wie bis 31.10.2026 (Ansage Sven 01.11.2026: „setz die hero bilder von der zoomstufe und position wieder so, wie sie derzeit auf preprod liegen, nutze aber den dunklen verlauf wie er gerade auf localhost ist“): der Zuschnitt hero-*-klein.webp über die volle Breite, wie oben angesetzt. Die verkleinerte Fassung (#721: ganzes Foto 75 % breit rechts, Maske an der linken Bildkante, eigene Höhen je Serie) ist zurückgenommen. Geblieben sind der dunkle Verlauf (::after unten) und der Grund dahinter: Bildebene deckend auf Anthrazit, Bild voll deckend — sonst schiene das helle Glas als grauer Schleier durch (Vorgabe Sven 01.11.2026: „Der Übergang sollte durch Abdunklung entstehen, nicht durch grauen Nebel“). */ body.sr-hero-klein .sr-hero:not(:has(.sr-hero-profil)) .sr-hero-photo { opacity: 1; background: rgb(11,13,16); } /* Der dunkle Verlauf des kleinen Heros (#721), seit 01.11.2026 über dem Zuschnitt in voller Breite: 0–25 % Anthrazit (Slogan), 25–40 % weich auf transparent, ab 40 % das Foto unverfälscht. */ body.sr-hero-klein .sr-hero:not(:has(.sr-hero-profil)) .sr-hero-photo::after { background: /* Seit 01.11.2026 rund 140 px weiter links (Ansage Sven: „zieh den verlauf noch weiter nach links“). Farben nach Svens Vorgabe (01.11.2026): links rgba(18,20,24,.88), mittig rgba(22,24,28,.72), weiter rechts rgba(22,24,28,.35), dann ins Bild auslaufen. Vorher durchgehend rgba(11,13,16) mit .88/.80/.62/.36/.14. */ /* Danach 20 % dunkler, und zuletzt in der Farbe des großen Heros (Ansage Sven 01.11.2026: „mach die farbe des verlaufs im kleinen hero so wie es im grossen ist“). Gemessen bei 1384 px: groß links RGB ≈ 11/12/16, klein 26–52 grau — das Glas ließ die helle Seite durch. Darum links deckend im Ton des großen Heros (11,13,16), ab 200 px vor der Bildkante weich ins Bild. Die Zwischenstände (Svens Töne 18,20,24/22,24,28; 20 % dunkler) stehen im Verlauf von #721. */ /* Zonen nach Vorgabe Sven (01.11.2026): 0–25 % Anthrazit (Slogan), 25–40 % weich auf transparent, ab 40 % das Foto unverfälscht. */ linear-gradient(90deg, rgb(11,13,16) 0%, rgb(11,13,16) 25%, rgba(11,13,16,.78) 28.5%, rgba(11,13,16,.45) 32.5%, rgba(11,13,16,.16) 36.5%, rgba(11,13,16,0) 40%), linear-gradient(180deg, rgba(11,13,16,.42) 0%, rgba(11,13,16,.06) 22%, rgba(11,13,16,0) 42%, rgba(11,13,16,.14) 100%); } } /* Während das Skript die offene Höhe misst: keine Übergänge, sonst misst es eine Zwischenhöhe (Serienwechsel im kleinen Streifen, 14.10.2026). */ .sr-hero.sr-messen, .sr-hero.sr-messen * { transition: none !important; } /* Beim Wiederherstellen des Rollstands nach dem Laden (Sprachwechsel, Neuladen): ohne Fahrt (14.10.2026). */ body.sr-ohne-fahrt .sr-hero, body.sr-ohne-fahrt .sr-hero *, body.sr-ohne-fahrt .sl-topnav, body.sr-ohne-fahrt .sl-topnav * { transition: none !important; } /* MC im kleinen Streifen tiefer: statt des oberen Rands (Helme) der Ausschnitt mit den Startnummern 43 und 27 — das Bild 90 px nach oben geschoben (Ansagen Sven 14.10.2026: „ja, MC tiefer“, „noch 20px tiefer“, dann „30px nach unten“). SM bleibt beim oberen Teil. Nur am Rechner; auf dem Telefon geht der Streifen ohnehin auf null. */ @media (min-width: 901px) { /* Gleiten nur, wenn der Streifen beim Rollen weich ein- und ausklappt — beim Laden und Seitenwechsel springt das Bild sofort an seinen Platz (Ansage Sven 14.10.2026: „wenn ich die topnav klicke bewegt sich das herobild“). */ body.sr-hero-weich .sr-hero-photo img[data-sr-hero="mc"] { transition: opacity .6s ease, transform .46s cubic-bezier(.22, .7, .25, 1); } body.sr-hero-klein .sr-hero:not(:has(.sr-hero-profil)) .sr-hero-photo img[data-sr-hero="mc"]:not(.sr-hero-streifen) { transform: translateY(-90px); } /* SM im kleinen Streifen 30 px nach oben (Ansagen Sven 14.10.2026: „SM hero 20px hoch“, „noch 10px höher“) — zusätzlich zur Verschiebung um 155 px nach rechts, die immer gilt. */ body.sr-hero-weich .sr-hero-photo img[data-sr-hero="sm"] { transition: opacity .6s ease, transform .46s cubic-bezier(.22, .7, .25, 1); } body.sr-hero-klein .sr-hero:not(:has(.sr-hero-profil)) .sr-hero-photo img[data-sr-hero="sm"]:not(.sr-hero-streifen) { transform: translate(155px, -30px); } } /* Grund und Schatten fahren mit derselben Regel weiter oben — dort, wo seit dem 25.09.2026 auch die Hoehe des Streifens steht. */ body.sr-hero-weich .sr-hero:not(:has(.sr-hero-profil)) .sr-hero-photo { transition: opacity .30s ease; } /* ── Und er bleibt oben stehen ──────────────────────────────────────────── Ansage vom 24.09.2026: „der erste Schritt soll wegfallen". Gemeint war dieser: der zusammengezogene Streifen lag weiter IM Fluss und rollte darum mit weg. Eine einzige Bewegung am Rad geht weiter als seine 200 px — der Hero war nach dem ersten Rollen fort und kam erst beim Hochrollen wieder, als sei das Kleinwerden ein zweiter Schritt. Jetzt wird er klein UND bleibt: 200 px am oberen Rand, der Inhalt laeuft darunter durch. Nur im zusammengezogenen Zustand. Oben steht er wieder im Fluss — sonst laege die Seite gleich beim Aufbau unter ihm. Der Kopf der PROFILSEITE bleibt aussen vor: 424 px, die oben kleben, waeren die halbe Seite. `:has()` und nicht eine zweite Klasse, weil der Unterschied im Inneren steht und das Stilblatt ihn schon an anderer Stelle so liest (siehe die Kopfleiste ganz oben). */ /* ── Die Verankerung des Bildlaufs ist in diesem Design aus ────────────── Der Browser haelt von sich aus den Inhalt still, wenn ueber dem Rollstand Hoehe dazu- oder wegkommt: er zieht den Rollstand um denselben Betrag nach. Hier arbeitet er damit gegen die Rechnung des Heros — der laesst die Luft unter sich waehrend des Zusammen- ziehens wachsen, die Verankerung zieht den Rollstand nach, davon waechst die Luft weiter, … (gemessen am 24.09.2026: angefordert 100, geworden 200, dann 400). Gesetzt am ROLLENDEN BEHAELTER und nirgends sonst: am Koerper bleibt sie wirksam. Am Schreibtisch rollt `#sl-scroll`, am Telefon das Dokument — also beide. Preis: faengt ein Bild ueber dem Blickfeld erst beim Laden an, Platz zu brauchen, rutscht die Seite. Darum tragen die Bilder dieser Seite ihre Masse im Markup. */ html:has(body.design-serienleiste) { overflow-anchor: none; } body.design-serienleiste #sl-scroll { overflow-anchor: none; } .sr-hero:not(:has(.sr-hero-profil)) { position: sticky; top: 0; z-index: 25; } /* Fest klein (08.10.2026): auf allen Seiten ausser der Startseite kommt der Streifen schon in seiner kleinen Hoehe an — der Server setzt sr-hero-fest + sr-hero-klein + sr-switch-oben am Koerper, das Stilblatt traegt die Hoehe selbst (sonst setzt sie das Skript), und nichts faehrt beim Laden zusammen. 25 px Luft darunter wie im zusammengezogenen Zustand. */ body.sr-hero-fest .sr-hero:not(:has(.sr-hero-profil)) { height: var(--sr-hero-klein); margin-bottom: 25px; } /* ─── Ausser auf dem Kaufweg ────────────────────────────────────────────────────────── Warenkorb, Kasse und Bestellbestaetigung: dort klebt der Streifen NICHT (Ansage vom 24.09.2026). Der Grund ist gemessen: der stehende Streifen reichte bis 270 px, die Inhaltsspalte begann bei 212 px — die ersten knapp sechzig Pixel der Tafel lagen auf JEDER Rollposition dahinter, und der Warenkorb kam „oben abgeschnitten" herein. Ein anderer Sprungwert half nicht: der Hero gibt jeden abgegebenen Pixel als Abstand nach unten wieder her, Streifen und Inhalt wandern also gemeinsam. Auf diesen drei Seiten ist er ohnehin Schmuck und kein Weg — wer bezahlt, wechselt nicht die Serie. Also rollt er mit hinaus. Das Zusammenziehen laeuft dort ebenfalls nicht; das Skript fragt diese Regel ab (siehe home-serienleiste). */ .sr[data-sr-kaufweg] .sr-hero:not(:has(.sr-hero-profil)) { position: static; } /* Die Hoehe setzt das Skript (siehe home-serienleiste, „Der Hero zieht sich beim Rollen zusammen"): es kennt die offene Hoehe und gibt jeden abgegebenen Pixel als Abstand nach unten wieder her. Hier steht nur, dass das Innere mitgeht — ohne das stuende der Kasten auf 200 px und sein Inhalt weiter auf 453, halb abgeschnitten. */ .sr-hero:not(:has(.sr-hero-profil)) .sr-hero-box, .sr-hero-in:not(.sr-hero-profil) { height: 100%; } /* ─── Der Hero als Kopf der Profilseite ─────────────────────────────────────────────── Auftrag vom 20.09.2026: „kein zweiter Header, der Hero-Bereich wird fuer die Profilseite als Header genutzt". Er gibt dafuer seine eigene Zweispaltigkeit ab — die bringt der Kopf-Baustein (partials/portal-profile-header) selbst mit, und zwei ineinander geschachtelte Raster liessen den Titel in einer 200px-Spalte umbrechen. */ /* Der untere Abstand war eine Rechnung, solange die Tafel 64 px in den Hero lappte: 6.5rem liessen die Ueberlappung auf leere Flaeche fallen statt auf den letzten Satz. Seit dem 25.09.2026 lappt sie nicht mehr — siehe die Ueberlappungsregel des Warenkorbs weiter unten in diesem Blatt —, und 6.5rem waeren jetzt ein Loch zwischen Kopf und Tafel. 2.2rem: Luft unter der Personenkarte, mehr nicht. */ .sr-hero-profil { display: block; min-height: 0; padding-bottom: 2.2rem; } .sr-hero-profil .pf-head-cols { align-items: end; } /* Immer der kleine Kopf (Ansage Sven 08.10.2026: „die profilseite soll immer die minimierte hero höhe haben"): so hoch wie der kleine Streifen der anderen Seiten (--sr-hero-klein), darin nur Pfad, Titel und Unterzeile. Personenkasten und Event Updates stehen dafuer in der Uebersicht (Quartettkarte, eigene Kachel). */ body.sr-profil-klein .sr-hero-profil { box-sizing: border-box; min-height: var(--sr-hero-klein); height: var(--sr-hero-klein); padding-top: calc(64px + .5rem); padding-bottom: 1.1rem; display: flex; align-items: flex-end; } body.sr-profil-klein .sr-hero-profil .pf-head-cols { display: block; width: 100%; } body.sr-profil-klein .sr-hero-profil .pf-intro { display: none; } body.sr-profil-klein .sr-hero-profil .pf-title { font-size: clamp(1.7rem, 3vw, 2.5rem); } body.sr-profil-klein .sr-hero-profil .pf-lede { margin-top: .35rem; } /* Am Telefon blendet der kleine Streifen der anderen Seiten ganz aus (--sr-hero-klein: 0). Der Profilkopf behält Pfad, Titel und Unterzeile in ihrer eigenen Höhe. */ @media (max-width: 700px) { body.sr-profil-klein .sr-hero-profil { height: auto; min-height: 0; padding-top: calc(64px + .4rem); } } /* Ein Schleier ueber dem ganzen Bild, nicht nur am unteren Rand: das Bannerbild kommt vom Kunden und kann hell sein, und der Kopf ist durchgehend weisse Schrift. Der Verlauf von .sr-hero-box::after allein deckt nur die unteren 120px. */ .sr-hero-profil::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, rgba(8, 10, 13, .86) 0%, rgba(8, 10, 13, .62) 55%, rgba(8, 10, 13, .38) 100%); } /* Mit dem Standardbild (rote Flagge) fast keine Abdunklung — sonst bliebe vom Rot nur ein Schimmer (08.10.2026). */ .sr-hero-box:has(.sr-hero-photo img.is-profil-standard) .sr-hero-profil::before { background: linear-gradient(105deg, rgba(8, 10, 13, .3) 0%, rgba(8, 10, 13, .12) 55%, rgba(8, 10, 13, .05) 100%); } /* Die Hinweiszettel des Seiteneditors („Nicht gespeichert", „Uebersetzung afventer") haengen hinter dem bearbeiteten Feld und schoben den Hero auseinander — beim Umschalten sprang die Seite, weil die eine Serie einen Zettel hatte und die andere nicht. Absolut gesetzt ohne Versatz: sie stehen weiter an ihrer Stelle, kosten aber keine Hoehe mehr. */ .sr-hero-copy { position: relative; } .sr-hero-copy .content-badge { position: absolute; right: 0; margin: 0; z-index: 3; } /* Das Mantra als Zeile: Schreibmaschinenschrift, rote Schrägstriche. */ .sr-eyebrow { display: flex; flex-wrap: wrap; gap: .9em; align-items: center; margin: 0 0 .9rem; font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--sr-dark-ink-2); } .sr-slash { color: var(--sr-red); font-weight: 700; } /* Anton steht aufrecht und trägt den Hero; der Rest der Seite bleibt bei Figtree. */ .sr-hero-h1 { margin: 0; font-family: var(--font-display-hero); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: .95; /* Etwa ein Fuenftel kleiner seit 26.10.2026 (Ansage Sven: „mach auch den großen Hero-Titel … etwas kleiner"), vorher clamp(2.3rem, 4.4vw, 3.7rem). Zusammengezogener Streifen und Telefon haben eigene Groessen. */ font-size: clamp(2rem, 3.5vw, 3rem); } /* Die rote zweite Zeile ist die Hervorhebung im Titel selbst — im Text gesetzt, nicht aus einer Regel gerechnet. Seit 26.10.2026 in Exo 2 Black Italic (Ansagen Sven: „mach mal "race easy" im header kursiv", dann „race easy in "Exo 2 Black Italic" schreiben") — eine echte Kursive statt des geneigten Anton. */ .sr-hero-h1 em, .sr-hero-h1 i, .sr-hero-h1 strong, .sr-hero-h1 b { display: block; color: var(--sr-red); font-family: 'Exo 2', var(--font-display-hero); font-style: italic; font-weight: 900; letter-spacing: -.01em; } /* „Mein Profil" im Hero in derselben Schrift wie der Titel der Startseite (Ansage Sven 08.10.2026: „‚mein profil' muss in der hero schriftart"): Anton, aufrecht, gleiche Laufweite und Zeilenhöhe. */ .sr-hero-profil .pf-title { font-family: var(--font-display-hero); font-weight: 400; font-style: normal; letter-spacing: .01em; line-height: .95; } .sr-hero-sub { margin: .85rem 0 .6rem; font: 700 .88rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--sr-dark-ink); } /* Beide Serien müssen gleich hoch bauen, sonst springt die Seite beim Umschalten. */ /* Zwei Zeilen Platz statt drei (26.10.2026, mit dem Polster oben): beide Fließtexte sind zweizeilig, die dritte stand leer. Wird ein Text länger, wächst nur sein Hero um die Zeile. */ .sr-hero-copy .sr-lede { color: var(--sr-dark-ink-2); font-size: .86rem; line-height: 1.55; max-width: 44ch; min-height: 3.1em; } /* Die vier Merkmale unter dem Fließtext sind seit 26.10.2026 entfernt (Ansage Sven), ihre Regeln mit ihnen. */ /* Die Handschrift sitzt schräg im Foto, mit den roten Strichen darunter. */ .sr-hero-tag { position: absolute; right: 3.2rem; top: 30%; transform: rotate(-12deg); text-align: right; opacity: .92; } .sr-hero-tag .sr-hand { display: block; font-size: 1.35rem; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; color: var(--sr-dark-ink); } .sr-tag-stripes { display: block; height: 4px; width: 90px; margin: .4rem 0 0 auto; background: repeating-linear-gradient(90deg, var(--sr-red) 0 12px, transparent 12px 20px); transform: skewX(-30deg); } /* ── Das Kontaktformular ───────────────────────────────────────────────── Aufbau wie das Buchungsformular: der Waehler oben, die Angaben darunter, der Knopf am Fuss. Rechts daneben die Kontaktdaten — wer lieber anruft, soll nicht erst ein Formular ausfuellen. */ /* Nur noch das Formular (14.10.2026: Kontaktdaten daneben entfernt) — eine Spalte. */ .sr-kontakt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; align-items: start; } .sr-kontakt > .sr-head { grid-column: 1 / -1; } .sr-kontakt > .sr-head-lede { grid-column: 1 / -1; margin-bottom: 0; } .sr-kontakt-form { display: grid; gap: 1.1rem; } /* DAS LOCKFELD. Es muss fuer einen Automaten wie ein echtes Feld aussehen — ein type="hidden" oder ein display:none faellt ihm auf. Darum aus dem Bild geschoben statt ausgeblendet, ohne Hoehe und ohne Zeigerfang. */ .sr-kontakt-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; pointer-events: none; } /* Die Streckenseite /banedage/{strecke} (Backlog #060). */ .sr-strecke-kopf { padding: 1.4rem 0 .4rem; } .sr-strecke-eyebrow { margin: 0 0 .3rem; font: 800 .72rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--sr-red); } .sr-strecke-name { margin: 0; font-size: clamp(1.8rem, 4vw, 2.8rem); } .sr-strecke-ort { margin: .4rem 0 0; color: var(--sr-ink-2); font-weight: 600; } .sr-strecke-bild { display: block; width: 100%; max-height: 320px; object-fit: contain; margin: .4rem 0 0; } .sr-strecke-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .6rem; margin: 1rem 0 0; } .sr-strecke-zahlen > div { padding: .7rem .8rem; border: 1px solid var(--sr-line); border-radius: 10px; background: #fff; } .sr-strecke-zahlen dt { font: 800 1.15rem/1.1 var(--font-body); color: var(--sr-ink); } .sr-strecke-zahlen dd { margin: .2rem 0 0; font-size: .78rem; color: var(--sr-ink-2); } .sr-strecke-wege { margin-top: 1rem; } .sr-strecke-weiter { margin: 1.4rem 0 0; } .sr-strecke-link { display: inline-flex; margin-top: .6rem; font-weight: 700; color: var(--sr-red); text-decoration: none; } .sr-strecke-link:hover { text-decoration: underline; } /* ── Ergebnisseiten /resultater (Backlog #149) ── */ /* Zielflagge als Hintergrund der Ergebnisseiten, stark weiß überblendet (Ansage Sven 06.10.2026; Vorlage design/0917-2/checkeredflag.png, verkleinert auf 1200 px): beginnt ganz links oben, über die volle Breite, und läuft nach unten ins Weiß aus. */ .sr-card.sr-res, /* Dieselbe Zielflagge hinter dem Tabellenstand der Startseite, gleiche Lage und gleicher Winkel (Ansage Sven 07.10.2026: „gib mal dem tabellenstand den flaggen hintergrund von ergebnisse"). */ .sr-card.sr-stand-karte, /* Und hinter dem Kopf der Infoseiten (Ansage Sven 08.10.2026: „die helle flagge, die wir als BG im top3 haben"). */ .sr-card.sr-info, /* Und hinter dem Einfuehrungsblock ueber den Gruppen (Ansage Sven 26.10.2026: „gib dem intro block noch die weisse karierte flagge als hinter grund die wir in den ergebnissen haben"). */ .sr-card.sr-willkommen { background: linear-gradient(to bottom, rgba(255, 255, 255, .91) 0, rgba(255, 255, 255, .95) 28%, #fff 62%), url('https://www.zenergyracing.dk/v2/public/images/resultater-flagge.webp?v=1791304667') left top / 100% auto no-repeat, #fff; } .sr-res-kopf { padding: 1.4rem 0 .6rem; } .sr-res-titel { margin: 0; font-size: clamp(1.8rem, 4vw, 2.8rem); } .sr-res-intro { margin: .4rem 0 0; color: var(--sr-ink-2); } /* Serien, Saison und Reiter in einer Zeile (Bildvorlage Sven 06.10.2026): links die Wahl, rechts die Reiter, eine Linie darunter, auf der die rote Marke des aktiven Reiters steht. */ .sr-res-wahl { position: relative; } .sr-res-wahl > summary { list-style: none; cursor: pointer; gap: .45rem; } .sr-res-wahl > summary::-webkit-details-marker { display: none; } .sr-res-wahl > summary svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; } .sr-res-wahl[open] > summary svg { transform: rotate(180deg); } .sr-res-wahl-liste { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 20; min-width: 100%; padding: .3rem; background: #fff; border: 1px solid var(--sr-line); border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / .12); display: grid; } .sr-res-wahl-liste a { padding: .45rem .7rem; border-radius: 6px; font: 700 .85rem/1.1 var(--font-body); color: var(--sr-ink); text-decoration: none; } .sr-res-wahl-liste a:hover { background: var(--sr-ground, #f3f3f1); } .sr-res-wahl-liste a.is-on { color: var(--sr-red); } /* Auswahlleiste Jahr · Event · Klasse · Ergebnisse (Ansage Sven 07.10.2026, nach Bild): helle Felder mit Symbol, Wert und Pfeil, nebeneinander; am Telefon brechen sie um. */ .sr-res-auswahl { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .4rem; } .sr-res-auswahl-feld > summary { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .7rem .5rem .75rem; border: 1px solid var(--sr-line); border-radius: 10px; background: #fff; color: var(--sr-ink); font: 700 .88rem/1.2 var(--font-body); white-space: nowrap; box-shadow: 0 1px 2px rgba(20, 22, 26, .05); } .sr-res-auswahl-feld > summary:hover, .sr-res-auswahl-feld[open] > summary { border-color: var(--sr-ink-3); } .sr-res-auswahl-feld > summary > svg:first-child { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sr-res-auswahl-feld > summary > svg.sr-res-auswahl-pfeil { width: .95rem; height: .95rem; margin-left: .15rem; } .sr-res-auswahl-feld small { font-weight: 500; color: var(--sr-ink-3); } .sr-res-auswahl-feld .sr-res-wahl-liste { min-width: max(100%, 12rem); max-height: 26rem; overflow-y: auto; } .sr-res-auswahl-feld .sr-res-wahl-liste a { display: flex; gap: .6rem; white-space: nowrap; } .sr-res-auswahl-ergebnis .sr-res-wahl-liste a { font-weight: 500; } .sr-res-auswahl-ergebnis .sr-res-wahl-liste a.is-rennen { font-weight: 800; } .sr-res-auswahl-ergebnis .sr-res-wahl-liste time { min-width: 2.6rem; color: var(--sr-ink-2); font-variant-numeric: tabular-nums; font-weight: 500; } .sr-res-auswahl-tag { margin: .5rem .7rem .15rem; font: 800 .68rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--sr-ink-3); } /* PDF- und Rundengrafik-Symbol im Kopf einer Session, so klein wie die Felder es vorgeben. */ .sr-res-symbole { display: flex; gap: .25rem; margin-left: auto; } /* Je MC-Gruppe ein Paar aus Wiederholung und PDF mit dem Gruppenbuchstaben, etwas Luft zur naechsten (13.10.2026). */ .sr-res-symbole-gruppe { display: flex; gap: .25rem; } .sr-res-symbole-gruppe + .sr-res-symbole-gruppe { margin-left: .45rem; } .sr-res-pille-gruppe { margin-left: .3rem; font-size: .72rem; font-weight: 800; line-height: 1; } .sr-res-symbole .sr-res-pille { padding: .2rem .45rem; font-size: .7rem; } .sr-res-symbole .sr-res-pille svg { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sr-res-pille { display: inline-flex; align-items: center; padding: .38rem .8rem; border: 1px solid var(--sr-line); border-radius: 999px; font: 700 .82rem/1.1 var(--font-body); color: var(--sr-ink); text-decoration: none; background: #fff; white-space: nowrap; } .sr-res-pille:hover { border-color: var(--sr-red); } .sr-res-pille.is-on { background: var(--sr-red); border-color: var(--sr-red); color: #fff; } /* Eventwahl mit dem 3D-Diorama der Strecke vor dem Namen (Ansage Sven 06.10.2026). Das Bild ragt oben und unten etwas über die Pille hinaus, damit die kleine Kachel als Körper lesbar bleibt. */ .sr-res-zahlen { margin-bottom: 1rem; } .sr-res-podien { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; } .sr-res-podium { border: 1px solid var(--sr-line); border-radius: 12px; padding: .9rem 1rem; background: #fff; } .sr-res-podium h2 { margin: 0; font-size: 1.05rem; } .sr-res-podium h2 a { color: inherit; text-decoration: none; } .sr-res-podium h2 a:hover { color: var(--sr-red); } .sr-res-podium ol { list-style: none; margin: .6rem 0; padding: 0; } .sr-res-podium li { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .4rem; padding: .25rem 0; border-top: 1px solid var(--sr-line-2, var(--sr-line)); } .sr-res-podium li i { font-style: normal; font-weight: 800; color: var(--sr-ink-3); } .sr-res-podium li.sr-p1 i, .sr-res-podium li.sr-p1 b { color: var(--sr-red); } .sr-res-leise { color: var(--sr-ink-2); font-size: .82rem; margin: .3rem 0; } /* Gaststarter ohne Serienanmeldung (Thorleif 12.10.2026). */ .sr-res-gast { color: var(--sr-ink-2); font-size: .85em; font-weight: 700; letter-spacing: .02em; } .sr-res-stand { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .7rem; padding: .3rem .7rem; border-radius: 999px; background: var(--sr-ground, #f3f3f1); font: 700 .8rem/1.2 var(--font-body); color: var(--sr-ink-2); } .sr-res-stand-punkt { width: .5rem; height: .5rem; border-radius: 50%; background: #16a34a; } /* Der Stand steht oben rechts neben dem Schließen-Kreuz (Ansage Sven 06.10.2026). */ .sr-res > .sr-head .sr-res-stand { position: absolute; top: calc((42px - 1.6rem) / 2); right: calc(42px + .6rem); margin: 0; height: 1.6rem; padding-block: 0; z-index: 5; } /* Übersicht: alle Klassen nebeneinander in den Maßen der Top-3-Tabelle (.sr-stand). */ /* Nichts abschneiden: lange Nachnamen brechen um, statt mit „…" zu enden. Doppelte Klasse im Wähler: die Regeln der Top-3-Tabelle (.sr-sc …) stehen weiter unten. */ /* Platz, Name und Punkte in EINER Farbe, Stärke und Schrift (Ansage Sven 06.10.2026). */ .sr-res-lauf { margin: 1.2rem 0 0; } .sr-res-lauf h2 { margin: 0 0 .4rem; font-size: 1.05rem; } .sr-res-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--sr-line); border-radius: 10px; background: #fff; } .sr-res-tab { width: 100%; border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; } .sr-res-tab th, .sr-res-tab td { padding: .45rem .55rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--sr-line); } .sr-res-tab th { font: 800 .7rem/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--sr-ink-2); background: var(--sr-ground, #f6f6f4); position: sticky; top: 0; } .sr-res-tab .l { text-align: left; } .sr-res-tab .z { text-align: center; font-weight: 800; width: 2.6rem; } .sr-res-tab tbody tr:last-child td { border-bottom: 0; } .sr-res-tab tbody tr:hover td { background: #fafaf8; } .sr-res-fett { font-weight: 800; } .sr-res-klein { font-size: .78rem; color: var(--sr-ink-2); } .sr-res-klein span { display: block; font-size: .68rem; color: var(--sr-ink-3); } .sr-res-top .z { color: var(--sr-red); } .sr-res-tab th.m, .sr-res-tab td.m { text-align: center; } /* Ergebnisstreifen in der Gesamtwertung (Ansage Sven 06.10.2026): ein Kästchen je Lauf, Lücke zwischen den Events. Gold/Silber/Bronze, grau = übrige Plätze, gestrichelt = DNF/DNS, leer = nicht gefahren. */ /* Ergebnisstreifen (Ansage Sven 06.10.2026): Platz in der Klasse im Kästchen, je Event eine Gruppe mit den Punkten des Wochenendes darunter. */ .sr-streifen { display: inline-flex; align-items: flex-start; gap: 5px; vertical-align: middle; } .sr-streifen-ev { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; } /* Die Kästchen eines Events und seine Punkte darunter gehören zusammen (Ansage Sven 07.10.2026: „optische klammer"): eine geschweifte Klammer unter den Kästchen, die auf die Punkte zeigt. */ .sr-streifen-k { position: relative; display: inline-flex; gap: 2px; padding-bottom: 6px; } .sr-streifen-k::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 4px; border: 1px solid #b9bdc4; border-top: 0; border-radius: 0 0 4px 4px; } .sr-streifen-k::before { content: ""; position: absolute; left: 50%; bottom: -2px; width: 1px; height: 3px; background: #b9bdc4; } .sr-streifen-ev > b { font: 700 .62rem/1 var(--font-body); color: var(--sr-ink); font-variant-numeric: tabular-nums; min-height: .62rem; } .sr-streifen i { flex: none; display: grid; place-items: center; width: 13px; height: 16px; border-radius: 3px; box-sizing: border-box; font: normal 600 .58rem/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--sr-ink-2); background: #eef0f3; } .sr-streifen i.is-gold { background: #f1d778; color: #5a4300; } .sr-streifen i.is-silber { background: #d9dde2; color: #353a41; } .sr-streifen i.is-bronze { background: #e7bf9b; color: #5b3214; } .sr-streifen i.is-aus { background: transparent; border: 1px dashed #b9bdc4; color: var(--sr-ink-3); } .sr-streifen i.is-leer { background: transparent; border: 1px solid #eceef1; } /* Noch nicht gefahren (Ansage Sven 06.10.2026): die Saison steht von Anfang an in voller Breite. */ .sr-streifen i.is-offen { background: transparent; border: 1px dotted #d3d6db; } /* Am Telefon nur die Punkte je Wochenende — die Kästchen wären dort zu klein. */ @media (max-width: 640px) { .sr-streifen { gap: .55rem; } .sr-streifen-k { display: none; } .sr-streifen-ev > b { font-size: .72rem; font-weight: 600; } } .sr-res-wertung-tab th.sr-streifen-kopf { width: 1%; } /* Zahlen wirken neben Namen größer (Ziffern sind so hoch wie Großbuchstaben): Rennen, Siege, Podien und Punkte etwas kleiner, damit sie optisch zu den Fahrernamen passen (Ansage Sven 07.10.2026). */ .sr-res-wertung-tab td.m, .sr-res-wertung-tab td.sr-res-fett { font-size: .78rem; } /* Eventwertung: je Qualifying und Rennen eine Spalte, Kopf „Q", „R1" … fett (Ansagen Sven 07.10.2026). Im Feld der Platz, die Punkte in Klammern, keine Zahl fett; DNF/DNS in derselben Schrift; ohne Ergebnis ein Platzhalter. */ .sr-res-wertung-tab th.sr-res-vk { font-weight: 800; font-size: .66rem; letter-spacing: .02em; color: var(--sr-ink); } .sr-res-wertung-tab td.sr-res-verlauf { white-space: nowrap; } .sr-res-verlauf i { display: inline-block; min-width: 1.6rem; padding: 2px 5px; border-radius: 4px; background: #eef0f3; font: normal 500 .72rem/1.2 var(--font-body); color: var(--sr-ink); font-variant-numeric: tabular-nums; text-align: center; } .sr-res-verlauf i.is-q { background: transparent; border: 1px solid var(--sr-line); } .sr-res-verlauf i.is-gold { background: #f1d778; } .sr-res-verlauf i.is-silber { background: #d9dde2; } .sr-res-verlauf i.is-bronze { background: #e7bf9b; } .sr-res-verlauf i.is-aus { background: transparent; border: 1px dashed #b9bdc4; } .sr-res-verlauf i.is-leer { background: transparent; color: var(--sr-ink-3); } /* Die Wertung rollt nie seitlich (Ansage Sven 07.10.2026: „die wertungstabelle darf nicht scrollen"): seit der Event-Karte daneben ist die Spalte schmaler. Die Kästchen richten sich nach der Breite der Tabelle (13 px bei viel Platz, bis 8 px); reicht auch das nicht, bleiben wie am Telefon nur die Punkte je Wochenende. */ .sr-res-wertung .sr-res-scroll { container-type: inline-size; } .sr-res-wertung .sr-streifen i { width: clamp(8px, 1.4cqi, 13px); } .sr-res-wertung .sr-streifen-k { gap: clamp(1px, .2cqi, 2px); } .sr-res-wertung .sr-streifen { gap: clamp(3px, .6cqi, 5px); } /* Gestaffelt nach Platz: erst bleiben vom Streifen die Punkte je Wochenende, dann treten Rennen/Siege/Podien zurück, ganz schmal entfällt der Streifen. */ /* Als Erstes wird der Verlauf kleiner (Ansage Sven 07.10.2026), erst danach treten Rennen/Siege/Podien zurück. */ @container (max-width: 680px) { .sr-res-wertung .sr-streifen { gap: .45rem; } .sr-res-wertung .sr-streifen-k { display: none; } .sr-res-wertung .sr-streifen-ev > b { font-size: .72rem; font-weight: 600; } } @container (max-width: 520px) { .sr-res-wertung-tab th.m, .sr-res-wertung-tab td.m { display: none; } } @container (max-width: 380px) { .sr-res-wertung-tab .sr-streifen-kopf, .sr-res-wertung-tab td:has(> .sr-streifen) { display: none; } } /* Rundengrafik (#149, Etappe 3) */ .sr-res-lauf-kopf { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; justify-content: space-between; margin: 0 0 .4rem; } .sr-res-lauf-kopf h2 { margin: 0; } .sr-res-grafik { border: 1px solid var(--sr-line); border-radius: 10px; background: #fff; padding: .8rem 1rem 1rem; margin: 0 0 .8rem; } .sr-res-grafik h3 { margin: .2rem 0 .5rem; font: 800 .72rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--sr-ink-2); } .sr-res-grafik-bild { overflow-x: auto; margin-bottom: 1rem; } .sr-res-grafik-bild svg { display: block; width: 100%; min-width: 34rem; height: auto; } .sr-gr-gitter { stroke: var(--sr-line); stroke-width: 1; } .sr-gr-achse { stroke: #c5c0ba; stroke-width: 1.5; } .sr-gr-marke { font: 600 10px var(--font-body); fill: var(--sr-ink-3); } .sr-gr-name { font: 700 8.5px var(--font-body); fill: #fff; } .sr-gr-aus { fill: var(--sr-ink); stroke: #fff; stroke-width: 1.5; } /* Bedienfeld wie ein Mediaplayer (08.10.2026), Glas-Stil nach Svens Vorlage „Modern / Glass-Effekt": milchige Glasfläche mit ⏮ ▶ ⏭, Runde + Rennuhr über dem Fortschritt, Tempo als Pillen und „?"; Titel darüber, Klasse / ganzes Feld darunter. Mit Streckenbild liegt es im Bild am unteren Rand (.is-im-bild): erst nur eine schmale Leiste (▶, Runde, Fortschritt), beim Darüberfahren oder Antippen fährt der Rest hoch. Die Runde blitzt bei jedem Wechsel. */ .sr-res-player { position: relative; margin: 0 0 .9rem; padding: .7rem .8rem .75rem; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #2a3038, #14171c); box-shadow: 0 10px 24px -14px rgba(20, 22, 26, .7); } .sr-res-player button { cursor: pointer; font: inherit; color: inherit; border: 0; background: none; } .sr-res-player button:disabled { opacity: .35; cursor: default; } .sr-res-player-klappe { display: grid; grid-template-rows: 1fr; } .sr-res-player-klappe > * { min-height: 0; } .sr-res-player-titel { margin: 0 0 .55rem .15rem; font: 800 .92rem/1.2 var(--font-body); text-shadow: 0 1px 4px rgba(0, 0, 0, .55); } .sr-res-player-glas { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; padding: .7rem .9rem; border-radius: 14px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 18px -10px rgba(0, 0, 0, .5); } .sr-res-player-knoepfe { display: flex; align-items: center; gap: .2rem; } .sr-res-player-knopf { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; transition: background .15s; } .sr-res-player-knopf:not(:disabled):hover { background: rgba(255, 255, 255, .18); } .sr-res-player-knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .sr-res-player .sr-res-player-anfang { width: 30px; height: 30px; opacity: .8; } .sr-res-player .sr-res-player-anfang svg { width: 15px; height: 15px; } .sr-res-player .sr-res-player-spiel { display: grid; place-items: center; width: 50px; height: 50px; margin: 0 .3rem; border-radius: 50%; background: var(--sr-red); font-size: 1.15rem; line-height: 1; box-shadow: 0 6px 16px -6px rgba(227, 6, 19, .8); transition: transform .12s, width .3s, height .3s; } .sr-res-player .sr-res-player-spiel:hover { transform: scale(1.06); } .sr-res-player-mitte { flex: 1 1 12rem; min-width: 10rem; display: grid; gap: .45rem; } .sr-res-player-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; } .sr-res-player-runde { display: inline-flex; align-items: baseline; gap: .35rem; font-variant-numeric: tabular-nums; } .sr-res-player-runde small { font: 700 .66rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .8); } .sr-res-player-runde b { font: 900 1.4rem/1 var(--font-display, var(--font-body)); color: #fff; } .sr-res-player-uhr { font: 700 .78rem/1 var(--font-body); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); } .sr-res-replay-flagge { display: none; width: 1.1rem; height: 1.1rem; align-self: center; fill: none; stroke: currentColor; stroke-width: 1.4; color: #fff; } .sr-res-player-runde.is-ziel .sr-res-replay-flagge { display: block; } .sr-res-player-runde.is-blitz b { animation: sr-runde-blitz .7s ease-out; } @keyframes sr-runde-blitz { 0% { color: var(--sr-red); transform: scale(1.18); } 100% { color: #fff; transform: none; } } .sr-res-player-balken { display: block; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .28); overflow: hidden; } .sr-res-player-balken i { display: block; height: 100%; width: 0; background: var(--sr-red); border-radius: 999px; } .sr-res-player-rechts { display: flex; align-items: center; gap: .55rem; } .sr-res-player-tempo, .sr-res-player-sicht { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .14); } .sr-res-player-tempo button, .sr-res-player-sicht button { padding: .38rem .65rem; border-radius: 999px; font: 800 .72rem/1 var(--font-body); color: rgba(255, 255, 255, .85); } .sr-res-player-tempo button.is-on, .sr-res-player-sicht button.is-on { background: #fff; color: #14171c; } .sr-res-player-sicht { margin: .6rem 0 0; background: none; padding: 0; gap: .2rem; } .sr-res-player-sicht button:not(.is-on) { text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } /* Im Streckenbild: Hülle so breit wie das Bild, das Bedienfeld unten darin, ohne eigenen Grund. */ .sr-res-bild { position: relative; margin: .4rem auto 1rem; } /* Bedienfeld unter dem Streckenbild, so breit wie das Bild (13.10.2026, kein Overlay mehr). */ .sr-res-bild:has(+ .sr-res-player-unter) { margin-bottom: .6rem; } .sr-res-player-unter { margin: 0 auto 1rem; } .sr-res-bild .sr-res-strecke { margin: 0; } .sr-res-player.is-im-bild { position: absolute; left: .6rem; right: .6rem; bottom: .6rem; z-index: 125; margin: 0; padding: 0; background: none; box-shadow: none; outline: none; } .sr-res-bild:not(.is-foto) .sr-res-player.is-im-bild .sr-res-player-glas { background: rgba(20, 23, 28, .72); } .sr-res-player.is-im-bild .sr-res-player-glas { flex-wrap: nowrap; padding: .4rem .7rem; gap: .7rem; transition: padding .3s, gap .3s; } .sr-res-player.is-im-bild .sr-res-player-spiel { width: 34px; height: 34px; margin: 0; font-size: .85rem; } .sr-res-player.is-im-bild .sr-res-player-mitte { min-width: 0; gap: .3rem; } .sr-res-player.is-im-bild .sr-res-player-runde b { font-size: 1.05rem; transition: font-size .3s; } .sr-res-player.is-im-bild .sr-res-player-extra { max-width: 0; opacity: 0; overflow: hidden; margin: 0; pointer-events: none; transition: max-width .3s, opacity .25s; } .sr-res-player.is-im-bild .sr-res-player-klappe { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .3s, opacity .25s; } .sr-res-player.is-im-bild .sr-res-player-klappe > * { overflow: hidden; } .sr-res-player.is-im-bild .sr-res-player-sicht { margin: 0; padding-top: 0; transition: padding .3s; } .sr-res-player.is-im-bild .sr-res-player-titel { margin-bottom: 0; padding-bottom: 0; transition: padding .3s; } .sr-res-player.is-im-bild:is(:hover, :focus-within, :has(.sr-res-player-hilfe[open])) .sr-res-player-sicht { padding-top: .5rem; } .sr-res-player.is-im-bild:is(:hover, :focus-within, :has(.sr-res-player-hilfe[open])) .sr-res-player-titel { padding-bottom: .5rem; } /* Aufgefahren: Maus darüber, Tastatur darin oder „?" offen. */ .sr-res-player.is-im-bild:is(:hover, :focus-within, :has(.sr-res-player-hilfe[open])) .sr-res-player-glas { padding: .7rem .9rem; gap: 1.1rem; } .sr-res-player.is-im-bild:is(:hover, :focus-within, :has(.sr-res-player-hilfe[open])) .sr-res-player-spiel { width: 50px; height: 50px; margin: 0 .3rem; font-size: 1.15rem; } .sr-res-player.is-im-bild:is(:hover, :focus-within, :has(.sr-res-player-hilfe[open])) .sr-res-player-runde b { font-size: 1.4rem; } .sr-res-player.is-im-bild:is(:hover, :focus-within, :has(.sr-res-player-hilfe[open])) .sr-res-player-extra { max-width: 16rem; opacity: 1; overflow: visible; pointer-events: auto; } .sr-res-player.is-im-bild:is(:hover, :focus-within, :has(.sr-res-player-hilfe[open])) .sr-res-player-klappe { grid-template-rows: 1fr; opacity: 1; } .sr-res-player.is-im-bild .sr-res-player-hilfe p { top: auto; bottom: calc(100% + .4rem); } /* Hinweis „?" (08.10.2026): runder Knopf, klappt eine kleine Karte unter dem Bedienfeld auf. */ .sr-res-player-hilfe { position: static; } .sr-res-player-hilfe summary { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; list-style: none; background: rgba(255, 255, 255, .18); color: #fff; font: 800 .85rem/1 var(--font-body); } .sr-res-player-hilfe summary::-webkit-details-marker { display: none; } .sr-res-player-hilfe[open] summary { background: #fff; color: #14171c; } .sr-res-player-hilfe p { position: absolute; right: .5rem; top: calc(100% + .4rem); z-index: 130; max-width: 22rem; margin: 0; padding: .7rem .85rem; border-radius: 10px; background: #fff; color: var(--sr-ink-2); font: 500 .78rem/1.45 var(--font-body); box-shadow: 0 10px 24px -10px rgba(20, 22, 26, .45); } .sr-res-player-hilfe p b { display: block; margin-bottom: .25rem; color: var(--sr-ink); font-weight: 800; } @media (max-width: 640px) { .sr-res-player:not(.is-im-bild) .sr-res-player-glas { justify-content: center; padding: .65rem .7rem; } .sr-res-player:not(.is-im-bild) .sr-res-player-mitte { order: 9; flex-basis: 100%; } .sr-res-player:not(.is-im-bild) .sr-res-player-rechts { flex-basis: 100%; min-width: 0; } .sr-res-player-rechts .sr-res-player-tempo { flex: 1; min-width: 0; } .sr-res-player-rechts .sr-res-player-tempo button { flex: 1; padding-inline: .3rem; } /* Am Telefon ist das Bild zu niedrig für das aufgefahrene Feld: es steht unter dem Bild, immer ganz offen. */ .sr-res-player.is-im-bild { position: relative; left: auto; right: auto; bottom: auto; margin-top: .5rem; color: var(--sr-ink); } .sr-res-player.is-im-bild .sr-res-player-glas { flex-wrap: wrap; justify-content: center; padding: .65rem .7rem; background: #14171c; color: #fff; } .sr-res-player.is-im-bild .sr-res-player-mitte { order: 9; flex-basis: 100%; } .sr-res-player.is-im-bild .sr-res-player-extra { max-width: none; opacity: 1; overflow: visible; pointer-events: auto; } .sr-res-player.is-im-bild .sr-res-player-rechts { flex-basis: 100%; min-width: 0; } .sr-res-player.is-im-bild .sr-res-player-klappe { grid-template-rows: 1fr; opacity: 1; } .sr-res-player.is-im-bild .sr-res-player-titel, .sr-res-player.is-im-bild .sr-res-player-sicht button:not(.is-on) { color: var(--sr-ink); text-shadow: none; } .sr-res-player.is-im-bild .sr-res-player-sicht button.is-on { background: #14171c; color: #fff; } .sr-res-player.is-im-bild .sr-res-player-hilfe p { top: calc(100% + .4rem); bottom: auto; } } /* Das Streckenband (08.10.2026): ein Strahl, der mit der Spitze mitfährt; Maßstab 1 Kreis = 0,1 s. */ .sr-res-baender { margin: .2rem 0 .9rem; } .sr-res-band-bahn { position: relative; height: 44px; margin: 0 4px; overflow: hidden; background: linear-gradient(var(--sr-line-2, #c9cdd3), var(--sr-line-2, #c9cdd3)) 0 50% / 100% 2px no-repeat; } .sr-res-band-start, .sr-res-band-ziel { position: absolute; top: 6px; bottom: 6px; width: 2px; margin-left: -1px; background: var(--sr-ink-3); } .sr-res-band-ziel { width: 6px; margin-left: -3px; background: repeating-conic-gradient(#14171c 0 25%, #fff 0 50%) 0 0 / 6px 6px; } .sr-res-band-punkt.is-hinten { opacity: .55; } /* Die Strecke (08.10.2026): schwarz auf Weiß, Punkte darüber; Höhe höchstens 300 px. */ .sr-res-strecke { position: relative; width: 100%; margin: .4rem auto 1rem; } .sr-res-strecke svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .sr-res-strecke.is-foto { border-radius: 12px; overflow: hidden; } .sr-res-strecke-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; } .sr-res-strecke.is-foto .sr-res-strecke-ziel { stroke-width: 6; } .sr-res-strecke-bahn { fill: none; stroke: #14171c; stroke-width: 34; stroke-linejoin: round; stroke-linecap: round; } .sr-res-strecke-mitte { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 10 14; opacity: .55; } .sr-res-strecke-ziel { stroke: #fff; stroke-width: 9; stroke-dasharray: 4.5 4.5; } .sr-res-strecke-punkte { position: absolute; inset: 0; height: auto; margin: 0; background: none; overflow: visible; } .sr-res-strecke-punkte::before, .sr-res-strecke-punkte::after { content: none; } /* Auf der Strecke setzt die Rennuhr jede Lage selbst; ein Übergang auf left/top zöge die Punkte quer übers Feld (Befund Sven 08.10.2026: „die punkte springen wild umher und fahren nicht auf der strecke"). */ .sr-res-strecke-punkte .sr-res-band-punkt { top: 0; transition: opacity .4s; } /* Doppelt aufgelöst (31.10.2026): 48 px im Dokument, das Skript zeigt sie mit scale(.5) — sichtbar bleiben es 24 px. Bis das Skript so weit ist, unsichtbar, damit niemand die großen Kreise sieht. */ .sr-res-strecke-punkte .sr-res-band-punkt { width: 48px; height: 48px; margin: -24px 0 0 -24px; font-size: 1.44rem; border-width: 4px; box-shadow: 0 2px 8px rgba(20, 22, 26, .35); text-shadow: 0 0 4px rgba(0, 0, 0, .55), 0 2px 2px rgba(0, 0, 0, .35); } .sr-res-strecke-punkte:not(.ist-bereit) .sr-res-band-punkt { visibility: hidden; } /* Beim Abspielen ohne Glas-Unschärfe am Bedienfeld (31.10.2026): über der bewegten Strecke kostete sie Bilder. */ .is-laeuft .sr-res-player-glas { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(28, 31, 37, .7); } /* Ausgeschiedene neben der Strecke: kleiner Kasten oben links, grauer Kreis mit Nummer, Grund und Runde. */ .sr-res-strecke-aus { position: absolute; left: .4rem; top: .4rem; z-index: 120; display: flex; flex-direction: column; gap: .25rem; padding: .4rem .5rem; border-radius: 10px; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 12px -6px rgba(20, 22, 26, .4); } .sr-res-strecke-aus b { font: 800 .58rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--sr-ink-3); } .sr-res-strecke-aus span[data-sr-strecke-aus-liste] { display: flex; flex-direction: column; gap: .2rem; } .sr-res-strecke-aus i { display: flex; align-items: center; gap: .35rem; font: normal 700 .66rem/1 var(--font-body); color: var(--sr-ink-2); } .sr-res-strecke-aus em { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #b8bcc3; color: #fff; font: normal 900 .6rem/1 var(--font-body); font-variant-numeric: tabular-nums; } .sr-res-strecke-quelle { position: absolute; right: 0; bottom: -1.1rem; font-size: .6rem; color: var(--sr-ink-3); } /* Im Kreis die Startnummer (Ansage Sven 08.10.2026: „zeige die startnummer in dem kreis"). */ .sr-res-band-punkt { position: absolute; left: 0; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 900 .72rem/1 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-shadow: 0 0 2px rgba(0, 0, 0, .55), 0 1px 1px rgba(0, 0, 0, .35); white-space: nowrap; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; background: var(--farbe); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(20, 22, 26, .35); transition: transform .9s cubic-bezier(.4, 0, .2, 1), opacity .4s; will-change: transform; backface-visibility: hidden; } .sr-res-band-punkt.is-raus { background: #b8bcc3; opacity: .7; } .sr-res-band-punkt.is-weg { opacity: 0; } /* Fremde Klasse (Sicht „Klasse"): fährt blass mit, ohne Nummer — sie ist auf der Strecke, aber nicht in der Wertung. */ .sr-res-band-punkt.is-blass { opacity: .3; color: transparent; text-shadow: none; transform-origin: center; } .sr-res-turm li.is-fremd { display: none; } /* Beim Abspielen fährt die Rennuhr die Punkte selbst — keine Übergänge, sonst hinken sie hinterher. */ .sr-res-baender.is-laeuft .sr-res-band-punkt { transition: opacity .4s; } /* Einbruch (Ansage Sven 08.10.2026: „ein kreis, der sehr schnell weit zurückfällt, soll in seiner border rot blinken"): solange der Fahrer die deutlich zu langsame Runde fährt. */ .sr-res-band-punkt.is-einbruch { animation: sr-band-einbruch .5s steps(1, end) infinite; } @keyframes sr-band-einbruch { 0% { border-color: var(--sr-red); box-shadow: 0 0 0 2px var(--sr-red), 0 1px 4px rgba(20, 22, 26, .35); } 50% { border-color: #fff; box-shadow: 0 1px 4px rgba(20, 22, 26, .35); } } .sr-res-replay + h3 { margin-top: 1.6rem; } @media (prefers-reduced-motion: reduce) { .sr-res-band-punkt { transition: none; } .sr-res-band-punkt.is-einbruch { animation: none; border-color: var(--sr-red); } .sr-res-player-runde.is-blitz b { animation: none; } } .sr-res-turm { position: relative; list-style: none; margin: 0; padding: 0; overflow-x: auto; } .sr-res-turm li { position: absolute; left: 0; right: 0; height: 32px; display: grid; grid-template-columns: 3rem 1rem minmax(8rem, 1.4fr) 5rem 5.5rem minmax(4rem, 1fr); gap: .4rem; align-items: center; font-size: .84rem; font-variant-numeric: tabular-nums; transition: top .5s ease; min-width: 32rem; } .sr-res-turm li b { font-weight: 800; } .sr-res-turm li i { font-style: normal; font-size: .7rem; } .sr-res-turm li i.hoch { color: #16a34a; } .sr-res-turm li i.runter { color: var(--sr-red); } .sr-res-turm-name { display: flex; align-items: center; gap: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-res-turm-name em { width: .55rem; height: .55rem; border-radius: 50%; flex: none; } .sr-res-turm-name em.sr-res-turm-nr { width: 24px; height: 24px; display: grid; place-items: center; background: var(--farbe); color: #fff; font: normal 900 .68rem/1 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); } .sr-res-turm-balken { height: .45rem; background: var(--sr-line); border-radius: 999px; overflow: hidden; } .sr-res-turm-balken span { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; } .sr-res-turm li.is-zurueck { opacity: .55; } .sr-res-turm li.is-aus { opacity: .4; } @media (prefers-reduced-motion: reduce) { .sr-res-turm li, .sr-res-turm-balken span { transition: none; } } @media (max-width: 600px) { .sr-res-turm li { grid-template-columns: 2.4rem .7rem minmax(0, 1fr) 4.4rem 4.2rem; min-width: 0; font-size: .76rem; gap: .25rem; } .sr-res-turm-balken { display: none; } } /* Übersicht: die Top-3-Felder sind der Klassenschalter, darunter die gewählte Klasse (Bildvorlage Sven 06.10.2026). */ /* Die Köpfe der Top-3-Felder heben sich als dunkles Band ab, das gewählte als rotes (Ansage Sven 06.10.2026). */ /* Die rote Marke gleitet zum angeklickten Feld, wie beim Serienumschalter (Ansage Sven 06.10.2026). In Ruhe ist einfach das gewählte Band rot — gemessen wird nichts, also sitzt nichts daneben (beim Laden schaute sonst ein dunkler Rand hervor). Das rote Stück erscheint nur für die Fahrt: im Moment des Klicks über dem alten Band gemessen, gleitet es zum neuen, dann übernimmt das Band. */ /* Zwei Spalten ab Seitenanfang (Ansage Sven 07.10.2026, nach Bild): links Titel, Leiste, Wertung; rechts Event-Karte, schnellste Runden, letzte Sieger — breiter als zuvor, die Event-Karte braucht Platz. */ .sr-res-klasse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); gap: 1.2rem; margin: 0 0 .4rem; align-items: start; } .sr-res-links { min-width: 0; } .sr-res-links > .sr-res-auswahl { margin-bottom: 1.1rem; } /* Die Oberkante der Event-Karte schließt mit der Oberkante von „Ergebnisse" ab (Ansage Sven 07.10.2026): Polster des Kopfs plus die Zeile „Supermoto & Mini · 2026" darüber. */ .sr-res-klasse-rechts { padding-top: var(--sr-res-titel-oben, 2.45rem); } .sr-res-klasse-rechts { display: grid; gap: 1rem; } /* Klassenwechsel ohne Seitenwechsel: aus- und einblenden (Ansage Sven 06.10.2026). */ .sr-res-bereich { transition: opacity .2s ease; scroll-margin-top: 6rem; } .sr-res-bereich.is-weg { opacity: 0; } /* Event- und Sessionwechsel tauschen nur die drei Karten (#res-inhalt): sie blenden schnell aus und einzeln nacheinander wieder ein — Wertung, schnellste Runden, letzte Sieger (Ansage Sven 07.10.2026). */ .sr-res-links > .sr-res-karte, .sr-res-klasse-rechts > * { transition: opacity .4s ease; } .sr-res-klasse-rechts > :nth-child(1) { transition-delay: .1s; } .sr-res-klasse-rechts > :nth-child(2) { transition-delay: .2s; } .sr-res-klasse-rechts > :nth-child(3) { transition-delay: .3s; } .sr-res-klasse.is-weg .sr-res-links > .sr-res-karte, .sr-res-klasse.is-weg .sr-res-klasse-rechts > * { opacity: 0; transition-duration: .15s; transition-delay: 0s; } /* Replay-Knopf (#211, Ansage Sven 08.10.2026): nur der Laufbereich (Wertung bzw. Nachspielen) blendet über. */ #res-lauf { transition: opacity .35s ease; } #res-lauf.is-weg { opacity: 0; transition-duration: .15s; } @media (prefers-reduced-motion: reduce) { .sr-res-links > .sr-res-karte, .sr-res-klasse-rechts > *, #res-lauf { transition: none; } } /* Die Event-Karte (Ansage Sven 07.10.2026): oben das Hero-Plakat der Eventdetails unverändert, darunter ein dunkler Streifen mit Event-Nummer, Zeitraum, Serie/Klasse und dem Weg zur Eventseite. */ .sr-res-klasse-rechts > .sr-res-held { overflow: hidden; padding: 0; border: 0; border-radius: 12px; color: #fff; background: #14171c; box-shadow: 0 10px 24px -10px rgba(20, 22, 26, .55); } .sr-res-held { container-type: inline-size; } /* Fest 336:119 — genau das Seitenverhältnis der Zuschnitte, der Browser schneidet also nichts (Ansage Sven 07.10.2026). */ .sr-res-held-rahmen { position: relative; aspect-ratio: 336 / 119; overflow: hidden; } .sr-res-held-bild { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; } .sr-res-held-text { display: flex; flex-direction: column; gap: .55rem; padding: .7rem 1rem .8rem; } /* Der dunkle Streifen laeuft nach oben ins Plakat aus statt mit harter Kante (Ansage Sven 08.10.2026: „das schwarz, auf dem der text steht nach oben ausfaden"). Er rueckt dafuer 2,4 rem ueber das Bild; der Text bleibt, wo er war. */ .sr-res-held-rahmen + .sr-res-held-text { position: relative; margin-top: -2.4rem; padding-top: calc(.7rem + 2.4rem); background: linear-gradient(to top, #14171c 0, #14171c calc(100% - 2.4rem), rgba(20, 23, 28, 0) 100%); } .sr-res-held-oben { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; font: 800 .66rem/1.35 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .65); } .sr-res-held-oben .sr-res-held-zeit { letter-spacing: 0; text-transform: none; color: #fff; font: 700 .85rem/1.2 var(--font-body); } .sr-res-held-ort { display: flex; align-items: center; gap: .6rem; margin: 0; color: #fff; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; } .sr-res-held-ort img { width: 1.6rem; height: auto; border-radius: 2px; } .sr-res-held-platz { margin: 0; font: 600 .8rem/1.35 var(--font-body); color: rgba(255, 255, 255, .8); } .sr-res-held-zeit { display: flex; align-items: center; gap: .5rem; margin: 0; font: 700 .95rem/1.2 var(--font-body); } .sr-res-held-zeit svg { width: 1.05rem; height: 1.05rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Serienwechsel: ausgeblendet wird der INHALT der Karte, nicht die Karte selbst — sie trägt die Einblend-Animation der Seite (sr-fade-in, fill-mode both), und die hält ihre Deckkraft fest und überstimmt jeden Übergang. Dauer wie beim Klassenwechsel. */ #resultater.sr-res > * { transition: opacity .2s ease; } #resultater.sr-res.is-weg > * { opacity: 0; } @media (prefers-reduced-motion: reduce) { #resultater.sr-res > * { transition: none; } } @media (prefers-reduced-motion: reduce) { .sr-res-bereich { transition: none; } } /* Innenabstand knapp (Ansage Sven 07.10.2026: „das innere padding der wertung und der rechten spalte kann geringer ausfallen") — der Platz geht an die Wertungstabelle. Die Kopfbänder rechnen mit denselben Größen. */ .sr-res-karte { --sr-res-pad-y: .6rem; --sr-res-pad-x: .6rem; background: #fff; border: 1px solid var(--sr-line); border-radius: 12px; padding: var(--sr-res-pad-y) var(--sr-res-pad-x); box-shadow: 0 1px 3px rgb(0 0 0 / .04); min-width: 0; } .sr-res-karte .sr-res-scroll { border: 0; border-radius: 0; } .sr-res-karte-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .6rem 1rem; margin-bottom: .6rem; } .sr-res-karte-kopf .sr-strecke-eyebrow { margin: 0; } .sr-res-karte-kopf h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1; } .sr-res-karte-kopf.klein { align-items: center; } /* Kopf der Gesamtwertung als dunkles Band mit Bild (Ansage Sven 06.10.2026; Vorlage design/0917-2/miniheader_bg.png, verkleinert auf 1200 px): randlos bis an die Kartenkanten, Schrift darauf weiß. */ .sr-res-wertung > .sr-res-karte-kopf { margin: calc(-1 * var(--sr-res-pad-y)) calc(-1 * var(--sr-res-pad-x)) .7rem; padding: 1.1rem 1.1rem 1rem; align-items: center; border-radius: 11px 11px 0 0; color: #fff; background: #14171c url('https://www.zenergyracing.dk/v2/public/images/resultater-kopf.webp?v=1791304839') center 40% / cover no-repeat; /* Schatten nach unten (Ansage Sven 06.10.2026): das Band liegt über der Tabelle. */ position: relative; z-index: 1; box-shadow: 0 8px 16px -6px rgba(20, 22, 26, .45); } /* „Schnellste Runden" und „Letzte Rennsieger" als schwarzes Band, mit demselben Schatten wie der Kopf der Gesamtwertung (Ansagen Sven 06.10.2026). */ .sr-res-klasse-rechts .sr-res-karte > .sr-res-karte-kopf { margin: calc(-1 * var(--sr-res-pad-y)) calc(-1 * var(--sr-res-pad-x)) .6rem; padding: .85rem 1rem; align-items: center; border-radius: 11px 11px 0 0; color: #fff; /* Feste Höhe, das Motiv sitzt rechts. Kein festes Seitenverhältnis: zusammen mit der Mindesthöhe drückte es den Kopf breiter als das Panel (Befund Sven 06.10.2026). */ min-height: 2.8rem; box-sizing: border-box; overflow: hidden; background: #0b0c0e right center / cover no-repeat; position: relative; z-index: 1; box-shadow: 0 8px 16px -6px rgba(20, 22, 26, .45); } .sr-res-klasse-rechts .sr-res-karte > .sr-res-karte-kopf h3 { color: #fff; } /* Punkte aufsummiert (Ansage Sven 11.10.2026): die Gestaltung der Diagramme aus „Meine Statistiken". */ .sr-res-karte.is-punkte .sd { display: block; width: 100%; height: auto; } .sr-res-karte.is-punkte .sd-gitter { stroke: #eceef1; stroke-width: 1; } .sr-res-karte.is-punkte .sd-achse { font-size: 10px; fill: #8a8f97; } .sr-res-karte.is-punkte .sd-linie { fill: none; stroke-width: 2.2; stroke-linejoin: round; } .sr-res-karte.is-punkte .sd-punkt { stroke: #fff; stroke-width: 1; } .sr-res-karte.is-punkte .sd-rest { stroke: #c9ccd2; stroke-width: 1.2; } .sr-res-karte.is-punkte circle.sd-rest { fill: #c9ccd2; r: 1.6px; stroke: none; } .sr-res-karte.is-punkte polyline.sd-rest:hover { stroke: #14171c; stroke-width: 2.2; } .sr-res-karte.is-punkte .sd-farbe-0 { stroke: var(--accent, #da1f25); } .sr-res-karte.is-punkte circle.sd-farbe-0, .sr-res-pv-legende i.sd-farbe-0 { fill: var(--accent, #da1f25); background: var(--accent, #da1f25); } .sr-res-karte.is-punkte .sd-farbe-1 { stroke: #2f6fdb; } .sr-res-karte.is-punkte circle.sd-farbe-1, .sr-res-pv-legende i.sd-farbe-1 { fill: #2f6fdb; background: #2f6fdb; } .sr-res-karte.is-punkte .sd-farbe-2 { stroke: #1f9d6b; } .sr-res-karte.is-punkte circle.sd-farbe-2, .sr-res-pv-legende i.sd-farbe-2 { fill: #1f9d6b; background: #1f9d6b; } .sr-res-karte.is-punkte .sd-farbe-3 { stroke: #c9991a; } .sr-res-karte.is-punkte circle.sd-farbe-3, .sr-res-pv-legende i.sd-farbe-3 { fill: #c9991a; background: #c9991a; } .sr-res-karte.is-punkte .sd-farbe-4 { stroke: #6b7079; } .sr-res-karte.is-punkte circle.sd-farbe-4, .sr-res-pv-legende i.sd-farbe-4 { fill: #6b7079; background: #6b7079; } .sr-res-pv-legende { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin: 0 0 .3rem; font-size: .78rem; color: #4a4f57; } .sr-res-pv-legende i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .3rem; } .sr-res-klasse-rechts > :nth-child(4) { transition-delay: .4s; } /* Klick auf die Karte öffnet alle Fahrer bunt (Ansage Sven 11.10.2026). */ .sr-res-pv-auf { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: zoom-in; } .sr-res-pv-hinweis { display: block; margin-top: .2rem; font-size: .72rem; color: #8a8f97; text-align: right; } .sr-res-pv-auf:hover .sr-res-pv-hinweis { color: #14171c; text-decoration: underline; } .sr-res-pv-fenster { width: min(1100px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: 14px; background: #fff; color: #14171c; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 28px 6px rgba(255, 255, 255, .45), 0 0 80px 18px rgba(255, 255, 255, .18), 0 24px 60px rgba(11, 13, 16, .35); overflow: auto; } .sr-res-pv-fenster::backdrop { background: rgba(11, 13, 16, .6); backdrop-filter: blur(3px); } .sr-res-pv-fenster-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.1rem; color: #fff; background: #14171c; position: sticky; top: 0; z-index: 1; } .sr-res-pv-fenster-kopf h3 { margin: .1rem 0 0; font: 900 clamp(1.2rem, 2.4vw, 1.7rem)/1 var(--font-display, var(--font-body)); text-transform: uppercase; color: #fff; } .sr-res-pv-fenster-kopf .sr-strecke-eyebrow { margin: 0; color: rgba(255,255,255,.7); } .sr-res-pv-zu { flex: none; display: inline-flex; width: 2.2rem; height: 2.2rem; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; background: none; color: #fff; cursor: pointer; } .sr-res-pv-zu:hover { background: rgba(255,255,255,.12); } .sr-res-pv-zu svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .sr-res-pv-fenster .sr-res-karte.is-bunt { border: 0; box-shadow: none; padding: .8rem 1rem 0; } /* Farbe kommt als Attribut je Fahrer; darum hier keine Füllung der Punkte überschreiben — nur die Linie bleibt hohl. */ .sr-res-karte.is-bunt polyline.sd-bunt { fill: none; stroke-width: 1.8; stroke-linejoin: round; } .sr-res-karte.is-bunt .sd-bunt { transition: opacity .15s; } /* Zeigt man auf eine Linie, treten die anderen zurück. */ .sr-res-karte.is-bunt .sd:has(polyline:hover) polyline:not(:hover), .sr-res-karte.is-bunt .sd:has(polyline:hover) circle { opacity: .18; } .sr-res-karte.is-bunt polyline.sd-bunt:hover { stroke-width: 3.2; } .sr-res-pv-alle { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .25rem 1.2rem; margin: 0; padding: .6rem 1.1rem 1.1rem; list-style: none; counter-reset: pv; font-size: .8rem; } .sr-res-pv-alle li { display: flex; align-items: center; gap: .45rem; counter-increment: pv; } .sr-res-pv-alle li::before { content: counter(pv) "."; width: 1.6rem; color: #8a8f97; text-align: right; font-variant-numeric: tabular-nums; } .sr-res-pv-alle svg { flex: none; width: 10px; height: 10px; } .sr-res-pv-alle span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-res-pv-alle b { font-variant-numeric: tabular-nums; } /* Schalter Punkte / Gesamtplatzierung (Ansage Sven 11.10.2026): klein, im dunklen Kopf von Karte und Fenster. */ [data-pv="punkte"] .pv-nur-platz, [data-pv="platz"] .pv-nur-punkte { display: none; } .sr-res-pv-auf .pv-nur-punkte, .sr-res-pv-auf .pv-nur-platz { display: block; } [data-pv="punkte"] .sr-res-pv-auf .pv-nur-platz, [data-pv="platz"] .sr-res-pv-auf .pv-nur-punkte { display: none; } .sr-res-pv-schalter { display: inline-flex; flex: none; padding: 2px; border: 1px solid rgba(255,255,255,.28); border-radius: 99px; background: rgba(255,255,255,.06); position: relative; z-index: 1; } .sr-res-pv-schalter button { padding: .28rem .65rem; border: 0; border-radius: 99px; background: none; color: rgba(255,255,255,.75); font: 700 .64rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } .sr-res-pv-schalter button:hover { color: #fff; } .sr-res-pv-schalter button[aria-pressed="true"] { background: #fff; color: #14171c; } .sr-res-pv-fenster-kopf > div:first-child { margin-right: auto; } /* Je Karte ihr Motiv (Ansage Sven 06.10.2026; Vorlagen design/0917-2/miniheader_sidebg01.png und …02.png, Rand oben/unten abgeschnitten, 1000 px breit): Stoppuhr für die Runden, Siegerpodest für die Sieger. */ .sr-res-klasse-rechts .sr-res-karte.is-runden > .sr-res-karte-kopf { background-image: url('https://www.zenergyracing.dk/v2/public/images/resultater-kopf-runden.webp?v=1791306196'); } .sr-res-klasse-rechts .sr-res-karte.is-sieger > .sr-res-karte-kopf { background-image: url('https://www.zenergyracing.dk/v2/public/images/resultater-kopf-sieger.webp?v=1791306196'); } /* Der Verweis liegt auf dem Motiv — darum auf einer dunklen Pille. */ .sr-res-klasse-rechts .sr-res-karte > .sr-res-karte-kopf a { color: #fff; padding: .3rem .6rem; border-radius: 999px; background: rgba(11, 12, 14, .72); backdrop-filter: blur(4px); } .sr-res-klasse-rechts .sr-res-karte > .sr-res-karte-kopf a:hover { background: var(--sr-red); } /* Schlichter weißer Kopf statt schwarzem Band mit Motiv (Ansage Sven 08.11.2026: „ergebniss-seite: die rechten kacheln mit einfachem weisen header“): kein Bild, kein Schatten, dunkle Schrift, feine Linie darunter. Der Schalter Punkte/Platz und der Verweis im Kopf passen sich an. */ .sr-res-klasse-rechts .sr-res-karte > .sr-res-karte-kopf, .sr-res-klasse-rechts .sr-res-karte.is-runden > .sr-res-karte-kopf, .sr-res-klasse-rechts .sr-res-karte.is-sieger > .sr-res-karte-kopf { background: #fff; background-image: none; color: var(--sr-ink); box-shadow: none; border-bottom: 0; /* keine Linie zum Inhalt (Ansage Sven 08.11.2026) */ } /* Mit unserem Glow-Grund (Ansage Sven 08.11.2026: „die weissen header bei den ergebnissen mit unserem glow background versehen“): derselbe helle Grund mit roten Lichtflecken wie der aufgeklappte Fahrer im Warenkorb und die Seitenleiste im Backend. */ .sr-res-klasse-rechts .sr-res-karte > .sr-res-karte-kopf, .sr-res-klasse-rechts .sr-res-karte.is-runden > .sr-res-karte-kopf, .sr-res-klasse-rechts .sr-res-karte.is-sieger > .sr-res-karte-kopf { /* Nur ein roter Lichtfleck, ganz dezent, links oben zur Ecke hin (Ansage Sven 08.11.2026: „ne nur 1 roten kreis glow, ganz dezent“ · „aber links“ · „und mehr oben orientiert zur ecke“). */ background: radial-gradient(45% 140% at 8% 0%, rgba(229, 46, 46, .10), transparent 70%), #fff; } .sr-res-klasse-rechts .sr-res-karte > .sr-res-karte-kopf h3 { color: var(--sr-ink); } .sr-res-klasse-rechts .sr-res-karte > .sr-res-karte-kopf a { color: var(--sr-red); background: none; backdrop-filter: none; padding: 0; } .sr-res-klasse-rechts .sr-res-karte > .sr-res-karte-kopf a:hover { background: none; text-decoration: underline; } .sr-res-klasse-rechts .sr-res-karte-kopf .sr-res-pv-schalter { border-color: var(--sr-line); background: var(--sr-ground-2); } .sr-res-klasse-rechts .sr-res-karte-kopf .sr-res-pv-schalter button { color: var(--sr-ink-2); } .sr-res-klasse-rechts .sr-res-karte-kopf .sr-res-pv-schalter button:hover { color: var(--sr-ink); } .sr-res-klasse-rechts .sr-res-karte-kopf .sr-res-pv-schalter button[aria-pressed="true"] { background: var(--sr-dark); color: #fff; } /* Die Tabelle darunter mit runden Ecken und eigenem Rahmen (Ansage Sven 06.10.2026). */ .sr-res-wertung .sr-res-scroll { border: 1px solid var(--sr-line); border-radius: 10px; } .sr-res-wertung > .sr-res-karte-kopf .sr-strecke-eyebrow { color: rgba(255, 255, 255, .8); } .sr-res-wertung > .sr-res-karte-kopf h2 { color: #fff; } .sr-res-wertung > .sr-res-karte-kopf { justify-content: flex-start; } /* Das Logo ganz rechts im Kopf (Ansage Sven 07.10.2026). */ .sr-res-wertung > .sr-res-karte-kopf > .sr-res-wertung-logo { order: 2; flex: none; width: auto; height: 3.1rem; margin: -.2rem 0 -.2rem auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); } .sr-res-karte-kopf.klein h3 { margin: 0; font: 900 .8rem/1.2 var(--font-body); letter-spacing: .04em; text-transform: uppercase; } .sr-res-karte-kopf.klein a { font: 700 .8rem/1 var(--font-body); color: var(--sr-red); text-decoration: none; white-space: nowrap; } /* Wochenende und Reiter unter den Top 3 (Ansage Sven 06.10.2026): links die Wahl, rechts die Reiter. */ /* Session-Auswahl im Kopf der Wochenendwertung (Ansage Sven 06.10.2026): auf dem Bildband, rechts. */ /* Die Saisonreise der Ergebnisse (Ansage Sven 06.10.2026): Gestaltung der Profil-Reise, nur der Pokal als Bild der Gesamtwertung und gepunktete Felder für die offenen Wochenenden. Volle Breite der Leiste. */ /* Halb so große Kacheln wie im Profil (Ansage Sven 06.10.2026) — die ganze Saison passt in eine Reihe. */ /* Über die ganze Breite (Ansage Sven 06.10.2026): die Stationen teilen sich die Zeile, die Kacheln bleiben klein (4,75rem) und links in ihrer Station; die Striche laufen ZWISCHEN den Kacheln auf halber Bildhöhe und füllen den Rest — die Punktreihe darunter entfällt. --n (Zahl der Stationen) setzt der Baustein; unter 6,8rem je Station rollt die Reihe. */ /* Auf jedem Strich ein Punkt mit Pfeil nach rechts (Ansage Sven 06.10.2026) — die Richtung der Saison. */ /* Statt des Pfeils die Zielflagge im Punkt (Ansage Sven 06.10.2026); das Flaggenzeichen über den Kacheln entfällt dafür. */ /* „Gewählt" links auf der Kante — mittig saß es auf dem Flaggenzeichen (Befund Sven 06.10.2026). */ /* Die Gesamtwertung: goldener Pokal mit Schein auf dem roten Band aus dem Kopf der Gesamtwertung. */ .sr-res-session .sr-res-lauf-kopf h2 { font-size: .95rem; } .sr-res-wertung-tab td, .sr-res-wertung-tab th { padding: .5rem .42rem; } /* Startnummer nur so breit wie nötig (Ansage Sven 06.10.2026) — den Platz bekommt der Name. */ .sr-res-wertung-tab th.nr, .sr-res-wertung-tab td.nr { width: 1%; white-space: nowrap; } .sr-res-wertung-tab td.nr { font-size: .72rem; color: var(--sr-ink-2); } .sr-res-wertung-tab tr.sr-res-erster td { background: var(--sr-ground, #f6f6f4); font-weight: 700; } .sr-res-wertung-tab tr.sr-res-erster td.z, .sr-res-wertung-tab tr.sr-res-erster td.sr-res-fett { color: var(--sr-red); } /* Auf/Ab und Spaltentitel klein (Ansage Sven 06.10.2026) — der Platz geht an die rechte Spalte. */ .sr-res-tab td.sr-res-delta { width: 1.7rem; padding-left: 0; padding-right: .15rem; text-align: left; font-size: .56rem; font-weight: 700; letter-spacing: -.02em; } .sr-res-wertung-tab th { font-size: .58rem; letter-spacing: .03em; } .sr-res-delta .hoch { color: #16a34a; } .sr-res-delta .runter { color: var(--sr-red); } .sr-res-alle-schalter { position: absolute; opacity: 0; pointer-events: none; } .sr-res-wertung .sr-res-rest { display: none; } .sr-res-alle-schalter:checked ~ .sr-res-scroll .sr-res-rest { display: table-row-group; } .sr-res-mehr { display: inline-flex; margin-top: .7rem; font: 700 .85rem/1 var(--font-body); color: var(--sr-red); cursor: pointer; } .sr-res-mehr span { display: inline-flex; align-items: center; gap: .3rem; } .sr-res-mehr svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .sr-res-mehr span.sr-res-mehr-auf, .sr-res-alle-schalter:checked ~ .sr-res-mehr span.sr-res-mehr-zu { display: none; } .sr-res-alle-schalter:checked ~ .sr-res-mehr span.sr-res-mehr-auf { display: inline-flex; } .sr-res-alle-schalter:focus-visible ~ .sr-res-mehr { outline: 2px solid var(--sr-red); outline-offset: 3px; border-radius: 4px; } .sr-res-mini { font-size: .82rem; } .sr-res-mini th, .sr-res-mini td { padding: .38rem .4rem; } .sr-res-mini th { background: transparent; } @media (max-width: 1080px) { .sr-res-klasse { grid-template-columns: 1fr; } .sr-res-klasse-rechts { padding-top: 0; } } /* Gesamtübersicht (#149, Etappe 4) */ a.sr-res-jahr { display: flex; flex-direction: column; gap: .3rem; color: inherit; text-decoration: none; } a.sr-res-jahr strong { font-size: 1.4rem; } a.sr-res-jahr span { font-size: .82rem; color: var(--sr-ink-2); } a.sr-res-jahr:hover { border-color: var(--sr-red); } /* ═══ Alle Saisons nach Bildvorlage (Ansage Sven 08.11.2026: „setze das so um ohne das bild unten rechts“) ═══ Weiße Kennzahlen mit farbigem Zeichen im Kreis und rotem Strich unter der Zahl; zwei Spalten mit Kacheln. */ .sr-ra { margin-top: 1rem; } .sr-ra-zahlen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1rem; } .sr-ra-zahlen > div { --z: #da1f25; display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; padding: .8rem .5rem .75rem; border: 1px solid #e8eaee; border-radius: 12px; background: #fff; text-align: center; box-shadow: 0 1px 2px rgba(20, 22, 26, .04), 0 10px 22px -16px rgba(20, 22, 26, .35); } .sr-ra-zahlen i { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: color-mix(in srgb, var(--z) 13%, #fff); color: var(--z); margin-bottom: .1rem; } .sr-ra-zahlen dt { position: relative; padding-bottom: .3rem; font: italic 900 clamp(1.15rem, 1.9vw, 1.6rem)/1 var(--font-display, var(--font-body)); color: var(--sr-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .sr-ra-zahlen dt::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 70%; height: 2px; border-radius: 2px; transform: translateX(-50%); background: var(--sr-red); } .sr-ra-zahlen dd { margin: .1rem 0 0; font: 700 .6rem/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--sr-ink); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-ra-zahlen [data-z="wochenenden"] { --z: #2f6fdb; } .sr-ra-zahlen [data-z="fahrer"] { --z: #7b4bd1; } .sr-ra-zahlen [data-z="klassen"] { --z: #565c66; } .sr-ra-zahlen [data-z="minuten"] { --z: #1f9d6b; } .sr-ra-zahlen [data-z="runden"] { --z: #e46a1c; } .sr-ra-raster { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: 1rem; align-items: start; } .sr-ra-spalte { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .sr-ra-kachel { position: relative; min-width: 0; padding: 1rem 1.15rem 1.1rem; border: 1px solid #e8eaee; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(20, 22, 26, .04), 0 14px 30px -20px rgba(20, 22, 26, .35); } .sr-ra-kopf { display: flex; align-items: center; gap: .75rem; margin: 0 0 .9rem; } .sr-ra-kopf > i { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #eef0f3; color: var(--sr-ink); } .sr-ra-kopf > i.is-rot { background: #fde9e9; color: var(--sr-red); } .sr-ra-kopf > div { min-width: 0; flex: 1 1 auto; } .sr-ra-kopf h2, .sr-ra-hof-kopf h2 { margin: 0; font: italic 900 1.35rem/1 var(--font-display, var(--font-body)); text-transform: uppercase; letter-spacing: -.01em; color: var(--sr-ink); } .sr-ra-kopf p, .sr-ra-hof-kopf p { margin: .3rem 0 0; font-size: .74rem; line-height: 1.35; color: var(--sr-ink-2); } .sr-ra-plakette { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border-radius: 8px; background: linear-gradient(180deg, #e5262c, #b8161c); color: #fff; font: 800 .74rem/1 var(--font-body); white-space: nowrap; box-shadow: 0 6px 14px -8px rgba(184, 22, 28, .8); } /* Balken: hellgrau, die jüngste Saison rot; Zahl darüber, Jahr darunter. */ .sr-ra-balken { display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: .35rem; height: 10.5rem; align-items: end; } .sr-ra-balken a { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; color: inherit; text-decoration: none; } .sr-ra-balken b { margin-bottom: .25rem; font: 800 .74rem/1 var(--font-body); color: var(--sr-ink); font-variant-numeric: tabular-nums; } .sr-ra-balken i { display: block; width: 100%; max-width: 2.4rem; height: calc(var(--h) * .78); min-height: 4px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #c9cdd4, #aeb3bb); transition: transform .15s ease; } .sr-ra-balken span { margin-top: .35rem; font: 600 .62rem/1 var(--font-body); color: var(--sr-ink-3); white-space: nowrap; } .sr-ra-balken a:last-child b { color: var(--sr-red); } .sr-ra-balken a:last-child i { background: linear-gradient(180deg, #ef3b40, #c4161c); } .sr-ra-balken a:hover i { transform: translateY(-2px); background: linear-gradient(180deg, #8d939c, #6b7079); } .sr-ra-balken a:last-child:hover i { background: linear-gradient(180deg, #ef3b40, #c4161c); } /* Hall of Fame: Pokal in Gold, Top 3 mit Medaillen, rechts das Siegermotiv schräg angeschnitten. */ .sr-ra-hof { overflow: hidden; padding-right: 40%; display: flex; flex-direction: column; } /* Das Siegermotiv rechts, linke Kante schräg; der rote Strich liegt genau auf dieser Kante (Ansage Sven 08.11.2026: „der rote schräger passt nicht“) — gleiche Fläche, gleiche Schräge, nur 5 px breit. */ /* Kanten als gezeichnete Form statt clip-path, damit der Browser sie glättet (Ansage Sven 08.11.2026: „der schräger braucht antialiasing“): Maske für das Bild, Fläche für den Strich, beide auf die Kachelhöhe gestreckt. */ .sr-ra-hof-bild { position: absolute; top: 0; right: 0; bottom: 0; width: 38%; z-index: 0; pointer-events: none; /* Der Silberpokal vor der Zielflagge (Bild Sven 08.11.2026, design/0917-2/pokal.png). */ background: #e9eaee url('https://www.zenergyracing.dk/v2/public/images/hall-of-fame-pokal.webp?v=1794139533') 55% 30% / cover no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='30,0 100,0 100,100 0,100'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='30,0 100,0 100,100 0,100'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; } .sr-ra-hof-bild::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon fill='%23da1f25' points='29.6,0 33,0 3.4,100 -0.4,100'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; } .sr-ra-hof-kopf { display: flex; align-items: center; gap: .75rem; margin: 0 0 .8rem; } .sr-ra-hof-zeichen { flex: none; width: 4.4rem; height: auto; margin: -.3rem -.2rem -.3rem -.4rem; } .sr-ra-hof-kopf h2 { font-size: 1.55rem; } .sr-ra-hof-liste { list-style: none; margin: 0; padding: 0; position: relative; z-index: 2; } .sr-ra-hof-liste li { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--sr-line); } .sr-ra-hof-liste li:first-child { border-top: 0; } .sr-ra-hof-liste li > i { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #eef0f3; font: 800 .8rem/1 var(--font-body); font-style: normal; color: var(--sr-ink); } .sr-ra-hof-liste li.is-1 > i { background: #f6d77a; } .sr-ra-hof-liste li.is-2 > i { background: #dfe2e7; } .sr-ra-hof-liste li.is-3 > i { background: #efc4a1; } .sr-ra-hof-liste span { min-width: 0; display: grid; } .sr-ra-hof-liste span a { font-weight: 800; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-ra-hof-liste small { font-size: .68rem; color: var(--sr-ink-2); } .sr-ra-hof-liste b { font: italic 900 1.35rem/1 var(--font-display, var(--font-body)); color: var(--sr-ink); font-variant-numeric: tabular-nums; } /* Siegquote je Eintrag (Ansage Sven 08.11.2026): schmaler Goldbalken, daneben die Prozentzahl. */ .sr-ra-hof-quote { display: flex; align-items: center; gap: .4rem; margin-top: .2rem; font: 700 .64rem/1 var(--font-body); font-style: normal; color: #9a7412; white-space: nowrap; } .sr-ra-hof-quote i { position: relative; flex: none; width: 3.6rem; height: 4px; border-radius: 2px; background: #eceef1; overflow: hidden; } .sr-ra-hof-quote i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--q); border-radius: 2px; background: linear-gradient(90deg, #f2c94c, #c9991a); } .sr-ra-hof-liste li.is-spaeter { display: none; } .sr-ra-hof:has(.sr-ra-hof-wahl[open]) li.is-spaeter { display: grid; } /* Der Knopf unten rechts auf dem Motiv; aufgeklappt zeigt die Liste alle zehn. */ .sr-ra-hof-wahl { position: absolute; right: .9rem; bottom: .9rem; z-index: 3; } .sr-ra-hof-knopf { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; border-radius: 8px; cursor: pointer; list-style: none; background: linear-gradient(180deg, #e5262c, #b8161c); color: #fff; font: 800 .74rem/1 var(--font-body); white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6); } .sr-ra-hof-knopf::-webkit-details-marker { display: none; } .sr-ra-hof-wahl[open] .sr-ra-hof-knopf svg { transform: rotate(90deg); } /* „Flest sæsoner“ (#901): Liste und Knopf der Hall of Fame, aber ohne Bild rechts — volle Breite, Platz unten für den Knopf. */ .sr-ra-saisonen { padding-right: 1.15rem; padding-bottom: 4rem; } /* Klassenpillen und Tabellen. */ .sr-ra-pillen { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .8rem; } .sr-ra-pillen label, .sr-ra-weitere > summary { display: inline-flex; align-items: center; gap: .3rem; padding: .38rem .8rem; border: 1px solid #dfe2e7; border-radius: 999px; background: #fff; font: 700 .72rem/1 var(--font-body); color: var(--sr-ink); cursor: pointer; white-space: nowrap; list-style: none; } .sr-ra-weitere > summary::-webkit-details-marker { display: none; } .sr-ra-best:has(#sr-ra-alle:checked) .sr-ra-pillen .is-alle { background: var(--sr-red); border-color: var(--sr-red); color: #fff; } .sr-ra-best:has(#sr-ra-alle:checked) tbody tr:not(.is-alle) { display: none; } .sr-ra-best:has(#sr-ra-alle:checked) .sr-ra-platz { display: none; } .sr-ra-weitere { position: relative; } .sr-ra-weitere > div { position: absolute; top: calc(100% + .3rem); left: 0; z-index: 5; display: grid; min-width: 13rem; max-height: 16rem; overflow: auto; padding: .35rem; border: 1px solid var(--sr-line); border-radius: 10px; background: #fff; box-shadow: 0 14px 30px -12px rgba(20, 22, 26, .35); } .sr-ra-weitere:not([open]) > div { display: none; } /* Am Telefon hängt die Liste an der Pillenreihe, nicht am Knopf (Ansage Sven 09.11.2026: „ich seh die jahresauswahl nicht“): rechtsbündig am Knopf ragte sie links aus dem Bild, sobald „Weitere“ in die zweite Zeile umbrach — die Jahre standen links außerhalb, zu sehen war nur eine leere Fläche. Jetzt beginnt sie links an der Reihe, unter dem Knopf. */ @media (max-width: 560px) { .sr-ra-pillen { position: relative; } .sr-ra-weitere { position: static; } .sr-ra-weitere > div { left: 0; right: auto; max-width: 100%; } } .sr-ra-weitere > div label { justify-content: space-between; border: 0; border-radius: 7px; padding: .45rem .6rem; } .sr-ra-weitere > div label:hover { background: #f3f4f6; } .sr-ra-weitere > div small { color: var(--sr-ink-3); font-weight: 600; } .sr-ra-tab { width: 100%; border-collapse: collapse; font-size: .8rem; } .sr-ra-tab thead th { padding: .45rem .6rem; background: #f3f4f6; font: 700 .64rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--sr-ink-2); text-align: right; } .sr-ra-tab thead th:first-child { border-radius: 7px 0 0 7px; } .sr-ra-tab thead th:last-child { border-radius: 0 7px 7px 0; } .sr-ra-tab th.l, .sr-ra-tab td.l { text-align: left; } .sr-ra-tab td { padding: .45rem .6rem; border-bottom: 1px solid #eef0f3; text-align: right; white-space: nowrap; } .sr-ra-tab tbody tr:last-child td { border-bottom: 0; } .sr-ra-klasse { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; } .sr-ra-klasse svg { color: var(--sr-ink-2); } .sr-ra-platz { display: inline-block; width: 1.4rem; color: var(--sr-ink-3); font-weight: 800; } .sr-ra-zahl { font-weight: 800; font-variant-numeric: tabular-nums; } .sr-ra-fett { font-weight: 800; } .sr-ra-weiter { width: 1.5rem; padding-left: 0; } .sr-ra-weiter a { color: var(--sr-ink-3); display: inline-flex; } .sr-ra-weiter a:hover { color: var(--sr-red); } .sr-ra-knapp .sr-ra-tab td, .sr-ra-knapp .sr-ra-tab th { padding-left: .45rem; padding-right: .45rem; } .sr-ra-knapp .sr-ra-tab td:nth-child(n+3) { white-space: normal; } .sr-ra-knapp tr.is-spaeter { display: none; } .sr-ra-knapp:has(.sr-ra-mehr[open]) tr.is-spaeter { display: table-row; } .sr-ra-mehr { margin-top: .6rem; } .sr-ra-mehr > summary { cursor: pointer; list-style: none; font: 700 .76rem/1 var(--font-body); color: var(--sr-red); } .sr-ra-mehr > summary::-webkit-details-marker { display: none; } .sr-ra-mehr[open] > summary { display: none; } /* Rekordbuch (Skizze Sven 08.11.2026): vier Kacheln im 2×2-Raster, Wert groß, darunter Rekord, Halter und Saison. */ .sr-ra-rekordraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0; } .sr-ra-rekordraster > div { min-width: 0; padding: .75rem .85rem; border: 1px solid #e8eaee; border-radius: 10px; background: radial-gradient(60% 120% at 0% 0%, rgba(229, 46, 46, .06), transparent 70%), #fff; } .sr-ra-rekordraster dt { font: italic 900 1.7rem/1 var(--font-display, var(--font-body)); color: var(--sr-ink); font-variant-numeric: tabular-nums; } .sr-ra-rekordraster dd { margin: .35rem 0 0; display: grid; gap: .1rem; min-width: 0; } .sr-ra-rekordraster b { font: 800 .66rem/1.2 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--sr-ink-2); } .sr-ra-rekordraster a, .sr-ra-rekordraster small { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-ra-rekordraster a { font-weight: 700; } .sr-ra-rekordraster small { color: var(--sr-ink-3); } /* Rekordbuch dunkel und elegant (Ansage Sven 08.11.2026 mit Bild: „rekordbuch elegant dunkel machen“): fast schwarzer Grund mit goldenem Schimmer links oben, Zielflaggen-Muster oben rechts, die vier Rekorde als dunkle Glaskacheln mit goldenem Zeichen, Werte weiß. */ .sr-ra-rekorde { overflow: hidden; border-color: #23262c; color: #fff; background: radial-gradient(60% 55% at 0% 0%, rgba(214, 170, 72, .18), transparent 70%), radial-gradient(50% 60% at 100% 100%, rgba(214, 170, 72, .08), transparent 70%), linear-gradient(160deg, #1b1d22 0%, #0d0e11 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 18px 34px -20px rgba(0, 0, 0, .65); } /* Die Zielflagge als Bild (design/0917-2/checkeredflag2.png, Ansage Sven 08.11.2026: „als hintergrund für rekordbuch nutzen, wie in der vorlage“): oben rechts, zur Mitte und nach unten ins Dunkle auslaufend. */ .sr-ra-rekorde::before { content: ""; position: absolute; top: 0; right: 0; width: 62%; height: 9rem; pointer-events: none; opacity: .38; background: url('https://www.zenergyracing.dk/v2/public/images/rekordbuch-zielflagge.webp?v=1794140898') right top / cover no-repeat; -webkit-mask-image: radial-gradient(120% 110% at 100% 0%, #000 0%, rgba(0, 0, 0, .6) 35%, transparent 72%); mask-image: radial-gradient(120% 110% at 100% 0%, #000 0%, rgba(0, 0, 0, .6) 35%, transparent 72%); } .sr-ra-rekorde > * { position: relative; } .sr-ra-rekorde .sr-ra-kopf h2 { color: #fff; } .sr-ra-rekorde .sr-ra-kopf p { color: rgba(255, 255, 255, .62); } .sr-ra-kopf > i.is-gold { background: radial-gradient(circle at 35% 30%, rgba(255, 230, 160, .25), rgba(214, 170, 72, .12)); color: #e8c160; box-shadow: inset 0 0 0 1px rgba(232, 193, 96, .35); } .sr-ra-rekorde .sr-ra-rekordraster > div { position: relative; padding: .8rem .9rem .8rem 3.1rem; border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); } .sr-ra-rekord-zeichen { position: absolute; top: .85rem; left: .85rem; color: #e8c160; filter: drop-shadow(0 2px 6px rgba(214, 170, 72, .35)); } .sr-ra-rekorde .sr-ra-rekordraster dt { color: #fff; } .sr-ra-rekorde .sr-ra-rekordraster b { color: rgba(255, 255, 255, .78); } .sr-ra-rekorde .sr-ra-rekordraster a { color: #fff; } .sr-ra-rekorde .sr-ra-rekordraster a:hover { color: #e8c160; } .sr-ra-rekorde .sr-ra-rekordraster small { color: rgba(255, 255, 255, .5); } /* Die Rennstrecken: Name, waagerechter Balken, Zahl der Wochenenden. */ .sr-ra-streckenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .sr-ra-streckenliste li { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) 2rem; align-items: center; gap: .7rem; font-size: .8rem; } .sr-ra-streckenliste span { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-ra-streckenliste i { display: block; height: 8px; border-radius: 4px; background: #eef0f3; position: relative; overflow: hidden; } .sr-ra-streckenliste i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #c9cdd4, #aeb3bb); } .sr-ra-streckenliste li:first-child i::after { background: linear-gradient(90deg, #ef3b40, #c4161c); } .sr-ra-streckenliste b { text-align: right; font-variant-numeric: tabular-nums; } @media (max-width: 1100px) { .sr-ra-zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sr-ra-raster { grid-template-columns: minmax(0, 1fr); } /* Einspaltig: Saisons, Hall of Fame, Rekordbuch, Meiste Saisons, Champions, Bestenliste, knappste Zieleinläufe, Rennstrecken. */ .sr-ra-raster { display: flex; flex-direction: column; align-items: stretch; } .sr-ra-spalte { display: contents; } .sr-ra-saisons { order: 1; } .sr-ra-hof { order: 2; } .sr-ra-rekorde { order: 3; } .sr-ra-saisonen { order: 4; } .sr-ra-champions { order: 5; } .sr-ra-best { order: 6; } .sr-ra-knapp { order: 7; } .sr-ra-strecken { order: 8; } } @media (max-width: 560px) { .sr-ra-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sr-ra-zahlen > div:last-child { grid-column: 1 / -1; } .sr-ra-zahlen > div { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .6rem; row-gap: .15rem; align-items: center; text-align: left; padding: .6rem .7rem; } .sr-ra-zahlen i { grid-row: 1 / span 2; width: 2rem; height: 2rem; margin: 0; } .sr-ra-zahlen dt { justify-self: start; padding-bottom: .25rem; } .sr-ra-zahlen dt::after { left: 0; transform: none; width: 2rem; } .sr-ra-zahlen dd { margin: 0; letter-spacing: .02em; font-size: .56rem; } /* 13 Säulen auf Telefonbreite: nur die Zahl der jüngsten Saison, die anderen stehen im Hinweis beim Antippen. */ .sr-ra-balken a:not(:last-child) b { visibility: hidden; } .sr-ra-kopf { flex-wrap: wrap; } /* Der Text füllt die Zeile neben dem Zeichen, damit das Schild „2026: 141 Fahrer“ in die nächste Zeile rutscht (Ansage Sven 09.11.2026: „button 2026 überlagert den titel“) — mit Grundbreite 0 blieb es daneben und lag über der Überschrift. */ .sr-ra-kopf > div { flex: 1 1 calc(100% - 3.25rem); } .sr-ra-kopf h2, .sr-ra-hof-kopf h2 { font-size: 1.15rem; } .sr-ra-plakette { order: 3; margin-left: calc(2.5rem + .75rem); } .sr-ra-balken { gap: .15rem; } .sr-ra-balken b { font-size: .58rem; } .sr-ra-balken span { font-size: .5rem; transform: rotate(-45deg); margin-top: .5rem; } .sr-ra-tab td { white-space: normal; padding: .45rem .35rem; } .sr-ra-tab th { padding-left: .35rem; padding-right: .35rem; } .sr-ra-klasse svg { display: none; } .sr-ra-best .sr-ra-tab, .sr-ra-knapp .sr-ra-tab { font-size: .74rem; } .sr-ra-hof { padding-right: 1.15rem; padding-bottom: 4rem; } .sr-ra-hof-bild { display: none; } /* Rekordbuch am Telefon (Ansage Sven 09.11.2026: „die texte laufen teilweise aus dem bild“): das Zeichen steht neben der Zahl statt als eigene Spalte daneben — so bekommen Rekordname und Halter die ganze Kachelbreite; lange Wörter und Namen brechen um statt hinauszulaufen oder abgeschnitten zu werden. */ .sr-ra-rekorde .sr-ra-rekordraster > div { padding: .75rem .75rem .8rem; } .sr-ra-rekord-zeichen { top: .8rem; left: .75rem; } .sr-ra-rekorde .sr-ra-rekordraster dt { padding-left: 2rem; font-size: 1.45rem; } .sr-ra-rekorde .sr-ra-rekordraster b { letter-spacing: .03em; overflow-wrap: anywhere; hyphens: auto; } .sr-ra-rekorde .sr-ra-rekordraster a, .sr-ra-rekorde .sr-ra-rekordraster small { white-space: normal; overflow-wrap: anywhere; } } /* ═══ Alle Saisons als Dashboard (Ansage Sven 31.10.2026: „als dashboard aufbereiten … nicht schön und übersichtlich“; „hall of fame … in eine eigene spalte … hervorheben“). Zahlen als Leiste, links Kacheln, rechts die Hall of Fame. Medaillenfarben wie im Verlauf der Wertung. ═══ */ .sr-res-dash-zahlen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; margin: 1rem 0; } /* Die Kennzahlen dunkel (Ansage Sven 31.10.2026: „die kacheln ganz oben können dunkel werden“). */ .sr-res-dash-zahlen > div { padding: .75rem .85rem; border-radius: 10px; min-width: 0; background: linear-gradient(160deg, #23262c 0%, var(--sr-ink) 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } .sr-res-dash-zahlen dt { font: 800 1.3rem/1.1 var(--font-body); color: #fff; font-variant-numeric: tabular-nums; } .sr-res-dash-zahlen dd { margin: .25rem 0 0; font: 700 .64rem/1.2 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: #a7acb5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-res-dash { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; } .sr-res-dash-haupt { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .sr-res-kachel { border: 1px solid var(--sr-line); border-radius: 12px; padding: 1rem 1.1rem; background: #fff; min-width: 0; } /* Kachelkopf wie die Hall of Fame (31.10.2026): Zeichen im Kreis, Titel in der Hero-Schrift, darunter eine Zeile Erklärung. */ .sr-res-kachel-kopf { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; } .sr-res-kachel-kopf > i { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #eef0f3; color: var(--sr-ink); } .sr-res-kachel-kopf h2 { margin: 0; font-family: var(--font-display-hero); font-weight: 400; font-size: 1.35rem; line-height: 1; text-transform: uppercase; letter-spacing: .01em; color: var(--sr-ink); } .sr-res-kachel-kopf p { margin: .25rem 0 0; font-size: .76rem; line-height: 1.35; color: var(--sr-ink-3); } /* Saisons als Balken: Höhe = Fahrer, der jüngste Balken dunkel. Seit 31.10.2026 schmalere, gerundete Säulen mit Verlauf, die Zahl innen oben, feine Hilfslinien dahinter (Ansage Sven: „die balken bei "die saisons" schöner machen“). */ .sr-res-saisonbalken { position: relative; display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: .3rem; height: 11rem; align-items: end; padding-bottom: 1.3rem; background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), #eef0f3 calc(25% - 1px), #eef0f3 25%) 0 0 / 100% calc(100% - 1.3rem) no-repeat; } .sr-res-saisonbalken::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1.3rem; height: 1px; background: var(--sr-line); } .sr-res-saisonbalken a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; color: inherit; text-decoration: none; } .sr-res-saisonbalken i { position: relative; display: flex; justify-content: center; width: min(100%, 2.6rem); height: var(--h); min-height: 4px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, #c3c8d0 0%, #a7acb5 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform .18s ease, background .18s ease, box-shadow .18s ease; } .sr-res-saisonbalken a:last-child i { background: linear-gradient(180deg, #3a3f47 0%, var(--sr-ink) 100%); } .sr-res-saisonbalken a:hover i, .sr-res-saisonbalken a:focus-visible i { transform: translateY(-3px); background: linear-gradient(180deg, #7d838d 0%, #565c66 100%); box-shadow: 0 8px 16px rgba(20, 22, 26, .18); } .sr-res-saisonbalken a:last-child:hover i { background: linear-gradient(180deg, #3a3f47 0%, var(--sr-ink) 100%); } .sr-res-saisonbalken b { margin-top: .35rem; font: 800 .66rem/1 var(--font-body); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px rgba(0, 0, 0, .2); } /* Zu niedrige Säulen tragen die Zahl darüber. */ .sr-res-saisonbalken i.ist-niedrig b { position: absolute; bottom: 100%; margin: 0 0 .3rem; color: var(--sr-ink-2); text-shadow: none; } .sr-res-saisonbalken span { position: absolute; bottom: 0; transform: translateY(100%); padding-top: .35rem; font: 700 .62rem/1 var(--font-body); color: var(--sr-ink-3); white-space: nowrap; } .sr-res-saisonbalken a:last-child span { color: var(--sr-ink); } /* Bestenliste der heutigen Klassen als kleine Podien. */ .sr-res-dash-podien { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .6rem; } .sr-res-dash-podium { border: 1px solid var(--sr-line); border-radius: 10px; padding: .7rem .8rem; background: #fafaf8; min-width: 0; } .sr-res-dash-podium h3 { margin: 0 0 .4rem; font: 800 .9rem/1.2 var(--font-body); display: flex; justify-content: space-between; gap: .5rem; } .sr-res-dash-podium h3 small { font-weight: 600; font-size: .7rem; color: var(--sr-ink-3); white-space: nowrap; } .sr-res-dash-podium ol { list-style: none; margin: 0; padding: 0; } .sr-res-dash-podium li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; gap: .35rem; align-items: center; padding: .22rem 0; font-size: .84rem; border-top: 1px solid var(--sr-line); } .sr-res-dash-podium li:first-child { border-top: 0; } .sr-res-dash-podium li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-res-dash-podium li i { font-style: normal; font-weight: 800; color: var(--sr-ink-3); } .sr-res-dash-podium li b { font-variant-numeric: tabular-nums; } .sr-res-dash-podium li.sr-p1 i, .sr-res-dash-podium li.sr-p1 b { color: var(--sr-ink); } .sr-res-dash-podium li.sr-p1 a { font-weight: 800; } .sr-res-dash-mehr { margin-top: .8rem; } .sr-res-dash-mehr > summary { cursor: pointer; font: 700 .82rem/1.3 var(--font-body); color: var(--sr-ink-2); list-style: none; display: inline-flex; gap: .4rem; align-items: center; } .sr-res-dash-mehr > summary::-webkit-details-marker { display: none; } .sr-res-dash-mehr > summary::before { content: "▸"; transition: transform .15s ease; } .sr-res-dash-mehr[open] > summary::before { transform: rotate(90deg); } .sr-res-dash-mehr .sr-res-scroll { margin-top: .6rem; } .sr-res-knapp td small { display: block; font-size: .72rem; color: var(--sr-ink-3); white-space: normal; } /* Ohne Querrollen: Klasse und Namen dürfen umbrechen, nur der Abstand und die Saison bleiben einzeilig. */ .sr-res-knapp th, .sr-res-knapp td { white-space: normal; } .sr-res-knapp td:nth-child(-n+2), .sr-res-knapp th:nth-child(-n+2) { white-space: nowrap; } .sr-res-kachel:has(.sr-res-dash-knapp-mehr:not([open])) .sr-res-dash-spaeter { display: none; } /* Hall of Fame: eigene Spalte, warm hervorgehoben, Medaillen für die ersten drei. */ .sr-res-hof { position: relative; border: 1px solid #ead08a; border-radius: 14px; padding: 1.2rem 1.1rem 1rem; background: linear-gradient(165deg, #fff6dc 0%, #fffdf6 45%, #fff 100%); box-shadow: 0 12px 30px rgba(150, 110, 0, .12); } .sr-res-hof-marke { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin: 0 0 .6rem; border-radius: 50%; background: #f1d778; color: #5a4300; } .sr-res-hof h2 { margin: 0; font-family: var(--font-display-hero); font-weight: 400; font-size: 1.9rem; line-height: 1; text-transform: uppercase; letter-spacing: .01em; color: var(--sr-ink); } .sr-res-hof-info { margin: .35rem 0 .9rem; font-size: .8rem; color: var(--sr-ink-2); } .sr-res-hof-liste { list-style: none; margin: 0; padding: 0; } .sr-res-hof-liste li { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto; gap: .55rem; align-items: center; padding: .5rem 0; border-top: 1px solid rgba(150, 110, 0, .15); } .sr-res-hof-liste li:first-child { border-top: 0; } .sr-res-hof-liste i { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; font: 800 .8rem/1 var(--font-body); font-style: normal; color: var(--sr-ink-3); } .sr-res-hof-gold i { background: #f1d778; color: #5a4300; } .sr-res-hof-silber i { background: #d9dde2; color: #353a41; } .sr-res-hof-bronze i { background: #e7bf9b; color: #5b3214; } .sr-res-hof-liste span { min-width: 0; } .sr-res-hof-liste span a { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-res-hof-liste span small { display: block; font-size: .7rem; color: var(--sr-ink-3); } .sr-res-hof-quote { display: flex; align-items: center; gap: .4rem; margin-top: .25rem; font: 700 .66rem/1 var(--font-body); font-style: normal; color: #7a5c00; white-space: nowrap; } .sr-res-hof-quote span { position: relative; flex: 0 0 3.2rem; height: .32rem; border-radius: 99px; background: rgba(150, 110, 0, .15); overflow: hidden; } .sr-res-hof-quote span::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--q); border-radius: inherit; background: #d4a017; } .sr-res-hof-liste b { text-align: right; font: 800 1.15rem/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--sr-ink); } .sr-res-hof-liste b small { display: block; margin-top: .15rem; font: 700 .58rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--sr-ink-3); } .sr-res-hof-gold span a { font-size: 1.02rem; } .sr-res-hof-gold b { font-size: 1.5rem; } @media (max-width: 1100px) { .sr-res-dash-zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 960px) { .sr-res-dash { grid-template-columns: minmax(0, 1fr); } .sr-res-hof { order: -1; } } @media (max-width: 560px) { .sr-res-dash-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sr-res-saisonbalken { height: 9rem; gap: .15rem; } .sr-res-saisonbalken b { font-size: .5rem; } .sr-res-saisonbalken span { font-size: .48rem; } .sr-res-kachel { padding: .9rem .8rem; } } /* Fahrerseite (#149, Etappe 2), seit 08.10.2026 im Stil der Ergebnisseite (#216): Karten mit Bildkopf, Kacheln, Platzierungen in Gold/Silber/Bronze wie im Verlauf der Wertung, Tabellen gerahmt. */ .sr-res-zwischen { margin: 1.4rem 0 .6rem; font: 800 .78rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--sr-ink-2); } .sr-res-fahrer > .sr-res-karte { margin-top: 1rem; --sr-res-pad-y: .9rem; --sr-res-pad-x: 1rem; } .sr-res-fahrer.is-eingebettet > .sr-res-karte:first-child { margin-top: 0; } /* Gesamtwerte und Streckenbestzeiten: schwarzer Motivkopf wie „Letzte Rennsieger" / „Schnellste Runden". */ .sr-res-fahrer-karte > .sr-res-karte-kopf { margin: calc(-1 * var(--sr-res-pad-y)) calc(-1 * var(--sr-res-pad-x)) .8rem; padding: .85rem 1rem; align-items: center; border-radius: 11px 11px 0 0; color: #fff; min-height: 2.8rem; box-sizing: border-box; overflow: hidden; background: #0b0c0e right center / cover no-repeat; position: relative; z-index: 1; box-shadow: 0 8px 16px -6px rgba(20, 22, 26, .45); } .sr-res-fahrer-karte > .sr-res-karte-kopf h3 { margin: 0; color: #fff; font: 900 .85rem/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; } .sr-res-fahrer-karte.is-sieger > .sr-res-karte-kopf { background-image: url('https://www.zenergyracing.dk/v2/public/images/resultater-kopf-sieger.webp?v=1791306196'); } .sr-res-fahrer-karte.is-runden > .sr-res-karte-kopf { background-image: url('https://www.zenergyracing.dk/v2/public/images/resultater-kopf-runden.webp?v=1791306196'); } .sr-res-fahrer-karte .sr-res-scroll, .sr-res-fahrer-klasse .sr-res-scroll { border: 1px solid var(--sr-line); border-radius: 10px; } /* Klassenkarte: der Kopf der Gesamtwertung, der Name verweist auf die Wertung. */ .sr-res-fahrer-klasse > .sr-res-karte-kopf h2 a { color: inherit; text-decoration: none; } .sr-res-fahrer-klasse > .sr-res-karte-kopf h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } /* Der Tabellenplatz als Plakette vor dem Logo. */ .sr-res-fahrer-platz { order: 1; margin-left: auto; display: inline-flex; align-items: baseline; gap: .1rem; padding: .35rem .7rem; border-radius: 10px; background: var(--sr-red); color: #fff; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); font: italic 900 1.6rem/1 var(--font-display, var(--font-body)); } .sr-res-fahrer-platz small { font-size: .8rem; opacity: .85; } .sr-res-fahrer-klasse > .sr-res-karte-kopf > .sr-res-wertung-logo { margin-left: .8rem; } .sr-res-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); gap: .45rem; margin: 0 0 .9rem; } .sr-res-kacheln div { border: 1px solid var(--sr-line); border-radius: 10px; padding: .55rem .7rem; background: var(--sr-ground, #f6f6f4); } .sr-res-kacheln dt { font: italic 900 1.25rem/1.05 var(--font-display, var(--font-body)); font-variant-numeric: tabular-nums; color: var(--sr-ink); white-space: nowrap; } .sr-res-kacheln dd { margin: .15rem 0 0; font: 700 .64rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--sr-ink-2); } .sr-res-kacheln div.is-rot dt { color: var(--sr-red); } /* Platzierungen je Lauf, je Wochenende ein Grüppchen mit dem Ort darunter. */ .sr-res-fahrer-verlauf { display: flex; flex-wrap: wrap; gap: .7rem 1.1rem; margin: 0 0 .9rem; } .sr-res-fahrer-wochenende { display: grid; gap: .25rem; justify-items: start; } .sr-res-fahrer-wochenende .sr-res-verlauf { display: flex; gap: .2rem; } .sr-res-fahrer-wochenende .sr-res-verlauf i { min-width: 1.75rem; padding: 3px 5px; font-weight: 700; } .sr-res-fahrer-wochenende small { font: 700 .6rem/1.1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--sr-ink-3); } a.sr-res-name { color: inherit; text-decoration: none; } a.sr-res-name:hover { color: var(--sr-red); text-decoration: underline; } .sr-kontakt-konto { margin: 0; font: 400 .8rem/1.4 var(--font-body); color: var(--sr-ink-2); } .sr-kontakt-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .sr-kontakt-form label > span { display: block; margin-bottom: .35rem; font: 800 .72rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--sr-ink-2); } .sr-kontakt-form input[type="text"], .sr-kontakt-form input[type="email"], .sr-kontakt-form textarea { width: 100%; padding: .65rem .8rem; border-radius: 8px; border: 1px solid var(--sr-line); background: #fff; font: 400 .88rem/1.45 var(--font-body); color: var(--sr-ink); } .sr-kontakt-form textarea { resize: vertical; min-height: 9rem; } .sr-kontakt-form input:focus, .sr-kontakt-form textarea:focus { outline: 2px solid var(--sr-red); outline-offset: 1px; border-color: transparent; } .sr-kontakt-text small { display: block; margin-top: .35rem; font: 400 .76rem/1.4 var(--font-body); color: var(--sr-ink-2); } .sr-kontakt-pruefung { display: grid; gap: .5rem; } .sr-kontakt-pruefung > span { font: 800 .72rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--sr-ink-2); } /* Senden-Knopf in der Form des Buchen-Knopfs der Kopfleiste: rot, rechts schraeg angeschnitten (Backlog #140). */ .sr-kontakt-go { justify-self: end; display: inline-flex; align-items: center; gap: .65rem; min-height: 50px; padding: .9rem 2.6rem .9rem 1.7rem; border: 0; border-radius: 6px; cursor: pointer; clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); background: var(--sr-red); color: #fff; font: 800 .86rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); transition: background .18s ease, padding .18s ease; } .sr-kontakt-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; } .sr-kontakt-go:hover { background: var(--sr-red-2); } .sr-kontakt-go:hover svg { transform: translate(3px, -3px); } .sr-kontakt-go:focus-visible { outline: 3px solid color-mix(in srgb, var(--sr-red) 45%, transparent); outline-offset: 3px; } @media (max-width: 600px) { .sr-kontakt-go { justify-self: stretch; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .sr-kontakt-go, .sr-kontakt-go svg { transition: none; } } /* Die Bestaetigung. Dieselbe fuer alle — auch fuer das, was die Abwehr stillgelegt hat. */ .sr-kontakt-danke { grid-column: 1 / -1; display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: 10px; border: 1px solid var(--sr-line); background: var(--sr-ground); } .sr-kontakt-danke svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--sr-red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sr-kontakt-danke b { display: block; font: 900 1rem/1.2 var(--font-body); } .sr-kontakt-danke span { display: block; margin-top: .25rem; font: 400 .85rem/1.5 var(--font-body); color: var(--sr-ink-2); } .sr-kontakt-wege { display: grid; gap: 1rem; align-content: start; } .sr-kontakt-wege > div > span { display: block; margin-bottom: .2rem; font: 800 .68rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--sr-ink-2); } .sr-kontakt-wege a { color: var(--sr-ink); text-decoration: none; font: 600 .88rem/1.4 var(--font-body); } .sr-kontakt-wege a:hover { color: var(--sr-red); } .sr-kontakt-wege p { margin: 0; font: 400 .85rem/1.5 var(--font-body); color: var(--sr-ink-2); } @media (max-width: 860px) { /* Eine Spalte: 200px Kontaktdaten neben einem Formular gaeben zwei zu schmale Spalten. Die Wege stehen dann UNTER dem Formular — wer schon tippt, soll nicht erst daran vorbeiscrollen. */ .sr-kontakt { grid-template-columns: 1fr; } .sr-kontakt-zeile { grid-template-columns: 1fr; } } /* ── Umschalter ─────────────────────────────────────────────────────────── */ /* Die Pille liegt MITTIG auf der Kante des Heros — die Haelfte im Foto, die Haelfte im Hellen. Der Versatz ist darum ungefaehr ihre halbe Hoehe und nicht mehr die Tiefe eines Auslaufs, den es nicht mehr gibt. */ /* ── Der Umschalter fliegt beim Rollen in die Kopfleiste ────────────────── Ansage vom 24.09.2026: „wenn sich der Serienumschalter beim Scrollen bewegt, soll er gleich in die Topnav animiert fliegen und dort ohne Texte nur noch mit den Symbolen funktionieren." Zwei Stuecke, ein Wechsel: die grosse Pille tritt nach oben ab, das Symbolpaar in der Leiste kommt von unten herein. Ein echtes Fliegen EINES Stueckes waere hier falsch — es muesste aus dem rollenden Behaelter in die feste Leiste wechseln, also mitten im Flug den Bezugsrahmen tauschen. DIE GROSSE PILLE GIBT IHREN PLATZ NICHT AUF (opacity und transform, kein display): sonst ruecken Tabellenstand und Termine um 86 px nach oben, ohne dass jemand gerollt hat — und genau das ist die Regel, an der dieser ganze Hero haengt. */ /* Sie wird nicht nur durchsichtig, sie gibt auch ihren PLATZ ab: durchsichtig blieb ein leerer Streifen von 57 px zwischen Hero und Tabellenstand stehen und rollte mit (gemeldet am 24.09.2026). Die Hoehe faehrt dabei mit — der Inhalt darunter rueckt in derselben Bewegung nach oben und springt nicht. Der Deckel im offenen Zustand ist noetig, damit es etwas zu schliessen gibt: von `none` auf `0` laesst sich nichts fahren. */ .sr-switch-dock { max-height: 12rem; transition: opacity .22s ease, transform .40s cubic-bezier(.2, .7, .3, 1), max-height .40s cubic-bezier(.2, .7, .3, 1), margin .40s cubic-bezier(.2, .7, .3, 1); } body.sr-switch-oben .sr-switch-dock { opacity: 0; transform: translateY(-14px) scale(.96); pointer-events: none; max-height: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; } /* Dicht an der Wortmarke und nicht in der Mitte der Leiste (Ansage vom 24.09.2026): das `margin-right: auto` wandert von der Wortmarke auf das Paar, damit der freie Platz DAHINTER liegt statt davor. Nur wo das Paar ueberhaupt steht — auf Seiten ohne es (Warenkorb, Kasse, Profil) schiebt die Wortmarke die Leiste weiter wie bisher. */ body.design-serienleiste .sl-topnav:has(.sr-switch-mini) .sr-brand { margin-right: 0; } /* „Nur ein minimaler weisser Rand": 2 px statt 5, und das Ganze eine Nummer kleiner. Der Schatten geht mit — ein tiefer Schatten unter einem 35-px-Stueck sieht aus wie ein Fehler. Die rote Haelfte misst sich selbst nach (setzeSchieber), hier ist nichts nachzutragen. */ /* Zweimal der Name und nicht einmal: `.sr-switch` steht weiter unten im Blatt und ist gleich stark — bei Gleichstand gewinnt die spaetere, und das Polster blieb bei 5 px. */ /* DER RAND IST EIN SCHATTEN OHNE UNSCHAERFE, kein Polster (Ansagen vom 29.09.2026: „muss gleichmaessig sein", dann „grau und nur 1px breit"). Mit Polster mussten die beiden Haelften ihre Rundung selbst nachbilden, und der Rand lief an den Enden sichtbar breiter aus als oben und unten. So schneidet die Pille ihre Haelften selbst zu, und der Ring liegt aussen herum. */ .sr-switch.sr-switch-mini { --sr-sk: 8px; /* Fest links an der Wortmarke, der freie Platz dahinter (Ansage Sven 01.11.2026: „serien umschalter muss immer linksbündig bleiben“) — mittig (Ansage 30.09.2026) wanderte er mit, sobald sich rechts etwas änderte. */ margin-left: 1.5rem; margin-right: auto; flex: none; padding: 0; gap: 0; overflow: visible; background: transparent; /* Nicht das Milchglas des grossen Umschalters erben (14.10.2026, Sven: „localhost ist grad kein glass effekt"): eine eigene Unschaerfe an der Pille schirmt die Glasflaeche ihrer Haelften ab — sie saehen nur noch die leere Pille. */ backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 5px rgba(20, 22, 26, .16); opacity: 0; transform: translateY(26px) scale(1.22); pointer-events: none; transition: opacity .26s ease, transform .40s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease; } body.sr-switch-oben .sr-switch-mini { opacity: 1; transform: none; pointer-events: auto; } /* KEIN RAND (Ansage vom 29.09.2026: „nimm die border komplett weg"), dafuer ein kraeftiger roter Schein auf der Seite der gewaehlten Haelfte: nach aussen, oben und unten. */ /* Negative Ausdehnung und weiter Versatz: der Schein bleibt an der Seite der gewaehlten Haelfte und laeuft nicht mehr um die Pille herum ueber die andere (Ansage vom 29.09.2026). */ .sr-switch-mini:has(.sr-sb-mc[aria-selected="true"]) { box-shadow: -12px 0 14px -6px rgba(218, 31, 37, .9), -22px 0 24px -12px rgba(218, 31, 37, .55), 0 1px 5px rgba(20, 22, 26, .16); } .sr-switch-mini:has(.sr-sb-sm[aria-selected="true"]) { box-shadow: 12px 0 14px -6px rgba(218, 31, 37, .9), 22px 0 24px -12px rgba(218, 31, 37, .55), 0 1px 5px rgba(20, 22, 26, .16); } /* VORLAGE VOM 29.09.2026 (design/0917-2/serien_umschalter): zwei Fotohaelften, schraeg geteilt wie ein „/". Die Schraege schneidet clip-path am Knopf — der schneidet auch die Klickflaeche, ein Klick trifft also immer die Haelfte, die man sieht. Nach OBEN ist der Schnitt offen (die Schraege laeuft ueber die Kante weiter): dort ragen auf der gewaehlten Seite Fahrer und Maschine hinaus. Unten schneidet er an der Pillenkante. Die rechte Haelfte rueckt um die ganze Schraege unter die linke, ohne Luft dazwischen. Der Trennstrich ist ein eigener Strich in der rechten Haelfte, nicht mehr der helle Grund der Pille: der schien an den gerundeten Enden als feiner weisser Rand durch (gemeldet am 29.09.2026) — die Pille hat darum gar keinen Grund mehr. Die Rundung tragen die beiden Gruende selbst, mit demselben Radius wie die Pille. Das rote Stueck der grossen Pille hat hier nichts zu tun. */ .sr-switch-mini::before { display: none; } .sr-switch-mini .sr-sb { position: relative; overflow: visible; isolation: isolate; border-radius: 0; display: flex; align-items: center; min-width: 11rem; height: 44px; padding: 0 .95rem; background: transparent; color: #fff; } .sr-switch-mini .sr-sb-mc { justify-content: flex-start; clip-path: polygon(0 -40px, calc(100% + 15px) -40px, calc(100% - var(--sr-sk) * 2) 100%, 0 100%); } .sr-switch-mini .sr-sb-sm { justify-content: flex-end; margin-left: calc(var(--sr-sk) * -2); clip-path: polygon(calc(var(--sr-sk) * 2 + 15px) -40px, 100% -40px, 100% 100%, 0 100%); } .sr-switch-mini .sr-sb:hover, .sr-switch-mini .sr-sb[aria-selected="true"], .sr-switch-mini .sr-sb[aria-selected="true"]:hover { background: transparent; color: #fff; } /* Glas statt deckendem Schwarz (Ansage Sven 14.10.2026: „der schwarze hintergrund hinter dem serienschalter im kleinen hero soll auch glass look haben"): dunkel durchscheinend mit Unschärfe und feiner Lichtkante, wie die Glasscheibe hinter der Kopfleiste. */ .sr-switch-mini .sr-sb-grund { position: absolute; inset: 0; z-index: -2; overflow: hidden; /* „mehr glass" (14.10.2026): heller, durchscheinender, stärker unscharf, mit Lichtschimmer schräg von oben. */ background: linear-gradient(160deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 40%, rgba(20, 23, 28, .22) 100%); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); /* Ohne hellen Rand und ohne Lichtkante (Ansage Sven 14.10.2026: „den weissen rand weg“). */ box-shadow: none; } /* Der Trennstrich auf der Schnittkante, in der rechten Haelfte: 2 px, um 20 Grad geneigt wie die Schraege (tan 20° × 44 px ≈ 2 × --sr-sk). */ .sr-switch-mini .sr-sb-sm::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--sr-sk); width: 2px; background: #e9ecf0; transform: skewX(-20deg); pointer-events: none; } .sr-switch-mini .sr-sb-mc .sr-sb-grund { border-radius: 22px 0 0 22px; } .sr-switch-mini .sr-sb-sm .sr-sb-grund { border-radius: 0 22px 22px 0; } /* Das Foto steht zur Mitte hin, zur Textseite laeuft es ins Dunkle aus. Nach unten verschoben (Ansage vom 29.09.2026): gezeigt wird der obere Teil — Fahrer und Verkleidung. */ .sr-switch-mini .sr-sb-bild { position: absolute; top: 0; bottom: 0; width: 66%; height: 100%; object-fit: cover; transition: filter .3s ease, opacity .3s ease; } .sr-switch-mini .sr-sb-mc .sr-sb-bild { right: 0; object-position: 50% 12%; } .sr-switch-mini .sr-sb-sm .sr-sb-bild { left: 0; object-position: 50% 8%; } .sr-switch-mini .sr-sb-grund::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .sr-switch-mini .sr-sb-mc .sr-sb-grund::after { background: linear-gradient(90deg, rgba(20, 23, 28, .32) 30%, rgba(20, 23, 28, .16) 42%, rgba(20, 23, 28, 0) 58%); } .sr-switch-mini .sr-sb-sm .sr-sb-grund::after { background: linear-gradient(270deg, rgba(20, 23, 28, .32) 30%, rgba(20, 23, 28, .16) 42%, rgba(20, 23, 28, 0) 58%); } /* Die andere Haelfte steht in Graustufen (Ansage vom 29.09.2026). */ .sr-switch-mini .sr-sb[aria-selected="false"] .sr-sb-bild { filter: grayscale(1) brightness(.75); } .sr-switch-mini .sr-sb[aria-selected="false"]:hover .sr-sb-bild { filter: grayscale(1) brightness(.95); } /* Und ein Schleier ueber der ganzen Haelfte, Schrift eingeschlossen, in der Farbe der Kopfleiste (#0b0d10, derselbe Ton wie ihr Verlauf ueber dem Hero-Foto; Ansagen vom 29.09.2026) — die Haelfte versinkt damit in der Leiste statt grau auf ihr zu liegen. Er liegt ueber dem Namen, darum am Knopf und nicht im Grund; die Rundung nimmt er vom Grund mit, sonst stuende er an den Enden eckig ueber der Pille. */ .sr-switch-mini .sr-sb::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(11, 13, 16, .55); opacity: 0; transition: opacity .3s ease; } .sr-switch-mini .sr-sb-mc::after { border-radius: 22px 0 0 22px; } .sr-switch-mini .sr-sb-sm::after { border-radius: 0 22px 22px 0; } .sr-switch-mini .sr-sb[aria-selected="false"]::after { opacity: 1; } .sr-switch-mini .sr-sb[aria-selected="false"]:hover::after { opacity: .55; } /* Auf der gewaehlten Seite steht das Foto nur noch als Grund dahinter; Fahrer und Maschine kommen freigestellt davor und ragen oben hinaus. Ohne das Zuruecktreten saehe man dieselbe Maschine zweimal, leicht versetzt. */ .sr-switch-mini .sr-sb[aria-selected="true"] .sr-sb-bild { opacity: .3; filter: blur(1px) brightness(.8); } .sr-switch-mini .sr-sb-pop { position: absolute; z-index: -1; bottom: -18px; height: 70px; pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .35s cubic-bezier(.2, .7, .3, 1); } .sr-switch-mini .sr-sb-pop img { display: block; height: 100%; width: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); } .sr-switch-mini .sr-sb-mc .sr-sb-pop { right: 6px; } .sr-switch-mini .sr-sb-sm .sr-sb-pop { left: calc(var(--sr-sk) * 2 + 2px); } .sr-switch-mini .sr-sb[aria-selected="true"] .sr-sb-pop { opacity: 1; transform: none; } .sr-switch-mini .sr-sb-inhalt { position: relative; display: flex; flex-direction: column; align-items: center; } .sr-switch-mini .sr-sb-name { font: 900 .68rem/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); color: #f3f4f6; opacity: .8; } /* Die Leiste faerbt ihre Knoepfe grauweiss (#f3f4f6); auf der gewaehlten Haelfte steht der Name reinweiss (Ansage vom 29.09.2026) — darum die Farbe am Namen selbst und nicht geerbt. */ .sr-switch-mini .sr-sb[aria-selected="true"] .sr-sb-name { color: #fff; opacity: 1; } /* 1 px schwarze Kontur um die Schrift der gewaehlten Haelfte (Ansage vom 29.09.2026): sie steht auf dem Foto und dem roten Schein und muss sich davon absetzen. paint-order legt die Kontur HINTER die Fuellung, sonst frisse sie die Haelfte des Strichs von innen weg. */ .sr-switch-mini .sr-sb[aria-selected="true"] .sr-sb-name { -webkit-text-stroke: 2px #000; paint-order: stroke fill; } /* Zwischen Telefon und breitem Schirm reicht die Leiste nicht fuer zwei einzeilige Namen — bei 1024 px schob das Paar die Wortmarke links aus dem Bild. Gemessen: die Textwege der Leiste beginnen bei etwa Fensterbreite minus 684 px, davor muessen Wortmarke und Paar passen. Also erst zwei Zeilen, und wo auch das nicht reicht, nur noch die beiden Fotos — Schraege und Schein bleiben. Den Namen traegt dann `title`. */ @media (max-width: 1200px) { .sr-switch-mini .sr-sb { min-width: 0; width: 6.6rem; padding: 0 .55rem; } .sr-switch-mini .sr-sb-name { white-space: normal; max-width: 4.2rem; text-align: center; font-size: .58rem; line-height: 1.08; letter-spacing: .03em; } .sr-switch-mini .sr-sb-pop { height: 62px; bottom: -10px; } .sr-switch-mini .sr-sb-mc .sr-sb-pop { right: 2px; } } /* Seit 12.10.2026 schon unter 1160 px statt 1060 px nur die Fotos (#434): die Leiste ist seit der Messung oben breiter geworden (laengere Menuewoerter, das Warenkorb-Zeichen), und zwischen 900 und 1280 px schob sie die Wortmarke bis zu 103 px links aus dem Bild. */ /* Die Symbole der grossen Pille stecken auch im Paar, gezeigt werden sie nur in der schmalsten Stufe. */ .sr-switch-mini .sr-sb-ico { display: none; } /* Schmalste Stufe nur mit den Symbolen der grossen Pille (Ansage Sven 26.10.2026: „die kleinste variante ist nicht erkennbar und soll nur die symbole aus dem grossen umschalter enthalten und keine hintergrundbilder oder beschriftungen"): kein Foto, kein freigestellter Fahrer, kein Name. Wie bei der grossen Pille steht das weisse Symbol auf der roten, gewaehlten Haelfte und das rote auf dem Glas der anderen. Schraege und Schein bleiben. */ @media (max-width: 1160px) { .sr-switch-mini .sr-sb { width: 3.1rem; padding: 0 .55rem; } .sr-switch-mini .sr-sb-name, .sr-switch-mini .sr-sb-bild, .sr-switch-mini .sr-sb-pop { display: none; } .sr-switch-mini .sr-sb-grund::after { background: none; } .sr-switch-mini .sr-sb::after { display: none; } .sr-switch-mini .sr-sb[aria-selected="true"] .sr-sb-grund { background: var(--sr-red, #da1f25); } .sr-switch-mini .sr-sb-ico { display: grid; width: 24px; height: 24px; } .sr-switch-mini .sr-sb-ico img { width: 22px; height: 22px; } .sr-switch-mini .sr-i-on { display: none; } .sr-switch-mini .sr-sb[aria-selected="true"] .sr-i-off { display: none; } .sr-switch-mini .sr-sb[aria-selected="true"] .sr-i-on { display: block; } } /* Zwischen Telefon und breitem Schirm rueckt die Leiste enger zusammen (#434): weniger Abstand, etwas weniger Sperrung der Menuewoerter. Gemessen mit Daenisch und Deutsch, je mit und ohne Warenkorb-Zeichen: ohne das lag die Wortmarke bei 920 px 103 px links ausserhalb, bei 1220 px 56 px. Ab 901 px, darunter gilt das Burgermenue. */ @media (min-width: 901px) and (max-width: 1340px) { body.design-serienleiste .sl-topnav { gap: .8rem; padding-left: 1rem; padding-right: 1rem; } body.design-serienleiste .sl-topnav-links { gap: .85rem; } body.design-serienleiste .sl-topnav .sl-topnav-links a, body.design-serienleiste .sl-topnav .sl-topnav-links button { letter-spacing: .09em; } } /* z-index 26 und nicht 20: die Pille liegt AUF der Unterkante des Heros, und der klebt seit dem 24.09.2026 mit einer eigenen Nummer (25) oben. Ohne sie verschwaende ihre obere Haelfte darin. */ .sr-switch-dock { position: relative; z-index: 26; margin: -27px auto 2.1rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; } /* (Bis 14.10.2026 weiss und deckend: auf einer harten Kante zog durchscheinendes Glas die Kante mitten durch die Pille. Seit der Ansage „jetzt den grossen serienumschalter mit glass" wieder Glas, mit starker Unschärfe.) */ .sr-switch { position: relative; /* 3 px weisser Rand statt 5 (Ansage Sven 07.10.2026: „der weisse rand … kann schmaler"). */ display: flex; padding: 3px; border-radius: 999px; /* Helles Milchglas statt deckendem Weiß (Ansage Sven 14.10.2026: „jetzt den grossen serienumschalter mit glass") — hebt die Entscheidung oben auf; die Unschärfe ist stark genug, dass die Hero-Kante nur weich durchscheint. */ /* „durchsichtiger“, dann „noch mehr“ (14.10.2026): nur noch ein Hauch Weiß. */ background: linear-gradient(160deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .1) 55%, rgba(255, 255, 255, .16) 100%); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 2px 6px rgba(20, 22, 26, .10), 0 14px 30px rgba(20, 22, 26, .18); } /* Die rote Haelfte ist ein einzelnes Stueck, das hinter den Knoepfen hinueberfaehrt — nicht zwei Hintergruende, die abwechselnd an- und ausgehen. Platz und Breite setzt das Skript (die beiden Knoepfe sind verschieden breit), die Bewegung macht der Uebergang hier. Die Marke is-ready kommt erst nach dem ersten Setzen: sonst faehrt das Stueck beim Laden von links herein. */ .sr-switch::before { /* Ueber die Abstaende zu allen vier Kanten gesetzt, nicht ueber Ecke plus Breite: so haengt das Stueck rechts direkt an der Aussenkante und rundet dort genauso wie links — mit Breite und Verschiebung blieb rechts sichtbar mehr Weiss stehen (Ansage Sven 07.10.2026: „links ist der rand gleichmässig, rechts nicht"). */ content: ""; position: absolute; top: var(--sr-thumb-y, 0); left: var(--sr-thumb-x, 0); right: var(--sr-thumb-r, 100%); bottom: var(--sr-thumb-b, 100%); border-radius: 999px; background: var(--sr-red); /* Kein Schatten: ein nach unten versetzter roter Schein faerbte den weissen Rand unten ein, oben nicht — er sah ungleich breit aus (Ansage Sven 07.10.2026). */ } .sr-switch.is-ready::before { transition: left .34s cubic-bezier(.2, .7, .3, 1), right .34s cubic-bezier(.2, .7, .3, 1), top .34s cubic-bezier(.2, .7, .3, 1), bottom .34s cubic-bezier(.2, .7, .3, 1); } .sr-sb { display: flex; align-items: center; gap: .8rem; padding: .38rem 1.15rem .38rem .9rem; border: 0; border-radius: 999px; background: transparent; color: var(--sr-ink); text-align: left; cursor: pointer; font: inherit; transition: background .18s ease, color .18s ease; } .sr-sb { position: relative; z-index: 1; } /* Kein Farbwechsel mehr beim Darüberfahren über die inaktive Hälfte (Ansage Sven 14.10.2026: „beim hovern über dem inaktiven schalter ändert sich noch die hintergrundfarbe des inaktiven, das soll raus“). */ .sr-sb:hover { background: transparent; } .sr-sb[aria-selected="true"] { background: transparent; color: #fff; } .sr-sb[aria-selected="true"]:hover { background: transparent; } .sr-sb:focus-visible { outline: 2px solid var(--sr-red); outline-offset: 3px; } /* Ohne Scheibe: das rote Symbol steht auf dem Weiss der Pille, das weisse auf dem Rot der gewaehlten Haelfte. Die Scheibe war noetig, solange die Pille Milchglas war. */ .sr-sb-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: none; flex: none; } .sr-sb-ico img { width: 25px; height: 25px; object-fit: contain; } /* Beide Fassungen liegen im selben Kreis, gezeigt wird eine. Mit .sr davor, weil die Grundregel dieses Blattes (.sr img { display: block }) sonst spezifischer ist und das verborgene Symbol wieder sichtbar macht — es stand als Schatten unter dem Kreis. */ .sr .sr-i-on { display: none; } .sr .sr-sb[aria-selected="true"] .sr-i-off { display: none; } .sr .sr-sb[aria-selected="true"] .sr-i-on { display: block; } .sr-sb-txt { min-width: 0; white-space: nowrap; } .sr-sb-txt b { display: block; font: 900 .82rem/1.1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; } .sr-sb-txt small { display: block; font-size: .72rem; color: var(--sr-ink-2); margin-top: .15rem; } .sr-sb[aria-selected="true"] .sr-sb-txt small { color: rgba(255, 255, 255, .88); } /* ── Eine Infoseite im Hauptbereich ────────────────────────────────────── Der Inhalt kommt als geteilter Teil (partials/info-body) und bringt die Stile der alten Seite mit. Hier wird er auf dieses Design umgelegt: die Breitenbegrenzung faellt weg (die Spalte begrenzt schon), und das Akkordeon bekommt Rahmen und Schrift der Tafeln. */ /* Der Mini-Header der Inhaltsseiten (29.09.2026): ein flacher Streifen mit dem Hero-Foto der gewaehlten Serie, bis an die Kanten der Tafel (daher die negativen Raender in Hoehe ihres Polsters) und oben mit ihrer Rundung. */ /* Kopf der Infoseiten: der Seitentitel auf der hellen Flagge der Karte (08.10.2026), das Kreuz rechts. */ /* Ohne eigene Lage: das Kreuz haengt sich so an die Ecke der KARTE (Hintergrund der Seite, Linie nur links und unten — Ansage Sven 08.10.2026), nicht eingerueckt an den Kopf. Rechts Platz fuer Kreuz und „+". */ .sr-info-kopf { margin: 0 0 1rem; padding: .3rem 5.5rem .2rem 0; } /* Der Seitentitel im Bildkopf (08.10.2026) — statt des Seriennamens; das Kreuz in seiner Ecke. */ .sr-info-kopf-titel { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.05; } /* „Eintrag hinzufuegen" auf der Infoseite nur als kleines „+" links neben dem Kreuz (Ansage Sven 08.10.2026); der volle Text steht im Titel und fuer Vorlesehilfen. */ .sr-info .info-entry-actions { position: absolute; z-index: 6; top: 7px; right: 50px; margin: 0; display: flex; gap: .3rem; } .sr-info .info-entry-plus { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid var(--sr-line); background: var(--sr-paper); color: var(--sr-ink); font: 700 1.05rem/1 var(--font-body); cursor: pointer; } .sr-info .info-entry-plus:hover { background: var(--sr-red); border-color: var(--sr-red); color: #fff; } @media (max-width: 700px) { .sr-info-kopf-titel { font-size: 1.35rem; } } /* Versicherung (#572): der Titel steht im Bildkopf darunter; die Tafel traegt hier nur das Kreuz, hell auf dem dunklen Bild. */ .sr-info-forsikring > .sr-info-kopf { margin: 0; padding: 0; height: 0; } .sr-info-forsikring > .sr-info-kopf .sr-info-kopf-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .sr-info-forsikring > .sr-info-kopf .sr-close { color: #fff; border-color: transparent; background: rgba(0, 0, 0, .35); } /* Bilder aus der Textpflege (29.09.2026): nie breiter als ihr Text, mit leichter Rundung. */ .editable-content img { max-width: 100%; height: auto; display: block; margin: .8rem 0; border-radius: 6px; } .sr-info .nf-prose { max-width: none; margin-top: .85rem; } .sr-info .nf-prose p { margin: 0 0 .9rem; font-size: .92rem; line-height: 1.65; color: var(--sr-ink-2); } .sr-info .sl-accordion { border: 1px solid var(--sr-line); border-radius: 8px; overflow: hidden; background: var(--sr-paper); } .sr-info .sl-acc-item + .sl-acc-item { border-top: 1px solid var(--sr-line); } .sr-info .sl-acc-label { padding: .8rem 1rem; font: 800 .8rem/1.25 var(--font-body); text-transform: uppercase; letter-spacing: .01em; color: var(--sr-ink); } .sr-info .sl-acc-label:hover { background: var(--sr-ground); } .sr-info .sl-acc-caret { color: var(--sr-ink-3); } .sr-info .sl-acc-toggle:checked ~ .sl-acc-label { color: var(--sr-red); } .sr-info .sl-acc-body-inner { padding: 0 1rem 1rem; font-size: .9rem; line-height: 1.65; color: var(--sr-ink-2); } .sr-info .sl-acc-body-inner a { color: var(--sr-red); text-decoration: underline; text-underline-offset: 2px; } /* Die Zwischenueberschriften der langen Seiten tragen die Anzeigeschrift des Designs. */ .sr-info .nf-h2 { font: 900 1.05rem/1.2 var(--font-body); font-style: italic; text-transform: uppercase; letter-spacing: -.01em; color: var(--sr-ink); margin: 1.6rem 0 .45rem; } .sr-info .nf-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; padding: 1rem 1.1rem; border: 1px solid var(--sr-line); border-radius: 8px; background: var(--sr-ground); } .sr-info .nf-cta > div { margin: 0; } .sr-info .nf-cta p { margin: 0; } .sr-info .nf-cta .sl-btn { margin-left: auto; background: var(--sr-red); color: #fff; border: 0; border-radius: 6px; padding: .7rem 1.2rem; font: 700 .72rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; } .sr-info .nf-cta .sl-btn:hover { background: var(--sr-red-2); } /* Oben auf der Regelseite (Verweis auf „Er du ny?“, 25.10.2026): Abstand nach unten statt nach oben. */ .sr-info .nf-cta.nf-cta-ny { margin: 0 0 1.2rem; } /* ── Die Saison als Jahresraster ───────────────────────────────────────── Zwoelf Zeilen, einunddreissig Spalten, jeder Tag des Jahres ein Feld. Beide Serien im selben Gitter und durch Farbe unterschieden: wer die Saison plant, will auch sehen, wann NICHTS ist, und das zeigt nur ein Gitter, in dem jeder Tag vorkommt. */ .sr-cal-intro { margin: .7rem 0 0; max-width: 70ch; font-size: .92rem; line-height: 1.6; color: var(--sr-ink-2); } .sr-cal-legend { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 .7rem; } .sr-cal-key { display: inline-flex; align-items: center; gap: .45rem; font: 700 .68rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--sr-ink-2); } .sr-cal-key::before { content: ""; width: 13px; height: 13px; border-radius: 4px; } .sr-cal-key.is-mc::before { background: var(--sr-red); } .sr-cal-key.is-sm::before { background: #1f6fd0; } .sr-cal-pdf { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; border-radius: 6px; border: 1px solid var(--sr-line-2); font: 700 .66rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--sr-ink-2); background: var(--sr-paper); } .sr-cal-pdf:hover { border-color: var(--sr-red); color: var(--sr-red); } .sr-cal-pdf svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Marke und Jahr ganz oben. Die Marke bringt ihre eigene schwarze Platte mit — sie braucht keinen dunklen Kasten darunter und steht auf Weiss. */ .sr-cal-brand { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; } .sr-cal-mark { width: 84px; height: auto; } .sr-cal-year { font: 900 2.1rem/1 var(--font-body); letter-spacing: -.04em; } /* Das Gitter ist breiter als ein Telefon — es rollt in sich, statt die Seite zu sprengen. */ /* Der Wandplaner: Monate als Spalten, Tage als Zeilen — wie ein Jahresplaner an der Wand. Das Raster ist breiter als ein Telefon; es rollt in sich, statt die Seite zu sprengen. */ .sr-cal-wrap { overflow-x: auto; padding-bottom: .3rem; } .sr-cal-planner { display: grid; grid-template-columns: repeat(12, minmax(78px, 1fr)); gap: 2px; min-width: 900px; } .sr-pl-head { position: sticky; top: 0; z-index: 1; padding: .35rem .4rem; border-radius: 5px 5px 0 0; background: var(--sr-ink); color: #fff; font: 800 .6rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; } .sr-pl-cell { display: flex; align-items: baseline; gap: .3rem; min-width: 0; padding: .18rem .35rem; border-radius: 3px; background: var(--sr-paper); color: var(--sr-ink-2); font: 600 .62rem/1.5 var(--font-body); text-decoration: none; } .sr-pl-cell i { font-style: normal; font-weight: 800; color: var(--sr-ink); } .sr-pl-cell u { text-decoration: none; font-size: .56rem; color: var(--sr-ink-3); } /* Wochenenden grau hinterlegt, wie auf dem Planer. */ .sr-pl-cell.is-weekend { background: var(--sr-ground-2); } .sr-pl-cell.is-void { background: transparent; } /* Ein belegter Tag traegt die Farbe seiner Serie; der Name steht am ersten Tag. */ .sr-pl-cell.is-mc, .sr-pl-cell.is-sm { color: #fff; } .sr-pl-cell.is-mc i, .sr-pl-cell.is-sm i, .sr-pl-cell.is-mc u, .sr-pl-cell.is-sm u { color: rgba(255, 255, 255, .9); } .sr-pl-cell.is-mc { background: var(--sr-red); } .sr-pl-cell.is-sm { background: #1f6fd0; } a.sr-pl-cell:hover { filter: brightness(1.12); } /* Der Name laeuft schraeg ueber die Tage des Termins, in Handschrift — wie auf einem Planer an der Wand. Er sitzt in der Mitte des Laufs (--sr-run zaehlt die Tage) und faengt keine Klicks ab, damit jeder Tag darunter anklickbar bleibt. */ .sr-pl-cell b.sr-hand { /* Mitte des Laufs, aber nie tiefer, als der Monat Felder hat (--sr-platz): sonst lief der Name eines kurzen Laufs am Monatsende unten aus dem Raster (Befund Sven 08.10.2026, Knutstorp 30.–31.07.). */ position: absolute; left: 62%; top: min(calc(var(--sr-run, 1) * 50%), calc(var(--sr-platz, 31) * 100% - 150%)); transform: translate(-50%, -50%) rotate(-13deg); /* Passt der Name nicht in die Spalte, bricht er auf zwei Zeilen — eine Zeile, die ueber den Nachbarmonat laeuft, verdeckt dessen Tage. */ max-width: 5.6rem; text-align: center; pointer-events: none; z-index: 2; font-size: 1.15rem; line-height: 1.02; color: var(--sr-ink); text-shadow: 0 1px 2px rgba(255, 255, 255, .5); } .sr-pl-cell { position: relative; } /* ── Der Blick auf einen Termin ────────────────────────────────────────── Die Seite bleibt, was sie ist: eine Adresse, verlinkbar, mit einem Zurueck-Knopf, der tut, was er soll. Nur das Aussehen leiht sich die Ruhe eines Fensters: eine Scheibe ueber allem, unscharf und dunkel, und die Tafel darueber. position:absolute und nicht fixed — in #sl-scroll steckt eine Perspektive, und die macht jedes feste Element am gescrollten Inhalt fest statt am Fenster. Ueber die ganze Hoehe der Seite reicht es auch so, weil .sr die ganze Seite ist. Die Scheibe faengt Klicks ab. Was zurueckgetreten ist, soll auch nicht mehr bedienbar sein — ein unscharfer Verweis, den man trotzdem trifft, ist schlimmer als keiner. Der Weg zurueck ist das Kreuz an der Tafel — und seit 08.10.2026 auch ein Klick auf die Scheibe selbst (Skript: trifft er die Wurzel, wird das Kreuz geklickt). Die Leiste oben liegt ausserhalb und bleibt. */ .sr-focus { position: relative; } .sr-focus::before { content: ""; position: absolute; inset: 0; z-index: 30; background: rgba(15, 18, 22, .45); -webkit-backdrop-filter: blur(2.5px) saturate(.95); backdrop-filter: blur(2.5px) saturate(.95); opacity: 1; transition: opacity .16s ease; animation: sr-veil .3s ease both; } /* Die Tafel steht ueber der Scheibe. */ .sr-focus .sr-right { position: relative; z-index: 31; } /* Der klebende Hero muss ueber dem hervorgehobenen Termin (z 31) liegen, sonst schiebt sich die Terminkarte beim Rollen ueber ihn (Befund Sven 08.10.2026). Darum steht er bei offener Tafel ueber allem und traegt die Scheibe selbst — gleiche Farbe, gleiche Unschaerfe, faengt Klicks. */ .sr-focus:not(:has(.sr-detail-modal)) > .sr-hero:not(:has(.sr-hero-profil)) { z-index: 32; } .sr-focus:not(:has(.sr-detail-modal)) > .sr-hero:not(:has(.sr-hero-profil))::after { content: ""; position: absolute; inset: 0; z-index: 50; border-radius: inherit; background: rgba(15, 18, 22, .45); -webkit-backdrop-filter: blur(2.5px) saturate(.95); backdrop-filter: blur(2.5px) saturate(.95); animation: sr-veil .3s ease both; } /* Die Terminschiene behaelt IMMER ihre Breite. Sie wurde frueher schmaler, sobald eine Tafel aufging (344 statt 392 px), damit die Tafel mehr Platz bekommt — dabei sprangen aber die Terminzeilen daneben bei jedem Oeffnen und Schliessen, und man liest sie gerade dann, wenn ein Termin offen ist. Die Schiene steht still, die Tafel nimmt, was uebrig ist. */ /* Das Kreuz sitzt in der Ecke der Tafel, nicht in der Kopfzeile: dort sucht man es, wenn etwas wie ein Fenster aussieht. Es ist ein Verweis und kein Knopf — die Uebersicht ist eine eigene Adresse, und der Weg dorthin soll sich teilen und im Verlauf merken lassen. */ /* EIN System fuer jedes Kreuz auf dieser Seite — Termin, Klasse und Infotafel sehen gleich aus: heller Kreis mit dunklem Zeichen, und erst beim Zeigen wird er rot. Vorher war dieses hier dauerhaft rot und das an der Klasse grau; Rot war damit staendig praesent, statt die Handlung zu markieren. Die Zwillingsregel steht bei .sr-cls-close — beide zusammen aendern. */ /* ── Das Kreuz ist ein ECKSTUECK ────────────────────────────────────────── Ansage vom 24.09.2026: „in die rechte obere Ecke des Containers packen und im gleichen Radius und Form zeichnen, wie die rechte obere Ecke des Containers aussieht." Also kein Kreis, der in der Ecke schwebt, sondern ein Stueck, das die Ecke des Kastens NACHZEICHNET: buendig an beiden Kanten, oben rechts derselbe Radius wie der Kasten (10 px, `--sr-karten-radius` — der Wert steht jetzt einmal und wird zweimal gelesen, statt zweimal geschrieben zu werden und beim naechsten Feilen auseinanderzulaufen). Unten links derselbe Radius noch einmal, damit das Stueck als Ecke liest und nicht als abgeschnittenes Rechteck; die beiden Kanten zum Inhalt hin tragen die Linie des Kastens. Es liegt ABSOLUT im Kasten und nicht mehr in der Kopfzeile — darum traegt die Kopfzeile rechts Platz dafuer, sonst laeuft der Titel darunter. */ .sr-card:has(.sr-close) { position: relative; } .sr-head:has(> .sr-close) { padding-right: 2.9rem; } .sr-close { /* -1 px: ueber die Kartenlinie hinweg, sonst laeuft die Linie der Karte oben und rechts um das Eckstueck herum (Bildschirmfoto Sven 08.10.2026: „das X hat rechts und oben noch borders"). So ist die Ecke offen, und nur links und unten traegt es die Linie. */ position: absolute; top: -1px; right: -1px; z-index: 6; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 0 var(--sr-karten-radius) 0 var(--sr-karten-radius); border: 0; border-left: 1px solid var(--sr-line); border-bottom: 1px solid var(--sr-line); /* Durchsichtig (Ansage Sven 08.10.2026: „gib dem button einen transparenten hintergrund") — es zeigt, was in der Ecke der Karte liegt. Beim Zeigen weiter rot. */ background: transparent; color: var(--sr-ink); text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease; } .sr-close:hover { background: var(--sr-red); border-color: var(--sr-red); color: #fff; } /* Gedreht wird das Kreuz, nicht das Eckstueck: eine sich drehende Ecke sieht aus, als loese sie sich vom Kasten. */ .sr-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; transition: transform .2s cubic-bezier(.2, .7, .3, 1); } .sr-close:hover svg { transform: rotate(90deg); } /* Die Infotafel steht ueber der Scheibe wie die Terminansicht — nur ueber die ganze Breite, weil dort keine Terminschiene daneben liegt. */ .sr-focus .sr-right > .sr-card { box-shadow: 0 2px 6px rgba(11, 13, 16, .06), 0 24px 60px rgba(11, 13, 16, .22); transform-origin: 50% 8%; animation: sr-grow .34s cubic-bezier(.2, .7, .3, 1) both; } /* ── Der weisse Schein um die Termin- und die Pakettafel ──────────────── Ansage vom 25.09.2026. NUR diese beiden: `sr-detail-modal` traegt die Huelle genau dann, wenn ein Termin oder ein Paket offen ist (siehe die Ansicht) — Warenkorb, Kasse, Portal und Infoseiten sind Seiten und keine Tafel ueber der Seite. Drei Ringe statt eines: ein harter Saum direkt am Rand, damit die Kante gegen den grauen Grund steht, und zwei weiche darum. Ein einzelner grosser Schein waere entweder am Rand zu schwach oder aussen eine Wolke. Der dunkle Schatten bleibt darunter — ohne ihn haengt die Tafel schwerelos im Bild. */ body.design-serienleiste .sr-detail-modal > .sr-right > .sr-card { box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 0 26px 4px rgba(255, 255, 255, .6), 0 0 64px 18px rgba(255, 255, 255, .3), 0 2px 6px rgba(11, 13, 16, .06), 0 24px 60px rgba(11, 13, 16, .22); } /* Waehrend getauscht wird, tritt der Hauptbereich kurz zurueck: das Alte blendet aus, das Neue kommt mit seiner eigenen Bewegung wieder (siehe die Ansicht — getauscht wird der Zweispalter, die Seite bleibt stehen). */ /* Langsamer und weicher (Ansage Sven 08.10.2026: „das einfaden der inhalte smoother gestalten, mach das langsamer einfaden & ausfaden darf sich zeit lassen"): aus in 0,4 s, ein in 0,7 s (sr-fade-weich), nur ein Hauch Bewegung statt des Zooms. Die Wartezeit vor dem Tausch steht im Skript (wechsle: 400 ms). */ .sr-right { transition: opacity .4s ease, transform .4s ease; } .sr-swapping .sr-right { opacity: 0; transform: translateY(4px); } @keyframes sr-fade-weich { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Das Abbild des alten Hauptbereichs beim Ueberblenden (08.10.2026): liegt an seiner alten Stelle ueber dem neuen und blendet in 0,85 s aus — schnell am Anfang —, der neue setzt 0,17 s spaeter ein und braucht 0,95 s, langsam am Anfang (zuletzt „minimal schneller" als 1,0 / 1,1 s). So ist die Strecke kurz, in der beide zu sehen sind (Ansagen Sven: 0,9/0,7 s „zu schnell", 1,6/1,4 s „zu langsam, man sieht kurz beide inhalte gleichzeitig"). */ .sr-cols { position: relative; } .sr-cols > .sr-right.sr-ueberblende { position: absolute; z-index: 3; margin: 0; pointer-events: none; animation: sr-ueberblende-aus .85s cubic-bezier(.15, .6, .3, 1) both; } .sr-cols > .sr-right.sr-ueberblende > * { animation: none; } @keyframes sr-ueberblende-aus { from { opacity: 1; } to { opacity: 0; } } .sr-focus.sr-swapping::before { animation: none; opacity: 0; } /* Leises Schliessen per Klick auf die Scheibe (08.10.2026): Tafel und Scheibe blenden gemeinsam aus, bevor getauscht wird — danach blendet nur ein, was zurueckkommt. */ .sr-focus::before { transition: opacity .2s ease; } .sr-zu .sr-right { transition: opacity .2s ease, transform .2s ease; opacity: 0; transform: scale(.985); } .sr-focus.sr-zu::before { animation: none; opacity: 0; } /* Und zurueck genauso: was neu im Hauptbereich steht, blendet ein — auch die Klassen und Gruppen beim Schliessen. Als Animation und nicht als Uebergang, weil ein frisch eingesetzter Knoten keinen Ausgangszustand hat, von dem aus etwas uebergehen koennte. Die Tafel einer Terminansicht hat ihre eigene, staerkere Regel (sr-grow) und bleibt dabei. */ .sr-right > * { animation: sr-fade-weich .95s cubic-bezier(.4, 0, .3, 1) .17s both; } /* ── Der Termin: auf dem Schreibtisch IM Hauptbereich, am Telefon als Fenster ──────────── (Ansage Sven 08.10.2026: „die eventdetails an der stelle zeigen, an der rennklassen, gruppen gezeigt werden … telefon mit fenster"). Ein Fenster ueber der Seite auch auf dem Schreibtisch war am selben Tag gebaut — dort setzte der Browser beim Schliessen einen alten Rollstand ein, und der verkleinerte Hero klappte auf. Im Hauptbereich gibt es keine Scheibe, kein Rollen, und die Liste daneben bleibt bedienbar. Am Telefon (bis 1080 px) zwei Wege zum Fenster: der weiche (.sr-modal-ebene, vom Skript ueber die Seite gelegt) und der harte Aufruf einer Terminadresse (.sr-detail-modal). */ /* Solange Eventdetails offen sind, steht der Tabellenstand (Top 3) nicht ueber der Liste (Ansage Sven 08.10.2026: „blende beim aufrufen der streckendetails die top3 leiste aus"). Am Zweispalter festgemacht, nicht am Skript: so gilt es auch fuer eine direkt aufgerufene Terminadresse, und beim Schliessen ist er von selbst wieder da. */ .sr:has(.sr-detail-modal) #sr-kopfzone .sr-stand-block { display: none; } /* Keine Scheibe auf dem Schreibtisch — die alte (.sr-focus::before) ist hier abgestellt. */ .sr-focus:has(.sr-detail-modal)::before { content: none; } /* Ohne Scheibe muss der offene Termin auch nicht ueber sie gehoben werden — mit z-index 31 schob er sich beim Rollen ueber den klebenden Hero (Befund Sven 08.10.2026). Roter Rahmen bleibt. */ .sr-focus:has(.sr-detail-modal) .sr-ev-on { z-index: auto; } @keyframes sr-ebene-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes sr-ebene-fade-aus { from { opacity: 1; } to { opacity: 0; } } @media (min-width: 1081px) { /* Unter dem klebenden Hero durch, nicht darueber — wie die Liste daneben (Bildschirmfoto Sven 08.10.2026: die Tafel lag ueber dem verkleinerten Hero). */ body.design-serienleiste .sr-focus .sr-detail-modal > .sr-right { z-index: auto; } /* Die Eventdetails blenden ein wie die Rennklassen und Gruppen (Ansage Sven 08.10.2026: „die eventdetails auch wie die rennklassen einfaden") — dieselbe Bewegung (sr-fade-in), statt des Wachsens (sr-grow) oder Hereinfahrens der frueheren Tafel. */ body.design-serienleiste .sr-focus .sr-detail-modal > .sr-right > .sr-card, body.design-serienleiste .sr-detail-modal > .sr-right > * { animation: sr-fade-weich .95s cubic-bezier(.4, 0, .3, 1) .17s both; } } @media (max-width: 1080px) { body.design-serienleiste .sr-modal-ebene > .sr-right, body.design-serienleiste .sr-detail-modal > .sr-right { position: fixed; z-index: 60; top: calc(64px + .75rem); left: 50%; transform: translateX(-50%); width: min(100% - 1.5rem, 42rem); max-height: calc(100vh - 64px - 1.5rem); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* Ohne sichtbaren Rollbalken (Ansage Sven 08.10.2026). */ scrollbar-width: none; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 0 30px 6px rgba(255, 255, 255, .34), 0 0 80px 22px rgba(255, 255, 255, .16), 0 24px 60px rgba(11, 13, 16, .45); } body.design-serienleiste .sr-modal-ebene > .sr-right::-webkit-scrollbar, body.design-serienleiste .sr-detail-modal > .sr-right::-webkit-scrollbar { display: none; } body.design-serienleiste .sr-modal-ebene > .sr-right > .sr-card, body.design-serienleiste .sr-detail-modal > .sr-right > .sr-card { box-shadow: none; margin-top: 0; } .sr-modal-ebene::before, .sr-detail-modal::before { content: ""; position: fixed; inset: 0; z-index: 59; background: rgba(11, 13, 16, .55); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); } /* Ein- und Ausblenden (Ansage Sven 08.10.2026), ohne Bewegung. */ .sr-modal-ebene::before, .sr-detail-modal::before { animation: sr-ebene-fade .3s ease both; } body.design-serienleiste .sr-modal-ebene > .sr-right, body.design-serienleiste .sr-detail-modal > .sr-right { animation: sr-ebene-fade .3s ease both; } .sr-modal-ebene.is-zu::before { animation: sr-ebene-fade-aus .25s ease both; } body.design-serienleiste .sr-modal-ebene.is-zu > .sr-right { animation: sr-ebene-fade-aus .25s ease both; } body.design-serienleiste .sr-modal-ebene > .sr-right > *, body.design-serienleiste .sr-focus .sr-detail-modal > .sr-right > .sr-card, body.design-serienleiste .sr-detail-modal > .sr-right > * { animation: none; } } @media (prefers-reduced-motion: reduce) { .sr-modal-ebene::before, .sr-detail-modal::before, body.design-serienleiste .sr-modal-ebene > .sr-right, body.design-serienleiste .sr-detail-modal > .sr-right, body.design-serienleiste .sr-detail-modal > .sr-right > * { animation: none; } } /* ── Der Warenkorb kommt von drei Seiten ──────────────────────────────── Er blendete ein wie jede andere Tafel — und las sich dadurch wie eine Seite, die zufaellig erschienen ist. Er ist aber etwas anderes: drei Teile, die zusammengehoeren. Sie kommen darum aus ihren Richtungen herein — die Buchung von links, die Summe von rechts, die weiteren Termine von unten — und setzen sich zu einem Bild zusammen. Der Zweispalter selbst blendet dabei NICHT mit ein: sonst lief seine Bewegung gegen die seiner Kinder, und beide wurden matt. */ .sr-right > .sr-kurv-wrap { animation: none; } .sr-right > .sr-kurv-wrap > .sr-kurv { animation: sr-kurv-links .40s cubic-bezier(.2, .7, .3, 1) both; } .sr-right > .sr-kurv-wrap > .sr-kurv-booking { animation: sr-kurv-rechts .40s cubic-bezier(.2, .7, .3, 1) both; } /* Nach dem Entfernen eines Fahrers wird still ausgetauscht (29.09.2026) — ohne Hereinfliegen. */ .sr-right > .sr-kurv-wrap.sr-kurv-still > * { animation: none; } /* Einen Hauch spaeter: erst steht, was man gekauft hat, dann der Vorschlag darunter. */ .sr-right > .sr-kurv-next { animation: sr-kurv-unten .40s cubic-bezier(.2, .7, .3, 1) .08s both; } @keyframes sr-kurv-links { from { opacity: 0; transform: translate3d(-40px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes sr-kurv-rechts { from { opacity: 0; transform: translate3d(40px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes sr-kurv-unten { from { opacity: 0; transform: translate3d(0, 44px, 0); } to { opacity: 1; transform: none; } } @keyframes sr-fade-in { from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: none; } } @keyframes sr-veil { from { opacity: 0; } to { opacity: 1; } } @keyframes sr-grow { from { transform: scale(.965); opacity: 0; } to { transform: none; opacity: 1; } } /* ── Der Serienwechsel fliegt ────────────────────────────────────────────── Beim Umschalten verschwand der Inhalt der einen Serie schlagartig und der der anderen stand da. Jetzt raeumt das Alte Stueck fuer Stueck zur Seite — jeder Termin einzeln, jede Karte des Hauptbereichs einzeln — und das Neue kommt in derselben Ordnung von der Gegenseite herein. Die Richtung folgt dem Umschalter: nach rechts geschaltet heisst nach links hinaus. Den Versatz je Stueck setzt das Skript (animation-delay), weil er von der Position in der Liste abhaengt. */ .sr .sr-flug-raus, .sr .sr-flug-rein { animation-duration: .2s; animation-timing-function: cubic-bezier(.33, 0, .2, 1); animation-fill-mode: both; will-change: transform, opacity; } .sr .sr-flug-raus { animation-name: sr-flug-raus; } .sr .sr-flug-rein { animation-name: sr-flug-rein; } @keyframes sr-flug-raus { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(var(--sr-flug-x, -34px), 0, 0); } } @keyframes sr-flug-rein { from { opacity: 0; transform: translate3d(calc(var(--sr-flug-x, -34px) * -1), 0, 0); } to { opacity: 1; transform: none; } } /* ── Platz machen fuer einen Termin ───────────────────────────────────── Klassen und Gruppen raeumen nach AUSSEN — was links steht nach links, was rechts steht nach rechts —, und die Tafel des Termins kommt von rechts herein. Den Weg je Kachel rechnet das Skript aus ihrer Lage (--sr-aussen); eine gemeinsame Richtung sah aus, als rutsche die ganze Seite weg. */ .sr .sr-flug-aussen { animation: sr-flug-aussen .18s cubic-bezier(.4, 0, .9, .4) both; will-change: transform, opacity; } @keyframes sr-flug-aussen { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(var(--sr-aussen, -120%), 0, 0); } } /* Und zurueck: was beim Oeffnen nach aussen ging, kommt beim Schliessen von dort wieder. */ .sr .sr-flug-aussen-rein { animation: sr-flug-aussen-rein .42s cubic-bezier(.2, .7, .3, 1) both; will-change: transform, opacity; } @keyframes sr-flug-aussen-rein { from { opacity: 0; transform: translate3d(var(--sr-aussen-x, 0), var(--sr-aussen-y, 0), 0) rotate(var(--sr-dreh, 0deg)); } to { opacity: 1; transform: none; } } /* Die Kopfzone kommt mit, wenn die Kacheln zurueckkommen: der Umschalter von oben, der Tabellenstand von links. Sie gehoeren zur selben Bewegung — kaemen sie einfach so wieder, saehe es aus, als waeren sie nie weg gewesen. */ .sr .sr-rein-oben { animation: sr-rein-oben .38s cubic-bezier(.2, .7, .3, 1) both; } .sr .sr-rein-links { animation: sr-rein-links .42s cubic-bezier(.2, .7, .3, 1) .06s both; } @keyframes sr-rein-oben { from { opacity: 0; transform: translate3d(0, -34px, 0); } to { opacity: 1; transform: none; } } @keyframes sr-rein-links { from { opacity: 0; transform: translate3d(-52px, 0, 0); } to { opacity: 1; transform: none; } } /* Beim Wechsel von einem Termin zum naechsten geht die alte Tafel nach rechts hinaus — dahin, woher die naechste kommt. */ .sr .sr-flug-rechts-raus { animation: sr-flug-rechts-raus .26s cubic-bezier(.4, 0, .9, .4) both; will-change: transform, opacity; } @keyframes sr-flug-rechts-raus { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(64px, 0, 0); } } /* Und die Tafel kommt von rechts statt aufzublenden — sie kommt von dort, wo die Kachelreihe eben Platz gemacht hat. DIE ZWEITE ZEILE IST PFLICHT. Auf einer Terminseite traegt die Wurzel sr-focus, und deren Regel (.sr-focus .sr-right > .sr-card) ist spezifischer als diese hier — ohne den Zusatz wuchs die Tafel wie gehabt aus der Mitte, statt von rechts hereinzukommen. Genau daran lag es, dass der Wechsel von Termin zu Termin nicht flog. */ .sr-rein-rechts .sr-right > *, .sr-focus.sr-rein-rechts .sr-right > .sr-card { animation: sr-rein-rechts .30s cubic-bezier(.2, .7, .3, 1) both; } @keyframes sr-rein-rechts { from { opacity: 0; transform: translate3d(56px, 0, 0); } to { opacity: 1; transform: none; } } /* ─── Der Schriftwechsel im Hero ────────────────────────────────────────────────────── Der Hero ist auf der Profilseite ihr Kopf (Auftrag 20.09.2026). Er wird dabei nicht ausgetauscht, sondern WECHSELT SEINE SCHRIFT: die alte Ansage hebt sich weg, die neue kommt von unten nach — und beim Schliessen ebenso zurueck. Dieselbe Sprache wie der Serienwechsel (siehe ADR „Der Serienwechsel fliegt"): erst hinaus, dann herein, nicht ueberlappend. Der Versatz je Zeile steht hier und nicht im Skript, weil er an der Reihenfolge im Kopf haengt und nicht an einer Messung. */ @keyframes sr-kopf-raus { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, -22px, 0); } } @keyframes sr-kopf-rein { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } } .sr-kopf-raus .sr-hero-col > *, .sr-kopf-raus .pf-head-say > *, .sr-kopf-raus .pf-card { animation: sr-kopf-raus .22s ease both; } .sr-kopf-rein .sr-hero-col > *, .sr-kopf-rein .pf-head-say > * { animation: sr-kopf-rein .40s cubic-bezier(.2, .7, .3, 1) both; } .sr-kopf-rein .pf-head-say > *:nth-child(2) { animation-delay: .05s; } .sr-kopf-rein .pf-head-say > *:nth-child(3) { animation-delay: .10s; } .sr-kopf-rein .pf-head-say > *:nth-child(4) { animation-delay: .15s; } .sr-kopf-rein .sr-hero-col > *:nth-child(2) { animation-delay: .05s; } .sr-kopf-rein .sr-hero-col > *:nth-child(3) { animation-delay: .10s; } .sr-kopf-rein .sr-hero-col > *:nth-child(4) { animation-delay: .15s; } /* Der Personenkasten fliegt von der Seite herein und zuletzt: er ist das, was man auf dieser Seite sucht, und eine Bewegung, die als letzte endet, ist die, die man ansieht. */ @keyframes sr-kopf-kasten { from { opacity: 0; transform: translate3d(38px, 10px, 0) scale(.96); } to { opacity: 1; transform: none; } } .sr-kopf-rein .pf-card { animation: sr-kopf-kasten .46s cubic-bezier(.2, .7, .3, 1) .16s both; } @media (prefers-reduced-motion: reduce) { .sr .sr-flug-aussen, .sr .sr-flug-aussen-rein, .sr .sr-flug-rechts-raus, .sr .sr-rein-oben, .sr .sr-rein-links, .sr-kopf-raus .sr-hero-in > *, .sr-kopf-raus .sr-hero-col > *, .sr-kopf-raus .pf-head-say > *, .sr-kopf-raus .pf-card, .sr-kopf-rein .sr-hero-col > *, .sr-kopf-rein .pf-head-say > *, .sr-kopf-rein .pf-card, .sr-rein-rechts .sr-right > *, .sr-focus.sr-rein-rechts .sr-right > .sr-card { animation: none; } .sr-focus::before, .sr-focus .sr-right > .sr-card, .sr-right > * { animation: none; } /* Der Hero wechselt seine Groesse auch hier, aber ohne Fahrt: der Zustand stimmt, die Bewegung faellt weg (Auftrag vom 24.09.2026). */ body.sr-hero-weich .sr-hero:not(:has(.sr-hero-profil)), body.sr-hero-weich .sr-hero-in:not(.sr-hero-profil), body.sr-hero-weich .sr-hero-in:not(.sr-hero-profil) .sr-hero-sub, body.sr-hero-weich .sr-hero-in:not(.sr-hero-profil) .sr-lede, body.sr-hero-weich .sr-hero-in:not(.sr-hero-profil) .sr-hero-h1, body.sr-hero-weich .sr-hero-tag, /* Die Karte „naechster Termin" ebenso: sie ist da oder nicht, ohne Einblenden. */ body.sr-hero-weich .sr-hero-next, body.sr-hero-weich:not(.sr-hero-klein) .sr-hero-next { transition: none; } .sr-right > .sr-kurv-wrap > .sr-kurv, .sr-right > .sr-kurv-wrap > .sr-kurv-booking, .sr-right > .sr-kurv-next { animation: none; } .sr .sr-flug-raus, .sr .sr-flug-rein { animation: none; } .sr-right { transition: none; } } /* ── Eine Seite des Kontos in der Tafel ────────────────────────────────── Profil, Team und Crew waren ganze Seiten und bringen deren Polster und Breitengrenzen mit. In der Tafel sind beide schon da, also treten sie hier zurueck. Und der Titel steht im Kopf der Tafel — die Seite muss ihn nicht ein zweites Mal ueber ihr eigenes Bild schreiben. */ body.design-serienleiste .sr-portal .pf-body-wrap { max-width: none; padding-left: 0; padding-right: 0; } /* ── Karten und Abschnittsköpfe ─────────────────────────────────────────── */ .sr-card { --sr-karten-radius: 10px; background: var(--sr-paper); border: 1px solid var(--sr-line); border-radius: var(--sr-karten-radius); box-shadow: var(--sr-shadow); min-width: 0; } /* Als Variable, weil die Buchungsbestaetigung sie wieder herausholt, um mit ihrem Bild bis an die Kanten des Kastens zu laufen. Zwei Zahlen dafuer liefen beim ersten Feilen auseinander, und der Streifen saesse dann schief im Kasten. */ .sr-block { --sr-block-pad-x: 1.25rem; --sr-block-pad-b: 1.35rem; padding: 1.15rem var(--sr-block-pad-x) var(--sr-block-pad-b); } .sr-block-top { margin-bottom: 1.1rem; } /* Der Kasten um den Tabellenstand polstert knapper als eine Inhaltstafel. */ .sr-block:has(> .sr-head + .sr-stand) { padding: .9rem 1.25rem 1rem; } .sr-block-bottom { margin-top: 1.1rem; } .sr-head { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .2rem; } /* Das Zeichen vor der Ueberschrift — es sitzt auf der Schriftlinie, nicht auf der Grundlinie des Kastens, sonst haengt es unter dem Titel. */ .sr-head-ico { flex: none; width: 22px; height: 22px; align-self: center; color: var(--sr-ink); } .sr-head-ico svg { width: 100%; height: 100%; display: block; fill: currentColor; } .sr-events-col > .sr-head .sr-head-ico { display: inline-block; vertical-align: -5px; margin-right: .5rem; } .sr-head h2 { font-size: 1.5rem; } .sr-qual { font: 600 .92rem/1 var(--font-body); color: var(--sr-ink-3); } .sr-more { margin-left: auto; font: 700 .68rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--sr-ink-2); white-space: nowrap; text-decoration: none; } .sr-more:hover { color: var(--sr-red); } .sr-head-lede { margin: .45rem 0 1rem; font-size: .84rem; } /* Luft zwischen der Abschnittsueberschrift und den Kacheln (Ansage vom 25.09.2026: „der abstand zwischen 'raceklasser' und dem beginn der kacheln muss groesser"). Gemessen waren es 14 px — dieselbe Luft wie zwischen zwei Kacheln, und damit sah die Ueberschrift aus wie eine weitere Zeile des Rasters statt wie sein Kopf. Beide Rasterarten, sonst stuenden die zwei Abschnitte verschieden weit unter ihrer Ueberschrift. DAS MASS IST GEMESSEN UND NICHT GEWAEHLT (Ansage vom 25.09.2026: „der obere rand der kacheln soll sich am oberen rand des ersten events aus der liste ausrichten"). Die Terminliste links beginnt 13,4 px hoeher als das Raster rechts, weil die beiden Spalten verschieden gebaut sind: links Ueberschrift und Kalenderverweis ohne Kasten, rechts eine Tafel mit eigenem Polster. 51,2 − 13,4 = 37,8 px bringt die erste Kachel auf die Hoehe der ersten Terminzeile. In Pixeln und nicht in rem, weil es ein Abgleich mit einem gemessenen Nachbarn ist und kein Schriftmass. NEU GEMESSEN 08.10.2026 (Ansage Sven: „die oberkante der ersten reihe der rennklasse kachel muss mit der oberkante des ersten event links (aktuell speedpakke) abschliessen"): der Kalender-Knopf neben „Kommende Termine" streckt die Kopfzeile nicht mehr, die Liste beginnt darum 22,4 px hoeher als zuvor — 37,8 − 22,4 = 15,4 px. Bei 1440 px nachgemessen: beide Oberkanten gleich. MIT DER TILDE UND NICHT MIT DEM PLUS: es gibt EIN Raster JE SERIE, und nur das erste ist der direkte Nachbar der Ueberschrift — das zweite folgt auf das erste. Mit `+` bekam „MC Trackdays" seine Luft und „Supermoto & Mini" nicht, und weil beim Umschalten das eine ausgeblendet und das andere gezeigt wird, sah man den Unterschied erst beim Wechseln. Ein ausgeblendetes Geschwister zaehlt fuer den Waehler trotzdem mit. */ .sr-head ~ .sr-cls-grid, .sr-head ~ .sr-grp-grid { margin-top: 15.4px; } /* Der Tabellenstand steht auf JEDER Seite der Serie und darf darum wenig Platz kosten: wenig Luft in der Liste, kleinere Zeilen. Gelesen wird er im Vorbeigehen. Ueber der Liste etwas mehr als zuvor (Ansage Sven 08.10.2026: Abstand Titel → Top 3 „ein wenig groesser", .55 → 1rem). */ .sr-head + .sr-stand { margin-top: 1rem; } /* ── Hauptbereich: Termine links, Klassen und Gruppen rechts ────────────── */ .sr-cols { display: grid; grid-template-columns: 392px 1fr; gap: 1.1rem; align-items: start; padding-bottom: 2.6rem; } /* Ohne min-width:0 wächst eine 1fr-Spalte auf die Breite ihres Inhalts. */ .sr-cols > * { min-width: 0; } /* Der Tabellenstand als letzte Zeile ueber beide Spalten (Ansage Sven 25.10.2026: erst Gruppen, dann Klassen, danach Stillingen) — volle Breite, damit alle Klassen weiter in einer Zeile stehen. */ .sr-cols > .sr-stand-unten { grid-column: 1 / -1; } /* Ohne Terminschiene nur eine Spalte — siehe die Ansicht. */ .sr-cols-solo { grid-template-columns: 1fr; } /* Der Warenkorb schiebt sich unter den Hero — die Tafel ueberlappt dessen Unterkante, wie in der Vorlage. Derselbe Griff wie beim Umschalter (negativer Rand plus z-index), und er geht hier nur auf, WEIL der Umschalter im Warenkorb fehlt: beide zugleich lagen uebereinander. Der Hero laeuft unten schraeg aus; der Betrag ist darauf abgestimmt und nicht geraten. Seit 12.10.2026 (#376) nur noch ohne festen kleinen Kopf — mit ihm laege die Tafel unter dem stehenden Streifen. */ .sr-cols-over { position: relative; z-index: 20; margin-top: -58px; } /* Kaufweg mit festem kleinem Kopf am Telefon: ohne Umschalter stiesse die Tafel direkt an die Kopfleiste. */ @media (max-width: 860px) { .sr-cols-kaufweg { margin-top: 1rem; } } /* Hier stand .sr-portal-profile-over (-64 px). Die Profiltafel lappte weiter ueber den Hero als der Warenkorb — auf Ansage vom 25.09.2026 lappt sie gar nicht mehr: der Hero traegt den Kopf der Seite, und was darueber schiebt, schneidet ihn an. */ /* Und das Kreuz sitzt in der sonst leeren Kopfzeile der Tafel — sie traegt beim Profil keinen Titel mehr (den nennt der Hero), also braucht sie eine Mindesthoehe, sonst klebt das Kreuz auf der Reiterleiste. */ .sr-portal-profile .sr-head { min-height: 2.2rem; justify-content: flex-end; } /* Die Terminspalte reicht bis zur Unterkante der Tafeln rechts (Klassen UND Gruppen); die Kachel „Er du ny?" unten fuellt, was die Liste nicht braucht. Darum stretch statt start: die Hoehe der Spalte kommt sonst nur von ihrem Inhalt. */ .sr-cols:not(.sr-cols-solo) > .sr-events-col { align-self: stretch; display: flex; flex-direction: column; } /* Der Kopf der Terminspalte steht in einer schmalen Spalte: „Kommende events" brach neben dem Verweis um. Titel auf EINE Zeile, der Verweis rechtsbuendig darunter. Das Polster oben ist das der Tafel daneben (.sr-block): die Spalte hat keinen Kasten um sich, und ohne diesen Ausgleich saesse „Kommende Termine" hoeher als „Rennklassen". */ /* Die 4 px obendrauf sind der Unterschied der beiden Koepfe: rechts stehen Zeichen und Titel in einer Reihe (flex, an der Grundlinie), links inline im Textfluss. Gemessen, nicht geschaetzt — und in allen vier Sprachen derselbe Wert, weil er vom Aufbau kommt und nicht vom Wort. */ .sr-events-col > .sr-head { display: block; padding: calc(1.15rem + 4px) .2rem 0; } .sr-events-col > .sr-head .sr-display { display: inline; white-space: nowrap; font-size: 1.5rem; } .sr-events-col > .sr-head .sr-more { display: block; margin: .3rem 0 0; text-align: right; } /* „Ganzen Kalender ansehen" als Symbol rechts neben der Überschrift (Ansage Sven 07.10.2026). Das Symbol ist hoeher als die Zeile und darf sie nicht strecken (negativer Rand oben/unten): sonst rueckt die Ueberschrift in seine Mitte und steht tiefer als „Rennklassen" daneben. Als Flexzeile faellt ausserdem der Zeilenkasten des Inline-Titels weg — darum 2 px statt 4 px. Nachgemessen 08.10.2026 bei 1440 px: beide Oberkanten auf 0,1 px gleich (Ansage Sven: „oberkante … muss mit der oberkante von ‚rennklassen' übereinstimmen"). */ .sr-events-col > .sr-head:has(.sr-more-ikon) { display: flex; align-items: center; padding-top: calc(1.15rem + 2px); } .sr-events-col > .sr-head .sr-more.sr-more-ikon { display: inline-grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; margin: -.4rem 0 -.4rem auto; border: 1px solid var(--sr-line); border-radius: 999px; background: #fff; color: var(--sr-ink); } .sr-events-col > .sr-head .sr-more.sr-more-ikon:hover { border-color: var(--sr-red); color: var(--sr-red); } .sr-more-ikon svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Etwas knapper als zuvor (rund 7 % weniger Hoehe je Zeile): links sollen ebenso viele Termine stehen wie rechts Klassenkacheln, damit der Block unten auf einer Kante endet. */ .sr-events { display: flex; flex-direction: column; gap: .3rem; margin-top: .7rem; } .sr-ev { display: grid; grid-template-columns: 52px 1fr auto 14px; align-items: center; gap: .7rem; padding: .6rem .75rem .6rem .6rem; background: var(--sr-paper); text-decoration: none; color: inherit; border: 1px solid var(--sr-line); border-radius: 8px; box-shadow: var(--sr-shadow); transition: border-color .15s ease, transform .15s ease, box-shadow .3s ease; position: relative; overflow: hidden; } .sr-ev:hover { border-color: var(--sr-line-2); transform: translateX(2px); color: inherit; box-shadow: var(--sr-hover-glow), var(--sr-shadow); } /* Beim Zeigen laeuft ein roter Lichtstreif einmal schraeg durch die Zeile (Ansage Sven 08.10.2026: „ein hover bei event soll einen roten flash durch die kachel laufen lassen"), dazu derselbe Schein wie an den Klassenkacheln. Als Animation und nicht als Uebergang: er laeuft bei jedem Zeigen von links nach rechts und beim Wegziehen nicht zurueck. Er liegt ueber dem Inhalt, faengt aber keinen Zeiger. Nachgezogen am selben Tag: „langsamer und schwaecher und breiter" — 1,4 s statt 0,75 s, Rot bei 18 % statt 42 %, 80 % statt 45 % der Zeile. */ .sr-ev::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 80%; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--sr-red) 10%, transparent) 35%, color-mix(in srgb, var(--sr-red) 18%, transparent) 50%, color-mix(in srgb, var(--sr-red) 10%, transparent) 65%, transparent 100%); transform: translateX(-120%) skewX(-18deg); } .sr-ev:hover::after { animation: sr-ev-flash 1.4s cubic-bezier(.35, .5, .4, 1) 1; } @keyframes sr-ev-flash { 0% { opacity: 1; transform: translateX(-120%) skewX(-18deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(150%) skewX(-18deg); } } @media (prefers-reduced-motion: reduce) { .sr-ev:hover::after { animation: none; } } /* Das Datum als Kalenderblatt: roter Kopf mit dem Monat, weisses Blatt mit dem Tag. Die Umkehr der Spalte spart eine Aenderung an der Ansicht — dort steht der Tag zuerst, weil er vorgelesen zuerst kommen soll. Das Ticketzeichen des Saisonpakets bleibt aussen vor. */ .sr-ev-date:not(.sr-ev-ticket) { display: flex; flex-direction: column-reverse; overflow: hidden; border-radius: 7px; border: 1px solid var(--sr-line); background: var(--sr-paper); box-shadow: 0 1px 2px rgba(20, 22, 26, .07); } .sr-ev-date:not(.sr-ev-ticket) span { background: var(--sr-red); color: #fff; margin: 0; padding: .22rem 0 .24rem; font: 800 .5rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; text-align: center; } .sr-ev-date:not(.sr-ev-ticket) b { padding: .28rem 0 .32rem; text-align: center; color: var(--sr-ink); font: 900 1.2rem/1 var(--font-body); letter-spacing: -.02em; } .sr-ev-ticket { text-align: center; border-radius: 7px; padding: .5rem .2rem; background: var(--sr-ground-2); } /* In der Eventliste (.sr-ev) ist das Kalenderblatt seit 19.10.2026 eine Tageskachel wie im Event-Hero (.sr-ek-kachel, Sven, #557): Tag kursiv mit rotem Strich, Monat klein darunter — hier hell mit dunkler Schrift, beim geoeffneten Termin dunkel mit weisser (siehe .sr-ev-on). Buchungsfenster, Warenkorb und Bestaetigung behalten das Blatt oben. */ .sr-ev .sr-ev-date:not(.sr-ev-ticket), .sr-kurv-card .sr-ev-date:not(.sr-ev-ticket), .sr-kurv-fz-tage .sr-ev-date:not(.sr-ev-ticket), .sr-neues .sr-ev-date:not(.sr-ev-ticket) { flex-direction: column; justify-content: center; align-items: center; } .sr-ev .sr-ev-date:not(.sr-ev-ticket) b, .sr-kurv-card .sr-ev-date:not(.sr-ev-ticket) b, .sr-kurv-fz-tage .sr-ev-date:not(.sr-ev-ticket) b, .sr-neues .sr-ev-date:not(.sr-ev-ticket) b { position: relative; color: var(--sr-ink); padding: .3rem .1rem .22rem 0; margin-bottom: .14rem; font: italic 900 1.2rem/1 'Figtree', var(--font-display), sans-serif; letter-spacing: -.01em; } .sr-ev .sr-ev-date:not(.sr-ev-ticket) b::after, .sr-kurv-card .sr-ev-date:not(.sr-ev-ticket) b::after, .sr-kurv-fz-tage .sr-ev-date:not(.sr-ev-ticket) b::after, .sr-neues .sr-ev-date:not(.sr-ev-ticket) b::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 78%; height: 3px; border-radius: 2px; transform: translateX(-50%); background: var(--sr-red); } .sr-ev .sr-ev-date:not(.sr-ev-ticket) span, .sr-kurv-card .sr-ev-date:not(.sr-ev-ticket) span, .sr-kurv-fz-tage .sr-ev-date:not(.sr-ev-ticket) span, .sr-neues .sr-ev-date:not(.sr-ev-ticket) span { background: none; color: var(--sr-ink-2); padding: 0 0 .4rem .16em; letter-spacing: .16em; } /* ZWEI ZUSTAENDE, ZWEI SPRACHEN — Entscheidung 19.09.2026. Vorher trugen beide denselben roten Rahmen: der naechste Termin und der, dessen Tafel gerade offen ist. Damit sagte der Rahmen zwei verschiedene Dinge, und welches gemeint war, stand nicht mehr darin. Jetzt gehoert jedem Zustand ein eigenes Zeichen: • DER NAECHSTE spricht — rote Marke ueber dem Namen. Kein Rahmen, und seit 19.10.2026 auch keine rote Datumsflaeche mehr: sein Kalenderblatt sieht aus wie jedes andere (Ansage Sven, Backlog #557). Er ist eine Tatsache des Kalenders, keine Auswahl. • DER GEOEFFNETE rahmt — roter Rand, roter Pfeil (siehe .sr-ev-on). Keine Marke. Er ist das Gegenstueck zur offenen Tafel, also eine Handlung des Lesers. Faellt beides zusammen, gewinnt der Rahmen und die Marke tritt ab — sonst stuenden wieder zwei Zeichen an einer Zeile. */ .sr-ev-flag { display: inline-block; margin-bottom: .18rem; padding: .16rem .4rem .18rem; border-radius: 4px; background: var(--sr-red); color: #fff; font: 800 .52rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; } .sr-ev-name { display: block; font: 800 .85rem/1.12 var(--font-body); text-transform: uppercase; } /* Gelaufene Termine (#559, Ansage Sven 19.10.2026): dieselbe Zeile, abgeschwaecht — grauer Grund, Schrift und Strich gedaempft, Marke „Vorbei" grau statt rot. Rot bleibt dem Kommenden. */ .sr-ev-vorbei { background: var(--sr-ground-2, #f2f3f5); box-shadow: none; } /* Vergangene eingeklappt hinter einem kleinen Link (31.10.2026); ohne Unterstrich (Ansage Sven 10.11.2026: „vergangene events nicht unterstreichen“). */ .sr-ev-vergangen > summary { display: inline-flex; align-items: center; gap: .35rem; margin: .1rem 0 .2rem .2rem; cursor: pointer; list-style: none; font: 600 .74rem/1.3 var(--font-body); color: var(--sr-ink-3); text-decoration: none; } .sr-ev-vergangen > summary::-webkit-details-marker { display: none; } .sr-ev-vergangen > summary::before { content: "▸"; font-size: .7em; text-decoration: none; transition: transform .15s ease; } .sr-ev-vergangen[open] > summary::before { transform: rotate(90deg); } .sr-ev-vergangen > summary:hover { color: var(--sr-ink-2); } .sr-ev-vergangen-liste { display: flex; flex-direction: column; gap: .3rem; margin: .2rem 0 .3rem; } .sr-ev-vorbei .sr-ev-name, .sr-ev-vorbei .sr-ev-date:not(.sr-ev-ticket) b { color: var(--sr-ink-3); } .sr-ev-vorbei .sr-ev-date:not(.sr-ev-ticket) { background: transparent; box-shadow: none; } .sr-ev-vorbei .sr-ev-date:not(.sr-ev-ticket) b::after { background: var(--sr-ink-3); opacity: .55; } .sr-ev-vorbei .sr-ev-sub, .sr-ev-vorbei .sr-ev-meta span, .sr-ev-vorbei .sr-ev-date:not(.sr-ev-ticket) span { color: var(--sr-ink-3); opacity: .8; } .sr-ev-flag.is-vorbei { background: var(--sr-ink-3); } .sr-ev-sub { display: block; color: var(--sr-ink-2); font-size: .73rem; margin-top: .05rem; } .sr-ev-meta { display: flex; flex-direction: column; gap: .18rem; align-items: flex-end; } .sr-ev-meta span { font-size: .68rem; color: var(--sr-ink-3); white-space: nowrap; } .sr-ev-go { color: var(--sr-ink-3); font-weight: 800; } /* ── „Er du ny?" ───────────────────────────────────────────────────────── Dieselbe Sprache wie die Klassenkacheln: Foto ganz, dunkler Fuss, Text darauf. Sie nimmt den Platz, den die Terminliste unter sich laesst — nach unten gedeckelt, damit sie auf einer Terminseite, wo rechts eine sehr hohe Tafel steht, kein Plakat wird. */ /* Newsletter „Bleib auf dem Laufenden" über „Er du ny?" (11.10.2026): weiße Karte mit rotem Strich, Feld und Knopf in einer Zeile. */ .sr-nl { display: flex; flex-direction: column; gap: .45rem; margin-top: .55rem; padding: .9rem 1rem .85rem; border-radius: 10px; background: var(--sr-paper, #fff); border: 1px solid var(--sr-line); border-left: 3px solid var(--sr-red); box-shadow: 0 1px 3px rgba(11, 13, 16, .08); } .sr-nl-titel { font: italic 900 1rem/1.1 var(--font-display, var(--font-body)); text-transform: uppercase; color: var(--sr-ink); } .sr-nl-zeile { display: flex; gap: .4rem; } .sr-nl-zeile input { flex: 1; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--sr-line-2, #d6d8dc); border-radius: 8px; font: 500 .85rem/1.2 var(--font-body); color: var(--sr-ink); background: #fff; } .sr-nl-zeile input:focus { outline: 2px solid var(--sr-red); outline-offset: 1px; border-color: transparent; } .sr-nl-zeile button { flex: none; padding: .55rem .85rem; border: 0; border-radius: 8px; background: var(--sr-red); color: #fff; cursor: pointer; font: 800 .72rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; } .sr-nl-zeile button:hover { background: var(--sr-red-2, #b3151a); } .sr-nl-falle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .sr-nl-ok { margin: 0; font-size: .82rem; line-height: 1.4; color: #1f6f43; font-weight: 600; } .sr-nl-fehler { margin: 0; font-size: .75rem; color: var(--sr-red); } /* Hinweis auf die Datenschutzerklaerung (12.10.2026, #379) — Kachel und Kasse. */ .sr-kasse-datenschutz a { color: inherit; text-decoration: underline; } .sr-kasse-datenschutz { margin: .35rem 0 0; font-size: .78rem; opacity: .75; } .sr-new { position: relative; display: block; overflow: hidden; /* Niedriger (Ansage Sven 05.11.2026: „er du nye hat noch die grosse kachel“ / „dieselbe karte, nur niedriger“) — vorher 210–420px, derselbe Aufbau (Vollbild-Foto, Text unten drüber), nur kürzer. */ flex: 1 1 auto; min-height: 120px; max-height: 160px; margin-top: .55rem; /* Weisser Grund statt dunklem (Meldung Sven 15.10.2026: „einige kacheln haben einen minimalen schwarzen rand beim ersten aufruf, nach einem hover ist er weg“): bei Bruchteilen eines Pixels schimmert der Grund an der Bildkante durch, und ein dunkler Grund zeichnet dort einen Strich. Das Beschriftungsfeld hat seinen eigenen Grund. */ border-radius: 10px; background: var(--sr-paper); color: #fff; text-decoration: none; box-shadow: 0 1px 3px rgba(11, 13, 16, .12), 0 8px 20px rgba(11, 13, 16, .10); transition: transform .15s ease, box-shadow .15s ease; } /* Weicher Schatten für die drei Bereiche Intro („Er du ny?“), Gruppen und Rennklassen (Ansage Sven 01.11.2026: „gib den bereichen "gruppen" "rennklassen" "intro" einen weichen schatten“) — breit und hell, damit sie sich vom Grund heben. */ body.design-serienleiste .sr-new:not(:hover), body.design-serienleiste .sr-card.sr-grp-block, body.design-serienleiste .sr-card.sr-cls-block { box-shadow: 0 2px 6px rgba(11, 13, 16, .05), 0 14px 36px rgba(11, 13, 16, .11); } .sr-new:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 2px 6px rgba(11, 13, 16, .14), 0 16px 32px rgba(11, 13, 16, .16); } /* Ausschnitt weiter oben (Ansage Sven 05.11.2026: „die köpfe bei der er du ny dürfen nicht abgeschnitten sein“) — die niedrigere Karte (s.o.) schneidet bei 42% die Köpfe ab; 12% hält sie im Bild, auch am schmalsten Platz. */ .sr-new img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: transform .5s ease; } .sr-new:hover img { transform: scale(1.04); } .sr-new::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 13, 16, .12) 0%, rgba(11, 13, 16, .30) 38%, rgba(11, 13, 16, .80) 78%, rgba(11, 13, 16, .92) 100%); } .sr-new-in { position: absolute; left: 1rem; right: 1rem; bottom: .95rem; z-index: 1; display: block; } .sr-new-title { display: block; font: 900 1.15rem/1.08 var(--font-display); text-transform: uppercase; letter-spacing: .01em; } .sr-new-body { display: block; margin-top: .35rem; font-size: .78rem; line-height: 1.45; color: rgba(255, 255, 255, .84); max-width: 30ch; } .sr-new-cta { display: inline-flex; align-items: center; gap: .45rem; margin-top: .7rem; font: 700 .68rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #fff; border-bottom: 2px solid var(--sr-red); padding-bottom: .28rem; } .sr-new-cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sr-empty { color: var(--sr-ink-2); font-size: .85rem; padding: .8rem .2rem; } /* Keine kommenden Termine (Ansage Sven 07.10.2026): eine eigene Karte in der Form der Terminkarten, gestrichelt, mit rotem Kalender-Symbol; der erste Satz fett, der Rest darunter. */ .sr-ev-leer { display: flex; align-items: center; gap: .9rem; margin: .2rem 0 .6rem; padding: 1rem 1.05rem; border: 1.5px dashed color-mix(in srgb, var(--sr-red) 45%, var(--sr-line)); border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--sr-red) 7%, #fff), #fff 70%); } .sr-ev-leer-ico { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: var(--sr-red); color: #fff; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--sr-red) 70%, transparent); } .sr-ev-leer-ico svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .sr-ev-leer p { margin: 0; display: flex; flex-direction: column; gap: .2rem; } .sr-ev-leer b { font: 800 .9rem/1.25 var(--font-body); color: var(--sr-ink); } .sr-ev-leer p span { font-size: .8rem; color: var(--sr-ink-2); } /* Sprungziel des Menuepunkts „Resultater". Ohne Hoehe, aber mit Abstand nach oben: die Leiste der Huelle ist 64px hoch und stuende sonst auf dem Titel des Kastens. */ .sr-anchor { height: 0; scroll-margin-top: 84px; } /* Das Saisonpaket steht über den Terminen und trägt statt eines Datums ein Ticket. */ .sr-ev-ticket { display: grid; place-items: center; background: var(--sr-ground-2); } .sr-ev-ticket svg { width: 22px; height: 22px; fill: none; stroke: var(--sr-red); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ── Die Speedpakke-Zeile ist dunkel ───────────────────────────────────── Ansage vom 25.09.2026: dunkler Grund mit weisser Schrift, das Zeichen rot mit weissem Symbol, der kleine Pfeil rot. Sie steht ueber einer Reihe weisser Terminzeilen und ist etwas anderes als sie: nicht ein Tag, sondern alle. Der dunkle Grund sagt das, bevor man den Namen gelesen hat — dieselbe dunkle Haelfte des Designs, aus der Kopfleiste und Hero kommen. */ /* Grund: dasselbe Bild wie der Kopf der Gesamtwertung auf den Ergebnisseiten — links rot, rechts die Zielflagge (Ansage Sven 08.10.2026). Es ersetzt die zwei weissen Schraegstriche, die hier seit 25.09.2026 lagen: das Bild bringt sein eigenes Muster mit. Ohne Datei bleibt der dunkle Grund. */ .sr-ev-pass { background: var(--sr-dark) url('https://www.zenergyracing.dk/v2/public/images/resultater-kopf.webp?v=1791304839') center 40% / cover no-repeat; border-color: var(--sr-dark-line-2); color: var(--sr-dark-ink); position: relative; overflow: hidden; } .sr-ev-pass > * { position: relative; } /* Ohne diese Zeile faerbt `.sr-ev:hover { color: inherit }` die Zeile beim Zeigen zurueck auf das Dunkelgrau der hellen Seite. */ .sr-ev-pass:hover { border-color: var(--sr-red); color: var(--sr-dark-ink); } /* Zwei Zeilen: „Speedpakke" oben, die Serie darunter (Ansage vom 25.09.2026). Als eigener Block und nicht als
, damit die zweite Zeile ihren eigenen Abstand bekommt und nicht am Zeilenabstand der ersten haengt. NICHT FETT (Ansage vom 25.09.2026): „Speedpakke" ist das Produkt, die Serie sagt nur, welche — zwei gleich schwere Zeilen streiten um dieselbe Aufmerksamkeit. Darum steht sie auch in einem und nicht in einem : ein , das nicht fett ist, ist ein Widerspruch im Markup. */ .sr-ev-pass .sr-ev-name { color: #fff; } .sr-ev-pass .sr-ev-serie { display: block; margin-top: .12rem; font-weight: 400; } /* Der kleine Pfeil rot. Im GEOEFFNETEN Zustand gewinnt weiter die Scheibe von .sr-ev-on — rot gefuellt mit weissem Pfeil; das ist dort das staerkere Zeichen. */ .sr-ev-pass .sr-ev-go { color: var(--sr-red); } /* Die Rabattmarke ist GROESSER als die Marke „naechster Termin" darunter (Ansage vom 25.09.2026: „der rabatt wird zu klein dargestellt"). Das ist keine Willkuer: ein Nachlass ist ein Angebot, der naechste Termin eine Tatsache des Kalenders — und ein Angebot darf lauter sprechen. .52 → .72 rem, dazu mehr Polster. */ .sr-ev-pass .sr-ev-flag { margin-bottom: .26rem; padding: .22rem .5rem .24rem; font-size: .72rem; letter-spacing: .08em; } /* Rechts die Zahl der Events, darunter das Jahr. Rechtsbuendig wie der Zeitraum der Terminzeilen darunter, damit die Spalte eine Kante hat. */ .sr-ev-pass .sr-ev-meta { display: grid; justify-items: end; gap: .1rem; text-align: right; white-space: nowrap; } .sr-ev-pass .sr-ev-meta span { font: 700 .68rem/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--sr-dark-ink-2); } .sr-ev-pass .sr-ev-meta b { font: 900 .92rem/1 var(--font-body); letter-spacing: -.01em; color: #fff; } /* Das Abzeichen: rot, und das Symbol darin weiss. Zwei Klassen, damit es die graue Flaeche von .sr-ev-ticket darueber schlaegt. */ /* Das Abzeichen nimmt die Hoehe der zwei Textzeilen mit und traegt ein GROESSERES Zeichen (Ansage vom 25.09.2026): 34 statt 26 px. Das Polster gibt dafuer nach — die Spalte ist 52 px breit (siehe .sr-ev), und die soll sie bleiben, damit alle Zeilen der Schiene dieselbe erste Spalte haben. */ /* Freigestellt, ohne rote Flaeche (Ansage Sven 08.10.2026): seit die Zeile das Bild aus dem Ergebnis-Kopf traegt, liegt links schon Rot — das weisse Ticket steht frei darauf. */ .sr-ev-pass .sr-ev-ticket { background: transparent; border: 0; box-shadow: none; padding: .35rem .2rem; align-self: stretch; } .sr-ev-pass .sr-ev-ticket img { width: 34px; height: 34px; display: block; } /* Der gezeichnete Rueckfall, falls die Bilddatei fehlt: dann steht das Ticket weiss auf dem Grund der Zeile statt rot auf Grau. */ .sr-ev-pass .sr-ev-ticket svg { width: 30px; height: 30px; stroke: #fff; } /* ── Die Strecke (Unterseite /trackday/{event}) ─────────────────────────── */ /* Kachel und Fakten nebeneinander, wie in der Vorlage — die Karte rechts, breit genug fuer "Laengste Gerade" in einer Zeile. */ /* Die Faktenkarte faellt ueber Form auf, nicht ueber Dunkelheit: heller Grund wie der Rest der Seite, dazu die Schaufensterzahl, die Symbole und der rote Anschnitt in der Ecke. */ /* Die Streckenlaenge als Schaufensterzahl. */ /* Die Buchungsoptionen stehen hier im Fluss, nicht in einem Fenster. */ body.design-serienleiste .sl-modal-overlay.sr-inline { position: static; display: block; background: none; opacity: 1; visibility: visible; padding: 0; pointer-events: auto; } body.design-serienleiste .sr-inline .sl-modal { max-width: none; width: 100%; max-height: none; box-shadow: none; border-radius: 0; background: transparent; padding: 0; /* UND die Kante. Sie blieb hier stehen, waehrend Schatten, Radius und Hintergrund gingen — im Fenster ist sie der Rand des Fensters, im Fluss ein zweiter Rahmen 1 px neben dem der Datenkarte darin (Ansage vom 25.09.2026: „um den buchungsbereich ist ein ueberfluessiger rahmen"). */ border: 0; } body.design-serienleiste .sr-inline .sl-modal-close { display: none; } /* Was im Fenster den Zusammenhang herstellte, steht auf dieser Seite schon darueber: Foto, Streckenname, Ort und Termin. Doppelt gesagt heisst nicht deutlicher. */ body.design-serienleiste .sr-inline .sl-modal-media, body.design-serienleiste .sr-inline .sl-modal-titlebar, body.design-serienleiste .sr-inline .sl-modal-facts, body.design-serienleiste .sr-inline .sl-modal-teaser { display: none; } body.design-serienleiste .sr-inline .sl-modal-main { padding: 0; } .sr-booking { margin-top: 1.1rem; } /* ── Die Buchung in drei Schritten ─────────────────────────────────────── Das Markup gehoert dem geteilten Partial (sl-booking-modal) und wird hier nur umgestellt — Tage als Karten, Extras daneben, Daten darunter, Summe und Knopf in einer Fussleiste. Die Beschriftungen kommen als Custom Property von der Seite, damit die Sprache nicht im Stilblatt landet. */ body.design-serienleiste .sr-inline .sl-modal-main { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.4rem; align-items: start; } /* Tage links, Extras rechts daneben; Daten und Fussleiste ueber beide Spalten. Die Tage nehmen zwei Reihen, sonst rutscht das erste Extra UNTER sie statt neben sie. */ body.design-serienleiste .sr-inline .sl-modal-days { grid-column: 1; grid-row: 2; } /* Die Extras stehen in einer eigenen Spalte (vom Skript umschlossen), nicht einzeln im Raster: sonst zieht die Tagesliste daneben jede weitere Zeile auf ihre Hoehe. */ body.design-serienleiste .sr-inline .sr-opts { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: .7rem; } body.design-serienleiste .sr-inline .rb, body.design-serienleiste .sr-inline .sl-modal-actions { grid-column: 1 / -1; } /* Schrittueberschriften — echte Elemente, vom Skript eingesetzt (siehe Ansicht). */ body.design-serienleiste .sr-inline .sr-step { margin: 0 0 .5rem; font: 800 .68rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--sr-ink-3); align-self: end; } body.design-serienleiste .sr-inline .sr-step-slmodaldays { grid-column: 1; grid-row: 1; } body.design-serienleiste .sr-inline .sr-step-sropts { grid-column: 2; grid-row: 1; } body.design-serienleiste .sr-inline .sr-step-rb { grid-column: 1 / -1; } /* Schritt 1: die Tage als Karten nebeneinander */ body.design-serienleiste .sr-inline .sl-modal-days { /* Die Kacheln teilen sich die linke Haelfte: zwei Tage werden breit, drei schmal. Das Mindestmass ist so gewaehlt, dass drei nebeneinander passen und vier umbrechen. */ display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .6rem; } body.design-serienleiste .sr-inline .sl-modal-day { display: grid; grid-template-columns: 18px 1fr; gap: .2rem .6rem; align-items: start; padding: .85rem .9rem; border: 1px solid var(--sr-line-2); border-radius: 8px; background: var(--sr-paper); cursor: pointer; } /* Beim Saisonpaket sind die "Tage" die abgedeckten Termine — Karten ohne Ankreuzfeld. Ohne das hier lief der Name in die erste Spalte, die fuer das Kaestchen reserviert ist. */ body.design-serienleiste .sr-inline .sl-modal-day:not(:has(input)) { grid-template-columns: 1fr; cursor: default; } body.design-serienleiste .sr-inline .sl-modal-day:not(:has(input)) > * { grid-column: 1; } body.design-serienleiste .sr-inline .sl-modal-day:has(input:checked) { border-color: var(--sr-red); box-shadow: 0 0 0 1px var(--sr-red); } body.design-serienleiste .sr-inline .sl-modal-day input { grid-row: 1 / span 3; width: 18px; height: 18px; accent-color: var(--sr-red); margin: 0; } body.design-serienleiste .sr-inline .sl-modal-day b { font: 800 .8rem/1.2 var(--font-body); } body.design-serienleiste .sr-inline .sl-modal-day span { font-size: .72rem; color: var(--sr-ink-2); } body.design-serienleiste .sr-inline .sl-modal-day em { grid-column: 1 / -1; margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--sr-line); font: 900 1rem/1 var(--font-body); font-style: normal; letter-spacing: -.02em; text-align: right; } /* Schritt 2: die Extras, gestapelt */ body.design-serienleiste .sr-inline .sl-modal-opt { position: relative; display: flex; align-items: center; gap: .9rem; padding: .85rem .9rem; border: 1px solid var(--sr-line); border-radius: 8px; background: var(--sr-paper); margin: 0; } body.design-serienleiste .sr-inline .sl-modal-opt input { width: 17px; height: 17px; accent-color: var(--sr-red); } body.design-serienleiste .sr-inline .sl-modal-opt span { font-size: .82rem; } body.design-serienleiste .sr-inline .sl-modal-opt em { margin-left: auto; font: 700 .78rem/1 var(--font-body); font-style: normal; color: var(--sr-ink-2); white-space: nowrap; } /* Der Fahrerblock — ueberall in diesem Design gleich. Diese Regeln hingen bis zum 19.09.2026 allein an .sr-inline, dem alten Buchungsfenster. Seither steht derselbe Block an zwei weiteren Stellen: im Buchungsformular der Terminseite (.sr-bk-pane) und im Warenkorb (.sr-kurv-addform) — und dort fielen die Felder auf ihre Grundbreite zusammen, weil keine der Regeln griff. Wer den Block an einer VIERTEN Stelle einbaut, muss hier eine Zeile ergaenzen; sonst sieht er dort wieder anders aus. */ body.design-serienleiste .sr-inline .rb, body.design-serienleiste .sr-bk-pane .rb, body.design-serienleiste .sr-kurv-addform .rb { position: relative; } body.design-serienleiste .sr-inline .rb-label, body.design-serienleiste .sr-bk-pane .rb-label, body.design-serienleiste .sr-kurv-addform .rb-label { display: none; } body.design-serienleiste .sr-inline .rb-guest, body.design-serienleiste .sr-inline .rb-selects, body.design-serienleiste .sr-bk-pane .rb-guest, body.design-serienleiste .sr-bk-pane .rb-selects, body.design-serienleiste .sr-kurv-addform .rb-guest, body.design-serienleiste .sr-kurv-addform .rb-selects { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } /* Die Namensfelder NUR bei „neuer Fahrer" — und darum hier ausdruecklich an `[data-new]` gebunden. Ohne das gewann diese Zeile ueber die Regel im Block selbst (drei Klassen plus Element schlagen zwei Klassen plus Attribut), und die Felder standen am 21.09.2026 auch neben „ich selbst" — sichtbar, wenn auch abgeschaltet. Wer hier je wieder eine Sammelregel fuer `.rb-new` schreibt, macht das rueckgaengig. */ body.design-serienleiste .sr-bk-pane .rb[data-new] .rb-new, body.design-serienleiste .sr-kurv-addform .rb[data-new] .rb-new { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } body.design-serienleiste .sr-inline .rb-selects, body.design-serienleiste .sr-bk-pane .rb-selects, body.design-serienleiste .sr-kurv-addform .rb-selects { margin-top: .7rem; } /* Startnummer als dritte Spalte neben Gruppe und Klasse (#860). Schmaler als die beiden: drei Ziffern. */ body.design-serienleiste .sr-inline .rb-selects.rb-selects-drei, body.design-serienleiste .sr-bk-pane .rb-selects.rb-selects-drei { grid-template-columns: 1fr 1fr minmax(6.5rem, .7fr); } /* Zu schmal fuer drei (Buchungsspalte neben den Tagen bei kleinem Fenster): die Startnummer rueckt unter Gruppe und Klasse. Gemessen an der Breite des Fahrerblocks, nicht des Fensters. */ body.design-serienleiste .sr-inline .rb:has(.rb-selects-drei), body.design-serienleiste .sr-bk-pane .rb:has(.rb-selects-drei) { container-type: inline-size; } /* Nummerntafel zentriert unter dem Wort „Startnummer“ (Ansage Sven 08.11.2026): der Block ist so breit wie sein Inhalt, Wort und Tafel stehen mittig übereinander. */ body.design-serienleiste .sr-bk-pane .rb-startnummer { display: flex; flex-direction: column; align-items: center; justify-self: start; width: max-content; } body.design-serienleiste .sr-bk-pane .rb-startnummer > .rb-feld-label { width: auto; } @container (max-width: 360px) { body.design-serienleiste .sr-inline .rb-selects.rb-selects-drei, body.design-serienleiste .sr-bk-pane .rb-selects.rb-selects-drei { grid-template-columns: 1fr 1fr; } body.design-serienleiste .sr-inline .rb-selects-drei .rb-startnummer, body.design-serienleiste .sr-bk-pane .rb-selects-drei .rb-startnummer { grid-column: 1 / -1; max-width: 12rem; } } body.design-serienleiste .sr-inline .rb-number, body.design-serienleiste .sr-bk-pane .rb-number, body.design-serienleiste .sr-kurv-addform .rb-number { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .8rem; } /* Fussleiste: Summe links, Warenkorb rechts */ body.design-serienleiste .sr-inline .sl-modal-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .3rem; padding: 1.1rem 1.2rem; border-radius: 8px; background: var(--sr-ground); } body.design-serienleiste .sr-inline .sl-modal-total { order: 1; margin-right: auto; display: flex; flex-direction: column; gap: .2rem; font: 700 .66rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--sr-ink-3); } body.design-serienleiste .sr-inline .sl-total { font: 900 1.5rem/1 var(--font-body); letter-spacing: -.02em; color: var(--sr-ink); } body.design-serienleiste .sr-inline .sl-modal-actions .sl-btn { order: 3; background: var(--sr-red); color: #fff; border: 0; border-radius: 6px; padding: .85rem 1.4rem; font: 700 .78rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; } body.design-serienleiste .sr-inline .sl-modal-actions .sl-btn:hover { background: var(--sr-red-2); } body.design-serienleiste .sr-inline .sl-reset { order: 2; font-size: .74rem; color: var(--sr-ink-3); } /* ── Der eigene Kopf einer Termintafel ─────────────────────────────────── Auftrag vom 24.09.2026. Er ersetzt das freigestellte Streckenbild, die Kopfzeile mit Name und Datum, die Merkmalzeile und den Zeitplan-Knopf — alles, was er selbst traegt. DIE OBERGRENZE IST GEMESSEN UND NICHT GERATEN: von der Oberkante der Tafel bis zum Beginn der Buchung waren es 518 px (/trackday/164190 bei 1380x900). Davon gehen der Beschreibungstext und seine Abstaende ab, es bleiben 400 px. Der Kopf darf nie mehr kosten als das, was er ersetzt. Er laeuft bis an die Kanten der Tafel: die Polster des Kastens stehen als Variablen (--sr-block-pad-x), also lassen sie sich genau wieder herausrechnen. */ .sr-ek { --sr-ek-max: 400px; position: relative; isolation: isolate; overflow: hidden; margin: -1.15rem calc(var(--sr-block-pad-x) * -1) 1.15rem; border-radius: 10px 10px 0 0; background: var(--sr-dark); color: var(--sr-dark-ink); display: grid; grid-template-rows: 1fr auto auto; gap: .85rem; padding: 1.25rem 1.35rem 1.1rem; min-height: 250px; max-height: var(--sr-ek-max); } .sr-ek-bild { position: absolute; inset: 0; z-index: -2; } .sr-ek-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; } /* Ohne Bild bleibt der dunkle Grund — eine leere graue Flaeche waere schlimmer als gar keine. Der Verlauf traegt die Schrift ueber jedem Bild. */ .sr-ek::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(11, 13, 16, .58) 0%, rgba(11, 13, 16, .16) 32%, rgba(11, 13, 16, .52) 68%, rgba(11, 13, 16, .86) 100%); } /* Auch hier das Eckstueck: der Kopf laeuft bis an die Kanten der Tafel, seine obere rechte Ecke IST die der Tafel. Ohne Grund und ohne Kanten (Ansage Sven 19.10.2026: „ohne hintergrund per default und gib ihm nur einen hintergrund, wenn man darueber hovert") — das weisse Kreuz steht auf dem Verlauf des Bildes, der oben dunkel genug dafuer ist. Erst beim Zeigen das rote Eckstueck. Die Kanten sind durchsichtig statt weg, damit beim Zeigen nichts um ein Pixel ruckt. */ .sr-ek-close { position: absolute; right: 0; top: 0; z-index: 5; color: #fff; background: transparent; border-radius: 0 var(--sr-karten-radius) 0 var(--sr-karten-radius); border-left: 1px solid transparent; border-bottom: 1px solid transparent; } .sr-ek-close:hover { background: var(--sr-red); border-color: rgba(255, 255, 255, .3); } .sr-ek-text { align-self: end; min-width: 0; } .sr-ek-art { margin: 0 0 .45rem; font: 700 .58rem/1.2 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--sr-dark-ink-2); } .sr-ek-name { margin: 0; font-family: var(--font-display-hero); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: .92; font-size: clamp(1.7rem, 3.6vw, 2.9rem); } .sr-ek-datum { margin: .4rem 0 0; font: 700 .82rem/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--sr-red-hell, #ff6b6f); } .sr-ek-ort { margin: .2rem 0 0; font: 400 .74rem/1.3 var(--font-body); color: var(--sr-dark-ink-2); } .sr-ek-tage::before { content: "·"; margin: 0 .45em; opacity: .55; } /* Die vier Zahlen als Reihe, wie in den Vorlagen: Wert gross, Name klein darunter. */ .sr-ek-zahlen { margin: 0; display: grid; grid-auto-flow: column; justify-content: start; gap: 1.5rem; align-items: end; border-top: 1px solid rgba(255, 255, 255, .2); padding-top: .65rem; } .sr-ek-zahlen > div { min-width: 0; } .sr-ek-zahlen dt { font: 800 1.02rem/1 var(--font-body); letter-spacing: -.01em; white-space: nowrap; } .sr-ek-zahlen dd { margin: .22rem 0 0; font: 600 .5rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--sr-dark-ink-2); white-space: nowrap; } /* Zeitplan, Route und die Ausstattung in EINER Zeile (Ansage vom 27.09.2026). Die Ausstattung hatte bis dahin eine eigene Zeile darueber — Hoehe fuer vier Zeichen, die neben den beiden Knoepfen Platz haben. `align-items: center` haelt die Kreise auf der Mitte der Knoepfe; ohne das haengen sie an deren Oberkante. */ .sr-ek-wege { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; } .sr-ek-wege .sr-btn { padding: .42rem .9rem; font-size: .68rem; } /* Etwas Luft zwischen dem Routen-Knopf und den Zeichen: ohne sie liest sich der erste Kreis als dritter Knopf. */ .sr-ek-wege .sr-ek-ausstattung { margin-left: .35rem; } /* ── Der Kopf mit dem Heldenbild der Strecke (Auftrag 24.09.2026) ── Hier traegt das BILD die Beschriftung — Marke, Name, Serie, Ort und die vier Zahlen sind hineingesetzt. Auf der Seite kommt nur das Datum dazu, und zwar unter dem Bild: beide Fassungen haben ihre Ecken vergeben, und der Streifen traegt ausserdem die Sprache der Seite, waehrend die Bilder daenisch beschriftet sind. Kein Raster, kein Verlauf, keine Mindest- oder Hoechsthoehe: das Bild bringt sein Seitenverhaeltnis mit (2:1), und in der Spalte der Tafel (770 px) sind das 385 px plus Streifen — zusammen rund 440 px und damit unter den 518 px, die der Kopfbereich vor dem 24.09.2026 ohnehin gekostet hat. */ .sr-ek--held { display: block; padding: 0; gap: 0; min-height: 0; max-height: none; } .sr-ek--held::after { display: none; } .sr-ek-held-bild { display: block; width: 100%; height: auto; } /* Datum, Ausstattung und Wege liegen AUF dem Bild: ein eigener Streifen darunter kostete Hoehe, und die ist hier das Knappe (Ansage vom 24.09.2026). Der Verlauf traegt sie ueber jedem Motiv — die beiden Fassungen sind verschieden hell, und eine Schrift, die nur auf einer von beiden steht, steht auf keiner. */ /* Eine SPALTE AM RECHTEN RAND, kein Band unten: dort tragen beide Fassungen ihre eigenen Streckendaten, und ein Band darueber deckte sie zu. Sie faengt unter dem Kreuz an und richtet alles rechtsbuendig aus; jedes Stueck bringt seinen eigenen dunklen Grund mit, damit es ueber jedem Motiv lesbar bleibt, ohne das Bild grossflaechig abzudecken. */ .sr-ek-leiste { /* 20 px tiefer (Ansage Sven 13.10.2026, mit den Tageskacheln). */ position: absolute; right: .85rem; top: calc(3.2rem + 20px); z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; } .sr-ek-leiste-datum { margin: 0; max-width: 8.5em; text-align: right; font: 700 .74rem/1.25 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: .34rem .6rem; border-radius: 7px; background: rgba(11, 13, 16, .62); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } /* Die Tage auf eine eigene Zeile: nebeneinander waere die Spalte so breit wie das halbe Bild. Der Mittelpunkt der Grundregel faellt dafuer weg. */ .sr-ek-leiste-datum .sr-ek-tage { display: block; opacity: .85; } .sr-ek-leiste-datum .sr-ek-tage::before { content: none; } /* Tageskacheln wie im Profil (.pf-bk-date, Ansage Sven 13.10.2026), immer dunkel mit weißer Schrift und rotem Strich (Nachtrag am selben Tag): Wochentag klein oben, Tag kursiv und schwer mit Strich, Monat klein darunter. Senkrecht gestapelt. */ .sr-ek-tage-kacheln { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; } .sr-ek-kachel { display: flex; flex-direction: column; align-items: center; width: 50px; padding: .3rem 0 .32rem; border-radius: 10px; box-sizing: border-box; color: #fff; border: 1px solid #2c2e34; background: linear-gradient(180deg, #24262b, #17181c); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); } .sr-ek-kachel-wt, .sr-ek-kachel-mon { font: 800 .5rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .16em; padding-left: .16em; color: rgba(255, 255, 255, .85); } .sr-ek-kachel-tag { position: relative; font: italic 900 1.35rem/1 'Figtree', var(--font-display), sans-serif; letter-spacing: -.01em; padding: .12rem .1rem .22rem 0; margin-bottom: .14rem; color: #fff; } .sr-ek-kachel-tag::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 78%; height: 3px; border-radius: 2px; transform: translateX(-50%); background: var(--sr-red); } /* ── Die Ausstattung der Fassung OHNE Streckenbild ────────────────────── Eine Reihe beschrifteter Plaketten neben den beiden Knoepfen (Ansage vom 27.09.2026: „ja, dort auch beschriftete plaketten"); bis dahin waren es Kreise ohne Wort. WARUM NICHT DAS BAND der anderen Fassung: das Band reitet auf der UNTERKANTE DES BILDES, und hier gibt es kein Bild. Der geschriebene Kopf ist eine dunkle Tafel mit Text, Zahlen und zwei Knoepfen — ein weisses Band mitten hinein waere ein Fremdkoerper, und an seiner Unterkante steht der Kopf selbst, nicht ein Motiv, dem man ausweichen muesste. Dieselbe Sprache also, anderer Traeger: weisse Plakette, roter Rahmen, rote Zeichnung, schwarze Schrift — lesbar auf dem dunklen Grund, auf dem sie liegt. */ .sr-ek-ausstattung { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .sr-ek-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .6rem; border-radius: 8px; background: #fff; border: 1px solid var(--sr-red); color: var(--sr-ink); text-decoration: none; white-space: nowrap; font: 800 .68rem/1 var(--font-body); letter-spacing: .01em; } .sr-ek-chip svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--sr-red); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Die Zeichenhuelle (`aria-hidden`) braechte als gewoehnliches Inline-Element die Zeilenhoehe ihrer Schrift mit — die Plakette waere dadurch ein paar Pixel hoeher als ihre Nachbarn. */ .sr-ek-chip [aria-hidden] { display: inline-flex; align-items: center; } /* ── DAS BAND REITET AUF DER UNTERKANTE DES BILDES ────────────────────── Ansagen vom 27.09.2026 und die Gestaltungsvorlage danach: EIN weisses Band mit Trennstrichen, je Eintrag ein rotes Zeichen in einem blassen Kreis und ein fetter schwarzer Name daneben. Ohne die grauen Erlaeuterungszeilen der Vorlage und ohne „Paddock"/„Parkering" — beides auf Ansage („die grauen unterzeilen raus lassen, paddock, parkering rauslassen"). `bottom: 0` plus `translateY(50%)` heisst: die MITTE des Bandes liegt auf der Kante. Das ist die einzige Fassung, die haelftig bleibt, wenn die Eintraege einmal groesser werden — ein fester Versatz in Pixeln liefe beim naechsten Feilen daneben. Bricht das Band um, bleibt der ganze Block haelftig, nicht seine erste Zeile. MITTIG und nicht auf die Breite verteilt: bei einer Strecke ohne gepflegte Ausstattung stehen nur zwei Eintraege darin, und `space-between` schoebe die beiden an die Aussenkanten eines 770 px breiten Bandes. */ .sr-ek-kante { position: absolute; z-index: 4; left: var(--sr-block-pad-x, 1.35rem); right: var(--sr-block-pad-x, 1.35rem); bottom: 0; transform: translateY(50%); list-style: none; margin: 0; padding: .5rem .3rem; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(11, 13, 16, .18); } /* Der Trennstrich gehoert an den Eintrag und nicht zwischen zwei Elemente: bricht das Band um, faengt eine neue Zeile ohne Strich an — und das ist richtig so, denn links davon steht dann nichts. */ /* NUR NOCH ZEICHEN (Ansage Sven 08.10.2026: Platzproblem — Zeitplan raus, die Woerter nur noch beim Zeigen). Ohne Woerter tragen die Trennstriche nichts mehr; die Zeichen stehen dicht nebeneinander, das Wort erscheint als dunkles Schild ueber dem Zeichen. */ .sr-ek-kante { gap: .15rem; padding: .4rem .5rem; /* So breit wie die Zeichen, mittig auf der Kante — kein weisses Band ueber die ganze Breite. */ left: 50%; right: auto; width: max-content; max-width: calc(100% - 2 * var(--sr-block-pad-x, 1.35rem)); transform: translate(-50%, 50%); } .sr-ek-kante > li { display: flex; } .sr-ek-kante-teil { position: relative; display: inline-flex; align-items: center; padding: .1rem .2rem; text-decoration: none; color: var(--sr-ink); font: 800 .78rem/1.1 var(--font-body); white-space: nowrap; outline: none; } .sr-ek-kante .sr-ek-chip-wort { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 5; transform: translate(-50%, 4px); opacity: 0; pointer-events: none; padding: .35rem .6rem; border-radius: 7px; background: var(--sr-dark); color: #fff; font: 700 .72rem/1.1 var(--font-body); white-space: nowrap; box-shadow: 0 6px 16px rgba(11, 13, 16, .25); transition: opacity .15s ease, transform .15s ease; } .sr-ek-kante .sr-ek-chip-wort::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--sr-dark); } .sr-ek-kante-teil:is(:hover, :focus-visible) .sr-ek-chip-wort { opacity: 1; transform: translate(-50%, 0); } .sr-ek-kante-teil:focus-visible .sr-ek-kante-ring { box-shadow: 0 0 0 2px var(--sr-red); } /* Das Zeichen in einem blassen roten Kreis, wie in der Vorlage. */ .sr-ek-kante-ring { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(218, 31, 37, .07); border: 1px solid rgba(218, 31, 37, .16); } .sr-ek-kante-ring svg { width: 17px; height: 17px; fill: none; stroke: var(--sr-red); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Nur die beiden Wege fuehren irgendwohin — die Ausstattung ist eine Angabe und bekommt darum auch keinen Griff, der so tut. */ a.sr-ek-kante-teil { transition: color .15s ease; } a.sr-ek-kante-teil:hover { color: var(--sr-red); } a.sr-ek-kante-teil:hover .sr-ek-kante-ring { background: rgba(218, 31, 37, .15); border-color: rgba(218, 31, 37, .3); } /* ── LEISTE UNTER DEM STRECKENBILD (02.11.2026, nach Vorlage, ohne Überschriften und kleiner) ── Ein Kasten unter dem Bild: links die Ausstattung auf weißem Grund, rechts die Wege auf blassrotem Grund — die Kante dazwischen ist der rote Schrägstrich (Ansage Sven: „in der vorlage [haben] die beiden infotypen einen unterschiedlichen untergrund“). Jede Angabe eine weiße Plakette mit rotem Zeichen und fettem Wort. Nur die Ausstattung bricht in sich um; die Wege bleiben rechts in einer Zeile. */ .sr-ek-band { display: flex; align-items: stretch; margin-top: .275rem; /* halb so viel Abstand zum Bild (Ansage Sven 08.11.2026: „den abstand zum hero bild um 50% verkleinern“) */ overflow: hidden; /* Rechter Bereich grau statt blassrot (Ansage Sven 08.11.2026: „hintergrund des rechten bereichs auch grau“); der große Rahmen ist ganz weg („den grossen rahmen ganz raus“). Der rote Schrägstrich bleibt. */ background: #fff; border: 0; border-radius: 12px; } .sr-ek-band-gruppe { display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: .35rem; margin: 0; padding: .5rem .65rem; list-style: none; } .sr-ek-band-gruppe:first-child { flex: 1 1 auto; min-width: 0; } .sr-ek-band-gruppe > li { display: flex; } /* Der Schrägstrich als Verlauf: bis 1.6rem weiß, dann 3 px Rot, dahinter Blassrot. Unter 110° steht die Kante wie „/“; 1.6rem Vorlauf reichen, damit sie auch bei zwei Zeilen Höhe unten nicht aus dem Kasten läuft. */ .sr-ek-band-wege { flex: none; flex-wrap: nowrap; padding-left: 2.1rem; /* Je 1 px Übergang an beiden Kanten des Strichs: harte Stopps zeichnen eine schräge Linie treppig (Ansage Sven: „der rote trenner braucht antialiasing“). */ /* Schmaler (Ansage Sven 08.11.2026: „den roten schräger schmaler“): rund halb so breit wie vorher. */ background: linear-gradient(110deg, transparent 1.6rem, var(--sr-red) calc(1.6rem + .75px), var(--sr-red) calc(1.6rem + 1px), #f3f4f6 calc(1.6rem + 1.75px)); } /* Der dunkle Grund des Kopfes ist nur Platzhalter, bis das Bild lädt — er gehört darum ans Bild. Am Kopf schien er durch die Lücke über der Leiste und an ihren runden unteren Ecken (Ansage Sven 02.11.2026). */ .sr-ek--held:has(> .sr-ek-band) { background: transparent; } .sr-ek--held:has(> .sr-ek-band) .sr-ek-held-bild { background: var(--sr-dark); } .sr-ek-band-wege:first-child { padding-left: .65rem; background: #f3f4f6; } .sr-ek-pille { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .65rem .28rem .5rem; border-radius: 999px; background: #fff; border: 1px solid rgba(218, 31, 37, .2); font: 700 .72rem/1.1 var(--font-body); color: var(--sr-ink); text-decoration: none; white-space: nowrap; } .sr-ek-pille svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--sr-red); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Ausstattungs-Zeichen grau statt rot (Ansage Sven 08.11.2026: „Eventdetails: facility icons nur grau anstatt rot“); die Wege (Anfahrt, Zeitplan, Livetiming, Paddock Radio) bleiben rot. Gilt auch für den Kopf ohne Bild (.sr-ek-chip). */ .sr-ek-band-gruppe:not(.sr-ek-band-wege) .sr-ek-pille svg, .sr-ek-ausstattung .sr-ek-chip svg { stroke: var(--sr-ink-2); } /* Auch der Rahmen grau (Ansage Sven 08.11.2026: „border auch grau“). */ .sr-ek-band-gruppe:not(.sr-ek-band-wege) .sr-ek-pille, .sr-ek-ausstattung .sr-ek-chip { border-color: var(--sr-line); } .sr-ek-band-gruppe:not(.sr-ek-band-wege) .sr-ek-pille-info:focus-visible { border-color: var(--sr-ink-2); } a.sr-ek-pille { transition: border-color .15s ease, background-color .15s ease; } a.sr-ek-pille:hover { border-color: var(--sr-red); background: #fff7f7; } a.sr-ek-pille:focus-visible { outline: 2px solid var(--sr-red); outline-offset: 1px; } /* Ausstattung auch am Rechner nur als Zeichen, das Wort beim Zeigen als dunkles Schild darüber — wie am Telefon (Ansage Sven 08.11.2026: „die beschriftungen genau wie in der mobilansicht nur beim hovern anzeigen, bei tankstelle und supermarkt aber die entfernung immer zeigen“). Die Wege rechts behalten am Rechner ihr Wort. Damit das Schild über die Leiste hinausragen darf, schneidet sie nicht mehr ab; die runden Ecken tragen die Gruppen selbst. */ .sr-ek-band { overflow: visible; } .sr-ek-band-gruppe:first-child { border-radius: 11px 0 0 11px; } .sr-ek-band-wege { border-radius: 0 11px 11px 0; } .sr-ek-band-wege:first-child { border-radius: 11px; } .sr-ek-band-gruppe:not(.sr-ek-band-wege) .sr-ek-pille-info { position: relative; padding: .38rem; outline: none; cursor: default; } .sr-ek-band-gruppe:not(.sr-ek-band-wege) .sr-ek-pille-info svg { width: 16px; height: 16px; } .sr-ek-band-gruppe:not(.sr-ek-band-wege) .sr-ek-pille-info:focus-visible { border-color: var(--sr-red); } .sr-ek-band-gruppe:not(.sr-ek-band-wege) .sr-ek-pille-km { padding-right: .6rem; } .sr-ek-pille-km-wert { font: 700 .72rem/1.1 var(--font-body); color: var(--sr-ink); white-space: nowrap; } .sr-ek-band-gruppe:not(.sr-ek-band-wege) .sr-ek-pille-wort { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 5; transform: translate(-50%, 4px); opacity: 0; pointer-events: none; padding: .35rem .6rem; border-radius: 7px; background: var(--sr-dark); color: #fff; font: 700 .72rem/1.1 var(--font-body); white-space: nowrap; box-shadow: 0 6px 16px rgba(11, 13, 16, .25); transition: opacity .15s ease, transform .15s ease; } .sr-ek-band-gruppe:not(.sr-ek-band-wege) .sr-ek-pille-wort::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--sr-dark); } .sr-ek-band-gruppe:not(.sr-ek-band-wege) .sr-ek-pille-info:is(:hover, :focus) .sr-ek-pille-wort { opacity: 1; transform: translate(-50%, 0); } /* Telefon: die Wege als eigene Zeile darunter, blassrot über die ganze Breite, mit rotem Strich als Trennkante. */ @media (max-width: 560px) { .sr-ek-band { flex-direction: column; } .sr-ek-band-wege { flex-wrap: wrap; padding-left: .65rem; background: #f3f4f6; border-top: 1px solid var(--sr-red); } /* Die Ausstattung nur als Zeichen, das Wort beim Antippen als dunkles Schild darüber (Ansage Sven 06.11.2026: „Die Facility icons sollen mobil nur text beim mouseover haben“) — wie die Zeichen auf der Bildkante (.sr-ek-kante-teil). Seit derselben Ansage („Ja auch nur icons“) auch die Wege (Anfahrt, Zeitplan, Livetiming, Pinnwand); Antippen folgt bei ihnen dem Verweis. Das Wort bleibt für Vorlesehilfen im Text. Damit das Schild über die Leiste hinausragen darf, schneidet sie hier nicht mehr ab; die runden Ecken trägt die Wege-Zeile dafür selbst. */ .sr-ek-band { overflow: visible; } .sr-ek-band-wege { border-radius: 0 0 11px 11px; } .sr-ek-band-wege:first-child { border-radius: 11px; } .sr-ek-pille-info { position: relative; padding: .38rem; outline: none; } span.sr-ek-pille-info { cursor: default; } .sr-ek-pille-info svg { width: 16px; height: 16px; } .sr-ek-pille-info:focus-visible { border-color: var(--sr-red); } .sr-ek-pille-wort { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 5; transform: translate(-50%, 4px); opacity: 0; pointer-events: none; padding: .35rem .6rem; border-radius: 7px; background: var(--sr-dark); color: #fff; font: 700 .72rem/1.1 var(--font-body); white-space: nowrap; box-shadow: 0 6px 16px rgba(11, 13, 16, .25); transition: opacity .15s ease, transform .15s ease; } .sr-ek-pille-wort::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--sr-dark); } .sr-ek-pille-info:is(:hover, :focus) .sr-ek-pille-wort { opacity: 1; transform: translate(-50%, 0); } } /* DAMIT DAS BAND UEBER DIE KANTE HINAUSRAGEN DARF. Der Kopf schneidet sonst alles ab, was unter seiner Unterkante liegt (`overflow: hidden` an .sr-ek) — dann waere die untere Haelfte weg statt auf dem Papier. DIE RUNDEN ECKEN BRAUCHEN BEIDE: der Kopf fuer seinen eigenen dunklen Grund, das Bild fuer sich selbst. `border-radius` beschneidet immer die FLAECHE des Elements, `overflow` nur das, was darin liegt — das Bild ist ein Kind und wird vom Radius des Kopfes nicht erfasst, solange der nicht schneidet. Am 27.09.2026 stand hier `border-radius: 0` am Kopf, weil ich den Radius fuer „gewandert" hielt. Er war aber nicht gewandert, sondern weg: das Bild rundete seine Ecken, der dunkle Grund des Kopfes blieb eckig darunter stehen — und guckte als schwarze Ecke hervor (gemeldet von Preprod). */ .sr-ek--held { overflow: visible; border-radius: 10px 10px 0 0; } .sr-ek--held .sr-ek-held-bild { border-radius: 10px 10px 0 0; } /* Die Ausstattung der Fassung OHNE Streckenbild traegt seit dem 27.09.2026 abends DIESELBEN Plaketten wie die Bildkante der anderen (.sr-ek-chip) — bis dahin waren es Kreise ohne Wort. Das Listenelement bringt darum nichts Eigenes mehr mit; die Plakette darin traegt alles. */ /* Fuer die Vorlesehilfe da, fuer das Auge nicht: `display: none` naehme es auch ihr weg. */ .sr-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Das Kreuz in die Ecke (Ansage vom 24.09.2026) — es liegt ueber dem Verlauf. */ .sr-ek--held .sr-ek-close { z-index: 3; } /* ── 02 VOLLBILD (Vorgabe) ── Bild randlos, Name gross unten links, Zahlen als Band darueber. Das ist der Aufbau oben; hier steht nur, was ihn von den anderen unterscheidet. */ /* ── 17 DATUM IM FOKUS ── Das Datum als rotes, schraeg gestelltes Stueck oben links, der Name auf einer weissen Karte darunter. Die Zahlen stehen auf Weiss statt auf dem Bild. */ .sr-ek--datum .sr-ek-text { align-self: start; } .sr-ek--datum .sr-ek-name { color: var(--sr-ink); } .sr-ek--datum .sr-ek-art { color: var(--sr-ink-3); } .sr-ek--datum .sr-ek-ort { color: var(--sr-ink-3); } .sr-ek--datum .sr-ek-text { justify-self: start; background: #fff; color: var(--sr-ink); padding: .85rem 1.1rem; border-radius: 8px; max-width: 24ch; box-shadow: 0 10px 26px rgba(20, 22, 26, .28); } .sr-ek--datum .sr-ek-text .sr-ek-datum { margin: .5rem -1.1rem -.85rem; padding: .5rem 1.1rem; background: var(--sr-red); color: #fff; clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); border-radius: 0 0 0 8px; } .sr-ek--datum .sr-ek-zahlen { background: #fff; color: var(--sr-ink); border-top: 0; border-radius: 8px; padding: .7rem 1rem; align-self: end; box-shadow: 0 8px 22px rgba(20, 22, 26, .22); } .sr-ek--datum .sr-ek-zahlen dd { color: var(--sr-ink-3); } /* ── 21 ZAHLEN ZUERST ── Das Zahlenband liegt oben auf dem dunklen Grund, der Name auf einer hellen Karte im Bild darunter. Die Reihenfolge macht die Umkehr, nicht neue Regeln. */ .sr-ek--zahlen { grid-template-rows: auto 1fr auto; } .sr-ek--zahlen .sr-ek-zahlen { order: -1; border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); padding: 0 0 .65rem; } .sr-ek--zahlen .sr-ek-text { justify-self: start; align-self: end; background: rgba(247, 246, 244, .94); color: var(--sr-ink); padding: .8rem 1.1rem; border-radius: 8px; max-width: 30ch; } .sr-ek--zahlen .sr-ek-name { color: var(--sr-ink); } .sr-ek--zahlen .sr-ek-art, .sr-ek--zahlen .sr-ek-ort { color: var(--sr-ink-3); } .sr-ek--zahlen .sr-ek-datum { color: var(--sr-red); } /* ── 23 DIAGONALE ── Eine weisse Flaeche schraeg ueber dem Bild traegt den Namen, darunter ein rotes Stueck mit dem Datum. Der rote Streifen ist ein eigenes Stueck, damit er ueber dem Bild und unter der Schrift liegt. */ .sr-ek--diagonale .sr-ek-text { align-self: start; justify-self: start; background: #fff; color: var(--sr-ink); padding: .9rem 2.6rem .9rem 1.1rem; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); max-width: 30ch; } .sr-ek--diagonale .sr-ek-name { color: var(--sr-ink); } .sr-ek--diagonale .sr-ek-art { color: var(--sr-ink-3); } .sr-ek--diagonale .sr-ek-ort { color: var(--sr-ink-3); } .sr-ek--diagonale .sr-ek-datum { display: inline-block; margin: .55rem 0 0; padding: .3rem .8rem; background: var(--sr-red); color: #fff; clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); } .sr-ek--diagonale::before { content: ""; position: absolute; left: -10%; right: -10%; top: 42%; height: 10px; background: var(--sr-red); transform: rotate(-4deg); z-index: -1; opacity: .9; } .sr-ek--diagonale .sr-ek-zahlen { justify-content: end; text-align: right; } /* Am Telefon stehen die vier Zahlen zu zweit und der Kopf darf hoeher werden: die Obergrenze war eine Rechnung fuer den Schreibtisch, und dort steht die Tafel neben der Terminliste. */ @media (max-width: 700px) { .sr-ek { --sr-ek-max: 460px; min-height: 210px; padding: 1rem 1.05rem .9rem; margin-left: calc(var(--sr-block-pad-x) * -1); margin-right: calc(var(--sr-block-pad-x) * -1); } /* NACH der Regel darueber und nicht davor: beide sind gleich stark, und bei Gleichstand gewinnt die spaetere. Ohne das behaelt der Kopf mit Bild hier das Polster, das Bild sitzt eingerueckt, und die Spalte am rechten Rand steht daneben statt darauf. */ .sr-ek--held { padding: 0; min-height: 0; } /* Auf 390 px ist das Bild rund 195 px hoch — die Spalte muss dort schmaler werden, sonst steht sie ueber die halbe Hoehe. */ .sr-ek--held .sr-ek-leiste { right: .5rem; top: calc(2.2rem + 20px); gap: .3rem; } .sr-ek-leiste-datum { font-size: .64rem; padding: .28rem .45rem; max-width: 7em; } /* Am Telefon nebeneinander: das Bild ist hier nur rund 175 px hoch, drei Kacheln untereinander liefen über die Streckendaten am unteren Rand. */ .sr-ek-tage-kacheln { flex-direction: row; gap: .25rem; } .sr-ek-kachel { width: 38px; padding: .2rem 0 .22rem; border-radius: 8px; } .sr-ek-kachel-tag { font-size: 1rem; } .sr-ek-kachel-wt, .sr-ek-kachel-mon { font-size: .42rem; } .sr-ek--held .sr-ek-close { width: 36px; height: 36px; } /* AM TELEFON TRAGEN BAND UND PLAKETTEN NUR IHR ZEICHEN. Sechs Woerter nebeneinander messen rund 520 px; das Bild ist auf 375 px Fensterbreite 349 px breit und 175 px hoch. Das Band braeche in drei Zeilen um, und drei Zeilen haelftig auf der Kante bedeckten das halbe Bild und die Ueberschrift darunter. NICHT `display: none` fuer das Wort: die beiden Wege sind Verweise, und ein Verweis ohne Text ist fuer eine Vorlesehilfe stumm. Es wird darum nur fuer das AUGE weggenommen — dieselben Regeln wie .sr-sr-only. */ .sr-ek-chip { padding: .3rem; } .sr-ek-kante { padding: .4rem .2rem; } .sr-ek-kante-teil { padding: .1rem .45rem; } .sr-ek-kante-ring { width: 30px; height: 30px; } .sr-ek-kante-ring svg { width: 15px; height: 15px; } .sr-ek-chip-wort { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .sr-ek-zahlen { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1rem; } .sr-ek-name { font-size: clamp(1.5rem, 8vw, 2.1rem); } .sr-ek-wege .sr-btn { flex: 1 1 auto; justify-content: center; } .sr-ek--diagonale::before { display: none; } } .sr-track-text { margin-top: .9rem; font-size: .92rem; line-height: 1.65; color: var(--sr-ink-2); max-width: 70ch; } /* Der Streckentext kommt als gepflegtes HTML (Ueberschriften, Listen, Verweise) und braucht darum eigene Abstaende — vorher war er eine Folge von Zeilenumbruechen. */ .sr-track-text > :first-child { margin-top: 0; } .sr-track-text > :last-child { margin-bottom: 0; } .sr-track-text p { margin: 0 0 .7rem; } .sr-track-text h2, .sr-track-text h3, .sr-track-text h4 { margin: 1.1rem 0 .4rem; font: 900 .95rem/1.2 var(--font-body); font-style: italic; text-transform: uppercase; letter-spacing: -.01em; color: var(--sr-ink); } .sr-track-text ul, .sr-track-text ol { margin: 0 0 .7rem; padding-left: 1.2rem; } .sr-track-text li { margin: 0 0 .25rem; } .sr-track-text a { color: var(--sr-red); text-decoration: underline; text-underline-offset: 2px; } .sr-track-text strong, .sr-track-text b { font-weight: 800; color: var(--sr-ink); } /* Ein gepflegtes Streckenfoto fuellt die Flaeche; die gezeichnete Kachel steht frei darin. */ /* Was zur Strecke gepflegt ist, steht abgesetzt unter dem Text zum Termin. */ .sr-track-venue { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--sr-line); } /* ── EVENTTEXT + „REKORDE & STATISTIK“ (Ansage Sven 10.11.2026) ── Nebeneinander ab Tablettbreite: links der Text, rechts der Kasten mit vier Kacheln (2×2) nach dem Muster der Streckenfakten im Mockup — weißer Kasten, „//“ rot, Titel kursiv in Großbuchstaben. Am Telefon untereinander. */ .sr-info-reihe.mit-rekorden { display: flow-root; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--sr-line); } .sr-info-reihe.mit-rekorden > .sr-track-venue { margin-top: 0; padding-top: 0; border-top: 0; } .sr-info-reihe.mit-rekorden.mit-text > .sr-rek { margin-bottom: 1.1rem; } @media (min-width: 760px) { /* Rechts schwebend statt als zweite Spalte (Ansage Sven 10.11.2026: „wenn der event text länger ist, sieht das natürlich doof aus“): der Text läuft links daneben und unter dem Kasten wieder über die volle Breite. */ .sr-info-reihe.mit-rekorden.mit-text > .sr-rek { float: right; width: min(48%, 26rem); margin: 0 0 1rem 1.5rem; } /* Ohne Eventtext steht der Kasten allein: die vier Kacheln dann in einer Zeile statt 2×2. */ .sr-info-reihe.mit-rekorden:not(.mit-text) .sr-rek-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sr-info-reihe.mit-rekorden:not(.mit-text) .sr-rek-kachel { border-top: 0; padding-top: 0; padding-bottom: 0; } } .sr-rek { padding: .9rem 1rem 1rem; background: #fff; border: 1px solid var(--sr-line); border-radius: 12px; } .sr-rek-kopf { margin: 0 0 .75rem; font-family: var(--font-display, var(--font-body)); font-weight: 900; font-style: italic; font-size: 1.1rem; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; color: var(--sr-ink); } .sr-rek-kopf span { color: var(--sr-red); margin-right: .2rem; } .sr-rek-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; } .sr-rek-kachel { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem .2rem; border-top: 1px solid var(--sr-line); } .sr-rek-kachel:nth-child(-n+2) { border-top: 0; padding-top: 0; } .sr-rek-kachel:nth-child(odd) { padding-right: .8rem; } .sr-rek-ico { flex: none; width: 22px; height: 22px; margin-top: .1rem; fill: none; stroke: var(--sr-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .sr-rek-text { display: flex; flex-direction: column; min-width: 0; } .sr-rek-titel { font-size: .74rem; font-weight: 800; color: var(--sr-ink); } .sr-rek-wert { font-size: .95rem; font-weight: 800; color: var(--sr-ink); line-height: 1.25; overflow-wrap: anywhere; } a.sr-rek-wert { text-decoration: none; } a.sr-rek-wert:hover { color: var(--sr-red); } .sr-rek-unter { font-size: .74rem; color: #5b616b; line-height: 1.3; } /* „Om arrangementet“, „Om Speedpakke“, „Om banen“ in der Schrift des Titels „Raceklasser“ (Ansage Sven 03.11.2026: „die überschrift … soll der font von raceklasse titel sein“) — siehe .sr-cls-block .sr-grp-title-main. Vorher eine kleine graue Kopfzeile (800 .64rem, gesperrt). */ .sr-track-venue-head { margin: 0 0 .55rem; font-family: var(--font-display, var(--font-body)); font-weight: 900; font-style: italic; font-size: 1.5rem; line-height: .96; letter-spacing: -.015em; text-transform: uppercase; color: var(--sr-ink); } /* Die Ausstattung: ein Zeichen und ein Wort je Zeile, zwei Spalten. Sie steht unter den Zahlen, weil sie eine andere Frage beantwortet — nicht wie die Strecke ist, sondern was es dort gibt. */ /* Der Termin, auf dem man steht, ist in der Schiene markiert. */ /* Der Termin, dessen Tafel gerade offen ist, gehoert nicht hinter die Scheibe: er ist das Gegenstueck zur Tafel, so wie die angeklickte Kachel das Gegenstueck ihrer Tafel ist. Darum hebt er sich ueber den Schleier (z-index 31 wie die Tafel selbst) und traegt denselben roten Rahmen. */ .sr-ev-on { position: relative; z-index: 31; border-color: var(--sr-red); box-shadow: 0 0 0 2px var(--sr-red), 0 14px 32px rgba(11, 13, 16, .26); } .sr-ev-on:hover { border-color: var(--sr-red); } /* Die Marke tritt ab, solange dieser Termin selbst der geoeffnete ist: „naechster Termin" sagt, wohin man als naechstes schauen soll — man schaut ja schon hin. NICHT BEIM PAKET (Ansage vom 25.09.2026: „der inhalt des speedpakke eintrags in der eventliste darf sich nicht veraendern, wenn er angeklickt wird"). Dort steht in derselben Marke der laufende Rabatt, und der ist Inhalt und keine Wegweisung — er verschwand beim Anklicken, obwohl er weiter gilt. Dass die Zeile die geoeffnete ist, sagt der rote Rahmen. */ .sr-ev-on:not(.sr-ev-pass) .sr-ev-flag { display: none; } .sr-ev-on .sr-ev-go { color: #fff; background: var(--sr-red); border-radius: 50%; width: 18px; height: 18px; display: inline-grid; place-items: center; font-size: .7rem; } /* Das Kalenderblatt des geoeffneten Termins ist die dunkle Fassung der Tageskachel aus dem Event-Hero (.sr-ek-kachel, Sven 19.10.2026, #557): dunkler Verlauf, weisse Schrift, roter Strich bleibt. Form und Groesse kommen von der hellen Fassung der Liste (oben bei .sr-ev-date). */ .sr-ev-on .sr-ev-date:not(.sr-ev-ticket) { border-color: #2c2e34; background: linear-gradient(180deg, #24262b, #17181c); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); } .sr-ev-on .sr-ev-date:not(.sr-ev-ticket) b { color: #fff; } .sr-ev-on .sr-ev-date:not(.sr-ev-ticket) span { color: rgba(255, 255, 255, .85); } /* Ein gelaufener Termin, der offen ist: Rahmen und dunkles Blatt wie jeder offene, der Strich aber rot wie im Hero — die Abschwaechung gilt der Liste, nicht dem, was man gerade ansieht. */ .sr-ev-on.sr-ev-vorbei .sr-ev-date:not(.sr-ev-ticket) { background: linear-gradient(180deg, #24262b, #17181c); } .sr-ev-on.sr-ev-vorbei .sr-ev-date:not(.sr-ev-ticket) b { color: #fff; } .sr-ev-on.sr-ev-vorbei .sr-ev-date:not(.sr-ev-ticket) b::after { background: var(--sr-red); opacity: 1; } .sr-ev-on.sr-ev-vorbei .sr-ev-date:not(.sr-ev-ticket) span { color: rgba(255, 255, 255, .85); opacity: 1; } /* Das gesperrte Buchungsformular eines gelaufenen Events (#559): oben der Satz, darunter das Formular blass und ohne Farbe; bedienen laesst es sich nicht (inert im Markup). */ /* Nicht grau (Ansage Sven 19.10.2026, #561: „nicht in so traurigem grau"): weisse Karte mit rotem Strich links und einer roten Zielflagge — ein Abschluss, keine Absage. */ .sr-bk-vorbei { display: flex; align-items: flex-start; gap: .8rem; margin: 0 0 1.25rem; padding: .9rem 1.1rem; border-radius: 10px; background: var(--sr-paper, #fff); border: 1px solid var(--sr-line); border-left: 4px solid var(--sr-red); box-shadow: 0 1px 2px rgba(20, 22, 26, .07); color: var(--sr-ink-2); } .sr-bk-vorbei-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(218, 31, 37, .1); color: var(--sr-red); } .sr-bk-vorbei-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .sr-bk-vorbei b { display: block; color: var(--sr-ink); font: italic 900 .95rem/1.2 'Figtree', var(--font-display), sans-serif; text-transform: uppercase; margin-bottom: .25rem; } .sr-bk-vorbei p { margin: 0; font-size: .85rem; line-height: 1.5; } .sr-bk-gesperrt { opacity: .45; filter: grayscale(1); pointer-events: none; user-select: none; } /* Teaser (#916, nach Svens Vorlage 10.11.2026): oben ein heller Kasten mit rotem Ticketzeichen und festem Text (ohne Datum), darunter das rote Band „Benachrichtigen lassen“ mit der Newsletter-Anmeldung. Hell oben, damit es nicht wie eine Fehlermeldung aussieht (Rot nur für Fehler); das Band ist Markenrot. */ /* Nach Svens zweiter Vorlage (10.11.2026): weißes Schloss im roten Kreis, rosa Grund, rechts helle schräge Streifen. */ .sr-teaser { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1rem; margin: 0 0 1.25rem; padding: 1rem 1.2rem; border-radius: 10px; background: linear-gradient(100deg, #fdf3f3, #fbe6e6); border: 1px solid #f0c9cb; color: var(--sr-ink-2); } .sr-teaser::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 38%; pointer-events: none; background: repeating-linear-gradient(120deg, transparent 0 22px, rgba(255, 255, 255, .55) 22px 40px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); } .sr-teaser > * { position: relative; z-index: 1; } .sr-teaser-kopf { display: flex; align-items: center; gap: 1rem; } .sr-teaser-ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sr-red); color: #fff; } .sr-teaser-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .sr-teaser-kopf b { display: block; color: var(--sr-ink); font: italic 900 1.15rem/1.15 'Figtree', var(--font-display), sans-serif; text-transform: uppercase; margin-bottom: .3rem; } .sr-teaser-kopf p { margin: 0; font-size: .88rem; line-height: 1.5; } .sr-teaser-nl { position: relative; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0; padding: 1rem 1.2rem; border-radius: 8px; background: linear-gradient(100deg, #b3151a, var(--sr-red) 55%, #e8393e); color: #fff; } .sr-teaser-nl-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding-right: 1rem; border-right: 1px solid rgba(255, 255, 255, .35); box-sizing: content-box; } .sr-teaser-nl-ico svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sr-teaser-nl-text { flex: 1 1 16rem; min-width: 0; } .sr-teaser-nl-text b { display: block; font: italic 900 1.15rem/1.15 'Figtree', var(--font-display), sans-serif; text-transform: uppercase; margin-bottom: .25rem; } .sr-teaser-nl-text p { margin: 0; font-size: .85rem; line-height: 1.45; color: rgba(255, 255, 255, .92); } .sr-teaser-nl-zeile { flex: 1 1 20rem; display: flex; gap: .6rem; } .sr-teaser-nl-zeile input { flex: 1; min-width: 0; padding: .7rem .9rem; border: 0; border-radius: 8px; font: 500 .9rem/1.2 var(--font-body); color: var(--sr-ink); background: #fff; } .sr-teaser-nl-zeile input:focus { outline: 2px solid #fff; outline-offset: 2px; } .sr-teaser-nl-zeile button { flex: none; padding: .7rem 1.1rem; border: 0; border-radius: 8px; background: #fff; color: var(--sr-red); cursor: pointer; font: italic 900 .9rem/1 'Figtree', var(--font-display), sans-serif; text-transform: uppercase; } .sr-teaser-nl-zeile button:hover { background: #fbeeee; } .sr-teaser-nl-ok { flex: 1 1 20rem; margin: 0; font-size: .88rem; line-height: 1.45; font-weight: 600; } .sr-teaser-nl-fehler { flex-basis: 100%; margin: 0; font-size: .8rem; color: #fff; font-weight: 600; } @media (max-width: 640px) { .sr-teaser-nl-ico { display: none; } .sr-teaser-nl-zeile { flex-basis: 100%; flex-direction: column; } } /* Die Wochenendwertung auf der Seite eines gelaufenen Events (#560): je Klasse die Tabelle aus /resultater (partials/serienleiste-resultater-wertung), untereinander, rechts im Kopf der Weg zur ganzen Ergebnisseite. */ .sr-ev-ergebnis .sr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .sr-ev-ergebnis-alle { font: 700 .85rem/1 var(--font-body); color: var(--sr-red); text-decoration: none; white-space: nowrap; } .sr-ev-ergebnis-alle:hover { text-decoration: underline; } .sr-ev-ergebnis-klasse { margin-top: 1.25rem; } .sr-ev-ergebnis-titel { margin: 0 0 .5rem; font: italic 900 1rem/1.1 'Figtree', var(--font-display), sans-serif; text-transform: uppercase; color: var(--sr-ink); } /* ── Das Saisonpaket (Unterseite /speedpakke/{id}) ──────────────────────── */ /* Eine kompakte Tafel: Paket und Preis im Kopf, Termine als kurze Zeilen, danach direkt die Fahrerdaten und die gemeinsame Abschlussleiste. */ .sr-pass-meta { flex-basis: 100%; display: flex; align-items: center; gap: .4rem; font: 600 .76rem/1.3 var(--font-body); color: var(--sr-ink-3); } /* Der Vergleich mit dem Einzelkauf ERKLAERT den Preis, er ist nicht das Angebot: leiser als die Ersparnis darueber und ohne Rot. Und umbrechend — der Kopf steht sonst auf nowrap, und dieser Satz ist laenger als eine Zahl. */ /* Die Ueberschrift traegt einen ganzen Abschnitt und stand mit 16 px so gross da wie eine Feldbeschriftung; ausserdem klebte sie an der dunklen Zahlenleiste darueber (Ansage vom 25.09.2026: „der titel muss groesser"). Jetzt 22 px mit Luft davor. */ .sr-pass-events { margin-top: 1.6rem; } .sr-pass-events-head { margin: 0 0 .9rem; font: 900 1.38rem/1.05 var(--font-body); font-style: italic; text-transform: uppercase; letter-spacing: -.02em; } .sr-pass-events-head span { font: 600 .84rem/1 var(--font-body); font-style: normal; text-transform: none; letter-spacing: 0; color: var(--sr-ink-3); } /* Eine REIHE von Kacheln statt zweier Spalten aus Zeilen (Vorlage „Alternative 05", 25.09.2026): die Termine nebeneinander lesen sich als Saison, zwei Spalten als Liste. `grid-auto-flow: column` und nicht `auto-fit`: die Reihe IST die Aussage, und mit einer Mindestbreite bricht sie um, sobald die Tafel schmal wird — drei mal zwei sah aus wie eine Liste. Am Telefon bricht sie ausdruecklich um (siehe unten), dort ist eine Reihe aus sechs Kacheln keine. DIE NUMMERNREIHE STEHT UEBER DEN KACHELN. Bis zum 25.09.2026 sass die Nummer halb auf der Oberkante der Kachel, und die Karte darunter traegt `overflow: hidden` fuer das Bild — also war die obere Haelfte jeder Nummer weg („achte darauf, dass die nummern oben nicht abgeschnitten sind"). Jetzt macht das Raster oben Platz, und geschnitten wird nur noch im Kachelfenster selbst. */ .sr-pass-grid { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); /* `stretch` und nicht `start`: ein Datum, das auf zwei Zeilen geht („24. – 25. okt. 2026"), machte seine Karte hoeher als die Nachbarn, und die Reihe stand treppenfoermig da. */ gap: .7rem; align-items: stretch; } /* Der Verbinder: eine gestrichelte Linie auf der Hoehe der Nummern, von der Mitte der ersten bis zur Mitte der letzten Kachel. Die Spaltenbreite ist (100% − Luecken) / Anzahl; die halbe davon ist der Weg bis zur ersten Mitte. Die Anzahl steht als `--sr-pass-n` am Element (siehe die Ansicht) — ohne sie kann CSS diese Mitte nicht kennen. */ .sr-pass-grid::before { /* Auf der Mitte der Nummern: die stehen 22 px ueber der Karte und sind 21 px hoch, ihre Mitte liegt also 9,5 px darueber. */ content: ""; position: absolute; z-index: 0; top: -10.5px; height: 2px; left: calc((100% - (var(--sr-pass-n, 1) - 1) * .7rem) / var(--sr-pass-n, 1) / 2); right: calc((100% - (var(--sr-pass-n, 1) - 1) * .7rem) / var(--sr-pass-n, 1) / 2); background: repeating-linear-gradient(90deg, var(--sr-line-2) 0 5px, transparent 5px 11px); pointer-events: none; } .sr-pass-event { position: relative; display: block; border: 1px solid var(--sr-line); border-radius: 8px; background: #fff; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } /* Die Nummer steht UEBER der Kachel, auf dem Verbinder. Der weisse Ring trennt sie von der Linie, ohne sie zu unterbrechen. */ .sr-pass-event-nr { position: absolute; left: 50%; top: -22px; z-index: 2; transform: translateX(-50%); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--sr-paper); background: var(--sr-red); color: #fff; font: 800 .68rem/1 var(--font-body); } /* Schwarze Nummer statt roter Kreis (Ansage Sven 08.11.2026: „die roten kreise sollen schwarze nummern werden“). Der helle Grund bleibt, damit die Ziffer den Verbinder bzw. am Telefon das Bild nicht berührt. */ .sr-pass-event-nr { border: 0; background: var(--sr-paper); color: var(--sr-ink); font: 900 .9rem/1 var(--font-body); } /* ── LINIE MIT START UND ZIEL (Vorlage Sven 10.11.2026: „passe die punkte, die verbinder und die start und endpunkte an“) ── Die Nummern stehen in weißen Kreisen mit grauem Rand, verbunden durch eine durchgehende graue Linie über die ganze Breite. Links beginnt sie an einem roten Startdreieck, rechts endet sie an der Zielflagge. Die Kreise stehen 40 px über der Karte, ihre Mitte liegt also 25 px darüber; Linie und Zeichen sitzen auf dieser Höhe. */ .sr-pass-events .sr-pass-grid { margin-top: 3.1rem; } .sr-pass-grid::before { top: -26px; height: 2px; left: 14px; right: 14px; background: var(--sr-line-2); } .sr-pass-event-nr { top: -40px; width: 30px; height: 30px; border: 2px solid var(--sr-line-2); background: #fff; color: var(--sr-ink); font: 800 .82rem/1 var(--font-body); } .sr-pass-start, .sr-pass-ziel { position: absolute; z-index: 1; top: -37px; display: grid; place-items: center; width: 24px; height: 22px; background: var(--sr-paper); pointer-events: none; } .sr-pass-start { left: 0; } .sr-pass-ziel { right: 0; } .sr-pass-start svg, .sr-pass-ziel svg { width: 20px; height: 20px; } .sr-pass-start svg { fill: none; stroke: var(--sr-red); stroke-width: 2.2; stroke-linejoin: round; } .sr-pass-ziel svg { fill: var(--sr-ink); } .sr-pass-ziel-stab, .sr-pass-ziel-rand { fill: none; stroke: var(--sr-ink); stroke-width: 1.4; stroke-linecap: round; } .sr-pass-event:hover { border-color: var(--sr-line-2); transform: translateY(-2px); color: inherit; box-shadow: 0 6px 18px rgba(0, 0, 0, .07); } /* Zuerst das gepflegte Streckenfoto (füllend), sonst die Zeichnung aus dem Verzeichnis: die ist ein Bild mit Rand, deshalb „contain" auf hellem Grund — beschnitten verliert sie die Form, an der man die Strecke erkennt. */ /* 16/9 wie die Zeichnungen selbst (1100x615..623). Bei 16/10 blieben oben und unten je vier Pixel leerer Grund, und die Zeichnung wurde dafuer kleiner gerechnet. */ /* `overflow: hidden` sass bis zum 25.09.2026 an der KARTE und schnitt damit die Nummer ab. Es gehoert hierher: geschnitten werden soll das Bild, nicht was ueber der Karte steht. */ .sr-pass-event-tile { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; min-height: 0; border-radius: 7px 7px 0 0; background: var(--sr-paper); } .sr-pass-event-tile img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; } .sr-pass-event-tile.is-foto img { object-fit: cover; } .sr-pass-event:hover .sr-pass-event-tile img { transform: scale(1.04); } /* Ohne beides die Wortmarke auf Papier — dasselbe Maß wie eine Kachel mit Bild, damit die Reihe eine Reihe bleibt. */ .sr-pass-event-tile.is-leer { display: flex; align-items: center; justify-content: center; } .sr-pass-event-marke { width: 34%; height: auto; object-fit: contain; opacity: .14; } .sr-pass-event-txt { display: block; padding: .5rem .5rem .6rem; min-width: 0; text-align: center; } .sr-pass-event-txt b { display: block; font: 800 .74rem/1.25 var(--font-body); color: var(--sr-ink); } .sr-pass-event-name { display: block; margin-top: .12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 .74rem/1.3 var(--font-body); color: var(--sr-ink-2); } /* Die Reihe braucht oben Luft fuer die Nummern, die halb ueber der Kante sitzen. */ /* Luft fuer die Nummernreihe darueber — 1 rem Abstand plus die 22 px, die die Nummer ueber der Kachel steht. */ .sr-pass-events .sr-pass-grid { margin-top: 2.4rem; } /* Der Einzelpreis in der Kachel (Ansage vom 28.09.2026). Er steht UNTER dem Namen und traegt Ziffern gleicher Breite: sechs Betraege nebeneinander vergleicht man nur, wenn die Stellen untereinander stehen. Etwas blasser als das Datum daruber — es ist die Nebenauskunft der Kachel, nicht ihre Ueberschrift. */ .sr-pass-event-preis { display: block; margin-top: .22rem; font: 700 .74rem/1.3 var(--font-body); color: var(--sr-ink-2); font-variant-numeric: tabular-nums; } /* ── Die Rechnung unter der Liste ──────────────────────────────────────── Drei Zeilen: was die Termine einzeln zusammen kosten, was das Paket kostet, was dazwischen liegt. Rechtsbuendige Betraege in gleichbreiten Ziffern, damit die Spalte eine Spalte ist; die Ersparnis in der Hausfarbe, weil sie der Grund ist, warum hier jemand liest. */ .sr-pass-summe { margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--sr-line); display: flex; flex-direction: column; gap: .25rem; } .sr-pass-summe > div { display: flex; align-items: baseline; gap: .6rem; } .sr-pass-summe dt { flex: 1 1 auto; margin: 0; font: 400 .8rem/1.4 var(--font-body); color: var(--sr-ink-2); } .sr-pass-summe dd { flex: none; margin: 0; font: 700 .8rem/1.4 var(--font-body); color: var(--sr-ink); font-variant-numeric: tabular-nums; } .sr-pass-summe .sr-pass-summe-paket dt, .sr-pass-summe .sr-pass-summe-paket dd { font-weight: 800; color: var(--sr-ink); } /* Der Speedpakke-Preis größer als der Normalpreis (Ansage Sven 08.11.2026). */ .sr-pass-summe .sr-pass-summe-paket dt { font-size: .95rem; } .sr-pass-summe .sr-pass-summe-paket dd { font-size: 1.15rem; } .sr-pass-summe .sr-pass-summe-spar dt, .sr-pass-summe .sr-pass-summe-spar dd { color: var(--sr-red); font-weight: 800; } .sr-pass-note { margin: .65rem 0 0; font-size: .7rem; color: var(--sr-ink-3); } .sr-pass-desc { margin: .9rem 0 0; font-size: .85rem; line-height: 1.55; color: var(--sr-ink-2, var(--sr-ink)); } .sr-pass-desc > :first-child { margin-top: 0; } .sr-pass-desc > :last-child { margin-bottom: 0; } .sr-pass-desc p, .sr-pass-desc ul, .sr-pass-desc ol { margin: 0 0 .6rem; } .sr-pass-desc ul, .sr-pass-desc ol { padding-left: 1.1rem; } .sr-pass-desc h2, .sr-pass-desc h3 { font: 800 .8rem/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .04em; color: var(--sr-ink); margin: .9rem 0 .3rem; } .sr-pass-desc a { color: var(--sr-red); text-decoration: underline; } /* ── Die Buchung als Abschnitt derselben Tafel ──────────────────────────── Sie hatte bis zum 22.09.2026 eine eigene Tafel darunter. Das Paket ist EIN Produkt, und eine zweite Tafel mit eigener Überschrift las sich wie ein zweites. */ .sr-pass-book { margin-top: .95rem; padding-top: .95rem; border-top: 1px solid var(--sr-line); } /* HIER STAND die Startnummer als „normales breites Formularfeld" — ein Knopf ueber die ganze Breite mit einem Pfeil am Ende. Sie ist am 25.09.2026 entfallen: die Paketseite traegt seither denselben Fahrerblock wie die Terminseite, und dort IST die Tafel der Knopf (.sr-plate). Diese vier Regeln waren spezifischer als die Tafelregel und haben sie geschlagen — die Tafel stand in einem weissen Kasten mit Rand und Pfeil, wie ein Bild in einem Knopf statt wie ein Schild. */ /* Die Extras liegen zusammengeklappt: sie sind freiwillig und sollen nicht wie eine Pflichtfrage vor den Daten stehen. Ein
, vom Skript gebaut. */ /* display:block schlaegt hier das flex der offenen Fassung: in einem
waeren Kopfzeile und Inhalt sonst zwei Flex-Kinder nebeneinander — die Haken standen rechts NEBEN dem Aufklapper statt darunter. */ body.design-serienleiste .sr-inline .sr-opts-falte { display: block; border: 1px solid var(--sr-line); border-radius: 10px; background: #fff; padding: 0; gap: 0; } body.design-serienleiste .sr-opts-falte > summary { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; cursor: pointer; list-style: none; font: 400 .8rem/1.2 var(--font-body); } body.design-serienleiste .sr-opts-falte > summary::-webkit-details-marker { display: none; } body.design-serienleiste .sr-opts-falte > summary b { font: 800 .68rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--sr-ink); } body.design-serienleiste .sr-opts-zeichen { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--sr-line-2); color: var(--sr-ink-2); font: 700 .95rem/1 var(--font-body); transition: transform .15s ease, border-color .15s ease, color .15s ease; } body.design-serienleiste .sr-opts-falte[open] .sr-opts-zeichen { transform: rotate(45deg); border-color: var(--sr-red); color: var(--sr-red); } body.design-serienleiste .sr-opts-hinweis { color: var(--sr-ink-3); font-size: .78rem; } body.design-serienleiste .sr-opts-falte > :not(summary) { margin: 0 1rem .55rem; } body.design-serienleiste .sr-opts-falte > summary + :not(summary) { margin-top: .2rem; } body.design-serienleiste .sr-opts-falte > :not(summary):last-child { margin-bottom: 1rem; } /* ── Der Kopf der Paketseite: dunkles Band nach der Vorlage ───────────── Ansage vom 25.09.2026 („setze mir das speedpakke design um, wie in dem bild gezeigt"). Dieselbe dunkle Haelfte des Designs wie Kopfleiste und Hero — ein Saisonpaket ist die grosse Anschaffung dieser Seite, und ein heller Kopf wie bei jeder anderen Tafel sagte das nicht. */ .sr-pass-hero { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.4rem; align-items: center; /* Genau das Polster der Tafel herausgerechnet — wie der Kopf der Termintafel es macht (siehe .sr-ek). Vorher standen hier -1,4 rem auf beiden Achsen: das Band ragte damit 3 px ueber die Oberkante und 1 px ueber die rechte Kante hinaus, und das Kreuz darin schwebte sichtbar ueber der Ecke (Ansage vom 25.09.2026). */ margin: -1.15rem calc(var(--sr-block-pad-x) * -1) 0; padding: 1.8rem 1.6rem 1.9rem; /* Und derselbe Radius wie die Tafel, aus derselben Quelle. */ border-radius: var(--sr-karten-radius) var(--sr-karten-radius) 0 0; background: var(--sr-dark); color: var(--sr-dark-ink); } /* Das Foto liegt dahinter und traegt rechts; links muss die Schrift stehen koennen. */ .sr-pass-hero-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .5; } .sr-pass-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, var(--sr-dark) 4%, rgba(11, 13, 16, .82) 42%, rgba(11, 13, 16, .35) 72%); } .sr-pass-hero-in { position: relative; min-width: 0; } .sr-pass-eyebrow { margin: 0 0 .5rem; font: 800 .72rem/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--sr-red-2); } /* Der Name in zwei Zeilen, in der Schrift des Heros. Die zweite Zeile ist die Serie und steht etwas kleiner — „Speedpakke" ist das Produkt, die Serie sagt nur, welche. */ .sr-pass-title { margin: 0; font-family: var(--font-display-hero); font-weight: 400; font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: .92; letter-spacing: .01em; text-transform: uppercase; color: #fff; } .sr-pass-title span { display: block; font-size: .78em; } .sr-pass-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .7rem 0 0; font: 600 .84rem/1.3 var(--font-body); color: var(--sr-dark-ink-2); } .sr-pass-meta i { font-style: normal; color: var(--sr-red-2); } .sr-pass-preis { margin-top: 1.1rem; } .sr-pass-preis em { display: block; margin-bottom: .2rem; font: 800 .62rem/1 var(--font-body); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--sr-dark-ink-2); } .sr-pass-preis s { display: block; font: 600 .9rem/1 var(--font-body); color: var(--sr-dark-ink-2); } .sr-pass-preis b { display: block; margin-top: .15rem; font: 900 clamp(1.9rem, 3.4vw, 2.6rem)/1 var(--font-body); letter-spacing: -.02em; color: #fff; } .sr-pass-preis span { display: block; margin-top: .3rem; font: 800 .88rem/1.2 var(--font-body); color: var(--sr-red-2); } .sr-pass-preis small { display: block; margin-top: .45rem; font: 400 .76rem/1.35 var(--font-body); color: var(--sr-dark-ink-2); } /* ── Das Ticketbild ────────────────────────────────────────────────────── Die fertige Grafik aus der Vorlage, nur der Faecher (siehe die Ansicht). Sie laeuft randlos in die drei Kanten des Bandes und blendet nach LINKS aus: dort steht die Schrift, und der Luftbildgrund der Grafik ist hell. Ohne die Ausblendung stuende ein helles Rechteck mitten im dunklen Band. Die Grafik gibt dem Band seine Hoehe. Kein `cover`: bei der Bandbreite bliebe von einem Faecher im Hochformat ein waagerechter Streifen uebrig. */ .sr-pass-billett { position: absolute; right: 0; top: 0; bottom: 0; z-index: -1; width: 62%; height: 100%; object-fit: cover; object-position: 55% top; /* Aus dem Raster genommen und BREITER als die rechte Spalte: im Zellmass (etwa quadratisch) schnitt der Zuschnitt „SPEEDPAKKE" auf der grossen Karte mitten im Wort ab. Die zweite Rasterspalte bleibt und haelt die Schrift von der Grafik fern. Nach links blendet sie aus — dort steht die Schrift, und der Luftbildgrund ist hell. */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); } /* Das Kreuz als ECKSTUECK, wie auf der Terminseite (Ansage vom 25.09.2026: „der close button beim speedpakke ist nicht komplett in der oberen ecke"). Es sass 0,9 rem eingerueckt und schwebte damit im Band; auf der Terminseite zeichnet es die obere rechte Ecke der Tafel nach. Derselbe Radius aus derselben Quelle (`--sr-karten-radius` an der Karte), damit beide Ecken dieselbe Rundung haben. */ .sr-pass-close { position: absolute; right: 0; top: 0; z-index: 2; border-radius: 0 var(--sr-karten-radius) 0 var(--sr-karten-radius); } body.design-serienleiste .sr-pass-close { border-top: 0; border-right: 0; border-color: rgba(255, 255, 255, .28); background: rgba(11, 13, 16, .5); color: #fff; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } body.design-serienleiste .sr-pass-close:hover { background: var(--sr-red); border-color: rgba(255, 255, 255, .3); } /* ── Die Zahlenleiste unter dem Band ─────────────────────────────────── */ /* Ausgriff aus derselben Quelle wie das Band darueber (--sr-block-pad-x). Mit festen -1,4 rem gegen 1,25 rem Polster stand die Leiste je Seite rund 2 px breiter als das Bild (Ansage Sven 03.11.2026). */ .sr-pass-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .2rem; list-style: none; margin: 0 calc(var(--sr-block-pad-x, 1.25rem) * -1) 1.3rem; padding: .9rem 1.6rem; background: var(--sr-dark-2); color: var(--sr-dark-ink); } .sr-pass-zahlen li { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 .6rem; padding: .1rem .8rem .1rem 0; } .sr-pass-zahlen li + li { border-left: 1px solid var(--sr-dark-line); padding-left: .9rem; } .sr-pass-zahlen svg { grid-row: 1 / 3; width: 24px; height: 24px; fill: none; stroke: var(--sr-red-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sr-pass-zahlen b { font: 800 .86rem/1.1 var(--font-body); color: #fff; } .sr-pass-zahlen span { font: 400 .72rem/1.2 var(--font-body); color: var(--sr-dark-ink-2); } @media (max-width: 860px) { /* Am Telefon steht das Ticketbild nicht neben dem Text, sondern gar nicht: es ist Schmuck, und Schmuck nimmt dort keinen halben Bildschirm — bei 375 px lag es quer ueber Namen und Preis. MIT DEM ELTERNTEIL davor: seit die Grafik ein ist, schlaegt `.sr img` (0,1,1) die blosse Klasse (0,1,0), und die Regel hier blieb wirkungslos. */ .sr-pass-hero { grid-template-columns: 1fr; } .sr .sr-pass-billett { display: none; } } /* HIER STANDEN drei Regeln, die die Extras des Pakets ueber die ganze Breite legten — sinnvoll, solange sie eine eigene Zeile unter den Daten waren. Seit dem 25.09.2026 stehen sie als eigene SPALTE neben den Daten, beide in einer Karte (.sr-pass-daten). Die Regeln waren spezifischer als die der Karte und haben deren Aufteilung geschlagen: die beiden Ueberschriften landeten uebereinander in derselben Rasterzelle. */ /* ── Klassen ────────────────────────────────────────────────────────────── */ .sr-cls-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; } /* Der Verweis muss Block sein: als Inline-Element schneidet overflow den Text ab. */ /* Das Foto traegt die ganze Kachel; Name und Kurzzeile stehen darauf im dunklen Fuss, der Pfeil in der Ecke. Frueher lag das Foto oben und der Name in einem weissen Streifen darunter — zwei Haelften statt einer Kachel. */ /* Weisser Grund statt dunklem (Meldung Sven 15. und 19.10.2026, #517: „minimaler schwarzer rand", nach dem ersten Zeigen weg): die Kachel ist Bruchteile eines Pixels breit und hoch (z. B. 262,94 × 227,89), und an der Unterkante und den runden Ecken schimmerte der dunkle Grund unter dem weissen Feld als Strich durch — bis das Zeigen die Kachel auf eine eigene Ebene hob. Das Foto hat seinen eigenen Grund, das Feld beim Zeigen auch. */ .sr-cls { position: relative; display: block; overflow: hidden; border-radius: 10px; background: var(--sr-paper); color: #fff; text-decoration: none; box-shadow: 0 1px 3px rgba(11, 13, 16, .12), 0 8px 20px rgba(11, 13, 16, .10); transition: transform .15s ease, box-shadow .15s ease; } /* Beim Zeigen ein schwarzer Schein nach aussen (Ansagen Sven 08.10.2026: erst „keinen roten Rahmen, sondern einen roten Glow aussen", dann schwaecher, dann „mach den glow schwarz" — bis dahin ein roter 2-px-Ring, Ansage vom 25.09.2026). Als Schatten und nicht als `border`: ein Rahmen aendert die Groesse der Kachel, und sie ruckte beim Zeigen um zwei Pixel. Er folgt dem Radius von allein. Die GEOEFFNETE Kachel (.sr-cls.is-open) behaelt ihren Ring — sie hebt sich ausserdem mit ihrem Schleier vom Rest ab. */ .sr-cls:hover { transform: translateY(-2px); color: #fff; box-shadow: var(--sr-hover-glow), 0 16px 32px rgba(11, 13, 16, .16); } /* Das Foto steht UEBER der Beschriftung statt hinter ihr, und im Seitenverhaeltnis der Dateien (16:9). Frueher lag das weisse Feld auf dem unteren Drittel des Bildes — von einer Kachel war damit nur ein Streifen zu sehen. Jetzt ist das ganze Bild da, ungeschnitten. */ /* 2:1 statt 16:9 seit 26.10.2026 (Ansage Sven: „die klassenkacheln können in der höhe etwas kleiner werden"): das Foto wird flacher, der Ausschnitt bleibt mittig auf Fahrer und Maschine. */ /* 3:1 seit 31.10.2026 (Ansage Sven: „mach die klassen kacheln kleiner in der höhe und gib den bildern in den kacheln weniger raum“) — das Foto wird noch flacher, der Ausschnitt bleibt auf Fahrer und Maschine. */ .sr-cls-shot { display: block; aspect-ratio: 3 / 1; overflow: hidden; background: var(--sr-ground-2); } .sr-cls-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform .5s ease; } .sr-cls:hover .sr-cls-shot img { transform: scale(1.05); } /* Ausschnitt weiter oben, damit die Köpfe der Fahrer in der flachen Kachel bleiben (Ansage Sven 01.11.2026). Hängt am Textblock der Klasse, nicht am Namen — eine Umbenennung im Backend lässt ihn stehen. */ .sr-cls[data-cls-open="sm_class_mikro"] .sr-cls-shot img { object-position: 50% 15%; } .sr-cls[data-cls-open="sm_class_mini_rookie"] .sr-cls-shot img { object-position: 50% 20%; } .sr-cls[data-cls-open="sm_class_supermoto_legends_s2"] .sr-cls-shot img { object-position: 50% 8%; } /* Die neuen Bilder vom 01.11.2026 (#732): Helme oben im Bild. */ .sr-cls[data-cls-open="sm_class_supermoto_elite_s1"] .sr-cls-shot img { object-position: 50% 14%; } .sr-cls[data-cls-open="sm_class_crf150"] .sr-cls-shot img { object-position: 50% 22%; } .sr-cls[data-cls-open="sm_class_mini_open"] .sr-cls-shot img { object-position: 50% 22%; } /* Womens Cup hat keinen Textblock und darum den Schlüssel klasse- — der Ausschnitt hängt deshalb am Bild selbst. */ .sr-cls-shot img[src*="mc-womens-cup"] { object-position: 50% 35%; } /* Mehr vom Helm (Ansage Sven 04.11.2026: „mnigp3 und supermini bilder müssen weiter runter damit man mehr vom helm sieht“, „superbike1000 auch“). */ .sr-cls-shot img[src*="sm-mini-gp-3"], .sr-cls-shot img[src*="sm-supermini"], .sr-cls-shot img[src*="mc-superbike-1000"] { object-position: 50% 12%; } .sr-cls[data-cls-open="mc_class_sportbike"] .sr-cls-shot img { object-position: 50% 15%; } /* Die Beschriftung steht auf WEISS, nicht im dunklen Foto: schwarz auf weiss liest sich in jedem Bild gleich, und die Kachel bekommt eine ruhige Unterkante. Feste Hoehe auf jeder Kachel — ein Titel, der wie „Supermoto Legends & Talents" umbricht, verschiebt die Zeile darunter nicht, er waechst nach oben ins Bild. */ /* Das weisse Feld ist auf jeder Kachel gleich hoch (der Wert steht als Marke, weil der Pfeil daneben ihn auch braucht) — und der Inhalt steht MITTIG darin: damit ist der Abstand ueber der Schrift immer genauso gross wie der darunter, egal ob eine Zeile darin steht oder vier. */ /* 56 statt 80 px seit 26.10.2026 (Ansage Sven: „deswegen können die kacheln in der höhe jetzt kleiner werden“): ohne die Kurzzeile steht nur noch der Name darin, höchstens zwei Zeilen (rund 34 px) plus Rand. */ /* 50 px seit 31.10.2026 (dieselbe Ansage): zwei Zeilen Name passen weiter hinein. */ .sr-cls { --sr-cls-cap: 50px; } .sr-cls-in { position: relative; z-index: 1; height: var(--sr-cls-cap); padding: .45rem 3.2rem .45rem .85rem; display: flex; flex-direction: column; justify-content: center; background: var(--sr-paper); color: var(--sr-ink); } /* Das weisse Feld laeuft nach oben ins Foto aus, statt mit einer Kante daran zu stossen — der Uebergang gehoert zur Kachel, nicht zwischen zwei Haelften. */ .sr-cls-in::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 46px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .22) 42%, rgba(255, 255, 255, .62) 72%, var(--sr-paper) 100%); } /* Der Name hoechstens zweizeilig — damit passt er ins weisse Feld, und kein langer Titel schiebt es ueber das halbe Foto. */ .sr-cls-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 800 .875rem/1.2 var(--font-body); text-transform: uppercase; color: var(--sr-ink); } /* Die Kurzzeile (.sr-cls-tag) ist seit 25.10.2026 aus der Kachel entfernt (Ansage Sven), ihre Regeln mit ihr. */ /* Der Pfeil steht mittig im weissen Feld — derselbe Wert, dieselbe Mitte. */ /* Pfeil in der Kachelecke ausgeblendet (Ansage Sven 08.11.2026: „die pfeile bei den rennklassen entfernen“). */ .sr-cls-go { display: none !important; } .sr-cls-go { position: absolute; right: .85rem; bottom: calc((var(--sr-cls-cap) - 30px) / 2); z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--sr-line-2); color: var(--sr-ink); transition: background .15s ease, border-color .15s ease, color .15s ease; } .sr-cls-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sr-cls:hover .sr-cls-go { background: var(--sr-red); border-color: var(--sr-red); color: #fff; } /* Beim Zeigen (und an der offenen Kachel) wird das weisse Feld dunkel (Ansage Sven 07.10.2026: „beim mouseover bei den rennklasse kacheln soll der weisse untere bereich ins dunkle wechseln"). Der Auslauf ins Foto bekommt eine dunkle Fassung als eigene Ebene, die einblendet — ein Verlauf selbst laesst sich nicht weich ueberblenden. */ /* Langsam (Ansage Sven 08.10.2026: „muss langsamer faden"): .6 s statt .2 s, fuer Feld, Auslauf, Schrift und Pfeil gleich — sonst wechselt ein Teil vor dem anderen. */ .sr-cls { --sr-cls-fade: .6s ease; } .sr-cls-in { transition: background var(--sr-cls-fade); } .sr-cls-in::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 46px; pointer-events: none; opacity: 0; transition: opacity var(--sr-cls-fade); background: linear-gradient(180deg, rgba(11, 13, 16, 0) 0%, rgba(11, 13, 16, .35) 42%, rgba(11, 13, 16, .75) 72%, var(--sr-dark) 100%); } .sr-cls-name { transition: color var(--sr-cls-fade); } .sr-cls:is(:hover, :focus-visible, .is-open) .sr-cls-in { background: var(--sr-dark); } .sr-cls:is(:hover, :focus-visible, .is-open) .sr-cls-in::after { opacity: 1; } .sr-cls:is(:hover, :focus-visible, .is-open) .sr-cls-name { color: #fff; } /* ═══ Klassen-Kacheln überarbeitet (31.10.2026, Empfehlungsliste von Sven: Bildhöhe 80–85 px, Bildverlauf weg, Titel ~12 px kräftig schwarz, Textfeld einheitlich hoch, Pfeil etwas markanter, Hover: Foto zoomt minimal und eine rote Linie erscheint, Hintergrund weiß). Hebt das dunkle Feld beim Zeigen (07.10.2026) und den Auslauf ins Foto auf. ═══ */ .sr-cls-shot { aspect-ratio: auto; height: 82px; } .sr-cls-in::before, .sr-cls-in::after { content: none; } .sr-cls { --sr-cls-cap: 46px; } .sr-cls-name { font: 800 .75rem/1.2 var(--font-body); letter-spacing: .02em; color: var(--sr-ink); } .sr-cls:is(:hover, :focus-visible, .is-open) .sr-cls-in { background: var(--sr-paper); } .sr-cls:is(:hover, :focus-visible, .is-open) .sr-cls-name { color: var(--sr-ink); } .sr-cls-go { width: 28px; height: 28px; bottom: calc((var(--sr-cls-cap) - 28px) / 2); border: 1.5px solid var(--sr-ink-3); } .sr-cls-go svg { width: 14px; height: 14px; stroke-width: 2.4; } .sr-cls:hover .sr-cls-shot img { transform: scale(1.03); } /* Die rote Linie an der Unterkante: fährt beim Zeigen von links ein, an der offenen Kachel steht sie. */ .sr-cls::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; pointer-events: none; background: var(--sr-red); transform: scaleX(0); transform-origin: left center; transition: transform .25s ease; } .sr-cls:is(:hover, :focus-visible, .is-open)::after { transform: scaleX(1); } /* Beim Zeigen reagiert die ganze Karte (Empfehlung Sven 31.10.2026: „Bild zoomt minimal, Karte bekommt etwas mehr Schatten, rote Unterkante bleibt, Pfeilbutton wird rot, Karte hebt sich 1–2 px an … keine starke Outline“): statt des dunklen Scheins rundherum (08.10.2026) ein weicher, etwas tieferer Schatten nach unten; Anheben 2 px bleibt. */ .sr-cls:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(11, 13, 16, .10), 0 12px 26px rgba(11, 13, 16, .16); } /* Events beim Zeigen (Empfehlung Sven 31.10.2026: „1–2 px mehr Schatten oder ein ganz leichtes Anheben“): leicht angehoben statt seitlich verschoben, weicher Schatten statt Schein; der rote Lichtstreif (08.10.2026) bleibt. */ .sr-ev:hover { transform: translateY(-1px); box-shadow: 0 2px 5px rgba(11, 13, 16, .08), 0 8px 18px rgba(11, 13, 16, .12); } /* ── Die Tafel zur Klasse ──────────────────────────────────────────────── Sie liegt ABSOLUT im Raster, nicht darin als Zeile: waere sie eine Rasterzelle, ruecken beim Aufklappen alle Kacheln dahinter eine Reihe weiter — und genau das soll nicht passieren. So steht das Raster still, und die Tafel legt sich unter die Reihe der Kachel. Darunter liegt ein Schleier ueber dem ganzen Blatt, der alles dahinter unscharf macht. Kachel und Tafel heben sich darueber und bleiben scharf; erst das Kreuz nimmt ihn weg. */ .sr { position: relative; } /* 1,5 px Unschärfe und 12 % Dunkel, weich in 180 ms — die Seite dahinter bleibt erkennbar (Empfehlung Sven 31.10.2026: „Den empfinde ich weiterhin als etwas zu kräftig … die Website dahinter ist kaum noch erkennbar“; vorher 3,5 px / 25 %). */ .sr-cls-veil { position: absolute; inset: 0; z-index: 60; background: rgba(11, 13, 16, .12); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); animation: sr-veil .18s ease both; } .sr-cls-veil[hidden] { display: none; } .sr-cls-veil.is-closing { animation: sr-veil .18s ease both reverse; } .sr-cls-grid { position: relative; } /* Die Tafel muss sich ueber den Schleier heben koennen. Die Tafel-Karte traegt aber die Einblend-Bewegung der Huelle (.sr-right > *, animation … both), und eine fuellende Bewegung auf transform macht aus der Karte einen eigenen Stapelraum — darin kaeme die Tafel nie hoeher als die Karte selbst. Solange eine Tafel offen ist, ruht die Bewegung; sie ist zu diesem Zeitpunkt ohnehin laengst gelaufen. */ .sr-card.is-cls-host { animation: none !important; } .sr-cls-panel { --sr-karten-radius: 12px; position: absolute; left: 0; right: 0; z-index: 62; padding: 1.15rem 1.3rem 1.2rem; border: 1px solid var(--sr-line); border-radius: var(--sr-karten-radius); background: var(--sr-paper); /* Schatten knapp, damit Kachel und Tafel nicht zu schweben scheinen; der Abstand bleibt (Empfehlung Sven 31.10.2026: „Ich würde den Abstand nicht weiter vergrößern“). */ box-shadow: 0 2px 6px rgba(11, 13, 16, .08), 0 12px 30px rgba(11, 13, 16, .14); transform-origin: top center; } .sr-cls-panel[hidden] { display: none; } /* Ruhig herein (Empfehlung Sven 31.10.2026: „mit einer sehr kleinen Bewegung von etwa 8 px nach oben und zunehmender Deckkraft (200–250 ms) … kein Springen oder starkes Skalieren“). */ .sr-cls-panel.is-open { animation: sr-cls-auf .22s cubic-bezier(.2, .7, .3, 1) both; } .sr-cls-panel.is-closing { animation: sr-cls-zu .18s ease both; } @keyframes sr-cls-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes sr-cls-zu { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } } /* Über der Kachel (kein Platz darunter): der Pfeil sitzt unten und zeigt nach unten. */ .sr-cls-panel.ist-oben .sr-cls-panel-tip { top: auto; bottom: -9px; clip-path: polygon(0 0, 100% 0, 50% 100%); } /* Am Telefon als Blatt von unten (Bottom-Sheet). Das Skript hängt Tafel und Schleier dafür an den Seitenkörper — in der Rollfläche (#sl-scroll, mit perspective) hielte position: fixed nicht. */ .sr-cls-panel.ist-blatt { position: fixed; left: 0; right: 0; bottom: 0; top: auto !important; z-index: 1001; max-height: 82vh; overflow-y: auto; border-radius: 16px 16px 0 0; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(11, 13, 16, .28); } .sr-cls-panel.ist-blatt .sr-cls-panel-tip { display: none; } .sr-cls-veil.ist-blatt { position: fixed; z-index: 1000; } /* Der rote Pfeil zeigt auf die Kachel, aus der die Tafel kam — das Skript setzt die Stelle. Ein Dreieck und keine gedrehte Flaeche: gedreht stand die untere Haelfte mit heraus und las sich als Raute. */ .sr-cls-panel-tip { position: absolute; top: -9px; left: var(--sr-cls-tip, 50%); width: 20px; height: 10px; margin-left: -10px; background: var(--sr-red); clip-path: polygon(50% 0, 100% 100%, 0 100%); } /* Rechts Platz fuer das Eckstueck — es liegt seit dem 24.09.2026 absolut in der Ecke der Tafel und nicht mehr als letztes Kind dieser Zeile. Die Tafel polstert selbst 1,3 rem, davon geht der Platz ab. */ .sr-cls-panel-head { display: flex; align-items: center; gap: .85rem; padding-bottom: .85rem; padding-right: 1.9rem; border-bottom: 1px solid var(--sr-line); } .sr-cls-panel-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(218, 31, 37, .1); } .sr-cls-panel-ico img { width: 26px; height: 26px; object-fit: contain; } .sr-cls-panel-naming { min-width: 0; } .sr-cls-panel-title { margin: 0; font: 900 1.25rem/1.05 var(--font-body); font-style: italic; text-transform: uppercase; color: var(--sr-red); } /* Dieselbe Staffelung wie auf der Kachel: der Titel traegt, die Kurzzeile begleitet. */ .sr-cls-panel-tag { display: block; margin-top: .2rem; font: 400 .8rem/1.4 var(--font-body); color: var(--sr-ink-2); } /* Das Kreuz: heller Kreis mit dunklem Zeichen, wie in der Vorlage — und die Vorlage fuer .sr-close oben, das seit 19.09.2026 dasselbe System traegt. Beide zusammen aendern. */ /* Dasselbe Eckstueck wie an den Tafeln (siehe .sr-close): jedes Kreuz auf dieser Seite sieht gleich aus, und sie sind schon zweimal auseinandergelaufen. Der Radius kommt aus dem Kasten — die Klassentafel rundet mit 12 px statt mit 10, das Stueck folgt ihr. */ .sr-cls-close { position: absolute; top: 0; right: 0; z-index: 6; display: grid; place-items: center; cursor: pointer; padding: 0; width: 42px; height: 42px; border-radius: 0 var(--sr-karten-radius) 0 var(--sr-karten-radius); border: 0; border-left: 1px solid var(--sr-line); border-bottom: 1px solid var(--sr-line); background: var(--sr-ground); color: var(--sr-ink); transition: background .15s ease, border-color .15s ease, color .15s ease; } .sr-cls-close:hover { background: var(--sr-red); border-color: var(--sr-red); color: #fff; } .sr-cls-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; transition: transform .2s cubic-bezier(.2, .7, .3, 1); } .sr-cls-close:hover svg { transform: rotate(90deg); } /* Der Maschinentext in Spalten, jede Zeile mit rotem Haken — das ist der Inhalt, den es je Klasse gibt (public.challenge.). */ .sr-cls-panel-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .2rem 1.6rem; } .sr-cls-panel-col { padding-top: .9rem; font-size: .84rem; line-height: 1.5; color: var(--sr-ink-2); } .sr-cls-panel-col h4 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .45rem; font: 800 .74rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--sr-ink); } .sr-cls-panel-col h4 svg { width: 16px; height: 16px; flex: none; fill: var(--sr-red); } .sr-cls-panel-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; } .sr-cls-panel-col li { position: relative; padding-left: 1.4rem; } .sr-cls-panel-col li::before { content: ""; position: absolute; left: 0; top: .34em; width: 11px; height: 6px; border-left: 2px solid var(--sr-red); border-bottom: 2px solid var(--sr-red); transform: rotate(-45deg); } .sr-cls-panel-col p { margin: 0 0 .5rem; } .sr-cls-panel-col p:last-child { margin-bottom: 0; } .sr-cls-panel-body { padding-top: .9rem; font-size: .875rem; line-height: 1.5; color: var(--sr-ink-2); } .sr-cls-panel-body ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .3rem 1.4rem; } /* Steht der Maschinentext allein, darf er ueber die ganze Breite laufen. */ .sr-cls-panel-cols:not(:has(.sr-cls-panel-col)) { display: block; } .sr-cls-panel-body li { position: relative; padding-left: 1.4rem; } .sr-cls-panel-body li::before { content: ""; position: absolute; left: 0; top: .34em; width: 11px; height: 6px; border-left: 2px solid var(--sr-red); border-bottom: 2px solid var(--sr-red); transform: rotate(-45deg); } .sr-cls-panel-body p { margin: 0 0 .5rem; } /* Gegliedert (31.10.2026): links die Anforderungen mit Haken, rechts die Motor-Alternativen ohne Haken, „eller“ dazwischen. */ .sr-cls-gegliedert { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem 1.8rem; align-items: start; } .sr-cls-gegliedert:not(:has(.sr-cls-teil + .sr-cls-teil)) { grid-template-columns: minmax(0, 1fr); } .sr-cls-gegliedert .sr-cls-teil ul { grid-template-columns: minmax(0, 1fr); } .sr-cls-teil h4 { margin: 0 0 .45rem; font: 800 .72rem/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--sr-ink); } /* Heller als der übrige Grauton, damit der Kasten nicht schwerer wirkt als die Liste (Empfehlung Sven 31.10.2026). */ .sr-cls-motor { padding: .7rem .85rem; border-radius: 10px; background: #f1f2f4; } .sr-cls-motor p { margin: 0; font-weight: 600; color: var(--sr-ink); } /* „eller“ trennt die zwei Motorvarianten deutlich: fett, dunkler, mit Strich zu beiden Seiten (Empfehlung Sven 31.10.2026: „Das Wort »eller« könnte allerdings etwas kontrastreicher sein“). */ .sr-cls-eller { display: flex; align-items: center; gap: .55rem; margin: .4rem 0; font: 800 .7rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--sr-ink-2); } .sr-cls-eller::before, .sr-cls-eller::after { content: ""; flex: 1; height: 1px; background: rgba(11, 13, 16, .16); } @media (max-width: 640px) { .sr-cls-gegliedert { grid-template-columns: minmax(0, 1fr); } } .sr-cls-panel-body p:last-child { margin-bottom: 0; } .sr-cls-panel-foot { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1rem; padding-top: .95rem; border-top: 1px solid var(--sr-line); } .sr-cls-panel-foot .sr-btn { clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%); padding-right: 1.6rem; } .sr-cls-panel-foot .sr-btn svg { width: 14px; height: 14px; } .sr-cls-panel-more { font: 700 .66rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--sr-ink-2); text-decoration: none; border-bottom: 2px solid var(--sr-line-2); padding-bottom: .25rem; } .sr-cls-panel-more:hover { color: var(--sr-red); border-bottom-color: var(--sr-red); } /* Die offene Kachel hebt sich ueber den Schleier und bleibt scharf. */ .sr-cls.is-open { position: relative; z-index: 62; box-shadow: 0 0 0 2px var(--sr-red), 0 14px 32px rgba(11, 13, 16, .26); } .sr-cls.is-open .sr-cls-go { background: var(--sr-red); border-color: var(--sr-red); color: #fff; transform: rotate(90deg); } .sr-cls-go { transition: background var(--sr-cls-fade), border-color var(--sr-cls-fade), color var(--sr-cls-fade), transform .25s cubic-bezier(.2, .7, .3, 1); } @media (prefers-reduced-motion: reduce) { .sr-cls-panel.is-open, .sr-cls-panel.is-closing, .sr-cls-veil { animation: none; } .sr-cls.is-open .sr-cls-go, .sr-cls-close:hover, .sr-close:hover { transform: none; } } /* ── Buchen: mehrere Fahrer, eine Bestellung ──────────────────────────── Zweispalter wie im Entwurf: links, WER faehrt, rechts die Angaben des Ausgewaehlten. Getrennt, weil beides verschieden lang ist — die Liste waechst mit den Fahrern, die Angaben bleiben gleich hoch. Untereinander waere jeder zweite Fahrer unter dem Falz. */ /* ── Der Warenkorb im Hauptbereich ────────────────────────────────────── Nach der Vorlage: links die Termine mit Kachel, Zahlen und Teilnehmern, rechts die Buchung mit der Summe. Weder Umschalter noch Terminschiene noch Tabellenstand stehen hier — wer bezahlen will, soll bezahlen. */ /* Was schiefging — über dem Korb, wo man es beim Zurückkommen zuerst sieht. */ .sr-kurv-meldung { margin: 0 0 .9rem; padding: .7rem .9rem; border-radius: 12px; font: 400 .84rem/1.45 var(--font-body); background: rgba(218, 31, 37, .08); border: 1px solid rgba(218, 31, 37, .4); color: var(--sr-red); } .sr-kurv-meldung a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .sr-kurv-meldung.is-ok { background: rgba(47, 138, 76, .1); border-color: rgba(47, 138, 76, .35); color: var(--sr-ink); } /* Seit 07.11.2026 (#869): der Warenkorb über die ganze Breite; darunter links die Daten des Bestellers (direkt unter den Positionen), rechts Summe, Zahlungsart und Abschluss. Die frühere rechte Übersicht „Din booking“ ist entfallen. */ .sr-kurv-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 1.1rem; align-items: start; } .sr-kurv-wrap > .sr-kurv, .sr-kurv-wrap > .sr-kurv-leiste { grid-column: 1 / -1; } .sr-kurv-wrap > .sr-kurv-kasse { grid-column: 1; display: grid; gap: 1.1rem; } .sr-kurv-wrap > .sr-kurv-rechts { grid-column: 2; display: grid; gap: 1.1rem; } .sr-kurv-abschluss .sr-kurv-abschluss-summe { margin: 0 0 1rem; padding: 0 0 .9rem; border-bottom: 1px solid var(--sr-line); } .sr-kurv-abschluss .sr-kurv-abschluss-summe b { font: 900 1.6rem/1 var(--font-body); letter-spacing: -.02em; } .sr-kurv-abschluss button.sr-kurv-pay { width: 100%; border: 0; cursor: pointer; font-family: var(--font-body); margin-top: .4rem; } /* Die mitlaufende Leiste: klebt am unteren Rand, solange der Abschlussblock nicht zu sehen ist. Als letztes Element der Seite — position: sticky bleibt in der Rollfläche (#sl-scroll) wirksam, fixed täte das dort nicht. */ .sr-kurv-leiste { position: sticky; bottom: .8rem; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .7rem .65rem 1.1rem; border-radius: 14px; background: #0b0d10; color: #fff; box-shadow: 0 12px 30px -10px rgba(11, 13, 16, .45); transition: opacity .2s ease, transform .2s ease; } .sr-kurv-leiste.is-weg { opacity: 0; transform: translateY(8px); pointer-events: none; } .sr-kurv-leiste p { display: flex; align-items: baseline; gap: .7rem; margin: 0; } .sr-kurv-leiste span { font: 800 .7rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); } .sr-kurv-leiste b { font: 900 1.25rem/1 var(--font-body); white-space: nowrap; } .sr-kurv-leiste-knopf { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.1rem; border-radius: 999px; background: var(--sr-red); color: #fff; font: 800 .78rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .sr-kurv-leiste-knopf svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* Am Telefon über dem festen Streifen am unteren Rand (#855). */ @media (max-width: 900px) { .sr-kurv-leiste { bottom: calc(var(--unten-streifen, 1.25rem) + .5rem); } } /* Schmal: ohne das Wort „Total“, kleinerer Betrag und Knopf — sonst stieß die Leiste rechts über den Rand. */ @media (max-width: 560px) { .sr-kurv-leiste { min-width: 0; gap: .6rem; padding: .55rem .55rem .55rem .9rem; } .sr-kurv-leiste span { display: none; } .sr-kurv-leiste b { font-size: 1.05rem; } .sr-kurv-leiste-knopf { padding: .65rem .85rem; font-size: .72rem; } } .sr-kurv-kasse .sr-kasse-haupt { display: grid; gap: 1.1rem; } .sr-kurv-clear { margin-left: auto; } /* Das Kreuz steht GANZ aussen: „Leeren" schiebt sich mit seinem auto-Rand nach rechts, das Kreuz gehoert aber in die Ecke. Ohne diesen kleinen Abstand kleben die beiden aneinander, und man trifft im Zweifel das Falsche — eines raeumt den Korb, das andere nicht. */ .sr-kurv-close { margin-left: .9rem; } .sr-kurv-clear button { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; padding: .3rem .1rem; border: 0; background: none; color: var(--sr-red); font: 800 .66rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; } .sr-kurv-clear svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ── Ein Termin im Korb ── */ .sr-kurv-ev { position: relative; border: 1px solid var(--sr-line); border-radius: 14px; overflow: hidden; } /* Die Positionsnummer (29.09.2026): dasselbe Eckstueck wie .sr-close, gespiegelt nach oben links — Grund, Rand und Rundung wie dort, die Rundung der Karte (14px) aussen. */ /* Kleiner und mit roter Ziffer (zweite Ansage desselben Abends). */ .sr-kurv-pos { position: absolute; top: 0; left: 0; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 14px 0 12px 0; border-right: 1px solid var(--sr-line); border-bottom: 1px solid var(--sr-line); background: var(--sr-ground); color: var(--sr-red); font: 900 .8rem/1 var(--font-body); } /* In der Summe dieselbe Ecke an jedem Unterpanel, eine Spur kleiner. */ .sr-kurv-pos.is-klein { width: 24px; height: 24px; border-radius: 10px 0 9px 0; font-size: .7rem; } .sr-kurv-ev + .sr-kurv-ev { margin-top: .9rem; } .sr-kurv-ev-top { display: grid; grid-template-columns: 190px 1fr auto; gap: 1.1rem; padding: .9rem; align-items: start; } .sr-kurv-ev-shot { display: block; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--sr-ground); overflow: hidden; } .sr-kurv-ev-shot img { width: 100%; height: 100%; object-fit: contain; } .sr-kurv-ev-shot.is-photo img { object-fit: cover; } .sr-kurv-ev-body { min-width: 0; } .sr-kurv-ev-when { display: flex; flex-wrap: wrap; gap: .1rem .9rem; margin: 0; font: 400 .72rem/1.3 var(--font-body); color: var(--sr-ink-2); } /* Das Datum ist die Angabe, wegen der jemand in diese Zeile sieht — es traegt deshalb das Gewicht, waehrend Strecke und Ort danebenstehen bleiben. */ .sr-kurv-ev-date { font-weight: 800; color: var(--sr-ink); letter-spacing: .01em; } .sr-kurv-ev-body h3 { margin: .25rem 0 0; font: 900 1.6rem/1 var(--font-body); text-transform: uppercase; letter-spacing: -.02em; } /* Lange Streckennamen (JYLLANDSRINGEN) liefen in den Preis daneben: kleiner, wenn der Platz fehlt, und notfalls umbrechen statt ueberlappen (29.09.2026). */ .sr-kurv-ev-body h3 { font-size: clamp(1.05rem, 2.3vw, 1.6rem); overflow-wrap: anywhere; } .sr-kurv-ev-kind { margin: .1rem 0 0; font: 600 .82rem/1.2 var(--font-body); color: var(--sr-ink-2); } /* Die gebuchten Tage als Kalenderblaetter (29.09.2026) — an der Stelle der Streckenzahlen. */ .sr-kurv-blaetter { display: flex; flex-wrap: wrap; gap: .55rem; margin: .8rem 0 0; } .sr-kurv-blatt { display: grid; justify-items: center; gap: .25rem; } .sr-kurv-blatt .sr-ev-date { width: 40px; } /* Name und Adresse in der Bearbeiten-Zeile (29.09.2026) — wie die Namensfelder beim Hinzufuegen. */ .sr-kurv-name { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } .sr-kurv-name input, .sr-kurv-mail input { width: 100%; padding: .55rem .6rem; border-radius: 10px; border: 1px solid var(--sr-line); background: var(--sr-paper); color: var(--sr-ink); font: inherit; font-size: .82rem; } .sr-kurv-mail { margin: .7rem 0 .2rem; } .sr-kurv-mail small { display: block; margin-top: .3rem; font-size: .74rem; line-height: 1.4; color: var(--sr-ink-3); } /* Die Angaben des aktiven Fahrers (18.10.2026): eine Karte wie die Bestellangaben (.sr-kasse) unter den Plaketten, die oben die Navigation sind. Der aktive Fahrer traegt an seiner Plakette den roten Rand. */ .sr-kurv-chip.is-aktiv { border-color: var(--sr-red); box-shadow: 0 0 0 1px var(--sr-red); } .sr-kurv-angaben { margin: .9rem 0 0; } .sr-kurv-angaben-fahrer { margin: 0; } /* Mit dem Behaelter davor: .sr-kasse-legende:first-of-type (Bestellangaben) nimmt der ersten Zwischenueberschrift den Abstand — hier ist das „Nødkontakt", und das klebte an der Startnummern-Tafel. */ .sr-kurv-angaben .sr-kurv-angaben-fahrer > .sr-kasse-legende { margin-top: 1.3rem; } .sr-kurv-angaben .sr-kurv-race-spalte > .sr-kasse-legende { margin-top: 0; } /* Leihtransponder gewaehlt → eigene Nummer gesperrt (#548): sichtbar ausgegraut, nicht nur unklickbar. */ /* Leihtransponder gewaehlt (#548): der Satz steht im Feld, ausgegraut. Klein genug, dass er in allen vier Sprachen in EINER Zeile steht und das Feld so hoch bleibt wie die anderen (Ansage Sven 19.10.2026: „der text ist in deutsch zu lang und das feld bricht um"). Wird die Spalte doch zu schmal, bricht er innerhalb derselben Hoehe um. `.sl-input` mit im Waehler: `.sr-kasse .sl-input` steht weiter unten und setzte die Schrift sonst zurueck. */ .sr-kurv-angaben .sl-input.sr-kurv-geliehen { display: flex; align-items: center; margin: 0; box-sizing: border-box; /* So hoch wie ein Feld daneben (Zeile .82rem x 1.35 seit 19.10.2026, Innenabstand .6rem, Rand 1px). */ height: calc(.82rem * 1.35 + 1.2rem + 2px); padding: .2rem .5rem; overflow: hidden; opacity: .6; cursor: not-allowed; white-space: normal; font-size: .66rem; line-height: 1.2; } /* Auf Touch-Geraeten haben Felder 16px Schrift (kein Hineinzoomen) und sind entsprechend hoeher. */ @media (pointer: coarse) { .sr-kurv-angaben .sl-input.sr-kurv-geliehen { height: calc(16px * 1.35 + 1.2rem + 2px); } } /* Pflichtfelder (19.10.2026): Sternchen wie in den Bestellangaben, rote Umrandung um die Nummerntafel. */ .sr-kurv-angaben .sr-kurv-pflicht { font-style: normal; color: var(--sr-red); } .sr-kurv-angaben .sr-kurv-nummer-tafel.is-invalid { outline: 2px solid var(--sr-red); outline-offset: 3px; border-radius: 10px; } .sr-kurv-angaben .sl-input.is-invalid { border-color: var(--sr-red); } .sr-kurv-angaben .sr-kurv-pflicht-meldung { margin: 0 0 .9rem; } /* E-Mail des Fahrers (19.10.2026) zwischen Rennangaben und Notfallkontakt. */ .sr-kurv-angaben .sr-kurv-mail { margin-top: 0; } .sr-kurv-angaben .sr-kurv-mail-hint { display: block; margin-top: .3rem; font-size: .72rem; color: var(--sr-ink-2); } /* Beim Springen zum Fahrer mit fehlenden Angaben nicht unter der festen Kopfleiste landen. */ .sr-kurv-angaben-fahrer { scroll-margin-top: 9rem; } .sr-kurv-angaben .sr-kurv-pflicht-meldung[hidden] { display: none; } /* Reihenfolge seit 20.10.2026 (Ansage Sven): die E-Mail steht jetzt oben, ohne Abstand ueber sich. */ .sr-kurv-angaben .sr-kurv-angaben-fahrer > .sr-kurv-mail-kopf { margin-top: 0; } /* Startnummer · Marke · Modell in einer Zeile (Ansage Sven 20.10.2026: „startnummer des fahrer vor Motorrad, also 3 spaltig"): links die Nummerntafel, rechts das Motorrad mit seinen zwei Feldern. */ .sr-kurv-bike { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem 1.2rem; align-items: start; margin-top: 1.3rem; } .sr-kurv-angaben .sr-kurv-bike .sr-kasse-legende { margin-top: 0; } .sr-kurv-bike-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } /* Eigene Transpondernummer und DMU am Ende der Karte nebeneinander; ohne DMU-Klasse nur die Nummer. */ .sr-kurv-race { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem 1.2rem; align-items: start; } .sr-kurv-race-ende { margin-top: 1.3rem; } .sr-kurv-race-mit-dmu { grid-template-columns: minmax(0, .7fr) minmax(0, 1.6fr); } .sr-kurv-race-ende:not(.sr-kurv-race-mit-dmu) { max-width: 22rem; } .sr-kurv-nummer-tafel .sr-plate { margin: 0; } /* Haken wie in den Bestellangaben: Kaestchen links, Text daneben, nichts in Versalien. */ .sr-kurv-haken { display: flex; align-items: flex-start; gap: .5rem; font: 400 .8rem/1.4 var(--font-body); color: var(--sr-ink-2); cursor: pointer; } .sr-kurv-haken input { flex: none; margin: .15rem 0 0; } .sr-kurv-haken a { margin-left: .25rem; color: var(--sr-ink-3); text-decoration: none; } .sr-kurv-alle { margin: .6rem 0 0; } /* Rahmen um Notfallkontakt-Felder und den Haken "gilt fuer alle" (Befund Sven 05.11.2026): beide sichtbar zusammengehoerig, statt der Haken als lose Zeile danach. */ .sr-kurv-notfall-rahmen { padding: .85rem .9rem; border: 1px solid var(--sr-line); border-radius: 9px; background: var(--sr-paper-2, #f6f5f3); } .sr-kurv-notfall-rahmen .sr-kurv-alle { padding-top: .6rem; border-top: 1px solid var(--sr-line); } /* Das Lizenzfeld oeffnet NEBEN der Frage, nicht darunter (Ansage Sven 20.10.2026: „das lizenzfenster soll neben der frage aufgehen, nicht darunter"). Reicht die Breite nicht, rutscht es darunter. */ .sr-kurv-dmu { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; } .sr-kurv-dmu .sr-kurv-haken { flex: 0 1 auto; } .sr-kurv-dmu .sl-field { margin-top: 0; flex: 1 1 6.5rem; min-width: 0; } .sr-kurv-dmu .sr-kurv-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sr-kurv-dmu .sl-field[hidden] { display: none; } .sr-kurv-angaben-hinweis { margin: 1rem 0 0; font-size: .74rem; line-height: 1.4; color: var(--sr-ink-3); } @media (max-width: 760px) { .sr-kurv-race, .sr-kurv-race-mit-dmu, .sr-kurv-bike, .sr-kurv-bike-felder { grid-template-columns: 1fr; } .sr-kurv-angaben .sr-kurv-bike-mc > .sr-kasse-legende { margin-top: 1.1rem; } .sr-kurv-angaben .sr-kurv-race-spalte + .sr-kurv-race-spalte > .sr-kasse-legende { margin-top: 1.1rem; } } /* Die Positionen der Bestellbestaetigung im Aufbau des Warenkorbs (29.09.2026). */ .sr-bestaetigung .sr-bestaetigung-ev { margin-top: .9rem; } .sr-bestaetigung-ev .sr-kurv-chip-open { display: block; padding: .2rem .1rem; font: 800 .8rem/1.25 var(--font-body); color: var(--sr-ink); } .sr-bestaetigung-ev .sr-kurv-chip-open em { display: block; font: 400 .7rem/1.3 var(--font-body); font-style: normal; color: var(--sr-ink-3); } /* Auf der Bestaetigung darf der Text umbrechen — sie ist das Blatt, das der Kunde behaelt. */ .sr-bestaetigung-ev .sr-kurv-chip > span { white-space: normal; overflow: visible; } .sr-bestaetigung-ev .sr-kurv-chip-open:hover { color: var(--sr-ink); } /* Zusaetze als schlichte Liste: was · fuer wen · Hinweis, rechts der Preis. */ .sr-bestaetigung-zusatz-kopf { margin-top: .9rem; } .sr-bestaetigung-zusatz { list-style: none; margin: 0; padding: 0 .1rem; display: grid; gap: .35rem; } .sr-bestaetigung-zusatz li { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; font: 400 .8rem/1.35 var(--font-body); color: var(--sr-ink-2); } .sr-bestaetigung-zusatz b { font-weight: 700; color: var(--sr-ink); } .sr-bestaetigung-zusatz-preis { flex: none; font: 700 .8rem/1.35 var(--font-body); font-style: normal; color: var(--sr-ink); white-space: nowrap; } .sr-bestaetigung-absage { display: flex; justify-content: flex-end; margin-top: .5rem; } .sr-kurv-blatt em { font: 700 .6rem/1 var(--font-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--sr-ink-3); } .sr-kurv-ev-price { text-align: right; display: flex; align-items: center; gap: .7rem; } .sr-kurv-ev-price b { font: 900 1.05rem/1 var(--font-body); white-space: nowrap; } .sr-kurv-ev-price button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; cursor: pointer; border: 1px solid var(--sr-line); border-radius: 50%; background: var(--sr-ground); color: var(--sr-ink); transition: background .15s ease, border-color .15s ease, color .15s ease; } .sr-kurv-ev-price button:hover { background: var(--sr-red); border-color: var(--sr-red); color: #fff; } .sr-kurv-ev-price svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } /* ── Die Teilnehmer als Plaketten ── */ .sr-kurv-ev-riders { border-top: 1px solid var(--sr-line); background: var(--sr-ground); padding: .8rem .9rem .9rem; } .sr-kurv-riders-head { display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; font: 800 .7rem/1 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--sr-ink-2); } .sr-kurv-riders-ico svg { width: 15px; height: 15px; fill: currentColor; display: block; } .sr-kurv-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; } /* Die Garagenzeile eines Termins (Backlog #138) — wie eine Plakette, ueber die volle Breite. */ .sr-kurv-garage { display: flex; align-items: center; gap: .55rem; margin-top: .6rem; padding: .5rem .6rem; border: 1px solid var(--sr-line); border-radius: 10px; background: var(--sr-paper); font: 400 .76rem/1.3 var(--font-body); } .sr-kurv-garage > span:nth-child(2) { flex: 1 1 auto; min-width: 0; } .sr-kurv-garage .sr-kurv-riders-ico svg { fill: none; stroke: currentColor; stroke-width: 2; } .sr-kurv-garage em { font-style: normal; font-weight: 800; white-space: nowrap; } .sr-kurv-garage form { margin: 0; } .sr-kurv-garage button { border: 0; background: none; cursor: pointer; color: var(--sr-ink-2); padding: .2rem; } .sr-kurv-garage button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } .sr-kurv-chip { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .5rem .6rem; border: 1px solid var(--sr-line); border-radius: 10px; background: var(--sr-paper); } .sr-kurv-chip > b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sr-red); color: #fff; font: 800 .7rem/1 var(--font-body); } /* Der Name ist ein KNOPF (er klappt die Zeile auf) und muss trotzdem wie Text aussehen: ohne diese Regel erbt er das Kasten-Aussehen eines Eingabefelds, und die Plakettenreihe liest sich wie eine Reihe leerer Formularfelder. */ .sr-kurv-chip-open { min-width: 0; flex: 1 1 auto; cursor: pointer; text-align: left; padding: 0; border: 0; background: none; color: inherit; font: 700 .76rem/1.2 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-kurv-chip-open:hover { color: var(--sr-red); } .sr-kurv-chip-open em { display: block; font: 400 .68rem/1.3 var(--font-body); font-style: normal; color: var(--sr-ink-2); } /* Die gewählten Angaben brechen um statt nach „#42 …“ abgeschnitten zu werden (#856, Ansage Sven 07.11.2026: „die in der buchung ausgewählten attribute müssen an den fahrern auch im warenkorb zu sehen sein“). Der Name bleibt einzeilig. */ .sr-kurv-chip-open em { white-space: normal; } .sr-kurv-chip > span { min-width: 0; font: 700 .76rem/1.2 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-kurv-chip em { display: block; font: 400 .68rem/1.3 var(--font-body); font-style: normal; color: var(--sr-ink-2); } .sr-kurv-chip form { margin-left: auto; } .sr-kurv-chip form button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; cursor: pointer; border: 1px solid var(--sr-line); border-radius: 50%; background: var(--sr-ground); color: var(--sr-ink-2); } .sr-kurv-chip form button:hover { background: var(--sr-red); border-color: var(--sr-red); color: #fff; } .sr-kurv-chip form svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } /* Die Leerstelle: gestrichelt, damit sie als Angebot und nicht als Fehler gelesen wird. */ .sr-kurv-chip.is-add { justify-content: center; text-decoration: none; background: none; border: 1px dashed var(--sr-line-2); color: var(--sr-ink-2); font: 700 .72rem/1 var(--font-body); } .sr-kurv-chip.is-add:hover { border-color: var(--sr-red); color: var(--sr-red); } /* Einen Fahrer im Warenkorb ergaenzen — das Formular klappt unter den Plaketten auf. */ .sr-kurv-addform { margin-top: .8rem; padding: .9rem; border: 1px solid var(--sr-line-2); border-radius: 12px; background: var(--sr-paper); /* Beim Auf- und Zuklappen setzt das Skript kurz eine feste Hoehe. Ohne dieses overflow quillt der Inhalt waehrend der Bewegung aus dem Kasten. */ overflow: hidden; } .sr-kurv-addlabel { margin: .9rem 0 .45rem; font: 800 .66rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--sr-ink-2); } .sr-kurv-addlabel i { color: var(--sr-red); font-style: normal; } .sr-kurv-adddays { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .45rem; } .sr-kurv-adddays label { display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .5rem .6rem; border: 1px solid var(--sr-line); border-radius: 9px; font: 700 .72rem/1.2 var(--font-body); text-transform: uppercase; } /* Der gewaehlte Zustand steht gesammelt weiter unten (.sr-bk-day:has(input:checked) …) — hier stuende sonst eine zweite, schwaechere Fassung derselben Regel. */ .sr-kurv-addgo { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; } .sr-kurv-addgo button[type="submit"] { margin-left: auto; cursor: pointer; padding: .65rem 1.1rem; border: 0; border-radius: 999px; background: var(--sr-red); color: #fff; font: 800 .72rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; } .sr-kurv-addgo button[type="submit"]:hover { background: var(--sr-red-2); } .sr-kurv-addcancel { cursor: pointer; padding: .65rem .9rem; border: 1px solid var(--sr-line-2); border-radius: 999px; background: none; color: var(--sr-ink-2); font: 700 .72rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; } .sr-kurv-addcancel:hover { border-color: var(--sr-ink-3); color: var(--sr-ink); } /* ── Rechts: die Buchung ── */ .sr-kurv-booking { align-self: start; } /* Luft unter „Deine Buchung" (29.09.2026) — die erste Zeile klebte an der Ueberschrift. */ /* Beide Kopfzeilen gleich hoch und mit gleichem Abstand (29.09.2026), damit die erste Position links und die erste rechts auf derselben Hoehe beginnen. */ .sr-kurv > .sr-head, .sr-kurv-booking > .sr-head { min-height: 28px; margin-bottom: 1.1rem; align-items: center; } /* Jede Position ein eigenes Unterpanel (29.09.2026) — Termin, Tage, Teilnehmer, unten der Preis. Links Platz fuer die Positionsecke. */ .sr-kurv-bk-ev { position: relative; margin-bottom: .7rem; padding: .7rem .8rem .65rem 2.1rem; border: 1px solid var(--sr-line); border-radius: 10px; background: var(--sr-paper); } /* Im Panel „Daten des Bestellers" (bis 07.11.2026 „Bestellangaben", 29.09.2026): Anmelden oben, „Konto anlegen" als Haken unten. */ .sr-kasse-anmelden { margin: 0 0 .9rem; font: 400 .82rem/1.4 var(--font-body); color: var(--sr-ink-2); } .sr-kasse-anmelden a { font-weight: 800; color: var(--sr-red); } .sr-kasse-konto-haken { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem; padding: .8rem .9rem; border: 1px solid var(--sr-line); border-radius: 10px; background: var(--sr-ground); cursor: pointer; } .sr-kasse-konto-haken input { margin-top: .15rem; width: 18px; height: 18px; accent-color: var(--sr-red); flex: none; } .sr-kasse-konto-haken span { font: 400 .78rem/1.45 var(--font-body); color: var(--sr-ink-2); } .sr-kasse-konto-haken b { display: block; margin-bottom: .15rem; font-weight: 800; color: var(--sr-ink); font-size: .84rem; } /* Zahlungs-Panel im Warenkorb (19.10.2026): nur Ueberweisung — derselbe Kasten wie „Konto für mich anlegen", statt Haken das Bank-Zeichen, darunter der Hinweis in der Schrift der Kasse. */ .sr-kasse-bank-info { margin-top: 0; cursor: default; } .sr-kasse-bank-ico { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: .1rem; color: var(--sr-ink); } .sr-kasse-bank-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sr-kasse-bank-hinweis { margin: .7rem 0 0; font: 400 .78rem/1.45 var(--font-body); color: var(--sr-ink-2); } .sr-kurv-bk-preis { margin: .55rem 0 0; padding-top: .5rem; border-top: 1px solid var(--sr-line); text-align: right; } /* Aufschlüsselung je Event (Empfehlung Sven 31.10.2026): Fahrer · Tage fett, darunter eingerückt, was dazukommt. */ .sr-kurv-bk-posten { display: grid; gap: .25rem; margin: .6rem 0 0; padding: 0; list-style: none; } .sr-kurv-bk-posten li { display: flex; align-items: baseline; gap: .8rem; font: 400 .8125rem/1.35 var(--font-body); color: var(--sr-ink-2); } .sr-kurv-bk-posten li span { flex: 1 1 auto; min-width: 0; padding-left: .8rem; } .sr-kurv-bk-posten li b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sr-ink); white-space: nowrap; } .sr-kurv-bk-posten li.is-fahrer { color: var(--sr-ink); font-weight: 700; } .sr-kurv-bk-posten li.is-fahrer span { padding-left: 0; } .sr-kurv-bk-posten li.is-fahrer:not(:first-child) { margin-top: .3rem; } .sr-kurv-bk-posten li.is-rabatt b { color: #16a34a; } .sr-kurv-bk-preis b { font: 800 .9rem/1 var(--font-body); white-space: nowrap; } .sr-kurv-bk-name { display: flex; justify-content: space-between; gap: .8rem; margin: 0; align-items: baseline; } .sr-kurv-bk-name b { font: 800 .86rem/1.2 var(--font-body); } .sr-kurv-bk-name span { font: 800 .82rem/1.2 var(--font-body); white-space: nowrap; } .sr-kurv-bk-kind { margin: .1rem 0 0; font: 400 .72rem/1.35 var(--font-body); color: var(--sr-ink-2); } /* Dasselbe in der Zusammenfassung: wer hier die Summe prueft, prueft auch den Tag. */ .sr-kurv-bk-when { margin: .1rem 0 0; font: 800 .74rem/1.35 var(--font-body); color: var(--sr-ink); } .sr-kurv-bk-riders { display: flex; justify-content: space-between; gap: .8rem; margin: .35rem 0 0; font: 400 .72rem/1.3 var(--font-body); color: var(--sr-ink-2); } .sr-kurv-bk-sub { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; margin: 0 0 .7rem; padding-bottom: .7rem; border-bottom: 1px solid var(--sr-line); } .sr-kurv-bk-sub span { font: 800 .74rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; } .sr-kurv-bk-sub b { font: 800 .9rem/1 var(--font-body); } .sr-kurv-bk-sub[hidden], .sr-kurv-abzug[hidden] { display: none; } /* Rabatt-Produkt (#600): Zeile mit Name, Code/Wert, Betrag in Grün (gespartes Geld, keine Warnung) und Kreuz. Gilt er nicht, grau mit Grund — nicht rot: das ist kein Fehler des Kunden, nur ein Rabatt, der hier nicht greift. */ .sr-kurv-rabatt { display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 .7rem; font: 400 .8rem/1.35 var(--font-body); color: var(--sr-ink-2); } .sr-kurv-rabatt > span { flex: 1; min-width: 0; } .sr-kurv-rabatt small { display: block; font-size: .72rem; color: var(--sr-ink-3, var(--sr-ink-2)); } .sr-kurv-rabatt > b { font-weight: 700; color: #16a34a; white-space: nowrap; } .sr-kurv-rabatt.is-ungueltig > span { opacity: .75; } .sr-kurv-rabatt-weg { margin: 0; } .sr-kurv-rabatt-weg button { border: 0; background: none; padding: 0 .1rem; font-size: 1.1rem; line-height: 1; color: var(--sr-ink-2); cursor: pointer; } .sr-kurv-rabatt-weg button:hover { color: var(--sr-ink); } .sr-kurv-rabatt-grund { margin: .2rem 0 0; font-size: .74rem; color: #b45309; } .sr-kurv-fr { color: #15803d; font-style: normal; } .sr-kurv-fr.is-ungueltig { color: #b45309; } .sr-kurv-rabattcode { margin: 0 0 .7rem; font: 400 .78rem/1.35 var(--font-body); } .sr-kurv-rabattcode summary { cursor: pointer; color: var(--sr-ink-2); text-decoration: underline; list-style: none; } .sr-kurv-rabattcode summary::-webkit-details-marker { display: none; } .sr-kurv-rabattcode form { display: flex; gap: .4rem; margin-top: .45rem; } .sr-kurv-rabattcode input { flex: 1; min-width: 0; padding: .45rem .6rem; border: 1px solid var(--sr-line); border-radius: 6px; font: inherit; text-transform: uppercase; } .sr-kurv-rabattcode .sl-btn { padding: .45rem .8rem; font-size: .78rem; } /* Der Waehrungsumschalter in der Summe (29.09.2026). */ .cpm-waehrung { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 0 0 .8rem; } .cpm-waehrung-lbl { font: 800 .74rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; } .cpm-waehrung-wahl { display: inline-flex; border: 1px solid var(--sr-line); border-radius: 999px; overflow: hidden; } .cpm-waehrung-wahl label { cursor: pointer; position: relative; } .cpm-waehrung-wahl input { position: absolute; opacity: 0; pointer-events: none; } .cpm-waehrung-wahl span { display: block; padding: .4rem .9rem; font: 700 .76rem/1 var(--font-body); letter-spacing: .06em; } .cpm-waehrung-wahl input:checked + span { background: var(--sr-red); color: #fff; } .cpm-waehrung-wahl input:focus-visible + span { outline: 2px solid currentColor; outline-offset: -3px; } /* Der Euro-Betrag bei „Zahlen in EUR" (29.09.2026). */ .sr-kurv-eur { margin: .6rem 0 0; padding: .6rem .7rem; border-radius: 10px; background: var(--sr-ground); } .sr-kurv-eur[hidden] { display: none; } .sr-kurv-eur p { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; margin: 0; } .sr-kurv-eur span { font: 800 .74rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; } .sr-kurv-eur b { font: 900 1.1rem/1 var(--font-body); } .sr-kurv-eur small { display: block; margin-top: .3rem; font: 400 .7rem/1.35 var(--font-body); color: var(--sr-ink-3); } .sr-kurv-total { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin: 0; } .sr-kurv-total span { font: 800 .8rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; } .sr-kurv-total b { font: 900 1.5rem/1 var(--font-body); letter-spacing: -.02em; } /* Im Warenkorb hebt sich der Gesamtpreis deutlich von den Zwischensummen ab (Ansage Sven 07.11.2026: „der gesamtpreis muss sich mehr von den zwischensummen abheben"): größer, mit kräftiger Linie darüber; die Zwischensummen je Buchung (rechts und im Kopf links) treten zurück. Kein Rot — Rot steht für Fehler. Kasse und Bestätigung bleiben unverändert. */ .sr-kurv-booking .sr-kurv-total { margin-top: .9rem; padding-top: .9rem; border-top: 2px solid var(--sr-ink); } .sr-kurv-booking .sr-kurv-total span { font-size: .9rem; color: var(--sr-ink); } .sr-kurv-booking .sr-kurv-total b { font-size: 2.1rem; letter-spacing: -.03em; } /* Zwischensummen fett und schwarz (Ansage Sven 07.11.2026) — abgesetzt bleibt der Gesamtpreis über Größe und Linie. */ .sr-kurv-booking .sr-kurv-bk-preis b, .sr-kurv-booking .sr-kurv-bk-sub b { font-weight: 900; color: var(--sr-ink); } .sr-kurv-vat { margin: .15rem 0 1rem; text-align: right; font: 400 .66rem/1 var(--font-body); color: var(--sr-ink-3); } .sr-kurv-pay { display: flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; padding: .95rem 1.2rem; border-radius: 999px; background: var(--sr-red); color: #fff; font: 800 .8rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; transition: background .15s ease; } .sr-kurv-pay:hover { background: var(--sr-red-2); } .sr-kurv-pay svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* ── Die Kasse ────────────────────────────────────────────────────────── Nach der Vorlage vom 21.09.2026: links vier Karten, rechts die mitlaufende Bestellung. Sie teilt sich mit dem Warenkorb die Bausteine der rechten Spalte (.sr-kurv-total, .sr-kurv-pay) — eine zweite Fassung liefe beim nächsten Feilen auseinander. */ .sr-kasse-wrap { display: grid; grid-template-columns: 1fr minmax(280px, 360px); gap: 1.1rem; align-items: start; } .sr-kasse-haupt { min-width: 0; display: grid; gap: 1.1rem; } /* Mitlaufend, damit Summe und Knopf beim Ausfüllen nicht aus dem Bild wandern. Der Abstand nach oben ist die feste Kopfleiste der Hülle plus etwas Luft. */ .sr-kasse-summe { position: sticky; top: 84px; align-self: start; } /* Jede Karte trägt eine Kopfzeile mit Zeichen — und rechts, wo es eine gibt, den Weg woandershin. */ .sr-kasse-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin: 0 0 .9rem; } .sr-kasse-karte-kopf h3 { display: flex; align-items: center; flex-wrap: wrap; row-gap: .15em; gap: .55rem; margin: 0; min-width: 0; font: 800 .82rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; } /* Ein langer Fahrername darf die Zeile sprengen (Befund Sven 05.11.2026: „schriften werden abgeschnitten in der mobilansicht"): er faellt um statt ueber den Kartenrand hinauszulaufen, und wird im Notfall selbst gebrochen. */ .sr-kasse-karte-kopf h3 > span { min-width: 0; overflow-wrap: break-word; } .sr-kasse-ico { display: inline-flex; flex: none; color: var(--sr-ink-2); } .sr-kasse-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sr-kasse-edit { display: inline-flex; align-items: center; gap: .35rem; flex: none; font: 700 .74rem/1 var(--font-body); color: var(--sr-red); text-decoration: none; } .sr-kasse-edit svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .sr-kasse-edit:hover { text-decoration: underline; text-underline-offset: 3px; } /* ── Karte 1: die Buchung ── */ .sr-kasse-ev { display: flex; gap: 1rem; align-items: flex-start; } .sr-kasse-ev + .sr-kasse-ev { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--sr-line); } .sr-kasse-ev-bild { flex: none; width: 152px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--sr-paper); display: block; } .sr-kasse-ev-bild img { width: 100%; height: 100%; object-fit: contain; } .sr-kasse-ev-bild.is-photo img { object-fit: cover; } .sr-kasse-ev-text { min-width: 0; } .sr-kasse-ev-text h4 { margin: 0; font: 900 1.15rem/1.1 var(--font-body); text-transform: uppercase; letter-spacing: -.01em; } .sr-kasse-ev-unter { margin: .15rem 0 0; font: 400 .82rem/1.3 var(--font-body); color: var(--sr-ink-2); } /* Die Merkmale mit Zeichen davor, zweispaltig wo Platz ist. */ .sr-kasse-fakten { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), auto)); gap: .3rem 1.2rem; } .sr-kasse-fakten li { display: flex; align-items: center; gap: .4rem; min-width: 0; font: 400 .8rem/1.35 var(--font-body); } .sr-kasse-fakten svg, .sr-kasse-fahrer svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--sr-ink-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sr-kasse-fahrer { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: .55rem 0 0; font: 400 .8rem/1.35 var(--font-body); } .sr-kasse-fahrer b { font-weight: 700; } .sr-kasse-fahrer > span + span::before, .sr-kasse-sum-fahrer > span::before { content: "·"; margin-right: .35rem; color: var(--sr-ink-3); } .sr-kasse-grp { display: inline-flex; align-items: center; gap: .3rem; } .sr-kasse-grp i { width: .55em; height: .55em; border-radius: 50%; flex: none; } /* ── Karte 2: die Crew-Punkte ── Vier Blöcke nebeneinander: was du hast, was vorgeschlagen ist, der Schalter, und was dabei herauskommt. */ .sr-kasse-crew-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: .8rem; align-items: stretch; } .sr-kasse-crew-feld-block { padding: .8rem .9rem; border: 1px solid var(--sr-line); border-radius: 12px; min-width: 0; } .sr-kasse-crew-lbl { margin: 0; font: 700 .7rem/1.2 var(--font-body); color: var(--sr-ink-2); } .sr-kasse-crew-zahl { margin: .2rem 0 0; font: 900 1.6rem/1 var(--font-body); letter-spacing: -.02em; } .sr-kasse-crew-unter { margin: .15rem 0 0; font: 400 .7rem/1.35 var(--font-body); color: var(--sr-ink-3); } .sr-kasse-crew-balken { display: block; height: 5px; margin: .5rem 0 .35rem; border-radius: 99px; background: var(--sr-line); overflow: hidden; } .sr-kasse-crew-balken i { display: block; height: 100%; background: var(--sr-red); } /* Der Vorbehalt bei Punkten aus DIESER Bestellung: sie hängen an einer Freigabe. */ .sr-kasse-crew-warn { margin: .4rem 0 0; font: 400 .7rem/1.4 var(--font-body); color: var(--sr-red); } /* Der Schalter: ein Kippschalter statt eines Hakens, wie in der Vorlage. Das Kästchen selbst bleibt im Markup — es ist das Feld, das abgeschickt wird — und wird nur unsichtbar. */ .sr-kasse-crew-toggle { display: flex; align-items: center; justify-content: space-between; gap: .6rem; cursor: pointer; } .sr-kasse-crew-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .sr-kasse-crew-toggle i { flex: none; width: 38px; height: 21px; border-radius: 99px; background: var(--sr-line-2); position: relative; transition: background .15s ease; } .sr-kasse-crew-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .15s ease; } .sr-kasse-crew-toggle input:checked + i { background: var(--sr-red); } .sr-kasse-crew-toggle input:checked + i::after { transform: translateX(17px); } .sr-kasse-crew-toggle input:focus-visible + i { outline: 2px solid var(--sr-red); outline-offset: 2px; } .sr-kasse-crew-eingabe { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; } /* Gewicht ausdrücklich: die allgemeine Feldregel weiter unten setzt width:100% und stünde bei gleicher Spezifität später in der Kaskade. */ .sr-kasse .sr-kasse-crew-eingabe .sl-input { flex: 1 1 4.5rem; min-width: 0; width: auto; text-align: right; } .sr-kasse-crew-eingabe em { font: 700 .74rem/1 var(--font-body); font-style: normal; color: var(--sr-ink-2); } .sr-kasse-crew-go { flex: none; padding: .45rem .7rem; border: 1px solid var(--sr-line-2); border-radius: 8px; background: var(--sr-paper); color: var(--sr-ink); cursor: pointer; font: 800 .68rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; transition: border-color .15s ease, color .15s ease; } .sr-kasse-crew-go:hover:not(:disabled) { border-color: var(--sr-red); color: var(--sr-red); } .sr-kasse-crew-go:disabled { opacity: .5; cursor: default; } /* Was dabei herauskommt — gruen, weil es das einzige Gute auf dieser Seite ist. */ .sr-kasse-crew-spar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: .8rem .9rem; border-radius: 12px; text-align: center; background: rgba(47, 138, 76, .1); border: 1px solid rgba(47, 138, 76, .3); } .sr-kasse-crew-spar svg { width: 20px; height: 20px; fill: none; stroke: #2f8a4c; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .sr-kasse-crew-spar b { font: 900 1.25rem/1 var(--font-body); color: #2f8a4c; letter-spacing: -.02em; } /* ── Karte 3: die Felder ── */ .sr-kasse-legende { margin: 1rem 0 .5rem; font: 800 .68rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--sr-ink-3); } .sr-kasse-legende:first-of-type { margin-top: 0; } .sr-kasse-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: .7rem; } .sr-kasse .sl-field { display: block; margin-bottom: .7rem; } .sr-kasse .sl-field .lbl { display: block; margin-bottom: .2rem; font: 700 .72rem/1.2 var(--font-body); color: var(--sr-ink-2); } .sr-kasse .sl-field .lbl em { font-style: normal; font-weight: 400; color: var(--sr-ink-3); } .sr-kasse .sl-input { width: 100%; padding: .6rem .7rem; border: 1px solid var(--sr-line-2); border-radius: 8px; background: #fff; color: var(--sr-ink); font: 400 .88rem/1.35 var(--font-body); } .sr-kasse .sl-input:focus { outline: 2px solid var(--sr-red); outline-offset: 1px; border-color: var(--sr-red); } .sr-kasse .sl-input.is-invalid { border-color: var(--sr-red); } .sr-kasse-feld-err { display: block; margin-top: .3rem; font: 600 .74rem/1.35 var(--font-body); color: var(--sr-red); } /* Pflichtfelder der Bestellangaben: roter Stern wie im Buchungsformular (Ansage Sven 19.10.2026). */ .sr-kasse .sl-field .lbl i { font-style: normal; color: var(--sr-red); } /* Meldungen. */ .sr-kasse-ok, .sr-kasse-err { margin: 0 0 .8rem; padding: .6rem .8rem; border-radius: 10px; font: 400 .8rem/1.45 var(--font-body); } .sr-kasse-ok { background: rgba(47, 138, 76, .1); border: 1px solid rgba(47, 138, 76, .35); } .sr-kasse-err { background: rgba(218, 31, 37, .08); border: 1px solid rgba(218, 31, 37, .4); color: var(--sr-red); } .sr-kasse-err a { color: inherit; font-weight: 700; } /* Das Konto: ein Streifen, kein Kasten. Es ist ein Angebot, keine Station des Kaufwegs. */ .sr-kasse-konto { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .8rem .95rem; border-radius: 12px; background: var(--sr-paper); } .sr-kasse-konto p { margin: 0; flex: 1 1 14rem; font: 400 .8rem/1.4 var(--font-body); color: var(--sr-ink-2); } .sr-kasse-konto-tun { display: flex; align-items: center; gap: .8rem; flex: none; } .sr-kasse-login { font: 700 .76rem/1 var(--font-body); color: var(--sr-ink-2); text-decoration: underline; text-underline-offset: 3px; } .sr-kasse-login:hover { color: var(--sr-red); } /* ── Rechts: Deine Bestellung ── */ .sr-kasse-sum-ev { display: flex; gap: .7rem; padding-bottom: .8rem; margin-bottom: .8rem; border-bottom: 1px solid var(--sr-line); } .sr-kasse-sum-bild { flex: none; width: 76px; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background: var(--sr-paper); } .sr-kasse-sum-bild img { width: 100%; height: 100%; object-fit: contain; } .sr-kasse-sum-bild.is-photo img { object-fit: cover; } .sr-kasse-sum-ev h4 { margin: 0; font: 900 .95rem/1.1 var(--font-body); text-transform: uppercase; letter-spacing: -.01em; } .sr-kasse-sum-ev p { margin: .1rem 0 0; font: 400 .72rem/1.35 var(--font-body); color: var(--sr-ink-2); } .sr-kasse-sum-fahrer { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; } .sr-kurv-zwischen, .sr-kurv-abzug { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin: 0 0 .35rem; font: 400 .8rem/1.35 var(--font-body); color: var(--sr-ink-2); } .sr-kurv-zwischen b { font-weight: 700; color: var(--sr-ink); } /* Der Abzug in Gruen (29.09.2026): es ist Geld, das der Kunde spart, keine Warnung. */ .sr-kurv-abzug b { font-weight: 700; color: #16a34a; } /* Die Geschäftsbedingungen, direkt über dem Knopf. */ .sr-kasse-agb { display: flex; gap: .6rem; align-items: flex-start; margin: .9rem 0 .8rem; font: 400 .76rem/1.45 var(--font-body); color: var(--sr-ink-2); cursor: pointer; } .sr-kasse-agb input { margin-top: .15rem; flex: none; } .sr-kasse-agb a { color: var(--sr-ink); text-decoration: underline; text-underline-offset: 3px; } .sr-kasse-agb + input + .sr-kasse-agb { margin-top: 0; } /* Das Bestaetigungsfenster im Warenkorb (29.09.2026). */ .sr-confirm { width: min(420px, calc(100vw - 2rem)); padding: 1.4rem 1.4rem 1.2rem; border: 0; border-radius: 14px; background: var(--sr-paper); color: var(--sr-ink); box-shadow: 0 24px 60px rgba(11, 13, 16, .35); } .sr-confirm::backdrop { background: rgba(11, 13, 16, .55); backdrop-filter: blur(3px); } .sr-confirm h3 { margin: 0 0 .5rem; font: 900 1.15rem/1.1 var(--font-body); text-transform: uppercase; letter-spacing: -.01em; } .sr-confirm p { margin: 0 0 1.2rem; font: 400 .9rem/1.45 var(--font-body); color: var(--sr-ink-2); } .sr-confirm-knoepfe { display: flex; justify-content: flex-end; gap: .6rem; } .sr-confirm button { cursor: pointer; padding: .7rem 1.1rem; border-radius: 999px; font: 700 .74rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; } .sr-confirm-nein { border: 1px solid var(--sr-line-2); background: none; color: var(--sr-ink-2); } .sr-confirm-nein:hover { border-color: var(--sr-ink-3); color: var(--sr-ink); } .sr-confirm-ja { border: 0; background: var(--sr-red); color: #fff; } .sr-confirm-ja:hover { background: var(--sr-red-2); } /* Das allgemeine Rückfragefenster (zrFrage aus aktionen.js, z. B. Newsletter, Löschen) im selben Kleid wie .sr-confirm (Ansage Sven 10.11.2026: „das popup ist nicht in unserem Design"). aktionen.js bringt eigene Grundregeln mit und hängt sie zur Laufzeit hinten an — darum hier mit body.design-serienleiste davor, damit diese Regeln gewinnen. */ body.design-serienleiste .zr-frage { width: min(420px, calc(100vw - 2rem)); border-radius: 14px; background: var(--sr-paper); color: var(--sr-ink); box-shadow: 0 24px 60px rgba(11, 13, 16, .35); font-family: var(--font-body); } body.design-serienleiste .zr-frage::backdrop { background: rgba(11, 13, 16, .55); backdrop-filter: blur(3px); } body.design-serienleiste .zr-frage .zr-frage-in { padding: 1.4rem 1.4rem 1.2rem; gap: .5rem; } body.design-serienleiste .zr-frage .zr-frage-zeichen { display: none; } body.design-serienleiste .zr-frage .zr-frage-titel { font: 900 1.15rem/1.1 var(--font-body); text-transform: uppercase; letter-spacing: -.01em; color: var(--sr-ink); } body.design-serienleiste .zr-frage .zr-frage-text { font: 400 .9rem/1.45 var(--font-body); color: var(--sr-ink-2); } body.design-serienleiste .zr-frage .zr-frage-knoepfe { margin-top: .7rem; gap: .6rem; } body.design-serienleiste .zr-frage .zr-frage-knoepfe button { padding: .7rem 1.1rem; border-radius: 999px; font: 700 .74rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--sr-line-2); background: none; color: var(--sr-ink-2); } body.design-serienleiste .zr-frage .zr-frage-knoepfe button:hover { border-color: var(--sr-ink-3); color: var(--sr-ink); } body.design-serienleiste .zr-frage .zr-frage-knoepfe [data-zr-ja], body.design-serienleiste .zr-frage.zr-frage--gefahr .zr-frage-knoepfe [data-zr-ja] { border: 0; background: var(--sr-red); color: #fff; } body.design-serienleiste .zr-frage .zr-frage-knoepfe [data-zr-ja]:hover { background: var(--sr-red-2); color: #fff; } body.design-serienleiste .zr-frage .zr-frage-knoepfe button:focus-visible { outline: 2px solid var(--sr-ink); outline-offset: 2px; } .sr-kasse-agb.is-invalid { color: var(--sr-red); } /* Ein Knopf und kein Verweis: hier wird abgeschickt. */ .sr-kasse-summe .sr-kurv-pay, .sr-kurv-booking button.sr-kurv-pay { width: 100%; border: 0; cursor: pointer; font-family: var(--font-body); } /* Die drei Zusicherungen. Jede davon ist wahr — die Stornoregel steht so in den Geschäftsbedingungen. */ .sr-kasse-zusicherung { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; } .sr-kasse-zusicherung li { display: flex; gap: .6rem; align-items: flex-start; } .sr-kasse-zusicherung svg { width: 18px; height: 18px; flex: none; margin-top: .1rem; fill: none; stroke: var(--sr-red); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .sr-kasse-zusicherung b { display: block; font: 800 .76rem/1.3 var(--font-body); } .sr-kasse-zusicherung span { font: 400 .72rem/1.45 var(--font-body); color: var(--sr-ink-2); } /* Die Zahlungswege bringen ihr eigenes Blatt mit (partials/checkout-payment-methods). */ .sr-kasse-zahlung .cpm-tiles { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); } /* Auf dem Telefon ist eine Kachel gut 210px breit, und „Banküberweisung" passt dort in einer Zeile nicht neben das Zeichen. Der Name darf deshalb schrumpfen und umbrechen — ohne min-width:0 tut er das in einem flex-Element nicht, egal wie eng es wird. */ .sr-kasse-zahlung .cpm-tile { min-width: 0; } .sr-kasse-zahlung .cpm-name { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 980px) { .sr-kasse-wrap { grid-template-columns: 1fr; } /* Auf dem Telefon steht die Bestellung UNTER dem Formular und läuft nicht mit: ein klebender Kasten nähme dort die halbe Bildhöhe. */ .sr-kasse-summe { position: static; } } @media (max-width: 560px) { .sr-kasse-ev { flex-direction: column; } .sr-kasse-ev-bild { width: 100%; } } /* ── Die Bestellbestätigung ───────────────────────────────────────────── Dieselben Karten wie an der Kasse, aber EINE Spalte: hier ist nichts mehr zu entscheiden. Was noch zu tun ist — bezahlen, Benachrichtigungen einschalten, ein Passwort setzen —, steht als eigene Karte darunter. */ .sr-bestaetigung { max-width: 62rem; } .sr-bestaetigung .sr-kasse-ev + .sr-kasse-ev { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--sr-line); } /* Der Preis steht am Ende der Fahrerzeile und rückt nach rechts — hier zählt, was es gekostet hat, und nicht mehr, was man noch wählen kann. */ .sr-bestaetigung .sr-kasse-fahrer em { margin-left: auto; font-style: normal; font-weight: 700; white-space: nowrap; } .sr-bestaetigung-summe { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--sr-line); } .sr-bestaetigung .sr-kurv-vat { text-align: right; margin: .15rem 0 0; } /* Der Zustand der Bestellung, mit seinem Zeichen davor. Die Farbe allein sagt es nicht — wer sie nicht unterscheiden kann, liest das Zeichen. */ .sr-bestaetigung-status { margin: .9rem 0 0; font: 800 .82rem/1.3 var(--font-body); } .sr-bestaetigung-status::before { margin-right: .4rem; } .sr-status-paid::before { content: "✓"; color: #2f8a4c; } .sr-status-pending::before, .sr-status-partially_paid::before { content: "⏳"; } .sr-status-overpaid::before { content: "⬆"; } .sr-status-refunded::before, .sr-status-partially_refunded::before { content: "↩"; color: var(--sr-ink-3); } .sr-status-cancelled::before { content: "✕"; color: var(--sr-red); } .sr-bestaetigung-offen { margin: 0 0 .8rem; font: 400 .84rem/1.45 var(--font-body); color: var(--sr-ink-2); } /* Der Konto-Streifen trägt hier drei Sätze statt einem. */ .sr-bestaetigung .sr-kasse-konto p b { display: block; font-size: .86rem; color: var(--sr-ink); } .sr-bestaetigung .sr-kasse-konto p i { display: block; margin-top: .25rem; font-style: normal; font-size: .74rem; color: var(--sr-ink-3); } /* ── Was das Konto dazugibt ────────────────────────────────────────────── Belege, Check-in, Crewpunkte und die Zahlwege. Dieselben Karten wie darueber, nur mit Inhalten, die ein Gast nicht hat. */ .sr-bestaetigung-absage { margin: -.2rem 0 .6rem auto; } /* Die Check-in-Zeile ist eine Fahrerzeile: Name, Termin, Code, Weg. Der Code in einer Schrift mit gleich breiten Ziffern und gesperrt — er wird vorgelesen und abgetippt. */ .sr-bestaetigung-checkin + .sr-bestaetigung-checkin { margin-top: .4rem; } .sr-bestaetigung-code { font: 700 .84rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; padding: .1rem .45rem; border: 1px solid var(--sr-line); border-radius: 6px; background: var(--sr-paper); } .sr-bestaetigung-fertig { color: #2f8a4c; } .sr-bestaetigung-zu { color: var(--sr-ink-dim, #555); font-style: normal; } /* #695: Check-in noch zu */ /* Produkte ohne Termin auf der Bestaetigung: Name, Variante, Menge (Backlog #022). */ .sr-bestaetigung-produkte { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .2rem; font-size: .9rem; color: var(--sr-ink-dim, #555); } .sr-bestaetigung-produkte b { color: var(--sr-ink, #111); margin-right: .4rem; } /* Check-in-Knopf: gefuellt, gruen, mit Haken — sichtbar anders als „Benachrichtigungen einschalten" (umrandet, Glocke), Konzept Event-Push 4.1, 03.10.2026. */ .sr-checkin-knopf { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .9rem; border-radius: 999px; background: #2f8a4c; color: #fff; font-weight: 700; font-size: .82rem; text-decoration: none; white-space: nowrap; } .sr-checkin-knopf:hover { background: #26733f; color: #fff; } /* Crewpunkte einsetzen: eine Zeile aus Feld und Knopf, damit „wieviel" und „los" zusammen stehen und nicht untereinander. */ /* Die Kacheln der Zahlwege kommen aus partials/payment-methods und richten sich nach --line/--bg-raised. Diese Tafel ist hell, also werden sie hier auf ihr Papier gestellt — ohne das griffen die Rueckfallwerte des Partials, und die stammen aus einer dunklen Huelle. */ /* ── Darunter: noch ein Termin ── */ .sr-kurv-next { margin-top: 1.1rem; } .sr-kurv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin-top: 1rem; } /* Bestätigung nach dem Buchen: vier Empfehlungen als 2×2 (Ansage Sven 31.10.2026), am Telefon untereinander. */ .sr-kurv-cards-2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 480px) { .sr-kurv-cards-2x2 { grid-template-columns: minmax(0, 1fr); } } .sr-kurv-card { display: flex; flex-direction: column; padding: .85rem; border: 1px solid var(--sr-line); border-radius: 14px; background: var(--sr-paper); } /* Kopf: Kalenderblatt wie in der Eventliste (Regeln oben bei .sr-ev .sr-ev-date), daneben Ort, Art, Zeitraum. */ .sr-kurv-card-top { display: grid; grid-template-columns: 52px 1fr; gap: .7rem; align-items: center; margin-bottom: .8rem; } .sr-kurv-card-top .sr-ev-date { align-self: stretch; } .sr-kurv-card-when { margin: .15rem 0 0; font: 400 .7rem/1.2 var(--font-body); color: var(--sr-ink-2); } .sr-kurv-card h3 { margin: 0; font: 900 1rem/1.1 var(--font-body); text-transform: uppercase; letter-spacing: -.01em; } .sr-kurv-card-kind { margin: .1rem 0 0; font: 400 .72rem/1.3 var(--font-body); color: var(--sr-ink-2); } .sr-kurv-card-go { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem .8rem; border: 1px solid var(--sr-line-2); border-radius: 8px; text-decoration: none; color: var(--sr-ink); font: 800 .68rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; transition: border-color .15s ease, color .15s ease; } .sr-kurv-card-go:hover { border-color: var(--sr-red); color: var(--sr-red); } .sr-kurv-card-go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 980px) { .sr-kurv-wrap { grid-template-columns: 1fr; } .sr-kurv-wrap { grid-template-columns: minmax(0, 1fr); } .sr-kurv-wrap > .sr-kurv-kasse, .sr-kurv-wrap > .sr-kurv-rechts { grid-column: 1; } .sr-kurv-ev-top { grid-template-columns: 1fr; } .sr-kurv-ev-price { justify-content: space-between; } } /* ── Die Buchungstabelle im Warenkorb (#858, #861, #862 — Vorlage Sven 07.11.2026) ───────────────────────────── Je Buchung: Kopf mit „Buchung N", Strecke bzw. Paket, Zeitraum, Umfang, Betrag, Papierkorb, Klappe; darunter eine Tabelle mit Spaltenkoepfen (Fahrer · Klasse · Gruppe · Startnr. · Gebuchte Tage · Preis) und je Fahrer einer Zeile. Kopfzeile und Fahrerzeilen teilen dieselben Spalten (--fz-spalten), damit alles untereinander fluchtet. Die Karte bricht nach IHRER Breite um, nicht nach der des Fensters: neben der Kasse ist sie schmal. */ .sr-kurv-bu { --fz-spalten: 3.6rem minmax(9rem, 1.8fr) 5rem minmax(7rem, 1.6fr) 7rem 4.4rem; background: var(--sr-paper); container-type: inline-size; border-left: 4px solid var(--sr-red); box-shadow: 0 1px 3px rgba(11, 13, 16, .05); } .sr-kurv-bu-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .95rem 1.1rem; } /* Der Titel nimmt den freien Platz und bricht selbst um — sonst rutschten bei einem langen Paketnamen Papierkorb und Klappe in eine zweite Zeile. */ .sr-kurv-bu-titel { flex: 1 1 12rem; min-width: 0; margin: 0; font: 900 1.35rem/1.1 var(--font-body); font-style: italic; text-transform: uppercase; letter-spacing: -.01em; overflow-wrap: break-word; } .sr-kurv-bu-serie { display: block; margin-top: .25rem; font: 600 .78rem/1.2 var(--font-body); font-style: normal; text-transform: none; letter-spacing: 0; color: var(--sr-ink-2); } .sr-kurv-bu-zeitraum { display: inline-flex; align-items: center; gap: .45rem; padding-left: 1rem; border-left: 1px solid var(--sr-line); font: 500 .84rem/1.2 var(--font-body); color: var(--sr-ink); white-space: nowrap; } .sr-kurv-bu-umfang { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem; border: 1px solid var(--sr-line); border-radius: 8px; font: 600 .76rem/1 var(--font-body); color: var(--sr-ink); white-space: nowrap; } .sr-kurv-bu-zeitraum svg, .sr-kurv-bu-umfang svg, .sr-kurv-fz-text svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Zwischensumme der Buchung — bewusst kleiner als der Gesamtpreis rechts (07.11.2026). */ .sr-kurv-bu-preis { margin-left: auto; font: 900 1.02rem/1 var(--font-body); color: var(--sr-ink); white-space: nowrap; } .sr-kurv-bu-weg { margin: 0; } .sr-kurv-bu-weg button, .sr-kurv-bu-klappe { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--sr-ground); color: var(--sr-ink-2); cursor: pointer; } .sr-kurv-bu-weg button:hover { background: var(--sr-red); color: #fff; } .sr-kurv-bu-weg svg, .sr-kurv-bu-klappe svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sr-kurv-bu-klappe { color: var(--sr-ink); } .sr-kurv-bu-klappe svg { transition: transform .2s ease; } .sr-kurv-bu-klappe[aria-expanded="false"] svg { transform: rotate(180deg); } .sr-kurv-bu-inhalt[hidden] { display: none; } .sr-kurv-bu .sr-kurv-bu-fahrer { padding: 0 0 .2rem; background: var(--sr-paper); } /* Spaltenkoepfe */ .sr-kurv-fz-kopf { display: grid; grid-template-columns: var(--fz-spalten); gap: 0 .9rem; align-items: center; padding: .55rem 1.1rem; background: var(--sr-ground); border-top: 1px solid var(--sr-line); border-bottom: 1px solid var(--sr-line); font: 700 .66rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--sr-ink-2); } .sr-kurv-fz-kopf-wer { grid-column: 1 / 3; font-size: .72rem; color: var(--sr-ink); } .sr-kurv-fz-kopf-preis { text-align: right; } /* Fahrerzeilen: eine Tabelle mit Trennlinien, keine einzelnen Kaesten */ .sr-kurv-fz-liste { display: grid; margin: 0; padding: 0; list-style: none; } .sr-kurv-fz { border-bottom: 1px solid var(--sr-line); background: var(--sr-paper); } .sr-kurv-fz:last-child { border-bottom: 0; } /* Der aufgeklappte Fahrer (Ansage Sven 07.11.2026: „hintergrund des aufgeklappten weiss mit dem roten glow hintergrund wie im backend sidebar"): derselbe Grund wie die Seitenleiste im Backend (backend-neu, .nav) — hell mit drei roten Lichtflecken —, die Details darauf auf weissem Glas wie dort die Punkte. */ .sr-kurv-fz:has(> .sr-kurv-fz-zeile[aria-expanded="true"]) { background: radial-gradient(70% 60% at 18% 70%, rgba(229, 46, 46, .30), transparent 72%), radial-gradient(55% 50% at 78% 85%, rgba(229, 46, 46, .16), transparent 72%), radial-gradient(80% 40% at 45% 20%, rgba(229, 46, 46, .08), transparent 75%), linear-gradient(180deg, #f3f4f7 0%, #eceef2 100%); } .sr-kurv-fz:has(> .sr-kurv-fz-zeile[aria-expanded="true"]) .sr-kurv-fz-zeile:hover { background: rgba(255, 255, 255, .35); } .sr-kurv-fz:has(> .sr-kurv-fz-zeile[aria-expanded="true"]) .sr-kurv-fz-details { margin: 0 1.1rem 1rem calc(1.1rem + 3.6rem + .9rem); padding: .85rem 1rem; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(255, 255, 255, .9); border-radius: 14px; box-shadow: 0 10px 30px -14px rgba(17, 24, 39, .22), inset 0 1px 0 rgba(255, 255, 255, .9); } .sr-kurv-fz-zeile { display: grid; grid-template-columns: var(--fz-spalten); grid-template-areas: "nr wer gruppe tage preis knoepfe"; gap: .5rem .9rem; align-items: center; padding: .7rem 1.1rem; cursor: pointer; } .sr-kurv-fz.is-posten .sr-kurv-fz-zeile { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "wer preis knoepfe"; } .sr-kurv-fz-zeile:hover { background: var(--sr-ground); } .sr-kurv-fz-zeile:focus-visible { outline: 2px solid var(--sr-red); outline-offset: -2px; } .sr-kurv-fz-wer { grid-area: wer; min-width: 0; } .sr-kurv-fz-wer > b { display: block; font: 800 .95rem/1.2 var(--font-body); overflow-wrap: break-word; } .sr-kurv-fz-klasse { display: block; margin-top: .2rem; font: 500 .76rem/1.2 var(--font-body); color: var(--sr-ink-2); } .sr-kurv-fz-gruppe-platz { grid-area: gruppe; } .sr-kurv-fz-gruppe { display: inline-block; padding: .32rem .6rem; border-radius: 6px; font: 700 .74rem/1.1 var(--font-body); font-style: normal; white-space: nowrap; color: color-mix(in srgb, var(--fz-farbe, #8a94a6) 55%, #0b0d10); background: color-mix(in srgb, var(--fz-farbe, #c9ced6) 26%, #fff); } .sr-kurv-fz-nr { /* Auf der Zeile des Namens, nicht mittig über Name und Klasse (Ansage Sven 07.11.2026). */ grid-area: nr; justify-self: start; align-self: start; color: var(--sr-ink); font: 900 .95rem/1.2 var(--font-body); white-space: nowrap; } .sr-kurv-fz-tage { grid-area: tage; display: flex; flex-wrap: wrap; gap: .35rem; } /* Flacher als in der Eventleiste (Ansage Sven 07.11.2026: „tageskacheln in der höhe weniger“), 40 statt 50 px. */ .sr-kurv-fz-tag .sr-ev-date { width: 44px; height: 40px; } .sr-kurv-fz-tage .sr-ev-date:not(.sr-ev-ticket) b { font-size: 1rem; padding-top: .2rem; margin-bottom: .1rem; } .sr-kurv-fz-tage .sr-ev-date:not(.sr-ev-ticket) span { padding-bottom: .25rem; } .sr-kurv-fz-text { display: inline-flex; align-items: center; gap: .45rem; font: 500 .8rem/1.25 var(--font-body); color: var(--sr-ink); } .sr-kurv-fz-preis { grid-area: preis; justify-self: end; font: 700 .86rem/1 var(--font-body); white-space: nowrap; text-align: right; } .sr-kurv-fz-knoepfe { grid-area: knoepfe; justify-self: end; display: flex; align-items: center; gap: .3rem; } .sr-kurv-fz-knoepfe form { margin: 0; } .sr-kurv-fz-pfeil { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sr-ground); color: var(--sr-ink); } .sr-kurv-fz-pfeil svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; } .sr-kurv-fz-zeile[aria-expanded="true"] .sr-kurv-fz-pfeil svg { transform: rotate(180deg); } .sr-kurv-fz .sr-kurv-fz-knopf { flex: none; display: grid; place-items: center; width: 34px; height: 34px; min-width: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--sr-ink-2); cursor: pointer; } .sr-kurv-fz .sr-kurv-fz-knopf.is-weg:hover { background: var(--sr-red); color: #fff; } .sr-kurv-fz-knopf svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* Details (nur lesen) unter der Zeile */ .sr-kurv-fz-details { display: grid; gap: .35rem; margin: 0; padding: .3rem 1.1rem 1rem calc(1.1rem + 3.6rem + .9rem); font: 400 .78rem/1.35 var(--font-body); } .sr-kurv-fz-details[hidden] { display: none; } /* Gebuchte Extras (und beim Speedpakke seine Veranstaltungen): Name links, Betrag bzw. Datum rechts (#865). */ /* Überschriften „Veranstaltungen“ / „Extras“ in derselben Schrift wie „Name des Fahrers“ (Ansage Sven 07.11.2026): sie tragen dessen Klasse (.sr-kasse-legende), hier nur der Abstand. */ body.design-serienleiste .sr-kurv-wrap .sr-kasse-legende.sr-kurv-fz-details-kopf { margin: 0 0 .45rem; } body.design-serienleiste .sr-kurv-wrap .sr-kasse-legende.sr-kurv-fz-details-kopf:not(:first-child) { margin-top: .9rem; } .sr-kurv-fz-posten { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; } .sr-kurv-fz-posten li { display: flex; justify-content: space-between; gap: .8rem; color: var(--sr-ink); } .sr-kurv-fz-posten b { font-weight: 700; white-space: nowrap; } .sr-kurv-fz-posten em { font-style: normal; color: var(--sr-ink-2); white-space: nowrap; } .sr-kurv-fz-leer { margin: 0; color: var(--sr-ink-3); } /* Die bearbeitbaren Angaben stehen im aufgeklappten Fahrer unter seinen Details, eingerückt wie diese. */ .sr-kurv-fz .sr-kurv-angaben { margin: 0 1.1rem 1rem calc(1.1rem + 3.6rem + .9rem); } /* Schmal (neben der Kasse, Telefon): Kopf in drei Zeilen, keine Spaltenkoepfe, je Fahrer drei Zeilen. */ @container (max-width: 720px) { .sr-kurv-bu-kopf { padding: .85rem .8rem; gap: .45rem .4rem; } .sr-kurv-bu-weg button, .sr-kurv-bu-klappe { width: 28px; height: 28px; } /* Der Titel nimmt die erste Zeile bis auf Papierkorb und Klappe — Datum, Umfang und Betrag rutschen darunter. */ .sr-kurv-bu-titel { order: 1; flex: 1 1 calc(100% - 5rem); min-width: 0; font-size: 1.15rem; } .sr-kurv-bu-weg { order: 2; } .sr-kurv-bu-klappe { order: 3; } .sr-kurv-bu-zeitraum { order: 4; padding-left: 0; border-left: 0; } .sr-kurv-bu-umfang { order: 5; } .sr-kurv-bu-preis { order: 6; font-size: 1rem; } .sr-kurv-fz-kopf { display: none; } .sr-kurv-fz-zeile { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "nr wer wer knoepfe" "nr gruppe . preis" "tage tage tage tage"; gap: .45rem .55rem; padding: .7rem .8rem; } .sr-kurv-fz-details { padding: .2rem .8rem .9rem; } .sr-kurv-fz:has(> .sr-kurv-fz-zeile[aria-expanded="true"]) .sr-kurv-fz-details { margin: 0 .7rem .8rem; padding: .75rem .8rem; } .sr-kurv-fz .sr-kurv-angaben { margin: 0 .7rem .8rem; } } /* ── Die Saisonreise ──────────────────────────────────────────────────── Nach der Vorlage: die Kachel traegt oben rechts ihre Marke, darunter laeuft die Punktreihe mit der Linie, und der naechste Termin steht in einem roten Rahmen mit Fahne. Waagerecht und rollbar, weil eine Saison laenger ist als jeder Bildschirm. */ .sr-kurv-next { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--sr-line); } /* Die Kontodaten auf der Bestellbestaetigung. Eine Liste und kein Fliesstext: wer ueberweist, tippt ab, und dabei sucht das Auge Zeile fuer Zeile. */ .sr-bank-liste { display: grid; gap: .3rem; margin: 0; } .sr-bank-liste > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .sr-bank-liste dt { font: 400 .82rem/1.4 var(--font-body); color: var(--sr-ink-2); } /* Der Euro-Betrag einer Euro-Bestellung (29.09.2026) — hervorgehoben, darunter Aufschlag und Kurs. */ /* Die Zahlen in einer Schrift mit gleich breiten Ziffern: eine IBAN liest sich so in Bloecken und nicht als Wurm, und ein Zahlendreher faellt eher auf. */ .sr-bank-liste dd { margin: 0; font: 700 .84rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; overflow-wrap: anywhere; } .sr-bank-hinweis { margin: .8rem 0 0; font: 400 .82rem/1.5 var(--font-body); color: var(--sr-ink-2); } .sr-bank-per-mail { margin: 0 0 .8rem; } /* ── Zahlung per Ueberweisung, nach der Vorlage vom 30.09.2026 ───────────────────────── Kopf mit dem offenen Betrag als Plakette, darunter Schritte | Kontodaten | QR, unten der Hinweis. Die beiden rechten Felder liegen grau auf dem weissen Blatt. */ .sr-bt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .sr-bt-offen { padding: .38rem .75rem; border-radius: 999px; background: #fdeaea; color: var(--sr-red); font: 700 .8rem/1 var(--font-body); white-space: nowrap; } .sr-bt-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .85fr); gap: .9rem; margin-top: .4rem; align-items: stretch; } .sr-bt-raster.ohne-qr { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .sr-bt-schritte { list-style: none; margin: 0; padding: .2rem 0 0; display: grid; gap: .9rem; counter-reset: bt; align-content: start; } .sr-bt-schritte li { position: relative; padding-left: 2.6rem; counter-increment: bt; } .sr-bt-schritte li::before { content: counter(bt); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--sr-red); color: #fff; font: 800 .8rem/1 var(--font-body); } /* Die rote Linie zwischen den Kreisen, wie in der Vorlage. */ .sr-bt-schritte li:not(:last-child)::after { content: ""; position: absolute; left: calc(.875rem - 1px); top: 1.9rem; bottom: -.8rem; width: 2px; background: var(--sr-red); opacity: .35; } .sr-bt-schritte li > b { display: block; font: 800 .9rem/1.3 var(--font-body); color: var(--sr-ink); } .sr-bt-schritte span b { color: var(--sr-ink); } .sr-bt-schritte span { display: block; margin-top: .15rem; font: 400 .78rem/1.45 var(--font-body); color: var(--sr-ink-2); } .sr-bt-daten, .sr-bt-qr { padding: .8rem .9rem; border-radius: 10px; background: var(--sr-ground); } .sr-bt-daten .sr-bank-liste { gap: .25rem; } .sr-bt-zweck { margin-top: .35rem; align-items: center !important; } .sr-bt-zweck-feld { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .35rem .3rem .7rem; border-radius: 8px; background: #fff; border: 1px solid var(--sr-line); font: 800 .95rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .sr-bt-zweck-feld button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; cursor: pointer; border: 1px solid var(--sr-line); border-radius: 6px; background: var(--sr-paper); color: var(--sr-ink); } .sr-bt-zweck-feld button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; } .sr-bt-zweck-feld button.is-ok { background: #e7f6ec; border-color: #15803d; color: #15803d; } .sr-bt-kurs { margin: .5rem 0 0; font: 400 .7rem/1.35 var(--font-body); color: var(--sr-ink-3); } .sr-bt-qr { display: flex; align-items: flex-start; gap: .8rem; } .sr-bt-qr img { width: 96px; height: 96px; flex: none; border-radius: 8px; background: #fff; padding: 4px; } .sr-bt-qr p { margin: 0; font: 400 .74rem/1.45 var(--font-body); color: var(--sr-ink-2); } .sr-bt-qr p b { display: block; margin-bottom: .2rem; font-size: .82rem; color: var(--sr-ink); } .sr-bt-hinweis { display: flex; align-items: flex-start; gap: .7rem; margin-top: .9rem; padding: .7rem .9rem; border-radius: 10px; background: var(--sr-ground); } .sr-bt-hinweis-ico { flex: none; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 1.5px solid var(--sr-ink-2); color: var(--sr-ink-2); font: 800 .72rem/1 var(--font-body); } .sr-bt-hinweis p { margin: 0; font: 400 .78rem/1.45 var(--font-body); color: var(--sr-ink-2); } .sr-bt-hinweis p b:first-child { display: block; color: var(--sr-ink); font-size: .82rem; } .sr-bt-hinweis p b { color: var(--sr-ink); } @media (max-width: 1080px) { .sr-bt-raster, .sr-bt-raster.ohne-qr { grid-template-columns: 1fr; } } /* Der Serienumschalter: drei Knoepfe in einem hellen Trog, der gewaehlte dunkel. Dasselbe Bild wie der Umschalter auf der Startseite, nur kleiner — wer den kennt, erkennt diesen. */ .sr-serienwahl { margin: 0; } .sr-serienwahl-titel { display: block; margin-bottom: .4rem; font: 700 .72rem/1 var(--font-body); color: var(--sr-ink-2); } .sr-serienwahl-trog { display: inline-flex; gap: .15rem; padding: .18rem; background: color-mix(in srgb, var(--sr-ink) 6%, transparent); border-radius: 999px; } .sr-serienwahl-trog button { border: 0; cursor: pointer; white-space: nowrap; padding: .34rem .7rem; border-radius: 999px; background: transparent; color: var(--sr-ink-2); font: 700 .68rem/1 var(--font-body); } .sr-serienwahl-trog button:hover { color: var(--sr-ink); } .sr-serienwahl-trog button.is-an { background: var(--sr-ink); color: #fff; } .is-kompakt .sr-serienwahl-trog button { font-size: .64rem; padding: .3rem .6rem; } /* Die Serienmarke an einer Station: welches Jahr zwei Serien hat, sieht man der Streckenkachel nicht an — Asserballe faehrt beides. */ .sr-reise-serie { display: inline-block; margin-bottom: .25rem; padding: .15rem .4rem; border-radius: 4px; font: 800 .56rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; background: color-mix(in srgb, var(--sr-ink) 8%, transparent); color: var(--sr-ink-2); } .sr-reise-serie.is-sm { background: color-mix(in srgb, var(--sr-red) 12%, transparent); color: var(--sr-red); } /* Die Kopfzeile der Reise nach der Vorlage: Titel links, Zahl und Kalender rechts. Auf schmalen Schirmen untereinander — nebeneinander blieben von beiden Haelften Streifen. */ .sr-reise-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .sr-reise-kopf > .sr-head { margin: 0; } /* Das dunkle Band (08.10.2026, „cooleren header"): Bild der Ergebniswertung, Titel kursiv weiß, Zählung als farbige Punkte, Bedienung hell. */ .sr-reise-kopf { position: relative; margin: 0 0 1.2rem; padding: 1.15rem 1.25rem; border-radius: 14px; color: #fff; overflow: hidden; align-items: center; background: linear-gradient(90deg, rgba(11, 13, 16, .92) 0%, rgba(11, 13, 16, .7) 45%, rgba(11, 13, 16, .35) 100%), #14171c url('https://www.zenergyracing.dk/v2/public/images/resultater-kopf.webp?v=1791304839') center 40% / cover no-repeat; box-shadow: 0 10px 22px -12px rgba(20, 22, 26, .6); } .sr-reise-kopf-text { min-width: 0; } .sr-reise-kopf-vor { margin: 0 0 .3rem; font: 700 .7rem/1.3 var(--font-body); letter-spacing: .04em; color: rgba(255, 255, 255, .78); } .sr-reise-kopf-vor span { color: var(--sr-red); font-weight: 900; letter-spacing: -.05em; margin-right: .25rem; } .sr-reise-kopf h2 { margin: 0; color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1; text-transform: uppercase; } .sr-reise-kopf-zaehl { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .55rem 0 0; font: 700 .68rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .8); } .sr-reise-kopf-zaehl span { display: inline-flex; align-items: center; gap: .35rem; } .sr-reise-kopf-zaehl span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9aa1ab; } .sr-reise-kopf-zaehl .is-done::before { background: #2fae63; } .sr-reise-kopf-zaehl .is-booked::before { background: var(--sr-red); } .sr-reise-kopf-zaehl b { font: italic 900 1.05rem/1 var(--font-display, var(--font-body)); color: #fff; letter-spacing: 0; } .sr-reise-kopf .sr-reise-zahl { color: rgba(255, 255, 255, .7); } .sr-reise-kopf .sr-reise-kalender { color: #fff; border-color: rgba(255, 255, 255, .35); background: rgba(11, 13, 16, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .sr-reise-kopf .sr-reise-kalender:hover { border-color: var(--sr-red); color: #fff; background: var(--sr-red); } .sr-reise-kopf .sr-serienwahl-trog { background: rgba(255, 255, 255, .14); } .sr-reise-kopf .sr-serienwahl-trog button { color: rgba(255, 255, 255, .8); } .sr-reise-kopf .sr-serienwahl-trog button:hover { color: #fff; } .sr-reise-kopf .sr-serienwahl-trog button.is-an { background: #fff; color: #14171c; } .sr-reise-kopf-rechts { display: flex; align-items: center; gap: .8rem; } .sr-reise-zahl { font: 700 .68rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--sr-ink-3); white-space: nowrap; } .sr-reise-kalender { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; padding: .5rem .85rem; border: 1px solid var(--sr-line-2); border-radius: 999px; font: 700 .72rem/1 var(--font-body); color: var(--sr-ink); text-decoration: none; } .sr-reise-kalender:hover { border-color: var(--sr-red); color: var(--sr-red); } .sr-reise-kalender svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } @media (max-width: 620px) { .sr-reise-kopf { flex-direction: column; align-items: flex-start; } /* „align-items: flex-start" richtet die Kinder nicht nur aus, es BEMISST sie auch: in einer Spalte ist die Breite die Querachse, und flex-start heisst dort „so breit wie dein Inhalt". Die Ueberschriftzeile wurde damit 368 px breit in einem 243 px breiten Kasten und schob die ganze Seite auf — im Profil war das Fenster 375 px breit und die Seite 425. Die Deckelung nimmt ihnen das, ohne die Ausrichtung anzutasten. */ .sr-reise-kopf > * { max-width: 100%; } .sr-reise-kopf-rechts { max-width: 100%; flex-wrap: wrap; } } /* Acht Stationen auf einmal (Auftrag vom 21.09.2026), und mit Pfeilen weiter. Der Rahmen traegt die Pfeile; die Liste darin rollt. Acht bleiben es bis 1000px — darunter waere von jeder Station ein Streifen uebrig, auf dem nichts mehr zu lesen ist. */ .sr-reise-wrap { position: relative; } .sr-reise { list-style: none; margin: 1.6rem 0 0; padding: .6rem 0; display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .sr-reise::-webkit-scrollbar { display: none; } /* Ein Achtel der Breite statt fester 186px — acht sollen hineinpassen, egal wie breit die Tafel gerade ist. Unter 1100px werden es weniger, sonst bleibt von jeder Station ein Streifen uebrig, auf dem nichts mehr zu lesen ist. */ .sr-reise-stop { flex: 0 0 12.5%; scroll-snap-align: start; min-width: 0; } @media (max-width: 1200px) { .sr-reise-stop { flex-basis: 16.666%; } } /* Auf dem Tablett vier. Sechs waeren dort 100 Pixel je Station — darauf steht ein Streckenname in Grossbuchstaben ueber drei Zeilen. */ @media (max-width: 900px) { .sr-reise-stop { flex-basis: 25%; } } /* Auf dem Telefon knapp zwei statt genau zwei: der angeschnittene Rand der naechsten Station ist das Zeichen, dass es weitergeht. Bei glatten 50 % sah die Reihe aus, als waere sie zu Ende — und die Pfeile, die es sonst sagen wuerden, gibt es dort nicht (siehe unten). */ @media (max-width: 560px) { .sr-reise-stop { flex-basis: 62%; } } /* Ein langer Streckenname bricht, statt ueber seine Kachel hinauszulaufen: „JYLLANDSRINGEN" passte bei 375px nicht in seine 104 Pixel und stand halb daneben. */ .sr-reise-stop b { overflow-wrap: anywhere; hyphens: auto; } .sr-reise-pfeil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 999px; cursor: pointer; border: 1px solid var(--sr-line-2); background: var(--sr-bg-card, #fff); color: var(--sr-ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(11, 13, 16, .12); } .sr-reise-pfeil:hover { border-color: var(--sr-red); color: var(--sr-red); } .sr-reise-pfeil.is-links { left: -8px; } .sr-reise-pfeil.is-rechts { right: -8px; } /* KEINE Pfeile, wo ein Finger rollt. Auf dem Telefon ist die Liste so schmal, dass die beiden Knoepfe ein Viertel davon verdeckten — und zwar die Kacheln darunter, die man antippen will. Gerollt wird dort gewischt; der angeschnittene Rand der naechsten Station sagt, dass es weitergeht. Auf einem Geraet ohne Zeiger gilt dasselbe, auch wenn es breit ist. */ @media (max-width: 900px), (hover: none) { .sr-reise-pfeil { display: none; } } .sr-reise-pfeil svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* Das Wochenendergebnis an einer gefahrenen Station. VORLAEUFIG, und das steht auch da. */ .sr-reise-ergebnis { display: block; margin-top: .4rem; } .sr-reise-ergebnis b { display: inline; font: 900 .74rem/1.2 var(--font-body); color: var(--sr-ink); } .sr-reise-ergebnis i { font: 700 .7rem/1.2 var(--font-body); font-style: normal; color: #1a7f4b; margin-left: .3rem; } /* Die einzelnen Läufe unter dem Wochenendergebnis (08.10.2026): Kästchen wie im Verlauf der Ergebniswertung, die Punkte des Laufs klein darunter. */ .sr-reise-laeufe { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .35rem; } .sr-reise-lauf { display: grid; justify-items: center; gap: .1rem; } .sr-reise-lauf i { display: inline-block; min-width: 1.45rem; padding: 2px 4px; border-radius: 4px; background: #eef0f3; font: normal 700 .66rem/1.2 var(--font-body); color: var(--sr-ink); font-variant-numeric: tabular-nums; text-align: center; } .sr-reise-lauf i.is-gold { background: #f1d778; } .sr-reise-lauf i.is-silber { background: #d9dde2; } .sr-reise-lauf i.is-bronze { background: #e7bf9b; } .sr-reise-lauf i.is-aus { background: transparent; border: 1px dashed #b9bdc4; font-size: .56rem; } .sr-reise-lauf small { font: 700 .56rem/1 var(--font-body); color: var(--sr-ink-3); font-variant-numeric: tabular-nums; } .sr-reise-vorlaeufig { display: block; margin-top: .2rem; padding: 0; border: 0; font: 600 .58rem/1 var(--font-body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--sr-ink-3); } .sr-reise-stop a { display: block; text-decoration: none; color: inherit; } .sr-reise-card { position: relative; display: block; padding: .5rem; border: 1.5px solid transparent; border-radius: 14px; } /* Der naechste Termin: roter Rahmen, und die Fahne sitzt auf seiner Oberkante. */ .is-next .sr-reise-card { border-color: var(--sr-red); } .sr-reise-flag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: .2rem .5rem .22rem; border-radius: 4px; white-space: nowrap; background: var(--sr-red); color: #fff; font: 800 .54rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; } .sr-reise-shot { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; background: transparent; } .sr-reise-shot img { width: 100%; height: 100%; object-fit: contain; } .sr-reise-photo img { object-fit: cover; border-radius: 10px; } /* Was noch nicht gebucht ist, steht grau da und faerbt sich beim Zeigen — die Saison faerbt sich, waehrend man sie bucht. Das ist der Gedanke dieser Reihe, keine Dekoration. */ .is-open .sr-reise-shot img { filter: grayscale(1); opacity: .8; } .sr-reise-stop a:hover .sr-reise-shot img { filter: none; opacity: 1; } /* Die Marke AUF der Kachel, oben rechts halb darueber. */ .sr-reise-mark { position: absolute; top: -6px; right: 6px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--sr-paper); background: var(--sr-ink-3); color: #fff; } .sr-reise-mark svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .sr-reise-mark svg.is-fill { fill: currentColor; stroke: none; } .is-done .sr-reise-mark { background: #1a7f4b; } .is-booked .sr-reise-mark, .is-cart .sr-reise-mark { background: var(--sr-red); } /* Die Punktreihe: ein Punkt je Station, die Linie dazwischen zeigt, wie weit die Saison gegangen ist. Sie gehoert zur Station LINKS von ihr — nicht dorthin, wo sie hinfuehrt. */ .sr-reise-line { position: relative; display: block; height: 20px; margin: .7rem 0 .2rem; } .sr-reise-line::before { content: ""; position: absolute; top: 50%; left: -50%; right: 50%; height: 0; border-top: 2px dashed var(--sr-line-2); transform: translateY(-1px); } .line-first .sr-reise-line::before { display: none; } .line-from-done .sr-reise-line::before { border-top: 2px solid #1a7f4b; } .line-from-booked .sr-reise-line::before, .line-from-cart .sr-reise-line::before { border-top: 2px solid var(--sr-red); } .sr-reise-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--sr-line-2); } .is-done .sr-reise-line::after { background: #1a7f4b; } .is-booked .sr-reise-line::after, .is-cart .sr-reise-line::after { background: var(--sr-red); } .sr-reise-stop b { display: block; font: 900 .82rem/1.15 var(--font-body); text-transform: uppercase; letter-spacing: -.01em; } .sr-reise-sub { display: block; margin-top: .05rem; font: 400 .68rem/1.2 var(--font-body); color: var(--sr-ink-3); } .sr-reise-date { display: block; margin-top: .18rem; font: 400 .72rem/1.3 var(--font-body); color: var(--sr-ink-2); } .sr-reise-state { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; font: 600 .68rem/1 var(--font-body); color: var(--sr-ink-3); } .sr-reise-state svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .is-done .sr-reise-state { color: #1a7f4b; } .is-booked .sr-reise-state, .is-cart .sr-reise-state { color: var(--sr-red); } /* Gebucht, aber noch offen: bernsteinfarben. Nicht rot — rot ist in diesem Design fuer Hauptknoepfe und Warnungen reserviert, und eine offene Rechnung ist eine Aufgabe. */ .is-unpaid .sr-reise-mark { background: #b7791f; } .is-unpaid .sr-reise-state { color: #b7791f; } .is-unpaid .sr-reise-line::after { background: #b7791f; } .line-from-unpaid .sr-reise-line::before { border-top: 2px solid #b7791f; } .sr-reise-stop em { display: inline-block; margin-top: .45rem; padding: .22rem .55rem; border: 1px solid var(--sr-line-2); border-radius: 6px; font: 700 .6rem/1 var(--font-body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--sr-ink-2); } /* Der Buchungsteil ist ein ABSCHNITT des Streckenkastens, kein eigener Kasten. Getrennt lasen sich beide als zwei Angebote auf derselben Seite; es ist aber eine Sache — der Termin, und wie man ihn bucht. Die Linie trennt, der Kasten haelt zusammen. */ .sr-bk-sect { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--sr-line); } .sr-bk { margin-top: 1.4rem; } .sr-bk-error { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 8px; border: 1px solid var(--sr-red); background: rgba(218, 31, 37, .06); color: var(--sr-red); font: 600 .82rem/1.4 var(--font-body); } /* Eine Spalte, nicht zwei: die Fahrerliste liegt seit dem 25.09.2026 als Reiterleiste OBERHALB des Formulars (Ansage vom selben Tag). Sie ist meistens eine Zeile lang und nahm als Spalte ein Drittel der Breite, das die Felder darunter brauchen. */ .sr-bk-cols { display: grid; grid-template-columns: 1fr; gap: 1.1rem; align-items: start; } /* Die Reiterleiste: die Fahrer nebeneinander, dahinter der Knopf fuer den naechsten und ganz rechts der Zaehler. `flex-wrap` statt fester Spalten — bei zehn Fahrern bricht die Leiste um, statt jeden Reiter auf Briefmarkengroesse zu druecken. */ .sr-bk-list { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .sr-bk-list[hidden] { display: none; } /* Hinweis „erst den vorhandenen Fahrer ausfuellen" unter der Reiterleiste (19.10.2026). */ /* Derselbe rote Kasten wie .sr-bk-error (fehlende Pflichtfelder); erneuter Klick laesst ihn aufblitzen. */ .sr-bk-erst { flex-basis: 100%; margin: 0; padding: .7rem .9rem; border-radius: 8px; border: 1px solid var(--sr-red); background: rgba(218, 31, 37, .06); color: var(--sr-red); font: 600 .82rem/1.4 var(--font-body); } .sr-bk-erst[hidden] { display: none; } .sr-bk-erst.is-blitz { animation: sr-bk-erst-blitz .6s ease-out 2; } @keyframes sr-bk-erst-blitz { 0% { background: rgba(218, 31, 37, .32); } 100% { background: rgba(218, 31, 37, .06); } } @media (prefers-reduced-motion: reduce) { .sr-bk-erst.is-blitz { animation: none; } } .sr-bk-list .sr-bk-count { margin-left: auto; } .sr-bk-add { border: 1px solid var(--sr-line-2); background: var(--sr-paper); color: var(--sr-ink); border-radius: 999px; padding: .38rem .8rem; cursor: pointer; font: 700 .7rem/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; transition: border-color .15s ease, color .15s ease; } .sr-bk-add:hover { border-color: var(--sr-red); color: var(--sr-red); } .sr-bk-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .sr-bk-row { display: grid; grid-template-columns: 26px auto; align-items: center; gap: .6rem; padding: .6rem .9rem .6rem .6rem; cursor: pointer; text-align: left; border: 1px solid var(--sr-line); border-radius: 10px; background: var(--sr-paper); transition: border-color .15s ease, box-shadow .15s ease; } /* Kein Pfeil mehr: er zeigte nach rechts auf die Spalte daneben, und die gibt es nicht mehr. Ein Reiter sagt durch seinen Rahmen, dass er offen ist. */ .sr-bk-chev { display: none; } /* Der ausgewaehlte Fahrer traegt denselben roten Rahmen wie der geoeffnete Termin in der Schiene — dieselbe Frage ("welches sehe ich gerade an?"), dieselbe Antwort. */ .sr-bk-row[aria-current] { border-color: var(--sr-red); box-shadow: 0 0 0 1px var(--sr-red); } .sr-bk-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sr-ground-2); color: var(--sr-ink-2); font: 800 .72rem/1 var(--font-body); } .sr-bk-row[aria-current] .sr-bk-num { background: var(--sr-red); color: #fff; } .sr-bk-who { min-width: 0; max-width: 14rem; } .sr-bk-who b { display: block; font: 800 .82rem/1.2 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-bk-who span { display: block; margin-top: .1rem; font: 400 .7rem/1.3 var(--font-body); color: var(--sr-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-bk-chev { color: var(--sr-ink-3); font-weight: 800; } /* Ueber die ganze Leiste und in eine eigene Zeile: der Satz gehoert unter die Reiter und nicht zwischen zwei von ihnen. */ .sr-bk-max { flex: 1 0 100%; margin: 0; font: 400 .72rem/1.4 var(--font-body); color: var(--sr-ink-3); } /* Der Block eines Fahrers ist seit dem 25.09.2026 eine eigene Karte mit Rahmen: unter der Reiterleiste braucht er eine sichtbare Kante, sonst sieht man nicht, wo der offene Reiter aufhoert und das Formular anfaengt. Als Spalte daneben gab der Abstand das noch her. */ /* Ohne Rahmen (Ansage Sven 08.11.2026: „rahmen um fahrerangaben entfernen“) — und ohne den seitlichen Innenabstand, den nur der Rahmen brauchte, damit die Felder bündig mit dem Rest der Spalte stehen. */ .sr-bk-pane { border: 0; border-radius: 0; background: transparent; margin: 0; padding: 1rem 0 1.2rem; min-width: 0; } /* Die Kopfzeile ist am 25.09.2026 entfallen — Nummer und Name standen darin, und beides steht im Reiter darueber. Mit ihr ist auch die Rahmenkerbe weg: sie sass in einem , und ein legend schneidet den oberen Rahmen seines fieldsets auf seiner Breite auf (links und rechts blieben zwei Stummel von je 18 px stehen). Der `float: left`, mit dem das am selben Tag geschlossen wurde, ist damit hinfaellig. Geblieben ist das Entfernen — ab dem zweiten Fahrer, rechts ueber den Feldern. */ .sr-bk-pane-aktion { display: flex; justify-content: flex-end; margin: 0 0 .4rem; } .sr-bk-del { margin-left: auto; border: 0; background: none; cursor: pointer; padding: .2rem .1rem; color: var(--sr-ink-3); font: 700 .68rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; transition: color .15s ease; } .sr-bk-del:hover { color: var(--sr-red); } /* Links, wer faehrt und worin — rechts die Tage, ueber die ganze Hoehe des Blocks. Die Tage sind die eine Frage, die fuer alles links davon gilt; sie standen bis zum 25.09.2026 neben der Nummerntafel und damit auf Hoehe der letzten Zeile. */ .sr-bk-pane-cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(220px, 1fr); gap: 1.4rem; align-items: start; } /* Beim Paket gibt es keine Tage zu waehlen — die zweite Spalte entfaellt, statt leer zu stehen und dem Formular ein Drittel der Breite zu nehmen. */ .sr-bk-pane-cols-eins { grid-template-columns: minmax(0, 1fr); } .sr-bk-pane-felder { min-width: 0; } /* In der eigenen Spalte stehen die Tage untereinander: das Raster darunter bricht erst bei 150 px um, und auf dieser Breite waere nebeneinander oder untereinander Zufall. */ .sr-bk-pane-cols .sr-bk-tage-spalte { margin-top: 0; } .sr-bk-pane-cols .sr-bk-tage-spalte .sr-bk-days { grid-template-columns: 1fr; } .sr-bk-group { margin-top: 1.1rem; } /* „Ekstra" und „Vaelg dage" tragen die Schrift der Feldbeschriftungen daneben (Ansage vom 25.09.2026). Sie beschriften dasselbe: eine Frage im Formular. Zwei Schriftgroessen dafuer machten aus einer Frage eine Ueberschrift. */ .sr-bk-legend { margin: 0 0 .5rem; font: 900 .82rem/1 var(--font-body); font-style: italic; letter-spacing: -.01em; text-transform: uppercase; color: var(--sr-ink); } .sr-bk-legend i { color: var(--sr-red); font-style: normal; } .sr-bk-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; } .sr-bk-day, .sr-bk-opt { display: flex; align-items: center; gap: .55rem; cursor: pointer; padding: .6rem .7rem; border: 1px solid var(--sr-line); border-radius: 9px; background: var(--sr-paper); transition: border-color .15s ease; } .sr-bk-day:hover, .sr-bk-opt:hover { border-color: var(--sr-line-2); } /* Angehakt heisst: das ganze Feld ist gewaehlt, nicht nur das Kaestchen darin. Roter Rand UND ein sehr heller roter Grund — bei einer Reihe von Tagen sieht man so auf einen Blick, welche dazugehoeren, ohne drei Kaestchen abzusuchen. Derselbe Grund wie in der Anmelde-Tafel, damit „gewaehlt" auf dieser Seite immer gleich aussieht. */ .sr-bk-day:has(input:checked), .sr-bk-opt:has(input:checked), .sr-kurv-adddays label:has(input:checked), .sr-kurv-addextras label:has(input:checked) { border-color: var(--sr-red); background: rgba(218, 31, 37, .05); } /* Pakete statt Tage (#589): ein Feld je freigegebener Kombination, die Kalenderblaetter der Tage nebeneinander. */ .sr-bk-pakete { display: grid; gap: .5rem; } .sr-bk-paket { display: flex; align-items: center; gap: .6rem; cursor: pointer; padding: .6rem .7rem; border: 1px solid var(--sr-line); border-radius: 9px; background: var(--sr-paper); transition: border-color .15s ease; } .sr-bk-paket:hover { border-color: var(--sr-line-2); } .sr-bk-paket:has(input:checked) { border-color: var(--sr-red); background: rgba(218, 31, 37, .05); } .sr-bk-paket input { accent-color: var(--sr-red); } /* Die Tageskachel der Eventliste (hell, Tag kursiv mit rotem Strich, Monat klein darunter), dazu oben der Wochentag wie im Event-Hero (.sr-ek-kachel) — Ansage Sven 20.10.2026. Feste Groesse, damit sie in einem schmalen Feld nicht gestaucht wird. */ .sr-bk-paket-blaetter { display: inline-flex; gap: .3rem; flex: none; } .sr-bk-paket-blatt { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 50px; height: 50px; padding: 0; /* quadratisch (Ansage Sven 20.10.2026) */ box-sizing: border-box; border-radius: 9px; border: 1px solid var(--sr-line); background: var(--sr-paper); box-shadow: 0 1px 2px rgba(20, 22, 26, .07); color: var(--sr-ink); } .sr-bk-paket-wt, .sr-bk-paket-mon { font: 800 .46rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .16em; padding-left: .16em; color: var(--sr-ink-2); } .sr-bk-paket-tag { position: relative; font: italic 900 1.15rem/1 'Figtree', var(--font-display), sans-serif; letter-spacing: -.01em; padding: .12rem .1rem .22rem 0; margin-bottom: .14rem; color: var(--sr-ink); } .sr-bk-paket-tag::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 78%; height: 3px; border-radius: 2px; transform: translateX(-50%); background: var(--sr-red); } .sr-bk-legend-zwei { margin-top: .9rem; } .sr-bk-paket input[type="checkbox"] { accent-color: var(--sr-red); } .sr-bk-paket-preis { margin-left: auto; font: 700 .78rem/1.2 var(--font-body); font-style: normal; color: var(--sr-ink); white-space: nowrap; } .sr-bk-day b { font: 700 .74rem/1.2 var(--font-body); text-transform: uppercase; } .sr-bk-day em, .sr-bk-opt em { margin-left: auto; font: 400 .72rem/1.2 var(--font-body); font-style: normal; color: var(--sr-ink-2); } /* Rabatt zum Ankreuzen (#600): einmal unter den Fahrern, gilt für die ganze Bestellung. */ .sr-bk-rabatt { margin: 1rem 0 0; padding: .8rem 1rem; border: 1px dashed var(--sr-line); border-radius: 10px; } .sr-bk-rabatt legend { padding: 0 .3rem; font: 800 .74rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; } .sr-bk-rabatt-hint { margin: 0 0 .5rem; font: 400 .74rem/1.4 var(--font-body); color: var(--sr-ink-2); } .sr-bk-rabatt .sr-bk-opt em { color: #16a34a; } /* Fahrer-Rabatt (#600): das Feld des Prüfattributs erscheint erst mit dem Haken. */ .sr-bk-fr .sr-bk-fr-wert { color: #16a34a; } .sr-bk-fr-kz { display: none; align-items: center; gap: .5rem; margin: .35rem 0 0 1.6rem; font: 600 .74rem/1.2 var(--font-body); } .sr-bk-fr:has([data-fahrer-rabatt]:checked) .sr-bk-fr-kz { display: flex; } .sr-bk-fr-kz input { width: 12rem; padding: .4rem .55rem; border: 1px solid var(--sr-line); border-radius: 6px; font: inherit; text-transform: uppercase; } .sr-bk-opt { margin-top: .5rem; } .sr-bk-opt span { font: 600 .76rem/1.2 var(--font-body); } /* Hinweis-Eintrag unter den Extras (Speedpakke: Garagen je Event extra, 04.10.2026). */ .sr-bk-opt-info { cursor: default; border-style: dashed; } .sr-bk-opt-info:hover { border-color: var(--sr-line); } .sr-bk-opt-info svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Garage (Backlog #138): EIN Kasten in der Extras-Liste wie „Lej transponder", nur hoeher — oben die Kopfzeile wie bei den anderen Extras, darunter je Zeile ein Zaehler. */ .sr-bk-opt-garage { flex-direction: column; align-items: stretch; gap: .5rem; cursor: default; } /* Volle Breite fuer Kopf und Zeilen — eine spaetere Regel stellt .sr-bk-opt auf flex-start. */ .sr-bk-opt-garage > .sr-gar-kopf, .sr-bk-opt-garage > .sr-gar-zeilen { align-self: stretch; width: 100%; box-sizing: border-box; } .sr-bk-opt-garage.is-gewaehlt { border-color: var(--sr-red); background: rgba(218, 31, 37, .05); } .sr-gar-kopf { display: flex; align-items: center; gap: .55rem; } /* Garage gewaehlt, aber kein Tag: der Hinweis steht rot (Ansage Sven 13.10.2026). */ .sr-gar-kopf [data-gar-summe].is-ohne-tag { color: var(--sr-red); font-weight: 700; } .sr-gar-kopf > span { flex: 1 1 auto; min-width: 0; } .sr-gar-ico { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sr-gar-zeilen { display: grid; gap: .35rem; padding-left: calc(20px + .55rem); } .sr-gar-zeile { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--sr-line); } .sr-gar-zeile.is-aus { opacity: .55; } .sr-gar-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .sr-gar-text b { font: 600 .76rem/1.2 var(--font-body); } .sr-gar-text small { font: 400 .68rem/1.3 var(--font-body); color: var(--sr-ink-2); } .sr-gar-text .is-aus { color: var(--sr-red); font-weight: 700; } .sr-gar-zaehler { flex: none; display: flex; align-items: center; border: 1px solid var(--sr-line); border-radius: 8px; overflow: hidden; } .sr-gar-zaehler button { width: 32px; height: 32px; border: 0; background: transparent; color: var(--sr-ink); font: 700 1rem/1 var(--font-body); cursor: pointer; } .sr-gar-zaehler button[data-gar-schritt="1"] { background: var(--sr-red); color: #fff; } .sr-gar-zaehler button:disabled { background: transparent; color: var(--sr-ink-2); cursor: default; } .sr-gar-zaehler input { width: 2rem; height: 32px; border: 0; padding: 0; text-align: center; background: transparent; color: inherit; font: 800 .85rem/1 var(--font-body); -moz-appearance: textfield; appearance: textfield; } .sr-gar-zaehler input::-webkit-outer-spin-button, .sr-gar-zaehler input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Der Fuss: was die Bestellung als Ganzes angeht — der Halter, die Summe, der Weg weiter. */ .sr-bk-foot { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--sr-line); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .sr-bk-sum { margin-left: auto; text-align: right; } .sr-bk-sum span { display: block; font: 800 .66rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--sr-ink-2); } .sr-bk-sum b { display: block; margin-top: .2rem; font: 900 1.45rem/1 var(--font-body); letter-spacing: -.02em; } /* Beim Paket steht der Rabatt hier noch einmal: darueber der durchgestrichene regulaere Preis, darunter die Ersparnis — dieselbe Reihenfolge wie im Kopf der Tafel. Beim Termin gibt es beides nicht, und die Regeln greifen dann ins Leere. */ .sr-bk-vorher { display: block; margin-top: .25rem; font: 600 .8rem/1 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--sr-ink-3); } /* MIT dem Elternteil davor: `.sr-bk-sum span` daneben ist eine Klasse und ein Element stark und setzt Versalien — „Du sparer …" kam sonst in Grossbuchstaben heraus. */ .sr-bk-sum .sr-bk-spar { display: block; margin-top: .25rem; font: 800 .82rem/1.2 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--sr-red); } .sr-bk-go { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; padding: .85rem 1.4rem; border: 0; border-radius: 999px; background: var(--sr-red); color: #fff; font: 800 .78rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; transition: background .15s ease; } .sr-bk-go:hover { background: var(--sr-red-2); } .sr-bk-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* Volle Gruppe → Warteliste (#889, 08.11.2026). Kein Rot: das ist ein Hinweis, kein Fehler. Grau wie die übrigen Kästen des Formulars, der Knopf dunkel — „In den Warenkorb“ bleibt der einzige rote Knopf. */ .sr-bk-warte { margin: 1.1rem 0 0; padding: 1rem 1.15rem; border-radius: 12px; background: #f2f3f5; color: #1d2128; } .sr-bk-warte[hidden] { display: none; } .sr-bk-warte.is-ruck { animation: sr-bk-warte-ruck .45s ease; } @keyframes sr-bk-warte-ruck { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .sr-bk-warte-titel { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; font: 800 .95rem/1.3 var(--font-body); } .sr-bk-warte-titel svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sr-bk-warte-text { margin: 0 0 .8rem; font-size: .88rem; line-height: 1.5; color: #4a515c; } .sr-bk-warte-zeile { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .sr-bk-warte-email { flex: 1 1 14rem; min-width: 0; padding: .7rem .9rem; border: 1px solid #d5d8dd; border-radius: 999px; background: #fff; font: 500 .9rem/1.2 var(--font-body); color: #1d2128; } .sr-bk-warte-knopf { padding: .8rem 1.3rem; border: 0; border-radius: 999px; cursor: pointer; background: #1d2128; color: #fff; font: 800 .76rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; } .sr-bk-warte-knopf:hover { background: #363c46; } .sr-bk-warte-knopf:disabled { opacity: .5; cursor: default; } .sr-bk-warte.is-eingetragen .sr-bk-warte-zeile { display: none; } .sr-bk-warte-meldung { margin: .7rem 0 0; font-size: .88rem; font-weight: 700; } .sr-bk-warte-meldung.is-ok { color: #1d2128; } .sr-bk-warte-meldung.is-ok::before { content: '✓ '; } .sr-bk-warte-meldung.is-fehler { color: var(--sr-red); } .sr-bk-angebot { display: flex; align-items: flex-start; gap: .55rem; margin: 0 0 1rem; padding: .85rem 1rem; border-radius: 12px; background: #e3f4e8; color: #17532b; font-size: .9rem; font-weight: 700; line-height: 1.45; } .sr-bk-angebot svg { width: 18px; height: 18px; flex: none; margin-top: .1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .sr-bk-angebot.is-vorbei { background: #f2f3f5; color: #1d2128; } /* Extra mit Kontingent (Hütten, 08.10.2026): wenige frei rot, ausgebucht durchgestrichen und nicht wählbar. */ .sr-bk-opt .sr-bk-knapp { margin-left: .4rem; font: 800 .66rem/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--sr-red); } /* Das „i" hinter einem Produktnamen (18.10.2026): oeffnet die Beschreibung im Fenster. Zurueckhaltend in der Grundfarbe — Rot gehoert den Handlungen, die Auskunft ist keine. */ .sr-info-knopf { display: inline-flex; align-items: center; justify-content: center; vertical-align: 1px; width: 16px; height: 16px; margin-left: .35rem; padding: 0; cursor: pointer; border: 1px solid var(--sr-line-2); border-radius: 50%; background: var(--sr-paper); color: var(--sr-ink-2); font: 700 italic .62rem/1 Georgia, 'Times New Roman', serif; transition: border-color .15s ease, color .15s ease; } .sr-info-knopf:hover, .sr-info-knopf:focus-visible { border-color: var(--sr-ink-2); color: var(--sr-ink); } .sr-info-fenster { width: min(560px, calc(100vw - 2rem)); padding: 0; overflow: hidden; } /* Kopf mit Grafik (#572, 20.10.2026; Karomuster entfernt, einfach weiss, 05.11.2026): rechts die Grafik der Produktart, oben das Kreuz. */ /* Nur im Info-Fenster: der Kopf der Infoseiten trägt dieselbe Klasse und bekam sonst weißen Kasten, Linie und eigene Lage — das Kreuz rutschte in den Kopf und wurde abgeschnitten (gemeldet 11.11.2026). */ .sr-info-fenster .sr-info-kopf { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.3rem 3.4rem 1.2rem 1.4rem; overflow: hidden; background: #fff; border-bottom: 1px solid var(--sr-line); } .sr-info-kopf-text { position: relative; flex: 1 1 auto; min-width: 0; } .sr-info-kicker { margin: 0 0 .35rem; display: flex; align-items: center; gap: .45rem; font: 800 .68rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--sr-ink-3); } .sr-confirm .sr-info-kicker { margin: 0 0 .35rem; font: 800 .68rem/1 var(--font-body); color: var(--sr-ink-3); } .sr-info-kicker::before { content: ""; width: 16px; height: 3px; border-radius: 2px; background: var(--sr-red); } .sr-info-kopf h3 { margin: 0; font: italic 900 clamp(1.05rem, 2.6vw, 1.35rem)/1.1 'Figtree', var(--font-display, var(--font-body)); } .sr-info-grafik { position: relative; flex: none; width: 4.4rem; height: 4.4rem; display: grid; place-items: center; } .sr-info-grafik svg { display: none; width: 100%; height: 100%; filter: drop-shadow(0 6px 12px rgba(218, 31, 37, .25)); } .sr-info-fenster[data-art="schild"] .sr-info-g-schild, .sr-info-fenster[data-art="transponder"] .sr-info-g-transponder, .sr-info-fenster[data-art="ticket"] .sr-info-g-ticket, .sr-info-fenster:not([data-art="schild"]):not([data-art="transponder"]):not([data-art="ticket"]) .sr-info-g-stern { display: block; } .sr-confirm .sr-info-x { position: absolute; top: .7rem; right: .7rem; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--sr-line-2); border-radius: 50%; background: rgba(255, 255, 255, .85); color: var(--sr-ink-2); } .sr-info-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } .sr-info-x:hover { color: var(--sr-ink); border-color: var(--sr-ink-3); } .sr-info-fenster .sr-info-text { padding: 1.1rem 1.4rem 0; } .sr-info-fenster .sr-confirm-knoepfe { padding: 0 1.4rem 1.2rem; } @media (max-width: 520px) { .sr-info-grafik { width: 3.2rem; height: 3.2rem; } .sr-info-fenster .sr-info-kopf { padding-left: 1.1rem; } } .sr-info-text { max-height: min(60vh, 28rem); overflow-y: auto; margin: 0 0 1.2rem; font: 400 .88rem/1.5 var(--font-body); color: var(--sr-ink-2); } .sr-info-text > :first-child { margin-top: 0; } .sr-info-text > :last-child { margin-bottom: 0; } .sr-info-text p { margin: 0 0 .7rem; } .sr-info-text ul, .sr-info-text ol { margin: 0 0 .7rem; padding-left: 1.2rem; } .sr-info-text a { color: var(--sr-ink); text-decoration: underline; text-underline-offset: 3px; } .sr-bk-opt.is-aus { opacity: .55; cursor: not-allowed; } .sr-bk-opt.is-aus em { text-decoration: line-through; } /* Die schwebende Summe (08.10.2026): klebt am unteren Rand des Scrollbereichs, solange das Formular im Bild ist; tritt zurück, wenn der Fuß sichtbar ist (Skript setzt .is-weg). */ /* Stil (Ansage Sven 08.10.2026: „gib dem schwarzen buchungsbetrag-hover einen cooleren hintergrund"): dunkles Glas wie das Bedienfeld beim Nachspielen, links die Schrägstriche der Marke („RIDE // LEARN") in Rot, die nach rechts auslaufen, eine feine Lichtkante oben und ein roter Schein unter der Pille. */ .sr-bk-schwebe { position: sticky; bottom: .6rem; z-index: 40; display: flex; align-items: center; gap: .9rem; margin-top: 1rem; padding: .55rem .6rem .55rem 1.25rem; border-radius: 999px; color: #fff; isolation: isolate; overflow: hidden; background: radial-gradient(120% 180% at 0% 50%, rgba(218, 31, 37, .32), transparent 55%), linear-gradient(100deg, rgba(14, 16, 20, .9), rgba(30, 34, 41, .82) 60%, rgba(14, 16, 20, .9)); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 28px -10px rgba(20, 22, 26, .7), 0 8px 24px -14px rgba(218, 31, 37, .55); transition: opacity .25s ease, transform .25s ease; } .sr-bk-schwebe::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(218, 31, 37, .55) 0 3px, transparent 3px 11px); -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .35) 3.2rem, transparent 7rem); mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .35) 3.2rem, transparent 7rem); } .sr-bk-schwebe span { font: 800 .62rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); } .sr-bk-schwebe b { margin-right: auto; font: 900 1.3rem/1 var(--font-display, var(--font-body)); font-style: italic; letter-spacing: -.01em; text-shadow: 0 0 18px rgba(218, 31, 37, .45); } .sr-bk-schwebe .sr-bk-go { width: auto; padding: .7rem 1.1rem; } .sr-bk-schwebe.is-weg { opacity: 0; transform: translateY(8px); pointer-events: none; } /* Schmal (Ansage Sven 09.11.2026: „button warenkorb abgeschnitten“): Betrag und Knopf werden kleiner, der Knopf schrumpft nicht und bricht höchstens auf zwei Zeilen um — so passt die Leiste ins Telefonfenster. „Gesamt“ bleibt, nur kleiner (#914 Punkt 20, Sven: „beheben“ — das Wort zu streichen war nicht verlangt). */ @media (max-width: 560px) { .sr-bk-schwebe { gap: .5rem; padding-left: .9rem; } .sr-bk-schwebe span { font-size: .52rem; letter-spacing: .06em; } .sr-bk-schwebe b { font-size: 1.1rem; } .sr-bk-schwebe .sr-bk-go { flex: none; padding: .6rem .85rem; font-size: .72rem; } } /* Auf dem Telefon untereinander: 230px Liste neben Feldern gaebe zwei zu schmale Spalten. */ @media (max-width: 860px) { .sr-bk-cols { grid-template-columns: 1fr; } .sr-bk-sum { margin-left: 0; text-align: left; } .sr-bk-go { width: 100%; justify-content: center; } } /* Angehakt ist ROT — in diesem ganzen Design, nicht je Formular. Die Haken standen sonst im Blau des Betriebssystems, und das ist die einzige Farbe auf der Seite, die weder von uns kommt noch auf jedem Rechner dieselbe ist. Einzelne Formulare hatten es schon gesetzt; hier gilt es fuer alle, auch fuer die, die noch kommen. */ body.design-serienleiste input[type="checkbox"], body.design-serienleiste input[type="radio"] { accent-color: var(--sr-red); } /* Die Team-Tafel: ihre Ueberschrift steht im Inhalt, die Kopfzeile traegt nur das Kreuz — sie darf darum keinen Platz fuer eine Zeile beanspruchen, die es nicht gibt. */ .sr-teams-head { min-height: 0; margin-bottom: 0; } .sr-teams-head .sr-close { margin-left: auto; } /* Die Inhaltsbreite kommt vom Kasten, nicht noch einmal von innen. */ .sr-teams .sl-wrap { max-width: none; padding: 0; } .sr-teams .sl-section-title { margin-top: 0; } /* ── Die Teamseite ──────────────────────────────────────────────────────── Drei Bloecke: die Mannschaft als Karten, darunter nebeneinander „Om holdet" und die Bilder. Die Klassen heissen tm-, nicht sr-: die Vorlage gehoert der Teamseite und nicht diesem Design — sie hatte bis zum 23.09.2026 nur gar keine Stile, weshalb die Bilder in voller Breite untereinander standen. */ .tm-back { margin: 0; font: 700 .72rem/1 var(--font-body); } .tm-back a { color: var(--sr-ink-3); text-decoration: none; } .tm-back a:hover { color: var(--sr-red); } .tm-kicker { margin: .9rem 0 0; font: 800 .62rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--sr-red); } .tm-titel { margin: .35rem 0 0; font: 900 1.9rem/1.02 var(--font-body); font-style: italic; text-transform: uppercase; letter-spacing: -.02em; } /* Jeder Block ist eine eigene helle Flaeche auf dem Papier der Tafel — so liest sich die Seite als drei Auskuenfte und nicht als eine lange Spalte. */ .tm-block { margin-top: 1.2rem; padding: 1.1rem 1.2rem; border-radius: 12px; background: #fff; border: 1px solid var(--sr-line); } .tm-block-head { display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; font: 900 1rem/1 var(--font-body); font-style: italic; text-transform: uppercase; letter-spacing: -.01em; } .tm-block-head svg { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--sr-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .tm-leer { margin: 0; font-size: .82rem; color: var(--sr-ink-3); } /* Rekorde und letzte Ergebnisse auf der Teamseite (15.10.2026). */ .tm-block-head-zweit { margin-top: 1.5rem; } .tm-tabelle { overflow-x: auto; } .tm-tabelle table { width: 100%; border-collapse: collapse; font-size: .86rem; } .tm-tabelle th, .tm-tabelle td { padding: .45rem .6rem; text-align: left; border-bottom: 1px solid var(--sr-line); white-space: nowrap; } .tm-tabelle th { font: 800 .66rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--sr-ink-3); } .tm-zeit { font-variant-numeric: tabular-nums; font-weight: 700; } .tm-rekorde-hinweis { margin-top: .8rem; } /* Die Mannschaft: so viele Karten nebeneinander, wie hineinpassen. */ .tm-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .7rem; } .tm-mem { overflow: hidden; border-radius: 10px; background: var(--sr-ground-2); border: 1px solid var(--sr-line); transition: border-color .15s ease, transform .15s ease; } .tm-mem:hover { border-color: var(--sr-line-2); transform: translateY(-2px); } /* Der Kapitaen traegt den roten Rand — dieselbe Auskunft wie die Krone, fuer den Blick aus der Entfernung. */ .tm-mem.is-kapitaen { border-color: rgba(218, 31, 37, .45); } .tm-mem-bild { position: relative; aspect-ratio: 4 / 3; background: var(--sr-paper); } .tm-mem-bild img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Ohne Bild die Anfangsbuchstaben auf dunklem Grund — nie eine leere graue Flaeche, die wie ein nicht geladenes Bild aussieht (dieselbe Regel wie bei den Teamkacheln). */ .tm-mem-bild.is-leer { display: grid; place-items: center; background: #16181c; } .tm-mem-bild.is-leer span { font: 900 1.5rem/1 var(--font-body); color: rgba(255, 255, 255, .35); letter-spacing: .02em; } .tm-mem-txt { padding: .6rem .7rem .7rem; } .tm-mem-name { display: flex; align-items: center; gap: .35rem; margin: 0; min-width: 0; } .tm-mem-name b { font: 800 .82rem/1.2 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tm-privat { position: absolute; left: .5rem; top: .5rem; font: 800 .66rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; font-style: normal; padding: .25rem .45rem; border-radius: .3rem; background: rgba(0, 0, 0, .72); color: #fff; } .tm-mem-nr { flex: none; font: 800 .74rem/1 var(--font-body); color: var(--sr-ink-3); } .tm-krone { width: 14px; height: 14px; flex: none; margin-left: auto; fill: none; stroke: var(--sr-red); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .tm-mem-rolle { margin: .2rem 0 0; font: 400 .72rem/1.2 var(--font-body); color: var(--sr-ink-3); } .tm-mem-land { display: flex; align-items: center; gap: .35rem; margin: .45rem 0 0; font: 600 .72rem/1.2 var(--font-body); color: var(--sr-ink-2); } /* „Om holdet" und die Bilder nebeneinander — der Text etwas schmaler, weil Bilder Platz brauchen und Text nicht endlos breit laufen soll. */ .tm-unten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.2rem; align-items: start; } .tm-unten > .tm-block { margin-top: 1.2rem; } .tm-desc { font-size: .84rem; line-height: 1.65; color: var(--sr-ink-2); } .tm-desc p { margin: 0 0 .7rem; } .tm-desc p:last-child { margin-bottom: 0; } /* Die Kennzahlen: Zeichen, Zahl, Wort — in einer Reihe, die umbricht. */ .tm-zahlen { display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--sr-line); } .tm-zahlen > div { display: flex; align-items: center; gap: .6rem; } .tm-zahlen svg { width: 21px; height: 21px; flex: none; fill: none; stroke: var(--sr-ink-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .tm-zahlen dt { font: 900 1.05rem/1 var(--font-body); letter-spacing: -.02em; } .tm-zahlen dd { margin: .2rem 0 0; font: 400 .68rem/1 var(--font-body); color: var(--sr-ink-3); } .tm-motto { margin: 1.1rem 0 0; padding-left: .9rem; border-left: 3px solid var(--sr-red); font: 400 .92rem/1.4 var(--font-body); font-style: italic; color: var(--sr-ink); } .tm-motto::before { content: "\201C"; } .tm-motto::after { content: "\201D"; } /* Eines gross, vier daneben. Das grosse steht links ueber beide Zeilen — so wie der Entwurf es zeigt und so, wie ein Bild aussieht, das jemand ausgesucht hat. */ .tm-galerie { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-auto-rows: 1fr; gap: .5rem; } .tm-galerie-gross { grid-row: span var(--tm-zeilen, 2); } /* Ein einziges Bild nimmt die ganze Breite — zwei leere Spalten daneben saehen aus, als fehle etwas. */ .tm-galerie.is-solo { grid-template-columns: 1fr; } .tm-galerie.is-solo .tm-galerie-gross { aspect-ratio: 16 / 9; } /* 16:9 wie die Teamkacheln der Liste und wie die Vorschau in der Teamverwaltung: EIN Zuschnitt fuer dasselbe Bild an allen drei Stellen (Auftrag 23.09.2026). Vorher zeigte die Liste breit, die Detailseite fast quadratisch und das Konto quadratisch — drei Ausschnitte desselben Fotos, und keiner sagte, was die anderen zeigen. */ .tm-galerie-gross, .tm-galerie-klein { position: relative; display: block; overflow: hidden; border-radius: 8px; background: var(--sr-paper); aspect-ratio: 16 / 9; } .tm-galerie-gross { aspect-ratio: auto; } .tm-galerie-gross img, .tm-galerie-klein img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .tm-galerie-gross:hover img, .tm-galerie-klein:hover img { transform: scale(1.04); } /* Die Zahl der uebrigen Bilder liegt AUF der letzten Kachel, nicht daneben: sie gehoert zu dem, was sie verdeckt. */ .tm-galerie-mehr { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20, 22, 26, .55); color: #fff; font: 900 1.1rem/1 var(--font-body); letter-spacing: -.02em; } /* Das Formular im Konto: Jahr und Wahlspruch stehen nebeneinander, beides sind kurze Angaben und untereinander waeren sie zwei fast leere Zeilen. */ .tm-form-paar { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; } /* ── Bestaetigung nach dem Buchen ─────────────────────────────────────── Eine Karte, die dort steht, wo eben das Formular stand: gross genug, dass man sie nicht uebersieht, ruhig genug, dass sie nicht wie eine Warnung wirkt. */ .sr-gebucht { position: relative; text-align: center; padding: 3.4rem 1.2rem 3.6rem; /* Der Kasten hat Innenabstand; die Strecke soll bis an seine Kanten laufen. Die negativen Raender holen genau diesen Abstand wieder heraus — sie haengen also an ihm und sind keine geratenen Zahlen. */ margin: 0 calc(var(--sr-block-pad-x, 1.25rem) * -1) calc(var(--sr-block-pad-b, 1.35rem) * -1); border-radius: 0 0 14px 14px; overflow: hidden; background: #fff url('https://www.zenergyracing.dk/v2/public/images/bestaetigung-strecke.webp?v=1789850867') center bottom / cover no-repeat; } /* Ein heller Schleier darueber: das Bild ist hell, die Schrift steht trotzdem auf ihm, und ohne ihn kaempft „1 Fahrer · Asserballe" gegen die Leitplanken im Hintergrund. */ .sr-gebucht::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 50% 45%, rgba(255, 255, 255, .92), rgba(255, 255, 255, .55) 70%, rgba(255, 255, 255, .25)); } /* Kein Fokusrahmen um die ganze Tafel. Sie traegt tabindex="-1", weil das Skript den Fokus nach dem Bildlauf dorthin setzt — fuer Vorlesewerkzeuge, damit sie nicht weiter oben weiterlesen, waehrend der Bildschirm unten steht. Firefox und Safari zeichnen um so einen Fokus einen dunklen Ring; er folgt den runden Ecken und sieht aus wie ein schwarzer Rand um die Bestaetigung (gemeldet am 21.09.2026). Anfassbar ist die Tafel nicht (tabindex="-1" heisst: nicht mit der Tabulatortaste erreichbar), es geht also kein Wegweiser verloren. */ .sr-gebucht:focus, .sr-gebucht:focus-visible { outline: none; } .sr-gebucht > * { position: relative; z-index: 1; } .sr-gebucht-zu { position: absolute; top: 0; right: 0; margin: 0; } /* Haken und Warenkorb nebeneinander: der eine sagt „hat geklappt", der andere „und zwar dorthin". Die Zahl am Korb ist der Stand NACH dieser Buchung. */ .sr-gebucht-zeichen { display: inline-flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; } .sr-gebucht-haken { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(26, 127, 75, .1); color: #1a7f4b; } .sr-gebucht-haken svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .sr-gebucht-korb { position: relative; color: var(--sr-ink); } .sr-gebucht-korb svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sr-gebucht-korb b { position: absolute; top: -6px; right: -8px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 .25rem; border-radius: 999px; background: var(--sr-red); color: #fff; font: 800 .62rem/1 var(--font-body); } .sr-gebucht h3 { margin: 0; font: 900 1.45rem/1.1 var(--font-body); text-transform: uppercase; letter-spacing: -.02em; } .sr-gebucht-was { margin: .45rem 0 0; font: 700 .8rem/1.4 var(--font-body); color: var(--sr-ink-2); } .sr-gebucht-satz { margin: .2rem 0 0; font: 400 .8rem/1.4 var(--font-body); color: var(--sr-ink-3); } .sr-gebucht-hinweis { display: inline-block; margin: .9rem 0 0; padding: .6rem .9rem; border-radius: 8px; background: rgba(218, 31, 37, .06); color: var(--sr-red); font: 600 .78rem/1.4 var(--font-body); max-width: 52ch; } .sr-gebucht-go { margin-top: 1.4rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; } .sr-gebucht-kurv { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; padding: .95rem 1.7rem; border-radius: 999px; background: var(--sr-red); color: #fff; font: 800 .8rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; } .sr-gebucht-kurv:hover { background: var(--sr-red-2); } .sr-gebucht-mehr { display: inline-flex; align-items: center; text-decoration: none; padding: .95rem 1.7rem; border-radius: 999px; border: 1.5px solid var(--sr-ink-2); color: var(--sr-ink-2); font: 800 .8rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; } .sr-gebucht-mehr:hover { border-color: var(--sr-ink); color: var(--sr-ink); } .sr-gebucht-kurv svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Die Reihe darunter: Vorzeile, darunter Satz und rechts der Weg zum ganzen Kalender. Die grosse Frage ist seit 22.10.2026 weg (Ansage Sven) — der Satz steht darum links und in voller Breite statt rechtsbuendig neben ihr. */ .sr-weiter-vor { margin: 0 0 .2rem; font: 800 .62rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--sr-ink-2); } .sr-weiter-vor span { color: var(--sr-red); margin-right: .35rem; } .sr-weiter-head { align-items: baseline; justify-content: space-between; flex-wrap: wrap; } .sr-weiter-head .sr-qual { flex: 1 1 auto; text-align: left; } /* ── Mit Profil fortfahren ────────────────────────────────────────────── Ein Knopf, keine Tafel. Die geworbene Tafel mit Ueberschrift, Unterzeile, drei Vorteilen und zwei Knoepfen kostete rund 150 px ueber dem Formular — fuer eine Entscheidung, die man in zwei Woertern trifft (Ansage vom 24.09.2026). SEIT DEM 27.09.2026 STEHT ER IM FORMULAR, direkt ueber „Fornavn", und darum KLEINER (Ansage: „fortseat med profil soll direkt ueber ‚fornavn' angezeigt werden, aber kleiner"). Neben der Ueberschrift war er das zweite Angebot der Seite; hier ist er eine Abkuerzung an dem Feld, das er erspart. Kein `justify-self` mehr: er steht am linken Rand seiner Spalte, wie alles andere im Formular. */ .sr-bk-login { align-self: start; margin-bottom: .55rem; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; padding: .28rem .6rem .28rem .34rem; border-radius: 999px; border: 1px solid rgba(218, 31, 37, .22); background: rgba(218, 31, 37, .06); color: var(--sr-red); font: 800 .68rem/1 var(--font-body); white-space: nowrap; transition: background .18s ease, border-color .18s ease; } .sr-bk-login:hover { background: rgba(218, 31, 37, .12); border-color: rgba(218, 31, 37, .4); } .sr-bk-login-ico { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: rgba(218, 31, 37, .14); flex: none; } .sr-bk-login-ico svg { width: 12px; height: 12px; fill: currentColor; } /* Der Zaehler nennt die Obergrenze mit — „1" allein sagt nicht, ob noch einer dazu darf. */ .sr-bk-count { font: 400 .72rem/1 var(--font-body); color: var(--sr-ink-3); } .sr-bk-count b { font-weight: 800; color: var(--sr-ink); } /* Der Hinzufuegen-Knopf: gestrichelt, als naechster — noch leerer — Reiter NEBEN den vorhandenen. Er stand bis zum 25.09.2026 in voller Breite unter einer Liste; die Liste ist eine Leiste geworden, und volle Breite warf ihn dort in eine eigene Zeile und den Zaehler gleich hinterher. Dieselbe Hoehe wie ein Reiter (.sr-bk-row), damit die Leiste eine Kante hat und nicht zwei. */ body.design-serienleiste .sr-bk-add { display: inline-flex; align-items: center; gap: .5rem; width: auto; margin-top: 0; padding: .6rem .9rem; cursor: pointer; border: 1px dashed var(--sr-line-2); border-radius: 10px; background: none; color: var(--sr-ink-2); font: 700 .76rem/1 var(--font-body); letter-spacing: 0; text-transform: none; transition: border-color .15s ease, color .15s ease; } body.design-serienleiste .sr-bk-add:hover { border-color: var(--sr-red); color: var(--sr-red); } body.design-serienleiste .sr-bk-add span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sr-ground-2); font-weight: 800; } /* Beschriftungen UEBER den Feldern. Ein Platzhalter verschwindet beim Tippen; wer sich danach fragt, was hineingehoert, muesste das Feld wieder leeren. */ body.design-serienleiste .rb-feld, body.design-serienleiste .rb-feld-label { display: block; } body.design-serienleiste .rb-feld > span, body.design-serienleiste .rb-feld-label { display: block; margin-bottom: .3rem; font: 800 .64rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--sr-ink-2); } body.design-serienleiste .rb-feld i, body.design-serienleiste .rb-feld-label i, body.design-serienleiste .sr-bk-legend i { color: var(--sr-red); font-style: normal; } /* Die Startnummern-Zeile: Ueberschrift, darunter Tafel + Text + Auswahlknopf. */ body.design-serienleiste .rb-number-zeile { display: block; margin-top: 1.1rem; } body.design-serienleiste .rb-number-kopf { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; font: 800 .64rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--sr-ink-2); } body.design-serienleiste .rb-number-kopf i { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--sr-line-2); color: var(--sr-ink-3); font: 700 .58rem/1 var(--font-body); font-style: normal; letter-spacing: 0; text-transform: none; } /* Zwei Spalten: links die Startnummer mit ihrer Ueberschrift und der Tafel, rechts die eigene Transpondernummer (bis zum 27.09.2026 stand dort der DMU-Rahmen). Beide Klassen im Selektor, weil die Sammelregel weiter oben (.sr-bk-pane .rb-number) drei Klassen stark ist und die Zeile sonst mittig ausrichtet — die rechte Spalte sass dadurch auf halber Hoehe der Tafel statt oben an ihrer Kante. */ body.design-serienleiste .rb-number.rb-number-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start; } body.design-serienleiste .rb-number-links { display: grid; justify-items: start; } body.design-serienleiste .rb-number-links > .rb-number-kopf { margin-bottom: .5rem; } /* Die rechte Spalte nimmt den Rest der Zeile — das Feld darin nicht. Sieben Ziffern in einem Kasten von 600 px (so breit wird die Spalte auf der Paketseite, die keine Tagesspalte daneben hat) sehen aus, als gehoerte ein Satz hinein. 13 rem ist dasselbe Mass, an dem weiter unten der Umbruch aufs Telefon haengt. */ body.design-serienleiste .rb-number-zeile .rb-feld input { max-width: 13rem; } /* Am Telefon steht die Transpondernummer UNTER der Tafel und nicht daneben. Gemessen und nicht geschaetzt: bei 375 px Fensterbreite blieben ihr neben der Tafel 148 px, und darin bricht schon die Beschriftung „Egen transpondernummer" dreimal um. Sie braucht rund 13 rem; unter 560 px Fensterbreite bekommt sie die neben der Tafel nicht mehr. */ @media (max-width: 560px) { body.design-serienleiste .rb-number.rb-number-zeile { grid-template-columns: 1fr; } /* Und die beiden Feldzeilen darueber. Gemessen bei 375 px: „Vorname" und „Nachname" bekamen je 130 px, „Gruppe" 105 — die Auswahl brach darin mitten im Wort um. Das Buchungsfenster stapelte laengst (`.sr-inline`); der Fahrerblock auf der Terminseite nicht, und seit dem 25.09.2026 traegt ihn auch die Paketseite. */ body.design-serienleiste .sr-bk-pane .rb-guest, body.design-serienleiste .sr-bk-pane .rb-selects { grid-template-columns: 1fr; } body.design-serienleiste .sr-bk-pane .rb-selects.rb-selects-drei { grid-template-columns: 1fr 1fr; } body.design-serienleiste .sr-bk-pane .rb-selects.rb-selects-drei .rb-startnummer { grid-column: 1 / -1; } } /* ── Die Feldbeschriftungen tragen die Schrift von „Ekstra" ────────────── Ansage vom 25.09.2026 („und jetzt vorname, name usw im font von 'ekstra'"). Sie standen als kleine gesperrte Versalien da — die Sprache von Kleingedrucktem, nicht die der Tafel. AN ZWEI STELLEN, weil die Beschriftungen an zwei Stellen gesetzt werden: die Felder selbst und die Startnummern-Zeile. Bis zum 27.09.2026 waren es vier — die beiden Felder im DMU-Rahmen und seine Ueberschrift sind mit ihm entfallen. IM BUCHUNGSWEG und nicht ueberall — aber in BEIDEN Wegen: die Paketseite haengt den Block in `sr-inline`, die Terminseite in `sr-bk-pane`. Nur einen davon zu aendern hiesse, dass zwei Wege, dasselbe zu kaufen, wieder verschieden aussehen — genau das, was die Entscheidung vom 10.09.2026 abgeschafft hat. Profil und Kasse tragen denselben Block und bleiben, wie sie sind. */ body.design-serienleiste .sr-inline .rb-feld > span, body.design-serienleiste .sr-inline .rb-feld-label, body.design-serienleiste .sr-inline .rb-number-kopf, body.design-serienleiste .sr-bk-pane .rb-feld > span, body.design-serienleiste .sr-bk-pane .rb-feld-label, body.design-serienleiste .sr-bk-pane .rb-number-kopf { font: 900 .82rem/1 var(--font-body); font-style: italic; letter-spacing: -.01em; text-transform: uppercase; color: var(--sr-ink); } /* Der Tag traegt das Kalenderblatt der Terminliste, daneben Wochentag und Preis. */ .sr-bk-day { display: grid; grid-template-columns: auto 38px 1fr; gap: .6rem; align-items: center; } .sr-bk-day .sr-ev-date { width: 38px; } .sr-bk-day .sr-ev-date b { font-size: 1rem; } /* Der Tag: erst WELCHER, dann was er kostet. */ .sr-bk-day-text b { display: block; font: 800 .74rem/1.15 var(--font-body); text-transform: uppercase; } .sr-bk-day-text em { display: block; margin-top: .15rem; font: 400 .72rem/1.2 var(--font-body); font-style: normal; color: var(--sr-ink-2); } .sr-bk-opt em { margin-left: auto; } /* Extras mit Erklaerzeile: was der Haken bedeutet, steht darunter und nicht im Kopf. */ .sr-bk-opt { align-items: flex-start; } .sr-bk-opt span i { display: block; margin-top: .12rem; font: 400 .68rem/1.35 var(--font-body); font-style: normal; color: var(--sr-ink-3); } /* Produkt- und Extra-Beschreibungen: eine Zeile, dann „… mehr lesen“, animiert auf (Ansage Sven 01.11.2026; Skript layouts.public-v3-8 baut Text und Knopf, misst und fährt die Höhe). Geschlossen: eine Zeile mit Auslassungspunkten, der Knopf dahinter; offen: der ganze Text, „weniger“ am Ende. Ist der Text nicht länger als eine Zeile, kein Knopf. */ .sr-mehr[hidden] { display: none !important; } /* Die Zeile darf nicht breiter werden als ihr Platz: sonst wüchse die umgebende Spalte mit dem ungebrochenen Text. */ :has(> .sr-mehr) { min-width: 0; } /* Ein
ist von Haus aus mindestens so breit wie sein Inhalt — mit dem ungebrochenen Text also zu breit. */ fieldset:has(.sr-mehr), .sr-bk-detail:has(.sr-mehr) { min-width: 0; } /* Ebenso Raster- und Flex-Kinder (Transponderwahl, Haken-Zeilen): ohne min-width 0 dehnt der ungebrochene Text die Spalte. */ label:has(.sr-mehr) { min-width: 0; } .sr-mehr { max-width: 100%; } .sr-mehr.zu { display: flex !important; align-items: baseline; gap: .35em; } .sr-mehr.zu > .sr-mehr-text { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-mehr.zu > .sr-mehr-text > * { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-mehr.zu > div.sr-mehr-text { max-height: 1lh; } .sr-mehr.zu > div.sr-mehr-text > * + * { display: none; } .sr-mehr:not(.zu) > span.sr-mehr-text { display: inline; } .sr-mehr-knopf { flex: none; margin: 0 0 0 .35em; padding: 0; border: 0; background: none; font: inherit; font-size: .95em; font-weight: 600; color: var(--sr-ink-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; } .sr-mehr.zu > .sr-mehr-knopf { margin-left: 0; } .sr-mehr-knopf:hover { color: var(--sr-ink); } .sr-mehr.kurz > .sr-mehr-knopf { display: none; } div.sr-mehr:not(.zu) > .sr-mehr-knopf { display: inline-block; margin: .3em 0 0; } /* ── Warenkorb in der Schrift des Buchungsformulars (Ansage Sven 19.10.2026: „ich möchte den überschriften-stil und text-stil des buchungsformulars auch im warenkorb haben") ────────────────────────────────────────────────────── Kartenkoepfe, Zwischenueberschriften und Feldbeschriftungen wie „Vælg dage"/„Fornavn" (.sr-bk-legend), Felder in der Groesse des Formulars, Hinweise wie die Erklaerzeile unter einem Extra, Haken-Kaesten wie ein Extra. Nur unter .sr-kurv-wrap — die Kasse auf eigener Seite und das Profil bleiben, wie sie sind. */ /* Drei Stufen, damit die Ordnung sichtbar bleibt (Ansage Sven 19.10.2026: „nun sind aber alle texte/ titel recht gleichartig z.b. motorrad und marke, da ist marke von der hierarchie motorrad untergeordnet"): 1. Kartenkopf (Fahrerangaben, Bestellangaben, Bezahlung) — eine Stufe groesser; 2. Gruppe (Startnummer, Notfallkontakt, Motorrad, Persönliche Angaben, Teilnehmer) — wie „Vælg dage"; 3. Feld (Name, Telefon, Marke, Modell, Vorname …) — ruhig: halbfett, normale Schreibung, grau. */ body.design-serienleiste .sr-kurv-wrap .sr-kasse-karte-kopf h3 { font: 900 1rem/1.1 var(--font-body); font-style: italic; letter-spacing: -.01em; text-transform: uppercase; color: var(--sr-ink); } body.design-serienleiste .sr-kurv-wrap .sr-kurv-riders-head, body.design-serienleiste .sr-kurv-wrap .sr-kasse-legende { font: 900 .82rem/1.1 var(--font-body); font-style: italic; letter-spacing: -.01em; text-transform: uppercase; color: var(--sr-ink); } body.design-serienleiste .sr-kurv-wrap .sl-field .lbl { font: 600 .74rem/1.2 var(--font-body); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--sr-ink-2); } body.design-serienleiste .sr-kurv-wrap .sl-field .lbl em, body.design-serienleiste .sr-kurv-wrap .sl-field .lbl i, body.design-serienleiste .sr-kurv-wrap .sr-kasse-legende i { font-style: normal; } body.design-serienleiste .sr-kurv-wrap .sl-field .lbl i, body.design-serienleiste .sr-kurv-wrap .sr-kasse-legende i { color: var(--sr-red); } body.design-serienleiste .sr-kurv-wrap .sl-field .lbl em { font-weight: 400; color: var(--sr-ink-3); } /* Felder: Schrift wie im Formular. Auf Touch-Geraeten bleiben 16px (sonst zoomt der Browser hinein). */ @media (pointer: fine) { body.design-serienleiste .sr-kurv-wrap .sl-input { font-size: .82rem; } } /* Hinweise wie die Erklaerzeile unter „Lej transponder". */ body.design-serienleiste .sr-kurv-wrap .sr-kurv-mail-hint, body.design-serienleiste .sr-kurv-wrap .sr-kurv-angaben-hinweis, body.design-serienleiste .sr-kurv-wrap .sr-kasse-bank-hinweis, body.design-serienleiste .sr-kurv-wrap .sr-kasse-konto-haken span { font: 400 .68rem/1.35 var(--font-body); color: var(--sr-ink-3); } /* Haken-Kaesten (Konto anlegen, Bankueberweisung, DMU, „gilt für alle") wie ein Extra: Titel 600 .76rem. */ body.design-serienleiste .sr-kurv-wrap .sr-kasse-konto-haken b { margin-bottom: .12rem; font: 600 .76rem/1.2 var(--font-body); color: var(--sr-ink); } body.design-serienleiste .sr-kurv-wrap .sr-kurv-haken span { font: 600 .76rem/1.2 var(--font-body); color: var(--sr-ink); } .sr-bk-opt em { white-space: nowrap; padding-top: .1rem; } /* Der Fuss: die Frage, die kurz vor dem Bezahlen aufkommt — ist das sicher, bin ich gebunden? */ .sr-bk-safe { display: flex; align-items: center; gap: .6rem; margin: 0; flex: 1 1 260px; } .sr-bk-safe svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--sr-ink-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .sr-bk-safe b { display: block; font: 700 .76rem/1.2 var(--font-body); } .sr-bk-safe span { font: 400 .7rem/1.35 var(--font-body); color: var(--sr-ink-3); } /* ── Buchungsformular nachgeschärft (Empfehlung Sven 31.10.2026) ─────────────────────────────────────────────────── Gliederung 1 Fahrer · 2 Tage · 3 Extras in EINEM Formular, Tage als deutliche Karten mit Zähler, Transponder als Wahl, Preisübersicht über dem Abschluss, Formulartext 13–14 px. */ /* Die Leiste „1 Kører · 2 Dage · 3 Ekstra“ (.sr-bk-trin) ist seit 01.11.2026 entfernt (Ansage Sven: „diese pillen aus dem buchungsformular wieder entfernen“). */ /* Die Überschriften der drei Teile mit derselben Nummer. */ .sr-bk-pane { counter-reset: bk-schritt; } .sr-bk-schritt { display: flex; align-items: center; gap: .5rem; } .sr-bk-schritt::before { counter-increment: bk-schritt; content: counter(bk-schritt); display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--sr-ink); color: #fff; font: 800 .7rem/1 var(--font-body); font-style: normal; } .sr-bk-group > .sr-bk-schritt, .sr-bk-pane-felder > .sr-bk-schritt { margin-bottom: .75rem; } /* Tage: größere Karten, gewählt = rote Kontur und heller roter Grund, Haken rechts. */ .sr-bk-day, .sr-bk-paket { position: relative; min-height: 60px; padding: .75rem 2.6rem .75rem .85rem; border-radius: 11px; } .sr-bk-day input, .sr-bk-paket input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--sr-red); } .sr-bk-day .sr-ev-date { width: 44px; } .sr-bk-day { grid-template-columns: auto 44px 1fr; } .sr-bk-day:has(input:checked), .sr-bk-paket:has(input:checked) { border-color: var(--sr-red); background: rgba(218, 31, 37, .07); box-shadow: inset 0 0 0 1px var(--sr-red); } .sr-bk-day:has(input:checked)::after, .sr-bk-paket:has(input:checked)::after { content: "✓"; position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sr-red); color: #fff; font: 800 .75rem/1 var(--font-body); } .sr-bk-day-text b { font-size: .875rem; } .sr-bk-day-text em { font-size: .8125rem; color: var(--sr-ink-2); } .sr-bk-paket-preis { font-size: .875rem; } .sr-bk-tage-zahl { margin: .6rem 0 0; font: 800 .8125rem/1.2 var(--font-body); color: var(--sr-red); } /* Transponder: eigener oder mieten. */ /* Ohne Rahmen (Ansage Sven 08.11.2026: „rahmen um transponder entfernen“); die beiden Wahlkarten behalten ihren. */ .sr-bk-tp { margin-top: .5rem; padding: .75rem 0; border: 0; } .sr-bk-tp-kopf { margin: 0 0 .5rem; font: 800 .875rem/1.2 var(--font-body); color: var(--sr-ink); } .sr-bk-tp-kopf i { display: block; margin-top: .2rem; font: 400 .8125rem/1.4 var(--font-body); font-style: normal; color: var(--sr-ink-2); } .sr-bk-tp-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .sr-bk-tp-wahl .sr-bk-opt { margin-top: 0; } .sr-bk-tp-wahl input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--sr-red); } .sr-bk-tp-haken { display: none; } .sr-bk-tp [data-tp-teil] { display: none; } .sr-bk-tp[data-tp-wahl="egen"] [data-tp-teil="egen"], .sr-bk-tp[data-tp-wahl="leje"] [data-tp-teil="leje"] { display: flex; } .sr-bk-tp-halter { margin-top: .5rem; } @media (max-width: 560px) { .sr-bk-tp-wahl { grid-template-columns: 1fr; } } /* Lesbarkeit: Formularinhalte 13–14 px, kleine Metadaten bleiben kompakter. */ .sr-bk-opt span { font-size: .875rem; } .sr-bk-opt span i { font-size: .8125rem; color: var(--sr-ink-2); } /* Beschreibungen von Extras/Produkten wie die der Garage (Ansage Sven 02.11.2026): der Text steckt in einem span und erbte sonst die Titelschrift (.sr-bk-opt span = 600, 14 px). */ .sr-bk-opt span i .sr-mehr-text, .sr-bk-opt span i .sr-mehr-text * { font: inherit; color: inherit; } /* Dasselbe für jede Produktbeschreibung außerhalb des Buchungsformulars (Ansage Sven 02.11.2026: „gilt auch für die beschreibungen bei allen produkten“): Warenkorb, Serienanmeldung, Speedpakke, Merchandise. Mehrabsätzige Texte (Speedpakke, Merchandise) behalten ihren Zeilenabstand und ihre Zwischenüberschriften. */ i.sr-mehr { display: block; margin-top: .12rem; font: 400 .8125rem/1.35 var(--font-body); font-style: normal; color: var(--sr-ink-2); } i.sr-mehr .sr-mehr-text, i.sr-mehr .sr-mehr-text * { font: inherit; color: inherit; } .sr-pass-desc.sr-mehr, .prose.sr-mehr { font-family: var(--font-body); font-size: .8125rem; font-weight: 400; color: var(--sr-ink-2); } .prose.sr-mehr p, .prose.sr-mehr li { font-size: inherit; color: inherit; } .sr-bk-day em, .sr-bk-opt em { font-size: .8125rem; } .sr-bk-rabatt-hint { font-size: .8125rem; } .sr-bk-safe b { font-size: .875rem; } .sr-bk-safe span { font-size: .8125rem; } /* Preisübersicht über dem Abschluss. */ .sr-bk-oversigt { margin-top: 1.4rem; padding: .9rem 1.05rem; border-radius: 12px; background: #f6f7f9; border: 1px solid var(--sr-line); } .sr-bk-oversigt-kopf { margin: 0 0 .55rem; font: 900 .82rem/1 var(--font-body); font-style: italic; letter-spacing: -.01em; text-transform: uppercase; color: var(--sr-ink); } .sr-bk-oversigt-leer { margin: 0; font: 400 .8125rem/1.4 var(--font-body); color: var(--sr-ink-2); } .sr-bk-oversigt-liste { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; } .sr-bk-oversigt-liste li { display: flex; align-items: baseline; gap: 1rem; font: 400 .875rem/1.35 var(--font-body); color: var(--sr-ink-2); } .sr-bk-oversigt-liste li span { flex: 1 1 auto; min-width: 0; } .sr-bk-oversigt-liste li b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sr-ink); } .sr-bk-oversigt-liste li.is-fahrer { color: var(--sr-ink); font-weight: 700; } .sr-bk-oversigt-liste li.is-fahrer:not(:first-child) { margin-top: .4rem; padding-top: .55rem; border-top: 1px solid var(--sr-line); } .sr-bk-oversigt-liste li.is-fahrer b { font-weight: 800; } .sr-bk-oversigt-liste li.is-sub span, .sr-bk-oversigt-liste li.is-rabatt span { padding-left: .9rem; } .sr-bk-oversigt-liste li.is-rabatt b { color: #16a34a; } .sr-bk-oversigt + .sr-bk-foot { margin-top: 1rem; border-top: 0; padding-top: 0; } /* Die schwebende Summe steht hinter dem Fuß und belegt keinen Platz: am Ende liegt sie über dem Fuß (dort ist sie ausgeblendet), sonst klebt sie unten im Fenster. */ .sr-bk-foot + .sr-bk-schwebe { height: 3.6rem; box-sizing: border-box; margin-top: -3.6rem; } .sr-bk-schwebe b { white-space: nowrap; } /* Noch nicht fertig: der Knopf wirkt zurückgenommen; ein Klick sagt, was fehlt. */ .sr-bk-go.is-unfertig { background: #b9bcc3; } .sr-bk-go.is-unfertig:hover { background: #a8abb3; } @media (max-width: 860px) { /* Am Telefon untereinander wie Gruppe und Klasse darueber: zwei Spalten auf 390 px liessen weder den Feldern noch den Tagen genug Breite. */ .sr-bk-pane-cols { grid-template-columns: 1fr; gap: 1.1rem; } /* Und dann wieder nebeneinander, solange zwei Tage nebeneinander passen: die Spalte ist jetzt die ganze Breite, und untereinander wuerde eine Woche zur Tapetenbahn. */ .sr-bk-pane-cols .sr-bk-tage-spalte .sr-bk-days { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } } /* ── Die Startnummer als Tafel ────────────────────────────────────────── Statt eines Knopfes mit Text steht dort das Startnummernschild: leer, mit dem kleinen Zenergy-Kreis unten in der Mitte, der die Auswahl oeffnet. Ist eine Nummer gewaehlt, steht sie auf der Tafel — so wie sie spaeter am Motorrad steht. */ /* KEIN Knopfrahmen: die Tafel IST der Knopf. Darum weder Rand noch Flaeche noch Polster — was man sieht, ist das freigestellte Schild, und der Schatten gehoert ihm und nicht einem Kasten darum herum. */ /* MIT .rb-number davor, und das ist kein Schmuck: der Fahrerblock bringt eine eigene Regel fuer diesen Ausloeser mit (.rb-number .start-number-trigger-btn), und die ist spezifischer als eine einzelne Klasse. Ohne diesen Vorsatz behaelt die Tafel Rand, weisse Flaeche und Polster — sie saehe aus wie ein Knopf mit einem Bild darin statt wie ein Schild. */ body.design-serienleiste .rb-number .sr-plate, body.design-serienleiste .sr-plate { /* So hoch wie ein Eingabefeld der Zeile daneben — nicht groesser. Die Nummer ist eine Angabe unter mehreren; ein Schild in Postkartengroesse macht daraus den Hauptdarsteller einer Zeile, in der es um den Fahrer geht. */ /* min-width: 0 ist hier PFLICHT. Der Fahrerblock gibt diesem Ausloeser eine Mindestbreite von 4,5 rem mit (.rb-number .start-number-trigger-btn) — ohne das Zuruecksetzen bleibt die Tafel 72 px breit, egal was hier steht, und jede Korrektur an der Breite sieht im Quelltext richtig aus und bewirkt nichts. */ position: relative; display: block; width: 62px; min-width: 0; padding: 0; cursor: pointer; border: 0; background: none; box-shadow: none; line-height: 0; filter: drop-shadow(0 3px 8px rgba(11, 13, 16, .16)); transition: transform .22s cubic-bezier(.2, .7, .3, 1), filter .22s ease; } /* Beim Zeigen bewegt sie sich ein wenig — sie hebt sich an und kippt leicht, wie ein Schild, das man in die Hand nimmt. Wenig genug, dass nichts daneben verrutscht. */ body.design-serienleiste .sr-plate:hover, body.design-serienleiste .sr-plate:focus-visible { transform: translateY(-4px) rotate(-1.5deg) scale(1.02); filter: drop-shadow(0 10px 18px rgba(11, 13, 16, .22)); } body.design-serienleiste .sr-plate:active { transform: translateY(-1px) rotate(-.5deg) scale(.99); } .sr-plate-bg { display: block; width: 100%; height: auto; } @media (prefers-reduced-motion: reduce) { .sr-plate, .sr-plate:hover, .sr-plate:focus-visible, .sr-plate:active { transition: none; transform: none; } } /* Die Nummer sitzt im weissen Feld, nicht in der Mitte der ganzen Tafel: oben liegt der rote Kopf, unten der Kreis. */ /* Die Nummer sitzt im weissen Feld und WAECHST MIT DER TAFEL: in Prozent ihrer Breite und nicht in Pixeln, sonst passt sie nur bei genau einer Groesse. Bis zu drei Ziffern bleiben dabei innerhalb des weissen Felds — mehr vergibt der Nummernkreis nicht. */ /* Die Ziffern stehen MITTIG IN EINEM KASTEN und nicht an einer Oberkante. Mit `top: 38%` haengt die Lage an der Schriftgroesse: zweistellig ist gross, die Zeile damit hoeher, und die Ziffern rutschten nach unten — dreistellig (kleiner) sass richtig. Gemessen am Bild (440x433): das weisse Feld beginnt bei 17 % und laeuft spitz nach unten aus; der Kasten hier endet darum vor der Spitze. Die Mitte liegt bei 53 % der Tafelhoehe und nicht bei 50: das ist die Hoehe, auf der die DREISTELLIGEN standen, und die sassen richtig (Ansage vom 24.09.2026). Der Kasten ist 54 % hoch und fasst damit auch die grosse Schrift (45 %). */ .sr-plate-num { position: absolute; left: 6%; right: 6%; top: 26%; bottom: 20%; display: grid; place-items: center; /* Ein- und zweistellig darf gross sein — das ist der Normalfall am Motorrad. */ font: 900 clamp(1rem, 44cqw, 1.8rem)/1 var(--font-body); font-style: italic; letter-spacing: -.04em; color: var(--sr-ink); text-align: center; white-space: nowrap; } /* Dreistellig muss kleiner werden, sonst stossen die Ziffern an den Rand des weissen Felds. CSS kann Zeichen nicht zaehlen; die Zahl der Stellen steht darum als Attribut daneben und wird von einem Beobachter nachgefuehrt (siehe partials/start-number-trigger). */ .sr-plate-num[data-stellen="3"] { font-size: clamp(.8rem, 30cqw, 1.2rem); letter-spacing: -.06em; } /* Damit die Prozentangabe oben etwas hat, worauf sie sich bezieht. */ body.design-serienleiste .rb-number .sr-plate, body.design-serienleiste .sr-plate { container-type: inline-size; } /* Der Name der Sache fuer alle, die die Tafel nicht sehen koennen. */ .sr-plate-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Die Zeile darueber braucht die Ueberschrift nicht zweimal: die Tafel sagt selbst, was sie ist, und darunter steht ohnehin „Startnummer (valgfrit)". */ .rb-number:has(.sr-plate) { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } /* NICHT die Ueberschrift: sie gehoert UEBER die Tafel (Ansage vom 24.09.2026). Die Regel galt bisher jedem direkten und hat damit auch sie nach unten geschoben — gemeint war der Beschriftungstext der ungestapelten Fassung. */ .rb-number:has(.sr-plate) > span:not(.rb-number-kopf) { order: 2; } /* ── Die Startnummern-Auswahl ─────────────────────────────────────────── Dasselbe Fenster wie ueberall (partials/start-number-picker-modal) — hier nur mit dem Gesicht dieses Designs: Marke, grosser schraeger Titel, Zielflagge als Wasserzeichen, das Gitter als weisse Felder auf hellem Grund. Gewaehlt wird rot, Vergebenes ist grau und durchgestrichen. Alles unter body.design-serienleiste: das Fenster haengt an neun weiteren Stellen (Portal, Check-in-Desk, Backoffice, aeltere Designs) und muss dort bleiben, wie es war. */ body.design-serienleiste .start-number-modal-backdrop { background: rgba(15, 18, 22, .55); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); } body.design-serienleiste .start-number-modal-box { width: 560px; padding: 1.8rem 1.6rem 1.4rem; border-radius: 18px; background: var(--sr-paper); border: 1px solid var(--sr-line); box-shadow: 0 2px 8px rgba(11, 13, 16, .08), 0 30px 70px rgba(11, 13, 16, .28); overflow: hidden; } /* Die Zielflagge oben rechts (Karomuster) ist seit 04.11.2026 entfernt (Ansage Sven: Hintergrund mit Kästchen rechts oben). */ body.design-serienleiste .sr-num-eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; font: 700 .62rem/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--sr-ink-2); } body.design-serienleiste .sr-num-eyebrow span { width: 26px; height: 2px; border-radius: 1px; background: var(--sr-red); } body.design-serienleiste .start-number-modal-header { align-items: flex-start; margin-bottom: .1rem; } body.design-serienleiste .start-number-modal-header h3 { font: 900 2rem/1 var(--font-body); font-style: italic; text-transform: uppercase; letter-spacing: -.02em; color: var(--sr-ink); } body.design-serienleiste .start-number-modal-close { position: relative; flex: none; width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; border: 1px solid var(--sr-line); background: var(--sr-ground); color: var(--sr-ink); transition: none; } /* Das Kreuz absolut in der Mitte (Ansage Sven 04.11.2026: „das x ist nicht mittig“) — vorher teilte es sich das Raster mit dem unsichtbaren „ד-Zeichen und rutschte aus der Mitte. */ body.design-serienleiste .start-number-modal-close::before { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E") center/contain no-repeat; } body.design-serienleiste .start-number-modal-close:hover { background: var(--sr-red); border-color: var(--sr-red); color: #fff; } body.design-serienleiste .sr-num-lede { margin: .35rem 0 1.4rem; font: 400 .84rem/1.4 var(--font-body); color: var(--sr-ink-2); } body.design-serienleiste .start-number-band-nav { gap: 1.4rem; margin-bottom: .7rem; } body.design-serienleiste .start-number-band-arrow { width: 40px; height: 40px; border-radius: 50%; font-size: 1.1rem; border: 1px solid var(--sr-line); background: var(--sr-paper); color: var(--sr-ink); transition: none; } body.design-serienleiste .start-number-band-arrow:hover:not(:disabled) { border-color: var(--sr-red); color: var(--sr-red); } body.design-serienleiste .start-number-band-value { font: 900 1.15rem/1 var(--font-body); letter-spacing: -.01em; } body.design-serienleiste .start-number-band-dots { gap: .4rem; } body.design-serienleiste .start-number-band-dot { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; background: var(--sr-line-2); } body.design-serienleiste .start-number-band-dot.is-active { background: var(--sr-red); } /* :not([hidden]) IST HIER PFLICHT. Das Fenster haelt alle Baender im Markup und blendet die nicht gewaehlten mit dem hidden-Attribut aus — und ein display:grid ohne diese Einschraenkung schlaegt das Attribut, weil eine Klassenregel spezifischer ist als die Regel dahinter. Das Ergebnis war, dass alle neunhundert Nummern untereinander standen statt der gewaehlten hundert. Wer die Regel kuerzt, holt das zurueck. */ /* Engeres Raster, größere Zahlen (Ansage Sven 09.10.2026: „die nummern können grösser, die einzelnen felder haben zuviel platz zueinander“). */ body.design-serienleiste .start-number-grid:not([hidden]) { display: grid; grid-template-columns: repeat(10, 1fr); gap: .2rem; } body.design-serienleiste .start-number-cell { aspect-ratio: 1 / 1; display: grid; place-items: center; cursor: pointer; padding: 0; border: 1px solid var(--sr-line); border-radius: 8px; background: var(--sr-paper); color: var(--sr-ink); font: 700 .84rem/1 var(--font-body); letter-spacing: -.01em; /* kleiner (Ansage Sven 04.11.2026: „die nummern im auswahl modal sind zu gross“) */ transition: none; } /* „:not(.is-picked)": sonst gewinnt diese Regel gegen die gewaehlte Zahl weiter unten — gleiche Farbe fuer Schrift UND Flaeche, und die Zahl ist weg, solange der Zeiger darauf steht. Gemessen am 24.09.2026: beides #da1f25. Sie kam erst zurueck, wenn man die Maus wegnahm, und genau das sah aus, als haette der Klick nichts getan. */ body.design-serienleiste .start-number-cell:hover:not(:disabled):not(.is-picked):not(.is-own) { border-color: var(--sr-red); color: var(--sr-red); } /* Vergeben: grau, gedaempft und durchgestrichen — die Zahl bleibt lesbar, sie ist nur nicht mehr zu haben. Ein leeres Feld liesse raten, warum dort nichts steht. */ body.design-serienleiste .start-number-cell.is-taken, body.design-serienleiste .start-number-cell:disabled { position: relative; cursor: not-allowed; color: var(--sr-ink-4); background: var(--sr-ground); border-color: transparent; } body.design-serienleiste .start-number-cell.is-taken::after, body.design-serienleiste .start-number-cell:disabled::after { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: 1px; background: var(--sr-ink-4); transform: rotate(-32deg); } /* Die gewählte Nummer — die gerade angetippte wie die schon eingetragene eigene — ist rot mit weißer Schrift (Ansage Sven 09.10.2026). */ body.design-serienleiste .start-number-cell.is-picked, body.design-serienleiste .start-number-cell.is-own { background: var(--sr-red); border-color: var(--sr-red); color: #fff; font-weight: 900; } /* Ist eine andere angetippt, tritt die bisherige eigene Nummer zurück: rot umrandet, nicht mehr gefüllt. */ body.design-serienleiste .start-number-grid:has(.is-picked) .start-number-cell.is-own:not(.is-picked) { background: var(--sr-paper); color: var(--sr-red); font-weight: 700; } /* Ohne Bewegung (Ansage Sven 04.11.2026: „nimm die animationen aus dem nummernauswahl modal raus“): keine Lupe, kein Knall, kein Flug auf die Tafel, kein Wegsinken — Felder wechseln ihre Farbe sofort. */ body.design-serienleiste .start-number-cell { position: relative; transition: none; } body.design-serienleiste .sr-num-foot { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; margin: 1.3rem -1.6rem -1.4rem; padding: 1.1rem 1.6rem; border-top: 1px solid var(--sr-line); } body.design-serienleiste .sr-num-cancel { cursor: pointer; padding: .8rem 1.4rem; border-radius: 10px; border: 1px solid var(--sr-line-2); background: var(--sr-paper); color: var(--sr-ink); font: 700 .8rem/1 var(--font-body); } body.design-serienleiste .sr-num-cancel:hover { border-color: var(--sr-ink-3); } body.design-serienleiste .sr-num-ok { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; padding: .8rem 1.5rem; border: 0; border-radius: 10px; background: var(--sr-red); color: #fff; font: 800 .8rem/1 var(--font-body); transition: background .15s ease, opacity .15s ease; } body.design-serienleiste .sr-num-ok:hover:not(:disabled) { background: var(--sr-red-2); } /* Solange nichts gewaehlt ist, ist der Knopf sichtbar, aber nicht zu druecken: ein Knopf, der verschwindet, laesst den Leser suchen, wohin es weitergeht. */ body.design-serienleiste .sr-num-ok:disabled { opacity: .4; cursor: not-allowed; } body.design-serienleiste .sr-num-ok svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* Am Telefon kompakt (Ansage Sven 06.11.2026: „die blöcke sind nicht gleichmässig angeordnet, das bestätigungs button ist nicht zu sehen … evtl. brauchen wir mobil eine kompaktere auswahl“, auf Rückfrage „kompaktes 10×10-Gitter“): alle 100 Nummern eines Bereichs auf einen Blick statt 5 Spalten × 20 Reihen. Die waren höher als der Bildschirm, und weil die Box hier nicht scrollt (overflow: hidden oben), lag der Fuß mit „Bestätigen“ abgeschnitten darunter. Jetzt ist die Box eine Spalte, so hoch wie der Bildschirm höchstens erlaubt: Kopf und Fuß stehen fest, nur das Gitter scrollt — und das nur auf sehr niedrigen Bildschirmen. */ @media (max-width: 620px) { body.design-serienleiste .start-number-modal:not([hidden]) { padding: .75rem; } body.design-serienleiste .start-number-modal-box { width: 100%; padding: 1.1rem .9rem .9rem; display: flex; flex-direction: column; max-height: calc(100dvh - 1.5rem); } body.design-serienleiste .start-number-modal-header h3 { font-size: 1.35rem; } body.design-serienleiste .sr-num-eyebrow { margin-bottom: .45rem; } body.design-serienleiste .sr-num-lede { margin: .3rem 0 .8rem; font-size: .78rem; } body.design-serienleiste .start-number-band-nav { margin-bottom: .45rem; } body.design-serienleiste .start-number-band-arrow { width: 34px; height: 34px; } body.design-serienleiste .start-number-band-dots { margin-bottom: .6rem; } body.design-serienleiste .start-number-grids { flex: 1 1 auto; min-height: 0; overflow-y: auto; } body.design-serienleiste .start-number-grid:not([hidden]) { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .15rem; } /* width/height auto: das gemeinsame Fenster setzt unter 430 px feste 24-px-Felder (partials/start-number-picker-modal) — in den breiteren Spalten hier standen sie dann links in ihrer Spalte, das Gitter wirkte ungleichmäßig. */ body.design-serienleiste .start-number-cell { width: auto; height: auto; border-radius: 6px; font-size: .66rem; letter-spacing: -.03em; } body.design-serienleiste .sr-num-foot { flex: none; margin: .9rem -.9rem -.9rem; padding: .8rem .9rem; } body.design-serienleiste .sr-num-cancel, body.design-serienleiste .sr-num-ok { flex: 1 1 0; justify-content: center; padding: .75rem 1rem; } } /* ── Gruppen ────────────────────────────────────────────────────────────── */ .sr-grp-grid { display: grid; grid-template-columns: repeat(var(--sr-gcols, 4), 1fr); gap: .8rem; } /* Helles Blatt mit farbiger Ecke — die Farbe markiert die Gruppe, sie traegt nicht mehr die Schrift. Vier der Farben sind kraeftig, „Sort" ist fast weiss: darum steht der Name in der Gruppenfarbe, und wo die zu hell dafuer ist, in der Grundfarbe (siehe $isLight). */ .sr-grp { position: relative; overflow: hidden; border: 1px solid var(--sr-line); border-radius: 8px; background: var(--sr-paper); display: flex; flex-direction: column; padding: .62rem .8rem .75rem; transition: border-color .15s ease; } .sr-grp:hover { border-color: var(--sr-line-2); } /* Die Gruppenfarbe als Grund (Ansage Sven 26.10.2026: „starte mal in den ecken mit der farbe als hintergrund und fade nach rechts unten diagonal aus"): von der farbigen Ecke aus diagonal ins Weiss, so schwach, dass der Text darunter schwarz auf fast Weiss bleibt. „Sort" (zu hell) nimmt die Grundfarbe, wie Ecke und Name. */ /* Seit 31.10.2026 ohne Verlauf, dafür ein dünner Rand in der Gruppenfarbe (Ansage Sven: „gib den gruppen kacheln einen dünnen rand in der farbe der gruppe und entferne den verlauf“). Der Grund bleibt 15 % durchsichtig („mach mal 15%“). „Sort" (zu hell) nimmt die Grundfarbe, wie Name und Stufenleiste. */ /* Der neutrale Rahmen als Schatten nach innen statt als border: die Kachel schneidet ihren Inhalt ab (overflow), und ein farbiger Rahmen darüber muss im selben Feld liegen wie der neutrale. Gleiches Mass wie vorher (1 px mehr Polster). */ .sr-grp { --sr-grp-grund: var(--sr-gc); background: rgba(255, 255, 255, .85); border: 0; padding: calc(.62rem + 1px) calc(.8rem + 1px) calc(.75rem + 1px); box-shadow: inset 0 0 0 1px var(--sr-line); } .sr-grp:hover { box-shadow: inset 0 0 0 1px var(--sr-line-2); } /* Der Farbrand nur oben links (Ansage Sven 31.10.2026: „die farbigen ränder der gruppen kacheln sollen oben links und bis zum ersten drittel der kachel nach rechts und unten farbig sein und dann auslaufen“): ein farbiger Rahmen über dem neutralen, maskiert auf das erste Drittel nach rechts UND nach unten (beide Masken geschnitten), danach weich bis ~60 % ausgeblendet. Der Radius folgt von selbst. */ .sr-grp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1.5px solid var(--sr-grp-grund); -webkit-mask-image: linear-gradient(to right, #000 33%, transparent 60%), linear-gradient(to bottom, #000 33%, transparent 60%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 33%, transparent 60%), linear-gradient(to bottom, #000 33%, transparent 60%); mask-composite: intersect; } .sr-grp-ink { --sr-grp-grund: var(--sr-ink); } /* Kein farbiger Balken oben und die Ecke oben links wieder rund (Ansage Sven 26.10.2026: „nimm die farbige border ganz raus und mache auch die ecke links oben wieder rund, so wie es vor 4-5 versionen war"). */ /* Ohne farbige Ecke (26.10.2026, config zenergy.gruppen_ecken = false): das Dreieck faellt weg, Name und Text ruecken an den Rand — ihr Einzug war nur der Platz neben der Ecke. Der Verlauf traegt die Farbe weiter. */ .sr-grp-ohne-ecke .sr-grp-corner { display: none; } .sr-grp-ohne-ecke .sr-grp-head, .sr-grp-ohne-ecke .sr-grp p { padding-left: 0; } /* Das Dreieck in der Ecke: ein halbes Quadrat, schraeg beschnitten. */ .sr-grp-corner { position: absolute; left: 0; top: 0; width: 26px; height: 26px; background: var(--sr-gc); clip-path: polygon(0 0, 100% 0, 0 100%); } /* Eine zu helle Gruppenfarbe verschwindet auf dem weissen Blatt — dann traegt die Ecke die Grundfarbe. Bei „Sort" ist das ohnehin die Farbe, die der Name verspricht. */ .sr-grp-ink .sr-grp-corner { background: var(--sr-ink); } .sr-grp-head { display: flex; align-items: center; gap: .55rem; padding: 0 0 0 1.35rem; } .sr-grp-head b { font: 900 .95rem/1 var(--font-body); font-style: italic; text-transform: uppercase; letter-spacing: -.01em; color: var(--sr-gc); } /* Zu helle Gruppenfarbe traegt auf Weiss keine Schrift — dann steht der Name in Grundfarbe. */ .sr-grp-ink .sr-grp-head b { color: var(--sr-ink); } .sr-grp-tier { font: 700 .55rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--sr-ink-4); white-space: nowrap; } /* Die Stufe der Gruppe: so viele ansteigende Balken, wie die Serie Gruppen hat, gefuellt bis zur eigenen. Die Hoehen rechnet der Browser aus Platz (--sr-bi) und Anzahl (--sr-bn) — sechs feste Regeln waeren bei einer siebten Gruppe still falsch. */ .sr-grp-bars { margin-left: auto; display: flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; } .sr-grp-bars i { width: 3px; border-radius: 1px; background: var(--sr-line-2); height: calc(5px + (var(--sr-bi, 1) - 1) * 9px / max(var(--sr-bn, 2) - 1, 1)); } .sr-grp-bars i.on { background: var(--sr-gc); } .sr-grp-ink .sr-grp-bars i.on { background: var(--sr-ink); } /* .86 statt .76 rem seit 31.10.2026 (Ansage Sven: „der beschreibungstext der gruppenkacheln soll grösser“). */ .sr-grp p { padding: .42rem 0 0 1.35rem; margin: 0; font-size: .86rem; line-height: 1.45; color: var(--sr-ink-2); } /* ── Der Gruppen-Block nach der Vorlage vom 26.10.2026 ───────────────────── Ansage Sven: „erweitere mir den block der gruppen nach der vorlage. aber die schrift kann kleiner, sonst nimmt das zuviel platz ein". Rote Zeile, Titel in der Schrift des Heros mit roter Unterzeile, Einleitung, drei Vorteile, dann die Karten. Das Foto steht oben rechts HINTER dem Inhalt (isolation: der Block ist sein eigener Stapel, z-index -1 bleibt darin) und laeuft nach unten ins Weiss aus; nach links tut es das Bild selbst. */ .sr-grp-block { position: relative; overflow: hidden; isolation: isolate; } .sr-grp-foto { position: absolute; z-index: -1; top: 0; right: 0; width: 52%; height: auto; pointer-events: none; /* Nach unten UND nach links ins Weiss (26.10.2026): seit der Kopf kompakter ist und die Einleitung breiter laeuft, stehen Text und Vorteile weiter rechts — unter ihnen soll nur der ausgelaufene Teil des Fotos liegen. */ -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 80%), linear-gradient(90deg, transparent 0%, #000 45%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 35%, transparent 80%), linear-gradient(90deg, transparent 0%, #000 45%); mask-composite: intersect; } /* Der Text bleibt links vom Fahrer. 42 statt 34rem seit 26.10.2026: die Einleitung braucht so zwei statt drei Zeilen, und das Foto ist an dieser Stelle schon ins Weiss ausgelaufen. */ .sr-grp-intro { max-width: 42rem; } /* Der Klassen-Block traegt denselben Kopf (26.10.2026, config zenergy.klassen_kopf), aber kein Foto — dort laeuft die Einleitung ueber die ganze Breite (Erklaertexte nie schmaler als noetig). */ .sr-cls-block .sr-grp-intro { max-width: none; } /* Einfuehrung ueber den Gruppen (26.10.2026): eigene Karte, Titel in der Schrift der Abschnittskoepfe, Text ueber die ganze Breite; darunter mit demselben Abstand der Gruppen-Block. */ .sr-willkommen { margin-bottom: 1.1rem; position: relative; isolation: isolate; overflow: hidden; } /* Das blasse Zenergy-Logo rechts im Hintergrund (26.10.2026) ist seit 31.10.2026 wieder entfernt (Ansage Sven: „im intro panel auf der startseite ist das zenergy logo drin nimm das raus“). Die helle Zielflagge bleibt. */ /* Zwei Fassungen (26.10.2026, Ansage Sven: „das willkommenpanel muss auch mobil vor den events angezeigt werden"): breit steht sie rechts ueber den Gruppen, schmal — wo die rechte Spalte unter die Termine rutscht — vor den Terminen. */ .sr-willkommen-mobil { display: none; } @media (max-width: 1080px) { .sr-willkommen-mobil { display: block; margin-bottom: 0; } .sr-right > .sr-willkommen, .sr-start-reihe > .sr-willkommen { display: none; } } /* „Seneste nyt“ neben dem Willkommen (Ansage Sven 04.11.2026: „doch wieder so bitte, nimm dir 30% platz“ — die Gestaltung nach dem ersten Bild). Schmal (Willkommen steht dann vor den Terminen) steht die Kachel allein in voller Breite. */ /* Genau 30 % der Zeile (Ansage Sven 04.11.2026: „willkommen + news + spacing = 100% … davon 30%“) — als fester Anteil, nicht als Verhältnis, damit der Abstand nicht mitgerechnet wird. */ .sr-start-reihe { display: grid; grid-template-columns: minmax(0, 1fr) 33%; /* 33 % (Ansage Sven: erst 30, „ein wenig breiter“ 35, dann „mach 33%“) */ gap: 1.1rem; align-items: stretch; margin-bottom: 1.1rem; } .sr-start-reihe > .sr-card { margin-bottom: 0; } /* Schmal steht die Kachel über dem Newsletter (Ansage Sven 04.11.2026), die neben dem Willkommen fällt dann weg. */ .sr-neues.sr-neues-mobil { display: none; } /* Gruppen und Rennklassen am Telefon eingeklappt (Ansage Sven 04.11.2026): nur Überschrift und Einleitung, darunter ein Knopf; Kacheln (und was sonst danach im Block steht) erst nach dem Aufklappen. Breit gibt es den Knopf nicht. */ .sr-mobil-auf { display: none; } @media (max-width: 900px) { .sr-mobil-auf { display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem; padding: .55rem .9rem; border-radius: 999px; border: 1px solid var(--sr-line-2, #d7dade); background: var(--sr-paper, #fff); color: var(--sr-ink); cursor: pointer; font: 800 .72rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .06em; position: relative; z-index: 1; } .sr-mobil-auf svg { width: 14px; height: 14px; fill: none; stroke: var(--sr-red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .sr-mobil-auf-text { display: none; } .sr-mobil-check:checked + .sr-mobil-auf .sr-mobil-zu-text { display: none; } .sr-mobil-check:checked + .sr-mobil-auf .sr-mobil-auf-text { display: inline; } .sr-mobil-check:checked + .sr-mobil-auf svg { transform: rotate(180deg); } .sr-mobil-check:not(:checked) ~ :not(.sr-mobil-auf) { display: none !important; } } @media (max-width: 1080px) { .sr-start-reihe { display: block; } .sr-start-reihe > .sr-neues { display: none; } .sr-neues.sr-neues-mobil { display: flex; margin-top: .55rem; } } .sr-neues { display: flex; flex-direction: column; gap: .55rem; padding: 1rem .9rem; } .sr-neues-kopf { margin: 0 0 .1rem; font: italic 900 1rem/1 var(--font-body); text-transform: uppercase; letter-spacing: -.01em; color: var(--sr-ink); } .sr-neues-kopf span { color: var(--sr-red); margin-right: .25rem; } .sr-neues [data-sr-panel] { display: grid; gap: .45rem; } .sr-neues [data-sr-panel][hidden] { display: none; } .sr-neues-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .5rem .5rem .5rem .55rem; border: 1px solid var(--sr-line); border-radius: 10px; background: var(--sr-paper); color: var(--sr-ink); text-decoration: none; box-shadow: 0 1px 2px rgba(11, 13, 16, .05); } /* Rahmen kurz heraus und wieder hinein (Ansage Sven 04.11.2026: „rahmen wieder rein, icons etwas kleiner“). Beim Darüberfahren ein leichter roter Schein (Ansage Sven: „mouseover eintrag mit glow“). */ .sr-neues-zeile { transition: box-shadow .15s ease, border-color .15s ease; } .sr-neues-zeile:hover, .sr-neues-zeile:focus-visible { border-color: rgba(218, 31, 37, .35); box-shadow: 0 0 0 3px rgba(218, 31, 37, .08), 0 6px 18px -6px rgba(218, 31, 37, .35); } .sr-neues-zeichen { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #2a2e35; } .sr-neues-zeichen svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sr-neues-text { display: grid; gap: .2rem; min-width: 0; } /* Marke dunkel statt rot (Ansage Sven 08.11.2026: „der rote balken soll dunkel werden“). */ .sr-neues-marke { justify-self: start; padding: .14rem .45rem; border-radius: 4px; background: #2a2e35; color: #fff; font: 800 .5rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; } .sr-neues-text b { font: 500 .72rem/1.3 var(--font-body); /* nicht fett (Ansage Sven 04.11.2026) */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .sr-neues-pfeil { width: 14px; height: 14px; fill: none; stroke: var(--sr-ink-2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .sr-neues-leer { margin: 0; font-size: .7rem; color: var(--sr-ink-3); } /* Zeichen oben bündig mit dem Titel — gemeint ist die rote Marke (Ansage Sven 04.11.2026: „das icon soll oben bündig mit dem titel“): Zeichen und Marke beginnen auf derselben Höhe, der Text darunter, der Pfeil mittig. */ .sr-neues-zeile { grid-template-rows: auto auto; row-gap: .25rem; align-items: start; } .sr-neues-text { display: contents; } .sr-neues-marke { grid-column: 2; grid-row: 1; } .sr-neues-zeichen { grid-column: 1; grid-row: 1 / span 2; align-self: start; } .sr-neues-datum { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 38px; } .sr-neues .sr-ev-date:not(.sr-ev-ticket) b { font-size: 1rem; padding-top: .2rem; margin-bottom: .1rem; } .sr-neues .sr-ev-date:not(.sr-ev-ticket) span { padding-bottom: .25rem; } .sr-neues-text b { grid-column: 2; grid-row: 2; align-self: start; } .sr-neues-pfeil { grid-column: 3; grid-row: 1 / span 2; align-self: center; } /* Das dunkle Carbon-Panel (Ansage Sven 04.11.2026) ist am 05.11.2026 wieder zurückgenommen — „bau den neuigkeiten block wieder auf das helle design“: die Grundregeln oben (helle Karte, Rahmen, dunkle Zeichen) gelten wieder unverändert. */ /* Ein geleerter, loeschbarer Text (x-editable optional) — nur fuer Textpflegende sichtbar, als blasse Zeile mit Hinweis, damit man ihn anklicken und wieder fuellen kann. Besucher bekommen das Element gar nicht. */ .editable-leer:empty::before { content: attr(data-leer); opacity: .4; font-style: italic; font-size: .7em; letter-spacing: .02em; } .editable-leer { min-height: 1em; outline: 1px dashed rgba(218, 31, 37, .35); outline-offset: 2px; } /* Ein geleerter Untertitel sitzt beim Pflegen wie ein gefüllter (Befund 01.11.2026, Sven: „es sieht so aus, als wenn der untertitel bei gruppen anders positioniert ist als bei rennklassen“). Der Texteditor macht leere Felder zum Kästchen in der Zeile ([data-content-key]:empty → inline-block, Mindesthöhe 1,5 em) — unter der Überschrift stand der leere bei Rennklassen dadurch 4 px tiefer und 5 px höher als der gefüllte bei Gruppen. Besucher sehen beides nicht. */ .sr-grp-title .sr-grp-title-sub.editable-leer { display: block; min-height: 1.1em; } /* 1.5 statt 1.7 rem seit 31.10.2026 (Ansage Sven: „die schrift im intro panel kleiner, das darf nicht grösser als "find din gruppe" sein“) — so groß wie die Überschrift der Gruppen, auf jeder Breite. */ .sr-willkommen .sr-grp-title-main { font-size: 1.5rem; } /* Rote Unterzeile kleiner (Ansage Sven 08.11.2026: „den roten untertitel im willkommensblock etwas kleiner“): .92 statt 1,12 rem. */ .sr-willkommen .sr-grp-title-sub { font-size: .92rem; } .sr-willkommen-text > :first-child { margin-top: 0; } .sr-willkommen-text > :last-child { margin-bottom: 0; } .sr-willkommen-text p { margin: .5rem 0 0; } /* Ohne die drei Vorteile (26.10.2026) folgen Kacheln und Gruppenkarten direkt auf die Einleitung. */ .sr-cls-block .sr-cls-grid, .sr-grp-block .sr-grp-grid { margin-top: .9rem; } .sr-grp-kicker { display: flex; align-items: center; gap: .6rem; margin: 0 0 .4rem; font: 800 .64rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--sr-red); } .sr-grp-kicker::after { content: ""; width: 42px; height: 2px; border-radius: 1px; background: var(--sr-red); } .sr-grp-title { margin: 0; font-family: var(--font-display-hero); font-weight: 400; text-transform: uppercase; line-height: 1; } /* Kompakter seit 26.10.2026 (Vorschlag „rund 40–60 Pixel ließen sich einsparen"): kleinere Abstände zwischen Titel, Einleitung, Vorteilen und Karten, die Gruppen kommen frueher. */ .sr-grp-title-main { display: block; font-size: 2rem; letter-spacing: .005em; color: var(--sr-ink); } .sr-grp-title-sub { display: block; margin-top: .1rem; font-size: 1.12rem; letter-spacing: .01em; color: var(--sr-red); } /* In „Gruppen“ und „Klassen“ mittelgrau statt rot (Ansage Sven 01.11.2026: „die untertitel in gruppen und klassen sollen anstatt rot ein mittelgrau haben. der untertitel im intro-block bleibt rot“). Beide stehen in .sr-grp-intro, der Intro-Block (.sr-willkommen) nicht. */ .sr-grp-intro .sr-grp-title-sub { color: var(--sr-ink-2); } /* dunkler (Ansage Sven 01.11.2026: „mach das grau dunkler“): #565c66 statt #888e98 */ /* Und leichter (Ansage Sven 01.11.2026: „gib den grauen untertitel weniger weight“). Anton hat nur eine Stärke, darum die Fließschrift des Designs (Figtree) halbfett, weiter in Großbuchstaben — vorher Anton 400, 1,12 rem. */ /* Danach kleiner (Ansage Sven 01.11.2026: „schrift kleiner“): .78 rem statt .92 rem. Zuletzt wieder in Anton (Ansage Sven 01.11.2026: „bring den andere font wieder zurück bleibe aber so klein“) — die Figtree-Fassung ist damit aufgehoben. */ .sr-grp-intro .sr-grp-title-sub { margin-top: calc(.2rem + 3px); /* +3 px (Ansage Sven 01.11.2026: „untertitel 3px mehr nach unten“) */ font-size: .78rem; letter-spacing: .03em; line-height: 1.1; } .sr-grp-lede { margin: .45rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--sr-ink-2); } /* „Find din gruppe" und „Raceklasser" in der Schrift von „Kommende events" (Ansage Sven 26.10.2026: „find dine gruppe und raceklasser kann wieder den font haben, den wir bei kommende events haben"): Figtree 900 kursiv, 1.5rem — wie .sr-display in .sr-head. Der Titel der Einfuehrung bleibt in der Hero-Schrift. */ .sr-grp-block .sr-grp-title-main, .sr-cls-block .sr-grp-title-main { font-family: var(--font-display, var(--font-body)); font-weight: 900; font-style: italic; font-size: 1.5rem; line-height: .96; letter-spacing: -.015em; } /* Drei Vorteile in einer Reihe, getrennt durch feine Striche. */ .sr-grp-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: .75rem 0 .8rem; } .sr-grp-point { display: flex; align-items: flex-start; gap: .65rem; padding: 0 1.1rem; } .sr-grp-point:first-child { padding-left: 0; } .sr-grp-point + .sr-grp-point { border-left: 1px solid var(--sr-line); } .sr-grp-point svg { flex: none; width: 26px; height: 26px; margin-top: .05rem; fill: none; stroke: var(--sr-red); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sr-grp-point b { display: block; font: 800 .68rem/1.2 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--sr-ink); } .sr-grp-point p { margin: .18rem 0 0; font-size: .74rem; line-height: 1.4; color: var(--sr-ink-3); } /* Die Karten bekommen auf dem Foto-Grund ein deckendes Blatt — das haben sie schon (--sr-paper). */ /* ── Tabellenstand ──────────────────────────────────────────────────────── */ /* Alles auf einen Blick: alle Klassen in EINER Zeile, kein Rollbalken. Dafür fallen die Kästen weg — der Platz zwischen den Tabellen wird zur Spaltenbreite. */ .sr-stand { display: grid; grid-template-columns: repeat(var(--sr-cols, 9), 1fr); gap: 0; } /* Die Senkrechten trennen, sie sollen nicht mitlesen: heller als die uebrigen Linien. */ .sr-sc { min-width: 0; padding: 0 .45rem; border-left: 1px solid var(--sr-line-soft); } .sr-sc:first-child { border-left: 0; padding-left: 0; } .sr-sc:last-child { padding-right: 0; } /* Der Klassenname traegt die Spalte und darf darum etwas groesser und fetter stehen als die Zeilen darunter; die Fahrerzahl daneben ist eine Nebenangabe und tritt zurueck. */ .sr-sc h3 { font: 900 .69rem/1.15 var(--font-body); text-transform: uppercase; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-sc-field { font: 600 .54rem/1 var(--font-body); color: var(--sr-ink-4); margin: .18rem 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-sc ol { list-style: none; margin: .35rem 0 0; padding: 0; border-top: 1px solid var(--sr-line); } /* Feste Spalte fuer die Punkte, damit sie ueber alle Klassen hinweg auf derselben Kante enden — „auto" richtete jede Spalte nach ihrer eigenen laengsten Zahl aus. */ .sr-sc li { display: grid; grid-template-columns: 9px minmax(0, 1fr) 2.1rem; align-items: center; gap: .24rem; padding: .2rem .18rem; border-bottom: 1px solid var(--sr-line); font-size: .645rem; border-radius: 3px; } .sr-sc li:last-child { border-bottom: 0; } /* Ein Platz ohne Namen: die Zeile steht, aber sie draengt sich nicht auf. */ .sr-sc li.sr-p0 span { color: var(--sr-line-2); } .sr-sc li i { font: 800 .58rem/1 var(--font-body); font-style: normal; color: var(--sr-ink-3); } .sr-sc li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-sc li b { font: 900 .72rem/1 var(--font-body); letter-spacing: -.02em; text-align: right; } /* Platz eins traegt nur den fetten Namen: die Zahlen stehen alle in derselben Farbe. Rot in Platz und Punktzahl machte aus neun Spalten neun rote Spalten, und gelesen wird hier von oben nach unten, nicht nach Farbe. */ .sr-sc li.sr-p1 span { font-weight: 700; } /* ── Responsiv ──────────────────────────────────────────────────────────── */ /* Je Geraet ein Verweis: am Schreibtisch die Kalenderseite, am Telefon das PDF. Mit demselben Griff wie die Regel darueber (.sr-events-col > .sr-head .sr-more), sonst gewinnt die und beide Verweise stehen da. */ .sr-events-col > .sr-head .sr-more-schmal { display: none; } /* ── Das aufgeklappte Menue am Telefon ──────────────────────────────────── Die Hauptpunkte standen weiss auf weiss. Der Grund: ueber dem Hero traegt die Leiste keine Flaeche, und die Schrift darin ist deshalb hell mit einem Saum — richtig, solange sie ueber dem Foto steht. Aufgeklappt steht sie aber auf einer weissen Tafel, und dort ist dieselbe Regel unlesbar. Nur am Telefon: auf dem Schreibtisch gibt es diese Tafel gar nicht, dort bleibt alles, wie es ist. */ @media (max-width: 900px) { body.design-serienleiste .sl-topnav .sl-topnav-links a, body.design-serienleiste .sl-topnav .sl-topnav-links button, body.design-serienleiste:has(.sr-hero) .sl-topnav:not(.is-stuck) .sl-topnav-links a, body.design-serienleiste:has(.sr-hero) .sl-topnav:not(.is-stuck) .sl-topnav-links button { color: var(--sr-ink); text-shadow: none; } /* Die Untermenues sind hier keine schwebenden Kaesten mehr, sondern eingerueckte Zeilen derselben Tafel — ein dunkler Block darin sah aus wie ein Fremdkoerper. */ body.design-serienleiste .sl-nav-drop { background: none; border-color: transparent; box-shadow: none; } body.design-serienleiste .sl-topnav .sl-nav-group .sl-nav-drop a, body.design-serienleiste .sl-topnav .sl-nav-group .sl-nav-drop button { color: var(--sr-ink-2); } body.design-serienleiste .sl-topnav .sl-nav-group .sl-nav-drop a:hover, body.design-serienleiste .sl-topnav .sl-nav-group .sl-nav-drop button:hover { background: rgba(16, 16, 16, .06); color: var(--sr-ink); } /* Die Tafel selbst: deckend und mit einem Schatten, damit sie ueber dem Inhalt steht und nicht darin schwimmt. */ .sl-topnav-links { background: #fff; box-shadow: 0 18px 40px rgba(11, 13, 16, .28); } } /* ── Am Telefon bewegt sich nichts mehr ─────────────────────────────────── Auftrag vom 23.09.2026: keine Animationen — AUSSER dem Ein- und Ausblenden, das bleibt. Die Bewegung steckt fast ueberall in denselben Bildfolgen, die auch blenden: „von durchsichtig und 34 px weiter links" nach „da und sichtbar". Sie hier noch einmal zu schreiben, nur ohne den Weg, ist praeziser als ein Rundumschlag: die Richtung bleibt erhalten (was hinausblendet, blendet weiter hinaus), und nichts, was mit transform AUSGERICHTET ist — ein mittig gesetztes Fenster etwa — wird dabei versehentlich zurueckgesetzt. Gleiche Namen, spaetere Stelle: innerhalb der aktiven Medienabfrage gilt diese Fassung. */ @media (max-width: 1080px) { @keyframes sr-kurv-links { from { opacity: 0; } to { opacity: 1; } } @keyframes sr-kurv-rechts { from { opacity: 0; } to { opacity: 1; } } @keyframes sr-kurv-unten { from { opacity: 0; } to { opacity: 1; } } @keyframes sr-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes sr-fade-weich { from { opacity: 0; } to { opacity: 1; } } .sr-cols > .sr-right.sr-ueberblende { display: none; } @keyframes sr-grow { from { opacity: 0; } to { opacity: 1; } } @keyframes sr-rein-oben { from { opacity: 0; } to { opacity: 1; } } @keyframes sr-rein-links { from { opacity: 0; } to { opacity: 1; } } @keyframes sr-rein-rechts { from { opacity: 0; } to { opacity: 1; } } @keyframes sr-kopf-rein { from { opacity: 0; } to { opacity: 1; } } @keyframes sr-kopf-kasten { from { opacity: 0; } to { opacity: 1; } } @keyframes sr-flug-rein { from { opacity: 0; } to { opacity: 1; } } @keyframes sr-flug-aussen-rein { from { opacity: 0; } to { opacity: 1; } } @keyframes sr-flug-raus { from { opacity: 1; } to { opacity: 0; } } @keyframes sr-flug-aussen { from { opacity: 1; } to { opacity: 0; } } @keyframes sr-flug-rechts-raus { from { opacity: 1; } to { opacity: 0; } } @keyframes sr-kopf-raus { from { opacity: 1; } to { opacity: 0; } } /* Und die Uebergaenge: nur noch das, was blendet oder die Farbe wechselt. Ein Uebergang auf transform ist Bewegung — der Schieber unter den Profilreitern etwa springt jetzt an seinen Platz, statt hinueberzufahren. */ *, *::before, *::after { transition-property: opacity, color, background-color, border-color, box-shadow, fill, stroke !important; } /* Weiches Scrollen ist auch Bewegung. Ohne „!important": dieses Stilblatt wird NACH dem der Huelle eingebunden, und bei gleicher Staerke gewinnt das spaetere. */ html, body, .sl-scroll { scroll-behavior: auto; } } @media (max-width: 1080px) { .sr-hero-in { grid-template-columns: 1fr; } .sr-hero-tag { display: none; } .sr-cols { grid-template-columns: 1fr; } /* ── Die Termintafel als Fenster ────────────────────────────────────── Nebeneinander passen Liste und Tafel hier nicht mehr, also stand die Tafel UNTER der Liste — man tippte einen Termin an und landete auf einer Seite, die oben immer noch die Liste zeigte. Jetzt geht sie mittig im Bild auf, mit der Liste dahinter (Auftrag 23.09.2026). „position: fixed" traegt hier: der Scrollbereich hat keine perspective mehr (die Parallaxe rechnet seit dem Umbau das Skript), und damit ist der Bezug wieder das Fenster und nicht der gescrollte Inhalt. */ .sr-detail-modal > .sr-right { position: fixed; z-index: 60; /* UNTER der Kopfleiste und nicht mittig im Bild (Ansage vom 25.09.2026: „die detailansicht darf nicht hinter dem topbar verschwinden"). Mittig gerechnet lag die Oberkante bei (100vh − Hoehe) / 2 — bei 800 px Fensterhoehe also 56 px, und die Leiste ist 64 px hoch (`.sl-topnav` in der Huelle): die ersten acht Pixel standen dahinter, auf kuerzeren Fenstern entsprechend mehr. Die 64 px stehen hier als Zahl, weil die Huelle sie als Zahl setzt und kein Merkmal dafuer anbietet. Aendert sie sich dort, gehoert sie hier nachgezogen. */ top: calc(64px + .75rem); left: 50%; transform: translateX(-50%); width: min(100% - 1.5rem, 42rem); max-height: calc(100vh - 64px - 1.5rem); overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; /* Der weisse Schein sitzt hier am FENSTER und nicht an der Tafel darin: das Fenster rollt (`overflow-y: auto`) und schnitte einen Schein an der Tafel an den Seiten ab. Auf dem dunklen Schleier traegt er staerker als auf dem grauen Grund daneben. */ box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 0 30px 6px rgba(255, 255, 255, .34), 0 0 80px 22px rgba(255, 255, 255, .16), 0 24px 60px rgba(11, 13, 16, .45); } /* Und an der Tafel darin faellt er weg — zwei Scheine ineinander sind ein Rand. */ body.design-serienleiste .sr-detail-modal > .sr-right > .sr-card { box-shadow: none; } /* Der Schleier dahinter. Am Behaelter und nicht als eigenes Element: es gibt keins, und eins einzufuegen hiesse, die Ansicht fuer eine Bildschirmbreite zu aendern. */ .sr-detail-modal::before { content: ""; position: fixed; inset: 0; z-index: 59; background: rgba(11, 13, 16, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } /* Dahinter wird nicht gescrollt — sonst laeuft die Liste unter dem Fenster weg, waehrend man in der Tafel liest. */ body:has(.sr-detail-modal) .sl-scroll { overflow: hidden; } /* UND DAS DOKUMENT. Am Telefon rollt nicht .sl-scroll (das steht dort ohnehin auf hidden), sondern der Koerper — der Riegel darueber griff dort also ins Leere. Gemessen am 24.09.2026 bei 390 x 844: der Koerper rollte ueber 1974 px weiter, waehrend das Fenster daneben seine eigenen 1379 px rollte. Eine Wischgeste traf dann mal das eine und mal das andere, und der Knopf „Laeg i kurv" ganz unten im Fenster war schwer zu erreichen. */ html:has(.sr-detail-modal), body:has(.sr-detail-modal) { overflow: hidden; } /* Die Tafel bringt ihren eigenen Rand mit; der aeussere Abstand der Spalte wuerde ihn im Fenster verdoppeln. */ .sr-detail-modal > .sr-right > .sr-card { margin-top: 0; } .sr-cls-grid { grid-template-columns: repeat(2, 1fr); } .sr-grp-grid { grid-template-columns: repeat(2, 1fr); } .sr-stand { grid-template-columns: repeat(3, 1fr); gap: .65rem; } .sr-sc, .sr-sc:first-child, .sr-sc:last-child { padding: .6rem .7rem .45rem; border: 1px solid var(--sr-line); border-radius: 8px; } /* Der Inhalt einer Seite mit festem Hero (Teams, Ergebnisse, Regeln …) kommt VOR der Terminliste, nicht erst danach — sonst muesste man an der ganzen Liste samt Newsletter vorbeirollen, um ihn zu lesen (Befund Sven 05.11.2026: „in einer groesseren mobilen ansicht noch nicht" — diese Regel stand bis dahin nur in der 700-px-Stufe, obwohl die Spalten hier schon ab 1080 px einspaltig werden; dazwischen fehlte sie). */ body.sr-hero-fest .sr-cols > .sr-events-col { order: 2; } } @media (max-width: 700px) { /* ── Das Konto steht in der Kopfzeile, nicht im Burger ────────────────────────── So war es am 23.09.2026 entschieden („Kopfzeile … mit dem Konto daneben statt im Burger"), und so ist es auch gebaut: .sl-mobil-konto sitzt in der Leiste. Der Eintrag IM Menue blieb daneben stehen — und war dort unsichtbar: seine Scheibe ist fuer die dunkle Leiste gefaerbt (fast weiss) und stand im aufgeklappten Menue auf Weiss, die Beschriftung ist in diesem Design ohnehin ausgeblendet. Ein Zwilling, den niemand sehen konnte. */ body.design-serienleiste .sl-topnav-links .sl-nav-account { display: none; } /* ── Die Sprachfahnen mit einer Trefferflaeche, die ein Finger findet ─────────── Gemessen am 24.09.2026: 27 x 26 px. Die Fahne bleibt so gross, wie sie ist — die Flaeche darum herum waechst auf 44 px. */ body.design-serienleiste .sl-nav-langs { gap: 0; } body.design-serienleiste .sl-nav-drop .sl-nav-langs a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* ── Keine Kalender-Verweise ueber der Terminliste (Ansage 02.10.2026) ───────────── „Ganzen Kalender ansehen" und „Kalender drucken" standen hier untereinander, auf Touch-Geraeten je mit 44 px Tippflaeche — zwei Zeilen Verweise ueber einer Liste, die selbst der Kalender ist, und das brach den Kopf der Liste auseinander. Am Telefon fallen beide weg. Die Kalenderseite bleibt ueber den Fuss erreichbar („Trackdays", gemessen bei 375 px), das PDF von dort aus. Davor (23./24.09.) stand hier mal das eine, mal beides. */ .sr-events-col > .sr-head .sr-more, .sr-events-col > .sr-head .sr-more.sr-more-ikon { display: none; } /* Auf dem Telefon steht der Text UEBER dem Foto und braucht die ganze Abdunklung; der Zierrat faende zwischen Schrift und Bild keinen Platz mehr. */ .sr-hero-hud { display: none; } /* Und die beiden Knoepfe darunter fallen weg (Auftrag 23.09.2026): beide fuehren zur Terminliste, die eine Handbreit tiefer ohnehin dasteht — und der Weg dorthin liegt seit heute als erstes Zeichen im Kopf. Zwei Knoepfe fuer denselben Weg schieben auf einem Telefon nur die Liste aus dem Bild. */ /* Auf dem Telefon bleibt das Foto hinter dem Text und wird nach unten hin dunkel — anders als beim hellen Hero, wo es als eigener Streifen darüber stand. */ .sr-hero-photo::after { background: linear-gradient(180deg, rgba(11,13,16,.72) 0%, rgba(11,13,16,.9) 45%, rgba(11,13,16,.96) 100%); } /* Auch hier eine gerade Kante; die Abdunklung darf kuerzer sein, weil das Foto auf dem Telefon ohnehin schon dunkel hinter dem Text liegt. */ .sr-hero-box::after { height: 90px; } /* Kleinere Wortmarke, kuerzerer Ueberhang — sonst liegt sie auf der Mantra-Zeile. */ body.design-serienleiste .sr-brand img { width: 78px; margin-bottom: -16px; } /* Die Ueberschrift der Terminliste kleiner und dichter an der Liste: sie ist hier kein Kapitelkopf mehr, sondern ein Schild ueber vier Karten — in der Groesse des Schreibtischs schob sie den ersten Termin aus dem Bild (Auftrag 23.09.2026). */ .sr-events-col > .sr-head { padding-top: .9rem; margin-bottom: 0; } .sr-events-col > .sr-head .sr-display { font-size: 1.05rem; } .sr-events-col > .sr-head .sr-head-ico { width: 17px; height: 17px; } .sr-events-col > .sr-events { margin-top: .5rem; } /* ── Der Hero am Telefon: Kopf, mehr nicht ────────────────────────── Er trug Titel, Unterzeile, einen Absatz Fliesstext, zwei Knoepfe und vier Merkmale — zusammen weit mehr als eine Bildschirmhoehe. Wer die Seite oeffnete, sah Werbung und musste zweimal wischen, um zu den Terminen zu kommen, nach denen er gekommen ist (Auftrag 23.09.2026). Geblieben sind das Mantra, der Titel und die Unterzeile — sie sagen in drei Zeilen, wo man ist. Der Fliesstext und die vier Merkmale stehen weiter unten auf der Seite; sie sind nicht das, womit sie anfangen muss. */ .sr-hero-copy .sr-lede { display: none; } .sr-hero-in { min-height: 0; padding: calc(56px + 1.6rem) 1.3rem 1.8rem; } /* 200 px als Boden auch hier (Ansage vom 24.09.2026: „der Hero soll immer mindestens so hoch sein"). Offen ist er ohnehin hoeher — der Boden greift im zusammengezogenen Zustand, wo der Titel allein auf rund 130 px kaeme. Als EIGENE Zeile und nicht als Mass in der Regel darueber: die gilt auch fuer den Kopf der Profilseite (er ist derselbe Kasten), und der holt sich sein Polster von dort. Schriebe man das Mass hinein, muesste man ihn ausnehmen — und naehme ihm damit das Polster gleich mit. */ .sr-hero-in:not(.sr-hero-profil) { min-height: 200px; } /* Die Pille bleibt auch hier EINE Reihe (siehe unten), der halbe Versatz also klein. */ /* In der Leiste ist am Telefon kein Platz: dort stehen schon Wortmarke, drei Wege, Konto und Burger. Der Umschalter bleibt hier bei der Seite und rollt mit ihr weg. */ .sr-switch-mini { display: none; } /* Ohne Paar in der Leiste bleibt die Pille hier stehen — samt ihrem Platz. */ body.sr-switch-oben .sr-switch-dock { opacity: 1; transform: none; pointer-events: auto; max-height: 12rem; margin-top: -26px; margin-bottom: 2.1rem; overflow: visible; } .sr-switch-dock { margin-top: -26px; width: 100%; } /* Fest kleiner Hero am Telefon (08.10.2026): der „kleine" Streifen hat hier keine Hoehe, also bleibt nur ein dunkler Grund in Hoehe der Kopfleiste (64 px) stehen, damit deren weisse Zeichen lesbar sind — der Inhalt des Heros tritt ganz zurueck. Der Umschalter steht darunter und lappt nicht in die Leiste. Und der Inhalt der Seite (Teams, Ergebnisse, Regeln …) kommt VOR der Terminliste: untereinander stuende er sonst erst nach allen Terminen. */ body.sr-hero-fest .sr-hero:not(:has(.sr-hero-profil)) { height: 64px; margin-bottom: 0; } body.sr-hero-fest .sr-hero-in:not(.sr-hero-profil) { visibility: hidden; } body.sr-hero-fest .sr-switch-dock { margin-top: 1rem; margin-bottom: 1.2rem; } /* order: 2 steht jetzt in der 1080-px-Stufe (die Spalten werden schon dort einspaltig). */ .sr-hero-h1 { font-size: clamp(2rem, 9vw, 2.6rem); } /* Zusammengezogen auch hier (Auftrag vom 24.09.2026). Eigene Masse, weil der Hero am Telefon keine Mindesthoehe hat, sondern so hoch ist wie sein Inhalt: was ihn kleiner macht, sind die beiden weggetretenen Zeilen, der kleinere Titel und weniger Polster. Die Regeln stehen hier und nicht oben, weil die Regel darueber (.sr-hero-in in dieser Medienabfrage) sonst von der staerkeren Schreibweise am Schreibtisch geschlagen wuerde und das Polster des Schreibtisches ans Telefon kaeme. */ /* Am Telefon verschwindet er GANZ (Ansage vom 24.09.2026) — auch die beiden Zeilen. Der Schreibtisch behaelt seine 200 px: dort steht der Hero neben der Terminliste im Blick, hier liegt er ueber ihr, und ein Streifen, den man wegrollt, hat nichts mehr zu sagen. Beim Ankommen steht er unveraendert da (247 px), zurueck kommt er wie ueberall, sobald man ganz oben ist. Die Hoehe null holt sich der Hero von seinem Inneren: die Fotos liegen absolut in `.sr-hero-photo` und fallen mit, der Verlauf am Fuss wird von `overflow: hidden` an `.sr-hero` abgeschnitten. */ /* Am Telefon gibt der Hero seine Hoehe bis auf NULL ab — dieselbe Zahl, die auch KLEIN() in der Steuerung liest. Am KOERPER, weil die Marken dieses Designs dort haengen und nicht an der Wurzel. */ body.design-serienleiste, body.design-serienleiste:has(.sr-hero-next) { --sr-hero-klein: 0px; } body.sr-hero-klein .sr-hero-in:not(.sr-hero-profil) { min-height: 0; padding-top: 0; padding-bottom: 0; } /* Und die Karte „naechster Termin" hat dort keinen Streifen mehr, in dem sie stehen koennte. Sie steht als Zeile ohnehin in der Terminschiene direkt darunter. */ .sr-hero-next { display: none; } /* Am Telefon gibt der Hero seine Hoehe bis auf null ab; das Kleben ist dort folgenlos und braucht keine eigene Regel. */ /* Ein Deckel im offenen Zustand, damit die Zeilen etwas haben, von dem aus sie zugehen — dieselbe Rechnung wie oben bei der Serienzeile. */ .sr-hero-in:not(.sr-hero-profil) .sr-hero-h1 { max-height: 20rem; } .sr-hero-in:not(.sr-hero-profil) .sr-eyebrow { max-height: 6rem; } body.sr-hero-weich .sr-hero-in:not(.sr-hero-profil) .sr-hero-h1, body.sr-hero-weich .sr-hero-in:not(.sr-hero-profil) .sr-eyebrow { transition: font-size .46s cubic-bezier(.22, .7, .25, 1), opacity .24s ease, max-height .46s cubic-bezier(.22, .7, .25, 1), margin .46s cubic-bezier(.22, .7, .25, 1); } /* Das MANTRA geht hier mit. „Immer sichtbar" (24.09.2026) meint die kleine Hoehe am Schreibtisch; am Telefon gibt es keine kleine Hoehe, dort ist der Hero weg — und ein Mantra, das als 22-px-Streifen allein stehen bleibt, ist kein Hero mehr, sondern ein Rest. */ body.sr-hero-klein .sr-hero-in:not(.sr-hero-profil) .sr-hero-h1, body.sr-hero-klein .sr-hero-in:not(.sr-hero-profil) .sr-eyebrow { opacity: 0; max-height: 0; margin: 0; overflow: hidden; } body.sr-hero-klein .sr-hero-in:not(.sr-hero-profil) .sr-hero-h1 { font-size: clamp(1.5rem, 6.5vw, 1.9rem); } /* Der halbe Versatz der Pille bleibt, auch wenn der Hero auf null geht. Er wurde am 24.09.2026 kurzzeitig weggenommen („ohne Kante kein Versatz") — und war damit die einzige Stelle, an der sich noch etwas verschob, ohne dass jemand gerollt hat: der Wechsel schob den Inhalt um 26 px, und der Browser zog den Rollstand nach. Der Hero gibt seine Hoehe jetzt stufenlos ab, die Pille liegt die ganze Zeit auf seiner Kante, und am Ende ist beides ohnehin aus dem Bild. */ .sr-hero-copy .sr-lede { min-height: 0; } /* Der Umschalter auf dem Telefon: EINE Reihe, zwei gleich breite Haelften. Vorher standen die beiden Knoepfe untereinander, jeder mit Symbol, Titel UND Unterzeile — daraus wurde ein weisser Klotz von 130px Hoehe, der auf der Kante zwischen Foto und hellem Bereich klebte und den halben Hero verdeckte. Die Unterzeilen („Store baner · gade- og banemotorcykler") sind auf 360px ohnehin nicht zu lesen; sie treten hier weg. Der Titel wird mitwachsend bemessen, damit „Supermoto & Mini" auch auf dem schmalsten Geraet in seine Haelfte passt. Das rote Stueck dahinter misst sich per Skript neu und folgt ohne Zutun. */ .sr-switch { flex-direction: row; width: min(100% - 32px, 420px); } .sr-sb { flex: 1 1 0; justify-content: center; gap: .35rem; padding: .4rem .4rem; min-width: 0; } .sr-sb-ico { width: 24px; height: 24px; } .sr-sb-ico img { width: 19px; height: 19px; } .sr-sb-txt small { display: none; } .sr-sb-txt b { font-size: clamp(.52rem, 2.7vw, .72rem); letter-spacing: .05em; } /* Untereinander gibt es keinen Rest zu fuellen: feste, ruhige Hoehe. Niedriger seit 05.11.2026 (s.o.). */ .sr-new { flex: none; min-height: 130px; max-height: none; height: 130px; } /* ── Der Fuss am Telefon ───────────────────────────────────────────── Er war untereinander gebaut und damit 1250 px hoch — vier Bildschirme Fuss unter einer Seite. Alle Verweise bleiben, sie stehen nur in ZWEI Spalten: jeder Verweis ist auf einem Tippgeraet 44 px hoch (siehe die Regel fuer grobe Zeiger weiter unten), und das ist richtig so — halbiert wird die Hoehe ueber die Breite, nicht ueber kleinere Ziele. */ .sr-foot .sr-foot-in { grid-template-columns: 1fr 1fr; gap: 1.1rem 1.2rem; padding: 1.6rem 1.1rem 1.2rem; } /* Die Wortmarke ueber beide Spalten, und kleiner: bei 118 px nahm sie allein ein Drittel der Fusshoehe. */ .sr-foot-brand { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: .9rem; } .sr-foot-brand > img { width: 84px; } .sr-foot-claim b { font-size: 1.05rem; } /* „Kontakt" samt Kanaelen steht unter den beiden Verweisspalten, nicht daneben — eine Telefonnummer bricht in einer halben Spalte um. An der eigenen Klasse und NICHT an :last-of-type: die beiden Verweisspalten sind