/* Heurigen Habacht – neue Marke: Rosé, Creme und warme Grautöne.
   Die Logopfade stammen aus den gelieferten Vektor-PDFs. */

:root {
  --dunkel:       #302c29;
  --sekundaer:    #61554e;
  --rose:         #e7beae;
  --creme:        #f8f6f1;
  --creme-tief:   #efece4;
  --akzent:       #945b4a;
  --rose-hell:    #f0d6ca;
  --tinte:        #302c29;
  --gedaempft:    #716b64;
  --linie:        #dfd8cf;
  --weiss:        #fff;

  --breite:       1180px;
  --breite-schmal: 760px;
  --radius:       4px;
  --schatten:     0 1px 2px rgba(48, 44, 41, .06), 0 8px 28px rgba(48, 44, 41, .07);

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--sekundaer); text-decoration-thickness: .07em; text-underline-offset: .18em; }
a:hover, a:focus-visible { color: var(--akzent); }

:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--dunkel); color: var(--weiss);
  padding: .75rem 1.25rem; text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.wrap-schmal { width: min(100% - 2.5rem, var(--breite-schmal)); margin-inline: auto; }

.abschnitt { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.abschnitt--creme { background: var(--creme); }
.abschnitt--gruen { background: var(--dunkel); color: var(--creme); }
.abschnitt--gruen h2, .abschnitt--gruen h3 { color: var(--weiss); }
.abschnitt--gruen a:not(.knopf) { color: var(--rose); }
.abschnitt--gruen a:not(.knopf):hover { color: var(--rose-hell); }

.augenbraue {
  font-family: var(--sans);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--akzent); margin: 0 0 .9rem;
}
.abschnitt--gruen .augenbraue { color: var(--rose); }

.vorspann { font-size: 1.15rem; color: var(--gedaempft); max-width: 62ch; }
.abschnitt--gruen .vorspann { color: #d5cec5; }

/* ---------- Buttons ---------- */

.knopf {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.6rem;
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  border: 2px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.knopf--voll { background: var(--rose); color: var(--dunkel); border-color: var(--rose); }
.knopf--voll:hover, .knopf--voll:focus-visible { background: var(--rose-hell); border-color: var(--rose-hell); color: var(--dunkel); }
.knopf--linie { background: transparent; color: var(--weiss); border-color: rgba(255,255,255,.65); }
.knopf--linie:hover, .knopf--linie:focus-visible { background: rgba(255,255,255,.14); border-color: var(--weiss); color: var(--weiss); }
.knopf--dunkel { background: var(--dunkel); color: var(--weiss); border-color: var(--dunkel); }
.knopf--dunkel:hover, .knopf--dunkel:focus-visible { background: var(--akzent); border-color: var(--akzent); color: var(--weiss); }

/* ---------- Kopfbereich ---------- */

.kopf {
  position: fixed; inset: 0 0 auto; z-index: 50;
  max-width: 100vw;
  background: var(--dunkel);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.kopf-innen {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
  display: flex; align-items: center; gap: 1.25rem;
  padding: .75rem 0;
}
.marke { flex: 0 0 auto; }
.marke img { width: 220px; transition: width .25s ease; }

.kopf-tel {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--weiss); text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: .5rem .95rem; border: 1.5px solid rgba(255,255,255,.5); border-radius: var(--radius);
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.kopf-tel:hover, .kopf-tel:focus-visible { background: var(--weiss); color: var(--dunkel); border-color: var(--weiss); text-shadow: none; }
.kopf-tel svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

/* fixierter Zustand nach dem Scrollen */
.kopf.ist-fest { background: var(--dunkel); box-shadow: 0 2px 18px rgba(0,0,0,.18); }
.kopf.ist-fest .marke img { width: 190px; }

.menue-knopf { display: none; }

/* ---------- Bühne ---------- */

.buehne {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex; align-items: flex-end;
  padding: 9rem 0 clamp(3rem, 6vw, 5rem);
  background: var(--dunkel) center/cover no-repeat;
  color: var(--weiss);
}
.buehne-bild, .buehne-bild img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.buehne-bild img { object-fit: cover; }
.buehne::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(36,30,27,.62) 0%, rgba(36,30,27,.28) 38%, rgba(36,30,27,.82) 100%);
}
.buehne > .wrap { position: relative; z-index: 1; }

.buehne h1 {
  font-size: clamp(2.6rem, 6.5vw, 4.6rem);
  color: var(--weiss);
  margin: 0 0 .35em;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
  max-width: 16ch;
}
.buehne-unterzeile {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  max-width: 46ch; color: #efece4;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
  margin-bottom: 2rem;
}
.buehne-knoepfe { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Statusplakette – die Kernfrage jedes Heurigengasts */
.status {
  display: inline-flex; align-items: center; gap: .3rem .8rem;
  background: rgba(248,246,241,.94);
  color: var(--dunkel);
  padding: .7rem 1.25rem .7rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  font-size: .96rem;
}
/* Punkt und Titel bleiben zusammen, wenn die Zeile umbricht. */
.status-titel { display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; }
.status-punkt {
  width: 11px; height: 11px; border-radius: 50%;
  background: #4e8b2c; flex: none;
  box-shadow: 0 0 0 4px rgba(78,139,44,.28);
}
.status-punkt--zu { background: #a8452e; box-shadow: 0 0 0 4px rgba(168,69,46,.25); }
.status strong { font-weight: 700; }
.status span { color: var(--gedaempft); }

/* ---------- Willkommen ---------- */

.zwei-spalten {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
/* align-self verhindert, dass der Rasterplatz auf volle Zeilenhoehe
   gestreckt wird – sonst laeuft der Zierrahmen unter dem Bild weiter. */
.bild-rahmen { position: relative; align-self: center; }
.bild-rahmen img { border-radius: var(--radius); box-shadow: var(--schatten); }
.bild-rahmen::before {
  content: ""; position: absolute;
  inset: 1.5rem -1.5rem -1.5rem 1.5rem;
  border: 2px solid var(--rose);
  border-radius: var(--radius); z-index: -1;
}

.generationen { display: flex; gap: 2.5rem; margin-top: 2.25rem; flex-wrap: wrap; }
.generation-zahl {
  font-family: var(--serif); font-size: 2.4rem; line-height: 1;
  color: var(--akzent); display: block;
}
.generation-text { font-size: .9rem; color: var(--gedaempft); }

/* ---------- Termine ---------- */

.termin-liste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1.1rem; margin-top: 2.75rem;
}
.termin {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.5rem 1.4rem;
}
.termin-monat {
  font-size: .75rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gedaempft); margin: 0 0 .5rem;
}
.termin-spanne { font-family: var(--serif); font-size: 1.4rem; line-height: 1.25; margin: 0; }
.termin-jetzt {
  border-color: var(--dunkel); background: var(--dunkel); color: var(--creme);
  box-shadow: var(--schatten);
}
.termin-jetzt .termin-monat { color: var(--rose); }
.termin-marke {
  display: inline-block; margin-top: .85rem;
  background: var(--rose); color: var(--dunkel);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 3px;
}
.termin-vorbei { opacity: .55; }
.termin-fuss { margin-top: 1.75rem; font-size: 1.05rem; }

/* ---------- Galerie ---------- */

.galerie {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .7rem; margin-top: 2.75rem;
}
.galerie img {
  width: 100%; border-radius: var(--radius);
  aspect-ratio: 3 / 2; object-fit: cover;
}
/* Grosse Kachel spannt zwei Spalten und zwei Zeilen – die Hoehe ergibt
   sich aus den Nachbarzeilen, daher kein eigenes Seitenverhaeltnis. */
.galerie .galerie-gross { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; height: 100%; }

/* ---------- Sortiment ---------- */

.sortiment {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem; margin-top: 2.75rem;
}
.sorte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.9rem 1.6rem; display: flex; flex-direction: column;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sorte:hover { border-color: var(--rose); transform: translateY(-3px); box-shadow: var(--schatten); }
.sorte h3 { margin-bottom: .4rem; }
.sorte p { font-size: .95rem; color: var(--gedaempft); flex: 1; }
.sorte-link {
  font-size: .9rem; font-weight: 600; text-decoration: none;
  margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .4rem;
}
.sorte-link::after { content: "→"; transition: transform .18s ease; }
.sorte:hover .sorte-link::after { transform: translateX(3px); }

.produkte {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 1.5rem 1rem; margin-top: 2.5rem;
}
.produkt { text-align: center; }
.produkt img { margin: 0 auto .7rem; max-height: 155px; width: auto; }
.produkt-name { overflow-wrap: anywhere; hyphens: auto; font-size: .88rem; font-weight: 600; line-height: 1.35; }

/* ---------- Verkauf ---------- */

.vorteile {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2rem; margin-top: 2.75rem;
}
.vorteil-titel {
  font-family: var(--serif); font-size: 1.2rem; margin: 0 0 .45rem; color: var(--weiss);
}
.vorteil p { font-size: .96rem; color: #d5cec5; }

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

.kontakt-raster {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.kontakt-zeile { display: flex; gap: .9rem; margin-bottom: 1.4rem; align-items: flex-start; }
.kontakt-zeile svg { width: 20px; height: 20px; fill: var(--akzent); flex: none; margin-top: .2rem; }
.kontakt-zeile div { line-height: 1.5; }
.kontakt-marke { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gedaempft); display: block; }

/* ---------- Fuß ---------- */

.fuss { background: var(--dunkel); color: #d5cec5; padding: 3.5rem 0 2rem; font-size: .92rem; }
.fuss a { color: #d5cec5; }
.fuss a:hover { color: var(--rose); }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.fuss h3 { font-size: 1rem; color: var(--weiss); font-family: var(--sans); font-weight: 700; letter-spacing: .04em; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .45rem; }
.fuss-unten {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .85rem;
}
.fuss-logo { width: 240px; margin-bottom: 1.5rem; }

/* ---------- Schmal ---------- */

@media (max-width: 900px) {
  .zwei-spalten, .kontakt-raster { grid-template-columns: 1fr; }
  .bild-rahmen::before { display: none; }
  .fuss-raster { grid-template-columns: 1fr; gap: 2rem; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .galerie .galerie-gross { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; height: auto; }
}

@media (max-width: 1100px) {
  body { font-size: 16px; }

  .menue-knopf {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-left: auto;
    background: none; border: 1.5px solid rgba(255,255,255,.5); border-radius: var(--radius);
    color: var(--weiss); font: inherit; font-size: .9rem; font-weight: 600;
    padding: .5rem .9rem; cursor: pointer;
  }
  .kopf.ist-fest .menue-knopf { text-shadow: none; }

  .kopf-tel span { display: none; }
  .kopf-tel { padding: .5rem; }

  .buehne { min-height: 0; padding-top: 7.5rem; }
  .status { flex-wrap: wrap; border-radius: var(--radius); }
  .buehne-knoepfe .knopf { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Joomla-Anbindung und Unterseiten ---------- */

:root { --content-width: var(--breite); --akzent-dunkel: #794738; }
.content-width { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.buehne-inhalt { position: relative; z-index: 1; }
.buehne:not(.buehne--gross) { min-height: 380px; padding-bottom: 3rem; }
.buehne:not(.buehne--gross) h1 { font-size: clamp(2.3rem, 5.5vw, 4.4rem); max-width: 20ch; }
.kopf-facebook { color: var(--weiss); line-height: 0; }
.kopf-facebook svg { width: 21px; height: 21px; fill: currentColor; }
.kopf-facebook:hover { color: var(--rose); }
.kopf-tel { white-space: nowrap; }
.marke { line-height: 0; }


/* Ausstecktermin-Modul in der Bühne: zur Plakette verdichtet.
   Das Modul (habacht-term) liefert im zweiten div vier Absätze –
   Termin, Zeiten, Adresse, Kontakt. In der Bühne zeigen wir nur die ersten beiden. */
.buehne-status { margin-bottom: 1.5rem; }
.buehne-status .habacht-term {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem;
  background: rgba(248,246,241,.94);
  color: var(--dunkel);
  padding: .7rem 1.3rem;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  font-size: .96rem;
}
.buehne-status .habacht-term > div { display: contents; }
.buehne-status .habacht-term h2 {
  font-family: var(--sans); font-size: .96rem; font-weight: 700;
  margin: 0; color: var(--dunkel);
  display: inline-flex; align-items: center; gap: .6rem;
}
.buehne-status .habacht-term h2::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  background: #4e8b2c; box-shadow: 0 0 0 4px rgba(78,139,44,.28); flex: none;
}
.buehne-status .habacht-term p { margin: 0; }
.buehne-status .habacht-term p:nth-of-type(n+3) { display: none; }
.buehne-status .habacht-term p:nth-of-type(2) { color: var(--gedaempft); }
.buehne-status .habacht-term a { color: inherit; }

@media (max-width: 1100px) {
  .buehne-status .habacht-term { border-radius: var(--radius); }
}


/* ---------- Inhalt ---------- */

.main-content { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem); }

/* Die Seitenüberschrift steht bereits als H1 in der Bühne. Der Beitragskopf
   wuerde sie sonst ein zweites Mal ausgeben. */
.item-page > .page-header { display: none; }

/* Autor, Kategorie, Datum, Zugriffe und die Blätter-Navigation gehören auf
   einer Heurigenseite nicht in den Inhalt. Gehört zusätzlich im Backend unter
   Beiträge → Optionen abgeschaltet – hier steht nur der Riegel dafür, dass es
   im Entwurf nicht auftaucht. */
.item-page .article-info,
.item-page .pagenavigation { display: none; }

.com-content-article__body > *:first-child { margin-top: 0; }
.com-content-article__body h2,
.com-content-article__body h3 { margin-top: 2em; }
.com-content-article__body h2:first-child,
.com-content-article__body h3:first-child { margin-top: 0; }
.com-content-article__body ul, .com-content-article__body ol { padding-left: 1.3em; }
.com-content-article__body li { margin-bottom: .35em; }
.com-content-article__body img { border-radius: var(--radius); margin: 1.75rem 0; }

/* Alte Joomla-3-Reste im Fliesstext neutralisieren */
.com-content-article__body [style*="font-family"] { font-family: var(--sans) !important; }
.com-content-article__body [style*="font-size"] { font-size: inherit !important; }

/* Lesbare Zeilenlänge im reinen Fliesstext */
.route-heurigen-ueber-uns .com-content-article__body,
.route-impressum .com-content-article__body,
.route-datenschutz .com-content-article__body { max-width: 72ch; }

/* ---------- Galerie ---------- */

.galerie-block { background: var(--creme); padding: clamp(3.5rem, 8vw, 6rem) 0; margin-top: clamp(3.5rem, 8vw, 6rem); }
.galerie {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .7rem; margin-top: 2.25rem;
}
.galerie img {
  border-radius: var(--radius);
  aspect-ratio: 3 / 2; object-fit: cover; width: 100%;
  transition: transform .4s ease;
}
.galerie img:hover { transform: scale(1.03); }
/* Grosse Kachel spannt zwei Spalten und zwei Zeilen – die Hoehe ergibt
   sich aus den Nachbarzeilen, daher kein eigenes Seitenverhaeltnis. */
.galerie .galerie-gross { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; height: 100%; }

/* ---------- Bausteine für Beitragsinhalte ---------- */
/* Diese Klassen liegen im Template bereit; die Startseite und die
   Sortimentsseiten können sie im Beitragstext direkt verwenden. */

/* Randloses Farbband aus dem Beitragstext heraus. Der Block sprengt die
   Inhaltsbreite bis zum Fensterrand und rueckt seinen Inhalt wieder ein. */
.band {
  margin-inline: calc(50% - 50vw);
  padding: clamp(3rem, 7vw, 5rem) calc(50vw - 50%);
  margin-block: clamp(3rem, 7vw, 5rem);
}
.band > *:first-child { margin-top: 0; }
.band > *:last-child { margin-bottom: 0; }
.band--creme { background: var(--creme); }
.band--gruen { background: var(--dunkel); color: var(--creme); }
.band--gruen h2, .band--gruen h3 { color: var(--weiss); }
.band--gruen a:not(.knopf) { color: var(--rose); }
.band--gruen .karte { background: transparent; border-color: rgba(255,255,255,.22); }
.band--gruen .karte:hover { border-color: var(--rose); box-shadow: none; }
.band--gruen .karte p { color: #d5cec5; }

/* Zweispalter Text/Bild fuer Beitraege */
.text-bild {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  margin: 2rem 0;
}
.text-bild > *:first-child > *:first-child { margin-top: 0; }
.text-bild img { border-radius: var(--radius); box-shadow: var(--schatten); margin: 0; }

/* Eckdaten-Reihe, z. B. Jahreszahlen der Betriebsgeschichte */
.kennzahlen { display: flex; gap: 2.5rem; flex-wrap: wrap; margin: 2.25rem 0; }
.kennzahl-wert { font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--akzent); display: block; }
.kennzahl-text { font-size: .9rem; color: var(--gedaempft); }
.band--gruen .kennzahl-wert { color: var(--rose); }
.band--gruen .kennzahl-text { color: #d5cec5; }

.termin-liste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1.1rem; margin: 2rem 0;
}
.termin { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem 1.4rem; }
.termin-monat { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gedaempft); margin: 0 0 .5rem; }
.termin-spanne { font-family: var(--serif); font-size: 1.4rem; line-height: 1.25; margin: 0; }
.termin-jetzt { border-color: var(--dunkel); background: var(--dunkel); color: var(--creme); box-shadow: var(--schatten); }
.termin-jetzt .termin-monat { color: var(--rose); }
.termin-marke {
  display: inline-block; margin-top: .85rem;
  background: var(--rose); color: var(--dunkel);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 3px;
}
.termin-vorbei { opacity: .55; }

.karten-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem; margin: 2rem 0;
}
.karte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.9rem 1.6rem;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.karte:hover { border-color: var(--rose); transform: translateY(-3px); box-shadow: var(--schatten); }
.karte h3 { margin-bottom: .4rem; }
.karte p { font-size: .95rem; color: var(--gedaempft); }

.hinweis-block {
  background: var(--dunkel); color: var(--creme);
  border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 2.75rem);
  margin: 2.5rem 0;
}
.hinweis-block h2, .hinweis-block h3 { color: var(--weiss); }
.hinweis-block a:not(.knopf) { color: var(--rose); }

/* ---------- Sortiment: bestehende Bootstrap-Reste aus den Beiträgen ---------- */

#productlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2rem 1.25rem; margin-top: 1.5rem; align-items: start; }
#productlist .row { display: contents; }
/* Die Spalten enthalten Name und Bild in dieser Reihenfolge; als Flex-Spalte
   lässt sich das Bild ohne Eingriff in den Beitragstext nach oben holen. */
#productlist [class*="col-"] { display: flex; flex-direction: column; text-align: center; }
#productlist [class*="col-"] > h4 { order: 2; }
/* Das alte Bootstrap-Raster nutzt leere Spalten als Platzhalter, um Reihen
   einzurücken. Im Grid hinterlassen sie nur eine Lücke. */
#productlist [class*="col-"]:not(:has(img)) { display: none; }
#productlist h4 { font-family: var(--sans); font-size: .9rem; font-weight: 600; margin: .7rem 0 0; }
#productlist img { margin: 0 auto; max-height: 165px; width: auto; border-radius: 0; }
#productlist .text-centered { text-align: center; }

/* ---------- Fehlerseite ---------- */

.fehler-inhalt { padding: 10rem 0 6rem; text-align: center; }
.fehler-code {
  font-family: var(--serif); font-size: clamp(4rem, 14vw, 8rem);
  line-height: 1; color: var(--rose); margin: 0 0 .25em;
}
.fehler-inhalt h1 { margin-bottom: .5em; }


/* ---------- Schmal ---------- */

@media (max-width: 900px) {
  .text-bild { grid-template-columns: 1fr; }
  .fuss-raster { grid-template-columns: 1fr; gap: 2rem; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .galerie .galerie-gross { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; height: auto; }
}

@media (max-width: 1100px) {
  body { font-size: 16px; }

  .menue-knopf {
    display: inline-flex; align-items: center;
    margin-left: auto;
    background: none; border: 1.5px solid rgba(255,255,255,.5); border-radius: var(--radius);
    color: var(--weiss); font: inherit; font-size: .9rem; font-weight: 600;
    padding: .5rem .9rem;
  }

  .kopf-tel span { display: none; }
  .kopf-tel { padding: .5rem; }
  .kopf-facebook { display: none; }

  .buehne, .buehne--gross { min-height: 0; padding-top: 7.5rem; }
  .buehne-knoepfe .knopf { flex: 1 1 auto; justify-content: center; }

  /* Untereinander gestapelt brauchen die Eckdaten deutlich weniger Luft. */
  .kennzahlen { gap: 1.25rem; }
  .kennzahl-wert { font-size: 1.9rem; }
}

/* Startseite folgt den Abstaenden des freigegebenen Entwurfs. */
.main-content--startseite { padding: 0; }
.main-content--startseite .termin-liste,
.main-content--startseite .galerie { margin-top: 2.75rem; }
.main-content--startseite .termin-spanne { font-size: 1.3rem; }
.main-content--startseite .termin-liste { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.beitrag-text p:last-child { margin-bottom: 0; }
.aktuell-inhalt { max-width: var(--breite-schmal); margin: 2rem auto 0; }
.aktuell-inhalt img { max-width: 100%; height: auto; }
.aktuell-inhalt hr { border: 0; border-top: 1px solid var(--linie); margin: 2.5rem 0; }
.aktuelles + #termine { border-top: 1px solid var(--linie); }
.verkauf-links { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.5rem; }
.fuss .fuss-logo { width: 240px; margin-bottom: 1.5rem; }
.fuss h2 { font-size: 1rem; font-family: var(--sans); color: var(--weiss); margin-bottom: .8rem; }
.fuss-unten nav ul { display: flex; gap: 1.25rem; }
.fuss-unten nav li { margin: 0; }
.fuss-unten { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.buehne-status .habacht-term h2::before { background: var(--akzent); box-shadow: 0 0 0 4px rgb(148 91 74 / 22%); }
.buehne-status .habacht-term.hat-termin h2::before { background: #4e8b2c; box-shadow: 0 0 0 4px rgb(78 139 44 / 28%); }
.buehne-status .habacht-term p:nth-of-type(2) { max-width: 50ch; }
.buehne-status .habacht-term { border-radius: 4px; }
.buehne-status .habacht-term > div:last-child { display: flex; flex-wrap: wrap; gap: .3rem .8rem; }
/* Verlinkte Weinkarten ohne Produktbild duerfen nicht ausgeblendet werden. */
.route-sortiment-weine #productlist [class*="col-"]:not(:has(img)) { display: block; }
.route-sortiment-weine #productlist { display: block; }
.route-sortiment-weine .com-content-article__body a[href$=".pdf"] { display: inline-flex; padding: .85rem 1.6rem; background: var(--dunkel); color: var(--weiss); border-radius: var(--radius); }
@media (max-width: 1100px) {
  .kopf-facebook { display: none; }
  .buehne, .buehne:not(.buehne--gross) { min-height: 0; padding-top: 7.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Einheitliche Navigation ---------- */
.kopf-nav { margin-left: auto; }
.kopf-nav ul { list-style: none; padding: 0; margin: 0; }
.kopf-nav > ul { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.8rem); }
.kopf-nav .nav-item { position: relative; }
.kopf-nav > ul > li > a,
.kopf-nav > ul > li > .mod-menu__toggle-sub {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  box-sizing: border-box; min-height: 44px; margin: 0; padding: .55rem 0;
  appearance: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--weiss); font: 500 .95rem/1.4 var(--sans);
  text-decoration: none; text-shadow: 0 1px 8px rgb(0 0 0 / 40%); cursor: pointer;
  transition: border-color .18s, color .18s;
}
.kopf-nav .mod-menu__heading { color: inherit; font: inherit; line-height: inherit; }
.kopf-nav > ul > li > a:hover,
.kopf-nav > ul > li > a:focus-visible,
.kopf-nav > ul > .active > a,
.kopf-nav > ul > .active > .mod-menu__toggle-sub,
.kopf-nav > ul > li > .mod-menu__toggle-sub[aria-expanded="true"] { border-bottom-color: var(--rose); }
.kopf-nav .icon-chevron-down { display: inline-grid; flex: 0 0 .65rem; width: .65rem; height: .65rem; place-items: center; }
/* Nur den gezeichneten Pfeil drehen, nicht zusätzlich den Joomla-Icon-Container. */
.kopf-nav .mod-menu__toggle-sub .icon-chevron-down { transform: none; }
.kopf-nav .icon-chevron-down::before {
  content: ""; display: block; width: .4rem; height: .4rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transform-origin: center; transition: transform .18s;
}
.kopf-nav [aria-expanded="true"] .icon-chevron-down::before { transform: rotate(225deg); }
.kopf-nav .mod-menu__sub {
  position: absolute; top: calc(100% + .6rem); left: -1rem; z-index: 2;
  display: none; min-width: 250px; padding: .55rem;
  border: 1px solid var(--linie); border-radius: 8px;
  background: var(--creme); box-shadow: 0 18px 42px rgb(48 44 41 / 22%);
}
.kopf-nav .mod-menu__sub::before { content: ""; position: absolute; inset: -.7rem 0 100%; }
.kopf-nav .mod-menu__toggle-sub[aria-expanded="true"] + .mod-menu__sub { display: block; }
.kopf-nav .mod-menu__sub a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 44px; padding: .7rem .8rem; border: 0; border-radius: 4px;
  color: var(--dunkel); font: 500 .95rem/1.4 var(--sans); text-decoration: none; text-shadow: none;
  transition: background .18s, color .18s;
}
.kopf-nav .mod-menu__sub a::after { content: "→"; color: var(--akzent); }
.kopf-nav .mod-menu__sub a:hover,
.kopf-nav .mod-menu__sub a:focus-visible { background: #f0e1da; color: var(--dunkel); }
.kopf-nav .mod-menu__sub .current > a { background: #f0e1da; }
.kopf.ist-fest .kopf-nav > ul > li > a,
.kopf.ist-fest .kopf-nav > ul > li > button,
.kopf.ist-fest .kopf-tel { text-shadow: none; }

/* ---------- Gestaltete Inhaltsseiten ---------- */
.site:not(.ist-startseite) .main-content { background: var(--creme); }
.unterseite { min-width: 0; }
.unterseite h2 { margin: 0 0 1.1rem; }
.unterseite h3 { margin: 0 0 .8rem; }
.seiten-einleitung { margin-bottom: 2.75rem; max-width: 65ch; }
.lesetext { line-height: 1.8; overflow-wrap: anywhere; }
.lesetext > p { margin: 0 0 1.2rem; }
.lesetext > p:last-child { margin-bottom: 0; }
.lesetext a { font-weight: 600; }
.lesetext a[href$=".pdf"] {
  display: inline-flex; align-items: center; gap: .75rem; margin-top: .5rem;
  padding: .85rem 1.2rem; background: var(--dunkel); border-radius: var(--radius);
  color: var(--weiss); font-size: .95rem; text-decoration: none;
}
.lesetext a[href$=".pdf"]::after { content: "↓"; color: var(--rose); }
.lesetext a[href$=".pdf"]:hover { background: var(--sekundaer); }
.verkaufsbereiche { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.verkaufsbereich { padding: clamp(1.5rem, 3.5vw, 3rem); background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; }
.verkaufsbereich > h2 { font-size: clamp(1.7rem, 3vw, 2.25rem); }
.verkaufsbereich .lesetext > p:has(> strong:only-child):not(:has(a)) { padding: 1rem 1.2rem; border-left: 3px solid var(--akzent); background: var(--creme); }
.verkaufsbereich--versand { grid-column: 1 / -1; }
.versand-schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; row-gap: 2rem; }
.versand-vorspann { grid-column: 1 / -1; max-width: 76ch; }
.versand-schritt { border-top: 1px solid var(--linie); padding-top: 1.5rem; min-width: 0; }
.schritt-nummer { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--creme); color: var(--akzent); font: 600 1.1rem var(--serif); margin-bottom: 1rem; }
.versand-schritt h3 { font-size: 1.45rem; }
.versand-schritt .lesetext { font-size: .96rem; }
.kontakt-band { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 3rem; padding: clamp(1.5rem, 3.5vw, 3rem); background: var(--dunkel); border-radius: 8px; color: var(--creme); }
.kontakt-band h2 { margin: 0; color: var(--weiss); font-size: clamp(1.5rem, 2.6vw, 2rem); }
.kontakt-band .augenbraue { color: var(--rose); }
.aktionslinks { display: flex; flex-wrap: wrap; gap: .8rem; flex-shrink: 0; }
.terminjahr { padding: clamp(1.5rem, 3vw, 2.5rem); margin-top: 1.5rem; border: 1px solid var(--linie); border-radius: 8px; background: var(--weiss); }
.terminjahr > h3 { font: 600 2.1rem/1.2 var(--serif); color: var(--akzent); }
.terminjahr .termin-liste { margin: 1.5rem 0 0; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
.terminjahr .termin:not(.termin-jetzt) { background: var(--creme); }
.produktkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.produktkarte { min-width: 0; overflow: hidden; background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; }
.produktkarte-bild { display: grid; place-items: center; min-height: 300px; padding: 2rem; border-bottom: 1px solid var(--linie); }
.produktkarte-bild img { width: auto; max-width: 100%; max-height: 230px; margin: 0; border-radius: 0; }
.produktkarte-text { padding: 1.4rem 1.6rem; }
.produktkarte-text h3 { font: 600 1.25rem/1.4 var(--serif); overflow-wrap: anywhere; hyphens: auto; margin: 0 0 .4rem; }
.produktkarte-text p { margin: 0; color: var(--gedaempft); font-size: .95rem; }
.produkt-zusatz { margin-top: 2rem; }
.seiten-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 5vw, 4rem); }
.seiten-text { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; }
.seiten-text > .augenbraue { line-height: 1.5; }
.seiten-text h2 { line-height: 1.2; }
.seitenbild { margin: 0; overflow: hidden; border-radius: 8px; }
.seitenbild img { display: block; width: 100%; height: auto; margin: 0; }
.seiten-aside { display: grid; gap: 1.5rem; }
.besuchskarte { padding: 2rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; }
.besuchskarte a { overflow-wrap: anywhere; }
.besuchskarte .knopf { margin-top: 1rem; }
.weinbereich { align-items: center; padding: clamp(1.5rem, 4vw, 3.5rem); background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; }
.weinbereich .wein-verkauf { margin-top: 1.5rem; }
.wein-inhalt #productlist [class*="col-"] { text-align: left; }
.rechtstext { max-width: 78ch; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--linie); border-top: 3px solid var(--akzent); border-radius: 4px; background: var(--weiss); }
.rechtstext h3, .rechtstext h4 { margin-top: 2rem; }
.route-heurigen-kulinarik .main-content { padding-bottom: 0; }
.route-heurigen-kulinarik .galerie-block { background: var(--weiss); }

@media (max-width: 1100px) {
  .kopf-nav { position: absolute; inset: 100% 0 auto; margin: 0; padding: 0 1.25rem; background: var(--dunkel); max-height: 0; overflow: hidden; transition: max-height .25s; }
  .kopf-nav.ist-offen { max-height: calc(100dvh - 90px); padding-block: .75rem; overflow-y: auto; box-shadow: 0 12px 20px rgb(0 0 0 / 15%); }
  .kopf-nav > ul { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .kopf-nav > ul > li { border-bottom: 1px solid rgb(255 255 255 / 12%); }
  .kopf-nav > ul > li:last-child { border-bottom: 0; }
  .kopf-nav > ul > li > a, .kopf-nav > ul > li > .mod-menu__toggle-sub { display: flex; justify-content: space-between; width: 100%; padding: .85rem 0; text-shadow: none; }
  .kopf-nav .mod-menu__sub { position: static; min-width: 0; margin: .3rem 0 1rem; padding: .4rem; box-shadow: none; }
  .kopf-nav .mod-menu__sub::before { display: none; }
  .versand-schritte { gap: 1.5rem; }
  .kontakt-band { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 760px) {
  .verkaufsbereiche, .seiten-raster, .versand-schritte { grid-template-columns: minmax(0, 1fr); }
  .produktkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .produktkarte-bild { min-height: 210px; padding: 1.25rem; }
  .produktkarte-bild img { max-height: 170px; }
  .produktkarte-text { padding: 1rem; }
  .produktkarte-text h3 { font-size: 1.1rem; }
  .aktionslinks { flex-shrink: 1; width: 100%; }
  .aktionslinks .knopf { justify-content: center; flex: 1 1 auto; }
  .terminjahr .termin-liste { grid-template-columns: minmax(0, 1fr); }
}

/* Neue Wort-/Bildmarke: stabile Lesbarkeit auf dunklen Flächen. */
.kopf .marke img { flex: none; }
.kopf :focus-visible, .fuss :focus-visible { outline-color: var(--rose); }
.kopf-nav .mod-menu__sub :focus-visible { outline-color: var(--akzent); }
@media (max-width: 1260px) {
  .bild-rahmen::before { right: -1rem; }
}
@media (max-width: 1100px) {
  .kopf-innen { gap: .8rem; }
  .marke img, .kopf.ist-fest .marke img { width: 170px; }
}
@media (max-width: 380px) {
  .marke img, .kopf.ist-fest .marke img { width: 150px; }
  .kopf-innen { gap: .6rem; }
  .menue-knopf { padding-inline: .7rem; }
}