/* 1. Grundlagen ------------------------------------------------- */
:root {
  --creme:     #F7F3EC;
  --beige:     #EFE7DA;
  --weinrot:   #691D2B;
  --weinrot-h: #862637;
  --oliv:      #3F4930;
  --anthrazit: #292725;
  --grau:      #5B554E;
  --linie:     #DCD3C4;
  --fokus:     #0B5CAD;
  --serif: Georgia, "Times New Roman", "Nimbus Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--anthrazit);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
}

a:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; height: auto; display: block; }
/* <picture> ist per Default inline. Als Grid-Kind und Bildcontainer soll es
   sich genauso verhalten wie das <img> darin. */
picture { display: block; }
figure { margin: 0; }
.bild { border-radius: 2px; }

.wrap { width: 100%; max-width: 70.75rem; margin: 0 auto; padding: 0 1.25rem; }
.text-schmal { max-width: 36em; }

.skip {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  background: var(--weinrot); color: #fff;
  z-index: 100;
}
.skip:focus {
  width: auto; height: auto;
  margin: 0; padding: 0.75rem 1.25rem; overflow: visible;
  clip-path: none;
}

.nur-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 2. Typografie ------------------------------------------------- */
h1, h2 {
  font-family: var(--serif);
  font-weight: normal;
  line-height: 1.15;
  color: var(--weinrot);
  margin: 0 0 0.5em;
  letter-spacing: 0.005em;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 1.9rem; }
h3 { font-weight: 600; font-size: 1.15rem; margin: 0 0 0.4em; }
p { margin: 0 0 1.1em; max-width: 42em; }

a { color: var(--weinrot); text-underline-offset: 0.18em; }
a:hover { color: var(--weinrot-h); }

.eyebrow {
  display: block;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 0.9rem;
}

.subline {
  font-family: var(--serif);
  font-size: 1.3rem; line-height: 1.45;
  color: var(--anthrazit);
  max-width: 30em;
  margin-bottom: 0.8rem;
}

.klein { font-size: 0.9rem; color: var(--grau); }

.pfeil-link {
  display: inline-block;
  text-decoration: none;
  color: var(--weinrot);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.pfeil-link::after { content: "\2009\2192"; }
.pfeil-link:hover, .pfeil-link:focus-visible { text-decoration: underline; }

/* 3. Kopfbereich: zentrierte Marke, Navigation darunter ---------- */
.kopf { text-align: center; padding: 1.9rem 0 0; }
.marke { display: inline-block; text-decoration: none; color: var(--weinrot); }
.marke .name {
  display: block;
  font-family: var(--serif);
  font-size: 2.1rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.marke .zusatz {
  display: block;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--grau);
  margin-top: 0.5rem;
}
.hauptnav {
  margin-top: 1.4rem;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.hauptnav ul {
  list-style: none; margin: 0; padding: 0.85rem 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem 2.5rem;
}
.hauptnav a {
  display: inline-block;
  text-decoration: none;
  color: var(--anthrazit);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.hauptnav a:hover { color: var(--weinrot); }
.hauptnav .nav-telefon a { color: var(--weinrot); }

/* 4. Hero: Text links, Bild als Hochformat-Ausschnitt rechts ----- */
.hero { padding: 3rem 0 3.5rem; }
.hero-inner { display: grid; gap: 2.2rem; align-items: center; }
.hero-text h1 { margin-bottom: 0.35em; }
.hero-text .ort { max-width: 34em; margin-bottom: 1.4rem; }
/* Hochformat 4:5. Die Datei liegt in 1200 × 1500 px vor, wird also
   nicht beschnitten. */
.hero-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* 5. Sortiment: Wein auf Beige-Fläche, vier Ergänzungen als Karten */
.sortiment { padding: 3.25rem 0 3.5rem; border-top: 1px solid var(--linie); }
.sortiment-intro { text-align: center; max-width: 40em; margin: 0 auto; }
.sortiment-intro p { margin-bottom: 0; }

.sortiment-wein {
  margin-top: 2.6rem;
  background: var(--beige);
  border-radius: 2px;
  padding: 2.2rem 1.5rem;
  display: grid;
  gap: 1.4rem;
  align-items: center;
}
.sortiment-wein h3 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 2.4rem;
  line-height: 1.1;
  color: var(--weinrot);
  margin: 0;
}
.sortiment-wein p { font-size: 1.1rem; margin-bottom: 0.9em; }

.sortiment-liste {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.sortiment-liste > li {
  border: 1px solid var(--linie);
  border-radius: 2px;
  padding: 1.5rem 1.6rem;
}
.sortiment-liste h3 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 1.35rem;
  color: var(--weinrot);
  margin: 0 0 0.4rem;
}
.sortiment-liste p { margin: 0; font-size: 0.93rem; line-height: 1.6; }

/* 6. Direktimport ------------------------------------------------ */
.direktimport { padding: 2.8rem 0 3rem; text-align: center; border-top: 1px solid var(--linie); }
.direktimport .eyebrow { color: var(--oliv); margin-bottom: 0.8rem; }
.direktimport p {
  font-family: var(--serif);
  font-size: 1.5rem; line-height: 1.4;
  max-width: 24em;
  margin: 0 auto;
}

/* 7. Präsente ---------------------------------------------------- */
.praesente { background: var(--beige); padding: 3.25rem 0; }
.praesente-inner { display: grid; gap: 2rem; align-items: center; }
.praesente h2 { margin-bottom: 0.6em; }
.praesente .bild { width: 100%; }

/* 8. Termine ------------------------------------------------------
   PFLEGE: pro Termin ein <article class="termin">-Block im HTML.
   Neuer Termin = Block kopieren, Datum/Titel/Zeilen anpassen.
   1–6 Blöcke funktionieren ohne weitere Änderung. Längere
   Beschreibung = zusätzlicher <p>-Absatz im Block.                 */
.termine-intro { background: var(--weinrot); color: var(--creme); padding: 2.6rem 0; }
.termine-intro .eyebrow { color: #E8CDB9; }
.termine-intro h2 { color: var(--creme); margin-bottom: 0.3em; }
.termine-intro p { font-family: var(--serif); font-size: 1.15rem; color: #E8CDB9; margin: 0; }
.termine-intro a:focus-visible { outline-color: var(--creme); }

.termine { padding: 2rem 0 3.25rem; }

/* Hinweis ueber der Liste: es gibt nicht nur die festen Termine.
   Weinrot hier als Linie, nicht als Flaeche - die Flaeche bleibt dem
   Band vorbehalten. */
.termine-vorab {
  max-width: 40rem;   /* nicht 46rem wie die Liste: dort waeren es
                         95-100 Zeichen je Zeile. Der rechte Rand ist
                         unsichtbar, es geht keine Kante verloren. */
  margin: 0 0 1.8rem;
  padding: 0.15rem 0 0.15rem 1.1rem;
  border-left: 3px solid var(--weinrot);
  font-size: 0.95rem;
}
.termine-vorab p {
  margin: 0;
  max-width: none;
  text-wrap: balance;   /* gleicht die Zeilenlaengen aus; aeltere
                           Browser ignorieren die Zeile folgenlos */
}
/* "E-Mail" soll nicht am Bindestrich umbrechen. */
.termine-vorab a { white-space: nowrap; }
.termine-liste { max-width: 46em; margin: 0 0 1.8rem; border-bottom: 1px solid var(--linie); }
.termin {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 1.4rem;
  align-items: start;
  padding: 1.4rem 0;
  border-top: 1px solid var(--linie);
}
.termin time { display: block; text-align: center; }
.termin .termin-tag {
  display: block;
  font-family: var(--serif);
  font-size: 2.3rem; line-height: 1;
  color: var(--weinrot);
}
.termin .termin-monat {
  display: block;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--grau);
  margin-top: 0.3rem;
}
.termin .termin-jahr {
  display: block;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--grau);
  margin-top: 0.15rem;
}
.termin h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.termin .termin-meta { margin: 0; font-size: 0.9rem; color: var(--grau); }
.termin p { margin: 0.4rem 0 0; font-size: 0.95rem; line-height: 1.6; }

/* Die Absaetze laufen so breit wie die Terminliste darueber (dort 46em bei
   1rem, hier deshalb 46rem) - sonst greift die 42em-Zeilenbreite der
   Basistypografie und bricht frueher um als die Liste endet.
   46rem ist die Zahl zum Justieren. */
.termine-meta { font-size: 0.95rem; max-width: 46rem; }
.termine-meta p { margin-bottom: 0.4em; max-width: none; }

/* 9. Kontakt ------------------------------------------------------ */
.kontakt { padding: 3rem 0 2.6rem; border-top: 1px solid var(--linie); }
.kontakt-spalten { display: grid; gap: 2.2rem; margin-top: 1.6rem; }
.kontakt .klein { margin-top: 0.9rem; }
address { font-style: normal; }
address .firmenname { font-family: var(--serif); font-size: 1.35rem; color: var(--weinrot); }
.kontakt-spalten dl { margin: 0; }
.kontakt-spalten dt {
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--grau);
  margin-top: 0.9rem;
}
.kontakt-spalten dt:first-child { margin-top: 0; }
.kontakt-spalten dd { margin: 0.1rem 0 0; }

/* 10. Preisliste --------------------------------------------------- */
/* Kasten im Sortiment unter den vier Kacheln: beige Flaeche wie beim
   Wein-Kasten, Ueberschrift aber so gross wie die Kachel-Titel - die
   Preisliste ist keine Warengruppe. Bewusst eigenstaendig statt
   .sortiment-wein mitzubenutzen: der Kasten ist einspaltig.
   Abstand nach oben ist eine Zahl, hier justieren. */
.sortiment-preisliste {
  margin-top: 1.6rem;
  background: var(--beige);
  border-radius: 2px;
  padding: 1.5rem 1.6rem;
}
.sortiment-preisliste h3 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 1.35rem;
  color: var(--weinrot);
  margin: 0 0 0.6rem;
}
/* max-width: none hebt die 42em-Zeilenbreite der Basistypografie auf,
   damit der Satz in einer Zeile steht, solange der Kasten breit genug ist. */
.sortiment-preisliste p {
  font-size: 1.1rem;
  max-width: none;
  margin-bottom: 0.9em;
}
.sortiment-preisliste p:last-child { margin-bottom: 0; }
/* 11. Fuß ---------------------------------------------------------- */
.fuss { background: var(--beige); padding: 2.2rem 0; font-size: 0.9rem; }
.fuss ul {
  list-style: none; margin: 0 0 1.1rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.8rem;
}
.fuss a { color: var(--anthrazit); }
.fuss a:hover { color: var(--weinrot); }
.fuss p { color: var(--grau); margin: 0; max-width: none; }

/* 12. Größere Bildschirme ------------------------------------------ */
@media (min-width: 40em) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2.15rem; }
  .subline { font-size: 1.45rem; }
  .hero-inner { grid-template-columns: 7fr 5fr; gap: 3.5rem; }
  .sortiment-wein { grid-template-columns: 4fr 8fr; gap: 3rem; padding: 2.4rem 2.6rem; }
  .sortiment-liste { grid-template-columns: 1fr 1fr; }
  .praesente-inner { grid-template-columns: 2fr 3fr; gap: 3rem; }
  .kontakt-spalten { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

@media (min-width: 60em) {
  h1 { font-size: 3.4rem; }
  h2 { font-size: 2.4rem; }
  .marke .name { font-size: 2.35rem; }
  .hero { padding: 3.75rem 0 4.25rem; }
  .hero-inner { gap: 4.5rem; }
  .sortiment { padding: 3.5rem 0 4rem; }
  .sortiment-wein h3 { font-size: 2.85rem; }
  .sortiment-liste { grid-template-columns: repeat(4, 1fr); }
  .direktimport { padding: 3rem 0 3.25rem; }
  .praesente { padding: 3.5rem 0; }
  .termine-intro { padding: 2.75rem 0; }
  .termine { padding: 2rem 0 3.75rem; }
  .kontakt { padding: 3.25rem 0 3rem; }
}

@media print {
  .hauptnav, .skip { display: none; }
  .kopf, .fuss, .praesente { background: #fff; }
  .termine-intro { background: #fff; }
  .termine-intro h2, .termine-intro p { color: #000; }
  body { background: #fff; font-size: 11pt; }
}

/* 13. Rechtstexte (Impressum, Datenschutz) ---------------------- */
.rechtstext { padding: 2.5rem 0 3.5rem; }
.rechtstext h1 { margin-bottom: 1rem; }
.rechtstext h2 { font-size: 1.35rem; margin: 2.2rem 0 0.6em; }
.rechtstext h3 { font-size: 1.25rem; margin: 1.6rem 0 0.4em; }
.rechtstext p { font-size: 1rem; }
.rechtstext .pfeil-link { margin-top: 1.5rem; }
.rechtstext h4 { font-weight: 600; font-size: 1rem; margin: 1.4rem 0 0.3em; }
.rechtstext ul { font-size: 1rem; max-width: 42em; margin: 0 0 1.1em; padding-left: 1.3em; }
.rechtstext li { margin-bottom: 0.4em; }
/* Die beiden Widerspruchs-Absaetze nach Art. 21 DSGVO. Art. 21 Abs. 4 verlangt,
   dass der Hinweis hervorgehoben und getrennt von anderen Informationen
   dargestellt wird. Der Generatortext loest das mit Versalien - hier
   stattdessen Fettung plus Linie links: gleiche Wirkung, deutlich leichter zu
   lesen. Grossbuchstaben ueber mehrere Zeilen bremsen jeden, der nicht
   fluessig liest. */
.rechtstext .hervorhebung {
  border-left: 3px solid var(--linie);
  padding-left: 1rem;
  margin-bottom: 1.1em;
}
.rechtstext .hervorhebung p { font-weight: 600; }
.rechtstext .hervorhebung p:last-child { margin-bottom: 0; }