/* ==========================================================================
   Ameisenverein Bern – Stylesheet
   Aufbau: 1 Fonts · 2 Tokens · 3 Basis · 4 Layout · 5 Komponenten
           6 Sektionen · 7 Unterseiten · 8 Motion · 9 Print
   ========================================================================== */

/* 1 · Fonts ---------------------------------------------------------------
   Avenir Next (CI) wird lokal genutzt (auf Apple-Geräten vorinstalliert).
   Fallback: Nunito Sans (OFL, self-hosted), metrisch angepasstes Arial
   verhindert Layout-Sprünge während des Ladens. */
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-var-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 101%;
  ascent-override: 100%;
  descent-override: 35%;
  line-gap-override: 0%;
}

/* 2 · Design Tokens ------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Farben (CI) */
  --c-white: #ffffff;
  --c-red: #8e4a5f;          /* 6.37:1 auf Weiss */
  --c-black: #000000;
  /* abgeleitet */
  --c-red-deep: #6f3649;     /* Hover/Pressed – 9.13:1 */
  --c-red-tint: #f7f0f2;     /* ruhige Flächen */
  --c-surface: #f4eaed;      /* Flächen in weissen Karten – sichtbar abgesetzt */
  --c-grey: #4d4d4d;         /* Sekundärtext – 8.45:1 */
  --c-line: #e3d8dc;         /* dekorative Linien */
  --c-line-strong: #6b6b6b;  /* Formularränder – 5.3:1 (WCAG 1.4.11) */
  --c-todo: #fff4c2;

  --focus: var(--c-black);

  /* Typografie */
  --font: "Avenir Next", "Avenir", "Nunito Sans", "Nunito Fallback", system-ui, sans-serif;
  --fs-sm: 1rem;                                          /* 16 */
  --fs-base: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);   /* 17–18 */
  --fs-md: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem);  /* 19–21 */
  --fs-lg: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);     /* 22–26 */
  --fs-xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.125rem);      /* 28–34 */
  --fs-2xl: clamp(2rem, 1.5rem + 2vw, 2.875rem);          /* 32–46 */
  --fs-3xl: clamp(2.25rem, 1.45rem + 3.2vw, 3.875rem);    /* 36–62 */

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  /* Spacing (8-px-System) */
  --s-1: 0.25rem;  /*  4 */
  --s-2: 0.5rem;   /*  8 */
  --s-3: 0.75rem;  /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-5: 1.5rem;   /* 24 */
  --s-6: 2rem;     /* 32 */
  --s-7: 3rem;     /* 48 */
  --s-8: 4rem;     /* 64 */
  --s-9: 6rem;     /* 96 */
  --s-section: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* Layout */
  --container: 77.5rem;   /* 1240 */
  --measure: 66ch;
  --gutter: clamp(1.25rem, 0.5rem + 3.5vw, 3rem);
  --header-h: 4.5rem;
  --radius-s: 4px;
  --radius-m: 8px;

  /* Naht / Ameisenstrasse */
  --stitch: repeating-linear-gradient(90deg, var(--c-red) 0 10px, transparent 10px 18px);
  --stitch-v: repeating-linear-gradient(180deg, var(--c-red) 0 10px, transparent 10px 18px);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
}

@media (max-width: 63.99em) {
  :root { --header-h: 4rem; }
}
/* Grosse Monitore: alles proportional mitwachsen lassen */
@media (min-width: 112.5em) { html { font-size: 106.25%; } }  /* ≥1800 */
@media (min-width: 150em)   { html { font-size: 118.75%; } }  /* ≥2400 */

/* 3 · Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

[hidden] { display: none !important; }

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

h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

a {
  color: var(--c-red);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}
a:hover { color: var(--c-red-deep); text-decoration-thickness: 2px; }

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

::selection { background: var(--c-red); color: var(--c-white); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--c-black);
  color: var(--c-white);
  font-weight: 600;
  border-radius: var(--radius-s);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--c-white); }

/* Platzhalter für fehlende Kundendaten – vor Livegang entfernen */
.todo {
  background: var(--c-todo);
  color: var(--c-black);
  outline: 1px dashed #8a6d00;
  padding: 0 0.25em;
  font-weight: 600;
}

/* 4 · Layout --------------------------------------------------------------- */
.container {
  /* Safe Areas (Notch im Querformat) werden mit dem Seitenrand verrechnet */
  --pad-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  width: min(100% - var(--pad-l) - var(--pad-r), var(--container));
  margin-inline: auto;
}
@supports (width: max(1px, 2px)) {
  .container { margin-left: max(var(--pad-l), (100% - var(--container)) / 2); margin-right: auto; }
}

.section { padding-block: var(--s-section); }
.section--tint { background: var(--c-red-tint); }
/* zwei weisse Sektionen hintereinander: kein doppelter Abstand */
.section:not(.section--tint, .donate) + .section:not(.section--tint, .donate) { padding-top: 0; }

.section__head { max-width: var(--measure); margin-bottom: clamp(var(--s-6), 4vw, var(--s-8)); }
.section__title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}
.section__intro {
  margin-top: var(--s-4);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--c-grey);
  text-wrap: balance;
}

.prose > * + * { margin-top: var(--s-4); }
.prose { max-width: var(--measure); }

/* 5 · Komponenten ------------------------------------------------------------ */

/* Buttons */
.btn {
  --btn-bg: var(--c-red);
  --btn-fg: var(--c-white);
  --btn-bd: var(--c-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 3rem;          /* 48px Touch-Ziel */
  padding: var(--s-3) var(--s-5);
  border: 2px solid var(--btn-bd);
  border-radius: var(--radius-s);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease,
              color var(--dur-fast) ease, transform var(--dur-fast) ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:hover { --btn-bg: var(--c-red-deep); --btn-bd: var(--c-red-deep); color: var(--btn-fg); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--c-red); }
.btn--outline:hover { --btn-bg: var(--c-red); --btn-bd: var(--c-red); --btn-fg: var(--c-white); }

.btn--light { --btn-bg: var(--c-white); --btn-fg: var(--c-red-deep); --btn-bd: var(--c-white); }
.btn--light:hover { --btn-bg: var(--c-red-tint); --btn-bd: var(--c-red-tint); --btn-fg: var(--c-red-deep); }

.btn--small { min-height: 2.75rem; padding: var(--s-2) var(--s-4); font-size: var(--fs-sm); }

.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Logo */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  color: var(--c-black);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
.brand:hover { color: var(--c-black); text-decoration: none; }
.brand__signet { width: 3.125rem; height: auto; flex: none; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.96);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) ease;
}
/* Blur liegt auf einem Pseudo-Element: backdrop-filter direkt auf dem Header
   würde ihn zum Containing Block der fixierten Mobile-Navigation machen. */
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: transparent; }
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(255 255 255 / 0.88);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
  }
}
.site-header.is-scrolled { border-bottom-color: var(--c-line); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--header-h);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  color: var(--c-black);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-s);
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: var(--s-3); right: var(--s-3); bottom: 6px;
  height: 2px;
  background: var(--stitch);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover { color: var(--c-red-deep); text-decoration: none; }
.nav__link:hover::after,
.nav__link[aria-current]::after { transform: scaleX(1); }
.nav__link[aria-current] { color: var(--c-red-deep); }

.header-actions { display: flex; align-items: center; gap: var(--s-2); }

.menu-toggle {
  display: none;
  align-items: center;
  gap: var(--s-2);
  min-width: 44px;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--c-black);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.menu-toggle__icon { position: relative; width: 22px; height: 14px; }
.menu-toggle__icon span {
  position: absolute; left: 0; right: 0;
  height: 2px; background: currentColor; border-radius: 1px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) ease;
}
.menu-toggle__icon span:nth-child(1) { top: 0; }
.menu-toggle__icon span:nth-child(2) { top: 6px; }
.menu-toggle__icon span:nth-child(3) { top: 12px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile/Tablet-Navigation */
@media (max-width: 63.99em) {
  .menu-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 49;
    padding: var(--s-5) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(var(--s-7) + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
    background: var(--c-white);
    border-top: 1px solid var(--c-line);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  }
  .nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out), visibility 0s;
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li + li { border-top: 1px solid var(--c-line); }
  .nav__link {
    display: flex;
    min-height: 3.5rem;
    padding-inline: 0;
    font-size: var(--fs-lg);
    font-weight: 600;
  }
  .nav__link::after { display: none; }
  .nav__meta { margin-top: var(--s-6); font-size: var(--fs-sm); color: var(--c-grey); }
  .nav__meta a { display: inline-flex; min-height: 44px; align-items: center; }
  body.nav-open { overflow: hidden; }
}
@media (min-width: 64em) {
  .nav__meta { display: none; }
}
@media (max-width: 29.99em) { /* <480: Header kompakt, Wortmarke zweizeilig */
  .site-header .brand { font-size: 1rem; gap: var(--s-2); white-space: normal; line-height: 1.1; }
  .site-header .brand > span { max-width: 7.8em; overflow-wrap: normal; }
  .site-header .brand__signet { width: 2.625rem; }
  .menu-toggle__label { display: none; }
  .header-actions { gap: var(--s-1); }
  .site-header__inner { gap: var(--s-2); }
}
@media (max-width: 22.49em) { /* <360: nur Signet, Name bleibt als aria-label */
  .site-header .brand > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Karten mit Bildern */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--c-red-tint);
}
.media > picture { height: 100%; }
.media img { width: 100%; height: 100%; object-fit: cover; }

/* Naht-Liste (Marker) */
.stitch-list { margin: 0; padding: 0; list-style: none; }
.stitch-list li {
  position: relative;
  padding: var(--s-2) 0 var(--s-2) 1.75rem;
  break-inside: avoid;
  line-height: var(--lh-snug);
}
.stitch-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--s-2) + 0.65em);
  width: 14px;
  height: 2px;
  background: var(--stitch);
  background-size: 18px 2px;
}

/* Formulare */
.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 36em) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: var(--s-2); }
.field__label { font-weight: 600; line-height: var(--lh-snug); }
.field__req { color: var(--c-red-deep); }
.field__input {
  width: 100%;
  min-height: 3rem;
  padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--radius-s);
  background: var(--c-white);
  color: var(--c-black);
  font: inherit;
  font-size: max(16px, 1rem); /* verhindert iOS-Zoom */
  line-height: 1.4;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.field__input:hover { border-color: var(--c-black); }
.field__input:focus-visible {
  outline: none;
  border-color: var(--c-red);
  box-shadow: 0 0 0 3px var(--c-white), 0 0 0 5px var(--c-red);
}
textarea.field__input { min-height: 10rem; resize: vertical; }
.field__input[aria-invalid="true"] { border-color: var(--c-red-deep); border-width: 2px; }
.field__error {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  color: var(--c-red-deep);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.field__error[hidden] { display: none; }
.field__error::before {
  content: "!";
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.25rem; height: 1.25rem;
  margin-top: 0.1em;
  border-radius: 50%;
  background: var(--c-red-deep);
  color: var(--c-white);
  font-size: 0.8125rem;
  line-height: 1;
}
.form__note { font-size: var(--fs-sm); color: var(--c-grey); max-width: 60ch; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 6 · Sektionen ---------------------------------------------------------- */

/* Hero */
.hero { padding-block: clamp(var(--s-6), 2rem + 4vw, var(--s-9)) var(--s-section); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(var(--s-6), 4vw, var(--s-8)); align-items: center; }
.hero__title {
  font-size: var(--fs-3xl);
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 14em;
}
.hero__since { display: block; }
.hero__lead {
  margin-top: var(--s-5);
  max-width: 36em;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--c-grey);
}
.hero .actions { margin-top: var(--s-6); }
@media (max-width: 29.99em) { .actions .btn { flex: 1 1 100%; } }
.hero__media { aspect-ratio: 4 / 3; }
.hero__caption { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--c-grey); }
@media (min-width: 56.25em) { /* ≥900 */
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
}

/* Weg der Spende */
.path { position: relative; }
.path__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-7); }
.path__seam { display: none; }
.path__step:not(:last-child)::before { /* mobile: Naht zwischen den Knoten */
  content: "";
  position: absolute;
  left: calc(1.5rem - 1px);
  top: 3.5rem;
  bottom: calc(-1 * var(--s-7) + 0.5rem);
  width: 2px;
  background: var(--stitch-v);
}
.path__step { position: relative; padding-left: 4.5rem; }
.path__knot {
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--c-white);
  border: 2px solid var(--c-red);
  color: var(--c-red);
  font-weight: 700;
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}
.path__step:last-child .path__knot { background: var(--c-red); color: var(--c-white); }
.path__title { font-size: var(--fs-lg); line-height: var(--lh-snug); padding-top: 0.45rem; }
.path__text { margin-top: var(--s-2); max-width: 32ch; color: var(--c-grey); }
@media (min-width: 48em) { /* ≥768: horizontal */
  .path__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
  .path__seam {
    display: block;
    position: absolute;
    top: calc(1.5rem - 1px);
    left: 3.5rem;
    right: calc((100% - 2 * var(--s-6)) / 3 + 0.5rem);
    height: 2px;
    background: var(--stitch);
  }
  .path__step::before { display: none; }
  .path__step { padding-left: 0; padding-top: 4.5rem; }
  .path__title { padding-top: 0; }
}

/* Geschichte */
.history__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(var(--s-7), 5vw, var(--s-9)); }
.motto { position: relative; }
.motto__quote {
  font-size: var(--fs-xl);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.motto__quote p + p { margin-top: var(--s-4); }
.motto__translation { font-weight: 600; color: var(--c-red); }
.motto__source { display: block; margin-top: var(--s-4); font-size: var(--fs-sm); font-style: normal; color: var(--c-grey); }
.motto__media { margin-top: var(--s-6); aspect-ratio: 1541 / 1371; }

.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline__item:not(:last-child)::after { /* Naht bis zum nächsten Knoten */
  content: "";
  position: absolute;
  left: calc(0.5rem - 1px);
  top: 1.85rem;
  bottom: calc(-1 * clamp(var(--s-6), 4vw, var(--s-7)) + 0.35rem);
  width: 2px;
  background: var(--stitch-v);
}
.timeline__item { position: relative; padding-left: 2.75rem; }
.timeline__item + .timeline__item { margin-top: clamp(var(--s-6), 4vw, var(--s-7)); }
.timeline__item::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55rem;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--c-white);
  border: 2px solid var(--c-red);
}
.timeline__item:last-child::before { background: var(--c-red); }
.timeline__year {
  font-size: var(--fs-xl);
  line-height: 1.1;
  color: var(--c-red);
  font-variant-numeric: tabular-nums lining-nums;
}
.timeline__text { margin-top: var(--s-3); max-width: var(--measure); }
.timeline__text + .timeline__text { margin-top: var(--s-4); }
.timeline__actions { margin-top: var(--s-5); }
.motto__figure { margin-top: var(--s-6); }

@media (min-width: 60em) { /* ≥960 */
  .history__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
@media (min-width: 60em) and (min-height: 56em) {
  .motto { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}

/* Spenden */
.donate {
  --focus: var(--c-white);
  background: var(--c-red);
  color: var(--c-white);
}
.donate__more a:not(.btn), .donate__head a { color: var(--c-white); }
.donate__head { max-width: var(--measure); margin-bottom: clamp(var(--s-6), 4vw, var(--s-7)); }
.donate .section__intro { color: var(--c-white); }
.donate__ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: stretch; }
@media (min-width: 56.25em) { .donate__ways { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); } }
.way {
  --focus: var(--c-black);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  background: var(--c-white);
  color: var(--c-black);
  border-radius: var(--radius-m);
  padding: clamp(var(--s-5), 4vw, var(--s-7));
}
.way__title { font-size: var(--fs-lg); line-height: var(--lh-snug); padding-bottom: var(--s-3); border-bottom: 2px solid transparent; background: var(--stitch) bottom left / 100% 2px no-repeat; }
.way__actions { margin-top: auto; }
/* Rhythmus in den Karten: Text 16 px, Blöcke (Hinweis, IBAN, Liste, Knöpfe) 24 px */
.way > .way__note,
.way > .bank__iban-block,
.way > .bank__list { margin-block-start: var(--s-2); }
/* Knöpfe an den Kartenboden, damit beide Karten unten bündig abschliessen */
.way > .way__actions { margin-block-start: auto; padding-top: var(--s-4); }
.donate__more { max-width: var(--measure); margin-top: clamp(var(--s-6), 4vw, var(--s-7)); }
.donate__more > * + * { margin-top: var(--s-4); }
.donate__details summary {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; cursor: pointer; font-weight: 600;
  text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px;
}
.donate__details summary::marker { content: ""; }
.donate__details summary::-webkit-details-marker { display: none; }
.donate__details summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1.5px solid currentColor; border-radius: 50%; font-size: 0.875rem; line-height: 1; }
.donate__details[open] summary::before { content: "–"; }
.donate__facts { display: grid; gap: 0; margin-top: var(--s-3); max-width: 26rem; }
.donate__facts > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-2); border-top: 1px solid rgb(255 255 255 / 0.35); }
.donate__facts dt { font-weight: 400; }
.donate__facts dd { font-weight: 600; font-variant-numeric: tabular-nums; }

.bank__list { display: grid; gap: 0; }
.bank__list .bank__row:last-child { border-bottom: 1px solid var(--c-line); }
.bank__row {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-3);
  border-top: 1px solid var(--c-line);
}
.bank__row dt { font-size: var(--fs-sm); color: var(--c-grey); }
.bank__row dd { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (min-width: 30em) {
  .bank__row { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; }
}
.bank__iban-block { padding: var(--s-5); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-s); }
@media (max-width: 29.99em) { .bank__iban-block { padding: var(--s-4); } }
.bank__iban-label { font-size: var(--fs-sm); color: var(--c-grey); }
.bank__iban-block { container-type: inline-size; }
.bank__iban {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.32em;
  margin-top: var(--s-1);
  font-size: clamp(1.3125rem, 7.4cqi, 1.75rem);
  user-select: all;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.3;
}
.bank__iban-half { display: inline-flex; column-gap: 0.32em; white-space: nowrap; }
.bank__copy { margin-top: var(--s-4); }
@media (max-width: 29.99em) { .bank__copy { width: 100%; min-height: 3rem; font-size: var(--fs-base); } }
.bank__status { margin-top: var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--c-red-deep); }
.bank__status:empty { display: none; }
.bank__thanks { font-weight: 600; }

/* Vorstand */
.team { display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.person { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-4); align-items: center; align-content: start; }
.person__media { aspect-ratio: 4 / 5; }
.person__name { font-size: var(--fs-md); line-height: var(--lh-snug); }
.person__role { color: var(--c-grey); line-height: var(--lh-snug); margin-top: 2px; }
.person__mail { margin-top: var(--s-1); font-size: var(--fs-sm); line-height: 1.35; }
.person__mail a { display: inline-flex; align-items: center; min-height: 44px; padding-block: var(--s-1); overflow-wrap: anywhere; }
@media (max-width: 21.99em) { .person { grid-template-columns: 1fr; } .person__media { max-width: 12rem; } }
@media (min-width: 36em) { /* ≥576 */
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); }
}
@media (min-width: 48em) {
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person { grid-template-columns: 1fr; align-items: start; gap: var(--s-4); }
}
@media (min-width: 60em) {
  .team { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); }
  .person__media { aspect-ratio: 1 / 1; }
  .person__media img { object-position: 50% 22%; }
}

/* Gemeinden & Institutionen */
.region__media { aspect-ratio: 16 / 9; margin-bottom: clamp(var(--s-7), 5vw, var(--s-9)); }
.region__media img { object-position: 72% 50%; }
@media (min-width: 48em) { .region__media { aspect-ratio: 12 / 5; } }
.region__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
.region__title { font-size: var(--fs-lg); line-height: var(--lh-snug); padding-bottom: var(--s-3); border-bottom: 2px solid var(--c-black); margin-bottom: var(--s-3); }
.region__count { color: var(--c-red); font-weight: 600; }
.region .stitch-list { columns: 16rem auto; column-gap: var(--s-6); }
.region .stitch-list--short { columns: 12rem auto; }
@media (min-width: 60em) { .region__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-8); } }

/* Kontakt */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(var(--s-7), 5vw, var(--s-9)); }
.contact__aside { display: grid; gap: var(--s-5); align-content: start; }
.contact__aside h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); }
.contact-card { padding: var(--s-5); background: var(--c-white); border-radius: var(--radius-m); }
.contact-card__role { font-size: var(--fs-sm); color: var(--c-grey); }
.contact-card__name { font-weight: 600; font-size: var(--fs-md); }
.contact-card a { display: inline-flex; align-items: center; min-height: 44px; padding-block: var(--s-1); font-size: var(--fs-sm); overflow-wrap: anywhere; }
@media (min-width: 60em) { .contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }

/* Footer */
.site-footer .brand { white-space: normal; }
.site-footer { border-top: 1px solid var(--c-line); padding-block: var(--s-8) var(--s-6); font-size: var(--fs-sm); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
.footer__claim { margin-top: var(--s-4); max-width: 30ch; color: var(--c-grey); }
.footer__title { font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--s-3); }
.footer__links { margin: 0; padding: 0; list-style: none; }
.footer__links a { display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; color: var(--c-black); }
.icon-ext { flex: none; }
.footer__links a:hover { color: var(--c-red-deep); }
.sponsors { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-6); margin: 0; padding: 0; list-style: none; }
.sponsors img { height: 2.25rem; width: auto; }
.sponsors .sponsor--migros img { height: 1.75rem; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  color: var(--c-grey);
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin: 0; padding: 0; list-style: none; }
.footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-grey); }
.footer__bottom a:hover { color: var(--c-red-deep); }
@media (min-width: 48em) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }

/* 7 · Unterseiten ---------------------------------------------------------- */
.page { padding-block: clamp(var(--s-7), 3rem + 4vw, var(--s-9)) var(--s-section); }
.page__title { font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: -0.015em; margin-bottom: var(--s-6); }
.page h2 { font-size: var(--fs-lg); line-height: var(--lh-snug); margin-top: var(--s-7); }
.page .prose h2 + p { margin-top: var(--s-3); }
.page .actions { margin-top: var(--s-6); }

/* 8 · Motion -------------------------------------------------------------- */
/* Einziger inszenierter Moment: die Naht zeichnet sich einmal. */
@media (min-width: 48em) {
  .js-motion .path__seam { clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--ease-out) 150ms; }
  .js-motion .path.is-drawn .path__seam { clip-path: inset(0 0 0 0); }
}

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

/* Windows-Kontrastmodus */
@media (forced-colors: active) {
  .btn { border-color: ButtonText; }
  .path__seam, .path__step::before, .timeline__item::after, .stitch-list li::before { background: CanvasText; }
  .todo { outline: 2px solid CanvasText; }
}

/* 9 · Print -------------------------------------------------------------- */
@media print {
  .site-header, .skip-link, .menu-toggle, .bank__copy, .bank__status, .form, .region__media, .hero__media { display: none !important; }
  body { font-size: 11pt; }
  .donate, .bank { background: none; color: #000; }
  .section { padding-block: 1.5rem; }
  a[href^="mailto:"]::after { content: ""; }
}

/* Hinweis in der Spendenkarte */
.way__note {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-red);
  border-radius: var(--radius-s);
  background: var(--c-surface);
  color: var(--c-black);
  font-weight: 600;
  line-height: var(--lh-snug);
}