/* ==========================================================================
   bibraud – Relaunch Kohlgasse 6 / Maison Meissner (August 2026)
   Wird NACH restaurant.css geladen und überschreibt gezielt Farben,
   Schriften und Buttons. restaurant.css bleibt unangetastet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften (lokal gehostet, kein Google-CDN -> DSGVO-konform)
   -------------------------------------------------------------------------- */

/* Forum – seit August 2026 nicht mehr im Einsatz, die Seite läuft
   durchgehend auf Open Sauce Sans. Die @font-face-Blöcke bleiben stehen,
   damit die Serife notfalls mit einer Zeile zurückkommt; ungenutzte
   Schriften lädt der Browser nicht herunter. */
@font-face {
  font-family: 'Forum';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/forum-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Forum';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/forum-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Open Sauce Sans – Fließtext, Navigation, Buttons */
@font-face {
  font-family: 'Open Sauce Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/open-sauce-sans-latin-400-normal.woff') format('woff');
}
@font-face {
  font-family: 'Open Sauce Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../fonts/open-sauce-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sauce Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../../fonts/open-sauce-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sauce Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../fonts/open-sauce-sans-latin-700-normal.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Farbpalette
   -------------------------------------------------------------------------- */
:root {
  --bb-green:        #b0bb9e;  /* Hintergrund */
  --bb-green-dark:   #9aa686;  /* Trennlinien, Hover-Flächen */
  --bb-red:          #490a0a;  /* Überschriften, Footer */
  --bb-text:         #5c1717;  /* Fließtext – etwas heller als #490a0a */
  --bb-rose:         #f6cbd3;  /* Akzent / Klickelemente */
  --bb-rose-ink:     #a85b6c;  /* Rosa dunkel genug für Text auf Grün */
  /* Farbe der eingeblendeten Menüleiste: rgba(0,0,0,.75) über #b0bb9e.
     Der Footer nimmt exakt diesen Wert auf. */
  --bb-dark:         #2c2f27;
  --color-primary:        #490a0a;
  --color-gradient-start: #490a0a;
  --color-gradient-stop:  #490a0a;
}

/* --------------------------------------------------------------------------
   3. Grundtypografie
   -------------------------------------------------------------------------- */
body {
  font-family: 'Open Sauce Sans', 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.6em;
  color: var(--bb-text);
  background-color: var(--bb-green);
}

/* Ein Schriftschnitt für die ganze Seite: Open Sauce Sans, Überschriften
   durchgehend in Versalien. Zwei Anpassungen gehören zwingend dazu –
   Versalien in einer Grotesk brauchen Laufweite, sonst verklumpen sie, und
   sie bauen optisch grösser als die schmale Forum-Serife vorher, weshalb
   die Punktgrössen rund 15 % niedriger liegen. */
.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6 {
  font-family: 'Open Sauce Sans', 'Roboto', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-red);
}

h1, .h1 { font-size: 46px; line-height: 1.2em; }
h2, .h2 { font-size: 36px; line-height: 1.2em; }
h3, .h3 { font-size: 25px; line-height: 1.3em; }
h4, .h4 { font-size: 22px; line-height: 1.3em; }
h5, .h5 { font-size: 18px; line-height: 1.35em; color: var(--bb-red); }
h6, .h6 { font-size: 16px; line-height: 1.45em; color: var(--bb-text); font-weight: 500; }

@media screen and (min-width: 768px) {
  .fancy-title h2 { font-size: 44px; line-height: 1.2em; }
}
@media screen and (max-width: 767px) {
  h1, .h1 { font-size: 32px; }
  h2, .h2 { font-size: 26px; }
  h3, .h3 { font-size: 20px; }
  h4, .h4 { font-size: 18px; }
  body    { font-size: 15px; }
}

p { color: var(--bb-text); }
b, strong { font-weight: 600; }

/* --------------------------------------------------------------------------
   4. Flächen
   -------------------------------------------------------------------------- */
#content { background-color: var(--bb-green); }
#content .vc_row { background-color: var(--bb-green); }

/* Zeilen, die ein Hintergrundbild tragen, bleiben transparent */
#content .vc_row.bb-photo-full,
#content .vc_row[data-row-bg],
#content .vc_row[style*="background-image"] { background-color: transparent; }

hr { border-color: var(--bb-green-dark); }

/* --------------------------------------------------------------------------
   5. Links & Buttons
   -------------------------------------------------------------------------- */
/* Fließtext-Links liegen ruhig im Satz: keine Linie im Normalzustand,
   erst beim Überfahren erscheint eine feine rosa Unterstreichung. */
#content a:not(.btn):not(.bb-btn) {
  color: var(--bb-red);
  text-decoration: none;
  transition: text-decoration-color .25s ease;
}
#content a:not(.btn):not(.bb-btn):hover,
#content a:not(.btn):not(.bb-btn):focus-visible {
  color: var(--bb-red);
  text-decoration: underline;
  text-decoration-color: var(--bb-rose);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Rosa Flächen-Button – ersetzt die alten weissen Inline-Buttons.
   Rosa auf Grün trägt als Fläche deutlich besser als als dünner Rahmen. */
.bb-btn {
  display: inline-block;
  padding: 15px 38px;
  border: 1.5px solid var(--bb-rose);
  border-radius: 0;
  background-color: var(--bb-rose);
  color: var(--bb-red) !important;
  font-family: 'Open Sauce Sans', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.bb-btn:hover,
.bb-btn:focus {
  background-color: transparent;
  border-color: var(--bb-red);
  color: var(--bb-red);
  text-decoration: none;
}

/* Heller Button auf dunklem Foto (Hero, Parallax) */
.bb-btn-on-photo {
  border-color: rgba(255, 255, 255, .85);
  color: #fff;
}
.bb-btn-on-photo:hover,
.bb-btn-on-photo:focus {
  background-color: var(--bb-rose);
  border-color: var(--bb-rose);
  color: var(--bb-red);
}

/* --------------------------------------------------------------------------
   6. Header / Navigation
   -------------------------------------------------------------------------- */
.main-nav > li > a {
  font-family: 'Open Sauce Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
}
.main-nav > li.is-active > a,
.main-nav > li:hover > a,
.main-nav > li > a:hover { color: var(--bb-rose); }

.reservieren-button { border-color: rgba(255, 255, 255, .8) !important; }
.main-nav > li:hover .reservieren-button { border-color: var(--bb-rose) !important; }

/* Nicht anfassen: Die -15px Aussenmargins von .mainbar-row sind Absicht –
   sie ziehen die Kopfleiste über das Innenpadding des .container-fluid hinaus,
   damit sie randlos über die volle Breite läuft. Setzt man sie auf 0, rückt
   die Leiste ein und es entstehen seitliche Lücken. */

/* Mobile Kopfleiste: Das Theme-Schema "gray" liefert #f6f6f6. Statt dessen
   dieselbe dunkle Farbe wie Footer und eingeblendete Menüleiste.
   WICHTIG: Nur unterhalb des Mobil-Breakpoints (data-mobile-nav-breakpoint="1279").
   Ohne die Media Query legt sich die dunkle Fläche auch am Desktop
   als Kasten hinter die Navigation. */
@media screen and (max-width: 1279px) {
  [data-mobile-header-scheme=gray] .main-header .navbar-header {
    background-color: var(--bb-dark);
  }
  [data-mobile-header-scheme=gray] .main-header .ld-module-trigger,
  [data-mobile-header-scheme=gray] .main-header .lqd-mobile-modules-container .social-icon a,
  [data-mobile-header-scheme=gray] .main-header .lqd-mobile-modules-container .social-icon a:hover {
    color: #fff !important;
  }

  /* Burger-Symbol hell */
  .navbar-toggle .bars .bar { background-color: #fff; }

  /* Ausklappbares Menü in derselben dunklen Farbe.
     Das Attribut heisst im Markup "data-mobile-nav-shceme" (Tippfehler des
     Themes) – beide Schreibweisen abdecken. */
  [data-mobile-nav-shceme=gray] .navbar-collapse,
  [data-mobile-nav-scheme=gray] .navbar-collapse {
    background-color: var(--bb-dark);
    color: #fff;
  }
  [data-mobile-nav-shceme=gray] ul.nav.main-nav > li > a,
  [data-mobile-nav-scheme=gray] ul.nav.main-nav > li > a { color: rgba(255, 255, 255, .85); }
  [data-mobile-nav-shceme=gray] ul.nav.main-nav > li:hover > a,
  [data-mobile-nav-scheme=gray] ul.nav.main-nav > li > a:hover { color: var(--bb-rose); }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
/* Die Höhe des Heros verwaltet das Theme selbst (fullheight) – hier nicht
   dagegenhalten, das setzt sich ohnehin nicht durch. */
.bb-hero { position: relative; }

/* Der grüne Salon ist hell. Das weisse Logo braucht deshalb eine spürbare
   Abdunklung – oben und unten stärker (Navigation, Adresse), in der Mitte
   etwas offener, damit das Foto sichtbar bleibt. */
.bb-hero .liquid-row-overlay {
  opacity: 1 !important;
  background: linear-gradient(180deg,
              rgba(24, 28, 20, .58) 0%,
              rgba(24, 28, 20, .40) 45%,
              rgba(24, 28, 20, .44) 72%,
              rgba(24, 28, 20, .60) 100%) !important;
}

/* Über die Höhe gesteuert, nicht über die Breite – bei 4.7:1 ergibt das
   rund 377 px Breite. Kein max-width: bei fester Höhe würde die Breite
   dadurch gekappt, ohne dass die Höhe mitgeht, die Marke würde also
   gestaucht. Schmale Bildschirme regelt stattdessen der Media-Query. */
.bb-hero .bb-hero-logo {
  height: 80px;
  width: auto;
  filter: drop-shadow(0 3px 22px rgba(0, 0, 0, .55));
}
.bb-hero .bb-hero-address {
  font-family: 'Open Sauce Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}
@media screen and (max-width: 767px) {
  /* 48 px Höhe ≈ 226 px Breite – passt auch auf 320 px schmale Geräte. */
  .bb-hero .bb-hero-logo { height: 48px; }
  .bb-hero .lqd-space { height: 0 !important; }
}

/* --------------------------------------------------------------------------
   8. Foto-Bänder
   -------------------------------------------------------------------------- */

/* Hochformat: mittig, ungeschnitten, auf grünem Grund */
.bb-photo-portrait { padding: 0 0 0 0; }
.bb-photo-portrait figure { margin: 0; }
.bb-photo-portrait img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 0 auto;
}

/* Querformat: randlos über die volle Breite, mit Parallax */
.bb-photo-full {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 60vh;
}
@media screen and (max-width: 1024px) {
  /* iOS unterstützt background-attachment: fixed nicht zuverlässig */
  .bb-photo-full { background-attachment: scroll; min-height: 45vh; }
}

/* Hochformat randlos: Foto 6 (Bistro) ------------------------------------
   Ein 60vh-Band schneidet aus einem 1067x1330-Hochformat nur einen schmalen
   Streifen heraus – die Person wäre auf Kopfhöhe abgeschnitten. Dieses Band
   leitet seine Höhe deshalb aus der Breite ab (68vw entspricht dem Ausschnitt
   von der Wand bis zu den Füßen). 68vw ist die Untergrenze, damit der Kopf
   auch auf breiten, flachen Monitoren komplett im Bild bleibt: sichtbar sind
   immer rund 700 der 1330 Bildzeilen. Eine Deckelung in vh darf es nicht
   geben, sonst schneidet ein flacher Viewport den Kopf wieder ab. Das Band
   scrollt mit, statt fixiert zu stehen, sonst bliebe der Ausschnitt trotz der
   Höhe viewporthoch. */
.bb-photo-portrait-full {
  background-attachment: scroll;
  background-position: center bottom;
  min-height: 68vw;
}
@media screen and (max-width: 1024px) {
  /* Im Hochformat des Handys passt das Bild fast vollständig ins Band. */
  .bb-photo-portrait-full { min-height: 65vh; }
}

/* Porträt neben dem Fließtext ("Das Team") --------------------------------
   Ab Desktop ist die Zeile ein Flex-Container, die beiden Spalten sind
   dadurch gleich hoch. Die Figur liegt absolut in der Fotospalte: so zählt
   ihre Eigenhöhe nicht mit, die Zeilenhöhe kommt allein vom Text – das Foto
   folgt ihm, egal wie lang er wird. object-fit: cover schneidet die
   überstehende Höhe weg, der Fokus liegt bei 60 % der Bildhöhe, wo die drei
   stehen; weggeschnitten werden also Wand oben und Boden unten. */
.bb-team-figure { margin: 0; }
.bb-team-figure img { display: block; width: 100%; height: auto; }

@media screen and (min-width: 992px) {
  .bb-team-row { display: flex; align-items: stretch; }
  /* Die Clearfix-Pseudoelemente von .row müssen im Flex-Kontext raus, sonst
     zählen sie als eigene Flex-Kinder und reissen eine Lücke auf. */
  .bb-team-row:before,
  .bb-team-row:after { display: none; }
  .bb-team-text { padding-right: 40px; }

  .bb-team-photo { position: relative; }
  .bb-team-figure {
    position: absolute;
    top: 0;
    bottom: 0;
    /* 15px = Innenabstand der Bootstrap-Spalte, damit das Bild im Raster bleibt */
    left: 15px;
    right: 15px;
  }
  .bb-team-figure img {
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
  }
}
@media screen and (max-width: 991px) {
  /* Gestapelt gibt es keinen Text daneben – das Foto steht ungeschnitten. */
  .bb-team-photo { margin-top: 45px; }
  .bb-team-figure {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   9. Inhaltsabschnitte
   -------------------------------------------------------------------------- */
.bb-section { padding-top: 110px; padding-bottom: 110px; }
@media screen and (max-width: 767px) {
  .bb-section { padding-top: 65px; padding-bottom: 65px; }
}

/* Der Vorspann jedes Abschnitts steht in Versalien und eng gesetzt – er
   liest sich als Zwischenüberschrift, nicht als Fließtext.
   Die zweite Selektorzeile ist die Variante für die Zeile über der
   Überschrift ("Jetzt neu · Kohlgasse 6 · …"). Sie steht bewusst in
   derselben Regel, damit beide nie auseinanderlaufen; font-weight und
   letter-spacing heben die kleine, weit gesperrte Auszeichnung von
   .bb-eyebrow wieder auf. */
.bb-lead,
.bb-eyebrow.bb-eyebrow-lead {
  font-size: 21px;
  line-height: 1.2em;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--bb-red);
  text-transform: uppercase;
}
@media screen and (max-width: 767px) {
  .bb-lead,
  .bb-eyebrow.bb-eyebrow-lead { font-size: 18px; }
}

.bb-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-family: 'Open Sauce Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bb-rose-ink);
}

.bb-note {
  font-size: 15px;
  line-height: 1.7em;
  opacity: .85;
}

/* float: none ist zwingend – .bb-measure sitzt auf denselben Elementen wie
   col-xs-12, und Bootstrap 3 floatet Spalten nach links. Ein gefloatetes
   Element ignoriert margin:auto, der Textblock rutscht dann aus der Mitte. */
.bb-measure {
  float: none;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Auf dem Handy sind die 15px des Themes zu knapp – der Text klebt am Rand.
   Achtung: Die Spalten müssen col-xs-* heissen (Bootstrap 3), sonst fehlt
   ihnen das ausgleichende Padding und der Text ragt über den Container. */
@media screen and (max-width: 575px) {
  #content .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* --------------------------------------------------------------------------
   10. Öffnungszeiten
   -------------------------------------------------------------------------- */

/* Tag links, Zeit rechts – als Paar auf einer Zeile statt als lange
   Liste untereinander. Die Spalten richten sich an der Mitte aus. */
.bb-hours {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: baseline;
  column-gap: 45px;
  row-gap: 18px;
  margin: 0;
  text-align: left;
}
/* Die Wochentage und die Beschriftung "Reservierungszeiten" darunter tragen
   dieselbe Auszeichnung. Gemeinsame Regel, damit sie es auch bleiben – die
   Ausrichtung im Raster kommt separat, sie gilt nur für die Wochentage. */
.bb-hours dt,
.bb-label {
  font-family: 'Open Sauce Sans', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--bb-red);
}
.bb-hours dt {
  text-align: right;
  white-space: nowrap;
}
.bb-hours dd {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--bb-text);
}

/* Zeitlich begrenzter Hinweis unter den Öffnungszeiten (z. B. Schließtage).
   Rosa Fläche wie der Button – fällt auf, ohne fremd zu wirken. */
.bb-notice {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  padding: 26px 34px;
  background-color: var(--bb-rose);
  text-align: center;
}
.bb-notice p { margin: 0; color: var(--bb-red); }
.bb-notice .bb-notice-label {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* Versalien brauchen Laufweite und etwas kleinere Punktgrösse */
.bb-notice-text {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media screen and (max-width: 767px) {
  .bb-notice { padding: 22px 20px; }
  .bb-notice-text { font-size: 14px; }
}

/* Reservierungszeiten in einer Zeile, durch Punkte getrennt */
.bb-times {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Open Sauce Sans', sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--bb-red);
}
.bb-times li { display: flex; align-items: baseline; }
.bb-times li + li::before {
  content: "·";
  margin: 0 20px;
  opacity: .45;
}

@media screen and (max-width: 575px) {
  .bb-hours {
    grid-template-columns: 1fr;
    row-gap: 4px;
    justify-items: center;
    text-align: center;
  }
  .bb-hours dt { text-align: center; font-size: 21px; }
  .bb-hours dd { margin-bottom: 18px; font-size: 17px; }
  .bb-times { font-size: 22px; }
  .bb-times li + li::before { margin: 0 12px; }
}

/* --------------------------------------------------------------------------
   11. Auszeichnungen
   -------------------------------------------------------------------------- */
#auszeichnungen h3 {
  font-family: 'Open Sauce Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500;
  color: var(--bb-text) !important;
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.main-footer {
  background-color: var(--bb-dark);
  color: rgba(255, 255, 255, .72);
}
/* Der globale Fließtext ist dunkelrot – im Footer muss er hell werden */
.main-footer p,
.main-footer li,
.main-footer span,
.main-footer b,
.main-footer strong { color: rgba(255, 255, 255, .72); }
.main-footer a:not(.btn) { color: rgba(255, 255, 255, .72); }
.main-footer a:not(.btn):hover { color: var(--bb-rose); }
.main-footer .widget_title {
  font-family: 'Open Sauce Sans', sans-serif !important;
  color: var(--bb-rose);
  letter-spacing: 0.28em;
  margin-bottom: 30px;
}
.main-footer .social-icon a { background-color: rgba(255, 255, 255, .12); }
.main-footer .social-icon a:hover { background-color: var(--bb-rose); color: var(--bb-red); }
.main-footer hr { border-color: rgba(255, 255, 255, .15); }

/* --------------------------------------------------------------------------
   13. Modals (Jobs / Impressum / Datenschutz)
   -------------------------------------------------------------------------- */
.lqd-modal-inner {
  background-color: var(--bb-green) !important;
  font-family: 'Open Sauce Sans', sans-serif !important;
  color: var(--bb-text) !important;
}
.lqd-modal-inner a { color: var(--bb-rose-ink); }
.lqd-modal-inner a:hover { color: var(--bb-red); }


/* Logo mittig zwischen den beiden Navigationsgruppen -----------------------
   .menuleiste ist ein Flex-Container aus [Navigation links][Logo][Navigation
   rechts]. Die beiden Gruppen sind unterschiedlich breit, deshalb saß das Logo
   sichtbar neben der Mitte. Mit gleicher Flex-Basis teilen sich beide Gruppen
   den Platz je zur Hälfte, das Logo landet dazwischen in der Mitte. Die
   Gruppen schrumpfen dabei nie unter ihre Textbreite (min-width: min-content),
   sonst würde "Reservieren" abgeschnitten. Ab 1200 px, darunter zeigt das
   Theme die mobile Navigation. */
@media screen and (min-width: 1200px) {
  /* Als Raster mit zwei gleich breiten Aussenspalten (1fr) sitzt die mittlere
     Spalte – das Logo – exakt in der Mitte. Flexbox verteilt nur den freien
     Platz gleichmäßig und lässt die breitere Gruppe breiter, das Logo bliebe
     daneben stehen. */
  /* Höhere Gewichtung als die Theme-Regel .mainbar-row > [class^=col] */
  .mainbar-row > .col-auto.menuleiste {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    /* restaurant.css schiebt die Leiste zwischen 1200 und 1700 px mit
       padding-left: 40px nach rechts. Im Raster würde das Logo dadurch aus der
       Mitte rutschen, deshalb hier wieder gleiche Innenabstände. */
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .menuleiste > .navbar-collapse:first-of-type { justify-content: flex-end; }
  .menuleiste > .navbar-collapse:last-of-type { justify-content: flex-start; }
}

/* Abstände in der Kopfleiste wachsen mit der Fensterbreite: Statt fester
   Stufen ein fließender Wert (vw), nach unten und oben begrenzt. So stehen
   die sieben Punkte am Umschaltpunkt zur mobilen Navigation (1280 px) noch
   vollständig nebeneinander und rücken auf großen Bildschirmen nicht zu weit
   auseinander. Schrift, Schriftgröße und Sperrung bleiben unangetastet. */
@media screen and (min-width: 1200px) {
  .main-nav > li > a {
    padding-left: clamp(10px, 0.85vw, 18px);
    padding-right: clamp(10px, 0.85vw, 18px);
  }
  /* Luft zwischen Logo und den beiden Gruppen */
  .navbar-brand {
    padding-left: clamp(30px, 3vw, 70px);
    padding-right: clamp(30px, 3vw, 70px);
  }
}