/* Bausteine bs-* (lib/bausteine.php) – A Gestaltung, B Bewegung. Werte gespiegelt aus leistungen.css (Stand 1617325): bei Änderung beide ändern
   (Spiegelprüfung tools/tests/bausteine.php). Feste Farben nur in :root, Hell, Druck; kein prefers-color-scheme; ls-Grafiken nur in bs-Bausteinen färben. */
:root{--bs-karte-pad:1.5rem;--bs-luecke:var(--abstand-5);--bs-text2:var(--muted);--bs-glow:rgba(34,211,238,.28);--bs-schatten:inset 0 1px 0 rgba(255,255,255,.04),0 1.5rem 3rem -2rem rgba(0,0,0,.7)}
@media(max-width:560px){:root{--bs-karte-pad:1.25rem;--bs-luecke:var(--abstand-4)}}
/* LCP-Schutz aller Seitenköpfe (main.js .sek) */
html.js .page-hero.sek:not(.sek-ein):not(.sek-aus){opacity:1;transform:none}
svg.ls-sprite{position:absolute;width:0;height:0;overflow:hidden}
:is(.bs-karten,.bs-projekte,.bs-leistungen,.bs-punkte,.bs-zahlen,.bs-folge,.bs-liste,.bs-vertrauen,.bs-chips ul){list-style:none}
:where(.bs-karte,.bs-leistung,.bs-liste,.bs-folge,.bs-abschluss) :is(p,li){line-height:1.6;text-wrap:pretty}
.bs-projekt-kern,.bs-zahlen b,.bs-folge>*::before{font-family:'Space Grotesk';font-variant-numeric:tabular-nums}
/* Karten (nie .card) */
.bs-karte{position:relative;min-width:0;padding:var(--bs-karte-pad);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--bs-schatten)}
:where(.bs-karte,.bs-leistung) :is(h2,h3){font-size:var(--fs-h3);line-height:1.2;text-wrap:balance}
.bs-karten,.bs-projekte,.bs-leistungen,.bs-wege{display:grid;gap:var(--bs-luecke)}
.bs-ico{flex:none;width:2.5rem;height:2.5rem;padding:.5rem;border-radius:.75rem;background:var(--cyan-soft);color:var(--cyan);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.bs-pfeil-link{display:inline-block;padding:.625rem 0;font-weight:600;line-height:1.5}
.bs-pfeil-link::after{content:"\a0→"/""}
.bs-pfeil-link:hover,:where(.bs-karte,.bs-liste,.bs-abschluss) p a:not([class]){text-decoration:underline 1px var(--cyan-glow);text-underline-offset:.2em}
.bs-links{display:flex;flex-wrap:wrap;gap:0 1.25rem;margin-top:1.25rem;padding-top:.5rem;border-top:1px solid var(--line)}
/* Etiketten ≥ 12 px, Kleines ≥ 13 px */
.bs-nr,.bs-projekt-etikett,.bs-chips-titel{font-size:max(.75rem,12px);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.bs-etikett{font-size:max(.78rem,12px)}
.bs-klein,.bs-stand,.bs-hinweis,.bs-vertrauen,.bs-projekt-domain,.bs-projekt-leistung,.bs-zahlen span,.bs-person .bs-leise{font-size:max(.8125rem,13px)}
.bs-klein,.bs-stand,.bs-vertrauen,.bs-chips-titel,.bs-projekt-domain{color:var(--muted2)}
.bs-leise,.bs-hinweis,.bs-ohne,.bs-leistung-text,.bs-punkte li,.bs-zahlen span,.bs-folge p,.bs-weg-karte p,.bs-person-text,.bs-chips a{color:var(--bs-text2)}
.bs-marke{display:inline-block;margin-left:.5rem;padding:0 .5rem;border:1px solid var(--cyan);border-radius:999px;background:var(--cyan-soft);font-size:max(.75rem,12px);letter-spacing:.06em;line-height:1.6;vertical-align:.05em}
.bs-hinweis{display:flex;align-items:center;gap:.75rem;margin-top:var(--abstand-5)}
.bs-hinweis::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 .25rem var(--cyan-soft)}
.bs-stand{margin-top:.5rem}
/* Kopf (H1-Größe aus --fs-h1-seite) */
.bs-kopf{padding-bottom:var(--abstand-6)}
.bs-kopf h1{line-height:1.08;letter-spacing:-.025em}
.bs-kopf-raster{display:grid;gap:3.5rem;align-items:center}
.bs-kopf-text,.bs-kopf-seite{min-width:0}
.page-hero p.bs-intro{max-width:34rem}
.bs-knoepfe{margin-top:2rem}
.bs-leise{margin-top:.75rem;font-size:.95rem}
.bs-vertrauen{display:flex;flex-wrap:wrap;gap:.375rem 1.25rem;margin-top:1.5rem}
.bs-vertrauen li::before{content:"✓"/"";margin-right:.4rem;color:var(--cyan);font-weight:700}
.bs-wort{position:relative;display:inline-block}
.bs-wort .ls-strich{position:absolute;left:0;bottom:-.14em;width:100%;height:auto;overflow:visible;pointer-events:none}
.bs-wort .ls-g-strich{stroke:var(--coral);stroke-width:3.5}
@media(min-width:921px){.bs-kopf-raster--seite{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
@media(max-width:920px){.bs-kopf{padding-top:var(--abstand-7)}}
@media(max-width:560px){.bs-kopf .bs-leise{padding-right:4.5rem}}
/* Ohne/Mit */
.bs-ohne-mit{display:grid;align-content:start}
.bs-ohne,.bs-mit{padding-left:.875rem;border-left:2px solid var(--line2);font-size:.95rem}
.bs-mit{margin-top:.625rem;border-left-color:var(--cyan)}
.bs-mit b{color:var(--cyan)}
/* Leistungen: kein overflow/transform (begriff()) */
.bs-leistung{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto auto 1fr;align-content:start;column-gap:.875rem}
.bs-leistung>*{grid-column:1/-1}
.bs-leistung .bs-ico{grid-column:1;grid-row:1}
.bs-leistung .bs-nr{grid-column:2;grid-row:1;align-self:center}
.bs-leistung :is(h2,h3){margin-top:1rem}
.bs-leistung-text{margin-top:.625rem}
.bs-leistung .bs-links{grid-row:5;align-self:end}
.bs-leistung--aktiv{border-color:var(--cyan)}
.bs-leistungen--leiste{column-gap:3rem;row-gap:0}
.bs-leistungen--leiste>li{padding:1.125rem 0 1.375rem;border-top:1px solid var(--line)}
.bs-leistung--breit{grid-column:1/-1}
.bs-punkte{display:grid;gap:.5rem;margin-top:1rem}
.bs-punkte li{position:relative;padding-left:1.75rem;font-size:.95rem}
.bs-punkte li::before{content:"✓"/"";position:absolute;left:0;top:.2em;display:grid;place-items:center;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--cyan-soft);color:var(--cyan);font-size:.65rem;font-weight:700;line-height:1}
@media(min-width:640px){.bs-karten,.bs-projekte,.bs-leistungen--kompakt{grid-template-columns:1fr 1fr}.bs-projekt--breit{grid-column:1/-1}}
@media(min-width:760px){.bs-leistungen--leiste,.bs-wege{grid-template-columns:1fr 1fr}.bs-leistung--breit{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto}.bs-leistung--breit>*{grid-column:1/3}.bs-leistung--breit .bs-punkte{grid-column:3;grid-row:1/5;align-self:center;margin:0 0 0 1.625rem;padding-left:2.5rem;border-left:1px solid var(--line)}.bs-leistung--breit .bs-links{grid-row:4}}
@media(min-width:920px) and (max-width:1099px){.bs-leistungen--voll .bs-leistung:not(.bs-leistung--breit){column-gap:1.5rem}.bs-leistungen--voll .bs-leistung:not(.bs-leistung--breit)>*{grid-column:2}.bs-leistungen--voll .bs-leistung:not(.bs-leistung--breit) .bs-ico{grid-column:1;grid-row:1/-1;align-self:start}}
/* ≥ 1100 px: 02–04 per subgrid, Linkzeilen gleich hoch, Kennzahlen dreispaltig */
@media(min-width:1100px){.bs-karten,.bs-projekte,.bs-leistungen--voll{grid-template-columns:repeat(3,1fr)}.bs-projekt--breit ul.bs-zahlen{grid-column:1/-1;grid-row:10;grid-template-columns:repeat(3,1fr)}.bs-projekt--breit .bs-zahlen li{padding:1.125rem 1.5rem 0;border:0;border-left:1px solid var(--line)}.bs-projekt--breit .bs-zahlen li:first-child{padding-left:0;border:0}.bs-leistungen--kompakt{grid-template-columns:repeat(4,1fr)}.bs-leistungen--voll{row-gap:0}.bs-leistungen--voll .bs-leistung--breit{margin-bottom:var(--bs-luecke)}.bs-leistungen--voll>.bs-leistung:not(.bs-leistung--breit){grid-row:span 5;grid-template-rows:subgrid}.bs-leistungen--voll .bs-links{align-self:start}}
/* Projekte */
.bs-projekt{display:flex;flex-direction:column}
.bs-projekt-bild{aspect-ratio:16/10;margin-bottom:1.25rem;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg2)}
.bs-projekt-bild img{width:100%;height:100%;object-fit:cover}
.bs-projekt :is(h2,h3){margin-top:.375rem}
.bs-projekt--breit :is(h2,h3){font-size:1.5rem}
.bs-projekt-kern{margin-top:.5rem;color:var(--text);font-size:1.05rem;font-weight:500;line-height:1.45}
.bs-projekt-leistung{margin-top:.25rem}
.bs-projekt-leistung a{display:inline-block;padding:.75rem 0}
.bs-projekt .bs-pfeil-link{align-self:flex-start;margin-top:auto;padding-top:1.125rem}
.bs-zahlen{display:grid;margin-top:1.25rem;border-top:1px solid var(--line)}
.bs-zahlen li{padding:.75rem 0;border-bottom:1px solid var(--line)}
.bs-zahlen b{display:block;color:var(--cyan);font-size:1.6rem;line-height:1.15;letter-spacing:-.02em;white-space:nowrap}
.bs-zahlen span{display:block;margin-top:.125rem;line-height:1.45}
@media(min-width:760px){.bs-projekt--breit.bs-projekt--bild{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-content:start;column-gap:2.5rem}.bs-projekt--breit.bs-projekt--bild>*{grid-column:2}.bs-projekt--breit .bs-projekt-bild{grid-column:1;grid-row:1/span 9;align-self:start;margin:0}}
/* Ablauf (Kinder li oder div) */
.bs-folge{counter-reset:bs-schritt;position:relative;display:grid;gap:1.75rem}
.bs-folge::before{content:"";position:absolute;left:calc(1.25rem - 1px);top:1.25rem;bottom:0;width:2px;background:linear-gradient(var(--cyan),var(--line2) 6rem calc(100% - 6rem),transparent calc(100% - 3rem))}
.bs-folge>*{position:relative;min-height:2.5rem;padding-left:3.75rem}
.bs-folge>*::before{counter-increment:bs-schritt;content:counter(bs-schritt);position:absolute;left:0;top:0;display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1.5px solid var(--cyan);border-radius:50%;background:var(--bg);box-shadow:0 0 0 .375rem var(--bg);color:var(--cyan);font-weight:700;line-height:1}
.bs-folge :is(h3,h4){padding-top:.375rem;font-size:1.1rem}
.bs-folge p{margin-top:.375rem;font-size:.95rem}
@media(min-width:1100px){.bs-folge{grid-auto-flow:column;grid-auto-columns:1fr;gap:1.5rem}.bs-folge::before{top:calc(1.25rem - 1px);bottom:auto;left:1.25rem;right:1.25rem;width:auto;height:2px;background:linear-gradient(90deg,var(--cyan),var(--line2) 45%,transparent)}.bs-folge>*{padding:3.75rem 0 0}}
/* Abschluss */
.bs-wege{max-width:58rem;margin-inline:auto}
.bs-weg-karte{display:flex;flex-direction:column;align-items:flex-start}
.bs-weg-karte h3{font-size:1.3rem}
.bs-weg-karte p{margin:.5rem 0 1.5rem}
.bs-weg-karte .btn{margin-top:auto}
.bs-person{display:flex;align-items:center;justify-content:center;gap:1.25rem 1.5rem;max-width:40rem;margin:var(--abstand-7) auto 0}
.bs-person-bild{position:relative;flex:none;width:6rem;height:6rem}
.bs-person-bild img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.bs-person-bild .ls-ring{position:absolute;inset:-.375rem;width:calc(100% + .75rem);height:calc(100% + .75rem);overflow:visible}
.bs-person-bild .ls-g-zeichnen{stroke:var(--coral)}
.bs-person-text{font-size:.95rem}
.bs-person-text b{color:var(--text)}
@media(max-width:520px){.bs-weg-karte .btn{align-self:stretch}.bs-person{align-items:flex-start}}
/* Chips: am Handy wischbar (Überlauf nur im ul), mit Tastatur umbrechend */
.bs-chips{display:flex;align-items:center;gap:.75rem 1.25rem;margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.bs-chips ul{display:flex;gap:.5rem;min-width:0;margin-block:-6px;padding-block:6px;overflow-x:auto;scrollbar-width:none}
.bs-chips :is(a,span){white-space:nowrap}
.bs-chips a{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.5rem 1.05rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.9rem;font-weight:500;transition:color .18s,border-color .18s,background .18s}
.bs-chips a:hover{border-color:var(--cyan);color:var(--text)}
.bs-chips a:focus-visible{border-radius:999px}
.bs-chips a[aria-current=page]{border-color:var(--cyan);background:var(--cyan-soft);color:var(--text)}
.bs-chips a span{color:var(--muted2)}
@media(max-width:1099px){.bs-chips{flex-direction:column;align-items:stretch;margin-top:2.5rem}.bs-chips ul{margin-inline:-28px;padding-inline:28px 2.5rem;mask-image:linear-gradient(90deg,var(--bg) calc(100% - 3rem),transparent)}.bs-chips ul:has(a:focus-visible){flex-wrap:wrap;overflow:visible;mask-image:none}}
@media(min-width:1100px){.bs-chips ul{flex-wrap:wrap;overflow:visible}}
/* Liste mit Linien */
.bs-liste{display:grid;column-gap:2.5rem}
.bs-liste>li{padding:1.125rem 0 1.375rem;border-top:1px solid var(--line)}
@media(min-width:760px){.bs-liste--2{grid-template-columns:1fr 1fr}}
/* Beitragskarte (.post aus style.css) */
.post .date{font-size:max(.75rem,12px);letter-spacing:.12em}
.post-kat{color:var(--muted);font-size:max(.75rem,12px);letter-spacing:.12em}
.post{transition:border-color .18s,box-shadow .18s,translate .18s}
.post:hover{transform:none}
/* Hell */
html[data-design=hell]{--bs-glow:rgba(8,112,137,.18);--bs-text2:#34505c;--bs-schatten:0 1px 2px rgba(14,36,48,.06),0 .75rem 2rem -1.25rem rgba(14,36,48,.2)}
html[data-schrift=gross][data-design=hell]{--bs-text2:var(--muted)}
html[data-design=hell] .bs-intro{color:var(--bs-text2)}
html[data-design=hell] :where(.bs-karte,.bs-liste,.bs-abschluss) p a:not([class]){text-decoration-color:currentColor}
@media print{.bs-wort .grad{background:none!important;color:currentColor!important;-webkit-text-fill-color:currentColor}.bs-chips{display:none!important}.bs-kopf-raster{display:block}}

/* ═══ B Bewegung ═══ nur translate/scale, opacity, stroke-dashoffset; nichts Endloses */
@keyframes bs-zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes bs-linie{from{scale:var(--bs-l)}to{scale:1}}
@media screen and (prefers-reduced-motion:no-preference){
  /* Kopf-Strich steht, solange das Keks-Banner offen ist */
  .ansicht-js .bs-kopf .ls-g-strich{stroke-dasharray:1 2;stroke-dashoffset:1;animation:bs-zeichnen .6s var(--ease) .1s both}
  :root:is(.keks-offen:not(:has(#keks.raus)),:not(.ls-frei):not(:has(#keks:not(.start),.keks-mini:not([hidden])))) .bs-kopf .ls-g-strich{animation-play-state:paused}
  @media (hover:hover) and (pointer:fine){.bs-ico{transition:scale .18s var(--ease)}:hover>.bs-ico{scale:1.08}.bs-pfeil-link::after{display:inline-block;transition:translate .18s var(--ease)}.bs-pfeil-link:is(:hover,:focus-visible)::after{translate:.125rem 0}.post:hover{translate:0 -.25rem}}
  /* Zugabe: Ablauf-Linie folgt dem Scrollen */
  .bs-folge{--bs-l:1 0}
  .bs-folge::before{transform-origin:0 0}
  @media (min-width:1100px){.bs-folge{--bs-l:0 1}}
  @supports (animation-timeline:view()){html:not([data-ohne-st]) .bs-folge::before{animation:bs-linie linear both;animation-timeline:view();animation-range:entry 10% cover 55%}}
}
@media (prefers-reduced-motion:reduce),print{.bs-kopf .ls-g-strich,.bs-ico,.bs-pfeil-link::after,.bs-folge::before,.post{animation:none!important;transition:none!important}}