@font-face{font-family:'Montserrat';font-weight:300;font-style:normal;src:url(schrift/mo-300.woff2) format('woff2');font-display:swap}@font-face{font-family:'Montserrat';font-weight:400;font-style:normal;src:url(schrift/mo-400.woff2) format('woff2');font-display:swap}@font-face{font-family:'Montserrat';font-weight:500;font-style:normal;src:url(schrift/mo-500.woff2) format('woff2');font-display:swap}@font-face{font-family:'Montserrat';font-weight:600;font-style:normal;src:url(schrift/mo-600.woff2) format('woff2');font-display:swap}@font-face{font-family:'Montserrat';font-weight:300;font-style:italic;src:url(schrift/mo-300i.woff2) format('woff2');font-display:swap}@font-face{font-family:'Montserrat';font-weight:500;font-style:italic;src:url(schrift/mo-500i.woff2) format('woff2');font-display:swap}@font-face{font-family:'Montserrat';font-weight:600;font-style:italic;src:url(schrift/mo-600i.woff2) format('woff2');font-display:swap}
/* Ein Grund, ein Akzent, alles zentriert. */
:root{
  --nacht:#14100B; --tiefer:#0E0B07; --hell:#EDE4D6;
  --leise:#C0B5A3; --gold:#BE9647; --bronze:#B68B4A;
  --seite:clamp(22px,5vw,64px);
  --luft:clamp(78px,11vh,164px);
  --hoch:clamp(30px,5.5vh,72px);     /* Logo-Abstand im Einstieg  */
  --logo:min(361px,70vw,40svh);      /* Breite der Wortmarke      */
  --kopf:64px;                        /* wird gemessen             */
  color-scheme:dark;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:300;line-height:1.7;
  color:var(--hell);background-color:var(--nacht);
  /* Kein -webkit-font-smoothing:antialiased — auf dunklem Grund
     magert es helle Schrift ab, statt sie zu schärfen. */
  overflow-x:hidden;
  text-align:center;
}
img{max-width:100%}
::selection{background:rgba(190,150,71,.3)}

/* ── Abschnitte: gestapelt, zentriert, viel Luft ──────────────────────── */
.ab{padding:var(--luft) var(--seite)}
.ab[id]{scroll-margin-top:calc(var(--kopf) + 16px)}
.mitte{max-width:860px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center}
.ab.schmal .mitte{max-width:680px}
.ab.weit .mitte{max-width:1180px}
/* Ein Hauch heller als der Grund — kein zweiter Farbton, nur Tiefe. */
.ab.gehoben{background:
  radial-gradient(ellipse 80% 70% at 50% 50%,
    rgba(190,150,71,.052), rgba(190,150,71,0) 70%)}

h1,h2{font-weight:200;letter-spacing:-.012em;text-wrap:balance;
  color:var(--hell)}
/* „Hasen" im Spruch: echter kursiver Schnitt in Medium, in Bronze —
   nie der aufrechte Schnitt schräggestellt. */
h1 i,h2 i{font-style:italic;font-weight:500;color:var(--bronze)}
h2{font-size:clamp(29px,4.4vw,60px);line-height:1.14}
/* Je mehr Text eine Überschrift trägt, desto kleiner wird sie gesetzt.
   Die Stufe vergibt h2_stufe() beim Bauen, nicht die Hand. Mit der
   kleineren Schrift geht der Zeilenabstand leicht auf und die negative
   Laufweite zurück — enge Sperrung trägt nur in Displaygrösse. */
h2.mittel{font-size:clamp(27px,3.7vw,50px);line-height:1.17;
  letter-spacing:-.008em}
h2.lang{font-size:clamp(25px,3.0vw,41px);line-height:1.22;
  letter-spacing:-.003em}
h1{font-size:clamp(34px,5.4vw,74px);line-height:1.1}
p{font-size:clamp(15px,1.25vw,17.5px);line-height:1.78;color:var(--leise);
  max-width:38em}
h2 + p,.rolle + h2{margin-top:clamp(20px,2.6vh,32px)}
p + p{margin-top:clamp(14px,1.8vh,22px)}

.rolle{
  font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);max-width:none;
}
.knopf{
  display:inline-block;margin-top:clamp(28px,3.6vh,46px);
  font-size:11px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;
  border:1px solid rgba(190,150,71,.38);border-radius:999px;
  padding:13px 30px;transition:border-color .3s,color .3s,background-color .3s;
}
.knopf:hover{border-color:var(--gold);background:rgba(190,150,71,.1)}
/* Der Strich zwischen den Kapiteln (Maik, 12.10.: „eine schöne Verbindung
   durch die grossen Flächen, wo schon leer sind"). Deshalb blendet er an
   beiden Enden aus statt nur unten: ein Strich, der oben hart anfängt,
   endet dort; einer, der aus dem Nichts kommt und ins Nichts geht, liest
   sich als Fortsetzung. Er bleibt haarfein — die Länge trägt ihn, nicht
   die Breite. Das Atmen geht von der Mitte nach beiden Seiten. */
.strich{width:1px;height:clamp(96px,15vh,190px);
  background:linear-gradient(180deg,
    rgba(190,150,71,0) 0%,
    rgba(190,150,71,.86) 30%,
    rgba(190,150,71,.86) 70%,
    rgba(190,150,71,0) 100%);
  margin:clamp(34px,4.6vh,58px) auto 0}
@media(prefers-reduced-motion:no-preference){
  .strich{animation:atem 5.2s ease-in-out infinite}
}
@keyframes atem{0%,100%{opacity:.42;transform:scaleY(.72)}
  50%{opacity:1;transform:scaleY(1)}}
.claim{font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);max-width:none}

/* ── Preis und Grundpreis: eine Zeile, zwei Gewichte ──────────────────
   Der Grundpreis muss „in unmittelbarer räumlicher Nähe" zum Gesamtpreis
   stehen (§ 4 Abs. 1 PAngV). Dieselbe Zeile lässt daran keinen Zweifel. */
.preis{display:flex;align-items:baseline;justify-content:center;
  gap:12px;flex-wrap:wrap;margin-top:clamp(26px,3.4vh,40px);max-width:none}
.preis b{font-size:clamp(21px,2.4vw,28px);font-weight:300;color:var(--hell);
  letter-spacing:.01em}
.preis span{font-size:11.5px;font-weight:400;letter-spacing:.12em;
  color:var(--leise)}
.unternehmer{margin-top:7px;font-size:10.5px;letter-spacing:.07em;
  color:var(--leise);opacity:.72;max-width:none;line-height:1.6}
.fein{margin-top:14px;font-size:11.5px;line-height:1.75;color:var(--leise);
  max-width:34em}

/* ── Preistafel ───────────────────────────────────────────────────────
   Auf schmalen Schirmen darf sie waagrecht rollen, statt die Spalten zu
   quetschen — vier Zahlen nebeneinander bleiben lesbar. */
.tafel{width:100%;margin-top:clamp(26px,3.4vh,40px);overflow-x:auto;
  -webkit-overflow-scrolling:touch}
.tafel table{border-collapse:collapse;margin:0 auto;min-width:min(420px,100%)}
.tafel th,.tafel td{padding:11px clamp(10px,2.4vw,26px);text-align:center;
  border-bottom:1px solid rgba(237,228,214,.1);white-space:nowrap}
.tafel th{font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.tafel td{font-size:13.5px;font-weight:300;color:var(--hell)}
.tafel td:first-child{color:var(--leise);font-size:12px;letter-spacing:.1em}
.tafel tr:last-child td{border-bottom:0}

/* ── Die drei Wege fürs Logo ──────────────────────────────────────────
   Gleichwertig nebeneinander, nicht als nummerierte Reihenfolge: Es sind
   Beispiele, keine Liste zum Abhaken. */
.wege{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(14px,1.8vw,24px);margin-top:clamp(26px,3.4vh,40px);width:100%}
.weg{flex:1 1 min(260px,100%);max-width:330px;
  padding:clamp(22px,2.6vw,32px) clamp(20px,2.4vw,28px);
  border:1px solid rgba(237,228,214,.1);border-radius:14px;
  background:rgba(237,228,214,.016);overflow:hidden}
.weg img{display:block;width:calc(100% + 2 * clamp(20px,2.4vw,28px));
  margin:calc(-1 * clamp(22px,2.6vw,32px)) calc(-1 * clamp(20px,2.4vw,28px))
         clamp(18px,2.2vw,24px);
  height:auto;aspect-ratio:1;object-fit:cover;border-radius:13px 13px 0 0}
.weg h3{font-size:clamp(15px,1.4vw,17.5px);font-weight:400;color:var(--hell);
  letter-spacing:.01em;margin-bottom:10px;line-height:1.4}
.weg p{font-size:12.5px;line-height:1.8;color:var(--leise);max-width:none}

/* ── Wo es den Hasen gibt ─────────────────────────────────────────────── */
.haeuser{display:flex;flex-wrap:wrap;justify-content:center;width:100%;
  gap:clamp(12px,1.6vw,20px);margin-top:clamp(26px,3.4vh,40px)}
.haus{flex:0 1 auto;display:flex;flex-direction:column;
  align-items:center;gap:6px;
  padding:clamp(18px,2.4vw,26px) clamp(24px,3.4vw,40px);
  border:1px solid rgba(237,228,214,.12);border-radius:12px;
  text-decoration:none;transition:border-color .3s,background-color .3s}
.haus:hover{border-color:rgba(190,150,71,.5);background:rgba(190,150,71,.06)}
.haus .hn{font-size:clamp(17px,1.8vw,21px);font-weight:300;color:var(--hell);
  letter-spacing:.02em}
.haus .ho{font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}

/* ── Häufige Fragen ───────────────────────────────────────────────────
   <details> statt eigener Mechanik: funktioniert ohne Skript, ist von
   Haus aus bedienbar und wird von Vorleseprogrammen richtig angesagt. */
/* Zentriert wie alles andere — die Regel gilt auch hier, und mit
   38 em Satzbreite bleiben die Antworten ruhig genug dafür. */
.fragen{width:100%;max-width:38em;margin:clamp(26px,3.4vh,40px) auto 0}
.frage{border-bottom:1px solid rgba(237,228,214,.1)}
.frage summary{list-style:none;cursor:pointer;padding:16px 30px;
  position:relative;font-size:clamp(14px,1.3vw,16px);font-weight:400;
  color:var(--hell);line-height:1.5}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:'';position:absolute;right:6px;top:50%;
  width:9px;height:9px;margin-top:-6px;border-right:1px solid var(--gold);
  border-bottom:1px solid var(--gold);transform:rotate(45deg);
  transition:transform .3s}
.frage[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.frage summary:hover{color:var(--gold)}
.frage p{margin:0 0 18px;font-size:13.5px;line-height:1.8;color:var(--leise);
  max-width:none}

/* ── Siegel: rund, in Bronze, leicht gekippt ──────────────────────────── */
.siegel{width:clamp(136px,17vw,186px);height:auto;display:block;
  color:var(--bronze);margin:clamp(26px,3.8vh,44px) auto 0;
  transform:rotate(-11deg);transform-origin:50% 50%}
.si-t{fill:currentColor;font-family:'Montserrat',-apple-system,sans-serif;
  font-weight:600;letter-spacing:.14em}
@media(max-width:640px){.siegel{width:150px}}

/* ── Kopfleiste: Zeichen mittig, Wege darunter ────────────────────────── */
.kopf{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  /* Am Seitenanfang liegt nichts hinter der Leiste. Die Unschärfe kostet
     dort nur eine zusätzliche Ebene — und die ist auf macOS die häufigste
     Quelle für kurzes Aufblitzen, wenn der Vorhang verschwindet. Deshalb
     deckend, solange nicht gerollt wird. */
  background:#14100B;transition:background-color .3s;
  border-bottom:1px solid rgba(237,228,214,.07);
  padding:clamp(12px,1.6vh,18px) var(--seite);
  display:flex;flex-direction:column;align-items:center;gap:9px;
}
body.bewegt .kopf{background:rgba(20,16,11,.9);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px)}
.kopf .wl{width:clamp(116px,13vw,164px);height:auto;aspect-ratio:508/280;
  display:block;transition:opacity .45s}
body.home .kopf .wl{opacity:0}
body.home.gerollt .kopf .wl{opacity:1}
.kopf nav{display:flex;gap:clamp(20px,3vw,46px);align-items:center;
  flex-wrap:wrap;justify-content:center}
.kopf a{
  color:var(--leise);text-decoration:none;font-size:10.5px;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;padding-bottom:4px;
  border-bottom:1px solid transparent;white-space:nowrap;transition:color .3s;
}
.kopf a:hover{color:var(--hell)}
.kopf a[aria-current]{color:var(--gold);border-bottom-color:rgba(190,150,71,.55)}
/* ── Der Einstieg: Zeichen, Flasche im Licht, ein Satz ────────────────── */
.hero{
  min-height:calc(100svh - var(--kopf));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--hoch) var(--seite) clamp(26px,4vh,52px);
  position:relative;overflow:hidden;
}
/* Das Licht liegt hinter der Flasche, nicht auf der Fläche. */
.hero::before{
  content:'';position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(760px,96vw);height:min(760px,96vw);pointer-events:none;
  background:radial-gradient(circle,rgba(190,150,71,.19),rgba(190,150,71,0) 66%);
  /* Eigene Ebene, einmal gerastert: sonst wird der Verlauf neu gezeichnet,
     sobald der Vorhang verschwindet — ein kurzes Aufblitzen am Rand. */
  will-change:opacity;
}
.hero > *{position:relative}
.hero .wl{width:var(--logo);height:auto;aspect-ratio:508/280;display:block}
/* Die Flasche nimmt die Resthöhe. Ein <img> im Fluss tut das nicht: Mit
   Seitenverhältnis schrumpft es nicht unter seine Inhaltsgrösse, und der
   Einstieg lief unten heraus. Deshalb ein Kasten, der die Höhe hergibt,
   und das Bild absolut darin. */
.hero .halt{
  flex:1 1 auto;min-height:0;position:relative;width:100%;
  margin:clamp(30px,5vh,66px) 0 clamp(18px,2.6vh,34px);
}
.hero .fl{
  position:absolute;inset:clamp(6px,1.8vh,26px) 0;width:100%;
  height:calc(100% - 2 * clamp(6px,1.8vh,26px));
  object-fit:contain;display:block;
}
.hero .satz{
  font-size:clamp(16px,1.6vw,22px);line-height:1.48;font-weight:200;
  letter-spacing:.004em;color:var(--hell);max-width:27em;text-wrap:balance;
}
/* Als Claim gesetzt: gesperrt, Versalien, Bronze — eine Unterschrift
   unter der Flasche, kein Satz zum Lesen. */
.hero .satz.alsclaim{
  font-size:clamp(12px,1.35vw,16px);font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);line-height:1.6;max-width:none;
}
.weiter{margin-top:clamp(16px,2.4vh,30px);display:flex;justify-content:center}
/* Unter dem Einstieg zeigt derselbe Strich nach unten — hier blendet er
   nur am Fuss aus, weil er nicht verbindet, sondern weiterweist. */
.weiter i{display:block;width:1px;height:clamp(40px,6vh,64px);
  transform-origin:top;
  background:linear-gradient(180deg,rgba(190,150,71,.74),rgba(190,150,71,0))}
@media(prefers-reduced-motion:no-preference){
  .weiter i{animation:sink 4.6s ease-in-out infinite}
}
@keyframes sink{0%,100%{opacity:.5;transform:scaleY(.78)}50%{opacity:1;transform:scaleY(1)}}

/* ── Die Sortennamen: das Schmuckstück ────────────────────────────────── */
/* Auf gleiche Höhe normiert, nicht auf gleiche Breite — sonst stünde
   „Barfuß" riesig neben „Mandel & Zimt". */
.santo{display:block;height:clamp(62px,12vw,168px);width:auto;
  max-width:100%;color:var(--bronze)}
.liste{list-style:none;width:100%;display:flex;flex-direction:column;
  gap:clamp(30px,5vh,62px);margin-top:clamp(34px,5vh,66px)}
.liste li{display:flex;flex-direction:column;align-items:center;gap:13px}
.liste .santo{height:clamp(50px,7.6vw,104px)}
.liste .rolle{font-size:9.5px;letter-spacing:.22em;color:var(--leise)}
.liste .fb{width:66px;height:3px;border-radius:2px}
.liste a{text-decoration:none;display:flex;flex-direction:column;
  align-items:center;gap:13px;opacity:.94;transition:opacity .3s}
.liste a:hover{opacity:1}

/* ── Kacheln: dieselbe Ordnung wie auf dem Thekenflyer ───────────────── */
.kacheln{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(14px,1.8vw,26px);margin-top:clamp(36px,5vh,64px);width:100%}
.kachel.offen{border-style:dashed;border-color:rgba(237,228,214,.14);
  background:rgba(237,228,214,.02);cursor:default}
.kachel.offen:hover,.kachel.offen:active{transform:none;
  box-shadow:none;border-color:var(--f)}
.kachel{
  color:var(--hell);
  /* 286 → 330 px, also + 15 %. Drei nebeneinander brauchen damit
     3 × 330 + 2 × 26 = 1042 px; der Satzspiegel „weit" gibt 1180 her.
     Vier passten nicht (1398 px) — die Reihe bleibt also dreigeteilt. */
  flex:0 1 clamp(230px,26vw,330px);display:flex;flex-direction:column;
  align-items:center;text-decoration:none;
  padding:clamp(20px,2.6vw,34px) clamp(14px,1.8vw,26px) clamp(18px,2.4vw,30px);
  border:1px solid rgba(237,228,214,.16);border-radius:14px;
  background:rgba(237,228,214,.04);
  /* **Immer beleuchtet.** Bis zum 12.10. stand die Kachel bei 70 %
     Deckkraft und trat erst beim Überfahren hervor — auf einem Telefon
     gibt es kein Überfahren, dort blieb sie dauerhaft blass. Jetzt ist
     der Ruhezustand der lesbare, und das Berühren macht etwas anderes. */
  opacity:1;
  transition:border-color .4s ease,background-color .4s ease,
    box-shadow .4s ease,transform .25s cubic-bezier(.22,.76,.24,1);
}
.kachel:hover,.kachel:focus-visible{
  border-color:var(--f);background:rgba(237,228,214,.075);
  box-shadow:0 10px 34px rgba(0,0,0,.4);transform:translateY(-4px);
}
/* Gedrückt: die Kachel gibt nach und nimmt die Sortenfarbe an — das
   ersetzt auf dem Telefon den Hover. */
.kachel:active{transform:scale(.975);border-color:var(--f);
  background:rgba(237,228,214,.09);transition-duration:.12s}
.kachel:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.kachel .rolle{font-size:9px;letter-spacing:.21em;color:var(--gold);
  transition:color .4s}
.kachel .santo.kl{height:clamp(40px,5.2vw,70px);margin:clamp(10px,1.4vh,16px) 0 0}
.kachel .balken.klein{margin-top:clamp(12px,1.6vh,18px);width:100%;max-width:240px}
.kachel .kt{margin-top:clamp(14px,1.8vh,20px);
  font-size:clamp(13.5px,1.1vw,15px);color:var(--hell);line-height:1.5}
.kachel .ks{margin-top:5px;font-size:clamp(12.5px,1vw,13.5px);
  color:var(--leise);line-height:1.6}
/* Der Hasensatz (Maik, 12.10.: „ein Satz im Hasenjargon, dass noch ein
   bisschen ein Witz rüberkommt"). Er steht abgesetzt und kursiv in
   Bronze — nicht als dritte Information, sondern als Unterschrift.
   Die Hasenbibel mahnt: „Ein Augenzwinkern wirkt nur, solange es selten
   ist." Deshalb genau einer je Sorte, und nirgends sonst. */
.kachel .kw{margin-top:clamp(11px,1.4vh,15px);
  font-size:clamp(12px,.95vw,13px);font-style:italic;font-weight:300;
  color:var(--bronze);line-height:1.55}
@media(prefers-reduced-motion:reduce){
  .kachel{transition:opacity .2s}
  .kachel:hover,.kachel:focus-visible{transform:none}
}
/* Ohne Zeigegerät gibt es kein Überfahren — dort stehen alle voll da. */

/* ── Eine Sorte ───────────────────────────────────────────────────────── */
.sorte .santo{margin-top:clamp(14px,1.8vh,22px)}
.sorte .halt{
  position:relative;margin:clamp(26px,4vh,52px) 0 0;
  display:flex;flex-direction:column;align-items:center;
}
.sorte .halt::before{
  content:'';position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:min(620px,92vw);height:min(620px,92vw);pointer-events:none;
  background:radial-gradient(circle,rgba(190,150,71,.15),rgba(190,150,71,0) 66%);
}
.sorte .fl{position:relative;max-height:min(50svh,520px);
  max-width:min(270px,58vw);width:auto;object-fit:contain}
.balken{position:relative;width:min(252px,70vw);margin-top:clamp(18px,2.4vh,28px);
  display:flex;flex-direction:column;border-radius:3px;overflow:hidden}
.balken .bl{min-height:30px;display:flex;align-items:center;
  justify-content:center;font-size:10.5px;font-weight:500;letter-spacing:.17em;
  background-repeat:repeat;background-position:center}
.balken .bs{height:4px;background:var(--bronze)}
/* Der Balken von Mandel & Zimt trägt die Sterne auch auf dem Etikett. */
.balken .bl.sterne{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='30' viewBox='0 0 260 30' fill='%23D0282C'%3E%3Cpath d='M9.3 11.6L10.2 16.9L15.4 18.0L10.6 20.4L11.3 25.7L7.5 22.0L2.6 24.2L5.0 19.4L1.4 15.5L6.7 16.3Z'/%3E%3Cpath d='M25.4 5.0L26.8 7.6L29.6 7.2L27.6 9.3L28.8 11.9L26.2 10.6L24.1 12.5L24.6 9.7L22.1 8.3L24.9 7.8Z'/%3E%3Cpath d='M46.5 11.3L46.8 17.8L53.0 19.7L47.0 22.0L47.1 28.5L43.0 23.5L36.9 25.5L40.4 20.1L36.5 15.0L42.8 16.6Z'/%3E%3Cpath d='M60.0 5.0L60.7 7.0L62.9 7.1L61.1 8.4L61.8 10.4L60.0 9.2L58.2 10.4L58.9 8.4L57.1 7.1L59.3 7.0Z'/%3E%3Cpath d='M72.9 11.6L74.9 15.0L78.8 14.2L76.2 17.2L78.1 20.7L74.5 19.2L71.8 22.0L72.1 18.1L68.5 16.4L72.4 15.5Z'/%3E%3Cpath d='M89.2 3.7L89.2 6.2L91.5 7.1L89.1 7.9L89.0 10.4L87.5 8.3L85.1 9.0L86.6 7.0L85.2 4.8L87.6 5.7Z'/%3E%3Cpath d='M99.5 16.5L100.9 19.4L104.1 19.2L101.8 21.4L103.0 24.3L100.2 22.8L97.8 24.9L98.4 21.7L95.6 20.1L98.8 19.7Z'/%3E%3Cpath d='M250.7 11.6L253.3 16.3L258.6 15.5L255.0 19.4L257.4 24.2L252.5 22.0L248.7 25.7L249.4 20.4L244.6 18.0L249.8 16.9Z'/%3E%3Cpath d='M234.6 5.0L235.1 7.8L237.9 8.3L235.4 9.7L235.9 12.5L233.8 10.6L231.2 11.9L232.4 9.3L230.4 7.2L233.2 7.6Z'/%3E%3Cpath d='M213.5 11.3L217.2 16.6L223.5 15.0L219.6 20.1L223.1 25.5L217.0 23.5L212.9 28.5L213.0 22.0L207.0 19.7L213.2 17.8Z'/%3E%3Cpath d='M200.0 5.0L200.7 7.0L202.9 7.1L201.1 8.4L201.8 10.4L200.0 9.2L198.2 10.4L198.9 8.4L197.1 7.1L199.3 7.0Z'/%3E%3Cpath d='M187.1 11.6L187.6 15.5L191.5 16.4L187.9 18.1L188.2 22.0L185.5 19.2L181.9 20.7L183.8 17.2L181.2 14.2L185.1 15.0Z'/%3E%3Cpath d='M170.8 3.7L172.4 5.7L174.8 4.8L173.4 7.0L174.9 9.0L172.5 8.3L171.0 10.4L170.9 7.9L168.5 7.1L170.8 6.2Z'/%3E%3Cpath d='M160.5 16.5L161.2 19.7L164.4 20.1L161.6 21.7L162.2 24.9L159.8 22.8L157.0 24.3L158.2 21.4L155.9 19.2L159.1 19.4Z'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat}
.balken.klein .bl{min-height:24px;font-size:9px;letter-spacing:.15em}
.balken.klein .bs{height:3px}
.kurz{font-style:italic;font-size:clamp(16px,1.5vw,21px);color:var(--hell);
  margin-top:clamp(26px,3.6vh,42px);max-width:24em}
.daten{margin-top:clamp(26px,3.4vh,40px);font-size:11.5px;letter-spacing:.14em;
  color:var(--leise);max-width:none}
.allergen{margin-top:9px;font-size:11.5px;font-weight:500;color:var(--hell);
  letter-spacing:.05em;max-width:none}
.stand{
  display:inline-block;margin-top:16px;font-size:9.5px;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(190,150,71,.3);border-radius:999px;padding:6px 15px;
}

/* ── Botanicals: eigene Zeichnungen, keine erfundenen Fotos ───────────── */
.botanik{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(16px,2.4vw,38px);margin-top:clamp(30px,4.2vh,50px)}
/* Ab vier Zutaten auf zwei Zeilen statt einer breiten (Maik, 12.10.).
   Die Spaltenzahl kommt aus dem Bauskript: die Hälfte, aufgerundet.
   Ein Raster und kein Umbruch, damit beide Zeilen gleich breit sind —
   ein freier Umbruch liesse die zweite Zeile hängen. */
.botanik.zwei{display:grid;grid-template-columns:repeat(var(--sp),auto);
  justify-content:center;row-gap:clamp(20px,2.8vh,32px)}
.botanik li{display:flex;flex-direction:column;align-items:center;
  width:clamp(58px,6.2vw,84px);gap:8px}
.botanik svg{width:100%;height:auto;color:var(--bronze);opacity:.92}
.botanik span{font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--leise);line-height:1.3}

/* ── Drinkkarten ──────────────────────────────────────────────────────
   Zwei je Sorte, nebeneinander. Die Karte trägt die Balkenfarbe als
   feinen Strich oben — mehr Farbe braucht es nicht. */
.drinks{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(16px,2vw,30px);margin-top:clamp(30px,4.2vh,52px);width:100%}
.drink{
  flex:0 1 clamp(260px,34vw,420px);text-align:center;
  padding:clamp(24px,2.8vw,38px) clamp(18px,2vw,30px) clamp(22px,2.6vw,32px);
  border:1px solid rgba(237,228,214,.09);border-radius:14px;
  background:rgba(237,228,214,.018);position:relative;overflow:hidden;
}
.drink::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--f)}
.drink h3{font-weight:200;font-size:clamp(20px,2.1vw,29px);line-height:1.2;
  color:var(--hell);margin-top:clamp(10px,1.4vh,16px);text-wrap:balance}
.zutaten{list-style:none;margin:clamp(18px,2.4vh,26px) 0 0;
  display:flex;flex-direction:column;gap:5px}
.zutaten li{font-size:14px;color:var(--gold);line-height:1.6;
  font-variant-numeric:tabular-nums}
.drink .wie{margin-top:clamp(16px,2.2vh,24px);font-size:13.5px;
  line-height:1.72;color:var(--leise);max-width:none}
.drink .anrichten{
  margin-top:clamp(16px,2.2vh,22px);padding-top:clamp(14px,1.8vh,18px);
  border-top:1px solid rgba(237,228,214,.1);
  font-size:13px;line-height:1.7;color:var(--leise);max-width:none;
}
.drink .anrichten b{display:block;margin-bottom:5px;font-weight:500;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze)}
.drink .wie b{font-weight:500;color:var(--hell)}

/* Gin Tonic je Sorte: Name, Balken, ein Satz zur Garnitur. */
.gt{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(20px,2.6vw,40px);margin-top:clamp(30px,4.2vh,52px);width:100%}
.gtz{flex:0 1 clamp(230px,26vw,320px);display:flex;flex-direction:column;
  align-items:center;gap:clamp(10px,1.4vh,15px)}
.gtz .santo.kl{height:clamp(38px,4.2vw,54px)}
.gtz .balken.klein{width:100%;max-width:190px;margin-top:0}
.gtt{font-size:13px;line-height:1.72;color:var(--leise);margin-top:3px}

/* Der Schrank: sechs Werkzeuge, knapp erklärt. */
.schrank{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(18px,2.4vw,34px);margin-top:clamp(30px,4vh,48px);width:100%}
.schrank div{flex:0 1 clamp(210px,24vw,290px);display:flex;
  flex-direction:column;gap:7px}
.schrank b{font-weight:500;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.schrank span{font-size:13.5px;line-height:1.7;color:var(--leise)}

/* ── Sprüche ──────────────────────────────────────────────────────────── */
.spruch{
  font-style:italic;font-weight:200;color:var(--gold);
  font-size:clamp(21px,3.2vw,46px);line-height:1.38;max-width:16em;
  text-wrap:balance;
}
.quelle{margin-top:clamp(18px,2.4vh,28px);font-size:9.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--leise);
  max-width:none}
.gross{display:flex;flex-direction:column;gap:clamp(26px,4vh,46px);
  align-items:center}
.kennzahl{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(30px,5vw,76px);margin-top:clamp(30px,4vh,48px)}
/* Alle Spalten gleich breit, sonst steht die mittlere nicht in der Mitte
   (Maik, 12.10.: „dass Widmung genau mittig ist"). Vorher richtete sich
   jede Spalte nach ihrem Text: „Ihr Logo" trug den längsten und wurde am
   breitesten, die Reihe als Ganzes war zentriert — und damit die mittlere
   Spalte nach rechts verschoben. Eine gemeinsame Grundbreite löst das,
   ohne dass der Text umgebrochen werden muss. */
.kennzahl div{display:flex;flex-direction:column;gap:7px;
  flex:0 1 16em;min-width:0}
/* Die drei Wege auf der Firmenseite stehen in einem schmalen Abschnitt.
   Nebeneinander blieben je 11em Breite — zu wenig für zwei Sätze, und
   die dritte Spalte rutschte in eine zweite Zeile. Untereinander ist
   jeder Block auf der Mittelachse, und das war Maiks Punkt: „dass
   Widmung genau mittig ist". */
.kennzahl.unter{flex-direction:column;align-items:center;
  gap:clamp(26px,3.6vh,40px)}
.kennzahl.unter div{flex:0 1 auto;max-width:26em}
.kennzahl b{font-weight:200;font-size:clamp(34px,4.4vw,62px);color:var(--gold);
  line-height:1}
.kennzahl span{font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--leise)}
.grossbot{width:clamp(96px,11vw,150px);height:auto;color:var(--bronze);
  opacity:.9}
/* Ein einzelnes Foto mitten im Text. Hochformat, deshalb über die Höhe
   begrenzt und nicht über die Breite — sonst füllt es am Rechner die
   halbe Seite. */
/* Ein einzelnes Foto mitten im Text. Hochformat, deshalb über die Breite
   begrenzt. Der Lichtschein liegt dahinter, nicht im Bild — so wie bei den
   Flaschen: ein Bild mit eingebackenem Schein wäre ein hellerer Kasten auf
   dunklem Grund, und genau den sieht man dann auch. */
.schaubild{display:block;margin:clamp(30px,4vh,48px) auto 0;
  width:auto;max-width:min(100%,330px);height:auto;
  background:radial-gradient(ellipse 72% 58% at 50% 48%,
    rgba(190,150,71,.15), rgba(190,150,71,0) 72%)}
/* Ein quadratisches Bild verträgt mehr Breite als ein hochkantiges —
   bei gleicher Kantenlänge ist es nur halb so hoch. */
.schaubild.breit{max-width:min(100%,470px)}

/* ── Fusszeile ────────────────────────────────────────────────────────── */
.fuss{background:var(--tiefer);border-top:1px solid rgba(237,228,214,.07);
  padding:clamp(54px,7vh,88px) var(--seite) clamp(40px,5vh,62px)}
.fuss .wl{width:clamp(120px,13vw,168px);height:auto;aspect-ratio:508/280;
  display:block;margin:0 auto}
.fuss nav{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(16px,2.6vw,34px);margin-top:clamp(26px,3.4vh,40px)}
.fuss nav a{color:var(--leise);text-decoration:none;font-size:10px;
  font-weight:500;letter-spacing:.19em;text-transform:uppercase;
  transition:color .3s}
.fuss nav a:hover{color:var(--hell)}
.fuss .zeilen{margin-top:clamp(26px,3.4vh,40px);font-size:11.5px;
  line-height:1.9;color:var(--leise);max-width:none}
.fuss a.post{color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(190,150,71,.32)}
.fuss button{
  font:inherit;background:none;border:0;padding:14px 0 0;cursor:pointer;
  color:var(--gold);letter-spacing:.14em;text-transform:uppercase;
  font-size:10px;font-weight:500;
}
.fuss button:hover{text-decoration:underline}
/* Vorher rgba(169,156,137,.7) — gemessen 4,05 : 1 und damit unter
   der AA-Schwelle von 4,5 für kleinen Satz. Jetzt 6,35 : 1. */
.fuss .klein{margin-top:16px;font-size:10.5px;color:#9E9487;
  max-width:none}

/* ── Auf dem Telefon ──────────────────────────────────────────────────── */
@media(max-height:820px){
  :root{--logo:min(361px,70vw,31svh)}
}
/* Der Knopf gibt es nur auf schmalen Schirmen. */
.wegknopf{display:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;padding:11px;position:absolute;z-index:220;
  right:calc(var(--seite) - 11px);top:50%;transform:translateY(-50%);
  flex-direction:column;justify-content:center;gap:6px}
.wegknopf i{display:block;height:1px;width:22px;background:var(--hell);
  transition:transform .32s cubic-bezier(.22,.76,.24,1),opacity .2s}
body.wege-auf .wegknopf i:first-child{transform:translateY(3.5px) rotate(45deg)}
body.wege-auf .wegknopf i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

@media(max-width:620px){
  /* Zwei Abschnitte in Folge ergaben auf 844 px Höhe 186 px Leere
     zwischen zwei Sätzen. Mit 7,5 vh sind es 126 px — immer noch Luft,
     aber kein Loch. */
  :root{--luft:clamp(52px,7.5vh,96px)}
  .ab.weit .mitte,.ab.schmal .mitte{max-width:100%}
  /* Drei Kennzahlen brachen auf dem Telefon als 1 + 2 um — das liest sich
     wie ein Satzfehler. Untereinander ist ruhiger. */
  .kennzahl{flex-direction:column;gap:clamp(20px,3vh,28px)}
  /* Untereinander ist „flex-basis" eine Höhe, keine Breite — deshalb
     hier zurücksetzen, sonst werden die Spalten 16em hoch. */
  .kennzahl div{max-width:none!important;flex:0 1 auto}

  /* ── Lesbarkeit auf dem Telefon ──────────────────────────────────────
     Montserrat Light auf fast schwarzem Grund ist bei 15 px und
     Armlänge die eigentliche Hürde: dünne helle Striche fransen aus.
     Ein Schnitt kräftiger und zwei Grad grösser ändert mehr als jede
     Farbkorrektur. Die Überschriften bleiben, wie sie sind — sie sind
     gross genug. */
  body{font-weight:400}
  p{font-size:16.5px;line-height:1.75}
  .kachel .kt{font-size:14.5px}
  .kachel .ks,.weg p,.frage p{font-size:13.5px;line-height:1.75}
  .kachel .kw{font-size:13px}
  .daten,.fein,.unternehmer,.zeilen,.gtt{font-size:12.5px}
  .kachel .rolle,.botanik li span{font-size:10px}
  .kurz{font-size:17px}

  /* ── Die Sortennamen sind das Schmuckstück ───────────────────────────
     Gemessen auf 390 px: „Barfuß" stand mit 65 × 40 px in einer 346 px
     breiten Kachel — ein Fünftel der Breite für das, was die Marke
     trägt. Die Höhe begrenzt, nicht die Breite, denn die Namen sind
     unterschiedlich lang: Von „Barfuß" (Verhältnis 1,63) bis
     „Mandel & Zimt" (3,60) liegen Welten. Gleiche Höhe heisst gleich
     grosse Schrift — gleiche Breite hiesse ungleiche Schrift.

     Der längste Name gibt die Grenze vor: bei 360 px Schirm stehen
     316 px zur Verfügung, 316 / 3,60 = 87 px Höhe wären das Äusserste.
     Darunter bleiben beide Werte mit Luft. */
  .santo{height:clamp(70px,23vw,92px)}
  .kachel .santo.kl,.gtz .santo.kl,.ab > .mitte > .santo.kl{
    height:clamp(58px,19vw,78px)}

  /* ── Karten nehmen die volle Breite ──────────────────────────────────
     Die Grundmasse sind für zwei oder drei Spalten gerechnet. Auf einem
     Telefon passt ohnehin nur eine — dann bleiben links und rechts
     58 px Luft neben einer 230 px schmalen Kachel. Gemessen bei 390 px:
     Kachel 230 von 346, Drink 260, Gin-Tonic-Zeile 230, Haus 220.
     Untereinander in voller Breite ist ruhiger und lesbarer. */
  .kachel,.weg,.haus,.drink,.gtz,.schrank div{
    flex:1 1 100%;max-width:none;width:100%}
  /* Untereinander stehende Karten brauchen mehr Trennung als
     nebeneinander stehende: Von links nach rechts trennt schon der
     Rand, von oben nach unten liest man durch. Gemessen 18 px, jetzt
     46 px bei 844 px Schirmhöhe — zweieinhalbfach. */
  .kacheln,.wege,.haeuser,.drinks,.gt,.schrank{gap:clamp(34px,5.5vh,56px)}
  /* Am Telefon bricht die Zutatenreihe von selbst um; ein festes Raster
     aus fünf Spalten passte dort nicht nebeneinander. */
  .botanik.zwei{display:flex}
  .kachel .balken.klein{max-width:none}
  .botanik li{width:62px}
  .hero .fl{max-height:46svh}

  /* Auf dem Telefon sitzt die Marke links, der Knopf rechts. */
  .kopf{flex-direction:row;align-items:center;justify-content:center;
    position:sticky;padding:clamp(10px,1.4vh,14px) var(--seite)}
  .kopf .marke{display:flex}
  .kopf .wl{width:112px}
  .wegknopf{display:flex}

  /* Die Wege legen sich über die Seite: gross, zentriert, ruhig.
     z-index 200 — über der Kopfleiste (60), unter dem Auftakt (300). */
  .kopf nav{
    position:fixed;inset:0;z-index:200;flex-direction:column;
    gap:clamp(18px,3.2vh,30px);background:rgba(14,11,7,.97);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    padding:calc(var(--kopf) + 8vh) var(--seite) 12vh;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .3s ease,transform .36s cubic-bezier(.22,.76,.24,1),
      visibility .3s;
  }
  body.wege-auf .kopf nav{opacity:1;visibility:visible;transform:none}
  body.wege-auf{overflow:hidden}
  .kopf nav a{font-size:16px;letter-spacing:.2em;padding-bottom:7px}
  .kopf nav a[aria-current]{color:var(--gold)}
}
@media(prefers-reduced-motion:reduce){
  .kopf nav,.wegknopf i{transition:none}
}

/* ── Impressum: legt sich über die Seite ──────────────────────────────── */
dialog{
  /* margin:auto zentriert den Dialog — der Stern-Reset oben setzt den Rand
     sonst auf 0 und der Kasten klebt oben links. */
  margin:auto;border:0;padding:0;max-width:640px;width:calc(100% - 32px);
  max-height:84svh;overflow:auto;text-align:left;
  background:#1B1610;color:var(--hell);border-radius:14px;
}
dialog::backdrop{background:rgba(8,6,4,.78)}
.recht{padding:clamp(24px,4vw,40px);font-size:12.5px;line-height:1.75;
  color:var(--leise)}
.recht h2{font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--hell);margin:26px 0 9px}
.recht h2:first-child{margin-top:0}
.recht p{margin-bottom:9px;max-width:none;font-size:12.5px;color:var(--leise)}
.recht a{color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(190,150,71,.3)}
.rkopf{
  position:sticky;top:0;z-index:2;background:#1B1610;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px clamp(20px,3.4vw,32px);
  border-bottom:1px solid rgba(237,228,214,.1);
  font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
}
.rkopf button{font:inherit;font-size:20px;line-height:1;letter-spacing:0;
  background:none;border:0;cursor:pointer;color:var(--leise);padding:2px 4px}
.recht .zu{
  margin-top:24px;font:inherit;background:none;
  border:1px solid rgba(237,228,214,.22);border-radius:999px;padding:9px 22px;
  cursor:pointer;color:var(--hell);letter-spacing:.12em;text-transform:uppercase;
  font-size:10px;font-weight:500;
}

/* ── Der Auftakt: acht Lamellen, jetzt in Nachtschwarz ───────────────── */
.auftakt{position:fixed;inset:0;z-index:300;display:flex;
  background-color:var(--nacht)}
.auftakt.offen{background-color:transparent}
.auftakt .lamelle{
  flex:1 1 0;position:relative;overflow:hidden;background-color:var(--nacht);
  transform:translateY(100%);
  transition:transform .95s cubic-bezier(.22,.76,.24,1);will-change:transform;
}
.auftakt.an   .lamelle{transform:translateY(0)}
.auftakt.fort .lamelle{transform:translateY(100%);
  transition:transform .55s cubic-bezier(.55,0,.85,.4)}
.auftakt.an   .lamelle:nth-child(1){transition-delay:0ms}.auftakt.an   .lamelle:nth-child(2){transition-delay:62ms}.auftakt.an   .lamelle:nth-child(3){transition-delay:124ms}.auftakt.an   .lamelle:nth-child(4){transition-delay:186ms}.auftakt.an   .lamelle:nth-child(5){transition-delay:248ms}.auftakt.an   .lamelle:nth-child(6){transition-delay:310ms}.auftakt.an   .lamelle:nth-child(7){transition-delay:372ms}.auftakt.an   .lamelle:nth-child(8){transition-delay:434ms}.auftakt.fort .lamelle:nth-child(1){transition-delay:0ms}.auftakt.fort .lamelle:nth-child(2){transition-delay:34ms}.auftakt.fort .lamelle:nth-child(3){transition-delay:68ms}.auftakt.fort .lamelle:nth-child(4){transition-delay:102ms}.auftakt.fort .lamelle:nth-child(5){transition-delay:136ms}.auftakt.fort .lamelle:nth-child(6){transition-delay:170ms}.auftakt.fort .lamelle:nth-child(7){transition-delay:204ms}.auftakt.fort .lamelle:nth-child(8){transition-delay:238ms}
/* Die Tafel ist so breit wie alle Lamellen zusammen und um die eigene
   Position nach links gerückt — nebeneinander ergeben die Ausschnitte ein
   vollständiges Logo. Darin steht eine Attrappe des Einstiegs mit denselben
   Massen, deshalb landet das Zeichen genau dort, wo es bleibt. */
.auftakt .tafel{position:absolute;top:0;height:100%;
  width:calc(var(--n) * 100%);left:calc(var(--i) * -100%);display:flex}
.auftakt .geist{
  flex:1 1 100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;
  /* dieselbe Rechnung wie .hero: Leistenhöhe oben, eigene Polsterung */
  min-height:100%;padding:calc(var(--kopf) + var(--hoch)) var(--seite)
  clamp(26px,4vh,52px);
}
.auftakt .geist .platz{
  flex:1 1 auto;min-height:0;width:100%;
  margin:clamp(30px,5vh,66px) 0 clamp(18px,2.6vh,34px);
}
.auftakt .geist svg{width:var(--logo);height:auto;aspect-ratio:508/280;
  display:block}
.auftakt.weg{visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){.auftakt{display:none}}

/* ── Ruhiges Aufsteigen ───────────────────────────────────────────────
   Nur wenn das Skript läuft; ohne JS steht alles sofort da. */
html.js body.wartet .hero .wl,html.js body.wartet .hero .fl,
html.js body.wartet .hero .satz,html.js body.wartet .hero .weiter{
  opacity:0;transform:translateY(14px);
}
.hero .wl,.hero .fl,.hero .satz,.hero .weiter{
  transition:opacity .9s ease,transform .9s cubic-bezier(.22,.76,.24,1);
}
body.frei .hero .fl{transition-delay:.12s}
body.frei .hero .satz{transition-delay:.24s}
body.frei .hero .weiter{transition-delay:.4s}

html.js .steigt{opacity:0;transform:translateY(18px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.22,.76,.24,1)}
html.js .steigt.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.js .steigt{opacity:1;transform:none;transition:none}
  .hero .wl,.hero .fl,.hero .satz,.hero .weiter{transition:none}
}