/* Richtung 1: Naht und Faden
   Fraunces (Überschriften) + Atkinson Hyperlegible Next (Text), alles lokal */

@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-latin-opsz-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Next";
  src: url("assets/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Next";
  src: url("assets/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --orange: #ff9900;
  --orange-tief: #a34f00;   /* Linkfarbe auf Weiß, 5,4:1 */
  --garn: #1c2a5b;          /* Indigo wie ein dunkler Nähfaden, Textfarbe */
  --garn-hell: #44528a;
  --leinen: #fdf8f1;
  /* --weiss: alle hellen FLÄCHEN (Seite, Menüstreifen, Felder) in hellem Beige statt reinem Weiß.
     --beige: helle SCHRIFT und Nähte auf Indigo und Orange, wieder reines Weiß.
     --creme: nur die Füllwörter der Hero-Überschrift. */
  --weiss: #fef6e8;
  --beige: #ffffff;
  /* Einheitliche Größe für das Knopf-Zeichen aus dem Logo (Seitenverhältnis 259 zu 212) */
  --zeichen-b: 2.6rem;
  --zeichen-h: calc(var(--zeichen-b) * 212 / 259);
  /* Knopf mit Faden aus dem Logo-Etikett, als eingebettete Maske (funktioniert auch lokal per Doppelklick) */
  --zeichen-knopf: url("data:image/webp;base64,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");
  --creme: #fef6e8;
  --rand: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --breite: 78rem;
  --radius-gross: 1.25rem;
  --schrift-titel: "Fraunces", "Georgia", serif;
  --schrift-text: "Atkinson Next", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--garn);
  font-family: var(--schrift-text);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.6;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
figure { margin: 0; }

:focus-visible {
  outline: 3px solid var(--garn);
  outline-offset: 3px;
  border-radius: 4px;
}

.sprung {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--garn); color: var(--beige);
  padding: 0.75rem 1rem; border-radius: 0.5rem;
  text-decoration: none; font-weight: 700;
}
.sprung:focus { top: 1rem; }

/* ---------- Kopf ----------
   Das Logo wird größer und hängt nach unten über den Kopf hinaus. Seine untere Doppellinie
   (dünn 3/960, Abstand, dick 8/960 der Logobreite; Unterkante bei 297/960) läuft als Linie des
   Menüstreifens über die ganze Breite weiter. Das Etikett „daheim in SW“ hängt darunter. */
:root {
  --logo-b: 220px;
  --logo-oben: 0.7rem;
  /* Kante Weiß/Orange liegt genau an der Oberkante der dicken unteren Logo-Linie (Zeilen 289 bis 297 von 960).
     Die dicke Linie und die gestrichelte Naht liegen damit beide direkt unter der Kante auf dem Orange. */
  --kopf-h: calc(var(--logo-oben) + var(--logo-b) * 289 / 960);
  --linie-h: calc(var(--logo-b) * 8 / 960);
  --logo-unten: calc(var(--logo-b) * 132 / 960);   /* Überhang des Etiketts */
}
@media (min-width: 65em) { :root { --logo-b: 250px; } }
@media (min-width: 80em) { :root { --logo-b: 300px; } }
html { scroll-padding-top: calc(var(--kopf-h) + var(--logo-unten) + 1rem); }
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--weiss);
}
.kopf {
  /* Logo-Kante links: dieselbe Kante wie der Inhalt darunter (Seitenrand oder zentrierte Inhaltsbreite) */
  --lx: max(var(--rand), (100% - var(--breite)) / 2);
}
/* Gestrichelte Naht links und rechts vom Logo. Raster: 9 px Strich, 7 px Lücke.
   Links endet die Naht mit einem ganzen Strich genau eine Lücke vor dem Logo,
   rechts beginnt sie mit einem ganzen Strich genau eine Lücke nach dem Logo. */
.kopf::before,
.kopf::after {
  content: ""; position: absolute; top: 100%; height: var(--linie-h); z-index: 2; /* gleiche Höhe und Lage wie die dicke Logo-Linie */
  background-size: 16px 100%; background-repeat: repeat-x;
  pointer-events: none;
}
.kopf::before {
  left: 0; width: max(0px, calc(var(--lx) - 7px));
  background-image: linear-gradient(90deg, transparent 0 7px, #000 7px 16px); /* schwarz wie das Logo */
  background-position: right top;
}
.kopf::after {
  left: calc(var(--lx) + var(--logo-b) + 7px); right: 0;
  background-image: linear-gradient(90deg, #000 0 9px, transparent 9px 16px); /* schwarz wie das Logo */
  background-position: left top;
}
.kopf__innen {
  position: relative; z-index: 1;
  /* Inhaltsbreite plus Seitenrand, damit Logo und Menü genau auf der Kante des Inhalts darunter stehen */
  max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto;
  height: var(--kopf-h);
  padding: var(--logo-oben) var(--rand) calc(var(--logo-b) * 8 / 960);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.kopf__logo {
  display: block; flex-shrink: 0; align-self: flex-start;
  width: var(--logo-b); height: calc(var(--logo-b) * 289 / 960);
  position: relative; z-index: 3; /* Etikett liegt auch über dem aufgeklappten Menü */
}
.kopf__logo img { width: 100%; height: auto; max-width: none; }
.kopf__logo:focus-visible { outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  /* Die Naht läuft beim Laden vom Logo aus nach links und rechts */
  .kopf::before { animation: naht-links 1100ms 250ms cubic-bezier(0.65, 0, 0.35, 1) backwards; }
  .kopf::after { animation: naht-rechts 1100ms 250ms cubic-bezier(0.65, 0, 0.35, 1) backwards; }
  @keyframes naht-links { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
  @keyframes naht-rechts { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
}

.kopf__menue { display: none; }
.nav__liste { list-style: none; margin: 0; padding: 0; }
.nav__liste a { display: block; text-decoration: none; }
.nav__insta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; color: var(--garn);
}

/* Handy und Tablet (bis 1039 px): Logo links, Menü-Symbol rechts, wie auf dem Desktop
   mit der Naht links und rechts vom Logo. Orange beginnt weiter an der Oberkante der dicken Logo-Linie.
   Das Symbol ist so hoch wie der Schriftzug „INTERKULT e.V.“ (Zeilen 147 bis 215 von 960),
   die Striche sind so stark wie die dicke Logo-Linie (8 von 960). */
@media (max-width: 64.99em) {
  :root { --logo-b: min(72vw, 280px); --logo-oben: 1rem; } /* etwas mehr Luft über dem Ornament */
  .kopf {
    --m-h: calc(var(--logo-b) * 69 / 960);   /* Höhe Schriftzug */
    --m-s: calc(var(--logo-b) * 8 / 960);    /* Stärke dicke Linie */
    --m-b: calc(var(--m-h) * 1.3);           /* Breite der Striche */
  }
  .kopf__menue {
    display: grid; place-items: center; flex-shrink: 0; align-self: flex-start;
    width: 44px; height: 44px; padding: 0; /* Klickfläche 44 × 44 px */
    /* vertikal mittig zum Schriftzug (Mitte bei Zeile 181 von 960) */
    margin-top: calc(var(--logo-b) * 181 / 960 - 22px);
    /* die sichtbaren Striche enden genau am Seitenrand, gleicher Abstand wie das Logo links */
    margin-right: calc((var(--m-b) - 44px) / 2);
    background: none; border: 0; border-radius: 8px;
    color: #000; /* schwarz wie das Logo */
    cursor: pointer;
  }
  .kopf__menue:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
  .kopf__menue-striche { position: relative; display: block; width: var(--m-b); height: var(--m-h); }
  .kopf__menue-striche i {
    position: absolute; left: 0; right: 0; height: var(--m-s);
    border-radius: var(--m-s); background: currentColor;
    transition: transform 220ms var(--ease-out), opacity 160ms ease;
  }
  .kopf__menue-striche i:nth-child(1) { top: 0; }
  .kopf__menue-striche i:nth-child(2) { top: calc(50% - var(--m-s) / 2); }
  .kopf__menue-striche i:nth-child(3) { bottom: 0; }
  .kopf__menue[aria-expanded="true"] .kopf__menue-striche i:nth-child(1) { transform: translateY(calc(var(--m-h) / 2 - var(--m-s) / 2)) rotate(45deg); }
  .kopf__menue[aria-expanded="true"] .kopf__menue-striche i:nth-child(2) { opacity: 0; }
  .kopf__menue[aria-expanded="true"] .kopf__menue-striche i:nth-child(3) { transform: translateY(calc(var(--m-s) / 2 - var(--m-h) / 2)) rotate(-45deg); }

  /* Aufgeklapptes Menü: klappt unter dem Etikett nach unten auf, rechts bündig mit dem Seitenrand,
     Beige mit 3 px Indigo-Linie wie bisher */
  .nav {
    position: absolute; z-index: 59;
    top: calc(100% + var(--logo-unten) + 0.75rem); right: var(--rand);
    width: min(19rem, calc(100vw - 2 * var(--rand)));
    max-height: calc(100svh - var(--kopf-h) - var(--logo-unten) - 2rem); overflow-y: auto;
    padding: 0.75rem 1.5rem;
    background: var(--weiss); color: var(--garn);
    border: 3px solid var(--garn); border-radius: 28px;
    box-shadow: 0 14px 30px -18px rgb(28 42 91 / 0.45);
    transform-origin: 100% 0;
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.97);
    transition: opacity 200ms ease, transform 240ms var(--ease-out), visibility 0s linear 240ms;
  }
  .kopf.ist-offen .nav {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 200ms ease, transform 240ms var(--ease-out), visibility 0s;
  }
  .nav__liste { list-style: none; margin: 0; padding: 0; }
  .nav__liste a {
    display: block; padding: 0.85rem 0.25rem;
    font-family: var(--schrift-text); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.005em;
    color: var(--garn); text-decoration: none;
    border-bottom: 2px solid color-mix(in srgb, var(--garn) 14%, transparent);
  }
  .nav__liste li:last-child a { border-bottom: 0; }
  .nav__liste a[aria-current="page"] { color: var(--orange-tief); }
  .nav :focus-visible { outline-color: var(--garn); }
  .nav__insta {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-top: 0.5rem; border-radius: 50%;
    color: var(--garn);
  }
}

@media (min-width: 65em) {
  .kopf__menue { display: none; }
  .nav {
    position: static; display: flex; align-items: center; gap: 1.5rem;
    padding: 0; border: 0; background: none;
  }
  .nav__liste { display: flex; gap: 0.25rem; }
  .nav__liste a {
    font-family: var(--schrift-text); font-size: 1.0625rem; font-weight: 700;
    padding: 0.6rem clamp(0.5rem, -0.4rem + 1.4vw, 0.9rem); border: 0; border-radius: 999px;
    white-space: nowrap;
    transition: background-color 180ms ease;
  }
  .nav__liste a:hover { background: color-mix(in srgb, var(--orange) 22%, transparent); }
  .nav__liste a[aria-current="page"] { color: var(--garn); background: var(--orange); }
  .nav__insta { margin: 0; }
  .nav__insta:hover { background: color-mix(in srgb, var(--orange) 22%, transparent); }
}

/* ---------- Held ---------- */
.held {
  background: var(--orange);
  /* oben Platz für das hängende Logo-Etikett */
  padding: calc(var(--logo-unten) + clamp(1.75rem, 0.5rem + 4.5vw, 4.5rem)) var(--rand) 0;
}
.held__innen {
  max-width: var(--breite); margin: 0 auto;
  display: grid; gap: 2.5rem;
}
.held__titel {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 620;
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4.75rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  hyphens: manual;
}
/* Headline komplett in Indigo (6,4:1 auf Orange), ohne zweite Farbe und ohne Unterstreichung */
.held__titel, .stoffband { color: var(--garn); }
.held__lead {
  margin-top: 0;
  max-width: 34rem;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.5;
}
.held__knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.held__knoepfe .knopf { min-height: 52px; padding-inline: 1.6rem; font-size: 1.0625rem; }
.held__bild {
  position: relative;
  margin-bottom: -4rem;
  padding: 12px;
}
.held__bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 60%;
  border-radius: calc(var(--radius-gross) - 6px);
}
.naht-rahmen {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.naht-rahmen rect {
  width: calc(100% - 3px); height: calc(100% - 3px);
  fill: none;
  stroke: var(--garn);
  stroke-width: 2.5;
  stroke-dasharray: 9 7;
  stroke-linecap: round;
}

/* Tablet: Titel über die volle Breite, darunter Text, dann Foto */
@media (min-width: 48em) {
  .held__innen { row-gap: 2.75rem; }
}
/* Desktop: Titel als breites Band über alles, darunter links Einleitung und Knöpfe,
   rechts das Foto mit Naht, das nach unten aus dem orangen Feld herausragt */
@media (min-width: 64em) {
  .held { padding-bottom: 0; }
  .held__innen {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 3rem);
    row-gap: clamp(2.5rem, 1rem + 2.5vw, 3.75rem);
    align-items: center;
  }
  .held__titel { grid-column: 1 / -1; max-width: 26ch; }
  .held__text { grid-column: 1 / 6; padding-bottom: 6rem; }
  .held__bild { grid-column: 6 / -1; margin-bottom: -6rem; }
  .held__bild img { aspect-ratio: 16 / 10; object-position: 50% 62%; }
}
@media (min-width: 90em) {
  .held__titel { max-width: 30ch; }
}

/* ---------- Ziele ---------- */
.ziele {
  padding: clamp(6rem, 4rem + 8vw, 11rem) var(--rand) clamp(3rem, 2rem + 4vw, 6rem);
}
.ziele__innen {
  max-width: var(--breite); margin: 0 auto;
  display: grid; gap: 1.5rem;
}
.ziele__einleitung {
  font-family: var(--schrift-titel);
  font-size: clamp(1.6rem, 0.6rem + 2vw, 2.4rem); /* kleiner, damit der Satz auf dem Desktop in zwei Zeilen passt */
  font-weight: 500;
  line-height: 1.15;
}
.ziele__liste {
  list-style: none; margin: 0; padding: 0;
  counter-reset: none;
}
.ziele__liste li {
  position: relative;
  padding: 1.5rem 0 1.5rem calc(var(--zeichen-b) + 1rem);
  border-top: 2px dashed color-mix(in srgb, var(--garn) 30%, transparent);
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.4rem);
  line-height: 1.5;
  max-width: 44rem;
}
.ziele__liste li:last-child { border-bottom: 2px dashed color-mix(in srgb, var(--garn) 30%, transparent); }
.ziele__liste li::before {
  /* Knopf mit Faden aus dem Logo-Etikett „daheim in SW“ */
  content: "";
  position: absolute; left: 0; top: calc(1.5rem + 0.75em - var(--zeichen-h) / 2);
  width: var(--zeichen-b); height: var(--zeichen-h);
  -webkit-mask: var(--zeichen-knopf) center / contain no-repeat;
          mask: var(--zeichen-knopf) center / contain no-repeat;
  background: var(--garn);
  box-shadow: none; border-radius: 0;
}
.ziele__liste strong {
  font-family: var(--schrift-titel);
  font-weight: 650;
  font-size: 1.35em;
  line-height: 1;
  white-space: nowrap;
}
/* Orange gestrichelte Naht unter dem Text: Schlüsselwörter der Ziele und Überschriften der Angebote und Projekte.
   oben: helle Abdeckung, die beim Einblenden zurückweicht; unten: gestrichelte Naht.
   clone: bei mehrzeiligen Überschriften liegt die Naht unter jeder Zeile. */
.ziele__liste strong, .naht-text {
  background-image: linear-gradient(var(--weiss), var(--weiss)), linear-gradient(90deg, var(--orange) 0 60%, transparent 60%);
  background-size: 0% 4px, 14px 4px;
  background-repeat: no-repeat, repeat-x;
  background-position: 100% 100%, 0 100%;
  padding-bottom: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ziele__liste a {
  color: var(--orange-tief);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.ziele__liste a:hover { color: var(--garn); }

@media (min-width: 64em) {
  .ziele__innen { grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start; }
  .ziele__einleitung { position: sticky; top: 8rem; padding-top: 1.25rem; }
}

/* Naht zwischen den Abschnitten */
.saum {
  height: 3px;
  margin: 0 var(--rand);
  background-image: linear-gradient(90deg, var(--garn) 0 55%, transparent 55%);
  background-size: 16px 3px;
  opacity: 0.55;
}

/* ---------- Förderung ---------- */
.foerderung {
  position: relative;
  padding: clamp(3rem, 2rem + 4vw, 6rem) 0 0;
}
.foerderung__bild { overflow: hidden; }
.foerderung__bild img {
  width: 100%;
  height: clamp(18rem, 10rem + 30vw, 40rem);
  object-fit: cover;
  object-position: 50% 50%;
}
.foerderung__karte {
  position: relative;
  margin: -3rem var(--rand) 0;
  padding: 1.75rem 1.5rem;
  background: var(--orange); /* gelb-orange Karte, Indigo-Schrift 6,4:1 */
  border-radius: var(--radius-gross);
  /* gleiche weiße, gestrichelte Innennaht wie der blaue Kasten „Werden Sie Mitglied.“ */
  outline: 2px dashed color-mix(in srgb, var(--beige) 75%, transparent);
  outline-offset: -10px;
  max-width: 40rem;
}
/* Deutschkurs-Karte: Indigo auf Orange (6,4:1, WCAG AA) statt Weiß (2,1:1) */
.foerderung__karte { color: var(--garn); }
.karte__titel {
  margin: 0 0 0.75rem;
  font-family: var(--schrift-titel); font-weight: 620;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.1;
}
.karte__zeile { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5; }
.karte__zeile + .karte__zeile { margin-top: 0.3rem; }
.karte__knopf { margin-top: 1.4rem; }

@media (min-width: 64em) {
  /* Karte unter dem Bild statt darauf, sie ragt nur in den unteren Rand.
     So bleiben Blume und Zopf in der Bildmitte frei. */
  .foerderung__karte {
    margin: -4.5rem max(var(--rand), calc((100vw - var(--breite)) / 2)) 0 auto;
    padding: 2.25rem 2.5rem;
  }
}

/* ---------- Angebote 2026 ---------- */
.angebote { padding: clamp(5rem, 3rem + 6vw, 9rem) var(--rand) 0; }
.angebote__innen { max-width: var(--breite); margin: 0 auto; }
.angebote__raster { display: grid; gap: 1.25rem; }
.angebot {
  display: grid; align-content: start; gap: 0.75rem;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border: 2px dashed color-mix(in srgb, var(--garn) 45%, transparent);
  border-radius: var(--radius-gross);
}
/* Foto (später) sitzt oben im Block, randlos innerhalb der Naht */
.angebot__bild { margin: calc(-1 * clamp(1.5rem, 1rem + 1.5vw, 2.25rem) + 8px) calc(-1 * clamp(1.5rem, 1rem + 1.5vw, 2.25rem) + 8px) 0.5rem; }
.angebot__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: calc(var(--radius-gross) - 8px); }
.angebot__titel {
  margin: 0;
  font-family: var(--schrift-titel); font-weight: 600;
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 2rem); line-height: 1.15;
  text-wrap: balance;
}
.angebot--gross .angebot__titel { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); }
.angebot p { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem); line-height: 1.6; }
.angebote__knopf { margin-top: 1.75rem; }
@media (min-width: 48em) {
  .angebote__raster { grid-template-columns: 1.4fr 1fr; }
  .angebot--gross { grid-row: span 2; }
}

/* ---------- Mitglied und Demokratie leben ---------- */
.paar { padding: clamp(4rem, 3rem + 6vw, 9rem) var(--rand) clamp(3rem, 2rem + 4vw, 6rem); }
.paar__innen {
  max-width: var(--breite); margin: 0 auto;
  display: grid; gap: 3rem;
}
.etikett {
  background: var(--garn);
  color: var(--beige);
  border-radius: var(--radius-gross);
  padding: 10px;
}
.etikett__naht {
  border: 2px dashed color-mix(in srgb, var(--beige) 75%, transparent);
  border-radius: calc(var(--radius-gross) - 6px);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.etikett__titel {
  margin: 0 0 1.5rem;
  font-family: var(--schrift-titel);
  font-weight: 560;
  font-size: clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
  line-height: 1.05;
}
.etikett__text { margin: 2rem 0 1rem; }
.etikett__knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 48px; padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-weight: 700; text-decoration: none; line-height: 1.2;
  transition: transform 160ms var(--ease-out), background-color 180ms ease;
}
.knopf:active { transform: scale(0.97); }
.knopf--orange { background: var(--orange); color: var(--garn); }
.knopf--garn { background: var(--garn); color: var(--beige); }
.knopf--garn:hover { background: var(--garn-hell); }
.knopf--linie { background: transparent; color: var(--garn); box-shadow: inset 0 0 0 3px var(--garn); } /* 3 px wie der Menü-Reiter */
.knopf--linie:hover { background: color-mix(in srgb, var(--garn) 10%, transparent); }
.knopf--orange:hover { background: #ffad33; }
.knopf--hell {
  min-width: 8rem;
  background: transparent; color: var(--beige);
  box-shadow: inset 0 0 0 3px var(--beige);
}
.knopf--hell:hover { background: color-mix(in srgb, var(--beige) 14%, transparent); }
.etikett :focus-visible { outline-color: var(--orange); }

.demokratie { align-self: center; max-width: 34rem; }
.demokratie__logo { width: 220px; margin-bottom: 1.25rem; }
.demokratie a {
  color: var(--orange-tief); font-weight: 700;
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.demokratie a:hover { color: var(--garn); }

@media (min-width: 48em) {
  .paar__innen { grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 6rem); }
}

/* ---------- Förderer ---------- */
.foerderer {
  padding: 2.5rem var(--rand);
  background-image: linear-gradient(90deg, var(--garn) 0 55%, transparent 55%);
  background-size: 16px 3px; background-repeat: repeat-x; background-position: top left;
}
.foerderer__innen {
  max-width: var(--breite); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 2rem clamp(2rem, 6vw, 5rem);
}
/* drei Logos mit ähnlicher optischer Höhe; Demokratie leben höchstens 150 px breit, damit es auf 2x-Displays scharf bleibt */
.foerderer__logo { width: auto; max-width: 100%; }
.foerderer__logo--stmas { height: 70px; }
.foerderer__logo--dl { height: 52px; }
.foerderer__logo--fem { height: 34px; }
.foerderer__link { display: inline-block; border-radius: 6px; }
/* Förderhinweis Bund wie im Flyer: oben die Satzteile, darunter die Logos nebeneinander.
   Größenverhältnis der beiden Logos wie im Flyer (Demokratie leben 90 zu 262 der Ministeriumshöhe). */
.foerderer__bund {
  display: grid; grid-template-columns: auto auto; align-items: center;
  gap: 0.6rem clamp(1.5rem, 3vw, 2.5rem);
}
.foerderer__satz { margin: 0; font-size: 0.875rem; font-weight: 700; line-height: 1.3; color: var(--garn); align-self: end; }
.foerderer__bmbf { height: 84px; width: auto; }
.foerderer__dl { height: 29px; width: auto; display: block; }
@media (max-width: 47.99em) {
  /* Handy: untereinander, Satz bleibt in der richtigen Reihenfolge */
  .foerderer__bund { grid-template-columns: auto; justify-items: center; text-align: center; }
  .foerderer__bund .foerderer__satz:nth-of-type(2) { order: 3; margin-top: 0.6rem; }
  .foerderer__bmbf { order: 2; }
  .foerderer__bund .foerderer__link { order: 4; }
}
@media (max-width: 47.99em) {
  .foerderer__innen { justify-content: center; gap: 1.75rem 2.5rem; }
}

/* ---------- Fuß ----------
   Klassisch und flach: vier gleich breite Spalten nebeneinander
   (Logo, Anschrift, Seiten, Rechtliches mit Instagram). */
.fuss {
  background: var(--garn);
  color: var(--beige);
  padding: clamp(2.25rem, 1.5rem + 2vw, 3rem) var(--rand);
  font-size: 0.9375rem;
}
.fuss__innen {
  max-width: var(--breite); margin: 0 auto;
  display: grid; gap: 1.75rem;
}
.fuss a { color: var(--beige); text-decoration: none; }
.fuss a:hover { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss__logo { width: min(100%, 300px); }
.fuss__spalte { font-style: normal; display: grid; align-content: start; }
/* gleiche Zeilenhöhe in allen Spalten, damit alles exakt nebeneinander steht */
.fuss__spalte span, .fuss__spalte li { display: block; line-height: 1.9; }
.ohne-umbruch { white-space: nowrap; }
.fuss__insta { display: inline-flex; align-items: center; gap: 0.4rem; }
.fuss__insta svg { flex-shrink: 0; }
.fuss :focus-visible { outline-color: var(--orange); }
/* Abschlusszeile mit der Agenturnennung, schmal unter den Spalten */
.fuss__abschluss {
  max-width: var(--breite); margin: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) auto 0; padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--beige) 25%, transparent);
  font-size: 0.8125rem; line-height: 1.6;
}
@media (max-width: 47.99em) { .fuss__abschluss { text-align: center; } }

@media (min-width: 48em) {
  .fuss__innen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}
/* Desktop: Logo und Anschrift links bündig, die beiden Linkspalten rechts bündig,
   die äußeren Spalten schließen genau mit dem Inhaltsrand ab */
@media (min-width: 64em) {
  .fuss__innen {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    align-items: start;
  }
  .fuss__logo { width: 280px; }
  .fuss__spalte--rechts { text-align: right; }
  .fuss__spalte--rechts:first-of-type { max-width: 17rem; }
}
/* Handy: alles mittig und kompakt */
@media (max-width: 47.99em) {
  .fuss__innen { justify-items: center; text-align: center; }
  .fuss__spalte ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
  .foerderer__innen { justify-content: center; text-align: center; }
}

/* ---------- Bewegung ---------- */
/* Masken der Titel-Animation: Platz für Unterlängen (g, p, y) */
.zeile-mask { padding-bottom: 0.14em; margin-bottom: -0.14em; }

.anim .held__titel,
.anim .held__lead,
.anim .held__knoepfe,
.anim .naht-rahmen { visibility: hidden; animation: notfall 0s 2.5s forwards; }
@keyframes notfall { to { visibility: visible; } }

.ziele__liste strong, .naht-text { transition: background-size 700ms var(--ease-out); }
.anim .ziele__liste li:not(.ist-genaeht) strong,
.anim .naht-text:not(.ist-genaeht) { background-size: 100% 4px, 14px 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* „INTERKULT initiiert Projekte, um“ komplett in Indigo */
.ziele__einleitung, .ziele__name { color: var(--garn); }


/* Förderlogos und Partnerlogos haben weiße Flächen im Bild: auf dem beigen Grund unsichtbar machen */
.foerderer img, .demokratie__logo, .partnerlogo img, .foerderhinweis img { mix-blend-mode: multiply; }


/* Startseite: Schrift im Knopf „Mitglied werden“ im Hero im selben Beige wie die Füllwörter */
.held__knoepfe .knopf--garn { color: var(--creme); }


/* Instagram-Symbol im Menü größer (Desktop und Handy) */
.nav__insta { width: 48px; height: 48px; }
.nav__insta svg { width: 30px; height: 30px; }

/* Nur für Screenreader sichtbar */
.nur-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Externer Link in Navigation und Fuß: dezenter Pfeil */
.nav__extern { display: inline-flex; align-items: center; gap: 0.3rem; }
.extern-pfeil { flex-shrink: 0; opacity: 0.75; }

/* Hauptmenü: „Mitglied werden“ als kompakter oranger Knopf */
.nav__liste a.nav__knopf {
  background: var(--orange); color: var(--garn);
  border-radius: 999px; box-shadow: inset 0 0 0 3px var(--garn);
}
.nav__liste a.nav__knopf:hover { background: #ffad33; }
@media (min-width: 65em) {
  .nav__liste a.nav__knopf { padding: 0.6rem 1.1rem; margin-left: 0.35rem; }
  .nav__liste a.nav__knopf[aria-current="page"] { background: var(--orange); }
}
@media (max-width: 64.99em) {
  .nav__liste li:has(.nav__knopf) { padding-top: 0.75rem; }
  .nav__liste a.nav__knopf { display: inline-flex; padding: 0.7rem 1.4rem; border-bottom: 0; }
}

/* Fuß: externer Link fließt normal, Pfeil hängt am letzten Wort */
.fuss .nav__extern { display: inline; }
.fuss .extern-pfeil { display: inline; vertical-align: -0.1em; margin-left: 0.2rem; }

/* =========================================================
   Unterseiten (Richtung 1: Naht und Faden)
   ========================================================= */
.seitenkopf {
  background: var(--orange);
  padding: calc(var(--logo-unten) + clamp(1.75rem, 0.5rem + 4vw, 4rem)) var(--rand) clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
.seitenkopf__innen { max-width: var(--breite); margin: 0 auto; }
.seitenkopf__titel {
  margin: 0;
  max-width: 22ch;
  font-family: var(--schrift-titel);
  font-weight: 620;
  font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.seitenkopf__einleitung {
  margin-top: 1.25rem;
  max-width: 38rem;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.5;
}
.saum--kopf { margin: 0; opacity: 1; background-color: transparent; }

.seite { padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--rand) clamp(3.5rem, 2rem + 5vw, 7rem); }
/* Gleiche Breite wie die Startseite. Ab 64em zweispaltig wie der Block „INTERKULT initiiert Projekte, um“:
   links die Zwischenüberschrift (läuft mit), rechts Text und Bilder. */
.abschnitt { max-width: var(--breite); margin: 0 auto; }
.abschnitt > * { min-width: 0; }
.abschnitt p { hyphens: auto; }
@media (min-width: 64em) {
  .abschnitt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .abschnitt > * { grid-column: 2; }
  .seite .abschnitt > h2,
  .seite .abschnitt > .abschnitt__kopf,
  .seite .abschnitt--start > :first-child {
    grid-column: 1; grid-row: 1 / span 60;
    position: sticky; top: calc(var(--kopf-h) + var(--logo-unten) + 1.5rem);
  }
  .abschnitt > h2 + *, .abschnitt > .abschnitt__kopf + * { margin-top: 0; }
}
.abschnitt + .abschnitt {
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-top: 2px dashed color-mix(in srgb, var(--garn) 28%, transparent);
}
.abschnitt p + p,
.abschnitt p + ul,
.abschnitt ul + p { margin-top: 1em; }
.abschnitt > h2, .abschnitt__titel {
  position: relative;
  margin: 0 0 1rem;
  padding-left: calc(var(--zeichen-b) + 0.9rem);
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
  line-height: 1.1;
  text-wrap: balance;
}
.abschnitt > h2::before, .abschnitt__titel::before {
  content: "";
  position: absolute; left: 0; top: calc(0.55em - var(--zeichen-h) / 2);
  width: var(--zeichen-b); height: var(--zeichen-h);
  -webkit-mask: var(--zeichen-knopf) center / contain no-repeat;
          mask: var(--zeichen-knopf) center / contain no-repeat;
  background: var(--garn);
  box-shadow: none; border-radius: 0;
}
.abschnitt h3:not(.abschnitt__titel), .abschnitt h4 {
  margin: 2.25rem 0 0.75rem;
  font-family: var(--schrift-titel);
  font-weight: 560;
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem);
  line-height: 1.25;
}
.abschnitt a:not(.knopf) {
  color: var(--orange-tief); font-weight: 700;
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.abschnitt a:not(.knopf):hover { color: var(--garn); }
.einstieg {
  font-family: var(--schrift-titel);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.4;
}
.dachzeile { font-weight: 700; letter-spacing: 0.02em; color: var(--garn-hell); }
.unterschied { padding: 1.1rem 1.35rem; border: 2px dashed color-mix(in srgb, var(--orange) 85%, var(--garn)); border-radius: var(--radius-gross); background: color-mix(in srgb, var(--orange) 8%, var(--weiss)); }

.liste { list-style: none; margin: 1rem 0 0; padding: 0; }
.liste li { position: relative; padding: 0.55rem 0 0.55rem calc(var(--zeichen-b) + 0.9rem); border-bottom: 1px dashed color-mix(in srgb, var(--garn) 22%, transparent); }
.liste li::before {
  content: ""; position: absolute; left: 0; top: calc(0.55rem + 0.8em - var(--zeichen-h) / 2);
  width: var(--zeichen-b); height: var(--zeichen-h);
  -webkit-mask: var(--zeichen-knopf) center / contain no-repeat;
          mask: var(--zeichen-knopf) center / contain no-repeat;
  background: var(--garn);
  box-shadow: none; border-radius: 0;
}

/* Bilder mit genähtem Rahmen */
.bild, .galerie__bild, .buch__bild {
  position: relative;
  padding: 7px;
  border: 2px dashed color-mix(in srgb, var(--garn) 55%, transparent);
  border-radius: var(--radius-gross);
}
.bild img, .galerie__bild img, .buch__bild img { width: 100%; border-radius: calc(var(--radius-gross) - 8px); }
.bild { margin-top: 2rem; }
.galerie { display: grid; gap: 1rem; margin: 2rem 0 0; }
.galerie--2, .galerie--3, .galerie--4 { grid-template-columns: 1fr 1fr; }
.galerie--3 > :first-child { grid-column: 1 / -1; }
.galerie__bild img { aspect-ratio: 4 / 3; object-fit: cover; }
.galerie__link { display: block; border-radius: calc(var(--radius-gross) - 8px); }
.galerie__link:focus-visible { outline-offset: 4px; }
/* Galerie 2024: gemischte Hoch- und Querformate auf einheitliche Höhe bringen.
   Das Zertifikat (letztes Bild) wird vollständig gezeigt statt beschnitten. */
#leben-in-bayern .galerie--4 { align-items: stretch; }
#leben-in-bayern .galerie--4 .galerie__bild img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; }
#leben-in-bayern .galerie--4 .galerie__bild:last-child img { object-fit: contain; background: var(--weiss); }
#leben-in-bayern .mehr .galerie--4 .galerie__bild img { aspect-ratio: 4 / 3; }
@media (min-width: 48em) {
  .galerie--3 { grid-template-columns: repeat(3, 1fr); }
  .galerie--3 > :first-child { grid-column: auto; }
}
@media (min-width: 64em) {
  .galerie--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Biografie-Projekt: Titelbild und Download */
.buch { margin-top: 1.5rem; display: grid; gap: 1.25rem; margin-bottom: 1.75rem; }
.buch__download { margin: 0; }

/* PDF-Karte: Vorschaubild und Download */
.pdfkarte {
  margin-top: 2rem;
  display: grid; gap: 1.25rem; align-items: center;
  background: var(--garn); color: var(--beige);
  border-radius: var(--radius-gross);
  padding: 10px;
}
.pdfkarte > * { margin: 0; }
.pdfkarte__bild { display: block; padding: 1rem 1rem 0; }
.pdfkarte__bild img { border-radius: 6px; margin: 0 auto; }
.pdfkarte__knopf { padding: 0 1rem 1.25rem; }
.pdfkarte:has(.pdfkarte__knopf) { outline: 2px dashed color-mix(in srgb, var(--beige) 70%, transparent); outline-offset: -10px; }
.pdfkarte .knopf:focus-visible { outline-color: var(--orange); }
@media (min-width: 40em) {
  .pdfkarte { grid-template-columns: minmax(0, 17rem) 1fr; gap: 2rem; padding: 1.75rem; }
  .pdfkarte__bild { padding: 0; }
  .pdfkarte__knopf { padding: 0; }
}

.partnerlogo { margin-top: 2rem; }
.partnerlogo img { width: 300px; }
.partnerlogo--klein img { width: 180px; }
.foerderhinweis { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.foerderhinweis img { width: 240px; }
.foerderhinweis figcaption { max-width: 22rem; font-size: 0.9375rem; color: var(--garn-hell); }

/* Kontakt */
.kontaktkarte {
  font-style: normal;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  line-height: 1.6;
  font-family: var(--schrift-titel);
  background: var(--orange);
  border-radius: var(--radius-gross);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  outline: 2px dashed var(--garn); outline-offset: -12px;
  overflow-wrap: anywhere;
}
.kontaktkarte strong { font-weight: 650; }
.kontaktkarte a { color: var(--garn) !important; }
.kontaktkarte__zeiten { display: block; margin: 0.6em 0; padding: 0.55em 0; border-block: 1px dashed color-mix(in srgb, var(--garn) 45%, transparent); }

/* Rechtstexte: ruhiger, kleinere Überschriften */
.seite--recht .abschnitt h2 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.7rem); }
.seite--recht .abschnitt + .abschnitt { margin-top: 2.5rem; padding-top: 2rem; }
/* Gliederung der eRecht24-Texte: h3 Unterüberschrift, h4 Frage oder Zwischenzeile */
.seite--recht .abschnitt h3 { margin: 2rem 0 0.6rem; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); }
.seite--recht .abschnitt h4 { margin: 1.4rem 0 0.4rem; font-family: inherit; font-weight: 700; font-size: 1em; line-height: 1.4; }
.seite--recht .abschnitt > h2 + h3 { margin-top: 0; }
.versal { font-size: 0.9375rem; letter-spacing: 0.01em; }
.quelle { color: var(--garn-hell); }
.seite--recht .abschnitt { overflow-wrap: anywhere; }

.anim .seitenkopf__titel { visibility: hidden; animation: notfall 0s 2.5s forwards; }

/* Lange Wörter dürfen in Überschriften nie über den Rand laufen */
.seitenkopf__titel, .abschnitt h2, .abschnitt h3, .abschnitt h4 { overflow-wrap: break-word; }

.pdfkarte__bild img { width: 100%; height: auto; }

/* Aktive Seite auch im Fußbereich erkennbar */
.fuss a[aria-current="page"] { color: var(--orange); }

/* ---------- Aktionen im Text ---------- */
.aktion { margin-top: 1.5rem !important; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.aktion .knopf svg { flex-shrink: 0; }
.knopf { gap: 0.55rem; }

/* ---------- Band vor dem Fußbereich ---------- */
.aufruf { padding: 0 var(--rand) clamp(3.5rem, 2rem + 5vw, 6rem); }
.aufruf__innen {
  max-width: var(--breite); margin: 0 auto;
  background: var(--garn); color: var(--beige);
  border-radius: var(--radius-gross);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  outline: 2px dashed color-mix(in srgb, var(--beige) 75%, transparent); outline-offset: -10px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem;
}
.aufruf__titel {
  margin: 0;
  font-family: var(--schrift-titel); font-weight: 560;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); line-height: 1.05;
}
.aufruf__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.aufruf__tel {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0 0.4rem;
  color: var(--beige); font-weight: 700; text-decoration: none;
}
.aufruf__tel:hover { color: var(--orange); }
.aufruf :focus-visible { outline-color: var(--orange); }

/* ---------- Kontakt mit Formular ---------- */
.kontaktspalte { display: grid; gap: 1.5rem; align-content: start; }
.aktion--paar { margin-top: 0 !important; }
.formularbereich { display: grid; gap: 1.25rem; }
@media (max-width: 63.99em) { .formularbereich { margin-top: 2.5rem; } }
.formular {
  display: grid; gap: 1.1rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border: 2px dashed color-mix(in srgb, var(--garn) 35%, transparent);
  border-radius: var(--radius-gross);
}
.formular__titel {
  margin: 0 0 0.25rem;
  font-family: var(--schrift-titel); font-weight: 600;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); line-height: 1.1;
}
.feld { display: grid; gap: 0.35rem; }
.feld label { font-weight: 700; }
.feld__zusatz { font-weight: 400; color: var(--garn-hell); }
.feld input,
.feld textarea {
  width: 100%;
  font: inherit; color: var(--garn);
  background: var(--weiss);
  border: 2px solid color-mix(in srgb, var(--garn) 45%, transparent);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  min-height: 48px;
}
.feld textarea { resize: vertical; min-height: 9rem; }
.feld input:focus-visible,
.feld textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; border-color: var(--garn); }
.feld input:user-invalid,
.feld textarea:user-invalid { border-color: #b3261e; }
.feld--falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__hinweis { font-size: 0.9375rem; color: var(--garn-hell); }
.formular .knopf { justify-self: start; border: 0; cursor: pointer; font-family: inherit; font-size: 1.0625rem; }

/* Meldungen nach dem Absenden, gesteuert über die Adresse (#gesendet oder #fehler), ganz ohne Skript */
.meldung { display: none; border-radius: var(--radius-gross); padding: 1.1rem 1.35rem; }
.meldung:target { display: block; }
.meldung p { margin: 0; }
.meldung--ok { background: color-mix(in srgb, var(--orange) 18%, var(--weiss)); border: 2px dashed var(--garn); }
.meldung--fehler { background: #fdecea; border: 2px solid #b3261e; color: #5c1410; }
.meldung--fehler a { color: #5c1410 !important; }

/* Einstiegstext in der linken Spalte etwas kleiner, damit er neben dem Inhalt nicht zu lang wird */
@media (min-width: 64em) {
  .abschnitt--start > .einstieg { font-size: clamp(1.2rem, 0.9rem + 0.6vw, 1.45rem); }
}

/* Kontaktkarte in der schmalen linken Spalte: etwas kleiner, E-Mail-Adresse bricht nach dem @ um */
@media (min-width: 64em) {
  .kontaktkarte { font-size: clamp(1.15rem, 0.9rem + 0.55vw, 1.4rem); }
}

/* Partnerlogos nicht an den folgenden Absatz kleben */
.partnerlogo { margin-bottom: 2rem; }

/* Mitglied werden: Antragskarte über die volle Breite, Text darunter */
@media (min-width: 64em) {
  .seite .abschnitt--breit { display: block; }
  .seite .abschnitt--breit > :first-child { position: static; }
}
.abschnitt--breit .pdfkarte { margin-top: 0; }
.abschnitt--breit .einstieg { margin-top: 2rem; }
@media (min-width: 40em) {
  .abschnitt--breit .pdfkarte { grid-template-columns: minmax(0, 24rem) 1fr; gap: 3rem; padding: 2.5rem; }
}

/* „Es macht einen Unterschied,“ als kleine Überschrift im Feld */
.unterschied__titel {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1.35em;
  line-height: 1.2;
}

/* ---------- Bilder: genug Abstand zum Text ---------- */
.abschnitt .galerie,
.abschnitt .bild { margin-block: 2.5rem; }
.abschnitt .buch { margin-block: 2rem 2.5rem; }
.abschnitt .galerie:last-child,
.abschnitt .bild:last-child { margin-bottom: 0; }

/* ---------- Bilder öffnen ---------- */
.bild-oeffnen {
  display: block; width: 100%; padding: 0; margin: 0;
  border: 0; background: none; cursor: zoom-in;
  border-radius: calc(var(--radius-gross) - 8px);
  position: relative;
}
.bild-oeffnen::after {
  /* kleines Lupen-Zeichen als Hinweis */
  content: ""; position: absolute; right: 0.6rem; bottom: 0.6rem;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='%231c2a5b' stroke-width='2'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5' stroke='%231c2a5b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 1.2rem no-repeat;
  box-shadow: 0 2px 8px rgb(28 42 91 / 0.25);
  opacity: 0.92; transition: transform 180ms var(--ease-out);
}
.bild-oeffnen:hover::after { transform: scale(1.08); }
.bild-oeffnen:focus-visible { outline: 3px solid var(--garn); outline-offset: 4px; }

.lupe {
  border: 0; padding: 0; margin: auto;
  background: transparent; overflow: visible;
  max-width: 94vw; max-height: 92vh;
}
.lupe::backdrop { background: color-mix(in srgb, var(--garn) 92%, transparent); }
.lupe__bild {
  display: block; max-width: 94vw; max-height: 86vh; width: auto; height: auto;
  border-radius: 12px; box-shadow: 0 20px 60px -20px rgb(0 0 0 / 0.6);
}
.lupe__zu {
  position: fixed; top: max(1rem, env(safe-area-inset-top)); right: 1rem; z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  background: var(--orange); color: var(--garn);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.3);
}
.lupe__zu:hover { background: #ffad33; }
.lupe__zu:focus-visible { outline: 3px solid var(--weiss); outline-offset: 3px; }
html:has(.lupe[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .lupe[open] { animation: lupe-auf 220ms var(--ease-out); }
  @keyframes lupe-auf { from { opacity: 0; transform: scale(0.96); } }
}

/* Mitglied werden: Aufruf unter der Antragskarte, mittig wie eine Überschrift */
.mitmachen {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  text-align: center;
  background-image: linear-gradient(90deg, var(--garn) 0 55%, transparent 55%);
  background-size: 16px 3px; background-repeat: repeat-x; background-position: top center;
}
.mitmachen .aktion { justify-content: center; margin-top: 1.75rem !important; }

/* ---------- Projekte: Sprungleiste, Gruppen, Archiv ---------- */
.sprungleiste { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.sprungleiste a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1.1rem;
  border-radius: 999px; box-shadow: inset 0 0 0 3px var(--garn);
  color: var(--garn); font-weight: 700; text-decoration: none;
}
.sprungleiste a:hover { background: color-mix(in srgb, var(--garn) 10%, transparent); }
.projektgruppe { scroll-margin-top: calc(var(--kopf-h) + var(--logo-unten) + 1rem); }
.projektgruppe + .projektgruppe { margin-top: clamp(4rem, 3rem + 4vw, 7rem); }
.projektgruppe__titel {
  max-width: var(--breite); margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-bottom: 0.9rem;
  font-family: var(--schrift-titel); font-weight: 620;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1.05;
  background-image: linear-gradient(90deg, var(--garn) 0 55%, transparent 55%);
  background-size: 16px 3px; background-repeat: repeat-x; background-position: left bottom;
}
.abschnitt { scroll-margin-top: calc(var(--kopf-h) + var(--logo-unten) + 1rem); }
.abschnitt__kopf .abschnitt__titel { margin-bottom: 0; }
.dachzeile--jahr {
  margin: 0 0 0.4rem calc(var(--zeichen-b) + 0.9rem);
  font-family: var(--schrift-text); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--orange-tief);
}
.aktion--gruppe { max-width: var(--breite); margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0 !important; }
@media (min-width: 64em) {
  /* bündig mit der Inhaltsspalte der Abschnitte (Raster 1fr 1,9fr) */
  .aktion--gruppe { padding-left: calc((100% - clamp(2.5rem, 5vw, 5rem)) / 2.9 + clamp(2.5rem, 5vw, 5rem)); }
}

/* Aufklapp-Element „Mehr zum Projekt lesen“, ohne JavaScript bedienbar */
.mehr { margin-top: 2rem; }
.mehr > summary {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 48px; padding: 0.7rem 1.4rem;
  border-radius: 999px; box-shadow: inset 0 0 0 3px var(--garn);
  color: var(--garn); font-weight: 700; cursor: pointer; list-style: none;
}
.mehr > summary::-webkit-details-marker { display: none; }
.mehr > summary::after {
  content: ""; width: 0.6rem; height: 0.6rem;
  border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--ease-out);
}
.mehr[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.mehr > summary:hover { background: color-mix(in srgb, var(--garn) 10%, transparent); }
.mehr > summary:focus-visible { outline: 3px solid var(--garn); outline-offset: 3px; }
.mehr__inhalt { padding-top: 0.5rem; }
.foerdersatz { margin-top: 2rem !important; font-size: 0.9375rem; color: var(--garn-hell); }

/* Auswahlfeld im Formular wie die Eingabefelder */
.feld select {
  width: 100%; min-height: 48px; padding: 0.7rem 2.5rem 0.7rem 0.85rem;
  font: inherit; color: var(--garn); background-color: var(--weiss);
  border: 2px solid color-mix(in srgb, var(--garn) 45%, transparent); border-radius: 10px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--garn) 50%), linear-gradient(135deg, var(--garn) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 0.4rem 0.4rem; background-repeat: no-repeat;
}
.feld select:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; border-color: var(--garn); }

/* ---------- Online-Mitgliedsantrag ---------- */
.formular--antrag { max-width: 52rem; }
.formular__pflicht { font-size: 0.9375rem; color: var(--garn-hell); }
.formular__raster { display: grid; gap: 1.1rem 1.5rem; }
@media (min-width: 48em) {
  .formular__raster { grid-template-columns: 1fr 1fr; }
  .feld--breit { grid-column: 1 / -1; }
}
.pflicht { color: var(--orange-tief); font-weight: 700; }
.feld__hinweis { font-size: 0.9375rem; color: var(--garn-hell); }
.feld__fehler { font-size: 0.9375rem; font-weight: 700; color: #a3221a; }
.feld input[type="date"] { min-height: 48px; }
.auswahl {
  margin: 0.5rem 0 0; padding: 1.1rem 1.25rem 1.25rem;
  border: 2px solid color-mix(in srgb, var(--garn) 20%, transparent); border-radius: 12px;
  display: grid; gap: 0.6rem;
}
.auswahl legend { padding: 0 0.4rem; font-weight: 700; }
.auswahl__option, .einwilligung__label {
  display: flex; align-items: flex-start; gap: 0.75rem; min-height: 44px; padding-block: 0.35rem; cursor: pointer;
}
.auswahl__option input, .einwilligung__label input {
  flex-shrink: 0; width: 1.4rem; height: 1.4rem; margin: 0.1rem 0 0; accent-color: var(--garn);
}
.auswahl__hinweis { margin: -0.2rem 0 0.4rem 2.15rem !important; font-size: 0.9375rem; color: var(--garn-hell); }
.feld--betrag { margin-left: 2.15rem; max-width: 22rem; }
.einwilligung { display: grid; gap: 0.5rem; }
.einwilligung__label span { line-height: 1.55; }
.formular input[aria-invalid="true"], .formular select[aria-invalid="true"] { border-color: #a3221a; }
/* Mitglied werden: Aufbau wie Kontakt, nur gespiegelt. Links das Formular (breite Spalte),
   rechts die Karte mit dem PDF-Antrag (schmale Spalte, läuft mit). Auf dem Handy Formular zuerst. */
.papier .kontaktkarte { margin: 0; }
@media (max-width: 63.99em) {
  .abschnitt--antrag .formularbereich { margin-top: 0; }
  .abschnitt--antrag .papier { margin-top: 2.5rem; }
}
@media (min-width: 64em) {
  .abschnitt--antrag { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
  .seite .abschnitt--antrag > .formularbereich { grid-column: 1; grid-row: 1; position: static; }
  .seite .abschnitt--antrag > .papier {
    grid-column: 2; grid-row: 1;
    position: sticky; top: calc(var(--kopf-h) + var(--logo-unten) + 1.5rem);
  }
}
/* Danke-Seite: Hinweis zur Lastschrift nur nach Antrag mit Lastschrift (#lastschrift) */
.danke__lastschrift { display: none; }
.danke__lastschrift:target { display: block; }