/* ============================================================ Marken-Look Rhein City Run (rcr), nur bei font_set = rcr ------------------------------------------------------------ Lädt als letztes Stylesheet (functions.php, `look`), Body-Klasse `be-marke-rcr`. Die übrigen Veranstaltungsseiten laden diese Datei nicht. Anlass (29.09.2026, Dennis: „Im Vergleich zu anderen Seiten fällt die optisch doch sehr ab“). ar, tt, wc und hk haben einen eigenen Look, rcr lief auf den nackten Grundregeln. Gemessen an rcr.westident.de bei 1440 und 390 px, Befunde je Abschnitt unten. Leitregel aus der Farbmessung (11.08.2026): Das Logo-Orange #EB7223 hat auf dem Papier 2,76:1. ORANGE DARF FLÄCHE SEIN, KEIN WORT. Links, Uhrzeiten und Leitsätze stehen in Tinte, das Orange liefert Unterstreichung, Kante und Fläche. Vorher standen an sechs Stellen orange Wörter auf Papier (2,4 bis 3,0:1). ============================================================ */ body.be-marke-rcr { --rcr-tinte: var(--color-text); --rcr-karte: var(--surface-raised); } /* 1. Verweise („Alle Meldungen →“, „Weiterlesen →“, „Alle Fotos →“): Tinte mit orangem Strich. Vorher Orange auf Papier bzw. auf der abgesenkten Fläche (2,43:1). */ body.be-marke-rcr .section__link, body.be-marke-rcr .news-card__link { color: var(--rcr-tinte); text-decoration: underline; text-decoration-color: var(--color-primary); text-decoration-thickness: 2px; text-underline-offset: 5px; } body.be-marke-rcr .section__link:hover, body.be-marke-rcr .news-card__link:hover { color: var(--color-primary-text); text-decoration-thickness: 3px; } /* 2. Leitsatz der Einleitung: war Orange (2,62:1) und brach „Städ-ten“ um. Jetzt Tinte an einer orangen Kante, ohne Silbentrennung, ausgeglichen umbrochen. */ body.be-marke-rcr .intro-section__claim { color: var(--rcr-tinte); border-left: 5px solid var(--color-primary); padding-left: 1rem; hyphens: manual; text-wrap: balance; } /* 3. Orange Leiste „Zwei Städte, ein Lauf“: Die Hauptzahl hat 176 px, die vier Werte darunter hatten 36 px mit 13 px Beschriftung (Verhältnis 5:1, Dennis: „Werte sehen zu klein aus“). Jetzt rund 60 px bei 1440 und eine lesbare Beschriftung. Schrift bleibt die Tinte auf Orange (5,6:1). */ body.be-marke-rcr .counter-sub__num { font-size: clamp(2.3rem, 4.2vw, 3.8rem); line-height: 1; } body.be-marke-rcr .counter-sub__label { font-size: 0.875rem; letter-spacing: 0.12em; margin-top: 0.4rem; } body.be-marke-rcr .counter-section__kicker { font-size: 0.875rem; } /* 4. Zeitplan der Infoseite: Uhrzeiten in Orange auf Papier (2,76:1). Tinte, die Zeile bekommt die orange Kante. */ body.be-marke-rcr .schedule-item__time { color: var(--rcr-tinte); } /* 5. Hervorgehobener Kasten („Siegerehrung im Steinhof“): grau auf grau und eine zu große Überschrift. Jetzt eine Karte mit oranger Kante, Überschrift eine Stufe kleiner. */ body.be-marke-rcr .info-highlight { background: var(--rcr-karte); border-left: 6px solid var(--color-primary); border-radius: var(--radius-lg, 12px); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 40px -28px rgba(0,0,0,.35); } body.be-marke-rcr .info-highlight h2, body.be-marke-rcr .info-highlight h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; margin-bottom: 0.6rem; } /* 6. Knöpfe auf Papier: Der Umrissknopf stand in Orange (2,76:1), der inaktive Anmeldeknopf war ein blasses Orange mit 45 % Deckkraft. Umriss in Tinte; „Anmeldung öffnet bald“ wie auf der Kopfkarte als Auskunft (gestrichelter Rahmen, Uhr), nicht als toter Knopf. */ body.be-marke-rcr .page-cta .btn--outline, body.be-marke-rcr main .btn--outline { color: var(--rcr-tinte); border-color: var(--rcr-tinte); } body.be-marke-rcr main .btn--outline:hover { background: var(--rcr-tinte); color: var(--surface-page); } body.be-marke-rcr .page-cta .btn--disabled { opacity: 1; background: transparent; border: 2px dashed var(--color-primary-dark); color: var(--color-primary-text); text-shadow: none; gap: .55rem; } body.be-marke-rcr .page-cta .btn--disabled::before, body.be-marke-rcr .photo-band .btn--disabled::before { content: ""; width: 1.1em; height: 1.1em; flex: none; 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='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat center / contain; } /* 7. FAQ: 27 graue Streifen auf grauem Papier, und ein geöffneter Eintrag sah aus wie ein geschlossener (Dennis: „geöffnet keinen kontrastreichen Hintergrund, verschwimmen“). Jetzt weiße Karten mit Abstand; der geöffnete Titel steht auf der Tinte, der Pfeil in Orange. */ body.be-marke-rcr .faq-list { gap: 0.5rem; background: transparent; } body.be-marke-rcr .faq-item { background: var(--rcr-karte); border: 1px solid var(--color-border); border-radius: 10px; } body.be-marke-rcr .faq-item summary { background: var(--rcr-karte); font-size: var(--text-base); font-weight: 600; color: var(--rcr-tinte); } body.be-marke-rcr .faq-item summary::after { color: var(--color-primary-text); opacity: 1; } body.be-marke-rcr .faq-item summary:hover { background: color-mix(in srgb, var(--color-primary) 9%, var(--rcr-karte)); color: var(--rcr-tinte); } body.be-marke-rcr .faq-item[open] { border-color: var(--color-dark); } body.be-marke-rcr .faq-item[open] summary { background: var(--color-dark); color: var(--surface-page); font-weight: 700; } body.be-marke-rcr .faq-item[open] summary::after { color: var(--color-primary-schrift, var(--color-primary)); } body.be-marke-rcr .faq-item__body { background: var(--rcr-karte); padding-top: 1.1rem; } /* 8. Städte-Duell: Die beiden Städte sind die Aussage der Karte und standen bei 26 px. */ body.be-marke-rcr .be-duell__name { font-size: clamp(1.4rem, 3vw, 2.4rem); } /* 9. Aufruf-Band über dem Foto („Sichere dir deinen Startplatz“): Schwarz zu 46 % PLUS der orange-braune Verlauf machten das Foto matschig braun. Jetzt ein neutraler Verlauf von oben nach unten, das Foto bleibt ein Foto. Der inaktive Knopf wird Auskunft statt grauer Fläche. */ body.be-marke-rcr .photo-band__overlay { /* Oben .48 statt .42 (09.10.2026): Der Text steht im oberen Drittel, Prüfung 30 maß dort 4,48:1 (nötig 4,5). */ background: linear-gradient(180deg, rgba(20,20,19,.48) 0%, rgba(20,20,19,.60) 55%, rgba(20,20,19,.72) 100%); } body.be-marke-rcr .photo-band .btn--disabled { opacity: 1; background: rgba(20,20,19,.35); border: 2px dashed rgba(255,255,255,.85); color: #FFFFFF; text-shadow: none; gap: .55rem; } /* 10. „Nichts verpassen“ über dem Fuß: weiße Schrift auf Orange (3,02:1), dazu der pinke Instagram-Knopf auf Orange. Schrift in Tinte (5,6:1), Kanal-Knöpfe als Tinte-Flächen. */ body.be-marke-rcr .footer__newsletter, body.be-marke-rcr .footer__newsletter-title, body.be-marke-rcr .footer__newsletter-text, body.be-marke-rcr .footer__newsletter-text p { color: var(--color-text-on-primary); } body.be-marke-rcr .footer__newsletter .reg-social-btn { background: var(--color-dark); color: #FFFFFF; box-shadow: none; } body.be-marke-rcr .footer__newsletter .reg-social-btn:hover { background: #000000; color: #FFFFFF; } /* 11. Aktiver Menüpunkt: Orange als Wort auf 6 % Orange (rund 2,6:1). Tinte, das Orange wird zur Unterkante des Feldes. Nur ab 1024 px, im mobilen Menü steht die Schrift auf dem dunklen Verlauf. */ @media (min-width: 1024px) { body.be-marke-rcr .nav__item.is-active > .nav__link, body.be-marke-rcr .nav__link[aria-current="page"] { color: var(--rcr-tinte); box-shadow: inset 0 -3px 0 var(--color-primary); } } /* 12. Logo im Burger-Menü: 52 px hoch, die Unterzeile des RCR-Logos wird erst ab rund 104 px lesbar (gemessen 11.08.2026). 92 px, dieselbe Höhe wie im gescrollten Kopf auf dem Handy. */ @media (max-width: 1023px) { body.be-marke-rcr .nav__kopf-logo { height: 92px; max-width: 70vw; } }