/* Schriften: Gordita (Bedienung), Ivar Headline (Überschriften), Lector (Lesetext).
   Lizenzpflichtige Webfonts – Lizenz muss die Domain ideastiftung.de abdecken. */
@font-face { font-family: "Gordita"; src: url("../fonts/Gordita-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gordita"; src: url("../fonts/Gordita-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Gordita"; src: url("../fonts/Gordita-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Ivar"; src: url("../fonts/IvarHeadline-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Ivar"; src: url("../fonts/IvarHeadline-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lector"; src: url("../fonts/Lector-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lector"; src: url("../fonts/Lector-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lector"; src: url("../fonts/Lector-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* Layout: einspaltig bis 700 px, Tablet 701–1023 px, Desktop ab 1024 px, große Monitore ab 1680 px.
   Schriftgrößen wachsen fließend mit (clamp) und starten nie unter den Mindestwerten. */
:root {
  /* Farben (Namen wie auf idea.de) */
  --red: #c42838;
  --red-dark: #a51f2e;
  --black: #000;
  --text: #111;
  --text-muted: #4a4a4a;   /* statt #707070: erfüllt 4,5:1 auch auf Blau und Grau */
  --line: #c9d3e0;
  --lightgray: #ccc;
  --gainsboro: #eee;
  --light-blue: #eaf1fd;
  --sky: #bed8f5;
  --dot: #c3cfdf;          /* Slider-Punkte: zartes Blaugrau */
  --dot-hover: #9fb0c6;
  --dot-active: #5d7290;
  --grey-bg: #f8f8f8;
  --white: #fff;

  --font-ui: "Gordita", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: "Ivar", Georgia, "Times New Roman", serif;
  --font-text: "Lector", Georgia, "Times New Roman", serif;

  /* Schriftgrößen (rem = folgt der Schriftgröße, die im Browser eingestellt ist) */
  --fs-body:  clamp(1.1875rem, 1rem + 0.35vw, 1.375rem);      /* 19 → 22 px  Lesetext */
  --fs-ui:    clamp(1.0625rem, 0.95rem + 0.25vw, 1.1875rem);  /* 17 → 19 px  Menü, Buttons, Formular */
  --fs-small: 1rem;                                           /* 16 px       Minimum für alles */
  --fs-h4:    clamp(1.1875rem, 1.05rem + 0.3vw, 1.3125rem);   /* 19 → 21 px */
  --fs-h3:    clamp(1.5rem, 1.25rem + 0.9vw, 2.125rem);       /* 24 → 34 px */
  --fs-h2:    clamp(2rem, 1.4rem + 2vw, 3.25rem);             /* 32 → 52 px */
  --fs-hero:  clamp(2.25rem, 1.2rem + 4.2vw, 5rem);           /* 36 → 80 px */
  --fs-verse: clamp(3rem, 1.6rem + 6vw, 7rem);                /* 48 → 112 px */
  --fs-quote: clamp(1.375rem, 1.1rem + 0.9vw, 2rem);          /* 22 → 32 px */

  /* Seitenränder: wachsen mit der Breite – 24 px (Handy) · ca. 46 px (Tablet hoch) · ca. 61 px (Tablet quer)
     · 80 px (Desktop). Inhalt max. 1200 px breit, auf großen Monitoren 1280 px. */
  --content: 1200px;
  --gutter: clamp(24px, 6vw, 80px);
  --section-y: clamp(88px, 10vw, 150px);   /* Abstand oben/unten je Bereich: 88 px (Handy/Tablet) bis 150 px */
  --bar-h: 72px;
  --logo-w: 190px;
  --tap: 48px;
}
@media (max-width: 380px) { :root { --logo-w: 160px; } }
@media (min-width: 1024px) { :root { --bar-h: 92px; --logo-w: 230px; } }
@media (min-width: 1680px) { :root { --content: 1280px; --bar-h: 100px; --logo-w: 250px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--white); color: var(--text); font: 400 var(--fs-body)/1.6 var(--font-text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; margin: 0 0 .7em; text-wrap: balance; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font: 500 var(--fs-h4)/1.3 var(--font-ui); color: var(--red); margin: 1.6em 0 .35em; }
p { margin: 0 0 1em; }
main p { max-width: 70ch; }
a { color: var(--red); text-underline-offset: .15em; }
a:hover { color: var(--red-dark); }
strong, b { font-weight: 700; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.container { max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.section { padding-block: var(--section-y); }
.band-blue { background: var(--light-blue); }
.band-grey { background: var(--grey-bg); }
.quotes { padding-bottom: clamp(24px, 3vw, 44px); }
.section-title { margin-bottom: .55em; }

/* Buttons: eckig, Gordita Medium, mind. 52 px hoch */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .7em 1.4em; border: 2px solid var(--black); border-radius: 0; text-decoration: none; font: 500 var(--fs-ui)/1.25 var(--font-ui); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn--primary { background: var(--black); color: var(--white); }
.btn--primary:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.btn--secondary { background: var(--red); border-color: var(--red); color: var(--white); }
.btn--secondary:hover { background: var(--red-dark); border-color: var(--red-dark); color: var(--white); }
.btn--default { background: transparent; color: var(--black); }
.btn--default:hover { background: var(--black); color: var(--white); }
.btn-group { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 480px) { .btn-group .btn { flex: 1 1 100%; } }

/* ---------- Header ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--white); z-index: 11; }
.site-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; height: var(--bar-h); margin-bottom: calc(-1 * var(--bar-h)); font-family: var(--font-ui); transition: background .2s, box-shadow .2s; }
.site-bar.is-scrolled, .site-bar.menu-open { background: var(--white); box-shadow: 0 1px 0 var(--lightgray); }
.site-bar > .container { position: relative; height: 100%; max-width: none; } /* Menüzeile nutzt die volle Breite, nur der Seitenrand bleibt */
.site-bar__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.site-bar__logo { display: flex; align-items: center; min-height: var(--tap); flex: none; margin-left: calc(var(--logo-w) * -0.053); }
.site-bar__logo img { width: var(--logo-w); }
.site-nav ul { list-style: none; display: flex; gap: clamp(20px, 2.6vw, 40px); margin: 0; padding: 0; }
.site-nav a, .site-bar__cta { display: flex; align-items: center; min-height: var(--tap); color: var(--black); text-decoration: none; font: 500 var(--fs-ui)/1.2 var(--font-ui); }
.site-nav a:hover, .site-bar__cta:hover { color: var(--red); }
.site-bar__cta { gap: 8px; }
.site-bar__cta svg { width: 10px; height: 16px; stroke: var(--red); fill: none; stroke-width: 2.2; }
.only-mobile { display: none; }
.nav-toggle { display: none; align-items: center; gap: 10px; min-height: var(--tap); padding: 0 4px; background: none; border: 0; cursor: pointer; font: 500 var(--fs-ui)/1 var(--font-ui); color: var(--black); }
.nav-toggle__icon { position: relative; width: 22px; height: 2px; background: currentColor; transition: background .2s; }
.nav-toggle__icon::before, .nav-toggle__icon::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; transition: transform .2s; }
.nav-toggle__icon::before { top: -7px; } .nav-toggle__icon::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { transform: translateY(-7px) rotate(-45deg); }

/* Klappmenü bis 900 px (Smartphone + Tablet hoch) */
@media (max-width: 900px) {
  .site-bar__cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .only-mobile { display: block; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--lightgray); box-shadow: 0 12px 24px rgba(0,0,0,.08);
    padding: 4px max(var(--gutter), env(safe-area-inset-right, 0px)) 16px max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { min-height: 60px; font-size: 1.25rem; border-bottom: 1px solid var(--gainsboro); }
  .site-nav li:last-child a { border-bottom: 0; color: var(--red); }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; color: var(--black);
  background: linear-gradient(to right, #e2e9ef, #dbe5ef 50%, #d3dfeb);
  --img-h: 66.667vw;
  /* Bildhöhe minus der Himmelsfläche über der Hand des Jungen (ca. 21 % der Bildhöhe):
     so steht die Überschrift immer frei, egal wie viele Zeilen sie braucht */
  padding-bottom: calc(var(--img-h) * 0.79); }
.hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--img-h);
  background: url('../images/header.jpg') center bottom / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%); }
.hero__title { position: relative; margin: 0; padding-top: calc(var(--bar-h) + clamp(16px, 3vw, 48px)); padding-bottom: clamp(16px, 2.5vw, 40px); text-align: center; font: 700 var(--fs-hero)/1.08 var(--font-head); }
/* Tablet und Desktop: mehr Luft zwischen Menü, Überschrift und Motiv; Bild etwas größer
   (seitlich leicht beschnitten, Hand und Fuß bleiben drin) */
@media (min-width: 701px) {
  .hero { --img-h: max(70vw, 60vh); }
  @supports (height: 100svh) { .hero { --img-h: max(70vw, 60svh); } }
  .hero::before { background-size: cover; background-position: center bottom; }
  .hero__title { padding-top: calc(var(--bar-h) + clamp(48px, 6.5vw, 130px)); padding-bottom: clamp(64px, 7vw, 140px); }
}
.br-m { display: none; }
@media (max-width: 700px) {
  .br-m { display: inline; } .br-d { display: none; }
  .hero__title { font-size: min(10.5vw, 2.75rem); line-height: 1.1; }
}
@media (max-width: 700px) {
  /* Handy: Header füllt den ganzen Bildschirm. Das Bild wird höher (mind. 58 % der Bildschirmhöhe)
     und seitlich so beschnitten, dass Hand, Junge und Großvater im Bild bleiben. */
  .hero { --img-h: max(92vw, 58vh); min-height: 100vh; display: flex; flex-direction: column; }
  @supports (height: 100svh) { .hero { --img-h: max(92vw, 58svh); min-height: 100svh; } }
  .hero > .container { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; }
  .hero::before { background-size: cover; background-position: 55% bottom; }
}

/* Handy: jeder Bereich ist mindestens eine Bildschirmhöhe hoch (abzüglich Menüleiste),
   Inhalt steht dann vertikal mittig. Längere Bereiche wachsen einfach mit. */
@media (max-width: 700px) {
  main > section:not(.hero) { min-height: calc(100vh - var(--bar-h)); display: flex; flex-direction: column; justify-content: center; }
  @supports (height: 100svh) { main > section:not(.hero) { min-height: calc(100svh - var(--bar-h)); } }
  main > section:not(.hero) > .container { width: 100%; }
  main > section.verse { min-height: 50vh; }
  main > section.quotes { min-height: 70vh; }
  @supports (height: 100svh) { main > section.verse { min-height: 50svh; } main > section.quotes { min-height: 70svh; } }
  .quotes { padding-bottom: 48px; }
}

/* ---------- Layout-Helfer ---------- */
.grid-2 { display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: 1fr 1fr; }
.grid-2-1 { display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid-2 > *, .grid-2-1 > * { min-width: 0; }
.columns-2 { column-count: 2; column-gap: clamp(2rem, 4vw, 4rem); }
.columns-2 p { break-inside: avoid; }
@media (max-width: 1023px) { .columns-2 { column-count: 1; } }
@media (max-width: 900px)  { .grid-2 { grid-template-columns: 1fr; } .grid-2, .grid-2-1 { row-gap: 3.5rem; } }
@media (max-width: 900px)  { .grid-2-1 { grid-template-columns: 1fr; } }

/* ---------- Zitat-Slider ---------- */
.slider { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 3fr); column-gap: clamp(1.5rem, 4vw, 4rem); }
.slider__track { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; touch-action: pan-y; }
.slide { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; grid-template-areas: "img ." "img quote" "img cite" "img ."; grid-template-rows: 1fr auto auto 1fr; align-items: start;
  margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.slide__img { grid-area: img; align-self: center; max-width: 260px; width: 100%; }
.slide blockquote { grid-area: quote; margin: 0; font: italic 400 var(--fs-quote)/1.45 var(--font-text); }
.slide blockquote p { margin: 0; max-width: 40ch; }
.slide figcaption { grid-area: cite; margin-top: 1rem; font: 500 var(--fs-ui)/1.35 var(--font-ui); color: var(--text-muted); }
.slide figcaption::before { content: "— "; }
img.slide__img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; height: auto; }
.placeholder-portrait { aspect-ratio: 4 / 5; background: var(--sky); display: flex; align-items: center; justify-content: center; }
.placeholder-portrait svg { width: 45%; fill: rgba(255,255,255,.8); }
.slider__controls { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.slider__dots { display: flex; }
/* sichtbarer Punkt 7 px, Klickfläche 28 px */
.slider__dot { width: 28px; height: 28px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; padding: 0; }
.slider__dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); transition: background .25s; }
.slider__dot:hover::before { background: var(--dot-hover); }
.slider__dot[aria-current="true"]::before { background: var(--dot-active); }
/* Bild bleibt links neben dem Zitat – nur auf schmalen Handys (bis 480 px) steht es klein neben dem Namen */
@media (max-width: 700px) and (min-width: 481px) {
  .slider { grid-template-columns: minmax(110px, 1fr) minmax(0, 2.6fr); column-gap: 1.5rem; }
}
/* Handy: Bild, Zitat und Name untereinander und mittig, je 15 % Rand links und rechts */
@media (max-width: 480px) {
  .quotes > .container { padding-left: max(15vw, env(safe-area-inset-left, 0px)); padding-right: max(15vw, env(safe-area-inset-right, 0px)); }
  .slider { grid-template-columns: 1fr; }
  .slide { grid-template-columns: 1fr; grid-template-areas: "img" "quote" "cite"; grid-template-rows: auto auto auto; align-content: center; justify-items: center; text-align: center; }
  .slide__img { width: 112px; margin-bottom: 1.5rem; }
  .slide blockquote p { margin-inline: auto; }
  .slide figcaption { margin-top: 1.25rem; }
}


/* ---------- Förderprojekte: Reiter (ab 701 px) / Akkordeon (Smartphone) ---------- */
.tabs__list { display: flex; flex-wrap: wrap; gap: 0 clamp(1.25rem, 2.4vw, 2.25rem); list-style: none; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); padding: 0; border-bottom: 1px solid var(--line); }
.tabs__list button { min-height: var(--tap); background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: .6rem 0; font: 500 var(--fs-ui)/1.3 var(--font-ui); color: var(--text-muted); cursor: pointer; text-align: left; }
.tabs__list button:hover { color: var(--black); }
.tabs__list button[aria-selected="true"] { color: var(--black); border-color: var(--red); }
.project__heading { display: none; margin: 0; font: inherit; }
.tabs__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.tabs__panel > div { min-width: 0; }
/* Hochformat-Bilder: auf Desktop auf 4:5 begrenzt, Ausschnitt auf die Gesichter */
/* Projektbilder: quadratisch, solange Text und Bild nebeneinander stehen; darunter 6:4 quer.
   Ausschnitt je Bild über object-position */
.tabs__panel img { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: cover; }
/* Logo: eigene Höhe, nicht ins Quadrat bzw. 6:4-Format gezwungen */
.tabs__panel img.contain { aspect-ratio: 581 / 233; object-fit: contain; background: var(--white); padding: 0; }
.project-figure { margin: 0; min-width: 0; }
/* Zwei Bilder in einem Projekt: nebeneinander, immer quadratisch (Podcast-Cover wird nie beschnitten) */
.figure-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.5vw, 16px); min-width: 0; align-items: start; }
.tabs__panel .figure-pair img { aspect-ratio: 1 / 1; }
.credit { margin-top: .6rem; font: 400 var(--fs-small)/1.4 var(--font-ui); color: var(--text-muted); }
.credit a { color: inherit; }
.credit a:hover { color: var(--red); }
@media (max-width: 1023px) { .tabs__panel { grid-template-columns: 1fr; } .tabs__panel .project-figure, .tabs__panel .figure-pair { order: -1; } .tabs__panel img { aspect-ratio: 3 / 2; max-width: 100%; } .tabs__panel img.contain { aspect-ratio: 581 / 233; padding: 0; } }
@media (max-width: 700px) {
  .tabs__list { display: none; }
  .project { border-bottom: 1px solid var(--line); }
  .project:first-of-type { border-top: 1px solid var(--line); }
  .project__heading { display: block; }
  .project__toggle { width: 100%; overflow-wrap: anywhere; hyphens: auto; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 14px 0; background: none; border: 0; cursor: pointer; text-align: left; font: 500 1.1875rem/1.3 var(--font-ui); color: var(--black); }
  .project__toggle::after { content: ""; flex: none; width: 12px; height: 12px; margin-right: 6px; border-right: 2.5px solid var(--red); border-bottom: 2.5px solid var(--red); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
  .project__toggle[aria-expanded="true"]::after { transform: translateY(3px) rotate(-135deg); }
  .tabs__panel { padding-bottom: 1.75rem; gap: 1.25rem; }
  .tabs__panel .panel-title { display: none; }
  .tabs__panel img { max-width: 100%; }
}
@media (max-width: 380px) { .project__toggle { font-size: 1.0625rem; } }

/* ---------- Bibelvers ---------- */
.verse { text-align: center; padding-block: clamp(90px, 14vw, 200px); }
.verse__text { margin: 0; font: 700 var(--fs-verse)/1.02 var(--font-head); color: var(--black); }
.verse__text span { display: block; }
.verse .mark { display: inline; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: .08em; text-underline-offset: .06em; text-decoration-skip-ink: none; }
.verse__source { margin-top: 1.5rem; font: 500 var(--fs-ui)/1.3 var(--font-ui); color: var(--red); }

/* ---------- Bankverbindung ---------- */
.bank-box { background: var(--red); color: var(--white); padding: clamp(1.5rem, 3vw, 2.25rem); align-self: start; font-family: var(--font-ui); }
.bank-box h2 { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: .5rem; }
.bank-box h3 { font: 500 var(--fs-h4)/1.3 var(--font-ui); margin-bottom: .75rem; }
.bank-box p { font-size: var(--fs-ui); line-height: 1.6; }
.bank-box .iban { font-variant-numeric: tabular-nums; }
.bank-box .iban { display: block; }
@media (min-width: 360px) { .bank-box .iban { white-space: nowrap; } }
@media (min-width: 901px) { #helfen .grid-2-1 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }

/* ---------- Kontakt ---------- */
#contact-form { font-family: var(--font-ui); font-size: var(--fs-ui); max-width: 640px; }
.form-hint { font: 400 var(--fs-small)/1.4 var(--font-ui); color: var(--text-muted); margin-bottom: 2rem; }
.form-field { margin: 0 0 1.85rem; padding: 0; border: 0; min-width: 0; }
.form-field label:not(.choice), .form-field legend { display: block; font-weight: 500; margin-bottom: .6rem; padding: 0; }
.form-field input[type=text], .form-field input[type=email], .form-field input[type=tel], .form-field textarea {
  width: 100%; min-height: 54px; padding: .7rem .9rem; border: 2px solid #8a8a8a; border-radius: 0; font: 400 1.1875rem/1.4 var(--font-ui); color: var(--text); background: var(--white); }
.form-field input:focus, .form-field textarea:focus { outline: 3px solid var(--red); outline-offset: 0; border-color: var(--black); }
.choice { display: flex; align-items: flex-start; gap: .75rem; padding: .5rem 0; font-weight: 400; line-height: 1.45; color: var(--text); cursor: pointer; }
.choice input { flex: none; width: 24px; height: 24px; margin: .1em 0 0; accent-color: var(--red); }
.req { color: var(--red); }
.contact-person { font-family: var(--font-ui); font-size: var(--fs-ui); }
.contact-person__photo { width: 100%; max-width: 220px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.contact-person h3 { margin-top: 2rem; }
.contact-person .tel { white-space: nowrap; }
@media (max-width: 900px) {
  .contact-person { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 1.25rem; align-items: center; border-top: 1px solid var(--lightgray); padding-top: 2rem; }
  .contact-person__photo { grid-row: 1; }
  .contact-person > p:first-of-type { margin: 0 !important; }
  .contact-person h3, .contact-person h3 + p { grid-column: 1 / -1; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--gainsboro); border-top: 1px solid var(--lightgray); padding-block: 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); font-family: var(--font-ui); }
.site-footer .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin: 0; padding: 0; }
.site-footer a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text-muted); text-decoration: none; font-size: var(--fs-ui); }
.site-footer a:hover { color: var(--red); text-decoration: underline; }
.to-top { gap: .5rem; }

/* ---------- Formular-Rückmeldung ---------- */
.form-status { margin: 0 0 2rem; padding: 1.1rem 1.25rem; border-left: 4px solid var(--black); background: var(--white); font: 500 var(--fs-ui)/1.45 var(--font-ui); max-width: 640px; }
.form-status--ok { border-color: #2e7d4f; }
.form-status--fehler { border-color: var(--red); }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
.subpage { padding-top: calc(var(--bar-h) + clamp(32px, 6vw, 80px)); padding-bottom: var(--section-y); }
.subpage-body .site-bar { background: var(--white); box-shadow: 0 1px 0 var(--lightgray); }
.subpage h1 { font-size: var(--fs-h2); }
.subpage h2 { font-size: var(--fs-h3); margin-top: 1.6em; }