/* ============================================================================
   Heimat Region Gera e.V. — Design-System
   Konzept: "Papier & Region". Editoriale Drucksache auf warmem Papier.
   Typografie trägt das Bild; die drei Logo-Marken (Smile/Linie/Kreis) sind
   das Interpunktions-System der Seite.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Papierwelt */
  --paper:        #fbf8f2;
  --paper-2:      #f4efe4;
  --paper-3:      #ebe4d5;
  --ink:          #141414;
  --ink-80:       #34322e;
  --ink-60:       #55524b;
  /* #6e6a62 statt eines helleren Grau: erreicht 4.69:1 auch auf --paper-2,
     dem dunkelsten Hintergrund, auf dem Labels stehen. */
  --ink-45:       #6e6a62;
  --rule:         rgba(20, 20, 20, .13);
  --rule-strong:  rgba(20, 20, 20, .26);

  /* Markenfarben — als Flächen/Marken. */
  --yellow:       #ffc20d;
  --red:          #ed1c24;
  --green:        #40b55e;
  /* …und abgedunkelte Textvarianten, damit Farbe auf Papier 4.5:1 erreicht. */
  --red-ink:      #c0121a;
  --green-ink:    #1c7a39;

  /* Schrift */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body:    'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-display: clamp(2.5rem,  1.05rem + 5.4vw, 5.5rem);
  --fs-h1:      clamp(2.15rem, 1.25rem + 3.6vw, 4.25rem);
  --fs-h2:      clamp(1.75rem, 1.15rem + 2.3vw, 3rem);
  --fs-h3:      clamp(1.3rem,  1.1rem  + .85vw, 1.75rem);
  --fs-lead:    clamp(1.15rem, 1.02rem + .62vw, 1.5rem);
  --fs-body:    clamp(1.0625rem, 1.02rem + .22vw, 1.1875rem);
  --fs-small:   .9375rem;
  --fs-label:   .75rem;

  /* Raster: 8pt-Rhythmus */
  --sp-2xs: .25rem;  --sp-xs: .5rem;   --sp-sm: .75rem;  --sp-md: 1rem;
  --sp-lg: 1.5rem;   --sp-xl: 2rem;    --sp-2xl: 3rem;   --sp-3xl: 4rem;
  --sp-4xl: 6rem;    --sp-5xl: 8rem;

  --section-y:  clamp(4rem, 3rem + 5.5vw, 8.5rem);
  --gutter:     clamp(1.25rem, .6rem + 3.2vw, 3.5rem);
  --maxw:       78rem;
  --maxw-text:  40rem;

  --r-sm:   3px;
  --r-lg:   18px;
  --r-pill: 999px;

  --shadow-card: 0 1px 0 rgba(20,20,20,.05), 0 22px 44px -32px rgba(20,20,20,.3);
  --shadow-lift: 0 1px 0 rgba(20,20,20,.06), 0 30px 56px -34px rgba(20,20,20,.38);

  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, .84, .44, 1);
  --dur-fast:  180ms;
  --dur:       280ms;
  --dur-slow:  680ms;

  --z-hero: 1; --z-sticky: 40; --z-header: 60; --z-menu: 80; --z-skip: 100;
}

/* ---------- 2. Reset / Basis -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.72;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }

:where(button, a, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-ink :where(button, a):focus-visible,
.cta-band :where(button, a):focus-visible { outline-color: var(--paper); }

::selection { background: var(--yellow); color: var(--ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: var(--sp-md); left: var(--sp-md); z-index: var(--z-skip);
  transform: translateY(-160%);
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; border-radius: var(--r-pill);
  font: 500 var(--fs-label)/1 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- 3. Typografie ----------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.018em;
  text-wrap: balance;
  /* Deutsche Komposita wie "Datenschutzerklärung" sind als ein Wort breiter
     als schmale Viewports. Ohne Trennung wächst die min-content-Breite und
     schiebt die ganze Seite auf (horizontaler Scroll).
     Wichtig: "anywhere" statt "break-word" — laut Spezifikation beeinflusst
     nur "anywhere" die min-content-Breite, "break-word" bricht lediglich
     die Darstellung und lässt die Mindestbreite unverändert.
     "hyphens: auto" sorgt dafür, dass der Bruch an einer sinnvollen
     Trennstelle mit Trennstrich erfolgt statt mitten im Wort. */
  hyphens: auto;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -.012em; }

p { text-wrap: pretty; }

/* Bewusst kein inline-flex: sonst werden die Textteile zu eigenständigen
   Flex-Items, die auf schmalen Viewports jeder für sich umbrechen und
   nebeneinander stehen bleiben. Im normalen Textfluss bricht die Zeile
   als Ganzes korrekt um. */
.label {
  display: inline-block;
  font: 500 var(--fs-label)/1.45 var(--font-mono);
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--ink-45);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}
.label__num { margin-right: .35em; }
.label--ink  { color: var(--ink); }
.label--pale { color: rgba(251, 248, 242, .62); }

.label__num { color: var(--ink); }
.label--pale .label__num { color: var(--yellow); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.58;
  color: var(--ink-80);
  max-width: 34ch;
}

.prose { max-width: var(--maxw-text); }
.prose > * + * { margin-top: 1.15em; }
.prose strong { font-weight: 600; }
.prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--rule-strong);
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.prose a:hover { text-decoration-color: var(--ink); }

/* Auszeichnung: die Klammer-Marke unter einem Wort */
.mark-word { position: relative; white-space: nowrap; }
.mark-word::after {
  content: ""; position: absolute; left: -.04em; right: -.04em; bottom: -.06em;
  height: .3em; background: var(--yellow); z-index: -1;
  border-radius: 2px;
}

/* ---------- 4. Layout --------------------------------------------------- */
.wrap {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--paper2 { background: var(--paper-2); }
.section--tight  { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

.section__head {
  display: grid; gap: var(--sp-lg);
  margin-bottom: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
}
.section__head .lead { max-width: 46ch; }

@media (min-width: 60rem) {
  .section__head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    align-items: end; gap: var(--sp-3xl);
  }
}

.rule { height: 1px; background: var(--rule); border: 0; }

/* ---------- 5. Marken (Smile / Linie / Kreis) --------------------------- */
.mark { width: 1.9rem; height: 1.9rem; flex: none; display: block; }
.mark--smile { color: var(--yellow); }
.mark--line  { color: var(--red); }
.mark--dot   { color: var(--green); }
.mark--lg    { width: 2.75rem; height: 2.75rem; }

/* ---------- 6. Buttons ------------------------------------------------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3rem; padding: .85rem 1.6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-pill);
  font: 500 .9375rem/1 var(--font-mono);
  letter-spacing: .06em;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(20,20,20,.55); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: none; }

.btn--primary { --btn-bg: var(--yellow); --btn-fg: var(--ink); --btn-bd: var(--yellow); }
.btn--primary:hover { --btn-bg: #ffcf3d; --btn-bd: #ffcf3d; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--rule-strong); }
.btn--ghost:hover { --btn-bd: var(--ink); --btn-bg: rgba(20,20,20,.04); }

.btn--on-dark { --btn-bg: transparent; --btn-fg: var(--paper); --btn-bd: rgba(251,248,242,.34); }
.btn--on-dark:hover { --btn-bd: var(--paper); --btn-bg: rgba(251,248,242,.08); }

.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Textlink mit Pfeil */
.arrow-link {
  display: inline-flex; align-items: baseline; gap: .5em;
  font: 500 .9375rem/1.4 var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase;
  padding-block: .78rem; /* Touch-Ziel >= 44px */
  border-bottom: 1px solid var(--rule-strong);
  transition: border-color var(--dur-fast) var(--ease), gap var(--dur) var(--ease);
}
.arrow-link:hover { border-color: var(--ink); gap: .85em; }

/* ---------- 7. Header / Navigation ------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  background: rgba(251, 248, 242, .74);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.header.is-stuck {
  background: rgba(251, 248, 242, .95);
  border-bottom-color: var(--rule);
  box-shadow: 0 12px 30px -26px rgba(20,20,20,.6);
}

.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-lg);
  min-height: 4.75rem;
  transition: min-height var(--dur) var(--ease);
}
.header.is-stuck .header__inner { min-height: 4.25rem; }

.brand { display: flex; align-items: center; flex: none; min-height: 2.75rem; }
.brand__logo {
  width: auto; height: 2.5rem;
  transition: height var(--dur) var(--ease);
}
.header.is-stuck .brand__logo { height: 2.2rem; }

.nav { display: none; }
@media (min-width: 62rem) {
  .nav { display: flex; align-items: center; gap: clamp(.5rem, .1rem + 1.2vw, 1.75rem); }
}
.nav__link {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding-inline: .25rem;
  font: 500 var(--fs-label)/1 var(--font-mono);
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-60);
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .55rem;
  height: 2px; background: var(--yellow);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: var(--sp-sm); }
.header__cta { display: none; }
@media (min-width: 48rem) { .header__cta { display: inline-flex; } }

/* Burger */
.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; padding: 0 .55rem;
  background: none; border: 0; cursor: pointer;
  touch-action: manipulation;
}
@media (min-width: 62rem) { .burger { display: none; } }
.burger span {
  display: block; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobiles Menü */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--paper);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: var(--sp-md) 0 var(--sp-xl);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 3.75rem; }
.menu__list { display: flex; flex-direction: column; justify-content: center; gap: .35rem; }
.menu__link {
  display: flex; align-items: center; gap: var(--sp-md);
  padding-block: .55rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.75rem, 1.1rem + 3.4vw, 2.75rem);
  line-height: 1.1; letter-spacing: -.02em;
  opacity: 0; transform: translateY(14px);
}
.menu.is-open .menu__link {
  animation: menu-in .5s var(--ease-out) forwards;
  animation-delay: calc(60ms * var(--i, 0) + 80ms);
}
@keyframes menu-in { to { opacity: 1; transform: none; } }
.menu__link .mark { width: 1.15rem; height: 1.15rem; opacity: .9; }
.menu__foot { display: grid; gap: var(--sp-md); }
.menu__foot .btn { width: 100%; }
.menu__meta { font: 400 var(--fs-small)/1.6 var(--font-mono); color: var(--ink-45); }

body.is-locked { overflow: hidden; }

/* ---------- 8. Hero ---------------------------------------------------- */
/* Split-Aufbau: Typografie links auf Papier, Video als Karte rechts.
   Videobreite: exakt 960px ab 1600px Fensterbreite mit 80px Randabstand,
   darunter proportional mitskalierend, unter 1024px gestapelt. */
.hero {
  position: relative; z-index: var(--z-hero);
  background: var(--paper);
  padding-top: clamp(7rem, 5.5rem + 4.5vw, 10rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
  /* 5vw erreicht bei 1600px genau 80px und wird dort gekappt */
  padding-inline: clamp(1.25rem, 5vw, 5rem);
  overflow: clip;
}

.hero__grid {
  /* Lineare Rampe von 460px bei 1024px auf exakt 960px bei 1920px, dort
     gekappt. Bewusst nicht schon bei 1600px voll, sonst stagniert die
     Headline auf den häufigen Laptop-Breiten bei 52px. */
  --video-w: clamp(28.75rem, 55.8vw - 6.96rem, 60rem);
  display: grid;
  gap: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
  align-items: center;
}
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) var(--video-w); }
}

.hero__body {
  display: grid; align-content: center;
  gap: clamp(1.15rem, .85rem + 1.2vw, 2rem);
  max-width: 50rem;
}

/* ---- Claim -------------------------------------------------------------
   Die Schriftgröße folgt der BREITE DER TEXTSPALTE, nicht dem Viewport:
   zwischen 1024 und 1600px bleibt die Spalte fast konstant, weil das Video
   mitwächst. Ohne Container-Query würde "Heimatverbunden" dort umbrechen. */
.hero__claim {
  display: grid; gap: clamp(.2rem, .1rem + .35vw, .6rem); margin: 0;
  /* Der Claim ist per cqw-Formel garantiert einzeilig und darf nie getrennt
     werden — die globale Silbentrennung der Überschriften gilt hier nicht. */
  hyphens: none;
  font-size: clamp(1.6rem, 3.6vw, 3rem); /* Fallback ohne cqw */
}
@supports (container-type: inline-size) {
  .hero__body { container-type: inline-size; }
  /* 11.0cqw ist im Browser GEMESSEN, nicht gerechnet: die breiteste Zeile
     "Regionalität fördern" belegt im aktiven Gewicht 600 exakt 8.816em
     (per Wortboxen und Range gegengeprüft). 100/8.816 = 11.34cqw ist die
     Obergrenze, 11.0 lässt Reserve. Damit bleiben alle drei Zeilen bei
     JEDER Spaltenbreite einzeilig — der cqw-Wert skaliert die Schrift
     genau mit dem verfügbaren Platz.
     Vorher 10.6cqw; seit dem Entfernen der Marken vor den Zeilen ist mehr
     Platz frei. Wer Text ODER Zeilenaufbau ändert, muss neu messen. */
  .hero__claim { font-size: clamp(1.6rem, 11cqw, 6.75rem); }
  /* Gestapelt ist die Spalte so breit wie die Seite. Ohne Deckel würde die
     Headline dort auf ~90px springen und den Hero unnötig hoch machen. */
  @media (max-width: 63.999rem) {
    /* 10.4 statt 11.0cqw: bei kleinen Schriftgraden skalieren die
       Schriftmetriken durch Hinting/Rundung nicht exakt linear, die
       Reserve aus 11.0 reicht auf 320-414px-Displays nicht. */
    .hero__claim { font-size: clamp(1.6rem, 10.4cqw, 4.25rem); }
  }
}

.claim__line {
  display: block;
  font-family: var(--font-display);
  font-size: inherit;
  line-height: 1.04;
  letter-spacing: -.032em;
  color: var(--ink);
  font-variation-settings: "wght" 470;
  transition: opacity .78s var(--ease), font-variation-settings .78s var(--ease);
}
.claim__line--a { --accent: var(--yellow); }
.claim__line--b { --accent: var(--red); }
.claim__line--c { --accent: var(--green); }

.claim__text { position: relative; display: block; }

/* Kinetische Rotation: die aktive Zeile tritt in vollem Ink nach vorn,
   die übrigen fallen auf 62% zurück. Nicht weiter — darunter reisst der
   Kontrast unter 4.5:1 und die Headline wäre stellenweise unlesbar.
   Die Markenfarbe rotiert im Bogen unter dem Schlüsselwort. */
.js .hero__claim[data-kinetic] .claim__line { opacity: .62; }
.js .hero__claim[data-kinetic] .claim__line.is-active {
  opacity: 1;
  font-variation-settings: "wght" 600;
}

/* Selbstzeichnender Bogen — das Smile aus dem Logo als Schwung.
   Er hängt am Schlüsselwort, nicht an der ganzen Zeile: so bleibt er auch
   bei einem Umbruch korrekt platziert und zeichnet gezielt aus. */
.claim__key { position: relative; display: inline-block; }
.claim__swash {
  position: absolute; left: -.02em; right: -.02em; bottom: -.09em;
  width: auto; height: .26em;
  color: var(--accent);
  overflow: visible; pointer-events: none;
}
.claim__swash path {
  fill: none; stroke: currentColor;
  stroke-width: clamp(3.5px, .075em, 9px);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset .9s var(--ease-out);
}
.claim__line.is-active .claim__swash path { stroke-dashoffset: 0; }

/* ---- Wortweiser Maskenaufzug ---------------------------------------- */
.word {
  display: inline-block; overflow: hidden;
  padding: .12em .03em .18em; margin: -.12em -.03em -.18em;
}
.js .word > i { display: inline-block; font-style: normal; transform: translateY(115%); }
.js .hero.is-ready .word > i {
  animation: word-up .92s var(--ease-out) both;
  animation-delay: calc(85ms * var(--w, 0) + 200ms);
}
@keyframes word-up { to { transform: none; } }

.hero__lead {
  font-size: var(--fs-lead); line-height: 1.58;
  color: var(--ink-80); max-width: 40ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }

/* ---- Videokarte ------------------------------------------------------ */
.hero__figure { display: grid; gap: var(--sp-sm); margin: 0; justify-self: end; width: 100%; }
.hero__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper-3);
  box-shadow: 0 1px 0 rgba(20,20,20,.05), 0 44px 74px -44px rgba(20,20,20,.45);
}
.hero__poster,
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__video { opacity: 0; transition: opacity 1s var(--ease); }
.hero__video.is-playing { opacity: 1; }
/* Feines Korn — nimmt dem Video das "Stock-Footage"-Glatte */
.hero__grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero__credit {
  font: 400 var(--fs-label)/1.5 var(--font-mono);
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-45); text-align: right;
}

/* Hero-Einblendung beim Laden.
   Der Startzustand gilt nur mit aktivem JS (html.js) — ohne JS ist der
   Inhalt sofort sichtbar statt dauerhaft auf opacity:0 zu hängen. */
.js .hero [data-enter] { opacity: 0; transform: translateY(18px); }
.js .hero.is-ready [data-enter] {
  animation: enter-up .82s var(--ease-out) forwards;
  animation-delay: calc(90ms * var(--i, 0));
}
@keyframes enter-up { to { opacity: 1; transform: none; } }

/* Kompakter Seitenkopf für Unterseiten */
.pagehead {
  padding-top: clamp(8rem, 6rem + 6vw, 11rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.pagehead__inner { display: grid; gap: var(--sp-lg); }
.pagehead h1 { font-size: var(--fs-h1); max-width: 22ch; }
.pagehead .lead { max-width: 52ch; }
.breadcrumb {
  display: flex; align-items: center; gap: .6em; flex-wrap: wrap;
  font: 400 var(--fs-label)/1.4 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-45);
}
.breadcrumb a { position: relative; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }
/* Trefferfläche auf 44px vergrößern, ohne die kompakte Optik zu verändern */
.breadcrumb a::after { content: ""; position: absolute; inset: -14px -8px; }
.breadcrumb [aria-current] { color: var(--ink); }

/* ---------- 9. Säulen-Raster (Ziele / Förderung / Zusammenarbeit) ------- */
.pillars {
  display: grid; gap: var(--sp-xl) clamp(1.5rem, .5rem + 2.6vw, 3.5rem);
}
@media (min-width: 46rem)  { .pillars { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 68rem)  { .pillars { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.pillar { display: grid; gap: var(--sp-md); align-content: start; padding-top: var(--sp-lg); }
.pillar__rule { position: relative; height: 2px; background: var(--rule); overflow: hidden; }
.pillar__rule::after {
  content: ""; position: absolute; inset: 0;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .58s var(--ease-out);
}
.pillar.is-in .pillar__rule::after { transform: scaleX(1); }
.pillar--a { color: var(--yellow); }
.pillar--b { color: var(--red); }
.pillar--c { color: var(--green); }

.pillar__mark { margin-top: var(--sp-xs); transition: transform var(--dur) var(--ease); }
.pillar:hover .pillar__mark { transform: translateY(-3px) rotate(-4deg); }
.pillar h3 { color: var(--ink); }
.pillar p { color: var(--ink-80); }

/* ---------- 10. Projektkarten ------------------------------------------ */
.projects { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 62rem) {
  /* Gleich breite Spalten -> beide Karten immer gleich groß, unabhängig
     vom Inhalt. Vorher 1.18fr/1fr für eine "Feature"-Karte, hier aber
     zwei gleichrangige Veranstaltungen. */
  .projects--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}

.project {
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--sp-lg);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, .8rem + 1.4vw, 2rem);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.project:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.section--paper2 .project { background: var(--paper); }

.project__art {
  position: relative; overflow: hidden;
  border-radius: calc(var(--r-lg) - 6px);
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
}
.project__art :is(svg, img) {
  width: 100%; height: 100%; display: block; object-fit: cover;
}
.project__body { display: grid; gap: var(--sp-sm); }
.project__meta {
  display: flex; flex-wrap: wrap; gap: .4rem var(--sp-md);
  font: 400 var(--fs-small)/1.5 var(--font-mono);
  color: var(--ink-60);
  font-variant-numeric: tabular-nums;
}
.project__meta span { display: inline-flex; align-items: center; gap: .45em; }
.project__meta b { font-weight: 500; color: var(--ink); }
.project p { color: var(--ink-80); }
.project__foot { display: flex; flex-wrap: wrap; gap: var(--sp-md); align-items: center; }

.badge {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .35rem .75rem;
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
  font: 500 .6875rem/1.4 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
}
.badge--yellow { background: var(--yellow); color: var(--ink); }
.badge--green  { background: var(--green-ink); color: var(--paper); }
.badge--soft   { background: var(--paper-3); color: var(--ink-80); }

/* ---------- 11. Fakten / Verein ---------------------------------------- */
.about { display: grid; gap: clamp(2rem, 1rem + 3.5vw, 4.5rem); }
@media (min-width: 62rem) { .about { grid-template-columns: 1fr 1.1fr; } }

.facts { display: grid; gap: 0; margin: 0; }
.facts__row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-md);
  align-items: baseline;
  padding-block: var(--sp-md);
  border-top: 1px solid var(--rule);
}
.facts__row:last-child { border-bottom: 1px solid var(--rule); }
.facts dt {
  font: 400 var(--fs-label)/1.4 var(--font-mono);
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-45);
}
.facts dd {
  margin: 0; text-align: right;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem);
  font-variant-numeric: tabular-nums;
}

.pullquote {
  margin: 0; padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 2px solid var(--yellow);
}
.pullquote p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.85rem);
  line-height: 1.34; letter-spacing: -.014em;
}
.pullquote footer {
  margin-top: var(--sp-md);
  font: 400 var(--fs-label)/1.4 var(--font-mono);
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-45);
}

/* ---------- 12. CTA-Band ---------------------------------------------- */
.cta-band {
  background: var(--yellow); color: var(--ink);
  padding-block: clamp(3.5rem, 2.5rem + 4.5vw, 7rem);
  position: relative; overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 88% 8%, rgba(255,255,255,.42), transparent 58%);
}
.cta-band__inner { position: relative; display: grid; gap: var(--sp-xl); }
@media (min-width: 62rem) {
  .cta-band__inner { grid-template-columns: 1.25fr 1fr; align-items: center; gap: var(--sp-4xl); }
}
.cta-band h2 { max-width: 24ch; }
.cta-band p { color: rgba(20,20,20,.78); max-width: 42ch; }
.cta-band .label { color: rgba(20,20,20,.72); } /* 5.4:1 auf Gelb */
.cta-band .label__num { color: var(--ink); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.cta-band .btn--ghost { --btn-bd: rgba(20,20,20,.34); }
.cta-band .btn--ghost:hover { --btn-bd: var(--ink); --btn-bg: rgba(20,20,20,.07); }

.contact-card {
  background: rgba(20, 20, 20, .055);
  border: 1px solid rgba(20, 20, 20, .13);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, .9rem + 1.2vw, 2rem);
  display: grid; gap: var(--sp-md);
}
.contact-card dl { display: grid; gap: var(--sp-md); margin: 0; }
.contact-card dt {
  font: 400 var(--fs-label)/1.4 var(--font-mono);
  letter-spacing: .15em; text-transform: uppercase; color: rgba(20,20,20,.72);
}
.contact-card dd { margin: 0; font-size: 1.0625rem; line-height: 1.5; }
.contact-card a {
  display: inline-block; padding-block: .62rem; /* Touch-Ziel >= 44px */
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}

/* ---------- 13. Footer ------------------------------------------------ */
.footer {
  background: var(--ink); color: rgba(251, 248, 242, .78);
  padding-block: clamp(3rem, 2rem + 3.5vw, 5rem) var(--sp-xl);
}
.footer a:hover { color: var(--paper); }
.footer__grid {
  display: grid; gap: var(--sp-2xl);
  padding-bottom: var(--sp-2xl);
  border-bottom: 1px solid rgba(251, 248, 242, .14);
}
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 68rem) { .footer__grid { grid-template-columns: 1.8fr 1fr 1fr 1fr; } }

.footer__logo { height: 3.25rem; width: auto; margin-bottom: var(--sp-md); }
.footer__claim {
  font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.5;
  color: rgba(251, 248, 242, .62); max-width: 26ch;
}
.footer__col h2 {
  font: 500 var(--fs-label)/1.4 var(--font-mono);
  letter-spacing: .17em; text-transform: uppercase;
  color: rgba(251, 248, 242, .5);
  margin-bottom: var(--sp-md);
}
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.footer__list a, .footer__list span {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-size: 1.0625rem; line-height: 1.4;
  transition: color var(--dur-fast) var(--ease);
}
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-lg);
  justify-content: space-between; align-items: center;
  padding-top: var(--sp-lg);
  font: 400 var(--fs-small)/1.6 var(--font-mono);
  color: rgba(251, 248, 242, .5);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-lg); }
.footer__bottom nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
}

/* ---------- 14. Rechtsdokumente (Satzung etc.) ------------------------ */
.doc { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 68rem) { .doc { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--sp-4xl); } }

.doc__toc { align-self: start; }
@media (min-width: 68rem) { .doc__toc { position: sticky; top: 7.5rem; } }
.doc__toc h2 {
  font: 500 var(--fs-label)/1.4 var(--font-mono);
  letter-spacing: .17em; text-transform: uppercase; color: var(--ink-45);
  margin-bottom: var(--sp-md);
}
.doc__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: p; }
.doc__toc li { border-top: 1px solid var(--rule); }
.doc__toc li:last-child { border-bottom: 1px solid var(--rule); }
.doc__toc a {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: .5rem; align-items: baseline;
  min-height: 2.75rem; padding-block: .55rem;
  font-size: 1rem; line-height: 1.4; color: var(--ink-60);
  transition: color var(--dur-fast) var(--ease);
}
.doc__toc a:hover { color: var(--ink); }
.doc__toc a::before {
  content: "§ " counter(p); counter-increment: p;
  font: 400 .75rem/1.6 var(--font-mono); color: var(--ink-45);
  font-variant-numeric: tabular-nums;
}

.doc__body { max-width: 46rem; }
.doc__art { display: grid; gap: var(--sp-lg); }

.par { padding-block: clamp(1.5rem, 1rem + 1.4vw, 2.5rem); border-top: 1px solid var(--rule); }
.par:first-child { border-top: 0; padding-top: 0; }
.par__num {
  font: 500 var(--fs-label)/1 var(--font-mono);
  letter-spacing: .18em; color: var(--ink-45);
  display: block; margin-bottom: var(--sp-xs);
  font-variant-numeric: tabular-nums;
}
.par h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-md); }
.par > :is(p, ol, ul) + :is(p, ol, ul) { margin-top: var(--sp-md); }
.par ol, .par ul { padding-left: 1.35rem; }
.par li + li { margin-top: .5rem; }
.par li::marker { color: var(--ink-45); font-family: var(--font-mono); font-size: .85em; }
.par p, .par li { color: var(--ink-80); }

.signature {
  margin-top: var(--sp-2xl); padding-top: var(--sp-lg);
  border-top: 1px solid var(--rule);
}
.signature__names {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-sm) var(--sp-lg); margin-top: var(--sp-md);
  list-style: none; padding: 0;
}
.signature__names li {
  padding-top: var(--sp-xs); border-top: 1px solid var(--rule);
  font-size: 1.0625rem;
}

.callout {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--yellow);
  border-radius: var(--r-sm);
  padding: var(--sp-lg);
  display: grid; gap: var(--sp-xs);
}
.callout--todo { border-left-color: var(--red); }
.callout__title {
  font: 500 var(--fs-label)/1.4 var(--font-mono);
  letter-spacing: .15em; text-transform: uppercase;
}
.callout p, .callout li { font-size: 1.0625rem; color: var(--ink-80); }

.todo {
  background: rgba(237, 28, 36, .07);
  border-radius: var(--r-sm);
  padding: .05em .4em;
  font-family: var(--font-mono); font-size: .875em;
  color: var(--red-ink);
  /* Kein nowrap: lange Platzhaltertexte muessen umbrechen, sonst entsteht
     auf schmalen Viewports horizontaler Scroll. */
  overflow-wrap: anywhere;
}

/* Download-Kachel */
.download {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.download:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.download__icon { flex: none; width: 2.5rem; height: 2.5rem; color: var(--red); }
.download__text { display: grid; gap: .15rem; }
.download__text strong { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; }
.download__text span { font: 400 var(--fs-small)/1.4 var(--font-mono); color: var(--ink-45); }

/* ---------- 15. Scroll-Reveal ----------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(22px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .78s var(--ease-out), transform .78s var(--ease-out);
  transition-delay: calc(70ms * var(--i, 0));
}

/* ---------- 16. Reduced Motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal], .js .hero [data-enter], .menu__link { opacity: 1 !important; transform: none !important; }
  .pillar__rule::after { transform: scaleX(1) !important; }

  /* Hero: keine Rotation, keine Maskenaufzüge. Alle drei Zeilen stehen
     gleichwertig in vollem Kontrast, der Bogen bleibt statisch sichtbar. */
  .js .word > i { transform: none !important; }
  .js .hero__claim[data-kinetic] .claim__line,
  .js .hero__claim[data-kinetic] .claim__line.is-active {
    opacity: 1 !important;
    font-variation-settings: "wght" 500 !important;
  }
  .claim__swash path { stroke-dashoffset: 0 !important; }
}

/* ---------- 17. Print ------------------------------------------------- */
@media print {
  .header, .menu, .hero__media, .hero__scroll, .cta-band__actions, .burger, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { min-height: auto; background: #fff; color: #000; padding-top: 0; }
  .hero__inner, .hero__claim-line, .hero__lead { color: #000 !important; text-shadow: none !important; }
  .footer { background: #fff; color: #000; }
  .section, .pagehead { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}