/* Schriften liegen im Repo, nicht bei Google — schnellerer Aufbau, keine
   Verbindung zu Dritten beim Seitenaufruf. */
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-400-italic.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/jetbrains-mono.woff2) format('woff2')}
@font-face{font-family:'Parisienne';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/parisienne-400.woff2) format('woff2')}
/* Beide sind Variable Fonts: eine Datei deckt alle Schnitte ab. Vorher lagen
   sie dreimal bzw. zweimal byteidentisch im Repo und wurden auch so geladen. */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/schibsted-grotesk.woff2) format('woff2')}

/* ═══ Farben ═══════════════════════════════════════════════════════════
   Nacht: das schwarze Etikett mit Kupferprägung.
   Tag:   Jurakalk, wie der Boden im Rebberg.                           */
:root{
  color-scheme: dark;
  --ground:#0A0908;   --ground-2:#121010;  --ground-3:#1C1817;
  --line:rgba(240,226,210,.14);
  --ink:#F4EDE5;      --ink-soft:#BCB0A5;  --ink-faint:#8D8175;
  --copper:#C6874C;   --copper-lo:#96602E; --copper-hi:#F2C795;
  --foil-a:#96602E;   --foil-b:#F2C795;    --foil-c:#C6874C;
  /* Die Folienfarben, gemessen an den Fotos der gedruckten Flaschen:
     Rosé roségold (Ton 21–23°), Pinot Noir rot (352°), Sauvignon gold.
     Die Design-PDFs zeigen die Farbe flach — auf der Flasche wird sie
     durch die Chromfolie wärmer und heller. */
  --rose-a:#7A4526;   --rose-b:#F5B187;    --rose-c:#C98157;
  --pinot-a:#6E1018;  --pinot-b:#E8465C;   --pinot-c:#D10B24;
  --sauv-a:#8A6318;   --sauv-b:#EFC97F;    --sauv-c:#D9A63F;
  --wein-rot:#8C2536;
  --scrim:linear-gradient(180deg, rgba(10,9,8,0) 30%, rgba(10,9,8,.9) 100%);
  --korn:.05;
  --stein:.07;
  --stein-mischung:normal;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --ground:#E9E3DB;   --ground-2:#F5F1EB;  --ground-3:#DDD5CA;
    --line:rgba(40,28,20,.17);
    --ink:#191310;      --ink-soft:#584A41;  --ink-faint:#6D6055;
    --copper:#8A4E1D;   --copper-lo:#7A4419; --copper-hi:#A9682C;
    --foil-a:#5C2F0E;   --foil-b:#9A5620;    --foil-c:#75400F;
    --rose-a:#5E2A10;   --rose-b:#B5602F;    --rose-c:#8A431D;
    --pinot-a:#5E0A12;  --pinot-b:#B01226;   --pinot-c:#8A0E1D;
    --sauv-a:#4F3608;   --sauv-b:#96691A;    --sauv-c:#77530F;
    --wein-rot:#6E1A28;
    --scrim:linear-gradient(180deg, rgba(233,227,219,0) 30%, rgba(233,227,219,.92) 100%);
    --korn:.035;
    --stein:.5;
    --stein-mischung:multiply;
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --ground:#E9E3DB;   --ground-2:#F5F1EB;  --ground-3:#DDD5CA;
  --line:rgba(40,28,20,.17);
  --ink:#191310;      --ink-soft:#584A41;  --ink-faint:#6D6055;
  --copper:#8A4E1D;   --copper-lo:#7A4419; --copper-hi:#A9682C;
  --foil-a:#5C2F0E;   --foil-b:#9A5620;  --foil-c:#75400F;
  --rose-a:#5E2A10;   --rose-b:#B5602F;  --rose-c:#8A431D;
  --pinot-a:#5E0A12;  --pinot-b:#B01226;   --pinot-c:#8A0E1D;
  --sauv-a:#4F3608;   --sauv-b:#96691A;  --sauv-c:#77530F;
  --wein-rot:#6E1A28;
  --scrim:linear-gradient(180deg, rgba(233,227,219,0) 30%, rgba(233,227,219,.92) 100%);
  --korn:.035;
  --stein:.5;
  --stein-mischung:multiply;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#0A0908;   --ground-2:#121010;  --ground-3:#1C1817;
  --line:rgba(240,226,210,.14);
  --ink:#F4EDE5;      --ink-soft:#BCB0A5;  --ink-faint:#8D8175;
  --copper:#C6874C;   --copper-lo:#96602E; --copper-hi:#F2C795;
  --foil-a:#96602E;   --foil-b:#F2C795;    --foil-c:#C6874C;
  /* Die Folienfarben, gemessen an den Fotos der gedruckten Flaschen:
     Rosé roségold (Ton 21–23°), Pinot Noir rot (352°), Sauvignon gold.
     Die Design-PDFs zeigen die Farbe flach — auf der Flasche wird sie
     durch die Chromfolie wärmer und heller. */
  --rose-a:#7A4526;   --rose-b:#F5B187;    --rose-c:#C98157;
  --pinot-a:#6E1018;  --pinot-b:#E8465C;   --pinot-c:#D10B24;
  --sauv-a:#8A6318;   --sauv-b:#EFC97F;    --sauv-c:#D9A63F;
  --wein-rot:#8C2536;
  --scrim:linear-gradient(180deg, rgba(10,9,8,0) 30%, rgba(10,9,8,.9) 100%);
  --korn:.05;
  --stein:.07;
  --stein-mischung:normal;
}

/* ═══ Grundlage ════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
/* Die Kopfzeile steht fest über allem — ohne diesen Abstand landet jedes
   Sprungziel darunter und die Überschrift ist verdeckt. */
:target,[id]{scroll-margin-top:7rem}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:clamp(15px,.55vw + 13px,17px);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* Filmkorn über der ganzen Seite — nimmt den Flächen das Digitale. */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:var(--korn);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400;font-family:"Instrument Serif", Georgia, serif;text-wrap:balance;letter-spacing:-.015em;line-height:1.02}
:focus-visible{outline:2px solid var(--copper-hi);outline-offset:4px}
::selection{background:var(--copper);color:var(--ground)}

.wrap{width:min(1240px,100% - clamp(1.5rem,5vw,5rem));margin-inline:auto}
.mono{font-family:"JetBrains Mono", ui-monospace, monospace;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase}
.foil{
  background:linear-gradient(96deg,var(--foil-a) 0%,var(--foil-b) 42%,var(--foil-c) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.kursiv{font-style:italic}
.kupfer{color:var(--copper)}
.gedaempft{color:var(--ink-faint)}
.weich{color:var(--ink-soft)}
.skip{position:absolute;left:-9999px;background:var(--copper);color:var(--ground);padding:.7rem 1.2rem;z-index:80}
.skip:focus{left:1rem;top:1rem}

/* sanftes Auftauchen, an den Scroll gekoppelt wo der Browser es kann */
@media (prefers-reduced-motion: no-preference){
  .steigt{animation:steigen .9s cubic-bezier(.2,.7,.3,1) both;animation-timeline:view();animation-range:entry 5% cover 28%}
  @keyframes steigen{from{opacity:.25;transform:translateY(26px)}to{opacity:1;transform:none}}
  @keyframes einblenden{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .hero-zeile{animation:einblenden .9s cubic-bezier(.2,.7,.3,1) both}
  .hero-zeile:nth-child(2){animation-delay:.08s}
  .hero-zeile:nth-child(3){animation-delay:.16s}
  .hero-zeile:nth-child(4){animation-delay:.24s}
}

/* ═══ Kopfzeile ════════════════════════════════════════════════════════ */
.kopf{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease;border-bottom:1px solid transparent}
.kopf.fest{background:color-mix(in srgb,var(--ground) 82%,transparent);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.1rem 0}
.logo{font-family:"Instrument Serif",serif;font-size:1.4rem;letter-spacing:.02em;display:flex;align-items:baseline;gap:.6rem}
.logo em{font-style:normal;color:var(--ink-faint);font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.24em}
.menue{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.4rem)}
.menue a{font-size:.86rem;color:var(--ink-soft);position:relative;padding-block:.3rem}
.menue a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--copper);transition:right .35s cubic-bezier(.2,.7,.3,1)}
.menue a:hover{color:var(--ink)}
.menue a:hover::after{right:0}
.menue .kaufen{border:1px solid var(--line);border-radius:99px;padding:.55rem 1.3rem;color:var(--ink)}
.menue .kaufen::after{display:none}
.menue .kaufen:hover{border-color:var(--copper);color:var(--copper-hi)}
@media (max-width:760px){ .menue a:not(.kaufen){display:none} }

/* ═══ Hero ═════════════════════════════════════════════════════════════ */
.hero{position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:end;gap:clamp(2rem,4vw,4rem);
  min-height:clamp(560px,80vh,860px);padding:clamp(7rem,14vh,11rem) 0 clamp(2.5rem,5vw,4rem)}
.hero-text{padding-bottom:clamp(1rem,3vw,3rem)}
.hero h1{font-size:clamp(4.2rem,13vw,11rem);line-height:.84;margin:.8rem 0 0}
.hero h1 .zweite{display:block;margin-left:.12em;font-style:italic}
.hero-lead{margin-top:clamp(1.4rem,3vw,2.2rem);max-width:34ch;color:var(--ink-soft);font-size:clamp(1rem,.4vw + .9rem,1.15rem)}
.hero-fakten{margin-top:clamp(1.6rem,3vw,2.6rem);display:flex;flex-wrap:wrap;gap:.5rem 2rem;color:var(--ink-faint)}
.hero-bild{position:relative;margin-right:calc(-1 * max(0px,(100vw - min(1240px,100vw - clamp(1.5rem,5vw,5rem)))/2));align-self:stretch;min-height:clamp(380px,58vh,760px)}
.hero-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-bild::after{content:"";position:absolute;inset:0;background:var(--scrim);opacity:.55}
.hero-marke{position:absolute;left:clamp(1rem,2vw,2rem);bottom:clamp(1rem,2vw,2rem);z-index:2;color:#F4EDE5;mix-blend-mode:difference}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:6.5rem}
  .hero-bild{margin-inline:calc(-1 * clamp(.75rem,2.5vw,2.5rem));min-height:62vh;order:-1}
  .hero h1{font-size:clamp(3.6rem,19vw,7rem)}
}

/* ═══ Laufband ═════════════════════════════════════════════════════════ */
.laufband{border-block:1px solid var(--line);overflow:hidden;padding:.9rem 0;background:var(--ground-2)}
.laufband-spur{display:flex;gap:3rem;width:max-content;animation:laufen 46s linear infinite;color:var(--ink-faint)}
.laufband-spur span{display:flex;gap:3rem;white-space:nowrap}
.laufband-spur i{font-style:normal;color:var(--copper)}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ═══ Auftakt ══════════════════════════════════════════════════════════ */
.auftakt{padding:clamp(4.5rem,11vw,9rem) 0 clamp(3rem,7vw,6rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.auftakt-satz{font-family:"Instrument Serif",serif;font-size:clamp(1.7rem,3.2vw,2.9rem);line-height:1.18;text-wrap:balance}
.auftakt-satz b{font-weight:400;font-style:italic;color:var(--copper)}
.auftakt-neben{display:flex;flex-direction:column;gap:1.6rem;max-width:42ch;color:var(--ink-soft);padding-top:.6rem}
.kennzahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:.6rem}
.kennzahl b{display:block;font-family:"Instrument Serif",serif;font-size:clamp(1.8rem,3vw,2.4rem);color:var(--ink);line-height:1}
.kennzahl span{color:var(--ink-faint)}
@media (max-width:860px){ .auftakt{grid-template-columns:1fr} }

/* ═══ Die Weine ════════════════════════════════════════════════════════ */
.titelzeile{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.titelzeile h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.titel-neben{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.drucken{font:inherit;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.72rem;
  letter-spacing:.15em;text-transform:uppercase;background:none;color:var(--ink-soft);cursor:pointer;
  border:0;border-bottom:1px solid var(--line);padding:0 0 .3rem;transition:color .3s ease,border-color .3s ease}
.drucken:hover{color:var(--copper-hi);border-bottom-color:var(--copper)}
.weinliste{display:flex;flex-direction:column}
.wein{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(2.5rem,5vw,4rem) 0;border-bottom:1px solid var(--line)}
.wein:nth-child(even) .wein-figur{order:2}
.wein-figur{position:relative;overflow:hidden;background:var(--ground-3)}
.wein-figur img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 38%;transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.wein:hover .wein-figur img{transform:scale(1.04)}
.wein-figur .marke{position:absolute;top:1rem;left:1rem;background:var(--ground);color:var(--ink);padding:.35rem .7rem;border-radius:99px}
.wein--rose .marke, .wein--rose .preis{color:var(--rose-c)}
.wein--pinot .marke, .wein--pinot .preis{color:var(--pinot-b)}
.wein--sauvignon .marke, .wein--sauvignon .preis{color:var(--sauv-c)}
/* Der Weinname ist der Schriftzug vom Etikett, als Umriss aus dem Druck-PDF
   gezogen und mit der Folienfarbe als Verlauf gefüllt. Ohne Maskenunterstützung
   bleibt die Textfassung sichtbar. */
.wein-name{font-family:"Parisienne",cursive;font-size:clamp(3.2rem,7vw,5.4rem);line-height:.9;margin-bottom:.6rem}
.nur-lesen{display:inline}
@supports (mask-image: url("/assets/schriftzuege/rose.svg")) {
  .wein-name{
    width:clamp(210px,27vw,330px);height:auto;margin-bottom:1.2rem;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-position:left center;mask-position:left center;
  }
  .wein-name .nur-lesen{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .wein-name--rose{aspect-ratio:132/88;
    -webkit-mask-image:url("/assets/schriftzuege/rose.svg");mask-image:url("/assets/schriftzuege/rose.svg");
    background-image:linear-gradient(96deg,var(--rose-a) 0%,var(--rose-b) 42%,var(--rose-c) 78%)}
  .wein-name--pinot{aspect-ratio:130/113;
    -webkit-mask-image:url("/assets/schriftzuege/pinot-noir.svg");mask-image:url("/assets/schriftzuege/pinot-noir.svg");
    background-image:linear-gradient(96deg,var(--pinot-a) 0%,var(--pinot-b) 42%,var(--pinot-c) 78%)}
  .wein-name--sauvignon{aspect-ratio:153/119;
    -webkit-mask-image:url("/assets/schriftzuege/sauvignon-blanc.svg");mask-image:url("/assets/schriftzuege/sauvignon-blanc.svg");
    background-image:linear-gradient(96deg,var(--sauv-a) 0%,var(--sauv-b) 42%,var(--sauv-c) 78%)}
}
.wein-daten{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;color:var(--ink-faint);margin-bottom:1.2rem}
.wein-note{color:var(--ink-soft);max-width:46ch;font-size:1.02rem}
.wein-spek{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(1rem,2vw,2rem);margin:1.6rem 0 0}
.wein-spek div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-top:1px solid var(--line)}
.wein-spek dt{color:var(--ink-faint)}
.wein-spek dd{margin:0;color:var(--ink);text-transform:none;letter-spacing:.04em}
@media (max-width:520px){ .wein-spek{grid-template-columns:1fr} }
.wein-fuss{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.preis{font-family:"Instrument Serif",serif;font-size:1.9rem;font-variant-numeric:tabular-nums}
.dazu{
  font:inherit;font-size:.82rem;letter-spacing:.02em;cursor:pointer;
  background:none;border:1px solid var(--line);border-radius:99px;color:var(--ink);
  padding:.7rem 1.4rem;display:inline-flex;align-items:center;gap:.6rem;
  transition:border-color .3s ease,color .3s ease,gap .3s ease;
}
.dazu:hover{border-color:var(--copper);color:var(--copper-hi);gap:.9rem}
.dazu[disabled]{opacity:.45;cursor:not-allowed}
@media (max-width:860px){
  .wein{grid-template-columns:1fr;gap:1.6rem}
  .wein:nth-child(even) .wein-figur{order:0}
}

/* ═══ Jahrgangsliste ═══════════════════════════════════════════════════ */
.liste{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(1.5rem,4vw,4rem);
  flex-wrap:wrap;padding:clamp(2.5rem,5vw,4rem) 0 clamp(3rem,6vw,5rem)}
.liste h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:.5rem 0 .8rem}
.liste p{color:var(--ink-soft);max-width:52ch}
.liste-knopf{display:inline-flex;align-items:center;gap:.7rem;white-space:nowrap;
  border:1px solid var(--copper);border-radius:99px;padding:1rem 1.8rem;color:var(--copper-hi);
  font-size:.86rem;transition:background .3s ease,color .3s ease,gap .3s ease}
.liste-knopf:hover{background:var(--copper);color:var(--ground);gap:1rem}

/* ═══ Rebberg (Band über die volle Breite) ═════════════════════════════ */
.rebberg{width:100vw;margin-left:calc(50% - 50vw);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--ground-2);border-block:1px solid var(--line)}
.rebberg img{width:100%;height:100%;object-fit:cover;display:block}
.rebberg figure{margin:0;min-height:clamp(420px,46vw,680px)}
.rebberg figure:nth-of-type(1) img{object-position:38% 50%}
.rebberg figure:nth-of-type(2) img{object-position:50% 42%}
/* Ohne Kante stossen die beiden Fotos hart aneinander und lesen sich wie
   ein zerrissenes Panorama statt wie zwei Bilder. */
.rebberg figure:nth-of-type(2){border-left:1px solid var(--line)}
.rebberg-text{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:clamp(2rem,4vw,3.5rem)}
/* Jurakalk unter dem Text — dort, wo der Boden beschrieben wird. */
.rebberg-text::before{content:"";position:absolute;inset:0;background-image:url(/assets/images/web/kalkstein-640.webp);
  background-size:320px;opacity:var(--stein);mix-blend-mode:var(--stein-mischung);pointer-events:none}
.rebberg-text > *{position:relative}
.rebberg-text h2{font-size:clamp(1.9rem,3vw,2.8rem)}
.rebberg-text p{color:var(--ink-soft);max-width:32ch}
.rebberg-text .mono{color:var(--copper)}
@media (max-width:860px){
  /* Auf dem Handy wurden aus den beiden hochformatigen Fotos zwei schmale
     Streifen mit hartem Stoss in der Mitte. Hier steht nur noch das Bild,
     das die Lage zeigt — in voller Breite. Das Detail der Trauben liegt
     weiter oben auf der Seite und im Bild für geteilte Links. */
  .rebberg{grid-template-columns:1fr}
  .rebberg-text{padding:2rem 1.5rem}
  .rebberg figure{min-height:clamp(320px,68vw,460px)}
  .rebberg figure:nth-of-type(1){display:none}
  .rebberg figure:nth-of-type(2){border-left:0}
}

/* ═══ Herkunft ═════════════════════════════════════════════════════════ */
.herkunft{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-block:0;
  border-bottom:1px solid var(--line)}
.herkunft > div{display:flex;flex-direction:column;gap:.5rem;padding:clamp(1.4rem,3vw,2.2rem) 0;
  border-left:1px solid var(--line);padding-left:clamp(1rem,2vw,1.8rem)}
.herkunft > div:first-child{border-left:0;padding-left:0}
.herkunft dt{color:var(--ink-faint)}
.herkunft dd{margin:0;font-family:"Instrument Serif",Georgia,serif;font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.2}
@media (max-width:760px){
  .herkunft{grid-template-columns:repeat(2,minmax(0,1fr))}
  .herkunft > div:nth-child(odd){border-left:0;padding-left:0}
  .herkunft > div:nth-child(3), .herkunft > div:nth-child(4){border-top:1px solid var(--line)}
}

/* ═══ Handwerk (mitlaufendes Bild) ═════════════════════════════════════ */
.handwerk{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,6vw,6rem);padding:clamp(4rem,9vw,8rem) 0}
.handwerk-bild{position:sticky;top:6rem;align-self:start}
.handwerk-bild img{width:100%;aspect-ratio:4/5;object-fit:cover}
.handwerk-bild figcaption{margin-top:.8rem;color:var(--ink-faint)}
.schritte{display:flex;flex-direction:column;gap:clamp(2.2rem,4.5vw,3.6rem)}
.schritt h3{font-size:clamp(1.6rem,3vw,2.3rem);margin:.5rem 0 .8rem}
.schritt p{color:var(--ink-soft);max-width:46ch}
.schritt .zaehler{color:var(--copper)}
.portraet{margin:1.8rem 0 1.4rem;padding:clamp(1.5rem,4vw,2.5rem);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;aspect-ratio:3/2;
  border:1px solid var(--line);border-radius:2px;
  background:radial-gradient(120% 90% at 50% 30%, var(--ground-3), var(--ground-2) 75%)}
.portraet svg{width:min(48%,180px);height:auto;opacity:.75}
.portraet figcaption{color:var(--ink-faint);text-align:center}
.leute{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:.4rem}
.leute div{padding-left:1rem;border-left:1px solid var(--copper)}
.leute b{display:block;font-family:"Instrument Serif",serif;font-size:1.3rem;font-weight:400}
.leute span{color:var(--ink-faint)}
@media (max-width:860px){ .handwerk{grid-template-columns:1fr} .handwerk-bild{position:static} }

/* ═══ Bestellen ════════════════════════════════════════════════════════ */
.bestellen{padding:clamp(4rem,9vw,8rem) 0}
.bestellraster{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(2rem,5vw,4rem);align-items:start;margin-top:2.5rem}
@media (max-width:900px){ .bestellraster{grid-template-columns:1fr} }

.wein-kopf{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;padding:1.6rem 0 .2rem}
.wein-kopf b{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:1.5rem}
.wein-kopf span{color:var(--ink-faint)}
.zeile-name .groesse{font-variant-numeric:tabular-nums;font-size:1.02rem}
.zeile{display:grid;grid-template-columns:1fr auto auto;gap:1.5rem;align-items:center;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.wein-kopf + .zeile{border-top:1px solid var(--line)}
.zeile-name{display:flex;flex-direction:column;gap:.25rem}
.zeile-name b{font-family:"Instrument Serif",serif;font-weight:400;font-size:1.45rem}
.zeile-name span{color:var(--ink-faint)}
.zaehlwerk{display:flex;align-items:center;gap:.5rem}
.zaehlwerk button{width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:1.1rem;line-height:1;cursor:pointer;transition:border-color .3s ease,color .3s ease}
.zaehlwerk button:hover{border-color:var(--copper);color:var(--copper-hi)}
.zaehlwerk input{width:3.4rem;height:2.4rem;text-align:center;font:inherit;font-variant-numeric:tabular-nums;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:6px}
.zeile-summe{min-width:7rem;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
@media (max-width:600px){
  .zeile{grid-template-columns:1fr auto}
  .zeile-summe{grid-column:1 / -1;text-align:left}
}

.formteil{margin-top:2.6rem;display:flex;flex-direction:column;gap:1.1rem}
.formteil > .mono{color:var(--copper)}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.feld{display:flex;flex-direction:column;gap:.35rem}
.feld.breit{grid-column:1 / -1}
.feld label{color:var(--ink-faint);font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.feld input,.feld textarea{
  font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;padding:.55rem 0;width:100%;transition:border-color .3s ease}
.feld input:hover,.feld textarea:hover{border-bottom-color:var(--ink-faint)}
.feld input:focus,.feld textarea:focus{outline:0;border-bottom-color:var(--copper)}
.feld input:focus-visible,.feld textarea:focus-visible{outline:0}
.feld textarea{min-height:4.5rem;resize:vertical;border:1px solid var(--line);padding:.7rem .8rem;border-radius:6px}
.feld textarea:hover{border-color:var(--ink-faint)}
@media (max-width:600px){ .felder{grid-template-columns:1fr} }
.wahl{display:flex;gap:.8rem;flex-wrap:wrap}
.wahl label{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.2rem;border:1px solid var(--line);border-radius:99px;cursor:pointer;background:var(--ground-2);font-size:.92rem}
.wahl label:has(input:checked){border-color:var(--copper);color:var(--copper-hi)}
.wahl input{accent-color:var(--copper)}
.zusage{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink-soft);font-size:.9rem}
.zusage input{margin-top:.3rem;accent-color:var(--copper)}

.uebersicht{position:sticky;top:6rem;background:var(--ground-2);border:1px solid var(--line);border-radius:14px;padding:clamp(1.4rem,2.5vw,2rem);display:flex;flex-direction:column;gap:1.1rem}
.uebersicht h3{font-family:"Schibsted Grotesk",sans-serif;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--copper);font-weight:600}
.posten{display:flex;flex-direction:column;gap:.6rem;font-variant-numeric:tabular-nums}
.posten div{display:flex;justify-content:space-between;gap:1rem;color:var(--ink-soft);font-size:.92rem}
.posten .leerzeile{color:var(--ink-faint)}
.strich{height:1px;background:var(--line)}
.gesamt{display:flex;justify-content:space-between;align-items:baseline;font-variant-numeric:tabular-nums}
.gesamt b{font-family:"Instrument Serif",serif;font-weight:400;font-size:2rem}
/* Der Hinweis auf den vollen Sechserkarton — nicht als Warnung, sondern
   als kleine Einladung, die letzte Lücke zu füllen. */
.karton{display:flex;gap:.55rem;align-items:baseline;font-size:.84rem;color:var(--copper);margin:-.35rem 0 0}
.karton::before{content:"✳";font-size:.72em;line-height:1.4;flex:none}
.karton--voll{color:var(--ink-faint)}
.karton--voll::before{content:"✓"}
.senden{
  font:inherit;font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  padding:1.05rem 1.5rem;border-radius:99px;border:1px solid var(--copper);cursor:pointer;
  background:var(--copper);color:#0A0908;transition:background .3s ease,color .3s ease,transform .3s ease}
.senden:hover{background:transparent;color:var(--copper-hi);transform:translateY(-2px)}
.senden[disabled]{opacity:.5;cursor:progress;transform:none}
.kleingedruckt{color:var(--ink-faint);font-size:.78rem}
.altershinweis{margin:.9rem 0 0;max-width:52ch}
.meldung{color:var(--wein-rot);font-size:.88rem}
.meldung:empty{display:none}

.quittung{display:none;flex-direction:column;gap:1rem;border:1px solid var(--copper);border-radius:14px;padding:clamp(1.8rem,4vw,3rem);background:var(--ground-2)}
.quittung h3{font-size:clamp(1.8rem,3.5vw,2.6rem)}
.quittung ul{margin:0;padding-left:1.1rem;color:var(--ink-soft)}
.quittung .nr{color:var(--copper-hi);font-variant-numeric:tabular-nums;letter-spacing:.12em}
.quittung .abschicken{align-self:flex-start;text-decoration:none;text-align:center;margin-top:.4rem}
.notfalls{border-top:1px solid var(--line);padding-top:1rem;margin-top:.4rem}
.notfalls summary{cursor:pointer;color:var(--ink-faint);font-size:.88rem;list-style:none}
.notfalls summary::-webkit-details-marker{display:none}
.notfalls summary::before{content:"+ ";color:var(--copper)}
.notfalls[open] summary::before{content:"– "}
.notfalls summary:hover{color:var(--ink-soft)}
.notfalls > *{margin-top:.9rem}
.bestelltext{white-space:pre-wrap;word-break:break-word;line-height:1.65;
  font-family:"JetBrains Mono", ui-monospace, monospace;font-size:.76rem;
  color:var(--ink-soft);background:var(--ground);border:1px solid var(--line);border-radius:10px;
  padding:1rem;max-height:19rem;overflow:auto}
.bestellen.erledigt form{display:none}
.bestellen.erledigt .quittung{display:flex}

/* ═══ Besuch & Fuss ════════════════════════════════════════════════════ */
.besuch{padding:clamp(3.5rem,8vw,7rem) 0;border-top:1px solid var(--line)}
.besuch-kopf{max-width:46ch}
.besuch-kopf h2{font-size:clamp(1.9rem,3.6vw,3rem);margin:.6rem 0 1rem}
.besuch-lead{color:var(--ink-soft)}
.besuch-spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--line)}
.besuch-spalten > div{padding:clamp(1.4rem,3vw,2rem) 0;border-left:1px solid var(--line);
  padding-left:clamp(1rem,2vw,1.8rem)}
.besuch-spalten > div:first-child{border-left:0;padding-left:0}
.besuch h3{color:var(--copper);margin-bottom:.8rem}
.besuch p{color:var(--ink-soft)}
.besuch a{border-bottom:1px solid var(--line)}
.besuch a:hover{color:var(--copper-hi);border-bottom-color:var(--copper)}
@media (max-width:760px){
  .besuch-spalten{grid-template-columns:1fr}
  .besuch-spalten > div{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .besuch-spalten > div:first-child{border-top:0}
}
footer{position:relative;overflow:hidden;border-top:1px solid var(--line);
  padding:clamp(2.5rem,5vw,4rem) 0 3.5rem;color:var(--ink-faint);font-size:.82rem}
.fuss-marke{position:absolute;right:-2rem;bottom:-6rem;width:clamp(220px,26vw,380px);height:auto;
  opacity:.12;pointer-events:none;user-select:none}
.fuss-in{position:relative;display:flex;justify-content:space-between;align-items:flex-end;
  gap:2rem;flex-wrap:wrap}
.fuss-wortmarke{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(1.6rem,3vw,2.2rem);
  color:var(--ink);line-height:1;margin-bottom:.5rem}
.fusszeile{display:flex;gap:.4rem 2rem;flex-wrap:wrap}
.entwurfshinweis{position:relative;margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-style:italic;max-width:62ch}

/* ═══ Druck: aus der Seite wird eine Preisliste ════════════════════════ */
@media print{
  @page{margin:14mm}
  :root{--ground:#fff;--ground-2:#fff;--ground-3:#fff;--ink:#000;--ink-soft:#222;--ink-faint:#555;
    --line:#bbb;--copper:#7A4419;--copper-hi:#7A4419;--foil-a:#7A4419;--foil-b:#7A4419;--foil-c:#7A4419;
    --korn:0}
  body{background:#fff;color:#000;font-size:10.5pt}
  /* Die an den Scroll gekoppelte Einblendung läuft im Druck nicht an und
     bliebe sonst bei 25 % Deckkraft stehen. */
  *{animation:none !important;transition:none !important;opacity:1 !important;transform:none !important}
  body::after,.kopf,.laufband,.hero-bild,.wein-figur,.rebberg,.auftakt,.handwerk,.liste,
  .bestellen,.fuss-marke,.skip,.dazu,.drucken,.portraet{display:none !important}
  .wrap{width:100%}
  .hero{display:block;min-height:0;padding:0 0 6mm}
  .hero h1{font-size:30pt;line-height:.9}
  .hero-lead{max-width:none;margin-top:4mm;font-size:11pt}
  .hero-fakten{margin-top:4mm}
  .titelzeile{padding-bottom:3mm;margin-bottom:2mm}
  .titelzeile h2{font-size:18pt}
  .wein{display:block;padding:4mm 0;break-inside:avoid}
  .wein-name{font-size:22pt;margin-bottom:1mm}
  .wein-note{max-width:none;font-size:10pt}
  .wein-spek{grid-template-columns:repeat(2,1fr);margin-top:3mm}
  .wein-spek div{padding:1mm 0}
  .wein-fuss{margin-top:3mm;padding-top:2mm}
  .preis{font-size:15pt}
  .herkunft{break-inside:avoid;margin-top:4mm}
  .besuch{padding:6mm 0 0;break-inside:avoid}
  .besuch-kopf h2{font-size:14pt}
  .besuch-lead{display:none}
  .besuch-spalten{margin-top:3mm}
  footer{padding:4mm 0 0}
  .entwurfshinweis{margin-top:3mm;padding-top:2mm}
  a{color:#000;text-decoration:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}