/* Weinhof Dieroff — Spalierdraht-Felder
   Gestaltung: CD Studios, 2026. Alles lokal, keine externen Ressourcen. */

/* ---------- Schriften (lokal) ---------- */
@font-face{font-family:"Marcellus";src:url("schriften/marcellus-400-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Marcellus";src:url("schriften/marcellus-400-latin-ext.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Golos Text";src:url("schriften/golos-text-var-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";src:url("schriften/golos-text-var-latin-ext.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Farben und Maße ---------- */
:root{
  --kalk:#F4EEE1;          /* Muschelkalk, Grundfläche */
  --kalk2:#EAE2D2;         /* Kalkschatten, zweite helle Fläche */
  --nacht:#191512;         /* Rebschwarz */
  --nacht2:#241E19;
  --purpur:#6E1E3C;        /* Lemberger-Purpur, einzige Signalfarbe */
  --purpur-hell:#D08AA4;   /* dieselbe Farbe für dunkle Flächen */
  --gruen:#5A6B34;         /* Triebgrün, nur Bio-Marke */
  --gruen-hell:#A8BC77;
  --stein:#665D50;         /* Nebenangaben */
  --stein-hell:#B7AC9B;
  --draht:#B6A992;         /* Spalierdraht auf hell */
  --draht-dunkel:#4A4038;  /* Spalierdraht auf dunkel */
  --bahn:min(1180px,100% - 2.4rem);
  --kopf-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}
body{
  margin:0;background:var(--kalk);color:var(--nacht);
  font-family:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem;line-height:1.65;font-weight:400;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--purpur);text-underline-offset:.16em;text-decoration-thickness:from-font}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--purpur);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{font-family:"Marcellus",Georgia,serif;font-weight:400;line-height:1.15;
  letter-spacing:.005em;margin:0 0 .5rem}
h1{font-size:clamp(2.1rem,6.2vw,3.5rem)}
h2{font-size:clamp(1.65rem,4.4vw,2.5rem)}
h3{font-size:clamp(1.2rem,2.6vw,1.5rem)}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem;padding-left:1.25rem}
li{margin-bottom:.3rem}
hr{border:0;border-top:1px solid var(--draht);margin:2rem 0}

.bahn{width:var(--bahn);margin-inline:auto}
.eng{max-width:62ch}
.eng h2{font-size:clamp(1.18rem,2.6vw,1.5rem);margin-top:2rem}
.eng h2:first-of-type{margin-top:1rem}
.vorwort{font-size:1.12rem;color:var(--stein)}
.klein{font-size:.9rem;color:var(--stein)}
.nur-screenreader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprungmarke{position:absolute;left:.6rem;top:-4rem;z-index:200;background:var(--nacht);color:var(--kalk);
  padding:.7rem 1.1rem;transition:top .15s}
.sprungmarke:focus{top:.6rem}

/* ---------- Kopf: bleibt beim Scrollen oben ---------- */
.kopfleiste{position:sticky;top:0;z-index:100;background:var(--nacht);color:var(--kalk);
  border-bottom:1px solid var(--draht-dunkel)}
.kopfleiste .bahn{display:flex;align-items:center;gap:1rem;min-height:var(--kopf-h)}
.marke{display:flex;align-items:center;gap:.7rem;margin-right:auto;text-decoration:none;color:inherit;padding:.4rem 0}
.marke img{width:104px;height:91px;width:auto;height:44px}
.marke b{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.02rem;letter-spacing:.12em;
  text-transform:uppercase;display:none}
@media (min-width:900px){.marke b{display:block}}
.menue-knopf{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;min-width:44px;
  padding:.5rem .8rem;background:transparent;color:var(--kalk);border:1px solid var(--draht-dunkel);
  font:inherit;font-size:.95rem;cursor:pointer}
.menue-knopf:hover{border-color:var(--purpur-hell)}
.menue-knopf .balken{display:block;width:20px;height:9px;border-top:2px solid currentColor;
  border-bottom:2px solid currentColor;position:relative}
.menue-knopf .balken::after{content:"";position:absolute;left:0;top:3px;width:20px;height:2px;background:currentColor}
.hauptnavi ul{list-style:none;margin:0;padding:0}
@media (max-width:899px){
  .hauptnavi{position:absolute;left:0;right:0;top:100%;background:var(--nacht2);
    border-bottom:1px solid var(--draht-dunkel);display:none}
  .hauptnavi[data-offen="ja"]{display:block}
  .hauptnavi ul{width:var(--bahn);margin-inline:auto;padding:.6rem 0 1rem}
  .hauptnavi li{margin:0}
  .hauptnavi a{display:block;padding:.85rem .2rem;min-height:44px;color:var(--kalk);
    text-decoration:none;border-bottom:1px solid var(--draht-dunkel)}
  .hauptnavi a:hover,.hauptnavi a[aria-current]{color:var(--purpur-hell)}
}
@media (min-width:900px){
  .menue-knopf{display:none}
  .hauptnavi{display:block !important}
  .hauptnavi ul{display:flex;gap:.2rem;flex-wrap:wrap}
  .hauptnavi a{display:block;padding:.75rem .7rem;color:var(--kalk);text-decoration:none;font-size:.97rem}
  .hauptnavi a:hover{color:var(--purpur-hell)}
  .hauptnavi a[aria-current]{color:var(--purpur-hell);box-shadow:inset 0 -2px 0 var(--purpur-hell)}
}

/* ---------- Rebfeld: die Grundform ---------- */
.feld{position:relative;padding:3.4rem 0 3.6rem;background:var(--kalk)}
.feld.kalkschatten{background:var(--kalk2)}
.feld.nacht{background:var(--nacht);color:var(--kalk);--draht:var(--draht-dunkel)}
.feld.nacht a{color:var(--purpur-hell)}
.feld.nacht .vorwort,.feld.nacht .klein{color:var(--stein-hell)}
.feld.nacht h1,.feld.nacht h2,.feld.nacht h3{color:var(--kalk)}

/* Der Kopf eines Rebfeldes: Überschrift zwischen zwei durchgehenden Spalierdrähten */
.feld-kopf{position:relative;padding:2.15rem 0 1.35rem;margin-bottom:1.6rem}
.feld-kopf::before,.feld-kopf::after{
  content:"";position:absolute;left:50%;width:100vw;transform:translateX(-50%);
  height:1px;background:var(--draht)}
.feld-kopf::before{top:0}
.feld-kopf::after{bottom:0}
.feld-kopf h1,.feld-kopf h2{margin:0}
.feld-kopf .unterzeile{margin:.55rem 0 0;color:var(--stein);font-size:1.05rem}
.feld.nacht .feld-kopf .unterzeile{color:var(--stein-hell)}

/* Bogenrebe: gezeichneter Trieb, der am oberen Draht angebunden ist */
.bogenrebe{position:absolute;top:-25px;left:0;width:54px;height:50px;color:var(--purpur);pointer-events:none}
.feld.nacht .bogenrebe{color:var(--purpur-hell)}
.bogenrebe .nr{font-family:"Golos Text",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.06em;fill:currentColor}
@media (max-width:640px){.bogenrebe{width:44px;height:42px;top:-21px}}

/* Fotos: dieselben zwei Drähte laufen darüber weiter */
.bild{position:relative;margin:0 0 1.4rem}
.bild img{width:100%;object-fit:cover;background:var(--kalk2)}
.bild::before,.bild::after{content:"";position:absolute;left:0;right:0;height:1px;
  background:rgba(255,255,255,.55);mix-blend-mode:overlay;pointer-events:none}
.bild::before{top:31%}
.bild::after{top:69%}
.bild figcaption{font-size:.88rem;color:var(--stein);padding-top:.5rem}
.feld.nacht .bild figcaption{color:var(--stein-hell)}
.bild.sw img{filter:grayscale(1)}

.zweispalt{display:grid;gap:1.8rem 2.4rem;align-items:start}
@media (min-width:840px){.zweispalt{grid-template-columns:1fr 1fr}
  .zweispalt.bild-links>.bild{order:-1}}
.dreispalt{display:grid;gap:1.6rem 2rem}
@media (min-width:760px){.dreispalt{grid-template-columns:repeat(3,1fr)}}

/* ---------- Marken, Knöpfe, Listen ---------- */
.marke-bio{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gruen);
  border:1px solid currentColor;padding:.16rem .5rem;white-space:nowrap}
.feld.nacht .marke-bio{color:var(--gruen-hell)}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.75rem 1.35rem;background:var(--purpur);color:#fff;
  text-decoration:none;font-weight:600;font-size:1rem;border:1px solid var(--purpur)}
.knopf:hover{background:#5A162F;border-color:#5A162F;color:#fff}
.knopf.leer{background:transparent;color:var(--purpur);border-color:var(--purpur)}
.knopf.leer:hover{background:rgba(110,30,60,.09);color:var(--purpur)}
.feld.nacht .knopf{background:var(--purpur-hell);border-color:var(--purpur-hell);color:var(--nacht)}
.feld.nacht .knopf:hover{background:#E3A6BB;border-color:#E3A6BB;color:var(--nacht)}
.feld.nacht .knopf.leer{background:transparent;color:var(--purpur-hell)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.2rem 0 0}

.datenliste{margin:0}
.datenliste div{display:flex;flex-wrap:wrap;gap:.2rem .8rem;padding:.55rem 0;
  border-bottom:1px solid var(--draht)}
.datenliste dt{font-weight:600;min-width:11rem}
.datenliste dd{margin:0;color:var(--stein)}
.feld.nacht .datenliste dd{color:var(--stein-hell)}

/* ---------- Öffnungsstatus ---------- */
.status{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.95rem;
  padding:.45rem .8rem;border:1px solid var(--draht)}
.status .punkt{width:10px;height:10px;border-radius:50%;background:var(--stein);flex:none}
.status[data-offen="ja"] .punkt{background:var(--gruen)}
.status[data-offen="nein"] .punkt{background:var(--purpur)}
.feld.nacht .status[data-offen="ja"] .punkt{background:var(--gruen-hell)}
.feld.nacht .status[data-offen="nein"] .punkt{background:var(--purpur-hell)}
.zeiten{width:100%;border-collapse:collapse;margin:0 0 1rem}
.zeiten th,.zeiten td{text-align:left;padding:.5rem .6rem .5rem 0;border-bottom:1px solid var(--draht);
  font-size:.98rem;vertical-align:top}
.zeiten th{font-weight:600;white-space:nowrap}
.zeiten tr[data-heute="ja"] th,.zeiten tr[data-heute="ja"] td{color:var(--purpur);font-weight:600}
.feld.nacht .zeiten tr[data-heute="ja"] th,.feld.nacht .zeiten tr[data-heute="ja"] td{color:var(--purpur-hell)}

/* ---------- Weinkarte ---------- */
.filterleisten{margin:0 0 1.8rem}
.filterleiste{margin:0 0 .85rem}
.filterleiste > span{display:block;font-size:.8rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--stein);margin-bottom:.4rem}
.filterleiste .knoepfe{display:flex;flex-wrap:wrap;gap:.45rem}
.filterleiste button{min-height:44px;padding:.5rem .9rem;font:inherit;font-size:.95rem;
  background:transparent;color:var(--nacht);border:1px solid var(--draht);cursor:pointer}
.filterleiste button:hover{border-color:var(--purpur)}
.filterleiste button[aria-pressed="true"]{background:var(--purpur);border-color:var(--purpur);color:#fff}
.suchfeld{display:block;margin:0 0 1.4rem}
.suchfeld label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--stein);margin-bottom:.4rem}
.suchfeld input{width:100%;max-width:26rem;min-height:48px;padding:.6rem .8rem;font:inherit;
  background:#fff;color:var(--nacht);border:1px solid var(--draht)}
.trefferzahl{font-size:.95rem;color:var(--stein);margin:0 0 1.4rem}

.weinserie{margin:0 0 2.6rem}
.weinserie > h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;margin-bottom:.2rem}
.weinserie h2{font-size:clamp(1.35rem,3vw,1.8rem)}
.weinserie .sterne{color:var(--purpur);letter-spacing:.12em;font-size:.95rem}
.weinserie .serientext{color:var(--stein);margin:.35rem 0 1rem;max-width:64ch}
.weinliste{list-style:none;margin:0;padding:0;border-top:1px solid var(--draht)}
.wein{display:grid;grid-template-columns:2.6rem 1fr auto;gap:.15rem .8rem;
  padding:.85rem 0;border-bottom:1px solid var(--draht)}
.wein .nr{grid-row:1/span 3;font-size:.92rem;color:var(--stein);font-variant-numeric:tabular-nums;padding-top:.15rem}
.wein .name{font-family:"Marcellus",Georgia,serif;font-size:1.14rem;line-height:1.3;margin:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.wein .preis{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.wein .preis small{display:block;font-weight:400;font-size:.8rem;color:var(--stein)}
.wein .stufe{grid-column:2/4;color:var(--stein);font-size:.95rem;margin:.1rem 0 0}
.wein .werte{grid-column:2/4;margin:.3rem 0 0;font-size:.87rem;color:var(--stein);
  display:flex;flex-wrap:wrap;gap:.25rem .9rem;font-variant-numeric:tabular-nums}
.wein .werte b{font-weight:600;color:var(--nacht)}
.wein .notiz{grid-column:2/4;margin:.5rem 0 0;font-size:.95rem}
.wein .hinweis{grid-column:2/4;margin:.35rem 0 0;font-size:.87rem;color:var(--purpur);font-weight:600}
.wein[hidden]{display:none}
@media (max-width:560px){
  .wein{grid-template-columns:2.4rem 1fr}
  .wein .preis{grid-column:2;text-align:left;margin-top:.25rem}
  .wein .stufe,.wein .werte,.wein .notiz,.wein .hinweis{grid-column:2}
}
.leer-treffer{padding:1.6rem 0;color:var(--stein)}

/* ---------- Terminliste ---------- */
.termine{list-style:none;margin:0;padding:0;border-top:1px solid var(--draht)}
.termine li{display:grid;grid-template-columns:9.5rem 1fr;gap:.2rem 1.2rem;padding:.9rem 0;
  border-bottom:1px solid var(--draht)}
.termine .datum{font-weight:600;font-variant-numeric:tabular-nums}
.termine h3{font-size:1.1rem;margin:0 0 .2rem}
.termine p{margin:0;color:var(--stein)}
.feld.nacht .termine p,.feld.nacht .termine .datum{color:var(--stein-hell)}
@media (max-width:600px){.termine li{grid-template-columns:1fr}}

/* ---------- Formulare ---------- */
form{max-width:40rem}
.feldpaar{margin:0 0 1.1rem}
.feldpaar label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.35rem}
.feldpaar input,.feldpaar textarea,.feldpaar select{width:100%;min-height:48px;padding:.6rem .8rem;
  font:inherit;background:#fff;color:var(--nacht);border:1px solid var(--draht)}
.feldpaar textarea{min-height:9rem;resize:vertical}
.zustimmung{display:flex;gap:.7rem;align-items:flex-start;margin:0 0 1.2rem}
.zustimmung input{width:22px;height:22px;min-height:22px;margin-top:.25rem;flex:none;accent-color:var(--purpur)}
.zustimmung label{font-size:.95rem;font-weight:400}
.formhinweis{background:var(--kalk2);border-left:3px solid var(--purpur);padding:.9rem 1.1rem;
  font-size:.94rem;margin:0 0 1.4rem}
.feld.nacht .formhinweis{background:var(--nacht2);border-left-color:var(--purpur-hell)}

/* ---------- Karte als Zwei-Klick-Lösung ---------- */
.kartenfeld{border:1px solid var(--draht);background:var(--kalk2);padding:1.2rem;max-width:44rem}
.lageplan{width:100%;height:auto;display:block;background:#E3DAC6}
.karten-hinweis{font-size:.9rem;color:var(--stein);margin:.9rem 0 0}

/* ---------- Fuß ---------- */
.fuss{background:var(--nacht);color:var(--kalk);padding:3rem 0 2rem;font-size:.97rem}
.fuss a{color:var(--purpur-hell)}
.fuss h2{font-size:1.15rem;color:var(--kalk);margin-bottom:.6rem}
.fuss .spalten{display:grid;gap:1.8rem 2.4rem;margin-bottom:2rem}
@media (min-width:760px){.fuss .spalten{grid-template-columns:repeat(3,1fr)}}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:.4rem}
.fussleiste{border-top:1px solid var(--draht-dunkel);padding-top:1.2rem;display:flex;
  flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;color:var(--stein-hell);font-size:.9rem}
.altershinweis{border:1px solid var(--draht-dunkel);padding:.75rem 1rem;margin:0 0 1.6rem;
  color:var(--stein-hell);font-size:.92rem}