/* Unterseiten Heilberufe und Unternehmen (Seitensitzung, 02.11.2026).
   Kopf, Knöpfe, Fußleiste und Grundwerte kommen aus unterseiten-basis.css (erzeugt aus startseite.html). */

.kachel{aspect-ratio:var(--kachel-format);border-radius:var(--kachel-ecke);overflow:hidden;background:var(--flaeche)}
.kachel img{width:100%;height:100%;object-fit:cover}
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ueberzeile{margin:0 0 22px;color:var(--p700);font-weight:500;font-size:.95rem}
abbr[title]{text-decoration:none;cursor:help}

/* Aktuelle Seite in Menü und Fußleiste */
.kopf__nav a[aria-current="page"]{color:var(--p700)}
.kopf__nav a[aria-current="page"]::after{transform:scaleX(1)}
.blatt__liste a[aria-current="page"]{color:var(--p700)}
.fuss1__seiten a[aria-current="page"]{text-decoration-line:underline;text-decoration-color:var(--p100)}

/* Kopf der Unterseite: Text links, rechts Berufsliste (Heilberufe) oder Ansprechpartner (Unternehmen) */
.seitenkopf .innen{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,88px);align-items:center;padding-block:clamp(56px,6.5vw,104px)}
.seitenkopf h1{max-width:20ch;text-wrap:balance;font-size:clamp(2.4rem,.8rem + 3.2vw,3.75rem)}
.seitenkopf__unter{max-width:34em;margin-top:28px;font-size:clamp(1.1rem,1rem + .35vw,1.3rem);line-height:1.55;color:var(--tinte)}
.held__knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

.personen{display:flex;align-items:center;gap:16px;max-width:34em;margin-top:40px;padding-top:24px;border-top:1px solid var(--linie)}
.personen__koepfe{display:flex;gap:6px;flex:none}
.personen__koepfe .kachel{width:40px;background:#2f3739}
/* Kopf und Schultern statt ganzer Figur: Ausschnitt aus den Gesichtspositionen der Fotos gerechnet */
.personen__koepfe img{transform:scale(1.79);transform-origin:50% 13.6%}
.personen p{font-size:.95rem;line-height:1.45;color:var(--text)}
.personen b{font-weight:600;color:var(--tinte)}

.berufe{padding:clamp(26px,2.8vw,40px);background:#fff;border:1px solid var(--linie);border-radius:24px}
.berufe h2{font-size:1.625rem;line-height:1.15;letter-spacing:-.015em}
.berufe__gruppe{margin-top:20px;padding-top:18px;border-top:1px solid var(--linie)}
.berufe h3{margin-bottom:6px;font:600 .875rem/1.4 "Inter",system-ui,sans-serif;letter-spacing:0;color:var(--p700)}
.berufe__gruppe p{font-size:1rem;line-height:1.6;color:var(--tinte)}
.berufe__mehr{margin-top:20px;padding-top:18px;border-top:1px solid var(--linie);font-size:.95rem;color:var(--leise)}

.ansprech{justify-self:end;width:min(100%,340px);margin:0}
.ansprech .kachel{background:#2f3739}
.ansprech img{object-position:50% 25%}
.ansprech figcaption{margin-top:16px;font-size:.95rem;line-height:1.4;color:var(--leise)}
.ansprech figcaption b{display:block;margin-bottom:2px;font:500 1.375rem/1.2 "Familjen Grotesk",system-ui,sans-serif;letter-spacing:-.01em;color:var(--tinte)}

/* Drei Punkte: Titel und Texte stehen in allen Spalten auf gleicher Höhe (Subgrid) */
.punkte{background:#fff;border-block:1px solid var(--linie);padding-block:clamp(56px,7vw,104px)}
.punkte h2{max-width:20ch}
.punkte__kopf p{margin-top:14px;font-size:1.0625rem;color:var(--text);max-width:40em}
.punkte__raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;column-gap:clamp(24px,3.4vw,48px);margin-top:clamp(32px,4vw,56px)}
.punkt{grid-row:span 2;display:grid;grid-template-rows:subgrid;padding-top:24px;border-top:1px solid var(--tinte)}
.punkt h3{max-width:15ch;text-wrap:balance}
.punkt p{margin-top:12px;max-width:30em;line-height:1.6;color:var(--text)}

/* Schwerpunkt-Fläche mit Grafik B, Farbe wie die Kachel auf der Startseite */
.schwerpunkt{padding-top:clamp(56px,7vw,104px)}
.schwerpunkt__karte{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(28px,3.6vw,56px);border-radius:24px;overflow:hidden;color:#fff}
.schwerpunkt__karte--heil{background:var(--p700)}
.schwerpunkt__karte--untern{background:var(--schwarz)}
.b-figur{margin:0;min-width:0}
.b-figur svg{display:block;width:100%;height:auto}
.schwerpunkt h2{max-width:18ch;color:#fff}
.schwerpunkt p{margin-top:18px;max-width:34em;font-size:1.0625rem;line-height:1.65;color:#E9F1F4}
.schwerpunkt__karte--untern p{color:#c2cdd1}
.schwerpunkt .schwerpunkt__fach{margin-top:14px;font-weight:600;color:#fff}
.schwerpunkt__zweit{margin-top:32px;padding-top:28px;border-top:1px solid rgba(255,255,255,.18)}
.schwerpunkt h3{color:#fff;font-size:1.375rem}
.schwerpunkt__zweit p{margin-top:10px}

/* Preis vorab */
.preisvorab{padding-block:clamp(56px,7vw,104px)}
/* Drei Spalten: Grafik, Titel, Text; Titel und erster Absatz beginnen auf einer Höhe */
.preisvorab .innen{display:grid;grid-template-columns:auto minmax(0,5fr) minmax(0,7fr);gap:24px clamp(20px,3.4vw,48px);align-items:start}
.preisvorab__bild .preis__bild{width:clamp(72px,7vw,104px);height:auto}
.preisvorab h2{text-wrap:balance}
.preisvorab p{max-width:38em;color:var(--text)}
.preisvorab p+p{margin-top:16px}
.preisvorab .pfeillink{color:var(--tinte);white-space:nowrap}
.preisvorab__knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* Grafik B einmal abspielen: das Skript setzt „wartet“, beim Hineinscrollen „laeuft“.
   Ohne Klasse (kein Skript) und bei reduzierter Bewegung steht der Endzustand. */
@keyframes u-fluss{to{stroke-dashoffset:-17}}
@keyframes u-bh-setzen{0%,22%{transform:translate(0,-40px);opacity:0;animation-timing-function:cubic-bezier(.15,.6,.25,1)}34%{opacity:1}81%,100%{transform:translate(0,0);opacity:1}}
@keyframes u-bh-licht{0%,81%{opacity:.1}97%,100%{opacity:1}}
@keyframes u-bh-plan{0%,72%{opacity:.9}84%,100%{opacity:0}}
:is(.wartet,.laeuft) .k7-bh .anbau{animation:u-bh-setzen 3.2s linear both}
:is(.wartet,.laeuft) .k7-bh .fa{animation:u-bh-licht 3.2s ease-in-out both}
:is(.wartet,.laeuft) .k7-bh .plan{animation:u-bh-plan 3.2s ease-in-out both,u-fluss 1.6s linear 2}
/* Unternehmen: Der Betrieb steht auf seiner alten Platte, hebt ab und setzt sich auf die Platte der Nachfolge */
@keyframes u-bu-gleiten{0%,12%{transform:translate(-96.99px,56px);animation-timing-function:ease-out}22%{transform:translate(-96.99px,48px);animation-timing-function:cubic-bezier(.45,0,.3,1)}76%{transform:translate(0,-8px);animation-timing-function:ease-in-out}86%,100%{transform:translate(0,0)}}
@keyframes u-bu-plan{0%,80%{opacity:.9}88%,100%{opacity:0}}
:is(.wartet,.laeuft) .k7-bu .firma{animation:u-bu-gleiten 5s linear both}
:is(.wartet,.laeuft) .k7-bu .plan{animation:u-bu-plan 5s ease-in-out both,u-fluss 1.6s linear 3}
:is(.wartet,.laeuft) .k7-bu .weg{animation:u-fluss 1.6s linear 3}
.wartet *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.b-figur *{animation:none!important}}

/* Tablet und Handy */
@media (max-width:1100px){
  .preisvorab .innen{grid-template-columns:auto minmax(0,1fr)}
  .preisvorab__text{grid-column:2}
}
@media (max-width:900px){
  .seitenkopf .innen{grid-template-columns:1fr;align-items:start;padding-block:48px 56px}
  .ansprech{justify-self:start;display:flex;align-items:center;gap:18px;width:auto}
  .ansprech .kachel{width:96px;flex:none}
  .ansprech figcaption{margin-top:0}
  .punkte__raster{grid-template-columns:1fr;grid-template-rows:none;row-gap:32px}
  .punkt{grid-row:auto;display:block}
  .schwerpunkt__karte{grid-template-columns:1fr;gap:8px;padding:24px 24px 32px}
  .b-figur{margin:-8px -24px 0}
  .preisvorab .innen{grid-template-columns:1fr;gap:20px}
  .preisvorab__text{grid-column:auto}
  .preisvorab h2{max-width:18ch}
}
@media (max-width:560px){
  .held__knoepfe .knopf,.preisvorab__knoepfe .knopf{flex:1 1 100%}
  .preisvorab .pfeillink{white-space:normal}
}

/* Icons der drei Punkte: eigene Iso-Zeichnungen (bau/icons.mjs), laufen einmal beim Hineinscrollen.
   Ohne Skript und bei reduzierter Bewegung steht der Endzustand. */
.punkte__raster{grid-template-rows:auto auto auto}
.punkt{grid-row:span 3}
.punkt__bild{height:104px;margin-bottom:24px;display:flex;align-items:flex-end}
.punkt__bild svg{display:block;height:100%;width:auto;max-width:200px;overflow:visible}
.punkt:nth-child(2) .punkt__bild{--d:.15s}
.punkt:nth-child(3) .punkt__bild{--d:.3s}
@keyframes ic-zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ic-heben{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes ic-fallen{0%{transform:translateY(-16px);opacity:0}55%{transform:translateY(1.5px);opacity:1}75%{transform:translateY(-1px)}100%{transform:none;opacity:1}}
@keyframes ic-stempel{0%{transform:scale(1.9);opacity:0}65%{transform:scale(.94);opacity:1}100%{transform:none;opacity:1}}
@keyframes ic-wachsen{from{transform:scaleY(.08)}to{transform:none}}
:is(.wartet,.laeuft) .ic-weg,:is(.wartet,.laeuft) .ic-haken{stroke-dasharray:1;animation:ic-zeichnen 1s cubic-bezier(.45,0,.25,1) both;animation-delay:calc(var(--d,0s) + .15s)}
:is(.wartet,.laeuft) .ic-flagge{animation:ic-heben .5s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--d,0s) + 1s)}
:is(.wartet,.laeuft) .ic-muenze{animation:ic-fallen .7s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(var(--d,0s) + .2s)}
:is(.wartet,.laeuft) .ic-siegel{transform-box:fill-box;transform-origin:center;animation:ic-stempel .55s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(var(--d,0s) + .3s)}
:is(.wartet,.laeuft) [class*="ic-balken-"]{transform-box:fill-box;transform-origin:50% 100%;animation:ic-wachsen .6s cubic-bezier(.2,.8,.3,1) both}
:is(.wartet,.laeuft) .ic-balken-1{animation-delay:calc(var(--d,0s) + .1s)}
:is(.wartet,.laeuft) .ic-balken-2{animation-delay:calc(var(--d,0s) + .22s)}
:is(.wartet,.laeuft) .ic-balken-3{animation-delay:calc(var(--d,0s) + .34s)}
@media (prefers-reduced-motion:reduce){.punkt__bild *{animation:none!important}}

/* Unternehmen: Punktraster der Startgrafik in Petrol 700 als schräges Band (Skizze Flo) aus der Lücke über der
   Überschrift hinter dem Porträt hindurch nach rechts; zur Mitte am dichtesten, links und rechts schwächer. Leichte Welle */
.seitenkopf{overflow-x:clip}
.ansprech{position:relative;isolation:isolate}
.ansprech__bild{position:relative;isolation:isolate}
.ansprech__punkte{position:absolute;z-index:-1;left:-97%;top:-31.6%;width:274%;height:165.7%;pointer-events:none}
.seitenkopf__text{position:relative;z-index:1}
/* Heilberufe: dasselbe Band hinter der Berufe-Karte, in Bildschirm-Pixeln am rechten oberen Kartenrand verankert,
   damit Punktabstand und Größe wie auf der Unternehmen-Seite bleiben */
.berufe__rahmen{position:relative;isolation:isolate}
.ansprech__punkte.band--berufe{left:auto;right:-260px;top:-166px;width:930px;height:870px}
/* Welle: jede Punktlinie entlang der Iso-Achse hebt und senkt sich, gegeneinander versetzt; so läuft eine Welle durchs Raster */
@keyframes fp-welle{from{transform:translateY(-2.6px)}to{transform:translateY(2.6px)}}
.ansprech__punkte .welle{animation:fp-welle 3.2s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.16s)}
@media (prefers-reduced-motion:reduce){.ansprech__punkte .welle{animation:none}}
@media (max-width:900px){
  .punkt__bild{height:80px;margin-bottom:18px}
  .ansprech__punkte{display:none}
  .ansprech__bild{flex:none}
}
/* Sichtbare Brotkrume (nur im Live-Bau, live/lib/seo.mjs): steht an der Stelle der Überzeile und erbt deren Stil */
.brotkrume ol{display:flex;flex-wrap:wrap;align-items:baseline;margin:0;padding:0;list-style:none}
.brotkrume li+li::before{content:"›";content:"›" / "";margin:0 .5em}
.brotkrume a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.brotkrume a:hover{text-decoration-thickness:2px}