/* ============================================================
   Hochl Be-WIR-tung — Café-Konditorei · Catering · Graz
   Mirror der echten CI: Bordeaux #660000 + Noto Serif/Sans,
   Signature = Rose-Kreis-Badges + Logo-Ornament-Trenner.
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
/* Seit 28.09.2026 variable Schriften (400-700) statt 8 Einzeldateien: 46 statt 108 KB, 2 statt 8 Anfragen. */
@font-face{font-family:"Noto Serif";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/noto-serif-var.woff2") format("woff2")}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/noto-sans-var.woff2") format("woff2")}
@font-face{font-family:"Noto Serif";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/noto-serif-400-italic.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --wine:#660000; --wine-deep:#4A0000; --wine-soft:#8a1f1f;
  --ink:#212529; --ink-soft:#4b4548;
  --rose:#FFEDED; --rose-2:#FBE3E3; --rose-line:#F3D3D3;
  --paper:#FFFFFF; --paper-2:#FAF7F5; --paper-3:#F4ECEC;
  --line:#EADFDF; --muted:#6F5C5C;
  --serif:"Noto Serif",Georgia,serif;
  --sans:"Noto Sans",system-ui,sans-serif;
  --shadow:0 18px 44px -22px rgba(60,0,0,.28);
  --shadow-sm:0 8px 22px -14px rgba(60,0,0,.22);
  --r:14px; --r-lg:22px;
  --wrap:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
/* Gemeinsame Bildklammer (warm, appetitlich) über alle Content-Fotos — Logo/Map ausgenommen */
main img{filter:saturate(1.06) contrast(1.02) brightness(1.005) sepia(.04)}
a{color:inherit;text-decoration:none}
/* ── Browser-Oberflaechen ──────────────────────────────────────────────
   Markierung, Fokusring, Bildlaufleiste und Unterlaengen kommen sonst als
   Systemdefault und gehoeren zu keinem Entwurf. Sie hier zu setzen ist das
   billigste Zeichen dafuer, dass eine Seite gebaut und nicht zusammengesetzt
   wurde. */
::selection{background:var(--wine);color:#fff}
.stage ::selection,.cta-band ::selection,.chero ::selection{background:#fff;color:var(--wine)}

/* Sichtbarer Fokus ueberall, wo keine eigene Regel greift. Auf dunklen
   Baendern hell, sonst weinrot. */
:focus-visible{outline:2px solid var(--wine);outline-offset:3px;border-radius:2px}
.stage :focus-visible,.cta-band :focus-visible,.chero :focus-visible,.ft :focus-visible{outline-color:#FFD9D9}

html{scrollbar-color:var(--rose-line) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rose-line);border-radius:8px;border:3px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:var(--wine-soft)}

/* Unterlaengen nicht durchschneiden. */
a{text-underline-offset:.18em}

/* Preise und Uhrzeiten in Tabellenziffern — sonst tanzen die Spalten. */
.kpos__preis,.fkarte__preis,.wochentafel b,.zeiten b,.zkarte__zeit,.kpos__var b{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

h1,h2,h3,h4{font-family:var(--serif);color:var(--wine);margin:0;line-height:1.12;font-weight:600;letter-spacing:.1px}
p{margin:0}
.ic{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.eyebrow{font-family:var(--sans);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:12.5px;color:var(--wine-soft)}
.lead{font-size:clamp(17px,2vw,19.5px);color:var(--ink-soft);line-height:1.7}
.center{text-align:center}
/* Einblenden nur, wenn JavaScript wirklich laeuft.
   Vorher stand hier `.reveal{opacity:0}` unbedingt — WP Rocket verzoegert
   main.js bis zur ersten Nutzerinteraktion, dadurch waren 21 von 23
   Elementen unsichtbar fuer alles, was nicht scrollt oder klickt
   (Crawler, Lighthouse, Screenshot-Werkzeuge). Gemessen 03.08.2026.
   Ohne JS ist die Seite jetzt vollstaendig sichtbar, nur ohne Animation. */
html.anim .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
html.anim .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.09s}.reveal.d2{transition-delay:.18s}.reveal.d3{transition-delay:.27s}.reveal.d4{transition-delay:.36s}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;font-size:15px;padding:13px 24px;border-radius:999px;border:1.6px solid transparent;cursor:pointer;transition:.22s ease;line-height:1}
.btn .ic{width:18px;height:18px;stroke-width:2}
.btn-wine{background:var(--wine);color:#fff}
.btn-wine:hover{background:var(--wine-deep);transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(102,0,0,.6)}
.btn-ghost{background:transparent;color:var(--wine);border-color:var(--rose-line)}
.btn-ghost:hover{background:var(--rose);border-color:var(--wine);gap:13px}
.btn-cream{background:#fff;color:var(--wine)}
.btn-cream:hover{background:var(--rose);transform:translateY(-2px)}
.btn-outline-cream{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-outline-cream:hover{background:#fff;color:var(--wine);border-color:#fff}
.txtlink{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14.5px;color:var(--muted);transition:.2s}
.txtlink .ic{width:16px;height:16px;stroke-width:2}
.txtlink:hover{color:var(--wine);gap:11px}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.1) blur(10px);border-bottom:1px solid var(--line)}
/* Die Kopfleiste ist breiter als der Textkoerper (1320 statt 1200): Seit
   „Das Lokal" im Menue steht, war die Zeile bei 1440px auf den Pixel voll
   und die Beschriftungen brachen um. Der Abzug von 96px haelt den Rand
   auch auf 1366er-Schirmen. */
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px}
/* Der Abzug von 96px gilt erst ab 1300px (22.09.2026). Vorher galt er auf
   jeder Breite: Am Handy blieben neben dem Logo 48px Rand plus Innenabstand,
   das Logo wurde auf 61 statt 169px Breite gestaucht, und zwischen 761 und
   1280px ragte der Knopf rechts aus der Leiste. */
@media(min-width:1300px){.wrap.hdr-in{max-width:min(1320px,calc(100vw - 96px))}}
.hdr-cta .tel,.hdr-cta .btn{white-space:nowrap}
/* Logo größer seit 22.09.2026 (Fabian): 56px statt 44px am Desktop.
   flex:none am Link UND max-width:none am Bild, sonst drückt die Leiste
   das Logo zusammen, statt dass es seine Breite behält. */
.brand{display:flex;align-items:center;gap:14px;flex:none}
.brand img{height:56px;width:auto;flex:none;max-width:none}
/* Zwischen 1241 und 1339px ist die Leiste mit Menü, Telefon und Knopf voll:
   Mit dem großen Logo rutschten die Menüpfeile unter die Punkte (gemessen
   22.09.2026). Dort bleibt es bei der alten Größe. */
@media(max-width:1339px){.brand img{height:44px}}
/* Noch größer ab 1366px (Fabian, 22.09.2026): 64px, ab 1440px 72px bei
   88px Kopfhöhe. Gemessen: darunter rutschen die Menüpfeile um. */
@media(min-width:1366px){.brand img{height:64px}}
@media(min-width:1440px){.hdr-in{height:88px}.brand img{height:72px}}
/* Der Markenzusatz stand hier zwischen Logo und Navigation und hat die
   Leiste gesprengt: Bei 1440px brach „Catering konfigurieren" auf zwei Zeilen
   und die Aufklapp-Pfeile rutschten unter ihre Menuepunkte. Der Kopf traegt
   schon Logo, fuenf Menuepunkte mit Untermenues, Telefonnummer und den
   Hauptknopf — ein sechstes Element passt nicht mehr hinein.
   Der Zusatz steht deshalb dort, wo Platz ist und wo er gelesen wird: im
   Faktenband unter jedem Hero, im Fuss und im Schema (`slogan`). */
.brand__claim{display:none}
.nav{display:flex;align-items:center;gap:4px}
.nav a{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink);padding:9px 11px;border-radius:8px;transition:.18s;position:relative}
.nav a:hover{color:var(--wine);background:var(--rose)}
.nav a.active{color:var(--wine)}
/* buttons inside nav must win over .nav a color */
.nav a.btn-wine{color:#fff}
.nav a.btn-ghost,.nav a.btn-cream{color:var(--wine)}
.nav a.btn:hover{background:var(--wine-deep)}
.hdr-cta{display:flex;align-items:center;gap:12px}
.hdr-cta .tel{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;color:var(--wine)}
.hdr-cta .tel .ic{width:17px;height:17px}
.menu-btn{display:none;background:none;border:none;color:var(--wine);cursor:pointer;padding:6px}
.menu-btn .ic{width:28px;height:28px}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:clamp(560px,82vh,760px);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(72% 56% at 50% 52%,rgba(28,0,0,.5),transparent 74%),
  linear-gradient(180deg,rgba(40,0,0,.5) 0%,rgba(40,0,0,.3) 38%,rgba(40,0,0,.38) 60%,rgba(24,0,0,.62) 100%)}
.hero__inner{position:relative;z-index:2;max-width:820px;padding:120px 26px;color:#fff}
.hero .eyebrow{color:#ffe3e3;text-shadow:0 2px 12px rgba(40,0,0,.6)}
.hero h1{color:#fff;font-size:clamp(40px,6.4vw,72px);font-weight:700;margin:16px 0 0;text-shadow:0 3px 30px rgba(50,0,0,.5)}
.hero h1 em{font-style:italic;font-weight:400}
.hero .sub{margin:18px auto 0;max-width:560px;font-size:clamp(15.5px,1.7vw,18px);color:#fdeeee;line-height:1.6;text-shadow:0 2px 14px rgba(40,0,0,.55)}
.hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.hero__badges{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:center;flex-wrap:nowrap;gap:clamp(18px,3vw,40px);padding:16px;background:linear-gradient(0deg,rgba(30,0,0,.5),transparent)}
.hero__badges span{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13.5px;font-weight:600}
.hero__badges .ic{width:17px;height:17px;color:#ffd9d9}

/* ---------- Ornament divider ---------- */
.orn{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto}
.orn::before,.orn::after{content:"";height:1px;width:min(120px,16vw);background:linear-gradient(90deg,transparent,var(--rose-line),transparent)}
.orn i{width:26px;height:26px;color:var(--wine);display:inline-flex}
.orn svg{width:26px;height:26px}

/* ---------- Section scaffolding ---------- */
section{position:relative}
.sec{padding:clamp(64px,8vw,110px) 0}
.sec-tint{background:var(--paper-2)}
.sec-rose{background:linear-gradient(180deg,var(--rose) 0%,var(--rose-2) 100%)}
.sec-head{max-width:720px;margin:0 auto;text-align:center}
.sec-head h2{font-size:clamp(30px,4.4vw,46px);font-weight:700;margin-top:14px}
.sec-head p{margin-top:16px}
.sec-head.left{margin:0;text-align:left}

/* ---------- Themenbereiche (Signature: Rose-Kreis-Badges) ---------- */
.themen{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,3.4vw,52px);margin-top:52px}
.themen a{display:flex;flex-direction:column;align-items:center;gap:16px;width:150px;transition:.25s}
.badge{width:118px;height:118px;border-radius:50%;background:var(--rose);display:grid;place-items:center;border:1.5px solid var(--rose-line);transition:.28s ease;position:relative}
.badge::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid transparent;transition:.28s}
.badge .ic{width:46px;height:46px;color:var(--wine);stroke-width:1.5}
.themen a:hover .badge{transform:translateY(-6px);background:var(--wine)}
.themen a:hover .badge .ic{color:#fff}
.themen a:hover .badge::after{inset:-7px;border-color:var(--rose-line)}
.themen b{font-family:var(--serif);font-weight:600;color:var(--wine);font-size:16px;letter-spacing:.06em;text-transform:uppercase;text-align:center;line-height:1.25;min-height:2.5em;display:flex;align-items:center;justify-content:center}
.themen small{color:var(--muted);font-size:12.5px;font-weight:500;margin-top:-4px;text-align:center;min-height:2.2em}

/* ---------- Editorial split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.split.rev .split__media{order:2}
.split__media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:5/4;background:var(--rose)}
.split__media img{width:100%;height:100%;object-fit:cover}
/* Der Split-Rahmen ist 5:4 quer. Ein hochkantes Foto verliert darin oben
   und unten je ein Viertel -- bei den zwei Koechen an der Torte fehlten
   genau die Haende (Fabian, 03.09.2026: „das Bild darf ruhig hoeher
   sein"). Wo das Bild hochkant ist, dreht diese Klasse den Rahmen mit. */
.split__media--hoch{aspect-ratio:4/5}
/* VERWORFEN am 21.08.2026: Der Hornig-Becher steht auf grauem Studiogrund und
   ist neben den warmen Motiven das einzige kalte Bild der Fruehstuecksseite.
   Der Versuch, ihn als eingestelltes Produktfoto auf Rose zu zeigen, war
   schlechter — der graue Bildgrund blieb als hartes Rechteck im rosa Feld
   stehen. Formatfuellend beschnitten wirkt er ruhiger. Richtige Loesung ist
   ein eigenes Foto des Betriebs, siehe LOG (offener Punkt Fotobedarf). */
.split__media .tagpill{position:absolute;left:18px;top:18px;background:rgba(255,255,255,.94);color:var(--wine);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:999px;box-shadow:var(--shadow-sm)}
.split__body h2{font-size:clamp(28px,3.8vw,42px);font-weight:700}
.split__body h3{font-size:clamp(24px,3.2vw,34px);font-weight:700}
.split__body p{margin-top:18px;color:var(--ink-soft)}
.split__body .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;align-items:center}
.feature-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.feature-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.feature-list .ic{width:20px;height:20px;color:var(--wine);margin-top:3px;stroke-width:2}

/* ---------- Flaggschiff Catering (dark stage) ---------- */
.stage{position:relative;overflow:hidden;background:var(--wine)}
.stage::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 80% 0%,rgba(255,220,220,.14),transparent 60%)}
.stage .wrap{position:relative;z-index:2}
.stage-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,66px);align-items:center}
.stage h2{color:#fff;font-size:clamp(30px,4.6vw,50px);font-weight:700}
.stage .eyebrow{color:#ffc9c9}
.stage p{color:#f6dede;margin-top:18px}
.stage .stage-media{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);aspect-ratio:4/5}
.stage .stage-media img{width:100%;height:100%;object-fit:cover}

/* ── Bildstrecke auf den Catering-Art-Seiten ─────────────────────────
   Die CCT hat seit dem Blueprint vom 02.08.2026 sechs Galerieplaetze und
   dazu Titel und Text -- gerendert wurden sie nie. Mit echten Fotos
   lohnt sich die Sektion jetzt (Fabian, 03.09.2026).

   Spalten statt Zellen, aus demselben Grund wie bei der Catering-
   Buehne: Die Aufnahmen sind teils quer, teils hochkant. In einem festen
   Raster wuerde jedes zweite beschnitten. */
.artgalerie{column-count:3;column-gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(28px,3.4vw,44px)}
.artgalerie figure{margin:0 0 clamp(12px,1.6vw,20px);break-inside:avoid;
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 24px 48px -30px rgba(60,0,0,.45)}
.artgalerie img{width:100%;height:auto;display:block}
@media(max-width:900px){.artgalerie{column-count:2}}
@media(max-width:520px){.artgalerie{column-count:1}}

/* ── Catering-Buehne: Kopf zweispaltig, darunter ein Masonry ──────────
   Zuerst standen hier vier Bilder in festen Kacheln. Das schnitt Koepfe
   und Teller ab -- ein 4:3-Foto passt nicht in ein Quadrat, ohne dass
   etwas verloren geht (Fabian, 03.09.2026: „schau, dass die Bilder immer
   schoen sichtbar sind").

   Deshalb Spalten statt Zellen: `column-count` laesst jedem Bild seine
   eigene Hoehe, `break-inside:avoid` haelt es zusammen. Kein Zuschnitt,
   kein `object-fit`, nichts faellt weg. Die Buehne wird dadurch hoeher,
   und das ist beabsichtigt: Sie ist die wichtigste Section der
   Startseite. */
.stage--gross{padding-block:clamp(64px,7vw,104px)}

.cat-kopf{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,4vw,64px);align-items:end}
.cat-kopf h2{margin:.15em 0 .5em}
.cat-kopf .feature-list{margin-top:0}
@media(max-width:900px){.cat-kopf{grid-template-columns:1fr;align-items:start}}

.cat-masonry{column-count:4;column-gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(34px,4.5vw,60px)}
.cat-masonry figure{margin:0 0 clamp(12px,1.4vw,18px);break-inside:avoid;
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 26px 52px -30px rgba(0,0,0,.65)}
.cat-masonry img{width:100%;height:auto;display:block}
@media(max-width:1100px){.cat-masonry{column-count:3}}
@media(max-width:760px){.cat-masonry{column-count:2}}
.stage-stats{display:flex;gap:34px;margin-top:32px;flex-wrap:wrap}
.stage-stats div{}
.stage-stats b{display:block;font-family:var(--serif);font-size:34px;color:#fff;font-weight:700;line-height:1}
.stage-stats span{color:#f0cccc;font-size:13.5px}
.stage .cta-row{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}

.stage .feature-list li{color:#f6dede}
.stage .feature-list .ic{color:#ffd0d0}
.split__body .sig{margin-top:22px;font-family:var(--serif);font-style:italic;color:var(--wine);font-size:18px}
.split__body .sig b{font-style:normal;font-weight:700}

/* ---------- Torten cards ---------- */
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:.25s;display:flex;flex-direction:column}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.tcard__ph{aspect-ratio:4/3;overflow:hidden;background:var(--rose)}
.tcard__ph img{width:100%;height:100%;object-fit:cover;transition:.5s}
.tcard:hover .tcard__ph img{transform:scale(1.05)}
.tcard__b{padding:24px 24px 26px;flex:1;display:flex;flex-direction:column}
.tcard h3{font-size:22px;font-weight:700}
.tcard p{margin-top:10px;color:var(--ink-soft);font-size:15px;flex:1}
.tcard .txtlink{margin-top:18px;color:var(--wine)}
.tcard .txtlink:hover{color:var(--wine-deep)}

/* ---------- Foto-Streifen (Ambiente) ---------- */
.strip{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:200px 200px;gap:14px}
.strip figure{margin:0;overflow:hidden;border-radius:14px;background:var(--rose)}
.strip figure:first-child{grid-row:span 2}
.strip img{width:100%;height:100%;object-fit:cover;transition:.6s}
.strip figure:hover img{transform:scale(1.06)}

/* ---------- Ambiente-Galerie ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
.gallery figure{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:14px;background:var(--rose)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:.6s}
.gallery figure:hover img{transform:scale(1.06)}
@media(max-width:860px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gallery{grid-template-columns:1fr}.gallery figure{aspect-ratio:3/2}}

/* ---------- Google-Maps-Element (Standort) ---------- */
.map-col{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 24px 50px -28px rgba(0,0,0,.45);border:1px solid var(--line);min-height:440px;background:#e9e6e4}
.gmap{width:100%;height:100%;min-height:440px;border:0;display:block}
/* Standort-Band (Hubs, hell) */
.standort-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:stretch;margin-top:44px}
.standort-grid .map-col{min-height:380px;box-shadow:var(--shadow)}
.standort-grid .gmap{min-height:380px}
.standort-info{display:flex;flex-direction:column;justify-content:center;gap:16px}
.standort-info .si{display:flex;gap:13px;align-items:flex-start;font-size:16px;color:var(--ink)}
.standort-info .si .ic{width:22px;height:22px;color:var(--wine);flex:none;margin-top:2px}
.standort-info .si b{font-weight:600;color:var(--coal)}
.standort-info .btn{align-self:flex-start;margin-top:6px}
@media(max-width:860px){.standort-grid{grid-template-columns:1fr;gap:26px}.standort-grid .map-col{min-height:320px}.standort-grid .gmap{min-height:320px}}
.hcontact{margin-top:26px;display:grid;gap:13px}
.hcontact a,.hcontact div{display:flex;gap:12px;align-items:center;color:#f4dcdc;font-size:15px}
.hcontact .ic{width:20px;height:20px;color:#ffd0d0;flex:none}
.hcontact a:hover{color:#fff;text-decoration:underline}
@media(max-width:960px){.map-col{min-height:340px}.gmap{min-height:340px}}

/* ---------- Öffnungszeiten / Standort (Kontrast-Band) ---------- */
.hours-band{background:var(--wine);color:#fff;position:relative;overflow:hidden}
.hours-band::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 10% 0%,rgba(255,220,220,.12),transparent 55%)}
.hours-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.hours-band h2{color:#fff}
.hours-band .eyebrow{color:#ffc9c9}
.hours-list{margin:24px 0 0;padding:0;list-style:none;max-width:380px}
.hours-list li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:15.5px}
.hours-list li span:first-child{color:#f4d6d6}
.hours-list li b{font-weight:600;color:#fff}
.hours-list li.today{color:#fff}
.hours-list li.today span:first-child{color:#fff;font-weight:700}
.contact-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);padding:30px}
.contact-card .row{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.contact-card .row:last-child{border-bottom:none}
.contact-card .ic{width:22px;height:22px;color:#ffd9d9;margin-top:2px}
.contact-card b{display:block;color:#fff;font-weight:600;font-size:15.5px}
.contact-card span{color:#f0cccc;font-size:14px}
.contact-card a.row:hover b{text-decoration:underline}

/* ---------- CTA-Band ---------- */
.cta-band{background:linear-gradient(180deg,var(--rose) 0%,var(--rose-2) 100%);text-align:center}
.cta-band h2{font-size:clamp(28px,4vw,44px);font-weight:700}
.cta-band p{margin:16px auto 0;max-width:560px;color:var(--ink-soft)}
.cta-band .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ---------- Konfigurator teaser (2 cards) ---------- */
.konf{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.konf a{display:flex;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px;box-shadow:var(--shadow-sm);transition:.25s}
.konf a:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--rose-line)}
.konf .ki{width:64px;height:64px;border-radius:16px;background:var(--rose);display:grid;place-items:center;flex:none}
.konf .ki .ic{width:32px;height:32px;color:var(--wine)}
.konf b{font-family:var(--serif);font-size:20px;color:var(--wine);font-weight:700}
.konf p{margin-top:5px;color:var(--ink-soft);font-size:14.5px}
.konf .go{margin-left:auto;color:var(--wine)}
.konf .go .ic{width:22px;height:22px}

/* ---------- Footer ---------- */
.ft{background:#1b1315;color:#e8dcdc;padding:64px 0 30px}
.ft-grid{display:grid;grid-template-columns:1.3fr .95fr .95fr 1.3fr;gap:38px}
.ft h4,.ft .ft-titel{color:#fff;font-family:var(--serif);font-size:18px;line-height:1.3;margin:0 0 16px;font-weight:600}
.ft-brand img{height:44px;width:auto;background:#fff;padding:9px 13px;border-radius:11px;margin-bottom:18px}
.ft p,.ft a{color:#c9b9b9;font-size:14.5px;line-height:1.9}
.ft a:hover{color:#fff}
.ft ul{list-style:none;padding:0;margin:0}
.ft .fnav a{display:block}
.ft .fcontact div{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.ft .fcontact .ic{width:18px;height:18px;color:#e6a5a5;margin-top:4px}
.ft .ft-oeff{align-items:flex-start}
.ft .ft-oeff ul{display:grid;gap:4px;flex:1}
.ft .ft-oeff li{display:flex;justify-content:space-between;gap:14px;line-height:1.7;font-size:14.5px}
.ft .ft-oeff li span{color:#c9b9b9}
.ft .ft-oeff li b{color:#fff;font-weight:600;white-space:nowrap}
.ft .ft-oeff__zu b{color:#c9b9b9;font-weight:400;font-style:italic}
/* Betriebsurlaub im Footer: heller Rahmen statt Fliesstext, sonst geht die
   Ansage zwischen Adresse und Telefon unter. */
.ft-urlaub{margin:12px 0 0;padding:10px 13px;border:1px solid rgba(230,165,165,.45);
  border-radius:10px;color:#f2dede !important;font-size:14px;line-height:1.6}

.ft-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#9a8888}
.ft-bottom a{color:#9a8888}.ft-bottom a:hover{color:#fff}

/* ---------- Mobile nav drawer ---------- */
.nav-scrim{position:fixed;inset:0;background:rgba(30,0,0,.4);opacity:0;pointer-events:none;transition:.25s;z-index:70}
.nav-scrim.open{opacity:1;pointer-events:auto}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .split,.stage-grid,.hours-grid{grid-template-columns:1fr;gap:34px}
  .split.rev .split__media{order:0}
  .stage .stage-media{aspect-ratio:16/10;max-height:420px}
  .ft-grid{grid-template-columns:1fr 1fr;gap:30px}
  .konf,.tcards{grid-template-columns:1fr}
  .tcards{max-width:460px;margin-left:auto;margin-right:auto}
  .strip{grid-template-columns:1fr 1fr;grid-template-rows:170px 170px 170px}
  .strip figure:first-child{grid-row:span 1;grid-column:span 2}
}
/* Das Menü klappt seit 22.09.2026 schon ab 1240px in die Schublade, nicht
   erst ab 760px. Darunter passen Logo, fünf Menüpunkte, Telefon und Knopf
   nicht in eine Zeile (gemessen). */
@media(max-width:1240px){
  .brand img{height:56px}
  .nav{position:fixed;top:0;right:0;height:100dvh;width:min(84vw,340px);background:#fff;flex-direction:column;align-items:stretch;gap:2px;padding:92px 22px 30px;transform:translateX(100%);transition:.3s cubic-bezier(.2,.7,.2,1);z-index:80;box-shadow:-20px 0 50px -30px rgba(0,0,0,.5);overflow-y:auto}
  .nav.open{transform:none}
  /* Geschlossen liegt das Menue genau am rechten Rand, sein Schatten
     reichte als grauer Streifen ins Bild (13.09.2026, jede Seite). */
  .nav:not(.open){box-shadow:none}
  .nav a{font-size:17px;padding:14px 12px;border-bottom:1px solid var(--line);border-radius:0}
  .nav .btn{margin-top:16px;justify-content:center}
  /* 44 x 44 als Berührungsfläche (gemessen 23.09.2026: vorher 40 x 40).
     Der negative Rand hält die optische Kante an derselben Stelle. */
  .menu-btn{display:inline-flex;padding:8px;margin-right:-8px}
}
@media(max-width:760px){
  .brand img{height:44px}
  /* Daumenmaße im Fuß und beim Logo (gemessen 23.09.2026): Die Fußlinks
     standen 28 px hoch dicht untereinander, der Logolink war 38 px hoch. */
  .ft .fnav a{padding:8px 0}
  .brand{min-height:44px}
  .hdr-cta .tel{display:none}
  .hdr-cta .btn-wine{padding:11px 15px;min-height:44px}
  .hero__badges{gap:16px;flex-wrap:wrap}
  .hero__badges span:nth-child(n+4){display:none}
  .themen a{width:132px}
  .badge{width:100px;height:100px}
  .badge .ic{width:40px;height:40px}
  .ft-grid{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr;grid-template-rows:none}
  .strip figure{aspect-ratio:3/2}
  .strip figure:first-child{grid-column:span 1}
}
@media(max-width:420px){
  .hero__cta .btn,.cta-band .btn{width:100%;justify-content:center}
  .hdr-cta .btn-wine{padding:10px 13px;font-size:13.5px;min-height:44px}
  .hdr-cta .btn-wine .ic{display:none}
}

/* ============================================================
   HUB PAGES (Catering · Konditorei & Torten)
   ============================================================ */
.crumbs{font-size:13px;color:var(--muted);margin-bottom:16px}
.crumbs a:hover{color:var(--wine)}
.crumbs span{opacity:.6;margin:0 6px}

/* Left-aligned full-bleed hero (Catering) */
.hero--left{justify-content:flex-start;text-align:left;min-height:clamp(460px,60vh,600px)}
.hero--left .hero__inner{margin:0;max-width:660px;padding:110px 0;text-align:left}
.hero--left .hero__cta{justify-content:flex-start}
.hero--left h1{font-size:clamp(36px,5.6vw,62px)}
.hero--left .hero__bg::after{background:linear-gradient(90deg,rgba(35,0,0,.82) 0%,rgba(35,0,0,.5) 48%,rgba(35,0,0,.32) 100%)}

/* Light statement hero (Konditorei) */
.phero{position:relative;overflow:hidden;padding:clamp(48px,7vw,96px) 0 clamp(56px,8vw,104px)}
.phero-light{background:linear-gradient(180deg,var(--rose) 0%,var(--paper) 100%)}
.phero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,64px);align-items:center}
.phero h1{font-size:clamp(36px,5.6vw,62px);font-weight:700;line-height:1.06}
.phero .lead{margin-top:20px}
.phero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.phero__media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5;background:var(--rose-2)}
.phero__media img{width:100%;height:100%;object-fit:cover}
.phero__media .tagpill{position:absolute;left:18px;top:18px;background:rgba(255,255,255,.94);color:var(--wine);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:999px;box-shadow:var(--shadow-sm)}
.phero__deco{position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,var(--rose-2),transparent 70%);z-index:0}

/* Anlass tiles (Catering) */
.anlass{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.anlass .a{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:.25s}
.anlass .a:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.anlass .a__ph{aspect-ratio:16/10;overflow:hidden;background:var(--rose)}
.anlass .a__ph img{width:100%;height:100%;object-fit:cover;transition:.5s}
.anlass .a:hover .a__ph img{transform:scale(1.05)}
.anlass .a__b{padding:24px}
.anlass .a__b .ic{width:26px;height:26px;color:var(--wine);margin-bottom:10px}
.anlass h3{font-size:21px;font-weight:700}
.anlass p{margin-top:9px;color:var(--ink-soft);font-size:15px}

/* ---- Vertical timeline base + JS fill ---- */
.vtl{position:relative;margin:56px auto 0}
.vtl__item{opacity:1;transform:none}
.vtl.in .vtl__item{animation:vtlUp .6s cubic-bezier(.2,.7,.2,1) both}
.vtl.in .vtl__item:nth-child(2){animation-delay:.12s}
.vtl.in .vtl__item:nth-child(3){animation-delay:.24s}
.vtl.in .vtl__item:nth-child(4){animation-delay:.36s}
.vtl.in .vtl__item:nth-child(5){animation-delay:.48s}
.vtl.in .vtl__item:nth-child(6){animation-delay:.60s}
@keyframes vtlUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes vtlGrowRail{from{height:0}to{height:calc(100% - 48px)}}
@keyframes vtlGrowZig{from{height:0}to{height:calc(100% - 12px)}}

/* Catering timeline: left rail with icon nodes */
.vtl--rail{max-width:780px}
.vtl--rail::before{content:"";position:absolute;left:29px;top:14px;bottom:34px;width:2px;background:var(--rose-line)}
.vtl--rail .vtl__fill{position:absolute;left:29px;top:14px;width:2px;background:var(--wine);height:calc(100% - 48px)}
.vtl--rail.in .vtl__fill{animation:vtlGrowRail 1.5s ease .2s both}
.vtl--rail .vtl__item{position:relative;padding:0 0 40px 84px;min-height:64px}
.vtl--rail .vtl__item:last-child{padding-bottom:0}
.vtl--rail .vtl__node{position:absolute;left:8px;top:2px;width:44px;height:44px;border-radius:50%;background:var(--rose);border:2px solid var(--wine);display:grid;place-items:center;z-index:2}
.vtl--rail .vtl__node .ic{width:22px;height:22px;color:var(--wine)}
.vtl--rail .vtl__k{font-family:var(--serif);font-weight:700;color:var(--wine);font-size:21px;line-height:1.2}
.vtl--rail .vtl__item p{margin-top:7px;color:var(--ink-soft);font-size:15.5px}
/* Timeline mit Foto-Spalte rechts (füllt Leerraum) */
.ablauf-2{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4vw,56px);align-items:start;margin-top:44px}
.ablauf-2 .vtl{margin:0;max-width:none}
.ablauf-photo{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);position:sticky;top:100px;aspect-ratio:3/4;background:var(--rose)}
.ablauf-photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.ablauf-2{grid-template-columns:1fr}.ablauf-photo{display:none}}

/* Konditorei timeline: centered zig-zag with serif numbers */
.vtl--zig{max-width:900px}
.vtl--zig::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;background:var(--rose-line);transform:translateX(-50%)}
.vtl--zig .vtl__fill{position:absolute;left:50%;top:6px;width:2px;height:calc(100% - 12px);background:var(--wine);transform:translateX(-50%)}
.vtl--zig.in .vtl__fill{animation:vtlGrowZig 1.7s ease .2s both}
.vtl--zig .vtl__item{position:relative;width:calc(50% - 52px);box-sizing:border-box}
.vtl--zig .vtl__card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:var(--shadow-sm)}
.vtl--zig .vtl__item:nth-child(odd){margin-left:0;text-align:right}
.vtl--zig .vtl__item:nth-child(even){margin-left:calc(50% + 52px);text-align:left}
.vtl--zig .vtl__item + .vtl__item{margin-top:-18px}
.vtl--zig .vtl__num{position:absolute;top:18px;width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--wine);display:grid;place-items:center;font-family:var(--serif);font-weight:700;color:var(--wine);font-size:23px;box-shadow:var(--shadow-sm);z-index:2}
.vtl--zig .vtl__item:nth-child(odd) .vtl__num{right:-80px}
.vtl--zig .vtl__item:nth-child(even) .vtl__num{left:-80px}
.vtl--zig .vtl__k{font-family:var(--serif);font-weight:700;color:var(--wine);font-size:20px}
.vtl--zig .vtl__item p{margin-top:7px;color:var(--ink-soft);font-size:15px}

/* Tortenvitrine grid */
.vitrine{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:14px;margin-top:50px}
.vitrine figure{margin:0;position:relative;overflow:hidden;border-radius:14px;background:var(--rose)}
.vitrine img{width:100%;height:100%;object-fit:cover;transition:.6s}
.vitrine figure:hover img{transform:scale(1.06)}
.vitrine .big{grid-column:span 2;grid-row:span 2}
.vitrine figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 16px 13px;background:linear-gradient(0deg,rgba(40,0,0,.72),transparent);color:#fff;font-family:var(--serif);font-weight:600;font-size:15px}

/* Contact form */
.form-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,56px);align-items:start}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-sm)}
.form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:block;font-weight:600;font-size:13.5px;color:var(--ink);margin:0 0 7px}
.field{margin-bottom:16px}
.form input,.form select,.form textarea{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--paper-2);border:1.5px solid #9C8585;border-radius:10px;padding:12px 14px;transition:.18s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--wine);background:#fff;box-shadow:0 0 0 3px var(--rose)}
.form textarea{resize:vertical;min-height:120px}
.form .btn{width:100%;justify-content:center;margin-top:4px}
.form .hint{font-size:12.5px;color:var(--muted);margin-top:12px;text-align:center}
.form-side .lead{margin-top:16px}
.form-side .feature-list{margin-top:24px}
.fdone{display:none;background:var(--rose);border:1.5px solid var(--rose-line);border-radius:10px;padding:14px 16px;color:var(--wine);font-weight:600;font-size:14.5px;margin-top:14px}

@media(max-width:960px){
  .phero-grid{grid-template-columns:1fr;gap:32px}
  .phero__media{aspect-ratio:16/11;max-height:400px}
  .anlass{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}
  .vitrine{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .vitrine .big{grid-column:span 2;grid-row:span 1}
  .form-wrap{grid-template-columns:1fr;gap:30px}
}
@media(max-width:760px){
  .vtl--zig::before,.vtl--zig .vtl__fill{left:27px;transform:none}
  .vtl--zig .vtl__item{width:auto;text-align:left!important;margin-left:70px!important}
  .vtl--zig .vtl__item + .vtl__item{margin-top:20px}
  .vtl--zig .vtl__item .vtl__num{left:-70px!important;right:auto!important;top:0}
  .form .grid2{grid-template-columns:1fr}
  .vitrine{grid-template-columns:1fr;grid-auto-rows:auto}
  .vitrine figure{aspect-ratio:3/2}
  .vitrine .big{grid-column:span 1}
}

/* ============================================================
   Anlass-/Art-Kacheln + Referenzen
   Ergaenzt 31.07.2026 nach Website-Konzept Folie 4 ("NEU"):
   zwei Kachel-Reihen als Verteiler auf die Anlass- und Art-Seiten,
   dazu Referenzen mit Fotos durchgefuehrter Einsaetze.
   ============================================================ */
.kachelblock{margin-top:44px}
.kachelblock + .kachelblock{margin-top:26px}
.kachelblock__head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:14px;flex-wrap:wrap}
.kachelblock__head h3{font-size:19px;font-weight:600}
.kachel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kachel{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 16px;font-family:var(--sans);font-weight:600;font-size:15px;color:var(--wine);line-height:1.25;transition:transform .22s,box-shadow .22s,border-color .22s}
.kachel .ic{width:19px;height:19px;flex:none;color:var(--wine-soft)}
.kachel:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--rose-line)}
.kachel--flagge{background:var(--wine);border-color:var(--wine);color:#fff}
.kachel--flagge .ic{color:var(--rose-2)}
.kachel--flagge:hover{background:var(--wine-deep);border-color:var(--wine-deep)}
@media(max-width:900px){.kachel-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.kachel-grid{grid-template-columns:1fr}}

/* Referenzen — echte Einsaetze */
.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.refs .ref{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.refs .ref__ph{aspect-ratio:4/3;overflow:hidden;background:var(--rose)}
.refs .ref__ph img{width:100%;height:100%;object-fit:cover}
.refs .ref__b{padding:18px 20px}
.refs .ref__b h3{font-size:18px;font-weight:600}
.refs .ref__meta{margin-top:7px;color:var(--muted);font-size:14px}
@media(max-width:900px){.refs{grid-template-columns:1fr}}

/* Skip-Link — sichtbar nur bei Tastatur-Fokus (Barrierefreiheit) */
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--wine);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}

/* ============================================================
   Fertige Platten & Pakete — Auslage kleiner Bestell-Pakete
   Ergaenzt 31.07.2026, neu gefasst nach Fabians Praezisierung:
   gemeint sind Plattenware/Bestellpakete, keine Event-Bundles.
   QUERFORMAT-Karten (Foto links) — die .tcard-Reihe steht
   direkt darunter, zweimal dasselbe Karten-Grid waere die
   haeufigste Slop-Falle. Anderer Rhythmus, andere Dichte.
   ============================================================ */
.pakete{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:50px}
.ppak{display:grid;grid-template-columns:170px 1fr;min-height:146px;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .22s,box-shadow .22s,border-color .22s}
.ppak:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--rose-line)}
.ppak__ph{position:relative;overflow:hidden;background:var(--rose)}
.ppak__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ppak:hover .ppak__ph img{transform:scale(1.06)}
.ppak__b{padding:22px 24px;display:flex;flex-direction:column;justify-content:center}
.ppak h3{font-size:19.5px;font-weight:700;line-height:1.25}
.ppak p{margin-top:9px;color:var(--ink-soft);font-size:14.5px;line-height:1.55}

.pakete-note{margin:38px auto 0;max-width:560px;text-align:center;color:var(--ink-soft);font-size:15.5px}
.pakete-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.sec-rose .pakete-cta{margin-top:44px}
@media(max-width:1000px){.pakete{grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}}
@media(max-width:480px){.ppak{grid-template-columns:118px 1fr;min-height:124px}.ppak__b{padding:16px 17px}.ppak h3{font-size:17.5px}.ppak p{font-size:13.8px}}
/* Seit 14.09.2026 ist jede Karte ein Link auf /fingerfood-pakete/. */
.ppak--link{color:inherit;text-decoration:none}
.ppak--link:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
/* „Pikant und süß“: zwei Fotos nebeneinander.
   Der Bildoptimierer steckt jedes Bild in ein eigenes <picture>. Dann ist
   jedes img das einzige Kind, „img:last-child“ traf BEIDE, beide lagen
   rechts übereinander und links blieb es rosa (gesehen 14.09.2026).
   Deshalb trägt das Raster die Hälften: jedes picture füllt eine Spalte,
   das absolut gesetzte img füllt sein picture. */
.ppak__ph--zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:minmax(0,1fr);gap:2px}
.ppak__ph--zwei > picture{position:relative;display:block;min-width:0;overflow:hidden}
/* Ohne Optimierer stehen die Bilder direkt im Rahmen: feste halbe Breite.
   Ein absolut gesetztes Bild streckt sich nicht über left+right. */
.ppak__ph--zwei > img{width:calc(50% - 1px)}
.ppak__ph--zwei > img:last-of-type{left:auto;right:0}
/* Personenzeile: zwei Klassen, damit `.ppak p` (Abstand, Farbe) nicht
   gewinnt. Kein Preis auf der Startseite (Fabian, 14.09.2026). */
.ppak .ppak__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:4px 14px;margin-top:12px}
.ppak__personen{font-size:15px;font-weight:700;color:var(--ink)}
/* Zeigt, dass die ganze Karte ein Link ist (Critic, 14.09.2026). */
.ppak__mehr{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--wine)}
.ppak__mehr .ic{width:16px;height:16px;transition:transform .2s}
.ppak:hover .ppak__mehr .ic{transform:translateX(3px)}

/* Zweiter CTA auf hellen Baendern — Rahmen in Weinrot statt --rose-line,
   damit der Button-Rahmen die 3:1-Regel fuer UI-Elemente haelt. */
.btn-outline-wine{background:transparent;color:var(--wine);border-color:var(--wine)}
.btn-outline-wine:hover{background:var(--wine);color:#fff;transform:translateY(-2px)}

/* ============================================================
   Kontakt-Band (Standort + allgemeines Kontaktformular)
   Neu gefasst 31.07.2026. Vorher: weisse Formularkarte mit
   runden Feldern und Fokus-Glow — las sich wie ein SaaS-
   Dashboard. Jetzt Editorial: Formular direkt auf dem Band,
   Unterstrich-Felder, Versalien-Labels, Haarlinien.
   Die Karte laeuft ueber die volle Breite mit FESTER Hoehe —
   gestreckt fuellte das Google-Embed die Flaeche nicht aus.
   ============================================================ */
.kontakt{background:var(--wine);color:#fff;position:relative;overflow:hidden}
.kontakt::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 12% 0%,rgba(255,220,220,.12),transparent 58%)}
.kontakt .wrap{position:relative;z-index:2}
.kontakt h2,.kontakt h3{color:#fff}
.kontakt .eyebrow{color:#FFC9C9}
.kontakt__head .lead{color:#F3D0D0}
/* Spalten seit 23.08.2026 gleich breit: Links stehen Daten, rechts die
   Karte. Das 0.88/1.12 war fuer das Formular gedacht, das mehr Platz
   brauchte als die Datenliste. */
.kontakt__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,72px);align-items:start;margin-top:clamp(40px,5vw,60px);scroll-margin-top:96px}

/* Kontaktdaten als beschriftete Zeilen (Visitenkarten-Form) */
.napliste{margin:0}
.napliste > div{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:baseline;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.napliste > div:first-child{border-top:1px solid rgba(255,255,255,.2)}
.napliste dt{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#F0BFBF;line-height:1.6}
.napliste dd{margin:0;font-family:var(--serif);font-size:18px;line-height:1.45;color:#fff}
.napliste dd a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .2s}
.napliste dd a:hover{border-bottom-color:#fff}
/* Oeffnungszeiten in der Visitenkarte: alle Tage in EINER Zeile der dl.
   Sieben eigene dl-Zeilen haetten die 96px breite Beschriftungsspalte
   gesprengt ("Dienstag – Samstag" passt dort nicht hinein). */
.zeiten{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.zeiten li{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
.zeiten li span{font-family:var(--sans);font-size:14.5px;color:#F0BFBF;letter-spacing:.02em}
.zeiten li b{font-weight:600;white-space:nowrap;font-size:17px}
.zeiten__zu b{color:#F0BFBF;font-weight:400;font-style:italic}
.zeiten__hinweis{margin:12px 0 0;font-family:var(--sans);font-size:14px;color:#F0BFBF}

/* Betriebsurlaub. Helle Karte auf dem Bordeaux-Band — eine Ansage, die die
   Zeiten darueber aufhebt, darf nicht wie eine weitere Zeile aussehen. */
.urlaub{display:flex;gap:13px;align-items:flex-start;margin:24px 0 0;padding:15px 17px;
  background:#fff;border-radius:var(--r);color:var(--wine);font-size:15px;line-height:1.55}
.urlaub .ic{width:20px;height:20px;flex:none;margin-top:3px;color:var(--wine)}
.urlaub b{display:block;font-family:var(--serif);font-size:17px;margin-bottom:3px}

/* Knopfpaar unter den Daten: Anfrage zuerst, Route daneben. */
.kontakt__tun{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* Formular — sachlich, ohne Karte */
.kontakt__form{scroll-margin-top:96px}
.kform__title{font-size:clamp(22px,2.6vw,28px);font-weight:600;line-height:1.22}
.kform__intro{margin-top:11px;color:#F3D0D0;font-size:15.5px;line-height:1.6;max-width:52ch}
.kf{margin-top:24px}
.kf.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px}
.kform label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#F0BFBF;margin-bottom:8px}
.kform .req{color:#FFC9C9}
/* Kasten statt Unterstrich (22.08.2026): Dieselbe Form wie im Konfigurator
   und auf der Kontaktseite, nur fuer das Bordeaux-Band eingefaerbt. Vorher
   war dieses Formular die dritte Machart auf derselben Website. */
.kform input,.kform select,.kform textarea{width:100%;
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.34);border-radius:var(--r);
  padding:12px 14px;color:#fff;font-family:var(--sans);font-size:16px;
  line-height:1.5;transition:border-color .2s,background .2s}
.kform input:focus,.kform select:focus,.kform textarea:focus{outline:none;
  border-color:#fff;background:rgba(255,255,255,.13)}
.kform input:-webkit-autofill{-webkit-text-fill-color:#fff;transition:background-color 9999s}
.kform textarea{resize:vertical;min-height:96px}
.kform ::placeholder{color:rgba(255,255,255,.62)}
.kform select{appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M1 1l5.5 5.5L12 1'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
/* Optionsliste zeichnet das Betriebssystem — dort braucht es dunkle Schrift */
.kform select option{color:var(--ink);background:#fff}
.kform .kcheck{display:flex;gap:12px;align-items:flex-start;margin:26px 0 0;font-size:13.5px;font-weight:400;letter-spacing:0;text-transform:none;color:#F3D0D0;line-height:1.55}
.kform .kcheck input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:#fff}
.kform .kcheck a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.kform__send{margin-top:26px}
.kform__hint{margin-top:14px;font-size:12.5px;color:#E8B9B9}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ── /cafe/ — Zeitenband ────────────────────────────────────────────────
   Das Signature-Element der Cafe-Seite. Sieben Tage offen und Fruehstueck
   bis 15:00 sind hier das Verkaufsargument, nicht eine Fussnote im
   Kontaktblock — also stehen die Zeiten gross auf dem Bordeaux-Band. */
.zeitband{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;margin-top:34px;align-items:start}

/* ── Eine Öffnungszeit für alle Tage ──────────────────────────────
   Dann wird aus dem Zweispalter ein Stapel: die Zeit breit und groß
   obenauf, darunter die beiden Karten nebeneinander. Die dunkle Fläche
   ist zugleich der visuelle Anker der Section — davor und danach steht
   nur Weiß auf Rosé. */
.zeitband--breit{grid-template-columns:1fr;gap:20px}
.zeitband--breit .zeitband__karten{grid-template-columns:1fr 1fr;gap:20px}

.zeittafel{background:var(--wine);color:#fff;border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,40px) clamp(24px,3vw,44px);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px clamp(20px,3vw,34px);
  box-shadow:0 22px 44px -30px rgba(60,0,0,.55)}
.zeittafel__label{font-family:var(--sans);font-weight:700;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:#F3D0D0;
  flex:0 0 100%;margin-bottom:2px}
.zeittafel__zeit{font-family:var(--serif);font-weight:600;line-height:1;
  font-size:clamp(34px,4.6vw,54px);white-space:nowrap}
.zeittafel__tage{font-family:var(--sans);font-size:15.5px;color:#F6DEDE}
/* Der Knopf schiebt sich an den rechten Rand — sonst steht dort die halbe
   Tafel leer. Inhaltlich ist er der naechste Schritt nach „wann offen". */
.zeittafel__cta{margin-left:auto;align-self:center;flex:none}
.zeittafel__urlaub{flex:0 0 100%;margin:14px 0 0;padding:11px 15px;
  background:rgba(255,255,255,.12);border-radius:var(--r);
  font-size:14.5px;color:#fff}

@media(max-width:640px){
  .zeitband--breit .zeitband__karten{grid-template-columns:1fr}
  .zeittafel{display:block}
  .zeittafel__zeit{display:block;margin-bottom:4px}
  .zeittafel__cta{margin:16px 0 0;display:inline-flex}
}
/* Der Abschnitt lag auf dem Bordeaux-Band und war damit der dritte Rotton in
   Folge (Hero, Fakten, Zeiten). Seit 22.08.2026 steht er auf Rose — die
   Bauteile sind deshalb hell gesetzt. */
.zeitband__tafel{background:#fff;border:1px solid var(--rose-line);
  border-radius:var(--r-lg);padding:26px 28px;box-shadow:var(--shadow-sm)}
.zeitband__tafel h3{color:var(--wine);font-size:19px;margin-bottom:16px}
.wochentafel{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.wochentafel li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.wochentafel li:last-child{border-bottom:0}
.wochentafel span{font-family:var(--sans);font-size:15px;color:var(--muted)}
.wochentafel b{font-family:var(--serif);font-size:19px;color:var(--wine);white-space:nowrap;font-weight:600}
.wochentafel__zu b{color:var(--muted);font-weight:400;font-style:italic;font-size:17px}
/* `.stage p{color:#f6dede}` ist spezifischer als eine reine Klassenregel und
   hat den Text hier rose auf weiss gesetzt — Kontrast 1,28, praktisch
   unlesbar. Beide Regeln unten sind deshalb ueber `.stage` qualifiziert.
   Dieselbe Falle wie beim `[hidden]`-Attribut im Konfigurator: eine
   allgemeine Bandregel schlaegt die Komponentenregel. */
.zeitband__urlaub{margin:18px 0 0;padding:12px 15px;background:var(--rose);
  border:1px solid var(--rose-line);border-radius:var(--r);
  color:var(--wine);font-size:14.5px;line-height:1.55}

.zeitband__karten{display:grid;gap:18px}
.zkarte{background:#fff;border:1px solid var(--rose-line);border-radius:var(--r-lg);
  padding:24px 26px;color:var(--ink);box-shadow:var(--shadow-sm)}
.zkarte__ic{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;
  background:var(--rose);border-radius:50%;color:var(--wine);margin-bottom:14px}
.zkarte__ic .ic{width:21px;height:21px}
.zkarte__label{display:block;font-family:var(--sans);font-weight:700;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wine-soft)}
.zkarte__zeit{display:block;font-family:var(--serif);font-size:27px;color:var(--wine);
  line-height:1.2;margin:4px 0 8px;font-weight:600}
.zkarte p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}

/* ── /cafe/fruehstueck/ ────────────────────────────────────────────────
   Zwei Angebote mit Inhalt, kein Kartenraster aus Symbol und Schlagzeile.
   Der Preis steht in derselben Zeile wie der Name — wie auf einer Karte. */
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:34px}
.fkarte{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 32px;transition:border-color .2s,box-shadow .2s}
.fkarte:hover{border-color:var(--rose-line);box-shadow:0 22px 44px -30px rgba(102,0,0,.35)}
.fkarte__kopf{display:flex;align-items:baseline;gap:18px;padding-bottom:14px;
  border-bottom:1px solid var(--line)}
.fkarte__kopf h3{flex:1;font-size:23px;margin:0;line-height:1.25}
.fkarte__preis{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--wine);white-space:nowrap}
.fkarte__was{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.fkarte__was li{position:relative;padding-left:18px;font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
.fkarte__was li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--rose-line)}

/* Der Sonntagssatz. Ein Gedanke, gross gesetzt, ohne Bild — der eine
   Unterschied zu jedem Innenstadtcafe verdient eine eigene Flaeche. */
.stage--schmal{padding-top:clamp(52px,7vw,84px);padding-bottom:clamp(52px,7vw,84px)}
.sonntag{max-width:760px;margin:0 auto;text-align:center}
.stage .sonntag__satz{font-family:var(--serif);font-size:clamp(24px,3.4vw,36px);
  line-height:1.35;color:#fff;margin:0}
.stage .sonntag__dazu{margin-top:20px;font-size:17px;color:#f0cccc}

.fzwei{display:grid;grid-template-columns:repeat(2,1fr);gap:38px;margin-top:30px;align-items:start}
.fzwei__titel{font-size:19px;color:var(--wine);margin-bottom:2px}
.fzwei .kliste{margin-top:10px}
.fzwei__bild{margin:0 0 20px;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);background:var(--rose)}
.fzwei__bild img{width:100%;height:100%;object-fit:cover;display:block}

/* ── Bildmosaik der Fruehstuecksseite ──────────────────────────────────
   Ein grosses Motiv links, zwei hochkant rechts. Kein gleichfoermiges
   Dreierraster — das waere wieder das Kachelfeld, das die Seite gerade
   vermeidet. Die Bildunterschrift benennt, was auf der Karte steht. */
.fmosaik{display:grid;grid-template-columns:1.42fr 1fr;grid-template-rows:repeat(2,1fr);
  gap:18px;margin-top:26px}
.fmosaik figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r-lg);
  background:var(--rose);box-shadow:var(--shadow-sm)}
.fmosaik__gross{grid-row:span 2}
.fmosaik__klein{aspect-ratio:16/11}
.fmosaik img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.fmosaik figure:hover img{transform:scale(1.035)}
.fmosaik figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:34px 18px 14px;color:#fff;font-size:14.5px;line-height:1.4;
  font-family:var(--sans);font-weight:600;
  background:linear-gradient(180deg,rgba(40,0,0,0) 0%,rgba(48,0,0,.78) 62%,rgba(58,0,0,.92) 100%)}
.fmosaik__gross figcaption{font-size:16px;padding:44px 22px 18px}

/* ── Sonntagsband mit Bild ─────────────────────────────────────────────
   Der Satz bleibt der Held, das Foto ist Grund. Deshalb liegt es dunkel
   unter einem Bordeaux-Verlauf: gemessener Kontrast des Satzes zaehlt,
   nicht die Sichtbarkeit des Motivs. */
.sonntagband__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;opacity:.55}
.sonntagband::after{content:"";position:absolute;inset:0;
  background:radial-gradient(130% 100% at 50% 50%,rgba(74,0,0,.52) 0%,rgba(58,0,0,.80) 62%,rgba(45,0,0,.94) 100%)}
.sonntagband > .wrap{position:relative;z-index:1}

@media(max-width:860px){
  .fgrid,.fzwei{grid-template-columns:1fr}
  .fzwei{gap:26px}
  .fmosaik{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .fmosaik__gross{grid-row:auto;grid-column:span 2;aspect-ratio:16/10}
  .fmosaik__klein{aspect-ratio:4/5}
}

/* ── /cafe/speisekarte/ ────────────────────────────────────────────────
   Eine Karte ist eine Liste, kein Kachelfeld. Position links, Preis rechts,
   Fuehrungslinie dazwischen — die Form, die jeder aus dem Lokal kennt. */
/* SEITENSPALTE statt Querstreifen (22.08.2026, Fabian).
   Der klebende Streifen lag zwischen dem dunklen Faktenband und dem ersten
   Kapitel — genau dort riss die harte Kante die Seite auseinander: Rot,
   Dunkelrot, weisser Streifen, wieder Farbe. Jetzt gibt es einen einzigen
   Uebergang, und das Register laeuft neben der Karte mit.
   Spalte und Karte liegen zusammen in derselben `.wrap` wie jede andere
   Section — die Seitenbreite bleibt ueberall gleich. */
.kseite{display:grid;grid-template-columns:238px minmax(0,1fr);
  gap:clamp(28px,3.2vw,52px);align-items:start}
/* 30px Luft unter dem 77px hohen Kopf statt 20 — bei 97px klebte
   „Auf der Karte" fast am Kopfrand (Fabian, 22.08.2026). */
.kseite__nav{position:sticky;top:107px;align-self:start;
  max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin}

.kregister{display:block}
.kregister__kopf{display:block;font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.kregister__kapitel + .kregister__kapitel{margin-top:18px}
.kregister__ober{display:block;position:relative;font-family:var(--serif);
  font-size:15.5px;font-weight:600;color:var(--wine);line-height:1.3;
  padding-bottom:7px;margin-bottom:7px;
  border-bottom:2px solid var(--rose-line);transition:border-color .2s}
.kregister__ober:hover{border-bottom-color:var(--wine-soft)}
/* Welches Kapitel gerade gelesen wird, markiert main.js an der Gruppe UND
   am Kapitel darueber (Fabian, 22.08.2026: „ein bisschen markiert werden, in
   welcher Kategorie wir uns gerade befinden"). Ohne das sieht man nur die
   eine aktive Zeile und weiss nicht, in welchem Teil der Karte man steckt.
   Unterstrich statt Farbwechsel: Die Kapitel sind ohnehin bordeaux. */
.kregister__kapitel--aktiv .kregister__ober{border-bottom-color:var(--wine);
  border-bottom-width:2.5px}
.kregister__kapitel--aktiv .kregister__ober::after{content:"";position:absolute;
  left:-14px;top:.34em;width:4px;height:.95em;border-radius:2px;background:var(--wine)}
.kregister ul{list-style:none;margin:0;padding:0;display:block}
.kregister ul::-webkit-scrollbar{display:none}
.kregister li a{display:block;padding:6px 12px;border-radius:var(--r);
  font-family:var(--sans);font-size:14.5px;line-height:1.4;color:var(--ink-soft);
  transition:background .16s,color .16s}
.kregister li a:hover{background:var(--rose);color:var(--wine)}
/* Aktive Gruppe: setzt main.js beim Scrollen. Ohne sie weiss man bei elf
   Sprungzielen nach dem dritten Wisch nicht mehr, wo man gerade ist. */
.kregister li a[aria-current="true"]{background:var(--wine);color:#fff;font-weight:600}
/* Ausgang der Spalte: der eine Weg, der von hier weiterfuehrt. */
.kregister__aus{display:flex;align-items:center;gap:9px;margin-top:22px;
  padding:12px 14px;border:1px solid var(--rose-line);border-radius:var(--r);
  background:var(--rose);color:var(--wine);
  font-family:var(--sans);font-size:14px;font-weight:600;line-height:1.35;
  transition:background .18s,color .18s}
.kregister__aus:hover{background:var(--wine);color:#fff;border-color:var(--wine)}
.kregister__aus .ic{width:18px;height:18px;flex:none}

/* Ohne `scroll-margin-top` landet der Sprung exakt an der Oberkante — und
   die Ueberschrift verschwindet unter dem klebenden Header plus Register
   (gemessen: 25px zu hoch). Der Wert deckt beide zusammen ab. */
/* ── Kapitelband ───────────────────────────────────────────────────────
   Vier Baender teilen die elf Gruppen. Vollbreite, das Bild traegt, der
   Titel steht darauf. Bordeaux-Verlauf statt flaechigem Schleier: unten
   deckt er den Text ab, oben bleibt das Motiv zu sehen. */
/* Halbteiler, KEIN Vollbild-Streifen: Ein 1440x340-Feld ist 4,2:1 — jedes
   4:3-Foto verliert darin drei Viertel seiner Hoehe. Gemessen am 21.08.2026
   war der Kaffee-Band-Ausschnitt ein brauner Fleck, die Eisvitrine kaum als
   Eis erkennbar. Auf der halben Breite ist der Ausschnitt 2,2:1 — das
   ueberlebt jedes Motiv. Der Titel steht links auf Bordeaux, damit sein
   Kontrast nicht vom Bild abhaengt. */
/* HELL, nicht Bordeaux (geaendert 22.08.2026, Fabian): Der Weg war Hero rot,
   Faktenband dunkelrot, Register weiss — und sofort wieder ein rotes Band.
   Drei Rottoene mit einem weissen Streifen dazwischen lesen sich wie ein
   Fehler, nicht wie ein Rhythmus. Jetzt bleibt die ganze Karte hell, die
   Kapitel setzen sich ueber Rose ab, und Rot kommt erst wieder beim
   Vorbestell-Band. Der Bildausschnitt bleibt die halbe Breite — ein 4:1-Feld
   ueberlebt kein Motiv. */
.kband{scroll-margin-top:130px;position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--rose) 0%,var(--rose-2) 100%);
  border:1px solid var(--rose-line);
  min-height:clamp(190px,19vw,238px);display:flex;align-items:center}
.kband__bild{position:absolute;right:0;top:0;width:52%;height:100%;object-fit:cover}
/* Die Ueberblendung trug bis 23.08.2026 einen waagrechten Verlauf aus
   FLACHEM --rose-2. Das Band darunter hat aber einen senkrechten Verlauf
   (--rose oben, --rose-2 unten). An der linken Kante der Ueberblendung
   (44 %) traf also flaches Rose auf helleres Rose — eine sichtbare
   senkrechte Naht MITTEN in der hellen Flaeche, weit links vom Foto
   (Fabian: „hier sieht man die Kante zwischen Bild und weiss ... das darf
   nicht sein").
   Jetzt traegt die Ueberblendung denselben senkrechten Verlauf wie das
   Band und wird waagrecht ausmaskiert. Damit ist sie an ihrer linken Kante
   per Definition farbgleich mit dem Untergrund — eine Naht kann dort gar
   nicht mehr entstehen. */
.kband::after{content:"";position:absolute;right:0;top:0;width:60%;height:100%;pointer-events:none;
  background:linear-gradient(180deg,var(--rose) 0%,var(--rose-2) 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 14%,rgba(0,0,0,.62) 46%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(90deg,#000 0%,#000 14%,rgba(0,0,0,.62) 46%,rgba(0,0,0,0) 100%)}
.kband__text{position:relative;z-index:1;width:100%;
  padding:clamp(24px,3vw,36px) clamp(22px,3vw,34px)}
.kband__text h2{font-size:clamp(26px,3.4vw,38px);color:var(--wine);margin:0;line-height:1.12;max-width:46%}
.kband__text p{margin:10px 0 0;max-width:min(46%,42ch);color:var(--ink-soft);
  font-size:clamp(14.5px,1.4vw,16.5px);line-height:1.55}

@media(max-width:780px){
  .kband{display:block;min-height:0}
  .kband__bild{position:relative;width:100%;height:auto;aspect-ratio:16/9;display:block}
  .kband::after{display:none}
  .kband__text{padding:22px clamp(18px,4vw,40px) 26px}
  .kband__text h2,.kband__text p{max-width:100%}
}

/* `.kapitelteil` entfaellt seit 22.08.2026: Die Kapitel sind keine eigenen
   Sections mehr, sie liegen in der Kartenspalte. Den Abstand setzt der
   Kapitelkopf. */
.kband + .mheute,.kband + .kgruppe{margin-top:44px}
/* Die Mittagsmenue-Karte ist ein eigener Block, keine Kartengruppe —
   deshalb derselbe Abstand wie nach dem Kapitelkopf statt der 26px, die
   zwischen zwei Gruppen gelten. */
.mheute + .kgruppe{margin-top:44px}
.kgruppe + .kband,.mheute + .kband{margin-top:52px}

/* Kartenblatt: Die Liste bekommt einen Koerper, statt im Weiss zu schwimmen.
   Eine einzige helle Flaeche — der Uebergang vom Faktenband ist die einzige
   Kante der Seite. */
.speisekarte{background:var(--paper-2);padding:clamp(40px,5vw,68px) 0 clamp(52px,6vw,84px)}
/* Sprungziel 130px statt 100: Bei 100 blieben unter dem klebenden Kopf
   (77px) nur 23px, die Ueberschrift stand direkt an der Kante. */
.kgruppe{max-width:none;margin:0 0 26px;scroll-margin-top:130px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,42px) clamp(22px,3.4vw,48px);box-shadow:var(--shadow-sm)}
.kgruppe:last-of-type{margin-bottom:0}
/* Gruppenkopf mittig mit Doppellinie — die Form, die jede gedruckte Karte
   benutzt. Links buendig war hier nur die Vorgabe der uebrigen Seiten. */
.kgruppe__kopf{text-align:center;padding-bottom:14px;border-bottom:1px solid var(--rose-line);
  box-shadow:0 3px 0 -2px var(--wine)}
.kgruppe__kopf h3{font-size:clamp(24px,3.1vw,31px);margin:0;line-height:1.2}
/* Traegt das Kapitelband schon den Titel (nur eine Gruppe darin), bleibt im
   Kartenkopf allein die Zeitangabe — sonst stuende „Frühstück" zweimal
   untereinander. */
.kgruppe__kopf--zeit .kgruppe__zeit{margin-top:0}
.kgruppe__zeit{display:block;margin-top:7px;font-family:var(--sans);font-size:12.5px;
  font-weight:600;color:var(--wine-soft);letter-spacing:.14em;text-transform:uppercase}
.kgruppe__hinweis{margin:18px auto 0;max-width:62ch;text-align:center;
  font-size:15.5px;line-height:1.65;color:var(--ink-soft)}
.kgruppe__unter{margin:30px 0 4px;font-size:18px;color:var(--wine)}

/* Kurze Listen ohne Beschreibung laufen zweispaltig — spart auf der
   Kaffeekarte acht Zeilen Scrollweg, ohne die Fuehrungslinie zu brechen. */
@media(min-width:1180px){
  /* Zwei Spalten erst, wenn die Kartenspalte breit genug ist: Darunter bleiben
     je Teilspalte keine 360 px und „Doppelter Espresso" laeuft zweizeilig. */
  .kgruppe__body--zwei .kliste{columns:2;column-gap:46px}
  .kgruppe__body--zwei .kpos{break-inside:avoid}
  .kgruppe__body--zwei .kliste > li:first-child{margin-top:0}
}

.kliste{list-style:none;margin:18px 0 0;padding:0}
.kpos{display:flex;align-items:baseline;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--line)}
.kpos:last-child{border-bottom:0}
.kpos__text{flex:1;min-width:0}
.kpos__titel{display:block;font-family:var(--serif);font-size:17.5px;
  font-weight:600;color:var(--ink);line-height:1.35}
.kpos__desc{display:block;margin-top:3px;font-size:14.5px;line-height:1.55;color:var(--muted)}
/* Fuehrungslinie: waechst mit, egal wie lang der Name ist. */
/* `flex:1 1 auto` statt `0 1 auto`: Sonst schrumpft die Linie auf ihre
   Mindestbreite und haengt als kurzer Strich vor dem Preis, statt die
   Luecke zu ueberbruecken. */
/* Die Fuehrungslinie gehoert auf die Grundlinie der ERSTEN Zeile — dort steht
   der Preis. Mit `align-self:flex-end` hing sie am unteren Rand des Blocks:
   Bei „HOCHL Frühstück" mit dreizeiliger Beschreibung lief sie drei Zeilen
   unter dem Preis ins Leere und verband nichts. Ohne `align-self` erbt das
   Pseudoelement `align-items:baseline` der Zeile und sitzt richtig.
   Der Ton ist eine Spur kraeftiger als `--rose-line`: gepunktet und in
   #F3D3D3 war die Linie auf Weiss praktisch nicht zu sehen. */
.kpos::before{content:"";order:1;flex:1 1 auto;min-width:24px;
  margin-bottom:5px;border-bottom:1px dotted #E0BEBE}
.kpos__text{order:0}
/* `nowrap` gehoert an die ZAHL, nicht an den Block: Positionen mit zwei
   Varianten (Rindsgulasch, Frankfurter, Affogato) sprengten sonst am Handy
   die Zeile — gemessen 388px in einem 338px-Container. */
.kpos__preis{order:2;flex:none;text-align:right;font-family:var(--serif);
  font-size:17.5px;font-weight:600;color:var(--wine)}
.kpos__preis > b{white-space:nowrap}
.kpos__var{display:flex;justify-content:flex-end;align-items:baseline;gap:9px;
  font-size:15px;line-height:1.6;white-space:nowrap}
.kpos__var em{font-style:normal;font-family:var(--sans);font-size:13px;
  color:var(--muted);margin-right:9px}

.kfuss{max-width:70ch;margin:0 auto;padding:26px 0 0;
  text-align:center;font-size:14px;line-height:1.6;color:var(--muted)}
/* Auf der Fruehstuecksseite steht derselbe Fuss unter zwei Spalten und
   braucht dort seine Trennlinie und den Abstand nach oben. */
.fzwei ~ .kfuss{margin-top:38px;padding:20px 0 0;text-align:left;
  border-top:1px solid var(--line)}

/* Vorbestell-Liste auf dem Bordeaux-Band. */
.vorbliste{list-style:none;max-width:720px;margin:32px auto 0;padding:0;
  display:grid;gap:12px}
.stage .vorbliste li{display:flex;gap:12px;align-items:flex-start;
  color:#f6dede;font-size:16.5px;line-height:1.55}
.vorbliste .ic{width:20px;height:20px;flex:none;margin-top:3px;color:#ffd0d0}

/* Unter 1080px fehlt der Platz fuer die Seitenspalte. Dann wird daraus wieder
   eine waagrechte Leiste — aber INNERHALB der hellen Flaeche, nicht zwischen
   zwei Farbflaechen. Der Kopf klebt auch am Handy und ist ueberall 77px hoch
   (gemessen bei 390/760/900/1000 px). */
@media(max-width:1079px){
  /* min-width:0 an beiden Rasterkindern: Ohne das behaelt ein Grid-Item
     seine Inhaltsbreite (Vorgabe min-width:auto), und die waagrecht
     scrollende Pillenleiste schob die ganze Seite auf 1.422 px auf — die
     Seite liess sich seitlich schieben (gemessen 22.08.2026). */
  .kseite{grid-template-columns:minmax(0,1fr);gap:0}
  .kseite__nav,.kseite__karte{min-width:0}
  .kseite__nav{position:sticky;top:77px;z-index:30;max-height:none;overflow:visible;
    margin:0 0 30px;padding:12px 0;background:var(--paper-2);
    box-shadow:0 1px 0 var(--line),0 10px 16px -14px rgba(60,0,0,.25)}
  .kregister{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .kregister::-webkit-scrollbar{display:none}
  .kregister__kopf,.kregister__ober,.kregister__aus{display:none}
  .kregister__kapitel{display:contents}
  .kregister__kapitel + .kregister__kapitel{margin-top:0}
  .kregister ul{display:flex;gap:8px}
  .kregister li a{white-space:nowrap;padding:8px 15px;border-radius:999px;
    background:#fff;border:1px solid var(--line);color:var(--wine);font-weight:600}
  .kgruppe{scroll-margin-top:150px}
}
@media(max-width:640px){
  .kpos{flex-wrap:wrap}
  .kpos::before{display:none}
  .kpos__preis{width:100%;text-align:left;margin-top:4px}
  .kpos__preis{max-width:100%}
  .kpos__var{justify-content:flex-start}
}

/* ── /cafe/reservieren/ ────────────────────────────────────────────────
   Formular links, Randspalte rechts. Das Widget des Anbieters bringt seine
   eigene Hoehe mit; die Spalte darf sie nicht deckeln. */
.resgrid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:34px;align-items:start}
.resgrid__form{min-width:0}
#reservierung{min-height:220px}
/* Der Rand des Anbieter-Widgets sah aus wie ein Fehler: Der aeussere Kasten
   traegt 12px Radius und einen fremden Schatten, der iframe darin aber 0px —
   die weisse Flaeche des Formulars stand also quadratisch ueber den runden
   Ecken, und rechts blieb eine harte dunkle Kante stehen (gemessen
   22.08.2026). Hier bekommt er dieselbe Karte wie die Randspalte daneben:
   Rose-Rahmen, unser Radius, unser Schatten — und `overflow:hidden`, damit
   der iframe die Rundung nicht mehr ueberlaeuft. */
#reservierung > div{overflow:hidden;
  border:1px solid var(--rose-line) !important;
  border-radius:var(--r-lg) !important;
  background:#fff !important;
  box-shadow:var(--shadow-sm) !important}
#reservierung iframe{display:block;border:0;border-radius:var(--r-lg)}
.reswarten{margin:0;padding:26px;background:var(--rose);border-radius:var(--r-lg);
  color:var(--ink-soft);font-size:15px;line-height:1.6}
/* Sobald das Widget gerendert ist, faellt der Wartetext weg. Das Attribut
   entfernt das Skript — bleibt es stehen, ist der Hinweis noch sichtbar
   und die Seite nie eine leere Flaeche. */
#reservierung:not([data-warten]) .reswarten{display:none}

.resgrid__seite{display:grid;gap:20px}
.resbox{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px}
.resbox h2{font-size:20px;margin-bottom:14px}
.resbox p{margin:0;font-size:15px;line-height:1.6}
.resbox__adr{font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--wine)}
.resbox__fein{margin-top:12px !important;font-size:14px;color:var(--muted)}
.resbox__urlaub{margin-top:14px !important;padding:11px 14px;background:var(--rose);
  border-radius:var(--r);color:var(--wine);font-size:14px;line-height:1.55}
.resbox .cta-row{margin-top:18px}
.resbox--ruf{background:var(--rose);border-color:var(--rose-line)}

/* `.zeiten` ist fuer das Bordeaux-Band gebaut (helle Schrift). In der
   weissen Randspalte muessen beide Farben zurueckgedreht werden — sonst
   steht Rose auf Weiss, derselbe Fehler wie bei den Zeitkarten. */
.resbox .zeiten li span{color:var(--muted)}
.resbox .zeiten li b{color:var(--wine);font-size:16px}
.resbox .zeiten__zu b{color:var(--muted)}

@media(max-width:980px){
  .resgrid{grid-template-columns:1fr;gap:26px}
}

/* ── /cafe/eis/ — Bauteil-Zeile des Eisbechers ─────────────────────────
   Ersetzt ein zweites Foto desselben Bechers. Text direkt auf dem Band,
   keine weissen Kacheln — sonst greift `.stage p{color:#f6dede}` und setzt
   roseroten Text auf Weiss (derselbe Fehler wie bei den Zeitkarten). */
/* Die zwei Eisbecher stehen ueber der Bausteinzeile, nicht daneben: Der
   Text darunter erklaert, woraus so ein Becher besteht -- erst sieht man
   ihn, dann liest man die Teile. Die Fotos sind vor hellem Grund
   aufgenommen, deshalb ein weisser Rand, sonst schwimmen sie im
   Weinrot (Fabian, 03.09.2026). */
.becherbilder{display:grid;grid-template-columns:repeat(4,minmax(0,240px));
  gap:clamp(14px,1.8vw,24px);justify-content:center;margin-top:clamp(28px,3.4vw,42px)}
.becherbilder figure{margin:0;border-radius:var(--r-lg);overflow:hidden;
  border:5px solid #fff;box-shadow:0 26px 52px -28px rgba(0,0,0,.7)}
.becherbilder img{width:100%;height:auto;display:block}
.becherbilder__zeile{margin:16px 0 0;text-align:center;font-size:14.5px;
  letter-spacing:.02em;color:#f0cccc}
@media(max-width:1000px){.becherbilder{grid-template-columns:repeat(2,minmax(0,240px))}}
@media(max-width:520px){.becherbilder{grid-template-columns:minmax(0,260px)}}

.becherzeile{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:38px}
.becherteil{padding-top:16px;border-top:1px solid rgba(255,255,255,.28)}
.becherteil__was{display:block;font-family:var(--serif);font-size:23px;color:#fff;
  font-weight:600;line-height:1.2;margin-bottom:8px}
.stage .becherteil p{margin:0;color:#f0cccc;font-size:14.5px;line-height:1.6}
.stage .becherzeile__fuss{max-width:62ch;margin:34px auto 0;text-align:center;font-size:17px}

/* Bildkarte im Split auf dem Bordeaux-Band: Ohne eigene Regel steht das Foto
   auf dem Rose-Grund der hellen Variante und blitzt beim Laden hell auf. */
.stage .split__media{background:rgba(255,255,255,.08);box-shadow:0 30px 60px -34px rgba(0,0,0,.55)}
.stage .split__media .tagpill{background:rgba(255,255,255,.94)}

/* Split direkt unter einem Section-Kopf auf dem Bordeaux-Band (Eis-Seite).
   Ohne Abstand klebt das Bild am Lead-Absatz. */
.stage .sec-head + .split{margin-top:34px}

/* ── /cafe/ — Getraenkeblock ───────────────────────────────────────────
   Ersetzt drei Kacheln aus Symbol, Schlagzeile und Satz. Links der Grund,
   rechts die Auswahl mit Preisen — Inhalt statt Struktur. */
.gsplit{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.gsplit__text h2{margin-bottom:16px}
.gsplit__text p + p{margin-top:14px}
.gsplit__text .cta-row{margin-top:26px}
.gsplit__karte{background:#fff;border:1px solid var(--rose-line);border-radius:var(--r-lg);padding:26px 28px}
.gsplit__karte h3{font-size:19px;margin-bottom:4px}
.gsplit__fein{margin:16px 0 0;font-size:13.5px;color:var(--muted)}

/* ── Verweiszeile (statt Kachelraster) ────────────────────────────────── */
.weiter__titel{font-size:clamp(24px,3vw,32px);margin:8px 0}
#weiter > .wrap > .eyebrow{display:block}
.weiterliste{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line)}
.weiterliste li{border-bottom:1px solid var(--line)}
/* Beim Hover ruecken statt Polster animieren: `padding` loest bei jedem
   Bild einen Umbruch aus, `transform` laeuft auf dem Compositor. */
.weiterliste a{display:flex;align-items:center;gap:18px;padding:20px 4px;
  text-decoration:none;color:inherit;transition:transform .2s,color .2s}
.weiterliste a:hover{transform:translateX(10px);color:var(--wine)}
.weiterliste__was{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--wine);
  flex:0 0 auto;min-width:14em}
.weiterliste__dazu{flex:1;font-size:15px;color:var(--muted);line-height:1.5}
.weiterliste .ic{flex:none;width:20px;height:20px;color:var(--wine-soft);transition:transform .2s}
.weiterliste a:hover .ic{transform:translateX(5px)}

@media(max-width:860px){
  .gsplit{grid-template-columns:1fr;gap:28px}
  .weiterliste a{flex-wrap:wrap;gap:6px 14px}
  .weiterliste__was{min-width:0;flex:1}
  .weiterliste__dazu{flex:1 0 100%}
}

@media(max-width:980px){
  .zeitband{grid-template-columns:1fr;gap:24px}
  .becherzeile{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media(max-width:560px){
  .zkarte__zeit{font-size:23px}
  .becherzeile{grid-template-columns:1fr}
  .wochentafel b{font-size:17px}
}

/* Rueckmeldung nach dem Absenden */
/* Rueckmeldung: Rahmen ringsum statt Balken links. Der 3px-Seitenbalken ist
   das bekannteste Erkennungsmerkmal generischer Oberflaechen — und er trug
   hier ohnehin nichts, weil Erfolg und Fehler schon im Klartext stehen.
   Der Zustand kommt jetzt ueber Flaeche und Rahmen, nicht ueber eine Kante. */
.kmsg{margin:24px 0 0;padding:14px 18px;border:1px solid;border-radius:var(--r);
  background:#fff;font-size:15px;line-height:1.55;color:var(--ink);
  display:flex;gap:11px;align-items:flex-start}
.kmsg::before{content:"";flex:none;width:8px;height:8px;margin-top:8px;border-radius:50%;background:currentColor}
/* Heller Grund (13.09.2026). Die Farben waren fuer das alte Startseiten-
   formular auf Weinrot gebaut. Seit die Meldungen nur noch auf weissem
   Grund stehen, lag die Schrift bei 1,2 zu 1: Danke- und Fehlermeldung der
   Konfiguratoren waren praktisch unsichtbar. Jetzt 11,9 zu 1 und 7,7 zu 1. */
.kmsg--ok{border-color:var(--rose-line);background:var(--rose);color:var(--wine)}
.kmsg--err{border-color:#F2C38A;background:#FFF4E5;color:#7A3E00}

/* Karte — volle Breite, feste Hoehe */
.kontakt__map{margin-top:32px;height:clamp(260px,26vw,360px);border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.2);box-shadow:0 26px 54px -28px rgba(0,0,0,.6)}
.kontakt__map iframe{width:100%;height:100%;border:0;display:block}
/* Die grosse Karte auf der Startseite: eigene Spalte, volle Hoehe.
   `min-height` statt reiner Streckung — ohne sie fiele sie auf die Hoehe
   der Datenliste zurueck, sobald die kurz ist (kein Betriebsurlaub). */
/* FESTE Hoehe, keine Streckung und keine Absolutsetzung. Zwei Anlaeufe
   sind daran gescheitert (23.08.2026): Als Flexkasten blieb der Wrapper,
   den der Cookie-Dienst vor dem Einverstaendnis einschiebt, bei seiner
   Eigenbreite von 300px stehen. Mit `position:absolute` auf dem Wrapper
   baute der Cookie-Dienst seinen Hinweis gar nicht erst — die Karte war
   ein leerer Rahmen ohne den Satz „Klicke hier, um Marketing-Cookies zu
   akzeptieren". Diese schlichte Form ist dieselbe, die auf /kontakt/
   nachweislich funktioniert. */
.kontakt__karte{position:relative;height:clamp(360px,42vw,580px);border-radius:var(--r-lg);
  overflow:hidden;background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.2);box-shadow:0 26px 54px -28px rgba(0,0,0,.6)}
/* Nur der Hinweis wird absolut gesetzt, NICHT das iframe: Sobald der
   Wrapper des Cookie-Dienstes absolut liegt, baut der Dienst seinen
   Platzhalter nicht mehr (gemessen 23.08.2026). */
.kontakt__karte__aus{position:absolute;inset:0;z-index:0;margin:0;
  display:grid;place-content:center;text-align:center;padding:0 26px;
  color:#F0D6D6;font-size:15px;line-height:1.6}
.kontakt__karte__aus a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.kontakt__karte iframe{position:relative;z-index:1;width:100%;height:100%;border:0;display:block}

@media(max-width:960px){
  .kontakt__grid{grid-template-columns:1fr;gap:44px}
  .kontakt__karte{height:clamp(280px,62vw,380px)}
}
@media(max-width:520px){
  .kf.grid2{grid-template-columns:1fr;gap:22px}
  .napliste > div{grid-template-columns:1fr;gap:5px}
  .kform__send{width:100%;justify-content:center}
}

/* ============================================================
   Catering-Hubs — Achse 1 (Anlass) und Achse 2 (Art)
   Ergaenzt 31.07.2026, Website-Konzept Folie 6/7.
   Zwei bewusst VERSCHIEDENE Kartenformen, damit die beiden
   Achsen untereinander nicht wie dasselbe Grid aussehen:
   Anlaesse = Foto-Karten, Arten = Icon-Zeilen bzw. Icon-Karten.
   ============================================================ */

/* Brotkrume */
.brotkrume{display:flex;gap:10px;align-items:center;font-size:13.5px;font-weight:600;color:var(--muted)}
.brotkrume a{color:var(--wine)}
.brotkrume a:hover{text-decoration:underline;text-underline-offset:3px}

/* Anlass-Karten, vierspaltig (8 Eintraege = 2 saubere Reihen) */
.anlass .a{display:flex;flex-direction:column}
.anlass .a__b{display:flex;flex-direction:column;flex:1}
.anlass .a .txtlink{margin-top:auto;padding-top:16px;color:var(--wine)}
.anlass .a:hover .txtlink{gap:11px}
/* Spaltenzahl folgt der Anzahl der Eintraege (Twig setzt die Klasse).
   Sechs Eintraege in vier Spalten hinterlassen eine Waisen-Reihe mit zwei
   Karten — bei sechs Anlaessen also drei Spalten, zwei volle Reihen. */
.anlass--1{grid-template-columns:1fr;gap:20px;max-width:420px;margin-left:auto;margin-right:auto}
.anlass--2{grid-template-columns:repeat(2,1fr);gap:20px}
.anlass--3{grid-template-columns:repeat(3,1fr);gap:20px}
.anlass--4{grid-template-columns:repeat(4,1fr);gap:20px}
.anlass--1 .a__b,.anlass--2 .a__b,.anlass--3 .a__b,.anlass--4 .a__b{padding:20px 21px 22px}
.anlass--1 :is(h2,h3),.anlass--2 :is(h2,h3),.anlass--3 :is(h2,h3),.anlass--4 :is(h2,h3){font-size:19px;font-weight:700;line-height:1.25}
.anlass--1 p,.anlass--2 p,.anlass--3 p,.anlass--4 p{font-size:14.5px;line-height:1.5;margin-top:8px}
@media(max-width:1120px){.anlass--4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.anlass--3,.anlass--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){
  .anlass--2,.anlass--3,.anlass--4{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
}

/* Art-Zeilen (Ueberhub + Gegenachse) */
.artliste{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.artzeile{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:19px 22px;box-shadow:var(--shadow-sm);transition:transform .22s,box-shadow .22s,border-color .22s}
.artzeile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--rose-line)}
.artzeile__ic{width:52px;height:52px;border-radius:14px;background:var(--rose);display:grid;place-items:center}
.artzeile__ic .ic{width:25px;height:25px;color:var(--wine);stroke-width:1.7}
.artzeile__b b{display:block;font-family:var(--serif);font-size:18.5px;font-weight:700;color:var(--wine);line-height:1.25}
.artzeile__b span{display:block;margin-top:6px;color:var(--ink-soft);font-size:14.5px;line-height:1.5}
.artzeile__go{color:var(--wine);transition:transform .22s}
.artzeile__go .ic{width:20px;height:20px;stroke-width:2}
.artzeile:hover .artzeile__go{transform:translateX(4px)}
@media(max-width:900px){.artliste{grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}}
@media(max-width:440px){.artzeile{grid-template-columns:auto 1fr;gap:14px;padding:17px 18px}.artzeile__go{display:none}}

/* Art-Karten (eigener Hub /catering/arten/) */
.artkarten{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.artkarte{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px 28px;box-shadow:var(--shadow-sm);transition:transform .24s,box-shadow .24s,border-color .24s}
.artkarte:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--rose-line)}
.artkarte__ic{width:60px;height:60px;border-radius:50%;background:var(--rose);border:1.5px solid var(--rose-line);display:grid;place-items:center;margin-bottom:18px}
.artkarte__ic .ic{width:28px;height:28px;color:var(--wine);stroke-width:1.6}
.artkarte h2{font-size:21px;font-weight:700;line-height:1.25}
.artkarte p{margin-top:10px;color:var(--ink-soft);font-size:15px;line-height:1.55;flex:1}
.artkarte .txtlink{margin-top:18px;color:var(--wine)}
.artkarte:hover .txtlink{gap:11px}
@media(max-width:960px){.artkarten{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.artkarten{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}}

/* Seiten-Hero: h1 im zentrierten sec-head */
.phero .sec-head{max-width:820px}
.phero .sec-head h1{margin-top:14px}

/* Nach einem Seiten-Hero braucht die erste Section keinen vollen Abstand mehr —
   sonst klafft zwischen Einleitung und Karten eine tote Zone. */
.phero + .sec{padding-top:clamp(28px,3.5vw,48px)}

/* TENDERIST-Button 10px hoeher (Fabian, 01.08.2026).
   Der Anbieter setzt `bottom:20px` als Inline-Style auf den Container —
   ohne !important gewinnt das Inline-Style gegen jede Stylesheet-Regel. */
#tenderist-embed-container{bottom:30px!important}

/* Solange der Cookie-Banner offen ist, tritt der TENDERIST-Button zurueck.
   Beide sitzen unten rechts und ueberdeckten einander exakt (70x70 px) —
   „Einstellungen ansehen" war nicht anklickbar. Die Einwilligung hat Vorrang. */
body:has(.cmplz-cookiebanner.cmplz-show) #tenderist-embed-container{
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s
}

/* ============================================================
   Cookie-Banner (Complianz) in der Hochl-CI
   Ergaenzt 01.08.2026.

   Complianz 7 steuert sein Aussehen ueber CSS-Variablen auf
   :root — deshalb wird hier NICHT gegen Plugin-Regeln
   angekaempft, sondern es werden die Variablen neu belegt.
   Selektor `html:root` (0,1,1) schlaegt das `:root` (0,1,0)
   der generierten Plugin-Datei, unabhaengig von der Ladereihenfolge.
   Kein !important noetig, kein Template-Override, updatesicher.

   WICHTIG: Nur Optik. Klassen, Reihenfolge und Verhalten der
   Buttons bleiben unangetastet — daran haengt die Einwilligung.
   ============================================================ */
html:root{
  --cmplz_banner_width:560px;
  --cmplz_banner_background_color:#FFFFFF;
  --cmplz_banner_border_color:#EADFDF;
  --cmplz_banner_border_radius:20px 20px 20px 20px;
  --cmplz_banner_margin:20px;

  --cmplz_text_color:#212529;
  --cmplz_hyperlink_color:#660000;
  --cmplz_text_font_size:15px;
  --cmplz_link_font_size:14px;
  --cmplz_title_font_size:22px;

  --cmplz_button_font_size:15px;
  --cmplz_button_border_radius:12px 12px 12px 12px;
  --cmplz_button_accept_background_color:#660000;
  --cmplz_button_accept_border_color:#660000;
  --cmplz_button_accept_text_color:#FFFFFF;
  /* Ablehnen so stark wie Akzeptieren (15.09.2026). Ein weißer Knopf neben
     einem weinroten lenkt zur Einwilligung; die Datenschutzbehörden
     verlangen, dass beide Wege gleich leicht sind. */
  --cmplz_button_deny_background_color:#660000;
  --cmplz_button_deny_border_color:#660000;
  --cmplz_button_deny_text_color:#FFFFFF;
  --cmplz_button_settings_background_color:#FFFFFF;
  --cmplz_button_settings_border_color:#660000;
  --cmplz_button_settings_text_color:#660000;

  --cmplz_slider_active_color:#660000;
  --cmplz_slider_inactive_color:#D8C9C9;
  --cmplz_slider_bullet_color:#FFFFFF;
  --cmplz_category_header_always_active_color:#8a1f1f;
}

/* Karte */
body #cmplz-cookiebanner-container .cmplz-cookiebanner{
  padding:34px 34px 28px;
  border:1px solid var(--line);
  box-shadow:0 40px 90px -32px rgba(40,0,0,.45);
  font-family:var(--sans);
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title{
  font-family:var(--serif);color:var(--wine);font-weight:700;line-height:1.25;margin-bottom:4px
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body{padding:0}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message{
  color:var(--ink-soft);line-height:1.6;margin-top:14px
}

/* Buttons: gestapelt, volle Breite, Touch-tauglich */
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons{
  display:flex;flex-direction:column;gap:10px;margin-top:24px
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn{
  width:100%;min-height:48px;padding:13px 20px;
  font-family:var(--sans);font-weight:600;border-width:1.5px;border-style:solid;
  transition:background .2s,border-color .2s,transform .2s
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover{
  background:var(--wine-deep);border-color:var(--wine-deep);transform:translateY(-1px)
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover{
  background:var(--rose);border-color:var(--wine)
}

/* Rechtstext-Links unter den Buttons */
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links{
  margin-top:20px;display:flex;justify-content:center
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links ul{
  display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:0;padding:0;list-style:none
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links a{
  color:var(--wine);font-weight:600;text-decoration:underline;text-underline-offset:3px
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links a:hover{color:var(--wine-deep)}

/* Kategorien-Ansicht */
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title{
  font-family:var(--serif);color:var(--wine);font-weight:600
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-description{color:var(--ink-soft)}

/* Schliessen-Kreuz */
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close{color:var(--muted)}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:hover{color:var(--wine)}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover{
  background:var(--wine-deep);border-color:var(--wine-deep);transform:translateY(-1px)
}

/* Lage: unten rechts als Karte (15.09.2026). Complianz schreibt für
   „bottom-right“ keine Positionsregeln in seine CSS-Datei, der Banner lief
   am Desktop über die volle Breite (1430 × 505 px). Akzeptieren und
   Ablehnen stehen auf allen Breiten nebeneinander, Einstellungen darunter. */
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences{grid-column:1/-1}
@media(min-width:641px){
  body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom-right{
    position:fixed;top:auto;left:auto;right:24px;bottom:24px;
    width:min(460px,calc(100vw - 48px));max-width:none;margin:0;transform:none
  }
}

/* Handy: kompakt (15.09.2026). Gemessen 585 von 844 px, der Banner verdeckte
   fast die ganze Startseite. Kopfzeile und „Dienste verwalten“ fallen weg
   (beides steckt hinter „Einstellungen“), Akzeptieren und Ablehnen stehen
   nebeneinander, Einstellungen darunter über die volle Breite. */
@media(max-width:640px){
  body #cmplz-cookiebanner-container .cmplz-cookiebanner{padding:18px 18px 14px;row-gap:8px}
  body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header,
  body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider,
  body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links.cmplz-information{display:none}
  body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message{margin-top:0;font-size:14px;line-height:1.5}
  body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
  body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn{min-height:44px;padding:10px 12px}
  body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
  body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences{grid-column:1/-1}
  body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links{margin-top:4px}
}

/* ── „Einwilligung verwalten" als runder Button unten links ──
   Der Text bleibt im Markup (Screenreader), nur visuell ersetzt
   das Cookie-Icon die Beschriftung. */
body #cmplz-manage-consent .cmplz-manage-consent.cmplz-show{
  position:fixed;left:24px;bottom:30px;z-index:99998;
  width:56px;height:56px;padding:0;border-radius:50%;
  background:var(--wine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'/%3E%3Cpath d='M8.5 8.5v.01'/%3E%3Cpath d='M16 15.5v.01'/%3E%3Cpath d='M12 12v.01'/%3E%3Cpath d='M11 17v.01'/%3E%3Cpath d='M7 14v.01'/%3E%3C/svg%3E") center/26px no-repeat;
  border:none;font-size:0;line-height:0;cursor:pointer;
  box-shadow:0 12px 28px -12px rgba(60,0,0,.65);
  transition:background .2s,transform .2s
}
body #cmplz-manage-consent .cmplz-manage-consent.cmplz-show:hover{background-color:var(--wine-deep);transform:translateY(-2px)}
body #cmplz-manage-consent .cmplz-manage-consent.cmplz-show:focus-visible{outline:3px solid var(--rose-line);outline-offset:3px}

@media(max-width:560px){
  body #cmplz-cookiebanner-container .cmplz-cookiebanner{padding:26px 22px 22px}
  body #cmplz-manage-consent .cmplz-manage-consent.cmplz-show{left:16px;bottom:24px;width:50px;height:50px;background-size:23px}
}

/* Zentrierung selbst setzen: Die Positionsregeln liegen in der von
   Complianz generierten CSS-Datei, die beim Umstellen der Einstellung
   per DB nicht neu geschrieben wurde. Klasse `cmplz-center` ist da,
   die Regel dazu nicht. */
body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center{
  left:50%;right:auto;top:50%;bottom:auto;
  transform:translate(-50%,-50%);
  max-width:calc(100vw - 36px);
  max-height:calc(100vh - 60px);overflow-y:auto
}
/* Keine eigene `width` setzen: Complianz bemisst die Innenelemente an
   --cmplz_banner_width. Eine zusaetzliche Aussenbreite laesst den Text
   ueber den Rand laufen — er wurde rechts abgeschnitten. */

/* Complianz blendet den Banner-Titel auf schmalen Viewports aus. Auf einem
   Einwilligungs-Dialog gehoert aber sichtbar hin, worum es geht — zurueckgeholt. */
@media(max-width:560px){
  body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title{
    display:block;font-size:20px;padding-right:34px
  }
}

/* Auf schmalen Viewports muss auch die Plugin-Variable mitgehen: Complianz
   bemisst die Innenelemente daran. Steht sie fix auf 560px, laufen Text und
   Buttons rechts aus der Karte heraus. */
@media(max-width:620px){
  html:root{--cmplz_banner_width:calc(100vw - 36px)}
}

/* Innenblöcke an die Karte binden statt an --cmplz_banner_width.
   Complianz bemisst sie an der Bannerbreite und rechnet mit SEINEM
   Innenabstand — sobald wir das Padding aendern, stehen sie ueber
   (gemessen: 362px Inhalt in einer 354px-Karte, 8px Ueberstand). */
body #cmplz-cookiebanner-container .cmplz-cookiebanner :is(
  .cmplz-header, .cmplz-body, .cmplz-message, .cmplz-buttons,
  .cmplz-links, .cmplz-divider, .cmplz-categories, .cmplz-category,
  .cmplz-btn, .cmplz-title
){
  width:100%;max-width:100%;box-sizing:border-box;min-width:0
}

/* Der Verwalten-Button ist bei Complianz ein Tab, der vom unteren Rand
   hochfaehrt (bottom:-35px, right:40px, slide-Animation) — und er kollidiert
   dort mit dem TENDERIST-Button. Wir machen einen ruhenden Kreis unten links
   daraus. `display` muss mitgesetzt werden, sonst bleibt die Regel des
   Plugins fuer den eingeklappten Zustand aktiv. */
body #cmplz-manage-consent .cmplz-manage-consent.cmplz-show{
  display:block;animation:none;min-width:0;padding:0;
  right:auto;border:none
}

/* ============================================================
   Catering-Detailseiten (Anlass + Art)
   Ergaenzt 02.08.2026 zu den freigegebenen Bauplaenen:
     Blueprint A (Anlass) fuehrt ueber den Ablauf  → Zeitleiste
     Blueprint B (Art)    fuehrt ueber das Essen   → Vitrine
   Zwei verschiedene Leitmotive, damit die zwoelf Seiten nicht
   als dieselbe Schablone gelesen werden.
   ============================================================ */

/* Split spiegeln — Bild rechts statt links. Sonst laege auf jeder
   Detailseite das Foto viermal an derselben Kante. */
.split--flip .split__media{order:2}
@media(max-width:860px){.split--flip .split__media{order:0}}

/* Zeitleisten-Knoten mit Ziffer statt Icon */
.vtl--rail .vtl__node{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--wine);line-height:1}

/* Brotkrume auf dunklem Foto-Hero */
.brotkrume--hell{color:#F0D6D6;text-shadow:0 2px 12px rgba(40,0,0,.6)}
.brotkrume--hell a{color:#fff}
/* Wo die Brotkrume den Eyebrow ersetzt (siehe partials/catering-hero.twig),
   übernimmt sie dessen Optik und dessen Farbe — sonst fehlt der Zeile über
   der Überschrift der Ton, den sie vorher hatte. */
/* Als fließender Satz, nicht als Flex-Reihe: In der Reihe brach jedes
   Glied in sich um („SPEISEN &“ über „SERVICES“) und der Punkt schwebte
   zwischen zwei Zeilen (Hochl, 13.09.2026). Inline bricht die Zeile
   zwischen den Wörtern, und der Punkt bleibt auf der Grundlinie. */
.brotkrume--marke{display:block;font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;line-height:1.8}
.brotkrume--marke > *{display:inline}
/* Zeilen gleichmäßig verteilen, damit kein einzelnes Wort allein in der
   letzten Zeile steht („Buffet“, „Getränke“, „TRAMEZZINI“; blick, 15.09.2026).
   Ändert nur die Verteilung, nie die Breite. */
.brotkrume--marke,.sec h2{text-wrap:balance}
.brotkrume--marke span[aria-hidden]{margin:0 .35em}
/* Tippfläche der Krumen-Links mindestens 24 px hoch (WCAG 2.5.8). Gemessen
   15.09.2026: 17 px. Innenabstand statt Schriftgröße, die Zeile bleibt gleich. */
.brotkrume a,.brotkrume--marke a{display:inline-block;padding-block:4px}

/* ── Google-Bewertungen, Startseite (15.09.2026) ─────────────────────
   Links die Wertung als große Zahl, rechts die Zitate. Die erste Karte
   ist die Rosé-Fläche der Section. Handy-Regeln stehen inline in home.twig. */
.bew{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:start}
.bew__kopf{position:sticky;top:120px}
.bew__kopf,.bew__rechts{min-width:0}
.bew__kopf h2{font-size:clamp(30px,4vw,42px);font-weight:700;margin-top:14px;text-wrap:balance}
.bew__schnitt{display:flex;align-items:center;gap:18px;margin:28px 0 22px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bew__zahl{font-family:var(--serif);font-weight:700;font-size:clamp(66px,7vw,88px);line-height:.9;color:var(--wine);letter-spacing:-1px}
.bew__zahl-text{display:grid;gap:8px;font-size:14.5px;line-height:1.4;color:var(--ink-soft)}
.sterne{position:relative;display:inline-flex;line-height:0;color:var(--wine);justify-self:start;width:max-content}
.sterne .ic{width:22px;height:22px;fill:currentColor;stroke:none;flex:none}
.sterne__leer,.sterne__voll{display:flex;gap:3px}
.sterne__leer{color:var(--rose-line)}
.sterne__voll{position:absolute;top:0;left:0;width:var(--f,100%);overflow:hidden}
.sterne__voll--statisch{position:static;width:auto;gap:2px}
.sterne--klein .ic{width:15px;height:15px}
.bew__lead{color:var(--ink-soft);margin:0 0 22px}
.bew__hinweis{margin-top:20px;font-size:13px;line-height:1.55;color:var(--muted)}
.bew__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.bew__liste:focus-visible{outline:2px solid var(--wine);outline-offset:6px;border-radius:var(--r-lg)}
.bewk{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 20px;box-shadow:var(--shadow-sm)}
.bewk blockquote{margin:0}
.bewk blockquote p{margin:0;font-family:var(--serif);font-size:16.5px;line-height:1.62;color:var(--ink)}
.bewk--gross{grid-column:1/-1;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--rose) 0%,var(--rose-2) 100%);border-color:var(--rose-line);padding:36px 40px 26px}
.bewk--gross::before{content:"\201C";position:absolute;right:30px;top:-18px;font-family:var(--serif);font-weight:700;font-size:180px;line-height:1;color:var(--wine);opacity:.1;pointer-events:none}
.bewk--gross blockquote p{font-size:clamp(19px,1.9vw,22px);line-height:1.55;max-width:34em}
.bewk__fuss{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;font-size:14px}
.bewk--gross .bewk__fuss{border-top-color:var(--rose-line)}
.bewk__wer{display:flex;flex-direction:column;line-height:1.35}
.bewk__wer b{color:var(--wine);font-weight:700}
.bewk__wer time{color:var(--muted);font-size:13px}
.bewk__bereich{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wine-soft)}
.bewk__bereich .ic{width:16px;height:16px}
.bew__wischen{display:none;margin:4px 0 0;font-size:13px;color:var(--muted)}

/* ── 404 (15.09.2026) ────────────────────────────────────────────── */
.nf .sec-head h1{font-size:clamp(34px,5vw,52px);font-weight:700;margin-top:14px}
.nf__wege{list-style:none;padding:0;margin:44px auto 0;max-width:880px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.nf__wege a{display:flex;gap:14px;align-items:center;min-height:72px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;box-shadow:var(--shadow-sm);transition:.2s}
.nf__wege a:hover{border-color:var(--rose-line);transform:translateY(-2px)}
.nf__wege .ki{width:44px;height:44px;border-radius:12px;background:var(--rose);display:grid;place-items:center;flex:none;color:var(--wine)}
.nf__wege b{display:block;font-family:var(--serif);color:var(--wine);font-size:17px;line-height:1.3}
.nf__wege small{color:var(--ink-soft);font-size:14px}
.nf__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.chero .brotkrume--marke,
.chero .brotkrume--marke a{color:#FFC9C9}
.chero .brotkrume--marke a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.chero .brotkrume--marke span[aria-hidden]{opacity:.55}
.hero--left .brotkrume{justify-content:flex-start}

/* Links mitten im Fließtext der Catering-Seiten ([[art:…]] in
   hochl_catering_absaetze). Vorher erbten sie die graue Textfarbe und
   waren nicht als Link zu erkennen (Hochl, 13.09.2026). Weinrot plus
   Unterstrich, damit es nicht nur an der Farbe hängt. */
.tlink{color:var(--wine);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:var(--rose-line);text-underline-offset:3px;transition:text-decoration-color .2s,color .2s}
.tlink:hover{color:var(--wine-deep);text-decoration-color:currentColor}
/* Auf der weinroten Bühne (Zugang) wäre Weinrot unsichtbar. */
.stage .tlink{color:#fff;text-decoration-color:rgba(255,255,255,.55)}
.stage .tlink:hover{color:#FFD9D9;text-decoration-color:currentColor}
/* Nachteile in einer feature-list (Zeilen mit „x “): Kreuz statt Häkchen,
   gedämpft, damit sie nicht wie ein Vorteil aussehen. */
.feature-list__nein .ic{color:var(--muted)}
/* Der Hero ist ein Flex-Container: Ohne Breitenangabe schrumpft .wrap auf die
   Textbreite und wird mittig gesetzt — der Text stand dann 264px weiter innen
   als das Logo darueber (gemessen 02.08.2026). */
.hero--left > .wrap{width:100%}

/* Verwandte Arten als Liste im Textblock */
.split__body .feature-list a{color:var(--wine);border-bottom:1px solid var(--rose-line);transition:border-color .2s}
.split__body .feature-list a:hover{border-bottom-color:var(--wine)}

/* ── FAQ: Seitenspalte mit Bild + aufklappbare Fragen ────────
   <details>/<summary> statt JavaScript — funktioniert ohne Script,
   ist tastaturbedienbar und wird von Suchmaschinen gelesen. */
.faqblock{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,5vw,64px);align-items:start}
.faqblock__side h2{font-size:clamp(26px,3.4vw,38px);font-weight:700;margin-top:14px}
.faqblock__side p{margin-top:16px;color:var(--ink-soft)}
.faqblock__ph{margin:26px 0 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;background:var(--rose)}
.faqblock__ph img{width:100%;height:100%;object-fit:cover}

.faqliste{display:grid;gap:12px}
.faqitem{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden}
.faqitem summary{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:20px 22px;cursor:pointer;list-style:none;
  font-family:var(--serif);font-weight:700;font-size:18px;line-height:1.35;color:var(--wine)}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem summary:hover{background:var(--rose)}
.faqitem summary:focus-visible{outline:3px solid var(--rose-line);outline-offset:-3px}
/* Plus/Minus aus zwei Strichen — kein Icon-Font, kein Sprite noetig */
.faqitem__zeichen{position:relative;flex:none;width:20px;height:20px;margin-top:3px}
.faqitem__zeichen::before,.faqitem__zeichen::after{content:"";position:absolute;left:2px;top:9px;width:16px;height:2px;background:var(--wine);border-radius:2px;transition:transform .22s}
.faqitem__zeichen::after{transform:rotate(90deg)}
.faqitem[open] .faqitem__zeichen::after{transform:rotate(0)}
.faqitem__a{padding:0 22px 22px}
.faqitem__a p{color:var(--ink-soft);font-size:15.5px;line-height:1.7}
.faqitem__a p + p{margin-top:12px}
@media(max-width:900px){
  .faqblock{grid-template-columns:1fr;gap:34px}
  .faqblock__ph{display:none}
}

/* ── Abschluss-Band: Foto als Flaeche, Text auf weisser Karte ──
   Text steht bewusst NICHT auf dem Foto — auf wechselnden Bildern
   ist kein Kontrast garantiert. Die Karte loest das dauerhaft. */
.abschluss{position:relative;overflow:hidden;background:var(--rose-2)}
.abschluss__bg{position:absolute;inset:0}
.abschluss__bg img{width:100%;height:100%;object-fit:cover}
.abschluss__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(60,0,0,.62) 0%,rgba(60,0,0,.34) 62%,rgba(60,0,0,.5) 100%)}
.abschluss .wrap{position:relative;z-index:2}
.abschluss__karte{background:#fff;border-radius:var(--r-lg);padding:clamp(30px,4vw,48px);max-width:620px;
  box-shadow:0 40px 80px -34px rgba(40,0,0,.6);border:1px solid var(--line)}
.abschluss__karte h2{font-size:clamp(27px,3.6vw,40px);font-weight:700;margin-top:14px}
.abschluss__karte p{margin-top:16px;color:var(--ink-soft)}
.abschluss__karte .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
@media(max-width:560px){
  .abschluss__karte .cta-row .btn{width:100%;justify-content:center}
}

/* ============================================================
   Catering-Überhub — Umbau 03.08.2026
   Befund davor (Fad-Test): die Seite hatte KEINE einzige dunkle
   Fläche, das CTA-Band war Text ohne Anker, und dasselbe Karten-
   Grid stand dreimal über drei Seiten.
   ============================================================ */

/* ── Hero: Bordeaux-Halbfläche + randloses Foto ───────────────
   Eigener Hero-Typ, kommt auf keiner anderen Seite vor. Das Foto
   läuft rechts ohne Radius bis an die Viewport-Kante. */
.chero{position:relative;background:var(--wine);color:#fff;overflow:hidden}
.chero__grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:clamp(460px,62vh,620px)}
.chero__text{display:flex;align-items:center;justify-content:flex-end;padding:clamp(48px,7vw,96px) 26px}
.chero__inner{width:100%;max-width:calc(var(--wrap) / 2 - 26px)}
.chero .eyebrow{color:#FFC9C9}
.chero h1{color:#fff;font-size:clamp(34px,4.6vw,58px);font-weight:700;line-height:1.08;margin-top:16px}
.chero h1 em{font-style:italic;font-weight:400;color:#FFD9D9}
/* Kleiner und schmaler als der allgemeine Lead: Im Hero steht er neben
   einer grossen Ueberschrift und soll sie nicht erschlagen (Fabian,
   25.08.2026: „ist der Text ein bisschen zu gross"). */
.chero .lead{color:#F6DEDE;margin-top:18px;max-width:42ch;
  font-size:clamp(15.5px,1.5vw,17px);line-height:1.6}
.chero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.chero__media{position:relative;background:var(--wine-deep);min-height:280px}
.chero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Weiche Kante zur Textfläche, damit der Schnitt nicht wie ein Fehler wirkt */
.chero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--wine) 0%,rgba(102,0,0,.35) 22%,transparent 55%)}

/* Faktenleiste — trägt nur Belegtes */
.chero__fakten{background:var(--wine-deep);border-top:1px solid rgba(255,255,255,.14)}
/* Eine Zeile, nie zwei (Fabian, 25.08.2026). Drei Punkte passen bis
   hinunter zu 900px. */
.chero__fakten ul{display:flex;flex-wrap:nowrap;gap:14px clamp(20px,4vw,56px);
  list-style:none;margin:0;padding:16px 0}
.chero__fakten li{display:flex;align-items:center;gap:10px;color:#F6DEDE;font-size:14.5px;font-weight:500}
.chero__fakten .ic{width:19px;height:19px;color:#FFC9C9;flex:none}
/* Am Handy untereinander (Fabian, 23.09.2026). Vorher stand `nowrap` ohne
   Gegenregel: Die drei Punkte blieben in einer Zeile, die Adresse rutschte
   rechts aus dem Bild und war halb abgeschnitten. Eine Spalte statt Umbruch,
   damit Zeichen und Text jedes Punktes zusammenbleiben. */
@media(max-width:760px){
  .chero__fakten ul{flex-direction:column;align-items:flex-start;gap:11px;padding:15px 0}
  .chero__fakten li{align-items:flex-start;line-height:1.35}
  .chero__fakten .ic{margin-top:1px}
}

@media(max-width:960px){
  .chero__grid{grid-template-columns:1fr}
  .chero__text{justify-content:flex-start;order:2;padding:clamp(36px,7vw,56px) 26px}
  .chero__inner{max-width:none}
  .chero__media{order:1;min-height:clamp(240px,42vw,340px)}
  .chero__media::after{background:linear-gradient(0deg,var(--wine) 0%,rgba(102,0,0,.3) 34%,transparent 70%)}
}

/* ── Speisen & Leistungen: Foto füllt die Karte, Text im Verlauf ──
   Bewusst andere Kartenform als die Anlass-Karten darüber. */
.speisen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.speise{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;
  min-height:340px;box-shadow:var(--shadow-sm);transition:transform .24s,box-shadow .24s}
.speise:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.speise__ph{position:absolute;inset:0;background:var(--rose)}
.speise__ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.speise:hover .speise__ph img{transform:scale(1.05)}
/* Verlauf: unten kräftig genug für 4.5:1 auf jedem Foto */
.speise__ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(38,0,0,.92) 0%,rgba(38,0,0,.72) 34%,rgba(38,0,0,.22) 62%,rgba(38,0,0,.08) 100%)}
.speise__b{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:24px 24px 26px;color:#fff}
.speise__ic{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;margin-bottom:14px}
.speise__ic .ic{width:22px;height:22px;color:#fff}
.speise h3{color:#fff;font-size:20px;font-weight:700;line-height:1.25}
.speise p{color:#F3DADA;font-size:14.5px;line-height:1.5;margin-top:8px}
.speise .txtlink{color:#FFD9D9;margin-top:16px}
.speise:hover .txtlink{gap:11px;color:#fff}
@media(max-width:960px){.speisen{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.speisen{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}}

/* ── Lange Zeitleiste mit Scroll-Füllung ──────────────────────
   Sieben Schritte mit Luft: der Abschnitt soll gescrollt werden.
   Die Füllhöhe setzt main.js aus der Scrollposition. */
.zeit{background:linear-gradient(180deg,var(--rose) 0%,var(--paper-2) 100%)}
.zeit__rail{position:relative;margin-top:clamp(48px,6vw,80px);padding-left:96px}
.zeit__linie{position:absolute;left:33px;top:12px;bottom:12px;width:2px;background:var(--rose-line)}
/* Fuellstand ueber scaleY statt ueber die Hoehe: Das JS schreibt bei
   jedem Scroll-Frame einen neuen Wert, und `height` loest dabei jedes
   Mal Layout aus. transform bleibt im Compositor. */
.zeit__fill{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--wine);
  display:block;transform:scaleY(0);transform-origin:top;transition:transform .18s linear}
/* Gleichmaessiger Takt: Jeder Schritt ist gleich hoch, egal ob mit Foto
   oder ohne. Vorher bestimmte die Bildhoehe den Abstand — die Knoten
   standen dadurch mal 300, mal 180 px auseinander. */
/* Feste Werte statt clamp/vh: Nur so ist der Takt berechenbar.
   Schritt = Fotohoehe 220 + Abstand 56 = 276, Textschritte per min-height
   auf denselben Wert. Gemessen: alle Knotenabstaende exakt 276 px. */
.zeit__schritt{position:relative;padding-bottom:56px;min-height:186px}
.zeit__schritt:last-child{padding-bottom:0}
.zeit__node{position:absolute;left:-96px;top:-4px;width:68px;height:68px;border-radius:50%;
  background:#fff;border:2px solid var(--rose-line);display:grid;place-items:center;
  color:var(--wine);z-index:2;box-shadow:var(--shadow-sm);
  transition:border-color .35s ease,background .35s ease,color .35s ease,transform .35s ease}
.zeit__node .ic{width:28px;height:28px;stroke-width:1.6}
.zeit__schritt.an .zeit__node .ic{color:#fff}
/* Schrittnummer als Kleintext ueber der Ueberschrift — die Ziffer sass
   vorher im Knoten, dort steht jetzt das Icon des Schrittes. */
.zeit__nr{display:block;font-family:var(--sans);font-weight:700;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wine-soft);margin-bottom:8px}
.zeit__schritt.an .zeit__node{border-color:var(--wine);background:var(--wine);color:#fff;transform:scale(1.06)}
.zeit__b h3{font-size:clamp(21px,2.5vw,27px);font-weight:700;line-height:1.25}
.zeit__b p{margin-top:10px;color:var(--ink-soft);font-size:16px;line-height:1.7;max-width:68ch}
/* `align-items:start` statt `center`: sonst rutscht die Ueberschrift
   gegenueber ihrem Knoten nach unten, weil das Foto hoeher ist. */
.zeit__schritt--foto{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,52px);align-items:start}
.zeit__ph{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
  height:220px;background:var(--rose)}
.zeit__ph img{width:100%;height:100%;object-fit:cover}
/* Die Sichtbarkeit der Schritte laeuft ueber die normale .reveal-Mechanik
   (IntersectionObserver) — NICHT ueber den Scroll-Handler. Der Handler war
   im Full-Page-Screenshot nicht zuverlaessig, weil Playwright den Viewport
   umbaut statt zu scrollen; die Schritte blieben dann unsichtbar.
   `.an` steuert jetzt nur noch Knotenfarbe und Fuellstand. */

@media(max-width:860px){
  .zeit__rail{padding-left:66px}
  .zeit__linie{left:23px}
  .zeit__node{left:-66px;width:48px;height:48px;font-size:20px}
  .zeit__schritt--foto{grid-template-columns:1fr;gap:20px}
  .zeit__ph{height:auto;aspect-ratio:16/10}
  .zeit__schritt{min-height:0;padding-bottom:44px}
}
@media(prefers-reduced-motion:reduce){
  .zeit__schritt{opacity:1;transform:none;transition:none}
  .zeit__fill{transition:none}
  .zeit__node{transition:none}
}

/* ============================================================
   Achsen-Hubs — Umbau 03.08.2026
   Drei Hubs, drei Bauformen: Überhub = Karten + Zeitleiste,
   Anlässe = Vollbreiten-Bänder, Arten = Bento-Mosaik.
   Dreimal dasselbe Grid wäre die häufigste Slop-Falle.
   ============================================================ */

/* ── Anlass-Bänder (/catering/anlaesse/) ──────────────────────
   Erst randlos gebaut, am 03.08.2026 auf Fabians Rückmeldung
   zurückgenommen: Sektionen sollen nicht bis an die Kante laufen
   und nicht aneinanderkleben. Jetzt im Container, mit Rundung,
   Abstand zwischen den Bändern und Luft nach außen. */
.baender{max-width:var(--wrap);margin:0 auto;padding:clamp(52px,7vw,96px) 26px;
  display:grid;gap:clamp(20px,2.6vw,32px)}
.band{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  min-height:clamp(260px,28vw,340px);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.band--tint{background:var(--paper-2)}
.band:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--rose-line)}
.band__ph{position:relative;overflow:hidden;background:var(--rose-2)}
.band__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.band:hover .band__ph img{transform:scale(1.04)}
.band__b{display:flex;align-items:center;padding:clamp(26px,3vw,44px)}
.band--gespiegelt .band__ph{order:2}
/* Laufende Nummer als ruhiges Ordnungszeichen — echte Sequenz,
   keine Deko-Nummerierung ohne Bedeutung. */
.band__nr{display:block;font-family:var(--serif);font-weight:700;font-size:15px;
  color:var(--wine-soft);letter-spacing:.1em;margin-bottom:10px}
.band__b h2{font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.22}
.band__b p{margin-top:12px;color:var(--ink-soft);font-size:15.5px;line-height:1.65}
.band__b .txtlink{margin-top:18px;color:var(--wine)}
.band:hover .txtlink{gap:11px}
@media(max-width:860px){
  .band{grid-template-columns:1fr;min-height:0}
  .band__ph{order:0!important;aspect-ratio:16/10}
}

/* ── Verweis-Band auf die Gegenachse ──────────────────────────
   Dunkle Kontrastfläche: Ohne sie wäre die Anlass-Seite
   durchgehend hell. */
.verweis{position:relative;overflow:hidden;background:var(--wine)}
.verweis__bg{position:absolute;inset:0}
.verweis__bg img{width:100%;height:100%;object-fit:cover}
.verweis__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(74,0,0,.96) 0%,rgba(74,0,0,.86) 46%,rgba(74,0,0,.6) 100%)}
.verweis .wrap{position:relative;z-index:2}
.verweis__inner{max-width:640px;color:#fff}
.verweis .eyebrow{color:#FFC9C9}
.verweis h2{color:#fff;font-size:clamp(26px,3.4vw,40px);font-weight:700;line-height:1.2;margin-top:14px}
.verweis p{color:#F6DEDE;margin-top:16px;font-size:16.5px;line-height:1.7}
.verweis .btn{margin-top:28px}
/* Flache Variante ohne Hintergrundfoto: Drei Bildbänder hintereinander
   waren zu viel (Fabian, 03.08.2026). Die Fläche traegt die Farbe allein. */
.verweis--flach{background:var(--wine)}
.verweis--flach::after{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 120% at 8% 0%,rgba(255,220,220,.14),transparent 60%);pointer-events:none}

/* ── Bento-Mosaik (/catering/arten/) ──────────────────────────
   Erste Kachel doppelt so groß: Größenhierarchie statt
   Uniform-Grid — sonst wäre es dasselbe Raster wie im Überhub. */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:250px;gap:16px;margin-top:52px}
.bento .bento__k{min-height:0}
.bento .bento__k:first-child{grid-column:span 2;grid-row:span 2}
/* In den kleinen Kacheln nimmt das Icon dem Text den Platz — dort weg.
   In der grossen bleibt es, sie traegt die Handschrift der Sektion. */
.bento .bento__k:not(:first-child) .speise__ic{display:none}
.bento .bento__k:not(:first-child) .speise__b{padding:20px 20px 22px}
.bento .bento__k:not(:first-child) h3{font-size:18px}
.bento .bento__k:not(:first-child) p{font-size:13.8px;line-height:1.45;margin-top:6px}
.bento .bento__k:not(:first-child) .txtlink{margin-top:12px;font-size:13.5px}
.bento .bento__k:first-child h3{font-size:26px}
.bento .bento__k:first-child p{font-size:16px}
@media(max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:230px}
  .bento .bento__k:first-child{grid-column:span 2;grid-row:span 1}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr;grid-auto-rows:250px}
  .bento .bento__k:first-child{grid-column:span 1}
}

/* ── Foto-Streifen als Verweis auf die Anlässe ────────────────
   Läuft randlos über die volle Breite — anderer Typ als die
   Kartenliste, die hier vorher stand. */
.streifen{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);
  gap:14px;margin-top:44px;overflow-x:auto;scrollbar-width:thin}
.streifen__k{position:relative;display:block;height:230px;border-radius:12px;overflow:hidden;background:var(--rose)}
.streifen__k img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.streifen__k:hover img{transform:scale(1.06)}
.streifen__k::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(38,0,0,.88) 0%,rgba(38,0,0,.3) 46%,transparent 78%)}
.streifen__t{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:#fff;
  font-family:var(--serif);font-weight:700;font-size:16px;line-height:1.25}
@media(max-width:700px){.streifen__k{height:190px}}

/* ── Zusatzleistungen (/catering/arten/) ──────────────────────
   Reine Auszeichnung, nicht klickbar: keine Hover-Hebung, kein
   Pfeil, kein Zeiger — sonst verspricht die Kachel einen Link,
   den es nicht gibt. */
.zusatz{list-style:none;margin:52px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.zusatz__k{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:24px 22px 26px}
.zusatz__ic{width:52px;height:52px;border-radius:50%;background:var(--rose);
  border:1px solid var(--rose-line);display:grid;place-items:center;margin-bottom:16px}
.zusatz__ic .ic{width:25px;height:25px;color:var(--wine);stroke-width:1.6}
.zusatz__k b{font-family:var(--serif);font-size:17.5px;font-weight:700;color:var(--wine);line-height:1.25}
.zusatz__k span{margin-top:8px;color:var(--ink-soft);font-size:14.5px;line-height:1.55}
@media(max-width:1080px){.zusatz{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.zusatz{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.zusatz{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}}

/* Signet auf dem flachen Verweis-Band — Signature-Element aus DESIGN.md.
   Rein dekorativ, deshalb aria-hidden und pointer-events aus. */
/* Zweispaltig: links die Ansage, rechts die sechs Leistungen mit Icon.
   Vorher standen dort nur Ornamente — zu wenig fuer eine ganze Flaeche. */
.verweis__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.verweis__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.verweis__liste li{display:flex;align-items:center;gap:13px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r);padding:14px 16px;
  color:#fff;font-family:var(--serif);font-weight:600;font-size:15px;line-height:1.25}
.verweis__ic{width:38px;height:38px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.14);display:grid;place-items:center}
.verweis__ic .ic{width:20px;height:20px;color:#FFD9D9}
@media(max-width:980px){.verweis__grid{grid-template-columns:1fr;gap:34px}}
@media(max-width:520px){.verweis__liste{grid-template-columns:1fr}}

/* Zeitleiste: jeder zweite Schritt hat ein Foto, die Seite wechselt.
   Vorher lagen alle drei Bilder rechts und in der unteren Hälfte —
   das wirkte wie ein Klumpen statt wie ein Rhythmus. */
.zeit__schritt--links .zeit__b{order:2}
.zeit__schritt--links .zeit__ph{order:1}
@media(max-width:860px){
  .zeit__schritt--links .zeit__b{order:0}
  .zeit__schritt--links .zeit__ph{order:0}
}

/* FAQ-Fragen sind jetzt H3 in <summary> — damit sie in der Überschriften-
   Gliederung auftauchen. Das <summary> bleibt der Klickbereich. */
.faqitem summary h3{font:inherit;color:inherit;margin:0;display:inline}

/* ── Weitere Anlässe (/catering/anlaesse/) ────────────────────
   Kein Karten-Grid: Die Punkte sind Fließtext-Blöcke mit Haarlinie,
   sonst stünde auf derselben Seite zweimal dieselbe Kachelform. */
.weitere{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);margin-top:50px}
.weitere__k{padding-top:22px;border-top:2px solid var(--rose-line)}
.weitere__k h3{font-size:20px;font-weight:700;line-height:1.25}
.weitere__k p{margin-top:10px;color:var(--ink-soft);font-size:15.5px;line-height:1.7}
.weitere__k a{color:var(--wine);border-bottom:1px solid var(--rose-line);transition:border-color .2s}
.weitere__k a:hover{border-bottom-color:var(--wine)}
@media(max-width:800px){.weitere{grid-template-columns:1fr;gap:26px}}

/* Bildseiten streng abwechselnd (Fabian, 03.08.2026): Auf der Anlass-
   Seite lagen vier Bilder hintereinander rechts. Diese zwei Modifikatoren
   drehen die betroffenen Sektionen. */
.ablauf-2--links .vtl{order:2}
.ablauf-2--links .ablauf-photo{order:1}
.faqblock--rechts .faqblock__side{order:2}
.faqblock--rechts .faqliste{order:1}
@media(max-width:900px){
  .ablauf-2--links .vtl,.ablauf-2--links .ablauf-photo,
  .faqblock--rechts .faqblock__side,.faqblock--rechts .faqliste{order:0}
}

/* ============================================================
   Navigation mit Untermenüs (03.08.2026)
   Drei Ebenen: Catering → Nach Anlass → Firmenfeier.
   Aufklappen per Hover UND per Fokus — nur Hover wäre mit der
   Tastatur nicht bedienbar. Auf Touch übernimmt der Pfeil-Button.
   Klassennamen wie bei WordPress, damit ein echtes WP-Menü
   dasselbe CSS erbt.
   ============================================================ */
.nav__liste{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav__liste .menu-item{position:relative}
/* `nowrap`: Ein Menuepunkt mit Leerzeichen („Über uns") bricht sonst still
   in zwei Zeilen um, sobald die Leiste ein paar Pixel zu eng wird — der
   Rest sieht dabei normal aus, der Fehler ist schwer zuzuordnen. Lieber
   ein sichtbar zu langes Menue als ein heimlich zweizeiliges. */
.nav__liste > .menu-item > a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* Der Pfeil-Button: auf dem Desktop nur Anzeige, auf Touch das Bedienelement */
.nav__auf{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;margin-left:-6px;
  background:none;border:none;color:var(--wine-soft);cursor:pointer;
  transition:transform .22s ease,color .22s ease}
/* Chevron, nicht der Vollpfeil: Der gedrehte i-arrow wirkt neben Text
   zu schwer und liest sich wie ein Download-Zeichen. */
.nav__auf .ic{width:14px;height:14px;stroke-width:2.4;transition:transform .22s ease}
.menu-item:hover > .nav__auf .ic,.menu-item:focus-within > .nav__auf .ic{transform:translateY(1px)}
.menu-item:hover > .nav__auf,.menu-item:focus-within > .nav__auf{color:var(--wine)}

/* Ebene 2 — unter dem Punkt, Ebene 3 — seitlich daneben */
.nav .sub-menu{position:absolute;list-style:none;margin:0;padding:8px;
  min-width:248px;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 26px 54px -26px rgba(40,0,0,.34);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:70}
.nav__liste > .menu-item > .sub-menu{top:calc(100% + 6px);left:-8px}
.nav .sub-menu .sub-menu{top:-9px;left:calc(100% + 6px)}
.nav .menu-item:hover > .sub-menu,
.nav .menu-item:focus-within > .sub-menu,
.nav .menu-item.auf > .sub-menu{opacity:1;visibility:visible;transform:none}

/* Unsichtbare Brücke: Ohne sie klappt das Menü zu, sobald die Maus
   den Spalt zwischen Punkt und Untermenü überquert. */
.nav__liste > .menu-item.menu-item-has-children::after{content:"";position:absolute;
  left:0;right:0;top:100%;height:10px}

.nav .sub-menu a{display:block;padding:10px 13px;border-radius:9px;
  font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.nav .sub-menu a:hover,.nav .sub-menu a:focus-visible{background:var(--rose);color:var(--wine)}
.nav .sub-menu .menu-item-has-children > a{padding-right:34px}
.nav .sub-menu .nav__auf{position:absolute;right:8px;top:9px;margin:0}
.nav .sub-menu .nav__auf .ic{transform:rotate(-90deg)}
.nav .sub-menu .menu-item:hover > .nav__auf .ic,
.nav .sub-menu .menu-item:focus-within > .nav__auf .ic{transform:rotate(-90deg) translateY(1px)}

/* ── Schublade: Der Hover fällt weg, der Pfeil-Button übernimmt ──
   Umbruch mit dem Menü seit 22.09.2026 bei 1240px statt 760px. */
@media(max-width:1240px){
  .nav__liste{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav__liste .menu-item{position:static}
  .nav__liste > .menu-item > a,.nav .sub-menu a{
    display:block;font-size:17px;padding:14px 12px;
    border-bottom:1px solid var(--line);border-radius:0}
  .nav__auf{position:absolute;right:4px;top:8px;width:44px;height:44px;margin:0}
  .nav__liste .menu-item{position:relative}
  .nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;
    display:none;min-width:0;padding:0 0 0 14px;border:none;border-radius:0;
    box-shadow:none;background:transparent}
  .nav .menu-item.auf > .sub-menu{display:block}
  /* Auf Touch NICHT per Hover oeffnen — sonst klappt beim Scrollen alles auf */
  .nav .menu-item:hover > .sub-menu,.nav .menu-item:focus-within > .sub-menu{display:none}
  .nav .menu-item.auf > .sub-menu{display:block}
  .nav .sub-menu a{font-size:15.5px;padding:12px 10px}
  .nav__auf .ic,.nav .sub-menu .nav__auf .ic{transform:none}
  .menu-item.auf > .nav__auf .ic,
  .nav .sub-menu .menu-item.auf > .nav__auf .ic{transform:rotate(180deg)}
  .nav__liste > .menu-item.menu-item-has-children::after{display:none}
}

/* Mobile Schublade lag hinter dem Scrim — gemessen 03.08.2026.
   Der Header ist `position:sticky` mit z-index 60 und bildet damit einen
   eigenen Stapelkontext. Die z-index:80 der Schublade gilt nur INNERHALB
   dieses Kontexts und kommt gegen den Scrim (z-index 70, direktes Kind
   von body) nicht an. Folge: Jeder Tipp auf einen Menüpunkt traf den
   Scrim — und der schließt das Menü. Die mobile Navigation war damit
   praktisch unbedienbar.
   Fix: Solange das Menü offen ist, hebt sich der ganze Header über den
   Scrim. Body-Klasse UND :has, damit es nicht an einem der beiden hängt. */
body.nav-offen .hdr,
body:has(.nav.open) .hdr{z-index:90}

/* ============================================================
   ARTEN-DETAILSEITEN — Product Page (Fabian, 04.08.2026)
   „Sachlich, quasi fast schon eine Product Page. Viele Bilder.
   Bzw auch eine Gallerie oder einen Slider drinnen."
   ============================================================ */

/* Header-CTA: „Catering konfigurieren" brach auf 390 px auf zwei Zeilen
   und drueckte den Header auseinander. Auf Mobil steht dort „Konfigurator". */
.btn__kurz{display:none}
/* Ab 26.08.2026 greift die Kurzfassung schon bei 1180px statt erst bei 760:
   In dem Bereich dazwischen ist die Zeile zu eng fuer beides. Lieber der
   kuerzere Knopf als eine verschwundene Telefonnummer. */
@media(max-width:1180px){
  .hdr-cta .btn__lang{display:none}
  .hdr-cta .btn__kurz{display:inline}
}

/* ============================================================
   CATERING-KONFIGURATOR (/catering-konfigurator/)
   Vier Schritte, ein Formular. Ohne JS stehen alle Blöcke
   untereinander — das JS blendet nur ein und aus.
   Die Feldstile von `.kform` sind auf das dunkle Kontaktband
   gerechnet und hier unbrauchbar; deshalb eigene, helle.
   ============================================================ */
.konfig{max-width:none}

/* Fortschrittsleiste — erst sichtbar, wenn das JS läuft.
   Steht ausserhalb des Formulars und nimmt deshalb die volle Breite der
   Inhaltsspalte: Sechs Punkte in einer Zeile statt Umbruch (Fabian, 05.08.2026). */
.konfig__leiste{display:none;list-style:none;margin:0 0 46px;padding:0;gap:6px}
html.anim .konfig__leiste{display:flex}
.konfig__leiste li{display:flex;align-items:center;gap:9px;flex:1 1 0;min-width:0;
                   font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;
                   padding-bottom:12px;border-bottom:2px solid var(--line);transition:.25s}
.konfig__leiste li span{width:27px;height:27px;border-radius:50%;flex:none;display:grid;
                        place-items:center;font-size:12.5px;background:var(--paper-2);
                        color:var(--muted);border:1.5px solid var(--line);transition:.25s}
/* Erledigt: Weinrot umrandet mit weinroter Ziffer — wie eine abgehakte
   Station auf einer Zeitleiste. Der aktive Schritt ist gefüllt und damit
   klar unterscheidbar. */
.konfig__leiste li.fertig{color:var(--wine-soft);border-bottom-color:var(--wine-soft)}
.konfig__leiste li.fertig span{background:var(--rose);color:var(--wine);border-color:var(--wine-soft)}
.konfig__leiste li.an{color:var(--wine);border-bottom-color:var(--wine)}
.konfig__leiste li.an span{background:var(--wine);color:#fff;border-color:var(--wine);
                           box-shadow:0 0 0 4px var(--rose)}
@media(max-width:900px){
  .konfig__leiste{flex-wrap:wrap;gap:6px 10px}
  .konfig__leiste li{flex:1 1 30%;font-size:12.5px}
}
@media(max-width:520px){.konfig__leiste li{flex:1 1 45%}}

/* Schritt-Block */
.ks{border:0;margin:0;padding:0}
.ks + .ks{margin-top:52px}
html.anim .ks + .ks{margin-top:0}
.ks legend{display:block;width:100%;padding:0;font-family:var(--serif);color:var(--wine);
           font-size:clamp(24px,3vw,32px);font-weight:700;line-height:1.18;max-width:34ch}
.ks__nr{display:block;font-family:var(--sans);font-size:12.5px;font-weight:700;
        letter-spacing:.18em;text-transform:uppercase;color:var(--wine-soft);margin-bottom:10px}
.ks__hilfe{margin-top:12px;color:var(--ink-soft);max-width:68ch}
.ks__unter{font-size:17px;font-weight:700;margin-top:34px}

/* Auswahlkacheln — das eigentliche Bedienelement */
.kwahl{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.kwahl--schmal{grid-template-columns:repeat(3,1fr);margin-top:16px}
.kwahl__k{position:relative;display:block;cursor:pointer}
/* Der echte Input bleibt bedienbar und fokussierbar, nur unsichtbar —
   sonst verliert die Tastatur den Zugriff. */
.kwahl__k input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.kwahl__i{display:block;height:100%;background:#fff;border:1.5px solid var(--line);
          border-radius:var(--r);overflow:hidden;transition:.2s}
.kwahl__i--zeile{display:flex;align-items:center;gap:12px;padding:14px 17px}
.kwahl__i .ic{width:21px;height:21px;color:var(--wine);flex:none}
.kwahl__ph{display:block;height:104px;background:var(--rose);overflow:hidden}
.kwahl__ph img{width:100%;height:100%;object-fit:cover}
.kwahl--bild .kwahl__t{display:block;padding:14px 16px}
.kwahl__t{font-weight:600;font-size:15px;color:var(--ink);line-height:1.3}
.kwahl__k:hover .kwahl__i{border-color:var(--rose-line);transform:translateY(-2px)}
.kwahl__k input:focus-visible + .kwahl__i{outline:2px solid var(--wine);outline-offset:2px}
.kwahl__k input:checked + .kwahl__i{border-color:var(--wine);box-shadow:0 0 0 1px var(--wine)}
.kwahl__k input:checked + .kwahl__i .kwahl__t{color:var(--wine)}
@media(max-width:820px){.kwahl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.kwahl,.kwahl--schmal{grid-template-columns:1fr}}

/* ── Entwarnung ganz oben ─────────────────────────────────────
   Der häufigste Abbruchgrund bei Anfrageformularen ist nicht die Länge,
   sondern die Angst, etwas falsch zu machen. Deshalb prominent. */
.entwarnung{display:flex;gap:22px;align-items:flex-start;margin:34px 0 0;
            padding:26px 30px;background:var(--rose);border-radius:var(--r-lg);
            border:1px solid var(--rose-line)}
.entwarnung__ic{width:44px;height:44px;border-radius:50%;background:var(--wine);flex:none;
                display:grid;place-items:center}
.entwarnung__ic .ic{width:22px;height:22px;color:#fff;stroke-width:2.6}
.entwarnung h2{font-size:clamp(21px,2.4vw,26px);font-weight:700;line-height:1.2}
.entwarnung p{margin-top:10px;color:var(--ink-soft);font-size:15.5px;max-width:88ch}
@media(max-width:620px){
  .entwarnung{flex-direction:column;gap:16px;padding:24px 22px}
}

/* ── Saison-Umschaltung (Startseite) ──────────────────────────
   Zwei Reiter, zwei Spuren. Welche offen ist, entscheidet der Monat
   serverseitig; das Umschalten von Hand macht `main.js`. Ohne
   JavaScript bleibt die richtige Spur stehen — sie ist im Markup
   bereits geöffnet. */
/* ═══ Rechtstexte (Impressum · Datenschutz · Cookie-Richtlinien) ═══
   Die Klassen kommen aus dem Legal-Template, hatten aber bis 02.09.2026
   keine einzige Regel: alles volle Fensterbreite, kein Abstand, keine
   Hierarchie. Aufgefallen war es nie, weil die Seiten leer waren.

   Die Satzbreite ist bewusst schmaler als im uebrigen Layout — juristischer
   Text wird gelesen, nicht ueberflogen, und bei 1440px waeren es sonst
   rund 200 Zeichen je Zeile. */

.ah-legal-header{background:var(--rose);padding:clamp(38px,5vw,66px) 0 clamp(30px,4vw,48px)}
.ah-legal-header__inner{max-width:1200px;margin:0 auto;padding:0 26px}
.ah-legal-header__title{font-family:var(--serif);color:var(--wine);
  font-size:clamp(32px,4.2vw,46px);line-height:1.12;margin:0}

.ah-legal-content{padding:clamp(36px,4.5vw,60px) 0 clamp(48px,6vw,80px)}
.ah-legal-content__inner{max-width:1200px;margin:0 auto;padding:0 26px}

.ah-legal-prose{max-width:70ch}
.ah-legal-prose h2{font-family:var(--serif);color:var(--wine);font-weight:600;
  font-size:clamp(20px,2.1vw,25px);line-height:1.25;
  margin:clamp(30px,3.4vw,44px) 0 12px}
.ah-legal-prose h2:first-child{margin-top:0}
.ah-legal-prose h3{font-family:var(--serif);color:var(--wine);font-weight:600;
  font-size:19px;margin:26px 0 8px}
.ah-legal-prose p{margin:0 0 14px;line-height:1.75;color:var(--ink-soft)}
.ah-legal-prose p:last-child{margin-bottom:0}
.ah-legal-prose strong{color:var(--ink);font-weight:600}
.ah-legal-prose a{color:var(--wine);text-decoration:underline;text-underline-offset:3px}
.ah-legal-prose a:hover{color:var(--wine-deep)}
.ah-legal-prose ul,.ah-legal-prose ol{margin:0 0 16px;padding-left:22px;
  line-height:1.75;color:var(--ink-soft)}
.ah-legal-prose li{margin-bottom:6px}
.ah-legal-prose code{font-size:.93em;background:var(--rose);padding:2px 6px;
  border-radius:5px;color:var(--wine)}

@media(max-width:560px){
  .ah-legal-prose{max-width:none}
}

/* Rechtslinks im Fuss: dieselbe Groesse wie die uebrige Fusszeile, aber
   unterstrichen — sie sind Pflichtangaben und sollen als Links erkennbar
   sein, ohne die Zeile zu dominieren. */
.ft-recht a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ft-recht a:hover{color:var(--wine)}

/* Zwischenueberschrift nach einer Merkmalsliste. Ohne Abstand klebt die
   34px-Zeile an den Haekchen — gemessen auf der Catering-Seite im
   Abschnitt „Wo wir liefern", 26.08.2026. */
.h3-abstand{margin-top:clamp(30px,3.5vw,46px)}

/* Zwei Teamfotos nebeneinander, gleiche Hoehe. Das eine ist hochkant,
   das andere quer — `object-fit:cover` gleicht das aus, statt eines der
   beiden zu verzerren. */
/* Das Team bei der Arbeit: acht Aufnahmen in Spalten statt in Zellen.
   Vorher standen zwei davon in einem 4:3-Raster, obwohl eines hochkant
   ist -- da fiel oben und unten je ein Viertel weg (Fabian, 03.09.2026).
   Im Masonry behaelt jedes Bild sein eigenes Format. */
.teamgalerie{column-count:4;column-gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(28px,3.5vw,44px)}
.teamgalerie figure{margin:0 0 clamp(12px,1.4vw,18px);break-inside:avoid;
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 22px 46px -32px rgba(60,0,0,.45)}
.teamgalerie img{width:100%;height:auto;display:block}
@media(max-width:1100px){.teamgalerie{column-count:3}}
@media(max-width:760px){.teamgalerie{column-count:2}}

/* Sabines Portrait an der Stelle ihres frueheren Monogramms, mit
   derselben runden Form und Groesse. */
/* ── Hochl Floristik: eigener Betrieb, eigene Farben ─────────────────
   Gesampelt vom Header auf hochl-floristik.at, nicht geraten. Das
   Bordeaux von Hochl hoert an dieser Kante auf, und das ist der Punkt
   des Abschnitts: nebenan, verwandt, aber nicht dasselbe Haus. */
.floristik-sec{--flor-gruen:#1B410F;--flor-blatt:#7DA143;--flor-creme:#F3F0E6;
  background:var(--flor-creme)}
.floristik-sec .nachbar{background:#fff;border:1px solid rgba(27,65,15,.14);
  border-radius:var(--r-lg);padding:clamp(26px,3.4vw,44px);
  box-shadow:0 26px 54px -34px rgba(27,65,15,.4);
  align-items:center}
.floristik-sec .eyebrow{color:var(--flor-blatt)}
.floristik-sec .nachbar__wer{color:var(--flor-gruen);font-weight:600}
.floristik-sec .nachbar__marke{margin:.35em 0 .7em}
.floristik-sec .nachbar__marke img{display:block;width:clamp(210px,24vw,290px);height:auto}
.floristik-sec .nachbar__btn{background:var(--flor-gruen);border-color:var(--flor-gruen);
  color:#fff}
.floristik-sec .nachbar__btn:hover{background:#12300A;border-color:#12300A}

/* Sabines Portrait: dieselbe Groesse wie die Fuehrungskarten, mit einem
   duennen Blattgruen-Ring statt des weinroten Schattens. */
.nachbar__bild{width:clamp(112px,12vw,158px);height:clamp(112px,12vw,158px);
  border-radius:50%;object-fit:cover;flex:none;border:5px solid #fff;
  box-shadow:0 20px 40px -24px rgba(27,65,15,.55),0 0 0 1px rgba(125,161,67,.5)}

/* ── Jahreszeiten-Slider (Startseite) ─────────────────────────
   Zwei Spuren auf einer Bahn, die seitlich wandert. Hiess bis
   26.08.2026 `.saison` — der Name gehoert aber der Kachelreihe auf
   /konditorei/ (weiter unten in dieser Datei), deren 3-Spalten-Grid
   Leiste und Spur nebeneinandergelegt hat.

   Welche Spur steht, haengt an der Klasse `.ist-winter` am Kasten.
   Die setzt der Server aus dem Monat und das Skript beim Blaettern —
   ohne JavaScript steht im November also trotzdem der Winter. */
.jahreszeit{margin-top:clamp(28px,4vw,44px)}

/* Eine Bedienzeile: Pfeil · Sommer · Winter · Pfeil. */
.jahreszeit__leiste{display:grid;grid-template-columns:auto 1fr auto;gap:14px;
  align-items:center;max-width:660px;margin:0 auto clamp(26px,3.5vw,38px)}
.jahreszeit__paar{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.jahreszeit__reiter{display:flex;align-items:center;justify-content:center;gap:12px;
  padding:14px 18px;border:1.5px solid var(--rose-line);border-radius:var(--r);
  background:#fff;color:var(--wine);cursor:pointer;font-family:var(--sans);
  transition:background .2s,border-color .2s,color .2s}
.jahreszeit__reiter .ic{width:22px;height:22px;flex:none}
.jahreszeit__reiter span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.jahreszeit__reiter b{font-family:var(--serif);font-size:17px;font-weight:600}
.jahreszeit__reiter small{font-size:12.5px;color:var(--muted)}
.jahreszeit__reiter:hover{border-color:var(--wine-soft)}
.jahreszeit:not(.ist-winter) .jahreszeit__reiter[data-spur=sommer],
.jahreszeit.ist-winter .jahreszeit__reiter[data-spur=winter]{
  background:var(--wine);border-color:var(--wine);color:#fff}
.jahreszeit:not(.ist-winter) .jahreszeit__reiter[data-spur=sommer] small,
.jahreszeit.ist-winter .jahreszeit__reiter[data-spur=winter] small{color:#F3D0D0}

/* Das Fenster ist innen gepolstert, damit der Schatten unter dem Bild
   nicht am Rand abgeschnitten wird; der negative Aussenrand nimmt die
   Polsterung wieder zurueck, damit die Spur so breit bleibt wie der
   Textkoerper. */
.jahreszeit__fenster{position:relative;overflow:hidden;
  padding:8px 0 34px;margin:-8px 0 -34px}
.jahreszeit__bahn{display:flex;
  transition:transform .5s cubic-bezier(.22,.75,.2,1)}
.jahreszeit.ist-winter .jahreszeit__bahn{transform:translateX(-100%)}
.jahreszeit__bahn.ohne-uebergang{transition:none}
@media(prefers-reduced-motion:reduce){.jahreszeit__bahn{transition:none}}

.jahreszeit__spur{flex:0 0 100%;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,4vw,56px);align-items:center}

.jahreszeit__pfeil{width:44px;height:44px;border-radius:50%;background:#fff;
  border:1.5px solid var(--rose-line);color:var(--wine);cursor:pointer;
  display:grid;place-items:center;transition:opacity .25s,border-color .2s,color .2s}
.jahreszeit__pfeil .ic{width:20px;height:20px;stroke-width:2.2}
.jahreszeit__pfeil:hover{border-color:var(--wine-soft)}
.jahreszeit__pfeil[data-blaettern=sommer] .ic{transform:rotate(90deg)}
.jahreszeit__pfeil[data-blaettern=winter] .ic{transform:rotate(-90deg)}
/* Der Pfeil, der nirgendwohin fuehrt, bleibt stehen und wird blass —
   sonst huepft die Zeile bei jedem Wechsel um seine Breite. */
.jahreszeit:not(.ist-winter) .jahreszeit__pfeil[data-blaettern=sommer],
.jahreszeit.ist-winter .jahreszeit__pfeil[data-blaettern=winter]{
  opacity:.3;pointer-events:none}

.jahreszeit__bild{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1;
  box-shadow:0 26px 54px -30px rgba(60,0,0,.4);transition:box-shadow .4s}
/* Der Schatten der weggeschobenen Spur faellt sonst ueber deren Kante ins
   Fenster und wird von `overflow:hidden` als senkrechter Streifen
   abgeschnitten. Sichtbar ist die Spur ohnehin nicht — also weg damit.
   Ueber die Klasse, nicht ueber das Skript: gilt auch ohne JavaScript. */
.jahreszeit:not(.ist-winter) .jahreszeit__spur[data-spur=winter] .jahreszeit__bild,
.jahreszeit.ist-winter .jahreszeit__spur[data-spur=sommer] .jahreszeit__bild{
  box-shadow:none}
.jahreszeit__bild img{width:100%;height:100%;object-fit:cover;display:block}
.jahreszeit__marke{display:inline-block;font-family:var(--sans);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--wine-soft)}
.jahreszeit__text h3{margin:10px 0 0;font-size:clamp(24px,3vw,32px);color:var(--wine)}
.jahreszeit__text p{margin:12px 0 0;color:var(--ink-soft);font-size:16px;line-height:1.7}
.jahreszeit__text .feature-list{margin-top:18px}
.jahreszeit__text .cta-row{margin-top:24px}

@media(max-width:780px){
  /* Auf dem Telefon wischt man — dort haengen die Pfeile nur zwischen den
     beiden gestapelten Reitern herum. Die Reiter sagen ohnehin an, was
     drueben liegt. */
  .jahreszeit__leiste{grid-template-columns:1fr;gap:10px;max-width:none}
  .jahreszeit__pfeil{display:none}
  .jahreszeit__paar{grid-template-columns:1fr;gap:10px}
  .jahreszeit__reiter{justify-content:flex-start;padding:12px 16px}
  .jahreszeit__spur{grid-template-columns:1fr;gap:22px;align-content:start}
  .jahreszeit__bild{aspect-ratio:4/3}
}

/* ── Textfelder mit wanderndem Label ──────────────────────────
   Ohne JavaScript, allein über :placeholder-shown. Deshalb trägt jedes
   Feld placeholder=" " — der eigentliche Hinweis steht UNTER dem Feld,
   weil ein Platzhalter genau dann verschwindet, wenn man ihn braucht.

   Bis 22.08.2026 hing dieser Block an `.konfig` und galt damit nur für die
   beiden Konfiguratoren. Auf der Startseite und auf /kontakt/ stand die
   Beschriftung stattdessen über dem Feld — drei Macharten auf einer
   Website. Jetzt gilt die Mechanik überall (Fabian: „in allen formularen
   ... Schrift zuerst innen und dann draußen“). */
.kf--float{position:relative}
/* Doppelte Klasse mit Absicht: `.konfig input{padding:12px 14px}` steht
   weiter unten in dieser Datei und ist gleich spezifisch. Nach dem
   Entsperren des Blocks (er hing vorher an `.konfig`) gewann deshalb die
   spätere Regel — gemessen 12px oben statt 23px, die ruhende Beschriftung
   lag im Wert. Das Makro gibt immer beide Klassen aus. */
.kf.kf--float input,
.kf.kf--float textarea{padding:23px 14px 9px}
/* Auswahllisten brauchen rechts Platz für den Pfeil — sonst läuft ein
   langer Eintrag darunter. */
.kf.kf--float select{padding:23px 38px 9px 14px}
.kf.kf--float textarea{padding-top:26px}
.kf--float label{position:absolute;left:15px;top:16px;margin:0;pointer-events:none;
     /* --muted statt #93807f: Die ruhende Beschriftung wirkt wie ein
        Platzhalter, ist aber Text. Gemessen lag sie bei 3,49:1 auf getoentem
        und 3,73:1 auf weissem Grund - beides unter 4,5 (20.08.2026). */
     font-size:16px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);
     transition:top .16s ease,font-size .16s ease,color .16s ease;
     max-width:calc(100% - 46px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* Gehoben: bei Fokus, bei Inhalt — und bei den Feldtypen, die immer etwas
   anzeigen (select, date, time kennen kein :placeholder-shown). */
.kf--float input:focus ~ label,
.kf--float input:not(:placeholder-shown) ~ label,
.kf--float textarea:focus ~ label,
.kf--float textarea:not(:placeholder-shown) ~ label,
.kf--fest label{top:8px;font-size:11px;font-weight:700;letter-spacing:.12em;
     text-transform:uppercase;color:var(--wine-soft)}
/* Lange Frage über einem Textfeld: ganz lesbar statt abgeschnitten
   (Fabian, 23.09.2026). Bei einzeiligen Feldern bleibt es beim Kürzen mit
   Auslassungspunkten, dort ist kein Platz. Das Textfeld hat ihn, deshalb
   bricht die ruhende Beschriftung hier um. Die gehobene Fassung darf das
   auch, dafür hat das Feld oben mehr Luft. */
.kf--bereich label{white-space:normal;text-overflow:clip;line-height:1.3;
  max-width:calc(100% - 30px)}
/* Gehoben ohne Versalien und ohne Sperrung, nur bei diesem Feldtyp: In
   Versalien mit .12em braucht dieselbe Frage am Handy drei Zeilen und legt
   sich über den getippten Text. Klein und ungesperrt bleibt es eine Zeile. */
.kf--bereich textarea:focus ~ label,
.kf--bereich textarea:not(:placeholder-shown) ~ label{font-size:12px;
  font-weight:600;letter-spacing:.02em;text-transform:none;line-height:1.25}
.kf.kf--bereich textarea{padding-top:32px}
@media(max-width:760px){
  .kf.kf--bereich textarea{padding-top:46px;min-height:132px}
}
.kf__hinweis{display:block;margin-top:7px;font-size:13px;color:var(--muted);line-height:1.45}
.konfig .req{color:var(--wine)}

/* Dieselbe Mechanik auf dem Bordeaux-Band der Startseite — nur
   eingefärbt. Die ruhende Beschriftung muss auf #660000 lesbar bleiben,
   deshalb kein halbtransparentes Weiß, sondern ein gemessener Ton. */
.kform .kf--float label{color:#E4B9B9}
.kform .kf--float input:focus ~ label,
.kform .kf--float input:not(:placeholder-shown) ~ label,
.kform .kf--float textarea:focus ~ label,
.kform .kf--float textarea:not(:placeholder-shown) ~ label,
.kform .kf--fest label{color:#FFC9C9}
.kform .kf__hinweis{color:#E8B9B9}
.konfig input,.konfig select,.konfig textarea{width:100%;background:#fff;
      border:1.5px solid var(--line);border-radius:var(--r);padding:12px 14px;color:var(--ink);
      font-family:var(--sans);font-size:16px;line-height:1.5;transition:border-color .2s}
.konfig input:focus,.konfig select:focus,.konfig textarea:focus{outline:none;border-color:var(--wine)}
.konfig textarea{resize:vertical;min-height:104px}
.konfig ::placeholder{color:#9c8a8a}
.konfig select{appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23660000' stroke-width='2'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px}
.konfig .kcheck{display:flex;gap:12px;align-items:flex-start;margin-top:28px;
                font-size:14.5px;color:var(--ink-soft);line-height:1.55}
.konfig .kcheck input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--wine)}
.konfig .kcheck a{color:var(--wine);text-decoration:underline;text-underline-offset:2px}

/* Bedingte Bloecke. Ohne JS stehen sie offen — das kostet Platz,
   aber kein Feld geht verloren. */
html.anim .kbedingt[hidden]{display:none}
.kbedingt{margin-top:4px}

/* Der Ausklapp-Schalter fuer die Rechnungsdaten ist eine Bedienung,
   keine Zustimmung — deshalb etwas praesenter als die Datenschutzzeile. */
.kschalter{margin-top:30px;padding:15px 18px;background:var(--paper-2);
           border:1.5px solid var(--line);border-radius:var(--r);font-weight:600;color:var(--ink)}
.kschalter:hover{border-color:var(--rose-line)}

/* „Anderer Anlass": eigene Zeile über die volle Breite. Als kleine
   Textkachel neben sechs Bildkarten war der Punkt leicht zu übersehen
   (Fabian, 05.08.2026). Gestrichelter Rahmen, weil es die Auswahl ist,
   bei der man selbst etwas hinschreibt. */
.kanderer{display:block;margin-top:14px}
.kanderer .kwahl__i{border-style:dashed;padding:17px 19px}
.kanderer .kwahl__t{display:block}
/* Unterzeile in jeder Auswahlkarte — nicht nur bei „Anderer Anlass".
   Die Getränkegruppen brauchen sie, seit Hochl klargestellt hat, was in
   der alkoholfreien Standardauswahl steckt (05.08.2026). */
.kwahl__t small{display:block;font-weight:400;font-size:13px;
                color:var(--muted);margin-top:3px;line-height:1.4;
                white-space:normal}
.kanderer .kwahl__t small{font-size:13.5px}
.kanderer input:checked + .kwahl__i{border-style:solid;background:var(--rose)}

/* ── Überblick auf dem letzten Schritt ────────────────────────
   Vorher standen dort nur die rohen Werte („90 · 10"), ohne zu sagen,
   was 90 und was 10 war. Jetzt Beschriftung und Wert je Zeile. */
.kueberblick{margin:26px 0 0;max-width:960px;padding:0;background:var(--paper-2);
             border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.kueberblick:empty{display:none}
.kueberblick .kub__gruppe{padding:20px 26px;border-top:1px solid var(--line)}
.kueberblick .kub__gruppe:first-child{border-top:0}
.kueberblick .kub__kopf{display:flex;align-items:center;gap:10px;
                        font-family:var(--serif);font-weight:700;color:var(--wine);
                        font-size:16px;margin-bottom:12px}
.kueberblick .kub__kopf .ic{width:17px;height:17px;flex:none;color:var(--wine-soft);stroke-width:2}
.kueberblick .kub__z{display:grid;grid-template-columns:minmax(150px,34%) 1fr;gap:4px 18px;
                     padding:5px 0;align-items:baseline}
.kueberblick .kub__l{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
                     color:var(--muted);line-height:1.5}
.kueberblick .kub__w{color:var(--ink);line-height:1.5}
/* Mehrfachauswahlen als Chips — dann sieht man auf einen Blick, wie viel
   gewählt wurde, statt eine Aufzählung mit Mittelpunkten zu lesen. */
.kueberblick .kub__chips{display:flex;flex-wrap:wrap;gap:6px}
.kueberblick .kub__chips span{background:#fff;border:1px solid var(--rose-line);border-radius:999px;
                              padding:4px 11px;font-size:13.5px;color:var(--wine)}
.kueberblick .kub__leer{padding:20px 26px;color:var(--muted)}
@media(max-width:620px){.kueberblick .kub__z{grid-template-columns:1fr;gap:2px}}

/* ── Ernährung mit Personenzahl ───────────────────────────────
   Häkchen links, Zahlenfeld rechts daneben. Es erscheint erst mit dem
   Häkchen — vorher wäre es ein leeres Feld ohne Bezug. */
.kost{display:grid;gap:12px;margin-top:22px}
.kost__z{display:grid;grid-template-columns:1fr minmax(0,210px);gap:14px;align-items:start}
.kost__n{align-self:start}
.kost__n .kf{margin-top:0}
/* Die Spalte fuer „Fuer wie viele?" bleibt immer reserviert. Vorher fiel
   sie weg, solange nichts angehakt war — dadurch war die AKTIVE Zeile
   schmaler als die uebrigen, und die Liste sprang beim Anklicken
   (Fabian, 26.08.2026). */
@media(max-width:560px){.kost__z,.kost__z:has(.kost__n[hidden]){grid-template-columns:1fr}}

/* ── Plausibilitätshinweise auf dem letzten Schritt ────────────
   Keine Fehler, sondern Rückfragen. Deshalb bewusst freundlich und
   ohne rote Warnfarbe — es ist alles absendbar. */
.kpruefung{display:grid;gap:10px;margin-top:26px;max-width:960px}
.kpruefung:empty{display:none}
.kpruefung__h{display:flex;gap:12px;align-items:flex-start;padding:15px 18px;
              background:var(--paper-2);border:1px solid var(--rose-line);
              border-radius:var(--r);font-size:15px;color:var(--ink-soft);line-height:1.5}
.kpruefung__h .ic{width:19px;height:19px;flex:none;margin-top:2px;color:var(--wine-soft);stroke-width:2.2}
.kpruefung__h b{color:var(--wine);font-weight:700}

.konfig__nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:38px;
             padding-top:28px;border-top:1px solid var(--line)}
/* `.btn{display:inline-flex}` schlaegt das UA-`[hidden]{display:none}` —
   ohne diese Zeile standen „Zurück" und „Anfrage senden" schon auf
   Schritt 1 da, obwohl das JS sie korrekt auf hidden gesetzt hatte.
   Im DOM war alles richtig, sichtbar war es trotzdem. */
.konfig__nav .btn[hidden]{display:none}
.konfig__weiter{margin-left:auto}
.konfig__hinweis{margin-top:14px;font-size:13px;color:var(--muted)}
/* Turnstile: meist unsichtbar (interaction-only). Erscheint doch ein
   Kaestchen, steht es direkt ueber den Knoepfen. Der Hinweis erscheint
   nur, wenn jemand absendet, bevor die Pruefung fertig ist. */
.ts-feld{margin-top:16px;max-width:100%;overflow:hidden}
.ts-hinweis{margin:10px 0 0;font-size:14px;font-weight:600;line-height:1.5;color:var(--wine)}

.konfig__melde{max-width:760px;margin:0 auto;background:var(--rose);color:var(--ink);
               border-left-color:var(--wine);padding:26px 30px}
/* .kmsg ist ein Flexkasten. Hier stand deshalb „Danke, Ihre Anfrage ist
   bei uns." als 152 px schmale Spalte NEBEN dem Absatz statt darueber
   (gemessen 13.09.2026, beide Konfiguratoren). Die Danke-Karte ist ein
   Block, der Punkt davor gehoert nur zu den kurzen Meldungen. */
.kmsg.konfig__melde{display:block}
.kmsg.konfig__melde::before{content:none}
.konfig__melde b{display:block;font-family:var(--serif);color:var(--wine);font-size:21px;margin-bottom:8px}
.konfig__melde p{margin:0;color:var(--ink-soft)}

/* ── Sortiment: die Unterkategorien der Angebotsvorlage ───────
   Das Herzstück dieser Seiten. Karten statt Fließtext, weil hier
   Prüfbares steht (COPYWRITING §4: Aufzählungen nur für Prüfbares).
   Seit 04.08.2026 laufen die Karten IM Slider — Bild und Text der
   Gruppe stehen zusammen. */
.grp{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
     overflow:hidden;box-shadow:var(--shadow-sm);transition:.25s;
     flex:0 0 auto;width:min(340px,80vw);scroll-snap-align:start;
     display:flex;flex-direction:column}
.grp__ph{margin:0;height:158px;background:var(--rose);overflow:hidden;flex-shrink:0}
.grp__ph img{width:100%;height:100%;object-fit:cover;transition:.6s}
.grp:hover .grp__ph img{transform:scale(1.05)}
.grp__b{padding:18px 24px 18px}
.grp:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--rose-line)}
/* Laufende Nummer als ruhiges Ordnungszeichen — es ist eine echte
   Sequenz aus der Angebotsvorlage, keine Deko-Ziffer. */
/* Gemessen 04.08.2026: mit --rose-line stand die Ziffer bei 1,39:1 und war
   schlicht nicht zu sehen. Sie soll ordnen, also muss man sie lesen können. */
.grp__nr{font-family:var(--serif);font-size:12.5px;font-weight:700;letter-spacing:.14em;
         color:var(--muted);display:block;margin-bottom:9px}
.grp h3{font-size:20px;font-weight:700;line-height:1.2}
.grp p{margin-top:10px;color:var(--ink-soft);font-size:15px}
.grp__liste{list-style:none;margin:15px 0 0;padding:0;border-top:1px solid var(--line);padding-top:13px}
.grp__liste li{position:relative;padding-left:16px;font-size:14px;color:var(--muted);line-height:1.45;margin-top:5px}
.grp__liste li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
                       border-radius:50%;background:var(--wine-soft)}
/* „und viele mehr" ist kein Gericht, sondern die Ansage, dass die Liste
   weitergeht — deshalb ohne Punkt und kursiv abgesetzt. */
.grp__liste .grp__mehr{padding-left:0;font-style:italic;color:var(--wine-soft);margin-top:9px}
.grp__liste .grp__mehr::before{display:none}

/* Der Hinweis auf die volle Karte steht EINMAL unter dem Slider,
   nicht sechsmal in den Karten (Fabian, 04.08.2026). */
.sortiment__mehr{display:flex;align-items:center;justify-content:space-between;gap:26px;
                 flex-wrap:wrap;margin-top:34px;padding-top:28px;border-top:1px solid var(--rose-line)}
.sortiment__mehr p{margin:0;max-width:58ch;color:var(--ink-soft)}
@media(max-width:700px){.sortiment__mehr{flex-direction:column;align-items:flex-start}}

/* Beschriftung der Alternativen-Liste im Abgrenzungs-Block */
.feature-list__kopf{font-size:17px;font-weight:700;margin-top:26px;margin-bottom:-4px}

/* ── Bildstrecke: horizontaler Slider ohne Bibliothek ─────────
   scroll-snap macht die Arbeit, die Knöpfe schieben nur. Ohne JS
   bleibt es eine ganz normale Wischleiste — das ist der Rückfall. */
/* Gemessen 04.08.2026: Von der Sektionsoberkante bis zur Unterkante der
   ersten Karte waren es 1071 px, sichtbar sind auf einem 830er Fenster
   753. Man musste also scrollen, um eine Karte ganz zu sehen. Die drei
   Stellschrauben: weniger Luft oben, Pfeile neben die Überschrift statt
   darunter (der Umbruch allein kostete 78 px), flachere Karte. */
.strecke{overflow:hidden;padding-top:clamp(36px,3.6vw,38px)}
.strecke__kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 30px;flex-wrap:wrap}
/* Der Textblock darf schrumpfen, damit die Pfeile in derselben Zeile
   bleiben — vorher nahm er die volle Breite und schob sie nach unten. */
.strecke__kopf > div:first-child{flex:1 1 min(620px,100%)}
.strecke__kopf h2{font-size:clamp(28px,3.5vw,38px);font-weight:700;margin-top:12px}
.strecke__kopf .lead{margin-top:10px;max-width:62ch}
.strecke__nav{display:flex;gap:10px;flex-shrink:0;margin-left:auto}
/* Rahmen in Weinrot statt Rosé: Der Knopf trägt nur ein Icon, also ist der
   Kreis sein Umriss. Gemessen 1,39:1 mit --rose-line, jetzt deutlich über
   den 3:1, die ein Bedienelement braucht. */
.strecke__btn{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--wine-soft);
              background:#fff;color:var(--wine);display:grid;place-items:center;cursor:pointer;transition:.22s}
.strecke__btn:hover{background:var(--wine);border-color:var(--wine);color:#fff}
.strecke__btn[disabled]{opacity:.34;cursor:default}
.strecke__btn[disabled]:hover{background:#fff;border-color:var(--wine-soft);color:var(--wine)}
.strecke__btn .ic{width:20px;height:20px;stroke-width:2.2}
.strecke__btn[data-richtung="-1"] .ic{transform:rotate(90deg)}
.strecke__btn[data-richtung="1"] .ic{transform:rotate(-90deg)}
/* Die Bahn läuft bewusst über die Wrap-Kante hinaus: das angeschnittene
   nächste Bild zeigt, dass es weitergeht. */
/* scroll-padding ist hier kein Feinschliff, sondern der Grund, warum
   der Rand überhaupt zu sehen ist: Ohne sie rastet die erste Karte am
   Rand des Scrollports ein, und der Browser scrollt beim Laden über die
   gesamte linke Innenabstandsfläche hinweg — gemessen scrollLeft 386
   auf einem 1920er Fenster. Die Bahn sah dann randlos aus. */
.strecke__bahn{display:flex;gap:16px;margin-top:20px;overflow-x:auto;scroll-snap-type:x mandatory;
               scroll-behavior:smooth;padding:4px calc((100vw - var(--wrap))/2 + 26px) 24px;
               scroll-padding-inline:calc((100vw - var(--wrap))/2 + 26px);
               scrollbar-width:none}
.strecke__bahn::-webkit-scrollbar{display:none}
.strecke__bahn:focus-visible{outline:2px solid var(--wine);outline-offset:-4px}
.strecke__bild{margin:0;flex:0 0 auto;width:min(420px,74vw);height:min(520px,64vh);
               border-radius:var(--r-lg);overflow:hidden;background:var(--rose);
               scroll-snap-align:start;box-shadow:var(--shadow-sm)}
.strecke__bild--gross{width:min(620px,86vw)}
.strecke__bild img{width:100%;height:100%;object-fit:cover;transition:.6s}
.strecke__bild:hover img{transform:scale(1.05)}
@media(max-width:1252px){
  .strecke__bahn{padding-left:26px;padding-right:26px;scroll-padding-inline:26px}
}

.einzelbild{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
            aspect-ratio:16/9;background:var(--rose)}
.einzelbild img{width:100%;height:100%;object-fit:cover}

/* ── Zugang-Band gespiegelt: Bild links, Text rechts ──────────
   Damit die Bildseiten über die Seite hinweg wechseln. */
.stage-grid--gespiegelt{grid-template-columns:.95fr 1.05fr}
.stage-grid--gespiegelt .stage-media{order:-1}
@media(max-width:900px){.stage-grid--gespiegelt .stage-media{order:0}}

/* ── Anlass-Verweis: schmale Zeile statt großer Karten ────────
   Auf der Arten-Achse tritt der Anlass bewusst zurück (Fabian,
   04.08.2026) — er bleibt als Weg, nimmt aber keine Bühne mehr. */
.anlasszeile{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,64px);align-items:center}
.anlasszeile__text h2{font-size:clamp(26px,3.4vw,36px);font-weight:700;margin-top:14px}
.anlasszeile__text p{margin-top:16px;color:var(--ink-soft)}
.anlasszeile__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.anlasszeile__liste a{display:flex;align-items:center;justify-content:space-between;gap:12px;
                      background:#fff;border:1px solid var(--line);border-radius:var(--r);
                      padding:15px 18px;font-weight:600;font-size:15px;color:var(--wine);transition:.22s}
.anlasszeile__liste a:hover{border-color:var(--wine);transform:translateX(3px)}
.anlasszeile__liste .ic{width:17px;height:17px;flex-shrink:0;stroke-width:2}
.anlasszeile__alle{background:var(--rose)!important;border-color:var(--rose-line)!important}
@media(max-width:900px){.anlasszeile{grid-template-columns:1fr;gap:32px}}
@media(max-width:520px){.anlasszeile__liste{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════════
 * KONDITOREI — Vitrine, Saisonband, Sortenseite
 *
 * Drei verschiedene Kartenformen mit Absicht: gross-bildgefuehrt fuer
 * Torten, kompakt fuer Kleinteiliges, quer auf dunklem Grund fuer
 * Saisonales. Dreimal dasselbe Raster waere bei einer Sortimentsseite
 * die naheliegendste Slop-Falle.
 * ══════════════════════════════════════════════════════════════════*/

.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.tgrid--klein{grid-template-columns:repeat(4,1fr);gap:20px;margin-top:26px}

.vit{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:.25s}
a.vit:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

/* `flex:none` ist Pflicht, nicht Kosmetik: Als schrumpfbares Item einer
   Spalten-Flexbox verliert der Kasten sein aspect-ratio und fiel auf 0-22px
   zusammen (gemessen 18.08.2026). Ohne diese Zeile sieht man von den Torten
   nur einen Streifen. */
.vit__ph{flex:none;aspect-ratio:4/3;overflow:hidden;background:var(--rose);
  display:flex;align-items:center;justify-content:center}
.vit__ph img{width:100%;height:100%;object-fit:cover;transition:.5s}
a.vit:hover .vit__ph img{transform:scale(1.05)}

/* Sorte ohne Foto: Initial statt Platzhalterloch. Kommt bei den
   wechselnden Kreationen vor, die bewusst kein festes Bild haben. */
.vit__leer{font-family:var(--serif);font-size:54px;font-weight:700;
  color:var(--rose-line);line-height:1;user-select:none}

.vit__body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.vit__body h3{font-size:20px;font-weight:700;line-height:1.25}
.vit__body p{margin-top:9px;color:var(--ink-soft);font-size:15px;line-height:1.55}
.vit__mehr{display:inline-flex;align-items:center;gap:8px;margin-top:auto;
  padding-top:16px;color:var(--wine);font-weight:700;font-size:14px;transition:gap .2s}
.vit__mehr .ic{width:16px;height:16px;transform:rotate(-90deg)}
a.vit:hover .vit__mehr{gap:12px}

.vit--klein .vit__ph{aspect-ratio:1/1}
.vit--klein .vit__body{padding:17px 18px 19px}
.vit--klein .vit__body h3{font-size:17px}
.vit--klein .vit__body p{margin-top:7px;font-size:14px}
.vit--klein .vit__leer{font-size:40px}

.tgrid__zwischen{margin-top:56px;padding-top:34px;border-top:1px solid var(--rose-line)}
.tgrid__zwischen h3{font-size:clamp(21px,2.6vw,27px);font-weight:700}
.tgrid__zwischen p{margin-top:8px;color:var(--ink-soft);max-width:60ch}
.tgrid__fuss{margin-top:34px;color:var(--ink-soft);font-size:15.5px;max-width:70ch}
.tgrid__fuss a{color:var(--wine);border-bottom:1px solid var(--rose-line);transition:border-color .2s}
.tgrid__fuss a:hover{border-bottom-color:var(--wine)}

/* ── Saisonband (auf .stage, also dunkel) ───────────────────────── */
.saison{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.sais{display:flex;flex-direction:column;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);
  overflow:hidden;transition:.25s}
a.sais:hover{background:rgba(255,255,255,.12);transform:translateY(-5px)}
.sais__ph{aspect-ratio:16/10;overflow:hidden;background:rgba(0,0,0,.2)}
.sais__ph img{width:100%;height:100%;object-fit:cover;transition:.5s}
a.sais:hover .sais__ph img{transform:scale(1.05)}
.sais__body{padding:20px 21px 23px}
.sais__zeit{display:inline-block;margin-bottom:10px;padding:5px 12px;border-radius:999px;
  background:#FFE1E1;color:var(--wine-deep);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.stage .sais__body h3{color:#fff;font-size:19px;font-weight:700}
.stage .sais__body p{margin-top:8px;color:#f0cccc;font-size:14.5px;line-height:1.55}

/* Wechselnde Sorten ohne Foto — eigene Zeile statt Loch im Bildraster. */
.wechsel{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,4vw,48px);
  align-items:center;margin-top:22px;padding:26px 28px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg)}
.stage .wechsel__text h3{margin-top:10px;color:#fff;font-size:21px;font-weight:700}
.stage .wechsel__text p{margin-top:9px;color:#f0cccc;font-size:14.5px;line-height:1.6;max-width:60ch}
.wechsel__liste{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0;padding:0;
  justify-content:flex-end}
.wechsel__liste li{padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);color:#fff;font-family:var(--serif);
  font-weight:600;font-size:15px}
@media(max-width:860px){
  .wechsel{grid-template-columns:1fr;gap:18px}
  .wechsel__liste{justify-content:flex-start}
}

/* ── Empfehlungs-Raster ─────────────────────────────────────────
   Ersetzt eine `feature-list` mit fetten Inline-Labels: Die brachen im
   Splittext in eine schmale Spalte um. Eigene Karten statt Aufzaehlung. */
.empf{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.empf__k{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 24px 26px;box-shadow:var(--shadow-sm)}
.empf__fall{display:block;font-size:12px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.empf__k h3{margin-top:11px;font-size:19px;font-weight:700;line-height:1.3}
.empf__k h3 a{color:var(--wine);border-bottom:1px solid var(--rose-line);transition:border-color .2s}
.empf__k h3 a:hover{border-bottom-color:var(--wine)}
.empf__k p{margin-top:10px;color:var(--ink-soft);font-size:15px;line-height:1.6}
.empf__fuss{display:flex;align-items:center;justify-content:space-between;gap:30px;
  margin-top:38px;padding-top:28px;border-top:1px solid var(--rose-line);flex-wrap:wrap}
.empf__fuss p{margin:0;max-width:62ch;color:var(--ink-soft)}
.empf__fuss a:not(.btn){color:var(--wine);border-bottom:1px solid var(--rose-line)}
.empf__fuss .cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* ── Sortenseite (Produktseite) ─────────────────────────────────
   Links Text, rechts eine mitlaufende Karte. Die Karte steht immer —
   auch ohne zweites Foto, sonst bleibt die halbe Seite leer. */
.torte{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:clamp(30px,4.5vw,56px);align-items:start}
.torte__h2{font-size:clamp(24px,3.2vw,33px);font-weight:700;margin-bottom:20px}
.torte__text > p{margin-top:18px;color:var(--ink-soft);font-size:16.5px;line-height:1.75}
.torte__text > p:first-of-type{font-size:18px;color:var(--ink)}
/* `:not(.btn)` ist Pflicht: ohne das faerbt die Fliesstext-Regel auch die
   Knopfbeschriftung weinrot — auf weinrotem Grund. Gemessener Kontrast war
   1.00, der Knopf sah aus wie eine leere Pille (18.08.2026). */
.torte__text a:not(.btn){color:var(--wine);border-bottom:1px solid var(--rose-line);transition:border-color .2s}
.torte__text a:not(.btn):hover{border-bottom-color:var(--wine)}

.tkarte{position:sticky;top:96px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.tkarte__ph{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--rose)}
.tkarte__ph img{width:100%;height:100%;object-fit:cover;display:block}
.tkarte__body{padding:26px 26px 28px}
.tkarte__eyebrow{display:block;font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.tkarte__body h2{margin-top:9px;font-size:26px;font-weight:700;line-height:1.2}
.tkarte__kurz{margin-top:11px;color:var(--ink-soft);font-size:15px;line-height:1.6}

.tkarte__daten{margin-top:22px;border-top:1px solid var(--line)}
.tkarte__daten > div{display:grid;grid-template-columns:104px 1fr;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.tkarte__daten dt{color:var(--muted);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding-top:3px}
.tkarte__daten dd{margin:0;color:var(--ink);font-size:15px;line-height:1.5}

.tkarte__cta{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.tkarte__cta .btn{width:100%;justify-content:center}
.tkarte__hinweis{margin-top:16px;color:var(--muted);font-size:13.5px;line-height:1.6}
.tkarte__hinweis a{color:var(--wine);border-bottom:1px solid var(--rose-line)}

@media(max-width:1040px){
  .tgrid{grid-template-columns:repeat(2,1fr)}
  .tgrid--klein{grid-template-columns:repeat(3,1fr)}
  .saison{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1040px){
  .empf{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .torte{grid-template-columns:1fr;gap:34px}
  .tkarte{position:static}
}
@media(max-width:620px){
  .tgrid,.tgrid--klein,.saison,.empf{grid-template-columns:1fr;gap:18px}
  .tkarte__daten > div{grid-template-columns:1fr;gap:4px}
  .empf__fuss .cta-row .btn{width:100%;justify-content:center}
}

/* ══════════════════════════════════════════════════════════════════
 * TORTEN-KONFIGURATOR
 *
 * Die Sortenkarte ist der Kern: Bild, Name, Kurzsatz und direkt darin
 * die Bestellzeile. Kein Dialog, kein zweiter Schritt — man setzt eine
 * Zahl und die Karte markiert sich. Bewusst KEINE Warenkorb-Ikonografie
 * (Icons, Badges, Plus-Minus-Kreise): Das ist eine Anfrage, kein Shop.
 * ══════════════════════════════════════════════════════════════════*/

.tk__gruppe{font-size:19px;font-weight:700;margin-top:38px}
.tk__gruppe:first-of-type{margin-top:26px}
.tk__hinweis{margin-top:6px;color:var(--muted);font-size:14.5px;max-width:70ch}

/* Raster mit gleich hohen Karten je Reihe.
   Kein `align-items:start`: Damit blieben kurze Karten oben haengen und
   neben einer hohen Karte klaffte eine Luecke. Und kein Spaltenfluss:
   Der packt zwar dicht, laesst die Karten aber gegeneinander versetzt
   stehen. Gleich hohe Reihen loesen beides. */
.tk{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:20px}
.tk--stueck{grid-template-columns:repeat(3,1fr);gap:16px}

/* Karte zugeklappt: nur Bild, Name, Beschreibung. Der ganze Kopf ist der
   Schalter — eine kleine Pfeilflaeche waere auf dem Telefon zu knapp. */
.tk__k{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:border-color .18s, box-shadow .18s}
/* `flex:1` auf dem Kopf: Wird die Karte durch eine hoehere Nachbarin
   gestreckt, waechst das Bild mit, statt unten weiss zu lassen. */
.tk__auf{flex:1}
.tk__k--gewaehlt{border-color:var(--wine);box-shadow:0 0 0 2px var(--rose)}

.tk__auf{display:grid;grid-template-columns:132px 1fr 34px;align-items:stretch;
  width:100%;padding:0;background:none;border:0;text-align:left;cursor:pointer;
  font:inherit;color:inherit}
.tk__k--klein .tk__auf{grid-template-columns:96px 1fr 30px}
.tk__auf:hover{background:var(--paper-2)}
.tk__auf:focus-visible{outline:3px solid var(--rose-line);outline-offset:-3px}

.tk__ph{position:relative;overflow:hidden;background:var(--rose);min-height:104px}
.tk__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Ersatzbuchstabe fuer Sorten ohne Foto. Vorher --rose-line auf --rose:
   1,23:1, also praktisch unsichtbar und wie ein Darstellungsfehler.
   Er ist Dekor (aria-hidden), soll aber als Absicht lesbar sein. */
.tk__leer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:34px;font-weight:700;color:#a86e6e}

.tk__b{display:block;padding:15px 4px 16px 17px;min-width:0}
.tk__name{display:block;font-family:var(--serif);font-size:17px;font-weight:700;
  line-height:1.25;color:var(--wine)}
.tk__kurz{display:block;margin-top:5px;color:var(--ink-soft);font-size:14px;line-height:1.5}
.tk__saison{display:inline-block;margin-top:8px;padding:3px 9px;border-radius:999px;
  background:var(--rose);color:var(--wine-deep);font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase}
/* Stand der zugeklappten Karte: „2× Groß" bzw. „100 Stück". */
.tk__stand{display:inline-block;margin-top:9px;padding:4px 11px;border-radius:999px;
  background:var(--wine);color:#fff;font-size:12.5px;font-weight:700}
/* Pflicht, nicht Kosmetik: Jede eigene `display`-Regel schlaegt die
   Browser-Regel fuer [hidden]. Ohne diese Zeile steht unter jeder Karte
   eine leere weinrote Pille (gesehen 20.08.2026 — derselbe Fehler wie
   zuvor bei .btn[hidden]). */
.tk__stand[hidden]{display:none}

/* Plus/Minus statt Pfeil: sagt „hier kommt etwas dazu", nicht „hier geht es weiter". */
.tk__zeichen{position:relative;align-self:center;width:20px;height:20px;
  justify-self:center;flex:none}
.tk__zeichen::before,.tk__zeichen::after{content:"";position:absolute;left:2px;top:9px;
  width:16px;height:2px;background:var(--wine);border-radius:2px;transition:transform .2s}
.tk__zeichen::after{transform:rotate(90deg)}
.tk__k--offen .tk__zeichen::after{transform:rotate(0)}

/* Aufgeklappter Bereich */
.tk__wahl{padding:2px 17px 16px;border-top:1px solid var(--line);
  background:var(--paper-2)}
.tk__gr{display:flex;gap:8px;margin-top:14px}
.tk__gropt{flex:1;min-width:0;cursor:pointer;position:relative}
.tk__gropt input{position:absolute;opacity:0;width:0;height:0}
.tk__gropt > span{display:block;padding:8px 10px;border:1px solid var(--line);
  border-radius:10px;background:#fff;font-size:13.5px;font-weight:700;text-align:center}
.tk__gropt > span small{display:block;margin-top:3px;font-weight:400;font-size:11px;
  color:var(--muted);line-height:1.35}
.tk__gropt > span b{color:var(--wine)}
.tk__gropt input:checked + span{border-color:var(--wine);background:var(--rose);color:var(--wine-deep)}
.tk__gropt input:focus-visible + span{outline:3px solid var(--rose-line);outline-offset:2px}

.tk__fuss{display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;margin-top:14px;flex-wrap:wrap}
/* min-height 44: Als reiner Textknopf war die Trefferflaeche 18 px hoch. */
.tk__weg{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;
  padding:4px 2px;color:var(--muted);font:inherit;
  font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tk__weg:hover{color:var(--wine)}

.tk__anz{flex:none}
.tk__anz label{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.tk__anz input{width:78px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-weight:700;text-align:center;background:#fff;color:var(--ink)}
.tk__anz input:focus-visible{outline:3px solid var(--rose-line);outline-offset:1px;border-color:var(--wine)}
.tk__stkpreis{display:block;margin-top:5px;font-size:12px;color:var(--wine)}

/* Eigene Wunschtorte — bewusst anders als die Sortenkarten: gestrichelt,
   volle Breite. Sie ist der Ausweg, nicht die 19. Sorte. */
.tk__eigen{margin-top:34px;padding:22px 24px;border:2px dashed var(--rose-line);
  border-radius:var(--r-lg);background:var(--paper-2)}
.tk__eigenkopf{display:flex;align-items:flex-start;gap:13px;cursor:pointer}
.tk__eigenkopf input{margin-top:3px;width:19px;height:19px;flex:none;accent-color:var(--wine)}
.tk__eigenkopf b{display:block;font-size:17px}
.tk__eigenkopf small{display:block;margin-top:4px;color:var(--ink-soft);font-size:14.5px;line-height:1.5}
.tk__eigen .kbedingt{margin-top:18px}

/* Zusatzwünsche: einspaltige Liste statt Kachelraster — jede Zeile kann
   ein Eingabefeld ausklappen, nebeneinander würde das springen. */
.kbedingt--extra{padding:0 0 16px 42px;max-width:420px}

/* Warenkorb-Leiste */
.tkorb{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-top:22px;padding:14px 20px;border-radius:var(--r);
  background:var(--rose);color:var(--wine-deep)}
.tkorb__zahl{font-weight:700;flex:none}
.tkorb__zahl b{font-size:19px}
.tkorb__text{font-size:14.5px;color:var(--ink-soft);min-width:0}

/* Der Kasten hat selbst `padding:0` — ohne diese Regel klebt die
   Ueberschrift am Rand und wird von der Rundung angeschnitten. */
.kueberblick > h3{padding:18px 26px 0;font-size:19px;font-weight:700;color:var(--wine)}
.kueberblick__inhalt{padding:14px 26px 24px}
.kueberblick__inhalt h4{margin-top:18px;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kueberblick__inhalt h4:first-child{margin-top:0}
.kueberblick__inhalt > p{margin-top:8px;color:var(--ink)}
.kueberblick__liste{list-style:none;margin:8px 0 0;padding:0}
.kueberblick__liste li{padding:7px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.kueberblick__liste li:last-child{border-bottom:0}
.kueberblick__leer{color:var(--muted)}
.konfig__klein{margin-top:16px;color:var(--muted);font-size:13.5px;line-height:1.6}

@media(max-width:1040px){
  .tk--stueck{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .tk{grid-template-columns:1fr}
}
@media(max-width:560px){
  .tk--stueck{grid-template-columns:1fr}
  .tk__k,.tk__k--klein{grid-template-columns:88px 1fr}
  .tk__wahl{gap:10px}
  .tk__gr{flex:1 1 100%}
  .kbedingt--extra{padding-left:0}
}

/* ── Verzierung (Torten-Konfigurator, Schritt 2) ─────────────────────
   Zehn Zusatzwuensche als Kacheln. Eigenes Kaestchen statt System-
   Checkbox, weil die Kachel als Ganzes anklickbar sein soll. */
/* Spalten statt Raster: Klappt eine Kachel ihr Mengenfeld aus, wird im
   starren Raster die Nachbarzeile mitgezogen und es entstehen grosse
   Loecher. Mehrspaltiger Textfluss packt die Kacheln dicht.
   `display:inline-block` + `width:100%` ist der uebliche Kniff, damit
   eine Kachel nicht mitten im Spaltenumbruch zerrissen wird. */
.vz{column-count:2;column-gap:14px;margin-top:24px}
.vz__k{display:inline-block;width:100%;margin-bottom:14px;break-inside:avoid;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .18s, box-shadow .18s}
.vz__k:hover{border-color:var(--rose-line)}
.vz__k--an{border-color:var(--wine);box-shadow:0 0 0 1px var(--wine)}

.vz__kopf{display:grid;grid-template-columns:24px 1fr;gap:13px;
  padding:15px 17px;cursor:pointer;align-items:start}
.vz__kopf input{position:absolute;opacity:0;width:0;height:0}

/* Kaestchen mit Haken — der Haken ist ein gedrehtes L aus zwei Raendern. */
.vz__box{width:22px;height:22px;border:1.5px solid var(--line);border-radius:6px;
  background:#fff;position:relative;margin-top:1px;transition:.15s}
.vz__box::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);
  transition:transform .15s}
.vz__k--an .vz__box{background:var(--wine);border-color:var(--wine)}
.vz__k--an .vz__box::after{transform:rotate(45deg) scale(1)}
.vz__kopf input:focus-visible ~ .vz__box{outline:3px solid var(--rose-line);outline-offset:2px}

.vz__txt{min-width:0}
.vz__name{display:block;font-weight:700;font-size:15.5px;line-height:1.3;color:var(--ink)}
.vz__k--an .vz__name{color:var(--wine-deep)}
.vz__preis{display:inline-block;margin-top:5px;padding:2px 9px;border-radius:999px;
  background:var(--rose);color:var(--wine-deep);font-size:13px;font-weight:700}
.vz__preis span{font-weight:400;opacity:.8}
.vz__hinweis{display:block;margin-top:7px;color:var(--muted);font-size:13px;line-height:1.5}

/* Mengen- oder Textfeld: ausserhalb des <label>, damit ein Klick hinein
   die Auswahl nicht wieder abschaltet. */
.vz__feld{padding:0 17px 15px;background:var(--paper-2);
  border-top:1px solid var(--rose-line)}
.vz__feld .kf{margin-top:14px}
.vz__feld[hidden]{display:none}

@media(max-width:760px){
  .vz{column-count:1}
}

/* Preise im Torten-Konfigurator */
.tkorb__summe{margin-left:auto;text-align:right;flex:none}
.tkorb__summe span{display:block;font-size:19px;font-weight:700;color:var(--wine-deep)}
.tkorb__summe small{display:block;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.kueberblick__liste li{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.kueberblick__liste li > span{min-width:0}
.kueberblick__liste li > b{flex:none;color:var(--wine);font-variant-numeric:tabular-nums}
.kueberblick__summe{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  margin-top:16px;padding-top:14px;border-top:2px solid var(--rose-line)}
.kueberblick__summe span{font-weight:700}
.kueberblick__summe b{font-size:21px;color:var(--wine);font-variant-numeric:tabular-nums}
.kueberblick__fuss{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.5}

/* ── Hinweis auf Platzhalterinhalte ────────────────────────────────────
   Steht auf jeder Seite, deren Texte erfunden sind. Bewusst als Band ueber
   die volle Breite und in Bordeaux auf Rose: Wer prueft, soll nicht suchen
   muessen, was Entwurf ist. Faellt weg, sobald echte Angaben da sind. */
.fiktiv{background:var(--rose);border-bottom:1px solid var(--rose-line)}
.fiktiv p{display:flex;gap:12px;align-items:flex-start;max-width:70ch;
  margin:0;padding:16px 0;font-size:14.5px;line-height:1.6;color:var(--wine)}
.fiktiv .ic{flex:none;width:19px;height:19px;margin-top:2px;color:var(--wine)}
.fiktiv b{font-weight:700}

/* ── Personen (Über uns, Team) ─────────────────────────────────────────
   Kein Portraitfoto, solange keines existiert: Ein Stockgesicht unter einem
   Namen behauptet eine Person. Stattdessen die Initialen als Monogramm —
   das Bild tritt spaeter an dieselbe Stelle. */
.pgrid{list-style:none;margin:34px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
/* `1fr` als Obergrenze zog zwei Personen auf halbe Seitenbreite auseinander.
   Mit einer festen Obergrenze bleiben die Karten gleich gross, egal ob zwei
   oder acht in der Gruppe stehen — sie ruecken zusammen statt zu wachsen. */
.pgrid--breit{grid-template-columns:repeat(auto-fit,minmax(232px,286px));
  justify-content:center;margin-top:30px}
.pkarte{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px;text-align:center;transition:border-color .2s,box-shadow .2s}
.pkarte:hover{border-color:var(--rose-line);box-shadow:0 22px 44px -30px rgba(102,0,0,.35)}
.pkarte__mono{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 16px;
  border-radius:50%;background:var(--rose);color:var(--wine);
  font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:.02em}
.pkarte__bild{display:block;width:64px;height:64px;margin:0 auto 16px;
  border-radius:50%;object-fit:cover}
/* Die Fuehrungskarten: bei zwei Personen ist Platz fuer ein echtes
   Portrait. 168 Pixel bei 300 Pixel Quelldatei -- mehr geht nicht, die
   Vorlagen auf hochl.com sind nicht groesser (Fabian, 03.09.2026). */
.pkarte--gross{padding:clamp(30px,3.4vw,44px) clamp(24px,3vw,36px)}
.pkarte--gross .pkarte__mono,
.pkarte--gross .pkarte__bild{width:clamp(120px,13vw,168px);height:clamp(120px,13vw,168px);
  font-size:44px;margin-bottom:clamp(18px,2vw,26px)}
.pkarte--gross .pkarte__bild{border:5px solid #fff;
  box-shadow:0 22px 44px -26px rgba(102,0,0,.5),0 0 0 1px var(--rose-line)}
.pkarte--gross .pkarte__name{font-size:clamp(20px,2.1vw,24px)}
.pkarte--gross .pkarte__rolle{margin-top:6px;font-size:12.5px}
.pkarte--gross .pkarte__satz{max-width:36ch;margin-inline:auto;font-size:15px}
.pkarte__name{display:block;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink)}
.pkarte__rolle{display:block;margin-top:4px;font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--wine-soft)}
.pkarte__satz{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}

/* ── Zeitleiste (Unsere Geschichte) ────────────────────────────────────
   Jahr links, Text rechts, eine durchgehende Linie dazwischen. Die Linie
   zeigt die Abfolge, statt sie zu behaupten — ein Kartenraster koennte das
   nicht. */
.zeitleiste{list-style:none;max-width:860px;margin:0 auto;padding:0}
.zstation{position:relative;display:grid;grid-template-columns:132px 1fr;gap:30px;
  padding:0 0 42px 0}
/* Linie in die MITTE der Luecke, nicht an die Kante der Jahresspalte:
   Bei left:131px lag sie direkt an der Jahreszahl und der Punkt darauf ragte
   in die Ueberschrift — gemessen ueberdeckte er auf allen sieben Stationen
   den ersten Buchstaben. Spalte 132px + halbe Luecke 15px = 147px. */
.zstation::before{content:"";position:absolute;left:146px;top:14px;bottom:-6px;
  width:1px;background:var(--rose-line)}
.zstation:last-child{padding-bottom:0}
.zstation:last-child::before{display:none}
.zstation__jahr{position:relative;font-family:var(--serif);font-size:clamp(24px,3vw,30px);
  font-weight:600;color:var(--wine);line-height:1.1;text-align:right;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* Der Punkt haengt an der STATION, nicht an der Jahreszahl: Als deren
   Pseudoelement ragte er 20px ueber die 132px breite Spalte hinaus und die
   Pruefung meldete jedes Mal einen Ueberlauf (152>132). An der Station sitzt
   er dort, wo er hingehoert — auf der Linie in der Luecke. */
.zstation::after{content:"";position:absolute;left:141px;top:calc(.45em + 8px);
  width:11px;height:11px;border-radius:50%;background:var(--wine);
  box-shadow:0 0 0 5px var(--paper)}
.sec-tint .zstation::after{box-shadow:0 0 0 5px var(--paper-2)}
.zstation__inhalt h2,.zstation__inhalt h3{font-size:clamp(19px,2.2vw,23px);margin:0 0 8px;line-height:1.3}
.zstation__inhalt p{margin:0;max-width:66ch;font-size:16px;line-height:1.7;color:var(--ink-soft)}
.zeitleiste--kurz .zstation{padding-bottom:32px}

/* ── Aktuelles ─────────────────────────────────────────────────────────
   Der neueste Beitrag gross und einzeln, aeltere als Liste. Ein Dreierraster
   waere bei einem Eintrag leer und bei zwanzig unlesbar. */
.ameldung{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4.5vw,58px);align-items:center}
/* Ohne Bild bleibt die zweite Spalte leer und der Text klebt in der linken
   Haelfte. Dann eine Spalte, mittig, auf Lesebreite begrenzt. */
.ameldung--ohnebild{grid-template-columns:1fr;max-width:74ch;margin:0 auto;text-align:center}
.ameldung--ohnebild .cta-row{justify-content:center}
.ameldung__bild{display:block;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);aspect-ratio:3/2;background:var(--rose)}
.ameldung__bild img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.ameldung__bild:hover img{transform:scale(1.03)}
.ameldung__text h2{font-size:clamp(27px,3.6vw,40px);margin:6px 0 0;line-height:1.15}
.ameldung__text h2 a{color:inherit}
.ameldung__text h2 a:hover{color:var(--wine)}
.ameldung__datum{margin:12px 0 0;font-size:14px;letter-spacing:.04em;color:var(--muted)}
.ameldung__text .lead{margin-top:14px}
.ameldung__text .cta-row{margin-top:26px}

.aliste{list-style:none;margin:30px 0 0;padding:0;max-width:900px}
.aliste li + li{border-top:1px solid var(--line)}
.aliste a{display:grid;grid-template-columns:132px 1fr auto;gap:22px;align-items:baseline;
  padding:20px 4px;color:var(--ink);transition:transform .2s,color .2s}
.aliste a:hover{transform:translateX(8px);color:var(--wine)}
.aliste__datum{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.aliste__titel{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.35}
.aliste__dazu{grid-column:2;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.aliste .ic{grid-row:1;grid-column:3;width:20px;height:20px;color:var(--wine)}

/* Fliesstext ohne Bild — Beitragsabschnitt, der nur Text hat. */
.fliess{max-width:70ch;margin:0 auto}
.fliess h2{font-size:clamp(25px,3.2vw,34px);margin:0 0 16px}
.fliess p{margin:0 0 16px;font-size:16.5px;line-height:1.75;color:var(--ink-soft)}
.fliess p:last-child{margin-bottom:0}

/* Nebenweg unter einem Abschluss-Band: Der Hauptweg ist der Knopf, der
   Anruf steht daneben — nicht als zweiter, gleich grosser Knopf. */
.cta-band__neben{margin-top:20px;font-size:15px;color:var(--ink-soft)}
.cta-band__neben a{color:var(--wine);border-bottom:1px solid var(--rose-line)}
.cta-band__neben a:hover{border-bottom-color:var(--wine)}

@media(max-width:900px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .ameldung{grid-template-columns:1fr;gap:24px}
}
/* Zwei Spalten passen am Handy nicht: 338px Platz, zwei Karten mit je 24px
   Innenrand lassen 108px fuer den Text — „GESCHÄFTSFÜHRUNG" in Versalien
   braucht 130px und lief hinaus (gemessen 409>338). */
@media(max-width:620px){
  .pgrid,.pgrid--breit{grid-template-columns:1fr}
  .pkarte{padding:22px 20px}
}
@media(max-width:640px){
  .zstation{grid-template-columns:1fr;gap:6px;padding-bottom:32px}
  .zstation::before,.zstation::after{display:none}
  .zstation__jahr{text-align:left}
  .aliste a{grid-template-columns:1fr auto;gap:6px 16px}
  .aliste__datum{grid-column:1;grid-row:1}
  .aliste__titel{grid-column:1;grid-row:2}
  .aliste__dazu{grid-column:1;grid-row:3}
  .aliste .ic{grid-row:2;grid-column:2}
}

/* ── Schwesterbetrieb (Floristik) ──────────────────────────────────────
   Eigener Block außerhalb der Teamliste: Die Floristik ist ein anderes
   Unternehmen mit eigener UID und eigenem Google-Profil an derselben
   Adresse. In derselben Liste würden beide Local-Signale verschwimmen. */
.nachbar{display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,3vw,40px);
  align-items:start;max-width:900px;margin:0 auto;
  background:#fff;border:1px solid var(--rose-line);border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,42px);box-shadow:var(--shadow-sm)}
.nachbar__mono{display:grid;place-items:center;width:78px;height:78px;flex:none;
  border-radius:50%;background:var(--rose);color:var(--wine);
  font-family:var(--serif);font-size:26px;font-weight:600}
.nachbar__text h2{font-size:clamp(23px,2.8vw,29px);margin:6px 0 12px}
.nachbar__text p{margin:0;max-width:62ch;font-size:16px;line-height:1.7;color:var(--ink-soft)}
.nachbar__wer{margin-top:12px !important;font-size:14px;color:var(--muted);
  letter-spacing:.03em}
.nachbar .cta-row{margin-top:22px}
@media(max-width:620px){
  .nachbar{grid-template-columns:1fr;text-align:left}
}

/* ── Beitragsraster (Aktuelles) ────────────────────────────────────────
   Kein Slider: Was hinter einem Pfeil liegt, wird nicht gelesen — und von
   Google nur halb gesehen. Das Raster zeigt alles und traegt drei Beitraege
   genauso wie dreissig. Die Art (Meldung / Aktion / Veranstaltung) sitzt auf
   dem Bild, damit man sie beim Ueberfliegen mitnimmt. */
.bgrid{list-style:none;margin:36px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bkarte{display:flex}
.bkarte > a{display:flex;flex-direction:column;width:100%;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;color:var(--ink);
  transition:border-color .2s,box-shadow .2s,transform .2s}
.bkarte > a:hover{border-color:var(--rose-line);transform:translateY(-3px);
  box-shadow:0 26px 50px -32px rgba(102,0,0,.42)}
.bkarte__bild{position:relative;display:block;aspect-ratio:8/5;background:var(--rose);overflow:hidden}
.bkarte__bild img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.bkarte > a:hover .bkarte__bild img{transform:scale(1.04)}
.bkarte__typ{position:absolute;left:14px;top:14px;
  background:rgba(255,255,255,.94);color:var(--wine);
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 12px;border-radius:999px;
  box-shadow:var(--shadow-sm)}
.bkarte__text{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.bkarte__datum{display:block;font-size:13px;color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:.03em}
.bkarte__titel{display:block;margin-top:8px;font-family:var(--serif);
  font-size:20px;font-weight:600;line-height:1.3;color:var(--ink)}
.bkarte > a:hover .bkarte__titel{color:var(--wine)}
.bkarte__dazu{display:block;margin-top:10px;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.bkarte__mehr{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--wine)}
.bkarte__mehr .ic{width:17px;height:17px;transition:transform .2s}
.bkarte > a:hover .bkarte__mehr .ic{transform:translateX(4px)}

@media(max-width:960px){ .bgrid{grid-template-columns:repeat(2,1fr);gap:22px} }
@media(max-width:640px){ .bgrid{grid-template-columns:1fr} }

/* ── Tenderist-Rahmen (Tages- und Wochenmenue) ─────────────────────────
   Reiner iframe, kein `TenderistEmbed.init()` — die Reservierung nutzt es
   bereits und ein zweiter Aufruf wuerde die Konfiguration ueberschreiben.
   Die Hoehe zieht main.js per postMessage nach; der Startwert im style-
   Attribut verhindert, dass der Block beim Laden aufschnellt. */
.tmenu{margin-top:32px}
/* KEINE Hoehen-Animation: Sie wurde hier probiert und wieder entfernt. Die
   Hoehe kommt per postMessage und aendert sich beim Laden und beim Blaettern
   zwischen den Wochen. Animiert man sie, laeuft der gesamte Seiteninhalt
   darunter eine Viertelsekunde lang mit — aus einem einzelnen Sprung wird
   250 ms wandernder Text. Transform hilft hier nicht: Es wuerde den
   iframe-Inhalt verzerren. Also ein sauberer Sprung. */
.tmenu__frame{display:block;width:100%;border:0;background:#fff;
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.tmenu--breit{max-width:none}
.tmenu--karte{margin-top:0;max-width:460px}
.tmenu--karte .tmenu__frame{box-shadow:var(--shadow)}
.tmenu__aus{margin:0;padding:22px;background:var(--rose);border-radius:var(--r-lg);
  color:var(--ink-soft);font-size:15px;line-height:1.6}

/* Tagesmenue-Karte neben Text: links der Grund, rechts die Karte. */
.mheute{display:grid;grid-template-columns:1fr minmax(320px,460px);
  gap:clamp(28px,4vw,56px);align-items:center}
.mheute__text h2{font-size:clamp(26px,3.4vw,36px);margin:6px 0 0}
.mheute__text p{margin-top:14px;color:var(--ink-soft)}
.mheute__text .cta-row{margin-top:26px}
@media(max-width:900px){
  .mheute{grid-template-columns:1fr}
  .tmenu--karte{max-width:none}
}

/* ── Konfigurator im Menue hervorheben ─────────────────────────────────
   Beide Konfiguratoren sind der Hauptweg des Betriebs. Im Untermenue liefen
   sie bisher als gleichrangiger letzter Punkt mit — jetzt abgesetzt, mit
   Trennlinie darueber und in Bordeaux. */
.sub-menu .menu-item--konfig{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.sub-menu .menu-item--konfig > a{color:var(--wine);font-weight:700}
.sub-menu .menu-item--konfig > a::after{content:"";display:inline-block;
  width:14px;height:14px;margin-left:8px;vertical-align:-2px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>") center/contain no-repeat;
  transition:transform .2s}
.sub-menu .menu-item--konfig > a:hover{background:var(--rose);color:var(--wine)}
.sub-menu .menu-item--konfig > a:hover::after{transform:translateX(3px)}


/* Tagesmenue in der Kartenspalte: Dort fehlen die 1.148 px der vollen Breite,
   also stehen Text und Karte untereinander. */
.mheute--schmal{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-sm);
  grid-template-columns:1fr minmax(280px,380px)}
.mheute--schmal h3{font-size:clamp(21px,2.4vw,26px);margin:6px 0 0}
@media(max-width:1180px){
  .mheute--schmal{grid-template-columns:1fr}
}


/* ── /kontakt/ — allgemeine Anfrageseite ───────────────────────────────
   Die Seite ist der Nebenweg (Fabian, 22.08.2026). Der Hauptweg ist das
   Catering, und der steht hier oben — vor dem Formular, nicht danach. */

/* Drei direkte Wege: anrufen, schreiben, vorbeikommen. Vor dem Formular,
   damit niemand erst daran vorbei muss, der nur die Nummer sucht. */
.kdirekt{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kdirekt__karte{display:block;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px 26px 24px;color:var(--ink);
  transition:border-color .2s,box-shadow .2s,transform .2s}
.kdirekt__karte:hover{border-color:var(--rose-line);transform:translateY(-2px);
  box-shadow:0 24px 46px -32px rgba(102,0,0,.4)}
.kdirekt__ic{display:grid;place-items:center;width:42px;height:42px;margin-bottom:16px;
  border-radius:50%;background:var(--rose);color:var(--wine)}
.kdirekt__ic .ic{width:20px;height:20px}
.kdirekt__was{display:block;font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wine-soft)}
.kdirekt__wert{display:block;margin-top:5px;font-family:var(--serif);font-size:21px;
  font-weight:600;color:var(--wine);line-height:1.25}
.kdirekt__karte:hover .kdirekt__wert{text-decoration:underline;text-underline-offset:.18em}
.kdirekt__dazu{display:block;margin-top:8px;font-size:14px;line-height:1.55;color:var(--muted)}

/* Die drei eigenen Strecken. Keine gleichrangigen Kacheln: Catering ist der
   Hauptweg und traegt deshalb den vollen Knopf und den kraeftigeren Grund. */
.wegliste{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:18px}
.wegkarte{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,2.4vw,30px);
  align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px clamp(22px,2.6vw,30px)}
.wegkarte--haupt{background:var(--rose);border-color:var(--rose-line)}
.wegkarte__ic{display:grid;place-items:center;width:48px;height:48px;flex:none;
  border-radius:50%;background:var(--rose);color:var(--wine)}
.wegkarte--haupt .wegkarte__ic{background:#fff}
.wegkarte__ic .ic{width:22px;height:22px}
.wegkarte__text h3{font-size:20px;margin:0 0 6px;line-height:1.3}
.wegkarte__text p{margin:0;max-width:62ch;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.wegkarte .btn{flex:none;white-space:nowrap}

/* Das Formular sitzt auf einem Bogen wie jede andere Karte der Seite.
   NICHT `.kform` — der Name war schon vergeben (Formular auf dem
   Bordeaux-Band, weisse Schrift, durchsichtige Felder). Auf dem weissen
   Bogen stand der Text damit weiss auf weiss. */
/* ── Anfrage mit Ansprechpartner ──────────────────────────────────────
   Das Formular allein beantwortet nicht, wo die Nachricht landet. Links
   steht deshalb die Person, rechts die Felder. Die Spalte ist bewusst
   schmal: Sie soll begleiten, nicht mit dem Formular konkurrieren. */
.anfragezeile{display:grid;grid-template-columns:300px 1fr;
  gap:clamp(24px,3.2vw,48px);align-items:start;
  max-width:1160px;margin:34px auto 0}
.anfragezeile .anfrageform{margin:0;max-width:none}
@media(max-width:900px){
  .anfragezeile{grid-template-columns:1fr;gap:22px}
}

.wermeldet{background:var(--rose);border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,32px);text-align:center;
  border:1px solid var(--rose-line)}
.wermeldet__bild{display:block;width:clamp(104px,11vw,132px);height:clamp(104px,11vw,132px);
  margin:0 auto 16px;border-radius:50%;object-fit:cover;border:5px solid #fff;
  box-shadow:0 18px 36px -22px rgba(102,0,0,.55)}
.wermeldet__vor{display:block;font-size:12.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--wine-soft)}
.wermeldet__name{display:block;margin-top:6px;font-family:var(--serif);
  font-size:21px;font-weight:600;color:var(--ink)}
.wermeldet__rolle{display:block;margin-top:3px;font-size:13.5px;color:var(--ink-soft)}
.wermeldet__satz{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.wermeldet__tel{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-weight:600;color:var(--wine);border-bottom:1px solid var(--rose-line)}
.wermeldet__tel .ic{width:16px;height:16px}
/* Die Zeile ist 28 px hoch, der Daumen braucht 44. Statt Abstände zu
   ändern, legt sich eine unsichtbare Fläche über die Zeile. Optik bleibt,
   die Berührungsfläche stimmt (gemessen 23.09.2026). */
.wermeldet__tel{position:relative}
.wermeldet__tel::after{content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px}
/* Auf dem Handy blieb der Block zuerst zweispaltig -- und weil jedes
   Kind eine eigene Rasterzelle bekam, stand „IHRE ANFRAGE LANDET BEI"
   in vier Zeilen neben dem Bild und die Telefonnummer in drei. Zentriert
   und einspaltig ist hier schlicht richtig. Nur schmaler wird es. */
@media(max-width:900px){
  .wermeldet{padding:24px 20px}
  .wermeldet__satz{max-width:42ch;margin-inline:auto}
}

.anfrageform{max-width:840px;margin:34px auto 0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(26px,3.4vw,44px);box-shadow:var(--shadow-sm)}
.anfrageform--aus p{margin:0;font-size:16px;line-height:1.7;color:var(--ink-soft)}
.anfrageform--aus a{color:var(--wine);border-bottom:1px solid var(--rose-line)}

/* JetFormBuilder bringt eigenes Markup mit und praktisch keine Gestaltung.
   Die Felder bekommen hier dieselbe Form wie im Konfigurator, damit die
   Seite nicht wie ein halbfertiges Plugin aussieht. */
.anfrageform .jet-form-builder__heading-desc,
.anfrageform legend{font-family:var(--serif);font-size:20px;font-weight:600;
  color:var(--wine);margin:0 0 20px;display:block}
.anfrageform .jet-form-builder-row,
.anfrageform .jet-form-builder__field-wrap{margin-bottom:18px}
.anfrageform .jet-form-builder__label,
.anfrageform label{display:block;margin-bottom:7px;font-family:var(--sans);
  font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--ink);
  text-transform:none}
.anfrageform .jet-form-builder__required{color:var(--wine)}
/* Masse identisch zu `.konfig` — dieselbe Rahmenstaerke, derselbe Radius,
   dieselbe Polsterung und Schriftgroesse. */
.anfrageform input[type="text"],
.anfrageform input[type="email"],
.anfrageform input[type="tel"],
.anfrageform input[type="number"],
.anfrageform input[type="date"],
.anfrageform select,
.anfrageform textarea{width:100%;background:#fff;color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--r);
  padding:12px 14px;font-family:var(--sans);font-size:16px;line-height:1.5;
  transition:border-color .2s}
.anfrageform input:focus,.anfrageform select:focus,.anfrageform textarea:focus{
  outline:none;border-color:var(--wine)}
.anfrageform textarea{resize:vertical;min-height:130px}

/* Wanderndes Label auch hier (22.08.2026). Zwei Unterschiede zum
   Konfigurator, beide von JetFormBuilder erzwungen:
     · Die Beschriftung ist ein <div> VOR dem Feld, kein <label> danach
       → statt `input ~ label` prüft `:has()` die ganze Zeile.
     · Sie ist kein <label for> → sie kann nicht fokussieren. Mit
       pointer-events:none geht der Klick durch sie hindurch ins Feld.
   Voraussetzung ist wie überall placeholder=" " — im Formular 2855
   gesetzt. Ohne Platzhalter trifft :placeholder-shown nie zu und die
   Beschriftung bliebe dauerhaft oben stehen. */
.anfrageform .field-type-text-field,
.anfrageform .field-type-textarea-field{position:relative}
.anfrageform .field-type-text-field .jet-form-builder__label,
.anfrageform .field-type-textarea-field .jet-form-builder__label{
  position:absolute;left:15px;top:16px;z-index:2;margin:0;pointer-events:none;
  font-family:var(--sans);font-size:16px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--muted);
  transition:top .16s ease,font-size .16s ease,color .16s ease;
  max-width:calc(100% - 46px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.anfrageform .field-type-text-field .jet-form-builder__label-text,
.anfrageform .field-type-textarea-field .jet-form-builder__label-text{
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.anfrageform .field-type-text-field input,
.anfrageform .field-type-textarea-field textarea{padding:23px 14px 9px}
.anfrageform .field-type-textarea-field textarea{padding-top:26px}
.anfrageform .field-type-text-field:has(input:focus) .jet-form-builder__label,
.anfrageform .field-type-text-field:has(input:not(:placeholder-shown)) .jet-form-builder__label,
.anfrageform .field-type-textarea-field:has(textarea:focus) .jet-form-builder__label,
.anfrageform .field-type-textarea-field:has(textarea:not(:placeholder-shown)) .jet-form-builder__label{
  top:8px;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--wine-soft)}
/* Abstände gleichmäßig und im Takt der Konfiguratoren (24px).
   Vorher: 46px zwischen den Zeilen, aber 75px nach dem Spalten-Block mit
   Vor- und Nachname — WordPress legt um `.wp-block-columns` eine eigene
   Block-Lücke obendrauf. Die drei Zeilen räumen die konkurrierenden
   Abstände ab und setzen einen einzigen. */
.anfrageform .wp-block-columns{margin-bottom:0;row-gap:0}
.anfrageform .jet-form-builder__field-wrap{margin-bottom:0}
.anfrageform .jet-form-builder-row{padding:0;margin-bottom:24px}
/* Der Hinweis steht unter dem Feld — dieselbe Zeile wie `.kf__hinweis`.
   JetFormBuilder packt ihn in ein <small>, das die Schrift auf 0,833em
   herunterzieht: gemessen 10,8px. Deshalb erbt das <small> hier. */
.anfrageform .jet-form-builder__desc{
  margin-top:7px;font-size:13px;color:var(--muted);line-height:1.45}
.anfrageform .jet-form-builder__desc small{font-size:inherit;line-height:inherit}
.anfrageform ::placeholder{color:var(--muted);opacity:.8}

/* Zustimmungsfeld: JFB setzt den Text als winzige Versalien in Rot — das sah
   aus wie eine Fehlermeldung. Hier wird daraus normaler Fliesstext. */
.anfrageform .jet-form-builder__field-wrap--checkbox,
.anfrageform .checkboxes-wrap{display:flex;gap:11px;align-items:flex-start}
.anfrageform input[type="checkbox"]{width:18px;height:18px;flex:none;margin-top:3px;
  accent-color:var(--wine)}
.anfrageform .jet-form-builder__field-wrap--checkbox label,
.anfrageform .checkboxes-wrap label{margin:0;font-size:14px;font-weight:400;
  line-height:1.55;color:var(--ink-soft);text-transform:none;letter-spacing:0}
/* JetFormBuilder legt Zustimmungstext und Kaestchen in eine Flex-Zeile, in
   der der Text nicht schrumpfen darf (Vorgabe min-width:auto). Am Handy lief
   er damit 443 px breit aus einem 284-px-Feld heraus und die Seite liess sich
   seitlich schieben (gemessen 22.08.2026). */
.anfrageform .jet-fb-form-block,
.anfrageform .jet-form-builder,
.anfrageform .jet-form-builder-row,
.anfrageform .jet-form-builder__field-wrap,
.anfrageform .jet-form-builder__desc,
.anfrageform .checkboxes-wrap{min-width:0;max-width:100%}
.anfrageform .jet-form-builder__field-wrap,
.anfrageform .checkboxes-wrap{flex-wrap:wrap}
.anfrageform .jet-form-builder__desc,
.anfrageform label{overflow-wrap:anywhere}
.anfrageform a{color:var(--wine);border-bottom:1px solid var(--rose-line)}
.anfrageform a:hover{border-bottom-color:var(--wine)}

/* Absendeknopf im Stil der Seite. */
.anfrageform button[type="submit"],
.anfrageform .jet-form-builder__submit{display:inline-flex;align-items:center;
  justify-content:center;gap:10px;margin-top:8px;
  padding:14px 26px;border:0;border-radius:999px;cursor:pointer;
  background:var(--wine);color:#fff;
  font-family:var(--sans);font-size:15.5px;font-weight:600;
  transition:background .18s,transform .18s}
.anfrageform button[type="submit"]:hover,
.anfrageform .jet-form-builder__submit:hover{background:var(--wine-deep);transform:translateY(-1px)}

/* Eigenes Formular statt JetFormBuilder (13.09.2026). Die Felder kommen
   aus partials/feld.twig, wie in den Konfiguratoren. Die JFB-Regeln oben
   greifen aber auf jedes <label> und jedes Textfeld in .anfrageform und
   sind gleich spezifisch und spaeter in der Datei. Ohne diese Zeilen stand
   die ruhende Beschriftung klein und fett im Feld, die Polsterung war die
   alte (12px statt 23px oben). Die JFB-Regeln bleiben, solange das
   Bewerbungsformular noch JetFormBuilder ist. */
.anfrageform .kf--float label{margin:0;font-size:16px;font-weight:400;
  letter-spacing:0;color:var(--muted)}
.anfrageform .kf.kf--float input,
.anfrageform .kf.kf--float textarea{padding:23px 14px 9px}
.anfrageform .kf.kf--float textarea{padding-top:26px}
.anfrageform > .kf:first-of-type{margin-top:0}
.anfrageform .kf.grid2 > .kf{margin-top:0}
.anfrageform .req{color:var(--wine)}
.anfrageform .kmsg{margin:0 0 24px}
.anfrageform .kcheck{display:flex;gap:12px;align-items:flex-start;margin:26px 0 0;
  font-size:14.5px;font-weight:400;line-height:1.55;letter-spacing:0;color:var(--ink-soft)}
.anfrageform .kcheck input{margin-top:2px}
.anfrageform button.anfrageform__senden{margin-top:28px}
.anfrageform__klein{margin:14px 0 0;font-size:13px;color:var(--muted)}
/* `.anfrageform input:focus{outline:none}` weiter oben trifft auch die
   Checkbox, und deren Rahmenfarbe zeigt der Browser nicht. Wer mit der
   Tastatur kommt, saehe nicht, wo er ist. */
.anfrageform input[type="checkbox"]:focus-visible{outline:2px solid var(--wine);outline-offset:2px}
/* Die Fehlermeldung bekommt beim Laden den Fokus (fuer Screenreader).
   Sie ist nicht bedienbar, ein Fokusrahmen waere nur Stoerung. */
.anfrageform .kmsg[tabindex]:focus{outline:none}
/* Danke-Zustand: Die Meldung steht an Stelle des Formulars. Die Karte
   zieht sich auf die Hoehe der Portraetkarte daneben und stellt den Text
   in die Mitte. Vorher war sie 188 px hoch neben 426 px und wirkte wie
   ein Rest. */
.anfrageform--danke{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
/* Nach dem Absenden springt die Seite direkt aufs Formular, nicht auf den
   Anfang der Section. Am Handy steht dort zuerst die Raphael-Karte, die
   Meldung laege sonst ausserhalb des Bildes. Der Abstand haelt sie unter
   dem klebenden Kopf frei. */
#anfrageformular,#anfragemeldung{scroll-margin-top:96px}
/* Beide bekommen beim Sprung den Fokus (fuer Screenreader), bedienbar
   sind sie nicht. Ein Fokusrahmen waere nur Stoerung. */
.anfrageform--danke:focus{outline:none}
.anfrageform__haken{display:inline-grid;place-items:center;width:52px;height:52px;
  margin-bottom:16px;border-radius:50%;background:var(--rose);color:var(--wine)}
.anfrageform__haken .ic{width:24px;height:24px}
.anfrageform--danke .kmsg{margin:0;display:block;border:0;padding:0;background:none;color:var(--ink-soft)}
.anfrageform--danke .kmsg::before{content:none}
.anfrageform--danke b{display:block;font-family:var(--serif);font-size:24px;font-weight:600;color:var(--wine);margin-bottom:10px}
.anfrageform--danke p{margin:0;font-size:16px;line-height:1.65}

/* Karte links, Adresse und Zeiten rechts. */
.kanfahrt{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr);
  gap:clamp(24px,3vw,40px);margin-top:34px;align-items:stretch}
.kanfahrt__karte{position:relative;min-height:420px;border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--line);background:var(--rose)}
.kanfahrt__karte iframe{position:absolute;inset:0;width:100%;height:100%;display:block}
.kanfahrt__text{display:grid;gap:20px;align-content:start}
.kanfahrt__text .resbox h3{font-size:20px;margin-bottom:14px}

@media(max-width:960px){
  .kdirekt{grid-template-columns:1fr}
  .kanfahrt{grid-template-columns:1fr}
  .kanfahrt__karte{min-height:320px}
  .wegkarte{grid-template-columns:auto 1fr;row-gap:16px}
  .wegkarte .btn{grid-column:1 / -1;justify-content:center}
}


/* ══════════════════════════════════════════════════════════════════
 * FINGERFOOD-PAKETE (/fingerfood-pakete/), 14.09.2026
 *
 * Das Raster IST Hochls Paketliste: vier Sorten nebeneinander, je drei
 * Größen untereinander. Senkrecht liest man eine Sorte, waagrecht
 * vergleicht man dieselbe Größe über alle Sorten. Deshalb stehen die
 * Größenzeilen unten bündig (margin-top:auto), auch wenn die
 * Beschreibungen verschieden lang sind.
 *
 * Die Menge steckt in der Größe selbst, wie beim Torten-Konfigurator ein
 * Zahlenfeld und kein Plus-Minus: Das ist eine Anfrage, kein Shop.
 * Umbrüche fürs Handy stehen RUCSS-fest im Twig.
 * ══════════════════════════════════════════════════════════════════*/
#pakete .konfig__leiste{scroll-margin-top:110px}
#paketmeldung,#paketdanke{scroll-margin-top:110px}
#paketmeldung:focus,#paketdanke:focus,#fpLeer:focus{outline:none}

/* Ohne JavaScript stehen alle Schritte offen. Mit JavaScript sollen sie
   das nicht kurz tun, bevor das Skript sie zuklappt: html.fpjs setzt ein
   Inline-Skript ganz oben, .fp--bereit das Paket-Skript. */
.fpjs #paketForm:not(.fp--bereit) .ks ~ .ks{display:none}

/* hidden muss hier IMMER gewinnen. .kmsg, .tkorb und .fe__anz setzen ein
   eigenes display und schlugen damit das Attribut: Die Meldung „noch kein
   Paket“ blieb nach der Auswahl stehen, und bei „für alle“ stand ein leeres
   Personenfeld (gesehen am 14.09.2026). */
#paketForm [hidden]{display:none!important}

/* Tippflächen mindestens 44 px (Critic, 14.09.2026). */
#paketForm .kcheck{min-height:44px;align-items:center}
.ks legend .ks__h:focus{outline:none}

/* Schritt-Titel als echte H2 in der Legende (sonst springt die Seite von
   H1 auf H3). Sie sollen aussehen wie die Legende der anderen
   Konfiguratoren, deshalb erben sie alles und bringen nichts Eigenes mit. */
.ks legend .ks__h{margin:0;padding:0;font:inherit;color:inherit;
  letter-spacing:inherit;text-transform:none;line-height:inherit}

/* Schritt 1 seit 14.09.2026 (Fabian): erst die Sorte antippen, dann
   erscheinen ihre Größen als 2x2-Raster. Die vierte Kachel ist „Andere
   Personenzahl“. Keine Anzahl mehr je Paket: Gäste zählt man in Personen,
   nicht in Paketen. Ohne JavaScript stehen alle Größen offen.
   Karte: Foto links neben Name und Text, die Größen darunter über die
   ganze Breite. Am Handy wird das Foto zum Vorschaubild (Twig). */
.fp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px;align-items:start}
.fp__sorte{display:grid;grid-template-columns:200px minmax(0,1fr);grid-template-areas:"bild kopf" "gr gr";
  min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .18s,box-shadow .18s}
.fp__sorte--an{border-color:var(--wine);box-shadow:0 0 0 2px var(--rose)}
/* Die ganze Karte schaltet an und ab (pakete.js), außer Größen und
   Personenfeld. */
.fp--bereit .fp__sorte{cursor:pointer}
.fp--bereit .fp__frei,.fp--bereit .fp__fehlt{cursor:auto}
.fp--bereit .fp__sorte:not(.fp__sorte--an):hover{border-color:var(--rose-line)}

/* Bilder absolut: Sonst gibt ein Hochkant-Foto der Zeile seine eigene
   Höhe vor. Der Bildoptimierer packt jedes img in ein picture, deshalb
   beide Fälle (siehe .ppak__ph--zwei). */
.fp__bild{grid-area:bild;position:relative;margin:0;min-height:200px;overflow:hidden;background:var(--rose)}
.fp__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fp__bild--zwei{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:3px;background:#fff}
.fp__bild--zwei > picture{position:relative;display:block;min-height:0;overflow:hidden}
/* height:auto, sonst ignoriert das Bild top/bottom und beide liegen
   200 px hoch übereinander (Critic, 14.09.2026, gemessen). */
.fp__bild--zwei > img{height:auto}
.fp__bild--zwei > img:first-of-type{bottom:calc(50% + 1.5px)}
.fp__bild--zwei > img:last-of-type{top:calc(50% + 1.5px)}
/* Gewählte Sorte: Haken auf dem Foto. Der Knopf heißt dann „Entfernen“,
   der Status steht also hier und am weinroten Rahmen. */
.fp__sorte--an .fp__bild::after{content:"";position:absolute;top:10px;left:10px;z-index:2;width:30px;height:30px;
  border-radius:50%;box-shadow:0 0 0 2px #fff;background:var(--wine) center/16px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.fp__sorte{scroll-margin-top:110px}

.fp__kopf{grid-area:kopf;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:18px 20px}
.fp__name{margin:0;font-family:var(--serif);font-size:20px;line-height:1.25;color:var(--ink)}
.fp__inhalt{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.fp__spanne{margin:10px 0 0;font-size:14.5px;font-weight:700;line-height:1.4;color:var(--wine)}

/* Auswählen / Ausgewählt: echtes Kontrollkästchen unter einem Knopf. */
.fp__wahl{position:relative;display:inline-flex;margin:auto 0 0;padding-top:14px;cursor:pointer}
.konfig .fp__wahl input{position:absolute;top:14px;left:0;right:0;bottom:0;width:100%;height:auto;
  margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.fp__knopf{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 20px;
  border:1.5px solid var(--wine);border-radius:999px;background:#fff;color:var(--wine);
  font-weight:700;font-size:14.5px;line-height:1.2;transition:background .18s,color .18s}
.fp__knopf .ic{display:none;width:16px;height:16px}
.fp__knopf-an{display:none}
.fp__wahl:hover input:not(:checked) + .fp__knopf{background:var(--rose)}
/* Offen heißt der Knopf „Entfernen“ und tritt zurück: Er las sich als
   „Ausgewählt“ wie ein Status, ein Tipp darauf klappte die Sorte zu. */
.fp__wahl input:checked + .fp__knopf{background:#fff;color:var(--ink-soft);border-color:var(--muted);font-weight:600}
.fp__wahl:hover input:checked + .fp__knopf{border-color:var(--wine);color:var(--wine)}
.fp__wahl input:checked + .fp__knopf .ic{display:block}
.fp__wahl input:checked + .fp__knopf .fp__knopf-an{display:inline}
.fp__wahl input:checked + .fp__knopf .fp__knopf-aus{display:none}
.fp__wahl input:focus-visible + .fp__knopf{outline:2px solid var(--wine);outline-offset:3px}

/* Die Größen. Legende schwebend: So sitzt sie im Block statt auf der
   oberen Linie, wie es ein fieldset sonst macht. */
.fp__groessen{grid-area:gr;min-width:0;margin:0;padding:16px 18px 18px;border:0;border-top:1px solid var(--line)}
/* .ks davor: Sonst gewinnt `.ks legend` (Serife, 32 px, Weinrot) und die
   Legende war lauter als der Sortenname (Critic, 14.09.2026). */
.ks .fp__glegende{float:left;width:100%;max-width:none;margin:0 0 10px;padding:0;font-family:var(--sans);
  font-size:11.5px;font-weight:700;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fp__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fp__graster{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fp__g{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;margin:0;
  padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;
  cursor:pointer;transition:border-color .18s,background .18s}
/* Auswahlpunkt rechts oben: zeigt, dass die Kachel eine Wahl ist. Ring in
   --muted, damit er gegen Weiß die 3:1 für Bedienelemente schafft. */
.fp__g::after{content:"";position:absolute;top:13px;right:13px;width:18px;height:18px;box-sizing:border-box;
  border:1.5px solid var(--muted);border-radius:50%;background:#fff}
.fp__g--an::after{border:5px solid var(--wine)}
.konfig .fp__g input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;padding:0;
  border:0;opacity:0;cursor:pointer}
.fp__g:hover{border-color:var(--rose-line)}
.fp__g--an{border-color:var(--wine);background:var(--rose)}
.fp__g:has(input:focus-visible){outline:2px solid var(--wine);outline-offset:2px}
.fp__gname{padding-right:26px;font-weight:700;font-size:15.5px;line-height:1.3;color:var(--ink)}
.fp__gpers{font-size:14.5px;line-height:1.4;color:var(--ink)}
.fp__gfuss{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;margin-top:2px}
.fp__preis{font-weight:700;font-size:15.5px;color:var(--wine);white-space:nowrap}
.fp__gmeta{font-size:13px;line-height:1.4;color:var(--muted);white-space:nowrap}

/* „Andere Personenzahl“: das Zahlenfeld unter dem Raster. */
.fp__frei{margin:12px 0 0;padding:14px 16px;border:1px solid var(--rose-line);border-radius:var(--r);background:var(--rose)}
.fp__frei label{display:block;margin:0 0 8px;font-weight:700;font-size:14.5px;color:var(--ink)}
.fp__freizahl{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--ink)}
.konfig .fp__freizahl input{width:100px;height:48px;padding:6px 10px;text-align:center;font-size:17px}
.fp__freihilfe{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
/* Meldung in der Karte statt nur der Browserblase: Die verdeckte die
   X-Large-Kachel und war nach einer Sekunde weg (Critic, blick). */
.fp__fehlt{margin:12px 0 0;padding:10px 14px;border:1.5px solid var(--wine);border-radius:var(--r);
  background:#fff;color:var(--wine);font-weight:700;font-size:14px;line-height:1.45}

/* Der TENDERIST-Knopf sitzt unten rechts genau über der Summe im
   Bestellzettel. Solange der Zettel steht, rückt er darüber. */
body:has(#fpkorb:not([hidden])) #tenderist-embed-container{bottom:104px!important}

/* Bis das Skript läuft, keine offenen Größen: Sonst stünden sie kurz da
   und klappten dann zu. */
.fpjs #paketForm:not(.fp--bereit) .fp__groessen{display:none}
.fp__stand{margin:14px 0 0;font-size:13px;color:var(--muted)}
.fp__leer{margin-top:16px}

/* Ernährung: je Zeile "nicht nötig / für einige / für alle". Pillen statt
   Auswahlliste, weil man die drei Möglichkeiten auf einen Blick sehen soll. */
.fe{display:grid;gap:10px;margin-top:16px;max-width:780px}
.konfig .fe .kcheck{margin-top:0}
.fe__z{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center;gap:14px;
  padding:12px 16px;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  transition:border-color .18s,background .18s}
.fe__z--an{border-color:var(--wine);background:var(--rose)}
.fe__name{font-weight:700;color:var(--ink)}
.fe__wahl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;margin:0;padding:0;border:0}
.fe__wahl legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fe__opt{position:relative;margin:0}
.konfig .fe__opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}
.fe__opt span{display:inline-flex;align-items:center;min-height:44px;padding:8px 15px;
  border:1.5px solid var(--line);border-radius:999px;background:#fff;
  font-size:14px;color:var(--ink-soft);white-space:nowrap}
.fe__opt input:checked + span{border-color:var(--wine);background:var(--wine);color:#fff}
.fe__opt input:focus-visible + span{outline:2px solid var(--wine);outline-offset:2px}
.fe__anz{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:14px;color:var(--ink-soft)}
.konfig .fe__anz input{width:80px;height:44px;padding:6px 8px;text-align:center}

/* Bestellzettel: dieselbe Leiste wie im Torten-Konfigurator, hier aber
   klebend am unteren Rand. Das Raster ist lang, am Handy vier Karten
   untereinander, und die Summe soll dabei nicht aus dem Blick geraten. */
.fpkorb{position:sticky;bottom:14px;z-index:6;border:1px solid var(--rose-line);
  box-shadow:0 16px 32px -20px rgba(102,0,0,.6)}
.fpkorb .tkorb__summe small{letter-spacing:.06em}

/* ── Formulare, Kundenbesprechung 22.09.2026 ─────────────────────────────
   Schrittleiste klickbar: Der Knopf füllt das Listenelement und erbt dessen
   Schrift und Farbe, damit sich an der Optik nichts ändert. Mindestens
   44 px hoch, damit man sie am Handy trifft. */
.konfig__leiste button{display:flex;align-items:center;gap:9px;width:100%;min-width:0;min-height:44px;
  margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;
  cursor:pointer;overflow:hidden;text-overflow:ellipsis}
.konfig__leiste button:hover{color:var(--wine)}
.konfig__leiste button:hover span{border-color:var(--wine-soft)}
.konfig__leiste button:focus-visible{outline:2px solid var(--wine);outline-offset:3px;border-radius:4px}
.konfig__leiste li{padding-bottom:4px}

/* Hinweis auf der ersten Seite jedes Formulars */
.konfig__pflicht{margin-top:10px;font-size:13.5px;color:var(--muted)}
.konfig__pflicht .req{color:var(--wine);font-weight:700}
.anfrageform .konfig__pflicht{margin:0 0 18px}

/* Ernährung: „immer standardmäßig dabei" rechts in der Zeile (Fabian,
   22.09.2026). margin-left:auto schiebt ihn an den rechten Rand; am Handy
   bricht er unter die Knöpfe. */
.fe__zusatz{margin-left:auto;padding-left:8px;font-size:13.5px;font-weight:600;color:var(--wine-soft);white-space:nowrap}
/* .fe__anz setzt ein eigenes display und schlug damit das hidden-Attribut,
   im Paketformular war das schon eigens abgefangen. Jetzt für beide. */
.fe [hidden]{display:none!important}

/* Uhrzeit: Tag geschlossen */
.kf__hinweis--zu{color:var(--wine);font-weight:600}
/* Am Handy ist rechts kein Platz: eigene Zeile unter den Knöpfen */
@media(max-width:640px){.fe__zusatz{flex-basis:100%;margin-left:0;padding-left:0;white-space:normal}}

/* Andere Personenzahl: berechnete Menge und Preis unter dem Feld (22.09.2026) */
.fp__freiergebnis{margin:6px 0 0;font-weight:700;color:var(--wine);font-size:15px}
.fp__freiergebnis:empty{display:none}

/* Schmale Handys: Die Leiste bekommt 16px Rand statt 26px und etwas weniger
   Abstand, sonst passen Logo, Knopf und Menü nicht nebeneinander (gemessen
   22.09.2026 auf 360px: 27px zu breit). */
@media(max-width:480px){.brand img{height:40px}}
@media(max-width:400px){.wrap.hdr-in{gap:10px;padding:0 16px}.brand img{height:38px}}
@media(max-width:340px){.brand img{height:28px}}

/* ── Fingerfood-Pakete: Sonderwünsche zum Aufklappen (22.09.2026) ────────
   Jede Kategorie ein <details>, zu Beginn geschlossen. Der Kopf zeigt, wie
   viel darin gewählt ist, damit man es auch zugeklappt sieht. */
.fpz{display:grid;gap:10px;margin-top:22px;max-width:780px}
.fpz__gruppe{border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:border-color .18s,background .18s}
.fpz__gruppe--an{border-color:var(--wine)}
.fpz__gruppe[open]{background:#fff}
.fpz__kopf{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 18px;cursor:pointer;list-style:none;font-weight:700;color:var(--ink)}
.fpz__kopf::-webkit-details-marker{display:none}
.fpz__kopf::marker{content:''}
.fpz__kopf:hover .fpz__titel{color:var(--wine)}
.fpz__kopf:focus-visible{outline:2px solid var(--wine);outline-offset:2px;border-radius:var(--r)}
.fpz__titel{flex:1 1 auto;min-width:0}
.fpz__zahl{font-size:13px;font-weight:600;color:var(--wine);white-space:nowrap}
.fpz__zahl:empty{display:none}
.fpz__pfeil{width:20px;height:20px;flex:none;color:var(--wine);transition:transform .2s}
.fpz__gruppe[open] .fpz__pfeil{transform:rotate(180deg)}
.fpz__inhalt{padding:0 18px 18px}
.fpz__inhalt .ks__hilfe{margin-top:0}
.fpz__inhalt .kwahl{margin-top:4px}
@media(max-width:640px){.fpz__inhalt .kwahl--schmal{grid-template-columns:1fr}}
/* „Sonstige Wünsche“ so breit wie die Kategorien darüber */
#paketForm .fpz + .kf{max-width:780px;margin-top:14px}

/* ── Fingerfood-Pakete: Lieferung und Sonderwünsche anfragen (22.09.2026) ── */
.fp__liefer{margin-top:22px;max-width:780px}
.fp__liefer b{display:block;color:var(--wine);font-size:16px}
.fp__liefer small{display:block;margin-top:3px;font-size:13.5px;color:var(--ink-soft);line-height:1.45}
#paketForm .fp__liefer + .kbedingt{max-width:780px}
.fp__rueckruf{display:flex;gap:10px;align-items:flex-start;max-width:780px;margin:14px 0 0;
  padding:12px 16px;border-radius:var(--r);background:var(--rose);color:var(--wine-deep);font-size:14.5px;line-height:1.5}
.fp__rueckruf .ic{width:18px;height:18px;flex:none;margin-top:2px;color:var(--wine)}
.kueberblick__liste li.kueberblick__zwischen{padding-top:16px;border-bottom:0;font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--wine-soft)}
.kueberblick__anfrage{font-weight:600;color:var(--muted);white-space:nowrap}
.kueberblick__rueckruf{margin:12px 0 0;padding:10px 14px;border-radius:10px;background:var(--rose);
  color:var(--wine-deep);font-size:14px;line-height:1.5}

/* Kurzfristiger Termin (22.09.2026): rot, mit Telefon. .kmsg setzt ein
   eigenes display, deshalb hidden ausdrücklich. */
.kurzfristig{display:flex;gap:10px;align-items:flex-start;max-width:780px;margin-top:16px;
  border-color:#E4A3A3;background:#FDECEC;color:#8A1414}
.kurzfristig[hidden]{display:none!important}
.kurzfristig .ic{width:18px;height:18px;flex:none;margin-top:2px;color:#8A1414}
.kurzfristig a{color:#8A1414;font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.kueberblick__rueckruf--kurz{background:#FDECEC;color:#8A1414;border:1px solid #E4A3A3}
.kurzfristig::before{content:none;display:none}

/* Fingerfood-Pakete: Ausweg zum Catering-Konfigurator über dem Formular (22.09.2026) */
.fp__ausweg{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;
  margin:0 0 34px;padding:20px 24px;border:1px solid var(--rose-line);border-radius:var(--r);background:var(--rose)}
.fp__ausweg-text{display:grid;gap:4px;min-width:0;flex:1 1 320px}
.fp__ausweg-text b{font-family:var(--serif);font-size:clamp(20px,2.2vw,24px);color:var(--wine);line-height:1.2}
.fp__ausweg-text span{color:var(--ink-soft);font-size:15.5px;line-height:1.5}
.fp__ausweg .btn{flex:none}
@media(max-width:560px){.fp__ausweg{padding:18px}.fp__ausweg .btn{width:100%;justify-content:center}}

/* ── /trauerfeier/ — Trauerfeier und Leichenschmaus (22.09.2026) ──────────
   Ruhiger als die Catering-Seiten: keine Preise, keine Leisten, kein Rot als
   Warnung. Die Wahl „im Lokal“ oder „an einem anderen Ort“ trägt die Seite. */
.tfwahl{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(18px,2.4vw,30px);margin-top:40px;align-items:stretch}
.tfwahl__k{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rose-line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);min-width:0}
.tfwahl__k--haupt{border-color:var(--wine);box-shadow:0 0 0 1px var(--wine),var(--shadow)}
.tfwahl__bild{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--rose)}
.tfwahl__bild img{width:100%;height:100%;object-fit:cover}
.tfwahl__text{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.6vw,34px)}
.tfwahl__marke{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--wine);border-radius:999px;padding:5px 12px}
.tfwahl__marke--leise{color:var(--wine);background:var(--rose)}
.tfwahl__text h3{margin:14px 0 0;font-family:var(--serif);font-size:clamp(22px,2.3vw,28px);line-height:1.22;color:var(--ink)}
.tfwahl__text .feature-list{margin-top:18px}
.tfwahl__text .btn{margin-top:auto;align-self:flex-start}
.tfwahl__text .feature-list + .btn{margin-top:26px}

.tfspeisen{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.tfspeise{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px}
.tfspeise__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--rose)}
.tfspeise__ic .ic{width:24px;height:24px;color:var(--wine)}
.tfspeise h3{margin:18px 0 0;font-family:var(--serif);font-size:20px;line-height:1.25}
.tfspeise p{margin:8px 0 0;color:var(--ink-soft);font-size:15.5px;line-height:1.55}

.tfablauf{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,34px)}
.tfablauf li{border-top:1px solid rgba(255,220,220,.35);padding-top:22px}
.tfablauf__nr{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1.5px solid #ffc9c9;color:#fff;font-family:var(--serif);font-size:18px}
.tfablauf h3{margin:16px 0 0;color:#fff;font-family:var(--serif);font-size:21px;line-height:1.25}
.stage .tfablauf p{margin-top:8px;font-size:15.5px}

.tfform{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3.2vw,42px);box-shadow:var(--shadow-sm);min-width:0}
.tfform .konfig__pflicht{margin-top:0}
.tfform__gruppe{border:0;padding:0;margin:26px 0 0;min-width:0}
.tfform__gruppe legend{padding:0;font-weight:600;font-size:16px;color:var(--ink)}
.tfform__gruppe .req{color:var(--wine)}
.tfort{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.tfort__i{display:flex;align-items:center;gap:14px;padding:20px 20px;min-height:92px}
.tfort__i .ic{width:26px;height:26px}
.tfort .kwahl__t{font-size:17px}
.tfgaeste,.tfbew{margin-top:14px}
.tfgaeste{grid-template-columns:repeat(4,minmax(0,1fr))}
.tfbew{grid-template-columns:repeat(2,minmax(0,1fr))}
.tfform .kbedingt{margin-top:4px}
.tfform__senden{margin-top:28px}
@media(max-width:980px){
  .tfwahl{grid-template-columns:1fr}
  .tfspeisen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tfgaeste{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .tfablauf{grid-template-columns:1fr}
}
@media(max-width:560px){
  .tfspeisen,.tfort,.tfbew{grid-template-columns:1fr}
  .tfwahl__text .btn,.tfform__senden{width:100%;justify-content:center}
}
.ks__hilfe a{color:var(--wine);text-decoration:underline;text-underline-offset:2px}
.tfform .kbedingt{margin-top:14px;padding:4px 20px 18px;border-left:3px solid var(--wine);background:var(--rose);border-radius:0 var(--r) var(--r) 0}

/* Trauerfeier: Lokal groß, Lieferung leise (Fabian, 22.09.2026) */
.tflokal{display:grid;grid-template-columns:1.05fr 1fr;background:#fff;border:1px solid var(--rose-line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.tflokal__bild{margin:0;min-height:100%;background:var(--rose)}
.tflokal__bild img{width:100%;height:100%;object-fit:cover}
.tflokal__text{padding:clamp(28px,4vw,56px);min-width:0}
.tflokal__text h2{margin-top:10px;font-size:clamp(30px,3.6vw,44px);line-height:1.15}
.tflokal__text > p{margin-top:16px;color:var(--ink-soft);font-size:17px}
.tflokal__text .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.tfanders{margin:22px auto 0;max-width:760px;text-align:center;color:var(--muted);font-size:15px;line-height:1.6}
.tfanders a{color:var(--wine);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.tfort{grid-template-columns:1fr}
.tfort__lokal .tfort__i{min-height:96px}
.tfort__lokal .kwahl__t{font-size:18px}
.tfort__anders{display:inline-flex;align-items:center;gap:10px;margin-top:4px;cursor:pointer;
  font-size:14.5px;color:var(--muted)}
.tfort__anders input{width:17px!important;height:17px;flex:none;margin:0;padding:0;accent-color:var(--wine)}
@media(max-width:900px){.tflokal{grid-template-columns:1fr}.tflokal__bild{aspect-ratio:16/10}}
@media(max-width:560px){.tflokal__text .btn{width:100%;justify-content:center}}

.vorbliste a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,220,220,.55);text-underline-offset:3px}
.vorbliste a:hover{text-decoration-color:#fff}

/* Torten-Konfigurator: Bild hochladen und „Entfernen“ (22.09.2026) */
.tkbild{margin-top:14px}
.tkbild input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.tkbild__flaeche{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 18px;cursor:pointer;
  border:1.5px dashed var(--rose-line);border-radius:var(--r);background:#fff;text-align:center;transition:border-color .2s,background .2s}
.tkbild__flaeche:hover,.tkbild--ueber .tkbild__flaeche{border-color:var(--wine);background:var(--rose)}
.tkbild__flaeche .ic{width:24px;height:24px;color:var(--wine)}
.tkbild__flaeche b{font-size:15px;color:var(--ink)}
.tkbild__flaeche small{font-size:13px;color:var(--muted)}
.tkbild input[type="file"]:focus-visible + .tkbild__flaeche{outline:2px solid var(--wine);outline-offset:2px}
.tkbild__stand{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1.5px solid var(--rose-line);
  border-radius:var(--r);background:var(--rose);flex-wrap:wrap}
.tkbild__stand img{width:72px;height:72px;object-fit:cover;border-radius:10px;flex:none}
.tkbild__stand span{font-size:14px;color:var(--ink);min-width:0;word-break:break-word;flex:1 1 140px}
.tkbild__weg{border:0;background:none;color:var(--wine);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;padding:0}
.tk__weg{display:inline-flex;align-items:center;gap:7px}
.tk__weg .ic{width:15px;height:15px}
.tkbild__flaeche[hidden]{display:none}

/* ══ Konditorei-Sortiment nach der Preisliste von Hochl (25.09.2026) ══════
   70 Sorten statt 18, die meisten ohne Foto. Drei Teile:
   1. Konfigurator: Untergruppen, schmale Karten ohne Bildspalte, Preis
      schon an der zugeklappten Karte, Allergene in der offenen Karte.
   2. Preisliste auf /konditorei/: dieselbe Kartenform wie die Speisekarte,
      ganze Torten und Kuchen als Tabelle. Am Handy wird jede Zeile zu
      einem Block: Name oben, die vier Preise mit Beschriftung darunter.
   3. Sortenseite: Preise im Steckbrief. */
.tk__unter{margin:28px 0 0;font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--wine-soft)}
.tk__hinweis + .tk__unter{margin-top:20px}
.tk__k--ohne .tk__auf{grid-template-columns:1fr 30px}
.tk__k--ohne .tk__b{padding:14px 4px 15px 17px}
.tk__ab{display:block;margin-top:5px;font-size:13.5px;font-weight:600;color:var(--wine)}
.tk__tags{display:flex;flex-wrap:wrap;gap:0 6px}
.tk__allerg{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
/* Am Handy stehen die drei Größen untereinander: nebeneinander brach das
   Eurozeichen allein in eine zweite Zeile (gemessen bei 390 px, 25.09.2026).
   Name links, Preis rechts, Maße darunter. */
@media(max-width:560px){
  .tk__gr{flex-direction:column;gap:7px}
  .tk__gropt > span{display:grid;grid-template-columns:1fr auto;align-items:baseline;
    column-gap:12px;text-align:left;padding:9px 12px}
  .tk__gropt > span b{grid-column:2;grid-row:1;white-space:nowrap}
  .tk__gropt > span small{grid-column:1 / -1;margin-top:2px}
}

#preise .sec-head{text-align:center;margin-left:auto;margin-right:auto;margin-bottom:34px}
#preise .sec-head h2{text-wrap:balance}
#preise .kgruppe{max-width:900px;margin-left:auto;margin-right:auto}
#preise .kfuss{max-width:900px}
.kpos__titel a,.ptab tbody th a{color:inherit;border-bottom:1px solid var(--rose-line)}
.kpos__titel a:hover,.ptab tbody th a:hover{border-bottom-color:var(--wine)}
.ptab__huelle{margin-top:10px}
.ptab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ptab th,.ptab td{padding:13px 10px;border-bottom:1px solid var(--line);text-align:right;
  vertical-align:baseline}
.ptab thead th{padding-top:16px;font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--wine-soft);vertical-align:bottom}
.ptab thead th small{display:block;margin-top:3px;font-size:11.5px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--muted)}
.ptab thead th:first-child,.ptab tbody th{text-align:left;padding-left:0}
.ptab th:last-child,.ptab td:last-child{padding-right:0}
.ptab tbody th{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink);line-height:1.35}
.ptab tbody th small{display:block;margin-top:3px;font-family:var(--sans);font-size:13px;
  font-weight:400;line-height:1.5;color:var(--muted)}
.ptab td{font-family:var(--serif);font-size:16.5px;font-weight:600;color:var(--wine);white-space:nowrap}
.ptab tbody tr:last-child th,.ptab tbody tr:last-child td{border-bottom:0}
.ptab__cta{justify-content:center;margin-top:30px}
@media(max-width:700px){
  .ptab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ptab tbody tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 8px;
    padding:14px 0;border-bottom:1px solid var(--line)}
  .ptab tbody tr:last-child{border-bottom:0}
  .ptab tbody th{grid-column:1 / -1;padding:0 0 9px;border:0}
  .ptab td{padding:0;border:0;text-align:left;font-size:15.5px}
  .ptab td::before{content:attr(data-label);display:block;min-height:2.6em;margin-bottom:2px;
    font-family:var(--sans);font-size:11px;font-weight:600;line-height:1.3;color:var(--muted);
    white-space:pre-line}
}

.tkarte__preise{list-style:none;margin:18px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.tkarte__preise li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0}
.tkarte__preise span{font-size:15px;color:var(--ink)}
.tkarte__preise small{display:block;font-size:12.5px;color:var(--muted)}
.tkarte__preise b{font-family:var(--serif);font-size:17px;color:var(--wine);white-space:nowrap}

/* ── Mehrwertsteuer ausweisen (28.09.2026) ──────────────────────────────
   Konditorei: am Preis bzw. je Preisgruppe klein „inkl. 10 % MwSt.“.
   Fingerfood: groß brutto, darunter netto zzgl. MwSt.
   Übersicht im Konfigurator: Netto, MwSt. und Summe untereinander. */
.ust-zeile{margin:10px 0 0;text-align:center;font-size:13px;line-height:1.5;color:var(--muted)}
.tkarte__preise + .ust-zeile{text-align:left;margin-top:6px}
.ust-hinweis{display:block;font-family:var(--sans);font-size:12px;font-weight:400;
  line-height:1.4;color:var(--muted);letter-spacing:0}
.vz__preis .ust-hinweis{display:inline;margin-left:6px;font-weight:400;color:var(--wine-deep)}
.fp__gnetto{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.kueberblick__ust{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  margin:4px 0 0;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.kueberblick__liste + .kueberblick__ust{margin-top:16px;padding-top:12px;border-top:2px solid var(--rose-line)}
.kueberblick__ust + .kueberblick__summe{margin-top:8px;padding-top:8px;border-top-width:1px}