/* ==========================================================================
   da Adriano · Website
   Vom kleinen Bildschirm aus gebaut: Gaeste lesen die Karte am Handy.
   Keine fremden Schriften, keine fremden Skripte -- alles liegt auf dem Server.
   ========================================================================== */

@font-face { font-family:"Lato"; font-style:normal; font-weight:400; font-display:swap;
             src:url("../schriften/Lato-Regular.ttf") format("truetype"); }
@font-face { font-family:"Lato"; font-style:italic; font-weight:400; font-display:swap;
             src:url("../schriften/Lato-Italic.ttf") format("truetype"); }
@font-face { font-family:"Lato"; font-style:normal; font-weight:600; font-display:swap;
             src:url("../schriften/Lato-Semibold.ttf") format("truetype"); }
@font-face { font-family:"Lato"; font-style:normal; font-weight:700; font-display:swap;
             src:url("../schriften/Lato-Bold.ttf") format("truetype"); }
@font-face { font-family:"Lora"; font-style:italic; font-weight:400 700; font-display:swap;
             src:url("../schriften/Lora-Italic-Variable.ttf") format("truetype"); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--ad-sans);
  font-size: var(--ad-body);
  line-height: var(--ad-body-lh);
  color: var(--ad-ink);
  background: var(--ad-cream);
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--ad-green); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--ad-green); outline-offset: 2px;
}

.mitte { width: 100%; max-width: var(--ad-maxwidth); margin: 0 auto; padding: 0 var(--ad-gutter); }
/* Nur oben und unten. Stand hier "padding: ... 0", hob das den seitlichen
   Rand von .mitte auf -- auf dem Telefon klebte der Text am Bildschirmrand. */
.abschnitt { padding-top: var(--ad-s7); padding-bottom: var(--ad-s7); }
.schmal { max-width: 760px; }

h1, h2, h3 { font-weight: var(--ad-w-bold);
             /* Lange Woerter wie "Verbraucherstreitbeilegung" brachen auf dem
                Telefon aus der Seite (Impressum, 360 px: 59 px zu breit). */
             hyphens: auto; overflow-wrap: break-word; }

.seiten-titel {
  font-family: var(--ad-serif); font-style: italic; font-weight: 400;
  font-size: var(--ad-h1); line-height: var(--ad-h1-lh);
  margin-bottom: var(--ad-s5);
}
.vorspann { font-size: var(--ad-lead); line-height: var(--ad-lead-lh);
            color: var(--ad-grey); margin-bottom: var(--ad-s5); }
p + p, p + h2, ul + h2, dl + p { margin-top: var(--ad-s4); }
h2 + p, h2 + dl, h2 + ul { margin-top: var(--ad-s2); }

.sprung {
  position: absolute; left: -9999px; top: 0; background: var(--ad-green);
  color: #fff; padding: var(--ad-s2) var(--ad-s4); z-index: 100;
}
.sprung:focus { left: 0; }

/* ---------- Kopf ---------- */

.kopf { background: var(--ad-cream); border-bottom: 1px solid var(--ad-sand);
        position: sticky; top: 0; z-index: 50; }
.kopf-innen { display: flex; align-items: center; gap: var(--ad-s4);
              flex-wrap: wrap; padding-top: var(--ad-s3); padding-bottom: var(--ad-s3); }
.kopf-logo { display: block; width: 168px; flex: none; }
.kopf-logo svg { display: block; width: 100%; }
.logo-ersatz { font-family: var(--ad-serif); font-style: italic; font-size: 1.4rem; }

.navi { flex: 1 1 auto; min-width: 0; }   /* ohne min-width:0 bricht die Liste nie um */
.navi ul { display: flex; gap: var(--ad-s4); list-style: none; flex-wrap: wrap; }
.navi a { color: var(--ad-ink); text-decoration: none; font-weight: var(--ad-w-semibold);
          font-size: var(--ad-small); padding: var(--ad-s2) 0;
          border-bottom: 2px solid transparent; }
.navi a:hover { border-bottom-color: var(--ad-sand); }
.navi a.jetzt { border-bottom-color: var(--ad-green); color: var(--ad-green); }

.kopf-telefon { flex: none; }

/* ---------- Knoepfe ---------- */

.knopf {
  display: inline-block; min-height: 44px; line-height: 1.2;
  padding: 12px 22px; border-radius: var(--ad-radius);
  font-weight: var(--ad-w-bold); font-size: var(--ad-small);
  text-decoration: none; text-align: center; border: 2px solid transparent;
}
.knopf-voll { background: var(--ad-green); color: #fff; }
.knopf-voll:hover { background: var(--ad-green-hover); }
.knopf-rand { border-color: var(--ad-green); color: var(--ad-green); background: transparent; }
.knopf-rand:hover { background: rgba(30, 122, 69, .07); }
.knopf-hell { border-color: var(--ad-paper); color: var(--ad-paper); }
.knopf-hell:hover { background: rgba(246, 243, 238, .12); }
.textlink { font-weight: var(--ad-w-semibold); }

/* ---------- Buehne ---------- */

.buehne { background: var(--ad-night); color: var(--ad-paper); }
/* Mit Foto: das Bild traegt die Flaeche, ein dunkler Schleier haelt den Text
   lesbar. 55 % Deckung ist der Wert aus dem CI-Handbuch. */
.buehne.mit-bild { position: relative; overflow: hidden; }
/* Das Bild liegt als <img> hinter dem Text und fuellt die Buehne wie ein
   Hintergrund (object-fit: cover). Der Schleier darueber haelt die Schrift
   lesbar; 55 % Deckung ist der Wert aus dem CI-Handbuch. */
.buehne-bild { position: absolute; inset: 0; width: 100%; height: 100%;
               object-fit: cover; object-position: center 55%; }
.buehne.mit-bild::before { content: ""; position: absolute; inset: 0; z-index: 1;
  /* Seit der Tafel (27.09.2026) haelt die Tafel den Text lesbar; der Schleier
     ueber dem ganzen Bild ist deshalb leichter (30 statt 55 %) -- die Terrasse
     soll rund um die Tafel zu sehen sein. */
  background: rgba(20, 23, 26, .30); }
/* Tafel hinter Logo, Satz und Knoepfen (Thomas, 27.09.2026: Variante C) --
   dieselbe Formensprache wie die Tafel "Geoeffnet" weiter unten. 86 % Deckung:
   auch vor der hellsten Stelle des Fotos bleibt Papierweiss ueber 10 : 1. */
.buehne.mit-bild .buehne-innen { position: relative; z-index: 2;
  width: min(600px, calc(100% - 2 * var(--ad-gutter))); margin: 56px auto;
  padding: 40px 32px; border-radius: 6px; background: rgba(20, 23, 26, .86); }
@media (max-width: 699px) {
  .buehne.mit-bild .buehne-innen { margin: 28px auto; padding: 28px 18px; }
}
/* Auf einem Foto ist die graue Kickerzeile "RISTORANTE · PIZZERIA" nicht zu
   halten: gemessen 1,8 bis 2,8 : 1 gegen die hellen Stellen des Bildes, auch
   bei deutlich staerkerem Schleier. Grau (#9A948C) ist fuer flachen dunklen
   Grund gewaehlt, nicht fuer ein Bild. Auf Fotos steht sie deshalb in
   Papierweiss -- dieselbe Farbe wie die Wortmarke darunter. Festgehalten in
   den Entscheidungen vom 26.09.2026. */
.buehne.mit-bild .buehne-logo [fill="#9A948C"] { fill: var(--ad-paper); }

.seitenbild { margin: var(--ad-s5) 0; }
.seitenbild img, .portrait img, .kueche img {
  display: block; width: 100%; height: auto; background: var(--ad-sand); }
figcaption { font-size: var(--ad-small); color: var(--ad-grey); margin-top: var(--ad-s2); }

/* Portrait auf "Ueber uns": auf dem Telefon mittig, darueber rechts im Text. */
.portrait { max-width: 300px; margin: var(--ad-s5) auto; }

/* "Aus unserer Kueche": drei Kacheln, jede fuehrt in ihre Kategorie der Karte. */
.abschnitt-titel { font-family: var(--ad-serif); font-style: italic; font-weight: 400;
                   font-size: var(--ad-h2); margin-bottom: var(--ad-s4); }
/* Acht Kacheln: auf dem Telefon zwei nebeneinander (acht untereinander waeren
   eine lange Rolle), ab 1000 px vier -- zwei ruhige Reihen. */
.kueche { display: grid; gap: var(--ad-s4) var(--ad-s3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1000px) { .kueche { grid-template-columns: repeat(4, 1fr); gap: var(--ad-s5) var(--ad-s4); } }
.kueche-kachel { color: inherit; text-decoration: none; display: block; }
/* Kaffee, Pasta, Salat und Panna Cotta stehen auf weissem Grund -- ohne Rand
   fliessen sie in die cremefarbene Seite und sehen aus wie ausgeschnitten. */
.kueche img { border: 1px solid var(--ad-sand); }
.kueche-kachel figcaption { font-family: var(--ad-serif); font-style: italic;
                            font-size: 1rem; line-height: 1.3; color: var(--ad-ink); }
@media (min-width: 700px) { .kueche-kachel figcaption { font-size: var(--ad-lead); } }
.kueche-kachel:hover figcaption, .kueche-kachel:focus-visible figcaption {
  text-decoration: underline; text-underline-offset: 3px; }
.buehne-innen { padding: var(--ad-s8) var(--ad-gutter); text-align: center; }
.buehne-logo { width: min(440px, 88%); margin: 0 auto; }
.buehne-satz { font-family: var(--ad-serif); font-style: italic;
               font-size: var(--ad-h2); line-height: 1.4;
               color: var(--ad-paper); margin-top: var(--ad-s5); }
.tricolore { display: flex; width: 132px; height: 3px; margin: var(--ad-s5) auto; }
.tricolore span { flex: 1; }
.tricolore span:nth-child(1) { background: var(--ad-green); }
.tricolore span:nth-child(2) { background: var(--ad-paper); }
.tricolore span:nth-child(3) { background: var(--ad-red); }
/* Beide Knoepfe gleich breit (Thomas, 27.09.2026): zwei gleiche Spalten,
   auf schmalen Bildschirmen untereinander in voller Breite. */
.buehne-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                  gap: var(--ad-s3); max-width: 30rem; margin: 0 auto; }
.buehne-knoepfe .knopf { display: flex; align-items: center; justify-content: center; }
@media (max-width: 519px) { .buehne-knoepfe { grid-template-columns: 1fr; max-width: 20rem; } }

/* ---------- Karten-Bloecke ---------- */

.zeiten-block { display: grid; gap: var(--ad-s5); grid-template-columns: 1fr; }
.karte-block { background: #fff; border: 1px solid var(--ad-sand); padding: var(--ad-s5); }
.karte-block + .karte-block { margin-top: var(--ad-s5); }
.karte-block h2 { font-family: var(--ad-serif); font-style: italic; font-weight: 400;
                  font-size: var(--ad-h2); color: var(--ad-green); margin-bottom: var(--ad-s3); }

/* Oeffnungszeiten (27.09.2026): je Tagesgruppe eine Zeile, die Schichten
   eines Tages rechts direkt untereinander. */
.zeit-zeile { display: flex; justify-content: space-between; align-items: baseline;
              gap: var(--ad-s4); padding: var(--ad-s3) 0; border-top: 1px solid var(--ad-sand); }
.zeit-zeile:first-child { border-top: 0; }
.zeiten dt { font-weight: var(--ad-w-semibold); }
.zeiten dd { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
             display: flex; flex-direction: column; gap: 2px; }
.ruhetag { font-style: italic; color: var(--ad-grey); }
/* "Heute": nie nur Farbe -- immer das Wort. */
.heute-marke { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 3px;
               font-size: var(--ad-kicker); letter-spacing: .08em; text-transform: uppercase;
               font-weight: var(--ad-w-bold); background: var(--ad-green); color: var(--ad-white); }
.zeiten-liste .zeit-zeile.heute dt, .zeiten-liste .zeit-zeile.heute dd { font-weight: var(--ad-w-bold); }
.zeiten-fuss .zeit-zeile { padding: 4px 0; border-top: 0; }
.zeiten-fuss dt { font-weight: 400; }

/* Tafel auf der Startseite: dunkler Grund wie die Buehne. Papierweiss auf
   Nachtgrund 16 : 1, Grau hell 6,1 : 1. */
.karte-block.tafel { background: var(--ad-night); border-color: var(--ad-night); color: var(--ad-paper); }
.karte-block.tafel h2 { color: var(--ad-paper); margin-bottom: 0; }
.tafel-tricolore { margin: var(--ad-s3) 0 var(--ad-s4); width: 72px; }
.zeiten-tafel .zeit-zeile { border-top-color: var(--ad-night-2); padding: var(--ad-s3) var(--ad-s2);
                            margin: 0 calc(-1 * var(--ad-s2)); }
.zeiten-tafel dt { font-size: var(--ad-kicker); letter-spacing: .1em; text-transform: uppercase;
                   color: var(--ad-grey-up); font-weight: var(--ad-w-bold); max-width: 11em; }
.zeiten-tafel dd { font-size: var(--ad-lead); font-weight: var(--ad-w-semibold); color: var(--ad-paper); }
.zeiten-tafel .ruhetag { color: var(--ad-grey-up); font-weight: 400; }
.zeiten-tafel .zeit-zeile.heute { background: var(--ad-night-2); border-radius: 4px;
                                  border-left: 3px solid var(--ad-paper); }
.zeiten-tafel .zeit-zeile.heute dt { color: var(--ad-paper); }
.zeiten-tafel .zeit-zeile.heute + .zeit-zeile { border-top-color: transparent; }
.zeiten-tafel .heute-marke { display: block; width: max-content; background: var(--ad-paper);
                             color: var(--ad-night); }

.anschrift { line-height: 1.7; }
.signatur { margin-top: var(--ad-s6); font-style: italic; }

/* ---------- Band ---------- */

.band { background: var(--ad-sand); }
.band-titel { font-family: var(--ad-serif); font-style: italic; font-weight: 400;
              font-size: var(--ad-h2); color: var(--ad-green); margin-bottom: var(--ad-s3); }
.band-text { max-width: var(--ad-measure); }

/* ---------- Speisekarte ---------- */

.umschalter { display: inline-flex; border: 2px solid var(--ad-green);
              border-radius: var(--ad-radius); overflow: hidden; margin-bottom: var(--ad-s4); }
.umschalter a { display: block; min-height: 44px; padding: 11px 20px;
                text-decoration: none; font-weight: var(--ad-w-bold);
                font-size: var(--ad-small); color: var(--ad-green); }
.umschalter a.jetzt { background: var(--ad-green); color: #fff; }

.kartenhinweis { color: var(--ad-grey); margin-bottom: var(--ad-s4); }

.sprungmarken { border-top: 1px solid var(--ad-sand);
                border-bottom: 1px solid var(--ad-sand);
                padding: var(--ad-s3) 0; margin-bottom: var(--ad-s6); }
.sprungmarken ul { display: flex; flex-wrap: wrap; gap: var(--ad-s2) var(--ad-s4);
                   list-style: none; }
.sprungmarken a { font-size: var(--ad-small); font-weight: var(--ad-w-semibold);
                  text-decoration: none; }
.sprungmarken a:hover { text-decoration: underline; }

.kat { margin-bottom: var(--ad-s7); scroll-margin-top: 96px; }
/* Bildstreifen ueber jeder Kategorie. Die Datei ist 3:1; auf dem Telefon
   waere das nur gut 100 px hoch, deshalb dort 2:1 aus derselben Datei
   (object-fit schneidet links und rechts). Salat, Panna Cotta und Kaffee
   stehen auf weissem Grund -- der Rand in Sand haelt sie von der Cremeseite ab,
   wie bei den Kacheln auf der Startseite. */
.kat-bild { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1;
            object-fit: cover; border: 1px solid var(--ad-sand);
            border-radius: var(--ad-radius); background: var(--ad-sand);
            margin-bottom: var(--ad-s4); }
@media (min-width: 700px) { .kat-bild { aspect-ratio: 3 / 1; } }
.kat-titel { font-family: var(--ad-serif); font-style: italic; font-weight: 400;
             font-size: var(--ad-h2); color: var(--ad-green); }
.kat-titel::after { content: ""; display: block; width: 52px; height: 2px;
                    background: var(--ad-green); margin-top: var(--ad-s2); }
.kat-groessen { font-size: var(--ad-small); color: var(--ad-grey); margin-top: var(--ad-s3); }

.speisen { list-style: none; margin-top: var(--ad-s4); }
.gruppe { font-size: var(--ad-kicker); letter-spacing: var(--ad-kicker-ls);
          text-transform: uppercase; font-weight: var(--ad-w-bold);
          color: var(--ad-grey); margin: var(--ad-s5) 0 var(--ad-s2); }

.speise { display: flex; gap: var(--ad-s4); align-items: baseline;
          padding: var(--ad-s3) 0; border-bottom: 1px solid var(--ad-sand); }
.speise-text { flex: 1 1 auto; min-width: 0; }
.speise-kopf { display: flex; align-items: baseline; gap: var(--ad-s2); flex-wrap: wrap; }
.speise-nr { color: var(--ad-grey); font-variant-numeric: tabular-nums;
             font-size: var(--ad-small); min-width: 2.2em; }
.speise-name { font-weight: var(--ad-w-bold); }
.speise-einheit { font-weight: 400; color: var(--ad-grey); font-size: var(--ad-small); }
.speise-desc { display: block; color: var(--ad-grey); font-size: var(--ad-small);
               margin-top: 2px; }
.zus { font-size: .78em; vertical-align: super; }

.speise-preise { flex: none; display: flex; gap: var(--ad-s4); text-align: right; }
.preis { font-weight: var(--ad-w-bold); font-variant-numeric: tabular-nums;
         white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }
.preis-label { font-size: var(--ad-kicker); letter-spacing: .06em; text-transform: uppercase;
               color: var(--ad-grey); font-weight: var(--ad-w-semibold); }
.preis-leer { color: var(--ad-grey); font-weight: 400; }
/* Hinweis unter einer Gruppe: "Gerne auch als Saft", "Unsere Eissorten". */
.gruppe-zusatz { list-style: none; font-size: var(--ad-small); color: var(--ad-grey);
                 padding: var(--ad-s2) 0 var(--ad-s3); }

/* Nicht verfuegbar: nie nur blass -- immer mit Wort. */
.speise.nicht-da .speise-name,
.speise.nicht-da .speise-desc,
.speise.nicht-da .preis { opacity: .55; }
.marke-nicht-da {
  font-size: var(--ad-kicker); letter-spacing: .06em; text-transform: uppercase;
  font-weight: var(--ad-w-bold); color: #1F4E8C;
  border: 1px solid #1F4E8C; border-radius: 2px; padding: 1px 6px;
}

.legende-block { border-top: 2px solid var(--ad-sand); padding-top: var(--ad-s5);
                 margin-top: var(--ad-s6); }
.legende-block h2 { font-size: var(--ad-h3); margin-bottom: var(--ad-s2); }
.legende, .fussnote { font-size: var(--ad-small); color: var(--ad-grey); }
.legende + .legende { margin-top: var(--ad-s2); }
.fussnote { margin-top: var(--ad-s5); }

/* ---------- Hinweisfelder ---------- */

.hinweisfeld { background: #fff; border-left: 4px solid var(--ad-green);
               padding: var(--ad-s4); margin-bottom: var(--ad-s5); font-size: var(--ad-small); }
.hinweisfeld.warnung { border-left-color: #A8761C; }
.hinweisfeld ul { margin: var(--ad-s2) 0 0 var(--ad-s5); }

/* ---------- Fuss ---------- */

.fuss { background: var(--ad-night); color: var(--ad-paper); margin-top: var(--ad-s8); }
.fuss-innen { display: grid; gap: var(--ad-s6); padding: var(--ad-s7) var(--ad-gutter); }
.fuss-logo { width: 200px; }
.fuss-titel { font-size: var(--ad-h3); margin-bottom: var(--ad-s3); color: var(--ad-paper); }
.fuss-text, .fuss .zeiten, .fuss-liste { font-size: var(--ad-small); color: var(--ad-grey-up); }
.fuss-text { margin-top: var(--ad-s4); line-height: 1.7; }
.fuss-liste { list-style: none; display: grid; gap: var(--ad-s2); }
.fuss a { color: var(--ad-paper); }
/* Hinweise: geschlossen / geaenderte Oeffnungszeiten (Thomas, 27.09.2026).
   Muss auffallen, ohne dass die Aussage an einer Farbe haengt: Die Bedeutung
   tragen das Wort ("Geschlossen", "Geaenderte Oeffnungszeiten"), der Titel und
   das Symbol. Der warme Grund und der breite dunkle Rand holen nur den Blick.
   Tiefschwarz auf #FFF4D6: 17 : 1. */
.hinweise-gross { padding-top: var(--ad-s6); }
.hinweise-gross + .zeiten-block { padding-top: var(--ad-s5); }
.hinweis { display: flex; gap: var(--ad-s4); align-items: flex-start;
           background: #FFF4D6; color: var(--ad-ink);
           border: 2px solid var(--ad-ink); border-left-width: 8px; border-radius: var(--ad-radius);
           padding: var(--ad-s5); }
.hinweis + .hinweis { margin-top: var(--ad-s4); }
.hinweis-symbol { flex: none; width: 36px; height: 36px; margin-top: 2px; }
.hinweis-art { font-size: var(--ad-kicker); letter-spacing: var(--ad-kicker-ls);
               text-transform: uppercase; font-weight: var(--ad-w-bold); }
.hinweis-titel { font-family: var(--ad-serif); font-style: italic; font-weight: 400;
                 font-size: var(--ad-h1); line-height: var(--ad-h1-lh);
                 color: var(--ad-ink); margin: var(--ad-s1) 0 var(--ad-s2); }
.hinweis-text { font-size: var(--ad-lead); line-height: var(--ad-lead-lh);
                font-weight: var(--ad-w-semibold); max-width: var(--ad-measure); }
.hinweis-zusatz { margin-top: var(--ad-s2); max-width: var(--ad-measure); }
.hinweise-kompakt { margin: 0 0 var(--ad-s5); }
.hinweise-kompakt .hinweis { padding: var(--ad-s4); }
.hinweise-kompakt .hinweis-titel { font-size: var(--ad-h2); line-height: var(--ad-h2-lh); }
.hinweise-kompakt .hinweis-text { font-size: var(--ad-body); }
@media (max-width: 519px) {
  .hinweis { padding: var(--ad-s4); gap: var(--ad-s3); }
  .hinweis-symbol { width: 28px; height: 28px; }
}
/* Gilt heute ein Hinweis, steht er auch in der Heute-Markierung der Zeiten. */
.zeit-zeile.heute-anders .heute-marke { background: #FFF4D6; color: var(--ad-ink);
                                        outline: 1px solid var(--ad-ink); }
.zeiten-tafel .zeit-zeile.heute-anders .heute-marke { outline: 0; }

.fuss-unten { border-top: 1px solid var(--ad-night-2); padding: var(--ad-s4) var(--ad-gutter);
              font-size: var(--ad-kicker); letter-spacing: .08em; text-transform: uppercase;
              color: var(--ad-grey-up); }

/* ---------- Groessere Bildschirme ---------- */

@media (min-width: 700px) {
  .zeiten-block { grid-template-columns: repeat(3, 1fr); }
  .portrait { float: right; width: 38%; margin: var(--ad-s1) 0 var(--ad-s4) var(--ad-s5); }
  .nach-portrait { clear: both; }
  .karte-block + .karte-block { margin-top: 0; }
  .fuss-innen { grid-template-columns: 1.4fr 1fr 1fr; }
  .speise-preise { gap: var(--ad-s6); }
  .preis { min-width: 74px; }
}

@media (max-width: 699px) {
  :root { --ad-h1: 1.7rem; --ad-h2: 1.25rem; }
  .kopf-innen { gap: var(--ad-s3); }
  .kopf-logo { width: 140px; }
  .kopf-telefon { order: 3; width: 100%; }
  .navi { flex: 1 1 100%; order: 4; }
  .navi ul { gap: var(--ad-s3) var(--ad-s4); }
  /* Telefon (Thomas, 27.09.2026): Preise rechtsbuendig. Ein einzelner Preis
     bleibt neben dem Namen stehen; drei Pizzapreise passen nicht daneben und
     rutschen in die naechste Zeile -- dort ebenfalls nach rechts. */
  .speise { flex-wrap: wrap; gap: var(--ad-s2) var(--ad-s3); }
  .speise-text { flex: 1 1 55%; }
  .speise-preise { margin-left: auto; justify-content: flex-end; gap: var(--ad-s5); }
  /* Feste Breite je Preis: sonst verrutscht die Spalte, sobald ein Preis
     zweistellig ist (10,00 EUR), und klein/mittel/gross stehen nicht untereinander. */
  .preis { align-items: flex-end; min-width: 4.6em; }
  /* Nach der Nummer wird bestellt -- vor allem bei der Mitnahmekarte am Telefon.
     Deshalb gross und hinterlegt. Die Farbe traegt keine Bedeutung, sie macht
     die Nummer nur auffindbar (Weiss auf Gruen 5,4 : 1). */
  /* Nummer und Name in einer Zeile: ein langer Name bricht neben der Nummer um,
     statt die Nummer allein in einer Zeile stehen zu lassen. */
  .speise-kopf { flex-wrap: nowrap; }
  .speise-name { flex: 1 1 auto; min-width: 0; }
  .speise-nr { flex: none; background: var(--ad-green); color: var(--ad-white);
               font-size: 1rem; font-weight: var(--ad-w-bold); line-height: 1.5;
               min-width: 2.4em; padding: 0 .35em; border-radius: 4px;
               text-align: center; align-self: baseline; }
}

/* ---------- Drucken der Website (nicht die Druckvorlagen!) ---------- */

@media print {
  .kopf, .fuss, .sprungmarken, .umschalter, .knopf, .sprung,
  .kat-bild { display: none !important; }   /* Fotos kosten Tinte; zum Drucken gibt es die Druckvorlage */
  body { background: #fff; }
  .speise { break-inside: avoid; }
}