/*
Theme Name:  Harz und Heide Flohmarkt
Theme URI:   https://harz-und-heide-flohmarkt.de
Description: Eigenes Theme für das Informationsportal zum Harz und Heide Flohmarkt
             in Braunschweig. Terminlogik, Layout und Inhalte liegen im Theme –
             gepflegt wird ausschließlich inc/termine.php.
Author:      harz-und-heide-flohmarkt.de
Version:     1.0.0
Requires PHP: 8.0
License:     proprietär
Text Domain: hhflohmarkt
*/
/* ==========================================================================
   Harz und Heide Flohmarkt
   Reduziert: Papier, Sand, Tinte, ein Akzent. Keine bunten Overlays.
   Schrift lokal gehostet – kein externer Request.
   ========================================================================== */

@font-face {
    font-family: "Jakarta";
    src: url("assets/fonts/jakarta-var.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Flächen */
    --papier:     #FBF9F5;
    --sand:       #F2EDE3;
    --sand-tief:  #E9E1D2;
    --weiss:      #FFFFFF;
    --linie:      #E4DCCC;

    /* Text */
    --tinte:      #1B2231;
    --tinte-2:    #5B6474;
    --tinte-3:    #939BA8;

    /* Ein Akzent */
    --akzent:     #C1462A;
    --akzent-tief:#A03A22;
    --akzent-zart:#FAEBE5;

    --gruen:      #2C6E4F;
    --gruen-zart: #E4F0EA;

    /* Radien – großzügig, wie in den Vorlagen */
    --r-s:  12px;
    --r-m:  20px;
    --r-l:  28px;
    --r-xl: 34px;
    --r-pill: 999px;

    --schatten-s: 0 1px 2px rgba(27,34,49,.04), 0 4px 14px rgba(27,34,49,.05);
    --schatten-m: 0 6px 18px rgba(27,34,49,.07), 0 20px 44px rgba(27,34,49,.07);

    --breite: 1280px;
    --luft: clamp(4.5rem, 10vw, 9rem);

    --font: "Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- Reset ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 6.5rem; }

body {
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.65;
    font-weight: 400;
    color: var(--tinte);
    background: var(--papier);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--akzent-tief); text-underline-offset: 3px; }
a:hover { color: var(--akzent); }
ul, ol { padding-left: 1.2em; }
li + li { margin-top: .4em; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }

/* --- Typografie -------------------------------------------------------- */

h1, h2, h3, h4 { line-height: 1.1; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }

h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); letter-spacing: -.04em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); letter-spacing: -.035em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -.02em; }
h4 { font-size: 1rem; }

.vorspann {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.6;
    color: var(--tinte-2);
    max-width: 52ch;
}

/* kleines Label – links im asymmetrischen Sektionskopf */
.label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinte-3);
    line-height: 1.5;
}

.klein { font-size: .875rem; color: var(--tinte-3); line-height: 1.55; }

/* --- Layout ------------------------------------------------------------ */

.wrap { width: min(100% - 3rem, var(--breite)); margin-inline: auto; }
section { padding-block: var(--luft); }

.sek-sand  { background: var(--sand); }
.sek-weiss { background: var(--weiss); }

/* Sektionskopf: Label, Headline, Text – ruhig untereinander */
.sek-kopf {
    max-width: 60ch;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sek-kopf .label { margin-bottom: .9rem; }
.sek-kopf p { color: var(--tinte-2); margin-top: 1.1rem; font-size: 1.0625rem; }
.sek-kopf-aktion { margin-top: 1.75rem; }

/* Variante mit Aktion rechts – nur wenn genug Platz ist */
.sek-kopf-zeile {
    display: grid;
    gap: 1.5rem 3rem;
    align-items: end;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 58rem) {
    .sek-kopf-zeile { grid-template-columns: minmax(0, 1fr) auto; }
}
.sek-kopf-zeile .sek-kopf { margin-bottom: 0; }

.skip { position: absolute; left: -9999px; background: var(--tinte); color: #fff; padding: .75rem 1.25rem; border-radius: var(--r-s); z-index: 200; }
.skip:focus { left: 1rem; top: 1rem; }

/* --- Buttons ----------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .95rem 1.75rem;
    border-radius: var(--r-pill);
    font-weight: 600; font-size: 1rem; line-height: 1.3;
    text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
    transition: transform .2s cubic-bezier(.2,.8,.3,1), background .2s, border-color .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 17px; height: 17px; }

.btn-akzent { background: var(--akzent); color: #fff; }
.btn-akzent:hover { background: var(--akzent-tief); color: #fff; }

.btn-tinte { background: var(--tinte); color: #fff; }
.btn-tinte:hover { background: #0F1520; color: #fff; }

.btn-rand { background: transparent; color: var(--tinte); border-color: var(--linie); }
.btn-rand:hover { color: var(--tinte); border-color: var(--tinte); }

.btn-weiss { background: var(--weiss); color: var(--tinte); border-color: var(--weiss); }
.btn-weiss:hover { color: var(--tinte); }

.btn-klein { padding: .6rem 1.15rem; font-size: .9375rem; }

.btn-reihe { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- Kopfzeile --------------------------------------------------------- */

.kopf {
    position: sticky; top: 0; z-index: 100;
    background: rgba(251,249,245,.86);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}
.kopf.gescrollt { border-bottom-color: var(--linie); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .95rem; }

.marke { display: flex; align-items: center; gap: .65rem; font-weight: 700; font-size: 1rem; color: var(--tinte); text-decoration: none; line-height: 1.25; letter-spacing: -.02em; }
.marke-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; background: var(--tinte); color: var(--papier); border-radius: 11px; }
.marke-icon svg { width: 19px; height: 19px; }
.marke small { display: block; font-size: .75rem; font-weight: 400; color: var(--tinte-3); margin-top: 1px; letter-spacing: 0; }

.nav { display: flex; align-items: center; gap: .1rem; }
.nav a {
    padding: .5rem .8rem; border-radius: var(--r-pill);
    font-size: .9375rem; font-weight: 500; color: var(--tinte-2);
    text-decoration: none; white-space: nowrap; transition: color .15s, background .15s;
}
.nav a:hover { color: var(--tinte); background: rgba(27,34,49,.05); }
.nav a[aria-current="page"] { color: var(--tinte); font-weight: 600; background: rgba(27,34,49,.06); }

/* Die beiden Bereiche sichtbar abgesetzt */
.nav-gruppe {
    display: flex; gap: .25rem;
    margin-left: .6rem; padding-left: .75rem;
    border-left: 1px solid var(--linie);
}
.nav-gruppe a {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--sand);
    font-weight: 600;
    color: var(--tinte);
}
.nav-gruppe a svg { width: 15px; height: 15px; color: var(--tinte-3); }
.nav-gruppe a:hover { background: var(--sand-tief); }
.nav-gruppe a[aria-current="page"] { background: var(--tinte); color: #fff; }
.nav-gruppe a[aria-current="page"] svg { color: rgba(255,255,255,.6); }

.nav-schalter { display: none; background: transparent; border: 1px solid var(--linie); border-radius: var(--r-s); padding: .55rem; cursor: pointer; color: var(--tinte); }
.nav-schalter svg { width: 20px; height: 20px; }

/* --- Hero -------------------------------------------------------------- */

.hero { padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem); }
.hero-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 64rem) { .hero-grid { grid-template-columns: 1fr 1.05fr; } }

.hero h1 { margin-bottom: 1.35rem; }
.hero .vorspann { margin-bottom: 2.25rem; }

.hero-bild { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 3 / 2; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; }

/* Countdown im Hero – die wichtigste Auskunft, entsprechend prominent */
.naechster-hinweis {
    display: inline-flex; align-items: center; gap: .85rem;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--r-pill);
    padding: .6rem 1.5rem .6rem .7rem;
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 1.75rem;
    color: var(--tinte);
}
.naechster-hinweis .punkt {
    width: 34px; height: 34px; flex: none;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--akzent-zart); color: var(--akzent);
}
.naechster-hinweis .punkt svg { width: 18px; height: 18px; }
.naechster-hinweis .zahl { color: var(--akzent); }
.naechster-hinweis .dazu {
    font-size: .875rem; font-weight: 500;
    color: var(--tinte-3); letter-spacing: 0;
    padding-left: .85rem; margin-left: .1rem;
    border-left: 1px solid var(--linie);
}
@media (max-width: 34rem) {
    .naechster-hinweis { flex-wrap: wrap; border-radius: var(--r-l); }
    .naechster-hinweis .dazu { border-left: 0; padding-left: 0; width: 100%; }
}

.naechster-hinweis.laeuft .punkt { background: var(--gruen-zart); color: var(--gruen); }
.naechster-hinweis.laeuft .pulspunkt {
    width: 8px; height: 8px; border-radius: 50%; background: var(--gruen);
    box-shadow: 0 0 0 0 rgba(44,110,79,.55); animation: puls 2.2s infinite;
}
@keyframes puls { 70% { box-shadow: 0 0 0 10px rgba(44,110,79,0); } 100% { box-shadow: 0 0 0 0 rgba(44,110,79,0); } }
@media (prefers-reduced-motion: reduce) {
    .pulspunkt { animation: none; }
    html { scroll-behavior: auto; }
    .btn:hover, .karte:hover, .wochenende:hover { transform: none; }
}

/* --- Faktenzeile ------------------------------------------------------- */

.fakten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 2.5rem 1.5rem;
    padding-top: clamp(3rem, 5vw, 4.5rem);
}
.fakten dt { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-3); margin-bottom: .45rem; }
.fakten dd { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.fakten dd small { display: block; font-size: .875rem; font-weight: 400; color: var(--tinte-3); margin-top: .25rem; letter-spacing: 0; }

/* --- Karten im Playfula-Stil ------------------------------------------- */

.karten { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.karte {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--r-xl);
    padding: 1.15rem 1.15rem 1.9rem;
    transition: transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s, box-shadow .22s;
}
.karte-gestrichelt { background: transparent; border: 1.5px dashed var(--sand-tief); }
a.karte { text-decoration: none; color: inherit; display: block; }
a.karte:hover { transform: translateY(-5px); border-color: var(--tinte-3); box-shadow: var(--schatten-m); color: inherit; }

/* Bild innerhalb der Karte, mit Badge darauf */
.karte-bild { position: relative; border-radius: var(--r-m); overflow: hidden; aspect-ratio: 16 / 11; margin-bottom: 1.5rem; }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.3,1); }
a.karte:hover .karte-bild img { transform: scale(1.04); }

.badge {
    position: absolute; top: .85rem; left: .85rem;
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--papier); color: var(--tinte);
    border-radius: var(--r-pill);
    padding: .4rem .9rem;
    font-size: .75rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
}
.badge svg { width: 14px; height: 14px; }

.karte-text { padding-inline: .75rem; }
.karte-text h3 { margin-bottom: .6rem; }
.karte-text p { color: var(--tinte-2); }

.karte-liste { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.karte-liste li { margin: 0; padding: .5rem 0 .5rem 1.4rem; position: relative; color: var(--tinte-2); font-size: .9375rem; border-top: 1px solid var(--linie); }
.karte-liste li:first-child { border-top: 0; }
.karte-liste li::before { content: ""; position: absolute; left: .2rem; top: 1.15rem; width: 5px; height: 5px; border-radius: 50%; background: var(--akzent); }

.karte-mehr { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; font-weight: 600; color: var(--akzent-tief); }
.karte-mehr svg { width: 17px; height: 17px; transition: transform .2s; }
a.karte:hover .karte-mehr svg { transform: translateX(4px); }

/* schlichte Karte ohne Bild */
.karte-schlicht { padding: 1.9rem; }
.karte-schlicht h3 { margin-bottom: .65rem; }
.karte-schlicht p { color: var(--tinte-2); }

.karte-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--sand); color: var(--tinte); margin-bottom: 1.25rem; }
.karte-ico svg { width: 21px; height: 21px; }

/* --- Bildkarten mit farbigem Fuß (LittleChamp-Prinzip) ----------------- */

.bildkarten { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.bildkarte {
    border-radius: var(--r-xl);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s;
}
.bildkarte:hover { transform: translateY(-5px); box-shadow: var(--schatten-m); }

.bildkarte-bild {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--sand);
    overflow: hidden;
}
.bildkarte-bild img { width: 100%; height: 100%; object-fit: cover; }

/* Platzhalter, solange kein eigenes Foto vorliegt */
.bildkarte-leer {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: var(--sand);
    color: var(--tinte-3);
    text-align: center;
    padding: 1.5rem;
}
.bildkarte-leer svg { width: 34px; height: 34px; margin: 0 auto .6rem; }
.bildkarte-leer span { display: block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }

.bildkarte-schild {
    position: absolute; top: .9rem; right: .9rem;
    display: inline-flex; align-items: center; gap: .35rem;
    border-radius: var(--r-pill);
    padding: .4rem .9rem;
    font-size: .75rem; font-weight: 700;
    color: #fff;
}
.bildkarte-schild svg { width: 13px; height: 13px; }

.bildkarte-fuss {
    flex: 1;
    padding: 1.5rem 1.6rem 1.75rem;
    text-align: center;
    color: #fff;
}
.bildkarte-fuss h3 { color: #fff; margin-bottom: .5rem; font-size: clamp(1.2rem, 2vw, 1.4rem); }
.bildkarte-fuss p { color: rgba(255,255,255,.82); font-size: .9375rem; }

/* Drei Farbwelten, aus der bestehenden Palette abgeleitet */
.bildkarte.ton-tinte  .bildkarte-fuss   { background: var(--tinte); }
.bildkarte.ton-tinte  .bildkarte-schild { background: var(--tinte); }
.bildkarte.ton-akzent .bildkarte-fuss   { background: var(--akzent); }
.bildkarte.ton-akzent .bildkarte-schild { background: var(--akzent); }
.bildkarte.ton-gruen  .bildkarte-fuss   { background: var(--gruen); }
.bildkarte.ton-gruen  .bildkarte-schild { background: var(--gruen); }

/* --- Breite Listenkarten im Joyboyo-Stil ------------------------------- */

.breitkarten { display: grid; gap: 1.25rem; }

.breitkarte {
    display: grid; gap: 1.5rem; align-items: center;
    background: var(--sand);
    border-radius: var(--r-xl);
    padding: 1.15rem;
    text-decoration: none; color: inherit;
    transition: transform .22s cubic-bezier(.2,.8,.3,1), background .22s;
}
@media (min-width: 46rem) { .breitkarte { grid-template-columns: minmax(0,1fr) 17rem; } }
a.breitkarte:hover { transform: translateY(-3px); background: var(--sand-tief); color: inherit; }

.breitkarte-text { padding: 1rem 1.25rem 1rem 1.5rem; }
.breitkarte-text h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: .75rem; }
.breitkarte-text p { color: var(--tinte-2); max-width: 46ch; }
.breitkarte-bild { border-radius: var(--r-m); overflow: hidden; aspect-ratio: 16 / 10; }
.breitkarte-bild img { width: 100%; height: 100%; object-fit: cover; }

/* --- Terminliste: Wochenenden als Einheit ------------------------------ */

.wochenenden { display: grid; gap: 1rem; }

.wochenende {
    display: grid;
    gap: 1.25rem;
    align-items: center;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--r-l);
    padding: 1.25rem 1.5rem;
    transition: transform .2s cubic-bezier(.2,.8,.3,1), border-color .2s;
}
@media (min-width: 44rem) {
    .wochenende { grid-template-columns: 8.5rem minmax(0,1fr) auto; }
}
.wochenende:hover { border-color: var(--tinte-3); transform: translateY(-2px); }

.wochenende.ist-naechstes { border-color: var(--akzent); border-width: 1.5px; background: var(--akzent-zart); }
.wochenende.vergangen { opacity: .5; }

/* Datumsblock: Monat oben, Tage groß darunter */
.we-datum { text-align: center; background: var(--sand); border-radius: var(--r-m); padding: .85rem .5rem; }
.wochenende.ist-naechstes .we-datum { background: var(--akzent); color: #fff; }
.we-monat { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-3); margin-bottom: .15rem; }
.wochenende.ist-naechstes .we-monat { color: rgba(255,255,255,.75); }
.we-tage { display: block; font-size: 1.75rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }

.we-info h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.we-info .we-zeile { color: var(--tinte-2); font-size: .9375rem; display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.we-info .we-zeile span { display: inline-flex; align-items: center; gap: .35rem; }
.we-info .we-zeile svg { width: 15px; height: 15px; color: var(--tinte-3); }

.we-schild {
    display: inline-block; font-size: .6875rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: .25rem .65rem; border-radius: var(--r-pill);
    margin-left: .5rem; vertical-align: 2px;
}
.we-schild-naechst { background: var(--akzent); color: #fff; }
.we-schild-offen   { background: var(--sand-tief); color: var(--tinte-2); }

.ics-link {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .875rem; font-weight: 600; text-decoration: none;
    border: 1px solid var(--linie); border-radius: var(--r-pill);
    padding: .55rem 1.1rem; white-space: nowrap;
    background: var(--weiss); color: var(--tinte);
}
.ics-link svg { width: 15px; height: 15px; }
.ics-link:hover { border-color: var(--tinte); color: var(--tinte); }

@media (max-width: 43.99rem) {
    .wochenende { grid-template-columns: 5.5rem minmax(0,1fr); }
    .we-aktion { grid-column: 1 / -1; }
    .ics-link { display: flex; justify-content: center; }
    .we-tage { font-size: 1.4rem; }
}

/* --- Unterseiten ------------------------------------------------------- */

/* minmax(0,…) auch einspaltig – sonst zwingen breite Tabellen das Raster auf
   und die ganze Seite wird horizontal scrollbar. */
.seiten-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 4vw, 4.5rem); align-items: start; }
@media (min-width: 62rem) { .seiten-grid { grid-template-columns: minmax(0,1fr) 19rem; } }
.seiten-grid > * { min-width: 0; }

.seiten-inhalt { max-width: 68ch; min-width: 0; }
/* für Seiten, deren Inhalt volle Spaltenbreite braucht (z. B. Terminlisten) */
.seiten-inhalt.breit { max-width: none; }
/* Lange Wörter und URLs dürfen den Rahmen nicht sprengen */
.seiten-inhalt p, .seiten-inhalt li, .seiten-inhalt h2,
.seiten-inhalt h3, .seiten-inhalt h4 { overflow-wrap: break-word; }
.seiten-inhalt > * + * { margin-top: 1.5rem; }

/* Fließtext etwas offener setzen – hilft bei langen Textstrecken spürbar */
.seiten-inhalt p, .seiten-inhalt li { line-height: 1.75; }

/* Nur direkte Kinder – sonst erben Überschriften in Boxen, Karten und
   Merksätzen den Abstand und rutschen aus der Ausrichtung.
   Die Trennlinie gliedert die Seite in klar erkennbare Kapitel. */
.seiten-inhalt > h2 {
    margin-top: 4.5rem;
    padding-top: 3.25rem;
    border-top: 1px solid var(--linie);
    font-size: clamp(1.6rem, 2.8vw, 2.1rem);
}
.seiten-inhalt > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Nach einer Überschrift folgt der Text enger als zwischen zwei Absätzen */
.seiten-inhalt > h2 + *,
.seiten-inhalt > h3 + * { margin-top: 1rem; }

/* Eigenständige Bausteine brauchen ringsum Luft, sonst kleben sie am Text */
.seiten-inhalt > .box,
.seiten-inhalt > .merksatz,
.seiten-inhalt > .rechnung,
.seiten-inhalt > .tabelle-wrap,
.seiten-inhalt > .karten,
.seiten-inhalt > .vergleich,
.seiten-inhalt > .zufahrten,
.seiten-inhalt > .parkkarte,
.seiten-inhalt > .linien,
.seiten-inhalt > .faq,
.seiten-inhalt > .bild-breit,
.seiten-inhalt > .bild-gross,
.seiten-inhalt > .eckdaten { margin-block: 2.5rem; }

/* Das erste Element sitzt bündig oben */
.seiten-inhalt > *:first-child { margin-top: 0; }

/* Überschrift mit Icon – bricht lange Textstrecken auf */
h2.mit-ico, h3.mit-ico { display: flex; align-items: center; gap: .9rem; }
.h-ico {
    width: 46px; height: 46px; flex: none;
    display: grid; place-items: center;
    border-radius: 14px;
    background: var(--sand); color: var(--tinte);
}
.h-ico svg { width: 22px; height: 22px; }
h3.mit-ico .h-ico { width: 38px; height: 38px; border-radius: 11px; }
h3.mit-ico .h-ico svg { width: 18px; height: 18px; }
@media (max-width: 34rem) {
    .h-ico { width: 38px; height: 38px; border-radius: 11px; }
    .h-ico svg { width: 18px; height: 18px; }
}
.seiten-inhalt > h3 { margin-top: 3rem; }
.seiten-inhalt ul, .seiten-inhalt ol { color: var(--tinte-2); padding-left: 1.4em; }
.seiten-inhalt li + li { margin-top: .75em; }
.seiten-inhalt li::marker { color: var(--tinte-3); }
.seiten-inhalt strong { color: var(--tinte); font-weight: 600; }

.seiten-leiste { position: sticky; top: 6.5rem; display: grid; gap: 1.25rem; }
@media (max-width: 61.99rem) { .seiten-leiste { position: static; } }

.leiste-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-l); padding: 1.65rem 1.75rem; }
.leiste-karte h4 { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-3); margin-bottom: 1.2rem; }
.leiste-karte.betont { background: var(--tinte); border-color: var(--tinte); color: rgba(255,255,255,.72); }
.leiste-karte.betont h4 { color: rgba(255,255,255,.45); }
.leiste-karte.betont .gross { color: #fff; }

.leiste-daten { display: grid; gap: 1rem; margin: 0; }
.leiste-daten > div { display: flex; gap: .75rem; align-items: flex-start; }
.leiste-daten .ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--sand); color: var(--tinte-2); }
.leiste-daten .ico svg { width: 15px; height: 15px; }
.leiste-daten dt { font-size: .6875rem; color: var(--tinte-3); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: .1rem; }
.leiste-daten dd { margin: 0; font-weight: 600; font-size: .9375rem; line-height: 1.4; }

.leiste-nav { list-style: none; padding: 0; margin: 0; }
.leiste-nav li { margin: 0; }
.leiste-nav a { display: flex; align-items: center; gap: .55rem; padding: .55rem .65rem; border-radius: var(--r-s); font-size: .9375rem; font-weight: 500; color: var(--tinte-2); text-decoration: none; }
.leiste-nav a:hover { background: var(--sand); color: var(--tinte); }
.leiste-nav svg { width: 15px; height: 15px; color: var(--tinte-3); }

/* --- Seitenkopf – klar als Titelleiste abgesetzt ----------------------- */

.seitenkopf {
    background: var(--sand);
    border-bottom: 1px solid var(--sand-tief);
    padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(2.5rem, 5vw, 3.5rem);
    margin-bottom: clamp(3rem, 5vw, 4rem);
}

/* Abstand zwischen zwei eigenständigen Blöcken einer Seite –
   ersetzt die früheren Inline-Styles, damit er mobil steuerbar bleibt. */
.block-abstand { margin-bottom: clamp(3rem, 5vw, 4rem); }
/* Sektion, deren Inhalt direkt an den Seitenkopf anschließt */
.sek-anschluss { padding-top: 0; }
.seitenkopf-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 58rem) { .seitenkopf-grid { grid-template-columns: 1.35fr 1fr; } }
.seitenkopf h1 { margin-bottom: 1.25rem; }
.seitenkopf .label { margin-bottom: 1.1rem; }
.seitenkopf .krumen { margin-bottom: 1.25rem; }
.seitenkopf .btn-reihe { margin-top: 2rem; }
.seitenkopf-bild { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 10; }
.seitenkopf-bild img { width: 100%; height: 100%; object-fit: cover; }

/* Sprungmarken direkt unter dem Titel */
.sprungmarken {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sand-tief);
}
.sprungmarken a {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--weiss);
    border: 1px solid var(--sand-tief);
    border-radius: var(--r-pill);
    padding: .5rem 1rem;
    font-size: .875rem; font-weight: 600;
    color: var(--tinte); text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.sprungmarken a:hover { border-color: var(--tinte); transform: translateY(-2px); color: var(--tinte); }
.sprungmarken a svg { width: 14px; height: 14px; color: var(--tinte-3); }

/* --- Quick-Facts: das Wichtigste sofort -------------------------------- */

.quickfacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--sand-tief);
    border: 1px solid var(--sand-tief);
    border-radius: var(--r-l);
    overflow: hidden;
}
.quickfacts > div {
    background: var(--weiss);
    padding: 1.1rem 1.25rem;
    display: flex; gap: .75rem; align-items: flex-start;
}
.quickfacts .ico {
    width: 32px; height: 32px; flex: none;
    display: grid; place-items: center;
    border-radius: 9px; background: var(--sand); color: var(--tinte-2);
}
.quickfacts .ico svg { width: 16px; height: 16px; }
.quickfacts dt { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-3); margin-bottom: .15rem; }
.quickfacts dd { margin: 0; font-weight: 700; font-size: .9375rem; line-height: 1.35; }
.quickfacts dd small { display: block; font-weight: 400; font-size: .8125rem; color: var(--tinte-3); }

/* --- Merksatz: eine Aussage, groß ------------------------------------- */

.merksatz {
    display: flex; gap: 1.25rem; align-items: flex-start;
    background: var(--akzent-zart);
    border-radius: var(--r-l);
    padding: 1.85rem 2.1rem;
}
.merksatz > svg { width: 24px; height: 24px; color: var(--akzent); margin-top: .25rem; }
/* außerhalb des Fließtextbereichs eigenen Abstand mitbringen */
.vergleich + .merksatz, .karten + .merksatz, .zufahrten + .merksatz { margin-top: 1.5rem; }
.merksatz p { font-size: 1.0625rem; line-height: 1.7; }
.merksatz strong { font-weight: 700; }
.merksatz .titel { font-weight: 700; font-size: 1.125rem; margin-bottom: .55rem; display: block; }

/* --- Vergleich zweier Optionen ---------------------------------------- */

.vergleich { display: grid; gap: 1.35rem; }
@media (min-width: 44rem) { .vergleich { grid-template-columns: 1fr 1fr; } }
.vergleich-karte {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--r-l);
    padding: 1.85rem 2rem;
}
.vergleich-karte.betont { border-color: var(--akzent); border-width: 1.5px; }
.vergleich-kopf { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linie); }
.vergleich-kopf .tag { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.vergleich-kopf .stufe {
    margin-left: auto;
    font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: .25rem .7rem; border-radius: var(--r-pill);
    background: var(--sand); color: var(--tinte-2);
}
.vergleich-karte.betont .stufe { background: var(--akzent); color: #fff; }
.vergleich-liste { list-style: none; padding: 0; margin: 0; }
.vergleich-liste li { margin: 0; padding: .55rem 0 .55rem 1.5rem; position: relative; font-size: .9375rem; color: var(--tinte-2); }
.vergleich-liste li::before {
    content: ""; position: absolute; left: 0; top: 1.15rem;
    width: 6px; height: 6px; border-radius: 50%; background: var(--tinte-3);
}
.vergleich-karte.betont .vergleich-liste li::before { background: var(--akzent); }

/* --- Zufahrten-Bewertung ---------------------------------------------- */

.zufahrten { display: grid; gap: 1rem; }
.zufahrt {
    display: grid; gap: 1.15rem;
    grid-template-columns: auto minmax(0,1fr);
    align-items: start;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--r-l);
    padding: 1.6rem 1.85rem;
}
.zufahrt-note {
    width: 42px; height: 42px; flex: none;
    display: grid; place-items: center;
    border-radius: 12px;
    font-weight: 800; font-size: 1.1rem;
    background: var(--sand); color: var(--tinte-2);
}
.zufahrt.gut  { border-color: var(--gruen); border-width: 1.5px; }
.zufahrt.gut  .zufahrt-note { background: var(--gruen); color: #fff; }
.zufahrt.mittel .zufahrt-note { background: var(--sand-tief); color: var(--tinte); }
.zufahrt.schlecht .zufahrt-note { background: var(--akzent); color: #fff; }
.zufahrt h4 { font-size: 1.0625rem; font-weight: 700; margin-bottom: .35rem; }
.zufahrt p { font-size: .9375rem; color: var(--tinte-2); }
.zufahrt .empfehlung {
    display: inline-block; margin-top: .6rem;
    font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--gruen);
}

/* --- Tabelle ----------------------------------------------------------- */

.tabelle-wrap { overflow-x: auto; border-radius: var(--r-l); border: 1px solid var(--linie); }
table { width: 100%; border-collapse: collapse; background: var(--weiss); font-size: .9375rem; }
th, td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--linie); }
th { background: var(--sand); font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--tinte-2); }
tbody tr:last-child td { border-bottom: none; }

/* --- FAQ --------------------------------------------------------------- */

.faq { display: grid; gap: .85rem; }
.faq details { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-l); overflow: hidden; }
.faq details[open] { border-color: var(--tinte-3); }
.faq summary { cursor: pointer; padding: 1.4rem 1.75rem; font-weight: 600; font-size: 1.0625rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ""; flex: none; width: 20px; height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6474' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat; transition: transform .25s;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq .antwort { padding: 0 1.75rem 1.6rem; color: var(--tinte-2); line-height: 1.72; }
.faq .antwort > * + * { margin-top: .9rem; }

/* --- Infoboxen --------------------------------------------------------- */

.box { border-radius: var(--r-l); padding: 1.85rem 2.1rem; background: var(--sand); }
.box h3 { margin-bottom: .7rem; font-size: 1.125rem; }
.box p + p, .box ul { margin-top: .85rem; }
.box-akzent { background: var(--akzent-zart); }
.box-ico { display: flex; gap: 1rem; align-items: flex-start; }
/* Icon optisch auf die Mitte der ersten Textzeile setzen */
.box-ico > svg { width: 21px; height: 21px; margin-top: .1rem; color: var(--tinte-2); }
.box-ico > div > h3 { margin-top: 0; }
.box-akzent .box-ico > svg { color: var(--akzent); }

/* --- Rechnung ---------------------------------------------------------- */

.rechnung { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-l); padding: 1.7rem 1.9rem; }
.rechnung dl { display: grid; grid-template-columns: 1fr auto; gap: .6rem 1rem; margin: 0; }
.rechnung dt { color: var(--tinte-2); }
.rechnung dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.rechnung .summe { border-top: 1px solid var(--linie); padding-top: .75rem; margin-top: .35rem; font-weight: 700; font-size: 1.1rem; }

/* --- Parkkarte mit Legende --------------------------------------------- */

.parkkarte { margin-block: 2rem; }

.parkkarte-bild {
    border-radius: var(--r-l);
    overflow: hidden;
    border: 1px solid var(--linie);
    background: var(--sand);
    position: relative;
}
.parkkarte-bild img { width: 100%; height: auto; display: block; }

/* Interaktive Karte: feste Höhe, damit das Layout nicht springt */
.parkkarte-bild iframe {
    display: block;
    width: 100%;
    height: clamp(340px, 46vw, 520px);
    border: 0;
}

.parkkarte-bild figcaption {
    font-size: .6875rem; color: var(--tinte-3);
    padding: .5rem .85rem;
    background: var(--weiss);
    border-top: 1px solid var(--linie);
    display: flex; flex-wrap: wrap; gap: .35rem 1rem; justify-content: space-between;
}
.parkkarte-bild figcaption a { color: inherit; }

/* Legende: kompakte Chip-Reihe unter der Karte */
.legende {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin: .85rem 0 0;
}
.legende-eintrag {
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--r-pill);
    padding: .4rem .95rem .4rem .5rem;
}
.legende-farbe {
    width: 18px; height: 18px; flex: none;
    border-radius: 5px;
    border: 2px solid;
}
.legende dt { font-weight: 600; font-size: .875rem; }
.legende dd { margin: 0; }

/* Farben exakt wie in der uMap-Karte */
.legende-farbe.gelaende      { background: rgba(107,107,196,.45); border-color: #4A4AAF; }
.legende-farbe.kostenpflicht { background: rgba(245,166,35,.45);  border-color: #E08A00; }
.legende-farbe.kostenlos     { background: rgba(60,220,60,.50);   border-color: #2ABF2A; }
.legende-farbe.gesperrt      { background: rgba(224,51,51,.40);   border-color: #D33; }

/* --- Buslinien --------------------------------------------------------- */

.linien { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-block: 1.25rem; }
.linie-nr {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--tinte); color: #fff;
    border-radius: var(--r-s);
    padding: .45rem .85rem;
    font-weight: 700; font-size: 1rem;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}
.linie-nr svg { width: 15px; height: 15px; color: rgba(255,255,255,.6); }
.linien .ziel { font-size: .9375rem; color: var(--tinte-2); }

/* --- Kartenfläche ------------------------------------------------------ */

.kartenflaeche {
    position: relative; border-radius: var(--r-xl); overflow: hidden;
    background: var(--sand); border: 1px solid var(--linie);
    aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center; padding: 2rem;
}
.kartenflaeche .platzhalter { max-width: 32ch; }
.kartenflaeche .platzhalter svg { width: 32px; height: 32px; color: var(--tinte-3); margin: 0 auto 1rem; }
.kartenflaeche iframe { width: 100%; height: 100%; border: 0; position: absolute; inset: 0; }

/* --- CTA --------------------------------------------------------------- */

.cta-band { background: var(--tinte); color: rgba(255,255,255,.72); border-radius: var(--r-xl); padding: clamp(2.5rem, 5vw, 4rem); }
.cta-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 52rem) { .cta-grid { grid-template-columns: 1.5fr auto; } }
.cta-band h2 { color: #fff; margin-bottom: .85rem; }
.cta-band p { color: rgba(255,255,255,.68); max-width: 50ch; }
.cta-band .label { color: rgba(255,255,255,.45); margin-bottom: 1rem; }

/* --- Abschlussblock: der nächste Termin als Schlusspunkt --------------- */

.abschluss {
    background: var(--tinte);
    color: rgba(255,255,255,.7);
    border-radius: var(--r-xl);
    padding: clamp(2.5rem, 5vw, 4rem);
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}
@media (min-width: 56rem) { .abschluss { grid-template-columns: 1fr auto; } }

.abschluss .label { color: rgba(255,255,255,.4); margin-bottom: 1rem; }
.abschluss-datum {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.05;
    color: #fff;
    margin-bottom: .5rem;
}
.abschluss-tage { font-size: 1.125rem; color: var(--bernstein-hell, #EFAE33); font-weight: 600; }
.abschluss-tage b { color: #fff; }

.abschluss-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.abschluss-chips span {
    display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-pill);
    padding: .45rem 1rem;
    font-size: .875rem;
    color: rgba(255,255,255,.85);
}
.abschluss-chips svg { width: 15px; height: 15px; color: rgba(255,255,255,.5); }

.abschluss-aktion { display: grid; gap: .65rem; }
@media (max-width: 55.99rem) { .abschluss-aktion { grid-auto-flow: column; justify-content: start; } }
@media (max-width: 34rem) { .abschluss-aktion { grid-auto-flow: row; } }

/* --- Bilder ------------------------------------------------------------ */

.bild-gross { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 10; }
.bild-gross img { width: 100%; height: 100%; object-fit: cover; }
.bild-breit { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 21 / 9; }
.bild-breit img { width: 100%; height: 100%; object-fit: cover; }

/* --- Fußzeile ---------------------------------------------------------- */

.fuss { background: var(--tinte); color: rgba(255,255,255,.65); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: .9375rem; margin-top: var(--luft); }
.fuss-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin-bottom: 2.5rem; }
.fuss h4 { color: #fff; margin-bottom: 1rem; font-size: .6875rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; }
.fuss ul { list-style: none; padding: 0; }
.fuss li + li { margin-top: .55rem; }
.fuss a { color: rgba(255,255,255,.65); text-decoration: none; }
.fuss a:hover { color: #fff; }
.fuss address { font-style: normal; line-height: 1.75; }
.fuss-abgrenzung { background: rgba(255,255,255,.04); border-radius: var(--r-l); padding: 1.4rem 1.7rem; margin-bottom: 2.5rem; font-size: .875rem; line-height: 1.65; }
.fuss-abgrenzung strong { color: #fff; font-weight: 600; }
.fuss-abgrenzung a { text-decoration: underline; }
.fuss-unten { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .8125rem; color: rgba(255,255,255,.42); }

/* --- Werbung / Brotkrumen ---------------------------------------------- */

/* Kennzeichnungspflicht in Deutschland: jede Fläche trägt sichtbar „Anzeige". */
.werbung { text-align: center; }
.werbung::before {
    content: "Anzeige";
    display: block;
    font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--tinte-3); margin-bottom: .5rem;
}
.werbung > ins, .werbung > .werbung-platzhalter { display: block; width: 100%; }

/* Feste Mindesthöhen verhindern Layout-Sprünge beim Nachladen */
.werbung-oben   { margin-block: clamp(2.5rem, 5vw, 4rem); min-height: 130px; }
.werbung-inhalt { margin-block: 3rem; min-height: 280px; }
.werbung-unten  { margin-block: clamp(3rem, 5vw, 4rem) 0; min-height: 280px; }
.werbung-leiste { min-height: 630px; }

/* Abstand zu klickbaren Elementen – schützt vor Fehlklicks (Richtlinie) */
.werbung + .btn-reihe, .btn-reihe + .werbung,
.werbung + .karten, .karten + .werbung { margin-top: 2.5rem; }

.werbung-platzhalter {
    display: grid; place-items: center;
    background: repeating-linear-gradient(135deg,
        var(--sand) 0 10px, transparent 10px 20px);
    border: 1px dashed var(--sand-tief);
    border-radius: var(--r-m);
    color: var(--tinte-3);
    font-size: .8125rem;
}
.werbung-oben   .werbung-platzhalter { min-height: 110px; }
.werbung-inhalt .werbung-platzhalter,
.werbung-unten  .werbung-platzhalter { min-height: 260px; }
.werbung-leiste .werbung-platzhalter { min-height: 610px; }

/* In der Sidebar klebt die Anzeige mit – lange Sichtbarkeit, hohe Vergütung */
.seiten-leiste .werbung-leiste { position: sticky; top: 6.5rem; }
@media (max-width: 61.99rem) {
    .seiten-leiste .werbung-leiste { position: static; min-height: 280px; }
    .werbung-leiste .werbung-platzhalter { min-height: 260px; }
}

.krumen { font-size: .8125rem; color: var(--tinte-3); margin-bottom: 1.5rem; }
.krumen a { color: inherit; text-decoration: none; }
.krumen a:hover { text-decoration: underline; }
.krumen span { margin-inline: .4rem; opacity: .5; }

/* --- Mobile Navigation ------------------------------------------------- */

@media (max-width: 68rem) {
    .nav-schalter { display: block; }
    .kopf-innen { position: relative; }
    .nav {
        display: none; position: absolute; top: calc(100% + .6rem); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--weiss); border: 1px solid var(--linie);
        border-radius: var(--r-l); padding: .5rem; box-shadow: var(--schatten-m);
        max-height: calc(100vh - 6rem); overflow-y: auto;
    }
    .nav.offen { display: flex; }
    .nav a {
        padding: .85rem 1rem; border-radius: var(--r-m);
        font-size: 1rem; font-weight: 500;
    }
    .nav a + a { border-top: 1px solid var(--linie); border-radius: 0; }
    .nav a:first-child { border-radius: var(--r-m) var(--r-m) 0 0; }
    .nav a:last-child  { border-radius: 0 0 var(--r-m) var(--r-m); }

    /* Die beiden Bereiche als volle Zeilen statt gequetschter Pillen */
    .nav-gruppe {
        flex-direction: column; gap: 0;
        margin: .5rem 0 0; padding: .5rem 0 0;
        border-left: 0; border-top: 1px solid var(--linie);
    }
    .nav-gruppe a { background: transparent; justify-content: flex-start; border-top: 0; }
    .nav-gruppe a[aria-current="page"] { background: var(--tinte); }
}

/* ======================================================================
   Mobil: kompakter setzen
   ====================================================================== */

@media (max-width: 47.99rem) {

    body { font-size: 1rem; line-height: 1.6; }

    h1 { font-size: clamp(1.85rem, 8vw, 2.4rem); letter-spacing: -.03em; }
    h2 { font-size: clamp(1.45rem, 6vw, 1.9rem); letter-spacing: -.025em; }
    h3 { font-size: 1.15rem; }
    .vorspann { font-size: 1.0625rem; line-height: 1.55; }

    .seiten-inhalt p, .seiten-inhalt li { line-height: 1.65; }
    .seiten-inhalt > h2 { margin-top: 3rem; padding-top: 2.25rem; font-size: 1.5rem; }
    .seiten-inhalt > h3 { margin-top: 2.25rem; }
    .seiten-inhalt > * + * { margin-top: 1.25rem; }
    .seiten-inhalt > .box, .seiten-inhalt > .merksatz, .seiten-inhalt > .rechnung,
    .seiten-inhalt > .tabelle-wrap, .seiten-inhalt > .karten, .seiten-inhalt > .vergleich,
    .seiten-inhalt > .zufahrten, .seiten-inhalt > .parkkarte, .seiten-inhalt > .faq,
    .seiten-inhalt > .linien, .seiten-inhalt > .bild-breit { margin-block: 1.85rem; }

    /* Sektionen brauchen mehr Luft als die Elemente in ihnen – sonst
       verschwimmt die Gliederung. Innen kompakt, außen großzügig. */
    section { padding-block: 4.25rem; }
    :root { --luft: 4.25rem; }
    .wrap { width: calc(100% - 2rem); }
    .sek-kopf { margin-bottom: 2rem; }
    .sek-kopf p { margin-top: .85rem; }
    .sek-kopf-aktion { margin-top: 1.35rem; }

    /* Auf Mobile brauchen eigenständige Blöcke mehr Trennung, nicht weniger */
    .block-abstand { margin-bottom: 3rem; }
    .seitenkopf { margin-bottom: 3rem; }
    .seiten-grid { gap: 3rem; }

    /* Abstände zwischen gleichartigen Bausteinen */
    .karten, .bildkarten, .vergleich, .zufahrten, .wochenenden { gap: 1.1rem; }
    .fakten { padding-top: 3rem; }
    .werbung-inhalt, .werbung-unten { margin-block: 2.5rem; }

    /* Innenabstände zurücknehmen – sonst bleibt kaum Textbreite */
    .box, .merksatz { padding: 1.35rem 1.4rem; border-radius: var(--r-m); }
    .merksatz { gap: .85rem; }
    .merksatz > svg { width: 20px; height: 20px; }
    .merksatz p { font-size: 1rem; }
    .merksatz .titel { font-size: 1.05rem; }
    .vergleich-karte { padding: 1.35rem 1.4rem; }
    .zufahrt { padding: 1.25rem 1.35rem; gap: .9rem; }
    .karte-schlicht { padding: 1.5rem 1.4rem; }
    .leiste-karte { padding: 1.35rem 1.4rem; }
    .faq summary { padding: 1.1rem 1.25rem; font-size: 1rem; }
    .faq .antwort { padding: 0 1.25rem 1.25rem; }

    /* Hero-Zeile: Icon links über beide Zeilen, Countdown oben, Datum darunter.
       Nichts wird abgeschnitten, nichts bricht mitten im Satz um. */
    .naechster-hinweis {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: .1rem .7rem;
        width: 100%;
        padding: .75rem 1rem;
        border-radius: var(--r-m);
        font-size: .9375rem;
        margin-bottom: 1.5rem;
    }
    .naechster-hinweis .punkt { width: 30px; height: 30px; grid-row: span 2; }
    .naechster-hinweis .punkt svg { width: 16px; height: 16px; }
    .naechster-hinweis > span:not(.punkt) { grid-column: 2; }
    .naechster-hinweis .dazu {
        border-left: 0; padding-left: 0; margin-left: 0;
        font-size: .8125rem; white-space: normal; font-weight: 500;
    }

    /* Gleichmäßiger Rhythmus im Hero */
    .hero { padding-block: 2rem 2.5rem; }
    .hero-grid { gap: 2rem; }
    .hero h1 { margin-bottom: .9rem; }
    .hero .vorspann { margin-bottom: 1.75rem; }
    .hero-bild { aspect-ratio: 3 / 2; border-radius: var(--r-l); }

    /* Sprungmarken: mehr passen nebeneinander */
    .sprungmarken { gap: .4rem; margin-top: 1.35rem; padding-top: 1.25rem; }
    .sprungmarken a { padding: .4rem .75rem; font-size: .8125rem; gap: .3rem; }
    .sprungmarken a svg { width: 12px; height: 12px; }

    /* Quick-Facts: eine Angabe je Zeile, Label darüber, Zusatz darunter.
       Nebeneinander laufen Wert und Zusatz bei langen Angaben ineinander. */
    .quickfacts { grid-template-columns: 1fr; border-radius: var(--r-m); }
    .quickfacts > div { padding: .9rem 1.1rem; align-items: flex-start; gap: .8rem; }
    .quickfacts .ico { width: 30px; height: 30px; border-radius: 8px; margin-top: .1rem; }
    .quickfacts > div > div { min-width: 0; }
    .quickfacts dt { font-size: .625rem; margin-bottom: .15rem; }
    .quickfacts dd { font-size: .9375rem; line-height: 1.35; }
    .quickfacts dd small { display: block; margin-top: .1rem; line-height: 1.35; }

    /* Tabellen scrollen, statt die Seite aufzuziehen */
    .tabelle-wrap { border-radius: var(--r-m); }
    table { font-size: .875rem; min-width: 26rem; }
    th, td { padding: .75rem .85rem; }

    .rechnung { padding: 1.35rem 1.4rem; }
    .rechnung dl { gap: .5rem .75rem; }
    .rechnung dt, .rechnung dd { font-size: .9375rem; }

    .btn { padding: .8rem 1.35rem; font-size: .9375rem; }
    .btn-reihe { gap: .55rem; }
    /* Im Hero sollen möglichst zwei Schaltflächen nebeneinander passen */
    .hero .btn { padding: .75rem 1.15rem; font-size: .875rem; }
    .fakten { gap: 1.75rem 1.25rem; padding-top: 2.5rem; }
    .fakten dd { font-size: 1.15rem; }
    .seitenkopf { margin-bottom: 2.25rem; }
    .wochenende { padding: 1rem 1.15rem; }
    .we-info h3 { font-size: 1.05rem; }
    .we-schild { display: inline-block; margin: .35rem 0 0; }
    .abschluss { padding: 1.85rem 1.5rem; }
    .cta-band { padding: 1.85rem 1.5rem; }
}

/* Sicherheitsnetz gegen horizontales Scrollen */
img, iframe, table, pre { max-width: 100%; }
.wochenenden, .karten, .bildkarten, .vergleich, .zufahrten,
.quickfacts, .eckdaten, .fakten { min-width: 0; }

/* ======================================================================
   Rendering-Optimierung
   Abschnitte außerhalb des Sichtfelds werden erst gerendert, wenn sie
   in die Nähe kommen. Die contain-intrinsic-size verhindert dabei, dass
   die Scrollleiste springt.
   ====================================================================== */

.sek-sand, .sek-weiss, .hero ~ section {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}
/* Ausgenommen: der sofort sichtbare Bereich – und alles, was ein Sprungziel
   ist. Bei ausgelagertem Rendering kennt der Browser die Höhe nicht genau
   und würde beim Ankersprung an die falsche Stelle scrollen. */
.hero, .seitenkopf, .fuss, section[id], [id] { content-visibility: visible; }