/* Weingut Arnold Pauly – Code-Website
   Aufbau: angelehnt an fynbos-demo.de. Schwebende grüne Leiste mit Wappen, abgerundete Bildflächen,
   Caslon für Überschriften (Gold für einzelne Worte), Familjen Grotesk für Text und Namen.
   Das Wappen trägt die Seite: oben als Marke, im Familienteil als Wasserzeichen, das Schild als Bildform, unten im Fuß. */

:root {
  --papier: #F7F4EE;
  --rose: #EFE6DA;
  --weiss: #FFFFFF;
  --gruen: #2B443C;
  --mosel: #39584E;
  --gold: #A8843A;
  --gold-hell: #CDAE6E;
  --gold-text: #86612E;
  --wein: #4A1525;
  --schiefer: #2E3438;
  --stein: #5C635E;
  --linie: #E3DCD1;
  --linie-stark: #CBC2B3;
  --hinweis: #A5462E;
  --auf-gruen: #F7F4EE;
  --auf-gruen-leise: rgba(247, 244, 238, 0.74);

  --schrift-titel: "Libre Caslon Text", "Adobe Caslon Pro", Georgia, "Times New Roman", serif;
  --schrift-gross: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --schrift-text: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --groesse-h1: clamp(2.3rem, 4.6vw, 3.6rem);
  --groesse-h2: clamp(2rem, 3.6vw, 3rem);
  --groesse-h3: 1.3rem;
  --groesse-text: 1.0625rem;
  --groesse-klein: 0.92rem;
  --groesse-mini: 0.8rem;

  --breite: 78rem;
  --textbreite: 36rem;
  --rand: max(clamp(16px, 3.6vw, 40px), env(safe-area-inset-left, 0px));
  --rand-r: max(clamp(16px, 3.6vw, 40px), env(safe-area-inset-right, 0px));
  --abschnitt: clamp(4.5rem, 9vw, 8rem);
  --rund: 22px;
  --rund-klein: 14px;
  --schatten: 0 18px 40px -22px rgba(43, 68, 60, 0.45);

  /* färbt das weiße Wappen um */
  --wappen-gruen: invert(1) invert(21%) sepia(48%) saturate(299%) hue-rotate(110deg) brightness(89%) contrast(88%);
  --wappen-gold: invert(1) invert(54%) sepia(51%) saturate(478%) hue-rotate(2deg) brightness(89%) contrast(90%);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--schiefer);
  font-family: var(--schrift-text);
  font-size: var(--groesse-text);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--groesse-h1); }
h2 { font-size: var(--groesse-h2); }
h3 { font-size: var(--groesse-h3); }
p { margin: 0; text-wrap: pretty; }
.gold { font-style: normal; color: var(--gold); }
a { color: var(--mosel); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--wein); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.rahmen { width: 100%; max-width: calc(var(--breite) + 80px); margin-inline: auto; padding-left: var(--rand); padding-right: var(--rand-r); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zum-inhalt { position: absolute; left: 12px; top: -60px; background: var(--gruen); color: var(--papier); padding: 10px 14px; z-index: 60; border-radius: 8px; }
.zum-inhalt:focus { top: 12px; color: var(--papier); }
.vorschau-band { background: var(--schiefer); color: var(--papier); font-size: var(--groesse-mini); text-align: center; padding: 6px var(--rand-r) 6px var(--rand); }

/* ---------- Schwebende Leiste ---------- */

.kopf { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 40; padding-left: var(--rand); padding-right: var(--rand-r); margin-top: 12px; }
.leiste {
  max-width: var(--breite); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 70px; padding: 8px 10px 8px 22px;
  background: rgba(43, 68, 60, 0.94);
  border-radius: 18px;
  box-shadow: 0 14px 34px -18px rgba(20, 30, 26, 0.6);
  color: var(--auf-gruen);
}
@supports (backdrop-filter: blur(1px)) { .leiste { background: rgba(43, 68, 60, 0.88); backdrop-filter: blur(10px) saturate(1.1); } }
.marke-klein { display: flex; align-items: center; gap: 0.75rem; color: var(--auf-gruen); text-decoration: none; min-width: 0; }
.marke-klein img { width: 46px; height: 46px; object-fit: contain; flex: none; }
.marke-klein span { font-family: var(--schrift-titel); font-size: 1.08rem; line-height: 1.1; white-space: nowrap; }
.marke-klein:hover { color: var(--weiss); }
.navi { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.navi a { color: var(--auf-gruen); text-decoration: none; font-weight: 600; font-size: 0.98rem; padding-block: 6px; position: relative; }
.navi a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-hell); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.navi a:hover::after, .navi a[aria-current="page"]::after { transform: scaleX(1); }
.navi a:hover { color: var(--weiss); }
.kopf-rechts { display: flex; align-items: center; gap: 0.5rem; }
.knopf-kontakt { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.4rem; border-radius: 14px; background: var(--papier); color: var(--gruen); font-weight: 700; text-decoration: none; }
.knopf-kontakt:hover { background: var(--weiss); color: var(--wein); }
.korb-link { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 48px; padding: 0 0.9rem; border-radius: 14px; color: var(--auf-gruen); text-decoration: none; font-weight: 600; }
.korb-link:hover { background: rgba(247, 244, 238, 0.1); color: var(--weiss); }
.korb-link svg { width: 20px; height: 20px; }
.korb-zahl { min-width: 1.4rem; height: 1.4rem; padding-inline: 0.35rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--gold); color: var(--weiss); font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.korb-zahl[data-leer] { background: transparent; color: var(--auf-gruen-leise); box-shadow: inset 0 0 0 1px rgba(247, 244, 238, 0.35); }
.navi .nur-menue { display: none; }
.menue-knopf { display: none; width: 48px; height: 48px; border: 0; border-radius: 14px; background: transparent; color: var(--auf-gruen); cursor: pointer; }
.menue-knopf svg { width: 24px; height: 24px; }
.menue-knopf:hover { background: rgba(247, 244, 238, 0.1); }

@media (max-width: 920px) {
  .navi { display: none; }
  .menue-knopf { display: inline-grid; place-items: center; }
  .knopf-kontakt { display: none; }
  .korb-link .wort { display: none; }
  .leiste { flex-wrap: wrap; padding-left: 14px; }
  .kopf.offen .navi { display: grid; width: 100%; gap: 0; padding: 0.4rem 0.4rem 0.8rem; order: 3; }
  .kopf.offen .navi a { padding: 0.8rem 0.4rem; border-top: 1px solid rgba(247, 244, 238, 0.14); font-size: 1.05rem; }
  .kopf.offen .navi a::after { display: none; }
  .kopf.offen .navi .nur-menue { display: block; }
}
@media (max-width: 420px) { .marke-klein span { display: none; } }

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 48px; padding: 0 1.5rem; border-radius: 14px;
  border: 1px solid var(--gruen); background: var(--gruen); color: var(--papier);
  font: 600 1rem/1 var(--schrift-text); text-decoration: none; cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.knopf:hover { background: var(--wein); border-color: var(--wein); color: var(--weiss); }
.knopf:active { transform: translateY(1px); }
.knopf.leise { background: transparent; color: var(--gruen); }
.knopf.leise:hover { background: var(--gruen); color: var(--papier); }
.knopf.hell { background: var(--papier); border-color: var(--papier); color: var(--gruen); }
.knopf.hell:hover { background: var(--weiss); color: var(--wein); }
.knopf[disabled] { opacity: 0.45; cursor: not-allowed; }
.knopf.klein { min-height: 42px; padding: 0 1.05rem; font-size: 0.93rem; border-radius: 12px; }

/* ---------- Einstieg: Bild mit Wappen und Namen ---------- */

.einstieg { position: relative; margin-top: -82px; }
.einstieg-bild {
  position: relative; overflow: hidden;
  height: clamp(560px, 92vh, 900px);
  margin-inline: var(--rand) var(--rand-r);
  border-radius: 0 0 var(--rund) var(--rund);
  background: var(--gruen);
}
.einstieg-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; animation: bild-ruhe 1.6s ease both; }
.einstieg-bild::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 52% 46% at 50% 54%, rgba(28, 40, 36, 0.58) 0%, rgba(28, 40, 36, 0.22) 60%, rgba(28, 40, 36, 0) 100%),
    linear-gradient(to bottom, rgba(28, 40, 36, 0.45) 0%, rgba(28, 40, 36, 0) 22%);
}
.einstieg-marke {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-content: center; justify-items: center; text-align: center;
  padding: 120px var(--rand-r) 56px var(--rand); color: var(--weiss);
}
.einstieg-marke .wappen { width: clamp(120px, 15vw, 190px); height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.25)); animation: blende 1s 0.2s ease both; }
.einstieg-marke h1 { display: grid; justify-items: center; gap: 0.1em; margin-top: 0.9rem; font-size: inherit; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.25); }
.marke-weingut { font-family: var(--schrift-gross); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; animation: blende 0.9s 0.35s ease both; }
.marke-name { font-family: var(--schrift-text); font-weight: 700; text-transform: uppercase; font-size: clamp(2.7rem, 8.6vw, 7.4rem); line-height: 0.95; letter-spacing: -0.01em; white-space: nowrap; animation: blende 1s 0.45s ease both; }
.marke-name .z { display: inline; }
.marke-seit { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.1rem; font-size: clamp(0.95rem, 1.4vw, 1.1rem); font-weight: 500; letter-spacing: 0.04em; animation: blende 0.8s 1.2s ease both; }
.marke-seit::before, .marke-seit::after { content: ""; width: clamp(28px, 5vw, 56px); height: 1px; background: var(--gold-hell); transform-origin: center; animation: linie 0.9s 1.3s ease both; }

@keyframes wappen-kommt { from { opacity: 0; transform: translateY(-14px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes blende { from { opacity: 0; } to { opacity: 1; } }
@keyframes steigt { from { opacity: 0; transform: translateY(0.45em); } to { opacity: 1; transform: none; } }
@keyframes linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bild-ruhe { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }


@media (max-width: 700px) {
  .einstieg { margin-top: -78px; }
  .einstieg-bild { height: clamp(560px, 88svh, 760px); margin-inline: 0; border-radius: 0 0 var(--rund) var(--rund); }
  .marke-name { font-size: clamp(2.2rem, 10.5vw, 3.6rem); }
}

/* ---------- Band mit Rebsorten ---------- */

.band { overflow: hidden; padding-block: 1.35rem; border-bottom: 1px solid var(--linie); }
.band-spur { display: flex; width: max-content; animation: band 48s linear infinite; }
.band:hover .band-spur { animation-play-state: paused; }
.band-teil { display: flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem; }
.band-teil span { font-family: var(--schrift-titel); font-size: clamp(1.25rem, 2.2vw, 1.7rem); white-space: nowrap; color: var(--gruen); }
.band-teil svg { width: 22px; height: 26px; color: var(--gold); flex: none; }
@keyframes band { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .band-spur { animation: none; } }

/* ---------- Abschnitte ---------- */

.abschnitt { padding-block: var(--abschnitt); }
.abschnitt.rose { background: var(--rose); }
.abschnitt.dunkel { background: var(--gruen); }
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.abschnitt-kopf > div:first-child { display: grid; gap: 1rem; max-width: 42rem; }
.fliesstext { display: grid; gap: 1rem; max-width: var(--textbreite); }
.leise { color: var(--stein); }
figure { margin: 0; }
figcaption { margin-top: 0.75rem; font-size: var(--groesse-klein); color: var(--stein); }

.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: stretch; }
.zwei > * { min-width: 0; }
@media (max-width: 860px) { .zwei { grid-template-columns: minmax(0, 1fr); } }

.foto-rund { border-radius: var(--rund); overflow: hidden; background: var(--linie); }
.foto-rund img { width: 100%; height: 100%; object-fit: cover; }

/* Siegel: kleines Wappen zwischen Abschnitten */
.siegel { display: flex; align-items: center; justify-content: center; gap: 1.2rem; padding-block: 0.5rem; }
.siegel::before, .siegel::after { content: ""; flex: 0 1 140px; height: 1px; background: linear-gradient(to var(--r, right), transparent, var(--gold)); }
.siegel::after { --r: left; }
.siegel img { width: 54px; height: auto; filter: var(--wappen-gold); }

/* ---------- Familie: Foto und grüne Karte mit Wappen ---------- */

.familie .foto-rund { min-height: 420px; }
.karte-gruen {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--gruen); color: var(--auf-gruen); border-radius: var(--rund);
  padding: clamp(2rem, 5vw, 3.6rem);
  display: grid; align-content: center; gap: 1.3rem;
}
.karte-gruen .wasserzeichen { position: absolute; right: -14%; bottom: -18%; width: 78%; opacity: 0.07; z-index: -1; pointer-events: none; }
@supports (animation-timeline: view()) {
  .karte-gruen .wasserzeichen { animation: schweben linear both; animation-timeline: view(); animation-range: cover; }
  @keyframes schweben { from { transform: translateY(40px) rotate(-3deg); } to { transform: translateY(-40px) rotate(2deg); } }
}
.karte-gruen .wappen-klein { width: 74px; height: auto; }
.karte-gruen h2 { color: var(--weiss); }
.karte-gruen .gold { color: var(--gold-hell); }
.karte-gruen .fliesstext { color: var(--auf-gruen-leise); }
.karte-gruen figcaption, .karte-gruen .klein { color: var(--auf-gruen-leise); font-size: var(--groesse-klein); }

/* ---------- Flaschenregal ---------- */

.regal-huelle { position: relative; }
.regal {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(232px, 23%, 290px);
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand);
  padding: 0.5rem var(--rand-r) 1.6rem var(--rand);
  margin-inline: calc(var(--rand) * -1) calc(50% - 50vw);
  scrollbar-width: none;
}
.regal::-webkit-scrollbar { display: none; }
.flaschen-karte {
  scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr;
  background: var(--weiss); border-radius: var(--rund); overflow: hidden;
  box-shadow: 0 1px 0 var(--linie);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.flaschen-karte:hover { box-shadow: var(--schatten); transform: translateY(-3px); }
.flaschen-karte .bild { display: block; aspect-ratio: 1; background: var(--weiss); position: relative; }
.flaschen-karte .bild img { width: 100%; height: 100%; object-fit: contain; padding: 14px 14px 0; transition: transform 0.45s cubic-bezier(.2,.8,.2,1); }
.flaschen-karte:hover .bild img { transform: translateY(-8px) scale(1.03); }
.flaschen-karte .pille { position: absolute; left: 14px; top: 14px; }
.flaschen-karte .text { display: grid; gap: 0.35rem; align-content: start; padding: 1rem 1.15rem 1.2rem; border-top: 1px solid var(--linie); }
.flaschen-karte h3 { font-size: 1.22rem; line-height: 1.2; }
.flaschen-karte h3 a { color: var(--schiefer); text-decoration: none; }
.flaschen-karte h3 a::before { content: ""; position: absolute; inset: 0; }
.flaschen-karte { position: relative; }
.flaschen-karte .unter { font-size: var(--groesse-klein); color: var(--stein); }
.flaschen-karte .preiszeile { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-top: 0.35rem; }
.flaschen-karte .preiszeile strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.flaschen-karte .preiszeile span { font-size: 0.78rem; color: var(--stein); font-variant-numeric: tabular-nums; }
.flaschen-karte .kauf { position: relative; z-index: 1; margin-top: 0.6rem; justify-content: flex-start; }
.flaschen-karte .kauf .knopf { flex: 1; }
.pille { display: inline-flex; align-items: center; min-height: 26px; padding: 0 0.75rem; border-radius: 999px; background: var(--mosel); color: var(--weiss); font-size: 0.8rem; font-weight: 600; text-transform: capitalize; }
.regal-pfeile { display: flex; gap: 0.5rem; }
.regal-pfeile button { width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--linie-stark); background: var(--weiss); color: var(--gruen); cursor: pointer; display: grid; place-items: center; }
.regal-pfeile button:hover { border-color: var(--gruen); }
.regal-pfeile svg { width: 18px; height: 18px; }
@media (max-width: 700px) { .regal { grid-auto-columns: 74%; } .regal-pfeile { display: none; } }

/* ---------- Mosel-Karte ---------- */

.mosel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.mosel > * { min-width: 0; }
.mosel-karte { width: 100%; max-width: 460px; margin-inline: auto; }
.karte-flaeche { position: relative; }
.karte-svg { display: block; width: 100%; height: auto; }
.karte .fluss { fill: none; stroke: var(--gruen); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.karte .ort circle { fill: #B4583F; stroke: var(--rose); stroke-width: 3; }
.karte .ort text { font: 600 13px var(--schrift-text); letter-spacing: 0.08em; fill: var(--schiefer); }
.karte .ort.gross text { font-size: 16px; font-weight: 700; fill: var(--gruen); }
.karte .heimat { cursor: pointer; }
.karte .heimat .ring { fill: var(--rose); stroke: var(--gold); stroke-width: 2.5; }
.karte .heimat .punkt { fill: var(--gold); }
.karte .heimat .puls { fill: none; stroke: var(--gold); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: puls 2.8s ease-out infinite; }
.karte .heimat .name { font: 400 24px var(--schrift-titel); fill: var(--gruen); letter-spacing: 0.02em; }
.karte .heimat .zusatz { font: 600 11.5px var(--schrift-text); letter-spacing: 0.1em; fill: var(--gold-text); }
.karte-svg text { transition: opacity 0.3s ease; }
.karte.nah .karte-svg text { opacity: 0; }
.karte-detail { position: absolute; inset: 0; border-radius: var(--rund); overflow: hidden; background: var(--weiss); opacity: 0; transition: opacity 0.5s ease; box-shadow: var(--schatten); }
.karte-detail.sichtbar { opacity: 1; }
.karte-dorf { display: block; width: 100%; height: 100%; transform: scale(0.6); transform-origin: 58.67% 22.26%; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.karte-detail.sichtbar .karte-dorf { transform: none; }
.karte-dorf .d-fluss { fill: none; stroke: var(--gruen); stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }
.karte-dorf .d-mosel { font: italic 400 26px var(--schrift-titel); fill: var(--auf-gruen); letter-spacing: 0.04em; text-anchor: middle; }
.karte-dorf .d-neben { fill: none; stroke: var(--linie-stark); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.karte-dorf .d-haupt { fill: none; stroke: #A79F92; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.karte-dorf .d-ort { font: 600 22px var(--schrift-text); letter-spacing: 0.14em; fill: var(--schiefer); text-anchor: middle; paint-order: stroke; stroke: var(--weiss); stroke-width: 7px; stroke-linejoin: round; }
.karte-dorf .haus .ring { fill: var(--weiss); stroke: var(--gold); stroke-width: 3; }
.karte-dorf .haus .punkt { fill: var(--gold); }
.karte-dorf .haus .puls { fill: none; stroke: var(--gold); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: puls 2.8s ease-out infinite; }
.karte-dorf .d-name { font: 700 15px var(--schrift-text); letter-spacing: 0.08em; fill: var(--gold-text); paint-order: stroke; stroke: var(--weiss); stroke-width: 6px; stroke-linejoin: round; }
.karte-dorf .d-adresse { font: 400 18px var(--schrift-titel); fill: var(--gruen); paint-order: stroke; stroke: var(--weiss); stroke-width: 6px; stroke-linejoin: round; }
.karte-quelle { position: absolute; left: 0.7rem; top: 0.7rem; font-size: 0.7rem; color: var(--stein); background: rgba(255, 255, 255, 0.85); padding: 0.15rem 0.45rem; border-radius: 6px; }
.karte-quelle a { color: inherit; }
.karte-gross { position: absolute; right: 0.7rem; bottom: 0.7rem; background: var(--weiss); padding: 0.4rem 0.8rem; border-radius: 999px; font-size: var(--groesse-mini); font-weight: 600; box-shadow: var(--schatten); }
.karte-leiste { display: flex; justify-content: center; margin-top: 1.2rem; }
.karte-leiste .knopf { white-space: nowrap; }
.karte-leiste [hidden] { display: none; }
.karte-hinweis { text-align: center; font-size: var(--groesse-mini); color: var(--stein); margin-top: 0.5rem; }
@keyframes puls { from { transform: scale(1); opacity: 0.8; } to { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .karte .heimat .puls, .karte-dorf .haus .puls { animation: none; opacity: 0; } .karte-svg text, .karte-detail, .karte-dorf { transition: none; } }
.mosel-text { display: grid; gap: 1.3rem; }
@media (max-width: 860px) { .mosel { grid-template-columns: minmax(0, 1fr); } .mosel-karte { max-width: 340px; } }

/* ---------- Name: Text links, altes Foto als Abzug rechts ---------- */
.name-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; max-width: 68rem; margin-inline: auto; }
.name-raster > * { min-width: 0; }
.name-text { display: grid; gap: 1.3rem; max-width: 32rem; }
.name-bild { margin: 0; display: grid; justify-items: center; background: var(--rose); border-radius: var(--rund); padding: clamp(2rem, 5vw, 3.4rem) clamp(1.6rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2rem); }
.name-bild img { display: block; width: min(100%, 21rem); height: auto; aspect-ratio: 5 / 6; object-fit: cover; background: var(--weiss); padding: 12px 12px 14px; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 22px 40px -24px rgba(43, 68, 60, 0.55); filter: sepia(0.12) contrast(1.02); transform: rotate(-1.4deg); }
.name-bild figcaption { margin-top: 1.4rem; font: italic 400 1.05rem/1.4 var(--schrift-titel); color: var(--stein); text-align: center; max-width: 22rem; text-wrap: balance; }
@media (max-width: 860px) { .name-raster { grid-template-columns: minmax(0, 1fr); } .name-bild { justify-self: stretch; } }

/* ---------- Ferienwohnung ---------- */

.wohnung { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: stretch; }
.wohnung-bilder { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(240px, 1fr) auto; gap: 0.75rem; }
.wohnung-bilder .gross { grid-column: 1 / -1; }
.wohnung-bilder .klein { aspect-ratio: 4 / 3; }
.wohnung > * { min-width: 0; }
.wohnung-karte { background: var(--weiss); border-radius: var(--rund); padding: clamp(1.8rem, 4vw, 3rem); display: grid; gap: 1.4rem; align-content: center; }
.eckdaten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1rem; margin: 0; padding-block: 1.3rem; border-block: 1px solid var(--linie); }
.eckdaten div { display: grid; gap: 0.1rem; }
.eckdaten dt { font-size: var(--groesse-mini); color: var(--stein); }
.eckdaten dd { margin: 0; font-family: var(--schrift-titel); font-size: 1.7rem; line-height: 1.1; color: var(--gruen); font-variant-numeric: tabular-nums; }
.wohnung-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; }
.wohnung-aktion p { font-size: var(--groesse-klein); color: var(--stein); }
@media (max-width: 860px) { .wohnung { grid-template-columns: minmax(0, 1fr); } .wohnung-bilder { grid-template-rows: auto auto; } .wohnung-bilder .gross { aspect-ratio: 4 / 3; } }

/* ---------- Touren ---------- */

.touren { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.4rem); }
.touren li { background: var(--weiss); border-radius: var(--rund); padding: 1.6rem 1.5rem 1.4rem; display: grid; gap: 0.6rem; align-content: start; position: relative; }
.touren .km { font-family: var(--schrift-gross); font-size: 3.1rem; line-height: 1; color: var(--gruen); font-variant-numeric: tabular-nums; }
.touren .km small { font-family: var(--schrift-text); font-size: 0.95rem; color: var(--stein); margin-left: 0.3rem; }
.touren .art { font-size: var(--groesse-mini); font-weight: 600; color: var(--gold); letter-spacing: 0.04em; }
.touren h3 { font-size: 1.15rem; }
.touren p { color: var(--stein); font-size: var(--groesse-klein); }
.touren a { font-size: var(--groesse-klein); font-weight: 600; margin-top: 0.3rem; }
@media (max-width: 860px) { .touren { grid-template-columns: minmax(0, 1fr); } }

/* Touren auf der Startseite: Karten mit Foto */
.touren-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.4rem); }
.tour { display: flex; flex-direction: column; background: var(--gruen); color: var(--auf-gruen); border-radius: var(--rund); overflow: hidden; }
.tour-bild { position: relative; }
.tour-bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--mosel); }
.tour-quelle { position: absolute; right: 0.6rem; bottom: 0.45rem; font-size: 0.66rem; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.tour-text { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.2rem 1.2rem; }
.tour h3 { font-size: 1.25rem; line-height: 1.15; color: var(--auf-gruen); }
.tour-unter { margin: 0.2rem 0 0.75rem; font-size: var(--groesse-klein); color: var(--auf-gruen-leise); }
.tour-werte { margin: 0 0 0.6rem; font-family: var(--schrift-titel); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.tour-werte svg { width: 1.05rem; height: 1.05rem; vertical-align: -0.15rem; margin-right: 0.35rem; color: var(--gold-hell); }
.tour-text > p:not([class]) { margin: 0 0 1rem; font-size: 0.95rem; color: var(--auf-gruen-leise); }
.tour-link { margin-top: auto; align-self: flex-start; color: var(--auf-gruen); text-decoration: none; font-weight: 600; font-size: var(--groesse-klein); padding: 0.55rem 1rem; border: 1px solid rgba(247, 244, 238, 0.45); border-radius: 999px; transition: background-color 0.2s ease, color 0.2s ease; }
.tour-link:hover { background: var(--auf-gruen); color: var(--gruen); }
@media (max-width: 1100px) { .touren-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .touren-raster { grid-template-columns: minmax(0, 1fr); } .tour-bild img { aspect-ratio: 3 / 2; } }

/* Aussichtspunkte: Kacheln oben, Infos darunter */
.aussicht-wahl { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.aussicht-kachel { appearance: none; border: 0; cursor: pointer; background: var(--gruen); color: var(--auf-gruen); border-radius: var(--rund-klein); padding: 0.5rem 0.5rem 0.85rem; display: flex; flex-direction: column; gap: 0.7rem; text-align: center; font: 600 0.86rem/1.3 var(--schrift-text); transition: background-color 0.2s ease, transform 0.2s ease; }
.aussicht-kachel img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 9px; background: var(--mosel); }
.aussicht-kachel:hover { background: var(--mosel); transform: translateY(-2px); }
.aussicht-kachel[aria-selected="true"] { background: var(--mosel); box-shadow: inset 0 0 0 2px var(--gold-hell); }
.aussicht-kachel:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.aussicht-info { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; scroll-margin-top: 110px; animation: blende 0.35s ease both; }
.aussicht-info[hidden] { display: none; }
.aussicht-info > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rund); background: var(--linie); }
.aussicht-text h3 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.aussicht-art { color: var(--gold-text); font-weight: 600; font-size: var(--groesse-klein); margin: 0.5rem 0 1.4rem; }
.aussicht-wege { border-collapse: separate; border-spacing: 0 0.55rem; width: 100%; max-width: 27rem; margin: 0 0 1.3rem; }
.aussicht-wege th { text-align: left; font-weight: 500; white-space: nowrap; padding-right: 1rem; }
.aussicht-wege th svg { width: 1.6rem; height: 1.6rem; vertical-align: -0.45rem; margin-right: 0.6rem; color: var(--gruen); }
.aussicht-wege td { background: var(--gruen); color: var(--auf-gruen); font-family: var(--schrift-titel); font-size: 1.15rem; text-align: center; padding: 0.5rem 0.9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.aussicht-wege td:nth-of-type(1) { border-radius: 10px 0 0 10px; }
.aussicht-wege td:nth-of-type(2) { border-radius: 0 10px 10px 0; border-left: 1px solid rgba(247, 244, 238, 0.22); }
.aussicht-text p { margin: 0 0 1.5rem; max-width: 34rem; }
@media (max-width: 1000px) {
  .aussicht-wahl { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; margin-right: calc(-1 * var(--rand-r)); padding-right: var(--rand-r); scrollbar-width: none; }
  .aussicht-wahl::-webkit-scrollbar { display: none; }
  .aussicht-kachel { flex: 0 0 9.5rem; scroll-snap-align: start; }
}
@media (max-width: 860px) { .aussicht-info { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .aussicht-wege th { font-size: 0.92rem; } .aussicht-wege td { font-size: 1.02rem; padding: 0.45rem 0.6rem; } }
@media (prefers-reduced-motion: reduce) { .aussicht-info { animation: none; } .aussicht-kachel:hover { transform: none; } }

/* ---------- Kontakt ---------- */

.kontakt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.kontakt > * { min-width: 0; }
.kontakt-info { display: grid; gap: 1rem; }
.kontakt-daten { display: grid; gap: 1.3rem; margin-top: 1rem; padding-top: 1.4rem; border-top: 1px solid var(--linie-stark); }
.kontakt-daten h3 { font-family: var(--schrift-text); font-size: var(--groesse-mini); font-weight: 600; color: var(--stein); letter-spacing: 0.03em; margin-bottom: 0.2rem; }
.kontakt-daten p { font-size: 1.08rem; overflow-wrap: anywhere; }
.kontakt-daten p + p { margin-top: 0.35rem; font-size: 0.95rem; }
.kontakt-karte { background: var(--weiss); border-radius: var(--rund); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--schatten); }
.kontakt-karte h3 { font-size: 1.45rem; }
.kontakt-karte .formular { margin-top: 1rem; }
.kontakt-senden { display: grid; gap: 0.6rem; justify-items: start; margin-top: 0.2rem; }
.kontakt-senden p { font-size: var(--groesse-mini); color: var(--stein); }
@media (max-width: 860px) { .kontakt { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .kontakt-karte .formular { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Weinliste (Seite Weine) ---------- */

.seitenkopf { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.seitenkopf .fliesstext { margin-top: 1.1rem; }
.gruppe { margin-top: clamp(2.2rem, 4vw, 3.2rem); }
.gruppe:first-of-type { margin-top: 0; }
.gruppe > h2, .gruppe > h3 { font-size: 1.45rem; display: flex; align-items: center; gap: 0.8rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--gruen); color: var(--gruen); }
.gruppe > h2::before { content: ""; width: 18px; height: 22px; background: var(--gold); -webkit-mask: var(--traube) center / contain no-repeat; mask: var(--traube) center / contain no-repeat; }
:root { --traube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Cpath d='M11 6c0-3 2-5 5-5-1 2-2 3-5 5z'/%3E%3Ccircle cx='6' cy='9' r='3'/%3E%3Ccircle cx='12' cy='9' r='3'/%3E%3Ccircle cx='18' cy='9' r='3'/%3E%3Ccircle cx='9' cy='14.5' r='3'/%3E%3Ccircle cx='15' cy='14.5' r='3'/%3E%3Ccircle cx='12' cy='20' r='3'/%3E%3C/svg%3E"); }

.wein { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(15rem, 17rem) 7.5rem minmax(11.5rem, auto); grid-template-areas: "bild name werte preis kauf"; align-items: center; gap: 0.6rem 1.6rem; padding-block: 1.05rem; border-bottom: 1px solid var(--linie); }
.wein[hidden] { display: none; }
.wein-bild { grid-area: bild; width: 64px; height: 64px; background: var(--weiss); border-radius: 12px; overflow: hidden; }
.wein-bild img { width: 64px; height: 64px; object-fit: contain; }
.wein-name { grid-area: name; display: grid; gap: 0.15rem; min-width: 0; }
.wein-name a { color: var(--schiefer); text-decoration: none; font-family: var(--schrift-titel); font-size: 1.28rem; line-height: 1.2; }
.wein-name a:hover { color: var(--wein); }
.wein-name span { font-size: var(--groesse-klein); color: var(--stein); }
.werte { grid-area: werte; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem 0.8rem; margin: 0; }
.werte div { display: grid; gap: 0.05rem; }
.werte dt { font-size: 0.72rem; color: var(--stein); letter-spacing: 0.02em; }
.werte dd { margin: 0; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.flaschen-karte .werte { margin-top: 0.3rem; grid-area: auto; }
.flaschen-karte .kauf { grid-area: auto; }
.preis { grid-area: preis; display: grid; justify-items: end; gap: 0.05rem; text-align: right; }
.preis strong { font-weight: 700; font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.preis span { font-size: 0.78rem; color: var(--stein); font-variant-numeric: tabular-nums; }
.kauf { grid-area: kauf; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; position: relative; }
.menge { width: 3.6rem; height: 42px; text-align: center; border: 1px solid var(--linie-stark); border-radius: 12px; background: var(--weiss); color: var(--schiefer); font: 600 0.95rem var(--schrift-text); font-variant-numeric: tabular-nums; }
.kauf-status { position: absolute; right: 0; top: calc(100% + 2px); font-size: 0.78rem; color: var(--mosel); white-space: nowrap; }
.kauf-status.fehler { color: var(--hinweis); white-space: normal; max-width: 16rem; text-align: right; }
.flaschen-karte .kauf-status { position: static; grid-column: 1 / -1; white-space: normal; }
.flaschen-karte .kauf { flex-wrap: wrap; }
.ausverkauft { font-size: var(--groesse-klein); color: var(--stein); }
@media (max-width: 1020px) {
  .wein { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "bild name preis" "bild werte werte" "bild kauf kauf"; align-items: start; }
  .wein-bild, .wein-bild img { width: 56px; height: 56px; }
  .werte { max-width: 22rem; }
  .kauf { justify-content: flex-start; padding-top: 0.35rem; padding-bottom: 0.9rem; }
  .kauf-status { left: 0; right: auto; text-align: left; }
  .kauf-status.fehler { text-align: left; }
}
/* Weinliste als Raster mit großen Flaschen */
.wein-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2.2rem, 4vw, 3.2rem) clamp(1rem, 2vw, 1.75rem); margin-top: clamp(1.4rem, 3vw, 2rem); }
.wein-karte { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.wein-karte[hidden] { display: none; }
.wein-karte-bild { display: block; border-radius: var(--rund-klein); overflow: hidden; background: var(--code-hell, var(--weiss)); isolation: isolate; }
.wein-karte-bild img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; mix-blend-mode: multiply; transition: transform 0.5s cubic-bezier(.2,.8,.2,1); }
.wein-karte:hover .wein-karte-bild img { transform: translateY(-6px); }
.wein-karte-text { display: grid; gap: 0.45rem; align-content: start; }
.wein-karte h3 { font-size: 1.3rem; line-height: 1.2; }
.wein-karte h3 a { color: var(--schiefer); text-decoration: none; }
.wein-karte h3 a:hover { color: var(--wein); }
.wein-karte .unter { font-size: var(--groesse-klein); color: var(--stein); }
.wein-karte .werte { grid-area: auto; max-width: none; margin-top: 0.15rem; }
.wein-karte .preiszeile { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-top: 0.35rem; }
.wein-karte .preiszeile strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.wein-karte .preiszeile span { font-size: 0.78rem; color: var(--stein); font-variant-numeric: tabular-nums; }
.wein-karte .kauf { grid-area: auto; justify-content: flex-start; flex-wrap: wrap; gap: 0.5rem; padding: 0.2rem 0 0; }
.wein-karte .kauf .knopf { flex: 1; }
.wein-karte .kauf-status { position: static; flex-basis: 100%; white-space: normal; text-align: left; }
@media (max-width: 1100px) { .wein-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .wein-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .wein-raster { gap: 2rem 0.9rem; }
  .wein-karte h3 { font-size: 1.12rem; }
  .wein-karte .werte { grid-template-columns: repeat(3, minmax(0, auto)); gap: 0.2rem 0.6rem; }
  .wein-karte .werte dt { font-size: 0.66rem; }
  .wein-karte .werte dd { font-size: 0.85rem; }
  .wein-karte .preiszeile { flex-direction: column; gap: 0; }
  .wein-karte .menge { display: none; }
  .wein-karte .kauf .knopf { padding: 0 0.6rem; font-size: 0.86rem; }
}

.liste-fuss { display: grid; gap: 0.35rem; margin-top: 1.6rem; font-size: var(--groesse-klein); color: var(--stein); }
.filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.4rem; }
.filter button { min-height: 42px; padding: 0 1.05rem; border-radius: 999px; border: 1px solid var(--linie-stark); background: transparent; color: var(--schiefer); font: 600 0.93rem var(--schrift-text); cursor: pointer; }
.filter button:hover { border-color: var(--gruen); color: var(--gruen); }
.filter button[aria-pressed="true"] { background: var(--gruen); border-color: var(--gruen); color: var(--papier); }

/* ---------- Einzelner Wein ---------- */

.krume { font-size: var(--groesse-klein); padding-top: 2rem; }
.krume a { text-decoration: none; font-weight: 600; }
.flasche { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }
.flasche > * { min-width: 0; }
.flasche-bild { background: var(--weiss); border-radius: var(--rund); padding: clamp(1rem, 4vw, 2.5rem); position: relative; overflow: hidden; }
.flasche-bild img { width: 100%; aspect-ratio: 1; object-fit: contain; position: relative; }
.flasche-info { display: grid; gap: 1.4rem; padding-top: 0.5rem; }
.flasche-info .unterzeile { color: var(--stein); }
.flasche-preis { display: grid; gap: 0.15rem; }
.flasche-preis strong { font-size: 1.85rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gruen); }
.flasche-preis span { font-size: var(--groesse-klein); color: var(--stein); }
.flasche .kauf { grid-area: auto; justify-content: flex-start; padding-bottom: 1rem; }
.flasche .kauf-status { left: 0; right: auto; text-align: left; }
.angaben { margin: 0; border-top: 1px solid var(--gruen); }
.angaben div { display: grid; grid-template-columns: minmax(8rem, 40%) minmax(0, 1fr); gap: 1rem; padding-block: 0.7rem; border-bottom: 1px solid var(--linie); }
.angaben dt { color: var(--stein); font-size: var(--groesse-klein); }
.angaben dd { margin: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .flasche { grid-template-columns: minmax(0, 1fr); } .flasche-bild { max-width: 26rem; } }

/* ---------- Warenkorb ---------- */

.korb-raster { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: clamp(2rem, 5vw, 4rem); align-items: start; padding-bottom: var(--abschnitt); }
.korb-raster > * { min-width: 0; }
@media (max-width: 900px) { .korb-raster { grid-template-columns: minmax(0, 1fr); } }
.korb-zeilen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gruen); }
.korb-zeile { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 0.4rem 1.2rem; padding-block: 1.1rem; border-bottom: 1px solid var(--linie); align-items: center; }
.korb-zeile img { width: 64px; height: 64px; object-fit: contain; background: var(--weiss); border-radius: 12px; }
.korb-zeile .z-name { font-family: var(--schrift-titel); font-size: 1.2rem; line-height: 1.2; }
.korb-zeile .z-einzel { font-size: var(--groesse-mini); color: var(--stein); font-variant-numeric: tabular-nums; }
.korb-zeile .z-summe { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.korb-zeile .z-steuer { grid-column: 2 / 4; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--linie-stark); border-radius: 999px; background: var(--weiss); }
.stepper button { width: 38px; height: 38px; border: 0; background: transparent; color: var(--schiefer); font: 600 1.1rem var(--schrift-text); cursor: pointer; border-radius: 999px; }
.stepper button:hover { color: var(--wein); }
.stepper output { min-width: 2rem; text-align: center; font-variant-numeric: tabular-nums; }
.entfernen { border: 0; background: transparent; color: var(--stein); font: 0.9rem var(--schrift-text); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; padding: 6px; }
.entfernen:hover { color: var(--hinweis); }
.summe { background: var(--weiss); border-radius: var(--rund); padding: 1.5rem; display: grid; gap: 1rem; position: sticky; top: 110px; }
.summe dl { margin: 0; display: grid; gap: 0.55rem; }
.summe dl div { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.summe dt { color: var(--stein); }
.summe dd { margin: 0; text-align: right; }
.summe .gesamt { border-top: 1px solid var(--linie); padding-top: 0.7rem; font-weight: 700; font-size: 1.1rem; }
.summe .gesamt dt { color: var(--schiefer); }
.summe .knopf { width: 100%; }
.summe p { font-size: var(--groesse-mini); color: var(--stein); }
.alter { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--groesse-klein); }
.alter input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gruen); flex: none; }
.korb-meldung { color: var(--hinweis); font-size: var(--groesse-klein); }
.korb-leer { padding-block: 2rem var(--abschnitt); display: grid; gap: 1.2rem; justify-items: start; }
.laedt { color: var(--stein); padding-block: 2rem; }

/* ---------- Fuß mit Wappen ---------- */

.fuss { background: var(--gruen); color: var(--auf-gruen-leise); margin-top: var(--abschnitt); padding-block: clamp(3.5rem, 7vw, 5.5rem) calc(2.2rem + env(safe-area-inset-bottom, 0px)); font-size: var(--groesse-klein); border-radius: var(--rund) var(--rund) 0 0; }
.fuss-marke { display: grid; justify-items: center; text-align: center; gap: 0.2rem; color: var(--weiss); padding-bottom: 2.6rem; border-bottom: 1px solid rgba(247, 244, 238, 0.16); }
.fuss-marke img { width: 112px; height: auto; margin-bottom: 0.9rem; }
.fuss-marke .w { font-family: var(--schrift-gross); font-size: 2.2rem; line-height: 1; }
.fuss-marke .n { text-transform: uppercase; font-weight: 700; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1; letter-spacing: -0.01em; }
.fuss-marke .s { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.7rem; color: var(--auf-gruen-leise); }
.fuss-marke .s::before, .fuss-marke .s::after { content: ""; width: 34px; height: 1px; background: var(--gold-hell); }
.fuss-unten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem; padding-top: 2rem; }
.fuss strong { color: var(--weiss); font-weight: 600; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: flex-end; }
.fuss a { color: var(--auf-gruen-leise); text-decoration: none; }
.fuss a:hover { color: var(--weiss); text-decoration: underline; }
.fuss .credit { text-align: right; margin-top: 1.2rem; }
.fuss-zahlungen { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 2rem; padding-block: 1.5rem; border-top: 1px solid rgba(247, 244, 238, 0.16); }
.fuss-zahlungen-titel { color: var(--weiss); font-weight: 600; margin: 0; }
.fuss-zahlungen-hinweis { margin: 0.3rem 0 0; font-size: var(--groesse-mini); }
.fuss .fuss-zahlungen-liste { justify-content: flex-start; align-items: center; gap: 0.5rem; }
.fuss-zahlungen-liste img { display: block; width: 48px; height: 32px; object-fit: contain; }
.fuss-zahlungen-manuell { display: flex; align-items: center; gap: 0.5rem; margin-left: 0.3rem; font-size: var(--groesse-mini); }
@media (max-width: 480px) { .fuss-zahlungen { gap: 1rem; } .fuss-zahlungen-manuell { margin-left: 0; flex-basis: 100%; margin-top: 0.25rem; } }
@media (max-width: 760px) { .fuss-unten { grid-template-columns: minmax(0, 1fr); } .fuss ul { justify-content: flex-start; } .fuss .credit { text-align: left; } }
.mit-fuss-abstand { padding-bottom: 0; }

/* ---------- Etikettfarben: Blau = Weißwein, Orange = Rot und Rosé, wie auf den Flaschen ---------- */

:root {
  --etikett-blau: #7E96AC;
  --etikett-blau-hell: #E6ECF1;
  --etikett-orange: #D88A28;
  --etikett-orange-hell: #F7E8D6;
  --etikett-sekt-hell: #F0EADC;
  --etikett-brand-hell: #F2E6E4;
  --etikett-schwarz: #1F2326;
}
[data-gruppe="weiss"] { --code: var(--etikett-blau); --code-hell: var(--etikett-blau-hell); }
[data-gruppe="rot"], [data-gruppe="rose"] { --code: var(--etikett-orange); --code-hell: var(--etikett-orange-hell); }
[data-gruppe="sekt"] { --code: var(--gold-hell); --code-hell: var(--etikett-sekt-hell); }
[data-gruppe="brand"] { --code: var(--wein); --code-hell: var(--etikett-brand-hell); }

[data-gruppe] .pille { background: var(--code, var(--mosel)); color: var(--etikett-schwarz); }
[data-gruppe="brand"] .pille { color: var(--weiss); }

.flaschen-karte[data-gruppe] .bild,
.flasche[data-gruppe] .flasche-bild,
.wein[data-gruppe] .wein-bild { background: var(--code-hell); isolation: isolate; }
.flaschen-karte[data-gruppe] .bild img,
.flasche[data-gruppe] .flasche-bild img,
.wein[data-gruppe] .wein-bild img { mix-blend-mode: multiply; }

[data-gruppe-block="weiss"] > h2::before { background: var(--etikett-blau); }
[data-gruppe-block="rose"] > h2::before, [data-gruppe-block="rot"] > h2::before { background: var(--etikett-orange); }

.legende { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.4rem; margin-top: 1.4rem; font-size: var(--groesse-klein); }
.legende span { display: inline-flex; align-items: center; gap: 0.5rem; }
.legende i { width: 12px; height: 18px; border-radius: 3px; background: var(--c); }
.legende .leise { color: var(--stein); }

/* ---------- Ferienwohnung ---------- */

/* Kopf: Titel und ein Satz, darunter das große Foto vom Hof */
.fw-titel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.4rem clamp(2rem, 5vw, 4.5rem); align-items: end; padding-top: clamp(2.5rem, 6vw, 5rem); }
.fw-titel > * { min-width: 0; }
.fw-titel h1 { font-size: clamp(2.5rem, 6vw, 5.2rem); line-height: 1; letter-spacing: -0.02em; }
.nw { white-space: nowrap; }
.fw-titel-text { display: grid; gap: 1.3rem; padding-bottom: 0.35rem; }
.fw-titel-text > p:first-child { font-size: 1.12rem; max-width: 33rem; }
.fw-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; font-size: var(--groesse-klein); color: var(--stein); }
.fw-bild { margin-top: clamp(2rem, 4vw, 3.2rem); }
.fw-bild img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rund); background: var(--linie); animation: bild-ruhe 2.4s cubic-bezier(.2,.7,.2,1) both; }
.fw-bild figcaption { margin-top: 0.8rem; }
@media (max-width: 860px) { .fw-titel { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (max-width: 700px) { .fw-bild img { aspect-ratio: 4 / 3; } }

/* Familie und Hof: Foto links, Text rechts */
.fw-hof { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.fw-hof > * { min-width: 0; }
.fw-hof-text { display: grid; gap: 1.4rem; }
.fw-hof-text .fliesstext { font-size: 1.12rem; max-width: 34rem; }
.fw-hof-bild img { width: 100%; height: auto; aspect-ratio: 12 / 11; object-fit: cover; border-radius: var(--rund); background: var(--linie); }
@media (max-width: 860px) { .fw-hof { grid-template-columns: minmax(0, 1fr); } .fw-hof-bild { max-width: 34rem; } }

/* Räume: jede Zeile gleich, Text links (läuft mit), alle Fotos rechts */
.raum-liste { display: grid; gap: clamp(3rem, 6vw, 4.5rem); }
.raum-zeile { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.4rem, 4vw, 3.5rem); align-items: start; scroll-margin-top: 110px; }
.raum-zeile > * { min-width: 0; }
.raum-info { position: sticky; top: 118px; display: grid; gap: 0.7rem; padding-top: 0.2rem; }
.raum-info h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.raum-info p { color: var(--stein); max-width: 26rem; }
.raum-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.6rem, 1.2vw, 1rem); }
.raum-fotos.anzahl-3 .foto:first-child { grid-column: 1 / -1; }
.raum-fotos.anzahl-3 .foto:first-child img { aspect-ratio: 3 / 2; }
.foto { display: block; position: relative; overflow: hidden; border-radius: var(--rund-klein); background: var(--linie); cursor: zoom-in; }
.foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s cubic-bezier(.2,.8,.2,1); }
.foto:hover img { transform: scale(1.03); }
.foto::after { content: ""; position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; border-radius: 999px; background: rgba(247, 244, 238, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B443C' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E") center / 18px no-repeat; opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; }
.foto:hover::after, .foto:focus-visible::after { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .raum-zeile { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .raum-info { position: static; }
  .foto::after { opacity: 1; transform: none; width: 30px; height: 30px; right: 8px; bottom: 8px; background-size: 15px; }
}

/* Ausstattung auf grüner Karte */
.ausstattung { align-content: start; gap: clamp(1.8rem, 3vw, 2.6rem); }
.ausstattung-kopf { display: flex; align-items: center; gap: 1.2rem; }
.ausstattung-kopf > div { display: grid; gap: 0.4rem; }
.ausstattung-kopf .wappen-klein { width: 64px; }
.ausstattung-raster { columns: 3 15rem; column-gap: clamp(1.5rem, 4vw, 3.5rem); }
.ausstattung-gruppe { break-inside: avoid; padding-bottom: 1.8rem; }
.ausstattung-gruppe h3 { font-size: 1.25rem; color: var(--weiss); padding-bottom: 0.6rem; margin-bottom: 0.7rem; border-bottom: 1px solid rgba(205, 174, 110, 0.4); }
.ausstattung-gruppe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; color: var(--auf-gruen-leise); font-size: var(--groesse-klein); }
.ausstattung-gruppe li { display: flex; gap: 0.6rem; align-items: baseline; }
.ausstattung-gruppe li::before { content: ""; width: 11px; height: 7px; flex: none; border-left: 1.5px solid var(--gold-hell); border-bottom: 1.5px solid var(--gold-hell); transform: translateY(-0.2em) rotate(-45deg); }

/* Lage */
.panorama { border-radius: var(--rund); overflow: hidden; position: relative; background: var(--linie); }
.panorama img { width: 100%; aspect-ratio: 16 / 5.6; object-fit: cover; }
.panorama figcaption { position: absolute; left: 18px; bottom: 16px; margin: 0; padding: 0.35rem 0.8rem; border-radius: 999px; background: rgba(43, 68, 60, 0.82); color: var(--auf-gruen); font-size: var(--groesse-mini); }
@supports (animation-timeline: view()) {
  .panorama img { animation: panorama-zieht linear both; animation-timeline: view(); animation-range: cover; }
  @keyframes panorama-zieht { from { transform: scale(1.12) translateX(2%); } to { transform: scale(1.12) translateX(-2%); } }
}
.lage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.lage > * { min-width: 0; }
.lage-text { display: grid; gap: 1.2rem; align-content: start; }
.lage-daten { margin: 0.4rem 0 0.6rem; display: grid; border-top: 1px solid var(--linie); }
.lage-daten div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; gap: 1rem; padding-block: 0.8rem; border-bottom: 1px solid var(--linie); }
.lage-daten dt { font-family: var(--schrift-titel); font-size: 1.6rem; line-height: 1; color: var(--gruen); font-variant-numeric: tabular-nums; }
.lage-daten dd { margin: 0; color: var(--stein); }
.lage-touren h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.touren.schmal { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
.touren.schmal li { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: start; gap: 1.2rem; padding: 1.3rem 1.4rem; }
.touren.schmal li > div { display: grid; gap: 0.35rem; }
.touren.schmal .km { font-size: 2.4rem; }
.touren.schmal h4 { margin: 0; font-family: var(--schrift-titel); font-weight: 400; font-size: 1.15rem; line-height: 1.2; }
@media (max-width: 860px) { .lage { grid-template-columns: minmax(0, 1fr); } .panorama img { aspect-ratio: 16 / 9; } }
@media (max-width: 480px) { .touren.schmal li { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; } }

/* Anfrage */
.anfrage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: stretch; }
.anfrage > * { min-width: 0; }
.anfrage-karte { background: var(--weiss); border-radius: var(--rund); padding: clamp(1.8rem, 4vw, 3rem); display: grid; gap: 1rem; align-content: start; }
.formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 0.8rem; }
.formular label { display: grid; gap: 0.35rem; min-width: 0; }
.formular label span { font-size: var(--groesse-mini); font-weight: 600; color: var(--stein); letter-spacing: 0.02em; }
.formular .breit { grid-column: 1 / -1; }
.formular input, .formular select, .formular textarea { width: 100%; min-height: 48px; padding: 0.6rem 0.85rem; border: 1px solid var(--linie-stark); border-radius: 12px; background: var(--papier); color: var(--schiefer); font: 1rem/1.4 var(--schrift-text); }
.formular textarea { resize: vertical; min-height: 96px; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(43, 68, 60, 0.12); background: var(--weiss); }
.formular [aria-invalid="true"] { border-color: var(--hinweis); }
.formular .knopf { width: 100%; }
.naechte { min-height: 1.4em; font-size: var(--groesse-klein); color: var(--gruen); font-weight: 600; }
.naechte.fehler { color: var(--hinweis); }
.formular .hinweis { font-size: var(--groesse-mini); color: var(--stein); }
.anfrage-kontakt { align-content: start; gap: 0.9rem; }
.anfrage-kontakt h3 { color: var(--weiss); font-size: 1.6rem; }
.anfrage-kontakt a { color: var(--auf-gruen); }
.anfrage-kontakt a:hover { color: var(--weiss); }
.gross-tel { font-family: var(--schrift-gross); font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.1; text-decoration: none; margin-block: 0.4rem; }
.portale { padding-top: 0.9rem; border-top: 1px solid rgba(247, 244, 238, 0.16); font-size: var(--groesse-klein); }
@media (max-width: 860px) { .anfrage { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 340px) { .formular { grid-template-columns: minmax(0, 1fr); } }

/* Großansicht der Fotos */
.lichtbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #141C19; color: var(--auf-gruen); }
.lichtbox::backdrop { background: transparent; }
.lichtbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; animation: blende 0.25s ease both; }
.lichtbox img { max-width: min(92vw, 1600px); max-height: calc(100dvh - 120px); width: auto; height: auto; border-radius: 12px; object-fit: contain; }
.lichtbox p { padding: 0.8rem 1rem 1.4rem; font-size: var(--groesse-klein); text-align: center; }
.lichtbox button { position: absolute; width: 52px; height: 52px; border: 0; border-radius: 999px; display: grid; place-items: center; background: rgba(247, 244, 238, 0.14); color: var(--weiss); cursor: pointer; }
.lichtbox button:hover { background: rgba(247, 244, 238, 0.26); }
.lichtbox button svg { width: 22px; height: 22px; }
.lichtbox .zu { top: 16px; right: 16px; }
.lichtbox .vor { right: 16px; top: 50%; transform: translateY(-50%); }
.lichtbox .zurueck { left: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) { .lichtbox .vor, .lichtbox .zurueck { top: auto; bottom: 12px; transform: none; } }

/* ---------- Acht Generationen: Welle mit Punkten ---------- */
.gen-abschnitt { padding-top: 0; }
.gen-flaeche { position: relative; margin: clamp(1.5rem, 4vw, 3rem) 0 clamp(1.8rem, 4vw, 2.6rem); }
.gen-flaeche svg { display: block; width: 100%; height: auto; overflow: visible; }
.gen-linie { fill: none; stroke: url(#gen-verlauf); stroke-width: 4; stroke-linecap: round; }
@supports (animation-timeline: view()) {
  .gen-linie { stroke-dasharray: 1; stroke-dashoffset: 1; animation: gen-zeichnen linear both; animation-timeline: view(); animation-range: entry 5% cover 40%; }
}
@keyframes gen-zeichnen { to { stroke-dashoffset: 0; } }
.gen-punkt { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 0; border-radius: 50%; border: 2px solid var(--gold); background: var(--papier); color: var(--gold-text); font: 600 0.88rem/1 var(--schrift-text); cursor: pointer; display: grid; place-items: center; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.gen-punkt:hover { transform: scale(1.08); }
.gen-punkt:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.gen-punkt[aria-pressed="true"] { background: var(--gruen); border-color: var(--gruen); color: var(--auf-gruen); box-shadow: 0 0 0 7px rgba(43, 68, 60, 0.12); }
.gen-name { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; font: italic 400 1.05rem/1.25 var(--schrift-titel); color: var(--stein); pointer-events: none; }
.gen-name b { display: block; font: 700 0.95rem/1.3 var(--schrift-text); color: var(--gruen); }
.gen-punkt.unten .gen-name { top: calc(100% + 0.55rem); }
.gen-punkt.oben .gen-name { bottom: calc(100% + 0.55rem); }
.gen-punkt[aria-pressed="true"] .gen-name { color: var(--gruen); }
.gen-liste { list-style: none; margin: 0 auto; padding: 0; max-width: 40rem; min-height: 7.5rem; text-align: center; }
.gen-liste li[hidden] { display: none; }
.gen-liste li { animation: blende 0.35s ease both; }
.gen-liste h3 { font: 600 var(--groesse-klein) var(--schrift-text); color: var(--gold-text); margin-bottom: 0.5rem; }
.gen-liste p { margin: 0; font: 400 clamp(1.25rem, 2.2vw, 1.6rem)/1.4 var(--schrift-titel); color: var(--gruen); text-wrap: balance; }
@media (max-width: 760px) { .gen-name { display: none; } .gen-punkt { width: 30px; height: 30px; margin: -15px 0 0 -15px; font-size: 0.8rem; } }
@media (prefers-reduced-motion: reduce) { .gen-linie { animation: none; stroke-dashoffset: 0; } .gen-liste li { animation: none; } .gen-punkt:hover { transform: none; } }

/* Eigene Rechtsseiten: ruhige Lesespalte und durchgängige Navigation. */
.recht-seite .seitenkopf { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.recht-seite h1 { max-width: 32ch; font-size: clamp(1.95rem, 4.2vw, 3.5rem); }
.recht-raster { display: grid; grid-template-columns: minmax(12rem, 19rem) minmax(0, 46rem); gap: clamp(2rem, 5.5vw, 6rem); align-items: start; }
.recht-nav { position: sticky; top: 120px; border-top: 1px solid var(--linie-stark); padding-top: 1.2rem; }
.recht-nav h2 { font: 600 var(--groesse-klein)/1.4 var(--schrift-text); margin: 0 0 1rem; color: var(--stein); }
.recht-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.recht-nav a { color: var(--stein); text-decoration: none; text-underline-offset: 0.22em; }
.recht-nav a:hover, .recht-nav a[aria-current] { color: var(--gruen); text-decoration: underline; }
.recht-nav a[aria-current] { font-weight: 600; }
.recht-inhalt { min-width: 0; border-top: 1px solid var(--linie-stark); padding-top: 1.2rem; font-size: 1.0625rem; line-height: 1.75; overflow-wrap: anywhere; }
.recht-inhalt p { margin: 0 0 1.15em; }
.recht-inhalt h2 { font-family: var(--schrift-titel); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.25; margin: 2.4em 0 0.85em; }
.recht-inhalt h3 { font: 600 1.15rem/1.4 var(--schrift-text); margin: 1.7em 0 0.6em; }
.recht-inhalt div > :first-child { margin-top: 0; }
.recht-inhalt ul { margin: 0 0 1.4em; padding-left: 1.25em; }
.recht-inhalt li { padding-left: 0.25em; margin-bottom: 0.6em; }
.recht-inhalt a { color: var(--gruen); text-underline-offset: 0.2em; }
.recht-language { color: var(--stein); font-size: var(--groesse-klein); padding-bottom: 1rem; border-bottom: 1px solid var(--linie); }
html[lang="de"] .recht-language { display: none; }
.recht-grafik { margin: 0 0 1.2rem; max-width: 42rem; }
.recht-grafik img { display: block; width: 100%; height: auto; border: 1px solid var(--linie); }
.recht-credits { list-style: none; padding: 0 !important; }
.recht-credits li { padding: 0 0 1rem; margin: 0 0 1rem; border-bottom: 1px solid var(--linie); }
@media (max-width: 760px) {
 .recht-raster { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
 .recht-nav { position: static; }
 .recht-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.2rem; font-size: 0.92rem; }
 .recht-inhalt { font-size: 1rem; }
}

/* Weinpakete, Bildkennzeichnung und Versand direkt beim Preis. */
.paket[data-paketgrafik] { grid-template-columns:1fr; }
.paket-motiv { margin:0; padding:1.25rem; border-radius:12px; background:var(--rose); display:grid; place-items:center; }
.paket-motiv > img { width:100%; height:clamp(18rem,30vw,28rem); object-fit:contain; }
.paket-motiv figcaption { width:100%; margin-top:.65rem; color:var(--stein); font-size:.75rem; line-height:1.4; text-align:right; }
.paket[data-paketgrafik] .paket-text { padding-inline:.25rem; }
.pakete-teaser { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-block:0 3rem; }
.pakete-teaser h2 { font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.7rem; }
.pakete-teaser p { max-width:42rem; color:var(--stein); }
.pakete-teaser .knopf { flex-shrink:0; }
.pakete-zurueck { display:inline-block; margin-bottom:1.2rem; }
.pakete-seite .seitenkopf { padding-bottom:3.5rem; }
.paket-gruppe { margin-bottom:5rem; }
.paket-gruppenkopf { display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid var(--linie-stark); }
.paket-gruppenkopf h2,.paket-gruppenkopf h3 { font-size:clamp(1.7rem,3vw,2.35rem); }
.paket-gruppenkopf p { max-width:29rem; color:var(--stein); }
.pakete-raster { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 3rem; }
.paket { min-width:0; padding-bottom:2rem; border-bottom:1px solid var(--linie); display:grid; grid-template-columns:minmax(130px,.85fr) minmax(0,1.15fr); align-content:start; gap:1.25rem; }
.paket-bilder { display:flex; align-items:flex-start; justify-content:center; background:#eee9df; border-radius:12px; padding:1rem .15rem; overflow:hidden; }
.paket-bilder img { width:33.333%; height:230px; object-fit:contain; mix-blend-mode:multiply; }
.paket-menge { color:var(--stein); font-size:.9rem; margin-bottom:.4rem; }
.paket h3,.paket h4 { font-family:var(--schrift-titel); font-size:clamp(1.4rem,2vw,1.8rem); font-weight:400; line-height:1.2; margin-bottom:1rem; }
.paket-preis { display:flex; flex-direction:column; gap:.2rem; }
.paket-preis strong { font-size:1.65rem; font-weight:500; color:var(--gruen); line-height:1.2; }
.paket-preis > span { font-size:.85rem; color:var(--stein); }
.paket-versand { color:var(--stein); font-size:.88rem; line-height:1.4; margin-block:.65rem 1rem; }
.paket-inhalt { font-size:.93rem; margin-bottom:1rem; }
.paket-inhalt summary { cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.paket-inhalt ul { padding-left:1.1rem; margin-block:.7rem; }
.paket-inhalt li { margin-bottom:.4rem; }
.paket-inhalt p + p { margin-top:.4rem; }
.paket .kauf { display:flex; flex-wrap:wrap; gap:.5rem; }
.paket .kauf-status { flex-basis:100%; }
.paket .knopf { padding-inline:1rem; }
.paket .knopf:disabled { opacity:.6; cursor:default; }
.paket-regeln { display:grid; grid-template-columns:1fr 1fr; gap:4rem; padding-block:1rem 5rem; }
.paket-regeln h2 { font-size:1.8rem; margin-bottom:1rem; }
.paket-regeln p { max-width:36rem; margin-bottom:1rem; color:var(--stein); }
@media(max-width:1100px) {
 .paket { grid-template-columns:1fr; gap:1rem; }
 .paket-bilder img { height:230px; max-width:110px; }
 .paket-bilder { padding-block:.75rem; }
}
@media(max-width:640px) {
 .pakete-teaser,.paket-gruppenkopf { display:block; }
 .pakete-teaser .knopf { margin-top:1.2rem; }
 .paket-gruppenkopf p { margin-top:.8rem; }
 .pakete-raster,.paket-regeln { grid-template-columns:1fr; gap:2rem; }
 .paket { grid-template-columns:1fr; }
 .paket-bilder img { height:250px; max-width:115px; }
 .paket h3,.paket h4 { font-size:1.8rem; }
 .paket-text { padding-inline:.25rem; }
 .paket-gruppe { margin-bottom:3rem; }
}
.pakete-bildhinweis { font-size:.85rem; color:var(--stein); margin-bottom:2.5rem; }
.shop-pakete { padding-top:clamp(2rem,5vw,4rem); }
.shop-pakete-kopf { padding-top:2rem; border-top:1px solid var(--linie-stark); margin-bottom:2.5rem; scroll-margin-top:110px; }
.shop-pakete-kopf h2 { margin-bottom:.8rem; }
.shop-pakete-kopf p { color:var(--stein); max-width:45rem; }
.shop-pakete { scroll-margin-top:110px; }
.paket-anfrage { padding-bottom:3rem; }
.paket-anfrage h2,.paket-anfrage h3 { font-size:1.8rem; margin-bottom:.8rem; }
.paket-anfrage p { color:var(--stein); max-width:42rem; margin-bottom:1.2rem; }
.korb-produktbild { margin:0; }
.korb-produktbild figcaption { margin-top:.25rem; color:var(--stein); font-size:.75rem; line-height:1.4; text-align:center; }

/* Offizielles AI-Basissymbol mit einer bedienbaren zweiten Informationsebene. */
.ki-label { display:inline-flex; align-items:center; gap:0; vertical-align:middle; text-align:left; }
.ki-label .ki-symbol { display:block; width:34px; height:34px; padding:0; border:0; border-radius:0; background:none; object-fit:contain; flex-shrink:0; opacity:.65; }
.ki-info { position:relative; margin-left:-6px; font-family:var(--schrift-text); }
.ki-info > summary { list-style:none; cursor:pointer; display:grid; place-items:center; width:24px; min-height:40px; border-radius:6px; color:var(--stein); }
.ki-info > summary::-webkit-details-marker { display:none; }
.ki-info-i { display:grid; place-items:center; width:16px; height:16px; border:1px solid currentColor; border-radius:50%; font:600 11px/1 var(--schrift-text); }
.ki-info > summary:hover,.ki-info[open] > summary { color:var(--gruen); }
.ki-info > summary:focus-visible,.ki-info-panel button:focus-visible { outline:2px solid var(--gruen); outline-offset:3px; }
.ki-info[open] { z-index:30; }
.ki-info-panel { display:none; position:absolute; right:0; bottom:calc(100% + .4rem); width:min(20rem,calc(100vw - 3rem)); max-height:65vh; overflow:auto; padding:1rem; border:1px solid var(--linie-stark); border-radius:10px; background:var(--papier); color:var(--schiefer); box-shadow:0 6px 24px rgba(25,45,36,.12); text-align:left; font-size:.9rem; line-height:1.5; }
.ki-info[open] > .ki-info-panel { display:block; }
.ki-info-kopf { display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; margin-bottom:.5rem; }
.ki-info-kopf strong { font-size:.95rem; font-weight:600; padding-top:.25rem; }
.ki-info-panel button { display:grid; place-items:center; flex-shrink:0; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--gruen); font:400 1.5rem/1 var(--schrift-text); cursor:pointer; }
.ki-info-panel p { margin:0; color:var(--schiefer); }
.ki-info-panel p + p { margin-top:.65rem; }
.ki-label--compact .ki-symbol { width:32px; height:32px; }
.ki-label--compact .ki-info > summary { width:24px; min-height:38px; }
.ki-label--compact .ki-info-panel { right:auto; left:-2.1rem; top:calc(100% + .4rem); bottom:auto; }

/* Preisangaben stehen vor dem Kauf und bleiben ohne JavaScript sichtbar. */
.preis-kosten { margin-block:.65rem .9rem; font-size:.82rem; line-height:1.45; color:var(--stein); }
.preis-kosten p { margin:0; }
.preis-kosten p + p { margin-top:.2rem; }
.preis-kosten a,.paket-kosten a,.korb-kosten-erklaerung a { display:inline-block; margin-top:.45rem; color:var(--gruen); text-decoration:underline; text-underline-offset:3px; }
.flasche-info > .preis-kosten { margin-block:-.3rem .35rem; font-size:.94rem; }
.kosten-uebersicht { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,5rem); border-block:1px solid var(--linie-stark); padding-block:2rem; margin-block:0 3rem; scroll-margin-top:110px; }
.kosten-uebersicht h2 { font-size:clamp(1.7rem,3vw,2.2rem); margin-bottom:.8rem; }
.kosten-uebersicht p { color:var(--stein); font-size:.94rem; line-height:1.5; margin-block:.8rem 0; }
.kosten-uebersicht .kosten-erklaerung { font-size:.88rem; }
.kosten-details { min-width:0; }
.kosten-details table { width:100%; border-collapse:collapse; font-size:.93rem; }
.kosten-details th,.kosten-details td { text-align:left; padding:.7rem .4rem; border-bottom:1px solid var(--linie); }
.kosten-details thead th { font-size:.8rem; font-weight:500; color:var(--stein); vertical-align:bottom; }
.kosten-details tbody th { font-weight:400; }
.kosten-details td { font-variant-numeric:tabular-nums; white-space:nowrap; }
.kosten-details th:first-child { padding-left:0; }
.kosten-details th:not(:first-child),.kosten-details td { text-align:right; }
.kosten-details tr:last-child th,.kosten-details tr:last-child td { border-bottom:0; }
.paket-kosten { border-block:1px solid var(--linie); padding-block:.9rem; margin-bottom:1.1rem; font-size:.9rem; }
.paket-kosten-kopf { color:var(--stein); font-size:.8rem; margin-bottom:.65rem; }
.paket-kosten dl { display:grid; gap:.4rem; margin:0; }
.paket-kosten dl > div { display:flex; justify-content:space-between; gap:1rem; }
.paket-kosten dd { margin:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
.paket-gesamt { border-top:1px solid var(--linie); padding-top:.5rem; font-weight:600; }
.paket-kosten > p:not(.paket-kosten-kopf) { color:var(--stein); font-size:.82rem; line-height:1.45; margin-top:.7rem; }
.korb-kosten-erklaerung { border-top:1px solid var(--linie); padding-top:.8rem; font-size:.88rem; }
.korb-kosten-erklaerung p { color:var(--gruen); line-height:1.45; }
.summe .gesamt { font-size:1rem; }
@media(max-width:760px) {
 .kosten-uebersicht { grid-template-columns:minmax(0,1fr); gap:1.3rem; padding-block:1.5rem; }
 .kosten-details table { font-size:.86rem; }
 .kosten-details th,.kosten-details td { padding-inline:.3rem; }
 .kosten-details thead th { font-size:.74rem; }
 .preis-kosten { font-size:.8rem; }
}

/* Weinseite: Kistenfoto mit Titel in einer Aussparung unten links */
.weine-kopf { position: relative; margin-top: clamp(1.4rem, 3vw, 2.4rem); margin-bottom: clamp(2.6rem, 5vw, 3.8rem); }
.weine-kopf-bild { border-radius: var(--rund); overflow: hidden; background: var(--linie); }
.weine-kopf-bild img { display: block; width: 100%; height: auto; aspect-ratio: 2.5 / 1; object-fit: cover; }
.weine-kopf-text { position: absolute; left: 0; bottom: 0; width: min(64%, 52rem); display: grid; gap: 1rem; justify-items: start; padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.6rem) 0 0; background: var(--papier); border-top-right-radius: var(--rund); }
.weine-kopf-text::before, .weine-kopf-text::after { content: ""; position: absolute; width: var(--rund); height: var(--rund); background: radial-gradient(circle at 100% 0, transparent calc(var(--rund) - 0.5px), var(--papier) var(--rund)); pointer-events: none; }
.weine-kopf-text::before { left: 0; top: calc(-1 * var(--rund)); }
.weine-kopf-text::after { right: calc(-1 * var(--rund)); bottom: 0; }
.weine-kopf-text h1 { font-size: clamp(2rem, 3.2vw, 2.9rem); }
.weine-kopf-text p { margin: 0; max-width: 40rem; color: var(--stein); }
.weine-kopf-text .knopf { margin-top: 0.3rem; }
.wo-kopf .weine-kopf-text { position:static; width:100%; margin-top:1.6rem; padding:0; background:none; border-radius:0; }
.wo-kopf .weine-kopf-text::before,.wo-kopf .weine-kopf-text::after { display:none; }
.weine-hinweise { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 2rem; margin: -1rem 0 2.4rem; font-size: var(--groesse-klein); color: var(--stein); }
.weine-hinweise p { margin: 0; }
.weine-hinweise .legende { margin-top: 0; color: var(--schiefer); }
@media (max-width: 1100px) {
  .weine-kopf-text { position: static; width: auto; margin-top: 1.6rem; padding: 0; background: none; border-radius: 0; }
  .weine-kopf-text::before, .weine-kopf-text::after { display: none; }
  .weine-hinweise { display: grid; justify-content: start; }
}
@media (max-width: 860px) {
  .weine-kopf-bild img { aspect-ratio: 3 / 2; }
}

/* Ferienwohnung: Kopf mit Text links und mittelgroßem Hof-Foto rechts */
.fw-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 4.5rem); align-items: center; padding-top: clamp(2.5rem, 6vw, 5rem); }
.fw-kopf > * { min-width: 0; }
.fw-kopf-text { display: grid; gap: 1.4rem; justify-items: start; }
.fw-kopf-text h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -0.02em; }
.fw-kopf-text > p:not(.fw-aktion) { font-size: 1.12rem; max-width: 33rem; }
.fw-kopf-bild { margin: 0; }
.fw-kopf-bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rund); background: var(--linie); animation: bild-ruhe 1.6s ease both; }
.fw-kopf-bild figcaption { margin-top: 0.8rem; }
@media (max-width: 860px) { .fw-kopf { grid-template-columns: minmax(0, 1fr); } .fw-kopf-bild { max-width: 36rem; } }

/* Räume: Fotos abwechselnd links und rechts, jede zweite Zeile leicht dunkler hinterlegt */
#raeume { overflow-x: clip; }
.raum-liste { gap: 0; }
.raum-zeile { position: relative; isolation: isolate; padding-block: clamp(2.2rem, 4.5vw, 3.6rem); }
.raum-zeile:first-child { padding-top: 0; }
.raum-zeile:last-child:nth-child(odd) { padding-bottom: 0; }
.raum-zeile:nth-child(even)::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: #E8DCCD; }
.raum-zeile:nth-child(even) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.raum-zeile:nth-child(even) .raum-info { order: 2; }
@media (max-width: 760px) {
  .raum-zeile:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .raum-zeile:nth-child(even) .raum-info { order: 0; }
}

/* Weinort-Seite */
.wo-dunkel { color: var(--auf-gruen-leise); }
.wo-dunkel h2, .wo-dunkel h3 { color: var(--auf-gruen); }
.wo-band { margin-block: 0; }
.wo-band img { display: block; width: 100%; height: auto; aspect-ratio: 2.6 / 1; object-fit: cover; border-radius: var(--rund); background: var(--linie); }
.wo-band-oben { margin-bottom: clamp(3rem, 6vw, 4.5rem); }

/* Chronik: Überschrift links, Zeitleiste rechts */
.wo-chronik { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.wo-chronik > * { min-width: 0; }
.wo-chronik-kopf { position: sticky; top: 130px; display: grid; gap: 1rem; }
.zeitleiste { list-style: none; margin: 0; padding: 0; }
.zeitleiste li { position: relative; display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 0 2.2rem; padding-bottom: clamp(1.8rem, 3vw, 2.4rem); }
.zeitleiste li::before { content: ""; position: absolute; left: calc(5.2rem + 1.1rem - 0.5px); top: 0.55rem; bottom: -0.55rem; width: 1px; background: var(--linie-stark); }
.zeitleiste li:last-child { padding-bottom: 0; }
.zeitleiste li:last-child::before { display: none; }
.zeitleiste li::after { content: ""; position: absolute; left: calc(5.2rem + 1.1rem - 5px); top: 0.45rem; width: 10px; height: 10px; border-radius: 50%; background: var(--rose); box-shadow: inset 0 0 0 2px var(--gruen); }
.zeitleiste li.unser::after { background: var(--gold); box-shadow: 0 0 0 4px rgba(168, 132, 58, 0.22); }
.zeitleiste .jahr { font: 400 1.5rem/1.1 var(--schrift-titel); color: var(--gruen); text-align: right; font-variant-numeric: lining-nums; }
.zeitleiste h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: 0.45rem; }
.zeitleiste p { color: var(--stein); max-width: 40rem; }

/* Geschichte auf Grün */
.wo-geschichte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.wo-geschichte > * { min-width: 0; }
.wo-geschichte-bild { margin: 0; }
.wo-geschichte-bild img, .wo-terroir-bild img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--rund); background: rgba(247, 244, 238, 0.1); }
.wo-geschichte-bild img { aspect-ratio: 4 / 5; }
.wo-geschichte-text { display: grid; gap: 1.4rem; }
.wo-geschichte-text .fliesstext { color: var(--auf-gruen-leise); max-width: 38rem; }

/* Schiefer */
.wo-schiefer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.wo-schiefer > * { min-width: 0; }
.wo-schiefer-text { display: grid; gap: 1.4rem; justify-items: start; }
.wo-schiefer-text p { font-size: 1.12rem; max-width: 36rem; }
.wo-schiefer-bild { margin: 0; }
.wo-schiefer-bild img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--rund); background: var(--linie); }

/* Lagen als ruhige Balken */
.wo-lagen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.wo-lagen > * { min-width: 0; }
.wo-lagen-kopf { display: grid; gap: 1.2rem; }
.wo-lagen-kopf p { max-width: 30rem; }
.lagen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.lagen-liste li { display: grid; gap: 0.55rem; padding-bottom: 1.6rem; border-bottom: 1px solid rgba(247, 244, 238, 0.16); }
.lage-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.lage-zeile h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.lage-ha { font-variant-numeric: tabular-nums; color: var(--auf-gruen); font-weight: 600; white-space: nowrap; }
.lage-balken { height: 8px; border-radius: 999px; background: rgba(247, 244, 238, 0.12); overflow: hidden; }
.lage-balken i { display: block; height: 100%; width: calc(var(--anteil) * 100%); border-radius: inherit; background: var(--gold); }
.lagen-liste p { font-size: 0.98rem; }
.wo-quelle { margin: 1.4rem 0 0; font-size: var(--groesse-klein); }

/* Jahr im Weinberg */
.wo-jahr { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.2rem); }
.wo-jahr li { position: relative; display: grid; align-content: start; gap: 0.5rem; padding: clamp(1.3rem, 2.4vw, 1.8rem); border-radius: var(--rund-klein); background: var(--rose); }
.wo-jahr li.jetzt { background: var(--weiss); box-shadow: inset 0 0 0 1.5px var(--gruen); }
.wo-monate { font-size: var(--groesse-klein); color: var(--stein); font-weight: 600; }
.wo-jahr h3 { font-size: 1.35rem; }
.wo-jahr li > p:last-child { color: var(--stein); font-size: 0.98rem; }
.wo-jetzt { justify-self: start; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--gruen); color: var(--auf-gruen); font-size: var(--groesse-mini); font-weight: 600; }

/* Terroir */
.wo-terroir { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.wo-terroir > * { min-width: 0; }
.wo-terroir-text { display: grid; gap: 1.4rem; }
.wo-terroir-text .fliesstext { font-size: 1.08rem; max-width: 38rem; }
.wo-terroir-bild { margin: 0; }
.wo-terroir-bild img { aspect-ratio: 3 / 4; background: var(--linie); }

/* Anfahrt nutzt das Kartenlayout der Startseite */
.wo-anfahrt .mosel-text h2 { max-width: 22ch; }

@media (max-width: 1100px) {
  .wo-jahr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .wo-chronik, .wo-geschichte, .wo-schiefer, .wo-lagen, .wo-terroir { grid-template-columns: minmax(0, 1fr); }
  .wo-chronik-kopf { position: static; }
  .wo-geschichte-bild, .wo-terroir-bild, .wo-schiefer-bild { max-width: 30rem; }
  .wo-geschichte-bild img { aspect-ratio: 4 / 3; }
  .wo-terroir-bild img { aspect-ratio: 4 / 3; }
}
@media (max-width: 700px) {
  .wo-band img { aspect-ratio: 16 / 9; }
  .wo-jahr { grid-template-columns: minmax(0, 1fr); }
  .zeitleiste li { grid-template-columns: 3.6rem minmax(0, 1fr); gap: 0 1.6rem; }
  .zeitleiste li::before { left: calc(3.6rem + 0.8rem - 0.5px); }
  .zeitleiste li::after { left: calc(3.6rem + 0.8rem - 5px); }
  .zeitleiste .jahr { font-size: 1.15rem; }
}

/* Mosel und Schiefer: Originalfotos mit ruhiger Tiefe beim Scrollen. */
.wo-terroir-abschnitt { scroll-margin-top:110px; }
.wo-terroir-abschnitt .wo-terroir { max-width:68rem; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(2.6rem,7vw,6rem); }
.wo-terroir-abschnitt .wo-terroir-bild { position:relative; width:calc(100% - 1.5rem); margin:0 0 1.8rem 1.5rem; }
.wo-terroir-panorama { position:relative; aspect-ratio:4 / 5; border-radius:var(--rund); overflow:hidden; background:var(--mosel); }
.wo-terroir-bild .wo-terroir-foto { position:absolute; left:0; top:-34px; width:100%; height:calc(100% + 68px); aspect-ratio:auto; border-radius:0; object-fit:cover; transform:translate3d(0,var(--parallax-y,0px),0); }
.wo-terroir-bild .wo-terroir-schiefer { position:absolute; left:-9%; bottom:-7%; display:block; width:46%; height:auto; aspect-ratio:1; border:8px solid var(--gruen); border-radius:50%; object-fit:cover; background:var(--gruen); }
.wo-terroir-abschnitt .wo-terroir-text .fliesstext { color:var(--auf-gruen-leise); }
.preis-mwst { margin:0; color:var(--stein); font-size:.78rem; line-height:1.4; }
@media (max-width:860px) {
 .wo-terroir-abschnitt .wo-terroir { grid-template-columns:minmax(0,1fr); gap:2.8rem; }
 .wo-terroir-abschnitt .wo-terroir-bild { max-width:28rem; }
 .wo-terroir-panorama { aspect-ratio:4 / 3; }
 .wo-terroir-bild .wo-terroir-schiefer { width:40%; bottom:-9%; border-width:6px; }
}
@media (prefers-reduced-motion:reduce) {
 .wo-terroir-bild .wo-terroir-foto { transform:none; }
}

/* Gemeinsamer Kontaktbereich — Ortsplan, Kontaktdaten und Formular. */
.kontakt-bereich { padding-block:clamp(2.5rem,5vw,4.5rem); border-top:1px solid var(--linie-stark); background:#f1eee7; position:relative; }
.kontakt-anker { position:absolute; top:0; scroll-margin-top:110px; }
.kontakt-bereich .kontakt { gap:clamp(1.5rem,4vw,3.5rem); grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.kontakt-kicker { color:var(--gold-text); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; }
.kontakt-bereich h2 { font-size:clamp(1.8rem,3vw,2.55rem); line-height:1.08; max-width:15ch; }
.kontakt-bereich .kontakt-info { gap:.75rem; }
.kontakt-bereich .kontakt-daten { grid-template-columns:1fr 1fr; gap:.75rem 1rem; padding-top:.9rem; margin-top:.15rem; }
.kontakt-bereich .kontakt-daten > :first-child { grid-column:1/-1; }
.kontakt-bereich .kontakt-daten p { font-size:.95rem; }
.kontakt-bereich .kontakt-karte { padding:clamp(1.15rem,2.5vw,1.8rem); box-shadow:none; border:1px solid var(--linie-stark); }
.kontakt-kurz { margin-top:.4rem; font-size:.95rem; }
.kontakt-map { margin-top:.25rem; }
.kontakt-ortsplan .karte-flaeche { height:260px; border:1px solid var(--linie-stark); border-radius:var(--rund); overflow:hidden; background:#faf8f2; }
.kontakt-ortsplan .karte-svg { height:260px; width:100%; }
.kontakt-ortsplan .karte-detail { border-radius:0; box-shadow:none; background:#faf8f2; }
.kontakt-ortsplan .karte-leiste { justify-content:flex-start; margin-top:.6rem; }
.kontakt-ortsplan .karte-leiste .knopf { padding:.45rem .75rem; font-size:.8rem; min-height:36px; }
.kontakt-ortsplan .karte-quelle { top:auto; bottom:.4rem; left:.4rem; font-size:.6rem; }
.kontakt-ortsplan .karte-gross { top:.5rem; bottom:auto; right:.5rem; font-size:.75rem; border-radius:5px; box-shadow:none; border:1px solid var(--linie-stark); }
.kontakt-ortsplan .karte-dorf .d-ort { font-size:30px; }
.kontakt-ortsplan .karte-dorf .d-name { font-size:21px; }
.kontakt-ortsplan .karte-dorf .d-adresse { font-size:25px; }
.wix-formular { margin-top:1rem; gap:.8rem 1rem; }
.wix-formular label > span:first-child { font-size:.84rem; }
.wix-formular input,.wix-formular select,.wix-formular textarea { padding:.58rem .65rem; font-size:.95rem; }
.formular-datenschutz { font-size:.76rem; line-height:1.5; color:var(--stein); }
.formular-fehler,.formular-feldfehler { color:#93432f; font-size:.8rem; }
.formular-feldfehler { margin-top:.2rem; }
.formular-falle { position:absolute!important; width:1px!important; height:1px!important; left:-10000px!important; overflow:hidden; }
.formular-erfolg { padding:2rem 0; display:grid; gap:1rem; }
.formular-erfolg h4 { font-family:var(--schrift-titel); font-weight:400; font-size:1.8rem; }
.formular-erfolg-symbol { width:2.8rem; height:2.8rem; border:1px solid var(--gruen); color:var(--gruen); display:grid; place-items:center; border-radius:50%; }
@media(max-width:860px){.kontakt-bereich .kontakt { grid-template-columns:minmax(0,1fr); }.kontakt-bereich h2{max-width:22ch;}.kontakt-ortsplan .karte-flaeche,.kontakt-ortsplan .karte-svg{height:240px;}}
.kontakt-ortsplan .karte-dorf .d-ort { font-size:42px; letter-spacing:.06em; }
.kontakt-ortsplan .karte-dorf .d-name { font-size:35px; letter-spacing:0; }
.kontakt-ortsplan .karte-dorf .d-adresse { font-size:39px; }
.kontakt-ortsplan:not(.nah) .karte-flaeche,.kontakt-ortsplan:not(.nah) .karte-svg { height:560px; }