/* Wiener Kräutermanufaktur – Design-Tokens 1:1 aus dem WordPress-Original übernommen */
@font-face{font-family:'Playfair Display';src:url('/fonts/PlayfairDisplay-Regular.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url('/fonts/OpenSans-Variable.woff2') format('woff2-variations'),url('/fonts/OpenSans-Variable.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap}

:root{
  --gruen:#0a5720;
  --gruen-dunkel:#083f18;
  --navy:#0f2434;
  --text:#1b2126;
  --text-leise:#3f464c;
  --grau:#f8f8f8;
  --gruen-blass:#eef4ec;
  --linie:#e6e6e6;
  --schatten:0 0 12px rgba(0,0,0,.09);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Open Sans',Helvetica,Arial,sans-serif;
  --breite:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--text);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.72}
img{max-width:100%;height:auto;display:block}
a{color:var(--gruen);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.3;margin:0 0 .6em}
h1{font-size:30px;color:var(--gruen)}
h2{font-size:24px;color:var(--navy)}
h3{font-size:20px;color:var(--navy)}
p{margin:0 0 1.2em}
ul{margin:0 0 1.2em;padding-left:1.3em}
li{margin-bottom:.35em}

.wrap{max-width:var(--breite);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Kopfbereich ---------- */
.site-header{background:#fff;border-bottom:1px solid var(--linie)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px}
.logo{font-family:var(--serif);font-size:22px;color:var(--gruen);text-decoration:none;white-space:nowrap}
.logo:hover{text-decoration:none}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--text)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--gruen);text-decoration:none}
.nav .btn-outline{border:1px solid var(--gruen);color:var(--gruen);padding:11px 16px}
.nav .btn-outline:hover{background:var(--gruen);color:#fff}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--gruen);margin:4px 0}

/* ---------- Buttons ---------- */
.btn{display:inline-block;background:var(--gruen);color:#fff;font-size:18px;letter-spacing:2px;text-transform:uppercase;padding:18px 25px;border:0}
.btn:hover{background:var(--gruen-dunkel);color:#fff;text-decoration:none}
.btn[aria-disabled="true"]{background:#c9ccce;cursor:not-allowed;pointer-events:none}

/* ---------- Hero ---------- */
.hero{position:relative;background:#330066;background-size:cover;background-position:center;color:#fff}
.hero::after{content:"";position:absolute;inset:0;background:rgba(40,10,70,.25)}
.hero .wrap{position:relative;z-index:1;padding-top:70px;padding-bottom:70px}
.hero h1{color:#fff;font-size:32px;margin-bottom:.8em}
.hero p{color:#fff;margin-bottom:.5em}
.seiten-titel{background:var(--gruen);color:#fff}
.seiten-titel h1{color:#fff;margin:0;padding:18px 0;font-size:26px}

/* ---------- Inhaltsabschnitte ---------- */
.abschnitt{padding:60px 0}
.abschnitt--grau{background:var(--grau)}
.abschnitt-titel{text-align:center;margin-bottom:40px;font-size:26px;color:var(--navy)}

.info-karte{display:flex;gap:30px;background:#fff;box-shadow:var(--schatten);padding:34px 38px;margin-bottom:26px}
.info-karte .icon{flex:0 0 auto;width:56px;color:var(--gruen)}
.info-karte .icon svg{width:56px;height:56px;stroke:var(--gruen);fill:none;stroke-width:1.7}
.info-karte h2{color:var(--gruen);font-size:21px;margin-bottom:.7em}
.info-karte p:last-child{margin-bottom:0}

/* ---------- Terminraster ---------- */
.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px}
.termin{position:relative;display:flex;flex-direction:column}
.termin__bild{margin:0}
.termin__bild img{width:100%;aspect-ratio:1080/630;object-fit:cover;object-position:center}
.termin__karte{background:#fff;box-shadow:var(--schatten);padding:24px 22px 20px;margin:-34px 22px 0 0;flex:1;display:flex;flex-direction:column;z-index:1}
/* z-index statt position:relative, und zwar aus zwei Gruenden zugleich.
   Erstens muss die weisse Flaeche ueber dem Bild liegen: Bilder sind
   Inline-Inhalt und werden nach den Hintergruenden der Bloecke gezeichnet,
   die Dokumentreihenfolge allein genuegt also nicht. Zweitens darf die Karte
   kein Bezugspunkt fuer absolut positionierte Kinder werden, sonst deckt die
   Klickflaeche des Titellinks das Bild nicht mit ab.
   Ein Flex-Element darf einen z-index tragen, ohne positioniert zu sein.
   Genau das loest beides. */
.termin__titel{font-size:19px;margin-bottom:.5em}
.termin__titel a{color:var(--navy)}
.termin__titel a:hover{color:var(--gruen);text-decoration:none}
.termin__meta{font-size:14.5px;color:var(--gruen);margin:0 0 .8em;font-weight:600}
.termin__teaser{font-size:15px;line-height:1.62;color:var(--text);margin-bottom:1.2em}
.termin__pfeil{margin-top:auto;align-self:flex-end;font-size:22px;line-height:1;color:var(--text);transition:color .15s,transform .15s}
.badge{display:block;width:-moz-fit-content;width:fit-content;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:3px 9px;border:1px solid currentColor;margin:9px 0 0}
.badge--ausgebucht{color:#7a2020}
.badge--vorbei{color:var(--text-leise)}
.termin--vergangen .termin__bild img{filter:saturate(.55)}

/* ---------- Einzelseite Termin ---------- */
.beitrag-bild img{width:100%;max-height:420px;object-fit:cover}
.beitrag{max-width:760px;margin:0 auto;padding:46px 20px 10px}
.beitrag h1{margin-bottom:1em}
.eckdaten{background:#fff;box-shadow:var(--schatten);padding:28px 30px;margin:34px 0}
.eckdaten__zeile{font-family:var(--serif);font-size:19px;color:var(--navy);margin:0 0 .35em}
.eckdaten__ort{font-size:15px;color:var(--text-leise);margin-bottom:1.2em}
.buchung{margin:34px 0 10px}
.buchung__hinweis{color:var(--text-leise);font-style:italic}

/* ---------- Autorin ---------- */
.autorin{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:center}
.autorin img{border-radius:4px}
.autorin h2{font-size:22px;color:var(--navy);line-height:1.45}
.sozial{display:flex;gap:14px;margin:0 0 18px}
.sozial a{color:var(--gruen);font-size:0}
.sozial svg{width:19px;height:19px;fill:currentColor}

/* ---------- Fußbereich ---------- */
.site-footer{background:var(--grau);border-top:1px solid var(--linie);padding:26px 0;text-align:center;font-size:14px;color:var(--text-leise)}
.site-footer a{color:var(--text-leise)}
.site-footer a:hover{color:var(--gruen)}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--linie);padding:14px 0}
.faq summary{font-family:var(--serif);font-size:18px;color:var(--navy);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--gruen)}
.faq details[open] summary::after{content:"–"}

/* ---------- Responsiv ---------- */
@media (max-width:900px){
  .raster{grid-template-columns:repeat(2,1fr)}
  .autorin{grid-template-columns:1fr;gap:26px}
  .autorin img{max-width:300px}
}
@media (max-width:640px){
  .raster{grid-template-columns:1fr;gap:30px}
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:66px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:10px 20px 18px;border-bottom:1px solid var(--linie);z-index:20}
  .nav.offen{display:flex}
  .nav a{padding:11px 0;width:100%}
  .nav .btn-outline{margin-top:8px;text-align:center}
  .site-header .wrap{position:relative}
  .info-karte{flex-direction:column;gap:14px;padding:26px 24px}
  .hero .wrap{padding-top:48px;padding-bottom:48px}
  .hero h1{font-size:25px}
  .abschnitt{padding:44px 0}
  .termin__karte{margin-right:0}
}

/* ---------- Nachtraege Generator ---------- */
.wrap--schmal{max-width:760px}
.beitrag__zurueck{margin-top:40px;font-size:15px}
.faq{margin:10px 0 30px}
.faq__antwort{padding-top:6px}
.faq__antwort p{margin-bottom:0;font-size:15.5px;color:var(--text-leise)}
.termin__meta--offen{color:var(--text-leise);font-style:normal}
.termin--offen .termin__bild img{filter:saturate(.72)}
.eckdaten p:last-child{margin-bottom:0}
.eckdaten ul{margin-bottom:0}
.hero{background-repeat:no-repeat}
.seiten-titel .wrap{padding-top:0;padding-bottom:0}

/* Vorschau-Raster zeigen nur die naechsten Termine. Die Auswahl trifft
   events.js durch die Sortierung, die Begrenzung macht das Stylesheet. */
.raster--vorschau > *:nth-child(n+4){display:none}
.raster--start > *:nth-child(n+6):not(.termin--gutschein){display:none}
@media (max-width:900px){
  .raster--vorschau > *:nth-child(n+3){display:none}
  .raster--start > *:nth-child(n+4):not(.termin--gutschein){display:none}
}
@media (max-width:640px){
  .raster--vorschau > *:nth-child(n+3){display:none}
  .raster--start > *:nth-child(n+3):not(.termin--gutschein){display:none}
}

/* Bis events.js sortiert hat, bleibt die Reihenfolge des Dokuments sichtbar.
   Kein Layoutsprung, weil nur Text nachgetragen wird. */
.termin__meta:empty{min-height:1.4em}

/* ---------- Ueberarbeitung: Lesbarkeit und Zwischenueberschriften ---------- */

/* Zwischenueberschriften im Fliesstext: H2 in der Titelschrift und Grün,
   H3 in der Textschrift, kleiner und halbfett. Damit sind die beiden Ebenen
   klar zu unterscheiden, ohne dass eine davon wie eine Überschrift zweiter
   Wahl aussieht. */
.beitrag h2{font-family:var(--serif);font-weight:500;font-size:25px;color:var(--gruen);
  margin:1.9em 0 .55em;line-height:1.3}
.beitrag h3{font-family:var(--sans);font-weight:600;font-size:17px;color:var(--text);
  letter-spacing:.005em;margin:1.7em 0 .5em;line-height:1.45}
.beitrag h2:first-child,.beitrag h3:first-child{margin-top:0}
.beitrag h2 + h3{margin-top:1.1em}

/* Einleitungssatz einer Seite: deutlich, aber keine Überschrift. */
.beitrag__lead{font-size:18px;font-weight:600;color:var(--navy);line-height:1.55;
  margin-bottom:1.5em}

/* Textblock, der links mit dem Raster abschliesst statt mittig zu stehen. */
.textblock{max-width:760px}

.faq summary{font-family:var(--sans);font-weight:600;font-size:16.5px;color:var(--text)}
.faq__antwort p{font-size:16px;color:var(--text-leise)}

@media (max-width:640px){
  .beitrag h2{font-size:22px}
  .beitrag h3{font-size:16.5px}
  .beitrag__lead{font-size:17px}
}

/* ---------- Symbole aus der Lucide-Sammlung ---------- */
/* Lucide ist auf 24 Pixel bei Strichstaerke 2 gezeichnet. Bei 56 Pixel
   Darstellung waere das viel zu fett, deshalb wird die Staerke hier
   heruntergerechnet. */
.info-karte .icon svg{stroke-width:1.35}
.termin__titel .icon{display:inline-block;vertical-align:-3px;margin-right:9px}
.termin__titel .icon svg{width:21px;height:21px;stroke:var(--gruen);stroke-width:1.7}

/* ---------- Gutschein als Karte im Terminraster ---------- */
.termin--gutschein .termin__karte{background:var(--gruen-blass);border-top:2px solid var(--gruen)}
.termin__aktion{margin:auto 0 0;padding-top:6px}
.btn--klein{font-size:14px;letter-spacing:1.5px;padding:13px 18px}
.beitrag__stand{margin-top:2.4em;font-size:14px;color:var(--text-leise)}

/* ---------- Ganze Terminkarte anklickbar ---------- */
/* Der Titellink spannt eine unsichtbare Flaeche ueber die gesamte Karte.
   Dadurch bleibt es ein einziger Link im Dokument: kein verschachteltes
   a-Element, keine doppelten Ziele fuer Vorlesesoftware, kein JavaScript. */
.termin{position:relative}
.termin__titel a::after{content:"";position:absolute;inset:0;z-index:2}
.termin:has(.termin__titel a){cursor:pointer}

.termin:has(.termin__titel a):hover .termin__karte{box-shadow:0 4px 22px rgba(0,0,0,.16)}
.termin:has(.termin__titel a):hover .termin__titel a{color:var(--gruen)}
.termin:has(.termin__titel a):hover .termin__pfeil{color:var(--gruen);transform:translateX(4px)}
.termin__titel a{transition:color .15s}
.termin__karte{transition:box-shadow .18s}

/* Tastaturbedienung: der Rahmen gehoert um die ganze Karte, nicht nur um den
   Titel, weil die Karte als Ganzes das Ziel ist. */
.termin:has(.termin__titel a:focus-visible){outline:3px solid var(--gruen);outline-offset:3px}
.termin__titel a:focus-visible{outline:none}

/* Rueckfallebene ohne :has() */
@supports not selector(:has(*)){
  .termin__titel a:focus-visible{outline:3px solid var(--gruen);outline-offset:3px}
}