/* Ergaenzungen fuer den Webseiten-Ausbau A+B (21.07.2026).
   Das ausgelagerte Basis-CSS (site.css) bleibt zeichengleich zur
   freigegebenen Startseite - alles Neue steht hier. */

/* --- Karte ohne Foto: Signet statt Bild ------------------------------- */
.pic-signet{display:flex;align-items:center;justify-content:center;
  background:var(--salbei-100,#e9efe7);min-height:220px;aspect-ratio:4/3}
.pic-signet .brand-signet{width:74px;height:auto;opacity:.5}

/* --- Abschnitts-Ueberschriften in Listen ------------------------------ */
.gebiet{font-family:var(--display);font-weight:400;font-size:1.5rem;
  color:var(--tiefgruen);margin:2.4em 0 .9em;padding-top:.7em;
  border-top:1px solid var(--greige)}
.gebiet:first-of-type{margin-top:1.6em}

/* --- Schlanke Karte (Weingut-Uebersicht) ------------------------------ */
.card-schlank .txt{padding:26px 28px}
.card-schlank h3{margin:0 0 .25em}

/* --- Fliessender Hinweis --------------------------------------------- */
.hinweis{margin-top:2.6em;font-size:.86rem;color:var(--tinte);line-height:1.7}
.hinweis a{color:var(--akzent-tief)}

/* --- Bildband auf Unterseiten ----------------------------------------- */
.bildband{margin:2.2em 0 .6em;border-radius:12px;overflow:hidden}
.bildband img{width:100%;height:auto;display:block}

/* --- Artikelliste mit Aufklappen (ohne JavaScript) -------------------- */
.artikelliste{border-top:1px solid var(--greige)}
.artikel{border-bottom:1px solid var(--greige)}
.artikel summary{cursor:pointer;list-style:none;padding:.95em .2em;
  font-family:var(--display);font-size:1.16rem;color:var(--tiefgruen);
  display:flex;justify-content:space-between;align-items:center;gap:1em}
.artikel summary::-webkit-details-marker{display:none}
.artikel summary::after{content:"+";color:var(--akzent);font-size:1.35rem;
  line-height:1;flex:0 0 auto}
.artikel[open] summary::after{content:"\2013"}
.artikel summary:hover{color:var(--akzent)}
.artikel summary:focus-visible{outline:2px solid var(--akzent);
  outline-offset:3px;border-radius:4px}
.artikeldetail{padding:0 .2em 1.15em}
.artikeldetail dl{display:grid;grid-template-columns:max-content 1fr;
  gap:.35em 1.5em;margin:0;font-size:.94rem}
.artikeldetail dt{color:var(--tinte);text-transform:uppercase;
  letter-spacing:.08em;font-size:.7rem;font-weight:600;padding-top:.3em}
.artikeldetail dd{margin:0;color:var(--tiefgruen)}

/* --- Mehrspaltiger Textblock ----------------------------------------- */
.zweispalt{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:2.2em 2.8em;margin:2.8em 0}
.zweispalt h3{font-family:var(--display);font-weight:400;font-size:1.32rem;
  color:var(--tiefgruen);margin:0 0 .4em}
.zweispalt p{margin:0}

/* --- Anfrage-Kasten --------------------------------------------------- */
.anfrage{background:var(--salbei-100,#e9efe7);border-radius:12px;
  padding:2.1em 2.3em;margin:2.6em 0}
.anfrage h3{font-family:var(--display);font-weight:400;font-size:1.42rem;
  margin:0 0 .35em;color:var(--tiefgruen)}
.anfrage .hinweis{margin-top:1.4em}
.kontaktzeile{font-size:1.05rem;line-height:2.1}
.kontaktzeile a{color:var(--akzent-tief);text-underline-offset:3px}

/* --- Aktiver Navigationspunkt ---------------------------------------- */
.nav nav a[aria-current="page"]{color:var(--akzent-tief)}
.nav nav a[aria-current="page"]:not(.navcta){border-bottom:1.5px solid var(--salbei)}

@media (max-width:640px){
  .anfrage{padding:1.5em 1.4em}
  .artikel summary{font-size:1.06rem}
}

/* --- Rechtstexte (Impressum, Datenschutz) ----------------------------- */
.disclaimer,.tip{background:var(--salbei-100,#e9efe7);
  border-left:3px solid var(--salbei);border-radius:0 8px 8px 0;
  padding:.9em 1.2em;margin:1.6em 0;font-size:.93rem}
/* Warnhinweis abgesetzt, aber ohne Gold - die CI kennt nur Salbei und Grau */
.disclaimer{background:#f0efe9;border-left-color:var(--taupe,#9a988f)}
main .wrap h1{font-family:var(--display);font-weight:400;font-size:2.6rem;
  color:var(--tiefgruen);margin:.2em 0 .6em}
main .wrap h2{font-family:var(--display);font-weight:400;font-size:1.5rem;
  color:var(--tiefgruen);margin:1.9em 0 .4em}

/* --- Weiterfuehrender Link in Sortiment-Karten ------------------------ */
.mehr{margin-top:1.1em;font-size:.92rem}
.mehr a{color:var(--akzent-tief);text-decoration:none;font-weight:500}
.mehr a:hover{text-decoration:underline;text-underline-offset:3px}

/* --- Ortszeile unter einem Marken-/Erzeugernamen ---------------------- */
.ortszeile{display:block;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--tinte);margin:-.2em 0 .55em}

/* ======================================================================
   Korrekturen am Basis-CSS. Es bleibt zeichengleich zur freigegebenen
   Fassung; was daran nicht mehr stimmt, wird hier ueberschrieben.
   ====================================================================== */

/* 1) Kartenraster fuer beliebig viele Karten.
      Das Basis-CSS setzt .cards fest auf drei Spalten. Die Sortiments-
      uebersicht hat vier Karten, die Erzeugerliste je nach Anbaugebiet
      eine bis vier - fest drei Spalten laesst einzelne Karten als Drittel
      im leeren Raum stehen. */
.cards-flex{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}

/* 2) Schlanke Karte ohne Bild - das Basis-CSS nennt den Textblock .body */
.card-schlank .body{padding:26px 30px 28px}
.card-schlank h3{margin:0 0 .25em}
.card-schlank p{margin:0}
a.card{text-decoration:none;color:inherit;display:block}

/* 3) Navigation auf dem Handy.
      Das Basis-CSS blendet unter 820 px ALLE Menuepunkte ausser der
      Schaltflaeche aus. Solange die Seite ein Einseiter war, fiel das kaum
      auf - mit echten Unterseiten waere sie auf dem Handy unerreichbar.
      Loesung ohne JavaScript: die Leiste bricht in eine zweite Zeile um. */
@media(max-width:820px){
  .nav .bar{flex-wrap:wrap;height:auto;padding:10px 20px 12px;
    justify-content:space-between;row-gap:6px}
  .nav nav{order:3;width:100%;gap:0;justify-content:space-between;
    flex-wrap:wrap;row-gap:8px}
  .nav nav a:not(.navcta){display:inline-block;font-size:13.5px;
    padding:4px 0}
  .nav .navcta{padding:7px 16px;font-size:12.5px}
  .nav .brand .logo{height:40px}
}
@media(max-width:420px){
  .nav nav a:not(.navcta){font-size:12.5px}
}

/* --- WhatsApp-Schaltflaeche ------------------------------------------- */
/* Bewusst in den Markenfarben (Salbei/Tiefgruen) statt im WhatsApp-Gruen -
   die CI kennt nur Salbei und Grau. Erkennbar bleibt sie ueber das Zeichen. */
.wa{display:inline-flex;align-items:center;gap:10px;
  background:var(--salbei-700,#5f7a5c);color:var(--weiss,#fff);
  padding:12px 22px;border-radius:999px;text-decoration:none;
  font-size:.95rem;font-weight:500;line-height:1;
  box-shadow:0 6px 20px rgba(95,122,92,.20);
  transition:background .25s,transform .25s,box-shadow .25s}
.wa:hover{background:var(--tiefgruen,#2f3a31);transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(95,122,92,.32)}
.wa:active{transform:translateY(0)}
.wa:focus-visible{outline:2px solid var(--akzent,#96ad92);outline-offset:3px}
.wa svg{width:19px;height:19px;flex:0 0 auto;fill:currentColor}
/* In der Kontaktzeile laeuft sie als normaler Link mit, nicht als Knopf. */
.kontaktzeile .wa-link{color:var(--akzent-tief);text-underline-offset:3px;
  white-space:nowrap}
.kontaktzeile .wa-link svg{width:15px;height:15px;fill:currentColor;
  vertical-align:-2px;margin-right:4px}
/* Im Anfrage-Kasten steht sie als eigene Zeile ueber den anderen Wegen. */
.anfrage .wa{margin:.2em 0 1.1em}

/* 4) Reste der verworfenen Gold-CI.
      Die Marke kennt nur Salbei und Grau. Im Basis-CSS stecken noch ein
      goldener Atmosphaere-Kreis im Hero und ein goldener Schaltflaechen-
      Schatten - beide werden hier auf Salbei gezogen. */
.blob.b2{background:rgba(150,173,146,.30)}
.btn:hover{box-shadow:0 10px 28px rgba(95,122,92,.32)}