/* ==========================================================================
   Schriften – lokal ausgeliefert, kein Google-CDN.
   font-display:swap zeigt sofort die Ersatzschrift und tauscht nach dem Laden.
   ========================================================================== */
@font-face{
  font-family:"Oswald";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/oswald-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Oswald";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/oswald-latin-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Oswald";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/oswald-latin-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/oswald-latin-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Barlow";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/barlow-latin-300.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/barlow-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/barlow-latin-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/barlow-latin-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/barlow-latin-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   CGS – Corporate Identity
   Typografie : Oswald (Display, uppercase, tight) / Barlow (Fließtext)
   Formsprache: durchgehend eckig – radius 0, harte Kanten, Hairlines
   Farbwelt   : Schwarz/Grau-Abstufungen + Signalrot, Amber als Sekundärakzent
   ========================================================================== */
:root{
  /* Akzente */
  --cgs-forest:#b22222;
  --cgs-forest-dark:#8f1b1b;
  --cgs-forest-darker:#6f1515;
  --cgs-forest-soft:#f3d7d7;
  --cgs-amber:#c48a2f;
  --cgs-cream:#f3f3f3;
  --cgs-charcoal:#1e2126;
  --cgs-background:#f3f3f3;

  /* Dunkle Bühne */
  --ink-900:#08090b;
  --ink-800:#0d0f12;
  --ink-700:#14171c;
  --ink-600:#1e2126;
  --ink-500:#2a2e35;
  --ink-400:#3a3f48;
  --text:#e7e8ea;
  --text-muted:#a2a7b0;
  --text-dim:#767c86;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.18);

  --grad:linear-gradient(135deg, var(--cgs-forest), var(--cgs-forest-dark));
  --grad-soft:linear-gradient(135deg, rgba(178,34,34,.18), rgba(143,27,27,.06));

  --ff-display:"Oswald","Arial Narrow",Impact,sans-serif;
  --ff-body:"Barlow","Helvetica Neue",Arial,sans-serif;

  --wrap:1240px;
  --gut:clamp(20px,5vw,48px);
  --sec-y:clamp(72px,10vw,140px);
  --nav-h:78px;
  --ease:cubic-bezier(.22,.8,.28,1);

  /* Wortmarken-Lockup: Zeilenhöhen als Tokens, damit sich die Gesamthöhe exakt
     errechnen lässt (.brand-txt arbeitet mit line-height:1). Wird im Header und
     im Footer verwendet, dort mit größeren Werten. */
  --bt-1:.8rem;   /* „Carinthian"  */
  --bt-2:1.12rem; /* „Gun Society" */
  --bt-3:.58rem;  /* „est. 2023"   */
  --bt-gap-1:3px; --bt-gap-2:5px;
  --brand-txt-h:calc(var(--bt-1) + var(--bt-gap-1) + var(--bt-2) + var(--bt-gap-2) + var(--bt-3));
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink-900);color:var(--text);
  font-family:var(--ff-body);font-size:clamp(16px,1.05vw,17.5px);line-height:1.7;
  font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;border-radius:0}

/* Alles eckig */
*{border-radius:0}

h1,h2,h3,h4,.display{
  font-family:var(--ff-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.01em;line-height:1.02;margin:0;
}
h2{font-size:clamp(2.1rem,5.2vw,4rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.5rem);letter-spacing:.03em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec-y);position:relative}

/* Sektions-Kicker */
.kicker{
  font-family:var(--ff-display);font-weight:600;text-transform:uppercase;
  font-size:.82rem;letter-spacing:.32em;color:var(--cgs-forest);
  display:flex;align-items:center;gap:14px;margin-bottom:18px;
}
.kicker::before{content:"";width:34px;height:2px;background:var(--grad);flex:none}
.sec-head{max-width:760px;margin-bottom:clamp(40px,5vw,68px)}
.sec-head p{color:var(--text-muted);margin-top:20px;font-size:1.06rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--ff-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.9rem;padding:17px 32px;border:0;cursor:pointer;
  position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease);
  /* Die geraden Kanten liegen bewusst 1 px AUSSERHALB des Elements.
     Läge der Beschnitt exakt auf 100 %, fiele er bei gebrochenen
     Elementbreiten (Subpixel-Layout) mit dem 1 px starken Rahmen von
     .btn--ghost zusammen und würde ihn wegschneiden – rechts und unten
     verschwand er dann je nach Fensterbreite. Beschnitten wird nur noch
     die Diagonale in der unteren rechten Ecke. */
  clip-path:polygon(
    0 0,
    calc(100% + 1px) 0,
    calc(100% + 1px) calc(100% - 10px),
    calc(100% - 10px) calc(100% + 1px),
    0 calc(100% + 1px)
  );
}
.btn span{position:relative;z-index:2}
.btn--primary{background:var(--grad);color:#fff;box-shadow:0 0 0 0 rgba(178,34,34,.5)}
.btn--primary::after{
  content:"";position:absolute;inset:0;background:var(--cgs-forest-darker);
  transform:translateY(101%);transition:transform .32s var(--ease);z-index:1;
}
.btn--primary:hover::after{transform:translateY(0)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(178,34,34,.75)}
.btn--ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn--ghost::after{content:"";position:absolute;inset:0;background:#fff;transform:translateY(101%);transition:transform .32s var(--ease);z-index:1}
.btn--ghost:hover{color:var(--ink-900)}
.btn--ghost:hover::after{transform:translateY(0)}
.btn--lg{padding:20px 40px;font-size:1rem}
.btn:focus-visible{outline:2px solid var(--cgs-amber);outline-offset:3px}

/* ---------- Aufnahme-Badge ---------- */
.status{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-display);font-weight:500;text-transform:uppercase;
  font-size:.72rem;letter-spacing:.16em;white-space:nowrap;
  padding:7px 14px 7px 12px;border:1px solid currentColor;line-height:1;
}
.status .dot{width:8px;height:8px;flex:none;background:currentColor;position:relative}
.status .dot::after{
  content:"";position:absolute;inset:-4px;border:1px solid currentColor;opacity:0;
  animation:ping 2.2s var(--ease) infinite;
}
@keyframes ping{0%{transform:scale(.6);opacity:.9}70%,100%{transform:scale(1.6);opacity:0}}
.status--open{color:#3fbf6a;background:rgba(63,191,106,.09)}
.status--limited{color:var(--cgs-amber);background:rgba(196,138,47,.1)}
.status--closed{color:var(--cgs-forest);background:rgba(178,34,34,.12)}

/* ---------- Header ---------- */
.site-header{
  /* Ungescrollt wächst die Kopfzeile mit dem Logo mit und gibt ihm oben wie
     unten 3 px Luft. Dadurch stehen Logo, Wortmarke, Status-Badge und
     Navigation ohne Sonderversatz auf einer gemeinsamen Mittelachse. */
  --logo-size:clamp(58px,6.2vw,92px);
  --nav-h-top:var(--nav-h);
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h-top);
  display:flex;align-items:center;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),height .35s var(--ease),padding .35s var(--ease),backdrop-filter .35s var(--ease);
}
.site-header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0));
  opacity:1;transition:opacity .35s var(--ease);
}
.site-header.is-stuck{
  /* Logo exakt so hoch wie die Wortmarke daneben. Die Leistenhöhe bleibt bei 66 px. */
  --logo-size:var(--brand-txt-h);
  height:66px;background:rgba(8,9,11,.92);border-bottom-color:var(--line);
  backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
}
.site-header.is-stuck::before{opacity:0}
.nav{display:flex;align-items:center;gap:clamp(16px,3vw,42px);width:100%;position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:13px;flex:none}
/* Das Logo ist am Seitenanfang deutlich größer als die Kopfzeile hoch ist.
   Negative Blockränder halten seinen Layoutanteil konstant bei 46 px, damit
   Kopfzeilenhöhe, Navigation und Links exakt an ihrer Position bleiben –
   der Überstand hängt sichtbar unter die Kopfzeile. `top` verschiebt ihn
   nach unten, sodass oben nichts vom Viewport abgeschnitten wird. */
.brand img{
  height:var(--logo-size);width:auto;flex:none;
  transition:height .35s var(--ease),filter .35s var(--ease);
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.65));
}
.site-header.is-stuck .brand img{filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.brand-txt{display:flex;flex-direction:column;line-height:1;white-space:nowrap}
.brand-txt b{font-family:var(--ff-display);font-weight:700;text-transform:uppercase;display:block}
.brand-txt .l1{font-size:var(--bt-1);letter-spacing:.26em;color:var(--text-muted);font-weight:500}
.brand-txt .l2{font-size:var(--bt-2);letter-spacing:.08em;margin-top:var(--bt-gap-1)}
.brand-txt small{font-size:var(--bt-3);letter-spacing:.28em;text-transform:uppercase;color:var(--text-dim);margin-top:var(--bt-gap-2)}

/* Aufnahme-Status im Header: sitzt direkt neben der Wortmarke, schiebt die Navigation nach rechts */
.nav>.status{margin-right:auto;margin-left:4px;flex:none}

.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,30px);list-style:none;margin:0;padding:0}
.nav-links a{
  font-family:var(--ff-display);font-weight:500;text-transform:uppercase;
  font-size:.82rem;letter-spacing:.13em;color:var(--text);padding:8px 2px;
  position:relative;transition:color .2s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:2px;width:100%;height:2px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav-links a:hover::after,.nav-links a.is-active::after{transform:scaleX(1)}
.nav-links a:hover{color:#fff}
.nav-cta{
  display:inline-block;white-space:nowrap;
  font-family:var(--ff-display);font-weight:600;text-transform:uppercase;font-size:.8rem;
  letter-spacing:.14em;background:var(--grad);color:#fff;padding:12px 22px;margin-block:10px;
  clip-path:polygon(
    0 0,
    calc(100% + 1px) 0,
    calc(100% + 1px) calc(100% - 8px),
    calc(100% - 8px) calc(100% + 1px),
    0 calc(100% + 1px)
  );
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.nav-cta:hover{background:var(--cgs-forest-dark);transform:translateY(-2px);box-shadow:0 10px 26px -10px rgba(178,34,34,.85)}
.nav-extra{display:flex;align-items:center;gap:16px}

.burger{display:none;width:46px;height:46px;background:transparent;border:1px solid var(--line-strong);cursor:pointer;padding:0;place-items:center}
.burger i{display:block;width:20px;height:2px;background:#fff;position:relative;transition:background .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;transition:transform .3s var(--ease)}
.burger i::before{top:-6px}.burger i::after{top:6px}
.burger.is-open i{background:transparent}
.burger.is-open i::before{transform:translateY(6px) rotate(45deg)}
.burger.is-open i::after{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:960px){
  .burger{display:grid}
  .nav-links{
    position:fixed;top:var(--nav-h-top);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(8,9,11,.98);backdrop-filter:blur(16px);border-top:1px solid var(--line);
    padding:8px var(--gut) 26px;transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:opacity .3s var(--ease),transform .3s var(--ease);max-height:calc(100vh - var(--nav-h));overflow:auto;
  }
  .site-header.is-stuck .nav-links{top:66px;max-height:calc(100vh - 66px)}
  .nav-links.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav-links a{padding:16px 0;border-bottom:1px solid var(--line);font-size:1rem}
  /* Im Auflistungsmodus säße die Unterstreichung direkt auf der Trennlinie und
     liefe über die volle Zeilenbreite. Stattdessen ein Balken links im Rand. */
  .nav-links a::after{
    left:calc(-1 * var(--gut) / 2);bottom:auto;top:13px;
    width:3px;height:calc(100% - 27px);
    transform:scaleY(0);transform-origin:center;
  }
  .nav-links a:hover::after,.nav-links a.is-active::after{transform:scaleY(1)}
  .nav-links .m-only{display:block}
  .nav-links li:last-child a{border-bottom:0}
}
@media(min-width:961px){
  .nav-links .m-only{display:none}
  /* Nur am Desktop: Kopfzeile wächst ungescrollt mit dem Logo mit. Das
     Innenabstand-Token wirkt ausschließlich nach unten – die Oberkante des
     Logos bleibt dadurch bei 3 px, darunter entsteht zusätzliche Luft.
     Mobil bleibt es unverändert bei 78 px ohne Innenabstand. */
  .site-header{
    --nav-pad-b:8px;
    --nav-h-top:max(var(--nav-h),calc(var(--logo-size) + 6px + var(--nav-pad-b)));
    padding-bottom:var(--nav-pad-b);
  }
  .site-header.is-stuck{padding-bottom:0}
}
/* Enge Viewports: Status-Badge und Wortmarken-Zusätze weichen, Logo bleibt */
@media(max-width:720px){.nav>.status{display:none}}
@media(max-width:420px){
  /* Wortmarke auf eine Zeile reduziert – das gescrollte Logo würde sonst auf
     Textzeilenhöhe schrumpfen, daher hier ein fester Wert. */
  .site-header{--brand-txt-h:40px}
  /* Nur die Kopfzeilen-Wortmarke kürzen – die im Footer bleibt vollständig. */
  .site-header .brand-txt .l1,.site-header .brand-txt small{display:none}
  .nav-cta{padding:11px 16px;font-size:.74rem}
}

/* ---------- 1. Hero ---------- */
/* Kein overflow:hidden auf .hero – sonst würde der Scroll-Indikator am
   Sektionsende abgeschnitten. Der Ken-Burns-Überstand der Bilder wird
   stattdessen von .hero-stage beschnitten. */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--ink-900)}
.hero-stage{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.6s linear;
  will-change:opacity;
}
.hero-slide.is-active{opacity:1}

/* Ken Burns als Transition statt Keyframe-Animation:
   Der abgehende Slide fährt langsam zurück, statt beim Klassenwechsel
   hart auf den Startwert zu springen. */
.hero-slide img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:grayscale(.28) contrast(1.06) brightness(.72);
  transform:scale(1.12);transform-origin:50% 45%;
  transition:transform 14s linear;
  will-change:transform;backface-visibility:hidden;
}
.hero-slide.is-active img{transform:scale(1)}
.hero-stage::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,9,11,.86) 0%,rgba(8,9,11,.30) 34%,rgba(8,9,11,.80) 72%,var(--ink-900) 100%),
    linear-gradient(100deg,rgba(8,9,11,.88) 0%,rgba(8,9,11,.15) 62%,rgba(111,21,21,.28) 100%);
}
.hero-grid{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:100% 25vh,14.28% 100%;
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.hero-inner{position:relative;z-index:4;width:100%;padding-block:clamp(110px,14vh,170px) clamp(56px,9vh,96px)}
/* Am Desktop ist die ungescrollte Kopfzeile bis zu 106 px hoch. Auf flachen
   Fenstern wächst der Hero-Inhalt über die Viewporthöhe hinaus und rückt nach
   oben – ohne diese Untergrenze läuft das Standort-Badge unter die Kopfzeile. */
@media(min-width:961px){
  .hero-inner{padding-top:max(140px,15vh)}
}
.hero-flag{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;
  font-family:var(--ff-display);font-weight:500;text-transform:uppercase;
  font-size:.74rem;letter-spacing:.28em;color:var(--cgs-cream);
  background:rgba(255,255,255,.06);border-left:3px solid var(--cgs-forest);
  padding:9px 16px;backdrop-filter:blur(6px);
}
.hero-flag .flag{
  font-size:1.05rem;line-height:1;letter-spacing:0;margin-left:2px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.hero h1{
  /* line-height leicht erhöht, damit die Umlautpunkte auf Ä/Ö/Ü Luft nach oben haben */
  font-size:clamp(2.9rem,6.4vw,5.4rem);line-height:1.15;letter-spacing:-.005em;
  max-width:16ch;text-wrap:balance;
}
.hero h1 .hl{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;
}
.hero-sub{
  max-width:60ch;margin-top:28px;color:var(--text-muted);font-size:clamp(1rem,1.35vw,1.16rem);
}
.hero-sub strong{color:var(--text);font-weight:600}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-facts{
  display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(42px,6vh,64px);
  border-top:1px solid var(--line-strong);
}
.hero-facts div{
  /* Innenabstand links schafft Luft zur Trennlinie der vorherigen Kachel */
  flex:1 1 150px;padding:22px 24px 4px 28px;border-right:1px solid var(--line);
}
.hero-facts div:first-child{padding-left:0}
.hero-facts div:last-child{border-right:0}
.hero-facts b{display:block;font-family:var(--ff-display);font-weight:700;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;color:#fff}
.hero-facts span{display:block;margin-top:8px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}

.hero-dots{position:absolute;right:var(--gut);bottom:clamp(56px,9vh,96px);z-index:5;display:flex;flex-direction:column;gap:10px}
.hero-dots button{width:30px;height:3px;background:rgba(255,255,255,.28);border:0;cursor:pointer;padding:0;transition:background .3s,width .3s}
.hero-dots button[aria-current="true"]{background:var(--cgs-forest);width:44px}
@media(max-width:860px){.hero-dots{flex-direction:row;right:auto;left:var(--gut);bottom:20px}}

/* Scroll-Indikator: rote Linie wächst von oben ein und zieht sich nach unten
   wieder zusammen – die Bewegung läuft also in Scrollrichtung. */
.scroll-hint{
  /* Negativer Wert: der Indikator hängt bewusst über die Sektionskante hinaus */
  position:absolute;left:50%;bottom:-26px;z-index:6;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;
  font-family:var(--ff-display);font-weight:500;font-size:.64rem;
  letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--text-dim);
}
.scroll-hint::after{
  content:"";width:2px;height:42px;
  background:linear-gradient(180deg,var(--cgs-forest),var(--cgs-forest-dark));
  animation:scrollline 2.4s var(--ease) infinite;
}
@keyframes scrollline{
  0%  {transform:scaleY(0);transform-origin:top}
  45% {transform:scaleY(1);transform-origin:top}
  55% {transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@media(max-width:860px){.scroll-hint{display:none}}


/* ---------- 2. Dafür steht CGS ---------- */
.values{background:var(--ink-800);border-top:1px solid var(--line)}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
@media(max-width:900px){.value-grid{grid-template-columns:1fr}}
.value{
  background:var(--ink-700);padding:clamp(32px,3.6vw,52px);position:relative;overflow:hidden;
  transition:background .4s var(--ease),transform .4s var(--ease);
}
.value::before{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.value:hover{background:var(--ink-600);transform:translateY(-4px)}
.value:hover::before{transform:scaleX(1)}
.value-letter{
  font-family:var(--ff-display);font-weight:700;font-size:clamp(4.6rem,8vw,7.4rem);line-height:.8;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;margin-bottom:6px;
}
.value h3{margin-bottom:14px;font-size:clamp(1.25rem,2vw,1.6rem)}
.value p{color:var(--text-muted);font-size:.98rem;margin:0}
.value-ghost{
  position:absolute;right:-14px;top:-26px;font-family:var(--ff-display);font-weight:700;
  font-size:11rem;line-height:1;color:rgba(255,255,255,.022);pointer-events:none;user-select:none;
}

/* ---------- 3. Vorteile ---------- */
.benefits{background:var(--ink-900);position:relative}
.benefits::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 82% 8%,rgba(178,34,34,.16),transparent 70%);
}
.benefits .wrap{position:relative;z-index:1}
.benefit-layout{display:grid;grid-template-columns:1fr 340px;gap:clamp(28px,4vw,60px);align-items:start}
@media(max-width:980px){.benefit-layout{grid-template-columns:1fr}}
.benefit-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
@media(max-width:640px){.benefit-list{grid-template-columns:1fr}}
.benefit{background:var(--ink-700);padding:clamp(26px,2.8vw,38px);display:flex;gap:20px;align-items:flex-start;transition:background .35s var(--ease)}
.benefit:hover{background:var(--ink-600)}
.benefit .ico{
  flex:none;width:52px;height:52px;display:grid;place-items:center;background:var(--grad-soft);
  box-shadow:inset 0 0 0 1px rgba(178,34,34,.35);
}
.benefit .ico svg{width:24px;height:24px;stroke:var(--cgs-forest);fill:none;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter}
.benefit h3{font-size:1.05rem;margin-bottom:8px}
.benefit p{color:var(--text-muted);font-size:.93rem;margin:0}

.price-card{
  background:var(--grad);padding:clamp(30px,3vw,40px);position:relative;overflow:hidden;
  box-shadow:0 26px 60px -30px rgba(178,34,34,.9);
}
.price-card::after{
  content:"";position:absolute;right:-40px;bottom:-40px;width:170px;height:170px;
  border:1px solid rgba(255,255,255,.18);transform:rotate(45deg);
}
.price-card .lbl{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.26em;font-size:.72rem;color:rgba(255,255,255,.78)}
.price-card .amt{font-family:var(--ff-display);font-weight:700;font-size:clamp(3.4rem,6vw,4.6rem);line-height:1;margin:12px 0 4px;color:#fff}
.price-card .per{font-size:.86rem;color:rgba(255,255,255,.82);letter-spacing:.08em;text-transform:uppercase;font-family:var(--ff-display)}
.price-card ul{list-style:none;margin:26px 0 28px;padding:0;border-top:1px solid rgba(255,255,255,.22)}
/* align-items:flex-start, damit der Aufzählungspunkt bei mehrzeiligen
   Einträgen an der ersten Zeile sitzt und nicht mittig dazwischen. */
.price-card li{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:.92rem;color:rgba(255,255,255,.94);display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.price-card li::before{content:"";width:7px;height:7px;background:#fff;flex:none;margin-top:.52em}
.price-card .btn{width:100%;background:#fff;color:var(--cgs-forest-darker)}
.price-card .btn::after{
  content:"";position:absolute;inset:0;background:var(--ink-900);
  transform:translateY(101%);transition:transform .32s var(--ease);z-index:1;
}
.price-card .btn:hover{color:#fff;transform:translateY(-2px)}
.price-card .btn:hover::after{transform:translateY(0)}
@media(min-width:981px){.price-card{position:sticky;top:calc(var(--nav-h) + 24px)}}

/* ---------- 4. Partner ---------- */
.partners{background:var(--ink-800);border-block:1px solid var(--line)}
/* Logos sind freigestellt (PNG mit Alphakanal) und stehen direkt auf der
   dunklen Kachel. Die beiden runden Verbandssiegel behalten ihre helle
   Kreisfläche, sonst wäre ihr außenliegender Schriftring nicht lesbar. */
.partner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line)}
.partner{
  background:var(--ink-700);aspect-ratio:2/1;display:grid;place-items:center;padding:14px 20px;
  transition:background .35s var(--ease);
}
.partner:hover{background:var(--ink-600)}
.partner img{
  max-height:clamp(92px,9.5vw,126px);max-width:100%;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.72;
  transition:filter .4s var(--ease),opacity .4s var(--ease),transform .4s var(--ease);
}
.partner:hover img{filter:none;opacity:1;transform:scale(1.05)}
@media(max-width:520px){.partner{aspect-ratio:16/7;padding:12px 16px}}

/* ---------- 5. Anlage ---------- */
.facility{background:var(--ink-900)}
/* Drei Schießbereiche untereinander: Bild bündig links, Text rechts daneben.
   Kein Spalten-Abstand – der Textblock bringt seinen Innenabstand selbst mit.
   Beide Spalten sind gleich hoch (align-items:stretch), dadurch setzt die
   Trennlinie unter dem Text die Unterkante des Bildes fort. */
.fac-grid{display:flex;flex-direction:column}
.fac-card{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:stretch}
.fac-card + .fac-card{margin-top:clamp(26px,3vw,46px)}
.fac-card .shot{position:relative;overflow:hidden;min-height:clamp(210px,19vw,264px)}
.fac-card .shot img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  filter:grayscale(1) contrast(1.06) brightness(.82);
  transition:transform .8s var(--ease),filter .5s var(--ease);
}
.fac-card:hover .shot img{transform:scale(1.05)}
.fac-card .shot::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,9,11,.4) 0%,transparent 42%,rgba(8,9,11,.45) 100%);
}
.fac-card .status{position:absolute;left:16px;top:16px;z-index:2;backdrop-filter:blur(8px)}
.fac-card .num{
  position:absolute;right:16px;top:16px;z-index:2;
  font-family:var(--ff-display);font-weight:700;font-size:.8rem;letter-spacing:.14em;
  color:rgba(255,255,255,.6);
}
.fac-body{
  display:flex;flex-direction:column;justify-content:center;gap:12px;
  padding:clamp(20px,2.2vw,30px) 0 clamp(22px,2.4vw,32px) clamp(26px,3.4vw,52px);
  border-bottom:1px solid var(--line);
}
.fac-body h3{font-size:1.16rem}
.fac-body p{color:var(--text-muted);font-size:.94rem;margin:0;max-width:62ch}

@media(max-width:760px){
  /* Gestapelt: Bild oben, Text darunter – linker Innenabstand entfällt */
  .fac-card{grid-template-columns:1fr}
  .fac-card .shot{min-height:0}
  .fac-card .shot img{aspect-ratio:16/9;height:auto}
  .fac-body{padding:22px 0 24px}
}

/* Bereiche in Planung: sichtbar zurückgenommen, damit sie nicht als
   bestehendes Angebot missverstanden werden. */
.fac-card.is-soon .shot img{filter:grayscale(1) brightness(.5) contrast(.95)}
.fac-card.is-soon .shot::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(255,255,255,.035) 11px 22px);
}
.fac-card.is-soon .fac-body h3{color:var(--text-muted)}
.fac-loc{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;color:var(--text-muted);
  font-size:.88rem;letter-spacing:.06em;
}
.fac-loc svg{width:18px;height:18px;stroke:var(--cgs-amber);fill:none;stroke-width:1.7}

/* ---------- 6. Interesse geweckt ---------- */
.cta{background:var(--ink-800);border-top:1px solid var(--line);padding:0;overflow:hidden}
.cta-split{display:grid;grid-template-columns:1fr 1fr;min-height:min(78vh,660px)}
@media(max-width:900px){.cta-split{grid-template-columns:1fr}}
.cta-copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(56px,7vw,110px) clamp(28px,5vw,80px);
  background:var(--ink-700);position:relative;
}
.cta-copy::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 70% at 0% 100%,rgba(178,34,34,.20),transparent 68%);
}
.cta-copy>*{position:relative}
.cta-copy h2{font-size:clamp(2.2rem,4.4vw,3.6rem);max-width:14ch}
.cta-copy p{color:var(--text-muted);margin-top:22px;max-width:46ch}
.cta-copy .btn{margin-top:34px;align-self:flex-start}
.cta-note{margin-top:22px;font-size:.82rem;color:var(--text-dim);letter-spacing:.04em}
.cta-media{position:relative;overflow:hidden;background:var(--ink-900);min-height:340px}
/* Bildausschnitt: Die Panelhöhe ist gedeckelt (min(78vh,660px)), die Breite
   nicht – auf breiten Bildschirmen wird dadurch deutlich mehr Höhe beschnitten.
   Bei 70 % wurden die Köpfe ab etwa 1,9:1 angeschnitten, bei 30 % füllte die
   Baumkulisse die obere Hälfte. 45 % ist der Mittelweg: bis 2,6:1 bleiben die
   Köpfe vollständig, die Personen nehmen rund zwei Drittel ein. */
.cta-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;filter:grayscale(.3) contrast(1.06) brightness(.82)}
.cta-media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,23,28,.9),transparent 55%)}

/* ---------- 7. Kontakt ---------- */
.contact{background:var(--ink-900)}
.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4vw,64px)}
@media(max-width:900px){.contact-layout{grid-template-columns:1fr}}
.contact-info dl{margin:0;border-top:1px solid var(--line)}
.contact-info .row{padding:20px 0;border-bottom:1px solid var(--line)}
.contact-info .row:last-child{border-bottom:0}
.contact-info dt{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;color:var(--text-dim);margin-bottom:7px}
.contact-info dd{margin:0;font-size:1rem;color:var(--text)}
.contact-info dd a:hover{color:var(--cgs-forest)}

form.cgs-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){form.cgs-form{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--text-muted)}
.field label .req{color:var(--cgs-forest)}
.field input,.field textarea,.field select{
  background:var(--ink-700);border:1px solid var(--line);padding:15px 16px;color:var(--text);
  font-size:.97rem;transition:border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
  width:100%;font-family:var(--ff-body);
}
.field textarea{min-height:150px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px;}
.field select option{background:var(--ink-700);color:var(--text)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;border-color:var(--cgs-forest);background-color:var(--ink-600);
  box-shadow:0 0 0 3px rgba(178,34,34,.18);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-dim)}
.field .err{font-size:.78rem;color:#ff6b6b;display:none;letter-spacing:.03em}
.field.is-invalid input,.field.is-invalid textarea{border-color:#ff6b6b}
.field.is-invalid .err{display:block}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.85rem;color:var(--text-muted);grid-column:1/-1}
.consent input{width:19px;height:19px;flex:none;accent-color:var(--cgs-forest);margin-top:3px;padding:0}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;margin-top:6px}
.form-msg{font-size:.88rem;letter-spacing:.03em}
.form-msg.ok{color:#3fbf6a}
.form-msg.bad{color:#ff6b6b}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 8. Footer ---------- */
.site-footer{background:var(--ink-800);border-top:1px solid var(--line);padding-top:clamp(34px,4vw,54px)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px);padding-bottom:48px}
@media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}}
/* Wortmarken-Lockup wie im Header, nur größer skaliert */
.foot-lockup{display:flex;align-items:center;gap:18px;margin:-10px 0 24px}
.foot-lockup img{height:clamp(110px,11vw,150px);width:auto;flex:none}
.foot-lockup .brand-txt{--bt-1:.9rem;--bt-2:1.28rem;--bt-3:.64rem;--bt-gap-1:4px;--bt-gap-2:6px}
/* „Finde uns auf" bekommt dieselbe Label-Typografie wie die Spaltentitel
   rechts daneben – dadurch haben alle drei Footer-Spalten denselben Rhythmus:
   kleines Versal-Label, darunter der Inhalt. */
.foot-brand p{
  font-family:var(--ff-display);font-weight:500;text-transform:uppercase;
  font-size:.78rem;letter-spacing:.22em;color:var(--text-dim);margin:0 0 18px;
}
/* Ab dem dreispaltigen Layout rücken die Linkspalten ein, damit sie nicht am
   Beschreibungstext der Marke kleben. */
@media(min-width:821px){.foot-col{padding-left:clamp(20px,3.4vw,56px)}}
.foot-col h4{font-size:.78rem;letter-spacing:.22em;color:var(--text-dim);margin-bottom:18px}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot-col a{color:var(--text-muted);font-size:.92rem;transition:color .2s,padding-left .2s}
.foot-col a:hover{color:#fff;padding-left:5px}
.socials{display:flex;gap:10px;margin-top:0}
.socials a{
  width:44px;height:44px;display:grid;place-items:center;background:var(--ink-700);
  box-shadow:inset 0 0 0 1px var(--line);transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.socials a:hover{background:var(--grad);transform:translateY(-3px);box-shadow:inset 0 0 0 1px transparent,0 10px 22px -10px rgba(178,34,34,.9)}
.socials svg{width:19px;height:19px;fill:currentColor}
.foot-bar{
  border-top:1px solid var(--line);padding-block:24px;display:flex;flex-wrap:wrap;gap:14px 26px;
  align-items:center;justify-content:space-between;font-size:.8rem;color:var(--text-dim);letter-spacing:.04em;
}
.foot-bar nav{display:flex;flex-wrap:wrap;gap:22px}
.foot-bar a:hover{color:var(--cgs-cream)}

/* ---------- Scroll-Animationen ---------- */
[data-anim]{opacity:0;will-change:transform,opacity;transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:var(--d,0ms)}
[data-anim="up"]{transform:translateY(46px)}
[data-anim="left"]{transform:translateX(-46px)}
[data-anim="right"]{transform:translateX(46px)}
[data-anim="zoom"]{transform:scale(.94)}
[data-anim="clip"]{clip-path:inset(0 100% 0 0);opacity:1;transition:clip-path 1s var(--ease)}
.is-in[data-anim]{opacity:1;transform:none}
.is-in[data-anim="clip"]{clip-path:inset(0 0 0 0)}

/* ---------- Einwilligungsbanner (Matomo) ---------- */
.consent-bar{
  position:fixed;inset:auto 0 0 0;z-index:150;
  background:rgba(13,15,18,.97);border-top:1px solid var(--line-strong);
  backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 -24px 60px -30px #000;
  transform:translateY(100%);transition:transform .45s var(--ease);
}
.consent-bar.is-in{transform:none}
.consent-inner{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding:22px var(--gut);
  display:flex;align-items:center;gap:clamp(18px,3vw,44px);
}
.consent-inner p{margin:0;font-size:.9rem;color:var(--text-muted);max-width:78ch}
.consent-inner p b{
  display:block;font-family:var(--ff-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:.72rem;color:var(--cgs-forest);margin-bottom:7px;
}
.consent-inner a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.consent-inner a:hover{color:var(--cgs-forest)}
.consent-actions{display:flex;gap:12px;margin-left:auto;flex:none}
.consent-actions .btn{padding:14px 26px;font-size:.8rem}
@media(max-width:820px){
  .consent-inner{flex-direction:column;align-items:stretch;gap:18px;padding-block:20px}
  .consent-actions{margin-left:0}
  .consent-actions .btn{flex:1}
}
/* Der Zurück-nach-oben-Knopf würde sonst auf dem Banner liegen */
body.has-consent .to-top{opacity:0;pointer-events:none}

/* Fortschrittsbalken */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--grad);z-index:200}

/* Zurück nach oben */
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:90;width:48px;height:48px;display:grid;place-items:center;
  background:var(--ink-700);box-shadow:inset 0 0 0 1px var(--line-strong);color:#fff;cursor:pointer;border:0;
  opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .3s,transform .3s,background .3s;
}
.to-top.is-on{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:var(--grad)}
.to-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

::selection{background:var(--cgs-forest);color:#fff}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--ink-900)}
::-webkit-scrollbar-thumb{background:var(--ink-500)}
::-webkit-scrollbar-thumb:hover{background:var(--cgs-forest)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-anim]{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* ==========================================================================
   Unterseiten (Impressum, Datenschutz, Statuten)
   ========================================================================== */
.legal{background:var(--ink-900);padding-top:calc(var(--nav-h) + clamp(48px,7vw,96px))}
.legal-head{max-width:820px;margin-bottom:clamp(36px,5vw,60px)}
.legal-head h1{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.1}
.legal-head p{color:var(--text-muted);margin-top:18px;font-size:1.02rem}
.legal-updated{
  display:inline-block;margin-top:20px;font-family:var(--ff-display);font-weight:500;
  text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;color:var(--text-dim);
  border-left:3px solid var(--cgs-forest);padding:6px 0 6px 14px;
}

.legal-body{max-width:820px}
.legal-body section{padding:clamp(26px,3vw,38px) 0;border-top:1px solid var(--line)}
.legal-body section:first-of-type{border-top:0;padding-top:0}
.legal-body h2{
  font-size:clamp(1.2rem,2.1vw,1.6rem);margin-bottom:16px;
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
}
.legal-body h2::before{
  content:attr(data-num);font-size:.7rem;letter-spacing:.14em;color:var(--cgs-forest);
  font-weight:700;
}
.legal-body h3{font-size:1rem;margin:24px 0 10px;color:var(--cgs-cream)}
.legal-body p,.legal-body li{color:var(--text-muted);font-size:.97rem}
.legal-body p{margin:0 0 14px}
.legal-body ul{margin:0 0 14px;padding-left:0;list-style:none}
/* Kein Grid auf dem Eintrag! Ein Grid-Container macht aus JEDEM Kindelement
   und jedem zusammenhängenden Textstück ein eigenes Grid-Item. Enthält ein
   Eintrag ein <strong>, entstehen daraus drei Items statt zwei – der fette
   Begriff landet in der zweiten Spalte, der Rest des Satzes rutscht in die
   nächste Zeile. Stattdessen liegt der Aufzählungspunkt absolut positioniert
   im linken Innenabstand, der Eintrag selbst bleibt normaler Fließtext. */
.legal-body ul li{position:relative;padding:0 0 0 20px}
.legal-body ul li::before{
  content:"";position:absolute;left:0;top:.66em;
  width:6px;height:6px;background:var(--cgs-forest);
}
.legal-body a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.legal-body a:hover{color:var(--cgs-forest)}
/* Schaltflächen sind keine Fließtext-Links – keine Unterstreichung, kein Farbwechsel */
.legal-body a.btn,.legal-body a.btn:hover{text-decoration:none}
.legal-body a.btn--primary,.legal-body a.btn--primary:hover{color:#fff}
.legal-body a.btn--ghost{color:var(--text)}
.legal-body a.btn--ghost:hover{color:var(--ink-900)}
.legal-body strong{color:var(--text)}

/* Definitionsliste für Adress- und Kontaktangaben */
.legal-dl{margin:0 0 18px;display:grid;grid-template-columns:minmax(0,190px) 1fr;gap:1px;background:var(--line)}
@media(max-width:560px){.legal-dl{grid-template-columns:1fr}}
.legal-dl dt{
  background:var(--ink-700);padding:13px 18px;font-family:var(--ff-display);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--text-dim);
}
.legal-dl dd{background:var(--ink-700);padding:13px 18px;margin:0;color:var(--text);font-size:.95rem}

/* Hinweisfeld für noch zu ergänzende Angaben */
.legal-note{
  background:rgba(196,138,47,.09);box-shadow:inset 0 0 0 1px rgba(196,138,47,.4);
  padding:18px 20px;margin:0 0 18px;
}
.legal-note p{color:var(--cgs-amber);margin:0;font-size:.9rem}
.legal-note p + p{margin-top:8px}

/* PDF-Einbettung Statuten */
.doc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.doc-frame{
  position:relative;width:100%;height:min(80vh,900px);
  background:var(--ink-700);box-shadow:inset 0 0 0 1px var(--line);
}
.doc-frame iframe{width:100%;height:100%;border:0;display:block}
.doc-fallback{padding:clamp(26px,4vw,44px);text-align:center}
.doc-fallback p{color:var(--text-muted);margin-bottom:18px}
@media(max-width:640px){.doc-frame{height:60vh}}

.legal-toc{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(30px,4vw,48px);
}
.legal-toc a{
  font-family:var(--ff-display);font-weight:500;text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;color:var(--text-muted);padding:9px 15px;
  box-shadow:inset 0 0 0 1px var(--line);transition:color .25s var(--ease),box-shadow .25s var(--ease);
}
.legal-toc a:hover{color:#fff;box-shadow:inset 0 0 0 1px var(--cgs-forest)}

/* Funktionärsliste im Hinweisfeld */
.legal-note h3{margin:0 0 14px;color:var(--cgs-amber);font-size:.78rem;letter-spacing:.2em}
.fn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(196,138,47,.28);margin:0}
@media(max-width:620px){.fn-grid{grid-template-columns:1fr}}
.fn-grid > div{background:var(--ink-800);padding:14px 18px}
.fn-grid dt{
  font-family:var(--ff-display);font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;font-size:.66rem;color:var(--cgs-amber);margin-bottom:6px;
}
.fn-grid dd{margin:0;color:var(--text);font-size:.97rem}
.legal-note .fn-note{color:var(--text-dim);font-size:.82rem;margin:16px 0 0;letter-spacing:.02em}