/* Besen Zaiß – Stile aus dem Prototyp. Farben und Schriften kommen als Presets aus theme.json.
   WordPress-spezifische Anpassungen liegen in bloecke.css. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--wp--preset--color--creme);color:var(--wp--preset--color--tinte);
  font-family:var(--wp--preset--font-family--sans);font-size:18px;line-height:1.8;
  font-feature-settings:"onum" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}

/* Buchdeckel-Kante ganz oben */
.buchkante{height:5px;background:var(--wp--preset--color--bordeaux)}

/* ============================================================
   KOPFLEISTE
   ============================================================ */
.kopf{
  position:sticky;top:0;z-index:30;background:var(--wp--preset--color--creme);
  border-bottom:1px solid #DED3C6;
  transition:box-shadow .35s ease;
}
.kopf--klein{box-shadow:0 5px 20px rgba(43,36,32,.09)}
.kopf__innen{
  position:relative;
  max-width:1280px;margin:0 auto;padding:18px clamp(20px,4vw,48px);
  display:flex;align-items:center;gap:clamp(18px,3vw,42px);
  transition:padding .35s ease;
}
.kopf--klein .kopf__innen{padding-top:9px;padding-bottom:9px}
.marke{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}
.marke img{width:58px;height:auto;transition:width .35s ease}
.kopf--klein .marke img{width:40px}
.marke__text{line-height:1.15}
.marke__zeile1{
  display:block;font-family:var(--wp--preset--font-family--serif);font-size:1.32rem;font-weight:600;
  color:var(--wp--preset--color--bordeaux);letter-spacing:.01em;transition:font-size .35s ease;
}
.kopf--klein .marke__zeile1{font-size:1.1rem}
.kopf--klein .marke__zeile2{display:none}
.marke__zeile2{
  display:block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--wp--preset--color--salbei);font-weight:600;margin-top:2px;
}

.navi{display:flex;gap:clamp(14px,1.9vw,30px);margin-left:auto;align-items:center;flex-shrink:0}
.navi a{
  font-size:.95rem;font-weight:500;text-decoration:none;color:var(--wp--preset--color--tinte);
  font-variant:small-caps;letter-spacing:.07em;padding-bottom:9px;
  white-space:nowrap;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1,5.2 C17,2.1 33,6.8 50,3.9 C67,1.1 83,6.2 99,3.1' fill='none' stroke='%237D1532' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left bottom;background-size:0% 7px;
  transition:background-size .4s cubic-bezier(.2,.7,.3,1),color .25s;
}
.navi a:hover,.navi a:focus-visible{background-size:100% 7px;color:var(--wp--preset--color--bordeaux)}

/* ---- Der ausgesteckte Besen ----
   Der Besen liegt absolut, damit er aus der Leiste heraushängen kann,
   ohne deren Höhe zu beeinflussen. */
.aushang{
  margin-left:auto;flex-shrink:0;position:relative;
  padding-right:106px;transition:padding .35s ease;
}
.aushang__text{text-align:right;max-width:280px}
.aushang__zustand{
  font-family:var(--wp--preset--font-family--serif);font-style:italic;font-size:1.34rem;
  color:var(--wp--preset--color--bordeaux);line-height:1.25;margin:0;transition:font-size .35s ease;
}
.aushang__detail{
  font-size:.82rem;color:var(--wp--preset--color--salbei);margin:3px 0 0;line-height:1.5;
  letter-spacing:.015em;
}
.besen{
  position:absolute;right:0;top:-18px;width:94px;z-index:31;overflow:visible;
  transform-origin:70% 0;
  transition:opacity .35s ease,transform .35s ease;
}
.besen svg{width:100%;height:auto;overflow:visible}
/* zusammengeschoben: der Besen fährt hoch, sonst hinge er über dem Text */
.kopf--klein .aushang{padding-right:0}
.kopf--klein .besen{opacity:0;transform:translateY(-30px) scale(.7);pointer-events:none}
.kopf--klein .aushang__detail{display:none}
.kopf--klein .aushang__zustand{font-size:1.08rem}
.besen__koerper{
  transform-origin:70px 5px;
  animation:pendeln 8s ease-in-out infinite alternate;
}
@keyframes pendeln{from{transform:rotate(-2.1deg)}to{transform:rotate(2.1deg)}}
body:not(.besen-offen) .besen__koerper{display:none}
body.besen-offen .besen__leer{display:none}
.besen__leer{transform-origin:70px 5px;animation:pendeln 11s ease-in-out infinite alternate}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:min(82vh,760px);display:flex;align-items:center;
  background:var(--wp--preset--color--pergament);
  padding:clamp(56px,9vw,120px) 0;
}
.anschlag{
  position:relative;z-index:10;
  margin-left:clamp(20px,7vw,110px);margin-right:20px;
  max-width:660px;width:100%;
  background:var(--wp--preset--color--creme);
  padding:clamp(34px,4.6vw,60px) clamp(28px,4.2vw,58px);
  border-left:5px solid var(--wp--preset--color--bordeaux);
  box-shadow:16px 16px 0 rgba(43,36,32,.13);
  transform:rotate(-.55deg);
}
/* Das Blatt hängt komplett schief, Text inklusive. Die Einfliege-Animation
   sitzt deshalb auf dem inneren Element, sonst würde sie die Drehung löschen. */

.hoehe{
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--wp--preset--color--salbei);font-weight:600;margin:0 0 20px;
}
.doppelstrich{border:0;border-top:3px double #D9CDBE;margin:0 0 26px}

.hero h1{
  font-family:var(--wp--preset--font-family--serif);font-weight:600;
  font-size:clamp(2.9rem,6.6vw,5rem);line-height:.84;
  margin:0 0 24px;color:var(--wp--preset--color--tinte);letter-spacing:-.005em;
}
.hero h1 .zweit{
  display:block;color:var(--wp--preset--color--bordeaux);margin-left:.44em;
  font-style:italic;font-weight:500;
}
.hero .vorspann{
  margin:0 0 34px;font-size:1.12rem;line-height:1.78;color:#4A403A;max-width:44ch;
}
.hero .vorspann b{font-weight:600;color:var(--wp--preset--color--tinte)}

.handlung{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.knopf{
  display:inline-block;text-decoration:none;background:var(--wp--preset--color--bordeaux);color:var(--wp--preset--color--creme);
  padding:15px 30px;font-weight:600;font-size:1.02rem;border-radius:2px;
  border:2px solid var(--wp--preset--color--bordeaux);transition:.25s;
}
.knopf:hover{background:var(--wp--preset--color--bordeaux-dunkel);border-color:var(--wp--preset--color--bordeaux-dunkel);transform:translateY(-2px)}
.knopf--zweit{background:transparent;color:var(--wp--preset--color--bordeaux);border-color:#D6C6B4}
.knopf--zweit:hover{background:var(--wp--preset--color--bordeaux);color:var(--wp--preset--color--creme);border-color:var(--wp--preset--color--bordeaux)}

.rufnummer{
  margin:22px 0 0;font-size:.98rem;color:#5B5049;
}
.rufnummer a{
  font-weight:600;color:var(--wp--preset--color--bordeaux);text-decoration:none;
  border-bottom:1px solid var(--wp--preset--color--altrosa);padding-bottom:1px;transition:border-color .25s;
  white-space:nowrap;
}
.rufnummer a:hover{border-color:var(--wp--preset--color--bordeaux)}
.rufnummer-inline{
  font-weight:600;color:var(--wp--preset--color--bordeaux);text-decoration:none;
  border-bottom:1px solid var(--wp--preset--color--altrosa);padding-bottom:1px;white-space:nowrap;transition:border-color .25s;
}
.rufnummer-inline:hover{border-color:var(--wp--preset--color--bordeaux)}

/* ---- Bildnachweis-Fähnchen am unteren Bildrand ---- */
.bildzeile{
  position:absolute;right:0;bottom:0;z-index:10;
  background:var(--wp--preset--color--tinte);color:var(--wp--preset--color--creme);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 20px;font-weight:500;opacity:.82;
}

/* ============================================================
   SEKTION 2 · ÖFFNUNGSZEITEN
   Ein Emailleschild am Nagel, daneben ein angeklebter Zettel.
   Beides gibt es auf dem Hof wirklich: das Schild hängt dort
   an der alten Weinpresse, in Rot und Grün handgemalt.
   ============================================================ */
.zeiten{
  background:var(--wp--preset--color--pergament);position:relative;
  padding:clamp(64px,9vw,120px) 0 clamp(72px,9vw,120px);
  /* Beim Einschwingen ragt das Schild kurz seitlich über den Rand hinaus,
     das darf auf dem Handy keinen horizontalen Scrollbalken erzeugen */
  overflow-x:hidden;overflow-x:clip;
}
.zeiten__innen{
  max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(40px,6vw,100px);align-items:center;
}
.zeiten h2{
  font-family:var(--wp--preset--font-family--serif);font-weight:600;
  font-size:clamp(2.4rem,4.4vw,3.7rem);line-height:.98;letter-spacing:-.005em;
  margin:0 0 26px;color:var(--wp--preset--color--tinte);
}
.zeiten h2 em{font-style:italic;font-weight:500;color:var(--wp--preset--color--bordeaux)}
.zeiten__text p{font-size:1.08rem;line-height:1.8;color:#4A403A;margin:0 0 18px;max-width:50ch}
.zeiten__hinweis{
  font-family:var(--wp--preset--font-family--serif);font-style:italic;font-size:1.36rem;line-height:1.4;
  color:var(--wp--preset--color--bordeaux);margin:30px 0 0;max-width:38ch;
  padding-left:18px;border-left:3px solid var(--wp--preset--color--altrosa);
}
.zeiten__text .zeiten__hinweis{font-size:1.36rem;color:var(--wp--preset--color--bordeaux)}

/* ---- Die Wand, an der beides hängt ---- */
.wand{position:relative;padding:4px 0 204px 38px}

/* Schild samt Aufhängung: dreht sich um den Nagel und pendelt sich beim
   Einblenden aus, wie ein Schild, das man gerade aufgehängt hat */
.haenger{position:relative;transform-origin:50% 0;opacity:0;transform:rotate(1.2deg)}
.haenger.da{opacity:1;animation:einhaengen 3s cubic-bezier(.3,.55,.35,1) forwards}
@keyframes einhaengen{
  0%{transform:rotate(-7deg);opacity:0}
  12%{opacity:1}
  28%{transform:rotate(4deg)}
  50%{transform:rotate(-1.6deg)}
  70%{transform:rotate(2.1deg)}
  86%{transform:rotate(.7deg)}
  100%{transform:rotate(1.2deg)}
}
.aufhaengung{display:block;width:100%;height:auto;overflow:visible;margin-bottom:-9px;position:relative;z-index:2}

.schild{
  position:relative;background:#FCFAF5;border-radius:8px;text-align:center;
  padding:clamp(30px,3.4vw,42px) clamp(26px,3vw,44px) clamp(30px,3vw,38px);
  box-shadow:inset 0 0 0 4px #FCFAF5,inset 0 0 0 6px var(--wp--preset--color--bordeaux),12px 14px 0 rgba(43,36,32,.16);
}
/* Emaille-Glanz in der oberen linken Ecke */
.schild::before{
  content:"";position:absolute;inset:6px;border-radius:5px;pointer-events:none;
  background:linear-gradient(128deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,0) 32%);
}
.schild > *{position:relative;z-index:1}
.schild__titel{font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--wp--preset--color--bordeaux);font-weight:600;margin:0 0 14px}
.schild__datum{font-family:var(--wp--preset--font-family--serif);font-weight:600;color:var(--wp--preset--color--bordeaux);margin:0 0 18px;line-height:1}
.schild__datum span{display:block;font-size:clamp(2rem,3vw,2.6rem)}
.schild__datum .bis{font-size:1.15rem;font-style:italic;font-weight:500;margin:7px 0 5px;letter-spacing:.04em}
.schild__strich{width:64px;height:2px;background:#3E6B33;margin:0 auto 18px;opacity:.55}
.schild__zeit{font-family:var(--wp--preset--font-family--serif);font-style:italic;font-size:clamp(1.4rem,2vw,1.75rem);line-height:1.25;color:#3E6B33;margin:0 0 12px}
.schild__zeit b{font-style:normal;font-weight:600}
.schild__ruhe{font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;color:#3E6B33;font-weight:600;margin:0}
.schild__kueche{font-size:.86rem;color:var(--wp--preset--color--salbei);margin:14px 0 0}

/* ---- Der Zettel für den Weinverkauf, mit Klebeband angebracht ---- */
.zettel{
  position:absolute;left:-8px;bottom:0;z-index:3;width:min(74%,296px);
  background:#FFFDF8;padding:26px 24px 22px;
  box-shadow:7px 8px 0 rgba(43,36,32,.12);
  transform:rotate(-2.6deg) translateY(16px);opacity:0;
  transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.3,1);
}
.zettel.da{opacity:1;transform:rotate(-2.6deg)}
.klebeband{
  position:absolute;top:-13px;left:50%;width:98px;height:26px;
  background:rgba(233,222,190,.78);transform:translateX(-50%) rotate(-3.5deg);
  box-shadow:0 1px 2px rgba(0,0,0,.07);
}
.zettel__titel{font-family:var(--wp--preset--font-family--serif);font-style:italic;font-size:1.36rem;color:var(--wp--preset--color--tinte);margin:0 0 12px;line-height:1.2}
.zettel__zeile{display:flex;justify-content:space-between;gap:12px;font-size:1rem;padding:6px 0}
.zettel__zeile + .zettel__zeile{border-top:1px dotted #D9CDBB}
.zettel__zeile b{font-weight:600;color:var(--wp--preset--color--bordeaux);white-space:nowrap}
.zettel__klein{font-size:.86rem;color:var(--wp--preset--color--salbei);margin:12px 0 0;line-height:1.55}
.zettel__klein a{color:var(--wp--preset--color--bordeaux);text-decoration:none;border-bottom:1px solid var(--wp--preset--color--altrosa);white-space:nowrap;font-weight:600}

/* ============================================================
   SEKTION 3 · DER BESEN
   Buchsatz statt Kacheln: Initiale, Marginalien am Rand,
   senkrechte Bildunterschriften, Passepartout-Linie um die Fotos.
   ============================================================ */
.laube{background:var(--wp--preset--color--creme);padding:clamp(64px,9vw,120px) 0 clamp(72px,9vw,120px);overflow-x:hidden;overflow-x:clip}
.laube__innen{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.laube h2{
  font-family:var(--wp--preset--font-family--serif);font-weight:600;
  font-size:clamp(2.4rem,4.4vw,3.7rem);line-height:.98;letter-spacing:-.005em;
  margin:0 0 clamp(40px,5vw,64px);color:var(--wp--preset--color--tinte);max-width:22ch;
}
.laube h2 em{font-style:italic;font-weight:500;color:var(--wp--preset--color--bordeaux)}

.satz{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,4vw,56px);align-items:start}
.satz + .satz{margin-top:clamp(56px,7vw,100px)}
/* Platzierung als Klassen, nie inline: Inline-Styles würden die Media Queries aushebeln */
.satz__a{grid-column:1 / span 5}
.satz__b{grid-column:7 / span 6}

/* ---- Foto mit Passepartout-Linie und senkrechter Unterschrift ---- */
.foto{display:flex;gap:16px;align-items:stretch;margin:0} /* figure bringt sonst 40px Seitenrand mit */
.foto__rahmen{flex:1;position:relative;outline:1px solid var(--wp--preset--color--altrosa);outline-offset:10px}
.foto__bild{
  position:relative;overflow:hidden;
  clip-path:inset(100% 0 0 0);transition:clip-path 1.1s cubic-bezier(.2,.7,.3,1);
}
.foto.da .foto__bild{clip-path:inset(0)}
.foto--hoch .foto__bild{aspect-ratio:3/4}
.foto--quer .foto__bild{aspect-ratio:4/3}
.foto__bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.foto:hover .foto__bild img{transform:scale(1.045)}
.foto__text{
  writing-mode:vertical-rl;transform:rotate(180deg);align-self:flex-end;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wp--preset--color--salbei);
  font-weight:600;margin:0;white-space:nowrap;
}

/* ---- Lauftext mit Initiale und Marginalien ---- */
.lauftext{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:20px;row-gap:24px;align-items:start}
.marginalie{
  font-family:var(--wp--preset--font-family--serif);font-size:1.6rem;font-weight:600;color:var(--wp--preset--color--bordeaux);
  line-height:1.15;text-align:right;padding-top:.3em;margin:0;
}
.marginalie small{
  display:block;font-family:var(--wp--preset--font-family--sans);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--wp--preset--color--salbei);font-weight:600;margin-top:3px;
}
.marginalie--wort{font-style:italic;font-weight:500;font-size:1.35rem;padding-top:.45em}
.lauftext p{margin:0;font-size:1.08rem;line-height:1.8;color:#4A403A}
.initiale::first-letter{
  font-family:var(--wp--preset--font-family--serif);font-weight:600;font-size:4.3em;float:left;
  line-height:.78;padding:.1em .12em 0 0;color:var(--wp--preset--color--bordeaux);
}

/* ---- Zitat mit Pinselkringel aus dem Logo ---- */
.zitat{grid-column:2 / span 10;margin:0;text-align:center;padding:clamp(6px,1.5vw,16px) 0}
.zitat blockquote{margin:0}
.zitat p{
  font-family:var(--wp--preset--font-family--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.3;color:var(--wp--preset--color--tinte);
  margin:0 auto;max-width:30ch;
}
.zitat .ring{position:relative;display:inline-block;color:var(--wp--preset--color--bordeaux)}
.zitat .ring svg{position:absolute;left:-8%;top:-26%;width:118%;height:152%;pointer-events:none;overflow:visible}
/* Kein uppercase: aus dem ß in Zaiß würde sonst SS */
.zitat figcaption{margin-top:18px;font-family:var(--wp--preset--font-family--serif);font-style:italic;font-size:1.1rem;letter-spacing:.04em;color:var(--wp--preset--color--salbei)}

/* ---- Bildlauf: alle Laubenfotos treiben langsam über die volle Breite ----
   Kein gap im Band, sondern margin-right je Foto, damit die Endlosschleife
   (translateX -50% bei verdoppeltem Inhalt) exakt aufgeht. */
.lauf__titel{margin:clamp(56px,7vw,100px) 0 22px}
.lauf{overflow:hidden;padding:10px 0 12px;--h:clamp(280px,30vw,420px);--m:clamp(22px,2.6vw,40px)}
.lauf__band{display:flex;width:max-content;will-change:transform}
.lauf__band--endlos{animation:treiben 80s linear infinite}
.lauf:hover .lauf__band--endlos{animation-play-state:paused}
@keyframes treiben{to{transform:translateX(-50%)}}
.lauf__foto{flex:none;display:flex;gap:12px;height:var(--h);margin:0 var(--m) 0 0}
/* Linksabstand nur ohne Endlosschleife, sonst springt die Schleife um einen halben Abstand */
.lauf__band:not(.lauf__band--endlos) .lauf__foto:first-child{margin-left:var(--m)}
.lauf__rahmen{height:100%;overflow:hidden;outline:1px solid var(--wp--preset--color--altrosa);outline-offset:8px}
.lauf__rahmen img{height:100%;width:auto;display:block;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.lauf__foto:hover .lauf__rahmen img{transform:scale(1.05)}
.lauf__foto figcaption{
  writing-mode:vertical-rl;transform:rotate(180deg);align-self:flex-end;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wp--preset--color--salbei);
  font-weight:600;margin:0;white-space:nowrap;
}
/* Punkte unter dem Streifen: nur, wenn er nicht von selbst läuft */
.lauf__punkte{display:none;justify-content:center;gap:6px;padding:12px 20px 0}
.lauf--manuell + .lauf__punkte{display:flex}
.lauf__punkt{
  width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;
}
.lauf__punkt::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--wp--preset--color--altrosa);opacity:.45;transition:transform .3s,opacity .3s,background .3s;
}
.lauf__punkt[aria-current="true"]::before{background:var(--wp--preset--color--bordeaux);opacity:1;transform:scale(1.25)}

/* ============================================================
   SEKTION 4 · SPEISEKARTE
   Angepinnte Blätter wie die Karte am Laubenpfosten auf dem Hof:
   Punktführung zwischen Gericht und Preis, Reißzwecke oben,
   der Mittagstisch als Notizblock mit Kringel um den heutigen Tag.
   ============================================================ */
.karte{background:var(--wp--preset--color--pergament);padding:clamp(64px,9vw,120px) 0 clamp(72px,9vw,120px);overflow-x:hidden;overflow-x:clip}
.karte__innen{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.karte__kopf{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:clamp(36px,5vw,80px);align-items:start}
.karte h2{
  font-family:var(--wp--preset--font-family--serif);font-weight:600;
  font-size:clamp(2.4rem,4.4vw,3.7rem);line-height:.98;letter-spacing:-.005em;
  margin:0 0 26px;color:var(--wp--preset--color--tinte);max-width:16ch;
}
.karte h2 em{font-style:italic;font-weight:500;color:var(--wp--preset--color--bordeaux)}
.karte__text p{font-size:1.08rem;line-height:1.8;color:#4A403A;margin:0 0 18px;max-width:50ch}
/* Der Text links bleibt beim Scrollen stehen, während die lange Karte rechts durchläuft */
.karte__text{position:sticky;top:104px}

/* ---- Die Karteikarte: ein Blatt mit zwei Reitern an der Oberkante ----
   Reiter wie an einer Karteikarte, kantig, aus demselben Papier. Der aktive
   Reiter ist mit dem Blatt verwachsen, der andere steht etwas tiefer. */
.karteikarte{transform:rotate(-.6deg)}
.register{display:flex;gap:5px;padding-left:16px;position:relative;z-index:2}
.reiter{
  background:#EDE3D4;color:#6B5D54;border:0;cursor:pointer;
  font:inherit;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  padding:10px 20px 9px;margin-top:7px;
  box-shadow:inset 0 -1px 0 #DDD0BE;
  transition:background .25s,color .25s,margin-top .25s,padding .25s;
}
.reiter:hover{background:#F5EEE2;color:var(--wp--preset--color--bordeaux)}
.reiter[aria-selected="true"]{
  background:#FFFDF8;color:var(--wp--preset--color--bordeaux);margin-top:0;padding-top:16px;box-shadow:none;
}
.reiter:focus-visible{outline:2px solid var(--wp--preset--color--bordeaux);outline-offset:-4px}

.blatt__seite[hidden]{display:none}
.blatt__seite{animation:blattwechsel .4s ease}
@keyframes blattwechsel{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.blatt__abschnitt + .blatt__abschnitt{margin-top:36px}
.blatt__fuss{margin:26px 0 0;padding-top:16px;border-top:1px solid #E2D6C6;font-size:.84rem;line-height:1.55;color:var(--wp--preset--color--salbei)}

/* ============================================================
   SEKTION 5 · WEINE
   Spiegelbild der Speisekarte: dieselbe Karteikarte, diesmal links,
   Text rechts, auf Creme. Im Ausschank drei Preisspalten wie auf der
   gedruckten Karte, zum Mitnehmen der Jahrgang als Randzahl.
   ============================================================ */
.weine{background:var(--wp--preset--color--creme)}
.karte__kopf--gespiegelt{grid-template-columns:minmax(0,13fr) minmax(0,11fr)}
.weine .karteikarte{transform:rotate(.6deg)}

/* Drei Preisspalten: Glas, Viertele, Flasche */
.wein{display:grid;grid-template-columns:minmax(0,1fr) 58px 70px 70px;column-gap:10px;align-items:baseline;padding:9px 0}
.wein--zwei{grid-template-columns:minmax(0,1fr) 58px 70px}
.wein + .wein{border-top:1px solid #F0E8DC}
.wein--kopf{padding:0 0 6px}
.wein + .wein--kopf,.wein--kopf + .wein{border-top:0}
.wein--kopf span{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wp--preset--color--salbei);font-weight:600;text-align:right;line-height:1.3}
.wein--kopf .viertele{color:var(--wp--preset--color--bordeaux)}
.wein__name{font-family:var(--wp--preset--font-family--serif);font-weight:600;font-size:1.12rem;color:var(--wp--preset--color--tinte);line-height:1.25}
.wein__info{grid-column:1;margin:2px 0 0;font-size:.88rem;line-height:1.45;color:#6B5D54}
.wein__preis{text-align:right;font-weight:600;color:var(--wp--preset--color--bordeaux);font-feature-settings:"lnum" 1,"tnum" 1;font-size:1rem;white-space:nowrap}
.wein:hover .wein__preis{color:var(--wp--preset--color--bordeaux-dunkel)}

/* Zum Mitnehmen: Jahrgang als Randzahl in Mediävalziffern, wie auf dem Zettel am Pfosten */
.jahr{flex:none;width:3.1em;font-family:var(--wp--preset--font-family--serif);font-size:1.05rem;color:var(--wp--preset--color--salbei);font-feature-settings:"onum" 1}
.gericht__name small{font-family:var(--wp--preset--font-family--sans);font-weight:500;font-size:.85rem;color:#6B5D54;margin-left:6px;white-space:nowrap}

/* Weinverkauf neben dem Text */
.verkauf{margin:28px 0 24px;padding-top:18px;border-top:3px double #D9CDBE;max-width:360px}
.verkauf .hoehe{margin-bottom:10px}
.verkauf__zeile{display:flex;justify-content:space-between;gap:14px;margin:0;padding:6px 0;font-size:1.02rem;color:#4A403A}
.verkauf__zeile + .verkauf__zeile{border-top:1px dotted #D9CDBB}
.verkauf__zeile b{font-weight:600;color:var(--wp--preset--color--tinte);white-space:nowrap}
.verkauf__klein{margin:10px 0 0;font-size:.9rem;line-height:1.55;color:var(--wp--preset--color--salbei)}

/* ---- Das angepinnte Blatt ---- */
.blatt{
  position:relative;background:#FFFDF8;
  padding:clamp(30px,3vw,42px) clamp(22px,2.6vw,36px) clamp(24px,2.6vw,34px);
  box-shadow:10px 12px 0 rgba(43,36,32,.10);
}
/* Die Reißzwecke sitzt rechts oben, links sind die Reiter */
.reisszwecke{
  position:absolute;top:-9px;right:30px;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#C4657A,#7D1532 62%,#5A0E24);
  box-shadow:0 2px 3px rgba(43,36,32,.35);
}
.blatt__titel{font-family:var(--wp--preset--font-family--serif);font-style:italic;font-weight:500;font-size:clamp(1.7rem,2.4vw,2.2rem);color:var(--wp--preset--color--bordeaux);margin:0;line-height:1.1}
.blatt__unter{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wp--preset--color--salbei);font-weight:600;margin:8px 0 0}
.blatt__strich{border:0;border-top:1px solid #E2D6C6;margin:18px 0 4px}

/* ---- Gerichte mit Punktführung ---- */
.gerichte{list-style:none;margin:0;padding:0}
.gericht{padding:9px 0}
.gericht + .gericht{border-top:1px solid #F0E8DC}
.gericht__zeile{display:flex;align-items:baseline;gap:10px}
.gericht__name{font-family:var(--wp--preset--font-family--serif);font-weight:600;font-size:1.18rem;color:var(--wp--preset--color--tinte);line-height:1.25}
.gericht__punkte{flex:1;min-width:22px;border-bottom:2px dotted #CDBDA9;transform:translateY(-.3em);transition:border-color .3s}
.gericht__preis{font-weight:600;color:var(--wp--preset--color--bordeaux);white-space:nowrap;font-feature-settings:"lnum" 1,"tnum" 1}
.gericht__info{margin:3px 0 0;font-size:.92rem;line-height:1.5;color:#6B5D54}
.gericht:hover .gericht__punkte{border-color:var(--wp--preset--color--bordeaux)}
/* Varianten eines Gerichts, eingerückt und kleiner */
.gericht__variante{display:flex;align-items:baseline;gap:10px;padding:5px 0 0 18px;font-size:.96rem;color:#4A403A}
.gericht__variante .gericht__preis{font-weight:500;font-size:.96rem}

/* ---- Mittagstisch: Tage untereinander, heute mit Kringel ---- */
.tage{list-style:none;margin:0;padding:0}
.tag{padding:12px 0}
.tag + .tag{border-top:1px solid #F0E8DC}
.tag__name{
  display:inline-block;position:relative;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--wp--preset--color--salbei);font-weight:600;margin:0 0 4px;
}
.tag__name svg{position:absolute;left:-10%;top:-45%;width:120%;height:190%;pointer-events:none;overflow:visible;display:none}
.tag--heute .tag__name{color:var(--wp--preset--color--bordeaux)}
.tag--heute .tag__name svg{display:block}
/* Der Kringel zeichnet sich, sobald der Mittagstisch sichtbar wird (auch nach Reiterwechsel) */
.tag--heute .tag__name svg path{stroke-dasharray:1;stroke-dashoffset:1;animation:kringeln 1.3s cubic-bezier(.3,.6,.4,1) .4s forwards}
@keyframes kringeln{to{stroke-dashoffset:0}}
.tag .gericht__name{font-size:1.08rem}
.tag--heute .gericht__punkte{border-color:var(--wp--preset--color--bordeaux)}

/* ============================================================
   SEKTION 6 · GESCHICHTE
   Eine Rebranke wächst beim Scrollen durch die Sektion, die
   Jahreszahlen hängen als Trauben daran, die Stationen wechseln
   die Seite. Kein Zeitstrahl mit Punkten und Linie.
   ============================================================ */
.geschichte{background:var(--wp--preset--color--pergament);padding:clamp(64px,9vw,120px) 0 clamp(72px,9vw,120px);overflow-x:hidden;overflow-x:clip}
.geschichte__innen{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.geschichte__kopf{max-width:60ch;margin:0 0 clamp(40px,5vw,64px)}
.geschichte h2{
  font-family:var(--wp--preset--font-family--serif);font-weight:600;
  font-size:clamp(2.4rem,4.4vw,3.7rem);line-height:.98;letter-spacing:-.005em;
  margin:0 0 22px;color:var(--wp--preset--color--tinte);
}
.geschichte h2 em{font-style:italic;font-weight:500;color:var(--wp--preset--color--bordeaux)}
.geschichte__kopf p{font-size:1.08rem;line-height:1.8;color:#4A403A;margin:0}

/* Der Stamm: ein gestrecktes SVG über die volle Höhe, Strichstärke bleibt dank
   non-scaling-stroke gleich. --wuchs (0 bis 1) setzt das Skript beim Scrollen. */
.ranke-wrap{position:relative;--wuchs:0}
.stamm{position:absolute;left:50%;top:0;width:60px;height:100%;transform:translateX(-50%);overflow:visible;pointer-events:none}
/* Kein non-scaling-stroke: damit würde Chrome das Strichmuster in Bildschirmpixeln
   rechnen und die Ranke bekäme Lücken. Der Stamm läuft fast senkrecht, die Strichstärke
   wird nur in der Breite skaliert und bleibt damit ohnehin stabil. */
.stamm path{
  fill:none;stroke:var(--wp--preset--color--holz);stroke-width:3.5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--wuchs));transition:stroke-dashoffset .25s linear;
}
.stamm .stamm__ader{stroke:#B98A5E;stroke-width:1.2;opacity:.8}

.ranke{list-style:none;margin:0;padding:0}
.eintrag{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr);
  column-gap:clamp(22px,4vw,56px);align-items:start;padding:clamp(26px,4vw,46px) 0;
}
.eintrag__mark{grid-column:2;grid-row:1;display:flex;justify-content:center;padding-top:4px}
.traube{width:56px;height:auto;overflow:visible;transform:scale(0);transform-origin:50% 0;transition:transform .7s cubic-bezier(.3,1.4,.5,1) .15s}
.eintrag.da .traube{transform:scale(1)}
.eintrag__text{grid-column:1;grid-row:1;text-align:right}
.eintrag:nth-child(even) .eintrag__text{grid-column:3;text-align:left}
/* Text und Albumfoto erscheinen erst, wenn der Stamm die Station erreicht hat.
   Das Skript setzt .da aus dem Wuchs heraus, nicht aus dem Sichtbarkeits-Beobachter. */
.js .eintrag__text{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1) .1s,transform .7s cubic-bezier(.2,.7,.3,1) .1s}
.js .eintrag.da .eintrag__text{opacity:1;transform:none}
.js .eintrag .foto__bild{clip-path:inset(100% 0 0 0)}
.js .eintrag.da .foto__bild{clip-path:inset(0)}
.eintrag__jahr{font-family:var(--wp--preset--font-family--serif);font-weight:600;font-size:clamp(2rem,3vw,2.7rem);color:var(--wp--preset--color--bordeaux);line-height:1;margin:0 0 6px}
.eintrag__jahr small{display:block;font-family:var(--wp--preset--font-family--sans);font-weight:600;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wp--preset--color--salbei);margin-top:6px}
.eintrag h3{font-family:var(--wp--preset--font-family--serif);font-style:italic;font-weight:500;font-size:1.5rem;color:var(--wp--preset--color--tinte);margin:8px 0 10px;line-height:1.2}
.eintrag__text p{font-size:1.04rem;line-height:1.75;color:#4A403A;margin:0}
/* Archivfoto gegenüber vom Text. Bild und Unterschrift untereinander, nicht nebeneinander
   wie bei den senkrechten Unterschriften in Sektion 3, sonst quetscht die Zeile das Bild weg. */
.eintrag__foto,.heute__foto{display:block}
.eintrag__foto .foto__rahmen,.heute__foto .foto__rahmen{display:block}
.eintrag__foto{grid-column:3;grid-row:1;max-width:300px;justify-self:start;padding-top:8px}
.eintrag:nth-child(even) .eintrag__foto{grid-column:1;justify-self:end}
.eintrag__foto .foto--quer .foto__bild{aspect-ratio:4/3}
.eintrag__foto figcaption{margin:12px 0 0;font-family:var(--wp--preset--font-family--serif);font-style:italic;font-size:1rem;color:var(--wp--preset--color--salbei);line-height:1.4}
.eintrag__foto figcaption b{display:block;font-family:var(--wp--preset--font-family--sans);font-style:normal;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-bottom:3px}

/* Heute: die Familie am Ende der Ranke */
.heute{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;
  margin-top:clamp(40px,5vw,64px);padding-top:clamp(36px,4vw,56px);border-top:3px double #D9CDBE;
}
.heute h3{font-family:var(--wp--preset--font-family--serif);font-weight:600;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.05;color:var(--wp--preset--color--tinte);margin:0 0 18px}
.heute h3 em{font-style:italic;font-weight:500;color:var(--wp--preset--color--bordeaux)}
.heute p{font-size:1.06rem;line-height:1.8;color:#4A403A;margin:0 0 14px}
.heute__foto{margin:0;max-width:440px;justify-self:end}
.heute__foto figcaption{margin:12px 0 0;font-family:var(--wp--preset--font-family--serif);font-style:italic;font-size:1rem;color:var(--wp--preset--color--salbei);line-height:1.45}
.heute__foto figcaption b{display:block;font-family:var(--wp--preset--font-family--sans);font-style:normal;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-bottom:3px}

/* ============================================================
   SEKTION 7 · ANFAHRT UND KONTAKT
   Google Maps als Zwei-Klick-Lösung: Platzhalter, die Karte lädt erst
   nach „Karte laden“. Bis dahin kein Drittanbieter, keine Cookies.
   ============================================================ */
.anfahrt{background:var(--wp--preset--color--pergament);padding:clamp(64px,9vw,120px) 0 clamp(72px,9vw,120px);overflow-x:hidden;overflow-x:clip}
.anfahrt__innen{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.anfahrt__oben{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,88px);align-items:start}
.anfahrt h2{
  font-family:var(--wp--preset--font-family--serif);font-weight:600;
  font-size:clamp(2.4rem,4.4vw,3.7rem);line-height:.98;letter-spacing:-.005em;
  margin:0 0 22px;color:var(--wp--preset--color--tinte);
}
.anfahrt h2 em{font-style:italic;font-weight:500;color:var(--wp--preset--color--bordeaux)}
.anfahrt__text p{font-size:1.08rem;line-height:1.8;color:#4A403A;margin:0 0 18px}

/* Anschrift wie auf einer Visitenkarte, mit Doppellinie oben */
.anschrift{margin:6px 0 0}
.anschrift__name{font-family:var(--wp--preset--font-family--serif);font-weight:600;font-size:1.45rem;color:var(--wp--preset--color--tinte);margin:0 0 4px;line-height:1.2}
.anschrift__zeile{margin:0;font-size:1.06rem;line-height:1.7;color:#4A403A}
.anschrift__zeile a{color:var(--wp--preset--color--bordeaux);text-decoration:none;font-weight:600;border-bottom:1px solid var(--wp--preset--color--altrosa);transition:border-color .25s}
.anschrift__zeile a:hover{border-color:var(--wp--preset--color--bordeaux)}
.anfahrt__knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* Google Maps erst nach Klick: bis dahin ein ruhiger Platzhalter mit Hinweis.
   So bleibt die Seite ohne Cookie-Banner, die Einwilligung ist der Klick. */
.landkarte-figur{margin:0}
.landkarte{position:relative;aspect-ratio:4/3;background:var(--wp--preset--color--creme);outline:1px solid var(--wp--preset--color--altrosa);outline-offset:10px;overflow:hidden}
.landkarte__hinweis{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(24px,4vw,48px)}
.landkarte__hinweis svg{width:42px;height:44px;flex:none;margin-bottom:14px}
.landkarte__titel{font-family:var(--wp--preset--font-family--serif);font-style:italic;font-weight:500;font-size:1.6rem;color:var(--wp--preset--color--bordeaux);margin:0 0 8px;line-height:1.2}
.landkarte__text{font-size:.95rem;line-height:1.6;color:#6B5D54;margin:0 0 22px;max-width:36ch}
.landkarte__text a{color:var(--wp--preset--color--bordeaux);text-decoration:none;border-bottom:1px solid var(--wp--preset--color--altrosa);font-weight:600}
.landkarte iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:none}
.landkarte--geladen iframe{display:block}
.landkarte--geladen .landkarte__hinweis{display:none}
.landkarte-figur figcaption{margin:14px 0 0;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--salbei);font-weight:600}

/* Wegbeschreibung als nummerierte Schritte mit großen Serifenziffern */
.wege{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);margin-top:clamp(52px,6vw,84px);padding-top:clamp(36px,4vw,52px);border-top:1px solid #E2D6C6}
.weg h3{font-family:var(--wp--preset--font-family--serif);font-style:italic;font-weight:500;font-size:1.6rem;color:var(--wp--preset--color--bordeaux);margin:0 0 18px;line-height:1.2}
.schritte{list-style:none;margin:0;padding:0;counter-reset:schritt}
/* Ziffer absolut gesetzt, kein Raster: sonst würde jedes fette Wort zur eigenen Rasterzelle */
.schritte li{counter-increment:schritt;position:relative;padding:10px 0 10px 58px;font-size:1.04rem;line-height:1.7;color:#4A403A}
.schritte li + li{border-top:1px solid #F0E8DC}
.schritte li::before{content:counter(schritt);position:absolute;left:0;top:9px;font-family:var(--wp--preset--font-family--serif);font-weight:600;font-size:2rem;line-height:1;color:var(--wp--preset--color--bordeaux);font-feature-settings:"onum" 1}
.schritte b{font-weight:600;color:var(--wp--preset--color--tinte)}
.weg__klein{margin:16px 0 0;font-size:.92rem;line-height:1.6;color:var(--wp--preset--color--salbei)}
.weg__klein a{color:var(--wp--preset--color--bordeaux);text-decoration:none;font-weight:600;border-bottom:1px solid var(--wp--preset--color--altrosa)}

/* ============================================================
   SEITENFUSS · dunkel, mit der Buchdeckel-Kante als Abschluss
   ============================================================ */
.fuss{background:var(--wp--preset--color--bordeaux-dunkel);color:#EBDDD4;padding:clamp(44px,5vw,64px) 0 0}
.fuss__innen{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
/* Oben: Logo links, Seitennavigation rechts, durch eine Linie vom Rest getrennt */
.fuss__kopf{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding-bottom:clamp(26px,3.5vw,36px);border-bottom:1px solid rgba(255,255,255,.16)}
.fuss__logo{display:block;border:0}
.fuss__logo img{width:116px;height:auto;display:block}
.fuss__navi{display:flex;flex-wrap:wrap;gap:8px 26px}
.fuss__navi a{border:0;font-variant:small-caps;letter-spacing:.07em;font-size:1rem;color:#EBDDD4}
.fuss__navi a:hover{color:#fff}
/* Mitte: drei gleich gebaute Spalten */
.fuss__spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px);padding:clamp(30px,4vw,44px) 0}
.fuss h4{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:#C9A0AB;font-weight:600;margin:0 0 12px}
.fuss p{margin:0;font-size:1rem;line-height:1.75;color:#EBDDD4}
.fuss p + p{margin-top:12px}
.fuss a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .25s}
.fuss a:hover{border-color:#fff}
/* Logo, Seitennavigation und Rechtliches ohne Unterstrich: die allgemeine
   Link-Regel darüber muss hier ausdrücklich übertrumpft werden */
.fuss .fuss__logo,.fuss .fuss__navi a,.fuss .fuss__recht a{border-bottom:0}
/* Unten: Copyright links, Rechtliches rechts */
.fuss__unten{display:flex;justify-content:space-between;align-items:center;gap:10px 28px;flex-wrap:wrap;padding:20px 0 24px;border-top:1px solid rgba(255,255,255,.16)}
.fuss__hinweis{font-size:.86rem;line-height:1.6;color:#C9A0AB;margin:0}
.fuss__recht{display:flex;gap:22px;flex-shrink:0}
.fuss__recht a{border:0;color:#EBDDD4;font-size:.92rem}
.fuss__recht a:hover{color:#fff}
.fuss__kante{height:5px;background:var(--wp--preset--color--bordeaux)}

/* ============================================================
   SEKTION 6b · IMPRESSIONEN
   Dieselben Karteireiter wie bei den Karten, darunter je Gruppe
   ein Bildlauf. Klick auf ein Foto öffnet die Großansicht.
   ============================================================ */
.galerie{background:var(--wp--preset--color--creme);padding:clamp(64px,9vw,120px) 0 clamp(48px,6vw,88px);overflow-x:hidden;overflow-x:clip}
.galerie__innen{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.galerie h2{
  font-family:var(--wp--preset--font-family--serif);font-weight:600;
  font-size:clamp(2.4rem,4.4vw,3.7rem);line-height:.98;letter-spacing:-.005em;
  margin:0 0 26px;color:var(--wp--preset--color--tinte);
}
.galerie h2 em{font-style:italic;font-weight:500;color:var(--wp--preset--color--bordeaux)}
.galerie__gruppe[hidden]{display:none}
.galerie .lauf{margin-top:clamp(26px,3.5vw,40px)}
/* Reiter ohne Blatt darunter: der aktive füllt sich in Bordeaux */
.register--frei{padding-left:0;flex-wrap:wrap;gap:8px}
.register--frei .reiter{margin-top:0;padding:10px 18px;box-shadow:none;background:transparent;border:1px solid #D6C6B4;color:#6B5D54;transition:background .25s,color .25s,border-color .25s}
.register--frei .reiter:hover{background:var(--wp--preset--color--pergament);color:var(--wp--preset--color--bordeaux)}
.register--frei .reiter[aria-selected="true"]{background:var(--wp--preset--color--bordeaux);color:var(--wp--preset--color--creme);border-color:var(--wp--preset--color--bordeaux);padding-top:10px}
.lauf__foto{cursor:zoom-in}
.lauf__foto:focus-visible{outline:2px solid var(--wp--preset--color--bordeaux);outline-offset:12px}

/* Hochformat-Archivfoto in der Geschichte */
.eintrag__foto.foto--hoch .foto__bild{aspect-ratio:4/5}

/* ---- Großansicht ---- */
.gross{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;margin:0;color:var(--wp--preset--color--creme)}
.gross::backdrop{background:rgba(43,36,32,.94)}
.gross[open]{display:flex;align-items:center;justify-content:center}
.gross__figur{margin:0;display:flex;flex-direction:column;align-items:center;max-width:min(92vw,1400px)}
.gross__figur img{max-width:88vw;max-height:76vh;width:auto;height:auto;display:block;outline:1px solid rgba(184,123,123,.6);outline-offset:10px}
.gross__text{margin:28px 0 0;font-family:var(--wp--preset--font-family--serif);font-style:italic;font-size:1.3rem;line-height:1.3;color:var(--wp--preset--color--creme);text-align:center;max-width:40ch}
.gross__zaehler{margin:6px 0 0;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#C9A0AB;font-weight:600}
.gross__knopf{position:absolute;background:none;border:0;cursor:pointer;color:var(--wp--preset--color--creme);padding:14px;line-height:0;transition:color .25s}
.gross__knopf svg{width:30px;height:auto;display:block}
.gross__knopf:hover{color:#E9B9C4}
.gross__knopf:focus-visible{outline:2px solid #E9B9C4;outline-offset:2px}
.gross__zu{top:18px;right:22px}
.gross__zurueck{left:14px;top:50%;transform:translateY(-50%)}
.gross__weiter{right:14px;top:50%;transform:translateY(-50%)}
body.gross-offen{overflow:hidden}

/* ============================================================
   Einfliegen beim Scrollen
   ============================================================ */
.rein{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.rein.da{opacity:1;transform:none}

/* ============================================================
   Aufklapp-Umschalter und Menü für Tablet und Handy
   ============================================================ */
.klappe{
  display:none;align-items:center;gap:10px;
  background:none;border:0;padding:8px 0 8px 8px;cursor:pointer;
  color:var(--wp--preset--color--tinte);font:inherit;font-weight:600;font-size:.9rem;
  font-variant:small-caps;letter-spacing:.08em;
}
.klappe svg{width:36px;height:auto;display:block}
.klappe:hover{color:var(--wp--preset--color--bordeaux)}

.menue{
  position:fixed;inset:0;z-index:60;background:var(--wp--preset--color--creme);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:clamp(18px,4vw,34px) clamp(20px,6vw,64px) clamp(28px,6vw,52px);
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .34s ease,transform .34s ease,visibility 0s .34s;
}
.menue.auf{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .34s ease,transform .34s ease,visibility 0s;
}
.menue__kopf{display:flex;align-items:center;justify-content:space-between;gap:20px}
.menue__zu{
  background:none;border:0;padding:8px;cursor:pointer;color:var(--wp--preset--color--tinte);
  line-height:0;
}
.menue__zu svg{width:30px;height:auto;display:block}
.menue__zu:hover{color:var(--wp--preset--color--bordeaux)}

.menue__liste{
  list-style:none;margin:clamp(24px,5vw,44px) 0 0;padding:0;
  flex:1;display:flex;flex-direction:column;justify-content:center;
}
.menue__punkt{
  opacity:0;transform:translateY(16px);
  transition:opacity .45s cubic-bezier(.2,.7,.3,1),transform .45s cubic-bezier(.2,.7,.3,1);
}
.menue.auf .menue__punkt{opacity:1;transform:none}
.menue.auf .menue__punkt:nth-child(1){transition-delay:.10s}
.menue.auf .menue__punkt:nth-child(2){transition-delay:.16s}
.menue.auf .menue__punkt:nth-child(3){transition-delay:.22s}
.menue.auf .menue__punkt:nth-child(4){transition-delay:.28s}
.menue.auf .menue__punkt:nth-child(5){transition-delay:.34s}
.menue.auf .menue__punkt:nth-child(6){transition-delay:.40s}
.menue__punkt a{
  display:block;text-decoration:none;color:var(--wp--preset--color--tinte);
  font-family:var(--wp--preset--font-family--serif);font-weight:600;
  font-size:clamp(1.9rem,7.5vw,2.9rem);line-height:1.15;
  padding:clamp(10px,2vw,16px) 0;border-bottom:1px solid #E4D8C9;
  transition:color .25s,padding-left .3s cubic-bezier(.2,.7,.3,1);
}
.menue__punkt a:hover,.menue__punkt a:focus-visible{color:var(--wp--preset--color--bordeaux);padding-left:12px}

.menue__fuss{
  margin-top:clamp(26px,5vw,44px);
  opacity:0;transform:translateY(16px);
  transition:opacity .45s ease .40s,transform .45s ease .40s;
}
.menue.auf .menue__fuss{opacity:1;transform:none}
.menue__fuss .knopf{display:block;text-align:center}
.menue__anschrift{
  margin:18px 0 0;font-size:.92rem;line-height:1.7;color:var(--wp--preset--color--salbei);
}
body.menue-offen{overflow:hidden}

/* ============================================================
   Handy und Tablet
   ============================================================ */
/* ---- Enges Fenster, in dem die Navigation gerade noch nebeneinander passt ---- */
@media(min-width:1181px) and (max-width:1330px){
  .besen{width:76px;top:-12px}
  .aushang{padding-right:88px}
  .navi{gap:clamp(13px,1.5vw,20px)}
}

/* ---- Kleine Notebooks und Tablets quer: Menü wandert hinter den Umschalter ---- */
@media(max-width:1180px){
  .navi{display:none}
  .klappe{display:flex}
  .aushang{margin-left:auto;padding-right:92px}
  .besen{width:82px;top:-14px}
  .anschlag{max-width:580px;margin-left:clamp(20px,5vw,56px)}
  .hero{min-height:min(74vh,640px)}
}

/* ---- Tablets hoch und große Handys: der Hero stapelt sich ---- */
@media(max-width:900px){
  /* Die Luft unter dem Anschlag muss als Innenabstand am Hero sitzen.
     Als Außenabstand am Anschlag würde sie durch die Hero-Unterkante
     hindurchfallen (Margin Collapsing), der Hero bliebe gleich hoch und
     der Versatzschatten landete als grauer Riegel auf dem Seitenhintergrund. */
  .hero{
    min-height:0;padding:0 0 clamp(32px,6vw,56px);display:block;
    background-position:center 58%;
  }
  .hero::before{content:"";display:block;height:clamp(215px,34vh,330px)}
  .anschlag{
    margin:-58px clamp(16px,4vw,40px) 0;max-width:none;width:auto;
    padding:clamp(28px,4.4vw,46px) clamp(24px,4vw,42px);
    transform:none;box-shadow:10px 10px 0 rgba(43,36,32,.13);
  }
  .hero h1{font-size:clamp(2.5rem,7.4vw,3.6rem)}
  .bildzeile{display:none}

  /* Anfahrt: Adresse oben, Karte in voller Breite darunter */
  .anfahrt__oben{grid-template-columns:1fr;gap:40px}

  /* Öffnungszeiten: Text oben, Wand darunter */
  .zeiten__innen{grid-template-columns:1fr;gap:44px}
  .zeiten__text p{max-width:none}
  .zeiten__hinweis{max-width:none}
  .wand{max-width:480px;width:100%;margin:0 auto;padding:0}
  .zettel{
    position:relative;left:auto;bottom:auto;margin:-8px 0 0 10px;
    transform:rotate(-2.2deg) translateY(16px);
  }
  .zettel.da{transform:rotate(-2.2deg)}

  /* Der Besen: alles untereinander, Bildunterschriften wieder waagerecht */
  .satz{grid-template-columns:1fr;gap:36px}
  .satz > *{grid-column:auto}
  .satz + .satz{margin-top:48px}
  .foto{flex-direction:column;gap:12px}
  .foto__text{writing-mode:horizontal-tb;transform:none;align-self:flex-start;white-space:normal}
  .foto--hoch .foto__bild{aspect-ratio:4/3}
  .foto--hoch{max-width:560px}
  .lauftext{display:block}
  .marginalie{text-align:left;padding-top:0;margin:26px 0 6px;font-size:1.35rem}
  .marginalie:first-child{margin-top:0}
  .marginalie small{display:inline;margin:0 0 0 10px}
  .lauftext p + .marginalie{margin-top:26px}
  .zitat{padding:8px 0}
  /* Speisekarte: Text oben, Karteikarte darunter, gerade */
  .karte__kopf{grid-template-columns:1fr;gap:40px}
  .karte__text{position:static}
  .karte__text p{max-width:none}
  .karteikarte,.weine .karteikarte{transform:none;max-width:600px}
  .karte__kopf--gespiegelt .karte__text{order:-1} /* Text wieder oben, wie bei der Speisekarte */
  .blatt{box-shadow:8px 9px 0 rgba(43,36,32,.10)}

  /* Bildlauf: kein Selbstlauf, stattdessen wischen mit Einrasten */
  .lauf__titel{margin-top:48px}
  .lauf{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;--h:clamp(240px,58vw,320px)}
  .lauf::-webkit-scrollbar{display:none}
  .lauf__band--endlos{animation:none}
  .lauf__foto{scroll-snap-align:start;scroll-margin-left:20px}
  .lauf__foto:first-child{margin-left:20px}

  /* Impressionen und Großansicht */
  .galerie{padding:56px 0 40px}
  .galerie h2{font-size:clamp(2.1rem,8.6vw,2.8rem)}
  .register--frei{gap:6px}
  .register--frei .reiter{padding:9px 13px}
  .gross__figur img{max-width:94vw;max-height:66vh}
  .gross__text{font-size:1.1rem;margin-top:20px;padding:0 60px}
  .gross__knopf svg{width:24px}
  .gross__zurueck{left:4px}
  .gross__weiter{right:4px}
}

/* ---- Handy ---- */
@media(max-width:760px){
  body{font-size:17px}
  .kopf__innen{flex-wrap:wrap;gap:8px 14px;padding:12px 18px}
  /* an die Kopfleiste gebunden, sonst dreht es auch das Menü-Overlay um */
  .kopf__innen .marke{order:1}
  .kopf__innen .klappe{order:2;margin-left:auto}
  .marke img{width:46px}
  .marke__zeile1{font-size:1.15rem}
  .klappe span{display:none}
  .aushang{
    order:3;width:100%;margin-left:0;padding:9px 66px 1px 0;
    border-top:1px solid #E7DCCF;
  }
  .aushang__text{text-align:left}
  .aushang__zustand{font-size:1.1rem}
  .aushang__detail{font-size:.78rem}
  .besen{width:58px;top:-2px}
  /* Der leere Nagel ist bei dieser Größe nicht mehr lesbar, der Text sagt es ohnehin */
  body:not(.besen-offen) .besen{display:none}
  body:not(.besen-offen) .aushang{padding-right:0}
  /* Zusammengeschoben bleibt nur Logo und Umschalter stehen */
  .kopf--klein .aushang{display:none}
  .kopf--klein .marke img{width:38px}

  .anschlag{margin-top:-46px;border-left-width:4px}
  .hero h1{font-size:clamp(2.2rem,9.2vw,3rem)}
  .hoehe{font-size:.65rem;letter-spacing:.2em;margin-bottom:16px}
  .doppelstrich{margin-bottom:22px}
  .hero .vorspann{font-size:1.05rem;margin-bottom:28px}
  .handlung{flex-direction:column;align-items:stretch;gap:10px}
  .knopf{text-align:center;padding:16px 24px}
  .rufnummer{font-size:.92rem;margin-top:18px}

  .karte{padding:56px 0 64px}
  .karte h2{font-size:clamp(2.1rem,8.6vw,2.8rem);max-width:none}
  .blatt{padding:26px 18px 22px}
  .gericht__name{font-size:1.06rem}
  .gericht__info{font-size:.88rem}
  .gericht__variante{padding-left:12px;font-size:.92rem}
  .register{padding-left:10px}
  .reiter{padding:9px 14px 8px;font-size:.68rem;letter-spacing:.14em}
  .reiter[aria-selected="true"]{padding-top:14px}
  /* Weine: Name in voller Breite, die Preise darunter mit eigenem Maß */
  .wein,.wein--zwei{grid-template-columns:repeat(3,1fr);row-gap:4px}
  .wein--zwei{grid-template-columns:repeat(2,1fr)}
  .wein__name,.wein__info{grid-column:1 / -1}
  .wein__info{margin-top:-2px}
  .wein__preis{text-align:left}
  .wein__preis::before{content:attr(data-mass);display:block;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--wp--preset--color--salbei);font-weight:600}
  .wein--kopf{display:none}
  .jahr{width:2.8em;font-size:.98rem}

  /* Geschichte: Ranke links, alles rechts davon */
  .geschichte{padding:56px 0 64px}
  .geschichte h2{font-size:clamp(2.1rem,8.6vw,2.8rem)}
  .stamm{left:22px;transform:none;width:44px}
  .eintrag{grid-template-columns:44px minmax(0,1fr);column-gap:18px;padding:22px 0}
  .eintrag__mark{grid-column:1;grid-row:1;padding-top:2px}
  .traube{width:44px}
  .eintrag__text,.eintrag:nth-child(even) .eintrag__text{grid-column:2;grid-row:1;text-align:left}
  .eintrag__foto,.eintrag:nth-child(even) .eintrag__foto{grid-column:2;grid-row:2;justify-self:start;max-width:320px;padding-top:16px}
  .eintrag__jahr{font-size:1.9rem}
  .eintrag h3{font-size:1.3rem}
  .heute{grid-template-columns:1fr;gap:28px}
  .heute__foto{justify-self:start;max-width:none}

  /* Anfahrt und Fuß */
  .anfahrt{padding:56px 0 64px}
  .anfahrt h2{font-size:clamp(2.1rem,8.6vw,2.8rem)}
  .anfahrt__oben{grid-template-columns:1fr;gap:40px}
  .anfahrt__knoepfe .knopf{display:block;text-align:center}
  /* Quadratisch, damit Icon, Text und Knopf des Platzhalters sicher hineinpassen */
  .landkarte{aspect-ratio:1/1}
  .landkarte__text{font-size:.9rem;margin-bottom:18px}
  .landkarte__titel{font-size:1.4rem}
  .schritte li{padding-left:50px}
  .schritte li::before{font-size:1.75rem}
  .wege{grid-template-columns:1fr;gap:36px;margin-top:44px}
  /* Fuß: alles untereinander, aber kompakt */
  .fuss__kopf{flex-direction:column;align-items:flex-start;gap:20px}
  .fuss__navi{gap:6px 20px}
  .fuss__spalten{grid-template-columns:1fr;gap:24px;padding:28px 0}
  .fuss__unten{flex-direction:column;align-items:flex-start}

  .laube{padding:56px 0 64px}
  .laube h2{font-size:clamp(2.1rem,8.6vw,2.8rem);margin-bottom:30px}
  .initiale::first-letter{font-size:3.6em}
  .zitat p{font-size:clamp(1.4rem,6.2vw,1.9rem)}

  .zeiten{padding:56px 0 64px}
  .zeiten h2{font-size:clamp(2.1rem,8.6vw,2.8rem)}
  .zeiten__hinweis{font-size:1.2rem}
  .schild{padding:26px 20px 26px}
  .schild__datum span{font-size:clamp(1.8rem,8vw,2.3rem)}
  .zettel{width:min(88%,320px)}
}

/* ---- Sehr schmale Geräte ---- */
@media(max-width:400px){
  .anschlag{margin-left:10px;margin-right:10px;padding:24px 18px 28px;box-shadow:8px 8px 0 rgba(43,36,32,.13)}
  .marke__zeile2{display:none}
  .aushang{padding-right:56px}
  .besen{width:50px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rein{opacity:1;transform:none}
  .haenger{opacity:1;transform:rotate(1.2deg)}
  .zettel{opacity:1;transform:rotate(-2.6deg)}
  .foto__bild{clip-path:none}
  .lauf{overflow-x:auto}
  /* gleiche Spezifität wie die Kringel-Regel, sonst gewinnt dort stroke-dashoffset:1 */
  .tag--heute .tag__name svg path{stroke-dashoffset:0}
  .ranke-wrap{--wuchs:1}
  .traube{transform:none}
  .js .eintrag__text{opacity:1;transform:none}
  .js .eintrag .foto__bild{clip-path:none}
  html{scroll-behavior:auto}
}