/* =========================================================================
   Metzgerei Humsberger · Michelfeld
   Markenwelt: tiefes Weinrot + warmes Creme, Fraktur-Logo, Pinsel-Script.
   Rein statisch & self-contained. Keine Dritt-Assets zur Laufzeit.
   ========================================================================= */

/* ---------- Selbst-gehostete Fonts (OFL, DSGVO-konform) ---------- */
@font-face{font-family:"Caveat";src:url("../fonts/caveat-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("../fonts/caveat-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Bitter";src:url("../fonts/bitter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Bitter";src:url("../fonts/bitter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Design-Tokens ---------- */
:root{
  --wine:#6d1622;         /* Marken-Weinrot */
  --wine-2:#872435;       /* helleres Panel */
  --wine-deep:#4c0e17;    /* tiefstes Rot / Footer */
  --wine-ink:#3f0d15;

  --cream:#ece0c6;        /* warmes Creme (Logo) */
  --cream-2:#e2d2b0;
  --paper:#f5edda;        /* helles Papier */
  --paper-2:#efe4cd;

  --ink:#3a2416;          /* Text auf hell */
  --ink-soft:#5c4634;
  --muted:#6e5a46;        /* abgedunkelt für WCAG-AA-Kontrast auf Creme/Papier */

  --line:rgba(58,36,22,.16);
  --line-wine:rgba(236,224,198,.22);

  --script:"Caveat","Segoe Script","Bradley Hand",cursive;
  --display:"Bitter",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Satzspiegel: bis ~1400px Fensterbreite wie gehabt 1180px, darueber waechst
     er mit (84vw) und stoppt bei 1560px. Grund: auf den heutigen Notebook-
     Aufloesungen (1512, 1710, 2056 CSS-Pixel bei "Mehr Flaeche") stand der
     Inhalt sonst als schmales Band mitten im Bild. Die Lesbarkeit haengt
     nicht an dieser Zahl: Fliesstext ist einzeln auf 44-56ch begrenzt, die
     breitere Spur nutzen nur Raster, Bilder und Ueberschriften. */
  --wrap:clamp(1180px,84vw,1560px);
  --head-h:76px;
  --r:5px;

  --grain:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
  --logo-ar:3.066;
  --pig-ar:0.976;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  line-height:1.62;font-size:clamp(16px,.97rem + .12vw,17.5px);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--wine);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,44px)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
section[id]{scroll-margin-top:calc(var(--head-h) + 6px)}

.skip{position:fixed;left:14px;top:-60px;z-index:1200;background:var(--wine);color:var(--cream);
  padding:10px 16px;border-radius:0 0 var(--r) var(--r);transition:top .2s}
.skip:focus{top:0}

/* ---------- Wiederkehrende Marken-Bausteine ---------- */
.kicker{font-family:var(--script);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.15rem);
  line-height:.9;color:var(--wine);display:inline-block;transform:rotate(-2.5deg);margin:0 0 6px}
.kicker--cream{color:var(--cream);text-shadow:0 1px 3px rgba(0,0,0,.5)}

.sec-head{max-width:680px;margin:0 auto clamp(40px,5vw,62px);text-align:center}
.sec-head h2{font-size:clamp(2rem,4.6vw,3.2rem)}
.sec-head__lead{margin-top:16px;color:var(--muted);font-size:1.06rem}

h2{font-size:clamp(1.9rem,4vw,2.9rem)}

/* Doppelrahmen (wie Angebots-Flyer) */
.frame{position:relative;background:var(--paper);padding:9px}
.frame::after{content:"";position:absolute;inset:0;border:2px solid var(--wine);pointer-events:none;z-index:3}
.frame::before{content:"";position:absolute;inset:5px;border:1px solid var(--wine);pointer-events:none;z-index:3}
.frame--wine{background:var(--wine)}
.frame--wine::after,.frame--wine::before{border-color:var(--cream)}
.rot-l{transform:rotate(-2deg)}
.rot-r{transform:rotate(1.6deg)}

/* Zacken-Badge (Sonnen-/Stern-Sticker) */
.burst{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;width:var(--bs,120px);height:var(--bs,120px);transform:rotate(-9deg)}
.burst::before{content:"";position:absolute;inset:0;background:var(--cream);
  -webkit-mask:var(--burst-mask) center/contain no-repeat;mask:var(--burst-mask) center/contain no-repeat}
.burst--wine::before{background:var(--wine)}
.burst > *{position:relative;z-index:1}
.burst b{display:block;font-family:var(--script);font-weight:700;font-size:1.75rem;line-height:.85;color:var(--wine)}
.burst small{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:var(--wine);margin-top:2px}
.burst--wine b,.burst--wine small{color:var(--cream)}

/* Herz (handgezeichnet) */
.heart{width:64px;height:auto;color:var(--cream);fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}

/* Punkt-Trenner */
.rule-dot{display:flex;align-items:center;justify-content:center;gap:14px;margin:0;color:var(--wine)}
.rule-dot::before,.rule-dot::after{content:"";height:2px;width:min(120px,18vw);
  background:radial-gradient(circle,currentColor 1.2px,transparent 1.4px) 0/10px 2px repeat-x;opacity:.55}
.rule-dot .pig{width:34px;height:34px;background:currentColor;
  -webkit-mask:url("/assets/pig.svg") center/contain no-repeat;mask:url("/assets/pig.svg") center/contain no-repeat}

/* Logo als Datei-Maske (logo.svg = echte Fraktur-Pfade, kein Font/kein base64),
   umfärbbar über die Hintergrundfarbe */
.brand__logo{display:block;width:clamp(150px,20vw,196px);aspect-ratio:2775/1004;background:var(--wine);
  -webkit-mask:url("/assets/logo.svg") left center/contain no-repeat;mask:url("/assets/logo.svg") left center/contain no-repeat}
.brand__logo--cream{background:var(--cream)}
/* Variante mit Untertitel "Inhaber Christian Trenz" — anderes Seitenverhältnis!
   ZWEI Maskenebenen: oben logo-inhaber.svg, darunter das schlichte logo.svg
   in derselben Breite und am selben oberen Rand (beide Dateien haben die
   viewBox-Breite 2775 und denselben Ursprung, die Inhaber-Fassung ist nur
   unten um die Zeile länger). Die Ebenen werden addiert – das ist die
   Voreinstellung von mask-composite –, und weil die Inhaber-Fassung das
   schlichte Logo bereits Pfad für Pfad enthält, sieht man im Normalfall
   keinen Unterschied.
   Der Sinn ist der Ausfall: eine Maske, deren Bild nicht lädt, gilt als
   durchsichtig, und das Element verschwindet dann restlos – bei mask-image
   gibt es kein alt und keinen Platzhalter. Mit der zweiten Ebene bleibt im
   Fuß der Seite wenigstens der Schriftzug stehen, wenn logo-inhaber.svg
   einmal nicht mit ausgeliefert wird. */
.brand__logo--inhaber{aspect-ratio:2775/1047;
  -webkit-mask-image:url("/assets/logo-inhaber.svg"),url("/assets/logo.svg");
  mask-image:url("/assets/logo-inhaber.svg"),url("/assets/logo.svg");
  -webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat;
  -webkit-mask-position:left center,left top;mask-position:left center,left top;
  -webkit-mask-size:contain,100% auto;mask-size:contain,100% auto}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--sans);font-weight:700;font-size:.84rem;letter-spacing:.05em;text-transform:uppercase;
  padding:15px 28px;border-radius:var(--r);border:2px solid transparent;line-height:1;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),background .22s,color .22s,border-color .22s,box-shadow .22s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--wine{background:var(--wine);color:var(--cream);box-shadow:0 12px 24px -14px rgba(76,14,23,.9)}
.btn--wine:hover{background:var(--wine-2);box-shadow:0 18px 30px -14px rgba(76,14,23,.9)}
.btn--cream{background:var(--cream);color:var(--wine);box-shadow:0 12px 24px -14px rgba(0,0,0,.5)}
.btn--cream:hover{background:#f6ecd6}
.btn--outline{background:transparent;border-color:rgba(236,224,198,.6);color:var(--cream)}
.btn--outline:hover{border-color:var(--cream);background:rgba(236,224,198,.1)}
.btn .ico{width:1.05em;height:1.05em;fill:currentColor}

/* ---------- Header ---------- */
.site-head{position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--head-h);
  background:rgba(245,237,218,.98);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border-bottom:2px solid transparent;transition:background .3s,border-color .3s,box-shadow .3s}
/* Die abgesetzte Kopfleiste: voller Papiergrund, weinrote Kante, Schatten.
   Zwei Wege führen hierher.

   is-stuck   setzt main.js, sobald gescrollt wird. Auf der Startseite ist
              das genau richtig: dort liegt die Leiste zuerst über dem
              grossen Hero-Foto und hebt sich von selbst ab.

   --fest     setzen die Unterseiten von Hand. Sie haben kein Hero-Foto,
              sondern beginnen mit hellem Papier – ohne Kante schwebt die
              Leiste dort unsichtbar über dem Text, und die rote Linie
              erschiene erst beim Scrollen aus dem Nichts. */
.site-head.is-stuck,.site-head--fest{background:var(--paper);border-bottom-color:var(--wine);
  box-shadow:0 10px 30px -20px rgba(76,14,23,.6)}
.head-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
/* Logo sitzt auf einer cremefarbenen 3D-Lasche, die unter der Headerkante
   in die Seite hinabragt */
.brand{position:relative;align-self:stretch;display:inline-flex;align-items:center;padding:0 6px;z-index:1}
.brand::before{content:"";position:absolute;z-index:-1;top:0;left:-14px;right:-14px;bottom:-26px;
  background:linear-gradient(180deg,#f8f1e0 0%,#ece0c6 56%,#e0d0ac 100%);
  border-radius:0 0 16px 16px;
  box-shadow:0 20px 28px -12px rgba(58,20,20,.5),
             inset 0 2px 0 rgba(255,255,255,.6),
             inset 0 -6px 0 rgba(109,22,34,.16);}
.site-head .brand__logo{transform:translateY(9px)}
.brand:hover .brand__logo{opacity:.82;transform:translateY(9px)}
.nav{display:flex;gap:clamp(14px,2vw,30px);align-items:center}
.nav a{font-family:var(--sans);font-size:.86rem;font-weight:700;letter-spacing:.03em;color:var(--wine-ink);
  position:relative;padding:6px 2px;white-space:nowrap;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--wine);
  transition:right .3s cubic-bezier(.2,.7,.2,1)}
/* Zwei Wege zur Markierung, und sie beantworten verschiedene Fragen:
   .is-active setzt main.js beim Scrollen ("welcher ABSCHNITT ist gerade zu
   sehen"), aria-current steht serverseitig im Markup ("auf welcher SEITE
   sind wir"). Letzteres ist nicht nur Anstrich: ein Screenreader sagt damit
   "Sie sind hier", eine blosse Klasse waere fuer ihn stumm. */
.nav a:hover,.nav a.is-active,.nav a[aria-current]{color:var(--wine)}
.nav a:hover::after,.nav a.is-active::after,.nav a[aria-current]::after{right:0}
.head-cta{display:flex;align-items:center;gap:14px}
.btn--phone{background:var(--wine);color:var(--cream);padding:11px 17px;font-size:.8rem;border-radius:var(--r)}
.btn--phone:hover{background:var(--wine-2);transform:translateY(-2px)}

.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:.8rem;font-weight:700;
  letter-spacing:.01em;color:var(--ink-soft);background:none;border:0;padding:0;white-space:nowrap}
.status__dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.status.is-open{color:#26582b}.status.is-open .status__dot{background:#4c9142;animation:pulse 2.4s infinite}
.status.is-closed{color:#9a3327}.status.is-closed .status__dot{background:#c0402f}
/* Mittagspause ist kein Geschlossen: warmes Bernstein statt Alarmrot, und der
   Punkt atmet langsam weiter – das Geschäft macht ja gleich wieder auf. */
.status.is-pause{color:#8a5a00}
.status.is-pause .status__dot{background:#d19a2e;animation:pulse 4s infinite}
.status--stack{gap:9px;white-space:normal}
.status__txt{display:flex;flex-direction:column;line-height:1.08;text-align:left}
.status__txt b{font-size:.8rem;font-weight:800;letter-spacing:.02em}
.status__txt small{font-size:.68rem;font-weight:600;color:var(--muted);letter-spacing:.01em;white-space:nowrap}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(76,145,66,.5)}70%{box-shadow:0 0 0 7px rgba(76,145,66,0)}100%{box-shadow:0 0 0 0 rgba(76,145,66,0)}}

.burger{display:none;width:44px;height:44px;background:transparent;border:0;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2.5px;background:var(--wine);border-radius:2px;transition:transform .3s,opacity .2s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mnav{position:fixed;inset:var(--head-h) 0 auto 0;z-index:999;background:var(--wine);
  border-bottom:3px solid var(--wine-deep);transform:translateY(-12px);opacity:0;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .3s;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.mnav.is-open{transform:none;opacity:1}
.mnav nav{display:flex;flex-direction:column;padding:14px clamp(20px,5vw,44px) 26px}
.mnav a{color:var(--cream);font-family:var(--display);font-weight:700;font-size:1.25rem;padding:14px 0;border-bottom:1px solid var(--line-wine)}
.mnav a:last-child{border-bottom:0}
/* Im Mobilmenue gibt es keine Unterstreichung zum Einschieben – dort traegt
   die Markierung ein Strich am linken Rand und die hellere Schrift. */
.mnav a[aria-current]{color:#f3d9a0;padding-left:14px;border-left:3px solid #f3d9a0}
.mnav__call{color:#f3d9a0!important;font-family:var(--script)!important;font-size:1.7rem!important}
body.nav-open{overflow:hidden}

/* ========================================================================
   HERO
   ======================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--head-h) + 46px);padding-bottom:clamp(56px,9vh,104px);
  color:var(--cream);background:var(--wine);overflow:hidden;isolation:isolate}
.hero__media{position:absolute;left:0;right:0;top:0;height:126%;z-index:-3;will-change:transform}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero__media img.is-missing{display:none}
.hero__ph{position:absolute;inset:0;z-index:-4;
  background:radial-gradient(120% 100% at 80% 0%,#8a2334 0%,transparent 55%),
             radial-gradient(90% 90% at 10% 100%,#520f1a 0%,transparent 60%),var(--wine)}
.hero__scrim{position:absolute;inset:0;z-index:-2;
  background:linear-gradient(90deg,rgba(45,8,13,.9),rgba(45,8,13,.66) 42%,rgba(45,8,13,.44) 68%,rgba(45,8,13,.3) 100%),
             linear-gradient(0deg,rgba(45,8,13,.74),rgba(45,8,13,.22) 45%,transparent 72%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;background:var(--grain);background-size:160px;opacity:.06;mix-blend-mode:overlay}
.hero__pig{position:absolute;right:-4%;bottom:-8%;z-index:-1;width:clamp(280px,42vw,620px);aspect-ratio:var(--pig-ar);
  background:var(--cream);opacity:.05;-webkit-mask:url("/assets/pig.svg") center/contain no-repeat;mask:url("/assets/pig.svg") center/contain no-repeat}

/* Der Hero laeuft auf derselben Spur wie Kopfzeile und Abschnitte: das Element
   traegt beide Klassen (wrap hero__inner), ein eigenes max-width hier wuerde
   das von .wrap ueberschreiben und den Text gegenueber Logo und Navigation
   einruecken. Die Zeilenlaenge begrenzt stattdessen .hero__lead. */
.hero__inner{position:relative}
.hero__title{font-size:clamp(2.8rem,7.6vw,5.6rem);line-height:1;letter-spacing:-.01em;
  text-shadow:0 2px 4px rgba(0,0,0,.55),0 3px 26px rgba(0,0,0,.4)}
.hero__title .script{font-family:var(--script);font-weight:700;color:#f3d9a0;
  font-size:1.12em;display:inline-block;transform:rotate(-2deg);line-height:.8}
.hero__lead{margin-top:26px;max-width:610px;font-size:clamp(1.06rem,1.6vw,1.28rem);color:rgba(238,228,206,.97);text-shadow:0 1px 3px rgba(0,0,0,.62)}
.hero__actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}

.hero__chips{margin:clamp(36px,5vw,52px) 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.hero__chips li{display:flex;align-items:center;gap:9px;font-size:.82rem;font-weight:700;letter-spacing:.02em;
  color:var(--cream);padding:9px 16px;border:1.5px solid var(--line-wine);border-radius:100px;background:rgba(236,224,198,.06)}
.hero__chips b{font-family:var(--script);font-weight:700;font-size:1.35rem;color:#f3d9a0;line-height:.8}

.hero__scroll{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:1;
  width:26px;height:42px;border:2px solid rgba(236,224,198,.5);border-radius:14px}
.hero__scroll span{position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:2px;background:#f3d9a0;transform:translateX(-50%);animation:bob 1.7s infinite}
@keyframes bob{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,14px)}}

/* ========================================================================
   VALUES
   ======================================================================== */
.values{background:var(--cream);padding:clamp(56px,7vw,86px) 0;border-bottom:2px solid var(--wine)}
.values__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.value{padding:16px clamp(20px,2.2vw,30px);text-align:center}
.value + .value{border-left:1px dashed rgba(109,22,34,.35)}
.value__ico{width:52px;height:52px;margin:0 auto 16px;color:var(--wine)}
.value__ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Fliessend, damit die laengste Ueberschrift ("Respekt & Verantwortung") auch
   in der schmalsten Vierer-Spalte einzeilig bleibt. Bricht eine von vier um,
   starten die Absaetze auf verschiedenen Hoehen und die Reihe wirkt schief. */
.value h3{font-size:clamp(1.06rem,1.1vw,1.24rem);margin-bottom:8px;color:var(--wine)}
.value p{color:var(--ink-soft);font-size:.95rem}

/* ========================================================================
   COMING SOON  ("Hier entsteht unsere neue Website")
   ======================================================================== */
.soon{position:relative;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(64px,9vh,110px) clamp(20px,5vw,44px) 96px;
  color:var(--cream);background:var(--wine);overflow:hidden;isolation:isolate}
.soon__media{position:absolute;inset:0;z-index:-3}
.soon__media img{width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.42}
.soon__media img.is-missing{display:none}
.soon__ph{position:absolute;inset:0;z-index:-4;
  background:radial-gradient(120% 100% at 80% 0%,#8a2334 0%,transparent 55%),
             radial-gradient(90% 90% at 10% 100%,#520f1a 0%,transparent 60%),var(--wine)}
.soon__scrim{position:absolute;inset:0;z-index:-2;
  background:linear-gradient(0deg,rgba(45,8,13,.88),rgba(45,8,13,.58) 55%,rgba(45,8,13,.72))}
.soon::after{content:"";position:absolute;inset:0;z-index:-2;background:var(--grain);background-size:160px;opacity:.06;mix-blend-mode:overlay}
.soon__pig{position:absolute;right:-6%;bottom:-10%;z-index:-1;width:clamp(250px,40vw,540px);aspect-ratio:var(--pig-ar);
  background:var(--cream);opacity:.05;-webkit-mask:url("/assets/pig.svg") center/contain no-repeat;mask:url("/assets/pig.svg") center/contain no-repeat}

.soon__card{position:relative;width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center}
.soon__logo{width:clamp(220px,42vw,320px);margin-bottom:clamp(16px,3vw,26px)}
.soon__kicker{font-family:var(--script);font-weight:700;font-size:clamp(1.6rem,4vw,2.3rem);
  line-height:.9;color:#f3d9a0;transform:rotate(-2.5deg);text-shadow:0 1px 3px rgba(0,0,0,.55);margin:0 0 6px}
.soon__title{font-size:clamp(2.3rem,6.4vw,4rem);line-height:1.02;
  text-shadow:0 2px 4px rgba(0,0,0,.55),0 3px 26px rgba(0,0,0,.4)}
.soon__title .script{font-family:var(--script);font-weight:700;color:#f3d9a0;font-size:1.1em;display:inline-block;transform:rotate(-2deg);line-height:.8}
.soon__lead{margin:22px auto 0;max-width:48ch;font-size:clamp(1.02rem,1.5vw,1.18rem);
  color:rgba(238,228,206,.96);text-shadow:0 1px 3px rgba(0,0,0,.55)}

/* Emaille-Türschild "GEÖFFNET/GESCHLOSSEN" – wie im Laden, statt generischer Pille.
   Cremefarbenes Schild mit Doppellinie, vier Eck-Nieten, leuchtendem Lämpchen. */
.opensign{position:relative;margin-top:28px;display:inline-flex;flex-direction:column;align-items:center;gap:3px;
  padding:14px 34px 13px;border-radius:10px;color:var(--wine);
  background:
    radial-gradient(circle 2.4px at 13px 13px,                     rgba(76,14,23,.55) 60%,transparent 63%),
    radial-gradient(circle 2.4px at calc(100% - 13px) 13px,        rgba(76,14,23,.55) 60%,transparent 63%),
    radial-gradient(circle 2.4px at 13px calc(100% - 13px),        rgba(76,14,23,.55) 60%,transparent 63%),
    radial-gradient(circle 2.4px at calc(100% - 13px) calc(100% - 13px), rgba(76,14,23,.55) 60%,transparent 63%),
    linear-gradient(180deg,#f7efda,#e7dabd);
  border:2.5px solid var(--wine);
  box-shadow:inset 0 0 0 3px #f7efda, inset 0 0 0 4.5px rgba(76,14,23,.30),
             0 20px 32px -18px rgba(0,0,0,.7);
  transform:rotate(-1.2deg);transform-origin:50% 0;
  /* schaukelt beim Sichtbarwerden dezent wie ein aufgehängtes Schild ein */
  animation:signSwingIn 1.25s cubic-bezier(.2,.72,.25,1) both}
@keyframes signSwingIn{
  0%  {opacity:0;transform:translateY(-13px) rotate(-11deg)}
  28% {opacity:1}
  46% {transform:translateY(0) rotate(5deg)}
  66% {transform:rotate(-4deg)}
  84% {transform:rotate(1.4deg)}
  100%{transform:rotate(-1.2deg)}
}
@media (prefers-reduced-motion:reduce){.opensign{animation:none}}
.opensign__row{display:flex;align-items:center;gap:11px;line-height:1}
.opensign__lamp{width:13px;height:13px;border-radius:50%;flex:none;background:#c0402f;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 0 0 2px rgba(76,14,23,.12)}
.opensign__state{font-family:var(--display);font-weight:700;font-size:1.4rem;letter-spacing:.05em;text-transform:uppercase}
.opensign__detail{font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--ink-soft);letter-spacing:.02em}
.opensign.is-open .opensign__state{color:#2f6d2b}
.opensign.is-open .opensign__lamp{background:#4c9142;
  box-shadow:0 0 9px 1px rgba(76,145,66,.75),inset 0 1px 1px rgba(255,255,255,.6);animation:pulse 2.4s infinite}
.opensign.is-closed .opensign__state{color:#9a3327}
.opensign.is-closed .opensign__lamp{background:#c0402f}
.opensign.is-pause .opensign__state{color:#b07a1f}
.opensign.is-pause .opensign__lamp{background:#d19a2e;
  box-shadow:0 0 0 4px rgba(209,154,46,.18),0 0 14px rgba(209,154,46,.5);
  animation:pulse 4s infinite}
.opensign__holiday{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#9a3327;opacity:.9}
.opensign__holiday[hidden]{display:none}

.soon__contact{margin-top:24px}
.soon__addr{font-style:normal;font-size:1.02rem;color:rgba(238,228,206,.95);line-height:1.5}
.soon__addr strong{font-family:var(--display);font-size:1.1rem}
.soon__lines{margin-top:12px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px}
.soon__lines a{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--cream);
  border-bottom:1.5px solid transparent;transition:border-color .2s,color .2s}
.soon__lines a:hover{color:#f6ecd6;border-bottom-color:rgba(236,224,198,.6)}
.soon__lines .ico{width:1.05em;height:1.05em;fill:currentColor}

.soon__hours{margin-top:26px;width:100%;max-width:400px;text-align:left;
  background:rgba(20,4,7,.42);border:1.5px solid var(--line-wine);border-radius:16px;
  padding:4px clamp(18px,4vw,28px) 12px;
  box-shadow:0 20px 40px -28px rgba(0,0,0,.8),inset 0 1px 0 rgba(236,224,198,.08)}
.soon__hours-h{display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--script);font-weight:700;color:#f3d9a0;font-size:1.4rem;
  transform:rotate(-1.5deg);margin:10px 0 2px}
.soon__hours-h::before,.soon__hours-h::after{content:"";height:1px;width:26px;
  background:linear-gradient(90deg,transparent,var(--line-wine))}
.soon__hours-h::after{transform:scaleX(-1)}
.soon__hours dl{margin:0;display:flex;flex-direction:column}
.soon__hrow{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 22px;
  padding:11px 0;border-bottom:1px dashed var(--line-wine)}
.soon__hrow:last-child{border-bottom:0}
.soon__hours dt{font-family:var(--script);font-weight:700;font-size:1.2rem;color:#f3d9a0;white-space:nowrap}
.soon__hours dd{margin:0;text-align:right;font-size:.93rem;color:rgba(238,228,206,.95);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.soon__hrow.is-closed dt,.soon__hrow.is-closed dd{color:rgba(240,184,173,.9)}
.soon__hrow.is-closed dd{font-style:italic}
.soon__hours-note{margin:10px 0 4px;padding-top:10px;border-top:1px dashed var(--line-wine);
  font-size:.78rem;line-height:1.5;color:rgba(238,228,206,.8);text-align:center}
.soon__hours-note b{color:rgba(240,184,173,.95);font-weight:700;letter-spacing:.02em}

.soon__aktionen{margin-top:22px;width:100%;max-width:400px;text-align:left;
  background:rgba(20,4,7,.42);border:1.5px solid var(--line-wine);border-radius:16px;
  padding:4px clamp(18px,4vw,28px) 16px;
  box-shadow:0 20px 40px -28px rgba(0,0,0,.8),inset 0 1px 0 rgba(236,224,198,.08)}
.soon__aktion + .soon__aktion{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-wine)}
.soon__aktion-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:8px 0 2px}
.soon__aktion-h b{font-family:var(--script);font-weight:700;font-size:1.25rem;color:#f3d9a0;line-height:1}
.soon__aktion-h small{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(238,228,206,.75);font-variant-numeric:tabular-nums}
.soon__aktionen dl{margin:0;display:flex;flex-direction:column}
.soon__arow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 18px;
  padding:9px 0;border-bottom:1px dashed var(--line-wine)}
.soon__arow:last-child{border-bottom:0}
.soon__aktionen dt{font-size:.95rem;line-height:1.3;color:rgba(238,228,206,.95)}
.soon__adatum{display:block;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(238,228,206,.7);font-variant-numeric:tabular-nums}
.soon__aktionen dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.soon__aktionen dd b{display:block;font-family:var(--display);font-weight:700;font-size:1rem;color:#f3d9a0;white-space:nowrap}
.soon__aktionen dd small{display:block;font-size:.68rem;color:rgba(238,228,206,.72);white-space:nowrap}
.soon__aktionen dd i{font-family:var(--script);font-style:normal;font-weight:700;font-size:1.15rem;color:#f3d9a0}
/* Angebote lesen sich wie eine Speisekarte – dieselbe Führungslinie wie auf
   der Startseite, nur schmaler. Beim Spar Menü steht über dem Gericht ein
   Datum; dort führte die Linie ins Leere, deshalb bleibt es beim Raster. */
.soon__aktion--angebote .soon__arow{display:flex;align-items:baseline;gap:0 8px}
.soon__aktion--angebote .soon__arow dt{flex:0 1 auto;min-width:0}
.soon__aktion--angebote .soon__arow dd{flex:1 1 auto;display:flex;align-items:baseline;
  justify-content:flex-end;gap:0 6px;text-align:right}
.soon__aktion--angebote .soon__arow dd::before{content:"";flex:1 1 16px;min-width:10px;height:0;
  align-self:baseline;border-bottom:2px dotted rgba(236,224,198,.4);transform:translateY(-4px)}
.soon__aktion--angebote .soon__arow dd b,
.soon__aktion--angebote .soon__arow dd small{display:inline}
/* Läuft nichts (oder schweigt die Datenbank), trägt diese Zeile den Block. */
.soon__aktion-leer{margin:10px 0 4px;font-size:.9rem;line-height:1.55;
  color:rgba(238,228,206,.85);text-align:center}
.soon__aktion-note{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line-wine);
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(238,228,206,.78);text-align:center}

.soon__social{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.soon__social a{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--cream);padding:11px 20px;border:2px solid rgba(236,224,198,.55);border-radius:100px;
  transition:background .2s,border-color .2s}
.soon__social a:hover{background:rgba(236,224,198,.12);border-color:var(--cream)}

.soon__foot{position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:center;align-items:center;
  padding:16px clamp(20px,5vw,44px);font-size:.76rem;color:rgba(238,228,206,.66)}
.soon__legal a{border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.soon__legal a + a{margin-left:16px}
.soon__legal a:hover{color:#f3d9a0;border-bottom-color:currentColor}

/* ========================================================================
   404 – Seite nicht gefunden
   ======================================================================== */
.e404{position:relative;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(70px,10vh,120px) clamp(20px,5vw,44px) 96px;
  color:var(--cream);background:var(--wine);overflow:hidden;isolation:isolate}
.e404__ph{position:absolute;inset:0;z-index:-3;
  background:radial-gradient(120% 100% at 80% 0%,#8a2334 0%,transparent 55%),
             radial-gradient(90% 90% at 10% 100%,#520f1a 0%,transparent 60%),var(--wine)}
.e404::after{content:"";position:absolute;inset:0;z-index:-2;background:var(--grain);background-size:160px;opacity:.06;mix-blend-mode:overlay}
.e404__deco{position:absolute;right:-6%;bottom:-10%;z-index:-1;width:clamp(250px,40vw,540px);aspect-ratio:var(--pig-ar);
  background:var(--cream);opacity:.05;-webkit-mask:url("/assets/pig.svg") center/contain no-repeat;mask:url("/assets/pig.svg") center/contain no-repeat}

.e404__kicker{font-family:var(--script);font-weight:700;font-size:clamp(1.5rem,4vw,2.2rem);color:#f3d9a0;
  transform:rotate(-2.5deg);text-shadow:0 1px 3px rgba(0,0,0,.5);margin:0 0 2px}
.e404__num{display:flex;align-items:center;justify-content:center;gap:clamp(6px,2.2vw,20px);
  font-family:var(--display);font-weight:700;line-height:.8;font-size:clamp(5.5rem,21vw,12.5rem);color:#f3d9a0;
  text-shadow:0 3px 0 rgba(0,0,0,.22),0 12px 36px rgba(0,0,0,.45);margin:2px 0 6px}
.e404__pig{display:inline-block;width:clamp(4rem,16vw,9.4rem);aspect-ratio:var(--pig-ar);background:#f3d9a0;
  transform:rotate(-4deg);-webkit-mask:url("/assets/pig.svg") center/contain no-repeat;mask:url("/assets/pig.svg") center/contain no-repeat}
.e404 h1{font-size:clamp(1.7rem,4.4vw,3rem);line-height:1.08;max-width:22ch;margin:0 auto;
  text-shadow:0 2px 4px rgba(0,0,0,.5)}
.e404__lead{margin:20px auto 0;max-width:52ch;font-size:clamp(1.02rem,1.5vw,1.18rem);
  color:rgba(238,228,206,.95);text-shadow:0 1px 3px rgba(0,0,0,.5)}
.e404__actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.e404__foot{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;gap:4px 18px;
  justify-content:center;align-items:center;padding:16px clamp(20px,5vw,44px);font-size:.76rem;color:rgba(238,228,206,.66)}

/* ========================================================================
   STORY / HANDWERK
   ======================================================================== */
.story{background:var(--paper);padding:clamp(70px,10vw,128px) 0;position:relative}
.story__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,6vw,86px);align-items:center}
.story__media{position:relative}
.story__media .frame{box-shadow:0 26px 50px -30px rgba(76,14,23,.55)}
.story__media .f1{width:74%}
.story__media .f2{position:absolute;right:0;bottom:-9%;width:52%;z-index:4}
.story__media .media{aspect-ratio:4/5}
.story__media .f2 .media{aspect-ratio:1/1}
.story__body h2{font-size:clamp(2rem,3.6vw,2.9rem);margin-bottom:20px;max-width:16ch;color:var(--wine)}
.story__body p{color:var(--ink-soft);margin-bottom:16px;max-width:56ch}
/* Desktop: Bilder links bleiben stehen, während rechts der Text weiterscrollt */
@media (min-width:1041px){
  .story__grid{align-items:start}
  /* Fallback ohne JS: hartes Sticky. Mit JS wird daraus ein weiches, zentriertes Pinnen. */
  .story__media,.contact__map{position:sticky;top:calc(var(--head-h) + 28px);align-self:start}
}
.steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0}
.steps li{display:flex;gap:16px;align-items:center;padding:15px 2px}
.steps li + li{border-top:1px dashed rgba(109,22,34,.3)}
/* Statt der Ziffer sitzt der Haus-Schweinekopf im Kreis. Zwei Ebenen, weil eine
   CSS-Maske immer das ganze Element beschneidet: <b> ist der weinrote Kreis,
   ::before legt die Zeichnung als Maske in Creme darueber. Die Nummerierung
   steckt ohnehin im <ol>, das <b> ist damit reine Deko (aria-hidden im Markup).
   pig.svg ist 455x620 gross und zeigt Kopf UND Schwanzschwung. Im Kreis soll nur
   der Kopf stehen, deshalb kein "contain", sondern ein Ausschnitt: die Maske wird
   auf 28.2px Bildbreite skaliert (der Kopf, im Bild x 15-455 / y 25-445, wird so
   26px hoch) und per Position in die Kreismitte geschoben. overflow kappt, was
   der lose Strich sonst ueber den Kreisrand hinaus zeichnen wuerde. */
.steps b{flex:none;width:38px;height:38px;border-radius:50%;background:var(--wine);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.steps b::before{content:"";width:100%;height:100%;background:var(--cream);
  -webkit-mask:url("/assets/pig.svg") 4.45px 4.45px/28.2px auto no-repeat;
          mask:url("/assets/pig.svg") 4.45px 4.45px/28.2px auto no-repeat}
.steps strong{font-family:var(--display);font-weight:700;font-size:1.08rem;color:var(--ink);display:block}
.steps span{color:var(--muted);font-size:.9rem}
.pull{margin:30px 0 0;font-family:var(--script);font-weight:700;font-size:clamp(1.7rem,3vw,2.4rem);
  line-height:1.15;color:var(--wine)}
.story__cert{margin:26px 0 0;display:flex;align-items:center;gap:16px;max-width:52ch}
/* Ovales EU-Identitätskennzeichen wie ein aufgedrückter Stempel */
.eu-mark{flex:none;width:98px;height:auto;color:var(--wine);transform:rotate(-3deg)}
.eu-mark text{fill:currentColor;font-family:var(--sans);font-weight:800;text-anchor:middle;
  font-size:20px;letter-spacing:.06em}
.eu-mark .eu-mark__mid{font-size:18.5px;letter-spacing:.03em}
.story__cert-txt{font-size:.85rem;color:var(--muted);line-height:1.5}
.story__cert-txt strong{color:var(--wine);font-weight:700;letter-spacing:.02em}
.story__cert-txt span{font-size:.8rem}
.story__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------- Foto-Platzhalter ---------- */
.media{position:relative;overflow:hidden;background:var(--wine-deep)}
.media img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.media img.is-missing{display:none}
.media__ph{position:absolute;inset:0;z-index:1;display:grid;place-items:center;text-align:center;
  background:radial-gradient(120% 100% at 30% 0%,#8a2334,transparent 60%),var(--wine)}
.media__ph::before{content:"";position:absolute;width:38%;aspect-ratio:var(--pig-ar);background:var(--cream);opacity:.14;
  -webkit-mask:url("/assets/pig.svg") center/contain no-repeat;mask:url("/assets/pig.svg") center/contain no-repeat}
.media__ph span{position:relative;font-family:var(--script);font-weight:700;font-size:1.15rem;color:rgba(236,224,198,.85)}

/* ========================================================================
   SORTIMENT
   ======================================================================== */
.menu{background:var(--cream);padding:clamp(70px,10vw,128px) 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{position:relative;background:var(--paper);padding:32px 28px 30px;
  border:2px solid var(--wine);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.card::after{content:"";position:absolute;inset:5px;border:1px solid var(--wine);pointer-events:none}
.card:hover{transform:translateY(-5px);box-shadow:0 26px 46px -28px rgba(76,14,23,.5)}
.card__tag{font-family:var(--script);font-weight:700;font-size:1.35rem;color:var(--wine);line-height:.9;display:inline-block}
.card h3{font-size:1.34rem;margin:8px 0 10px;color:var(--ink)}
.card p{color:var(--ink-soft);font-size:.95rem}
.card--accent{background:var(--wine);color:var(--cream)}
.card--accent::after{border-color:var(--cream)}
.card--accent{border-color:var(--wine-deep)}
.card--accent .card__tag{color:#f3d9a0}
.card--accent h3{color:#fff}
.card--accent p{color:rgba(236,224,198,.85)}
.card__burst{position:absolute;top:-22px;right:-14px;--bs:92px;z-index:5}

/* ========================================================================
   SERVICE
   ======================================================================== */
.service{background:var(--wine);color:var(--cream);padding:clamp(70px,10vw,128px) 0;position:relative;isolation:isolate}
.service::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);background-size:160px;opacity:.06}
.service .sec-head h2{color:var(--cream)}
.service .sec-head__lead{color:rgba(236,224,198,.8)}
.service__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{position:relative;padding:clamp(32px,4vw,50px);overflow:hidden}
.panel--cream{background:var(--paper);color:var(--ink)}
.panel--cream h2{color:var(--wine)}
.panel--wine{background:var(--wine-2);color:var(--cream);border:2px solid var(--cream)}
.panel h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:4px 0 16px}
.panel p{margin-bottom:22px;max-width:46ch}
.panel--cream p{color:var(--ink-soft)}
.panel--wine p{color:rgba(236,224,198,.9)}
.ticks{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px;font-size:.98rem}
.ticks li::before{content:"";position:absolute;left:0;top:.3em;width:16px;height:9px;
  border-left:2.5px solid var(--wine);border-bottom:2.5px solid var(--wine);transform:rotate(-45deg)}
.panel--wine .ticks li::before{border-color:#f3d9a0}
.panel__heart{position:absolute;top:22px;right:22px;opacity:.9}
.panel__burst{position:absolute;bottom:-16px;right:-16px;--bs:104px;z-index:5}

/* ---------- Angebote & Aktionen – ein Band, zwei Zustände ----------
   Ohne Daten (auch bei stiller Datenbank) bleibt es das schmale
   Instagram-Band von vorher. Mit Daten wächst es zum Aushang-Abschnitt:
   derselbe Kopf, darunter die Karten, der Ausblick und zum Schluss die
   allgemeine Zeile mit dem Instagram-Knopf. */
.promo{background:var(--wine-deep);color:var(--cream);padding:clamp(40px,6vw,66px) 0}
.promo__inner{display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,48px);flex-wrap:wrap;text-align:center}
.promo .kicker{color:#f3d9a0}
.promo h2{color:var(--cream);font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:8px}
.promo__inner p{color:rgba(236,224,198,.85);max-width:44ch;margin-inline:auto}
.promo .burst{flex:none;--bs:132px}

/* Mit Aushängen trägt das Band einen ganzen Abschnitt – Luft, Körnung und
   ein Kopf, der im Verhältnis dazu nicht mehr wie eine Fußnote wirkt. */
.promo--aktionen{padding:clamp(58px,8vw,104px) 0;position:relative;isolation:isolate}
.promo--aktionen::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--grain);background-size:160px;opacity:.06}
.promo--aktionen .promo__inner{margin-bottom:clamp(34px,4.5vw,58px)}
.promo--aktionen .kicker{font-size:clamp(1.7rem, 1.35rem + 1.7vw, 2.5rem);margin-bottom:2px}
.promo--aktionen h2{font-size:clamp(1.9rem, 1.45rem + 1.9vw, 2.9rem);text-wrap:balance;margin-bottom:0}

/* Die allgemeine Zeile sagt, was in den Daten nicht steht – klein, aber da. */
.promo__zeile{margin:clamp(30px,4vw,48px) auto 0;max-width:56ch;text-align:center;
  font-size:.95rem;line-height:1.55;color:rgba(236,224,198,.78);text-wrap:pretty}
.promo__mehr{margin-top:clamp(16px,2vw,22px);text-align:center}

/* ---- Die Aushänge im Promo-Band ----------------------------------------
   Die Karten zitieren die Instagram-Vorlagen: Pinselschrift-Titel,
   Doppelrahmen, Preisaufkleber, Fußzeile als Leiste. Der Ton (wein/papier)
   kommt aus der Redaktion, die Anordnung aus der Art:
     angebote   Speisekarte – Ware, gepunktete Führungslinie, Preis
     sparmenue  Termin, Gericht, runder Aufkleber
     spartuete  eine Zeile groß, Zackenaufkleber
   Sie liegen auf dem dunklen Weinrot des Bandes – wie Aushänge an der Wand. */
/* Die Breite hängt an der Anzahl (Klasse aus PHP): eine Karte über 1180 px
   zieht Ware und Preis so weit auseinander, dass die Zeile zerfällt. */
.aktionen__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(18px,2.2vw,28px);align-items:stretch;margin-inline:auto;
  /* Drei Karten teilen sich den Satzspiegel – dort muss der Satz kleiner
     ausfallen als in einer Karte, die ihn allein hat. Eine vw-Formel weiß
     das nicht, die Anzahl schon. */
  --titel:clamp(2.1rem, 1.9rem + 1.1vw, 2.7rem);
  --ware:1.02rem;--ware-menue:1.08rem;--preis:1.14rem}
/* Vier Karten kommen vor, seit eine Spartüte je Termin eine eigene bekommt.
   Im vollen Satzspiegel stünden drei nebeneinander und die vierte allein in
   der zweiten Reihe – zwei mal zwei ist die ruhigere Ordnung. Damit ist eine
   Karte genauso breit wie bei zweien, also gilt auch derselbe Satz. */
.aktionen__grid--2,.aktionen__grid--4{max-width:940px;
  --titel:clamp(2.2rem, 1.9rem + 1.4vw, 3rem);
  --ware:clamp(1.06rem, 1rem + .3vw, 1.18rem);--ware-menue:clamp(1.1rem, 1rem + .35vw, 1.26rem);
  --preis:clamp(1.14rem, 1.05rem + .3vw, 1.28rem)}
.aktionen__grid--1{max-width:640px;
  --titel:clamp(2.5rem, 2rem + 2.2vw, 3.6rem);
  --ware:clamp(1.04rem, 1rem + .45vw, 1.26rem);--ware-menue:clamp(1.12rem, 1rem + .5vw, 1.34rem);
  --preis:clamp(1.12rem, 1rem + .5vw, 1.38rem)}

.aktion{position:relative;display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);
  padding:clamp(24px,2.6vw,34px) clamp(20px,2.4vw,30px) clamp(20px,2.2vw,26px);
  border:2px solid var(--wine);box-shadow:0 24px 46px -30px rgba(76,14,23,.65);isolation:isolate}
/* Feine Körnung wie auf gedrucktem Papier – dieselbe Textur wie im Service. */
.aktion::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);background-size:150px;opacity:.05;pointer-events:none}
/* Doppelrahmen wie auf den Aushängen, vgl. .frame */
.aktion::after{content:"";position:absolute;inset:5px;border:1px solid var(--wine);pointer-events:none}
.aktion--wein{background:var(--wine);color:var(--cream);border-color:rgba(236,224,198,.5)}
.aktion--wein::after{border-color:rgba(236,224,198,.32)}
.aktion--wein::before{opacity:.08}
.aktion--papier{background:var(--cream);color:var(--wine-ink)}

.aktion__kopf{text-align:center;padding-bottom:clamp(10px,1.2vw,15px);
  border-bottom:1.5px solid rgba(109,22,34,.3)}
.aktion--wein .aktion__kopf{border-bottom-color:var(--line-wine)}
.aktion__titel{font-family:var(--script);font-weight:700;line-height:.88;
  font-size:var(--titel);color:var(--wine);display:inline-block;transform:rotate(-1.5deg)}
.aktion--wein .aktion__titel{color:#f3d9a0}
.aktion__zeit{margin-top:10px;font-size:.78rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(109,22,34,.75);font-variant-numeric:tabular-nums}
.aktion--wein .aktion__zeit{color:rgba(236,224,198,.85)}

.aktion__ware{font-family:var(--display);font-weight:700;line-height:1.24;
  font-size:var(--ware);overflow-wrap:break-word}
.aktion__datum{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(109,22,34,.72);font-variant-numeric:tabular-nums;margin-bottom:3px}
.aktion--wein .aktion__datum{color:rgba(236,224,198,.72)}

/* --- ANGEBOTE: Speisekarte -------------------------------------------
   Die gepunktete Linie zwischen Ware und Preis wächst mit der Karte. Sie
   ersetzt die Lücke, die eine breite Karte sonst zwischen beide legt, und
   liest sich auf 300 px genauso wie auf 640 px. */
/* Die Liste füllt die Karte und sitzt mittig darin – wie der Satzblock auf
   dem Aushang, der die freie Höhe gleichmäßig verteilt. */
.aktion__karte{list-style:none;margin:0;padding:0;flex:1 1 auto;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(7px,.9vw,13px)}
.aktion__posten{display:flex;align-items:baseline;gap:0 8px;min-width:0}
.aktion__karte .aktion__ware{flex:0 1 auto;min-width:0}
.aktion__karte .aktion__datum{display:block}
.aktion__fuehrung{flex:1 1 18px;min-width:12px;height:0;align-self:baseline;
  border-bottom:2px dotted currentColor;opacity:.45;transform:translateY(-4px)}
.aktion__preis{flex:none;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.aktion__preis b{font-family:var(--display);font-weight:700;color:var(--wine);font-size:var(--preis)}
.aktion__preis small{font-size:.72rem;font-weight:700;letter-spacing:.02em;opacity:.72;margin-left:4px}
.aktion--wein .aktion__preis b{color:#f3d9a0}
/* Drei Karten teilen sich den Satzspiegel: neben dem Preis bliebe für die
   Einheit nur Platz, wenn die Ware umbricht – dann lieber die Einheit unter
   den Preis, die Führungslinie behält so ihre Länge. */
.aktionen__grid:not(.aktionen__grid--1):not(.aktionen__grid--2):not(.aktionen__grid--4) .aktion__preis small{
  display:block;margin-left:0;margin-top:1px}

/* --- SPAR MENÜ: Termin, Gericht, runder Aufkleber --------------------- */
.aktion__menue{list-style:none;margin:0;padding:0;flex:1 1 auto;
  display:flex;flex-direction:column;justify-content:center}
.aktion__termin{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(10px,1.6vw,18px);padding:clamp(12px,1.5vw,18px) 0}
.aktion__termin:first-child{padding-top:2px}
.aktion__termin:last-child{padding-bottom:2px}
.aktion__termin + .aktion__termin{border-top:1px dashed rgba(109,22,34,.3)}
.aktion--wein .aktion__termin + .aktion__termin{border-top-color:var(--line-wine)}
.aktion__was{flex:1 1 auto;min-width:0}
.aktion--sparmenue .aktion__ware{font-size:var(--ware-menue)}

.aktion__sticker{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:clamp(80px, 6.4vw + 56px, 100px);height:clamp(80px, 6.4vw + 56px, 100px);
  padding:6px;border-radius:50%;text-align:center;transform:rotate(-6deg);
  background:var(--cream);color:var(--wine);box-shadow:0 12px 22px -14px rgba(0,0,0,.75)}
.aktion--papier .aktion__sticker{background:var(--wine);color:var(--cream)}
/* Die Einheit steht über dem Preis – so wie auf dem Aushang. */
.aktion__sticker small{order:-1;font-size:.6rem;font-weight:800;letter-spacing:.04em;line-height:1;margin-bottom:3px;opacity:.92}
.aktion__sticker b{font-family:var(--display);font-weight:700;line-height:1;white-space:nowrap;
  font-size:clamp(1rem, .92rem + .3vw, 1.18rem);font-variant-numeric:tabular-nums}
/* Ein Hinweis braucht mehr Fläche als ein Preis – Pinselschrift, zwei Zeilen. */
.aktion__sticker--wort{width:clamp(88px, 7vw + 60px, 110px);height:clamp(88px, 7vw + 60px, 110px);padding:9px}
.aktion__sticker i{font-family:var(--script);font-style:normal;font-weight:700;line-height:.98;
  font-size:clamp(1.05rem, 1rem + .3vw, 1.28rem)}

/* --- MONTAGS-SPARTÜTE: eine Zeile groß, Preis auf dem Zackenaufkleber --- */
/* Grundstellung ist der Aushang: Text und Aufkleber mittig untereinander.
   Nur wenn die Karte den Satzspiegel für sich hat (eine oder zwei), stehen
   beide nebeneinander – sonst bleibt neben dem Aufkleber nichts übrig. */
.aktion__tuete{flex:1 1 auto;display:flex;flex-wrap:wrap;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  gap:clamp(12px,2vw,22px);padding:6px 0}
.aktionen__grid--1 .aktion__tuete,.aktionen__grid--2 .aktion__tuete,
.aktionen__grid--4 .aktion__tuete{
  flex-direction:row;justify-content:space-between;text-align:left}
.aktion--spartuete .aktion__ware{min-width:0;line-height:1.28;
  font-size:clamp(1.2rem, 1.05rem + .7vw, 1.6rem)}
.aktionen__grid--1 .aktion--spartuete .aktion__ware,
.aktionen__grid--2 .aktion--spartuete .aktion__ware,
.aktionen__grid--4 .aktion--spartuete .aktion__ware{flex:1 1 8em}
.aktion__burst{flex:none;--bs:clamp(104px, 6vw + 76px, 136px);margin:0}
.aktion__burst b{font-size:clamp(1.35rem, 1.2rem + .5vw, 1.72rem)}
.aktion--papier .aktion__burst::before{background:var(--wine)}
.aktion--papier .aktion__burst b,.aktion--papier .aktion__burst small{color:var(--cream)}

/* Steht kein Preis, steht dort ein Hinweis ("Schöne Ferien!") */
.aktion__notiz{flex:none;max-width:9em;text-align:right;font-family:var(--script);font-weight:700;
  font-size:1.4rem;line-height:1;color:var(--wine);transform:rotate(-3deg)}
.aktion--wein .aktion__notiz{color:#f3d9a0}

.aktion__fuss{margin-top:auto;align-self:center;text-align:center;
  font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 20px;border-radius:100px;background:var(--cream);color:var(--wine)}
.aktion--papier .aktion__fuss{background:var(--wine);color:var(--cream)}

/* --- AUSBLICK ---------------------------------------------------------
   Deutlich leiser als die Aushänge, aber mit eigenem Kopf und eigenem
   Rhythmus: Datum als Marke, Art als Zeile, eine Zeile Kurzfassung. */
.vorschau{margin-top:clamp(40px,5vw,68px)}
.vorschau__h{margin:0 0 clamp(18px,2.4vw,28px)}
.vorschau__h{color:#f3d9a0}
.vorschau__h span{font-family:var(--script);font-weight:700;line-height:.9;
  font-size:clamp(1.7rem, 1.5rem + .9vw, 2.3rem);display:inline-block;transform:rotate(-1.5deg)}
/* Die Spuren sind nach oben gedeckelt: ein einzelner Eintrag soll keine
   1180 px breite, fast leere Leiste werden. Deshalb mittig statt gestreckt. */
.vorschau__liste{list-style:none;margin:0;padding:0;display:grid;justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(230px,340px));gap:clamp(12px,1.6vw,20px)}
.vorschau__eintrag{display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding:clamp(15px,1.8vw,21px) clamp(16px,1.8vw,22px) clamp(15px,1.8vw,19px);
  background:rgba(20,4,7,.34);border-top:3px solid rgba(236,224,198,.45)}
/* "am 24.08." bzw. "19.08. – 16.09." – kurz genug für eine Zeile. */
.vorschau__wann{background:var(--cream);color:var(--wine-deep);border-radius:100px;
  padding:4px 12px 3px;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.vorschau__titel{font-family:var(--display);font-weight:700;line-height:1.16;color:#f3d9a0;
  font-size:clamp(1.1rem, 1rem + .4vw, 1.32rem)}
.vorschau__kurz{font-size:.92rem;line-height:1.45;color:rgba(236,224,198,.82)}

/* ========================================================================
   GALERIE
   ======================================================================== */
/* Bewertungen – dunkle Weinrot-Bande zwischen den hellen Sektionen */
.reviews{background:var(--wine);color:var(--cream);padding:clamp(64px,8vw,104px) 0;position:relative;isolation:isolate}
.reviews::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);background-size:160px;opacity:.06}
.stars{display:inline-block;font-size:1.5rem;line-height:1;letter-spacing:.06em;
  background:linear-gradient(90deg,#e8b64b var(--pct,100%),rgba(236,224,198,.28) var(--pct,100%));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stars::before{content:"★★★★★"}
.stars--sm{font-size:1.05rem}
.reviews__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(18px,4vw,44px);text-align:center;margin-bottom:clamp(32px,4vw,48px)}
.reviews__score{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding-right:clamp(0px,3vw,36px);border-right:1px solid var(--line-wine)}
.reviews__num{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,5vw,3.6rem);color:#f3d9a0;line-height:1}
.reviews__count{font-size:.84rem;font-weight:700;color:rgba(236,224,198,.85);text-decoration:none;border-bottom:1px solid transparent}
.reviews__count:hover{color:#f3d9a0;border-bottom-color:currentColor}
.reviews .kicker{color:#f3d9a0}
.reviews__head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--cream);margin:2px 0 0}
.reviews__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.review{background:var(--paper);border:1px solid rgba(0,0,0,.06);border-radius:8px;
  padding:22px 22px 18px;margin:0;display:flex;flex-direction:column;gap:11px;
  box-shadow:0 22px 44px -26px rgba(0,0,0,.55)}
.review blockquote{margin:0;font-size:.97rem;line-height:1.55;color:var(--ink);font-style:normal;flex:1}
.review figcaption{display:flex;flex-direction:column;gap:1px;border-top:1px dashed var(--line);padding-top:11px}
.review figcaption b{font-family:var(--display);font-weight:700;color:var(--wine);font-size:.97rem}
.review figcaption span{font-size:.77rem;color:var(--muted)}
.reviews__cta{text-align:center;margin-top:clamp(30px,4vw,44px)}
@media (max-width:920px){.reviews__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.reviews__grid{grid-template-columns:1fr}
  .reviews__score{border-right:0;padding-right:0}}

.gallery{background:var(--paper);padding:clamp(70px,10vw,128px) 0}
/* Zeilenhoehe wandert mit der Spaltenbreite: bei fester 148px-Zeile werden die
   Kacheln auf breiten Bildschirmen zu flachen Streifen, weil der Satzspiegel
   mitwaechst (siehe --wrap). 148px bei 1440px Fenster, 196px ab 1920px. */
.gallery__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(148px,10.2vw,196px);gap:14px}
.shot{cursor:zoom-in;border:2px solid var(--wine);padding:6px;background:var(--cream)}
.shot .media{width:100%;height:100%}
.shot:hover .media img{transform:scale(1.05)}
.shot--a{grid-column:span 2;grid-row:span 2}
.shot--c{grid-column:span 1;grid-row:span 2}
.shot--e{grid-column:span 2;grid-row:span 1}
.gallery__note{text-align:center;margin-top:22px;color:var(--muted);font-family:var(--script);font-size:1.25rem}

.lb{position:fixed;inset:0;z-index:1300;background:rgba(40,8,14,.94);display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;pointer-events:none;transition:opacity .3s}
.lb.is-open{opacity:1;pointer-events:auto}
.lb img{max-width:min(92vw,1100px);max-height:88vh;border:6px solid var(--cream);box-shadow:0 40px 90px -30px #000}
.lb__close,.lb__nav{position:absolute;background:rgba(236,224,198,.12);border:1px solid var(--line-wine);color:var(--cream);
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;transition:background .2s}
.lb__close:hover,.lb__nav:hover{background:rgba(236,224,198,.26)}
.lb__close{top:20px;right:20px}.lb__nav{top:50%;transform:translateY(-50%)}
.lb__nav--prev{left:20px}.lb__nav--next{right:20px}

/* ========================================================================
   KONTAKT
   ======================================================================== */
.contact{background:var(--cream);padding:clamp(70px,10vw,128px) 0}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,68px);align-items:start}
.contact__info h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:20px;color:var(--wine)}
.status--big{margin-bottom:22px;font-size:1rem;padding-left:13px;border-left:3px solid currentColor}
.addr{font-style:normal;font-size:1.1rem;line-height:1.7;color:var(--ink);margin-bottom:18px}
.addr strong{font-family:var(--display);font-weight:700;font-size:1.2rem}
.contact__lines{display:flex;flex-wrap:wrap;gap:12px 26px;margin-bottom:28px}
.contact__lines a{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:var(--wine);font-size:1.02rem}
.contact__lines a:hover{color:var(--wine-2)}
.contact__lines .ico{width:20px;height:20px;fill:currentColor;stroke:currentColor}
.contact__lines a:first-child .ico{stroke:none}

.hours-card{background:var(--wine);color:var(--cream);padding:26px 28px}
.hours-card h3{font-family:var(--script);font-weight:700;font-size:1.7rem;margin:0 0 12px;color:#f3d9a0}
.hours table{border-collapse:collapse;width:100%}
/* Die Tagesspalte darf NICHT umbrechen. "Mo–Mi" passte nicht in die früher
   festen 48 Punkte und brach am Gedankenstrich auf zwei Zeilen – die Zeile
   wurde doppelt hoch und der Tag stand gedrungen neben seiner einzeiligen
   Uhrzeit.
   width:1% ist kein Tippfehler, sondern der übliche Griff für "so schmal wie
   der Inhalt": ein Prozentwert unter der Mindestbreite lässt die Spalte auf
   genau diese zusammenfallen. Zusammen mit nowrap ist das immer die Breite
   des längsten Tageskürzels, egal ob dort "So" oder "Mo–Mi" steht. Den
   Abstand zur Uhrzeit trägt jetzt die Polsterung und nicht mehr eine feste
   Spaltenbreite, die bei jeder Textänderung wieder zu knapp wäre. */
.hours th{text-align:left;font-family:var(--sans);font-weight:700;color:var(--cream);
  width:1%;white-space:nowrap;padding:8px 18px 8px 0;font-size:.95rem;vertical-align:top}
.hours td{padding:8px 0;color:rgba(236,224,198,.9);font-size:.95rem;border-bottom:1px solid var(--line-wine)}
.hours tr:last-child td{border-bottom:0}
.hours .is-closed td{color:rgba(236,224,198,.82)}
.hours__holiday{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-wine);
  font-size:.82rem;line-height:1.55;color:rgba(236,224,198,.88)}
.hours__holiday b{color:#f3d9a0;font-weight:700}
.hours__note{margin-top:12px;font-size:.8rem;color:rgba(236,224,198,.82);font-style:italic}

.contact__social{margin-top:24px;display:flex;gap:12px}
.contact__social a{font-size:.82rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:9px 18px;border:2px solid var(--wine);border-radius:100px;color:var(--wine);transition:.2s}
.contact__social a:hover{background:var(--wine);color:var(--cream)}

.contact__map .frame{box-shadow:0 24px 50px -34px rgba(76,14,23,.55)}
.map{width:100%;height:auto;display:block}
.map__bg{fill:#e7dcc2}
.map__grid path{stroke:rgba(58,36,22,.06);stroke-width:1;fill:none}
.map__road{fill:none;stroke:#f6efe0;stroke-width:9;stroke-linecap:round}
.map__road--major{stroke-width:15;stroke:#fbf6ea}
.map__river{fill:none;stroke:#bcd0cf;stroke-width:7;stroke-linecap:round;opacity:.8}
.map__block rect{fill:#d9cbaf;stroke:rgba(58,36,22,.08)}
.map__label{fill:rgba(58,36,22,.42);font-family:var(--sans);font-size:12px;font-weight:600}
.map__pin path{fill:var(--wine)}
.map__pin{filter:drop-shadow(0 8px 8px rgba(0,0,0,.28));animation:drop .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes drop{0%{transform:translate(196px,110px);opacity:0}60%{transform:translate(196px,156px)}100%{transform:translate(196px,150px);opacity:1}}
.map__pin-dot{fill:var(--cream)}
.map__you{fill:var(--wine-ink);font-family:var(--display);font-weight:700;font-size:15px}
.map__compass path{fill:var(--wine)}
.map__compass text{fill:var(--muted);font-family:var(--sans);font-size:9px;font-weight:700}
.map__compass-ring{fill:rgba(255,255,255,.7);stroke:rgba(58,36,22,.15)}
.map-link{display:block;position:relative;text-decoration:none}
.map-link .frame{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.map-link:hover .frame{transform:translateY(-3px);box-shadow:0 30px 56px -28px rgba(76,14,23,.6)}
.map-link__chip{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:7px;background:var(--wine);color:var(--cream);
  font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.02em;padding:10px 17px;
  border-radius:100px;box-shadow:0 12px 22px -8px rgba(0,0,0,.55);white-space:nowrap;transition:background .2s,transform .25s}
.map-link__chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.map-link:hover .map-link__chip{background:var(--wine-2);transform:translate(-50%,-3px)}

/* ========================================================================
   FOOTER
   ======================================================================== */
.site-foot{background:var(--wine-deep);color:rgba(236,224,198,.82);padding:clamp(56px,7vw,84px) 0 28px;position:relative;overflow:hidden}
.site-foot .foot__pig{position:absolute;right:-40px;top:-30px;width:260px;aspect-ratio:var(--pig-ar);background:var(--cream);opacity:.05;
  -webkit-mask:url("/assets/pig.svg") center/contain no-repeat;mask:url("/assets/pig.svg") center/contain no-repeat}
.foot__grid{position:relative;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:38px;border-bottom:1px solid var(--line-wine)}
.foot__brand .brand__logo{width:clamp(190px,24vw,240px);margin-bottom:16px}
.foot__claim{font-family:var(--script);font-weight:700;font-size:1.5rem;line-height:1.15;color:#f3d9a0}
.foot__nav{display:flex;flex-direction:column;gap:11px}
.foot__nav a{font-size:.95rem;color:rgba(236,224,198,.8);width:fit-content}
.foot__nav a:hover,.foot__nav a[aria-current]{color:#f3d9a0}
.foot__nav a[aria-current]{text-decoration:underline;text-underline-offset:4px}
.foot__contact p{margin-bottom:14px;font-size:.95rem;line-height:1.6}
.foot__contact strong{color:var(--cream);font-family:var(--display)}
.foot__contact a:hover{color:#f3d9a0}
.foot__bar{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;font-size:.83rem;color:rgba(236,224,198,.78)}
.foot__legal{display:flex;gap:22px}
.foot__legal a:hover{color:#f3d9a0}

/* ========================================================================
   Scroll-Reveal
   ======================================================================== */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1!important;transform:none!important;transition:none}
  .hero__scroll span,.status__dot,.opensign__lamp,.map__pin{animation:none!important}
  .btn:hover,.card:hover{transform:none}
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width:1080px){ .head-cta .status{display:none} }

@media (max-width:1040px){
  .story__grid{grid-template-columns:1fr;gap:60px}
  .story__media{max-width:520px;margin:0 auto}
  .contact__map{position:static}
}
/* Die vier Grundsaetze tragen je drei bis fuenf Zeilen Text. Unter 1200px sind
   vier Spalten dafuer zu schmal – der Satz wird zu einem hohen, flatterigen
   Band. Ab hier stehen sie zwei mal zwei. Die Trennlinien muessen mitwandern:
   in zwei Spalten braucht nur das rechte Feld eine linke Linie, die untere
   Reihe stattdessen eine obere. */
@media (max-width:1200px){
  .values__grid{grid-template-columns:1fr 1fr;gap:8px 0}
  .value{padding:22px clamp(20px,3vw,40px)}
  .value:nth-child(2){border-left:1px dashed rgba(109,22,34,.35)}
  .value:nth-child(3),.value:nth-child(4){border-top:1px dashed rgba(109,22,34,.35)}
  .value:nth-child(3){border-left:0}
}
@media (max-width:900px){
  :root{--head-h:66px}
  .nav{display:none}
  .burger{display:block}
  .btn--phone span{display:none}
  .btn--phone{padding:12px}
  .head-cta .status{display:none!important}
  .value{padding:22px 16px}
  .cards{grid-template-columns:1fr 1fr}
  .service__grid{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr;gap:30px}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:600px){
  .values__grid{grid-template-columns:1fr}
  .value + .value{border-left:0;border-top:1px dashed rgba(109,22,34,.35)}
  .value:nth-child(2){border-left:0}
  .cards{grid-template-columns:1fr}
  .aktionen__grid,.vorschau__liste{grid-template-columns:1fr}
  .aktionen__grid--1 .aktion__tuete,.aktionen__grid--2 .aktion__tuete{
    flex-direction:column;justify-content:center;text-align:center}
  .aktion__sticker{width:76px;height:76px}
  .aktion__sticker--wort{width:84px;height:84px}
  .aktion__burst{--bs:100px}
  .gallery__grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:12px}
  .shot{grid-column:auto;grid-row:auto}
  .shot .media{height:auto;aspect-ratio:1}
  .hero{min-height:auto;padding-top:calc(var(--head-h) + 60px);padding-bottom:60px}
  .hero__scrim{background:
    linear-gradient(0deg,rgba(45,8,13,.86),rgba(45,8,13,.55) 48%,rgba(45,8,13,.44) 100%),
    linear-gradient(90deg,rgba(45,8,13,.6),rgba(45,8,13,.34))}
  .foot__grid{grid-template-columns:1fr}
  .foot__bar{flex-direction:column;gap:10px}
  .hero__scroll{display:none}
  .promo .burst{--bs:108px}
}

/* ========================================================================
   Rechtsseiten
   ======================================================================== */
.legal-head{position:fixed;inset:0 0 auto 0;height:var(--head-h);z-index:1000;background:var(--paper);
  border-bottom:2px solid var(--wine);display:flex;align-items:center}
.legal-head .head-inner{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,44px);
  display:flex;align-items:center;justify-content:space-between}
.legal-head .brand__logo{width:clamp(150px,20vw,186px)}
.legal-head .back{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.legal-head .back:hover{color:var(--wine)}
.legal{max-width:820px;margin-inline:auto;padding:calc(var(--head-h) + 54px) clamp(20px,5vw,44px) 90px}
.legal h1{font-size:clamp(2rem,5vw,2.9rem);margin-bottom:8px;color:var(--wine)}
.legal .lead{color:var(--muted);margin-bottom:38px;font-size:1.05rem}
.legal h2{font-family:var(--display);font-weight:700;font-size:1.3rem;margin:38px 0 12px;color:var(--wine)}
.legal p,.legal li{color:var(--ink-soft);margin-bottom:12px;max-width:72ch}
.legal a{color:var(--wine);text-decoration:underline;text-underline-offset:2px}
.legal ul{padding-left:20px;margin:0 0 16px}
.legal address{font-style:normal;line-height:1.7}
.legal .note{background:var(--cream);border:2px solid var(--wine);border-left-width:5px;padding:16px 20px;font-size:.9rem;color:var(--ink-soft);margin:18px 0}
.legal .note strong{color:var(--wine)}
:root{
  --burst-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTAwLjAwIDEuMDAgTDExMS44OSAyNC45NCBMMTMwLjU5IDUuODUgTDEzNC41MCAzMi4yOCBMMTU4LjE5IDE5LjkxIEwxNTMuNzQgNDYuMjYgTDE4MC4wOSA0MS44MSBMMTY3LjcyIDY1LjUwIEwxOTQuMTUgNjkuNDEgTDE3NS4wNiA4OC4xMSBMMTk5LjAwIDEwMC4wMCBMMTc1LjA2IDExMS44OSBMMTk0LjE1IDEzMC41OSBMMTY3LjcyIDEzNC41MCBMMTgwLjA5IDE1OC4xOSBMMTUzLjc0IDE1My43NCBMMTU4LjE5IDE4MC4wOSBMMTM0LjUwIDE2Ny43MiBMMTMwLjU5IDE5NC4xNSBMMTExLjg5IDE3NS4wNiBMMTAwLjAwIDE5OS4wMCBMODguMTEgMTc1LjA2IEw2OS40MSAxOTQuMTUgTDY1LjUwIDE2Ny43MiBMNDEuODEgMTgwLjA5IEw0Ni4yNiAxNTMuNzQgTDE5LjkxIDE1OC4xOSBMMzIuMjggMTM0LjUwIEw1Ljg1IDEzMC41OSBMMjQuOTQgMTExLjg5IEwxLjAwIDEwMC4wMCBMMjQuOTQgODguMTEgTDUuODUgNjkuNDEgTDMyLjI4IDY1LjUwIEwxOS45MSA0MS44MSBMNDYuMjYgNDYuMjYgTDQxLjgxIDE5LjkxIEw2NS41MCAzMi4yOCBMNjkuNDEgNS44NSBMODguMTEgMjQuOTQgWiIvPjwvc3ZnPg==");
  --logo-ar:2.803;
  --pig-ar:0.734;
}

/* ========================================================================
   VOM HOF BIS IN UNSERE THEKE  (/vom-hof, /hof/<schluessel>)
   ------------------------------------------------------------------------
   Eigene Seite, eigener Abschnitt. Die Bausteine der Startseite (.frame,
   .media, .media__ph, .btn, .kicker, .sec-head) werden mitbenutzt und hier
   nur ergaenzt – die Seite soll aussehen wie der Rest des Hauses und nicht
   wie ein Anbau.
   ======================================================================== */

/* Zwei Bildformate, die es vorher nicht gab. .media selbst bringt keine
   Hoehe mit; ohne Seitenverhaeltnis bliebe der Rahmen ein Strich, solange
   das Foto fehlt – und genau der Fall ist hier der Normalfall, bis die
   Fotos vom Metzger da sind. */
.media--hoch{aspect-ratio:4/5}
.media--breit{aspect-ratio:4/3}

/* Weinroter Umriss auf hellem Grund. .btn--outline gibt es schon, der ist
   aber fuer dunkle Flaechen gemacht (cremefarbene Kante). */
.btn--leer{background:transparent;color:var(--wine);border-color:var(--wine);box-shadow:none}
.btn--leer:hover{background:var(--wine);color:var(--cream)}
.btn--klein{padding:11px 18px;font-size:.74rem}

/* ---------- 2. Karte ---------- */
.karten-sek{background:var(--cream);padding:clamp(66px,9vw,110px) 0;border-top:2px solid var(--wine)}
.karten-sek__leer,.hoefe__leer{max-width:56ch;margin:0 auto;text-align:center;color:var(--ink-soft)}

.hofkarte{position:relative;max-width:780px;margin:0 auto}

/* Der Rahmen traegt die Polsterung und die doppelte Linie – dieselbe Optik
   wie .frame, nur ohne die Drehung. */
.hofkarte__rahmen{position:relative;background:var(--paper);padding:9px;
  box-shadow:0 26px 54px -30px rgba(76,14,23,.55)}
.hofkarte__rahmen::after{content:"";position:absolute;inset:0;border:2px solid var(--wine);pointer-events:none;z-index:9}
.hofkarte__rahmen::before{content:"";position:absolute;inset:5px;border:1px solid var(--wine);pointer-events:none;z-index:9}

/* Das nackte Kartenblatt – OHNE Polsterung, und genau darauf kommt es an:
   Prozentangaben eines absolut gesetzten Kindes beziehen sich auf den Kasten
   samt Polsterung. Steckte die Polsterung hier, saesse jede Marke daneben,
   und zwar je nach Fensterbreite unterschiedlich weit.
   Das Seitenverhaeltnis steht als Stilangabe im HTML und kommt aus den
   erzeugten Kartendaten – so bleibt es richtig, auch wenn bin/karte-bauen.py
   einmal einen anderen Ausschnitt liefert. */
.hofkarte__blatt{position:relative}
.hofkarte__grund{width:100%;height:100%;display:block;object-fit:contain}

/* Alles Bewegliche liegt UEBER der Grundkarte und rechnet in Prozent
   desselben Kastens, auf dem auch die Karte liegt. */
.hofkarte__umkreis,.hofkarte__umkreis-txt,.hofkarte__ort,.hofkarte__wir,
.hofmarke,.hofinfo{position:absolute}

.hofkarte__umkreis{transform:translate(-50%,-50%);border:1.5px dashed rgba(109,22,34,.5);
  border-radius:50%;pointer-events:none;z-index:2}
.hofkarte__umkreis-txt{transform:translate(-50%,-50%);font-family:var(--sans);font-size:.62rem;
  font-weight:700;letter-spacing:.06em;color:var(--wine);background:var(--paper);
  padding:1px 6px;border-radius:100px;white-space:nowrap;pointer-events:none;z-index:3}

/* Der helle Saum um die Beschriftung ist kein Schmuck: die Namen liegen auf
   Flaechen, deren Farbe zwischen Papier und Sandbraun wechselt, und
   stellenweise unter einer Hofmarke. Ohne ihn verschwinden einzelne
   Buchstaben. Vier Schatten statt einer Kontur – text-stroke gibt es nur mit
   Herstellerpraefix und legt den Strich nach innen, was die Schrift bei
   dieser Groesse zuschmiert. */
.hofkarte__ort{font-family:var(--display);font-size:.66rem;font-weight:600;color:#6b5437;
  white-space:nowrap;pointer-events:none;z-index:3;transform:translateY(-50%);
  text-shadow:0 1px 0 rgba(245,237,218,.9),0 -1px 0 rgba(245,237,218,.9),
    1px 0 0 rgba(245,237,218,.9),-1px 0 0 rgba(245,237,218,.9)}
.hofkarte__ort.is-stadt{font-size:.78rem;font-weight:700;color:#513d24}
.hofkarte__ort--rechts{padding-left:9px}
.hofkarte__ort--links{transform:translate(-100%,-50%);padding-right:9px}

/* Der Laden. PUNKT und BESCHRIFTUNG liegen mit Absicht auf verschiedenen
   Ebenen: der Punkt UNTER den Hofmarken (die sind das Anklickbare, sie
   dürfen ihn verdecken), die Beschriftung DARÜBER. Sie benennt den Ort, um
   den sich die ganze Karte dreht; verschwände sie hinter einer Marke, wäre
   die Karte ohne Anker.
   Damit das geht, darf .hofkarte__wir selbst KEIN z-index tragen – sonst
   macht es einen eigenen Stapelzusammenhang auf und seine Kinder kämen
   darüber nicht hinaus. */
.hofkarte__wir{transform:translate(-50%,-50%);display:flex;flex-direction:column;
  align-items:center;pointer-events:none}
.hofkarte__wir-punkt{position:relative;z-index:4;width:16px;height:16px;border-radius:50%;
  background:var(--wine);border:3px solid var(--paper);box-shadow:0 2px 8px rgba(0,0,0,.35)}
.hofkarte__wir-txt{position:relative;z-index:6;margin-top:4px;font-family:var(--sans);
  font-size:.62rem;line-height:1.2;text-align:center;color:var(--wine);
  background:rgba(245,237,218,.94);padding:2px 7px;border-radius:3px;white-space:nowrap;
  box-shadow:0 0 0 1px rgba(109,22,34,.15)}
.hofkarte__wir-txt b{font-size:.7rem}

/* ---------- Die Hofmarken ---------- */
/* Ein echter <button> und kein SVG-Element: anklickbar, antippbar, mit der
   Tabulatortaste erreichbar und gross genug fuer eine Fingerkuppe. Die
   Begruendung steht ausfuehrlich in lib/hof/Karte.php. */
.hofmarke{transform:translate(-50%,-50%);z-index:5;width:34px;height:34px;padding:0;
  border:3px solid var(--paper);border-radius:50%;background:var(--wine);color:var(--cream);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.4);
  transition:transform .18s cubic-bezier(.2,.7,.2,1),background .18s}
/* Die Trefferflaeche ist groesser als die Marke. Sichtbar bleibt sie klein,
   damit auf einer Karte mit einem Dutzend Hoefen nicht alles voreinander
   liegt; anzutippen ist sie trotzdem mit einer Fingerkuppe. Gewachsen waere
   die Marke selbst, verdeckte sie die Ortsnamen darunter. */
.hofmarke::after{content:"";position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px;
  border-radius:50%}
.hofmarke:hover{background:var(--wine-2);transform:translate(-50%,-50%) scale(1.12)}
.hofmarke[aria-expanded="true"]{background:var(--wine-deep);transform:translate(-50%,-50%) scale(1.12);z-index:7}
.hofmarke:focus-visible{outline:3px solid var(--wine-deep);outline-offset:3px}
.hofmarke__ico{width:22px;height:22px;display:block}
.hofmarke__ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.hofmarke--rind{background:#7d4a17}
.hofmarke--rind:hover{background:#96591c}
.hofmarke--schaf{background:#4f5c3a}
.hofmarke--schaf:hover{background:#62704a}

/* ---------- Die Infokarte an der Marke ---------- */
.hofinfo{z-index:8;width:248px;background:var(--paper);border:2px solid var(--wine);
  padding:14px 16px 16px;box-shadow:0 22px 44px -18px rgba(76,14,23,.7);text-align:left}
.hofinfo[hidden]{display:none}
.hofinfo--oben{transform:translate(-50%,calc(-100% - 26px))}
.hofinfo--unten{transform:translate(-50%,26px)}
/* Am linken und rechten Rand wandert der Anker mit, sonst haengt die Karte
   halb ausserhalb des Blattes. Welche Seite gilt, steht schon beim Zeichnen
   fest (siehe partials/vom-hof-seite.php) – so springt nichts nach dem
   Oeffnen. */
.hofinfo--anker-links.hofinfo--oben{transform:translate(-28px,calc(-100% - 26px))}
.hofinfo--anker-links.hofinfo--unten{transform:translate(-28px,26px)}
.hofinfo--anker-rechts.hofinfo--oben{transform:translate(calc(-100% + 28px),calc(-100% - 26px))}
.hofinfo--anker-rechts.hofinfo--unten{transform:translate(calc(-100% + 28px),26px)}

.hofinfo__zu{position:absolute;top:2px;right:4px;width:30px;height:30px;border:0;background:none;
  font-size:1.5rem;line-height:1;color:var(--wine);opacity:.65}
.hofinfo__zu:hover{opacity:1}
.hofinfo__bild{margin:-14px -16px 12px;aspect-ratio:16/10;overflow:hidden;background:var(--wine-deep)}
.hofinfo__bild img{width:100%;height:100%;object-fit:cover;display:block}
.hofinfo__name{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;
  font-size:1.02rem;color:var(--wine);padding-right:24px;margin-bottom:8px}
.hofinfo__ico{flex:none;width:22px;height:22px}
.hofinfo__ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.hofinfo__daten{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:.84rem;margin:0 0 12px}
.hofinfo__daten dt{color:var(--muted);font-weight:700}
.hofinfo__daten dd{margin:0;color:var(--ink-soft)}

.hofkarte__hinweis{margin-top:16px;font-size:.78rem;line-height:1.55;color:var(--muted);
  max-width:62ch;margin-inline:auto;text-align:center}
.hofkarte__hinweis strong{color:var(--wine)}

/* ========================================================================
   WECHSELBLOCK – Text und Bild, seitenweise abwechselnd
   ------------------------------------------------------------------------
   Das Gerüst der beiden Unterseiten: ein Abschnitt, zwei Spalten, mal das
   Bild links, mal rechts. "Vom Hof" benutzt ihn für Schweine und Rinder,
   "Unser Handwerk" für alle acht Abschnitte.

   IM QUELLTEXT STEHT IMMER ZUERST DER TEXT, DANN DAS BILD.
   Gedreht wird ausschliesslich mit 'order' und nur, solange zwei Spalten
   nebeneinander passen. Der Grund ist das Telefon: dort soll überall zuerst
   die Überschrift mit ihrem Text stehen und darunter das Foto. Stünde das
   Bild bei jedem zweiten Abschnitt schon im Quelltext vorn, müsste es in
   der schmalen Ansicht wieder zurückgeschoben werden – und wer mit der
   Tabulatortaste oder einem Screenreader durchgeht, bekäme die Abschnitte
   in einer Reihenfolge, die niemand so geschrieben hat.
   ======================================================================== */
.wechsel{background:var(--paper);padding:clamp(60px,8vw,104px) 0}
.wechsel--creme{background:var(--cream)}
.wechsel__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center}
.wechsel--bild-links .wechsel__body{order:2}
.wechsel--bild-links .wechsel__media{order:1}
/* Das Teamfoto darf grösser sein als die übrigen – es zeigt vierzehn
   Menschen, in einer halben Spalte wäre davon niemand zu erkennen. */
.wechsel--gross .wechsel__grid{grid-template-columns:1.28fr .72fr}

/* Der erste Block einer Seite trägt die Hauptüberschrift und muss unter der
   fest stehenden Kopfleiste beginnen. */
.wechsel--kopf{padding-top:calc(var(--head-h) + clamp(48px,7vw,86px))}
.wechsel__body h1{font-size:clamp(2.3rem,5vw,3.6rem);color:var(--wine);margin-bottom:14px}
.wechsel__body h1 .script{font-family:var(--script);font-weight:700;font-size:1.12em;
  line-height:.9;display:inline-block}
.wechsel__lead{font-family:var(--script);font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1;color:var(--wine-2);transform:rotate(-1.4deg);margin-bottom:22px}
.wechsel__body h2{font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--wine);margin-bottom:18px;max-width:20ch}
.wechsel__body p{color:var(--ink-soft);margin-bottom:16px;max-width:54ch}
.wechsel__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* Die Unterschrift von Christian Trenz unter den Abschnitten, die er selbst
   in der Ich-Form erzählt. Als Maske und nicht als <img>, damit sie die
   Markenfarbe annimmt – dasselbe Verfahren wie beim Logo. */
.signatur{display:block;width:clamp(150px,20vw,210px);aspect-ratio:339.7/72.23;
  margin:26px 0 0;background:var(--wine);opacity:.85;
  -webkit-mask:url("/assets/unterschrift.svg") left center/contain no-repeat;
  mask:url("/assets/unterschrift.svg") left center/contain no-repeat}
.signatur__txt{margin-top:8px;font-size:.84rem;color:var(--muted)}
.wechsel__media{position:relative}
.wechsel__media .frame{box-shadow:0 26px 50px -30px rgba(76,14,23,.55)}
/* Zweites, kleineres Bild, das über die Ecke des ersten ragt. */
.wechsel__media-klein{position:absolute;right:-4%;bottom:-13%;width:46%;z-index:4}
.wechsel__media-klein .media{aspect-ratio:1/1}

/* ---------- 5. Hofkacheln ---------- */
.hoefe{background:var(--paper);padding:clamp(66px,9vw,110px) 0;border-top:2px solid var(--wine)}
.hoefe__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hofkachel{position:relative;display:flex;flex-direction:column;background:var(--cream);
  border:2px solid var(--wine);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
a.hofkachel:hover{transform:translateY(-5px);box-shadow:0 26px 46px -28px rgba(76,14,23,.5)}
.hofkachel--still{opacity:.94}
.hofkachel__bild{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--wine-deep)}
.hofkachel__bild img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2}
.hofkachel__bild img.is-missing{display:none}
.hofkachel__text{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.hofkachel__text h3{font-size:1.2rem;color:var(--wine);margin-bottom:4px}
.hofkachel__ort{font-size:.85rem;color:var(--muted);margin-bottom:10px}
.hofkachel__ort::before{content:"";display:inline-block;width:11px;height:14px;margin-right:6px;
  vertical-align:-2px;background:var(--wine);opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0a12 12 0 0 1 12 12c0 9-12 20-12 20S0 21 0 12A12 12 0 0 1 12 0zm0 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0a12 12 0 0 1 12 12c0 9-12 20-12 20S0 21 0 12A12 12 0 0 1 12 0zm0 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10z'/%3E%3C/svg%3E") center/contain no-repeat}
.hofkachel__art{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;
  font-size:.95rem;color:var(--ink)}
.hofkachel__ico{flex:none;width:22px;height:22px;color:var(--wine)}
.hofkachel__ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.hofkachel__note{font-size:.88rem;color:var(--ink-soft);margin-top:4px}
.hofkachel__mehr{margin-top:auto;padding-top:14px;font-family:var(--sans);font-size:.76rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--wine)}
.hofkachel__mehr::after{content:" →"}

/* ---------- 6. Uebergang ---------- */
.weiter{background:var(--wine);color:var(--cream);padding:clamp(60px,8vw,96px) 0;position:relative;overflow:hidden}
.weiter::before{content:"";position:absolute;right:-30px;bottom:-40px;width:240px;
  aspect-ratio:var(--pig-ar);background:var(--cream);opacity:.07;
  -webkit-mask:url("/assets/pig.svg") center/contain no-repeat;mask:url("/assets/pig.svg") center/contain no-repeat}
.weiter__inner{position:relative;max-width:62ch;text-align:center;margin-inline:auto}
.weiter h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:16px}
.weiter p{color:rgba(236,224,198,.86);margin-bottom:26px}

/* ---------- Detailseite eines Hofes ---------- */
.hofseite{background:var(--paper);padding:calc(var(--head-h) + clamp(30px,4vw,54px)) 0 clamp(64px,9vw,104px)}
.krume{font-size:.8rem;color:var(--muted);margin-bottom:clamp(24px,3vw,40px);display:flex;
  flex-wrap:wrap;align-items:center;gap:8px}
.krume a{color:var(--wine);text-decoration:underline;text-underline-offset:2px}
.hofseite__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,6vw,86px);align-items:center}
.hofseite__media{position:relative}
.hofseite__media .frame{box-shadow:0 26px 50px -30px rgba(76,14,23,.55)}
.hofseite__media-klein{position:absolute;right:-6%;bottom:-11%;width:52%;z-index:4}
.hofseite__media-klein .media{aspect-ratio:1/1}
.hofseite__body h1{font-size:clamp(2rem,4vw,3rem);color:var(--wine);margin-bottom:10px}
.hofseite__ort{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;
  color:var(--ink);margin-bottom:22px}
.hofseite__ico{flex:none;width:26px;height:26px;color:var(--wine)}
.hofseite__ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.hofseite__body p{color:var(--ink-soft);margin-bottom:16px;max-width:56ch}
.hofseite__daten{margin:28px 0 0;display:grid;gap:0;max-width:44ch}
.hofseite__daten > div{display:flex;gap:16px;padding:12px 2px}
.hofseite__daten > div + div{border-top:1px dashed rgba(109,22,34,.3)}
.hofseite__daten dt{flex:none;width:11ch;color:var(--muted);font-weight:700;font-size:.9rem}
.hofseite__daten dd{margin:0;color:var(--ink);font-family:var(--display);font-weight:700;font-size:.98rem}
.hofseite__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ---------- Schmalere Fenster ---------- */
@media (max-width:1040px){
  .wechsel__grid,.hofseite__grid{grid-template-columns:1fr;gap:clamp(48px,7vw,70px)}
  .wechsel--gross .wechsel__grid{grid-template-columns:1fr}
  .wechsel__media,.hofseite__media{max-width:520px;margin:0 auto;width:100%}
  /* Eine Spalte heisst: erst die Überschrift mit ihrem Text, dann das Foto.
     Die Drehung von oben wird dafür zurückgenommen – und zwar für JEDEN
     Abschnitt gleich, damit beim Blättern keiner aus der Reihe tanzt. */
  .wechsel--bild-links .wechsel__body,.wechsel--bild-links .wechsel__media{order:0}
  /* Das Teamfoto darf auch in einer Spalte breiter stehen als die anderen –
     vierzehn Gesichter brauchen den Platz. */
  .wechsel--gross .wechsel__media{max-width:640px}
  .hoefe__raster{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  /* Auf dem Telefon wird aus der Sprechblase an der Marke ein Blatt am
     unteren Rand. Eine 248 Punkte breite Karte irgendwo mitten auf einer
     320 Punkte breiten Landkarte trifft sonst immer den Rand – und der
     Daumen verdeckt genau die Stelle, die er gerade angetippt hat. */
  .hofinfo{position:fixed;left:10px;right:10px;bottom:10px;top:auto;
    width:auto;margin:0;transform:none!important;z-index:1100;
    max-height:78vh;overflow-y:auto;
    box-shadow:0 -10px 60px rgba(31,6,10,.55)}
  .hofinfo__zu{width:38px;height:38px;font-size:1.8rem}
  /* Auf halber Kartenbreite haben zwoelf Ortsnamen keinen Platz mehr –
     "Hersbruck" und "Sulzbach-Rosenberg" lagen vollstaendig uebereinander.
     Welche fuenf bleiben, entscheidet bin/karte-bauen.py: die Auswahl haengt
     an den Koordinaten und gehoert deshalb neben den Kartenausschnitt. */
  .hofkarte__ort.is-weit{display:none}
  .hofkarte__ort{font-size:.58rem}
  .hofkarte__ort.is-stadt{font-size:.66rem}
  .hofkarte__wir-txt{font-size:.56rem}
  .hofkarte__wir-txt b{font-size:.62rem}
  .hofmarke{width:32px;height:32px;border-width:2px}
  .hofmarke::after{top:-9px;right:-9px;bottom:-9px;left:-9px}
  .hofmarke__ico{width:19px;height:19px}
}
@media (max-width:600px){
  .hoefe__raster{grid-template-columns:1fr}
  .wechsel__media-klein,.hofseite__media-klein{position:static;width:100%;margin-top:18px;transform:none}
  .wechsel__media-klein .media,.hofseite__media-klein .media{aspect-ratio:16/10}
  .wechsel__actions .btn,.hofseite__actions .btn{width:100%}
}