/* ==========================================================================
   WIR FÜR TELFS – Sitepackage wft_site
   Basis: website/entwurf-2026/css/wft.css (unverändert übernommen, ab „Design-Vorlage 2026“).
   Ergänzungen für TYPO3 stehen ganz unten im Layer „typo3“.
   ========================================================================== */

/* Inter lokal (keine Verbindung zu Google, DSGVO). Variable Schrift 400–800. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../Fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../Fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   WIR FÜR TELFS – Design-Vorlage 2026
   Tokens, Basis, Komponenten. Reihenfolge der Layer ist bindend.
   ========================================================================== */
@layer tokens, base, layout, components, utilities, typo3;

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* Farben */
    --wft-akzent: #962A59;
    --wft-akzent-dunkel: #7A2148;
    --wft-akzent-hell: #F7E7EE;
    --wft-schwarz: #231F20;
    --wft-text: #3B3B3B;
    --wft-text-gedaempft: #6F6F6F;
    --wft-weiss: #FFFFFF;
    --wft-hell: #F6F5F3;
    --wft-linie: #E6E3DF;

    /* Logo-Farben (gemessen aus dem Logo-SVG 2024) */
    --logo-gelb: #FEF202;
    --logo-orange: #E77719;
    --logo-blau: #1F5EB0;
    --logo-gruen: #3CB845;
    --logo-magenta: #ED0F7C;
    --logo-dunkelblau: #174E72;
    --logo-koralle: #F25162;
    --logo-violett: #374CA7;
    --logo-pink: #F14194;

    /* Verläufe (CI 2024). 1–3 sind die Logo-Kacheln W/F/T, angenähert an die
       Illustrator-Freiform-Originale in img/wft_verlauf_01-03.eps: radiale Ebenen
       über einer Grundfarbe. 4 und 5 sind daraus abgeleitete Zweifarb-Verläufe. */
    --verlauf-1:
      radial-gradient(35% 35% at 5% 50%, rgb(142 110 142 / .8), transparent),
      radial-gradient(40% 40% at 100% 55%, rgb(175 185 55 / .9), transparent),
      radial-gradient(70% 70% at 100% 100%, #00AB68, transparent),
      radial-gradient(75% 75% at 0% 100%, #005FAA, transparent),
      radial-gradient(70% 70% at 100% 0%, #EE3F27, transparent),
      radial-gradient(75% 75% at 0% 0%, #FFF200, transparent),
      #AB7A62;
    --verlauf-2:
      radial-gradient(60% 60% at 100% 100%, #C5855E, transparent),
      radial-gradient(75% 75% at 0% 100%, #F18562, transparent),
      radial-gradient(70% 70% at 100% 0%, #044E77, transparent),
      radial-gradient(70% 70% at 0% 0%, #ED177B, transparent),
      #966671;
    --verlauf-3:
      radial-gradient(42% 42% at 0% 50%, #FFFFFF, transparent),
      radial-gradient(45% 45% at 100% 100%, #F79C7C, transparent),
      radial-gradient(60% 60% at 0% 100%, #F7EC03, transparent),
      radial-gradient(50% 50% at 100% 50%, #DB2690, transparent),
      radial-gradient(65% 65% at 100% 0%, #9D248F, transparent),
      radial-gradient(65% 65% at 0% 0%, #314EA1, transparent),
      #DC80AC;
    --verlauf-3-gespiegelt:
      radial-gradient(42% 42% at 100% 50%, #FFFFFF, transparent),
      radial-gradient(45% 45% at 0% 100%, #F79C7C, transparent),
      radial-gradient(60% 60% at 100% 100%, #F7EC03, transparent),
      radial-gradient(50% 50% at 0% 50%, #DB2690, transparent),
      radial-gradient(65% 65% at 0% 0%, #9D248F, transparent),
      radial-gradient(65% 65% at 100% 0%, #314EA1, transparent),
      #DC80AC;
    --verlauf-4: linear-gradient(135deg, #374CA7 0%, #CD098D 100%);
    --verlauf-5: linear-gradient(135deg, #FEF202 0%, #F2A08C 100%);
    --scrim: linear-gradient(180deg, rgb(35 31 32 / 0) 30%, rgb(35 31 32 / .82) 100%);

    /* Rundungen */
    --radius-s: 8px;
    --radius-m: 16px;
    --radius-l: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* Abstände */
    --s-1: 8px;
    --s-2: 16px;
    --s-3: 24px;
    --s-4: 32px;
    --s-5: 48px;
    --s-6: 64px;
    --s-7: 96px;
    --section: clamp(64px, 5vw + 32px, 112px);

    /* Raster */
    --container: 1200px;
    --gutter: clamp(20px, 4vw, 48px);

    /* Schrift */
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
    --fs-h1: clamp(2.125rem, 1.5rem + 2.5vw, 3rem);
    --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem);
    --fs-h3: clamp(1.3125rem, 1.2rem + .5vw, 1.5rem);
    --fs-lead: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
    --fs-body: 1.0625rem;
    --fs-small: .875rem;
    --fs-eyebrow: .8125rem;

    /* Schatten, Bewegung */
    --shadow-1: 0 1px 2px rgb(35 31 32 / .06), 0 8px 24px rgb(35 31 32 / .08);
    --shadow-2: 0 2px 4px rgb(35 31 32 / .08), 0 20px 48px rgb(35 31 32 / .14);
    --ease: cubic-bezier(.2, .7, .2, 1);
    --dauer: .35s;
  }
}

/* --------------------------------------------------------------------------
   2. Basis
   -------------------------------------------------------------------------- */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--wft-text);
    background: var(--wft-weiss);
    -webkit-font-smoothing: antialiased;
  }
  img, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  h1, h2, h3, h4 { margin: 0; color: var(--wft-schwarz); text-wrap: balance; }
  h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.1; letter-spacing: -.015em; }
  h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
  h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; }
  h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
  p { margin: 0 0 1em; }
  p:last-child { margin-bottom: 0; }
  a { color: var(--wft-akzent); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1.5px; transition: color var(--dauer) var(--ease); }
  a:hover { color: var(--wft-akzent-dunkel); }
  :focus-visible { outline: 3px solid var(--wft-akzent); outline-offset: 3px; border-radius: 4px; }
  ::selection { background: var(--wft-akzent-hell); color: var(--wft-schwarz); }
  button { font: inherit; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
@layer layout {
  .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
  .section { padding-block: var(--section); }
  .section--hell { background: var(--wft-hell); }
  .section--eng { padding-block: calc(var(--section) * .6); }
  .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
  .section-head > div { max-width: 640px; }
  .section-head h2 { margin-top: var(--s-1); }
  .stack > * + * { margin-top: var(--s-3); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
  @media (max-width: 719px) {
    .section-head { flex-direction: column; align-items: flex-start; }
  }
}

/* --------------------------------------------------------------------------
   4. Komponenten
   -------------------------------------------------------------------------- */
@layer components {

  /* Eyebrow / Kicker */
  .eyebrow {
    display: inline-block;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wft-akzent);
  }
  .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--wft-text); }
  .klein { font-size: var(--fs-small); color: var(--wft-text-gedaempft); }

  /* Icons */
  .icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .icon--fill { fill: currentColor; stroke: none; }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55em;
    min-height: 48px; padding: .7em 1.4em;
    font-weight: 600; font-size: 1rem; line-height: 1.2;
    color: var(--wft-weiss); background: var(--wft-akzent);
    border: 2px solid transparent; border-radius: var(--radius-pill);
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background var(--dauer) var(--ease), color var(--dauer) var(--ease), transform var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease), border-color var(--dauer) var(--ease);
  }
  .btn:hover { background: var(--wft-akzent-dunkel); color: var(--wft-weiss); transform: translateY(-1px); box-shadow: var(--shadow-1); }
  .btn:active { transform: translateY(0); box-shadow: none; }
  .btn--sekundaer { background: transparent; color: var(--wft-akzent); border-color: currentColor; }
  .btn--sekundaer:hover { background: var(--wft-akzent-hell); color: var(--wft-akzent-dunkel); }
  .btn--dunkel { background: var(--wft-schwarz); }
  .btn--dunkel:hover { background: #000; }
  .btn--weiss { background: var(--wft-weiss); color: var(--wft-schwarz); }
  .btn--weiss:hover { background: var(--wft-hell); color: var(--wft-schwarz); }
  .btn--ghost { background: transparent; color: var(--wft-weiss); border-color: rgb(255 255 255 / .7); }
  .btn--ghost:hover { background: rgb(255 255 255 / .14); color: var(--wft-weiss); border-color: var(--wft-weiss); }
  .btn--klein { min-height: 40px; padding: .5em 1.1em; font-size: .9375rem; }
  .btn--gross { min-height: 56px; padding: .85em 1.8em; font-size: 1.0625rem; }
  .btn--block { width: 100%; }
  .btn[disabled], .btn.ist-deaktiviert { opacity: .45; pointer-events: none; }

  /* Runder Icon-Button (Social, Burger) */
  .icon-btn {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--wft-hell); color: var(--wft-schwarz);
    border: 0; cursor: pointer; text-decoration: none;
    transition: background var(--dauer) var(--ease), color var(--dauer) var(--ease), transform var(--dauer) var(--ease);
  }
  .icon-btn:hover { background: var(--wft-akzent); color: var(--wft-weiss); transform: translateY(-1px); }
  .icon-btn .icon { width: 20px; height: 20px; }
  .icon-btn--gross { width: 56px; height: 56px; }
  .icon-btn--gross .icon { width: 24px; height: 24px; }

  /* Textlink mit Pfeil */
  .link-pfeil {
    display: inline-flex; align-items: center; gap: .4em;
    font-weight: 600; text-decoration: none; color: var(--wft-akzent);
  }
  .link-pfeil .icon { transition: transform var(--dauer) var(--ease); }
  .link-pfeil:hover .icon { transform: translateX(4px); }

  /* Verlaufs-Kachel (CI-Element) */
  .ci-kachel { border-radius: var(--radius-l); background: var(--verlauf-3); }
  .ci-kachel--1 { background: var(--verlauf-1); }
  .ci-kachel--2 { background: var(--verlauf-2); }
  .ci-kachel--4 { background: var(--verlauf-4); }
  .ci-kachel--5 { background: var(--verlauf-5); }

  /* ---------- Header ---------- */
  .header {
    position: sticky; top: 0; z-index: 50;
    /* Kein backdrop-filter (Milchglas): über dem sich bewegenden Mausschein musste Safari den Blur in jedem Frame
       neu rechnen (Timelines 05.11.: Frames 60–230 ms). Fast deckendes Weiß sieht praktisch gleich aus. */
    background: rgb(255 255 255 / .97);
    border-bottom: 1px solid var(--wft-linie);
  }
  .header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 84px; }
  .logo { display: inline-block; line-height: 0; }
  .logo img { height: 54px; width: auto; }
  .nav { display: flex; gap: clamp(16px, 2.2vw, 36px); margin: 0; padding: 0; list-style: none; }
  .nav a {
    font-weight: 500; font-size: 1.0625rem; color: var(--wft-schwarz); text-decoration: none;
    padding: .4em 0; position: relative;
  }
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--wft-akzent); transform: scaleX(0); transform-origin: left;
    transition: transform var(--dauer) var(--ease);
  }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
  .header__actions { display: flex; align-items: center; gap: var(--s-1); }
  .header__actions .btn { margin-left: var(--s-1); }
  .burger { display: none; }
  @media (max-width: 1023px) {
    .nav { display: none; }
    .header__actions .icon-btn--social { display: none; }
    .burger { display: inline-grid; }
  }
  @media (max-width: 639px) {
    .header__inner { min-height: 72px; }
    .logo img { height: 46px; }
    .header__actions .btn { display: none; }
  }

  /* ---------- Overlay-Menü ---------- */
  .menue {
    position: fixed; inset: 0; z-index: 60;
    background: var(--wft-weiss);
    display: grid; grid-template-rows: auto 1fr auto;
    transform: translateY(-104%);
    transition: transform .5s var(--ease), visibility 0s linear .5s;
    visibility: hidden; overflow-y: auto;
  }
  .menue.ist-offen { transform: translateY(0); visibility: visible; transition-delay: 0s; }
  .menue__kopf { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
  .menue__kopf .logo img { height: 46px; }
  .menue__gruss {
    margin-top: var(--s-2); padding: var(--s-4); color: var(--wft-weiss);
    border-radius: var(--radius-l); background: var(--verlauf-3-gespiegelt);
  }
  .menue__gruss strong { display: block; font-size: var(--fs-display); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
  .menue__gruss span { display: block; margin-top: var(--s-1); font-size: var(--fs-lead); opacity: .95; }
  .menue__nav { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
  .menue__nav li + li { border-top: 1px solid var(--wft-linie); }
  .menue__nav a {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-2) 0; font-size: clamp(1.5rem, 6vw, 1.875rem); font-weight: 700;
    color: var(--wft-schwarz); text-decoration: none; letter-spacing: -.01em;
  }
  .menue__nav a .icon { color: var(--wft-akzent); width: 28px; height: 28px; }
  .menue__cta { display: grid; gap: var(--s-1); margin-top: var(--s-4); }
  .menue__fuss { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); padding-block: var(--s-3); font-size: var(--fs-small); }
  .menue__fuss a { color: var(--wft-text-gedaempft); text-decoration: none; }
  .menue__social { display: flex; gap: var(--s-1); }
  body.menue-offen { overflow: hidden; }

  /* ---------- Hero ---------- */
  .hero { padding-block: clamp(32px, 4vw, 64px) var(--section); overflow: clip; }
  .hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
  .hero__text .eyebrow { font-size: 1.125rem; letter-spacing: 0; text-transform: none; font-weight: 700; }
  .hero__text h1 { font-size: var(--fs-display); margin-top: var(--s-2); line-height: 1.02; letter-spacing: -.025em; }
  .hero__text h1 em { font-style: normal; color: var(--wft-akzent); }
  .hero__text .lead { margin-top: var(--s-3); max-width: 34rem; }
  .hero__cta { margin-top: var(--s-4); }
  /* Hero-Medien: drei Stile, im TYPO3-Template per Klasse umschaltbar.
     Standard = nur Foto. --kacheln = zwei CI-Kacheln versetzt dahinter.
     --schein = weichgezeichneter Verlauf, der langsam rotiert. */
  .hero__media { position: relative; padding: 48px 48px 48px 0; }
  .hero__media img { position: relative; z-index: 2; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-2); }
  .hero__media--kacheln::before, .hero__media--kacheln::after {
    content: ""; position: absolute; border-radius: var(--radius-l); z-index: 1;
  }
  .hero__media--kacheln::before { top: 0; right: 0; width: 46%; height: 44%; background: var(--verlauf-2); }
  .hero__media--kacheln::after { bottom: 0; left: 18%; width: 44%; height: 40%; background: var(--verlauf-3); }
  /* Der Schein dreht sich langsam (rotate/scale aus den Keyframes), folgt
     träge der Maus (--schein-x/-y, setzt js/wft.js bei feinem Zeiger) und
     wandert beim Scrollen nach oben (--schein-scroll 0..1). Die drei
     Bewegungen addieren sich über die einzelnen Transform-Eigenschaften. */
  /* Der Schein ist dasselbe fertige Bild wie der Mausschein (schein.webp, Verlauf 3 vorab weichgezeichnet).
     Live-Blur oder Maske auf der sich drehenden Fläche rechnete Safari in jedem Frame neu (05.11.2026).
     Nie filter/mask/backdrop-filter hier. inset = alte Ellipse (9% -2% 9% -10%) plus Blur-Rand im Bild
     (22,6 % der Breite links/rechts, 26,6 % der Höhe oben/unten). */
  .hero__media--schein::before {
    content: ""; position: absolute; z-index: 1; inset: -12.8% -27.3% -12.8% -35.3%;
    background: url("../Images/schein.webp") center / 100% 100% no-repeat;
    opacity: .8; will-change: transform;
    translate: calc(var(--schein-x, 0) * 56px) calc(var(--schein-y, 0) * 40px + var(--schein-scroll, 0) * -110px);
    transition: translate 1.2s var(--ease);
    animation: schein-wandern 36s ease-in-out infinite;
  }
  @keyframes schein-wandern {
    0%   { rotate: 0turn; scale: 1; }
    50%  { rotate: .5turn; scale: 1.06; }
    100% { rotate: 1turn; scale: 1; }
  }

  /* Lebendiger Verlauf: eine Verlaufsfläche, deren Farben langsam wandern.
     Klasse .verlauf-lebendig auf .menue__gruss, .band, .kachel--cta.
     --lebendig-verlauf wählt den Verlauf, Standard ist Verlauf 3 gespiegelt.
     Die normale Hintergrundfarbe bleibt als Fallback darunter. */
  .verlauf-lebendig { position: relative; isolation: isolate; overflow: hidden; }
  .verlauf-lebendig::after {
    content: ""; position: absolute; inset: -22%; z-index: -1; pointer-events: none; display: block;
    background: var(--lebendig-verlauf, var(--verlauf-3-gespiegelt));
    animation: verlauf-wandern 40s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes verlauf-wandern {
    0%   { rotate: -6deg; scale: 1; translate: 0 0; }
    50%  { rotate: 3deg; scale: 1.12; translate: 4% -3%; }
    100% { rotate: 8deg; scale: 1.04; translate: -4% 3%; }
  }
  .kachel--cta.verlauf-lebendig { --lebendig-verlauf: var(--verlauf-2); }
  .kachel--cta.verlauf-lebendig::after { display: block; inset: -22%; background: var(--lebendig-verlauf); }
  .kachel--dunkel.verlauf-lebendig::after { display: none; }
  @media (max-width: 899px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__media { padding: 32px 32px 32px 0; }
    .hero__media--kacheln::before { width: 50%; height: 40%; }
    .hero__media--kacheln::after { left: 10%; width: 50%; height: 36%; }
    .hero__media--schein::before { inset: -17.4% -24.4% -17.4% -32.4%; } /* alte Ellipse 6% 0 6% -8% plus Blur-Rand */
  }

  /* ---------- Mosaik (Facebook-Stream) ---------- */
  .mosaik { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
  .kachel {
    position: relative; aspect-ratio: 1; border-radius: 20px; overflow: hidden;
    background: var(--wft-hell); color: var(--wft-weiss); text-decoration: none; isolation: isolate;
  }
  .kachel--gross { grid-column: span 2; grid-row: span 2; }
  .kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
  .kachel:hover img { transform: scale(1.04); }
  .kachel::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
  .kachel__inhalt { position: absolute; inset: auto 0 0 0; padding: var(--s-3); z-index: 2; }
  .kachel__inhalt p { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; text-wrap: pretty; }
  .kachel--gross .kachel__inhalt { padding: var(--s-4); }
  .kachel--gross .kachel__inhalt p { font-size: var(--fs-h3); font-weight: 700; max-width: 26rem; }
  .kachel__meta { position: absolute; top: var(--s-2); left: var(--s-2); z-index: 2; display: flex; gap: 6px; }
  .pill {
    display: inline-flex; align-items: center; gap: .35em;
    padding: .3em .75em; border-radius: var(--radius-pill);
    font-size: .8125rem; font-weight: 600; color: var(--wft-schwarz);
    background: rgb(255 255 255 / .94); /* kein backdrop-filter, siehe .header */
  }
  .pill--fb { color: var(--wft-weiss); background: #1877F2; }
  .pill--ig { color: var(--wft-weiss); background: var(--verlauf-2); }
  .pill .icon { width: 1em; height: 1em; }
  .kachel--cta { display: grid; place-items: center; text-align: center; padding: var(--s-3); background: var(--verlauf-2); }
  .kachel--cta::after { display: none; }
  .kachel--cta .icon { width: 44px; height: 44px; margin-bottom: var(--s-2); }
  .kachel--cta strong { display: block; font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; }
  .kachel--cta span { display: block; margin-top: .4em; font-size: var(--fs-small); opacity: .9; }
  .kachel--cta:hover { filter: brightness(1.06); }
  .kachel--dunkel { background: var(--wft-schwarz); }
  @media (max-width: 899px) {
    .mosaik { display: flex; gap: var(--s-2); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-1); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
    .mosaik::-webkit-scrollbar { display: none; }
    .kachel, .kachel--gross { flex: 0 0 min(78vw, 320px); aspect-ratio: 4 / 5; scroll-snap-align: start; }
    .kachel--gross .kachel__inhalt { padding: var(--s-3); }
    .kachel--gross .kachel__inhalt p { font-size: 1.0625rem; font-weight: 600; }
  }

  /* ---------- Teaser-Karten ---------- */
  .teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  .teaser { display: block; text-decoration: none; color: inherit; }
  .teaser__bild { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 20px; background: var(--wft-hell); }
  .teaser__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
  .teaser:hover .teaser__bild img { transform: scale(1.04); }
  .teaser__text { padding-top: var(--s-3); }
  .teaser__text h3 { margin-top: var(--s-1); }
  .teaser__text p { margin-top: var(--s-1); color: var(--wft-text); }
  .teaser__text .link-pfeil { margin-top: var(--s-2); }
  @media (max-width: 899px) { .teaser-grid { grid-template-columns: 1fr; gap: var(--s-5); } }
  @media (min-width: 640px) and (max-width: 899px) { .teaser-grid { grid-template-columns: 1fr 1fr; } }

  /* ---------- Zitat / Grußwort ---------- */
  .zitat { display: grid; grid-template-columns: 2fr 3fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
  .zitat__media { position: relative; padding: 0 32px 32px 0; }
  .zitat__media img { position: relative; z-index: 2; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-xl); }
  .zitat__media::after { content: ""; position: absolute; right: 0; bottom: 0; width: 60%; height: 55%; border-radius: var(--radius-l); background: var(--verlauf-1); }
  .zitat blockquote { margin: var(--s-2) 0 0; font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--wft-schwarz); }
  .zitat blockquote::before { content: "„"; color: var(--wft-akzent); }
  .zitat blockquote::after { content: "“"; color: var(--wft-akzent); }
  .zitat figcaption { margin-top: var(--s-3); }
  .zitat figcaption strong { display: block; color: var(--wft-schwarz); }
  .zitat .btn { margin-top: var(--s-3); }
  @media (max-width: 899px) { .zitat { grid-template-columns: 1fr; } .zitat__media { max-width: 420px; } }

  /* ---------- Mitmach-Band ---------- */
  .band {
    position: relative; overflow: hidden;
    padding: clamp(40px, 6vw, 80px); border-radius: var(--radius-xl);
    background: var(--verlauf-3-gespiegelt); color: var(--wft-weiss);
  }
  .band::before {
    content: ""; position: absolute; right: -10%; top: -40%; width: 50%; aspect-ratio: 1;
    border-radius: 50%; background: rgb(255 255 255 / .12); filter: blur(2px);
  }
  .band > * { position: relative; }
  .band h2 { color: var(--wft-weiss); font-size: var(--fs-h1); }
  .band .lead { color: var(--wft-weiss); max-width: 38rem; margin-top: var(--s-2); opacity: .95; }
  .band .cluster { margin-top: var(--s-4); }
  @media (max-width: 639px) { .band .cluster { display: grid; } .band .btn { width: 100%; } }

  /* ---------- Footer ---------- */
  .footer { background: var(--wft-hell); border-top: 1px solid var(--wft-linie); padding-block: var(--s-6) var(--s-3); font-size: .9375rem; }
  .footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-5); }
  .footer h4 { margin-bottom: var(--s-2); }
  .footer ul { list-style: none; margin: 0; padding: 0; }
  .footer li + li { margin-top: .5em; }
  .footer a { color: var(--wft-text); text-decoration: none; }
  .footer a:hover { color: var(--wft-akzent); }
  .footer__marke .logo img { height: 48px; }
  .footer__marke p { margin-top: var(--s-2); max-width: 28rem; }
  .footer__social { display: flex; gap: var(--s-1); margin-top: var(--s-2); }
  .footer__social .icon-btn { background: var(--wft-weiss); }
  .footer__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--wft-linie); color: var(--wft-text-gedaempft); font-size: var(--fs-small); }
  .footer__unten ul { display: flex; gap: var(--s-3); }
  @media (max-width: 899px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 639px) { .footer__grid { grid-template-columns: 1fr; gap: var(--s-4); } }

  /* ---------- Formulare ---------- */
  .feld { display: grid; gap: .4em; }
  .feld label, .feld > span { font-weight: 600; font-size: .9375rem; color: var(--wft-schwarz); }
  .feld small { color: var(--wft-text-gedaempft); font-size: var(--fs-small); }
  .eingabe, select.eingabe, textarea.eingabe {
    width: 100%; min-height: 50px; padding: .75em 1em;
    font: inherit; color: var(--wft-text); background: var(--wft-weiss);
    border: 1.5px solid var(--wft-linie); border-radius: var(--radius-m);
    transition: border-color var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease);
  }
  .eingabe:focus { outline: none; border-color: var(--wft-akzent); box-shadow: 0 0 0 4px var(--wft-akzent-hell); }
  .eingabe::placeholder { color: #A5A19D; }
  .eingabe[aria-invalid="true"] { border-color: #C62828; }
  .feld__fehler { color: #C62828; font-size: var(--fs-small); }
  textarea.eingabe { min-height: 140px; resize: vertical; }
  .wahl { display: flex; gap: .6em; align-items: flex-start; font-weight: 400; font-size: 1rem; color: var(--wft-text); }
  .wahl input { width: 20px; height: 20px; margin-top: .2em; accent-color: var(--wft-akzent); flex: none; }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .form-grid .ist-breit { grid-column: 1 / -1; }
  @media (max-width: 639px) { .form-grid { grid-template-columns: 1fr; } }

  /* ---------- Listen, Personen, Sonstiges ---------- */
  .liste-check { list-style: none; margin: 0; padding: 0; }
  .liste-check li { position: relative; padding-left: 2em; }
  .liste-check li + li { margin-top: .6em; }
  .liste-check li::before {
    content: ""; position: absolute; left: 0; top: .25em; width: 1.3em; height: 1.3em; border-radius: 50%;
    background: var(--wft-akzent-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23962A59' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 60% no-repeat;
  }
  .person { position: relative; display: block; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 4; text-decoration: none; color: var(--wft-weiss); background: var(--wft-hell); isolation: isolate; }
  .person img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
  .person:hover img { transform: scale(1.04); }
  .person::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
  .person__text { position: absolute; inset: auto 0 0 0; padding: var(--s-2); z-index: 2; }
  .person__text strong { display: block; font-size: 1.0625rem; }
  .person__text span { font-size: var(--fs-small); opacity: .9; }
  .personen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
  @media (max-width: 899px) { .personen-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); } }

  .karte { padding: var(--s-4); border-radius: var(--radius-l); background: var(--wft-weiss); border: 1px solid var(--wft-linie); }
  .karte--hell { background: var(--wft-hell); border: 0; }
  .hinweis { padding: var(--s-2) var(--s-3); border-radius: var(--radius-m); background: var(--wft-akzent-hell); color: var(--wft-akzent-dunkel); font-weight: 500; }
}

/* --------------------------------------------------------------------------
   5. Utilities & Bewegung
   -------------------------------------------------------------------------- */
@layer utilities {
  /* Nur mit JavaScript verbergen (Klasse js aus dem Kopf); ohne JS oder wenn wft.js zu spät kommt (reveal-fertig) ist alles sichtbar */
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .reveal.ist-sichtbar, .reveal-fertig .reveal { opacity: 1; transform: none; }
  .mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
  .text-zentriert { text-align: center; }
  .max-w { max-width: 40rem; }
  .nur-mobil { display: none; }
  @media (max-width: 899px) { .nur-mobil { display: initial; } .nur-desktop { display: none !important; } }
}

/* --------------------------------------------------------------------------
   TYPO3-Ergänzungen (Sitepackage)
   -------------------------------------------------------------------------- */
@layer typo3 {
  /* Aktuell: automatisch abgerufene Beitragstexte sind länger als die Einzeiler im Entwurf.
     Höchstens 3 Zeilen, auf der großen Kachel 4. */
  .kachel__inhalt p { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .kachel--gross .kachel__inhalt p { -webkit-line-clamp: 4; line-clamp: 4; }

  /* Sprunglink: unsichtbar, bis er per Tastatur Fokus bekommt */
  .sprunglink {
    position: absolute; left: var(--s-2); top: -100px; z-index: 100;
    padding: .6em 1.1em; border-radius: var(--radius-pill);
    background: var(--wft-akzent); color: var(--wft-weiss); font-weight: 700; text-decoration: none;
  }
  .sprunglink:focus { top: var(--s-2); color: var(--wft-weiss); }

  /* Fußzeilen-Überschriften: semantisch h2, optisch wie h4 im Entwurf */
  /* Buttons in der Fußzeile: „.footer a“ würde die Button-Schrift grau färben (auch im Entwurf) */
  .footer .btn, .footer .btn:hover { color: var(--wft-weiss); }
  .footer__titel { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; margin: 0 0 var(--s-2); }

  /* Seitenkopf der Inhaltsseiten (Figma 108:42593): weiß, Text links, Bild mit Verlaufsschein rechts */
  .seitenkopf { padding-block: clamp(40px, 5vw, 64px) clamp(48px, 6vw, 96px); overflow: clip; }
  .seitenkopf__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
  .seitenkopf--mit-bild .seitenkopf__grid { grid-template-columns: minmax(0, 578fr) minmax(0, 550fr); }
  .seitenkopf h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; margin-top: var(--s-2); max-width: 22ch; }
  .seitenkopf__strich { display: block; width: 120px; height: 8px; margin: var(--s-3) 0; border-radius: var(--radius-pill); background: var(--verlauf-2); }
  .seitenkopf .lead { margin: 0; max-width: 34rem; }
  .seitenkopf__media img { aspect-ratio: 4 / 3; }
  @media (max-width: 899px) { .seitenkopf--mit-bild .seitenkopf__grid { grid-template-columns: 1fr; } }
  .inhaltsseite { padding-block: 0 var(--section); }
  .inhaltsseite > .fliesstext:first-child { padding-top: var(--s-2); }
  .inhaltsseite:has(> section:last-child) { padding-bottom: 0; }
  .mitmach-abschnitt { padding-top: var(--section); }

  /* Standard-Elemente (Text, Text mit Bild) als gut lesbare Spalte */
  .fliesstext { max-width: 760px; }
  .fliesstext + .fliesstext { margin-top: var(--s-5); }
  .fliesstext header { margin-bottom: var(--s-2); }
  .fliesstext h2 + p, .fliesstext h3 + p { margin-top: var(--s-1); }
  .fliesstext ul, .fliesstext ol { padding-left: 1.25em; margin: 0 0 1em; }
  .fliesstext li + li { margin-top: .35em; }
  .fliesstext figure { margin: 0 0 var(--s-3); }
  .fliesstext img { border-radius: var(--radius-m); }
  .fliesstext .ce-gallery { margin-bottom: var(--s-3); }

  /* Mausschein: folgt der Maus auf jeder Seite, liegt hinter den Inhalten (wft.js).
     Mittelpunkt sitzt am Mauszeiger (margin = halbe Größe). */
  .mausschein {
    --mausschein-groesse: clamp(360px, 38vw, 620px);
    position: fixed; top: 0; left: 0; z-index: 0; pointer-events: none;
    width: var(--mausschein-groesse); height: calc(var(--mausschein-groesse) * .8);
    margin: calc(var(--mausschein-groesse) * -.5) 0 0 calc(var(--mausschein-groesse) * -.5);
    margin-top: calc(var(--mausschein-groesse) * -.4);
    opacity: 0; transition: opacity .8s var(--ease); will-change: transform;
  }
  .mausschein.ist-aktiv { opacity: .5; }
  /* Touch: Schein folgt dem Scrollen (wft.js), an die Handybreite angepasst */
  .mausschein--scroll { --mausschein-groesse: clamp(300px, 85vw, 520px); }
  /* Der Schein ist ein fertiges Bild (schein.webp, 225 px, 13 KB): Verlauf 3 einmal vorab mit blur(64px) gerendert.
     Live-Blur oder Maske auf der bewegten Fläche rechnete Safari in jedem Frame neu (250–600 ms je Frame, am Handy
     Erstaufruf 10–30 s). Jetzt verschiebt und dreht der Browser nur ein Bild. Nie filter/mask/backdrop-filter hier.
     inset = Blur-Rand im Bild (132/496 oben/unten, 140/620 links/rechts). Spec: docs/superpowers/specs/2026-11-05-mausschein-bild-design.md */
  .mausschein::after {
    content: ""; position: absolute; inset: -26.6% -22.6%;
    background: url("../Images/schein.webp") center / 100% 100% no-repeat;
    will-change: transform; animation: schein-wandern 36s ease-in-out infinite;
  }
  /* Wer im System „Bewegung reduzieren“ eingestellt hat: keine Endlos-Animationen */
  @media (prefers-reduced-motion: reduce) {
    .mausschein::after, .hero__media--schein::before, .verlauf-lebendig::after { animation: none; }
  }
  main, .footer { position: relative; z-index: 1; }
  /* Graue Flächen durchscheinend, damit der Mausschein durchschimmert */
  .section--hell, .footer { background: color-mix(in srgb, var(--wft-hell) 20%, transparent); }
  /* Hero-Schein folgt nicht mehr der Maus, nur noch Drehung und Scroll-Versatz */
  .hero__media--schein::before { translate: 0 calc(var(--schein-scroll, 0) * -110px); }

  /* Facebook-Mosaik auf dem Handy (Wischleiste), Fehler aus dem Entwurf behoben:
     - scroll-padding: sonst rastet die erste Kachel an der Bildschirmkante statt am Seitenrand ein
     - kein Einblenden (.reveal) in der Leiste: seitlich gewischte Kacheln waren erst leer
     - overscroll-behavior: Wischen am Ende löst nicht die Zurück-Geste des Browsers aus */
  @media (max-width: 899px) {
    .mosaik { scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; }
    .mosaik > .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* Hero-Buttons auf dem Handy: beide in einer Zeile (Wunsch Auftraggeber) */
  @media (max-width: 639px) {
    .hero__cta { flex-wrap: nowrap; gap: var(--s-1); }
    .hero__cta .btn--gross { flex: 1 1 auto; min-height: 48px; padding: .7em 1em; font-size: .9375rem; }
  }
  @media (max-width: 359px) { .hero__cta { flex-wrap: wrap; } }

  /* Grußwort/Zitat: <figure> hat im Browser 40 px Außenabstand links und rechts (Fehler aus dem Entwurf) */
  figure.zitat { margin: 0; }
  @media (max-width: 639px) {
    .zitat blockquote, .zitat-gross blockquote { font-size: clamp(1.375rem, 1.1rem + 1.6vw, 1.75rem); }
  }

  /* Mitmach-Band: Eyebrow weiß (im Entwurf inline) */
  .band__eyebrow { color: var(--wft-weiss); }

  /* Personen-Übersicht: Liste ohne Aufzählungszeichen, Platzhalter ohne Porträt */
  .personen-liste { list-style: none; margin: 0; padding: 0; }
  .person__platzhalter { position: absolute; inset: 0; background: var(--verlauf-3); }

  /* Themenblock (Programm): Häkchen-Liste, optional mit Foto daneben */
  .inhaltsseite > .thema-block:first-child { padding-top: 0; }
  .thema h2 { margin-bottom: var(--s-3); }
  .thema__text { max-width: 760px; }
  .thema--mit-bild { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
  .thema--bild-links .thema__bild { order: -1; }
  .thema__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-l); }
  @media (max-width: 899px) {
    .thema--mit-bild { grid-template-columns: 1fr; }
    .thema--bild-links .thema__bild { order: 0; }
  }

  /* Formulare (EXT:form mit den Klassen des Entwurfs, siehe Configuration/Form) */
  .frame-type-form_formframework form > div > .feld + .feld,
  .frame-type-form_formframework form .feld + .feld { margin-top: var(--s-3); }
  .feld--gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
  .feld--gruppe legend { padding: 0; margin-bottom: .4em; font-weight: 600; font-size: .9375rem; color: var(--wft-schwarz); }
  .feld--gruppe .wahl + .wahl, .feld--gruppe > div + div { margin-top: .4em; }
  .feld .required { color: var(--wft-akzent); margin-left: .15em; }
  .ist-fehler .eingabe { border-color: #C62828; }
  .formular__aktionen { margin-top: var(--s-4); }
  .formular__aktionen .btn { min-width: 12rem; }
  /* Einzelne Checkbox: TYPO3 setzt das Label neben das Feld, nicht darum herum */
  .feld:has(> input[type="checkbox"]) { display: flex; gap: .6em; align-items: flex-start; }
  .feld:has(> input[type="checkbox"]) label { font-weight: 400; font-size: 1rem; color: var(--wft-text); }
  .feld > input[type="checkbox"], .wahl input[type="checkbox"] { width: 20px; height: 20px; margin: .2em 0 0; accent-color: var(--wft-akzent); flex: none; }
  .frame-type-form_formframework { max-width: 640px; }

  /* Personen-Raster: Verlaufskacheln als Rhythmus (Figma 108:46873) */
  .person--verlauf { background: var(--verlauf-3); }
  .person--verlauf::after { display: none; }
  .person--verlauf.ci-kachel--3 { background: var(--verlauf-3); }

  /* Programm (Figma 109:51111) */
  .programm-nav { padding-block: var(--s-6) 0; }
  .programm-nav .container { border-top: 1px solid var(--wft-linie); padding-top: var(--s-5); }
  .programm-nav__titel { margin-bottom: var(--s-2); }
  .programm-nav__liste { list-style: none; margin: 0; padding: 0; gap: var(--s-1) 12px; }
  .programm-bloecke { display: grid; gap: clamp(64px, 8vw, 112px); }
  .programm-block { display: grid; grid-template-columns: minmax(0, 578fr) minmax(0, 550fr); gap: 72px; align-items: center; scroll-margin-top: 120px; }
  .programm-block:nth-child(even) { grid-template-columns: minmax(0, 550fr) minmax(0, 578fr); }
  .programm-block:nth-child(even) .programm-block__bild { order: -1; }
  .programm-block__text h2 { margin: 12px 0 var(--s-2); }
  .programm-block__text .lead { margin-bottom: 28px; }
  .programm-block__text .liste-check li + li { margin-top: 12px; }
  .programm-alle { margin-top: var(--s-3); padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; text-align: left; }
  .programm-alle:hover .icon { transform: translateX(4px); }
  .programm-block__bild { position: relative; padding: 48px 48px 36px 0; }
  .programm-block__bild img { position: relative; z-index: 2; display: block; width: 100%; aspect-ratio: 502 / 377; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-1); }
  .programm-block__kachel { position: absolute; top: 0; right: 0; width: 44%; height: 43%; border-radius: var(--radius-l); }
  .programm-block:nth-child(even) .programm-block__bild { padding: 48px 0 36px 48px; }
  .programm-block:nth-child(even) .programm-block__kachel { top: auto; right: auto; bottom: 0; left: 0; }
  .ci-kachel--3 { background: var(--verlauf-3); }
  .programm-karten { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-5); }
  .programm-karte { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); scroll-margin-top: 120px; }
  .programm-karte p { margin: 0 0 var(--s-1); }
  .programm-karte .btn { margin-top: auto; }
  .programm-karte:nth-last-child(2):nth-child(3n+1), .programm-karte:nth-last-child(1):nth-child(3n+2) { grid-column: span 3; }
  .programm-karte--akzent { border: 2px solid var(--wft-akzent); }
  /* Einzelne Karte in der letzten Reihe (z. B. ohne PDF-Karte): volle Breite */
  .programm-karte:nth-last-child(1):nth-child(3n+1) { grid-column: 1 / -1; }
  .programm-popup { width: min(100% - 2 * var(--gutter), 720px); max-height: min(85vh, 900px); overflow: auto; padding: var(--s-5); border: 0; border-radius: var(--radius-l); background: var(--wft-weiss); box-shadow: var(--shadow-2); color: var(--wft-text); }
  .programm-popup::backdrop { background: rgb(35 31 32 / .45); }
  .programm-popup__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-3); }
  .programm-popup__kopf h2 { margin-top: var(--s-1); }
  @media (max-width: 899px) {
    .programm-block, .programm-block:nth-child(even) { grid-template-columns: 1fr; gap: var(--s-4); }
    .programm-block .programm-block__bild { order: -1; }
    .programm-karten { grid-template-columns: 1fr; }
    .programm-karte, .programm-karte:nth-last-child(2):nth-child(3n+1), .programm-karte:nth-last-child(1):nth-child(3n+2) { grid-column: auto; }
  }

  /* Personen: Kachel ist jetzt ein Link im Listenpunkt */
  .person__text strong, .person__text > span { display: block; }
  .pill--hell { background: var(--wft-hell); }
  .section--hell .pill--hell { background: var(--wft-weiss); }
  .pills { gap: var(--s-1); }

  /* Steckbrief-Seite (Figma „Person voll/kurz“) */
  .person-kopf { padding-block: var(--s-4) var(--section); }
  .link-zurueck { margin-bottom: var(--s-4); }
  .link-zurueck .icon { transform: rotate(180deg); }
  .link-zurueck:hover .icon { transform: rotate(180deg) translateX(4px); }
  .person-kopf__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
  .person-kopf__bild { position: relative; padding: 0 32px 32px 0; max-width: 460px; }
  .person-kopf__bild img, .person-kopf__bild .person__platzhalter { position: relative; z-index: 2; display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-xl); }
  .person-kopf__bild .person__platzhalter { position: relative; inset: auto; }
  .person-kopf__bild::after { content: ""; position: absolute; right: 0; bottom: 0; width: 60%; height: 55%; border-radius: var(--radius-l); background: var(--verlauf-1); }
  .person-kopf__text h1 { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.02em; margin-top: var(--s-2); }
  .person-kopf__strich { display: block; width: 64px; height: 6px; margin: var(--s-3) 0; border-radius: var(--radius-pill); background: var(--verlauf-4); }
  .person-kopf__text .lead { margin: 0; }
  .person-kopf__angabe { margin-top: var(--s-3); }
  .person-kopf__angabe .eyebrow { display: block; margin-bottom: .35em; }
  .steckbrief { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
  .steckbrief__text h2 { margin: var(--s-1) 0 var(--s-4); }
  .steckbrief__text h3 { margin: var(--s-4) 0 var(--s-1); }
  .steckbrief__text h2 + h3 { margin-top: 0; }
  .steckbrief__seite { display: grid; gap: var(--s-3); }
  .steckbrief__seite .karte h3 { margin-bottom: var(--s-2); }
  .zitat-gross { margin: 0 auto; max-width: 52rem; text-align: center; }
  .zitat-gross blockquote { margin: var(--s-2) 0 0; font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--wft-schwarz); text-wrap: balance; }
  .zitat-gross blockquote::before { content: "„"; color: var(--wft-akzent); }
  .zitat-gross blockquote::after { content: "“"; color: var(--wft-akzent); }
  .zitat-gross .person-kopf__strich { margin-inline: auto; }
  .zitat-gross figcaption strong { display: block; color: var(--wft-schwarz); }
  @media (max-width: 899px) {
    .person-kopf__grid, .steckbrief { grid-template-columns: 1fr; }
    .person-kopf__bild { max-width: 360px; }
  }

  /* Handy-Feinschliff der Inhaltsseiten (am Ende, damit es die Grundregeln oben überschreibt) */
  .fliesstext * + h2 { margin-top: var(--s-4); }
  form h2 { margin-bottom: var(--s-2); }
  .person__text strong, .person__text > span { overflow-wrap: break-word; hyphens: auto; }
  @media (max-width: 899px) {
    .person__text { padding: 12px; }
    .person__text strong { font-size: 1rem; line-height: 1.25; }
    .personen-grid .person .person__text > span { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; margin-top: .2em; }
    /* Programm: Themen-Navigation als Wischleiste in einer Zeile */
    .programm-nav { padding-top: 0; }
    .programm-nav .container { padding-top: var(--s-3); }
    .programm-nav__liste { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) var(--s-1); scrollbar-width: none; }
    .programm-nav__liste::-webkit-scrollbar { display: none; }
    .programm-nav__liste li { flex: none; scroll-snap-align: start; }
    .programm-nav__liste .btn { white-space: nowrap; }
  }
}