/* =========================================================================
   runde4.css – Runde 4 (02.10.2026): roter Faden, Kinderosteopathie,
   Interaktion. Wird NACH marke.css geladen und gewinnt damit gegen alle
   Nachtragsblöcke dort (die Falle „spätere Regel schlägt die frühere“).

   Auftrag Julian: zu viel Text, kein roter Faden, langweilig, keine
   interaktiven Elemente; Branding nicht verändern. Farben kommen
   ausschließlich aus den Tokens in marke.css :root. Neu sind nur die vier
   Farben des Bildzeichens (Logo), und die genau an einer Stelle: hinter
   dem Porträt im Herzstück.

   Bausteine: Wegweiser · Herzstück · eigenes Video · Schrittleiste ·
   Stimmen-Leiste · Duo-Karten · Abschluss · Kampagnenseite
   Kinderosteopathie · Fehlerbehebungen (FAQ-Sprungknopf, „Außerdem bei uns“).
   ========================================================================= */

:root {
  --logo-blau:    #0046A0;
  --logo-gelb:    #F2C500;
  --logo-gruen:   #A3C400;
  --logo-magenta: #B0216A;
}

.sektion--flaeche { background: var(--color-surface); }

/* ---------------------------------------------------------------- Wegweiser */
.wegweiser__lead { max-width: 640px; margin: 14px auto 0; text-align: center; }
.wegweiser__wahl {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 34px 0 30px;
}
.ww-wahl {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 10px 22px 10px 12px;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--color-accent);
  background: var(--color-white); border: 2px solid var(--color-input-border);
  border-radius: 999px; cursor: pointer; box-shadow: var(--schatten-ruhe);
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}
.ww-wahl__icon {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-surface); color: var(--color-primary-text);
  transition: background-color .2s ease, color .2s ease;
}
.ww-wahl__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ww-wahl:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.ww-wahl:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.ww-wahl[aria-pressed="true"] { background: var(--color-knopf); border-color: var(--color-knopf); color: var(--color-white); }
.ww-wahl[aria-pressed="true"] .ww-wahl__icon { background: rgba(255, 255, 255, .18); color: var(--color-white); }

.wegweiser__karten {
  display: grid; gap: 22px; grid-template-columns: 1fr;
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 640px)  { .wegweiser__karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .wegweiser__karten { grid-template-columns: repeat(4, 1fr); } }
.ww-karte[hidden] { display: none; }
.ww-karte { min-width: 0; }
.ww-karte.ist-neu { animation: ww-ein .38s ease both; }
@keyframes ww-ein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ww-karte.ist-neu { animation: none; } .ww-wahl { transition: none; } }

.ww-karte__link {
  display: flex; flex-direction: column; height: 100%;
  background: var(--color-white); border-radius: var(--radius-lg);
  overflow: hidden; color: inherit; text-decoration: none;
  box-shadow: var(--schatten-ruhe); border: 1px solid var(--color-border);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ww-karte__link:hover, .ww-karte__link:focus-visible { transform: translateY(-4px); box-shadow: var(--schatten-hebt); text-decoration: none; }
.ww-karte__link:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.ww-karte__bild { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.ww-karte__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.ww-karte__kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-text); }
.ww-karte__name { margin-top: 6px; font-size: 20px; line-height: 26px; font-weight: 900; color: var(--color-card-title); }
.ww-karte__text { margin-top: 10px; font-size: 15px; line-height: 24px; color: var(--color-muted); }
.ww-karte__mehr {
  margin-top: auto; padding-top: 16px; font-size: 15px; font-weight: 700; color: var(--color-primary-text);
}
.ww-karte__mehr::after { content: ' \2192'; display: inline-block; transition: transform .2s ease; }
.ww-karte__link:hover .ww-karte__mehr::after { transform: translateX(4px); }
.ww-karte--ohne-bild .ww-karte__link { border-top: 4px solid var(--color-primary); }

/* Das Herzstück im Wegweiser: doppelt breit, Bild links (Porträt). */
@media (min-width: 640px) {
  .ww-karte--hervor { grid-column: span 2; }
  .ww-karte--hervor .ww-karte__link { flex-direction: row; }
  .ww-karte--hervor .ww-karte__bild { width: 42%; aspect-ratio: auto; height: 100%; min-height: 300px; }
  .ww-karte--hervor .ww-karte__body { padding: 28px; justify-content: center; }
  .ww-karte--hervor .ww-karte__name { font-size: 26px; line-height: 32px; }
}
.ww-karte--hervor .ww-karte__link { background: linear-gradient(135deg, #EAF7FD 0%, var(--color-white) 70%); border-color: #D3EEFA; }

/* Ohne JavaScript bleibt die Auswahl verborgen (Attribut hidden), alle
   Karten sind sichtbar. */

/* ---------------------------------------------------------------- Herzstück */
.herz { background: var(--color-white); overflow: hidden; }
.herz__raster { display: grid; gap: 48px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .herz__raster { grid-template-columns: 5fr 7fr; gap: 72px; } }
.herz__bild { position: relative; margin: 0; max-width: 440px; justify-self: center; width: 100%; }
/* Das eine Markenmotiv dieser Runde: die vier Farben des Bildzeichens als
   weiche Kreise hinter dem Porträt (Agenturregel: ein Motiv, eine Stelle). */
.herz__bild::before, .herz__bild::after {
  content: ''; position: absolute; border-radius: 50%; z-index: 0; pointer-events: none;
}
.herz__bild::before {
  width: 72%; aspect-ratio: 1; left: -14%; top: -8%;
  background: radial-gradient(circle at 30% 30%, var(--logo-gelb) 0 34%, transparent 35%),
              radial-gradient(circle at 70% 62%, var(--logo-gruen) 0 30%, transparent 31%);
  opacity: .55;
}
.herz__bild::after {
  width: 64%; aspect-ratio: 1; right: -12%; bottom: 4%;
  background: radial-gradient(circle at 40% 40%, var(--color-primary) 0 36%, transparent 37%),
              radial-gradient(circle at 72% 74%, var(--logo-magenta) 0 24%, transparent 25%);
  opacity: .35;
}
.herz__foto {
  position: relative; z-index: 1; display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; box-shadow: var(--schatten-hebt);
}
.herz__unterschrift {
  position: absolute; z-index: 2; left: 18px; bottom: 18px;
  padding: 10px 16px; border-radius: 12px; background: rgba(255, 255, 255, .94);
  font-size: 14px; line-height: 20px; color: var(--color-text); box-shadow: var(--schatten-ruhe);
}
.herz__unterschrift strong { display: block; color: var(--color-card-title); font-size: 16px; }
.herz__fakten { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.herz__fakten li {
  position: relative; padding: 14px 16px 14px 52px; border-radius: 14px;
  background: var(--color-surface); font-size: 16px; line-height: 24px; color: var(--color-text);
}
.herz__fakten li::before {
  content: ''; position: absolute; left: 16px; top: 15px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-knopf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.herz__fakten strong { color: var(--color-card-title); }
.herz__stimme {
  margin: 24px 0 0; padding: 18px 22px; border-left: 4px solid var(--color-highlight);
  background: #FFFBEA; border-radius: 0 14px 14px 0;
}
.herz__stimme p { margin: 0; font-size: 16px; line-height: 26px; color: var(--color-text); font-style: italic; }
.herz__stimme footer { margin-top: 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--color-meta); }

/* ---------------------------------------------------------- eigenes Video */
.video-eigen { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--schatten-hebt); background: #1f2226; }
.video-eigen--16-9 { aspect-ratio: 16 / 9; }
.video-eigen--9-16 { aspect-ratio: 9 / 16; max-width: 380px; margin-inline: auto; }
.video-eigen__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-eigen__knopf {
  position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  transition: transform .2s ease;
}
.video-eigen__knopf svg { width: 100%; height: 100%; fill: var(--color-knopf); filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .3)); }
.video-eigen__knopf:hover { transform: scale(1.07); }
.video-eigen__knopf:focus-visible { outline: 3px solid var(--color-white); outline-offset: 4px; }

/* ------------------------------------------------------------ Schrittleiste */
.schritte { margin-top: 40px; }
.schritte__leiste {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 0 0 26px; padding: 0; list-style: none;
}
.schritte__leiste::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 27px; height: 3px;
  background: var(--color-border); z-index: 0;
}
.schritte__leiste::after {
  content: ''; position: absolute; left: 12%; top: 27px; height: 3px; z-index: 0;
  width: calc(76% * var(--schritt-fortschritt, 0)); background: var(--color-primary);
  transition: width .4s ease;
}
.schritte__tab {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; padding: 0 4px 6px; border: 0; background: none; cursor: pointer; font: inherit;
  color: var(--color-meta);
}
.schritte__nr {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-white); border: 3px solid var(--color-border);
  font-size: 18px; font-weight: 900; color: var(--color-meta);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.schritte__titel { font-size: 14px; line-height: 19px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .03em; }
.schritte__tab.ist-erledigt .schritte__nr { border-color: var(--color-primary); color: var(--color-primary-text); }
.schritte__tab[aria-selected="true"] .schritte__nr { background: var(--color-knopf); border-color: var(--color-knopf); color: var(--color-white); transform: scale(1.08); }
.schritte__tab[aria-selected="true"] { color: var(--color-card-title); }
.schritte__tab:hover .schritte__nr { border-color: var(--color-primary); }
.schritte__tab:focus-visible { outline: none; }
.schritte__tab:focus-visible .schritte__nr { outline: 3px solid var(--color-primary); outline-offset: 3px; }

.schritte__panel {
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start;
  max-width: 860px; margin: 0 auto 18px; padding: 30px 32px;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--schatten-ruhe);
}
.schritte__panel[hidden] { display: none; }
.schritte__panel.ist-neu { animation: ww-ein .35s ease both; }
.schritte__panel-nr { font-size: 56px; line-height: 1; font-weight: 900; color: var(--color-primary-soft); }
.schritte__panel-titel { margin: 4px 0 10px; font-size: 22px; line-height: 28px; font-weight: 900; color: var(--color-card-title); }
.schritte__panel p { margin: 0; font-size: 17px; line-height: 27px; color: var(--color-text); }
.schritte__hinweis { margin-top: 14px !important; padding: 12px 16px; border-left: 4px solid var(--color-highlight); background: var(--color-surface); border-radius: 0 10px 10px 0; font-size: 15px !important; line-height: 23px !important; }
.schritte__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 18px; }
.schritte__weiter {
  padding: 10px 18px; border: 2px solid var(--color-knopf); border-radius: var(--radius-knopf);
  background: var(--color-white); color: var(--color-primary-text); font: inherit; font-size: 14px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; cursor: pointer;
}
.schritte__weiter::after { content: ' \2192'; }
.schritte__weiter:hover, .schritte__weiter:focus-visible { background: var(--color-knopf); color: var(--color-white); }
@media (max-width: 700px) {
  .schritte__titel { font-size: 11px; line-height: 15px; letter-spacing: 0; }
  .schritte__nr { width: 44px; height: 44px; font-size: 15px; }
  .schritte__leiste::before, .schritte__leiste::after { top: 21px; }
  .schritte__panel { grid-template-columns: 1fr; gap: 6px; padding: 22px 20px; }
  .schritte__panel-nr { font-size: 40px; }
}

/* ---------------------------------------------------------- Stimmen-Leiste */
.stimmen-leiste { position: relative; }
.stimmen.stimmen--leiste {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 6px 4px 18px; scrollbar-width: none;
}
.stimmen.stimmen--leiste::-webkit-scrollbar { display: none; }
.stimmen--leiste > .stimme { flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start; }
@media (max-width: 1000px) { .stimmen--leiste > .stimme { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 640px)  { .stimmen--leiste > .stimme { flex-basis: 86%; } }
.stimmen--leiste:focus-visible { outline: 3px solid var(--color-white); outline-offset: 4px; border-radius: 12px; }
.leiste-pfeil {
  position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -30px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: var(--color-white); box-shadow: var(--schatten-hebt); cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}
.leiste-pfeil svg { width: 22px; height: 22px; fill: none; stroke: var(--color-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.leiste-pfeil--zurueck { left: -22px; }
.leiste-pfeil--vor { right: -22px; }
.leiste-pfeil:hover { transform: scale(1.08); }
.leiste-pfeil:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.leiste-pfeil:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 1240px) { .leiste-pfeil--zurueck { left: 4px; } .leiste-pfeil--vor { right: 4px; } }

/* ---------------------------------------------------------------- Duo */
.duo { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo__karte {
  display: flex; flex-direction: column; background: var(--color-white);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--schatten-ruhe);
}
.duo__bild { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; }
.duo__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 28px 30px 32px; }
.duo__titel { margin: 8px 0 10px; font-size: 26px; line-height: 32px; font-weight: 900; color: var(--color-accent); }
.duo__body p { margin: 0 0 22px; font-size: 16px; line-height: 26px; color: var(--color-text); }
.duo__body .btn { margin-top: auto; }

/* ---------------------------------------------------------------- Abschluss */
/* Agenturregel: der Abschnitt über dem Fuß nie in Fußfarbe. Hell, mit einem
   Hauch Markenblau, damit er als Abschluss erkennbar bleibt. */
.abschluss { padding-block: var(--raum) calc(var(--raum) + 8px); background: var(--color-white); }
.abschluss__karte {
  display: grid; gap: 24px 48px; align-items: center; grid-template-columns: 1fr;
  padding: 44px 48px; border-radius: 28px;
  background: linear-gradient(120deg, #E3F5FD 0%, #F4FBFE 55%, #FFF8D6 100%);
  border: 1px solid #D3EEFA;
}
@media (min-width: 960px) { .abschluss__karte { grid-template-columns: 1.4fr auto; } }
.abschluss__text .lead-360 { margin: 12px 0 0; }
.abschluss__knoepfe { margin-top: 0; }
@media (max-width: 700px) { .abschluss__karte { padding: 30px 22px; } }

/* ------------------------------------------------- Kampagnenseite (Landing) */
.landing-kopf .bereich-kopf__inhalt { max-width: 660px; }
.landing-vertrauen { padding-block: 26px; background: var(--color-white); border-bottom: 1px solid var(--color-border); }
.landing-vertrauen__liste {
  display: grid; gap: 14px 28px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none;
}
@media (min-width: 760px) { .landing-vertrauen__liste { grid-template-columns: repeat(3, 1fr); } }
.landing-vertrauen__liste li { display: flex; gap: 14px; align-items: center; font-size: 15px; line-height: 22px; color: var(--color-text); }
.landing-vertrauen__liste strong { display: block; font-size: 17px; color: var(--color-card-title); }
.landing-vertrauen__icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: #E3F5FD; color: var(--color-primary-text);
}
.landing-vertrauen__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.anlaesse { max-width: 980px; margin: 34px auto 0; }
.anlaesse__wahl { display: flex; justify-content: center; gap: 10px; margin-bottom: 22px; }
.anlaesse__wahl[hidden] { display: none; }
.anlaesse__gruppe[hidden] { display: none; }
.anlaesse__gruppe h3 { margin: 0 0 14px; font-size: 18px; color: var(--color-primary-text); }
.anlaesse.ist-umschaltbar .anlaesse__gruppe h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.anlaesse__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; }
.anlaesse__liste li {
  padding: 12px 18px; border-radius: 999px; background: var(--color-white);
  border: 1px solid var(--color-input-border); box-shadow: var(--schatten-ruhe);
  font-size: 16px; line-height: 22px; font-weight: 700; color: var(--color-card-title);
}
.anlaesse__hinweis { max-width: 700px; margin: 6px auto 0; text-align: center; font-size: 15px; line-height: 24px; color: var(--color-meta); }

.hintergrund { max-width: 820px; margin: 30px auto 0; border-radius: var(--radius-lg); background: var(--color-white); border: 1px solid var(--color-border); box-shadow: var(--schatten-ruhe); }
.hintergrund summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 24px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 700; color: var(--color-card-title);
}
.hintergrund summary::-webkit-details-marker { display: none; }
.hintergrund summary::after { content: '+'; flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-surface); color: var(--color-primary-text); font-size: 22px; transition: transform .25s ease; }
.hintergrund[open] summary::after { transform: rotate(45deg); }
.hintergrund summary:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-lg); }
.hintergrund__inhalt { padding: 0 24px 22px; }
.hintergrund__inhalt p, .hintergrund__inhalt li { font-size: 16px; line-height: 26px; color: var(--color-text); }
.hintergrund__inhalt ul { padding-left: 20px; }

.landing-schritte { display: grid; gap: 20px; grid-template-columns: 1fr; margin: 36px 0 0; padding: 0; list-style: none; counter-reset: ls; }
@media (min-width: 860px) { .landing-schritte { grid-template-columns: repeat(3, 1fr); } }
.landing-schritte li {
  position: relative; padding: 28px 26px 26px; border-radius: var(--radius-lg);
  background: var(--color-white); box-shadow: var(--schatten-ruhe); border: 1px solid var(--color-border);
}
.landing-schritte li::before {
  counter-increment: ls; content: counter(ls);
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%;
  background: var(--color-knopf); color: var(--color-white); font-weight: 900; font-size: 18px;
}
.landing-schritte h3 { margin: 0 0 8px; font-size: 19px; line-height: 25px; color: var(--color-card-title); }
.landing-schritte p { margin: 0; font-size: 16px; line-height: 25px; color: var(--color-text); }

.kosten-box {
  display: grid; gap: 18px 36px; grid-template-columns: 1fr; margin-top: 30px; padding: 28px 30px;
  border-radius: var(--radius-lg); background: var(--color-white); border-left: 5px solid var(--color-highlight);
  box-shadow: var(--schatten-ruhe);
}
@media (min-width: 860px) { .kosten-box { grid-template-columns: 1fr 1fr; } }
.kosten-box h3 { margin: 0 0 6px; font-size: 17px; color: var(--color-card-title); }
.kosten-box p { margin: 0; font-size: 16px; line-height: 25px; color: var(--color-text); }

.julia { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .julia { grid-template-columns: 340px 1fr; gap: 56px; } }
.julia__foto { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; box-shadow: var(--schatten-hebt); }
.julia__zitat { margin: 18px 0 0; font-size: 19px; line-height: 30px; color: var(--color-card-title); font-style: italic; }
.julia__liste { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.julia__liste li { padding: 9px 14px; border-radius: 10px; background: var(--color-surface); font-size: 15px; line-height: 21px; color: var(--color-text); }

.landing-faq { max-width: 820px; margin: 30px auto 0; display: grid; gap: 12px; }

.anfrage-band { padding-block: var(--raum); background: var(--color-white); }
.anfrage-band .abschluss__karte { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.anfrage-band .btn-reihe { justify-content: center; }
.anfrage-band__zeiten { margin: 4px 0 0; font-size: 15px; line-height: 23px; color: var(--color-meta); }

/* ------------------------------------------------------- Fehlerbehebungen */
/* FAQ-Sprungknopf (Meldung Julian 02.10.2026, Screenshot): `.sektion:has(.faq-liste)
   .kurs-chip` (marke.css 2527) setzte den Grund fest auf Weiß und war
   spezifischer als `a.kurs-chip:hover` (marke.css 729). Beim Überfahren wurde
   die Schrift weiß, der Grund blieb weiß: Knopf leer, nur die Zahl stand da. */
.sektion:has(.faq-liste) a.kurs-chip:hover,
.sektion:has(.faq-liste) a.kurs-chip:focus-visible {
  background: var(--color-knopf); color: var(--color-white); border-color: var(--color-knopf);
}
.sektion:has(.faq-liste) a.kurs-chip:hover .faq-themen__zahl,
.sektion:has(.faq-liste) a.kurs-chip:focus-visible .faq-themen__zahl { background: var(--color-white); color: var(--color-primary-text); }

/* Hervorgehobene Karte ohne Foto: eigene Markenfläche statt eines zweiten
   Porträts (das Porträt steht im Herzstück direkt darunter). */
.ww-karte--hervor .ww-karte__link {
  position: relative; flex-direction: column; justify-content: flex-end;
  min-height: 300px; background: linear-gradient(140deg, var(--color-knopf) 0%, #005F87 100%);
  border-color: transparent; color: var(--color-white);
}
.ww-karte--hervor .ww-karte__body { position: relative; z-index: 1; padding: 30px; max-width: 560px; }
.ww-karte--hervor .ww-karte__kicker { color: var(--color-highlight); }
.ww-karte--hervor .ww-karte__name { color: var(--color-white); font-size: 28px; line-height: 34px; }
.ww-karte--hervor .ww-karte__text { color: rgba(255, 255, 255, .92); font-size: 16px; line-height: 26px; }
.ww-karte--hervor .ww-karte__mehr { color: var(--color-white); }
.ww-karte__zeichen { position: absolute; right: -18px; top: -18px; width: 210px; height: 210px; opacity: .22; }
.ww-karte__zeichen svg { width: 100%; height: 100%; fill: var(--color-white); }
@media (min-width: 640px) { .ww-karte--hervor .ww-karte__link { flex-direction: column; } }

/* Stimmen in der Leiste gleich hoch (das Raster setzte sie oben bündig). */
.stimmen--leiste > .stimme { align-self: stretch; }

/* Kampagnenseite: Fragen über die volle Spaltenbreite, weniger Luft vor der Anfrage. */
.landing-faq > .hintergrund { margin: 0; width: 100%; max-width: none; }
.anfrage-band { padding-top: 0; }
.sektion#fragen { padding-bottom: clamp(40px, 5vw, 64px); }

/* Kopfleiste (Runde 4): mit dem Menüpunkt „Kinderosteopathie“ reichte der
   Platz nicht mehr, der Termin-Knopf brach zweizeilig um (1440 px gesehen).
   „Home“ steht am Schreibtisch nicht mehr in der Leiste: Das Logo führt zur
   Startseite, im Telefonmenü und im Fuß bleibt der Punkt. */
.header-cta { white-space: nowrap; }
@media (min-width: 900px) {
  .site-nav .nav-punkt--home { display: none; }
  .site-nav ul { gap: 22px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .site-nav ul { gap: 16px; }
  .site-nav a { font-size: 17px; }
}

/* Kopfleiste: `.header-inner` hatte zwischen 900 und 1199 px keinen
   Seitenrand, Logo und letzter Menüpunkt lagen auf der Fensterkante
   (gemessen 02.10.2026: „Kontakt“ endet bei 1024 von 1024 px). */
.container.header-inner { padding-inline: 20px; }
@media (min-width: 1200px) and (max-width: 1319px) {
  .site-nav ul { gap: 16px; }
  .site-nav a { font-size: 17px; }
}

/* Schrittleiste am Telefon: nur die Nummern. „KONTAKT & TERMINVEREINBARUNG“
   passte bei 390 px nicht in ein Viertel der Breite (Überlauf 43 px). Der
   Titel steht im geöffneten Schritt darunter. */
.schritte__leiste > li { min-width: 0; }
@media (max-width: 700px) {
  .schritte__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ------------------------------------------- /leistungen: Fachbereiche */
.anker-alt { display: block; position: relative; top: -120px; visibility: hidden; }
.fachbereiche { display: grid; gap: 14px; max-width: 960px; margin: 36px auto 0; }
.fachbereich { background: var(--color-white); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--schatten-ruhe); scroll-margin-top: 130px; }
.fachbereich__kopf {
  display: flex; align-items: center; gap: 20px; padding: 14px 22px 14px 14px;
  cursor: pointer; list-style: none;
}
.fachbereich__kopf::-webkit-details-marker { display: none; }
.fachbereich__kopf::after {
  content: '+'; margin-left: auto; flex: 0 0 auto; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface);
  color: var(--color-primary-text); font-size: 26px; transition: transform .25s ease, background-color .25s ease;
}
.fachbereich[open] .fachbereich__kopf::after { transform: rotate(45deg); background: var(--color-knopf); color: var(--color-white); }
.fachbereich__kopf:hover::after { background: #E3F5FD; }
.fachbereich__kopf:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-lg); }
.fachbereich__bild { flex: 0 0 auto; width: 120px; height: 80px; object-fit: cover; border-radius: 10px; }
.fachbereich__titel { display: flex; flex-direction: column; gap: 2px; }
.fachbereich__kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-text); }
.fachbereich__name { font-size: 22px; line-height: 28px; font-weight: 900; color: var(--color-card-title); }
.fachbereich__inhalt { padding: 4px 28px 28px; }
.fachbereich__inhalt p { margin: 0 0 14px; font-size: 16px; line-height: 27px; color: var(--color-text); }
.fachbereich__punkte { padding: 14px 16px; border-radius: 10px; background: var(--color-surface); }
.fachbereich__inhalt .btn { margin-top: 6px; }
@media (max-width: 600px) {
  .fachbereich__bild { width: 72px; height: 56px; }
  .fachbereich__name { font-size: 18px; line-height: 23px; }
  .fachbereich__inhalt { padding: 0 18px 22px; }
}

/* Kontrast beim Überfahren (Prüfung 03_DEPLOY/pruefe-zustaende.mjs, 02.10.2026):
   - Fußlinks wurden gelb (#FFCC00 auf #60656F = 3,87:1, nötig 4,5:1). Jetzt
     bleibt die Schrift weiß, das Gelb wandert in die Unterstreichung.
   - „Weiterlesen“ auf /ueber-uns wurde beim Überfahren HELLER als in Ruhe
     (#007FB8 = 4,44:1). Jetzt dunkler: #00668F. */
.site-footer a:hover, .site-footer a:focus-visible {
  color: var(--color-white); text-decoration: underline;
  text-decoration-color: var(--color-highlight); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.mehr-lesen__knopf:hover, .mehr-lesen__knopf:focus-visible { color: var(--color-knopf-dark); }

/* ------------------------------------------------ /ueber-uns: Reiter, Räume */
.reiter__wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 30px 0 6px; }
.reiter__wahl[hidden] { display: none; }
.reiter__wahl .ww-wahl { padding: 10px 20px; }
.reiter__zahl {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
  background: var(--color-surface); color: var(--color-primary-text); font-size: 13px;
}
.ww-wahl[aria-pressed="true"] .reiter__zahl { background: rgba(255, 255, 255, .2); color: var(--color-white); }
.reiter__panel[hidden] { display: none; }
.ist-reiter .reiter__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ist-reiter .mitarbeiter-raster { margin-top: 28px; }
.reiter__panel.ist-neu { animation: ww-ein .35s ease both; }

.raeume-leiste { position: relative; }
.eindruecke.raeume-spur {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 2px 14px; scrollbar-width: none;
}
.raeume-spur::-webkit-scrollbar { display: none; }
.raeume-spur > .eindruck { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; display: block !important; }
@media (max-width: 900px) { .raeume-spur > .eindruck { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 600px) { .raeume-spur > .eindruck { flex-basis: 84%; } }
.raeume-spur:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; border-radius: 12px; }

/* ----------------------------- Behandlungsseiten: „Ganzen Text lesen“ */
/* Nur auf dem Bildschirm gekürzt; der Text steht vollständig im HTML.
   runde4.js schaltet erst ab 1300 px Texthöhe ein. */
.bereich-inhalt.ist-gekuerzt {
  max-height: 900px; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.weiterlesen-knopf {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 10px;
  padding: 12px 22px; border: 2px solid var(--color-knopf); border-radius: var(--radius-knopf);
  background: var(--color-white); color: var(--color-primary-text);
  font: inherit; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; cursor: pointer;
}
.weiterlesen-knopf::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }
.weiterlesen-knopf[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
.weiterlesen-knopf:hover, .weiterlesen-knopf:focus-visible { background: var(--color-knopf); color: var(--color-white); }
@media print { .bereich-inhalt.ist-gekuerzt { max-height: none; -webkit-mask-image: none; mask-image: none; } .weiterlesen-knopf { display: none; } }
/* Hervorgehobene Karte: Zeichen unten rechts (lag über der Überschrift),
   drei belegte Kurzfakten statt leerer Fläche. */
.ww-karte__zeichen { top: auto; bottom: -46px; right: -40px; width: 230px; height: 230px; opacity: .16; }
.ww-karte__punkte { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ww-karte__punkte span {
  padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28); font-size: 13px; line-height: 18px; font-weight: 700; color: var(--color-white);
}

/* Telefon: Wegweiser-Karten kompakt (Bild klein links), sonst stand je
   Karte ein Foto von 230 px Höhe untereinander. Herzstück-Kreise kleiner. */
@media (max-width: 639px) {
  .ww-karte:not(.ww-karte--hervor) .ww-karte__link { flex-direction: row; align-items: stretch; }
  .ww-karte:not(.ww-karte--hervor) .ww-karte__bild { width: 112px; flex: 0 0 112px; aspect-ratio: auto; height: auto; min-height: 100%; }
  .ww-karte:not(.ww-karte--hervor) .ww-karte__body { padding: 14px 16px 16px; }
  .ww-karte__name { font-size: 18px; line-height: 23px; }
  .ww-karte__text { font-size: 14px; line-height: 21px; }
  .ww-karte__mehr { padding-top: 10px; font-size: 14px; }
  .ww-karte--hervor .ww-karte__link { min-height: 0; }
  .ww-karte--hervor .ww-karte__body { padding: 24px 22px; }
  .ww-karte--hervor .ww-karte__name { font-size: 23px; line-height: 28px; }
  .herz__bild { max-width: 320px; }
  .herz__bild::before { width: 56%; left: -8%; top: -5%; opacity: .45; }
  .herz__bild::after { width: 48%; right: -6%; opacity: .28; }
  .landing-kopf .bereich-kopf__h1 { font-size: clamp(20px, 6.8vw, 26px); line-height: 1.22; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
}

/* Karriereseite: Team-Video (Hochformat) unter dem Text der Kollegen-Tafel. */
.kar-video { margin-top: 24px; }
.kar-video .video-eigen--9-16 { max-width: 260px; margin-inline: 0; }
/* Zahl im aktiven Reiter: weiß auf 20 % Weiß ergab 3,31:1 (pruefe-zustaende.mjs). */
.ww-wahl[aria-pressed="true"] .reiter__zahl { background: var(--color-white); color: var(--color-primary-text); }