/* All-in Netzwerk · Seitenstil, Fassung 3 (eigene Editorial-Komposition, Stil nach Vorbild Fora) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--tinte); font-family: var(--grotesk); font-size: var(--gr-text); line-height: 1.55; font-weight: 420; overflow-x: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.versteckt { display: none; }
.klein-grau { font-size: var(--gr-klein); color: var(--tinte-2); }

/* ---------- Kopfleiste ---------- */
.kopf { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--ab-2); padding: 0.85rem var(--rand); background: oklch(0.985 0.004 90 / 0.92); backdrop-filter: saturate(1.2) blur(6px); border-bottom: 1px solid var(--linie); }
.wortmarke-klein { font-family: var(--serif); font-size: 1.6rem; line-height: 1; text-decoration: none; letter-spacing: -0.02em; }
.wortmarke-klein small { font-family: var(--grotesk); font-size: 0.85rem; letter-spacing: 0; margin-left: 0.35rem; color: var(--tinte-2); }
.kopf nav { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 1.9rem); font-size: 0.95rem; }
.kopf nav a { text-decoration: none; }
.kopf nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.pille { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--tinte); color: var(--papier); border-radius: var(--radius-knopf); padding: 0.5rem 1rem; text-decoration: none; font-weight: 520; }
.kopf nav a.pille:hover { text-decoration: none; background: var(--pflaume); }

/* ---------- Einstieg ---------- */
.einstieg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--ab-3); padding: var(--ab-4) var(--rand) 0; }
.einstieg .einstieg-text { grid-column: 1 / span 7; align-self: end; padding-bottom: var(--ab-4); }
.einstieg h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(3.4rem, 1.2rem + 8.2vw, 10.5rem); line-height: 0.88; letter-spacing: -0.035em; }
.einstieg h1 span { display: block; }
.einstieg h1 .einzug { padding-left: 0.9em; }
.einstieg .einleitung { max-width: 38ch; margin: var(--ab-4) 0 var(--ab-3); font-size: var(--gr-gross); line-height: 1.45; }
.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ab-3); }
.knopf { display: inline-flex; align-items: center; gap: 0.7rem; background: var(--tinte); color: var(--papier); text-decoration: none; font: inherit; font-weight: 520; padding: 0.9rem 1.5rem; border-radius: var(--radius-knopf); border: 0; cursor: pointer; transition: transform var(--dauer-kurz) var(--ease-aus), background var(--dauer-kurz); }
.knopf:hover { transform: translateY(-2px); background: var(--pflaume); }
.unterstrichen { font-weight: 520; text-underline-offset: 0.35em; text-decoration-thickness: 1px; }
.einstieg .bildspalte { grid-column: 8 / span 5; position: relative; }
.einstieg .bildspalte figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--sand); }
.einstieg .bildspalte img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.termin-schild { position: absolute; left: calc(-1 * clamp(2rem, 6vw, 6rem)); bottom: var(--ab-4); width: min(19rem, 80%); background: var(--salbei); padding: var(--ab-3); }
.termin-schild .marke { font-size: var(--gr-klein); font-weight: 520; display: flex; align-items: center; gap: 0.45rem; }
.termin-schild .marke::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--tinte); }
.termin-schild strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 2.3rem; line-height: 1; margin: 0.6rem 0 0.4rem; letter-spacing: -0.02em; }
.termin-schild p { margin: 0; font-size: 0.95rem; }

/* Bildhinweis (Symbolfoto / KI-generiert) */
figure { position: relative; }
.bildhinweis { position: absolute; left: 0.5rem; bottom: 0.5rem; z-index: 2; font-size: 0.52rem; font-weight: 500; line-height: 1; letter-spacing: 0.02em; color: oklch(0.215 0.012 60 / 0.55); background: oklch(0.985 0.004 90 / 0.45); border-radius: 4px; padding: 0.22rem 0.38rem; }

/* ---------- Eckdaten-Streifen ---------- */
.eckdaten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--ab-4); }
.eckdaten > div { padding: var(--ab-3) var(--rand) var(--ab-4); min-height: 13rem; display: flex; flex-direction: column; justify-content: space-between; gap: var(--ab-2); }
.eckdaten b { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 1.2rem + 2vw, 3.2rem); line-height: 1; letter-spacing: -0.02em; }
.eckdaten p { margin: 0; max-width: 26ch; }
.f-ocker { background: var(--ocker); } .f-salbei { background: var(--salbei); } .f-pflaume { background: var(--pflaume); color: var(--auf-dunkel); } .f-sand { background: var(--sand); } .f-himmel { background: var(--himmel); }

/* ---------- Abschnitts-Köpfe ---------- */
.abschnitt { padding: var(--ab-5) var(--rand); }
.kopfzeile { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ab-3); margin-bottom: var(--ab-4); align-items: end; }
.kopfzeile .marke { grid-column: 1 / span 3; margin: 0; font-size: var(--gr-text); color: var(--tinte-2); }
.kopfzeile h2 { grid-column: 4 / span 9; margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--gr-titel); line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance; }

/* ---------- Angebot als Kapitel ---------- */
.kapitel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: var(--ab-3); }
.kapitel figure { grid-column: 1 / span 7; margin: 0; min-height: clamp(20rem, 38vw, 34rem); overflow: hidden; background: var(--sand); }
.kapitel figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-aus); }
.kapitel:hover figure img { transform: scale(1.03); }
.kapitel .inhalt { grid-column: 8 / span 5; padding: var(--ab-4) clamp(1.2rem, 3vw, 3rem); display: flex; flex-direction: column; justify-content: space-between; gap: var(--ab-3); }
.kapitel.gespiegelt figure { grid-column: 6 / span 7; grid-row: 1; }
.kapitel.gespiegelt .inhalt { grid-column: 1 / span 5; grid-row: 1; }
.kapitel .nr { font-family: var(--serif); font-size: clamp(3.5rem, 2rem + 4vw, 6.5rem); line-height: 0.8; letter-spacing: -0.03em; }
.kapitel h3 { margin: 0 0 0.7rem; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 1.3rem + 2vw, 3.2rem); line-height: 1; letter-spacing: -0.02em; }
.kapitel p { margin: 0 0 1rem; max-width: 40ch; }
.kapitel ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid oklch(0.215 0.012 60 / 0.25); }
.kapitel li { padding: 0.6rem 0; border-bottom: 1px solid oklch(0.215 0.012 60 / 0.25); }
.kapitel .f-pflaume ul, .kapitel .f-pflaume li { border-color: oklch(0.955 0.012 80 / 0.25); }

/* ---------- Leitsatz ---------- */
.leitsatz { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ab-3); align-items: center; }
.leitsatz p.aussage { grid-column: 1 / span 8; margin: 0; font-family: var(--serif); font-size: clamp(2rem, 1rem + 3.4vw, 4.6rem); line-height: 1.04; letter-spacing: -0.02em; text-wrap: pretty; }
.leitsatz em { font-style: normal; color: var(--pflaume); }
.leitsatz figure { grid-column: 10 / span 3; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--sand); }
.leitsatz figure img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Für wen: vier Profile ---------- */
.profile { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--tinte); }
.profil { padding: var(--ab-3) var(--ab-3) var(--ab-4) 0; border-right: 1px solid var(--linie); }
.profil + .profil { padding-left: var(--ab-3); }
.profil:last-child { border-right: 0; }
.profil h3 { margin: 0 0 0.8rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.4rem); line-height: 1.05; letter-spacing: -0.02em; }
.profil p { margin: 0; color: var(--tinte-2); }
.profil .frage { margin-top: 1rem; color: var(--tinte); font-weight: 520; }

/* ---------- Ablauf (dunkel) ---------- */
.ablauf-dunkel { background: var(--pflaume); color: var(--auf-dunkel); }
.ablauf-dunkel .kopfzeile .marke { color: oklch(0.955 0.012 80 / 0.7); }
.ablauf-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ab-4) var(--ab-3); }
.ablauf-raster figure { grid-column: 1 / span 5; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.ablauf-raster figure img { width: 100%; height: 100%; object-fit: cover; }
.schritte { grid-column: 7 / span 6; list-style: none; margin: 0; padding: 0; counter-reset: s; align-self: center; }
.schritte li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--ab-2); padding: 1.4rem 0; border-top: 1px solid oklch(0.955 0.012 80 / 0.25); counter-increment: s; }
.schritte li:last-child { border-bottom: 1px solid oklch(0.955 0.012 80 / 0.25); }
.schritte li::before { content: "0" counter(s); font-family: var(--serif); font-size: 2.6rem; line-height: 0.9; }
.schritte h3 { margin: 0 0 0.3rem; font-size: var(--gr-gross); font-weight: 520; }
.schritte p { margin: 0; color: oklch(0.955 0.012 80 / 0.78); }

/* ---------- Termine ---------- */
.termine { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinte); }
.termine li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: var(--ab-2); align-items: center; padding: 1.4rem 0; border-bottom: 1px solid var(--linie); }
.termine .was { font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 1vw, 2.2rem); line-height: 1.05; letter-spacing: -0.015em; }
.termine .wo { color: var(--tinte-2); }
.termine .wann { display: inline-flex; align-items: center; gap: 0.45rem; }
.termine .wann::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ocker); }
.termine a { white-space: nowrap; }
.termine-hinweis { margin: var(--ab-3) 0 0; max-width: 60ch; color: var(--tinte-2); }

/* ---------- Person (Über uns) ---------- */
.person { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ab-3); align-items: center; }
.person figure { grid-column: 1 / span 5; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.person figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.person .text-spalte { grid-column: 7 / span 6; }
.person h2 { margin: 0 0 var(--ab-3); font-family: var(--serif); font-weight: 400; font-size: var(--gr-titel); line-height: 0.98; letter-spacing: -0.025em; }
.person p { margin: 0 0 1rem; max-width: 46ch; font-size: var(--gr-gross); line-height: 1.5; }
.person .name { font-family: var(--serif); font-size: 2.2rem; margin: var(--ab-3) 0 0.2rem; }

/* ---------- Neuigkeiten ---------- */
.feed { background: var(--salbei); padding: var(--ab-4) var(--rand); }
.feed-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--ab-3); }
.feed-kopf h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--gr-zwischen); letter-spacing: -0.02em; }
.feed-pfeile { display: flex; gap: 0.5rem; }
.feed-pfeile button { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; background: oklch(0.215 0.012 60 / 0.12); color: var(--tinte); font: inherit; cursor: pointer; }
.feed-pfeile button:hover { background: var(--tinte); color: var(--papier); }
.feed-spur { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 23rem); gap: var(--ab-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.feed-spur::-webkit-scrollbar { display: none; }
.meldung { scroll-snap-align: start; background: oklch(0.985 0.004 90 / 0.6); padding: var(--ab-3); display: flex; flex-direction: column; gap: 0.8rem; min-height: 15rem; }
.meldung time { font-size: var(--gr-klein); font-weight: 520; display: inline-flex; align-items: center; gap: 0.45rem; }
.meldung time::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--tinte); }
.meldung h3 { margin: 0; font-size: var(--gr-gross); font-weight: 520; line-height: 1.25; }
.meldung p { margin: 0; color: var(--tinte-2); }
.meldung a { margin-top: auto; font-weight: 520; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }

/* ---------- Fragen ---------- */
.fragen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ab-3); }
.fragen .kopf-links { grid-column: 1 / span 4; }
.fragen .kopf-links h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--gr-titel); line-height: 0.98; letter-spacing: -0.025em; }
.fragen .liste { grid-column: 6 / span 7; }
.fragen details { border-top: 1px solid var(--linie); }
.fragen details:last-child { border-bottom: 1px solid var(--linie); }
.fragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--ab-2); padding: 1.2rem 0; font-size: var(--gr-gross); font-weight: 480; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; font-family: var(--serif); font-size: 1.8rem; line-height: 1; transition: transform var(--dauer-kurz) var(--ease-aus); }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details p { margin: 0 0 1.2rem; max-width: 60ch; color: var(--tinte-2); }

/* ---------- Mitmachen ---------- */
.mitmachen { background: var(--ocker); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ab-3); padding: var(--ab-5) var(--rand); }
.mitmachen .links { grid-column: 1 / span 6; }
.mitmachen h2 { margin: 0 0 var(--ab-3); font-family: var(--serif); font-weight: 400; font-size: clamp(2.8rem, 1.2rem + 5vw, 7rem); line-height: 0.92; letter-spacing: -0.03em; }
.mitmachen .links p { max-width: 36ch; font-size: var(--gr-gross); margin: 0; }
.formular { grid-column: 8 / span 5; display: grid; gap: 0.9rem; align-self: end; }
.formular label { display: grid; gap: 0.35rem; font-weight: 520; font-size: 0.95rem; }
.formular input, .formular textarea { font: inherit; color: var(--tinte); background: oklch(0.985 0.004 90 / 0.75); border: 1px solid oklch(0.215 0.012 60 / 0.35); border-radius: 4px; padding: 0.8rem 0.9rem; }
.formular textarea { min-height: 6rem; resize: vertical; }
.formular .einwilligung { display: flex; gap: 0.6rem; font-weight: 400; font-size: var(--gr-klein); align-items: start; }
.formular .einwilligung input { width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; }
.formular .knopf { justify-self: start; }

/* ---------- Fuß ---------- */
.fuss { padding: var(--ab-4) var(--rand) var(--ab-3); }
.fuss .gross { font-family: var(--serif); font-size: clamp(3.4rem, 1rem + 11.5vw, 15rem); line-height: 0.85; letter-spacing: -0.04em; margin: 0 0 var(--ab-4); }
.fuss .zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ab-2); border-top: 1px solid var(--linie); padding-top: var(--ab-2); font-size: var(--gr-klein); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-size: var(--gr-text); }
.fuss nav a { text-decoration: none; }
.fuss nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.fuss .klein-grau { margin: 0; }

/* ---------- Unterseiten ---------- */
.seitenkopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ab-3); padding: var(--ab-4) var(--rand); align-items: end; }
.seitenkopf h1 { grid-column: 1 / span 8; margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 1.2rem + 6vw, 8rem); line-height: 0.9; letter-spacing: -0.03em; overflow-wrap: anywhere; hyphens: auto; }
.seitenkopf p { grid-column: 9 / span 4; margin: 0; color: var(--tinte-2); }
.seitenbild { margin: 0 var(--rand); aspect-ratio: 21 / 7; overflow: hidden; background: var(--sand); }
.seitenbild img { width: 100%; height: 100%; object-fit: cover; }
.text { padding: var(--ab-4) var(--rand) var(--ab-5); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ab-3); }
.text > .links { grid-column: 1 / span 3; }
.text > .spalte { grid-column: 5 / span 8; }
.text > .spalte > * { max-width: 70ch; }
.text h2 { font-family: var(--serif); font-weight: 400; font-size: var(--gr-zwischen); line-height: 1.1; letter-spacing: -0.01em; margin: var(--ab-4) 0 var(--ab-2); scroll-margin-top: 5rem; overflow-wrap: anywhere; hyphens: auto; }
.text h2:first-child { margin-top: 0; }
.text p, .text li { overflow-wrap: anywhere; }
.text a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.text ul { padding-left: 1.2rem; }
.text li { margin-bottom: 0.4rem; }
.angaben { width: 100%; border-collapse: collapse; margin: var(--ab-2) 0; }
.angaben th, .angaben td { text-align: left; vertical-align: top; padding: 0.7rem 0.8rem 0.7rem 0; border-bottom: 1px solid var(--linie); overflow-wrap: anywhere; }
.angaben th { width: 32%; font-weight: 560; }
.inhaltsverzeichnis { position: sticky; top: 5rem; font-size: 0.95rem; }
.inhaltsverzeichnis strong { font-weight: 560; }
.inhaltsverzeichnis ol { margin: var(--ab-1) 0 0; padding-left: 1.2rem; color: var(--tinte-2); }
.inhaltsverzeichnis a { text-decoration: none; }
.inhaltsverzeichnis a:hover { text-decoration: underline; }
.stand { margin-top: var(--ab-4); color: var(--tinte-2); font-size: var(--gr-klein); }
.text .formular { max-width: 560px; margin-top: var(--ab-3); }
.text .formular input, .text .formular textarea { background: var(--papier); border-color: var(--tinte); }

/* ---------- Menü fürs Handy ---------- */
.menue-knopf { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: none; align-items: center; gap: 0.5rem; background: var(--tinte); color: var(--papier); border: 0; border-radius: var(--radius-knopf); padding: 0.7rem 1.15rem; font: inherit; font-weight: 520; box-shadow: 0 8px 24px -10px oklch(0.2 0.01 60 / 0.6); cursor: pointer; }
.menue-knopf::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ocker); }
.menue { position: fixed; inset: 0; z-index: 45; background: var(--ocker); display: grid; grid-template-rows: auto 1fr auto; padding: var(--rand); opacity: 0; visibility: hidden; transition: opacity var(--dauer-kurz) var(--ease-aus), visibility 0s linear var(--dauer-kurz); }
.menue.offen { opacity: 1; visibility: visible; transition: opacity var(--dauer-kurz) var(--ease-aus); }
.menue nav { display: grid; align-content: center; gap: 0.2rem; }
.menue nav a { font-family: var(--serif); font-size: clamp(2.4rem, 11vw, 4rem); line-height: 1.08; text-decoration: none; letter-spacing: -0.02em; }
.menue .zu { justify-self: end; background: var(--papier); border: 0; border-radius: var(--radius-knopf); padding: 0.55rem 1rem; font: inherit; font-weight: 520; cursor: pointer; }
.menue small { color: oklch(0.215 0.012 60 / 0.7); }
body.menue-offen { overflow: hidden; }

/* Bewegung nur bei Hover (Bilder, Knöpfe); keine Scroll-Effekte, damit Inhalte immer voll sichtbar sind */

/* ---------- Tablet ---------- */
@media (max-width: 1020px) {
  .einstieg .einstieg-text, .einstieg .bildspalte { grid-column: 1 / -1; }
  .einstieg .bildspalte figure { aspect-ratio: 4 / 3; }
  .termin-schild { position: static; width: auto; }
  .eckdaten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kopfzeile .marke, .kopfzeile h2 { grid-column: 1 / -1; }
  .kapitel figure, .kapitel .inhalt, .kapitel.gespiegelt figure, .kapitel.gespiegelt .inhalt { grid-column: 1 / -1; grid-row: auto; }
  .kapitel figure { min-height: 0; aspect-ratio: 16 / 10; }
  .leitsatz p.aussage { grid-column: 1 / -1; }
  .leitsatz figure { grid-column: 1 / span 6; }
  .profile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profil:nth-child(2) { border-right: 0; }
  .profil:nth-child(3) { padding-left: 0; }
  .ablauf-raster figure, .schritte { grid-column: 1 / -1; }
  .ablauf-raster figure { aspect-ratio: 16 / 10; }
  .person figure, .person .text-spalte, .fragen .kopf-links, .fragen .liste, .mitmachen .links, .formular { grid-column: 1 / -1; }
  .person figure { aspect-ratio: 1 / 1; max-width: 34rem; }
  .termine li { grid-template-columns: 1fr 1fr; }
  .seitenkopf h1, .seitenkopf p, .text > .links, .text > .spalte { grid-column: 1 / -1; }
  .inhaltsverzeichnis { position: static; }
}
/* ---------- Handy ---------- */
@media (max-width: 640px) {
  .kopf nav a:not(.pille) { display: none; }
  .menue-knopf { display: inline-flex; }
  .einstieg h1 .einzug { padding-left: 0.5em; }
  .eckdaten > div { min-height: 10rem; }
  .profile { grid-template-columns: 1fr; }
  .profil, .profil + .profil { padding: var(--ab-3) 0; border-right: 0; border-bottom: 1px solid var(--linie); }
  .leitsatz figure { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .termine li { grid-template-columns: 1fr; gap: 0.4rem; }
  .seitenbild { aspect-ratio: 4 / 3; }
  .angaben, .angaben tbody, .angaben tr, .angaben th, .angaben td { display: block; width: 100%; }
  .angaben th { border-bottom: 0; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Blog-Karten */
.text > .spalte > .blog-raster { max-width: none; }
.blog-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ab-4) var(--ab-3); margin-top: var(--ab-3); }
.blog-karte figure { margin: 0 0 0.8rem; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.blog-karte figure img { width: 100%; height: 100%; object-fit: cover; }
.blog-karte h3 { margin: 0.2rem 0 0; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.01em; }
.blog-karte p { margin: 0; }
@media (max-width: 640px) { .blog-raster { grid-template-columns: 1fr; } }
/* Weiterlesen-Link in Kapiteln */
.kapitel .weiter { display: inline-flex; margin-top: 1rem; font-weight: 520; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }

/* ===== Fassung 4: Bildformate fest, Termin-Seite, neue Unterseiten ===== */
.kapitel figure { aspect-ratio: 16 / 9; min-height: 0; align-self: center; }
.leitsatz figure, .ablauf-raster figure, .person figure, .einstieg .bildspalte figure { aspect-ratio: 3 / 4; }
.blog-karte figure { aspect-ratio: 16 / 9; }
.seitenkopf-bild { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ab-3); padding: var(--ab-4) var(--rand) var(--ab-3); align-items: end; }
.seitenkopf-bild .links { grid-column: 1 / span 5; padding-bottom: var(--ab-2); }
.seitenkopf-bild h1 { margin: 0 0 var(--ab-3); font-family: var(--serif); font-weight: 400; font-size: clamp(2.8rem, 1.2rem + 5vw, 6.6rem); line-height: 0.92; letter-spacing: -0.03em; overflow-wrap: anywhere; hyphens: auto; }
.seitenkopf-bild p { margin: 0 0 var(--ab-3); color: var(--tinte-2); font-size: var(--gr-gross); max-width: 36ch; }
.seitenkopf-bild figure { grid-column: 6 / span 7; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sand); }
.seitenkopf-bild figure img { width: 100%; height: 100%; object-fit: cover; }
.karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ab-4) var(--ab-3); }
.karte { display: flex; flex-direction: column; gap: 0.7rem; text-decoration: none; }
.karte figure { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sand); }
.karte figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-aus); }
.karte:hover figure img { transform: scale(1.04); }
.karte h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); line-height: 1.05; letter-spacing: -0.015em; }
.karte p { margin: 0; color: var(--tinte-2); }
.karte .mehr { font-weight: 520; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.team-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team-raster .karte figure { aspect-ratio: 3 / 4; }
.team-raster .karte h3 { font-size: 1.6rem; }
.schritt-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ab-3); counter-reset: st; }
.schritt { counter-increment: st; }
.schritt figure { margin: 0 0 1rem; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sand); }
.schritt figure img { width: 100%; height: 100%; object-fit: cover; }
.schritt h3 { margin: 0 0 0.4rem; font-size: var(--gr-gross); font-weight: 520; }
.schritt h3::before { content: "0" counter(st) "\00a0\00a0"; font-family: var(--serif); font-weight: 400; color: var(--pflaume); }
.schritt p { margin: 0; color: var(--tinte-2); }
.termin-band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ab-3); align-items: center; background: var(--ocker); padding: var(--ab-5) var(--rand); }
.termin-band .links { grid-column: 1 / span 7; }
.termin-band h2 { margin: 0 0 var(--ab-2); font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 1.2rem + 4.6vw, 6.4rem); line-height: 0.92; letter-spacing: -0.03em; }
.termin-band p { margin: 0; max-width: 40ch; font-size: var(--gr-gross); }
.termin-band .rechts { grid-column: 9 / span 4; display: grid; gap: var(--ab-2); justify-items: start; }
.telefon { font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); text-decoration: none; letter-spacing: -0.01em; }
.termin-held { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ab-3); padding: var(--ab-4) var(--rand); align-items: center; }
.termin-held .links { grid-column: 1 / span 7; }
.termin-held .kicker { margin: 0 0 var(--ab-2); color: var(--tinte-2); }
.termin-held h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(3.2rem, 1.2rem + 7vw, 9rem); line-height: 0.88; letter-spacing: -0.035em; }
.termin-held .einleitung { max-width: 42ch; margin: var(--ab-3) 0; font-size: var(--gr-gross); }
.haken { list-style: none; margin: 0 0 var(--ab-3); padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.haken li::before { content: "\2713\00a0"; color: var(--pflaume); font-weight: 700; }
.termin-held .bildspalte { grid-column: 9 / span 4; }
.termin-held figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--sand); }
.termin-held figure img { width: 100%; height: 100%; object-fit: cover; }
.termin-held .bildname { margin: 0.6rem 0 0; font-size: var(--gr-klein); color: var(--tinte-2); }
.buchung { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ab-4); padding: var(--ab-4) var(--rand) var(--ab-5); background: var(--sand); }
.buchung form { grid-column: 1 / span 8; display: grid; gap: var(--ab-3); background: var(--papier); padding: clamp(1.2rem, 3vw, 2.6rem); position: relative; }
.buchung aside { grid-column: 9 / span 4; display: grid; gap: var(--ab-3); align-content: start; }
.buchung h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--gr-zwischen); letter-spacing: -0.01em; }
.schritt-titel { margin: 0 0 0.6rem; font-size: var(--gr-klein); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinte-2); }
.arten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.art { position: relative; }
.art input { position: absolute; opacity: 0; pointer-events: none; }
.art label { display: grid; gap: 0.35rem; height: 100%; padding: 1rem; border: 1px solid var(--linie); background: var(--papier); cursor: pointer; transition: border-color var(--dauer-kurz), background var(--dauer-kurz); }
.art label b { font-weight: 560; }
.art label span { font-size: var(--gr-klein); color: var(--tinte-2); }
.art label em { font-style: normal; font-size: 0.78rem; font-weight: 600; color: var(--pflaume); }
.art input:checked + label { border-color: var(--tinte); background: var(--salbei); }
.art input:focus-visible + label { outline: 2px solid var(--tinte); outline-offset: 2px; }
.felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.felder .breit { grid-column: 1 / -1; }
.feld { display: grid; gap: 0.35rem; font-weight: 520; font-size: 0.95rem; }
.feld input, .feld select, .feld textarea { font: inherit; font-weight: 420; color: var(--tinte); background: var(--papier); border: 1px solid oklch(0.215 0.012 60 / 0.3); border-radius: 4px; padding: 0.8rem 0.9rem; width: 100%; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--tinte); box-shadow: 0 0 0 3px oklch(0.735 0.115 78 / 0.35); }
.feld textarea { min-height: 7rem; resize: vertical; }
.einwilligung-zeile { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--gr-klein); }
.einwilligung-zeile input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--pflaume); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hinweis-fehler { background: oklch(0.385 0.075 350 / 0.12); border: 1px solid var(--pflaume); padding: 0.8rem 1rem; display: none; }
.hinweis-fehler.sichtbar { display: block; }
.kasten { background: var(--papier); padding: var(--ab-3); }
.kasten p { margin: 0.4rem 0 0; color: var(--tinte-2); }
.kasten h3 { margin: 0; font-size: var(--gr-gross); font-weight: 560; }
@media (max-width: 1020px) {
  .seitenkopf-bild .links, .seitenkopf-bild figure, .termin-held .links, .termin-held .bildspalte, .buchung form, .buchung aside, .termin-band .links, .termin-band .rechts { grid-column: 1 / -1; }
  .termin-held .bildspalte { max-width: 26rem; }
  .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .schritt-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arten { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .karten { grid-template-columns: 1fr; }
  .team-raster { grid-template-columns: 1fr 1fr; }
  .schritt-raster, .felder { grid-template-columns: 1fr; }
}
.buchung form, .buchung aside, .felder > *, .arten > * { min-width: 0; }
.feld input, .feld select, .feld textarea { min-width: 0; max-width: 100%; }
.termin-held .telefon { overflow-wrap: anywhere; }
@media (max-width: 1020px) { .buchung, .termin-held, .termin-band, .seitenkopf-bild { grid-template-columns: 1fr; } }
figure video.ki-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.wortmarke-klein img { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.12em; margin-right: 0.35rem; }

/* ===== Barrierefreiheit ===== */
.sprunglink { position: absolute; left: 1rem; top: -4rem; z-index: 60; background: var(--tinte); color: var(--papier); padding: 0.7rem 1.1rem; border-radius: var(--radius-knopf); font-weight: 560; text-decoration: none; transition: top var(--dauer-kurz) var(--ease-aus); }
.sprunglink:focus { top: 1rem; }
main:focus { outline: none; }
.kopf nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; }
.menue nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.video-pause { position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 3; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: oklch(0.985 0.004 90 / 0.85); color: var(--tinte); font-size: 0.8rem; letter-spacing: -0.1em; cursor: pointer; }
.video-pause:hover { background: var(--papier); }
.feed-pfeile button, .menue-knopf, .menue .zu { min-width: 2.75rem; min-height: 2.75rem; }