/* Retzschgut – Stylesheet
   Layout: „Hof und Hang“ – von der Straße über Hof und Garten hinauf in den Weinberg.
   Kalkweiße Flächen wechseln mit ockerfarbenen Putzbändern; Fotos tragen einen feinen
   Plattenrand wie eine Radierung (Moritz Retzsch war für seine Umrissradierungen bekannt). */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-600-normal.woff2?v=a720b424") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben vom Haus: Kalkwand, Schieferdach, Ochsenblut-Fassade, Ockerputz, Weinlaub */
  --kalk: #f4f1e9;            /* Papier: zwischen Hellgrau und Elfenbein */
  --kalk-tief: #ebe7dd;
  --schiefer: #22272b;
  --schiefer-weich: #50575c;
  --ochsenblut: #7a1f1f;
  --ochsenblut-tief: #5a1414;
  --knopf: #7a1f1f;
  --knopf-tief: #5a1414;
  --auf-knopf: #f5f4ee;
  --ocker: #e6cc92;
  --auf-ocker: #2b2216;
  --rebe: #486234;
  --nacht: #1b1f22;
  --auf-nacht: #eeebe3;
  --linie: color-mix(in oklab, var(--schiefer) 16%, transparent);
  --linie-stark: color-mix(in oklab, var(--schiefer) 38%, transparent);
  --glas: color-mix(in oklab, var(--kalk) 86%, transparent);
  --schatten: 0 1.5rem 3rem -1.5rem rgb(20 16 12 / 0.35);
  /* Hintergründe (erzeugt mit werkzeuge/papier.py) und Trennranke (werkzeuge/trennranke.py) */
  --papier-bild: url("../hintergrund/papier.webp?v=a720b424");
  --pergament: #f3e5c8;
  --pergament-bild: url("../hintergrund/pergament.webp?v=a720b424");
  --pergament-rand: rgb(120 80 30 / 0.16);
  --trenner: url("../rahmen/trenner-ochsenblut.svg?v=a720b424");
  --eckranke: url("../rahmen/eckranke-ochsenblut.svg?v=a720b424");
  --eckranke-senkrecht: url("../rahmen/eckranke-senkrecht-ochsenblut.svg?v=a720b424");
  --trenner-h: clamp(44px, 30px + 2vw, 60px);
  --kreide-maske: url("../hintergrund/kreide-maske.png?v=a720b424");
  /* Weinranken-Rahmen (erzeugt mit werkzeuge/rebenrahmen.py) */
  --rebe-foto: url("../rahmen/rebe-weiss-ranke.svg?v=a720b424");
  --rebe-akzent: url("../rahmen/rebe-ochsenblut.svg?v=a720b424");
  --rebe-ocker: url("../rahmen/rebe-ocker.svg?v=a720b424");
  --rebe-breite: clamp(1.55rem, 1.3rem + 0.8vw, 1.95rem);
  --rebe-ecke: calc(var(--rebe-breite) * 280 / 44);
  --rebe-foto-ol: url("../rahmen/ecke-ol-weiss-ranke.svg?v=a720b424");
  --rebe-foto-ur: url("../rahmen/ecke-ur-weiss-ranke.svg?v=a720b424");
  --rebe-akzent-ol: url("../rahmen/ecke-ol-ochsenblut.svg?v=a720b424");
  --rebe-akzent-ur: url("../rahmen/ecke-ur-ochsenblut.svg?v=a720b424");
  --rebe-ocker-ol: url("../rahmen/ecke-ol-ocker.svg?v=a720b424");
  --rebe-ocker-ur: url("../rahmen/ecke-ur-ocker.svg?v=a720b424");
  --rebe-maske-ol: url("../rahmen/ecke-ol-maske.svg?v=a720b424");
  --rebe-maske-ur: url("../rahmen/ecke-ur-maske.svg?v=a720b424");

  --schrift-titel: "Fraunces", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-klein: 0.8125rem;
  --t-text: 1.0625rem;
  --t-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-h3: 1.3125rem;
  --t-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --t-h1: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
  --t-riese: clamp(3.1rem, 1.7rem + 6vw, 6.25rem);

  --breite: 76rem;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --abstand: clamp(3.5rem, 2.4rem + 4.5vw, 7rem);
  --kopfhoehe: 4.25rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kalk: #272b2d;
    --kalk-tief: #2e3234;
    --schiefer: #e9e6dc;
    --schiefer-weich: #b9bcb3;
    --ochsenblut: #e88a80;
    --ochsenblut-tief: #eb9a90;
    --knopf: #a3352f;
    --knopf-tief: #8a2a25;
    --auf-knopf: #fbf7f0;
    --ocker: #3b301e;
    --auf-ocker: #f2e5c6;
    --rebe: #c3d6a8;
    --nacht: #151718;
    --auf-nacht: #eeebe3;
    --schatten: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.7);
    --papier-bild: url("../hintergrund/tafel.webp?v=a720b424");
    --pergament: #4a1f1c;
    --pergament-bild: url("../hintergrund/pergament-rot.webp?v=a720b424");
    --pergament-rand: rgb(0 0 0 / 0.3);
    --trenner: url("../rahmen/trenner-kreide.svg?v=a720b424");
  --eckranke: url("../rahmen/eckranke-kreide.svg?v=a720b424");
  --eckranke-senkrecht: url("../rahmen/eckranke-senkrecht-kreide.svg?v=a720b424");
    --eckranke: url("../rahmen/eckranke-kreide.svg?v=a720b424");
    --eckranke-senkrecht: url("../rahmen/eckranke-senkrecht-kreide.svg?v=a720b424");
    --rebe-akzent: url("../rahmen/rebe-ochsenblut-dunkel.svg?v=a720b424");
    --rebe-ocker: url("../rahmen/rebe-ocker-dunkel.svg?v=a720b424");
    --rebe-akzent-ol: url("../rahmen/ecke-ol-ochsenblut-dunkel.svg?v=a720b424");
    --rebe-akzent-ur: url("../rahmen/ecke-ur-ochsenblut-dunkel.svg?v=a720b424");
    --rebe-ocker-ol: url("../rahmen/ecke-ol-ocker-dunkel.svg?v=a720b424");
    --rebe-ocker-ur: url("../rahmen/ecke-ur-ocker-dunkel.svg?v=a720b424");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --kalk: #272b2d;
  --kalk-tief: #2e3234;
  --schiefer: #e9e6dc;
  --schiefer-weich: #b9bcb3;
  --ochsenblut: #e88a80;
  --ochsenblut-tief: #eb9a90;
  --knopf: #a3352f;
  --knopf-tief: #8a2a25;
  --auf-knopf: #fbf7f0;
  --ocker: #3b301e;
  --auf-ocker: #f2e5c6;
  --rebe: #c3d6a8;
  --nacht: #151718;
  --auf-nacht: #eeebe3;
  --schatten: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.7);
  --papier-bild: url("../hintergrund/tafel.webp?v=a720b424");
  --pergament: #4a1f1c;
  --pergament-bild: url("../hintergrund/pergament-rot.webp?v=a720b424");
  --pergament-rand: rgb(0 0 0 / 0.3);
  --trenner: url("../rahmen/trenner-kreide.svg?v=a720b424");
  --rebe-akzent: url("../rahmen/rebe-ochsenblut-dunkel.svg?v=a720b424");
  --rebe-ocker: url("../rahmen/rebe-ocker-dunkel.svg?v=a720b424");
  --rebe-akzent-ol: url("../rahmen/ecke-ol-ochsenblut-dunkel.svg?v=a720b424");
  --rebe-akzent-ur: url("../rahmen/ecke-ur-ochsenblut-dunkel.svg?v=a720b424");
  --rebe-ocker-ol: url("../rahmen/ecke-ol-ocker-dunkel.svg?v=a720b424");
  --rebe-ocker-ur: url("../rahmen/ecke-ur-ocker-dunkel.svg?v=a720b424");
  color-scheme: dark;
}

/* ------------------------------------------------------------ Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopfhoehe) + 1rem); }
body {
  margin: 0;
  background: var(--kalk) var(--papier-bild) 0 0 / 640px repeat;
  color: var(--schiefer);
  font: 400 var(--t-text) / 1.65 var(--schrift-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, picture { display: block; max-width: 100%; height: auto; }
picture img { width: 100%; }
h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; }
a { color: var(--ochsenblut); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ochsenblut); outline-offset: 3px; }
address { font-style: normal; }
mark { background: var(--ocker); color: var(--auf-ocker); padding: 0.05em 0.25em; }
table { border-collapse: collapse; width: 100%; }

.rahmen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }

/* Lange Wörter und E-Mail-Adressen dürfen umbrechen, statt bei starker Vergrößerung oder größeren Textabständen über den Rand zu ragen */
body { overflow-wrap: break-word; }
h1, h2, h3 { hyphens: auto; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sprunglink {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--knopf); color: var(--auf-knopf); padding: 0.6rem 1rem;
}
.sprunglink:focus { top: 1rem; }

.etikett {
  font-family: var(--schrift-text);
  font-size: var(--t-klein);
  font-weight: 650;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--rebe);
  margin: 0 0 0.9rem;
}

.lead { font-size: var(--t-lead); color: var(--schiefer-weich); max-width: 42rem; }
.lead p + p { margin-top: 0.8em; }

.fliesstext { max-width: 40rem; }
.fliesstext > * + * { margin-top: 1em; }
.fliesstext h2 { margin-top: 2.4rem; margin-bottom: 0.2rem; }
.fliesstext h2:first-child { margin-top: 0; }
.fliesstext h3 { margin-top: 2rem; }
.fliesstext ul:not([class]) { padding-left: 1.2rem; }
.fliesstext ul:not([class]) li + li { margin-top: 0.35rem; }

.textlink { font-weight: 600; }

.unterschrift {
  font-family: var(--schrift-titel);
  font-size: 1.25rem;
  color: var(--ochsenblut);
  padding-top: 0.4rem;
}

/* ------------------------------------------------------------ Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0.7rem 1.35rem;
  background: transparent;
  border: 1px solid var(--ochsenblut);
  border-radius: 2px;
  color: var(--ochsenblut);
  font: 600 0.95rem / 1.15 var(--schrift-text);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
/* Ein einheitlicher Knopf: transparent mit rotem Rand, beim Darüberfahren rot gefüllt */
.knopf:hover, .knopf:focus-visible { background: var(--knopf); border-color: var(--knopf); color: var(--auf-knopf); }
.knopf--klein { min-height: 2.4rem; padding: 0.45rem 1rem; font-size: 0.875rem; }
.knopf--breit { width: 100%; }
.aktionen { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ------------------------------------------------------------ Kopf & Navigation */
.hinweisleiste {
  background: var(--rebe); color: var(--kalk);
  text-align: center; padding: 0.55rem var(--rand); font-size: 0.9375rem; font-weight: 600;
}
.kopf {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: var(--glas);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--linie);
  view-transition-name: kopf;
}
.kopf__innen { display: flex; align-items: center; gap: 1.75rem; min-height: var(--kopfhoehe); }
.marke {
  display: inline-flex; align-items: center; gap: 0.7rem;
  color: var(--schiefer); text-decoration: none; margin-right: auto;
}
.marke__logo {
  width: 2.75rem; aspect-ratio: 1; flex: none;
  background: var(--ochsenblut);
  -webkit-mask: url("../logo/linie-640.webp?v=a720b424") center / contain no-repeat;
  mask: url("../logo/linie-640.webp?v=a720b424") center / contain no-repeat;
}
.marke__name { font-family: var(--schrift-titel); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.01em; }
.nav ul { display: flex; gap: 1.75rem; list-style: none; }
.nav a { white-space: nowrap; }
.nav a {
  color: var(--schiefer); text-decoration: none; font-weight: 550; padding-block: 0.35rem;
  background: linear-gradient(currentColor 0 0) left bottom / 0 1px no-repeat;
  transition: background-size 0.25s, color 0.2s;
}
.nav a:hover, .nav a[aria-current] { color: var(--ochsenblut); background-size: 100% 1px; }
.kopf__menueknopf {
  display: none;
  width: 2.75rem; height: 2.75rem; padding: 0.85rem 0.7rem;
  background: none; border: 1px solid var(--linie-stark); border-radius: 2px;
  color: var(--schiefer); cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.kopf__menueknopf span { display: block; height: 1.5px; background: currentColor; }

.menue {
  position: fixed; inset: 0 0 0 auto;
  width: min(22rem, 100vw); height: 100dvh; max-height: none;
  margin: 0; border: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 1.5rem) 1.75rem calc(env(safe-area-inset-bottom, 0px) + 2rem);
  background: var(--kalk); color: var(--schiefer);
  box-shadow: var(--schatten);
  flex-direction: column; gap: 2rem;
  translate: 100% 0;
  transition: translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), display 0.35s allow-discrete, overlay 0.35s allow-discrete;
}
.menue:popover-open { display: flex; translate: 0 0; }
@starting-style { .menue:popover-open { translate: 100% 0; } }
.menue::backdrop { background: rgb(10 10 10 / 0.35); }
.menue ul { list-style: none; display: grid; gap: 0.25rem; }
.menue ul a {
  display: block; padding-block: 0.6rem; border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-titel); font-weight: 600; font-size: 1.6rem;
  color: var(--schiefer); text-decoration: none;
}
.menue__schalter { display: grid; gap: 0.25rem; }
.menue__option {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0; background: none; border: 0; cursor: pointer;
  font: 600 1rem / 1.2 var(--schrift-text); color: var(--schiefer); text-decoration: none; text-align: left;
}
/* gleiche schlichte Symbole wie in der Menüleiste (Globus) */
.menue__option svg { width: 1.35rem; height: 1.35rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.menue__option .kopf__voll { fill: currentColor; stroke: none; }
.menue__option:hover, .menue__option:focus-visible { color: var(--ochsenblut); }
.menue__zu {
  margin-top: auto; align-self: start;
  background: none; border: 0; padding: 0.4rem 0; color: var(--schiefer-weich);
  font: inherit; text-decoration: underline; cursor: pointer;
}

/* Sprache und Hell/Dunkel in der Menüleiste (ab Tablet-Breite), schlicht wie die Menüpunkte */
.kopf__schalter { display: flex; align-items: center; gap: 0.6rem; padding-left: 1.4rem; border-left: 1px solid var(--linie-stark); }
.kopf__symbol {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  background: none; border: 0; border-radius: var(--ecke-klein, 0.4rem); color: var(--schiefer); cursor: pointer;
  transition: color 0.2s;
}
.kopf__symbol svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kopf__symbol .kopf__voll { fill: currentColor; stroke: none; }
.kopf__symbol:hover, .kopf__symbol:focus-visible { color: var(--ochsenblut); }
.kopf__symbol:focus-visible { outline: 2px solid var(--ochsenblut); outline-offset: 2px; }
/* Hinweis beim Darüberfahren: kleines Etikett unter dem Symbol („In English“, „Zum dunklen Design“).
   Rechtsbündig unter dem Symbol, damit es am rechten Rand nie aus dem Fenster ragt. */
.kopf__symbol { position: relative; }
.kopf__symbol::after, .kopf__symbol::before {
  position: absolute; right: 0; pointer-events: none;
  opacity: 0; translate: 0 -0.3rem; transition: opacity 0.18s ease, translate 0.18s ease;
}
.kopf__symbol::after {
  content: attr(data-hinweis);
  top: calc(100% + 0.55rem);
  padding: 0.4rem 0.7rem 0.35rem;
  background: var(--kalk) var(--papier-bild) 0 0 / 640px;
  border: 1px solid var(--ochsenblut); border-radius: var(--ecke-klein, 0.4rem);
  box-shadow: 0 0.6rem 1.4rem -0.6rem rgb(0 0 0 / 0.35);
  color: var(--ochsenblut);
  font: 700 0.7rem / 1 var(--schrift-text); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
/* kleine Spitze, zeigt aufs Symbol */
.kopf__symbol::before {
  content: ""; top: calc(100% + 0.25rem); right: calc(1.125rem - 0.3rem);
  width: 0.6rem; height: 0.6rem; z-index: 1;
  background: var(--kalk); border-left: 1px solid var(--ochsenblut); border-top: 1px solid var(--ochsenblut);
  rotate: 45deg;
}
@media (hover: hover) { .kopf__symbol:hover::after, .kopf__symbol:hover::before { opacity: 1; translate: 0 0; } }
.kopf__symbol:focus-visible::after, .kopf__symbol:focus-visible::before { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .kopf__symbol::after, .kopf__symbol::before { translate: none; transition: opacity 0.1s; } }

@media (max-width: 62rem) {
  .nav { display: none; }
  .kopf__schalter { display: none; }

  .kopf__menueknopf { display: flex; }
}

/* ------------------------------------------------------------ Plattenrand (Motiv) */
.plattenrand { position: relative; overflow: hidden; margin: 0; background: var(--kalk-tief); }
.plattenrand::after {
  content: ""; position: absolute; inset: var(--rebe-inset);
  border: var(--rebe-breite) solid transparent;
  border-image: var(--rebe-foto) 44 round;
  -webkit-mask: var(--rebe-maske-ol) left top / var(--rebe-g) no-repeat, var(--rebe-maske-ur) right bottom / var(--rebe-g) no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--rebe-maske-ol) left top / var(--rebe-g) no-repeat, var(--rebe-maske-ur) right bottom / var(--rebe-g) no-repeat, linear-gradient(#000 0 0); mask-composite: exclude;
  filter: drop-shadow(0 0 1.5px rgb(0 0 0 / 0.45));
  pointer-events: none;
}
.plattenrand picture { height: 100%; transition: scale 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.plattenrand img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ Startseite: Hero */
.hero { position: relative; }
/* Das Gemälde wächst bis 1920 px mit; auf noch breiteren Bildschirmen steht es mittig, statt immer stärker beschnitten zu werden */
.hero { --hero-bild-h: clamp(22rem, min(calc(min(100vw, 120rem) / 2), 80svh), 60rem); }
.hero__bild { position: relative; max-inline-size: 120rem; margin-inline: auto; block-size: var(--hero-bild-h); overflow: clip; background: var(--kalk-tief); }
.hero__bild picture, .hero__bild img { width: 100%; height: 100%; object-fit: cover; }
.hero { --hero-ueberlappung: clamp(3.5rem, 9vw, 7.5rem); padding-bottom: var(--abstand); }
.hero__rahmen {
  position: relative; margin-top: calc(-1 * var(--hero-ueberlappung));
  display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
}
/* Begrüßung rechts neben dem Etikett; sie beginnt erst unterhalb des Gemäldes */
.hero__intro { padding-top: calc(var(--hero-ueberlappung) + clamp(2rem, 1.5rem + 1.5vw, 3rem)); max-width: 40rem; }
.hero__intro h2 { margin-bottom: 0.4rem; }
.schild {
  position: relative;
  max-width: 40rem;
  padding: clamp(3rem, 2.2rem + 2.4vw, 3.8rem) clamp(2.6rem, 1.9rem + 2.4vw, 3.4rem);
  padding-top: clamp(3.6rem, 2.8rem + 2.6vw, 4.6rem);
  background: var(--pergament) var(--pergament-bild) 0 0 / 520px; color: var(--auf-ocker);
  box-shadow: var(--schatten), inset 0 0 2.5rem var(--pergament-rand);
}
.schild::before {
  content: ""; position: absolute; inset: 0.35rem;
  border: var(--rebe-breite) solid transparent;
  border-image: var(--rebe-ocker) 44 round;
  -webkit-mask: var(--rebe-maske-ol) left top / var(--rebe-g) no-repeat, var(--rebe-maske-ur) right bottom / var(--rebe-g) no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--rebe-maske-ol) left top / var(--rebe-g) no-repeat, var(--rebe-maske-ur) right bottom / var(--rebe-g) no-repeat, linear-gradient(#000 0 0); mask-composite: exclude;
  pointer-events: none;
}
.schild .etikett { color: var(--auf-ocker); opacity: 0.8; }
.schild__titel {
  font-size: var(--t-riese); line-height: 0.92; letter-spacing: -0.02em;
  color: var(--ochsenblut); margin: 0 0 0.9rem -0.04em;
}
.schild__zeile { font-size: var(--t-lead); line-height: 1.45; margin-bottom: 1.6rem; max-width: 28rem; }

/* ------------------------------------------------------------ Abschnitte */
.abschnitt { padding-block: var(--abstand); }
.abschnitt--eng { padding-block: calc(var(--abstand) * 0.55) var(--abstand); }
/* .abschnitt--flaeche hatte früher eine eigene Fläche; seit 07.10. trennt die Trennranke die Abschnitte */
.abschnitt__kopf { max-width: 44rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.abschnitt__kopf h2 + p { margin-top: 1rem; color: var(--schiefer-weich); font-size: var(--t-lead); }

.intro {
  display: grid; gap: clamp(2.5rem, 5vw, 5.5rem);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}
.intro .fliesstext h2 { margin-bottom: 0.4rem; }

/* Weinetikett: Eckdaten wie auf einem Flaschenetikett */
.weinetikett {
  position: relative;
  padding: 3.4rem 2.6rem 2.8rem;
  border: 1px solid var(--ochsenblut);
  background: var(--kalk);
  text-align: center;
  margin-top: 0.5rem;
}
.weinetikett::before {
  content: ""; position: absolute; inset: 0.25rem;
  border: var(--rebe-breite) solid transparent;
  border-image: var(--rebe-akzent) 44 round;
  -webkit-mask: var(--rebe-maske-ol) left top / var(--rebe-g) no-repeat, var(--rebe-maske-ur) right bottom / var(--rebe-g) no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--rebe-maske-ol) left top / var(--rebe-g) no-repeat, var(--rebe-maske-ur) right bottom / var(--rebe-g) no-repeat, linear-gradient(#000 0 0); mask-composite: exclude;
  pointer-events: none;
}
.weinetikett__kopf {
  font-family: var(--schrift-titel); font-weight: 600; font-size: 1.6rem; line-height: 1.1;
  color: var(--ochsenblut);
  padding-bottom: 1rem; margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--linie-stark);
}
.weinetikett__kopf span {
  display: block; margin-top: 0.4rem;
  font: 650 var(--t-klein) / 1.2 var(--schrift-text); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--schiefer-weich);
}
.weinetikett dl { margin: 0; }
.weinetikett__zeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-block: 0.75rem;
  border-bottom: 1px dotted var(--linie-stark);
}
.weinetikett__zeile:last-child { border-bottom: 0; }
.weinetikett dt { font-size: var(--t-klein); letter-spacing: 0.14em; text-transform: uppercase; color: var(--schiefer-weich); font-weight: 600; }
.weinetikett dd {
  margin: 0; font-family: var(--schrift-titel); font-weight: 600; font-size: 1.65rem; line-height: 1;
  color: var(--ochsenblut); font-variant-numeric: lining-nums tabular-nums;
}

/* ------------------------------------------------------------ Wohnungskarten */
.karten { display: grid; gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.karte { position: relative; display: flex; flex-direction: column; container-type: inline-size; }
.karte__bild { aspect-ratio: 4 / 3; margin-bottom: 1.4rem; }
.karte .etikett { margin-bottom: 0.4rem; }
.karte__titel { font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); }
.karte__link { color: var(--schiefer); text-decoration: none; }
.karte__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Kreide-Maske im dunklen Design nur auf dem Namen (span), nicht auf der Überschrift – sonst schneidet die
   Maske die über die ganze Karte gespannte Klickfläche (::after) ab und die Karte ist nicht mehr anklickbar */
.karte__name { display: inline-block; }
.karte__daten { margin-top: 0.55rem; font-weight: 600; color: var(--schiefer-weich); }
.karte__text { margin-top: 0.75rem; max-width: 34rem; }
.karte__preis { margin-top: 0.9rem; }
.karte__preis strong { color: var(--ochsenblut); }
.karte__mehr { margin-top: auto; padding-top: 1.25rem; }
/* Die ganze Karte ist der Link; der Knopf füllt sich, sobald man über die Karte fährt */
.karte:hover .karte__mehr .knopf { background: var(--knopf); border-color: var(--knopf); color: var(--auf-knopf); }
.karte:hover .karte__bild picture { scale: 1.035; }
.karte:has(.karte__link:focus-visible) { outline: 2px solid var(--ochsenblut); outline-offset: 6px; }
.karte__link:focus-visible { outline: none; }
/* Startseite: Wohnungskarten im Weinlaubrahmen in Ochsenblut, wie die Kontaktkarten */
.karte--rahmen { padding: clamp(2.6rem, 2rem + 1.6vw, 3.2rem) clamp(2.2rem, 1.6rem + 1.6vw, 2.8rem); }
.karte--rahmen::before, .karte--rahmen::after { z-index: 2; }
@container (max-width: 22rem) {
  .karte__text { display: none; }
}

/* ------------------------------------------------------------ Bänder */
.band { padding-block: var(--abstand); }
.band__raster {
  display: grid; gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
}
.band__bild { aspect-ratio: 4 / 3; box-shadow: var(--schatten); }
/* Bild verlinkt aufs Weingut und zoomt beim Darüberfahren – wie die Wohnungskarten */
.band__bildlink { display: block; height: 100%; }
.band__raster:has(a:hover) .band__bild picture { scale: 1.035; }
.band__text > * + * { margin-top: 1rem; }
.band__text .knopf { margin-top: 0.5rem; }
.band--schiefer { background: var(--nacht); color: var(--auf-nacht); }
.band--schiefer h2 { color: var(--auf-nacht); }
.band--schiefer .etikett { color: var(--auf-nacht); opacity: 0.7; }

.zeiten { border-top: 2px solid currentColor; padding-top: 1rem; margin-block: 1.75rem 1.25rem; }
.zeiten__titel { font-size: var(--t-h3); }
.zeiten__saison { font-weight: 650; margin-top: 0.3rem; }
.zeiten__liste { margin: 0.6rem 0 0; }
.zeiten__liste div {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-block: 0.55rem;
  border-bottom: 1px solid color-mix(in oklab, currentColor 22%, transparent);
}
.zeiten__liste dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ Geschichte */
.geschichte { position: relative; overflow: clip; isolation: isolate; }
.geschichte::after {
  content: ""; position: absolute; z-index: -1;
  right: max(-8rem, -10vw); bottom: -5rem; width: min(34rem, 70vw); aspect-ratio: 1;
  background: var(--ochsenblut); opacity: 0.07;
  -webkit-mask: url("../logo/linie-640.webp?v=a720b424") center / contain no-repeat;
  mask: url("../logo/linie-640.webp?v=a720b424") center / contain no-repeat;
  pointer-events: none;
}
.geschichte__raster {
  display: grid; gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.geschichte__bild { margin: 0; }
.geschichte__bild .plattenrand { box-shadow: var(--schatten); }
.geschichte__bild figcaption, .gemeinsam figcaption {
  margin-top: 0.85rem; font-size: 0.9375rem; color: var(--schiefer-weich); font-style: italic;
}

/* ------------------------------------------------------------ Lage */
.lage { padding-block: var(--abstand); }
.lage__bild { aspect-ratio: 21 / 8; max-height: 36rem; width: 100%; overflow: clip; background: var(--kalk-tief); }
.lage__bild picture, .lage__bild img { width: 100%; height: 100%; object-fit: cover; }
/* Seit 09.10. ohne Titelbild über „Lage“: das Raster beginnt direkt unter der Trennranke */
.lage__raster {
  position: relative;
  display: grid; gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
}
.lage__karte {
  position: relative; background: var(--pergament) var(--pergament-bild) 0 0 / 520px; color: var(--auf-ocker); box-shadow: var(--schatten), inset 0 0 2.5rem var(--pergament-rand);
  padding: clamp(2.8rem, 2.1rem + 2vw, 3.4rem) clamp(2.4rem, 1.8rem + 2vw, 3rem);
}
/* Weinlaubranke in Ocker, wie beim Schild und der Öffnungszeiten-Karte */
.lage__karte::before {
  content: ""; position: absolute; inset: var(--rebe-inset); pointer-events: none;
  border: var(--rebe-breite) solid transparent; border-image: var(--rebe-ocker) 44 round;
  -webkit-mask: var(--rebe-maske-ol) left top / var(--rebe-g) no-repeat, var(--rebe-maske-ur) right bottom / var(--rebe-g) no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--rebe-maske-ol) left top / var(--rebe-g) no-repeat, var(--rebe-maske-ur) right bottom / var(--rebe-g) no-repeat, linear-gradient(#000 0 0); mask-composite: exclude;
}
.lage__karte .etikett { color: var(--auf-ocker); opacity: 0.8; }
.lage__karte h2 { color: var(--ochsenblut); }
.lage__karte > * + * { margin-top: 1rem; }
.lage__karte address { font-weight: 650; }
.lage__ziele { margin-top: 0; }
.lage__ziele ul { list-style: none; border-top: 1px solid var(--linie-stark); }
.lage__ziele li { padding-block: 0.65rem; border-bottom: 1px solid var(--linie); display: flex; gap: 0.75rem; align-items: baseline; }
.lage__ziele li::before { content: ""; width: 0.45rem; height: 0.45rem; flex: none; background: var(--rebe); rotate: 45deg; translate: 0 -0.1rem; }

/* ------------------------------------------------------------ Unterseiten */
.seitenkopf { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.seitenkopf__titel { font-size: var(--t-h1); max-width: 20ch; }
.seitenkopf .lead { margin-top: 1.1rem; }
.brotkrumen { font-size: 0.9375rem; color: var(--schiefer-weich); margin-bottom: 1.25rem; }
.brotkrumen a { color: inherit; }
.breitbild { aspect-ratio: 2 / 1; }

.wohnung { display: grid; gap: clamp(2.5rem, 5vw, 5rem); grid-template-columns: minmax(0, 1.65fr) minmax(17rem, 1fr); align-items: start; }
.eckdaten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--linie-stark);
}
.eckdaten div { padding: 1rem 1rem 1rem 0; }
.eckdaten dt { font-size: var(--t-klein); font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--schiefer-weich); }
.eckdaten dd { hyphens: auto; overflow-wrap: anywhere; margin: 0.3rem 0 0; font-family: var(--schrift-titel); font-weight: 600; font-size: 1.3rem; line-height: 1.2; font-variant-numeric: lining-nums; }
.eckdaten--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 26rem; margin-block: 2rem; }

.liste-haken { list-style: none; display: grid; gap: 0.5rem; }
.liste-haken li { display: flex; gap: 0.8rem; align-items: baseline; }
.liste-haken li::before { content: ""; width: 0.45rem; height: 0.45rem; flex: none; background: var(--rebe); rotate: 45deg; translate: 0 -0.12rem; }

.preisbox {
  position: sticky; top: calc(var(--kopfhoehe) + 1.5rem);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border: 1px solid var(--linie);
}
.preisbox__titel { font-size: var(--t-h3); margin-bottom: 0.75rem; }
.preisbox .knopf { margin-top: 1.5rem; }
.preisbox__tel { margin-top: 1rem; font-size: 0.9375rem; color: var(--schiefer-weich); text-align: center; }
.preisbox__tel a { font-weight: 650; }
.preisbox__saison { font-weight: 650; }
.preisbox__hinweis { margin-top: 1rem; font-size: 0.9375rem; color: var(--schiefer-weich); }

.preise th, .preise td { text-align: left; padding: 0.6rem 0; border-bottom: 1px solid var(--linie); vertical-align: baseline; }
.preise th { font-weight: 400; padding-right: 1rem; }
.preise td { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
/* Beträge nur dann nicht umbrechen, wenn genug Platz ist (bei starker Vergrößerung darf „ab 60 € pro Tag“ zweizeilig werden) */
@media (min-width: 23rem) { .preise td { white-space: nowrap; } }
.preise th { hyphens: auto; }
.tabelle-rahmen { overflow-x: auto; }
/* Preise auf dem Handy: je Wohnung eine eigene Tabelle statt Seitwärtsscrollen */
.preise-mobil { display: none; }
.preise-mobil__titel { font-size: 1.35rem; margin-bottom: 0.35rem; color: var(--ochsenblut); }
@media (max-width: 44rem) {
  .tabelle-rahmen { display: none; }
  .preise-mobil { display: grid; gap: 2rem; }
}
.preise--vergleich { min-width: 32rem; max-width: 52rem; }
.preise--vergleich thead th {
  font-family: var(--schrift-titel); font-weight: 600; font-size: 1.35rem; text-align: right;
  color: var(--ochsenblut); padding-bottom: 0.75rem; border-bottom: 1px solid var(--linie-stark);
}
.preise--vergleich thead td { border-bottom: 1px solid var(--linie-stark); }
.preise--vergleich td { padding-left: 2rem; }

.gemeinsam { display: grid; gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gemeinsam__eintrag { margin: 0; }
.gemeinsam__eintrag .plattenrand { aspect-ratio: 3 / 2; }
.gemeinsam__link { height: 100%; background: none; }
.gemeinsam__link picture { height: 100%; }
.gemeinsam__link:focus-visible { outline: 2px solid var(--ochsenblut); outline-offset: -4px; }
.gemeinsam figcaption { font-style: normal; }
.gemeinsam figcaption strong { color: var(--schiefer); display: block; font-size: 1.05rem; }
/* „Außerdem“: die übrigen Punkte als eine ruhige Zeile unter den drei Bildern */
.gemeinsam__extras {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  padding-block: 1.25rem; border-block: 1px solid var(--linie); text-align: center;
}
.gemeinsam__extras .etikett { margin: 0; }
.gemeinsam__extras ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; gap: 0.6rem clamp(1.5rem, 4vw, 3rem); }
.gemeinsam__extras li { display: flex; gap: 0.6rem; align-items: baseline; text-align: left; }
/* Mittlere Breiten: die Spalte unter den Bildern ist schmal, dort stehen die Punkte untereinander */
@media (max-width: 60rem) { .gemeinsam__extras ul { grid-template-columns: minmax(0, max-content); } }
.gemeinsam__extras li::before { content: ""; width: 0.4rem; height: 0.4rem; flex: none; background: var(--rebe); rotate: 45deg; translate: 0 -0.12rem; }
@media (max-width: 44rem) {
  .gemeinsam__extras { align-items: flex-start; }
  .gemeinsam__extras ul { justify-content: flex-start; text-align: left; }
  .gemeinsam__extras ul { grid-template-columns: minmax(0, 1fr); }
}

.karte--quer {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 3.5rem); align-content: center; align-items: start;
}
.karte--quer > * { grid-column: 2; }
.karte--quer > .karte__bild { grid-column: 1; grid-row: 1 / span 7; margin: 0; }

.anfrageband { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; }
.anfrageband > div:first-child { max-width: 36rem; }
.anfrageband > div:first-child > * + * { margin-top: 0.75rem; }
.anfrageband__wege { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Weingut */
.weingut { display: grid; gap: clamp(2.5rem, 5vw, 5rem); grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 1fr); align-items: start; }

/* Kontakt */
.kontakte { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kontaktkarte { position: relative; padding: clamp(3.2rem, 2.4rem + 2vw, 3.8rem) clamp(2.7rem, 2rem + 2vw, 3.2rem); border: 1px solid var(--linie-stark); }
.kontaktkarte > * + * { margin-top: 1rem; }
/* Namen immer einzeilig: Die Schriftgröße richtet sich nach der Kartenbreite (beide Karten gleich breit, also gleich groß) */
.kontaktkarte { container-type: inline-size; }
.kontaktkarte__namen { font-size: min(2rem, 7cqi); white-space: nowrap; }
/* Auf dem Handy stehen die Karten untereinander: lieber normal große Schrift mit Umbruch als winzig auf einer Zeile */
@media (max-width: 44rem) { .kontaktkarte__namen { font-size: 1.5rem; white-space: normal; } }
.kontaktkarte__wege { margin: 1.25rem 0 0; }
.kontaktkarte__wege div { display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap; padding-block: 0.6rem; border-bottom: 1px solid var(--linie); }
.kontaktkarte__wege dt { color: var(--schiefer-weich); }
.kontaktkarte__wege dd { margin: 0; font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.kontaktkarte a { position: relative; z-index: 1; }
.anschrift { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: minmax(15rem, 0.62fr) minmax(0, 1.6fr); align-items: center; }
.anschrift > div > * + * { margin-top: 1rem; }
.anschrift address { font-weight: 650; font-size: 1.15rem; }
.anschrift .plattenrand { aspect-ratio: 4 / 3; }
.anschrift__karte .osm { margin-top: 0; aspect-ratio: 3 / 2; box-shadow: var(--schatten); }
/* Einleitung der Ferienwohnungen-Seite direkt unter dem Titelbild, über die ganze Breite */
.lead.einleitung { max-width: none; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }

/* Rechtstexte */
.entwurf {
  max-width: 40rem; margin-bottom: 2rem; padding: 1rem 1.25rem;
  border: 1px dashed var(--ochsenblut); color: var(--schiefer);
  background: color-mix(in oklab, var(--ocker) 35%, transparent);
}
.rechtstext h2 { font-size: 1.45rem; }

/* ------------------------------------------------------------ Galerie & Lightbox */
/* Blocksatz-Galerie: Bilder einer Zeile sind gleich hoch, nichts wird beschnitten */
.galerie { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 2.5vw, 2rem) clamp(0.75rem, 1.5vw, 1.25rem); }
.galerie::after { content: ""; flex: 999 1 0; }
.galerie__eintrag { --r: 1.333; flex: var(--r) 1 calc(var(--r) * 19rem); min-width: 0; }
.galerie__link { display: block; overflow: clip; background: var(--kalk); cursor: zoom-in; }
.galerie__link picture { transition: scale 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.galerie__link:hover picture { scale: 1.03; }
.galerie__text { margin-top: 0.6rem; font-size: 0.9375rem; color: var(--schiefer-weich); }
.galerie__text strong { color: var(--schiefer); font-weight: 650; }

.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgb(12 13 14); color: #efece4;
  overflow: hidden;
}
.lightbox::backdrop { background: rgb(12 13 14 / 0.5); }
.lightbox__band {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none;
}
.lightbox__band::-webkit-scrollbar { display: none; }
.lightbox__bild {
  scroll-snap-align: center; margin: 0;
  display: grid; place-items: center; align-content: center; gap: 0.9rem;
  padding: calc(env(safe-area-inset-top, 0px) + 4rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
}
.lightbox__bild img { width: auto; height: auto; max-width: min(100%, 110rem); max-height: calc(100dvh - 10rem); object-fit: contain; }
.lightbox__bild figcaption { text-align: center; font-size: 0.9375rem; max-width: 40rem; }
.lightbox__bild figcaption strong { font-family: var(--schrift-titel); font-weight: 600; font-size: 1.15rem; margin-right: 0.35rem; }
.lightbox button {
  position: fixed; z-index: 2;
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: rgb(255 255 255 / 0.1); color: #efece4; border: 1px solid rgb(255 255 255 / 0.25);
  font: 400 1.6rem / 1 var(--schrift-text); cursor: pointer;
}
.lightbox button:hover { background: rgb(255 255 255 / 0.22); }
.lightbox button:focus-visible { outline-color: #efece4; }
.lightbox__zu { top: calc(env(safe-area-inset-top, 0px) + 0.9rem); right: 0.9rem; }
.lightbox__zurueck, .lightbox__vor { top: 50%; translate: 0 -50%; }
.lightbox__zurueck { left: 0.9rem; }
.lightbox__vor { right: 0.9rem; }
.lightbox__zaehler { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 1.6rem); left: 1.25rem; font-size: 0.875rem; letter-spacing: 0.12em; opacity: 0.8; font-variant-numeric: tabular-nums; }
@media (hover: none) { .lightbox__zurueck, .lightbox__vor { display: none; } }

/* Karte groß (wie die Lightbox der Galerie): dieselbe Leaflet-Karte im bildschirmfüllenden <dialog> */
.kartendialog {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: rgb(12 13 14 / 0.92);
}
.kartendialog::backdrop { background: rgb(12 13 14 / 0.5); }
.kartendialog .karte {
  position: fixed;
  inset: calc(env(safe-area-inset-top, 0px) + 4.5rem) max(0.75rem, 2vw) calc(env(safe-area-inset-bottom, 0px) + max(0.75rem, 2vw));
  width: auto; height: auto; border-radius: var(--ecke); overflow: clip;
  background: var(--kalk-tief); color: var(--schiefer); font: inherit; text-shadow: none;
  box-shadow: 0 1.5rem 4rem -1rem rgb(0 0 0 / 0.6);
}
.kartendialog__zu {
  position: fixed; z-index: 2; top: calc(env(safe-area-inset-top, 0px) + 0.9rem); right: max(0.75rem, 2vw);
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: rgb(255 255 255 / 0.1); color: #efece4; border: 1px solid rgb(255 255 255 / 0.25);
  font: 400 1.6rem / 1 var(--schrift-text); cursor: pointer;
}
.kartendialog__zu:hover { background: rgb(255 255 255 / 0.22); }
.kartendialog__zu:focus-visible { outline: 2px solid #efece4; outline-offset: 2px; }
/* Knopf „Karte vergrößern“ unter + und − */
.karte .karte-gross a { display: grid; place-items: center; }
.karte .karte-gross svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ Fuß */
.fuss { background: var(--nacht); color: var(--auf-nacht); padding-block: 1.4rem; }
.fuss a { color: inherit; }
.fuss__unten { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; align-items: center; font-size: 0.875rem; opacity: 0.8; }
.fuss__unten nav { display: flex; gap: 1.5rem; }

/* ------------------------------------------------------------ Schmal */
@media (max-width: 60rem) {
  .gemeinsam { grid-template-columns: minmax(0, 1fr); max-width: 36rem; }
  .intro, .band__raster, .geschichte__raster, .lage__raster, .wohnung, .weingut, .anschrift, .andere { grid-template-columns: minmax(0, 1fr); }
  .preisbox { position: relative; top: auto; order: -1; }
  .lage__bild { aspect-ratio: 4 / 3; }
  .lage__ziele { margin-top: 0; }
  .hero__rahmen { grid-template-columns: minmax(0, 1fr); }
  .hero__intro { padding-top: 0; }
  .hero__notiz { display: none; }
  .weinetikett { max-width: 26rem; }
}
@media (max-width: 44rem) {
  .karten, .gemeinsam, .kontakte, .karte--quer { grid-template-columns: minmax(0, 1fr); }
  .karte--quer > *, .karte--quer > .karte__bild { grid-column: 1; grid-row: auto; }
  .karte--quer > .karte__bild { margin-bottom: 1.4rem; }
  .breitbild { aspect-ratio: 4 / 3; }
  .hero__bild { block-size: clamp(20rem, 58svh, 30rem); }
  .schild__titel { font-size: clamp(2.6rem, 12.5vw, 4rem); }
  .geschichte::after { opacity: 0.05; }
}

/* ------------------------------------------------------------ Bewegung */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Fotos „entwickeln“ sich beim Hineinscrollen: leicht sepiafarben und vergrößert zur vollen Farbe */
    .plattenrand img, .galerie__link img, .lage__bild img {
      animation: entwickeln linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
    @keyframes entwickeln {
      from { filter: sepia(0.3) saturate(0.85); scale: 1.05; }
      to { filter: none; scale: 1; }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Eckzweige: eigene Ebene über dem Rand. Die Rand-Ebene ist an diesen Stellen per Maske
   ausgespart, damit der Trieb nicht durch die Blätter läuft. */
/* Fotos: Ranke ohne Laub und Trauben, daher muss unter den Ecken nichts ausgespart werden */
.plattenrand { --rebe-g: var(--rebe-ecke); --rebe-ol: var(--rebe-foto-ol); --rebe-ur: var(--rebe-foto-ur); --rebe-inset: calc(var(--rebe-breite) * -0.34); --rebe-maske-ol: none; --rebe-maske-ur: none; }
/* Ohne Laub ragt nichts nach außen: der Rahmen rückt nah an die Bildkante, der überstehende leere Teil wird abgeschnitten */
.lage__karte { --rebe-g: calc(var(--rebe-ecke) * 0.75); --rebe-ol: var(--rebe-ocker-ol); --rebe-ur: var(--rebe-ocker-ur); --rebe-inset: 0.3rem; }
.schild { --rebe-g: calc(var(--rebe-ecke) * 0.85); --rebe-ol: var(--rebe-ocker-ol); --rebe-ur: var(--rebe-ocker-ur); --rebe-inset: 0.35rem; }
.weinetikett { --rebe-g: calc(var(--rebe-ecke) * 0.7); --rebe-ol: var(--rebe-akzent-ol); --rebe-ur: var(--rebe-akzent-ur); --rebe-inset: 0.25rem; }
.plattenrand::before, .schild::after, .weinetikett::after, .lage__karte::after {
  content: ""; position: absolute; inset: var(--rebe-inset); pointer-events: none;
  background: var(--rebe-ol) left top / var(--rebe-g) no-repeat, var(--rebe-ur) right bottom / var(--rebe-g) no-repeat;
}
.plattenrand::before, .plattenrand::after { z-index: 1; }
.plattenrand::before { filter: drop-shadow(0 0 1.5px rgb(0 0 0 / 0.45)); }

/* Preisbox und Kontaktkarte mit derselben Ranke */
.preisbox, .kontaktkarte, .karte--rahmen { border-color: transparent; --rebe-g: calc(var(--rebe-ecke) * 0.7); --rebe-ol: var(--rebe-akzent-ol); --rebe-ur: var(--rebe-akzent-ur); --rebe-inset: 0.3rem; }
.preisbox { padding: clamp(2.8rem, 2rem + 1.5vw, 3.4rem) clamp(2.2rem, 1.6rem + 1.5vw, 2.8rem); }
.preisbox::before, .kontaktkarte::before, .karte--rahmen::before {
  content: ""; position: absolute; inset: var(--rebe-inset); pointer-events: none;
  border: var(--rebe-breite) solid transparent; border-image: var(--rebe-akzent) 44 round;
  -webkit-mask: var(--rebe-maske-ol) left top / var(--rebe-g) no-repeat, var(--rebe-maske-ur) right bottom / var(--rebe-g) no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--rebe-maske-ol) left top / var(--rebe-g) no-repeat, var(--rebe-maske-ur) right bottom / var(--rebe-g) no-repeat, linear-gradient(#000 0 0); mask-composite: exclude;
}
.preisbox::after, .kontaktkarte::after, .karte--rahmen::after {
  content: ""; position: absolute; inset: var(--rebe-inset); pointer-events: none;
  background: var(--rebe-ol) left top / var(--rebe-g) no-repeat, var(--rebe-ur) right bottom / var(--rebe-g) no-repeat;
}

/* Knopf auf Ocker etwas kräftiger, damit er auch im Dunkelmodus gut lesbar bleibt */
.schild .knopf, .lage__karte .knopf { color: var(--ochsenblut-tief); border-color: var(--ochsenblut-tief); }
.schild .knopf:hover, .lage__karte .knopf:hover, .schild .knopf:focus-visible, .lage__karte .knopf:focus-visible { color: var(--auf-knopf); border-color: var(--knopf); }
/* Wie bei den Wohnungskarten: Fährt man übers Bild, färbt sich auch der Knopf */
.band__raster:has(.band__bildlink:hover) .band__text .knopf { background: var(--knopf); border-color: var(--knopf); color: var(--auf-knopf); }

/* ------------------------------------------------------------ Rebsorten als Liste */
.rebsorten { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 2rem; border-top: 1px solid var(--linie-stark); }
.rebsorten div { padding-block: 0.9rem; border-bottom: 1px solid var(--linie); }
.rebsorten dt { font-family: var(--schrift-titel); font-weight: 600; font-size: 1.2rem; color: var(--ochsenblut); }
.rebsorten dd { margin: 0.25rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--schiefer-weich); }

/* ------------------------------------------------------------ In der Nähe & Anreise */
.lage__ziele li > div { display: grid; gap: 0.1rem; }
.lage__ziele li strong { font-weight: 650; }
.lage__ziele li span { font-size: 0.9rem; color: var(--schiefer-weich); line-height: 1.45; }
.lage__ziele li .lage__extern { font-size: 0.85rem; color: var(--ochsenblut); margin-left: 0.3rem; line-height: 1; }
.lage__ziel-link { color: var(--schiefer); text-decoration: none; }
.lage__ziel-link strong { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.25s, color 0.2s; }
.lage__ziel-link:hover, .lage__ziel-link:focus-visible { color: var(--ochsenblut); }
.lage__ziel-link:hover strong, .lage__ziel-link:focus-visible strong { background-size: 100% 1px; }
/* Fotos von Ausflugszielen links unter dem Lage-Kasten: eins groß, zwei nebeneinander */
.lage__bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2rem, 3vw, 2.75rem); }
.lage__foto { margin: 0; }
.lage__foto:first-child { grid-column: 1 / -1; }
.lage__foto .plattenrand { aspect-ratio: 4 / 3; box-shadow: var(--schatten); }
.lage__foto:first-child .plattenrand { aspect-ratio: 16 / 9; }
.lage__foto figcaption { margin-top: 0.55rem; font-size: 0.875rem; color: var(--schiefer-weich); font-style: italic; }
.lage__anreise-titel { margin-top: 2rem; }
.anreisetafel { position: relative; }
/* Überschrift und Text über beiden Spalten; darunter links die Fotos, rechts „In der Nähe“ */
.lage__kopf { grid-column: 1 / -1; margin-bottom: 0; }
.lage__links .lage__bilder { margin-top: 0; }

/* Karte: wird erst nach einem Klick von OpenStreetMap geladen (Datenschutz) */
.osm { margin-top: 1.5rem; aspect-ratio: 4 / 3; display: grid; place-content: center; justify-items: center; gap: 0.75rem; padding: 1.5rem; text-align: center; border: 1px solid var(--linie-stark); background: var(--kalk-tief); }
.osm__nadel { width: 2rem; height: 2rem; fill: none; stroke: var(--ochsenblut); stroke-width: 1.4; }
.osm__hinweis { max-width: 22rem; font-size: 0.875rem; color: var(--schiefer-weich); line-height: 1.5; }
.osm .textlink { font-size: 0.875rem; }
.osm--geladen { display: block; padding: 0; }
.osm { position: relative; }
/* Startseite: Karte unten bei „Lage“ über die ganze Breite des Inhalts */
.lage__kartenband { margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem); scroll-margin-top: 6rem; }
.lage__kartenband .osm { margin-top: 0; aspect-ratio: 21 / 9; box-shadow: var(--schatten); }
@media (max-width: 50rem) { .lage__kartenband .osm { aspect-ratio: 4 / 3; } }
@media (max-width: 30rem) { .lage__kartenband .osm, .anschrift__karte .osm { aspect-ratio: 4 / 5; } }
.anreise { margin: 0; border-top: 1px solid var(--linie-stark); }
.anreise div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.6rem; border-bottom: 1px solid var(--linie); }
.anreise dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.anreise__halt { display: block; margin-top: 0.1rem; font-size: 0.85rem; color: var(--schiefer-weich); }
.anreise__hinweis { margin-top: 0.6rem; font-size: 0.875rem; color: var(--schiefer-weich); font-style: italic; }

/* ------------------------------------------------------------ Geschichte */
.breitbild-figur { margin: 0; }
.breitbild-figur figcaption { margin-top: 0.85rem; font-size: 0.9375rem; color: var(--schiefer-weich); font-style: italic; }
.zeitleiste { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.zeitleiste li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; padding-block: 1rem; border-bottom: 1px solid var(--linie); }
.zeitleiste li:first-child { border-top: 1px solid var(--linie-stark); }
.zeitleiste__jahr { font-family: var(--schrift-titel); font-weight: 600; font-size: 1.35rem; line-height: 1.2; color: var(--ochsenblut); font-variant-numeric: lining-nums; }
.quelle { margin-top: 1.25rem; font-size: 0.875rem; color: var(--schiefer-weich); }
@media (max-width: 40rem) { .zeitleiste li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; } }

/* ------------------------------------------------------------ Leicht abgerundete Ecken (01.10.)
   Fotos, Karten, Kästen und Knöpfe bekommen dieselbe kleine Rundung. Flächen über die volle
   Breite (Titelbild der Startseite, Bänder, Fuß) bleiben eckig, sie stoßen an den Fensterrand. */
:root { --ecke: 0.6rem; --ecke-klein: 0.4rem; }
.plattenrand, .galerie__link, .lage__bild, .lightbox__bild img,
.schild, .weinetikett, .lage__karte, .preisbox, .kontaktkarte, .karte--rahmen { border-radius: var(--ecke); }
.osm { border-radius: var(--ecke); overflow: clip; }
.knopf, .kopf__menueknopf { border-radius: var(--ecke-klein); }

/* ------------------------------------------------------------ Kontrastmodus (Windows „Kontrastdesigns“)
   Dort ersetzt der Browser alle Hintergrundfarben. Logo und Aufzählungsrauten sind als eingefärbte
   Fläche mit Maske gebaut und würden verschwinden – sie bekommen die Textfarbe des Systems. */
@media (forced-colors: active) {
  .marke__logo,
  .lage__ziele li::before, .liste-haken li::before, .gemeinsam__extras li::before { forced-color-adjust: none; background: CanvasText; }
}

/* ------------------------------------------------------------ Trennranke zwischen Abschnitten (07.10.)
   Statt verschiedener Hintergrundflächen trennt eine Weinranke in Ochsenblut die Abschnitte: in der
   Mitte ein kleiner Zweig mit Traube, der Trieb läuft nach außen aus und wird weich ausgeblendet. */
main > section + section { position: relative; }
main > section + section::before {
  content: ""; position: absolute; z-index: 1; top: 0; left: 50%; translate: -50% -50%;
  width: min(100% - 2 * var(--rand), var(--breite)); height: var(--trenner-h); pointer-events: none;
  background: var(--trenner) center / auto 100% no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* ------------------------------------------------------------ Dunkelmodus: Schiefertafel und Kreide (07.10.)
   Schrift wie Kreide: leicht verwischte Kanten, Überschriften mit Kreidekorn (Maske). Die Karten
   (Weinetikett, Lage) sind ochsenblutrotes Pergament mit heller, warmer Schrift.
   Steht zweimal: für die Systemeinstellung und für den Hell/Dunkel-Schalter. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { text-shadow: 0 0 1px rgb(233 230 220 / 0.3); }
  :root:not([data-theme="light"]) :is(h1, h2, h3, .etikett, .karte__name, .kontaktkarte__namen, .zeiten__titel, .marke__name):not(.karte__titel) {
    -webkit-mask: var(--kreide-maske) 0 0 / 180px; mask: var(--kreide-maske) 0 0 / 180px;
  }
  :root:not([data-theme="light"]) main > section + section::before {
    -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), var(--kreide-maske) 0 0 / 180px; -webkit-mask-composite: source-in;
    mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), var(--kreide-maske) 0 0 / 180px; mask-composite: intersect;
  }
  :root:not([data-theme="light"]) :is(.schild, .lage__karte) {
    --auf-ocker: #f3e6d6; --ochsenblut: #f0d6a4; --ochsenblut-tief: #f0d6a4; --knopf: #f0d6a4; --auf-knopf: #4a1f1c;
  }
}
:root[data-theme="dark"] body { text-shadow: 0 0 1px rgb(233 230 220 / 0.3); }
:root[data-theme="dark"] :is(h1, h2, h3, .etikett, .karte__name, .kontaktkarte__namen, .zeiten__titel, .marke__name):not(.karte__titel) {
  -webkit-mask: var(--kreide-maske) 0 0 / 180px; mask: var(--kreide-maske) 0 0 / 180px;
}
:root[data-theme="dark"] main > section + section::before {
  -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), var(--kreide-maske) 0 0 / 180px; -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), var(--kreide-maske) 0 0 / 180px; mask-composite: intersect;
}
:root[data-theme="dark"] :is(.schild, .lage__karte) {
  --auf-ocker: #f3e6d6; --ochsenblut: #f0d6a4; --ochsenblut-tief: #f0d6a4; --knopf: #f0d6a4; --auf-knopf: #4a1f1c;
}
/* Bei Windows-Kontrastmodus oder Wunsch nach mehr Kontrast: keine Kreide-Effekte */
@media (forced-colors: active), (prefers-contrast: more) {
  body { text-shadow: none !important; }
  :is(h1, h2, h3, .etikett, .karte__titel, .karte__name, .kontaktkarte__namen, .zeiten__titel, .marke__name) { -webkit-mask: none !important; mask: none !important; }
}

/* ------------------------------------------------------------ Weinetikett auf der Startseite (08.10.)
   Nach dem echten Flaschenetikett: goldener Rand, Papier, die Zeichnung vom Etikett (freigestellt,
   static/etikett/), Schriftzug oben rechts neben dem Rebstock, Jahrgang rechts neben dem Glas. Das Motiv
   steht etwas links von der Mitte, damit Schriftzug und Jahrgang Luft haben. Im Dunkelmodus Kreide und Ochsenblut.
   Die Schriftgrößen im Motiv hängen an dessen Breite (cqw), damit der Schriftzug immer neben den Rebstock passt. */
.etikettkarte {
  --papier: #f7e8d6; --tinte: #2b200d; --tinte-weich: #4d3b1d;
  --gold-hell: #e2d391; --gold: #bfa95c; --gold-tief: #8c7531; --gold-kontur: #3b2a12;
  --titel-fuellung: #86702c;
  position: relative; max-width: 36rem; padding: 0.7rem; border-radius: var(--ecke);
  background: linear-gradient(135deg, #7d6b2b 0%, #c9b66a 18%, #8f7d36 36%, #d8c77d 55%, #8a7832 74%, #c4b064 90%, #7d6b2b 100%);
  box-shadow: 0 1.4rem 3rem -1.2rem rgb(40 25 5 / 0.45), 0 0.3rem 0.8rem -0.3rem rgb(40 25 5 / 0.25);
  text-shadow: none;
}
.etikettkarte__papier {
  position: relative; text-align: center; color: var(--tinte);
  /* hell: dasselbe Pergament wie die Lage-Karte („Unterhalb des Spitzhauses“) */
  background: var(--pergament) var(--pergament-bild) 0 0 / 520px; border-radius: calc(var(--ecke) * 0.6);
  box-shadow: inset 0 0 2.5rem var(--pergament-rand);
  padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem) clamp(1.6rem, 1rem + 2vw, 2.8rem) clamp(2rem, 1.5rem + 1.8vw, 2.8rem);
}
.etikettkarte__motiv { position: relative; container-type: inline-size; margin: 0 5% 1rem -5%; }
.etikettkarte__bild { display: block; width: 100%; height: auto; }
.etikettkarte__kopf { position: absolute; top: 1.5cqw; left: 31%; right: -6%; }
.etikettkarte__titel {
  font-family: var(--schrift-titel); font-weight: 700; line-height: 0.95; letter-spacing: 0.005em;
  font-size: 12.2cqw; margin: 0;
  color: var(--titel-fuellung);
  -webkit-text-stroke: 0.085em var(--gold-kontur); paint-order: stroke fill;
  -webkit-mask: none !important; mask: none !important;
}
.etikettkarte__jahr {
  display: flex; align-items: center; justify-content: center; gap: 0.9rem; max-width: 21rem; margin: 0 auto 0.9rem;
  font-family: var(--schrift-titel); font-weight: 600; font-size: 1.3rem; color: var(--tinte);
}
.etikettkarte__jahr span { font: 700 0.72rem / 1 var(--schrift-text); letter-spacing: 0.24em; text-transform: uppercase; color: var(--tinte-weich); }
/* Jahrgang rechts neben dem Glasfuß, unter Haus und Weinbergen */
.etikettkarte__motiv .etikettkarte__jahr {
  position: absolute; left: 48%; right: -6%; top: 85%; margin: 0; max-width: none;
  font-size: max(4.6cqw, 0.95rem); gap: 2.2cqw;
}
.etikettkarte__motiv .etikettkarte__jahr span { font-size: max(2.3cqw, 0.6rem); }
.etikettkarte__jahr::before, .etikettkarte__jahr::after {
  content: ""; flex: 0 0 auto; width: 1.6rem; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-tief), var(--gold-hell), var(--gold-tief));
}
.etikettkarte__zeile { font-family: var(--schrift-titel); font-weight: 600; font-size: 1.12rem; line-height: 1.35; max-width: 25rem; margin: 0 auto 1.4rem; }
.etikettkarte__knoepfe { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.etikettknopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0.6rem 1.35rem;
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap;
  color: var(--tinte); border: 2px solid var(--gold-tief); border-radius: var(--ecke-klein);
  background: transparent; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.etikettknopf--voll {
  color: #2b200d;
  background: linear-gradient(160deg, var(--gold) 0%, var(--gold-hell) 45%, var(--gold) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 1px 2px rgb(60 40 10 / 0.25);
}
.etikettknopf:hover, .etikettknopf:focus-visible { background: var(--gold-kontur); border-color: var(--gold-kontur); color: var(--gold-hell); }
@media (prefers-reduced-motion: reduce) { .etikettknopf { transition: none; } }

/* Dunkelmodus: das Etikett ist Teil der Schiefertafel. Rand doppelt in roter Kreide, Schrift in weißer Kreide,
   Jahrgang und Knöpfe in Ochsenblut-Kreide, das Motiv bleibt farbig. Steht zweimal (Systemeinstellung und Schalter). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .etikettkarte {
    --tinte: #e9e6dc; --tinte-weich: #e9e6dc; --rot: #e0796e;
    background: var(--kalk) var(--papier-bild) 0 0 / 640px; padding: calc(0.55rem + 3px);
    box-shadow: 0 1.4rem 3rem -1rem rgb(0 0 0 / 0.6);
    text-shadow: 0 0 1px rgb(233 230 220 / 0.3);
  }
  :root:not([data-theme="light"]) .etikettkarte::before, :root:not([data-theme="light"]) .etikettkarte__papier::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    border: 3px solid var(--rot); -webkit-mask: var(--kreide-maske) 0 0 / 180px; mask: var(--kreide-maske) 0 0 / 180px;
  }
  :root:not([data-theme="light"]) .etikettkarte__papier::after { border-width: 1.5px; }
  :root:not([data-theme="light"]) .etikettkarte__papier { background: none; box-shadow: none; }
  :root:not([data-theme="light"]) :is(.etikettkarte__zeile, .etikettkarte__jahr) { -webkit-mask: var(--kreide-maske) 0 0 / 180px; mask: var(--kreide-maske) 0 0 / 180px; }
  :root:not([data-theme="light"]) .etikettkarte__titel { color: #ece8de; -webkit-text-stroke: 0; -webkit-mask: var(--kreide-maske) 0 0 / 180px !important; mask: var(--kreide-maske) 0 0 / 180px !important; }
  :root:not([data-theme="light"]) .etikettkarte__jahr { color: var(--rot); }
  :root:not([data-theme="light"]) .etikettkarte__jahr::before, :root:not([data-theme="light"]) .etikettkarte__jahr::after { background: var(--rot); height: 2px; }
  :root:not([data-theme="light"]) .etikettknopf { color: #e9e6dc; border-color: var(--rot); 
  -webkit-mask: var(--kreide-maske) 0 0 / 180px, linear-gradient(rgb(0 0 0 / 0.45) 0 0); -webkit-mask-composite: source-over;
  mask: var(--kreide-maske) 0 0 / 180px, linear-gradient(rgb(0 0 0 / 0.45) 0 0); mask-composite: add; }
  :root:not([data-theme="light"]) .etikettknopf--voll { background: var(--rot); color: #2a1512; box-shadow: none; }
  :root:not([data-theme="light"]) .etikettknopf:hover, :root:not([data-theme="light"]) .etikettknopf:focus-visible { background: #e9e6dc; border-color: #e9e6dc; color: #2a1512; }
}
:root[data-theme="dark"] .etikettkarte {
  --tinte: #e9e6dc; --tinte-weich: #e9e6dc; --rot: #e0796e;
  background: var(--kalk) var(--papier-bild) 0 0 / 640px; padding: calc(0.55rem + 3px);
  box-shadow: 0 1.4rem 3rem -1rem rgb(0 0 0 / 0.6);
  text-shadow: 0 0 1px rgb(233 230 220 / 0.3);
}
:root[data-theme="dark"] .etikettkarte::before, :root[data-theme="dark"] .etikettkarte__papier::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  border: 3px solid var(--rot); -webkit-mask: var(--kreide-maske) 0 0 / 180px; mask: var(--kreide-maske) 0 0 / 180px;
}
:root[data-theme="dark"] .etikettkarte__papier::after { border-width: 1.5px; }
:root[data-theme="dark"] .etikettkarte__papier { background: none; box-shadow: none; }
:root[data-theme="dark"] :is(.etikettkarte__zeile, .etikettkarte__jahr) { -webkit-mask: var(--kreide-maske) 0 0 / 180px; mask: var(--kreide-maske) 0 0 / 180px; }
:root[data-theme="dark"] .etikettkarte__titel { color: #ece8de; -webkit-text-stroke: 0; -webkit-mask: var(--kreide-maske) 0 0 / 180px !important; mask: var(--kreide-maske) 0 0 / 180px !important; }
:root[data-theme="dark"] .etikettkarte__jahr { color: var(--rot); }
:root[data-theme="dark"] .etikettkarte__jahr::before, :root[data-theme="dark"] .etikettkarte__jahr::after { background: var(--rot); height: 2px; }
:root[data-theme="dark"] .etikettknopf { color: #e9e6dc; border-color: var(--rot); 
  -webkit-mask: var(--kreide-maske) 0 0 / 180px, linear-gradient(rgb(0 0 0 / 0.45) 0 0); -webkit-mask-composite: source-over;
  mask: var(--kreide-maske) 0 0 / 180px, linear-gradient(rgb(0 0 0 / 0.45) 0 0); mask-composite: add; }
:root[data-theme="dark"] .etikettknopf--voll { background: var(--rot); color: #2a1512; box-shadow: none; }
:root[data-theme="dark"] .etikettknopf:hover, :root[data-theme="dark"] .etikettknopf:focus-visible { background: #e9e6dc; border-color: #e9e6dc; color: #2a1512; }
@media (forced-colors: active) {
  .etikettkarte { border: 2px solid CanvasText; }
  .etikettkarte__titel { -webkit-text-stroke: 0; color: CanvasText; }
  .etikettknopf { border-color: ButtonText; color: ButtonText; }
}

/* Eckranke unter dem Etikett (08.10.) am 09.10. in allen Designs wieder entfernt – die erste Trennranke
   läuft wie alle anderen an beiden Seiten weich aus. */
/* Kontrastmodus: keine Kreide-Effekte an den Etikett-Knöpfen */
@media (forced-colors: active), (prefers-contrast: more) {
  .etikettknopf { -webkit-mask: none !important; mask: none !important; }
}

/* ------------------------------------------------------------ Karte auf der Kontaktseite (08.10.)
   Leaflet (static/vendor/leaflet) mit eigenen Nadeln: das Retzschgut in Ochsenblut mit Logo,
   die Ausflugsziele in Rebgrün. Kartenbild leicht warm getönt, im Dunkelmodus abgedunkelt. */
.osm .karte { width: 100%; height: 100%; background: var(--kalk-tief); font: inherit; text-shadow: none; }
.karte .leaflet-tile-pane { filter: sepia(0.18) saturate(0.85) brightness(1.02); }
.karte .leaflet-control-attribution { font-size: 0.7rem; background: color-mix(in oklab, var(--kalk) 85%, transparent); color: var(--schiefer-weich); }
.karte .leaflet-control-attribution a { color: inherit; }
.karte .leaflet-bar a { color: var(--schiefer); background: var(--kalk); border-color: var(--linie); }
.karte .leaflet-bar a:hover, .karte .leaflet-bar a:focus-visible { background: var(--kalk-tief); color: var(--ochsenblut); }

.karte-nadel { position: relative; }
.karte .karte-nadel svg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.35)); }
.karte .karte-nadel svg path { fill: currentColor; stroke: #fff; stroke-width: 1.6; }
.karte-nadel--haus { color: #7a1f1f; }
.karte-nadel--ziel { color: #4f6d2f; }
.karte-nadel--weingut { color: #7b2a55; }
.karte-nadel__logo {
  position: absolute; z-index: 1; left: 50%; top: 6px; translate: -50% 0; width: 34px; height: 34px; border-radius: 50%; background: #fff;
}
.karte-nadel__logo::after {
  content: ""; position: absolute; inset: 3px; background: #7a1f1f;
  -webkit-mask: url("../logo/linie-640.webp?v=a720b424") center / contain no-repeat; mask: url("../logo/linie-640.webp?v=a720b424") center / contain no-repeat;
}
.karte-nadel__punkt { position: absolute; z-index: 1; left: 50%; top: 9px; translate: -50% 0; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.karte-nadel:focus-visible { outline: 3px solid var(--fokus, #1d4ed8); outline-offset: 2px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; }

/* Namensschilder: wie kleine Etiketten auf Pergament */
.karte .karte-schild {
  padding: 0.2rem 0.55rem; border: 1px solid color-mix(in oklab, #4f6d2f 45%, transparent); border-radius: var(--ecke-klein);
  background: #f6ecd6; color: #2b2216; box-shadow: 0 2px 6px rgb(0 0 0 / 0.18);
  font: 650 0.8rem / 1.25 var(--schrift-text); white-space: nowrap;
}
.karte .karte-schild--haus {
  border-color: #7a1f1f; color: #7a1f1f; font: 600 1rem / 1.1 var(--schrift-titel); padding: 0.25rem 0.6rem;
}
.karte .karte-schild::before { display: none; }

/* Infokasten beim Anklicken */
.karte .karte-info .leaflet-popup-content-wrapper {
  background: #f6ecd6 url("../hintergrund/pergament.webp?v=a720b424") 0 0 / 520px; color: #2b2216;
  border-radius: var(--ecke); box-shadow: 0 0.6rem 1.6rem -0.4rem rgb(0 0 0 / 0.4);
}
.karte .karte-info .leaflet-popup-tip { background: #f3e5c8; }
.karte .karte-info .leaflet-popup-content { margin: 0.9rem 1.1rem 0.95rem; font: 0.9rem / 1.45 var(--schrift-text); }
.karte .karte-info p { margin: 0.3rem 0 0.5rem; }
.karte .karte-info a { color: #7a1f1f; font-weight: 650; }
.karte-info__name { display: block; font: 600 1.05rem / 1.2 var(--schrift-titel); color: #7a1f1f; padding-right: 0.8rem; }
.karte .karte-info a.leaflet-popup-close-button { color: #7a1f1f; }

/* Knopf „Namen einblenden“ und Legende */
.karte .karte-knopf {
  font: 650 0.8rem / 1 var(--schrift-text); padding: 0.55rem 0.8rem; border-radius: var(--ecke-klein); cursor: pointer;
  color: #2b2216; background: #f6ecd6; border: 1px solid color-mix(in oklab, #2b2216 35%, transparent); box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
}
.karte .karte-knopf[aria-pressed="true"] { background: #7a1f1f; border-color: #7a1f1f; color: #fff; }
.karte .karte-knopf:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.karte .karte-legende {
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; padding: 0.35rem 0.65rem; border-radius: var(--ecke-klein);
  background: color-mix(in oklab, #f6ecd6 92%, transparent); color: #2b2216; font: 600 0.75rem / 1.2 var(--schrift-text);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.15);
}
.karte-legende span { display: inline-flex; align-items: center; gap: 0.35rem; }
.karte-legende i { width: 0.7rem; height: 0.7rem; border-radius: 50% 50% 50% 0; rotate: -45deg; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2); }
.karte-legende__haus { background: #7a1f1f; }
.karte-legende__ziel { background: #4f6d2f; }
.karte-legende__wein { background: #7b2a55; }
/* ausgeblendete Ebenen auch in der Legende ausblenden */
.karte-wein-aus .karte-legende__eintrag-wein, .karte-linien-aus .karte-legende__eintrag-linie, .karte-ziele-aus .karte-legende__eintrag-ziele { display: none !important; }
.karte .karte-schalter { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.karte .karte-knopf--ebene[aria-pressed="false"] { background: #f6ecd6; color: #6b6255; text-decoration: line-through; }
/* Bus- und Bahnlinien in der Legende: kurzer Strich in der Linienfarbe */
.karte-legende i.karte-legende__linie { width: 1.1rem; height: 0.3rem; border-radius: 2px; rotate: none; border: 0; box-shadow: 0 0 0 1.5px #fff; background: var(--farbe); }
.karte-legende i.karte-legende__linie--gestrichelt { background: repeating-linear-gradient(90deg, var(--farbe) 0 0.3rem, transparent 0.3rem 0.5rem); box-shadow: none; }

/* Dunkelmodus: Karte abgedunkelt, Schilder und Kästen auf der Tafel */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .karte .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.88) contrast(0.88) saturate(0.55) sepia(0.12); }
  :root:not([data-theme="light"]) .karte-nadel--haus { color: #c2453b; }
  :root:not([data-theme="light"]) .karte-nadel--ziel { color: #6f9440; } :root:not([data-theme="light"]) .karte-nadel--weingut { color: #b25a88; }
}
:root[data-theme="dark"] .karte .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.88) contrast(0.88) saturate(0.55) sepia(0.12); }
:root[data-theme="dark"] .karte-nadel--haus { color: #c2453b; }
:root[data-theme="dark"] .karte-nadel--ziel { color: #6f9440; } :root[data-theme="dark"] .karte-nadel--weingut { color: #b25a88; }

/* Karte im Dunkelmodus: kräftiger Kreiderand (über der Karte, damit die Kacheln ihn nicht verdecken) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .osm { border-color: transparent; }
  :root:not([data-theme="light"]) .osm::after {
    content: ""; position: absolute; inset: 0; z-index: 1000; pointer-events: none; border-radius: inherit;
    border: 4px solid #e9e6dc; -webkit-mask: var(--kreide-maske) 0 0 / 180px; mask: var(--kreide-maske) 0 0 / 180px;
  }
}
:root[data-theme="dark"] .osm { border-color: transparent; }
:root[data-theme="dark"] .osm::after {
  content: ""; position: absolute; inset: 0; z-index: 1000; pointer-events: none; border-radius: inherit;
  border: 4px solid #e9e6dc; -webkit-mask: var(--kreide-maske) 0 0 / 180px; mask: var(--kreide-maske) 0 0 / 180px;
}

/* ------------------------------------------------------------ Dunkel: Kreiderahmen um die Fotos (09.10.)
   Statt der zarten Ranke auf dem Bild ein kräftigerer Kreidestrich direkt an der Bildkante
   (werkzeuge/kreiderahmen.py). Als border-image mit „outset“ am Bild selbst: So schneidet der
   overflow des Bildes den Rahmen nicht ab und der Zoom beim Darüberfahren bleibt erhalten.
   Bilder über die volle Breite (Titelbild, Blick über die Weinberge bei „Lage“) bleiben ohne Rahmen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.plattenrand, .galerie__link:not(.gemeinsam__link)) { border: 0 solid transparent; border-image: url("../rahmen/kreiderahmen.png?v=a720b424") 64 / 32px / 10px round; }
  :root:not([data-theme="light"]) .plattenrand::before, :root:not([data-theme="light"]) .plattenrand::after { display: none; }
  :root:not([data-theme="light"]) :is(.galerie__text, .lage__foto figcaption, .breitbild-figur figcaption, .geschichte__bild figcaption, .gemeinsam figcaption) { margin-top: 0.9rem; }
}
:root[data-theme="dark"] :is(.plattenrand, .galerie__link:not(.gemeinsam__link)) { border: 0 solid transparent; border-image: url("../rahmen/kreiderahmen.png?v=a720b424") 64 / 32px / 10px round; }
:root[data-theme="dark"] .plattenrand::before, :root[data-theme="dark"] .plattenrand::after { display: none; }

:root[data-theme="dark"] :is(.galerie__text, .lage__foto figcaption, .breitbild-figur figcaption, .geschichte__bild figcaption, .gemeinsam figcaption) { margin-top: 0.9rem; }

/* ------------------------------------------------------------ Dunkel: Kreidezeichnungen am Rand (09.10.)
   Traube (Startseite, rechts unter der ersten Trennranke), Spitzhaus (Startseite, links unten bei „Lage“,
   im Seitenrand) und alte Weinpresse (Weingut, rechte Spalte unter den Öffnungszeiten). Gezeichnet in
   werkzeuge/kreidebilder.py; das Korn kommt wie bei der Schrift über die Kreidemaske.
   Nur im dunklen Design und nur, wo Platz ist – auf kleineren Bildschirmen fallen sie weg.
   Sie liegen hinter allem (z-index -1) direkt auf dem Hintergrund – was darüber scrollt, verdeckt sie. */
.kreidebild { display: none; }
/* --aussen: Breite des Seitenrands neben dem Inhalt. Die Bilder ragen in den Rand hinaus, bleiben aber
   mindestens 1rem vom Fensterrand entfernt (kein seitliches Scrollen; 10px Reserve für die Bildlaufleiste,
   100vw zählt sie unter Windows mit). Bei 1920 px Breite sind alle drei Zeichnungen vollständig zu sehen. */
.kreidebild--traube { --b: clamp(240px, 19vw, 300px); width: var(--b); top: -64px; rotate: 9deg;
  left: min(50% + 38rem - 0.3 * var(--b), 100% - var(--b) - 3rem); }
.kreidebild--presse { --aussen: calc((100vw - 100%) / 2 - 10px); --b: clamp(340px, 26vw, 440px); width: var(--b); bottom: 0; rotate: -3deg;
  right: max(1.5rem - var(--aussen), -0.6 * var(--b)); }
.kreidebild--spitzhaus { --aussen: calc((100vw - 100%) / 2 - 10px); --b: min(460px, var(--aussen) - 2rem); width: var(--b);
  right: calc(100% + max(1rem, (var(--aussen) - var(--b)) / 2 + 0.5rem)); bottom: 0; }
.weingut { position: relative; }
@media (min-width: 68rem) {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .kreidebild { display: block; position: absolute; z-index: -1; height: auto; pointer-events: none; opacity: 0.6;
    -webkit-mask: var(--kreide-maske) 0 0 / 180px; mask: var(--kreide-maske) 0 0 / 180px; }
  }
  :root[data-theme="dark"] .kreidebild { display: block; position: absolute; z-index: -1; height: auto; pointer-events: none; opacity: 0.6;
    -webkit-mask: var(--kreide-maske) 0 0 / 180px; mask: var(--kreide-maske) 0 0 / 180px; }
}
/* Spitzhaus nur, wenn der Seitenrand breit genug ist */
@media (max-width: 99.99rem) { .kreidebild--spitzhaus { display: none !important; } }

/* ============================================================ HELL (SANDSTEIN) UND HOLZ (seit 09.10., fest seit 23.10.)
   Helles Design: Sandstein-Papier als Hintergrund. In beiden Designs stehen die Kästen
   (Preise, Öffnungszeiten, Kontakte, Wohnungskarten, Preistafel, Bus & Bahn …) auf Ochsenblut-Latten
   wie am Haus, im dunklen Design mit den Nacht-Bildern. Texturen und Bruchkanten: werkzeuge/holz_test.py
   (acht Lattungen, jeder Kasten bekommt seine eigene), Sandstein: werkzeuge/papier_test.py. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --kalk: #e5dbc6; --kalk-tief: #dad0b9; --papier-bild: url("../hintergrund/papier-sandstein.webp?v=a720b424"); }
}
:root[data-theme="light"] { --kalk: #e5dbc6; --kalk-tief: #dad0b9; --papier-bild: url("../hintergrund/papier-sandstein.webp?v=a720b424"); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body { background-size: 1024px; }
}
:root[data-theme="light"] body { background-size: 1024px; }
:root :is(.preisbox, .kontaktkarte, .karte--rahmen, .lage__karte, .schild, .preistafel, .anreisetafel) { --holz-latten: url("../hintergrund/holz-latten-1.webp?v=a720b424"); --holz-latten-nacht: url("../hintergrund/holz-latten-1-nacht.webp?v=a720b424"); --holz-kante-oben: url("../hintergrund/holz-kante-1-oben.png?v=a720b424"); --holz-kante-unten: url("../hintergrund/holz-kante-1-unten.png?v=a720b424"); --holz-bruch-oben: url("../hintergrund/holz-bruch-1-oben.webp?v=a720b424"); --holz-bruch-unten: url("../hintergrund/holz-bruch-1-unten.webp?v=a720b424"); --holz-bruch-oben-nacht: url("../hintergrund/holz-bruch-1-oben-nacht.webp?v=a720b424"); --holz-bruch-unten-nacht: url("../hintergrund/holz-bruch-1-unten-nacht.webp?v=a720b424"); }
:root .kontaktkarte:nth-child(even) { --holz-latten: url("../hintergrund/holz-latten-2.webp?v=a720b424"); --holz-latten-nacht: url("../hintergrund/holz-latten-2-nacht.webp?v=a720b424"); --holz-kante-oben: url("../hintergrund/holz-kante-2-oben.png?v=a720b424"); --holz-kante-unten: url("../hintergrund/holz-kante-2-unten.png?v=a720b424"); --holz-bruch-oben: url("../hintergrund/holz-bruch-2-oben.webp?v=a720b424"); --holz-bruch-unten: url("../hintergrund/holz-bruch-2-unten.webp?v=a720b424"); --holz-bruch-oben-nacht: url("../hintergrund/holz-bruch-2-oben-nacht.webp?v=a720b424"); --holz-bruch-unten-nacht: url("../hintergrund/holz-bruch-2-unten-nacht.webp?v=a720b424"); }
:root .karte--rahmen:nth-child(odd) { --holz-latten: url("../hintergrund/holz-latten-3.webp?v=a720b424"); --holz-latten-nacht: url("../hintergrund/holz-latten-3-nacht.webp?v=a720b424"); --holz-kante-oben: url("../hintergrund/holz-kante-3-oben.png?v=a720b424"); --holz-kante-unten: url("../hintergrund/holz-kante-3-unten.png?v=a720b424"); --holz-bruch-oben: url("../hintergrund/holz-bruch-3-oben.webp?v=a720b424"); --holz-bruch-unten: url("../hintergrund/holz-bruch-3-unten.webp?v=a720b424"); --holz-bruch-oben-nacht: url("../hintergrund/holz-bruch-3-oben-nacht.webp?v=a720b424"); --holz-bruch-unten-nacht: url("../hintergrund/holz-bruch-3-unten-nacht.webp?v=a720b424"); }
:root .karte--rahmen:nth-child(even) { --holz-latten: url("../hintergrund/holz-latten-4.webp?v=a720b424"); --holz-latten-nacht: url("../hintergrund/holz-latten-4-nacht.webp?v=a720b424"); --holz-kante-oben: url("../hintergrund/holz-kante-4-oben.png?v=a720b424"); --holz-kante-unten: url("../hintergrund/holz-kante-4-unten.png?v=a720b424"); --holz-bruch-oben: url("../hintergrund/holz-bruch-4-oben.webp?v=a720b424"); --holz-bruch-unten: url("../hintergrund/holz-bruch-4-unten.webp?v=a720b424"); --holz-bruch-oben-nacht: url("../hintergrund/holz-bruch-4-oben-nacht.webp?v=a720b424"); --holz-bruch-unten-nacht: url("../hintergrund/holz-bruch-4-unten-nacht.webp?v=a720b424"); }
:root .preisbox { --holz-latten: url("../hintergrund/holz-latten-5.webp?v=a720b424"); --holz-latten-nacht: url("../hintergrund/holz-latten-5-nacht.webp?v=a720b424"); --holz-kante-oben: url("../hintergrund/holz-kante-5-oben.png?v=a720b424"); --holz-kante-unten: url("../hintergrund/holz-kante-5-unten.png?v=a720b424"); --holz-bruch-oben: url("../hintergrund/holz-bruch-5-oben.webp?v=a720b424"); --holz-bruch-unten: url("../hintergrund/holz-bruch-5-unten.webp?v=a720b424"); --holz-bruch-oben-nacht: url("../hintergrund/holz-bruch-5-oben-nacht.webp?v=a720b424"); --holz-bruch-unten-nacht: url("../hintergrund/holz-bruch-5-unten-nacht.webp?v=a720b424"); }   /* Holzwurm */
:root:has(link[rel="canonical"][href*="reblaus"]) .preisbox { --holz-latten: url("../hintergrund/holz-latten-6.webp?v=a720b424"); --holz-latten-nacht: url("../hintergrund/holz-latten-6-nacht.webp?v=a720b424"); --holz-kante-oben: url("../hintergrund/holz-kante-6-oben.png?v=a720b424"); --holz-kante-unten: url("../hintergrund/holz-kante-6-unten.png?v=a720b424"); --holz-bruch-oben: url("../hintergrund/holz-bruch-6-oben.webp?v=a720b424"); --holz-bruch-unten: url("../hintergrund/holz-bruch-6-unten.webp?v=a720b424"); --holz-bruch-oben-nacht: url("../hintergrund/holz-bruch-6-oben-nacht.webp?v=a720b424"); --holz-bruch-unten-nacht: url("../hintergrund/holz-bruch-6-unten-nacht.webp?v=a720b424"); }   /* Reblaus */
:root .preisbox[aria-labelledby="zeiten-titel"] { --holz-latten: url("../hintergrund/holz-latten-7.webp?v=a720b424"); --holz-latten-nacht: url("../hintergrund/holz-latten-7-nacht.webp?v=a720b424"); --holz-kante-oben: url("../hintergrund/holz-kante-7-oben.png?v=a720b424"); --holz-kante-unten: url("../hintergrund/holz-kante-7-unten.png?v=a720b424"); --holz-bruch-oben: url("../hintergrund/holz-bruch-7-oben.webp?v=a720b424"); --holz-bruch-unten: url("../hintergrund/holz-bruch-7-unten.webp?v=a720b424"); --holz-bruch-oben-nacht: url("../hintergrund/holz-bruch-7-oben-nacht.webp?v=a720b424"); --holz-bruch-unten-nacht: url("../hintergrund/holz-bruch-7-unten-nacht.webp?v=a720b424"); }   /* Weingut: Öffnungszeiten */
:root :is(.lage__karte, .schild) { --holz-latten: url("../hintergrund/holz-latten-8.webp?v=a720b424"); --holz-latten-nacht: url("../hintergrund/holz-latten-8-nacht.webp?v=a720b424"); --holz-kante-oben: url("../hintergrund/holz-kante-8-oben.png?v=a720b424"); --holz-kante-unten: url("../hintergrund/holz-kante-8-unten.png?v=a720b424"); --holz-bruch-oben: url("../hintergrund/holz-bruch-8-oben.webp?v=a720b424"); --holz-bruch-unten: url("../hintergrund/holz-bruch-8-unten.webp?v=a720b424"); --holz-bruch-oben-nacht: url("../hintergrund/holz-bruch-8-oben-nacht.webp?v=a720b424"); --holz-bruch-unten-nacht: url("../hintergrund/holz-bruch-8-unten-nacht.webp?v=a720b424"); }
:root .preistafel { --holz-latten: url("../hintergrund/holz-latten-3.webp?v=a720b424"); --holz-latten-nacht: url("../hintergrund/holz-latten-3-nacht.webp?v=a720b424"); --holz-kante-oben: url("../hintergrund/holz-kante-3-oben.png?v=a720b424"); --holz-kante-unten: url("../hintergrund/holz-kante-3-unten.png?v=a720b424"); --holz-bruch-oben: url("../hintergrund/holz-bruch-3-oben.webp?v=a720b424"); --holz-bruch-unten: url("../hintergrund/holz-bruch-3-unten.webp?v=a720b424"); --holz-bruch-oben-nacht: url("../hintergrund/holz-bruch-3-oben-nacht.webp?v=a720b424"); --holz-bruch-unten-nacht: url("../hintergrund/holz-bruch-3-unten-nacht.webp?v=a720b424"); }   /* Ferienwohnungen: Preise im Überblick */
:root .anreisetafel { --holz-latten: url("../hintergrund/holz-latten-8.webp?v=a720b424"); --holz-latten-nacht: url("../hintergrund/holz-latten-8-nacht.webp?v=a720b424"); --holz-kante-oben: url("../hintergrund/holz-kante-8-oben.png?v=a720b424"); --holz-kante-unten: url("../hintergrund/holz-kante-8-unten.png?v=a720b424"); --holz-bruch-oben: url("../hintergrund/holz-bruch-8-oben.webp?v=a720b424"); --holz-bruch-unten: url("../hintergrund/holz-bruch-8-unten.webp?v=a720b424"); --holz-bruch-oben-nacht: url("../hintergrund/holz-bruch-8-oben-nacht.webp?v=a720b424"); --holz-bruch-unten-nacht: url("../hintergrund/holz-bruch-8-unten-nacht.webp?v=a720b424"); }   /* Startseite: Mit Bus und Bahn */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) :is(.preisbox, .kontaktkarte, .karte--rahmen, .lage__karte, .schild, .preistafel, .anreisetafel) { --schiefer: #f7efe4; --schiefer-weich: #ecdccb; --auf-ocker: #f7efe4; --ochsenblut: #fde6c8; --ochsenblut-tief: #fff2df; --rebe: #f1dca6; --linie: rgb(247 239 228 / 0.22); --linie-stark: rgb(247 239 228 / 0.45); --knopf: #f7efe4; --knopf-tief: #fff; --auf-knopf: #5a1414; color: var(--schiefer); background: none; box-shadow: none; isolation: isolate; filter: drop-shadow(0 0.7rem 0.9rem rgb(45 10 8 / 0.35)); text-shadow: 0 1px 2px rgb(35 6 6 / 0.55); }
}
:root[data-theme="light"] :is(.preisbox, .kontaktkarte, .karte--rahmen, .lage__karte, .schild, .preistafel, .anreisetafel) { --schiefer: #f7efe4; --schiefer-weich: #ecdccb; --auf-ocker: #f7efe4; --ochsenblut: #fde6c8; --ochsenblut-tief: #fff2df; --rebe: #f1dca6; --linie: rgb(247 239 228 / 0.22); --linie-stark: rgb(247 239 228 / 0.45); --knopf: #f7efe4; --knopf-tief: #fff; --auf-knopf: #5a1414; color: var(--schiefer); background: none; box-shadow: none; isolation: isolate; filter: drop-shadow(0 0.7rem 0.9rem rgb(45 10 8 / 0.35)); text-shadow: 0 1px 2px rgb(35 6 6 / 0.55); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) :is(.preisbox, .kontaktkarte, .karte--rahmen, .lage__karte, .schild, .preistafel, .anreisetafel)::before { content: ""; position: absolute; inset: -0.9rem 0; z-index: -1; border: 0; border-image: none; border-radius: 0; background: var(--holz-bruch-oben) 0 0 / 640px 50px repeat-x, var(--holz-bruch-unten) 0 100% / 640px 50px repeat-x, #7a1f1f var(--holz-latten) 0 0 / 640px; -webkit-mask: var(--holz-kante-oben) 0 0 / 640px 50px repeat-x, var(--holz-kante-unten) 0 100% / 640px 50px repeat-x, linear-gradient(#000 0 0) 0 50px / 100% calc(100% - 100px) no-repeat; mask: var(--holz-kante-oben) 0 0 / 640px 50px repeat-x, var(--holz-kante-unten) 0 100% / 640px 50px repeat-x, linear-gradient(#000 0 0) 0 50px / 100% calc(100% - 100px) no-repeat; }
}
:root[data-theme="light"] :is(.preisbox, .kontaktkarte, .karte--rahmen, .lage__karte, .schild, .preistafel, .anreisetafel)::before { content: ""; position: absolute; inset: -0.9rem 0; z-index: -1; border: 0; border-image: none; border-radius: 0; background: var(--holz-bruch-oben) 0 0 / 640px 50px repeat-x, var(--holz-bruch-unten) 0 100% / 640px 50px repeat-x, #7a1f1f var(--holz-latten) 0 0 / 640px; -webkit-mask: var(--holz-kante-oben) 0 0 / 640px 50px repeat-x, var(--holz-kante-unten) 0 100% / 640px 50px repeat-x, linear-gradient(#000 0 0) 0 50px / 100% calc(100% - 100px) no-repeat; mask: var(--holz-kante-oben) 0 0 / 640px 50px repeat-x, var(--holz-kante-unten) 0 100% / 640px 50px repeat-x, linear-gradient(#000 0 0) 0 50px / 100% calc(100% - 100px) no-repeat; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) :is(.preisbox, .kontaktkarte, .karte--rahmen, .lage__karte, .schild, .preistafel, .anreisetafel)::after { display: none; }
}
:root[data-theme="light"] :is(.preisbox, .kontaktkarte, .karte--rahmen, .lage__karte, .schild, .preistafel, .anreisetafel)::after { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.preisbox, .kontaktkarte, .karte--rahmen, .lage__karte, .schild, .preistafel, .anreisetafel) { --schiefer: #f7efe4; --schiefer-weich: #ecdccb; --auf-ocker: #f7efe4; --ochsenblut: #fde6c8; --ochsenblut-tief: #fff2df; --rebe: #f1dca6; --linie: rgb(247 239 228 / 0.22); --linie-stark: rgb(247 239 228 / 0.45); --knopf: #f7efe4; --knopf-tief: #fff; --auf-knopf: #5a1414; color: var(--schiefer); background: none; box-shadow: none; isolation: isolate; filter: drop-shadow(0 0.7rem 1rem rgb(0 0 0 / 0.6)); text-shadow: 0 1px 3px rgb(0 0 0 / 0.7); }
}
:root[data-theme="dark"] :is(.preisbox, .kontaktkarte, .karte--rahmen, .lage__karte, .schild, .preistafel, .anreisetafel) { --schiefer: #f7efe4; --schiefer-weich: #ecdccb; --auf-ocker: #f7efe4; --ochsenblut: #fde6c8; --ochsenblut-tief: #fff2df; --rebe: #f1dca6; --linie: rgb(247 239 228 / 0.22); --linie-stark: rgb(247 239 228 / 0.45); --knopf: #f7efe4; --knopf-tief: #fff; --auf-knopf: #5a1414; color: var(--schiefer); background: none; box-shadow: none; isolation: isolate; filter: drop-shadow(0 0.7rem 1rem rgb(0 0 0 / 0.6)); text-shadow: 0 1px 3px rgb(0 0 0 / 0.7); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.preisbox, .kontaktkarte, .karte--rahmen, .lage__karte, .schild, .preistafel, .anreisetafel)::before { content: ""; position: absolute; inset: -0.9rem 0; z-index: -1; border: 0; border-image: none; border-radius: 0; background: var(--holz-bruch-oben-nacht) 0 0 / 640px 50px repeat-x, var(--holz-bruch-unten-nacht) 0 100% / 640px 50px repeat-x, #37181a var(--holz-latten-nacht) 0 0 / 640px; -webkit-mask: var(--holz-kante-oben) 0 0 / 640px 50px repeat-x, var(--holz-kante-unten) 0 100% / 640px 50px repeat-x, linear-gradient(#000 0 0) 0 50px / 100% calc(100% - 100px) no-repeat; mask: var(--holz-kante-oben) 0 0 / 640px 50px repeat-x, var(--holz-kante-unten) 0 100% / 640px 50px repeat-x, linear-gradient(#000 0 0) 0 50px / 100% calc(100% - 100px) no-repeat; }
}
:root[data-theme="dark"] :is(.preisbox, .kontaktkarte, .karte--rahmen, .lage__karte, .schild, .preistafel, .anreisetafel)::before { content: ""; position: absolute; inset: -0.9rem 0; z-index: -1; border: 0; border-image: none; border-radius: 0; background: var(--holz-bruch-oben-nacht) 0 0 / 640px 50px repeat-x, var(--holz-bruch-unten-nacht) 0 100% / 640px 50px repeat-x, #37181a var(--holz-latten-nacht) 0 0 / 640px; -webkit-mask: var(--holz-kante-oben) 0 0 / 640px 50px repeat-x, var(--holz-kante-unten) 0 100% / 640px 50px repeat-x, linear-gradient(#000 0 0) 0 50px / 100% calc(100% - 100px) no-repeat; mask: var(--holz-kante-oben) 0 0 / 640px 50px repeat-x, var(--holz-kante-unten) 0 100% / 640px 50px repeat-x, linear-gradient(#000 0 0) 0 50px / 100% calc(100% - 100px) no-repeat; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.preisbox, .kontaktkarte, .karte--rahmen, .lage__karte, .schild, .preistafel, .anreisetafel)::after { display: none; }
}
:root[data-theme="dark"] :is(.preisbox, .kontaktkarte, .karte--rahmen, .lage__karte, .schild, .preistafel, .anreisetafel)::after { display: none; }
:root .preistafel { padding: clamp(2.6rem, 2rem + 2vw, 3.6rem) clamp(1.6rem, 1rem + 3vw, 3.6rem); }
:root .anreisetafel { margin-top: 3.2rem; padding: 2.6rem clamp(1.6rem, 1rem + 2vw, 2.4rem) 2.2rem; }
:root .anreisetafel .lage__anreise-titel { margin-top: 0; }
/* Preise im Überblick: ab Tablet-Breite so breit wie die Tabelle und mittig */
@media (min-width: 44.01rem) { :root .preistafel { width: fit-content; max-width: 100%; margin-inline: auto; } }