@import url("fonts/fonts.css");

/* ═══════════════════════════════════════════════════════════════════════════
   WEINGUT STEINHALDE — Richtungsvertrag

   THESIS       Die Seite ist ein geologisches Bodenprofil. Der Besucher steigt
                durch die Schichten, aus denen der Wein kommt. Abgelehnt: cremes
                Papier mit kontrastreicher Antiqua und Terrakotta-Akzent,
                freigestellte Flasche vor Rebzeile im Gegenlicht.
   OWN-WORLD    Vollflächige Horizonte in echten Keuper-Farben — Knollenmergel
                rotbraun, Stubensandstein ocker, Gipskeuper grau — auf dunklem
                Humusgrund. Links ein mitlaufendes Tiefenlineal in Zentimetern.
                Rebgrün als einziges Signal. Jost als Vermessungsschrift für
                Marken und Zahlen, Vollkorn für alles Gelesene.
   STORY        Wer scrollt, versteht: die Unterschiede zwischen diesen Weinen
                liegen 1,80 Meter tief — und bucht eine Verkostung.
   1. VIEWPORT  Der Bohrkern steht links in voller Höhe, rechts der Name des
                Guts, die Lage und die Tiefenangabe der Hauptlage.
   FORM         Stratigrafisches Profil, gelesen von oben nach unten.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --grund:   #191c15;
  --grund-2: #232719;
  --text:    #e8e6dc;
  --text-2:  #b3b3a2;
  --rebe:    #9fc93c;
  --rebe-d:  #6f9022;

  /* Horizonte, nach Keuper-Stratigrafie */
  --h-humus:  #33341f;
  --h-loess:  #a08a5f;
  --h-mergel: #6b4a2f;
  --h-sand:   #b99a5e;
  --h-gips:   #949889;

  --f-mark: "Jost", "Futura", "Century Gothic", sans-serif;
  --f-lese: "Vollkorn", Georgia, "Times New Roman", serif;

  --rail: 96px;
  --pad: clamp(20px, 4.6vw, 84px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--f-lese);
  font-size: 19px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
::selection { background: var(--rebe); color: var(--grund); }
a { color: var(--rebe); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--rebe); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--rebe); color: var(--grund);
  padding: .8rem 1.2rem; font: 500 .95rem/1 var(--f-mark);
}
.skip:focus { left: 0; }

/* ── Tiefenlineal ──────────────────────────────────────────────────────
   Läuft am linken Rand mit und zeigt an, in welchem Horizont der Besucher
   gerade liest. Das ist die eine inszenierte Bewegung der Seite.        */

.rail {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail);
  z-index: 60; pointer-events: none;
  border-right: 1px solid rgba(232, 230, 220, .18);
  background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.12));
  backdrop-filter: blur(2px);
}
.rail-ticks { position: absolute; inset: 0; }
.rail-ticks i {
  position: absolute; right: 0; height: 1px;
  background: rgba(232, 230, 220, .3);
}
.rail-ticks i.maj { width: 20px; background: rgba(232, 230, 220, .55); }
.rail-ticks i.min { width: 10px; }

.rail-read {
  position: absolute; left: 0; right: 0;
  padding: 0 10px 0 12px;
  transform: translateY(-50%);
  transition: top .12s linear;
}
.rail-depth {
  display: block;
  font: 500 clamp(15px, 1.5vw, 19px)/1 var(--f-mark);
  letter-spacing: -.01em; color: var(--rebe);
  font-variant-numeric: tabular-nums;
}
.rail-name {
  display: block; margin-top: 7px;
  font: 400 9.5px/1.25 var(--f-mark); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-2);
}
.rail-marker {
  position: absolute; right: -1px; width: 26px; height: 2px; background: var(--rebe);
  transform: translateY(-50%);
  transition: top .12s linear;
}

@media (max-width: 860px) { .rail { display: none; } :root { --rail: 0px; } }

/* ── Rahmen ───────────────────────────────────────────────────────────── */

.shell { margin-left: var(--rail); }

/* ── Kopf ─────────────────────────────────────────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px var(--pad);
  padding: 16px var(--pad);
  background: rgba(25, 28, 21, .93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(232, 230, 220, .16);
}

.gut {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--text);
}
.gut svg { width: 30px; height: 34px; flex: none; }
.gut b {
  display: block;
  font: 500 17px/1 var(--f-mark); letter-spacing: .1em; text-transform: uppercase;
}
.gut span {
  display: block; margin-top: 4px;
  font: 400 10px/1 var(--f-mark); letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-2);
}

.nav { display: flex; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
.nav a {
  font: 400 13px/1 var(--f-mark); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none;
  padding: 6px 0; border-bottom: 1px solid transparent;
  transition: color .2s cubic-bezier(.16,1,.3,1), border-color .2s cubic-bezier(.16,1,.3,1);
}
.nav a:hover { color: var(--text); border-bottom-color: var(--rebe); }
.nav a[aria-current="page"] { color: var(--rebe); border-bottom-color: var(--rebe); }

.top .book {
  display: inline-flex; align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--rebe); color: var(--rebe);
  font: 500 12px/1 var(--f-mark); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  transition: background .2s cubic-bezier(.16,1,.3,1), color .2s;
}
.top .book:hover { background: var(--rebe); color: var(--grund); }

.navtoggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid rgba(232,230,220,.3); color: var(--text);
  padding: 9px 15px; cursor: pointer;
  font: 400 12px/1 var(--f-mark); letter-spacing: .16em; text-transform: uppercase;
}

@media (max-width: 800px) {
  .navtoggle { display: block; }
  .nav {
    display: none; order: 3; flex-basis: 100%; flex-direction: column; gap: 0;
    margin: 6px 0 0; padding-top: 10px;
    border-top: 1px solid rgba(232,230,220,.16);
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; }
  .top .book { order: 4; flex-basis: 100%; justify-content: center; }
}

/* ── Kopfschicht ──────────────────────────────────────────────────────── */

.head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
  padding: clamp(40px, 7vw, 110px) var(--pad) clamp(46px, 7vw, 108px);
}
/* Der Kern wird über die Höhe bemessen, nicht über die Breite – sonst
   wächst er dem Titel davon. */
.head-core { display: flex; justify-content: center; }
.head-core svg {
  display: block;
  height: min(62vh, 540px);
  width: auto; max-width: 100%;
}

.head h1 {
  margin: 0 0 22px;
  font-family: var(--f-mark);
  font-weight: 400;
  font-size: clamp(2.5rem, 6.6vw, 5.6rem);
  line-height: .96;
  letter-spacing: -.025em;
}
.head h1 em {
  display: block; font-style: normal;
  color: var(--rebe);
}
.head .ort {
  margin: 0 0 26px;
  font: 400 clamp(11px, 1.2vw, 13px)/1.5 var(--f-mark);
  letter-spacing: .28em; text-transform: uppercase; color: var(--text-2);
}
.head p.lead {
  margin: 0 0 30px; max-width: 46ch;
  font-size: clamp(1.08rem, 1.6vw, 1.32rem); line-height: 1.55;
}

@media (max-width: 780px) {
  .head { grid-template-columns: 1fr; }
  .head-core { justify-content: flex-start; }
  .head-core svg { height: 320px; }
}

/* ── Horizonte ────────────────────────────────────────────────────────── */

.horizon {
  position: relative;
  padding: clamp(46px, 6.4vw, 104px) var(--pad);
  background: var(--bg, var(--grund));
  color: var(--fg, var(--text));
}
/* Die Schichtgrenze: eine unruhige Linie, keine gerade Kante */
.horizon::before {
  content: "";
  position: absolute; top: -1px; left: 0; right: 0; height: 14px;
  background: var(--bg, var(--grund));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V6c30-5 52 3 78 1s44-7 72-5 46 8 76 6 52-8 82-5 62 8 92 4v7z' fill='%23000'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V6c30-5 52 3 78 1s44-7 72-5 46 8 76 6 52-8 82-5 62 8 92 4v7z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 400px 14px; mask-size: 400px 14px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  transform: translateY(-13px);
}

.horizon--humus  { --bg: var(--h-humus);  --fg: var(--text); }
.horizon--loess  { --bg: var(--h-loess);  --fg: #17150e; }
.horizon--mergel { --bg: var(--h-mergel); --fg: var(--text); }
.horizon--sand   { --bg: var(--h-sand);   --fg: #191c15; }
.horizon--gips   { --bg: var(--h-gips);   --fg: #191c15; }

.horizon a { color: inherit; }
.horizon--sand a, .horizon--gips a, .horizon--loess a { text-decoration-color: rgba(0,0,0,.5); }

/* Schichtmarke: Tiefe und Formationsname, links am Abschnitt */
.hmark {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin: 0 0 clamp(20px, 2.6vw, 34px);
  font: 400 11px/1 var(--f-mark); letter-spacing: .24em; text-transform: uppercase;
  opacity: .78;
}
.hmark .d { font-variant-numeric: tabular-nums; }
.hmark .l { flex: 1; min-width: 40px; height: 1px; background: currentColor; opacity: .45; }

h2 {
  margin: 0 0 clamp(16px, 2vw, 26px);
  font-family: var(--f-mark); font-weight: 400;
  font-size: clamp(1.85rem, 4.2vw, 3.4rem);
  line-height: 1.02; letter-spacing: -.022em;
  text-wrap: balance;
}
h3 {
  margin: 0 0 10px;
  font-family: var(--f-mark); font-weight: 500;
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  line-height: 1.25; letter-spacing: .01em;
}
p { margin: 0 0 1.1em; max-width: 64ch; }
p:last-child { margin-bottom: 0; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.24rem); }

/* Absätze, die Layout tragen statt Fließtext – das Zeilenmaß gilt für sie nicht. */
.hmark, .ort, .foot .base { max-width: none; }

.cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(24px, 3.4vw, 54px);
  margin-top: clamp(26px, 3.4vw, 46px);
}
.cols p { font-size: .98rem; }

/* ── Analysetafel: Weine als Laborwerte, nicht als Karten ─────────────── */

.analyse { width: 100%; border-collapse: collapse; margin-top: clamp(24px, 3vw, 40px); }
.analyse caption {
  text-align: left; padding-bottom: 14px;
  font: 400 11px/1 var(--f-mark); letter-spacing: .24em; text-transform: uppercase;
  opacity: .7;
}
.analyse th, .analyse td {
  padding: 15px 14px 15px 0; text-align: left; vertical-align: baseline;
  border-bottom: 1px solid currentColor;
}
.analyse thead th {
  padding-bottom: 9px;
  font: 400 10px/1.3 var(--f-mark); letter-spacing: .18em; text-transform: uppercase;
  opacity: .7; border-bottom-width: 2px;
}
.analyse tbody th { font-weight: 400; }
.analyse tbody tr { transition: background .18s cubic-bezier(.16,1,.3,1); }
.analyse tbody tr:hover { background: rgba(159, 201, 60, .12); }
.analyse .wein {
  font-family: var(--f-mark); font-weight: 500;
  font-size: clamp(1.05rem, 1.5vw, 1.24rem); letter-spacing: -.005em;
}
.analyse .wein small {
  display: block; margin-top: 5px;
  font: 400 11px/1.4 var(--f-mark); letter-spacing: .14em; text-transform: uppercase;
  opacity: .68;
}
.analyse .num { font-family: var(--f-mark); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .96rem; }
.analyse .preis { font-family: var(--f-mark); font-weight: 500; white-space: nowrap; }
.tablescroll { overflow-x: auto; }
.tablescroll .analyse { min-width: 640px; }

/* Bodensignatur als Punkt vor dem Weinnamen */
.sig {
  display: inline-block; width: 11px; height: 11px; margin-right: 9px;
  border: 1px solid currentColor; vertical-align: baseline;
}
.sig--mergel { background: var(--h-mergel); }
.sig--sand   { background: var(--h-sand); }
.sig--gips   { background: var(--h-gips); }
.sig--loess  { background: var(--h-loess); }

/* ── Kennzahlen als Bohrprotokoll ─────────────────────────────────────── */

.werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: clamp(26px, 3vw, 42px); }
.werte > div { padding: 20px 20px 22px 0; border-top: 2px solid currentColor; }
.werte dt { font: 400 10px/1.3 var(--f-mark); letter-spacing: .2em; text-transform: uppercase; opacity: .72; }
.werte dd {
  margin: 12px 0 0;
  font: 400 clamp(1.7rem, 3vw, 2.5rem)/1 var(--f-mark);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.werte dd small { display: block; margin-top: 8px; font-size: .38em; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }

/* ── Zitat ────────────────────────────────────────────────────────────── */

.saying { margin: 0; max-width: 26ch; }
.saying blockquote {
  margin: 0 0 20px;
  font-size: clamp(1.4rem, 3vw, 2.15rem); line-height: 1.24;
  font-style: italic;
}
.saying figcaption {
  font: 400 11px/1.6 var(--f-mark); letter-spacing: .2em; text-transform: uppercase;
  opacity: .75;
}

/* ── Knöpfe ───────────────────────────────────────────────────────────── */

.act {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 26px;
  background: var(--rebe); color: var(--grund);
  border: 0; cursor: pointer;
  font: 500 13px/1 var(--f-mark); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  transition: background .2s cubic-bezier(.16,1,.3,1), transform .2s cubic-bezier(.16,1,.3,1);
}
.act:hover { background: #b6e04f; transform: translateY(-2px); }
.act:active { transform: translateY(0); }
.act--line {
  background: transparent; color: inherit;
  box-shadow: inset 0 0 0 1px currentColor;
}
.act--line:hover { background: currentColor; color: var(--bg, var(--grund)); transform: translateY(-2px); }
.act--dark { background: var(--grund); color: var(--text); }
.act--dark:hover { background: #000; }

/* ── Formular ─────────────────────────────────────────────────────────── */

.form { max-width: 620px; margin-top: clamp(26px, 3vw, 40px); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }

.f { margin-bottom: 20px; }
.f label {
  display: block; margin-bottom: 8px;
  font: 400 10.5px/1 var(--f-mark); letter-spacing: .2em; text-transform: uppercase;
  opacity: .8;
}
.f input, .f select, .f textarea {
  width: 100%; padding: 13px 0;
  background: transparent; color: inherit;
  border: 0; border-bottom: 1px solid currentColor; border-radius: 0;
  font: 400 1.02rem/1.4 var(--f-lese);
  transition: border-color .2s;
}
.f input::placeholder, .f textarea::placeholder { color: currentColor; opacity: .45; }
.f input:focus, .f select:focus, .f textarea:focus {
  outline: 0; border-bottom-color: var(--rebe); border-bottom-width: 2px;
}
.f textarea { resize: vertical; min-height: 96px; }
.f select { appearance: none; cursor: pointer; }
.f .bad { display: none; margin: 7px 0 0; font: 500 12px/1.4 var(--f-mark); color: #ffbcbc; }
.f.no .bad { display: block; }
.f.no input, .f.no textarea, .f.no select { border-bottom-color: #ffbcbc; }
.f .tip { margin: 8px 0 0; font: 400 12.5px/1.5 var(--f-mark); opacity: .68; }

.done {
  display: none; margin-bottom: 22px; padding: 15px 18px;
  background: var(--rebe); color: var(--grund);
  font: 500 .95rem/1.5 var(--f-mark);
}
.done.on { display: block; }

/* ── Öffnungszeiten ───────────────────────────────────────────────────── */

.hours { list-style: none; margin: 0; padding: 0; max-width: 460px; }
.hours li {
  display: flex; gap: 18px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid currentColor;
  font-family: var(--f-mark); font-size: .98rem;
}
.hours li b { font-weight: 500; min-width: 8.5em; }
.hours li .z { margin-left: auto; font-variant-numeric: tabular-nums; opacity: .85; }
.hours li.zu .z { opacity: .55; }

/* ── Fuß ──────────────────────────────────────────────────────────────── */

.foot {
  padding: clamp(40px, 5vw, 80px) var(--pad) 26px;
  background: var(--grund-2);
  border-top: 1px solid rgba(232,230,220,.15);
}
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 34px; }
.foot h4 { margin: 0 0 15px; font: 400 10px/1 var(--f-mark); letter-spacing: .24em; text-transform: uppercase; color: var(--rebe); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 9px; }
.foot a { color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; font-size: .98rem; }
.foot a:hover { border-bottom-color: var(--rebe); }
.foot p { font-size: .98rem; color: var(--text-2); }
.foot .base {
  margin-top: clamp(30px, 3.4vw, 50px); padding-top: 20px;
  border-top: 1px solid rgba(232,230,220,.15);
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  font: 400 11px/1.6 var(--f-mark); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-2);
}
.foot .base .mark { background: var(--rebe); color: var(--grund); padding: 3px 9px; }

/* ── Innenseiten ──────────────────────────────────────────────────────── */

.sheet { padding: clamp(40px, 6vw, 92px) var(--pad); }
.sheet h1 {
  margin: 0 0 20px;
  font-family: var(--f-mark); font-weight: 400;
  font-size: clamp(2.3rem, 6vw, 4.6rem); line-height: .98; letter-spacing: -.025em;
}
.sheet .intro { max-width: 52ch; font-size: clamp(1.05rem, 1.5vw, 1.24rem); }

.prose h2 { margin-top: 1.9em; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.7em; }
.prose ul, .prose ol { max-width: 64ch; padding-left: 1.2em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .45em; }
.prose dt { font-family: var(--f-mark); font-weight: 500; margin-top: 1.2em; }
.prose dd { margin: .3em 0 0; color: var(--text-2); }

@media (prefers-reduced-motion: reduce) {
  .rail-read, .rail-marker { transition: none; }
  * { transition-duration: .01ms !important; }
}

/* Sprungziele bleiben unter der klebenden Kopfleiste sichtbar. */
[id] { scroll-margin-top: 92px; }

/* ── Deutsche Komposita ───────────────────────────────────────────────
   „Berufshaftpflichtversicherung" ist in einer schmalen Spalte breiter als
   der Kasten. Mit lang="de" trennt der Browser korrekt statt zu überlaufen. */
h1, h2, h3, h4 { hyphens: auto; overflow-wrap: break-word; }
p, li, dd, dt, th, td, summary, figcaption { overflow-wrap: break-word; }