/* Weingut Graßmück · Inhaltsseiten (Weingut, Weinberge, Herstellung, Auszeichnungen, Besuch, Veranstaltungen). Tokens aus site.css. */

/* Wappen-Block (Weingut) */
.wappen-block { display: grid; justify-items: center; gap: 18px; padding: clamp(24px, 3vw, 40px); background: var(--anthrazit); border-radius: var(--r-karte); color: var(--auf-dunkel-2); text-align: center; }
.wappen-block img { width: min(100%, 240px); }
.wappen-block figcaption { font-size: var(--t-klein); max-width: 36ch; }

/* Familie: großes Bild, Text, kleines Bild versetzt */
.familie { display: grid; gap: clamp(24px, 3vw, 48px); align-items: start; }
@media (min-width: 900px) {
  .familie { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto; }
  .familie__gross { grid-row: 1 / span 2; aspect-ratio: 1466 / 1536; }
  .familie__klein { align-self: end; }
}
.familie__gross { aspect-ratio: 1466 / 1536; }
.ansprechpartner { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 28px; padding: 18px; background: var(--papier); border-radius: var(--r-karte); }
.ansprechpartner__bild { border-radius: 50%; }
.ansprechpartner b { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 500; }
.ansprechpartner .meta { display: block; margin: 2px 0 var(--s2); }

/* Bildpaar (zwei Hochformate, versetzt) */
.bildpaar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.bildpaar .medium:last-child { margin-top: 18%; }

.siegelreihe--gross { justify-content: flex-start; gap: 28px; }
.siegelreihe--gross img { height: 150px; }
@media (max-width: 640px) { .siegelreihe--gross img { height: 96px; } }

/* Lage (Weinberge) */
.lage__kopf { display: grid; gap: 20px var(--s6); align-items: center; margin-bottom: 28px; }
@media (min-width: 900px) { .lage__kopf { grid-template-columns: 180px minmax(0, 1fr) auto; } }
.lage__form { width: 180px; height: auto; }
.lage__form { overflow: visible; }
.lage__fakten { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin: var(--s3) 0 0; }
.lage__fakten div { display: grid; }
.lage__fakten dt { font-size: var(--t-mini); color: var(--text-3); }
.lage__fakten dd { margin: 0; font-weight: 600; }
.lage__knopf { justify-self: start; }
.lage .slider__spur { --spalte: calc((100% - 3 * 24px) / 4); }
@media (max-width: 1100px) { .lage .slider__spur { --spalte: calc((100% - 2 * 20px) / 3); } }
@media (max-width: 760px) { .lage .slider__spur { --spalte: 72%; } .lage__form { width: 140px; } }

/* Ablauf (Herstellung): Zeitstrahl mit Symbolen, Linie zeichnet sich */
.ablauf { --n: 5; position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--s5); }
.ablauf::before { content: ""; position: absolute; left: 28px; right: 28px; top: 28px; height: 1px; background: var(--linie); }
.ablauf::after { content: ""; position: absolute; left: 28px; right: 28px; top: 28px; height: 1px; background: var(--verlauf-gold); transform-origin: 0 50%; transition: transform 1600ms var(--einaus); }
.js .ablauf[data-strahl]:not(.is-da)::after { transform: scaleX(0); }
.ablauf__schritt { position: relative; display: grid; gap: 10px; align-content: start; }
.ablauf__punkt { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--weiss); border: 1px solid var(--gold-tief); color: var(--gold-tief); }
.ablauf__punkt .i { width: 26px; height: 26px; }
.ablauf__schritt h3 { font-size: 1.35rem; margin-top: var(--s2); }
.ablauf__schritt p { font-size: var(--t-klein); color: var(--text-2); margin: 0; }
@media (max-width: 900px) {
  .ablauf { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ablauf::before, .ablauf::after { left: 28px; right: auto; top: 28px; bottom: 28px; width: 1px; height: auto; }
  .ablauf::after { transform-origin: 50% 0; }
  .js .ablauf[data-strahl]:not(.is-da)::after { transform: scaleY(0); }
  .ablauf__schritt { grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; }
  .ablauf__punkt { grid-row: 1 / span 2; }
  .ablauf__schritt h3 { margin-top: var(--s3); }
}
@media (prefers-reduced-motion: reduce) { .js .ablauf[data-strahl]::after { transform: none !important; } }

/* Auszeichnungen */
.galerie { list-style: none; margin: 0; padding: 0; }
.galerie li { display: grid; gap: 6px; align-content: start; }
.urkunde__shop { font-size: var(--t-klein); }

/* Besuch: Anfahrt + Karte nach Klick */
.anfahrt { display: grid; gap: clamp(24px, 3vw, 56px); align-items: stretch; }
@media (min-width: 960px) { .anfahrt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.karte-zweiklick { position: relative; min-height: 420px; display: grid; place-items: center; padding: 28px; border-radius: var(--r-karte); background: var(--flaeche); overflow: hidden; isolation: isolate; }
.karte-zweiklick::before { content: ""; position: absolute; inset: 0; z-index: -2; background:
  repeating-linear-gradient(-32deg, transparent 0 14px, rgb(155 129 88 / .12) 14px 15px), radial-gradient(60% 60% at 50% 50%, #fff, var(--flaeche)); }
.karte-zweiklick__wappen { position: absolute; right: 24px; bottom: 20px; width: 120px; opacity: .18; z-index: -1; }
.karte-zweiklick__text { max-width: 420px; padding: var(--s5); background: var(--weiss); border-radius: var(--r-karte); box-shadow: var(--schatten-1); display: grid; gap: 10px; justify-items: start; }
.karte-zweiklick__text p { margin: 0; }
.karte-zweiklick.is-geladen { padding: 0; }
.karte-zweiklick.is-geladen iframe { min-height: 420px; }

/* Veranstaltungen */
.vkopf { position: relative; background: var(--anthrazit); color: var(--auf-dunkel); }
.vkopf__bild { position: relative; margin: 0; aspect-ratio: 16 / 9; max-height: 58vh; width: 100%; overflow: hidden; background: #111; }
.vkopf__bild img { width: 100%; height: 100%; object-fit: cover; }
.vkopf__credit { position: absolute; right: calc((100% - min(100% - 2 * var(--rand), var(--wrap))) / 2); bottom: 10px;   /* auf der rechten Content-Kante, nie unter der Schnellleiste */ padding: 3px 10px; border-radius: var(--r-rund); background: rgb(18 18 17 / .7); color: var(--auf-dunkel); font-size: 12px; }
.vkopf__text { padding-block: clamp(32px, 4vw, 56px); }
.vkopf__text h1 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.8rem); margin-top: 10px; }
.vkopf__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: 18px; font-size: var(--t-klein); color: var(--auf-dunkel-2); }
.vkopf__meta span { display: inline-flex; gap: var(--s2); align-items: center; }
.vkopf__meta .i { color: var(--gold); }
.vkopf .knopfreihe { margin-top: 28px; }
.vorschau-band { position: sticky; top: var(--kopf-h); z-index: 30; padding: 10px 0; background: var(--gold); color: var(--anthrazit); font-weight: 600; font-size: var(--t-klein); text-align: center; }
.v-inhalt { display: grid; gap: clamp(32px, 4vw, 64px); align-items: start; }
@media (min-width: 1024px) { .v-inhalt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.programm { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.programm__tag { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px; padding: 18px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); }
.programm__datum { display: grid; justify-items: center; align-content: center; gap: 0; padding: 10px 6px; border-radius: var(--r-knopf); background: var(--anthrazit); color: var(--auf-dunkel); text-align: center; }
.programm__datum b { font-family: var(--serif); font-size: 2rem; font-weight: 500; line-height: 1; font-variant-numeric: lining-nums; }
.programm__datum span { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-hell); }
.programm__eintrag { display: grid; gap: var(--s1); align-content: center; }
.programm__eintrag h3:not(:first-child) { margin-top: 14px; padding-top: var(--s4); border-top: 1px solid var(--linie); }   /* zwei Acts an einem Tag */
.programm__eintrag h3 { font-size: 1.45rem; }
.programm__zeit { font-weight: 600; font-variant-numeric: tabular-nums; }
.programm__notiz { font-size: var(--t-klein); color: var(--text-3); }
.programm__logo { max-height: 46px; width: auto; max-width: 150px; object-fit: contain; margin-top: 6px; }
.programm__logo--hell { background: var(--anthrazit); padding: 6px 10px; border-radius: var(--r-knopf); }
.v-seite .rahmen { position: sticky; top: calc(var(--kopf-h) + 20px); }
.partner-raster { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.partner { display: grid; gap: 10px; align-content: start; padding: 20px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); }
.partner img { max-height: 56px; width: auto; max-width: 180px; object-fit: contain; }
.partner--hell img { background: var(--anthrazit); padding: var(--s2) var(--s3); border-radius: var(--r-knopf); }
.partner h3 { font-size: 1.3rem; }
.partner p { font-size: var(--t-klein); color: var(--text-2); margin: 0; }
.sponsoren { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(46%, 150px), 1fr)); list-style: none; margin: 0; padding: 0; }
.sponsoren a, .sponsoren span.sponsor { display: grid; place-items: center; height: 96px; padding: 14px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); text-decoration: none; transition: border-color var(--d2) var(--aus); }
.sponsoren a:hover { border-color: var(--gold-tief); }
.sponsoren img { max-height: 60px; max-width: 100%; width: auto; object-fit: contain; }
.sponsoren .ist-hell { background: var(--anthrazit); }
.v-galerie { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(46%, 220px), 1fr)); list-style: none; margin: 0; padding: 0; }
.v-galerie a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-karte); background: var(--flaeche); }
.v-galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d4) var(--aus); }
.v-galerie a:hover img { transform: scale(1.03); }
.v-md p, .v-md ul { margin: 0 0 1em; }
.v-md ul { padding-left: 1.2em; }
.v-md a { color: var(--gold-text); }
.archiv { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.archiv li { border-bottom: 1px solid var(--linie); }
.archiv a { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: var(--s4) var(--s1); text-decoration: none; transition: background-color var(--d2) var(--aus); }
.archiv a:hover { background: var(--weiss); }
.archiv time { font-size: var(--t-klein); color: var(--text-3); font-variant-numeric: tabular-nums; }
.archiv b { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; }
.archiv .i { color: var(--gold-tief); }
@media (max-width: 640px) { .archiv a { grid-template-columns: minmax(0, 1fr) auto; } .archiv time { grid-column: 1 / -1; } .programm__tag { grid-template-columns: 70px minmax(0, 1fr); } }