/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==========================================================================
   La Ruffa — Basis
   Farben: Grün #22592A · Rot #E30B13 · Weinrot #601122 · Creme #F1EDE4
           Papier #FAF7F1 · Sand #C7BFB1 · Taupe #67645B
   ========================================================================== */

:root {
  --lr-green: #22592A;
  --lr-red: #E30B13;
  --lr-maroon: #601122;
  --lr-cream: #F1EDE4;
  --lr-paper: #FAF7F1;
  --lr-sand: #C7BFB1;
  --lr-taupe: #67645B;
  --lr-brush: url('/wp-content/uploads/2026/08/pinselstrich.svg');
}

body { overflow-x: clip; background: var(--lr-paper); }

/* ==========================================================================
   Header — EINE Leiste, die alle Zustände morpht:
   transparent über dem Hero → kompakt-grün beim Scrollen (html.lr-scrolled)
   Burger morpht zum X, Logo animiert die Größe. Kein Element doppelt.
   ========================================================================== */
#brx-header { position: fixed; top: 0; left: 0; right: 0; z-index: 900; }

.lr-header-bar {
  position: relative;
  height: 96px;
  transition: background-color .35s ease, height .35s ease;
}
html.lr-scrolled .lr-header-bar { background-color: var(--lr-green); height: 72px; }

/* Burger (einzige Instanz — Toggle fürs Overlay, morpht zum X) */
.lr-burger-pos { position: absolute; top: 44px; left: 20px; z-index: 1001; transition: top .35s ease; }
html.lr-scrolled .lr-burger-pos { top: 26px; }
.lr-burger { display: flex; flex-direction: column; gap: 8px; width: 34px; background: none; border: none; padding: 0; cursor: pointer; }
.lr-burger-line { width: 100%; height: 2px; border-radius: 1px; background: #fff; transition: transform .38s cubic-bezier(.4, 0, .2, 1), opacity .25s ease; }
html.lr-menu-open .lr-burger-line:nth-child(1) { transform: translateY(10px) rotate(45deg); }
html.lr-menu-open .lr-burger-line:nth-child(2) { opacity: 0; }
html.lr-menu-open .lr-burger-line:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* Logo (einzige Instanz — im Sticky-Zustand faden Kreis + „RISTORANTE" des
   Emblems aus (SVG liegt inline, Pfade sind per CSS erreichbar), der
   „La Ruffa"-Schriftzug bleibt in Originalgröße stehen und wandert sanft
   mit der schrumpfenden Leiste nach oben) */
.lr-logo-main {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  color: #fff;
  z-index: 1001;
  transition: width .35s ease, top .35s ease;
}
.lr-logo-svg-full [id="Vector"],
.lr-logo-svg-full [id="Vector_2"],
.lr-logo-svg-full [id="Group_2"] { transition: opacity .35s ease; }
html.lr-scrolled .lr-logo-svg-full [id="Vector"],
html.lr-scrolled .lr-logo-svg-full [id="Vector_2"],
html.lr-scrolled .lr-logo-svg-full [id="Group_2"] { opacity: 0; }
html.lr-scrolled .lr-logo-main { top: 0; color: var(--lr-cream); }
/* Die transparente SVG-Box ragt im Sticky-Zustand unter die Leiste hinaus —
   damit sie dort keine Klicks schluckt, ist nur die Schriftzug-Box klickbar
   (bounding-box; Fallback auto = nur bemalte Pfade) */
html.lr-scrolled .lr-logo-main { pointer-events: none; }
html.lr-scrolled .lr-logo-main [id="Group"] { pointer-events: auto; pointer-events: bounding-box; }

/* Startseite (Kundenwunsch 23.09.): Logo im Hero-Zustand in Markenfarben wie
   Logo_LaRuffa_final (Att. 1468) — Bogen oben grün, unten rot, Schrift
   bordeaux. Kompakt (lr-scrolled) und bei offenem Menü bleibt der Schriftzug
   creme, sonst wäre er auf der grünen Leiste bzw. dem Overlay unlesbar. */
body.home .lr-logo-main { color: #601122; transition: width .35s ease, top .35s ease, color .35s ease; }
body.home .lr-logo-svg-full [id="Vector"] { fill: #E30B13; }
body.home .lr-logo-svg-full [id="Vector_2"] { fill: #257030; }
html.lr-scrolled body.home .lr-logo-main,
html.lr-menu-open body.home .lr-logo-main { color: var(--lr-cream); }
html.lr-menu-open body.home .lr-logo-svg-full [id="Vector"],
html.lr-menu-open body.home .lr-logo-svg-full [id="Vector_2"] { fill: #FAF7F1; }

/* Buttons rechts (bleiben in beiden Zuständen gleich) */
.lr-header-buttons { position: absolute; top: 36px; right: 12px; display: flex; align-items: center; gap: 12px; transition: top .35s ease; }
html.lr-scrolled .lr-header-buttons { top: 12px; }

@media (min-width: 767px) {
  .lr-header-bar { height: 140px; }
  html.lr-scrolled .lr-header-bar { height: 84px; }
  .lr-burger-pos { top: 57px; left: 40px; }
  html.lr-scrolled .lr-burger-pos { top: 32px; }
  .lr-logo-main { top: 30px; width: 150px; }
  html.lr-scrolled .lr-logo-main { top: -12px; }
  .lr-header-buttons { top: 50px; right: 40px; }
  html.lr-scrolled .lr-header-buttons { top: 16px; }
}
@media (min-width: 1279px) {
  .lr-header-bar { height: 206px; }
  html.lr-scrolled .lr-header-bar { height: 84px; }
  .lr-burger-pos { top: 57px; left: 80px; }
  .lr-logo-main { top: 41px; width: 190.78px; }
  html.lr-scrolled .lr-logo-main { top: -27px; }
  .lr-header-buttons { top: 57px; right: 80px; }
}

/* Seiten ohne Hero-Bild/-Video: der Header startet dauerhaft im kompakten
   Sticky-Zustand (Klasse lr-scrolled setzt functions.php schon im <head>,
   script.js hält sie) — der Inhalt beginnt unter der Leiste */
body.lr-kein-hero #brx-content { padding-top: 72px; }
@media (min-width: 767px) {
  body.lr-kein-hero #brx-content { padding-top: 84px; }
}

/* Header-Bar selbst darf Klicks unter sich durchlassen, nur Kinder fangen */
.lr-header-bar { pointer-events: none; }
.lr-header-bar > * { pointer-events: auto; }

/* --------------------------------------------------------------------------
   Pinselstrich-Buttons — 9-Slice-Maske: Enden formstabil, Mitte streckt
   -------------------------------------------------------------------------- */
.lr-brush-btn { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; white-space: nowrap; text-decoration: none; }
.lr-brush-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--lr-brush-bg, var(--lr-red));
  -webkit-mask: var(--lr-brush) 0 0 / 100% 100% no-repeat;
  mask: var(--lr-brush) 0 0 / 100% 100% no-repeat;
  transition: background-color .2s ease;
}
@supports (-webkit-mask-box-image: none) {
  .lr-brush-btn::before {
    -webkit-mask: none;
    mask: none;
    -webkit-mask-box-image: var(--lr-brush) 0 34 0 34 stretch;
  }
}

/* Button-Paare: natürliche Breiten, aber identische Label-Größe (14px/2.4px —
   die Typografie selbst kommt aus den Element-Settings) */
.lr-btn-paar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  align-self: flex-start;
}
@media (max-width: 478px) {
  /* Mobil bleiben Paare nebeneinander: kompaktere Labels/Paddings, linksbündig
     (Geschichte-CTA bleibt per Element-Setting zentriert) */
  .lr-btn-paar { align-self: flex-start; justify-content: flex-start; width: 100%; gap: 10px; }
  .lr-btn-paar .lr-brush-btn {
    font-size: 14px !important;
    letter-spacing: .3px !important;
    padding: 13px 18px 15px !important;
  }
}

.lr-btn-takeaway { --lr-brush-bg: #fff; }
.lr-btn-takeaway:hover { --lr-brush-bg: var(--lr-red); color: #fff !important; }
.lr-btn-cta { --lr-brush-bg: var(--lr-red); }
.lr-btn-cta:hover { --lr-brush-bg: var(--lr-maroon); }
.lr-btn-text:hover { color: var(--lr-red) !important; }

/* --------------------------------------------------------------------------
   Menü-Overlay (Burger + Logo des Headers liegen darüber, z-index 1001)
   -------------------------------------------------------------------------- */
.lr-overlay { position: fixed !important; inset: 0; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; overflow: hidden; }
html.lr-menu-open .lr-overlay { opacity: 1; visibility: visible; transition: opacity .35s ease; }
html.lr-menu-open { overflow: hidden; }

.lr-menu-item { transition: color .15s ease; }
.lr-menu-item:hover { color: var(--lr-red) !important; font-weight: 500; }

/* Active State: aktuelle Seite im Hauptmenü in Rot (Klasse setzt script.js) */
.lr-menu-item.is-current { color: var(--lr-red) !important; font-weight: 500; }

.lr-overlay-media { opacity: 0; visibility: hidden; transition: opacity .25s ease; pointer-events: none; }
.lr-overlay-media.is-active { opacity: 1; visibility: visible; }
@media (max-width: 1279px) {
  .lr-overlay-media { display: none !important; }
}

/* Hauptmenü — Speisekarten-Liste: ersetzt beim Punkt „Speisekarte" das
   Hover-Bild durch klickbare Restaurant-Deeplinks. Mobil (<1280) als Collapse
   unter dem Menüpunkt, auf Desktop fixed an der Position der Hover-Medien. */
.lr-ovsk-titel { font-family: var(--lr-font-sans, 'Lato', sans-serif); font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: rgba(241, 237, 228, .55); margin-bottom: 6px; }
.lr-ovsk-item { display: block; width: 100%; font-family: 'Playfair Display', serif; color: #F1EDE4; text-decoration: none; border-bottom: 1px solid rgba(241, 237, 228, .18); transition: color .15s ease, padding-left .15s ease; }
.lr-ovsk-item:hover { color: var(--lr-red); padding-left: 6px; }
@media (max-width: 1279px) {
  .lr-overlay { overflow-y: auto; overflow-x: hidden; }
  .lr-overlay-standorte { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, opacity .3s ease, margin .4s ease; margin: 0; }
  .lr-overlay-standorte.is-open { max-height: 480px; opacity: 1; margin: 4px 0 14px; }
  .lr-ovsk-item { font-size: 18px; line-height: 1.3; padding: 10px 0 11px; }
  .lr-ovsk-item:last-child { border-bottom: 0; }
  /* Offene Liste schiebt das Menü nach unten — Social-Icons weichen aus */
  html.lr-sk-open .lr-overlay-social { opacity: 0; pointer-events: none; transition: opacity .25s ease; }
  .lr-overlay-social { transition: opacity .25s ease; }
}
@media (min-width: 1280px) {
  .lr-overlay-standorte { position: fixed; top: 276px; left: 642px; width: 520px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
  .lr-overlay-standorte.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
  .lr-ovsk-titel { margin-bottom: 12px; }
  .lr-ovsk-item { font-size: 26px; line-height: 1.3; padding: 12px 0 13px; }
}
@media (min-width: 1441px) {
  .lr-overlay-standorte { left: 44.6%; top: 25.6vh; width: 36vw; }
  .lr-ovsk-item { font-size: clamp(26px, 1.94vw, 34px); }
}

/* Overlay-Skalierung oberhalb des 1440er-Designs (Referenz 1440x900 → vw/vh) */
@media (min-width: 1441px) {
  .lr-overlay-menu { left: 5.56vw !important; top: 27.8vh !important; }
  .lr-overlay .lr-menu-item { font-size: clamp(50px, 3.47vw, 82px) !important; }
  .lr-overlay-media { left: 44.6% !important; top: 25.6vh !important; width: 49.86% !important; }
  .lr-overlay-media .brxe-image { width: 100% !important; height: auto !important; aspect-ratio: 718 / 420; object-fit: cover; }
  .lr-overlay-spruch { font-size: clamp(60px, 4.17vw, 98px) !important; }
  .lr-overlay-social { left: 5.7vw !important; bottom: 15vh !important; }
}

/* Anker-Ziele: fixer Header überdeckt sonst den Sektionsanfang */
#speisekarte, #allergene { scroll-margin-top: 96px; }

/* --------------------------------------------------------------------------
   Speisekarten-Dropdown
   -------------------------------------------------------------------------- */
.lr-dropdown { position: fixed; top: 122px; right: 80px; width: 360px; z-index: 960; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s, top .35s ease; box-shadow: 0 16px 40px rgba(13, 20, 13, .28); }
html.lr-scrolled .lr-dropdown { top: 96px; }
html.lr-dropdown-open .lr-dropdown { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, top .35s ease; }
.lr-dropdown-item { display: block; width: 100%; transition: color .15s ease; }
.lr-dropdown-item:hover { color: var(--lr-red) !important; padding-left: 4px; }
@media (max-width: 767px) {
  .lr-dropdown { right: 16px; left: 16px; width: auto; top: 100px; }
  html.lr-scrolled .lr-dropdown { top: 78px; }
}

/* --------------------------------------------------------------------------
   Listen & Links
   -------------------------------------------------------------------------- */
.lr-links-plain a { color: inherit; text-decoration: none; }
.lr-links-plain a:hover { text-decoration: underline; }

/* Standort-Zeilen (Startseite): Zeile färbt bei Hover rot */
.lr-standort-zeile { transition: color .15s ease; text-decoration: none; }
.lr-standort-zeile:hover .lr-standort-name,
.lr-standort-zeile:hover .lr-standort-adresse { color: var(--lr-red) !important; }

.lr-standort-liste { position: relative; }

/* Der "Flyer": EIN schwebendes Foto, fliegt per JS zwischen den Zeilen */
.lr-standort-flyer {
  position: absolute;
  left: 38%;
  top: 0;
  width: 440px;
  height: 310px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  will-change: transform;
  transform-origin: center;
}
.lr-standort-flyer .lr-standort-bild {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  opacity: 0;
}
.lr-standort-flyer .lr-standort-bild.is-active { opacity: 1; }
.lr-standort-flyer .lr-standort-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1278px) {
  .lr-standort-flyer { display: none !important; }
}

/* Footer: Links hovern rot wie im Hauptmenü */
.lr-footer-link { transition: color .15s ease; text-decoration: none; }
.lr-footer-link:hover { color: var(--lr-red) !important; }
#brx-footer .lr-links-plain a { transition: color .15s ease; }
#brx-footer .lr-links-plain a:hover { color: var(--lr-red); text-decoration: none; }
/* Footer RISTORANTI (Query-Loop über CPT standort): jeder Betrieb einzeilig — die Spalte wächst mit dem längsten Namen */
#brx-footer .lr-footer-standorte a { white-space: nowrap; }
.lr-social-circle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1.2px solid rgba(241, 237, 228, .8); border-radius: 50%; text-decoration: none; transition: border-color .15s ease; }
.lr-social-circle:hover { border-color: #fff; }

/* --------------------------------------------------------------------------
   Formulare (Feiern-Anfrage): Papier-Look, Hairline-Felder, Brush-Submit
   -------------------------------------------------------------------------- */
.lr-form input,
.lr-form textarea,
.lr-form select {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(34, 89, 42, .35) !important;
  border-radius: 0 !important;
  font-family: "Playfair Display", ui-serif, Georgia, serif !important;
  font-size: 17px !important;
  color: #22592A !important;
  padding: 14px 2px !important;
}
.lr-form ::placeholder { color: rgba(34, 89, 42, .55); opacity: 1; }
.lr-form input:focus,
.lr-form textarea:focus,
.lr-form select:focus { outline: none !important; border-bottom-color: #E30B13 !important; }
.lr-form select { cursor: pointer; }

.lr-form button[type="submit"] {
  position: relative;
  z-index: 0;
  background: none !important;
  border: none !important;
  cursor: pointer;
  font-family: "Playfair Display", ui-serif, Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: .5px !important;
  text-transform: lowercase;
  color: #F1EDE4 !important;
  padding: 16px 42px 18px !important;
  margin-top: 12px;
}
.lr-form button[type="submit"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--lr-red);
  -webkit-mask: var(--lr-brush) 0 0 / 100% 100% no-repeat;
  mask: var(--lr-brush) 0 0 / 100% 100% no-repeat;
  transition: background-color .2s ease;
}
@supports (-webkit-mask-box-image: none) {
  .lr-form button[type="submit"]::before {
    -webkit-mask: none;
    mask: none;
    -webkit-mask-box-image: var(--lr-brush) 0 34 0 34 stretch;
  }
}
.lr-form button[type="submit"]:hover::before { background-color: var(--lr-maroon); }

/* Formular-Meldungen im Markenlook */
.lr-form .message,
.lr-form .form-messages {
  background: none !important;
  border: none !important;
  padding: 14px 0 0 !important;
  font-family: "Playfair Display", ui-serif, Georgia, serif !important;
  font-size: 17px !important;
  color: #22592A !important;
}
.lr-form .message.error,
.lr-form .form-messages.error { color: #E30B13 !important; }

/* Personen-Feld: keine Spinner-Pfeile — Zahl wird einfach eingetippt */
.lr-form input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.lr-form input[type="number"]::-webkit-outer-spin-button,
.lr-form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Wunschtermin (flatpickr-Input verhält sich wie ein Button) */
.lr-form input.flatpickr { cursor: pointer; }

/* --------------------------------------------------------------------------
   Custom-Dropdown (.lr-select): Das native <select> bleibt unsichtbar über
   der Anzeige liegen (Fokus, Screenreader, Validierungs-Bubble), die
   sichtbare Liste ist reine Deko (aria-hidden) — Aufbau in script.js.
   -------------------------------------------------------------------------- */
.lr-select { position: relative; width: 100%; }
.lr-select select {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100% !important;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}
.lr-select-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(34, 89, 42, .35);
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: 17px;
  line-height: 40px; /* wie die Inputs (Bricks) — sonst sitzt die Linie höher als bei Telefon & Co. */
  color: #22592A;
  padding: 14px 2px;
}
.lr-select-display.is-placeholder { color: rgba(34, 89, 42, .55); }
.lr-select-display::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin: -6px 6px 0 0;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease, margin .18s ease;
}
.lr-select.is-open .lr-select-display::after { transform: rotate(-135deg); margin-top: 4px; }
.lr-select:focus-within .lr-select-display { border-bottom-color: #E30B13; }
.lr-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #FAF7F1;
  border: 1px solid rgba(34, 89, 42, .16);
  box-shadow: 0 18px 44px rgba(34, 44, 34, .16);
  max-height: 380px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.lr-select.is-open .lr-select-panel { opacity: 1; transform: none; pointer-events: auto; }
.lr-select-option {
  padding: 11px 18px;
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: 17px;
  color: #22592A;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.lr-select-option:hover { background: rgba(34, 89, 42, .08); }
.lr-select-option.is-selected { color: #E30B13; }

/* --------------------------------------------------------------------------
   flatpickr-Kalender im Markenlook (Wunschtermin, Feiern-Formular)
   Großzügig skaliert: 44px-Tage, statischer Monatstitel (monthSelectorType
   "static" via Filter in functions.php), Jahres-Spinner ausgeblendet.
   -------------------------------------------------------------------------- */
.flatpickr-calendar {
  width: 408px;
  padding: 20px 22px 24px;
  background: #FAF7F1;
  border: 1px solid rgba(34, 89, 42, .16);
  border-radius: 0;
  box-shadow: 0 24px 64px rgba(34, 44, 34, .22);
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: 17px;
  color: #22592A;
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { border-bottom-color: #FAF7F1; }
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { border-top-color: #FAF7F1; }

/* Kopf: ‹ Monat Jahr › */
.flatpickr-months { align-items: center; margin-bottom: 12px; }
.flatpickr-months .flatpickr-month { height: 44px; color: #22592A; fill: #22592A; overflow: visible; }
.flatpickr-current-month {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0;
  font-size: 23px;
  font-weight: 600;
}
.flatpickr-current-month span.cur-month { font-family: inherit; font-weight: 600; margin: 0; }
.flatpickr-current-month span.cur-month:hover { background: none; }
.flatpickr-current-month .numInputWrapper {
  width: 3.2ch;
  font-family: inherit;
}
.flatpickr-current-month .numInputWrapper:hover { background: none; }
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown { display: none; }
.flatpickr-current-month input.cur-year {
  font-family: inherit;
  font-size: 23px;
  font-weight: 400;
  color: #22592A;
  padding: 0;
}
/* Falls das Monats-Dropdown doch rendert (Fallback): unauffällig einpassen */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 23px;
  font-weight: 600;
  color: #22592A;
  padding: 0;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  fill: #22592A;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 17px;
  height: 17px;
  fill: #22592A;
  transition: fill .15s ease;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #E30B13; }

/* Wochentage */
.flatpickr-weekdays { height: 34px; margin-bottom: 2px; }
span.flatpickr-weekday {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(34, 89, 42, .5);
}

/* Tage: 44px-Kreise */
.flatpickr-days { width: 364px; }
.dayContainer { width: 364px; min-width: 364px; max-width: 364px; }
.flatpickr-day {
  width: 44px;
  max-width: 44px;
  height: 44px;
  line-height: 42px;
  margin: 4px;
  font-family: inherit;
  font-size: 17px;
  color: #22592A;
  border-radius: 50%;
  transition: background-color .12s ease, color .12s ease;
}
.flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover {
  background: rgba(34, 89, 42, .09);
  border-color: transparent;
}
.flatpickr-day.today { border-color: rgba(227, 11, 19, .5); }
.flatpickr-day.today:hover { color: #22592A; }
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.selected.today {
  background: #E30B13;
  border-color: #E30B13;
  color: #FAF7F1;
  font-weight: 600;
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: rgba(34, 89, 42, .26); }
.flatpickr-day.flatpickr-disabled:hover { background: transparent; }

/* Logo-SVGs erben die Farbe (fill: currentColor) */
.lr-logo svg { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Buon appetito: Hover über eine Speise wechselt das Polaroid-Foto
   (Stack aus 8 Bildern, rein visueller Effekt)
   -------------------------------------------------------------------------- */
.lr-ba-stack { overflow: hidden; }
.lr-ba-stack .lr-ba-bild {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .3s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.lr-ba-stack .lr-ba-bild.is-default { position: relative; opacity: 1; transform: none; }
.lr-ba-stack.has-active .lr-ba-bild.is-default { opacity: 0; }
.lr-ba-stack .lr-ba-bild.is-active { opacity: 1; transform: scale(1); }

.lr-speise { cursor: default; transition: color .15s ease; }
.lr-speise:hover { color: var(--lr-red) !important; }

/* Anti-FOUC für den Pinselstrich-Wipe: Startzustand nur hinter dem
   Animations-Gate — ohne JS/mit reduced-motion ist alles sichtbar */
html.pl-anim [data-animate="brush"] { clip-path: inset(-10% 102% -20% -2%); }

/* Brush-Headlines laufen ab Tablet in einer Zeile über den Rand;
   auf Mobile (umbrechend) stehen sie zentriert */
@media (min-width: 991px) {
  .lr-nowrap-md { white-space: nowrap; }
}
@media (max-width: 990px) {
  .lr-nowrap-md { text-align: center; margin-left: 0 !important; margin-right: 0 !important; }
}

/* Hero-Hintergrundvideos füllen die Section */
#hero .bricks-background-video-wrapper video,
#bild-band .bricks-background-video-wrapper video { object-fit: cover; width: 100%; height: 100%; }

/* ==========================================================================
   Standorte-Übersicht (/standorte): alternierende Blöcke mit Foto-Collage
   ========================================================================== */
#standorte-liste { overflow: clip; }
.lr-so-block { position: relative; }
.lr-so-block + .lr-so-block { border-top: 1px solid rgba(34, 89, 42, .25); }

.lr-so-info { position: relative; z-index: 2; }
.lr-so-info h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.lr-so-fotos { position: relative; }
.lr-so-foto { box-shadow: 0 12px 28px rgba(38, 33, 26, .12); object-fit: cover; }

/* Mobil/Tablet: gestapelt, Fotos nebeneinander */
.lr-so-block { padding: 44px 20px 52px; }
.lr-so-fotos { display: flex; gap: 18px; margin-top: 36px; align-items: flex-start; }
.lr-so-foto-a { width: 46%; aspect-ratio: 400 / 380; transform: rotate(-2deg); }
.lr-so-foto-b { width: 50%; aspect-ratio: 460 / 430; transform: rotate(1deg); margin-top: -14px; }

/* Desktop: exakte Figma-Collage, gerade/ungerade gespiegelt.
   --lr-so-versatz zentriert die 1440er-Figma-Canvas auf breiteren Viewports —
   der komplette Blockinhalt (Text + Fotos) wandert als Einheit in die Mitte. */
@media (min-width: 1279px) {
  .lr-so-block {
    --lr-so-versatz: max(0px, calc((100% - 1440px) / 2));
    min-height: 541px;
    padding: 74px calc(56px + var(--lr-so-versatz)) 60px;
  }
  .lr-so-info { width: 542px; }
  .lr-so-fotos { position: absolute; inset: 0; margin: 0; display: block; pointer-events: none; z-index: 1; }
  .lr-so-foto { position: absolute; }
  /* Foto-lefts = Figma-Koordinaten +40px vom Text weggerückt (Kundenwunsch: mehr Luft) */
  .lr-so-foto-a { left: calc(640px + var(--lr-so-versatz)); top: 116px; width: 400px; height: 380px; aspect-ratio: auto; margin: 0; }
  .lr-so-foto-b { left: calc(1092px + var(--lr-so-versatz)); top: 30px; width: 460px; height: 430px; aspect-ratio: auto; margin: 0; }

  .lr-so-block:nth-child(even) { min-height: 625px; }
  .lr-so-block:nth-child(even) .lr-so-info { margin-left: auto; }
  .lr-so-block:nth-child(even) .lr-so-foto-a { left: calc(385px + var(--lr-so-versatz)); top: 206px; }
  .lr-so-block:nth-child(even) .lr-so-foto-b { left: calc(-122px + var(--lr-so-versatz)); top: 110px; }
}
/* Die Collage-Fotos dürfen wie im 1440er-Design über den Canvas-Rand bluten —
   #standorte-liste hat overflow: clip. Keine Sonderfälle nötig. */

/* Tablet/Mobil: Fotos der Übersicht kompakter, Blöcke mit mehr Luft */
@media (max-width: 1278px) {
  .lr-so-block { padding: 56px 20px 60px; }
  .lr-so-foto-a { width: 42%; }
  .lr-so-foto-b { width: 46%; }
}

/* ==========================================================================
   Tablet-Zone (991–1278): Manifest zweispaltig statt links hängend
   ========================================================================== */
@media (min-width: 991px) and (max-width: 1278px) {
  .lr-mf-canvas { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; }
  .lr-mf-headline { grid-column: 1 / -1; }
  .lr-mf-bild { grid-column: 2; grid-row: 2 / span 2; width: 100% !important; height: 520px !important; margin-top: 16px !important; }
  .lr-mf-notiz { grid-column: 1; margin-top: 40px !important; }
  .lr-mf-polaroid { grid-column: 1; width: 250px !important; height: 282px !important; margin: 32px 0 0 32px !important; }

  /* Buon appetito: Polaroid präsenter */
  .lr-ba-polaroid { width: 230px !important; height: 265px !important; margin-left: 48px !important; }
}

/* ==========================================================================
   Digitale Karte (/karte/<slug>/) — mobile QR-Shell ohne Website-Chrome
   Templates 1381/1382, Routing in bricks-child/inc/laruffa-digitale-karte.php
   ========================================================================== */
/* Kein fixer Header auf der Karte → Kein-Hero-Abstand neutralisieren */
body.lr-karte-page #brx-content { padding-top: 0 !important; }

/* Logo-Stempel (SVG 121/122 färben über currentColor) */
.lr-dk-logo { width: 142px; color: var(--lr-green); }
.lr-dk-logo-klein { width: 68px; color: var(--lr-green); }
.lr-dk-footer-logo { width: 112px; color: var(--lr-cream); }
.lr-dk-logo svg, .lr-dk-logo-klein svg, .lr-dk-footer-logo svg { width: 100%; height: auto; display: block; }

/* Speisekarten-Kachel: Bild + Scrim + zentrierter Inhalt, ganze Fläche klickbar */
.lr-dk-kachel { position: relative; display: block; overflow: clip; }
.lr-dk-kachel img { display: block; transition: transform .5s ease; }
.lr-dk-kachel:hover img { transform: scale(1.03); }
.lr-dk-kachel-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.52) 100%);
}
.lr-dk-kachel-inhalt {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 24px; text-align: center;
}
/* Button ist nur Optik — der Link liegt auf der ganzen Kachel */
.lr-dk-kachel-btn { pointer-events: none; margin-top: 14px; }
.lr-dk-kachel:hover .lr-dk-kachel-btn { --lr-brush-bg: var(--lr-maroon); }

/* Footer-Links: Hover heller statt rot (Rot säuft auf Grün ab) */
.lr-dk-footer-link { transition: color .15s ease; }
.lr-dk-footer-link:hover, #brx-content a.lr-dk-footer-link:hover p { color: #fff !important; }

/* Speisekarte in der schmalen Shell: immer einspaltig, Titel kompakt */
body.lr-karte-page .lr-karte-gerichte { columns: 1 !important; }
body.lr-karte-page .lr-karte-titel { font-size: 38px !important; }
body.lr-karte-page .lr-karte-filter { margin-bottom: 48px; }
body.lr-karte-page .lr-karte-kategorie { margin-bottom: 64px; padding: 0 24px; }