/* Erzeugt von quellen/neu.py – nicht von Hand ändern. */
@layer basis, alt, welt, bausteine, seiten, hilfen;
:root{
  --flaeche: #f2f4f3;
  --flaeche-tief: #c9e9df;
  --linie-stark: #c3d9d3;
  --akzent: #53c1aa;
  --akzent-tief: #1c7360;
  --akzent-hell: #dcf4ec;
  --zweit: #0f3a35;
  --zweit-tief: #0a2a26;
  --zweit-hell: #e6f1ee;
  --signal: oklch(52% .19 25);
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --radius-s: 4px;
  --radius: 4px;
  --radius-l: 0px;
  --radius-xl: 0px;
  --raum-s: clamp(3rem, 2rem + 4vw, 5rem);
  --schatten-1: none;
  --schatten-2: none;
  --schatten-3: 0 0 0 1.5px #c3d9d3;
}
@layer alt {
/* Basis und Bausteine. Tokens (:root) erzeugt build.py aus inhalt.TOKENS. */
@layer basis, bausteine, hilfen;

@font-face{
  font-family:"Poppins Fallback";
  src:local("Arial");
  size-adjust:112.16%;
  ascent-override:93.62%;
  descent-override:31.21%;
  line-gap-override:8.92%;
}

/* ================= Basis ================= */
@layer basis{
  *,*::before,*::after{box-sizing:border-box;}
  html{
    scrollbar-gutter:stable;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
  }
  body{
    margin:0;
    overflow-x:clip;
    background:var(--papier);
    color:var(--tinte);
    font:400 1.0625rem/1.65 var(--font);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  img,svg{display:block;max-width:100%;}
  img{height:auto;}
  h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.12;letter-spacing:-.018em;text-wrap:balance;hyphens:auto;hyphenate-limit-chars:14 6 6;overflow-wrap:break-word;}
  p{margin:0;}
  p,li,dd{text-wrap:pretty;hyphens:auto;}
  ul,ol{margin:0;padding:0;}
  a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px;}
  button,input,textarea,select{font:inherit;color:inherit;}
  button{cursor:pointer;}
  :focus-visible{outline:2px solid var(--zweit);outline-offset:3px;}
  [id]{scroll-margin-top:calc(var(--kopf-hoehe) + 1.5rem);}
  ::selection{background:var(--akzent-hell);}
  [hidden]{display:none !important;}
  [tabindex="-1"]:focus{outline:none;}
}

/* ================= Bausteine ================= */
@layer bausteine{

  /* ---------- Layout ---------- */
  .huelle{width:min(100% - 2 * var(--rand), var(--breite));margin-inline:auto;}
  .huelle.schmal{width:min(100% - 2 * var(--rand), 820px);}
  .sektion{padding-block:var(--raum);}
  .sektion.kompakt{padding-block:var(--raum-s);}
  .sektion.flaeche{background:var(--flaeche);}
  .sektion + .sektion:not(.flaeche):not(.ohne-linie){border-top:var(--strich) solid var(--linie);}
  .kopfzeile{display:flex;align-items:end;justify-content:space-between;gap:1.5rem 2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,1.4rem + 2vw,3.5rem);}
  .kopfzeile > div{max-width:680px;}
  .stapel{display:flex;flex-direction:column;gap:1rem;}
  .raster-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(1.5rem,1rem + 2vw,4rem);}
  .raster-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.25rem;}

  /* ---------- Typografie ---------- */
  .t-plakat{font-size:var(--gr-plakat);line-height:1.02;letter-spacing:-.03em;}
  .t-titel{font-size:var(--gr-titel);letter-spacing:-.022em;}
  .t-zwischen{font-size:var(--gr-zwischen);line-height:1.3;letter-spacing:-.01em;}
  .t-lead{font-size:var(--gr-lead);line-height:1.55;color:var(--tinte-weich);font-weight:300;max-width:62ch;}
  .t-text{color:var(--tinte-weich);max-width:68ch;}
  .t-text + .t-text{margin-top:1em;}
  .t-klein{font-size:.875rem;line-height:1.5;color:var(--tinte-weich);}
  .t-dachzeile{
    display:block;margin-bottom:.75rem;
    font-size:clamp(.9375rem,.9rem + .15vw,1.0625rem);font-weight:600;line-height:1.4;letter-spacing:-.005em;color:var(--akzent-tief);
  }
  .t-akzent{color:var(--akzent-tief);}

  /* ---------- Icons ---------- */
  .ico{width:1.25em;height:1.25em;flex:none;}
  .kreis{
    --g:3.5rem;
    width:var(--g);height:var(--g);border-radius:0;flex:none;
    display:grid;place-items:center;background:var(--akzent-hell);color:var(--akzent-tief);
  }
  .kreis svg{width:58%;height:58%;}
  .kreis.gross{--g:6.5rem;}
  .kreis.klein{--g:2.5rem;}
  .kreis.voll{background:var(--akzent);color:var(--tinte);}

  /* ---------- Knopf ---------- */
  .knopf{
    display:inline-flex;align-items:center;justify-content:center;gap:.6em;
    min-height:3rem;padding:.75rem 1.5rem;border-radius:var(--radius);border:var(--strich) solid transparent;background:transparent;position:relative;isolation:isolate;overflow:hidden;
    font-size:.9375rem;font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap;
    transition:color var(--dauer-blende) var(--feder-blende),border-color var(--dauer-blende) var(--feder-blende),transform var(--dauer-lebhaft) var(--feder-lebhaft);
  }
  .knopf::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--knopf-flut,transparent);transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--dauer-standard) var(--feder-standard);}
  .knopf:hover::before{transform:scaleX(1);transform-origin:0 50%;}
  .knopf:active{transform:scale(.96);}
  .knopf .ico{width:1.1em;height:1.1em;}
  .pfeil{display:inline-grid;overflow:hidden;width:1.1em;height:1.1em;flex:none;}
  .pfeil .ico{grid-area:1 / 1;width:100%;height:100%;transition:transform var(--dauer-lebhaft) var(--feder-lebhaft);}
  .pfeil .ico + .ico{transform:translateX(-130%);}
  :is(.knopf,.karte,.teaser-gross,.foto-marke):hover .pfeil .ico:first-child{transform:translateX(130%);}
  :is(.knopf,.karte,.teaser-gross,.foto-marke):hover .pfeil .ico + .ico{transform:none;}
  .knopf-primaer{background:var(--zweit);color:var(--papier);--knopf-flut:var(--zweit-tief);}
  .knopf-kontur{border-color:var(--tinte);color:var(--tinte);--knopf-flut:var(--tinte);}
  .knopf-kontur:hover{color:var(--papier);}
  .knopf-hell{background:var(--papier);color:var(--tinte);border-color:var(--linie-stark);--knopf-flut:var(--flaeche);}
  .knopf-hell:hover{border-color:var(--tinte);}
  .knopf-text{min-height:2.75rem;padding-inline:.25rem;color:var(--akzent-tief);font-weight:600;}
  .knopf-text::before{inset:auto .25rem .45rem;height:1.5px;z-index:0;background:currentColor;}
  .knopf-text:hover{color:var(--tinte);}
  .knopf-symbol{min-height:0;width:3rem;height:3rem;padding:0;border-color:var(--linie-stark);--knopf-flut:var(--flaeche);}
  .knopf-symbol:disabled::before{display:none;}
  .knopf-symbol:hover{border-color:var(--tinte);}
  .knopf-symbol:disabled{opacity:.35;cursor:default;transform:none;}
  .knopfreihe{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;}

  /* ---------- Chip ---------- */
  .chip{
    display:inline-flex;align-items:center;gap:.45em;min-height:2.25rem;padding:.35rem .9rem;
    border-radius:var(--radius);border:var(--strich) solid var(--linie-stark);background:var(--papier);
    font-size:.875rem;font-weight:500;line-height:1.2;color:var(--tinte-weich);text-decoration:none;
  }
  button.chip{min-height:2.75rem;transition:background-color var(--dauer-blende) var(--feder-blende),color .2s,border-color .2s,transform var(--dauer-lebhaft) var(--feder-lebhaft);}
  button.chip:active{transform:scale(.96);}
  button.chip:hover{transform:translateY(-2px);}
  button.chip:hover{border-color:var(--tinte);color:var(--tinte);}
  button.chip[aria-pressed="true"]{background:var(--tinte);border-color:var(--tinte);color:var(--papier);}
  .chip .zahl{font-size:.75rem;opacity:.7;font-variant-numeric:tabular-nums;}
  .chip-mint{background:var(--akzent-hell);border-color:transparent;color:var(--akzent-tief);}
  .chips{display:flex;flex-wrap:wrap;gap:.5rem;}

  /* ---------- Karte ---------- */
  .karte{
    position:relative;isolation:isolate;display:flex;flex-direction:column;gap:1rem;
    padding:clamp(1.5rem,1.2rem + 1vw,2rem);border-radius:var(--radius-l);
    background:var(--papier);border:var(--strich) solid var(--linie);
    transition:transform var(--dauer-lebhaft) var(--feder-lebhaft),border-color var(--dauer-blende) var(--feder-blende);
  }
  .karte.flach{background:var(--flaeche);border-color:transparent;}
  .karte::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;box-shadow:var(--schatten-2);opacity:0;pointer-events:none;transition:opacity var(--dauer-standard) var(--feder-blende);}
  .karte:has(.karte-link):hover{transform:translateY(-4px);border-color:transparent;}
  .karte:has(.karte-link):hover::before{opacity:1;}
  @media (hover:hover){
    .karte:has(.karte-link)::after,.teaser-gross::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
      background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),oklch(74.5% .105 172 / .16),transparent 70%);opacity:0;transition:opacity var(--dauer-standard) var(--feder-blende);}
    .karte:has(.karte-link):hover::after,.teaser-gross:hover::after{opacity:1;}
  }
  .karte-link{text-decoration:none;}
  .karte-link::after{content:"";position:absolute;inset:0;border-radius:inherit;}
  .karte-link:focus-visible{outline:none;}
  .karte:has(.karte-link:focus-visible){outline:2px solid var(--zweit);outline-offset:3px;}
  .karte .mehr{margin-top:auto;display:inline-flex;align-items:center;gap:.4em;font-size:.9375rem;font-weight:600;color:var(--akzent-tief);}

  /* Referenzkarte */
  .ref-karte{padding:0;gap:0;}
  .ref-marke{
    aspect-ratio:16/9;display:grid;place-items:center;padding:1.5rem;text-align:center;
    background:var(--ton,var(--akzent-hell));color:var(--tinte);
    font-size:clamp(1.25rem,1rem + 1vw,1.625rem);font-weight:600;letter-spacing:-.02em;line-height:1.15;
    border-radius:0;
  }
  .ref-karte .inhalt{display:flex;flex-direction:column;gap:.75rem;padding:1.5rem 1.5rem 1.75rem;flex:1;}
  .ref-karte .inhalt > .chip,.teaser-gross .inhalt > .chip{align-self:flex-start;}
  .ref-karte h3{font-size:1.125rem;line-height:1.35;letter-spacing:-.01em;}
  .ton-energie{--ton:var(--akzent-hell);}
  .ton-oeffentlich{--ton:var(--zweit-hell);}
  .ton-banken{--ton:var(--flaeche-tief);}
  .ton-versicherungen{--ton:oklch(95% .03 85);}

  /* ---------- Pfad (Breadcrumb) ---------- */
  .pfad ol{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem .5rem;font-size:.875rem;color:var(--tinte-zart);margin-bottom:1.5rem;}
  .pfad li{display:flex;align-items:center;gap:.5rem;}
  .pfad li + li::before{content:"/";color:var(--linie-stark);}
  .pfad a{text-decoration:none;color:var(--tinte-weich);}
  .pfad a:hover{color:var(--tinte);text-decoration:underline;}

  /* ---------- Sprunglink ---------- */
  .sprung{position:absolute;left:1rem;top:-4rem;z-index:100;padding:.75rem 1.25rem;border-radius:var(--radius);background:var(--tinte);color:var(--papier);text-decoration:none;}
  .sprung:focus{top:1rem;}

  /* ---------- Kopf klassisch ---------- */
  .kopf{
    position:sticky;top:0;z-index:50;
    background:oklch(100% 0 0 / .88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
    border-bottom:var(--strich) solid transparent;
    transition:transform var(--dauer-standard) var(--feder-standard),border-color .3s,background-color .3s;
  }
  .kopf.z-gerollt{border-bottom-color:var(--linie);}
  .kopf-zeile{display:flex;align-items:center;gap:2rem;height:var(--kopf-hoehe);}
  .logo{display:block;flex:none;}
  .logo img{height:40px;width:auto;}
  .haupt-nav{flex:1;}
  .haupt-nav > ul{list-style:none;display:flex;justify-content:center;gap:.25rem;}
  .nav-link{
    display:inline-flex;align-items:center;gap:.3em;min-height:2.75rem;padding:.5rem 1rem;border-radius:var(--radius);
    border:0;background:transparent;font-size:.9375rem;font-weight:500;text-decoration:none;color:var(--tinte);
    transition:background-color var(--dauer-blende) var(--feder-blende);
  }
  .nav-link{position:relative;}
  .nav-link::after{content:"";position:absolute;left:1rem;right:1rem;bottom:.35rem;height:2px;background:var(--akzent);transform:scaleX(0);transition:transform var(--dauer-lebhaft) var(--feder-lebhaft);}
  .nav-link:hover::after,.nav-link[aria-expanded="true"]::after,.nav-link[aria-current="page"]::after,.nav-link.z-aktuell::after{transform:scaleX(1);}
  .nav-link[aria-current="page"],.nav-link.z-aktuell{color:var(--akzent-tief);}
  .nav-link .ico{width:1em;height:1em;transition:rotate var(--dauer-standard) var(--feder-standard);}
  .nav-link[aria-expanded="true"] .ico{rotate:180deg;}
  .menue{position:relative;}
  .menue-panel{
    position:absolute;left:50%;top:calc(100% + .75rem);translate:-50% 0;min-width:280px;
    padding:.75rem;border-radius:var(--radius-l);background:var(--papier);border:var(--strich) solid var(--linie);box-shadow:var(--schatten-3);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity var(--dauer-blende) var(--feder-blende),transform var(--dauer-standard) var(--feder-standard),visibility 0s linear .25s;
  }
  .menue-panel::before{content:"";position:absolute;left:0;right:0;top:-.85rem;height:.85rem;}
  .menue.z-offen .menue-panel{opacity:1;visibility:visible;transform:none;transition:opacity var(--dauer-blende) var(--feder-blende),transform var(--dauer-standard) var(--feder-standard),visibility 0s;}
  .menue-panel.breit{width:min(760px,calc(100vw - 2 * var(--rand)));display:grid;grid-template-columns:1.35fr 1fr;gap:.5rem;}
  .menue-gruppe{padding:.5rem;}
  .menue-gruppe + .menue-gruppe{border-left:var(--strich) solid var(--linie);padding-left:1rem;}
  .menue-titel{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-zart);padding:.25rem .75rem .5rem;}
  .menue-panel ul{list-style:none;display:flex;flex-direction:column;gap:2px;}
  .menue-eintrag{display:flex;align-items:center;gap:.85rem;padding:.6rem .75rem;border-radius:var(--radius);text-decoration:none;transition:background-color var(--dauer-blende) var(--feder-blende);}
  .menue-eintrag:hover,.menue-eintrag[aria-current="page"]{background:var(--flaeche);}
  .menue-eintrag b{display:block;font-size:.9375rem;font-weight:500;line-height:1.3;}
  .menue-eintrag small{display:block;font-size:.8125rem;line-height:1.35;color:var(--tinte-zart);}
  .menue-eintrag .kreis{--g:2.5rem;}
  .menue-fuss{grid-column:1 / -1;border-top:var(--strich) solid var(--linie);padding:.75rem .75rem .25rem;}
  .kopf-aktion{display:flex;align-items:center;gap:.5rem;}
  .burger{display:none;}
  .kopf-panel{display:none;}

  @media (max-width:980px){
    .haupt-nav,.kopf-aktion .knopf-primaer{display:none;}
    .kopf-zeile{justify-content:space-between;}
    .burger{display:inline-flex;}
    .kopf-panel{
      display:grid;grid-template-rows:0fr;
      transition:grid-template-rows var(--dauer-standard) var(--feder-standard);
    }
    .kopf.z-offen .kopf-panel{grid-template-rows:1fr;}
    .kopf-panel > div{overflow:hidden;}
    .kopf-panel nav{padding-block:.5rem 1.5rem;max-height:calc(100dvh - var(--kopf-hoehe));overflow:auto;}
    .kopf-panel ul{list-style:none;display:flex;flex-direction:column;}
    .kopf-panel a{display:flex;align-items:center;min-height:3rem;text-decoration:none;font-size:1.0625rem;font-weight:500;border-bottom:var(--strich) solid var(--linie);}
    .kopf-panel ul ul a{padding-left:1.25rem;font-size:.9375rem;font-weight:400;color:var(--tinte-weich);}
    .kopf-panel a[aria-current="page"]{color:var(--akzent-tief);}
    .kopf-panel .knopf{width:100%;margin-top:1.5rem;}
  }

  /* ---------- Einstieg ---------- */
  .einstieg{padding-block:clamp(3rem,2rem + 5vw,6.5rem) clamp(3.5rem,2rem + 5vw,6.5rem);}
  .einstieg-raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:center;}
  .einstieg .t-plakat{margin-bottom:1.5rem;}
  .einstieg .t-lead{margin-bottom:2rem;}
  .einstieg.zentriert{text-align:center;}
  .einstieg.zentriert .t-lead{margin-inline:auto;}
  .einstieg.zentriert .knopfreihe,.einstieg.zentriert .chips{justify-content:center;}
  .einstieg-bild{display:grid;place-items:center;}
  @media (max-width:900px){.einstieg-raster{grid-template-columns:1fr;}}

  /* ---------- Kennzahlen-Band ---------- */
  .kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,88px),1fr));gap:1.5rem clamp(1rem,.5rem + 2vw,2rem);margin-top:2.5rem;padding-top:2rem;border-top:var(--strich) solid var(--linie);}
  .kennzahl dt{font-size:clamp(2rem,1.5rem + 2vw,2.75rem);font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
  .kennzahl dd{margin:.5rem 0 0;font-size:.9375rem;line-height:1.4;color:var(--tinte-weich);}
  .kennzahlen.band{margin-top:0;padding:clamp(1.75rem,1.2rem + 2vw,2.75rem);border:0;border-radius:var(--radius-xl);background:var(--flaeche);}

  /* ---------- Schritte ---------- */
  .schritte{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:1.25rem;counter-reset:schritt;}
  .schritt{position:relative;padding-top:1.5rem;border-top:var(--strich) solid var(--tinte);counter-increment:schritt;}
  .schritt::before{content:counter(schritt, decimal-leading-zero);display:block;margin-bottom:1rem;font-size:.8125rem;font-weight:600;letter-spacing:.08em;color:var(--akzent-tief);font-variant-numeric:tabular-nums;}
  .schritt h3{font-size:1.1875rem;margin-bottom:.5rem;}
  .schritt p{font-size:.9375rem;color:var(--tinte-weich);}
  .schritt .kreis{margin-bottom:1rem;}

  /* Zeitstrahl vertikal (Referenz) */
  .verlauf{list-style:none;display:flex;flex-direction:column;}
  .verlauf-punkt{position:relative;display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:1.25rem;padding-bottom:clamp(2rem,1.5rem + 2vw,3.5rem);}
  .verlauf-punkt:last-child{padding-bottom:0;}
  .verlauf-punkt::before{content:"";position:absolute;left:1.75rem;top:3.5rem;bottom:.5rem;width:1.5px;background:var(--linie-stark);translate:-50% 0;}
  .verlauf-punkt:last-child::before{display:none;}
  .verlauf-nr{width:3.5rem;height:3.5rem;border-radius:0;display:grid;place-items:center;background:var(--akzent-hell);color:var(--akzent-tief);font-weight:600;font-variant-numeric:tabular-nums;}
  .verlauf-punkt:last-child .verlauf-nr{background:var(--akzent);color:var(--tinte);}
  .verlauf-punkt h2{font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem);margin:.6rem 0 .75rem;}

  /* ---------- Checkliste ---------- */
  .checkliste{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:.75rem;}
  .checkliste li{display:flex;gap:.85rem;align-items:flex-start;padding:1.1rem 1.25rem;border-radius:var(--radius);background:var(--papier);border:var(--strich) solid var(--linie);line-height:1.5;}
  .checkliste .ico{color:var(--akzent-tief);margin-top:.15em;}

  /* ---------- Zitat / Kundenstimmen ---------- */
  .zitat{display:flex;flex-direction:column;gap:1.5rem;padding:clamp(1.75rem,1.2rem + 2vw,2.75rem);border-radius:var(--radius-xl);background:var(--flaeche);}
  .zitat .ico-zitat{width:2.25rem;height:2.25rem;color:var(--akzent);}
  .zitat blockquote{margin:0;font-size:clamp(1.25rem,1rem + 1vw,1.625rem);font-weight:500;line-height:1.4;letter-spacing:-.01em;text-wrap:pretty;}
  .zitat blockquote p{hyphens:manual;}
  .sektion.flaeche .zitat,.sektion.flaeche .kennzahlen.band,.sektion.flaeche .karte.flach{background:var(--papier);}
  .zitat figcaption{display:flex;align-items:center;gap:1rem;margin-top:auto;}
  .zitat figcaption b{display:block;font-weight:600;}
  .zitat figcaption span{display:block;font-size:.875rem;color:var(--tinte-weich);line-height:1.4;}
  .initialen{width:3rem;height:3rem;border-radius:0;display:grid;place-items:center;flex:none;background:var(--zweit-hell);color:var(--zweit);font-weight:600;font-size:.9375rem;}
  .zitat.gross blockquote{font-size:clamp(1.5rem,1.1rem + 1.8vw,2.375rem);line-height:1.3;letter-spacing:-.02em;}
  .hinweis-sinn{font-size:.75rem;color:var(--tinte-zart);}

  .wischreihe{display:grid;grid-auto-flow:column;grid-auto-columns:min(88%,440px);gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.25rem;overscroll-behavior-x:contain;}
  .wischreihe::-webkit-scrollbar{display:none;}
  .wischreihe > *{scroll-snap-align:start;}
  .wischreihe.karten{grid-auto-columns:min(80%,340px);}

  /* ---------- Referenz-Teaser gross ---------- */
  .teaser-gross{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:var(--radius-xl);isolation:isolate;border:var(--strich) solid var(--linie);position:relative;transition:box-shadow var(--dauer-standard) var(--feder-standard);}
  .teaser-gross:hover{box-shadow:var(--schatten-2);}
  .teaser-gross .ref-marke{aspect-ratio:auto;min-height:320px;border-radius:0;font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem);}
  .teaser-gross .inhalt{padding:clamp(1.75rem,1.2rem + 2vw,3rem);display:flex;flex-direction:column;gap:1rem;}
  .teaser-gross h3{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);line-height:1.2;}
  @media (max-width:760px){.teaser-gross{grid-template-columns:1fr;}.teaser-gross .ref-marke{min-height:200px;}}

  /* ---------- Logo-Wand ---------- */
  .logos{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:var(--strich) solid var(--linie);border-left:var(--strich) solid var(--linie);}
  .logos li{display:grid;place-items:center;min-height:96px;padding:1rem;border-right:var(--strich) solid var(--linie);border-bottom:var(--strich) solid var(--linie);text-align:center;font-weight:600;letter-spacing:-.01em;color:var(--tinte-zart);transition:color .3s;}
  .logos li:hover{color:var(--tinte);}
  @media (max-width:900px){.logos{grid-template-columns:repeat(3,minmax(0,1fr));}.logos li{min-height:80px;font-size:.875rem;}}

  /* ---------- Aufklapper ---------- */
  .klapp-liste{border-top:var(--strich) solid var(--linie);}
  .klapp{border-bottom:var(--strich) solid var(--linie);}
  .klapp-knopf{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:4rem;padding:1rem 0;
    border:0;background:none;text-align:left;font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);font-weight:500;
  }
  .klapp-knopf .zeichen{width:2.5rem;height:2.5rem;border-radius:var(--radius);display:grid;place-items:center;flex:none;border:var(--strich) solid var(--linie-stark);transition:rotate var(--dauer-standard) var(--feder-standard),background-color .25s;}
  .klapp-knopf:hover .zeichen{background:var(--flaeche);}
  .klapp.z-offen .zeichen{rotate:45deg;background:var(--akzent-hell);border-color:transparent;}
  .klapp-inhalt{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dauer-standard) var(--feder-standard);}
  .klapp.z-offen .klapp-inhalt,html:not(.js) .klapp-inhalt{grid-template-rows:1fr;}
  .klapp-inhalt > div{overflow:hidden;}
  .klapp-inhalt p{padding:0 3.5rem 1.5rem 0;color:var(--tinte-weich);max-width:70ch;}

  /* ---------- Team ---------- */
  .team{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:1.25rem;}
  .person{display:flex;flex-direction:column;gap:1rem;}
  .portrait{aspect-ratio:4/5;border-radius:var(--radius-l);background:var(--flaeche-tief);display:grid;place-items:center;color:var(--tinte-zart);font-size:clamp(2.5rem,2rem + 2vw,3.5rem);font-weight:600;letter-spacing:.02em;}
  .person-zeile{display:flex;align-items:center;justify-content:space-between;gap:.75rem;}
  .person h3{font-size:1.1875rem;}
  .person p{font-size:.9375rem;color:var(--tinte-weich);}

  /* ---------- Aufruf-Band ---------- */
  .aufruf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;padding:clamp(2rem,1.4rem + 3vw,4rem);border-radius:var(--radius-xl);background:var(--akzent-hell);}
  .aufruf .t-titel{margin-bottom:.75rem;}
  .aufruf .t-lead{color:var(--tinte-weich);}
  .aufruf .kontakt-direkt{display:flex;flex-direction:column;gap:.75rem;align-items:flex-start;}
  @media (max-width:760px){.aufruf{grid-template-columns:1fr;}}

  /* ---------- Filter ---------- */
  .filter{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:2rem;}
  #ref-raster{grid-template-columns:repeat(auto-fill,minmax(min(100%,255px),1fr));}
  .filter-status{margin-left:auto;font-size:.875rem;color:var(--tinte-zart);}

  /* ---------- Formular ---------- */
  .formular{display:grid;gap:1.25rem;}
  .feld{display:flex;flex-direction:column;gap:.45rem;}
  .feld label{font-size:.9375rem;font-weight:500;}
  .feld label .pflicht{color:var(--tinte-zart);font-weight:400;font-size:.8125rem;}
  .feld input,.feld textarea{
    width:100%;min-height:3.25rem;padding:.8rem 1rem;border-radius:var(--radius);
    border:var(--strich) solid var(--linie-stark);background:var(--papier);font-size:1rem;line-height:1.4;
    transition:border-color var(--dauer-blende) var(--feder-blende),box-shadow var(--dauer-blende) var(--feder-blende);
  }
  .feld textarea{min-height:9rem;resize:vertical;}
  .feld input:hover,.feld textarea:hover{border-color:var(--tinte-zart);}
  .feld input:focus-visible,.feld textarea:focus-visible{outline:none;border-color:var(--zweit);box-shadow:0 0 0 4px var(--zweit-hell);}
  .feld .hilfe{font-size:.8125rem;color:var(--tinte-zart);}
  .feld .fehler{display:none;align-items:center;gap:.4em;font-size:.875rem;color:var(--signal);}
  .feld.z-fehler input,.feld.z-fehler textarea{border-color:var(--signal);}
  .feld.z-fehler .fehler{display:flex;}
  .feld.z-ok input,.feld.z-ok textarea{border-color:var(--akzent-tief);}
  .feld-paar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1.25rem;}
  .einwilligung{display:flex;gap:.75rem;align-items:flex-start;font-size:.875rem;color:var(--tinte-weich);}
  .einwilligung input{width:1.25rem;height:1.25rem;margin:.15rem 0 0;accent-color:var(--zweit);flex:none;}
  .bestaetigung{display:flex;gap:1rem;align-items:flex-start;padding:1.5rem;border-radius:var(--radius-l);background:var(--akzent-hell);}
  .bestaetigung .ico{color:var(--akzent-tief);width:1.5rem;height:1.5rem;}

  /* Direktkontakt */
  .direkt{list-style:none;display:flex;flex-direction:column;}
  .direkt li{border-bottom:var(--strich) solid var(--linie);}
  .direkt a,.direkt span.zeile{display:flex;align-items:center;gap:1rem;min-height:3.75rem;text-decoration:none;}
  .direkt a:hover{color:var(--akzent-tief);}
  .direkt .kreis{--g:2.75rem;}
  .karte-platz{aspect-ratio:4/3;border-radius:var(--radius-l);background:
    linear-gradient(var(--linie) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg,var(--linie) 1px,transparent 1px) 0 0/32px 32px,
    var(--flaeche);display:grid;place-items:center;}
  .karte-platz .nadel{display:flex;flex-direction:column;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;}
  .karte-platz .nadel .kreis{--g:3rem;background:var(--zweit);color:var(--papier);box-shadow:var(--schatten-2);}

  /* ---------- Artikel mit Randspalte ---------- */
  .artikel{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:start;}
  .randspalte{position:sticky;top:calc(var(--kopf-hoehe) + 1.5rem);max-height:calc(100dvh - var(--kopf-hoehe) - 3rem);overflow:auto;}
  .randspalte ol{list-style:none;display:flex;flex-direction:column;gap:2px;font-size:.875rem;}
  .randspalte a{display:block;padding:.4rem .75rem;border-radius:var(--radius-s);text-decoration:none;color:var(--tinte-weich);line-height:1.35;}
  .randspalte a:hover{background:var(--flaeche);color:var(--tinte);}
  .rechtstext h2{font-size:1.375rem;margin:2.5rem 0 .75rem;}
  .rechtstext h2:first-child{margin-top:0;}
  .rechtstext p{color:var(--tinte-weich);max-width:70ch;}
  .rechtstext p + p{margin-top:.8em;}
  .rechtstext dl{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.5rem;margin-top:.75rem;}
  .rechtstext dt{font-weight:500;}
  .rechtstext dd{margin:0;color:var(--tinte-weich);}
  .dev-hinweis{display:flex;gap:.85rem;align-items:flex-start;padding:1rem 1.25rem;border-radius:var(--radius);border:1px dashed var(--linie-stark);font-size:.875rem;color:var(--tinte-weich);margin-bottom:2rem;}
  .dev-hinweis .ico{margin-top:.15em;}
  @media (max-width:860px){.artikel{grid-template-columns:1fr;}.randspalte{position:static;max-height:none;}}

  /* ---------- Fuss gross ---------- */
  .fuss{background:var(--flaeche);padding-block:clamp(3.5rem,2.5rem + 4vw,5.5rem) 2rem;margin-top:var(--raum-s);}
  .fuss-raster{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:2.5rem 2rem;}
  .fuss .logo img{height:44px;margin-bottom:1.25rem;}
  .fuss h2{font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-zart);margin-bottom:1rem;}
  .fuss ul{list-style:none;display:flex;flex-direction:column;gap:.35rem;}
  .fuss a{text-decoration:none;color:var(--tinte-weich);display:inline-flex;align-items:center;gap:.5rem;min-height:2rem;}
  .fuss a:hover{color:var(--tinte);text-decoration:underline;}
  .fuss-leiste{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:3.5rem;padding-top:1.5rem;border-top:var(--strich) solid var(--linie-stark);font-size:.8125rem;color:var(--tinte-zart);}
  .fuss-leiste a{min-height:0;color:inherit;}
  @media (max-width:860px){.fuss-raster{grid-template-columns:1fr 1fr;}.fuss-raster > :first-child{grid-column:1 / -1;}}

  /* ---------- Bilder ---------- */
  .bildrahmen{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:var(--flaeche-tief);}
  .bildrahmen > img{width:100%;height:100%;object-fit:cover;}
  .bildrahmen.quer{aspect-ratio:4/3;}
  .bildrahmen.breit{aspect-ratio:16/10;}
  .bildrahmen.frei{aspect-ratio:auto;background:var(--papier);}
  .bildrahmen.frei > img{object-fit:contain;height:auto;}
  .einstieg-foto{aspect-ratio:5/4;}
  .foto-marke{
    position:absolute;left:1.25rem;bottom:1.25rem;display:inline-flex;align-items:center;gap:.6rem;
    padding:.6rem 1rem .6rem .6rem;border-radius:var(--radius);background:oklch(100% 0 0 / .9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    font-size:.875rem;font-weight:600;box-shadow:var(--schatten-1);
  }
  .foto-marke{text-decoration:none;}
  .foto-marke .kreis{--g:2.25rem;background:var(--akzent);color:var(--tinte);}
  .logo-kachel{display:grid;place-items:center;background:var(--papier);border-radius:var(--radius);padding:.4rem .7rem;}
  .logo-kachel img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}

  /* Referenzkarte mit Foto */
  .ref-foto{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:0;background:var(--flaeche-tief);}
  .ref-foto > img{width:100%;height:100%;object-fit:cover;transition:scale var(--dauer-standard) var(--feder-standard);}
  .karte:hover .ref-foto > img,.teaser-gross:hover .ref-foto > img{scale:1.04;}
  .ref-foto .logo-kachel{position:absolute;left:1rem;bottom:1rem;width:7.5rem;height:3.25rem;box-shadow:var(--schatten-1);}
  .teaser-gross .ref-foto{aspect-ratio:auto;min-height:360px;border-radius:0;}
  .teaser-gross .ref-foto .logo-kachel{left:1.5rem;bottom:1.5rem;width:9rem;height:4rem;}
  @media (max-width:760px){.teaser-gross .ref-foto{min-height:220px;border-radius:0;}}

  /* Zitat mit Foto */
  .zitat-foto{width:3.5rem;height:3.5rem;border-radius:0;object-fit:cover;flex:none;background:var(--flaeche-tief);}
  .zitat.gross .zitat-foto{width:4.5rem;height:4.5rem;}

  /* Logo-Wand mit Logos */
  .logos li img{max-height:56px;max-width:100%;width:auto;height:auto;mix-blend-mode:multiply;filter:grayscale(1);opacity:.75;transition:filter var(--dauer-blende) var(--feder-blende),opacity var(--dauer-blende) var(--feder-blende);}
  .logos li img{transition:filter var(--dauer-standard) var(--feder-blende),opacity var(--dauer-standard) var(--feder-blende),transform var(--dauer-lebhaft) var(--feder-lebhaft);}
  .logos li:hover img{filter:none;opacity:1;transform:scale(1.06);}

  /* Team, Partner */
  .portrait{overflow:hidden;}
  .portrait > img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;}
  .partner-logo{height:84px;display:grid;place-items:center;padding:.75rem 1rem;border-radius:var(--radius);background:var(--papier);}
  .partner-logo img{max-height:52px;max-width:85%;width:auto;height:auto;object-fit:contain;}

  /* ---------- Ablauf: BPM-Lebenszyklus als Prozess-Strasse mit Rückführung ---------- */
  .ablauf{--kachel:clamp(4.5rem,3.4rem + 3vw,6.5rem);--schlaufe:3.5rem;--ab-grund:var(--papier);display:flex;flex-direction:column;gap:clamp(2rem,1.5rem + 2vw,3rem);}
  .sektion.flaeche .ablauf{--ab-grund:var(--flaeche);}
  .ablauf.kompakt{--kachel:clamp(3.5rem,3rem + 1.5vw,4.75rem);--schlaufe:3rem;}
  .ab-stationen{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding-top:var(--schlaufe);}
  .ab-schlaufe{position:absolute;top:.6rem;left:10%;right:10%;height:calc(var(--schlaufe) - .6rem - 14px);border:var(--strich) solid var(--akzent);border-bottom:0;pointer-events:none;}
  .ab-schlaufe::after{content:"";position:absolute;left:-7px;bottom:-11px;width:12px;height:10px;background:var(--akzent);clip-path:polygon(0 0,100% 0,50% 100%);}
  .ab-schlaufe span{position:absolute;left:50%;top:0;translate:-50% -55%;padding:0 1rem;background:var(--ab-grund);font-size:.875rem;font-weight:600;color:var(--akzent-tief);white-space:nowrap;}
  .ab-station{position:relative;display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:0 .5rem;border:0;background:none;font:inherit;color:var(--tinte);text-align:center;text-decoration:none;cursor:pointer;}
  .ab-station:not(:last-child)::after{content:"";position:absolute;top:calc(var(--kachel) / 2 - 1px);left:calc(50% + var(--kachel) / 2 + 10px);width:calc(100% - var(--kachel) - 30px);height:2px;background:var(--akzent);}
  .ab-station:not(:last-child)::before{content:"";position:absolute;top:calc(var(--kachel) / 2 - 6px);left:calc(150% - var(--kachel) / 2 - 20px);width:10px;height:12px;background:var(--akzent);clip-path:polygon(0 0,100% 50%,0 100%);}
  .ab-kachel{position:relative;width:var(--kachel);aspect-ratio:1;display:grid;place-items:center;flex:none;background:var(--akzent);color:var(--papier);
    transition:background-color var(--dauer-blende) var(--feder-blende),transform var(--dauer-lebhaft) var(--feder-lebhaft),box-shadow var(--dauer-standard) var(--feder-blende);}
  .ab-kachel svg{width:56%;height:56%;transform-origin:50% 50%;}
  .ab-nr{position:absolute;top:0;left:0;padding:.15rem .45rem;background:var(--ab-grund);color:var(--tinte);font-size:.75rem;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums;}
  .ab-text{display:flex;flex-direction:column;gap:.25rem;}
  .ab-titel{font-size:clamp(.875rem,.8rem + .3vw,1.0625rem);font-weight:600;line-height:1.25;transition:color var(--dauer-blende) var(--feder-blende);}
  .ab-stich{font-size:.8125rem;line-height:1.35;color:var(--tinte-zart);}
  .ablauf.kompakt .ab-stich{display:none;}
  .ablauf.kompakt .ab-titel{font-size:clamp(.75rem,.7rem + .25vw,.9375rem);hyphens:auto;overflow-wrap:anywhere;}
  .ab-station:hover .ab-kachel{transform:translateY(-4px);background:oklch(67% .11 172);}
  .ab-station[aria-selected="true"] .ab-kachel,.ab-station[aria-current="page"] .ab-kachel{background:var(--zweit);transform:translateY(-4px);box-shadow:0 12px 28px oklch(44% .075 315 / .3);}
  .ab-station[aria-selected="true"] .ab-titel,.ab-station[aria-current="page"] .ab-titel{color:var(--zweit);}
  .ab-station:focus-visible{outline-offset:6px;}

  .ab-basis{margin-top:clamp(2.25rem,1.75rem + 1.5vw,3rem);}
  .ab-basis-titel{display:flex;align-items:center;gap:1rem;margin-bottom:.9rem;font-size:.875rem;font-weight:600;color:var(--akzent-tief);white-space:nowrap;}
  .ab-basis-titel::before,.ab-basis-titel::after{content:"";flex:1;height:2px;background:var(--akzent);}
  .ab-basis-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;}
  .ab-extra{display:flex;align-items:center;gap:.9rem;min-height:4.25rem;padding:.75rem 1rem;border:0;background:var(--akzent-hell);font:inherit;font-weight:500;color:var(--tinte);text-align:left;cursor:pointer;
    transition:background-color var(--dauer-blende) var(--feder-blende),color var(--dauer-blende) var(--feder-blende),transform var(--dauer-lebhaft) var(--feder-lebhaft);}
  .ab-mini{width:2.75rem;height:2.75rem;display:grid;place-items:center;flex:none;background:var(--akzent);color:var(--papier);transition:background-color var(--dauer-blende) var(--feder-blende),color var(--dauer-blende) var(--feder-blende);}
  .ab-mini svg{width:62%;height:62%;}
  .ab-extra:hover{transform:translateY(-3px);}
  .ab-extra[aria-selected="true"]{background:var(--zweit);color:var(--papier);}
  .ab-extra[aria-selected="true"] .ab-mini{background:var(--papier);color:var(--zweit);}

  .k-strategie svg{animation:k-puls 2.8s ease-in-out infinite;}
  .k-dokumentation svg{animation:k-suche 4.2s ease-in-out infinite;}
  .k-analyse-optimierung svg{animation:k-wippe 3.4s ease-in-out infinite;}
  .k-implementierung svg{animation:k-dreh 10s linear infinite;}
  .k-monitoring svg{animation:k-schwebe 3.6s ease-in-out infinite;}
  @keyframes k-puls{0%,100%{transform:scale(1);}45%{transform:scale(1.09);}60%{transform:scale(.98);}}
  @keyframes k-suche{0%,100%{transform:translate(0,0);}25%{transform:translate(5%,-4%);}50%{transform:translate(0,-7%);}75%{transform:translate(-5%,-3%);}}
  @keyframes k-wippe{0%,100%{transform:rotate(-12deg);}50%{transform:rotate(12deg);}}
  @keyframes k-dreh{to{transform:rotate(360deg);}}
  @keyframes k-schwebe{0%,100%{transform:translateY(3%);}50%{transform:translateY(-6%);}}

  .ab-info{display:flex;flex-direction:column;gap:1rem;}
  .k-felder{display:grid;}
  .k-feld{grid-area:1 / 1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1.75rem clamp(2rem,1rem + 3vw,4.5rem);padding:clamp(1.75rem,1.2rem + 2vw,2.75rem);background:var(--papier);border:var(--strich) solid var(--linie);}
  .k-feld:not(.z-aktiv){visibility:hidden;}
  .js .k-feld.z-aktiv{animation:k-rein var(--dauer-standard) var(--feder-standard);}
  @keyframes k-rein{from{opacity:0;translate:0 .75rem;}to{opacity:1;translate:0 0;}}
  .k-links{display:flex;flex-direction:column;}
  .k-feld h3{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);margin-bottom:1rem;}
  .k-feld .chips{margin-bottom:1.25rem;}
  .k-feld .knopfreihe{margin-top:auto;padding-top:1.75rem;}
  .k-rechts{display:flex;flex-direction:column;padding-left:clamp(0rem,-1rem + 3vw,2.5rem);border-left:var(--strich) solid var(--linie);}
  .k-rechts h4{font-size:.875rem;font-weight:600;color:var(--tinte-zart);margin-bottom:.75rem;}
  .k-punkte{list-style:none;display:flex;flex-direction:column;gap:.6rem;}
  .k-punkte li{display:flex;gap:.7rem;align-items:flex-start;font-size:.9375rem;line-height:1.5;}
  .k-punkte .ico{color:var(--akzent-tief);margin-top:.15em;}
  .k-praxis{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem;}
  .k-praxis h4{flex-basis:100%;margin-bottom:.25rem;}
  .k-praxis a{display:grid;place-items:center;width:6.5rem;height:3rem;padding:.35rem .6rem;border:var(--strich) solid var(--linie);background:var(--papier);transition:border-color var(--dauer-blende) var(--feder-blende),transform var(--dauer-lebhaft) var(--feder-lebhaft);}
  .k-praxis a:hover{border-color:var(--tinte);transform:translateY(-2px);}
  .k-praxis img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
  .k-steuerung{display:flex;align-items:center;gap:.6rem;}
  .k-zeit{flex:1;height:3px;background:var(--linie);overflow:hidden;margin-inline:.5rem;}
  .k-zeit i{display:block;height:100%;width:0;background:var(--akzent);}
  .k-zeit.z-laeuft i{animation:k-zeit var(--k-dauer,7s) linear forwards;}
  @keyframes k-zeit{to{width:100%;}}
  .k-auto .k-an,.k-auto[aria-pressed="false"] .k-aus{display:none;}
  .k-auto[aria-pressed="false"] .k-an{display:inline-flex;}
  .k-auto{font-size:.875rem;min-height:3rem;padding-inline:1rem;}

  @media (max-width:860px){
    .ablauf{--kachel:4rem;}
    .ab-stationen{grid-template-columns:1fr;gap:1.5rem;padding-top:0;padding-left:2.5rem;}
    .ab-schlaufe{top:calc(var(--kachel) / 2);bottom:calc(var(--kachel) / 2);left:0;right:auto;width:1.6rem;height:auto;border:var(--strich) solid var(--akzent);border-right:0;}
    .ab-schlaufe::after{left:auto;right:-10px;top:-7px;bottom:auto;width:10px;height:12px;clip-path:polygon(0 0,100% 50%,0 100%);}
    .ab-schlaufe span{display:none;}
    .ab-station{flex-direction:row;align-items:center;text-align:left;gap:1rem;padding:0;}
    .ab-station:not(:last-child)::after{top:calc(var(--kachel) + 6px);left:calc(var(--kachel) / 2 - 1px);width:2px;height:calc(100% - var(--kachel) + 1.5rem - 22px);}
    .ab-station:not(:last-child)::before{top:calc(100% + 1.5rem - 16px);left:calc(var(--kachel) / 2 - 6px);width:12px;height:10px;clip-path:polygon(0 0,100% 0,50% 100%);}
    .ab-basis-reihe{grid-template-columns:1fr;}
    .k-feld{grid-template-columns:1fr;}
    .k-rechts{padding-left:0;border-left:0;padding-top:1.5rem;border-top:var(--strich) solid var(--linie);}
  }

  /* ---------- Wissen ---------- */
  .themen{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:1.25rem;}
  .thema{display:flex;flex-direction:column;gap:1.25rem;padding:clamp(1.5rem,1.2rem + 1vw,2rem);background:var(--papier);border:var(--strich) solid var(--linie);scroll-margin-top:calc(var(--kopf-hoehe) + 1.5rem);}
  .thema-kopf{display:flex;gap:1rem;align-items:flex-start;}
  .thema-kopf h3{margin-bottom:.35rem;}
  .thema-liste{list-style:none;display:flex;flex-direction:column;border-top:var(--strich) solid var(--linie);}
  .thema-liste li{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:3rem;border-bottom:var(--strich) solid var(--linie);font-size:.9375rem;}
  .thema-liste li > span:first-child{color:var(--tinte-zart);}
  .thema-liste a{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;min-height:3rem;text-decoration:none;font-weight:500;color:var(--tinte);}
  .thema-liste a:hover{color:var(--akzent-tief);}
  .thema-liste a:hover .pfeil .ico:first-child{transform:translateX(130%);}
  .thema-liste a:hover .pfeil .ico + .ico{transform:none;}
  .chip.bald{min-height:1.75rem;padding:.15rem .6rem;font-size:.75rem;border-style:dashed;color:var(--tinte-zart);white-space:nowrap;}
  .vorlagen-liste{list-style:none;display:flex;flex-direction:column;border-top:var(--strich) solid var(--linie);}
  .vorlagen-liste a{display:flex;align-items:center;gap:1rem;min-height:4.5rem;border-bottom:var(--strich) solid var(--linie);text-decoration:none;font-weight:500;}
  .vorlagen-liste a span:not(.kreis):not(.pfeil){flex:1;}
  .vorlagen-liste a:hover .pfeil .ico:first-child{transform:translateX(130%);}
  .vorlagen-liste a:hover .pfeil .ico + .ico{transform:none;}
  .vorlage{scroll-margin-top:calc(var(--kopf-hoehe) + 1.5rem);}
  .vorlage .chip{align-self:flex-start;}
  .vorlage .knopf{align-self:flex-start;margin-top:auto;}

  /* Beitrag (Leitfaden) */
  .beitrag{max-width:72ch;}
  .beitrag > h2,.beitrag .phase-block h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin:3rem 0 1rem;}
  .beitrag h3{font-size:1.125rem;margin:1.5rem 0 .6rem;}
  .beitrag p{color:var(--tinte-weich);margin-bottom:1rem;}
  .beitrag ul,.beitrag ol{padding-left:1.25rem;margin-bottom:1.25rem;color:var(--tinte-weich);display:flex;flex-direction:column;gap:.5rem;}
  .beitrag li::marker{color:var(--akzent-tief);}
  .beitrag b{color:var(--tinte);font-weight:600;}
  .beitrag a{color:var(--akzent-tief);text-decoration:underline;text-decoration-color:oklch(47% .085 172 / .35);transition:text-decoration-color var(--dauer-blende) var(--feder-blende);}
  .beitrag a:hover{text-decoration-color:currentColor;}
  .beitrag .knopf,.beitrag .karte-link{text-decoration:none;}
  .beitrag .knopf-primaer{color:var(--papier);}
  .beitrag .knopf-kontur{color:var(--tinte);}
  .beitrag .knopf-kontur:hover{color:var(--papier);}
  .kurz{padding:clamp(1.5rem,1.2rem + 1vw,2rem);background:var(--akzent-hell);}
  .kurz h2{font-size:1.25rem !important;margin:0 0 .6rem !important;}
  .kurz p{color:var(--tinte);margin:0;}
  .phase-block{padding-top:1rem;}
  .phase-kopf{display:flex;align-items:center;gap:1rem;margin:3rem 0 1rem;}
  .phase-kopf h2{margin:0 !important;}
  .phase-kopf .ab-kachel{transform:none;}
  .stolperstein{padding:1rem 1.25rem;background:var(--flaeche);}
  .weiter{font-weight:500;}
  .stolper-liste{counter-reset:none;}
  .g-link{text-decoration-style:dotted !important;}

  /* Glossar */
  .g-werkzeug{position:sticky;top:calc(var(--kopf-hoehe) + .5rem);z-index:5;display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:1rem 2rem;align-items:end;padding:1rem 0;margin-bottom:1rem;background:var(--papier);border-bottom:var(--strich) solid var(--linie);}
  .g-az{display:flex;flex-wrap:wrap;gap:.25rem;}
  .g-az a{display:grid;place-items:center;min-width:2.5rem;height:2.5rem;border:var(--strich) solid var(--linie-stark);text-decoration:none;font-weight:600;font-size:.875rem;transition:background-color var(--dauer-blende) var(--feder-blende),color var(--dauer-blende) var(--feder-blende);}
  .g-az a:hover{background:var(--tinte);color:var(--papier);border-color:var(--tinte);}
  .g-az a.z-leer{opacity:.3;pointer-events:none;}
  .g-status{grid-column:1 / -1;margin:0;min-height:1.25em;}
  .g-gruppe{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:1rem;padding-top:1.5rem;scroll-margin-top:calc(var(--kopf-hoehe) + 9rem);}
  .g-gruppe > h2{font-size:2rem;color:var(--akzent);line-height:1;}
  .g-liste dl{margin:0;}
  .begriff{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:.5rem 2rem;padding:1.25rem 0;border-top:var(--strich) solid var(--linie);scroll-margin-top:calc(var(--kopf-hoehe) + 9rem);}
  .begriff:target{background:var(--akzent-hell);box-shadow:-1rem 0 0 var(--akzent-hell),1rem 0 0 var(--akzent-hell);}
  .begriff dt{font-weight:600;font-size:1.0625rem;}
  .begriff dd{margin:0;color:var(--tinte-weich);}
  .begriff dd p{margin-bottom:.25rem;}
  .begriff .knopf-text{min-height:2.25rem;font-size:.875rem;}
  @media (max-width:760px){.g-werkzeug{grid-template-columns:1fr;position:static;}.g-gruppe{grid-template-columns:1fr;}.begriff{grid-template-columns:1fr;}}

  /* Reifegrad-Check */
  .check{display:flex;flex-direction:column;}
  .frage{margin:0;padding:1.75rem 0;border:0;border-top:var(--strich) solid var(--linie);}
  .frage legend{display:flex;gap:1rem;padding:0;margin-bottom:1rem;font-size:1.0625rem;font-weight:500;line-height:1.45;}
  .frage-nr{flex:none;min-width:2.25rem;height:2.25rem;display:grid;place-items:center;background:var(--flaeche);font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums;}
  .frage:has(input:checked) .frage-nr{background:var(--akzent);color:var(--papier);}
  .skala{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;padding-left:3.25rem;}
  .stufe{position:relative;display:grid;place-items:center;min-height:3.25rem;padding:.5rem;border:var(--strich) solid var(--linie-stark);text-align:center;font-size:.875rem;font-weight:500;cursor:pointer;
    transition:background-color var(--dauer-blende) var(--feder-blende),border-color var(--dauer-blende) var(--feder-blende),color var(--dauer-blende) var(--feder-blende),transform var(--dauer-lebhaft) var(--feder-lebhaft);}
  .stufe input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;}
  .stufe:hover{border-color:var(--tinte);transform:translateY(-2px);}
  .stufe:has(input:checked){background:var(--zweit);border-color:var(--zweit);color:var(--papier);}
  .stufe:has(input:focus-visible){outline:2px solid var(--zweit);outline-offset:3px;}
  .check-fuss{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 0;border-top:var(--strich) solid var(--linie);background:var(--papier);}
  .check-stand{font-size:.9375rem;color:var(--tinte-weich);font-variant-numeric:tabular-nums;}
  .knopf:disabled{opacity:.4;cursor:not-allowed;}
  .knopf:disabled::before{display:none;}
  .ergebnis{margin-top:2rem;padding:clamp(1.75rem,1.2rem + 2vw,2.75rem);border:var(--strich) solid var(--linie);background:var(--papier);}
  .js .ergebnis:not([hidden]){animation:k-rein var(--dauer-standard) var(--feder-standard);}
  .ergebnis .t-titel{margin-bottom:.75rem;}
  .balken{display:flex;flex-direction:column;gap:.75rem;margin:2rem 0;}
  .balken-zeile{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr) 3rem;gap:1rem;align-items:center;font-size:.9375rem;}
  .balken-spur{height:12px;background:var(--flaeche-tief);overflow:hidden;}
  .balken-spur i{display:block;height:100%;background:var(--akzent);transform:scaleX(var(--w,0));transform-origin:0 50%;transition:transform var(--dauer-standard) var(--feder-standard);}
  .balken-zeile.z-schwach .balken-spur i{background:var(--zweit);}
  .balken-zeile.z-schwach .balken-name{color:var(--zweit);font-weight:600;}
  .balken-wert{text-align:right;font-variant-numeric:tabular-nums;color:var(--tinte-weich);}
  .empfehlung{padding:1.5rem;background:var(--zweit-hell);}
  .empfehlung .knopfreihe{margin-top:1rem;}
  @media (max-width:640px){.skala{grid-template-columns:repeat(2,minmax(0,1fr));padding-left:0;}.balken-zeile{grid-template-columns:1fr 3rem;}.balken-name{grid-column:1 / -1;}}

  /* Auswahl im Vorlagen-Formular */
  .wahl{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:.6rem;}
  .wahl legend{font-size:.9375rem;font-weight:500;margin-bottom:.6rem;}
  .einwilligung.z-fehler span,.wahl.z-fehler legend{color:var(--signal);}

  /* ---------- Auftritt ---------- */
  .js [data-auftritt]:not(.z-sichtbar){opacity:0;}
  .js [data-auftritt].z-sichtbar{animation:auftritt var(--dauer-standard) var(--feder-standard) calc(var(--i,0) * 70ms) both;}
  @keyframes auftritt{from{opacity:0;translate:0 1.5rem;}to{opacity:1;translate:0 0;}}

/* ================= Hilfen ================= */
@layer hilfen{
  .nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
  .mt-0{margin-top:0;}
  .mt-s{margin-top:1rem;}
  .mt-m{margin-top:2rem;}
  .mt-l{margin-top:clamp(2.5rem,2rem + 2vw,4rem);}
  .mb-m{margin-bottom:2rem;}
}


}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
  .js [data-auftritt].z-sichtbar{animation:blende .4s linear both !important;}
  @keyframes blende{from{opacity:0;}to{opacity:1;}}
  .ab-kachel svg{animation:none !important;}
  .balken-spur i{transition:none;}
}

}
/* Erzeugt von quellen/entwurf.py – Federn hier, Rest in entwurf.css */
:root{
  --dauer-standard: 759ms;
  --feder-standard: linear(0, 0.0134, 0.047, 0.0943, 0.15, 0.2128, 0.2751, 0.3371, 0.3974, 0.455, 0.5093, 0.5599, 0.6066, 0.6495, 0.6885, 0.7251, 0.7569, 0.7854, 0.8109, 0.8337, 0.854, 0.8719, 0.8878, 0.9019, 0.9147, 0.9256, 0.9351, 0.9435, 0.9508, 0.9572, 0.9628, 0.9677, 0.972, 0.9758, 0.979, 0.9819, 0.9843, 0.9864, 0.9882, 0.9898, 0.9912, 0.9924, 0.9934, 0.9944, 0.9951, 0.9958, 0.9964, 0.9969, 0.9973, 0.9977, 0.998, 0.9983, 0.9985, 0.9987, 0.9989, 0.9991, 1);
  --dauer-lebhaft: 636ms;
  --feder-lebhaft: linear(0, 0.0124, 0.0426, 0.0883, 0.1441, 0.2063, 0.2693, 0.3363, 0.4028, 0.4675, 0.5265, 0.5848, 0.6389, 0.6886, 0.732, 0.7729, 0.8095, 0.8406, 0.8692, 0.8941, 0.9157, 0.9334, 0.9491, 0.9624, 0.9734, 0.9821, 0.9896, 0.9955, 1, 1.0036, 1.0063, 1.0082, 1.0094, 1.0102, 1.0106, 1.0107, 1.0105, 1.0101, 1.0095, 1.0089, 1.0083, 1.0076, 1.0069, 1.0062, 1.0055, 1.0048, 1.0042, 1.0037, 1.0032, 1.0027, 1.0023, 1.0019, 1.0016, 1.0013, 1.0011, 1.0008, 1);
  --dauer-blende: 396ms;
  --feder-blende: linear(0, 0.0149, 0.0512, 0.1016, 0.1649, 0.2284, 0.2932, 0.3571, 0.4188, 0.4773, 0.532, 0.5861, 0.6322, 0.6741, 0.7121, 0.7462, 0.7768, 0.8041, 0.83, 0.8513, 0.8702, 0.8868, 0.9014, 0.9142, 0.9254, 0.9359, 0.9444, 0.9518, 0.9583, 0.9639, 0.9688, 0.973, 0.9769, 0.9801, 0.9828, 0.9852, 0.9872, 0.989, 0.9905, 0.9919, 0.9931, 0.994, 0.9949, 0.9956, 0.9962, 0.9968, 0.9972, 0.9976, 0.998, 0.9983, 0.9985, 0.9987, 0.9989, 0.9991, 0.9992, 0.9993, 1);
  --dauer-traege: 1116ms;
  --feder-traege: linear(0, 0.0092, 0.0332, 0.0682, 0.1098, 0.1577, 0.2089, 0.2617, 0.3148, 0.3672, 0.4182, 0.4673, 0.5129, 0.5571, 0.5986, 0.6373, 0.6731, 0.7062, 0.7366, 0.7644, 0.7891, 0.8122, 0.8331, 0.852, 0.869, 0.8843, 0.898, 0.9102, 0.9209, 0.9306, 0.9393, 0.947, 0.9538, 0.9598, 0.965, 0.9697, 0.9737, 0.9773, 0.9804, 0.9832, 0.9855, 0.9876, 0.9894, 0.991, 0.9923, 0.9935, 0.9945, 0.9954, 0.9961, 0.9968, 0.9973, 0.9978, 0.9981, 0.9985, 0.9988, 0.999, 1);
  --dauer-pegel: 1075ms;
  --feder-pegel: linear(0, 0.0106, 0.0396, 0.0812, 0.1339, 0.1918, 0.2538, 0.3194, 0.3835, 0.4482, 0.509, 0.5684, 0.6228, 0.6734, 0.7211, 0.7634, 0.8025, 0.8366, 0.8668, 0.8941, 0.9172, 0.9376, 0.9545, 0.9688, 0.9811, 0.9909, 0.999, 1.0053, 1.0101, 1.0139, 1.0165, 1.0182, 1.0192, 1.0196, 1.0195, 1.0191, 1.0183, 1.0173, 1.0162, 1.015, 1.0138, 1.0125, 1.0112, 1.01, 1.0088, 1.0077, 1.0067, 1.0058, 1.0049, 1.0041, 1.0034, 1.0028, 1.0022, 1.0018, 1.0013, 1.001, 1);
  --dauer-fuellen: 1053ms;
  --feder-fuellen: linear(0, 0.0134, 0.0461, 0.0934, 0.1477, 0.2083, 0.2709, 0.3317, 0.3925, 0.4491, 0.5041, 0.5553, 0.6015, 0.645, 0.6836, 0.7197, 0.7522, 0.7806, 0.8068, 0.8302, 0.8504, 0.8689, 0.8849, 0.8994, 0.9121, 0.9231, 0.933, 0.9415, 0.9491, 0.9558, 0.9614, 0.9666, 0.9709, 0.9748, 0.9782, 0.981, 0.9836, 0.9858, 0.9877, 0.9894, 0.9908, 0.9921, 0.9931, 0.9941, 0.9949, 0.9956, 0.9962, 0.9967, 0.9972, 0.9976, 0.9979, 0.9982, 0.9984, 0.9987, 0.9988, 0.999, 1);
}
/* Entwurf «Fliessschema» – helles Anlagenschema. Federn (--dauer-*, --feder-*) erzeugt entwurf.py. */
@layer basis, welt, bausteine, hilfen;

@layer basis {
  :root {
    color-scheme: light;
    --papier: #ffffff;
    --zone: #f2f4f3;
    --tinte: #0f3a35;
    --tinte-weich: #3d5a56;
    --tinte-zart: #4d6864;
    --mint: #53c1aa;
    --mint-tief: #1c7360;
    --mint-hell: #dcf4ec;
    --rohr: #c3d9d3;
    --linie: #dde8e5;
    --leitung-grund: #e1e8e6;
    --linie-s: 2px;  /* eine Strichstärke für alle Linien, passend zu den Icons */
    --stau: #f2c230;
  }
  /* Phasenfarben: ein Verlauf von Blau (Strategie) zu Grün (Monitoring), gleiche Helligkeit und Sättigung (OKLCH 47 % / 0.09, Farbton 262 → 160) */
  .ph-strategie { --ph: #3e5a8d; --ph-hell: #e3efff; }
  .ph-dokumentation { --ph: #1a6286; --ph-hell: #dbf2ff; }
  .ph-analyse-optimierung { --ph: #006877; --ph-hell: #d7f5fa; }
  .ph-implementierung { --ph: #006b62; --ph-hell: #d8f6f2; }
  .ph-monitoring { --ph: #216a49; --ph-hell: #ddf6e7; }
  .ph-projektleitung, .ph-requirements-engineering, .ph-tim { --ph: #3d5a56; --ph-hell: #e4ebe9; }
  :root {

    --font: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    --font-schild: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
    --font-titel: var(--font);
    --gr-plakat: clamp(3.2rem, 1.2rem + 6.4vw, 7rem);
    --gr-titel: clamp(2.3rem, 1.4rem + 3.1vw, 4.4rem);
    --gr-zwischen: clamp(1.35rem, 1.2rem + .55vw, 1.75rem);
    --gr-lead: clamp(1.125rem, 1.02rem + .45vw, 1.375rem);

    /* Flächen eckig; kleine Bedienelemente (Knöpfe, Felder, Chips) mit knappem Radius; echte Kreise bleiben rund */
    --r: 0px;
    --r-l: 0px;
    --pille: 4px;
    --rand: clamp(1rem, .4rem + 3vw, 2.5rem);
    --breite: 1240px;
    --raum: clamp(5rem, 3rem + 7vw, 9rem);
    --kopf-hoehe: 76px;
    --strich: 1.5px;         /* eine Stärke für alle Konturen, Trenn- und Verbindungslinien */
    --rohr-breite: 5px;
    --punkt-abstand: 12px;
    --rohr-zahl: 5; --abstand-zahl: 12;   /* dieselben Werte ohne Einheit, für SVG-Grafiken mit eigener Skalierung */
    --linie-breite: 3px; --linie-zahl: 3; /* Seitenleitung und Einstiegskreis als durchgehende Linie */
    --leitung-x: 18px;
    --einzug: 76px;
  }
  @media (max-width: 720px) {
    :root { --kopf-hoehe: 64px; --rohr-breite: 4px; --punkt-abstand: 10px; --rohr-zahl: 4; --abstand-zahl: 10; --leitung-x: 4px; --einzug: 30px; }
  }

  *, *::before, *::after { box-sizing: border-box; }
  html {
    scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
    scrollbar-color: var(--rohr) transparent;
    -webkit-text-size-adjust: 100%;
  }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body {
    margin: 0;
    overflow-x: clip;
    background: var(--papier);
    color: var(--tinte-weich);
    font: 400 1.0625rem/1.6 var(--font);
    -webkit-font-smoothing: antialiased;
    caret-color: var(--mint-tief);
  }
  ::selection { background: var(--mint-hell); color: var(--tinte); }
  h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; }
  button { font: inherit; color: inherit; }
  :focus-visible { outline: 3px solid var(--mint-tief); outline-offset: 3px; border-radius: 0; }
  h1, h2, h3, .t-plakat, .t-titel, .t-zwischen { font-family: var(--font-titel, var(--font)); }
  h1, h2, h3 { color: var(--tinte); font-weight: 600; text-wrap: balance; }
}

@layer welt {
  .huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
  .mit-leitung { position: relative; padding-left: calc(var(--rand) + var(--einzug)); }
  .t-plakat, .t-titel, .t-zwischen { font-weight: 600; color: var(--tinte); }
  /* Schriftkontrast: grosse Titel leicht (300), Schlüsselwörter kräftig (<b>, 600) */
  .t-plakat { font-size: var(--gr-plakat); line-height: .94; letter-spacing: -.045em; font-weight: 300; }
  .t-titel { font-size: var(--gr-titel); line-height: 1.02; letter-spacing: -.035em; font-weight: 300; }
  :is(.t-plakat, .t-titel, .gs-titel) b { font-weight: 600; letter-spacing: -.03em; }
  .t-titel-klein { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); }
  .t-zwischen { font-size: var(--gr-zwischen); line-height: 1.15; letter-spacing: -.01em; }
  .t-lead { font-size: var(--gr-lead); line-height: 1.5; max-width: 46ch; text-wrap: pretty; }
  .nw { white-space: nowrap; }
  .ico { width: 1.2em; height: 1.2em; flex: none; stroke-width: 1.6; }
  /* MINT-Icons: feine Linie gleichmässig verstärkt, damit sie zu den Lucide-Strichen passen */
  .mint-ico { display: block; overflow: visible; }
  .mint-ico :is(path, rect) { stroke: currentColor; stroke-width: var(--ico-strich, 0); stroke-linejoin: round; }

  .schild {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .42rem .85rem; border-radius: var(--pille);
    background: var(--mint-hell); color: var(--tinte);
    font: 600 .875rem/1 var(--font-schild); letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .schild-hell { background: var(--papier); }

  .text-link {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 600; color: var(--mint-tief); text-decoration: none;
  }
  .text-link .ico { transition: translate var(--dauer-lebhaft) var(--feder-lebhaft); }
  .text-link:hover .ico, a:hover .text-link .ico { translate: 5px 0; }

  /* Seitenleitung: eine durchgehende Leitung durch alle Abschnitte */
  main { position: relative; }
  .leitung { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .leitung path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  /* Seitenleitung im Phasen-Verlauf: hellgrau = noch nicht erreicht; so weit gescrollt läuft die Farbe
     von Strategie-Blau (oben) zu Monitoring-Grün (unten). Verlauf spannt entwurf.js über die ganze Leitung. */
  .l-rohr, .l-puls { stroke-width: var(--linie-s); }
  .l-rohr { stroke: var(--leitung-grund); }
  .l-puls { stroke: url(#leitung-verlauf); }
  .l-fluss { display: none; }
  .l-maske { stroke: #fff; stroke-width: calc(var(--rohr-breite) + 4px); }
  @keyframes punkte-l { to { stroke-dashoffset: calc(-1 * var(--punkt-abstand)); } }
  .z-scrollt :is(.l-rohr, .l-puls, .r-punkte) { animation-play-state: paused; }
  .leitung { contain: strict; }
  .l-molch { display: none; fill: var(--tinte); stroke: none; opacity: 0; transition: opacity var(--dauer-blende) var(--feder-blende); }
  @keyframes puls { to { stroke-dashoffset: -36; } }
  .einstieg > .huelle, .abschnitt > .huelle { position: relative; z-index: 1; }

  .kopf-block { position: relative; max-width: 50rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
  .kopf-block .t-lead { margin-top: 1rem; }
  .kopf-mit-aktion { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }
  .hat-knoten { position: relative; }
  .knoten {
    position: absolute; top: calc(.52em - 7px);
    left: calc(var(--leitung-x) - var(--einzug) - 7px);
    width: 14px; height: 14px; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 var(--linie-s) var(--leitung-grund);
    transition: box-shadow var(--dauer-blende) var(--feder-blende), scale var(--dauer-lebhaft) var(--feder-lebhaft);
  }
  /* Ring in der Verlaufsfarbe an seiner Stelle (--kn-farbe setzt entwurf.js) */
  .knoten.z-erreicht { box-shadow: inset 0 0 0 var(--linie-s) var(--kn-farbe, #006877); scale: 1.3; }
  /* Anfang der Seitenleitung: links unter den Knöpfen im Einstieg, gerade nach unten (kreuzt nichts) */
  .leitung-anfang { position: relative; height: 14px; margin-top: clamp(2.5rem, 6vh, 4rem); }
  .knoten-start { top: 0; box-shadow: inset 0 0 0 var(--linie-s) #3e5a8d; scale: 1.3; }

  .abschnitt { padding-block: var(--raum); }
  .abschnitt:not(.zone, .auslass) + .abschnitt:not(.zone, .auslass) { padding-top: 0; }
  .zone { background: var(--zone); }
}

@layer bausteine {
  /* ---------- Knöpfe nach diffrent.digital (Allgemeines › Motion auf diffrent.digital):
     Bubble-Fill vom Eintrittspunkt (64-px-Blase, scale = (Diagonale + 12) / 32, 600 ms ease-out, Rückzug zur nächsten Kante),
     Hover 1.04 mit Knopf-Feder (548 ms), Klick 0.95 in 120 ms, Pfeil fliegt beim Klick hinaus. */
  :root {
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-press: cubic-bezier(0.4, 0, 0.2, 1);
    --feder-knopf: linear(0,0.0315,0.0682,0.1092,0.1538,0.2013,0.251,0.3022,0.3543,0.4069,0.4594,0.5114,0.5625,0.6124,0.6607,0.7072,0.7516,0.7939,0.8337,0.8712,0.906,0.9383,0.968,0.9951,1.0195,1.0414,1.0609,1.0779,1.0926,1.1051,1.1155,1.1239,1.1304,1.1352,1.1383,1.14,1.1403,1.1394,1.1374,1.1344,1.1306,1.126,1.1208,1.1151,1.109,1.1025,1.0958,1.0889,1.082,1.075,1.068,1.0612,1.0545,1.048,1.0417,1.0357,1.0299,1.0245,1.0193,1.0146,1.0101,1.006,1.0023,0.9989,0.9958,0.9931,0.9906,0.9886,0.9868,0.9853,0.984,0.9831,0.9823,0.9818,0.9815,0.9814,0.9814,0.9816,0.982,0.9824,0.983,0.9836,0.9844,0.9851,0.986,0.9869,0.9878,0.9887,0.9896,0.9905,1);
  }
  .knopf, .knopf-rund {
    --grund: transparent; --text: var(--tinte); --fuell: var(--tinte); --text-fuell: #fff;
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--grund); color: var(--text);
    transition: color 600ms var(--ease-out), scale 548ms var(--feder-knopf), letter-spacing 548ms var(--feder-knopf);
  }
  .knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    min-height: 50px; padding: .8rem 1.45rem; border: 0; border-radius: var(--pille);
    font: 600 1rem/1.1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
  }
  /* Solide Blase statt Verlauf – ein hochskalierter radial-gradient verschmiert die Kante */
  .knopf::before, .knopf-rund::before {
    /* inset/right/bottom/height und transform-origin ausdrücklich zurücksetzen: das alte Stylesheet setzt inset:0 und
       beim Hover transform-origin:0 50% – dann wuchs der Kreis immer vom linken Rand statt ab der Mausposition */
    content: ""; position: absolute; z-index: -1; inset: auto; left: var(--mx, 50%); top: var(--my, 50%); height: auto; transform-origin: 50% 50%;
    /* Blase direkt in Endgrösse (2 × (Diagonale + 12)) anlegen und von 0 auf 1 skalieren – ein kleines,
       stark hochskaliertes Element malt Chrome teils nur in Grundgrösse */
    width: var(--gr, 300%); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--fuell);
    transform: scale(0); transition: transform 600ms var(--ease-out); pointer-events: none;
  }
  .knopf.z-fuell::before, .knopf-rund.z-fuell::before, .knopf:focus-visible::before { transform: scale(1); }
  .knopf.z-fuell, .knopf-rund.z-fuell, .knopf:focus-visible { color: var(--text-fuell); scale: 1.04; }
  .knopf.z-fuell { letter-spacing: -.01em; }
  .knopf.z-druck, .knopf-rund.z-druck { scale: .95; transition: scale 120ms var(--ease-press), color 600ms var(--ease-out); }
  .knopf:focus-visible { outline-offset: 4px; border-radius: var(--pille); }
  .knopf .ico { flex: none; transition: translate 548ms var(--feder-knopf); }
  .knopf.z-fuell .ico:last-child:not(:first-child) { translate: -4px 0; }
  .knopf.z-los .ico:last-child:not(:first-child) { animation: pfeil-los 560ms var(--ease-press); }
  @keyframes pfeil-los { 0% { translate: -4px 0; } 55% { translate: 160px 0; opacity: 0; } 56% { translate: -24px 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .knopf, .knopf-rund { transition: color 1ms; }
    .knopf::before, .knopf-rund::before { transition-duration: 1ms; }
    .knopf.z-fuell, .knopf-rund.z-fuell, .knopf.z-druck, .knopf-rund.z-druck { scale: none; letter-spacing: normal; }
    .knopf.z-los .ico:last-child { animation: none; }
  }
  .knopf-tinte { --grund: var(--tinte); --text: #fff; --fuell: var(--mint-tief); --text-fuell: #fff; }
  .knopf-kontur { --grund: var(--zone); --fuell: var(--tinte); --text-fuell: #fff; }
  :is(.zone, .flaeche, .auslass) .knopf-kontur { --grund: var(--papier); }
  .knopf-gross { min-height: 58px; padding-inline: 1.8rem; font-size: 1.0625rem; }
  .knopfreihe { display: flex; flex-wrap: wrap; gap: .75rem; }

  .knopf-rund {
    position: relative;
    width: 50px; height: 50px; border-radius: 0; border: 0; cursor: pointer;
    display: grid; place-items: center; --grund: var(--zone);
    transition: color var(--dauer-blende) var(--feder-blende), scale var(--dauer-lebhaft) var(--feder-lebhaft);
  }
  .knopf-rund .ico { transition: translate 300ms var(--feder-lebhaft); }
  .knopf-rund:hover:not(:disabled) [d^="m15"] { translate: -2px 0; }
  .knopf-rund:hover:not(:disabled) [d^="m9"] { translate: 2px 0; }
  .knopf-rund:active:not(:disabled) { scale: .92; }
  .knopf-rund:disabled { opacity: .4; cursor: default; }
  .knopf-rund:focus-visible { border-radius: 0; }
  .knopf-rund .ico { width: 1.6rem; height: 1.6rem; }
  :is(.zone, .flaeche, .auslass) .knopf-rund, :is(.zone, .flaeche) .auto { background: var(--papier); }

  .auto {
    display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .5rem 1rem;
    border: 0; border-radius: var(--pille); background: var(--zone); cursor: pointer;
    font: 600 1rem/1 var(--font-schild); color: var(--tinte);
    transition: background var(--dauer-blende) var(--feder-blende);
  }
  .auto::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--rohr); transition: background var(--dauer-blende) var(--feder-blende); }
  .auto[data-an]::before { background: var(--mint); }
  .auto:hover { background: var(--mint); }
  .auto[data-an]::before { box-shadow: 0 0 0 3px color-mix(in oklch, var(--mint) 35%, transparent); }
  .auto:not([data-an]) .auto-aus, .auto[data-an] .auto-an { display: none; }

  /* ---------- Kopf */
  .sprung { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--tinte); color: #fff; border-radius: var(--r); }
  .sprung:focus { top: 1rem; }
  .kopf { position: sticky; top: 0; z-index: 50; background: var(--papier); box-shadow: 0 10px 28px -18px rgb(15 58 53 / 0); transition: box-shadow 300ms var(--ease-out); }
  .kopf.z-gerollt { box-shadow: 0 10px 28px -18px rgb(15 58 53 / .28); }
  .kopf-zeile { position: relative; display: flex; align-items: center; gap: 1.5rem; height: var(--kopf-hoehe); }
  .logo img { width: 114px; height: auto; }
  .nav { margin-inline: auto; }
  .nav-liste { display: flex; align-items: center; gap: .25rem; }
  .nav-menue { position: static; }
  .nav-link {
    display: inline-flex; align-items: center; gap: .3rem; padding: .7rem 1.05rem; border: 0; border-radius: var(--pille);
    background: transparent; font: 500 1.0625rem/1 var(--font); color: var(--tinte); text-decoration: none; cursor: pointer;
    position: relative; isolation: isolate;
  }
  /* Hover: Pille wächst aus der Mitte (Feder), keine Unterstreichung */
  .nav-link::after { content: none; }
  .nav-link::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--zone);
    opacity: 0; scale: .82; transition: opacity 180ms var(--ease-out), scale 548ms var(--feder-knopf); }
  .nav-link:hover::before, .nav-menue.z-offen > .nav-link::before, .nav-link:is([aria-current="page"], .z-aktuell)::before { opacity: 1; scale: 1; }
  .nav-link:active::before { scale: .94; transition-duration: 120ms; }
  .nav-link:is([aria-current="page"], .z-aktuell) { color: var(--tinte); font-weight: 600; }
  .nav-link .ico { width: 1em; height: 1em; transition: rotate var(--dauer-lebhaft) var(--feder-lebhaft); }
  .nav-menue.z-offen .nav-link .ico { rotate: 180deg; }
  /* Morph aus dem Auslöser (Allgemeines › Ursprungsbewusste Animation, Container Transform, Konto-Menü):
     Das Panel startet als Pille in Lage und Grösse des Knopfs und wächst zur Fläche; Rückweg zurück in den Knopf.
     Kontur innen, weil clip-path äussere Konturen abschneidet (Stolperfalle). Animation per entwurf.js (WAAPI). */
  /* Schatten sitzt auf der Hülle: clip-path am Panel würde ihn sonst abschneiden (Stolperfalle) */
  .nav-schale {
    position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; width: min(860px, calc(100% - 2 * var(--rand)));
    filter: drop-shadow(0 26px 30px rgb(15 58 53 / .13)) drop-shadow(0 3px 4px rgb(15 58 53 / .05)); pointer-events: none;
  }
  /* Brücke über den Abstand, damit der Hover beim Wechsel vom Knopf ins Panel nicht abreisst */
  .nav-menue.z-offen .nav-schale::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; pointer-events: auto; }
  .nav-panel { padding: .75rem; border-radius: var(--r-l); background: var(--papier); visibility: hidden; pointer-events: auto; }
  .nav-menue.z-offen .nav-panel, .nav-panel.z-schliesst { visibility: visible; }
  .nav-menue.z-offen :is(.nav-raster li, .nav-titel), .nav-menue.z-offen .nav-panel > .text-link { animation: menue-eintrag 520ms cubic-bezier(0.32, 0.72, 0, 1) both; animation-delay: calc(140ms + var(--i, 6) * 30ms); }
  @keyframes menue-eintrag { from { opacity: 0; translate: 0 8px; } }
  @media (prefers-reduced-motion: reduce) { .nav-menue.z-offen :is(.nav-raster li, .nav-titel), .nav-menue.z-offen .nav-panel > .text-link { animation: none; } }
  /* Zwei Ebenen: links die Phasen als Abfolge (Nummer + Verbindungslinie), rechts abgesetzt die begleitenden Leistungen */
  .nav-gruppen { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: .75rem; }
  .nav-gruppe { padding: .5rem .25rem; }
  .nav-begleitend { align-self: stretch; padding: .5rem .5rem; border-radius: calc(var(--r-l) - .75rem); background: var(--zone); }
  .nav-titel { margin: .35rem .7rem .6rem; font: 600 .8125rem/1.2 var(--font-schild); letter-spacing: .04em; text-transform: uppercase; color: var(--tinte-zart); --i: -1; }
  .nav-begleitend .nav-titel { --i: 4; }
  .nav-raster { display: grid; gap: .15rem; }
  .nav-strecke li { position: relative; }
  .nav-strecke li:not(:last-child)::after { content: ""; position: absolute; left: calc(.7rem + 24px - var(--strich) / 2); top: calc(50% + 30px); height: calc(100% - 60px + .15rem); width: var(--strich); background: var(--rohr); pointer-events: none; }
  .nav-nr { position: absolute; right: -5px; top: -5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ph); color: #fff; font: 700 .6875rem/1 var(--font-schild); box-shadow: 0 0 0 2px var(--papier); }
  .nav-raster .mini-station { position: relative; }
  .nav-begleitend .nav-raster a::before { background: var(--papier); }
  .nav-begleitend .nav-raster a .mini-station { background: var(--papier); }
  .nav-begleitend .mini-station { color: var(--tinte-weich); }
  .nav-raster a { display: flex; align-items: center; gap: .85rem; padding: .7rem; border-radius: var(--r); text-decoration: none; transition: background var(--dauer-blende) var(--feder-blende); }
  /* Hover wächst aus dem farbigen Icon-Kreis heraus (Kreis in Endgrösse angelegt, in Ruhe auf 48 px skaliert).
     Füllung wächst ab Mausposition (--mx/--my, --gr setzt entwurf.js beim Eintritt) */
  .nav-raster a { position: relative; isolation: isolate; overflow: hidden; }
  .nav-raster a::before {
    content: ""; position: absolute; z-index: -1; left: var(--mx, calc(.7rem + 24px)); top: var(--my, 50%); width: var(--gr, 720px); aspect-ratio: 1; border-radius: 50%;
    background: var(--ph-hell, var(--zone)); translate: -50% -50%; transform: scale(0); transition: transform 640ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .nav-raster a:is(:hover, :focus-visible)::before { transform: scale(1); }
  .nav-raster a .mini-station { background: var(--ph-hell, var(--zone)); }
  .nav-raster a b { transition: color 300ms ease-out; }
  .nav-raster a:is(:hover, :focus-visible) b { color: var(--ph, var(--tinte)); }
  @media (prefers-reduced-motion: reduce) { .nav-raster a::before { transition-duration: 1ms; } }
  .nav-raster b { display: block; color: var(--tinte); font-weight: 600; }
  .nav-raster small { display: block; font-size: .875rem; color: var(--tinte-zart); line-height: 1.35; }
  .nav-panel > .text-link { margin: .75rem .7rem .25rem; }
  .mini-station { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ph-hell, var(--mint-hell)); color: var(--ph, var(--mint-tief)); }
  .mini-station svg { width: 28px; height: 28px; }

  .burger { display: none; width: 48px; height: 48px; margin-left: auto; border: 0; border-radius: 0; background: var(--zone); cursor: pointer; place-content: center; gap: 6px; }
  .burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--tinte); transition: translate var(--dauer-lebhaft) var(--feder-lebhaft), rotate var(--dauer-lebhaft) var(--feder-lebhaft); }
  .burger[aria-expanded="true"] span:first-child { translate: 0 4px; rotate: 45deg; }
  .burger[aria-expanded="true"] span:last-child { translate: 0 -4px; rotate: -45deg; }
  .mobil { display: none; }
  @media (max-width: 980px) {
    .nav, .kopf-cta { display: none; }
    .burger { display: grid; }
    .mobil { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dauer-standard) var(--feder-standard); }
    .js .mobil:not(.z-offen) { grid-template-rows: 0fr; }
    .mobil-innen { overflow: hidden; }
    .mobil nav { padding-block: .5rem 1.5rem; }
    .mobil li a { display: block; padding: .8rem 0; font-size: 1.375rem; font-weight: 600; color: var(--tinte); text-decoration: none; border-bottom: var(--strich) solid var(--linie); }
    .mobil .knopf { margin-top: 1.25rem; width: 100%; }
  }

  /* ---------- Einstieg mit Ringleitung */
  .einstieg { padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem) clamp(4rem, 2rem + 6vw, 7rem); }
  .einstieg-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
  .einstieg-text .t-lead { margin-top: 1.6rem; }
  .einstieg-text .t-plakat { max-width: 11ch; }
  .einstieg-text .t-lead { max-width: 40ch; }
  .einstieg-text .knopfreihe { margin-top: 2.25rem; }
  /* Positionierung über dem Titel und Beweisleiste darunter */
  .einstieg-dach { margin-bottom: 1.3rem; font: 600 .9375rem/1.2 var(--font-schild); letter-spacing: .07em; text-transform: uppercase; color: var(--mint-tief); }
  .beweis { margin-top: clamp(2.2rem, 5vh, 3.4rem); max-width: 34rem; }
  .beweis-titel { margin-bottom: .9rem; font: 600 .8125rem/1 var(--font-schild); letter-spacing: .07em; text-transform: uppercase; color: var(--tinte-zart); }
  .beweis-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.9rem; }
  .beweis-logos img { filter: grayscale(1); opacity: .72; mix-blend-mode: multiply; transition: filter 400ms var(--ease-out), opacity 400ms var(--ease-out); }
  .beweis-logos li:hover img { filter: none; opacity: 1; }
  /* Kreis stark angeschnitten: Rahmen 1.5 × Einstiegshöhe, Mittelpunkt am rechten Rand.
     Sichtbar bleibt der linke Bogen mit den Stationen; oben, unten und rechts läuft der Kreis aus dem Bild. */
  .einstieg { --eh: clamp(560px, calc(100svh - var(--kopf-hoehe)), 820px); position: relative; overflow: clip; }
  /* nur der Einstieg der Startseite (mit Kreis) füllt den Bildschirm; Unterseiten bleiben kompakt */
  .einstieg:has(> .ring-rahmen) { min-height: var(--eh); display: grid; align-items: center; }
  /* Desktop: Mittelpunkt oben rechts in der Ecke, sichtbar ist das untere linke Viertel.
     Radius r = 0.45 × Rahmenbreite (Kreis r=450 in viewBox 1000). */
  .ring-rahmen {
    --r: min(calc(var(--eh) * .62), 40vw); --rw: calc(var(--r) / .45);
    position: absolute; z-index: 0; top: calc(var(--eh) * .11 - var(--rw) / 2); left: calc(97vw - var(--rw) / 2); width: var(--rw); aspect-ratio: 1;
  }
  .ring { display: block; width: 100%; height: 100%; overflow: visible; }
  .leitung-start { position: absolute; width: 0; height: 0; }
  @media (max-width: 900px) {
    .einstieg-raster { grid-template-columns: 1fr; }
    .einstieg:has(> .ring-rahmen) { min-height: 0; display: block; padding-bottom: 0; }
    .ring-rahmen { --rw: 170vw; position: relative; top: auto; left: auto; translate: none; margin: calc(var(--rw) * -.05) 0 calc(var(--rw) * -.08) calc(60vw - var(--rw) * .05); }
  }
  /* Gepunktete Leitung: Punkte fliessen im Uhrzeigersinn */
  .ring path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .ring .st-ico :is(path, rect) { fill: currentColor; }
  /* Gleiche Punkte wie die Seitenleitung: Skalierung der Grafik (--k, setzt entwurf.js) herausrechnen */
  /* Kreis als farbige Scheibe: der Anschnitt am Rand wirkt so als Fläche, die aus dem Bild läuft */
  .r-flaeche { fill: url(#r-flaeche-verlauf); }
  .r-punkte { stroke: #fff; stroke-width: calc(4 / var(--k, 1)); opacity: .7; }
  .ring.z-laeuft .r-punkte { animation-play-state: running; }
  @keyframes punkte { to { stroke-dashoffset: calc(var(--abstand-zahl) / var(--k, 1) * -1); } }
  .ring-mitte { font: 700 46px/1 var(--font); fill: var(--tinte); text-anchor: middle; letter-spacing: -.025em; }

  /* Der Kreis im Einstieg ist rein illustrativ: keine Klicks. entwurf.js dreht stetig und setzt je Station
     Winkel (--w), Grösse (--s) und Deckkraft (--o); die Station bleibt durch die Gegendrehung aufrecht. */
  .st {
    pointer-events: none; transform-box: view-box; transform-origin: 0 0; opacity: var(--o, 1);
    transform: translate(500px, 500px) rotate(var(--w)) translate(450px, 0) rotate(calc(-1 * var(--w)));
  }
  /* --e: 0 beim Eintritt oben / Austritt unten, 1 im sichtbaren Bogen – Station wächst aus der Unschärfe, Icon dreht sich ein */
  .st-innen { transform-box: fill-box; transform-origin: center; scale: calc(var(--s, 1) * (.8 + .2 * var(--e, 1))); }
  .st-ico-dreh { opacity: calc(var(--e, 1) * var(--e, 1)); }
  .st-koerper { fill: var(--ph, var(--mint)); }
  .st-ico { color: #fff; }
  /* Titel rechts der Station, im Innern der Scheibe (--lx/--ly/--le setzt entwurf.js) */
  .st-name { font: 700 28px/1 var(--font-schild); fill: var(--tinte); text-anchor: start; translate: var(--lx, 90px) var(--ly, 0px); transition: fill 500ms var(--ease-out); }  /* Ein-/Ausblenden per Schreibmaschine (entwurf.js) */
  .st-phase { font-size: 17px; font-weight: 600; fill: var(--tinte-zart); letter-spacing: .02em; }
  .st.z-vorne .st-name { fill: var(--ph); }
  @media (max-width: 900px) { .st-name { font-size: 30px; text-anchor: end; } .st-phase { font-size: 20px; } }

  @media (prefers-reduced-motion: no-preference) {
    .st-innen { animation: auftauchen 800ms var(--ease-out) backwards; animation-delay: calc(200ms + var(--i) * 120ms); }
    .st-name { animation: auftauchen 800ms var(--ease-out) backwards; animation-delay: calc(450ms + var(--i) * 120ms); }
  }
  @keyframes einfaerben { from { stroke: var(--rohr); } }
  @keyframes setzen { from { opacity: 0; scale: .6; } }
  @keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
  @keyframes auftauchen { from { opacity: 0; } }
  @keyframes weg { from { opacity: 1; } to { opacity: 0; } }

  /* ---------- Lebenszyklus: Schritt-Leiste mit Zunge */
  .lz { --lz-grund: var(--papier); }
  .zone .lz, .flaeche .lz { --lz-grund: var(--zone); }
  .lz-leiste { --lz-oben: 5.4rem; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: var(--lz-oben); }
  .lz-linie { position: absolute; left: 10%; right: 10%; top: calc(var(--lz-oben) + 36px - var(--linie-s) / 2); height: var(--linie-s); border-radius: 0; background: var(--leitung-grund); }
  .lz-linie span { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #3e5a8d, #1a6286, #006877, #006b62, #216a49);
    clip-path: inset(0 calc((1 - var(--aktiv) / 4) * 100%) 0 0); transition: clip-path 650ms var(--feder-standard); }
  /* Rückfluss: kräftige Klammer im Verlauf Monitoring-Grün → Strategie-Blau, Pfeilspitze in die Strategie */
  .lz-rueck { position: absolute; left: 10%; right: 10%; top: 1.6rem; height: calc(var(--lz-oben) - 1.6rem - 40px);
    border: var(--linie-s) solid transparent; border-bottom: 0; border-radius: 0;
    background: linear-gradient(var(--lz-grund), var(--lz-grund)) padding-box, linear-gradient(90deg, #3e5a8d, #1a6286, #006877, #006b62, #216a49) border-box; }
  .lz-rueck::after { content: ""; position: absolute; left: calc(var(--linie-s) / -2 - 6px); bottom: -9px; width: 12px; height: 9px; background: #3e5a8d; clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .lz-rueck-text { position: absolute; left: 50%; top: calc(1.6rem + var(--linie-s) / 2); translate: -50% -50%; display: inline-flex; align-items: center; gap: .5rem;
    padding: .3rem 1rem; background: var(--lz-grund); font: 700 1.0625rem/1 var(--font-schild); color: var(--tinte); white-space: nowrap; }
  .lz-rueck-text .ico { width: 1.15em; height: 1.15em; color: #006877; }
  .lz-schritt { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 1.6rem; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--tinte); text-decoration: none; outline: none; }
  .lz-kr { position: relative; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--ph); color: #fff; box-shadow: 0 0 0 6px var(--lz-grund);
    transition: background 300ms ease-out, color 300ms ease-out, scale 450ms var(--feder-lebhaft); }
  .lz-kr svg { width: 38px; height: 38px; }
  .lz-kr b { position: absolute; right: -4px; top: -4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--papier); color: var(--ph); font: 700 .875rem/1 var(--font-schild); box-shadow: 0 0 0 3px var(--lz-grund); }
  .lz-name { font: 700 1.25rem/1.15 var(--font-schild); text-align: center; max-width: 13ch; color: var(--tinte); transition: color 200ms ease-out; }
  /* Klickbar erkennbar: Kreis federt beim Überfahren, Name färbt sich in der Phasenfarbe */
  .lz-schritt:hover .lz-kr { scale: 1.1; }
  .lz-schritt:hover .lz-name { color: var(--ph); }
  .lz-hinweis-zeile { margin-bottom: -.4rem; }
  .lz-hinweis { display: inline-flex; align-items: center; gap: .5rem; font: 700 1.125rem/1 var(--font-schild); color: var(--tinte); }
  .lz-hinweis .ico { rotate: 90deg; width: 1em; height: 1em; }
  @media (max-width: 760px) { .lz-hinweis-zeile { display: none; } }
  .lz-schritt:is([aria-selected="true"], [aria-current="page"]) .lz-kr { scale: 1.2; box-shadow: 0 0 0 4px var(--lz-grund); outline: calc(var(--linie-s) / 1.2) solid var(--ph); outline-offset: 4px; }
  .lz-schritt:is([aria-selected="true"], [aria-current="page"]) .lz-kr b { background: var(--tinte); color: #fff; }
  .lz-schritt:is([aria-selected="true"], [aria-current="page"]) .lz-name { color: var(--ph); }
  .lz-schritt:focus-visible .lz-kr { outline: 3px solid var(--mint-tief); outline-offset: 5px; }
  .lz-buehne { position: relative; margin-top: 1.6rem; }
  .lz-zunge { position: absolute; top: -10px; left: calc(10% + var(--aktiv) * 20%); width: 22px; height: 22px; margin-left: -11px; rotate: 45deg; border-radius: 0;
    background: var(--papier); transition: left 600ms var(--feder-standard), background 300ms ease-out; }
  /* Nur das aktive Feld bestimmt die Höhe; die übrigen liegen absolut darüber (Höhenwechsel animiert entwurf.js) */
  .lz-felder { position: relative; overflow: clip; display: grid; border-radius: var(--r-l); background: var(--papier); transition: background 300ms ease-out; }
  /* Karte weiss auf der Phasen-Farbfläche; die Fläche trägt die Farbe der gewählten Phase */
  .lz-feld:not(.z-aktiv) { position: absolute; inset: 0 0 auto 0; }
  .lz-feld { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-rows: auto auto auto 1fr; gap: .2rem 3rem; padding: 2.2rem 2.6rem;
    opacity: 0; visibility: hidden; transition: opacity 200ms ease-out, visibility 0s linear 200ms; }
  .lz-feld.z-aktiv { opacity: 1; visibility: visible; transition: opacity 350ms ease-out 120ms; }
  /* Desktop: Klappe und Schalter lösen sich auf, Titel wirkt als normaler Titel */
  .lz-klappe, .lz-klappe-innen { display: contents; }
  .lz-auf { all: unset; }
  .lz-auf .lz-kr, .lz-auf > .ico { display: none; }
  .lz-titel { grid-column: 1; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); letter-spacing: -.02em; line-height: 1.05; color: var(--ph); margin-bottom: .8rem; }
  .lz-lead { grid-column: 1; font-size: 1.0625rem; max-width: 48ch; }
  .lz-punkte { grid-column: 2; grid-row: 1 / 5; display: grid; gap: .45rem; align-content: start; }
  .lz-punkte li { display: flex; gap: .6rem; align-items: flex-start; color: var(--tinte); }
  .lz-punkte .ico { margin-top: .2em; color: var(--ph); }
  .lz-fuss { grid-column: 1; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; margin-top: 1.8rem; }
  .lz-ref { display: flex; gap: 1rem; align-items: center; padding: .5rem 1.2rem .5rem .5rem; border-radius: calc(var(--r-l) - .4rem); background: var(--ph-hell-aktiv, var(--zone));
    text-decoration: none; color: var(--tinte); font: 600 1.125rem/1.25 var(--font-schild); max-width: 440px; transition: background var(--dauer-blende) var(--feder-blende); }
  .lz-ref:hover { background: #fff; }
  .lz-ref img { width: 120px; height: 84px; object-fit: cover; border-radius: calc(var(--r-l) - .9rem); flex: none; transition: scale 450ms var(--feder-lebhaft); }
  .lz-ref:hover img { scale: 1.04; }
  .lz-ref small { display: block; font: 600 .875rem/1.2 var(--font-schild); color: var(--ph); margin-bottom: .3rem; }
  /* Begleitende Leistungen: gleiche Schritte wie die Phasen, eigene Linie, Zunge zeigt von unten auf die Auswahl */
  .lz-beg-reihe { display: grid; justify-items: center; gap: 1.2rem; margin-top: 3.2rem; }
  .lz-beg-titel { font: 600 .9375rem/1 var(--font-schild); color: var(--tinte-zart); }
  .lz-beg-liste { position: relative; display: flex; justify-content: center; gap: clamp(1.5rem, 5vw, 4.5rem); }
  .lz-beg { width: 11rem; }
  .lz-beg-linie { position: absolute; left: 5.5rem; right: 5.5rem; top: calc(36px - var(--linie-s) / 2); height: var(--linie-s); background: var(--leitung-grund); }
  .lz-beg > .ico { display: none; }
  .lz-beg .lz-kr, .lz-beg[aria-selected="true"] .lz-kr { box-shadow: none; }
  .lz-zunge-unten { top: auto; bottom: -10px; left: var(--zunge-x, 50%); opacity: 0; }
  .lz[data-beg] .lz-zunge { opacity: 0; }
  .lz[data-beg] .lz-zunge-unten { opacity: 1; }
  .lz-zunge { transition: left 600ms var(--feder-standard), background 300ms ease-out, opacity 200ms ease-out; }
  .lz-nav { margin-top: 1rem; }
  @media (prefers-reduced-motion: reduce) { .lz * { transition-duration: 1ms !important; } }

  /* Handy: alle Phasen als Kästchen untereinander, ausgeklappt */
  @media (max-width: 760px) {
    .lz[data-lz] .lz-leiste, .lz-zunge, .lz-feld-beg { display: none; }
    /* Begleitende am Handy: Kästchen wie die Phasenköpfe, direkt verlinkt */
    .lz-beg-reihe { justify-items: stretch; gap: .8rem; margin-top: 1.6rem; }
    .lz-beg-titel { justify-self: start; }
    .lz-beg-liste { flex-direction: column; gap: .9rem; }
    .lz-beg-linie { display: none; }
    .lz-beg { width: auto; display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem .85rem .85rem; border-radius: var(--r-l); background: var(--ph-hell); }
    .lz-beg .lz-kr { width: 52px; height: 52px; box-shadow: none; }
    .lz-beg .lz-kr svg { width: 28px; height: 28px; }
    .lz-beg .lz-name { flex: 1; max-width: none; text-align: left; font-size: 1.3rem; }
    .lz-beg > .ico { display: block; flex: none; width: 1.3rem; height: 1.3rem; color: var(--ph); }
    .lz-schritt.lz-beg:hover .lz-kr { scale: none; }
    .lz-buehne { margin-top: 0; }
    .lz-felder { gap: .9rem; background: none; }
    .lz-feld, .lz-feld:not(.z-aktiv) { position: static; }
    .lz-felder { overflow: visible; }
    .lz-feld { grid-area: auto; grid-template-columns: 1fr; grid-template-rows: none; opacity: 1; visibility: visible; padding: 1.4rem 1.3rem 1.5rem; border-radius: var(--r-l); background: var(--ph-hell); }
    /* Handy: jede Phase als Kästchen zum Aufklappen (Kopf mit Icon, Nummer, Titel) */
    .lz-feld { padding: 0; }
    .lz-titel { margin: 0; font-size: 1.3rem; }
    .lz-auf { all: revert; display: flex; align-items: center; gap: .9rem; width: 100%; box-sizing: border-box; padding: .85rem 1.1rem .85rem .85rem; border: 0; border-radius: var(--r-l);
      background: none; font: inherit; color: var(--tinte); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .lz-auf:focus-visible { outline: 3px solid var(--mint-tief); outline-offset: -3px; }
    .lz-auf-text { flex: 1; }
    .lz-auf .lz-kr { display: grid; flex: none; width: 52px; height: 52px; box-shadow: none; background: var(--ph); color: #fff; }
    .lz-auf .lz-kr svg { width: 28px; height: 28px; }
    .lz-auf .lz-kr b { width: 22px; height: 22px; font-size: .75rem; background: var(--tinte); color: #fff; box-shadow: 0 0 0 3px var(--ph-hell); }
    .lz-auf > .ico { display: block; flex: none; width: 1.3rem; height: 1.3rem; color: var(--ph); transition: rotate 450ms var(--feder-lebhaft); }
    .lz-auf[aria-expanded="true"] > .ico { rotate: 180deg; }
    .lz-klappe { display: block; }
    .js .lz-klappe { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 520ms cubic-bezier(0.33, 1, 0.68, 1); }
    .js .lz-klappe.z-auf { grid-template-rows: 1fr; }
    .lz-klappe-innen { display: block; min-height: 0; overflow: hidden; padding-inline: 1.3rem; }
    .lz-klappe-innen > :first-child { margin-top: .2rem; }
    .lz-klappe-innen > :last-child { margin-bottom: 1.5rem; }
    .lz-ref { max-width: 100%; box-sizing: border-box; font-size: 1rem; gap: .8rem; }
    .lz-fuss .knopf { max-width: 100%; white-space: normal; text-align: left; }
    .lz-ref img { width: 88px; height: 64px; }
    .lz-punkte { grid-column: 1; grid-row: auto; margin-top: 1rem; }
    .lz-fuss { grid-column: 1; }
    .lz-nav .lz-name { font-size: .8125rem; hyphens: auto; }
    .lz-nav .lz-kr { width: 46px; height: 46px; } .lz-nav .lz-kr svg { width: 24px; height: 24px; }
    .lz-nav .lz-linie { top: calc(var(--lz-oben) + 23px - var(--linie-s) / 2); }
    .lz-nav .lz-rueck-text { font-size: .75rem; padding: .2rem .6rem; }
    .lz-nav .lz-rueck-text .ico { display: none; }
  }

  /* ---------- Staustellen */
  .stau {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 22vw, 300px) minmax(0, 1.1fr); align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem); padding-block: clamp(1.5rem, 3vw, 2.25rem); border-top: var(--strich) solid var(--linie);
  }
  .stau:last-child { border-bottom: var(--strich) solid var(--linie); }
  .stau-problem { font: 600 var(--gr-zwischen)/1.2 var(--font); color: var(--tinte); letter-spacing: -.01em; text-wrap: balance; }
  .stau-rohr { position: relative; height: 72px; display: grid; place-items: center; }
  .stau-rohr::before, .stau-fluss { content: ""; position: absolute; inset-inline: 0; top: 50%; height: var(--rohr-breite); translate: 0 -50%; }
  .stau-rohr::before { --punktfarbe: var(--rohr); }
  .stau-fluss { --punktfarbe: var(--mint); clip-path: inset(0 0 0 0); transition: clip-path var(--dauer-traege) var(--feder-traege); }
  .js .stau:not(.z-offen) .stau-fluss { clip-path: inset(0 50% 0 0); }
  /* Staustelle als Schild auf der Leitung: gelb «Stau» → mint «gelöst» */
  .ventil {
    position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 6.75rem; height: 44px;
    padding: 0 1.1rem; border: 0; border-radius: var(--pille); cursor: pointer;
    background: var(--mint); color: var(--tinte); font: 600 1.0625rem/1 var(--font-schild);
    box-shadow: 0 0 0 5px var(--papier);
    transition: scale var(--dauer-lebhaft) var(--feder-lebhaft), background var(--dauer-standard) var(--feder-standard);
  }
  .ventil > span { display: inline-flex; align-items: center; gap: .45rem; }
  .ventil .ico { width: 1.15em; height: 1.15em; stroke-width: 2; }
  .ventil .v-zu { display: none; }
  .js .stau:not(.z-offen) .ventil { background: var(--leitung-grund); color: var(--tinte-weich, var(--tinte)); }   /* Stau neutral grau statt gelb */
  .js .stau:not(.z-offen) .ventil .v-zu { display: inline-flex; }
  .js .stau:not(.z-offen) .ventil .v-offen { display: none; }
  .stau.z-offen .v-offen .ico { animation: setzen var(--dauer-lebhaft) var(--feder-lebhaft); }
  .ventil:hover { scale: 1.05; }
  .ventil:active { scale: .96; }
  .ventil:focus-visible { border-radius: var(--pille); outline-offset: 7px; }
  .ventil::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--stau); opacity: 0; pointer-events: none; }
  @media (prefers-reduced-motion: no-preference) {
    /* ruhiger: kein Dauerpuls an den Ventilen */
  }
  @keyframes melden { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.25 1.6; } }
  .stau-loesung { transition: opacity var(--dauer-standard) var(--feder-standard), filter var(--dauer-standard) var(--feder-standard), translate var(--dauer-standard) var(--feder-standard); }
  .js .stau:not(.z-offen) .stau-loesung { opacity: .3; filter: blur(3px); translate: -14px 0; }
  .stau-loesung > p:first-child { color: var(--tinte-weich); font-size: 1.0625rem; max-width: 44ch; }
  .stau-beleg { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .8rem; }
  .stau-beleg a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--mint-tief); }
  .stau-beleg a .ico { width: 1em; height: 1em; transition: translate var(--dauer-lebhaft) var(--feder-lebhaft); }
  .stau-beleg a:hover .ico { translate: 4px 0; }
  @media (max-width: 760px) {
    .stau { grid-template-columns: 1fr; gap: .75rem; }
    .stau-rohr { height: 64px; }
    .js .stau:not(.z-offen) .stau-loesung { translate: 0 -8px; }
  }

  /* ---------- Referenzen als Doppelseiten */
  .karussell-spur {
    display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: 1.25rem;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    border-radius: var(--r-l); outline-offset: 4px;
  }
  .karussell-spur::-webkit-scrollbar { display: none; }
  .doppelseite {
    position: relative; scroll-snap-align: start; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 440px;
    border-radius: var(--r-l); background: var(--zone);
  }
  .ds-bild { overflow: hidden; }
  .ds-bild img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dauer-traege) var(--feder-traege); }
  .doppelseite:hover .ds-bild img { scale: 1.045; }
  .ds-text { display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.5rem, 1rem + 2.2vw, 2.75rem); }
  .ds-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .ds-logo { height: 44px; width: auto; max-width: 150px; object-fit: contain; mix-blend-mode: multiply; }
  .ds-text h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); line-height: 1.15; letter-spacing: -.015em; }
  .ds-text h3 a { text-decoration: none; }
  .ds-text h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-l); }
  .ds-text h3 a:focus-visible { outline: none; }
  .ds-text h3 a:focus-visible::after { outline: 3px solid var(--mint-tief); outline-offset: -3px; }
  .ds-text blockquote p { color: var(--tinte); font-size: 1.125rem; line-height: 1.5; font-weight: 500; }
  .ds-text blockquote footer { margin-top: .5rem; font: 500 .9375rem/1.3 var(--font-schild); color: var(--tinte-zart); }
  .sinngemaess { white-space: nowrap; }
  .ds-mehrwert { color: var(--tinte-weich); }
  .ds-text .text-link { margin-top: auto; }
  .doppelseite:hover .text-link .ico { translate: 5px 0; }
  .karussell-steuerung { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }
  .karussell-punkte { flex: 1; display: flex; justify-content: center; gap: 0; }
  .karussell-punkte button { width: 18px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
  .karussell-punkte button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rohr); transition: background var(--dauer-blende) var(--feder-blende), scale var(--dauer-lebhaft) var(--feder-lebhaft); }
  .karussell-punkte button:hover::before { background: var(--tinte-zart); }
  .karussell-punkte button[aria-current="true"]::before { background: var(--tinte); scale: 1.35; }
  @media (max-width: 760px) {
    .karussell-spur { grid-auto-columns: 92%; }
    .doppelseite { grid-template-columns: 1fr; min-height: 0; }
    .ds-bild img { aspect-ratio: 16 / 10; }
  }

  /* ---------- Wissen als Behälter */
  .tanks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .tank {
    display: flex; flex-direction: column; gap: .6rem; height: 100%; padding: .75rem .75rem 1.5rem;
    border-radius: var(--r-l); background: var(--zone);
    color: var(--tinte-weich); text-decoration: none;
    transition: box-shadow var(--dauer-blende) var(--feder-blende);
  }
  .tank { transition: translate var(--dauer-lebhaft) var(--feder-lebhaft), background var(--dauer-blende) var(--feder-blende); }
  .tank:hover, .tank:focus-visible { translate: 0 -6px; }
  :is(.zone, .flaeche) .tank { background: var(--papier); }
  .tank:focus-visible { outline-offset: 4px; border-radius: var(--r-l); }
  .tank-bild { display: grid; place-items: center; height: 150px; margin-bottom: .6rem; border-radius: calc(var(--r-l) - .75rem); background: var(--papier); overflow: hidden; }
  :is(.zone, .flaeche) .tank-bild { background: var(--zone); }
  .tank b, .tank-text, .tank .text-link { margin-inline: .9rem; }
  .tank b { font-size: 1.625rem; font-weight: 600; letter-spacing: -.015em; color: var(--tinte); line-height: 1.1; }
  .tank-text { max-width: 34ch; }
  .tank .text-link { margin-top: auto; padding-top: .6rem; }
  .tank:hover .text-link .ico { translate: 5px 0; }
  .w { width: min(290px, 90%); height: auto; overflow: visible; }
  .w path { fill: none; stroke-linecap: round; }

  /* Leitfaden: Stationen in den Phasenfarben; der Verlauf fliesst durch und füllt Station um Station */
  .w-rohr { stroke: var(--leitung-grund); stroke-width: 6; }
  .w-fluss { stroke: url(#w-verlauf-s); stroke-width: 6; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1100ms cubic-bezier(0.45, 0, 0.3, 1); }
  .w-st circle { fill: var(--ph-hell); transform-box: fill-box; transform-origin: center;
    transition: fill 350ms var(--ease-out), scale 600ms var(--feder-lebhaft); transition-delay: calc(var(--i) * 190ms); }
  .w-st text { font: 700 16px/1 var(--font-schild); fill: var(--ph); text-anchor: middle; transition: fill 350ms var(--ease-out); transition-delay: calc(var(--i) * 190ms); }
  #wissen:has(.knoten.z-erreicht) .w-st:first-of-type circle { fill: var(--ph); }
  #wissen:has(.knoten.z-erreicht) .w-st:first-of-type text { fill: #fff; }
  :is(#wissen, *) :is(.tank:hover, .tank:focus-visible) .w-fluss { stroke-dashoffset: 0; }
  :is(#wissen, *) :is(.tank:hover, .tank:focus-visible) .w-st circle { fill: var(--ph); scale: 1.12; }
  :is(#wissen, *) :is(.tank:hover, .tank:focus-visible) .w-st text { fill: #fff; }

  /* Reifegrad-Check: ein Bogen, der Verlauf füllt sich synchron zur Nadel (−90° … 90° ≙ 0 … 100 %) */
  .w-skala { stroke: var(--leitung-grund); stroke-width: 18; stroke-linecap: round; }
  .w-wert { stroke: url(#w-verlauf-t); stroke-width: 18; stroke-linecap: round; stroke-dasharray: 100 200; stroke-dashoffset: 94.5;
    transition: stroke-dashoffset var(--dauer-pegel) var(--feder-pegel); }
  .w-nadel { transform-box: view-box; transform-origin: 120px 112px; rotate: -80deg; transition: rotate var(--dauer-pegel) var(--feder-pegel); }
  .w-nadel line { stroke: var(--tinte); stroke-width: 5; stroke-linecap: round; }
  .w-nadel circle { fill: var(--tinte); }
  .w-nadel .w-nabe { fill: #fff; }
  #wissen:has(.knoten.z-erreicht) .w-nadel { rotate: -36deg; }
  #wissen:has(.knoten.z-erreicht) .w-wert { stroke-dashoffset: 70; }
  /* :is(#wissen, *) hebt die Spezifität über die Scroll-Regel mit #wissen:has(…), sonst bleibt die Nadel beim Hover stehen */
  :is(#wissen, *) :is(.tank:hover, .tank:focus-visible) .w-nadel { rotate: 45deg; }
  :is(#wissen, *) :is(.tank:hover, .tank:focus-visible) .w-wert { stroke-dashoffset: 25; }

  /* Glossar: Begriffsrad blättert */
  .w-liste {
    --zeile: 2.4rem; position: relative; display: block; width: min(230px, 84%); height: calc(3 * var(--zeile)); overflow: hidden;
    mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  }
  .w-liste::before { content: ""; position: absolute; inset: var(--zeile) 0 auto; height: var(--zeile); border-radius: var(--pille); background: var(--papier); background: var(--mint-hell); }
  .w-spur { position: relative; display: grid; grid-auto-rows: var(--zeile); animation: blaettern 12s infinite paused; animation-timing-function: var(--feder-standard); }
  .w-spur span { display: grid; place-items: center; font: 600 1.0625rem/1 var(--font-schild); color: var(--tinte); white-space: nowrap; }
  .tank:hover .w-spur, .tank:focus-visible .w-spur { animation-play-state: running; }
  @keyframes blaettern {
    0.00% { translate: 0 calc(-0 * var(--zeile)); }
    10.29% { translate: 0 calc(-0 * var(--zeile)); }
    14.29% { translate: 0 calc(-1 * var(--zeile)); }
    24.57% { translate: 0 calc(-1 * var(--zeile)); }
    28.57% { translate: 0 calc(-2 * var(--zeile)); }
    38.86% { translate: 0 calc(-2 * var(--zeile)); }
    42.86% { translate: 0 calc(-3 * var(--zeile)); }
    53.14% { translate: 0 calc(-3 * var(--zeile)); }
    57.14% { translate: 0 calc(-4 * var(--zeile)); }
    67.43% { translate: 0 calc(-4 * var(--zeile)); }
    71.43% { translate: 0 calc(-5 * var(--zeile)); }
    81.71% { translate: 0 calc(-5 * var(--zeile)); }
    85.71% { translate: 0 calc(-6 * var(--zeile)); }
    96.00% { translate: 0 calc(-6 * var(--zeile)); }
    100.00% { translate: 0 calc(-7 * var(--zeile)); }
  }
  @media (max-width: 860px) { .tanks { grid-template-columns: 1fr; } }
  @media (prefers-reduced-motion: reduce) { .w-spur { animation: none; } }

  /* ---------- Kundschaft: Logos werden farbig, sobald die Leitung ihren Abschnitt erreicht */
  .logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
  .logos li { display: grid; place-items: center; height: 96px; padding: 1rem; border-radius: var(--r); background: var(--zone); }
  :is(.zone, .flaeche) .logos li { background: var(--papier); }
  .logo-rahmen { display: block; overflow: hidden; }
  .logos li img { mix-blend-mode: multiply; transform: none !important; max-height: none; }
  .logos { border: 0; } .logos li { border: 0; min-height: 0; }
  .logos img {
    display: block; max-width: none;
    filter: grayscale(1); opacity: .6;
    transition: filter var(--dauer-standard) var(--feder-standard), opacity var(--dauer-standard) var(--feder-standard);
    transition-delay: calc(var(--i) * 60ms);
  }
  .abschnitt:has(.knoten.z-erreicht) .logos img, .logos li:hover img { filter: none; opacity: 1; }
  .logos li:hover img { transition-delay: 0s; }
  @media (max-width: 520px) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .logos li { height: 84px; padding: .5rem; } .logo-rahmen { scale: .82; } }

  /* ---------- Auslass */
  .auslass { background: var(--mint-hell); }
  .auslass .knopfreihe { margin-top: 0; }
  .auslass .kopf-block { margin-bottom: 2rem; }
  .auslass .t-lead { color: var(--tinte-weich); }
  [data-leitung-ende].z-erreicht::before { animation: voll 1.1s var(--feder-standard) 1; }
  @keyframes voll { 0% { translate: -102% 0; } 45%, 60% { translate: 0 0; } 100% { translate: 102% 0; } }

  /* ---------- Fuss */
  .fuss { padding-block: clamp(3.5rem, 2rem + 4vw, 5rem) 2rem; background: var(--papier); }
  .fuss-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr) minmax(15rem, 1.1fr); gap: 2.5rem; }
  .fuss-marke p { margin-top: 1rem; max-width: 30ch; font-size: .9375rem; }
  .fuss h2 { font: 600 1rem/1.2 var(--font-schild); color: var(--tinte-zart); margin-bottom: 1rem; }
  .fuss li + li { margin-top: .45rem; }
  .fuss a { color: var(--tinte); }
  .fuss-kontakt a { display: inline-flex; align-items: flex-start; gap: .6rem; white-space: nowrap; }
  .fuss-kontakt .ico { width: 1.1em; height: 1.1em; margin-top: .22em; color: var(--mint-tief); }
  .fuss-leiste { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: var(--strich) solid var(--linie); font-size: .9375rem; color: var(--tinte-zart); }
  .fuss-recht { display: flex; gap: 1.25rem; }
  @media (max-width: 1100px) { .fuss-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fuss-marke { grid-column: 1 / -1; } }
  @media (max-width: 720px) { .fuss-raster { grid-template-columns: 1fr 1fr; } .fuss-raster > div:last-child { grid-column: 1 / -1; } }
}

@layer hilfen {
  .nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) {
    .l-rohr, .l-puls, .r-punkte { animation: none !important; }
    .knopf::before, .knopf-rund::before, .feld-text > *, .feld-beleg > *, .stau-loesung, .strecke-fluss, .stau-fluss, .ds-bild img { transition-duration: 1ms !important; }
    .st, .station-behaelter, .ventil, .anschluss, .knopf, .knopf-rund { transition-property: color, background, box-shadow, opacity; }
  }
}

@layer bausteine {
  /* ---------- Referenzen: drei Geschichten als Karten nebeneinander */
  .geschichten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
  .geschichte { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--tinte); }
  .gs-bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--zone); }
  .gs-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--ease-out); }
  .geschichte:is(:hover, :focus-visible) .gs-bild img { scale: 1.04; }
  .gs-dach { display: block; margin-top: 1.2rem; font: 600 .8125rem/1.2 var(--font-schild); letter-spacing: .07em; text-transform: uppercase; color: var(--mint-tief); }
  .gs-titel { display: block; margin-top: .55rem; font: 300 clamp(1.4rem, 1.1rem + .9vw, 1.9rem)/1.12 var(--font-titel, var(--font)); letter-spacing: -.025em; hyphens: manual; text-wrap: balance; transition: color 350ms var(--ease-out); }
  .geschichte:is(:hover, :focus-visible) .gs-titel { color: var(--mint-tief); }
  .gs-person { display: flex; align-items: center; gap: .7rem; margin-top: 1.1rem; font-size: .875rem; line-height: 1.3; color: var(--tinte-zart); }
  .gs-person b { display: block; color: var(--tinte); font-weight: 600; }
  .gs-portrait { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
  .geschichte .text-link { display: inline-flex; margin-top: auto; padding-top: 1.1rem; }
  .geschichte:is(:hover, :focus-visible) .text-link .ico { translate: 5px 0; }
  .geschichte:focus-visible { outline: 3px solid var(--mint-tief); outline-offset: 6px; }
  @media (max-width: 900px) { .geschichten { grid-template-columns: 1fr; gap: 2.5rem; } }
}

@layer bausteine {
  /* ---------- Lebenszyklus als Boxen untereinander: eine offen, alle gleich hoch (kein Springen beim Wechsel) */
  @media (min-width: 761px) {
    .lz[data-lz] :is(.lz-hinweis-zeile, .lz-leiste, .lz-zunge, .lz-feld-beg) { display: none; }
    .lz-buehne { margin-top: 0; }
    .lz-felder { display: grid; gap: .7rem; background: none; overflow: visible; }
    .lz-feld, .lz-feld:not(.z-aktiv) { position: static; grid-area: auto; display: block; opacity: 1; visibility: visible; padding: 0; background: var(--ph-hell); transition: none; }
    .lz-titel { margin: 0; font-size: clamp(1.35rem, 1.1rem + .7vw, 1.7rem); }
    .lz-auf { all: revert; display: flex; align-items: center; gap: 1.1rem; width: 100%; box-sizing: border-box; padding: 1rem 1.6rem 1rem 1.1rem; border: 0;
      background: none; font: inherit; color: var(--tinte); text-align: left; cursor: pointer; }
    .lz-auf:focus-visible { outline: 3px solid var(--mint-tief); outline-offset: -3px; }
    .lz-auf-text { flex: 1; }
    .lz-auf .lz-kr { display: grid; flex: none; width: 56px; height: 56px; box-shadow: none; background: var(--ph); color: #fff; }
    .lz-auf .lz-kr svg { width: 30px; height: 30px; }
    .lz-auf .lz-kr b { width: 22px; height: 22px; font-size: .75rem; background: var(--tinte); color: #fff; box-shadow: 0 0 0 3px var(--ph-hell); }
    .lz-auf > .ico { display: block; flex: none; width: 1.4rem; height: 1.4rem; color: var(--ph); transition: rotate 450ms var(--feder-lebhaft); }
    .lz-auf[aria-expanded="true"] > .ico { rotate: 180deg; }
    .lz-klappe { display: grid; overflow: hidden; grid-template-rows: minmax(0, 0fr); transition: grid-template-rows 560ms cubic-bezier(0.33, 1, 0.68, 1); }
    .lz-klappe.z-auf { grid-template-rows: minmax(0, 1fr); }
    .lz-klappe-innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 3rem; align-content: start;
      min-height: 0; overflow: hidden; height: var(--lz-h, auto); box-sizing: border-box; padding: 0 2rem 2.75rem calc(1.1rem + 56px + 1.1rem); }
    .lz.z-misst .lz-klappe-innen { height: auto; }
    .lz.z-misst .lz-klappe { grid-template-rows: auto !important; transition: none !important; }   /* beim Messen auch geschlossene Boxen voll auslegen */
    .lz-klappe-innen .lz-lead { grid-column: 1; }
    /* Knopf und Referenz je halbe Breite, bündig mit Text und Checkliste darüber */
    .lz-klappe-innen .lz-fuss { display: contents; }
    .lz-klappe-innen .lz-fuss > .knopf { grid-column: 1; grid-row: 2; align-self: center; justify-self: start; margin-top: 1.6rem; }
    .lz-klappe-innen .lz-fuss > .lz-ref { grid-column: 2; grid-row: 2; max-width: none; margin-top: 1.6rem; }
    .lz-klappe-innen .lz-punkte { grid-column: 2; grid-row: 1; margin-top: 0; }
    .lz-feld .lz-ref { background: rgb(255 255 255 / .7); }
    /* Begleitende wie am Handy als verlinkte Kästchen */
    .lz-beg-reihe { justify-items: stretch; margin-top: 1.6rem; }
    .lz-beg-titel { justify-self: start; }
    .lz-beg-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
    .lz-beg-linie { display: none; }
    .lz-beg { width: auto; display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem .85rem .85rem; background: var(--ph-hell); }
    .lz-beg .lz-kr { width: 48px; height: 48px; box-shadow: none; outline: none; }
    .lz-beg .lz-kr svg { width: 26px; height: 26px; }
    .lz-beg .lz-name { flex: 1; max-width: none; text-align: left; font-size: 1.125rem; }
    .lz-beg > .ico { display: block; flex: none; width: 1.2rem; height: 1.2rem; color: var(--ph); }
  }
}

@layer bausteine {
  /* Phasen-Nummer typografisch vor dem Titel statt Badge auf dem Kreis */
  .lz-nr { flex: none; font: 300 1.6em/1 var(--font-titel, var(--font)); letter-spacing: -.03em; color: var(--ph); font-variant-numeric: tabular-nums; }
}

@layer bausteine {
  /* ---------- Aufklapper: drei Spalten (Text + Knopf | Liste | Referenz wie der Referenz-Teaser, ohne Box) */
  @media (min-width: 761px) {
    .lz-klappe-innen { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .8fr); grid-template-areas: "l p r" "k p r"; grid-template-rows: auto 1fr; }
    .lz-klappe-innen .lz-lead { grid-area: l; }
    .lz-klappe-innen .lz-punkte { grid-area: p; }
    .lz-klappe-innen .lz-fuss > .knopf { grid-area: k; align-self: start; }
    .lz-klappe-innen .lz-fuss > .lz-ref { grid-area: r; margin-top: 0; align-self: start; }
  }
  .lz-feld .lz-ref, .lz-ref { display: grid; gap: .7rem; padding: 0; background: none; max-width: none; text-decoration: none; color: var(--tinte); font: inherit; }
  .lz-ref .ref-foto { aspect-ratio: 16 / 10; }
  .lz-ref .ref-foto > img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; scale: none; }
  .lz-ref .ref-negativ { left: .8rem; top: .7rem; max-width: 60%; }
  .lz-ref-text { display: grid; gap: .3rem; }
  .lz-ref-text small { font: 600 .8125rem/1.2 var(--font-schild); letter-spacing: .06em; text-transform: uppercase; color: var(--ph); }
  .lz-ref-text b { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
  .lz-ref-text .text-link { margin-top: .2rem; }
  .lz-ref:hover .text-link .ico { translate: 5px 0; }
}

@layer bausteine {
  /* Auch im Hover-Zustand der alten Regel (.knopf:hover::before) den Drehpunkt in der Mitte halten */
  .knopf:hover::before, .knopf-rund:hover::before { transform-origin: 50% 50%; }
}

@layer bausteine {
  /* ---------- Kontakt schwebt unten rechts, mit Foto */
  .kontakt-schwebe { position: fixed; z-index: 70; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); display: flex; align-items: center; gap: .8rem;
    padding: .45rem 1.1rem .45rem .45rem; border-radius: 999px; background: var(--tinte); color: #fff; text-decoration: none;
    box-shadow: 0 12px 30px rgb(15 58 53 / .28); font: 600 1rem/1.15 var(--font);
    opacity: 0; translate: 0 16px; pointer-events: none; transition: opacity 350ms var(--ease-out), translate 450ms var(--ease-out), background-color 300ms var(--ease-out); }
  .kontakt-schwebe.z-sichtbar { opacity: 1; translate: 0 0; pointer-events: auto; }
  .kontakt-schwebe img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
  .kontakt-schwebe small { display: block; font: 600 .75rem/1.2 var(--font-schild); letter-spacing: .04em; color: #bfe3d9; }
  .kontakt-schwebe .ico { width: 1.1rem; height: 1.1rem; transition: translate 350ms var(--ease-out); }
  .kontakt-schwebe:hover { background: var(--mint-tief); }
  .kontakt-schwebe:hover .ico { translate: 4px 0; }
  .kontakt-schwebe:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
  @media (max-width: 600px) { .kontakt-schwebe span { display: none; } .kontakt-schwebe { padding-right: .8rem; } }

  /* ---------- Eigener Mauszeiger (entwurf.js): über Aufklappern ein Chevron, über verlinkten Karten ein Pfeil; Scale von 0 ein und aus */
  .zeiger { position: fixed; z-index: 90; left: -16px; top: -16px; width: 32px; height: 32px; pointer-events: none; }
  .zeiger svg { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--tinte); scale: 0; transition: scale 380ms cubic-bezier(0.32, 0.72, 0, 1); }
  .zeiger.z-an svg { scale: 1; }
  .zeiger path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform-box: view-box; transform-origin: 22px 22px;
    transition: rotate 460ms cubic-bezier(0.34, 1.3, 0.64, 1), opacity 220ms ease, scale 320ms cubic-bezier(0.33, 1, 0.68, 1); }
  .zeiger .z-pfeil { opacity: 0; scale: .5; }
  .zeiger[data-art="zu"] .z-chev { rotate: 180deg; }
  .zeiger[data-art="pfeil"] .z-chev { opacity: 0; scale: .5; }
  .zeiger[data-art="pfeil"] .z-pfeil { opacity: 1; scale: 1; }
  .mit-zeiger :is(.lz-auf, .ref-karte, .lz-ref, .tank, .teaser-gross),
  .mit-zeiger :is(.lz-auf, .ref-karte, .lz-ref, .tank, .teaser-gross) * { cursor: none; }
}

@layer bausteine {
  /* SplitText-Masken: Unterlängen (g, p, …) nicht abschneiden */
  .t-titel .tw-mask { padding-bottom: .14em; margin-bottom: -.14em; }
  /* Wissen-Kacheln: Grafiken ohne weissen Hintergrund */
  .tank-bild, :is(.zone, .flaeche) .tank-bild { background: none; }
}

@layer bausteine {
  /* ---------- Phasen-Box: beim Aufklappen wächst der dunkle Kreis hinter dem Icon zur ganzen Fläche */
  /* relative (nicht static), sonst schneidet die Box den wachsenden Kreis nicht ab */
  .lz-felder > .lz-feld, .lz-felder > .lz-feld:not(.z-aktiv) { position: relative; isolation: isolate; overflow: hidden; }
  .lz-feld::before { content: ""; position: absolute; z-index: -1; left: calc(1.1rem + 28px); top: calc(1rem + 28px); width: 230%; aspect-ratio: 1;
    border-radius: 50%; background: var(--ph); translate: -50% -50%; transform: scale(0); transition: transform 480ms cubic-bezier(0.33, 1, 0.68, 1); pointer-events: none; }
  .lz-feld.z-offen::before { transform: scale(1); transition-duration: 720ms; transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  @media (max-width: 760px) { .lz-feld::before { left: calc(.85rem + 26px); top: calc(.85rem + 26px); width: 760%; } }   /* hohe Boxen auf dem Handy ganz decken */
  /* Inhalte hell auf der dunklen Fläche */
  /* Kopf färbt beim Öffnen um; der Klappen-Inhalt ist nur offen sichtbar und darum direkt hell (kein Nachfärben) */
  .lz-feld :is(.lz-auf, .lz-nr, .lz-auf > .ico) { transition: color 420ms cubic-bezier(0.33, 1, 0.68, 1) 80ms; }
  .lz-feld.z-offen :is(.lz-auf, .lz-auf-text) { color: #fff; }
  .lz-feld.z-offen :is(.lz-nr, .lz-auf > .ico) { color: rgb(255 255 255 / .78); }
  .lz-feld :is(.lz-punkte li, .lz-ref, .lz-ref-text b) { color: #fff; }
  .lz-feld :is(.lz-punkte .ico, .lz-ref-text small, .lz-ref .text-link) { color: rgb(255 255 255 / .78); }
  .lz-feld .lz-lead { color: rgb(255 255 255 / .9); }
  .lz-feld .knopf-tinte { --grund: #fff; --text: var(--tinte); --fuell: var(--mint-hell); --text-fuell: var(--tinte); }
  /* offen: ohne Kreis-Kontur, das Icon bleibt stehen */
  .lz-feld .lz-auf .lz-kr { transition: background-color 300ms, box-shadow 300ms; }
  .lz-feld .lz-auf .lz-kr svg { transform-origin: 50% 50%; transition: transform 480ms cubic-bezier(0.33, 1, 0.68, 1), opacity 480ms cubic-bezier(0.33, 1, 0.68, 1); }
  .lz-feld.z-offen .lz-auf .lz-kr { box-shadow: none; background-color: transparent; }
  @media (prefers-reduced-motion: reduce) { .lz-feld::before { transition-duration: 1ms !important; } }
}

@layer bausteine {
  /* ---------- Buttons: Zeiger wird zu einem kleinen Punkt, Button folgt ganz leicht der Maus (magnetisch) */
  .mit-zeiger :is(.knopf, .knopf-rund), .mit-zeiger :is(.knopf, .knopf-rund) * { cursor: none; }
  .knopf, .knopf-rund { transition-property: color, scale, letter-spacing, translate; }
}

@layer bausteine {
  /* ---------- Icon-Flug vom Header-Kreis zu den Phasen-Boxen (entwurf.js) */
}

@property --glow-w { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@layer bausteine {
  /* Glow um den Button (entwurf.js, zeiger): ein weicher Schein wandert rundherum */
  .knopf-glow { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity 320ms var(--ease-out); animation: glow-lauf 2.6s linear infinite paused; }
  .knopf-glow.z-an { opacity: 1; animation-play-state: running; }
  /* nur ein weicher Schein hinter dem Button, keine Kontur (das Element steht im DOM direkt vor dem Button und liegt so dahinter) */
  .knopf-glow::after {
    content: ""; position: absolute; inset: -10px; border-radius: inherit;
    background: conic-gradient(from var(--glow-w), transparent 0 35%, color-mix(in srgb, var(--mint) 50%, transparent) 65%, var(--mint) 82%, color-mix(in srgb, var(--mint) 50%, transparent) 94%, transparent 100%);
    filter: blur(14px); opacity: .75;
  }
  @keyframes glow-lauf { to { --glow-w: 360deg; } }
  @media (prefers-reduced-motion: reduce) { .knopf-glow { animation: none; } }
}

@layer bausteine {
  /* Staustelle: Ladekreisel, dann Häkchen zeichnen (entwurf.js, staustellen) */
  .ventil .v-laedt { display: none; }
  .js .stau.z-laedt .ventil .v-zu { display: none; }
  .js .stau.z-laedt .ventil .v-laedt { display: inline-flex; }
  .v-kreisel { width: 1.25em; height: 1.25em; border-radius: 50%; border: 2.5px solid rgb(15 58 53 / .22); border-top-color: var(--tinte); animation: kreisel 700ms linear infinite; }
  @keyframes kreisel { to { rotate: 360deg; } }
  .stau.z-offen .v-offen .ico { animation: none; }
  .stau.z-offen .v-offen .ico path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: haken-zeichnen 420ms cubic-bezier(0.65, 0, 0.35, 1) 60ms forwards; }
  @keyframes haken-zeichnen { to { stroke-dashoffset: 0; } }
  @media (prefers-reduced-motion: reduce) { .stau.z-offen .v-offen .ico path { animation: none; stroke-dashoffset: 0; } }
}

@layer bausteine {
  /* Leichtes Konfetti, wenn eine Staustelle gelöst ist (entwurf.js, staustellen) */
  .konfetti { position: absolute; left: 50%; top: 50%; width: 6px; height: 9px; border-radius: 1px; pointer-events: none; z-index: 2; }
}

/* Seitenwechsel: weicher Übergang zwischen Seiten; Kopf bleibt stehen, Referenzbild und Phasentitel wandern mit (entwurf.js, seitenwechsel) */
@view-transition { navigation: auto; }
@layer bausteine {
  .kopf { view-transition-name: kopf; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 340ms; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  ::view-transition-group(vt-bild), ::view-transition-group(vt-titel) { animation-duration: 620ms; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  ::view-transition-old(vt-bild), ::view-transition-new(vt-bild) { height: 100%; object-fit: cover; }
  @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

  /* Leuchtstift: Mint-Marker zieht sich unter das Schlüsselwort der Titel (entwurf.js, leuchtstift) */
  .js :is(main h2.t-titel, .einstieg h1) b {
    background: linear-gradient(color-mix(in srgb, var(--mint) 42%, transparent), color-mix(in srgb, var(--mint) 42%, transparent)) no-repeat 0 90% / 0% .3em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    transition: background-size 1000ms cubic-bezier(0.65, 0, 0.35, 1);
  }
  .js :is(main h2.t-titel, .einstieg h1) b.z-markiert { background-size: 100% .3em; }

  /* Kennzahlen zählen hoch (Ziffern gleich breit) */
  .zahl { font-variant-numeric: tabular-nums; }

  /* Kundschaft als zwei gegenläufige Logo-Bänder, halten bei Hover an */
  .logo-band { overflow: hidden; margin-inline: calc(var(--rand, 0px) * -1);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .logo-baender { display: grid; gap: .75rem; }
  .logo-band .logos { display: flex; width: max-content; gap: .75rem; animation: logo-band 46s linear infinite; }
  .logo-band .logos-rueck { animation-direction: reverse; animation-duration: 52s; }   /* zweites Band läuft gegenläufig */
  .logo-band .logos li { flex: none; width: 190px; }
  .logo-band:hover .logos { animation-play-state: paused; }
  @keyframes logo-band { to { translate: calc(-50% - .375rem) 0; } }
  @media (max-width: 520px) { .logo-band .logos { grid-template-columns: none; } .logo-band .logos li { width: 150px; } }
  @media (prefers-reduced-motion: reduce) {
    .logo-band { mask-image: none; -webkit-mask-image: none; }
    .logo-band .logos { animation: none; width: auto; flex-wrap: wrap; }
    .logo-band .logo-kopie { display: none; }
  }
}

@layer bausteine {
  /* Mobiles Menü: füllt das Fenster unter dem Kopf, Leistungen direkt erreichbar, Telefon und E-Mail unten */
  @media (max-width: 900px) {
    .mobil-innen { max-height: calc(100dvh - var(--kopf-hoehe, 72px)); overflow-y: auto; overscroll-behavior: contain; }
    .mobil.z-offen nav { min-height: calc(100dvh - var(--kopf-hoehe, 72px)); box-sizing: border-box; display: flex; flex-direction: column; }
    .mobil .mobil-leistungen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; margin: 0 0 .6rem; padding: 0; list-style: none; }
    .mobil .mobil-leistungen a { font-size: 1rem; font-weight: 500; padding: .55rem 0 .55rem .9rem; border: 0; position: relative; color: var(--tinte-weich, var(--tinte)); }
    .mobil .mobil-leistungen a::before { content: ""; position: absolute; left: 0; top: calc(.55rem + .8em); width: 6px; height: 6px; border-radius: 50%; translate: 0 -50%; background: var(--ph, var(--mint)); }
    .mobil-direkt { margin: 1.25rem 0 0; display: grid; gap: .4rem; font-size: 1rem; }
    .mobil-direkt a { color: var(--tinte); text-decoration: none; padding: .35rem 0; }
    html.menue-offen { overflow: hidden; }
  }
}

@layer seiten {
/* Unterseiten: alte Bausteine in der Fliessschema-Welt. Liegt in @layer seiten (über entwurf.css). */

/* Knöpfe der alten Seiten als Rohrstücke */
.knopf-primaer { --grund: var(--tinte); --text: #fff; --fuell: var(--mint-tief); --text-fuell: #fff; }
.knopf-hell { --grund: var(--zone); --text: var(--tinte); --fuell: var(--tinte); --text-fuell: #fff; }
.knopf-text { --grund: transparent; --text: var(--mint-tief); --fuell: transparent; --text-fuell: var(--tinte); padding-inline: 0; min-height: 44px; }
.knopf-text.z-fuell { scale: none; }
.knopf-symbol { width: 50px; min-width: 50px; padding: 0; --grund: var(--zone); }
.knopf-symbol .ico { width: 1.5rem; height: 1.5rem; }
.knopf .pfeil { display: none; }

/* Kopf der Unterseiten */
.einstieg .pfad { margin-bottom: 1.5rem; }
.einstieg .t-lead { margin-top: 1.25rem; }
.einstieg .knopfreihe { margin-top: 2rem; }
.einstieg .chips { margin-top: 1.25rem; }
.einstieg .t-dachzeile + .t-plakat { margin-top: .5rem; }
.pfad ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; font: 400 .875rem/1.2 var(--font); color: var(--tinte-weich); }
.pfad li { display: inline-flex; align-items: center; gap: .6rem; }
/* feiner Winkel als Trenner */
.pfad li + li::before { content: ""; width: .4rem; height: .4rem; border: solid var(--rohr); border-width: 1.5px 1.5px 0 0; rotate: 45deg; translate: -.1rem 0; }
.pfad a { color: var(--tinte-weich); text-decoration: none; padding-block: .25rem; transition: color 200ms; }
.pfad a:hover { color: var(--mint-tief); text-decoration: underline; text-underline-offset: .25em; }
.pfad .pfad-start { display: inline-grid; place-items: center; }
.pfad .pfad-start .ico { width: 1rem; height: 1rem; }
.pfad [aria-current="page"] { color: var(--tinte); font-weight: 600; }

/* Bilder füllen ihren Rahmen, gerundet */
.bildrahmen { border-radius: var(--r-l); overflow: hidden; background: var(--zone); }
.bildrahmen > img, .einstieg-foto > img, .ref-foto > img, .portrait > img { width: 100%; height: 100%; object-fit: cover; }
.bildrahmen.frei { background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--rohr); }
.bildrahmen.frei > img { object-fit: contain; height: auto; }

/* Überschriften-Zeilen */
.kopfzeile { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.kopfzeile .t-lead, .kopfzeile .t-text { margin-top: 1rem; }
.t-dachzeile { font: 600 1rem/1.2 var(--font-schild); color: var(--mint-tief); letter-spacing: 0; text-transform: none; margin-bottom: .6rem; }
.t-text + .t-text { margin-top: 1em; }
.t-titel + .t-lead, .t-titel + .t-text { margin-top: 1rem; }

/* Icon-Kreise: farbige Kreise ohne Kontur */
.kreis { border-radius: 50%; background: var(--ph-hell, var(--mint-hell)); box-shadow: none; color: var(--ph, var(--mint-tief)); display: inline-grid; place-items: center; }
.kreis svg { width: 58%; height: 58%; }

/* Chips */
.chip { border-radius: var(--pille); font-family: var(--font-schild); font-weight: 600; }

/* Lebenszyklus als Navigation auf Leistungsseiten */

/* Ohne Seitenleitung keine Knoten und kein Einzug */
main:not(:has([data-leitung-start])) :not(.sg-knoten) > .knoten { display: none; }
main:not(:has([data-leitung-start])) .mit-leitung { padding-left: var(--rand); }

/* Karten: flach, gerundet, ohne Kontur – Fläche statt Rand */
.karte { border: 0; box-shadow: none; overflow: hidden; background: var(--zone); --feld-grund: var(--papier); --chip-grund: var(--papier);
  transition: translate var(--dauer-lebhaft) var(--feder-lebhaft), background var(--dauer-blende) var(--feder-blende); }
.karte::before, .karte::after { display: none !important; }
:is(.flaeche, .zone) .karte { background: var(--papier); --feld-grund: var(--zone); --chip-grund: var(--zone); }
.karte:has(.karte-link):hover { translate: 0 -6px; transform: none; box-shadow: none; }
.karte:has(.karte-link:focus-visible) { outline: 3px solid var(--mint-tief); outline-offset: 4px; }

/* Referenzkarte: Bild sauber in der Rundung, Zoom, Pfeil und Unterstreichung als Feder */
.ref-karte .ref-foto { border-radius: 0; }
.ref-foto > img { transition: scale var(--dauer-traege) var(--feder-traege); }
/* Referenzkarte: kein Bild-Zoom, stattdessen färbt sich die Kartenfläche ein */
.karte:hover .ref-foto > img, .teaser-gross:hover .ref-foto > img { scale: none; }
.ref-karte { transition: background-color 450ms var(--ease-out); }
.ref-karte:is(:hover, :focus-within) { background: var(--mint-hell); }
.ref-foto .logo-kachel { box-shadow: none; border: 0; border-radius: var(--r); transition: translate var(--dauer-lebhaft) var(--feder-lebhaft); }
.karte:hover .ref-foto .logo-kachel { translate: none; }
.ref-karte h3 a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .22em; transition: text-decoration-color var(--dauer-blende) var(--feder-blende); }
.ref-karte:hover h3 a { text-decoration-color: transparent; }
.karte .mehr .ico { transition: translate var(--dauer-lebhaft) var(--feder-lebhaft); }
.karte:hover .mehr .ico { translate: 5px 0; }

/* Chips ohne Kontur */
.chip { border: 0 !important; background: var(--chip-grund, var(--zone)); color: var(--tinte); }
:is(.flaeche, .zone) .chip { --chip-grund: var(--papier); }
.chip-mint { background: var(--mint-hell); color: var(--mint-tief); }
.karte .chip-mint, :is(.flaeche, .zone) .chip-mint { background: var(--papier); }

/* Checklisten, Themen, Ergebnis, A–Z: Fläche statt Kontur */
.checkliste li { border: 0; background: var(--papier); }
.sektion:not(.flaeche) .checkliste li { background: var(--zone); }
.thema, .ergebnis, .dev-hinweis, .k-praxis a { border: 0 !important; box-shadow: none; }
.thema { background: var(--papier); border-radius: var(--r-l); }
.sektion:not(.flaeche) .thema, .ergebnis { background: var(--zone); border-radius: var(--r-l); }
.g-az a { border: 0 !important; border-radius: 0; background: var(--zone); }
.g-az a:hover { background: var(--mint); }
.klapp-knopf .zeichen { border: 0 !important; border-radius: 0; background: var(--zone); }

/* Formularfelder: gefüllt statt umrandet, Fokus als Mint-Ring */
.feld input, .feld textarea { border: 1.5px solid transparent; background: var(--feld-grund, var(--zone)); border-radius: var(--r); }
.feld input:hover, .feld textarea:hover { border-color: transparent; background: color-mix(in oklch, var(--feld-grund, var(--zone)) 85%, var(--mint)); }
.feld input:focus-visible, .feld textarea:focus-visible { border-color: transparent; box-shadow: 0 0 0 3px var(--mint); }
.feld.z-fehler input, .feld.z-fehler textarea { border-color: transparent; box-shadow: 0 0 0 2px var(--signal); }
.formular .einwilligung input { accent-color: var(--mint-tief); }

/* Kopf der Leistungsseiten: Icon über dem Titel, Titel passt in die Spalte */
.einstieg div:has(> .kreis.gross) { flex-direction: column; align-items: flex-start !important; gap: 1.25rem !important; }
.kreis.gross { width: 88px; height: 88px; }
.einstieg h1.t-plakat { font-size: clamp(2.5rem, 1.4rem + 3vw, 4.25rem) !important; hyphens: auto; overflow-wrap: break-word; }
/* Startseite: Titel in voller Plakatgrösse (Schriftkontrast) */
.einstieg-text h1.t-plakat { font-size: var(--gr-plakat) !important; hyphens: manual; }

/* Fuss: keine Versalien aus dem alten System */
.fuss h2 { text-transform: none; letter-spacing: 0; }

/* Einblenden beim Scrollen (alte Seiten), als Feder */
.js [data-auftritt] { transition: opacity var(--dauer-standard) var(--feder-standard), translate var(--dauer-standard) var(--feder-standard); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-auftritt]:not(.z-sichtbar) { opacity: 0; translate: 0 14px; }
@media (prefers-reduced-motion: reduce) { .js [data-auftritt]:not(.z-sichtbar) { opacity: 1; translate: none; } }

/* Grosse Titel auf breiten Bildschirmen nicht trennen */
@media (min-width: 900px) { .t-plakat, .t-titel { hyphens: manual; } }

/* ---------- Styleguide */
.sg { padding-bottom: var(--raum); }
.sg code { font: 500 .8125rem/1.3 ui-monospace, Menlo, monospace; color: var(--tinte-zart); }
.sg-block { padding-block: 3rem; border-top: var(--strich) solid var(--linie); }
.sg-titel { font-size: 1.75rem; letter-spacing: -.015em; margin-bottom: 1rem; }
.sg-notiz { color: var(--tinte-zart); margin: -.5rem 0 1.25rem; max-width: 70ch; }
.sg-buehne { position: relative; padding: 2.25rem 1.5rem 1.5rem; border-radius: var(--r-l); box-shadow: inset 0 0 0 var(--strich) var(--linie); }
.sg-buehne + .sg-buehne { margin-top: 1rem; }
.sg-zone { background: var(--zone); box-shadow: none; }
.sg-etikett { position: absolute; top: .8rem; left: 1.5rem; font: 600 .8125rem/1 var(--font-schild); color: var(--tinte-zart); }
.sg-reihe { display: flex; flex-wrap: wrap; gap: 1.75rem 2.25rem; align-items: flex-start; }
.sg-teil { display: grid; gap: .6rem; justify-items: start; margin: 0; }
.sg-teil > :not(figcaption) { margin: 0; }
.sg-teil { grid-auto-flow: row; }
.sg-teil:has(.knopf-rund, .auto, .anschluss, .sg-knoten) { grid-template-columns: repeat(2, auto); }
.sg-teil:has(.knopf-rund, .auto, .anschluss, .sg-knoten) figcaption { grid-column: 1 / -1; }
.sg-farben { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.sg-farbe { margin: 0; display: grid; gap: .6rem; }
.sg-farbe > span { height: 84px; border-radius: var(--r); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.sg-farbe figcaption { display: grid; gap: .15rem; }
.sg-farbe b { color: var(--tinte); }
.sg-farbe small { color: var(--tinte-zart); }
.sg-schrift { display: grid; gap: .35rem; }
.sg-schrift code { margin-bottom: 1.4rem; }
.sg-schrift a { color: var(--mint-tief); }
.sg-st { width: 76px; }
.sg-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--zone); color: var(--tinte); }
.sg-ico .ico { width: 24px; height: 24px; }
.sg-stau { display: grid; gap: 1rem; width: 320px; }
.sg-stau .stau { display: block; padding: 0; border: 0; }
.sg-knoten { position: relative; display: inline-block; width: 30px; height: 30px; font-size: 20px; --einzug: 0px; --leitung-x: 15px; }
.sg-tank { width: 300px; }
.sg-teil .ref-karte { width: 320px; }
.sg-logos { width: 220px; grid-template-columns: 1fr; }
.sg-formular { width: min(520px, 100%); display: grid; gap: 1rem; }
.sg-teil .lz-nav { width: min(900px, 80vw); }
.sg-federn { display: flex; flex-wrap: wrap; gap: 1rem; }
.sg-feder { display: grid; gap: .4rem; width: 200px; padding: 1rem; border: 0; border-radius: var(--r); background: var(--zone); text-align: left; cursor: pointer; font: inherit; color: var(--tinte); }
.sg-feder span { width: 22px; height: 22px; border-radius: 50%; background: var(--mint-tief); transition: translate var(--d) var(--f); }
.sg-feder.z-an span { translate: 150px 0; }
.sg-feder small { color: var(--tinte-zart); }

/* ---------- Inhaltsverzeichnis mit Leitung und Positionspunkt */
.randspalte ol { position: relative; padding-left: 22px; gap: 2px; }
.randspalte ol::before, .randspalte ol::after {
  content: ""; position: absolute; left: 8.25px; top: .9rem; bottom: .9rem; width: var(--strich);
}
.randspalte ol::before { background: var(--linie); }
.randspalte ol::after { background: var(--mint); clip-path: inset(0 0 calc(100% - var(--toc-y, 0px) + .9rem) 0); transition: clip-path var(--dauer-standard) var(--feder-standard); }
.toc-marke { position: absolute; left: 3px; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px var(--papier); translate: 0 calc(var(--toc-y, -40px) - 6px); transition: translate var(--dauer-lebhaft) var(--feder-lebhaft); z-index: 1; }
.randspalte a { border-radius: var(--pille); transition: background var(--dauer-blende) var(--feder-blende), color var(--dauer-blende) var(--feder-blende); }
.randspalte a.z-aktiv { background: var(--zone); color: var(--tinte); font-weight: 600; }
@media (max-width: 860px) { .toc-marke, .randspalte ol::after { display: none; } }

/* Referenzbilder: dunkler Verlauf von oben links, Negativ-Logo darauf */
.ref-foto.mit-negativ::after, .bildrahmen:has(.ref-negativ)::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgb(8 26 24 / .78) 0%, rgb(8 26 24 / .45) 30%, rgb(8 26 24 / 0) 58%); }
.bildrahmen:has(.ref-negativ) { position: relative; }
.ref-negativ { position: absolute; z-index: 1; left: 1.1rem; top: 1rem; max-width: 70%; object-fit: contain; object-position: left top; }
.bildrahmen .ref-negativ { left: 1.4rem; top: 1.3rem; }

/* Dachzeilen über Abschnittstiteln weglassen (Titel stehen für sich); Dachzeile im Seitenkopf (vor h1) bleibt */
.t-dachzeile:has(+ h2) { display: none; }

/* Leistungsseiten: statt Foto das Phasen-Icon sehr gross rechts, am Bildschirmrand angeschnitten (Kreis-Motiv der Startseite) */
.einstieg:has(.kreis.gross) .einstieg-foto { display: none; }
@media (min-width: 901px) {
  .einstieg:has(.kreis.gross) { min-height: clamp(460px, 62vh, 640px); display: grid; align-items: center; }
  .einstieg .kreis.gross {
    --d: clamp(420px, 44vw, 720px);
    position: absolute; z-index: -1; top: 50%; right: calc((100% - 100vw) / 2 - var(--d) * .22); translate: 0 -50%;
    width: var(--d); height: var(--d);
  }
  .einstieg .kreis.gross svg { width: 42%; height: 42%; translate: calc(var(--d) * -.16) 0; }
  .einstieg .einstieg-raster:has(.kreis.gross) { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}

/* Referenzen-Übersicht ohne Kopf: Titel bleibt für Screenreader, Seite beginnt mit Filter und Karten */
main:has(#ref-raster) > .einstieg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; min-height: 0; }
main:has(#ref-raster) > .einstieg + .sektion { padding-top: clamp(2.5rem, 5vw, 4rem) !important; }

/* ---------- Reifegrad-Check im neuen Stil: Fragen als Boxen in der Phasenfarbe, Antworten als Kacheln ohne Kontur */
.frage[data-phase="strategie"] { --ph: #3e5a8d; --ph-hell: #e3efff; }
.frage[data-phase="dokumentation"] { --ph: #1a6286; --ph-hell: #dbf2ff; }
.frage[data-phase="analyse-optimierung"] { --ph: #006877; --ph-hell: #d7f5fa; }
.frage[data-phase="implementierung"] { --ph: #006b62; --ph-hell: #d8f6f2; }
.frage[data-phase="monitoring"] { --ph: #216a49; --ph-hell: #ddf6e7; }
.frage { margin: 0 0 .7rem; padding: 1.4rem 1.6rem 1.5rem; border: 0; background: var(--ph-hell, var(--zone)); }
.frage legend { float: left; width: 100%; display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.1rem; padding: 0; border: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.4; color: var(--tinte); }
.frage legend + * { clear: both; }
.frage-nr { flex: none; min-width: 0; height: auto; display: inline; background: none !important; color: var(--ph) !important; font: 300 1.75rem/1 var(--font-titel, var(--font)); letter-spacing: -.03em; }
.skala { padding-left: 0; gap: .5rem; }
.stufe { min-height: 3.25rem; border: 0; border-radius: 4px; background: var(--papier); color: var(--tinte); font-weight: 600; transition: background-color 250ms var(--ease-out), color 250ms var(--ease-out); }
.stufe:hover { transform: none; background: color-mix(in srgb, var(--ph) 10%, var(--papier)); }
.stufe:has(input:checked) { background: var(--ph); color: #fff; }
.stufe:has(input:focus-visible) { outline: 3px solid var(--mint-tief); outline-offset: 2px; }
/* Schritte im Kopf ohne Linien, Nummer typografisch */
.schritt { border-top: 0; padding-top: 0; }
.schritt::before { font: 300 2rem/1 var(--font-titel, var(--font)); letter-spacing: -.03em; color: var(--mint-tief); margin-bottom: .6rem; }

/* Karriere: «Das bieten wir Dir» als ruhige Liste mit Häkchen */

  .angebot-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.75rem 2.5rem; }
  .angebot-liste li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
  .angebot-liste .ico { width: 1.35rem; height: 1.35rem; color: var(--mint-tief, var(--mint)); margin-top: .2rem; }
  .angebot-liste h3 { margin: 0 0 .3rem; font: 600 1.0625rem/1.3 var(--font); color: var(--tinte); }
  .angebot-liste p { margin: 0; color: var(--tinte-weich); line-height: 1.55; }


/* Rechtstexte/Artikel auf dem Handy: Inhaltsverzeichnis über dem Text statt daneben */

  @media (max-width: 860px) {
    .artikel { grid-template-columns: minmax(0, 1fr); }
    .randspalte { position: static; max-height: none; }
  }


/* Referenz-Detail: Ausgangslage – Vorgehen – Mehrwert nebeneinander statt schmaler Spalte, Zitat direkt darunter */

  .einstieg .kennzahlen { margin-top: 1.75rem; padding-top: 1.25rem; }
  .verlauf-quer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 3.5rem); margin: 0; padding: 0; }
  .verlauf-quer .verlauf-punkt { display: block; padding: 1.4rem 0 0; border-top: var(--linie-s) solid var(--leitung-grund); }
  .verlauf-quer .verlauf-punkt::before { display: none; }
  .verlauf-quer .verlauf-nr, .verlauf-quer .verlauf-punkt:last-child .verlauf-nr {
    width: auto; height: auto; display: block; background: none; margin-bottom: .6rem;
    font: 300 2.6rem/1 var(--font-titel, var(--font)); letter-spacing: -.03em; color: var(--mint-tief, #1f7f6c);
  }
  .verlauf-quer h2 { margin: 0 0 .6rem; font-size: 1.375rem; }
  .ref-geschichte .zitat { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
  @media (max-width: 860px) { .verlauf-quer { grid-template-columns: minmax(0, 1fr); } }


  .ref-geschichte { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
  .ref-geschichte .zitat.gross blockquote p, .ref-geschichte .zitat.gross > p, .ref-geschichte .zitat.gross p:first-of-type { font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); line-height: 1.4; }


/* Filter-Chips (Referenzen): aktive Auswahl klar sichtbar – dunkel gefüllt, Schrift einfarbig */

  .filter .chip { cursor: pointer; }   /* Übergänge (Farbe + federndes Anheben) kommen aus dem Grundstil */
  .filter .chip:hover { background: var(--mint-hell); }
  .filter .chip[aria-pressed="true"] { background: var(--tinte); color: #fff; }
  .filter .chip .zahl, .filter .chip[aria-pressed="true"] .zahl { color: inherit; }   /* einfarbig: Zahl wie Text */
  .filter .chip:focus-visible { outline: 3px solid var(--mint-tief); outline-offset: 2px; }


}