/* Physio-Mobil-Vital · Entwurf Runde 4, 12.10.2026 (Kundenfeedback: Marke, Kitzingen/Würzburg, KG-ZNS)
   Vorher: Entwurf Runde 3, 09.10.2026
   Gestaltung nah an der Praxisseite „Physiotherapie am Kurpark“: gleiche Tokens,
   Lexend 600 für Überschriften mit Maigrün-Akzentzeile, Hero als abgerundete grüne
   Karte mit Blattstruktur, Karten mit weichem Schatten, maigrün-blasse Abschnitte.
   Eigene Note: das Praxisauto fährt aus der Hero-Karte heraus.
   Orange-Knöpfe mit dunkler Schrift (5,5 : 1 statt 2,8 : 1 mit Weiß). */

@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/lexend-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/lexend-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --gruen-dunkel: #00522B;
  --gruen: #006837;
  --gruen-mittel: #2C8B4B;
  --maigruen: #A1C256;
  --maigruen-text: #4F7518;     /* Maigrün für Schrift auf hellem Grund, 5,4:1 auf Weiß, 4,8:1 auf Blass (vorher #5F8A1E, 3,7 bis 4,1:1) */
  --maigruen-hell: #CFE39A;
  --maigruen-blass: #EFF5E2;
  --orange: #F97316;
  --orange-dunkel: #E25F05;
  --grau: #C6D2D6;
  --grau-blass: #EDF1F2;
  --grund: #FAFAF7;
  --flaeche: #FFFFFF;
  --text: #1D2C24;
  --text-leise: #56675E;
  --auf-gruen: rgba(255,255,255,.92);
  --auf-gruen-leise: rgba(255,255,255,.8);
  --r-xl: 28px; --r-lg: 18px; --r-md: 12px; --r-sm: 8px;
  --schatten: 0 10px 30px rgba(0,60,30,.08);
  --schatten-tief: 0 18px 45px rgba(0,60,30,.14);
  --schatten-cta: 0 8px 20px rgba(233,95,5,.32);
  --verlauf-gruen: linear-gradient(135deg, var(--gruen-dunkel) 0%, var(--gruen) 38%, var(--gruen-mittel) 70%, #6FA83C 100%);
  --breite: 1180px;
  --rand: clamp(16px, 4vw, 24px);
  --display: 'Lexend', 'Segoe UI', system-ui, sans-serif;
  --body: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); font-size: 18px; line-height: 1.65; color: var(--text); background: var(--grund); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gruen); }
h1, h2, h3 { font-family: var(--display); color: var(--gruen); font-weight: 500; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 16px; text-wrap: balance; }
h1 { font-size: clamp(38px, 6.4vw, 68px); font-weight: 600; }
h2 { font-size: clamp(30px, 4.6vw, 46px); }
h3 { font-size: clamp(20px, 2.2vw, 23px); font-weight: 600; }
.akzent { color: var(--maigruen-text); }
p { margin: 0 0 16px; color: var(--text-leise); }
.innen { width: min(var(--breite), 100% - 2 * var(--rand)); margin-inline: auto; }
.kicker { display: block; font: 600 13px/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--maigruen-text); margin-bottom: 16px; }
.lead { font-size: clamp(17px, 1.6vw, 19px); color: var(--text-leise); max-width: 60ch; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Knöpfe wie auf der Praxisseite */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 13px 24px; border-radius: var(--r-sm); border: 2px solid transparent;
  font: 700 16px/1.2 var(--body); text-decoration: none; cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s, transform .18s;
}
.knopf svg { width: 19px; height: 19px; flex: none; }
.knopf:active { transform: translateY(1px); }
.knopf--aktiv { background: var(--orange); color: #1A1206; box-shadow: var(--schatten-cta); }
.knopf--aktiv:hover { background: var(--orange-dunkel); }
.knopf--gruen { background: var(--gruen); color: #fff; }
.knopf--gruen:hover { background: var(--gruen-dunkel); }
.knopf--linie { border-color: var(--gruen); color: var(--gruen); background: transparent; }
.knopf--linie:hover { background: var(--gruen); color: #fff; }
.knopf--hell { border-color: rgba(255,255,255,.75); color: #fff; background: transparent; }
.knopf--hell:hover { background: #fff; color: var(--gruen); }

/* Platzhalter, per Schalter ausblendbar */
.ph { background: #FFF1BF; color: inherit; padding: 0 3px; border-radius: 4px; box-shadow: inset 0 -2px 0 #D9A400; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.auf-gruen .ph, .hero .ph, .neuro__haupt .ph { background: rgba(255,225,120,.22); box-shadow: inset 0 -2px 0 #E8C34A; }
.ph-aus .ph { background: transparent; box-shadow: none; padding: 0; }
.ph-schalter { position: fixed; left: 16px; bottom: 16px; z-index: 60; font: 600 13px/1 var(--body); padding: 11px 14px; border-radius: 999px; background: #fff; color: var(--text); border: 1px solid var(--grau); box-shadow: var(--schatten-tief); cursor: pointer; }
.ph-schalter::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #D9A400; margin-right: 8px; }
.ph-aus .ph-schalter::before { background: var(--grau); }

/* Wortmarke „Physio-Mobil-Vital“: Bildzeichen plus Schriftzug, weiß auf Grün, farbig auf Hell */
.marke { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; flex: none; }
.marke__zeichen { position: relative; width: 34px; flex: none; }
.marke__zeichen img { width: 100%; transition: opacity .25s; }
.marke__zeichen .farbig { position: absolute; inset: 0; opacity: 0; }
.marke__text { display: grid; line-height: 1.05; }
.marke__text b { font: 400 26px/1.05 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.marke__text b span { color: var(--maigruen-hell); font-weight: 600; }
.marke__text small { font: 600 10.5px/1.2 var(--body); letter-spacing: .2em; text-transform: uppercase; opacity: .82; margin-top: 5px; }
.marke--farbig, .ist-gescrollt .marke { color: var(--gruen); }
.marke--farbig .marke__text b span, .ist-gescrollt .marke__text b span { color: var(--maigruen-text); }
.marke--farbig .marke__text small, .ist-gescrollt .marke__text small { color: var(--text-leise); opacity: 1; }
.marke--farbig .hell, .ist-gescrollt .marke .hell { opacity: 0; }
.marke--farbig .farbig, .ist-gescrollt .marke .farbig { opacity: 1; }

/* Kopf: liegt über der Hero-Karte, wird beim Scrollen weiß */
.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background-color .25s, box-shadow .25s; }
.kopf .innen { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 92px; transition: height .25s; }
.kopf:not(.ist-gescrollt) .innen { width: min(var(--breite), 100% - 2 * var(--rand) - 48px); margin-top: 24px; }
.kopf__nav { display: flex; gap: 28px; }
.kopf__nav a { color: #fff; text-decoration: none; font-weight: 500; font-size: 15.5px; }
.kopf__nav a:hover, .kopf__nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.kopf__nav .knopf { display: none; }
.kopf .knopf { min-height: 46px; padding: 10px 18px; font-size: 15px; }
.kopf.ist-gescrollt { background: rgba(250,250,247,.96); box-shadow: 0 6px 24px rgba(0,60,30,.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.kopf.ist-gescrollt .innen { height: 74px; }
.kopf.ist-gescrollt .kopf__nav a:not(.knopf) { color: var(--text); }
.kopf__burger { display: none; width: 46px; height: 46px; border-radius: var(--r-sm); border: 1.5px solid rgba(255,255,255,.6); background: transparent; cursor: pointer; place-items: center; padding: 0; }
.kopf__burger span, .kopf__burger span::before, .kopf__burger span::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; position: relative; transition: transform .2s, background-color .2s; }
.kopf__burger span::before, .kopf__burger span::after { content: ''; position: absolute; left: 0; }
.kopf__burger span::before { top: -6px; } .kopf__burger span::after { top: 6px; }
.ist-gescrollt .kopf__burger { border-color: var(--grau); }
.ist-gescrollt .kopf__burger span, .ist-gescrollt .kopf__burger span::before, .ist-gescrollt .kopf__burger span::after { background: var(--gruen); }
.ist-offen .kopf__burger span { background: transparent !important; }
.ist-offen .kopf__burger span::before { transform: translateY(6px) rotate(45deg); }
.ist-offen .kopf__burger span::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1020px) {
  .kopf__burger { display: grid; }
  .kopf__nav { display: none; }
  .kopf.ist-offen .kopf__nav { display: flex; flex-direction: column; gap: 0; position: absolute; top: calc(100% + 6px); left: var(--rand); right: var(--rand); background: #fff; border-radius: var(--r-lg); padding: 10px 22px 22px; box-shadow: var(--schatten-tief); }
  .kopf.ist-offen .kopf__nav a:not(.knopf) { color: var(--text); padding: 14px 0; border-bottom: 1px solid var(--grau-blass); font-size: 17px; }
  .kopf.ist-offen .kopf__nav .knopf { display: inline-flex; margin-top: 18px; min-height: 52px; }
}
@media (max-width: 760px) {
  .kopf__cta { display: none !important; }
  .marke__zeichen { width: 28px; }
  .marke__text b { font-size: 21px; }
  .marke__text small { font-size: 9px; letter-spacing: .16em; }
  .kopf .innen { height: 72px; }
  .kopf:not(.ist-gescrollt) .innen { width: calc(100% - 56px); margin-top: 12px; }
}

/* Hero */
.hero-wrap { padding: 24px 16px 0; }
.hero {
  position: relative; isolation: isolate; border-radius: var(--r-xl);
  background: var(--verlauf-gruen); color: #fff;
  padding: 180px 0 130px; min-height: 760px;
}
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: url(../img/blattstruktur-1500.webp) center / cover no-repeat; opacity: .9; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(100deg, rgba(0,58,30,.92) 0%, rgba(0,72,38,.78) 36%, rgba(6,104,52,.45) 64%, rgba(90,150,40,.3) 100%); }
.hero .innen { width: min(var(--breite), 100% - 2 * var(--rand) - 32px); }
.hero__text { max-width: 600px; position: relative; z-index: 2; }
.hero .kicker { color: var(--auf-gruen-leise); }
.hero h1 { color: #fff; }
.hero h1 .zeile-akzent { color: var(--maigruen-hell); display: block; }
.hero .lead { color: var(--auf-gruen-leise); margin: 0 0 32px; }
.hero__aktionen { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__fakten { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hero__fakten li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); font-size: 14.5px; color: #fff; }
.hero__fakten li img { width: 15px; }

.auto { position: absolute; right: 0; bottom: -70px; width: min(56%, 720px); z-index: 1; pointer-events: none; margin: 0; }
.auto__rahmen { clip-path: inset(-40% 0 -40% -40%); }
.auto img { width: 100%; filter: drop-shadow(0 26px 22px rgba(0,30,15,.35)); transform-origin: 30% 100%; }
/* Schild mit Denis: blendet ein, sobald das Auto steht */
.auto__schild { position: absolute; left: 4%; top: -34px; z-index: 2; display: flex; align-items: center; gap: 14px; background: #fff; border-radius: var(--r-md); padding: 10px 18px 10px 10px; box-shadow: var(--schatten-tief); font: 500 14px/1.35 var(--body); color: var(--text-leise); max-width: 350px; }
.auto__schild picture { flex: none; }
.auto__denis { display: block; width: 92px; height: 92px; border-radius: 12px; object-fit: cover; }
.auto__schild small { display: block; font: 600 11px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); margin-bottom: 2px; }
.auto__schild b { display: block; font-family: var(--display); font-size: 17px; color: var(--gruen); }
/* Auto fährt einmal ein, bremst sanft und bleibt stehen. Keine Dauerbewegung. */
.js .auto__rahmen img { animation: einfahren 1.6s .15s both; }
@keyframes einfahren {
  0% { translate: 55% 0; opacity: 0; rotate: 0deg; animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  72% { translate: -1.2% 0; opacity: 1; rotate: 0deg; animation-timing-function: ease-out; }
  86% { translate: 0 0; rotate: -.7deg; animation-timing-function: ease-in-out; }
  100% { translate: 0 0; opacity: 1; rotate: 0deg; }
}
.js .auto__schild { animation: schild-ein .6s cubic-bezier(.2,.8,.2,1) 1.15s both; }
@keyframes schild-ein { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }
@media (max-width: 1020px) {
  .hero { padding: 150px 0 0; min-height: 0; }
  .auto { position: relative; right: auto; bottom: auto; width: min(100%, 640px); margin: 40px 0 -64px auto; }
}
@media (max-width: 760px) {
  .hero-wrap { padding: 12px 10px 0; }
  .hero { padding-top: 116px; border-radius: 22px; }
  .hero .innen { width: calc(100% - 36px); }
  .hero__aktionen .knopf { flex: 1 1 100%; }
  .auto { width: calc(100% + 18px); margin: 46px -18px -54px 0; }
  .auto__schild { font-size: 13px; padding: 8px 14px 8px 8px; gap: 11px; top: -40px; left: 0; max-width: 270px; }
  .auto__denis { width: 58px; height: 58px; border-radius: 10px; }
  .auto__schild b { font-size: 15.5px; }
}

/* Abschnitte */
.abschnitt { padding: clamp(72px, 9vw, 112px) 0; }
.hero-wrap + .abschnitt { padding-top: clamp(130px, 13vw, 170px); }
.abschnitt--blass { background: var(--maigruen-blass); }
.abschnitt--weiss { background: var(--flaeche); }
.hat-marke { position: relative; isolation: isolate; overflow: hidden; }
.hat-marke::after { content: ''; position: absolute; right: -90px; bottom: -110px; width: 420px; aspect-ratio: 339 / 417; background: url(../img/bildmarke.png) center / contain no-repeat; opacity: .1; z-index: -1; pointer-events: none; }
.kopfzeile { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 60px; align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.kopfzeile .lead { margin: 0; }
.kopfzeile--mitte { display: block; text-align: center; max-width: 760px; margin-inline: auto; }
.kopfzeile--mitte .lead { margin: 0 auto; }
@media (max-width: 860px) { .kopfzeile { grid-template-columns: 1fr; } }

/* Karten */
.karte { background: var(--flaeche); border-radius: var(--r-lg); padding: 30px 28px; box-shadow: var(--schatten); border: 1px solid rgba(198,210,214,.55); }
.karte p:last-child { margin-bottom: 0; }

/* Gründe */
.gruende { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grund__zahl { display: block; font: 300 52px/1 var(--display); color: var(--maigruen); margin-bottom: 18px; }
.grund p { font-size: 16.5px; }

/* Schnellcheck */
.check { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.check__karte { background: var(--flaeche); border-radius: var(--r-xl); padding: clamp(22px, 3vw, 38px); box-shadow: var(--schatten-tief); }
.check__frage { padding: 18px 0; border-bottom: 1px solid var(--grau-blass); }
.check__frage:first-of-type { padding-top: 0; }
.check__frage p { margin: 0 0 12px; color: var(--text); font-weight: 600; font-size: 17px; }
.check__wahl { display: flex; gap: 10px; }
.check__wahl button { flex: 1; min-height: 48px; border-radius: var(--r-sm); border: 2px solid var(--grau); background: var(--grund); font: 600 15.5px/1 var(--body); color: var(--text); cursor: pointer; transition: background-color .18s, border-color .18s, color .18s; }
.check__wahl button[aria-pressed="true"] { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.check__ergebnis { margin-top: 22px; padding: 20px 22px; border-radius: var(--r-md); background: var(--maigruen-blass); border-left: 4px solid var(--maigruen); }
.check__ergebnis b { display: block; font-family: var(--display); font-size: 19px; color: var(--gruen); margin-bottom: 4px; }
.check__ergebnis p { margin: 0 0 12px; font-size: 16px; }
.check__ergebnis .knopf { min-height: 46px; padding: 10px 18px; font-size: 15px; }
.check__ergebnis[hidden] { display: none; }
.check__hinweis { font-size: 14px; color: var(--text-leise); margin: 16px 0 0; }
@media (max-width: 860px) { .check { grid-template-columns: 1fr; } }

/* Schwerpunkt Neurologie: der Block, der ins Auge fallen soll */
.neuro { display: grid; grid-template-columns: 1.25fr .75fr; gap: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--gruen-dunkel); color: #fff; box-shadow: var(--schatten-tief); margin-bottom: 24px; position: relative; isolation: isolate; }
.neuro__haupt { padding: clamp(30px, 5vw, 60px); position: relative; isolation: isolate; overflow: hidden; }
.neuro__haupt .neuro__kuerzel { position: absolute; right: -10px; top: -22px; z-index: -1; margin: 0; font: 700 clamp(110px, 17vw, 210px)/1 var(--display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(207,227,154,.22); pointer-events: none; user-select: none; }
.neuro__siegel { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--maigruen); color: var(--gruen-dunkel); font: 700 13px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 22px; }
.neuro__siegel img { width: 14px; }
.neuro h3 { color: #fff; font-size: clamp(28px, 3.6vw, 42px); font-weight: 500; max-width: 16ch; margin-bottom: 18px; }
.neuro h3 span { color: var(--maigruen-hell); display: block; }
.neuro__haupt > p { color: var(--auf-gruen-leise); font-size: 17px; max-width: 54ch; }
.neuro__liste { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.neuro__liste li { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); font-size: 14.5px; font-weight: 500; }
.neuro__seite { background: #fff; color: var(--text); padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 14px; border-top: 6px solid var(--orange); }
.neuro__seite .kicker { margin-bottom: 4px; color: #B84C00; } /* 5,2:1 auf Weiß, --orange-dunkel hätte 3,6:1 */
.neuro__seite h4 { font: 600 clamp(21px, 2.2vw, 25px)/1.2 var(--display); color: var(--gruen); margin: 0; }
.neuro__seite p { font-size: 16px; margin: 0; }
.neuro__tipp { padding: 14px 16px; border-radius: var(--r-md); background: var(--maigruen-blass); }
.neuro__tipp b { color: var(--gruen); }
.neuro__seite .knopf { margin-top: auto; }
.neuro__mehr { font-weight: 600; font-size: 15.5px; align-self: flex-start; }
@media (max-width: 960px) { .neuro { grid-template-columns: 1fr; } .neuro__seite { border-top-width: 5px; } }

/* Leistungen */
.leistungen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.leistungen-weiter { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.leistung { display: flex; flex-direction: column; }
.leistung__nr { font: 700 13px/1 var(--body); letter-spacing: .16em; color: var(--maigruen-text); margin-bottom: 14px; }
.leistung p { font-size: 16px; }
.leistung ul { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 7px; }
.leistung li { font-size: 13.5px; padding: 5px 11px; border-radius: 999px; background: var(--maigruen-blass); color: var(--gruen-dunkel); }
.leistung--gruen { background: var(--verlauf-gruen); border: 0; }
.leistung--gruen h3 { color: #fff; }
.leistung--gruen p { color: var(--auf-gruen-leise); }
.leistung--gruen .leistung__nr { color: var(--maigruen-hell); }
.leistung--gruen li { background: rgba(255,255,255,.14); color: #fff; }
ul.ph { background: none; box-shadow: none; padding: 0; }
ul.ph li { background: #FFF1BF; box-shadow: inset 0 -2px 0 #D9A400; }
.ph-aus ul.ph li { background: var(--maigruen-blass); box-shadow: none; }
@media (max-width: 960px) and (min-width: 761px) { .leistungen { grid-template-columns: repeat(2, 1fr); } }

.preise { margin-top: 24px; display: grid; grid-template-columns: 1fr auto; gap: 20px 40px; align-items: center; padding: 26px 30px; border-radius: var(--r-lg); background: var(--maigruen-blass); }
.preise h3 { margin-bottom: 4px; }
.preise p { margin: 0; font-size: 15.5px; }
.preise dl { display: flex; gap: 12px; margin: 0; }
.preise dl div { background: #fff; border-radius: var(--r-md); padding: 12px 18px; text-align: center; min-width: 104px; box-shadow: var(--schatten); }
.preise dt { font-size: 13px; color: var(--text-leise); }
.preise dd { margin: 2px 0 0; font: 600 24px/1.2 var(--display); color: var(--gruen); }
@media (max-width: 860px) { .preise { grid-template-columns: 1fr; padding: 24px 18px; } .preise dl div { flex: 1; min-width: 0; padding: 12px 6px; } }

/* Ablauf: grüne Karte wie der Hero */
.ablauf-karte { position: relative; isolation: isolate; border-radius: var(--r-xl); background: var(--verlauf-gruen); color: #fff; padding: clamp(40px, 6vw, 76px) clamp(22px, 5vw, 64px); overflow: hidden; }
.ablauf-karte::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(../img/blattstruktur-1500.webp) center / cover; opacity: .22; mix-blend-mode: luminosity; }
.ablauf-karte h2 { color: #fff; }
.ablauf-karte h2 .zeile-akzent { color: var(--maigruen-hell); }
.ablauf-karte .kicker { color: var(--auf-gruen-leise); }
.ablauf-karte .lead { color: var(--auf-gruen-leise); }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.schritt { position: relative; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-lg); padding: 26px 24px; }
.schritt__nr { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--maigruen); color: var(--gruen-dunkel); font: 600 20px/1 var(--display); margin-bottom: 18px; }
.schritt:last-child .schritt__nr { background: #fff; }
.schritt h3 { color: #fff; }
.schritt p { color: var(--auf-gruen-leise); font-size: 16px; margin: 0; }
.ablauf-hinweis { margin: 30px 0 0; color: var(--auf-gruen); font-size: 15.5px; }
.ablauf-hinweis b { color: var(--maigruen-hell); }

/* Einsatzgebiet */
.gebiet { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 72px); align-items: center; }
.gebiet__karte { background: #fff; border-radius: var(--r-xl); padding: 14px; box-shadow: var(--schatten-tief); margin: 0; }
.gebiet__karte svg { width: 100%; height: auto; display: block; border-radius: 18px; }
.gebiet__karte figcaption { font-size: 13.5px; color: var(--text-leise); padding: 10px 8px 2px; }
.orte { list-style: none; padding: 0; margin: 22px 0 28px; display: flex; flex-wrap: wrap; gap: 9px; }
.orte li { padding: 8px 15px; border-radius: 999px; border: 1px solid var(--grau); background: #fff; font-size: 15px; white-space: nowrap; }
@media (max-width: 860px) { .gebiet { grid-template-columns: 1fr; } }

/* Team */
.team { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 6vw, 72px); align-items: center; }
.team__bild { margin: 0; position: relative; }
.team__bild img { border-radius: var(--r-xl); box-shadow: var(--schatten-tief); aspect-ratio: 4 / 3.3; object-fit: cover; width: 100%; }
.team__bild figcaption { position: absolute; left: 16px; bottom: 16px; right: 16px; max-width: 330px; background: rgba(255,255,255,.95); border-radius: var(--r-md); padding: 12px 16px; font-size: 14px; color: var(--text-leise); box-shadow: var(--schatten); }
.team__bild figcaption b { color: var(--gruen); font-family: var(--display); font-size: 15.5px; display: block; }
.blattliste { list-style: none; padding: 0; margin: 22px 0 28px; }
.blattliste li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; color: var(--text-leise); }
.blattliste li::before { content: ''; flex: none; width: 18px; height: 22px; margin-top: 3px; background: url(../img/bildmarke.png) center / contain no-repeat; }
@media (max-width: 860px) { .team { grid-template-columns: 1fr; } }

/* Angehörige */
.angehoerige { display: grid; grid-template-columns: 1fr auto; gap: 18px 36px; align-items: center; margin-top: clamp(36px, 5vw, 56px); padding: 28px 32px; border-radius: var(--r-lg); background: var(--flaeche); border-left: 4px solid var(--maigruen); box-shadow: var(--schatten); }
.angehoerige h3 { margin-bottom: 6px; }
.angehoerige p { margin: 0; font-size: 16.5px; }
@media (max-width: 760px) { .angehoerige { grid-template-columns: 1fr; padding: 24px 20px; } .angehoerige .knopf { width: 100%; } }

/* Fragen */
.fragen { max-width: 860px; margin-inline: auto; }
.fragen details { background: #fff; border-radius: var(--r-md); margin-bottom: 12px; box-shadow: var(--schatten); border: 1px solid rgba(198,210,214,.5); overflow: hidden; }
.fragen summary { list-style: none; cursor: pointer; padding: 20px 60px 20px 24px; position: relative; font: 500 clamp(17px, 1.7vw, 19px)/1.4 var(--display); color: var(--gruen); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--maigruen-blass); color: var(--gruen); display: grid; place-items: center; font: 500 20px/1 var(--display); transition: transform .25s, background-color .25s; }
.fragen details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--maigruen); }
.fragen details p { padding: 0 24px 22px; margin: 0; font-size: 16.5px; }

/* Kontakt */
.kontakt { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: start; }
.kontakt__karten { display: grid; gap: 24px; }
.kontakt__tel { display: block; font: 600 clamp(26px, 3vw, 32px)/1.2 var(--display); color: var(--gruen); text-decoration: none; margin: 4px 0 2px; }
.kontakt__tel:hover { text-decoration: underline; }
.kontakt__klein { font-size: 14px; color: var(--text-leise); }
.kontakt__mail { display: inline-block; padding: 8px 0; font-weight: 600; overflow-wrap: anywhere; }
.zeiten { display: grid; grid-template-columns: auto 1fr; margin: 0; }
.zeiten dt, .zeiten dd { padding: 11px 0; border-bottom: 1px solid var(--grau-blass); margin: 0; font-size: 16px; }
.zeiten dt { font-weight: 600; padding-right: 28px; }
.zeiten dd { color: var(--text-leise); }
.hinweis-box { margin-top: 18px; padding: 16px 18px; border-radius: var(--r-md); background: var(--maigruen-blass); border-left: 4px solid var(--maigruen); font-size: 15.5px; color: var(--text-leise); }
.formular h3 { margin-bottom: 4px; }
.formular > p { font-size: 15.5px; }
.feld { display: grid; gap: 6px; margin-bottom: 14px; }
.feld label { font-size: 14px; font-weight: 600; }
.feld input, .feld textarea { font: 400 16px/1.4 var(--body); padding: 13px 14px; border-radius: var(--r-sm); border: 1.5px solid var(--grau); background: var(--grund); color: var(--text); width: 100%; }
.feld input:focus, .feld textarea:focus { border-color: var(--gruen); outline: none; background: #fff; }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 16px; }
.wahl legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.wahl label { position: relative; }
.wahl input { position: absolute; opacity: 0; inset: 0; }
.wahl span { display: inline-block; padding: 9px 14px; border-radius: var(--r-sm); border: 1.5px solid var(--grau); font-size: 14.5px; cursor: pointer; background: var(--grund); }
.wahl input:checked + span { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.wahl input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.einwilligung { display: flex; gap: 10px; font-size: 13.5px; color: var(--text-leise); margin: 6px 0 18px; line-height: 1.5; }
.einwilligung input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--gruen); }
.formular .knopf { width: 100%; }
.formular__meldung { margin: 12px 0 0; font-size: 14px; color: var(--gruen); min-height: 1.4em; }
@media (max-width: 860px) { .kontakt { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .feld-reihe { grid-template-columns: 1fr; } }

/* Fuß */
.fuss { background: var(--gruen-dunkel); color: var(--auf-gruen-leise); padding: 50px 0 60px; font-size: 14.5px; }
.fuss .innen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.fuss .marke__text b { font-size: 24px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 22px; }
.fuss a { color: #fff; text-decoration: none; font-weight: 500; }
.fuss a:hover { text-decoration: underline; }
.fuss__klein { width: 100%; margin: 0; color: var(--auf-gruen-leise); font-size: 13.5px; }

/* Wischreihen am Handy mit Zähler und Pfeilen (Agenturregel 02.10.2026) */
.wisch-steuerung { display: none; }
@media (max-width: 760px) {
  .wisch { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: calc(-1 * var(--rand)); padding: 6px var(--rand) 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .wisch::-webkit-scrollbar { display: none; }
  .wisch > * { flex: 0 0 84%; scroll-snap-align: start; scroll-margin-left: var(--rand); }
  .orte.wisch { margin-top: 18px; margin-bottom: 0; }
  .orte.wisch > * { flex: 0 0 auto; }
  .ablauf-karte .wisch { margin-inline: calc(-1 * clamp(22px, 5vw, 64px)); padding-inline: clamp(22px, 5vw, 64px); }
  .wisch-steuerung { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
  .wisch-steuerung button { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1.5px solid var(--grau); background: #fff; color: var(--gruen); font: 600 20px/1 var(--display); cursor: pointer; display: grid; place-items: center; }
  .wisch-steuerung button:disabled { opacity: .35; cursor: default; }
  .wisch-steuerung__linie { flex: 1; height: 3px; background: var(--grau-blass); border-radius: 3px; overflow: hidden; }
  .wisch-steuerung__linie i { display: block; height: 100%; width: 30%; background: var(--gruen); border-radius: 3px; transition: transform .15s linear; }
  .wisch-steuerung__zahl { font: 600 14px/1 var(--body); color: var(--text-leise); min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
  .auf-gruen .wisch-steuerung button { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
  .auf-gruen .wisch-steuerung__linie { background: rgba(255,255,255,.2); }
  .auf-gruen .wisch-steuerung__linie i { background: var(--maigruen-hell); }
  .auf-gruen .wisch-steuerung__zahl { color: var(--auf-gruen-leise); }
}

/* Anrufleiste am Handy, erscheint nach dem Hero */
.anrufleiste { display: none; }
@media (max-width: 760px) {
  .anrufleiste { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--grau); transform: translateY(110%); transition: transform .3s; }
  .anrufleiste.ist-da, .no-js .anrufleiste { transform: none; }
  .anrufleiste .knopf { min-height: 50px; padding: 10px; font-size: 15px; }
  .ph-schalter { bottom: calc(84px + env(safe-area-inset-bottom)); left: 10px; padding: 8px 11px; font-size: 12px; }
  .fuss { padding-bottom: 120px; }
  .karte { padding: 26px 22px; }
}

/* Rechtsseiten */
.recht { padding: 140px 0 100px; }
.recht .innen { max-width: 820px; }
.recht h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 26px; }
.recht h2 { font-size: 22px; font-weight: 600; margin: 34px 0 10px; }
.ki-hinweis { display: flex; gap: 12px; align-items: flex-start; }
.ki-hinweis img { width: 22px; height: 22px; flex: none; margin-top: 2px; }

/* Einblenden nur senkrecht */
.js .zeigen { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .zeigen.ist-da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .zeigen { opacity: 1; transform: none; transition: none; }
  .js .auto__rahmen img, .js .auto__schild { animation: none; }
}
@media (max-width: 760px) {
  .hero__fakten { display: none; }
  .auto { margin-top: 62px; }
  .ph-schalter { left: auto; right: 10px; }
}

/* ===== Runde 4: Unterseiten (Leistungen, Team, Karriere) ===== */

/* Seitenkopf: dieselbe grüne Karte wie auf der Startseite, gleich gesetzt, ohne Auto */
.hero--seite { min-height: 0; padding: 180px 0 96px; }
.hero--seite .hero__text { max-width: 720px; }
@media (max-width: 1020px) { .hero--seite { padding: 150px 0 72px; } }
@media (max-width: 760px) { .hero--seite { padding: 116px 0 56px; } }
.hero-wrap + .abschnitt--nah { padding-top: clamp(64px, 8vw, 100px); }

/* Fehlt-Schild: nur in der Vorschau, für Angaben, die der Kunde noch liefern muss */
.fehlt { display: block; margin: 14px 0; padding: 12px 16px; border-radius: var(--r-md); background: #FFF8DB; border: 1.5px dashed #D9A400; color: #5A4300; font-size: 15px; }
.fehlt::before { content: 'Fehlt noch: '; font-weight: 700; }
.auf-gruen .fehlt, .hero .fehlt { background: rgba(255,225,120,.16); color: #fff; border-color: #E8C34A; }
.ph-aus .fehlt { display: none; }

/* Leistungsseite */
.leistung-block { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 64px); padding: clamp(36px, 5vw, 56px) 0; border-top: 1px solid var(--grau); scroll-margin-top: 100px; }
.leistung-block:first-of-type { border-top: 0; padding-top: 0; }
.leistung-block__kopf .leistung__nr { display: block; }
.leistung-block__kopf h2 { font-size: clamp(28px, 3.4vw, 38px); }
.leistung-block p { font-size: 17px; }
.leistung-block .blattliste { margin: 18px 0 0; }
@media (max-width: 860px) { .leistung-block { grid-template-columns: 1fr; } }

/* Team */
.personen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.person { display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: center; }
.person__bild { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--maigruen-blass); display: grid; place-items: center; }
.person__bild img { width: 100%; height: 100%; object-fit: cover; }
.person__bild--leer img { width: 38%; height: auto; opacity: .35; }
.person h3 { margin-bottom: 4px; }
.person__rolle { font-size: 15px; font-weight: 600; color: var(--maigruen-text); margin-bottom: 12px; }
.person p:last-child { font-size: 16px; }
@media (max-width: 1020px) { .personen { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .person { grid-template-columns: 1fr; } .person__bild { max-width: 260px; } }
.team-praxis { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 72px); align-items: center; }
.team-praxis img { border-radius: var(--r-xl); box-shadow: var(--schatten-tief); aspect-ratio: 4 / 3.3; object-fit: cover; width: 100%; }
@media (max-width: 860px) { .team-praxis { grid-template-columns: 1fr; } }

/* Hinweisband, z. B. Team sucht Verstärkung */
.band { display: grid; grid-template-columns: 1fr auto; gap: 18px 36px; align-items: center; padding: clamp(28px, 4vw, 44px); border-radius: var(--r-xl); background: var(--maigruen-blass); }
.band h2 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 8px; }
.band p { margin: 0; }
@media (max-width: 760px) { .band { grid-template-columns: 1fr; } .band .knopf { width: 100%; } }

/* Karriere */
.vorteile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vorteil h3 { font-size: 20px; }
.vorteil p { font-size: 16px; }
.vorteil__nr { display: block; font: 300 40px/1 var(--display); color: var(--maigruen); margin-bottom: 14px; }
@media (max-width: 960px) and (min-width: 761px) { .vorteile { grid-template-columns: repeat(2, 1fr); } }
.stellen { display: grid; gap: 16px; }
.stelle { display: grid; grid-template-columns: 1fr auto; gap: 16px 30px; align-items: center; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.stelle:hover { transform: translateY(-2px); box-shadow: var(--schatten-tief); }
.stelle h3 { margin-bottom: 6px; }
.stelle p { margin: 0; font-size: 16px; }
.stelle__daten { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.stelle__daten span { font-size: 13.5px; padding: 5px 11px; border-radius: 999px; background: var(--maigruen-blass); color: var(--gruen-dunkel); }
.stelle__pfeil { width: 52px; height: 52px; border-radius: 50%; background: var(--gruen); color: #fff; display: grid; place-items: center; font: 500 24px/1 var(--display); }
@media (max-width: 760px) { .stelle { grid-template-columns: 1fr; } .stelle__pfeil { display: none; } }
.eckdaten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; }
.eckdaten div { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-md); padding: 14px 16px; }
.eckdaten dt { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--auf-gruen-leise); }
.eckdaten dd { margin: 4px 0 0; font-weight: 600; color: #fff; font-size: 16px; }
@media (max-width: 860px) { .eckdaten { grid-template-columns: 1fr 1fr; } }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 860px) { .zwei-spalten { grid-template-columns: 1fr; } }
.liste-haken { list-style: none; padding: 0; margin: 0; }
.liste-haken li { position: relative; padding: 10px 0 10px 34px; border-bottom: 1px solid var(--grau-blass); font-size: 16.5px; color: var(--text-leise); }
.liste-haken li:last-child { border-bottom: 0; }
.liste-haken li::before { content: ''; position: absolute; left: 0; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: var(--maigruen-blass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23006837' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }

/* Bewerbungs-Funnel: eine Frage je Schritt, Antworten zum Antippen */
.funnel { background: var(--flaeche); border-radius: var(--r-xl); padding: clamp(22px, 3.4vw, 40px); box-shadow: var(--schatten-tief); max-width: 720px; }
.funnel__fortschritt { height: 6px; border-radius: 6px; background: var(--grau-blass); overflow: hidden; margin-bottom: 10px; }
.funnel__fortschritt i { display: block; height: 100%; width: 0; background: var(--maigruen); transition: width .3s; }
.funnel__schritt-zahl { font-size: 13.5px; color: var(--text-leise); margin: 0 0 18px; }
.funnel__schritt { border: 0; padding: 0; margin: 0; }
.funnel__schritt legend, .funnel__schritt > h3 { font: 600 clamp(21px, 2.4vw, 26px)/1.25 var(--display); color: var(--gruen); margin-bottom: 18px; padding: 0; }
.js .funnel__schritt:not(.ist-aktiv) { display: none; }
.funnel__kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.funnel__kacheln label { position: relative; }
.funnel__kacheln input { position: absolute; opacity: 0; inset: 0; }
.funnel__kacheln span { display: flex; align-items: center; min-height: 60px; padding: 14px 18px; border-radius: var(--r-md); border: 2px solid var(--grau); background: var(--grund); font-weight: 600; font-size: 16px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.funnel__kacheln span:hover { border-color: var(--gruen); }
.funnel__kacheln input:checked + span { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.funnel__kacheln input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (max-width: 520px) { .funnel__kacheln { grid-template-columns: 1fr; } }
.funnel__fuss { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 22px; }
.funnel__zurueck { background: none; border: 0; font: 600 15px/1 var(--body); color: var(--gruen); cursor: pointer; padding: 10px 0; }
.funnel__zurueck[hidden] { display: block; visibility: hidden; }
.funnel .knopf[type="submit"] { width: 100%; margin-top: 6px; }
.funnel__vorteile { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--text-leise); }
.funnel__vorteile li::before { content: '✓ '; color: var(--gruen); font-weight: 700; }
.funnel__meldung { margin: 12px 0 0; font-size: 14px; color: #B3261E; min-height: 1.4em; }

/* Funnelseite: ohne Menü, Logo führt nirgendwohin */
.kopf--funnel .innen { justify-content: space-between; }
.funnel-seite .hero { padding-bottom: 60px; }
.funnel-seite .hero__text { max-width: 720px; }
.funnel-seite .funnel { margin: -40px auto 0; position: relative; z-index: 3; }
.huerden { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 6px; }
.huerden li { color: #fff; font-weight: 500; display: flex; gap: 10px; align-items: center; }
.huerden li img { width: 14px; }

/* Fuß mit Seitenlinks */
.fuss nav a[aria-current="page"] { text-decoration: underline; }
.team__bild--portrait img { aspect-ratio: 4 / 4.2; object-position: center 22%; max-width: 520px; }
.anrufleiste--eins { grid-template-columns: 1fr !important; }
.vorteile--vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) and (min-width: 761px) { .vorteile--vier { grid-template-columns: repeat(2, 1fr); } }
.abstand-oben { margin-top: 24px; }
.abstand-oben-klein { margin-top: 10px; }
.ohne-rand { margin: 0; }
.abschnitt--funnel { padding-top: 0; }
.nowrap { white-space: nowrap; }

/* Runde 5: Elektro- und Ultraschalltherapie als zweiter Schwerpunkt */
.elektro { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 4vw, 56px); padding: clamp(28px, 4vw, 48px); border-radius: var(--r-xl); background: var(--flaeche); box-shadow: var(--schatten); border: 1px solid rgba(198,210,214,.55); border-top: 6px solid var(--maigruen); margin-bottom: 24px; }
.elektro h3 { font-size: clamp(26px, 3vw, 34px); font-weight: 500; }
.elektro h3 span { display: block; color: var(--maigruen-text); }
.elektro__kopf p { font-size: 16.5px; }
.elektro__liste { list-style: none; counter-reset: e; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-content: start; }
.elektro__liste li { counter-increment: e; position: relative; padding: 14px 0 14px 46px; border-bottom: 1px solid var(--grau-blass); }
.elektro__liste li::before { content: counter(e, decimal-leading-zero); position: absolute; left: 0; top: 13px; font: 300 24px/1.1 var(--display); color: var(--maigruen); }
.elektro__liste b { display: block; font: 600 17px/1.3 var(--display); color: var(--gruen); margin-bottom: 2px; }
.elektro__liste span { display: block; font-size: 15px; line-height: 1.5; color: var(--text-leise); }
.elektro__liste--eine { grid-template-columns: 1fr; margin-top: 10px; }
.leistungen--zwei { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .elektro { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .elektro__liste { grid-template-columns: 1fr; } }

/* ===== Runde 6: Leistungs-Explorer (Agenturregel „Kein Endlos-Scrollen“, 12.10.2026) =====
   Reiter links, Detailfläche rechts, am Handy wischbare Reiterleiste, die beim Lesen oben
   mitläuft. Ohne JavaScript stehen alle Flächen untereinander. */
.explorer { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.explorer__seite { position: sticky; top: 96px; display: grid; gap: 12px; }
.explorer__leiste { display: grid; gap: 8px; }
.explorer__reiter { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 15px 16px; border-radius: var(--r-lg); border: 1.5px solid var(--grau); background: var(--flaeche); color: var(--text); font: inherit; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s; }
.explorer__reiter:hover { border-color: var(--gruen); transform: translateX(3px); }
.explorer__reiter[aria-selected="true"] { background: var(--gruen); border-color: var(--gruen); color: #fff; box-shadow: var(--schatten); transform: none; }
.explorer__nr { font: 300 22px/1 var(--display); color: var(--maigruen-text); min-width: 28px; }
.explorer__reiter[aria-selected="true"] .explorer__nr { color: var(--maigruen-hell); }
.explorer__name { display: grid; gap: 2px; min-width: 0; }
.explorer__name b { font: 600 17px/1.25 var(--display); }
.explorer__name small { font-size: 13.5px; color: var(--text-leise); }
.explorer__reiter[aria-selected="true"] small { color: rgba(255,255,255,.8); }
.explorer__marke { margin-left: auto; font: 700 10px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 6px 8px; border-radius: 999px; background: var(--orange); color: #1A1206; flex: none; }
.explorer__alle { font-weight: 600; font-size: 15.5px; padding: 8px 4px; }
.explorer__buehne { min-width: 0; }
.explorer__flaeche { border-radius: var(--r-xl); }
.explorer__flaeche:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.js .explorer__flaeche.ist-neu { animation: flaeche-ein .35s ease both; }
@keyframes flaeche-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.explorer .neuro { margin: 0; min-height: 540px; }
.panel { background: var(--flaeche); border-radius: var(--r-xl); padding: clamp(26px, 3.6vw, 46px); box-shadow: var(--schatten); border: 1px solid rgba(198,210,214,.55); min-height: 540px; }
.panel--zwei { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.6vw, 44px); align-items: start; }
.panel h3 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 500; }
.panel h3 .akzent { display: block; }
.panel p { font-size: 16.5px; }
.panel .blattliste { margin: 18px 0 0; }
.panel__seite { background: var(--maigruen-blass); border-radius: var(--r-lg); padding: 24px; }
.panel__gut { color: var(--text); font-size: 17px; margin: 0; }
.blattliste--hell li { color: var(--auf-gruen-leise); }
.blattliste--hell li::before { background-image: url(../img/bildmarke-weiss.png); }
.preise--klein { margin-top: 18px; grid-template-columns: 1fr; padding: 18px; background: var(--flaeche); }
.preise--klein h4 { font: 600 18px/1.3 var(--display); color: var(--gruen); margin: 0 0 4px; }
.preise--klein dl div { flex: 1; min-width: 0; padding: 10px 6px; }
.preise--klein dd { font-size: 20px; }
.no-js .explorer { grid-template-columns: 1fr; }
.no-js .explorer__leiste { display: none; }
.no-js .explorer__buehne { display: grid; gap: 24px; }
.js .explorer__flaeche[hidden] { display: none; }

/* Verfahren-Wähler in der Fläche „Elektro und Ultraschall“ */
.vw { background: var(--maigruen-blass); border-radius: var(--r-lg); padding: 18px; }
.vw__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vw__knopf { border: 1.5px solid var(--grau); background: var(--flaeche); border-radius: 999px; padding: 10px 14px; min-height: 44px; font: 600 14px/1.2 var(--body); color: var(--text); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.vw__knopf:hover { border-color: var(--gruen); }
.vw__knopf[aria-pressed="true"] { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.vw__text { background: var(--flaeche); border-radius: var(--r-md); padding: 20px 22px; min-height: 190px; }
.vw__text b { display: block; font: 600 20px/1.3 var(--display); color: var(--gruen); margin-bottom: 8px; }
.vw__text p { font-size: 16px; margin: 0 0 10px; }
.vw__gut { color: var(--text) !important; }
.vw__gut span { font: 700 11.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--maigruen-text); margin-right: 6px; }
.js .vw__text:not(.ist-aktiv) { display: none; }
.js .vw__text.ist-aktiv { animation: flaeche-ein .3s ease both; }
.no-js .vw__knoepfe { display: none; }
.no-js .vw__text + .vw__text { margin-top: 10px; }

@media (max-width: 960px) {
  .explorer { grid-template-columns: 1fr; gap: 14px; }
  .explorer__seite { position: sticky; top: 72px; z-index: 6; margin-inline: calc(-1 * var(--rand)); padding: 8px var(--rand); background: rgba(250,250,247,.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); gap: 0; }
  .abschnitt--weiss .explorer__seite { background: rgba(255,255,255,.96); }
  .explorer__leiste { display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: 8px; scrollbar-width: none; }
  .explorer__leiste::-webkit-scrollbar { display: none; }
  .explorer__reiter { flex: 0 0 auto; width: auto; padding: 10px 14px; gap: 10px; scroll-snap-align: start; border-radius: 999px; }
  .explorer__reiter:hover { transform: none; }
  .explorer__nr { display: none; }
  .explorer__name b { font-size: 15px; white-space: nowrap; }
  .explorer__name small { display: none; }
  .explorer__marke { padding: 4px 6px; font-size: 9px; }
  .explorer__alle { display: none; }
  .explorer .neuro, .panel { min-height: 0; }
  .panel--zwei { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .js .explorer__flaeche.ist-neu, .js .vw__text.ist-aktiv { animation: none; } }

/* Einsatzgebiet: echte Straßenkarte (Runde 6) */
.gebiet__karte { padding: 10px; }
.karte-buehne { position: relative; aspect-ratio: 1120 / 860; border-radius: 18px; overflow: hidden; background: #F5F6F1; }
.karte-standbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s; }
.karte-buehne .karte-vektor { position: absolute; inset: 0; }
.karte-buehne.hat-vektor .karte-standbild { opacity: 0; pointer-events: none; }
.karte-wahl { position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 6px 18px rgba(0,40,20,.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.karte-wahl button { border: 0; background: transparent; border-radius: 999px; padding: 9px 14px; min-height: 40px; font: 600 14px/1 var(--body); color: var(--text); cursor: pointer; transition: background-color .15s, color .15s; }
.karte-wahl button[aria-pressed="true"] { background: var(--gruen); color: #fff; }
.karte-wahl button[hidden] { display: none; }
.kmarke { display: flex; align-items: center; gap: 6px; pointer-events: none; }
.kmarke__punkt { width: 38px; height: 38px; border-radius: 50%; background: var(--gruen); border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,40,20,.35); display: grid; place-items: center; flex: none; }
.kmarke__punkt img { width: 15px; }
.kmarke__name { font: 600 15px/1 var(--display); color: var(--gruen-dunkel); background: rgba(255,255,255,.94); padding: 7px 10px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,40,20,.15); white-space: nowrap; }
.gebiet__karte figcaption a { color: var(--text-leise); }
.karte-wahl button { white-space: nowrap; }
@media (max-width: 520px) { .karte-wahl { left: 8px; top: 8px; } .karte-wahl button { padding: 8px 11px; font-size: 13px; min-height: 36px; } .kmarke__name { font-size: 13px; padding: 6px 8px; } }
@media (max-width: 960px) {
  .vw__knoepfe { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -18px; padding: 0 18px 2px; scroll-snap-type: x proximity; }
  .vw__knoepfe::-webkit-scrollbar { display: none; }
  .vw__knopf { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
  .vw__text { min-height: 0; }
}
.panel--zwei > *, .vw { min-width: 0; }
.panel h3, .neuro h3 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 960px) { .panel--zwei { grid-template-columns: minmax(0, 1fr); } }

/* ===== Runde 7: Startseite verdichtet (Regel „Kein Endlos-Scrollen“) ===== */
.abschnitt--band { padding-bottom: 0; }
.abschnitt--band + .abschnitt { padding-top: clamp(56px, 6vw, 80px); }
.gruende-band { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--grau); border-bottom: 1px solid var(--grau); }
.gruende-band li { display: flex; gap: 16px; align-items: flex-start; padding: 24px 26px; }
.gruende-band li + li { border-left: 1px solid var(--grau); }
.gruende-band__nr { font: 300 34px/1 var(--display); color: var(--maigruen); flex: none; }
.gruende-band b { display: block; font: 600 18px/1.3 var(--display); color: var(--gruen); margin-bottom: 4px; }
.gruende-band p { margin: 0; font-size: 15.5px; }
@media (max-width: 760px) {
  .gruende-band { border: 0; }
  .gruende-band.wisch > * { flex: 0 0 84% !important; }
  .gruende-band li { background: var(--flaeche); border: 1px solid var(--grau) !important; border-radius: var(--r-lg); padding: 20px; }
}

.ablauf-raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.schritte-liste { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; }
.schritte-liste li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; }
.schritte-liste .schritt__nr { margin: 0; }
.schritte-liste li:last-child .schritt__nr { background: #fff; }
.schritte-liste h3 { color: #fff; font-size: 19px; margin: 2px 0 4px; }
.schritte-liste p { color: var(--auf-gruen-leise); font-size: 15.5px; margin: 0; }
.ablauf-raster .ablauf-hinweis { margin-top: 24px; }
.check__titel { font: 600 clamp(19px, 2vw, 22px)/1.3 var(--display) !important; color: var(--gruen) !important; margin: 0 0 18px !important; }
@media (max-width: 960px) { .ablauf-raster { grid-template-columns: 1fr; } }

.fragen-raster { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.fragen-raster .fragen { max-width: none; margin: 0; }
.angehoerige--klein { grid-template-columns: 1fr; margin-top: 28px; padding: 24px; }
.angehoerige--klein .knopf { justify-self: start; }
@media (max-width: 960px) { .fragen-raster { grid-template-columns: 1fr; } }

.kontakt__zwischen { margin-top: 26px; }
.team__bild--portrait img { aspect-ratio: 4 / 3.6; max-width: 460px; }
.person-mini { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; margin: 22px 0 26px; padding: 16px; border-radius: var(--r-lg); background: var(--flaeche); border: 1px solid var(--grau); }
.person-mini img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center 22%; }
.person-mini .kicker { margin-bottom: 4px; font-size: 11.5px; }
.person-mini b { display: block; font: 600 18px/1.3 var(--display); color: var(--gruen); }
.person-mini b span { font-weight: 400; color: var(--text-leise); font-size: 15px; }
.person-mini p { margin: 4px 0 6px; font-size: 14.5px; }
.person-mini a { font-weight: 600; font-size: 14.5px; }
.gebiet .orte { margin-bottom: 0; }
/* Reiterblock kompakt (Stellenseite) und Ablauf auf hellem Grund */
.explorer--kompakt { grid-template-columns: 270px minmax(0, 1fr); }
.panel--kompakt { min-height: 420px; }
.panel--kompakt h3 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 14px; }
.fragen--im-reiter { max-width: none; }
.fragen--im-reiter details { box-shadow: none; }
.schritte-liste--hell h3 { color: var(--gruen); }
.schritte-liste--hell p { color: var(--text-leise); }
.schritte-liste--hell li:last-child .schritt__nr { background: var(--maigruen); }
@media (max-width: 960px) { .explorer--kompakt { grid-template-columns: 1fr; } .panel--kompakt { min-height: 0; } }
/* Große Ziffern: dunkleres Maigrün für 3:1 (große Schrift), vorher 1,9:1 */
.gruende-band__nr, .vorteil__nr, .grund__zahl { color: var(--maigruen-text); }

/* ===== Runde 8: Bilder (Platzhalter aus Stock, echte NAS-Fotos) ===== */
/* Schild „Platzhalterbild“ auf Stockfotos, verschwindet mit dem Platzhalter-Schalter */
.ph-bild { position: relative; }
.ph-bild::after { content: 'Platzhalterbild'; position: absolute; left: 10px; top: 10px; z-index: 3; font: 700 11px/1 var(--body); letter-spacing: .06em; padding: 6px 9px; border-radius: 999px; background: #FFF1BF; color: #5A4300; box-shadow: inset 0 -2px 0 #D9A400; pointer-events: none; }
.ph-aus .ph-bild::after { display: none; }

/* Seitenköpfe mit Bild rechts, auf allen Unterseiten gleich gesetzt */
.hero--mit-bild .innen { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero--mit-bild .hero__text { grid-column: 1; grid-row: 1; max-width: none; }
.hero__bild { grid-column: 2; grid-row: 1; margin: 0; }
.hero__bild img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 50px rgba(0,30,15,.35); border: 4px solid rgba(255,255,255,.14); }
.hero__bild--auto img { aspect-ratio: auto; object-fit: contain; border: 0; box-shadow: none; border-radius: 0; filter: drop-shadow(0 26px 22px rgba(0,30,15,.35)); }
.hero--seite.hero--mit-bild { padding-bottom: 80px; }
@media (max-width: 1020px) {
  .hero--mit-bild .innen { grid-template-columns: 1fr; }
  .hero__bild { grid-column: 1; grid-row: 2; }
  .hero__bild img { aspect-ratio: 16 / 10; }
}

/* Bilder in den Reiterflächen */
.panel__rechts { display: grid; gap: 14px; align-content: start; }
.panel__bild { margin: 0; }
.panel__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg); }
.panel--zwei > div > .panel__bild { margin-top: 22px; }
.neuro__haupt--foto { background: var(--gruen-dunkel); }
.neuro__foto { position: absolute; inset: 0; z-index: -2; margin: 0; }
.neuro__foto img { width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: grayscale(.3); }
.neuro__haupt--foto::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,82,43,.72) 0%, rgba(0,82,43,.9) 55%, rgba(0,70,36,.97) 100%); }
.neuro__foto.ph-bild::after { left: auto; right: 12px; top: auto; bottom: 12px; }
/* KG-ZNS: Foto als Bildband oben in der grünen Fläche (vorher unter der Abdeckung unsichtbar) */
.neuro__haupt--foto::before { content: none; }
.neuro__foto { position: relative; inset: auto; z-index: 0; margin: calc(-1 * clamp(30px, 5vw, 60px)) calc(-1 * clamp(30px, 5vw, 60px)) 26px; height: clamp(170px, 18vw, 230px); overflow: hidden; }
.neuro__foto img { opacity: 1; filter: none; object-position: center 35%; }
.neuro__foto::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,82,43,0) 45%, rgba(0,82,43,.95) 100%); }
.neuro__foto.ph-bild::after { left: 12px; right: auto; top: 12px; bottom: auto; }
.neuro__haupt--foto .neuro__kuerzel { top: auto; bottom: -30px; }
/* Teamkopf: Porträt, Gesicht im Bild */
.hero__bild--portrait img { object-position: center 20%; }
/* Karrierekopf: Auto läuft wie auf der Startseite bis an den Kartenrand */
.hero__bild--auto { margin-right: calc((min(var(--breite), 100vw - 2 * var(--rand) - 32px) - 100vw + 32px) / 2); }
@media (max-width: 1020px) { .hero__bild--auto { margin-right: calc(-1 * var(--rand) - 16px); } }

/* ===== Runde 9: geteilter Seitenkopf =====
   Das Foto füllt die rechte Hälfte der grünen Karte von Kante zu Kante (oben und unten parallel),
   läuft zum Text hin ins Grün aus und ist oben abgedunkelt, damit das Menü lesbar bleibt.
   Ausnahme: das freigestellte Praxisauto (Karriere) steht wie auf der Startseite. */
.hero--mit-bild { overflow: hidden; }
.hero--mit-bild:not(:has(.hero__bild--auto)) .innen { display: block; }
.hero--mit-bild:not(:has(.hero__bild--auto)) .hero__text { max-width: min(560px, 48%); }
.hero--mit-bild .hero__bild:not(.hero__bild--auto) { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; margin: 0; z-index: 0; border-radius: 0 var(--r-xl) var(--r-xl) 0; overflow: hidden; }
.hero--mit-bild .hero__bild:not(.hero__bild--auto) picture { display: block; height: 100%; }
.hero--mit-bild .hero__bild:not(.hero__bild--auto) img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; }
.hero--mit-bild .hero__bild:not(.hero__bild--auto)::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,74,38,1) 0%, rgba(0,74,38,.55) 18%, rgba(0,74,38,0) 42%),
              linear-gradient(180deg, rgba(0,50,26,.7) 0%, rgba(0,50,26,0) 26%); }
.hero--mit-bild .hero__bild.ph-bild::after { left: auto; right: 18px; top: auto; bottom: 18px; }
.hero__bild--denis img { object-position: 62% 28%; }
.hero--mit-bild .hero__text { position: relative; z-index: 2; }
@media (max-width: 1020px) {
  .hero--mit-bild:not(:has(.hero__bild--auto)) .hero__text { max-width: none; }
  .hero--mit-bild.hero--seite:not(:has(.hero__bild--auto)) { padding-bottom: 0; }
  .hero--mit-bild .hero__bild:not(.hero__bild--auto) { position: relative; width: auto; height: 300px; margin: 36px calc(-1 * var(--rand) - 16px) 0; border-radius: 0 0 22px 22px; }
  .hero--mit-bild .hero__bild:not(.hero__bild--auto)::before { background: linear-gradient(180deg, rgba(0,74,38,1) 0%, rgba(0,74,38,0) 35%); }
}
/* Runde 9b: Foto per Maske ausblenden statt Farbe darüberlegen (keine Kante zum Blatthintergrund) */
.hero--mit-bild .hero__bild:not(.hero__bild--auto) { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 16%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 16%, #000 42%); }
.hero--mit-bild .hero__bild:not(.hero__bild--auto)::before { background: linear-gradient(180deg, rgba(0,50,26,.72) 0%, rgba(0,50,26,0) 24%); }
.hero__bild--denis img { object-position: 55% 8%; }
@media (max-width: 1020px) {
  .hero--mit-bild:not(:has(.hero__bild--auto)) .innen { display: flex; flex-direction: column; }
  .hero--mit-bild .hero__bild:not(.hero__bild--auto) { order: 2; margin: 32px -18px 0; height: 320px; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); }
  .hero--mit-bild .hero__bild:not(.hero__bild--auto)::before { content: none; }
}
@media (max-width: 1020px) {
  .hero--mit-bild .hero__bild:not(.hero__bild--auto) { align-self: stretch; width: calc(100% + 36px) !important; max-width: none; }
  .hero__bild--denis img { object-position: 60% 10%; }
}
@media (max-width: 1020px) and (min-width: 761px) {
  .hero--mit-bild .hero__bild:not(.hero__bild--auto) { margin-left: calc(-1 * var(--rand) - 16px); margin-right: calc(-1 * var(--rand) - 16px); width: calc(100% + 2 * var(--rand) + 32px) !important; height: 400px; }
  .hero__bild--denis img { object-position: 60% 2%; }
}
@media (max-width: 1020px) and (min-width: 761px) { .hero__bild--denis img { object-position: 60% 24%; } }
@media (max-width: 1020px) and (min-width: 761px) {
  .hero--mit-bild .hero__bild:not(.hero__bild--auto) { height: 460px; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%); }
  .hero__bild--denis img { object-position: 60% 0%; }
}
/* Teamkarten: Foto groß oben, darunter Name, Rolle, Text */
.personen .person { grid-template-columns: 1fr; gap: 0; padding: 0; overflow: hidden; align-items: start; }
.personen .person__bild { aspect-ratio: 4 / 3; border-radius: 0; position: relative; }
.personen .person__bild img { object-position: 55% 18%; }
.personen .person > div:last-child { padding: 26px 28px 30px; }
.person__bild--leer { flex-direction: column; gap: 10px; }
.person__bild--leer img { width: 22%; }
.person__folgt { font: 600 13px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--maigruen-text); }
.person-mini img { object-position: 55% 16%; }
@media (max-width: 1020px) and (min-width: 600px) { .personen { grid-template-columns: 1fr 1fr; } }
.personen .person { align-content: start; }
.person-mini picture { display: block; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; }
.person-mini img { border-radius: 0; transform: scale(1.7); transform-origin: 56% 20%; object-position: 56% 12%; }
/* Knopf direkt unter dem Rezept-Tipp statt an den unteren Rand gedrückt (vorher große Lücke) */
.neuro__seite .knopf { margin-top: 6px; }
/* Bildbreite begrenzen: auf großen Bildschirmen sonst zu starker Zoom auf das Gesicht */
@media (min-width: 1021px) { .hero--mit-bild .hero__bild:not(.hero__bild--auto) { width: min(50%, 700px); } .hero__bild--denis img { object-position: 55% 0%; } }

/* ===== Live seit 27.10.2026: keine Vorschau-Markierungen mehr ===== */
/* Stockfotos behalten die Klasse .ph-bild (Tauschliste in NOTIZEN.md), zeigen aber kein Schild. */
.ph { background: transparent; box-shadow: none; padding: 0; }
.ph-bild::after, .fehlt, .ph-schalter { display: none; }