/*
 * marke-wander.css – Look der 1000 Herzen Wander-Challenge Mülheim (Initiator: Contilia GmbH)
 * Wird nur mit font_set = wander geladen (Body-Klasse be-marke-wander), ZULETZT.
 *
 * Richtung „Contilia 2.0 / Höhenlinie“ (27.09.2026):
 *   - Contilia-Blau #1F3179 führt, Orange #F28F00 ist Signal und NUR Fläche oder Schrift auf Blau
 *     (Orange auf Papier: 2,18:1, gemessen). Tiefes Blau #141D45 für Flächen mit Gewicht.
 *   - Signatur: Höhenlinien einer Wanderkarte (assets/img/muster/hoehenlinien.svg, als Maske,
 *     damit die Farbe hier entschieden wird). Sie stehen im Kopfbild, im Faktenband, im
 *     Spendenband und im Fuß, sonst nirgends.
 *   - Typografie: Fraunces (optische Größen) für Überschriften in Groß- und Kleinschreibung,
 *     Hanken Grotesk für alles, was bedient wird (Knöpfe, Menü, Beschriftungen).
 *   - Brücke zur nächsten Contilia-Veranstaltung: Plakette, Grundfarben und diese Datei;
 *     eine zweite Veranstaltung ändert nur die Tokens unten.
 */

body.be-marke-wander {
    --w-blau: #1F3179;
    --w-blau-tief: #141D45;
    --w-orange: #F28F00;
    --w-papier: #F5F3EE;
    --w-ink: #1B2233;
    --w-grau: #4A5266;
    --w-linie: rgba(31, 49, 121, 0.14);
    --w-muster: url('../img/muster/hoehenlinien.svg');
    --w-radius: 18px;
    color: var(--w-ink);
    hyphens: manual;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ── Typografie ─────────────────────────────────────────────────────────────── */
body.be-marke-wander :is(h1, h2, h3, h4, .section__title, .intro-section__title, .photo-band__title,
                         .be-routen__heading, .be-rundkurs__heading, .be-faq__heading, .cta-card__title) {
    font-family: Fraunces, Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.018em;
    hyphens: none;
    text-wrap: balance;
    color: inherit;
}
body.be-marke-wander :is(h2, .section__title, .intro-section__title, .be-routen__heading, .be-rundkurs__heading, .be-faq__heading) {
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    line-height: 1.04;
}
body.be-marke-wander :is(.section__kicker, .be-routen__kicker, .be-rundkurs__kicker, .be-faq__kicker, .photo-band__kicker) {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Hanken Grotesk', Arial, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--w-blau);
}
/* Die Vorzeile trägt eine kurze orange Linie: der Weg, auf dem alles steht. */
body.be-marke-wander :is(.section__kicker, .be-routen__kicker, .be-rundkurs__kicker, .be-faq__kicker, .photo-band__kicker)::before {
    content: '';
    width: 1.75rem;
    height: 3px;
    border-radius: 2px;
    background: var(--w-orange);
    flex: none;
}
body.be-marke-wander .section__header--center .section__kicker { justify-content: center; }

/* ── Knöpfe: Grotesk, rund, Orange ist die Handlung ─────────────────────────── */
body.be-marke-wander .btn {
    font-family: 'Hanken Grotesk', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    border-radius: 999px;
    padding-inline: 1.6em;
}
body.be-marke-wander .btn--primary,
body.be-marke-wander .btn--white {
    background: var(--w-orange);
    border-color: var(--w-orange);
    color: var(--w-blau-tief);
}
body.be-marke-wander .btn--primary:hover,
body.be-marke-wander .btn--white:hover {
    background: #FFA326;
    border-color: #FFA326;
    color: var(--w-blau-tief);
}
body.be-marke-wander .btn--outline {
    background: transparent;
    border: 2px solid var(--w-blau);
    color: var(--w-blau);
}
body.be-marke-wander .btn--outline:hover { background: var(--w-blau); color: #ffffff; }
body.be-marke-wander .btn--ghost {
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.85);
    color: #ffffff;
    backdrop-filter: blur(6px);
}
body.be-marke-wander .btn--ghost:hover { background: #ffffff; color: var(--w-blau-tief); }
/* „Anmeldung 2027 folgt“: kein toter schwarzer Kasten, sondern ein ruhiger Hinweis im Orange. */
body.be-marke-wander .btn--disabled {
    background: rgba(242, 143, 0, 0.16);
    border: 2px solid var(--w-orange);
    color: #ffffff;
    opacity: 1;
}

/* ── Kopf ───────────────────────────────────────────────────────────────────── */
body.be-marke-wander .site-header { background: #ffffff; border-bottom: 1px solid var(--w-linie); }
body.be-marke-wander .nav__link { font-family: 'Hanken Grotesk', Arial, sans-serif; font-weight: 600; }
/* ⚠️ Farbe und Unterstrich nur am Rechner, wo das Menü auf der weißen Kopfleiste steht. Im Burger-Panel
   (dunkler Verlauf) stand die Schrift sonst in tiefem Blau auf Dunkelblau (Dennis 28.09.2026: „so nicht
   lesbar“); dort gilt das Weiß aus layout.css wie auf allen Schwesterseiten. */
@media (min-width: 1024px) {
    body.be-marke-wander .nav__link {
        color: var(--w-blau-tief);
        background-image: linear-gradient(var(--w-orange), var(--w-orange));
        background-size: 0 3px;
        background-position: 0 100%;
        background-repeat: no-repeat;
        transition: background-size 0.25s ease, color 0.2s ease;
    }
    body.be-marke-wander .nav__link:hover,
    body.be-marke-wander .nav__item.current-menu-item > .nav__link { background-size: 100% 3px; color: var(--w-blau); }
}
body.be-marke-wander .header__social-link { color: var(--w-blau); }

/* ── Kopfbild ──────────────────────────────────────────────────────────────── */
body.be-marke-wander .hero__overlay {
    background:
        linear-gradient(90deg, rgba(20, 29, 69, 0.92) 0%, rgba(20, 29, 69, 0.66) 38%, rgba(20, 29, 69, 0.08) 70%),
        linear-gradient(0deg, rgba(20, 29, 69, 0.55) 0%, rgba(20, 29, 69, 0) 40%);
}
/* Höhenlinien über dem Bild, nur auf der dunklen Seite sichtbar (Maske läuft nach rechts aus). */
body.be-marke-wander .hero { position: relative; }
body.be-marke-wander .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: #ffffff;
    opacity: 0.16;
    -webkit-mask: var(--w-muster) center / cover no-repeat, linear-gradient(90deg, #000 0%, #000 35%, transparent 65%);
    -webkit-mask-composite: source-in;
    mask: var(--w-muster) center / cover no-repeat intersect, linear-gradient(90deg, #000 0%, #000 35%, transparent 65%);
}
body.be-marke-wander .hero__content { position: relative; z-index: 2; }
body.be-marke-wander .hero__title {
    font-size: clamp(3.1rem, 7.2vw, 7rem);
    line-height: 0.94;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #ffffff;
    text-shadow: none;
}
body.be-marke-wander .hero__title :is(.be-akzent, [class*="akzent"]) { color: var(--w-orange); }
body.be-marke-wander .hero__meta { font-family: 'Hanken Grotesk', Arial, sans-serif; font-weight: 600; letter-spacing: 0.02em; }
body.be-marke-wander .hero__meta-sep { display: none; }
body.be-marke-wander .hero__actions { gap: 0.75rem; }

/* ── Faktenband: tiefes Blau, Höhenlinien, Zahlen in der Anzeigeschrift ──────── */
body.be-marke-wander .facts-bar {
    position: relative;
    background: var(--w-blau-tief);
    overflow: hidden;
}
body.be-marke-wander .facts-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #ffffff;
    opacity: 0.07;
    -webkit-mask: var(--w-muster) 30% 40% / 1400px auto repeat;
    mask: var(--w-muster) 30% 40% / 1400px auto repeat;
    pointer-events: none;
}
body.be-marke-wander .facts-bar__inner { position: relative; }
body.be-marke-wander .facts-bar__icon { color: var(--w-orange); }
body.be-marke-wander .facts-bar__value {
    font-family: Fraunces, Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    color: #ffffff;
}
body.be-marke-wander .facts-bar__label {
    font-family: 'Hanken Grotesk', Arial, sans-serif;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.82);
}

/* ── Strecken mit Höhenprofil ──────────────────────────────────────────────── */
body.be-marke-wander .be-routen__route {
    position: relative;
    border: 1px solid var(--w-linie);
    border-radius: var(--w-radius);
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(20, 29, 69, 0.04), 0 18px 40px -28px rgba(20, 29, 69, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
body.be-marke-wander .be-routen__route:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 0 rgba(20, 29, 69, 0.04), 0 28px 50px -30px rgba(20, 29, 69, 0.45);
}
body.be-marke-wander .be-routen__label {
    font-family: Fraunces, Georgia, serif;
    font-size: clamp(2.8rem, 4.6vw, 3.8rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    color: var(--w-blau);
}
body.be-marke-wander .be-routen__titel {
    font-weight: 700;
    color: var(--w-ink);
}
body.be-marke-wander .be-routen__flaeche { fill: var(--w-orange); opacity: 0.2; }
body.be-marke-wander .be-routen__linie { stroke: var(--w-blau); stroke-width: 2.25; }
body.be-marke-wander .be-routen__ziel { fill: var(--w-orange); stroke: #ffffff; stroke-width: 2; }
body.be-marke-wander .be-routen__daten {
    padding-top: 0.9rem;
    border-top: 1px solid var(--w-linie);
}
body.be-marke-wander .be-routen__daten dt { color: var(--w-grau); font-size: 0.8125rem; }
body.be-marke-wander .be-routen__daten dd { font-family: Fraunces, Georgia, serif; font-size: 1.35rem; font-weight: 600; color: var(--w-blau-tief); }
body.be-marke-wander .be-routen__note { color: var(--w-grau); }
body.be-marke-wander .be-routen__link {
    border: 1.5px solid var(--w-linie);
    color: var(--w-blau);
    background: #ffffff;
    transition: border-color 0.2s ease, background 0.2s ease;
}
body.be-marke-wander .be-routen__link:hover { border-color: var(--w-orange); background: rgba(242, 143, 0, 0.12); color: var(--w-blau-tief); }
body.be-marke-wander .be-routen__link--gpx { background: var(--w-blau); border-color: var(--w-blau); color: #ffffff; }
/* Hover im Contilia-Orange (Dennis 28.09.2026: tiefes Blau wirkte fast schwarz), Schrift tiefblau wie auf allen orangefarbenen Knöpfen (6,9:1). */
body.be-marke-wander .be-routen__link--gpx:hover { background: var(--w-orange); border-color: var(--w-orange); color: var(--w-blau-tief); }
body.be-marke-wander .be-routen__fuss {
    padding: 1.25rem 1.5rem;
    border-radius: var(--w-radius);
    background: rgba(31, 49, 121, 0.05);
}
body.be-marke-wander .be-routen__start > span:first-child { color: var(--w-blau); }

/* ── Rundenplan (Block `rundkurs`, 28.09.2026, Herz-Kreislauf Essen) ───────────
   Karte auf warmem Papier mit Höhenlinien wie das Faktenband: Gelände, das nicht von der Strecke
   ablenkt (Dennis 28.09.: „schöneren Hintergrund als nur weiß“). Runden in Contilia-Blau und -Orange;
   Orange ist Linie, Ring und Rand, nie Schrift (auf Papier 2,18:1). */
body.be-marke-wander .be-rundkurs__flaeche { fill: #FFFFFF; fill-opacity: 0.75; }
body.be-marke-wander .be-rundkurs { --rk-1: var(--w-blau); --rk-2: var(--w-orange); --rk-grund: #FBFAF6; --rk-tinte: var(--w-blau-tief); --rk-sel: var(--w-orange); }
body.be-marke-wander .be-rundkurs__karte {
    position: relative; isolation: isolate;
    border: 1px solid var(--w-linie); border-radius: var(--w-radius);
    background: radial-gradient(120% 90% at 30% 20%, #FFFFFF 0%, #FBFAF6 55%, #F3F0E8 100%);
    box-shadow: 0 1px 0 rgba(20, 29, 69, 0.04), 0 18px 40px -28px rgba(20, 29, 69, 0.35);
}
body.be-marke-wander .be-rundkurs__karte::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: var(--w-blau); opacity: 0.09;
    -webkit-mask: var(--w-muster) center / 900px auto; mask: var(--w-muster) center / 900px auto;
}
body.be-marke-wander :is(.be-rundkurs__punkt text, .be-rundkurs__nord text, .be-rundkurs__massstab text, .be-rundkurs__schild text) { font-family: 'Hanken Grotesk', Arial, sans-serif; }
body.be-marke-wander .be-rundkurs__schild rect { stroke: var(--w-linie); }
body.be-marke-wander .be-rundkurs__schild--lauf rect { fill: var(--w-blau); }
body.be-marke-wander .be-rundkurs__schild--lauf text { fill: #FFFFFF; }
body.be-marke-wander .be-rundkurs__legende { border-top-color: var(--w-linie); color: var(--w-ink); }
body.be-marke-wander .be-rundkurs__ort--start .be-rundkurs__marke { background: var(--w-blau-tief); border-color: var(--w-blau-tief); }
body.be-marke-wander .be-rundkurs__marke { color: var(--w-blau-tief); }
body.be-marke-wander :is(.be-rundkurs__wahl, .be-rundkurs__startort) {
    border: 1px solid var(--w-linie); border-radius: var(--w-radius); background: #ffffff;
    box-shadow: 0 1px 0 rgba(20, 29, 69, 0.04), 0 14px 32px -26px rgba(20, 29, 69, 0.35);
}
body.be-marke-wander .be-rundkurs__wahl { border-left-width: 5px; }
body.be-marke-wander .be-rundkurs__lauf[data-linie="1"] .be-rundkurs__wahl { border-left-color: var(--w-blau); }
body.be-marke-wander .be-rundkurs__lauf[data-linie="2"] .be-rundkurs__wahl { border-left-color: var(--w-orange); }
body.be-marke-wander .be-rundkurs__label { font-family: Fraunces, Georgia, serif; font-weight: 600; letter-spacing: -0.03em; color: var(--w-blau); }
body.be-marke-wander .be-rundkurs__zeit { font-family: 'Hanken Grotesk', Arial, sans-serif; color: var(--w-blau-tief); }
body.be-marke-wander .be-rundkurs__titel { color: var(--w-ink); }
body.be-marke-wander :is(.be-rundkurs__note, .be-rundkurs__rechnung span) { color: var(--w-grau); }
/* Start und Ziel: tiefes Blau als Fläche, Flagge in Orange, Knopf wie die übrigen Streckenverweise. */
body.be-marke-wander .be-rundkurs__startort { background: var(--w-blau-tief); border-color: var(--w-blau-tief); color: #FFFFFF; }
body.be-marke-wander .be-rundkurs__startort-marke { background: var(--w-orange); }
body.be-marke-wander .be-rundkurs__startort-marke { color: var(--w-blau-tief); }
body.be-marke-wander .be-rundkurs__startort-titel { color: var(--w-orange); font-family: 'Hanken Grotesk', Arial, sans-serif; }
body.be-marke-wander .be-rundkurs__route { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.55); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
body.be-marke-wander .be-rundkurs__route:hover { background: var(--w-orange); border-color: var(--w-orange); color: var(--w-blau-tief); }
body.be-marke-wander .be-rundkurs__route:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }

/* ── Google-Karte (Block `karte`) in voller Inhaltsbreite (Dennis 28.09.2026, wc und hk) ──────
   Der Kern begrenzt sie auf 68 rem, damit eine Streckenkarte nicht fensterbreit und flach wird. Hier
   reicht sie bündig mit den übrigen Abschnitten über die Inhaltsspalte; die Höhe wächst mit der Breite
   (der Kern setzt 460 px inline, !important nötig). */
body.be-marke-wander .be-karte__rahmen { max-width: none; }
body.be-marke-wander .be-karte .be-map-gate { --be-map-h: clamp(420px, 44vw, 620px) !important; min-height: var(--be-map-h) !important; border-radius: var(--w-radius); }

/* ── Einleitung mit Foto ───────────────────────────────────────────────────── */
body.be-marke-wander .intro-section__photo img { border-radius: var(--w-radius); }
body.be-marke-wander .intro-section__photo-accent {
    border-color: var(--w-orange);
    border-radius: var(--w-radius);
}
body.be-marke-wander .intro-section__claim {
    font-family: Fraunces, Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    line-height: 1.3;
    color: var(--w-blau);
    border-left: 3px solid var(--w-orange);
    padding-left: 1rem;
}
body.be-marke-wander .intro-section__body { color: var(--w-grau); }

/* ── Karten mit Foto ───────────────────────────────────────────────────────── */
body.be-marke-wander .cta-card {
    border: 1px solid var(--w-linie);
    border-radius: var(--w-radius);
    overflow: hidden;
    box-shadow: 0 18px 40px -30px rgba(20, 29, 69, 0.4);
}
body.be-marke-wander .cta-card__title { font-size: 1.55rem; line-height: 1.12; letter-spacing: -0.015em; color: var(--w-blau-tief); }
body.be-marke-wander .cta-card__text { color: var(--w-grau); }
body.be-marke-wander .cta-card__arrow { color: var(--w-orange); }

/* ── Spendenband: das Foto trägt, Blau und Höhenlinien rahmen ──────────────── */
body.be-marke-wander .photo-band__overlay {
    background: linear-gradient(90deg, rgba(20, 29, 69, 0.94) 0%, rgba(20, 29, 69, 0.78) 45%, rgba(20, 29, 69, 0.2) 100%);
}
body.be-marke-wander .photo-band { position: relative; }
body.be-marke-wander .photo-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--w-orange);
    opacity: 0.22;
    -webkit-mask: var(--w-muster) 70% 50% / cover no-repeat, linear-gradient(90deg, #000 0%, transparent 60%);
    -webkit-mask-composite: source-in;
    mask: var(--w-muster) 70% 50% / cover no-repeat intersect, linear-gradient(90deg, #000 0%, transparent 60%);
    pointer-events: none;
}
body.be-marke-wander .photo-band__content { position: relative; z-index: 1; }
body.be-marke-wander .photo-band__kicker { color: var(--w-orange); }
body.be-marke-wander .photo-band__title { font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.02; color: #ffffff; }

/* ── Galerie ───────────────────────────────────────────────────────────────── */
body.be-marke-wander .gallery-item { border-radius: 14px; overflow: hidden; }

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
body.be-marke-wander .faq-item { border: 1px solid var(--w-linie); border-radius: 14px; background: #ffffff; margin-bottom: 0.6rem; }
body.be-marke-wander .faq-item > summary { font-weight: 700; color: var(--w-blau-tief); }
body.be-marke-wander .faq-item > summary::marker,
body.be-marke-wander .faq-item > summary::-webkit-details-marker { color: var(--w-orange); }
body.be-marke-wander .be-faq + .be-faq { padding-top: 0; }

/* ── Partner ───────────────────────────────────────────────────────────────── */
body.be-marke-wander .sponsors-wall__item { border-radius: 14px; border: 1px solid var(--w-linie); box-shadow: none; }
body.be-marke-wander .sponsors-wall__tier-label { display: none; }

/* ── Fuß: tiefes Blau mit Höhenlinien ─────────────────────────────────────── */
body.be-marke-wander .footer__newsletter { background: var(--w-blau); }
body.be-marke-wander .footer__main {
    position: relative;
    background: var(--w-blau-tief);
    color: rgba(255, 255, 255, 0.86);
    overflow: hidden;
}
body.be-marke-wander .footer__main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #ffffff;
    opacity: 0.05;
    -webkit-mask: var(--w-muster) 80% 60% / 1600px auto no-repeat;
    mask: var(--w-muster) 80% 60% / 1600px auto no-repeat;
    pointer-events: none;
}
body.be-marke-wander .footer__grid { position: relative; }
body.be-marke-wander .footer__heading { font-family: 'Hanken Grotesk', Arial, sans-serif; color: var(--w-orange); letter-spacing: 0.14em; }
body.be-marke-wander .footer__main a { color: #ffffff; }
body.be-marke-wander .footer__bottom { background: #0E1533; color: rgba(255, 255, 255, 0.72); }
body.be-marke-wander .footer__bottom a { color: rgba(255, 255, 255, 0.86); }

/* ── Seitenköpfe der Unterseiten ───────────────────────────────────────────── */
body.be-marke-wander .page-banner__title { font-family: Fraunces, Georgia, serif; text-transform: none; letter-spacing: -0.025em; }

@media (prefers-reduced-motion: reduce) {
    body.be-marke-wander .be-routen__route,
    body.be-marke-wander .nav__link { transition: none; }
    body.be-marke-wander .be-routen__route:hover { transform: none; }
}

/* ── Nachbesserungen Runde 1 (Bildabgleich 27.09.2026) ─────────────────────── */
/* Spendenband ohne Parallaxe: `fixed` zeigt auf iOS und in Seitenabzügen einen falschen Ausschnitt. */
body.be-marke-wander .photo-band { background-attachment: scroll; background-position: center 55%; }
/* Fuß: jede Zeile lesbar auf dem tiefen Blau (vorher Grau auf Blau). */
body.be-marke-wander .footer__newsletter-title { color: #ffffff; font-family: Fraunces, Georgia, serif; }
body.be-marke-wander .footer__newsletter-desc { color: rgba(255, 255, 255, 0.86); }
body.be-marke-wander :is(.footer__tagline, .footer__location, .footer__address, .footer__organizer, .footer__contact-item) { color: rgba(255, 255, 255, 0.84); }
body.be-marke-wander .footer__copyright { color: rgba(255, 255, 255, 0.78); }
body.be-marke-wander .footer__location .be-icon-svg { color: var(--w-orange); }
body.be-marke-wander .sponsors-section { padding-bottom: clamp(3rem, 6vw, 5rem); }
body.be-marke-wander .sponsors-cta:empty { display: none; }

/* ── Nachbesserungen Runde 2 (Handy, 390 px) ──────────────────────────────── */
/* Überschriften werden nie getrennt; lange Wörter („Ringlokschuppen“) bekommen stattdessen Platz. */
body.be-marke-wander :is(h1, h2, h3, .facts-bar__value, .photo-band__title, .hero__title) { hyphens: none !important; -webkit-hyphens: none !important; }
body.be-marke-wander :is(p, li) { hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 639px) {
    body.be-marke-wander .facts-bar__value { font-size: 1.12rem; }
    body.be-marke-wander .facts-bar__label { font-size: 0.875rem; }
    /* Spendenband: auf dem Handy steht der Text über dem ganzen Foto, also überall abdunkeln. */
    body.be-marke-wander .photo-band__overlay { background: linear-gradient(180deg, rgba(20, 29, 69, 0.9) 0%, rgba(20, 29, 69, 0.84) 100%); }
    body.be-marke-wander .photo-band__title { font-size: 2rem; }
    body.be-marke-wander .be-routen__route { padding: 1.25rem; }
}
/* Die Marke von Facebook trägt weiße Schrift nur mit 4,23:1; eine Stufe dunkler erreicht AA. */
body.be-marke-wander .reg-social-btn--facebook { background: #0F63D6; }
/* Sozialsymbole im Kopf: Trefferfläche 30 × 30 statt 22 × 22 (WCAG 2.2, mindestens 24). */
body.be-marke-wander .header__social-link { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 30px; }

/* ── Nachbesserungen Runde 3 (Dennis 28.09.2026) ──────────────────────────── */
/* Überschriften im Fließtext (Impressum, Datenschutz, Teilnahmebedingungen, Seiteninhalt) in
   Abschnittsgröße. Die Titelregel oben (bis 52 px) traf auch `.prose h2`: `:is()` bringt die
   Spezifität seiner Klassen mit und schlägt damit `.prose h2` aus main.css. Spalte bündig zum
   Titel (keine Randlinie mit Einzug), getrennt durch eine Haarlinie. */
body.be-marke-wander .prose h2 {
    font-size: clamp(1.3rem, 1.05rem + 0.7vw, 1.625rem);
    line-height: 1.2;
    color: var(--w-blau-tief);
    border-left: 0;
    padding-left: 0;
    margin: 2.75rem 0 0.9rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--w-linie);
}
body.be-marke-wander .prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
body.be-marke-wander .prose h3 {
    font-size: clamp(1.08rem, 1rem + 0.3vw, 1.2rem);
    line-height: 1.3;
    color: var(--w-blau-tief);
    margin: 1.9rem 0 0.5rem;
}
body.be-marke-wander .prose h4 { font-family: 'Hanken Grotesk', Arial, sans-serif; color: var(--w-grau); }
body.be-marke-wander .page-prose { max-width: 70ch; }
body.be-marke-wander .prose :is(p, li) { color: var(--w-ink); }
body.be-marke-wander .prose ol { padding-left: 1.4em; margin: 0 0 1.1rem; }
body.be-marke-wander .prose ol > li { margin-bottom: 0.45rem; padding-left: 0.2em; }
body.be-marke-wander .prose ol > li::marker { color: var(--w-blau); font-weight: 700; }
/* Vorspann der Teilnahmebedingungen: Vertragspartner als ruhiger Kasten statt Fließtext. */
body.be-marke-wander .prose .rechtstext-kopf {
    background: #ffffff;
    border: 1px solid var(--w-linie);
    border-radius: 14px;
    padding: 1.1rem 1.35rem;
    margin-bottom: 2rem;
}
body.be-marke-wander .prose .rechtstext-kopf p:last-child { margin-bottom: 0; }

/* Hervorhebung (Punkt 5): wie ein Leuchtstift auf der Wanderkarte, sparsam gesetzt über <mark>.
   `strong` bleibt Beschriftung („Adresse:“) und leuchtet nicht mit. Schrift bleibt tiefes Blau auf
   hellem Orange (Kontrast über 12:1). */
body.be-marke-wander mark {
    font-weight: 700;
    color: var(--w-blau-tief);
    background: linear-gradient(transparent 58%, rgba(242, 143, 0, 0.30) 58%, rgba(242, 143, 0, 0.30) 92%, transparent 92%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding-inline: 0.08em;
}

/* Zitat auf der Initiative-Seite: aufrecht. Die kursive Fraunces zeichnet das „h“ mit Schwung
   („Einnafimen“ gelesen), und die Trennung kam aus dem inneren Bearbeitungsfeld (`hyphens` erbt). */
body.be-marke-wander .intro-section__claim { font-style: normal; font-weight: 600; }
body.be-marke-wander :is(.intro-section__claim, .intro-section__claim *) { hyphens: none !important; -webkit-hyphens: none !important; }

/* Block projekte: Karten mit großem Radius, Betrag als Leiste über dem Titel, Karten ohne Foto
   als Fläche mit Höhenlinien (dieselbe Signatur wie Kopfbild und Fuß). */
body.be-marke-wander .be-projekte__heading { max-width: 22ch; }
body.be-marke-wander .be-projekte__karte { border-color: var(--w-linie); border-radius: var(--w-radius); box-shadow: 0 1px 0 rgba(20, 29, 69, 0.04); }
body.be-marke-wander .be-projekte__betrag {
    align-self: flex-start;
    font-family: 'Hanken Grotesk', Arial, sans-serif;
    font-size: 0.95rem;
    color: var(--w-blau-tief);
    border-bottom: 3px solid var(--w-orange);
    padding-bottom: 0.1rem;
}
body.be-marke-wander .be-projekte__titel { font-size: 1.2rem; font-weight: 600; color: var(--w-blau-tief); }
body.be-marke-wander .be-projekte__empfaenger { color: var(--w-blau); }
body.be-marke-wander .be-projekte__text { color: var(--w-grau); line-height: 1.55; }
body.be-marke-wander .be-projekte__bild--flaeche { position: relative; overflow: hidden; background: var(--w-blau-tief); }
body.be-marke-wander .be-projekte__bild--flaeche::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.16);
    -webkit-mask: var(--w-muster) 30% 40% / 900px auto no-repeat;
    mask: var(--w-muster) 30% 40% / 900px auto no-repeat;
}
body.be-marke-wander .be-projekte__flaeche-betrag { position: relative; font-family: Fraunces, Georgia, serif; color: var(--w-orange); }
body.be-marke-wander .be-projekte__quelle { color: var(--w-grau); }
/* Kopfbild (DSC_0337, Start unter dem Bogen): auf dem Handy steht nur ein Drittel der Breite im Bild.
   Ausschnitt nach rechts, damit Bogen und winkende Menge zu sehen sind statt der Rücken am linken Rand. */
body.be-marke-wander .hero__poster { object-position: center 6%; } /* Schrift am Bogen oben bleibt im Bild */
@media (max-width: 767px) {
    body.be-marke-wander .hero__poster { object-position: 64% 30%; }
}

/* Fotoseite wie die Live-Seite (Dennis 28.09.2026: „1:1 Live-Seite“): dort sechs Spalten, auf dem Handy
   drei. 484 Bilder stehen damit in 81 statt 121 Reihen. */
body.be-marke-wander .gallery-page__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 768px)  { body.be-marke-wander .gallery-page__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 1200px) { body.be-marke-wander .gallery-page__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Logo zwischen 1024 und 1339 px (Dennis 28.09.2026: „größer, dass es auch wirklich lesbar ist“).
   layout.css schrumpft es dort auf 74 % bzw. 56 %, gebaut für lange Menüs. Hier hat das Menü fünf kurze
   Punkte und bei 1100 px 317 px Luft (gemessen); die Unterzeile „Wander Challenge“ wäre bei 54 px unlesbar. */
@media (min-width: 1024px) and (max-width: 1339px) {
    body.be-marke-wander .header__logo img { max-height: calc(var(--logo-max-height) * 0.92); }
}

/* Logo beim Scrollen so groß wie im Fuß (Dennis 28.09.2026): beide 96 px (`logo_height_scrolled` =
   `footer_logo_height`). layout.css nimmt es zwischen 1024 und 1400 px auf 85 %, hier ist Platz genug
   (gemessen: bei 1024 px 82 px zwischen Logo und Menü). Auf dem Handy dieselbe Rechnung wie oben, damit der
   Burger im Bild bleibt. */
@media (min-width: 1024px) and (max-width: 1400px) {
    body.be-marke-wander .site-header.is-scrolled .header__logo img { max-height: var(--logo-height-scrolled); }
}
@media (max-width: 639px) {
    body.be-marke-wander .site-header.is-scrolled .header__logo img { max-height: var(--logo-height-scrolled); max-width: max(97px, calc(89.6vw - 190px)); }
}

/* Handy-Kopf: Logo kleiner als am Rechner, damit die Plakette mit „Eine Initiative von“ daneben passt
   (Dennis 28.09.2026). Unter 375 px noch eine Stufe, sonst stößt der Burger an den Rand.
   Zweite Runde (Dennis 28.09.2026: „ca. 50 % größer“): am Rechner 96 → 144 px bei 160 px Kopf. Auf dem
   Handy reicht die Breite nicht für +50 %, der Kopf ist dort 128 statt 160 px hoch. Feste Stufen (104/88 px)
   schoben den Burger bei 375, 340 und 320 px über den Rand (gemessen 3 bis 29 px). Deshalb rechnet die Höhe aus
   der Breite: Neben dem Logo stehen Rand (2 × 5,2 vw), 24 px Abstand, Plakette 110, 12, Burger 44 px, also
   darf das Logo höchstens 89,6 vw − 190 px BREIT sein. Seit hk (28.09.2026) als Breitengrenze statt als Höhe:
   Die erste Fassung rechnete das Seitenverhältnis des wc-Logos (1,623) ein, das breitere hk-Logo (1,764) ließ
   rechts nur 8 px Rand. So gilt die Rechnung für jedes Logo; das wc-Logo wird dabei höchstens 3 px größer
   (gemessen 320 bis 639 px), der Rand ist jetzt links und rechts gleich. */
@media (max-width: 639px) {
    body.be-marke-wander { --header-height: 128px; }
    body.be-marke-wander .header__logo img { max-height: 104px; max-width: max(97px, calc(89.6vw - 190px)); }
}

/* Unterzeile der Seitentitel: Satzmaß 616 px brach „… des Welterbes / Zollverein.“ um (Dennis 28.09.2026).
   52 rem hält alle Unterzeilen von wc und hk am Rechner einzeilig; auf dem Handy ohne einzelnes Schlusswort. */
body.be-marke-wander .page-banner__subtitle { max-width: 52rem; text-wrap: pretty; }

/* Contilia-Logo in der Plakette größer (Dennis 28.09.2026: „ist noch genug Platz“), am Rechner 44 → 58 px.
   Auf dem Handy bleibt es bei 28 px: Dort rechnet die Logo-Breite des Kopfs mit 110 px Plakette. */
@media (min-width: 640px) {
    body.be-marke-wander .kopf-partner__logo { height: 58px; max-width: 240px; }
}

/* Countdown-Beschriftung („Tage“, „Stunden“) mindestens 11 px (Hausregel; gemessen 9,6 px auf hk und wc,
   Kontrastscan 28.09.2026). */
body.be-marke-wander .be-countdown__label { font-size: max(11px, 0.6875rem); }
/* Countdown im Kopfbild auf eigener Fläche (Dennis 28.09.2026: „Countdown benötigt Background“; auf dem
   bunten Startfoto waren Ziffern und Beschriftung unruhig und nicht regelkonform lesbar). Tiefes Blau,
   leicht durchscheinend, so breit wie die Ziffern. */
body.be-marke-wander .hero .be-countdown--hero {
    display: inline-flex; width: auto; max-width: 100%;
    padding: 0.75rem 1.1rem 0.65rem; border-radius: 16px;
    background: rgba(20, 29, 69, 0.8);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 16px 34px -22px rgba(0, 0, 0, 0.6);
}
body.be-marke-wander .hero .be-countdown--hero .be-countdown__label { color: rgba(255, 255, 255, 0.8); }
body.be-marke-wander .hero .be-countdown--hero :is(.be-countdown__value, .be-countdown__sep) { text-shadow: none; }

/* ── Handy-Audit (28.09.2026) ──────────────────────────────────────────────── */
/* „Nie trennen“ auch für das Bearbeitungsfeld IN der Überschrift: block-engine.css gibt jedem span in einem
   Block `hyphens: auto`, und eine Regel am Kind schlägt die geerbte (gemessen: „ge-hen“ im Spendenband). */
body.be-marke-wander :is(h1, h2, h3, .facts-bar__value, .photo-band__title, .hero__title) * { hyphens: none !important; -webkit-hyphens: none !important; }
/* Seitentitel auf dem Handy: „Teilnahmebedingungen“ und „Datenschutzerklärung“ sind je ein Wort. Bei 36 px
   waren sie breiter als die Spalte und brachen ohne Trennstrich mitten im Wort (bis 414 px gemessen). */
@media (max-width: 639px) {
    body.be-marke-wander .page-banner__title { font-size: clamp(1.5rem, 7.4vw, 2.25rem); }
}
/* Faktenleiste bei sehr schmalen Schirmen: „Ringlokschuppen“ passte bei 320 px nicht in die halbe Breite. */
@media (max-width: 374px) {
    body.be-marke-wander .facts-bar__value { font-size: 0.95rem; }
}

/* Anmeldeseite, „Was dich erwartet“ als Kachelband (28.09.2026): Symbol orange auf tiefem Blau wie im Faktenband
   der Startseite, Wert in der Überschriftenschrift. */
body.be-marke-wander .reg-preview-card--info:only-child { border-color: var(--w-linie); border-radius: var(--w-radius); }
body.be-marke-wander .reg-preview-card--info:only-child .reg-preview-fact .be-icon-svg { background: var(--w-blau-tief); color: var(--w-orange); }
body.be-marke-wander .reg-preview-card--info:only-child .reg-preview-fact strong { font-family: Fraunces, Georgia, serif; font-weight: 600; color: var(--w-blau-tief); }
body.be-marke-wander .reg-preview-card--info:only-child .reg-preview-fact div > span { color: var(--w-grau); }
@media (min-width: 900px) {
    body.be-marke-wander .reg-preview-card--info:only-child .reg-preview-fact + .reg-preview-fact { border-left-color: var(--w-linie); }
}