/* site.css — Projekt-CSS. Farben und Schriften kommen aus tokens-marke.css,
   Radius, Schatten, Dauer und Layout aus tokens-basis.css. Hier steht kein
   Farbwert und keine Dauer hart im Code (WEBSEITEN-STANDARD Abschnitt 14).

   Das Einblenden beim Scrollen liegt in reveal.css, die Handlungsleiste und die
   Brotkrumen in bausteine.css — beide Sorte A, hier nichts davon wiederholen.

   Projekt: Duttlinger Mitarbeiter-Funnel · Stand 19.08.2026 */

*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body); color:var(--ink); background:var(--white);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
p{ margin:0 0 1em; color:var(--ink-soft); }
h1,h2,h3{ font-family:var(--font-head); color:var(--ink); line-height:1.12; letter-spacing:-.015em; margin:0 0 .5em; font-weight:700; }

.wrap{ max-width:960px; margin:0 auto; padding:0 20px; }
.center{ text-align:center; }

/* Skip-Link */
/* Versteckt über translate, nicht über einen top-Wert: der müsste die Höhe des
   Links kennen und ragte bei umbrechendem Text sichtbar in die Seite. Außerdem
   animiert transform ohne Layout-Neuberechnung (Bewegungsregel 1). */
.skip{
  position:absolute; left:50%; top:0; transform:translate(-50%,-100%); z-index:100;
  padding:12px 22px; background:var(--brand); color:var(--white); text-decoration:none;
  border-radius:0 0 var(--radius-sm) var(--radius-sm); transition:transform var(--dur-base) var(--ease);
}
.skip:focus{ transform:translate(-50%,0); outline:none; }

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

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

/* ── Kopf ───────────────────────────────────────────────────────────────── */
.header{
  background:rgba(255,255,255,.94); border-bottom:1px solid var(--line);
  padding:10px 0; position:sticky; top:0; z-index:30;
}
/* Logo links, Handlungsknopf rechts. Auf schmalen Bildschirmen bleibt der Knopf
   stehen und wird kleiner — er ist der einzige Weg in den Check, der immer
   sichtbar ist. */
.header-inner{
  max-width:var(--container); margin:0 auto; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
@media (max-width:520px){ .header-inner{ padding:0 12px; gap:8px; } }
.marke{ display:inline-flex; align-items:center; line-height:1; }
.marke-logo{ height:38px; width:auto; display:block; }
@media (max-width:480px){
  .marke-logo{ height:28px; }
}

/* Zweistufige Knopfbeschriftung. Ausgeschrieben nimmt der Knopf auf dem Telefon
   die halbe Zeile und wiegt so schwer wie der Hauptknopf im Inhalt. */
.nur-schmal{ display:none; }
@media (max-width:480px){
  .nur-breit{ display:none; }
  .nur-schmal{ display:inline; }
}

/* ── Fortschritt ────────────────────────────────────────────────────────── */
.progress{ max-width:600px; margin:0 auto; padding:18px 20px 0; }
.progress .lbl{ display:flex; justify-content:space-between; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:8px; }
.progress .bar{ height:7px; background:var(--line); border-radius:999px; overflow:hidden; }
.progress .fill{ height:100%; width:0; background:linear-gradient(90deg,var(--brand-deep),var(--brand)); border-radius:999px; transition:width var(--dur-slow) var(--ease); }

/* ── Schrittwechsel ─────────────────────────────────────────────────────── */
/* Scroll-Anchoring aus: sonst hält der Browser beim Schrittwechsel den sichtbaren
   Bereich fest und scrollt gegen den Sprung nach oben an. */
body{ overflow-anchor:none; }
.page{ display:none; }
.page.active{ display:block; animation:seite-auf var(--dur-slow) var(--ease); }
@keyframes seite-auf{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .page.active{ animation:none; } }

/* ── Knöpfe ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--brand); color:var(--white); border:none; border-radius:var(--radius);
  padding:17px 34px; font-family:inherit; font-size:17px; font-weight:600; cursor:pointer;
  min-height:44px; text-decoration:none;
  box-shadow:0 12px 24px -12px rgb(var(--brand-rgb) / .6);
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn:hover{ background:var(--brand-deep); transform:translateY(-2px); box-shadow:0 16px 30px -12px rgb(var(--brand-deep-rgb) / .55); }
.btn:active{ transform:translateY(0); }
.btn[disabled]{ opacity:.7; cursor:default; transform:none; box-shadow:none; }
.btn--still{ background:transparent; color:var(--brand-deep); border:1.5px solid var(--line); box-shadow:none; font-size:15px; padding:13px 24px; }
.btn--still:hover{ background:var(--brand-light); color:var(--brand-deep); transform:none; box-shadow:none; }

/* Knopf in der Kopfleiste: kleiner als der Hauptknopf, ohne Schatten und ohne
   Anheben — er sitzt in einer schmalen Leiste und soll dort ruhig bleiben.
   Steht bewusst NACH .btn: gleiche Spezifität, also gewinnt die spätere Regel. */
.btn--kopf{ flex:none; min-height:40px; padding:10px 18px; font-size:14.5px; box-shadow:none; }
.btn--kopf:hover{ transform:none; box-shadow:none; }
@media (max-width:520px){ .btn--kopf{ padding:9px 13px; font-size:13px; } }

.back{ background:none; border:none; color:var(--ink-soft); font-family:inherit; font-size:14px;
  cursor:pointer; margin-top:22px; text-decoration:underline; padding:10px; min-height:44px; }
.back:hover{ color:var(--ink); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{ background:radial-gradient(120% 90% at 50% -10%, var(--brand-light) 0%, var(--surface-deep) 48%, var(--white) 82%); text-align:center; padding:52px 0 46px; }
.eyebrow{ display:inline-flex; align-items:center; gap:7px; background:var(--white); border:1px solid var(--line);
  color:var(--brand-deep); font-weight:600; font-size:13px; padding:7px 15px; border-radius:999px; margin-bottom:22px; }
.eyebrow svg{ width:15px; height:15px; }
.hero h1{ font-size:clamp(32px,6vw,54px); max-width:16ch; margin:0 auto; line-height:1.04; }
.hero h1 em{ font-style:normal; color:var(--brand); }
.hero .lead{ font-size:clamp(15px,2.3vw,18px); max-width:48ch; margin:22px auto 0; }
.hero-cta{ margin-top:28px; }
.loc-pill{ display:inline-flex; align-items:center; gap:7px; background:var(--brand-wash); color:var(--brand-deep);
  font-weight:600; border-radius:999px; padding:9px 16px; font-size:14px; margin-top:20px; }
.loc-pill svg{ width:16px; height:16px; flex:none; }
.hero-img{ margin:40px auto 0; max-width:900px; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/9; box-shadow:var(--shadow-lg); }
.hero-img img{ width:100%; height:100%; object-fit:cover; }

/* ── Vertrauensleiste (ohne Überschrift, Abschnitt 5a) ──────────────────── */
.vertrauen{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:900px; margin:34px auto 0; }
@media (max-width:820px){ .vertrauen{ grid-template-columns:1fr 1fr; } }
.vertrauen div{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:16px 14px; text-align:center; }
.vertrauen--drei{ grid-template-columns:repeat(3,1fr); max-width:820px; }
@media (max-width:820px){ .vertrauen--drei{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .vertrauen--drei{ grid-template-columns:1fr 1fr; } }
.vertrauen b{ display:block; font-size:15px; color:var(--ink); font-weight:600; }
.vertrauen small{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:3px; }

/* ── Abschnitte ─────────────────────────────────────────────────────────── */
.section{ padding:54px 0; }
.section--tint{ background:var(--bg); }
.section--soft{ background:var(--surface-deep); }
.tag{ display:inline-block; background:var(--brand-wash); color:var(--brand-deep); font-weight:600; font-size:13px; padding:6px 14px; border-radius:999px; margin-bottom:14px; }
.lead-c{ max-width:56ch; margin:0 auto 6px; }
.section h2{ font-size:clamp(24px,4.2vw,34px); }

/* Offene Stellen — drei Karten nebeneinander, auf dem Telefon untereinander */
.stellen{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:900px; margin:28px auto 0; text-align:left; }
@media (max-width:820px){ .stellen{ grid-template-columns:1fr; } }
.stellen > div{ background:var(--white); border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--radius); padding:20px; }
.stellen b{ display:block; font-size:16px; color:var(--brand-deep); margin-bottom:6px; }
.stellen p{ margin:0; font-size:14px; line-height:1.55; }

/* Sektionsmotiv mit Bildunterschrift */
.motiv{ max-width:560px; margin:0 auto 30px; }
.motiv img{ width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.motiv figcaption{ margin-top:12px; font-size:13.5px; color:var(--ink-soft); line-height:1.5; }

/* Gegenüberstellung „kennen Sie / bei uns" */
.gegen{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:860px; margin:30px auto 0; text-align:left; }
@media (max-width:760px){ .gegen{ grid-template-columns:1fr; } }
.gegen-sp{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; }
.gegen-sp h3{ font-size:17px; margin-bottom:14px; }
.gegen-sp--wir{ border-color:var(--brand); box-shadow:0 16px 36px -26px rgb(var(--brand-deep-rgb) / .5); }
.gegen-sp ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.gegen-sp li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink-soft); }
.gegen-sp li svg{ width:19px; height:19px; flex:none; margin-top:2px; }
.gegen-sp--wir li{ color:var(--ink); font-weight:500; }
.gegen-sp--wir li svg{ color:var(--brand); }
.gegen-sp--alt li svg{ color:var(--ink-soft); opacity:.6; }

/* Ansprechpartner */
.contactcard{ display:grid; grid-template-columns:150px 1fr; gap:26px; align-items:center; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; max-width:720px; margin:26px auto 0;
  text-align:left; box-shadow:var(--shadow); }
@media (max-width:600px){ .contactcard{ grid-template-columns:1fr; text-align:center; justify-items:center; } }
.contactcard .ap-foto{ width:150px; height:150px; border-radius:50%; object-fit:cover; }
.contactcard h3{ margin:0 0 2px; font-size:20px; }
.contactcard .role{ color:var(--brand-deep); font-weight:600; font-size:14px; margin-bottom:12px; }
.ap-lines a{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-weight:600; text-decoration:none; margin:4px 18px 4px 0; font-size:15px; }
.ap-lines a:hover{ color:var(--brand); }
.ap-lines svg{ width:17px; height:17px; color:var(--brand-deep); flex:none; }
.ap-note{ margin:14px 0 0; font-size:14px; font-style:italic; }

/* FAQ */
.faq{ max-width:720px; margin:28px auto 0; text-align:left; }
.faq details{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:2px 20px; margin-bottom:12px; }
.faq summary{ cursor:pointer; list-style:none; padding:16px 0; font-weight:600; color:var(--ink); display:flex; justify-content:space-between; gap:12px; font-size:15.5px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--brand); font-size:24px; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq p{ padding:0 0 16px; margin:0; font-size:14.5px; }

/* ── Schritt-Bildschirme ────────────────────────────────────────────────── */
.shell{ max-width:620px; margin:0 auto; padding:34px 20px 60px; text-align:center; }
.q{ font-size:clamp(24px,4.6vw,34px); margin:0 0 6px; }
.qsub{ font-size:15.5px; max-width:46ch; margin:0 auto 4px; }

.opts{ margin:28px auto 0; max-width:560px; }
.ocard{ display:flex; align-items:center; gap:16px; width:100%; background:var(--white); border:1.5px solid var(--line);
  border-radius:var(--radius); padding:18px 20px; cursor:pointer; text-align:left; font-family:inherit; min-height:44px;
  box-shadow:var(--shadow); transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.opts .ocard + .ocard{ margin-top:13px; }
.ocard:hover{ border-color:var(--brand); box-shadow:0 14px 28px -16px rgb(var(--brand-rgb) / .5); transform:translateY(-2px); }
.ocard-ic{ width:52px; height:52px; flex:none; border-radius:var(--radius); background:var(--brand-wash); display:grid; place-items:center; color:var(--brand-deep); }
.ocard-ic svg{ width:26px; height:26px; }
.ocard-tx{ flex:1; }
.ocard-tx b{ display:block; font-size:16.5px; color:var(--ink); font-weight:600; }
.ocard-tx small{ display:block; font-size:13px; color:var(--ink-soft); margin-top:2px; }
.ocard-ch{ color:var(--line); font-size:26px; flex:none; line-height:1; }
.ocard.is-selected{ border-color:var(--brand); background:var(--brand-light); }
.ocard.is-selected .ocard-ch{ font-size:0; }
.ocard.is-selected .ocard-ch::before{ content:"✓"; color:var(--brand); font-weight:700; font-size:20px; }

.ogrid{ display:grid; grid-template-columns:1fr 1fr; gap:13px; margin:28px auto 0; max-width:560px; }
@media (max-width:460px){ .ogrid{ grid-template-columns:1fr; } }
.ogrid .ocard{ padding:16px 18px; }
.ogrid .ocard-tx b{ font-size:15.5px; }

.note{ margin:18px auto 0; font-size:13.5px; color:var(--brand-deep); background:var(--brand-wash); border-radius:var(--radius); padding:13px 16px; max-width:560px; }
.reassure{ margin-top:22px; font-size:12.5px; color:var(--ink-soft); display:inline-flex; gap:7px; align-items:center; justify-content:center; }
.reassure svg{ width:15px; height:15px; color:var(--brand); flex:none; }
.benefits{ display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; margin-top:22px; color:var(--ink-soft); font-size:13px; font-weight:500; }
.benefits span{ display:inline-flex; gap:6px; align-items:center; }
.benefits svg{ width:15px; height:15px; color:var(--brand); }

/* Staffelung der Auswahlkarten */
@keyframes karte-auf{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.js .page.active .opts>.ocard, .js .page.active .ogrid>.ocard{ animation:karte-auf var(--dur-slow) var(--ease) both; }
.js .page.active .ocard:nth-child(2){ animation-delay:50ms; }
.js .page.active .ocard:nth-child(3){ animation-delay:100ms; }
.js .page.active .ocard:nth-child(4){ animation-delay:150ms; }
.js .page.active .ocard:nth-child(5){ animation-delay:200ms; }
@media (prefers-reduced-motion:reduce){ .js .page.active .ocard{ animation:none; } }

/* ── Analyse ────────────────────────────────────────────────────────────── */
.spin{ width:64px; height:64px; border:5px solid var(--brand-wash); border-top-color:var(--brand); border-radius:50%; animation:dreh .9s linear infinite; margin:6px auto 24px; }
@keyframes dreh{ to{ transform:rotate(360deg); } }
.alist{ max-width:420px; margin:26px auto 0; text-align:left; display:flex; flex-direction:column; gap:12px; }
.aitem{ display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--ink-soft); opacity:.6; font-weight:500; transition:opacity var(--dur-slow) var(--ease); }
.aitem .ad{ width:24px; height:24px; flex:none; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; transition:background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.aitem.is-done{ color:var(--ink); opacity:1; }
.aitem.is-done .ad{ background:var(--brand); border-color:var(--brand); }
.aitem.is-done .ad::after{ content:"✓"; color:var(--white); font-size:13px; font-weight:700; }

/* ── Ergebnis ───────────────────────────────────────────────────────────── */
.rbadge{ display:inline-block; background:var(--brand-wash); color:var(--brand-deep); font-weight:700; font-size:12px;
  padding:6px 16px; border-radius:999px; margin-bottom:18px; letter-spacing:1px; text-transform:uppercase; }
.score{ font-size:clamp(52px,13vw,84px); font-weight:700; color:var(--brand); line-height:1; letter-spacing:-.04em; }
.score-zeile{ display:flex; align-items:baseline; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.score-stufe{ font-size:17px; font-weight:600; color:var(--brand-deep); }
.check{ width:88px; height:88px; margin:0 auto 22px; border-radius:50%; background:var(--brand-wash); display:grid; place-items:center; color:var(--white); position:relative; }
.check .disc{ position:absolute; inset:14px; background:var(--brand); border-radius:50%; }
.check svg{ position:relative; width:38px; height:38px; }
@keyframes haken-auf{ 0%{ transform:scale(.6); opacity:0; } 60%{ transform:scale(1.06); } 100%{ transform:scale(1); opacity:1; } }
.js .check{ animation:haken-auf 550ms var(--ease) both; }
@media (prefers-reduced-motion:reduce){ .js .check{ animation:none; } }
.rlist{ max-width:430px; margin:22px auto 0; text-align:left; display:flex; flex-direction:column; gap:12px; }
.rlist div{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink); font-weight:500; }
.rlist svg{ width:20px; height:20px; color:var(--brand); flex:none; }
.rperson{ display:flex; align-items:center; gap:14px; max-width:380px; margin:22px auto 0; padding:12px 16px;
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); text-align:left; }
.rperson-photo{ position:relative; width:60px; height:60px; flex:none; border-radius:50%; overflow:hidden;
  background:var(--brand-wash); color:var(--brand-deep); display:grid; place-items:center; font-weight:600; font-size:19px; }
.rperson-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rperson-tx small{ display:block; font-size:11.5px; color:var(--brand-deep); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.rperson-tx b{ display:block; font-size:16.5px; color:var(--ink); margin-top:2px; }
.rperson-tx span{ display:block; font-size:13px; color:var(--ink-soft); }

/* ── Formular ───────────────────────────────────────────────────────────── */
.lead-form{ max-width:520px; margin:24px auto 0; text-align:left; }
.f-item{ margin-bottom:14px; }
.f-label{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin:0 0 6px; }
.f-label span{ font-weight:400; color:var(--ink-soft); }
.f-inp{ width:100%; background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:15px 16px; font-size:16px; font-family:inherit; color:var(--ink); transition:border-color var(--dur-fast) var(--ease); }
.f-inp:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgb(var(--brand-rgb) / .12); }
textarea.f-inp{ min-height:96px; resize:vertical; }
.f-row{ display:flex; gap:12px; }
@media (max-width:480px){ .f-row{ flex-direction:column; gap:0; } }
.f-err{ display:none; color:var(--error); font-size:13px; font-weight:600; margin-top:6px; }
.f-item.is-invalid .f-err{ display:block; }
.f-item.is-invalid .f-inp{ border-color:var(--error); background:var(--error-flaeche); box-shadow:0 0 0 3px rgb(var(--error-rgb) / .12); }
.f-summary{ display:flex; align-items:center; gap:10px; background:var(--error-flaeche-stark); border:1.5px solid var(--error); color:var(--error-text);
  border-radius:var(--radius); padding:13px 16px; font-size:14.5px; font-weight:600; margin-bottom:16px; }
.f-summary svg{ width:22px; height:22px; flex:none; color:var(--error); }
.honeypot{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }
.f-consent{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--ink-soft); line-height:1.45; }
.f-consent input{ margin-top:2px; width:18px; height:18px; flex:none; accent-color:var(--brand); }
.f-consent a{ color:var(--brand-deep); }
.f-consent-item.is-invalid{ background:var(--error-flaeche); border:1.5px solid var(--error); border-radius:var(--radius-sm); padding:12px; }
.iti{ width:100%; height:fit-content; }
.iti__country-list{ text-align:left; }

/* ── Fußzeile ───────────────────────────────────────────────────────────── */
.site-footer{ background:var(--brand-darker); color:var(--footer-text); padding:26px 20px; text-align:center; font-size:13px; }
.site-footer a{ color:var(--footer-link); text-decoration:underline; }
.site-footer .legal{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; }
.site-footer .copy{ color:var(--footer-copy); font-size:12px; line-height:1.5; }
.cc-fusslink{ background:none; border:none; color:var(--footer-link); text-decoration:underline; font-family:inherit; font-size:13px; cursor:pointer; padding:0; }

/* ── Alles mittig ─────────────────────────────────────────────────────────
   Festlegung vom 24.08.2026, ABLAUF-FUNNEL: Ein Funnel steht durchgehend auf
   einer Mittelachse — Einstieg wie Schritte. Er hat eine einzige Handlung,
   und ein mittiger Aufbau hält das Auge in der Spalte, in der sie steht.

   Der Block steht am Dateiende, damit er die Ausrichtungen darüber überschreibt. */
.hero, .section{ text-align: center; }

/* Jedes Blockelement bekommt die automatische Außenkante. Ohne sie steht Text
   mit `max-width` trotz `text-align: center` links in seinem Kasten — der
   Kasten ist zentriert, der Text darin nicht. */
.hero :is(p, h1, h2, h3, h4, ul, ol, dl, figure, blockquote, div, span, b, small),
.section :is(p, h1, h2, h3, h4, ul, ol, dl, figure, blockquote, div, span, b, small){
  margin-inline: auto;
}

/* Flex-Reihen und Rasterzellen mittig. `justify-content` wirkt nur auf Flex-
   und Grid-Container, bei allem anderen läuft die Zeile ins Leere. */
.hero :is(ul, ol, dl, div, figure, p), .section :is(ul, ol, dl, div, figure, p){
  justify-content: center;
  justify-items: center;
}

/* Aufklappbare Bereiche bleiben linksbündig — als Block mittig platziert.
   Zentriert schrumpfen die Kästen auf ihre Textbreite und stehen treppenartig
   untereinander; mit fester linker Kante liest sich eine Frageliste ruhiger.
   Rückgängig gemacht am 24.08.2026, nachdem es gebaut und angesehen wurde. */
.faq{ width: 100%; max-width: 720px; margin-inline: auto; }
.faq details{ width: 100%; text-align: left; }
.faq summary{ justify-content: space-between; gap: 16px; text-align: left; }
.faq p{ text-align: left; margin-inline: 0; }

/* Zweispaltige Blöcke auf eine Spalte: Text oben, Motiv darunter. */
.hero-kopf, .hero-raster, .zwei-spalten{
  display: block; max-width: 760px; margin-inline: auto;
}
.hero-img, .hero-bild, .bild-kasten, .motiv{
  max-width: 760px; margin-inline: auto;
}

/* Die wiederkehrenden Zwei-Spalten-Bausteine der Pflege-Funnel. Sie stellen
   Bild neben Text oder Bezeichnung neben Beschreibung — untereinander gesetzt
   stehen beide Teile auf derselben Achse wie der Rest der Sektion. */
/* Je nach Funnel ist die Karte Grid oder Flex — beide Fälle abdecken. */
.contactcard{
  grid-template-columns: 1fr; justify-items: center;
  flex-direction: column; align-items: center;
  text-align: center;
}
.gegen{ grid-template-columns: 1fr; }
.stellen > div, .liste > div{ grid-template-columns: 1fr; }
.stellen > div > b, .liste > div > b{ display: block; }
.ap-lines{ text-align: center; }
.rperson{ flex-direction: column; text-align: center; }
.rperson-photo{ margin-inline: auto; }

/* Ausgenommen: alles, was Eingaben aufnimmt oder ausgewählt wird. Zentrierte
   Formularlabels, Antwortkarten und Ergebnislisten sind schwer zu lesen. */
form, .feld, .ocard, .karte, .wahl-karte, .opts, .spiegel,
form :is(p, div, span, label), label{ text-align: left; }