/* ===========================================================================
   VINOSAS · weinankauf.info
   ===========================================================================

   SCHRIFT
   Die Wortmarke ist die Hausschrift: eine duenne geometrische Grotesk mit
   weiter Laufweite, kreisrundem O und spitzem A – Futura-Familie. Deshalb
   Jost fuer alle Ueberschriften, in Versalien, mit der Punkt-Trennung, die
   der Shop schon benutzt: LICHT.OBJEKTE, THE.CORKSCREW, VINOSAS.AUKTIONEN.

   Lesetext ist NICHT geometrisch. Futura hat eine kleine x-Hoehe und ist im
   Fliesstext anstrengend – besonders fuer aeltere Augen. Dafuer Archivo:
   grosse x-Hoehe, offene Punzen, eindeutige Buchstabenformen.

   RASTER
   Genau ein Container, genau ein Gutter, genau ein Kartenpolster, genau ein
   vertikaler Rhythmus. Keine Sektion hat eigene Abstaende. Wenn etwas nicht
   buendig steht, wurde ein Token verletzt – nicht eine Ausnahme gebraucht.

   BEWEGUNG
   Ausschliesslich transform und opacity. Beides laeuft auf dem Compositor,
   loest kein Layout und kein Repaint aus. Kein animiertes box-shadow, kein
   filter, kein background-attachment. prefers-reduced-motion schaltet ab.
   =========================================================================== */

/* -------------------------------------------------------------- Schriften */
@font-face{
  font-family:"Jost";
  font-style:normal; font-weight:200 800; font-display:swap;
  src:url("/assets/fonts/jost-latin.woff2") format("woff2-variations");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal; font-weight:500; font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
}

/* ----------------------------------------------------------------- Tokens
   Aus dem Shop gemessen und aus der Produktseite gegengeprueft:

     Logo         #650D23   tiefes Bordeaux
     Ueberschrift #000000   Versalien, geometrisch, LEICHT
     Der Punkt    laeuft in der TEXTFARBE mit – VINOSAS.AUKTIONEN,
                  WHATSAPP.NEWSLETTER, FINE.WINE. Niemals farbig.
     Flaechen     Weiss und Schwarz. Kein Beige.

   Bordeaux ist kein Flaechenton, sondern eine Signatur: der einzige Farbwert
   auf einer Seite, die sonst nur aus Schwarz, Weiss und Fotografie besteht.
   Genau deshalb wirkt er.
   -------------------------------------------------------------------------- */
:root{
  --ink:      #0A0A0A;
  --ink-2:    #131313;
  --paper:    #FFFFFF;
  /* Der zweite helle Ton. Neutral, kein Beige.
     Frueher #F7F7F6 – das war vom Weiss praktisch nicht zu unterscheiden, und
     zwei aufeinanderfolgende helle Sektionen liefen ineinander. Jetzt eine
     Stufe, die man sieht, ohne dass es grau wirkt. */
  --snow:     #E4E4E1;

  --wine:     #6E1023;
  --wine-lit: #9C1930;

  --dim:      #9C9C9A;   /* auf Schwarz  = 7,1:1 */
  --dim-l:    #5E5E5C;   /* auf Weiss    = 6,9:1 */

  --line-d:   rgba(255,255,255,.12);
  --line-l:   rgba(10,10,10,.11);

  /* Eine Familie, wie im Shop. Jost ist ein modernisiertes Futura:
     x-Hoehe/Versalhoehe = 0,66 statt 0,48 – deshalb auch als Lesetext
     tragfaehig, was echtes Futura nicht waere. */
  --d: "Jost", "Futura", "Century Gothic", sans-serif;
  --b: "Jost", "Futura", "Century Gothic", sans-serif;
  --m: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Das Raster. Fuenf Werte. Mehr gibt es nicht. */
  --max:    1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --gap:    clamp(20px, 2.4vw, 36px);
  --pad:    clamp(24px, 3vw, 44px);
  --sec:    clamp(84px, 10vw, 160px);

  /* Flaechen setzen sich durch einen TONWERT vom Grund ab, nicht durch eine
     Linie. Ein Rahmen zeichnet die Kante nach; eine Tonstufe laesst die
     Flaeche schweben. Das ist der Unterschied zwischen "abgegrenzt" und
     "gehoben". */
  --surf-light: #F4F4F2;   /* Kachel auf Weiss  */
  --surf-snow:  #FFFFFF;   /* Kachel auf Snow   */
  --surf-dark:  rgba(255,255,255,.055);
  --surf-dark-h:rgba(255,255,255,.085);

  --r:      10px;          /* Kacheln, Formulare, Flaechen */
  --r-sm:   8px;           /* Buttons, Eingabefelder */

  --alert:  #C0392B;
  --ease:   cubic-bezier(.22,.61,.24,1);
  --ease-o: cubic-bezier(.16,1,.3,1);     /* fuer Enthuellungen: schnell rein, weich aus */
}

*,*::before,*::after{box-sizing:border-box; min-width:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:5.5rem}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--b);
  /* 19 px Basis. Zwei Gruende: der Besucherkreis ist im Schnitt aelter, und
     Jost laeuft rund 15 % schmaler als eine Grotesk gleicher Groesse.
     Zeilenabstand 1,75 – eine geometrische Schrift braucht mehr Luft, sonst
     verschmelzen die runden Formen zeilenweise. */
  font-size:19px;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}
@media (min-width:1024px){ body{font-size:20px} }

img,svg{max-width:100%; display:block; height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-weight:400; text-wrap:balance}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
button,input,select,textarea{font:inherit}

:focus-visible{outline:3px solid var(--wine-lit); outline-offset:2px; border-radius:2px}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--wine);
      color:var(--paper); padding:1rem 1.5rem; font-weight:600}
.skip:focus{left:0}

/* ============================================== Container. Der einzige. === */
.wrap{
  width:100%;
  max-width:calc(var(--max) + 2 * var(--gutter));
  margin-inline:auto;
  padding-inline:var(--gutter);
}
/* Lesespalte. Ueber 66 Zeichen verliert das Auge beim Zeilenwechsel den
   Anschluss – ein Effekt, der mit dem Alter zunimmt. */
.measure{max-width:66ch}

.sec{padding-block:var(--sec)}
.sec--ink{background:var(--ink); color:var(--paper)}

.sec--snow{background:var(--snow); color:var(--ink)}
.sec--paper{background:var(--paper); color:var(--ink)}

/* Bordeaux in voller Flaeche. Die Markenfarbe einmal gross – und nur einmal.
   Weiss darauf: 11,9:1. */
/* Bordeaux in voller Flaeche – die Markenfarbe einmal gross, und nur einmal.
   Weiss darauf: 11,9:1.

   Darin zwei weiche Lichter, die langsam gegeneinander wandern. Sie sind reine
   radial-gradients (kein filter:blur – das waere teuer) und werden nur ueber
   transform bewegt. Der Effekt ist ein Waberns, das man wahrnimmt, ohne es zu
   bemerken: die Flaeche lebt, ohne dass etwas "animiert" aussieht.
   30 und 42 Sekunden Umlauf, gegenlaeufig – dadurch wiederholt sich das Muster
   erst nach Minuten und wirkt nie wie eine Schleife. */
/* Bordeaux gehoert der HANDLUNG (dem CTA-Band), nicht der Erzaehlung.
   Die Trust-Sektion steht deshalb in Schwarz: ruhig, dunkel, ohne Farbe –
   der Text traegt sie allein. Zweimal dieselbe Vollflaeche auf einer Seite
   waere eine Wiederholung, kein Akzent. */
.sec--wine{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg, #8A182F 0%, var(--wine) 45%, #4E0A1A 100%);
  color:var(--paper);
}
.sec--wine > .wrap{position:relative; z-index:1}
.sec--wine::before, .sec--wine::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:90vmax; height:90vmax; border-radius:50%;
  will-change:transform;
}
.sec--wine::before{
  top:-35%; left:-30%;
  background:radial-gradient(circle, rgba(214,62,102,.62) 0%, rgba(214,62,102,0) 60%);
  animation:wabern-a 17s ease-in-out infinite alternate;
}
.sec--wine::after{
  bottom:-40%; right:-25%;
  background:radial-gradient(circle, rgba(38,4,14,.78) 0%, rgba(38,4,14,0) 58%);
  animation:wabern-b 23s ease-in-out infinite alternate;
}
/* Die Laufzeiten sind teilerfremd (17 s / 23 s). Dadurch treffen sich die
   beiden Lichter erst nach 391 Sekunden wieder in derselben Stellung – das
   Muster wiederholt sich praktisch nie und wirkt nie wie eine Schleife.

   Die frueheren 30 s / 42 s waren zu langsam: die Flaeche aenderte sich pro
   Sekunde um weniger als 0,2 von 255. Das laeuft, aber niemand sieht es. */
@keyframes wabern-a{
  0%   {transform:translate3d(-6%,-4%,0) scale(.92)}
  100% {transform:translate3d(22%,16%,0) scale(1.38)}
}
@keyframes wabern-b{
  0%   {transform:translate3d(6%,4%,0) scale(1.3)}
  100% {transform:translate3d(-20%,-14%,0) scale(.85)}
}

/* Dasselbe Prinzip auf dem CTA-Band. Vorher lag dort ein Foto – und direkt
   davor liegt "Der Ablauf", ebenfalls ein dunkles Foto. Zwei dunkle Fotos
   uebereinander trennen sich nicht, egal wie man den Schleier dreht.

   Bordeaux loest beides auf einmal: harte Kante gegen das Foto darueber, und
   die Markenfarbe steht da, wo der Besucher handeln soll. Das ist kein
   Kompromiss, das ist die bessere Loesung. */
.band--wine{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg, #8A182F 0%, var(--wine) 45%, #4E0A1A 100%);
  color:var(--paper);
}
.band--wine > .wrap{position:relative; z-index:1}
.band--wine::before, .band--wine::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:90vmax; height:90vmax; border-radius:50%;
  will-change:transform;
}
.band--wine::before{
  top:-40%; left:-25%;
  background:radial-gradient(circle, rgba(214,62,102,.6) 0%, rgba(214,62,102,0) 60%);
  animation:wabern-a 19s ease-in-out infinite alternate;
}
.band--wine::after{
  bottom:-45%; right:-20%;
  background:radial-gradient(circle, rgba(38,4,14,.75) 0%, rgba(38,4,14,0) 58%);
  animation:wabern-b 27s ease-in-out infinite alternate;
}
.band--wine .eyebrow{color:rgba(255,255,255,.78)}
.band--wine .lead{color:rgba(255,255,255,.9)}

/* Dasselbe Licht, kleiner, im Bordeaux-Button. */
.btn--wine{isolation:isolate}
.btn--wine::before{
  content:""; position:absolute; z-index:-1;
  top:-70%; left:-25%; width:100%; height:240%; border-radius:50%;
  background:radial-gradient(circle, rgba(226,84,120,.6) 0%, rgba(226,84,120,0) 62%);
  animation:wabern-a 11s ease-in-out infinite alternate;
  will-change:transform;
}

/* ============================================================= Typografie */

/* Das Markenzeichen des Shops: WORT.WORT, Versalien, zweiter Teil fett.
   Kurz halten – lange Versalzeilen sind schwer zu lesen. */
.kick{
  display:block;
  font-family:var(--d);
  font-size:clamp(2rem, 6vw, 4.5rem);
  line-height:1.05;
  /* Leicht und weit. Das ist der ganze Unterschied zwischen "Versalien" und
     "Versalien, die teuer aussehen". Fett wirkt laut; hier soll nichts laut sein. */
  font-weight:200;
  /* Eng gesetzt. Versalien laufen von Natur aus auseinander; wer sie zusaetzlich
     sperrt, bekommt eine Zeile, die zerfaellt. Gestaucht wirkt teuer.
     Der Gegensatz zur weit gesperrten Eyebrow-Zeile macht die Eleganz aus –
     nicht beide weit, nicht beide eng. */
  letter-spacing:-.005em;
  text-transform:uppercase;
  margin:0;
  overflow-wrap:anywhere;
}
/* Rechtsseiten haben keine Kurztitel. Dort kleiner setzen. */
.legal .kick{font-size:clamp(1.8rem, 5vw, 3rem)}
/* Der Shop setzt den ersten Teil leicht, den zweiten kraeftiger – und den
   Punkt IMMER in der Textfarbe. VINOSAS.AUKTIONEN, WHATSAPP.NEWSLETTER,
   FINE.WINE: nirgends ist der Punkt farbig. Kein Akzent, keine Ausnahme.
   Und nichts davon ist fett: 200 gegen 500. Fett wirkt laut.
   Hier soll nichts laut sein. */
.kick i{font-style:normal; font-weight:200}
.kick b{font-weight:500}
.kick .dot{font-weight:500; color:inherit}

/* Der beschreibende Satz unter dem Versalkopf. Traegt die Bedeutung –
   und den Suchbegriff, den der Versalkopf nicht tragen kann. */
.deck{
  display:block;
  font-family:var(--d);
  font-weight:300;
  font-size:clamp(1.35rem, 2.6vw, 1.9rem);
  line-height:1.3;
  margin-top:.8rem;
  max-width:24ch;
  color:var(--wine-lit);
}
.sec--snow .deck{color:var(--ink)}

/* Die Zeile ueber der Ueberschrift. Im Shop: GRUENDE FUER WEINVERKAUF,
   DAS LEBEN DAVOR, VERSTECKTE MERKMALE. Weit gesperrt, klein, ruhig. */
.eyebrow{
  display:block;
  font-family:var(--d);
  font-size:.72rem; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase;
  margin:0 0 1.6rem;
  color:var(--dim);
}
.sec--snow .eyebrow{color:var(--dim-l)}

.sec--snow .eyebrow::before, .legal .eyebrow::before{background:var(--wine)}

/* Der Kopf JEDER Sektion. Immer derselbe Baustein, immer dieselbe linke
   Kante, immer derselbe Abstand nach unten. Das ist die Antwort auf
   "mal links, mal halb links, mal doppelter Margin". */
.head{margin-bottom:clamp(2.5rem, 5vw, 4rem)}
.head .lead{margin-top:1.7rem}

.lead{
  font-size:clamp(1.05rem, 1.6vw, 1.2rem);
  line-height:1.75;
  max-width:60ch;
  color:var(--dim);
  margin:0;
}
.sec--snow .lead{color:var(--dim-l)}

.mono{font-family:var(--m); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase}



/* ============================================ Akzent je nach Untergrund ===
   Bordeaux ist DIE Markenfarbe – aber auf Schwarz erreicht #6E1023 nur 1,7:1
   und verschwindet. Deshalb genau zwei Toene: das echte Bordeaux auf hellem
   Grund, ein angehobenes auf dunklem. Wer eine dritte Variante braucht, hat
   ein Layoutproblem, kein Farbproblem. */
.sec--snow .eyebrow, .sec--paper .eyebrow, .legal .eyebrow{color:var(--dim-l)}

.sec--snow .deck, .sec--paper .deck, .legal .deck{color:var(--wine)}
.sec--snow .lead, .sec--paper .lead, .legal .lead{color:var(--dim-l)}
.sec--snow .card__k, .sec--paper .card__k{color:var(--wine)}
.sec--snow .card__p, .sec--paper .card__p{color:var(--dim-l)}
.sec--snow .note p, .sec--paper .note p{color:var(--dim-l)}
.sec--snow .note__h, .sec--paper .note__h{color:var(--ink)}

/* Karten heben sich vom jeweiligen Grund ab, nicht durch Schatten, sondern
   durch eine Stufe im Ton. */
.sec--snow .card{background:var(--paper); border-color:var(--line-l)}
.sec--paper .card{background:var(--snow); border-color:var(--line-l)}
.sec--snow .card:hover, .sec--paper .card:hover{border-color:var(--wine); background:var(--paper)}

/* Die Bordeaux-Flaeche traegt Weiss, sonst nichts. */
.sec--wine .eyebrow{color:rgba(255,255,255,.75)}

.sec--wine .deck{color:rgba(255,255,255,.85)}
.sec--wine .prose p{color:rgba(255,255,255,.92)}
.sec--wine .sig{color:rgba(255,255,255,.7)}

/* ================================================================== Button */
.btn{
  position:relative; z-index:0; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:54px;                            /* Fingerkuppe, nicht Mauszeiger */
  padding:.9rem 1.4rem;
  line-height:1.3;
  text-wrap:balance;                          /* bricht mittig, nicht 1 Wort allein */
  font-family:var(--d);
  font-weight:600; font-size:1rem;
  letter-spacing:.06em; text-transform:uppercase;
  border:0; border-radius:var(--r-sm);
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{transform:translate3d(0,-2px,0)}
.btn:active{transform:none}
.btn--lg{min-height:60px; padding:1.05rem 2.1rem; font-size:1.05rem}
.btn--full{width:100%}
/* Primaer auf hellem Grund: Bordeaux. Das ist keine Abweichung vom Shop,
   sondern dessen eigene Farbe an der Stelle, wo sie am meisten arbeitet.
   Weiss darauf: 11,9:1. */
/* Primaer. Bordeaux mit Verlauf – ein Volltonfeld wirkt flach, ein Verlauf
   gibt der Flaeche Tiefe, ohne bunt zu werden. Dazu ein langsam wanderndes
   Licht (siehe .wabern weiter unten): es macht die Flaeche lebendig, ohne dass
   man sagen koennte, was sich da bewegt. Genau so soll es sein. */
.btn--wine{
  background:linear-gradient(145deg, #83162E 0%, var(--wine) 48%, #520A1B 100%);
  color:var(--paper);
  overflow:hidden;
}
.btn--ink{background:var(--ink); color:var(--paper)}
.btn--paper{background:var(--paper); color:var(--ink)}
/* Ersetzt die frueheren Outline-Buttons. Keine Linie, nur eine Tonstufe. */
.btn--soft{background:var(--surf-dark); color:var(--paper)}
.sec--snow .btn--soft, .sec--paper .btn--soft{background:var(--surf-light); color:var(--ink)}

/* Die Flaeche faehrt beim Hover ein, statt umzuschalten. */
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  /* inherit, sonst faehrt beim Hover eine RECHTECKIGE Flaeche in einen
     abgerundeten Button – und die Ecken werden wieder eckig. */
  border-radius:inherit;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s var(--ease-o);
}
.btn:hover::after{transform:none; transform-origin:100% 50%}
.btn--wine::after{background:linear-gradient(145deg, #9E1C38, #6E1023)}
.btn--ink::after{background:var(--wine)}
.btn--paper::after{background:var(--snow)}
.btn--soft::after{background:var(--paper)}
.btn--soft:hover{color:var(--ink)}
.sec--snow .btn--soft:hover, .sec--paper .btn--soft:hover{color:var(--paper)}
.sec--snow .btn--soft::after, .sec--paper .btn--soft::after{background:var(--ink)}

.btn:disabled{opacity:.32; cursor:not-allowed; transform:none}
.ico{width:1.2em; height:1.2em; flex:none}

/* ================================================================== Header */
.hdr{
  position:sticky; top:0; z-index:80;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.hdr[data-solid]{
  background:rgba(11,11,11,.9);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line-d);
}
.hdr__in{
  max-width:calc(var(--max) + 2 * var(--gutter));
  margin-inline:auto; padding:1rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:.75rem 1.5rem;
}
.hdr__logo{display:block; flex:none}
.hdr__logo img{width:132px}
.hdr__nav{display:none}
.hdr__end{display:flex; align-items:center; gap:1rem}
.hdr__cta{display:none}

.lang{display:flex; gap:.1rem; font-family:var(--m); font-size:.72rem; letter-spacing:.1em}
.lang a{
  min-height:44px; display:inline-flex; align-items:center;
  padding:0 .5rem; color:var(--dim); text-decoration:none;
  border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
}
.lang a[aria-current]{color:var(--wine-lit); border-bottom-color:var(--wine-lit)}
.lang a:hover{color:var(--paper)}

/* ==================================================================== Hero */
.hero{position:relative; display:flex; flex-direction:column; justify-content:flex-end;
      min-height:min(92svh, 900px); overflow:hidden}
.hero__bg{position:absolute; inset:0; z-index:0}
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(1.07);
  animation:heroIn 1.8s var(--ease) forwards;   /* nur transform → kostenlos */
}
@keyframes heroIn{to{transform:scale(1)}}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,11,11,.7) 0%, rgba(11,11,11,.25) 40%, rgba(11,11,11,.95) 92%),
    linear-gradient(90deg, rgba(11,11,11,.85) 0%, rgba(11,11,11,.15) 68%);
}
.hero__in{
  position:relative; z-index:1;
  width:100%; max-width:calc(var(--max) + 2 * var(--gutter));
  margin-inline:auto; padding:9rem var(--gutter) 3rem;
}
.hero__h1{margin:0 0 1.6rem}
.hero__h1 .kick{font-size:clamp(2.4rem, 8vw, 5rem)}
.hero__lead{
  font-size:clamp(1.1rem, 1.8vw, 1.28rem); line-height:1.68;
  color:rgba(255,255,255,.88); max-width:50ch; margin-bottom:2.2rem;
}
.hero__acts{display:grid; gap:.85rem; max-width:560px}
.hero__hint{margin:1.4rem 0 0; font-size:.95rem; color:var(--dim); max-width:46ch}

/* Die drei Zusagen. Fakten, keine Deko – deshalb eine Definitionsliste. */
.promise{
  position:relative; z-index:1; margin:0;
  display:grid; grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--line-d);
  background:rgba(11,11,11,.55); backdrop-filter:blur(8px);
}
.promise > div{padding:1.25rem 1rem; text-align:center}
.promise > div + div{border-left:1px solid var(--line-d)}
.promise dt{font-family:var(--m); font-size:.62rem; letter-spacing:.12em;
            text-transform:uppercase; color:var(--dim); margin-bottom:.35rem}
.promise dd{margin:0; font-family:var(--d); font-weight:600;
            font-size:clamp(1.15rem, 4vw, 1.7rem); color:var(--wine-lit); letter-spacing:.01em}


/* ============================================================ Kartenraster
   EIN Raster, EIN Polster, EIN Abstand. Alle Karten gehorchen dem. */
.grid{display:grid; gap:var(--gap)}
.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}

/* ================================================================= Kacheln
   Kein Rahmen. Die Flaeche setzt sich ueber eine Tonstufe ab.

   Der Hintergrund liegt in einem ::before, nicht auf der Kachel selbst –
   deshalb kann er sich beim Hover VERGROESSERN, ohne den Text mitzuziehen.
   Genau das ist der Effekt: die Flaeche atmet, die Schrift bleibt stehen.
   Beides sind transform und opacity, also compositor-only. */
.card{
  position:relative; z-index:0;
  padding:var(--pad);
  border-radius:var(--r);
  background:transparent;
}
.card::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background:var(--surf-light);
  opacity:.92;
  transform:scale(1);
  transition:transform .55s var(--ease-o), opacity .45s var(--ease);
}
.card:hover::before, .card:focus-within::before{
  transform:scale(1.035);
  opacity:1;
}
.card > *{position:relative}

.sec--snow .card::before{background:var(--surf-snow)}
.sec--paper .card::before{background:var(--surf-light)}
.sec--ink .card::before, .sec--ink2 .card::before{background:var(--surf-dark)}
.sec--ink .card:hover::before{background:var(--surf-dark-h)}

.card__k{font-family:var(--m); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
         color:var(--wine); margin:0 0 .9rem}
.card__h{font-family:var(--d); font-weight:500; font-size:1.35rem; line-height:1.25;
         letter-spacing:0; margin:0 0 .7rem}
.card__p{font-size:.98rem; line-height:1.7; margin:0; color:var(--dim)}
.sec--snow .card__p, .sec--paper .card__p{color:var(--dim-l)}

/* Der Hinweiskasten. Auch hier: eine Tonstufe, keine Linie. */
.note{
  margin-top:var(--gap);
  padding:var(--pad);
  border-radius:var(--r);
  background:var(--surf-dark);
}
.sec--snow .note{background:var(--surf-snow)}
.sec--paper .note{background:var(--surf-light)}
.sec--photo .note{background:rgba(10,10,10,.86)}
@supports (backdrop-filter: blur(2px)){
  .sec--photo .note{background:rgba(10,10,10,.58); backdrop-filter:blur(22px)}
}
.note__h{font-family:var(--d); font-weight:600; font-size:1.3rem; margin:0 0 .45rem;
         letter-spacing:.01em}
.note p{margin:0; color:var(--dim); font-size:1rem; max-width:60ch}
.sec--snow .note p{color:var(--dim-l)}

/* ============================================== Schachbrett (Bild / Text) ==
   Die stärkste Layout-Signatur des Shops: quadratisches Bild und schwarzes
   Textfeld im Wechsel, ohne Rand dazwischen, ohne Container. Zwei Zeilen,
   die zweite spiegelverkehrt.

   Kein `text-align:center` – der Shop zentriert dort, aber zentrierte
   Fliesstext-Absätze zwingen das Auge, den Zeilenanfang jedes Mal neu zu
   suchen. Bei diesem Publikum ist das der falsche Preis für ein Stilzitat. */
.story{display:grid; background:var(--ink); color:var(--paper)}
.story__row{display:grid}
.story__img{position:relative; aspect-ratio:1/1; overflow:hidden}
.story__img img{width:100%; height:100%; object-fit:cover;
                transition:transform 1.2s var(--ease)}
.story__row:hover .story__img img{transform:scale(1.04)}
.story__txt{display:flex; flex-direction:column; justify-content:center;
            padding:clamp(2rem, 6vw, 4.5rem) var(--gutter)}
.story__txt .kick{font-size:clamp(1.9rem, 5vw, 3rem)}
.story__txt .eyebrow{margin-bottom:1rem}
.story__p{margin-top:1.8rem; max-width:46ch; color:var(--dim)}
.story__p p{margin-bottom:1.1em}
.story__p p:last-child{margin-bottom:0}

@media (min-width:840px){
  .story__row{grid-template-columns:1fr 1fr; align-items:stretch}

  /* aspect-ratio MUSS hier weg.
     Die Zeilenhoehe wird von der Textspalte bestimmt. Ist der Text hoeher als
     die Spalte breit, rechnet aspect-ratio:1/1 aus dieser Hoehe die BREITE –
     und das Bild wird breiter als seine Spalte und schiebt die Seite auf.
     Bei 1024 px waren das je nach Sprache 112 bis 217 px Ueberlauf.
     Zweispaltig fuellt das Bild schlicht seine Zelle. */
  .story__img{aspect-ratio:auto; height:100%; min-width:0}

  /* Zweite Zeile gespiegelt: Text links, Bild rechts. */
  .story__row:nth-child(even) .story__img{order:2}
  .story__row:nth-child(even) .story__txt{order:1}
  .story__txt{padding-inline:clamp(2.5rem, 5vw, 5rem)}
}

/* =========================================================== Vollbild-Band
   Ein Bild ueber die volle Breite mit sanftem Parallax. Der Versatz laeuft
   ueber translate3d in einem requestAnimationFrame – kein Layout, kein Repaint. */
.band{position:relative; overflow:hidden; display:grid; align-items:center}
.band__bg{position:absolute; inset:-12% 0; z-index:0}
.band__bg img{width:100%; height:100%; object-fit:cover}
.band__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,11,11,.94) 0%, rgba(11,11,11,.6) 55%, rgba(11,11,11,.25) 100%);
}
.band__in{position:relative; z-index:1; padding-block:var(--sec)}
.band .lead{margin-bottom:2.2rem}

/* ============================================ Ankaufsliste (Signature) ==== */
.ledger{background:var(--paper); color:var(--ink); border-radius:var(--r); overflow:hidden;
        box-shadow:0 1px 0 rgba(10,10,10,.04), 0 18px 50px -28px rgba(10,10,10,.28)}
.ledger__head{
  display:flex; align-items:center; gap:.5rem 1rem; flex-wrap:wrap;
  background:var(--ink); color:var(--paper);
  padding:1.15rem var(--pad);
}
.ledger__brand{font-family:var(--d); font-weight:300; font-size:1.05rem;
               letter-spacing:.3em; color:var(--wine-lit)}
.ledger__title{color:var(--dim); flex:1}
.ledger__tot{color:var(--wine-lit); font-size:.7rem}

.ledger__row{
  border-bottom:1px solid var(--line-l);
  padding:1.5rem var(--pad);
  display:grid; gap:1rem;
  animation:rowIn .45s var(--ease) both;
}
@keyframes rowIn{from{opacity:0; transform:translate3d(0,10px,0)} to{opacity:1; transform:none}}
.ledger__no{display:flex; justify-content:space-between; align-items:center;
            font-family:var(--m); font-size:.7rem; letter-spacing:.12em; color:var(--dim-l)}
.ledger__rm{
  min-height:44px; padding:0 .7rem;
  background:none; border:0; cursor:pointer;
  font-family:var(--m); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--alert); transition:background .2s, color .2s;
}
.ledger__rm:hover{background:var(--alert); color:var(--paper)}

/* Das Raster der Ankaufsliste.

   EINE Spalte auf dem Handy. Vorher standen dort zwei nebeneinander – und
   damit war jedes Feld unter 190 px breit. In "Château Léoville-Las Cases"
   sieht man dann acht Zeichen. Wer seinen Keller eintippt, tippt blind.

   Ab 600 px zwei Spalten, ab 960 px vier. Die Sprungstelle 960 ist nicht
   frei gewaehlt: dort geht auch der Fuss der Liste in eine Zeile (siehe
   .ledger__foot). Vorher sprang das Raster schon bei 600 px auf VIER Spalten –
   auf einem 600er-Tablet also vier Felder nebeneinander, jedes 130 px breit.

   .lf--span2 hat nur ab 600 px eine Bedeutung: bei zwei Spalten fuellt es die
   Zeile (Erzeuger, Wein, Fuellstand – die langen Texte), bei vier Spalten die
   halbe. In der Einspalter-Ansicht braucht es keine Regel, dort ist ohnehin
   alles gleich breit. */
.ledger__grid{display:grid; grid-template-columns:1fr; gap:1rem}
.lf{display:flex; flex-direction:column; gap:.4rem}
.lf--full{grid-column:1 / -1}

/* min-width:0 gegen den Klassiker: ein Grid-Element ist nie schmaler als sein
   Inhalt, also sprengt ein langes Wort in einem <select> die Spalte und die
   ganze Seite scrollt seitlich. */
.lf{min-width:0}
.lf input, .lf select{max-width:100%}
.lf > label{font-family:var(--m); font-size:.62rem; letter-spacing:.13em;
            text-transform:uppercase; color:var(--dim-l)}

/* Eingabefelder. 17 px, weil iOS bei allem darunter beim Fokus hineinzoomt.
   52 px hoch, damit auch eine ungenaue Fingerkuppe trifft. */
.lf input, .lf select, .f input, .f textarea, .f select{
  font-family:var(--b); font-size:17px; line-height:1.5;
  min-height:52px; padding:.75rem .9rem; width:100%;
  border-radius:var(--r-sm);
  transition:box-shadow .2s var(--ease);
}
.lf input, .lf select{background:var(--snow); color:var(--ink); border:0;
                      box-shadow:inset 0 0 0 1px rgba(10,10,10,.09)}
.lf input:focus, .lf select:focus{outline:none;
                                  box-shadow:inset 0 0 0 1px var(--wine), 0 0 0 3px rgba(110,16,35,.18)}

.ledger__empty{padding:3rem var(--pad); text-align:center; color:var(--dim-l); margin:0}
.ledger__empty[hidden]{display:none}
/* Die drei Buttons ("Wein hinzufuegen", "Als Excel herunterladen",
   "Liste an VINOSAS senden") passen erst ab 960 px nebeneinander. Darunter
   brach der Text INNERHALB der Buttons um – haesslich und schwer zu treffen.

   Also: gestapelt, aber nicht ueber die volle Breite. Ein Button, der die
   ganze Zeile fuellt, sieht auf einem Tablet aus wie ein Fehler. */
.ledger__foot{
  display:grid; gap:.75rem; padding:var(--pad);
  background:var(--snow); border-top:1px solid var(--line-l);
  justify-items:start;
}
.ledger__foot .btn{width:100%; max-width:360px}
.ledger__foot-end{display:grid; gap:.75rem; width:100%; max-width:360px}
.ledger__foot-end .btn{max-width:none}

/* KEIN globales white-space:nowrap auf .btn.

   Das stand hier mal – gegen die Ankaufslisten-Buttons, deren Text umbrach.
   Der eigentliche Fix war aber das Stapeln mit Maximalbreite (oben). nowrap
   hat den Umbruch nur durch einen UEBERLAUF ersetzt: die Schrift lief links
   und rechts aus der Flaeche heraus. Ueber die ganze Seite gemessen waren das
   16 Buttons in drei Sprachen.

   Ein Button, der zweizeilig wird, sieht ungewohnt aus. Ein Button, dessen
   Schrift herauslaeuft, sieht kaputt aus. */
.btn{white-space:normal; line-height:1.3; padding-block:.85rem}

.alt{
  margin-top:var(--gap);
  background:var(--surf-light);
  border-radius:var(--r);
  padding:var(--pad);
  display:grid; gap:1.5rem;
}
.sec--snow .alt{background:var(--surf-snow)}
.alt__h{font-family:var(--d); font-weight:600; font-size:1.35rem; margin:0 0 .5rem;
        letter-spacing:.01em}
.alt{border-color:rgba(11,11,11,.3)}
.alt p{margin:0; color:var(--dim-l); font-size:1rem; max-width:52ch}
.alt__act{display:grid; gap:.75rem; justify-items:start}
.alt__meta{color:var(--dim-l); margin:0}

/* ================================================================== Ablauf */
.steps{list-style:none; margin:0; padding:0; display:grid}
.step{display:grid; grid-template-columns:auto 1fr; gap:1.5rem;
      padding-block:2rem; border-top:1px solid var(--line-d)}
.step:last-child{border-bottom:1px solid var(--line-d)}
.step__n{font-family:var(--d); font-weight:300; font-size:2rem; line-height:1;
         color:var(--wine-lit); letter-spacing:.02em}
.step__h{font-family:var(--d); font-weight:600; font-size:1.35rem; margin:0 0 .55rem;
         letter-spacing:.01em}
.step p{color:var(--dim); margin:0 0 .7rem; max-width:52ch; font-size:1rem}
.step__t{color:var(--wine-lit); font-size:.68rem; margin:0}

/* =============================================================== Bewertung */
.factors{list-style:none; margin:0; padding:0; counter-reset:f}
.factor{counter-increment:f; position:relative;
        padding:1.75rem 0 1.75rem 3.5rem; border-top:1px solid var(--line-l)}
.factor:last-child{border-bottom:1px solid var(--line-l)}
.factor::before{
  content:counter(f, decimal-leading-zero);
  position:absolute; left:0; top:1.95rem;
  font-family:var(--m); font-size:.75rem; letter-spacing:.1em; color:var(--wine);
}
.factor__h{font-family:var(--d); font-weight:600; font-size:1.3rem; margin:0 0 .45rem;
           letter-spacing:.01em}
.factor p{margin:0; color:var(--dim-l); font-size:1rem; max-width:52ch}

/* Fuellhoehe: das Fachvokabular des Weinhandels, sichtbar gemacht */
.ullage{margin:0; background:var(--ink); color:var(--paper); padding:var(--pad);
        border-radius:var(--r)}
.ullage__h{font-family:var(--d); font-weight:600; font-size:1.4rem; color:var(--wine-lit);
           margin:0 0 .6rem; letter-spacing:.01em}
.ullage figcaption p{font-size:.98rem; color:var(--dim); margin:0 0 2rem}
.ullage__stage{display:grid; grid-template-columns:auto 1fr; gap:1.75rem; align-items:center}
.ullage__bottle{width:96px; overflow:visible}
.ullage__glass{fill:none; stroke:rgba(201,162,83,.6); stroke-width:2}
.ullage__cap{fill:var(--wine-lit); opacity:.9}
.ullage__wine{fill:#6E1223; transition:y .55s var(--ease), height .55s var(--ease)}
.ullage__tick{stroke:rgba(201,162,83,.3); stroke-width:1; transition:stroke .25s}
.ullage__tick[data-on]{stroke:var(--wine-lit); stroke-width:2}
.ullage__legend{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.ullage__legend button{
  width:100%; min-height:46px; text-align:left;
  background:transparent; border:0; cursor:pointer;
  font-family:var(--m); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); padding:.5rem .7rem;
  border-left:2px solid transparent;
  transition:color .2s, background .2s, border-color .2s;
}
.ullage__legend button:hover{color:var(--paper); background:rgba(255,255,255,.05)}
.ullage__legend button[aria-current]{color:var(--wine-lit); border-left-color:var(--wine-lit);
                                     background:rgba(196,48,76,.12)}

/* =================================================================== Trust */
.prose{max-width:64ch}
.prose p{font-size:1.1rem; line-height:1.78; margin-bottom:1.35em; color:rgba(255,255,255,.9)}
.sig{margin-top:2.5rem; color:var(--wine-lit); font-size:.7rem}

/* ===================================================================== FAQ */
.faq{border-top:1px solid var(--line-l)}
.faq__i{border-bottom:1px solid var(--line-l)}
.faq__i summary{
  list-style:none; cursor:pointer; position:relative;
  display:flex; align-items:center;
  padding:1.5rem 3rem 1.5rem 0;            /* grosszuegige Trefferflaeche */
  min-height:64px;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__q{font-family:var(--d); font-weight:500; font-size:1.2rem; line-height:1.35;
        margin:0; letter-spacing:.005em}
.faq__i[open] .faq__q{font-weight:700}
.faq__x{position:absolute; right:0; top:50%; width:16px; height:16px; margin-top:-8px}
.faq__x::before,.faq__x::after{content:""; position:absolute; background:var(--wine);
                               transition:transform .3s var(--ease)}
.faq__x::before{left:0; top:7px; width:16px; height:2px}
.faq__x::after{left:7px; top:0; width:2px; height:16px}
.faq__i[open] .faq__x::after{transform:rotate(90deg)}
.faq__a{padding:0 0 1.75rem; max-width:64ch}
.faq__a p{margin:0; color:var(--dim-l); font-size:1.02rem; line-height:1.75}

/* ================================================================= Kontakt */
.chan{display:flex; flex-direction:column; gap:.25rem;
      text-decoration:none; padding:1.25rem 0;
      border-top:1px solid var(--line-d);
      transition:padding-left .25s var(--ease)}
.chan:last-of-type{border-bottom:1px solid var(--line-d)}
.chan:hover{padding-left:.75rem}
.chan__l{color:var(--dim); font-size:.64rem}
.chan__v{font-family:var(--d); font-weight:500; font-size:1.3rem; color:var(--paper);
         letter-spacing:.01em}
.chan--wa .chan__l{color:#25D366}
/* .contact ist erst ab 1024 px ein Grid. Mobil stapelten die Kinder deshalb
   ohne jeden Abstand – das Formular klebte direkt am Adressblock.
   Der Abstand gehoert in die Basis, nicht in den Breakpoint. */
.contact{display:grid; gap:clamp(2.75rem, 7vw, 4rem)}
.contact__addr{margin:2.25rem 0 0; font-style:normal; color:var(--dim); line-height:1.8;
               font-size:1rem}

.form{background:var(--surf-dark); border-radius:var(--r); padding:var(--pad)}
.f{margin-bottom:1.4rem}
.f > label{display:block; font-family:var(--m); font-size:.64rem; letter-spacing:.13em;
           text-transform:uppercase; color:var(--dim); margin-bottom:.55rem}
.f > label b{color:var(--wine-lit)}
.f input, .f textarea, .f select{background:rgba(255,255,255,.94); color:var(--ink); border:0}
.f textarea{resize:vertical; min-height:150px}
.f input:focus, .f textarea:focus{outline:none; box-shadow:0 0 0 3px rgba(196,48,76,.45)}
.f__hint{color:var(--dim); margin:.5rem 0 0; font-size:.62rem}
.f-row{display:grid; gap:0}
.f--check{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start;
          margin-bottom:1.75rem}
.f--check input{width:26px; height:26px; min-height:0; padding:0; margin-top:.2rem;
                accent-color:var(--wine-lit); background:none; border:none}
.f--check label{margin:0; font-family:var(--b); font-size:.98rem; letter-spacing:0;
                text-transform:none; color:var(--dim); line-height:1.6}
.f--check label a{color:var(--paper); text-decoration:underline; text-underline-offset:3px; font-weight:600}
.f input[type=file]{background:var(--surf-dark); color:var(--paper); padding:.9rem}
.f .invalid{box-shadow:0 0 0 3px rgba(192,57,43,.55)}
.hp{position:absolute; left:-9999px}
.form__msg{margin:1.25rem 0 0; font-size:1rem; min-height:1.5em}
.form__msg[data-state=ok]{color:var(--wine-lit)}
.form__msg[data-state=err]{color:#F09A90}

/* ============================================================ Rechtsseiten */
.legal{padding-top:calc(var(--sec) * .65)}
.legal__date{color:var(--dim-l); margin:0 0 2.5rem}
.tldr{background:var(--ink); color:var(--paper); border-radius:var(--r);
      padding:var(--pad); margin:0 0 3.5rem}
.tldr__h{font-family:var(--d); font-weight:600; font-size:1.35rem; color:var(--wine-lit);
         margin:0 0 1.1rem; letter-spacing:.01em}
.tldr ul{margin:0; padding-left:1.2rem; display:grid; gap:.85rem}
.tldr li{color:rgba(255,255,255,.85)}
.tldr li::marker{color:var(--wine-lit)}
.tldr strong{color:var(--paper); font-weight:600}
.legal__b{padding-block:2rem; border-top:1px solid var(--line-l)}
.legal__b:last-child{border-bottom:1px solid var(--line-l)}
.legal__b h2{font-family:var(--d); font-weight:600; font-size:1.35rem; margin:0 0 .9rem;
             letter-spacing:.01em}
.legal__b p{max-width:68ch; margin-bottom:1.1em}
.legal__b strong{font-weight:600}
.todo{background:#FFF6DC; border-radius:var(--r-sm); padding:1.1rem 1.25rem;
      font-size:.95rem !important; color:#5A2A22}
.legal__back{margin-top:3rem}
.legal__back a{font-weight:600; text-decoration:underline; text-underline-offset:5px}

/* ================================================================ Shop-CTA */
.shopcta{background:var(--ink-2); border-top:1px solid var(--line-d);
         padding-block:var(--sec); text-align:center}
.shopcta p{color:var(--dim); max-width:52ch; margin:1.75rem auto 2.5rem}

/* ================================================================== Footer */
.ftr{background:var(--ink); border-top:1px solid var(--line-d); padding-top:var(--sec)}
.ftr__in{display:grid; gap:3rem; padding-bottom:3.5rem}
.ftr__claim .kick{font-size:clamp(1.9rem, 5.5vw, 3rem)}
.ftr__h{font-family:var(--m); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
        color:var(--wine-lit); margin:0 0 1.1rem; font-weight:400}
.ftr__col p{color:var(--dim); line-height:1.85; margin:0; font-size:.95rem}
.ftr__col a{color:rgba(255,255,255,.86); text-decoration:underline; text-underline-offset:3px}
.ftr__col a:hover{color:var(--wine-lit)}
.ftr__legal{list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.6rem}
.ftr__legal a{font-size:.95rem}
.ftr__soc{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem}
.ftr__soc a{min-width:46px; min-height:46px; display:inline-flex; align-items:center;
            justify-content:center; border-radius:var(--r-sm);
            background:var(--surf-dark); color:var(--paper); text-decoration:none;
            transition:background .25s var(--ease), transform .25s var(--ease)}
.ftr__soc a:hover{background:var(--wine-lit); color:var(--ink)}
.ftr__base{display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
           border-top:1px solid var(--line-d); padding-block:1.75rem;
           color:var(--dim); font-size:.62rem}
.ftr__langs{display:flex; gap:1rem}
.ftr__langs a{text-decoration:none}
.ftr__langs a:hover{color:var(--wine-lit)}

/* ============================================== Dock (mobil, Conversion) === */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex; gap:.6rem;
  background:rgba(11,11,11,.95); backdrop-filter:blur(16px);
  border-top:1px solid var(--line-d);
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  transform:translate3d(0,110%,0);
  transition:transform .4s var(--ease);
}
.dock[data-show]{transform:translate3d(0,0,0)}
.dock__b{
  flex:1; min-height:52px;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--d); font-weight:600; font-size:.92rem;
  letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none; border-radius:var(--r-sm);
}
.dock__b svg{width:1.2em; height:1.2em}
.dock__b--wa{background:#25D366; color:#042A16; flex:0 0 44%}
.dock__b--main{background:var(--paper); color:var(--ink)}
body:has(.dock[data-show]){padding-bottom:5rem}

/* =========================================================== Scroll-Reveal
   opacity + translate3d, sonst nichts. Ohne JavaScript ist alles sofort
   sichtbar – die Klasse .in wird dann gar nicht erst gebraucht. */
.js .r{opacity:0; transform:translate3d(0,22px,0);
       transition:opacity .7s var(--ease), transform .7s var(--ease);
       transition-delay:calc(var(--i, 0) * 70ms)}
.js .r.in{opacity:1; transform:none}

/* ============================================================= Breakpoints */
@media (min-width:600px){
  .hero__acts{grid-template-columns:1fr 1fr}
  .grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2, 1fr)}
  .f-row{grid-template-columns:1fr 1fr; gap:0 1.25rem}

  /* Tablet: zwei Felder je Zeile. Die langen Texte nehmen die ganze. */
  .ledger__grid{grid-template-columns:repeat(2, 1fr)}
  .ledger__grid .lf--span2{grid-column:span 2}
  .alt{grid-template-columns:1fr auto; align-items:center}
  .alt__act{justify-items:end}
}

@media (min-width:960px){
  /* Desktop: vier Felder je Zeile, Erzeuger/Wein/Fuellstand ueber zwei. */
  .ledger__grid{grid-template-columns:repeat(4, 1fr)}

  /* Erst hier ist wirklich Platz fuer drei Buttons in einer Zeile. */
  .ledger__foot{grid-template-columns:auto auto; justify-content:space-between;
                align-items:center; justify-items:stretch}
  .ledger__foot .btn{width:auto; max-width:none}
  .ledger__foot-end{grid-auto-flow:column; width:auto; max-width:none}

  .grid--3{grid-template-columns:repeat(3, 1fr)}
  .grid--4{grid-template-columns:repeat(4, 1fr)}
  .steps{grid-template-columns:1fr 1fr; column-gap:calc(var(--gap) * 2)}
  .step:nth-last-child(-n+2){border-bottom:1px solid var(--line-d)}
  .ftr__in{grid-template-columns:1.15fr 1fr 1fr; gap:var(--gap)}
}

/* Layout ab 1024: Zweispalter, Hero, Dock aus. */
@media (min-width:1024px){
  .hero__in{padding-top:11rem; padding-bottom:4.5rem}
  .hero__acts{max-width:none; grid-template-columns:max-content max-content}

  /* Zweispalter. Ueberall dasselbe Verhaeltnis, damit die Kanten ueber alle
     Sektionen hinweg auf derselben Linie sitzen. */
  .split{display:grid; grid-template-columns:1.05fr .95fr; gap:calc(var(--gap) * 2);
         align-items:start}
  .contact{grid-template-columns:.8fr 1.2fr; gap:calc(var(--gap) * 2)}
  .ullage{position:sticky; top:6.5rem}
  .ullage__bottle{width:120px}
}

/* Die Kopfnavigation erscheint erst, wenn sie auch WIRKLICH hineinpasst.

   1024 px war zu frueh. In EN und ES sind die Labels laenger; die Links sind
   Flex-Kinder und duerfen per Voreinstellung schrumpfen – und das globale
   min-width:0 erlaubt ihnen sogar, unter ihre Inhaltsbreite zu gehen. Dann
   bricht der Text mitten im Wort um. Genau das ist passiert.

   Drei Riegel dagegen:
     1. flex:none         – der Link schrumpft nicht mehr.
     2. white-space:nowrap – und bricht auch dann nicht um.
     3. Breakpoint 1180   – die Leiste erscheint erst, wenn Platz da ist.

   Damit die drei Riegel nicht irgendwann still ueberrannt werden, prueft
   tools/check_nav.py bei jedem Build, ob die Labels in das Budget passen. */
@media (min-width:1240px){
  .hdr__nav{display:flex; gap:clamp(.9rem, 1.5vw, 1.6rem); flex:0 1 auto}
  .hdr__nav a{
    flex:none;
    white-space:nowrap;
    font-family:var(--d); font-weight:500; font-size:.82rem;
    letter-spacing:.08em; text-transform:uppercase;
    color:rgba(255,255,255,.78); text-decoration:none;
    padding-block:.35rem; border-bottom:1px solid transparent;
    transition:color .25s, border-color .25s;
  }
  .hdr__nav a:hover{color:var(--paper); border-bottom-color:var(--paper)}
  .hdr__cta{display:inline-flex; min-height:44px; padding:.6rem 1.2rem; font-size:.82rem}
  .hdr__logo img{width:148px}

  /* Das Dock verschwindet GENAU DANN, wenn die Header-CTA erscheint – keinen
     Pixel frueher. Sonst gibt es zwischen 1024 und 1239 px eine Zone ganz ohne
     Handlungsaufforderung: keine Navigation, kein Button im Kopf, kein Dock. */
  .dock{display:none}
  body:has(.dock){padding-bottom:0}
}

/* ------------------------------------------- Bewegung nur, wenn erwuenscht */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .sec--wine::before, .sec--wine::after, .btn--wine::before{animation:none}
  .card::before{transform:none !important}
  html{scroll-behavior:auto}
  .js .r{opacity:1; transform:none}
  .hero__bg img{animation:none; transform:none}
}

/* ---------------------------------------------------------------- Drucken */
@media print{
  .hdr, .dock, .hero__bg, .sec--photo .photo, .band__bg, .shopcta, .form, .progress{display:none}
  body{background:#fff; color:#000; font-size:11pt}
  .sec{padding-block:1rem}
  .js .r, .js .w > span{opacity:1; transform:none}
}


/* ================================= Akzent auf DUNKLEM Untergrund =========
   Regel, an der nicht gedreht wird:

   Bordeaux #6E1023 erreicht auf Schwarz 1,7:1 – unsichtbar. Hebt man es an,
   bis kleine Schrift die geforderten 4,5:1 schafft, ist es kein Bordeaux mehr,
   sondern Pink. Also nicht heller drehen, sondern anders loesen:

   Auf dunklem Grund traegt WEISS den Akzent. Bordeaux erscheint dort nur noch
   als Punkt im Versalkopf und als Trennlinie – beides gross bzw. kein Text,
   beides braucht nur 3:1 und schafft 3,6:1.

   Das ist keine Notloesung, sondern genau das, was der Shop macht: seine
   dunklen Flaechen sind Fotos mit weisser Schrift. Die Markenfarbe lebt auf
   dem hellen Putz – und der ist jetzt der groesste Teil dieser Seite.
   ------------------------------------------------------------------------ */
.hero .deck,
.band .deck,
.sec--ink .deck                     {color:rgba(255,255,255,.9)}

.sec--ink .ftr__h, .ftr__h          {color:var(--paper)}
.ledger__brand                      {color:var(--paper)}
.ullage__h                          {color:var(--paper)}
.tldr__h                            {color:var(--paper)}
.promise dd                         {color:var(--paper)}
.sig                                {color:rgba(255,255,255,.65)}
.f > label b                        {color:var(--paper)}
.form__msg[data-state=ok]           {color:var(--paper)}
.lang a[aria-current]               {color:var(--paper); border-bottom-color:var(--paper)}
.ullage__legend button[aria-current]{color:var(--paper); border-left-color:var(--wine-lit);
                                     background:rgba(196,48,76,.16)}
.ftr__soc a                         {color:var(--paper); border-color:rgba(255,255,255,.35)}
.ftr__soc a:hover                   {background:var(--paper); color:var(--ink)}
.chan--wa .chan__l                  {color:#4AE07F}

/* Bordeaux bleibt auf Dunkel genau hier – gross genug oder gar kein Text: */


/* ===================================== Akzent auf HELLEM Untergrund ====== */
.sec--snow .step__t, .sec--paper .step__t,
.sec--snow .factor__h, .sec--paper .factor__h {color:inherit}
.sec--paper .step__t{color:var(--wine)}
.sec--snow .step__n, .sec--paper .step__n{color:var(--wine)}
.sec--snow .step p, .sec--paper .step p{color:var(--dim-l)}
.sec--snow .step, .sec--paper .step{border-color:var(--line-l)}
.sec--snow .steps .step:last-child, .sec--paper .steps .step:last-child{border-bottom-color:var(--line-l)}
.sec--snow .factor::before, .sec--paper .factor::before{color:var(--wine)}
.sec--snow .faq__x::before, .sec--snow .faq__x::after,
.sec--paper .faq__x::before, .sec--paper .faq__x::after{background:var(--wine)}


/* ===========================================================================
   EFFEKTE
   Ohne Ausnahme transform und opacity. Beides laeuft auf dem Compositor:
   kein Layout, kein Repaint, keine Kosten pro Bild. Alles andere – width,
   top, box-shadow, filter – zwingt die CPU zur Neuberechnung und ruckelt auf
   einem sechs Jahre alten Handy. Das ist der Unterschied zwischen "animiert"
   und "teuer animiert".
   =========================================================================== */

/* -- Lesefortschritt. Eine Haarlinie in Bordeaux, sonst nichts. ----------- */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:120;
  background:var(--wine);
  transform:scaleX(0); transform-origin:0 50%;
  will-change:transform;
}

/* -- Ueberschriften: Wort fuer Wort von unten herein. --------------------
   Nicht Buchstabe fuer Buchstabe. Das ist der Unterschied zwischen elegant
   und Kirmes – und es haelt den Screenreader-Text zusammen. */
.js .w{display:inline-block; overflow:hidden; vertical-align:top}
.js .w > span{
  display:inline-block;
  transform:translate3d(0,110%,0);
  transition:transform .9s var(--ease-o);
  transition-delay:calc(var(--wi, 0) * 60ms);
}
.js .in .w > span, .js .w.in > span{transform:none}

/* -- Haarlinien ziehen sich auf. ----------------------------------------- */
.rule{height:1px; background:currentColor; opacity:.16;
      transform:scaleX(0); transform-origin:0 50%;
      transition:transform 1.1s var(--ease-o)}
.js .in .rule, .js .rule.in{transform:none}

/* -- Buttons: die Flaeche faehrt ein, statt einfach umzuschalten. --------- */
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--ease-o);
}
.btn:hover::after{transform:none; transform-origin:100% 50%}
.btn--wine::after{background:var(--wine-lit)}
.btn--ink::after{background:var(--wine)}
.btn--paper::after{background:var(--snow)}
.btn--wire::after{background:var(--paper)}
.btn--wire:hover{color:var(--ink); border-color:var(--paper)}
.btn--wire-ink::after{background:var(--ink)}
.btn--wire-ink:hover{color:var(--paper); border-color:var(--ink)}
.btn--wine:hover, .btn--ink:hover, .btn--paper:hover{background:inherit}

/* -- Bilder enthuellen sich, statt aufzupoppen. -------------------------- */
.reveal{overflow:hidden}
.reveal img{transform:scale(1.12); transition:transform 1.4s var(--ease-o)}
.js .in .reveal img, .js .reveal.in img{transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  .js .w > span, .js .rule, .reveal img, .btn::after{
    transform:none !important; transition:none !important;
  }
  .card::before{transition:none !important}
  .progress{display:none}
}


/* ======================================================== Echtheitspruefung
   Vier Schritte als Flaechen, nicht als Liste.

   Der Grund ist nicht Deko: "Wie wir pruefen" (weiss) und "Die Bewertung"
   (Snow) liegen direkt hintereinander und waren allein ueber den Tonwert kaum
   zu trennen. Ein Tonwert-Unterschied von 7 % ist eine Nuance; eine andere
   STRUKTUR ist ein Unterschied. Deshalb hier Kacheln, dort eine gesetzte Liste
   mit Ziffern. Man sieht sofort, dass eine neue Sektion begonnen hat. */
.auth{list-style:none; margin:0; padding:0; display:grid; gap:var(--gap)}
.auth__i{
  position:relative; z-index:0;
  padding:var(--pad);
  border-radius:var(--r);
}
.auth__i::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background:var(--surf-light);
  opacity:.92;
  transition:transform .55s var(--ease-o), opacity .45s var(--ease);
}
.auth__i:hover::before{transform:scale(1.035); opacity:1}
.auth__n{
  display:block;
  font-family:var(--d); font-weight:200; font-size:2.5rem; line-height:1;
  letter-spacing:0; color:var(--wine); margin-bottom:1.25rem;
}
.auth__e{
  font-family:var(--d); font-size:.68rem; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase; color:var(--dim-l);
  margin:0 0 .5rem;
}
.auth__h{
  font-family:var(--d); font-weight:500; font-size:1.4rem;
  letter-spacing:0; text-transform:uppercase; margin:0 0 .9rem;
}
.auth__p{margin:0; color:var(--dim-l); font-size:1rem}

@media (min-width:900px){
  .auth{grid-template-columns:repeat(4, 1fr)}
}


/* ============================================================ Foto-Sektion
   Ein Bild ueber die volle Sektionshoehe, beim Scrollen langsam versetzt.

   Zwei verschiedene Loesungen fuer zwei verschiedene Probleme:

   #buy  – der Weinberg soll SICHTBAR sein. Deshalb bleibt das Bild hell
           (p99 = 100) und der Text sitzt nicht darauf, sondern auf Glas-
           Kacheln: getoente Flaeche plus backdrop-filter. Die Weichzeichnung
           nimmt dem Untergrund genau das, was Text unlesbar macht – die
           lokalen Lichtspitzen.

   #process – dort steht der Text nackt auf dem Foto. Also muss das Bild dunkel
           bleiben (p99 = 48). Kein Glas, kein Trick, nur ein dunkles Bild.

   Beides ist im Build gerechnet (build_bg in build.py), nicht per Schleier
   erschlagen. Ein dicker schwarzer Schleier waere bequemer – und man saehe
   eine graue Flaeche und fragte sich, wozu das Bild da ist.
   -------------------------------------------------------------------------- */
.sec--photo{position:relative; overflow:hidden; background:var(--ink); color:var(--paper)}
.sec--photo > .wrap{position:relative; z-index:2}
.sec--photo .photo{position:absolute; inset:-12% 0; z-index:0; will-change:transform}
.sec--photo .photo img{width:100%; height:100%; object-fit:cover}

/* Der Verlauf schuetzt nur die Zonen, in denen Text OHNE Glas steht:
   den Sektionskopf oben und den Fuss. In der Mitte, wo die Kacheln liegen,
   bleibt das Bild fast unangetastet. */
/* Der Verlauf rechnet in PIXELN, nicht in Prozent der Sektionshoehe.

   Das war der Fehler: mobil ist die Sektion 2400 px hoch, am Desktop 1000.
   Ein Verlauf mit "dunkel bis 20 %" verdunkelt mobil 480 px und am Desktop
   200 – gemeint war aber beide Male dasselbe: der Sektionskopf. In Pixeln
   gerechnet schuetzt der Verlauf immer genau die Zone, in der Text OHNE Glas
   steht, und laesst den Rest des Bildes in Ruhe. */
.sec--photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* Oben stark, unten fast nichts.
       Zwei Gruende:
       1. Lesbarkeit: der Sektionskopf steht nackt auf dem Foto, die Kacheln
          weiter unten bringen ihren eigenen Grund mit.
       2. Trennung: bisher war die Sektion durchgehend dunkel und ging optisch
          in das schwarze Schachbrett darunter ueber. Ein Bild, das nach unten
          aufhellt, setzt eine sichtbare Kante gegen die schwarze Flaeche. */
    linear-gradient(180deg,
      rgba(10,10,10,.94) 0,
      rgba(10,10,10,.86) 260px,
      rgba(10,10,10,.42) 560px,
      rgba(10,10,10,.10) 900px,
      rgba(10,10,10,.04) 100%),
    /* Nur ein Hauch am Fuss, damit die Kante zur naechsten Sektion nicht hart bricht. */
    linear-gradient(0deg, rgba(10,10,10,.30) 0, rgba(10,10,10,0) 160px);
}

/* Ohne Glas (z. B. #process) steht ALLER Text auf dem Foto. Dort deckt der
   Grundton durchgehend – und das Bild ist im Build entsprechend dunkler
   gerechnet. */
.sec--photo--flat::after{
  background:
    linear-gradient(180deg, rgba(10,10,10,.9) 0, rgba(10,10,10,.42) 280px,
                            rgba(10,10,10,.12) 520px),
    linear-gradient(0deg,   rgba(10,10,10,.88) 0, rgba(10,10,10,0) 220px),
    rgba(10,10,10,.12);
}

/* ------------------------------------------------------------------- Glas
   Fallback zuerst: eine deckende Flaeche. Wer kein backdrop-filter kann,
   bekommt trotzdem lesbaren Text – nur eben ohne den Blick aufs Bild. */
/* Glas-Kacheln auf dem Foto. Derselbe Bau wie ueberall: der Hintergrund liegt
   im ::before und atmet beim Hover, der Text bleibt stehen. Kein Rahmen.
   Rueckfall zuerst – wer kein backdrop-filter kann, bekommt eine deckende
   Flaeche und trotzdem lesbaren Text. */
.sec--photo .card{background:transparent}
.sec--photo .card::before{
  background:rgba(10,10,10,.86);
  opacity:1;
}
/* Die Toenung musste von .32 auf .46 hoch, als das Bild nach unten aufhellte.
   Vorher stand der Kacheltext bei 3,5:1 – unter der Grenze.

   Das ist kein Rueckschritt: das Bild ist DAZWISCHEN jetzt fast doppelt so
   hell wie vorher (Luminanz 86–97 statt 76). Der Weinberg ist da zu sehen, wo
   kein Text steht – und das ist die richtige Stelle. */
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){
  .sec--photo .card::before{
    background:rgba(10,10,10,.46);
    -webkit-backdrop-filter:blur(22px) saturate(125%);
            backdrop-filter:blur(22px) saturate(125%);
  }
}
.sec--photo .card:hover::before{
  background:rgba(10,10,10,.62);
  transform:scale(1.035);
}
.sec--photo .card:hover{transform:none}

.sec--photo .card__k{color:var(--paper); opacity:.6}
.sec--photo .card__h{color:var(--paper)}
.sec--photo .card__p{color:rgba(255,255,255,.9)}

.sec--photo .lead,
.sec--photo .note p,
.sec--photo .step p{color:rgba(255,255,255,.9)}
.sec--photo .eyebrow{color:rgba(255,255,255,.72)}
.sec--photo .deck{color:rgba(255,255,255,.88)}
.sec--photo .step{border-color:var(--line-d)}
.sec--photo .step__n{color:var(--paper); opacity:.55}
.sec--photo .step__t{color:var(--paper); opacity:.65}

/* backdrop-filter ist der einzige teure Effekt hier: der Browser muss den
   Untergrund pro Bild neu filtern. Auf einem scrollenden Parallax-Bild ist das
   die Kombination, bei der aeltere Geraete anfangen zu ruckeln. Deshalb wird
   der Blur weder animiert noch gestapelt – und bei reduzierter Bewegung ganz
   abgeschaltet, samt Rueckfall auf die deckende Flaeche. */
@media (prefers-reduced-motion:reduce){
  .sec--photo .card{
    background:rgba(10,10,10,.8) !important;
    -webkit-backdrop-filter:none !important;
            backdrop-filter:none !important;
  }
  .sec--photo .photo{will-change:auto}
}

/* ------------------------------------------------------------ Social-Icons
   Echte Symbole statt "IG" und "FB". Zwei Buchstaben sind keine Marke,
   sondern ein Raetsel. */
.ftr__soc a{padding:0}
.ftr__soc svg{width:20px; height:20px; fill:currentColor}


/* ================================== Abstaende bei umbrechenden Inhalten ===
   Ein flex-wrap-Container mit `gap: 1rem` bekommt beim Umbruch denselben
   Abstand vertikal wie horizontal – und das ist fast immer zu wenig. Zwei
   Zeilen, die 16 px auseinanderliegen, sehen aus wie ein Versehen.
   Deshalb ueberall zweiwertige gaps: Zeile zuerst, Spalte danach. */
.hero__acts{row-gap:1rem}
.alt__act{row-gap:1rem}
.ledger__foot{row-gap:1rem}
.ledger__foot-end{row-gap:.75rem}
.promise{row-gap:0}

/* Unter 380 px stehen die drei Kennzahlen zu eng. Dann untereinander. */
@media (max-width:379px){
  .promise{grid-template-columns:1fr}
  .promise > div + div{border-left:0; border-top:1px solid var(--line-d)}
  .promise > div{display:flex; align-items:baseline; justify-content:space-between;
                 text-align:left; padding-block:.9rem}
  .promise dt{margin:0}
}

/* Das Dock: zwei Buttons, aber die Beschriftung kann in ES lang werden. */
@media (max-width:359px){
  .dock__b{font-size:.82rem; letter-spacing:.03em}
  .dock__b--wa{flex:0 0 38%}
}


/* ============================================================= Upload-Feld
   Das native <input type=file> zeigt "Keine Datei ausgewaehlt" und einen
   Systembutton, den man nicht gestalten kann. Bei einer Anfrage, in der jemand
   Fotos seines Kellers hochlaedt, ist das die Stelle, an der er aufgibt.

   Der native Input bleibt im DOM und funktioniert ohne JavaScript. JS blendet
   ihn aus und baut die Zone darueber. Faellt JS aus, ist das Feld einfach
   wieder das alte – kaputt geht nichts. */
.drop{
  position:relative;
  display:grid; place-items:center; gap:.5rem;
  padding:2rem 1.25rem;
  min-height:150px;
  border-radius:var(--r);
  background:var(--surf-dark);
  cursor:pointer;
  text-align:center;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.drop:hover{background:var(--surf-dark-h)}
.drop[data-over]{background:rgba(196,48,76,.22); transform:scale(1.01)}
.drop__ico{width:34px; height:34px; opacity:.75}
.drop__t{font-family:var(--d); font-weight:500; font-size:1.05rem; letter-spacing:.01em}
.drop__s{font-family:var(--m); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
         color:var(--dim); margin:0}
.drop__btn{color:var(--paper); text-decoration:underline; text-underline-offset:4px}

/* Die Dateiliste. Je Datei ein eigener Balken – wer acht Fotos hochlaedt,
   will sehen, welches gerade laeuft, nicht einen Gesamtbalken. */
.files{list-style:none; margin:.9rem 0 0; padding:0; display:grid; gap:.5rem}
.file{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.9rem;
  padding:.75rem .9rem;
  border-radius:var(--r-sm);
  background:var(--surf-dark);
}
.file__ico{font-family:var(--m); font-size:.58rem; letter-spacing:.06em;
           color:var(--dim); min-width:34px}
.file__n{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.92rem}
.file__s{font-family:var(--m); font-size:.58rem; color:var(--dim); margin:.15rem 0 0}
.file__x{
  min-width:34px; min-height:34px; display:grid; place-items:center;
  background:none; border:0; border-radius:var(--r-sm); cursor:pointer;
  color:var(--dim); font-size:1.2rem; line-height:1;
  transition:background .2s, color .2s;
}
.file__x:hover{background:var(--alert); color:var(--paper)}
.file__bar{
  grid-column:1 / -1; height:3px; border-radius:2px;
  background:rgba(255,255,255,.14); overflow:hidden;
}
.file__bar span{
  display:block; height:100%; width:100%;
  background:var(--wine-lit);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .25s linear;
}
.file[data-done] .file__bar span{background:#4AE07F; transform:none}
.file[data-err]{outline:2px solid var(--alert)}
.file[data-err] .file__s{color:#F09A90}

/* Die Ankaufsliste als Anhang.

   Sie ist keine Datei, die der Nutzer gewaehlt hat – sie entsteht erst auf dem
   Server. Sichtbar sein MUSS sie trotzdem: wer vierzig Weine eingetragen hat
   und im Upload-Bereich nichts sieht, glaubt, sie seien nicht dabei, und haengt
   sie ein zweites Mal von Hand an.

   Deshalb sieht der Eintrag aus wie ein Anhang, aber nicht ganz: Bordeaux
   getoent, mit Haken statt Kreuz, kein Fortschrittsbalken. Er sagt "erledigt",
   nicht "hier kannst du etwas tun". */
.file--auto{
  background:rgba(196,48,76,.14);
  box-shadow:inset 0 0 0 1px rgba(196,48,76,.35);
}
.file--auto .file__ico{color:var(--wine-lit)}
.file--auto .file__s{color:var(--wine-lit); text-transform:uppercase; letter-spacing:.1em}
.file__auto{
  min-width:34px; display:grid; place-items:center;
  color:var(--wine-lit); font-size:.9rem;
}

.drop__err{color:#F09A90; font-size:.88rem; margin:.6rem 0 0; min-height:1.2em}
.drop__sum{font-family:var(--m); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
           color:var(--dim); margin:.6rem 0 0}


/* ================================================================= Burger
   Unter 1240 px gibt es keine Kopfnavigation. Eine One-Page-Seite mit sechs
   Abschnitten und ohne Sprungmoeglichkeit ist eine Zumutung – man scrollt
   blind. Also ein Burger, genau dort, wo die Leiste verschwindet.

   Ohne JavaScript wird er ausgeblendet: er koennte nichts oeffnen. Der Inhalt
   ist ohnehin komplett da, man scrollt eben. Ein Knopf, der nichts tut, ist
   schlimmer als kein Knopf. */
.burger{
  display:grid; place-content:center; gap:5px;
  width:46px; height:46px; padding:0;
  background:var(--surf-dark); border:0; border-radius:var(--r-sm);
  cursor:pointer;
  transition:background .25s var(--ease);
}
.burger:hover{background:var(--surf-dark-h)}
.burger span{
  display:block; width:20px; height:1.5px; border-radius:2px;
  background:var(--paper);
  transition:transform .35s var(--ease-o), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.no-js .burger{display:none}
@media (min-width:1240px){ .burger{display:none} }

/* ---------------------------------------------------------------- Das Menü

   Zentriert – aber NICHT mit align-content:center.

   In einem scrollbaren Container schneidet zentrierte Ausrichtung den
   ueberstehenden Teil OBEN ab, und dieser Teil ist dann nicht mehr erreichbar:
   der Scrollbereich beginnt erst beim sichtbaren Rand. Auf einem Tablet im
   Querformat (1024x600) begann der erste Menueeintrag bei y = -37. Er war weg.

   Der saubere Weg ist `margin:auto` auf dem KIND. Passt alles, zentriert es.
   Passt es nicht, faellt der Automatik-Rand auf 0 zurueck und der Inhalt
   scrollt korrekt von oben. Das ist kein Trick, sondern das dokumentierte
   Verhalten – und der Grund, warum align-content hier falsch ist. */
.menu{
  position:fixed; inset:0; z-index:79;
  background:var(--ink);
  display:flex;
  /* Der Kopf ist rund 79 px hoch und liegt DARUEBER (z-index 80). Der obere
     Innenabstand muss ihn ueberragen, sonst rutscht der erste Eintrag
     darunter und ist nicht anklickbar – auch wenn er "im Bild" steht. */
  padding:calc(5.5rem + env(safe-area-inset-top)) var(--gutter)
          calc(1.5rem + env(safe-area-inset-bottom));
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  opacity:0;
  transition:opacity .3s var(--ease);
}
.menu[hidden]{display:none}
.menu[data-open]{opacity:1}

.menu__in{
  margin:auto;              /* zentriert, wenn Platz ist – scrollt, wenn nicht */
  width:100%; max-width:var(--max);
  display:grid;
}

.menu__in > a{
  display:flex; align-items:baseline; gap:1.25rem;
  padding:clamp(.7rem, 1.6vh, 1.1rem) 0;
  min-height:56px;
  border-bottom:1px solid var(--line-d);
  font-family:var(--d); font-weight:200;
  /* Die Hoehe des Fensters begrenzt die Schrift mit, nicht nur die Breite.
     Auf einem flachen Tablet-Querformat waren die Eintraege sonst so gross,
     dass sechs davon plus Fuss nicht mehr hineinpassten. */
  font-size:clamp(1.45rem, min(6.5vw, 4.4vh), 2.6rem);
  line-height:1.1; letter-spacing:-.005em; text-transform:uppercase;
  color:var(--paper); text-decoration:none;
  opacity:0; transform:translate3d(0,18px,0);
  transition:opacity .5s var(--ease-o), transform .5s var(--ease-o), color .2s;
  transition-delay:calc(var(--i, 0) * 45ms);
}
.menu[data-open] .menu__in > a{opacity:1; transform:none}
.menu__in > a:hover{color:var(--wine-lit)}

.menu__n{
  font-family:var(--m); font-size:.62rem; letter-spacing:.14em;
  color:var(--dim); flex:none;
}

.menu__foot{
  display:grid; gap:.75rem; margin-top:clamp(1.25rem, 3vh, 2.5rem);
  opacity:0; transform:translate3d(0,18px,0);
  transition:opacity .5s var(--ease-o), transform .5s var(--ease-o);
  transition-delay:320ms;
}
.menu[data-open] .menu__foot{opacity:1; transform:none}

.menu__wa{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px; border-radius:var(--r-sm);
  background:#25D366; color:#042A16;
  font-family:var(--d); font-weight:600; font-size:1rem;
  letter-spacing:.04em; text-decoration:none;
}
.menu__wa svg{width:1.2em; height:1.2em}
.menu__shop{
  text-align:center; padding:.6rem;
  font-family:var(--m); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); text-decoration:none;
}
.menu__shop:hover{color:var(--paper)}

/* Sehr flache Fenster (Tablet quer, aufgeklappte Bildschirmtastatur):
   die Eintraege ruecken zusammen, damit sechs Stueck plus Fuss ohne Scrollen
   hineinpassen. Muss es doch scrollen, funktioniert das jetzt sauber. */
@media (max-height:700px){
  .menu{padding-top:calc(5.25rem + env(safe-area-inset-top))}
  .menu__in > a{min-height:48px; padding-block:.55rem}
  .menu__foot{gap:.6rem}
  .menu__wa{min-height:46px}
}
@media (max-height:560px){
  .menu__in > a{min-height:44px; padding-block:.4rem; font-size:clamp(1.2rem, 4vh, 1.6rem)}
  .menu__shop{display:none}
}

/* Der Kopf muss ueber dem Menue liegen, sonst kann man es nicht schliessen. */
.hdr{z-index:80}
body[data-menu]{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .menu, .menu__in > a, .menu__foot, .burger span{transition:none !important; transform:none !important}
}


/* ========================================================= Erfolgsmeldung
   Sie ERSETZT das Formular, sie steht nicht darunter.

   Eine Zeile unter einem noch ausgefuellten Formular liest niemand. Man fragt
   sich, ob das Absenden geklappt hat, scrollt hoch, sieht seine Daten noch
   dastehen – und drueckt noch einmal. Deshalb: Formular weg, Bestaetigung da,
   ganze Flaeche. Bordeaux, weil hier etwas gelungen ist. */
.danke{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg, #8A182F 0%, var(--wine) 45%, #4E0A1A 100%);
  color:var(--paper);
  border-radius:var(--r);
  padding:var(--pad);
}
.danke[hidden]{display:none}
/* Dasselbe wandernde Licht wie auf dem CTA-Band. */
.danke::before, .danke::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:70vmax; height:70vmax; border-radius:50%;
  will-change:transform;
}
.danke::before{
  top:-45%; left:-30%;
  background:radial-gradient(circle, rgba(214,62,102,.55) 0%, rgba(214,62,102,0) 60%);
  animation:wabern-a 19s ease-in-out infinite alternate;
}
.danke::after{
  bottom:-50%; right:-25%;
  background:radial-gradient(circle, rgba(38,4,14,.7) 0%, rgba(38,4,14,0) 58%);
  animation:wabern-b 27s ease-in-out infinite alternate;
}
.danke > *{position:relative; z-index:1}

/* Der Haken zeichnet sich. stroke-dashoffset ist zwar keine
   Compositor-Eigenschaft, aber es laeuft EINMAL auf einem 48-px-Pfad –
   das ist kein Scroll-Effekt, das kostet nichts. */
.danke__ico{width:52px; height:52px; color:var(--paper); margin-bottom:1.5rem}
.danke__ring{opacity:.35}
.danke__haken{stroke-dasharray:40; stroke-dashoffset:40}
.danke[data-an] .danke__haken{animation:haken .5s var(--ease-o) .15s forwards}
@keyframes haken{to{stroke-dashoffset:0}}

.danke__kick{font-size:clamp(1.8rem, 5vw, 2.75rem); margin:0}
.danke__h{
  font-family:var(--d); font-weight:200;
  font-size:clamp(1.25rem, 2.4vw, 1.6rem); line-height:1.35;
  margin:.75rem 0 0; color:rgba(255,255,255,.92);
}
.danke__p{margin:1.25rem 0 0; color:rgba(255,255,255,.86); max-width:46ch}

/* Die Anfrage-Nummer. Der Kunde soll sie sehen und sich merken koennen –
   deshalb gross, in Mono, und nicht in einem Fliesstext vergraben. */
.danke__ref{
  margin-top:2rem; padding:1.25rem;
  border-radius:var(--r-sm);
  background:rgba(0,0,0,.28);
}
.danke__ref[hidden]{display:none}
.danke__ref-l{color:rgba(255,255,255,.85); margin:0}
.danke__ref-v{
  font-family:var(--m); font-weight:500;
  font-size:clamp(1.15rem, 3.5vw, 1.5rem); letter-spacing:.1em;
  margin:.4rem 0 0; color:var(--paper);
  -webkit-user-select:all; user-select:all;   /* ein Klick markiert sie ganz */
}
.danke__ref-p{margin:.6rem 0 0; font-size:.9rem; color:rgba(255,255,255,.85)}

.danke__next{margin:2rem 0 .9rem; color:rgba(255,255,255,.85)}
.danke__steps{
  list-style:none; counter-reset:d; margin:0; padding:0;
  display:grid; gap:.75rem;
}
.danke__steps li{
  counter-increment:d; position:relative; padding-left:2.25rem;
  font-size:.98rem; color:rgba(255,255,255,.88);
}
.danke__steps li::before{
  content:counter(d, decimal-leading-zero);
  position:absolute; left:0; top:.15rem;
  font-family:var(--m); font-size:.7rem; letter-spacing:.1em;
  /* Kleine Schrift auf Bordeaux: 55 % Weiss ergaben 3,0:1 – unter der Grenze.
     Der Grund ist hell (Luminanz 74 an der hellsten Stelle des Verlaufs),
     kleine Schrift braucht dort 4,5:1. Also 85 %. */
  color:rgba(255,255,255,.85);
}

.danke__wa-vor{
  margin:2.25rem 0 .75rem;
  font-size:.95rem; color:rgba(255,255,255,.85);
}
.danke__acts{display:grid; gap:.75rem; justify-items:start}
.danke__acts .btn{width:100%; max-width:360px}
.danke__again{
  background:none; border:0; cursor:pointer; padding:.5rem 0;
  font-family:var(--m); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
  text-decoration:underline; text-underline-offset:5px;
  transition:color .2s;
}
.danke__again:hover{color:var(--paper)}

@media (prefers-reduced-motion:reduce){
  .danke::before, .danke::after{animation:none}
  .danke__haken{stroke-dashoffset:0}
  .danke[data-an] .danke__haken{animation:none}
}