/* ==========================================================================
   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 {
  --farbe-text: #2e2e2e;
  --farbe-akzent: #a89069;      /* Gold der Untertitel in Schreibschrift, Wert der Originalseite */
  --farbe-hell: #f8f9f9;        /* heller Abschnitt-Hintergrund */
  --farbe-dunkel: #141414;      /* dunkler Abschnitt-Hintergrund (.weiss) */
  --farbe-schwarz: #000;
  --farbe-fussnote: #c7c7c7;
  --breite: 1170px;

  /* Schriftfamilien exakt wie auf der Live-Seite deklariert.
     Die Live-Seite laedt diese Schriften nicht nach, deshalb greift beim
     Besucher dieselbe Ersatzschrift wie hier. */
  --schrift-titel: Montserrat;
  --schrift-text: 'PT Sans';
  --schrift-schreib: 'Kaushan Script';
}

*, *::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; }

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 18px;
  color: var(--farbe-text);
  background: #fff;
  overflow-x: hidden;
}

p { line-height: 2em; margin: 0 0 10px; }
b, strong { color: inherit; font-weight: bold; }

a {
  color: inherit;
  text-decoration: underline;
  transition: all .5s;
}
a:hover, a:focus { color: #5a5a5a; }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--schrift-titel);
  font-weight: 500;
  color: var(--farbe-text);
}
h1 { font-size: 42px; }
h2 { font-size: 24px; margin-top: 40px; }
h3 { font-size: 21px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }

.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: 75px;
  z-index: 30;
  color: #fff;
  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: 150px; height: 150px; }
.logo-sticky { display: none; }
.logo-sticky img { width: 120px; height: 120px; }

.site-header.sticky {
  position: fixed;
  background: #fff;
  box-shadow: 1px 0 4px rgba(0, 0, 0, .15);
  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: 500;
  font-size: 14px;
  line-height: 30px;
  padding: 20px 20px 30px;
  color: #fff;
  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: #000; }

/* Menueknopf fuer schmale Bildschirme */
.burger {
  display: none;
  background: none;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: #fff;
  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: #000; }

/* --- Kopfbild (Hero) --------------------------------------------------- */
/* Aufbau wie im Original: ein 650 Pixel hoher Inhaltsbereich, senkrecht
   mittig im Bild, die Elemente sitzen an festen Abstaenden von dessen Oberkante. */
.hero {
  position: relative;
  height: 100vh;
  min-height: 650px;
  background: #141414 center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  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%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 650px;
}
.hero-title {
  font-family: var(--schrift-schreib);
  font-weight: normal;
  font-size: 85px;
  line-height: 100px;
  margin: 0;
  color: #fff;
  position: absolute;
  top: 140px;
  left: 50%;
  transform: translateX(-50%);
  width: 875px;
  max-width: 100%;
}
.hero-text {
  font-family: var(--schrift-text);
  font-size: 20px;
  line-height: 27px;
  margin: 0;
  position: absolute;
  top: 266px;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  max-width: 100%;
}
.hero-buttons {
  position: absolute;
  top: 380px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* --- Schaltflaechen ---------------------------------------------------- */
.btn {
  display: inline-block;
  background-color: var(--farbe-schwarz);
  color: #fff;
  border: solid 2px #fff;
  border-radius: 7px;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: 12px;
  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: #fff;
  color: #000 !important;
  border: solid 2px #000;
}
.btn-sm { font-size: 11px; padding: 9px 21px; }
.btn-lg { font-size: 15px; padding: 15px 37px; line-height: 18px; }
.btn-hero { background-color: rgba(0, 0, 0, .75); }

/* --- 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-schreib);
  color: var(--farbe-akzent) !important;
  display: block;
  font-size: inherit;
  font-style: normal;
  font-weight: 400;
  line-height: 1em;
  margin-top: -.48em;
  text-transform: none;
  position: absolute;
  top: 100%;
  left: 50%;
  white-space: nowrap;
}

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

/* 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: #fff; }
.weiss h1, .weiss h2, .weiss h3, .weiss h4, .weiss h5, .weiss h6 { color: #bfbfbf; }
.weiss a, .weiss a:hover, .weiss a:focus { color: #fff; }

.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: #fff;
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, .03);
  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; }
/* Das Slogan-Zeichen sitzt als kleines Zeichen oben links in der weissen
   Textspalte, mit Luft ringsum. Im Fotofeld ginge die schwarze
   Strichzeichnung im dunklen Bild unter, und das Fotofeld schneidet
   ausserdem alles ab, was ueber seine Kante hinausragt. */
.featured-large_logo { position: absolute; left: 24px; top: 22px; }
.featured-large_content { position: relative; padding: 30px 60px; width: 100%; text-align: center; }
.featured-large_title {
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 1.3em;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
}
.featured-large_subtitle {
  font-family: var(--schrift-schreib);
  color: var(--farbe-akzent) !important;
  font-size: 60px;
  font-style: normal;
  font-weight: 400;
  line-height: 1em;
  margin-top: -.48em;
  position: absolute;
  left: 50%;
  top: 100%;
  white-space: nowrap;
  text-transform: none;
}
.featured-large_text { color: #616161; font-size: 18px; }
.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%;
}

/* --- Bild im Kreis mit Lupe (Pressebild) ------------------------------- */
.bild-kreis {
  display: block;
  width: 330px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #ebebeb;
  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: 18px;
  margin: 0;
  text-transform: uppercase;
}
.food-item_divider { position: relative; width: 100%; }
.food-item_divider::after {
  background-image: linear-gradient(90deg, #c5c5c5 30%, transparent 30%);
  background-size: 7px 2px;
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 100%;
}
.food-item_price {
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: 18px;
  margin: 10px 0 0;
  padding-left: 6px;
}
.food-item_text { color: #8f8f8f; font-size: 16px; margin-top: 6px; white-space: normal; }

/* --- Info-Tabelle (Kontaktseite) --------------------------------------- */
.info-table {
  border: 0;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .12);
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.info-table th, .info-table td {
  border-bottom: 1px solid #e5e5e5;
  padding: 16px 23px;
  vertical-align: middle;
  text-align: left;
}
.info-table th {
  border-right: 1px solid #e5e5e5;
  font-weight: 400;
  text-align: center;
  width: 63px;
  color: #5a5a5a;
}
.info-table td { color: #000; }
.info-table td strong { color: #898989; font-weight: 400; }
.info-table a { color: var(--farbe-text); text-decoration: underline; }
.info-table a:hover, .info-table a:focus { color: #5a5a5a; }

/* 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: 16px;
  padding: 12px 15px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background: #fff;
  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: #2e2e2e;
  font-size: 15px;
  margin-top: 4px;
}
.kontakt-formular .zustimmung { font-weight: normal; font-size: 16px; line-height: 1.6; }
.kontakt-formular .zustimmung input { width: auto; margin-right: 8px; }
.formular-meldung {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 4px;
  font-size: 16px;
}
.formular-meldung-fehler { background: var(--farbe-dunkel); color: #fff; border: 2px solid var(--farbe-akzent); }
.formular-meldung-ok { background: #efefef; color: #2e2e2e; border: 2px solid #2e2e2e; }
.formular-meldung-hinweis { background: #efefef; color: #2e2e2e; 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: 16px;
  text-align: center;
  padding-bottom: 80px;
}
.footer-logo { padding-top: 35px; }
.footer-logo img { width: 150px; height: 150px; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.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: #fff;
  border-radius: 50%;
  color: #1a1a1a;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: 18px;
}
.social a:hover { background-color: #2b2b2b; color: #fff; }

/* --- Cookie-Hinweis ---------------------------------------------------- */
.cookie-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  color: #000;
  padding: 12px 10px;
  z-index: 60;
  font-family: var(--schrift-text);
  font-size: 15px;
  /* PT Sans liegt als 400 und 700 im Projekt. Ein angefordertes 300 gibt es
     nicht; der Browser rechnet es sich selbst zurecht. */
  font-weight: 400;
  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: 13px;
  font-weight: 400;
  line-height: 1.42857;
  text-transform: none;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  color: #fff;
  background-color: #000;
  cursor: pointer;
}
.cookie-bar .cookie-knopf-zweit { background-color: #333; }
.cookie-bar .cookie-knopf:hover,
.cookie-bar .cookie-knopf:focus { color: #fff; opacity: .85; }
.cookie-einstellungen-link { color: #000; font-size: 13px; margin-left: 6px; }

.cookie-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cookie-dialog[hidden] { display: none; }
.cookie-dialog-inhalt {
  background: #fff;
  color: #2e2e2e;
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 4px;
  padding: 25px 30px 30px;
  text-align: left;
  font-size: 15px;
}
.cookie-dialog-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 10px;
}
.cookie-dialog-kopf h2 { margin: 0; font-size: 20px; }
.cookie-schliessen {
  background: none;
  border: 0;
  font-size: 15px;
  cursor: pointer;
  text-decoration: underline;
  font-family: var(--schrift-text);
}
.cookie-gruppe { border-bottom: 1px solid #e5e5e5; padding: 14px 0; }
.cookie-gruppe h3 { margin: 0 0 6px; font-size: 17px; }
.cookie-gruppe p { font-size: 14px; line-height: 1.7; margin: 6px 0 0; }
.cookie-gruppe label { font-family: var(--schrift-text); font-size: 15px; }
.cookie-immer { color: #8f8f8f; font-size: 14px; }
.cookie-dialog-fuss { margin-top: 18px; text-align: right; }

/* --- Bild-Grossansicht (Lightbox) -------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  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: #fff;
  font-family: var(--schrift-text);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

/* --- Kleinere Bildschirme ---------------------------------------------- */
@media (max-width: 1199px) {
  .featured-large { padding: 0 20px; }
  .featured-large_image { display: none; }
  .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: #171717;
    border-left: 1px solid #000;
    box-shadow: inset -1px 0 3px 3px rgba(0, 0, 0, .75);
    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: 1px solid #292929; }
  .main-menu > li > a {
    display: block;
    padding: 14px 4px;
    color: #fff !important;
    font-size: 15px;
  }
  .menue-schatten {
    position: fixed;
    inset: 0;
    background: #000;
    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; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .hero-title, .hero-text, .hero-buttons {
    position: static;
    transform: none;
    left: auto; right: auto; top: auto;
    width: 100%;
  }
  .hero-title { font-size: 60px; line-height: 1.1; }
  .hero-text { margin-top: 24px; }
  .hero-buttons { margin-top: 32px; }
  .logo-wrap img { width: 110px; height: 110px; }
}

@media (max-width: 767px) {
  body { font-size: 17px; }
  h1 { font-size: 30px; }
  .hero-title { font-size: 30px; }
  .hero-text { font-size: 19px; }
  .featured-large { padding: 0; }
  .featured-large_content { padding: 20px; }
  .featured-large_title { font-size: 28px; }
  .featured-large_subtitle { font-size: 40px; }
  .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 { padding: 50px 0; }
  .logo-wrap img { width: 90px; height: 90px; }
}

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

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

.allergen-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 75;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.allergen-dialog[hidden] { display: none; }
.allergen-inhalt {
  background: #fff;
  color: var(--farbe-text);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 4px;
  padding: 22px 26px 26px;
  text-align: left;
}
.allergen-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 10px;
}
.allergen-kopf h2 { margin: 0; font-size: 19px; }
.allergen-schliessen {
  background: none;
  border: 0;
  font-family: var(--schrift-text);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--farbe-text);
}
.allergen-vorwort { font-size: 15px; line-height: 1.7; margin: 14px 0 6px; }
.allergen-liste { list-style: none; margin: 0; padding: 0; }
.allergen-liste li {
  font-size: 16px;
  padding: 7px 0;
  border-bottom: 1px solid #f0f0f0;
}
.allergen-buchstabe {
  display: inline-block;
  min-width: 30px;
  margin-right: 8px;
  padding: 2px 7px;
  text-align: center;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: 14px;
  background: #efefef;
  border-radius: 4px;
}
/* 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: #fff;
}
.allergen-fuss { font-size: 14px; color: #8f8f8f; 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: #000;
  color: #fff;
  border-radius: 7px;
  padding: 7px 16px;
  text-decoration: none;
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: 13px;
  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: #fff; }
.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;
  font-size: 19px;
  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 {
  font-size: 8.5px;
  line-height: 1.25;
  letter-spacing: .2px;
}
.app-eigen small {
  display: block;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .4px;
  color: #bbb;
  text-transform: uppercase;
}
.app-abzeichen .app-eigen > span { align-self: center; }