/* =============================================================================
   MEISTERJAEGER AKADEMIE - Vibe homepage stylesheet (site.css)
   -----------------------------------------------------------------------------
   This stylesheet belongs to the hand-built ("vibe coded") homepage markup in
   vibe-pages/home.html. That markup is embedded into the Drupal front page
   as-is by a module; its top-most element is <div class="home">.

   SCOPING RULE (do not break):
   Every selector here is scoped under `div.home` so these styles cannot leak
   into the shared Drupal theme chrome (header .brm-header, footer .brm-footer,
   menus, generic .field wrappers, etc.). Without this scoping, bare selectors
   like `*`, `.field`, `header` and `body` overrode theme styles on the front
   page (e.g. the footer logo got stretched, the menu shifted).

   Conventions:
   - `body` / `:root` rules were flipped to `div.home` so page background and
     CSS custom properties live on the embed root, not the global document.
   - `html.tb-hidden` / `html.nav-hidden` keep their `html` anchor on purpose:
     site.js toggles those state classes on document.documentElement. Their
     targets are still scoped, e.g. `html.nav-hidden div.home header`.
   - @keyframes are global (no scoping needed) and intentionally left as-is.

   When adding new rules, keep the `div.home ` prefix on every selector.
============================================================================= */

div.home {
  /* MJ-Brand-Palette: Beige · Olive-Skala · Dark Green · Akzent */
  --bone: #F6F6EE;
  --bone-2: #EFEDDE;
  --paper: #F2F0E2;
  --card: #FAFAF3;
  --forest: #2F2C19;
  --forest-2: #2C3A1A;
  --bark: #222C14;
  --moss: #4A5A22;
  --fern: #6F7530;
  --sage: #C5C199;
  --olive: #E2E0CB;
  --olive-2: #C5C199;
  --olive-3: #938B43;
  --ink: #1F2412;
  --muted: #6E6B4E;
  --brass: #D07A1D;
  --brass-2: #D9933F;
  --cream: #F6F6EE;
  --cream-2: #C5C199;
  --line: #E2E0CB;
  --line-d: rgba(246,246,238,.14);
  /* MJ Brand-Gradients (reusable backgrounds) */
  --mj-grad-1: linear-gradient(180deg,#2F2C19 0%,#8B8241 100%);
  --mj-grad-2: linear-gradient(180deg,#746D36 0%,#3C3C3C 100%);
  --mj-grad-radial-1: radial-gradient(ellipse at center,#8B8241 0%,#777038 25%,#443F22 75%,#2F2C19 100%);
  --mj-grad-radial-2: radial-gradient(ellipse at center,#F6F6EE 14%,#E2E0CB 53%,#C5C199 82%,#938B43 100%);
  --fd: 'Farro','Hanken Grotesk',sans-serif;
  --fb: 'Hanken Grotesk',system-ui,sans-serif;
  --fm: 'JetBrains Mono',ui-monospace,monospace;
  --r: 3px;
  --r-lg: 6px;
  --pill: 4px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --shadow: 0 34px 70px -42px rgba(30,22,8,.5);
}

div.home * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div.home [hidden] {
  display: none!important;
}

div.home {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--fb);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

div.home img {
  display: block;
  max-width: 100%;
}

div.home a {
  color: inherit;
  text-decoration: none;
}

div.home ::selection {
  background: var(--forest);
  color: var(--cream);
}

div.home {
  --topbar-h: 0px;
  --safe-top: env(safe-area-inset-top,0px);
  --safe-bot: env(safe-area-inset-bottom,0px);
  --safe-l: env(safe-area-inset-left,0px);
  --safe-r: env(safe-area-inset-right,0px);
}

div.home {
  --topbar-h: 34px;
}

@media(max-width:600px) {
  div.home {
    --topbar-h: 30px;
  }
}

html.tb-hidden div.home {
  --topbar-h: 0px;
}

div.home .wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1.6rem,6vw,2.4rem);
}

div.home h1,
div.home h2,
div.home h3 {
  font-family: var(--fd);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
}

div.home .it {
  font-family: var(--fd);
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
}

div.home .lab {
  font-family: var(--fm);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}

div.home .lab::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--brass);
}

div.home .lab .d {
  color: var(--brass);
}

div.home .tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--fm);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .4rem .8rem;
  border-radius: var(--pill);
  border: 1px solid rgba(241,234,217,.3);
  color: var(--cream);
  background: rgba(20,16,9,.35);
  backdrop-filter: blur(6px);
}

div.home .btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  font-size: .88rem;
  padding: .85rem 1.5rem;
  border-radius: var(--pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: .3s var(--ease);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

div.home .btn svg {
  width: 16px;
  height: 16px;
  transition: .3s var(--ease);
}

div.home .btn:hover svg {
  transform: translateX(4px);
}

div.home .btn-brass {
  background: linear-gradient(180deg,rgba(184,138,60,.92),rgba(160,118,46,.86));
  color: #fff;
  border-color: rgba(255,236,200,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px -10px rgba(120,86,20,.6);
}

div.home .btn-brass:hover {
  background: linear-gradient(180deg,rgba(160,118,46,.98),#8c6524);
  transform: translateY(-2px);
}

div.home .btn-moss {
  background: linear-gradient(180deg,rgba(72,92,40,.9),rgba(50,66,26,.84));
  color: var(--cream);
  border-color: rgba(138,152,104,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18),0 8px 22px -10px rgba(30,40,12,.6);
}

div.home .btn-moss:hover {
  background: linear-gradient(180deg,rgba(86,107,44,.96),var(--fern));
  transform: translateY(-2px);
}

div.home .btn-dark {
  background: linear-gradient(180deg,rgba(42,54,28,.82),rgba(24,32,14,.8));
  color: var(--cream);
  border-color: rgba(138,152,104,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 8px 22px -10px rgba(0,0,0,.55);
}

div.home .btn-dark:hover {
  background: linear-gradient(180deg,var(--forest-2),var(--forest));
  transform: translateY(-2px);
}

div.home .btn-ghost {
  background: rgba(241,234,217,.1);
  border-color: rgba(241,234,217,.42);
  color: var(--cream);
}

div.home .btn-ghost:hover {
  background: rgba(241,234,217,.92);
  color: var(--ink);
  border-color: transparent;
}

div.home .btn-light {
  background: linear-gradient(180deg,rgba(255,253,247,.96),rgba(241,234,217,.9));
  color: var(--ink);
  border-color: rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),0 8px 22px -12px rgba(0,0,0,.4);
}

div.home .btn-light:hover {
  background: #fff;
  transform: translateY(-2px);
}

div.home .btn-line {
  background: rgba(30,33,19,.04);
  border-color: rgba(30,33,19,.55);
  color: var(--ink);
}

div.home .btn-line:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

div.home .lnk {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .86rem;
}

div.home .lnk svg {
  width: 15px;
  height: 15px;
  transition: .2s;
}

div.home .lnk:hover svg {
  transform: translateX(4px);
}

div.home::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: .04;
  mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Header */

div.home header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: transform .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
}

div.home header.solid {
  background: rgba(233,231,210,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

html.nav-hidden div.home header {
  transform: translateY(calc(-100% - var(--topbar-h) - var(--safe-top)));
}

html.nav-hidden div.home .topbar {
  transform: translateY(calc(-100% - var(--safe-top)));
}

div.home .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .6rem 0;
}

div.home .brand img {
  height: 40px;
  width: auto;
  display: block;
}

@media(max-width:1000px) {
  div.home .brand img {
    height: 38px;
  }
}

div.home .brand .ld {
  display: none;
}

div.home header.solid .brand .ll {
  display: none;
}

div.home header.solid .brand .ld {
  display: block;
}

div.home .nav-links {
  display: flex;
  gap: 1.8rem;
  list-style: none;
}

div.home .nav-links a {
  font-size: .86rem;
  font-weight: 500;
  color: var(--cream);
  opacity: .92;
  transition: .2s;
  position: relative;
}

div.home header.solid .nav-links a {
  color: var(--ink);
  opacity: .85;
}

div.home .nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--brass-2);
  transition: .25s;
}

div.home .nav-links a:hover::after {
  width: 100%;
}

div.home .nav-right {
  display: flex;
  align-items: center;
  gap: .8rem;
}

div.home .nav-right .btn {
  background: rgba(241,234,217,.12);
  border-color: rgba(241,234,217,.5);
  color: var(--cream);
}

div.home .nav-right .btn:hover {
  background: var(--cream);
  color: var(--ink);
}

div.home header.solid .nav-right .btn {
  background: var(--moss);
  border-color: var(--moss);
  color: var(--cream);
}

div.home header.solid .nav-right .btn:hover {
  background: var(--fern);
  border-color: var(--fern);
  color: var(--cream);
}

div.home .burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(241,234,217,.4);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background .2s,border-color .2s,color .2s;
}

div.home .burger:active {
  background: rgba(241,234,217,.08);
}

div.home header.solid .burger {
  border-color: var(--line);
  color: var(--ink);
}

div.home .burger svg {
  width: 20px;
  height: 20px;
}

div.home .nav-cta-li {
  display: none;
}

@media(max-width:1000px) {
  div.home .nav-links {
    display: none;
  }

  div.home .burger {
    display: flex;
  }

  div.home .nav-right .btn {
    display: none;
  }

  div.home .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--forest);
    padding: 1.4rem clamp(1.2rem,4vw,2.4rem) 1.6rem;
    gap: 0;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.55),inset 0 1px 0 rgba(241,234,217,.08);
    border-top: 1px solid rgba(241,234,217,.12);
    animation: navSlide .38s cubic-bezier(.22,.61,.36,1);
  }

  div.home .nav-links.open li {
    list-style: none;
  }

  div.home .nav-links.open a {
    color: var(--cream)!important;
    opacity: 1;
    padding: 1.05rem 0;
    border-bottom: 1px solid rgba(241,234,217,.1);
    font-family: var(--fd);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color .2s;
  }

  div.home .nav-links.open li:last-of-type:not(.nav-cta-li) a {
    border-bottom: 0;
  }

  div.home .nav-links.open a::after {
    content: "\203A";
    font-family: var(--fd);
    font-size: 1.4rem;
    color: var(--brass-2);
    opacity: .7;
    transition: transform .2s;
    background: none;
    height: auto;
    width: auto;
    position: static;
  }

  div.home .nav-links.open a:hover::after,
  div.home .nav-links.open a:active::after {
    transform: translateX(4px);
  }

  div.home .nav-links.open a:hover {
    color: var(--brass-2)!important;
  }

  div.home .nav-links.open .nav-cta-li {
    display: block;
    margin-top: 1.2rem;
    padding: 0;
  }

  div.home .nav-links.open .nav-cta-li a {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: .95rem 1.2rem;
    font-family: var(--fb);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .01em;
    background: var(--brass);
    border: 1px solid var(--brass);
    color: var(--cream)!important;
    border-radius: var(--r-pill,999px);
  }

  div.home .nav-links.open .nav-cta-li a::after {
    display: none;
  }

  div.home .nav-links.open .nav-cta-li a:hover {
    background: var(--brass-2);
    border-color: var(--brass-2);
    color: var(--cream)!important;
  }
}

@keyframes navSlide {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HERO */

div.home .hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

div.home .hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

div.home .hero .veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,rgba(18,14,8,.7),rgba(18,14,8,.05) 50%,rgba(18,14,8,.32)),linear-gradient(105deg,rgba(18,14,8,.34),transparent 60%);
}

@media(max-width:720px) {
  div.home .hero .veil {
    background: linear-gradient(to top,rgba(18,14,8,.95),rgba(18,14,8,.55) 22%,rgba(18,14,8,.18) 50%,rgba(18,14,8,.4)),linear-gradient(105deg,rgba(18,14,8,.34),transparent 60%);
  }
}

div.home .hero-in {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-bottom: clamp(1.6rem,4vw,3rem);
}

div.home .hero .eyebrow {
  color: rgba(241,234,217,.8);
  margin-bottom: 1.2rem;
}

div.home .hero h1 {
  font-size: clamp(2.2rem,5.6vw,4.8rem);
  color: var(--cream);
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}

@media(max-width:720px) {
  div.home .hero h1 {
    white-space: normal;
  }
}

div.home .hero p {
  color: rgba(241,234,217,.86);
  font-size: clamp(1rem,1.5vw,1.2rem);
  max-width: 44ch;
  margin: 1.2rem 0 1.8rem;
}

div.home .hero-cta {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  align-items: center;
}

div.home .finder {
  display: flex;
  gap: .4rem;
  background: rgba(243,238,226,.74);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: var(--r-lg);
  padding: .45rem;
  align-items: center;
  margin-top: 1.8rem;
  max-width: 640px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5),var(--shadow);
}

div.home .finder .ff {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: .35rem .9rem;
}

div.home .finder .ff label {
  font-family: var(--fm);
  font-size: .54rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .15rem;
}

div.home .finder .ff select {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  cursor: pointer;
  outline: none;
}

div.home .finder .sep {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin: .3rem 0;
}

@media(max-width:600px) {
  div.home .finder {
    flex-wrap: wrap;
  }

  div.home .finder .sep {
    display: none;
  }

  div.home .finder .find {
    width: 100%;
    justify-content: center;
  }
}

div.home .hero-rail {
  position: absolute;
  right: clamp(1rem,3vw,2.4rem);
  top: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

div.home .hero-rail span {
  writing-mode: vertical-rl;
  font-family: var(--fm);
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(241,234,217,.55);
}

div.home .scrollcue {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--fm);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(241,234,217,.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

div.home .scrollcue i {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--brass-2),transparent);
  animation: cue 1.8s infinite;
}

@keyframes cue {
  0%,
  100% {
    opacity: .2;
    transform: scaleY(.6);
  }

  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@media(max-width:760px) {
  div.home .hero-rail,
  div.home .scrollcue {
    display: none;
  }
}

div.home .hero-mute {
  position: absolute;
  right: clamp(1rem,3vw,2.4rem);
  top: clamp(6rem,11vh,7.5rem);
  z-index: 4;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(18,14,8,.42);
  border: 1px solid rgba(241,234,217,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(241,234,217,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s,border-color .25s,color .25s,transform .15s;
  font-family: var(--fm);
}

div.home .hero-mute:hover {
  background: rgba(168,124,50,.85);
  border-color: var(--brass);
  color: #fff;
}

div.home .hero-mute:active {
  transform: scale(.94);
}

div.home .hero-mute svg {
  width: 18px;
  height: 18px;
  display: none;
}

div.home .hero-mute[data-muted="true"] .ic-off {
  display: block;
}

div.home .hero-mute[data-muted="false"] .ic-on {
  display: block;
}

@media(max-width:1000px) {
  div.home .hero-mute {
    top: clamp(5.6rem,12vh,7.2rem);
    right: clamp(1.4rem,4vw,2.4rem);
    width: 40px;
    height: 40px;
  }
}

@media(max-width:760px) {
  div.home .hero-mute {
    width: 36px;
    height: 36px;
  }

  div.home .hero-mute svg {
    width: 15px;
    height: 15px;
  }
}

/* Bekannt durch */

div.home .partners {
  padding: clamp(2rem,4vh,3rem) 0;
  border-bottom: 1px solid var(--line);
}

div.home .partners .wrap {
  display: flex;
  align-items: center;
  gap: clamp(.9rem,2.2vw,2rem);
  flex-wrap: wrap;
  justify-content: center;
}

div.home .partners .pl {
  font-family: var(--fm);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

div.home .partners img {
  height: 34px;
  width: auto;
  filter: grayscale(1);
  opacity: .65;
  mix-blend-mode: multiply;
  transition: .3s;
}

div.home .partners img:hover {
  filter: grayscale(0);
  opacity: 1;
}

div.home section {
  position: relative;
}

div.home .pad {
  padding: clamp(3.6rem,8vh,7rem) 0;
}

div.home .head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}

div.home .head h2 {
  font-size: clamp(1.9rem,3.6vw,3rem);
  max-width: 18ch;
  margin-top: .8rem;
}

div.home .head .side {
  max-width: 32ch;
  color: var(--muted);
  font-size: .95rem;
}

/* Teaser / Versprechen split */

div.home .split {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(1.6rem,4vw,3.6rem);
  align-items: center;
}

div.home .split.split-r {
  grid-template-columns: 1.05fr .95fr;
}

div.home .split.split-r .split-fig {
  order: 2;
}

div.home .split-fig {
  position: relative;
}

div.home .split-fig img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

div.home .split-fig .stamp {
  position: absolute;
  right: -14px;
  top: -14px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--brass);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--fd);
  font-size: .74rem;
  line-height: 1.1;
  transform: rotate(7deg);
  box-shadow: var(--shadow);
}

div.home .stamp b {
  font-size: 1.5rem;
  display: block;
}

div.home .split h2 {
  font-size: clamp(1.9rem,3.6vw,3rem);
  margin: .8rem 0 1.1rem;
}

div.home .split p {
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 1rem;
  max-width: 46ch;
}

div.home .ipoints {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem 1.4rem;
  margin: 1.3rem 0 1.6rem;
}

div.home .ipoints li {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  font-size: .92rem;
}

div.home .ipoints svg {
  width: 17px;
  height: 17px;
  color: var(--brass);
  flex: none;
  margin-top: .15rem;
}

div.home .split .row {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
}

@media(max-width:840px) {
  div.home .split {
    grid-template-columns: 1fr;
  }

  div.home .split-fig {
    max-width: 460px;
  }

  div.home .ipoints {
    grid-template-columns: 1fr;
  }
}

/* Dozenten Slider (Pfeil-Nav, kein Drag) */

div.home .slider-nav {
  display: flex;
  gap: .5rem;
}

div.home .snav {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .2s;
}

div.home .snav:hover {
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
}

div.home .snav svg {
  width: 18px;
  height: 18px;
}

div.home .snav[disabled] {
  opacity: .35;
  cursor: default;
}

div.home .doz-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: .3rem;
}

div.home .doz-track::-webkit-scrollbar {
  display: none;
}

div.home .doz {
  flex: 0 0 clamp(260px,30%,320px);
  scroll-snap-align: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem;
}

div.home .doz .av {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--cream);
  display: grid;
  place-items: center;
  font-family: var(--fd);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

div.home .doz h3 {
  font-size: 1.2rem;
}

div.home .doz .role {
  font-family: var(--fm);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
  margin: .2rem 0 .7rem;
}

div.home .doz p {
  color: var(--muted);
  font-size: .88rem;
}

/* Kurse cards */

div.home .kurse {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 1rem;
}

div.home .kc {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: clamp(360px,40vw,500px);
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow);
}

div.home .kc img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 1s var(--ease);
}

div.home .kc:hover img {
  transform: scale(1.06);
}

div.home .kc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,rgba(18,14,8,.9),rgba(18,14,8,.05) 60%);
}

div.home .kc .tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
}

div.home .kc .c {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
  color: var(--cream);
  width: 100%;
}

div.home .kc h3 {
  font-size: clamp(1.4rem,2vw,1.9rem);
  color: #fff;
  margin-bottom: .3rem;
}

div.home .kc .pr {
  font-family: var(--fm);
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--cream-2);
}

div.home .kc .reveal-row {
  display: flex;
  gap: .5rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: .45s var(--ease);
}

div.home .kc:hover .reveal-row {
  max-height: 80px;
  opacity: 1;
  margin-top: 1rem;
}

div.home .kc .reveal-row .btn {
  padding: .6rem 1.1rem;
  font-size: .8rem;
}

@media(max-width:860px) {
  div.home .kurse {
    grid-template-columns: 1fr;
  }

  div.home .kc {
    min-height: 320px;
  }

  div.home .kc .reveal-row {
    max-height: 80px;
    opacity: 1;
    margin-top: 1rem;
  }
}

/* Finanzierung Banner */

div.home .banner {
  position: relative;
  overflow: hidden;
  color: var(--cream);
  text-align: center;
  border-radius: var(--r-lg);
}

div.home .banner .bg {
  position: absolute;
  inset: 0;
}

div.home .banner .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

div.home .banner .bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18,14,8,.62);
}

div.home .banner .in {
  position: relative;
  z-index: 2;
  padding: clamp(2.6rem,6vw,4.4rem) 1.5rem;
}

div.home .banner h2 {
  font-size: clamp(1.8rem,3.6vw,2.8rem);
  color: #fff;
}

div.home .banner p {
  color: rgba(241,234,217,.85);
  max-width: 42ch;
  margin: .9rem auto 1.6rem;
}

/* Kursfilter / Termine – grünes Waldband */

div.home .termine {
  background: var(--forest);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}

div.home .termine .bgleaf {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background: radial-gradient(120% 80% at 100% 0%,rgba(86,107,44,.35),transparent 60%), radial-gradient(90% 70% at 0% 100%,rgba(56,73,29,.55),transparent 55%);
}

div.home .termine .wrap {
  position: relative;
  z-index: 1;
}

div.home .termine .head h2 {
  color: var(--cream);
}

div.home .termine .lab {
  color: var(--cream-2);
}

div.home .termine .lab::before {
  background: var(--brass-2);
}

div.home .termine .lab .d {
  color: var(--brass-2);
}

div.home .termine .side {
  color: rgba(241,234,217,.72);
  font-size: .95rem;
}

div.home .termine .side b {
  font-family: var(--fd);
  font-weight: 700;
  color: var(--cream);
  font-size: 1.05em;
}

div.home .tfilter {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: flex-end;
  background: rgba(241,234,217,.06);
  border: 1px solid var(--line-d);
  border-radius: var(--r-lg);
  padding: .55rem;
  margin-bottom: 2rem;
}

div.home .tf {
  flex: 1;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  padding: .45rem .95rem;
}

div.home .tf label {
  font-family: var(--fm);
  font-size: .55rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-2);
  margin-bottom: .35rem;
}

div.home .tf .sel {
  position: relative;
}

div.home .tf .sel::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--brass-2);
  border-bottom: 1.5px solid var(--brass-2);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

div.home .tf select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  color: var(--cream);
  cursor: pointer;
  outline: none;
  padding-right: 1.2rem;
}

div.home .tf select option {
  color: #1E2113;
}

div.home .rt-reset {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: transparent;
  border: 1px solid var(--line-d);
  color: var(--cream);
  font-family: var(--fm);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .85rem 1.1rem;
  margin: .2rem;
  border-radius: var(--pill);
  cursor: pointer;
  transition: .25s var(--ease);
}

div.home .rt-reset:hover {
  background: rgba(241,234,217,.1);
  border-color: var(--brass-2);
}

div.home .rt-reset svg {
  width: 14px;
  height: 14px;
}

div.home .tgrid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1rem;
}

@media(max-width:1000px) {
  div.home .tgrid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media(max-width:640px) {
  div.home .tgrid {
    grid-template-columns: 1fr;
  }
}

div.home .result-card {
  background: rgba(241,234,217,.05);
  border: 1px solid var(--line-d);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .95rem;
  transition: .3s var(--ease);
  animation: rIn .5s var(--ease) backwards;
}

div.home .result-card:hover {
  background: rgba(241,234,217,.09);
  transform: translateY(-3px);
  border-color: rgba(200,164,88,.45);
}

div.home .result-card.is-full {
  opacity: .55;
}

div.home .r-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
}

div.home .r-type {
  font-family: var(--fm);
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .32rem .7rem;
  border-radius: var(--pill);
  border: 1px solid rgba(138,152,104,.5);
  color: var(--sage);
}

div.home .r-type.t-online {
  color: var(--brass-2);
  border-color: rgba(200,164,88,.5);
}

div.home .r-type.t-premium {
  color: #fff;
  background: var(--moss);
  border-color: transparent;
}

div.home .r-status {
  font-family: var(--fm);
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-2);
}

div.home .result-card h3 {
  font-family: var(--fd);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.15;
  color: var(--cream);
}

div.home .r-meta {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: .84rem;
  color: rgba(241,234,217,.8);
}

div.home .r-meta span {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}

div.home .r-meta svg {
  width: 15px;
  height: 15px;
  color: var(--brass-2);
  flex-shrink: 0;
  margin-top: .1rem;
}

div.home .r-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  border-top: 1px solid var(--line-d);
  padding-top: 1rem;
}

div.home .r-price {
  font-family: var(--fd);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--cream);
}

div.home .r-actions {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

div.home .r-actions .btn {
  justify-content: center;
  width: 100%;
  padding: .7rem 1rem;
  font-size: .82rem;
}

div.home .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .82rem;
  color: var(--brass-2);
  justify-content: center;
}

div.home .link-arrow svg {
  width: 14px;
  height: 14px;
  transition: .2s;
}

div.home .link-arrow:hover svg {
  transform: translateX(4px);
}

div.home .rt-hidden {
  display: none!important;
}

div.home .results-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 3rem 1rem;
  color: rgba(241,234,217,.7);
}

div.home .results-empty svg {
  width: 36px;
  height: 36px;
  margin: 0 auto 1rem;
  color: var(--brass-2);
  display: block;
}

div.home .tactions {
  display: flex;
  justify-content: center;
  gap: .8rem;
  margin-top: 1.8rem;
}

div.home .termine .btn-ghost {
  border-color: rgba(241,234,217,.4);
  color: var(--cream);
}

div.home .termine .btn-ghost:hover {
  background: var(--cream);
  color: var(--ink);
}

@keyframes rIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Termine: Interaktiver Monatskalender mit Detail-Panel */

div.home .kal-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-family: var(--fm);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-2);
  margin: 1.1rem auto 2rem;
}

div.home .kal-legend span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

div.home .kal-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

div.home .kal-legend i.praesenz {
  background: var(--brass);
}

div.home .kal-legend i.online {
  background: var(--fern);
}

div.home .kal-legend i.jugend {
  background: var(--sage);
}

div.home .kal-legend i.cancel {
  background: transparent;
  border: 1px dashed rgba(241,234,217,.55);
}

div.home .kal-app {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 1.8rem;
  align-items: stretch;
}

div.home .kal-cal {
  background: rgba(241,234,217,.05);
  border: 1px solid var(--line-d);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.4rem 1.6rem;
}

div.home .kal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

div.home .kal-nb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(241,234,217,.08);
  border: 1px solid var(--line-d);
  color: var(--cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s var(--ease);
}

div.home .kal-nb:hover:not(:disabled) {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

div.home .kal-nb:disabled {
  opacity: .28;
  cursor: not-allowed;
}

div.home .kal-nb svg {
  width: 18px;
  height: 18px;
}

div.home .kal-mlabel {
  font-family: var(--fd);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--cream);
}

div.home .kal-mlabel .y {
  font-family: var(--fm);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-2);
  margin-left: .5rem;
}

div.home .kal-cgrid {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 5px;
}

div.home .kal-cgrid .wd {
  font-family: var(--fm);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-2);
  text-align: center;
  padding: 0 0 .55rem;
  opacity: .7;
}

div.home .kal-cgrid .d {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  color: var(--cream);
  border-radius: 4px;
  background: rgba(241,234,217,.03);
  transition: background .15s var(--ease),color .15s var(--ease);
}

div.home .kal-cgrid .d.out {
  color: rgba(241,234,217,.18);
  background: transparent;
}

div.home .kal-cgrid .d.course {
  cursor: pointer;
  background: rgba(241,234,217,.08);
}

div.home .kal-cgrid .d.course:hover {
  background: rgba(241,234,217,.16);
}

div.home .kal-cgrid .d.course.sel {
  background: var(--brass);
  color: #fff;
  box-shadow: 0 0 0 1px var(--brass);
}

div.home .kal-cgrid .d.course.sel .bars i {
  filter: brightness(1.5);
}

div.home .kal-cgrid .d .bars {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 5px;
  display: flex;
  gap: 2px;
}

div.home .kal-cgrid .d .bars i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
}

div.home .kal-cgrid .d .bars i.praesenz {
  background: var(--brass);
}

div.home .kal-cgrid .d .bars i.online {
  background: var(--fern);
}

div.home .kal-cgrid .d .bars i.jugend {
  background: var(--sage);
}

div.home .kal-cgrid .d.cancel-only {
  text-decoration: line-through;
  text-decoration-color: rgba(241,234,217,.5);
  color: rgba(241,234,217,.6);
}

div.home .kal-cgrid .d.cancel-only .bars i {
  opacity: .4;
}

div.home .kal-detail {
  background: var(--card);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: 1.7rem 1.9rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-height: 380px;
}

div.home .kal-detail .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}

div.home .kal-detail .chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--fm);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(168,124,50,.16);
  padding: .36rem .7rem;
  border-radius: var(--pill);
}

div.home .kal-detail .chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

div.home .kal-detail .chip i.praesenz {
  background: var(--brass);
}

div.home .kal-detail .chip i.online {
  background: var(--fern);
}

div.home .kal-detail .chip i.jugend {
  background: var(--sage);
}

div.home .kal-detail .ctr {
  display: flex;
  align-items: center;
  gap: .5rem;
}

div.home .kal-detail .ctr-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s var(--ease);
}

div.home .kal-detail .ctr-btn:hover:not(:disabled) {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

div.home .kal-detail .ctr-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}

div.home .kal-detail .ctr-btn svg {
  width: 14px;
  height: 14px;
}

div.home .kal-detail .ctr .num {
  font-family: var(--fm);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--muted);
}

div.home .kal-detail h3 {
  font-family: var(--fd);
  font-size: 1.5rem;
  color: var(--forest);
  line-height: 1.15;
  margin-top: .5rem;
  letter-spacing: -.01em;
}

div.home .kal-detail .dates {
  font-family: var(--fd);
  font-style: italic;
  font-weight: 300;
  font-size: 1.1rem;
  color: var(--moss);
  margin-top: .15rem;
}

div.home .kal-detail .meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1rem;
  font-size: .85rem;
  color: var(--muted);
  margin-top: .45rem;
}

div.home .kal-detail .meta b {
  color: var(--ink);
  font-weight: 600;
}

div.home .kal-detail .meta .bad {
  color: #b14d2a;
  font-weight: 600;
}

div.home .kal-detail .desc {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
  margin-top: .5rem;
}

div.home .kal-detail .actions {
  display: flex;
  gap: .6rem;
  margin-top: auto;
  flex-wrap: wrap;
  padding-top: 1.1rem;
}

div.home .kal-detail .actions .btn {
  flex: 1 1 160px;
  justify-content: center;
}

div.home .kal-detail .actions .btn.disabled {
  pointer-events: none;
  opacity: .45;
}

div.home .kal-detail .empty {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
  text-align: center;
  margin: auto 0;
}

div.home .kal-detail .empty b {
  display: block;
  font-family: var(--fd);
  font-weight: 600;
  color: var(--forest);
  font-size: 1.1rem;
  margin-bottom: .4rem;
}

@media(max-width:900px) {
  div.home .kal-app {
    grid-template-columns: 1fr;
  }

  div.home .kal-detail {
    min-height: 0;
  }
}

@media(max-width:520px) {
  div.home .kal-mlabel {
    font-size: 1.2rem;
  }

  div.home .kal-cgrid .d {
    font-size: .85rem;
  }
}

/* Eindrücke – Accordion-Galerie */

div.home .acc {
  display: flex;
  gap: 6px;
  height: clamp(340px,46vw,520px);
}

div.home .acc-item {
  position: relative;
  flex: 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: flex .6s var(--ease);
  min-width: 40px;
}

div.home .acc-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

div.home .acc-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,rgba(18,14,8,.8),transparent 55%);
  opacity: .85;
}

div.home .acc-item.active {
  flex: 4.5;
}

div.home .acc-item .cap {
  position: absolute;
  left: 1.2rem;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 2;
  color: var(--cream);
  opacity: 0;
  transform: translateY(8px);
  transition: .4s var(--ease) .15s;
  white-space: nowrap;
}

div.home .acc-item.active .cap {
  opacity: 1;
  transform: none;
}

div.home .acc-item .cap b {
  font-family: var(--fd);
  font-size: 1.4rem;
  display: block;
}

div.home .acc-item .cap span {
  font-family: var(--fm);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cream-2);
}

div.home .acc-item .idx {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  font-family: var(--fm);
  font-size: .6rem;
  letter-spacing: .1em;
  color: var(--cream);
  opacity: .7;
}

@media(max-width:760px) {
  div.home .acc {
    flex-direction: column;
    height: auto;
  }

  div.home .acc-item {
    flex: none;
    height: 160px;
  }

  div.home .acc-item.active {
    height: 300px;
  }

  div.home .acc-item .cap {
    white-space: normal;
    opacity: 1;
    transform: none;
  }
}

/* 4 Schritte als gewundener Wanderpfad (SVG) mit Scroll-Animation */

div.home .ablaufpfad {
  position: relative;
  max-width: 940px;
  margin: 2rem auto 0;
}

div.home .ap-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

div.home .ap-base {
  fill: none;
  stroke: rgba(120,98,50,.38);
  stroke-width: 2.4;
  stroke-dasharray: 1 9;
  stroke-linecap: round;
}

div.home .ap-prog {
  fill: none;
  stroke: var(--brass);
  stroke-width: 3.4;
  stroke-linecap: round;
}

div.home .ap-nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

div.home .ap-node {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--cream-2);
  color: var(--muted);
  font-family: var(--fd);
  font-weight: 500;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%,-50%) scale(.84);
  transition: .5s var(--ease);
  box-shadow: 0 6px 18px -10px rgba(30,22,8,.5);
}

div.home .ap-node.on {
  border-color: var(--brass);
  color: var(--brass);
  background: #fff;
  transform: translate(-50%,-50%) scale(1);
  box-shadow: 0 0 0 6px rgba(168,124,50,.14),0 10px 22px -10px rgba(120,86,20,.5);
}

div.home .ap-steps {
  position: relative;
  z-index: 1;
}

div.home .ap-step {
  position: relative;
  min-height: 152px;
}

div.home .ap-card {
  position: absolute;
  top: 50%;
  width: 33%;
  transform: translateY(-50%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.2rem 1.4rem;
  box-shadow: 0 22px 48px -36px rgba(30,22,8,.55);
  transition: opacity .6s var(--ease),transform .6s var(--ease);
}

div.home .ap-step.left .ap-card {
  left: 0;
  text-align: right;
}

div.home .ap-step.right .ap-card {
  right: 0;
  text-align: left;
}

div.home .ap-card h3 {
  font-size: 1.2rem;
  margin-bottom: .34rem;
}

div.home .ap-card p {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

div.home .ablaufpfad.ready .ap-card {
  opacity: 0;
}

div.home .ablaufpfad.ready .ap-step.left .ap-card {
  transform: translateY(-50%) translateX(-24px);
}

div.home .ablaufpfad.ready .ap-step.right .ap-card {
  transform: translateY(-50%) translateX(24px);
}

div.home .ablaufpfad.ready .ap-step.in .ap-card {
  opacity: 1;
  transform: translateY(-50%);
}

@media(max-width:760px) {
  div.home .ablaufpfad {
    max-width: 520px;
  }

  div.home .ap-step {
    min-height: 0;
    margin-bottom: 1.2rem;
  }

  div.home .ap-card {
    position: relative;
    top: auto;
    width: auto;
    margin-left: 54px;
    transform: none!important;
    text-align: left!important;
  }

  div.home .ablaufpfad.ready .ap-card {
    opacity: 0;
    transform: translateX(16px)!important;
  }

  div.home .ablaufpfad.ready .ap-step.in .ap-card {
    opacity: 1;
    transform: none!important;
  }
}

/* Stimmen */

div.home .quotes {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1rem;
}

div.home .q {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
}

div.home .q .st {
  color: var(--brass);
  letter-spacing: 2px;
  margin-bottom: .8rem;
}

div.home .q blockquote {
  font-family: var(--fb);
  font-size: 15.5px;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--ink);
}

div.home .q .by {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: auto;
}

div.home .q .by b {
  display: block;
  font-size: .82rem;
}

div.home .q .by span {
  font-family: var(--fm);
  font-size: .55rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

@media(max-width:1000px) {
  div.home .quotes {
    grid-template-columns: repeat(2,1fr);
  }
}

@media(max-width:640px) {
  div.home .quotes {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
}

/* FAQ */

div.home .faq {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

div.home .faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

div.home .faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.2rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  font-size: .96rem;
}

div.home .faq summary::-webkit-details-marker {
  display: none;
}

div.home .faq summary .pm {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}

div.home .faq summary .pm::before,
div.home .faq summary .pm::after {
  content: "";
  position: absolute;
  background: var(--brass);
  transition: .25s;
}

div.home .faq summary .pm::before {
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
}

div.home .faq summary .pm::after {
  top: 0;
  left: 6px;
  width: 2px;
  height: 14px;
}

div.home .faq details[open] summary .pm::after {
  transform: scaleY(0);
}

div.home .faq details p {
  padding: 0 1.2rem 1.1rem;
  color: var(--muted);
  font-size: .92rem;
}

/* Werte */

div.home .werte {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 1rem;
}

div.home .wert .ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bone-2);
  display: grid;
  place-items: center;
  color: var(--brass);
  margin-bottom: .9rem;
}

div.home .wert .ic svg {
  width: 22px;
  height: 22px;
}

div.home .wert h3 {
  font-size: 1.1rem;
  margin-bottom: .3rem;
}

div.home .wert p {
  color: var(--muted);
  font-size: .85rem;
}

@media(max-width:1100px) {
  div.home .werte {
    grid-template-columns: repeat(3,1fr);
  }
}

@media(max-width:760px) {
  div.home .werte {
    grid-template-columns: repeat(2,1fr);
  }
}

/* STÄRKEN — Feature Tabs */

div.home .staerken-lead {
  max-width: 620px;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

div.home .st-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  margin: 2.4rem 0 0;
  border-bottom: 1px solid var(--line);
}

div.home .st-tab {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 1rem 0;
  margin-right: 3rem;
  font-family: var(--fm);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  position: relative;
  transition: color .25s var(--ease);
}

div.home .st-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}

div.home .st-tab:hover {
  color: var(--ink);
}

div.home .st-tab.active {
  color: var(--brass);
}

div.home .st-tab.active::after {
  transform: scaleX(1);
}

div.home .st-panes {
  position: relative;
  margin-top: 2.4rem;
}

div.home .st-pane {
  display: none;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.6rem,3.5vw,3rem);
  align-items: center;
}

div.home .st-pane.active {
  display: grid;
  animation: stPaneIn .55s var(--ease);
}

div.home .st-fig {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--bone-2);
  box-shadow: 0 30px 60px -28px rgba(18,14,8,.45);
}

div.home .st-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

div.home .st-info {
  padding: .4rem 0;
}

div.home .st-info h3 {
  font-family: var(--fd);
  font-size: clamp(1.5rem,2.4vw,2.1rem);
  line-height: 1.1;
  margin-bottom: 1.1rem;
}

div.home .st-info p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  max-width: 46ch;
}

@keyframes stPaneIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media(max-width:820px) {
  div.home .st-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }

  div.home .st-tab {
    flex-shrink: 0;
    padding: .9rem 1rem;
    font-size: .62rem;
  }

  div.home .st-pane {
    grid-template-columns: 1fr;
  }

  div.home .st-fig {
    aspect-ratio: 16/10;
  }
}

/* Mobil (≤700px): Stärken nicht als Scroll-Tabs, sondern alle Panes gestapelt */

@media(max-width:700px) {
  div.home .st-tabs {
    display: none;
  }

  div.home .st-panes {
    margin-top: 1.6rem;
  }

  div.home .st-pane {
    display: grid!important;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2.2rem;
  }

  div.home .st-pane:last-child {
    margin-bottom: 0;
  }

  div.home .st-fig {
    aspect-ratio: 16/10;
  }

  div.home .st-info h3 {
    font-size: clamp(1.25rem,4.4vw,1.7rem);
    overflow-wrap: break-word;
    hyphens: auto;
  }

  div.home .st-info p {
    max-width: none;
  }
}

/* Newsletter */

div.home .news {
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--r-lg);
  text-align: center;
  padding: clamp(2.4rem,5vw,4rem) 1.5rem;
}

div.home .news h2 {
  color: #fff;
  font-size: clamp(1.7rem,3.2vw,2.6rem);
}

div.home .news p {
  color: var(--cream-2);
  max-width: 42ch;
  margin: .8rem auto 1.6rem;
}

div.home .news form {
  display: flex;
  gap: .5rem;
  max-width: 440px;
  margin: 0 auto;
  flex-wrap: wrap;
}

div.home .news input {
  flex: 1;
  min-width: 200px;
  padding: .85rem 1rem;
  border: 1px solid var(--line-d);
  border-radius: var(--r);
  background: rgba(241,234,217,.08);
  color: var(--cream);
  font: inherit;
  font-size: .9rem;
}

div.home .news input::placeholder {
  color: var(--cream-2);
}

div.home .news-socials {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.6rem;
}

div.home .ns-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.15rem;
  background: rgba(241,234,217,.1);
  border: 1px solid rgba(241,234,217,.32);
  border-radius: var(--pill);
  color: var(--cream);
  font-size: .86rem;
  font-weight: 500;
  transition: .25s var(--ease);
}

div.home .ns-link:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: transparent;
  transform: translateY(-2px);
}

div.home .ns-link svg {
  width: 18px;
  height: 18px;
}

div.home footer {
  background: var(--bark);
  color: var(--cream-2);
  padding: 3rem 0 2rem;
}

div.home .foot {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

div.home .foot .about {
  max-width: 28ch;
}

div.home .foot .about img {
  height: 38px;
  filter: brightness(0) invert(1);
  opacity: .9;
  margin-bottom: .8rem;
}

div.home .foot .about p {
  font-size: .88rem;
}

div.home .foot .col h4 {
  font-family: var(--fm);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass-2);
  margin-bottom: .7rem;
}

div.home .foot .col a {
  display: block;
  font-size: .88rem;
  color: var(--cream-2);
  padding: .2rem 0;
}

div.home .foot .col a:hover {
  color: #fff;
}

div.home .foot-bottom {
  margin-top: 2.2rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line-d);
  font-size: .78rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Waldpfad-Navigation (geschwungener Pfad, zeigt Position) */

div.home .trail {
  position: fixed;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  height: 64vh;
  width: 78px;
  z-index: 90;
  pointer-events: none;
}

div.home .trail svg {
  position: absolute;
  inset: 0;
  width: 78px;
  height: 100%;
  overflow: visible;
}

div.home .trail-title {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-family: var(--fm);
  font-size: .64rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--brass);
  opacity: .95;
  pointer-events: none;
  font-weight: 500;
}

div.home .trail-base {
  fill: none;
  stroke: rgba(168,124,50,.34);
  stroke-width: 6;
  stroke-linecap: round;
}

div.home .trail-prog {
  fill: none;
  stroke: var(--fern);
  stroke-width: 2.2;
  stroke-linecap: round;
}

div.home .trail-node {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bone);
  border: 1.5px solid var(--sage);
  transform: translate(-50%,-50%);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .2s,border-color .2s,background .2s;
}

div.home .trail-node:hover {
  border-color: var(--fern);
  transform: translate(-50%,-50%) scale(1.3);
}

div.home .trail-node.passed {
  border-color: var(--fern);
  background: var(--fern);
}

div.home .trail-node.active {
  border-color: var(--fern);
  background: var(--fern);
  box-shadow: 0 0 0 4px rgba(86,107,44,.22);
}

div.home .trail-label {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--fm);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: .22rem .5rem;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  box-shadow: 0 4px 12px -6px rgba(0,0,0,.3);
}

div.home .trail-node:hover .trail-label,
div.home .trail-node.active .trail-label {
  opacity: 1;
}

div.home .trail-marker {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--fern);
  transform: translate(-50%,-50%);
  box-shadow: 0 0 0 4px rgba(86,107,44,.28),0 2px 8px rgba(0,0,0,.35);
  z-index: 2;
}

div.home .trail-marker::after {
  content: "";
  position: absolute;
  inset: 4.5px;
  border-radius: 50%;
  background: var(--cream);
}

@media(max-width:1439px) {
  div.home .trail {
    display: none;
  }
}

div.home .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: .8s var(--ease);
}

div.home .reveal.in {
  opacity: 1;
  transform: none;
}

@media(prefers-reduced-motion:reduce) {
  div.home .reveal {
    opacity: 1;
    transform: none;
  }

  div.home .scrollcue i {
    animation: none;
  }
}

/* ============================================================
   SUB-PAGES (Unterseiten: Kurse, Workshops, Magazin, Seiten …)
   ============================================================ */

div.home .skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--forest);
  color: var(--cream);
  padding: .6rem 1rem;
  z-index: 300;
}

div.home .skip-link:focus {
  left: .5rem;
  top: .5rem;
}

div.home .eyebrow {
  font-family: var(--fm);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-block;
}

div.home .muted {
  color: var(--muted);
}

div.home .scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--brass);
  z-index: 101;
}

div.home .to-top {
  position: fixed;
  right: 1.2rem;
  bottom: 5.4rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--cream);
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: .3s var(--ease);
  z-index: 80;
  box-shadow: var(--shadow);
}

div.home .to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

div.home .to-top svg {
  width: 20px;
  height: 20px;
}

/* Page-Hero (Banner mit Bild) */

div.home .page-hero {
  position: relative;
  min-height: clamp(460px,64vh,660px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--cream);
}

div.home .page-hero-bg {
  position: absolute;
  inset: 0;
}

div.home .page-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

div.home .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,rgba(18,14,8,.92),rgba(18,14,8,.35) 62%,rgba(18,14,8,.55));
}

div.home .page-hero .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 7rem;
  padding-bottom: clamp(2rem,4vw,3.2rem);
}

div.home .page-hero .inner {
  max-width: 760px;
}

div.home .page-hero .eyebrow {
  color: var(--brass-2);
}

div.home .page-hero h1 {
  font-size: clamp(2.1rem,4.8vw,3.7rem);
  color: var(--cream);
  margin: .7rem 0 .8rem;
}

div.home .page-hero p {
  color: rgba(241,234,217,.86);
  font-size: clamp(1rem,1.4vw,1.15rem);
  max-width: 54ch;
}

div.home .breadcrumb {
  font-family: var(--fm);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

div.home .breadcrumb::-webkit-scrollbar {
  display: none;
}

div.home .breadcrumb a {
  color: var(--muted);
}

div.home .breadcrumb a:hover {
  color: var(--ink);
}

div.home .breadcrumb .sep {
  opacity: .5;
}

div.home .breadcrumb .current {
  color: var(--brass);
}

div.home .breadcrumb-bar {
  padding: 1rem 0;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
}

/* Formulare + Kontakt-Layout (2-Funnel) */

div.home .contact-grid {
  display: grid;
  grid-template-columns: 1.55fr .85fr;
  gap: clamp(1.6rem,3.5vw,3rem);
  align-items: start;
}

@media(max-width:900px) {
  div.home .contact-grid {
    grid-template-columns: 1fr;
  }
}

div.home .form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem,3vw,2.2rem);
}

div.home .form .h3 {
  font-family: var(--fd);
  font-weight: 700;
  font-size: 1.4rem;
}

div.home .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.1rem;
}

@media(max-width:560px) {
  div.home .form-row {
    grid-template-columns: 1fr;
  }
}

div.home .field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

div.home .field.full {
  grid-column: 1/-1;
}

div.home .field>label {
  font-family: var(--fm);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .4rem;
  font-weight: 500;
}

div.home .field input,
div.home .field select,
div.home .field textarea {
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .7rem .85rem;
  outline: none;
  transition: .2s;
  width: 100%;
}

div.home .field textarea {
  min-height: 120px;
  resize: vertical;
}

div.home .field input:focus,
div.home .field select:focus,
div.home .field textarea:focus {
  border-color: var(--fern);
  box-shadow: 0 0 0 3px rgba(86,107,44,.15);
}

div.home .field .req {
  color: var(--brass);
}

div.home .field .err {
  display: none;
  font-size: .78rem;
  color: #a23b2b;
  margin-top: .35rem;
}

div.home .field.invalid input,
div.home .field.invalid select,
div.home .field.invalid textarea {
  border-color: #c0492f;
  background: #fbf1ee;
}

div.home .field.invalid .err {
  display: block;
}

div.home .field .check {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-family: var(--fb);
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 0;
}

div.home .field .check input {
  width: auto;
  margin-top: .2rem;
  flex: none;
}

div.home .field .check a {
  text-decoration: underline;
}

div.home .form-note {
  font-size: .78rem;
  color: var(--muted);
  margin-top: .9rem;
}

div.home .note-box {
  display: flex;
  gap: .7rem;
  background: var(--bone-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .9rem 1rem;
  font-size: .86rem;
  color: var(--ink);
  line-height: 1.5;
}

div.home .note-box svg {
  width: 20px;
  height: 20px;
  color: var(--brass);
  flex: none;
  margin-top: .1rem;
}

div.home .form-success {
  display: none;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(2rem,4vw,3rem);
}

div.home .form-success.show {
  display: block;
  animation: rIn .5s var(--ease);
}

div.home .form-success .ok {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--fern);
  color: var(--cream);
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
}

div.home .form-success .ok svg {
  width: 30px;
  height: 30px;
}

div.home .contact-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

div.home .contact-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem;
}

div.home .contact-card h3 {
  font-size: 1.1rem;
  margin-bottom: .5rem;
}

div.home .contact-item {
  display: flex;
  gap: .6rem;
  align-items: center;
  font-size: .9rem;
  margin-top: .55rem;
  color: var(--ink);
}

div.home .contact-item svg {
  width: 18px;
  height: 18px;
  color: var(--brass);
  flex: none;
}

div.home .contact-item a:hover {
  color: var(--fern);
}

/* Kurs-/Workshop-Detail */

div.home .kd-grid {
  display: grid;
  grid-template-columns: 1.55fr .9fr;
  gap: clamp(1.6rem,3.5vw,3rem);
  align-items: start;
}

@media(max-width:900px) {
  div.home .kd-grid {
    grid-template-columns: 1fr;
  }
}

div.home .prose>p {
  color: var(--ink);
  margin-bottom: 1rem;
  font-size: 1rem;
}

div.home .prose h2 {
  font-size: clamp(1.45rem,2.6vw,2rem);
  margin: 2rem 0 .8rem;
}

div.home .prose h3 {
  font-size: 1.2rem;
  margin: 1.4rem 0 .5rem;
}

div.home .prose ul.ticks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 1rem 0;
}

div.home .prose ul.ticks li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .96rem;
}

div.home .prose ul.ticks li svg {
  width: 18px;
  height: 18px;
  color: var(--fern);
  flex: none;
  margin-top: .2rem;
}

div.home .facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.6rem;
  padding: 1.3rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 1.5rem 0;
}

div.home .fact {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

div.home .fact b {
  font-family: var(--fd);
  font-weight: 700;
  font-size: 1.25rem;
}

div.home .fact span {
  font-family: var(--fm);
  font-size: .56rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

div.home .pricebox {
  position: sticky;
  top: 88px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  box-shadow: var(--shadow);
}

div.home .pricebox .tag {
  color: var(--cream);
  background: var(--moss);
  border-color: transparent;
  margin-bottom: 1rem;
}

div.home .pricebox .price {
  font-family: var(--fd);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
}

div.home .pricebox .price small {
  display: block;
  font-family: var(--fm);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin-top: .4rem;
}

div.home .pricebox ul {
  list-style: none;
  margin: 1.2rem 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  font-size: .9rem;
}

div.home .pricebox ul li {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
}

div.home .pricebox ul li svg {
  width: 16px;
  height: 16px;
  color: var(--fern);
  flex: none;
  margin-top: .15rem;
}

div.home .pricebox .btn {
  width: 100%;
  justify-content: center;
  margin-bottom: .5rem;
}

div.home .pricebox .pb-note {
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
  margin-top: .4rem;
}

/* Vergleichstabelle (Kurse-Landing) */

div.home .compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}

div.home .compare {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  min-width: 560px;
}

div.home .compare th,
div.home .compare td {
  padding: .85rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

div.home .compare tr:last-child td,
div.home .compare tr:last-child th {
  border-bottom: 0;
}

div.home .compare thead th {
  font-family: var(--fm);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

div.home .compare tbody th {
  font-weight: 600;
  color: var(--ink);
}

div.home .compare td {
  color: var(--muted);
}

/* ============================================================
   NEUES DESIGN v04 — GLOBAL (alle Seiten)
   ============================================================ */

/* Headlines: Farro (Serif, via :root --fd), durchgängig bold */

div.home h1,
div.home h2,
div.home h3 {
  font-weight: 700;
  letter-spacing: -.015em;
}

div.home .it {
  font-weight: inherit;
  letter-spacing: inherit;
}

div.home .head h2,
div.home .split h2 {
  font-size: clamp(1.8rem,3vw,2.5rem);
}

/* Warmer, dezenter Grund-Verlauf */

div.home {
  background: linear-gradient(168deg,#ECEAD6 0%,var(--bone) 22%,var(--paper) 78%,#E7E4CD 100%);
}

/* Buttons: solide & dezent (keine Glasoptik), minimale Rundung */

div.home .btn {
  font-weight: 500;
  font-size: .85rem;
  padding: .82rem 1.5rem;
  border-radius: var(--pill);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

div.home .btn-moss {
  background: var(--moss);
  color: var(--cream);
  border-color: var(--moss);
  box-shadow: 0 10px 24px -16px rgba(20,28,8,.6);
}

div.home .btn-moss:hover {
  background: var(--fern);
  border-color: var(--fern);
  transform: translateY(-2px);
}

div.home .btn-brass {
  background: var(--brass);
  color: #fff;
  border-color: var(--brass);
  box-shadow: 0 10px 24px -16px rgba(120,86,20,.5);
}

div.home .btn-brass:hover {
  background: #946a26;
  border-color: #946a26;
  transform: translateY(-2px);
}

div.home .btn-dark {
  background: var(--forest-2);
  color: var(--cream);
  border-color: var(--forest-2);
  box-shadow: 0 10px 24px -18px rgba(0,0,0,.5);
}

div.home .btn-dark:hover {
  background: var(--forest);
  border-color: var(--forest);
  transform: translateY(-2px);
}

div.home .btn-ghost {
  background: rgba(245,240,228,.1);
  border-color: rgba(245,240,228,.5);
  color: var(--cream);
}

div.home .btn-ghost:hover {
  background: rgba(245,240,228,.95);
  color: var(--ink);
  border-color: transparent;
}

div.home .btn-line {
  background: transparent;
  border-color: rgba(30,33,19,.4);
  color: var(--ink);
  font-weight: 500;
}

div.home .btn-line:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

div.home .btn-light {
  background: #FBF8EE;
  color: var(--ink);
  border-color: #FBF8EE;
}

div.home .btn-light:hover {
  background: #fff;
  transform: translateY(-2px);
}

/* Termine-Filter: definierte Felder, klar (minimale Rundung) */

div.home .tfilter {
  gap: .5rem;
  padding: .6rem;
  border-radius: var(--r-lg);
  align-items: stretch;
  background: rgba(245,241,230,.05);
  border: 1px solid rgba(245,241,230,.16);
}

div.home .tfilter .tf {
  background: rgba(245,241,230,.05);
  border: 1px solid rgba(245,241,230,.14);
  border-radius: var(--r);
  padding: .55rem 1rem;
  transition: .25s var(--ease);
}

div.home .tfilter .tf:hover {
  border-color: rgba(200,164,88,.45);
  background: rgba(245,241,230,.09);
}

div.home .tfilter .tf label {
  color: var(--brass-2);
}

div.home .tf .sel::after {
  border-color: var(--brass-2);
}

div.home .rt-reset {
  border-radius: var(--pill);
  align-self: center;
}

/* ============================================================
   NUR STARTSEITE (.home)
   ============================================================ */

/* warme Section-Verläufe */

div.home .tint {
  background: linear-gradient(180deg,#E4E2C9,var(--bone-2) 55%,#DAD8BD);
}

div.home #teaser {
  background: radial-gradient(90% 70% at 88% -10%,rgba(200,164,88,.07),transparent 55%);
}

div.home #kurse {
  background: radial-gradient(80% 60% at 0% 0%,rgba(86,107,44,.06),transparent 55%);
}

/* HERO: Inhalt mittig zentriert, kein Scroll-Cue */

div.home .hero {
  align-items: center;
  text-align: center;
}

div.home .hero-in {
  padding-bottom: 0;
}

div.home .hero h1 {
  margin-left: auto;
  margin-right: auto;
  font-weight: 700;
  font-size: clamp(2.4rem,5.4vw,4.6rem);
  line-height: 1.05;
  max-width: 30ch;
}

div.home .hero p {
  margin-left: auto;
  margin-right: auto;
  max-width: 58ch;
}

div.home .hero .veil {
  background: radial-gradient(125% 95% at 50% 46%,rgba(18,14,8,.42),rgba(18,14,8,.74) 92%), linear-gradient(to top,rgba(18,14,8,.55),transparent 40%);
}

/* Glas-Chip für die Eyebrow im Hero */

div.home .hero .eyebrow {
  background: rgba(245,240,228,.1);
  border: 1px solid rgba(245,240,228,.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: .5rem 1.05rem;
  border-radius: var(--pill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

/* — Hero-Finder: schlanke Leiste, minimale Rundung, klarer Button — */

div.home .finder {
  display: flex;
  align-items: stretch;
  gap: .3rem;
  max-width: 620px;
  margin: 2rem auto 0;
  border-radius: var(--r-lg);
  padding: .45rem;
  background: rgba(248,245,236,.86);
  border: 1px solid rgba(255,255,255,.6);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 24px 60px -32px rgba(10,8,4,.8),inset 0 1px 0 rgba(255,255,255,.7);
}

div.home .finder .ff {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
  padding: .4rem .9rem;
  position: relative;
  text-align: left;
}

div.home .finder .ff label {
  font-family: var(--fm);
  font-size: .52rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0;
}

div.home .finder .ff select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  padding-right: 1.1rem;
}

div.home .finder .ff::after {
  content: "";
  position: absolute;
  right: .5rem;
  top: 56%;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

div.home .finder .sep {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  flex: none;
  margin: .35rem 0;
}

div.home .finder .find {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: var(--r);
  padding: .85rem 1.4rem;
  font-weight: 600;
  font-size: .86rem;
  background: linear-gradient(180deg,var(--moss),var(--forest-2));
  color: var(--cream);
  border: 0;
  cursor: pointer;
  transition: .25s var(--ease);
  box-shadow: 0 8px 20px -12px rgba(20,28,8,.7);
}

div.home .finder .find svg {
  width: 16px;
  height: 16px;
}

div.home .finder .find:hover {
  background: linear-gradient(180deg,var(--fern),var(--moss));
  transform: translateY(-1px);
}

@media(max-width:600px) {
  div.home .finder {
    flex-wrap: wrap;
  }

  div.home .finder .sep {
    display: none;
  }

  div.home .finder .ff {
    flex: 1 1 100%;
  }

  div.home .finder .find {
    width: 100%;
    justify-content: center;
  }
}

/* — Hero-Microcontent: kleine Kennzahlen — */

div.home .hero-in .wrap {
  text-align: center;
}

div.home .hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.6rem,4.5vw,3.2rem);
  margin-top: 2.2rem;
}

div.home .hero-stats>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  position: relative;
}

div.home .hero-stats>div+div::before {
  content: "";
  position: absolute;
  left: calc(-1*clamp(.8rem,2.25vw,1.6rem));
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: rgba(241,234,217,.22);
}

div.home .hero-stats b {
  font-family: var(--fd);
  font-weight: 400;
  font-size: clamp(1.9rem,3.2vw,2.6rem);
  line-height: 1;
  color: var(--cream);
  letter-spacing: -.01em;
}

div.home .hero-stats span {
  font-family: var(--fm);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(241,234,217,.78);
}

@media(max-width:720px) {
  div.home .hero-stats {
    flex-wrap: nowrap;
    gap: .5rem;
    margin-top: 1.4rem;
    width: 100%;
    justify-content: space-between;
  }

  div.home .hero-stats>div {
    flex: 1;
    gap: .15rem;
    min-width: 0;
  }

  div.home .hero-stats>div+div::before {
    display: none;
  }

  div.home .hero-stats b {
    font-size: 1.15rem;
  }

  div.home .hero-stats span {
    font-size: .5rem;
    letter-spacing: .1em;
    line-height: 1.2;
    text-align: center;
  }
}

/* — Erste Section: Glas-Karte über dem Bild (Card-in-Card) — */

div.home .split-fig .stamp {
  display: none;
}

div.home .fig-glass {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  width: max-content;
  max-width: calc(100% - 2.2rem);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.6rem;
  border-radius: var(--r-lg);
  color: var(--cream);
  background: rgba(24,30,14,.46);
  border: 1px solid rgba(245,240,228,.28);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18),0 20px 44px -26px rgba(0,0,0,.75);
}

div.home .fig-glass .fg-row {
  display: flex;
  align-items: baseline;
  gap: .55rem;
}

div.home .fig-glass b {
  font-family: var(--fd);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1;
}

div.home .fig-glass span {
  font-family: var(--fm);
  font-size: .54rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-2);
  line-height: 1.3;
}

div.home .fig-glass .fg-line {
  width: 1px;
  align-self: stretch;
  background: rgba(245,240,228,.22);
}

div.home .ipoints svg {
  background: rgba(168,124,50,.12);
  border-radius: var(--r);
  padding: 3px;
  width: 23px;
  height: 23px;
}

/* — "So läuft's" CTAs — */

div.home .ablauf-cta {
  display: flex;
  justify-content: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: 2.6rem;
}

/* — Jagdkurse als Akkordeon (gleiche Funktion wie „Eindrücke") — */

div.home .kurse.acc {
  display: flex;
  grid-template-columns: none;
  gap: .6rem;
  height: clamp(440px,50vw,560px);
}

div.home .kurse.acc .kc {
  flex: 1;
  min-width: 72px;
  min-height: 0;
  align-items: flex-end;
  transition: flex .6s var(--ease);
}

div.home .kurse.acc .kc.active {
  flex: 3.4;
}

div.home .kurse.acc .kc::after {
  background: linear-gradient(to top,rgba(18,14,8,.92),rgba(18,14,8,.06) 72%);
}

div.home .kurse.acc .kc .tag {
  opacity: 0;
  transition: .3s var(--ease);
}

div.home .kurse.acc .kc.active .tag {
  opacity: 1;
}

div.home .kurse.acc .kc .kc-vtitle {
  position: absolute;
  left: 1.15rem;
  bottom: 1.3rem;
  z-index: 3;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--fd);
  font-weight: 500;
  font-size: 1.15rem;
  color: #fff;
  white-space: nowrap;
  transition: .3s var(--ease);
}

div.home .kurse.acc .kc.active .kc-vtitle {
  opacity: 0;
}

div.home .kurse.acc .kc .c {
  width: clamp(260px,34vw,440px);
  flex: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s var(--ease),transform .45s var(--ease);
  pointer-events: none;
}

div.home .kurse.acc .kc.active .c {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

div.home .kurse.acc .kc .kc-desc {
  color: rgba(241,234,217,.88);
  font-size: .94rem;
  line-height: 1.5;
  margin: .5rem 0 .85rem;
  max-width: 40ch;
}

div.home .kurse.acc .kc .pr {
  display: block;
  margin-bottom: 1rem;
}

div.home .kurse.acc .kc-cta {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

@media(max-width:860px) {
  div.home .kurse.acc {
    flex-direction: column;
    height: auto;
  }

  div.home .kurse.acc .kc {
    min-height: 300px;
    flex: 1 1 auto;
  }

  div.home .kurse.acc .kc .c {
    width: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: linear-gradient(to top,rgba(18,14,8,.95),rgba(18,14,8,.7) 75%,transparent);
    padding: 2.6rem 1.4rem 1.5rem;
  }

  div.home .kurse.acc .kc .kc-vtitle {
    display: none;
  }

  div.home .kurse.acc .kc .tag {
    opacity: 1;
  }
}

/* ============================================================
   v01-PARITÄT (global, neues Design) — Topbar · Footer-Socials
   Cookie-Consent · Magazin. Ohne Bezahl-/Shop-Elemente.
   ============================================================ */

/* Topbar (über dem fixierten Header; rutscht beim Scrollen weg) */

div.home .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  height: calc(var(--topbar-h) + var(--safe-top));
  padding-top: var(--safe-top);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--forest);
  overflow: hidden;
  transition: transform .35s var(--ease);
}

div.home .topbar .tb-msg {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--safe-top);
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1rem;
  font-family: var(--fm);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-2);
  opacity: 0;
  transition: opacity .5s var(--ease);
}

div.home .topbar .tb-msg.on {
  opacity: 1;
}

html.tb-hidden div.home .topbar {
  transform: translateY(-100%);
}

div.home header {
  top: calc(var(--topbar-h) + var(--safe-top));
}

html.tb-hidden div.home header {
  top: 0;
  padding-top: var(--safe-top);
}

@media(max-width:600px) {
  div.home .topbar .tb-msg {
    font-size: .54rem;
    letter-spacing: .12em;
  }
}

/* Footer-Socials */

div.home .foot .socials {
  display: flex;
  gap: .55rem;
  margin-top: 1.1rem;
}

div.home .foot .socials a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-d);
  border-radius: var(--r);
  display: grid;
  place-items: center;
  color: var(--cream-2);
  transition: .2s var(--ease);
}

div.home .foot .socials a:hover {
  color: #fff;
  border-color: var(--brass-2);
  background: rgba(241,234,217,.06);
}

div.home .foot .socials svg {
  width: 17px;
  height: 17px;
}

/* Cookie-Consent */

div.home .cookie-consent {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 300;
  max-width: 560px;
  background: var(--bark);
  color: var(--cream);
  border: 1px solid var(--line-d);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  animation: ccPop .45s var(--ease) both;
}

@keyframes ccPop {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

div.home .cc-inner {
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

div.home .cc-title {
  font-family: var(--fd);
  font-weight: 500;
  font-size: 1.1rem;
  margin-bottom: .25rem;
}

div.home .cc-text p {
  font-size: .86rem;
  color: var(--cream-2);
  line-height: 1.55;
}

div.home .cc-text a {
  color: var(--brass-2);
  text-decoration: underline;
}

div.home .cc-actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

div.home .cc-actions .btn {
  flex: 1;
  justify-content: center;
  min-width: 150px;
}

div.home .btn-outline {
  background: transparent;
  border-color: rgba(245,240,228,.4);
  color: var(--cream);
}

div.home .btn-outline:hover {
  background: rgba(245,240,228,.12);
}

div.home .btn-primary {
  background: var(--brass);
  color: #fff;
  border-color: var(--brass);
}

div.home .btn-primary:hover {
  background: #946a26;
  border-color: #946a26;
  transform: translateY(-2px);
}

div.home .cookie-settings-btn {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 299;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--cream);
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow);
}

div.home .cookie-settings-btn svg {
  width: 20px;
  height: 20px;
}

/* Magazin: Featured · Filter · Grid · Cards */

div.home .featured-article {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  margin-bottom: 2.4rem;
  transition: .3s var(--ease);
  box-shadow: var(--shadow);
}

div.home .featured-article:hover {
  transform: translateY(-3px);
}

div.home .fa-media {
  position: relative;
  min-height: 300px;
}

div.home .fa-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

div.home .fa-flag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  font-family: var(--fm);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--brass);
  color: #fff;
  padding: .35rem .75rem;
  border-radius: var(--pill);
}

div.home .fa-body {
  padding: clamp(1.5rem,3vw,2.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

div.home .fa-body h2 {
  font-size: clamp(1.5rem,2.6vw,2.1rem);
  margin: .6rem 0 .7rem;
}

div.home .fa-body p {
  color: var(--muted);
  font-size: .98rem;
}

@media(max-width:760px) {
  div.home .featured-article {
    grid-template-columns: 1fr;
  }

  div.home .fa-media {
    min-height: 220px;
  }
}

div.home .cat-tag {
  display: inline-block;
  width: max-content;
  font-family: var(--fm);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .32rem .7rem;
  border-radius: var(--pill);
  background: var(--bone-2);
  color: var(--moss);
}

div.home .cat-tag.c-praxis {
  background: rgba(86,107,44,.16);
  color: var(--fern);
}

div.home .cat-tag.c-akademie {
  background: rgba(168,124,50,.16);
  color: var(--brass);
}

div.home .cat-tag.c-wild {
  background: rgba(56,73,29,.16);
  color: var(--moss);
}

div.home .cat-tag.c-recht {
  background: rgba(30,33,19,.1);
  color: var(--ink);
}

div.home .cat-tag.c-ausruestung {
  background: rgba(200,164,88,.18);
  color: #90692a;
}

div.home .ac-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  font-family: var(--fm);
  font-size: .6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

div.home .ac-meta span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

div.home .ac-meta svg {
  width: 14px;
  height: 14px;
  color: var(--brass);
}

div.home .filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}

div.home .chips {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

div.home .chip {
  font-family: var(--fm);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .5rem .95rem;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: .2s var(--ease);
}

div.home .chip:hover {
  border-color: var(--brass);
  color: var(--ink);
}

div.home .chip.active {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
}

div.home .mag-search {
  position: relative;
  display: flex;
  align-items: center;
}

div.home .mag-search svg {
  position: absolute;
  left: .8rem;
  width: 16px;
  height: 16px;
  color: var(--muted);
}

div.home .mag-search input {
  font: inherit;
  font-size: .9rem;
  padding: .65rem .9rem .65rem 2.3rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  color: var(--ink);
  outline: none;
  min-width: 230px;
  transition: .2s;
}

div.home .mag-search input:focus {
  border-color: var(--fern);
  box-shadow: 0 0 0 3px rgba(86,107,44,.15);
}

div.home .mag-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1rem;
}

@media(max-width:1240px) {
  div.home .mag-grid {
    grid-template-columns: repeat(3,1fr);
  }
}

@media(max-width:900px) {
  div.home .mag-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media(max-width:600px) {
  div.home .mag-grid {
    grid-template-columns: 1fr;
  }
}

div.home .article-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  transition: .3s var(--ease);
}

div.home .article-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

div.home .ac-media {
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
}

div.home .ac-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .6s var(--ease);
}

div.home .article-card:hover .ac-media img {
  transform: scale(1.05);
}

div.home .ac-body {
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}

div.home .ac-body h3 {
  font-size: 1.2rem;
  line-height: 1.25;
}

div.home .ac-body p {
  color: var(--muted);
  font-size: .9rem;
  flex: 1;
}

div.home .ac-link {
  margin-top: .4rem;
}

div.home .mag-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}

div.home .mag-empty svg {
  width: 36px;
  height: 36px;
  margin: 0 auto 1rem;
  color: var(--brass);
  display: block;
}

/* CTA-Band (Newsletter / Schlussaufruf) */

div.home .cta-band {
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--r-lg);
  text-align: center;
  padding: clamp(2.4rem,5vw,4rem) 1.5rem;
}

div.home .cta-band .eyebrow {
  color: var(--brass-2);
}

div.home .cta-band h2 {
  color: #fff;
  font-size: clamp(1.7rem,3.2vw,2.6rem);
  margin-top: .6rem;
}

div.home .cta-band p {
  color: var(--cream-2);
  max-width: 46ch;
  margin: .8rem auto 1.6rem;
}

div.home .cta-band .hero-cta {
  justify-content: center;
}

/* Back-to-top (unten rechts) */

div.home .to-top {
  right: 1.4rem;
  bottom: 5.6rem;
}

/* Über-uns: Eindrücke-Galerie (Auto-Marquee, echte Aufnahmen) */

div.home .es-slider {
  overflow: hidden;
  position: relative;
  margin-top: 2.4rem;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}

div.home .es-track {
  display: flex;
  width: max-content;
  animation: esScroll 55s linear infinite;
}

div.home .es-slider:hover .es-track {
  animation-play-state: paused;
}

div.home .es-item {
  flex: none;
  width: clamp(240px,28vw,360px);
  margin: 0 1rem 0 0;
}

div.home .es-item img {
  width: 100%;
  height: clamp(180px,22vw,260px);
  object-fit: cover;
  border-radius: var(--r-lg);
  display: block;
}

@keyframes esScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media(prefers-reduced-motion:reduce) {
  div.home .es-track {
    animation: none;
  }
}

/* Prose: Listen, Links, Lauftext (Magazin-Beiträge + Rechtliches) */

div.home .prose {
  max-width: 760px;
}

div.home .prose ul:not(.ticks),
div.home .prose ol {
  margin: 1rem 0 1.3rem;
  padding-left: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

div.home .prose ul:not(.ticks) li,
div.home .prose ol li {
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.65;
}

div.home .prose ul:not(.ticks) li::marker {
  color: var(--brass);
}

div.home .prose a {
  color: var(--fern);
  text-decoration: underline;
  text-underline-offset: 2px;
}

div.home .prose a:hover {
  color: var(--moss);
}

div.home .prose strong,
div.home .prose b {
  font-weight: 600;
  color: var(--ink);
}

div.home .prose h2:first-child,
div.home .prose h3:first-child {
  margin-top: 0;
}

/* Kurz-Highlight unter den Kursen (z. B. Ferien-/Jugendkurs) */

div.home .kurs-flash {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem 1.4rem;
  flex-wrap: wrap;
  box-sizing: border-box;
  /* so breit wie die aktive Präsenzkurs-Kachel darüber (flex 3.4 von 5.4, gap .6rem) */
  width: calc((100% - 1.2rem) * 3.4 / 5.4);
  margin: 1.8rem 0 0;
  padding: 1.1rem 1.45rem;
  border: 1px solid rgba(208,122,29,.34);
  border-radius: var(--r);
  background: linear-gradient(120deg,rgba(208,122,29,.10),rgba(208,122,29,.02));
}

@media(max-width:860px) {
  div.home .kurs-flash {
    width: auto;
  }
}

div.home .kurs-flash .kf-cta {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

div.home .kurs-flash .kf-badge {
  font-family: var(--fm);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  background: var(--brass);
  padding: .26rem .56rem;
  border-radius: var(--pill);
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  margin-left: .55rem;
  position: relative;
  top: -.08em;
}

div.home .kurs-flash .kf-info {
  display: flex;
  flex-direction: column;
  gap: .28rem;
  margin-right: auto;
}

div.home .kurs-flash .kf-title {
  font-family: var(--fd);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: -.01em;
  padding-right: 5.5rem;
}

div.home .kurs-flash .kf-text {
  font-size: .92rem;
  color: var(--ink);
  max-width: 54ch;
}

div.home .kurs-flash .kf-meta {
  font-size: .85rem;
  color: var(--muted);
}

div.home .kurs-flash .kf-price {
  position: absolute;
  top: 1.1rem;
  right: 1.45rem;
  font-family: var(--fd);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--brass);
  white-space: nowrap;
}

@media(max-width:560px) {
  div.home .kurs-flash .kf-info {
    margin-right: 0;
  }

  div.home .kurs-flash .kf-price {
    margin-right: auto;
  }

  div.home .kurs-flash .kf-cta {
    width: 100%;
  }
}

/* ============================================================
   SCROLL JOURNEY (POV-Walk auf Startseite, .home only)
   ============================================================ */

div.home .sj {
  position: relative;
  height: 1100vh;
  background: var(--forest);
}

div.home .sj-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

div.home .sj-portal {
  position: absolute;
  inset: 0;
}

div.home .sj-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

div.home .sj-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,rgba(18,14,8,.72),rgba(18,14,8,.22) 55%,rgba(18,14,8,0)),radial-gradient(ellipse at center,rgba(18,14,8,.28) 0%,transparent 65%);
  pointer-events: none;
}

div.home .sj-progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: rgba(247,242,229,.15);
  z-index: 5;
}

div.home .sj-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg,var(--brass),var(--brass-2));
  transition: width .1s linear;
}

/* ===== SJ STEP — no card, floating cinema type ===== */

/* ===== SJ TRAIL — gerader Pirschweg mit 6 Stationen, Info-Panel mittig ===== */

div.home .sj-steps {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* Stationen-Reihe: gerader Weg am unteren Rand */

div.home .sj-wheel {
  position: absolute;
  left: 50%;
  bottom: clamp(3.2rem,9vh,6.5rem);
  transform: translateX(-50%);
  width: min(88vw,880px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Weg-Linie (Basis) — hinter den Zahlen-Kreisen */

div.home .sj-wheel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: rgba(247,242,229,.16);
  border-radius: 2px;
  z-index: 0;
}

/* Weg-Linie (zurückgelegter Fortschritt) — hinter den Zahlen-Kreisen */

div.home .sj-wheel::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  width: clamp(0%,var(--sj-progress,0%),100%);
  background: linear-gradient(90deg,var(--brass),var(--brass-2));
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(184,148,82,.5);
  transition: width .2s linear;
  z-index: 0;
}

div.home .sj-step {
  position: relative;
  width: 72px;
  height: 72px;
  z-index: 1;
}

div.home .sj-pt {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(184,148,82,.4);
  background: rgba(18,14,8,.42);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  font-family: var(--fd);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -.02em;
  color: rgba(247,242,229,.82);
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
  transition: background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease),color .5s var(--ease),transform .55s var(--ease);
}

div.home .sj-step.active .sj-pt {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--cream);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  transform: scale(1.18);
  box-shadow: 0 0 0 6px rgba(184,148,82,.12),0 0 50px rgba(184,148,82,.55),0 0 18px rgba(184,148,82,.85);
}

/* Connector pulse ring around active dot */

div.home .sj-pt::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(184,148,82,.55);
  opacity: 0;
  transform: scale(.9);
  pointer-events: none;
}

div.home .sj-step.active .sj-pt::after {
  animation: sjPulseRing 2.2s var(--ease) infinite;
}

/* CENTER Info-Panel — mittig im Bereich oberhalb des Weges */

div.home .sj-info-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: clamp(7rem,17vh,11rem);
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}

div.home .sj-info {
  grid-area: 1/1;
  width: clamp(290px,34vw,460px);
  padding: 2.2rem 2.4rem 2rem;
  text-align: center;
  background: rgba(18,14,8,.38);
  backdrop-filter: blur(24px) saturate(1.25);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  border: 1px solid rgba(247,242,229,.1);
  border-radius: 6px;
  box-shadow: 0 30px 80px -22px rgba(0,0,0,.65), 0 8px 24px -8px rgba(0,0,0,.45), inset 0 1px 0 rgba(247,242,229,.1);
  opacity: 0;
  transform: translateY(18px) scale(.96);
  transition: opacity .55s var(--ease),transform .6s var(--ease);
  pointer-events: none;
}

div.home .sj-info.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

div.home .sj-info .lab {
  display: inline-block;
  font-family: var(--fm);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brass);
  margin: 0 0 1rem 0;
}

div.home .sj-info h3 {
  font-family: var(--fd);
  font-size: clamp(1.7rem,2.8vw,2.5rem);
  font-weight: 700;
  color: var(--cream);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: 0;
}

div.home .sj-info h3 .it {
  font-style: normal;
  color: inherit;
}

div.home .sj-info p {
  margin: 1.2rem auto 0;
  max-width: 34ch;
  font-size: clamp(.95rem,1.05vw,1.08rem);
  line-height: 1.6;
  color: rgba(247,242,229,.92);
}

@keyframes sjPulseRing {
  0% {
    opacity: .7;
    transform: scale(.9);
  }

  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

div.home .sj-hint {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--fm);
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(247,242,229,.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  transition: opacity .4s var(--ease);
}

div.home .sj-hint i {
  width: 1px;
  height: 30px;
  background: linear-gradient(rgba(247,242,229,.5),transparent);
  animation: sjPulse 1.6s ease-in-out infinite;
}

div.home .sj.scrolled .sj-hint {
  opacity: 0;
}

@keyframes sjPulse {
  0%,
  100% {
    opacity: .25;
    transform: scaleY(.6);
  }

  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@media(max-width:820px) {
  div.home .sj {
    height: 820vh;
  }

  div.home .sj-wheel {
    width: min(92vw,640px);
  }

  div.home .sj-step {
    width: 56px;
    height: 56px;
  }

  div.home .sj-pt {
    font-size: 1.05rem;
  }

  div.home .sj-info {
    width: clamp(220px,68vw,360px);
  }

  div.home .sj-info h3 {
    font-size: clamp(1.5rem,5.4vw,1.95rem);
  }
}

/* Mobil (≤700px): kompakter Weg unten; Video-Scrub bleibt; Panel mittig, kollisionsfrei */

@media(max-width:700px) {
  div.home .sj {
    height: 600vh;
  }

  div.home .sj-wheel {
    bottom: calc(2.6rem + var(--safe-bot));
    width: calc(100% - 2rem);
  }

  div.home .sj-step {
    width: 40px;
    height: 40px;
  }

  div.home .sj-pt {
    font-size: .82rem;
  }

  div.home .sj-step.active .sj-pt {
    transform: scale(1.12);
    box-shadow: 0 0 0 4px rgba(184,148,82,.16),0 0 22px rgba(184,148,82,.6);
  }

  div.home .sj-pt::after {
    display: none;
  }

  div.home .sj-info-wrap {
    bottom: 6.5rem;
  }

  div.home .sj-info {
    width: calc(100% - 2.6rem);
    max-width: 430px;
    padding: 1.7rem 1.5rem 1.6rem;
  }

  div.home .sj-info h3 {
    font-size: clamp(1.5rem,6vw,2rem);
  }

  div.home .sj-info p {
    max-width: 38ch;
  }
}

/* ============================================================
   WhatsApp Floating-Toggle + Lightbox (global)
   ============================================================ */

div.home .wa-fab {
  position: fixed;
  right: 1.2rem;
  bottom: 5rem;
  z-index: 70;
}

div.home .wa-fab-btn {
  appearance: none;
  border: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--cream);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .2s var(--ease),background .2s;
}

div.home .wa-fab-btn:hover {
  transform: scale(1.06);
  background: var(--forest-2);
}

div.home .wa-fab-btn:active {
  transform: scale(.96);
}

div.home .wa-fab-btn svg {
  width: 20px;
  height: 20px;
}

div.home .wa-fab-pop {
  position: absolute;
  right: 0;
  bottom: 74px;
  width: 300px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.3rem 1.4rem 1.4rem;
  box-shadow: 0 28px 60px -20px rgba(0,0,0,.45),0 10px 30px -10px rgba(0,0,0,.25);
  opacity: 0;
  transform: translateY(12px) scale(.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .3s var(--ease),transform .35s var(--ease);
}

div.home .wa-fab.open .wa-fab-pop {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

div.home .wa-fab-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .8rem;
  margin-bottom: .6rem;
}

div.home .wa-fab-head h3 {
  font-family: var(--fd);
  font-size: 1.05rem;
  color: var(--forest);
  letter-spacing: -.01em;
}

div.home .wa-fab-close {
  appearance: none;
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
}

div.home .wa-fab-close:hover {
  background: var(--bone-2);
  color: var(--ink);
}

div.home .wa-fab-pop p {
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

div.home .wa-fab-pop .actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

div.home .wa-fab-pop .actions a {
  width: 100%;
  justify-content: center;
}

div.home .wa-fab-pop .wa-link {
  background: #25D366;
  color: #fff;
  border: 0;
  padding: .7rem 1rem;
  border-radius: var(--pill);
  font-family: var(--fb);
  font-size: .85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  justify-content: center;
  transition: .2s;
}

div.home .wa-fab-pop .wa-link:hover {
  background: #1ebd5b;
  transform: translateY(-1px);
}

div.home .wa-fab-pop .wa-link svg {
  width: 18px;
  height: 18px;
}

@media(max-width:600px) {
  div.home .wa-fab {
    right: 1rem;
    bottom: 1rem;
  }

  div.home .wa-fab-pop {
    width: calc(100vw - 2rem);
    right: 0;
  }
}

/* Hero Scroll-Hint (dezent unten Mitte) */

div.home .hero-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  font-family: var(--fm);
  font-size: .6rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(247,242,229,.78);
  text-decoration: none;
  transition: color .25s,opacity .25s;
  cursor: pointer;
}

div.home .hero-scroll-hint:hover {
  color: var(--brass-2);
}

div.home .hero-scroll-hint i {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(247,242,229,.4);
  align-items: center;
  justify-content: center;
  animation: heroScrollPulse 2.2s ease-in-out infinite;
}

div.home .hero-scroll-hint i svg {
  width: 12px;
  height: 12px;
}

@keyframes heroScrollPulse {
  0%,
  100% {
    transform: translateY(0);
    opacity: .65;
  }

  50% {
    transform: translateY(5px);
    opacity: 1;
  }
}

@media(max-width:720px) {
  div.home .hero-scroll-hint {
    bottom: 1.2rem;
    font-size: .55rem;
  }
}

/* ============================================================
   iOS Safe-Area (Notch / Dynamic Island) + Mobil-Ausrichtung
   ============================================================ */

/* Grüner Streifen hinter Statusleiste/Notch — deckt Content ab, Farbe wie Topbar */

/* (grüner Notch-Streifen entfernt — Topbar bzw. Nav füllen den Notch jetzt selbst) */

@media(max-width:700px) {
  /* Logo/Burger bündig mit den Floating-Toggles (alle 1.4rem vom Rand) + Notch-Seiten im Querformat */

  div.home header .wrap {
    padding-left: max(1.4rem,var(--safe-l));
    padding-right: max(1.4rem,var(--safe-r));
  }

  div.home .cookie-settings-btn {
    left: max(1.4rem,var(--safe-l));
    bottom: calc(1.1rem + var(--safe-bot));
  }

  div.home .wa-fab {
    right: max(1.2rem,var(--safe-r));
    bottom: calc(5rem + var(--safe-bot));
  }

  div.home .to-top {
    right: max(1.4rem,var(--safe-r));
    bottom: calc(4.9rem + var(--safe-bot));
  }
}

#toTop{
  display: none;
}