/* ===========================================================================
   Landingpage BSP/BJSP Faehrtenhunde 2026 (Slug bundessiegerpruefung-2026)

   Wird nur auf dieser einen Seite geladen (functions.php). Alles, was das
   Theme schon kann, steht NICHT hier: Hero-Grund, Badge, Karten, Zeitleiste,
   Kennzahlen, Verweisbanner und der Abschlusskasten kommen unveraendert aus
   style.css. Hier steht nur, was es dort noch nicht gibt.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Streifung von Hand

   .page-section:nth-child(even) faerbt im Theme jeden zweiten Abschnitt grau -
   und zaehlt dabei ALLE Geschwister in <main>. Auf dieser Seite steht mit
   .sp-sektion ein Abschnitt dazwischen, der kein .page-section ist; ausserdem
   erscheint das Uebernachten-Banner nur bei HSV_UK_LIVE. Beides kippt den
   Wechsel. Deshalb wird die automatische Streifung abgeschaltet und der graue
   Grund im Template gesetzt, wo er hingehoert.
   --------------------------------------------------------------------------- */
.page-section:nth-child(even) { background: transparent; }
.page-section.bsp-grau { background: var(--bg-subtle); }

/* ---------------------------------------------------------------------------
   Sprungziele

   Die Kopfzeile klebt (80 px, ab 959 px 68 px). Ohne diese Zeile verschwindet
   die angesprungene Ueberschrift darunter und der Besucher landet mitten im
   Text, ohne zu wissen warum. Das Sponsorenband darueber ist NICHT sticky, es
   scrollt weg - es muss hier also nicht mitgerechnet werden.
   --------------------------------------------------------------------------- */
[id="grusswort"], [id="zuschauen"], [id="ablauf"], [id="anfahrt"],
[id="uebernachten"], [id="teilnehmer"], [id="sponsoren"], [id="presse"] {
    scroll-margin-top: calc(var(--header-height) + 24px);
}

/* Sichtbarer Fokus fuer alles, was auf dieser Seite bedienbar ist. Nie
   outline:none ohne Ersatz. */
.bsp-sprung:focus-visible,
.bsp-hero-plakat a:focus-visible,
.bsp-kartenlink:focus-visible,
.bsp-presse-liste a:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ===========================================================================
   Hero - Variante C: Fakten links, Plakat rechts
   Basis ist .dvg-hero (dunkel, zwei gruene Lichtscheine). Hier nur das Raster.
   =========================================================================== */
.bsp-hero { text-align: left; padding: 56px 0 60px; }

.bsp-hero-inner {
    position: relative;      /* ueber den Lichtscheinen von .dvg-hero */
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    align-items: start;
}

.bsp-hero h1 {
    /* "Bundesjugendsiegerpruefung" laeuft bei 360 px aus jeder Ueberschrift
       heraus. Die H1 traegt zwar die kurze Form, aber der Schutz kostet
       nichts und faengt auch lange Ortsnamen ab. */
    hyphens: auto;
    overflow-wrap: break-word;
    margin-bottom: 10px;
}

.bsp-hero .dvg-hero-subtitle { margin-bottom: 24px; }

/* --- Eckdaten: vier Zeilen statt drei Karten. Vier Zeilen stehen auf 360 px
       sicher, drei Karten nebeneinander nicht. --- */
.bsp-eckdaten {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}
.bsp-eckdaten li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);   /* Auskunft - also hell genug */
    margin-bottom: 10px;
}
.bsp-eckdaten svg { flex: 0 0 auto; margin-top: 3px; color: var(--green); }

.bsp-hero-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
}

/* .btn-outline traegt var(--green-dark) - auf dunklem Grund waeren das rund
   2,6:1. Auf dieser Buehne also die helle Fassung. */
.bsp-btn-hell { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.bsp-btn-hell:hover { background: #fff; color: var(--bg-dark); border-color: #fff; }

/* --- Sprungmarken: umbrechende Pillen, KEIN waagerechter Scroll-Streifen.
       Was seitlich hinauslaeuft, findet niemand. --- */
.bsp-sprungmarken ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.bsp-sprung {
    display: inline-flex;
    align-items: center;
    /* mindestens 40 px hoch - sonst wird die Pille zum 28-px-Ziel, das man
       mit dem Daumen nicht trifft */
    min-height: 40px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    transition: background 0.25s ease, color 0.25s ease;
}
.bsp-sprung:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* --- Plakatkarte --- */
.bsp-hero-plakat { margin: 0; }
.bsp-hero-plakat .hero-image { display: block; max-width: 100%; }
.bsp-hero-plakat img { width: 100%; height: auto; display: block; }
.bsp-hero-plakat figcaption {
    margin-top: 10px;
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    text-align: right;
}

/* ===========================================================================
   Standzeile - zweimal auf der Seite. Ein Datum verwandelt eine unfertige
   Seite in eine gepflegte Seite; ohne Datum sieht dieselbe Seite verwahrlost
   aus.
   =========================================================================== */
.bsp-stand {
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}
.bsp-stand--hero { margin-top: 24px; color: rgba(255, 255, 255, 0.7); }
/* Ausdruecklich nicht .dvg-cta-sub: dessen rgba(255,255,255,.4) kommt auf dem
   dunklen Grund nur auf 3,6:1. */
.bsp-stand--cta { margin-top: 22px; color: rgba(255, 255, 255, 0.7); }

/* Einleitender Satz unter einer Abschnittsueberschrift. */
.bsp-intro {
    max-width: 720px;
    margin: -20px auto 36px;
    text-align: center;
    color: var(--text-secondary);
}

/* ===========================================================================
   Grusswort
   =========================================================================== */
.bsp-grusswort-text { max-width: 680px; margin: 0 auto; }

/* Die Ueberschrift des Katalog-Grussworts. Dirk am 12.08.2026: Rudi wollte das
   Grusswort "wie auf der Musterkatalogseite" - dort traegt der Text diese drei
   Zeilen, und sie sind das Staerkste daran. Sie stehen unter dem Abschnittstitel
   und nicht an seiner Stelle: "Grusswort des Ausrichters" sagt, was es ist,
   diese Zeilen sagen, worum es geht. */
.bsp-grusswort-h {
    max-width: 680px;
    margin: 0 auto 26px;
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.02em;
    color: var(--text);
}

/* Der Zwischenruf - im Katalog der optisch herausgehobene Satz, hier auch.
   ⚠ Hier stand --green-dark (#2d9e59). Auf Weiss ergibt das 3,42:1 und faellt
   durch WCAG AA: bei 16,8 px und Gewicht 600 gilt die Schwelle 4,5:1, nicht die
   fuer grosse Schrift. Ausgerechnet an dem Satz, der die Aussage traegt. Die
   Betonung tragen jetzt Groesse, Gewicht und der gruene Strich - die Farbe des
   Textes selbst ist --text (13,4:1). */
.bsp-grusswort-ruf {
    max-width: 680px;
    margin: 30px auto;
    padding: 6px 0 6px 22px;
    border-left: 4px solid var(--green);
    font-family: var(--font-heading);
    font-size: 1.32rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text);
}

.bsp-signatur { margin-top: 32px; }
.bsp-signatur strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.05rem;
}
.bsp-signatur span {
    display: block;
    font-size: 14px;
    color: var(--text-secondary);
}

/* ===========================================================================
   Statuspille an der EINZELNEN Angabe, nicht am Abschnitt.
   Traegt Text, nicht nur Farbe - sonst waere der Unterschied fuer einen Teil
   der Leser unsichtbar. Farbwerte aus unterkuenfte.css uebernommen (nur die
   zwei Werte, nicht die Datei - die wird hier nicht geladen).
   =========================================================================== */
.bsp-status {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    vertical-align: 1px;
    margin-left: 6px;
}
.bsp-status--fest  { background: rgba(61, 195, 114, 0.16); color: var(--green-dark); }
.bsp-status--offen { background: #eef1f6; color: #5a6376; }

/* ===========================================================================
   Fuer Zuschauer - zwei Spalten, Zeilen mit Zeichen
   Gruener Haken fuer das, was feststeht; grauer Strich fuer das Offene.
   Kein rotes Kreuz: wir laden ein, wir verbieten nicht.
   =========================================================================== */
.bsp-regeln {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 960px;
    margin: 0 auto;
}
.bsp-regel-spalte {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 28px 26px;
}
.bsp-regel-spalte h3 {
    font-size: 1.05rem;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}
.bsp-regel-spalte ul { list-style: none; margin: 0; padding: 0; }

.bsp-regel {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 14px;
}
.bsp-regel:last-child { margin-bottom: 0; }
.bsp-regel-zeichen {
    flex: 0 0 24px;          /* feste Breite, damit der Text buendig steht */
    font-family: var(--font-heading);
    font-weight: 700;
    text-align: center;
    line-height: 1.6;
}
.bsp-regel--ja    .bsp-regel-zeichen { color: var(--green-dark); }
.bsp-regel--offen .bsp-regel-zeichen { color: #9aa2b1; }
.bsp-regel--offen { color: var(--text-secondary); }

/* Einzelne Statuszeile ausserhalb der zwei Spalten (Abschnitt Anfahrt). */
.bsp-regel--einzeln {
    margin: 20px 0;
    padding: 12px 14px;
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
}

/* Kasten "steht noch nicht fest" - ein Stil fuer die ganze Seite. */
.bsp-hinweis {
    max-width: 960px;
    margin: 28px auto 0;
    padding: 18px 22px;
    background: var(--bg-subtle);
    border-left: 4px solid var(--green);
    border-radius: var(--radius-sm);
    font-size: 15px;
    color: var(--text-secondary);
}

/* ===========================================================================
   Uebernachten - Text links, Schaltflaeche rechts

   Eigener Abschnitt statt Banner unter der Karte: am Veranstaltungswochenende
   ist in Cochem Oktoberfest, die Betten werden knapp. Die Schaltflaeche steht
   waagerecht neben dem Text und rutscht erst unter 960 px darunter - so
   bleibt sie auf dem Bildschirm sichtbar, ohne den Text zu zerreissen.
   =========================================================================== */
.bsp-uk-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 36px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px 36px;
}
.bsp-uk-lead {
    font-family: var(--font-heading);
    font-size: 1.14rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text);
    margin: 0 0 14px;
}
.bsp-uk-text p { margin: 0 0 12px; }
.bsp-uk-text p:last-child { margin-bottom: 0; }
.bsp-uk-klein {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
/* Die Zahl im Text der Schaltflaeche darf nicht umbrechen - "37 Haeuser"
   auseinandergerissen liest sich wie zwei Angaben. */
.bsp-uk-btn {
    white-space: nowrap;
    justify-self: end;
}

/* ===========================================================================
   Anfahrt - Karte links, Auskunft rechts
   =========================================================================== */
.bsp-anfahrt-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}
.bsp-karte {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px;
}
.bsp-karte svg { display: block; width: 100%; height: auto; }

.bsp-adresse {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.5;
    margin-bottom: 18px;
}
.bsp-anfahrt-text p { color: var(--text-secondary); }
.bsp-anfahrt-text strong { color: var(--text); }
.bsp-kartenlink { font-family: var(--font-heading); font-weight: 600; }
.bsp-kartenlink-hinweis { font-size: 14px; }
.bsp-karte-hinweis { font-size: 13px; line-height: 1.6; }

/* ===========================================================================
   Zeilenlisten (Teilnehmerangaben, Pressematerial) - dasselbe Muster:
   eine Angabe je Zeile, duenne Linie dazwischen.
   =========================================================================== */
.bsp-teilnehmer-liste,
.bsp-presse-liste { list-style: none; margin: 0; padding: 0; }
.bsp-teilnehmer-liste { max-width: 800px; margin: 40px auto 0; }
.bsp-teilnehmer-liste li,
.bsp-presse-liste li {
    padding: 11px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 15px;
    color: var(--text-secondary);
}
.bsp-teilnehmer-liste li:last-child,
.bsp-presse-liste li:last-child { border-bottom: none; }
.bsp-teilnehmer-liste strong { color: var(--text); }

/* ===========================================================================
   Sponsoren - Nachtrag fuer unentschlossene Firmen
   Schliesst ohne Polsterung an die Sponsorenflaeche an, damit er als deren
   Fussnote gelesen wird und nicht als eigener Abschnitt.
   =========================================================================== */
.bsp-sponsor-nachtrag { padding-top: 0; }
.bsp-sponsor-cta {
    max-width: 720px;
    margin: 0 auto;
    padding: 26px 30px;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(61, 195, 114, 0.25);
    border-radius: var(--radius);
}
.bsp-sponsor-cta h2 { font-size: 1.25rem; margin-bottom: 10px; }
.bsp-sponsor-cta p { color: var(--text-secondary); font-size: 15px; }
.bsp-sponsor-cta p:last-child { margin-bottom: 0; }

/* ===========================================================================
   Presse und Material
   =========================================================================== */
.bsp-presse-inner {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}
.bsp-presse-plakat { margin: 0; }
.bsp-presse-plakat img { width: 100%; height: auto; display: block; }
.bsp-presse-plakat figcaption {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.bsp-presse-text h3 { font-size: 1.05rem; margin-top: 28px; }
.bsp-presse-text h3:first-child { margin-top: 0; }
.bsp-presse-zitat {
    padding: 18px 22px;
    background: var(--bg-subtle);
    border-left: 4px solid var(--green);
    border-radius: var(--radius-sm);
    font-size: 15px;
    line-height: 1.7;
}

/* ===========================================================================
   Haltepunkte wie im Theme: 959 px und 639 px
   =========================================================================== */

/* .dvg-features steht im Theme auf drei Spalten. Hier sind es vier Karten -
   die vierte staende sonst allein in einer zweiten Reihe. Nur oberhalb von
   959 px, darunter greifen die Regeln des Themes (2 Spalten, dann 1). */
@media (min-width: 960px) {
    .bsp-erklaerung .dvg-features { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 959px) {
    .bsp-hero-inner { grid-template-columns: 1fr; gap: 32px; }
    /* Plakat rutscht unter den Text und bleibt hoechstens 320 px breit. */
    .bsp-hero-plakat { max-width: 320px; }
    .bsp-hero-plakat figcaption { text-align: left; }

    .bsp-anfahrt-inner { grid-template-columns: 1fr; gap: 28px; }

    /* Schaltflaeche unter den Text, ueber die volle Breite - daneben bliebe
       fuer den Text zu wenig Platz. */
    .bsp-uk-inner { grid-template-columns: 1fr; gap: 24px; padding: 28px 26px; }
    .bsp-uk-btn { justify-self: stretch; text-align: center; }
    .bsp-presse-inner  { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 639px) {
    .bsp-hero { padding: 32px 0 44px; }

    /* Auf dem Handy kostet das Plakat einen ganzen Bildschirm und beantwortet
       keine Frage. Es steht weiter unten im Presseabschnitt noch einmal. */
    .bsp-hero-plakat { display: none; }

    /* Dieselbe Ueberlegung fuer die Uebersichtskarte, nachgetragen am
       12.08.2026: bei 360 px rendert die Zeichnung auf 286 px, die 25
       Ortsnamen stehen dann in 5,3 px und der Kartennachweis in 4,3 px. Das
       ist reine Grafik ohne lesbaren Inhalt - fuer rund 500 px Bildschirm.
       Die Auskunft traegt ohnehin die Anschrift daneben und der Kartenlink.
       Die ODbL-Nennung haengt nicht daran: sie steht als lesbarer Text
       unter der Karte und bleibt sichtbar. */
    .bsp-karte { display: none; }

    /* Auf 360 x 640 sind 68 px Kopfzeile und rund 62 px Sponsorenband schon
       weg. Was hier an Zeilenhoehe gespart wird, entscheidet darueber, ob die
       erste Schaltflaeche noch ohne Scrollen zu sehen ist. */
    .bsp-hero .dvg-badge { font-size: 11px; letter-spacing: 1.4px; margin-bottom: 14px; }
    .bsp-hero h1 { margin-bottom: 6px; }
    .bsp-hero .dvg-hero-subtitle { font-size: 1rem; margin-bottom: 18px; }
    .bsp-eckdaten { margin-bottom: 22px; }
    .bsp-eckdaten li { font-size: 0.9rem; margin-bottom: 8px; }
    .bsp-hero-knoepfe { margin-bottom: 22px; }
    .bsp-stand--hero { margin-top: 18px; }

    /* Nur EINE Hauptschaltflaeche in voller Breite, die zweite darunter. */
    .bsp-hero-knoepfe { flex-direction: column; align-items: stretch; }
    .bsp-hero-knoepfe .btn { text-align: center; }

    .bsp-grusswort-h { font-size: 1.55rem; }
    .bsp-grusswort-ruf { font-size: 1.18rem; padding-left: 16px; }

    .bsp-regeln { grid-template-columns: 1fr; gap: 20px; }
    .bsp-regel-spalte { padding: 22px 20px; }

    .bsp-presse-inner { grid-template-columns: 1fr; }
    .bsp-presse-plakat { max-width: 240px; }

    .bsp-sponsor-cta { padding: 22px 20px; }
    .bsp-intro { margin-top: -12px; }

    /* Auf 360 px nimmt die Einleitung sonst den halben Bildschirm ein, bevor
       die eigentliche Auskunft kommt. */
    .bsp-uk-inner { padding: 24px 20px; }
    .bsp-uk-lead { font-size: 1.04rem; }
}