/* CaInn 2026 — Gestaltung nach Entwurf G „Split“, Stand v0_3
   Erzeugt aus dem Entwurfsgenerator, nicht von Hand geaendert. */
/* --- Schrift aus dem eigenen Haus --- */
/* Bis 0.9.48 stand im Schriftstapel nur der Name "Inter", ohne dass die Schrift
   jemals geladen wurde. Wer sie nicht zufaellig auf dem Geraet hatte - das sind
   fast alle - sah die Systemschrift: San Francisco, Segoe oder Roboto. Der
   Auftritt sah also auf jedem Geraet anders aus.

   Jetzt liegt die Datei im Theme. Eine einzige Datei von 48 kB deckt alle
   Staerken von 100 bis 900 ab, weil es eine variable Schrift ist. Geladen wird
   vom eigenen Server - kein Abruf bei Google, keine Einwilligung noetig.

   Der Pfeil U+2192 fehlt im Zeichenvorrat dieser Datei. Statt die vollstaendige
   Fassung zu laden, traegt ihn eine 964 Byte grosse Ergaenzung, die der Browser
   nur holt, wenn der Pfeil auf der Seite vorkommt (unicode-range). */
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin-variable.woff2") format("woff2-variations"),
      url("../fonts/inter-latin-variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/cainn-inter-pfeil.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+2192;
}

:root{
    --w:#F6F4EF; --k:#050506; --k2:#0E0E10; --g:#7A7B7F; --gl:#E4E0D8;
    --f:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --pad:clamp(18px,4.5vw,64px);
  }
  *{box-sizing:border-box}
  /* iOS Safari vergroessert Schrift in Bloecken, die es fuer zu breit haelt,
     eigenmaechtig und je Block unterschiedlich. Im Laufband - ein Block von
     mehreren tausend Pixeln Breite - fuehrte das dazu, dass einzelne
     Eintraege groesser erschienen als die anderen, obwohl alle 12 Pixel
     tragen. 100% schaltet nur diese Automatik ab; Zoom und die vom Nutzer
     eingestellte Schriftgroesse bleiben unberuehrt. */
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{margin:0;background:var(--k);color:#fff;font-family:var(--f);font-weight:400;line-height:1.5;
    -webkit-font-smoothing:antialiased;font-synthesis:none}
  a{color:inherit;text-decoration:none}
  .eyebrow{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;margin:0 0 20px;color:#9A9B9E}
  .tag .eyebrow{color:#6C6D71}
  .gross{font-weight:200;letter-spacing:-.03em;line-height:.98;font-size:clamp(42px,8vw,120px);margin:0;text-wrap:balance}
  .mittel{font-weight:300;letter-spacing:-.015em;line-height:1.12;font-size:clamp(25px,3.6vw,50px);margin:0;text-wrap:balance}
  .lauf-t{font-size:clamp(15px,1.35vw,18px);line-height:1.68;max-width:54ch;color:#C5C6C4}
  .tag .lauf-t{color:#3E3F43}
  .tag{background:var(--w);color:#141517}
  .sec{padding:clamp(64px,9vw,128px) var(--pad)}
  .knopf{display:inline-block;padding:16px 26px;background:#fff;color:#050506;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
  .tag .knopf{background:#141517;color:#fff}
  .knopf.r{background:transparent;color:inherit;border:1px solid currentColor}
  .led-linie{height:1px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.7),0 0 34px rgba(255,255,255,.28);opacity:.8}
  .zt{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:15px}
  .tag .zt{border-bottom-color:var(--gl)}
  .zt span:last-child{font-variant-numeric:tabular-nums;color:#B9BAB8;white-space:nowrap}
  .tag .zt span:last-child{color:#3E3F43}
  .gericht{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start;padding:20px 0;border-top:1px solid rgba(255,255,255,.14)}
  .tag .gericht{border-top-color:var(--gl)}
  .gericht:last-of-type{border-bottom:1px solid rgba(255,255,255,.14)}
  .tag .gericht:last-of-type{border-bottom-color:var(--gl)}
  .gericht .n{font-weight:300;font-size:clamp(20px,2.3vw,31px);letter-spacing:-.015em;line-height:1.12}
  .gericht .b{font-size:13.5px;color:#93948F;margin-top:6px;display:block}
  .tag .gericht .b{color:var(--g)}
  .gericht .p{margin-top:19px;font-weight:300;font-size:clamp(19px,2vw,26px);font-variant-numeric:tabular-nums}
  .gericht .pos{font-size:10.5px;letter-spacing:.14em;color:#83847F;display:block;margin-bottom:8px}
  .tag .gericht .pos{color:#A9A59D}
  .marquee{overflow:hidden;border-top:1px solid rgba(255,255,255,.28);border-bottom:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.03)}
  /* Die Dauer kommt aus der Vorlage und waechst mit der Zahl der Eintraege,
     damit das Band immer gleich schnell laeuft - ob null oder fuenf Konzerte
     anstehen. 42s stammen aus der Fassung mit neun Eintraegen. */
  .marquee .lauf{display:flex;width:max-content;animation:lauf var(--laufdauer,42s) linear infinite}
  .marquee span{padding:15px 0;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#fff;white-space:nowrap}
  .marquee span::after{content:"·";margin:0 32px;color:rgba(255,255,255,.4)}
  .marquee .hot{font-weight:600}
  @keyframes lauf{to{transform:translateX(-50%)}}
  .mob{position:fixed;bottom:0;left:0;right:0;z-index:50;display:none;grid-template-columns:repeat(3,1fr);gap:1px;background:#2A2B2E}
  .mob a{background:#000;color:#fff;text-align:center;padding:15px 8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
  @media (max-width:760px){.mob{display:grid}body{padding-bottom:52px}}
  footer{background:var(--k);color:#9FA0A0;padding:clamp(52px,7vw,92px) var(--pad);font-size:13.5px;line-height:1.8}
  footer a{color:#DCDCDA}
  footer .led-f{width:130px;height:auto;display:block;margin-bottom:16px}
  .led-u{width:clamp(150px,20vw,260px);height:auto;display:block}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee .lauf{animation:none;flex-wrap:wrap;width:auto}.led-gross{animation:none}}

  footer .fg{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px;max-width:1280px;margin:0 auto}
  footer a{display:block;padding:3px 0}
  footer .sp{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#6E6F72;margin-bottom:12px}
  @media (max-width:860px){footer .fg{grid-template-columns:1fr 1fr}}

  .g-wrap{display:grid;grid-template-columns:clamp(300px,24vw,380px) 1fr;min-height:100vh}
  /* Die Seitenleisten trugen einen radialen Verlauf, der ausgerechnet hinter
     dem Logo aufhellte. Bei einer Leuchtschrift ist das kontraproduktiv: Der
     Schein lebt vom dunklen Grund, und zwei Lichtquellen uebereinander - eine
     davon ohne erkennbare Form - lesen sich als freigestelltes Bild auf
     falschem Hintergrund. Jetzt dasselbe Schwarz wie im Inhaltsbereich, damit
     an der Kante kein Helligkeitssprung steht. */
  .g-seite{position:sticky;top:0;height:100vh;padding:clamp(28px,3vw,46px);display:flex;flex-direction:column;
    justify-content:space-between;border-right:1px solid rgba(255,255,255,.14);
    background:var(--k)}
  .g-seite .led-s{width:100%;max-width:290px;height:auto;display:block}
  .g-nav{margin:34px 0}
  .g-nav a{display:block;padding:9px 0;font-weight:300;font-size:clamp(20px,2.1vw,28px);letter-spacing:-.015em;color:#E9E9E7;transition:color .2s}
  .g-nav a:hover{color:#fff}
  .g-nav .nr{font-size:11px;letter-spacing:.2em;color:#6E6F72;margin-right:12px;vertical-align:5px}
  .g-meta{font-size:13px;color:#8B8C8F;line-height:1.75}
  .g-meta a{color:#E2E2E0}
  .g-jetzt{border:1px solid rgba(255,255,255,.22);padding:14px 16px;margin-bottom:20px}
  .g-jetzt b{display:block;font-weight:500;font-size:14px;letter-spacing:.02em;color:#fff;margin-bottom:3px}
  /* Das display:block der Zeile darueber schlaegt die Voreinstellung des
     Browsers fuer [hidden] - ohne diese Regel stehen alle vorgehaltenen
     Termine gleichzeitig im Kasten statt nur der naechste. */
  .g-jetzt b[hidden]{display:none}
  .g-jetzt span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#9B9C9F}
  .g-inhalt{min-width:0}
  .g-kap{padding:clamp(52px,7vw,104px) clamp(24px,4vw,72px);border-bottom:1px solid rgba(255,255,255,.14)}
  .g-kap.tag{border-bottom-color:var(--gl)}
  .g-kap h2{margin:0 0 30px}
  .g-zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.5vw,56px)}
  /* Zwei Spalten erst, wenn jede Spalte noch eine brauchbare Zeilenlaenge hat.
     Bei 1280 px Fensterbreite blieben je Spalte nur rund 41 Zeichen — zu wenig;
     als lesbar gelten 45 bis 75. Darunter also einspaltig. */
  @media (max-width:1340px){.g-zwei{grid-template-columns:1fr;gap:22px}}
  /* Der Lieferblock traegt links eine lange Liste und rechts drei kurze
     Bloecke. Bei 1:1 brechen links die Beschreibungen um, waehrend rechts
     unten Platz leer bleibt. 1,4:1 gleicht das aus. Unterhalb von 1340
     Pixeln steht ohnehin alles untereinander - dort aendert sich nichts. */
  .g-zwei.g-liefer{grid-template-columns:1.4fr 1fr}
  @media (max-width:1340px){.g-zwei.g-liefer{grid-template-columns:1fr}}
  @media (max-width:980px){
    .g-wrap{grid-template-columns:1fr}
    .g-seite{position:static;height:auto;border-right:none;border-bottom:1px solid rgba(255,255,255,.14);
      padding:34px var(--pad) 28px;text-align:center;align-items:center}
    .g-nav{margin:24px 0 20px}
    .g-seite .led-s{max-width:min(48vw,230px);margin:0 auto}
    .g-nav{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center}
    .g-nav .nr{display:none}
  }
  /* Linien als Schatten auf den Kacheln, nicht als Rasterhintergrund: sonst
     scheint bei drei Kacheln in zwei Spalten die vierte, leere Zelle grau
     durch. Gleiche Loesung wie beim Verweisblock .v-raster. */
  .g-liste{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.14);overflow:hidden;margin-top:8px}
  /* Die Felder sind Verweise. Sie sollen aber keine Schaltflaechen werden:
     derselbe ruhige Block wie vorher, der Hinweis kommt erst beim Darueberfahren
     - und beim Tasten als sichtbarer Rahmen, damit der Weg ohne Maus erkennbar
     bleibt. */
  .g-liste a{display:block;background:var(--k);padding:22px;color:inherit;
    box-shadow:-1px 0 0 rgba(255,255,255,.14),0 -1px 0 rgba(255,255,255,.14);
    transition:background .2s}
  .g-liste a:hover{background:#121317}
  .g-liste a:hover span{color:#C9CACD}
  .g-liste a:focus-visible{outline:2px solid #fff;outline-offset:-3px}
  .g-liste b{display:block;font-weight:200;font-size:clamp(24px,2.8vw,38px);letter-spacing:-.02em;margin-bottom:4px}
  .g-liste span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#8B8C8F;transition:color .2s}
  @media (max-width:760px){.g-liste{grid-template-columns:1fr 1fr}}
  /* Auf dem Handy brauchen Verweise eine greifbare Flaeche. */
  @media (max-width:560px){.g-liste a{padding:20px 18px}}
  /* Adresse, Telefon und der naechste Abend stehen auf dem Handy sonst vor
     der Aussage der Seite - dort uebernimmt die feste Leiste unten. Die
     springt aber erst bei 760 Pixeln ein: Zwischen 761 und 980 Pixeln, also
     auf dem Tablet im Hochformat, gab es dadurch weder die Leiste noch den
     Block - und damit keinen schnellen Weg zur Telefonnummer. */
  @media (max-width:760px){.g-seite .g-meta{display:none}}
  .g-abend{border-top:1px solid rgba(255,255,255,.14);padding:22px 0}
  .g-abend .wann{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#8B8C8F;margin-bottom:7px}
  .g-abend h3{margin:0 0 7px;font-weight:300;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.015em}
  .g-karte{border:1px solid var(--gl);padding:clamp(24px,3vw,40px)}
  .g-karte h3{margin:0 0 9px;font-weight:300;font-size:clamp(21px,2.4vw,30px);letter-spacing:-.015em}
  .g-karte p{margin:0;font-size:14px;color:var(--g);line-height:1.6}
  .g-karte .pf{margin-top:18px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

/* --- Ergaenzungen fuer den Betrieb in WordPress --- */
  .spring{position:absolute;left:-9999px;top:0;background:#fff;color:#050506;padding:12px 18px;z-index:99;
    font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
  .spring:focus{left:0}
  :focus-visible{outline:2px solid #fff;outline-offset:3px}
  .tag :focus-visible{outline-color:#141517}
  /* Navigation: Nummern kommen aus CSS, damit ein WordPress-Menue sie mitbringt */
  .g-nav{counter-reset:navnr}
  .g-nav a::before{counter-increment:navnr;content:"0" counter(navnr);font-size:11px;letter-spacing:.2em;
    color:#6E6F72;margin-right:12px;vertical-align:5px}
  @media (max-width:980px){.g-nav a::before{display:none}}
  /* Einzelseiten (Impressum, Datenschutz und alles Weitere) */
  .einzeln{max-width:960px;margin:0 auto}
  .fliess{font-size:clamp(15px,1.35vw,17px);line-height:1.75;color:#C5C6C4;max-width:70ch;margin-top:26px}
  /* Aus dem alten Seitenbaukasten stammen mittig gesetzte Absaetze. Im Haus
     steht alles linksbuendig; die Ausnahme hier ist noetig, weil die alte
     Ausrichtung als Inline-Angabe im Text steckt. */
  .k-inhalt .fliess,
  .k-inhalt .fliess *{text-align:left !important}
  .fliess h2{font-weight:300;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.015em;margin:38px 0 12px;color:#fff}
  .fliess h3{font-weight:400;font-size:clamp(18px,1.9vw,22px);margin:28px 0 10px;color:#fff}
  .fliess a{text-decoration:underline;text-underline-offset:3px}
  .fliess ul,.fliess ol{padding-left:20px}
  .fliess li{margin-bottom:8px}
  .fliess img{max-width:100%;height:auto}

/* --- Speise- und Getraenkekarte --- */
  .k-wrap{display:grid;grid-template-columns:clamp(280px,21vw,340px) 1fr;min-height:100vh}
  .k-seite{position:sticky;top:0;height:100vh;padding:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;
    justify-content:space-between;border-right:1px solid rgba(255,255,255,.14);
    background:var(--k)}
  .k-marke{display:block}
  .k-seite .led-s{width:100%;max-width:230px;height:auto;display:block}
  .k-nav{margin:30px 0;display:flex;flex-direction:column;gap:2px}
  .k-nav a{padding:7px 0;font-weight:300;font-size:clamp(17px,1.7vw,21px);letter-spacing:-.01em;color:#E9E9E7}
  .k-nav a:hover{color:#fff}
  .k-inhalt{min-width:0}
  .k-kopf{padding:clamp(48px,6vw,90px) clamp(24px,4vw,72px) clamp(30px,4vw,54px)}
  .k-kap{padding:clamp(36px,4.2vw,60px) clamp(24px,4vw,72px);border-top:1px solid rgba(255,255,255,.14)}
  .k-kap > *:last-child{margin-bottom:0}
  .k-kap.tag{border-top-color:var(--gl)}
  .k-kap h2{margin:0 0 26px}
  .k-vor{font-size:14.5px;color:#9B9C9F;margin:-14px 0 24px;max-width:62ch;line-height:1.6}
  .tag .k-vor{color:var(--g)}
  .k-nach{font-size:13px;color:#8B8C8F;margin-top:16px}
  .k-hinweis{font-size:13px;line-height:1.7;color:#9B9C9F;border-left:2px solid rgba(255,255,255,.3);
    padding-left:14px;margin:0 0 24px;max-width:62ch}
  .tag .k-hinweis{color:var(--g);border-left-color:#C9C5BC}
  .k-zutaten{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 40px;margin-top:30px}
  .k-zutaten .zt-t{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#83847F}
  .k-zutaten p{margin:7px 0 0;font-size:14px;line-height:1.6;color:#C5C6C4}
  .k-getraenke{max-width:920px}
  .k-gruppe{border-top:1px solid var(--gl)}
  .k-gruppe:last-of-type{border-bottom:1px solid var(--gl)}
  .k-gruppe>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;
    gap:16px;padding:16px 0;font-weight:300;font-size:clamp(18px,2vw,24px);letter-spacing:-.01em;color:#141517}
  .k-gruppe>summary::-webkit-details-marker{display:none}
  .k-gruppe>summary::after{content:"+";font-weight:200;font-size:22px;color:var(--g);line-height:1}
  .k-gruppe[open]>summary::after{content:"\2013"}
  .k-gruppe>summary .z{font-size:11.5px;letter-spacing:.14em;color:#A9A59D;margin-left:auto;margin-right:14px}
  .k-gruppe[open]{padding-bottom:16px}
  .k-drink{padding:7px 0;border-top:1px solid var(--gl)}
  .k-drink .n{display:block;font-weight:300;font-size:16px;letter-spacing:-.005em;color:#141517}
  .k-drink .b{display:block;font-size:12.5px;color:var(--g);margin-top:2px;line-height:1.45}
  .k-allergene{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 28px;font-size:13px;color:#9B9C9F}
  .k-allergene b{color:#fff;font-weight:500;margin-right:5px}
  @media (max-width:980px){
    .k-wrap{grid-template-columns:1fr}
    .k-seite{position:static;height:auto;border-right:none;border-bottom:1px solid rgba(255,255,255,.14);
      padding:30px var(--pad) 26px;text-align:center;align-items:center}
    /* Auf dem Handy trug das Zeichen hier 62 Prozent der Bildbreite, auf der
       Startseite 48 - beim Wechsel sprang es um 29 Prozent. Jetzt derselbe
       Wert wie dort. */
    .k-seite .led-s{max-width:min(48vw,230px);margin:0 auto}
    .k-nav{flex-direction:row;flex-wrap:wrap;gap:4px 20px;justify-content:center;margin:22px 0 18px}
  }
  @media (max-width:760px){.k-getraenke{columns:1}.k-zutaten,.k-allergene{grid-template-columns:1fr}}
  /* Liefergebiet */
  .l-gebiet{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.14);max-width:920px}
  .tag .l-gebiet{background:var(--gl);border-color:var(--gl)}
  .l-zone{background:var(--k);padding:20px 22px}
  .tag .l-zone{background:var(--w)}
  .l-zone b{display:block;font-weight:200;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;margin-bottom:8px}
  .l-zone span{font-size:13.5px;line-height:1.6;color:#9B9C9F;display:block}
  .tag .l-zone span{color:var(--g)}
  @media (max-width:760px){.l-gebiet{grid-template-columns:1fr}}
  /* Navigationsmenue aus WordPress: die Listenpunkte gehoeren weg */
  .g-nav ul,.k-nav ul,footer .fg ul{list-style:none;margin:0;padding:0}
  .g-nav li,.k-nav li,footer .fg li{list-style:none;display:block;margin:0;padding:0}
  .g-nav li a{display:block}
  @media (max-width:980px){.g-nav li{display:inline-block}}

/* --- Hauptnavigation in der Seitenleiste der Unterseiten --- */
  /* Bis 0.9.43 trugen die Unterseiten nur ein Inhaltsverzeichnis; der Weg zu
     einer anderen Seite lief allein ueber Logo und Fusszeile. Jetzt steht oben
     dasselbe Menue wie auf der Startseite - gleiche Reihenfolge, gleiche
     Ziffern -, darunter kleiner gesetzt die Abschnitte der offenen Seite. Die
     Ueberschrift "Auf dieser Seite" trennt beide; ohne sie liest sich das als
     eine einzige Liste. */
  .k-wege{min-width:0}
  .k-haupt{display:flex;flex-direction:column;gap:1px;counter-reset:navnr}
  .k-haupt a{display:block;padding:4px 0;font-weight:300;font-size:clamp(16px,1.5vw,19px);
    letter-spacing:-.01em;color:#E9E9E7;transition:color .2s}
  .k-haupt a::before{counter-increment:navnr;content:"0" counter(navnr);font-size:10.5px;
    letter-spacing:.2em;color:#6E6F72;margin-right:11px;vertical-align:3px}
  .k-haupt a:hover{color:#fff}
  .k-haupt .current-menu-item > a,.k-haupt a[aria-current]{color:#fff}
  .k-haupt .current-menu-item > a::before,.k-haupt a[aria-current]::before{color:#B9BABD}
  .k-haupt ul{list-style:none;margin:0;padding:0}
  .k-haupt li{list-style:none;display:block;margin:0;padding:0}
  .k-haupt li a{display:block}
  .k-hier{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
  .k-hier .eyebrow{margin:0 0 6px}
  .k-hier .k-nav{margin:0;gap:0}
  .k-hier .k-nav a{padding:4px 0;font-size:13.5px;color:#A9AAAD}
  .k-hier .k-nav a:hover{color:#fff}
  /* Die Leiste ist genau so hoch wie das Fenster, damit die Trennlinie zum
     Inhalt durchlaeuft. Zwei Listen koennen auf flachen Fenstern mehr Platz
     brauchen, als da ist - dann rollt die Leiste in sich, statt den Inhalt
     abzuschneiden. Der Balken bleibt schmal und dunkel. */
  .k-seite{overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
  .k-seite::-webkit-scrollbar{width:6px}
  .k-seite::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:3px}
  .k-seite::-webkit-scrollbar-track{background:transparent}
  @media (max-width:980px){
    .k-wege{width:100%;margin:22px 0 18px}
    .k-haupt{flex-direction:row;flex-wrap:wrap;gap:4px 20px;justify-content:center;margin:0}
    .k-haupt a{padding:3px 0;font-size:17px}
    /* In einer umbrechenden Zeile stiften die Ziffern keine Ordnung mehr -
       auf der Startseite entfallen sie hier aus demselben Grund. */
    .k-haupt a::before{display:none}
    .k-hier{margin-top:18px;padding-top:16px;width:100%}
    /* Die Abschnittsliste wird hier wieder zur umbrechenden Zeile. Ohne diese
       Zeile erbt sie den Nullabstand der Spaltenfassung und die Eintraege
       klebten aneinander. */
    .k-hier .k-nav{gap:4px 18px}
    .k-seite{overflow:visible}
  }

/* --- Programm und Spielhalle --- */
  .p-woche{border-top:1px solid rgba(255,255,255,.16);max-width:920px}
  .tag .p-woche{border-top-color:var(--gl)}
  .p-tag{display:grid;grid-template-columns:150px 1fr auto;gap:18px;align-items:baseline;
    padding:15px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .tag .p-tag{border-bottom-color:var(--gl)}
  .p-tag .d{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#8B8C8F}
  .p-tag .w{font-weight:300;font-size:clamp(17px,1.9vw,22px);letter-spacing:-.01em}
  .p-tag .z{font-size:13.5px;color:#B9BAB8;text-align:right;font-variant-numeric:tabular-nums}
  .tag .p-tag .z{color:#3E3F43}
  @media (max-width:640px){.p-tag{grid-template-columns:1fr;gap:3px}.p-tag .z{text-align:left}}
  .p-kurz{font-size:clamp(16px,1.7vw,20px);line-height:1.55;font-weight:300;max-width:62ch;margin:0 0 18px;color:#fff}
  .tag .p-kurz{color:#141517}
  .p-liste{margin:18px 0 22px;padding:0;list-style:none;max-width:62ch}
  .p-liste li{padding:9px 0;border-top:1px solid rgba(255,255,255,.12);font-size:15px;color:#C5C6C4}
  .tag .p-liste li{border-top-color:var(--gl);color:#3E3F43}
  .p-regeln{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.14);max-width:920px}
  .p-regel{background:var(--k);padding:22px}
  .p-regel h3{margin:0 0 8px;font-weight:400;font-size:15px;letter-spacing:.01em}
  .p-regel p{margin:0;font-size:14px;line-height:1.6;color:#9B9C9F}
  @media (max-width:760px){.p-regeln{grid-template-columns:1fr}}
  /* Häufige Fragen */
  .faq-liste{max-width:760px}
  .faq-e{border-top:1px solid rgba(255,255,255,.14);padding:18px 0}
  .tag .faq-e{border-top-color:var(--gl)}
  .faq-e:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
  .tag .faq-e:last-child{border-bottom-color:var(--gl)}
  .faq-e h3{margin:0 0 7px;font-weight:400;font-size:clamp(15px,1.6vw,17px);letter-spacing:.01em}
  .faq-e p{margin:0;font-size:14.5px;line-height:1.65;color:#9B9C9F}
  .tag .faq-e p{color:var(--g)}

/* --- Verweise, PDF-Kachel, Textlinks --- */
  .v-text{font-size:14px;color:#fff;text-decoration:underline;text-underline-offset:4px;
    text-decoration-color:rgba(255,255,255,.4);transition:text-decoration-color .2s}
  .v-text:hover{text-decoration-color:#fff}
  .tag .v-text{color:#141517;text-decoration-color:#B9B5AC}
  .tag .v-text:hover{text-decoration-color:#141517}
  .v-raster{display:grid;grid-template-columns:repeat(3,1fr);
    border:1px solid rgba(255,255,255,.14);overflow:hidden}
  .tag .v-raster{border-color:var(--gl)}
  .v-raster a{background:var(--k);padding:22px;display:block;transition:background .2s;
    box-shadow:-1px 0 0 rgba(255,255,255,.14),0 -1px 0 rgba(255,255,255,.14)}
  .tag .v-raster a{background:var(--w);box-shadow:-1px 0 0 var(--gl),0 -1px 0 var(--gl)}
  .v-raster a:hover{background:#121317}
  .tag .v-raster a:hover{background:#EFEDE7}
  .v-raster .t{display:block;font-weight:300;font-size:clamp(17px,1.9vw,21px);letter-spacing:-.015em;margin-bottom:7px}
  .v-raster .b{display:block;font-size:13px;line-height:1.55;color:#9B9C9F}
  .tag .v-raster .b{color:var(--g)}
  .v-raster .pf{display:block;margin-top:16px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
  @media (max-width:900px){.v-raster{grid-template-columns:1fr 1fr}}
  @media (max-width:560px){.v-raster{grid-template-columns:1fr}}
  .pdf-kachel{display:block;border:1px solid rgba(255,255,255,.28);padding:20px 22px;transition:background .2s}
  .pdf-kachel:hover{background:rgba(255,255,255,.05)}
  .tag .pdf-kachel{border-color:#C9C5BC}
  .tag .pdf-kachel:hover{background:#EFEDE7}
  .pdf-kachel .t{display:block;font-weight:300;font-size:clamp(16px,1.8vw,20px);letter-spacing:-.01em;margin-bottom:6px}
  .pdf-kachel .b{display:block;font-size:12.5px;line-height:1.5;color:#9B9C9F}
  .tag .pdf-kachel .b{color:var(--g)}
  .pdf-kachel .pf{display:block;margin-top:14px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
  a.g-karte{display:block;transition:background .2s}
  a.g-karte:hover{background:#EFEDE7}
  .h-unter{margin:20px 0 0;font-size:clamp(14px,1.6vw,18px);font-weight:300;letter-spacing:.01em;color:#B4B5B3}
  .tag .h-unter{color:#3E3F43}
  /* Startseiten-Überschrift: etwas zurückgenommen, damit sie in drei Zeilen bleibt */
  .home .gross{font-size:clamp(40px,7.2vw,104px)}
  .k-extras{margin-top:26px;max-width:620px;border-top:1px solid rgba(255,255,255,.18);padding-top:16px}
  .tag .k-extras{border-top-color:var(--gl)}
  .k-extras .eyebrow{margin-bottom:10px}
  /* Ein Blick in die Raeume, schwarzweiss und zurueckgenommen. Als flacher
     Streifen zeigt das Bild ein Detail, nicht den ganzen Raum - farbig oder
     hoeher wirkt es werblich, was bei diesem Thema nicht hingehoert.
     Zuschnitt und Schwarzweiss stecken in der Datei; ein Filter an dieser
     Stelle wuerde die Arbeit bei jedem Seitenaufruf neu erledigen. */
  .sp-bild{margin:0;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.14)}
  .sp-bild img{display:block;width:100%;height:clamp(190px,28vh,300px);object-fit:cover;
    object-position:center}
  .sp-warnung{margin:22px 0 0;font-size:clamp(15px,1.3vw,17px);line-height:1.55;color:#fff;
    border-left:3px solid rgba(255,255,255,.7);padding-left:16px;max-width:46ch}
  .k-extras .zt span:first-child{display:flex;align-items:baseline;gap:12px}
  .k-extras .nr{font-weight:400;font-size:10.5px;letter-spacing:.14em;color:#83847F;min-width:34px}
  .tag .k-extras .nr{color:#A9A59D}
  .k-dressing .zt span:last-child{font-size:10.5px;letter-spacing:.14em;color:#83847F}

/* --- Bedienbarkeit auf dem Handy ---
   Gemessen auf der Live-Seite bei 390 Pixel: Fusszeilenlinks 30 Pixel hoch
   und ohne Luecke dazwischen, der Telefonlink im Kopf der Kartenseiten
   16 Pixel, die Kartennavigation 39 Pixel, die Textverweise 17 Pixel. Alles
   unter der verbreiteten Empfehlung von 44 Pixeln fuer Beruehrungsziele.
   Korrigiert ueber Innenabstand und ausgleichenden Aussenabstand: Schrift,
   Zeilenfuehrung und sichtbare Abstaende der Gestaltung bleiben dadurch
   unveraendert, nur die Trefferflaeche waechst. */
  @media (max-width:980px){
    footer .fg a{display:block;padding:7px 0}
    .k-seite .g-meta a[href^="tel:"]{display:inline-block;padding:9px 12px;margin:-7px -12px}
    .k-nav a{padding:3px 0}
    .v-text{display:inline-block;padding:8px 0;margin:-8px 0}
    /* Die Getraenkeliste ist der laengste Fliesstext der Speisekarte.
       12,5 Pixel sind dafuer auf dem Handy zu wenig. */
    .k-drink .b{font-size:13.5px}
  }