/* ============================================================
   Buffet-Anfrage – Design von die-fleckenbuehler.de
   Farben, Schriften und Typo-Skala am Original gemessen (Stand 08/2026):
     Fließtext  Frutiger 19px / 1.53, schwarz
     Kleintext  Frutiger 14px / 1.53, 0.06em gesperrt, #706f6f
     h1         Lucida 42px   h2 32px   h3 24px, alle #283583, Gewicht 400
     h2         volle 1px-Linie in Orange, darunter beim ersten Abschnitt
                ein 160x5px Balken (so macht es das Original auch)
     Buttons    #dedc00 gefüllt, dunkler Text, keine Rundung
     Textspalte 784px
   ============================================================ */

/* --- Schriften (selbst gehostet) --- */
@font-face {
    font-family: "Frutiger";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/frutiger-regular.woff2") format("woff2");
}
@font-face {
    font-family: "Frutiger";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/frutiger-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Frutiger";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/frutiger-bold.woff2") format("woff2");
}
@font-face {
    font-family: "Frutiger";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/frutiger-bold-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Lucida";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lucida-regular.woff2") format("woff2");
}

/* --- Design-Tokens --- */
:root {
    --blau:      #283583;   /* Primär: Überschriften, Akzente */
    --orange:    #f7a600;   /* Deko-Linien, Buttons */
    --lime:      #dedc00;   /* Schaltflächen, Häkchen-Icon */
    --text:      #000;      /* Fließtext – auf der Hauptseite schwarz */
    --text-grau: #706f6f;   /* Kleingedrucktes, Nebenangaben */
    --text-dunkel: #3e3e3e; /* Labels */
    --bg-creme:  #fff7e2;   /* Hero-Hintergrund */
    --bg-blau:   #e0dfeb;   /* dezente Flächen */
    --fehler:    #dc3545;
    --font-text: "Frutiger", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-head: "Lucida", Helvetica, Arial, sans-serif;
}

/* --- Basis --- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-text);
    font-size: 1.1875rem;   /* 19px */
    line-height: 1.53;
    color: var(--text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 824px;       /* ergibt 784px Textspalte wie im Original */
    margin: 0 auto;
    padding: 0 1.25rem;
}

h1 {
    font-family: var(--font-head);
    font-size: 2.625rem;    /* 42px */
    font-weight: 400;
    line-height: 1.21;
    color: var(--blau);
    margin: 0 0 2rem;
}

h2 {
    font-family: var(--font-head);
    font-size: 2rem;        /* 32px */
    font-weight: 400;
    line-height: 1.31;
    color: var(--blau);
    margin: 0 0 1rem;
}

/* Das Original setzt Links ohne Unterstreichung. Beim Überfahren und im
   Tastaturfokus wird sie eingeblendet – sonst ist ein Link im Fließtext nur
   noch an der Farbe zu erkennen. */
/* Deutsche Komposita wie "Verbraucherstreitbeilegungsgesetz" und lange
   E-Mail-Adressen sind breiter als eine Handy-Spalte und würden die Seite sonst
   seitlich aufschieben. In den Rechtstexten zusätzlich Trennstriche (lang="de"). */
h1, h2, h3, legend,
p, li, dd, address, a {
    overflow-wrap: break-word;
}
h1, h2, h3, legend,
.rechtstext p, .rechtstext li {
    hyphens: auto;
}

/* Das Original zeichnet die Unterstreichung nicht mit text-decoration, sondern
   als box-shadow – sie sitzt dadurch tiefer und wird von Unterlängen nicht
   durchschnitten. Beim Überfahren wird sie orange und etwas dicker, die
   Schriftfarbe bleibt blau. Gemessene Versätze: 1.33px und 1.71px. */
a {
    color: var(--blau);
    text-decoration: none;
    box-shadow: 0 1.33px 0 0 transparent, 0 1.71px 0 0 var(--blau);
    transition: box-shadow .15s ease-in-out;
}
a:hover,
a:focus-visible {
    color: var(--blau);
    box-shadow: 0 1.33px 0 0 var(--orange), 0 1.71px 0 0 var(--orange);
}

/* Bild- und Schaltflächenlinks tragen keine Unterstreichung. */
.logo-link,
.btn { box-shadow: none; }
.logo-link:hover, .logo-link:focus-visible,
.btn:hover, .btn:focus-visible { box-shadow: none; }

/* --- Rechtstexte (eigene Seite, z.B. Datenschutzerklärung) --- */
/* Abschnittsüberschrift wie im Original: dünne Linie über die ganze Spalte,
   erzeugt über padding-bottom + ::after. Denselben Aufbau nutzt legend. */
.rechtstext h2 {
    position: relative;
    padding-bottom: 1.365rem;   /* 21.85px */
    margin: 3.2rem 0 1.9rem;
}
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h2::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    height: 1px;
    background: var(--orange);
}
/* Der kurze dicke Balken sitzt im Original nur unter dem ersten Abschnitt. */
.rechtstext h2:first-of-type::before {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 160px;
    height: 5px;
    background: var(--orange);
}
.rechtstext h3 {
    font-family: var(--font-head);
    font-size: 1.5rem;          /* 24px */
    font-weight: 400;
    line-height: 1.42;
    color: var(--blau);
    margin: 2.2rem 0 .6rem;
}
/* Keine eigene Maximalbreite: Text und Schmucklinie sollen auf derselben
   Kante enden, und die Spalte begrenzt schon .container. */
.rechtstext p,
.rechtstext ul,
.rechtstext ol { margin: 0 0 1.5rem; }
.rechtstext ul,
.rechtstext ol { padding-left: 1.4rem; }
.rechtstext li { margin-bottom: .4rem; }
.rechtstext address {
    font-style: normal;
    background: var(--bg-creme);
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.5rem;
}
/* Inhaltsverzeichnis oben im Rechtstext. Wie auf der Hauptseite: Liste ohne
   Aufzählungszeichen, blaue Links, keine eigene Überschrift darüber.
   Gemessene Werte des Originals: padding-left 18px, li-Abstand 10.85px. */
.rechtstext .inhalt {
    list-style: none;
    padding-left: 18px;
    margin: 0 0 2.6rem;
}
.rechtstext .inhalt li {
    position: relative;
    padding-left: 26.6px;
    margin-bottom: .68rem;
}
.rechtstext .inhalt li:last-child { margin-bottom: 0; }
/* Limettengelber Pfeil je Eintrag, wie im Original. Eigene Datei statt
   data:-URI, weil die strikte CSP nur 'self' erlaubt.
   Gemessen: 15.2px groß, bei left 0 / top 7.6px. */
.rechtstext .inhalt li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7.6px;
    width: 15.2px;
    height: 15.2px;
    background: url("../img/pfeil-liste.svg") no-repeat center / contain;
}

.rechtstext .stand { font-size: .875rem; letter-spacing: .06em; color: var(--text-grau); }

/* --- Header --- */
.site-header {
    background: #fff;
    border-bottom: 1px solid var(--bg-blau);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.3rem;      /* 20.8px – gemessen auf der Hauptseite */
    padding-bottom: .85rem;   /* 13.6px */
}
.logo-link { display: inline-flex; }
/* Natürliche Größe der SVG-Datei (196 x 70) – so rendert sie auch die
   Hauptseite. max-width verhindert, dass sie auf schmalen Geräten überläuft. */
.logo-link img {
    display: block;
    height: 70px;
    width: auto;
    max-width: 100%;
}
.header-claim {
    font-family: var(--font-head);
    color: var(--blau);
    font-size: 1.05rem;
    text-align: right;
}

/* --- Seitenkopf ---
   Das Original stellt die h1 auf weißen Grund, ohne farbige Fläche. Creme
   bleibt für abgesetzte Blöcke (Adressen, Erfolgsmeldung) wie beim Newsletter
   auf der Hauptseite. */
.hero {
    padding: 2.4rem 0 .6rem;
}
.hero .intro {
    max-width: 46rem;
    margin: 0;
}
/* Die Einleitung der Speisekarte kommt aus speisekarte.json mit Absätzen
   (\n\n), die als ein einziges <p> ausgegeben werden (siehe baueKopf() in
   speisekarte.js) – ohne diese Regel fasst der Browser sie zu einem
   Fließtextblock zusammen. Bewusst nur für die Karten-Seite (.karte-hero),
   nicht für .hero .intro allgemein: Die anderen Hero-Einleitungen (z. B.
   index.html) sind im Quelltext nur der Lesbarkeit halber hart umgebrochen –
   pre-line würde dort ungewollte Zeilenumbrüche zeigen. */
.karte-hero .intro {
    white-space: pre-line;
}

/* --- Formular-Grundgerüst --- */
main { flex: 1 0 auto; padding: 2.5rem 0 3.5rem; }

fieldset {
    border: 0;
    margin: 0 0 2.6rem;
    padding: 0;
    min-width: 0;
}

/* Legende wie eine h2 der Hauptseite gestalten – inkl. der markanten
   orangefarbenen Linie mit kurzem, dickem Balken darunter */
legend {
    float: left;             /* normalisiert das Sonderverhalten von <legend> */
    width: 100%;
    font-family: var(--font-head);
    font-size: 2rem;         /* 32px, wie h2 */
    line-height: 1.31;
    color: var(--blau);
    padding: 0 0 1.05rem;
    margin: 0 0 1.6rem;
    position: relative;
}
legend::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    height: 1px;
    background: var(--orange);
}
/* Wie bei .rechtstext h2: den kurzen dicken Balken bekommt nur der erste
   Abschnitt der Seite, alle weiteren nur die dünne Linie. */
fieldset:first-of-type legend::before {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 160px;
    height: 5px;
    background: var(--orange);
}
legend + * { clear: both; }

.pflicht-hinweis { margin: 0 0 2rem; font-size: .875rem; letter-spacing: .06em; color: var(--text-grau); }

/* --- Felder --- */
.feld { margin-bottom: 1.2rem; }
.feld:last-child { margin-bottom: 0; }
.feld-schmal { max-width: 20rem; }

label,
.gruppen-label {
    display: block;
    font-weight: 700;
    font-size: .95rem;
    color: var(--text-dunkel);
    margin-bottom: .35rem;
}
.optional { font-weight: 400; color: var(--text-grau); }

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="time"],
input[type="number"],
textarea {
    display: block;
    width: 100%;
    padding: .5rem .75rem;
    font: inherit;
    color: #000;
    background: #fff;
    border: 1px solid var(--blau);     /* dünner blauer Rahmen wie im Original */
    border-radius: 0;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
textarea { resize: vertical; }

/* Fokus: limettengelber Ring, der Rahmen bleibt blau. Genau so macht es das
   Original – gemessen am Kontaktformular der Hauptseite:
   box-shadow: 0 0 0 3.8px rgba(222, 220, 0, .25). Der Wert steht bewusst in px,
   nicht in rem: Im Original sind es .2rem bei 19px Wurzelgröße, hier wären
   .2rem nur 3.2px. */
input:focus,
textarea:focus {
    outline: 0;
    border-color: var(--blau);
    box-shadow: 0 0 0 3.8px rgba(222, 220, 0, .25);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--fehler); }

input:disabled {
    background: #f4f4f4;
    border-color: #d9d9d9;
}

/* Zwei- bzw. dreispaltige Feldraster */
.grid-2, .grid-3 { display: grid; gap: 1.2rem 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* --- Checkboxen & Radios --- */
.optionen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .45rem 1.5rem;
    margin-bottom: .4rem;
}
.option {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-dunkel);
    margin: 0;
    cursor: pointer;
}
.option input {
    width: 1.15rem;
    height: 1.15rem;
    margin: .15rem 0 0;
    accent-color: var(--blau);
    flex-shrink: 0;
    cursor: pointer;
}
.sonstiges-feld { margin-top: .8rem; max-width: 32rem; }
.sonstiges-feld label { font-weight: 400; font-size: .9rem; }
/* Erläuterung unter einem Feld – kleiner und grau wie das Kleingedruckte. */
.feld-hinweis {
    margin: .45rem 0 0;
    font-size: .875rem;
    letter-spacing: .06em;
    color: var(--text-grau);
}
/* Einwilligung für besondere Kategorien – erscheint nur bei Bedarf, deshalb
   abgesetzt, damit sie im Datenschutzblock nicht wie ein zweites Pflichtfeld wirkt. */
.besondere-daten {
    margin-top: 1.2rem;
    padding: .9rem 1.1rem;
    background: var(--bg-creme);
}
.besondere-daten .feld-hinweis { margin-bottom: 0; }

.datenschutz-option { max-width: 44rem; }

/* --- Fehlerdarstellung --- */
.feld-fehler {
    margin: .35rem 0 0;
    font-size: .875rem;
    color: var(--fehler);
}
.form-fehler {
    margin: 1rem 0 0;
    padding: .75rem 1rem;
    font-size: .95rem;
    color: var(--fehler);
    border: 1px solid var(--fehler);
    background: #fdf0f1;
}

/* --- Button (eckiger Outline-Stil der Hauptseite) --- */
/* Gefüllt in Limettengelb mit dunklem Text und ohne Rundung – so sehen die
   Schaltflächen auf der Hauptseite aus (dort z. B. "Ja, bitte!"). */
.btn {
    display: inline-block;
    padding: .4em 1.4em;
    font: inherit;
    font-weight: 400;
    color: #212529;
    text-decoration: none;
    background: var(--lime);
    border: 1px solid var(--lime);
    border-radius: 0;
    cursor: pointer;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.btn:hover,
.btn:focus-visible {
    background: #c5c300;
    border-color: #c5c300;
    color: #212529;
    text-decoration: none;
}
.btn:disabled {
    opacity: .65;
    cursor: wait;
}
.submit-zeile { margin-top: .5rem; }

/* --- Erfolgsmeldung --- */
.erfolg {
    text-align: center;
    background: var(--bg-creme);
    padding: 3rem 1.5rem;
    margin-bottom: 2rem;
}
.erfolg-icon { margin-bottom: 1rem; }
.erfolg h2 { margin-bottom: .6rem; }
.erfolg p { max-width: 36rem; margin: 0 auto 1rem; }

/* Vorgangsnummer und Eingangszeit */
.erfolg-vorgang { font-size: .95rem; }
.erfolg-vorgang strong { font-family: monospace; font-size: 1rem; overflow-wrap: anywhere; }

/* Kasten mit dem Hinweis "keine E-Mail" und den beiden Schaltflächen */
.erfolg-hinweis {
    max-width: 36rem;
    margin: 1.6rem auto;
    padding: 1rem 1.2rem;
    background: #fff;
    border-left: 4px solid var(--orange);
    text-align: left;
}
.erfolg-hinweis p:last-child { margin-bottom: 0; }
.erfolg-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

/* Die abgeschickten Angaben, linksbündig als Beschriftung/Wert-Paare */
.erfolg-angaben {
    max-width: 36rem;
    margin: 0 auto 1.6rem;
    text-align: left;
}
.erfolg-angaben h3 {
    font-family: var(--font-head);
    font-size: 1.25rem;     /* 20px – muss über dem 19px-Fließtext liegen */
    font-weight: 400;
    color: var(--blau);
    margin: 1.4rem 0 .4rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--orange);
}
/* Kapitel der Speisenauswahl – untergeordnet zur Abschnittsüberschrift (h3):
   kleiner, ohne Schmucklinie. Steht zwischen zwei <dl>, weil eine Definitions-
   liste nur dt/dd enthalten darf (siehe form.js/angabenAnzeigen). */
.erfolg-angaben h4 {
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--blau);
    margin: .9rem 0 .2rem;
}
.erfolg-angaben h4:first-of-type { margin-top: .5rem; }
.erfolg-angaben dl {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: .3rem 1rem;
    margin: 0;
}
.erfolg-angaben dt { color: var(--text-dunkel); }
.erfolg-angaben dd { margin: 0; overflow-wrap: anywhere; }
/* Freitext (Nachricht) läuft über beide Spalten und behält Umbrüche */
.erfolg-angaben dd.breit {
    grid-column: 1 / -1;
    white-space: pre-wrap;
}

.erfolg-kontakt { font-size: .95rem; }
.erfolg-zurueck { margin-top: 1.6rem; }

/* ── Speisenauswahl ── */
/* Kapitel sind zugeklappt: 131 offene Gerichte würden den Kontaktbereich
   drei Bildschirmseiten weit wegschieben. */
#speisenauswahl .kapitel {
    border-bottom: 1px solid var(--bg-blau);
}
#speisenauswahl summary {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .7rem 0;
    cursor: pointer;
    font-family: var(--font-head);
    color: var(--blau);
}
#speisenauswahl summary::marker { color: var(--orange); }
#speisenauswahl .kapitel-nr { color: var(--orange); }
#speisenauswahl .auswahl-anzahl {
    margin-left: auto;
    font-family: var(--font-text);
    font-size: .875rem;
    color: var(--text-grau);
}
#speisenauswahl .abschnitt { padding: .3rem 0 1rem; }
#speisenauswahl .abschnitt-titel {
    margin: .8rem 0 .2rem;
    font-size: 1rem;
    color: var(--blau);
}
#speisenauswahl .abschnitt-einheit { color: var(--text-grau); font-weight: 400; }
#speisenauswahl .gruppe-titel {
    margin: .7rem 0 .2rem;
    font-size: .875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-grau);
}
#speisenauswahl .gerichte { margin: 0; padding: 0; list-style: none; }
#speisenauswahl .gericht {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .3rem .6rem;
    padding: .25rem 0;
}
#speisenauswahl .gericht-wahl { display: flex; gap: .5rem; align-items: baseline; }
#speisenauswahl .gericht-menge { display: flex; gap: .3rem; align-items: center; }
#speisenauswahl .gericht-menge input {
    width: 4.5rem;
    text-align: right;
}
#speisenauswahl .menge-einheit { font-size: .875rem; color: var(--text-grau); }
#speisenauswahl .gericht-hinweis {
    grid-column: 1 / -1;
    font-size: .8125rem;
    color: var(--text-grau);
}
.hero-aktionen { margin-top: 1.2rem; }

/* --- Footer --- */
.site-footer {
    border-top: 1px solid var(--orange);
    font-size: .875rem;
    letter-spacing: .06em;
    color: var(--text-grau);
    margin-top: auto;
}
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
}
.footer-inner p { margin: 0; }
.site-footer a { color: var(--blau); }

/* --- Honeypot: unsichtbar für Menschen, sichtbar für Bots --- */
.hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Tastatur-Fokus --- */
a:focus-visible,
.option input:focus-visible {
    outline: 2px solid var(--blau);
    outline-offset: 2px;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .header-claim { display: none; }
    h1 { font-size: 1.9rem; }
    h2, legend { font-size: 1.5rem; }
    .rechtstext h3 { font-size: 1.2rem; }
    .rechtstext h2 { padding-bottom: 1rem; margin: 2.4rem 0 1.4rem; }
    .hero { padding: 1.8rem 0 .4rem; }
    /* Beschriftung über den Wert: zwei Spalten sind hier zu schmal für
       Adressen und Vorgangsnummern. */
    .erfolg-angaben dl { grid-template-columns: 1fr; gap: 0; }
    .erfolg-angaben dt { margin-top: .6rem; }
    .erfolg-hinweis, .erfolg-angaben { text-align: left; }
}

/* --- Druckansicht ---
   Damit "Drucken" im Erfolgsbereich eine brauchbare Kopie ergibt: Navigation,
   Schaltflächen und Dekoration raus, Angaben schwarz auf weiß. */
@media print {
    .site-header,
    .site-footer,
    .hero:not(.karte-hero),
    .erfolg-aktionen,
    .erfolg-zurueck,
    .erfolg-icon,
    #anfrage-form {
        display: none !important;
    }
    body { background: #fff; color: #000; }
    .erfolg {
        background: #fff;
        padding: 0;
        text-align: left;
    }
    .erfolg p, .erfolg-angaben, .erfolg-hinweis { max-width: none; margin-left: 0; }
    .erfolg-hinweis { border-left: none; padding: 0; }
    .erfolg-angaben h3, .erfolg-angaben h4 { break-after: avoid; }
    .erfolg-angaben dl { break-inside: avoid; }
    a { color: #000; text-decoration: none; }
}

/* ── Speisekarten-Seite ── */
.karte-inhalt ol { margin: 0 0 2.5rem; padding-left: 1.2rem; }
.karte-inhalt a { font-family: var(--font-head); }
.karte-preise { color: var(--text-grau); font-size: .9375rem; }

.karte-kapitel { margin: 0 0 3rem; }
.karte-kapitel h2 { margin-bottom: 1.2rem; }
.karte-kapitel .kapitel-nr { color: var(--orange); }

.karte-abschnitt { margin-bottom: 2.2rem; }
.karte-bild { display: block; width: 100%; height: auto; max-width: 100%; }
.karte-liste h3 { margin: .8rem 0 .4rem; }
.karte-liste h4 {
    margin: 1rem 0 .3rem;
    font-size: .875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-grau);
}
.karte-liste ul { margin: 0 0 .6rem; padding-left: 1.1rem; }
.karte-liste li { margin-bottom: .15rem; }
.karte-liste .gericht-hinweis { color: var(--text-grau); font-size: .875rem; }

/* Zwei Spalten erst, wenn das Bild neben der Liste nicht zur Briefmarke wird. */
@media (min-width: 700px) {
    .karte-abschnitt {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 1.8rem;
        align-items: start;
    }
    .karte-abschnitt:not(:has(.karte-bild)) { grid-template-columns: 1fr; }
}

/* Unter 700px wird die Karte einspaltig; ohne Bremse würde das Bild auf die
   volle Textspalte (bis zu ~780px) gezogen. Alle acht Fotos sind auf 800x754
   hochskaliert – keine Quelle aus der Broschüre ist so groß, die größten
   messen 599x565, zwei davon nur 384x355 und 454x432 – im 300px-Raster oben
   fällt das nicht auf, bei voller Breite schon. 400px liegt nah an der
   kleineren Quellauflösung: der Browser rechnet die 800px-Datei wieder etwa
   auf ihre Ausgangsgröße herunter, was die Weichheit der Hochskalierung
   kaschiert, ohne das Bild auf dem Handy winzig wirken zu lassen. */
@media (max-width: 699px) {
    .karte-bild { max-width: 400px; margin: 0 auto 1rem; }
}

.karte-kontakt { margin-top: 3.5rem; }

/* Die Karte ersetzt die PDF – sie muss sich weitergeben und ausdrucken lassen. */
@media print {
    .site-header, .site-footer, .no-print, .karte-inhalt { display: none; }
    .hero.karte-hero { background: none; padding: 0; }
    body { color: #000; font-size: 11pt; }
    .karte-kapitel { page-break-inside: avoid; }
    .karte-bild { max-width: 60mm; }
    a { text-decoration: none; color: #000; }
}