/*
Theme Name:   Valle — Divi Child
Theme URI:    https://www.ristorante-valle.de
Description:  Child-Theme fuer Ristorante Valle. Designlayer, Motion-Klassen und Speisekarten-Ausgabe.
Author:       SONDERLING
Author URI:   https://www.sonderling.de
Template:     Divi
Version:      2.1.1
Text Domain:  valle-child
*/

/* =========================================================
   1) DIVI-KORREKTUREN
   Divi bringt Standardabstaende und Containerbreiten mit,
   die dem Full-Bleed-Layout im Weg stehen.
   ========================================================= */
.et_pb_section{padding:0;background-color:transparent} /* Divi-Default ist WEISS — auf Body-Creme scheinen sonst an Sektionsnaehten beige Streifen durch */
.et_pb_row{width:100%;max-width:none;padding:0;margin:0}
.et_pb_column{margin-right:0}
.et_pb_row .et_pb_column{padding:0}
#page-container{overflow-x:hidden;overflow-x:clip;padding-top:0!important} /* Divi-Inline-Padding (Fixed-Header) raus — Hero laeuft unter den Header */

/* Divi-Standard-Paddings an Typo raus — Abstaende kommen aus den Komponenten */
h1,h2,h3,h4,h5,h6{padding-bottom:0}
p{padding-bottom:0}

/* Divi-Header: transparent ueber dem Hero, danach Milchglas */
#main-header{box-shadow:none!important;background:transparent!important;transition:.5s cubic-bezier(.19,1,.22,1)}
#main-header.valle-solid{
  background:rgba(242,238,231,.82)!important;
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
#main-header #top-menu li a{font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82);
  display:inline-block;position:relative;padding:0!important;opacity:1!important;transition:color .35s} /* Divi-padding-bottom (Dropdown-Bruecke) drueckt die Links sonst nach oben */
#main-header #top-menu li a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.19,1,.22,1)}
#main-header #top-menu li a:hover{color:#fff}
#main-header #top-menu li a:hover::after,#main-header #top-menu li.current-menu-item>a::after{transform:scaleX(1)}
#main-header.valle-solid #top-menu li a{color:var(--ink)!important}
#main-header.valle-solid #top-menu li.current-menu-item>a{color:var(--red)!important}
.et_pb_menu__logo img{opacity:0}
#logo{display:none}                             /* Divi-Logo aus, wir nutzen die CSS-Maske */
#main-header .logo_container a{display:block;width:66px;height:66px;color:#fff;transition:.5s cubic-bezier(.19,1,.22,1)}
#main-header .logo_container a::before{content:"";display:block;width:100%;height:100%;background:currentColor;
  -webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat}
#main-header.valle-solid .logo_container a{color:var(--red);width:50px;height:50px}
#et_top_search,#et_search_icon{display:none!important}  /* Divi-Suche raus */
#main-header .container{width:calc(100% - 2*var(--m));max-width:none;
  padding-top:26px;padding-bottom:26px;transition:padding .5s cubic-bezier(.19,1,.22,1)}
#main-header.valle-solid .container{padding-top:14px;padding-bottom:14px}

/* Header-Layout: Logo links, Navigation rechts — Divi-Floats/Absolute durch Flex ersetzt
   (gilt Desktop UND Mobile; Divis eigenes Layout bricht sonst in die 2. Zeile um) */
#main-header .container{display:flex;align-items:center;justify-content:space-between}
#main-header .logo_container{position:relative;z-index:10;float:none;width:auto;flex:0 0 auto}
#main-header .logo_helper{display:none} /* Divi-Platzhalter drueckt das Logo sonst nach unten */
#main-header #et-top-navigation{position:static;float:none;padding:0!important;display:flex;align-items:center;margin-left:auto;width:auto}
#main-header #top-menu-nav{width:auto}
#main-header #top-menu{display:flex;align-items:center;gap:30px;width:auto!important;justify-content:flex-end;
  position:static!important;padding:0!important} /* Divi positioniert das ul absolut an den Header-Top */
#main-header #top-menu li{padding:0;margin:0}
#main-header #et_mobile_nav_menu{float:none;margin-left:auto}

/* Mobile-Header: Desktop-Menue aus (unsere Flex-Regel schlaegt sonst Divis Hide),
   Burger weiss ueber Hero, Dropdown im Valle-Look */
/* Burger: eigene feine Striche statt Divi-Icon-Font, vertikal zentriert zum Logo */
#main-header .mobile_menu_bar{width:24px;height:16px!important;min-height:0;padding:0;position:relative;display:block;z-index:10;
  color:#fff;transition:color .35s}
#main-header.valle-solid .mobile_menu_bar{color:var(--ink)}
#main-header .mobile_menu_bar:before{content:""!important;position:absolute;top:50%;margin-top:-8px;left:0;width:24px;height:1.5px;
  color:inherit!important; /* Divi setzt sein Blau direkt am :before */
  background:currentColor;box-shadow:0 7px 0 currentColor;font-size:0;
  transition:transform .35s,box-shadow .35s,margin-top .35s}
#main-header .mobile_menu_bar:after{content:""!important;position:absolute;top:50%;margin-top:6px;left:0;width:24px;height:1.5px;
  color:inherit!important;background:currentColor;font-size:0;
  transition:transform .35s,margin-top .35s}
/* Offen: Burger wird X */
#main-header:has(.mobile_nav.opened) .mobile_menu_bar:before{margin-top:-1px;box-shadow:0 0 0 rgba(0,0,0,0);transform:rotate(45deg)}
#main-header:has(.mobile_nav.opened) .mobile_menu_bar:after{margin-top:-1px;transform:rotate(-45deg)}
/* Offenes Menue: helles Overlay -> Logo rot, Burger dunkel */
#main-header:has(.mobile_nav.opened) .logo_container a{color:var(--red)}
#main-header:has(.mobile_nav.opened) .mobile_menu_bar{color:var(--ink)}
@media(max-width:980px){
  /* Divi laesst den Header mobil nicht mitfahren — wir schon */
  #main-header{position:fixed!important;top:0;left:0;right:0}
  #main-header #top-menu-nav{display:none}
  /* Fullscreen-Menue im Editorial-Look */
  .et_mobile_menu{position:fixed!important;top:0!important;left:0!important;width:100vw!important;
    height:100svh!important;margin:0!important;padding:140px var(--m) 60px!important;
    background:var(--paper)!important;border:0!important;box-shadow:none!important;
    overflow-y:auto;overscroll-behavior:contain;z-index:1}
  .et_mobile_menu li a{font-family:var(--serif);font-weight:500;font-size:clamp(30px,9vw,46px);
    letter-spacing:0;text-transform:none;line-height:1.15;color:var(--ink)!important;
    padding:12px 0;border-bottom:0}
  .et_mobile_menu li a:hover{color:var(--red)!important;background:none}
}
/* (Logo laeuft ueber .logo_container-Maske, s. unten — alte .valle-mark-Header-Regeln entfernt) */

/* Divi-eigene Animationen ausschalten, wo wir eigene nutzen */
.r.et_animated,.mask.et_animated{animation:none!important}

/* =========================================================
   2) DESIGNLAYER (aus dem Prototyp)
   ========================================================= */
@font-face{font-family:'Soria';src:url(fonts/soria-font.ttf) format('truetype');font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:#F2EEE7; --paper-2:#EAE4DA; --ink:#1C1815; --ink-2:#4A433B;
  --red:#B70E0C; --red-2:#8E0907; --muted:#948B7D; --line:#D6CEC1; --dark:#13100D;
  --serif:'Soria','Playfair Display',Georgia,serif;
  --sans:'astoria','Gill Sans','Gill Sans MT','Hanken Grotesk',-apple-system,sans-serif;
  --m:clamp(20px,5.5vw,96px);
  --ease:cubic-bezier(.19,1,.22,1);
  --mark:url("img/logo-valle.svg?v=2");   /* ?v hochzaehlen, wenn das Logo getauscht wird — Cache laeuft ein Jahr */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* clip statt hidden: hidden macht body/page-container zum Scroll-Container und
     setzt damit jedes position:sticky im Dokument ausser Kraft. clip haelt den
     Ueberlauf genauso zurueck, ohne einen Scrollport zu erzeugen. */
  overflow-x:hidden;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.02;letter-spacing:-.005em}

.lbl{font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.lbl--red{color:var(--red)}

/* Buttons: Ruhe = weiss + rote Schrift + roter Rahmen.
   Hover  = graue Flaeche waechst schraeg von links ein, Rahmen loest sich auf,
            Schrift bleibt rot, Laufweite zieht leicht auf. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;font-family:var(--sans);font-weight:500;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;padding:15px 30px;border-radius:100px;
  border:1px solid var(--red);color:var(--red);cursor:pointer;overflow:hidden;
  background-color:transparent;
  background-image:linear-gradient(100deg,rgba(28,24,21,.09) 0 86%,rgba(28,24,21,0) 86% 100%);
  background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  transition:background-size .5s var(--ease),border-color .4s var(--ease),letter-spacing .5s var(--ease),
    border-radius .45s var(--ease),color .4s var(--ease)}
.btn:hover,.btn:focus-visible{background-size:170% 100%;border-color:transparent;color:var(--red);
  letter-spacing:.26em;border-radius:0}
.btn--red{border-color:var(--red);color:var(--red)}
.btn--red:hover{border-color:transparent;color:var(--red)}
.btn--fill{background:var(--red);border-color:var(--red);color:#fff}
.btn--fill:hover{background:transparent;color:var(--red)}
/* Hero/dunkler Grund: gleiche Mechanik, helle Flaeche */
.btn--light{border-color:rgba(255,255,255,.55);color:#fff;background-color:transparent;
  background-image:linear-gradient(100deg,rgba(255,255,255,.16) 0 86%,rgba(255,255,255,0) 86% 100%)}
.btn--light:hover{border-color:rgba(255,255,255,.9);color:#fff}

.mark{background-color:currentColor;-webkit-mask:var(--mark) center/contain no-repeat;
  mask:var(--mark) center/contain no-repeat;display:block}

/* (Prototyp-Navigation .nav* entfernt — der echte Header laeuft ueber #main-header, s. Block 1) */

/* HERO */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
/* Scrims: die Prototyp-Elemente hero__scrim/phead__scrim/break__scrim existieren im
   generierten Markup nicht — als ::before an den Sektionen nachgeruestet */
.valle-hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,9,7,.44),rgba(12,9,7,0) 30%,rgba(12,9,7,.08) 55%,rgba(12,9,7,.7))}
.valle-phead:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,9,7,.5),rgba(12,9,7,.1) 45%,rgba(12,9,7,.72))}
/* (Break-Scrim entfernt — die Sektion hat seit 28.07. ein eigenes Divi-Gradient-Overlay) */
.valle-hero .et_pb_row,.valle-phead .et_pb_row,.et_pb_section.break .et_pb_row{position:relative;z-index:2}
.hero__in{position:relative;z-index:3;padding:0 var(--m) clamp(40px,6vw,74px);color:#fff;
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.hero__line{font-family:var(--serif);font-size:clamp(34px,5.6vw,86px);line-height:1.02;color:#fff;max-width:14ch}
.hero__line em{font-family:var(--sans);font-style:italic;font-weight:300;font-size:.82em}
.hero__meta{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.hero__meta .lbl{color:rgba(255,255,255,.75)}
.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;width:1px;height:54px;background:rgba(255,255,255,.3);overflow:hidden}
.hero__scroll::after{content:"";position:absolute;inset:0;background:#fff;animation:drop 2.4s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* PAGE HEAD (Unterseiten) */
.phead{position:relative;height:74svh;min-height:460px;overflow:hidden;display:flex;align-items:flex-end}
/* (phead nutzt das Sektions-Hintergrundbild; Scrim kommt als ::before, s. HERO-Block) */
.phead__in{position:relative;z-index:3;padding:0 var(--m) clamp(36px,5vw,64px);color:#fff}
.phead__in h1{font-size:clamp(44px,8.5vw,140px);color:#fff;margin-top:14px}
.phead .lbl{color:rgba(255,255,255,.75)}

/* LEDE */
.lede{padding:clamp(100px,15vw,220px) var(--m);text-align:center}
.lede__t{font-family:var(--serif);font-size:clamp(24px,3.4vw,46px);line-height:1.3;max-width:22ch;margin:28px auto 0}
.lede__t em{font-family:var(--sans);font-style:italic;font-weight:300;color:var(--red);font-size:.86em}
.lede .btn{margin-top:44px}

/* TRIPTYCH */
.tri{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin:0 var(--m)}
.tri__c{padding:44px 34px 54px;border-right:1px solid var(--line);text-align:center}
.tri__c:last-child{border-right:0}
.tri__c figure{overflow:hidden;margin-bottom:26px}
.tri__c img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s var(--ease)}
.tri__c:hover img{transform:scale(1.045)}
.tri__c p{font-size:14.5px;color:var(--ink-2);max-width:34ch;margin:12px auto 0}

/* STATS */
.stats{margin:clamp(60px,8vw,110px) var(--m) 0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(34px,4vw,54px) 0}
.stat{text-align:center}
.stat b{display:block;font-family:var(--serif);font-weight:500;color:var(--red);font-size:clamp(38px,5vw,72px);line-height:1}
.stat span{display:block;margin-top:8px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* SPLIT */
.split{padding:clamp(100px,14vw,200px) var(--m);display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,6vw,100px);align-items:center}
.split__txt h2{font-size:clamp(34px,4.6vw,72px);margin-top:22px}
.split__txt h2 em{font-family:var(--sans);font-style:italic;font-weight:300;color:var(--red);font-size:.78em}
.split__txt p{margin-top:24px;color:var(--ink-2);max-width:44ch;font-size:16px}
.split__txt .btn{margin-top:34px}
.split__sign{margin-top:30px;font-family:var(--sans);font-style:italic;font-weight:300;font-size:19px}
.split__sign small{display:block;font-style:normal;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-top:7px}
.split__media{position:relative}
.split__media .big{overflow:hidden}
.split__media .big img{width:100%;aspect-ratio:4/5;object-fit:cover}
.split__media .small{position:absolute;left:-9%;bottom:-9%;width:42%;overflow:hidden;border:8px solid var(--paper)}
.split__media .small img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(1)}
.split--rev{direction:rtl}.split--rev>*{direction:ltr}

/* BREAK */
.break{position:relative;height:92svh;min-height:520px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.break video,.break>img{position:absolute;inset:0;width:100%;height:114%;object-fit:cover;z-index:0;filter:brightness(.5) contrast(1.06) sepia(.12)}
/* (break-Scrim kommt als ::before, s. HERO-Block) */
.break__in{position:relative;z-index:3;color:#fff;padding:0 var(--m);width:100%}
.break__caps{display:flex;justify-content:space-between;align-items:baseline;max-width:1100px;margin:0 auto;
  font-family:var(--serif);font-size:clamp(30px,6.6vw,96px);letter-spacing:.06em;line-height:1}
.break__sub{font-family:var(--sans);font-style:italic;font-weight:300;font-size:clamp(15px,1.7vw,21px);color:rgba(255,255,255,.86);max-width:44ch;margin:34px auto 0}

/* CARTA */
.carta{position:relative;background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(90px,12vw,170px) var(--m);overflow:hidden}
.carta__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:46px}
.carta__head h2{font-size:clamp(44px,7.5vw,124px)}
.carta__head p{max-width:32ch;color:var(--ink-2);font-size:15px}
.tabs{display:flex;flex-wrap:wrap;gap:2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  position:sticky;top:78px;z-index:20;background:rgba(234,228,218,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);margin-bottom:clamp(44px,6vw,72px)}
.tab{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  background:none;border:0;cursor:pointer;padding:18px 20px;position:relative;transition:color .4s}
.tab::after{content:"";position:absolute;left:20px;right:20px;bottom:-1px;height:1px;background:var(--red);transform:scaleX(0);transition:transform .5s var(--ease)}
.tab:hover{color:var(--ink)}.tab.on{color:var(--red)}.tab.on::after{transform:scaleX(1)}
.panel{display:none}.panel.on{display:block}
.panel__note{font-family:var(--sans);font-style:italic;font-weight:300;font-size:16px;color:var(--muted);margin-bottom:38px;max-width:56ch}
.dishes{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,7vw,110px)}
.dish{display:grid;grid-template-columns:1fr auto;column-gap:20px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.dish__n{font-family:var(--sans);font-weight:600;font-size:16px}
.dish__de{font-family:var(--sans);font-style:italic;font-weight:300;color:var(--ink-2);font-size:15px;margin-top:5px;line-height:1.45}
.dish__en{font-family:var(--sans);font-style:italic;font-weight:300;color:var(--muted);font-size:13px;margin-top:2px}
/* Preise in Astoria */
.dish__p{font-family:var(--sans);font-weight:600;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.carta__foot{margin-top:52px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.carta__fine{margin-top:22px;font-size:12px;color:var(--muted)}

/* Wochenkarte (erster Tab in der Speisekarte) */
.week__top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.week__title{font-family:var(--serif);font-size:clamp(24px,3vw,38px);line-height:1.1}
.week__range{font-family:var(--sans);font-style:italic;font-weight:300;color:var(--muted);font-size:15px;margin-top:6px}
.week__head{grid-column:1/-1;margin:34px 0 10px}
.week__head:first-child{margin-top:0}
.week__note{margin-top:26px}
/* Getränke o. ä. mit mehreren Mengen-Preisen in einer Zeile */
.dish__p--multi{display:flex;gap:18px;font-size:15px;font-weight:400;white-space:nowrap}
.dish__q{font-style:normal;font-weight:400;color:var(--muted)} /* Mengenangabe neutral, nur der Preis im Rot */
@media(max-width:620px){
  /* mehrspaltige Preise bekommen mobil eine eigene Zeile unter dem Namen */
  .dish:has(.dish__p--multi){grid-template-columns:1fr}
  .dish:has(.dish__p--multi) .dish__p{margin-top:10px;gap:16px}
}

/* GALLERY */
.gal{padding:clamp(100px,14vw,200px) var(--m) 0}
.gal__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,70px)}
.gal__head h2{font-size:clamp(40px,7vw,116px)}
.gal__head p{max-width:32ch;font-family:var(--sans);font-style:italic;font-weight:300;color:var(--muted);font-size:18px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,20px)}
.grid figure{overflow:hidden;position:relative}
.grid img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.grid figure:hover img{transform:scale(1.05)}
.grid .bw img{filter:grayscale(1) contrast(1.03)}
.grid .bw:hover img{filter:grayscale(0)}
/* (a1–a5 liegen gescoped in Block 3 auf .gal .grid — ungescopte Altlasten entfernt,
   damit sie nicht in die Masonry-Galerie funken) */

/* ---- KAPITEL (Unterseite Küche) ---- */
.chap{padding:clamp(90px,12vw,170px) var(--m);display:grid;grid-template-columns:auto 1fr 1.1fr;
  gap:clamp(24px,4vw,70px);align-items:start;border-top:1px solid var(--line)}
.chap__no{font-family:var(--serif);font-size:clamp(28px,3vw,46px);color:var(--red);line-height:1;padding-top:6px}
.chap__txt{position:sticky;top:172px}
.chap__txt h2{font-size:clamp(30px,3.9vw,58px);margin-top:16px}
.chap__txt h2 em{font-family:var(--sans);font-style:italic;font-weight:300;color:var(--red);font-size:.78em}
.chap__txt p{margin-top:22px;color:var(--ink-2);font-size:16px;max-width:42ch}
.chap__facts{margin-top:28px;border-top:1px solid var(--line)}
.chap__facts div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.chap__facts div span:first-child{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:10.5px;align-self:center}
.chap__facts div span:last-child{font-family:var(--sans);font-style:italic;font-weight:300}
.chap__media{display:grid;gap:clamp(10px,1.4vw,18px)}
.chap__media figure{overflow:hidden}
.chap__media img{width:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.chap__media figure:hover img{transform:scale(1.04)}
.chap__media .tall img{aspect-ratio:4/5}
.chap__media .wide img{aspect-ratio:16/10}
.chap__media .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px)}
.chap__media .duo img{aspect-ratio:1/1}

/* PULLQUOTE */
.pull{padding:clamp(80px,11vw,160px) var(--m);text-align:center;background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pull q{font-family:var(--serif);font-size:clamp(26px,4vw,58px);line-height:1.2;max-width:20ch;display:block;margin:0 auto;quotes:none}
.pull q em{font-family:var(--sans);font-style:italic;font-weight:300;color:var(--red);font-size:.8em}
.pull cite{display:block;margin-top:28px;font-style:normal;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}

/* STRIP */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,16px);padding:0 var(--m)}
.strip figure{overflow:hidden}
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.3s var(--ease)}
.strip figure:hover img{transform:scale(1.05)}

/* NEXT PAGE */
.next{padding:clamp(80px,11vw,150px) var(--m);text-align:center}
.next a{display:inline-block}
.next h2{font-size:clamp(34px,6vw,90px);transition:color .4s}
.next a:hover h2{color:var(--red)}

/* ANFAHRT */
.loc{padding:clamp(100px,14vw,200px) var(--m)}
.loc__head{margin-bottom:clamp(38px,5vw,64px)}
.loc__head h2{font-size:clamp(40px,7vw,116px);margin-top:14px}
.loc__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,4vw,60px)}
.loc__map{position:relative;min-height:680px;overflow:hidden;border:1px solid var(--line)}
.loc__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.5) contrast(1.02)}
/* Abstand Karte <-> Infospalte: der Prototyp-Wrapper loc__grid (gap) existiert im
   generierten Markup nicht, Divis Gutter ist per Reset aus */
.loc .et_pb_row>.et_pb_column.et_pb_column_2_3{padding-right:clamp(24px,4vw,60px)}
@media(max-width:980px){
  .loc .et_pb_row>.et_pb_column.et_pb_column_2_3{padding-right:0;margin-bottom:28px!important}
}
.loc__b{padding:36px 0;border-bottom:1px solid var(--line)}
.loc__b:first-child{border-top:1px solid var(--line)}
.loc__b h3{font-size:26px;margin:12px 0 10px}
.loc__b p{font-size:15px;color:var(--ink-2)}
.loc__b .btn{margin-top:18px}

/* RESERVIERUNG */
.resv{padding:clamp(100px,14vw,200px) var(--m);text-align:center;background:var(--paper-2);border-top:1px solid var(--line)}
.resv h2{font-size:clamp(44px,8vw,130px);margin-top:16px}
.resv p{color:var(--ink-2);max-width:44ch;margin:22px auto 0}
/* Reservierungs-Box: randlos, das Widget fuellt sie komplett aus.
   Roter Grund traegt die Ladephase und die Raender des Widgets. */
.zen{max-width:820px;margin:46px auto 0;border:0;padding:0;overflow:hidden;
  background:var(--red);box-shadow:0 18px 50px rgba(19,16,13,.16)}
/* (Prototyp-Zenchef-Mock .zen__row/.zen__f/.zen__hint entfernt — echtes Widget seit 1.4.1) */
.zen iframe{width:100%;height:660px;border:0;display:block}
@media(max-width:620px){.zen{margin-top:32px;max-width:none}.zen iframe{height:720px}}

/* Mitfahrender Reservieren-Reiter, rechts mittig */
.resv-tab{position:fixed;right:0;top:50%;z-index:80;display:flex;align-items:center;gap:.7em;
  writing-mode:vertical-rl;transform:translateY(-50%) translateX(0);
  background:var(--red);color:#fff;font-family:var(--sans);font-weight:500;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;padding:26px 13px;border-radius:8px 0 0 8px;
  box-shadow:0 8px 30px rgba(19,16,13,.22);opacity:1;
  transition:transform .5s var(--ease),opacity .4s var(--ease),padding .35s var(--ease)}
.resv-tab:hover{padding-left:17px;color:#fff}
.resv-tab.is-hidden{transform:translateY(-50%) translateX(102%);opacity:0;pointer-events:none}
@media(max-width:620px){.resv-tab{font-size:10px;padding:20px 11px;letter-spacing:.18em}}
@media print{.resv-tab{display:none}}
/* Zwei-Klick-Consent (Maps, Zenchef) */
.consent{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  text-align:center;padding:clamp(26px,4vw,50px)}
.loc__map .consent{position:absolute;inset:0;background:url(img/photos/food-pizza.webp) center/cover no-repeat}
.loc__map .consent::before{content:"";position:absolute;inset:0;background:rgba(19,16,13,.55)} /* Scrim fuer Lesbarkeit */
.loc__map .consent>*{position:relative;z-index:1}
.loc__map .consent .lbl{color:rgba(255,255,255,.75)}
.loc__map .consent .consent__txt{color:rgba(255,255,255,.88)}
/* Buttons auf dem dunklen Karten-Overlay: helle Variante (weisser Grund waere unlesbar) */
.loc__map .consent .btn{border-color:rgba(255,255,255,.55);color:#fff;background-color:transparent;
  background-image:linear-gradient(100deg,rgba(255,255,255,.18) 0 86%,rgba(255,255,255,0) 86% 100%)}
.loc__map .consent .btn:hover{border-color:rgba(255,255,255,.9);color:#fff;background-color:transparent}
.loc__map .consent .consent__alt a{color:rgba(255,255,255,.75);border-bottom-color:rgba(255,255,255,.35)}
.consent__txt{font-size:13.5px;color:var(--ink-2);max-width:46ch;margin:0}
.consent__alt{margin:0}
.consent__alt a{font-size:12px;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--line)}
.consent__alt a:hover{color:var(--ink)}

.resv__alt{margin-top:34px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.resv__tel{margin-top:26px;font-family:var(--sans);font-style:italic;font-weight:300;font-size:19px;color:var(--ink-2)}
.resv__tel a{border-bottom:1px solid var(--line)}

/* FOOTER (eigener Footer via wp_footer-Hook; Divi-Standard-Footer aus) */
#main-footer{display:none!important}
footer{background:var(--dark);color:rgba(255,255,255,.78);padding:clamp(70px,9vw,120px) var(--m) 32px}
.f__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px}
.f__logo{width:86px;height:86px;color:var(--red)}
.f__top p{font-size:14.5px;color:rgba(255,255,255,.6);margin-top:20px;max-width:28ch}
.f__c h5{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--red);margin-bottom:18px}
.f__c p,.f__c a{display:block;font-size:14.5px;color:rgba(255,255,255,.7);margin-bottom:8px}
.f__c a:hover{color:#fff}
.f__bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:64px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.13);font-size:12px;color:rgba(255,255,255,.45)}
.f__bot .lg{display:flex;gap:18px}
.f__bot a{color:rgba(255,255,255,.6)}
.f__bot .sl{color:var(--red)}
.f__check{font-size:10.5px;letter-spacing:.1em;color:var(--red);margin-top:10px}

/* gestürztes Label */
.vlab{position:absolute;top:0;right:0;width:clamp(46px,6vw,110px);height:100%;pointer-events:none;z-index:1;overflow:hidden}
.vlab span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);
  font-family:var(--serif);font-size:clamp(48px,7vw,120px);color:var(--red);opacity:.7;white-space:nowrap;line-height:.9}

/* ANIMATION */
.valle-js .r{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.valle-js .r.in{opacity:1;transform:none}
/* Bild-Reveal bewusst deaktiviert (Absprache 29.07.): Bilder brauchen bis zum
   Dekodieren unterschiedlich lange, dadurch lief die Schrift den Visuals immer
   davon. Die Klasse .mask bleibt bestehen — sie steuert auch Zuschnitt und
   Seitenverhaeltnis. Nur die Clip-Path-Animation ist raus.
   Wieder anschalten: die beiden Zeilen unten entkommentieren. */
/* .valle-js .mask{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease)} */
/* .valle-js .mask.in{clip-path:inset(0 0 0 0)} */
/* clip-path statt overflow:hidden — overflow verschiebt die Baseline von Inline-Blocks
   (kleinere em-Woerter wirkten dadurch hochgestellt); baseline + clip = korrekte Zeile */
.valle-js .w{display:inline-block;vertical-align:baseline;clip-path:inset(-0.4em -0.15em -0.2em -0.15em)}
.valle-js .w i{display:inline-block;font-style:inherit;transform:translateY(130%);transition:transform 1s var(--ease)}
.valle-js .in .w i,.valle-js .w.in i{transform:none}
[data-par]{will-change:transform}
/* Sicherheitsnetz + Builder: immer sichtbar */
.valle-js.valle-fallback .r{opacity:1;transform:none}
.valle-js.valle-fallback .mask{clip-path:none}
.valle-js.valle-fallback .w i{transform:none}
.et-fb .r,.et-fb .mask,.et-fb .w i{opacity:1!important;transform:none!important;clip-path:none!important}

@media(max-width:1000px){
  .nav__mid{display:none}.nav__burger{display:flex}
  .tri{grid-template-columns:1fr}
  .tri__c{border-right:0;border-bottom:1px solid var(--line)}
  .split,.split--rev{grid-template-columns:1fr;direction:ltr}
  .split__media .small{position:relative;left:0;bottom:0;width:44%;margin-top:-14%;border-width:6px}
  .dishes{grid-template-columns:1fr}
  .loc__grid{grid-template-columns:1fr}.loc__map{min-height:420px}
  .stats{grid-template-columns:1fr 1fr;gap:34px 24px}
  .f__top{grid-template-columns:1fr 1fr}
  .vlab{display:none}
  .zen__row{grid-template-columns:1fr}
  .chap{grid-template-columns:1fr;gap:26px}
  .chap__txt{position:static}
  .chap__no{padding-top:0}
  .strip{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  body{font-size:16px}
  .gal .grid .a1,.gal .grid .a2,.gal .grid .a3,.gal .grid .a4,.gal .grid .a5{grid-column:1/13}
  .gal .grid .a3,.gal .grid .a4,.gal .grid .a5{aspect-ratio:4/3}
  .break__caps{flex-direction:column;gap:6px;align-items:center}
  .f__top{grid-template-columns:1fr}
  .hero__in{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
  .r,.mask,.w i{opacity:1;transform:none;clip-path:none}
}

/* --- Divi-Spalten in echte Grids zwingen (Galerie, Kapitel, Triptychon) --- */
/* Abstaende hier mit .et_pb_row-Spezifitaet, sonst gewinnen Divis Row-Resets */
.et_pb_row.split{padding:clamp(100px,14vw,200px) var(--m)!important} /* !important: Divi-Inline-CSS aus custom_padding der Row */
.et_pb_row.chap{padding:clamp(90px,12vw,170px) var(--m)!important}
.et_pb_row.tri{width:auto;margin:0 var(--m);border-top:0;position:relative;
  border-left:1px solid var(--line);border-right:1px solid var(--line)}
/* Top-Linie randabfallend ueber die Row-Margins hinaus */
.et_pb_row.tri::before{content:"";position:absolute;top:0;left:calc(-1 * var(--m));right:calc(-1 * var(--m));height:1px;background:var(--line)}
/* Divis Clearfix verhindert :last-child — dritte Spalte explizit ohne Trennlinie */
.tri.et_pb_row>.et_pb_column:nth-child(3){border-right:0}
.et_pb_row.stats{width:auto;margin:0 var(--m);padding:clamp(54px,7vw,84px) 0!important} /* Linie liegt direkt am Triptychon an */
.et_pb_column.tri__c{padding:44px 34px 54px}
.tri.et_pb_row,.stats.et_pb_row,.split.et_pb_row,.chap.et_pb_row{display:grid!important;grid-gap:0}
.tri.et_pb_row{grid-template-columns:repeat(3,1fr)!important}
.stats.et_pb_row{grid-template-columns:repeat(4,1fr)!important}
.split.et_pb_row{grid-template-columns:1fr 1.05fr!important;gap:clamp(30px,6vw,100px)!important;align-items:center}
.chap.et_pb_row{grid-template-columns:auto 1fr 1.1fr!important;gap:clamp(24px,4vw,70px)!important;align-items:stretch}
/* Textspalte laeuft mit: nur mit gestreckten Spalten hat position:sticky ueberhaupt Spielraum.
   Vorher stand hier align-items:start — dadurch war die Spalte so hoch wie ihr Text und
   sticky blieb wirkungslos (der Weissraum unter dem Text stand still). */
@media (min-width:981px){
  .chap.et_pb_row>.et_pb_column:first-child .et_pb_text,
  .chap.et_pb_row .chap__txt{position:sticky!important;top:172px;align-self:start}
}
.tri.et_pb_row>.et_pb_column,.stats.et_pb_row>.et_pb_column,
.split.et_pb_row>.et_pb_column,.chap.et_pb_row>.et_pb_column{width:auto!important;margin:0!important;float:none!important}

/* Divi-Module: Standardabstand am Modulende raus */
.et_pb_module{margin-bottom:0}
.et_pb_text p:last-child{margin-bottom:0}
.et_pb_image{margin-bottom:0}

/* Divi-Button auf unseren Pill-Stil */
.et_pb_button.btn:after{display:none!important}
.et_pb_button.btn{padding:15px 30px!important}
/* Divi-Button: gleiche Mechanik wie oben — Divis eigene Hover-Werte aushebeln */
.et_pb_button.btn{background-color:transparent!important;border-color:var(--red)!important;color:var(--red)!important;
  background-image:linear-gradient(100deg,rgba(28,24,21,.09) 0 86%,rgba(28,24,21,0) 86% 100%)!important;
  background-repeat:no-repeat!important;background-position:left center!important;background-size:0% 100%!important}
.et_pb_button.btn{transition:background-size .5s var(--ease),border-color .4s var(--ease),
  letter-spacing .5s var(--ease),border-radius .45s var(--ease),color .4s var(--ease)!important}
.et_pb_button.btn:hover{background-size:170% 100%!important;border-color:transparent!important;color:var(--red)!important;
  letter-spacing:.26em;border-radius:0!important}

@media(max-width:1000px){
  .tri.et_pb_row{grid-template-columns:1fr!important}
  .split.et_pb_row,.chap.et_pb_row{grid-template-columns:1fr!important}
  .stats.et_pb_row{grid-template-columns:1fr 1fr!important}
}

/* =========================================================
   3) BILDMODULE STATT CODE-BLÖCKE
   Bilder werden jetzt als echte Divi-Module ausgegeben.
   Die Layouts liegen darum auf den Modul-Containern.
   ========================================================= */

/* Divi-Bildmodul: keine Eigenabstände, Bild füllt Container */
.et_pb_image{margin:0!important;width:100%;line-height:0}
.et_pb_image .et_pb_image_wrap{width:100%;display:block;overflow:hidden}
.et_pb_image img{width:100%;height:100%;object-fit:cover;display:block}

/* Galerie-Grid: liegt auf der Spalte, Kinder sind Bildmodule */
.gal .grid.et_pb_row>.et_pb_column{display:grid!important;grid-template-columns:repeat(12,1fr);
  gap:clamp(10px,1.4vw,20px);width:100%!important;margin:0!important}
.gal .grid .et_pb_image{overflow:hidden}
.gal .grid .et_pb_image img{transition:transform 1.3s var(--ease)}
.gal .grid .et_pb_image:hover img{transform:scale(1.05)}
.gal .grid .a1{grid-column:1/6;aspect-ratio:4/5}
.gal .grid .a2{grid-column:6/13;aspect-ratio:16/11}
.gal .grid .a3{grid-column:1/5;aspect-ratio:1/1}
.gal .grid .a4{grid-column:5/9;aspect-ratio:1/1}
.gal .grid .a5{grid-column:9/13;aspect-ratio:1/1}
.gal .grid .bw img{filter:grayscale(1) contrast(1.03)}
.gal .grid .bw:hover img{filter:grayscale(0)}

/* Masonry-Galerie: Spalten-Klasse "masonry" statt "grid" an der Column —
   Bilder/Video-Kacheln in natuerlicher Proportion, spaltenweise gestapelt. */
.masonry.et_pb_column{display:block!important;columns:3;column-gap:clamp(10px,1.4vw,20px);
  width:100%!important;margin:0!important}
.masonry .et_pb_module{break-inside:avoid;margin:0 0 clamp(10px,1.4vw,20px)!important;overflow:hidden}
.masonry .et_pb_image img{width:100%;height:auto;aspect-ratio:auto;transition:transform 1.3s var(--ease)}
.masonry .et_pb_image:hover img{transform:scale(1.05)}
.masonry .bw img{filter:grayscale(1) contrast(1.03)}
.masonry .bw:hover img{filter:grayscale(0)}
.masonry .a1,.masonry .a2,.masonry .a3,.masonry .a4,.masonry .a5{grid-column:auto;aspect-ratio:auto}
@media(max-width:1000px){.masonry.et_pb_column{columns:2}}
@media(max-width:620px){.masonry.et_pb_column{columns:1}}

/* Split-Medien: großes Bild + überlappendes kleines */
.split__media.et_pb_column{position:relative}
.split__media .big{overflow:hidden}
.split__media .big img{aspect-ratio:4/5}
.split__media .small{position:absolute;left:-9%;bottom:-9%;width:42%;border:8px solid var(--paper);overflow:hidden}
.split__media .small img{aspect-ratio:1/1;filter:grayscale(1)}

/* Kapitel-Medien: großes Bild oben, zwei nebeneinander darunter */
.chap__media.et_pb_column{display:grid!important;grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.4vw,18px);width:100%!important;margin:0!important;align-content:start}
.chap__media .chap-wide{grid-column:1/3;overflow:hidden}
.chap__media .chap-wide img{aspect-ratio:16/10}
.chap__media .chap-duo{overflow:hidden}
.chap__media .chap-duo img{aspect-ratio:1/1}

/* Strip: vier Bilder nebeneinander */
.strip.et_pb_row>.et_pb_column{display:grid!important;grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,1.2vw,16px);width:100%!important;margin:0!important}
.strip .et_pb_image{overflow:hidden}
.strip .et_pb_image img{aspect-ratio:3/4}

/* Triptychon-Bild */
.tri__c .et_pb_image{margin-bottom:26px!important;overflow:hidden}
.tri__c .et_pb_image img{aspect-ratio:4/5}

/* Video-Kacheln — UEBERALL einsetzbar: Divi-Teiler (Trennlinie aus) + Hintergrund-Video
   + CSS-Klasse "mask". Standard-Ratio 4:5; Kontext-Klassen (a1..a5 im Galerie-Grid greifen
   automatisch, strip/chap/split unten) uebersteuern die Ratio. "mask" selbst gibt nur den
   Scroll-Reveal. Divi rendert Teiler ohne Trennlinie NUR mit et_pb_divider_0/_hidden
   (keine generische Klasse), daher Attribut-Selektor. */
[class*="et_pb_divider"].mask{aspect-ratio:4/5;width:100%;height:auto!important;max-height:none;
  box-sizing:border-box;margin:0;padding:0!important}
[class*="et_pb_divider"].mask:before{display:none} /* Divi-Trennlinie aus */
.et_pb_module.mask{position:relative;overflow:hidden}
.et_pb_module.mask .et_pb_section_video_bg{position:absolute;inset:0;margin:0;z-index:0}
.et_pb_module.mask .et_pb_section_video_bg,
.et_pb_module.mask .et_pb_section_video_bg .mejs-video,
.et_pb_module.mask .et_pb_section_video_bg video{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important}
.et_pb_module.mask .et_pb_section_video_bg video{object-fit:cover}

/* Hintergrundvideos formatfuellend halten — unabhaengig von Divis JS.
   Divi rechnet die Videogroesse beim Laden per JavaScript aus. Da wir Videos
   erst bei Sichtbarkeit laden, lief diese Rechnung ins Leere und das Video
   stand in Originalgroesse (1700px) in der Ecke der Sektion. */
.et_pb_section_video_bg{overflow:hidden}
.et_pb_section_video_bg video,
.et_pb_section_video_bg .mejs-video,
.et_pb_section_video_bg .mejs-container,
.et_pb_section_video_bg .mejs-inner,
.et_pb_section_video_bg .mejs-mediaelement,
.et_pb_section_video_bg mediaelementwrapper{
  position:absolute!important;top:0!important;left:0!important;
  /* margin muss mit: MediaElement.js zentriert per negativem Rand
     (margin-left:-207px o. ae.) und schob das Video sonst aus dem Rahmen. */
  margin:0!important;
  width:100%!important;height:100%!important;
  min-width:100%!important;min-height:100%!important;max-width:none!important;
  object-fit:cover!important;transform:none!important}
/* Kontext-Ratios + Abstaende analog zu den Bild-Regeln */
.tri__c [class*="et_pb_divider"].mask{margin-bottom:26px!important}
.strip [class*="et_pb_divider"].mask{aspect-ratio:3/4}
.chap__media [class*="et_pb_divider"].chap-wide{aspect-ratio:16/10}
.chap__media [class*="et_pb_divider"].chap-duo{aspect-ratio:1/1}
.split__media [class*="et_pb_divider"].big{aspect-ratio:4/5}
.split__media [class*="et_pb_divider"].small{aspect-ratio:1/1}

/* Sektions-Paddings gegen Divis Responsive-Resets absichern (Divi setzt mobil 5px 0) */
.et_pb_section.lede{padding:clamp(100px,15vw,220px) var(--m)!important}
.et_pb_section.carta{padding:clamp(90px,12vw,170px) var(--m)!important}
.et_pb_section.gal{padding:clamp(100px,14vw,200px) var(--m) 0!important}
.et_pb_section.loc{padding:clamp(100px,14vw,200px) var(--m)!important}
.et_pb_section.resv{padding:clamp(100px,14vw,200px) var(--m)!important}
.et_pb_section.next{padding:clamp(80px,11vw,150px) var(--m)!important}
.et_pb_section.pull{padding:clamp(80px,11vw,160px) var(--m)!important}
.et_pb_section.hero,.et_pb_section.phead,.et_pb_section.break{padding:0!important}

/* Abstaende, die zuvor (falsch) an Divi-Typo-Paddings hingen */
.carta .et_pb_text.r{margin-bottom:clamp(30px,5vw,56px)}
.gal .et_pb_row:first-child{margin-bottom:clamp(40px,6vw,70px)}
.next .lbl{display:block;margin-bottom:14px}

/* Display-Groessen fuer Carta-/Galerie-Headlines: die Prototyp-Wrapper carta__head/
   gal__head existieren im generierten Markup nicht — ohne diese Regeln fielen die H2
   auf Browser-Default (~25px) zurueck */
.et_pb_section.carta h2{font-size:clamp(44px,7.5vw,124px)!important}
.et_pb_section.gal h2{font-size:clamp(40px,7vw,116px)!important}

/* =========================================================
   MOBILE-FEINSCHLIFF (>95 % der Gäste kommen vom Handy)
   ========================================================= */
@media(max-width:1000px){
  /* 1. Scroll-Indikator im Hero lag mittig über dem Reservieren-Button */
  .hero__scroll{display:none}

  /* 2. Speisekarten-Reiter: eine wischbare Leiste statt vier Zeilen Umbruch */
  .tabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
    margin-left:calc(-1 * var(--m));margin-right:calc(-1 * var(--m));padding:0 var(--m)}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto;scroll-snap-align:start;padding:17px 16px}
  .tab::after{left:16px;right:16px}

  /* 3. Impressioni: horizontaler Slider statt Bilderstapel */
  .masonry.et_pb_column{columns:auto;display:flex!important;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-left:calc(-1 * var(--m))!important;margin-right:calc(-1 * var(--m))!important;
    padding:0 var(--m) 6px}
  .masonry.et_pb_column::-webkit-scrollbar{display:none}
  /* snap-align:start — deterministische Positionen fuer den Auto-Slider (center versetzt jeden Schritt) */
  .masonry .et_pb_module{flex:0 0 84%;align-self:start;scroll-snap-align:start;margin:0!important;break-inside:auto}
  /* height:auto — mit height:100% kollabieren die Kacheln (kein Bezugsmass im Flex-Slider) */
  .masonry .et_pb_image img{aspect-ratio:4/5;width:100%;height:auto;object-fit:cover}

  .gal .grid.et_pb_row>.et_pb_column{grid-template-columns:1fr}
  .gal .grid .a1,.gal .grid .a2,.gal .grid .a3,.gal .grid .a4,.gal .grid .a5{grid-column:auto;aspect-ratio:4/3}
  .split__media .small{position:relative;left:0;bottom:0;width:44%;margin-top:-14%}
  .chap__media.et_pb_column{grid-template-columns:1fr}
  .chap__media .chap-wide{grid-column:auto}
  .strip.et_pb_row>.et_pb_column{grid-template-columns:1fr 1fr}
}
.stat b .comma{display:inline;margin:0;font-size:inherit;letter-spacing:normal;text-transform:none;color:inherit}