/* ==========================================================================
   Culinary. Richtung "Tresen".
   Reihenfolge: Schriften, Tokens, Basis, Bausteine, Abschnitte, Utilities.
   ========================================================================== */

/* ---------- Schriften ----------
   Dieselben drei Familien wie in der gedruckten Karte, damit Print und
   Web als ein Haus gelesen werden. Alle drei sind Google Fonts und
   liegen lokal, es geht keine Anfrage nach draussen. */
@font-face{font-family:'Bebas Neue';src:url('../fonts/bebas-neue-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Yellowtail';src:url('../fonts/yellowtail-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Delius';src:url('../fonts/delius-v21-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair';src:url('../fonts/playfair-display-v40-latin-500.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Garamond';src:url('../fonts/cormorant-garamond-v21-latin-500.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Baltazr';src:url('../fonts/balthazar-v18-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Bayon';src:url('../fonts/bayon-v36-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Bevan';src:url('../fonts/bevan-v26-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Beiruti';src:url('../fonts/beiruti-v5-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Crimson';src:url('../fonts/crimson-text-v19-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ---------- Tokens ----------
   Farben aus der Speisekarte. Zwei Korallentoene: der helle fuer Flaechen,
   der dunklere fuer Text, weil #F58A61 auf Creme fuer kleine Schrift zu
   wenig Kontrast hat. */
:root{
  --cream:#F5F1E9;
  --surface:#EFEADF;
  --surface-2:#E9E3D6;
  --line:#E2DBCB;
  --line-soft:#CFC6B2;

  --green:#5D7844;
  --green-deep:#3E5430;
  --green-dark:#2C3D22;
  --mute:#8B9B7C;

  --coral:#F58A61;
  --coral-ink:#C0603A;
  --star:#E0A93B;

  /* Altnamen, damit bestehende Regeln weiter greifen. */
  --ink:var(--cream);
  --chalk:var(--green-deep);
  --sage:var(--green);
  --sumach:var(--coral-ink);
  --pist:var(--coral-ink);

  --font-display:'Baltazr',Impact,sans-serif;
  --font-body:'Barlow',system-ui,sans-serif;
  --font-util:'Barlow Condensed','Barlow',system-ui,sans-serif;
  --font-script:'Yellowtail',cursive;
  --font-misc: 'Crimson' ;

  --pad-x:clamp(16px,5vw,64px);
  --sec-y:clamp(44px,7vw,92px);
  --max:1400px;
  --r:4px;
  --header-h:88px;
}

/* ---------- Reset und Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* html body statt body: schlaegt Kit-Stylesheets von Plugins,
   ohne dass irgendwo !important noetig wird. */
html body{
  margin:0;background:var(--ink);color:var(--sage);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:var(--line-soft);text-underline-offset:3px}
a:hover{text-decoration-color:var(--pist)}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;letter-spacing:.012em;color:var(--coral-ink);margin:0}

:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--green);outline-offset:3px;
}

.screen-reader-text{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.cb-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--green);color:var(--cream);padding:12px 18px;font-weight:600;
}
.cb-skip:focus{left:0}

/* ---------- Bausteine ---------- */
.cb-eyebrow{
  font-family:var(--font-util);font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0;
}

.cb-lead{max-width:48ch;font-size:clamp(17px,1.9vw,23px);line-height:1.5;margin:0 0 28px}

.cb-btn{
  display:inline-block;padding:13px 22px;border-radius:var(--r);
  font-weight:600;font-size:15px;text-decoration:none;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.cb-btn--primary{background:var(--green);color:var(--cream);border:1px solid var(--green)}
.cb-btn--primary:hover{background:var(--green-deep);border-color:var(--green-deep)}
.cb-btn--ghost{background:transparent;color:var(--green);border:1px solid var(--line-soft);font-weight:600}
.cb-btn--ghost:hover{border-color:var(--green);background:var(--surface)}

.cb-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0}

/* ---------- Kopf ---------- */
/* Kopfleiste laeuft mit und hebt sich durch einen eigenen Ton ab.
   Der Schatten kommt erst beim Scrollen dazu, damit sie oben ruhig sitzt. */
.cb-header{
  position:sticky;top:0;z-index:50;
  background:var(--green-deep);
  /* Statt harter Kante: abgerundete Unterseite und ein weicher Schatten.
     Der Schatten liegt schon im Ruhezustand leicht an und wird beim
     Scrollen kraeftiger. */
  border-end-start-radius:clamp(14px,2vw,26px);
  border-end-end-radius:clamp(14px,2vw,26px);
  box-shadow:0 2px 10px rgba(44,61,34,.10);
  transition:box-shadow .22s ease;
}
.cb-header[data-scrolled]{box-shadow:0 10px 30px rgba(44,61,34,.20)}

/* Waehrend das mobile Menue offen ist, wandert die Rundung an dessen
   Unterkante, sonst haette man zwei Rundungen uebereinander. */
.cb-header:has(.cb-nav[data-open="true"]){
  border-end-start-radius:0;
  border-end-end-radius:0;
}

/* Die Admin-Leiste von WordPress liegt fest oben, die Kopfleiste
   muss darunter einrasten. */
.admin-bar .cb-header{top:32px}
@media (max-width:782px){
  .admin-bar .cb-header{top:46px}
}

/* Damit Ankersprunge nicht unter der Leiste landen. */
#karte,#catering,#catering-pakete,#kontakt,#galerie,#bewertungen,#content{
  scroll-margin-top:calc(var(--header-h) + 18px);
}
.cb-header__inner{
  max-width:var(--max);margin:0 auto;padding:14px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.cb-brand{
  font-family:var(--font-display);font-weight:400;font-size:24px;
  letter-spacing:.09em;color:var(--cream);text-decoration:none;
}
.cb-brand--img img{max-height:44px;width:auto}

.cb-nav{margin-inline-start:auto}
.cb-nav__list{display:flex;gap:22px}
.cb-nav__list a{
  font-size:15px;font-weight:500;color:rgba(245,241,233,.86);
  text-decoration:none;transition:color .16s ease;
}
.cb-nav__list a:hover,.cb-nav__list .current-menu-item a{color:var(--coral)}

/* Auf dem gruenen Grund waere der gruene Button unsichtbar, deshalb
   uebernimmt hier die Koralle. Sie greift zugleich das Orange des Logos auf. */
.cb-header__call.cb-btn--primary{
  background:var(--coral);color:#3A2113;border-color:var(--coral);
}
.cb-header__call.cb-btn--primary:hover{
  background:#F79E7A;border-color:#F79E7A;color:#3A2113;
}
.cb-nav__toggle{display:none}

@media (max-width:900px){
  .cb-nav__toggle{
    display:block;background:none;border:1px solid rgba(245,241,233,.3);
    border-radius:var(--r);padding:10px 12px;cursor:pointer;
  }
  .cb-nav__bars,.cb-nav__bars::before,.cb-nav__bars::after{
    display:block;width:18px;height:2px;background:var(--cream);content:'';
  }
  .cb-nav__bars::before{transform:translateY(-6px)}
  .cb-nav__bars::after{transform:translateY(4px)}
  .cb-nav__list{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:20;
    flex-direction:column;gap:0;background:var(--green-deep);
    border-end-start-radius:clamp(14px,2vw,26px);
    border-end-end-radius:clamp(14px,2vw,26px);
    box-shadow:0 10px 30px rgba(44,61,34,.20);
    overflow:hidden;
  }
  .cb-nav{position:static}
  .cb-header__inner{position:relative;flex-wrap:wrap}
  .cb-nav[data-open="true"] .cb-nav__list{display:flex}
  .cb-nav__list li{border-bottom:1px solid rgba(245,241,233,.12)}
  .cb-nav__list a{display:block;padding:15px var(--pad-x)}
  .cb-header__call{font-size:13px;padding:11px 15px}
}

/* ---------- Abschnitte ---------- */
.cb-section{max-width:var(--max);margin:0 auto;padding:var(--sec-y) var(--pad-x)}
.cb-section--flush{max-width:none;padding-inline:0}

/* Getoente Flaeche ueber die volle Fensterbreite, ohne zusaetzliches
   Markup und ohne 100vw. Der Schatten faerbt beliebig weit nach aussen,
   clip-path schneidet ihn oben und unten auf die Abschnittshoehe zu.
   Damit entsteht keine waagerechte Bildlaufleiste. */
.cb-section--tint{
  position:relative;
  background:var(--surface);
  box-shadow:0 0 0 100vmax var(--surface);
  clip-path:inset(0 -100vmax);
}

/* Auf getoentem Grund kehren sich die Karten um, sonst verschwinden sie. */
.cb-section--tint .cb-paket{background:var(--cream)}
.cb-section--tint .cb-paket__media,
.cb-section--tint .cb-catering__img{background:var(--surface-2)}
.cb-section__head{margin-bottom:26px}
.cb-section__head--inset{padding-inline:var(--pad-x);max-width:var(--max);margin-inline:auto}
.cb-section__title{font-size:clamp(30px,4vw,44px);letter-spacing:.02em}

/* ---------- Hero ---------- */
.cb-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.cb-hero__inner{
  position:relative;z-index:2;
  max-width:var(--max);margin:0 auto;
  padding:clamp(36px,7vw,80px) var(--pad-x) clamp(32px,5vw,60px);
}

/* Olivenzweige laufen von beiden Bildschirmraendern auf die Ueberschrift zu.
   Sie liegen hinter dem Text und sind zurueckgenommen, damit die Schrift
   lesbar bleibt. Auf schmalen Fenstern faellt der rechte weg, sonst wird
   es unruhig. */
.cb-hero__deko{
  position:absolute;z-index:1;pointer-events:none;
  background-repeat:no-repeat;background-size:contain;
  opacity:.42;
}
/* Waagerecht laufen die Zweige bewusst ueber den Bildschirmrand hinaus,
   sie sollen von aussen hereinkommen. Senkrecht bleiben sie vollstaendig
   im Abschnitt, sonst schneidet dessen Kante die Blaetter ab. */
.cb-hero__deko--l{
  inline-size:clamp(210px,23vw,380px);block-size:clamp(125px,14vw,227px);
  inset-block-start:clamp(10px,1.6vw,30px);
  inset-inline-start:clamp(-90px,-6vw,-40px);
  background-image:url('../img/zweig-links.png');
  background-position:left top;
  transform:rotate(-6deg);
  transform-origin:left top;
}
.cb-hero__deko--r{
  inline-size:clamp(230px,26vw,430px);block-size:clamp(137px,15.5vw,257px);
  inset-block-end:clamp(10px,1.6vw,30px);
  inset-inline-end:clamp(-80px,-5vw,-30px);
  background-image:url('../img/zweig-rechts.png');
  background-position:right bottom;
  transform:rotate(4deg);
  transform-origin:right bottom;
}

@media (max-width:760px){
  .cb-hero__deko--r{display:none}
  .cb-hero__deko--l{opacity:.3}
}
.cb-hero__title{
  font-size:clamp(42px,7.6vw,104px);line-height:.94;letter-spacing:.012em;
  margin:0 0 22px;
  /* Ohne eigenen Umbruch verteilt der Browser die Zeilen gleichmaessig,
     statt eine lange und eine kurze zu erzeugen. Ein <br> im Customizer
     hat weiterhin Vorrang. */
  text-wrap:balance;
}
/* Der ausgezeichnete Teil laeuft in der Schreibschrift der Karte,
   genau wie dort die Gerichtnamen. */
.cb-hero__title em{
  font-family:var(--font-misc);font-style:normal;font-size:1.06em;
  letter-spacing:0;color:var(--coral);line-height:1.1;
}

/* ---------- Kopfbereich mit Medien ---------- */
/* Das Bild liegt als weiche Flaeche im Hintergrund. Es ist absolut
   positioniert, veraendert also weder Hoehe noch Aufbau des Abschnitts.
   Die Maske blendet es rundherum aus, damit keine Kante entsteht, und
   der Weichzeichner nimmt ihm die Schaerfe, sodass die Schrift davor
   ruhig bleibt. Es liegt unter den Olivenzweigen. */
.cb-hero__media{
  position:absolute;z-index:0;pointer-events:none;
  inset-block:0;
  inset-inline-end:0;
  inline-size:min(66%,940px);
  overflow:hidden;
  opacity:.72;
  filter:blur(0px) saturate(1.06);
  -webkit-mask-image:radial-gradient(ellipse 80% 82% at 74% 50%,
    #000 0%,rgba(0,0,0,.9) 42%,transparent 80%);
  mask-image:radial-gradient(ellipse 80% 82% at 74% 50%,
    #000 0%,rgba(0,0,0,.9) 42%,transparent 80%);
}
.cb-hero__img,.cb-hero__media video{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Etwas groesser, damit der Weichzeichner an den Raendern nicht
     ins Durchsichtige laeuft. */
  transform:scale(1.08);
}
.cb-hero__media video{
  position:absolute;inset:0;opacity:0;transition:opacity .6s ease;
}
.cb-hero__media video[data-ready]{opacity:1}

@media (max-width:900px){
  .cb-hero__media{
    inline-size:100%;
    opacity:.3;
    -webkit-mask-image:radial-gradient(ellipse 90% 80% at 62% 46%,
      #000 0%,rgba(0,0,0,.85) 40%,transparent 78%);
    mask-image:radial-gradient(ellipse 90% 80% at 62% 46%,
      #000 0%,rgba(0,0,0,.85) 40%,transparent 78%);
  }
}

/* ---------- Oeffnungsstatus ---------- */
.cb-status{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 22px;
  font-family:var(--font-util);font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  border:1px solid var(--line-soft);border-radius:999px;padding:6px 15px;
  background:var(--surface);
}
.cb-status[data-state="open"]{color:var(--green)}
.cb-status__dot{
  width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;
}
.cb-status[data-state="open"] .cb-status__dot{animation:cb-pulse 2.4s infinite}
@keyframes cb-pulse{
  0%{box-shadow:0 0 0 0 rgba(93,120,68,.45)}
  70%{box-shadow:0 0 0 8px rgba(93,120,68,0)}
  100%{box-shadow:0 0 0 0 rgba(93,120,68,0)}
}

/* ==========================================================================
   Bewertungs-Kachel
   Zwei uebereinanderliegende Sternenreihen. Die obere wird auf den
   Prozentwert beschnitten, damit auch 4,3 korrekt aussieht.
   ========================================================================== */
.cb-rating{
  display:inline-flex;align-items:center;gap:14px;
  margin-block-start:26px;padding:12px 16px;
  border:1px solid var(--line);border-radius:8px;
  background:var(--surface);text-decoration:none;
  transition:border-color .16s ease,transform .16s ease;
}
a.cb-rating:hover{border-color:var(--line-soft);transform:translateY(-1px)}

.cb-rating__stars{position:relative;display:inline-block;flex:none;line-height:0}
.cb-rating__base,.cb-rating__fill{display:flex;gap:2px;line-height:0}
.cb-rating__base svg,.cb-rating__fill svg{width:15px;height:15px;flex:none;display:block}
.cb-rating__base{fill:var(--line-soft)}
.cb-rating__fill{
  position:absolute;inset-block-start:0;inset-inline-start:0;
  width:var(--cb-fill,100%);overflow:hidden;fill:#E0A93B;
}

.cb-rating__text{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.cb-rating__value{
  font-family:var(--font-body);font-weight:400;font-size:24px;
  letter-spacing:.02em;color:var(--green-deep);line-height:1;
}
.cb-rating__max{
  font-family:var(--font-util);font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green-deep);
}
.cb-rating__meta{flex-basis:100%;font-size:12.5px;color:var(--green-deep);line-height:1.4}

.cb-rating__arrow{
  margin-inline-start:4px;color:var(--mute);flex:none;line-height:0;
  transition:transform .16s ease,color .16s ease;
}
.cb-rating__arrow svg{width:16px;height:16px;display:block}
a.cb-rating:hover .cb-rating__arrow{color:var(--coral-ink);transform:translateX(3px)}

/* Kompakte Variante neben den Buttons: eine Zeile, gleiche Ecken und
   Rahmenstaerke wie der Ghost-Button, damit sie als drittes Element der
   Zeile gelesen wird und nicht als fremde Karte. */
.cb-rating--beside{
  margin:0;padding:10px 16px;gap:11px;
  border-radius:var(--r);align-self:center;
}
.cb-rating--beside .cb-rating__text{flex-wrap:nowrap;align-items:baseline;gap:8px}
.cb-rating--beside .cb-rating__max{display:none}
.cb-rating--beside .cb-rating__meta{flex-basis:auto;font-size:12.5px;white-space:nowrap}
.cb-rating--beside .cb-rating__value{font-size:17px}
.cb-rating--beside .cb-rating__base svg,
.cb-rating--beside .cb-rating__fill svg{width:14px;height:14px}

@media (max-width:860px){
  .cb-rating--beside{width:100%;justify-content:flex-start}
}
@media (max-width:420px){
  .cb-rating--beside .cb-rating__text{flex-wrap:wrap;gap:4px 8px}
  .cb-rating--beside .cb-rating__meta{flex-basis:100%;white-space:normal}
}

/* Schlanke Variante fuer die Faktenzeile: kein Rahmen, keine Flaeche. */
.cb-rating--inline{
  margin:0;padding:0;border:0;background:none;gap:10px;
  align-items:flex-start;flex-wrap:wrap;
}
.cb-rating--inline .cb-rating__stars{margin-block-start:3px}
.cb-rating--inline .cb-rating__base svg,
.cb-rating--inline .cb-rating__fill svg{width:13px;height:13px}
.cb-rating--inline .cb-rating__value{font-size:17px}
.cb-rating--inline .cb-rating__meta{font-size:12px}
.cb-rating--inline .cb-rating__arrow svg{width:14px;height:14px}
a.cb-rating--inline:hover{transform:none}
a.cb-rating--inline:hover .cb-rating__value{color:var(--coral-ink)}

@media (max-width:420px){
  .cb-rating{width:100%}
  .cb-rating__meta{font-size:12px}
}

/* ---------- Tresen ---------- */
/* Kopf, Streifen und Links liegen auf derselben Breite wie alle anderen
   Abschnitte. Der Streifen scrollt innerhalb dieser Breite. */
.cb-tresen__head{
  max-width:var(--max);margin:0 auto;
  padding:0 var(--pad-x) 16px;
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
}
.cb-tresen__title{font-size:clamp(26px,3.4vw,40px);letter-spacing:.02em}

.cb-tresen__tools{display:flex;align-items:center;gap:20px;flex-wrap:wrap}

.cb-tresen__nav{display:flex;gap:8px}
.cb-tresen__nav[hidden]{display:none}
.cb-tresen__btn{
  inline-size:38px;block-size:38px;padding:0;
  display:grid;place-items:center;cursor:pointer;
  background:none;color:var(--green);
  border:1px solid var(--line-soft);border-radius:999px;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.cb-tresen__btn svg{inline-size:17px;block-size:17px}
.cb-tresen__btn:hover:not(:disabled){
  background:var(--green);border-color:var(--green);color:var(--cream);
}
.cb-tresen__btn:disabled{opacity:.32;cursor:default}

/* Leiste unter dem Streifen: erklaert, dass die Auslage nur ein
   Ausschnitt ist, und fuehrt zu den vollstaendigen Karten. */
.cb-tresen__more{
  max-width:var(--max);margin:0 auto;
  padding:6px var(--pad-x) 4px;
  display:flex;flex-direction:column;gap:22px;align-items:flex-start;
}
.cb-tresen__more-item{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.cb-tresen__note{
  margin:0;font-size:16px;color:var(--sage);max-width:54ch;line-height:1.5;
}

/* Weiterfuehrender Link, einheitlicher Stil. */
.cb-morelink{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-util);font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--coral-ink);text-decoration:none;
  border-bottom:1px solid transparent;padding-block-end:2px;
  transition:border-color .16s ease,color .16s ease;
}
.cb-morelink:hover{border-color:var(--coral-ink);color:var(--green)}
.cb-morelink__arrow{line-height:0;transition:transform .16s ease}
.cb-morelink__arrow svg{width:14px;height:14px;display:block}
.cb-morelink:hover .cb-morelink__arrow{transform:translateX(3px)}

/* Groessere Variante, wenn der Link fuer sich steht und nicht nur
   eine Randnotiz ist. */
.cb-morelink--lg{
  font-family:var(--font-body);font-size:17px;font-weight:600;
  letter-spacing:0;text-transform:none;gap:9px;padding-block-end:3px;
}
.cb-morelink--lg .cb-morelink__arrow svg{width:17px;height:17px}

.cb-tresen{
  max-width:var(--max);margin:0 auto;
  display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  padding:6px var(--pad-x) 28px;
  scrollbar-width:thin;scrollbar-color:var(--line-soft) transparent;
}
/* Weiche Kante an der Seite, zu der noch etwas liegt. Die Maske sitzt am
   Element und wandert nicht mit dem Inhalt. Das Attribut setzt das Skript,
   deshalb erscheint nichts, wenn ohnehin alles sichtbar ist. */
.cb-tresen[data-overflow="right"]{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 96px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 calc(100% - 96px),transparent 100%);
}
.cb-tresen[data-overflow="left"]{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 72px);
  mask-image:linear-gradient(90deg,transparent 0,#000 72px);
}
.cb-tresen[data-overflow="both"]{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 72px,#000 calc(100% - 96px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 72px,#000 calc(100% - 96px),transparent 100%);
}
.cb-tresen:focus-visible{outline:2px solid var(--green);outline-offset:4px}

.cb-tresen::-webkit-scrollbar{height:6px}
.cb-tresen::-webkit-scrollbar-track{background:transparent}
.cb-tresen::-webkit-scrollbar-thumb{background:var(--line-soft);border-radius:3px}

.cb-plate{flex:0 0 auto;width:clamp(196px,22vw,264px);scroll-snap-align:start}

/* Der Rahmen schneidet das Bild beim Zoom sauber ab. Bewusst leise:
   die Karten verlinken nichts, ein Button waere eine falsche Faehrte. */
.cb-plate__media{
  display:block;overflow:hidden;border-radius:6px;
  background:var(--surface);margin-bottom:11px;
}
.cb-plate img,.cb-plate__blank{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .3s ease,filter .2s ease;
}
.cb-plate:hover img{transform:scale(1.05);filter:brightness(1.05)}

.cb-plate__row{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding-block-end:6px;border-bottom:1px solid var(--line);margin-block-end:7px;
}
.cb-plate__name{
  font-family:var(--font-util);font-weight:600;font-size:19px;letter-spacing:.01em;
  color:var(--green-deep);transition:color .2s ease;
}
.cb-plate__price{
  font-family:var(--font-util);font-size:19px;font-weight:600;
  color:var(--coral-ink);white-space:nowrap;
  font-variant-numeric:tabular-nums;transition:color .2s ease;
}
.cb-plate:hover .cb-plate__name{color:var(--green-deep)}
.cb-plate:hover .cb-plate__price{color:var(--coral)}
.cb-plate__desc{display:block;font-size:14px;color:var(--mute);margin-top:0;line-height:1.45}

@media (hover:none){
  .cb-plate:hover img{transform:none;filter:none}
}

/* ---------- Fakten-Streifen ---------- */
/* ==========================================================================
   Zwischenüberschrift zwischen Auslage und Catering
   Nimmt den Platz der frueheren Faktenzeile ein. Bewusst viel Luft,
   damit der Satz als Pause wirkt und nicht als weitere Zeile Information.
   ========================================================================== */
/* Zwischenüberschrift unter der Catering-Überschrift. Sie steht als
   Unterzeile im Abschnittskopf, nicht mehr als eigener Abschnitt, und
   bleibt deshalb deutlich kleiner als die Überschrift darüber. */
.cb-claim{
  margin:12px 0 0;max-width:26ch;
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(23px,3vw,38px);line-height:1.14;letter-spacing:.012em;
  color:var(--coral-ink);
}
.cb-claim em{
  font-family:var(--font-misc);font-style:normal;
  font-size:1.06em;letter-spacing:0;color:var(--coral);line-height:1.2;
}
.cb-claim strong{font-weight:400;color:var(--green-deep)}

.cb-cell{padding:0}
.cb-cell__key{
  font-family:var(--font-util);font-size:12.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin:0 0 8px;
}
.cb-cell__val{font-size:15px;line-height:1.55;margin:0}
.cb-cell__val strong{color:var(--green-deep);font-weight:600}


/* ==========================================================================
   Catering
   Flexbox statt Grid: bei einer Anzahl, die nicht durch drei teilbar ist,
   zentriert sich die letzte Reihe von selbst. Funktioniert fuer 2 bis 8
   Pakete ohne Anpassung.
   ========================================================================== */
.cb-pakete{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:16px;margin-bottom:32px;
}

/* Die Basis ist so gewaehlt, dass bei voller Inhaltsbreite genau drei
   Karten nebeneinander passen und keine vierte hineinrutscht. Wird das
   Fenster schmaler, bricht es auf zwei und dann auf eine um. */
.cb-paket{
  flex:1 1 380px;max-width:440px;
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);border-radius:8px;
  overflow:hidden;
  transition:border-color .18s ease,transform .18s ease;
}
.cb-paket:hover,.cb-paket:focus-within{
  border-color:var(--line-soft);transform:translateY(-2px);
}

/* ---------- Bild mit Hover-Ebene ---------- */
.cb-paket__media{
  position:relative;aspect-ratio:4/3;background:var(--ink);
}
.cb-paket__img{
  width:100%;height:100%;object-fit:cover;display:block;
}

.cb-paket__reveal{
  position:absolute;inset:0;
  display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(44,61,34,.28) 0%,rgba(44,61,34,.78) 100%);
  opacity:0;transition:opacity .18s ease;
}
.cb-paket:hover .cb-paket__reveal,
.cb-paket:focus-within .cb-paket__reveal{opacity:1}

.cb-paket__reveal .cb-btn{
  transform:translateY(8px);transition:transform .18s ease;
  font-size:14px;padding:11px 20px;
}
.cb-paket:hover .cb-paket__reveal .cb-btn,
.cb-paket:focus-within .cb-paket__reveal .cb-btn{transform:none}

/* Ohne Hover, also auf Touch, steht der Button dauerhaft unten im Bild. */
@media (hover:none){
  .cb-paket__reveal{
    opacity:1;align-items:end;padding:0 0 14px;
    background:linear-gradient(180deg,transparent 45%,rgba(44,61,34,.82) 100%);
  }
  .cb-paket__reveal .cb-btn{transform:none}
}

/* ---------- Text ---------- */
.cb-paket__body{
  padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;
  position:relative;
}
.cb-paket__title{font-family:var(--font-util);font-weight:600;font-size:23px;letter-spacing:.01em;margin:7px 0 9px}
.cb-paket__text{font-size:14px;color:var(--mute);margin:0 0 18px;line-height:1.55}

.cb-paket__foot{margin-block-start:auto}
.cb-paket__price{
  font-family:var(--font-util);font-size:15px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--coral-ink);margin:0 0 12px;
  font-variant-numeric:tabular-nums;
}

/* Der Link deckt die ganze Karte ab, damit ueberall geklickt werden kann.
   Sichtbar bleibt nur die Zeile unten, das haelt die Karte ruhig. */
.cb-paket__cta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:600;color:var(--green);
  text-decoration:none;transition:color .16s ease;
}
.cb-paket__cta::after{
  content:'';position:absolute;inset:0;border-radius:8px;
}
.cb-paket__cta-arrow{line-height:0;transition:transform .16s ease}
.cb-paket__cta-arrow svg{width:16px;height:16px;display:block}
.cb-paket:hover .cb-paket__cta{color:var(--coral-ink)}
.cb-paket:hover .cb-paket__cta-arrow{transform:translateX(4px)}
.cb-paket:focus-within{border-color:var(--pist)}
.cb-paket__cta:focus-visible{outline:none}
.cb-paket:focus-within{outline:2px solid var(--pist);outline-offset:3px}

/* Pakete ohne Bild bekommen oben etwas mehr Luft. */
.cb-paket:not(:has(.cb-paket__media)) .cb-paket__body{padding-top:24px}

@media (max-width:640px){
  .cb-paket{flex:1 1 100%;max-width:none}
}

/* ---------- Galerie ---------- */
.cb-gallery{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-inline:var(--pad-x);
  max-width:var(--max);margin-inline:auto;
}
.cb-gallery__item img{aspect-ratio:1;object-fit:cover;border-radius:6px;background:var(--surface)}
@media (max-width:800px){.cb-gallery{grid-template-columns:repeat(2,1fr)}}

/* ---------- Kontakt ---------- */
.cb-contact{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
@media (max-width:800px){.cb-contact{grid-template-columns:1fr}}

/* Bild vom Laden, fuellt die linke Spalte unter den Kontaktdaten. */
.cb-contact__figure{margin:28px 0 0}
.cb-contact__img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:8px;background:var(--surface);
}
@media (max-width:800px){
  .cb-contact__figure{margin-block-start:24px}
  .cb-contact__img{aspect-ratio:16/9}
}
.cb-map{
  margin-top:34px;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:var(--surface);
}
.cb-map iframe{display:block;width:100%;height:420px;border:0;filter:grayscale(.75) contrast(1.02)}

.cb-map__ask{
  min-height:280px;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:12px;padding:clamp(24px,4vw,44px);
  background:
    repeating-linear-gradient(45deg,transparent 0 14px,rgba(93,120,68,.14) 14px 15px),
    var(--surface);
}
.cb-map__addr{
  font-family:var(--font-display);font-weight:400;font-size:clamp(24px,3vw,32px);
  letter-spacing:.02em;color:var(--green-deep);margin:0;
}
.cb-map__hint{font-size:13.5px;color:var(--mute);margin:0;max-width:52ch;line-height:1.55}
.cb-map__ask .cb-actions{margin-block-start:6px}
.cb-embed{color:var(--sage)}

/* ---------- Anfrageformular ---------- */
.cb-form__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cb-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.cb-form__grid{grid-template-columns:1fr}}
.cb-form__row{margin:0;display:flex;flex-direction:column;gap:7px}
.cb-form__row--wide{grid-column:1 / -1}

.cb-form label{
  font-family:var(--font-util);font-size:13px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mute);
}
.cb-form__req{color:var(--coral-ink);margin-inline-start:2px}

.cb-form input[type=text],
.cb-form input[type=email],
.cb-form input[type=tel],
.cb-form input[type=date],
.cb-form input[type=number],
.cb-form textarea{
  width:100%;background:var(--surface);color:var(--chalk);
  border:1px solid var(--line);border-radius:var(--r);
  padding:12px 13px;font-family:var(--font-body);font-size:15px;
  transition:border-color .16s ease;
}
.cb-form input:hover,.cb-form textarea:hover{border-color:var(--line-soft)}
.cb-form input:focus,.cb-form textarea:focus{
  border-color:var(--green);outline:2px solid transparent;outline-offset:2px;
}
.cb-form textarea{resize:vertical;min-height:110px;line-height:1.6}

/* Kalender- und Zahlen-Symbole im dunklen Feld sichtbar machen. */
.cb-form input[type=date]::-webkit-calendar-picker-indicator{filter:none;opacity:.6}

.cb-form__check{margin:20px 0 0}
.cb-form__check label{
  display:flex;gap:10px;align-items:flex-start;
  font-family:var(--font-body);font-size:13.5px;letter-spacing:0;
  text-transform:none;color:var(--sage);line-height:1.5;cursor:pointer;
}
.cb-form__check input{margin-block-start:3px;accent-color:var(--green);flex:none}
.cb-form__check a{color:var(--coral-ink)}

.cb-form .cb-actions{margin-block-start:20px}
.cb-form button{cursor:pointer;font-family:var(--font-body)}

.cb-form__note{font-size:12.5px;color:var(--mute);margin:14px 0 0;line-height:1.55}

.cb-form select{
  width:100%;background:var(--surface);color:var(--chalk);
  border:1px solid var(--line);border-radius:var(--r);
  padding:12px 13px;font-family:var(--font-body);font-size:15px;
  transition:border-color .16s ease;
}
.cb-form select:hover{border-color:var(--line-soft)}
.cb-form select:focus{border-color:var(--green);outline:2px solid transparent}

.cb-form__estimate{
  display:block;margin-block-start:7px;
  font-family:var(--font-util);font-size:13.5px;font-weight:500;line-height:1.5;
  color:var(--coral-ink);
}

.cb-notice{
  border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin:0 0 20px;font-size:14.5px;
}
.cb-notice p{margin:0}
.cb-notice p + p{margin-block-start:6px}
.cb-notice--ok{border-color:var(--green);color:var(--green);background:var(--surface)}
.cb-notice--err{border-color:var(--coral);color:#A8492A;background:#FBEDE6}

/* ---------- Oeffnungszeiten-Liste ---------- */
.cb-hours{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;margin:16px 0}
.cb-hours__day{font-weight:600;color:var(--green-deep);font-size:15px}
.cb-hours__time{font-family:var(--font-util);font-size:15px;color:var(--green);font-variant-numeric:tabular-nums}

/* ==========================================================================
   Inhaltsseiten und Block-Editor
   Der Textkanal liegt in der Mitte, alignwide und alignfull brechen aus.
   ========================================================================== */
.cb-page{padding-block:var(--sec-y)}

/* Beitragsbild einer Seite. Liegt breiter als der Textkanal, damit es
   traegt, ohne den Text zu ueberlagern. */
.cb-page__figure{
  max-width:calc(68ch + 2 * 180px + 2 * var(--pad-x));
  margin:0 auto 34px;padding-inline:var(--pad-x);
}
.cb-page__img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:10px;background:var(--surface);
}
@media (max-width:640px){
  .cb-page__img{aspect-ratio:4/3}
}

.cb-wrap{
  max-width:calc(68ch + 2 * var(--pad-x));
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

.cb-page__title{font-size:clamp(36px,5.4vw,58px);line-height:1.02;letter-spacing:.012em;margin:0 0 26px}

.cb-prose{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--pad-x),1fr)
    [wide-start] minmax(0,180px)
    [content-start] min(68ch,100%) [content-end]
    minmax(0,180px) [wide-end]
    minmax(var(--pad-x),1fr) [full-end];
}
.cb-prose > *{grid-column:content}
.cb-prose > .alignwide{grid-column:wide}
.cb-prose > .alignfull{grid-column:full}

/* ---------- Fliesstext ---------- */
.cb-prose p,.cb-prose li{font-size:17px;line-height:1.7}
.cb-prose > * + *{margin-block-start:20px}
.cb-prose h2{font-size:clamp(21px,2.6vw,27px);margin-block-start:44px;text-transform:none;letter-spacing:-.02em}
.cb-prose h3{font-size:20px;margin-block-start:34px;text-transform:none;letter-spacing:-.015em}
.cb-prose h4{font-size:17px;margin-block-start:28px;text-transform:none}
.cb-prose strong{color:var(--green-deep);font-weight:600}
.cb-prose a{color:var(--coral-ink);text-decoration:underline;text-decoration-color:var(--line-soft)}
.cb-prose a:hover{text-decoration-color:var(--coral-ink)}

/* ---------- Listen ---------- */
.cb-prose ul,.cb-prose ol{padding-inline-start:22px}
.cb-prose ul li{list-style:disc}
.cb-prose ol li{list-style:decimal}
.cb-prose li + li{margin-block-start:7px}
.cb-prose li::marker{color:var(--mute)}

/* ---------- Bilder ---------- */
.cb-prose figure{margin:0}
.cb-prose img{border-radius:6px}
.cb-prose figcaption,.wp-element-caption{
  font-family:var(--font-util);font-size:12px;color:var(--mute);
  margin-block-start:9px;text-align:start;
}
.cb-prose .alignfull img{border-radius:0}

/* ---------- Blocks ---------- */
.wp-block-quote{
  border-inline-start:2px solid var(--coral);
  padding-inline-start:20px;margin-inline:0;
}
.wp-block-quote p{font-size:19px;color:var(--green-deep)}
.wp-block-quote cite{
  display:block;margin-block-start:10px;font-style:normal;
  font-family:var(--font-util);font-size:12px;color:var(--mute);
}

.wp-block-separator{
  border:0;border-top:1px solid var(--line);
  margin-block:44px;max-width:none;
}

.wp-block-button__link{
  background:var(--green);color:var(--cream);
  border-radius:var(--r);padding:13px 22px;
  font-weight:600;font-size:15px;text-decoration:none;
}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;color:var(--green);border:1px solid var(--line-soft);
}

.wp-block-table{overflow-x:auto}
.wp-block-table table{border-collapse:collapse;width:100%;font-size:15px}
.wp-block-table th,.wp-block-table td{
  border:1px solid var(--line);padding:11px 14px;text-align:start;
}
.wp-block-table th{color:var(--green-deep);font-weight:600;background:var(--surface)}

.wp-block-group.has-background,.wp-block-column.has-background{
  padding:24px;border-radius:6px;
}

.wp-block-columns{gap:26px}

.wp-block-code,.cb-prose pre{
  background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:16px;overflow-x:auto;font-family:ui-monospace,monospace;font-size:13px;
}

/* ---------- Farbklassen aus dem Editor ---------- */
.has-cream-color{color:#F5F1E9}
.has-surface-color{color:#EFEADF}
.has-green-color{color:#5D7844}
.has-green-deep-color{color:#3E5430}
.has-coral-color{color:#C0603A}
.has-mute-color{color:#8B9B7C}

.has-cream-background-color{background-color:#F5F1E9}
.has-surface-background-color{background-color:#EFEADF}
.has-green-background-color{background-color:#5D7844}
.has-green-deep-background-color{background-color:#3E5430}
.has-coral-background-color{background-color:#F58A61}
.has-mute-background-color{background-color:#8B9B7C}

.has-small-font-size{font-size:14px}
.has-normal-font-size{font-size:17px}
.has-large-font-size{font-size:22px}

.cb-list{display:grid;gap:26px}
.cb-list__title{font-family:var(--font-util);font-weight:600;font-size:24px;letter-spacing:.01em}
.cb-list__title a{text-decoration:none}
.cb-list__excerpt{color:var(--mute);font-size:15px}
.cb-pagination{margin-top:40px;font-family:var(--font-util);font-size:13px}

/* ---------- Fuss ---------- */
.cb-footer{border-top:1px solid var(--line);background:var(--surface)}
.cb-footer__inner{
  max-width:var(--max);margin:0 auto;padding:var(--sec-y) var(--pad-x) 34px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
}
@media (max-width:900px){.cb-footer__inner{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cb-footer__inner{grid-template-columns:1fr}}
.cb-footer__key{
  font-family:var(--font-util);font-size:12.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin:0 0 10px;
}
.cb-footer__addr,.cb-footer__val{font-size:14px;margin:14px 0 0;line-height:1.6}
.cb-footer__list{display:grid;gap:6px;font-size:14px}
.cb-footer__list a{text-decoration:none;color:var(--green)}
.cb-footer__list a:hover{color:var(--coral-ink)}
.cb-footer__note{
  max-width:var(--max);margin:0 auto;padding:18px var(--pad-x) 40px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--mute);
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ==========================================================================
   Karten-Seiten und Catering-Bild
   ========================================================================== */

/* Auf Karten-Seiten liegen die Bilder breiter als der Textkanal,
   damit man ohne Zoom lesen kann. */
.cb-prose--karte{
  grid-template-columns:
    [full-start] minmax(var(--pad-x),1fr)
    [wide-start] minmax(0,320px)
    [content-start] min(68ch,100%) [content-end]
    minmax(0,320px) [wide-end]
    minmax(var(--pad-x),1fr) [full-end];
}
.cb-prose--karte > .alignwide img,
.cb-prose--karte > figure.alignwide img{
  border:1px solid var(--line);border-radius:8px;background:var(--surface);
}
.cb-page--karte .cb-prose > * + *{margin-block-start:24px}
.cb-page__foot{margin-block-start:48px}

/* Bild im Catering-Abschnitt, zwischen Ueberschrift und Paketen. */
.cb-catering__figure{margin:0 0 30px}
.cb-catering__img{
  width:100%;aspect-ratio:21/6;object-fit:cover;display:block;
  border-radius:8px;background:var(--surface);
}
@media (max-width:700px){
  .cb-catering__img{aspect-ratio:16/9}
}

/* Der Link zur ausfuehrlichen Karte steht unter den Buttons, nicht
   daneben. Drei Elemente in einer Reihe verwaessern den Haupt-Button. */
.cb-section .cb-actions + .cb-morelink{margin-block-start:22px}

/* ==========================================================================
   Über uns
   Zwei Reihen im Wechsel: Text und Bild tauschen die Seite. Auf Mobil
   steht das Bild immer oben, damit der Rhythmus nicht zufaellig wirkt.
   ========================================================================== */
.cb-about{
  max-width:var(--max);margin:0 auto;padding-inline:var(--pad-x);
  display:flex;flex-direction:column;gap:clamp(44px,7vw,88px);
  margin-block-start:clamp(36px,5vw,64px);
}

.cb-about__intro{margin-block-end:8px}
.cb-about__intro p{font-size:19px;color:var(--green);max-width:60ch}

.cb-about__row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,56px);align-items:center;
}
.cb-about__row--flip .cb-about__text{order:2}
.cb-about__row--flip .cb-about__media{order:1}

.cb-about__title{
  font-family:var(--font-script);font-size:clamp(28px,3.4vw,40px);
  letter-spacing:.02em;margin:0 0 14px;
}
.cb-about__text p{
  font-size:17px;line-height:1.7;color:var(--green);margin:0 0 14px;max-width:46ch;
}
.cb-about__text p:last-child{margin-bottom:0}

.cb-about__media{margin:0}
.cb-about__img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:10px;background:var(--surface);
}

@media (max-width:820px){
  .cb-about__row,.cb-about__row--flip{grid-template-columns:1fr}
  .cb-about__row .cb-about__text,
  .cb-about__row--flip .cb-about__text{order:2}
  .cb-about__row .cb-about__media,
  .cb-about__row--flip .cb-about__media{order:1}
  .cb-about__img{aspect-ratio:16/10}
}

/* ==========================================================================
   Partnerleiste
   Logos in Graustufen, damit unterschiedliche Hausfarben die Reihe nicht
   auseinanderreissen. Beim Ueberfahren kommt die Farbe zurueck.
   ========================================================================== */
.cb-partners{
  margin-block-start:clamp(52px,8vw,96px);
  padding-block:clamp(36px,5vw,60px);
  border-top:1px solid var(--line);
  background:var(--surface);
}
.cb-partners__head{margin-bottom:26px}
.cb-partners__title{
  font-family:var(--font-display);font-size:clamp(22px,2.6vw,30px);
  letter-spacing:.03em;margin:0;
}
.cb-partners__note{
  font-size:15px;color:var(--mute);margin:6px 0 0;max-width:56ch;
}

.cb-partners__list{
  max-width:var(--max);margin:0 auto;padding-inline:var(--pad-x);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(24px,4vw,54px);
}
.cb-partners__item{display:flex;align-items:center}
.cb-partners__logo{
  max-height:46px;width:auto;display:block;
  filter:grayscale(1);opacity:.62;
  transition:filter .2s ease,opacity .2s ease;
}
.cb-partners__item:hover .cb-partners__logo{filter:grayscale(0);opacity:1}

@media (max-width:640px){
  .cb-partners__list{gap:22px 28px}
  .cb-partners__logo{max-height:36px}
}
@media (hover:none){
  .cb-partners__logo{filter:grayscale(0);opacity:.9}
}

/* ==========================================================================
   Speisenliste auf Karten-Seiten
   Erzeugt vom Shortcode [culinary_auslage]. Punktfuehrung zwischen Name
   und Preis wie auf einer gedruckten Karte.
   ========================================================================== */
.cb-menuliste{margin:0;padding:0;list-style:none}
.cb-menuliste__item{padding-block:14px;border-bottom:1px solid var(--line)}
.cb-menuliste__item:last-child{border-bottom:0}

.cb-menuliste__zeile{
  display:flex;align-items:baseline;gap:10px;margin:0;
}
.cb-menuliste__name{
  font-family:var(--font-util);font-weight:600;font-size:19px;
  letter-spacing:.01em;color:var(--green-deep);
}
.cb-menuliste__punkte{
  flex:1;min-inline-size:24px;align-self:end;margin-block-end:5px;
  border-bottom:1px dotted var(--line-soft);
}
.cb-menuliste__preis{
  font-family:var(--font-util);font-weight:600;font-size:19px;
  color:var(--coral-ink);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.cb-menuliste__desc{
  margin:4px 0 0;font-size:15px;color:var(--mute);line-height:1.5;max-width:60ch;
}

/* Mit Bildern: kleine Vorschau links neben dem Text. */
.cb-menuliste--bilder .cb-menuliste__item{
  display:flex;gap:16px;align-items:flex-start;
}
.cb-menuliste--bilder .cb-menuliste__text{flex:1;min-inline-size:0}
.cb-menuliste__img{
  inline-size:88px;block-size:66px;object-fit:cover;
  border-radius:6px;background:var(--surface);flex:none;
}
@media (max-width:520px){
  .cb-menuliste__img{inline-size:64px;block-size:48px}
  .cb-menuliste__name,.cb-menuliste__preis{font-size:17px}
}

/* Zurueckgenommene Hauptueberschrift, etwa auf Ueber uns. Sie bleibt
   sichtbar und vorlesbar, tritt aber optisch hinter die Bloecke zurueck. */
.cb-page__title--klein{
  font-size:clamp(24px,2.6vw,34px);
  color:var(--mute);
  margin-block-end:6px;
}
/* Hauptüberschrift auf Über uns optisch entfernen, aber im Dokument
   belassen. Jede Seite braucht genau eine H1: Screenreader kündigen
   damit an, worum es geht, und Suchmaschinen erkennen das Thema.
   display:none würde sie aus beidem entfernen. */
.cb-page--about .cb-page__title{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
/* ==========================================================================
   Catering-Karten, Aenderungswuensche Kunde September 2026
   Anlasszeile, Beliebt-Badge, Preisformat, Auffangbereich.
   ========================================================================== */

/* Preis nicht mehr in Versalien, sonst wird daraus "AB 22 € P. P.". */
.cb-paket__price{
  text-transform:none;letter-spacing:.01em;font-size:16px;
}

/* Anlasszeile, steht unter dem Paketnamen */
.cb-paket__occasion{
  font-family:var(--font-util);font-size:13.5px;font-weight:600;
  color:var(--green);line-height:1.4;margin:0 0 10px;
}

/* Badge. Oben rechts in der Kartenecke, bewusst aus dem Textfluss
   genommen, damit die Titel aller Karten auf einer Linie bleiben. */
.cb-paket{position:relative}
.cb-paket__badge{
  position:absolute;top:12px;right:12px;z-index:2;
  margin:0;padding:4px 10px;border-radius:999px;
  background:var(--green);color:var(--cream);
  font-family:var(--font-util);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;
}
/* Platz freihalten, damit ein langer Titel nicht unter das Badge laeuft. */
.cb-paket--featured .cb-paket__title{padding-inline-end:95px}

/* Hervorgehobene Karte. Nur der Rahmen, keine Groessenaenderung. */
.cb-paket--featured{border-color:var(--green)}
.cb-paket--featured:hover,
.cb-paket--featured:focus-within{border-color:var(--green-deep)}

/* Auffangbereich unter den Paketen */
.cb-catch{
  max-width:640px;margin:0 auto;padding:28px 26px;
  background:var(--surface);
  border:1px solid var(--line);border-radius:8px;
  text-align:center;
}
.cb-section--tint .cb-catch{background:var(--cream)}
.cb-catch__title{
  font-family:var(--font-util);font-weight:600;font-size:21px;
  letter-spacing:.01em;margin:0 0 8px;
}
.cb-catch__text{
  font-size:15px;color:var(--mute);line-height:1.6;margin:0 0 18px;
}
.cb-catch .cb-actions{justify-content:center}

/* Abstand zum Weiterlesen-Link haengt bisher an cb-actions. */
.cb-section .cb-catch + .cb-morelink{margin-block-start:22px}

@media (max-width:600px){
  .cb-catch{padding:24px 18px}
  .cb-catch .cb-btn{flex:1 1 100%;text-align:center}
}

/* Sprungbutton im Catering-Kopf */
.cb-catering__jump{margin:18px 0 0}
.cb-catering__jump .cb-btn span{margin-inline-start:6px}
.cb-section__title br{display:block}

/* ==========================================================================
   Anfrageformular, Umbau September 2026.
   Unterzeile im Abschnittskopf, Planungshinweise, Bestaetigung.
   ========================================================================== */

/* Anfrage-Kopf, steht in der rechten Spalte ueber den Hinweisen. */
.cb-ask{margin:0 0 20px}
.cb-ask__title{font-size:32px;line-height:1.1;margin:0 0 10px}
.cb-ask__lead{
  margin:0;font-size:16px;line-height:1.6;color:var(--mute);
}
.cb-ask__hint{
  margin:8px 0 0;
  font-family:var(--font-util);font-size:13px;color:var(--mute);
}

@media (max-width:600px){
  .cb-ask__title{font-size:27px}
}

/* Planungshinweise ueber dem Formular */
.cb-plan{
  margin:0 0 22px;padding:20px 22px;
  background:var(--surface);
  border:1px solid var(--line);border-radius:8px;
}
.cb-plan__title{
  font-family:var(--font-util);font-weight:600;font-size:19px;
  letter-spacing:.01em;margin:0 0 8px;
}
.cb-plan__lead{
  font-size:14.5px;color:var(--mute);line-height:1.55;margin:0 0 14px;
}
.cb-plan__list{
  list-style:none;margin:0 0 14px;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
.cb-plan__list li{margin:0}
.cb-plan__list strong{
  display:block;
  font-family:var(--font-util);font-size:14px;font-weight:600;color:var(--green);
}
.cb-plan__list span{
  display:block;font-size:13.5px;color:var(--mute);line-height:1.5;
}
.cb-plan__note{
  margin:0;padding-block-start:14px;
  border-block-start:1px solid var(--line);
  font-size:13.5px;color:var(--mute);line-height:1.55;
}
.cb-plan__note strong{color:var(--ink)}

/* Bestaetigung nach erfolgreicher Anfrage. Ersetzt das Formular. */
.cb-confirm{
  padding:28px 26px;
  background:var(--surface);
  border:1px solid var(--green);border-radius:8px;
}
.cb-confirm__title{
  font-family:var(--font-util);font-weight:600;font-size:22px;
  letter-spacing:.01em;margin:0 0 10px;color:var(--green);
}
.cb-confirm p{
  font-size:15px;line-height:1.6;margin:0 0 12px;
}
.cb-confirm__sign{
  margin:0;font-family:var(--font-util);font-weight:600;
}

@media (max-width:600px){
  .cb-plan{padding:18px 16px}
  .cb-confirm{padding:22px 18px}
}