/* =========================================================================
   MOUNT LAVINIA — Theme „Abend & Gold"
   Diese Datei (skin.css) ist die Design-Schicht dieses Themes
   und bestimmt Aussehen: Farben, Schriften, Kopf-/Fußzeile, Startseite,
   Speise- & Getränkekarte.

   AUFBAU:
     1. EINSTELLUNGEN  — Schriften & Farben zum Ändern (alles an einer Stelle)
     2. Grundgerüst    — Seiten-Hintergrund, Kopfband
     3. Kopfzeile      — Logo, Navigation, Reservieren-Knopf, Handy-Menü
     4. Startseite
     5. Fußzeile + Handy-Aktionsleiste
     6. Ansicht schmal — Handy/Tablet (Umbrüche)
     7. Speise- & Getränkekarte

   ÄNDERN: In Abschnitt 1 stehen alle Farben und die drei Schriften mit
   Klartext dahinter. Ändere dort den Wert — z. B. --ml-olive auf einen
   anderen Grünton — und die ganze Seite zieht mit. Weiter unten stehen
   nur noch Größen und Abstände.
   ========================================================================= */


/* =========================================================================
   1. EINSTELLUNGEN — HIER ÄNDERST DU SCHRIFTEN UND FARBEN
   ========================================================================= */
:root{

  /* ---- SCHRIFTEN --------------------------------------------------------
     Die drei Schriften liegen lokal im Eltern-Theme (kein Google-Fonts,
     DSGVO-sicher). Eine ANDERE Schrift muss zuerst dort eingebaut werden;
     hier legst du nur fest, welche Schrift wofür benutzt wird. */
  --ml-schrift-titel: var(--serif,'Vollkorn',serif); /* Überschriften, Gericht-Namen, Preise */
  --ml-schrift-label: var(--label,'Alegreya Sans',sans-serif);          /* Großbuchstaben-Labels: Knöpfe, Navigation */
  --ml-schrift-text:  var(--sans,'Alegreya Sans',sans-serif);           /* Grund- und Fließtext */

  /* ---- FARBEN · DUNKLE STARTSEITE (Kopf- und Fußzeile immer dunkel) ---- */
  --ml-gruen:        #232717;                /* Hintergrund Startseite + Kopfzeile */
  --ml-gruen-panel:  rgba(96,104,61,.35);     /* halbdurchsichtige Kästen (Zeiten, Rahmen) */
  --ml-fuss:         #1A1D0F;                /* Fußzeile + feste Handy-Leiste unten */
  --ml-creme:        #F9F5E7;                /* Überschriften auf dunklem Grund */
  --ml-text-hell:    rgba(249,245,231,.90);  /* Fließtext auf dunklem Grund */
  /* 15.07.2026: von .70 auf .85 angehoben. Nachgerechnet auf dem tatsaechlichen Grund
     (Oliv #505534 + Panel rgba(96,104,61,.35) = rgb(86,92,55)):
       .70 -> 4.11:1  = faellt durch (WCAG AA verlangt 4.5:1 bei Text unter ~19px)
       .85 -> 5.21:1  = besteht
     Betrifft Nebentexte in den Kacheln, .page-head .crumb und .mlx-times .fine.
     Optisch bleibt es derselbe gedaempfte Ton, nur minimal weniger blass. */
  --ml-text-leise:   rgba(249,245,231,.85);  /* Nebentext auf dunklem Grund */
  --ml-linie:        rgba(78,65,43,.98);   /* dünne Gold-Linien und Rahmen auf Dunkel */

  /* ---- FARBEN · GOLD (nur als Schmuck, nie als große Fläche) ---------- */
  --ml-gold-strich:  #D8A94E;   /* kurzer Goldstrich über Titeln, Hero-Trennlinie */
  --ml-gold-hell:    #ECC873;   /* kursive Wörter in Titeln, aktiver Menüpunkt, Fokus-Rahmen */
  --ml-gold-bronze:  #E0BE86;   /* Telefonnummer im Kopf, Linien-Knopf-Text */
  --ml-gold-zahlen:  #E9C77F;   /* Uhrzeit-Zahlen in der Öffnungszeiten-Karte */
  --ml-gold-marke:   #C9973A;   /* Marken-Gold: Raute und Strich auf hellem Papier */
  /* (Frühere Version: alle auf #fff3bb — helles Gelb. Auf dem Grün wirkte
     es blass; die Werte oben sind ein wärmeres, satteres Gold. Willst du
     das helle Gelb zurück, hier wieder auf #fff3bb setzen.) */

  /* ---- FARBEN · KNÖPFE (Elfenbein) ----------------------------------- */
  --ml-knopf:        #EFE7CC;   /* Knopf-Fläche, z. B. „Reservieren" */
  --ml-knopf-text:   #191B0F;   /* Schrift auf dem Knopf (dunkel) */
  --ml-knopf-hover:  #FBF7EA;   /* Knopf beim Überfahren mit der Maus */

  /* ---- FARBEN · UNTERSEITEN (helles Grün + helles Papier) ------------ */
  --ml-olive:        #505534;   /* Hintergrund ALLER Unterseiten (heller als Startseite) */
  --ml-papier:       #FEFCF6;   /* Speise-/Getränkekarte: das helle Blatt */
  --ml-papier-hell:  #FFFEFA;   /* Such-/Filterleiste, Allergen-Zeile */

  /* ---- FARBEN · SPEISEKARTE-TEXT (dunkel auf hellem Papier) ----------- */
  --ml-karte-name:      #232619;  /* Gericht-Name */
  --ml-karte-kapitel:   #1F2213;  /* Kapitel-Überschrift */
  --ml-karte-preis:     #6B4E09;  /* Preis */
  --ml-karte-text:      #4A4830;  /* Beschreibung */
  --ml-karte-label:     #77613A;  /* Kennzeichnungen (Vegan, Mild …) */
  --ml-karte-scharf:    #94441F;  /* Schärfe-Hinweis */
  --ml-karte-nummer:    #8A6410;  /* Gericht-Nummer */
  --ml-karte-allergene: #6E664A;  /* Allergen-Zeile */

  /* ---- FARBEN · Links auf Dunkel ------------------------------------- */
  --ml-champagner:   #EDE3C4;   /* helle Textlinks & Hover auf dunklem Grund */
}


/* =========================================================================
   2. GRUNDGERÜST — Startseite dunkel, Unterseiten auf hellerem Grün
   ========================================================================= */
body{background:var(--ml-gruen);color:var(--ml-text-hell)}
body:not(.home){background:var(--ml-olive)}          /* alle Seiten außer Startseite: helleres Grün */
::selection{background:var(--ml-knopf);color:var(--ml-knopf-text)}
main#main{background:transparent}
main#main.mlx-dark{background:transparent}

/* Kopfband der Unterseiten */
.page-head h1{color:var(--ml-creme);text-shadow:none}
.page-head .crumb{color:var(--ml-text-leise)}

/* Unterseiten-Kopf als heller BRIEFKOPF (Sheris Wahl SEITE-B): das Papier
   beginnt direkt unter der Kopfzeile — Titel links wie ein gedruckter
   Briefkopf, rechts das Seiten-Motiv, darunter eine doppelte Haarlinie,
   dann läuft derselbe Papierbogen nahtlos als Inhalt weiter. Vom Grün
   bleibt nur ein schmaler Rand. Startseite (Foto-Hero) und Speise-/
   Getränkekarte (eigenes Kopfband .ed-head-band) bleiben ausgenommen. */
body:not(.home) .page-head:not(.ed-head-band){
  max-width:940px;margin:1.6rem auto 1.4rem;
  background:url('assets/images/elegantia/body.png') #FBF8F0;
  border:1px solid #fce2af;border-bottom:3px double rgba(138,100,16,.4);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:2.1rem clamp(1.4rem,4vw,3rem) 1.6rem}
body:not(.home) .page-head:not(.ed-head-band) h1{color:var(--ml-karte-kapitel);line-height:1.1}
body:not(.home) .page-head:not(.ed-head-band) .crumb{color:#7E5C0B;margin-top:.5rem}
/* Das Seiten-Motiv sitzt zentriert ÜBER dem Titel (order:-1) — aber nur auf
   Seiten, die eins haben (Abschnitt 8); FAQ/Recht bleiben ohne Lücke. */
/* Briefkopf und Blatt stehen mit etwas LUFT untereinander (Sheris Wunsch) —
   das Blatt behält deshalb seine eigene Oberkante samt Zierrand. */
body:not(.home) .entry-sheet{margin-top:0}
@media(max-width:760px){
  body:not(.home) .page-head:not(.ed-head-band){margin-left:.6rem;margin-right:.6rem;padding:1.8rem 1.2rem 1.4rem}
  body:not(.home) .entry-sheet{margin-left:.6rem;margin-right:.6rem}
}
/* Sticky-Kategorienleiste der Speisekarte unter den Kopf schieben */
.cat-nav{top:54px}


/* =========================================================================
   3. KOPFZEILE (Logo links, Navigation, Reservieren rechts, Handy-Menü)
   ========================================================================= */
/* Wichtig: KEIN backdrop-filter auf dem Kopf — er würde das fest
   positionierte Handy-Menü-Panel am Kopf festnageln statt am Bildschirm
   (CSS: filter macht den Vorfahren zum Bezugsrahmen). Bei 97 % Deckkraft
   ist der Weichzeichner ohnehin unsichtbar. */
.mlx-hdr{position:sticky;top:0;z-index:200;background:rgba(35,39,23,.97);border-bottom:1px solid rgba(249,245,231,.16)}
/* ALLES IN EINER ZEILE, flach: Logo ganz links, Seiten mit Gold-Rauten
   mittig, Telefon + Reservieren ganz rechts. */
.mlx-in{max-width:none;margin:0;display:flex;align-items:center;gap:1.1rem;padding:.4rem 1.5%}
.mlx-logo img{width:122px;height:auto}
.mlx-dnav{display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;flex:1;min-width:0}
.mlx-dnav a{font-family:var(--ml-schrift-label);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(249,245,231,.8);padding:.5rem .1rem;min-height:38px;display:inline-flex;align-items:center;white-space:nowrap}
.mlx-dnav a:hover,.mlx-dnav a[aria-current=page]{color:var(--ml-gold-hell);box-shadow:inset 0 -2px 0 rgba(216,169,78,.7)}
.mlx-dnav .sep{color:rgba(233,199,127,.5);font-size:.55rem;padding:0 .5rem;user-select:none}
.mlx-act{margin-left:auto;display:flex;align-items:center;gap:1.1rem}
.mlx-tel{font-family:var(--ml-schrift-titel);font-size:1.12rem;color:var(--ml-gold-bronze);white-space:nowrap}
.mlx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:.6rem 1.7rem;font-family:var(--ml-schrift-label);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;background:var(--ml-knopf);color:var(--ml-knopf-text);font-weight:600;border-radius:0;transition:background .25s,color .25s}
.mlx-btn:hover{background:var(--ml-knopf-hover);color:var(--ml-knopf-text)}
.mlx-btn.line{background:none;border:1px solid var(--ml-gold-bronze);color:#F2E9CD}
.mlx-btn.line:hover{background:var(--ml-knopf);border-color:var(--ml-knopf);color:var(--ml-knopf-text)}

/* Handy-Menü (CSS-only über <details>) */
.mlx-mnav{display:none}
.mlx-mnav summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-family:var(--ml-schrift-label);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ml-creme);min-height:44px;padding:.5rem .2rem}
.mlx-mnav summary::-webkit-details-marker{display:none}
.mlx-mnav .bars{display:inline-flex;flex-direction:column;gap:4px}
.mlx-mnav .bars i{width:22px;height:2px;background:var(--ml-champagner)}
/* Handy-Menü-Tafel: helles Oliv wie die Unterseiten, ruhige große
   Serifen-Einträge ohne Linien — die aktive Seite trägt eine kleine
   Gold-Raute. Anrufen/Reservieren bleibt allein bei der festen Leiste
   unten (keine Dopplung im Panel). */
.mlx-mpanel{position:fixed;left:0;right:0;top:54px;bottom:0;background:var(--ml-olive);overflow:auto;padding:2.2rem 7% 6.5rem;z-index:190;text-align:center;display:flex;flex-direction:column;justify-content:center}
.mlx-mpanel .mp-list{max-width:420px;margin:0 auto;width:100%}
.mlx-mpanel a{display:flex;align-items:center;justify-content:center;gap:.55rem;min-height:54px;font-family:var(--ml-schrift-titel);font-size:1.5rem;color:#FFFDF4}
.mlx-mpanel a:active{color:var(--ml-gold-zahlen)}
.mlx-mpanel a[aria-current=page]{color:var(--ml-gold-zahlen)}
.mlx-mpanel a[aria-current=page]::before{content:"✦";font-size:.8rem;color:var(--ml-gold-zahlen)}
@media(max-height:700px){.mlx-mpanel{justify-content:flex-start}.mlx-mpanel a{min-height:48px;font-size:1.36rem}}


/* =========================================================================
   4. STARTSEITE
   ========================================================================= */
.mlx-wrap{max-width:1080px;margin:0 auto;padding:0 5%}
.mlx-center{text-align:center;max-width:760px;margin-inline:auto}
.mlx-sec{padding:4.2rem 0 0}
.mlx-sec:last-of-type{padding-bottom:4.5rem}
.mlx-overline{width:44px;height:2px;background:var(--ml-gold-strich);margin-bottom:1.3rem}
.mlx-center .mlx-overline,.mlx-center > .mlx-overline{margin-left:auto;margin-right:auto}
.mlx-dark h1,.mlx-dark h2,.mlx-dark h3{font-family:var(--ml-schrift-titel);font-weight:400;color:var(--ml-creme)}
.mlx-dark h1{font-size:clamp(2rem,4.6vw,3.2rem);margin-bottom:1.2rem;line-height:1.12}
.mlx-dark h1 em,.mlx-dark h2 em{font-style:italic;color:var(--ml-gold-hell)}
.mlx-dark h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin-bottom:1.1rem;line-height:1.12}
.mlx-dark p{margin-bottom:1rem;line-height:1.8;font-size:1.03rem}
.mlx-dark p strong{color:var(--ml-creme);font-weight:500}
.mlx-center p{text-align:left}
.mlx-center p.lead{text-align:center;max-width:600px;margin-inline:auto}
.mlx-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:1.8rem}

/* Hero (Eingangsfoto + Script-Logo) */
.mlx-hero{position:relative;min-height:min(74vh,640px);max-height:680px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.mlx-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.mlx-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,39,23,.28),rgba(35,39,23,.04) 45%,var(--ml-gruen) 97%)}
.mlx-hero .inner{position:relative;z-index:2;padding:2.5rem 5%}
.mlx-hero .logo-gross{width:min(390px,68vw);height:auto;margin:0 auto 1.3rem;filter:drop-shadow(0 6px 26px rgba(0,0,0,.6))}
.mlx-hero .line{font-family:var(--ml-schrift-label);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(249,245,231,.85)}
.mlx-hero .line b{color:var(--ml-gold-hell);font-weight:400}
.mlx-hero .divider{width:1px;height:64px;background:linear-gradient(180deg,var(--ml-gold-strich),transparent);margin:2rem auto 0}

/* ─── Hero-Einblendung „Ruhig & edel" (15.07.2026) ────────────────────────
   Logo blendet auf und waechst minimal, danach die Zeile, zuletzt der Strich.

   WICHTIG — .bg wird bewusst NICHT animiert:
   Das Hintergrundbild ist laut PageSpeed das LCP-Element dieser Seite. Startete es bei
   opacity:0, zaehlte Google es erst als "gemalt", wenn es sichtbar wird -> der LCP waere
   kuenstlich um die Animationsdauer schlechter, ohne dass irgendetwas langsamer geworden
   waere. Genau dieses Bild haben wir gerade erst aus dem Lazy-Loading geholt, um von
   8,7 s runterzukommen. Also: Finger weg.

   Animiert werden nur Logo, Zeile und Strich - kleiner als das Hintergrundbild und damit
   nie das LCP-Element. Ausschliesslich opacity und transform: laeuft auf der Grafikkarte,
   loest kein Neu-Layout aus, ruehrt das CLS von 0 nicht an. Kosten: 0 ms, reines CSS.

   Das theme.css-Gegenstueck (hlWord/hlEle/hlSince, Zeile 170-172) gehoert zu .hero-logo -
   einer Hero-Variante mit Slider, die front-page.php gar nicht ausgibt. Toter Code.
   Deshalb hier neu, statt dort zu flicken. */
.mlx-hero .logo-gross{animation:mlxLogo .9s var(--e,cubic-bezier(.22,1,.36,1)) .15s both}
.mlx-hero .line      {animation:mlxAuf  .7s var(--e,cubic-bezier(.22,1,.36,1)) .75s both}
.mlx-hero .divider   {animation:mlxStrich .8s var(--e,cubic-bezier(.22,1,.36,1)) 1s both;transform-origin:top center}
@keyframes mlxLogo{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
@keyframes mlxAuf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mlxStrich{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:none}}

/* Wer im Betriebssystem "Bewegung reduzieren" gesetzt hat, sieht alles sofort.
   Das Theme haelt es bei .rv (theme.css Zeile 383) genauso - hier dieselbe Haltung. */
@media (prefers-reduced-motion: reduce){
  .mlx-hero .logo-gross,.mlx-hero .line,.mlx-hero .divider{animation:none}
}

/* Gerahmte Fotos (Empfehlungen, Ayurveda/Gutschein, Buffet) */
.mlx-frames{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.4rem}
.mlx-frame{border:1px solid var(--ml-linie);padding:.65rem;background:var(--ml-gruen-panel)}
.mlx-frame img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.mlx-frame img.quer{aspect-ratio:4/3}
.mlx-frame .cap{padding:.95rem .4rem .45rem;text-align:center}
.mlx-frame .cap h3{font-size:1.35rem;margin-bottom:.3rem}
.mlx-frame .cap p{font-size:.86rem;color:var(--ml-text-leise);line-height:1.6;margin:0 0 .2rem}
.mlx-frame .cap a{display:inline-flex;align-items:center;min-height:42px;font-family:var(--ml-schrift-label);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ml-champagner);border-bottom:1px solid var(--ml-linie)}
.mlx-frame .cap a:hover{color:var(--ml-creme)}

/* Öffnungszeiten-Karte */
.mlx-times{max-width:600px;margin:0 auto;border:1px solid var(--ml-linie);padding:2.5rem clamp(1.3rem,5vw,3.2rem);text-align:center;position:relative;background:var(--ml-gruen-panel)}
.mlx-times::before{content:'';position:absolute;inset:7px;border:1px solid rgba(214,180,120,.35);pointer-events:none}
.mlx-times .row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.8rem 0;border-bottom:1px solid rgba(249,245,231,.16);font-size:1rem}
.mlx-times .row:last-of-type{border-bottom:none}
.mlx-times .row b{font-family:var(--ml-schrift-label);font-weight:400;letter-spacing:.06em;color:var(--ml-creme)}
.mlx-times .row span{font-family:var(--ml-schrift-titel);font-size:1.3rem;color:var(--ml-gold-zahlen)}
.mlx-times .tel{display:inline-block;margin-top:1.2rem;font-family:var(--ml-schrift-titel);font-size:1.65rem;color:var(--ml-gold-zahlen)}
.mlx-times .fine{font-size:.84rem;color:var(--ml-text-leise);margin-top:.7rem}

/* Zwei-Spalter (Ayurveda/Gutschein) + Buffet-Split */
.mlx-duo{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
/* Teaser-Bilder haben teils eingebackenen Text — natürliche Proportion, nicht beschneiden */
.mlx-duo .mlx-frame img{aspect-ratio:auto;height:auto}
.mlx-split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.mlx-split .mail,.mlx-split .links a{color:var(--ml-champagner);border-bottom:1px solid var(--ml-linie)}
.mlx-split .links{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.4rem}
.mlx-split .links a{display:inline-flex;align-items:center;min-height:42px;font-family:var(--ml-schrift-label);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}
.mlx-split .links a:hover{color:var(--ml-creme)}

/* Anfahrt (DSGVO-Karte) */
.mlx-map{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.4rem;align-items:stretch}
.mlx-map .info{display:flex;flex-direction:column;gap:1rem;justify-content:center}
.mlx-map address{font-style:normal;line-height:1.8;color:var(--ml-text-hell)}
.mlx-map .map-consent{border:1px solid var(--ml-linie);background:var(--ml-gruen-panel);min-height:320px}
.mlx-map .mlv2-map-frame{width:100%;height:100%;min-height:320px;border:1px solid var(--ml-linie)}

/* Reservierung */
.mlx-cta .lead{max-width:640px;margin:0 auto 1.6rem}

/* Knöpfe des Eltern-Themes auf dunklen Seiten in Elfenbein */
.map-consent .btn-gold{background:var(--ml-knopf);color:var(--ml-knopf-text)}
.map-consent .btn-gold:hover{background:var(--ml-knopf-hover);box-shadow:none;transform:none}
main.on-olive > .sec .btn-gold{background:var(--ml-knopf);color:var(--ml-knopf-text);border-radius:0}
main.on-olive > .sec .btn-gold:hover{background:var(--ml-knopf-hover);box-shadow:none;transform:none}
main.on-olive > .sec .btn-line-light{border-radius:0}


/* =========================================================================
   5. FUSSZEILE + FESTE HANDY-AKTIONSLEISTE
   ========================================================================= */
.site-footer{background:var(--ml-fuss);margin-top:4rem}
.site-footer a{color:rgba(249,245,231,.82)}
.site-footer a:hover{color:var(--ml-gold-hell)}
.mlx-mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:210;background:var(--ml-fuss);border-top:1px solid rgba(241,235,217,.25)}
.mlx-mbar a{flex:1;display:flex;align-items:center;justify-content:center;min-height:56px;font-family:var(--ml-schrift-label);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ml-creme)}
.mlx-mbar a.res{background:var(--ml-knopf);color:var(--ml-knopf-text)}

/* Fokus-Rahmen auf Dunkel gut sichtbar */
.mlx-dark :focus-visible,.mlx-hdr :focus-visible{outline:3px solid var(--ml-gold-hell);outline-offset:3px}


/* =========================================================================
   6. ANSICHT SCHMAL — Handy/Tablet
   ========================================================================= */
/* Unter ~1240px passt die Ein-Zeilen-Navigation nicht mehr →
   Handy-Menü + Aktionsleiste übernehmen. */
@media(max-width:1240px){
  .mlx-dnav,.mlx-tel,.mlx-act .mlx-btn{display:none}
  .mlx-act{margin-left:auto}
  .mlx-mnav{display:block;margin-left:auto}
  .mlx-mbar{display:flex}
  body{padding-bottom:56px}
}
@media(max-width:1024px){
  .mlx-frames,.mlx-duo,.mlx-split,.mlx-map{grid-template-columns:1fr}
  .mlx-frame img{aspect-ratio:16/10}
  .mlx-hero{min-height:min(56vh,520px)}
  .cat-nav{top:54px}
}
@media(prefers-reduced-motion:reduce){
  .mlx-btn,.mlx-frame .cap a{transition:none}
}


/* =========================================================================
   7. SPEISE- & GETRÄNKEKARTE
   Helles Papier auf dem grünen Untergrund. Speisekarte „Gedeckter Tisch":
   neben jedem Gericht mit Foto ein runder Teller (mal links, mal rechts,
   mal größer, mal kleiner). Gerichte ohne Foto stehen als reiner Satz;
   Kapitel ganz ohne Fotos bekommen eine gezeichnete Öllampe als Kopfzier.
   Getränke stehen als ruhige zweispaltige Liste. Suche, Filter, Allergene
   und die Daten kommen aus dem Eltern-Theme.
   ========================================================================= */

/* Kopf-KASTEN der Speise-/Getränkekarte: derselbe helle Briefkopf wie auf
   den anderen Unterseiten — mit der kleinen Ceylon-Karte als Motiv oben,
   Titel mittig, und mit Luft zum Blatt darunter. */
.ed-head-band{display:flex;flex-direction:column;align-items:center;text-align:center;
 max-width:940px;margin:1.6rem auto 1.4rem;
 background:url('assets/images/elegantia/body.png') #FBF8F0;
 border:1px solid #fce2af;border-bottom:3px double rgba(138,100,16,.4);
 padding:1.9rem clamp(1.4rem,4vw,3rem) 1.6rem}
.ed-head-band h1{text-align:center;font-size:clamp(2rem,4vw,2.9rem);color:var(--ml-karte-kapitel);line-height:1.1}
.ed-head-band h1 em{font-style:italic;color:#8A6410}
.ed-ov{display:block;font-family:var(--ml-schrift-label);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:#7E5C0B}
.ed-ov:before{content:none}
.ed-head-tx h1{margin-top:.4rem}
.ed-chefs{font-family:var(--ml-schrift-titel);font-style:italic;font-size:1.12rem;color:#565334;max-width:52ch;margin:.5rem auto 0}
/* Ceylon-Karte klein als Motiv ÜBER dem Titel */
.ed-map{order:-1;margin:0 0 1rem;text-align:center}
.ed-map img{display:block;width:min(210px,44vw);height:auto;background:#F7F2E4;padding:4px;
 border:1px solid rgba(190,154,94,.5);box-shadow:none;transform:rotate(1.4deg);margin:0 auto}
.ed-map figcaption{display:none}

/* Das helle Blatt */
.ed-menu .menu-main{background:var(--ml-papier);border:1px solid rgba(190,154,94,.55);
 box-shadow:0 26px 70px rgba(38,42,22,.38);max-width:1100px;padding:2.6rem clamp(1.2rem,4vw,3.4rem) 3rem}

/* Filterleiste als stilles Druck-REGISTER: gleiche Papierbahn wie der
   Kopf-Kasten, die Kennzeichnungen (Vegetarisch, Vegan, Scharf …) stehen
   als ruhige Kapitälchen-Reiter nebeneinander — die gewählte trägt einen
   Oliv-Strich. Keine Kästchen, keine bunten Blöcke, keine Suchleiste. */
.menu-search{display:none}
.menu-tools{max-width:940px;margin:1.3rem auto 0;padding:.5rem 1.2rem .55rem;
  background:url('assets/images/elegantia/body.png') #FBF8F0;
  border:1px solid #fce2af;border-radius:0;box-shadow:none}
.menu-filter{gap:.1rem 1.4rem}
.fbtn{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;
  font-family:var(--ml-schrift-label);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:#565334;min-height:44px;padding:.45rem .1rem;cursor:pointer}
.fbtn:hover{background:none;color:#1F2213;border-bottom-color:rgba(80,85,52,.4)}
/* Aktiv: einheitlich Oliv-Strich — überschreibt auch die bunten
   Kennfarben-Blöcke des Eltern-Themes (f-vegan, f-scharf …) */
.fbtn.is-on,
.fbtn.f-vegan.is-on,.fbtn.f-vegetarisch.is-on,.fbtn.f-glutenfrei.is-on,.fbtn.f-ayurveda.is-on,
.fbtn.f-fisch.is-on,.fbtn.f-fleisch.is-on,.fbtn.f-mild.is-on,.fbtn.f-scharf.is-on{
  background:none;color:#1F2213;border:0;border-bottom:2px solid var(--ml-olive)}
/* Allergen-Zeile auf derselben Papierbahn */
.allergen-legend{max-width:940px;border-radius:0;
  background:url('assets/images/elegantia/body.png') #FBF8F0;border-color:#fce2af}

/* Kapitel-Kopf: zentriert wie eine gebundene Karte, Goldraute als Schluss */
.ed-menu .ed-cat-head{text-align:center;margin-bottom:1.6rem}
/* GEAENDERT 26.07.2026: Hier stand ein getipptes Sternchen (Unicode 2726).
   Jetzt dasselbe Sternanis-Symbol wie unter den Seitentiteln — als Maske
   eingefaerbt, damit es die Themenfarbe traegt und auf jedem Geraet gleich
   aussieht. Ein Schriftzeichen haengt dagegen davon ab, welche Schrift der
   Browser dafuer findet. */
.ed-menu .ed-cat-head:after{content:"";display:block;width:min(150px,42%);
  aspect-ratio:829/110;margin:.7rem auto 0;background:#505534;
  -webkit-mask:url(assets/img/sternanis-divider.svg) center/contain no-repeat;
          mask:url(assets/img/sternanis-divider.svg) center/contain no-repeat}
.ed-menu .ed-cat-head .ed-ov{color:#7E5C0B}
.ed-menu .ed-cat-head .ed-ov:before{content:none}
.ed-cat-head h2{font-size:clamp(1.8rem,3.2vw,2.5rem);color:var(--ml-karte-kapitel);margin-top:.25rem}
.hh-vign{display:block;width:46px;height:auto;margin:0 auto .4rem}

/* Gerichte: ruhige Einträge statt Karten-Kacheln (Basis für Speise + Getränke) */
.ed-menu .menu-main .dish{display:block;background:none;border-radius:0;box-shadow:none;padding:1.35rem 0 0;
 margin-top:1.35rem;border-top:1px solid rgba(138,100,16,.20);transition:none}
.ed-menu .menu-main .dish:hover{transform:none;box-shadow:none}
.ed-menu .menu-main .dish:first-of-type{border-top:none;margin-top:0;padding-top:0}
.ed-row{display:flex;align-items:baseline;gap:1.4rem;justify-content:space-between}
.ed-menu .dish h3,.ed-menu .dish .dish-nm{font-size:1.42rem;line-height:1.3;color:var(--ml-karte-name)}
.ed-menu .dish .dish-no{font-family:var(--ml-schrift-text);font-size:.8rem;font-weight:500;color:var(--ml-karte-nummer);margin-right:.15rem}
.ed-menu .dish .dish-price{font-family:var(--ml-schrift-titel);font-size:1.34rem;font-weight:600;color:var(--ml-karte-preis);white-space:nowrap}
.ed-menu .dish .dish-dc{font-family:var(--ml-schrift-titel);font-style:italic;font-size:1.12rem;color:var(--ml-karte-text);max-width:52ch;margin-top:.2rem}
.ed-menu .dish .dish-variant{font-size:.98rem;color:var(--ml-karte-text)}
/* Kennzeichnungen: stille Worte statt bunter Pillen */
.ed-meta{margin-top:.5rem;font-family:var(--ml-schrift-label);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ml-karte-label);overflow-wrap:anywhere}
.ed-meta .m + .m:before{content:"·";margin:0 .55rem;color:#B99753}
.ed-meta .heat{color:var(--ml-karte-scharf)}
.ed-menu .dish .dish-allergene{font-size:.78rem;letter-spacing:.08em;color:var(--ml-karte-allergene);margin-top:.35rem}
/* Hinweis-Kasten als ruhige Zeile im Doppelrahmen-Stil */
.ed-menu .menu-note{background:none;border:1px solid rgba(180,142,80,.5);border-radius:0;position:relative;
 padding:1.6rem 1.8rem;margin-top:3.4rem;font-family:var(--ml-schrift-titel);font-style:italic;font-size:1.04rem;color:var(--ml-karte-text);text-align:center}
.ed-menu .menu-note:before{content:"";position:absolute;inset:7px;border:1px solid rgba(190,154,94,.22);pointer-events:none}
.ed-menu .menu-note strong{font-style:normal}

/* Speisekarte „Gedeckter Tisch": runder Teller neben dem Satz */
.hh-cat{margin-top:3.4rem;padding-top:2.8rem;border-top:1px solid rgba(138,100,16,.30)}
.hh-cat:first-child{margin-top:.6rem;padding-top:0;border-top:none}
.ed-menu .menu-main .hh-dish{display:grid;grid-template-columns:104px minmax(0,1fr);gap:1rem 1.2rem;
 align-items:start;background:none;border-radius:0;box-shadow:none;transition:none;
 margin-top:2rem;padding:1.8rem 0 0;border-top:1px solid rgba(138,100,16,.18)}
.ed-menu .menu-main .hh-dish:hover{transform:none;box-shadow:none}
.ed-menu .menu-main .hh-dish:first-of-type{border-top:none;margin-top:0;padding-top:0}
.ed-menu .menu-main .hh-dish[hidden]{display:none}
/* Ankommen von der Startseite: die Bild-Kacheln dort springen auf „#gericht-71"
   (siehe front-page.php). Etwas Luft über dem Gericht, damit es nicht direkt an
   der Fensterkante klebt — und eine ruhige Markierung, damit man sieht, welches
   Gericht gemeint war. Kein Blinken, kein Farbschock: nur ein Goldstrich links
   und ein Hauch wärmeres Papier. */
.ed-menu .menu-main .hh-dish{scroll-margin-top:1.6rem}
.ed-menu .menu-main .hh-dish:target{
 background:linear-gradient(90deg,rgba(201,151,58,.13),rgba(201,151,58,0) 55%)}
/* Teller wechseln die Seite AUCH am Handy (mal links, mal rechts) */
.ed-menu .menu-main .hh-dish.hh-right{grid-template-columns:minmax(0,1fr) 104px}
.hh-dish.hh-right .hh-plate{order:2}
.ed-menu .menu-main .hh-dish.hh-noimg{grid-template-columns:minmax(0,1fr)}
.hh-plate{display:block;border-radius:50%;padding:5px;border:1px solid rgba(190,154,94,.6);background:#fff}
.hh-plate img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:50%;margin:0;box-shadow:none}
.hh-tx{min-width:0}
.hh-row{display:flex;align-items:baseline;justify-content:space-between;gap:.3rem 1.2rem;flex-wrap:wrap}

/* Getränke: zweispaltige ruhige Listen ohne Bilder */
.ed-dcat{margin-top:3.2rem;padding-top:2.6rem;border-top:1px solid rgba(138,100,16,.30)}
.ed-dcat:first-child{margin-top:.4rem;padding-top:0;border-top:none}
.ed-dlist{columns:2;column-gap:3.4rem;margin-top:.4rem}
.ed-dlist .dish{break-inside:avoid}

/* Helle Inhaltsseiten (Team, FAQ, Kottu Roti, Aktions-Seiten …): dunkle
   Grundschrift UND dunkle Überschriften erzwingen. Sonst erben Überschriften
   im Inhalt die helle Kopfband-Farbe und werden auf dem hellen Papier
   unsichtbar (Inhalt steht in diesen Vorlagen innerhalb von .page-head). */
.entry{color:#33362A}
.entry h1,.entry h2,.entry h3,.entry h4,.entry h5,.entry h6{color:#3E4227}
.entry h4,.entry h5,.entry h6{font-family:var(--ml-schrift-titel);font-weight:600}
.entry h4{font-size:1.5rem}
/* Handy-Sicherung: fest breite Video-Einbettungen und Spalten dürfen 390px nicht sprengen */
.entry iframe,.entry embed,.entry object,.entry video{max-width:100%}
.entry .wp-block-column,.entry .wp-block-group{max-width:100%;min-width:0}

/* Speise-/Getränkekarte — Ansicht schmal */
@media(max-width:760px){
  .ed-head-band{margin-left:.6rem;margin-right:.6rem;padding:1.7rem 1.2rem 1.4rem}
}
@media(min-width:860px){
  .ed-menu .menu-main .hh-dish{grid-template-columns:190px minmax(0,1fr);gap:1rem 2.6rem}
  .ed-menu .menu-main .hh-dish.hh-right{grid-template-columns:minmax(0,1fr) 190px}
  .hh-dish.hh-right .hh-plate{order:2}
  .ed-menu .menu-main .hh-dish.hh-noimg{grid-template-columns:minmax(0,1fr);padding-left:calc(190px + 2.6rem)}
  .ed-menu .menu-main .hh-dish.hh-noimg.hh-right{padding-left:0;padding-right:calc(190px + 2.6rem)}
  .hh-plate{padding:7px}
  .hh-dish.hh-small .hh-plate{width:150px;margin:0 auto}
}
@media(max-width:900px){
  .ed-dlist{columns:1}
}
@media(max-width:600px){
  .ed-row,.hh-row{flex-wrap:wrap;gap:.3rem .9rem}
  .ed-menu .menu-main{padding:1.8rem 1rem 2.2rem}
}


/* =========================================================================
   8. EINZELSEITEN — jede Seite bekommt ihr eigenes Motiv im Briefkopf
   Rechts im hellen Briefkopf sitzt eine kleine, selbst gezeichnete Grafik
   (Sri-Lanka-Motiv, passend zur Seite), damit die Seiten sich voneinander
   unterscheiden. FAQ bleibt bewusst schlicht ohne Motiv. Rein dekorativ.
   Die Klasse ml-<seitenname> setzt functions.php automatisch.
   ========================================================================= */
/* Motiv-Kästchen (order:-1 = sitzt oben, zentriert) nur auf diesen fünf
   Seiten — FAQ/Recht bleiben ohne. */
.ml-unser-team .page-head:not(.ed-head-band)::after,
.ml-fotos-von-der-mount-lavinia .page-head:not(.ed-head-band)::after,
.ml-welcher-ayurveda-typ-bist-du .page-head:not(.ed-head-band)::after,
.ml-buffets-und-catering-in-nuernberg .page-head:not(.ed-head-band)::after,
.ml-ceylonesische-gewurze .page-head:not(.ed-head-band)::after{
  order:-1;content:"";display:block;width:66px;height:60px;margin:0 auto 1rem;
  background-position:center;background-repeat:no-repeat;background-size:contain}
.ml-unser-team .page-head::after{background-image:url(assets/img/moonstone.svg)}                       /* Mondstein — Schwelle/Willkommen */
.ml-fotos-von-der-mount-lavinia .page-head::after{background-image:url(assets/img/ninearch.svg)}       /* Nine-Arch-Brücke — Wahrzeichen */
.ml-welcher-ayurveda-typ-bist-du .page-head::after{background-image:url(assets/img/lotus.svg)}         /* Lotus — Ruhe/Ayurveda */
.ml-buffets-und-catering-in-nuernberg .page-head::after{background-image:url(assets/img/drummer.svg)}  /* Trommler — Fest & Feier */
.ml-ceylonesische-gewurze .page-head::after{background-image:url(assets/img/botanik-zimt.svg)}         /* Ceylon-Zimt, botanisch */
/* Getränkekarte: King Coconut (Trinkkokosnuss) als Motiv im Kopf-Kasten —
   die Speisekarte hat dort ihre kleine Ceylon-Karte (.ed-map). */
.ml-getraenke .ed-head-band::after{order:-1;content:"";width:60px;height:66px;margin:0 auto 1rem;
  background:url(assets/img/king-coconut.svg) center/contain no-repeat}