/* ===========================================================
   MAMMA MIA · Pizzeria · Salumeria — "Osteria Notturna"
   Design: warmes Dunkel + Steinofen-Glut. Vanilla, kein Build.
   =========================================================== */

:root{
  --carbone:#181310;      /* Basis dunkel, warm */
  --carbone-2:#211a15;    /* Panel */
  --panna:#f4ecdd;        /* Creme Text */
  --panna-dim:#c9bda8;    /* gedämpft */
  --pomodoro:#c1362a;     /* Tomatenrot */
  --pomodoro-hot:#e0503f;
  --oliva:#7d894f;        /* Olive */
  --oro:#d9a441;          /* Ofen-Gold */
  --oro-soft:#f0cd7e;
  --linea:rgba(244,236,221,.12);
  --shadow:0 24px 60px -24px rgba(0,0,0,.7);
  --maxw:1180px;
  --serif:"Fraunces","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--sans);
  background:var(--carbone);
  color:var(--panna);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
/* Tricolore-Cursor (Form = Standardpfeil, Farben = italienische Flagge) */
@media(hover:hover) and (pointer:fine){
  *{cursor:url("../img/cursor-it.svg") 3 2, auto;}
}

/* ===== Globaler Video-Hintergrund (scrubbt über die ganze Seite) ===== */
#siteVideo{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  background:var(--carbone);pointer-events:none}
#siteScrim{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,15,12,.58),rgba(20,15,12,.74)),
             radial-gradient(120% 80% at 75% 30%,transparent 40%,rgba(20,15,12,.5) 100%)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.01em}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.34em;
  font-size:.72rem;font-weight:600;color:var(--oro);
}
.section{padding:clamp(64px,9vw,120px) 0;position:relative}

/* ---- tricolore hairline ---- */
.tricolore{height:3px;width:100%;
  background:linear-gradient(90deg,var(--oliva) 0 33.3%,#efe7d6 33.3% 66.6%,var(--pomodoro) 66.6%);
  opacity:.9}

/* =============== NAV =============== */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:12px;
  padding:16px clamp(16px,4vw,48px);
  transition:background .4s ease,backdrop-filter .4s ease,padding .4s ease;}
.nav.scrolled{background:rgba(24,19,16,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea);padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);
  font-size:clamp(1.02rem,2.2vw,1.35rem);letter-spacing:.02em;white-space:nowrap;flex:0 1 auto;min-width:0}
.brand b{color:var(--oro);font-weight:600}
.brand small{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--panna-dim);margin-top:2px}
/* Nav bleibt IMMER einzeilig: Wörter schrumpfen statt umzubrechen */
.nav-links{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(10px,2.2vw,30px);white-space:nowrap}
.nav-links a{font-size:clamp(.76rem,1.35vw,.9rem);color:var(--panna-dim);transition:color .25s;white-space:nowrap}
.nav-links a:hover{color:var(--panna)}
.nav-links .btn{padding:10px clamp(12px,1.7vw,22px);font-size:clamp(.76rem,1.35vw,.9rem);white-space:nowrap}
.nav-toggle{display:none;background:none;border:0;color:var(--panna);cursor:pointer}

/* =============== BUTTONS =============== */
.btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:var(--sans);font-weight:600;font-size:.95rem;
  padding:14px 26px;border-radius:100px;cursor:pointer;border:1px solid transparent;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,background .3s}
.btn--primary{background:var(--pomodoro);color:#fff;box-shadow:0 12px 28px -12px rgba(193,54,42,.9)}
.btn--primary:hover{background:var(--pomodoro-hot);transform:translateY(-2px)}
.btn--ghost{background:rgba(244,236,221,.06);color:var(--panna);border-color:var(--linea)}
.btn--ghost:hover{background:rgba(244,236,221,.12);transform:translateY(-2px)}
.btn--gold{background:var(--oro);color:#2a1e0a}
.btn--gold:hover{background:var(--oro-soft);transform:translateY(-2px)}

/* =============== HERO (Text über globalem Video) =============== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center}
.hero__content{position:relative;z-index:2;max-width:var(--maxw);width:100%;
  margin:0 auto;padding:120px clamp(24px,5vw,48px) 0;will-change:opacity,transform}
.hero__content h1{font-size:clamp(2.6rem,7vw,5.4rem);line-height:1.02;
  text-shadow:0 2px 30px rgba(0,0,0,.5)}
/* Stichpunkte nebeneinander unter der Headline — Mitteltrenner in Gold */
.hero__tags{display:flex;flex-wrap:wrap;gap:.15em .7em;align-items:center;margin:.85em 0 .2em;
  font-family:var(--sans);font-size:clamp(.72rem,1.15vw,.86rem);letter-spacing:.13em;
  text-transform:uppercase;color:var(--panna);font-weight:600;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero__tags span{white-space:nowrap}
.hero__tags-dot{color:var(--oro);font-style:normal;font-weight:700;opacity:.95}
.hero__content .lead{max-width:34ch;font-size:clamp(1rem,1.7vw,1.2rem);
  color:var(--panna);margin:.7em 0 34px;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap}
.hero__scroll-hint{position:absolute;left:50%;bottom:34px;z-index:2;transform:translateX(-50%);
  width:26px;height:42px;border:2px solid rgba(244,236,221,.55);border-radius:14px;
  display:flex;justify-content:center;padding-top:8px}
.hero__scroll-hint span{width:3px;height:8px;border-radius:2px;background:var(--oro);
  animation:scrolldot 1.6s ease-in-out infinite}
@keyframes scrolldot{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}80%,100%{opacity:0;transform:translateY(10px)}}

/* =============== MENU-FLOW (von Antipasti bis Dolci) =============== */
.menu-flow{margin-top:clamp(60px,9vw,110px);text-align:center;
  border-top:1px solid var(--linea);padding-top:clamp(48px,7vw,80px)}
.menu-flow h2{font-size:clamp(1.9rem,4.2vw,3rem)}
.menu-flow__lead{color:var(--panna-dim);max-width:56ch;margin:14px auto 0}
.menu-flow__cats{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.menu-flow__cats span{font-family:var(--serif);font-size:1.05rem;color:var(--panna);
  padding:8px 18px;border:1px solid var(--linea);border-radius:100px;
  transition:border-color .3s,color .3s}
.menu-flow__cats span:hover{border-color:var(--oro);color:var(--oro-soft)}

.kontakt-sec{border-top:1px solid var(--linea)}

/* =============== STORIA =============== */
.storia{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,80px);align-items:center}
.storia__text h2{font-size:clamp(2rem,4.5vw,3.2rem);margin:.3em 0 .6em}
.storia__text p{color:var(--panna-dim);margin-bottom:1.1em;max-width:52ch}
.storia__card{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(160deg,var(--carbone-2),#2c211a);border:1px solid var(--linea);
  box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:flex-end;padding:30px}
.storia__card .emblem{position:absolute;inset:0;display:grid;place-items:center;opacity:.5}
.storia__card h3{font-size:1.6rem;position:relative}
.storia__card p{color:var(--panna-dim);position:relative;font-size:.92rem}
.storia__card .oro{color:var(--oro)}

/* =============== SPECIALITÀ (dunkle Karten) =============== */
.spec-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;margin-bottom:44px}
.spec-head h2{font-size:clamp(2rem,4.5vw,3.2rem)}
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.spec-card{position:relative;border-radius:var(--r);overflow:hidden;min-height:360px;
  border:1px solid var(--linea);background:linear-gradient(180deg,rgba(36,27,21,.55),rgba(22,15,11,.62));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:flex-end;padding:26px;isolation:isolate;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.spec-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.9;
  background:radial-gradient(120% 80% at 50% 0%,rgba(217,164,65,.20),transparent 60%)}
.spec-card:hover{transform:translateY(-6px)}
.spec-card .num{position:absolute;top:20px;right:24px;font-family:var(--serif);
  font-size:1rem;color:var(--oro);opacity:.7}
.spec-card h3{font-size:1.7rem;margin-bottom:.3em}
.spec-card p{color:var(--panna-dim);font-size:.92rem}
.spec-card .tag{color:var(--pomodoro-hot);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;margin-bottom:10px;font-family:var(--sans)}

/* =============== MENÜ TEASER =============== */
.menu-teaser{background:var(--carbone-2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.mt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.mt-cat{border:1px solid var(--linea);border-radius:var(--r);padding:22px;
  background:rgba(244,236,221,.02);transition:border-color .3s,transform .3s}
.mt-cat:hover{border-color:var(--oro);transform:translateY(-4px)}
.mt-cat .ico{font-size:1.6rem;margin-bottom:12px}
.mt-cat h4{font-family:var(--serif);font-size:1.2rem;margin-bottom:4px}
.mt-cat span{font-size:.82rem;color:var(--panna-dim)}
.menu-teaser .cta-row{margin-top:40px;text-align:center}

/* =============== PARTYSERVICE =============== */
.party{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.party__box{background:linear-gradient(150deg,rgba(193,54,42,.16),rgba(217,164,65,.08));
  border:1px solid var(--linea);border-radius:var(--r);padding:clamp(28px,4vw,44px)}
.party h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:.5em}
.party p{color:var(--panna-dim);margin-bottom:1em;max-width:48ch}
.party ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:1.2em 0}
.party li{font-size:.85rem;padding:7px 14px;border:1px solid var(--linea);border-radius:100px;color:var(--panna-dim)}

/* =============== KONTAKT =============== */
.kontakt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px)}
.info-list{display:flex;flex-direction:column;gap:22px;margin-top:30px}
.info-item{display:flex;gap:16px;align-items:flex-start}
.info-item .k{font-family:var(--serif);color:var(--oro);font-size:1.1rem;min-width:110px}
.info-item .v{color:var(--panna-dim)}
.info-item .v a{color:var(--panna)}
.hours{border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;
  background:rgba(244,236,221,.04);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hours .row{display:flex;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--linea);font-size:.92rem}
.hours .row:last-child{border-bottom:0}
.hours .row.today{background:rgba(217,164,65,.10);color:var(--panna)}
.hours .row .d{color:var(--panna-dim)}
.map-consent{margin-top:22px;padding:22px;border:1px dashed var(--linea);border-radius:var(--r);text-align:center}
.map-consent p{font-size:.82rem;color:var(--panna-dim);margin-bottom:14px}
.map-credit{display:block;font-size:.7rem;color:var(--panna-dim);margin-top:10px}
.kontakt iframe{width:100%;min-height:280px;border:0;border-radius:var(--r)}

/* =============== FOOTER =============== */
.footer{background:rgba(12,9,7,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--linea);padding:60px 0 30px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
.footer__legal{border:1px solid var(--linea);border-radius:var(--r);padding:18px 20px;
  background:rgba(244,236,221,.03);align-self:start}
.footer__legal a{margin-bottom:10px}
.footer h4{font-family:var(--serif);color:var(--oro);margin-bottom:16px;font-size:1.1rem}
.footer a{display:block;color:var(--panna-dim);font-size:.9rem;margin-bottom:8px;transition:color .25s}
.footer a:hover{color:var(--panna)}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid var(--linea);font-size:.8rem;color:var(--panna-dim)}

/* =============== LEGAL =============== */
.legal{max-width:820px;margin:0 auto;padding:140px 24px 100px}
.legal h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:.6em}
.legal h2{font-size:1.4rem;margin:1.6em 0 .5em;color:var(--oro-soft)}
.legal p,.legal li{color:var(--panna-dim);margin-bottom:.8em}
.legal a{color:var(--oro);text-decoration:underline}
.legal ul{padding-left:1.2em;margin-bottom:1em}
body:has(.legal){--bp:rgba(217,164,65,.05)}
body:has(.legal)::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--bp) 1px,transparent 1px),linear-gradient(90deg,var(--bp) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(125% 90% at 50% 6%,#000 45%,transparent 82%);
  mask-image:radial-gradient(125% 90% at 50% 6%,#000 45%,transparent 82%)}

/* =============== SPEISEKARTE PAGE =============== */
.menu-page{padding:130px 0 90px}
.menu-hero{text-align:center;margin-bottom:60px}
.menu-hero h1{font-size:clamp(2.4rem,6vw,4rem)}
.menu-hero p{color:var(--panna-dim);margin-top:12px}
.menu-tab{padding:9px 18px;border-radius:100px;border:1px solid var(--linea);background:none;
  color:var(--panna-dim);font-family:var(--sans);font-size:.85rem;cursor:pointer;transition:all .25s}
.menu-tab.active,.menu-tab:hover{background:var(--pomodoro);color:#fff;border-color:var(--pomodoro)}
.menu-cat{margin-bottom:64px;scroll-margin-top:150px}
.menu-cat > h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:6px}
.menu-cat > .sub{color:var(--oro);letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;margin-bottom:28px;font-family:var(--sans)}
.dish{display:grid;grid-template-columns:1fr auto;gap:8px 20px;padding:16px 0;border-bottom:1px solid var(--linea);align-items:baseline}
.dish__name{font-family:var(--serif);font-size:1.15rem}
.dish__name .badge{font-family:var(--sans);font-size:.62rem;letter-spacing:.12em;color:var(--pomodoro-hot);
  border:1px solid var(--pomodoro);border-radius:100px;padding:2px 8px;margin-left:8px;text-transform:uppercase;vertical-align:middle}
.dish__desc{grid-column:1/2;color:var(--panna-dim);font-size:.9rem;margin-top:2px}
.dish__price{font-family:var(--serif);color:var(--oro);font-size:1.15rem;white-space:nowrap}
.allergene{background:var(--carbone-2);border:1px solid var(--linea);border-radius:var(--r);padding:24px;margin-top:20px}
.allergene h3{font-family:var(--serif);color:var(--oro);margin-bottom:12px}
.allergene .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;font-size:.82rem;color:var(--panna-dim)}

/* =============== BILDERGALERIE (Über uns) =============== */
.gallery{margin-top:clamp(36px,5vw,60px)}
.gallery__grid{columns:4;column-gap:14px}
.gallery__item{break-inside:avoid;margin-bottom:14px;border-radius:12px;overflow:hidden;
  position:relative;border:1px solid var(--linea);
  background:linear-gradient(160deg,rgba(36,27,21,.5),rgba(22,15,11,.55));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  aspect-ratio:var(--ar,4/5);display:flex;align-items:flex-end;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.gallery__item:nth-child(3n){--ar:1/1}
.gallery__item:nth-child(4n){--ar:4/3}
.gallery__item:nth-child(5n){--ar:3/4}
.gallery__item img{width:100%;height:100%;object-fit:cover;display:block}
.gallery__item:hover{transform:translateY(-5px)}
.gallery__ph{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--panna-dim);font-family:var(--serif);font-size:.9rem;letter-spacing:.05em;opacity:.6}
.gallery__ph svg{opacity:.5}

/* =============== EMPFEHLUNGS-KACHELN (3 Bildflächen) =============== */
.rec-tile{position:relative;border-radius:var(--r);overflow:hidden;min-height:400px;isolation:isolate;
  border:1px solid var(--linea);display:flex;flex-direction:column;justify-content:flex-end;padding:28px;
  background:linear-gradient(180deg,rgba(36,27,21,.35) 0%,rgba(16,11,8,.82) 100%);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.rec-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* dunkler Verlauf unten → Text bleibt auf jedem Foto lesbar */
.rec-tile::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(to top,rgba(6,4,2,.94) 0%,rgba(6,4,2,.78) 26%,rgba(6,4,2,.30) 55%,rgba(6,4,2,0) 78%)}
.rec-tile:hover{transform:translateY(-6px)}
.rec-tile .tag,.rec-tile h3,.rec-tile p{position:relative;z-index:2}
.rec-tile .tag{color:var(--oro);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;margin-bottom:10px;font-family:var(--sans);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.rec-tile h3{font-size:1.7rem;margin-bottom:.3em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.75)}
.rec-tile p{color:var(--panna);font-size:.92rem;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.rec-cta{text-align:center;margin-top:40px}

/* =============== COVERFLOW-SLIDER · Antonino empfiehlt =============== */
.rec-swiper{width:100%;max-width:720px;margin:44px auto 0;padding-bottom:46px;overflow:hidden}
.rec-swiper .swiper-slide{width:min(360px,82vw);height:460px;
  transition:none} /* Transform steuert Swiper — eigene Transition raus (sonst ruckelt Coverflow) */
.rec-swiper .swiper-slide.rec-tile{min-height:0;transition:none}
.rec-swiper .swiper-slide.rec-tile:hover{transform:none} /* kein Hover-Versatz im Coverflow */
.rec-swiper .swiper-slide img{border-radius:inherit}
.rec-swiper .swiper-pagination{position:absolute;bottom:8px}
.rec-swiper .swiper-pagination-bullet{background:var(--panna-dim);opacity:.5;transition:opacity .3s,transform .3s}
.rec-swiper .swiper-pagination-bullet-active{background:var(--oro);opacity:1;transform:scale(1.25)}
@media(max-width:640px){
  .rec-swiper{margin-top:30px;padding-bottom:40px}
  /* minimal schmaler als 72vw → Nachbarkarten links/rechts sind angeschnitten sichtbar */
  .rec-swiper .swiper-slide{width:min(300px,64vw);height:380px}
  /* im Slider bleibt die Beschreibung sichtbar (anders als im alten Grid) */
  .rec-swiper .swiper-slide.rec-tile p{display:block}
  .rec-swiper .swiper-slide.rec-tile h3{font-size:1.5rem}
}

/* =============== 🔒 GLAS-SHIMMER (Farbring folgt Cursor) =============== */
.spec-card,.rec-tile,.gallery__item,.hours,.price-card,.glass-panel,.rev-card{position:relative}
.spec-card::after,.rec-tile::after,.gallery__item::after,.hours::after,.rev-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,-40%),
    rgba(255,255,255,.9) 0%, rgba(217,164,65,.55) 26%, rgba(125,137,79,.35) 46%, rgba(217,164,65,0) 62%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:3}
.spec-card:hover::after,.rec-tile:hover::after,.gallery__item:hover::after,.hours:hover::after,.rev-card:hover::after{opacity:1}
@media(hover:none){
  .spec-card::after,.rec-tile::after,.gallery__item::after,.hours::after,.rev-card::after{display:none}
}

/* =============== REZENSIONEN (Google, Il-Gusto-Style) =============== */
.reviews{margin-top:56px}
.rev-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.rev-score{font-family:var(--serif);font-size:3rem;color:var(--oro);line-height:1}
.rev-head .stars{color:var(--oro);letter-spacing:.1em;font-size:1.1rem}
.rev-count{font-size:.85rem;color:var(--panna-dim)}
.rev-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.rev-card{border-radius:var(--r);overflow:hidden;padding:22px;
  border:1px solid var(--linea);background:rgba(244,236,221,.04);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.rev-card .rc-top{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem}
.rev-card .av{width:38px;height:38px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--pomodoro),var(--oro));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:var(--serif)}
.rev-card .who{font-weight:600;font-size:.9rem;color:var(--panna)}
.rev-card .when{font-size:.72rem;color:var(--panna-dim)}
.rev-card .s{color:var(--oro);font-size:.8rem;margin-bottom:.5rem}
.rev-card p{font-size:.88rem;color:var(--panna-dim);margin:0}
.rev-src{font-size:.72rem;color:var(--panna-dim);margin-top:.8rem}
@media(max-width:640px){.rev-track{grid-template-columns:1fr}}

/* =============== KARTE (italienisch angehaucht) =============== */
.kontakt iframe,.map-consent{border:2px solid transparent;
  border-image:linear-gradient(180deg,var(--oliva),#efe7d6,var(--pomodoro)) 1}
.kontakt iframe{filter:sepia(.28) saturate(1.25) hue-rotate(-8deg) contrast(.96) brightness(.98)}
.map-consent{position:relative;background:rgba(244,236,221,.03)}

/* =============== REVEAL =============== */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
[data-reveal="left"]{transform:translateX(-40px)}
[data-reveal="right"]{transform:translateX(40px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal].in{opacity:1;transform:none}
/* Wisch-Reihenfolge: --i kommt aus der sichtbaren Position (js/script.js),
   Zeile für Zeile links → rechts. Gilt auch für Reveals ohne [data-stagger]. */
[data-reveal]{transition-delay:calc(var(--i,0)*.08s)}
[data-stagger] > *{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i,0)*.08s)}
[data-stagger].in > *{opacity:1;transform:none}

/* =============== LANG SWITCH =============== */
.lang{display:flex;gap:4px;align-items:center;margin-left:8px}
.lang button{background:none;border:0;color:var(--panna-dim);cursor:pointer;font-size:.8rem;
  font-family:var(--sans);padding:4px 6px;border-radius:6px;transition:color .25s,background .25s}
.lang button.active{color:var(--oro);font-weight:700}

/* =============== SPEISEKARTE · schräge, statische, dunkle Italien-Flagge =============== */
body:has(.menu-page){background:#0f0b09}
.flag-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:#0f0b09}
.flag-bg svg{position:absolute;top:-12%;left:-12%;width:124%;height:124%;opacity:.16}
.flag-scrim{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(150% 120% at 50% 0%,rgba(10,8,6,.55) 0%,rgba(10,8,6,.85) 65%,rgba(10,8,6,.94) 100%)}

/* =============== NAV-TOOLS (Theme + Sprache) =============== */
.nav-tools{display:inline-flex;align-items:center;gap:8px;margin-left:6px}
.tool-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--linea);
  background:rgba(244,236,221,.06);color:var(--panna);cursor:pointer;font-size:1rem;
  display:grid;place-items:center;transition:background .25s,transform .25s}
.tool-btn:hover{background:rgba(244,236,221,.14);transform:translateY(-1px)}
.lang-sel{background:rgba(244,236,221,.06);color:var(--panna);border:1px solid var(--linea);
  border-radius:100px;padding:8px 12px;font-family:var(--sans);font-size:.82rem;cursor:pointer}
.lang-sel option{background:#211a15;color:var(--panna)}

/* =============== ÜBER UNS · Foto-Collage NUR hier + Tricolore-Rahmen =============== */
.storia-sec{position:relative}
.about-wrap{position:relative;max-width:940px;margin:0 auto;
  padding:clamp(46px,7vw,96px) clamp(10px,4vw,60px)}
/* Collage füllt nur den Über-uns-Block und wird zur Mitte ausgeblendet */
.collage{position:absolute;inset:0;z-index:0;opacity:.92;
  -webkit-mask-image:radial-gradient(120% 92% at 50% 50%,transparent 30%,#000 74%);
  mask-image:radial-gradient(120% 92% at 50% 50%,transparent 30%,#000 74%)}
.collage__grid{columns:6;column-gap:10px}
.collage__item{break-inside:avoid;margin-bottom:10px;border-radius:8px;overflow:hidden;position:relative;
  border:1px solid var(--linea);aspect-ratio:1/1;
  background:linear-gradient(160deg,rgba(36,27,21,.5),rgba(22,15,11,.55));
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.collage__item img{width:100%;height:100%;object-fit:cover;display:block}
.collage__item:hover{transform:translateY(-3px)}
.collage__ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--panna-dim);
  font-family:var(--serif);font-size:.78rem;opacity:.4}
.collage__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;
  filter:brightness(1.22) saturate(1.04)}
/* Glas-Panel: NUR der 4px-Rahmen ist die Tricolore (Gradient wandert im Ring, 25s).
   Maske stanzt das Innere aus — Flagge scheint nicht mehr durchs Glas. */
@property --flag-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.about-panel{position:relative;z-index:2;max-width:680px;margin:0 auto;
  border-radius:18px;padding:4px;overflow:hidden;box-shadow:var(--shadow)}
.about-panel::before{content:"";position:absolute;inset:0;z-index:0;border-radius:18px;padding:4px;
  background:conic-gradient(from var(--flag-angle),#009246 0 33%,#F1F2F1 33% 66%,#CE2B37 66% 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:flag-sweep 25s linear infinite}
@keyframes flag-sweep{to{--flag-angle:360deg}}
/* wie die „Antonino empfiehlt"-Karten, nur transparenter */
.about-inner{position:relative;z-index:1;border-radius:14px;text-align:center;
  padding:clamp(30px,4vw,48px);border:1px solid var(--linea);
  background:linear-gradient(180deg,rgba(36,27,21,.20) 0%,rgba(16,11,8,.40) 100%);
  backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1)}
.about-inner .eyebrow{margin-top:2px}
@media(prefers-reduced-motion:reduce){.about-panel::before{animation:none}}


/* =============== SIZILIEN-LOGO (Brand/Footer) =============== */
.brand-logo{height:34px;width:auto;flex:0 0 auto;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.footer .brand-logo{height:28px;width:auto}

/* =============== ÜBERGANG / LADEBILDSCHIRM · Sizilien-Logo wächst von innen =============== */
#pageTransition{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 45%,#1c130c,#0b0806);opacity:1;transition:opacity .6s ease}
#pageTransition.hidden{opacity:0;pointer-events:none}
#pageTransition img{width:min(50vw,50vh);height:auto;transform:scale(.06);opacity:0;
  filter:drop-shadow(0 12px 44px rgba(0,0,0,.55));
  transition:transform 1.15s cubic-bezier(.45,.03,.25,1),opacity .8s ease}
#pageTransition.grow img{transform:scale(1);opacity:1}
@media(prefers-reduced-motion:reduce){
  #pageTransition img{transition:opacity .3s ease;transform:none}
  #pageTransition.grow img{transform:none}
}


/* =============== SPEISEKARTE · Side-Scroll-Navigation =============== */
.menu-layout{display:grid;grid-template-columns:210px 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.menu-side{position:sticky;top:92px;align-self:start}
.menu-side__list{display:flex;flex-direction:column;gap:3px;border-left:1px solid var(--linea);padding-left:5px}
.menu-side .menu-tab{display:block;width:100%;text-align:left;background:none;border:0;
  color:var(--panna-dim);font-family:var(--serif);font-size:1.05rem;cursor:pointer;
  padding:10px 14px;border-radius:8px;border-left:2px solid transparent;margin-left:-6px;
  transition:color .3s,border-color .35s cubic-bezier(.22,1,.36,1),background .3s,padding-left .35s cubic-bezier(.22,1,.36,1)}
.menu-side .menu-tab:hover{color:var(--panna);background:rgba(244,236,221,.04)}
.menu-side .menu-tab.active{color:var(--oro);border-left-color:var(--oro);
  background:rgba(217,164,65,.09);padding-left:20px}
/* Bild pro Sektion */
.menu-cat__img{height:190px;border-radius:12px;overflow:hidden;margin-bottom:22px;position:relative;
  border:1px solid var(--linea);background:linear-gradient(160deg,#251c15,#15100c);
  display:flex;align-items:center;justify-content:center}
.menu-cat__img img{width:100%;height:100%;object-fit:cover}
.menu-cat__ph{color:var(--panna-dim);font-family:var(--serif);opacity:.5;letter-spacing:.12em;font-size:.95rem}
@media(max-width:860px){
  .menu-layout{grid-template-columns:1fr;gap:20px}
  /* Kategorien-Leiste FEST unter der Nav — bleibt beim Scrollen dauerhaft sichtbar/auswählbar */
  .menu-side{position:fixed;top:var(--navh,58px);left:0;right:0;z-index:45;align-self:auto;margin:0;
    background:rgba(13,9,7,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    padding:9px clamp(14px,4vw,22px);border-bottom:1px solid var(--linea);box-shadow:0 8px 22px rgba(0,0,0,.4)}
  .menu-side__list{flex-direction:row;overflow-x:auto;border-left:0;gap:8px;padding-left:0;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .menu-side__list::-webkit-scrollbar{display:none}
  .menu-side .menu-tab{white-space:nowrap;border-left:0;border-bottom:2px solid transparent;margin-left:0;padding:8px 12px}
  .menu-side .menu-tab.active{border-left:0;border-bottom-color:var(--oro);padding-left:12px}
  /* Platz schaffen für die feste Leiste, damit Inhalt/Sprünge nicht darunter verschwinden */
  .menu-page{padding-top:calc(var(--navh,58px) + 74px)}
  .menu-cat{scroll-margin-top:calc(var(--navh,58px) + 62px)}
  .menu-cat__img{height:150px}
}

/* =============== RESPONSIVE =============== */
@media(max-width:960px){
  .storia,.kontakt{grid-template-columns:1fr}
  .spec-grid{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
/* Nav: unter 860px aufs Hamburger-Menü (statt gequetschter Einzeiler) — darüber schrumpfen die Wörter */
@media(max-width:860px){
  .nav-links{position:fixed;inset:64px 12px auto 12px;flex-direction:column;gap:6px;
    background:rgba(24,19,16,.97);border:1px solid var(--linea);border-radius:var(--r);padding:18px;
    transform:translateY(-12px) scaleY(.7);opacity:0;pointer-events:none;transform-origin:top;transition:all .3s}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{font-size:1rem}
  .nav-links .btn{font-size:1rem;padding:12px 22px}
  .nav-toggle{display:block}
  /* MB6 · Sprachumschalter im Burger-Panel: der geschlossene Umschalter zeigt bereits
     Flagge + Sprachname (js/script.js baut die Optionen als "🇩🇪  Deutsch"), war aber nur
     rund 35 px hoch — mit dem Daumen trifft man ihn dann nicht zuverlässig. Volle Breite
     und mindestens 44 px machen ihn zum sicheren Tap-Ziel. */
  .nav-tools{width:100%;margin-left:0}
  .lang-sel{width:100%;min-height:44px;padding:11px 14px;font-size:.95rem}
  /* Die Liste selbst zeichnet iOS/Android als Systemauswahl; die Angabe gilt für die
     Browser, die die Optionen wirklich selbst rendern. */
  .lang-sel option{min-height:44px;padding:10px 12px;line-height:1.7}
}
@media(max-width:640px){
  .spec-grid,.footer__grid{grid-template-columns:1fr}
  .rec-tile{min-height:180px;padding:12px}
  .rec-tile h3{font-size:.95rem}
  .rec-tile .tag{font-size:.5rem;letter-spacing:.1em;margin-bottom:5px}
  .rec-tile p{display:none}
  /* Hero mobil größer & kräftiger */
  .hero__content h1{font-size:clamp(2.9rem,12vw,4rem)}
  .hero__content .lead{font-size:1.05rem;max-width:30ch}
  .collage__grid{columns:3}
  /* Öffnungszeiten: nicht überlaufen lassen */
  .hours .row{padding:12px 14px;font-size:.82rem;gap:8px}
  .hours .row .d{min-width:0;overflow-wrap:anywhere}
  .info-item .k{min-width:82px;font-size:1rem}
  .about-inner{padding:26px 20px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto}
  [data-reveal],[data-stagger] > *{opacity:1!important;transform:none!important}
}

/* ---------- Weiterlesen-Standard (Roema, Handy) ---------- */
.rm-btn{display:none}
@media(max-width:720px){
  .rm-text{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;
    overflow:hidden;position:relative;
  }
  .rm-text.rm-open{-webkit-line-clamp:unset;overflow:visible}
  /* weicher Auslauf statt harter Abschnittkante */
  .rm-text:not(.rm-open)::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2.1em;pointer-events:none;
    background:linear-gradient(to bottom,transparent,var(--rm-fade,rgba(0,0,0,.55)));
  }
  .rm-btn{
    display:inline-block;margin:.5rem 0 0;padding:.62rem 1.05rem;
    min-height:44px;                       /* Tap-Target (Checkliste Regel 20) */
    border-radius:999px;border:0;cursor:pointer;
    font:inherit;font-size:.86rem;font-weight:600;letter-spacing:.02em;
    /* satte Füllung + dunkler Text = Kontrast >=4.5:1 (Checkliste Regel 22) */
    background:var(--rm-btn-bg,rgba(255,255,255,.92));
    color:var(--rm-btn-fg,#1a1a1a);
    transition:transform .18s cubic-bezier(.22,1,.36,1),opacity .18s ease;
  }
  .rm-btn[hidden]{display:none}
  .rm-btn:active{transform:scale(.97)}
  .rm-btn:focus-visible{outline:2px solid var(--rm-btn-bg,#fff);outline-offset:3px}
}
@media(prefers-reduced-motion:reduce){.rm-btn{transition:none}}
:root{--rm-btn-bg:rgba(217,154,43,.95);--rm-btn-fg:#231909;--rm-fade:rgba(24,19,16,.85)}

/* ── M3 · Mobile-CTA-Höhe (Webdesign & Animation Checkliste §5b) ──────────────
   Handy: Haupt-CTAs > 52px (Tap-Sicherheit) und < 64px (sonst Banner-Blindness
   — der Button sieht aus wie Werbung und wird übersprungen). Desktop bleibt
   bei ~48px unverändert. .btn ist bereits inline-flex/align-items:center. */
@media(max-width:720px){
  .btn{min-height:56px;justify-content:center}
}

/* =============== HAUPT-CTA-SHIMMER (Roema-Standard, Webdesign-Checkliste §18) ===============
   Haupt-CTAs (.btn--primary/.btn--gold) glänzen periodisch kurz auf — Blickfang ohne Dauerbewegung.
   transform-only (Regel 11): die frühere Variante animierte `left` = Layout-Reflow pro Frame.
   Umrechnung: Element ist 55% breit → left:-120% der Buttonbreite = translateX(-218%) der Elementbreite,
   left:135% = translateX(245%). 6s-Zyklus, Sweep nur in den letzten ~22% = "ab und zu", kein Strobo. */
.btn--primary,.btn--gold,.btn--shine{position:relative;overflow:hidden}
.btn--primary::after,.btn--gold::after,.btn--shine::after{
  content:"";position:absolute;top:0;left:0;width:55%;height:100%;pointer-events:none;z-index:1;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-218%) skewX(-20deg);
  animation:shine 6s ease-in-out infinite}
@keyframes shine{0%,78%{transform:translateX(-218%) skewX(-20deg)}
  100%{transform:translateX(245%) skewX(-20deg)}}
/* Nav/Burger-Panel bleibt ruhig — dort lenkt Glitzern nur ab */
.nav-links .btn::after,.sm-wrap .btn::after,.nav-call::after{display:none}
@media(prefers-reduced-motion:reduce){
  .btn--primary::after,.btn--gold::after,.btn--shine::after{animation:none;opacity:0}}



/* ==================== Chrome/Blink-Performance (js/perf-blink.js setzt .is-blink) ====================
   Fixe Leisten liegen über dem laufenden/gescrubbten Hero-Video — Chrome müsste sie bei JEDEM
   Videoframe neu blurren (Safari macht das im Compositor, darum fällt es dort nicht auf).
   Die Flächen sind ohnehin fast deckend: Blur aus, Deckung minimal rauf, optisch kein Unterschied.
   Zusätzlich: keine Padding-Transition auf der fixen Leiste (Padding = Layout, jedes Mal beim
   Umschalten auf .scrolled/.slim ein Reflow der geblurrten Leiste). Safari/Firefox unberührt. */
.is-blink .nav,.is-blink .footer,.is-blink .sm-panel{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.is-blink .nav.scrolled{background:rgba(24,19,16,.96)}
.is-blink .footer{background:rgba(12,9,7,.95)}
.is-blink .nav{transition:background .4s ease}


/* ============================================================================
   📱 MOBIL-DURCHGANG (Mobil-Checkliste MB1 · MB3 · MB4 · MB5) — 29.07.2026
   Der Block steht bewusst ganz am Ende der Datei. Die Seite bringt Handy-Regeln
   an drei Stellen mit (860 px Nav, 720 px Weiterlesen/Knopfhöhe, 640 px Inhalt);
   stünde dieser Block weiter oben, würde ihn der spätere 640er-Block wieder
   überschreiben — z. B. die Regel, die die Kacheltexte im Slider einblendet.
   ============================================================================ */
@media(max-width:720px){

  /* MB3 · Die Stichpunktzeile unter der Headline ist Deko: "Italienisches Restaurant ·
     seit Jahrzehnten · Berlin-Pankow" sagt nichts, was die Seite nicht ohnehin zeigt,
     kostet auf 375 px aber zwei Zeilen im allerersten Bild. Auf dem Desktop bleibt sie
     stehen, dort ist der Platz vorhanden. */
  .hero__tags{display:none}

  /* MB4 · Beide Hero-Knöpfe teilen sich EINE Zeile. Mit flex-wrap:wrap rutschte
     "Über uns" bei jeder etwas längeren Übersetzung unter den ersten Knopf und sah
     aus wie ein Nachgedanke. flex:1 1 0 mit min-width:0 lässt beide gleichmäßig
     schrumpfen; white-space:nowrap sorgt dafür, dass dabei nicht stattdessen die
     Beschriftung umbricht. Höhe 56 px = derselbe Wert wie die allgemeine
     Handy-Knopfhöhe weiter oben, damit sich beide Regeln nicht widersprechen. */
  .hero__cta{flex-wrap:nowrap;gap:.6rem}
  .hero__cta .btn{flex:1 1 0;min-width:0;justify-content:center;
    min-height:56px;padding:.85rem .9rem;font-size:.92rem;white-space:nowrap}

  /* MB1 · Beschreibung der Empfehlungs-Kacheln auf zwei Zeilen deckeln. Ungekürzt
     füllte sie in der 300 px schmalen Slider-Kachel vier Zeilen und machte aus der
     Bildkachel eine Textwand — daran wischt der Gast vorbei, statt sie zu lesen.
     Die Überschrift ("Bresaola e Taleggio") trägt die Aussage, alles Weitere steht
     in der Speisekarte.
     ⚠️ Die Kachel ist ein Flex-Container (display:flex, column) — ein direktes Kind
     darin wird vom Browser "blockifiziert": aus display:-webkit-box wird flow-root,
     und die klassische WebKit-Zeilenklammer greift dann nicht mehr. Chrome klammert
     inzwischen auch Blockcontainer, Safari/iOS historisch nicht. Deshalb steht
     zusätzlich eine harte Deckelung auf zwei Zeilenhöhen (2 x 1.45em) daneben:
     in Chrome ändert sie nichts (dort misst der Absatz ohnehin exakt 2 Zeilen),
     auf dem iPhone garantiert sie die zwei Zeilen aus MB1. */
  .rec-swiper .swiper-slide.rec-tile p{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;font-size:.85rem;line-height:1.45;max-height:2.9em}

  /* MB5 · Die Google-Zeile ist ein Vertrauens-Signal, kein Element der Hierarchie.
     Mit 3 rem war die "4,4" auf dem Handy größer als jede Überschrift in Sichtweite
     und zog den Blick von den Gästestimmen weg, um die es eigentlich geht. Die Zahl
     bleibt die Botschaft und darf deshalb größer sein als der Text daneben, aber die
     ganze Zeile bleibt kompakt und bricht nicht um. Einen eigenen Glaskasten oder
     Schatten hat sie ohnehin nie gehabt. */
  .rev-head{flex-wrap:nowrap;gap:.5rem;align-items:center}
  .rev-score{font-size:1.35rem}
  .rev-head .stars{font-size:.78rem;letter-spacing:1px}
  .rev-count{font-size:.72rem;white-space:nowrap}
  /* "Was unsere Gäste sagen" ist ein Zweit-Claim (MB3). Auf 375 px passt er nicht in
     dieselbe Zeile und würde die Box zweizeilig machen; die Bewertungskarten darunter
     sagen ohnehin, was hier steht. */
  .rev-count__more{display:none}
}

/* ============================================================================
   ROEMA — Wisch-Übergang „Scheibenwischer" (Vorlage, ab 01.08.2026)
   Gehört zu wisch.js. Farbe je Kunde über --wisch-farbe setzen (PT6).

   ⚠️ WAAGERECHT, NICHT SENKRECHT. Marcel: „so als würde man eine Scheibe
   wischen, von links nach rechts, und damit immer hin- und hergehen."
   Eine Fläche, die von oben nach unten zuklappt, liest sich als Rollo. Eine,
   die quer durchfährt, liest sich als Wischen — und nur das war gemeint.

   ⚠️ ZUDECKEN UND AUFDECKEN SIND ZWEI GETRENNTE @keyframes, keine hin- und
   hergeschaltete Transition. Grund: die alte Fassung wechselte transform-origin
   mitten in einer laufenden transform-Transition. transform-origin hat dort
   keine eigene Transition, springt also — und ob der Browser die laufende
   Interpolation neu ansetzt, ist nicht festgelegt. Zwei Animationen mit eigenem
   from/to können nicht springen.
   ============================================================================ */
:root{
  /* Farbe: Brand-Akzent der jeweiligen Site (PT6). Beim Einbau überschreiben. */
  --wisch-farbe: var(--oro);   /* Brand-Akzent dieser Site (PT6) */

  /* ── Die Zeiten stehen NUR HIER. wisch.js liest sie von hier. ──────────────
     Warum langsamer besser ist — drei Gründe, alle nachprüfbar:

     1. Unter etwa 500 ms liest man den Übergang nicht, man bemerkt ihn nur.
        Eine Kante braucht Zeit, um als gezogene Kante wahrgenommen zu werden.
        Was zu schnell ist, registriert das Auge als Blinken — und ein Blinken
        ist von einem Ruckler nicht zu unterscheiden. Deshalb WIRKT der schnelle
        Übergang kaputt, obwohl technisch nichts fehlt.

     2. Der Übergang kauft die Ladezeit. Die Zielseite braucht ohnehin
        200–600 ms. Ist die Deckung kürzer, sieht man unter der aufziehenden
        Fläche eine halbfertige Seite — Bilder springen nach, Schrift tauscht.
        Ist sie länger, ist die Seite fertig, bevor sie sichtbar wird.

     3. Aufdecken darf nicht schneller sein als Zudecken. Beim Zudecken wartet
        man; jede Millisekunde ist gefühlte Wartezeit, also knapp halten. Beim
        Aufdecken ist der Inhalt schon da, die Fläche gibt ihn frei — das darf
        man sehen. Ein Aufdecken, das schneller ist, liest sich als Reißen. */
  --wisch-zu:    700ms;
  --wisch-auf:   820ms;
  --wisch-halt:  150ms;   /* Ruhe unter voller Deckung, während der Text tauscht */

  /* Fast gleichmäßig, nur an den Enden weich. Ein Wischerblatt fährt mit
     annähernd konstanter Geschwindigkeit; die vorher benutzte
     cubic-bezier(.22,1,.36,1) steht nach einem Fünftel der Zeit schon bei rund
     vier Fünfteln der Strecke. Bei einem Knopf liest sich das als „schnappt
     ein"; bei einer bildschirmbreiten Kante sieht man die Kante losschießen
     und auskriechen. */
  --wisch-kurve: cubic-bezier(.45,.05,.55,.95);
}

/* Ruhezustand ist „weg" — ohne Klasse deckt hier nichts ab, auch wenn kein
   einziges Skript läuft (Design-Checkliste §2 Regel 13b). */
.wisch{
  position:fixed; inset:0; z-index:1200;
  background:var(--wisch-farbe);
  pointer-events:none;
  transform:scaleX(0);
  will-change:transform;
}

/* Links → rechts */
.wisch.is-zu.lr { transform-origin:left;  pointer-events:auto;
  animation:wisch-zu  var(--wisch-zu)  var(--wisch-kurve) forwards }
.wisch.is-auf.lr{ transform-origin:right;
  animation:wisch-auf var(--wisch-auf) var(--wisch-kurve) forwards }

/* Rechts → links (die Rückfahrt des Wischerblatts) */
.wisch.is-zu.rl { transform-origin:right; pointer-events:auto;
  animation:wisch-zu  var(--wisch-zu)  var(--wisch-kurve) forwards }
.wisch.is-auf.rl{ transform-origin:left;
  animation:wisch-auf var(--wisch-auf) var(--wisch-kurve) forwards }

@keyframes wisch-zu { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes wisch-auf{ from{transform:scaleX(1)} to{transform:scaleX(0)} }

/* Eine weiche Vorderkante — das ist der Unterschied zwischen „Farbfläche
   erscheint" und „da wischt jemand". Sie liegt auf derselben Ebene und wird
   mitskaliert, kostet also keinen zweiten Zeichenvorgang. */
.wisch::after{
  content:""; position:absolute; top:0; bottom:0; width:14vw; max-width:180px;
  pointer-events:none;
}
.wisch.lr::after{ left:100%;
  background:linear-gradient(90deg,var(--wisch-farbe),transparent) }
.wisch.rl::after{ right:100%;
  background:linear-gradient(270deg,var(--wisch-farbe),transparent) }

/* Reduzierte Bewegung: gar keine Fläche. wisch.js navigiert dann direkt —
   diese Regel ist nur das Netz, falls die Klasse doch einmal gesetzt wird. */
@media(prefers-reduced-motion:reduce){
  .wisch.is-zu,.wisch.is-auf{ animation-duration:1ms }
  .wisch::after{ display:none }
}