/* ==========================================================================
   Weinod Vinothek & Weinbar
   Nachtpalette, Cormorant Garamond + Archivo, kantiges Raster
   ========================================================================== */

@font-face{font-family:'Archivo';src:url('../fonts/Archivo-normal-latin.woff2') format('woff2');font-weight:300 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-normal-latin-ext.woff2') format('woff2');font-weight:300 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant';src:url('../fonts/CormorantGaramond-normal-latin.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant';src:url('../fonts/CormorantGaramond-normal-latin-ext.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant';src:url('../fonts/CormorantGaramond-italic-latin.woff2') format('woff2');font-weight:300 700;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#100c0c;
  --ink-raise:#1b1211;
  --ink-deep:#0a0707;
  --wine:#823a3a;
  --wine-lift:#c47a71;
  --cream:#f1e8d9;
  --muted:#a39288;
  --line:rgba(241,232,217,.16);
  --line-soft:rgba(241,232,217,.08);
  --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.65;font-weight:350;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:'Cormorant',Georgia,serif;font-weight:400;letter-spacing:-.01em}
p{margin:0}
::selection{background:var(--wine);color:#fff}

.wrap{width:100%;max-width:1360px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding-top:clamp(72px,11vw,150px);padding-bottom:clamp(72px,11vw,150px)}
.section--raise{background:var(--ink-raise)}
.rule{height:1px;background:var(--line-soft);border:0;margin:0}

/* Typo-Skala */
.display{font-size:clamp(2.6rem,7.2vw,6.1rem);line-height:.98;letter-spacing:-.022em}
.h2{font-size:clamp(2rem,4.6vw,3.7rem);line-height:1.05;letter-spacing:-.018em}
.h3{font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.15}
.lead{font-size:clamp(1.02rem,1.35vw,1.18rem);color:#d9cdbd;max-width:62ch}
.small{font-size:.83rem;color:var(--muted);line-height:1.6}
.eyebrow{
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}
em{font-style:italic;color:var(--wine-lift)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.92em 1.7em;border:1px solid var(--line);
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--cream);background:transparent;white-space:nowrap;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .18s var(--ease);
}
.btn:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn--solid{background:var(--wine);border-color:var(--wine);color:#fff}
.btn--solid:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--wine-lift);outline-offset:3px
}

/* ===== Navigation ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{background:rgba(16,12,12,.9);backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
.nav__mark{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.nav.is-stuck .nav__mark{opacity:1;transform:none}
.nav__mark img{width:96px;filter:brightness(0) invert(1)}
.nav__links{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav__links a{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:#cdbfb1;transition:color .25s}
.nav__links a:hover{color:var(--cream)}
/* Der CTA liegt im Hero ueber wechselnd hellem Bild: deshalb immer deckend, nie nur Outline */
.nav__cta{
  border:1px solid var(--wine);background:var(--wine);color:#fff!important;
  padding:.72em 1.25em;font-family:inherit;
  font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;
  cursor:pointer;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.nav__cta:hover{background:var(--cream);color:var(--ink)!important;border-color:var(--cream)}
.nav__burger{display:none;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;position:relative}
.nav__burger span{position:absolute;left:11px;width:22px;height:1px;background:var(--cream);transition:transform .35s var(--ease),opacity .25s}
.nav__burger span:nth-child(1){top:19px}
.nav__burger span:nth-child(2){top:25px}
body.menu-open .nav__burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.menu{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:55;background:var(--ink-deep);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:var(--nav-h) var(--pad) 40px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
body.menu-open .menu{opacity:1;visibility:visible}
.menu a{font-family:'Cormorant',serif;font-size:clamp(2rem,9vw,3.2rem);line-height:1.25;color:var(--cream)}
.menu a:hover{color:var(--wine-lift)}
.menu__foot{margin-top:36px;display:flex;flex-wrap:wrap;gap:20px}

/* ===== Hero ===== */
.hero{
  position:relative;min-height:100dvh;display:flex;align-items:flex-end;
  padding-top:calc(var(--nav-h) + 32px);padding-bottom:clamp(40px,7vh,84px);overflow:hidden;overflow:clip;
}
.hero__bg{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.06);animation:heroDrift 14s var(--ease) forwards}
@keyframes heroDrift{to{transform:scale(1)}}
.hero__bg::after{
  content:"";position:absolute;top:0;left:0;right:0;bottom:0;
  background:
    linear-gradient(100deg,rgba(10,7,7,.9) 0%,rgba(10,7,7,.55) 44%,rgba(10,7,7,.28) 72%),
    linear-gradient(180deg,rgba(10,7,7,.8) 0%,rgba(10,7,7,.3) 30%,rgba(10,7,7,.9) 78%,var(--ink) 100%);
}
.hero__inner{position:relative;z-index:1;width:100%}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,60px);align-items:end}
.hero__mark{width:min(440px,74vw);margin-bottom:clamp(18px,2.6vw,30px)}
.hero__mark img{width:100%;filter:brightness(0) invert(1)}
.hero h1{font-size:clamp(1.55rem,3.4vw,2.7rem);line-height:1.1;font-weight:300;letter-spacing:.01em}
.hero__sub{margin-top:18px;max-width:34ch;color:#dbcfc0;font-size:clamp(.96rem,1.2vw,1.08rem)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.4vw,38px)}
.hero__side{text-align:right;padding-bottom:6px}
.hero__status{
  display:inline-flex;align-items:baseline;gap:10px;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);
  border-top:1px solid var(--line);padding-top:14px;
}
.hero__status b{font-weight:500;color:var(--wine-lift)}
.hero__place{margin-top:12px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ===== Manifest ===== */
.manifest{text-align:center;max-width:960px;margin-left:auto;margin-right:auto}
.manifest .h2{margin-bottom:clamp(24px,3vw,36px)}
.manifest p{margin-left:auto;margin-right:auto;color:#cec1b1}
.manifest__meta{
  margin-top:clamp(40px,5vw,64px);display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(20px,4vw,56px);border-top:1px solid var(--line-soft);padding-top:26px;
}
.manifest__meta span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ===== Zwei Welten (versetzter Split) ===== */
.duo{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.duo__fig{position:relative;overflow:hidden;overflow:clip;margin:0}
.ort__fig{margin:0}
.duo__fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s var(--ease),opacity 1s var(--ease)}
.duo__fig--a{grid-column:1/7;aspect-ratio:4/5}
.duo__fig--b{grid-column:7/13;aspect-ratio:4/5}

.duo__card{grid-column:1/7;margin-top:26px}
.duo__card--b{grid-column:7/13;margin-top:26px}
.duo__card h3{margin-bottom:10px}
.duo__stamp{
  writing-mode:vertical-rl;font-family:'Cormorant',serif;font-size:clamp(1.3rem,2vw,1.8rem);
  color:var(--muted);letter-spacing:.06em;margin-left:auto;margin-right:auto;
}

/* ===== Karte / Regionen ===== */
.karte__head{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:clamp(40px,5vw,64px)}
.regions{border-top:1px solid var(--line-soft)}
.region{
  display:grid;grid-template-columns:clamp(180px,20vw,260px) minmax(0,1fr) clamp(150px,16vw,210px);
  gap:clamp(14px,3vw,40px);align-items:baseline;
  padding-top:clamp(22px,2.6vw,32px);padding-bottom:clamp(22px,2.6vw,32px);border-bottom:1px solid var(--line-soft);
}
.region__name{font-family:'Cormorant',serif;font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.1}
.region__names{color:#c3b5a7;font-size:.94rem;max-width:56ch}
.region__count{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:right}
.karte__foot{margin-top:clamp(34px,4vw,50px);display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}

/* ===== Bildband ===== */
.band{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,22px);align-items:end}
.band figure{margin:0;overflow:hidden;overflow:clip}
.band img{width:100%;height:100%;object-fit:cover}
.band__1{grid-column:1/6;aspect-ratio:4/5}
.band__2{grid-column:6/10;aspect-ratio:3/4;transform:translateY(clamp(-40px,-4vw,-16px))}
.band__3{grid-column:10/13;aspect-ratio:2/3}

/* ===== Instagram-Grid ===== */
.insta__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:20px 32px;margin-bottom:clamp(30px,4vw,46px);
}
.insta__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,1.1vw,16px);
}
/* 3:4 entspricht dem Format, in dem Instagram seine Thumbnails ausliefert.
   object-fit:contain statt cover, damit kein Motiv angeschnitten wird: die
   Bilder sitzen damit randlos, abweichende Formate bekommen nur schmale
   Randflaechen in der Kachelfarbe statt eines Beschnitts. */
.insta__tile{
  position:relative;display:block;aspect-ratio:3/4;overflow:hidden;overflow:clip;
  background:var(--ink-raise);
}
.insta__tile img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .9s var(--ease-rv),opacity .5s var(--ease-rv);
}
.insta__tile::after{
  content:"";position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,rgba(10,7,7,0) 45%,rgba(10,7,7,.55) 100%);
  opacity:0;transition:opacity .45s var(--ease-rv);
}
.insta__tile:hover img,.insta__tile:focus-visible img{transform:scale(1.03)}
.insta__tile:hover::after,.insta__tile:focus-visible::after{opacity:1}
.insta__ico{
  position:absolute;right:11px;bottom:11px;width:19px;height:19px;z-index:1;
  color:var(--cream);opacity:0;transform:translateY(5px);
  transition:opacity .45s var(--ease-rv),transform .45s var(--ease-rv);
}
.insta__tile:hover .insta__ico,.insta__tile:focus-visible .insta__ico{opacity:1;transform:none}
.insta__tile.is-skeleton{
  background:linear-gradient(100deg,var(--ink-raise) 28%,rgba(241,232,217,.07) 50%,var(--ink-raise) 72%);
  background-size:220% 100%;animation:shimmer 1.5s linear infinite;
}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
/* Beim Reveal laufen die Kacheln gestaffelt ein, Verzoegerung setzt das Skript */
.insta__grid.in .insta__tile:not(.is-skeleton){
  opacity:0;animation:tileIn .8s var(--ease-rv) forwards;
}
@keyframes tileIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.insta__grid.is-empty{display:none}

@media (max-width:820px){
  .insta__grid{grid-template-columns:repeat(2,1fr)}
  .insta__head{align-items:flex-start;flex-direction:column}
}

/* ===== Delis ===== */
.delis{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,.72fr) minmax(0,.72fr);
  gap:clamp(20px,3vw,40px);align-items:end;
}
.delis__text{align-self:center;padding-right:clamp(0px,2vw,28px)}
.delis__mark{width:min(200px,46vw);margin:20px 0 22px}
.delis__mark img{width:100%;filter:brightness(0) invert(1);opacity:.92}
.delis .lead{max-width:46ch}
.delis__fig{margin:0;overflow:hidden;overflow:clip;aspect-ratio:4/5}
.delis__fig img{width:100%;height:100%;object-fit:cover}
.delis__fig--a{align-self:end}
.delis__fig--b{align-self:end}

/* ===== Ort & Zeiten ===== */
.ort{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,80px);align-items:stretch}
.hours{width:100%;border-collapse:collapse;margin-top:26px}
.hours th,.hours td{text-align:left;padding:.72em 0;border-bottom:1px solid var(--line-soft);font-weight:350;font-size:.95rem}
.hours th{color:var(--muted);font-weight:400;width:46%}
.hours tr[data-today] th,.hours tr[data-today] td{color:var(--wine-lift)}
.ort__facts{margin-top:30px;display:grid;gap:14px}
.ort__facts a{border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .3s}
.ort__facts a:hover{border-color:var(--wine-lift)}
/* Das Foto laeuft bis zur Unterkante der linken Spalte mit, also mindestens bis
   unter die Karte. aspect-ratio wuerde die Hoehe sonst vorher deckeln. */
.ort__fig{overflow:hidden;overflow:clip;align-self:stretch;height:100%;min-height:clamp(420px,46vw,720px);}
.ort__fig img{width:100%;height:100%;object-fit:cover}

/* ===== Kontakt ===== */
.kontakt{max-width:820px;margin-left:auto;margin-right:auto}
.form{margin-top:clamp(30px,4vw,44px);display:grid;gap:22px}
.field{display:grid;gap:8px}
.field label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--cream);font:inherit;font-size:1rem;padding:.6em 0;
  transition:border-color .3s var(--ease);
}
.field input:focus,.field textarea:focus{border-bottom-color:var(--wine-lift);outline:none}
.field textarea{resize:vertical;min-height:120px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.form__note{font-size:.78rem;color:var(--muted)}
.hp{position:absolute;left:-9999px;opacity:0}

/* ===== Footer ===== */
.footer{border-top:1px solid var(--line-soft);padding-top:clamp(44px,6vw,72px);padding-bottom:clamp(44px,6vw,72px);background:var(--ink-deep)}
.footer__top{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));gap:clamp(26px,4vw,56px)}
.footer__mark{width:150px;margin-bottom:16px;filter:brightness(0) invert(1);opacity:.85}
.footer h4{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-family:'Archivo',sans-serif;font-weight:500;margin-bottom:14px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.92rem}
.footer a:hover{color:var(--wine-lift)}
.footer__bottom{margin-top:clamp(34px,5vw,56px);padding-top:22px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px}

/* ===== Mobile Aktionsleiste ===== */
.dock{
  position:fixed;left:50%;transform:translate(-50%,130%);
  bottom:max(16px,env(safe-area-inset-bottom));z-index:50;
  width:min(92%,420px);display:none;
  background:rgba(23,16,15,.86);backdrop-filter:blur(16px);
  border:1px solid var(--line);
  transition:transform .5s var(--ease);
}
.dock.is-in{transform:translate(-50%,0)}
.dock a{
  flex:1;text-align:center;padding:1.05em .5em;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
}
.dock a+a{border-left:1px solid var(--line)}
.dock__row{display:flex}

/* ===== Scroll-Choreografie ===== */
:root{--ease-rv:cubic-bezier(.16,.78,.3,1)}

.rv{
  opacity:0;transform:translateY(38px);
  transition:opacity 1.05s var(--ease-rv),transform 1.15s var(--ease-rv);
  will-change:opacity,transform;
}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.1s}
.rv[data-d="2"]{transition-delay:.2s}
.rv[data-d="3"]{transition-delay:.3s}

/* Bilder ziehen beim Reveal zusaetzlich sanft auf */
.duo__fig img,.band figure img,.ort__fig img,.delis__fig img{
  transform:scale(1.07);transition:transform 1.6s var(--ease-rv);
}
.duo__fig.in img,.band figure.in img,.ort__fig.in img,.delis__fig.in img{transform:scale(1)}

/* Gestaffelte Zeilen, Verzoegerung setzt das Skript */
.region{transition-delay:calc(var(--i,0) * 70ms)}
.footer__top > *{transition-delay:calc(var(--i,0) * 80ms)}

/* Hero-Choreografie beim Laden */
.hero__mark,.hero h1,.hero__sub,.hero__actions,.hero__side{
  opacity:0;animation:heroIn 1.25s var(--ease-rv) forwards;
}
.hero__mark{animation-delay:.15s}
.hero h1{animation-delay:.34s}
.hero__sub{animation-delay:.46s}
.hero__actions{animation-delay:.58s}
.hero__side{animation-delay:.7s}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* Scroll-getriebene Bewegung, nur wo der Browser das nativ kann */
@supports (animation-timeline: view()){
  .par{
    animation:parDrift linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes parDrift{
    from{transform:scale(1.16) translateY(-4.4%)}
    to{transform:scale(1.16) translateY(4.4%)}
  }
  /* Hero verabschiedet sich beim Wegscrollen */
  .hero__bg{
    animation:heroExit linear both;
    animation-timeline:view();
    animation-range:exit 0% exit 100%;
  }
  @keyframes heroExit{from{opacity:1;transform:scale(1)}to{opacity:.45;transform:scale(1.06)}}
  /* Sektionstitel atmen leicht mit */
  .section .h2{
    animation:titleLift linear both;
    animation-timeline:view();
    animation-range:entry 10% cover 34%;
  }
  @keyframes titleLift{from{letter-spacing:.01em}to{letter-spacing:-.018em}}
}

/* ===== Rechtstexte ===== */
.legal{padding-top:calc(var(--nav-h) + clamp(50px,8vw,110px));padding-bottom:clamp(60px,8vw,110px)}
.legal__body{max-width:70ch}
.legal__body h2{font-size:clamp(1.3rem,2.2vw,1.75rem);margin:2.2em 0 .6em}
.legal__body h2:first-child{margin-top:1.2em}
.legal__body p{margin-bottom:1.05em;color:#cec1b1}
.legal__body a{border-bottom:1px solid var(--line)}
.center-page{min-height:78vh;display:flex;align-items:center;text-align:center}

/* ===== Responsive ===== */
@media (max-width:1000px){
  .duo{grid-template-columns:1fr 1fr;gap:20px}
  .duo__fig--a{grid-column:1/2;aspect-ratio:4/5}
  .duo__fig--b{grid-column:2/3;aspect-ratio:4/5}
  .duo__card{grid-column:1/2}
  .duo__card--b{grid-column:2/3}
  .delis{grid-template-columns:1fr 1fr;align-items:start}
  .delis__text{grid-column:1/3;margin-bottom:8px}

  .ort{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  :root{--nav-h:64px}
  .nav__links{display:none}
  .nav__burger{display:block}
  .nav__mark{opacity:1;transform:none}
  .hero__grid{grid-template-columns:1fr}
  .hero__side{text-align:left;margin-top:30px}
  .hero__status{width:100%}
  .dock{display:block}
  .band{grid-template-columns:1fr 1fr}
  .band__1{grid-column:1/2}
  .band__2{grid-column:2/3;transform:none}
  .band__3{grid-column:1/3;aspect-ratio:16/9}
  .region{grid-template-columns:1fr;gap:6px}
  .region__count{margin-top:4px}
  .form__row{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  body{padding-bottom:0}
}
@media (max-width:820px){
  .footer{padding-bottom:calc(clamp(44px,6vw,72px) + 86px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .hero__bg img{transform:none}
  .hero__mark,.hero h1,.hero__sub,.hero__actions,.hero__side{opacity:1;animation:none}
  .duo__fig img,.band figure img,.ort__fig img,.delis__fig img{transform:none}
  .par{animation:none!important}
}

/* =========================================================
   Skip-Link, grosse Buttons, Dock-Buttons
   ========================================================= */
.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--cream);color:var(--ink);
  padding:.8em 1.2em;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.skip:focus{left:12px;top:12px;}

.btn--big{padding:1.05em 1.9em;font-size:.82rem;}
.kontakt__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,4vw,40px);}

.dock__btn{
  flex:1;text-align:center;padding:1.05em .5em;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream);background:none;border:0;font-family:inherit;cursor:pointer;
}
.dock__btn + .dock__btn{border-left:1px solid var(--line);}

/* =========================================================
   Google Maps, laedt erst nach Klick
   ========================================================= */
.maps{margin-top:clamp(30px,4vw,44px);border:1px solid var(--line);line-height:0;
  /* dunkler Grund, damit eine blockierte Karte (Adblocker, Google nicht erreichbar)
     nicht als graue Flaeche auffaellt */
  background:var(--ink-deep);}
.maps iframe{display:block;width:100%;height:clamp(260px,32vw,360px);border:0;
  /* Die Google-Kachel ist hell: leicht abdunkeln, damit sie im dunklen Layout nicht knallt */
  filter:grayscale(.25) brightness(.92);}

/* =========================================================
   Tisch anfragen: Desktop-Dropdown, Handy Bottom-Sheet
   ========================================================= */
.tisch{position:fixed;top:0;left:0;right:0;bottom:0;z-index:120;}
.tisch[hidden]{display:none!important;}
/* Am Desktop ist das Panel ein Dropdown: die Flaeche faengt nur den Klick daneben ab
   und dunkelt nichts ab, damit der ausloesende Button sichtbar bleibt.
   Auf dem Handy ist es ein Sheet und bekommt den Dimmer (siehe Mobile-Block). */
.tisch__backdrop{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:transparent;opacity:1;transition:opacity .35s var(--ease);
}
.tisch__panel{
  position:absolute;right:var(--pad);top:calc(var(--nav-h) + 10px);
  width:min(360px,calc(100vw - 2 * var(--pad)));
  display:flex;flex-direction:column;align-items:stretch;gap:12px;
  background:var(--ink-raise);border:1px solid var(--line);
  padding:26px 24px 24px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75);
  opacity:0;transform:translateY(-10px);
  transition:opacity .32s var(--ease),transform .32s var(--ease);
}
.tisch.is-open .tisch__panel{opacity:1;transform:none;}
.tisch__grip{display:none;}
.tisch__x{
  position:absolute;top:10px;right:10px;width:34px;height:34px;
  display:grid;place-items:center;background:none;border:0;cursor:pointer;color:var(--muted);
  transition:color .25s;
}
.tisch__x:hover{color:var(--cream);}
.tisch__x svg{width:17px;height:17px;}
.tisch__kicker{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500;}
.tisch__title{
  font-family:'Cormorant',Georgia,serif;font-weight:400;
  font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1.12;margin:0 0 6px;max-width:18ch;
}
.tisch__btn{
  display:flex;align-items:center;justify-content:center;gap:.7em;
  padding:1.05em 1.2em;border:1px solid var(--line);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--cream);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.tisch__btn:hover{background:var(--cream);border-color:var(--cream);color:var(--ink);}
.tisch__btn--solid{background:var(--wine);border-color:var(--wine);color:#fff;}
.tisch__btn--solid:hover{background:var(--cream);border-color:var(--cream);color:var(--ink);}
.tisch__note{font-size:.78rem;color:var(--muted);line-height:1.55;margin-top:4px;}

@media (max-width:820px){
  .tisch__backdrop{background:rgba(10,7,7,.55);opacity:0;}
  .tisch.is-open .tisch__backdrop{opacity:1;}
  .tisch__panel{
    right:0;left:0;top:auto;bottom:0;width:auto;
    border-left:0;border-right:0;border-bottom:0;
    padding:10px 20px calc(26px + env(safe-area-inset-bottom));
    transform:translateY(100%);
    transition:transform .42s var(--ease),opacity .25s var(--ease);
    touch-action:none;
  }
  .tisch.is-open .tisch__panel{transform:translateY(0);}
  .tisch__panel.is-dragging{transition:none;}
  .tisch__grip{
    display:block;width:100%;background:none;border:0;cursor:grab;
    padding:8px 0 14px;
  }
  .tisch__grip span{display:block;width:44px;height:4px;border-radius:999px;background:var(--line);margin:0 auto;}
  .tisch__x{display:none;}
  .tisch__title{cursor:grab;}
}

/* =========================================================
   NEBENAN — DELIS (Stempel, Karte, Seitenreiter) · 11/2026
   DELIS-Farben, gespiegelt zum Konzept auf der DELIS-Seite
   ========================================================= */
:root{
  --d-ox:#6d2221;
  --d-mustard:#edc00a;
  --d-cream:#f9f0d0;
  --d-paper:#fffbe9;
  --d-ink:#1b1210;
}

/* Stempel im Hero */
.nb-stamp{
  position:absolute;z-index:3;right:var(--pad);bottom:150px;
  width:140px;height:140px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--d-mustard);color:var(--d-ox);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.65);
  animation:nbStampIn 1s var(--ease) .7s backwards;
  transition:scale .5s var(--ease),rotate .5s var(--ease);
}
.nb-stamp svg{position:absolute;top:0;left:0;width:100%;height:100%;animation:nbSpin 22s linear infinite;}
.nb-stamp text{font:800 8.6px 'Archivo',sans-serif;letter-spacing:.14em;fill:var(--d-ox);}
.nb-stamp img{position:relative;width:70px;height:auto;}
.nb-stamp > span{position:absolute;bottom:20px;font-size:.8rem;line-height:1;}
.nb-stamp:hover{scale:1.06;rotate:-4deg;}
.nb-stamp:hover svg{animation-play-state:paused;}
.nb-stamp:focus-visible{outline:3px solid var(--d-mustard);outline-offset:4px;}
@keyframes nbSpin{to{transform:rotate(360deg);}}
@keyframes nbStampIn{from{opacity:0;translate:0 18px;scale:.82;}to{opacity:1;translate:0 0;scale:1;}}

/* Karte: nur DELIS im Rampenlicht */
.nebenan{padding-top:clamp(10px,2vw,30px);}
.nb-card{
  position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  background:var(--d-cream);color:var(--d-ink);
  border-radius:24px;overflow:hidden;overflow:clip;
  box-shadow:0 34px 70px -36px rgba(0,0,0,.75);
}
.nb-card:focus-visible{outline:3px solid var(--d-mustard);outline-offset:4px;}
.nb-card__pic{
  position:relative;overflow:hidden;overflow:clip;border-radius:16px;
  margin:clamp(14px,2vw,26px) 0 clamp(14px,2vw,26px) clamp(14px,2vw,26px);
  min-height:clamp(300px,34vw,440px);
}
.nb-card__pic img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease);}
.nb-card:hover .nb-card__pic img{transform:scale(1.05);}
.nb-card__body{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(16px,1.8vw,22px);padding:clamp(28px,4vw,48px);
}
.nb-card__no{
  position:absolute;top:clamp(6px,1.2vw,14px);right:clamp(18px,3vw,38px);
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:clamp(5.4rem,10vw,9.5rem);line-height:.8;letter-spacing:-.04em;
  color:var(--d-ox);opacity:.1;pointer-events:none;
}
.nb-card__kicker{position:relative;font-size:.64rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--d-ox);}
.nb-card__logo{position:relative;width:auto;height:clamp(48px,5.4vw,70px);}
.nb-card__title{
  position:relative;margin:0;
  font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,2.7vw,2.3rem);line-height:1.04;letter-spacing:-.015em;max-width:17ch;
  color:var(--d-ink);
}
.nb-card__title em{font-style:normal;color:var(--d-ox);}
.nb-card__chips{position:relative;display:flex;flex-wrap:wrap;gap:8px;}
.nb-card__chips span{
  font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--d-ink);
  border:1px solid rgba(109,34,33,.3);border-radius:999px;padding:.5em 1em;
}
.nb-card__foot{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:auto;padding-top:6px;}
.nb-card__btn{
  display:inline-flex;align-items:center;gap:.5em;
  background:var(--d-mustard);color:var(--d-ox);border-radius:999px;
  padding:.95em 1.4em;font-size:.82rem;font-weight:800;
  transition:transform .45s var(--ease);
}
.nb-card__btn svg{width:1em;height:1em;}
.nb-card:hover .nb-card__btn{transform:translateX(4px);}
.nb-card__note{font-size:.76rem;color:rgba(27,18,16,.65);}
.nb-insta{margin:18px 0 0;font-size:.85rem;color:var(--muted);}
.nb-insta a{color:var(--wine-lift);font-weight:700;}

/* Seitenreiter: nur Desktop, taucht nach dem Hero auf */
.nb-tab{
  position:fixed;z-index:90;right:0;top:50%;
  display:flex;align-items:stretch;color:var(--d-ink);
  transform:translate(100%,-50%);opacity:0;visibility:hidden;
  transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .6s var(--ease),visibility 0s linear 1s;
}
.nb-tab.is-on{
  transform:translate(calc(100% - 48px),-50%);opacity:1;visibility:visible;
  transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .6s var(--ease),visibility 0s;
}
.nb-tab.is-on:hover,.nb-tab.is-on:focus-visible{transform:translate(0,-50%);}
.nb-tab:focus-visible{outline:3px solid var(--d-mustard);outline-offset:-3px;}
.nb-tab__label{
  width:48px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:var(--d-mustard);color:var(--d-ox);border-radius:14px 0 0 14px;
  box-shadow:-14px 0 34px -16px rgba(0,0,0,.6);
}
.nb-tab__label span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.62rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;}
.nb-tab__label::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:nbBlink 2.4s ease-in-out infinite;}
@keyframes nbBlink{50%{opacity:.25;}}
.nb-tab__panel{display:grid;grid-template-columns:132px 196px;gap:16px;padding:14px 18px 14px 4px;background:var(--d-cream);}
.nb-tab__panel > img{width:132px;height:168px;object-fit:cover;border-radius:6px;transition:transform 1.2s var(--ease);}
.nb-tab.is-on:hover .nb-tab__panel > img{transform:scale(1.03);}
.nb-tab__col{display:flex;flex-direction:column;justify-content:space-between;height:168px;}
.nb-tab__top{font-size:.56rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--d-ox);line-height:1.5;}
.nb-tab__mid{display:grid;gap:6px;}
.nb-tab__mid img{width:auto;height:34px;}
.nb-tab__mid span{font-size:.8rem;color:var(--d-ink);}
.nb-tab__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.72rem;color:rgba(27,18,16,.7);}
.nb-tab__go{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--d-ox);color:var(--d-cream);font-size:.9rem;transition:transform .5s var(--ease);}
.nb-tab.is-on:hover .nb-tab__go{transform:rotate(-45deg);}

@media (max-width:1000px){
  .nb-card{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}
  .nb-card__title{font-size:clamp(1.35rem,3.2vw,1.9rem);}
}
@media (max-width:820px){
  .nb-tab{display:none;}
  .nb-stamp{right:12px;bottom:14px;width:104px;height:104px;}
  /* Platz neben dem Stempel, damit Status und Adresse nie darunter liegen */
  .hero__side{padding-right:124px;}
  .nb-stamp img{width:52px;}
  .nb-stamp > span{bottom:14px;font-size:.72rem;}
  .nb-card{grid-template-columns:1fr;border-radius:20px;}
  .nb-card__pic{margin:12px 12px 0;min-height:240px;}
  .nb-card__body{padding:22px 20px 26px;}
  .nb-card__no{font-size:5rem;top:8px;right:16px;}
  .nb-card__title{max-width:18ch;}
}
@media (max-width:480px){
  .nb-card__btn{width:100%;justify-content:center;}
}

/* =========================================================
   Mobiler Header: deckend, kein Milchglas (Guardrails 4)
   ========================================================= */
@media (max-width:820px){
  .nav.is-stuck{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;}
  .menu{background:var(--ink-deep);backdrop-filter:none;-webkit-backdrop-filter:none;}
  .dock{background:var(--ink-raise);backdrop-filter:none;-webkit-backdrop-filter:none;}
}
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .nav.is-stuck{background:var(--ink);}
  .dock{background:var(--ink-raise);}
}

@media (prefers-reduced-motion:reduce){
  .nb-stamp,.nb-stamp svg,.nb-tab__label::before{animation:none;}
  .nb-tab,.nb-tab.is-on,.tisch__panel,.tisch__backdrop{transition:none;}
}