/* =====================================================================
   Pizzeria Seeland - gemeinsames Stylesheet fuer alle Seiten
   ===================================================================== */

  :root{
    --ink:#0e0906; --ink2:#17100a;
    --cream:#f4e7d5; --muted:#a89275;
    --gold:#c9942f; --gold2:#ecbb52; --gold3:#f7dc93;
    --ember:#e0552a; --ember2:#b3311a;
    --line:rgba(236,187,82,.16);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  /* Logos: Breite aus dem Seitenverhaeltnis, damit width/height-Attribute nicht verzerren */
  .loader img,nav.top .brand img,footer.foot img{width:auto}
  body{font-family:Georgia,"Times New Roman",serif;background:var(--ink);color:var(--cream);
    line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  body.locked{overflow:hidden}
  .sans{font-family:"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
  ::selection{background:var(--gold);color:#1a1206}

  /* film grain + vignette */
  .grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .vig{position:fixed;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 220px 40px rgba(0,0,0,.65)}

  /* ---------- LOADER ---------- */
  .loader{position:fixed;inset:0;z-index:9999;background:#0b0704;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:20px;transition:opacity .7s ease,visibility .7s}
  .loader.done{opacity:0;visibility:hidden}
  .loader img{height:76px;opacity:0;transform:translateY(12px) scale(.96);animation:ldlogo .9s .1s forwards}
  .loader .bar{width:190px;height:2px;background:rgba(236,187,82,.18);border-radius:2px;overflow:hidden}
  .loader .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold3));animation:ldbar 1.25s .2s forwards}
  .loader .lw{font-family:"Segoe UI",system-ui,sans-serif;font-size:11px;letter-spacing:.5em;text-transform:uppercase;
    color:var(--gold2);opacity:0;animation:ldlogo .8s .35s forwards}
  @keyframes ldlogo{to{opacity:1;transform:none}}
  @keyframes ldbar{to{width:100%}}

  /* ---------- custom cursor ---------- */
  /* Beide sind unsichtbar, bis die Maus sich das erste Mal ruehrt.
     Vorher bekam der Punkt seine Position erst beim ersten
     „mousemove" - bis dahin klebte er als goldener Fleck in der linken
     oberen Ecke, und der Ring flog beim Laden aus der Mitte los. Wer
     die Seite oeffnete und nichts tat, sah zwei Kreise, die dort
     nichts zu suchen hatten. */
  .cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;border-radius:50%;
    transform:translate(-50%,-50%);mix-blend-mode:screen;
    opacity:0;transition:opacity .3s ease}
  body.maus-da .cur-dot,body.maus-da .cur-ring{opacity:1}
  .cur-dot{width:7px;height:7px;background:var(--gold3)}
  .cur-ring{width:38px;height:38px;border:1px solid rgba(236,187,82,.55);transition:width .25s,height .25s,background .25s,border-color .25s}
  .cur-ring.hot{width:58px;height:58px;background:rgba(236,187,82,.10);border-color:var(--gold2)}
  @media (hover:none){.cur-dot,.cur-ring{display:none}}

  /* ---------- progress + nav ---------- */
  .progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
    background:linear-gradient(90deg,var(--ember),var(--gold2));box-shadow:0 0 12px rgba(236,187,82,.5)}
  /* Drei Spalten: links das Logo, in der Mitte die Menuepunkte, rechts
     Sprachen und Reservieren. Die beiden aeusseren Spalten sind gleich
     breit - dadurch steht das Menue exakt in der Bildschirmmitte, egal
     wie breit Logo oder Knoepfe sind. */
  nav.top{position:fixed;top:0;left:0;right:0;z-index:55;display:grid;
    grid-template-columns:1fr auto 1fr;align-items:center;
    padding:16px 24px;transition:.4s}
  nav.top.solid{background:rgba(12,8,5,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:10px 24px}
  nav.top .brand{display:flex;align-items:center;gap:11px;opacity:0;transform:translateY(-6px);transition:.4s}
  nav.top.solid .brand{opacity:1;transform:none}
  nav.top .brand img{height:36px}
  nav.top .brand{justify-self:start}
  nav.top .links{display:none;gap:26px;justify-content:center;grid-column:2}
  nav.top .links a{font-family:"Segoe UI",system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;color:var(--cream);opacity:.85;position:relative;padding:4px 0}
  nav.top .links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--gold2);transition:.3s}
  nav.top .links a:hover{opacity:1}nav.top .links a:hover::after{width:100%}
  nav.top .links a.hier{opacity:1;color:var(--gold3)}
  nav.top .links a.hier::after{width:100%}
  @media(min-width:1040px){nav.top .links{display:flex}}

  /* ---------- Klappe unter einem Menuepunkt ---------- */
  /* Sie geht nur dort auf, wo es ein Draufzeigen gibt. Auf dem Telefon
     zwingt ein Klappmenue zum Doppeltipp - einmal oeffnen, einmal
     treffen -, und dort stehen im Handy-Menue ohnehin alle Punkte
     einzeln untereinander. Der Punkt selbst bleibt anklickbar: Wer ihn
     trifft, will meist auf die Seite und nicht ins Untermenue. */
  nav.top .links .mit-klappe{position:relative;display:flex;align-items:center;gap:6px}
  nav.top .links .mit-klappe::after{content:"";width:5px;height:5px;margin-top:-3px;
    border-right:1px solid currentColor;border-bottom:1px solid currentColor;
    transform:rotate(45deg);color:var(--muted);
    transition:color .25s,transform .3s cubic-bezier(.2,.8,.2,1),margin-top .3s}
  nav.top .links .mit-klappe:hover::after{color:var(--gold2)}

  /* Milchglas statt Kasten.
     Der Grund ist stark durchscheinend und unscharf - was darunter
     liegt, bleibt zu ahnen. Einen Rahmen gibt es nicht mehr: Die Form
     entsteht aus dem Schatten. Und die Breite richtet sich nach dem
     laengsten Punkt, nicht nach einer Zahl im Stil. */
  nav.top .klappe{position:absolute;top:calc(100% + 10px);left:-14px;
    width:max-content;min-width:172px;max-width:min(320px,58vw);
    padding:10px;display:flex;flex-direction:column;gap:2px;
    background:rgba(30,21,13,.58);
    -webkit-backdrop-filter:blur(26px) saturate(1.3);
    backdrop-filter:blur(26px) saturate(1.3);
    border:0;border-radius:18px;
    box-shadow:0 28px 64px rgba(0,0,0,.5),0 3px 14px rgba(0,0,0,.34),
               inset 0 1px 0 rgba(255,240,205,.07);
    opacity:0;visibility:hidden;
    transform:translateY(-8px);filter:blur(6px);
    transition:opacity .16s ease,transform .16s ease,filter .16s ease,visibility .16s}

  /* Der Steg ueber der Klappe: Zwischen Menuepunkt und Glas liegen zehn
     Punkte Luft. Ohne ihn faellt sie zu, sobald die Maus den
     Zwischenraum quert. */
  nav.top .klappe::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
  nav.top .klappe::after{content:none}

  nav.top .links .klappe a{position:relative;display:block;
    padding:11px 18px 11px 20px;border-radius:12px;opacity:0;
    font-family:"Segoe UI",system-ui,sans-serif;font-size:12.5px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--cream);
    background:rgba(255,255,255,0);transform:translateY(-6px);
    transition:opacity .24s ease,transform .24s ease,background .22s,color .22s,
               padding-left .22s cubic-bezier(.16,1,.3,1)}

  /* Der orange Strich links. Er waechst aus der Mitte auf - dieselbe
     Farbe wie der Knopf „Reservieren", damit sie im Haus etwas heisst. */
  nav.top .links .klappe a::after{content:"";position:absolute;left:9px;top:50%;
    width:2px;height:0;border-radius:2px;background:var(--ember);
    transform:translateY(-50%);
    transition:height .26s cubic-bezier(.16,1,.3,1)}
  nav.top .links .klappe a:hover{background:rgba(255,255,255,.055);
    color:#fff;padding-left:26px}
  nav.top .links .klappe a:hover::after{height:19px}
  nav.top .links .klappe a:focus-visible{outline:1px solid var(--gold2);outline-offset:-2px}

  @media(hover:hover) and (pointer:fine){
    nav.top .links .mit-klappe:hover .klappe,
    nav.top .links .mit-klappe:focus-within .klappe{
      opacity:1;visibility:visible;transform:none;filter:blur(0);
      transition:opacity .28s ease,
                 transform .4s cubic-bezier(.16,1,.3,1),
                 filter .4s cubic-bezier(.16,1,.3,1),
                 visibility .28s}

    /* Die Zeilen kommen kurz nacheinander nach - das ist der
       Unterschied zwischen „aufgehen" und „aufklappen". */
    nav.top .links .mit-klappe:hover .klappe a,
    nav.top .links .mit-klappe:focus-within .klappe a{opacity:.94;transform:none}
    nav.top .links .klappe a:nth-child(1){transition-delay:.07s}
    nav.top .links .klappe a:nth-child(2){transition-delay:.12s}
    nav.top .links .klappe a:nth-child(3){transition-delay:.17s}
    nav.top .links .klappe a:nth-child(4){transition-delay:.22s}
    nav.top .links .klappe a:nth-child(5){transition-delay:.27s}
    /* Beim Zugehen keine Staffelung - sonst zerfleddert es. Und der
       Strich wartet nie: Er gehoert dem Darueberfahren, nicht dem
       Aufgehen. */
    nav.top .links .mit-klappe:not(:hover):not(:focus-within) .klappe a{transition-delay:0s}
    nav.top .links .klappe a:hover{transition-delay:0s}

    /* Das Zeichen dreht sich mit: Es zeigt hinauf, solange offen. */
    nav.top .links .mit-klappe:hover::after,
    nav.top .links .mit-klappe:focus-within::after{color:var(--gold2);
      transform:rotate(225deg);margin-top:1px}
  }

  @media (prefers-reduced-motion:reduce){
    nav.top .klappe,nav.top .links .klappe a{
      transition-duration:.01s !important;transition-delay:0s !important;
      transform:none !important;filter:none !important}
  }

  /* ---------- rechte Seite der Navigation ---------- */
  .nav-rechts{display:flex;align-items:center;gap:12px;justify-self:end;grid-column:3}

  /* Sprachumschalter DE FR IT EN */
  .lang{display:none;align-items:center;gap:2px;padding:4px;border-radius:999px;
    border:1px solid var(--line);background:rgba(0,0,0,.25)}
  .lang a{font-family:"Segoe UI",system-ui,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.08em;
    padding:6px 9px;border-radius:999px;color:var(--muted);transition:color .2s,background .2s}
  .lang a:hover{color:var(--gold3)}
  .lang a.hier{background:rgba(236,187,82,.16);color:var(--gold3)}
  @media(min-width:1040px){.lang{display:flex}}

  /* Sprachknopf fuer Telefon und Tablet: "DE" mit Winkel, links neben
     "Reservieren". Am Bildschirm steht dort die volle Reihe DE FR IT
     EN - beide zugleich waeren doppelt gemoppelt. */
  /* Der kleine Sprachknopf oben in der Leiste ist seit V.1.4 aus.
     Auf dem Telefon stand die Sprachwahl zweimal - oben als Pille und
     unten im Menue -, und oben nahm sie „Reservieren" den Platz weg.
     Geblieben ist die Reihe unten im Menue (.mm-sprachen); am Bildschirm
     ab 1040 px steht ohnehin die volle Reihe DE FR IT EN daneben.
     Zum Rueckbau genuegt es, diese eine Zeile zu entfernen. */
  .lang-klapp{position:relative;display:none}
  @media(min-width:1040px){.lang-klapp{display:none}}
  .lang-klapp>summary{display:flex;align-items:center;gap:5px;height:38px;padding:0 12px;
    border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.25);
    font-family:"Segoe UI",system-ui,sans-serif;font-size:12px;font-weight:700;
    letter-spacing:.08em;color:var(--gold2);cursor:pointer;list-style:none;
    transition:border-color .25s,color .2s}
  /* Das Dreieck, das der Browser sonst selbst davorsetzt, stoert hier -
     der gezeichnete Winkel steht schon im Knopf. */
  .lang-klapp>summary::-webkit-details-marker{display:none}
  .lang-klapp>summary::marker{content:""}
  .lang-klapp>summary:hover{border-color:rgba(236,187,82,.5);color:var(--gold3)}
  .lang-klapp[open]>summary{border-color:rgba(236,187,82,.55);color:var(--gold3)}
  .lang-klapp[open]>summary svg{transform:rotate(180deg)}
  .lang-klapp>summary svg{transition:transform .25s}

  .lang-liste{position:absolute;top:calc(100% + 8px);right:0;z-index:60;
    min-width:150px;display:flex;flex-direction:column;padding:6px;
    border:1px solid rgba(236,187,82,.28);border-radius:14px;
    background:rgba(14,10,7,.97);backdrop-filter:blur(12px);
    box-shadow:0 18px 44px rgba(0,0,0,.55);
    animation:langAuf .22s cubic-bezier(.2,.8,.2,1)}
  @keyframes langAuf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .lang-liste a{font-family:"Segoe UI",system-ui,sans-serif;font-size:13.5px;font-weight:600;
    padding:10px 14px;border-radius:9px;color:var(--cream);white-space:nowrap;
    transition:background .2s,color .2s}
  .lang-liste a:hover{background:rgba(236,187,82,.1);color:var(--gold3)}
  .lang-liste a.hier{background:rgba(236,187,82,.16);color:var(--gold3)}

  /* Menuetaste fuer Handy und Tablet */
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
    padding:0 10px;cursor:pointer;background:transparent;border:1px solid var(--line);border-radius:999px;
    transition:border-color .25s}
  .burger:hover{border-color:rgba(236,187,82,.5)}
  .burger span{display:block;height:1.5px;width:100%;background:var(--gold2);border-radius:2px;
    transition:transform .3s,opacity .25s}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  @media(min-width:1040px){.burger{display:none}}

  /* ---------- ausgeklapptes Menue ---------- */
  .mobilmenu{position:fixed;inset:0;z-index:54;background:rgba(9,6,4,.97);backdrop-filter:blur(14px);
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;
    opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;padding:80px 14px 28px;
    overflow-y:auto}
  .mobilmenu.offen{opacity:1;visibility:visible}
  /* Kleiner als bisher: Mit 34 Punkten brauchte "Weine im
     Offenausschank" zwei Zeilen und die Liste passte nicht mehr auf
     einen Bildschirm. Mittig gesetzt, damit auch die zweizeiligen
     Punkte in der Achse bleiben. */
  .mobilmenu a.punkt{font-size:clamp(19px,5vw,25px);font-weight:700;color:var(--cream);
    padding:7px 0;text-align:center;line-height:1.25;max-width:15em;
    opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s,color .2s}
  .mobilmenu.offen a.punkt{opacity:1;transform:none}
  .mobilmenu a.punkt:hover,.mobilmenu a.punkt.hier{color:var(--gold3)}
  .mobilmenu .trenner{width:56px;height:1px;background:var(--line);margin:12px 0 10px}

  /* ---------- Gitter im Klappmenue ----------
     Zwei Spalten, von oben nach unten gefuellt: links die Karten,
     rechts das Haus. So steht alles auf einem Bildschirm, ohne dass
     man wischen muss - und die Trennlinie in der Mitte macht den
     Unterschied sichtbar, ohne ein Wort dafuer zu brauchen.

     Die Zeilenzahl kommt aus der Vorlage (--mm-zeilen). Kommt im
     Backend ein Punkt dazu, wandert die Grenze von allein mit. */
  .mm-gitter{width:100%;max-width:520px;display:grid;
    grid-auto-flow:column;
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(var(--mm-zeilen,7),1fr);
    column-gap:0;position:relative}
  /* Die Mittellinie laeuft durch, statt an jeder Zeile neu anzusetzen. */
  .mm-gitter::before{content:"";position:absolute;top:6px;bottom:6px;left:50%;
    width:1px;background:linear-gradient(180deg,transparent,rgba(236,187,82,.3) 12%,
      rgba(236,187,82,.3) 88%,transparent)}

  .mm-punkt{display:flex;align-items:center;gap:13px;min-height:60px;
    padding:10px 14px;color:var(--cream);
    /* Dieselbe Serifenschrift wie der Rest des Hauses - das Menue soll
       nach Seeland aussehen und nicht nach Telefonprogramm. */
    font-family:Georgia,"Times New Roman",serif;font-size:16.5px;line-height:1.2;
    border-bottom:1px solid rgba(236,187,82,.14);
    opacity:0;transform:translateY(12px);
    transition:opacity .4s,transform .4s,color .2s}
  .mobilmenu.offen .mm-punkt{opacity:1;transform:none}
  /* Die letzte Zeile jeder Spalte braucht keinen Strich unter sich.
     Welche das ist, weiss nur die Vorlage - nth-child rechnet nicht
     mit CSS-Variablen. */
  .mm-punkt.fuss{border-bottom:0}
  .mm-punkt .mm-zeichen{flex:none;color:var(--gold2);transition:color .2s,transform .25s}
  .mm-punkt span{min-width:0}
  .mm-punkt:hover,.mm-punkt:focus-visible{color:var(--gold3)}
  .mm-punkt:hover .mm-zeichen{color:var(--gold3);transform:scale(1.06)}
  .mm-punkt.hier{color:var(--gold3)}
  .mm-punkt.hier .mm-zeichen{color:var(--gold3)}

  /* Schmale Telefone: enger gesetzt, damit die laengeren Namen
     ("Dessertkarte", "Reservation") auf einer Zeile bleiben. */
  @media(max-width:430px){
    .mm-punkt{gap:10px;padding:9px 8px;min-height:56px;font-size:15px}
    .mm-punkt .mm-zeichen{width:21px;height:21px}
  }
  .mobilmenu .lang-mobil{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
  .mobilmenu .lang-mobil a{font-family:"Segoe UI",system-ui,sans-serif;font-size:13px;font-weight:700;
    letter-spacing:.1em;padding:10px 18px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
  .mobilmenu .lang-mobil a.hier{background:rgba(236,187,82,.16);color:var(--gold3);border-color:rgba(236,187,82,.45)}
  .mobilmenu .kontakt{margin-top:18px;text-align:center;font-family:"Segoe UI",system-ui,sans-serif;
    font-size:14px;color:var(--muted);line-height:1.9}
  .mobilmenu .kontakt .gold{color:var(--gold2);font-weight:700}

  /* ---------- Der Trennstrich ----------
     Er trennt die Sprachwahl von der Adresse darueber: Das eine ist eine
     Auskunft, das andere ein Knopf. Ohne Trennung liest sich beides als
     ein Block, und man tippt auf die falsche Zeile.
     An den Enden laeuft er aus, damit er nicht wie eine Kante wirkt. */
  .mobilmenu .mm-zier{height:1px;max-width:220px;margin:17px auto 14px;
    background:linear-gradient(90deg,transparent,var(--line),transparent)}

  /* ---------- Die Sprachwahl im Telefonmenue ----------
     Sie steht seit V.1.4 nur noch hier. Vier Knoepfe nebeneinander,
     jeder mindestens 44 px hoch - das Mass, das eine Fingerkuppe
     braucht. Die laufende Sprache traegt das Gold des Hauses. */
  .mobilmenu .mm-sprachen{display:flex;justify-content:center;flex-wrap:wrap;
    gap:9px;margin-bottom:4px}
  .mobilmenu .mm-sprachen a{display:flex;align-items:center;gap:7px;
    min-height:44px;padding:0 14px;border-radius:999px;
    border:1px solid rgba(236,187,82,.26);background:rgba(255,255,255,.035);
    color:var(--cream);text-decoration:none;
    font-family:"Segoe UI",system-ui,sans-serif;font-weight:700;
    font-size:12.5px;letter-spacing:.08em;
    transition:border-color .18s,background .18s,color .18s}
  .mobilmenu .mm-sprachen a:hover{border-color:rgba(236,187,82,.5);color:var(--gold3)}
  /* Dasselbe Gold wie „Reservieren" - es ist derselbe Rang von Knopf. */
  .mobilmenu .mm-sprachen a.hier{
    background:linear-gradient(145deg,#f4d383 0%,#e0b45c 45%,#c9942f 100%);
    color:#231705;border-color:rgba(255,240,205,.35);
    box-shadow:0 8px 22px rgba(201,148,47,.28)}
  .mobilmenu .mm-flagge{flex:none;display:block;width:20px;height:14px;
    border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.35)}

  @media(min-width:1040px){.mobilmenu{display:none}}

  .btn{font-family:"Segoe UI",system-ui,sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.03em;
    display:inline-flex;align-items:center;gap:9px;cursor:pointer;border-radius:999px;padding:13px 24px;
    transition:transform .25s,box-shadow .25s,background .25s;border:1px solid transparent;white-space:nowrap}
  /* Der Knopf, der handelt: eine goldene Flaeche mit dunkler Schrift.
     Rot war der einzige Fremdkoerper auf einer Seite, die sonst
     durchgehend Gold auf Dunkel traegt. Der Schein darunter ist warm
     und weich - er hebt den Knopf an, ohne zu leuchten. */
  .btn-gold-voll{background:linear-gradient(145deg,#f4d383 0%,#e0b45c 45%,#c9942f 100%);
    color:#231705;border-color:rgba(255,240,205,.35);
    box-shadow:0 10px 30px rgba(201,148,47,.30),0 0 0 1px rgba(255,240,205,.10) inset}
  .btn-gold-voll:hover{background:linear-gradient(145deg,#ffe6a8 0%,#eec372 45%,#d8a338 100%);
    box-shadow:0 16px 40px rgba(201,148,47,.42),0 0 0 1px rgba(255,240,205,.18) inset}

  /* Der Knopf, der weiterfuehrt: nur eine Linie und Gold. */
  .btn-gold{background:transparent;color:var(--gold3);border-color:rgba(236,187,82,.5)}
  .btn-gold:hover{background:rgba(236,187,82,.10);border-color:var(--gold2)}

  /* Eckiger als die uebrigen Pillen - so wollte es die Vorlage, und die
     beiden Knoepfe wirken damit ruhiger nebeneinander. */
  .btn-gold-voll,.btn-gold{border-radius:14px}

  /* Das Zeichen im Knopf nimmt die Farbe der Schrift an. Beim
     Darueberfahren wandert der Pfeil ein Stueck weiter - der Kalender
     bleibt, wo er ist: Ein Termin geht nirgendwohin. */
  .btn-zeichen{flex:none;transition:transform .25s cubic-bezier(.16,1,.3,1)}
  .btn-gold:hover .btn-zeichen{transform:translateX(3px)}
  .btn-sm{padding:10px 18px;font-size:12.5px}

  /* ---------- HERO ---------- */
  .hero{position:relative;height:auto;min-height:100svh;display:flex;align-items:center;justify-content:center;
    text-align:center;overflow:hidden}
  .hero-bg{position:absolute;inset:-8% 0 0 0;z-index:0;will-change:transform}
  .hero-bg img{width:100%;height:112%;object-fit:cover;animation:ken 26s ease-in-out infinite alternate}
   .hero-bg video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(1.05)}
  .hero-bg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(14,9,6,.55),rgba(14,9,6,.25) 40%,rgba(14,9,6,.72) 80%,var(--ink) 100%)}
  #embers{position:absolute;inset:0;z-index:1;pointer-events:none}
  .hero-in{position:relative;z-index:2;padding:100px 22px 70px;max-width:900px}

  /* ---------- Saisonkarte im Kopfbereich ----------
     Auf schmalen Bildschirmen steht sie unter den Knoepfen, auf breiten
     schwebt sie rechts - dort liegt sie ausserhalb des Textflusses und
     verschiebt darum weder Titel noch Knoepfe. */
  /* Sitzt mittig unter den Knoepfen: Bild links, Text rechts. */
  .saison-band{display:flex;justify-content:center;margin-top:34px}
  .saisonkarte{position:relative;z-index:2;width:100%;max-width:660px;
    display:flex;flex-direction:row;align-items:center;gap:clamp(18px,3vw,30px);
    text-align:center;padding:18px clamp(24px,3vw,38px);border-radius:24px;
    border:1px solid rgba(236,187,82,.3);
    background:linear-gradient(165deg,rgba(26,17,10,.82),rgba(10,6,3,.86));
    backdrop-filter:blur(12px);
    box-shadow:0 24px 60px rgba(0,0,0,.55);
    overflow:hidden;
    opacity:0;animation:saisonAuf 1.1s .9s cubic-bezier(.2,.8,.2,1) forwards;
    transition:border-color .35s ease,box-shadow .35s ease}
  .saisonkarte:hover{border-color:rgba(236,187,82,.6);
    box-shadow:0 30px 74px rgba(0,0,0,.62),0 0 0 1px rgba(236,187,82,.14)}

  /* feiner zweiter Rahmen, wie bei einer Menuekarte */
  .saisonkarte::before{content:"";position:absolute;inset:8px;border-radius:13px;
    border:1px solid rgba(236,187,82,.16);pointer-events:none}
  /* langsamer Lichtstreifen, der ueber die Karte wandert */
  .saisonkarte::after{content:"";position:absolute;top:-60%;left:-70%;
    width:55%;height:220%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,238,200,.11),transparent);
    transform:rotate(14deg);animation:saisonGlanz 8s 2.4s ease-in-out infinite}

  /* Freigestellt, ohne Kreis und Rahmen: eine Zeichnung schwebt so
     ueber der Karte. Fotos bekommen leicht runde Ecken, damit sie
     trotzdem sauber wirken. */
  .saisonkarte-bild{position:relative;flex:none;
    width:clamp(104px,14vw,150px);height:clamp(104px,14vw,150px);
    margin-left:clamp(-14px,-1vw,-6px);
    display:flex;align-items:center;justify-content:center}
  .saisonkarte-bild img{max-width:100%;max-height:100%;width:auto;height:auto;
    object-fit:contain;display:block;border-radius:10px;
    filter:drop-shadow(0 12px 26px rgba(0,0,0,.55))}
  .saisonkarte-text{position:relative;min-width:0;width:100%}
  .saisonkarte-oben{font-family:"Segoe UI",system-ui,sans-serif;font-size:10px;font-weight:700;
    letter-spacing:.34em;text-transform:uppercase;color:var(--gold);opacity:.9}
  .saisonkarte-titel{margin-top:8px;font-size:clamp(26px,3.6vw,35px);font-weight:700;
    line-height:1.1;color:var(--cream)}
  .saisonkarte-zusatz{margin-top:4px;font-style:italic;font-size:clamp(16px,2vw,19px);color:var(--gold2)}
  /* Trennlinie mit kleiner Raute in der Mitte */
  .saisonkarte-knopf{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
    margin-top:18px;padding-top:16px;
    font-family:"Segoe UI",system-ui,sans-serif;font-size:10.5px;font-weight:700;
    letter-spacing:.24em;text-transform:uppercase;color:#e9dcc8;transition:color .25s}
  .saisonkarte-knopf::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(236,187,82,.4),transparent)}
  .saisonkarte-knopf span{transition:transform .3s ease}
  .saisonkarte-knopf:hover{color:var(--gold2)}
  .saisonkarte-knopf:hover span{transform:translateX(5px)}

  @keyframes saisonAuf{
    from{opacity:0;transform:translateX(34px) scale(.94)}
    to{opacity:1;transform:none}
  }
  @keyframes saisonGlanz{
    0%,72%{left:-70%}
    100%{left:130%}
  }

  /* Erst wenn rechts wirklich Platz ist, schwebt sie neben dem Titel.
     Darunter bleibt sie unter den Knoepfen - so ueberdeckt sie nie
     den Schriftzug. */
  /* Am Handy untereinander statt nebeneinander */
  @media(max-width:560px){
    .saisonkarte{flex-direction:column;gap:14px;padding:22px}
  }
  @media (prefers-reduced-motion:reduce){
    .saisonkarte{opacity:1;animation:none}
    .saisonkarte::after{display:none}
  }
  .hero .eyebrow{font-family:"Segoe UI",system-ui,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.42em;
    text-transform:uppercase;color:var(--gold3);opacity:0;animation:up .9s .15s forwards}
  .hero h1{margin:16px 0 6px;font-weight:700;line-height:.92;letter-spacing:.01em;
    font-size:clamp(52px,15vw,150px);text-transform:uppercase}
  .hero h1 .ln{display:block;overflow:hidden}
  .hero h1 .ln span{display:block;transform:translateY(105%);
    background:linear-gradient(100deg,#b3831f 0%,#ecbb52 26%,#fbeec2 52%,#ecbb52 74%,#b3831f 100%);
    background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:reveal 1s cubic-bezier(.2,.8,.2,1) forwards, shimmer 7s linear infinite}
  .hero h1 .ln:nth-child(1) span{animation-delay:.28s,0s}
  .hero h1 .ln:nth-child(2) span{animation-delay:.42s,0s}
  .hero .sub{margin-top:14px;font-style:italic;font-size:clamp(16px,4.4vw,23px);color:#f0e0cd;
    opacity:0;animation:up .9s .7s forwards}
  .hero .sub .rot{color:var(--gold3);font-style:normal;font-weight:700}
  /* Auf dem Telefon steht der zweite Teil auf einer eigenen Zeile, und
     der Gedankenstrich entfaellt. Sonst entscheidet die Zeilenlaenge,
     wo umgebrochen wird - und das wechselnde Wort (Tradition,
     Handwerk, Leidenschaft) verschoebe alle paar Sekunden alles
     darunter. */
  @media(max-width:700px){
    .hero .sub .sub-strich{display:none}
    .hero .sub .sub-zeile2{display:block}
  }
  .hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px;opacity:0;animation:up .9s .85s forwards}
  .scrolldown{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
    font-family:"Segoe UI",system-ui,sans-serif;font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold3);
    display:flex;flex-direction:column;align-items:center;gap:9px;opacity:.85}
  .scrolldown i{width:1px;height:34px;background:linear-gradient(var(--gold2),transparent);animation:drip 1.9s ease-in-out infinite;transform-origin:top}

  @keyframes ken{from{transform:scale(1)}to{transform:scale(1.13)}}
  @keyframes reveal{to{transform:none}}
  @keyframes shimmer{to{background-position:-220% 0}}
  @keyframes up{to{opacity:1;transform:none}}
  @keyframes drip{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

  /* ---------- marquee ---------- */
  .marq{background:linear-gradient(180deg,#150e08,#0e0906);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;overflow:hidden;white-space:nowrap}
  .marq .track{display:inline-flex;gap:34px;align-items:center;animation:scrollx 26s linear infinite;will-change:transform}
  .marq span{font-size:clamp(15px,3.1vw,24px);font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-style:normal;background:linear-gradient(100deg,#a9781f,#ecbb52,#f7dc93,#ecbb52);-webkit-background-clip:text;background-clip:text;color:transparent}
  .marq .dot{color:var(--ember);-webkit-text-stroke:0;font-style:normal;font-size:9px;opacity:.75;background:none;-webkit-background-clip:border-box;background-clip:border-box}
  @keyframes scrollx{to{transform:translateX(-50%)}}

  /* ---------- generic section ---------- */
  section{position:relative}
  .pad{padding:clamp(70px,11vw,130px) 0}
  .eyebrow2{font-family:"Segoe UI",system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.34em;
    text-transform:uppercase;color:var(--gold)}
  .h2{font-size:clamp(30px,7.5vw,60px);font-weight:700;letter-spacing:.01em;line-height:1.03;text-wrap:balance}
  .goldtext{background:linear-gradient(100deg,#b3831f,#ecbb52,#f7dc93,#ecbb52);-webkit-background-clip:text;background-clip:text;color:transparent}
  .deco{width:64px;height:2px;background:var(--gold);opacity:.5;border-radius:2px}
  .lead{max-width:620px;font-size:18px;line-height:1.75;color:#d8c6b0}

  .rv{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.2,1)}
  .rv.in{opacity:1;transform:none}
  .rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

  /* ---------- ABOUT / stats ---------- */
  /* Der Abschnitt sitzt direkt unter der Laufschrift und braucht oben
     weniger Luft als die uebrigen - sonst wirkt die Seite auseinandergezogen. */
  #handwerk{padding-top:clamp(30px,4.6vw,54px)}
  .about{display:grid;grid-template-columns:1fr;gap:42px;align-items:center}
  @media(min-width:860px){.about{grid-template-columns:1.05fr 1fr;gap:64px}}
  .about .figure{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5)}
  .about .figure img,
  .about .figure video{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
    clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
  .about .figure.in img,
  .about .figure.in video{clip-path:inset(0 0 0 0)}
  /* Laeuft der Film, liegt er ueber dem Standbild - so gibt es beim Start
     kein Flackern und ohne Film bleibt einfach das Bild stehen. */
  .about .figure.film video{position:absolute;inset:0;height:100%;opacity:0;transition:opacity .7s ease}
  .about .figure.film.laeuft video{opacity:1}
  .about .figure .frame{position:absolute;inset:14px;border:1px solid rgba(236,187,82,.35);border-radius:12px;pointer-events:none}
  .about h2{margin:14px 0}
  .about p{margin-top:6px;color:#d8c6b0;font-size:17px;line-height:1.8}
  .about .quote{margin-top:22px;font-style:italic;color:var(--gold2);font-size:19px;border-left:2px solid var(--gold);padding-left:16px}
  /* Ohne min-width:0 duerfen die Spalten von ihrem Inhalt breiter
     gedrueckt werden - dann wackelt beim Hochzaehlen die halbe Seite. */
  .about > *{min-width:0}
  .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:34px}
  .stats > *{min-width:0}
  @media(min-width:520px){.stats{grid-template-columns:repeat(4,1fr)}}
  /* nowrap, damit °C und % neben der Zahl bleiben und nicht auf eine
     zweite Zeile rutschen - sonst stehen die vier Angaben ungleich hoch. */
  .stat .n{font-size:clamp(27px,6.2vw,37px);font-weight:700;line-height:1.1;color:var(--gold3);
    font-variant-numeric:tabular-nums;white-space:nowrap}
  .stat .l{font-family:"Segoe UI",system-ui,sans-serif;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}

  /* ---------- specialità horizontal ---------- */
  /* Titel mittig, der Wisch-Hinweis darunter */
  .spec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
  .spec-head .wischhinweis{margin-top:4px}
  /* Huelle faengt den negativen Rand der Leiste ab, damit die Seite
     seitlich nicht ueber den Bildschirmrand hinausragt */
  .rail-huelle{overflow:hidden}
  .rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:34px 24px 10px;margin:0 -24px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rail::-webkit-scrollbar{display:none}
  /* Goldener Rahmen: Die Bilder sind selbst dunkel und wuerden sonst in
     den Seitenhintergrund auslaufen. Der Rand gibt jeder Karte eine
     Kante, beim Darueberfahren leuchtet er staerker. */
  .scard{scroll-snap-align:center;flex:0 0 78%;max-width:340px;position:relative;border-radius:20px;overflow:hidden;
    aspect-ratio:3/4;display:flex;align-items:flex-end;
    border:1px solid rgba(236,187,82,.42);
    box-shadow:0 18px 44px rgba(0,0,0,.55);
    transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease}
  .scard:hover{border-color:var(--gold2);transform:translateY(-4px);
    box-shadow:0 26px 60px rgba(0,0,0,.65),0 0 0 1px rgba(236,187,82,.28)}
  @media(min-width:720px){.scard{flex-basis:340px}}
  /* Auf breiten Bildschirmen passen alle vier Karten nebeneinander -
     dann kein Wischen mehr, sondern mittig ausgerichtet. */
  @media(min-width:1100px){
    .rail{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
      overflow:visible;margin:0 auto;padding:34px 24px 10px;max-width:1160px}
    .scard{flex:none;max-width:none;width:100%}
    .spec-head .wischhinweis{display:none}
  }
  .scard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
  .scard:hover img{transform:scale(1.07)}
  .scard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(10,6,3,.85))}
  .scard .c{position:relative;z-index:1;padding:24px}
  .scard .k{font-family:"Segoe UI",system-ui,sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold3)}
  .scard h3{font-size:26px;font-weight:700;margin-top:6px}
  .scard p{color:#d3c1ab;font-size:14px;margin-top:6px}

  /* ---------- parallax quote band ---------- */
  .band{position:relative;min-height:64vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
  .band .bg{position:absolute;inset:-15% 0;z-index:0;will-change:transform}
  .band .bg img{width:100%;height:130%;object-fit:cover;filter:brightness(.5)}
  .band::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 50% 50%,rgba(14,9,6,.35),rgba(14,9,6,.82))}
  .band .q{position:relative;z-index:1;max-width:820px;padding:60px 24px}
  .band .q p{font-size:clamp(24px,5.4vw,44px);font-style:italic;line-height:1.25;color:#f5e8d6;text-wrap:balance}
  .band .q .who{margin-top:20px;font-family:"Segoe UI",system-ui,sans-serif;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold2)}

  /* ---------- Galerie: 3D-Karussell ----------
     Das mittlere Bild steht gerade und gross, die Nachbarn kippen nach
     hinten weg. Darunter eine leichte Spiegelung wie auf einer
     polierten Fläche. */
  /* overflow-x:clip schneidet nur seitlich ab - die Spiegelung unten
     bleibt sichtbar. So ragt auf dem Handy nichts über den Rand hinaus. */
  .cf{position:relative;margin-top:clamp(30px,5vw,50px);
    height:clamp(340px,50vw,600px);perspective:1500px;perspective-origin:50% 40%;
    overflow-x:clip}
  .cf-buehne{position:relative;width:100%;height:100%;transform-style:preserve-3d}

  .cf-bild{position:absolute;top:0;left:50%;
    width:clamp(190px,29vw,380px);height:78%;
    margin-left:calc(clamp(190px,29vw,380px) / -2);
    transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .55s ease;
    transform-style:preserve-3d;cursor:pointer;will-change:transform}
  .cf-bild figure{position:relative;width:100%;height:100%;border-radius:14px;overflow:hidden;
    border:1px solid rgba(236,187,82,.22);background:#0b0704;
    box-shadow:0 24px 60px rgba(0,0,0,.6);
    -webkit-box-reflect:below 6px linear-gradient(transparent 62%,rgba(255,255,255,.16))}
  .cf-bild img{width:100%;height:100%;object-fit:cover;display:block}
  .cf-bild figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 14px;
    font-family:"Segoe UI",system-ui,sans-serif;font-size:14px;color:#f0e2cd;text-align:center;
    background:linear-gradient(transparent,rgba(8,5,3,.88));
    opacity:.6;transition:opacity .45s}
  .cf-bild.aktiv figcaption{opacity:1;font-size:15px}
  .cf-bild.aktiv figure{border-color:rgba(236,187,82,.6);
    box-shadow:0 30px 80px rgba(0,0,0,.75),0 0 0 1px rgba(236,187,82,.2)}
  .cf-bild.weg{opacity:0;pointer-events:none}

  /* Pfeile links und rechts */
  .cf-pfeil{position:absolute;top:44%;z-index:20;width:46px;height:46px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    background:rgba(12,8,5,.55);border:1px solid rgba(236,187,82,.5);color:var(--gold2);
    font-size:20px;line-height:1;backdrop-filter:blur(6px);transition:.25s}
  .cf-pfeil:hover{background:rgba(236,187,82,.16);color:var(--gold3);border-color:var(--gold2)}
  .cf-pfeil.links{left:clamp(4px,2vw,26px)}
  .cf-pfeil.rechts{right:clamp(4px,2vw,26px)}

  /* Punkte darunter */
  .cf-punkte{display:flex;gap:9px;justify-content:center;margin-top:clamp(18px,3vw,30px)}
  .cf-punkte button{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
    border:1px solid rgba(236,187,82,.45);background:transparent;transition:.25s}
  .cf-punkte button:hover{border-color:var(--gold2)}
  .cf-punkte button.an{background:var(--gold2);border-color:var(--gold2);transform:scale(1.25)}

  @media (prefers-reduced-motion:reduce){
    .cf-bild{transition:none}
  }

  /* ---------- info ---------- */
  .info{display:grid;grid-template-columns:1fr;gap:16px;margin-top:40px}
  @media(min-width:720px){
    .info{grid-template-columns:repeat(3,1fr)}
    /* Variante mit nur zwei Karten (z. B. auf „Über uns") */
    .info-zwei{grid-template-columns:repeat(2,1fr)}
  }
  .info .icard{align-self:stretch}
  /* Eine einzelne Kachel, mittig gesetzt (z. B. Öffnungszeiten auf „Über uns") */
  .info-einzeln{display:flex;justify-content:center;margin-top:40px}
  .info-einzeln .icard{width:100%;max-width:380px}

  /* Textblöcke, die mittig stehen sollen (im Backend mit class="mitte") */
  .textseite .mitte{text-align:center}
  .icard{border:1px solid var(--line);border-radius:18px;padding:30px 24px;text-align:center;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));transition:.25s}
  .icard:hover{border-color:rgba(236,187,82,.4);transform:translateY(-3px)}
  .icard .ico{width:34px;height:34px;color:var(--gold2);margin:0 auto 14px}
  .icard h4{font-family:"Segoe UI",system-ui,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .icard .big{font-size:21px;color:var(--gold3);margin-top:9px;font-weight:700}
  .icard .sub{font-size:14.5px;color:#c9b7a1;margin-top:4px}
  .icard .hinweis-gold{color:var(--gold2);margin-top:10px}

  /* Küchenzeiten: zwei Blöcke (warme Küche, Pizza), darin je ein oder zwei
     Sätze aus Tagen und den dazugehörigen Zeiten. */
  .kueche{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);text-align:center}
  .kueche-block + .kueche-block{margin-top:18px;padding-top:16px;border-top:1px solid rgba(236,187,82,.12)}
  .kueche-titel{font-family:"Segoe UI",system-ui,sans-serif;font-size:10.5px;font-weight:700;
    letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
  .kueche-satz{margin-top:9px}
  .kueche-satz + .kueche-satz{margin-top:12px}
  .kueche-tage{font-family:"Segoe UI",system-ui,sans-serif;font-size:12.5px;color:var(--muted)}
  .kueche-zeit{margin-top:3px;font-size:15.5px;font-weight:600;color:#e8d8c2;
    font-variant-numeric:tabular-nums}
  .kueche-durchgehend{margin-top:3px;font-family:"Segoe UI",system-ui,sans-serif;
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}

  /* ---------- Karte in der Adress-Kachel ---------- */
  /* Google liefert die Karte hell aus. Der Filter dreht sie ins Dunkle,
     damit sie nicht wie ein Fremdkoerper in der Seite sitzt. */
  .karte-feld{margin-top:18px;border-radius:14px;overflow:hidden;
    border:1px solid rgba(236,187,82,.22);background:#0b0704;line-height:0}
  .karte-feld iframe{width:100%;height:230px;border:0;display:block;
    filter:invert(92%) hue-rotate(180deg) saturate(.75) contrast(.9);opacity:.92}
  .knopf-linie{display:inline-flex;align-items:center;gap:9px;margin-top:16px;
    padding:11px 20px;border-radius:999px;cursor:pointer;
    border:1px solid rgba(236,187,82,.55);color:var(--gold2);background:transparent;
    font-family:"Segoe UI",system-ui,sans-serif;font-size:11.5px;letter-spacing:.16em;
    text-transform:uppercase;transition:.25s}
  .knopf-linie:hover{background:rgba(236,187,82,.14);color:var(--gold3);border-color:var(--gold2)}
  .knopf-linie svg{width:15px;height:15px;flex:none}

  /* ---------- Gaestestimmen ---------- */
  /* Sterne in der ersten Zeile, die Zahlen darunter - so liest man
     zuerst das Urteil und dann die Belege. */
  .stimmen-note{margin-top:14px;display:flex;flex-direction:column;align-items:center;
    gap:7px;font-family:"Segoe UI",system-ui,sans-serif;
    font-size:13.5px;color:var(--muted)}
  .sterne.gross{font-size:23px;letter-spacing:3px;line-height:1}

  /* ---------- Gaestestimmen: endlos treibendes Band ----------
     Die Karten wandern langsam nach links und beginnen nahtlos von
     vorn. Moeglich wird das dadurch, dass die Liste zweimal dasteht
     und das Band um genau die Haelfte verschoben wird - im Moment des
     Umbruchs sieht das Bild gleich aus wie am Anfang.
     Kein Klicken noetig, aber beim Darueberfahren haelt es an, damit
     man in Ruhe zu Ende lesen kann. */
  .stimmen-band{position:relative;margin-top:clamp(26px,4vw,42px);
    overflow:hidden;
    /* Weiches Ausblenden an beiden Raendern */
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .stimmen-spur{display:flex;width:max-content;padding:4px 0 6px;
    animation:stimmenLauf var(--lauf,60s) linear infinite}
  .stimmen-satz{display:flex;gap:18px;padding-right:18px}
  .stimmen-band:hover .stimmen-spur,
  .stimmen-band:focus-within .stimmen-spur{animation-play-state:paused}
  @keyframes stimmenLauf{
    from{transform:translateX(0)}
    to  {transform:translateX(-50%)}
  }

  .stimme{flex:0 0 clamp(250px,80vw,320px);margin:0;
    display:flex;flex-direction:column;
    border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px;
    background:linear-gradient(180deg,rgba(255,244,228,.055),rgba(255,244,228,.025))}
  .stimme-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    font-family:"Segoe UI",system-ui,sans-serif;font-size:12.5px;color:var(--muted)}
  .stimme-kopf b{color:#e8d8c2;font-size:14px}
  .stimme-kopf time{margin-left:auto;font-size:11.5px;opacity:.75}
  .google-g{width:22px;height:22px;flex:none;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:13px;color:#0e0906;
    background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0)}
  .sterne{color:var(--gold2);letter-spacing:1px;font-size:13px}
  .sterne i{color:rgba(236,187,82,.25);font-style:normal}
  /* Lange Bewertungen werden nach sechs Zeilen abgeschnitten, damit nicht
     eine einzelne Karte das ganze Band in die Hoehe zieht. Den vollen
     Text gibt es ueber den Google-Link darunter. */
  .stimme blockquote{margin:14px 0 0;font-size:15.5px;line-height:1.75;color:#d8c6b0;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
  .stimme figcaption{margin-top:auto;padding-top:14px;font-family:"Segoe UI",system-ui,sans-serif;
    font-size:12.5px;color:var(--gold2)}
  .stimmen-mehr{margin-top:22px;text-align:center;font-family:"Segoe UI",system-ui,sans-serif;font-size:13px}
  .stimmen-mehr a{color:var(--gold2);border-bottom:1px solid rgba(236,187,82,.35);padding-bottom:2px}
  .stimmen-mehr a:hover{color:var(--gold3)}
  /* Auf dem Telefon: kein Selbstlauf, keine Maske - dafuer wischbar.
     Auf dem Geraet des Wirts blieb der ganze Bereich leer; Safari tut
     sich schwer mit Flaechen, die zugleich maskiert und bewegt sind.
     Hier faellt beides weg, und die Karten lassen sich mit dem Finger
     schieben - was auf dem Telefon ohnehin naeher liegt. */
  @media(max-width:700px){
    .stimmen-band{-webkit-mask-image:none;mask-image:none;overflow:visible}
    .stimmen-spur{animation:none;width:auto;overflow-x:auto;
      scroll-snap-type:x mandatory;gap:14px;padding:4px 24px 8px;margin:0 -24px;
      scrollbar-width:none;-ms-overflow-style:none}
    .stimmen-spur::-webkit-scrollbar{display:none}
    .stimmen-satz[aria-hidden="true"]{display:none}
    .stimme{scroll-snap-align:center}
    .stimmen-band.rv{opacity:1;transform:none}
  }

  /* Wer weniger Bewegung eingestellt hat, bekommt das Band stehend -
     dafuer laesst es sich dann von Hand seitlich schieben. */
  @media (prefers-reduced-motion:reduce){
    .stimmen-spur{animation:none;width:auto;overflow-x:auto;
      scrollbar-width:none;-ms-overflow-style:none}
    .stimmen-spur::-webkit-scrollbar{display:none}
    .stimmen-satz[aria-hidden="true"]{display:none}
  }

  /* ---------- Die Menschen dahinter ----------
     Fuenf Kreise nebeneinander, der mittlere gross und farbig, die
     Nachbarn zurueckgenommen. Wer spricht, ist damit ohne ein Wort
     klar - bei einer gleichmaessigen Reihe muesste man raten.

     Bewegt wird die Reihe, nicht die einzelnen Kreise: Ein einziges
     transform ist fluessig, dreizehn waeren es nicht. */
  .tb-buehne{--tb-gross:150px;--tb-klein:96px;--tb-luft:22px;
    /* Eigene Position: Das Skript rechnet die Verschiebung aus
       offsetLeft, und das zaehlt vom naechsten Vorfahren mit Position.
       Ohne diese Zeile waere das im Filmbereich .film-in - und der
       grosse Kreis saesse hundert Punkte zu weit links. */
    position:relative;
    margin:clamp(26px,4vw,40px) auto 0;overflow:hidden;
    /* Genau fuenf: ein grosser Kreis, vier kleine, vier Abstaende.
       Ohne diese Rechnung waere die Buehne so breit wie der Abschnitt,
       und auf einem grossen Bildschirm staenden neun Gesichter da. */
    width:calc(var(--tb-gross) + 4 * var(--tb-klein) + 4 * var(--tb-luft));
    max-width:100%;
    /* Die sechsten laufen an den Raendern aus, statt abgehackt zu
       enden - so sieht man, dass es weitergeht. */
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent)}

  .tb-reihe{display:flex;align-items:center;justify-content:flex-start;
    gap:var(--tb-luft,22px);
    /* Die Verschiebung setzt das Skript; ohne Skript steht die Reihe
       einfach am Anfang. */
    transform:translateX(var(--tb-schub,0px));
    /* Straff statt gemaechlich: Waehrend die Reihe wandert, ist der
       grosse Kreis unterwegs und nicht mittig - je kuerzer das
       dauert, desto seltener sieht man ihn dabei. */
    transition:transform .6s cubic-bezier(.34,.9,.28,1);
    will-change:transform}

  .tb-kreis{flex:none;width:var(--tb-klein,96px);height:var(--tb-klein,96px);
    padding:0;border:0;background:none;cursor:pointer;border-radius:50%;
    position:relative;
    transition:width .6s cubic-bezier(.34,.9,.28,1),height .6s cubic-bezier(.34,.9,.28,1),
               filter .55s ease,opacity .55s ease;
    filter:grayscale(1) brightness(.62);opacity:.55}
  .tb-kreis img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover}

  /* Der in der Mitte: gross, farbig, mit einem feinen Goldring. */
  .tb-kreis.mitte{width:var(--tb-gross,150px);height:var(--tb-gross,150px);
    filter:none;opacity:1}
  .tb-kreis.mitte::after{content:"";position:absolute;inset:-5px;border-radius:50%;
    border:1px solid rgba(236,187,82,.55);
    box-shadow:0 0 26px rgba(236,187,82,.18)}
  .tb-kreis:hover{opacity:.85;filter:grayscale(.4) brightness(.8)}
  .tb-kreis.mitte:hover{opacity:1;filter:none}
  .tb-kreis:focus-visible{outline:2px solid var(--gold2);outline-offset:4px}

  /* Name und Spruch: feste Hoehe fuer zwei Zeilen. Die Sprueche sind
     zwischen 49 und 66 Zeichen lang - ohne feste Hoehe huepfte bei
     jedem Wechsel alles darunter. */
  /* Die Linie zwischen Knopf und Gesichtern: zwei Goldstriche, die
     zur Mitte hin verlaufen, und ein Punkt dazwischen. Dasselbe Motiv
     wie die Zierstriche unter den Ueberschriften. */
  .tb-strich{display:flex;align-items:center;justify-content:center;gap:12px;
    width:min(320px,72%);margin:clamp(34px,5vw,52px) auto 0;color:var(--gold2)}
  .tb-strich i{flex:1;height:1px;
    background:linear-gradient(90deg,transparent,rgba(236,187,82,.45))}
  .tb-strich i:last-child{background:linear-gradient(90deg,rgba(236,187,82,.45),transparent)}
  .tb-strich b{width:5px;height:5px;border-radius:50%;
    background:rgba(236,187,82,.75);flex:none}

  .film .tb-buehne{margin-top:clamp(30px,4.4vw,46px)}
  /* 92 statt 74: Der laengste Spruch braucht am Bildschirm 89 Punkte.
     Gemessen ueber alle dreizehn in allen vier Sprachen. */
  .film .tb-wort{min-height:92px;margin-top:clamp(16px,2.2vw,24px)}

  .tb-wort{margin-top:clamp(20px,3vw,30px);text-align:center;
    min-height:86px;display:flex;flex-direction:column;align-items:center;
    justify-content:flex-start;gap:7px}
  .tb-name{font-family:Georgia,"Times New Roman",serif;font-size:clamp(17px,2.4vw,21px);
    letter-spacing:.04em;color:var(--gold3);
    opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
  .tb-spruch{font-family:Georgia,"Times New Roman",serif;font-style:italic;
    font-size:clamp(13.5px,1.7vw,16px);line-height:1.55;color:var(--muted);
    max-width:min(560px,88vw);text-wrap:balance;
    opacity:0;transform:translateY(6px);transition:opacity .45s ease .06s,transform .45s ease .06s}
  .tb-buehne.da .tb-name,.tb-buehne.da .tb-spruch{opacity:1;transform:none}

  /* Ohne Skript: eine schlichte Liste statt einer stummen Reihe. */
  .tb-liste{list-style:none;margin:26px 0 0;padding:0;text-align:center;
    display:flex;flex-direction:column;gap:9px;color:var(--muted);line-height:1.6}
  .tb-liste b{color:var(--gold3)}

  @media(max-width:700px){
    /* Auf dem Telefon drei statt fuenf - sonst wird das mittlere
       Gesicht briefmarkengross. Ein grosser Kreis, zwei kleine, zwei
       Abstaende. */
    .tb-buehne{--tb-klein:64px;--tb-gross:112px;--tb-luft:16px;
      width:calc(var(--tb-gross) + 2 * var(--tb-klein) + 2 * var(--tb-luft));
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
      mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
    /* Spezifischer als die Regel fuer den Filmbereich - sonst gewinnt
       dort die 92 und am Telefon fehlte eine Zeile. */
    .tb-wort,.film .tb-wort{min-height:104px}
  }

  /* Wer weniger Bewegung eingestellt hat, bekommt die Reihe stehend -
     das Skript ruckt dann nicht weiter. */
  @media (prefers-reduced-motion:reduce){
    .tb-reihe{transition:none}
    .tb-kreis{transition:none}
  }

  /* ---------- reserve ---------- */
  .reserve{position:relative;text-align:center;overflow:hidden}
  .reserve .bg{position:absolute;inset:0;z-index:0}
  .reserve .bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.32)}
  .reserve::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(60% 90% at 50% 100%,rgba(224,85,42,.4),transparent 60%),linear-gradient(180deg,var(--ink),rgba(14,9,6,.6) 40%,var(--ink))}
  .reserve .in{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:clamp(80px,13vw,150px) 24px}
  .reserve h2{font-size:clamp(32px,8vw,62px);font-weight:700;line-height:1.02}
  .reserve p{margin-top:14px;color:#e7d4c2;font-size:18px}
  .reserve .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}

  /* ---------- footer ---------- */
  footer.foot{background:#0a0603;border-top:1px solid var(--line);padding:56px 24px 42px;text-align:center;
    font-family:"Segoe UI",system-ui,sans-serif;font-size:14px;color:#c1af9a}
  footer.foot img{height:60px;margin:0 auto 18px;opacity:.95}
  footer.foot .row{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin:16px 0}
  /* Das Rechtliche muss dastehen, ist aber nicht der Weg, den ein
     Gast sucht - kleiner und leiser, mit etwas Abstand davor. */
  footer.foot .row.recht{margin-top:22px;gap:18px;font-size:12.5px;opacity:.62}
  footer.foot a{position:relative}
  footer.foot a:hover{color:var(--gold2)}
  footer.foot .fine{margin-top:20px;font-size:12px;color:#7d6c58}
  .gold{color:var(--gold2)}

  /* ---------- Meldung in der Mitte ----------
     Feiertage, Betriebsferien, Renovationen. Erscheint einmal pro
     Besuch ueber der Startseite und laesst sich wegklicken. */
  .hinweisbox{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
    padding:24px;background:rgba(5,3,2,.72);backdrop-filter:blur(8px);
    opacity:0;transition:opacity .4s ease}
  .hinweisbox[hidden]{display:none}
  .hinweisbox.zeigen{opacity:1}
  .hinweisbox-feld{position:relative;width:100%;max-width:440px;max-height:88vh;overflow-y:auto;
    padding:38px clamp(24px,5vw,40px) 34px;border-radius:22px;text-align:center;
    border:1px solid rgba(236,187,82,.42);
    background:linear-gradient(170deg,#1a120b,#0d0805);
    box-shadow:0 34px 90px rgba(0,0,0,.7);
    transform:translateY(18px) scale(.97);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .hinweisbox.zeigen .hinweisbox-feld{transform:none}
  .hinweisbox-zu{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
    cursor:pointer;border:1px solid rgba(236,187,82,.4);background:rgba(0,0,0,.4);
    color:var(--gold2);font-size:22px;line-height:1;transition:.2s}
  .hinweisbox-zu:hover{color:var(--gold3);border-color:var(--gold2);background:rgba(236,187,82,.14)}
  .hinweisbox-zeichen{width:56px;height:56px;margin:0 auto 16px;color:var(--gold2)}
  .hinweisbox-zeichen svg{width:100%;height:100%;display:block}
  .hinweisbox-oben{font-family:"Segoe UI",system-ui,sans-serif;font-size:10.5px;font-weight:700;
    letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
  .hinweisbox-titel{font-size:clamp(20px,4vw,25px);font-weight:700;line-height:1.25;
    letter-spacing:.02em;text-transform:uppercase;color:var(--cream)}
  .hinweisbox-titel b,.hinweisbox-titel strong{color:var(--gold2)}
  .hinweisbox-stern{display:flex;align-items:center;gap:12px;margin:16px 0 6px;color:var(--gold2)}
  .hinweisbox-stern::before,.hinweisbox-stern::after{content:"";flex:1;height:1px;
    background:linear-gradient(90deg,transparent,rgba(236,187,82,.45),transparent)}
  .hinweisbox-stern span{font-size:12px}
  .hinweisbox-zeilen{margin-top:12px}
  .hinweisbox-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:9px 0;font-size:15.5px;color:#e2d2bd}
  .hinweisbox-zeile + .hinweisbox-zeile{border-top:1px solid rgba(236,187,82,.1)}
  .hinweisbox-zeile.voll{justify-content:center;text-align:center}
  .hinweisbox-zeile dt{margin:0}
  .hinweisbox-zeile dd{margin:0;color:var(--gold3);font-variant-numeric:tabular-nums;white-space:nowrap}
  .hinweisbox-text{margin-top:14px;font-style:italic;font-size:15.5px;line-height:1.7;color:#d8c6b0}

  /* ---------- Festmenü auf der Startseite ----------
     Gesetzt wie eine Menuekarte auf Papier: alles mittig, der Name des
     Gangs gross, die Beschreibung kleiner darunter, dazwischen eine
     feine Ranke. Bewusst KEIN Aufpoppen wie bei der Meldung - ein Menue
     ist eine Einladung und soll dastehen, solange es angeboten wird. */
  .menusektion{padding-top:clamp(46px,7vw,74px);padding-bottom:0}
  .menukarte{max-width:620px;margin:0 auto;text-align:center;
    padding:clamp(30px,5vw,48px) clamp(22px,5vw,52px) clamp(28px,4vw,42px);
    border:1px solid rgba(236,187,82,.3);border-radius:22px;
    background:linear-gradient(170deg,#1a120b,#0d0805);
    box-shadow:0 26px 70px rgba(0,0,0,.5)}
  .menukarte-zeichen{width:50px;height:50px;margin:0 auto 14px;color:var(--gold2)}
  .menukarte-zeichen svg{width:100%;height:100%;display:block}
  .menukarte-oben{font-family:"Segoe UI",system-ui,sans-serif;font-size:10.5px;font-weight:700;
    letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
  .menukarte-titel{font-size:clamp(26px,5vw,38px);font-weight:700;line-height:1.15;
    letter-spacing:.02em;text-transform:uppercase;color:var(--gold2)}
  .menukarte-titel b,.menukarte-titel strong{color:var(--cream)}
  .menukarte-anzahl{font-family:"Segoe UI",system-ui,sans-serif;font-size:11.5px;font-weight:600;
    letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:9px}

  .menukarte-gaenge{list-style:none;margin:26px 0 0;padding:0;counter-reset:none}
  .menukarte-gang{font-size:clamp(19px,3.2vw,23px);font-weight:700;line-height:1.3;color:var(--cream)}
  .menukarte-dazu{margin-top:6px;font-size:15.5px;line-height:1.65;color:#d3c1aa}

  /* Die Ranke trennt zwei Gaenge - darum steht sie im zweiten und nicht
     als Rahmenlinie am ersten. */
  .menukarte-ranke{display:flex;align-items:center;justify-content:center;gap:12px;
    margin:22px auto;max-width:230px;color:var(--gold2)}
  .menukarte-ranke span{flex:1;height:1px;
    background:linear-gradient(90deg,transparent,rgba(236,187,82,.5),transparent)}
  .menukarte-ranke i{font-style:normal;font-size:13px;line-height:1}

  .menukarte-preis{margin-top:28px;padding-top:20px;border-top:1px solid rgba(236,187,82,.22);
    font-family:"Segoe UI",system-ui,sans-serif;font-size:clamp(21px,3.4vw,26px);font-weight:700;
    color:var(--gold3);font-variant-numeric:tabular-nums}
  .menukarte-text{margin-top:16px;font-style:italic;font-size:15.5px;line-height:1.7;color:#d8c6b0}
  .menukarte-knopf{margin-top:24px}

  @media(max-width:520px){
    .menukarte-gaenge{margin-top:20px}
    .menukarte-ranke{margin:18px auto;max-width:170px}
  }
  .hinweisbox-text p + p{margin-top:10px}
  .hinweisbox-text b,.hinweisbox-text strong{font-style:normal;color:var(--gold2)}
  @media (prefers-reduced-motion:reduce){
    .hinweisbox,.hinweisbox-feld{transition:none}
  }

  /* ---------- Musikknopf ----------
     Sitzt unten rechts, klein und ruhig. Laeuft die Musik, tanzen die
     vier Balken statt der Note. */
  .musikknopf{position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:52;
    width:52px;height:52px;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(236,187,82,.45);background:rgba(12,8,5,.72);
    backdrop-filter:blur(8px);color:var(--gold2);
    box-shadow:0 8px 24px rgba(0,0,0,.45);transition:.25s}
  .musikknopf:hover{border-color:var(--gold2);color:var(--gold3);background:rgba(236,187,82,.16)}
  .musikknopf .note{width:22px;height:22px}
  .musikknopf .balken{display:none;align-items:flex-end;gap:3px;height:19px}
  .musikknopf .balken i{display:block;width:3px;background:currentColor;border-radius:2px;
    animation:musikbalken 1.1s ease-in-out infinite}
  .musikknopf .balken i:nth-child(1){height:8px;animation-delay:0s}
  .musikknopf .balken i:nth-child(2){height:16px;animation-delay:.18s}
  .musikknopf .balken i:nth-child(3){height:11px;animation-delay:.36s}
  .musikknopf .balken i:nth-child(4){height:18px;animation-delay:.54s}
  .musikknopf.an{border-color:var(--gold2);color:var(--gold3);background:rgba(236,187,82,.18)}
  .musikknopf.an .note{display:none}
  .musikknopf.an .balken{display:flex}
  @keyframes musikbalken{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
  @media (prefers-reduced-motion:reduce){.musikknopf .balken i{animation:none}}

  /* ---------- Folgen Sie uns ---------- */
  /* Steht zuoberst in der Fusszeile, also zwischen dem Reservations-
     Abschnitt und dem Logo - dort faellt es auf, ohne zu draengen. */
  /* ---------- Hunde: Terrasse ja, drinnen nein ----------
     Pfote links, Text rechts und linksbuendig. Mittig gesetzt liest sich
     eine Regel wie eine Einladung; links untereinander sieht man auf
     einen Blick, was gilt und was nicht. Der Kasten ist schmal und ruhig
     gehalten - er soll die Fusszeile nicht beherrschen, aber auch nicht
     zu uebersehen sein. */
  /* ---------- Hunde: der Hinweis im roten Band ----------
     Er stand einmal unten im Fuss. Dort liest man ihn erst, wenn man
     schon entschieden hat - jetzt steht er bei den Reservationsknoepfen,
     wo er gebraucht wird.

     Links das Zeichen, ein senkrechter Strich, rechts der Text: dieselbe
     Ordnung wie auf einem Schild an der Tuer. Auf schmalem Schirm rutscht
     das Zeichen nach oben, sonst bliebe fuer den Text nichts uebrig. */
  /* „.reserve .in" setzt 680px - zwei Klassen schlagen eine. Hier steht
     die Karte breiter, also muss die Regel es auch sein. */
  .reserve .hunde-band{max-width:900px;padding:0 24px clamp(56px,8vw,96px)}
  .hunde-karte{display:flex;align-items:center;gap:clamp(18px,3vw,34px);
    padding:clamp(18px,2.6vw,28px) clamp(20px,2.8vw,34px);
    border:1px solid rgba(212,175,110,.34);border-radius:20px;
    background:linear-gradient(180deg,rgba(20,13,8,.72),rgba(12,8,5,.82));
    text-align:left;backdrop-filter:blur(2px)}

  .hunde-zeichen{flex:none;display:flex;align-items:center;
    padding-right:clamp(18px,3vw,34px);
    border-right:1px solid rgba(212,175,110,.3);color:var(--gold)}
  .hunde-zeichen svg{width:clamp(76px,9vw,112px);height:auto;display:block}

  .hunde-inhalt{min-width:0;flex:1}
  .hunde-eyebrow{font-family:"Segoe UI",system-ui,sans-serif;
    font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold)}
  .hunde-kopf{margin-top:5px;font-size:clamp(22px,2.7vw,32px);font-weight:700;
    line-height:1.08;color:var(--cream);text-wrap:balance}

  .hunde-liste{list-style:none;margin:clamp(14px,1.9vw,20px) 0 0;padding:0;
    display:flex;flex-direction:column;gap:clamp(10px,1.3vw,13px)}
  .hunde-liste li{display:flex;align-items:flex-start;gap:13px}
  .hunde-liste svg{flex:none;width:25px;height:25px;color:var(--gold);margin-top:1px}
  .hunde-liste span{font-family:"Segoe UI",system-ui,sans-serif;
    font-size:clamp(13.8px,1.1vw,15.5px);line-height:1.5;color:var(--cream)}

  .hunde-dank{margin-top:clamp(13px,1.7vw,18px);
    padding-top:clamp(11px,1.4vw,14px);
    border-top:1px solid rgba(212,175,110,.22);
    font-family:"Segoe UI",system-ui,sans-serif;font-size:13.5px;color:var(--muted)}

  @media (max-width:760px){
    .hunde-karte{flex-direction:column;align-items:flex-start;gap:18px}
    .hunde-zeichen{padding-right:0;border-right:0;padding-bottom:16px;
      border-bottom:1px solid rgba(212,175,110,.3);width:100%;justify-content:center}
    .hunde-zeichen svg{width:78px}
  }

  @media(max-width:520px){
    .hunde{gap:13px;padding:17px 18px}
    .hunde-pfote{width:27px;height:27px}
    .hunde-ja,.hunde-nein{font-size:14.5px}
  }

  .folgen{margin:0 auto 38px;padding-bottom:34px;border-bottom:1px solid var(--line);max-width:760px}

  /* Zwei Gruppen nebeneinander: „Folgen Sie uns auf" und „Bewerten Sie
     uns auf". Auf Instagram folgt man, auf Google bewertet man - unter
     einer gemeinsamen Ueberschrift geht die Bitte um eine Bewertung
     unter. Eine feine Linie dazwischen trennt sie, ohne zu poltern.
     Steht nur eine Gruppe da, faellt die Linie von selbst weg. */
  .folgen-gruppen{display:flex;flex-wrap:wrap;justify-content:center;
    gap:clamp(22px,5vw,54px);margin-top:22px}
  .folgen-gruppe{position:relative;flex:0 1 auto}
  .folgen-gruppe + .folgen-gruppe::before{content:"";position:absolute;
    left:calc(clamp(22px,5vw,54px) / -2);top:6px;bottom:6px;width:1px;
    background:linear-gradient(180deg,transparent,rgba(236,187,82,.28),transparent)}
  .folgen-gruppe .folgen-reihe{margin-top:14px}
  .folgen-titel{font-family:Georgia,"Times New Roman",serif;font-size:23px;font-weight:700;
    color:var(--cream);letter-spacing:.01em}
  .folgen-unter{font-family:"Segoe UI",system-ui,sans-serif;font-size:10.5px;font-weight:700;
    letter-spacing:.24em;text-transform:uppercase;color:var(--gold2);opacity:.85}
  .folgen-reihe{display:flex;gap:clamp(14px,3.5vw,30px);justify-content:center;flex-wrap:wrap;margin-top:20px}
  .folgen-reihe a{display:inline-flex;flex-direction:column;align-items:center;gap:8px;
    min-width:64px;padding:10px 6px 8px;border-radius:12px;color:var(--gold2);
    transition:color .2s,background .2s,transform .2s}
  .folgen-reihe a:hover{color:var(--gold3);background:rgba(236,187,82,.1);transform:translateY(-2px)}
  .folgen-reihe svg{width:27px;height:27px}
  .folgen-reihe span{font-size:11.5px;letter-spacing:.06em;color:#a89275;transition:color .2s}
  .folgen-reihe a:hover span{color:var(--gold3)}


  /* ---------- FILM ---------- */
  .film{position:relative;min-height:82vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
  .film-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.44) saturate(1.06)}
  .film::after{content:"";position:absolute;inset:0;background:radial-gradient(72% 92% at 50% 50%,rgba(14,9,6,.28),rgba(14,9,6,.88))}
  .film-in{position:relative;z-index:1;max-width:840px;padding:80px 24px}
  /* Steht die Gesichterreihe darin, beginnt der Kasten weiter oben und
     endet weiter unten - sonst wird der Filmbereich zu gedraengt. */
  .film-in:has(.tb-buehne){padding-top:46px;padding-bottom:64px}
  .film-q{font-size:clamp(24px,5.4vw,44px);font-style:italic;line-height:1.25;color:#f7ead8;margin-top:14px;text-wrap:balance}
  .play{position:relative;margin-top:34px;display:inline-flex;align-items:center;gap:12px;cursor:pointer;
    background:rgba(236,187,82,.12);border:1px solid rgba(236,187,82,.5);color:var(--gold3);border-radius:999px;
    padding:15px 28px;font-family:"Segoe UI",system-ui,sans-serif;font-weight:700;font-size:14px;letter-spacing:.05em;
    transition:.25s;backdrop-filter:blur(6px)}
  .play:hover{background:rgba(236,187,82,.22);border-color:var(--gold2);color:#fff5dd}
  .play svg{width:19px;height:19px}
  .play::after{content:"";position:absolute;inset:-7px;border-radius:999px;border:1px solid rgba(236,187,82,.45);
    animation:pulse 2.4s ease-out infinite;pointer-events:none}
  @keyframes pulse{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.32);opacity:0}}

  /* ---------- video lightbox ---------- */
  .vbox{position:fixed;inset:0;z-index:300;background:rgba(5,3,2,.95);backdrop-filter:blur(12px);
    display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .35s}
  .vbox.show{opacity:1;pointer-events:auto}
  .vbox video{width:100%;max-width:1000px;max-height:82vh;border-radius:14px;background:#000;
    box-shadow:0 30px 80px rgba(0,0,0,.75);outline:1px solid rgba(236,187,82,.18)}
  .vbox-close{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;z-index:2;cursor:pointer;
    border:1px solid rgba(236,187,82,.45);background:rgba(0,0,0,.45);color:var(--gold2);font-size:24px;line-height:1}
  .vbox-close:hover{color:var(--gold3);border-color:var(--gold2)}

  /* =====================================================================
     UNTERSEITEN (Karten, Team, Jobs, Textseiten)
     ===================================================================== */

  /* ---------- Seitenkopf ---------- */
  .seitenkopf{position:relative;overflow:hidden;padding:calc(96px + clamp(50px,9vw,90px)) 0 clamp(44px,7vw,72px);
    text-align:center;border-bottom:1px solid var(--line)}
  .seitenkopf .bg{position:absolute;inset:0;z-index:0}
  .seitenkopf .bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.58) saturate(1.08)}
  /* Der Schleier ueber dem Kopfbild. Oben dunkel, damit die Kopfzeile
     lesbar bleibt, unten in die Seitenfarbe auslaufend - so gibt es
     keine sichtbare Kante zur Karte darunter. In der Mitte, wo Titel
     und Unterzeile stehen, liegt ein weicher Schatten genau hinter der
     Schrift statt ueber dem ganzen Bild. Damit bleibt vom Foto mehr
     sichtbar, ohne dass der goldene Titel an Kontrast verliert. */
  .seitenkopf::after{content:"";position:absolute;inset:0;z-index:0;
    background:
      radial-gradient(70% 62% at 50% 52%,rgba(10,6,4,.62),rgba(10,6,4,0) 72%),
      linear-gradient(180deg,rgba(14,9,6,.62),rgba(14,9,6,.2) 42%,rgba(14,9,6,.72) 82%,var(--ink))}
  .seitenkopf .in{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:0 24px}
  .seitenkopf h1{font-size:clamp(34px,8vw,68px);font-weight:700;line-height:1.03;margin-top:10px;
    text-wrap:balance;hyphens:none;
    background:linear-gradient(100deg,#b3831f,#ecbb52,#f7dc93,#ecbb52);-webkit-background-clip:text;background-clip:text;color:transparent}
  .seitenkopf p.lead{margin:16px auto 0;color:#d8c6b0;font-size:clamp(16px,3.6vw,19px)}

  /* ---------- Seitenkopf: das Bild kommt herein ----------
     Vorher war der Kopf erst dunkel und das Bild sprang dann fertig
     hinein - beim Wechsel zwischen Speisekarte, Weinkarte und
     Dessertkarte fiel das jedes Mal auf.

     Jetzt blendet es sich auf und faehrt dabei ganz langsam von einer
     Spur zu gross auf sein Mass zurueck. Titel und Reiter folgen kurz
     danach, versetzt.

     Das Ganze haengt an der Klasse „bereit", die das Skript erst setzt,
     wenn das Bild wirklich da ist. Ohne Skript fehlt die Klasse „js" am
     Seitenanfang - dann greifen diese Regeln gar nicht erst und alles
     steht sofort da. */
  .js .seitenkopf .bg img{
    opacity:0;transform:scale(1.07);will-change:opacity,transform;
    transition:opacity .95s ease, transform 1.9s cubic-bezier(.16,.82,.24,1);
  }
  .js .seitenkopf.bereit .bg img{opacity:1;transform:none;
    /* Und dann bleibt es nicht stehen: Ist das Bild angekommen, faehrt
       es eine halbe Minute lang unmerklich naeher heran und wandert
       dabei eine Spur nach oben links. Die Bewegung ist so langsam,
       dass man sie nicht sieht - man merkt nur, dass das Bild lebt.

       Der Start ist um die 1.9s verzoegert, die das Hereinfahren oben
       dauert. „forwards" statt „both": Vorher soll die Bewegung noch
       gar nicht mitreden, sonst wuerde sie das Hereinfahren stoeren. */
    animation:kopfbild-wandern 30s ease-out 1.9s forwards}

  @keyframes kopfbild-wandern{
    from{transform:scale(1)}
    /* 1.09 statt 1.2: Bei staerkerem Zoom wird ein Foto sichtbar
       unscharf. Das Verschieben bleibt innerhalb dessen, was der Zoom
       an Rand freigibt - sonst blitzte eine Kante auf. */
    to{transform:scale(1.09) translate3d(-1.1%,-1.4%,0)}
  }

  /* Der dunkle Schleier ist am Anfang etwas dichter und lichtet sich mit
     dem Bild - so wirkt der Uebergang wie ein Aufblenden, nicht wie ein
     Ein-Ausschalten. */
  .js .seitenkopf::after{opacity:1;transition:opacity 1.1s ease}
  .js .seitenkopf.bereit::after{opacity:.92}

  .js .seitenkopf .in > *{
    opacity:0;transform:translateY(16px);
    transition:opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1);
  }
  .js .seitenkopf.bereit .in > *{opacity:1;transform:none}
  /* Versetzt: erst die kleine Zeile, dann der Titel, dann der Rest */
  .js .seitenkopf.bereit .in > *:nth-child(1){transition-delay:.10s}
  .js .seitenkopf.bereit .in > *:nth-child(2){transition-delay:.18s}
  .js .seitenkopf.bereit .in > *:nth-child(3){transition-delay:.26s}
  .js .seitenkopf.bereit .in > *:nth-child(4){transition-delay:.34s}

  @media (prefers-reduced-motion:reduce){
    .js .seitenkopf .bg img,
    .js .seitenkopf .in > *{opacity:1;transform:none;transition:none}
    .js .seitenkopf::after{transition:none}
    /* Muss eigens dastehen: „.bereit" waere sonst staerker als die
       Zeile darueber und das Bild wanderte trotzdem. */
    .js .seitenkopf.bereit .bg img{animation:none;transform:none}
  }

  /* ---------- Zähler seit der Eröffnung ---------- */
  .zaehler{margin:24px auto 0;max-width:620px}
  .zaehler-titel{font-family:"Segoe UI",system-ui,sans-serif;font-size:11px;font-weight:700;
    letter-spacing:.22em;text-transform:uppercase;color:var(--gold2);margin-bottom:12px}
  .zaehler-felder{display:flex;align-items:stretch;justify-content:center;
    border:1px solid rgba(236,187,82,.3);border-radius:14px;
    background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25));
    box-shadow:inset 0 1px 0 rgba(236,187,82,.12)}
  .zaehler-felder .feld{flex:1;padding:16px 8px 14px;text-align:center;position:relative}
  .zaehler-felder .feld + .feld::before{content:"";position:absolute;left:0;top:18%;bottom:18%;
    width:1px;background:rgba(236,187,82,.22)}
  .zaehler .zahl{display:block;font-size:clamp(26px,5.4vw,40px);font-weight:700;line-height:1;
    font-variant-numeric:tabular-nums;
    background:linear-gradient(100deg,#b3831f,#ecbb52,#f7dc93,#ecbb52);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .zaehler .wort{display:block;margin-top:8px;font-family:"Segoe UI",system-ui,sans-serif;
    font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  @media(max-width:430px){
    .zaehler-felder .feld{padding:12px 4px 11px}
    .zaehler .wort{letter-spacing:.1em;font-size:9.5px}
  }

  /* ---------- Reiter zwischen den Karten ---------- */
  .reiter{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:26px}
  .reiter a{font-family:"Segoe UI",system-ui,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;padding:11px 20px;border-radius:999px;border:1px solid var(--line);
    color:var(--muted);transition:.25s;background:rgba(0,0,0,.25)}
  .reiter a:hover{color:var(--gold3);border-color:rgba(236,187,82,.45)}
  .reiter a.hier{background:rgba(236,187,82,.16);border-color:rgba(236,187,82,.5);color:var(--gold3)}

  /* ---------- Kategorieleiste, bleibt beim Scrollen oben ---------- */
  .katleiste{position:sticky;top:62px;z-index:40;background:rgba(12,8,5,.94);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);padding:10px 0}
  /* „safe center": mittig, solange alles hineinpasst - wird die Leiste zu
     schmal, rutscht sie nach links, damit vorne nichts abgeschnitten wird. */
  .katleiste .wrap{display:flex;gap:8px;align-items:center;justify-content:safe center}

  .vegtoggle{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
    font-family:"Segoe UI",system-ui,sans-serif;font-size:12.5px;font-weight:700;white-space:nowrap;
    border:1px solid rgba(143,208,143,.45);color:#8fd08f;background:rgba(143,208,143,.08);
    padding:9px 15px;border-radius:999px;transition:.2s}
  .vegtoggle:hover{background:rgba(143,208,143,.16)}
  .vegtoggle.an{background:#3f7a4d;border-color:#3f7a4d;color:#f2fbf2}
  .vegtoggle svg{width:15px;height:15px;flex:0 0 auto}

  .cats{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0}
  .cats::-webkit-scrollbar{display:none}
  .cats a{font-family:"Segoe UI",system-ui,sans-serif;font-size:12.5px;font-weight:700;white-space:nowrap;
    padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.3);
    color:var(--muted);transition:.2s}
  .cats a:hover{color:var(--gold3);border-color:rgba(236,187,82,.4)}
  .cats a.hier{background:rgba(236,187,82,.18);border-color:rgba(236,187,82,.55);color:var(--gold3)}

  /* ---------- Kategorie ---------- */
  .kategorie{padding-top:clamp(40px,6vw,68px);scroll-margin-top:120px}
  .kategorie > h2{text-align:center;font-size:clamp(26px,5.5vw,42px);font-weight:700;
    background:linear-gradient(100deg,#b3831f,#ecbb52,#f7dc93,#ecbb52);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .kategorie .strich{width:74px;height:2px;background:var(--gold);opacity:.5;border-radius:2px;margin:14px auto 0}
  .kategorie .hinweis{text-align:center;margin-top:12px;color:var(--muted);font-size:15px;font-style:italic}

  /* Zwischenueberschrift innerhalb einer Kategorie (Rind, Kalb, Poulet ...) */
  .zwischentitel{margin:28px 0 6px;text-align:center;font-family:"Segoe UI",system-ui,sans-serif;
    font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}

  /* ---------- Gericht als eigene Karte ---------- */
  /* Auf den Kartenseiten sind die Einträge schmaler als der übrige
     Inhalt. Über die volle Breite gezogen läuft das Auge sonst zu weit
     zwischen Namen und Preis. */
  .kartenspalte{max-width:960px;margin-left:auto;margin-right:auto}

  .gerichte{margin-top:22px}
  /* Etwas heller als der Seitenhintergrund, damit sich jede Karte klar
     abhebt - wie ein Blatt Papier, das auf dem Tisch liegt. */
  .gericht{position:relative;border:1px solid rgba(236,187,82,.18);border-radius:14px;
    background:linear-gradient(180deg,rgba(255,244,228,.14),rgba(255,244,228,.085));
    box-shadow:0 2px 10px rgba(0,0,0,.3);
    padding:13px 20px 7px;margin-bottom:10px;
    /* „opacity" ist wegen des Vegi-Filters dabei: Was er wegnimmt,
       blendet erst aus und verschwindet dann. */
    transition:border-color .25s,transform .25s,box-shadow .25s,background .25s,opacity .19s ease}
  .gericht:hover{border-color:rgba(236,187,82,.45);transform:translateY(-2px);
    background:linear-gradient(180deg,rgba(255,244,228,.185),rgba(255,244,228,.12));
    box-shadow:0 12px 34px rgba(0,0,0,.42)}
  /* ---------- Die Gerichte kommen beim Scrollen herein ----------
     Nur zum Anschauen (Punkt 8). Jedes Gericht liegt unsichtbar da und
     rutscht sechzehn Punkte nach oben, sobald man in seine Naehe
     scrollt. Das Skript gibt jedem seinen Versatz mit.

     Eine Bewegung (animation), keine Ueberblendung (transition): Eine
     Ueberblendung wuerde sich das Feld mit dem Anheben beim
     Draufzeigen teilen, und das Gericht bliebe danach traege. Die
     Bewegung wird nach ihrem Lauf abgeworfen - „fertig" nimmt sie
     wieder weg, und das Gericht ist wieder ein ganz gewoehnliches. */
  .js .blende .gericht{opacity:0}
  .js .blende .gericht.da{animation:gericht-herein .55s cubic-bezier(.2,.8,.2,1) both}
  .js .blende .gericht.fertig{opacity:1;animation:none}
  /* Der Vegi-Filter behaelt das letzte Wort: Was er wegnimmt, bleibt
     weg, auch wenn die Blende es eben erst hereingeholt hat. */
  .js .blende .gericht.blendet-weg{opacity:0}

  @keyframes gericht-herein{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:none}
  }

  /* Ohne Skript und bei „Bewegung reduzieren" steht alles sofort da. */
  @media (prefers-reduced-motion:reduce){
    .js .blende .gericht{opacity:1;animation:none}
  }

  /* ---------- Vegi-Filter: der weiche Wechsel ----------
     Frueher sprang die Liste hart um: Ein Klick, und die Haelfte der
     Gerichte war weg. Jetzt blenden die weichenden erst aus (kurz, gut
     eine Zehntelsekunde) und werden erst danach aus der Zeile genommen.
     Der Sprung passiert immer noch - aber nach dem Ausblenden, und das
     liest sich als Absicht statt als Ruck.

     Ohne Skript und bei „Bewegung reduzieren" greift nichts davon. */
  .js .gericht.blendet-weg{opacity:0;transform:scale(.985)}
  @media (prefers-reduced-motion:reduce){
    .js .gericht.blendet-weg{opacity:1;transform:none;transition:none}
  }

  .gericht.empfohlen{border-color:rgba(236,187,82,.4);
    background:linear-gradient(180deg,rgba(236,187,82,.13),rgba(236,187,82,.07))}

  .gericht .name{font-size:20px;font-weight:700;color:var(--cream);line-height:1.3;padding-right:96px}
  .gericht .desc{color:var(--muted);font-size:15.5px;line-height:1.5;margin-top:3px}
  .gericht .merkmale{margin-top:7px;font-family:"Segoe UI",system-ui,sans-serif;font-size:12.5px;
    letter-spacing:.02em;color:var(--gold);opacity:.85}

  /* untere Zeile: Kennzeichen links, Preis rechts */
  .gericht .fuss{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    margin-top:9px;padding-top:7px;border-top:1px solid var(--line)}
  .gericht .zeichen{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  .gericht .preis{margin-left:auto;font-family:"Segoe UI",system-ui,sans-serif;
    font-size:18px;font-weight:700;color:var(--gold2);white-space:nowrap;font-variant-numeric:tabular-nums}
  .gericht .preis .lbl{font-size:12px;font-weight:600;color:var(--muted);margin-right:5px}
  .gericht .preis .sep{color:var(--line);margin:0 9px;font-weight:400}

  .marke{display:inline-flex;align-items:center;gap:5px;font-family:"Segoe UI",system-ui,sans-serif;
    font-size:12px;font-weight:700;letter-spacing:.03em}
  .marke svg{width:14px;height:14px}
  .marke.vegi{color:#8fd08f}
  .marke.vegan{color:#6fc98a}
  .marke.glutenfrei{color:#e5c98a}
  .marke.scharf{color:#f08a5d}
  .marke.tipp{color:var(--gold3)}
  /* Eine Anmerkung wie „hausgemacht" oder „Bio" steht ruhiger da als
     eine Zusage wie „glutenfrei" - das eine ist nett zu wissen, das
     andere muss stimmen. */
  .marke.hinweis{color:var(--muted);font-weight:600}

  /* Foto-Knopf oben rechts an der Karte */
  .fotoknopf{position:absolute;top:14px;right:16px;display:inline-flex;align-items:center;gap:6px;
    cursor:pointer;font-family:"Segoe UI",system-ui,sans-serif;font-size:12px;font-weight:700;
    border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--muted);
    padding:7px 12px;border-radius:999px;transition:.2s}
  .fotoknopf:hover{border-color:rgba(236,187,82,.5);color:var(--gold3);background:rgba(236,187,82,.12)}
  .fotoknopf svg{width:14px;height:14px}

  /* ==================================================================
     DESSERTKARTE
     Foto links, Text rechts - wie auf der bisherigen Dessertkarte.
     ================================================================== */
  /* Die Schnellauswahl der Dessertkarte sieht aus wie die
     Kategorieleiste, besteht aber aus Knoepfen statt Sprungmarken. */
  .filterleiste button{font-family:"Segoe UI",system-ui,sans-serif;font-size:12.5px;font-weight:700;
    white-space:nowrap;cursor:pointer;color:var(--muted);background:transparent;
    border:1px solid var(--line);border-radius:999px;padding:8px 15px;transition:.2s}
  .filterleiste button:hover{color:var(--gold3);border-color:rgba(236,187,82,.4)}
  .filterleiste button.hier{background:rgba(236,187,82,.18);border-color:rgba(236,187,82,.55);color:var(--gold3)}

  /* Eigene Regeln setzen sonst das eingebaute „hidden" des Browsers
     ausser Kraft - darum hier ausdruecklich. */
  .dessert[hidden],[data-kategorie][hidden]{display:none}

  .desserts{margin-top:22px}
  .dessert{display:flex;align-items:center;gap:18px;
    border:1px solid rgba(236,187,82,.18);border-radius:14px;padding:16px 20px;margin-bottom:12px;
    background:linear-gradient(180deg,rgba(255,244,228,.14),rgba(255,244,228,.085));
    box-shadow:0 2px 10px rgba(0,0,0,.3);
    transition:border-color .25s,transform .25s,box-shadow .25s,background .25s}
  .dessert:hover{border-color:rgba(236,187,82,.45);transform:translateY(-2px);
    background:linear-gradient(180deg,rgba(255,244,228,.185),rgba(255,244,228,.12));
    box-shadow:0 12px 34px rgba(0,0,0,.42)}
  .dessert.empfohlen{border-color:rgba(236,187,82,.4);
    background:linear-gradient(180deg,rgba(236,187,82,.13),rgba(236,187,82,.07))}

  /* Das Foto ist zugleich der Knopf fuer die Grossansicht - darum wird
     hier alles zurueckgesetzt, was der normale Foto-Knopf mitbringt. */
  .dessert-bild.fotoknopf{position:static;flex:0 0 auto;width:128px;height:128px;padding:0;
    border:0;background:none;border-radius:0;display:block}
  .dessert-bild.fotoknopf:hover{background:none}
  .dessert-bild img{width:100%;height:100%;object-fit:contain;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));transition:transform .35s ease}
  .dessert-bild:hover img{transform:scale(1.06)}

  .dessert-koerper{flex:1;min-width:0}
  .dessert-name{font-size:20px;font-weight:700;color:var(--cream);line-height:1.3}
  .dessert-desc{color:var(--muted);font-size:15.5px;line-height:1.6;margin-top:5px}
  .dessert-fuss{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
    margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
  .dessert-marken{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:0}
  .dessert-marke{font-family:"Segoe UI",system-ui,sans-serif;font-size:11.5px;letter-spacing:.03em;
    color:var(--gold);border:1px solid rgba(236,187,82,.35);border-radius:999px;padding:3px 10px;
    white-space:nowrap}
  .dessert-preis{margin-left:auto;text-align:right;white-space:nowrap;
    font-family:"Segoe UI",system-ui,sans-serif;font-variant-numeric:tabular-nums}
  .dessert-preis .je{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
  .dessert-preis .cur{font-size:13px;color:var(--muted)}
  .dessert-preis b{font-size:19px;font-weight:700;color:var(--gold2)}
  .dessert-preis .zweit{display:block;margin-top:3px;font-size:13px;font-weight:600;color:var(--muted)}

  @media (max-width:520px){
    .dessert{gap:14px;padding:14px 15px}
    .dessert-bild.fotoknopf{width:88px;height:88px}
    .dessert-name{font-size:18px}
    .dessert-desc{font-size:14.5px}
    .dessert-fuss{flex-wrap:wrap;gap:8px}
  }

  /* ==================================================================
     WEINKARTE
     Aufbau wie auf der bisherigen Weinkarte: eine Zeile je Wein, links
     ein farbiger Streifen nach Weinart, rechts oben die Landesfahne.
     Ein Klick auf den Namen klappt die Beschreibung auf.
     ================================================================== */
  .weine{margin-top:22px}
  .wein{--wfarbe:var(--gold);position:relative;display:flex;overflow:hidden;
    border:1px solid rgba(236,187,82,.18);border-radius:12px;margin-bottom:10px;
    background:linear-gradient(180deg,rgba(255,244,228,.14),rgba(255,244,228,.085));
    box-shadow:0 2px 10px rgba(0,0,0,.3);
    transition:border-color .25s,box-shadow .25s,background .25s}
  .wein:hover{border-color:rgba(236,187,82,.45);box-shadow:0 12px 30px rgba(0,0,0,.4);
    background:linear-gradient(180deg,rgba(255,244,228,.185),rgba(255,244,228,.12))}
  .wein.offen{border-color:rgba(236,187,82,.5)}
  .weine[data-typ="weiss"] .wein{--wfarbe:#e8d49b}
  .weine[data-typ="rose"]  .wein{--wfarbe:#e0a0a4}
  .weine[data-typ="rot"]   .wein{--wfarbe:#b1452f}
  .wein-streifen{flex:0 0 4px;background:var(--wfarbe)}
  .wein.empfohlen{background:linear-gradient(180deg,rgba(236,187,82,.13),rgba(236,187,82,.07))}

  /* Die Fahne sitzt in der oberen rechten Ecke und laesst sich nicht anklicken. */
  .wein-fahne{position:absolute;top:0;right:0;width:56px;height:auto;z-index:2;
    pointer-events:none;filter:drop-shadow(-1px 2px 4px rgba(0,0,0,.5))}
  .wein.mit-fahne .wein-zeile{padding-right:54px}
  .wein.mit-fahne .wein-unter{padding-right:48px}

  .wein-koerper{flex:1;min-width:0;padding:14px 18px 12px}
  /* Der Kopf ist ein Knopf, damit er auch mit der Tastatur bedienbar ist. */
  .wein-kopf{display:block;width:100%;text-align:left;cursor:pointer;
    background:none;border:0;padding:0;color:inherit;font:inherit}
  .wein-zeile{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
  .wein-name{flex:1 1 auto;min-width:0;font-size:18.5px;font-weight:700;line-height:1.3;color:var(--cream)}
  .wein-name .stern{color:var(--gold2);font-size:14px}
  .wein-pfeil{flex:0 0 auto;color:var(--gold2);font-size:18px;line-height:1;margin-top:2px;
    transition:transform .3s}
  .wein.offen .wein-pfeil{transform:rotate(180deg)}
  .wein-unter{display:block;margin-top:5px;font-family:"Segoe UI",system-ui,sans-serif;
    font-size:12.5px;color:var(--muted)}
  .wein-traube{display:block;margin-top:6px;font-style:italic;font-size:14.5px;color:var(--gold)}

  .wein-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-top:11px;padding-top:9px;border-top:1px solid var(--line)}
  .wein-links{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
  .wein-marke{font-family:"Segoe UI",system-ui,sans-serif;font-size:11px;letter-spacing:.04em;
    color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap}
  /* Der Flaschen-Knopf steht in der Zeile, nicht wie sonst oben in der Ecke. */
  .wein .fotoknopf.flasche{position:static;padding:5px 11px;font-size:11.5px}
  .wein .fotoknopf.flasche svg{width:13px;height:15px}
  .wein-preis{font-family:"Segoe UI",system-ui,sans-serif;font-size:17px;font-weight:700;
    color:var(--gold2);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
  .wein-preis .cur{font-size:12.5px;font-weight:400;color:var(--muted);margin-right:2px}
  .wein-preis .lbl{font-size:12px;font-weight:600;color:var(--muted);margin-right:4px}
  .wein-preis .sep{color:var(--line);margin:0 8px;font-weight:400}

  /* Aufklappen: die Hoehe waechst von 0 auf hoechstens 600 Pixel - das
     reicht fuer jede Weinbeschreibung mit reichlich Luft. */
  .wein-text{overflow:hidden;max-height:0;opacity:0;
    transition:max-height .42s ease,opacity .3s ease}
  .wein.offen .wein-text{max-height:600px;opacity:1}
  .wein-text p{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);
    font-size:15px;line-height:1.7;color:var(--muted)}

  @media (max-width:520px){
    .wein-koerper{padding:13px 14px 11px}
    .wein-name{font-size:17px}
    .wein-fuss{flex-wrap:wrap}
    .wein-preis{margin-left:auto}
  }
  @media (prefers-reduced-motion:reduce){
    .wein-text{transition:none}
  }

  /* wenn der Vegi-Filter nichts uebrig laesst */
  .nichts{display:none;text-align:center;color:var(--muted);padding:44px 20px;font-style:italic}
  .nichts.zeigen{display:block}

  /* Grossansicht eines Gerichtsfotos */
  .fotobox{position:fixed;inset:0;z-index:300;background:rgba(5,3,2,.94);backdrop-filter:blur(12px);
    display:flex;align-items:center;justify-content:center;padding:24px;
    opacity:0;pointer-events:none;transition:opacity .3s}
  .fotobox.zeigen{opacity:1;pointer-events:auto}
  .fotobox img{max-width:min(860px,92vw);max-height:76vh;border-radius:16px;
    box-shadow:0 30px 80px rgba(0,0,0,.75);outline:1px solid rgba(236,187,82,.2)}
  .fotobox figcaption{margin-top:16px;text-align:center;font-size:20px;font-weight:700;color:var(--gold3)}
  .fotobox .zu{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;
    cursor:pointer;border:1px solid rgba(236,187,82,.45);background:rgba(0,0,0,.45);
    color:var(--gold2);font-size:24px;line-height:1}
  .fotobox .zu:hover{color:var(--gold3);border-color:var(--gold2)}

  @media (max-width:520px){
    .gericht{padding:16px 15px 12px}
    .gericht .name{font-size:18.5px;padding-right:84px}
    .gericht .desc{font-size:15px}
  }
  .karte-fuss{margin-top:clamp(50px,8vw,80px);padding-top:26px;border-top:1px solid var(--line);
    color:var(--muted);font-size:14px;line-height:1.9;text-align:center}

  .leer-hinweis{margin-top:40px;padding:40px 24px;text-align:center;color:var(--muted);
    border:1px dashed var(--line);border-radius:18px;font-size:16px}

  /* ---------- Team ---------- */
  /* Einleitungstext oberhalb der Personen - schmal und mittig, damit die
     Zeilen nicht zu lang werden. */
  .team-einleitung{max-width:760px;margin:0 auto}

  /* Abschnittstitel mit einer feinen Linie links und rechts. Das Raster
     gibt der Zeile drei Spalten - Linie, Wort, Linie - die beiden Linien
     teilen sich den uebrigen Platz, das Wort steht damit immer mittig. */
  .team-gruppe{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    gap:clamp(14px,3vw,26px);margin-top:clamp(54px,8vw,86px);
    font-family:"Segoe UI",system-ui,sans-serif;font-size:clamp(12px,1.5vw,14.5px);font-weight:700;
    letter-spacing:.26em;text-transform:uppercase;color:var(--gold2);text-align:center}
  .team-gruppe::before,.team-gruppe::after{content:"";height:1px;
    background:linear-gradient(90deg,transparent,rgba(236,187,82,.5))}
  .team-gruppe::after{background:linear-gradient(90deg,rgba(236,187,82,.5),transparent)}
  /* Der erste Titel steht naeher am Einleitungstext als die folgenden
     Titel an den Karten darueber. */
  .team-einleitung + .team-gruppe{margin-top:clamp(24px,3.2vw,38px)}

  /* Flexbox statt Raster, damit auch eine angebrochene letzte Reihe
     mittig steht statt links zu kleben. */
  .team-raster{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-top:26px}
  .person{flex:0 1 250px;max-width:280px;
    border:1px solid var(--line);border-radius:18px;overflow:hidden;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));transition:.25s}
  .person:hover{border-color:rgba(236,187,82,.4);transform:translateY(-3px)}
  /* Hochformat 2:3 - genau das Verhaeltnis der Personalfotos. So wird
     nichts abgeschnitten und die Gesichter bleiben vollstaendig sichtbar.
     Bei anders geschnittenen Bildern wird mittig zugeschnitten, etwas
     oberhalb der Mitte, damit der Kopf im Bild bleibt. */
  .person img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:center 30%}
  .person .platzhalter{width:100%;aspect-ratio:2/3;display:flex;align-items:center;justify-content:center;
    font-size:56px;font-weight:700;color:rgba(236,187,82,.35);background:rgba(0,0,0,.3)}

  /* ---------- Foto zum Umdrehen (Postkarte) ----------
     Hat eine Person einen Text hinterlegt, dreht sich ihr Foto beim
     Darueberfahren wie eine Postkarte um und zeigt den Text.
     Ohne Text bleibt die Karte unveraendert. */
  /* container-type macht die Kartenbreite messbar: die Schrift auf der
     Rueckseite richtet sich danach (Einheit cqw) und passt sich so von
     selbst an, statt eine Bildlaufleiste zu brauchen. */
  .dreher{perspective:1400px;container-type:inline-size}
  .dreher-innen{position:relative;width:100%;
    transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.8,.2,1);cursor:pointer}
  .person.gedreht .dreher-innen{transform:rotateY(180deg)}

  /* Darueberfahren und Tastatur-Fokus drehen die Karte nur dort, wo es
     wirklich eine Maus gibt. Auf dem Telefon war genau das die Falle:
     Ein Tipp setzte den Fokus, die Karte drehte sich - und sie blieb
     gedreht, bis man DANEBEN tippte. Zurueck ging nur ueber den Umweg.
     Dort uebernimmt jetzt das Antippen (siehe seite.js): einmal hin,
     nochmals zurueck. */
  @media (hover:hover) and (pointer:fine){
    .person:hover .dreher-innen,
    .person:focus-within .dreher-innen{transform:rotateY(180deg)}
  }

  /* Die Vorderseite steht im Fluss und bestimmt damit die Kartenhoehe,
     die Rueckseite legt sich deckungsgleich darueber. So reicht der
     Goldrahmen der Rueckseite bis ganz nach unten. */
  .dreher-vorne{position:relative;
    -webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
  .dreher-hinten{position:absolute;inset:0;
    -webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
  .dreher-vorne img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block}

  /* Rueckseite: dunkles Papier mit feinem Goldrahmen */
  .dreher-hinten{transform:rotateY(180deg);display:flex;flex-direction:column;
    justify-content:space-between;padding:clamp(16px,7cqw,30px) clamp(14px,6cqw,26px);
    text-align:center;
    background:
      radial-gradient(120% 90% at 50% 0%,rgba(224,85,42,.16),transparent 60%),
      linear-gradient(165deg,#1d1510,#120c07)}
  .dreher-hinten::after{content:"";position:absolute;inset:clamp(7px,3cqw,12px);
    border:1px solid rgba(236,187,82,.28);border-radius:8px;pointer-events:none}
  .dreher-hinten .zier{font-size:clamp(8px,3.1cqw,11px);letter-spacing:.28em;text-transform:uppercase;
    font-family:"Segoe UI",system-ui,sans-serif;color:var(--gold);flex:none}
  /* Der Text steht in der Mitte und darf wachsen - die Schriftgroesse
     haengt an der Kartenbreite, darum passt er ohne Bildlaufleiste. */
  .dreher-hinten p{flex:1;display:flex;align-items:center;justify-content:center;
    color:#e2d2bd;font-size:clamp(9.5px,4.5cqw,15px);line-height:1.6;font-style:italic;
    margin:clamp(8px,3cqw,14px) 0;overflow:hidden}
  /* Unten auf der Rueckseite: Name und darunter die Funktion */
  .dreher-hinten .unterschrift{flex:none;font-family:"Segoe UI",system-ui,sans-serif}
  .dreher-hinten .unterschrift b{display:block;font-size:clamp(9.5px,3.8cqw,14px);
    letter-spacing:.14em;text-transform:uppercase;color:var(--gold3);font-weight:700}
  .dreher-hinten .unterschrift span{display:block;margin-top:clamp(3px,1.4cqw,6px);
    font-size:clamp(8px,3cqw,11.5px);letter-spacing:.1em;color:var(--muted)}

  /* Kleiner Hinweis auf der Vorderseite, dass sich die Karte drehen laesst */
  .dreh-zeichen{position:absolute;right:12px;bottom:12px;z-index:2;
    width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:rgba(10,6,3,.6);border:1px solid rgba(236,187,82,.45);color:var(--gold2);
    font-size:14px;backdrop-filter:blur(4px);transition:opacity .3s}
  .person:hover .dreh-zeichen{opacity:0}

  @media (prefers-reduced-motion:reduce){
    .dreher-innen{transition:none}
  }
  .person .txt{padding:20px}
  .person h3{font-size:20px;font-weight:700;color:var(--gold3)}
  .person .funktion{font-family:"Segoe UI",system-ui,sans-serif;font-size:11.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);margin-top:5px}
  .person p{color:#c9b7a1;font-size:14.5px;line-height:1.7;margin-top:10px}

  /* ---------- Stellen ---------- */
  .stelle{border:1px solid var(--line);border-radius:18px;padding:28px 26px;margin-top:18px;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));transition:.25s}
  .stelle:hover{border-color:rgba(236,187,82,.4)}
  .stelle h3{font-size:24px;font-weight:700;color:var(--gold3)}
  .stelle .meta{display:flex;gap:20px;flex-wrap:wrap;margin-top:10px;
    font-family:"Segoe UI",system-ui,sans-serif;font-size:13px;color:var(--muted)}
  .stelle .meta b{color:var(--cream);font-weight:700}
  .stelle .txt{margin-top:14px;color:#c9b7a1;font-size:15.5px;line-height:1.8}
  .stelle .txt p + p{margin-top:12px}

  /* ---------- Textseiten (Über uns, Impressum, Datenschutz) ---------- */
  .textseite{max-width:760px;margin:0 auto}
  .textseite p{color:#d0bea8;font-size:17px;line-height:1.85;margin-top:16px}
  .textseite h3{font-size:23px;font-weight:700;color:var(--gold3);margin-top:36px}
  .textseite h4{font-size:18px;font-weight:700;color:var(--cream);margin-top:26px}
  .textseite ul,.textseite ol{margin-top:14px;padding-left:22px;color:#d0bea8;font-size:17px;line-height:1.85}
  .textseite li + li{margin-top:6px}
  .textseite a{color:var(--gold2);text-decoration:underline;text-underline-offset:3px}
  .textseite blockquote{margin-top:22px;padding-left:18px;border-left:2px solid var(--gold);
    font-style:italic;color:var(--gold2);font-size:19px}
  /* Vorspann, Schlusssatz und Unterschrift einer Textseite */
  .textseite .intro{font-size:clamp(19px,3.4vw,24px);line-height:1.5;color:var(--gold3);
    font-style:italic;text-align:center;margin-top:0}
  /* Feine Linie unter dem Vorspann - trennt ihn vom Fliesstext. */
  .textseite .intro::after{content:"";display:block;width:78px;height:1px;
    margin:26px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
  .textseite .schluss{margin-top:34px;text-align:center;font-size:clamp(18px,3.2vw,21px);
    color:var(--gold3);font-style:italic;line-height:1.6}
  .textseite .signatur{margin-top:14px;text-align:center;font-family:"Segoe UI",system-ui,sans-serif;
    font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold2)}
  .textseite img{border-radius:16px;margin-top:26px}

  /* ---------- Reservationsseite ---------- */
  .res-karten{display:grid;grid-template-columns:1fr;gap:18px;margin-top:44px}
  @media(min-width:760px){.res-karten{grid-template-columns:1fr 1fr}}
  .res-karte{border:1px solid var(--line);border-radius:20px;padding:36px 30px;text-align:center;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));transition:.25s;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:230px}
  .res-karte:hover{border-color:rgba(236,187,82,.5);transform:translateY(-4px)}
  .res-karte .ico{width:34px;height:34px;color:var(--gold2)}
  .res-karte h3{font-size:25px;font-weight:700;color:var(--gold3)}
  .res-karte p{color:var(--muted);font-size:15px}
  .res-karte .btn{margin-top:8px}

  /* ---------- Saisonband im Kopfbereich ----------
     Das fertig gestaltete Bild (Moules, Spargel, Cordon bleu ...) sitzt
     mittig unter den Knoepfen, an derselben Stelle wie die kleine
     Saisonkarte. Die Schrift steckt im Bild, darum macht das CSS hier
     nur den Rahmen und die Bewegung.
     Der Auftritt ist derselbe wie bei der Saisonkarte, damit sich der
     Kopfbereich als ein Stueck aufbaut. */
  /* Ruht unsichtbar, bis das Bild wirklich geladen ist - dann setzt das
     Skript die Klasse „geladen" und der Auftritt laeuft. Ist er vorbei,
     kommt „fertig" dazu; erst danach greifen die Hover-Bewegungen, sonst
     wuerde die Animation sie ueberstimmen. */
  /* Der zusaetzliche Abstand sitzt hier und nicht an .saison-band,
     damit die kleine Saisonkarte dort bleibt, wo sie immer war. */
  /* Eine Spur kleiner als frueher (410 -> 360) und mit mehr Luft nach oben.
     Der Grund ist die Rangfolge im Kopfbereich: Reservieren verdient
     den ersten Blick, das Band den zweiten. Mit 410 Punkten, Goldkante,
     Glut und wanderndem Glanz hatte es mehr Gewicht als die beiden
     Knoepfe darueber - und die schoenste Grafik nuetzt nichts, wenn sie
     die Handlung verdeckt, mit der das Haus Geld verdient. */
  .saisonband-feld{display:block;position:relative;z-index:2;margin-top:40px;
    width:100%;max-width:min(360px,86vw);border-radius:16px;overflow:hidden;
    text-decoration:none;box-shadow:0 22px 56px rgba(0,0,0,.5);
    opacity:0;transform:translateY(24px) scale(.96)}
  .saisonband-feld.geladen{animation:sbAuf 1.05s cubic-bezier(.2,.8,.2,1) forwards}
  .saisonband-feld.fertig{opacity:1;transform:none;
    transition:transform .45s cubic-bezier(.2,.8,.25,1),box-shadow .45s}
  @keyframes sbAuf{
    from{opacity:0;transform:translateY(24px) scale(.96)}
    to  {opacity:1;transform:none}
  }

  /* ---------- Band mit Text ----------
     Zeichnung links, Text rechts, Rahmen aus CSS. Der Rahmen ist eine
     doppelte Goldlinie: die aeussere als Rand, die innere als
     eingelegter Schatten - so wachsen beide mit, egal wie lang der
     Titel in einer Sprache ausfaellt. */
  .sb-band{display:flex;align-items:stretch;gap:0;
    position:relative;z-index:2;margin-top:40px;
    /* Etwas breiter als das fertige Plakat (430): Hier steht Text,
       und die Zeile darunter soll am Bildschirm auf eine Linie
       passen. Auf dem Telefon greift ohnehin die zweite Zahl. */
    width:100%;max-width:min(490px,90vw);
    border:1px solid rgba(236,187,82,.55);border-radius:14px;
    background:linear-gradient(100deg,#181008 0%,#181008 34%,#1d1409 70%,#120c06 100%);
    box-shadow:0 22px 56px rgba(0,0,0,.5),
               inset 0 0 0 3px rgba(12,8,5,1),
               inset 0 0 0 4px rgba(236,187,82,.35);
    text-decoration:none;overflow:hidden;
    opacity:0;transform:translateY(24px) scale(.96)}
  .sb-band.geladen{animation:sbAuf 1.05s cubic-bezier(.2,.8,.2,1) forwards}
  .sb-band.fertig{opacity:1;transform:none;
    transition:transform .45s cubic-bezier(.2,.8,.25,1),box-shadow .45s}
  a.sb-band.fertig:hover{transform:translateY(-6px) scale(1.02);
    box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 40px rgba(236,187,82,.22),
               inset 0 0 0 3px rgba(12,8,5,1),
               inset 0 0 0 4px rgba(236,187,82,.5)}

  .sb-zeichnung{flex:none;width:38%;max-width:158px;align-self:stretch;
    display:flex;align-items:flex-end;overflow:hidden}
  /* Unten links angeheftet.
     Wird das Band hoeher - weil der Titel in einer Sprache zwei Zeilen
     braucht -, soll die Zeichnung nicht mitwachsen und auch nicht
     wandern. Sie behaelt ihre Groesse und bleibt mit dem Fuss am
     Boden stehen; oben kommt der Bandhintergrund zum Vorschein.
     Darum volle Breite, natuerliche Hoehe, unten ausgerichtet - und
     nicht object-fit, das immer die ganze Flaeche fuellen will. */
  .sb-zeichnung img{width:100%;height:auto;display:block;
    /* Die Zeichnung bringt ihren eigenen dunklen Grund mit. Steht sie
       tief im hohen Band, zeichnete sich ihre Oberkante als feiner
       Absatz ab - die obersten Punkte laufen darum weich aus. */
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px);
    mask-image:linear-gradient(180deg,transparent 0,#000 14px)}

  /* Ein rundes Wappen ist kein Ausschnitt, sondern ein Zeichen: Es wird
     ganz gezeigt, mittig, mit Luft rundherum - und darf schmaler sein
     als eine breite Szene, damit dem Text mehr Platz bleibt. */
  .sb-zeichnung.zeichen{width:26%;max-width:104px;display:flex;
    align-items:center;justify-content:center;padding:10px 4px 10px 12px}
  .sb-zeichnung.zeichen img{width:100%;height:auto;max-height:100%;
    object-fit:contain;object-position:center}

  .sb-wort{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:5px;padding:16px 8px 16px 4px;text-align:center}
  .sb-oben{font-family:"Segoe UI",system-ui,sans-serif;font-size:9px;font-weight:700;
    letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
  .sb-titel{font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(17px,3.4vw,23px);letter-spacing:.10em;text-transform:uppercase;
    line-height:1.15;color:transparent;
    background:linear-gradient(100deg,#b3831f,#f2d489,#fbeec2,#ecbb52,#b3831f);
    -webkit-background-clip:text;background-clip:text}
  /* Der Zierstrich mit dem Sonnenzeichen - dasselbe Motiv wie auf der
     Zeichnung, damit Bild und Schrift zusammengehoeren. */
  .sb-strich{display:flex;align-items:center;gap:8px;width:100%;max-width:190px;
    margin:1px 0 2px;color:var(--gold)}
  .sb-strich i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(236,187,82,.65))}
  .sb-strich i:last-child{background:linear-gradient(90deg,rgba(236,187,82,.65),transparent)}
  .sb-strich b{font-size:10px;font-weight:400;line-height:1}
  .sb-unter{font-family:Georgia,"Times New Roman",serif;font-style:italic;
    font-size:clamp(11.5px,2.2vw,13.5px);color:var(--muted);line-height:1.4;
    text-wrap:balance}

  .sb-pfeil{flex:none;display:flex;align-items:center;padding:0 14px 0 4px;
    color:var(--gold2);transition:transform .3s cubic-bezier(.16,1,.3,1)}
  a.sb-band:hover .sb-pfeil{transform:translateX(4px)}

  @media (max-width:430px){
    /* Auf dem Telefon steht das Band nicht quer, sondern gestapelt:
       Bild oben ueber die ganze Breite, Schrift darunter. Nebeneinander
       blieben fuer beides nur ein paar Zentimeter - so bekommt jedes
       die volle Breite. */
    .sb-band{flex-direction:column;max-width:min(340px,92vw)}

    .sb-zeichnung{width:100%;max-width:none;height:104px;align-self:stretch;
      align-items:stretch}
    /* Quer statt hoch: Die Zeichnung fuellt den Streifen und wird
       beschnitten. Der Ausschnitt sitzt etwas unterhalb der Mitte -
       dort steht bei allen Zeichnungen das Gericht. */
    .sb-zeichnung img{width:100%;height:100%;object-fit:cover;
      object-position:center 58%;
      /* Hier laeuft die Zeichnung nach UNTEN aus, in die Schrift hinein.
         Genau eine Maske, ohne Verrechnung - zwei verrechnete legt
         Safari anders aus, und dann blieb vom Bild fast nichts. */
      -webkit-mask-image:linear-gradient(0deg,transparent 0,#000 16px);
      mask-image:linear-gradient(0deg,transparent 0,#000 16px)}
    .sb-zeichnung.zeichen{width:100%;max-width:none;height:88px;
      padding:10px 0 4px;align-items:center}

    .sb-wort{padding:10px 30px 16px}
    /* Der Pfeil sitzt nun nicht mehr in der Reihe, sondern in der Ecke. */
    .sb-pfeil{position:absolute;right:10px;bottom:10px;padding:0}
  }

  /* Kleine Telefone (SE und aehnliche, keine 700 Punkte hoch): Dort
     muessen Titel, Knoepfe, Band und der Hinweis „Scroll" zusammen in
     einen kurzen Kopfbereich passen. Die Zeichnung wird flacher, statt
     dass unten etwas hinausrutscht. */
  @media (max-width:430px) and (max-height:700px){
    .sb-zeichnung{height:76px}
    .sb-wort{padding:8px 26px 12px;gap:3px}
    .saison-band{margin-bottom:34px}
  }

  /* Der Zierstrich traegt ein Sonnenzeichen. Auf dem Telefon macht
     Apple daraus sonst ein gruenes Emoji - hier steht ausdruecklich,
     dass die Schriftform gemeint ist. */
  .sb-strich b{font-variant-emoji:text}

  /* Das Bild selbst liegt leicht durchsichtig auf dem Kopfbereich und
     wird beim Darueberfahren voll kraeftig. Die Durchsichtigkeit sitzt
     bewusst am Bild und nicht am Rahmen - so bleibt die Goldkante scharf. */
  .saisonband-feld img{display:block;width:100%;height:auto;border-radius:16px;
    opacity:.86;transition:opacity .4s ease}
  a.saisonband-feld:hover img,a.saisonband-feld:focus-visible img{opacity:1}

  /* Sanft atmender Goldschimmer rundherum */
  .saisonband-feld::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(236,187,82,.35);animation:sbGlut 4.5s ease-in-out 2s infinite}
  @keyframes sbGlut{
    0%,100%{box-shadow:inset 0 0 0 1px rgba(236,187,82,.24),0 0 0 0 rgba(236,187,82,0)}
    50%    {box-shadow:inset 0 0 0 1px rgba(236,187,82,.45),0 0 18px 0 rgba(236,187,82,.10)}
  }

  /* Glanz, der alle paar Sekunden einmal darueberwandert */
  .saisonband-glanz{position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
    background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.10) 42%,
      rgba(255,241,208,.30) 50%,rgba(255,255,255,.10) 58%,transparent 100%);
    transform:translateX(-160%) skewX(-14deg);animation:sbGlanz 11s ease-in-out 3s infinite}
  @keyframes sbGlanz{
    0%      {transform:translateX(-160%) skewX(-14deg)}
    22%,100%{transform:translateX(330%)  skewX(-14deg)}
  }

  /* Beim Darüberfahren: anheben, Goldschein verstärken - und der Glanz
     wandert einmal zügig durch, statt auf den nächsten Takt zu warten. */
  a.saisonband-feld.fertig:hover{transform:translateY(-7px) scale(1.022);
    box-shadow:0 32px 74px rgba(0,0,0,.6),0 0 44px rgba(236,187,82,.3)}
  a.saisonband-feld:focus-visible{outline:2px solid var(--gold2);outline-offset:4px}

  a.saisonband-feld:hover .saisonband-glanz,
  a.saisonband-feld:focus-visible .saisonband-glanz{
    animation:sbGlanzHover 1.05s cubic-bezier(.32,.7,.3,1)}
  @keyframes sbGlanzHover{
    from{transform:translateX(-160%) skewX(-14deg)}
    to  {transform:translateX(330%)  skewX(-14deg)}
  }

  /* Der Goldrahmen zieht beim Darüberfahren mit */
  a.saisonband-feld:hover::after{box-shadow:inset 0 0 0 1px rgba(236,187,82,.75),
    0 0 30px 0 rgba(236,187,82,.22);animation-play-state:paused}

  /* Zusaetzlicher Knopf - nur noetig, wenn im Bild selbst keiner steckt */
  .saisonband-knopf{position:absolute;left:50%;bottom:clamp(14px,3vw,28px);transform:translateX(-50%);
    display:inline-flex;align-items:center;gap:9px;padding:11px 24px;border-radius:999px;
    background:rgba(12,8,5,.82);border:1px solid rgba(236,187,82,.55);color:var(--gold3);
    font-family:"Segoe UI",system-ui,sans-serif;font-size:13px;letter-spacing:.14em;
    text-transform:uppercase;backdrop-filter:blur(6px);white-space:nowrap;transition:.25s}
  a.saisonband-feld:hover .saisonband-knopf{background:rgba(236,187,82,.16);border-color:var(--gold2)}
  .saisonband-knopf span{transition:transform .25s}
  a.saisonband-feld:hover .saisonband-knopf span{transform:translateX(4px)}

  /* Auf dem Handy schmaler, damit Titel, Knöpfe und Bild zusammen
     in den Kopfbereich passen und nichts hinausgeschoben wird. */
  @media(max-width:700px){
    /* Unten Platz lassen: Der Hinweis „Scroll" haengt am unteren Rand
       des Kopfbereichs und legte sich sonst ueber das Band - auf dem
       Telefon steht beides sehr eng beieinander. */
    .saison-band{margin-top:26px;margin-bottom:56px}
    /* Die Banner sind sehr breit und flach (rund 4:1). Auf dem Handy
       brauchen sie darum mehr Breite, sonst wird die Schrift darin
       unlesbar klein - hoch bauen sie ohnehin nicht. */
    .saisonband-feld{max-width:min(340px,90vw);margin-top:18px}
    .saisonband-feld,.saisonband-feld img,.saisonband-feld::after{border-radius:13px}
    .saisonband-knopf{font-size:11px;padding:9px 17px;letter-spacing:.1em}
  }

  /* ---------- Oeffnungszeiten je Tag ----------
     Erscheint nur, wenn nicht alle Tage gleich sind - sonst steht dort
     schlicht „Taeglich". Ruhetage werden golden hervorgehoben. */
  .tageszeiten{display:flex;flex-direction:column;gap:6px;margin-top:6px}
  .tageszeile{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
  .tageszeile .tag{font-family:"Segoe UI",system-ui,sans-serif;font-size:12.5px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
  .tageszeile .zeit{font-size:16px;color:var(--cream);text-align:right}

  /* ---------- Gutscheinseite ---------- */
  /* Die Betraege sind waehlbar. Bezahlt wird trotzdem in der TWINT-App -
     die Wahl erinnert nur an den Betrag und wandert in die Bestell-Mail. */
  .gut-betraege{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:40px}
  @media(min-width:700px){.gut-betraege{grid-template-columns:repeat(4,1fr)}}
  .gut-betrag{border:1px solid var(--line);border-radius:18px;padding:26px 14px;text-align:center;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:118px;
    cursor:pointer;position:relative;transition:.22s;font-family:inherit;color:inherit;width:100%}
  .gut-betrag:hover{border-color:rgba(236,187,82,.5);transform:translateY(-3px)}
  .gut-betrag:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
  .gut-betrag .cur{font-family:"Segoe UI",system-ui,sans-serif;font-size:12px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted)}
  .gut-betrag .zahl{font-size:clamp(30px,6vw,40px);line-height:1;font-weight:700;
    background:linear-gradient(100deg,#b3831f,#ecbb52,#f7dc93,#ecbb52);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .gut-betrag.frei{border-style:dashed}
  .gut-betrag .wort{font-family:"Segoe UI",system-ui,sans-serif;font-size:12px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);margin-top:2px}
  /* Gewaehlt: goldener Rahmen und ein Haken in der Ecke */
  .gut-betrag.an{border-color:var(--gold2);border-style:solid;
    background:linear-gradient(180deg,rgba(236,187,82,.14),rgba(236,187,82,.04));
    box-shadow:0 0 0 1px rgba(236,187,82,.35),0 10px 30px rgba(0,0,0,.35)}
  .gut-betrag.an::after{content:"✓";position:absolute;top:9px;right:12px;font-size:14px;color:var(--gold2)}
  .gut-betrag.an .cur,.gut-betrag.an .wort{color:var(--gold3)}

  .gut-frei{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:10px}
  .gut-frei label{font-family:"Segoe UI",system-ui,sans-serif;font-size:12px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--gold2)}
  .gut-frei-feld{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;
    padding:10px 18px;background:rgba(255,255,255,.04)}
  .gut-frei-feld:focus-within{border-color:var(--gold2)}
  /* Der Beispielbetrag im leeren Feld deutlich blasser als ein echter
     Eintrag - sonst liest man die 80 als gewaehlten Betrag. */
  .gut-frei-feld ::placeholder{color:rgba(244,231,213,.32);opacity:1}
  .gut-frei-feld ::-webkit-input-placeholder{color:rgba(244,231,213,.32)}
  .gut-frei-feld ::-moz-placeholder{color:rgba(244,231,213,.32);opacity:1}
  .gut-frei-feld .cur{font-family:"Segoe UI",system-ui,sans-serif;font-size:12px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted)}
  .gut-frei-feld input{width:120px;background:none;border:0;outline:0;color:var(--gold3);
    font-family:inherit;font-size:26px;font-weight:700;text-align:center}
  .gut-hinweis{margin-top:20px;text-align:center;color:var(--muted);font-size:15px}

  /* Erinnerung beim TWINT-Knopf, welcher Betrag einzutippen ist */
  .gut-gewaehlt{font-family:"Segoe UI",system-ui,sans-serif;font-size:12.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--gold3);border:1px dashed rgba(236,187,82,.4);
    border-radius:10px;padding:7px 14px;margin-top:2px}

  .gut-schritte{list-style:none;display:grid;grid-template-columns:1fr;gap:18px;margin-top:44px;counter-reset:none}
  @media(min-width:820px){.gut-schritte{grid-template-columns:repeat(3,1fr)}}
  .gut-schritte li{border:1px solid var(--line);border-radius:20px;padding:32px 26px;text-align:center;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
  .gut-schritte .nr{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
    border-radius:50%;border:1px solid rgba(236,187,82,.4);color:var(--gold3);font-size:19px;margin-bottom:14px}
  .gut-schritte h3{font-size:21px;font-weight:700;color:var(--gold3);margin-bottom:8px}
  .gut-schritte p{color:var(--muted);font-size:15px;line-height:1.65}

  .icard .gut-text{color:var(--muted);font-size:15px;line-height:1.65;margin:6px 0 16px}
  .gut-info{margin-top:44px;border:1px solid var(--line);border-radius:20px;padding:30px 28px;
    background:rgba(255,255,255,.03)}
  .gut-info h4{font-family:"Segoe UI",system-ui,sans-serif;font-size:12px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--gold2);margin-bottom:14px}
  .gut-info ul{list-style:none;display:flex;flex-direction:column;gap:10px}
  .gut-info li{position:relative;padding-left:24px;color:var(--muted);font-size:15px;line-height:1.65}
  .gut-info li::before{content:"◆";position:absolute;left:0;top:0;color:var(--gold);font-size:10px;line-height:1.9}

  /* ---------- Fehlerseite ---------- */
  .fehlerseite{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:120px 24px 80px}
  .fehlerseite .zahl{font-size:clamp(80px,22vw,190px);font-weight:700;line-height:1;
    background:linear-gradient(100deg,#b3831f,#ecbb52,#f7dc93,#ecbb52);-webkit-background-clip:text;background-clip:text;color:transparent}

  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}
    .hero-bg img{animation:none}.hero h1 .ln span{transform:none}
    .hero .eyebrow,.hero .sub,.hero .cta{opacity:1}
    .rv{opacity:1;transform:none}.about .figure img{clip-path:inset(0 0 0 0)}
    #embers{display:none}
  }
  /* Eigenes Logo eines sozialen Netzwerks im Fuss. Die eingebauten
     Zeichen sind einfarbig gold; ein hochgeladenes Logo bringt seine
     eigenen Farben mit und bekommt darum nur die Groesse vorgegeben. */
  .folgen-reihe .sozial-logo{width:26px;height:26px;object-fit:contain;border-radius:5px}

  /* ---------- Karte gesperrt ----------
     Steht anstelle der Google-Karte, solange ihr niemand zugestimmt hat.
     Gleiche Hoehe wie die Karte, damit die Kachel nicht springt. */
  .karte-sperre{min-height:230px;line-height:1.6;padding:26px 22px;text-align:center;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
    font-family:"Segoe UI",system-ui,sans-serif;
    background:repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 12px,transparent 12px 24px)}
  .karte-sperre svg{width:26px;height:26px;color:var(--gold2);opacity:.7}
  .karte-sperre b{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold3)}
  .karte-sperre span{font-size:13px;color:var(--muted);max-width:34ch}
  .karte-sperre button{margin-top:5px;padding:9px 18px;border-radius:999px;cursor:pointer;
    border:1px solid rgba(236,187,82,.55);background:transparent;color:var(--gold2);
    font:inherit;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;transition:.25s}
  .karte-sperre button:hover{background:rgba(236,187,82,.14);color:var(--gold3);border-color:var(--gold2)}

  /* ---------- Cookie-Hinweis ----------
     Eine kleine Karte in der unteren linken Ecke statt eines Bandes ueber
     die ganze Breite: Sie deckt fast nichts von der Seite zu, laesst sich
     mit einem Blick erfassen und ist in zwei Sekunden weggeklickt.
     Die Handschrift bleibt die der Seite - gesperrte Ueberzeile in Gold,
     Serifentitel, runde Knoepfe. */
  .ck{position:fixed;left:0;bottom:0;z-index:9000;
    padding:clamp(12px,2vw,22px);pointer-events:none}
  .ck[hidden]{display:none}

  .ck-kasten{pointer-events:auto;position:relative;
    width:min(370px,calc(100vw - 24px));
    padding:20px 22px 18px;border-radius:16px;
    border:1px solid rgba(236,187,82,.2);
    background:linear-gradient(155deg,rgba(26,18,11,.95),rgba(11,7,4,.97));
    box-shadow:0 16px 44px rgba(0,0,0,.5);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    transform:translateY(16px);opacity:0;
    transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s}
  .ck.da .ck-kasten{transform:none;opacity:1}
  /* Feiner Goldschimmer auf der Oberkante - dasselbe Motiv wie bei den
     Trennlinien der Abschnittstitel. */
  .ck-kasten::before{content:"";position:absolute;top:0;left:16%;right:16%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(236,187,82,.6),transparent)}

  .ck-reihe{display:block}
  .ck-wort{min-width:0}

  .ck-ueber{font-family:"Segoe UI",system-ui,sans-serif;font-size:9px;font-weight:700;
    letter-spacing:.3em;text-transform:uppercase;color:var(--gold2);opacity:.8}
  .ck-kasten h2{margin-top:5px;font-family:Georgia,"Times New Roman",serif;
    font-size:18px;font-weight:700;color:var(--cream);line-height:1.2}
  .ck-kasten #ck-text{margin-top:7px;font-family:"Segoe UI",system-ui,sans-serif;
    font-size:12.5px;line-height:1.55;color:#b09b83}

  .ck-links{margin-top:10px;font-family:"Segoe UI",system-ui,sans-serif;font-size:11px;
    color:rgba(168,146,117,.5)}
  .ck-links a,.ck-mehr{color:var(--muted);text-decoration:none;
    border-bottom:1px solid rgba(236,187,82,.25);padding-bottom:1px;
    transition:color .25s,border-color .25s}
  .ck-links a:hover,.ck-mehr:hover{color:var(--gold3);border-color:var(--gold2)}
  .ck-links span{margin:0 6px}
  .ck-mehr{border-top:0;border-left:0;border-right:0;background:transparent;cursor:pointer;
    font:inherit;padding:0 0 1px}
  .ck-mehr[aria-expanded="true"]{color:var(--gold3);border-color:var(--gold2)}

  /* Zwei schmale Knoepfe nebeneinander, zusammen so breit wie die Karte */
  .ck-knoepfe{display:flex;gap:9px;margin-top:15px}
  .ck-knoepfe .btn{flex:1 1 0;justify-content:center;padding:10px 12px;font-size:12.5px;
    letter-spacing:.01em}
  .ck-ja{background:linear-gradient(160deg,#f0cd7c,#c9942f);color:#20160b;
    box-shadow:0 6px 18px rgba(201,148,47,.26)}
  .ck-ja:hover{box-shadow:0 9px 24px rgba(201,148,47,.4);filter:brightness(1.06)}

  /* ---------- Einzelheiten ---------- */
  .ck-details{margin-top:14px;border-top:1px solid var(--line)}
  .ck-details[hidden]{display:none}
  .ck-zeile{display:flex;align-items:flex-start;gap:14px;padding:12px 0;
    font-family:"Segoe UI",system-ui,sans-serif}
  .ck-zeile + .ck-zeile{border-top:1px solid rgba(236,187,82,.09)}
  .ck-zeile > div{flex:1 1 auto;min-width:0}
  .ck-zeile b{display:block;font-size:10px;font-weight:700;letter-spacing:.15em;
    text-transform:uppercase;color:var(--gold2)}
  .ck-zeile span{display:block;margin-top:4px;font-size:11.5px;line-height:1.55;color:var(--muted)}
  .ck-immer{flex:none;align-self:center;font-size:9px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--gold2);opacity:.55;white-space:nowrap}

  /* Schiebeschalter fuer die Karte */
  .ck-schalter{flex:none;align-self:center;position:relative;cursor:pointer}
  .ck-schalter input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
  .ck-bahn{display:block;width:38px;height:21px;border-radius:999px;
    background:rgba(255,255,255,.07);border:1px solid rgba(236,187,82,.25);transition:.3s}
  .ck-bahn::after{content:"";position:absolute;top:4px;left:4px;width:13px;height:13px;
    border-radius:50%;background:var(--muted);transition:.3s}
  .ck-schalter input:checked + .ck-bahn{background:rgba(236,187,82,.26);border-color:var(--gold2)}
  .ck-schalter input:checked + .ck-bahn::after{left:21px;background:var(--gold3)}
  .ck-schalter input:focus-visible + .ck-bahn{outline:2px solid var(--gold2);outline-offset:2px}
  .ck-versteckt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

  .ck-still{width:100%;justify-content:center;margin-top:12px}

  /* Auf dem Handy ueber die volle Breite - dort ist ohnehin kein Platz
     fuer eine Ecke. */
  @media (max-width:520px){
    .ck{left:0;right:0;padding:10px}
    .ck-kasten{width:100%}
  }
  @media (prefers-reduced-motion:reduce){
    .ck-kasten{transition:none;transform:none;opacity:1}
  }

  /* ---------- Presse & Inserate ----------
     Ein Album zum Durchblaettern: ein Inserat gross in der Mitte, die
     Nachbarn schauen gedaempft daneben hervor. Unten eine Jahresleiste.

     Die Inserate liegen alle im HTML nebeneinander auf einer Schiene -
     das Skript verschiebt nur. Ohne JavaScript wird aus der Schiene eine
     Spalte und alles steht untereinander (siehe .presse:not(.laeuft)). */
  .presse{--pr-breite:52%}
  .pr-kopf{text-align:center}
  .pr-zaehler{font-family:"Segoe UI",system-ui,sans-serif;font-size:11px;font-weight:700;
    letter-spacing:.3em;text-transform:uppercase;color:var(--gold2)}
  .pr-nr{font-variant-numeric:tabular-nums}

  .pr-buehne{position:relative;margin-top:clamp(26px,4vw,44px);overflow:hidden}
  .pr-schiene{display:flex;align-items:flex-start;
    transition:transform .6s cubic-bezier(.22,.75,.2,1)}
  .pr-blatt-feld{flex:0 0 var(--pr-breite);padding:0 clamp(10px,1.6vw,22px);
    opacity:.22;transform:scale(.9);transform-origin:50% 40%;
    transition:opacity .5s ease,transform .6s cubic-bezier(.22,.75,.2,1)}
  /* Der Nachbar links und rechts bleibt erkennbar - das zeigt, dass es
     weitergeht, ohne vom aktuellen Inserat abzulenken. */
  .pr-blatt-feld.nah{opacity:.42}
  .pr-blatt-feld.da{opacity:1;transform:none}

  /* Kopfzeile ueber dem Blatt: Zeichen, Zeitung, Datum */
  .pr-zeitung{display:flex;align-items:center;gap:10px;max-width:460px;margin:0 auto 14px;
    padding-bottom:9px;border-bottom:1px solid rgba(236,187,82,.2)}
  .pr-kuerzel{flex:none;font-family:"Segoe UI",system-ui,sans-serif;font-size:9.5px;font-weight:700;
    letter-spacing:.06em;padding:2px 5px;border-radius:3px;
    border:1px solid rgba(236,187,82,.45);color:var(--gold2)}
  .pr-name{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:13.5px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pr-datum{margin-left:auto;flex:none;font-family:"Segoe UI",system-ui,sans-serif;font-size:11px;
    letter-spacing:.08em;color:rgba(168,146,117,.75)}

  /* ---------- Das Blatt selbst ----------
     Heller Papierton auf der dunklen Seite. Der feine Punktraster und
     der schraege Lichtverlauf lassen es wie einen Abzug wirken statt
     wie eine weisse Flaeche. */
  .pr-blatt{--papier:#e9e1cd;--tinte:#221c16;
    max-width:460px;margin:0 auto;padding:30px 28px 32px;
    color:var(--tinte);background-color:var(--papier);
    background-image:radial-gradient(rgba(34,28,22,.1) .9px,transparent 1px),
      linear-gradient(165deg,rgba(255,255,255,.5),rgba(120,95,60,.12));
    background-size:4px 4px,100% 100%;
    box-shadow:0 24px 50px rgba(0,0,0,.55),inset 0 0 0 1px rgba(34,28,22,.18)}
  .pr-scan{width:100%;height:auto;display:block}

  .pr-strich{border:0;border-top:1.5px solid var(--tinte);opacity:.85;margin:13px 0}
  .pr-strich.duenn{border-top-width:.5px;opacity:.42}
  .pr-ueber{font-family:"Segoe UI",system-ui,sans-serif;font-size:10.5px;letter-spacing:.24em;
    text-transform:uppercase;opacity:.62}
  .pr-titel{font-family:Georgia,"Times New Roman",serif;font-weight:700;line-height:1;
    font-size:clamp(26px,3.4vw,36px);letter-spacing:-.01em;margin:8px 0 5px;color:var(--tinte)}
  .pr-unter{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:16px;opacity:.8}
  /* Blocksatz mit Silbentrennung - so sah gesetzter Zeitungstext aus */
  .pr-text{font-family:"Segoe UI",system-ui,sans-serif;font-size:13.5px;line-height:1.62;
    opacity:.78;margin-top:12px;text-align:justify;hyphens:auto}
  .pr-fuss{font-family:"Segoe UI",system-ui,sans-serif;font-size:10.5px;letter-spacing:.1em;
    opacity:.7;margin-top:16px}

  /* Menue-Posten mit punktierter Fuehrungslinie zum Preis */
  .pr-posten{margin-top:2px;font-size:14px}
  .pr-posten-zeile{display:flex;align-items:baseline;gap:7px;padding:4px 0}
  .pr-posten-zeile dt{font-family:Georgia,"Times New Roman",serif}
  .pr-posten-zeile i{flex:1;border-bottom:1px dotted rgba(34,28,22,.4);transform:translateY(-3px)}
  .pr-posten-zeile dd{margin:0;font-family:"Segoe UI",system-ui,sans-serif;font-size:12.5px;
    font-weight:600;white-space:nowrap}

  /* Die Signetzeile ganz unten, zwischen zwei kraeftigen Linien */
  .pr-signet{margin-top:20px;padding:6px 0;text-align:center;
    font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:11px;
    letter-spacing:.16em;text-transform:uppercase;
    border-top:1.5px solid var(--tinte);border-bottom:1.5px solid var(--tinte)}

  /* Plakat: alles mittig, der Titel gross */
  .pr-plakat .pr-ueber,.pr-plakat .pr-titel,
  .pr-plakat .pr-unter,.pr-plakat .pr-text,.pr-plakat .pr-fuss{text-align:center}
  .pr-plakat .pr-titel{font-size:clamp(34px,4.6vw,50px)}
  .pr-plakat .pr-text{hyphens:none}

  .pr-quelle{max-width:460px;margin:12px auto 0;text-align:center;
    font-family:"Segoe UI",system-ui,sans-serif;font-size:11.5px;line-height:1.6;
    color:rgba(168,146,117,.7)}

  /* ---------- Pfeile ---------- */
  .pr-pfeil{position:absolute;top:38%;transform:translateY(-50%);z-index:5;
    width:48px;height:48px;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    background:rgba(11,7,4,.62);border:1px solid rgba(236,187,82,.3);color:var(--cream);
    -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:.25s}
  .pr-pfeil svg{width:20px;height:20px}
  .pr-pfeil:hover{background:rgba(236,187,82,.18);border-color:var(--gold2);color:var(--gold3)}
  .pr-pfeil:disabled{opacity:.16;cursor:default}
  .pr-pfeil.zurueck{left:clamp(8px,2vw,26px)}
  .pr-pfeil.vor{right:clamp(8px,2vw,26px)}

  /* ---------- Was heute dazu zu sagen ist ---------- */
  .pr-notizen{position:relative;max-width:640px;margin:clamp(22px,3.5vw,36px) auto 0;
    text-align:center}
  .pr-notiz[hidden]{display:none}
  .pr-notiz{animation:prAuf .5s ease both}
  @keyframes prAuf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .pr-jahr{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:26px;
    letter-spacing:.04em;color:var(--gold2)}
  .pr-angaben{margin-top:6px;font-family:"Segoe UI",system-ui,sans-serif;font-size:10.5px;
    letter-spacing:.16em;text-transform:uppercase;color:rgba(168,146,117,.7)}
  .pr-wort{margin-top:14px;font-family:Georgia,"Times New Roman",serif;font-style:italic;
    font-size:16.5px;line-height:1.65;color:#cdbba3}
  .pr-pdf{display:inline-block;margin-top:14px;font-family:"Segoe UI",system-ui,sans-serif;
    font-size:13px;color:var(--gold2);border-bottom:1px solid rgba(236,187,82,.45);
    padding-bottom:2px;transition:.25s}
  .pr-pdf:hover{color:var(--gold3);border-color:var(--gold2)}

  /* ---------- Jahresleiste ---------- */
  .pr-leiste{position:relative;display:flex;align-items:flex-end;
    max-width:900px;margin:clamp(30px,5vw,52px) auto 0;padding:0 24px}
  .pr-leiste::before{content:"";position:absolute;left:24px;right:24px;bottom:5px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(236,187,82,.35),transparent)}
  .pr-strich-knopf{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;
    padding:0;border:0;background:transparent;cursor:pointer;color:inherit}
  .pr-strich-knopf .jahr{font-family:"Segoe UI",system-ui,sans-serif;font-size:10.5px;
    letter-spacing:.08em;color:rgba(168,146,117,.4);transition:.25s}
  .pr-strich-knopf .stift{width:1px;height:9px;background:rgba(236,187,82,.35);transition:.25s}
  .pr-strich-knopf:hover .jahr{color:rgba(244,231,213,.8)}
  .pr-strich-knopf.da .jahr{color:var(--gold2);font-weight:700}
  .pr-strich-knopf.da .stift{width:2px;height:18px;background:var(--gold2);
    box-shadow:0 0 10px rgba(236,187,82,.7)}

  /* ---------- Ohne JavaScript ----------
     Dann bleibt .laeuft aus: aus der Schiene wird eine Spalte, alle
     Inserate stehen untereinander und die Bedienelemente verschwinden. */
  .presse:not(.laeuft) .pr-schiene{display:block;transform:none!important}
  .presse:not(.laeuft) .pr-blatt-feld{opacity:1;transform:none;
    margin-bottom:clamp(40px,6vw,70px)}
  .presse:not(.laeuft) .pr-pfeil,
  .presse:not(.laeuft) .pr-leiste,
  .presse:not(.laeuft) .pr-zaehler{display:none}
  .presse:not(.laeuft) .pr-notiz[hidden]{display:block}
  .presse:not(.laeuft) .pr-notizen{margin-bottom:clamp(40px,6vw,70px)}

  @media (max-width:900px){
    .presse{--pr-breite:78%}
    .pr-blatt{padding:24px 22px 26px}
  }
  @media (max-width:620px){
    .presse{--pr-breite:92%}
    .pr-pfeil{width:38px;height:38px}
    .pr-pfeil svg{width:16px;height:16px}
    /* Bei elf Jahren wird es eng - nur das aktive Jahr bleibt lesbar */
    .pr-strich-knopf .jahr{display:none}
    .pr-strich-knopf.da .jahr{display:block}
  }
  @media (prefers-reduced-motion:reduce){
    .pr-schiene,.pr-blatt-feld{transition:none}
    .pr-notiz{animation:none}
  }

  /* ---------- Anreisser zum Inseratealbum ----------
     Steht unten auf „Über uns". Drei Blaetter schraeg uebereinander wie
     ein Stapel Zeitungsausschnitte auf dem Tisch; beim Darueberfahren
     faechern sie sich leicht auf. */
  .presse-anreisser{display:flex;align-items:center;gap:clamp(20px,4vw,44px);
    margin-top:clamp(48px,7vw,80px);padding:clamp(22px,3.4vw,34px);
    border:1px solid var(--line);border-radius:20px;
    background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
    transition:border-color .3s,transform .3s,box-shadow .3s}
  .presse-anreisser:hover{border-color:rgba(236,187,82,.4);transform:translateY(-3px);
    box-shadow:0 18px 44px rgba(0,0,0,.4)}

  .pa-stapel{position:relative;flex:none;width:120px;height:96px}
  .pa-blatt{position:absolute;inset:0;left:50%;top:50%;width:74px;height:92px;
    display:flex;align-items:center;justify-content:center;overflow:hidden;
    background:#e9e1cd;border-radius:3px;
    box-shadow:0 6px 16px rgba(0,0,0,.45),inset 0 0 0 1px rgba(34,28,22,.2);
    transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .pa-blatt img{width:100%;height:100%;object-fit:cover}
  /* Ohne Scan steht die Jahreszahl auf dem Blatt */
  .pa-blatt b{font-family:Georgia,"Times New Roman",serif;font-size:19px;color:#3b3026;opacity:.55}
  .pa-0{transform:translate(-50%,-50%) rotate(-9deg)}
  .pa-1{transform:translate(-50%,-50%) rotate(1deg)}
  .pa-2{transform:translate(-50%,-50%) rotate(10deg)}
  .presse-anreisser:hover .pa-0{transform:translate(-72%,-52%) rotate(-15deg)}
  .presse-anreisser:hover .pa-2{transform:translate(-28%,-52%) rotate(16deg)}

  .pa-wort{min-width:0}
  .pa-ueber{font-family:"Segoe UI",system-ui,sans-serif;font-size:10.5px;font-weight:700;
    letter-spacing:.3em;text-transform:uppercase;color:var(--gold2)}
  .pa-titel{margin-top:8px;font-family:Georgia,"Times New Roman",serif;font-weight:700;
    font-size:clamp(21px,3vw,28px);line-height:1.15;color:var(--cream)}
  .pa-mehr{display:inline-block;margin-top:12px;font-family:"Segoe UI",system-ui,sans-serif;
    font-size:13px;color:var(--gold2);transition:color .25s}
  .presse-anreisser:hover .pa-mehr{color:var(--gold3)}

  @media (max-width:560px){
    .presse-anreisser{flex-direction:column;text-align:center}
  }
  @media (prefers-reduced-motion:reduce){
    .pa-blatt,.presse-anreisser{transition:none}
    .presse-anreisser:hover .pa-0,.presse-anreisser:hover .pa-2{transform:translate(-50%,-50%)}
  }

  /* Auf dem Handy stehen die beiden Gruppen untereinander - die
     senkrechte Linie wird dann zu einer waagrechten. */
  @media (max-width:560px){
    .folgen-gruppen{flex-direction:column;gap:26px}
    .folgen-gruppe + .folgen-gruppe::before{left:18%;right:18%;top:-13px;bottom:auto;
      width:auto;height:1px;
      background:linear-gradient(90deg,transparent,rgba(236,187,82,.28),transparent)}
  }

  /* ---------- Gericht mit Wappen ----------
     Bei den Cordon Bleus steht links das Zeichen der Region. Der Text
     rueckt daneben, damit nichts darunter durchlaeuft. Umgesetzt mit
     einem linken Innenabstand statt mit Flexbox - so bleiben Name,
     Beschreibung und Preiszeile genau da, wo sie in allen anderen
     Karten auch stehen. */
  .gericht.mit-wappen{padding-left:96px}
  /* Das Banner haengt oben an einer gedachten Stange - es steht darum
     nicht mittig in der Karte, sondern auf der Hoehe des Namens. Das
     ist auch der Grund fuer den festen Abstand von oben statt einer
     Zentrierung: Bei einem langen Gerichtsnamen, der zweizeilig wird,
     wandert das Wappen sonst nach unten weg. */
  .gericht.mit-wappen .wappen{position:absolute;left:22px;top:11px;
    width:auto;height:58px;transform-origin:50% 6%;
    /* Ein Hauch Schatten loest das Gold vom Kartengrund, ohne zu poltern */
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
    transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  /* Beim Darueberfahren pendelt das Banner leicht aus - wie an einer
     Stange, die jemand angestossen hat. Gedreht wird um den oberen
     Rand, sonst sieht es aus, als rutsche es weg. */
  .gericht.mit-wappen:hover .wappen{transform:rotate(-3deg)}

  @media (max-width:560px){
    .gericht.mit-wappen{padding-left:74px}
    .gericht.mit-wappen .wappen{left:14px;top:12px;height:50px}
  }
  @media (prefers-reduced-motion:reduce){
    .gericht.mit-wappen .wappen{transition:none}
    .gericht.mit-wappen:hover .wappen{transform:none}
  }

  /* Trennlinie zwischen Kopf und Karte - steht dort, wo auf den anderen
     Karten die Kategorieleiste sitzt. Auf einer Saisonkarte gibt es
     nichts zu filtern, aber der Schnitt zwischen Titelbild und Gerichten
     soll trotzdem sichtbar bleiben. */
  .karte-trennlinie{border:0;height:1px;margin:0 auto clamp(30px,5vw,54px);
    max-width:520px;
    background:linear-gradient(90deg,transparent,rgba(236,187,82,.35),transparent)}

  /* ---------- Ausblick auf der Pausenseite ----------
     Was als Naechstes kommt und wohin man in der Zwischenzeit gehen
     kann. Ohne das waere die Seite eine Sackgasse: ein schoenes Bild,
     ein freundlicher Satz - und kein Weg weiter. */
  .pause-weiter{margin-top:clamp(38px,6vw,64px);padding-top:clamp(28px,4vw,40px);
    border-top:1px solid var(--line);text-align:center}

  /* Der Termin: Aus einem vagen "bald" wird ein Datum, auf das man sich
     freuen kann. Faellt weg, wenn kein Startdatum eingetragen ist. */
  .pw-termin{margin-bottom:clamp(24px,3.5vw,34px)}
  .pw-ueber{display:block;font-family:"Segoe UI",system-ui,sans-serif;font-size:10.5px;
    font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold2);opacity:.85}
  .pw-termin b{display:block;margin-top:10px;font-family:Georgia,"Times New Roman",serif;
    font-weight:700;font-size:clamp(24px,4vw,34px);line-height:1.15;
    background:linear-gradient(100deg,#b3831f,#ecbb52,#f7dc93,#ecbb52);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .pw-datum{display:inline-block;margin-top:10px;padding:6px 16px;border-radius:999px;
    border:1px solid rgba(236,187,82,.3);
    font-family:"Segoe UI",system-ui,sans-serif;font-size:13px;color:#cdbba3}

  .pw-wege{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}

  @media (max-width:480px){
    .pw-wege .btn{flex:1 1 100%;justify-content:center}
  }

  /* ---------- Pausenseite: Text und Bild nebeneinander ----------
     Die Zeichnung steht neben dem Text statt als Hintergrund im Kopf.
     Als Hintergrund war sie abgedunkelt und angeschnitten - hier ist sie
     ein Bild, das man auch ansieht. Der erste Satz wird gross gesetzt,
     die beiden folgenden bleiben ruhig. */
  .pause-raum{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    align-items:center;gap:clamp(24px,5vw,60px)}
  .pause-raum .textseite{max-width:none;margin:0}
  .pause-raum .textseite p:first-child{font-size:clamp(20px,2.9vw,27px);line-height:1.35;
    color:var(--cream);margin-top:0}
  .pause-raum .textseite p{margin-top:20px}
  .pause-bild{width:100%;height:auto;border-radius:16px}

  /* Auf schmalen Bildschirmen untereinander - das Bild zuerst, damit
     man beim Ankommen etwas sieht und nicht nur liest. */
  @media (max-width:820px){
    .pause-raum{grid-template-columns:1fr;gap:26px}
    .pause-bild{order:-1}
    .pause-raum .textseite{text-align:center}
  }

  /* =====================================================================
     Tagesmenü
     -------------------------------------------------------------------
     Eine kurze Seite: drei bis fünf Zeilen, gross gesetzt. Wer mittags
     auf dem Handy nachschaut, soll nicht scrollen muessen, um MENU 1 zu
     finden - darum keine Bilder und keine Kacheln, nur Zeilen.
     ===================================================================== */
  .tm-satz{margin:0 auto 22px;max-width:720px;text-align:center;color:var(--gold3);
    font-style:italic;font-size:clamp(15px,2vw,17px)}

  /* ---------- Die Woche ---------- */
  /* Der Aufbau folgt der Vorlage, die der Wirt gezeigt hat: oben die
     Spanne, darunter was die ganze Woche laeuft, dann Tag fuer Tag die
     Menues als Karten. Auf dem Bildschirm stehen hoechstens zwei je Tag
     - das gedruckte Blatt traegt weiterhin alle Plaetze. */
  .seitenkopf-sub{margin-top:12px;color:var(--muted);font-size:clamp(14px,1.9vw,16px)}

  /* Der Kopf traegt nur noch die Hinweise, die fuer alle Tage gelten.
     Die grosse Datumszeile stand hier frueher auch - sie ist weg: Das
     Datum steht beim Tag selbst, und zweimal dasselbe liest niemand
     zweimal. Ohne sie darf der Abstand kleiner werden, sonst klaffte
     ein Loch zwischen Hero und erstem Menue. */
  .tm-wochenkopf{text-align:center;margin-bottom:22px}
  .tm-note{color:var(--muted);font-family:"Segoe UI",system-ui,sans-serif;font-size:13.5px}
  .tm-wechsel{margin-top:8px;color:#8a7a63;font-family:"Segoe UI",system-ui,sans-serif;
    font-size:12.5px;max-width:52ch;margin-left:auto;margin-right:auto;line-height:1.5}
  .tm-wochenkopf .tm-satz{margin-top:22px;margin-bottom:0}

  /* Ein Tag */
  /* Ueber jedem Tag eine sehr feine goldene Linie, die zu den Seiten
     hin ausblendet. Sie gliedert, ohne zu trennen: Eine durchgezogene
     Linie von Rand zu Rand zerschnitte die Seite in Kaesten; diese
     hier endet im Nichts und laesst den dunklen Grund weiterlaufen.

     Der Abstand nach unten ist grosszuegiger als frueher (44 Punkte) -
     sonst stand die Ueberschrift „MORGEN" fast an den Karten von
     heute, und die zwei Tage flossen ineinander. */
  .tm-tag{position:relative;margin-bottom:66px;padding-top:30px;scroll-margin-top:90px}
  .tm-tag::before{content:"";position:absolute;top:0;left:50%;
    transform:translateX(-50%);width:min(100%,540px);height:1px;
    background:linear-gradient(90deg,rgba(236,187,82,0),rgba(236,187,82,.3),rgba(236,187,82,0))}
  @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
  /* Der Tagesname mittig, das Datum darunter - wie der Wochenkopf und
     wie die Karten. Nebeneinander stand der Name links und das Datum
     rechts aussen; auf einer Seite, die sonst durchgehend mittig
     gesetzt ist, war das die einzige Zeile, die auseinanderlief. */
  .tm-tag-kopf{text-align:center;margin-bottom:20px;padding-bottom:14px;
    border-bottom:1px solid var(--line)}
  /* ---------- Die Marke über dem Tag ----------
     „HEUTE" und „MORGEN" stehen als kleine Zeile über dem Wochentag -
     nicht als Wort neben dem Datum, wo sie mitgelesen und überlesen
     wurden. Sie sagen dem Gast in einem Blick, ob er heute noch
     kommen kann. */
  .tm-tag-marke{font-family:"Segoe UI",system-ui,sans-serif;font-size:11px;
    font-weight:700;letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold2);margin-bottom:6px}

  /* ---------- Samstag und Sonntag ----------
     Von Freitagmittag bis Sonntag Mitternacht steht hier ein Satz statt
     einer leeren Fläche. Ruhig gesetzt: Es ist keine Fehlermeldung,
     sondern eine Auskunft. */
  .tm-wochenende{max-width:620px;margin:0 auto;padding:44px 28px;text-align:center;
    border:1px solid var(--line);border-radius:18px;
    background:linear-gradient(180deg,rgba(255,244,228,.05),rgba(255,244,228,.02))}
  .tm-wochenende-satz{margin:0;font-size:clamp(19px,3.4vw,24px);font-weight:700;
    color:var(--cream);line-height:1.35;text-wrap:balance}
  .tm-wochenende-note{margin:12px 0 0;color:var(--muted);font-size:15px}

  .tm-tag-kopf h2{font-size:clamp(20px,3vw,27px);font-weight:400}
  .tm-tag-datum{display:block;margin-top:7px;color:var(--muted);
    font-family:"Segoe UI",system-ui,sans-serif;font-size:13px;
    font-variant-numeric:tabular-nums}
  .tm-tag-datum b,.tm-tag-datum i{margin-left:8px;padding:3px 9px;border-radius:999px;
    font-style:normal;font-weight:700;font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase}
  .tm-tag-datum b{background:rgba(236,187,82,.16);color:var(--gold3)}
  .tm-tag-datum i{background:rgba(255,255,255,.05);color:var(--muted)}
  /* Ohne Skript bleibt der heutige Tag der hervorgehobene - die Seite
     soll auch dann etwas zeigen, wenn nichts nachfuehrt. */
  .tm-tag.heute .tm-tag-kopf{border-bottom-color:rgba(236,187,82,.35)}

  /* ---------- Heute sticht heraus - aber leise ----------
     Frueher stand um die Marke „HEUTE" ein Ring, der dreimal atmete,
     und die heutigen Karten waren groesser, waermer und staerker
     umrandet. Im Standbild sah der Ring aus wie ein Kasten um das
     Wort, und zwei ungleiche Kartenpaare untereinander wirkten wie
     zwei verschiedene Seiten.

     Jetzt sind ALLE Karten gleich - gleiche Hoehe, gleicher Rahmen,
     gleicher Grund, gleiche Abstaende. Was HEUTE ist, sagt die Marke
     darueber und die goldene Ueberschrift. Das genuegt: Wer die Seite
     aufschlaegt, liest zuerst das Wort, nicht den Rahmen. */
  .tm-tag.heute .tm-tag-kopf h2{color:var(--gold3)}

  /* Zwei Karten nebeneinander, beide gleich breit und gleich hoch.
     „1fr 1fr" statt „auto-fit": Bei auto-fit entschied die Breite des
     Fensters, ob nebeneinander oder untereinander - und bei einem
     einzigen Menue nahm die Karte die halbe Zeile ein und stand
     schief. Jetzt sagt es die Regel, und das Telefon bekommt weiter
     unten seine eigene.
     „align-items:stretch" macht beide gleich hoch, auch wenn der eine
     Text zwei Zeilen laenger ist - sonst stuenden zwei ungleiche
     Kaesten nebeneinander. */
  .tm-karten{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
  /* Ein einzelnes Menue soll nicht die halbe Zeile fuellen: Steht nur
     eine Karte da, bekommt sie die ganze Breite (und bleibt durch
     max-width lesbar). */
  .tm-karten:has(> .tm-karte:only-child){grid-template-columns:minmax(0,560px);
    justify-content:center}

  /* Am Telefon untereinander. Zwei Karten mit Name, Beschreibung und
     Preis brauchen je rund 280 Punkte - darunter wird der Text
     gequetscht, lange bevor der Bildschirm wirklich schmal ist. */
  @media (max-width:680px){
    .tm-karten,
    .tm-karten:has(> .tm-karte:only-child){grid-template-columns:1fr}
  }
  /* Mittig gesetzt - wie der Wochenkopf darueber. Bei zwei Karten
     nebeneinander steht damit alles auf einer Achse; linksbuendig
     zerfiel die Reihe in zwei Spalten, die nichts miteinander zu tun
     hatten. */
  /* Die Umrandung traegt die Karte. Frueher war sie so blass wie jede
     andere Linie auf der Seite und die heutige Karte holte sich die
     Aufmerksamkeit ueber Groesse und Farbe. Jetzt macht es der Rahmen -
     bei allen gleich, in gedaempftem Gold statt Grau. */
  .tm-karte{padding:26px 26px 24px;border:1px solid rgba(236,187,82,.34);
    border-radius:14px;
    background:rgba(255,255,255,.02);text-align:center;
    box-shadow:0 8px 26px rgba(0,0,0,.22);
    transition:border-color .25s,background .25s,box-shadow .25s}
  .tm-karte:hover{border-color:rgba(236,187,82,.62);background:rgba(236,187,82,.045);
    box-shadow:0 12px 32px rgba(0,0,0,.3)}
  .tm-karte-marke{display:inline-block;margin-bottom:10px;
    font-family:"Segoe UI",system-ui,sans-serif;font-size:10.5px;font-weight:700;
    letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
  .tm-karte h3{font-size:clamp(19px,2.6vw,24px);font-weight:400;line-height:1.25}
  .tm-karte p{margin-top:9px;color:var(--muted);font-size:clamp(14px,1.7vw,15.5px);
    line-height:1.6}
  .tm-karte-preis{margin-top:14px;color:var(--gold2);font-weight:600;
    font-size:clamp(15px,2vw,17px);font-variant-numeric:tabular-nums}

  /* Weiter im Angebot - knapp gesetzt */
  /* Es sind an die zwanzig Zeilen. Als Karten wuerden sie die Woche
     erschlagen; darum dieselbe knappe Form wie auf dem gedruckten
     Blatt - Name, Beisatz, Preis. */
  .tm-angebot{margin-top:20px;padding-top:34px;border-top:1px solid var(--line)}
  .tm-angebot-titel{text-align:center;margin-bottom:24px;font-weight:400;
    font-size:clamp(18px,2.6vw,23px)}
  /* Ein kleiner Winkel nach unten: Er sagt, dass es weitergeht. Aus
     zwei Raendern gezeichnet und um 45 Grad gedreht - so braucht es
     kein Bild, und er traegt die Farbe der Schrift. */
  .tm-angebot-titel::after{content:"";display:block;width:11px;height:11px;
    margin:12px auto 0;
    border-right:1.5px solid rgba(236,187,82,.5);
    border-bottom:1.5px solid rgba(236,187,82,.5);
    transform:rotate(45deg)}
  .tm-angebot-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
    gap:2px 40px}
  .tm-angebot-zeile{display:flex;align-items:baseline;gap:14px;padding:11px 0;
    border-bottom:1px solid rgba(236,187,82,.12)}
  .tm-angebot-wort{flex:1;min-width:0}
  .tm-angebot-wort b{font-weight:400;font-size:15.5px}
  .tm-angebot-wort small{display:block;margin-top:3px;color:var(--muted);font-size:13px;
    line-height:1.45}
  .tm-angebot-preis{flex:none;color:var(--gold2);font-size:14.5px;
    font-variant-numeric:tabular-nums;white-space:nowrap}

  /* Kurz aufleuchten, wenn man den Tag im Streifen antippt.
     Ohne das landet man irgendwo in der Mitte der Seite und muss erst
     suchen, welche zwei Kaesten gemeint sind. Zwei Sekunden Gold, dann
     ist wieder Ruhe. */
  @keyframes tm-blinken{
    0%   {border-color:var(--line);      background:rgba(255,255,255,.02);
          box-shadow:0 0 0 0 rgba(236,187,82,0)}
    18%  {border-color:rgba(236,187,82,.75); background:rgba(236,187,82,.10);
          box-shadow:0 0 0 6px rgba(236,187,82,.10)}
    100% {border-color:var(--line);      background:rgba(255,255,255,.02);
          box-shadow:0 0 0 0 rgba(236,187,82,0)}
  }
  .tm-karte.blinkt{animation:tm-blinken 1.5s ease-out}
  /* Zweite Karte einen Wimpernschlag spaeter - so liest man sie als
     Paar und nicht als einen Block. */
  .tm-karte.blinkt:nth-child(2){animation-delay:.12s}
  @media (prefers-reduced-motion:reduce){
    .tm-karte.blinkt{animation:none;border-color:rgba(236,187,82,.6)}
  }

  /* Der Streifen am unteren Rand */
  .tm-streifen{position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(12,8,5,.92);backdrop-filter:blur(12px);
    border-top:1px solid var(--line)}
  .tm-streifen-pillen{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
  .tm-pille{min-width:52px;padding:9px 14px;border-radius:10px;text-align:center;
    border:1px solid var(--line);background:rgba(255,255,255,.03);
    font-family:"Segoe UI",system-ui,sans-serif;font-size:12.5px;font-weight:700;
    letter-spacing:.08em;color:var(--cream);transition:.22s}
  .tm-pille:hover{border-color:rgba(236,187,82,.45);color:var(--gold3)}
  /* „aktiv" ist der Tag, bei dem man gerade steht - der wandert beim
     Rollen mit. „heute" bleibt daneben sichtbar, aber leiser: ein
     Punkt genuegt, sonst leuchten zwei Pillen um die Wette. */
  .tm-pille.aktiv{background:rgba(236,187,82,.18);border-color:rgba(236,187,82,.55);
    color:var(--gold3)}
  .tm-pille.heute{position:relative}
  .tm-pille.heute::after{content:"";position:absolute;left:50%;bottom:4px;
    width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--gold2);
    opacity:.75}
  .tm-pille.heute.aktiv::after{opacity:1}

  /* Der Tag, bei dem man steht, traegt den goldenen Strich. */
  .tm-tag.aktiv .tm-tag-kopf{border-bottom-color:rgba(236,187,82,.5)}
  .tm-tag.aktiv .tm-tag-kopf h2{color:var(--gold3)}
  /* Damit der Streifen nichts verdeckt, endet die Seite hoeher. */
  /* Oben knapper als der uebliche Abschnitt: Der Hero darueber ist
     selbst schon ein grosser ruhiger Block, und zwei Freiraeume
     uebereinander lesen sich als Loch. Unten bleibt es grosszuegig -
     dort setzt sich „Weiter im Angebot" ab. */
  .tm-woche-abschnitt{padding-top:clamp(29px,3.8vw,44px);padding-bottom:110px}

  .tm-fuss{max-width:880px;margin:26px auto 0;text-align:center;color:var(--muted);
    font-family:"Segoe UI",system-ui,sans-serif;font-size:12.5px}

  .tm-weiter{margin-top:36px;text-align:center}


  /* ---------- Rückmeldung eines Gastes ---------- */
  /* Ein Formular auf einer dunklen Seite lebt von Linien, nicht von
     Kaesten: Fuenf helle Rechtecke uebereinander wuerden die Seite
     zerschneiden. Darum eine Haarlinie unter jedem Feld, die beim
     Tippen aufleuchtet - dieselbe Sprache wie die Reservation. */
  .fb-vorspann{max-width:52ch;margin:0 auto 34px;text-align:center;color:var(--muted);
    font-size:15.5px;line-height:1.7}
  .fb-form{display:flex;flex-direction:column;gap:26px}
  .fb-paar{display:grid;grid-template-columns:1fr 1fr;gap:26px}
  .fb-feld{display:flex;flex-direction:column;gap:9px}
  .fb-feld label{font-family:"Segoe UI",system-ui,sans-serif;font-size:9.5px;font-weight:700;
    letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
  .fb-feld label span{margin-left:7px;letter-spacing:.02em;text-transform:none;
    font-weight:400;font-size:11px;color:#6a5d4c}
  .fb-feld input,.fb-feld textarea{width:100%;background:none;border:0;
    border-bottom:1px solid rgba(236,187,82,.4);padding:0 0 11px;color:var(--cream);
    font-family:Georgia,"Times New Roman",serif;font-size:16px;transition:border-color .25s}
  .fb-feld input::placeholder,.fb-feld textarea::placeholder{color:#5f5443;
    font-family:"Segoe UI",system-ui,sans-serif;font-size:13.5px}
  .fb-feld input:focus,.fb-feld textarea:focus{outline:none;border-bottom-color:var(--gold2)}
  .fb-feld textarea{resize:vertical;min-height:120px;line-height:1.55}
  .fb-form .btn{align-self:flex-start}

  /* Ein Block mit Ueberschrift - „Wann waren Sie da?", „Wie war es?",
     „Zu Ihrer Person". Die Vorlage des Wirts gliedert genauso; das
     macht aus einem langen Formular drei kurze. */
  .fb-block{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
  /* Eine „legend" ist kein gewoehnliches Kind: Der Abstand der Gruppe
     (gap) gilt fuer sie nicht, sie braucht ihren Rand selbst - sonst
     klebt die Ueberschrift auf dem ersten Feld. */
  .fb-block legend{padding:0;margin-bottom:14px;font-family:"Segoe UI",system-ui,sans-serif;
    font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
    color:var(--gold2)}
  .fb-block legend span{margin-left:8px;letter-spacing:.02em;text-transform:none;
    font-weight:400;font-size:11px;color:#6a5d4c}

  /* Mittag oder Abend - zwei Pillen, wie in der Reservation */
  .fb-wahl{display:flex;gap:8px}
  .fb-pille{position:relative;flex:1}
  .fb-pille input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
  .fb-pille span{display:block;padding:11px 10px;text-align:center;border-radius:999px;
    border:1px solid var(--line);background:rgba(255,255,255,.02);
    font-family:"Segoe UI",system-ui,sans-serif;font-size:13.5px;color:var(--muted);
    transition:.2s}
  .fb-pille:hover span{color:var(--cream);border-color:rgba(236,187,82,.4)}
  .fb-pille input:checked + span{color:var(--gold3);border-color:rgba(236,187,82,.55);
    background:rgba(236,187,82,.12)}
  .fb-pille input:focus-visible + span{outline:1px solid var(--gold2);outline-offset:2px}

  /* Die Noten: fuenf Sterne je Zeile, ganz ohne Skript.
     Die Sterne stehen von 5 nach 1 in der Datei und werden hier
     umgedreht - nur so kann „dieser und alle danach" faerben, und das
     ist die einzige Regel, mit der CSS rueckwaerts sehen kann. */
  .fb-note{display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:10px 0;border-bottom:1px solid rgba(236,187,82,.12)}
  .fb-note:last-child{border-bottom:0}
  .fb-note-wort{font-family:Georgia,"Times New Roman",serif;font-size:16px;color:var(--cream)}
  .fb-sterne{display:flex;flex-direction:row-reverse;justify-content:flex-start;gap:4px}
  .fb-sterne input{position:absolute;opacity:0;width:1px;height:1px}
  .fb-sterne label{position:relative;width:30px;height:30px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    color:#5a4f40;transition:color .18s,transform .18s}
  .fb-sterne label::before{content:"★";font-size:23px;line-height:1}
  .fb-sterne label:hover{transform:scale(1.12)}
  .fb-sterne input:checked ~ label,
  .fb-sterne label:hover,
  .fb-sterne label:hover ~ label{color:var(--gold2)}
  .fb-sterne input:focus-visible + label{outline:1px solid var(--gold2);outline-offset:2px;
    border-radius:6px}
  /* Der Text zum Stern gehoert der Vorlesehilfe, nicht dem Auge. */
  .visuell-weg{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
    white-space:nowrap}

  @media (max-width:560px){
    .fb-note{flex-direction:column;align-items:flex-start;gap:6px}
  }

  /* Das Feld fuer die Werbeskripte. Nicht display:none - manche Skripte
     erkennen das und lassen es dann aus. */
  .fb-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  .fb-fehler{margin-bottom:22px;padding:12px 16px;border-radius:10px;
    border-left:3px solid var(--ember);background:rgba(224,85,42,.10);
    color:var(--cream);font-size:14.5px}

  .fb-anruf{margin-top:34px;text-align:center;color:var(--muted);font-size:14px}
  .fb-anruf a{color:var(--gold3);white-space:nowrap}

  .fb-danke{text-align:center;padding:20px 0 10px}
  .fb-haken{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:30px;
    color:var(--gold3);border:1px solid rgba(236,187,82,.45);
    background:rgba(236,187,82,.08)}
  .fb-danke h2{font-size:clamp(21px,3vw,26px);font-weight:400;margin-bottom:12px}
  .fb-danke p{max-width:46ch;margin:0 auto 26px;color:var(--muted);line-height:1.7}

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