/* ==========================================================================
   Haus Bismarck - Dormagen
   Eigenes Stylesheet, mobile first geschrieben.
   Reihenfolge: erst Handy, dann per min-width nach oben erweitern.
   ========================================================================== */

/* --- Farben und Grundwerte ------------------------------------------------ */
/* Alle Farben hängen an diesen Werten. Wer die Seite heller oder dunkler
   will, ändert hier - der Rest zieht automatisch mit. */
:root {
    --grund:        #2e2319;   /* Seitenhintergrund, warmes Nussbraun */
    --grund-hell:   #382b20;   /* abgesetzte Abschnitte */
    --flaeche:      #443427;   /* Karten */
    --flaeche-hoch: #52402f;   /* Karten, angehoben */
    --linie:        #6b5339;

    --schrift:      #faf4ec;   /* warmes Creme */
    --schrift-matt: #ddcdb8;
    --akzent:       #e39456;   /* Kupfer, heller Marken-Ton fuer dunklen Grund */
    --akzent-hell:  #f5c08e;
    --akzent-dunkel:#8a441c;   /* der originale Markenton der Seite */

    --radius:       14px;
    --radius-klein: 9px;
    --schatten:     0 6px 24px rgba(0, 0, 0, .45);

    --breite:       1180px;
    --rand:         20px;      /* seitlicher Rand, auf dem Handy bewusst knapp */
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;   /* iOS soll die Schrift beim Drehen nicht aufblasen */
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    background: var(--grund);
    color: var(--schrift);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--akzent); }

h1, h2, h3, h4 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .5em;
}

p { margin: 0 0 1em; }

strong { color: #fff; font-weight: 700; }

/* Tastatur-Fokus sichtbar lassen, Mausklicks nicht umranden */
:focus-visible {
    outline: 3px solid var(--akzent-hell);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- Layout-Bausteine ----------------------------------------------------- */
.huelle {
    width: 100%;
    max-width: var(--breite);
    margin-inline: auto;
    padding-inline: var(--rand);
}

.abschnitt { padding-block: 56px; }
.abschnitt--abgesetzt { background: var(--grund-hell); }

.abschnitt-kopf { text-align: center; margin-bottom: 32px; }

.abschnitt-kopf h2 {
    font-size: 30px;
    color: var(--akzent-hell);
    margin-bottom: 14px;
}

/* kleine Zierlinie unter den Überschriften */
.zierlinie {
    width: 62px; height: 3px;
    margin: 0 auto 18px;
    background: linear-gradient(90deg, transparent, var(--akzent), transparent);
    border-radius: 2px;
}

.mittig { text-align: center; }
.fliesstext { max-width: 62ch; margin-inline: auto; }

/* --- Schaltflächen -------------------------------------------------------- */
.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* min. 48px hoch: Daumengerecht, Google-Empfehlung fuer Tap-Ziele */
    min-height: 52px;
    padding: 14px 24px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.knopf:active { transform: scale(.97); }

.knopf--voll {
    background: var(--akzent);
    color: #24170e;
    box-shadow: 0 4px 16px rgba(227, 148, 86, .32);
}
.knopf--voll:hover { background: var(--akzent-hell); }

.knopf--rand {
    background: transparent;
    color: var(--schrift);
    border: 2px solid var(--linie);
}
.knopf--rand:hover { border-color: var(--akzent); color: var(--akzent-hell); }

.knopf--breit { width: 100%; }

.knopf svg { width: 20px; height: 20px; flex: none; }

/* --- Kopfleiste ----------------------------------------------------------- */
.kopf {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(46, 35, 25, .85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: background-color .25s ease, border-color .25s ease;
}
.kopf.gescrollt {
    background: rgba(46, 35, 25, .97);
    border-bottom-color: var(--linie);
}

.kopf-innen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
}

.marke {
    font-family: Georgia, serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--schrift);
    text-decoration: none;
    letter-spacing: .2px;
    white-space: nowrap;
}
.marke span { color: var(--akzent); }

.menue-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    margin-right: -8px;              /* optisch an den Rand ziehen */
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--schrift);
    cursor: pointer;
}
.menue-knopf svg { width: 26px; height: 26px; }
.menue-knopf .symbol-schliessen { display: none; }
.menue-knopf[aria-expanded="true"] .symbol-oeffnen { display: none; }
.menue-knopf[aria-expanded="true"] .symbol-schliessen { display: block; }

/* Handy-Navigation: faehrt UNTER der Kopfleiste auf und legt sich ueber den
   Inhalt. Absolut positioniert, damit die Kopfzeile selbst nicht mitwaechst.
   Bezugspunkt ist .kopf (position: sticky zaehlt als positioniert). */
.navigation {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 4px var(--rand) 12px;
    /* deckend, nicht durchscheinend: sonst liest sich das Menue ueber
       dem Startfoto schlecht */
    background: var(--grund);
    border-top: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
    box-shadow: 0 16px 30px rgba(0, 0, 0, .42);

    /* geschlossen: unsichtbar und nicht antippbar */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}

.navigation.offen {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
}

.navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navigation a {
    display: block;
    padding: 13px 4px;
    color: var(--schrift);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(107, 83, 57, .55);
}
.navigation li:last-child a { border-bottom: 0; }
.navigation a:hover { color: var(--akzent-hell); }

/* --- Startbild ------------------------------------------------------------ */
.start {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 100svh statt 100vh: sonst schiebt die iOS-Adressleiste den Inhalt raus */
    min-height: 78svh;
    padding-block: 64px;
    text-align: center;
    background-image: url(../img/web/hero-mobil.jpg);
    background-size: cover;
    background-position: center 30%;
}

/* dunkler Verlauf, damit die Schrift auf dem Foto sicher lesbar bleibt */
.start::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(46,35,25,.48) 0%, rgba(46,35,25,.38) 45%, rgba(46,35,25,.88) 100%);
}

.start-innen { position: relative; z-index: 1; width: 100%; }

.start h1 {
    font-size: clamp(38px, 12vw, 64px);
    margin-bottom: .15em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .55);
}

.start-unterzeile {
    font-size: clamp(16px, 4.6vw, 21px);
    color: var(--akzent-hell);
    font-style: italic;
    font-family: Georgia, serif;
    margin-bottom: 28px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

.start-knoepfe {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 330px;
    margin-inline: auto;
}

/* --- Info-Karten (Öffnungszeiten / Küche / Biere) ------------------------- */
.karten {
    display: grid;
    gap: 16px;
    margin-top: 34px;
}

.karte {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 26px 22px;
    text-align: center;
}

.karte-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px; height: 54px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: rgba(227, 148, 86, .16);
    color: var(--akzent);
}
.karte-symbol svg { width: 27px; height: 27px; }

.karte h3 {
    font-size: 20px;
    color: var(--akzent-hell);
    margin-bottom: .45em;
}

.karte p { margin: 0; color: var(--schrift-matt); }

/* --- Spezialitäten -------------------------------------------------------- */
.spezialitaeten {
    display: grid;
    gap: 22px;
}

.spezial {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.spezial-bild {
    /* festes Seitenverhältnis: verhindert Umspringen beim Nachladen */
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
}

.spezial-text {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.spezial h3 {
    font-size: 21px;
    color: var(--akzent-hell);
    margin-bottom: .4em;
}

.spezial p { color: var(--schrift-matt); margin-bottom: 14px; }

.preis {
    margin-top: auto;
    align-self: flex-start;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(227, 148, 86, .18);
    color: var(--akzent-hell);
    font-weight: 700;
    font-size: 17px;
}

/* --- Speisekarte ---------------------------------------------------------- */
.karten-gitter {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 30px;
}

.karten-blatt {
    display: block;
    position: relative;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .18s ease, transform .18s ease;
}
.karten-blatt:hover { border-color: var(--akzent); }
.karten-blatt:active { transform: scale(.99); }

.karten-blatt img {
    width: 100%;
    aspect-ratio: 1684 / 1191;   /* A4 quer, genau wie die Vorlage */
    object-fit: cover;
    object-position: top;
    background: #fff;
}

.karten-blatt-titel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    font-weight: 700;
    font-size: 16px;
    border-top: 1px solid var(--linie);
}
.karten-blatt-titel svg { width: 17px; height: 17px; color: var(--akzent); flex: none; }

/* --- Bildergalerie -------------------------------------------------------- */
.galerie {
    display: grid;
    /* zwei Spalten schon auf dem Handy: Hochformat-Fotos wirken sonst riesig */
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 30px;
}

.galerie-stueck {
    position: relative;
    display: block;
    border-radius: var(--radius-klein);
    overflow: hidden;
    background: var(--flaeche);
    text-decoration: none;
    color: var(--schrift);
}

.galerie-stueck img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform .4s ease;
}
.galerie-stueck:hover img { transform: scale(1.05); }

.galerie-stueck figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 22px 12px 10px;
    background: linear-gradient(180deg, transparent, rgba(20, 13, 8, .86));
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 13px;
    line-height: 1.35;
}
.galerie-stueck figcaption b { color: var(--akzent-hell); font-weight: 700; }

/* --- Kontakt -------------------------------------------------------------- */
.kontakt {
    position: relative;
    background-image: url(../img/web/ende-mobil.jpg);
    background-size: cover;
    background-position: center;
}
.kontakt::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(46, 35, 25, .78);
}
.kontakt > * { position: relative; z-index: 1; }

.kontakt-liste {
    display: grid;
    gap: 12px;
    max-width: 480px;
    margin: 28px auto 0;
}

.kontakt-stueck {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 62px;
    padding: 14px 20px;
    background: rgba(68, 52, 39, .85);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    color: var(--schrift);
    text-decoration: none;
    font-weight: 600;
    transition: border-color .18s ease, background-color .18s ease;
}
.kontakt-stueck:hover { border-color: var(--akzent); background: rgba(82, 64, 47, .92); }
.kontakt-stueck svg { width: 24px; height: 24px; color: var(--akzent); flex: none; }
.kontakt-stueck span { word-break: break-word; }

/* --- Fußzeile ------------------------------------------------------------- */
.fuss {
    background: #241b13;
    padding-block: 34px;
    text-align: center;
    font-size: 15px;
    color: var(--schrift-matt);
}

/* Natives <details>: klappt ohne JavaScript und ist von Haus aus bedienbar */
.impressum { margin-top: 14px; }

.impressum-knopf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 22px;
    background: transparent;
    border: 1px solid var(--linie);
    border-radius: 999px;
    color: var(--schrift-matt);
    font-weight: 600;
    cursor: pointer;
    list-style: none;            /* Standard-Dreieck weg */
    user-select: none;
}
.impressum-knopf::-webkit-details-marker { display: none; }   /* Safari */
.impressum-knopf:hover { color: var(--akzent-hell); border-color: var(--akzent); }

/* eigenes Dreieck, das sich beim Aufklappen dreht */
.impressum-knopf::after {
    content: "";
    width: 8px; height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}
.impressum[open] .impressum-knopf::after { transform: rotate(-135deg) translate(-2px, -2px); }

.impressum-innen {
    display: inline-block;
    text-align: left;
    padding-top: 18px;
    line-height: 1.9;
}

/* --- Feste Aktionsleiste unten (nur Handy) -------------------------------- */
/* Die zwei Dinge, die am Telefon wirklich gebraucht werden: Karte und Anruf. */
.aktionsleiste {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    display: flex;
    gap: 10px;
    padding: 10px var(--rand);
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: rgba(36, 27, 19, .96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--linie);
    transform: translateY(105%);
    transition: transform .3s ease;
}
.aktionsleiste.sichtbar { transform: translateY(0); }
.aktionsleiste .knopf { flex: 1; min-height: 50px; padding-inline: 12px; font-size: 16px; }

/* Platz, damit die Leiste nichts verdeckt */
body { padding-bottom: 0; }
@media (max-width: 799px) {
    body.leiste-aktiv { padding-bottom: 78px; }
}

/* --- Lightbox ------------------------------------------------------------- */
.lichtkasten {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    background: rgba(20, 14, 9, .97);
}
.lichtkasten.offen { display: flex; flex-direction: column; }

.lichtkasten-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top));
    color: var(--schrift);
    font-size: 15px;
    font-weight: 600;
}

.lichtkasten-werkzeug { display: flex; gap: 8px; align-items: center; }

.lk-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: rgba(255, 255, 255, .08);
    border: 0;
    border-radius: 50%;
    color: var(--schrift);
    cursor: pointer;
}
.lk-knopf:hover { background: rgba(255, 255, 255, .16); }
.lk-knopf svg { width: 22px; height: 22px; }
.lk-knopf[hidden] { display: none; }

.lichtkasten-buehne {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    -webkit-overflow-scrolling: touch;
}

.lichtkasten-buehne img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

/* gezoomt: Bild wird breiter als der Rahmen, der Rahmen scrollt */
.lichtkasten-buehne.gezoomt { align-items: flex-start; justify-content: flex-start; }
.lichtkasten-buehne.gezoomt img {
    max-width: none;
    max-height: none;
    width: 260%;
}

.lichtkasten-fuss {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.lichtkasten-zaehler { color: var(--schrift-matt); font-size: 14px; min-width: 56px; text-align: center; }

/* ==========================================================================
   Ab hier wird für größere Schirme erweitert
   ========================================================================== */

/* --- ab 600px: zwei Spalten ---------------------------------------------- */
@media (min-width: 600px) {
    :root { --rand: 28px; }

    .start-knoepfe { flex-direction: row; justify-content: center; max-width: none; }
    .start-knoepfe .knopf { min-width: 210px; }

    .karten { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .spezialitaeten { grid-template-columns: repeat(2, 1fr); }
    .karten-gitter { grid-template-columns: repeat(2, 1fr); }
    .galerie { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .galerie-stueck figcaption { font-size: 14px; }
    .kontakt-liste { max-width: 720px; grid-template-columns: repeat(2, 1fr); }
}

/* --- ab 800px: Desktop-Navigation, drei Spalten --------------------------- */
@media (min-width: 800px) {
    body { font-size: 18px; }

    .abschnitt { padding-block: 84px; }
    .abschnitt-kopf h2 { font-size: 40px; }

    .kopf-innen { min-height: 72px; }
    .marke { font-size: 23px; }

    .menue-knopf { display: none; }

    /* Am Schreibtisch sitzt die Navigation wieder normal in der Kopfzeile */
    .navigation {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 0;
        border: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        transition: none;
    }
    .navigation ul { display: flex; gap: 4px; }
    .navigation a {
        padding: 9px 14px;
        border: 0;
        border-radius: 8px;
        font-size: 16px;
    }
    .navigation a:hover { background: rgba(227, 148, 86, .12); }

    .start { min-height: 88svh; background-image: url(../img/web/hero-desktop.jpg); background-attachment: fixed; }

    .karten { grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .spezialitaeten { grid-template-columns: repeat(3, 1fr); gap: 26px; }
    .karten-gitter { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .galerie { grid-template-columns: repeat(5, 1fr); }

    .kontakt { background-image: url(../img/web/ende-desktop.jpg); background-attachment: fixed; }

    /* am Schreibtisch braucht niemand die Daumenleiste */
    .aktionsleiste { display: none; }

    .lichtkasten-buehne { padding: 20px 60px; }
    .lichtkasten-buehne.gezoomt img { width: 160%; }
}

/* --- ab 1100px ------------------------------------------------------------ */
@media (min-width: 1100px) {
    .abschnitt-kopf h2 { font-size: 44px; }
    .galerie { gap: 14px; }
}

/* Auf Geräten ohne echten Hover (Touch) keine Hover-Effekte anwenden */
@media (hover: none) {
    .galerie-stueck:hover img { transform: none; }
}

/* ==========================================================================
   Speisekarte als Karussell
   Jeder Bereich ist eine Karte, durch die man seitlich wischt. Die Hoehe
   der Huelle wird per JavaScript auf die gerade sichtbare Karte gesetzt,
   damit unter kurzen Bereichen keine Leere steht.
   ========================================================================== */

.karte-huelle { position: relative; }

.speisekarte {
    --papier:      #faf4ea;
    --papier-band: #efe1cc;
    --tinte:       #33281f;
    --tinte-matt:  #6b5a4a;
    --tinte-leise: #9c8974;
    --tinte-braun: #8a441c;
    --papier-linie:#ddcbb2;

    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;     /* nicht versehentlich die Seite mitziehen */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    background: var(--papier);
    color: var(--tinte);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    /* Bewusst KEINE Uebergangsanimation auf der Hoehe: sie kostet bei jedem
       Bild Layout-Rechenzeit, und wenn sie stockt, waere die Karte
       abgeschnitten. Die Hoehe springt lieber sofort. */
}
.speisekarte::-webkit-scrollbar { display: none; }
.speisekarte:focus { outline: none; }
.speisekarte:focus-visible { outline: 3px solid var(--akzent-hell); outline-offset: 3px; }

/* --- Eine Karte ----------------------------------------------------------- */
.karte-block {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;           /* immer nur eine Karte weiter */
    padding: 24px 18px 28px;
}

.karte-titel {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--tinte-braun);
    background: var(--papier-band);
    border-bottom: 2px solid var(--tinte-braun);
    margin: 0 -18px 16px;
    padding: 5px 18px 4px;
}

/* --- Ein Gericht ---------------------------------------------------------- */
.gericht { margin-bottom: 15px; }
.gericht:last-child { margin-bottom: 0; }

.gericht-kopf {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
}

.gericht-name { font-weight: 700; }

/* die Punktlinie zwischen Name und Preis */
.gericht-linie {
    flex: 1 1 auto;
    min-width: 12px;
    align-self: center;
    border-bottom: 1px dotted var(--papier-linie);
    transform: translateY(-2px);
}

.gericht-preis {
    flex: none;
    font-family: Georgia, serif;
    font-weight: 700;
    color: var(--tinte-braun);
    white-space: nowrap;
}

/* Zusatzstoffe und Allergene, wie im Druck klein und zurueckhaltend */
.zusatz {
    font-size: .74em;
    font-weight: 400;
    color: var(--tinte-leise);
    letter-spacing: .02em;
    margin-left: .3em;
}

.gericht-text {
    margin: 2px 0 0;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--tinte-matt);
}

.gericht-groessen { list-style: none; margin: 3px 0 0; padding: 0; }
.gericht-groessen li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-left: 14px;
    font-size: 15px;
    line-height: 1.5;
}
.groesse { flex: none; color: var(--tinte-matt); font-size: 14px; }

.karte-hinweis {
    margin: 12px 0 0;
    font-size: 14.5px;
    font-style: italic;
    color: var(--tinte-matt);
}

/* Zwischenueberschrift innerhalb einer Karte, etwa "Bockwurst" mit den
   Beilagen darunter. In der Excel ist das nur eine fette Zeile ohne Preis. */
.karte-zwischentitel {
    margin: 18px 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--tinte-braun);
}
.karte-zwischentitel:first-child { margin-top: 0; }

/* Was unter einer Zwischenueberschrift steht, rueckt ein - wie die
   Groessenangaben, damit die Zugehoerigkeit auf einen Blick klar ist. */
.gericht-unter { margin-left: 14px; }

/* --- Allergenlegende (eigene Karte) --------------------------------------- */
.legende-inhalt p {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 5px;
    font-size: 14px;
    color: var(--tinte-matt);
}
.legende-hinweis {
    margin: 0 0 12px;
    font-size: 13.5px;
    font-style: italic;
    line-height: 1.5;
    color: var(--tinte-leise);
}
.legende-inhalt + .legende-hinweis { margin: 14px 0 0; }

/* --- Buehne mit den Pfeilen ----------------------------------------------- */
.karte-buehne { position: relative; }

/* Die Pfeile liegen ueber der Buehne, links und rechts.
   position: sticky haelt sie in der Bildschirmmitte, auch bei einer langen
   Karte - sonst muesste man zum Klicken erst scrollen. */
.karte-pfeile {
    position: absolute;
    inset: 0;
    display: none;                   /* auf Touchgeraeten wird gewischt */
    justify-content: space-between;
    align-items: flex-start;         /* noetig, damit sticky Spielraum hat */
    pointer-events: none;            /* Karte bleibt bedienbar */
}

@media (hover: hover) and (pointer: fine) {
    .karte-pfeile { display: flex; }
}

.karte-steuerung {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
}

.karte-pfeil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    flex: none;
    position: sticky;
    top: calc(50vh - 23px);
    margin-inline: -23px;            /* haelftig ueber den Rand des Bogens */
    pointer-events: auto;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 50%;
    color: var(--schrift);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}
.karte-pfeil svg { width: 22px; height: 22px; }
.karte-pfeil:hover { border-color: var(--akzent); color: var(--akzent-hell); }
.karte-pfeil[disabled] { opacity: .32; cursor: default; }
.karte-pfeil[disabled]:hover { border-color: var(--linie); color: var(--schrift); }

.karte-punkte {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 2px;
}
.karte-punkte::-webkit-scrollbar { display: none; }

.karte-punkt {
    flex: none;
    width: 9px; height: 9px;
    padding: 0;
    background: var(--linie);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .2s ease, width .2s ease;
}
.karte-punkt[aria-current="true"] {
    background: var(--akzent);
    width: 22px;
    border-radius: 999px;
}

.karte-stand {
    margin: 8px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--schrift-matt);
}

/* --- ab 600px ------------------------------------------------------------- */
@media (min-width: 600px) {
    .karte-block { padding: 30px 26px 34px; }
    .karte-titel { margin-inline: -26px; padding-inline: 26px; font-size: 24px; }
    .gericht-kopf { font-size: 17px; }
}

/* --- ab 900px: zwei Karten nebeneinander wie eine aufgeschlagene Karte ----- */
@media (min-width: 900px) {
    .karte-block { flex-basis: 50%; padding: 36px 30px 40px; }
    /* feine Falzlinie zwischen den beiden sichtbaren Seiten */
    .karte-block { border-right: 1px solid var(--papier-linie); }
    .karte-block:last-child { border-right: 0; }
    .karte-titel { margin-inline: -30px; padding-inline: 30px; }
}


/* Oeffnungszeiten gestapelt: Tag oben, Zeit darunter.
   So bricht keine Uhrzeit mehr um, egal wie schmal das Handy oder wie
   gross die Systemschrift ist. */
.zeiten {
    display: grid;
    gap: 12px;
    margin: 0;
}
.zeiten span {
    display: block;
    color: var(--schrift-matt);
    font-size: 15.5px;
    line-height: 1.3;
}
.zeiten strong {
    display: block;
    line-height: 1.35;
}