/* ==========================================================================
   Engineered by NETRIX · Webdesign · © Netrix GmbH
   https://www.netrix-webdesign.de/ · https://www.netrix.de/
   --------------------------------------------------------------------------
   AWO Ortsverein Kleinmachnow e.V. – Stylesheet
   Aufbau: 1 Schrift · 2 Tokens · 3 Basis · 4 Layout · 5 Kopf/Navigation
           6 Bausteine · 7 Startseite · 8 Unterseiten · 9 Fuß · 10 Animation
           11 Druck
   Designsystem: docs/designsystem.md
   ========================================================================== */

/* 1 · Schrift (lokal eingebunden, keine Verbindung zu Google) -------------- */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* 2 · Design-Tokens -------------------------------------------------------- */
:root {
  /* Markenfarben */
  --awo-rot: #e41913;          /* AWO-Rot – Grafiken, Flächen, große Schrift */
  --rot-text: #c0110c;         /* abgedunkelt für Fließtext/Links (Kontrast ≥ 5,5:1) */
  --rot-tief: #8f0d09;
  --rot-hauch: #fdeceb;
  --rot-zart: #f9d5d3;

  /* Neutrale, warme Töne */
  --tinte: #1f1c1a;
  --tinte-weich: #4b4541;
  --tinte-leise: #6d6560;
  /* Hintergründe bewusst etwas dunkler als Weiß, damit weiße Kästen sich
     für ältere Augen klar abheben */
  --sand: #f3ece3;
  --sand-2: #e9dfd2;
  --sand-3: #dfd1bf;
  --weiss: #ffffff;
  --linie: #d9c9b5;

  /* Akzent (sparsam) */
  --aprikose: #f4a259;
  --aprikose-hauch: #fdf0e3;
  --salbei: #5f7f6c;

  /* Typografie */
  --font: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fs-base: 1.125rem;   /* 18 px Grundgröße – gut lesbar für ältere Menschen */
  --fs-sm: 0.95rem;
  --fs-lg: 1.3rem;
  --fs-h4: 1.25rem;
  --fs-h3: clamp(1.35rem, 1.1rem + 0.8vw, 1.6rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h1: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
  --lh: 1.65;

  /* Abstände & Formen */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6.5rem;
  --radius-s: 10px;
  --radius: 18px;
  --radius-l: 32px;
  --container: 1200px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --schatten: 0 1px 2px rgb(31 28 26 / 0.10), 0 4px 10px rgb(31 28 26 / 0.08), 0 18px 36px -14px rgb(31 28 26 / 0.28);
  --karten-rand: 2px solid #cdb9a0;   /* gut sichtbarer Kastenrand */
  --schatten-hoch: 0 2px 4px rgb(31 28 26 / 0.08), 0 24px 52px -16px rgb(31 28 26 / 0.34);
  --fokus: 0 0 0 3px var(--weiss), 0 0 0 6px var(--tinte);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 84px;
}

/* Schriftgrößen-Umschalter (A / A+ / A++) */
html[data-schrift="gross"] { font-size: 112.5%; }
html[data-schrift="sehr-gross"] { font-size: 125%; }

/* 3 · Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--tinte);
  background: var(--sand);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 var(--s-4); font-weight: 750; letter-spacing: -0.012em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.grid > *, .split > *, .hero__inner > *, .page-hero__inner > *, .werte > *, .woche > * { min-width: 0; }
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p, ul, ol, dl, blockquote, figure, table { margin: 0 0 var(--s-4); }
p { text-wrap: pretty; }
ul, ol { padding-left: 1.3em; }
li + li { margin-top: 0.35em; }
a { color: var(--rot-text); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { color: var(--rot-tief); text-decoration-thickness: 0.14em; }
:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: 6px; }
strong, b { font-weight: 750; }
small { font-size: var(--fs-sm); }
hr { border: 0; border-top: 1px solid var(--linie); margin: var(--s-7) 0; }
address { font-style: normal; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
::selection { background: var(--awo-rot); color: var(--weiss); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 1000;
  background: var(--tinte); color: var(--weiss); padding: var(--s-3) var(--s-5);
  border-radius: var(--radius-s); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--s-4); color: var(--weiss); }

/* 4 · Layout --------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--schmal { width: min(100% - 2 * var(--gutter), 820px); margin-inline: auto; }
.section { padding-block: var(--s-9); position: relative; }
.section--kompakt { padding-block: var(--s-8); }
.section--weiss { background: var(--weiss); }
/* Abschnitte mit Kartenrastern immer auf warmem Grund, damit weiße Karten sich abheben */
.section--karten { background: var(--sand-2); }
.section--sand { background: var(--sand-2); }
.section--rot { background: var(--awo-rot); color: var(--weiss); }
.section--rot a { color: var(--weiss); }
.section--tinte { background: var(--tinte); color: #f4efe9; }
.section__kopf { max-width: 760px; margin-bottom: var(--s-7); }
.section__kopf--mitte { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55em; margin: 0 0 var(--s-3);
  font-size: 0.9rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rot-text);
}
.eyebrow::before { content: ""; width: 1.6em; height: 2px; background: currentColor; border-radius: 2px; }
.section--rot .eyebrow, .section--tinte .eyebrow { color: inherit; }
.lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--tinte-weich); }
.section--rot .lead, .section--tinte .lead { color: inherit; opacity: .92; }

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--breit-links { grid-template-columns: 1.25fr 1fr; }
  .split--umgekehrt > :first-child { order: 2; }
}
.stack > * + * { margin-top: var(--s-4); }

/* 5 · Kopf & Navigation ---------------------------------------------------- */
.topbar { background: var(--tinte); color: #efe8e1; font-size: 0.95rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 46px; flex-wrap: wrap; }
.topbar a { color: #fff; text-decoration: none; font-weight: 700; }
.topbar a:hover { text-decoration: underline; color: #fff; }
.topbar__info { display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; margin: 0; }
.topbar__info span { display: inline-flex; align-items: center; gap: .45em; }
.topbar__info svg { width: 18px; height: 18px; flex: none; }
.schrift { display: flex; align-items: center; gap: var(--s-2); }
.schrift__label { opacity: .85; }
.schrift button {
  font: inherit; font-weight: 800; color: #fff; background: transparent; cursor: pointer;
  border: 1.5px solid rgb(255 255 255 / .35); border-radius: 8px; min-width: 40px; min-height: 34px; padding: 0 .5em; line-height: 1;
}
.schrift button[data-groesse="normal"] { font-size: .9rem; }
.schrift button[data-groesse="gross"] { font-size: 1.05rem; }
.schrift button[data-groesse="sehr-gross"] { font-size: 1.2rem; }
.schrift button[aria-pressed="true"] { background: #fff; color: var(--tinte); border-color: #fff; }
.schrift button:hover { border-color: #fff; }
@media (max-width: 640px) { .topbar__hide-sm { display: none !important; } }

.header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s;
}
/* Glas-Effekt als Pseudo-Element: backdrop-filter direkt am Header würde
   das fixierte Mobilmenü an die Header-Höhe binden (Containing Block). */
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(255 255 255 / .94);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
.header.is-scrolled { box-shadow: 0 6px 24px -14px rgb(31 28 26 / .35); border-color: var(--linie); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--tinte); flex: none; }
.logo:hover { color: var(--tinte); }
.logo__mark { width: 86px; height: auto; transition: transform .4s var(--ease); }
.logo:hover .logo__mark { transform: scale(1.04) rotate(-2deg); }
.logo__text { display: flex; flex-direction: column; line-height: 1.12; font-weight: 750; font-size: 1.02rem; letter-spacing: -0.005em; }
.logo__text small { font-weight: 500; font-size: .8rem; color: var(--tinte-leise); letter-spacing: .01em; margin-top: 2px; }

.nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .15rem; }
.nav__item { position: relative; margin: 0; display: flex; align-items: center; }
.nav__link {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 .8rem;
  color: var(--tinte); text-decoration: none; font-weight: 650; border-radius: 10px; position: relative;
}
.nav__link::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 8px; height: 3px; border-radius: 3px;
  background: var(--awo-rot); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav__link:hover { color: var(--tinte); background: var(--sand); }
.nav__link:hover::after, .nav__item.is-active > .nav__link::after { transform: scaleX(1); }
.nav__item.is-active > .nav__link { color: var(--rot-text); }
.nav__toggle {
  display: inline-grid; place-items: center; width: 32px; height: 40px; margin-left: -.55rem; padding: 0;
  border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 8px;
}
.nav__toggle svg { transition: transform .25s var(--ease); }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__sub {
  list-style: none; margin: 0; padding: .5rem; position: absolute; top: calc(100% + 6px); left: 0; min-width: 300px;
  background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten-hoch); border: 1px solid var(--linie);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
.nav__sub li { margin: 0; }
.nav__sub a { display: block; padding: .7rem .9rem; border-radius: 10px; color: var(--tinte); text-decoration: none; font-weight: 600; }
.nav__sub a:hover, .nav__sub a[aria-current="page"] { background: var(--rot-hauch); color: var(--rot-text); }
.nav__item--has-sub:hover > .nav__sub, .nav__item--has-sub:focus-within > .nav__sub, .nav__sub.is-open {
  opacity: 1; visibility: visible; transform: none;
}
.menu-btn {
  display: none; align-items: center; gap: .5rem; font: inherit; font-weight: 750; color: var(--tinte);
  background: var(--sand); border: 1.5px solid var(--linie); border-radius: 999px; padding: .55rem 1rem; cursor: pointer; min-height: 48px;
}
.menu-btn__icon { width: 22px; height: 14px; position: relative; }
.menu-btn__icon span { position: absolute; left: 0; right: 0; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s, top .3s var(--ease); }
.menu-btn__icon span:nth-child(1) { top: 0; }
.menu-btn__icon span:nth-child(2) { top: 6px; }
.menu-btn__icon span:nth-child(3) { top: 12px; }
.menu-btn[aria-expanded="true"] .menu-btn__icon span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__icon span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (max-width: 1120px) {
  :root { --header-h: 74px; }
  .logo__mark { width: 72px; }
  .menu-btn { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--nav-top, 120px) 0 0 0; z-index: 99; background: var(--weiss);
    overflow-y: auto; padding: var(--s-5) var(--gutter) var(--s-8);
    opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .25s, transform .3s var(--ease), visibility .25s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--linie); }
  .nav__link { flex: 1; min-height: 60px; font-size: 1.2rem; padding: 0 .25rem; }
  .nav__link::after { display: none; }
  .nav__toggle { width: 56px; height: 56px; margin: 0; background: var(--sand); }
  .nav__sub {
    position: static; min-width: 0; width: 100%; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 .75rem;
    opacity: 1; visibility: visible; transform: none; display: none;
  }
  .nav__item--has-sub:hover > .nav__sub, .nav__item--has-sub:focus-within > .nav__sub { display: none; }
  .nav .nav__sub.is-open { display: block !important; } /* schlägt Hover-/Fokus-Regeln */
  .nav__sub a { font-size: 1.08rem; padding: .8rem 1rem; }
  body.nav-offen { overflow: hidden; }
}
@media (max-width: 420px) {
  .logo__text { font-size: .92rem; }
  .logo__text small { display: none; }
  .logo__mark { width: 62px; }
  .menu-btn__label { display: none; }
}

/* 6 · Bausteine ------------------------------------------------------------ */
/* Schaltflächen */
.btn {
  --btn-bg: var(--rot-text); --btn-fg: #fff; --btn-bd: var(--rot-text);
  display: inline-flex; align-items: center; gap: .6em; min-height: 54px; padding: .8rem 1.5rem;
  font: inherit; font-weight: 750; font-size: 1.05rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  color: var(--btn-fg); background: var(--btn-bg); border: 2px solid var(--btn-bd); border-radius: 999px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, color .2s;
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgb(143 13 9 / .55); --btn-bg: var(--rot-tief); --btn-bd: var(--rot-tief); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.2em; height: 1.2em; flex: none; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--hell { --btn-bg: transparent; --btn-fg: var(--tinte); --btn-bd: var(--tinte); }
.btn--hell:hover { --btn-bg: var(--tinte); --btn-fg: #fff; --btn-bd: var(--tinte); box-shadow: none; }
.btn--weiss { --btn-bg: #fff; --btn-fg: var(--rot-text); --btn-bd: #fff; }
.btn--weiss:hover { --btn-bg: var(--tinte); --btn-fg: #fff; --btn-bd: var(--tinte); }
.btn--rand-weiss { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgb(255 255 255 / .7); }
.btn--rand-weiss:hover { --btn-bg: #fff; --btn-fg: var(--rot-text); --btn-bd: #fff; }
.btn--klein { min-height: 44px; padding: .5rem 1.1rem; font-size: .98rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.textlink { font-weight: 750; text-decoration: none; display: inline-flex; align-items: center; gap: .4em; }
.textlink::after { content: "→"; transition: transform .25s var(--ease); }
.textlink:hover::after { transform: translateX(4px); }

/* Karten */
.card {
  background: var(--weiss); border-radius: var(--radius); padding: var(--s-6); box-shadow: var(--schatten);
  border: var(--karten-rand); position: relative;
}
.card--link { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.card--link:hover { transform: translateY(-6px); box-shadow: var(--schatten-hoch); }
.card--link a.stretched::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card h3 { margin-bottom: var(--s-3); }
.card__art { width: 132px; height: 112px; margin-bottom: var(--s-4); }
.card__art--gross { width: 100%; height: auto; max-width: 260px; }
.card p:last-child { margin-bottom: 0; }

/* Angebots-Kacheln */
.offer {
  display: flex; flex-direction: column; background: var(--weiss); border-radius: var(--radius-l); overflow: hidden;
  box-shadow: var(--schatten); position: relative; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  border: var(--karten-rand);
}
.offer:hover { transform: translateY(-6px); box-shadow: var(--schatten-hoch); }
.offer__art { background: var(--rot-hauch); padding: var(--s-5) var(--s-5) 0; display: grid; place-items: center; min-height: 200px; }
.offer:nth-child(2n) .offer__art { background: var(--aprikose-hauch); }
.offer:nth-child(3n) .offer__art { background: var(--sand-2); }
.offer__art img { width: 100%; max-width: 250px; height: auto; transition: transform .5s var(--ease); }
.offer:hover .offer__art img { transform: scale(1.05) translateY(-4px); }
.offer__body { padding: var(--s-5) var(--s-6) var(--s-6); display: flex; flex-direction: column; flex: 1; }
.offer__when { font-size: .95rem; font-weight: 750; color: var(--rot-text); margin-bottom: var(--s-2); }
.offer__body h3 { margin-bottom: var(--s-3); }
.offer__body h3 a { color: var(--tinte); text-decoration: none; }
.offer__body h3 a::after { content: ""; position: absolute; inset: 0; }
.offer__body p { color: var(--tinte-weich); }
.offer__more { margin-top: auto; font-weight: 750; color: var(--rot-text); display: inline-flex; gap: .4em; align-items: center; }
.offer__more::after { content: "→"; transition: transform .25s var(--ease); }
.offer:hover .offer__more::after { transform: translateX(5px); }
.offer:focus-within { box-shadow: var(--fokus), var(--schatten-hoch); }

/* Hinweis-/Info-Boxen */
.info {
  display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5); border-radius: var(--radius);
  background: var(--aprikose-hauch); border-left: 6px solid var(--aprikose);
}
.info--rot { background: var(--rot-hauch); border-color: var(--awo-rot); }
.info svg { width: 32px; height: 32px; flex: none; margin-top: 2px; }
.info p:last-child { margin-bottom: 0; }

/* Listen mit Herz-Aufzählung */
.herzliste { list-style: none; padding: 0; }
.herzliste li { position: relative; padding-left: 2rem; }
.herzliste li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 1.15rem; height: 1.05rem;
  background: var(--awo-rot);
  -webkit-mask: url("../img/grafik/herz-form.svg") center / contain no-repeat;
  mask: url("../img/grafik/herz-form.svg") center / contain no-repeat;
}

/* Kennzahlen */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s-5); }
.fact { text-align: center; padding: var(--s-5) var(--s-4); }
.fact__zahl { display: block; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fact__text { display: block; margin-top: var(--s-3); font-weight: 600; opacity: .92; }

/* Bilder mit Rahmen */
.foto { position: relative; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--schatten-hoch); background: var(--sand-3); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto figcaption { position: absolute; left: var(--s-4); bottom: var(--s-4); right: var(--s-4); background: rgb(255 255 255 / .94); padding: .6rem 1rem; border-radius: 12px; font-size: .95rem; font-weight: 600; }
.foto-deko { position: relative; isolation: isolate; }
.foto-deko::before {
  content: ""; position: absolute; z-index: -1; inset: auto -18px -18px auto; width: 70%; height: 70%;
  background: var(--awo-rot); border-radius: var(--radius-l); opacity: .9;
}
.foto-deko--links::before { inset: -18px auto auto -18px; background: var(--aprikose); }

/* Akkordeon / FAQ */
.faq-liste { display: grid; gap: var(--s-3); }
details.faq { background: var(--weiss); border-radius: var(--radius); border: 1px solid var(--linie); transition: box-shadow .3s; }
details.faq[open] { box-shadow: var(--schatten); }
details.faq summary {
  list-style: none; cursor: pointer; padding: var(--s-5) 4rem var(--s-5) var(--s-5); font-weight: 750; font-size: 1.12rem; position: relative; border-radius: var(--radius);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: ""; position: absolute; right: var(--s-5); top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
  background: var(--rot-hauch) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%23c0110c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .3s var(--ease);
}
details.faq[open] summary::after { transform: rotate(135deg); }
details.faq summary:hover { color: var(--rot-text); }
.faq__antwort { padding: 0 var(--s-5) var(--s-5); color: var(--tinte-weich); }
.faq__antwort p:last-child { margin-bottom: 0; }

/* Breadcrumb */
.breadcrumb ol { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: flex; flex-wrap: wrap; gap: .25rem; font-size: .95rem; }
.breadcrumb li { margin: 0; display: inline-flex; align-items: center; gap: .25rem; color: var(--tinte-leise); }
.breadcrumb li + li::before { content: "›"; padding-inline: .2rem; }
.breadcrumb a { color: var(--tinte-weich); }

/* Seitenkopf der Unterseiten */
.page-hero { background: var(--weiss); padding-block: var(--s-7) var(--s-8); overflow: hidden; position: relative; }
.page-hero::after {
  content: ""; position: absolute; right: -8%; bottom: -60%; width: 55%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at center, var(--rot-hauch), transparent 65%); z-index: 0; pointer-events: none;
}
.page-hero__inner { display: grid; gap: var(--s-6); align-items: center; position: relative; z-index: 1; }
@media (min-width: 900px) { .page-hero__inner { grid-template-columns: 1.35fr 1fr; } }
.page-hero h1 { margin-bottom: var(--s-4); }
.page-hero .lead { max-width: 640px; margin-bottom: 0; }
.page-hero__art { justify-self: center; width: min(100%, 380px); }
.page-hero__art img { width: 100%; }

/* Inhaltsbereich für Texte */
.prose { max-width: 760px; }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); }
.prose > :first-child { margin-top: 0; }
.prose ul li::marker { color: var(--awo-rot); }
.prose blockquote { border-left: 4px solid var(--awo-rot); padding: var(--s-2) 0 var(--s-2) var(--s-5); font-size: var(--fs-lg); color: var(--tinte-weich); font-style: italic; }
.prose figure { margin-block: var(--s-6); }
.prose figure img { border-radius: var(--radius); }
.prose figcaption { font-size: var(--fs-sm); color: var(--tinte-leise); margin-top: var(--s-2); }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--linie); vertical-align: top; }

/* Definitionslisten (Kontakt, Impressum) */
.daten { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; }
.daten dt { font-weight: 750; }
.daten dd { margin: 0; }
@media (max-width: 560px) { .daten { grid-template-columns: 1fr; gap: 0; } .daten dd { margin-bottom: .75rem; } }

/* Telefon-/Kontakt-Kacheln */
.kontakt-kachel { display: flex; gap: var(--s-4); align-items: flex-start; }
.kontakt-kachel__icon { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--rot-hauch); }
.kontakt-kachel__icon svg { width: 30px; height: 30px; }
.kontakt-kachel h3 { font-size: 1.15rem; margin-bottom: .2rem; }
.kontakt-kachel p { margin: 0; }
.gross-link { font-size: 1.35rem; font-weight: 800; text-decoration: none; color: var(--tinte); white-space: nowrap; }
.gross-link:hover { color: var(--rot-text); text-decoration: underline; }

/* Zeitleiste (Chronik) */
.zeitleiste { list-style: none; padding: 0; margin: 0; position: relative; }
.zeitleiste::before { content: ""; position: absolute; left: 22px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: linear-gradient(var(--awo-rot), var(--aprikose)); }
.zeitleiste li { position: relative; padding: 0 0 var(--s-6) 68px; margin: 0; }
.zeitleiste li::before {
  content: ""; position: absolute; left: 11px; top: 4px; width: 25px; height: 25px; border-radius: 50%;
  background: var(--weiss); border: 4px solid var(--awo-rot); box-sizing: border-box; transition: transform .3s var(--ease), background .3s;
}
.zeitleiste li:hover::before { transform: scale(1.2); background: var(--awo-rot); }
.zeitleiste__jahr { display: inline-block; font-weight: 800; font-size: 1.35rem; color: var(--rot-text); line-height: 1.2; }
.zeitleiste h3 { font-size: 1.15rem; margin: .2rem 0 .3rem; }
.zeitleiste p { margin: 0; color: var(--tinte-weich); }

/* Werte-Tabs */
.werte { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .werte { grid-template-columns: minmax(260px, 1fr) 1.5fr; } }
.werte__tabs { display: grid; gap: var(--s-2); }
.werte__tab {
  display: flex; align-items: center; gap: var(--s-4); width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-weight: 750; font-size: 1.15rem; color: inherit; background: rgb(255 255 255 / .08);
  border: 2px solid rgb(255 255 255 / .18); border-radius: var(--radius); padding: .8rem 1.1rem; min-height: 64px;
  transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.werte__tab:hover { background: rgb(255 255 255 / .16); transform: translateX(4px); }
.werte__tab[aria-selected="true"] { background: #fff; color: var(--rot-text); border-color: #fff; }
.werte__tab img { width: 40px; height: 40px; flex: none; }
.werte__tab[aria-selected="false"] img { filter: brightness(0) invert(1); }
.werte__panel { background: #fff; color: var(--tinte); border-radius: var(--radius-l); padding: var(--s-7); min-height: 100%; box-shadow: var(--schatten-hoch); }
.werte__panel[hidden] { display: none; }
.werte__panel img { width: 120px; height: 120px; margin-bottom: var(--s-4); }
.werte__panel h3 { color: var(--rot-text); font-size: var(--fs-h2); }
.werte__panel p { font-size: var(--fs-lg); color: var(--tinte-weich); margin: 0; }
.no-js .werte__panel[hidden] { display: block; }

/* Nachrichten-Karten */
.news-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.news-card { margin: 0; }
.news-card__link {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: var(--weiss);
  border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--schatten); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  border: var(--karten-rand);
}
.news-card__link:hover { color: inherit; transform: translateY(-6px); box-shadow: var(--schatten-hoch); }
.news-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--rot-hauch); }
.news-card:nth-child(3n+2) .news-card__media { background: var(--aprikose-hauch); }
.news-card:nth-child(3n) .news-card__media { background: var(--sand-2); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news-card__media img.news-card__art { object-fit: contain; padding: 8% 18%; }
.news-card__link:hover .news-card__media img { transform: scale(1.05); }
.news-card__body { padding: var(--s-5) var(--s-5) var(--s-6); display: flex; flex-direction: column; flex: 1; }
.news-card__meta { font-size: .95rem; color: var(--tinte-leise); margin-bottom: var(--s-2); font-weight: 600; }
.news-card__title { font-size: 1.3rem; margin-bottom: var(--s-3); }
.news-card__excerpt { color: var(--tinte-weich); }
.news-card__more { margin-top: auto; font-weight: 750; color: var(--rot-text); }
.news-card__more::after { content: " →"; }

/* Beitrag */
.artikel__kopf { background: var(--weiss); padding-block: var(--s-7) var(--s-6); }
.artikel__meta { color: var(--tinte-leise); font-weight: 600; margin-bottom: var(--s-3); }
.artikel__bild { margin: 0 0 var(--s-7); }
.artikel__bild img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--radius-l); }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--s-3); margin-block: var(--s-6); }
.galerie a { display: block; border-radius: var(--radius-s); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand-3); position: relative; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.galerie a:hover img { transform: scale(1.06); }
.galerie a::after {
  content: ""; position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; opacity: 0; transition: opacity .25s;
  background: rgb(255 255 255 / .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1c1a' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.galerie a:hover::after, .galerie a:focus-visible::after { opacity: 1; }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1200px); max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgb(20 18 17 / .88); }
.lightbox img { max-height: 80vh; width: auto; margin: 0 auto; border-radius: var(--radius-s); }
.lightbox p { color: #fff; text-align: center; margin: var(--s-3) 0 0; }
.lightbox__close {
  position: absolute; top: -56px; right: 0; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--tinte); font-size: 1.6rem; line-height: 1; display: grid; place-items: center;
}

/* Programm / Termine */
.termine { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.event {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: start; margin: 0;
  background: var(--weiss); border-radius: var(--radius); padding: var(--s-5); box-shadow: var(--schatten); border: var(--karten-rand);
}
.event__date {
  width: 76px; text-align: center; background: var(--awo-rot); color: #fff; border-radius: 14px; padding: .55rem 0 .5rem; line-height: 1;
}
.event[data-type="ausflug"] .event__date { background: var(--salbei); }
.event[data-type="fest"] .event__date { background: var(--aprikose); color: var(--tinte); }
.event__day { display: block; font-size: 2rem; font-weight: 800; }
.event__month { display: block; font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-top: .25rem; }
.event__meta { font-size: .98rem; color: var(--tinte-leise); font-weight: 600; margin-bottom: .2rem; }
.event__title { font-size: 1.25rem; margin-bottom: .35rem; }
.event__text, .event__place { margin: 0; color: var(--tinte-weich); }
.event__place { font-size: .98rem; margin-top: .3rem; }
.event.is-past { opacity: .72; }
.termine--leer { display: none; }

/* Wochenplan */
.woche { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.tag {
  position: relative; background: var(--weiss); border-radius: var(--radius-l); padding: var(--s-6); box-shadow: var(--schatten);
  border: var(--karten-rand); border-top: 6px solid var(--awo-rot);
  overflow: hidden; display: flex; flex-direction: column;
}
.tag__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.tag__name { font-weight: 800; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rot-text); }
.tag__zeit { font-weight: 800; background: var(--rot-hauch); color: var(--rot-tief); padding: .25rem .8rem; border-radius: 999px; font-size: .98rem; white-space: nowrap; }
.tag img { width: 150px; height: 120px; margin: 0 0 var(--s-4); }
.tag h3 { margin-bottom: var(--s-2); }
.tag p { color: var(--tinte-weich); }
.tag__next { margin-top: auto; padding-top: var(--s-4); border-top: 1px dashed var(--linie); font-weight: 650; font-size: .98rem; }
.tag__next strong { color: var(--tinte); }

/* Nächster Termin (Hero-Widget) */
.naechster {
  display: flex; gap: var(--s-4); align-items: center; background: var(--weiss); border-radius: var(--radius);
  padding: var(--s-4) var(--s-5); box-shadow: var(--schatten-hoch); max-width: 460px;
}
.naechster__kal { flex: none; width: 66px; border-radius: 12px; overflow: hidden; text-align: center; box-shadow: inset 0 0 0 2px var(--rot-zart); }
.naechster__kal span { display: block; }
.naechster__wt { background: var(--awo-rot); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .08em; padding: .2rem 0; text-transform: uppercase; }
.naechster__tag { font-size: 1.8rem; font-weight: 800; line-height: 1.15; padding-top: .15rem; }
.naechster__mon { font-size: .78rem; font-weight: 700; text-transform: uppercase; padding-bottom: .3rem; color: var(--tinte-weich); }
.naechster p { margin: 0; line-height: 1.4; }
.naechster__label { font-size: .9rem; color: var(--tinte-leise); font-weight: 650; }
.naechster__titel { font-weight: 800; font-size: 1.1rem; }

/* Bankdaten / Kopieren */
.bank { display: grid; gap: var(--s-2); }
.bank__zeile { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.bank__wert { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.12rem; font-weight: 700; letter-spacing: .03em; }
.kopieren {
  font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; border-radius: 999px; padding: .35rem .9rem; min-height: 38px;
  border: 1.5px solid var(--linie); background: var(--weiss); color: var(--tinte);
}
.kopieren:hover { border-color: var(--tinte); }
.kopieren.is-done { background: var(--salbei); border-color: var(--salbei); color: #fff; }

/* Beitragsstaffel */
.staffel { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; }
.staffel li { margin: 0; padding: .45rem .95rem; border-radius: 999px; background: var(--weiss); border: 1.5px solid var(--linie); font-weight: 750; font-variant-numeric: tabular-nums; }

/* Partner */
.partner { display: flex; flex-direction: column; gap: var(--s-3); }
.partner__logo {
  height: 96px; display: grid; place-items: center start; padding-bottom: var(--s-4); margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--linie);
}
.partner__logo img { max-height: 72px; max-width: 100%; width: auto; object-fit: contain; }
.partner h3 { margin: 0; font-size: 1.2rem; }
.partner p { margin: 0; color: var(--tinte-weich); }

/* Partner-Logoslider (Startseite) – alle Logos in gleich großen Kacheln */
.logoslider { position: relative; overflow: hidden; padding-block: var(--s-3);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logoslider__spur { display: flex; width: max-content; animation: laufband 45s linear infinite; }
.logoslider:hover .logoslider__spur, .logoslider:focus-within .logoslider__spur, .logoslider.is-pausiert .logoslider__spur { animation-play-state: paused; }
.logoslider__liste { display: flex; gap: var(--s-5); list-style: none; margin: 0; padding: 0 var(--s-5) 0 0; }
.logoslider__liste li { margin: 0; }
.logoslider__liste a {
  display: grid; place-items: center; width: 210px; height: 96px; padding: var(--s-3) var(--s-5);
  background: var(--weiss); border: var(--karten-rand); border-radius: var(--radius); box-shadow: var(--schatten);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.logoslider__liste a:hover, .logoslider__liste a:focus-visible { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
.logoslider__liste img { max-width: 150px; max-height: 52px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .3s, opacity .3s; }
.logoslider__liste a:hover img, .logoslider__liste a:focus-visible img { filter: none; opacity: 1; }
.logoslider__pause {
  display: block; margin: var(--s-4) auto 0; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
  color: var(--tinte-weich); background: transparent; border: 1.5px solid var(--linie); border-radius: 999px; padding: .35rem 1rem; min-height: 40px;
}
.logoslider__pause:hover { border-color: var(--tinte); color: var(--tinte); }
@keyframes laufband { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logoslider { -webkit-mask-image: none; mask-image: none; }
  .logoslider__spur { animation: none; width: auto; justify-content: center; }
  .logoslider__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 210px)); justify-content: center; padding: 0; }
  .logoslider__liste a { width: 100%; }
  .logoslider__liste[aria-hidden="true"], .logoslider__pause { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 760px) {
  .logoslider__liste { grid-template-columns: repeat(3, 210px); }
}

/* Netrix – Partner & Unterstützer */
.netrix-partner { background: #0a0a0a; color: #e9e6e3; padding-block: var(--s-9); position: relative; overflow: hidden; }
.netrix-partner::before {
  content: ""; position: absolute; right: -6%; top: 50%; width: 520px; aspect-ratio: 76 / 80; transform: translateY(-50%); opacity: .05;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 80'%3E%3Cpath d='M0 8.5L25.3 3.8L52 42.5V0H76V80H52.4L24 39V80H0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 80'%3E%3Cpath d='M0 8.5L25.3 3.8L52 42.5V0H76V80H52.4L24 39V80H0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.netrix-partner__inner { display: grid; gap: var(--s-7); align-items: center; position: relative; }
@media (min-width: 900px) { .netrix-partner__inner { grid-template-columns: 1fr 1.6fr; } }
.netrix-partner__marke { border: 1.5px dashed rgb(255 255 255 / .3); border-radius: var(--radius-l); padding: clamp(2rem, 1rem + 4vw, 3.5rem); text-align: center; }
.netrix-partner__marke img { width: min(100%, 320px); margin: 0 auto; }
.netrix-partner__tag { margin: var(--s-5) 0 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: #bdb6b0; }
.netrix-partner h2 { color: #fff; }
.netrix-partner .eyebrow { color: #ff6a64; }
.netrix-partner a:not(.btn) { color: #fff; }
.netrix-partner__liste { list-style: none; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-block: var(--s-5); }
.netrix-partner__liste li { margin: 0; padding: var(--s-4); border-radius: var(--radius); background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); }
.netrix-partner__liste strong { display: block; color: #fff; }
.netrix-partner__liste span { font-size: .95rem; color: #bdb6b0; }

/* Datenschutz: Widerspruch Statistik */
.statistik-schalter { margin-block: var(--s-5); padding: var(--s-5); border-radius: var(--radius); background: var(--weiss); border: 2px solid var(--linie); }
.statistik-schalter p { margin-bottom: var(--s-3); }
.statistik-schalter .btn { margin-bottom: var(--s-3); }

/* Anfahrt-Karte */
.karte { position: relative; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--schatten-hoch); background: #f1ebe2; }
.karte img { width: 100%; }

/* Download-Liste */
.downloads { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.downloads li { margin: 0; }
.downloads a {
  display: flex; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); background: var(--weiss); border-radius: var(--radius);
  border: 1px solid var(--linie); text-decoration: none; color: var(--tinte); transition: border-color .2s, transform .25s var(--ease);
}
.downloads a:hover { border-color: var(--awo-rot); transform: translateX(4px); color: var(--tinte); }
.downloads__typ { flex: none; width: 52px; height: 60px; border-radius: 8px 18px 8px 8px; background: var(--awo-rot); color: #fff; font-weight: 800; font-size: .85rem; display: grid; place-items: end center; padding-bottom: 8px; }
.downloads small { display: block; color: var(--tinte-leise); font-weight: 500; }
.downloads strong { display: block; }

/* 7 · Startseite ----------------------------------------------------------- */
.hero { position: relative; background: var(--weiss); overflow: hidden; padding-block: var(--s-7) var(--s-9); }
.hero::before {
  content: ""; position: absolute; inset: auto -10% -35% 40%; height: 85%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--rot-hauch), transparent); pointer-events: none;
}
.hero__inner { display: grid; gap: var(--s-7); align-items: center; position: relative; }
@media (min-width: 980px) { .hero__inner { grid-template-columns: 1.05fr 1fr; } }
.hero h1 { margin-bottom: var(--s-5); }
.hero h1 .betont { color: var(--awo-rot); position: relative; white-space: nowrap; }
.hero h1 .betont svg { position: absolute; left: -2%; bottom: -0.22em; width: 104%; height: .4em; overflow: visible; }
.hero h1 .betont path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: zeichnen 1.4s .6s var(--ease) forwards; }
.hero .lead { margin-bottom: var(--s-6); max-width: 560px; }
.hero .btn-row { margin-bottom: var(--s-6); }

.slider { position: relative; }
.slider__rahmen { position: relative; aspect-ratio: 5 / 4; }
.slider__herz { position: absolute; inset: -9% -7% -7% -9%; z-index: 2; pointer-events: none; }
.slider__herz path { stroke-dasharray: 2200; stroke-dashoffset: 2200; animation: zeichnen 2.6s .2s var(--ease) forwards; }
.slider__bilder { position: absolute; inset: 0; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; overflow: hidden; box-shadow: var(--schatten-hoch); background: var(--sand-3); animation: blob 18s ease-in-out infinite alternate; }
@keyframes blob {
  0% { border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; }
  50% { border-radius: 56% 44% 52% 48% / 44% 56% 46% 54%; }
  100% { border-radius: 42% 58% 48% 52% / 56% 46% 54% 44%; }
}
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s ease, transform 7s linear; transform: scale(1.06); }
.slide.is-active { opacity: 1; transform: scale(1); }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide:nth-child(1) img { object-position: 38% center; }
.slide:nth-child(2) img { object-position: 45% center; }
.slide:nth-child(3) img { object-position: 42% center; }
.slider__caption {
  position: absolute; z-index: 3; left: -4%; bottom: 6%; max-width: 72%;
  background: var(--weiss); border-radius: var(--radius); padding: .9rem 1.2rem; box-shadow: var(--schatten-hoch);
  font-weight: 700; line-height: 1.35; border-left: 5px solid var(--awo-rot);
}
.slider__caption small { display: block; font-weight: 500; color: var(--tinte-weich); margin-top: .2rem; }
.slider__steuerung { position: absolute; z-index: 3; right: 2%; bottom: -4%; display: flex; gap: .4rem; align-items: center; background: var(--weiss); padding: .4rem .55rem; border-radius: 999px; box-shadow: var(--schatten); }
.slider__dot, .slider__pause {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; display: grid; place-items: center; background: transparent; color: var(--tinte);
}
.slider__dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--sand-3); transition: background .25s, transform .25s; }
.slider__dot[aria-current="true"]::before { background: var(--awo-rot); transform: scale(1.25); }
.slider__dot:hover::before { background: var(--tinte-leise); }
.slider__pause svg { width: 18px; height: 18px; }
@media (max-width: 979px) {
  .slider { max-width: 560px; margin-inline: auto; width: 100%; }
  .slider__caption { left: 0; }
}

.band { background: var(--awo-rot); color: #fff; position: relative; overflow: hidden; }
.band::before, .band::after {
  content: ""; position: absolute; width: 380px; height: 380px; border: 40px solid rgb(255 255 255 / .07); border-radius: 50%;
}
.band::before { left: -140px; top: -200px; }
.band::after { right: -120px; bottom: -220px; }

.zitat { position: relative; padding: var(--s-7); background: var(--weiss); border-radius: var(--radius-l); box-shadow: var(--schatten); }
.zitat::before { content: "„"; position: absolute; top: -.15em; left: .2em; font-size: 8rem; line-height: 1; color: var(--awo-rot); font-weight: 800; opacity: .9; }
.zitat blockquote { margin: 0; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); line-height: 1.45; font-weight: 600; }
.zitat figcaption { margin-top: var(--s-4); color: var(--tinte-leise); font-weight: 650; }

.cta-box {
  background: var(--tinte); color: #fff; border-radius: var(--radius-l); padding: clamp(2rem, 1rem + 4vw, 4rem);
  display: grid; gap: var(--s-6); align-items: center; position: relative; overflow: hidden;
}
@media (min-width: 900px) { .cta-box { grid-template-columns: 1.4fr 1fr; } }
.cta-box h2 { color: #fff; }
.cta-box p { color: #e6ded6; }
.cta-box__art { justify-self: center; width: min(100%, 300px); }
.cta-box::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: var(--awo-rot); opacity: .25; filter: blur(10px); }

/* 8 · Unterseiten-Spezifisches -------------------------------------------- */
.anker-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.anker-nav a { padding: .45rem 1rem; border-radius: 999px; background: var(--sand); border: 1.5px solid var(--linie); text-decoration: none; color: var(--tinte); font-weight: 650; font-size: .98rem; }
.anker-nav a:hover { border-color: var(--awo-rot); color: var(--rot-text); }

.personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--s-4); list-style: none; padding: 0; }
.person { margin: 0; background: var(--weiss); border-radius: var(--radius); padding: var(--s-5); border: 1px solid var(--linie); display: flex; gap: var(--s-4); align-items: center; }
.person__initialen { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--rot-hauch); color: var(--rot-text); font-weight: 800; }
.person strong { display: block; }
.person span { color: var(--tinte-leise); font-size: .98rem; }

.struktur { display: grid; gap: .5rem; list-style: none; padding: 0; counter-reset: s; }
.struktur li { margin: 0; padding: .8rem 1.2rem; border-radius: 14px; background: var(--weiss); border: 1px solid var(--linie); font-weight: 650; position: relative; }
.struktur li:nth-child(2) { margin-inline: 4%; }
.struktur li:nth-child(3) { margin-inline: 8%; }
.struktur li:nth-child(4) { margin-inline: 12%; }
.struktur li:nth-child(5) { margin-inline: 16%; }
.struktur li.is-wir { background: var(--awo-rot); color: #fff; border-color: var(--awo-rot); margin-inline: 20%; }

.fehler { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: var(--s-8); }
.fehler__art { width: min(100%, 360px); margin: 0 auto var(--s-5); }
.fehler h1 { margin-bottom: var(--s-3); }

/* 9 · Fuß ------------------------------------------------------------------ */
.footer { background: var(--tinte); color: #d9d1c9; padding-top: var(--s-8); font-size: 1rem; position: relative; }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--awo-rot), var(--aprikose)); }
.footer a { color: #fff; }
.footer a:hover { color: #fff; text-decoration-thickness: .14em; }
.footer__grid { display: grid; gap: var(--s-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); padding-bottom: var(--s-7); }
.footer h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: var(--s-4); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li + li { margin-top: .5rem; }
.footer__marke { display: flex; flex-direction: column; gap: var(--s-4); }
.footer__marke .logo { color: #fff; }
.footer__marke .logo__text small { color: #bdb3aa; }
.footer__werte { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.footer__werte li { margin: 0 !important; font-size: .88rem; padding: .2rem .7rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / .2); }
.footer__unten { border-top: 1px solid rgb(255 255 255 / .12); padding-block: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; }
.footer__unten ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.footer__unten li { margin: 0 !important; }
.footer__copy { margin: 0; font-size: .95rem; }

/* Netrix-Stempel */
.netrix-stempel {
  display: inline-flex; align-items: center; gap: .8rem; padding: .55rem .9rem .55rem .6rem; text-decoration: none;
  border: 1.5px dashed rgb(255 255 255 / .35); border-radius: 10px; color: #d9d1c9;
  font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; font-size: .78rem; line-height: 1.35;
  transition: border-color .2s, transform .25s var(--ease);
}
.netrix-stempel:hover { border-color: #fff; color: #fff; transform: rotate(-1.2deg); text-decoration: none; }
.netrix-stempel__n { width: 34px; height: 34px; background: #0a0a0a; border-radius: 6px; display: grid; place-items: center; flex: none; box-shadow: 0 0 0 1px rgb(255 255 255 / .18); }
.netrix-stempel__n svg { width: 17px; height: 18px; }
.netrix-stempel strong { display: block; color: #fff; font-weight: 700; letter-spacing: .02em; }

.nach-oben {
  position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 90; width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--rot-text); color: #fff; box-shadow: var(--schatten-hoch); display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s, transform .3s var(--ease), visibility .3s;
}
.nach-oben.is-visible { opacity: 1; visibility: visible; transform: none; }
.nach-oben:hover { background: var(--rot-tief); }
.nach-oben svg { width: 24px; height: 24px; }

/* 10 · Animation ----------------------------------------------------------- */
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--delay, 0s); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.schweben { animation: schweben 6s ease-in-out infinite; }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero h1 .betont path, .slider__herz path { stroke-dashoffset: 0; }
  .slide { transform: none; }
}

/* Kastenkontrast: alle Kästen einheitlich mit sichtbarem Rand und Schatten
   (für ältere Menschen besser erkennbar) */
.card, .offer, .news-card__link, .event, .tag, .person, details.faq, .downloads a,
.statistik-schalter, .zitat, .naechster, .struktur li, .staffel li, .anker-nav a,
.logoslider__liste a, .kopieren, .karte, .foto {
  border: var(--karten-rand);
}
.card, .offer, .event, .person, details.faq, .downloads a, .statistik-schalter, .naechster, .staffel li {
  box-shadow: var(--schatten);
}
.tag { border-top: 6px solid var(--awo-rot); }
.offer__art, .news-card__media { border-bottom: var(--karten-rand); }
.info { border: var(--karten-rand); border-left-width: 6px; border-left-color: var(--aprikose); }
.info--rot { border-left-color: var(--awo-rot); }
.struktur li.is-wir { border-color: var(--awo-rot); }
.downloads a:hover { border-color: var(--awo-rot); }
details.faq[open] { border-color: var(--awo-rot); }
.section--rot .card, .werte__panel { border: 0; }
.netrix-partner .netrix-partner__liste li { border: 1px solid rgb(255 255 255 / .18); }

/* Hilfsklassen (statt Inline-Styles – erlaubt eine strenge Content-Security-Policy) */
.u-mitte { justify-content: center; }
.u-my { margin-block: var(--s-6); }
.u-mt-3 { margin-top: var(--s-4); }
.u-mt-4 { margin-top: var(--s-5); }
.u-mt-5 { margin-top: var(--s-6); }
.u-mt-6 { margin-top: var(--s-7); }
.u-mb-4 { margin-bottom: var(--s-5); }
.u-oben { align-items: start; }
.u-h3 { font-size: var(--fs-h3); }
.u-tinte { color: var(--tinte); }
.u-icon64 { width: 64px; height: 64px; margin-bottom: var(--s-4); }
.u-gap-s { gap: var(--s-4); }
.u-plain { text-decoration: none; color: inherit; }
.u-plain:hover { color: inherit; }
.u-fett { font-weight: 750; font-size: 1.1rem; }
.u-4-3 { aspect-ratio: 4 / 3; }

/* 11 · Druck --------------------------------------------------------------- */
@media print {
  .topbar, .header, .nav, .footer__grid, .nach-oben, .slider__steuerung, .menu-btn, .btn-row, .anker-nav, .netrix-stempel { display: none !important; }
  body { background: #fff; font-size: 12pt; color: #000; }
  .section, .page-hero, .hero { padding-block: 1rem; background: #fff !important; color: #000 !important; }
  a { color: #000; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  .card, .offer, .event, .news-card__link { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Kachel-Überschriften etwas kompakter, damit lange Wörter nicht umbrechen */
.offer__body h3, .offer__body .u-h3 { font-size: clamp(1.2rem, 1.05rem + .4vw, 1.35rem); }