/* ==========================================================================
   Kunstspirale e.V. / Haus Kasparland
   Designsystem v2 — Bildsprache orientiert an knapsackcreative.com
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Grundflächen */
  --cream:      #fcfcfc;
  --cream-2:    #f0f0f0;
  --paper:      #FFFFFF;

  /* Dunkles Waldgrün */
  --forest:     #263d40;
  --forest-deep:#192729;
  --forest-soft:#35545A;
  --forest-btn: #203437;   /* Hero-Sekundärbutton */
  --forest-btn-bd:#16302a;

  /* Akzente */
  --orange:     #EC7404;   /* Logo-Orange: Flächen, Buttons, Grafik */
  --orange-btn: #ec7404;   /* Orange als TEXT auf Hell */
  --orange-dark:#954603;
  --himbeer:    #D6336C;   /* kleine Überschriften in Großbuchstaben auf Hell */
  --olive:      #F07AA1;   /* Hell-Pink: nur als Schrift auf dunklen Flächen (Flächen nehmen Orange) */
  --olive-text: #6E6912;

  /* Text */
  --ink:        #2C2C28;
  --ink-2:      #55554F;
  --ink-3:      #66665F;
  --on-dark:    #f4f3f0;
  --on-dark-2:  #dce7e5;

  /* Farben der vier Terminkategorien. Sie lassen sich im Customizer aendern;
     dort gesetzte Werte ueberschreiben diese Vorgaben im Kopf der Seite. */
  /* Kategoriefarben des Terminkalenders. Vier gedeckte Töne, im Farbkreis rund
     90 Grad auseinander (28° / 201° / 328° / 82°) und unterschiedlich hell -
     dadurch bleiben sie auch als blasse Fläche, als schmaler Balken und in
     Schwarzweiß auseinanderzuhalten, ohne grell zu wirken. */
  --kat-treff:         #EC7404;
  --kat-kurs:          #2F6F8F;
  --kat-markt:         #8E3B63;
  --kat-veranstaltung: #5B7A22;

  --line:       rgba(44,44,40,.14);
  --line-strong:rgba(44,44,40,.28);
  --line-dark:  rgba(244,243,240,.20);
  --shadow-sm:  0 2px 4px rgba(25,39,41,.05), 0 10px 24px -16px rgba(25,39,41,.30);
  --shadow-md:  0 4px 10px rgba(25,39,41,.07), 0 28px 50px -28px rgba(25,39,41,.40);

  /* Typografie */
  --font-head: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Inconsolata", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(2.9rem, 1.3rem + 5.2vw, 5.4rem);
  --fs-h1:      clamp(2.4rem, 1.4rem + 3.4vw, 4.1rem);
  --fs-h2:      clamp(2rem,   1.35rem + 2.4vw, 3.25rem);
  --fs-h3:      clamp(1.35rem,1.08rem + .95vw, 1.85rem);
  --fs-body:    clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --fs-small:   .9375rem;
  --fs-meta:    .8125rem;

  /* Raster */
  --wrap: 1240px;
  --wrap-narrow: 820px;
  --gutter: clamp(1.25rem, .6rem + 2.4vw, 2.5rem);
  --section: clamp(4.5rem, 2.6rem + 6vw, 8.5rem);
  --gap: clamp(1.25rem, .8rem + 1.4vw, 2rem);
  --rip-h: clamp(26px, 3.2vw, 52px);

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-pill: 999px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Basis ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-body);
  line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{
  font-family:var(--font-head);font-weight:600;
  line-height:1.04;letter-spacing:-.018em;margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.14}
h4{font-size:1.2rem;line-height:1.25}
p{margin:0 0 1.1em;max-width:66ch}
a{color:var(--orange-btn);text-underline-offset:.18em;text-decoration-thickness:.07em}
a:hover{color:var(--orange-dark)}
:focus-visible{outline:3px solid var(--orange-btn);outline-offset:3px;border-radius:3px}
.band--orange :focus-visible{outline-color:var(--forest-deep)}
.on-dark :focus-visible,.band--forest :focus-visible,.band--orange :focus-visible{outline-color:var(--olive)}
::selection{background:var(--orange);color:var(--forest-deep)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:3}

/* Sprungmarken: Der Kopfbereich bleibt beim Scrollen stehen. Ohne diesen
   Abstand landet die Überschrift, zu der gesprungen wird, dahinter. */
:root{--ks-anchor:104px}
[id]{scroll-margin-top:var(--ks-anchor)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.sr-only{position:absolute;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:-9999px;top:0;z-index:200;background:var(--forest);color:var(--on-dark);padding:.85rem 1.4rem}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip:focus{left:0}

/* ---------- 3. Bänder & Riss-Kanten -------------------------------------- */
.band{position:relative;padding-block:var(--section)}
.band--cream{background:var(--cream)}
.band--cream2{background:var(--cream-2)}
.band--paper{background:var(--paper)}
.band--forest{background:var(--forest);color:var(--on-dark)}
.band--orange{background:var(--orange);color:var(--forest-deep)}
.band--riptop{padding-top:calc(var(--section) + var(--rip-h))}
.band--ripbottom{padding-bottom:calc(var(--section) + var(--rip-h))}

.band--forest h1,.band--forest h2,.band--forest h3,.band--forest h4,
.band--orange h1,.band--orange h2,.band--orange h3,.band--orange h4{color:inherit}
.band--forest p{color:var(--on-dark-2)}
.band--orange p{color:rgba(25,39,41,.86)}

.rip{
  position:absolute;left:0;width:100%;height:var(--rip-h);
  background:var(--rip-fill,var(--cream));
  z-index:2;pointer-events:none;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-position:center;mask-position:center;
}
.rip--top{top:-1px}
.rip--bottom{bottom:-1px}

/* Topografie-Textur für dunkle Bänder */
.topo::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url("topo.svg") center/cover no-repeat;
  opacity:.07;
}

/* ---------- 4. Typo-Hilfsklassen ----------------------------------------- */
.eyebrow{
  font-family:var(--font-mono);font-size:.8125rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--himbeer);
  margin:0 0 1.1rem;display:block;
}
.band--forest .eyebrow{color:var(--olive)}
.band--orange .eyebrow{color:var(--forest-deep)}
.pagehero .eyebrow{color:var(--orange-btn)} /* dunkler Kopfbereich: bleibt Orange */
.lead{font-size:clamp(1.15rem,1.02rem + .6vw,1.4rem);line-height:1.55;color:var(--ink-2);max-width:56ch}
.band--forest .lead{color:var(--on-dark-2)}
.band--orange .lead{color:rgba(25,39,41,.9)}
.muted{color:var(--ink-3)}
.accent{color:var(--orange)}
.band--forest .accent{color:var(--olive)}
.hand{
  font-family:var(--font-head);font-style:italic;font-weight:500;
  color:var(--orange-btn);letter-spacing:-.01em;
}
.band--forest .hand{color:var(--olive)}
.band--orange .hand{color:var(--forest-deep)}

.section-head{margin-bottom:clamp(2.2rem,1.2rem + 2.6vw,3.75rem);max-width:52rem}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .lead{margin-inline:auto}
.section-head p:last-child{margin-bottom:0}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:1.25rem var(--gap);flex-wrap:wrap;margin-bottom:clamp(2.2rem,1.2rem + 2.6vw,3.75rem)}
.head-row > .section-head{flex:1 1 30rem}
.head-row > .btn,.head-row > .textlink{flex:0 0 auto;margin-bottom:.4rem}
.head-row > .section-head{margin-bottom:0}

/* ---------- 5. Buttons --------------------------------------------------- */
.btn{
  --b-bg:var(--orange);--b-fg:var(--forest-deep);--b-bd:var(--orange);
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  min-height:56px;padding:.9rem 1.75rem;
  background:var(--b-bg);color:var(--b-fg);border:2px solid var(--b-bd);
  border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:.875rem;
  letter-spacing:.11em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.16);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.btn::after{content:"";width:0;height:0;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;flex:none}
.btn:hover{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.16);color:var(--b-fg)}
.btn--forest{--b-bg:var(--forest-btn);--b-fg:#fff;--b-bd:var(--forest-btn-bd)}
.btn--olive{--b-bg:var(--orange);--b-fg:var(--forest-deep);--b-bd:var(--orange)}
.btn--dark{--b-bg:var(--forest);--b-fg:var(--cream);--b-bd:var(--forest)}
.btn--ghost{--b-bg:transparent;--b-fg:var(--ink);--b-bd:rgba(44,44,40,.32);box-shadow:none}
.btn--ghost:hover{--b-bg:var(--ink);--b-fg:var(--cream);--b-bd:var(--ink)}
.btn--ghost-light{--b-bg:transparent;--b-fg:var(--cream);--b-bd:rgba(246,242,234,.5);box-shadow:none}
.btn--ghost-light:hover{--b-bg:var(--cream);--b-fg:var(--forest);--b-bd:var(--cream)}
.btn--sm{min-height:46px;padding:.55rem 1.15rem;font-size:.75rem;letter-spacing:.09em}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}

.textlink{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-body);font-weight:800;font-size:.8125rem;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--orange-btn);text-decoration:none;
  transition:gap .2s var(--ease);
}
.textlink::after{content:"→"}
.textlink:hover{gap:.9rem}
.band--forest .textlink{color:var(--olive)}
.band--orange .textlink{color:var(--forest-deep)}

/* ---------- 6. Badges & Sterne -------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.32rem .72rem;border-radius:var(--r-pill);
  background:var(--cream-2);color:var(--ink);
  font-family:var(--font-mono);font-size:.75rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.badge--orange{background:var(--orange);color:var(--forest-deep)}
.badge--olive{background:var(--olive);color:var(--forest-deep)}
.badge--forest{background:var(--forest);color:var(--on-dark)}
.badge--outline{background:transparent;border:1.5px solid var(--line);color:var(--ink-2)}
/* Auf den Karten tragen Thema und Zielgruppe verschiedene Farben:
   das Thema die Hausfarbe, die Zielgruppe bleibt hell und ruhig. */
.badge--thema{background:var(--orange);color:var(--forest-deep)}
.badge--ziel{background:var(--paper);color:var(--ink);border:1.5px solid var(--line-strong)}
.band--forest .badge{background:rgba(246,242,234,.14);color:var(--on-dark)}
.band--forest .badge--olive{background:var(--olive);color:var(--forest-deep)}
.band--forest .badge--thema{background:var(--orange);color:var(--forest-deep)}
.band--forest .badge--ziel{background:var(--paper);color:var(--ink);border-color:transparent}

.stars{display:flex;align-items:center;gap:.55rem;font-size:var(--fs-small);color:var(--ink-2)}
.stars__row{display:flex;gap:.15rem;color:var(--orange-btn)}
.stars svg{width:18px;height:18px;fill:currentColor}

/* ---------- 7. Header ----------------------------------------------------- */
.topbar{background:var(--forest-deep);color:var(--on-dark-2);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.3rem 1.6rem;align-items:center;justify-content:space-between;min-height:38px;padding-block:.35rem}
.topbar a{color:var(--olive);text-decoration:none}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar-info{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}

.site-header{position:sticky;top:0;z-index:60;background:var(--cream);border-bottom:1px solid var(--line)}
/* Kopf, Fuß und Inhalt teilen sich dieselbe Breite (--wrap). */
.site-header .wrap{display:flex;align-items:center;gap:clamp(1rem,.4rem + 1.6vw,2rem);min-height:88px}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--forest);flex:none}
.brand svg{flex:none}
.brand > span{display:block}
.brand__logo{flex:none;width:auto;height:46px;display:block}
.site-footer .brand__logo,.mobile-nav .brand__logo{height:42px}
.brand-name{font-family:var(--font-head);font-size:1.5rem;font-weight:600;line-height:1;letter-spacing:-.03em;text-transform:uppercase;display:block}
.brand-sub{display:block;font-family:var(--font-mono);font-size:.6875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:.28rem}

.nav{margin-left:auto;display:flex;align-items:center;gap:0;flex-wrap:nowrap}
.nav a{
  display:block;padding:.65rem clamp(.35rem,.05rem + .55vw,.75rem);border-radius:var(--r-sm);white-space:nowrap;
  color:var(--forest);text-decoration:none;
  font-size:.78rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  transition:color .18s var(--ease),background .18s var(--ease);
}
.nav a:hover{background:var(--cream-2);color:var(--orange-btn)}
.nav > a.is-current,.nav__group > a.is-current{color:var(--orange-btn)}

/* Menüpunkte mit Unterpunkten: Link bleibt klickbar, der Pfeil klappt auf. */
.nav__group{position:relative;display:flex;align-items:center}
.nav__group > a{padding-right:.2rem}
.nav__caret{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:1.15rem;height:1.9rem;padding:0;
  border:0;border-radius:var(--r-sm);background:none;color:var(--forest);cursor:pointer;
}
.nav__caret-icon{
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;transition:transform .18s var(--ease);
}
.nav__caret:hover{background:var(--cream-2);color:var(--orange-btn)}
.nav__group[data-open="true"] > a,
.nav__group[data-open="true"] .nav__caret{background:var(--cream-2);color:var(--orange-btn)}
.nav__group[data-open="true"] .nav__caret-icon{transform:rotate(180deg)}
.nav__panel{
  position:absolute;top:calc(100% + .5rem);left:0;z-index:70;min-width:15rem;max-width:22rem;
  padding:.4rem;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
}
.nav__panel[hidden]{display:none}
.nav__panel::before{content:"";position:absolute;left:0;right:0;top:-.5rem;height:.5rem}
.nav__panel ul{list-style:none;margin:0;padding:0}
.nav__panel a{
  display:block;padding:.55rem .7rem;border-radius:var(--r-sm);white-space:normal;
  font-size:.74rem;letter-spacing:.06em;
}
.nav__panel a:hover{background:var(--cream-2);color:var(--orange-btn)}
.nav__panel a.is-current{color:var(--orange-btn)}
@media (max-width:1079px){
  .nav__panel{left:auto;right:0}
}

.nav-cta{margin-left:.5rem;flex:none}
.nav-cta .btn{white-space:nowrap}
.burger{display:none;margin-left:auto;width:46px;height:46px;border:0;border-radius:var(--r-sm);background:transparent;cursor:pointer;align-items:center;justify-content:center}
.burger:hover{background:var(--cream-2)}
.burger span,.burger span::before,.burger span::after{width:22px}
.burger span{display:block;width:20px;height:2.5px;background:var(--forest);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2.5px;background:var(--forest)}
.burger span::before{top:-6px}
.burger span::after{top:6px}

.mobile-nav{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none}
.mobile-nav[data-open="true"]{visibility:visible;pointer-events:auto}

.mobile-nav__scrim{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;padding:0;margin:0;cursor:pointer;appearance:none;
  background:rgba(25,39,41,.6);opacity:0;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:opacity .32s var(--ease);
}
.mobile-nav[data-open="true"] .mobile-nav__scrim{opacity:1}

.mobile-nav__panel{
  position:absolute;top:0;left:0;right:0;
  background:var(--forest);color:var(--on-dark);
  overflow:visible;
  transform:translateY(-103%);transition:transform .38s var(--ease);
  box-shadow:0 24px 44px -22px rgba(25,39,41,.75);
}
.mobile-nav[data-open="true"] .mobile-nav__panel{transform:translateY(0)}
.mobile-nav__tear{top:100%;bottom:auto}
.mobile-nav__panel > .wrap{max-height:calc(100vh - var(--rip-h) - .5rem);max-height:calc(100dvh - var(--rip-h) - .5rem);overflow-y:auto;overscroll-behavior:contain}

.mobile-nav__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:66px;border-bottom:1px solid var(--line-dark)}
.mobile-nav .brand{color:var(--cream);gap:.6rem}
.mobile-nav .brand__logo{height:32px}
.mobile-nav .brand-name{font-size:1.05rem;letter-spacing:.01em}
.mobile-nav .brand-sub{font-size:.6rem;letter-spacing:.18em;margin-top:.18rem;color:var(--on-dark-2)}
.mobile-nav__close{
  flex:none;width:44px;height:44px;border:1.5px solid var(--line-dark);border-radius:var(--r-sm);
  background:transparent;font-size:1.05rem;line-height:1;cursor:pointer;color:var(--cream);
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.mobile-nav__close:hover{background:rgba(244,243,240,.1);border-color:rgba(244,243,240,.4)}

.mobile-nav__list{list-style:none;margin:0;padding:.7rem 0 0;counter-reset:mn}
.mobile-nav__list li{counter-increment:mn}
.mobile-nav__list a{
  display:flex;align-items:center;gap:.85rem;min-height:46px;
  padding:.55rem .75rem;border-radius:var(--r-sm);
  font-size:1.0625rem;font-weight:700;letter-spacing:.005em;
  color:var(--cream);text-decoration:none;
  transition:background .18s var(--ease),padding-left .18s var(--ease);
}
.mobile-nav__list a::before{
  content:counter(mn,decimal-leading-zero);flex:none;
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.06em;
  color:rgba(195,205,203,.62);
}
.mobile-nav__list a::after{
  content:"";margin-left:auto;flex:none;width:0;height:0;
  border-left:6px solid var(--olive);border-top:4px solid transparent;border-bottom:4px solid transparent;
}
.mobile-nav__list a:hover,.mobile-nav__list a:focus-visible{background:rgba(244,243,240,.09);padding-left:1rem}
/* Einträge mit Unterpunkten: Link links, Aufklapp-Schalter rechts. */
.mobile-nav__list li.has-sub{display:flex;flex-wrap:wrap;align-items:center}
.mobile-nav__list li.has-sub > a{flex:1 1 auto;min-width:0}
.mobile-nav__list li.has-sub > a::after{display:none}
.mobile-nav__toggle{
  flex:none;width:46px;min-height:46px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--r-sm);background:none;color:var(--olive);cursor:pointer;
}
.mobile-nav__toggle:hover{background:rgba(244,243,240,.09)}
.mobile-nav__caret{
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid currentColor;transition:transform .18s var(--ease);
}
.mobile-nav__toggle[aria-expanded="true"] .mobile-nav__caret{transform:rotate(180deg)}
.mobile-nav__sub{
  list-style:none;flex:1 0 100%;margin:.1rem 0 .5rem;padding:0 0 0 1.6rem;
  border-left:2px solid rgba(195,205,203,.28);
}
.mobile-nav__sub[hidden]{display:none}
.mobile-nav__sub li{counter-increment:none}
.mobile-nav__sub a{min-height:40px;font-size:.95rem;font-weight:600}
.mobile-nav__sub a::before{display:none}

.mobile-nav__list .is-primary{counter-increment:none;margin-bottom:.4rem}
.mobile-nav__list .is-primary a{background:var(--orange);color:var(--forest-deep)}
.mobile-nav__list .is-primary a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--forest-deep)}
.mobile-nav__list .is-primary a::after{border-left-color:var(--forest-deep)}
.mobile-nav__list .is-primary a:hover{background:var(--orange);filter:brightness(1.06)}

.mobile-nav__foot{
  display:flex;gap:.6rem;flex-wrap:wrap;
  margin-top:.9rem;padding:.9rem 0 1.5rem;border-top:1px solid var(--line-dark);
}
.mobile-nav__foot .btn{flex:1 1 9rem;width:auto;min-width:0;min-height:44px;padding:.5rem .85rem;font-size:.72rem;letter-spacing:.08em}

/* ---------- 8. Hero ------------------------------------------------------- */
.hero{position:relative;background:var(--forest-deep);overflow:hidden;padding-block:1.5rem calc(clamp(3.5rem,2rem + 7vw,7.5rem) + var(--rip-h))}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(94deg, var(--cream) 0%, var(--cream) 34%, rgba(246,242,234,.92) 46%, rgba(246,242,234,.35) 62%, rgba(246,242,234,0) 78%),
    linear-gradient(180deg, rgba(22,48,42,.25), rgba(22,48,42,.05));
}
.hero__inner{position:relative;z-index:3;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.hero__body{max-width:36rem}
.hero h1{font-size:var(--fs-display);margin-bottom:.3em;color:var(--forest)}
.hero h1 span{display:block}
.hero h1 .hand{display:block}
.hero__kicker{font-family:var(--font-mono);font-size:.8125rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--himbeer);margin:0 0 1.2rem}
.hero .lead{color:var(--ink-2);margin-bottom:2rem}
.hero__trust{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
.hero__quote{font-family:var(--font-head);font-style:italic;font-size:1.05rem;color:var(--ink-2);max-width:26rem;margin:0}
@media (max-width:899px){
  .hero__scrim{background:linear-gradient(180deg,rgba(246,242,234,.94) 0%,rgba(246,242,234,.9) 55%,rgba(246,242,234,.82) 100%)}
}

/* ---------- 9. Meldungsband -------------------------------------------------
   Steht direkt unter dem Kopfbild, wenn Beiträge als wichtig markiert sind -
   sonst gar nicht. Zwei Darstellungen, umschaltbar im Customizer. Das Wechseln
   macht ks.js; ohne Skript stehen die Meldungen schlicht untereinander.
   Das Band ist grün wie der Abschnitt "Haus Kasparland" - alle Farben darin
   sind deshalb die hellen Varianten für dunklen Grund. */
.hot{position:relative;background:var(--forest);color:var(--on-dark);border-bottom:1px solid var(--line-dark)}
.hot :focus-visible{outline-color:var(--olive)}
/* Mit gerissener Unterkante: Platz für die Zacke, und die feine Linie
   entfällt - die Kante übernimmt die Trennung. */
.hot--zacke{border-bottom:0;padding-bottom:var(--rip-h)}
.hot .wrap{display:flex;align-items:center;gap:1.2rem;padding-block:1.05rem;min-height:66px}

.hot__flag{
  display:inline-flex;align-items:center;gap:.6rem;flex:none;margin:0;
  font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--olive);
}
.hot__dot{width:8px;height:8px;border-radius:50%;background:var(--orange);position:relative;flex:none}
.hot__dot::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--orange);
  animation:ks-hotpuls 2.6s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes ks-hotpuls{0%{transform:scale(.55);opacity:.8}70%{transform:scale(1.3);opacity:0}100%{opacity:0}}

.hot__stage{flex:1 1 auto;min-width:0}
.hot__slide{display:flex;align-items:baseline;gap:.75rem;text-decoration:none;color:var(--on-dark)}
.hot__slide time{
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-dark-2);flex:none;
}
.hot__slide > span{font-size:1.0625rem;line-height:1.3}
a.hot__slide:hover > span{color:var(--olive);text-decoration:underline;text-underline-offset:.22em}

/* Mit Skript liegen die Meldungen übereinander und wechseln sich ab. */
.hot[data-hot="bereit"] .hot__stage{position:relative;height:1.7rem}
.hot[data-hot="bereit"] .hot__slide{
  position:absolute;inset:0;opacity:0;transform:translateY(.45rem);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.hot[data-hot="bereit"] .hot__slide[data-an="true"]{opacity:1;transform:none;pointer-events:auto}
.hot[data-hot="bereit"] .hot__slide > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Laufband: der Zug läuft zweimal durch denselben Bestand und springt am Ende
   um genau eine Hälfte zurück - dadurch ist der Übergang nicht zu sehen. Die
   Dauer wächst mit der Zahl der Meldungen, damit das Tempo gleich bleibt. */
.hot--laufband .hot__viewport{
  overflow:hidden;flex:1 1 auto;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.5rem,#000 calc(100% - 2.5rem),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 2.5rem,#000 calc(100% - 2.5rem),transparent 100%);
}
.hot--laufband .hot__track{
  display:flex;align-items:baseline;gap:2.4rem;width:max-content;
  animation:ks-hotlauf calc(var(--hot-anzahl,3) * 15s) linear infinite;
}
.hot--laufband .hot__viewport:hover .hot__track,
.hot--laufband .hot__viewport:focus-within .hot__track,
.hot--laufband[data-pause="true"] .hot__track{animation-play-state:paused}
@keyframes ks-hotlauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hot__trenner{color:rgba(244,243,240,.38);font-size:.75rem;align-self:center;flex:none}

.hot__punkte{display:flex;gap:.4rem;flex:none;list-style:none;margin:0;padding:0}
.hot__punkte button{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(244,243,240,.30);transition:background .18s var(--ease),transform .18s var(--ease);
}
.hot__punkte button[aria-current="true"]{background:var(--orange);transform:scale(1.35)}

.hot__pause{
  flex:none;width:30px;height:30px;padding:0;border:0;border-radius:999px;
  background:transparent;color:var(--on-dark-2);cursor:pointer;line-height:1;font-size:.72rem;
}
.hot__pause:hover{background:rgba(244,243,240,.12);color:var(--on-dark)}

/* Auf schmalen Schirmen steht die Bereichsbezeichnung in einer eigenen Zeile
   über der Meldung - sie soll da sein, dafür ist neben ihr kein Platz. */
@media (max-width:760px){
  .hot .wrap{
    display:grid;grid-template-columns:1fr auto auto;align-items:center;
    gap:.45rem .6rem;padding-block:.95rem;
  }
  .hot__flag{grid-column:1;grid-row:1}
  .hot__punkte{grid-column:2;grid-row:1;justify-self:end}
  .hot__pause{grid-column:3;grid-row:1;justify-self:end}
  .hot__stage,.hot--laufband .hot__viewport{grid-column:1 / -1;grid-row:2}
  .hot__slide time{display:none}
  .hot__slide{gap:0}
  .hot[data-hot="bereit"] .hot__stage{height:2.9rem}
  .hot[data-hot="bereit"] .hot__slide > span{
    white-space:normal;overflow:hidden;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  }
  .hot--laufband .hot__slide time{display:block}
  .hot--laufband .hot__slide{flex-direction:row;gap:.6rem}
}

/* ---------- 10. Karten-Raster --------------------------------------------- */
.grid{display:grid;gap:var(--gap)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}

/* Einstiegskarte (Bild + Verlauf) */
.choice{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(320px,33vw,420px);border-radius:var(--r-lg);overflow:hidden;
  text-decoration:none;color:#fff;isolation:isolate;background:var(--forest-deep);
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.choice:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);color:#fff}
.choice img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s var(--ease)}
.choice::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,40,34,0) 20%,rgba(18,40,34,.34) 46%,rgba(18,40,34,.84) 78%,rgba(18,40,34,.95) 100%)}
.choice:hover img{transform:scale(1.055)}
.choice__body{display:block;padding:clamp(1.3rem,.9rem + 1vw,1.9rem)}
.choice h3{color:#fff;margin-bottom:.35rem;text-shadow:0 1px 14px rgba(18,40,34,.55)}
.choice p{margin:0;color:rgba(255,255,255,.9);font-size:var(--fs-small);line-height:1.45}
.choice__arrow{
  position:absolute;top:1.1rem;right:1.1rem;z-index:1;width:44px;height:44px;border-radius:50%;
  background:var(--olive);color:var(--forest-deep);display:grid;place-items:center;
  font-size:1.05rem;font-weight:700;transition:background .22s var(--ease),transform .22s var(--ease);
}
.choice:hover .choice__arrow{background:var(--orange);color:var(--forest-deep);transform:translate(3px,-3px)}

/* Kategorie-Karte */
.cat{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border-radius:var(--r-md);overflow:hidden;background:var(--paper);
  box-shadow:var(--shadow-sm);border:1px solid rgba(44,44,40,.07);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.cat:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);color:inherit}
.cat__img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--cream-2)}
.cat__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.cat:hover .cat__img img{transform:scale(1.05)}
.cat__body{display:block;flex:1;padding:1.4rem 1.5rem 1.6rem}
.cat h3{font-size:1.4rem;margin-bottom:.4rem;color:var(--forest)}
.cat p{font-size:var(--fs-small);color:var(--ink-2);margin:0}
.cat__count{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;font-family:var(--font-mono);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-btn)}
.cat__count::after{content:"→"}

/* News-Karte */
.news{position:relative;display:flex;flex-direction:column;background:var(--paper);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid rgba(44,44,40,.07);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.news:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.news__img{aspect-ratio:16/10;overflow:hidden;background:var(--cream-2)}
.news__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.news:hover .news__img img{transform:scale(1.05)}
.news__body{padding:1.35rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.news__meta{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem;flex-wrap:wrap}
.news__date{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-3);letter-spacing:.06em}
.news h3{font-size:1.3rem;margin-bottom:.5rem;color:var(--forest)}
.news h3 a{color:inherit;text-decoration:none}
.news h3 a::after{content:"";position:absolute;inset:0}
.news p{font-size:var(--fs-small);color:var(--ink-2);margin:0 0 1.2rem}
.news .textlink{margin-top:auto;align-self:flex-start}

/* ---------- 11. „Heute bei uns" -------------------------------------------- */
.today__date{font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.06em;color:var(--on-dark-2);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0}
.today__live{width:9px;height:9px;border-radius:50%;background:var(--orange);flex:none;box-shadow:0 0 0 0 rgba(236,116,4,.7);animation:pulse 2.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(236,116,4,0)}100%{box-shadow:0 0 0 0 rgba(236,116,4,0)}}
.today__list{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.today__item{
  display:grid;grid-template-columns:1fr;gap:.45rem;
  background:rgba(246,242,234,.055);border:1px solid var(--line-dark);
  border-left:5px solid var(--orange);
  border-radius:var(--r-sm);padding:1.15rem 1.35rem;
  transition:background .22s var(--ease),transform .22s var(--ease);
}
.today__item:hover{background:rgba(246,242,234,.1);transform:translateX(3px)}
.today__time{font-family:var(--font-mono);font-size:1.05rem;font-weight:700;color:var(--olive);letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.today__main h3{margin:0 0 .3rem;font-size:1.3rem;color:var(--cream)}
.today__main h3 a{color:inherit;text-decoration:none}
.today__main h3 a:hover{text-decoration:underline;text-decoration-color:var(--olive)}
.today__meta{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin:0;font-size:var(--fs-small);color:var(--on-dark-2)}
.today__badges{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.today__foot{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between}
@media (min-width:680px){
  /* Die Zeitspalte muss die lange Form „15:00 – 17:00 Uhr“ tragen können. */
  .today__item{grid-template-columns:11rem minmax(0,1fr) auto;gap:.35rem 1.25rem;align-items:center}
  .today__badges{margin-top:0;justify-content:flex-end}
}

/* ---------- 12. Split-Sektion (Haus / Leitbild) --------------------------- */
.split{display:grid;gap:clamp(2rem,1rem + 3.5vw,4.5rem);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .split--flip > :first-child{order:2}
}
.split__media{position:relative;aspect-ratio:5/4;border-radius:var(--r-lg);overflow:visible}
.split__media img{width:100%;height:100%;border-radius:var(--r-lg);object-fit:cover;box-shadow:var(--shadow-md)}
.split__stamp{
  position:absolute;right:-.75rem;bottom:-1.4rem;
  background:var(--orange);color:var(--forest-deep);border-radius:var(--r-sm);
  padding:1.05rem 1.3rem;max-width:15rem;box-shadow:0 4px 0 rgba(25,39,41,.22);
}
.split__stamp strong{display:block;font-family:var(--font-head);font-size:2rem;line-height:1}
.split__stamp span{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;margin-top:.2rem}

.rooms{list-style:none;margin:2rem 0;padding:0;display:grid;gap:.8rem}
.rooms li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;padding:1.05rem 1.25rem;border-radius:var(--r-sm);background:rgba(246,242,234,.06);border:1px solid var(--line-dark)}
.band--cream .rooms li,.band--cream2 .rooms li{background:var(--paper);border-color:rgba(44,44,40,.09)}
.rooms .dot{width:14px;height:14px;border-radius:50%;margin-top:.5rem;flex:none}
.rooms strong{display:block;font-family:var(--font-head);font-size:1.25rem;font-weight:600;margin-bottom:.1rem}
.rooms > li > span:last-child > span{font-size:var(--fs-small);color:var(--on-dark-2);display:block}
.band--cream .rooms > li > span:last-child > span,.band--cream2 .rooms > li > span:last-child > span{color:var(--ink-2)}

/* ---------- 13. Projekte --------------------------------------------------- */
.projects{display:grid;gap:var(--gap)}
@media (min-width:860px){
  /* Die Spaltenzahl richtet sich nach der Anzahl der Karten: drei bei vielen,
     zwei bei zweien, eine bei einer – so bleibt keine Lücke stehen. */
  .projects{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
  /* Die breite Auftaktkachel nur, wenn danach noch eine volle Reihe folgt. */
  .projects > :first-child:nth-last-child(n+4){grid-column:1 / -1}
}
.project{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(300px,31vw,380px);border-radius:var(--r-lg);overflow:hidden;
  text-decoration:none;color:#fff;isolation:isolate;background:var(--forest-deep);
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.project:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);color:#fff}
.projects > :first-child.project:nth-last-child(n+4){min-height:clamp(340px,35vw,470px)}
/* Karte ohne Foto: Die Fläche bleibt Bild-Ersatz und liegt hinter dem Verlauf. */
.project .offer__placeholder{
  position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;z-index:-2;
  background:
    radial-gradient(120% 90% at 22% 18%,rgba(236,116,4,.34),transparent 62%),
    radial-gradient(90% 80% at 88% 92%,rgba(154,168,106,.28),transparent 60%),
    var(--forest);
}
/* Zwei Varianten, damit mehrere Karten ohne Foto nebeneinander nicht gleich aussehen. */
.project:nth-child(even) .offer__placeholder{
  background:
    radial-gradient(110% 90% at 78% 20%,rgba(154,168,106,.30),transparent 62%),
    radial-gradient(90% 80% at 14% 88%,rgba(236,116,4,.26),transparent 60%),
    var(--forest-deep);
}
.project img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s var(--ease)}
.project::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,40,34,0) 16%,rgba(18,40,34,.36) 44%,rgba(18,40,34,.85) 78%,rgba(18,40,34,.96) 100%)}
.project:hover img{transform:scale(1.055)}
.project__body{padding:clamp(1.3rem,1rem + 1vw,2.1rem);max-width:46rem}
.project h3{color:#fff;margin-bottom:.4rem;text-shadow:0 1px 14px rgba(18,40,34,.55)}
.project p{color:rgba(255,255,255,.9);font-size:var(--fs-small);margin:0}
.project .badge{margin-bottom:.9rem}

/* ---------- 14. Mitmachen (Orange-Band) ----------------------------------- */
.join__grid{display:grid;gap:1.1rem;margin-top:clamp(2rem,1rem + 2vw,3rem)}
@media (min-width:700px){.join__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.join__grid{grid-template-columns:repeat(4,1fr)}}
.join__card{
  display:flex;flex-direction:column;gap:.55rem;
  padding:1.7rem 1.6rem 1.8rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.78);border:1.5px solid rgba(25,39,41,.2);
  color:var(--forest-deep);text-decoration:none;
  transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.join__card:hover{background:var(--paper);color:var(--forest-deep);transform:translateY(-4px);box-shadow:0 10px 26px -14px rgba(25,39,41,.5)}
.join__card h3{color:inherit;font-size:1.45rem;margin:0}
.join__card p{color:rgba(25,39,41,.82);font-size:var(--fs-small);margin:0}
.join__card span{margin-top:auto;padding-top:1.1rem;font-family:var(--font-mono);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8A4103}

/* ---------- 15. Galerie ---------------------------------------------------- */
.gallery{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}
.gallery figure{margin:0;overflow:hidden;border-radius:var(--r-md);background:var(--cream-2)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gallery figure:hover img{transform:scale(1.055)}
.gallery .g1{grid-row:span 2}
@media (min-width:760px){
  .gallery{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(130px,13vw,195px);gap:1rem}
  .gallery figure{height:100%}
  .gallery .g1{grid-column:1/span 2;grid-row:1/span 2}
  .gallery .g4{grid-column:3/span 2;grid-row:2}
  .gallery .g7{grid-column:3/span 2;grid-row:3}
}

/* ---------- 16. Kontakt ---------------------------------------------------- */
.contact{display:grid;gap:clamp(2rem,1rem + 3vw,3.5rem)}
@media (min-width:900px){.contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.contact__card{background:var(--paper);border-radius:var(--r-lg);padding:clamp(1.6rem,1rem + 2vw,2.6rem);box-shadow:var(--shadow-md);color:var(--ink)}
.contact__card h3{color:var(--forest)}
.contact dl{margin:0;display:grid;gap:1.15rem}
.contact dt{font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.25rem}
.contact dd{margin:0;font-size:1.0625rem;line-height:1.55;color:var(--ink)}
.contact dd a{font-weight:700}
.hours{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.hours th,.hours td{text-align:left;padding:.5rem 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.hours th{font-weight:700;width:9rem;color:var(--ink)}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0}
.mapcard{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:340px;display:grid;place-items:center;text-align:center;padding:2rem;background:var(--forest-soft)}
.mapcard > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.mapcard__inner{position:relative;background:var(--cream);border-radius:var(--r-md);padding:1.6rem 1.8rem;box-shadow:var(--shadow-md);max-width:23rem;color:var(--ink)}
.mapcard__inner p{margin:0 0 1rem;font-size:var(--fs-small);color:var(--ink-2)}

/* Rechte Spalte der Kontaktseite: oben das Foto, darunter der Lageplan.
   Das Verhältnis 3:2 lässt das Bild etwa bis zur Überschrift „Anfahrt“
   reichen; zusammen füllen beide die Höhe der Angaben daneben. */
.contact__spalte{display:grid;gap:var(--gap);grid-template-rows:3fr 2fr}
.contact__spalte > *{min-height:0}

/* Lageplan – vor dem Klick nur Hinweis und Knopf, danach die Karte.
   Der Rahmen liegt über der ganzen Fläche, damit die Karte das Feld füllt. */
.lageplan{position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--cream-2);border:1px solid var(--line);
  display:grid;place-items:center;min-height:260px}
.lageplan__frage{padding:1.6rem;text-align:center;max-width:34rem}
.lageplan__frage h3{margin:0 0 .5rem;font-size:1.25rem;color:var(--forest)}
.lageplan__frage p{margin:0 0 1.15rem;font-size:var(--fs-small);color:var(--ink-2)}
.lageplan__frage a{color:var(--orange-dark)}
.lageplan iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

@media (max-width:899px){
  .contact__spalte{grid-template-rows:auto auto}
  .contact__spalte .mapcard,.contact__spalte .lageplan{min-height:320px}
}

/* Helle Inseln innerhalb dunkler Bänder – Textfarben zurücksetzen */
.contact__card,.mapcard__inner{color:var(--ink)}
.contact__card p,.mapcard__inner p{color:var(--ink-2)}
.contact__card .muted,.mapcard__inner .muted{color:var(--ink-3)}
.contact__card .hours th{color:var(--ink)}
.contact__card .hours td{color:var(--ink-2)}
.contact__card .hours th,.contact__card .hours td{border-bottom-color:var(--line)}
.contact__card dt{color:var(--ink-3)}
.contact__card dd{color:var(--ink)}

/* Outline-Displaywort à la „guide" */
.bigword{
  position:absolute;left:0;bottom:-.12em;z-index:1;pointer-events:none;
  font-family:var(--font-head);font-weight:600;font-size:clamp(6rem,17vw,15rem);
  line-height:.8;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:2px rgba(246,242,234,.16);
  padding-left:var(--gutter);
}

/* ---------- 17. Footer ----------------------------------------------------- */
.site-footer{background:var(--forest-deep);color:var(--on-dark-2);padding-block:clamp(3rem,2rem + 3vw,5rem) 2rem;font-size:var(--fs-small);position:relative}
.site-footer a{color:var(--cream);text-decoration:none}
.site-footer a:hover{color:var(--olive);text-decoration:underline}
.footer__grid{display:grid;gap:2.5rem;margin-bottom:3rem}
@media (min-width:700px){.footer__grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.site-footer h4{color:var(--olive);font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.1rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.footer__brand .brand{color:var(--cream)}
.footer__brand p{color:var(--on-dark-2);margin-top:1.1rem}
/* Soziale Netzwerke: nur Zeichen, kein Text. Grundform hell, im Fuß dunkel. */
.social{display:flex;gap:.55rem;margin:0;list-style:none;padding:0}
.social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-sm);
  color:var(--forest);background:var(--cream-2);text-decoration:none;
  transition:color .18s var(--ease),background .18s var(--ease);
}
.social a:hover{color:var(--paper);background:var(--forest);text-decoration:none}
.social__icon{width:19px;height:19px;display:block}
/* Kleine Ausgabe für den Kontaktkasten auf den Detailseiten - dort steht sie
   unter einem kurzen Text und soll ihn nicht überstrahlen. */
.social--klein{margin-top:.9rem}
.social--klein a{width:32px;height:32px}
.social--klein .social__icon{width:16px;height:16px}

.site-footer .social{display:flex;margin-top:1.1rem}
.site-footer .social a{color:var(--cream);background:rgba(244,243,240,.08)}
.site-footer .social a:hover{color:var(--forest-deep);background:var(--orange)}

/* In der Kontaktliste sitzt die Reihe in einer Beschreibungszeile. */
.contact dd .social{margin-top:.15rem}

.footer__bottom{border-top:1px solid var(--line-dark);padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;color:rgba(198,207,201,.75)}
.footer__bottom ul{display:flex;flex-wrap:wrap;gap:1.2rem}

/* ---------- 18. Prototyp-Leiste -------------------------------------------- */
.proto-bar{background:var(--orange);color:var(--forest-deep);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.05em}
.proto-bar .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center;justify-content:space-between;padding-block:.5rem}
.proto-bar a{color:var(--forest-deep);font-weight:700}

/* ---------- 19. Designsystem-Seite ----------------------------------------- */
.ds-nav{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:1px solid var(--line)}
.ds-nav .wrap{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center;min-height:64px}
.ds-nav a{font-family:var(--font-mono);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;padding:.5rem .7rem;border-radius:var(--r-sm)}
.ds-nav a:hover{background:var(--cream-2);color:var(--orange-btn)}
.swatches{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.swatch{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.swatch__chip{height:104px}
.swatch__meta{padding:.85rem 1rem 1rem;font-size:.8125rem;line-height:1.5;color:var(--ink-2)}
.swatch__meta strong{display:block;font-size:.9375rem;font-weight:700;color:var(--ink);margin-bottom:.15rem}
.swatch__meta code{font-family:var(--font-mono);color:var(--ink-3)}
.ds-block{padding:clamp(1.5rem,1rem + 2vw,2.25rem);border-radius:var(--r-md);background:var(--paper);border:1px solid rgba(44,44,40,.08);box-shadow:var(--shadow-sm)}
.band--forest .ds-block{background:rgba(246,242,234,.06);border-color:var(--line-dark)}
.ds-grid{display:grid;gap:var(--gap)}
@media(min-width:820px){.ds-grid--2{grid-template-columns:1fr 1fr}}
.ds-label{font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .8rem}
.ds-rule{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.ds-rule li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;font-size:var(--fs-small);color:var(--ink-2);align-items:start}
.ds-rule .yes,.ds-rule .no{font-weight:800;line-height:1.5}
.ds-rule .yes{color:#3F6B36}
.ds-rule .no{color:var(--orange-dark)}
.ds-scale > *{margin:0 0 .6rem}
.ds-scale small{display:block;font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.2rem}

/* Designsystem-Blöcke auf dunklem Band */
.band--forest .ds-label{color:var(--olive)}
.band--forest .ds-rule li{color:var(--on-dark-2)}
.band--forest .ds-rule li strong{color:var(--cream)}
.band--forest .ds-rule .yes{color:var(--olive)}
.band--forest .ds-rule .no{color:#F0A57A}
.band--forest .ds-block p{color:var(--on-dark-2)}
.band--forest .ds-block code{color:var(--olive)}
.band--forest .ds-block .hours th{color:var(--cream)}
.band--forest .ds-block .hours td{color:var(--on-dark-2)}
.band--forest .ds-block .hours th,.band--forest .ds-block .hours td{border-bottom-color:var(--line-dark)}
.band--forest .swatch{border-color:var(--line-dark)}
.band--forest .swatch__meta{color:var(--ink-2)}
.band--forest .swatch__meta strong{color:var(--ink)}
.band--forest ol{color:var(--on-dark-2)}

/* ---------- 20. Motion ----------------------------------------------------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .hot__dot::after{display:none}
  .hot--laufband .hot__track{animation:none}
}

/* ---------- 21. Breakpoints ------------------------------------------------ */
@media (max-width:1199px){
  .nav{display:none}
  .burger{display:flex}
}
@media (max-width:560px){
  .topbar-info span:nth-child(n+2){display:none}
  .btn{width:100%}
  .btn-row .btn{width:auto;flex:1 1 auto;min-width:15rem}
}

/* ==========================================================================
   22. Template-Komponenten (Archive & Detailseiten)
   ========================================================================== */

/* ---------- Seiten-Hero ---------------------------------------------------- */
.pagehero{position:relative;background:var(--forest);color:var(--on-dark);padding-block:clamp(2rem,1.2rem + 2.5vw,3.5rem) calc(clamp(3rem,2rem + 3vw,4.5rem) + var(--rip-h))}
.pagehero h1{color:var(--cream);max-width:20ch}
.pagehero .lead{color:var(--on-dark-2);max-width:52ch}
.pagehero__grid{display:grid;gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:end}
@media (min-width:900px){.pagehero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
/* Bild wie im Hero der Startseite: über die volle Höhe, rechte Hälfte,
   nach links weich ins Waldgrün auslaufend. */
.pagehero{overflow:hidden}
.pagehero--bild{padding-block:clamp(2rem,1.2rem + 2.5vw,3.5rem) calc(clamp(4.5rem,2.6rem + 5vw,7.5rem) + var(--rip-h))}
.pagehero__bg{position:absolute;inset:0;z-index:0}
.pagehero__bg img{width:100%;height:100%;object-fit:cover;display:block}
.pagehero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg, var(--forest) 0%, var(--forest) 36%, rgba(38,61,64,.94) 47%,
                           rgba(38,61,64,.55) 60%, rgba(38,61,64,.16) 74%, rgba(38,61,64,0) 88%),
    linear-gradient(180deg, rgba(25,39,41,.45) 0%, rgba(25,39,41,.12) 40%, rgba(25,39,41,.38) 100%);
}
.pagehero .wrap{position:relative;z-index:3}
.pagehero--bild .pagehero__body{max-width:38rem}
.pagehero--bild h1{max-width:24ch}
@media (max-width:899px){
  .pagehero__scrim{
    background:linear-gradient(180deg, rgba(38,61,64,.93) 0%, rgba(38,61,64,.89) 55%, rgba(38,61,64,.84) 100%);
  }
  .pagehero--bild .pagehero__body{max-width:none}
}

/* ---------- Breadcrumbs ---------------------------------------------------- */
.crumbs{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 1.1rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .55rem;align-items:center}
.crumbs a{color:var(--olive);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs li:not(:last-child)::after{content:"›";margin-left:.55rem;color:rgba(195,205,203,.55)}
.crumbs [aria-current]{color:rgba(195,205,203,.8)}
.band--cream .crumbs a,.band--cream2 .crumbs a{color:var(--orange-btn)}
.band--cream .crumbs [aria-current],.band--cream2 .crumbs [aria-current]{color:var(--ink-3)}

/* ---------- Filterleiste --------------------------------------------------- */
/* Die Leiste steht über jeder Übersicht und soll dort nicht die halbe Seite
   einnehmen. Die Knöpfe selbst sind klein gehalten - 32 px Höhe, also deutlich
   über dem Mindestmaß für Tippflächen -, zwischen den Zeilen steht dafür Luft:
   vier Zeilen dicht an dicht lesen sich als eine Wand statt als vier Fragen. */
.filters{
  background:var(--cream);border-bottom:1px solid var(--line);
  padding-block:1.15rem;
}
.filters__inner{display:grid;gap:.95rem}
.filtergroup{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.filtergroup__label{
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);flex:0 0 6.5rem;
}
.chip{
  display:inline-flex;align-items:center;gap:.35rem;min-height:32px;
  padding:.2rem .7rem;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:var(--paper);color:var(--ink-2);
  font-size:.75rem;font-weight:600;line-height:1.2;cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.chip:hover{border-color:var(--line-strong,rgba(44,44,40,.3));color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.filters__foot{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;justify-content:space-between;padding-top:.5rem}
.filters__count{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-3);margin:0}
.filters__count strong{color:var(--ink);font-size:.86rem}
.filters__reset{
  background:none;border:0;padding:.25rem 0;cursor:pointer;
  font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--orange-btn);
}
.filters__reset:hover{color:var(--orange-dark);text-decoration:underline}
/* Rechts stehen Umschalter und PDF-Knopf zusammen. */
.filters__werkzeuge{display:flex;align-items:center;gap:.4rem;margin-left:auto}

/* Auf dem Handy war die Leiste bisher fast so hoch wie der erste Treffer.
   Dort wird alles noch einmal eine Spur kleiner, die Bereichsbezeichnung steht
   in einer eigenen schmalen Zeile. */
@media (max-width:700px){
  .filters{padding-block:.95rem}
  .filters__inner{gap:.8rem}
  .filtergroup__label{flex:1 0 100%;font-size:.58rem;margin-bottom:-.1rem}
  .chip{min-height:30px;padding:.15rem .6rem;font-size:.72rem}
  .filters__foot{gap:.4rem .7rem;padding-top:.35rem}
  .filters__count,.filters__reset{font-size:.68rem}
}

/* ---------- Angebots-/Kurskarte -------------------------------------------- */
.offer{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid rgba(44,44,40,.08);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.offer:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.offer[hidden]{display:none}
.offer__img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--cream-2)}
.offer__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.offer:hover .offer__img img{transform:scale(1.05)}
.offer__body{display:flex;flex-direction:column;flex:1;padding:1.25rem 1.4rem 1.5rem}
.offer__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.8rem}
.offer h3{font-size:1.3rem;margin-bottom:.45rem;color:var(--forest)}
.offer h3 a{color:inherit;text-decoration:none}
.offer h3 a::after{content:"";position:absolute;inset:0}
.offer p{font-size:var(--fs-small);color:var(--ink-2);margin:0 0 1.1rem}
.offer__meta{
  list-style:none;margin:auto 0 0;padding:.9rem 0 0;border-top:1px solid var(--line);
  display:grid;gap:.35rem;font-size:var(--fs-small);color:var(--ink-2);
}
.offer__meta li{display:flex;gap:.6rem;align-items:baseline}
.offer__meta b{
  flex:0 0 5.5rem;font-family:var(--font-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.offer__price{color:var(--forest);font-weight:700}

/* Leerzustand */
.noresult{
  display:none;padding:3rem 1.5rem;text-align:center;
  border:1.5px dashed var(--line-strong,rgba(44,44,40,.25));border-radius:var(--r-md);
  color:var(--ink-2);
}
.noresult[data-show="true"]{display:block}
.noresult h3{color:var(--forest)}

/* ---------- Detailseite ---------------------------------------------------- */
.detail{display:grid;gap:clamp(2rem,1.2rem + 3vw,3.5rem);align-items:start}
@media (min-width:960px){.detail{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.detail h2{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.1rem)}
.detail h3{font-size:1.25rem;margin-top:2rem}
.detail ul:not([class]){padding-left:1.15rem;color:var(--ink-2);display:grid;gap:.45rem;margin:0 0 1.4rem}
.detail__aside{display:grid;gap:1.25rem;position:sticky;top:112px}
@media (max-width:959px){.detail__aside{position:static}}

.factbox{
  background:var(--forest);color:var(--on-dark);border-radius:var(--r-lg);
  padding:clamp(1.4rem,1rem + 1.4vw,2rem);position:relative;overflow:hidden;
}
.factbox h3{
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--olive);margin:0 0 1.1rem;
}
.factbox dl{margin:0;display:grid;gap:.85rem}
.factbox dt{font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(195,205,203,.75);margin-bottom:.1rem}
.factbox dd{margin:0;font-size:1rem;font-weight:600;color:var(--cream);line-height:1.4}
.factbox dd small{display:block;font-weight:400;font-size:.8125rem;color:var(--on-dark-2);margin-top:.15rem}
.factbox .btn{margin-top:1.4rem;width:100%}
.factbox__note{margin:.9rem 0 0;font-size:.78rem;color:var(--on-dark-2);text-align:center}

.contactbox{
  background:var(--paper);border:1px solid rgba(44,44,40,.1);border-radius:var(--r-lg);
  padding:1.4rem 1.5rem 1.6rem;display:flex;gap:1rem;align-items:flex-start;
}
.contactbox img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.contactbox p{margin:0;font-size:var(--fs-small);color:var(--ink-2)}
.contactbox strong{display:block;font-size:1.05rem;color:var(--forest);margin-bottom:.1rem}
.contactbox a{font-weight:700}
.contactbox .social a{font-weight:400;background:var(--cream-2)}

/* Terminliste auf Detailseiten */
.dates{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.5rem}
.dates li{
  display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:baseline;
  padding:.75rem 1rem;border-radius:var(--r-sm);
  background:var(--paper);border:1px solid var(--line);
}
.dates time{font-family:var(--font-mono);font-size:.95rem;font-weight:700;color:var(--forest);flex:0 0 8.5rem}
.dates span{font-size:var(--fs-small);color:var(--ink-2)}
.dates .is-full{opacity:.6}
.dates .is-full time{color:var(--ink-3)}

/* Material-/Checkliste */
.checklist{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.55rem}
.checklist li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;font-size:var(--fs-small);color:var(--ink-2);align-items:start}
.checklist li::before{
  content:"";width:9px;height:9px;margin-top:.45rem;border-radius:2px;
  background:var(--orange);flex:none;
}

/* ==========================================================================
   23 · Termine, Projekte, Personen, Formulare
   ========================================================================== */

/* --- Ansichtsumschalter ------------------------------------------------- */
.viewswitch{display:inline-flex;gap:.15rem;padding:.15rem;border-radius:var(--r-pill);
  background:var(--cream-2);border:1px solid var(--line)}
.viewswitch button{
  font:600 .75rem/1 var(--font-body);letter-spacing:.01em;
  padding:.35rem .8rem;min-height:30px;border:0;border-radius:var(--r-pill);
  background:transparent;color:var(--ink-2);cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;transition:background .2s var(--ease),color .2s var(--ease);
}
.viewswitch button:hover{color:var(--ink)}
.viewswitch button[aria-selected="true"]{background:var(--forest);color:#fff}
.viewswitch svg{width:14px;height:14px;flex:none}

/* Knopf für den Ausdruck: Blattsymbol und das Wort PDF, beides klein. Nur das
   Symbol war zu leise, die volle Beschriftung neben dem Umschalter zu laut.
   Der Text aus dem Customizer bleibt als Name für Screenreader und als
   Kurzhinweis beim Überfahren erhalten. */
.pdfknopf{
  flex:none;display:inline-flex;align-items:center;gap:.32rem;
  height:34px;padding:0 .6rem 0 .5rem;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--paper);color:var(--ink-2);cursor:pointer;
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.1em;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.pdfknopf:hover{background:var(--cream-2);border-color:var(--line-strong);color:var(--orange-dark)}
.pdfknopf__icon{width:18px;height:18px;display:block;flex:none}

/* --- Terminliste --------------------------------------------------------- */
.eventlist{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.event{
  display:grid;grid-template-columns:auto 1fr;gap:1.15rem;align-items:start;
  background:var(--paper);border:1px solid rgba(44,44,40,.09);border-left:4px solid var(--orange);
  border-radius:var(--r-md);padding:1.15rem 1.3rem;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.event:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.event--treff{border-left-color:var(--kat-treff)}
.event--kurs{border-left-color:var(--kat-kurs)}
.event--markt{border-left-color:var(--kat-markt)}
.event--veranstaltung{border-left-color:var(--kat-veranstaltung)}
.event__date{
  text-align:center;min-width:4.1rem;padding:.45rem .35rem;border-radius:var(--r-sm);
  background:var(--cream-2);font-family:var(--font-mono);line-height:1.1;
}
.event__date b{display:block;font-size:1.6rem;font-weight:700;color:var(--forest)}
.event__date span{display:block;font-size:var(--fs-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.event__body h3{font-size:1.2rem;margin:0 0 .3rem;line-height:1.2}
.event__body h3 a{color:var(--ink);text-decoration:none;background-image:linear-gradient(var(--orange),var(--orange));
  background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s var(--ease)}
.event__body h3 a:hover{background-size:100% 2px}
.event__body p{margin:0 0 .55rem;font-size:var(--fs-small);color:var(--ink-2)}
.event__meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;
  font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--ink-3);letter-spacing:.02em}
.event__meta li{display:flex;align-items:center;gap:.35rem}
.event__meta li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--line-strong);flex:none}
.eventmonth{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:2.2rem 0 .9rem;display:flex;align-items:center;gap:.9rem}
.eventmonth::after{content:"";height:1px;flex:1;background:var(--line)}
.eventmonth:first-child{margin-top:0}

/* --- Monatskalender ------------------------------------------------------ */
.cal{background:var(--paper);border:1px solid rgba(44,44,40,.09);border-radius:var(--r-md);overflow:hidden}
.cal__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.15rem;border-bottom:1px solid var(--line)}
.cal__bar h3{margin:0;font-size:1.3rem}
.cal__nav{display:flex;gap:.4rem}
.cal__nav button{width:42px;height:42px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:var(--paper);color:var(--ink);cursor:pointer;font-size:1rem;line-height:1}
.cal__nav button:hover{background:var(--cream-2)}
.cal table{width:100%;border-collapse:collapse;table-layout:fixed}
.cal th{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:.7rem .3rem;border-bottom:1px solid var(--line)}
.cal td{border:1px solid var(--line);vertical-align:top;padding:.45rem .4rem;height:5.6rem}
.cal td.is-out{background:var(--cream-2);color:var(--ink-3)}
.cal td.is-today{box-shadow:inset 0 0 0 2px var(--orange)}
.cal__num{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--ink-3);display:block;margin-bottom:.25rem}
.cal td.is-today .cal__num{color:var(--orange-dark);font-weight:700}
/* Ein Eintrag im Kalender trägt seine Kategorie doppelt: als blasse Fläche und
   als kräftiger Balken links. Der Balken trägt die Unterscheidung, die Fläche
   ordnet nur zu - deshalb darf sie zurückhaltend bleiben. Die Schrift steht in
   Tinte und nicht in der Kategoriefarbe, damit sie immer lesbar ist. */
.cal__ev{display:block;font-size:.75rem;line-height:1.25;padding:.2rem .35rem .2rem .42rem;
  border-radius:4px;border-left:3px solid var(--kat);
  margin-bottom:.2rem;color:var(--ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  --kat:var(--kat-veranstaltung);background:rgba(91,122,34,.18)}
.cal__ev[hidden]{display:none}
/* Die Anfangszeit vor dem Titel - auf dem Ausdruck ist sie das, was neben Name
   und Datum gebraucht wird, und auf dem Schirm ordnet sie den Tag. */
.cal__zeit{font-family:var(--font-mono);font-weight:700;font-size:.92em;color:var(--ink-3)}
.cal__ev--treff{--kat:var(--kat-treff);background:rgba(236,116,4,.18)}
.cal__ev--kurs{--kat:var(--kat-kurs);background:rgba(47,111,143,.18)}
.cal__ev--markt{--kat:var(--kat-markt);background:rgba(142,59,99,.18)}
.cal__ev--veranstaltung{--kat:var(--kat-veranstaltung);background:rgba(91,122,34,.18)}
@supports (background:color-mix(in srgb,red 10%,transparent)){
  .cal__ev{background:color-mix(in srgb,var(--kat) 18%,transparent)}
  .cal__ev:hover{background:color-mix(in srgb,var(--kat) 34%,transparent)}
}
/* Die Legende zeigt dasselbe Muster wie der Kalender - Fläche plus Balken -,
   damit sich Zeichen und Erklärung auf den ersten Blick zuordnen lassen. */
.cal__legend{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;margin-top:1.1rem;
  font-size:var(--fs-meta);font-family:var(--font-mono);color:var(--ink-3);letter-spacing:.03em}
.cal__legend span{display:inline-flex;align-items:center;gap:.45rem}
.cal__legend i{width:18px;height:12px;border-radius:3px;display:inline-block;
  border-left:3px solid var(--kat);background:rgba(44,44,40,.10)}
@supports (background:color-mix(in srgb,red 10%,transparent)){
  .cal__legend i{background:color-mix(in srgb,var(--kat) 24%,transparent)}
}
/* Auf schmalen Schirmen ist kein Platz für den Titel; dann steht je Termin ein
   Balken in der vollen Kategoriefarbe. Blass wäre er dort nicht zu erkennen. */
@media (max-width:719px){
  .cal td{height:auto;min-height:3.1rem;padding:.35rem .25rem}
  .cal__ev{font-size:0;padding:0;height:7px;border-radius:2px;margin-bottom:.16rem;
    border-left:0;background:var(--kat)}
}
@supports (background:color-mix(in srgb,red 10%,transparent)){
  @media (max-width:719px){
    .cal__ev,.cal__ev:hover{background:var(--kat)}
  }
}

/* --- Zeitstrahl ---------------------------------------------------------- */
/* Punkt und Linie teilen sich eine Geometrie: --tl-x ist der Einzug, der Punkt
   sitzt bei x=0, die Linie exakt in seiner Mitte. Die Linie wird pro Eintrag
   gezeichnet und endet dadurch immer genau auf dem letzten Punkt. */
.timeline{--tl-x:1.9rem;--tl-dot:14px;--tl-top:.4rem;--tl-gap:1.7rem;--tl-halo:var(--cream);
  list-style:none;margin:1.8rem 0;padding:0 0 0 var(--tl-x);position:relative}
.timeline li{position:relative;margin:0;padding:0 0 var(--tl-gap) 0;max-width:none}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:calc(var(--tl-x) * -1);top:var(--tl-top);
  width:var(--tl-dot);height:var(--tl-dot);border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 4px var(--tl-halo)}
.timeline li:not(:last-child)::after{content:"";position:absolute;width:2px;background:var(--line-strong);
  left:calc(var(--tl-x) * -1 + var(--tl-dot) / 2 - 1px);
  top:calc(var(--tl-top) + var(--tl-dot));bottom:calc(var(--tl-top) * -1)}
.band--cream2 .timeline{--tl-halo:var(--cream-2)}
.band--paper .timeline{--tl-halo:var(--paper)}
.band--forest .timeline{--tl-halo:var(--forest)}
.band--orange .timeline{--tl-halo:var(--orange)}
.timeline b{display:block;font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.1em;
  text-transform:uppercase;color:var(--orange-dark);margin-bottom:.2rem}
.timeline strong{display:block;font-family:var(--font-head);font-size:1.15rem;font-weight:600;margin-bottom:.2rem}
.timeline p{margin:0;font-size:var(--fs-small);color:var(--ink-2)}

/* --- Kennzahlen ---------------------------------------------------------- */
.figures{list-style:none;margin:2rem 0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
.figures li{background:var(--paper);border:1px solid rgba(44,44,40,.09);border-radius:var(--r-md);padding:1.2rem 1.3rem}
.band--forest .figures li{background:rgba(244,243,240,.07);border-color:var(--line-dark)}
.figures b{display:block;font-family:var(--font-head);font-size:2.3rem;font-weight:800;line-height:1;color:var(--forest)}
.band--forest .figures b{color:var(--olive)}
.figures span{display:block;margin-top:.35rem;font-size:var(--fs-small);color:var(--ink-2)}
.band--forest .figures span{color:var(--on-dark-2)}

/* --- Zitat --------------------------------------------------------------- */
.pullquote{margin:2.2rem 0;padding:1.6rem 0 1.6rem 1.7rem;border-left:4px solid var(--orange)}
.pullquote p{font-family:var(--font-head);font-size:clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem);
  line-height:1.35;font-style:italic;margin:0 0 .7rem;color:var(--forest)}
.pullquote footer{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}

/* --- Partner / Förderer -------------------------------------------------- */
.partners{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem}
.partners li{font-size:var(--fs-small);padding:.5rem .95rem;border-radius:var(--r-pill);
  background:var(--paper);border:1px solid var(--line-strong);color:var(--ink-2)}
.band--forest .partners li{background:rgba(244,243,240,.08);border-color:var(--line-dark);color:var(--on-dark-2)}

/* --- Personen ------------------------------------------------------------ */
.persons{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.person{background:var(--paper);border:1px solid rgba(44,44,40,.09);border-radius:var(--r-md);
  padding:1.4rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.55rem}
.person__avatar{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:var(--cream-2);font-family:var(--font-head);font-weight:700;font-size:1.4rem;color:var(--forest)}
.person h3{margin:0;font-size:1.2rem}
.person p{margin:0;font-size:var(--fs-small);color:var(--ink-2)}
.person__role{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.08em;
  text-transform:uppercase;color:var(--orange-dark)}

/* --- Profilkarten (Team) -------------------------------------------------- */
.pgroup{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:2.6rem 0 1rem;font-weight:700}
.pgroup:first-child{margin-top:0}
/* auto-fill statt auto-fit: Bei wenigen Karten bleiben sie schmal, statt sich breitzuziehen. */
.pcards{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr))}
.pcard{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .25s var(--ease)}
.pcard:hover{box-shadow:var(--shadow-md)}
/* Die Karte ist kein Link mehr - es gibt keine Profilseite, auf die sie führen
   könnte. Anklickbar sind nur noch Telefonnummer und E-Mail-Adresse. */
.pcard__inner{display:flex;flex-direction:column;height:100%}
.pcard__media{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--cream-2)}
.pcard__media img{width:100%;height:100%;object-fit:cover;display:block}
.pcard__initials{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-head);font-size:2.6rem;font-weight:700;color:var(--forest);
  background:radial-gradient(120% 90% at 30% 20%,rgba(236,116,4,.16),transparent 62%),var(--cream-2)}
.pcard__body{display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 1.25rem 1.3rem;flex:1 1 auto}
.pcard__badge{align-self:flex-start;font-family:var(--font-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--forest);
  background:var(--cream-2);border-radius:999px;padding:.22rem .6rem;margin-bottom:.15rem}
.pcard__name{font-family:var(--font-head);font-size:1.18rem;font-weight:600;line-height:1.2;color:var(--ink)}
.pcard__role{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.08em;
  text-transform:uppercase;color:var(--orange-dark)}
.pcard__info{margin-top:.35rem;font-size:var(--fs-small);color:var(--ink-2);line-height:1.5}

/* Kontakt: steht immer unten an der Karte, damit die Zeilen über mehrere
   Karten hinweg auf einer Höhe liegen - auch wenn die Infotexte unterschiedlich
   lang sind. Die lange E-Mail-Adresse darf umbrechen, statt die Karte zu
   sprengen. */
.pcard__kontakt{display:flex;flex-direction:column;gap:.3rem;margin-top:auto;padding-top:.85rem}
.pcard__zeile{display:flex;align-items:baseline;gap:.5rem;font-size:var(--fs-small);line-height:1.4}
.pcard__icon{flex:none;color:var(--ink-3);font-size:.9em;line-height:1.4}
.pcard__zeile a{color:var(--ink-2);text-decoration:none;overflow-wrap:anywhere}
.pcard__zeile a:hover{color:var(--orange-dark);text-decoration:underline;text-underline-offset:.18em}
.pcard__edit{position:absolute;top:.6rem;right:.6rem;z-index:2;display:grid;place-items:center;
  width:2rem;height:2rem;border-radius:50%;background:rgba(246,242,234,.92);color:var(--forest);
  text-decoration:none;font-size:.9rem;box-shadow:var(--shadow-sm)}
.pcard__edit:hover{background:var(--orange);color:var(--forest-deep)}

/* --- Schritte ------------------------------------------------------------ */
.steps{list-style:none;counter-reset:s;margin:1.8rem 0;padding:0;display:grid;gap:1rem}
.steps li{counter-increment:s;position:relative;padding-left:3.4rem}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:-.1rem;
  width:2.5rem;height:2.5rem;border-radius:var(--r-sm);display:grid;place-items:center;
  font-family:var(--font-mono);font-weight:700;font-size:.95rem;
  background:var(--orange);color:var(--forest-deep)}
.steps strong{display:block;font-family:var(--font-head);font-size:1.15rem;font-weight:600;margin-bottom:.2rem}
.steps p{margin:0;font-size:var(--fs-small);color:var(--ink-2)}
.band--forest .steps p{color:var(--on-dark-2)}

/* --- FAQ ----------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.15rem 2.6rem 1.15rem 0;position:relative;
  font-family:var(--font-head);font-size:1.15rem;font-weight:600;color:var(--ink);min-height:46px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.55rem;top:1.5rem;width:11px;height:11px;
  border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);
  transform:rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.faq p{margin:0 0 1.2rem;font-size:var(--fs-small);color:var(--ink-2);max-width:62ch}

/* --- Formulare ----------------------------------------------------------- */
.form{display:grid;gap:1.1rem}
.form__row{display:grid;gap:1.1rem}
@media (min-width:620px){.form__row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.4rem}
.field > label{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600}
.field .req{color:var(--orange-dark)}
.field input,.field select,.field textarea{
  font:400 var(--fs-body)/1.45 var(--font-body);color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:.8rem .95rem;min-height:52px;width:100%;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{min-height:9.5rem;resize:vertical}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(236,116,4,.28)}
.field small{font-size:var(--fs-meta);color:var(--ink-3)}
.checks{display:grid;gap:.7rem;margin:0;padding:0;border:0}
.checks legend{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:.7rem;padding:0}
.check{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;
  font-size:var(--fs-small);color:var(--ink-2);cursor:pointer;min-height:46px;padding:.35rem 0}
.check input{width:22px;height:22px;margin-top:.15rem;accent-color:var(--orange);flex:none}
.check b{display:block;color:var(--ink);font-weight:600;font-size:var(--fs-body)}
.form__note{font-size:var(--fs-meta);color:var(--ink-3);margin:0}
.formcard{background:var(--paper);border:1px solid rgba(44,44,40,.09);border-radius:var(--r-lg);
  padding:clamp(1.5rem, 1rem + 2vw, 2.6rem);box-shadow:var(--shadow-sm)}

/* --- Newsletter-Formular --------------------------------------------------
   Das Formular steht auf dunkelgrünem Grund: im Abschnitt „Dranbleiben“ und
   in der Lasche am rechten Rand. Ohne diese Zeilen behielten Beschriftungen,
   Hinweise und Rückmeldungen ihre dunkelgraue Schrift und wären auf dem Grün
   kaum zu lesen. Das Honigtopf-Feld gehört gar nicht auf den Schirm - es ist
   nur für Maschinen da, die Formulare blind ausfüllen. */
.ks-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ks-newsletter--dunkel .field > label{color:var(--on-dark-2)}
.ks-newsletter--dunkel .field .muted{color:rgba(220,231,229,.7)}
.ks-newsletter--dunkel .field .req{color:var(--olive)}
.ks-newsletter--dunkel .check{color:var(--on-dark-2)}
.ks-newsletter--dunkel .check a{color:var(--olive)}
.ks-newsletter--dunkel .form__note{color:rgba(220,231,229,.75)}
.ks-newsletter__meldung{
  margin:0 0 1.3rem;padding:.85rem 1.05rem;border-left:4px solid var(--orange);
  border-radius:0 var(--r-sm) var(--r-sm) 0;background:rgba(244,243,240,.12);
  font-size:var(--fs-small)}
.ks-newsletter--dunkel .ks-newsletter__meldung{color:var(--on-dark)}
.ks-newsletter__meldung--schlecht{border-left-color:#F0A57A}

/* --- Newsletter-Lasche ----------------------------------------------------
   Eine hochkant beschriftete Lasche klebt mittig am rechten Rand; ein Klick
   schiebt das Anmeldeformular herein. Sie steht auf jeder Seite, auf der der
   Abschnitt „Dranbleiben“ nicht ohnehin schon vorkommt.
   Das Panel bleibt immer im Dokument und wird nur nach rechts geschoben -
   so lässt sich die Bewegung zeigen; „visibility“ hält es solange aus der
   Tabulator-Reihenfolge heraus. */
.nl-lasche{position:fixed;inset:0 0 auto auto;z-index:70}
.nl-lasche[hidden]{display:none}

.nl-lasche__griff{
  position:fixed;top:50%;right:0;transform:translateY(-50%);
  padding:1.2rem .72rem;border:0;border-radius:10px 0 0 10px;
  background:var(--orange);color:#fff;cursor:pointer;
  writing-mode:vertical-rl;
  font:700 .8125rem/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;
  box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease),background-color .2s var(--ease),opacity .2s var(--ease);
}
.nl-lasche__griff:hover{background:var(--orange-dark);transform:translateY(-50%) translateX(-3px)}
.nl-lasche.ist-offen .nl-lasche__griff{opacity:0;pointer-events:none}

.nl-lasche__panel{
  position:fixed;top:50%;right:0;
  width:min(23.5rem,92vw);max-height:min(88vh,44rem);overflow:auto;
  padding:1.7rem 1.6rem 1.8rem;
  background:var(--forest);color:var(--on-dark);
  border-radius:var(--r-md) 0 0 var(--r-md);box-shadow:var(--shadow-md);
  transform:translateY(-50%) translateX(102%);visibility:hidden;
  transition:transform .32s var(--ease),visibility .32s var(--ease);
}
.nl-lasche.ist-offen .nl-lasche__panel{transform:translateY(-50%);visibility:visible}

.nl-lasche__zu{
  position:absolute;top:.5rem;right:.55rem;width:2.1rem;height:2.1rem;
  display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(244,243,240,.12);color:var(--on-dark);font-size:.85rem;cursor:pointer}
.nl-lasche__zu:hover{background:rgba(244,243,240,.24)}

/* Im schmalen Panel ist die Abschnittsüberschrift der Website zu groß. */
.nl-lasche__panel .section-head{margin-bottom:1.25rem;max-width:none}
.nl-lasche__panel .eyebrow{font-size:.6875rem;letter-spacing:.2em;margin-bottom:.5rem;color:var(--olive)}
.nl-lasche__panel h2{font-size:1.5rem;line-height:1.14;margin:0 0 .5rem}
.nl-lasche__panel .hand{color:var(--olive)}
.nl-lasche__panel .lead{font-size:var(--fs-small);line-height:1.5;color:var(--on-dark-2);max-width:none}
.nl-lasche__panel .form{gap:.85rem}
.nl-lasche__panel .field input{min-height:46px;padding:.6rem .8rem;font-size:1rem}
.nl-lasche__panel .check{min-height:0;font-size:var(--fs-meta);gap:.6rem}
.nl-lasche__panel .check input{width:20px;height:20px}
.nl-lasche__panel :focus-visible{outline-color:var(--olive)}

/* Auf dem Handy fährt das Formular von unten herein: dort ist Platz für die
   Tastatur, und der Daumen erreicht die Felder. Die Lasche bleibt rechts. */
@media (max-width:37.5rem){
  .nl-lasche__griff{padding:1rem .8rem;font-size:.75rem;letter-spacing:.16em}
  .nl-lasche__panel{
    top:auto;bottom:0;right:0;width:100%;max-height:86vh;
    border-radius:var(--r-md) var(--r-md) 0 0;
    transform:translateY(100%)}
  .nl-lasche.ist-offen .nl-lasche__panel{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .nl-lasche__panel,.nl-lasche__griff{transition:none}
}

/* --- Linkliste ----------------------------------------------------------- */
.linklist{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.1rem}
.linklist a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem .2rem;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;
  font-family:var(--font-head);font-size:1.1rem;font-weight:600;min-height:46px;
  transition:padding-left .25s var(--ease),color .2s var(--ease)}
.linklist a:hover{padding-left:.7rem;color:var(--orange-dark)}
.linklist a::after{content:"";width:9px;height:9px;border-right:2px solid var(--orange);
  border-bottom:2px solid var(--orange);transform:rotate(-45deg);flex:none}
.band--forest .linklist a{color:var(--on-dark);border-color:var(--line-dark)}
.band--forest .linklist a:hover{color:var(--olive)}
.band--forest .linklist a::after{border-color:var(--olive)}

/* --- Dokumentliste ------------------------------------------------------- */
/* Eine Zeile je Datei: Typkürzel, Name mit Beschreibung. Bewusst eine Liste
   und keine Karten - Dateien überfliegt man, man betrachtet sie nicht.
   Heruntergeladen wird mit einem Klick auf den Namen. Einen eigenen Knopf gibt
   es nicht; dafür reicht die Klickfläche des Namens über die ganze Zeile,
   damit man auf dem Handy nicht zielen muss. */
.dokumente{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.dokument{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem;
  padding:1.1rem .2rem;border-bottom:1px solid var(--line);
  transition:background-color .2s var(--ease)}
.dokument:hover{background:rgba(44,44,40,.04)}
.dokument:first-child{border-top:1px solid var(--line)}
.dokument[hidden]{display:none}
.dokument__typ{display:grid;place-items:center;flex:none;width:2.75rem;height:3.25rem;
  border:1.5px solid var(--line-strong);border-radius:4px 8px 4px 4px;
  font-family:var(--font-mono);font-size:.6875rem;font-weight:700;letter-spacing:.06em;
  color:var(--ink-2);background:var(--paper)}
.dokument__body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.dokument__name{font-family:var(--font-head);font-size:1.0625rem;font-weight:600;
  color:var(--ink);text-decoration:none;text-underline-offset:3px}
.dokument__name::after{content:"";position:absolute;inset:0}
.dokument:hover .dokument__name{color:var(--orange-dark);text-decoration:underline}
.dokument__name:focus-visible{outline:0}
.dokument__name:focus-visible::after{outline:3px solid var(--orange);outline-offset:-3px;border-radius:var(--r-sm)}
.dokument__text{color:var(--ink-2);font-size:var(--fs-small)}
.dokument__meta{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--ink-3);
  letter-spacing:.03em}
.dokumente--kompakt{margin-top:1rem}
.dokumente--kompakt .dokument{padding:.85rem .2rem}
.ks-dokument-hinweis{margin-top:2.5rem;max-width:70ch;color:var(--ink-2)}

@media (max-width:40rem){
  .dokument{gap:.75rem}
}

.band--forest .dokument{border-color:var(--line-dark)}
.band--forest .dokument:hover{background:rgba(244,243,240,.06)}
.band--forest .dokument:hover .dokument__name{color:var(--olive)}
.band--forest .dokument__typ{background:transparent;border-color:var(--line-dark);color:var(--on-dark-2)}
.band--forest .dokument__name{color:var(--on-dark)}
.band--forest .dokument__text{color:var(--on-dark-2)}

/* ---------- 22. Stichwortsuche ---------------------------------------------- */
/* Die Lupe steht rechts neben der Navigation. Ein Klick klappt das Suchfeld
   unter der Kopfzeile auf – als eigene Zeile im Kopf, nicht schwebend, damit
   auf keinem Gerät etwas überdeckt wird. */
.suchknopf{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-left:.25rem;padding:0;
  border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--forest);cursor:pointer;
  transition:color .18s var(--ease),background .18s var(--ease);
}
.suchknopf:hover{background:var(--cream-2);color:var(--orange-btn)}
.suchknopf__icon{width:21px;height:21px;display:block}
/* Offen: gefüllt statt umrandet - ohne Rahmen braucht es ein anderes Zeichen. */
.suchknopf[aria-expanded="true"]{background:var(--forest);color:var(--cream)}

.suchfeld{border-top:1px solid var(--line);background:var(--cream-2)}
.suchfeld[hidden]{display:none}
.suchfeld .wrap{display:flex;align-items:center;gap:.75rem;padding-top:.9rem;padding-bottom:.9rem}
.suchfeld__zu{
  flex:none;width:40px;height:40px;padding:0;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--ink-3);font-size:1.05rem;line-height:1;cursor:pointer;
}
.suchfeld__zu:hover{background:var(--cream);color:var(--forest)}

.suchform{display:flex;align-items:center;gap:.6rem;flex:1 1 auto;min-width:0;margin:0}
.suchform__feld{
  flex:1 1 auto;min-width:0;
  padding:.7rem .95rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink);font:inherit;font-size:1rem;
}
.suchform__feld::placeholder{color:var(--ink-3)}
.suchform__feld:focus-visible{outline:2px solid var(--orange-btn);outline-offset:2px;border-color:var(--orange-btn)}
.suchform__los{flex:none;white-space:nowrap}
.suchform--seite{margin:0 0 2.2rem}

/* Trefferliste: eine Zeile je Fund, davor die Rubrik als Überschrift. */
.treffer__gruppe{
  margin:2.2rem 0 .7rem;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--forest);display:flex;align-items:baseline;gap:.5rem;
}
.treffer__gruppe:first-of-type{margin-top:0}
.treffer__gruppe span{
  font-family:var(--font-mono);font-size:.75rem;font-weight:700;color:var(--ink-3);
  letter-spacing:.1em;
}
.treffer{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.treffer__eintrag{border-bottom:1px solid var(--line)}
.treffer__link{
  display:block;padding:.95rem .4rem;text-decoration:none;color:inherit;border-radius:var(--r-sm);
  transition:background .18s var(--ease);
}
.treffer__link:hover{background:var(--paper)}
.treffer__titel{
  display:block;font-family:var(--font-head);font-size:1.15rem;font-weight:600;
  line-height:1.25;color:var(--forest);
}
.treffer__link:hover .treffer__titel{color:var(--orange-btn)}
.treffer__text{display:block;margin-top:.3rem;font-size:.92rem;line-height:1.55;color:var(--ink-2)}
/* Hausorange stark aufgehellt; Schrift --ink-2 darauf: Kontrast 5,9. */
.treffer mark{background:#FBE0C8;color:inherit;padding:0 .1em;border-radius:2px}

@media (max-width:1199px){
  .suchknopf{margin-left:auto}
  .burger{margin-left:.25rem}
}
/* Auf dem Handy teilen sich Name, Lupe und Menue eine schmale Zeile. */
@media (max-width:640px){
  .site-header .wrap{gap:.55rem;min-height:72px}
  .brand{min-width:0}
  .brand__logo{height:38px}
  .brand-name{font-size:1.15rem}
  .brand-sub{font-size:.625rem;letter-spacing:.14em;margin-top:.2rem}
  .suchknopf{width:40px;height:40px;margin-left:auto}
  .burger{width:40px;height:40px;margin-left:.1rem}
}
@media (max-width:560px){
  .suchform__los{display:none}
  .suchfeld .wrap{gap:.4rem}
}
/* Sehr schmale Geräte - der Name bleibt vollständig, nur kleiner. */
@media (max-width:400px){
  .brand__logo{height:34px}
  .brand-name{font-size:1rem}
  .brand{gap:.5rem}
}

/* ---------- 23. Drucken und PDF ---------------------------------------------
   Gedruckt wird, was auf dem Schirm steht: die gewählte Ansicht mit den
   gesetzten Filtern. Alles, was auf Papier nichts zu suchen hat - Kopfbereich,
   Filterleiste, Fußbereich, Kontaktband -, entfällt; stattdessen steht
   oben ein Briefkopf mit Logo, Vereinsname, Titel und Datum (.printhead) und
   unten eine Zeile mit der Anschrift (.printfoot).
   Ein eigener PDF-Bau steckt nicht im Theme: Jeder Browser kann im
   Druckdialog "Als PDF sichern", und das Ergebnis ist genau diese Ansicht. */
.printhead,.printfoot{display:none}

@media print{
  @page{size:A4 portrait;margin:14mm 12mm}
  /* Der Monatskalender braucht die Breite und bekommt deshalb Querformat.
     Kennt ein Browser benannte Seiten nicht, druckt er ihn hochkant - eng,
     aber vollständig. */
  @page kalender{size:A4 landscape;margin:10mm}
  #view-kalender{page:kalender}

  html,body{background:#fff;color:#000;font-size:12px}
  .site-header,.site-footer,.pagehero,.filters,.pager,.viewswitch,.rip,
  .noresult,.kontaktband,.newsletter,.skip,.suchfeld,.backdrop,.pdfknopf,.nl-lasche,
  #wpadminbar,.band--forest,.band--orange{display:none}

  .band{padding:0;background:#fff;border:0}
  .band::before,.topo::before{display:none}
  .wrap{max-width:none;width:auto;padding:0;margin:0}

  /* Briefkopf im Stil der Website: links das Logo, daneben Vereinsname und
     Titel, rechts das Datum des Ausdrucks. Darunter eine Linie im
     Vereinsorange - dasselbe Zeichen, das auf der Website die Abschnitte
     akzentuiert, nur hier als schmaler Strich. */
  .printhead{
    display:flex;align-items:flex-end;justify-content:space-between;gap:6mm;
    margin:0 0 3mm;padding-bottom:1.6mm;border-bottom:1.6pt solid var(--orange);
  }
  .printhead__marke{display:flex;align-items:center;gap:3.5mm;margin:0}
  .printhead__logo{width:auto;height:10mm;display:block;flex:none}
  .printhead__verein{margin:0;font-family:var(--font-mono);font-size:7pt;
    letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
  .printhead__titel{margin:.6mm 0 0;font-family:var(--font-head);font-size:14pt;
    font-weight:700;line-height:1.05;letter-spacing:-.01em;color:var(--forest)}
  .printhead__titel .hand{font-size:1em;color:var(--orange)}
  .printhead__stand{margin:0;font-size:7pt;color:var(--ink-3);text-align:right;white-space:nowrap}

  /* Fußzeile: wohin man sich wenden kann, wenn der Zettel an der Wand hängt. */
  .printfoot{
    display:block;margin:2.5mm 0 0;padding-top:1.3mm;border-top:.5pt solid #bbb;
    font-family:var(--font-mono);font-size:6.8pt;letter-spacing:.06em;
    color:var(--ink-3);max-width:none;text-align:center;
  }
  .printfoot a{color:var(--ink-3);text-decoration:none}

  /* Farbflächen und farbige Kanten sollen wirklich auf dem Papier landen.
     Ohne diese Angabe sparen die Browser sie beim Drucken weg - und dann sind
     die Kategorien nicht mehr zu unterscheiden. */
  .cal,.cal *,.event,.event *,.printhead,.printhead *{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }

  /* --- Liste --- */
  .eventmonth{margin:4mm 0 1.5mm;font-size:9pt;color:var(--forest);break-after:avoid}
  .eventmonth::after{background:#000}
  .eventlist{gap:0}
  .event{
    break-inside:avoid;background:none;box-shadow:none;transform:none;
    border:0;border-bottom:.4pt solid #bbb;border-left:2.6pt solid var(--kat-treff);
    border-radius:0;padding:2.2mm 0 2.2mm 3mm;gap:4mm;
  }
  .event--kurs{border-left-color:var(--kat-kurs)}
  .event--markt{border-left-color:var(--kat-markt)}
  .event--veranstaltung{border-left-color:var(--kat-veranstaltung)}
  .event__date{background:none;border:.4pt solid #888;min-width:15mm;padding:1mm .5mm}
  .event__date b{font-size:13pt;color:#000}
  .event__date span{font-size:7pt;color:#000}
  .event__body h3{font-size:11pt;margin:0 0 .8mm}
  .event__body h3 a{color:#000;background:none}
  /* Der Beschreibungstext entfällt: Auf einem Aushang zählen Name, Tag und
     Uhrzeit - die stehen alle in der Zeile darunter. */
  .event__body p{display:none}
  .event__meta{font-size:8.5pt;color:#000;gap:.2mm 5mm}
  .event__meta li::before{background:#777}

  /* --- Monatskalender ---
     Der Ausdruck ist ein Aushang: klare Linien, ruhige Flächen, und je Termin
     ein Feld, in dem Farbbalken, Uhrzeit und Titel bündig aufeinandersitzen.
     Alle Maße sind in Millimetern gesetzt, damit das Blatt unabhängig von der
     Bildschirmgröße immer gleich aussieht. */
  .cal{border:0;border-radius:0;background:#fff;overflow:visible}
  .cal__bar{padding:0 0 1.5mm;border-bottom:0;display:block}
  .cal__bar h3{margin:0;font-size:12pt;font-weight:700;letter-spacing:.01em;color:var(--forest)}
  .cal__nav{display:none}

  .cal table{page-break-inside:avoid;border-collapse:collapse;
    border:.7pt solid var(--forest);table-layout:fixed;width:100%}
  /* Die Wochentagsleiste ist das grüne Band der Website in klein. */
  .cal th{
    font-family:var(--font-mono);font-size:7pt;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;text-align:left;color:var(--on-dark);background:var(--forest);
    padding:1.3mm 1.4mm;border:.5pt solid var(--forest);
  }
  .cal th abbr{text-decoration:none;border:0}
  /* Die Zeilenhöhe füllt das Blatt. Zwei Angaben kommen dafür aus dem Theme:
     data-wochen sagt, über wie viele Wochenzeilen der Monat läuft (vier bis
     sechs), und --druck-skala verkleinert das ganze Raster, wenn der vollste
     Tag sonst nicht mehr unterkäme. Alle Maße hier hängen an beidem. Ohne die
     Angaben gilt das Maß für sechs Wochen in voller Größe. */
  .cal{--druck-skala:1}
  .cal td{
    border:.35pt solid #9a9a9a;vertical-align:top;
    height:calc(20.5mm * var(--druck-skala));
    padding:calc(1.1mm * var(--druck-skala)) calc(1.1mm * var(--druck-skala)) calc(1.3mm * var(--druck-skala));
  }
  .cal[data-wochen="4"] td{height:calc(31mm * var(--druck-skala))}
  .cal[data-wochen="5"] td{height:calc(25mm * var(--druck-skala))}
  /* Samstag und Sonntag stehen auf einem Hauch Grau - das gliedert die Wochen,
     ohne eine weitere Farbe einzuführen. */
  .cal td:nth-child(6),.cal td:nth-child(7){background:#faf9f7}
  .cal td.is-out{background:#f4f3f1}
  .cal td.is-out .cal__num{color:#aaa}
  .cal td.is-today{box-shadow:none}
  .cal__num{
    display:block;font-family:var(--font-mono);font-weight:700;line-height:1;
    font-size:calc(8.5pt * var(--druck-skala));color:#222;
    margin:0 0 calc(1mm * var(--druck-skala));
  }
  /* Der heutige Tag bekommt eine gefüllte Ziffer statt eines Rahmens - der
     Rahmen lag über den Zellenlinien und wirkte wie ein Fehldruck. */
  .cal td.is-today .cal__num{
    display:inline-block;background:var(--forest);color:var(--on-dark);
    padding:calc(.6mm * var(--druck-skala)) calc(1.2mm * var(--druck-skala));
    border-radius:1mm;margin-bottom:calc(.9mm * var(--druck-skala));
  }

  /* Der Farbbalken ist hier kein Rahmen, sondern Teil der Fläche: ein harter
     Farbverlauf. Als Rahmen zeichnet der PDF-Bau ihn getrennt von der Fläche
     und rundet beide auf verschiedene Gerätepunkte - auf dem Papier sitzt der
     Balken dann um Haaresbreite neben der Fläche statt darauf. Als Verlauf ist
     es ein einziger Farbauftrag und kann nicht verrutschen. */
  .cal__ev{
    display:block;line-height:1.3;
    font-size:calc(7pt * var(--druck-skala));
    padding:calc(.7mm * var(--druck-skala)) calc(1.2mm * var(--druck-skala))
            calc(.7mm * var(--druck-skala)) 2.5mm;
    margin:0 0 calc(.7mm * var(--druck-skala));
    border:0;border-radius:0;
    background-image:linear-gradient(to right,var(--kat) 0 1.3mm,rgba(0,0,0,0) 1.3mm);
    background-repeat:no-repeat;
    color:#111;
    /* Eine Zeile je Termin. Der Monatskalender ist die Übersicht - was drauf
       steht, muss auf einen Blick erfassbar sein, und vor allem muss die Höhe
       einer Wochenzeile vorhersagbar bleiben, sonst rutscht der Ausdruck auf
       ein zweites Blatt. Wer alles vollständig braucht, druckt die Liste: Sie
       zeigt Titel, Wochentag, Datum, Uhrzeit und Ort ungekürzt. */
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  /* Noch einen Schritt weiter: Balken UND Fläche stecken in demselben Verlauf,
     die Fläche deckend auf Weiß gerechnet. Damit gibt es nur noch einen
     einzigen Farbauftrag je Eintrag - nichts, was gegeneinander verrutschen
     könnte. Papier ist weiß, die Deckung kostet also nichts. */
  @supports (background:color-mix(in srgb,red 10%,white)){
    .cal__ev{
      background-color:transparent;
      background-image:linear-gradient(to right,
        var(--kat) 0 1.3mm,
        color-mix(in srgb,var(--kat) 16%,#fff) 1.3mm);
    }
  }
  .cal__ev:last-child{margin-bottom:0}
  .cal__zeit{color:#000;font-size:.94em;letter-spacing:-.02em}

  /* Die Legende ist ein Absatz und hätte sonst die Lesebreite des Fließtextes -
     vier kurze Angaben stünden dann untereinander statt in einer Zeile. */
  .cal__legend{
    margin-top:2.5mm;max-width:none;color:#333;font-size:7pt;gap:1.2mm 6mm;letter-spacing:.06em;
  }
  .cal__legend i{
    width:6.5mm;height:3.2mm;border:0;border-radius:0;
    background-image:linear-gradient(to right,var(--kat) 0 1.3mm,rgba(0,0,0,0) 1.3mm);
    background-repeat:no-repeat;
  }
  @supports (background:color-mix(in srgb,red 10%,white)){
    .cal__legend i{
      background-color:transparent;
      background-image:linear-gradient(to right,
        var(--kat) 0 1.3mm,
        color-mix(in srgb,var(--kat) 16%,#fff) 1.3mm);
    }
  }

  a[href]::after{content:none}
}

/* ---------- Kopfbild vollständig (inc/kopfbild.php) ----------------------
   Flyer, Hochformate und kleine Bilder stehen ganz neben dem Text statt
   beschnitten im Hintergrund. Kleine Bilder werden nicht vergrößert. */
.pagehero--ganz .pagehero__grid{align-items:center}
@media (min-width:900px){.pagehero--ganz .pagehero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.pagehero__bild{margin:0;justify-self:end;line-height:0}
.pagehero__bild img{display:block;max-width:100%;width:auto;height:auto;max-height:440px;border-radius:var(--r-md);box-shadow:0 18px 40px -18px rgba(0,0,0,.6);background:#fff}
@media (max-width:899px){.pagehero__bild{justify-self:center}.pagehero__bild img{max-height:340px}}

/* Ansprechperson und Kursleitung verlinken auf ihre Karte im Team
   (/team/#person-ID). Die angesprungene Karte wird kurz hervorgehoben. */
.factbox__person{color:inherit;text-decoration:underline;text-decoration-color:rgba(236,116,4,.7);text-decoration-thickness:2px;text-underline-offset:.22em}
.factbox__person:hover,.factbox__person:focus-visible{color:var(--orange)}
.pcard:target{box-shadow:0 0 0 3px var(--orange),var(--shadow-md)}