/* * 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; } /* 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; } } /* 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: 44px; height: 44px; } 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; }