/* =================================================================
   Wein & Tee bei E. – Website nach Entwurf 1 „Tageszeiten“
   Gemeinsames Stylesheet für alle Seiten.
   Quelle: demo-quelle/stil.css – gebaut mit werkzeuge/demo_bauen.py
   Feinschliff 13.10.2026: Tageslauf, Tagesleiste, Präsente, Bewegung,
   Kontrast (Grau und Rot auf dunklem Grund nachgemessen, WCAG AA).
   ================================================================= */

/* Schriften: Fontshare (Indian Type Foundry), lokal eingebunden.
   Kein Google-CDN – dadurch kein Datenabfluss beim Seitenaufruf. */
@font-face{font-family:"Zodiak";src:url("schriften/Zodiak-Variable.woff2") format("woff2");
  font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Zodiak";src:url("schriften/Zodiak-VariableItalic.woff2") format("woff2");
  font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"Switzer";src:url("schriften/Switzer-Variable.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* Alles aus der Logofarbe #CD3F4F abgeleitet */
  --rot:#CD3F4F; --rot-tief:#93222F; --rot-dunkel:#5A1A22;
  --rot-hell:#E0726F;           /* kleine Schrift auf dunklem Grund: 5,7 : 1 */
  --nacht:#211719; --nacht-tief:#160F10; --nacht-hoch:#2E2023;
  --papier:#F2ECE5; --papier-warm:#E5DBD1; --papier-hell:#F8F4EF;
  --tinte:#251C1C; --grau:#6B5A56; --grau-hell:#C3B4AE;
  /* --grau war #786763: auf --papier-warm nur 3,9 : 1 – jetzt 4,8 : 1 */
  --sand:#B99B72;
  --gruen:#4F7A52;

  --spalte:1220px;
  --rand:clamp(1.25rem,5vw,4rem);
  --kopf-hoehe:78px;

  /* Bewegung: weich auslaufend, nie das eingebaute „ease“ */
  --aus:cubic-bezier(.22,1,.36,1);
  --wechsel:cubic-bezier(.45,0,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-hoehe) + 1rem)}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:"Switzer","Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:"Zodiak",Georgia,serif;font-weight:400;text-wrap:balance}
p{margin:0;text-wrap:pretty}
figure{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.rahmen{max-width:var(--spalte);margin-inline:auto;padding-inline:var(--rand)}
.marke-zeile{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--rot-tief);margin:0}
.dunkel .marke-zeile,.tief .marke-zeile{color:var(--rot-hell)}
.leise{color:var(--grau)}
.dunkel .leise{color:var(--grau-hell)}

.springen{position:absolute;left:-999px;top:0;z-index:100;background:var(--nacht);color:var(--papier);padding:.7rem 1rem}
.springen:focus{left:1rem;top:1rem}

/* ---------- Kopf ---------- */
.kopf{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--papier) 90%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid color-mix(in srgb,var(--tinte) 10%,transparent);
  transition:background-color .5s var(--wechsel),color .5s var(--wechsel),border-color .5s var(--wechsel);
}
/* Über dunklen Abschnitten fast deckend – sonst schimmert oben am Seitenanfang
   der helle Seitengrund durch und der Kopf wirkt grau statt nachtfarben. */
.kopf.auf-dunkel,body.abend .kopf{
  background:color-mix(in srgb,var(--nacht) 95%,transparent);color:var(--papier);
  border-bottom-color:color-mix(in srgb,var(--papier) 12%,transparent);
}
.kopf.auf-dunkel .logo,body.abend .kopf .logo{filter:brightness(0) invert(1)}
.kopf-innen{display:flex;align-items:center;gap:2rem;min-height:var(--kopf-hoehe)}
.logo-verweis{margin-right:auto;display:block;line-height:0}
.logo{width:216px;height:auto;transition:filter .5s var(--wechsel)}
.nav{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;font-size:.93rem}
.nav a{text-decoration:none;padding-block:.4rem;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:.1rem;height:1px;background:var(--rot);
  transition:right .35s var(--aus)}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{font-weight:600}
.kopf-tel{font-size:.88rem;white-space:nowrap;opacity:.78;text-decoration:none;transition:opacity .2s var(--aus)}
.kopf-tel:hover{opacity:1}
.menue-knopf{display:none}
.nav .nav-tel{display:none}

/* ---------- Knöpfe ---------- */
.knopfreihe{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-top:2.2rem}
.knopf{
  display:inline-flex;align-items:center;gap:.55rem;padding:.95rem 1.5rem;cursor:pointer;
  text-decoration:none;font:inherit;font-size:.93rem;font-weight:500;letter-spacing:.005em;white-space:nowrap;
  background:var(--rot-tief);color:var(--papier);border:1px solid var(--rot-tief);
  transition:background-color .25s var(--aus),border-color .25s var(--aus),color .25s var(--aus),transform .12s var(--aus);
}
.knopf:hover{background:var(--nacht);border-color:var(--nacht)}
.knopf:active{transform:translateY(1px)}
.knopf--leer{background:transparent;color:var(--tinte);border-color:color-mix(in srgb,var(--tinte) 30%,transparent)}
.knopf--leer:hover{background:var(--tinte);color:var(--papier);border-color:var(--tinte)}
.knopf--hell{background:var(--papier);color:var(--nacht);border-color:var(--papier)}
.knopf--hell:hover{background:var(--rot);border-color:var(--rot);color:var(--papier)}
.dunkel .knopf--leer,.tief .knopf--leer{color:var(--papier);border-color:color-mix(in srgb,var(--papier) 34%,transparent)}
.dunkel .knopf--leer:hover,.tief .knopf--leer:hover{background:var(--papier);color:var(--nacht);border-color:var(--papier)}
.pfeil{color:var(--rot-tief);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
  font-size:.95rem;font-weight:500;transition:text-decoration-thickness .2s var(--aus),text-underline-offset .2s var(--aus)}
.pfeil::after{content:" →"}
a.pfeil:hover,a:hover > .pfeil,a:hover .pfeil{text-decoration-thickness:2px;text-underline-offset:6px}
.dunkel .pfeil,.tief .pfeil{color:var(--rot-hell)}

/* ---------- Bilder ---------- */
.bild{position:relative;overflow:hidden;background:var(--papier-warm)}
.dunkel .bild,.tief .bild{background:var(--nacht-hoch)}
.bild img{width:100%;height:100%;object-fit:cover}
.bild figcaption{
  position:absolute;left:0;bottom:0;background:color-mix(in srgb,var(--nacht) 80%,transparent);
  color:var(--papier);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:.45rem .7rem;
}
.f-5x6{aspect-ratio:5/6}.f-4x3{aspect-ratio:4/3}.f-3x4{aspect-ratio:3/4}.f-1x1{aspect-ratio:1/1}
.f-16x9{aspect-ratio:16/9}.f-21x9{aspect-ratio:21/9}.f-3x2{aspect-ratio:3/2}.f-4x5{aspect-ratio:4/5}

/* ---------- Hero (Startseite) ---------- */
.hero{padding-block:clamp(2.5rem,5.5vw,4.5rem) 0;position:relative}
.hero-gitter{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.5rem);line-height:1.02;letter-spacing:-.022em;margin:1.4rem 0 0}
.hero h1 em,.seitenkopf h1 em{font-style:italic;color:var(--rot-tief)}
.dunkel .seitenkopf h1 em,.seitenkopf.dunkel h1 em{color:var(--rot)}
.hero-text{max-width:36ch;margin-top:1.5rem;color:var(--grau);font-size:1.08rem}

/* Zwei Bilder, zwei Tageszeiten: groß der Morgen, unten links davor der Abend */
.hero-paar{position:relative;padding-bottom:clamp(1rem,3vw,2.5rem)}
.hero-paar figure{display:flex;flex-direction:column;background:none;overflow:visible}
.hero-paar img{height:auto}
.hero-morgen{width:84%;margin-left:auto}
.hero-morgen img{aspect-ratio:10/11;object-position:36% 60%}
.hero-morgen .zeitmarke{justify-content:flex-end}
.hero-abend{position:absolute;left:0;bottom:0;width:39%}
.hero-abend img{aspect-ratio:3/4;object-position:50% 38%;box-shadow:0 0 0 clamp(5px,.7vw,9px) var(--papier)}
.hero-paar .zeitmarke{position:static;background:none;padding:0;text-transform:none;letter-spacing:0;
  display:flex;align-items:baseline;gap:.5rem;margin-top:.8rem;font-size:.84rem;color:var(--grau)}
.zeitmarke span{font-family:"Zodiak",Georgia,serif;font-style:italic;font-size:1.15rem;color:var(--tinte)}
.zeitmarke::before{content:"";width:.6rem;height:.6rem;border-radius:50%;flex:none;align-self:center;
  border:1.5px solid var(--sand);background:var(--papier-hell)}
.hero-abend .zeitmarke::before{background:var(--nacht);border-color:var(--nacht)}

/* ---------- Statusband ---------- */
.band{margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid color-mix(in srgb,var(--tinte) 14%,transparent);
      border-bottom:1px solid color-mix(in srgb,var(--tinte) 14%,transparent)}
.band-innen{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.6rem;padding-block:1.05rem}
.status{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;font-size:.95rem}
.punkt{width:.5rem;height:.5rem;border-radius:50%;background:var(--gruen);flex:none}
.punkt.zu{background:var(--rot)}
.band small{font-size:.88rem;color:var(--grau)}
.band .mehr{margin-left:auto;font-size:.9rem;color:var(--rot-tief);text-underline-offset:4px;white-space:nowrap}
.saison{display:none;font-size:.8rem;font-weight:600;color:var(--rot-tief);
        padding:.28rem .65rem;border:1px solid color-mix(in srgb,var(--rot-tief) 35%,transparent)}
.saison.an{display:inline-block}
.dunkel .saison{color:var(--rot-hell);border-color:color-mix(in srgb,var(--rot-hell) 45%,transparent)}
.dunkel .band{border-color:color-mix(in srgb,var(--papier) 18%,transparent)}
.dunkel .band small{color:var(--grau-hell)}

/* Dunkle Seite (Wein): kein heller Streifen zwischen den Abschnitten */
body.abend,body.dunkler-start{background:var(--nacht)}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf{padding-block:clamp(2.2rem,5vw,4rem) clamp(3rem,6vw,5rem)}
.seitenkopf-gitter{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.seitenkopf h1{font-size:clamp(2.3rem,5.2vw,4.1rem);line-height:1.04;letter-spacing:-.02em;margin:1.3rem 0 0}
.seitenkopf .einleitung{max-width:44ch;margin-top:1.4rem;color:var(--grau);font-size:1.07rem}
.seitenkopf.dunkel .einleitung{color:var(--grau-hell)}
.seitenkopf .bild{aspect-ratio:5/6;max-height:calc(100svh - var(--kopf-hoehe) - 6rem);min-height:320px}
.seitenkopf--schmal .seitenkopf-gitter{grid-template-columns:1fr}
.seitenkopf--schmal h1{max-width:18ch}
.brotkrume{font-size:.82rem;color:var(--grau);margin-bottom:1.1rem}
.dunkel .brotkrume{color:var(--grau-hell)}
.brotkrume a{text-underline-offset:3px}

/* Tagesleiste: wo im Tag die Seite steht – Morgen, Mittag, Abend */
.tagesleiste{display:flex;align-items:center;gap:0;margin:0 0 .2rem;font-size:.78rem;letter-spacing:.06em;max-width:30rem}
.tagesleiste a{display:inline-flex;align-items:center;gap:0;text-decoration:none;color:var(--grau);white-space:nowrap;
  padding:.35rem 0;transition:color .2s var(--aus)}
.tagesleiste a + a::before{content:"";display:block;width:clamp(1rem,3vw,2.2rem);height:1px;margin-inline:.7rem;
  background:color-mix(in srgb,currentColor 40%,transparent)}
.tagesleiste a:hover{color:var(--tinte)}
.tagesleiste a[aria-current="page"]{color:var(--rot-tief);font-weight:600}
.dunkel .tagesleiste a{color:var(--grau-hell)}
.dunkel .tagesleiste a:hover{color:var(--papier)}
.dunkel .tagesleiste a[aria-current="page"]{color:var(--rot-hell)}
.sonne{width:.62rem;height:.62rem;border-radius:50%;flex:none;border:1.5px solid currentColor}
.tagesleiste .sonne{margin-right:.5rem}
.sonne--morgen{background:transparent}
.sonne--mittag{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.sonne--abend{background:currentColor}

/* ---------- Abschnitte ---------- */
.abschnitt{padding-block:clamp(4rem,8vw,7rem)}
.abschnitt--knapp{padding-block:clamp(2.6rem,5vw,4rem)}
.ohne-oben{padding-top:0}
.warm{background:var(--papier-warm)}
.hell{background:var(--papier-hell)}
.dunkel{background:var(--nacht);color:var(--papier)}
.tief{background:var(--nacht-tief);color:var(--papier)}
.kopfzeile{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:1.4rem 4rem;align-items:end;
           margin-bottom:clamp(2.2rem,4.5vw,3.5rem)}
.kopfzeile h2{font-size:clamp(1.95rem,4.2vw,3.2rem);line-height:1.07;letter-spacing:-.015em}
.kopfzeile .marke-zeile + h2{margin-top:1rem}
.kopfzeile h2 em,.zeile h2 em,.praesent h2 em,.service-gitter h2 em,.besuch h2 em,.herkunft-kopf h2 em{font-style:italic;color:var(--rot-tief)}
.dunkel .kopfzeile h2 em,.tief .kopfzeile h2 em,.dunkel .zeile h2 em,.tief .zeile h2 em,.dunkel h2 em{color:var(--rot)}
.kopfzeile p{color:var(--grau);max-width:50ch}
.dunkel .kopfzeile p,.tief .kopfzeile p{color:var(--grau-hell)}
/* Gestapelt statt zweispaltig: Überschrift, darunter der Satz – bricht das ewige Links-rechts */
.kopfzeile--gestapelt{grid-template-columns:minmax(0,52rem);gap:1.1rem}
.kopfzeile--gestapelt p{max-width:56ch;font-size:1.05rem}

/* ---------- Tageslauf (Startseite) ---------- */
.tageslauf{background:var(--papier)}
.tagesachse{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.8rem);
  margin-bottom:1.1rem;height:.7rem}
.tagesachse::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,var(--sand),color-mix(in srgb,var(--sand) 60%,var(--nacht)),var(--nacht))}
.tagesachse span{position:relative;display:block}
.tagesachse .sonne{position:absolute;left:0;top:0;width:.7rem;height:.7rem;background-color:var(--papier)}
.tagesachse span:nth-child(1) .sonne{color:var(--sand)}
.tagesachse span:nth-child(2) .sonne{color:color-mix(in srgb,var(--sand) 55%,var(--nacht));
  background:linear-gradient(90deg,currentColor 50%,var(--papier) 50%)}
.tagesachse span:nth-child(3) .sonne{color:var(--nacht);background:var(--nacht)}

.stationen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.8rem)}
.station{display:flex;flex-direction:column;text-decoration:none;background:var(--papier-hell);
  transition:transform .45s var(--aus),box-shadow .45s var(--aus)}
.station--mittag{background:var(--papier-warm)}
.station--abend{background:var(--nacht);color:var(--papier)}
.station .bild{aspect-ratio:4/5;background:none}
.station .bild img{transition:transform 1s var(--aus)}
.station:hover .bild img{transform:scale(1.035)}
.station:hover{box-shadow:0 18px 40px -24px color-mix(in srgb,var(--nacht) 55%,transparent)}
.station-text{display:flex;flex-direction:column;flex:1;padding:clamp(1.2rem,2.2vw,1.7rem) clamp(1.2rem,2.2vw,1.7rem) clamp(1.4rem,2.4vw,1.9rem)}
.station .zeit{font-family:"Zodiak",Georgia,serif;font-style:italic;font-size:1.05rem;color:var(--rot-tief)}
.station--abend .zeit{color:var(--rot-hell)}
.station h3{font-size:clamp(1.5rem,2.3vw,1.85rem);line-height:1.12;margin:.3rem 0 .6rem}
.station p{color:var(--grau);font-size:.97rem}
.station p.zeit{color:var(--rot-tief)}
.station--abend p{color:var(--grau-hell)}
.station--abend p.zeit{color:var(--rot-hell)}
.station .pfeil{margin-top:auto;padding-top:1.1rem;align-self:flex-start}
.station--abend .pfeil{color:var(--rot-hell)}

/* ---------- Präsente ---------- */
.praesent-gitter{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
.praesent-bild{aspect-ratio:4/5}
.praesent-bild img{object-position:50% 45%}
.praesent-bild.fokus-unten img{object-position:50% 82%}
.fokus-glas img{object-position:30% 74%}
.praesent .zeichen{display:block;width:2.6rem;height:2.6rem;margin-bottom:1rem}
.praesent h2{font-size:clamp(1.9rem,3.5vw,2.75rem);line-height:1.08;letter-spacing:-.015em}
.praesent .einleitung{color:var(--grau);max-width:50ch;margin-top:1.2rem;font-size:1.04rem}
.schritte{list-style:none;margin:2rem 0 0;padding:0;counter-reset:schritt}
.schritte li{display:grid;grid-template-columns:3.2rem 1fr;gap:.2rem 1rem;padding:1.05rem 0;
  border-top:1px solid color-mix(in srgb,var(--tinte) 16%,transparent);counter-increment:schritt}
.schritte li:last-child{border-bottom:1px solid color-mix(in srgb,var(--tinte) 16%,transparent)}
.schritte li::before{content:counter(schritt,decimal-leading-zero);grid-row:span 2;
  font-family:"Zodiak",Georgia,serif;font-size:1.6rem;line-height:1.1;color:var(--rot-tief);font-variant-numeric:tabular-nums}
.schritte b{font-weight:600;font-size:1.02rem}
.schritte span{color:var(--grau);font-size:.95rem}
.dunkel .schritte li{border-color:color-mix(in srgb,var(--papier) 16%,transparent)}
.dunkel .schritte li::before{color:var(--rot-hell)}
.dunkel .schritte span{color:var(--grau-hell)}

/* ---------- Zeilen: Bild und Text im Wechsel ---------- */
.zeile{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
.zeile + .zeile{margin-top:clamp(4rem,8vw,6.5rem)}
.zeile--gedreht > :first-child{order:2}
.zeile h2{font-size:clamp(1.85rem,3.6vw,2.7rem);line-height:1.08;letter-spacing:-.012em;margin:1rem 0 1.1rem}
.zeile .text > h2:first-child{margin-top:0}
.zeile p + p{margin-top:1rem}
.zeile .text p{color:var(--grau);max-width:48ch}
.dunkel .zeile .text p,.tief .zeile .text p{color:var(--grau-hell)}
.laender{margin-top:1.2rem;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--rot-tief)}
.zeile .text p.laender{color:var(--rot-tief)}
.dunkel .laender,.tief .laender,.dunkel .zeile .text p.laender,.tief .zeile .text p.laender{color:var(--rot-hell)}
.bildpaar{display:grid;grid-template-columns:1.25fr 1fr;gap:.8rem;align-items:end}

/* Abend auf der Startseite: drei Wege tiefer in den Abend */
.abend-links{list-style:none;margin:clamp(3.5rem,7vw,5.5rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 clamp(1.5rem,3vw,2.5rem)}
.abend-links a{display:block;padding:1.2rem 0 .2rem;border-top:1px solid color-mix(in srgb,var(--papier) 20%,transparent);
  text-decoration:none;transition:border-color .3s var(--aus)}
.abend-links a:hover{border-top-color:var(--rot)}
.abend-links b{display:block;font-family:"Zodiak",Georgia,serif;font-weight:400;font-size:1.3rem;margin-bottom:.35rem}
.abend-links b::after{content:" →";color:var(--rot-hell);font-family:"Switzer",sans-serif;font-size:1rem;
  display:inline-block;transition:transform .3s var(--aus)}
.abend-links a:hover b::after{transform:translateX(4px)}
.abend-links span{color:var(--grau-hell);font-size:.94rem}

/* ---------- Tee ---------- */
.merkmale{display:flex;flex-wrap:wrap;gap:.4rem 0;margin:1.6rem 0 0;padding:0;list-style:none;
  font-size:.92rem;font-weight:500;color:var(--rot-tief)}
.merkmale li{display:inline-flex;align-items:center}
.merkmale li + li::before{content:"";width:.26rem;height:.26rem;border-radius:50%;background:currentColor;opacity:.6;margin-inline:.7rem}
.dunkel .merkmale{color:var(--rot-hell)}

.herkunft-gitter{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,5.5rem);align-items:start}
.herkunft-kopf{position:sticky;top:calc(var(--kopf-hoehe) + 2rem)}
.herkunft-kopf h2{font-size:clamp(1.95rem,4vw,3.1rem);line-height:1.07;letter-spacing:-.015em}
.herkunft-kopf p{color:var(--grau);max-width:44ch;margin-top:1.1rem}
.herkunft-kopf .bild{margin-top:2rem;aspect-ratio:4/3}
.regionen{list-style:none;margin:0;padding:0}
.region{display:grid;grid-template-columns:minmax(9rem,.8fr) minmax(0,1.4fr);gap:.4rem 2rem;padding:1.5rem 0;
  border-top:1px solid color-mix(in srgb,var(--tinte) 16%,transparent)}
.region:last-child{border-bottom:1px solid color-mix(in srgb,var(--tinte) 16%,transparent)}
.region h3{font-size:1.55rem;line-height:1.1}
.region .wo{display:block;margin-top:.4rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--rot-tief)}
.region p{color:var(--grau);font-size:.97rem}
.region--frage{background:var(--papier);border-top-color:transparent;padding:1.5rem 1.4rem;margin-top:1.4rem}
.region--frage:last-child{border-bottom:0}
.region--frage .pfeil{display:inline-block;margin-top:.6rem}

/* Zubereitung */
.zubereitung{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid color-mix(in srgb,var(--tinte) 18%,transparent)}
.zubereitung div{padding:1.4rem 1.4rem 1.4rem 0;border-right:1px solid color-mix(in srgb,var(--tinte) 12%,transparent)}
.zubereitung div + div{padding-left:1.4rem}
.zubereitung div:last-child{border-right:0}
.zubereitung b{display:block;font-family:"Zodiak",Georgia,serif;font-weight:400;font-size:1.25rem;margin-bottom:.35rem}
.zubereitung .wert{display:block;font-size:2.1rem;font-family:"Zodiak",Georgia,serif;color:var(--rot-tief);font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
.zubereitung span{display:block;font-size:.9rem;color:var(--grau);margin-top:.3rem}

/* ---------- Übergang Tag/Abend ---------- */
/* --von ist die Farbe des Abschnitts darüber, damit die Kante nicht sichtbar wird */
.uebergang{--von:var(--papier);position:relative;height:clamp(320px,46vw,560px);overflow:hidden;background:var(--nacht)}
.uebergang--von-warm{--von:var(--papier-warm)}
.uebergang img{width:100%;height:100%;object-fit:cover;opacity:.8}
.uebergang::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--von) 0%,color-mix(in srgb,var(--von) 55%,transparent) 9%,
    color-mix(in srgb,var(--nacht) 8%,transparent) 30%,color-mix(in srgb,var(--nacht) 45%,transparent) 64%,var(--nacht) 100%)}
.uebergang-text{position:absolute;left:0;right:0;bottom:clamp(2rem,5vw,3.5rem);z-index:2;color:var(--papier)}
.uebergang-text p{font-family:"Zodiak",Georgia,serif;font-size:clamp(1.5rem,3.4vw,2.5rem);font-style:italic;max-width:24ch;line-height:1.25}
.uebergang-text p.weiter{font-family:"Switzer",sans-serif;font-style:normal;font-size:1rem;max-width:none;margin-top:1rem}
.uebergang-text p.weiter a{color:var(--papier);text-underline-offset:4px}
/* Rückweg in den Morgen: oben Nacht, unten wieder Papier */
.uebergang--morgen{height:clamp(300px,40vw,500px);background:var(--papier)}
.uebergang--morgen img{opacity:1;object-position:50% 80%;mix-blend-mode:multiply}
.uebergang--morgen::after{
  background:linear-gradient(180deg,var(--nacht) 0%,color-mix(in srgb,var(--nacht) 78%,transparent) 24%,
    color-mix(in srgb,var(--nacht) 0%,transparent) 58%,color-mix(in srgb,var(--papier) 30%,transparent) 80%,var(--papier) 100%)}
.uebergang--morgen .uebergang-text{bottom:auto;top:clamp(1.8rem,4.5vw,3.2rem)}

/* Breites Bildband */
.band-bild{position:relative;height:clamp(260px,38vw,480px);overflow:hidden}
.band-bild img{width:100%;height:100%;object-fit:cover}
.band-bild figcaption{position:absolute;left:0;bottom:0;background:color-mix(in srgb,var(--nacht) 80%,transparent);
  color:var(--papier);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:.45rem .7rem}

/* ---------- Wein ---------- */
.depots{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,3rem)}
.depot{padding-top:1.4rem;border-top:1px solid color-mix(in srgb,var(--papier) 22%,transparent)}
.depot b{display:block;font-family:"Zodiak",Georgia,serif;font-size:1.55rem;font-weight:400;line-height:1.2;margin-bottom:.6rem}
.depot span{color:var(--grau-hell);font-size:.97rem}
.depot .laender{display:block;margin-top:.9rem}

.brennerei{list-style:none;margin:1.6rem 0 0;padding:0;columns:2;column-gap:2.5rem}
.brennerei li{padding:.55rem 0;border-bottom:1px solid color-mix(in srgb,var(--papier) 14%,transparent);break-inside:avoid;
              display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.brennerei li span{color:var(--grau-hell);font-size:.85rem}

/* Karten: als eingebettetes SVG, damit sie die Schriften der Seite benutzen */
.welt,.anfahrt{margin:0}
.welt svg,.anfahrt svg{display:block;width:100%;height:auto}
.welt figcaption,.anfahrt figcaption{margin-top:.9rem;font-size:.84rem;color:var(--grau-hell)}
.legende{display:grid;grid-template-columns:1fr 1.45fr;gap:1.6rem 3rem;margin-top:2.2rem;
         padding-top:1.6rem;border-top:1px solid color-mix(in srgb,var(--papier) 16%,transparent)}
.legende h3{font-family:"Switzer","Helvetica Neue",Arial,sans-serif;font-size:.78rem;letter-spacing:.14em;
            text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem}
.legende h3::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:currentColor;flex:none}
.legende .tee{color:#8FB89A}.legende .wein{color:#E8A9AF}
.legende p{color:var(--papier);font-size:1rem;line-height:1.75}

/* ---------- Feinkost ---------- */
.warenliste{columns:2;column-gap:2rem;list-style:none;margin:1.6rem 0 0;padding:0;font-size:.97rem}
.warenliste li{padding:.45rem 0;border-bottom:1px solid color-mix(in srgb,var(--tinte) 12%,transparent);break-inside:avoid}
.dunkel .warenliste li{border-bottom-color:color-mix(in srgb,var(--papier) 14%,transparent)}

.theke{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.4vw,1.8rem)}
.theke article .bild{aspect-ratio:3/4}
.theke article:nth-child(even){margin-top:clamp(0rem,4vw,3rem)}
.theke h3{font-size:1.35rem;margin:1rem 0 .4rem}
.theke p{font-size:.94rem;color:var(--grau)}

/* Was zusammen passt (Feinkost) */
.paare{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2.5rem)}
.paare li{padding-top:1.2rem;border-top:2px solid var(--rot-tief)}
.paare b{display:block;font-family:"Zodiak",Georgia,serif;font-weight:400;font-size:clamp(1.35rem,2.2vw,1.65rem);line-height:1.2;margin-bottom:.55rem}
.paare b i{font-style:normal;color:var(--rot-tief);padding-inline:.15em}
.paare span{color:var(--grau);font-size:.96rem}

/* ---------- Service ---------- */
.service-gitter{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,5.5rem);align-items:start}
.service-gitter h2{font-size:clamp(1.95rem,4vw,3.1rem);line-height:1.07;letter-spacing:-.015em}
.service-gitter .einleitung{color:var(--grau);margin-top:1.1rem;max-width:42ch}
.leistungen{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.6rem,3.5vw,2.8rem) clamp(2.5rem,6vw,5rem)}
.leistungen--liste{grid-template-columns:1fr;gap:0}
.leistung{display:grid;grid-template-columns:2.2rem 1fr;gap:1.1rem;align-items:start;
          padding-top:1.2rem;border-top:1px solid color-mix(in srgb,var(--tinte) 16%,transparent)}
.leistungen--liste .leistung{padding:1.25rem 0}
.leistungen--liste .leistung:last-child{border-bottom:1px solid color-mix(in srgb,var(--tinte) 16%,transparent)}
.dunkel .leistung{border-top-color:color-mix(in srgb,var(--papier) 18%,transparent)}
.zeichen{color:var(--rot-tief)}
.leistung .zeichen{width:2.2rem;height:2.2rem;margin-top:.15rem}
.dunkel .zeichen{color:var(--rot-hell)}
.leistung h3{font-size:1.25rem;margin-bottom:.3rem}
.leistung p{font-size:.95rem;color:var(--grau)}
.dunkel .leistung p{color:var(--grau-hell)}
.leistung .pfeil{display:inline-block;margin-top:.6rem;font-size:.88rem}

/* Sprungleiste oben auf der Service-Seite */
.sprungleiste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:1px solid color-mix(in srgb,var(--tinte) 14%,transparent);border-bottom:1px solid color-mix(in srgb,var(--tinte) 14%,transparent)}
.sprungleiste a{display:flex;flex-direction:column;gap:.7rem;padding:1.3rem 1rem 1.2rem;height:100%;text-decoration:none;
  font-size:.9rem;font-weight:500;line-height:1.3;transition:background-color .25s var(--aus)}
.sprungleiste li + li a{border-left:1px solid color-mix(in srgb,var(--tinte) 10%,transparent)}
.sprungleiste a:hover{background:var(--papier)}
.sprungleiste .zeichen{width:1.9rem;height:1.9rem}

.leistung-gross{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.leistung-gross .zeichen{width:2.6rem;height:2.6rem}
.leistung-gross h2{font-size:clamp(1.85rem,3.6vw,2.7rem);line-height:1.08;margin:1rem 0}
.leistung-gross p{color:var(--grau);max-width:48ch}
.leistung-gross p + p{margin-top:.9rem}

/* Für Ihre Feier: drei Leistungen nebeneinander, Bild oben */
.feier{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:clamp(1.2rem,2.6vw,2.2rem);align-items:start}
.feier article{display:flex;flex-direction:column;height:100%}
.feier .bild{aspect-ratio:4/3}
.feier article:first-child .bild{aspect-ratio:5/6}
.feier .zeichen{width:2.1rem;height:2.1rem;margin-top:1.3rem}
.feier h3{font-size:clamp(1.45rem,2.2vw,1.8rem);line-height:1.12;margin:.7rem 0 .55rem}
.feier p{color:var(--grau);font-size:.97rem}
.feier .knopfreihe{margin-top:1.3rem}

.punkte{list-style:none;margin:1.2rem 0 0;padding:0}
.punkte li{padding:.5rem 0 .5rem 1.4rem;position:relative;border-bottom:1px solid color-mix(in srgb,var(--tinte) 10%,transparent)}
.dunkel .punkte li{border-bottom-color:color-mix(in srgb,var(--papier) 12%,transparent)}
.punkte li::before{content:"";position:absolute;left:0;top:1.05rem;width:.55rem;height:1px;background:var(--rot)}

.termin{display:grid;grid-template-columns:11rem 1fr auto;gap:1.5rem 2.5rem;align-items:center;
        padding:1.6rem 0;border-top:1px solid color-mix(in srgb,var(--papier) 18%,transparent)}
.termin:last-of-type{border-bottom:1px solid color-mix(in srgb,var(--papier) 18%,transparent)}
.termin .wann{font-family:"Zodiak",Georgia,serif;font-size:1.7rem;color:var(--rot);min-width:7.5rem;line-height:1.1}
.termin .wann small{display:block;font-family:"Switzer",sans-serif;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grau-hell);margin-top:.35rem}
.termin h3{font-size:1.35rem;margin-bottom:.25rem}
.termin p{color:var(--grau-hell);font-size:.95rem}
/* Termin-Zeilen auf hellem Grund (Newsletter-Liste) */
.hell .termin{border-color:color-mix(in srgb,var(--tinte) 14%,transparent)}
.hell .termin .wann small,.hell .termin p{color:var(--grau)}

/* ---------- Über uns ---------- */
.chronik{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.aussage{font-family:"Zodiak",Georgia,serif;font-style:italic;font-size:clamp(1.55rem,3vw,2.3rem);line-height:1.22;letter-spacing:-.01em;max-width:20ch}
.jahre{list-style:none;margin:2rem 0 0;padding:0}
.mehr-verweis{margin-top:1.6rem}
.jahre li{display:grid;grid-template-columns:5rem 1fr;gap:1.4rem;padding:1rem 0;
          border-top:1px solid color-mix(in srgb,var(--tinte) 14%,transparent)}
.jahre b{font-family:"Zodiak",Georgia,serif;font-weight:400;font-size:1.4rem;color:var(--rot-tief);font-variant-numeric:tabular-nums}
.jahre span{color:var(--grau);font-size:.96rem}
.werte{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.wert-feld{padding-top:1.3rem;border-top:2px solid var(--rot-tief)}
.wert-feld h3{font-size:1.4rem;margin-bottom:.5rem}
.wert-feld p{color:var(--grau);font-size:.96rem}

/* Wein – Tee – Feinkost – Präsente: die vier Wörter des alten Ladenschilds */
.vier-woerter{list-style:none;margin:0;padding:0;border-top:1px solid color-mix(in srgb,var(--tinte) 16%,transparent)}
.vier-woerter a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;align-items:baseline;gap:1rem 2rem;
  padding:clamp(1rem,2.2vw,1.5rem) 0;border-bottom:1px solid color-mix(in srgb,var(--tinte) 16%,transparent);text-decoration:none}
.vier-woerter b{font-family:"Zodiak",Georgia,serif;font-weight:400;font-size:clamp(2rem,5vw,3.6rem);line-height:1;letter-spacing:-.02em;
  transition:color .3s var(--aus),transform .4s var(--aus);display:inline-block}
.vier-woerter span{color:var(--grau);font-size:.97rem}
.vier-woerter i{font-style:normal;color:var(--rot-tief);font-size:1.4rem;transition:transform .4s var(--aus)}
.vier-woerter a:hover b{color:var(--rot-tief);transform:translateX(.4rem)}
.vier-woerter a:hover i{transform:translateX(.4rem)}

/* ---------- Besuch (Startseite) ---------- */
.besuch-gitter{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem clamp(2.5rem,6vw,5.5rem);align-items:end}
.besuch h2{font-size:clamp(1.95rem,4vw,3.1rem);line-height:1.07;margin-top:1rem}
.besuch .knopfreihe{margin-top:1.8rem}
.zeiten-kurz{margin:0;border-top:1px solid color-mix(in srgb,var(--papier) 18%,transparent)}
.zeiten-kurz div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem 1.5rem;padding:.85rem 0;
  border-bottom:1px solid color-mix(in srgb,var(--papier) 18%,transparent)}
.zeiten-kurz dt{font-weight:500}
.zeiten-kurz dd{margin:0;text-align:right;color:var(--grau-hell);font-variant-numeric:tabular-nums}
.zeiten-kurz .klein{grid-column:1 / -1;text-align:left;font-size:.86rem}

/* ---------- Kontakt ---------- */
.kontakt-gitter{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
.zeiten{width:100%;border-collapse:collapse;font-size:.97rem;margin-top:1.2rem}
.zeiten th{text-align:left;font-weight:400;padding:.7rem 0;border-bottom:1px solid color-mix(in srgb,var(--tinte) 14%,transparent);white-space:nowrap}
.zeiten td{text-align:right;padding:.7rem 0;border-bottom:1px solid color-mix(in srgb,var(--tinte) 14%,transparent);
           font-variant-numeric:tabular-nums;color:var(--grau)}
.dunkel .zeiten th,.dunkel .zeiten td{border-bottom-color:color-mix(in srgb,var(--papier) 16%,transparent)}
.dunkel .zeiten td{color:var(--grau-hell)}
.zeiten tr.heute th{font-weight:600}
.zeiten tr.heute th,.zeiten tr.heute td{color:var(--rot-tief)}
.dunkel .zeiten tr.heute th,.dunkel .zeiten tr.heute td{color:var(--rot-hell)}
.zeiten tr.heute th::after{content:" · heute";font-weight:400;font-size:.85em}
.adresse{font-style:normal;font-size:1.05rem;line-height:1.95;margin-top:1.2rem}
.adresse a{text-underline-offset:4px}
.hinweis{margin-top:1.2rem;font-size:.88rem;color:var(--grau);padding-left:1rem;border-left:2px solid var(--rot)}
.dunkel .hinweis{color:var(--grau-hell)}
.anfahrt{margin-top:clamp(2.5rem,5vw,3.5rem)}
.anfahrt--kontakt{margin-top:0}
.kontakt-kopf{margin-bottom:clamp(2rem,4vw,3rem)}
.band--kontakt{margin-top:0}
.band--kontakt .band-innen{padding-inline:0}
.kontakt-gitter{margin-top:clamp(2rem,4vw,3rem)}
.dunkel .kontakt-gitter .marke-zeile{color:var(--rot-hell)}

/* ---------- Formular ---------- */
.formular{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem 1.6rem}
.formular .ganz{grid-column:1 / -1}
.feld label{display:block;font-size:.84rem;font-weight:600;letter-spacing:.02em;margin-bottom:.45rem}
.feld label small{font-weight:400;color:var(--grau)}
.feld input,.feld select,.feld textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--tinte);background:#FFFDFB;
  border:1px solid color-mix(in srgb,var(--tinte) 30%,transparent);border-radius:0;padding:.85rem .95rem;
  transition:border-color .2s var(--aus),box-shadow .2s var(--aus);
}
.feld select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2393222F' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.feld textarea{min-height:9rem;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--rot-tief);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--rot) 24%,transparent)}
.feld input:user-invalid,.feld textarea:user-invalid{border-color:var(--rot-tief)}
.feld .fehler{display:none;font-size:.84rem;color:var(--rot-tief);margin-top:.35rem}
.feld input:user-invalid ~ .fehler,.feld textarea:user-invalid ~ .fehler{display:block}
.formular-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.formular-fuss p{font-size:.86rem;color:var(--grau);max-width:52ch}
.formular-fuss a{text-underline-offset:3px}
.meldung{display:none;margin-top:1.5rem;padding:1.2rem 1.4rem;background:var(--papier-hell);border-left:3px solid var(--gruen)}
.meldung.an{display:block}
.meldung b{display:block;margin-bottom:.25rem}
.meldung--fehler{border-left-color:var(--rot);margin:0 0 1.5rem}
.formular-rahmen{background:var(--papier);box-shadow:0 1px 0 color-mix(in srgb,var(--tinte) 8%,transparent);padding:clamp(1.5rem,4vw,3rem)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Rechtstexte ---------- */
.rechtstext{max-width:72ch;overflow-wrap:break-word;hyphens:auto}
.rechtstext h2{font-size:clamp(1.4rem,2.6vw,1.85rem);margin:2.8rem 0 .9rem;line-height:1.15}
.rechtstext h3{font-family:"Switzer","Helvetica Neue",Arial,sans-serif;font-size:1.02rem;font-weight:600;margin:1.8rem 0 .5rem}
.rechtstext p,.rechtstext li{color:color-mix(in srgb,var(--tinte) 88%,transparent);font-size:.98rem}
.rechtstext p + p{margin-top:.8rem}
.rechtstext ul{padding-left:1.2rem;margin:.6rem 0}
.rechtstext li + li{margin-top:.45rem}
.rechtstext .gross{text-transform:none;font-size:.92rem}
.rechtstext address{font-style:normal;line-height:1.8}

/* Markierung für Stellen, die der Kunde bestätigen muss – nur in der Demo */
.pruefen{background:color-mix(in srgb,#F2C94C 30%,transparent);outline:1px dashed #B88A00;outline-offset:2px;padding:0 .15em}
.pruefen-block{border:1px dashed #B88A00;background:color-mix(in srgb,#F2C94C 14%,transparent);padding:1rem 1.2rem;margin:1rem 0;font-size:.92rem}
.pruefen-block b{color:#7A5A00}
.dunkel .pruefen-block{color:var(--papier)}
.dunkel .pruefen-block b{color:#F2C94C}
.pruefen-legende{display:flex;gap:.8rem;align-items:flex-start;font-size:.9rem;padding:1rem 1.2rem;margin-bottom:2rem;
  border:1px dashed #B88A00;background:color-mix(in srgb,#F2C94C 14%,transparent)}

/* ---------- Schluss-Aufruf ---------- */
.aufruf-innen{display:grid;grid-template-columns:1.3fr 1fr;gap:2rem 4rem;align-items:end}
.aufruf h2{font-size:clamp(1.85rem,3.8vw,2.9rem);line-height:1.08}
.aufruf .marke-zeile + h2{margin-top:1rem}
.aufruf h2 em{font-style:italic;color:var(--rot-tief)}
.dunkel.aufruf h2 em{color:var(--rot)}
.aufruf p{color:var(--grau);max-width:44ch}
.dunkel.aufruf p{color:var(--grau-hell)}
.aufruf .knopfreihe{margin-top:1.4rem}

/* ---------- Fuß ---------- */
.fuss{background:var(--nacht-tief);color:var(--grau-hell);padding-block:3.5rem 2.2rem;font-size:.9rem}
.fuss-gitter{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem 3rem}
.fuss .logo{width:170px;filter:brightness(0) invert(1);opacity:.9}
.fuss h2{font-family:"Switzer",sans-serif;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--papier);margin-bottom:.9rem}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{padding:.2rem 0}
.fuss a{text-decoration:none}
.fuss a:hover{text-decoration:underline;text-underline-offset:3px;color:var(--papier)}
.fuss address{font-style:normal;line-height:1.8;margin-top:1.2rem}
.fuss-zeile{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:2.8rem;padding-top:1.4rem;
            border-top:1px solid color-mix(in srgb,var(--papier) 12%,transparent);font-size:.82rem}
.fuss-zeile .rechts{margin-left:auto;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem}

/* ---------- Einblenden beim Scrollen ----------
   Nur Deckkraft, ein kurzer Weg nach oben und eine leichte Unschärfe, die
   sich auflöst. Einmal pro Element, nie zurück. Ohne JavaScript, beim Drucken
   und bei „Bewegung reduzieren“ ist alles sofort sichtbar. */
.js .auftauchen{opacity:0;transform:translateY(16px);filter:blur(3px);
  transition:opacity .7s var(--aus),transform .8s var(--aus),filter .7s var(--aus);
  transition-delay:calc(var(--i,0) * 90ms)}
.js .auftauchen.da{opacity:1;transform:none;filter:none}

:focus-visible{outline:2px solid var(--rot-tief);outline-offset:3px}
.dunkel :focus-visible,.tief :focus-visible,.fuss :focus-visible,.station--abend:focus-visible,
.kopf.auf-dunkel :focus-visible,body.abend .kopf :focus-visible{outline-color:var(--rot-hell)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
  .js .auftauchen{opacity:1;transform:none;filter:none}
  .station:hover .bild img{transform:none}
}
@media print{
  .js .auftauchen{opacity:1;transform:none;filter:none}
  .menue-knopf,.springen{display:none}
  .kopf{position:static}
}

/* ---------- Mittlere Breite: Menüknopf ---------- */
@media (max-width:1100px){
  .nav,.kopf-tel{display:none}
  .menue-knopf{display:inline-flex;align-items:center;gap:.5rem;border:1px solid currentColor;background:none;
               color:inherit;font:inherit;font-size:.88rem;padding:.55rem 1rem;cursor:pointer;min-height:44px}
  .nav.offen{
    display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;z-index:60;
    background:var(--papier);color:var(--tinte);
    border-bottom:1px solid color-mix(in srgb,var(--tinte) 14%,transparent);
    padding:.4rem var(--rand) 1rem;box-shadow:0 14px 30px rgba(33,23,25,.18);
  }
  .nav.offen li{border-top:1px solid color-mix(in srgb,var(--tinte) 14%,transparent)}
  .nav.offen a{display:block;padding:.95rem 0;color:var(--tinte);font-size:1.02rem}
  .nav.offen a::after{display:none}
  .nav.offen a[aria-current="page"]{color:var(--rot-tief)}
  .nav.offen .nav-tel{display:block}
  .nav.offen .nav-tel a{color:var(--rot-tief);font-weight:600}
  .fuss-gitter{grid-template-columns:1fr 1fr}
  .sprungleiste{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sprungleiste li:nth-child(4) a{border-left:0}
  .sprungleiste li:nth-child(n+4) a{border-top:1px solid color-mix(in srgb,var(--tinte) 10%,transparent)}
}

/* ---------- Tablet / Handy ---------- */
@media (max-width:920px){
  .hero-gitter,.seitenkopf-gitter,.chronik,.kontakt-gitter,.zeile,.leistung-gross,.aufruf-innen,
  .praesent-gitter,.herkunft-gitter,.service-gitter,.besuch-gitter{grid-template-columns:1fr}
  .zeile--gedreht > :first-child{order:0}
  .kopfzeile{grid-template-columns:1fr}
  .stationen,.werte,.abend-links{grid-template-columns:1fr 1fr}
  .paare{grid-template-columns:1fr}
  .station--abend{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr}
  .station--abend .bild{aspect-ratio:auto;min-height:100%}
  .tagesachse{display:none}
  .feier{grid-template-columns:1fr 1fr}
  .feier article:first-child{grid-column:1 / -1}
  .feier article:first-child .bild{aspect-ratio:16/9}
  .depots{grid-template-columns:1fr}
  .theke{grid-template-columns:1fr 1fr}
  .theke article:nth-child(even){margin-top:2rem}
  .zubereitung{grid-template-columns:1fr 1fr}
  .zubereitung div:nth-child(2){border-right:0}
  .zubereitung div:nth-child(3){padding-left:0}
  .zubereitung div:nth-child(n+3){border-top:1px solid color-mix(in srgb,var(--tinte) 12%,transparent)}
  .herkunft-kopf{position:static}
  .herkunft-kopf .bild{display:none}
  .seitenkopf .bild{aspect-ratio:3/2;min-height:0;max-height:none}
  .praesent-bild{aspect-ratio:3/2}
  .hero-paar{max-width:34rem;margin-top:.5rem}
  .logo{width:180px}
  .legende{grid-template-columns:1fr}
  .termin{grid-template-columns:1fr}
  .besuch-gitter{align-items:start}
}
@media (max-width:600px){
  body{font-size:16px}
  .hero{padding-top:2rem}
  .hero h1{font-size:clamp(2.35rem,10.5vw,3rem)}
  .zeitmarke{font-size:.76rem;gap:.4rem}
  .zeitmarke span{font-size:1rem}
  .stationen,.werte,.abend-links{grid-template-columns:1fr}
  .station,.station--abend{display:grid;grid-template-columns:40% 1fr;grid-column:auto}
  .station .bild,.station--abend .bild{aspect-ratio:auto;min-height:100%}
  .station-text{padding:1rem 1rem 1.15rem}
  .station h3{font-size:1.35rem}
  .station p{font-size:.92rem}
  .feier{grid-template-columns:1fr}
  .feier article:first-child .bild{aspect-ratio:4/3}
  .theke{grid-template-columns:1fr 1fr;gap:1rem .9rem}
  .theke article:nth-child(even){margin-top:1.6rem}
  .theke h3{font-size:1.15rem;margin-top:.7rem}
  .theke p{font-size:.88rem}
  .warenliste,.brennerei{columns:1}
  .jahre li{grid-template-columns:4rem 1fr;gap:.8rem}
  .formular{grid-template-columns:1fr}
  .fuss-gitter{grid-template-columns:1fr 1fr;gap:2rem 1.5rem}
  .fuss-gitter > div:first-child,.fuss-gitter > div:last-child{grid-column:1 / -1}
  .fuss-zeile .rechts{margin-left:0}
  .band .mehr{margin-left:0}
  .band small{flex-basis:100%}
  .logo{width:160px}
  .bildpaar{grid-template-columns:1.25fr 1fr;gap:.6rem}
  .zubereitung .wert{font-size:1.7rem}
  .zubereitung div{padding:1.1rem .9rem 1.1rem 0}
  .zubereitung div + div{padding-left:.9rem}
  .zubereitung div:nth-child(3){padding-left:0}
  .region{grid-template-columns:1fr;gap:.5rem;padding:1.2rem 0}
  .region h3{font-size:1.35rem}
  .region .wo{display:inline;margin:0 0 0 .5rem}
  .region-kopf{display:flex;align-items:baseline;flex-wrap:wrap}
  .region--frage{padding:1.2rem 1rem}
  .sprungleiste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sprungleiste li:nth-child(odd) a{border-left:0}
  .sprungleiste li:nth-child(4) a{border-left:1px solid color-mix(in srgb,var(--tinte) 10%,transparent)}
  .sprungleiste li:nth-child(n+3) a{border-top:1px solid color-mix(in srgb,var(--tinte) 10%,transparent)}
  .sprungleiste a{flex-direction:row;align-items:center;gap:.6rem;padding:1rem .7rem;hyphens:auto;overflow-wrap:break-word}
  .sprungleiste .zeichen{flex:none;width:1.6rem;height:1.6rem}
  .vier-woerter a{grid-template-columns:1fr auto}
  .vier-woerter span{grid-column:1;grid-row:2;font-size:.9rem}
  .vier-woerter i{grid-row:1 / span 2;align-self:center}
  .zeiten-kurz div{grid-template-columns:1fr}
  .zeiten-kurz dd{text-align:left}
  .merkmale{display:grid;grid-template-columns:auto auto;justify-content:start;gap:.35rem 1.6rem}
  .merkmale li::before,.merkmale li + li::before{content:"";width:.26rem;height:.26rem;border-radius:50%;
    background:currentColor;opacity:.6;margin:0 .55rem 0 0}
  .tagesleiste{font-size:.76rem;letter-spacing:.04em}
  .tagesleiste a + a::before{width:1.1rem;margin-inline:.55rem}
  .tagesleiste .lang{display:none}
  .knopf{padding:.9rem 1.35rem}
  .termin .knopf{justify-self:start}
}