/* ==========================================================================
   DENIS Kebap — Website-Gestaltung
   Nachbau der Live-Seite denis-kebap.at ohne WordPress.
   Alle Farben, Groessen und Abstaende stammen aus dem Original-Theme "Kebab"
   und der dort hinterlegten eigenen CSS-Anpassung.
   ========================================================================== */

/* --- Grundwerte -------------------------------------------------------- */
:root {
  /* Schrift auf hellem Grund: euer Dunkel #141414, nicht mehr #2e2e2e. */
  --farbe-text: var(--farbe-dunkel);
  /* Schrift auf dunklem Grund: das Beige selbst. Dadurch steckt der Seitenton
     auch in der Schrift, und er folgt dem einen Schalter weiter unten. */
  --farbe-auf-dunkel: var(--farbe-grund);
  --farbe-akzent: #a89069;      /* Gold der Untertitel in Schreibschrift, Wert der Originalseite */
  /* DER EINE SCHALTER fuer den Seitenton. Hier drehen, und die ganze
     Website folgt: Grund, Kopfleiste, Karten, Tabellen, Eingabefelder,
     Cookie-Leiste und Dialoge lesen diesen Wert. Vorher stand das Weiss
     an zehn Stellen hart im CSS, eine Farbaenderung war dadurch zehn
     Aenderungen. */
  --farbe-grund: #f1efe7;       /* <== HIER DREHEN. Sonst nichts. */

  /* Was auf dem Grund liegt, rechnet sich aus ihm: derselbe Farbton, nur
     heller. Dadurch genuegt eine Zeile fuer die ganze Website. Die erste
     Zeile ist der Rueckfall fuer aeltere Browser und ist der belegte Wert
     #F6F5F0; die zweite ueberschreibt sie, wo color-mix bekannt ist. */
  --farbe-flaeche: #f6f5f0;
  --farbe-flaeche: color-mix(in srgb, var(--farbe-grund) 62%, #fff);
  --farbe-hell: var(--farbe-flaeche);   /* ruhiger Abschnitt */
  --farbe-dunkel: #141414;      /* dunkler Abschnitt-Hintergrund (.weiss) */
  --farbe-schwarz: #000;
  /* Die uebrigen belegten Toene, alle aus marke.md. Auch die stehen jetzt
     hier und nicht verstreut im Text. */
  --farbe-fussnote: #c7c7c7;         /* Text im Fussbereich */
  --farbe-neben: #8f8f8f;            /* Nebentext auf hellem Grund */
  --farbe-neben-dunkel: #bfbfbf;     /* Nebentext und Ueberschrift auf dunkel */
  --farbe-vorstellung: #616161;      /* Absatz im Vorstellungsblock */
  --farbe-verweis-darueber: #5a5a5a; /* Verweis, Maus darueber */
  --farbe-symbol: #1a1a1a;           /* Buchstabe im runden Fuss-Symbol */
  --farbe-symbol-darueber: #2b2b2b;  /* rundes Fuss-Symbol, Maus darueber */
  /* Der eine Linienschalter. Ruhe und Betonung sind diese Farbe,
     Auswahl ist ein eigener Ton. Seit 22.09.2026: Ruhe 1 px, Betonung
     und Auswahl 2 px. Die harte Kante einer hellen Karte ist keine
     Linienstaerke: 3 px unten und rechts, Weichzeichner 0. */
  --farbe-linie: #dcdbc9;
  --farbe-auswahl: #1d1c1c;
  --linie-ruhe: 1px;                 /* Rahmen, Trennlinie, Abschnitt, Zeile */
  --linie-betonung: 2px;             /* dieselbe Farbe, wo eine Linie hervorhebt */
  --linie-auswahl: 2px;              /* mit --farbe-auswahl */
  --karte-kante: 3px 3px 0 0 var(--farbe-linie);
  --farbe-schublade: #171717;        /* Hintergrund der Menue-Schublade */
  --farbe-sinnbild: #efefef;         /* Sinnbild-Flaeche, Meldungen */
  /* Flaeche des zweiten Cookie-Knopfes: kein eigener Ton, sondern unser
     Schwarz mit einem Schuss Beige. Rueckfall zuerst. */
  --farbe-knopf-zweit: #333;
  --farbe-knopf-zweit: color-mix(in srgb, var(--farbe-schwarz) 80%, var(--farbe-auf-dunkel));
  --breite: 1170px;

  /* --- Schrift: geschaltet, nicht gesetzt ---------------------------
     Nach DenisKebapDesign-Skill (marke.md, "Handwerk"): Schriftart,
     Schnitt und Grad stehen NUR hier. Jede Regel weiter unten liest diese
     Schalter, kein Wert steht im Seitentext. Die Handy-Stufen unten setzen
     den Schalter um, nicht jede Regel einzeln.
     Zwei Markenschriften, keine dritte: PT Sans ist seit 23.09.2026 weg,
     der Fliesstext laeuft in Montserrat. --schrift-text zeigt deshalb auf
     dieselbe Familie wie der Titel. */
  --schrift-titel: Montserrat, Helvetica, Arial, sans-serif;
  --schrift-text: var(--schrift-titel);
  --schrift-gold: 'Kaushan Script', var(--schrift-titel);  /* nur goldene Unterzeile */

  --schnitt-text: 400;          /* Fliesstext, Formulare; auch Kaushan */
  --schnitt-titel: 500;         /* Ueberschriften, Menue, Knoepfe, Preise */
  --schnitt-stark: 700;         /* Vorstellungstitel, Hervorhebung im Text */

  /* Grade der Website (marke.md, "Groessen der Website"). */
  --grad-kopfbild: 85px;        /* Titel im Kopfbild, Schreibschrift */
  --grad-unterzeile: 60px;      /* goldene Unterzeile zum Vorstellungstitel */
  --grad-vorstellung: 48px;     /* Vorstellungstitel, Montserrat 700 */
  --grad-h1: 42px;
  --grad-zeile-zahl: 36px;      /* hervorgehobene Zahl im Text */
  --grad-kreuz: 30px;           /* Schliesskreuz in Dialog und Grossansicht */
  --grad-zeile-gross: 28px;     /* hervorgehobene Zeile im Text */
  --grad-h2: 24px;
  --grad-zeile-mittel: 24px;    /* hervorgehobene Ortsangabe */
  --grad-h3: 21px;
  --grad-kopfbild-text: 20px;   /* Text im Kopfbild */
  --grad-dialog-titel: 20px;    /* Ueberschrift in Cookie- und Allergenfenster */
  --grad-text: 18px;            /* Fliesstext, Zeilenabstand 2em */
  --grad-h4: 18px;              /* auch Gerichtname und Preis */
  --grad-h5: 16px;
  --grad-klein: 16px;           /* Beschreibung, Eingabefeld, Fussbereich, Meldung */
  --grad-fein: 15px;            /* Hinweis, Cookie-Leiste, Pflicht-Links, Schublade */
  --grad-knopf-gross: 15px;     /* Knopf im Kopfbild */
  --grad-menue: 14px;           /* Menuepunkt in Versalien */
  --grad-mini: 14px;            /* Kleingedrucktes in Dialogen */
  --grad-winzig: 13px;          /* Cookie-Knopf, Allergenbuchstabe */
  --grad-knopf: 12px;           /* Knopf am Ende eines Abschnitts */
  --grad-knopf-klein: 11px;     /* Nebenwege, Kartenlink */
  --grad-app: 19px;             /* Aufschrift Web-App-Abzeichen */
  --grad-app-klein: 8.5px;      /* Kleinzeile Web-App-Abzeichen, wie Apple/Google */

  /* Wiederkehrende Rundungen */
  --radius-knopf: 7px;          /* Website-Knopf und Web-App-Abzeichen */
  --radius-feld: 4px;           /* Eingabefeld, Meldung, Dialog, Menueknopf */

  /* Sprungmarken muessen unter der klebenden Logo-Kugel landen, nicht nur
     unter der 75px-Leiste. Die Kugel haengt unten ueber. */
  --kopf-hoehe: 75px;           /* Hoehe der Kopfleiste */
  --logo-gross: 150px;          /* Logo in Kopf und Fuss */
  --logo-klebend: 120px;        /* Logo in der klebenden Leiste */
  /* Sprungmarken muessen unter der klebenden Kugel landen. Derselbe Wert,
     deshalb derselbe Schalter -- vorher zwei Zahlen, die auseinanderlaufen
     konnten. */
  --kopf-logo-klebend: var(--logo-klebend);
}

*, *::before, *::after { box-sizing: border-box; }

/* Knoepfe und Eingabefelder erben die Schrift der Seite, sonst nimmt der
   Browser Arial. */
button, input, select, textarea { font-family: inherit; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--kopf-logo-klebend);
}

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-weight: var(--schnitt-text);
  font-size: var(--grad-text);
  color: var(--farbe-text);
  background: var(--farbe-grund);
  overflow-x: clip;
}

p { line-height: 2em; margin: 0 0 10px; }
b, strong { color: inherit; font-weight: var(--schnitt-stark); }
/* Hervorhebung ohne Bedeutungswechsel, statt <b> im Seitentext. */
.stark { font-weight: var(--schnitt-stark); }

a {
  color: inherit;
  text-decoration: underline;
  transition: all .5s;
}
a:hover, a:focus { color: var(--farbe-verweis-darueber); }

img { max-width: 100%; height: auto; border: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--schrift-titel);
  font-weight: var(--schnitt-titel);
  color: var(--farbe-text);
}
h1 { font-size: var(--grad-h1); }
h2 { font-size: var(--grad-h2); margin-top: 40px; }
h3 { font-size: var(--grad-h3); }
h4 { font-size: var(--grad-h4); }
h5 { font-size: var(--grad-h5); }

.container {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 15px;
}

.mitte { text-align: center; }

/* --- Kopfbereich ------------------------------------------------------- */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--kopf-hoehe);
  z-index: 30;
  color: var(--farbe-auf-dunkel);
  transition: background .3s ease-in-out;
}
.site-header .container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 100%;
}

.logo { position: relative; z-index: 2; }
.logo a { display: block; text-decoration: none; }
.logo-img { display: block; }
.logo-wrap img { width: var(--logo-gross); height: var(--logo-gross); }
.logo-sticky { display: none; }
.logo-sticky img { width: var(--logo-klebend); height: var(--logo-klebend); }

.site-header.sticky {
  position: fixed;
  background: var(--farbe-flaeche);
  box-shadow: 1px 0 4px rgba(0, 0, 0, .15);
  box-shadow: 1px 0 4px color-mix(in srgb, var(--farbe-schwarz) 15%, transparent);
  color: var(--farbe-text);
}
.site-header.sticky .logo-wrap { display: none; }
.site-header.sticky .logo-sticky { display: block; }
.site-header.sticky .main-menu > li > a { color: var(--farbe-text); }

/* Hauptmenue */
.site-navigation { margin-top: 5px; }
.main-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.main-menu > li > a {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: var(--schnitt-titel);
  font-size: var(--grad-menue);
  line-height: 30px;
  padding: 20px 20px 30px;
  color: var(--farbe-auf-dunkel);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.main-menu > li > a:hover,
.main-menu > li > a:focus { color: var(--farbe-akzent); }
/* Ueber dem Kopfbild steht der Menuepunkt auf fast schwarzem Grund, dort
   traegt Gold. In der festgeklebten weissen Kopfleiste nicht: 3,06 zu 1 bei
   14 Pixel. Dort wird beim Darueberfahren abgedunkelt. */
.site-header.sticky .main-menu > li > a:hover,
.site-header.sticky .main-menu > li > a:focus { color: var(--farbe-schwarz); }

/* Menueknopf fuer schmale Bildschirme */
.burger {
  display: none;
  background: none;
  border: 1px solid currentColor;
  border-radius: var(--radius-feld);
  color: var(--farbe-auf-dunkel);
  width: 39px;
  height: 39px;
  padding: 10px;
  margin-top: 18px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 100%;
  height: 16.66%;
  margin-bottom: 16.66%;
  background: currentColor;
  transition: all .4s;
}
.burger span:last-child { margin-bottom: 0; }
.site-header.sticky .burger { color: var(--farbe-text); }

/* --- Kopfbild (Hero) --------------------------------------------------- */
/* Aufbau wie im Original: ein 650 Pixel hoher Inhaltsbereich, senkrecht
   mittig im Bild. Titel, Text und Knoepfe stehen untereinander im Fluss,
   mit denselben Abstaenden wie im Original (Titel ab 140, Text ab 266,
   Knoepfe bei dreizeiligem Text ab 380). Frueher sassen sie absolut an
   festen Hoehen; seit der Fliesstext in Montserrat laeuft (breiter als
   PT Sans), wird ein Kopfbildtext vierzeilig und lag dann unter dem Knopf.
   Im Fluss rutschen die Knoepfe mit. */
.hero {
  position: relative;
  height: 100vh;
  min-height: 650px;
  background: var(--farbe-dunkel) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--farbe-auf-dunkel);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(2, 2, 2, .9) 0%, rgba(2, 2, 2, .1) 65%, rgba(2, 2, 2, .1) 100%);
  background: linear-gradient(color-mix(in srgb, var(--farbe-schwarz) 90%, transparent) 0%,
              color-mix(in srgb, var(--farbe-schwarz) 10%, transparent) 65%,
              color-mix(in srgb, var(--farbe-schwarz) 10%, transparent) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 650px;
  padding-top: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-title {
  font-family: var(--schrift-gold);
  font-weight: var(--schnitt-text);
  font-size: var(--grad-kopfbild);
  line-height: 100px;
  margin: 0;
  color: var(--farbe-auf-dunkel);
  width: 875px;
  max-width: 100%;
}
.hero-text {
  font-family: var(--schrift-text);
  font-size: var(--grad-kopfbild-text);
  line-height: 27px;
  margin: 26px 0 0;
  width: 640px;
  max-width: 100%;
}
.hero-buttons {
  margin-top: 33px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* --- Schaltflaechen ---------------------------------------------------- */
.btn {
  display: inline-block;
  background-color: var(--farbe-schwarz);
  color: var(--farbe-auf-dunkel);
  border: solid 2px var(--farbe-auf-dunkel);
  border-radius: var(--radius-knopf);
  font-family: var(--schrift-titel);
  font-weight: var(--schnitt-titel);
  font-size: var(--grad-knopf);
  padding: 11px 28px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover, .btn:focus {
  background-color: var(--farbe-auf-dunkel);
  color: var(--farbe-text) !important;
  border: solid 2px var(--farbe-schwarz);
}
.btn-sm { font-size: var(--grad-knopf-klein); padding: 9px 21px; }
.btn-lg { font-size: var(--grad-knopf-gross); padding: 15px 37px; line-height: 18px; }
.btn-hero {
  background-color: rgba(0, 0, 0, .75);
  background-color: color-mix(in srgb, var(--farbe-schwarz) 75%, transparent);
}

/* --- Ueberschrift mit Untertitel --------------------------------------- */
/* Lange Woerter und Internetadressen duerfen die Seite nicht seitlich
   aufziehen. Ohne das entsteht auf schmalen Bildschirmen ein weisser
   Streifen rechts, und die Seite laesst sich zur Seite schieben. */
p, li, td, dd, a, .heading, .heading-subtitle {
  overflow-wrap: break-word;
}

.heading {
  position: relative;
  padding-bottom: .3em;
  margin: 0;
}
.heading > span { display: inline-block; position: relative; padding: 0; }
.heading-middle { text-align: center; }
.heading-subtitle {
  font-family: var(--schrift-gold);
  color: var(--farbe-akzent) !important;
  display: block;
  font-size: inherit;
  font-style: normal;
  font-weight: var(--schnitt-text);
  line-height: 1em;
  margin-top: -.48em;
  text-transform: none;
  text-decoration: none;
  position: absolute;
  top: 100%;
  left: 50%;
  white-space: nowrap;
}

/* --- Abschnitte -------------------------------------------------------- */
.abschnitt { padding: 80px 0; }
.abschnitt-hell { background-color: var(--farbe-hell); padding: 80px 0; }

/* Im Original bewegt sich das Hintergrundbild beim Scrollen leicht mit.
   Hier bleibt es fest am Abschnitt, damit es auf jedem Gerät zuverlaessig
   an der richtigen Stelle sitzt. */
.parallax {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* dunkle Abschnitte, im Original "weiss" genannt */
.weiss { background: var(--farbe-dunkel); }
.weiss p { color: var(--farbe-auf-dunkel); }
.weiss h1, .weiss h2, .weiss h3, .weiss h4, .weiss h5, .weiss h6 { color: var(--farbe-neben-dunkel); }
.weiss a, .weiss a:hover, .weiss a:focus { color: var(--farbe-auf-dunkel); }

.raster { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.spalte-3 { width: 25%; padding: 0 15px; }
.spalte-4 { width: 33.3333%; padding: 0 15px; }
.spalte-5 { width: 41.6667%; padding: 0 15px; }
.spalte-7 { width: 58.3333%; padding: 0 15px; }
.spalte-6 { width: 50%; padding: 0 15px; }
.spalte-8 { width: 66.6667%; padding: 0 15px; }
.raster-mitte { align-items: center; }

.abstand-20 { height: 20px; }
.abstand-30 { height: 30px; }
.abstand-40 { height: 40px; }

/* --- Vorstellungsblock "DENIS Kebap" ----------------------------------- */
.featured-large { padding: 0 120px; }
.featured-large_wrap {
  background-color: var(--farbe-flaeche);
  box-shadow: var(--karte-kante);
  display: table;
  width: 100%;
}
.featured-large_image, .featured-large_content {
  display: table-cell;
  vertical-align: middle;
}
.featured-large_image { position: relative; }
.featured-large_image > img { max-width: none; display: block; }
.featured-large_logo { position: absolute; left: 301px; top: -20px; transform: translateX(-50%); }
.featured-large_logo img { width: 60px; height: 100px; max-width: none; display: block; }
.featured-large_content { padding: 30px 60px; width: 100%; text-align: center; }
.featured-large_title {
  font-size: var(--grad-vorstellung);
  font-weight: var(--schnitt-stark);
  margin: 0 0 1.3em;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
}
.featured-large_subtitle {
  font-family: var(--schrift-gold);
  color: var(--farbe-akzent) !important;
  font-size: var(--grad-unterzeile);
  font-style: normal;
  font-weight: var(--schnitt-text);
  line-height: 1em;
  margin-top: -.48em;
  position: absolute;
  left: 50%;
  top: 100%;
  white-space: nowrap;
  text-transform: none;
}
.featured-large_text { color: var(--farbe-vorstellung); font-size: var(--grad-text); }
.featured-large_button { margin-top: 50px; }

/* --- Slogan-Zeichen "SO MUSS DOENER" ----------------------------------- */
/* Das Band ist ein Zeichen, kein Motiv: Hoehe 40 bis 64, Richtwert 48,
   hoechstens einmal je Seite. Es gibt zwei Fassungen, und die Fassung
   richtet sich nach dem Untergrund, nicht die Farbe: so-muss-doener.png
   auf hellem Grund, so-muss-doener-2.png auf dunklem. Nie einfaerben. */
.slogan-icon {
  display: inline-block;
  height: 48px;
  width: auto;
  max-width: 100%;
}

/* --- Hervorgehobene Zeilen -------------------------------------------- */
/* Standen als style="font-size:..px" fest im Seitentext von Startseite und
   Kontaktseite. Feste Werte dort hebeln die Handy-Regeln dieser Datei aus --
   in diesem Projekt sind daraus schon zweimal Fehler entstanden. Deshalb als
   Klasse, und am Handy eine Stufe kleiner. */
.zeile-gross { font-size: var(--grad-zeile-gross); }
.zeile-mittel { font-size: var(--grad-zeile-mittel); }
.zeile-zahl { font-size: var(--grad-zeile-zahl); }

/* --- Abschnitt mit Trennlinie oben ------------------------------------ */
/* Stand frueher fest im Seitentext der Speisekarte. */
.abschnitt-mit-linie { padding: 40px 0 60px; border-top: var(--linie-ruhe) solid var(--farbe-linie); }

/* --- Ueberschrift direkt auf einem Foto ------------------------------- */
/* Im dunklen Abschnitt sind Ueberschriften #BFBFBF. Liegt eine direkt auf
   einem Foto, braucht sie mehr Helligkeit. Bisher stand dafuer
   style="color:#ffffff" fest im Seitentext. Jetzt nimmt sie den Schriftton
   fuer dunklen Grund, also das Beige, und folgt damit dem Schalter. */
.weiss .heading-auf-foto { color: var(--farbe-auf-dunkel); }

/* --- Kasten auf einem Foto -------------------------------------------- */
/* Der Oeffnungszeiten-Kasten liegt auf einem Foto und braucht einen halb
   durchscheinenden Grund. Vorher stand er als rgba(255,255,255,.62) fest im
   Seitentext und blieb dadurch weiss, egal was der Schalter oben sagt.
   Jetzt nimmt er den Seitenton mit derselben Deckkraft. Erste Zeile
   Rueckfall fuer aeltere Browser. */
.kasten-auf-foto {
  padding: 20px;
  border-radius: 15px;
  background: rgba(241, 239, 231, .62);
  background: color-mix(in srgb, var(--farbe-grund) 62%, transparent);
}

/* --- Fotos mit eingebackenem Weiss ------------------------------------- */
/* Das Muenzen-Foto hat einen weissen Studiogrund in der Datei selbst, alle
   vier Ecken gemessen #ffffff. Auf einem warmen Seitengrund stand es dadurch
   als helles Rechteck da. "multiply" rechnet das Weiss gegen den Grund:
   Weiss mal Grund ergibt genau den Grund, dunkle Bildstellen aendern sich um
   Faktor 0,984 und damit unsichtbar. Das Foto selbst bleibt unangetastet --
   kein Retuschieren, keine zweite Fassung. Auf weissem Grund macht die Regel
   nichts, weil Weiss mal Weiss wieder Weiss ist, sie ist also in beiden
   Faellen richtig. Nur fuer Fotos verwenden, die wirklich Weiss eingebacken
   haben, und nie ueber einem Hintergrundbild. */
.foto-weisser-grund { mix-blend-mode: multiply; }

/* --- Bild im Kreis mit Lupe (Pressebild) ------------------------------- */
.bild-kreis {
  display: block;
  width: 330px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: var(--linie-ruhe) solid var(--farbe-linie);
  padding: 0;
  background: none;
  cursor: zoom-in;
}
.bild-kreis img { display: block; border-radius: 50%; }

/* --- Speisekarte ------------------------------------------------------- */
.food-menu > * + * { margin-top: 40px; }
.food-item_header { display: table; white-space: nowrap; width: 100%; }
.food-item_header > * { display: table-cell; }
.food-item_title {
  font-size: var(--grad-h4);
  margin: 0;
  text-transform: uppercase;
}
.food-item_divider { position: relative; width: 100%; }
.food-item_divider::after {
  background-image: linear-gradient(90deg, var(--farbe-linie) 30%, transparent 30%);
  background-size: 7px var(--linie-ruhe);
  bottom: 0;
  content: "";
  height: var(--linie-ruhe);
  left: 0;
  position: absolute;
  width: 100%;
}
.food-item_price {
  font-family: var(--schrift-titel);
  font-weight: var(--schnitt-titel);
  font-size: var(--grad-h4);
  margin: 10px 0 0;
  padding-left: 6px;
}
.food-item_text { color: var(--farbe-neben); font-size: var(--grad-klein); margin-top: 6px; white-space: normal; }

/* --- Info-Tabelle (Kontaktseite) --------------------------------------- */
.info-table {
  border: 0;
  box-shadow: var(--karte-kante);
  width: 100%;
  border-collapse: collapse;
  background: var(--farbe-flaeche);
}
.info-table th, .info-table td {
  border-bottom: var(--linie-ruhe) solid var(--farbe-linie);
  padding: 16px 23px;
  vertical-align: middle;
  text-align: left;
}
.info-table th {
  border-right: var(--linie-ruhe) solid var(--farbe-linie);
  font-weight: var(--schnitt-text);
  text-align: center;
  width: 63px;
  color: var(--farbe-verweis-darueber);
}
.info-table td { color: var(--farbe-text); }
.info-table td strong { color: var(--farbe-neben); font-weight: var(--schnitt-text); }
.info-table a { color: var(--farbe-text); text-decoration: underline; }
.info-table a:hover, .info-table a:focus { color: var(--farbe-verweis-darueber); }

/* Symbole in der Info-Tabelle */
.symbol { display: inline-block; width: 25px; height: 25px; line-height: 25px; }
.symbol-app {
  background-image: url(../img/app_klein.png);
  background-size: 25px 25px;
  background-repeat: no-repeat;
}

/* --- Kontaktformular --------------------------------------------------- */
.kontakt-formular .form-group { margin-bottom: 20px; }
.kontakt-formular input[type="text"],
.kontakt-formular input[type="email"],
.kontakt-formular textarea {
  width: 100%;
  max-width: 100%;
  font-family: var(--schrift-text);
  font-size: var(--grad-klein);
  padding: 12px 15px;
  border: var(--linie-ruhe) solid var(--farbe-linie);
  border-radius: var(--radius-feld);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
}
.kontakt-formular textarea { min-height: 200px; resize: vertical; }
.kontakt-formular input[type="text"].feld-schmal,
.kontakt-formular input[type="email"].feld-schmal { max-width: 58.33%; }
.kontakt-formular input.fehlerhaft,
.kontakt-formular textarea.fehlerhaft { border-color: var(--farbe-akzent); }
.kontakt-formular .feld-hinweis {
  display: block;
  /* Kleiner Hinweis unter einem Eingabefeld: nie Gold auf hellem Grund.
     Der goldene Rahmen am Feld zeigt weiterhin, wo es hakt. */
  color: var(--farbe-text);
  font-size: var(--grad-fein);
  margin-top: 4px;
}
.kontakt-formular .zustimmung { font-weight: var(--schnitt-text); font-size: var(--grad-klein); line-height: 1.6; }
.kontakt-formular .zustimmung input { width: auto; margin-right: 8px; }
.formular-meldung {
  /* Abstand fuer scrollIntoView, damit die klebende Cookie-Leiste die
     Bestaetigung nicht verdeckt. */
  scroll-margin-bottom: 170px;
  scroll-margin-top: 110px;
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: var(--radius-feld);
  font-size: var(--grad-klein);
}
.formular-meldung-fehler { background: var(--farbe-dunkel); color: var(--farbe-auf-dunkel); border: 2px solid var(--farbe-akzent); }
.formular-meldung-ok { background: var(--farbe-sinnbild); color: var(--farbe-text); border: 2px solid var(--farbe-text); }
.formular-meldung-hinweis { background: var(--farbe-sinnbild); color: var(--farbe-text); border: 2px solid var(--farbe-akzent); }
.versteckt { position: absolute; left: -9999px; }

/* --- Fussbereich ------------------------------------------------------- */
.site-footer {
  background-color: var(--farbe-schwarz);
  color: var(--farbe-fussnote);
  font-size: var(--grad-klein);
  text-align: center;
  padding-bottom: 80px;
}
.footer-logo { padding-top: 35px; }
.footer-logo img { width: var(--logo-gross); height: var(--logo-gross); }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--farbe-auf-dunkel); }
/* Pflichtangaben im Fussbereich. Das Impressum muss in Oesterreich leicht
   und unmittelbar auffindbar sein; eine Seite, die nirgends verlinkt ist,
   erfuellt das nicht. Schlicht gehalten, in der Fussnotenfarbe. */
.footer-recht {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  font-size: var(--grad-fein);
  line-height: 2em;
}
.footer-recht li { display: inline-block; }
.footer-recht li + li::before { content: "·"; margin: 0 10px; opacity: .6; }
.footer-recht a { text-decoration: underline; }

/* Die Cookie-Leiste klebt unten am Fenster und deckte am Handy genau diese
   Zeile zu -- die Pflicht-Links waren nicht antippbar. Solange die Leiste
   sichtbar ist, macht der Fussbereich Platz. Die Leiste wird per hidden
   ein- und ausgeschaltet (assets/js/site.js), deshalb greift :has hier.
   Browser ohne :has zeigen den Grundabstand, deshalb ist der am Handy
   ohnehin groesser. */
body:has(.cookie-bar:not([hidden])) .site-footer { padding-bottom: 150px; }

.social { list-style: none; margin: 25px 0 0; padding: 0; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--farbe-auf-dunkel);
  border-radius: 50%;
  color: var(--farbe-symbol);
  font-family: var(--schrift-titel);
  font-weight: var(--schnitt-titel);
  font-size: var(--grad-h4);
}
.social a:hover { background-color: var(--farbe-symbol-darueber); color: var(--farbe-auf-dunkel); }

/* --- Cookie-Hinweis ---------------------------------------------------- */
.cookie-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  padding: 12px 10px;
  z-index: 60;
  font-family: var(--schrift-text);
  font-size: var(--grad-fein);
  /* Nur die Schnitte der Marke anfordern: ein 300 gibt es nicht. */
  font-weight: var(--schnitt-text);
  line-height: 1.6;
  text-align: center;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { display: inline; margin: 0; }
.cookie-bar .cookie-aktionen { display: inline; }
.cookie-bar .cookie-knopf {
  display: inline-block;
  margin: 5px;
  padding: 9px 12px;
  font-family: var(--schrift-text);
  font-size: var(--grad-winzig);
  font-weight: var(--schnitt-text);
  line-height: 1.42857;
  text-transform: none;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  color: var(--farbe-auf-dunkel);
  background-color: var(--farbe-schwarz);
  cursor: pointer;
}
.cookie-bar .cookie-knopf-zweit { background-color: var(--farbe-knopf-zweit); }
.cookie-bar .cookie-knopf:hover,
.cookie-bar .cookie-knopf:focus { color: var(--farbe-auf-dunkel); opacity: .85; }
.cookie-einstellungen-link { color: var(--farbe-text); font-size: var(--grad-winzig); margin-left: 6px; }

.cookie-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  background: color-mix(in srgb, var(--farbe-schwarz) 60%, transparent);
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cookie-dialog[hidden] { display: none; }
.cookie-dialog-inhalt {
  background: var(--farbe-flaeche);
  box-shadow: var(--karte-kante);
  color: var(--farbe-text);
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: var(--radius-feld);
  padding: 25px 30px 30px;
  text-align: left;
  font-size: var(--grad-fein);
}
.cookie-dialog-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--linie-ruhe) solid var(--farbe-linie);
  padding-bottom: 10px;
}
.cookie-dialog-kopf h2 { margin: 0; font-size: var(--grad-dialog-titel); }
.cookie-schliessen {
  background: none;
  border: 0;
  font-size: var(--grad-fein);
  cursor: pointer;
  text-decoration: underline;
  font-family: var(--schrift-text);
}
.cookie-gruppe { border-bottom: var(--linie-ruhe) solid var(--farbe-linie); padding: 14px 0; }
.cookie-gruppe h3 { margin: 0 0 6px; font-size: var(--grad-h4); }
.cookie-gruppe p { font-size: var(--grad-mini); line-height: 1.7; margin: 6px 0 0; }
.cookie-gruppe label { font-family: var(--schrift-text); font-size: var(--grad-fein); }
.cookie-immer { color: var(--farbe-neben); font-size: var(--grad-mini); }
.cookie-dialog-fuss { margin-top: 18px; text-align: right; }

/* --- Bild-Grossansicht (Lightbox) -------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  background: color-mix(in srgb, var(--farbe-schwarz) 85%, transparent);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 90vh; display: block; }
.lightbox-schliessen {
  position: absolute;
  top: 18px; right: 24px;
  background: none;
  border: 0;
  color: var(--farbe-auf-dunkel);
  font-family: var(--schrift-text);
  font-size: var(--grad-kreuz);
  line-height: 1;
  cursor: pointer;
}

/* --- Kleinere Bildschirme ---------------------------------------------- */
@media (max-width: 1199px) {
  .featured-large { padding: 0 20px; }
  .featured-large_wrap {
    display: flex;
    flex-direction: column-reverse;
  }
  .featured-large_image,
  .featured-large_content { display: block; }
  .featured-large_image {
    max-width: 304px;
    margin: 0 auto;
  }
  .featured-large_image > img {
    max-width: 100%;
    height: auto;
  }
  .featured-large_logo { left: 100%; }
  .featured-large_content { padding: 20px 40px; }
}

@media (max-width: 991px) {
  /* Auf schmalen Bildschirmen steht jede Spalte allein untereinander.
     Ohne das liegen auf der Kontaktseite Adressblock und Formular
     uebereinander. */
  .spalte-3, .spalte-4, .spalte-5, .spalte-6, .spalte-7, .spalte-8 { width: 100%; }
  .spalte-4 + .spalte-4, .spalte-6 + .spalte-6, .spalte-8 + .spalte-4,
  .spalte-5 + .spalte-7 { margin-top: 40px; }
  .spalte-3:empty, .spalte-4:empty { display: none; }
  .kontakt-formular .feld-schmal { max-width: 100%; }
  .food-menu, .menu-header { text-align: center; }
  .food-item_header { display: block; white-space: normal; }
  .food-item_header > * { display: block; }
  .food-item_divider { display: none; }
  .food-item_price { padding-left: 0; margin-top: 4px; }

  /* Menue als Schublade von rechts */
  .burger { display: block; }
  .site-navigation .mobile-wrap {
    position: fixed;
    top: 0; bottom: 0;
    right: -290px;
    width: 290px;
    background: var(--farbe-schublade);
    border-left: var(--linie-ruhe) solid var(--farbe-linie);
    box-shadow: inset -1px 0 3px 3px rgba(0, 0, 0, .75);
    box-shadow: inset -1px 0 3px 3px color-mix(in srgb, var(--farbe-schwarz) 75%, transparent);
    padding: 70px 20px 20px 15px;
    transition: right .2s, visibility .2s;
    overflow-y: auto;
    z-index: 40;
    visibility: hidden;
  }
  .site-navigation .mobile-wrap.menue-offen { right: 0; visibility: visible; }
  .main-menu { display: block; }
  .main-menu > li { border-bottom: var(--linie-ruhe) solid var(--farbe-linie); }
  .main-menu > li > a {
    display: block;
    padding: 14px 4px;
    color: var(--farbe-auf-dunkel) !important;
    font-size: var(--grad-fein);
  }
  .menue-schatten {
    position: fixed;
    inset: 0;
    background: var(--farbe-schwarz);
    opacity: .3;
    /* Muss unter der Kopfleiste liegen. Die Menue-Schublade steckt in der
       Kopfleiste, und die hat z-index 30. Lag die Abdeckung darueber, ging
       jeder Fingertipp auf einen Menuepunkt an die Abdeckung statt an den
       Verweis, und das Menue schloss sich nur. */
    z-index: 25;
  }
  .menue-schatten[hidden] { display: none; }
}

@media (max-width: 991px) {
  /* Auf schmalen Bildschirmen steht der Text mittig untereinander,
     so wie es das Original auf dem Handy macht. */
  .hero { height: auto; min-height: 100vh; padding: 100px 18px 60px; }
  .hero-inner { height: auto; padding-top: 0; justify-content: center; }
  .hero-title, .hero-text, .hero-buttons { width: 100%; }
  :root { --grad-kopfbild: 60px; }
  .hero-title { line-height: 1.1; }
  .hero-text { margin-top: 24px; }
  .hero-buttons { margin-top: 32px; }
  :root { --logo-gross: 110px; --logo-klebend: 110px; }
}

@media (max-width: 767px) {
  :root {
    --grad-text: 17px;
    --grad-h1: 30px;
    --grad-kopfbild: 30px;
    --grad-kopfbild-text: 19px;
    --grad-vorstellung: 30px;
    --grad-unterzeile: 40px;
    --grad-zeile-gross: 24px;
    --grad-zeile-mittel: 20px;
    --grad-zeile-zahl: 30px;
  }
  .featured-large { padding: 0; }
  .featured-large_content { padding: 20px; }
  .heading > span { display: block; max-width: 100%; }
  .heading-subtitle {
    position: static; left: auto; margin-top: 0; white-space: normal; display: block;
    /* Die Schreibschrift wird auf schmalen Bildschirmen mitverkleinert,
       damit ein langes Wort wie "Geschenktipp" hineinpasst. */
    font-size: min(1em, 8vw);
    max-width: 100%;
  }
  .abschnitt,
  .abschnitt-hell { padding: 50px 0; }

  .site-footer { padding-bottom: 130px; }
  :root { --logo-gross: 90px; --logo-klebend: 90px; }
}

/* --- Allergenbuchstaben ------------------------------------------------ */
.allergen-marke {
  background: none;
  border: 0;
  padding: 0 0 0 4px;
  font-family: var(--schrift-text);
  font-size: var(--grad-winzig);
  color: var(--farbe-neben);
  cursor: pointer;
  text-decoration: underline;
  text-transform: none;
  vertical-align: baseline;
}
.allergen-marke:hover, .allergen-marke:focus { color: var(--farbe-text); }

.allergen-alle {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--schrift-text);
  font-size: var(--grad-klein);
  color: var(--farbe-text);
  text-decoration: underline;
  cursor: pointer;
}
.allergen-alle:hover, .allergen-alle:focus { color: var(--farbe-text); }

.allergen-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  background: color-mix(in srgb, var(--farbe-schwarz) 60%, transparent);
  z-index: 75;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.allergen-dialog[hidden] { display: none; }
.allergen-inhalt {
  background: var(--farbe-flaeche);
  box-shadow: var(--karte-kante);
  color: var(--farbe-text);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: var(--radius-feld);
  padding: 22px 26px 26px;
  text-align: left;
}
.allergen-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: var(--linie-ruhe) solid var(--farbe-linie);
  padding-bottom: 10px;
}
.allergen-kopf h2 { margin: 0; font-size: var(--grad-dialog-titel); }
.allergen-schliessen {
  background: none;
  border: 0;
  font-family: var(--schrift-text);
  font-size: var(--grad-kreuz);
  line-height: 1;
  cursor: pointer;
  color: var(--farbe-text);
}
.allergen-vorwort { font-size: var(--grad-fein); line-height: 1.7; margin: 14px 0 6px; }
.allergen-liste { list-style: none; margin: 0; padding: 0; }
.allergen-liste li {
  font-size: var(--grad-klein);
  padding: 7px 0;
  border-bottom: var(--linie-ruhe) solid var(--farbe-linie);
}
.allergen-buchstabe {
  display: inline-block;
  min-width: 30px;
  margin-right: 8px;
  padding: 2px 7px;
  text-align: center;
  font-family: var(--schrift-titel);
  font-weight: var(--schnitt-titel);
  font-size: var(--grad-mini);
  background: var(--farbe-sinnbild);
  border-radius: var(--radius-feld);
}
/* Wurde ein einzelnes Gericht angeklickt, treten dessen Buchstaben hervor. */
.allergen-gefiltert .allergen-liste li { opacity: .35; }
.allergen-gefiltert .allergen-liste li.allergen-treffer { opacity: 1; }
.allergen-gefiltert .allergen-treffer .allergen-buchstabe {
  background: var(--farbe-dunkel);
  color: var(--farbe-auf-dunkel);
}
.allergen-fuss { font-size: var(--grad-mini); color: var(--farbe-neben); margin-top: 16px; }

/* --- App-Abzeichen ------------------------------------------------------ */
.app-abzeichen {
  text-align: center;
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.app-abzeichen a { display: inline-block; text-decoration: none; }
.app-abzeichen img {
  height: 52px;
  width: auto;
  display: block;
  transition: opacity .2s;
}
.app-abzeichen a:hover img,
.app-abzeichen a:focus img { opacity: .8; }

/* Drittes Abzeichen fuer die Web-App, im gleichen Zuschnitt wie die
   Abzeichen von Apple und Google. */
.app-eigen {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--farbe-schwarz);
  color: var(--farbe-auf-dunkel);
  border-radius: var(--radius-knopf);
  padding: 7px 16px;
  text-decoration: none;
  font-family: var(--schrift-titel);
  font-weight: var(--schnitt-titel);
  font-size: var(--grad-app);
  line-height: 1.25;
  white-space: nowrap;
  transition: opacity .2s;
}
.app-eigen > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.app-eigen:hover, .app-eigen:focus { opacity: .8; color: var(--farbe-auf-dunkel); }
.app-abzeichen .app-eigen img { height: 34px; width: 34px; border-radius: 5px; flex: 0 0 auto; }
.app-abzeichen .app-eigen {
  display: inline-flex;
  height: 52px;
  width: 161px;
  padding: 0 9px;
  gap: 7px;
  line-height: 1.05;
}
/* Zeichen und Schrift so gross, dass sie den Kasten ausfuellen wie bei
   den Abzeichen von Apple und Google. */
.app-abzeichen .app-eigen small {
  line-height: 1.25;
  letter-spacing: .2px;
}
.app-eigen small {
  display: block;
  font-size: var(--grad-app-klein);
  font-weight: var(--schnitt-text);
  line-height: 1.3;
  letter-spacing: .4px;
  color: var(--farbe-neben-dunkel);
  text-transform: uppercase;
}
.app-abzeichen .app-eigen > span { align-self: center; }