/* ===========================================================================
   kummertoni.at – Kummer Toni, Der Waldviertler Christbaumbauer
   Gestaltung v2 (10.09.2026)

   Alles leitet sich aus dem Logo ab: das gruene Dreieck, das weisse Diagonal-
   band mit der Wortmarke, das Rot der Unterzeile, das Braun des Stamms.
   Diese Formen kehren als Gestaltungsmittel wieder:
     - Dreieck   -> Aufzaehlungszeichen, Marker, Baumreihe als Abschnittswechsel
     - Diagonale -> Band hinter Auszeichnungen
     - Reisig    -> Girlande am oberen Rand (Kundenwunsch)
   =========================================================================== */

@font-face{font-family:'Petrona';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/petrona.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/manrope.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ------------------------------------------------------------- Tokens ---- */
:root{
  /* Logofarben */
  --tanne:#159a47;
  --tanne-btn:#0f7f39;       /* nur fuer Flaechen mit weisser Schrift: 5,1:1 statt 3,66:1 */
  --tanne-dk:#0b6c31;
  --tanne-lt:#4fc17a;
  --tanne-hell:#8fe3ab;
  --rot:#d33230;
  --rot-dk:#a81e1b;
  --rinde:#5a3031;
  --gold:#c9a227;

  /* Flaechen: waermer und mit mehr Tiefe als in Version 1 */
  --moos:#0e2a1a;            /* dunkles Tannengruen, Hauptdunkelton */
  --moos-2:#15381f;
  --moos-3:#1d4527;
  --creme:#fbf7f0;
  --sand:#f0e7d6;
  --sand-2:#e5d9c2;

  /* Schrift */
  --text:#1b2b20;
  --muted:#59685d;
  --hell-muted:rgba(255,255,255,.7);

  --ff-display:'Petrona',Georgia,'Times New Roman',serif;
  --ff-text:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --r-sm:10px; --r-md:18px; --r-lg:26px; --r-xl:38px;
  --ease:cubic-bezier(.22,.68,.28,1);
  --schatten:0 16px 44px rgba(14,42,26,.09);
  --schatten-hoch:0 30px 70px rgba(14,42,26,.17);
  --wrap:1220px;
  --kopf-h:78px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--kopf-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; color:var(--text); font-family:var(--ff-text);
  font-size:17px; line-height:1.72; font-weight:450;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background:
    radial-gradient(1100px 620px at 85% -8%, rgba(21,154,71,.06), transparent 62%),
    var(--creme);
}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit}
::selection{background:rgba(21,154,71,.24)}

h1,h2,h3,h4{font-family:var(--ff-display); margin:0 0 .5em; letter-spacing:-.022em}
h1{
  font-size:clamp(2.35rem,5.8vw,4.3rem); font-weight:500; line-height:1.05;
}
h2{
  font-size:clamp(1.8rem,3.8vw,2.85rem); font-weight:600; line-height:1.12;
}
h3{
  font-size:clamp(1.18rem,1.9vw,1.45rem); font-weight:650; line-height:1.25;
  letter-spacing:-.012em;
}
p{margin:0 0 1.05em}
:focus-visible{outline:3px solid var(--tanne); outline-offset:3px; border-radius:5px}
.site-foot :focus-visible,.hero :focus-visible,.sec--dunkel :focus-visible{outline-color:var(--tanne-hell)}

.wrap{width:min(100% - 2.4rem, var(--wrap)); margin-inline:auto}
.wrap--eng{width:min(100% - 2.4rem, 920px); margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:absolute; left:1rem; top:-100px; z-index:200; background:var(--tanne-btn); color:#fff;
  padding:.7rem 1.2rem; border-radius:0 0 var(--r-sm) var(--r-sm); transition:top .25s var(--ease);
}
.skip:focus{top:0}

/* ------------------------------------------------------------ Abschnitt -- */
section{position:relative}
/* Etwas dichter als in Fassung 2: die Abstaende waren so gross, dass jede
   Sektion fuer sich stand und die Seite auseinanderfiel. */
.sec{padding-block:clamp(3.4rem,6.2vw,5.8rem)}
.sec--eng{padding-block:clamp(2.4rem,4.4vw,3.8rem)}
.sec--sand{background:var(--sand)}
/* Der Aufheller setzt bewusst erst unterhalb der Oberkante an: oben muss die
   Flaeche genau den Ton der Baumsilhouette haben, die davorsteht. */
.sec--dunkel{
  background:
    radial-gradient(120% 75% at 20% 26%, rgba(31,74,45,.46), rgba(31,74,45,0) 62%),
    linear-gradient(168deg, var(--moos-2) 0%, var(--moos) 58%, #0a2114 100%);
  color:var(--hell-muted); overflow:hidden;
}
.sec--dunkel h2,.sec--dunkel h3{color:#fff}
.sec--dunkel .kicker{color:var(--tanne-hell)}
.sec--dunkel .lead{color:rgba(255,255,255,.72)}

/* Baumreihe als Uebergang: die Baeume wachsen aus dem dunklen Abschnitt in den
   hellen darueber hinein. Der Wechsel wird dadurch selbst zum Bild.
   Der Streifen steht als eigenes Element VOR dem dunklen Abschnitt - laege er
   darin, wuerde ihn dessen overflow:hidden abschneiden. Die Grafik traegt die
   dunkle Fuellung, die Hintergrundfarbe des Streifens ist der helle Abschnitt. */
.baumreihe{
  position:relative; z-index:1; height:62px; margin-bottom:-1px;
  background:var(--creme) url('../img/baumreihe.svg') repeat-x bottom center;
  background-size:auto 62px;
}
@media (max-width:640px){.baumreihe{height:44px; background-size:auto 44px}}
.baumreihe--sand{background-color:var(--sand)}
.baumreihe--weiss{background-color:#fff}

/* Reisig-Girlande am oberen Rand – der Wunsch des Kunden.
   Fassung 3: als Saum, nicht als Aufdruck. Vorher lag sie in kraeftigem Gruen
   ueber dem Bild und war das Erste, was man sah - das wirkte aufgeklebt. Jetzt
   ist sie dunkel, entsaettigt und laeuft nach unten weich aus; sie gehoert zum
   Bild, statt davor zu liegen. */
.girlande{
  position:absolute; left:0; right:0; top:0; height:112px; z-index:3; pointer-events:none;
  background:url('../img/girlande.svg') repeat-x top center; background-size:auto 112px;
  opacity:.42; filter:saturate(.28) brightness(.52);
  -webkit-mask-image:linear-gradient(to bottom, #000 18%, rgba(0,0,0,.45) 62%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 18%, rgba(0,0,0,.45) 62%, transparent 100%);
}
.girlande--schmal{height:76px; background-image:url('../img/girlande-schmal.svg'); background-size:auto 76px}
/* Auf hellem Grund braucht es weniger Abdunklung, sonst wird der Saum zum Fleck. */
.girlande--hell{opacity:.2; filter:saturate(.4) brightness(.72)}
@media (prefers-reduced-motion:no-preference){
  .girlande{animation:girlande-wiegen 13s ease-in-out infinite alternate; transform-origin:top center}
}
@keyframes girlande-wiegen{from{transform:translateY(0) rotate(-.2deg)} to{transform:translateY(4px) rotate(.2deg)}}
@media (max-width:640px){
  .girlande{height:94px; background-size:auto 94px}
  .girlande--schmal{height:62px; background-size:auto 62px}
}

.kopfzeile{max-width:60ch; margin-bottom:clamp(2rem,3.4vw,2.8rem)}
.kopfzeile--mitte{margin-inline:auto; text-align:center}
.kopfzeile--mitte h2{max-width:19ch; margin-inline:auto}
.kicker{
  display:inline-flex; align-items:center; gap:.6rem; margin:0 0 1rem;
  font-size:.73rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tanne-dk);
}
/* Das Logo-Dreieck als Zeichen vor der Rubrik */
.kicker::before{
  content:""; width:11px; height:10px; flex:none; background:currentColor;
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.lead{font-size:clamp(1.06rem,1.5vw,1.24rem); color:var(--muted); max-width:60ch; line-height:1.66}
.kopfzeile--mitte .lead{margin-inline:auto}

/* --------------------------------------------------------------- Knopf --- */
.btn{
  --bg:var(--tanne-btn); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95em 1.75em; border:1.5px solid transparent; border-radius:100px; cursor:pointer;
  background:var(--bg); color:var(--fg); font-weight:700; font-size:.97rem; letter-spacing:.004em;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background-color .3s ease, color .3s ease, border-color .3s ease;
  box-shadow:0 10px 26px rgba(11,108,49,.22);
}
.btn svg{width:18px; height:18px; flex:none; transition:transform .38s var(--ease)}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(105deg,var(--tanne-dk),var(--tanne) 55%,var(--tanne-lt));
  opacity:0; transition:opacity .35s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(11,108,49,.3)}
.btn:hover::before{opacity:1}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(0)}
.btn--rot{--bg:var(--rot); box-shadow:0 10px 26px rgba(168,30,27,.24)}
.btn--rot::before{background:linear-gradient(105deg,var(--rot-dk),var(--rot) 60%,#e2564f)}
.btn--rot:hover{box-shadow:0 16px 36px rgba(168,30,27,.32)}
.btn--hell{--bg:#fff; --fg:var(--moos); box-shadow:0 10px 26px rgba(0,0,0,.16)}
.btn--hell::before{background:linear-gradient(105deg,#fff,var(--sand))}
.btn--geist{--bg:transparent; --fg:currentColor; border-color:currentColor; box-shadow:none; opacity:.94}
.btn--geist::before{display:none}
/* Fehler in Fassung 3: der Knopf nahm im Hover die eigene Textfarbe als
   Flaeche und die Schrift wurde fest dunkelgruen gesetzt. Auf dunklem Grund
   ging das auf (weisse Flaeche, dunkle Schrift) - auf hellem Grund wurde die
   Flaeche dunkel und die Schrift blieb dunkel: der Knopf war unlesbar.
   Betroffen waren die zwoelf Knoepfe auf der Standortseite.
   Jetzt eine Toenung der jeweiligen Textfarbe: das stimmt in beiden Kontexten. */
.btn--geist:hover{
  background:rgba(127,127,127,.16);                          /* Rueckfall */
  background:color-mix(in srgb, currentColor 20%, transparent);
  border-color:currentColor; box-shadow:none; opacity:1;
}
.btn--geist:hover span{color:inherit}
/* Auf hellen Flaechen wirkte die graugruene Toenung wie ein ausgegrauter Knopf.
   Dort traegt die Marke den Hover - dieselbe Sprache wie beim Knopf
   „Karte anzeigen“ auf der Standortseite. Dunkle Abschnitte, Hero und
   Fussbereich behalten die helle Toenung. */
.sec:not(.sec--dunkel) .btn--geist:hover,
.sec:not(.sec--dunkel) .btn--geist:focus-visible{
  background:rgba(21,154,71,.12);
  border-color:var(--tanne); color:var(--tanne-dk);
}
.sec:not(.sec--dunkel) .btn--geist:hover span,
.sec:not(.sec--dunkel) .btn--geist:focus-visible span{color:var(--tanne-dk)}
.btn--klein{padding:.68em 1.2em; font-size:.87rem}
.btn-reihe{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem}
.btn-reihe--mitte{justify-content:center}

.txtlink{
  display:inline-flex; align-items:center; gap:.45rem; font-weight:700; color:var(--tanne-dk);
  position:relative; padding-bottom:3px; font-size:.95rem;
}
.txtlink svg{width:16px; height:16px; transition:transform .38s var(--ease)}
.txtlink::after{
  content:""; position:absolute; left:0; right:1.3rem; bottom:0; height:2px; border-radius:2px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
/* Tippziele am Handy mindestens 44 px hoch (Befund L14): der Link waechst nach
   oben und unten, der Unterstrich bleibt knapp unter dem Text. */
@media (max-width:820px), (pointer:coarse){
  .txtlink{min-height:44px; padding-bottom:0}
  .txtlink::after{bottom:calc(50% - .8em)}
  .sprung__pkt{min-height:44px}
  .mnav__unter a{min-height:44px}
}
.txtlink:hover::after,.txtlink:focus-visible::after{transform:scaleX(1)}
.txtlink:hover svg{transform:translateX(4px)}
.sec--dunkel .txtlink{color:var(--tanne-hell)}

/* Auszeichnung auf dem Diagonalband des Logos */
.band{
  display:inline-flex; align-items:center; gap:.5rem; padding:.44rem 1.05rem .48rem;
  background:var(--rot); color:#fff; font-size:.75rem; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; transform:rotate(-1.6deg);
  box-shadow:0 8px 20px rgba(168,30,27,.3);
}
.band svg{width:14px; height:14px}
.band--gruen{background:var(--tanne); box-shadow:0 8px 20px rgba(11,108,49,.3)}
.band--hell{background:#fff; color:var(--moos); box-shadow:0 8px 20px rgba(0,0,0,.16)}

/* ---------------------------------------------------------------- Kopf --- */
.site-head{
  position:sticky; top:0; z-index:80; background:rgba(251,247,240,.84);
  backdrop-filter:saturate(170%) blur(14px); -webkit-backdrop-filter:saturate(170%) blur(14px);
  border-bottom:1px solid rgba(14,42,26,.08);
  transition:box-shadow .35s ease, background-color .35s ease;
}
.site-head.is-stuck{box-shadow:0 10px 30px rgba(14,42,26,.1); background:rgba(251,247,240,.96)}
.head__in{display:flex; align-items:center; gap:1.2rem; height:var(--kopf-h)}
.marke{display:flex; align-items:center; gap:.75rem; margin-right:auto; padding:.2rem 0}
/* flex:none ist Pflicht: sonst quetscht der breitere Menue-Knopf das Logo zusammen */
.marke img{flex:none; height:48px; width:auto; transition:transform .5s var(--ease)}
.marke:hover img{transform:rotate(-4deg) scale(1.06)}
.marke__txt{display:flex; flex-direction:column; line-height:1.08; min-width:0}
.marke__txt b{
  font-family:var(--ff-display); font-size:1.26rem; font-weight:650; color:var(--moos);
  letter-spacing:-.015em;
}
.marke__txt span{font-size:.63rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--tanne-dk); font-weight:800; white-space:nowrap}
@media (max-width:560px){
  .marke img{height:42px}
  .marke__txt b{font-size:1.04rem}
  /* Der Zusatz braucht neben dem Menue-Knopf zu viel Platz - das Logo traegt ihn ohnehin */
  .marke__txt span{display:none}
}
@media (max-width:360px){.marke__txt b{font-size:.98rem}}

.hnav{display:flex; align-items:center; gap:.1rem; list-style:none; margin:0; padding:0}
.hnav > li{position:relative}
.hnav ul{list-style:none; margin:0; padding:0}
.hnav > li > a,.hnav__auf{
  position:relative;
  display:inline-flex; align-items:center; gap:.34rem; padding:.58rem .78rem .78rem; border-radius:100px;
  font-size:.94rem; font-weight:650; color:var(--text); background:none; border:0; cursor:pointer;
  transition:color .28s ease;
}
/* Aktive Seite wird mit dem Logo-Dreieck markiert, nicht mit einem Strich */
.hnav > li > a::after,.hnav__auf::after{
  content:""; position:absolute; left:50%; bottom:.2rem; width:9px; height:8px;
  transform:translateX(-50%) scale(0); transform-origin:bottom center;
  background:var(--tanne); clip-path:polygon(50% 0,100% 100%,0 100%);
  transition:transform .38s var(--ease);
}
.hnav > li > a:hover,.hnav__auf:hover{color:var(--tanne-dk)}
.hnav > li > a:hover::after,.hnav__auf:hover::after,
.hnav > li > a[aria-current]::after,
.hnav__auf[data-aktiv]::after{transform:translateX(-50%) scale(1)}
.hnav > li > a[aria-current],.hnav__auf[data-aktiv]{color:var(--tanne-dk)}
.hnav__auf svg{width:13px; height:13px; transition:transform .3s ease}
.hnav__pkt{
  position:absolute; left:50%; top:100%; transform:translate(-50%,10px); z-index:90;
  /* So breit wie der laengste Eintrag: vorher brach die Beschreibung des ersten
     Punktes um, dadurch waren die drei Eintraege unterschiedlich hoch. */
  width:max-content; max-width:min(26rem, calc(100vw - 2rem));
  padding:.45rem; background:#fff; border:1px solid rgba(14,42,26,.09);
  border-radius:var(--r-md); box-shadow:var(--schatten-hoch);
  opacity:0; visibility:hidden; transition:opacity .28s ease, transform .32s var(--ease), visibility .28s;
}
/* Bruecke ueber die Luecke zwischen Knopf und Klappmenue: ohne sie verliert der
   Zeiger auf dem Weg nach unten den Hover und das Menue klappt wieder zu. */
.hnav__pkt::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px}
/* Geoeffnet wird ueber :hover (Maus) oder die Klasse is-auf (Klick/Tastatur).
   Kein :focus-within: sonst haelt der Fokus auf dem Knopf das Menue offen,
   obwohl Escape es gerade geschlossen hat. */
.hnav li:hover .hnav__pkt,.hnav__pkt.is-auf{opacity:1; visibility:visible; transform:translate(-50%,0)}
.hnav li:hover .hnav__auf svg,.hnav__auf[aria-expanded="true"] svg{transform:rotate(180deg)}
.hnav__pkt a{
  display:flex; align-items:center; gap:.8rem; padding:.6rem .7rem; border-radius:var(--r-sm);
  transition:background-color .25s ease, color .25s ease;
}
.hnav__ic{
  flex:none; width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(21,154,71,.1); color:var(--tanne-dk);
  transition:background-color .25s ease, color .25s ease;
}
.hnav__ic svg{width:18px; height:18px}
.hnav__txt{display:block; min-width:0; flex:1 1 auto}
.hnav__txt b{display:block; font-size:.94rem; font-weight:650; color:var(--moos); line-height:1.3}
/* Auf einer Zeile halten: nur so sind alle drei Eintraege gleich hoch. */
.hnav__txt small{
  display:block; font-weight:450; font-size:.78rem; color:var(--muted);
  line-height:1.35; margin-top:1px; white-space:nowrap;
}
/* Der Pfeil erscheint erst beim Ueberfahren und schiebt nichts. */
.hnav__pkt a > svg{
  width:15px; height:15px; flex:none; color:var(--tanne); opacity:0;
  transform:translateX(-4px); transition:opacity .25s ease, transform .3s var(--ease);
}
.hnav__pkt a:hover{background:var(--creme)}
.hnav__pkt a:hover .hnav__ic{background:var(--tanne); color:#fff}
.hnav__pkt a:hover > svg{opacity:1; transform:none}
.hnav__pkt a:hover .hnav__txt b{color:var(--tanne-dk)}
.hnav__pkt a[aria-current]{background:rgba(21,154,71,.08)}
.hnav__pkt a[aria-current] .hnav__ic{background:var(--tanne); color:#fff}
.hnav__pkt a[aria-current] .hnav__txt b{color:var(--tanne-dk)}
.head__cta{flex:none}

/* Knopf mit dem Wort „Menü" daneben: am Handy ist ein reines Symbol fuer viele
   Besucherinnen und Besucher nicht eindeutig genug. */
.burger{
  display:none; align-items:center; gap:.7rem; flex:none; cursor:pointer;
  height:46px; padding:0 .95rem 0 1.1rem;
  border:1.5px solid rgba(14,42,26,.16); border-radius:100px; background:#fff;
  box-shadow:0 4px 14px rgba(14,42,26,.07);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.burger:hover{border-color:var(--tanne); box-shadow:0 6px 18px rgba(14,42,26,.12)}
.burger__wort{
  font-size:.76rem; font-weight:800; letter-spacing:.19em; text-transform:uppercase;
  color:var(--moos); line-height:1;
}
.burger__striche{position:relative; display:block; width:22px; height:16px; flex:none}
.burger__striche span{
  position:absolute; left:0; right:0; height:2px; border-radius:2px; background:var(--moos);
  transition:transform .38s var(--ease), opacity .2s ease;
}
.burger__striche span:nth-child(1){top:1px}
.burger__striche span:nth-child(2){top:7px}
.burger__striche span:nth-child(3){top:13px}
body.nav-auf .burger__striche span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-auf .burger__striche span:nth-child(2){opacity:0}
body.nav-auf .burger__striche span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:400px){
  .burger{padding:0 .8rem 0 .9rem; gap:.55rem}
  .burger__wort{font-size:.7rem; letter-spacing:.14em}
}

.scroll-bar{
  position:absolute; left:0; right:0; bottom:-1px; height:2px; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg,var(--tanne),var(--tanne-lt) 55%,var(--rot));
}

.mnav{
  position:fixed; inset:var(--kopf-h) 0 0 0; z-index:79; background:var(--creme);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  /* Scrollen bleibt im Menue, es reicht nicht an die Seite dahinter durch */
  overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .3s ease, transform .38s var(--ease), visibility .3s;
}
body.nav-auf .mnav{opacity:1; visibility:visible; transform:none}
/* Bei offenem Menue haengt die Seite fest (JS setzt body{top:-Ypx}). Damit der
   Kopf dabei sicher oben bleibt - sticky verliert in diesem Zustand seinen
   Bezugsrahmen -, wird er fuer diese Zeit fest verankert. */
body.nav-auf{position:fixed; left:0; right:0; width:100%}
body.nav-auf .site-head{position:fixed; top:0; left:0; right:0;
  /* deckend statt milchig: sonst schimmert der Menueinhalt durch den Kopf */
  background:var(--creme); backdrop-filter:none; -webkit-backdrop-filter:none}
.mnav ul{list-style:none; margin:0; padding:0}

/* --- Hauptpunkte: Symbol, Text, Pfeil --- */
/* Die Regel muss spezifischer sein als „.mnav ul" weiter oben, sonst gewinnt
   dort das padding:0 und die Symbole kleben am linken Rand (gefunden 13.09.2026). */
.mnav ul.mnav__liste{padding:.5rem clamp(1.1rem,4.6vw,1.6rem) .7rem}
.mnav__liste > li{border-bottom:1px solid rgba(14,42,26,.09)}
.mnav__liste > li:last-child{border-bottom:0}
.mnav__pkt,.mnav__grp > summary{
  display:flex; align-items:center; gap:.95rem; padding:1rem .3rem; min-height:60px;
  font-family:var(--ff-display); font-size:1.18rem; font-weight:600; color:var(--text);
  cursor:pointer; list-style:none;
}
.mnav__grp > summary::-webkit-details-marker{display:none}
.mnav__ic{
  flex:none; width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  background:rgba(21,154,71,.11); color:var(--tanne-dk);
}
.mnav__ic svg{width:20px; height:20px}
.mnav__txt{flex:1 1 auto; min-width:0}
.mnav__ch,.mnav__ab{flex:none; display:grid; place-items:center; color:rgba(14,42,26,.32)}
.mnav__ch svg,.mnav__ab svg{width:17px; height:17px}
.mnav__ab{transition:transform .3s var(--ease)}
.mnav__grp[open] > summary .mnav__ab{transform:rotate(180deg)}
.mnav__grp[open] > summary{color:var(--tanne-dk)}
.mnav__grp[open] > summary .mnav__ic{background:rgba(21,154,71,.2)}

/* aktive Seite */
.mnav__pkt[aria-current]{color:var(--tanne-dk)}
.mnav__pkt[aria-current] .mnav__ic{background:var(--tanne); color:#fff}
.mnav__pkt:active,.mnav__grp > summary:active{background:rgba(21,154,71,.06)}

/* --- Untereintraege --- */
.mnav ul.mnav__unter{padding:0 0 .8rem 1.1rem}
ul.mnav__unter li + li{border-top:1px solid rgba(14,42,26,.07)}
.mnav__unter a{
  display:flex; align-items:center; gap:.8rem;
  padding:.6rem .3rem; min-height:52px;
  font-family:var(--ff-text); font-size:1rem; font-weight:600; color:var(--text);
}
/* Eigenes Symbol je Unterpunkt - dieselbe Bildsprache wie im Untermenue am
   Schreibtisch und in den Hauptpunkten, nur eine Spur kleiner. */
.mnav__unter-ic{
  flex:none; width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  background:rgba(21,154,71,.09); color:var(--tanne-dk);
}
.mnav__unter-ic svg{width:17px; height:17px}
.mnav__unter-txt{display:flex; flex-direction:column; min-width:0; gap:.05rem}
.mnav__unter-txt b{font-weight:650; line-height:1.3}
.mnav__unter-txt small{
  font-size:.78rem; font-weight:500; color:var(--muted); line-height:1.35;
}
.mnav__unter a > svg:last-child{margin-left:auto; flex:none; width:15px; height:15px;
  color:rgba(14,42,26,.3)}
.mnav__unter a[aria-current]{color:var(--tanne-dk)}
.mnav__unter a[aria-current] .mnav__unter-ic{background:var(--tanne-btn); color:#fff}
.mnav__unter a[aria-current] > svg:last-child{color:var(--tanne)}

/* Auf Tablets ist das Menue sonst sehr breit: Symbol ganz links, Pfeil ganz
   rechts, dazwischen Leere. Ab 600 px laeuft der Inhalt in einer ruhigen,
   mittigen Spalte (13.09.2026). */
@media (min-width:600px){
  .mnav ul.mnav__liste{max-width:640px; margin-inline:auto}
  .mnav__fuss > *{max-width:640px; margin-inline:auto}
  .mnav__fuss .mnav__karte{display:flex}
}

/* --- Kontaktblock am Fuss des Menues --- */
.mnav__fuss{
  background:var(--sand); border-top:1px solid rgba(14,42,26,.09);
  /* unten nur so viel Luft, wie das Geraet braucht (Home-Balken) */
  padding:1.3rem clamp(1rem,4vw,1.4rem) calc(1rem + env(safe-area-inset-bottom, 0px));
  margin-top:.4rem;
}
.mnav__kopf{
  margin:0 0 .8rem; font-size:.72rem; font-weight:800; letter-spacing:.19em;
  text-transform:uppercase; color:var(--muted);
}
.mnav__karte{
  display:flex; align-items:center; gap:.85rem; padding:.75rem .9rem; margin-bottom:.6rem;
  background:#fff; border:1px solid rgba(14,42,26,.09); border-radius:var(--r-md);
  transition:border-color .25s ease, transform .3s var(--ease);
}
.mnav__karte:active{border-color:var(--tanne); transform:scale(.99)}
.mnav__karte-ic{
  flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:rgba(21,154,71,.12); color:var(--tanne-dk);
}
.mnav__karte-ic svg{width:18px; height:18px}
.mnav__karte-txt{min-width:0}
.mnav__karte-txt small{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.mnav__karte-txt b{
  display:block; font-size:1rem; font-weight:700; color:var(--moos);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* .mnav a ueberschreibt sonst das Knopf-Layout (gleiche Spezifitaet, spaeter) */
.mnav .btn{
  display:flex; width:100%; margin-top:1rem;
  padding:.95em 1.2em; font-family:var(--ff-text); font-size:.97rem; font-weight:700;
}
.mnav__adr{
  display:flex; align-items:flex-start; gap:.5rem; margin:1.1rem 0 0;
  font-size:.82rem; line-height:1.55; color:var(--muted);
}
.mnav__adr svg{width:14px; height:14px; flex:none; margin-top:.22rem; color:var(--tanne-dk)}

/* ---------------------------------------------------------------- Hero --- */
/* Raster statt Flex: im Flex-Container schrumpft .wrap auf die Inhaltsbreite,
   dadurch fiel am Handy der Seitenabstand weg. Im Raster behaelt der Inhalt
   seine normale Spaltenbreite - und damit dieselbe linke Fluchtlinie wie
   jeder andere Abschnitt der Seite. */
.hero{
  position:relative; overflow:hidden; background:var(--moos); isolation:isolate;
  min-height:min(86vh, 780px); display:grid; align-items:end;
}
.hero__bg{position:absolute; inset:0; z-index:0}
/* Das Ausgangsfoto ist flau. Etwas mehr Kontrast und Saettigung geben der
   Kultur Tiefe, ohne dass es kuenstlich wirkt. */
.hero__bg img{
  width:100%; height:100%; object-fit:cover; transform:scale(1.06); will-change:transform;
  filter:contrast(1.08) saturate(1.06);
}
/* Gerichteter Verlauf statt Rundum-Abdunklung: links traegt er die Schrift,
   rechts bleibt das Motiv sichtbar. Vorher lag ueber dem ganzen Bild ein
   Schleier - dadurch war weder Text noch Foto richtig zur Geltung gekommen. */
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(6,20,12,.92) 0%, rgba(6,20,12,.74) 34%,
                    rgba(6,20,12,.28) 62%, rgba(6,20,12,.1) 100%),
    linear-gradient(to top, rgba(6,20,12,.85) 0%, rgba(6,20,12,0) 42%);
}
/* Am Handy laeuft der schraege Verlauf ueber die schmale Breite so schnell
   zu, dass vom Foto nichts uebrig bleibt. Dort deshalb von unten nach oben:
   die Schrift steht unten im Dunkeln, oben bleibt die Landschaft sichtbar. */
@media (max-width:720px){
  .hero__bg::after{
    background:linear-gradient(to top, rgba(6,20,12,.94) 30%, rgba(6,20,12,.62) 58%,
                               rgba(6,20,12,.2) 100%);
  }
  .hero{min-height:min(88vh, 700px)}
  .hero__in{padding-block:clamp(4.5rem,18vw,7rem) clamp(2rem,5vw,3rem)}
}
.hero__in{
  position:relative; z-index:4; color:#fff;
  padding-block:clamp(7rem,14vw,10.5rem) clamp(2.6rem,5vw,4rem);
}
/* Die Textbreite begrenzen die Zeilen selbst, nicht der Kasten - sonst
   wandert der ganze Block in die Mitte und verliert die Fluchtlinie. */
.hero__sub{max-width:44ch}
.hero h1{color:#fff; max-width:15ch; text-shadow:0 4px 30px rgba(0,0,0,.42)}
.hero h1 em{font-style:normal; color:var(--tanne-hell)}
.hero__sub{
  font-size:clamp(1.08rem,1.8vw,1.34rem); color:rgba(255,255,255,.88); max-width:46ch;
  text-shadow:0 2px 18px rgba(0,0,0,.45); margin-top:.2em;
}
.hero .band{margin-bottom:1.7rem}
/* Die drei Fakten sind eine eigene Zeile, keine Fortsetzung des Textes -
   deshalb eine feine Linie darueber. */
.hero__meta{
  display:flex; flex-wrap:wrap; gap:.7rem 2.2rem; margin-top:clamp(2.2rem,4vw,3rem);
  padding-top:clamp(1.2rem,2.4vw,1.7rem); border-top:1px solid rgba(255,255,255,.18);
  font-size:.88rem; font-weight:550; color:rgba(255,255,255,.82);
}
.hero__meta span{display:inline-flex; align-items:center; gap:.55rem}
.hero__meta svg{width:16px; height:16px; color:var(--tanne-hell); flex:none}

/* Auszeichnung im Hero: auf einem Foto wirkt das gefuellte rote Band zu laut.
   Hier traegt ein ruhiger dunkler Halbton mit rotem Punkt dieselbe Aussage. */
.hero .band{
  background:rgba(10,28,18,.5); color:#fff; transform:none;
  border:1px solid rgba(255,255,255,.22); border-radius:100px;
  padding:.5rem 1.1rem .52rem .95rem; letter-spacing:.14em;
  box-shadow:none; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hero .band svg{color:var(--rot); width:13px; height:13px}

/* Einzelne Zweige in den Ecken ergaenzen die Girlande oben – ebenfalls stark
   zurueckgenommen, sie sollen den Blick nicht vom Inhalt wegziehen. */
.reisig{position:absolute; z-index:2; pointer-events:none; opacity:.2;
  filter:saturate(.3) brightness(.6)}
.reisig img{width:100%; height:auto}
.reisig--ul{bottom:-58px; left:-96px; width:min(26vw,290px); transform:rotate(152deg) scaleY(-1)}
.reisig--ur{bottom:-52px; right:-84px; width:min(24vw,270px); transform:rotate(28deg)}
.reisig--or{top:-40px; right:-70px; width:min(28vw,320px); transform:rotate(-16deg) scaleY(-1)}
.reisig--ol{top:-36px; left:-66px; width:min(26vw,300px); transform:rotate(196deg)}
@media (max-width:760px){.reisig{display:none}}

/* Schneeflocken – sehr zurueckhaltend */
.schnee{position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden}
.schnee i{position:absolute; top:-8%; border-radius:50%; background:#fff; opacity:0;
  animation:rieseln linear infinite}
@keyframes rieseln{
  0%{transform:translate3d(0,-10vh,0); opacity:0}
  8%{opacity:.5} 90%{opacity:.36}
  100%{transform:translate3d(var(--drift,14px),112vh,0); opacity:0}
}
@media (prefers-reduced-motion:reduce){.schnee{display:none}}

/* Standortleiste unter dem Hero */
.orte-band{position:relative; z-index:5; background:var(--moos-2); border-top:1px solid rgba(255,255,255,.09)}
.orte-band__grid{display:grid; grid-template-columns:repeat(4,1fr)}
.orte-band__it{
  position:relative; z-index:0; padding:1.5rem 1.4rem 1.6rem; color:rgba(255,255,255,.74);
  border-left:1px solid rgba(255,255,255,.09); overflow:hidden; transition:color .3s ease;
  /* Spalte, damit die Zahl unten buendig steht: die Ortsliste darueber ist mal
     ein-, mal zweizeilig - ohne das stand "3 VERKAUFSPLAETZE" je Spalte auf
     einer anderen Hoehe. */
  display:flex; flex-direction:column;
}
.orte-band__it::before{
  content:""; position:absolute; inset:0; background:var(--moos-3); z-index:-1;
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.orte-band__it:hover::before{transform:none}
.orte-band__it:first-child{border-left:0}
.orte-band__it b{
  display:block; font-family:var(--ff-display); font-size:1.14rem; font-weight:650;
  color:#fff; margin-bottom:.15rem;
}
.orte-band__orte{
  display:block; font-size:.87rem; line-height:1.5; color:rgba(255,255,255,.8);
  margin-bottom:.45rem;
}
.orte-band__mehr{
  display:inline-flex; align-items:center; gap:.42rem; font-size:.78rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--tanne-lt);
  margin-top:auto; align-self:flex-start;
}
.orte-band__mehr svg{width:13px; height:13px}
@media (max-width:900px){.orte-band__grid{grid-template-columns:repeat(2,1fr)}
  .orte-band__it:nth-child(3){border-left:0}
  .orte-band__it:nth-child(n+3){border-top:1px solid rgba(255,255,255,.09)}}
@media (max-width:520px){.orte-band__grid{grid-template-columns:1fr}
  .orte-band__it{border-left:0; border-top:1px solid rgba(255,255,255,.09)}
  .orte-band__it:first-child{border-top:0}}

/* Innenseiten-Kopf */
.pkopf{position:relative; overflow:hidden; background:var(--moos); color:#fff}
.pkopf__bg{position:absolute; inset:0}
/* Die Fehlerseite braucht keinen so hohen Kopf wie eine Inhaltsseite: darunter
   stehen gleich die Wege weiter, und die sollen ohne Scrollen angerissen sein. */
.pkopf--404{min-height:46vh; display:grid; align-items:center}
@media (max-width:720px){ .pkopf--404{min-height:auto} }
.pkopf__bg img{width:100%; height:100%; object-fit:cover; filter:contrast(1.06) saturate(1.05)}
/* Wie im Hero: der Verlauf traegt die Schrift auf der linken Seite und laesst
   das Foto rechts stehen. Vorher lag er gleichmaessig ueber dem ganzen Bild,
   sodass vom Motiv fast nichts zu erkennen war. */
.pkopf__bg::after{content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(7,24,14,.94) 0%, rgba(7,24,14,.78) 38%,
                    rgba(7,24,14,.4) 68%, rgba(7,24,14,.22) 100%),
    linear-gradient(to top, rgba(7,24,14,.7), rgba(7,24,14,0) 55%)}
@media (max-width:720px){
  .pkopf__bg::after{
    background:linear-gradient(to top, rgba(7,24,14,.94) 34%, rgba(7,24,14,.66) 62%,
                               rgba(7,24,14,.26) 100%);
  }
}
.pkopf__in{position:relative; z-index:4; padding-block:clamp(4.8rem,9vw,6.8rem) clamp(2.8rem,5vw,4rem)}
.pkopf h1{color:#fff; margin-bottom:.32em; max-width:18ch}
.pkopf .lead{color:rgba(255,255,255,.82)}
.krumen{display:flex; flex-wrap:wrap; gap:.45rem; font-size:.82rem; color:rgba(255,255,255,.62);
  margin-bottom:1.1rem; font-weight:550}
.krumen a:hover{color:#fff}
.krumen span{opacity:.5}

/* --------------------------------------------------------------- Raster -- */
.grid{display:grid; gap:clamp(1.1rem,2.3vw,2rem)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4.5vw,4.5rem); align-items:center}
.split--bild-rechts .split__bild{order:2}
@media (max-width:900px){.split{grid-template-columns:1fr}
  .split--bild-rechts .split__bild{order:0}}

/* ------------------------------------------------ Vorzuege, redaktionell - */
/* Keine Kaesten mehr: nummerierte Spalten mit Haarlinien wirken ruhiger und
   hochwertiger als vier Karten mit Schatten. */
.usp{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid rgba(14,42,26,.14)}
/* Reihe mit drei Punkten (Wiederverkaeufer seit 13.09.2026): drei gleich breite
   Spalten statt vier, sonst bleibt rechts eine leere Spalte stehen. Nur ab 941 px,
   darunter gelten weiter die zwei bzw. eine Spalte aus den Media-Queries. */
@media (min-width:941px){
  .usp:has(> .usp__it:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
}
.usp__it{
  position:relative; padding:1.9rem 1.5rem 1.7rem; border-left:1px solid rgba(14,42,26,.12);
  transition:background-color .4s ease;
}
.usp__it:first-child{border-left:0}
.usp__it:hover{background:rgba(21,154,71,.05)}
/* Die Nummer gehoert zum Zeichen, nicht ueber den Text: sie steht rechts oben
   als feine Marke und nimmt keine eigene Zeile mehr weg. */
.usp__nr{
  position:absolute; top:1.6rem; right:1.5rem; font-family:var(--ff-display);
  font-size:1.5rem; font-weight:600; color:rgba(21,154,71,.22); letter-spacing:.02em;
  line-height:1;
}
.usp__ic{
  width:52px; height:52px; display:grid; place-items:center; margin-bottom:1.15rem;
  color:#fff; background:linear-gradient(150deg, var(--tanne) 0%, var(--tanne-dk) 100%);
  border-radius:16px; box-shadow:0 8px 18px rgba(21,154,71,.22);
  transition:transform .5s var(--ease), box-shadow .35s ease;
}
.usp__it:hover .usp__ic{transform:rotate(-6deg) scale(1.06); box-shadow:0 12px 24px rgba(21,154,71,.3)}
.usp__ic svg{width:24px; height:24px; stroke-width:1.85}
/* Zwei Zeilen Platz fuer die Ueberschrift, damit die Absaetze aller vier
   Spalten auf derselben Hoehe beginnen - sonst steht die Reihe schief. */
.usp__it b{
  display:block; font-family:var(--ff-display); font-size:1.22rem; font-weight:650;
  color:var(--moos); margin-bottom:.5rem; line-height:1.22;
  padding-right:2.2rem; min-height:calc(2 * 1.22em);
}
.usp__it p{margin:0; font-size:.94rem; color:var(--muted); line-height:1.62}
.sec--dunkel .usp,.sec--dunkel .usp__it{border-color:rgba(255,255,255,.16)}
.sec--dunkel .usp__it:hover{background:rgba(255,255,255,.05)}
.sec--dunkel .usp__ic{
  background:linear-gradient(150deg, rgba(79,193,122,.28), rgba(11,108,49,.42));
  color:#fff; box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.sec--dunkel .usp__nr{color:rgba(143,227,171,.3)}
.sec--dunkel .usp__it b{color:#fff}
.sec--dunkel .usp__it p{color:rgba(255,255,255,.7)}
@media (max-width:940px){
  .usp{grid-template-columns:repeat(2,1fr)}
  .usp__it:nth-child(3){border-left:0}
  .usp__it:nth-child(n+3){border-top:1px solid rgba(14,42,26,.14)}
  .sec--dunkel .usp__it:nth-child(n+3){border-top-color:rgba(255,255,255,.16)}
}
@media (max-width:560px){
  .usp{grid-template-columns:1fr}
  .usp__it{border-left:0; border-top:1px solid rgba(14,42,26,.14); padding:1.6rem 0}
  .usp__it:first-child{border-top:0}
  .sec--dunkel .usp__it{border-top-color:rgba(255,255,255,.16)}
}

/* --------------------------------------------------------------- Karten -- */
.karte{
  position:relative; display:flex; flex-direction:column; overflow:hidden; background:#fff;
  border-radius:var(--r-lg); border:1px solid rgba(14,42,26,.07); box-shadow:var(--schatten);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.karte:hover{transform:translateY(-8px); box-shadow:var(--schatten-hoch)}
.karte__bild{position:relative; overflow:hidden; aspect-ratio:5/4; background:var(--sand-2)}
.karte__bild img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.karte:hover .karte__bild img{transform:scale(1.08)}
.karte__bild::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(7,24,14,0) 40%,rgba(7,24,14,.6));
  opacity:.55; transition:opacity .5s ease;
}
.karte:hover .karte__bild::after{opacity:.85}
/* Auszeichnung auf dem Diagonalband, wie im Logo. Sie sitzt vollstaendig im
   Bild: haengt sie ueber den Rand, schneidet sie die runde Ecke der Karte ab. */
.karte__band{position:absolute; top:1.1rem; left:1.1rem; z-index:2}
/* Auf der Karte steht das Etikett gerade: schraeg wirken kleine Schilder
   unruhig, und die Schraege gehoert dem grossen roten Band im Hero. */
.karte__band .band{
  border-radius:4px; padding:.4rem .85rem .42rem; letter-spacing:.13em; transform:none;
}
.karte__txt{padding:1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; flex:1}
.karte__txt h3{margin-bottom:.5rem; color:var(--moos)}
.karte__txt p{color:var(--muted); font-size:.95rem; margin-bottom:1.2rem; line-height:1.66}
.karte__txt .txtlink{margin-top:auto; align-self:flex-start}
.karte--dunkel{background:var(--moos-2); border-color:rgba(255,255,255,.1)}
.karte--dunkel .karte__txt h3{color:#fff}
.karte--dunkel .karte__txt p{color:rgba(255,255,255,.72)}
.karte__ic{
  width:48px; height:48px; border-radius:15px; display:grid; place-items:center; margin-bottom:1.1rem;
  background:rgba(79,193,122,.18); color:var(--tanne-hell);
}
.karte__ic svg{width:23px; height:23px}

/* Bilder */
.bildrahmen{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--schatten-hoch)}
.bildrahmen img{width:100%; height:auto; display:block}
.bildrahmen--hoch{aspect-ratio:4/5}
.bildrahmen--hoch img{height:100%; object-fit:cover}
.bild-duo{position:relative}
.bild-duo__klein{
  position:absolute; right:-1.6rem; bottom:-2.2rem; width:45%; border-radius:var(--r-md); overflow:hidden;
  border:7px solid var(--creme); box-shadow:var(--schatten-hoch);
}
.sec--sand .bild-duo__klein{border-color:var(--sand)}
.split--bild-rechts .bild-duo__klein{right:auto; left:-1.6rem}
/* Zwischen 641 und 900 px ist die Bildspalte fast so breit wie der Inhalt:
   der Ueberstand nach aussen wuerde die Seite um wenige Pixel verbreitern. */
@media (max-width:900px){.bild-duo__klein{right:0}
  .split--bild-rechts .bild-duo__klein{left:0}}
@media (max-width:640px){.split--bild-rechts .bild-duo__klein{left:auto}}
@media (max-width:640px){.bild-duo__klein{position:static; width:100%; margin-top:1rem; border-width:0}}

/* -------------------------------------------------------------- Zahlen --- */
.zahlen{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.4rem}
.zahlen--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:640px){.zahlen{gap:.9rem}}
.zahlen__it{position:relative; padding-left:1rem}
.zahlen__it::before{
  content:""; position:absolute; left:0; top:.35rem; width:3px; height:calc(100% - .8rem);
  border-radius:3px; background:linear-gradient(180deg,var(--tanne),transparent);
}
.zahlen__it b{
  display:block; font-family:var(--ff-display); font-size:clamp(1.9rem,4vw,2.85rem); font-weight:600;
  color:var(--tanne-dk); line-height:1; letter-spacing:-.03em;
}
.sec--dunkel .zahlen__it b{color:var(--tanne-hell)}
.zahlen__it span{display:block; margin-top:.5rem; font-size:.84rem; line-height:1.42;
  color:var(--muted); font-weight:550}
.sec--dunkel .zahlen__it span{color:rgba(255,255,255,.65)}

/* ------------------------------------------------------------ Zeitstrahl - */
.tl{position:relative; padding-left:clamp(2.6rem,5vw,3.8rem); max-width:940px}
.tl::before{
  content:""; position:absolute; left:calc(clamp(2.6rem,5vw,3.8rem) / 2 - 1px); top:1rem; bottom:1rem;
  width:2px; background:rgba(21,154,71,.18); border-radius:2px;
}
.tl__prog{
  position:absolute; left:calc(clamp(2.6rem,5vw,3.8rem) / 2 - 1.5px); top:1rem; width:3px; height:0;
  background:linear-gradient(180deg,var(--tanne-lt),var(--tanne)); border-radius:3px;
  transition:height .18s linear;
}
.tl__it{position:relative; padding-bottom:clamp(2.2rem,4.5vw,3.4rem)}
.tl__it:last-child{padding-bottom:0}
/* Marker ist das Logo-Dreieck */
.tl__pkt{
  position:absolute; left:calc(clamp(2.6rem,5vw,3.8rem) / -2 - 10px); top:.55rem;
  width:20px; height:18px; background:rgba(21,154,71,.3);
  clip-path:polygon(50% 0,100% 100%,0 100%);
  transition:background-color .45s ease, transform .5s var(--ease);
}
.tl__it.is-aktiv .tl__pkt{background:var(--tanne); transform:scale(1.18)}
.tl__zeit{display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tanne-dk); margin-bottom:.45rem}
.tl__it h3{margin-bottom:.45rem; color:var(--moos); font-size:clamp(1.25rem,2.1vw,1.6rem); font-weight:650}
.tl__it p{color:var(--muted); margin-bottom:0; max-width:66ch}
/* Ab 900 px stehen Text und Bild einer Station nebeneinander. Der Punkt auf
   der Linie bleibt absolut positioniert und zaehlt im Raster nicht mit. */
@media (min-width:900px){
  .tl__it--bild{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
    column-gap:clamp(1.6rem,3vw,2.6rem); align-items:start;
  }
  .tl__it--bild .tl__zeit,.tl__it--bild h3,.tl__it--bild p{grid-column:1}
  .tl__it--bild .tl__bild{grid-column:2; grid-row:1 / span 3; margin-top:.3rem; max-width:none}
  .tl__it--bild p{max-width:46ch}
}

/* Einheitliches Format fuer alle Bilder im Zeitstrahl. Vorher brachte jedes
   Foto sein eigenes Seitenverhaeltnis mit - die Reihe las sich als Stapel
   verschieden grosser Bilder statt als ein Weg durchs Jahr. */
.tl__bild{
  margin-top:1.2rem; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--schatten);
  max-width:520px; aspect-ratio:16/10;
}
.tl__bild img{width:100%; height:100%; object-fit:cover; display:block}

/* -------------------------------------------------------------- Orte ----- */
/* Schnellwahl ueber der Liste: keine Knopfreihe mehr, sondern eine ruhige
   Leiste mit Zahl je Ort. */
.sprung{
  display:flex; align-items:center; gap:.7rem 1.1rem; flex-wrap:wrap;
  padding:.85rem 1.1rem; border-radius:var(--r-md);
  background:#fff; border:1px solid rgba(14,42,26,.08); box-shadow:0 6px 18px rgba(14,42,26,.045);
}
.sprung__titel{
  margin:0; font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); flex:none;
}
.sprung__reihe{display:flex; flex-wrap:wrap; gap:.5rem}
.sprung__pkt{
  display:inline-flex; align-items:center; gap:.5rem; padding:.42rem .5rem .42rem .85rem;
  border-radius:100px; border:1px solid rgba(14,42,26,.12); background:var(--creme);
  font-size:.87rem; font-weight:650; color:var(--moos); text-decoration:none;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease;
}
.sprung__n{
  display:inline-grid; place-items:center; min-width:1.45rem; height:1.45rem; padding:0 .35rem;
  border-radius:100px; background:rgba(21,154,71,.14); color:var(--tanne-dk);
  font-size:.73rem; font-weight:800;
}
.sprung__pkt:hover,.sprung__pkt:focus-visible{
  background:rgba(21,154,71,.1); border-color:var(--tanne); color:var(--tanne-dk);
}
.sprung__pkt:hover .sprung__n,.sprung__pkt:focus-visible .sprung__n{background:#fff}

/* Google-Signet: das einzige mehrfarbige Zeichen auf der Seite. Es traegt
   Flaechen statt Linien, deshalb darf die Linienfarbe hier nicht greifen. */
.ic--google svg{width:16px; height:16px; stroke:none; fill:none}
.foot__ic.ic--google,.kontakt-liste__ic.ic--google{background:#fff}
.foot__ic.ic--google svg{width:15px; height:15px}
.kontakt-liste__ic.ic--google svg{width:17px; height:17px}

/* ------------------------------------------------------------ Fragen ----- */
.faq{display:flex; flex-direction:column; gap:.6rem}
.faq__f{
  background:#fff; border:1px solid rgba(14,42,26,.08); border-radius:var(--r-sm);
  box-shadow:0 6px 18px rgba(14,42,26,.04); overflow:hidden;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.faq__f[open]{border-color:rgba(21,154,71,.25); box-shadow:0 10px 26px rgba(14,42,26,.07)}
.faq__f summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.2rem; cursor:pointer; list-style:none;
  font-family:var(--ff-display); font-size:1.04rem; font-weight:650; color:var(--moos);
  line-height:1.35;
}
.faq__f summary::-webkit-details-marker{display:none}
.faq__f summary:hover{color:var(--tanne-dk)}
.faq__f summary svg{
  width:17px; height:17px; flex:none; color:var(--tanne-dk);
  transition:transform .3s var(--ease);
}
.faq__f[open] summary svg{transform:rotate(180deg)}
.faq__f p{
  margin:0; padding:0 1.2rem 1.15rem; font-size:.94rem; line-height:1.65; color:var(--text);
}
/* Etwas Luft nach oben und unten: die Links sassen bei 21 px und damit unter
   den 24 px, die WCAG 2.5.8 fuer Bedienelemente verlangt. Auf dem Handy trifft
   man sie jetzt zuverlaessig. */
.faq__f p a{
  color:var(--tanne-dk); text-decoration:underline; text-underline-offset:2px;
  padding-block:.2rem;
}
@media (max-width:560px){
  .faq__f summary{padding:.9rem 1rem; font-size:.98rem}
  .faq__f p{padding:0 1rem 1rem}
}

/* -------------------------------------------------------- Verkaufsplaetze -- */
.ort-gruppe{margin-bottom:clamp(2.6rem,5vw,4rem)}
.ort-gruppe:last-child{margin-bottom:0}
.ort-gruppe__kopf{
  display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap;
  padding-bottom:.8rem; margin-bottom:1.4rem; border-bottom:2px solid rgba(21,154,71,.2);
}
.ort-gruppe__kopf h2{margin:0; font-size:clamp(1.5rem,2.6vw,2.1rem)}
.ort-gruppe__zahl{font-size:.78rem; color:var(--muted); font-weight:800;
  letter-spacing:.16em; text-transform:uppercase}

/* Zwei Spalten ab dem Punkt, ab dem eine Karte sonst nur noch Leerraum ist. */
.ort-liste{display:grid; gap:1.1rem}
@media (min-width:1080px){ .ort-liste{grid-template-columns:repeat(2,minmax(0,1fr))} }

.ort{
  display:flex; flex-direction:column; gap:1rem;
  padding:1.5rem 1.7rem; background:#fff; border-radius:var(--r-md);
  border:1px solid rgba(14,42,26,.07); box-shadow:0 8px 24px rgba(14,42,26,.05);
  position:relative; overflow:hidden; scroll-margin-top:100px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s ease;
}
/* gruener Anschnitt links, erscheint beim Ueberfahren */
.ort::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--tanne);
  transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease);
}
.ort:hover::before{transform:none}
.ort:hover{transform:translateY(-3px); box-shadow:var(--schatten); border-color:rgba(21,154,71,.22)}
/* Laufende Nummer wie bei den Vorzuegen auf der Startseite: leise, aber
   sie gibt der Liste einen Takt. */
.ort__nr{
  position:absolute; top:1.1rem; right:1.3rem; font-family:var(--ff-display);
  font-size:1.5rem; font-weight:600; line-height:1; color:rgba(14,42,26,.09);
  pointer-events:none;
}

.ort__kopf{display:flex; align-items:flex-start; gap:.9rem; padding-right:2.4rem}
.ort__ic{
  flex:none; width:42px; height:42px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(21,154,71,.12); color:var(--tanne-dk);
  transition:background-color .3s ease, color .3s ease;
}
.ort__ic svg{width:19px; height:19px}
.ort:hover .ort__ic{background:var(--tanne); color:#fff}
.ort__txt{min-width:0}
.ort__name{display:block; font-family:var(--ff-display); font-size:1.18rem; font-weight:650;
  color:var(--moos); line-height:1.26}
.ort__adr{display:block; font-size:.92rem; color:var(--muted); margin-top:.2rem}

/* Zeiten als Liste statt als Pillenreihe: Zeitraum und Uhrzeit stehen
   dadurch untereinander in einer Flucht und sind schneller zu lesen. */
.ort__zeiten{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.34rem}
.ort__zeit{
  display:flex; align-items:center; gap:.6rem; padding:.44rem .8rem; border-radius:var(--r-sm);
  background:var(--sand); font-size:.88rem; color:var(--text);
}
.ort__zeit svg{width:15px; height:15px; flex:none; color:var(--tanne-dk)}
.ort__zeit-tage{flex:none; min-width:6.6em; font-weight:800}
.ort__zeit-uhr{color:var(--muted)}
.ort__zeit--heilig{background:rgba(211,50,48,.09); color:var(--rot-dk)}
.ort__zeit--heilig svg{color:var(--rot)}
.ort__zeit--heilig .ort__zeit-uhr{color:var(--rot-dk)}

/* Tagesstatus: die eine Zeile, die in der Saison wirklich zaehlt. */
.ort__status{
  display:inline-flex; align-items:center; gap:.42rem; margin-top:.45rem;
  padding:.24rem .62rem .24rem .5rem; border-radius:100px;
  font-size:.79rem; font-weight:800; letter-spacing:.004em;
  background:var(--sand); color:var(--text);
}
.ort__punkt{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}
.ort__status--offen{background:rgba(21,154,71,.15); color:var(--tanne-dk)}
.ort__status--vorher{background:rgba(21,154,71,.09); color:var(--tanne-dk)}
.ort__status--zu{background:rgba(211,50,48,.09); color:var(--rot-dk)}
.ort__status--vorbei{background:rgba(14,42,26,.07); color:var(--muted)}

.ort__anfahrt{
  display:flex; align-items:flex-start; gap:.55rem; margin:0;
  font-size:.85rem; line-height:1.5; color:var(--muted);
}
.ort__anfahrt svg{width:15px; height:15px; flex:none; margin-top:.22rem; color:var(--tanne-dk)}

.ort__bild{margin:-1.5rem -1.7rem .15rem; aspect-ratio:16/9; overflow:hidden}
.ort__bild img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease)}
.ort:hover .ort__bild img{transform:scale(1.04)}
/* Steht ein Foto oben, hat die Nummer auf dem Bild zu wenig Halt. */
.ort--bild .ort__nr{top:auto; bottom:auto; margin-top:0; color:rgba(14,42,26,.12)}

/* Sprung aus der Uebersichtskarte: die Karte blinkt kurz auf. */
.ort--gezeigt{border-color:var(--tanne); box-shadow:0 0 0 3px rgba(21,154,71,.18), var(--schatten)}
.ort--gezeigt::before{transform:none}

.ort__fuss{
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1rem; margin-top:auto;
  padding-top:1rem; border-top:1px solid rgba(14,42,26,.08);
}
.ort__fuss .btn{flex:none}

@media (max-width:700px){
  .ort{padding:1.3rem; gap:.85rem}
  .ort__nr{top:.95rem; right:1.1rem; font-size:1.3rem}
  .ort__zeit{gap:.5rem; padding:.42rem .7rem; font-size:.85rem}
  .ort__zeit-tage{min-width:5.6em}
  .ort__fuss{gap:.5rem}
  .ort__fuss .btn{padding-inline:1.1em; font-size:.91rem; gap:.45rem; white-space:nowrap}
  .ort__fuss .btn svg{width:16px; height:16px}
  .ort__fuss > .btn{flex:1 1 0; min-width:0; justify-content:center}
  .sprung{padding:.8rem .9rem}
}
@media (max-width:340px){
  .ort__zeit{flex-wrap:wrap}
  .ort__zeit-uhr{flex:1 1 100%; padding-left:1.85rem}
  .ort__fuss > .btn{flex:1 1 100%}
}

/* ------------------------------------------------------------ Hinweis ---- */
.hinweis{
  display:flex; gap:1.05rem; padding:1.2rem 1.4rem; border-radius:var(--r-md);
  background:rgba(21,154,71,.07); border:1px solid rgba(21,154,71,.2);
}
.feld__hilfe{margin:.45rem 0 0; font-size:.82rem; color:var(--muted); line-height:1.5}
.hinweis--rot{background:rgba(211,50,48,.06); border-color:rgba(211,50,48,.22)}
.hinweis__ic{flex:none; width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background:#fff; color:var(--tanne-dk)}
.hinweis--rot .hinweis__ic{color:var(--rot)}
.hinweis__ic svg{width:17px; height:17px}
.hinweis p{margin:0; font-size:.94rem}
.hinweis a{display:inline-flex; align-items:center; min-height:24px}
.hinweis b{display:block; font-family:var(--ff-display); font-size:1.08rem; font-weight:650;
  color:var(--moos); margin-bottom:.18rem}
.sec--dunkel .hinweis{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.15)}
.sec--dunkel .hinweis p{color:rgba(255,255,255,.8)}
.sec--dunkel .hinweis b{color:#fff}
.sec--dunkel .hinweis__ic{background:rgba(79,193,122,.18); color:var(--tanne-hell)}

/* -------------------------------------------------------------- Zitat ---- */
.zitat{
  position:relative; max-width:22ch; margin-inline:auto; text-align:center;
  font-family:var(--ff-display); font-size:clamp(1.65rem,3.4vw,2.55rem); line-height:1.26;
  font-weight:500; letter-spacing:-.018em; color:#fff;
}
.zitat--breit{max-width:27ch}
.zitat cite{
  display:block; margin-top:1.6rem; font-family:var(--ff-text); font-size:.75rem; font-style:normal;
  letter-spacing:.2em; text-transform:uppercase; font-weight:800; color:var(--tanne-hell);
}

/* --------------------------------------------------------------- CTA ----- */
.cta{position:relative; background:var(--moos); color:#fff; overflow:hidden}
.cta__bg{position:absolute; inset:0; opacity:.24}
.cta__bg img{width:100%; height:100%; object-fit:cover; object-position:center 22%}
.cta__in{position:relative; z-index:4; text-align:center;
  padding-block:clamp(4.8rem,8vw,7rem) clamp(3.4rem,6vw,5rem)}
.cta h2{color:#fff; max-width:20ch; margin-inline:auto}
.cta p{color:rgba(255,255,255,.8); max-width:52ch; margin-inline:auto}

/* ---------------------------------------------------------- Textseiten --- */
.text-seite{max-width:68ch}   /* Zeilen waren mit 76 Zeichen zu lang zum Lesen */
.text-seite h2{margin-top:2.6rem; font-size:clamp(1.45rem,2.3vw,1.9rem)}
.text-seite h3{margin-top:1.9rem; font-size:1.14rem}
.text-seite ol{padding-left:1.35rem; margin:0 0 1.1em}
.text-seite li{margin-bottom:.42em}
.text-seite ul{list-style:none; padding-left:1.5rem; margin:0 0 1.1em}
.text-seite ul li{position:relative}
.text-seite ul li::before{
  content:""; position:absolute; left:-1.25rem; top:.62em; width:9px; height:8px;
  background:var(--tanne); clip-path:polygon(50% 0,100% 100%,0 100%);
}
/* Mindestgroesse der Ziele nach WCAG 2.1 AA (2.5.8): 24 px */
.text-seite a,.daten-block a{
  color:var(--tanne-dk); text-decoration:underline; text-underline-offset:3px;
  display:inline-flex; align-items:center; min-height:24px;
}
.text-seite a:hover,.daten-block a:hover{color:var(--rot)}
.daten-block{
  background:#fff; border:1px solid rgba(14,42,26,.08); border-radius:var(--r-md);
  padding:1.4rem 1.6rem; margin-bottom:1.7rem;
}
.daten-block dl{display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.5rem; margin:0}
.daten-block dt{font-weight:700; color:var(--muted)}
.daten-block dd{margin:0}
@media (max-width:560px){.daten-block dl{grid-template-columns:1fr; gap:.15rem}
  .daten-block dd{margin-bottom:.75rem}}

/* ------------------------------------------------------------ Aktuelles -- */
/* Saisonband: die drei Eckdaten, aus den CMS-Daten gerechnet. */
.saisonband{
  display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:1.4rem 2rem;
  background:#fff; border:1px solid rgba(14,42,26,.1); border-radius:var(--r-lg);
  padding:1.35rem 1.6rem; box-shadow:0 12px 32px rgba(14,42,26,.07);
}
.saisonband__feld{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.saisonband__kl{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800;
  color:var(--tanne-dk)}
.saisonband__feld b{font-family:var(--ff-display); font-size:1.18rem; color:var(--moos); line-height:1.25}
.saisonband__feld--weit b{font-size:1rem; font-family:var(--ff-text); font-weight:600; color:var(--text)}
.saisonband > .btn{white-space:nowrap}
@media (max-width:900px){
  .saisonband{grid-template-columns:1fr 1fr; gap:1.1rem 1.4rem; padding:1.2rem 1.25rem}
  .saisonband__feld--weit{grid-column:1 / -1}
  .saisonband > .btn{grid-column:1 / -1; justify-content:center}
}

/* Meldungen als Zeitstrahl - dieselbe Bildsprache wie der Lebenslauf. */
.news{position:relative; display:grid; gap:1.6rem}
.news__it{display:grid; grid-template-columns:74px 1fr; gap:1.4rem; align-items:stretch}
.news__marke{position:relative; display:flex; justify-content:center; align-items:flex-start;
  padding-top:.35rem}
/* Linie laeuft vom Kalenderblatt bis zur naechsten Meldung durch */
.news__it:not(:last-child) .news__marke::after{
  content:""; position:absolute; top:5.9rem; bottom:-1.9rem; left:50%; width:2px;
  transform:translateX(-50%); background:linear-gradient(var(--tanne-lt), rgba(21,154,71,.12));
}
.news__kal{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:74px; padding:.55rem .2rem .5rem; border-radius:var(--r-md); background:var(--moos);
  color:#fff; box-shadow:0 10px 24px rgba(11,108,49,.2); position:relative; z-index:2;
}
.news__kal b{font-family:var(--ff-display); font-size:1.6rem; line-height:1}
.news__kal small{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800;
  color:var(--tanne-hell); margin-top:.1rem}
.news__kal i{font-style:normal; font-size:.68rem; color:rgba(255,255,255,.62); margin-top:.15rem}
.news__karte{
  background:#fff; border:1px solid rgba(14,42,26,.09); border-radius:var(--r-lg);
  padding:1.5rem 1.7rem; box-shadow:0 8px 24px rgba(14,42,26,.05);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.news__it:hover .news__karte{transform:translateY(-3px); box-shadow:var(--schatten)}
.news__datum{display:flex; align-items:center; gap:.7rem; margin:0 0 .35rem;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--muted)}
.news__neu{background:var(--tanne-btn); color:#fff; border-radius:100px; padding:.12em .7em;
  letter-spacing:.1em; font-size:.66rem}
.news__karte h2{font-size:clamp(1.2rem,2vw,1.5rem); margin:0 0 .5rem; color:var(--moos)}
.news__karte p:last-child{margin-bottom:0}
@media (max-width:600px){
  .news__it{grid-template-columns:58px 1fr; gap:.9rem}
  .news__kal{width:58px; padding:.45rem .2rem .4rem}
  .news__kal b{font-size:1.3rem}
  .news__karte{padding:1.15rem 1.15rem 1.2rem}
  .news__it:not(:last-child) .news__marke::after{top:4.7rem; bottom:-2.2rem}
}

/* Wann welcher Platz aufsperrt (dunkler Abschnitt) */
.termine{list-style:none; margin:0; padding:0; display:grid; gap:.6rem;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr))}
.termine__it{display:flex}
.termine__it a{
  display:flex; align-items:center; gap:1rem; padding:.85rem 1rem; width:100%; min-height:68px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md); color:#fff;
  transition:background-color .3s ease, border-color .3s ease;
}
.termine__it a:hover{background:rgba(255,255,255,.1); border-color:rgba(143,227,171,.45)}
.termine__tag{display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex:none; width:52px; padding:.35rem 0; border-radius:var(--r-sm); background:rgba(143,227,171,.14)}
.termine__tag b{font-family:var(--ff-display); font-size:1.15rem; line-height:1; color:#fff}
.termine__tag small{font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:800; color:var(--tanne-hell); margin-top:.12rem}
.termine__txt{display:flex; flex-direction:column; min-width:0; gap:.12rem}
.termine__txt b{font-weight:650; font-size:.97rem; line-height:1.3}
.termine__txt small{font-size:.8rem; color:rgba(255,255,255,.66); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.termine__ch{margin-left:auto; flex:none; color:var(--tanne-hell); display:flex}
.termine__ch svg{width:16px; height:16px}
.txtlink--hell{color:#fff}
.txtlink--hell:hover{color:var(--tanne-hell)}

/* -------------------------------------------------------------- Beitrag -- */
.beitrag{
  display:grid; grid-template-columns:160px 1fr; gap:1.8rem; padding:1.7rem;
  background:#fff; border:1px solid rgba(14,42,26,.07); border-radius:var(--r-md);
  box-shadow:0 8px 24px rgba(14,42,26,.05); margin-bottom:1.2rem;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.beitrag:hover{transform:translateY(-3px); box-shadow:var(--schatten)}
.beitrag__datum{font-size:.76rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tanne-dk); padding-top:.45rem}
.beitrag h2{margin-bottom:.5rem; color:var(--moos); font-size:clamp(1.3rem,2.2vw,1.7rem)}
.beitrag p:last-child{margin-bottom:0}
@media (max-width:640px){.beitrag{grid-template-columns:1fr; gap:.6rem}}

/* ------------------------------------------------------------ Formular --- */
.formular{
  background:#fff; border:1px solid rgba(14,42,26,.08); border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.4rem); box-shadow:var(--schatten);
}
.formular h2{font-size:clamp(1.35rem,2.2vw,1.75rem)}
.feld{margin-bottom:1.1rem}
.feld label{display:block; font-size:.86rem; font-weight:700; margin-bottom:.4rem; color:var(--moos)}
.feld .pflicht{color:var(--rot)}
.feld input,.feld textarea,.feld select{
  width:100%; padding:.82rem 1rem; font:inherit; font-size:16px; color:var(--text);
  background:var(--creme); border:1.5px solid rgba(14,42,26,.13); border-radius:var(--r-sm);
  transition:border-color .28s ease, box-shadow .28s ease, background-color .28s ease;
}
.feld textarea{min-height:155px; resize:vertical; line-height:1.62}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:0; border-color:var(--tanne); background:#fff; box-shadow:0 0 0 4px rgba(21,154,71,.14);
}
.feld-reihe{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
@media (max-width:640px){.feld-reihe{grid-template-columns:1fr; gap:0}}
.zustimmung{display:flex; gap:.75rem; align-items:flex-start; font-size:.9rem; color:var(--muted); margin-bottom:1.3rem}
.zustimmung input{width:21px; height:21px; margin-top:.15rem; flex:none; accent-color:var(--tanne)}
.zustimmung a{color:var(--tanne-dk); text-decoration:underline; display:inline-flex; align-items:center; min-height:24px}
.hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
/* Sprungziel und Meldung unter der klebenden Kopfleiste (79 px) frei halten (Befund L4) */
#formular,#bestellen,#meldung,.meldung{scroll-margin-top:96px}
.meldung{padding:1.05rem 1.25rem; border-radius:var(--r-md); margin-bottom:1.5rem; font-size:.95rem}
.meldung--ok{background:rgba(21,154,71,.12); border:1px solid rgba(21,154,71,.3); color:#0a5227}
.meldung--err{background:rgba(211,50,48,.08); border:1px solid rgba(211,50,48,.28); color:var(--rot-dk)}

.kontakt-liste{list-style:none; padding:0; margin:0}
.kontakt-liste li{display:flex; gap:.95rem; align-items:flex-start; margin-bottom:1.2rem}
.kontakt-liste__ic{
  flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background:rgba(21,154,71,.12); color:var(--tanne-dk);
}
.kontakt-liste__ic svg{width:19px; height:19px}
.kontakt-liste b{display:block; font-family:var(--ff-display); font-size:1.06rem; font-weight:650;
  color:var(--moos)}
.kontakt-liste a{color:var(--tanne-dk); display:inline-flex; align-items:center; min-height:24px}
.kontakt-liste a:hover{color:var(--rot)}

/* --------------------------------------------------------------- Fuss ---- */
.site-foot{
  position:relative; background:var(--moos); color:rgba(255,255,255,.68);
  padding-block:clamp(4.8rem,8vw,7rem) 2rem; font-size:.93rem; overflow:hidden;
}
.foot__grid{display:grid; grid-template-columns:1.35fr 1.05fr 1fr 1.2fr; gap:clamp(1.6rem,3vw,2.8rem)}
.foot__h{
  color:#fff; font-family:var(--ff-text); font-size:.72rem; font-weight:800;
  letter-spacing:.22em; text-transform:uppercase; margin:0 0 1.35rem; padding-bottom:.75rem;
  border-bottom:1px solid rgba(255,255,255,.14); position:relative;
}
.foot__h::after{content:""; position:absolute; left:0; bottom:-1px; width:36px; height:2px; background:var(--tanne-lt)}
.site-foot ul{list-style:none; padding:0; margin:0}

.foot__logo{display:inline-flex; align-items:center; gap:1rem; margin-bottom:1.4rem}
.foot__logo img{height:60px; width:auto; transition:transform .5s var(--ease)}
.foot__logo:hover img{transform:rotate(-5deg) scale(1.06)}
.foot__logo-txt{display:flex; flex-direction:column; gap:4px; line-height:1.12}
.foot__logo-txt b{font-family:var(--ff-display); font-size:1.22rem; font-weight:650; color:#fff;
  white-space:nowrap}
.foot__logo-txt > span{font-size:.62rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--tanne-lt); white-space:nowrap; font-weight:800}
.foot__brand p{max-width:38ch; font-size:.92rem; line-height:1.7; margin-bottom:1.4rem}
/* Zweig als sehr zurueckhaltende Textur im Fussbereich */
.foot__reisig{
  position:absolute; right:-90px; top:-30px; width:min(38vw,400px); opacity:.09;
  filter:saturate(.4) brightness(1.6); pointer-events:none;
}
@media (max-width:760px){.foot__reisig{display:none}}

.foot__links li{margin:0}
.foot__links{--fic:26px; --fic-lh:1.5}
/* Symbol an der ERSTEN Textzeile ausrichten, nicht mittig zwischen zweien -
   sonst schwebt es bei einem umgebrochenen Eintrag in der Luecke.
   Gleiche Technik wie in der Kontaktspalte darunter. */
.foot__links a{
  position:relative; display:flex; align-items:flex-start; gap:.55rem;
  padding:.44rem 1.1rem .44rem 0; line-height:var(--fic-lh);
  color:rgba(255,255,255,.7); transition:color .3s ease;
}
.foot__li-txt{padding-top:calc((var(--fic) - 1em * var(--fic-lh)) / 2)}
/* Symbol je Eintrag - kleiner und leiser als in der Kontaktspalte, damit die
   Liste eine Spur bekommt, ohne mit den Kontaktdaten zu konkurrieren. */
.foot__li-ic{
  flex:none; width:var(--fic); height:var(--fic); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(79,193,122,.1); color:var(--tanne-lt);
  transition:background-color .3s ease, color .3s ease;
}
.foot__li-ic svg{width:14px; height:14px}
.foot__li-txt{flex:1 1 auto; min-width:0}
.foot__ch{
  position:absolute; right:0; top:calc(.44rem + var(--fic) / 2); display:inline-flex; opacity:0;
  transform:translate(-6px,-50%);
  transition:opacity .3s ease, transform .35s var(--ease);
}
.foot__ch svg{width:13px; height:13px; color:var(--tanne-lt)}
.foot__links a:hover{color:#fff}
.foot__links a:hover .foot__li-ic{background:var(--tanne); color:#fff}
.foot__links a:hover .foot__ch{opacity:1; transform:translate(0,-50%)}

.foot__contact{--ic:34px; --ic-lh:1.55}
.foot__contact li{display:flex; gap:.85rem; align-items:flex-start; margin:0 0 1rem; line-height:var(--ic-lh)}
.foot__contact li:last-child{margin-bottom:0}
.foot__contact li > :not(.foot__ic){padding-top:calc((var(--ic) - 1em * var(--ic-lh)) / 2)}
.foot__ic{
  flex:none; width:var(--ic); height:var(--ic); border-radius:10px; display:grid; place-items:center;
  background:rgba(79,193,122,.14); border:1px solid rgba(79,193,122,.28); color:var(--tanne-lt);
}
.foot__ic svg{width:14px; height:14px}
.foot__contact a{color:rgba(255,255,255,.7); transition:color .3s ease;
  display:inline-flex; align-items:center; min-height:24px}
.foot__contact a:hover{color:var(--tanne-lt)}

/* Unterstreichung in den Logofarben – waechst beim Ueberfahren von links auf */
.site-foot .foot__links a,
.site-foot .foot__contact a,
.site-foot .foot__bar nav a,
.site-foot .foot__credit,
.site-foot .foot__logo{position:relative}
.site-foot .foot__links a::after,
.site-foot .foot__contact a::after,
.site-foot .foot__bar nav a::after,
.site-foot .foot__credit::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--tanne-dk) 0%,var(--tanne) 45%,var(--tanne-lt) 100%);
  transform:scaleX(0); transform-origin:left center; transition:transform .38s var(--ease);
}
.site-foot .foot__links a:hover::after,
.site-foot .foot__links a:focus-visible::after,
.site-foot .foot__contact a:hover::after,
.site-foot .foot__contact a:focus-visible::after,
.site-foot .foot__bar nav a:hover::after,
.site-foot .foot__bar nav a:focus-visible::after,
.site-foot .foot__credit:hover::after,
.site-foot .foot__credit:focus-visible::after{transform:scaleX(1)}
.site-foot .foot__links a::after{right:auto; width:calc(100% - 1.05rem)}
.site-foot .foot__contact a::after{bottom:-3px}
.site-foot .foot__credit::after{bottom:-4px; height:1.5px}
@media (prefers-reduced-motion:reduce){
  .site-foot .foot__links a::after,.site-foot .foot__contact a::after,
  .site-foot .foot__bar nav a::after,.site-foot .foot__credit::after{transition:none}
}

/* Saisonleiste im Fuss */
.foot__trust{
  display:flex; align-items:center; gap:clamp(1rem,2.4vw,1.9rem); flex-wrap:wrap;
  margin-top:clamp(2.6rem,4.5vw,3.8rem); padding:1.3rem 1.5rem;
  border:1px solid rgba(79,193,122,.28); border-radius:var(--r-md);
  background:linear-gradient(120deg,rgba(79,193,122,.13),rgba(79,193,122,.02));
}
.foot__trust img{width:66px; height:auto; flex:none; border-radius:12px; background:#fff; padding:6px}
.foot__trust > div{flex:1 1 320px; min-width:0}
.foot__trust b{display:block; font-family:var(--ff-display); font-size:1.1rem; font-weight:650;
  color:#fff; margin-bottom:.25rem}
.foot__trust span{font-size:.85rem; line-height:1.6; color:rgba(255,255,255,.66)}
.foot__trust .btn{flex:none; padding:.75em 1.45em; font-size:.9rem}
.foot__trust .btn span{color:inherit; font-size:inherit; line-height:inherit}

.foot__bar{
  display:grid; grid-template-columns:1fr auto 1fr; gap:.7rem 1.6rem; align-items:center;
  margin-top:clamp(2rem,3.4vw,2.8rem); padding-top:1.7rem; border-top:1px solid rgba(255,255,255,.1);
  font-size:.85rem; color:rgba(255,255,255,.58);   /* 5,6:1 statt 4,36:1 - WCAG AA */
}
.foot__bar nav{display:flex; gap:1.4rem; flex-wrap:wrap}
/* Mindestgroesse der Ziele nach WCAG 2.1 AA (2.5.8): 24 px */
.foot__bar nav a{display:inline-flex; align-items:center; min-height:24px}
.foot__credit{
  display:inline-flex; align-items:center; gap:5px; min-height:24px; font-size:.73rem;
  letter-spacing:.02em; color:rgba(255,255,255,.26); transition:color .3s ease; text-align:center;
  justify-self:center;
}
.foot__credit:hover{color:rgba(255,255,255,.64)}
.foot__heart{color:#e8615a; font-size:.73rem; line-height:1;
  transition:color .3s ease, transform .3s var(--ease)}
.foot__credit:hover .foot__heart{color:#e0574f; transform:scale(1.2)}
.foot__bar > p{justify-self:start; margin:0}
.foot__bar > nav{justify-self:end}
@media (max-width:1000px){
  .foot__bar{grid-template-columns:1fr; text-align:center; gap:1rem}
  .foot__bar > p,.foot__bar > nav,.foot__credit{justify-self:center}
  .foot__bar nav{justify-content:center}
  .foot__bar > nav{order:1}
  .foot__bar > p{order:2}
  .foot__bar > .foot__credit{order:3}
}
.site-foot a{transition:color .3s ease}
.foot__bar a:hover{color:var(--tanne-lt)}
@media (max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}}
@media (max-width:600px){.foot__grid{grid-template-columns:1fr}}

/* ----------------------------------------------------------- Nach oben --- */
.to-top{
  position:fixed; right:clamp(1rem,2.4vw,2rem); bottom:clamp(1rem,2.4vw,2rem); z-index:75;
  width:54px; height:54px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(14,42,26,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:grid; place-items:center; color:#fff;
  box-shadow:0 14px 34px rgba(14,42,26,.36);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s,
             background-color .3s ease, color .3s ease;
}
.to-top.is-on{opacity:1; visibility:visible; transform:none}
.to-top:hover{background:var(--tanne); color:#fff; transform:translateY(-3px)}
.to-top__ring{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg)}
.to-top__ring circle{fill:none; stroke-width:2.4}
.to-top__bg{stroke:rgba(255,255,255,.17)}
.to-top__prog{stroke:var(--tanne-lt); stroke-linecap:round; stroke-dasharray:132; stroke-dashoffset:132;
  transition:stroke-dashoffset .12s linear}
.to-top:hover .to-top__prog{stroke:#fff}
.to-top__ico svg{width:20px; height:20px}

/* --------------------------------------------------------- Animationen --- */
[data-reveal]{opacity:0; transform:translateY(26px);
  transition:opacity .75s var(--ease), transform .85s var(--ease)}
[data-reveal="links"]{transform:translateX(-32px)}
[data-reveal="rechts"]{transform:translateX(32px)}
[data-reveal="zoom"]{transform:scale(.94)}
/* Nur nach oben einblenden, solange der Inhalt die Fensterbreite ausfuellt: die
   seitliche Verschiebung schiebt den Block sonst ueber den rechten Rand hinaus,
   solange er noch nicht eingeblendet ist (gemessen 13 px bei 768-1240 px).
   Erst ab 1300 px bleibt links und rechts genug Luft fuer die Bewegung. */
@media (max-width:1299px){
  [data-reveal="links"],[data-reveal="rechts"]{transform:translateY(26px)}
}
[data-reveal].is-in{opacity:1; transform:none}
[data-reveal][data-delay="1"]{transition-delay:.09s}
[data-reveal][data-delay="2"]{transition-delay:.18s}
[data-reveal][data-delay="3"]{transition-delay:.27s}
[data-reveal][data-delay="4"]{transition-delay:.36s}
[data-reveal][data-delay="5"]{transition-delay:.45s}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important; transform:none!important; transition:none!important}
  .hero__bg img{transform:none!important}
  *{animation-duration:.001ms!important; animation-iteration-count:1!important}
}

/* Trennlinie mit Zweig */
.trenner{display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-block:clamp(2rem,4vw,3rem)}
.trenner::before,.trenner::after{content:""; height:1px; flex:1 1 auto; max-width:190px;
  background:linear-gradient(90deg,transparent,rgba(21,154,71,.4),transparent)}
.trenner__zeichen{
  width:16px; height:14px; flex:none; background:var(--tanne);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.sec--dunkel .trenner__zeichen{background:var(--tanne-lt)}
.sec--dunkel .trenner::before,.sec--dunkel .trenner::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent)}

/* Druck */
@media print{
  .site-head,.mnav,.to-top,.reisig,.schnee,.girlande,.baumreihe,.orte-band,.cta,.btn{display:none!important}
  body{background:#fff; color:#000; font-size:11pt}
  .site-foot{background:#fff; color:#000; padding-block:1rem}
  [data-reveal]{opacity:1!important; transform:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:#555}
}

/* Mobil: Navigation umschalten */
@media (max-width:1120px){
  .hnav,.head__cta{display:none}
  .burger{display:inline-flex}
}
@media (min-width:1121px){
  .mnav{display:none}
}

/* ========================================================= Hinweis-Popup ==
   Wird von der PHP-Schicht (inc/render.php) angehaengt, solange im CMS ein
   Hinweis laeuft. Der Inhalt kommt aus data/urlaub.json. */
.popup-lage{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:clamp(1rem,4vw,2rem); background:rgba(7,24,14,.62);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  opacity:0; transition:opacity .35s var(--ease);
}
.popup-lage.is-auf{opacity:1}
/* Wichtig: display:grid wuerde das [hidden]-Attribut aushebeln. Ohne diese
   Zeile bliebe das Fenster stehen, obwohl es versteckt sein soll - und ohne
   JavaScript liesse es sich gar nicht schliessen. */
.popup-lage[hidden]{display:none}
.popup-box{
  position:relative; width:min(100%,520px); max-height:calc(100vh - 2rem); overflow-y:auto;
  background:var(--creme); border-radius:var(--r-lg); box-shadow:0 40px 90px rgba(7,24,14,.45);
  transform:translateY(18px) scale(.97); transition:transform .42s var(--ease);
}
.popup-lage.is-auf .popup-box{transform:none}
.popup-box:focus{outline:none}
@media (prefers-reduced-motion:reduce){
  .popup-lage,.popup-box{transition:none}
  .popup-box{transform:none}
}
.popup-kopf{
  position:relative; padding:clamp(1.6rem,4vw,2.2rem) clamp(1.4rem,4vw,2.2rem) 1.3rem;
  background:var(--moos); color:#fff; border-radius:var(--r-lg) var(--r-lg) 0 0; overflow:hidden;
}
.popup-kopf .kicker{color:var(--tanne-hell); margin-bottom:.5rem}
.popup-kopf h2{color:#fff; font-size:clamp(1.45rem,3.4vw,1.95rem); margin:0 0 .6rem}
.popup-ikon{
  display:grid; place-items:center; width:52px; height:52px; border-radius:16px; margin-bottom:1rem;
  background:rgba(79,193,122,.2); color:var(--tanne-hell);
}
.popup-ikon svg{width:26px; height:26px}
.popup-zeit{
  display:inline-flex; align-items:center; gap:.5rem; margin:0; position:relative; z-index:1;
  font-size:.92rem; font-weight:650; color:rgba(255,255,255,.85);
}
.popup-zeit svg{width:16px; height:16px; color:var(--tanne-hell)}
.popup-fahne{
  position:absolute; top:1rem; right:3.4rem; padding:.28rem .7rem; border-radius:99px;
  background:var(--rot); color:#fff; font-size:.68rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
}
.popup-zu{
  position:absolute; top:.9rem; right:.9rem; z-index:3; width:38px; height:38px; padding:0;
  border:0; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  background:rgba(255,255,255,.14); color:#fff; transition:background-color .25s ease;
}
.popup-zu:hover{background:rgba(255,255,255,.3)}
.popup-zu svg{width:17px; height:17px}
.popup-inhalt{padding:clamp(1.3rem,4vw,1.8rem) clamp(1.4rem,4vw,2.2rem) clamp(1.4rem,4vw,2rem)}
.popup-inhalt > p{margin:0 0 1.2rem; color:var(--text)}
.popup-nummern{
  border-top:1px solid rgba(14,42,26,.12); padding-top:1.1rem; margin-bottom:1.3rem;
}
.popup-nummern-titel{
  margin:0 0 .7rem; font-size:.76rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.popup-nr{
  display:flex; align-items:center; gap:.8rem; padding:.6rem .8rem; border-radius:var(--r-sm);
  margin-bottom:.45rem; background:#fff; border:1px solid rgba(14,42,26,.09);
  transition:border-color .25s ease, transform .3s var(--ease);
}
.popup-nr:hover{border-color:var(--tanne); transform:translateX(3px)}
.popup-nr-ic{
  flex:none; width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background:rgba(21,154,71,.12); color:var(--tanne-dk);
}
.popup-nr-ic svg{width:17px; height:17px}
.popup-nr-txt b{display:block; font-size:.78rem; color:var(--muted); font-weight:700}
.popup-nr-txt span{font-weight:700; color:var(--moos)}
.popup-btns{display:flex; gap:.7rem; flex-wrap:wrap}
.popup-btns .btn{flex:1 1 auto}
body.popup-auf{overflow:hidden}

/* ============================================================== Preise ==== */
/* Preisorientierung auf /privatkunden. Bewusst als Liste mit Spannen, nicht
   als Preistabelle mit Fixpreisen: verkauft wird nach Groesse und Qualitaet. */
.preise{
  list-style:none; margin:0; padding:0; display:grid; gap:.5rem;
  background:#fff; border-radius:var(--r-md); padding:.7rem;
  box-shadow:var(--schatten);
}
.preise__z{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.2rem;
  padding:.95rem 1.1rem; border-radius:var(--r-sm);
  transition:background .25s ease;
}
.preise__z:nth-child(odd){background:rgba(14,42,26,.032)}
.preise__z:hover{background:rgba(21,154,71,.07)}
.preise__was{font-weight:650; color:var(--moos); min-width:0}
.preise__was small{
  display:block; margin-top:.15rem; font-size:.82rem; font-weight:500; color:var(--muted);
}
.preise__p{
  flex:none; font-family:var(--ff-display); font-size:1.3rem; font-weight:600;
  color:var(--tanne-dk); letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.preise__hinweis{
  margin:1.3rem auto 0; max-width:62ch; text-align:center;
  font-size:.9rem; color:var(--muted);
}
@media (max-width:520px){
  .preise__z{flex-direction:column; gap:.15rem}
  .preise__p{font-size:1.15rem}
}

/* Zwei ungleiche Spalten im Bestellformular der Gutscheinseite. Unterhalb von
   640px greift wieder die einspaltige Grundregel. */
.feld-reihe--anzahl{grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}
.feld-reihe--bis{grid-template-columns:minmax(0,1fr) minmax(0,.6fr)}
@media (max-width:640px){
  .feld-reihe--anzahl,.feld-reihe--bis{grid-template-columns:1fr; gap:0}
}

/* ----------------------------------------------------------- Merkmale ---- */
/* Kurze Punkte neben einem hochformatigen Bild. Ohne sie steht die Textspalte
   halb leer und das Bild wirkt uebermaechtig. */
.merkmale{list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.7rem}
.merkmale li{
  display:flex; align-items:flex-start; gap:.7rem;
  font-size:.97rem; font-weight:550; color:var(--moos); line-height:1.5;
}
.merkmale svg{
  width:20px; height:20px; flex:none; margin-top:.1rem; padding:3px; border-radius:50%;
  color:#fff; background:var(--tanne); stroke-width:3;
}
.sec--dunkel .merkmale li{color:rgba(255,255,255,.86)}
.merkmale--zwei{
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem 2rem; margin-top:0;
}
@media (max-width:640px){.merkmale--zwei{grid-template-columns:1fr}}
/* Abschliessender Satz unter einer Aufzaehlung */
.nachsatz{
  margin:1.7rem auto 0; max-width:56ch; text-align:center;
  font-size:.95rem; color:var(--muted);
}