/* * marke-laden.css – Marken-Look der Bunert-Laufläden, Richtung „Druckverteilung“ * (Dennis, 16.09.2026, Briefing RELAUNCH-BRIEFING-2026-09-16.md; Schriftsatz `laden`). * * Wird ZULETZT geladen (functions.php be_enqueue_assets) und trägt die Tokens `--st-*`, mit denen * standort.css die Bauteile baut. Body-Klasse `be-marke-laden`. Auf Veranstaltungsseiten wird * diese Datei nie ausgeliefert. * * Gestaltungsregeln (aus dem Entwurf, Schritt 2 und 3): * Grund heller neutraler Grund #F5F6F7, Flächen weiß, keine Verläufe als Dekoration. * Tinte #10161F für Text und die EINE dunkle Fläche je Seite (Lauftreff-Band, Fuß). * Blau #2F52A0 aus dem Original-Logo (bis 18.09. #21539E, gemessen an Enfold-CSS): Knöpfe, Verweise, zweite Titelzeile, Kennzeichen. * Rot #E73331 nur als Signal: Druckpunkt, Status „geschlossen“, laufender Termin, Fehler. * Als SCHRIFT auf hellem Grund nur #B8222A (5,9:1), nie #E73331 (4,3:1). * Titel Archivo 700, Breite 96, -0,03 em; H1 zweizeilig: erste Zeile Tinte, zweite Blau. * H2 immer Tinte, H3 Tinte. Auf Tinte: Weiß, zweite Zeile Display-Blau #8FB3F0. * Text Schibsted Grotesk 17/18 px, Zeile 1,55, höchstens 65 Zeichen; Nebentext #55606F. * Daten JetBrains Mono, Tabellenziffern: Zeiten, Adressen, Messleiste, Kennzeichen. * Kanten Flächen, Fotos, Tabellen ohne Radius; Knöpfe und Felder 6 px; Fokus 3 + 3 px Ring. * Knöpfe primär Blau/Weiß, sekundär Weiß mit Rand, leise Textlinie, hell auf Tinte. * Kontraste gerechnet (16.09.2026): Text 14,1:1, Nebentext 5,9:1, Blau 6,9:1, Weiß auf Blau 7,5:1, * Text auf Tinte 16,5:1, Display-Blau auf Tinte 8,5:1, Rot-Schrift 5,9:1. */ body.be-marke-laden { /* Farbe */ --st-grund: #F5F6F7; --st-flaeche: #FFFFFF; --st-tinte: #10161F; --st-text: #1D2632; --st-leise: #4B5563; /* 7,2:1 auf dem Grund; #55606F (5,9:1) las sich zu blass (Dennis 17.09.) */ --st-linie: #C9CFD7; --st-linie-leise: #E1E5EA; --st-blau: #2F52A0; --st-blau-tief: #233C78; --st-blau-hell: #E4ECF8; --st-rot: #E73331; --st-rot-text: #B8222A; --st-gruen: #1E7F43; --st-bernstein: #C77A00; --st-dunkel-text: #F2F4F6; --st-dunkel-leise: #A7B1BE; --st-dunkel-blau: #8FB3F0; --st-dunkel-linie: rgba(255, 255, 255, 0.16); --st-raster: rgba(47, 82, 160, 0.07); /* Rasterpapier (Entwurf 2): Linien auf hellem Grund */ --st-dunkel-raster: rgba(255, 255, 255, 0.045); /* … und auf der Tinte */ /* Abstände (4er-Raster) */ --st-1: 4px; --st-2: 8px; --st-3: 12px; --st-4: 16px; --st-5: 24px; --st-6: 32px; --st-7: 48px; --st-8: 64px; --st-9: 96px; --st-rand: clamp(20px, 5vw, 64px); --st-breite: 1440px; /* 1312 px Inhalt bei 64 px Rand (Dennis 17.09.: 1320 minimum, Textmaß bleibt 34 rem) */ /* Typo-Skala mobil, ab 700 und 1100 px in den Medienregeln unten */ --st-t-1: 12px; --st-t0: 14px; --st-t1: 17px; --st-t2: 20px; --st-t3: 26px; --st-t4: 36px; --st-t5: 44px; --st-t6: 60px; --st-titel: 'Instrument Sans VF', 'Archivo', 'Schibsted Grotesk', Arial, sans-serif; /* Fassung E (Dennis 18.09.): Instrument Sans mit Breitenachse statt Archivo; Archivo bleibt Rückfall und liegt weiter im Theme */ --st-schrift: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif; --st-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --st-r1: 3px; --st-r2: 6px; --st-fokus: 0 0 0 3px var(--st-grund), 0 0 0 6px var(--st-blau); /* Die Theme-Tokens der Veranstaltungsseiten auf den Ladenlook umbiegen, damit alles, was nicht in standort.css steht (Rechtstexte, Formulare, Einwilligung, Karte), mitzieht. */ --color-primary: var(--st-blau); --color-primary-dark: var(--st-blau-tief); --color-primary-text: var(--st-blau); --color-accent: var(--st-rot); --color-accent-text: var(--st-rot-text); --color-text: var(--st-text); --color-text-muted: var(--st-leise); --surface-page: var(--st-grund); --surface-raised: var(--st-flaeche); --surface-sunken: var(--st-flaeche); --color-border: var(--st-linie-leise); --border-header: var(--st-linie-leise); --font-heading: var(--st-titel); --font-display: var(--st-titel); --font-body: var(--st-schrift); --font-mono: var(--st-mono); --text-base: 1.0625rem; --radius-md: var(--st-r2); --radius-lg: var(--st-r2); background: var(--st-grund); color: var(--st-text); font-family: var(--st-schrift); font-size: var(--st-t1); line-height: 1.55; -webkit-font-smoothing: antialiased; } @media (min-width: 700px) { body.be-marke-laden { --st-t3: 28px; --st-t4: 44px; --st-t5: 58px; --st-t6: 84px; } } @media (min-width: 1100px) { body.be-marke-laden { --st-t1: 18px; --st-t2: 21px; --st-t3: 30px; --st-t4: 52px; --st-t5: 70px; --st-t6: 104px; } } @media (max-width: 640px) { body.be-marke-laden { --text-base: 1rem; } } /* ---------- Grundtypografie ---------- */ /* Titelschrift (Design-CEO, Dennis „B umsetzen“, 18.09.2026): Archivo trägt eine Breitenachse 62 bis 125, alle Titel liefen auf 96/700 und lasen sich wie derselbe Absatz in Groß. Große Stufen (H1, H2) jetzt Breite 88 und Schnitt 800, dichter und wie gesetzt; kleine Stufen (H3, H4, 21 px) bleiben bei 92/700, sonst kippen sie ins Schwarze. Der Leitsatz der Startseite bekommt 84 (unten). */ /* Fassung E (18.09.2026, Tafel https://claude.ai/artifact/FT977iXhBdn41QUkTd4Phb): Instrument Sans, Breite 90 und Schnitt 700 für H1 und H2 (die Schrift endet bei 700, keine Kunstfettung), H3 und H4 bei 95/700, Leitsatz 85. Archivo-Werte 88/800 davor. */ body.be-marke-laden h1, body.be-marke-laden h2, body.be-marke-laden h3, body.be-marke-laden h4 { font-family: var(--st-titel); font-variation-settings: "wdth" 90; font-weight: 700; letter-spacing: -0.03em; color: var(--st-tinte); text-wrap: balance; font-synthesis: none; } body.be-marke-laden h3, body.be-marke-laden h4 { font-variation-settings: "wdth" 95; font-weight: 700; letter-spacing: -0.01em; } body.be-marke-laden h1 { font-size: var(--st-t5); line-height: 0.98; } /* Titel der blauen Aufrufkästen: Die h2-Regel oben (0,1,2) schlug `.st-aufruf__titel` (0,1,0). Die Überschrift stand bei 52 px in Tinte, nur der Klick-Marker darin wurde auf 30 px und Weiß gestellt; die Zeile trug trotzdem die Höhe der 52-px-Schrift (28.09.2026). */ body.be-marke-laden .st-aufruf__titel { color: #fff; font-size: var(--st-t3); line-height: 1.1; } /* Zahlen und Titel in standort.css tragen 800 (Archivo); Instrument Sans endet bei 700, ohne diese Regel würde der Browser fetten */ body.be-marke-laden .st-preis b, body.be-marke-laden .st-auszeichnung__jahr, body.be-marke-laden .st-kachel__zahl, body.be-marke-laden .st-treff__zeit, body.be-marke-laden .st-kachel__wert, body.be-marke-laden .st-auszeichnung__titel { font-weight: 700; font-synthesis: none; } /* Leitsatz der Startseite: Entwurf 2 sah 84 und 8,4 vw vor, die Regel in standort.css (.st-hero__titel, 0,1,0) verlor gegen die h1-Regel hier (0,1,1); gemessen 70 px und Breite 96 am 18.09.2026. Hier mit Vorrang, Deckel 104 px (rund 100 bei 1440). */ body.be-marke-laden .st-hero__titel { font-size: clamp(44px, 5.6vw, 84px); font-variation-settings: "wdth" 85; letter-spacing: -0.035em; line-height: 0.94; } /* 80 px bei 1440 statt 101 (Dennis 18.09.: „Desktop einfach zu groß“) */ body.be-marke-laden h1.st-titel--recht { font-size: var(--st-t4); line-height: 1.02; } /* Rechtstexte: Abschnittsgröße statt Seitentitel */ body.be-marke-laden h2 { font-size: var(--st-t4); line-height: 1.0; } body.be-marke-laden h3 { font-size: var(--st-t2); line-height: 1.2; letter-spacing: -0.015em; } body.be-marke-laden p { line-height: 1.55; } body.be-marke-laden a { color: var(--st-blau); text-underline-offset: 0.18em; } body.be-marke-laden a:hover { color: var(--st-blau-tief); } body.be-marke-laden :focus-visible:not([tabindex="-1"]) { outline: none; box-shadow: var(--st-fokus); border-radius: var(--st-r1); } /* tabindex=-1: nur per Skript fokussierte Behälter (Einwilligungsleiste), kein Ring ohne Tastatur (18.09.) */ body.be-marke-laden .container { max-width: var(--st-breite); padding-inline: var(--st-rand); } /* Menüpunkt als Knopf (Klasse st-knopf am Menüpunkt, bs „Termin“, Dennis 18.09.2026): blaue Fläche, weiße Schrift, am Rechner als letzter Punkt mit Abstand, im mobilen Menü als volle Zeile in Blau. */ body.be-marke-laden .nav__item.st-knopf .nav__link { background: var(--st-blau); color: #fff; border-radius: var(--st-r1); padding: 10px 18px; font-weight: 700; } body.be-marke-laden .nav__item.st-knopf .nav__link:hover, body.be-marke-laden .nav__item.st-knopf .nav__link:focus-visible { background: var(--st-blau-tief); color: #fff; } body.be-marke-laden .nav__item.st-knopf.is-active .nav__link, body.be-marke-laden .nav__item.st-knopf.is-active .nav__link:hover { background: var(--st-blau-tief); color: #fff; } /* sonst gewinnt die is-active-Farbe: Blau auf Blau, 1,39:1 (Kontrastscan 18.09.) */ @media (min-width: 1100px) { body.be-marke-laden .nav__item.st-knopf { margin-left: 8px; } } @media (min-width: 1100px) and (max-width: 1399px) { body.be-marke-laden .nav__item.st-knopf .nav__link { padding: 8px 12px; } } @media (max-width: 1099px) { body.be-marke-laden .nav__item.st-knopf .nav__link { display: block; margin: 8px 0 0; text-align: center; padding: 14px 18px; } } /* ---------- Knöpfe: drei Formen, harte Kanten mit 6 px ---------- */ body.be-marke-laden .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 48px; padding: 0 var(--st-5); border-radius: var(--st-r2); font-family: var(--st-schrift); font-weight: 700; font-size: var(--st-t0); letter-spacing: 0; text-transform: none; border: 1.5px solid transparent; box-shadow: none; transform: none; transition: background .15s ease, color .15s ease, border-color .15s ease; } body.be-marke-laden .btn:hover { transform: none; box-shadow: none; } body.be-marke-laden .btn .be-icon-svg { font-size: 1.1em; } body.be-marke-laden .btn--primary { background: var(--st-blau); color: #fff; } body.be-marke-laden .btn--primary:hover { background: var(--st-blau-tief); color: #fff; } body.be-marke-laden .btn--outline { background: var(--st-flaeche); color: var(--st-tinte); border-color: var(--st-linie); } body.be-marke-laden .btn--outline:hover { border-color: var(--st-tinte); color: var(--st-tinte); background: var(--st-flaeche); } body.be-marke-laden .btn--white { background: var(--st-dunkel-text); color: var(--st-tinte); } body.be-marke-laden .btn--white:hover { background: #fff; color: var(--st-tinte); } body.be-marke-laden .btn--leise { background: transparent; color: var(--st-blau); padding-inline: 0; min-height: 0; border-radius: 0; border: 0; border-bottom: 1.5px solid currentColor; } body.be-marke-laden .btn--leise:hover { color: var(--st-blau-tief); } body.be-marke-laden .btn--lg { min-height: 52px; font-size: var(--st-t1); } /* ---------- Kopf ---------- */ body.be-marke-laden .site-header { background: var(--st-grund); border-bottom: 1px solid var(--st-linie-leise); box-shadow: none; } body.be-marke-laden .site-header.is-scrolled { box-shadow: none; } body.be-marke-laden .header__inner { min-height: 72px; height: auto; gap: var(--st-6); } /* layout.css gibt dem festen Kopf eine feste Höhe (--header-height); mit der Vorzeile darüber wächst er mit dem Inhalt. */ body.be-marke-laden .site-header, body.be-marke-laden .site-header.is-scrolled { height: auto; } /* ⚠️ Kein backdrop-filter am Kopf: Er macht den Kopf zum Bezugsrahmen für `position: fixed` und das mobile Menü-Panel öffnete nur 86 px hoch (Prüfung 21, 17.09.2026). Der Kopf bleibt deckend auf dem Seitengrund. */ body.be-marke-laden .site-header.is-scrolled .st-vorzeile { display: none; } body.be-marke-laden .site-header.is-scrolled .header__inner { min-height: 72px; } body.be-marke-laden .site-header.is-scrolled .header__logo img { max-height: none; width: 220px; } /* 220 statt 190 (Dennis 18.09.): unter 200 px wird die Unterzeile „Der Siegburger Laufladen“ unleserlich */ /* Vorzeile über dem Kopf (header.php, nur Läden): Adresse, Zeiten, Zustand, Telefon in Monospace. */ /* Vorzeile in Tinte wie der Fuß (Dennis 18.09.): die Seite beginnt und endet auf derselben Fläche. Schrift hell (16,5:1), Symbole und Telefon im Display-Blau (8,5:1), Zustandstext hell wie im Fuß. */ body.be-marke-laden .st-vorzeile { display: none; border-bottom: 0; background: var(--st-tinte); } body.be-marke-laden .st-vorzeile__innen { display: flex; align-items: center; gap: var(--st-6); min-height: 40px; font-family: var(--st-mono); font-size: 13px; letter-spacing: 0.02em; color: var(--st-dunkel-text); } body.be-marke-laden .st-vorzeile__punkt { display: inline-flex; align-items: center; gap: var(--st-2); color: inherit; text-decoration: none; white-space: nowrap; } body.be-marke-laden .st-vorzeile__punkt .st-icon { width: 18px; height: 18px; color: var(--st-dunkel-blau); } body.be-marke-laden .st-vorzeile__status { margin-left: auto; font-size: 13px; } body.be-marke-laden .st-vorzeile .st-status { color: var(--st-dunkel-text); } body.be-marke-laden .st-vorzeile__tel { font-weight: 500; color: #fff; } body.be-marke-laden .st-vorzeile__tel:hover { color: var(--st-dunkel-blau); } body.be-marke-laden .st-vorzeile :focus-visible { box-shadow: 0 0 0 3px var(--st-tinte), 0 0 0 6px #fff; } /* ⚠️ Die Vorgabe MUSS vor der Medienregel stehen: gleiche Spezifität, die spätere Regel gewinnt. Bis 17.09.2026 stand sie dahinter, --st-vorzeile war damit immer 0 und das Fotoband der Unterseiten lag 51 px unter dem Kopf. --st-kopf-hoehe ist die GEMESSENE Gesamthöhe des festen Kopfes (Vorzeile + Kopfzeile + Linien), auf die die Kopfbereiche ihren Abstand rechnen; --header-height aus dem Branding (100 px) kennt die Vorzeile nicht. */ body.be-marke-laden { --st-vorzeile: 0px; --st-kopf-hoehe: 73px; } @media (min-width: 1100px) { body.be-marke-laden { --st-vorzeile: 40px; --st-kopf-hoehe: 151px; } body.be-marke-laden .st-vorzeile { display: block; } } /* Demo-Band (nur Demoseite, `be_demo_band_an()`, Audit A2 28.09.2026): schmale Zeile ganz oben im festen Kopf, Weiß auf Laden-Blau (7,41:1), bleibt auch beim Scrollen stehen. Feste Höhe 28 px, eine Zeile: --st-kopf-hoehe wächst GENAU um diesen Betrag, sonst lägen Titelkarte und Fotoband unter dem Kopf. Zwei Klassen am body schlagen die Vorgaben oben unabhängig von der Reihenfolge. Kurzfassung bis 699 px (passt bei 320 px), ab 700 px der ganze Satz. */ body.be-marke-laden .be-demo-band { background: var(--st-blau); color: #fff; height: 28px; overflow: hidden; } body.be-marke-laden .be-demo-band__innen { display: block; text-align: center; height: 28px; font-size: 13px; line-height: 28px; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* kein flex: Flex-Elemente verlieren ihr führendes Leerzeichen („Demoseitemit“) */ body.be-marke-laden .be-demo-band strong { font-weight: 700; } body.be-marke-laden .be-demo-band__lang { display: none; } @media (min-width: 700px) { body.be-marke-laden .be-demo-band__lang { display: inline; } body.be-marke-laden .be-demo-band__kurz { display: none; } } body.be-marke-laden.be-mit-demo-band { --st-kopf-hoehe: 101px; } @media (min-width: 1100px) { body.be-marke-laden.be-mit-demo-band { --st-kopf-hoehe: 179px; } } /* Zwischen 1100 und 1279 px passen Adresse, Zeiten, Zustand und Telefon nicht in eine Zeile: die Adresse entfällt dort (steht im Fuß). */ @media (min-width: 1100px) and (max-width: 1279px) { body.be-marke-laden .st-vorzeile__punkt:first-child { display: none; } } /* Logo: 240 px auf dem Rechner (Dennis 17.09.: „viel zu klein“ bei 176), 150 px auf dem Handy. Die Datei ist ein Vektor, das bleibt scharf. Der Ortsclaim steht UNTER der Marke, nicht daneben: Nebeneinander kostete 373 px Breite, und bei 1440 px ragten Status und Telefon 270 px aus dem Kopf (gemessen 17.09.2026). */ body.be-marke-laden .header__logo img { width: 150px; height: auto; max-height: none; } /* Burger-Kopf (unter 1024 px): neben dem Logo stehen nur zwei Knöpfe. 190 statt 150 (Dennis 18.09.: „bisschen größer“), und zwar oben UND gescrollt: Gemessen war das Logo oben 150 px und gescrollt 220 px, es wuchs also beim Scrollen. Ein Maß für beide Zustände. */ @media (max-width: 1023px) { body.be-marke-laden .header__logo img, body.be-marke-laden .site-header.is-scrolled .header__logo img { width: 190px; } } @media (min-width: 1100px) { body.be-marke-laden .header__inner { min-height: 100px; } body.be-marke-laden .header__logo img { width: 240px; } } body.be-marke-laden .header__logo { display: inline-grid; justify-items: start; gap: 2px; text-decoration: none; } body.be-marke-laden .st-ortsclaim { font-family: var(--st-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--st-leise); white-space: nowrap; padding-left: 2px; } body.be-marke-laden .st-ortsclaim { display: none; } /* der Ortsclaim steht im Logo selbst */ body.be-marke-laden .nav__link { font-family: var(--st-schrift); font-weight: 500; font-size: 17px; color: var(--st-tinte); letter-spacing: 0; text-transform: none; white-space: nowrap; border-radius: 0; padding: var(--st-2) 0; margin-inline: 18px; border-bottom: 2px solid transparent; } /* Zwischen 1100 und 1279 px: sechs Punkte neben dem 240-px-Logo brauchen 15 px und 12 px Abstand (gemessen 17.09.: 830 px bei 17/18). */ /* Sieben Menüpunkte (mit Über uns, 17.09.): bis 1399 px die kompakte Stufe, bei 1280 px ragte das Menü sonst 2 px über den Rand */ @media (min-width: 1100px) and (max-width: 1399px) { body.be-marke-laden .nav__link { font-size: 15px; margin-inline: 11px; } body.be-marke-laden .header__inner { gap: var(--st-4); } } body.be-marke-laden .nav__link:hover { background: transparent; color: var(--st-tinte); border-color: var(--st-tinte); } body.be-marke-laden .nav__item.is-active > .nav__link { background: transparent; color: var(--st-blau); border-color: var(--st-blau); } body.be-marke-laden .header__actions { gap: var(--st-3); } body.be-marke-laden .header__social-link { display: none; } /* Status und Telefon im Kopf (Standort-Zweig in header.php) */ body.be-marke-laden .st-kopf-status { display: none; } /* Telefon: unter 1100 px als Symbolknopf im Kopf, darüber steht die Nummer in der Vorzeile (Regel steht am Ende des Kopfblocks). */ body.be-marke-laden .st-kopf-tel { display: inline-flex; align-items: center; justify-content: center; gap: var(--st-2); min-width: 44px; height: 44px; padding: 0 var(--st-3); border-radius: var(--st-r2); background: var(--st-blau); color: #fff; text-decoration: none; font-family: var(--st-mono); font-size: var(--st-t-1); letter-spacing: 0.04em; } body.be-marke-laden .st-kopf-tel:hover { background: var(--st-blau-tief); color: #fff; } body.be-marke-laden .st-kopf-tel .be-icon-svg { font-size: 20px; } body.be-marke-laden .st-kopf-tel span { display: none; } @media (min-width: 1100px) { body.be-marke-laden .header__actions .st-kopf-tel { display: none; } } body.be-marke-laden .nav__toggle { border: 1.5px solid var(--st-linie); border-radius: var(--st-r2); background: var(--st-flaeche); width: 48px; height: 48px; } body.be-marke-laden .hamburger__line { background: var(--st-tinte); } /* Mobiles Menü: Tinte statt Marken-Verlauf. Am Rechner bleibt die Navigation ohne Fläche. */ @media (min-width: 1100px) { body.be-marke-laden .nav { background: transparent; } } @media (max-width: 1099px) { body.be-marke-laden .nav { background: var(--st-tinte); } body.be-marke-laden .nav__kopf { border-bottom: 1px solid var(--st-dunkel-linie); } body.be-marke-laden .nav__mobile-cta { background: var(--st-blau); color: #fff; border-radius: var(--st-r2); } /* Menüpunkte wie auf den Veranstaltungsseiten (layout.css): 18 px, fett, weiß, volle Breite (Dennis 17.09.) */ body.be-marke-laden .nav__link { color: #fff; font-weight: 700; border-bottom: 1px solid var(--st-dunkel-linie); margin: 0; padding: var(--st-4) 0; font-size: 18px; width: 100%; } body.be-marke-laden .nav__item.is-active > .nav__link { color: var(--st-dunkel-blau); border-color: var(--st-dunkel-linie); } /* Hover und Fokus im dunklen Menü: die Rechner-Regel (Tinte) griff hier mit, Tinte auf Tinte (gemessen rgb(16,22,31), Dennis 18.09.). Display-Blau trägt 8,5:1 auf der Tinte. */ body.be-marke-laden .nav__link:hover, body.be-marke-laden .nav__link:focus-visible, body.be-marke-laden .nav__item.is-active > .nav__link:hover { color: var(--st-dunkel-blau); border-color: var(--st-dunkel-blau); background: transparent; } /* Logo im Menükopf: layout.css setzt 52 px Höhe (114 px breit), kleiner als im geschlossenen Kopf (150 px). Dennis 18.09.: zu klein. */ body.be-marke-laden .nav__kopf-logo { height: auto; width: min(210px, 58vw); max-width: none; } } /* ---------- Seitenabschnitte (allgemein) ---------- */ body.be-marke-laden .section, body.be-marke-laden .page-section { padding-block: clamp(56px, 8vw, 96px); background: transparent; } body.be-marke-laden .gallery-section.section { background: var(--st-flaeche); } /* Galerie (Wanderschuhe) weiß: die Regel darüber überschrieb die Weiß-Regel aus standort.css (gemessen 18.09., Flächenwechsel) */ /* Fließtextseiten (Rechtstexte): Spalte beginnt am linken Rand wie der Titel im Seitenkopf, nicht mittig; Abschnitts- titel im Text eine Stufe kleiner und ohne den blauen Balken der Veranstaltungsseiten (Dennis 17.09.2026). */ body.be-marke-laden .page-section { padding-top: var(--st-4); } body.be-marke-laden .page-section .container { max-width: var(--st-breite); } body.be-marke-laden .prose, body.be-marke-laden .page-prose, body.be-marke-laden .page-section__content { max-width: 42rem; margin-inline: 0; } body.be-marke-laden .page-prose h2, body.be-marke-laden .prose h2 { font-size: var(--st-t3); border-left: 0; padding-left: 0; margin: var(--st-7) 0 var(--st-3); } body.be-marke-laden .page-prose h3, body.be-marke-laden .prose h3 { font-size: var(--st-t2); margin: var(--st-5) 0 var(--st-2); } body.be-marke-laden .page-prose p, body.be-marke-laden .prose p { font-size: var(--st-t1); } /* ---------- Formulare ---------- */ body.be-marke-laden input[type="text"], body.be-marke-laden input[type="email"], body.be-marke-laden input[type="tel"], body.be-marke-laden select, body.be-marke-laden textarea { font: inherit; font-size: var(--st-t1); padding: 12px 14px; min-height: 48px; border: 1.5px solid var(--st-linie); border-radius: var(--st-r2); background: var(--st-flaeche); color: var(--st-tinte); } body.be-marke-laden input:focus-visible, body.be-marke-laden select:focus-visible, body.be-marke-laden textarea:focus-visible { border-color: var(--st-blau); box-shadow: var(--st-fokus); } /* ---------- Karte hinter Einwilligung ---------- */ body.be-marke-laden .be-map-gate { border-radius: 0; border: 1px solid var(--st-linie); background: var(--st-flaeche); background-image: linear-gradient(var(--st-linie-leise) 1px, transparent 1px), linear-gradient(90deg, var(--st-linie-leise) 1px, transparent 1px); background-size: 24px 24px; } /* Das Emoji der Kartensperre durch das Ortssymbol der Symbolwelt ersetzen (das Element trägt nur Text). */ body.be-marke-laden .be-map-gate__icon { font-size: 0; width: 40px; height: 40px; margin: 0 auto var(--st-3); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310161F' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 0 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.2' fill='%23E53134' stroke='none'/%3E%3C/svg%3E") center / 40px no-repeat; } body.be-marke-laden .be-map-gate__text { color: var(--st-text); } /* Verweise auf der Tinte (Fuß, Lauftreff-Band): die allgemeine Verweisfarbe Blau trägt dort nur 2,4:1. */ body.be-marke-laden .st-fuss a:not(.btn), body.be-marke-laden .st-abschnitt--dunkel a:not(.btn) { color: var(--st-dunkel-text); } body.be-marke-laden .st-fuss a:not(.btn):hover, body.be-marke-laden .st-abschnitt--dunkel a:not(.btn):hover { color: #fff; } body.be-marke-laden .st-fuss .st-fuss__nav a { color: var(--st-dunkel-text); } body.be-marke-laden .news-sidebar__date, body.be-marke-laden .news-meta__date { color: var(--st-leise); } /* ---------- Einwilligungsbanner ---------- */ body.be-marke-laden .be-consent { background: var(--st-tinte); color: var(--st-dunkel-text); border-radius: 0; } /* feste Fläche statt des Marken-Verlaufs der Veranstaltungsseiten */ body.be-marke-laden .consent-banner .btn--primary { background: var(--st-dunkel-text); color: var(--st-tinte); } /* ---------- Bewegung ---------- */ @media (prefers-reduced-motion: reduce) { body.be-marke-laden *, body.be-marke-laden *::before, body.be-marke-laden *::after { animation: none !important; transition: none !important; } } /* Fokus auf der dunklen Einwilligungsleiste: der Standardring (Grund + Blau) ist auf Tinte unsichtbar (UX-Runde 17.09.). */ body.be-marke-laden .be-consent :focus-visible, body.be-marke-laden .st-abschnitt--dunkel :focus-visible, body.be-marke-laden .st-fuss :focus-visible { box-shadow: 0 0 0 3px var(--st-tinte), 0 0 0 6px #fff; outline: none; } /* Tippziele im mobilen Menü: Kanalsymbole 44 x 44 statt 22 x 22. */ body.be-marke-laden .nav__social a { width: 44px; height: 44px; display: inline-grid; place-items: center; }