/* 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-sprung: 1371ms;
  --feder-sprung: linear(0, 0.0038, 0.0142, 0.0306, 0.0535, 0.0797, 0.1098, 0.1431, 0.1791, 0.2172, 0.2569, 0.3003, 0.3421, 0.3843, 0.4265, 0.4685, 0.51, 0.5507, 0.5928, 0.6313, 0.6685, 0.7043, 0.7385, 0.7711, 0.802, 0.8328, 0.86, 0.8855, 0.9092, 0.9312, 0.9514, 0.9699, 0.9876, 1.0027, 1.0163, 1.0284, 1.039, 1.0483, 1.0563, 1.0634, 1.069, 1.0736, 1.0771, 1.0798, 1.0816, 1.0826, 1.083, 1.0827, 1.0819, 1.0805, 1.0788, 1.0766, 1.0742, 1.0712, 1.0683, 1.0651, 1.0618, 1.0584, 1.055, 1.0515, 1.0478, 1.0443, 1.0408, 1.0374, 1.0341, 1.0309, 1.0278, 1.0247, 1.0218, 1.0191, 1.0165, 1.0141, 1.0118, 1.0097, 1.0076, 1.0058, 1.0041, 1.0026, 1.0012, 0.9999, 0.9988, 0.9977, 0.9968, 0.996, 0.9954, 0.9948, 0.9943, 0.9939, 0.9936, 0.9934, 0.9932, 0.9931, 0.9931, 0.9931, 0.9932, 0.9933, 0.9935, 0.9936, 0.9938, 0.9941, 0.9943, 0.9946, 0.9949, 0.9951, 0.9954, 0.9957, 0.996, 0.9963, 0.9966, 0.9969, 0.9972, 0.9974, 0.9977, 0.9979, 0.9982, 0.9984, 0.9986, 0.9988, 0.999, 0.9992, 0.9994, 0.9995, 0.9997, 0.9998, 0.9999, 1, 1.0001, 1.0002, 1.0003, 1.0003, 1.0004, 1.0004, 1.0005, 1.0005, 1.0005, 1.0005, 1.0006, 1.0006, 1.0006, 1.0006, 1.0006, 1.0006, 1.0005, 1.0005, 1.0005, 1.0005, 1.0005, 1.0005, 1.0004, 1.0004, 1.0004, 1.0004, 1.0003, 1.0003, 1.0003, 1.0003, 1.0002, 1.0002, 1.0002, 1.0002, 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; }   /* Einzug entfällt: die Leitung läuft zwischen den Abschnitten, nicht neben dem Inhalt */
  .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; }
  /* Unsichtbar: leitung() misst damit weiter die Knoten (Auslöser .z-erreicht, Phasenfarbe --kn-farbe) */
  .leitung { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; visibility: hidden; }
  .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, .kopf.z-gerollt { border-bottom: 0; }
  .kopf { -webkit-backdrop-filter: none; backdrop-filter: none; }   /* keine graue Abschlusslinie; beim Scrollen trennt nur der weiche Schatten */
  .kopf-zeile { position: relative; display: flex; align-items: center; gap: 1.5rem; height: var(--kopf-hoehe); }
  .logo { display: inline-block; color: #4ab79e; }   /* Markenfarbe aus dem offiziellen Logo-SVG */
  .logo-marke { display: block; width: 114px; height: auto; }
  .fuss-marke .logo-marke { width: 150px; }   /* im Fuss das ganze Logo mit Unterzeile */
  .fuss .logo { color: #4ab79e; }
  /* Hover: der Schnitt im «I» schiebt sich nach oben hinaus, ein neuer gleitet von unten an dieselbe Stelle.
     Zweiter Schnitt liegt 160 Einheiten tiefer; am Ende steht er genau dort, wo der erste war – der Sprung zurück ist unsichtbar. */
  .logo-schnitt { transform-box: view-box; }
  .logo.z-schnitt .logo-schnitt { animation: logo-schnitt 480ms cubic-bezier(.65, 0, .35, 1); }   /* Klasse setzt entwurf.js beim Hover; läuft immer zu Ende */
  @keyframes logo-schnitt { to { transform: translateY(-160px); } }
  @media (prefers-reduced-motion: reduce) { .logo.z-schnitt .logo-schnitt { animation: none; } }
  .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 all {   /* Burger-Menü auf allen Breiten (11.10., vorher bis 980 px) */
    .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; }
  /* Einstieg in der vollen Farbe der aktuellen Phase (data-phase setzt entwurf.js), deckend */
  .einstieg[data-phase="strategie"] { --e-farbe: #3e5a8d; }
  .einstieg[data-phase="dokumentation"] { --e-farbe: #1a6286; }
  .einstieg[data-phase="analyse-optimierung"] { --e-farbe: #006877; }
  .einstieg[data-phase="implementierung"] { --e-farbe: #006b62; }
  .einstieg[data-phase="monitoring"] { --e-farbe: #216a49; }
  .einstieg[data-phase] { background-color: var(--e-farbe); color: #fff; }
  .einstieg.z-getoent { transition: background-color 600ms var(--ease-out); }
  .einstieg[data-phase] .t-plakat { color: #fff; }
  .einstieg[data-phase] .t-lead { color: rgb(255 255 255 / .88); }
  .einstieg[data-phase] .knopf-tinte { --grund: #fff; --text: var(--tinte); --fuell: var(--mint-hell); --text-fuell: var(--tinte); }
  .einstieg[data-phase] .knopf-kontur { --grund: rgb(255 255 255 / .14); --text: #fff; --fuell: #fff; --text-fuell: var(--tinte); }
  .js .einstieg[data-phase] h1 b { background-image: linear-gradient(rgb(255 255 255 / .22), rgb(255 255 255 / .22)); }
  .einstieg[data-phase] .knoten-start { visibility: hidden; }   /* kein Startpunkt: die Linie kommt aus der Farbfläche */
  /* Einstieg zentriert: links das Icon, so hoch wie die beiden Titelzeilen (Oberkante «R» bis Grundlinie der zweiten Zeile),
     rechts daneben der Titel mit fester Breite; darunter Einleitung und Knöpfe mittig */
  .einstieg:has(.e-zeichen) { min-height: var(--eh); display: grid; align-items: center; }
  .einstieg-raster:has(.e-zeichen) { grid-template-columns: minmax(0, 1fr); }
  .einstieg-text:has(.e-zeichen) { margin-inline: auto; text-align: center; }
  .einstieg-text:has(.e-zeichen) .t-lead { margin-inline: auto; }
  .einstieg-text:has(.e-zeichen) .knopfreihe { justify-content: center; }
  .einstieg-titel { display: flex; justify-content: center; align-items: flex-start; gap: clamp(1.25rem, 3vw, 2.75rem); }
  .einstieg-titel h1 { flex: none; text-align: left; max-width: none; margin: 0; }
  /* Plex: Oberkante der Versalien 0,147 × Schriftgrösse unter der Zeilenbox, Grundlinie der 2. Zeile bei 1,785 × */
  .e-zeichen { position: relative; flex: none; width: calc(var(--gr-plakat) * 1.638); aspect-ratio: 1; margin-top: calc(var(--gr-plakat) * .147); }
  .e-icon { position: absolute; inset: -1%; color: #fff; opacity: 0; }   /* -1 %: der Rand im viewBox der Icons, die Zeichnung sitzt so genau auf der Kante */
  .e-icon.z-an { opacity: 1; }
  .e-icon svg { width: 100%; height: 100%; }
  .e-icon :is(path, rect) { fill: currentColor; stroke: none; }
  /* Wechsel: das Icon dreht sich wie eine Karte um die Hochachse; das neue dreht herein, wenn das alte weggedreht ist */
  .e-zeichen { perspective: 1400px; }
  .e-icon { rotate: y 90deg; transition: rotate 380ms cubic-bezier(.55, 0, 1, .45), opacity 1ms 380ms; }
  .e-icon.z-an { rotate: y 0deg; transition: rotate 480ms cubic-bezier(0, .55, .45, 1) 380ms, opacity 1ms 380ms; }
  .e-icon.z-weg { rotate: y -90deg; opacity: 1; }
  .e-icon.z-ruhe { transition: none !important; }
  @media (max-width: 900px) {
    .einstieg:has(.e-zeichen) { min-height: 0; display: block; }
  }
  @media (prefers-reduced-motion: reduce) { .e-icon { transition: none !important; } .e-icon :is(path, rect) { stroke: none; fill-opacity: 1; } }
  /* Einstiegstitel: getipptes letztes Wort mit blinkendem Strich; lange Wörter verkleinert (--fit) */
  .einstieg h1 .tipp { display: block; width: max-content; transform-origin: 0 75%; scale: var(--fit, 1); }   /* Grösse wechselt ohne Übergang, wenn die Zeile leer ist */   /* immer eigene, zweite Zeile */
  /* Strich nur während des Tippens sichtbar und ohne eigene Breite: der Punkt bleibt am Wort */
  .tipp-zeiger { display: inline-block; width: .06em; height: .78em; margin-right: -.06em; vertical-align: -.02em; background: var(--mint); opacity: 0; transition: opacity 200ms; }
  .tipp.z-tippt .tipp-zeiger { opacity: 1; transition: none; }
  @media (prefers-reduced-motion: reduce) { .tipp-zeiger { display: none; } }

  @media (prefers-reduced-motion: no-preference) {
    .st-innen { animation: auftauchen 800ms var(--ease-out) backwards; animation-delay: calc(200ms + 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; }
    .lz-nav .lz-kr b { width: 20px; height: 20px; right: -8px; top: -8px; font-size: .6875rem; box-shadow: 0 0 0 2px var(--lz-grund); }
  }

  /* ---------- 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) * 40ms);
  }
  /* Farbe kommt, sobald die Station über dem Titel erreicht ist (.ueb-an, Leselinie 62 %) – früher als die unsichtbare Leitung */
  .abschnitt:has(.knoten:is(.ueb-an, .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; }   /* beim Messen auch geschlossene Boxen voll auslegen */
    .lz:is(.z-misst, .z-still) .lz-klappe { transition: none !important; }   /* und ohne Übergang zurück, sonst stehen die geschlossenen Boxen nach jedem Messen kurz offen */
    .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 gleich breite Spalten (Text + Knopf | Liste | Referenz wie der Referenz-Teaser, ohne Box) */
  @media (min-width: 761px) {
    .lz-klappe-innen { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "l p r" "k p r"; grid-template-rows: auto 1fr; }   /* gleichmässiges 3er-Raster */
    .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; }
  html.menue-offen .kontakt-schwebe { opacity: 0; translate: 0 16px; pointer-events: none; visibility: hidden; }   /* nicht über dem Handy-Menü */
  .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; }
  /* drei Striche, die entwurf.js ineinander übergehen lässt (Punkte, X, Pfeil rechts/links) */
  .zeiger line { fill: none; stroke: #fff; stroke-linecap: round; }
  .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; }
  /* Icon ohne Kreis, in der Phasenfarbe; offen hell getönt auf der dunklen Fläche */
  .lz-feld .lz-auf .lz-kr { background-color: transparent; box-shadow: none; color: var(--ph); transition: color 420ms cubic-bezier(0.33, 1, 0.68, 1) 80ms; }
  .lz-feld .lz-auf .lz-kr svg { width: 36px; height: 36px; }
  .lz-feld.z-offen .lz-auf .lz-kr { color: var(--ph-hell); }
  @media (max-width: 760px) { .lz-feld .lz-auf .lz-kr svg { width: 32px; height: 32px; } }
  @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 gegenläufige Logo-Bänder; laufen auch bei Hover weiter (Wunsch Pascal) */
  /* Bänder laufen über die ganze Fensterbreite, breiter als Titel und Text (bewusst unterschiedliche Breiten) */
  .logo-band { overflow: hidden; margin-inline: calc(50% - 50vw);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
  .logo-baender { display: grid; gap: .75rem; }
  .logo-band .logos { display: flex; width: max-content; gap: 0; animation: logo-band 46s linear infinite; }
  .logo-band .logos li { margin-right: 3rem; }   /* Abstand als Rand: jeder Durchgang ist genau ein Drittel breit */
  .logo-band .logos-rueck { animation-direction: reverse; animation-duration: 52s; }   /* zweites Band läuft gegenläufig */
  .logo-band .logos-drei { animation-duration: 40s; }   /* drittes Band wieder vorwärts, etwas schneller */
  /* grössere Logos frei auf der Fläche, ohne graue Kacheln */
  .logo-band .logos li { flex: none; width: 230px; height: 110px; padding: 0; background: none; }
  .logo-baender { gap: 1.5rem; }
  @keyframes logo-band { to { translate: calc(-100% / 3) 0; } }   /* ein Durchgang von dreien: nahtloser Übergang */
  @media (max-width: 520px) { .logo-band .logos { grid-template-columns: none; } .logo-band .logos li { width: 170px; height: 90px; margin-right: 2rem; } }
  @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 all {
    .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-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 bausteine {
  /* ---------- Seitenleitung «Zwischen den Abschnitten» (gewählt am 29.09.2026)
     Keine Linie neben dem Inhalt, kein Einzug: Die Leitung zeigt sich nur im Weissraum, wo ein Abschnitt an den nächsten übergibt.
     Über jedem Abschnittstitel steht seine Station (Ring 14 px, bündig mit der Inhaltskante); von oben läuft ein kurzes Stück hinein.
     Jedes Stück kommt in der Farbe der vorigen Station (--ueb-von, setzt uebergaben() in entwurf.js) und wechselt vor dem Ring
     in die eigene Phasenfarbe (--kn-farbe aus leitung()). Erreicht (.ueb-an, feste Leselinie bei 62 % der Fensterhöhe):
     Das Stück zeichnet sich von oben nach unten, danach füllt sich der Ring. .z-erreicht aus leitung() bleibt Auslöser für
     Tacho, Logos und Knopf; die unsichtbare .leitung und die Knoten bleiben dafür im Layout (nie display:none).
     Geltungsbereich: Startseite (main mit Startring) und der Aufruf .auslass auf allen Seiten. */
  :root {
    --ueb-ring: 14px;
    --ueb-l: calc(var(--raum) * .72);                       /* Länge des Stücks über der Station (Handy kürzer, folgt --raum) */
    --ueb-luft: calc(1.6rem - .18em);                        /* Ring bis Oberkante der Versalien, unabhängig von der Titelgrösse */
    --ueb-grund: color-mix(in oklab, var(--leitung-grund), var(--tinte) 6%);   /* noch nicht erreicht; trägt auf Weiss und auf .zone */
    --ueb-anfang: #3e5a8d;                                   /* Strategie: Farbe des Startrings und Herkunft des ersten Stücks */
    --ueb-ende: #216a49;                                     /* Monitoring: Farbe, wenn entwurf.js keine --kn-farbe setzt (Unterseiten) */
    --ueb-zeichnen: var(--dauer-standard);
    --ueb-verzug: 300ms;                                     /* der Ring füllt sich, wenn das Stück ankommt */
    /* Auslauf oben nach Smootherstep (Glossar «Easing-Gradient»), volle Deckung ab 40 % der Länge:
       kein sichtbarer Ansatz im Weissraum, aber genug Strecke, auf der die Herkunftsfarbe zu sehen ist */
    --ueb-auslauf: linear-gradient(to bottom,
      rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .009) 4%, rgb(0 0 0 / .058) 8%, rgb(0 0 0 / .163) 12%, rgb(0 0 0 / .317) 16%,
      rgb(0 0 0 / .5) 20%, rgb(0 0 0 / .683) 24%, rgb(0 0 0 / .837) 28%, rgb(0 0 0 / .942) 32%, rgb(0 0 0 / .991) 36%, #000 40%);
  }

  /* ---------- Station im Fluss über dem Titel */
  :is(main:has([data-leitung-start]), .auslass) .hat-knoten {
    padding-top: calc(var(--ueb-ring) + var(--ueb-luft));
  }
  /* Herkunft der ersten Station ist der Startring; alle weiteren überschreibt uebergaben.js mit der vorigen Station */
  main:has([data-leitung-start]) .hat-knoten { --ueb-von: var(--ueb-anfang); }
  :is(main:has([data-leitung-start]), .auslass) .knoten {
    display: block;                                          /* auf Unterseiten blendet neu.css die Knoten aus */
    top: 0; left: 0; width: var(--ueb-ring); height: var(--ueb-ring);
    scale: none;
    background: var(--papier);
    box-shadow: inset 0 0 0 var(--linie-s) var(--ueb-grund);
    transition: box-shadow var(--dauer-blende) var(--feder-blende);
  }

  /* Stück: Spur (auf dem Titel, braucht keine Phasenfarbe) und Füllung (auf dem Knoten, erbt --kn-farbe) liegen deckungsgleich.
     Oben blendet das Stück aus: Es kommt aus dem Weissraum, statt als Stab auf dem Titel zu stehen. */
  :is(main:has([data-leitung-start]), .auslass) .hat-knoten::before,
  :is(main:has([data-leitung-start]), .auslass) .hat-knoten > .knoten::before {
    content: ""; position: absolute; left: calc(var(--ueb-ring) / 2 - var(--linie-s) / 2);
    width: var(--linie-s); height: var(--ueb-l);
    -webkit-mask-image: var(--ueb-auslauf);
    mask-image: var(--ueb-auslauf);
    pointer-events: none;
  }
  :is(main:has([data-leitung-start]), .auslass) .hat-knoten::before {
    top: calc(-1 * var(--ueb-l));
    background: var(--ueb-grund);
  }
  :is(main:has([data-leitung-start]), .auslass) .hat-knoten > .knoten::before {
    bottom: 100%;
    /* Übergabe: oben die Farbe der vorigen Station, vor dem Ring die eigene (ohne --ueb-von einfarbig) */
    background: linear-gradient(to bottom,
      var(--ueb-von, var(--kn-farbe, var(--ueb-ende))) 44%,
      var(--kn-farbe, var(--ueb-ende)) 84%);
    transform: scaleY(0); transform-origin: 50% 0;
    /* zurück (nach oben scrollen): erst leert sich der Ring, dann zieht sich das Stück zügig nach oben zurück */
    transition: transform var(--dauer-blende) var(--feder-blende) 120ms;
  }
  /* Füllung des Rings */
  :is(main:has([data-leitung-start]), .auslass) .hat-knoten > .knoten::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: var(--kn-farbe, var(--ueb-ende));
    scale: 0;
    transition: scale 180ms ease-in;
  }

  /* ---------- Erreicht: Stück zeichnet sich von oben nach unten, dann wird der Ring farbig und füllt sich */
  :is(main:has([data-leitung-start]), .auslass) .hat-knoten > .knoten.ueb-an {
    box-shadow: inset 0 0 0 var(--linie-s) var(--kn-farbe, var(--ueb-ende));
    transition-delay: calc(var(--ueb-verzug) - 80ms);
  }
  :is(main:has([data-leitung-start]), .auslass) .hat-knoten > .knoten.ueb-an::before {
    transform: scaleY(1);
    transition: transform var(--ueb-zeichnen) var(--feder-standard);
  }
  :is(main:has([data-leitung-start]), .auslass) .hat-knoten > .knoten.ueb-an::after {
    scale: 1;
    transition: scale var(--dauer-lebhaft) var(--feder-lebhaft) var(--ueb-verzug);
  }

  /* ---------- Anfang: Startring unter den Knöpfen im Einstieg, bündig mit der Inhaltskante.
     Das erste Stück läuft vom Startring bis zur ersten Station (Länge misst uebergaben.js), ohne Ausblenden oben
     und im Verlauf von Strategie-Blau zur Farbe der Station. */
  main:has([data-leitung-start]) .knoten-start {
    box-shadow: inset 0 0 0 var(--linie-s) var(--ueb-anfang);
  }
  .hat-knoten.ueb-erste {
    --ueb-zeichnen: var(--dauer-traege);
    --ueb-verzug: 560ms;
  }
  :is(main:has([data-leitung-start]), .auslass) .hat-knoten.ueb-erste::before,
  :is(main:has([data-leitung-start]), .auslass) .hat-knoten.ueb-erste > .knoten::before {
    -webkit-mask-image: none; mask-image: none;
  }
  :is(main:has([data-leitung-start]), .auslass) .hat-knoten.ueb-erste > .knoten::before {
    background: linear-gradient(var(--ueb-anfang), var(--kn-farbe, var(--ueb-anfang)));
  }

  /* Graue Zone: Spur und leerer Ring etwas dunkler, damit sie dort gleich stark stehen wie auf Weiss (Kontrast ca. 1.4:1) */
  .zone { --ueb-grund: color-mix(in oklab, var(--leitung-grund), var(--tinte) 10%); }

  /* Aufruf auf Mint-Hell: Spur und leerer Ring in einem dunkleren Mint, gleich stark wie auf Weiss (ca. 1.4:1) */
  .auslass { --ueb-grund: color-mix(in oklab, var(--mint-hell), var(--tinte) 17%); }
  .auslass .hat-knoten > .knoten { background: var(--mint-hell); }

  /* Handy und Tablet: Der Einstiegskreis steht unter dem Text, ein Stück vom Startring aus liefe quer durch die Grafik.
     Dort beginnt die Leitung ohne sichtbaren Startring; die erste Station bekommt ein kurzes Stück wie alle anderen. */
  @media (max-width: 900px) {
    .leitung-anfang { height: 0; margin-top: 0; }
    .knoten-start { visibility: hidden; }
  }

  /* Reduzierte Bewegung: nichts wächst, Stück und Füllung blenden in der Phasenfarbe ein */
  @media (prefers-reduced-motion: reduce) {
    :is(main:has([data-leitung-start]), .auslass) .hat-knoten > .knoten::before {
      transform: none; opacity: 0; transition: opacity var(--dauer-blende) linear;
    }
    :is(main:has([data-leitung-start]), .auslass) .hat-knoten > .knoten::after {
      scale: 1; opacity: 0; transition: opacity var(--dauer-blende) linear;
    }
    :is(main:has([data-leitung-start]), .auslass) .hat-knoten > .knoten.ueb-an::before,
    :is(main:has([data-leitung-start]), .auslass) .hat-knoten > .knoten.ueb-an::after {
      opacity: 1; transition: opacity var(--dauer-blende) linear;
    }
  }
}

@layer bausteine {
  /* ---------- Häkchen in Listen (Muster «Häkchen – Raffiniert» aus Allgemeines, ohne Durchstreichen):
     gefülltes Kästchen, der Haken zeichnet sich. Kästchen in der Phasenfarbe, sonst Mint, Haken weiss.
     Ecken 4px wie alle kleinen Elemente. entwurf.js setzt .z-wartet, bis die Liste im Bild ist (ohne Skript steht alles da). */
  .haken { flex: none; display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-top: .12em; border-radius: 4px;
    background: var(--mint); color: #fff;
    transition: scale var(--dauer-lebhaft) var(--feder-lebhaft) calc(var(--hi, 0) * 90ms), opacity 180ms ease-out calc(var(--hi, 0) * 90ms); }
  [class*="ph-"] .haken { background: var(--ph, var(--mint)); color: #fff; }
  .haken svg { width: 80%; height: 80%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .haken path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 280ms cubic-bezier(.4, 0, .2, 1) calc(var(--hi, 0) * 90ms + 140ms); }
  .haken.z-wartet { scale: .55; opacity: 0; transition: none; }
  .haken.z-wartet path { stroke-dashoffset: 1; transition: none; }
  /* In der offenen Phasen-Box liegt die Liste auf der dunklen Phasenfläche: weisses Kästchen, Haken in der Phasenfarbe */
  .lz-feld .haken { background: #fff; color: var(--ph); }
  /* Karriere: Häkchen steht neben Titel und Text */
  .angebot-liste .haken { margin-top: .05rem; font-size: 1.0625rem; }
  @media (prefers-reduced-motion: reduce) { .haken, .haken path { transition: none; } }
}

@layer bausteine {
  /* ---------- Breiten: Grafik darf breiter laufen als Text (PRODUCT.md, Stand 2026-09-29)
     --bis-rand = Abstand von der Fensterkante bis zur Inhaltskante */
  :root { --bis-rand: calc(max(0px, (100vw - var(--breite)) / 2) + var(--rand)); }
  @media (min-width: 901px) {
    /* Phasen-Boxen: zugeklappt so breit wie der Text, die offene Box ragt links und rechts darüber hinaus
       (höchstens 7rem, mindestens 2rem Luft zum Fenster) und wächst beim Aufklappen weich in die Breite */
    /* zugeklappt schmal und mittig (wie der Titel darüber), offen breiter als die Textspalte */
    .lz[data-lz] .lz-feld { margin-inline: max(0px, (100% - 52rem) / 2); transition: margin-inline 560ms cubic-bezier(0.33, 1, 0.68, 1); }
    .lz[data-lz] .lz-beg-titel { margin-left: max(0px, (100% - 52rem) / 2); }
    .lz[data-lz] .lz-feld.z-offen { margin-inline: calc(-1 * clamp(0px, var(--bis-rand) - 2rem, 7rem)); }
    .lz.z-still .lz-feld { transition: none; }
    /* Referenzen «Was sich verändert hat»: die drei Karten mit Bild laufen gleich breit wie die Phasen-Boxen, der Titel bleibt schmal */
    .geschichten-karten { margin-inline: calc(-1 * clamp(0px, var(--bis-rand) - 2rem, 7rem)); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  }
}

@layer bausteine {
  /* ---------- Übergang Einstieg → Lebenszyklus: Linie und Station in der Mitte, Titel und Einleitung zentriert.
     Der Startring im Einstieg folgt der ersten Station (leitung() verschiebt ihn auf deren x). Titel und Einleitung
     blenden ein, sobald das Stück die Station erreicht (.ueb-an aus uebergaben()). */
  /* Alle Abschnittstitel mit Station (Startseite und Aufruf auf allen Seiten): Station, Linie, Titel und Einleitung mittig */
  :is(main:has([data-leitung-start]), .auslass) .kopf-block:has(> .hat-knoten) { --K: 1; margin-inline: auto; text-align: center; }
  :is(main:has([data-leitung-start]), .auslass) .kopf-block:has(> .hat-knoten) > * { margin-inline: auto; }
  :is(main:has([data-leitung-start]), .auslass) .kopf-block > .hat-knoten > .knoten { left: calc(50% - var(--ueb-ring) / 2); }
  :is(main:has([data-leitung-start]), .auslass) .kopf-block > .hat-knoten::before { left: calc(50% - var(--linie-s) / 2); }
  /* Titel mit Knopf daneben: Knopf mittig darunter */
  :is(main:has([data-leitung-start]), .auslass) .kopf-mit-aktion:has(> .hat-knoten) { flex-direction: column; align-items: center; justify-content: flex-start; }
  .auslass .knopfreihe { justify-content: center; }
  /* nur die Schrift blendet ein, sobald der Titel ins Bild kommt (.ueb-sicht); Linienstück und Station bleiben sichtbar */
  .js :is(main:has([data-leitung-start]), .auslass) .kopf-block > .hat-knoten,
  .js :is(main:has([data-leitung-start]), .auslass) .kopf-block > .hat-knoten b { color: transparent; transition: color 700ms var(--ease-out) 250ms; }
  .js :is(main:has([data-leitung-start]), .auslass) .kopf-block:has(> .hat-knoten) > .t-lead { opacity: 0; translate: 0 .75rem; transition: opacity 600ms var(--ease-out) 450ms, translate 800ms var(--ease-out) 450ms; }
  .js :is(main:has([data-leitung-start]), .auslass) .kopf-block:has(> .hat-knoten.ueb-sicht) > .hat-knoten,
  .js :is(main:has([data-leitung-start]), .auslass) .kopf-block:has(> .hat-knoten.ueb-sicht) > .hat-knoten b { color: var(--tinte); }
  .js :is(main:has([data-leitung-start]), .auslass) .kopf-block:has(> .hat-knoten.ueb-sicht) > .t-lead { opacity: 1; translate: none; }
  /* Leuchtstift erst mit der Schrift */
  .js :is(main:has([data-leitung-start]), .auslass) .kopf-block > .hat-knoten:not(.ueb-sicht) b { background-size: 0% .3em !important; }
  @media (prefers-reduced-motion: reduce) {
    .js :is(main:has([data-leitung-start]), .auslass) .kopf-block > .hat-knoten, .js :is(main:has([data-leitung-start]), .auslass) .kopf-block > .hat-knoten b { color: var(--tinte); }
    .js :is(main:has([data-leitung-start]), .auslass) .kopf-block > .t-lead { opacity: 1; translate: none; }
  }
}

/* Farbe der aktuellen Phase im Einstieg, weich animierbar; Linie und erste Station darunter folgen ihr */
@property --phase-jetzt { syntax: "<color>"; inherits: true; initial-value: #3e5a8d; }
@layer bausteine {
  main:has(.einstieg[data-phase="strategie"]) { --phase-jetzt: #3e5a8d; }
  main:has(.einstieg[data-phase="dokumentation"]) { --phase-jetzt: #1a6286; }
  main:has(.einstieg[data-phase="analyse-optimierung"]) { --phase-jetzt: #006877; }
  main:has(.einstieg[data-phase="implementierung"]) { --phase-jetzt: #006b62; }
  main:has(.einstieg[data-phase="monitoring"]) { --phase-jetzt: #216a49; }
  main:has(.einstieg[data-phase]) { transition: --phase-jetzt 600ms var(--ease-out); }
  #lebenszyklus .hat-knoten { --ueb-anfang: var(--phase-jetzt); }
  #lebenszyklus .knoten { --kn-farbe: var(--phase-jetzt) !important; }   /* überschreibt die Farbe, die leitung() inline setzt */
}
@layer bausteine {
  /* Erstes Stück: beginnt erst an der Unterkante der Farbfläche (auf der Farbe keine Linie), darunter in der aktuellen Phasenfarbe
     (--ueb-grenze misst uebergaben()) */
  :is(main:has([data-leitung-start]), .auslass) .hat-knoten.ueb-erste::before { background: linear-gradient(to bottom, transparent 0 var(--ueb-grenze, 0px), var(--ueb-grund) var(--ueb-grenze, 0px)); }
  .hat-knoten.ueb-erste > .knoten::before { background: linear-gradient(to bottom, transparent 0 var(--ueb-grenze, 0px), var(--phase-jetzt) var(--ueb-grenze, 0px)) !important; }
}

@layer bausteine {
  /* ---------- Farbwolken: drei sehr weiche Verläufe, die langsam treiben (nur transform, pausieren bei reduzierter Bewegung).
     Farben je Abschnitt über --w1/--w2/--w3; im Einstieg «negativ» auf der Phasenfarbe (heller, dunkler, ein Hauch Mint). */
  .hat-wolken { position: relative; isolation: isolate; }
  .wolken { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; }
  .wolken span { position: absolute; width: var(--wg, 62vmax); aspect-ratio: 1; border-radius: 50%;
    /* Mitte voll, Rand null nach Smootherstep: keine sichtbare Wolkenkante (Glossar «Easing-Gradient», «Mesh-Gradient») */
    background: radial-gradient(closest-side, color-mix(in oklab, var(--wf) 100.0%, transparent) 0%, color-mix(in oklab, var(--wf) 99.1%, transparent) 10%, color-mix(in oklab, var(--wf) 94.2%, transparent) 20%, color-mix(in oklab, var(--wf) 83.7%, transparent) 30%, color-mix(in oklab, var(--wf) 68.3%, transparent) 40%, color-mix(in oklab, var(--wf) 50.0%, transparent) 50%, color-mix(in oklab, var(--wf) 31.7%, transparent) 60%, color-mix(in oklab, var(--wf) 16.3%, transparent) 70%, color-mix(in oklab, var(--wf) 5.8%, transparent) 80%, color-mix(in oklab, var(--wf) 0.9%, transparent) 90%, color-mix(in oklab, var(--wf) 0.0%, transparent) 100%); 
    animation: wolke-treiben var(--wd, 26s) ease-in-out infinite alternate; }
  .wolken span:nth-child(1) { --wf: var(--w1); left: -18%; top: -35%; --wd: 24s; }
  .wolken span:nth-child(2) { --wf: var(--w2); right: -22%; bottom: -45%; --wd: 31s; animation-delay: -9s; --wg: 70vmax; }
  .wolken span:nth-child(3) { --wf: var(--w3); left: 30%; top: 10%; --wd: 21s; animation-delay: -14s; --wg: 46vmax; }
  @keyframes wolke-treiben {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(8vw, 6vh) scale(1.12); }
    100% { transform: translate(-6vw, 10vh) scale(.94); }
  }
  .wolken.z-ruht span { animation-play-state: paused; }   /* ausserhalb des Bilds steht die Bewegung (entwurf.js) */
  @media (prefers-reduced-motion: reduce) { .wolken span { animation: none; } }
  /* Farben */
  .einstieg.hat-wolken { --w1: rgb(255 255 255 / .16); --w2: rgb(0 0 0 / .18); --w3: rgb(83 193 170 / .22); }
  .einstieg.hat-wolken > .huelle { position: relative; z-index: 1; }
  .zone.hat-wolken { --w1: rgb(220 244 236 / .8); --w2: rgb(227 239 255 / .75); --w3: rgb(255 255 255 / .35); }
  .auslass.hat-wolken { --w1: rgb(255 255 255 / .75); --w2: rgb(83 193 170 / .22); --w3: rgb(219 242 255 / .6); }
}
@layer bausteine {
  /* ---------- Einstieg mit weichem Auslauf (alle Breiten): er liegt über dem nächsten Abschnitt und läuft unten über
     --auslauf nach Smootherstep aus (Glossar «Easing-Gradient»); der Auslauf liegt im Ruhezustand unter dem Bildrand.
     Desktop zusätzlich Vorhang: der Lebenszyklus steht (sticky) hinter dem Einstieg, bis dieser weggescrollt ist. */
  /* harter Übergang (Pascal 02.10.): kein weicher Auslauf mehr; --auslauf bleibt als Stellgrösse (0 = Kante) */
  .vorhang { --auslauf: 0px; }
  .vorhang > .einstieg { position: relative; z-index: 2; padding-bottom: calc(clamp(3rem, 2rem + 6vw, 7rem) + var(--auslauf)); }
  /* Handy/schmal: der folgende Abschnitt schiebt sich um den Auslauf darunter, die Farbe läuft direkt in seine Fläche aus */
  .vorhang > .einstieg + .abschnitt { margin-top: calc(-1 * var(--auslauf)); padding-top: calc(var(--raum) + var(--auslauf)); }
  @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .vorhang { --auslauf: 0px; }
    .vorhang > .einstieg { min-height: calc(var(--eh) + var(--auslauf)); }
    /* Platzhalter als Inhalt (nicht als Innenabstand: der zählt für sticky nicht zum Spielraum) */
    .vorhang::after { content: ""; display: block; height: var(--ein-h, 0px); }
    .vorhang > .einstieg + .abschnitt { position: sticky; top: var(--kopf-hoehe); z-index: 1; margin-top: calc(-1 * var(--ein-h, 0px)); padding-top: var(--raum); }
  }
}

@layer bausteine {
  /* ---------- Startseite: der Einstieg läuft hinter den Kopf; der Kopf ist zu Beginn durchsichtig mit weissem Logo, weissen
     Links und hellem Knopf. Weiss wird er erst, wenn der Einstieg weggescrollt ist (.z-hell setzt entwurf.js) oder das Menü offen ist. */
  .seite-start .vorhang { margin-top: calc(-1 * var(--kopf-hoehe)); }
  .seite-start .vorhang > .einstieg { padding-top: calc(var(--kopf-hoehe) + clamp(2.5rem, 1rem + 5vw, 5.5rem)); }
  /* Weiss stufenlos nach Scrollweg (--kopf-a), dahinter verwischt, was unter dem Kopf durchläuft */
  /* Kopf selbst ohne Fläche: das Weiss liegt als Schleier im Blur-Verlauf darunter (.blurkante::after) und läuft unten weich aus */
  .seite-start .kopf { background: transparent; }
  .seite-start .kopf.z-voll { background: var(--papier); }   /* nach dem Übergang deckend weiss, auch über dunklen Flächen */
  .seite-start .kopf, .seite-start .kopf.z-gerollt { box-shadow: none; }
  .seite-start .kopf:not(.z-hell) { box-shadow: none; }
  .seite-start .kopf:is(.z-menue-zu, :has(.burger[aria-expanded="true"])) { background: var(--papier); }
  .seite-start .kopf:not(.z-hell, .z-menue-zu, :has(.burger[aria-expanded="true"])) :is(.logo, .nav-liste > li > .nav-link) { color: #fff; }
  .seite-start .kopf:not(.z-hell, .z-menue-zu, :has(.burger[aria-expanded="true"])) .kopf-cta { --grund: #fff; --text: var(--tinte); --fuell: var(--mint-hell); --text-fuell: var(--tinte); }
  .seite-start .kopf:not(.z-hell, .z-menue-zu, :has(.burger[aria-expanded="true"])) .burger { background: rgb(255 255 255 / .16); }
  .seite-start .kopf:not(.z-hell, .z-menue-zu, :has(.burger[aria-expanded="true"])) .burger span { background: #fff; }
  .seite-start .kopf :is(.logo, .nav-link) { transition: color 400ms var(--ease-out); }
  /* auf dem farbigen Einstieg: Hover-Pille und Fokusring hell, sonst unsichtbar */
  .seite-start .kopf:not(.z-hell, .z-menue-zu, :has(.burger[aria-expanded="true"])) .nav-link::before { background: rgb(255 255 255 / .16); }
  .seite-start .kopf:not(.z-hell, .z-menue-zu, :has(.burger[aria-expanded="true"])) :is(.logo, .nav-link, .kopf-cta, .burger):focus-visible { outline-color: #fff; }
  @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .seite-start .vorhang > .einstieg { min-height: calc(var(--eh) + var(--auslauf) + var(--kopf-hoehe)); }
  }
}

@layer bausteine {
  /* ---------- Progressiver Blur-Verlauf unter dem Kopf (Glossar «Progressiver Blur-Verlauf»): acht Ebenen 0,5–64 px,
     jede per Maske auf ein Band begrenzt, die stärkste oben am Rand; nach unten nimmt die Unschärfe ohne Kante ab.
     Hängt direkt an body (Backdrop Root), nur Startseite; entwurf.js legt die Ebenen an. */
  /* das verwischte Band unter dem Kopf schrumpft mit --kopf-a: ist der Einstieg weg, bleibt nur der weisse Balken */
  /* Band unter dem Kopf: so hoch wie --band (Desktop 110 px, Handy 56 px) und schrumpft mit --kopf-a; nur sichtbar, solange
     Inhalt des Einstiegs unter dem Kopf durchläuft (entwurf.js setzt hidden) */
  .blurkante { --band: 56px; position: fixed; top: 0; left: 0; right: 0; height: calc(var(--kopf-hoehe) + var(--band)); z-index: 49; pointer-events: none; }
  @media (min-width: 901px) { .blurkante { --band: 110px; } }
  .blurkante[hidden] { display: none; }
  /* nur die Blur-Ebenen schrumpfen mit --kopf-a; der Schleier (::after) behält seine Länge */
  .blurkante > div { position: absolute; inset: 0 0 calc(var(--band) * var(--kopf-a, 0)) 0; }
  .blurkante > div:nth-child(1) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(to top, transparent 0.00%, #000 16.67%, #000 33.33%, transparent 50.00%); mask-image: linear-gradient(to top, transparent 0.00%, #000 16.67%, #000 33.33%, transparent 50.00%); }
  .blurkante > div:nth-child(2) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(to top, transparent 16.67%, #000 33.33%, #000 50.00%, transparent 66.67%); mask-image: linear-gradient(to top, transparent 16.67%, #000 33.33%, #000 50.00%, transparent 66.67%); }
  .blurkante > div:nth-child(3) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(to top, transparent 33.33%, #000 50.00%, #000 66.67%, transparent 83.33%); mask-image: linear-gradient(to top, transparent 33.33%, #000 50.00%, #000 66.67%, transparent 83.33%); }
  .blurkante > div:nth-child(4) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(to top, transparent 50.00%, #000 66.67%, #000 83.33%, transparent 100.00%); mask-image: linear-gradient(to top, transparent 50.00%, #000 66.67%, #000 83.33%, transparent 100.00%); }
  .blurkante > div:nth-child(5) { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(to top, transparent 66.67%, #000 83.33%); mask-image: linear-gradient(to top, transparent 66.67%, #000 83.33%); }
  .blurkante > div:nth-child(6) { -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); -webkit-mask-image: linear-gradient(to top, transparent 83.33%, #000 100.00%); mask-image: linear-gradient(to top, transparent 83.33%, #000 100.00%); }
  /* weisser Schleier: im Kopf in der Stärke --kopf-a, darunter --kopf-b (nur mitten im Übergang), nach Smootherstep auslaufend */
  .blurkante::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(var(--papier-rgb, 255 255 255) / var(--kopf-a, 0)) 0, rgb(var(--papier-rgb, 255 255 255) / var(--kopf-a, 0)) var(--kopf-hoehe), rgb(var(--papier-rgb, 255 255 255) / var(--kopf-b, 0)) var(--kopf-hoehe), rgb(var(--papier-rgb, 255 255 255) / calc(var(--kopf-b, 0) * 0.991)) calc(var(--kopf-hoehe) + var(--band) * 0.1), rgb(var(--papier-rgb, 255 255 255) / calc(var(--kopf-b, 0) * 0.942)) calc(var(--kopf-hoehe) + var(--band) * 0.2), rgb(var(--papier-rgb, 255 255 255) / calc(var(--kopf-b, 0) * 0.837)) calc(var(--kopf-hoehe) + var(--band) * 0.3), rgb(var(--papier-rgb, 255 255 255) / calc(var(--kopf-b, 0) * 0.683)) calc(var(--kopf-hoehe) + var(--band) * 0.4), rgb(var(--papier-rgb, 255 255 255) / calc(var(--kopf-b, 0) * 0.500)) calc(var(--kopf-hoehe) + var(--band) * 0.5), rgb(var(--papier-rgb, 255 255 255) / calc(var(--kopf-b, 0) * 0.317)) calc(var(--kopf-hoehe) + var(--band) * 0.6), rgb(var(--papier-rgb, 255 255 255) / calc(var(--kopf-b, 0) * 0.163)) calc(var(--kopf-hoehe) + var(--band) * 0.7), rgb(var(--papier-rgb, 255 255 255) / calc(var(--kopf-b, 0) * 0.058)) calc(var(--kopf-hoehe) + var(--band) * 0.8), rgb(var(--papier-rgb, 255 255 255) / calc(var(--kopf-b, 0) * 0.009)) calc(var(--kopf-hoehe) + var(--band) * 0.9), rgb(var(--papier-rgb, 255 255 255) / calc(var(--kopf-b, 0) * 0.000)) calc(var(--kopf-hoehe) + var(--band) * 1.0)); }
  @media (prefers-reduced-transparency: reduce) { .blurkante > div { display: none; } }
}


@layer bausteine {
  /* ---------- Phasen als schmale Liste (B, Stand 02.10.): zugeklappt schmale Köpfe; offen färbt sich der Kopf dunkel
     (Kreis wächst ab dem Icon) und darunter springen drei einzelne Boxen heraus: Überblick, Schwerpunkte, Referenz.
     Rechts im Kopf: drei kleine Boxen, offen ein X. Ältere Varianten: uebergabe/archiv/phasen-varianten-a-e-2026-10-02 */
  .lz[data-lz] { --lz-schmal: 36rem; --lz-offen: 66rem; }
  .lz[data-lz] .lz-felder > .lz-feld, .lz[data-lz] .lz-felder > .lz-feld:not(.z-aktiv) { background: none; overflow: visible; isolation: auto; padding: 0; }
  .lz[data-lz] .lz-feld::before { display: none; }
  /* Kopf trägt die Fläche; der dunkle Kreis wächst in ihm */
  .lz[data-lz] .lz-titel { position: relative; isolation: isolate; overflow: hidden; width: min(100%, var(--lz-schmal)); margin: 0 auto;
    background: var(--ph-hell); transition: background-color 300ms; }
  .lz[data-lz] .lz-feld:not(.z-offen) .lz-titel:hover { background: color-mix(in srgb, var(--ph-hell) 84%, var(--ph)); }
  .lz[data-lz] .lz-titel::before { content: ""; position: absolute; z-index: -1; left: calc(1.1rem + 28px); top: 50%; width: 260%; aspect-ratio: 1;
    border-radius: 50%; background: var(--ph); translate: -50% -50%; transform: scale(0); transition: transform 420ms cubic-bezier(0.33, 1, 0.68, 1); pointer-events: none; }
  .lz[data-lz] .lz-feld.z-offen .lz-titel::before { transform: scale(1); transition-duration: 560ms; }
  .lz[data-lz] .lz-auf { border-radius: 0; }

  /* Zeichen: drei Punkte → X */
  .lz-zeichen { display: block; flex: none; width: 1.6rem; height: 1.6rem; color: var(--ph); transition: color 420ms cubic-bezier(0.33, 1, 0.68, 1) 80ms; }
  .lz-zeichen svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .lz-zeichen circle { fill: currentColor; transform-box: fill-box; transform-origin: 50% 50%; transition: scale 360ms cubic-bezier(.34, 1.56, .64, 1), opacity 240ms; }
  .lz-zeichen .lz-z2 { transition-delay: 40ms; } .lz-zeichen .lz-z3 { transition-delay: 80ms; }
  .lz-zeichen .lz-x { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 320ms cubic-bezier(0.33, 1, 0.68, 1); }
  .lz-auf:hover .lz-zeichen circle { scale: 1.2; }
  .lz-auf[aria-expanded="true"] .lz-zeichen { color: #fff; }
  .lz-auf[aria-expanded="true"] .lz-zeichen circle { scale: 0; opacity: 0; transition-delay: 0ms; }
  .lz-auf[aria-expanded="true"] .lz-zeichen .lz-x { stroke-dashoffset: 0; transition-delay: 160ms; }

  /* drei einzelne Boxen */
  .lz[data-lz] .lz-klappe-innen { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: none; gap: .6rem;
    padding: .6rem 0 0; column-gap: .6rem; }
  .lz-kachel { position: relative; display: flex; flex-direction: column; gap: 1.2rem; padding: 1.5rem; background: var(--ph); color: #fff; }
  .lz-kachel .lz-lead { margin: 0; max-width: none; }
  .lz-k-ueberblick .knopf, .lz-k-ueberblick > .text-link { align-self: flex-start; margin-top: auto; }
  .lz-k-punkte .lz-punkte { margin: 0; }
  .lz-k-ref { padding: 1rem; }
  .lz-k-ref .lz-ref { background: none; }
  /* Sprung: die Boxen kommen unter dem Kopf hervor, federn kurz nach, eine nach der anderen */
  /* Feder aus entwurf.py (--feder-sprung, 160 Stützpunkte): schwingt fein aus statt mit einer groben Kurve zu enden */
  .lz-klappe.z-auf .lz-kachel { animation: lz-sprung var(--dauer-sprung) var(--feder-sprung) both, lz-ein 220ms ease-out both; transform-origin: 50% 0; }
  .lz-klappe.z-auf .lz-kachel:nth-child(2) { animation-delay: 70ms, 70ms; }
  .lz-klappe.z-auf .lz-kachel:nth-child(3) { animation-delay: 140ms, 140ms; }
  .lz.z-still .lz-kachel { animation: none; }
  @keyframes lz-sprung { from { translate: 0 -48px; scale: .86; } to { translate: 0 0; scale: 1; } }
  @keyframes lz-ein { from { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .lz-klappe.z-auf .lz-kachel { animation: none; } }

  @media (max-width: 760px) {
    .lz[data-lz] .lz-titel { width: 100%; }
    .lz[data-lz] .lz-titel::before { left: calc(.85rem + 26px); }
    .lz[data-lz] .lz-klappe-innen { padding: .5rem 0 0; }
    .lz[data-lz] .lz-klappe-innen > :last-child { margin-bottom: 0; }
    .lz-kachel { padding: 1.25rem; }
  }
  @media (min-width: 761px) {
    .lz[data-lz] .lz-klappe-innen { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
    .lz[data-lz] .lz-auf { padding: 1rem 1.4rem 1rem 1.1rem; }
    .lz[data-lz] .lz-auf .lz-kr { width: 56px; height: 56px; }
  }
  @media (min-width: 901px) {
    /* zugeklappt schmal; offen so breit wie die drei Boxen, der Kopf bleibt schmal und mittig */
    .lz[data-lz] .lz-feld { margin-inline: max(0px, (100% - var(--lz-schmal)) / 2); }
    .lz[data-lz] .lz-feld.z-offen, .lz.z-misst[data-lz] .lz-feld { margin-inline: max(0px, (100% - var(--lz-offen)) / 2); }
    .lz[data-lz] .lz-beg-titel { margin-left: max(0px, (100% - var(--lz-schmal)) / 2); }
  }
}
@layer bausteine {
  /* Messen (entwurf.js, messen): Breite sofort auf «offen», sonst misst es mitten in der Breitenanimation */
  .lz.z-misst .lz-feld { transition: none !important; }
}


@layer bausteine {
  /* Phasen-Liste B: das Feld bleibt hell und umfasst offen alle drei Boxen (Kopf ohne dunklen Kreis, Schrift bleibt dunkel) */
  .lz[data-lz] .lz-felder > .lz-feld, .lz[data-lz] .lz-felder > .lz-feld:not(.z-aktiv) { background: var(--ph-hell); overflow: hidden; transition: margin-inline 560ms cubic-bezier(0.33, 1, 0.68, 1), background-color 300ms; }
  .lz[data-lz] .lz-felder > .lz-feld:not(.z-offen):hover { background: color-mix(in srgb, var(--ph-hell) 84%, var(--ph)); }
  .lz[data-lz] .lz-titel, .lz[data-lz] .lz-feld:not(.z-offen) .lz-titel:hover { width: 100%; background: none; }
  .lz[data-lz] .lz-titel::before { display: none; }
  .lz[data-lz] .lz-feld.z-offen :is(.lz-auf, .lz-auf-text) { color: var(--tinte); }
  .lz[data-lz] .lz-feld.z-offen .lz-auf .lz-kr { color: var(--ph); }
  .lz[data-lz] .lz-auf[aria-expanded="true"] .lz-zeichen { color: var(--ph); }
  .lz[data-lz] .lz-klappe-innen { padding: 0 1rem 1rem; }
  @media (max-width: 760px) { .lz[data-lz] .lz-klappe-innen { padding: 0 .6rem .6rem; } }
}

@layer bausteine {
  /* ---------- Rundungen einheitlich wie die Buttons (--pille, 4px; Versuch 02.10.). Kreise (50 %) und Linien bleiben. */
  :root { --r: var(--pille); --r-l: var(--pille); --radius: var(--pille); --radius-s: var(--pille); --radius-l: var(--pille); --radius-xl: var(--pille); }
  :focus-visible, .knopf-rund:focus-visible { border-radius: var(--pille); }
  :is(.lz-feld, .lz-kachel, .stau, .ref-foto, .ds-bild, .karte, .logos li, .partner-logo, .burger, .knopf-rund, .kontakt-schwebe,
      .nav-panel, .nav-raster a, .lz-beg, .tank, .g-az a, .klapp-knopf .zeichen, .einstieg-foto, .schild, .lz-k-ref .lz-ref) { border-radius: var(--pille); }
  .lz[data-lz] .lz-felder > .lz-feld, .lz[data-lz] .lz-felder > .lz-feld:not(.z-aktiv), .ref-karte .ref-foto { border-radius: var(--pille); }
  :is(.ref-foto, .ds-bild, .einstieg-foto) { overflow: hidden; }
  .kontakt-schwebe img { border-radius: 50%; }
}

@layer bausteine {
  /* Phasen-Boxen weiss mit dunkler Schrift (statt dunkler Phasenfarbe); Akzente in der Phasenfarbe */
  .lz[data-lz] .lz-kachel { background: var(--papier); color: var(--tinte); }
  .lz[data-lz] .lz-kachel .lz-lead { color: var(--tinte-weich, var(--tinte)); }
  .lz[data-lz] .lz-kachel :is(.lz-punkte li, .lz-ref, .lz-ref-text b) { color: var(--tinte); }
  .lz[data-lz] .lz-kachel :is(.lz-ref-text small, .lz-ref .text-link) { color: var(--ph); }
  .lz[data-lz] .lz-kachel .haken { background: var(--ph); color: #fff; }
  .lz[data-lz] .lz-kachel .knopf-tinte { --grund: var(--tinte); --text: #fff; --fuell: var(--ph); --text-fuell: #fff; }
}
@layer bausteine {
  /* geschlossen nichts durchscheinen lassen: Abstand unten als Rand der letzten Box statt Innenabstand (der bliebe sichtbar) */
  .lz[data-lz] .lz-klappe { overflow: hidden; }
  .lz[data-lz] .lz-klappe-innen { padding-bottom: 0; }
  .lz[data-lz] .lz-klappe-innen > .lz-kachel { margin-bottom: 1rem; }
  @media (max-width: 760px) { .lz[data-lz] .lz-klappe-innen > .lz-kachel { margin-bottom: 0; } .lz[data-lz] .lz-klappe-innen > .lz-kachel:last-child { margin-bottom: .6rem; } }
}

@layer bausteine {
  /* ---------- Phasen stapeln sich beim Scrollen (Versuch 02.10.): jedes Feld klebt oben, das nächste schiebt sich darüber
     und bleibt ein Stück tiefer stehen – oben sieht man die Kanten der darunterliegenden. Platzhalter am Listenende hält
     den fertigen Stapel kurz stehen (Innenabstand zählt bei sticky nicht). */
  .lz[data-lz] { --stapel-oben: calc(var(--kopf-hoehe) + 1rem); --stapel-schritt: 14px; }
  .lz[data-lz] .lz-felder > .lz-feld, .lz[data-lz] .lz-felder > .lz-feld:not(.z-aktiv) {
    position: sticky; top: calc(var(--stapel-oben) + var(--i, 0) * var(--stapel-schritt)); z-index: calc(1 + var(--i, 0));
    box-shadow: 0 -10px 24px -14px rgb(15 58 53 / .22); }
  .lz[data-lz] .lz-felder::after { content: ""; display: block; height: 18vh; pointer-events: none; }
  @media (max-width: 760px) { .lz[data-lz] { --stapel-schritt: 10px; } .lz[data-lz] .lz-felder::after { height: 12vh; } }
  @media (prefers-reduced-motion: reduce) { .lz[data-lz] .lz-felder > .lz-feld { position: relative; top: auto; } .lz[data-lz] .lz-felder::after { display: none; } }
}

@layer bausteine {
  /* ---------- Bento (02.10.): kein umfassendes Feld mehr – Kopf und drei Boxen sind je eigene helle Kacheln mit Fugen */
  .lz[data-lz] .lz-felder > .lz-feld, .lz[data-lz] .lz-felder > .lz-feld:not(.z-aktiv),
  .lz[data-lz] .lz-felder > .lz-feld:not(.z-offen):hover { background: transparent; }
  .lz[data-lz] .lz-titel, .lz[data-lz] .lz-feld:not(.z-offen) .lz-titel:hover { background: var(--ph-hell); border-radius: var(--pille); }
  .lz[data-lz] .lz-feld:not(.z-offen) .lz-titel:hover { background: color-mix(in srgb, var(--ph-hell) 84%, var(--ph)); }
  .lz[data-lz] .lz-klappe-innen, .lz[data-lz] .lz-klappe-innen { padding: .6rem 0 0; gap: .6rem; }
  .lz[data-lz] .lz-klappe-innen > .lz-kachel, .lz[data-lz] .lz-klappe-innen > .lz-kachel:last-child { margin-bottom: 0; }
  .lz[data-lz] .lz-kachel { background: var(--ph-hell); }
}
@layer bausteine {
  /* Stapel genau übereinander, ohne Schatten */
  .lz[data-lz] { --stapel-schritt: 0px; }
  .lz[data-lz] .lz-felder > .lz-feld, .lz[data-lz] .lz-felder > .lz-feld:not(.z-aktiv) { box-shadow: none; }
  @media (max-width: 760px) { .lz[data-lz] { --stapel-schritt: 0px; } }
}

@layer bausteine {
  /* Stapel: überdeckte Felder werden ganz leicht kleiner und transparenter (entwurf.js setzt --deckung). */
  .lz[data-lz] .lz-felder > .lz-feld { transform-origin: 50% 0; scale: calc(1 - .04 * var(--deckung, 0)); }
  /* blasser werden ohne durchzuscheinen: weisse Schicht über dem Feld statt opacity (sonst sieht man die Felder darunter) */
  .lz[data-lz] .lz-felder > .lz-feld::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background: var(--papier); opacity: var(--deckung, 0); }
  @media (prefers-reduced-motion: reduce) { .lz[data-lz] .lz-felder > .lz-feld { scale: none; } .lz[data-lz] .lz-felder > .lz-feld::after { display: none; } }
}
@layer bausteine {
}

@layer bausteine {
  /* Zuklappen per Scroll (entwurf.js, zuklappen): die Klappe wird unten abgedeckt (clip-path), die Höhe bleibt */
}

@layer bausteine {
  /* Abstand nach dem Stapel: Platzhalter nur kurz bei den fünf Phasen, bei den Begleitenden keiner (sonst grosse Lücke vor «Wo es heute staut») */
  .lz[data-lz] .lz-felder::after { height: 6vh; }
  .lz[data-lz] .lz-felder-beg::after { display: none; }
}
@layer bausteine {
  #lebenszyklus { padding-bottom: calc(var(--raum) * .4); }
}

@layer bausteine {
  /* ---------- Wissen-Grafiken fein wie die Icons: eine Strichstärke (--linie-s, unabhängig von der Skalierung) */
  .tank-bild svg.w :is(path, line, circle) { vector-effect: non-scaling-stroke; }
  .w-rohr { stroke: var(--rohr); stroke-width: var(--linie-s); }
  .w-fluss { stroke-width: var(--linie-s); }
  .w-st circle { fill: var(--papier); stroke: var(--ph); stroke-width: var(--linie-s); r: 17px; }
  .w-st text { font: 500 15px/1 var(--font-schild); }
  .w-skala { stroke: var(--rohr); stroke-width: var(--linie-s); }
  .w-wert { stroke-width: calc(var(--linie-s) * 1.5); }
  .w-nadel line { stroke-width: var(--linie-s); }
  .w-nadel circle { fill: var(--papier); stroke: var(--tinte); stroke-width: var(--linie-s); r: 6px; }
  .w-nadel .w-nabe { display: none; }
}

@layer bausteine {
  /* Leistungen-Menü: Icons ohne Kreis im Hintergrund, ohne Nummern; die Fläche füllt sich beim Überfahren ab der Mausposition */
  .nav-raster a .mini-station, .nav-begleitend .nav-raster a .mini-station { background: none; }
  .nav-raster a::before { left: var(--mx, 50%); }
}

@layer bausteine {
  /* Leistungen-Menü: statt Kreis wächst die Fläche als Rechteck ab der Mausposition, mit leichter Feder */
  .nav-raster a::before { left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: var(--pille); translate: none;
    transform-origin: var(--mx, 50%) var(--my, 50%); transform: scale(0); transition: transform var(--dauer-lebhaft) var(--feder-lebhaft); }
  .nav-raster a:is(:hover, :focus-visible)::before { transform: scale(1); }
}

@layer bausteine {
  /* Menü-Fläche: schneller Start, sichtbares Federn (Überschwingen darf über den Rand, darum ohne overflow) */
  .nav-raster a { overflow: visible; }
  .nav-raster a::before { transition: transform 460ms cubic-bezier(0.2, 1.12, 0.4, 1); }
  .nav-raster a:not(:hover, :focus-visible)::before { transition: transform 260ms cubic-bezier(0.4, 0, 0.6, 1); }
}

@layer bausteine {
  /* offenes Feld deckend weiss hinterlegt: zwischen den Bento-Kacheln scheinen gestapelte Felder nicht durch */
  .lz[data-lz] .lz-felder > .lz-feld.z-offen { background: linear-gradient(var(--papier), var(--papier)) no-repeat 0 0 / 100% calc(100% - var(--weg, 0px)); }   /* schrumpft mit den Boxen (--weg aus entwurf.js) */
}


@layer bausteine {
  /* offenes Feld höher als das Fenster (Handy): klebt nicht, scrollt normal (entwurf.js setzt .z-hoch) */
  .lz[data-lz] .lz-felder > .lz-feld.z-hoch, .lz[data-lz] .lz-felder > .lz-feld.z-hoch:not(.z-aktiv) { position: relative; top: auto; }
}

@layer bausteine {
  /* ---------- Einstieg einfarbig in Mint (statt je Phase wechselnd; Wunsch Pascal, 03.10.). Schrift, Icon, Logo und Menü
     weiss (Pascal, 03.10. – zuvor dunkel getestet). Wort, Icon und Tippen wechseln weiter. */
  .einstieg[data-phase] { --e-farbe: var(--mint); }
  main:has(.einstieg[data-phase]) { --phase-jetzt: var(--mint-tief); }
  .js .einstieg[data-phase] h1 b { background-image: linear-gradient(rgb(255 255 255 / .28), rgb(255 255 255 / .28)); }
  .einstieg.hat-wolken { --w1: rgb(255 255 255 / .22); --w2: rgb(28 115 96 / .22); --w3: rgb(255 255 255 / .12); }
  .einstieg[data-phase] .t-lead { color: #fff; }
}


@layer bausteine {
  /* ---------- Staustellen als Problem ⇄ Lösung mit Schalter (03.10.): beide als Titel auf gleicher Höhe, dazwischen der Schalter
     aus Pascals Mustersammlung («Schalter – raffiniert»: Knopf dehnt sich und federt, entwurf.js). Kein Laden.
     Aus = Problem im Vordergrund, Lösung unscharf · An (Mint) = Lösung klar, Problem tritt zurück. */
  .stau, .stau:last-child { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); column-gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; border-radius: 0; }
  .stau-wort { display: block; margin-bottom: .45rem; font: 600 .8125rem/1.2 var(--font-schild); letter-spacing: .07em; text-transform: uppercase; color: var(--tinte-zart); }
  .stau-problem, .stau-ergebnis, .stau .stau-loesung > .stau-ergebnis { margin: 0; max-width: 24ch; font: 600 var(--gr-zwischen)/1.2 var(--font); letter-spacing: -.01em; color: var(--tinte);
    text-wrap: balance; hyphens: manual; }
  .stau-ergebnis .stau-wort { color: var(--mint-tief); }
  .stau-detail { margin: .55rem 0 0; max-width: 46ch; color: var(--tinte-weich); font-size: 1.0625rem; hyphens: manual; }
  .stau-problem { transition: opacity 500ms var(--ease-out); }
  .stau.z-offen .stau-problem { opacity: .45; }
  /* Schalter: sitzt auf Höhe der ersten Titelzeile */
  .stau-rohr { width: auto; height: auto; display: block; margin-top: calc(.8125rem * 1.2 + .45rem + (var(--gr-zwischen) * 1.2 - 36px) / 2); }
  .stau-rohr::before, .stau-fluss { display: none; }
  .stau .ventil { all: unset; box-sizing: border-box; position: relative; display: block; width: 64px; height: 36px; border-radius: 100px; background: var(--rohr); cursor: pointer;
    transition: background-color 200ms ease; -webkit-tap-highlight-color: transparent; }
  .stau.z-offen .ventil { background: var(--mint); }
  .stau .ventil .schalter-knopf { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: none;
    transition: left 420ms cubic-bezier(.22, 1, .36, 1); }   /* ohne Überschiessen: sonst ragt der Knopf über die Bahn; das Federn macht die Dehnung (entwurf.js) */
  .stau.z-offen .ventil .schalter-knopf { left: 32px; }
  .stau .ventil:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { .stau .ventil .schalter-knopf { transition: none; } }
  @media (max-width: 760px) {
    .stau, .stau:last-child { grid-template-columns: minmax(0, 1fr); }
    .stau-problem, .stau-ergebnis, .stau .stau-loesung > .stau-ergebnis { max-width: none; }
    .stau-rohr { margin-top: 0; }
  }
}
@layer bausteine {
  /* Phasen blenden sich beim Hereinscrollen von unten ein: Scale und Deckkraft folgen dem Scrollen (--ein, entwurf.js) */
  .lz[data-lz] .lz-felder > .lz-feld { scale: calc((1 - .04 * var(--deckung, 0)) * (.86 + .14 * var(--ein, 1))); opacity: var(--ein, 1); }
  @media (prefers-reduced-motion: reduce) { .lz[data-lz] .lz-felder > .lz-feld { scale: none; opacity: 1; } }
}

@layer bausteine {
  /* Staustellen-Schalter mit Beschriftung in der Pille: «Problem | Lösung», die weisse Pille gleitet unter das aktive Wort
     (dehnt sich und federt wie zuvor). Die kleinen Überschriften über den Titeln entfallen. */
  .stau-rohr { margin-top: calc((var(--gr-zwischen) * 1.2 - 40px) / 2); }
  .stau .ventil { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: auto; height: 40px; padding: 4px; }
  .stau .ventil .schalter-knopf { top: 4px; left: 4px; width: calc(50% - 4px); height: 32px; border-radius: 100px; }
  .stau.z-offen .ventil .schalter-knopf { left: 50%; }
  .stau .ventil .schalter-wort { position: relative; z-index: 1; padding: 0 .9rem; text-align: center; white-space: nowrap;
    font: 600 .875rem/1 var(--font-schild); letter-spacing: .02em; color: var(--tinte); transition: color 250ms ease, opacity 250ms ease; }
  .stau .ventil .schalter-wort:last-child { opacity: .6; }
  .stau.z-offen .ventil .schalter-wort:last-child { opacity: 1; }
  .stau.z-offen .ventil .schalter-wort:nth-child(2) { opacity: .7; }
  @media (max-width: 760px) { .stau-rohr { margin-top: 0; justify-self: start; } }
}

@layer bausteine {
  /* Abschnitts-Link oben rechts über den Kacheln (statt Knopf unter dem Titel) */
  .abschnitt-link { display: flex; justify-content: flex-end; margin: 0 0 1rem; }
  .abschnitt-link .text-link { font-weight: 600; }

  /* Staustellen-Schalter: beide Hälften gleich breit (Text sitzt mittig in der Pille), Schrift grösser */
  .stau-rohr { margin-top: calc((var(--gr-zwischen) * 1.2 - 46px) / 2); }
  .stau .ventil { grid-template-columns: repeat(2, 6.25rem); height: 46px; padding: 4px; }
  .stau .ventil .schalter-knopf { height: 38px; width: 6.25rem; left: 4px; }
  .stau.z-offen .ventil .schalter-knopf { left: calc(4px + 6.25rem); }
  .stau .ventil .schalter-wort { display: flex; justify-content: center; align-items: center; height: 38px; padding: 0; font-size: 1.0625rem; line-height: 1; letter-spacing: 0; }

  /* Einstieg scrollt normal weg (kein Vorhang mehr: der Abschnitt darunter steht nicht mehr hinter dem Einstieg; Pascal, 03.10.) */
  .vorhang::after { display: none; }
  .vorhang > .einstieg + .abschnitt { position: relative; top: auto; margin-top: 0; }
}

@layer bausteine {
  /* Fuss ohne vollständige Sitemap (03.10.): Marke · fünf Hauptseiten · Kontakt */
  .fuss-raster { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(15rem, 1fr); gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: start; }
  .fuss-seiten ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
  .fuss-seiten a { font-weight: 600; color: var(--tinte); text-decoration: none; }
  .fuss-seiten a:hover { color: var(--mint-tief); }
  @media (max-width: 1100px) { .fuss-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fuss-marke { grid-column: 1 / -1; } }
  @media (max-width: 720px) { .fuss-raster { grid-template-columns: minmax(0, 1fr); } .fuss-raster > div:last-child { grid-column: auto; } }
}

@layer bausteine {
  /* ---------- Fuss (03.10.): keine Linkliste; oben Satz + Kontakt, unten gross das Logo links und die Rechtslinks rechts,
     dahinter weiche Farbwolken am unteren Rand */
  .fuss { padding-block: clamp(3.5rem, 2rem + 5vw, 6rem) clamp(1.75rem, 1rem + 2vw, 3rem); overflow: clip; }
  .fuss.hat-wolken { --w1: rgb(83 193 170 / .5); --w2: rgb(190 226 255 / .95); --w3: rgb(190 236 222 / .95); }
  .fuss .wolken span:nth-child(1) { left: -20%; top: auto; bottom: -70%; }
  .fuss .wolken span:nth-child(2) { right: -18%; bottom: -80%; }
  .fuss .wolken span:nth-child(3) { left: 28%; top: auto; bottom: -55%; }
  .fuss-oben { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 2rem 4rem; }
  .fuss-satz { margin: 0; max-width: 22ch; font: 400 var(--gr-lead)/1.35 var(--font); color: var(--tinte); text-wrap: balance; }
  .fuss-oben .fuss-kontakt { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
  .fuss-unten { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-top: clamp(3rem, 2rem + 6vw, 7rem); }
  .fuss-logo { display: block; line-height: 0; }
  .fuss-logo .logo-marke { width: clamp(15rem, 34vw, 30rem); height: auto; }
  .fuss-unten .fuss-leiste { display: grid; justify-items: end; gap: .6rem; margin: 0; padding: 0; border: 0; }
  @media (max-width: 720px) { .fuss-unten .fuss-leiste { justify-items: start; } .fuss-logo .logo-marke { width: min(78vw, 20rem); } }

  /* «Begleitend über alle Phasen» als deutlicher Zwischentitel (war zu klein und unscheinbar) */
  .lz-beg-titel { font: 600 var(--gr-zwischen)/1.2 var(--font); letter-spacing: -.01em; color: var(--tinte); }
  .lz-beg-reihe { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); gap: 1.1rem; }
}

@layer bausteine {
  /* Fuss, Anordnung 03.10. abends: Logo oben links, darunter der Satz (kleiner), rechts der Kontakt; unten © und Rechtslinks */
  .fuss-oben .fuss-marke { display: grid; gap: 1.4rem; justify-items: start; }
  .fuss-logo .logo-marke { width: clamp(12rem, 20vw, 17rem); height: auto; }
  .fuss-satz { max-width: 30ch; font: 400 1rem/1.5 var(--font); color: var(--tinte-weich); }
  .fuss > .fuss-leiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 2rem; margin-top: clamp(3rem, 2rem + 5vw, 6rem);
    padding-top: 0; border: 0; font-size: .9375rem; }
  @media (max-width: 720px) { .fuss-logo .logo-marke { width: min(70vw, 15rem); } }
  /* Styleguide: Schalter-Beispiel ohne Zeilen-Layout der Staustellen */
  .sg-stau { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; }
  .sg-stau .stau, .sg-stau .stau:last-child { display: block; padding: 0; border: 0; }
  .sg-stau .stau-rohr { margin: 0; }
}
@layer bausteine {
  /* Beim Messen und beim stillen Setzen (entwurf.js: messen(), still()) keine Breiten-/Farbübergänge der Felder –
     sonst schrumpfen sie nach dem Laden sichtbar von der Messbreite auf ihre Endbreite */
  .lz.z-still[data-lz] .lz-felder > .lz-feld, .lz.z-misst[data-lz] .lz-felder > .lz-feld { transition: none !important; }
}
@layer bausteine {
  /* Staustellen: Kundenlogo und «Mehr erfahren» unter der Lösung */
  .stau .stau-beleg { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.75rem; margin-top: 1.1rem; }
  .stau .stau-beleg .logo-rahmen { flex: none; }
  .stau .stau-beleg .logo-rahmen img { mix-blend-mode: multiply; }
  .stau .stau-beleg .text-link { font-weight: 600; }
}
@layer bausteine {
  /* Wissen: Leitfaden-Kreise ohne Kontur (gefüllt in der hellen Phasenfarbe), Linien bleiben fein */
  .w-st circle { stroke: none; fill: var(--ph-hell); }
  /* Glossar-Kachel: Begriffe wechseln schneller */
  .w-spur { animation-duration: 6.5s; }
}
@layer bausteine {
  /* Staustellen: Kundenlogo über dem Lösungstitel, «Mehr erfahren» linksbündig darunter. Damit Problem- und Lösungstitel
     auf gleicher Höhe bleiben, rücken Problem und Schalter am Desktop um die Logozeile (--logo-raum) nach unten. */
  .stau { --logo-raum: calc(40px + .9rem); }
  .stau-kunde { display: flex; align-items: flex-end; height: 40px; margin: 0 0 .9rem; }
  .stau-kunde .logo-rahmen { flex: none; }
  .stau-kunde .logo-rahmen img { mix-blend-mode: multiply; }
  .stau .stau-beleg { display: block; margin-top: 1rem; }
  .stau-problem { padding-top: var(--logo-raum); }
  .stau-rohr { margin-top: calc(var(--logo-raum) + (var(--gr-zwischen) * 1.2 - 46px) / 2); }
  @media (max-width: 760px) { .stau-problem { padding-top: 0; } .stau-rohr { margin-top: 0; } .stau-kunde { margin-top: .4rem; } }
}
@layer bausteine {
  /* Phasen-Boxen: kurzer Thementitel oben in jeder Box; Referenz-Box mit gleichem Innenabstand wie die anderen
     (Bild, Titel und Link so breit wie die Texte nebenan) */
  .lz-k-titel { margin: 0; font: 600 clamp(1.125rem, 1rem + .4vw, 1.3125rem)/1.2 var(--font); letter-spacing: -.01em; color: var(--tinte); }
  .lz[data-lz] .lz-kachel { gap: .9rem; }
  .lz[data-lz] .lz-k-ref { padding: 1.5rem; }
  @media (max-width: 760px) { .lz[data-lz] .lz-k-ref { padding: 1.25rem; } }
}

@layer bausteine {
  /* Einstieg: kräftigere Wolken, die auf die Maus reagieren (entwurf.js, einstiegWolken). Die drei Wolken weichen
     unterschiedlich stark aus (translate liegt neben der Treib-Animation, die transform nutzt); eine helle Wolke folgt dem Zeiger. */
  .einstieg.hat-wolken { --w1: rgb(255 255 255 / .46); --w2: rgb(12 92 76 / .42); --w3: rgb(255 255 255 / .3); }
  .einstieg .wolken span { translate: calc(var(--zx, 0) * var(--zug, 0px)) calc(var(--zy, 0) * var(--zug, 0px)); }
  .einstieg .wolken span:nth-child(1) { --zug: -60px; }
  .einstieg .wolken span:nth-child(2) { --zug: 80px; }
  .einstieg .wolken span:nth-child(3) { --zug: -120px; }
  .einstieg .wolken::after { content: ""; position: absolute; left: 0; top: 0; width: 46vmax; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgb(255 255 255 / .42) 0%, rgb(255 255 255 / .34) 22%, rgb(255 255 255 / .18) 48%, rgb(255 255 255 / .06) 74%, rgb(255 255 255 / 0) 100%);
    translate: calc(var(--px, 50vw) - 50%) calc(var(--py, 30vh) - 50%); opacity: 0; transition: opacity 700ms var(--ease-out); }
  .einstieg .wolken.z-maus::after { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .einstieg .wolken::after { display: none; } }
}

@layer bausteine {
  /* ---------- Offene Phase flacher (Pascal, 03.10.): Referenzbild als flaches Band, Schwerpunkte einzeln zum Durchblättern */
  .lz[data-lz] .lz-k-ref .lz-ref { flex: 1 1 auto; display: flex; flex-direction: column; gap: .7rem; min-height: 0; }
  .lz[data-lz] .lz-ref .ref-foto { aspect-ratio: auto; flex: 1 1 5.5rem; min-height: 5.5rem; width: 100%; align-self: stretch; }   /* Bild über die ganze Breite */
  .lz[data-lz] .lz-ref .ref-negativ { max-height: 2.4rem; }
  .lz[data-lz] .lz-kachel > * { flex: none; }
  @media (min-width: 761px) { .lz[data-lz] .lz-klappe-innen { align-content: stretch; } }   /* Boxen füllen die Klappe (--lz-h) ganz: gleiche Fuge zum nächsten Feld bei jeder Phase */
  .lz[data-lz] .lz-k-ref > .lz-ref { flex: 1 1 auto; }

  /* Schwerpunkte als Slider (entwurf.js setzt .z-slider): alle Punkte liegen übereinander, einer ist sichtbar.
     Ohne JS bleibt die Liste, Vorlesehilfen lesen weiterhin alle Punkte. */
  .z-slider { cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
  .z-slider .lz-punkte { display: grid; gap: 0; }
  .z-slider .lz-punkte > li { grid-area: 1 / 1; align-self: start; opacity: 0; translate: calc(var(--x, 1) * 1.75rem) 0; pointer-events: none;
    transition: opacity 220ms ease, translate 560ms var(--feder-standard); }
  .z-slider .lz-punkte > li.z-da { opacity: 1; translate: 0 0; pointer-events: auto; transition-delay: 70ms; }
  /* ein Punkt aufs Mal: gross und plakativ */
  .z-slider .lz-punkte > li { gap: .7rem; font: 500 clamp(1.375rem, 1.2rem + .6vw, 1.625rem)/1.22 var(--font); letter-spacing: -.012em; }
  .z-slider .lz-punkte .haken { display: none; }   /* ohne Häkchen: der eine Punkt steht für sich (Pascal, 03.10.) */
  .z-slider .lz-punkte .lz-drei { font: 400 1.125rem/1.4 var(--font); letter-spacing: 0; }   /* TIM Flow: ganze Sätze, darum kleiner */
  .z-slider .lz-punkte .lz-drei b { font-weight: 600; }
  /* Statusleiste: ein Segment je Punkt, das aktive ist länger und füllt sich, bis der nächste Punkt kommt */
  .lz-status { display: flex; gap: .4rem; margin-top: auto; }
  .lz-seg { all: unset; box-sizing: border-box; flex: 1 1 0; display: grid; align-items: center; height: 1.5rem; cursor: pointer;
    transition: flex-grow 560ms var(--feder-standard); -webkit-tap-highlight-color: transparent; }
  .lz-seg span { display: block; height: 4px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--ph) 20%, transparent); transition: background-color 200ms; }
  .lz-seg:hover span { background: color-mix(in srgb, var(--ph) 38%, transparent); }
  .lz-seg i { display: block; height: 100%; border-radius: inherit; background: var(--ph); transform-origin: 0 50%; transform: scaleX(0); }
  .lz-seg.z-da { flex-grow: 2.6; }
  .lz-seg.z-da i { transform: scaleX(1); }
  .lz-seg:focus-visible { outline: 2px solid var(--tinte); outline-offset: 1px; border-radius: var(--pille); }
  @keyframes lz-seg-lauf { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @media (prefers-reduced-motion: no-preference) {
    .lz-klappe.z-auf .lz-seg.z-da i { animation: lz-seg-lauf 5.2s linear both; }
    /* wer selbst blättert (Maus darüber, Tastatur darin), hält den Lauf an: das Segment steht voll */
    .z-slider:focus-within .lz-seg.z-da i { animation: none; }
    @media (hover: hover) { .z-slider:hover .lz-seg.z-da i { animation: none; } }
  }
  @media (prefers-reduced-motion: reduce) { .z-slider .lz-punkte > li, .lz-seg { transition: none; } }
  .mit-zeiger .z-slider, .mit-zeiger .z-slider * { cursor: none; }
  .mit-zeiger .z-slider .lz-seg, .mit-zeiger .z-slider .lz-seg * { cursor: pointer; }

  /* Zuklappen per Scroll (entwurf.js, schrumpfen): die Boxen werden wirklich niedriger statt abgedeckt – Text kürzt sich
     zeilenweise mit «…», das Bild wird flacher, zuletzt fallen Knopf und Leiste weg */
  .lz-kachel.z-eng { overflow: hidden; min-height: 0; }
  /* gegen Ende zieht sich das ganze Feld (Titelbalken samt Boxen) auf die schmale Breite der geschlossenen Felder zusammen
     (--schmal 0…1 aus entwurf.js) – so liegt es danach deckungsgleich im Stapel */
  @media (min-width: 901px) {
    .lz[data-lz] .lz-felder > .lz-feld.z-offen.z-zieht { transition: none;
      margin-inline: max(0px, (100% - (var(--lz-offen) - (var(--lz-offen) - var(--lz-schmal)) * var(--schmal, 0))) / 2); }
  }
  :is(.lz-lead, .lz-ref-text b).z-kurz, .lz-punkte.z-kurz > li > span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--zeilen, 1); overflow: hidden; }

  /* ---------- Farbwolken hinter den Phasen: fünf Wolken in den fünf Phasenfarben, ganz dezent (Pascal, 03.10.) */
  .wolken.wolken-phasen span { --wf: color-mix(in srgb, var(--ph-hell) 80%, transparent); --wg: 46vmax; right: auto; bottom: auto; }   /* helle Phasenfarbe: sauberes Pastell statt Grauschleier */
  /* oben und unten weich auslaufen: sonst schneidet der Abschnittsrand die Wolken mit harter Kante ab. Als zwei weisse
     Verläufe über den Wolken statt als Maske – die Maske musste bei jeder Höhenänderung (Aufklappen) neu gerechnet werden
     und liess das Aufklappen am Handy stocken. */
  .wolken-phasen::before, .wolken-phasen::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; pointer-events: none; }
  .wolken-phasen::before { top: 0; height: 14rem; background: linear-gradient(to bottom, var(--papier), color-mix(in srgb, var(--papier) 87%, transparent) 21%,
    color-mix(in srgb, var(--papier) 50%, transparent) 50%, color-mix(in srgb, var(--papier) 13%, transparent) 79%, transparent); }
  .wolken-phasen::after { bottom: 0; height: 20rem; background: linear-gradient(to top, var(--papier), color-mix(in srgb, var(--papier) 87%, transparent) 22%,
    color-mix(in srgb, var(--papier) 50%, transparent) 52%, color-mix(in srgb, var(--papier) 13%, transparent) 80%, transparent); }
  .wolken.wolken-phasen span:nth-child(1) { left: -14%; top: -8%; --wd: 26s; }
  .wolken.wolken-phasen span:nth-child(2) { left: 58%; top: 4%; --wd: 31s; animation-delay: -9s; --wg: 52vmax; }
  .wolken.wolken-phasen span:nth-child(3) { left: 14%; top: 34%; --wd: 23s; animation-delay: -14s; --wg: 42vmax; }
  .wolken.wolken-phasen span:nth-child(4) { left: 62%; top: 52%; --wd: 29s; animation-delay: -5s; }
  .wolken.wolken-phasen span:nth-child(5) { left: -10%; top: 68%; --wd: 25s; animation-delay: -18s; --wg: 50vmax; }
}

@layer bausteine {
  /* Handy: Abstand zwischen den Phasen kleiner (Pascal, 04.10.). Die geschlossene Klappe war noch 10 px hoch (Innenabstand
     hielt die 0fr-Zeile offen) – mit minmax(0, …) fällt sie ganz zusammen; dazu die Fuge wie zwischen den Boxen. */
  @media (max-width: 760px) {
    .js .lz[data-lz] .lz-klappe { grid-template-rows: minmax(0, 0fr); }
    .js .lz[data-lz] .lz-klappe.z-auf { grid-template-rows: minmax(0, 1fr); }
    .lz[data-lz] .lz-felder { gap: .6rem; }
  }
}

@layer bausteine {
  /* ---------- Startseite schmal (Pascal, 04.10.): der Einstieg füllt das Fenster, unten in der Mitte eine bewegte
     Scroll-Aufforderung (Pille mit laufendem Punkt; führt zu den fünf Phasen, verschwindet nach dem ersten Scrollen) */
  .scroll-hinweis { display: none; }
  @media (max-width: 900px) {
    .seite-start .vorhang > .einstieg { display: grid; align-items: center; min-height: 100vh; min-height: 100svh; padding-bottom: 6.5rem; }
    .scroll-hinweis { display: grid; place-items: center; position: absolute; z-index: 1; left: 50%; bottom: max(1.1rem, env(safe-area-inset-bottom)); translate: -50% 0;
      width: 2.75rem; height: 3.5rem; color: #fff; transition: opacity 300ms ease; -webkit-tap-highlight-color: transparent; }
    .scroll-hinweis.z-weg { opacity: 0; pointer-events: none; }
    .scroll-hinweis:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 100px; }
    .scroll-pille { position: relative; display: block; width: 24px; height: 40px; border-radius: 100px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .9); }
    .scroll-pille i { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: #fff; }
  }
  @media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
    .scroll-pille i { animation: scroll-lauf 1.9s cubic-bezier(.45, 0, .2, 1) infinite; }
  }
  @keyframes scroll-lauf { 0% { transform: translateY(0); opacity: 0; } 18% { opacity: 1; } 62% { transform: translateY(14px); opacity: 1; } 88%, 100% { transform: translateY(18px); opacity: 0; } }
  /* Handy: Icon über dem Titel statt daneben (neben dem Titel wurde es knapp) – so kann der Titel grösser stehen; alles mittig */
  @media (max-width: 600px) {
    .seite-start .einstieg { --gr-plakat: clamp(3.2rem, 17.5vw, 4.6rem); }
    .einstieg-titel { flex-direction: column; align-items: center; gap: 1.2rem; }
    .einstieg-titel h1 { text-align: center; }
    .einstieg h1 .tipp { margin-inline: auto; }
    .e-zeichen { width: calc(var(--gr-plakat) * 1.45); margin-top: 0; }
  }
  /* kleine Handys: enger, damit Knöpfe und Scroll-Aufforderung ins erste Bild passen */
  @media (max-width: 600px) and (max-height: 720px) {
    .seite-start .vorhang > .einstieg { padding-top: calc(var(--kopf-hoehe) + 1rem); padding-bottom: 5rem; }
    .e-zeichen { width: calc(var(--gr-plakat) * 1.1); }
    .einstieg-titel { gap: .9rem; }
    .scroll-hinweis { bottom: .5rem; }
  }
}

@layer bausteine {
  /* ---------- Handy: die drei Boxen einer offenen Phase liegen nebeneinander und lassen sich seitwärts wischen
     (Scroll-Snap, die nächste Box schaut an), darunter Punkte als Lage-Anzeige (entwurf.js baut .lz-seiten).
     So ist die offene Phase kurz statt drei Boxen hoch. Am Desktop ist .lz-reihe unsichtbar (display: contents). */
  .lz-reihe { display: contents; }
  .lz-seiten { display: none; }
  @media (max-width: 760px) {
    .lz[data-lz] .lz-klappe-innen { gap: 0; }
    .lz[data-lz] .lz-klappe-innen > .lz-reihe { margin: 0; }
    .lz-reihe { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: .6rem; min-width: 0; overflow-x: auto; overflow-y: hidden;
      overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .lz-reihe::-webkit-scrollbar { display: none; }
    .lz-reihe > .lz-kachel { scroll-snap-align: start; min-width: 0; }
    .lz-seiten { display: flex; justify-content: center; padding: .2rem 0 0; }
    .lz-seite { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 2rem; height: 2rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .lz-seite::before { content: ""; width: 8px; height: 8px; border-radius: 100px; background: color-mix(in srgb, var(--ph) 28%, transparent);
      transition: width 360ms var(--feder-standard), background-color 200ms; }
    .lz-seite[aria-current="true"]::before { width: 22px; background: var(--ph); }
    .lz-seite:focus-visible { outline: 2px solid var(--tinte); outline-offset: -4px; border-radius: 100px; }
    /* seitwärts wischen gehört hier dem Karussell: die Schwerpunkte blättern per Tipp links/rechts, Leiste oder von selbst */
    .z-slider { touch-action: auto; }
  }
}

/* Stapel-Werte aus entwurf.js (decken): nicht vererben – sonst rechnet der Browser bei jedem Scroll-Bild den Stil aller
   Kinder jedes Felds neu. Das Pseudo-Element (weisser Schleier) holt sich den Wert ausdrücklich. */
@property --deckung { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --ein { syntax: "<number>"; inherits: false; initial-value: 1; }
@layer bausteine {
  .lz[data-lz] .lz-felder > .lz-feld::after { --deckung: inherit; }
}

@layer bausteine {
  /* ---------- Handy-Menü (Pascal, 05.10.): «Leistungen» ist eingeklappt; offen stehen die Leistungen als Kacheln in den
     Phasenfarben, geordnet wie im Desktop-Menü (fünf Phasen, dann die begleitenden) */
  @media all {
    .mobil .mobil-auf { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .8rem 0;
      font: 600 1.375rem/1.5 var(--font); color: var(--tinte); border-bottom: var(--strich) solid var(--linie); cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .mobil .mobil-auf .ico { width: 1.35rem; height: 1.35rem; transition: rotate var(--dauer-lebhaft) var(--feder-lebhaft); }
    .mobil-gruppe.z-offen .mobil-auf .ico { rotate: 180deg; }
    .mobil .mobil-auf:focus-visible { outline: 3px solid var(--mint-tief); outline-offset: 2px; border-radius: var(--pille); }
    .mobil-klappe { display: grid; grid-template-rows: minmax(0, 0fr); transition: grid-template-rows 460ms cubic-bezier(.2, .9, .3, 1); }
    .mobil-gruppe.z-offen .mobil-klappe { grid-template-rows: minmax(0, 1fr); }
    .mobil-klappe > div { min-height: 0; overflow: hidden; }
    .mobil-gruppe.z-offen .mobil-auf { border-bottom-color: transparent; }
    .mobil-klappe .nav-titel { margin: .35rem 0 .5rem; }
    .mobil-klappe .mobil-raster + .nav-titel { margin-top: 1.1rem; }
    .mobil .mobil-raster { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
    .mobil .mobil-raster a { display: flex; align-items: center; gap: .75rem; padding: .45rem .9rem .45rem .5rem; border: 0; border-radius: var(--pille);
      background: var(--ph-hell); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; color: var(--tinte); }
    .mobil .mobil-raster b { font-weight: 600; }
    .mobil .mobil-raster .mini-station { width: 42px; height: 42px; background: none; color: var(--ph); }
    .mobil .mobil-raster .mini-station svg { width: 26px; height: 26px; }
    .mobil .mobil-klappe .text-link { display: inline-flex; width: fit-content; margin: .9rem 0 1.1rem; padding: .3rem 0; border: 0; font-size: 1rem; font-weight: 600; color: var(--mint-tief); }
    /* Auftritt: die Kacheln steigen nacheinander ein */
    .mobil-gruppe.z-offen .mobil-raster li { animation: menue-eintrag 480ms cubic-bezier(0.32, 0.72, 0, 1) both; animation-delay: calc(60ms + var(--i, 0) * 28ms); }
    @media (prefers-reduced-motion: reduce) { .mobil-klappe { transition: none; } .mobil-gruppe.z-offen .mobil-raster li { animation: none; } }
  }
}

@layer bausteine {
  /* ---------- Hell/Dunkel-Schalter im Kopf (Pascal, 05.10.): Sonne wird Mond. Farben der dunklen Darstellung: dunkel.css */
  .thema-knopf { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: var(--pille); background: var(--zone); color: var(--tinte);
    cursor: pointer; transition: background-color 250ms var(--ease-out), color 400ms var(--ease-out), scale 548ms var(--feder-knopf); -webkit-tap-highlight-color: transparent; }
  .thema-knopf:active { scale: .92; }
  .thema-knopf:focus-visible { outline: 3px solid var(--mint-tief); outline-offset: 2px; }
  .thema-knopf svg { width: 1.375rem; height: 1.375rem; overflow: visible; }
  .thema-knopf .t-kern { fill: currentColor; transform-box: fill-box; transform-origin: 50% 50%; transition: scale 520ms var(--feder-standard); }
  .thema-knopf .t-schatten { transition: translate 520ms var(--feder-standard); }
  .thema-knopf .t-strahlen { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transform-box: view-box; transform-origin: 12px 12px; transition: rotate 620ms var(--feder-standard), scale 420ms var(--feder-standard), opacity 200ms ease; }
  :root[data-thema="dunkel"] .thema-knopf .t-kern { scale: 1.55; }
  :root[data-thema="dunkel"] .thema-knopf .t-schatten { translate: -8.5px 3.5px; }
  :root[data-thema="dunkel"] .thema-knopf .t-strahlen { rotate: 90deg; scale: .3; opacity: 0; }
  .seite-start .kopf:not(.z-hell, .z-menue-zu, :has(.burger[aria-expanded="true"])) .thema-knopf { background: rgb(255 255 255 / .16); color: #fff; }
  .seite-start .kopf:not(.z-hell, .z-menue-zu, :has(.burger[aria-expanded="true"])) .thema-knopf:focus-visible { outline-color: #fff; }
  .kopf-zeile .thema-knopf { margin-left: auto; }
  .kopf-zeile .thema-knopf + .kopf-cta { margin-left: 0; }
  @media all { .thema-knopf { width: 48px; height: 48px; border-radius: 0; } .kopf-zeile .thema-knopf + .kopf-cta + .burger, .kopf-zeile .burger { margin-left: 0; } .kopf-zeile { gap: .5rem; } }
  @media (prefers-reduced-motion: reduce) { .thema-knopf :is(.t-kern, .t-schatten, .t-strahlen) { transition: none; } }
  /* weicher Wechsel der ganzen Seite */
  ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
}

@layer bausteine {
  /* Stapel: ganz überdeckte Felder ausblenden (entwurf.js, decken) – nichts schaut darunter hervor */
  .lz[data-lz] .lz-felder > .lz-feld.z-bedeckt { visibility: hidden; }
}


@layer bausteine {
  /* Handy: Punkte unter den aufgeklappten Boxen – enger, Anzeiger als federnder «Wurm» (entwurf.js, setzeWurm) */
  @media (max-width: 760px) {
    .lz-seiten { position: relative; width: max-content; margin-inline: auto; gap: 0; }
    .lz-seite { width: 1.25rem; height: 2rem; }
    .lz-seite::before, .lz-seite[aria-current="true"]::before { width: 7px; height: 7px; background: color-mix(in srgb, var(--ph) 30%, transparent); transition: scale 300ms var(--feder-lebhaft); }
    .lz-seite:active::before { scale: .7; }
    .lz-wurm { position: absolute; top: 50%; left: var(--l, 0); right: var(--r, 100%); height: 7px; margin-top: calc(.1rem - 3.5px); border-radius: 100px;
      background: var(--ph); pointer-events: none;
      transition: left 520ms var(--feder-lebhaft) var(--dl, 0ms), right 520ms var(--feder-lebhaft) var(--dr, 0ms); }
    .lz-wurm.z-sofort { transition: none; }
    .lz-wurm.z-tupf { animation: lz-wurm-tupf 560ms var(--feder-lebhaft); }
  }
  @keyframes lz-wurm-tupf { 0% { scale: 1 1; } 35% { scale: 1 .7; } 100% { scale: 1 1; } }
  @media (prefers-reduced-motion: reduce) { .lz-wurm { transition: none; animation: none !important; } }
}

@layer bausteine {
  /* Statuspunkte der Schwerpunkte (Pascal 05.10.): echte Punkte, eng beisammen; der aktive streckt sich mit Feder zur Pille
     und füllt sich (Material-Seitenanzeige). Wechsel und Wurm am Handy mit der Sprungfeder. */
  .lz-status { gap: 5px; justify-content: flex-start; }
  .lz-seg { flex: 0 0 auto; width: 8px; height: 1.5rem; transition: width var(--dauer-sprung, 700ms) var(--feder-sprung, var(--feder-lebhaft)); }
  .lz-seg span { height: 8px; border-radius: 100px; transition: background-color 200ms, scale 320ms var(--feder-sprung, var(--feder-lebhaft)); }
  .lz-seg.z-da { flex-grow: 0; width: 34px; }
  .lz-seg:active span { scale: .75; }
  @media (max-width: 760px) {
    .lz-wurm { transition: left var(--dauer-sprung, 700ms) var(--feder-sprung, var(--feder-lebhaft)) var(--dl, 0ms),
      right var(--dauer-sprung, 700ms) var(--feder-sprung, var(--feder-lebhaft)) var(--dr, 0ms); }
    .lz-wurm.z-tupf { animation: lz-wurm-tupf var(--dauer-sprung, 700ms) var(--feder-sprung, var(--feder-lebhaft)); }
    .lz-seite { width: 1rem; }
  }
}

@layer bausteine {
  /* Handy: Schwerpunkte blättern nicht von selbst (Pascal 05.10.) – der aktive Punkt steht gefüllt, weiter nur per Wischen/Tippen */
  @media (max-width: 760px) {
    .lz-klappe.z-auf .lz-seg.z-da i { animation: none; transform: scaleX(1); }
  }
}

@layer bausteine {
  /* Handy: Punkte unter den Boxen im Stil der Schwerpunkt-Punkte (Pascal 05.10.): 8-px-Punkte, 5 px Abstand, der aktive
     wird mit Feder zur dunklen Pille – ohne Auffüllen, weil nichts von selbst weiterläuft */
  @media (max-width: 760px) {
    .lz-wurm { display: none; }
    .lz-seiten { gap: 5px; }
    .lz-seite { width: auto; height: 2rem; padding: 0; }
    .lz-seite::before { width: 8px; height: 8px; background: color-mix(in srgb, var(--ph) 30%, transparent);
      transition: width var(--dauer-sprung, 700ms) var(--feder-sprung, var(--feder-lebhaft)), background-color 200ms, scale 300ms var(--feder-lebhaft); }
    .lz-seite[aria-current="true"]::before { width: 34px; height: 8px; background: var(--ph); }
  }
}

@layer bausteine {
  /* Statusanzeige ohne Nachhinken (05.10.): Handy-Punkte folgen dem Wischen direkt (--w aus entwurf.js, keine Übergänge),
     Desktop-Punkte mit kurzer, lebhafter Feder statt der 1,4 s langen Sprungfeder */
  @media (max-width: 760px) {
    .lz-seite::before, .lz-seite[aria-current="true"]::before { width: calc(8px + 26px * var(--w, 0)); background: var(--ph);
      opacity: calc(.3 + .7 * var(--w, 0)); transition: scale 300ms var(--feder-lebhaft); }
  }
  .lz-seg { transition: width 480ms var(--feder-lebhaft); }
}

@layer bausteine {
  /* Einstieg-Wolken sanfter (Pascal 06.10.): halbe Ausweichwege, Zeiger-Wolke grösser, schwächer und weicher, langsamer ein/aus */
  .einstieg .wolken span:nth-child(1) { --zug: -30px; }
  .einstieg .wolken span:nth-child(2) { --zug: 40px; }
  .einstieg .wolken span:nth-child(3) { --zug: -60px; }
  .einstieg .wolken::after { width: 60vmax;
    background: radial-gradient(closest-side, rgb(255 255 255 / .2) 0%, rgb(255 255 255 / .15) 30%, rgb(255 255 255 / .07) 60%, rgb(255 255 255 / 0) 100%);
    transition: opacity 1400ms var(--ease-out); }
}

@layer bausteine {
  /* Scroll-Hinweis als Pfeil statt Scrollrad (Pascal 06.10.): wippt ruhig nach unten */
  @media (max-width: 900px) {
    .scroll-pfeil { width: 28px; height: 28px; }
  }
  @media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
    .scroll-pfeil { animation: scroll-wippen 2.2s cubic-bezier(.45, 0, .55, 1) infinite; }
  }
  @keyframes scroll-wippen { 0%, 100% { transform: translateY(-3px); opacity: .75; } 50% { transform: translateY(5px); opacity: 1; } }
}

@layer bausteine {
  /* Statuspunkte mit sichtbarer Sprungfeder, aber kürzer als die 1,4-s-Feder (sonst hinkt es nach) */
  .lz-seg { transition: width 760ms var(--feder-sprung, var(--feder-lebhaft)); }
  /* Links in den Phasen-Boxen einheitlich in der Phasenfarbe */
  .lz[data-lz] .lz-kachel .text-link { color: var(--ph); }
  .stau .ventil .schalter-knopf { box-shadow: none; }
}

@layer bausteine {
  /* Einstieg am Handy: beide Knöpfe gleich breit (so breit wie der längere), mittig (Pascal, 06.10.) */
  @media (max-width: 600px) {
    .einstieg-text:has(.e-zeichen) .knopfreihe { display: inline-grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; max-width: 100%; }
    .einstieg-text:has(.e-zeichen) .knopfreihe .knopf { justify-content: center; }
  }
  /* Schwerpunkte plakativer (Pascal, 06.10.): grösser und kräftiger, in der Höhe mittig zwischen Titel und Statuspunkten */
  .lz[data-lz] .lz-kachel.z-slider > .lz-punkte { flex: 1 1 auto; min-height: 0; align-content: center; }
  .z-slider .lz-punkte > li { align-self: center; font: 600 clamp(1.5rem, 1.25rem + .9vw, 2rem)/1.12 var(--font); letter-spacing: -.025em; text-wrap: balance; }
  .z-slider .lz-punkte .lz-drei { font: 500 clamp(1.125rem, 1.05rem + .3vw, 1.3125rem)/1.3 var(--font); letter-spacing: -.01em; text-wrap: pretty; }
}

@layer bausteine {
  /* Schalter Problem/Lösung: der Knopf ist nur aussen rund; zur Mitte hin gerade mit ganz leicht gerundeten Ecken (Pascal, 06.10.) */
  .stau .ventil .schalter-knopf { border-radius: 100px 5px 5px 100px; transition: left 420ms cubic-bezier(.22, 1, .36, 1), border-radius 420ms cubic-bezier(.22, 1, .36, 1); }
  .stau.z-offen .ventil .schalter-knopf { border-radius: 5px 100px 100px 5px; }
  @media (prefers-reduced-motion: reduce) { .stau .ventil .schalter-knopf { transition: none; } }
}

@layer bausteine {
  /* Phasen und Maus (entwurf.js, phasenKippen; --nah 0…1, --gx/--gy Lage des Zeigers in %): Farbwolken in der Box,
     dazu eine glänzende Kontur – ein Lichtfleck läuft auf dem Rand mit dem Zeiger. Kein Neigen mehr. */
  .lz-schein { display: none; }
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .lz-schein { display: block; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; opacity: var(--nah, 0); }
    /* Wolken: Phasenfarbe am Zeiger, Mint und Blau versetzt dazu, ganz weich */
    .lz-schein::before { content: ""; position: absolute; inset: 0; border-radius: inherit; mix-blend-mode: multiply;
      background:
        radial-gradient(circle 220px at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--ph) 22%, transparent), transparent 70%),
        radial-gradient(circle 180px at calc(var(--gx, 50%) + 22%) calc(var(--gy, 50%) - 40%), rgb(83 193 170 / .22), transparent 70%),
        radial-gradient(circle 200px at calc(var(--gx, 50%) - 26%) calc(var(--gy, 50%) + 45%), rgb(96 140 230 / .14), transparent 70%); }
    /* glänzende Kontur: nur der Rand (Maske), hell am Zeiger, läuft in Phasenfarbe aus */
    .lz-schein::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; opacity: var(--glanz, 0);
      background: radial-gradient(circle 260px at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / .85), rgb(255 255 255 / .35) 40%, rgb(255 255 255 / 0) 80%);
      -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
    :root[data-thema="dunkel"] .lz-schein::before { mix-blend-mode: screen;
      background:
        radial-gradient(circle 220px at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--ph) 45%, transparent), transparent 70%),
        radial-gradient(circle 180px at calc(var(--gx, 50%) + 22%) calc(var(--gy, 50%) - 40%), rgb(83 193 170 / .18), transparent 70%),
        radial-gradient(circle 200px at calc(var(--gx, 50%) - 26%) calc(var(--gy, 50%) + 45%), rgb(96 140 230 / .14), transparent 70%); }
  }
}

@layer bausteine {
  /* Schalter Problem/Lösung (Pascal 11.10.): ohne Federn, Innenecken wie die Knöpfe (--pille) */
  .stau .ventil .schalter-knopf { border-radius: 100px var(--pille, 4px) var(--pille, 4px) 100px;
    transition: left 380ms cubic-bezier(.4, 0, .2, 1), border-radius 380ms cubic-bezier(.4, 0, .2, 1); }
  .stau.z-offen .ventil .schalter-knopf { border-radius: var(--pille, 4px) 100px 100px var(--pille, 4px); }
}

@layer bausteine {
  /* offene Phase: Farbwolken nur noch als Hauch (auf der dunklen Fläche wirkten sie zu stark) – Glanz bleibt */
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .lz-feld.z-offen .lz-schein::before { opacity: .22; }
  }
}

@layer bausteine {
  /* Hover der geschlossenen Phasen: die dunklere Farbe breitet sich als Kreis vom Zeiger aus und zieht sich zum
     Austrittspunkt zurück (entwurf.js setzt --hx/--hy und .z-hover) – statt sofort umzuschalten */
  .lz[data-lz] .lz-feld:not(.z-offen) .lz-titel:hover { background: var(--ph-hell); }
  .lz[data-lz] .lz-titel::after { content: ""; position: absolute; z-index: -1; left: var(--hx, 50%); top: var(--hy, 50%); width: 230%; aspect-ratio: 1;
    border-radius: 50%; background: color-mix(in srgb, var(--ph-hell) 84%, var(--ph)); translate: -50% -50%; transform: scale(0);
    transition: transform 520ms cubic-bezier(0.33, 1, 0.68, 1); pointer-events: none; }
  .lz[data-lz] .lz-feld:not(.z-offen) .lz-titel.z-hover::after { transform: scale(1); transition-duration: 700ms; }
  .lz[data-lz] .lz-feld.z-offen .lz-titel::after { transform: scale(0); transition-duration: 200ms; }
  @media (prefers-reduced-motion: reduce) { .lz[data-lz] .lz-titel::after { transition: none; } }
}

@layer bausteine {
  /* Hover-Kreis mit weichem Rand: Verlauf statt harter Kante; grösser, damit die Box trotzdem ganz gefüllt wird */
  .lz[data-lz] .lz-titel::after { width: 330%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--ph-hell) 84%, var(--ph)) 62%, color-mix(in srgb, color-mix(in srgb, var(--ph-hell) 84%, var(--ph)) 0%, transparent) 100%); }
}

@layer bausteine {
  /* Schalter: Innenecken deutlicher gerundet (4 px waren bei dieser Grösse kaum zu sehen; Pascal 11.10.) */
  .stau .ventil .schalter-knopf { border-radius: 100px 10px 10px 100px; }
  .stau.z-offen .ventil .schalter-knopf { border-radius: 10px 100px 100px 10px; }
}

@layer bausteine {
  /* Glanz in der offenen Phase: um jede Kachel einzeln (entwurf.js setzt --kglanz/--kgx/--kgy), weich ein- und ausblendend */
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .lz[data-lz] .lz-kachel::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none;
      opacity: var(--kglanz, 0); transition: opacity 300ms ease;
      background: radial-gradient(circle 220px at var(--kgx, 50%) var(--kgy, 50%), rgb(255 255 255 / .85), rgb(255 255 255 / .35) 40%, rgb(255 255 255 / 0) 80%);
      -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
  }
}

@layer bausteine {
  /* Darkmode: Wolken in den Phasen deutlich transparenter (Pascal 11.10.) */
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    :root[data-thema="dunkel"] .lz-schein::before { opacity: .4; }
    :root[data-thema="dunkel"] .lz-feld.z-offen .lz-schein::before { opacity: .12; }
  }
}

@layer bausteine {
  /* Offene Phase (Pascal 11.10.): Wolken nicht über das ganze Feld, sondern nur in der Kachel unter dem Zeiger –
     an deren Rändern abgeschnitten (gleiche Werte --kgx/--kgy/--kglanz wie der Kachel-Glanz) */
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .lz-feld.z-offen .lz-schein::before, :root[data-thema="dunkel"] .lz-feld.z-offen .lz-schein::before { opacity: 0; }
    .lz[data-lz] .lz-kachel { overflow: hidden; }
    .lz[data-lz] .lz-kachel::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
      opacity: calc(var(--kglanz, 0) * .8); transition: opacity 400ms ease; mix-blend-mode: multiply;
      background:
        radial-gradient(circle 200px at var(--kgx, 50%) var(--kgy, 50%), color-mix(in srgb, var(--ph) 20%, transparent), transparent 70%),
        radial-gradient(circle 160px at calc(var(--kgx, 50%) + 30%) calc(var(--kgy, 50%) - 35%), rgb(83 193 170 / .18), transparent 70%); }
    :root[data-thema="dunkel"] .lz[data-lz] .lz-kachel::before { mix-blend-mode: screen; opacity: calc(var(--kglanz, 0) * .35); }
    .lz[data-lz] .lz-kachel > * { position: relative; z-index: 1; }
  }
}

@layer bausteine {
  /* Phasen-Leiste auf den Leistungsseiten im Stil der neuen Phasen-Boxen (Pascal 11.10.): Anordnung bleibt (fünf in einer
     Reihe, Rückfluss-Klammer darüber), jede Phase als flache Box in ihrer hellen Farbe, Icon ohne Kreis, aktuelle Seite in
     voller Phasenfarbe. Hover: Farbe breitet sich vom Zeiger aus (gleiche Technik wie die Phasen, --hx/--hy aus entwurf.js). */
  .lz-nav .lz-leiste { --lz-oben: 4.4rem; column-gap: .6rem; }
  .lz-nav .lz-schritt { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
    gap: 1.4rem; min-height: 8.5rem; padding: 1.1rem 1.15rem 1.15rem; border-radius: var(--pille); background: var(--ph-hell); text-align: left; }
  .lz-nav .lz-kr, .lz-nav .lz-schritt:is([aria-current="page"]) .lz-kr { width: auto; height: auto; border-radius: 0; background: none; color: var(--ph); box-shadow: none; outline: none; scale: none; }
  .lz-nav .lz-kr svg { width: 34px; height: 34px; }
  .lz-nav .lz-kr b { display: none; }
  .lz-nav .lz-name { max-width: none; text-align: left; font: 600 clamp(1rem, .95rem + .25vw, 1.125rem)/1.2 var(--font); letter-spacing: -.01em; color: var(--tinte); hyphens: auto; }
  .lz-nav .lz-schritt:hover .lz-kr { scale: none; }
  .lz-nav .lz-schritt:hover .lz-name { color: var(--tinte); }
  /* aktuelle Seite */
  .lz-nav .lz-schritt[aria-current="page"] { background: var(--ph); }
  .lz-nav .lz-schritt[aria-current="page"] :is(.lz-kr, .lz-name) { color: #fff; }
  /* Hover: dunklere Fläche wächst vom Zeiger aus, weicher Rand */
  .lz-nav .lz-schritt::after { content: ""; position: absolute; z-index: -1; left: var(--hx, 50%); top: var(--hy, 50%); width: 420%; aspect-ratio: 1; border-radius: 50%;
    translate: -50% -50%; transform: scale(0); pointer-events: none; transition: transform 520ms cubic-bezier(0.33, 1, 0.68, 1);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--ph-hell) 84%, var(--ph)) 62%, transparent 100%); }
  .lz-nav .lz-schritt.z-hover:not([aria-current="page"])::after { transform: scale(1); transition-duration: 700ms; }
  /* Verbindung und Rückfluss feiner, auf Boxenmitte */
  .lz-nav .lz-linie { left: 10%; right: 10%; top: calc(var(--lz-oben) + 4.25rem - .75px); height: 1.5px; }
  .lz-nav .lz-rueck { top: 1.4rem; height: calc(var(--lz-oben) - 1.4rem - 10px); border-width: 1.5px; }
  .lz-nav .lz-rueck-text { top: calc(1.4rem + .75px); font: 600 1rem/1 var(--font); }
  .lz-nav .lz-schritt:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }
  @media (max-width: 760px) {
    .lz-nav .lz-leiste { --lz-oben: 3.2rem; column-gap: .35rem; }
    .lz-nav .lz-schritt { min-height: 6rem; padding: .7rem .55rem; gap: .8rem; }
    .lz-nav .lz-kr svg { width: 24px; height: 24px; }
    .lz-nav .lz-name { font-size: .75rem; }
    .lz-nav .lz-linie { display: none; }
  }
}

@layer bausteine {
  /* Handy: Phasen-Leiste untereinander wie die Phasen-Boxen der Startseite (in fünf Spalten wurden die Namen zerhackt) */
  @media (max-width: 760px) {
    .lz-nav .lz-leiste { grid-template-columns: minmax(0, 1fr); row-gap: .45rem; padding-top: 0; }
    .lz-nav :is(.lz-rueck, .lz-rueck-text, .lz-linie) { display: none; }
    .lz-nav .lz-schritt { flex-direction: row; align-items: center; justify-content: flex-start; gap: .9rem; min-height: 0; padding: .85rem 1rem; }
    .lz-nav .lz-kr svg { width: 28px; height: 28px; }
    .lz-nav .lz-name { font-size: 1.0625rem; hyphens: manual; }
  }
}

@layer bausteine {
  /* Kundenlogos immer farbig (Pascal 11.10.) – kein Grau mehr bis zum Erreichen des Abschnitts */
  .logos img, .beweis-logos img { filter: none; opacity: 1; }
}

@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 */
/* echte Pillen (ganz rund), überall wo .chip vorkommt: Filter, Themen, «bald» (Pascal, 04.10.) */
.chip { border-radius: 100px; font-family: var(--font-schild); font-weight: 600; }
.chip.bald { border: 1px dashed var(--linie-stark) !important; background: none; }

/* Lebenszyklus als Navigation auf Leistungsseiten */

/* Ohne Seitenleitung keine Knoten – ausser der Station im Aufruf am Seitenende */
main:not(:has([data-leitung-start])) :not(.sg-knoten) > .knoten:not(.auslass .knoten) { display: none; }

/* 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); }
/* Checkboxen im Stil der Listen-Häkchen: leeres Kästchen mit Kontur, angeklickt Mint mit weissem Haken, der sich zeichnet */
.einwilligung { position: relative; cursor: pointer; }
.einwilligung input { position: absolute; left: 0; top: .05rem; width: 1.25rem; height: 1.25rem; margin: 0; opacity: 0; cursor: pointer; }
.einwilligung .haken { width: 1.25rem; height: 1.25rem; margin-top: .05rem; background: var(--papier); box-shadow: inset 0 0 0 var(--linie-s) var(--mint-tief);
  transition: background-color 180ms ease-out, box-shadow 180ms ease-out, scale var(--dauer-lebhaft) var(--feder-lebhaft); }
.einwilligung .haken path { stroke-dashoffset: 1; transition: stroke-dashoffset 200ms ease-in; }
.einwilligung input:checked + .haken { background: var(--mint); box-shadow: none; animation: haken-plopp 440ms var(--feder-lebhaft); }
.einwilligung input:checked + .haken path { stroke-dashoffset: 0; transition: stroke-dashoffset 280ms cubic-bezier(.4, 0, .2, 1) 90ms; }
.einwilligung:hover input:not(:checked) + .haken { background: var(--mint-hell); }
.einwilligung input:focus-visible + .haken { outline: 3px solid var(--mint-tief); outline-offset: 2px; }
.einwilligung.z-fehler .haken { box-shadow: inset 0 0 0 var(--linie-s) var(--signal); }
@keyframes haken-plopp { 0% { scale: .8; } 60% { scale: 1.12; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .einwilligung input:checked + .haken { animation: none; } }
/* Bestätigung nach dem Absenden: grosses Häkchen, zeichnet sich beim Erscheinen */
.bestaetigung .haken { width: 2.5rem; height: 2.5rem; margin-top: 0; }

/* 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) {
  /* Scheibe gleich gross und an gleicher Stelle wie auf der Startseite (.ring-rahmen in entwurf.css):
     Radius r = min(0.62 × Einstiegshöhe, 40vw), Mittelpunkt bei 97vw und 11 % der Einstiegshöhe.
     Dafür bezieht sich die Scheibe auf den Einstieg selbst (Hülle ohne Positionierung, Einstieg isoliert, Scheibe dahinter). */
  .einstieg:has(.kreis.gross) { --r: min(calc(var(--eh) * .62), 40vw); isolation: isolate;
    min-height: max(clamp(460px, 62vh, 640px), calc(var(--eh) * .11 + var(--r) + 2rem)); display: grid; align-items: center; }
  .einstieg:has(.kreis.gross) > .huelle { position: static; }
  .einstieg .kreis.gross {
    position: absolute; z-index: -1; top: calc(var(--eh) * .11 - var(--r)); left: calc(97vw - var(--r)); right: auto; translate: none;
    width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  }
  /* Icon im sichtbaren Viertel unten links, wie die vordere Station auf der Startseite */
  .einstieg .kreis.gross svg { width: calc(var(--r) * .5); height: calc(var(--r) * .5); translate: calc(var(--r) * -.42) calc(var(--r) * .42); }
  .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 als Pillen: etwas mehr Luft, die Zahl sitzt als kleiner runder Zähler rechts */
  .filter { gap: .5rem; }
  .filter .chip { padding: .3rem .45rem .3rem 1.05rem; gap: .6em; font-size: .9375rem; }
  .filter .chip .zahl { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .4em; border-radius: 100px;
    background: var(--papier); font-size: .8125rem; font-weight: 600; opacity: 1; transition: background-color .2s; }
  .filter .chip[aria-pressed="true"] .zahl { background: rgb(255 255 255 / .16); }
  .filter .chip:focus-visible { border-radius: 100px; }
  .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; }

/* ---------- Wissen: die drei Einstiege als kompakte Liste neben dem Titel statt drei hoher Karten */
.wissen-zeilen { list-style: none; margin: 0; padding: 0; border-top: var(--linie-s) solid var(--leitung-grund); }
.wissen-zeilen li { border-bottom: var(--linie-s) solid var(--leitung-grund); }
.wissen-zeilen a { display: flex; align-items: center; gap: 1.1rem; padding: 1.15rem .75rem 1.15rem .25rem; color: var(--tinte); text-decoration: none;
  transition: background var(--dauer-blende) var(--feder-blende); }
.wissen-zeilen a:hover { background: var(--ph-hell, var(--mint-hell)); }
.wissen-zeilen .kreis { flex: none; width: 52px; height: 52px; }
.wissen-zeilen .wz-text { flex: 1; display: grid; gap: .2rem; min-width: 0; }
.wissen-zeilen b { font: 600 1.125rem/1.3 var(--font); }
.wissen-zeilen .wz-text span { font-size: .9375rem; line-height: 1.45; color: var(--tinte-weich); }
.wissen-zeilen a > .ico { flex: none; width: 1.25rem; height: 1.25rem; color: var(--ph, var(--mint-tief)); transition: translate var(--dauer-lebhaft) var(--feder-lebhaft); }
.wissen-zeilen a:hover > .ico { translate: 5px 0; }

/* Vorlagenwahl: Fehlertext wie bei den Feldern */
.wahl .fehler { display: none; align-items: center; gap: .4em; font-size: .875rem; color: var(--signal); }
.wahl.z-fehler .fehler { display: flex; }
/* Wischreihen: Karten erscheinen gemeinsam, nicht einzeln beim Wischen */
.js .wischreihe > [data-auftritt], .js .wischreihe > [data-auftritt]:not(.z-sichtbar) { opacity: 1; translate: none; transition: none; animation: none; }
/* Glossar: Werkzeugleiste schliesst ohne Lücke an den Kopf an; Buchstaben brauchen mehr Breite */
.g-werkzeug { top: var(--kopf-hoehe); grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
@media (max-width: 760px) { .g-werkzeug { grid-template-columns: 1fr; } }
/* Reifegrad: Ergebnisbalken auf dem Handy mit Luft zwischen den Zeilen */
@media (max-width: 640px) { .balken { gap: 1.25rem; } .balken-zeile { row-gap: .25rem; } }
/* Partnerlogos: Höhe aus der Fläche (build.py, logo_hoehe), damit breite und kompakte Logos gleich gewichtig wirken */
.partner-logo img { height: var(--logo-h, auto); max-height: none; width: auto; max-width: 100%; }
/* Seitenhintergrund durchgehend weiss (Wunsch Pascal, 02.10.): hellgraue Abschnitte (.zone, .flaeche) werden weiss;
   was darin bisher weiss auf grau stand, bekommt umgekehrt das helle Grau, damit es sich weiter abhebt */
.zone, .sektion.flaeche, .flaeche { background: var(--papier); }
:is(.flaeche, .zone) { --feld-grund: var(--zone); --chip-grund: var(--zone); }
:is(.flaeche, .zone) :is(.karte, .tank, .logos li, .knopf-rund, .auto, .chip-mint, .partner-logo, .zitat, .thema, .ergebnis, .checkliste li) { background: var(--zone); }
/* Partnerlogos freigestellt: kein weisser Kasten mehr dahinter */
.partner-logo, :is(.flaeche, .zone) .partner-logo { background: none; padding-inline: 0; justify-items: start; }
/* Styleguide: die Bühne «auf Mint-Hell» zeigt wirklich Mint-Hell (war durch den weissen Seitenhintergrund ebenfalls weiss) */
.sg-buehne.sg-zone { background: var(--mint-hell); box-shadow: none; }
/* Pfad an den Navigations-Link angeglichen (03.10.): gleiche Schrift, keine Unterstreichung, beim Überfahren wächst
   die graue Pille aus der Mitte (wie .nav-link) */
.pfad ol { font: 500 1.0625rem/1 var(--font); color: var(--tinte); gap: .2rem .35rem; }
.pfad li { gap: .35rem; }
.pfad a { position: relative; isolation: isolate; display: inline-flex; align-items: center; padding: .5rem .7rem; margin-inline: -.2rem;
  color: var(--tinte); text-decoration: none; border-radius: var(--pille); }
.pfad li:first-child a { margin-left: -.7rem; }
.pfad a::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, var(--feder-lebhaft)); }
.pfad a:hover { color: var(--tinte); text-decoration: none; }
.pfad a:hover::before { opacity: 1; scale: 1; }
.pfad a:active::before { scale: .94; transition-duration: 120ms; }
.pfad [aria-current="page"] { padding: .5rem .5rem; font-weight: 600; color: var(--tinte); }

/* Textlink: Unterstreichung nur beim Überfahren – sie läuft von links herein und beim Verlassen nach rechts hinaus (03.10.).
   Technik: Hintergrundlinie, nur die Breite ist animiert; die Position springt unsichtbar (ruhend rechts verankert, beim
   Überfahren links). --ul-l / --ul-r sparen ein Icon vorne bzw. den Pfeil hinten aus. Fuss-Kontakte sehen gleich aus. */
.text-link, .fuss-kontakt a, .karte .mehr { padding-bottom: .22em; text-decoration: none;
  --ul-d: max(1px, .075em);   /* Strich im Verhältnis zur Schriftgrösse, nicht fix 2px */
  background: linear-gradient(currentColor 0 0) no-repeat calc(100% - var(--ul-r, 0px)) 100% / 0 var(--ul-d);
  transition: background-size 420ms cubic-bezier(0.65, 0, 0.35, 1); }
.text-link:has(> .ico:last-child), .karte .mehr:has(> .ico:last-child) { --ul-r: calc(1.1em + .4rem); }
.text-link:hover, a:hover > .text-link, a:hover .lz-ref-text .text-link, .text-link:focus-visible,
:is(.karte, .geschichte, .tank, .doppelseite, .teaser-gross):is(:hover, :focus-within) :is(.text-link, .mehr),   /* ganze Karte ist der Link (überdeckender .karte-link) */
.fuss-kontakt a:hover, .fuss-kontakt a:focus-visible { background-size: calc(100% - var(--ul-l, 0px) - var(--ul-r, 0px)) var(--ul-d); background-position: var(--ul-l, 0px) 100%; text-decoration: none; }
.fuss-kontakt a { --ul-l: calc(1.1em + .6rem); color: var(--mint-tief); font: 600 1.0625rem/1.35 var(--font); min-height: 0; }
.fuss-kontakt a:hover { color: var(--mint-tief); }
.fuss-oben .fuss-kontakt { gap: .7rem; }
@media (prefers-reduced-motion: reduce) { .text-link, .fuss-kontakt a, .karte .mehr { transition: none; } }

/* Kundenlogos im Zuschnitt-Rahmen nie stauchen: die allgemeine Bildregel (max-width: 100 %) drückte sie auf die Rahmenbreite */
.logo-rahmen img { max-width: none; max-height: none; }
/* Karten mit Link heben beim Überfahren an – über transform, weil die Auftritt-Animation «translate» festhält */
.karte { transition: transform var(--dauer-lebhaft) var(--feder-lebhaft), background var(--dauer-blende) var(--feder-blende); }
.karte:has(.karte-link):hover { translate: none; transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .karte:has(.karte-link):hover { transform: none; } }
/* Fuss: Icon mittig neben zweizeiligen Angaben (Adresse) */
.fuss-kontakt a { align-items: center; }
.fuss-kontakt .ico { margin-top: 0; }
/* Textlink nimmt nur die Breite seines Texts ein (in Spalten-Layouts streckte er sich, die Linie lief über die ganze Breite) */
.text-link { width: fit-content; max-width: 100%; align-self: flex-start; justify-self: start; }
.abschnitt-link .text-link { align-self: auto; }
/* Karten heben weich an: die Einblend-Regel (.js [data-auftritt]) kannte nur opacity/translate und liess transform springen */
.karte, .js .karte[data-auftritt] { transition: transform var(--dauer-lebhaft) var(--feder-lebhaft), background var(--dauer-blende) var(--feder-blende),
  opacity var(--dauer-standard) var(--feder-standard), translate var(--dauer-standard) var(--feder-standard); }
.js .karte[data-auftritt] { transition-delay: 0s, 0s, calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms); }

/* ---------- Glossar-Karte am Begriff (app.js, glossarKarte): hängt sichtbar am Begriff (Spitze, Ursprung der Bewegung) */
.g-karte { position: absolute; z-index: 80; left: 0; top: 0; box-sizing: border-box; width: min(22rem, calc(100vw - 2rem)); padding: 1rem 1.15rem 1.05rem;
  border-radius: var(--pille); background: var(--tinte); color: #fff; font: 400 .9375rem/1.5 var(--font); text-align: left;
  opacity: 0; scale: .94; transform-origin: var(--ux, 50%) 0; pointer-events: none;
  transition: opacity 150ms ease, scale 460ms var(--feder-standard); }
.g-karte[data-seite="oben"] { transform-origin: var(--ux, 50%) 100%; }
.g-karte.z-auf { opacity: 1; scale: 1; pointer-events: auto; }
.g-karte::before { content: ""; position: absolute; left: calc(var(--ux, 50%) - 6px); top: -5px; width: 12px; height: 12px; border-radius: 2px; background: inherit; rotate: 45deg; }
.g-karte[data-seite="oben"]::before { top: auto; bottom: -5px; }
.g-karte-titel { margin: 0 0 .3rem; font: 600 1.0625rem/1.3 var(--font); letter-spacing: -.005em; }
.g-karte-text { margin: 0; color: rgb(255 255 255 / .86); }
.g-karte-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem; font-weight: 600; color: #9fdccd; text-decoration: none; }
.g-karte-link .ico { width: 1.05em; height: 1.05em; transition: translate 350ms var(--feder-standard); }
.g-karte-link:hover .ico { translate: 4px 0; }
.g-karte-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }
a.g-link[aria-describedby] { background: color-mix(in srgb, var(--mint) 22%, transparent); border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .g-karte { scale: 1; transition: opacity 150ms ease; } }

/* ---------- Referenzen-Filter: Karten gleiten (app.js, filter); das Abbild einer verschwindenden Karte liegt frei im Raster */
#ref-raster { position: relative; }
.karte-geist { position: absolute; margin: 0 !important; pointer-events: none; }

/* ---------- Aufklapper als Block: geschlossen liegen die Zeilen fugenlos aufeinander, die offene rückt mit einer Fuge
   heraus – dieselbe Fuge wie zwischen den Kacheln der Phasen */
.klapp-liste { display: flex; flex-direction: column; border-top: 0; }
.klapp { position: relative; border-bottom: 0; background: var(--zone);
  transition: margin 380ms cubic-bezier(.2, .9, .3, 1), border-radius 380ms cubic-bezier(.2, .9, .3, 1); }
.klapp > h3 { margin: 0; }
.klapp:first-child { border-top-left-radius: var(--pille); border-top-right-radius: var(--pille); }
.klapp:last-child { border-bottom-left-radius: var(--pille); border-bottom-right-radius: var(--pille); }
.klapp + .klapp::before { content: ""; position: absolute; inset: 0 1.35rem auto; height: var(--strich, 1px); background: var(--rohr); transition: opacity 200ms ease; }
.klapp.z-offen { margin-block: .6rem; border-radius: var(--pille); transition: margin 420ms cubic-bezier(.3, 1.4, .5, 1), border-radius 380ms cubic-bezier(.2, .9, .3, 1); }
.klapp.z-offen:first-child { margin-top: 0; }
.klapp.z-offen:last-child { margin-bottom: 0; }
.klapp.z-offen + .klapp { border-top-left-radius: var(--pille); border-top-right-radius: var(--pille); }
.klapp:has(+ .klapp.z-offen) { border-bottom-left-radius: var(--pille); border-bottom-right-radius: var(--pille); }
.klapp.z-offen::before, .klapp.z-offen + .klapp::before { opacity: 0; }
.klapp-knopf { padding: 1rem 1rem 1rem 1.35rem; }
.klapp-knopf .zeichen { width: 2.25rem; height: 2.25rem; border-radius: 100px; background: var(--papier); }
.klapp-knopf:hover .zeichen { background: var(--papier); }
.klapp.z-offen .zeichen { background: var(--tinte); color: #fff; }
.klapp-inhalt p { padding: 0 4.25rem 1.4rem 1.35rem; }
@media (max-width: 600px) { .klapp-inhalt p { padding-right: 1.35rem; } }
@media (prefers-reduced-motion: reduce) { .klapp, .klapp.z-offen { transition: none; } }

/* ==== Übernommen aus der Ideen-Vorschau (05.10.): 2, 3, 4, 7 ==== */
/* ============================================================ 2 · Mission füllt sich beim Scrollen (Muster «Text füllt sich beim Scrollen»)
   Die Wörter stehen blass da und werden mit dem Scrollen kräftig; das Tempo bestimmt, wer liest. */
.i-fuell .i-wort { opacity: .22; }
@media (prefers-reduced-motion: reduce) { .i-fuell .i-wort { opacity: 1 !important; } }

/* ============================================================ 3 · Reifegrad-Check: Auswahl gleitet (Muster «Segmentschalter»)
   Ein einziger Anzeiger in der Phasenfarbe gleitet zur gewählten Stufe – dieselbe Bewegung wie beim Schalter Problem/Lösung. */
.skala { position: relative; isolation: isolate; }
.skala::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; width: calc((100% - 3 * .5rem) / 4); height: 100%; border-radius: 4px;
  background: var(--ph, var(--tinte)); opacity: 0; scale: .9; pointer-events: none;
  translate: calc(var(--nx, 0) * (100% + .5rem)) calc(var(--ny, 0) * (100% + .5rem));
  transition: translate var(--dauer-standard) var(--feder-standard), opacity 180ms ease, scale 380ms var(--feder-standard); }
.skala:has(input:checked)::before { opacity: 1; scale: 1; }
.skala.z-sofort::before { transition: opacity 180ms ease, scale 380ms var(--feder-standard); }   /* erste Wahl: erscheint am Ort, gleitet nicht von links herein */
.skala:has(.stufe:nth-child(1) input:checked) { --nx: 0; }
.skala:has(.stufe:nth-child(2) input:checked) { --nx: 1; }
.skala:has(.stufe:nth-child(3) input:checked) { --nx: 2; }
.skala:has(.stufe:nth-child(4) input:checked) { --nx: 3; }
.stufe > span { position: relative; z-index: 2; transition: color 220ms ease; }
.stufe:has(input:checked) { background: var(--papier); color: #fff; }   /* die Fläche trägt jetzt der gleitende Anzeiger */
@media (max-width: 640px) {
  .skala { grid-auto-rows: 1fr; }
  .skala::before { width: calc((100% - .5rem) / 2); height: calc((100% - .5rem) / 2); }
  .skala:has(.stufe:nth-child(2) input:checked) { --nx: 1; --ny: 0; }
  .skala:has(.stufe:nth-child(3) input:checked) { --nx: 0; --ny: 1; }
  .skala:has(.stufe:nth-child(4) input:checked) { --nx: 1; --ny: 1; }
}
@media (prefers-reduced-motion: reduce) { .skala::before { transition: opacity 180ms ease; scale: 1; } }

/* Fortschritt als zehn Segmente in den Phasenfarben (Muster «Segmentierter Fortschritt»): jedes füllt sich, wenn seine
   Aussage bewertet ist; ein Klick springt zur Aussage. Ersetzt die blosse Zahl «5 von 10». */
.check-fuss { gap: .6rem 1.25rem; }
.check-segmente { display: flex; flex: 1 1 15rem; min-width: 0; gap: .22rem; margin: 0; padding: 0; list-style: none; }
.check-segmente li { flex: 1 1 0; display: flex; min-width: 0; }
.check-segmente li:nth-child(2n):not(:last-child) { margin-right: .4rem; }   /* je zwei Aussagen bilden eine Phase */
.check-seg { all: unset; box-sizing: border-box; flex: 1; display: grid; align-items: center; height: 1.75rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.check-seg i { display: block; height: 8px; overflow: hidden; border-radius: 100px; background: color-mix(in srgb, var(--ph) 22%, transparent); transition: background-color 200ms ease; }
.check-seg i::after { content: ""; display: block; height: 100%; border-radius: inherit; background: var(--ph); transform: scaleX(0); transform-origin: 0 50%; transition: transform 460ms var(--feder-standard); }
.check-seg.z-voll i::after { transform: scaleX(1); }
@media (hover: hover) { .check-seg:hover i { background: color-mix(in srgb, var(--ph) 42%, transparent); } }
.check-seg:focus-visible { outline: 2px solid var(--tinte); outline-offset: 1px; border-radius: var(--pille); }
@media (max-width: 640px) { .check-segmente { flex-basis: 100%; } }

/* ============================================================ 4 · Ergebnis: Balken in Phasenfarben, nach Hebel ordnen (Muster «Ranglisten-Diagramm») */
.balken-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 2rem 0 0; }
.balken-kopf p { margin: 0; font-weight: 600; color: var(--tinte); }
.balken-kopf + .balken { margin-top: 1rem; }
.i-seg { position: relative; isolation: isolate; display: inline-flex; padding: 4px; border-radius: 100px; background: var(--papier); }
.i-seg button { all: unset; box-sizing: border-box; position: relative; z-index: 1; display: grid; place-items: center; height: 2.25rem; padding: 0 1rem; border-radius: 100px;
  font: 600 .9375rem/1 var(--font-schild); color: var(--tinte); cursor: pointer; transition: color 220ms ease; -webkit-tap-highlight-color: transparent; }
.i-seg button[aria-pressed="true"] { color: #fff; }
.i-seg button:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }
.i-seg-anzeiger { position: absolute; z-index: 0; top: 4px; left: 0; height: calc(100% - 8px); width: var(--w, 0); translate: var(--x, 4px) 0; border-radius: 100px; background: var(--tinte);
  transition: translate var(--dauer-standard) var(--feder-standard), width var(--dauer-standard) var(--feder-standard); }
.i-seg.z-sofort .i-seg-anzeiger { transition: none; }
.balken-zeile .balken-spur { border-radius: 100px; background: color-mix(in srgb, var(--ph, var(--mint)) 18%, var(--papier)); }
.balken-zeile .balken-spur i, .balken-zeile.z-schwach .balken-spur i { border-radius: 100px; background: var(--ph, var(--mint)); }
.balken-zeile.z-schwach .balken-name { color: var(--tinte); }
.balken-chip { display: none; margin-left: .5rem; padding: .18rem .55rem; border-radius: 100px; background: var(--tinte); color: #fff; font: 600 .75rem/1.2 var(--font-schild); vertical-align: .08em; white-space: nowrap; }
.balken-zeile.z-schwach .balken-chip { display: inline-block; }
@media (min-width: 641px) { .balken-zeile { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) 3rem; } }   /* Platz für den Chip neben dem Namen */
@media (prefers-reduced-motion: reduce) { .i-seg-anzeiger { transition: none; } }

/* ============================================================ 7 · Navigation: eine Pille gleitet mit (Muster «Navigations-Pille») */
@media (hover: hover) and (pointer: fine) {
  .kopf .nav-liste.z-gleitet > li > .nav-link::before { display: none; }   /* die Fläche je Link entfällt: eine einzige wandert */
  /* liegt direkt im Kopf (hinter den Links, über der Kopffläche) – die Liste selbst bleibt unverändert, sonst verlöre das Menü-Panel seinen Bezug */
  .nav-gleiter { position: absolute; z-index: -1; left: 0; top: 0; width: var(--w, 0); height: var(--h, 0); translate: var(--x, 0) var(--y, 0); border-radius: var(--pille);
    background: var(--zone); opacity: 0; pointer-events: none;
    transition: translate 460ms var(--feder-standard), width 460ms var(--feder-standard), opacity 180ms ease, background-color 300ms ease; }
  .nav-gleiter.z-an { opacity: 1; }
  .kopf .nav-link.z-hier { font-weight: 600; }   /* aktueller Bereich: dort ruht die Pille */
  .nav-gleiter.z-sofort { transition: opacity 180ms ease; }
  .seite-start .kopf:not(.z-hell, .z-menue-zu, :has(.burger[aria-expanded="true"])) .nav-gleiter { background: rgb(255 255 255 / .16); }
}
@media (prefers-reduced-motion: reduce) { .nav-gleiter { transition: opacity 180ms ease; } }

/* ==== Molch auf der Linie über 01/02/03 (Referenzseiten, 06.10.) ====
   Ein kurzes Mint-Segment läuft in Schleife von links nach rechts; die Nummer der Spalte, über der es läuft, leuchtet auf.
   Nur transform/opacity. Die Spur (.molch) ist um die Molchlänge kürzer als die Liste, ihr translateX(100%) ist der Weg. */
.verlauf-quer { position: relative; }
.verlauf-quer .molch { position: absolute; left: 0; top: 0; width: calc(100% - 72px); height: var(--linie-s); padding: 0; border: 0; list-style: none; pointer-events: none;
  animation: molch-lauf 7s cubic-bezier(.45, 0, .55, 1) infinite; }
.verlauf-quer .molch i { position: absolute; left: 0; top: 0; width: 72px; height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, transparent, var(--mint) 35%, var(--mint) 70%, transparent); }
@keyframes molch-lauf { 0% { transform: translateX(0); opacity: 0; } 6% { opacity: 1; } 84% { transform: translateX(100%); opacity: 1; } 92%, 100% { transform: translateX(100%); opacity: 0; } }
.verlauf-quer .verlauf-nr { animation: molch-nr 7s ease-in-out infinite; }
.verlauf-quer .verlauf-punkt:nth-child(1) .verlauf-nr { --a: 4%; }
@keyframes molch-nr-1 { 0%, 3%, 34%, 100% { color: var(--mint-tief); } 14%, 24% { color: var(--mint); } }
@keyframes molch-nr-2 { 0%, 30%, 60%, 100% { color: var(--mint-tief); } 40%, 50% { color: var(--mint); } }
@keyframes molch-nr-3 { 0%, 56%, 88%, 100% { color: var(--mint-tief); } 66%, 78% { color: var(--mint); } }
.verlauf-quer .verlauf-punkt:nth-child(1) .verlauf-nr { animation-name: molch-nr-1; }
.verlauf-quer .verlauf-punkt:nth-child(2) .verlauf-nr { animation-name: molch-nr-2; }
.verlauf-quer .verlauf-punkt:nth-child(3) .verlauf-nr { animation-name: molch-nr-3; }
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .verlauf-quer .molch { display: none; }
  .verlauf-quer .verlauf-nr { animation: none; }
}

/* ---------- Brotkrumen kleben als eigene Leiste unter dem Kopf (neu.py, pfad_leiste). Innerhalb von <main> zählt die Leiste
   zur Kopfhöhe: alles, was sonst unter dem Kopf klebt oder dorthin springt (Inhaltsverzeichnis, Glossar-Leiste, Anker),
   rückt um ihre Höhe nach unten. Der Schatten des Kopfs wandert an die Leiste. */
:root { --kopf-echt: var(--kopf-hoehe); --pfad-hoehe: 2.75rem; }
main:has(> .pfad-leiste) { --kopf-hoehe: calc(var(--kopf-echt) + var(--pfad-hoehe)); }
.pfad-leiste { position: sticky; top: var(--kopf-echt); z-index: 45; height: var(--pfad-hoehe); background: var(--papier); transition: box-shadow 300ms var(--ease-out); }
.pfad-leiste > .huelle { display: flex; align-items: center; height: 100%; }
.pfad-leiste .pfad { min-width: 0; margin: 0; }
.pfad-leiste .pfad ol { flex-wrap: nowrap; margin: 0; font-size: .9375rem; }
.pfad-leiste .pfad li { flex: none; }
.pfad-leiste .pfad li:last-child { flex: 0 1 auto; min-width: 0; }
.pfad-leiste .pfad [aria-current="page"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:has(.pfad-leiste) .kopf.z-gerollt { box-shadow: none; }
.kopf.z-gerollt ~ main > .pfad-leiste { box-shadow: 0 10px 28px -18px rgb(15 58 53 / .28); }
.pfad-leiste + .einstieg { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }

/* Brotkrumen plakativ und klar (Pascal, 07.10.; nach dem Muster «Brotkrumen – Kette mit Trennzeichen» aus Allgemeines):
   kräftige Schrift, deutliche Winkel in Mint als Trenner, die aktuelle Seite als gefüllte Pille («Sie sind hier»). */
:root { --pfad-hoehe: 3.5rem; }
.pfad-leiste .pfad ol { gap: .15rem .3rem; font: 600 1.0625rem/1 var(--font); color: var(--tinte); }
.pfad-leiste .pfad li { gap: .3rem; }
.pfad-leiste .pfad a { padding: .55rem .7rem; color: var(--tinte); font-weight: 600; }
.pfad-leiste .pfad .pfad-start .ico { width: 1.2rem; height: 1.2rem; stroke-width: 2; }
.pfad-leiste .pfad li + li::before { width: .5rem; height: .5rem; border-color: var(--mint); border-width: 2px 2px 0 0; translate: -.15rem 0; }
.pfad-leiste .pfad [aria-current="page"] { display: block; margin-left: .25rem; padding: .6rem .95rem; border-radius: 100px; background: var(--mint-hell); color: var(--tinte); font-weight: 700; }
@media (max-width: 600px) {
  :root { --pfad-hoehe: 3.25rem; }
  .pfad-leiste .pfad ol { font-size: 1rem; }
  .pfad-leiste .pfad a { padding-inline: .5rem; }
  .pfad-leiste .pfad [aria-current="page"] { padding: .55rem .8rem; }
}
.pfad-leiste .pfad li + li::before { flex: none; }
.pfad-leiste .pfad ol { min-width: 0; max-width: 100%; }
.karte .mehr { width: fit-content; align-self: flex-start; }   /* Unterstreichung nur so lang wie «Zur Referenz» */

/* Hinweis links unten: Website in Arbeit (11.10.); lässt sich pro Sitzung schliessen */
.baustelle { position: fixed; z-index: 95; left: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .6rem; max-width: calc(100vw - 2rem);
  padding: .5rem .5rem .5rem .9rem; border-radius: 100px; background: var(--tinte); color: #fff; font: 500 .875rem/1.2 var(--font);
  box-shadow: 0 6px 24px rgb(0 0 0 / .14); }
.baustelle[hidden] { display: none; }
.baustelle b { font-weight: 600; }
.baustelle-punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--stau, #f2c230); box-shadow: 0 0 0 0 rgb(242 194 48 / .6); animation: baustelle-puls 2.4s ease-out infinite; }
@keyframes baustelle-puls { 0% { box-shadow: 0 0 0 0 rgb(242 194 48 / .55); } 70%, 100% { box-shadow: 0 0 0 9px rgb(242 194 48 / 0); } }
.baustelle-zu { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; cursor: pointer; font-size: 1.1rem; line-height: 1; color: rgb(255 255 255 / .75); }
.baustelle-zu:hover { background: rgb(255 255 255 / .12); color: #fff; }
.baustelle-zu:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
:root[data-thema="dunkel"] .baustelle { background: #fff; color: #0f3a35; }
:root[data-thema="dunkel"] .baustelle-zu { color: rgb(15 58 53 / .7); }
:root[data-thema="dunkel"] .baustelle-zu:hover { background: rgb(15 58 53 / .08); color: #0f3a35; }
@media (prefers-reduced-motion: reduce) { .baustelle-punkt { animation: none; } }
@media (max-width: 600px) { .baustelle { left: .75rem; bottom: .75rem; font-size: .8125rem; } }
/* Kontakt «Direkt erreichbar»: Icons ohne Farbkreis (11.10.) */
.direkt .kreis { --g: auto; width: auto; height: auto; background: none; border-radius: 0; color: var(--mint-tief); }
.direkt .kreis .ico, .direkt .kreis svg { width: 1.4rem; height: 1.4rem; }
.direkt a, .direkt span.zeile { gap: .9rem; min-height: 3.25rem; }
/* Kontakt: rechte Spalte so hoch wie das Formular; das Standortbild füllt den Rest, «Route planen» schliesst unten bündig ab */
@media (min-width: 861px) {
  .kontakt-raster { align-items: stretch; }
  .kontakt-raster > .stapel { display: flex; flex-direction: column; }
  .kontakt-raster .standort { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .kontakt-raster .standort .bildrahmen { flex: 1 1 0; min-height: 9rem; aspect-ratio: auto; }
  .kontakt-raster .standort .bildrahmen img { width: 100%; height: 100%; object-fit: cover; }
  .kontakt-raster .standort .text-link { align-self: flex-start; }
}
/* Kundenstimmen untereinander, in der Höhe scrollbar (11.10.): Titel und Pfeile links (klebt), Stimmen rechts in eigener
   Scrollspalte mit Einrasten und weich auslaufenden Rändern; am Handy einfach untereinander ohne eigenes Scrollen */
.stimmen-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.stimmen-kopf { position: sticky; top: calc(var(--kopf-hoehe, 78px) + 2rem); display: grid; gap: 1.25rem; justify-items: start; }
.stimmen-kopf .t-dachzeile { margin: 0; }
.stimmen { display: grid; gap: 1rem; max-height: min(38rem, 72vh); overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory;
  scrollbar-width: none; padding-block: 1.5rem; scroll-padding-block: 1.5rem;
  -webkit-mask: linear-gradient(transparent, #000 1.5rem, #000 calc(100% - 3rem), transparent); mask: linear-gradient(transparent, #000 1.5rem, #000 calc(100% - 3rem), transparent); }
.stimmen::-webkit-scrollbar { display: none; }
.stimmen > * { scroll-snap-align: start; margin: 0; }
.stimmen:focus-visible { outline: 3px solid var(--mint-tief); outline-offset: 4px; }
@media (max-width: 860px) {
  .stimmen-raster { grid-template-columns: minmax(0, 1fr); }
  .stimmen-kopf { position: static; }
  .stimmen-kopf .knopfreihe { display: none; }
  .stimmen { max-height: none; overflow: visible; scroll-snap-type: none; padding: 0; -webkit-mask: none; mask: none; }
}
/* Kundenstimmen mittig (11.10.): Titel zentriert darüber, Stimmen-Spalte in der Mitte, Pfeile rechts daneben (übereinander) */
.stimmen-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 46rem) minmax(0, 1fr); column-gap: 1.5rem; row-gap: 2rem; }
.stimmen-kopf { grid-column: 1 / -1; position: static; justify-items: center; text-align: center; }
.stimmen { grid-column: 2; }
.stimmen-pfeile { grid-column: 3; align-self: center; justify-self: start; display: grid; gap: .5rem; }
@media (max-width: 860px) {
  .stimmen-raster { grid-template-columns: minmax(0, 1fr); }
  .stimmen, .stimmen-kopf { grid-column: 1; }
  .stimmen-kopf { justify-items: start; text-align: left; }
  .stimmen-pfeile { display: none; }
}

/* =====================================================================================================================
   Aufbau nach Kunden-Prototyp v0.3 (11.10.): neue Bausteine für Startseite, Kopf, Fuss und Unterseiten
   ===================================================================================================================== */

/* ---------- Kopf: sechs Punkte; Links brechen nie um; «Technologie» (steht auch im Menü) weicht bei mittlerer Breite */
.nav-link { white-space: nowrap; }
@media (max-width: 1240px) { .nav-liste .nav-link { padding-inline: .75rem; font-size: 1rem; } }
@media (max-width: 1140px) { .nav-mittel { display: none; } }
.nav-menue-schmal .nav-schale { width: min(440px, calc(100% - 2 * var(--rand))); }
.nav-dienste a { padding-block: .8rem; }
.nav-dienste small, .nav-branchen small { max-width: 34ch; }
.nav-branchen { gap: .1rem; }
.mobil .mobil-text a { padding: .55rem .9rem; }

/* ---------- Fuss: Logo, Satz und Kontakt links; drei Linkspalten rechts */
.fuss-oben .fuss-marke { max-width: 22rem; }
.fuss-satz { margin: 0; color: var(--tinte-weich); font-size: 1rem; line-height: 1.55; }
.fuss-spalten { display: grid; grid-template-columns: repeat(3, minmax(9rem, auto)); gap: 2rem clamp(2rem, 4vw, 4.5rem); }
.fuss-spalte h2 { margin: 0 0 1rem; font: 600 .8125rem/1.2 var(--font-schild); letter-spacing: .04em; text-transform: uppercase; color: var(--tinte-zart); }
.fuss-spalte ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.fuss-spalte a { color: var(--tinte); text-decoration: none; font-size: 1rem; }
.fuss-spalte a:hover { color: var(--mint-tief); text-decoration: underline; text-underline-offset: .22em; }
.fuss-recht a + a { margin-left: 0; }
@media (max-width: 760px) { .fuss-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Einstieg der Startseite: längere Einleitung, Zielgruppe, drei Dienstleistungen am unteren Rand */
.seite-start .einstieg-text .t-lead { max-width: 58ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); hyphens: manual; }
.einstieg-zielgruppe { margin: 1.5rem auto 0; max-width: 52ch; hyphens: manual; font-size: .9375rem; line-height: 1.5; opacity: .85; }
.einstieg-dienste { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0 0; padding: 0; list-style: none;
  border-top: var(--strich) solid rgb(255 255 255 / .45); }
.einstieg-dienste li + li { border-left: var(--strich) solid rgb(255 255 255 / .45); }
.einstieg-dienste a { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; height: 100%; padding: 1.25rem 1.5rem 1.4rem; color: inherit; text-decoration: none;
  transition: background-color var(--dauer-blende) var(--feder-blende); }
.einstieg-dienste a:hover { background: rgb(255 255 255 / .12); }
.einstieg-dienste b { font: 600 1.1875rem/1.25 var(--font); }
.einstieg-dienste span { grid-column: 1; font-size: .9375rem; line-height: 1.45; opacity: .85; }
.einstieg-dienste .ico { grid-column: 2; grid-row: 1; width: 1.25rem; height: 1.25rem; transition: translate var(--dauer-lebhaft) var(--feder-lebhaft); }
.einstieg-dienste a:hover .ico { translate: 5px 0; }
@media (max-width: 900px) {
  .einstieg-dienste { grid-template-columns: minmax(0, 1fr); }
  .einstieg-dienste li + li { border-left: 0; border-top: var(--strich) solid rgb(255 255 255 / .45); }
  .einstieg-dienste a { padding-inline: 0; }
}

/* ---------- Kurs: Raute → Linie → Kreis (Logo als Kurs), das Schiff fährt beim Scrollen mit (entwurf.js, kurs) */
.kurs { position: relative; margin: 0 auto clamp(2.5rem, 2rem + 3vw, 4.5rem); max-width: 68rem; --p: .38; --lotse: #6c4675; }
.kurs-bild { display: block; width: 100%; height: auto; overflow: visible; }
.kurs-bild path, .kurs-bild circle { fill: none; stroke: var(--mint); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ks-punkte { stroke-dasharray: 2 9; stroke-linecap: round; }
.ks-linie { stroke-dasharray: var(--p) 1; }
.ks-raute.ks-klein { stroke-width: 2.5; }
.ks-kreis { stroke-width: 4; }
.ks-fahrt { transform: translateX(calc(var(--p) * var(--weg))); }
.kurs-bild .ks-segel { fill: color-mix(in srgb, var(--mint) 18%, transparent); }
.kurs-bild .ks-rumpf { fill: var(--papier); }
.kurs-bild .ks-flagge { fill: var(--lotse); stroke: var(--lotse); stroke-width: 1.5; }
.kurs.z-mitte .ks-raute.ks-klein, .kurs.z-ziel .ks-kreis { fill: var(--mint); }
.ks-stationen { position: relative; height: 3.6rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.ks-station { position: absolute; left: var(--x); translate: -50% 0; display: grid; gap: .15rem; text-align: center; white-space: nowrap; }
.ks-station.ks-start { translate: -1.5rem 0; text-align: left; }
.ks-station.ks-ziel { translate: calc(-100% + 1.5rem) 0; text-align: right; }
.ks-station b { font: 600 1.0625rem/1.2 var(--font); color: var(--tinte); }
.ks-station span { font-size: .9375rem; color: var(--tinte-zart); }
@media (max-width: 700px) {
  .ks-stationen { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .ks-station { position: static; translate: none !important; white-space: normal; text-align: center !important; }
  .ks-station b { font-size: .9375rem; } .ks-station span { font-size: .8125rem; }
}
@media (prefers-reduced-motion: reduce) { .ks-fahrt { transition: none; } }

/* Kundschaft unter dem Kurs */
.kunden-reihe { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 2.5rem; padding-top: 2rem; border-top: var(--strich) solid var(--linie); }
.kunden-reihe > p { margin: 0; font-weight: 600; color: var(--tinte); }
.kunden-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.25rem; margin: 0; padding: 0; list-style: none; }
.kunden-logos li { display: grid; place-items: center; }
.kunden-logos.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 1rem; }
.kunden-logos.raster li { min-height: 6.5rem; padding: 1rem; background: var(--zone); border-radius: var(--r); }
.kunden-logos.einzeln { margin-bottom: 1.25rem; }

/* ---------- «Die Arbeit beginnt beim Prozess»: drei Zeilen (Dachzeile + Titel | Text + Link) */
.zeilen { margin: 0; padding: 0; list-style: none; border-top: var(--strich) solid var(--linie); }
.zeile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem clamp(2rem, 5vw, 5rem); padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-bottom: var(--strich) solid var(--linie); }
.zeile-kopf .t-dachzeile { margin-bottom: .4rem; }
.zeile h3 { margin: 0; font: 600 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.2 var(--font-titel, var(--font)); letter-spacing: -.015em; color: var(--tinte); }
.zeile-text p { margin: 0 0 1rem; color: var(--tinte-weich); max-width: 56ch; }
@media (max-width: 760px) { .zeile { grid-template-columns: minmax(0, 1fr); } }

/* Abschnittsfuss: Link oder Satz unter einem Raster */
.abschnitt-fuss { margin: clamp(1.75rem, 1rem + 2vw, 2.75rem) 0 0; text-align: center; color: var(--tinte-weich); }
.abschnitt-fuss .text-link { display: inline-flex; margin-left: .35rem; font-weight: 600; }

/* ---------- Phasen-Boxen: Vorgehen und Ergebnis */
.lz-ergebnis { display: flex; gap: .7rem; align-items: flex-start; margin: 0; font-weight: 500; color: var(--tinte); line-height: 1.5; }
.lz-ergebnis .haken { flex: none; margin-top: .15rem; }
.lz[data-lz] .lz-k-vorgehen .lz-lead { font-size: 1rem; }

/* ---------- Vorher / Nachher: zwei Abläufe nebeneinander */
.vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.vg-spalte { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: var(--r-l); background: var(--zone); }
.vg-spalte h3 { margin: 0 0 1.1rem; font: 600 1.25rem/1.2 var(--font); color: var(--tinte); }
.vg-spalte ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.vg-spalte li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .85rem 1rem; border-radius: var(--r); background: var(--papier); }
.vg-nr { font: 300 1.375rem/1 var(--font-titel, var(--font)); color: var(--tinte-zart); letter-spacing: -.02em; }
.vg-spalte b { font-weight: 600; color: var(--tinte); }
.vg-rolle { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 100px; font: 600 .875rem/1.2 var(--font-schild); white-space: nowrap; }
.vg-rolle .ico { width: 1rem; height: 1rem; }
.vg-vorher .vg-rolle { background: color-mix(in srgb, var(--stau, #f2c230) 28%, var(--papier)); color: #5c4500; }
.vg-nachher .vg-rolle { background: var(--mint-hell); color: var(--mint-tief); }
.vg-nachher { background: color-mix(in srgb, var(--mint) 16%, var(--papier)); }
.vg-notiz { margin: 1rem 0 0; font-size: .9375rem; color: var(--tinte-zart); }
@media (max-width: 860px) { .vergleich { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .vg-spalte li { grid-template-columns: 1.75rem minmax(0, 1fr); } .vg-rolle { grid-column: 2; justify-self: start; } }

/* ---------- Branchen-Karten (Startseite) und Dienstleistungs-Karten */
.raster-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1000px) { .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .raster-4 { grid-template-columns: minmax(0, 1fr); } }
.branche-karte, .dienst-karte { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; border-radius: var(--r-l); }
.branche-karte h3 { margin: 0; font: 600 1.25rem/1.25 var(--font); }
.branche-karte p { margin: 0; color: var(--tinte-weich); line-height: 1.5; }
.branche-karte .mehr, .dienst-karte .mehr { margin-top: auto; display: inline-flex; align-items: center; gap: .4em; font-weight: 600; color: var(--mint-tief); }
.branche-karte .mehr .ico, .dienst-karte .mehr .ico { width: 1.1em; height: 1.1em; }
.karte-link { color: inherit; text-decoration: none; }
.karte-link::after { content: ""; position: absolute; inset: 0; }
.dienst-karte .t-dachzeile { margin: 0; font-size: .9375rem; }
.dienst-karte h3 { margin: 0; }
.dienst-karte:is(:hover, :focus-within), .branche-karte:is(:hover, :focus-within) { background: var(--mint-hell); }
.dienst-raster { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* ---------- Projekt-Teaser (Startseite) */
.projekt-teaser { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(1.75rem, 1rem + 3vw, 4rem); align-items: center; }
.projekt-bild .ref-foto { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-l); overflow: hidden; }
.projekt-text .t-titel { text-align: left; }
.projekt-text .t-dachzeile { margin: 1rem 0 .75rem; }
.projekt-text .t-text { margin-bottom: 1.5rem; }
.projekt-text .hat-knoten > .knoten { display: none; }
@media (max-width: 860px) { .projekt-teaser { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Unterseiten: Ablauf in vier Etappen auf einer Linie (mit Molch wie auf den Projektgeschichten) */
.ablauf-quer { margin: 0; }
.ablauf-quer ol { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); margin: 0; padding: 0; list-style: none; }
.ablauf-quer li:not(.molch) { display: grid; gap: .35rem; align-content: start; padding-top: 1.25rem; border-top: var(--linie-s) solid var(--leitung-grund); }
.ab-q-nr { font: 300 2.4rem/1 var(--font-titel, var(--font)); letter-spacing: -.03em; color: var(--mint-tief); margin-bottom: .4rem; }
.ablauf-quer b { font: 600 1.1875rem/1.25 var(--font); color: var(--tinte); }
.ablauf-quer li > span:last-child:not(.ab-q-nr) { color: var(--tinte-zart); font-size: .9375rem; }
.ablauf-quer .molch { position: absolute; left: 0; top: 0; width: calc(100% - 72px); height: var(--linie-s); padding: 0; border: 0; list-style: none; pointer-events: none;
  animation: molch-lauf 7s cubic-bezier(.45, 0, .55, 1) infinite; }
.ablauf-quer .molch i { position: absolute; left: 0; top: 0; width: 72px; height: 100%; border-radius: 100px; background: linear-gradient(90deg, transparent, var(--mint) 35%, var(--mint) 70%, transparent); }
.ab-q-notiz { margin: 1.5rem 0 0; color: var(--tinte-weich); max-width: 60ch; }
@media (max-width: 760px) {
  .ablauf-quer ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ablauf-quer .molch { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ablauf-quer .molch { display: none; } }

/* Punkte mit Häkchen: zwei oder drei Spalten */
.angebot-liste.punkte-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.angebot-liste.punkte-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.angebot-liste .haken { margin-top: .15rem; }

/* Grosses Icon im Seitenkopf (Business Analyse, Projektleitung) */
.einstieg-kreis { display: contents; }

/* ---------- Prozessmanagement: Prozesslandkarte, Phasen im Detail, Entscheidungshilfe */
.pm-verstaendnis { align-items: center; }
.pm-verstaendnis .t-titel { margin-bottom: 1.25rem; }
.landkarte { display: grid; gap: .6rem; margin: 0; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--r-l); background: var(--zone); }
.landkarte figcaption { margin: 0 0 .4rem; }
.lk-band { padding: .9rem 1rem; border-radius: var(--r); text-align: center; font: 600 .9375rem/1.3 var(--font-schild); }
.lk-fuehrung { background: #efe8f2; color: #6c4675; }
.lk-stuetze { background: var(--mint-hell); color: var(--mint-tief); }
.lk-kette { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.lk-kette li { position: relative; display: grid; place-items: center; min-height: 5.5rem; padding: .75rem; border-radius: var(--r); background: var(--papier);
  box-shadow: inset 0 0 0 var(--linie-s) var(--mint); text-align: center; font-weight: 600; color: var(--tinte); }
.lk-kette li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 1rem; height: var(--linie-s); background: var(--mint); }
.lk-kette .lk-kern { background: var(--mint); box-shadow: none; color: #0e2a26; }
.lk-text { margin: .4rem 0 0; font-size: .9375rem; color: var(--tinte-zart); }
.phasen-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.phasen-detail { display: contents; }   /* die fünf Phasen und die Entscheidungshilfe teilen sich ein Raster (2 × 3) */
.phase-detail { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--r-l); background: var(--ph-hell);
  scroll-margin-top: calc(var(--kopf-hoehe) + 1.5rem); }
.phase-detail .kreis { width: 64px; height: 64px; background: var(--papier); color: var(--ph); }
.phase-detail .t-dachzeile { margin: 0 0 .3rem; color: var(--ph); }
.phase-detail h3 { margin: 0 0 .6rem; font: 600 1.375rem/1.2 var(--font); color: var(--tinte); }
.phase-detail .t-text { margin: 0 0 1rem; }
.phase-ergebnis, .projekt-ergebnis { display: flex; gap: .65rem; align-items: flex-start; margin: 0; line-height: 1.5; color: var(--tinte); }
.phase-ergebnis .haken, .projekt-ergebnis .haken { flex: none; margin-top: .15rem; }
.phase-detail:target { outline: 3px solid var(--ph); outline-offset: 3px; }
.entscheidungshilfe { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--r-l); background: var(--tinte); color: #fff; }
.entscheidungshilfe h3 { margin: 0 0 1rem; font: 600 1.375rem/1.2 var(--font); color: #fff; }
.entscheidungshilfe ul { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.entscheidungshilfe li { display: flex; gap: .65rem; align-items: flex-start; line-height: 1.5; color: rgb(255 255 255 / .86); }
.entscheidungshilfe b { color: #fff; }
.entscheidungshilfe .haken { flex: none; margin-top: .15rem; }
@media (max-width: 860px) { .phasen-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Technologie: Lösungen, Tool-Evaluation, Abläufe / Menschen / Systeme */
.loesung { display: flex; flex-direction: column; gap: .8rem; padding: 1.5rem; border-radius: var(--r-l); }
.lsg-kennz { align-self: flex-start; font-size: .8125rem; padding: .3rem .7rem; }
.lsg-partner .lsg-kennz { background: var(--mint-hell); color: var(--mint-tief); }
.lsg-logo { display: flex; align-items: center; height: 3.5rem; }
.lsg-logo img { max-height: 3rem; max-width: 10rem; width: auto; object-fit: contain; }
.lsg-wort { font: 700 1.5rem/1 var(--font); color: var(--tinte); letter-spacing: -.02em; }
.loesung h3 { margin: 0; display: grid; gap: .2rem; }
.loesung h3 small { font: 500 .9375rem/1.3 var(--font); color: var(--tinte-zart); }
.loesung .t-text { margin: 0; }
.evaluation { display: flex; flex-direction: column; gap: .9rem; padding: 1.5rem; border-radius: var(--r-l); background: var(--tinte) !important; color: #fff; }
.evaluation h3 { margin: 0; color: #fff; }
.evaluation .t-text { margin: 0; color: rgb(255 255 255 / .86); }
.evaluation .knopf { margin-top: auto; align-self: flex-start; --grund: #fff; --text: var(--tinte); --fuell: var(--mint-hell); --text-fuell: var(--tinte); }
.drei-fragen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3rem); padding: 0; list-style: none; }
.drei-fragen li { padding: 1.5rem; border-radius: var(--r-l); background: var(--zone); }
.drei-fragen .t-dachzeile { margin: 0 0 .3rem; }
.drei-fragen h3 { margin: 0 0 .6rem; font: 600 1.25rem/1.25 var(--font); color: var(--tinte); }
.drei-fragen p:last-child { margin: 0; color: var(--tinte-weich); line-height: 1.5; }
@media (max-width: 860px) { .drei-fragen { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Branchen: Sprungmarken im Kopf, je Branche Text + Themen | Referenz */
.branche-wahl { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.branche-wahl .chip { text-decoration: none; padding: .55rem 1rem; transition: background-color var(--dauer-blende) var(--feder-blende); }
.branche-wahl .chip:hover { background: var(--mint-hell); }
.branche { scroll-margin-top: var(--kopf-hoehe); }
.branche + .branche { border-top: var(--strich) solid var(--linie); }
.branche .raster-2 { align-items: start; }
.branche .t-titel { margin-bottom: 1rem; }
.branche-themen-titel { margin: 2rem 0 .9rem; font: 600 1.125rem/1.2 var(--font); color: var(--tinte); }
.branche-themen { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.branche-themen li { display: flex; gap: .65rem; align-items: flex-start; line-height: 1.5; color: var(--tinte-weich); }
.branche-themen .haken { flex: none; margin-top: .15rem; }
.branche-referenz { display: grid; gap: 1rem; justify-items: start; padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: var(--r-l); background: var(--zone); }
.branche-referenz .t-text { margin: 0; }
.branche-referenz .kunden-logos { margin: 0; }
.branche-weitere { display: grid; gap: .75rem; padding-top: 1rem; border-top: var(--strich) solid var(--rohr); width: 100%; }
.branche-weitere p { margin: 0; font-size: .9375rem; color: var(--tinte-zart); }

/* ---------- Referenzen: Projekte mit Schlagworten und Ergebnis */
.projekt-karte { display: flex; flex-direction: column; position: relative; }
.projekt-karte .inhalt { display: flex; flex-direction: column; gap: .8rem; padding: 1.5rem; flex: 1; }
.projekt-karte .chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.projekt-karte .chip { font-size: .8125rem; padding: .25rem .65rem; background: var(--papier); }
.projekt-karte h3 { margin: 0; }
.projekt-karte .t-text { margin: 0; }
.projekt-karte .mehr { margin-top: auto; display: inline-flex; align-items: center; gap: .4em; font-weight: 600; color: var(--mint-tief); }
.projekt-karte .ref-foto { aspect-ratio: 16 / 10; }

/* ---------- Über MINT: Geschäftsleitung zu zweit */
.team-zwei { grid-template-columns: repeat(2, minmax(0, 22rem)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.team-zwei .person-zeile { align-items: flex-end; flex-wrap: wrap; }
@media (max-width: 600px) { .team-zwei { grid-template-columns: minmax(0, 1fr); } }
.vorgehen-satz .t-lead { margin-top: 1.25rem; }

/* ---------- Kontakt: Themenauswahl und Ablauf */
.feld-wahl label { display: block; margin-bottom: .4rem; font-weight: 600; color: var(--tinte); }
.wahl-rahmen { position: relative; display: block; }
.wahl-rahmen select { width: 100%; min-height: 3.25rem; padding: .7rem 2.75rem .7rem 1rem; border: 1.5px solid transparent; border-radius: var(--r); background: var(--feld-grund, var(--zone));
  color: var(--tinte); appearance: none; cursor: pointer; }
.wahl-rahmen select:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mint); }
.wahl-rahmen .ico { position: absolute; right: 1rem; top: 50%; translate: 0 -50%; width: 1.1rem; height: 1.1rem; pointer-events: none; color: var(--tinte-weich); }
.ablauf-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.ablauf-liste li { display: grid; gap: .3rem; padding-top: .9rem; border-top: var(--linie-s) solid var(--leitung-grund); }
.ablauf-liste .ab-q-nr { font-size: 1.75rem; margin: 0; }
.ablauf-liste b { font-weight: 600; color: var(--tinte); font-size: .9375rem; }
@media (max-width: 480px) { .ablauf-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kontakt-raster .karte .dev-hinweis { margin: 0; }
.dienst-raster + .dev-hinweis { margin-top: 2rem; }
/* Titel in halber Breite (Branchen, Prozessmanagement) etwas kleiner, damit sie nicht über vier Zeilen laufen */
.raster-2 .t-titel { font-size: clamp(1.875rem, 1.3rem + 1.6vw, 2.625rem); }
/* Kurs am Handy: Schiff und Marken grösser (die Grafik skaliert sonst auf ein Drittel), Beschriftung ohne Trennung */
@media (max-width: 700px) {
  .kurs-bild { overflow: visible; margin-top: 3rem; }
  .ks-schiff { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(2); }
  .ks-raute, .ks-kreis { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(1.6); }
  .ks-station { hyphens: manual; }
  .ks-station span { font-size: .75rem; }
}

/* ---------- Sitemap (11.10.): Startseite oben, darunter die Hauptbereiche als Äste mit Unterseiten; Abschnitte aufklappbar */
.sm { padding-top: 0; }
.sm-wurzel { display: flex; justify-content: center; padding-bottom: 2.5rem; position: relative; }
.sm-wurzel::after { content: ""; position: absolute; left: 50%; bottom: 0; width: var(--linie-s); height: 2.5rem; background: var(--mint); }
.sm-start { width: min(100%, 26rem); background: var(--mint-hell) !important; }
.sm-aeste { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 2.5rem 0 0; list-style: none; }
.sm-aeste::before { content: ""; position: absolute; top: 0; left: calc(100% / 14); right: calc(100% / 14); height: var(--linie-s); background: var(--mint); }
.sm-e1 { position: relative; }
.sm-e1::before { content: ""; position: absolute; left: 50%; top: -2.5rem; width: var(--linie-s); height: 2.5rem; background: var(--mint); }
.sm-karte { display: grid; gap: .35rem; padding: 1rem 1.1rem 1.1rem; border-radius: var(--r-l); background: var(--zone); }
.sm-name { font: 600 1.0625rem/1.25 var(--font); color: var(--tinte); text-decoration: none; }
.sm-name:hover { color: var(--mint-tief); text-decoration: underline; text-underline-offset: .2em; }
.sm-pfad { font: 500 .75rem/1.2 ui-monospace, Menlo, monospace; color: var(--tinte-zart); overflow-wrap: anywhere; }
.sm-h1 { margin: .2rem 0 0; font-size: .875rem; line-height: 1.4; color: var(--tinte-weich); }
.sm-karte details { margin-top: .3rem; }
.sm-karte summary { cursor: pointer; font: 600 .8125rem/1.2 var(--font-schild); color: var(--mint-tief); }
.sm-abschnitte { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .25rem; font-size: .8125rem; line-height: 1.35; color: var(--tinte-weich); }
.sm-kinder { position: relative; display: grid; gap: .6rem; margin: .6rem 0 0 .9rem; padding: 0 0 0 .9rem; list-style: none; border-left: var(--linie-s) solid var(--rohr); }
.sm-kinder .sm-karte { background: var(--papier); box-shadow: inset 0 0 0 var(--strich) var(--linie); }
.sm-neben { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: var(--strich) solid var(--linie); }
.sm-neben .t-dachzeile { margin: 0; }
.sm-neben ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.sm-neben a { color: var(--tinte); }
@media (max-width: 1200px) {
  .sm-aeste { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 2rem; }
  .sm-aeste::before, .sm-e1::before { display: none; }
}
@media (max-width: 760px) { .sm-aeste { grid-template-columns: minmax(0, 1fr); } .sm-wurzel::after { display: none; } .sm-wurzel { padding-bottom: 1.5rem; } .sm-aeste { padding-top: 0; } }
.sm, .sm * { hyphens: manual; }
.sm { border-top: 0 !important; }
.sm-kinder { margin-left: .5rem; padding-left: .5rem; }
.sm-kinder .sm-karte { padding: .8rem .85rem .9rem; }
.sm-kinder .sm-name { font-size: .9375rem; }
.sm-pfad { word-break: break-all; }
@media (min-width: 1201px) { .sm .huelle { max-width: none; } }
/* Sitemap: Abschnitte als Aufzählung mit Mint-Punkt, klar getrennt (Pascal, 11.10.) */
.sm-abschnitte { list-style: none; padding-left: 0; gap: .45rem; }
.sm-abschnitte li { position: relative; padding-left: 1rem; }
.sm-abschnitte li::before { content: ""; position: absolute; left: .1rem; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }

/* ---------- Burger-Menü auf allen Breiten (11.10.): Kopf zeigt nur Logo, Hell/Dunkel, «Kontakt» und Menü-Knopf.
   Das Menü klappt unter dem Kopf auf; am Desktop vier Gruppen nebeneinander, am Handy untereinander. */
.kopf .nav { display: none !important; }
.kopf-zeile .kopf-cta { display: inline-flex; }
@media (max-width: 560px) { .kopf-zeile .kopf-cta { display: none; } }
.kopf-zeile .thema-knopf { margin-left: auto; }
.kopf-zeile .burger { margin-left: 0; }
.menue-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); gap: 2rem clamp(1.5rem, 3vw, 3.5rem);
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(2rem, 1.5rem + 2vw, 3.5rem) !important; }
.mobil.z-offen .menue-raster { min-height: 0 !important; display: grid !important; }
.menue-gruppe { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.menue-gruppe .nav-titel { margin: 0 0 .4rem; }
.menue-liste { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.mobil .menue-liste a { display: grid; gap: .15rem; padding: .55rem .75rem; margin-inline: -.75rem; border: 0; border-radius: var(--r); font-size: 1.0625rem; font-weight: 600;
  color: var(--tinte); text-decoration: none; transition: background-color var(--dauer-blende) var(--feder-blende); }
.mobil .menue-liste a:hover { background: var(--zone); }
.mobil .menue-liste a[aria-current="page"] { background: var(--mint-hell); }
.menue-liste small { font-size: .875rem; font-weight: 400; line-height: 1.4; color: var(--tinte-zart); }
.mobil .menue-gross a { font-size: 1.375rem; padding-block: .45rem; }
.menue-gruppe > .text-link { margin-top: .5rem; font-weight: 600; }
.menue-kontakt .knopf { margin-top: 0 !important; width: auto !important; align-self: flex-start; }
.menue-kontakt .mobil-direkt { margin-top: .75rem; }
.mobil.z-offen .menue-liste li { animation: menue-eintrag 480ms cubic-bezier(0.32, 0.72, 0, 1) both; animation-delay: calc(60ms + var(--i, 0) * 22ms); }
@media (prefers-reduced-motion: reduce) { .mobil.z-offen .menue-liste li { animation: none; } }
@media (max-width: 1100px) { .menue-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .menue-raster { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .menue-liste small { display: none; }
  .menue-kontakt .knopf { width: 100% !important; }
}
/* Desktop: Menü als Fläche unter dem Kopf, die Seite dahinter bleibt sichtbar abgedunkelt */
@media (min-width: 641px) {
  .mobil-innen { max-height: calc(100dvh - var(--kopf-hoehe, 72px)) !important; }
  .mobil.z-offen nav { min-height: 0 !important; }
}
/* alte Regel aus stil.basis.css (.menue-gruppe + .menue-gruppe mit Linie links) nur am Desktop als Spaltentrenner */
@media (max-width: 1100px) { .menue-raster .menue-gruppe { border: 0 !important; padding-left: 0 !important; } }

/* ---------- Menü vollflächig über der Seite, Hintergrund weichgezeichnet (11.10.); Burger: drei Striche ohne Fläche;
   Hell/Dunkel als Schalter im Menü statt im Kopf */
.kopf-zeile { position: relative; z-index: 2; }
.kopf-zeile .kopf-cta { margin-left: auto; }
.mobil { position: fixed; inset: 0; z-index: 49; display: block !important; padding-top: var(--kopf-echt, var(--kopf-hoehe, 76px));
  background: color-mix(in srgb, var(--papier) 72%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
  opacity: 0; visibility: hidden; transition: opacity 320ms var(--ease-out), visibility 0s linear 320ms; }
.mobil.z-offen { opacity: 1; visibility: visible; transition: opacity 320ms var(--ease-out), visibility 0s; }
.mobil-innen { height: 100%; max-height: none !important; overflow-y: auto; overscroll-behavior: contain; }
.mobil.z-offen nav, .menue-raster { min-height: 0 !important; }
.mobil .menue-raster { padding-block: clamp(2rem, 1rem + 4vw, 5rem) 3rem !important; align-content: start; }
.mobil .menue-liste a:hover { background: color-mix(in srgb, var(--tinte) 7%, transparent); }
@media (prefers-reduced-motion: reduce) { .mobil, .mobil.z-offen { transition: none; } }
/* Kopf über dem offenen Menü ohne eigene Fläche und ohne Schatten (die Unschärfe läuft durch) */
.kopf:has(.burger[aria-expanded="true"]), .kopf.z-menue-zu, .seite-start .kopf:is(.z-menue-zu, :has(.burger[aria-expanded="true"])) { background: transparent !important; box-shadow: none !important; }
body:has(.burger[aria-expanded="true"]) .blurkante { display: none; }

.burger, .seite-start .kopf:not(.z-hell, .z-menue-zu, :has(.burger[aria-expanded="true"])) .burger { width: 44px; height: 44px; padding: 0; background: none !important; gap: 5px; border-radius: 0; }
.burger span { width: 24px; height: 2px; transition: translate var(--dauer-lebhaft) var(--feder-lebhaft), rotate var(--dauer-lebhaft) var(--feder-lebhaft), opacity 160ms ease; }
.burger[aria-expanded="true"] span:first-child { translate: 0 7px; rotate: 45deg; }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:last-child { translate: 0 -7px; rotate: -45deg; }
.burger:focus-visible { outline: 3px solid var(--mint-tief); outline-offset: 2px; }

.mobil .thema-knopf { display: inline-flex; align-items: center; gap: .7rem; width: auto; height: auto; margin-top: 1.25rem; padding: .5rem 0; border: 0; border-radius: 0;
  background: none !important; color: var(--tinte) !important; font: 600 1rem/1.2 var(--font); cursor: pointer; align-self: flex-start; }
.mobil .thema-knopf svg { width: 1.25rem; height: 1.25rem; }
.thema-schalter { position: relative; width: 2.6rem; height: 1.5rem; border-radius: 100px; background: color-mix(in srgb, var(--tinte) 18%, transparent); transition: background-color 250ms ease; }
.thema-schalter::after { content: ""; position: absolute; left: 3px; top: 3px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 50%; background: var(--papier);
  transition: translate var(--dauer-lebhaft) var(--feder-lebhaft); }
.thema-knopf[aria-pressed="true"] .thema-schalter { background: var(--mint); }
.thema-knopf[aria-pressed="true"] .thema-schalter::after { translate: 1.1rem 0; }
.mobil .thema-knopf:focus-visible { outline: 3px solid var(--mint-tief); outline-offset: 3px; }
/* Das Menü liegt neben dem Kopf (nicht darin): view-transition-name am Kopf macht ihn zur «Backdrop Root», die Unschärfe sähe sonst nur den Kopf */
.mobil .thema-knopf { white-space: nowrap; }

/* ---------- Menü (13.10., Pascal: «zu viele Schriftgrössen, grosse Titel übersichtlich»): zwei Ebenen – kleine Gruppen-
   überschrift, darunter alle Einträge in einer einzigen grossen Titelgrösse; Kontakt als ruhige Zeile unten */
.menue-raster { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: clamp(2rem, 4vw, 4.5rem) !important; row-gap: 0 !important; }
.menue-gruppe { gap: 0; }
.menue-gruppe .nav-titel { margin: 0 0 1rem; font: 600 .8125rem/1.2 var(--font-schild); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-zart); text-decoration: none; }
a.nav-titel:hover { color: var(--mint-tief); }
.mobil .menue-liste { gap: 0; }
.mobil .menue-liste a, .mobil .menue-gross a { display: block; margin: 0; padding: .3rem 0; border: 0; border-radius: 0; background: none !important;
  font: 500 clamp(1.625rem, 1.05rem + 1.35vw, 2.375rem)/1.18 var(--font-titel, var(--font)); letter-spacing: -.02em; color: var(--tinte);
  transition: color var(--dauer-blende) var(--feder-blende), translate var(--dauer-lebhaft) var(--feder-lebhaft); }
.mobil .menue-liste a:hover { color: var(--mint-tief); translate: 6px 0; }
.mobil .menue-liste a[aria-current="page"] { color: var(--mint-tief); }
.menue-kontakt { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: 1.5rem;
  border-top: var(--strich) solid var(--linie); font: 400 1rem/1.3 var(--font); }
.menue-kontakt > a:not(.knopf) { color: var(--tinte); text-decoration: none; }
.menue-kontakt > a:not(.knopf):hover { color: var(--mint-tief); }
.menue-kontakt .knopf { margin: 0 !important; width: auto !important; }
.mobil .menue-kontakt .thema-knopf { margin: 0 0 0 auto; padding: 0; font: 400 1rem/1.3 var(--font); }
@media (max-width: 1100px) { .menue-raster { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 2.5rem !important; } }
@media (max-width: 640px) {
  .menue-raster { grid-template-columns: minmax(0, 1fr) !important; row-gap: 2rem !important; }
  .menue-kontakt { flex-direction: column; align-items: stretch; gap: .75rem; }
  .menue-kontakt .knopf { width: 100% !important; justify-content: center; }
  .mobil .menue-kontakt .thema-knopf { margin: .5rem 0 0; }
}
/* Menü-Titel: so gross, dass auch «Prozessmanagement» und «Öffentliche Verwaltung» auf eine Zeile passen; keine Trennung,
   keine Spaltenlinien (alte Regel .menue-gruppe + .menue-gruppe) */
.mobil .menue-liste a, .mobil .menue-gross a { font-size: clamp(1.5rem, 1.05rem + 1vw, 2rem); padding: .32rem 0; hyphens: manual; }
.menue-raster .menue-gruppe { border: 0 !important; padding: 0 !important; }

/* ---------- Kopf (13.10., Pascal: «zu nahe aneinander, Menü-Icon zu klein, Kontakt zu auffällig»):
   Kontakt als ruhiger Textlink (Pille nur beim Überfahren wie die Navigation), deutlich Abstand zum Burger, Burger grösser */
.kopf-zeile { gap: 0 !important; }
.kopf-zeile .kopf-cta { margin-left: auto; margin-right: clamp(1.25rem, 2.5vw, 2.25rem); padding: .65rem 1rem; font: 500 1.0625rem/1 var(--font); color: var(--tinte); }
.kopf-zeile .burger, .seite-start .kopf:not(.z-hell, .z-menue-zu, :has(.burger[aria-expanded="true"])) .burger { width: 52px; height: 52px; margin-right: -10px; gap: 7px; }
.burger span { width: 32px; height: 2px; }
.burger[aria-expanded="true"] span:first-child { translate: 0 9px; }
.burger[aria-expanded="true"] span:last-child { translate: 0 -9px; }
/* auf dem Mint-Einstieg der Startseite weiss */
.seite-start .kopf:not(.z-hell, .z-menue-zu, :has(.burger[aria-expanded="true"])) .kopf-cta { color: #fff; }
.seite-start .kopf:not(.z-hell, .z-menue-zu, :has(.burger[aria-expanded="true"])) .kopf-cta::before { background: rgb(255 255 255 / .16); }
@media (max-width: 560px) { .kopf-zeile .kopf-cta { display: inline-flex; margin-right: .75rem; padding-inline: .6rem; } }

/* ---------- Menü als Liste (13.10., Pascal: «verschmilzt ineinander»): jede Zeile durch eine feine Linie getrennt, leichtere
   Schrift, Pfeil rechts (ruhig, wird beim Überfahren mint und rückt nach); die Liste beginnt mit einer Linie unter der Überschrift */
.mobil .menue-liste { border-top: var(--strich) solid var(--linie); }
.mobil .menue-liste a, .mobil .menue-gross a { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 0; border-bottom: var(--strich) solid var(--linie);
  font: 400 clamp(1.25rem, 1rem + .6vw, 1.5rem)/1.25 var(--font); letter-spacing: -.01em; color: var(--tinte); translate: none !important; }
.mobil .menue-liste a .ico { flex: none; width: 1.15rem; height: 1.15rem; color: var(--tinte-zart); opacity: .55;
  transition: translate var(--dauer-lebhaft) var(--feder-lebhaft), opacity 200ms ease, color 200ms ease; }
.mobil .menue-liste a:hover { color: var(--mint-tief); }
.mobil .menue-liste a:hover .ico { opacity: 1; color: var(--mint-tief); translate: 4px 0; }
.mobil .menue-liste a[aria-current="page"] { color: var(--mint-tief); font-weight: 600; }
.menue-gruppe .nav-titel { margin-bottom: .75rem; }
:root[data-thema="dunkel"] .mobil .menue-liste, :root[data-thema="dunkel"] .mobil .menue-liste a { border-color: rgb(234 245 241 / .14); }
/* Menü-Liste (13.10.): ohne Linie oben und unten (nur zwischen den Einträgen); beim Überfahren wird die Schrift kräftiger */
.mobil .menue-liste { border-top: 0; }
.mobil .menue-liste li:last-child a { border-bottom: 0; }
.mobil .menue-liste a { transition: color var(--dauer-blende) var(--feder-blende), font-weight 220ms ease; }
.mobil .menue-liste a:hover, .mobil .menue-liste a:focus-visible { font-weight: 600; }
.menue-gruppe .nav-titel { margin-bottom: .35rem; }
/* Parallaxe der Farbwolken (entwurf.js, wolkenParallaxe): die Wolken bleiben beim Scrollen zurück */
.hat-wolken:not(.einstieg) > .wolken span { translate: 0 var(--para, 0px); }
@media (prefers-reduced-motion: reduce) { .hat-wolken > .wolken span { translate: none; } }

/* Kundschaft unter dem Kurs (13.10.): Titel über den Logos statt daneben, Logos in ruhigen gleich grossen Feldern */
.kunden-reihe { flex-direction: column; gap: 1.25rem; }
.kunden-reihe > p { font-weight: 500; color: var(--tinte-zart); font-size: .9375rem; }
.kunden-reihe .kunden-logos { gap: .75rem; justify-content: center; }
.kunden-reihe .kunden-logos li { width: 11rem; height: 5rem; box-sizing: border-box; padding: .75rem 1rem; border-radius: var(--r-l); background: var(--zone); }

/* ---------- Kurs weich (13.10.): Flächen statt Konturen. Farben als Variablen, im Dunkeln in dunkel.css umgestellt */
.kurs-weich { --ks-linie: var(--mint); --ks-voraus: color-mix(in srgb, var(--mint) 55%, transparent); --ks-hof: color-mix(in srgb, var(--mint) 22%, transparent);
  --ks-form: var(--mint-tief); --ks-segel1: #53c1aa; --ks-segel2: #a9e3d5; --ks-segel3: #8fd8c6; --ks-segel4: #d6f3ec;
  --ks-rumpf: var(--tinte); --ks-mast: var(--tinte); --ks-schatten: color-mix(in srgb, var(--mint-tief) 28%, transparent); }
.kurs-weich .kurs-bild path, .kurs-weich .kurs-bild circle { stroke: none; vector-effect: none; }
.kurs-weich .ks-punkte { fill: none; stroke: var(--ks-voraus); stroke-width: 3; stroke-dasharray: .1 10; stroke-linecap: round; }
.kurs-weich .ks-linie { fill: none; stroke: var(--ks-linie); stroke-width: 3; stroke-linecap: round; stroke-dasharray: var(--p) 1; }
.kurs-weich .ks-hof { fill: url(#ks-hof); }
.kurs-weich .ks-h1 { stop-color: var(--mint); stop-opacity: .28; } .kurs-weich .ks-h2 { stop-color: var(--mint); stop-opacity: 0; }
.kurs-weich .ks-raute, .kurs-weich .ks-raute.ks-klein, .kurs-weich .ks-kreis { fill: var(--ks-form); }
.kurs-weich .ks-raute.ks-klein { fill: color-mix(in srgb, var(--ks-form) 45%, var(--papier)); transition: fill 400ms ease; }
.kurs-weich.z-mitte .ks-raute.ks-klein { fill: var(--ks-form); }
.kurs-weich .ks-kreis { fill: color-mix(in srgb, var(--ks-form) 30%, var(--papier)); transition: fill 400ms ease; }
.kurs-weich .ks-kreis-innen { fill: var(--papier); }
.kurs-weich.z-ziel .ks-kreis { fill: var(--ks-form); }
.kurs-weich .ks-segel-gross { fill: url(#ks-v-gross); }
.kurs-weich .ks-segel-klein { fill: url(#ks-v-klein); }
.kurs-weich .ks-s1 { stop-color: var(--ks-segel1); } .kurs-weich .ks-s2 { stop-color: var(--ks-segel2); }
.kurs-weich .ks-s3 { stop-color: var(--ks-segel3); } .kurs-weich .ks-s4 { stop-color: var(--ks-segel4); }
.kurs-weich .ks-rumpf { fill: var(--ks-rumpf); }
.kurs-weich .ks-mast { fill: var(--ks-mast); }
.kurs-weich .ks-flagge { fill: var(--lotse); stroke: none; }
.kurs-weich .ks-schatten { fill: var(--ks-schatten); filter: url(#ks-weich); }
.kurs-weich .kurs-bild .ks-punkte { stroke: var(--ks-voraus); }
.kurs-weich .kurs-bild .ks-linie { stroke: var(--ks-linie); }
.kunden-reihe { align-items: center; }
.kunden-reihe .kunden-logos li { background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.kunden-reihe > .text-link { align-self: center; }
/* Farbwolken der Phasen (13.10., Pascal): beginnen weit oberhalb und laufen weit unterhalb des Abschnitts aus, ohne harte
   Ausblendkanten; der Abschnitt selbst ohne eigene Fläche (gleiche Farbe wie die Seite), damit die Wolken über seine Ränder reichen */
#lebenszyklus.zone { background: transparent; }
.wolken.wolken-phasen { top: -45vh; bottom: -45vh; overflow-x: clip; overflow-y: visible; }
.wolken-phasen::before, .wolken-phasen::after { display: none; }
/* Menü-Hover weich (13.10.): variable Plex (wght 100–700) → die Stärke gleitet von 400 auf 560, Farbe und Pfeil im selben Takt */
.mobil .menue-liste a { transition: color 320ms cubic-bezier(.2, .7, .2, 1), font-weight 320ms cubic-bezier(.2, .7, .2, 1); }
.mobil .menue-liste a:hover, .mobil .menue-liste a:focus-visible { font-weight: 560; }
.mobil .menue-liste a .ico { transition: translate 420ms cubic-bezier(.2, .7, .2, 1), opacity 320ms ease, color 320ms ease; }

/* ---------- Gruppentitel im Menü (13.10., Pascal wählt B «leicht und gross»): grosser, leichter Titel in Mint wie ein Untertitel */
.menue-gruppe .nav-titel { margin-bottom: .6rem; font: 300 clamp(1.375rem, 1.1rem + .7vw, 1.75rem)/1.15 var(--font-titel, var(--font)); letter-spacing: -.02em;
  text-transform: none; color: var(--mint-tief); }
.mobil .menue-liste a { font-weight: 400; }


/* ---------- Blur-Verlauf als Band unter dem Kopf (13.10.): nach dem Einstieg (Startseite) und auf allen Unterseiten.
   Die Blur-Ebenen liegen nur im Band unterhalb des Kopfs; dazu ein weicher Schleier in der Seitenfarbe, der nach unten ausläuft. */
.blurkante.z-unten > div { inset: var(--kopf-hoehe) 0 0 0; }
.blurkante.z-unten::after { background: linear-gradient(to bottom, rgb(var(--papier-rgb, 255 255 255)) 0, rgb(var(--papier-rgb, 255 255 255)) var(--kopf-hoehe),
  rgb(var(--papier-rgb, 255 255 255) / .72) var(--kopf-hoehe), rgb(var(--papier-rgb, 255 255 255) / .38) calc(var(--kopf-hoehe) + var(--band) * .45),
  rgb(var(--papier-rgb, 255 255 255) / .1) calc(var(--kopf-hoehe) + var(--band) * .8), rgb(var(--papier-rgb, 255 255 255) / 0) 100%); }
/* Unterseiten: das Band beginnt unter der Brotkrumen-Leiste (sonst würde sie selbst weichgezeichnet) */
.blurkante.z-seite { --kopf-hoehe: var(--kopf-echt); }
body:has(.pfad-leiste) .blurkante.z-seite { --kopf-hoehe: calc(var(--kopf-echt) + var(--pfad-hoehe)); }
body:has(.blurkante.z-seite:not([hidden])) .kopf.z-gerollt ~ main > .pfad-leiste, body:has(.blurkante.z-seite:not([hidden])) .kopf.z-gerollt { box-shadow: none; }
/* Unterseiten: Kopf und Brotkrumen-Leiste haben eigene Flächen – der Schleier beginnt erst darunter (sonst deckt er die Leiste zu) */
.blurkante.z-seite::after { background: linear-gradient(to bottom, transparent 0, transparent var(--kopf-hoehe),
  rgb(var(--papier-rgb, 255 255 255) / .72) var(--kopf-hoehe), rgb(var(--papier-rgb, 255 255 255) / .38) calc(var(--kopf-hoehe) + var(--band) * .45),
  rgb(var(--papier-rgb, 255 255 255) / .1) calc(var(--kopf-hoehe) + var(--band) * .8), rgb(var(--papier-rgb, 255 255 255) / 0) 100%); }
/* Menü-Pfeil (13.10.): gleitet beim Überfahren deutlich nach rechts (vorher 4 px, wirkte wie Skalieren) */
.mobil .menue-liste a .ico { translate: 0 0; }
/* Hover (15.10., Pascal): der Pfeil gleitet nach links, auf den Titel zu */
.mobil .menue-liste a:hover .ico, .mobil .menue-liste a:focus-visible .ico { translate: -12px 0; opacity: 1; color: var(--mint-tief); }
/* Blur-Band (13.10., Pascal: «der weisse Balken verschwindet»): der Kopf bleibt ein klar begrenzter weisser Balken (feine Linie
   als Kante), die Unschärfe beginnt erst darunter; der Schleier im Band ist nur noch ein Hauch */
.blurkante.z-unten::after { background: linear-gradient(to bottom, rgb(var(--papier-rgb, 255 255 255)) 0, rgb(var(--papier-rgb, 255 255 255)) calc(var(--kopf-hoehe) - 1px),
  var(--linie) calc(var(--kopf-hoehe) - 1px), var(--linie) var(--kopf-hoehe),
  rgb(var(--papier-rgb, 255 255 255) / .28) var(--kopf-hoehe), rgb(var(--papier-rgb, 255 255 255) / 0) 100%); }
.blurkante.z-seite::after { background: linear-gradient(to bottom, transparent 0, transparent var(--kopf-hoehe),
  rgb(var(--papier-rgb, 255 255 255) / .28) var(--kopf-hoehe), rgb(var(--papier-rgb, 255 255 255) / 0) 100%); }

/* ---------- Schiff (13.10.): Variante 1, flache Flächen, keine Bewegung */
.kurs-weich .ks-schatten { display: none; }
.kurs-weich .ksv-dunkel { fill: var(--ks-rumpf); }
.kurs-weich .ksv-mint { fill: var(--mint); }

/* Einstieg: drei Dienstleistungen als eigene Felder mit transparenter, leicht weichgezeichneter Fläche statt Trennlinien (13.10.) */
.einstieg-dienste { gap: 1rem; border-top: 0; }
.einstieg-dienste li + li { border-left: 0; border-top: 0; }
.einstieg-dienste a { padding: 1.35rem 1.5rem 1.5rem; border-radius: var(--r-l); background: rgb(255 255 255 / .12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16);
  transition: background-color 300ms ease, box-shadow 300ms ease; }
.einstieg-dienste a:hover { background: rgb(255 255 255 / .2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); }
.einstieg-dienste span { hyphens: manual; }
@media (max-width: 900px) { .einstieg-dienste { gap: .75rem; } .einstieg-dienste a { padding: 1.1rem 1.2rem 1.25rem; } }

/* Blur-Band ganz oben (13.10., Pascal: «weisser Balken weg, Blur nicht ganz oben»): sobald das Band steht, hat der Kopf keine eigene
   Fläche mehr. Die Unschärfe beginnt bei 0 (oben am stärksten) und läuft unter Kopf – und auf Unterseiten unter der Brotkrumen-Leiste –
   weich aus; ein Schleier in der Seitenfarbe hält Logo, Kontakt und Burger lesbar. Kopf und Leiste liegen über dem Band. */
.blurkante.z-unten > div { inset: 0 !important; }
.blurkante.z-unten::after { background: linear-gradient(to bottom, rgb(var(--papier-rgb, 255 255 255) / .8) 0, rgb(var(--papier-rgb, 255 255 255) / .62) 38%,
  rgb(var(--papier-rgb, 255 255 255) / .28) 72%, rgb(var(--papier-rgb, 255 255 255) / 0) 100%); }
body:has(.blurkante.z-unten:not([hidden])) .kopf { background: transparent !important; box-shadow: none !important; }
body:has(.blurkante.z-unten:not([hidden])) .pfad-leiste { background: transparent; box-shadow: none !important; z-index: 50; }
/* Segel wiegen sanft um den Mastfuss (13.10., Pascal: der Meeresspiegel bleibt ruhig): nur Segel + Flagge drehen, der Rumpf steht */
.kurs-weich .ks-wiegen { transform-box: fill-box; transform-origin: 56% 100%; animation: ks-wiegen 5.5s ease-in-out infinite alternate; }
@keyframes ks-wiegen { from { rotate: -1.8deg; } to { rotate: 1.8deg; } }
@media (prefers-reduced-motion: reduce) { .kurs-weich .ks-wiegen { animation: none; } }

/* ---------- Kurs mit Scroll-Animation (13.10., Variante «Scroll»): Text und Illustration laufen über denselben Fortschritt.
   Der Abschnitt bleibt stehen (sticky) und gibt dem Scrollen Länge; Wörter füllen sich, Stationen leuchten auf, das Schiff fährt. */
.kurs-lauf, .kurs-buehne { display: contents; }
.kurs-wahl { display: flex; justify-content: center; align-items: center; gap: .25rem; width: fit-content; margin: 1rem auto 0; padding: .25rem; border-radius: 100px; background: var(--zone); font: 600 .8125rem/1 var(--font-schild); }
.kurs-wahl span { padding: 0 .5rem; color: var(--tinte-zart); }
.kurs-wahl button { all: unset; cursor: pointer; padding: .45rem .8rem; border-radius: 100px; color: var(--tinte); }
.kurs-wahl button[aria-pressed="true"] { background: var(--tinte); color: var(--papier); }
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  /* Abgebremst statt angehalten (14.10.): kein Festhalten; der Abschnitt wandert beim Scrollen mit, zur Mitte hin mit rund 30 % der Geschwindigkeit,
     an Anfang und Ende weich auf normale Geschwindigkeit (ease-in-out-sine). Strecke 160vh ab Auftauchen bei 85 %, davon 71vh «mitgenommen» (Polsterung unten).
     Läuft als scrollgebundene Animation im Compositor (ruckelfrei); ohne Unterstützung setzt das Skript denselben Versatz. */
  html:is([data-kurs="scroll"], [data-kurs="text"], [data-kurs="fahrt"]) .kurs-lauf { display: block; padding-bottom: 71vh; }
  html:is([data-kurs="scroll"], [data-kurs="text"], [data-kurs="fahrt"]) .kurs-buehne { display: flex; flex-direction: column; justify-content: center; position: relative;
    min-height: calc(100vh - var(--kopf-hoehe) - 1.5rem); }
  /* an der Seiten-Scrollleiste (eine View-Timeline wäre durch Vorfahren mit overflow:clip inaktiv); Start/Ende in px setzt das Skript */
  @supports (animation-timeline: scroll()) {
    html:is([data-kurs="scroll"], [data-kurs="text"], [data-kurs="fahrt"]) .kurs-buehne { animation: kurs-zug cubic-bezier(.37, 0, .63, 1) both; animation-timeline: scroll(root block);
      animation-range: var(--zug-a, 0px) var(--zug-b, 1px); }
  }
  html:is([data-kurs="scroll"], [data-kurs="text"], [data-kurs="fahrt"]) #kurs .kopf-block { margin-bottom: clamp(1.5rem, 1rem + 2vh, 3rem); }
  html:is([data-kurs="scroll"], [data-kurs="text"], [data-kurs="fahrt"]) #kurs .kopf-block .t-lead { hyphens: manual; }
  html:is([data-kurs="scroll"], [data-kurs="text"], [data-kurs="fahrt"]) #kurs .kw { opacity: .2; transition: opacity 380ms ease; }
  html:is([data-kurs="scroll"], [data-kurs="text"], [data-kurs="fahrt"]) #kurs .kw.z-an { opacity: 1; }
  html:is([data-kurs="scroll"], [data-kurs="text"], [data-kurs="fahrt"]) .ks-station { opacity: .35; transition: opacity 400ms ease; }
  html:is([data-kurs="scroll"], [data-kurs="text"], [data-kurs="fahrt"]) .ks-station.z-aktiv { opacity: 1; }
  html:is([data-kurs="scroll"], [data-kurs="text"], [data-kurs="fahrt"]) .kurs { margin-bottom: 0; }
  /* zentrierte Elemente schrumpfen in der Spalte auf Inhaltsbreite: volle Breite erzwingen (max-width/margin bleiben) */
  html:is([data-kurs="scroll"], [data-kurs="text"], [data-kurs="fahrt"]) .kurs-buehne > .kurs, html:is([data-kurs="scroll"], [data-kurs="text"], [data-kurs="fahrt"]) .kurs-buehne > .kopf-block { width: 100%; }
}
@media (max-width: 760px), (prefers-reduced-motion: reduce) { .kurs-wahl { display: none; } }
@keyframes kurs-zug { from { translate: 0 0; } to { translate: 0 71vh; } }

/* ---------- Darstellung «Text» (13.10.): das Schiff ersetzt das Wort «Schiff» in der Überschrift und fährt beim Scrollen durch den Text */
.sw { display: inline-block; position: relative; }
.sw-flug { display: none; } .sw-3d { display: none; }
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  html:is([data-kurs="text"], [data-kurs="fahrt"]) .sw-wort { opacity: var(--w, 0); }
  html:is([data-kurs="text"], [data-kurs="fahrt"]) .kopf-block { position: relative; }
  /* Ankerpunkt ohne eigene Grösse: das Skript setzt ihn auf die Wasserlinie (Seite) bzw. die Schiffsmitte (oben) */
  html:is([data-kurs="text"], [data-kurs="fahrt"]) .sw-flug { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; pointer-events: none; will-change: translate; perspective: 700px; }
  html:is([data-kurs="text"], [data-kurs="fahrt"]) .sw-flug svg { position: absolute; left: 0; top: 0; max-width: none; overflow: visible; will-change: transform, opacity; }
  html[data-kurs="text"] .sw-oben { display: none; }
  html[data-kurs="fahrt"] .sw-flug.z-3d svg { display: none; }   /* das 3D-Schiff ersetzt beide SVG-Ansichten, sobald es geladen ist */
  html[data-kurs="fahrt"] .sw-flug.z-3d .sw-3d { display: block; position: absolute; left: 0; top: 0; max-width: none; }
  html:is([data-kurs="text"], [data-kurs="fahrt"]) .kurs .ks-fahrt { display: none; }   /* die Grafik braucht ihr eigenes Schiff nicht mehr: Linie und Stationen laufen mit */
  /* «Fahrt»: Buchstaben einzeln verschiebbar; Wörter bleiben zusammen, damit der Umbruch gleich bleibt */
  html[data-kurs="fahrt"] #kurs .bw { white-space: nowrap; }
  html[data-kurs="fahrt"] #kurs .bu { display: inline-block; will-change: translate, rotate; }
}
.sw-flug .ksv-dunkel { fill: var(--ks-rumpf, var(--tinte)); } .sw-flug .sw-fock { fill: color-mix(in srgb, var(--mint) 55%, var(--papier)); }

 .sw-flug .ksv-mint { fill: var(--mint); } .sw-flug .ks-flagge { fill: var(--lotse, #6c4675); }
.sw-flug .ks-wiegen { transform-box: fill-box; transform-origin: 56% 100%; animation: ks-wiegen 5.5s ease-in-out infinite alternate; }
:root[data-thema="dunkel"] .sw-flug .ksv-dunkel { fill: #eaf5f1; } :root[data-thema="dunkel"] .sw-flug .ks-flagge { fill: #c7abd0; } :root[data-thema="dunkel"] .sw-oben .ksv-dunkel { fill: #eaf5f1; } :root[data-thema="dunkel"] .sw-flug .sw-fock { fill: #8fd3bd; }

/* ---------- Phasen-Wolken über die ganze Startseite (15.10.): Ebene hinter dem Inhalt, Lage, Grösse und Stärke setzt wolkenSeite() */
main:has(> .wolken-seite) { isolation: isolate; }
.wolken.wolken-seite { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; }
.wolken.wolken-seite span { right: auto; bottom: auto; aspect-ratio: 1; --wd: 28s; will-change: transform, translate;
  --wf: color-mix(in srgb, var(--ph-hell) 100%, transparent); }
:root[data-thema="dunkel"] .wolken.wolken-seite span { --wf: color-mix(in srgb, var(--ph) 24%, transparent); }
@media (prefers-reduced-motion: reduce) { .wolken.wolken-seite span { translate: none !important; } }

/* ---------- Phasen und Maus (15.10., Pascal): Glanzkontur deutlich leiser; im hellen Modus keine Farbwolke am Zeiger
   (multiply machte sie dunkel), im Dunkeln bleibt sie */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lz-schein::after { background: radial-gradient(circle 220px at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / .38), rgb(255 255 255 / .12) 45%, rgb(255 255 255 / 0) 80%); }
  :root:not([data-thema="dunkel"]) .lz-schein::before, :root:not([data-thema="dunkel"]) .lz[data-lz] .lz-kachel::before { display: none; }
}

/* ---------- Branchen-Icons im Menü (15.10.): Phosphor Light vor dem Titel, in Mint, auf der Höhe der Kleinbuchstaben */
.mobil .menue-liste .me-ico { display: inline-block; width: .95em; height: .95em; margin-right: .5em; vertical-align: -.12em; color: var(--mint-tief); flex: none; }
:root[data-thema="dunkel"] .mobil .menue-liste .me-ico { color: var(--mint); }

/* ---------- Knöpfe (15.10., Pascal): der Mauszeiger bleibt über Knöpfen sichtbar (normale Hand), und nichts zieht oder
   wächst mit der Maus: kein Vergrössern, keine engere Laufweite beim Überfahren. Die Füllfarbe und der Pfeil bleiben. */
.mit-zeiger :is(.knopf, .knopf-rund), .mit-zeiger :is(.knopf, .knopf-rund) * { cursor: pointer; }
.knopf.z-fuell, .knopf-rund.z-fuell, .knopf:focus-visible { scale: none; letter-spacing: normal; }

/* ---------- Branchen-Icons bewegen sich beim Überfahren (15.10., Pascal, «Weg 3»): je eine kleine, zum Bild passende Bewegung.
   Koordinaten in Icon-Einheiten (viewBox 256); SVG-Elemente drehen standardmässig um Punkte der viewBox. */
.me-ico .mi-teil, .me-ico .mi-rad, .me-ico [class^="mi-f"] { transition: translate 480ms cubic-bezier(.34, 1.56, .64, 1), rotate 620ms cubic-bezier(.34, 1.56, .64, 1); }
.me-ico .mi-rad { transform-origin: 140px 124px; }
:is(a:hover, a:focus-visible) > span > .mi-banken .mi-rad { rotate: 90deg; }
:is(a:hover, a:focus-visible) > span > .mi-weitere .mi-f1 { translate: -14px -14px; }
:is(a:hover, a:focus-visible) > span > .mi-weitere .mi-f2 { translate: 14px -14px; }
:is(a:hover, a:focus-visible) > span > .mi-weitere .mi-f3 { translate: -14px 14px; }
:is(a:hover, a:focus-visible) > span > .mi-weitere .mi-f4 { translate: 14px 14px; }
:is(a:hover, a:focus-visible) > span > .mi-verwaltung .mi-teil { translate: 0 -22px; }
.mi-versicherungen .mi-teil { transform-origin: 128px 30px; }
:is(a:hover, a:focus-visible) > span > .mi-versicherungen .mi-teil { animation: mi-wippen 900ms ease-in-out; }
@keyframes mi-wippen { 0% { rotate: 0deg; } 25% { rotate: -14deg; } 55% { rotate: 9deg; } 80% { rotate: -4deg; } 100% { rotate: 0deg; } }
.mi-energie .mi-teil { transform-origin: 128px 128px; }
:is(a:hover, a:focus-visible) > span > .mi-energie .mi-teil { animation: mi-blitz 650ms ease-out; }
@keyframes mi-blitz { 0% { opacity: 1; scale: 1; } 15% { opacity: .25; scale: 1.18; } 30% { opacity: 1; } 45% { opacity: .4; } 60% { opacity: 1; scale: 1.06; } 100% { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) { .me-ico * { transition: none !important; animation: none !important; rotate: none !important; translate: none !important; } }

/* ---------- Hell/Dunkel im Menü (15.10., Pascal): einfacher Schalter. Ruhige Spur, darin ein runder Knopf, der das aktive
   Zeichen trägt: hell = Sonne (links), dunkel = Mond (rechts). Beim Umschalten gleitet der Knopf, die Sonne dreht sich weg
   und der Mond dreht sich herein. Beschriftung nur für Screenreader. */
.mobil .thema-knopf.thema-knopf { gap: 0; }
.thema-schalter.thema-sm { display: block; width: 3.5rem; height: 2rem; padding: 0; border-radius: 100px;
  background: color-mix(in srgb, var(--tinte) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinte) 10%, transparent);
  transition: background-color 400ms ease, box-shadow 400ms ease; }
.thema-schalter.thema-sm::after { content: none; }
.ts-knopf { position: absolute; left: .2rem; top: .2rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--papier);
  box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 2px 6px rgb(0 0 0 / .08); transition: translate 520ms cubic-bezier(.34, 1.3, .64, 1), background-color 400ms ease; }
.ts-knopf svg { position: absolute; inset: 0; margin: auto; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 360ms ease, rotate 520ms cubic-bezier(.34, 1.3, .64, 1), scale 520ms cubic-bezier(.34, 1.3, .64, 1); }
.ts-knopf .ts-sonne { color: #c98a12; }
.ts-knopf .ts-mond { color: var(--mint); opacity: 0; rotate: -90deg; scale: .5; }
.thema-knopf[aria-pressed="true"] .thema-schalter.thema-sm { background: color-mix(in srgb, var(--mint) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint) 30%, transparent); }
.thema-knopf[aria-pressed="true"] .ts-knopf { translate: 1.5rem 0; background: #18322d; }
.thema-knopf[aria-pressed="true"] .ts-sonne { opacity: 0; rotate: 90deg; scale: .5; }
.thema-knopf[aria-pressed="true"] .ts-mond { opacity: 1; rotate: 0deg; scale: 1; }
.thema-knopf:hover .ts-knopf { box-shadow: 0 1px 3px rgb(0 0 0 / .16), 0 3px 10px rgb(0 0 0 / .1); }
@media (prefers-reduced-motion: reduce) { .ts-knopf, .ts-knopf svg { transition: none; } }

/* ---------- Menü-Titel «Dienstleistungen» und «Branchen» sind Links (15.10., Pascal): erkennbar am Pfeil, rechtsbündig wie
   bei den Einträgen, ohne Unterstreichung; beim Überfahren gleitet der Pfeil wie bei den Einträgen nach links */
.mobil a.nav-titel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-decoration: none; }
.mobil a.nav-titel .ico { width: 1.15rem; height: 1.15rem; flex: none; opacity: .7; transition: translate 420ms cubic-bezier(.2, .7, .2, 1), opacity 320ms ease; }
.mobil a.nav-titel:hover .ico, .mobil a.nav-titel:focus-visible .ico { translate: -12px 0; opacity: 1; }
/* Pfeile im Menü werden beim Überfahren kräftiger, wie die Schrift (15.10., Pascal) */
.mobil :is(.menue-liste a, a.nav-titel) .ico { stroke-width: 1.6; transition: translate 420ms cubic-bezier(.2, .7, .2, 1), opacity 320ms ease, color 320ms ease, stroke-width 320ms ease; }
.mobil :is(.menue-liste a, a.nav-titel):is(:hover, :focus-visible) .ico { stroke-width: 2.5; }

/* Trenner statt Mittelpunkt (15.10., Pascal): gerader, senkrechter Strich in Schriftfarbe, so hoch wie die Grossbuchstaben */
.trenner { display: inline-block; width: max(1px, .08em); height: .95em; margin: 0 .55em; vertical-align: -.12em; background: currentColor; opacity: .7; }

/* ---------- Hell/Dunkel wechseln (15.10., Pascal: «Übergang unsmooth»): statt kurzem Überblenden öffnet sich die neue Darstellung
   als Kreis vom Schalter aus (Mittelpunkt und Radius setzt entwurf.js). Der Schalter hat eine eigene Ebene und wird live gezeigt,
   so gleitet sein Knopf sichtbar mit. Der Kopf (eigene Ebene «kopf») öffnet sich im gleichen Kreis. */
.thema-schalter { view-transition-name: thema-schalter; }
html.z-themawechsel::view-transition-old(root), html.z-themawechsel::view-transition-old(kopf) { animation: none; }
html.z-themawechsel::view-transition-new(root), html.z-themawechsel::view-transition-new(kopf) { animation: thema-kreis 760ms cubic-bezier(.45, 0, .2, 1) both; }
html.z-themawechsel::view-transition-group(thema-schalter), html.z-themawechsel::view-transition-new(thema-schalter) { animation: none; }
html.z-themawechsel::view-transition-old(thema-schalter) { display: none; }
@keyframes thema-kreis { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); } to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 0)); } }
/* Menü-Titel (Dienstleistungen, Branchen) werden beim Überfahren kräftiger, wie die Einträge (15.10., Pascal) */
.mobil a.nav-titel { transition: font-weight 320ms ease, color 320ms ease; }
.mobil a.nav-titel:is(:hover, :focus-visible) { font-weight: 480; }
/* Menü deckt den Hintergrund stärker ab (16.10., Pascal): hell stärker aufgehellt, dunkel stärker abgedunkelt, etwas mehr Unschärfe */
.mobil { background: color-mix(in srgb, var(--papier) 88%, transparent); -webkit-backdrop-filter: blur(28px) saturate(1.1); backdrop-filter: blur(28px) saturate(1.1); }

/* Lenis (16.10.): Grundregeln aus lenis.css; das native weiche Ankerscrollen übernimmt Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
/* Blur-Verlauf oben weniger hoch (16.10., Pascal: «beginnt sehr früh»): Band unter dem Kopf 110 → 60 px, schmal 56 → 36 px */
.blurkante { --band: 36px; }
@media (min-width: 901px) { .blurkante { --band: 60px; } }

/* ---------- Einstieg-Wolken nur am Rand (16.10., Pascal: «treppenartig»): Die Mitte bleibt ruhig, eine weiche Maske
   (Smootherstep, viele Stufen) lässt Wolken und Zeigerlicht nur zum Rand hin sichtbar werden. Die Wolken sitzen in den Ecken
   und weichen der Maus weiter aus; das Zeigerlicht leuchtet auf, wenn die Maus in Randnähe ist. Gegen Farbstufen: weicher
   Verlauf mit 13 Stufen und ein feines Korn (Dithering). */
.einstieg .wolken { -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 46%, transparent 0%, rgb(0 0 0 / 0.000) 32.0%, rgb(0 0 0 / 0.009) 37.8%, rgb(0 0 0 / 0.058) 43.6%, rgb(0 0 0 / 0.163) 49.4%, rgb(0 0 0 / 0.317) 55.2%, rgb(0 0 0 / 0.500) 61.0%, rgb(0 0 0 / 0.683) 66.8%, rgb(0 0 0 / 0.837) 72.6%, rgb(0 0 0 / 0.942) 78.4%, rgb(0 0 0 / 0.991) 84.2%, rgb(0 0 0 / 1.000) 90.0%); mask-image: radial-gradient(ellipse 72% 68% at 50% 46%, transparent 0%, rgb(0 0 0 / 0.000) 32.0%, rgb(0 0 0 / 0.009) 37.8%, rgb(0 0 0 / 0.058) 43.6%, rgb(0 0 0 / 0.163) 49.4%, rgb(0 0 0 / 0.317) 55.2%, rgb(0 0 0 / 0.500) 61.0%, rgb(0 0 0 / 0.683) 66.8%, rgb(0 0 0 / 0.837) 72.6%, rgb(0 0 0 / 0.942) 78.4%, rgb(0 0 0 / 0.991) 84.2%, rgb(0 0 0 / 1.000) 90.0%); }
.einstieg .wolken span:nth-child(1) { left: -26%; top: -38%; right: auto; bottom: auto; }
.einstieg .wolken span:nth-child(2) { right: -26%; bottom: -42%; left: auto; top: auto; }
.einstieg .wolken span:nth-child(3) { right: -22%; top: -30%; left: auto; bottom: auto; }
.einstieg .wolken::after { width: 64vmax; background: radial-gradient(closest-side, rgb(255 255 255 / 0.2400) 0.0%, rgb(255 255 255 / 0.2388) 8.3%, rgb(255 255 255 / 0.2315) 16.7%, rgb(255 255 255 / 0.2152) 25.0%, rgb(255 255 255 / 0.1896) 33.3%, rgb(255 255 255 / 0.1568) 41.7%, rgb(255 255 255 / 0.1200) 50.0%, rgb(255 255 255 / 0.0832) 58.3%, rgb(255 255 255 / 0.0504) 66.7%, rgb(255 255 255 / 0.0248) 75.0%, rgb(255 255 255 / 0.0085) 83.3%, rgb(255 255 255 / 0.0012) 91.7%, rgb(255 255 255 / 0.0000) 100.0%); }
.einstieg .wolken::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"); }

/* ---------- Dienstleistungen im Einstieg: vier Varianten (16.10., Pascal). Grundlage für alle: Nummer, Icon und Text haben Klassen;
   die alte Regel für alle <span> wird hier neutralisiert. Umschalter darunter nur zum Vergleichen. */
.einstieg-dienste .ed-nr, .einstieg-dienste .ed-ico { display: none; }
.einstieg-dienste .ed-nr, .einstieg-dienste .ed-ico { grid-column: auto; font-size: inherit; opacity: 1; }
.einstieg-dienste .ed-ico svg { display: block; width: 100%; height: 100%; }
.einstieg-dienste .ed-text { font-size: .9375rem; line-height: 1.5; opacity: .82; hyphens: manual; }
.dienste-wahl { margin-top: 1.25rem; background: rgb(255 255 255 / .14); color: #fff; }
.dienste-wahl span { color: rgb(255 255 255 / .75); }
.dienste-wahl button { color: #fff; }
.dienste-wahl button[aria-pressed="true"] { background: #fff; color: var(--tinte); }

/* A – Icon-Karten: Glas wie bisher, aber mit MINT-Icon oben, Pfeil als runder Knopf unten rechts, der sich beim Überfahren füllt */
html[data-dienste="a"] .einstieg-dienste a { display: flex; flex-direction: column; gap: .55rem; padding: 1.6rem 1.6rem 1.4rem; }
html[data-dienste="a"] .einstieg-dienste .ed-ico { display: block; width: 2.6rem; height: 2.6rem; margin-bottom: .5rem; color: var(--mint); }
html[data-dienste="a"] .einstieg-dienste b { font-size: 1.3125rem; }
html[data-dienste="a"] .einstieg-dienste a > .ico { box-sizing: content-box; align-self: flex-end; margin-top: auto; width: 1.1rem; height: 1.1rem; padding: .6rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4); transition: background-color 300ms ease, color 300ms ease, translate 420ms cubic-bezier(.2, .7, .2, 1); }
html[data-dienste="a"] .einstieg-dienste a:hover > .ico { translate: 0 0; background: #fff; color: var(--tinte); }

/* B – Nummerierte Spalten: keine Kästen; eine feine Linie oben, die sich beim Überfahren in Mint füllt; Nummer, grosser Titel, Text */
html[data-dienste="b"] .einstieg-dienste { gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
html[data-dienste="b"] .einstieg-dienste a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1.25rem auto 1fr; align-items: start; grid-template-areas: "nr pfeil" "titel titel" "text text"; gap: .5rem 1rem;
  padding: 1.25rem 0 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-dienste="b"] .einstieg-dienste a::before, html[data-dienste="b"] .einstieg-dienste a::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(255 255 255 / .4); }
html[data-dienste="b"] .einstieg-dienste a::after { height: 2px; background: var(--mint); transform: scaleX(0); transform-origin: left; transition: transform 520ms cubic-bezier(.2, .7, .2, 1); }
html[data-dienste="b"] .einstieg-dienste a:hover { background: none; box-shadow: none; }
html[data-dienste="b"] .einstieg-dienste a:hover::after { transform: scaleX(1); }
html[data-dienste="b"] .einstieg-dienste .ed-nr { display: block; grid-area: nr; font: 600 .8125rem/1 var(--font-schild); letter-spacing: .08em; color: var(--mint); }
html[data-dienste="b"] .einstieg-dienste b { grid-area: titel; font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); font-weight: 400; letter-spacing: -.01em; }
html[data-dienste="b"] .einstieg-dienste .ed-text { grid-area: text; }
html[data-dienste="b"] .einstieg-dienste a > .ico { grid-area: pfeil; }

/* C – Eine Leiste: eine gemeinsame Glasfläche, drei Felder durch feine senkrechte Linien getrennt, Icon links neben dem Titel */
html[data-dienste="c"] .einstieg-dienste { gap: 0; padding: .4rem; border-radius: var(--r-l); background: rgb(255 255 255 / .1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); }
html[data-dienste="c"] .einstieg-dienste li + li { border-left: 1px solid rgb(255 255 255 / .18); }
html[data-dienste="c"] .einstieg-dienste a { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ico titel pfeil" "ico text text"; gap: .3rem .9rem;
  padding: 1.1rem 1.25rem; border-radius: calc(var(--r-l) - .3rem); background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-dienste="c"] .einstieg-dienste a:hover { background: rgb(255 255 255 / .1); box-shadow: none; }
html[data-dienste="c"] .einstieg-dienste .ed-ico { display: block; grid-area: ico; width: 2.1rem; height: 2.1rem; color: var(--mint); }
html[data-dienste="c"] .einstieg-dienste b { grid-area: titel; }
html[data-dienste="c"] .einstieg-dienste .ed-text { grid-area: text; font-size: .875rem; }
html[data-dienste="c"] .einstieg-dienste a > .ico { grid-area: pfeil; }
@media (max-width: 900px) { html[data-dienste="c"] .einstieg-dienste li + li { border-left: 0; border-top: 1px solid rgb(255 255 255 / .18); } }

/* D – Kräftige Kacheln: satte, dunkle Fläche statt Glas, Mint-Leiste oben wächst beim Überfahren, grosses Icon als Wasserzeichen */
html[data-dienste="d"] .einstieg-dienste a { display: flex; flex-direction: column; gap: .5rem; min-height: 11rem; padding: 1.6rem 1.6rem 1.5rem; overflow: hidden;
  background: rgb(6 32 28 / .55); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-dienste="d"] .einstieg-dienste a::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 2.5rem; background: var(--mint); transition: width 520ms cubic-bezier(.2, .7, .2, 1); }
html[data-dienste="d"] .einstieg-dienste a:hover { background: rgb(6 32 28 / .72); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
html[data-dienste="d"] .einstieg-dienste a:hover::before { width: 100%; }
html[data-dienste="d"] .einstieg-dienste .ed-ico { display: block; position: absolute; right: -1.2rem; bottom: -1.4rem; width: 8rem; height: 8rem; color: var(--mint); opacity: .14;
  transition: opacity 400ms ease, scale 600ms cubic-bezier(.2, .7, .2, 1); }
html[data-dienste="d"] .einstieg-dienste a:hover .ed-ico { opacity: .24; scale: 1.06; }
html[data-dienste="d"] .einstieg-dienste b { font-size: 1.3125rem; color: var(--mint); }
html[data-dienste="d"] .einstieg-dienste .ed-text { position: relative; max-width: 30ch; }
html[data-dienste="d"] .einstieg-dienste a > .ico { position: absolute; top: 1.6rem; right: 1.6rem; }

/* ---------- Navigation als Aufklapper im Kopf (16.10., Variante zum Burger; html[data-nav="klapp"], nur ab 901 px) */
.kopf-nav, .nav-wahl { display: none; }
@media (min-width: 901px) {
  .nav-wahl { display: flex; position: fixed; z-index: 60; right: 1rem; bottom: 1rem; margin: 0; box-shadow: 0 4px 18px rgb(0 0 0 / .12); }
  html[data-nav="klapp"] .kopf-zeile .burger { display: none; }
  html[data-nav="klapp"] .kopf-nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
  html[data-nav="klapp"] .kopf-zeile .kopf-cta { margin-left: clamp(.5rem, 1.5vw, 1.25rem); margin-right: 0; }
  .kn-gruppe { position: relative; }
  .kn-knopf { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; padding: .65rem .85rem; border-radius: var(--r); font: 400 1.0625rem/1 var(--font);
    color: var(--tinte); transition: font-weight 260ms ease, background-color 260ms ease; }
  .kn-knopf:hover, .kn-gruppe.z-offen .kn-knopf { font-weight: 560; }
  .kn-knopf:focus-visible { outline: 3px solid var(--mint-tief); outline-offset: 2px; }
  .kn-winkel { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: rotate 320ms cubic-bezier(.2, .7, .2, 1); }
  .kn-gruppe.z-offen .kn-winkel { rotate: 180deg; }
  .seite-start .kopf:not(.z-hell, .z-menue-zu, :has(.burger[aria-expanded="true"])) .kn-knopf { color: #fff; }
  /* Panel: helle Fläche unter dem Knopf, gleiche Zeilen wie im grossen Menü (feine Linien, Pfeil rechts, Icons bei den Branchen) */
  .kn-panel { position: absolute; top: calc(100% + .5rem); left: -.5rem; min-width: 21rem; padding: .75rem 1.25rem 1rem; border-radius: var(--r-l);
    background: color-mix(in srgb, var(--papier) 94%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinte) 8%, transparent), 0 18px 40px -12px rgb(0 0 0 / .22); color: var(--tinte);
    opacity: 0; visibility: hidden; translate: 0 -6px; transition: opacity 220ms ease, translate 320ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 320ms; }
  .kn-gruppe.z-offen .kn-panel { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 220ms ease, translate 320ms cubic-bezier(.2, .7, .2, 1), visibility 0s; }
  .kn-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }   /* Brücke: Maus fällt zwischen Knopf und Panel nicht heraus */
  .kn-panel .menue-liste { gap: 0; }
  .kn-panel .menue-liste li + li, .kn-alle + .menue-liste li:first-child { border-top: 1px solid color-mix(in srgb, var(--tinte) 9%, transparent); }
  .kn-panel a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; color: inherit; text-decoration: none; font: 400 1.0625rem/1.3 var(--font);
    transition: font-weight 260ms ease, color 260ms ease; }
  .kn-panel a:is(:hover, :focus-visible) { font-weight: 560; color: var(--mint-tief); }
  .kn-panel a .ico { flex: none; width: 1.05rem; height: 1.05rem; stroke-width: 1.6; opacity: .55; transition: translate 420ms cubic-bezier(.2, .7, .2, 1), opacity 260ms ease, stroke-width 260ms ease; }
  .kn-panel a:is(:hover, :focus-visible) .ico { translate: -8px 0; opacity: 1; stroke-width: 2.4; }
  .kn-panel .me-ico { display: inline-block; width: .95em; height: .95em; margin-right: .55em; vertical-align: -.12em; color: var(--mint-tief); }
  .kn-alle { font-weight: 600 !important; font-size: .875rem !important; letter-spacing: .02em; color: var(--mint-tief) !important; }
  :root[data-thema="dunkel"] .kn-panel .me-ico, :root[data-thema="dunkel"] .kn-alle { color: var(--mint) !important; }
}
@media (prefers-reduced-motion: reduce) { .kn-panel, .kn-winkel { transition: none !important; } }

}
/* Dunkle Darstellung (Schalter im Kopf, entwurf.js «thema»; gemerkt in localStorage «mint-thema»). Bewusst OHNE @layer:
   diese Regeln liegen über allen Schichten. Der Entwurf arbeitet mit Farb-Tokens – hier werden sie umgestellt; darunter
   stehen nur die Stellen, die feste Farben hatten oder «Tinte» als dunkle Fläche mit weisser Schrift benutzen. */
:root[data-thema="dunkel"] {
  color-scheme: dark;
  --papier: #0b1d1a; --papier-rgb: 11 29 26;
  --zone: #132b27;
  --tinte: #eaf5f1; --tinte-weich: #b7ccc6; --tinte-zart: #98b1aa;
  --mint-tief: #7ad5c0; --mint-hell: #16382f;
  --rohr: #2b4b45; --linie: #1f3d37; --leitung-grund: #1a3530;
  /* ältere Bausteine (Unterseiten) */
  --flaeche: #132b27; --flaeche-tief: #1b4038; --linie-stark: #2b4b45; --akzent-tief: #7ad5c0; --akzent-hell: #16382f;
  --zweit: #eaf5f1; --zweit-tief: #cfe3dc; --zweit-hell: #16382f; --signal: oklch(72% .16 25);
  --schatten-3: 0 0 0 1.5px #2b4b45;
}
/* Phasenfarben: helle Töne für Icons und Schrift, dunkle für die Kacheln (gleicher Verlauf Blau → Grün) */
:root[data-thema="dunkel"] :is(.ph-strategie, .frage[data-phase="strategie"]) { --ph: #a3bbee; --ph-hell: #1a2a45; }
:root[data-thema="dunkel"] :is(.ph-dokumentation, .frage[data-phase="dokumentation"]) { --ph: #85c6ea; --ph-hell: #10303f; }
:root[data-thema="dunkel"] :is(.ph-analyse-optimierung, .frage[data-phase="analyse-optimierung"]) { --ph: #6ccfdc; --ph-hell: #0c3239; }
:root[data-thema="dunkel"] :is(.ph-implementierung, .frage[data-phase="implementierung"]) { --ph: #66d1c4; --ph-hell: #0d342f; }
:root[data-thema="dunkel"] :is(.ph-monitoring, .frage[data-phase="monitoring"]) { --ph: #82d3a8; --ph-hell: #143524; }
:root[data-thema="dunkel"] :is(.ph-projektleitung, .ph-requirements-engineering, .ph-tim) { --ph: #b7ccc6; --ph-hell: #1b302c; }

/* Einstieg der Startseite bleibt eine Mint-Fläche mit weisser Schrift: darin gelten die hellen Farben weiter (etwas tieferes Mint) */
:root[data-thema="dunkel"] .seite-start .vorhang > .einstieg { --e-farbe: #143c35; --tinte: #0f3a35; --papier: #fff; --zone: #f2f4f3; --mint-hell: #dcf4ec; --mint-tief: #1c7360; }
:root[data-thema="dunkel"] .einstieg[data-phase] .knopf-tinte,
:root[data-thema="dunkel"] .seite-start .kopf:not(.z-hell, .z-menue-zu, :has(.burger[aria-expanded="true"])) .kopf-cta { --grund: #fff; --text: #0f3a35; --fuell: #dcf4ec; --text-fuell: #0f3a35; }
:root[data-thema="dunkel"] .einstieg[data-phase] .knopf-kontur { --text-fuell: #0f3a35; }

/* «Tinte» als Fläche: im Dunkeln hell – die Schrift darauf wird dunkel */
:root[data-thema="dunkel"] :is(.knopf-tinte, .knopf-primaer) { --text: var(--papier); --fuell: var(--mint); --text-fuell: var(--papier); }
:root[data-thema="dunkel"] .knopf-kontur { --text-fuell: var(--papier); }
:root[data-thema="dunkel"] :is(.filter .chip[aria-pressed="true"], .klapp.z-offen .zeichen, .sprung, .g-karte, .g-az a:hover) { color: var(--papier); }
:root[data-thema="dunkel"] .filter .chip[aria-pressed="true"] .zahl { background: rgb(0 0 0 / .12); }
:root[data-thema="dunkel"] .g-karte-text { color: color-mix(in srgb, var(--papier) 84%, transparent); }
:root[data-thema="dunkel"] .g-karte-link { color: #1c7360; }
:root[data-thema="dunkel"] .g-karte-link:focus-visible { outline-color: var(--papier); }
:root[data-thema="dunkel"] .zeiger line { stroke: var(--papier); }
/* Phasenfarbe als Fläche (ist im Dunkeln hell): Schrift und Häkchen darauf dunkel */
:root[data-thema="dunkel"] :is(.stufe:has(input:checked), [class*="ph-"] .haken, .lz[data-lz] .lz-kachel .haken, .lz-nav .lz-kr) { color: var(--papier); }
:root[data-thema="dunkel"] .lz[data-lz] .lz-kachel .knopf-tinte { --text: var(--papier); --fuell: var(--ph); --text-fuell: var(--papier); }

/* Schalter Problem/Lösung: der helle Knopf trägt dunkle Schrift, ebenso alles auf der Mint-Bahn */
:root[data-thema="dunkel"] .stau:not(.z-offen) .ventil .schalter-wort:nth-child(2),
:root[data-thema="dunkel"] .stau.z-offen .ventil .schalter-wort { color: #0f3a35; }

/* Logos: Kundenlogos (dunkel auf Weiss) werden zu hellen Zeichen; die farbigen Partnerlogos und die Kundenlogos bei den
   Staustellen bekommen ein helles Schild */
:root[data-thema="dunkel"] :is(.logos, .beweis-logos) img,
:root[data-thema="dunkel"] .logos li:hover img { filter: grayscale(1) invert(1); mix-blend-mode: screen; opacity: .82; }
/* der Rahmen trägt die Seitenfarbe: das umgekehrte Weiss des Logos (Schwarz) verschmilzt darin – auch im laufenden Band */
:root[data-thema="dunkel"] :is(.logos, .beweis-logos) .logo-rahmen { background: var(--papier); isolation: isolate; }
:root[data-thema="dunkel"] .partner-logo { width: fit-content; padding: .55rem .8rem; border-radius: var(--pille); background: #fff; }
:root[data-thema="dunkel"] .stau-kunde .logo-rahmen { background: #fff; box-shadow: 0 0 0 6px #fff; border-radius: 1px; }
:root[data-thema="dunkel"] .stau .logo-rahmen img { mix-blend-mode: normal; }

/* Farbwolken: im Dunkeln leise Lichter statt Pastellflächen */
:root[data-thema="dunkel"] .zone.hat-wolken { --w1: rgb(83 193 170 / .09); --w2: rgb(96 140 230 / .09); --w3: rgb(255 255 255 / .02); }
:root[data-thema="dunkel"] .auslass.hat-wolken { --w1: rgb(83 193 170 / .2); --w2: rgb(83 193 170 / .1); --w3: rgb(96 150 230 / .12); }
:root[data-thema="dunkel"] .fuss.hat-wolken { --w1: rgb(83 193 170 / .2); --w2: rgb(80 130 220 / .16); --w3: rgb(60 170 140 / .14); }
:root[data-thema="dunkel"] .seite-start .vorhang > .einstieg.hat-wolken { --w1: rgb(83 193 170 / .26); --w2: rgb(4 30 26 / .55); --w3: rgb(83 193 170 / .12); }   /* Einstieg im Dunkeln tiefgrün, Wolken als Mint-Licht 

/* Leitung und Knoten: Phasenverlauf in den hellen Tönen */
:root[data-thema="dunkel"] #leitung-verlauf stop:nth-child(1) { stop-color: #a3bbee; }
:root[data-thema="dunkel"] #leitung-verlauf stop:nth-child(2) { stop-color: #85c6ea; }
:root[data-thema="dunkel"] #leitung-verlauf stop:nth-child(3) { stop-color: #6ccfdc; }
:root[data-thema="dunkel"] #leitung-verlauf stop:nth-child(4) { stop-color: #66d1c4; }
:root[data-thema="dunkel"] #leitung-verlauf stop:nth-child(5) { stop-color: #82d3a8; }
:root[data-thema="dunkel"] main .knoten { --kn-farbe: var(--mint) !important; }

/* Bilder leicht zurücknehmen, damit sie im Dunkeln nicht blenden */
:root[data-thema="dunkel"] :is(.bildrahmen, .ref-foto, .einstieg-foto, .portrait, .zitat-foto) > img:not(.ref-negativ) { filter: brightness(.9); }

/* Knöpfe, die sich mit der (im Dunkeln hellen) Schriftfarbe füllen: Symbol beim Überfahren dunkel, sonst weiss auf hell (11.10.) */
:root[data-thema="dunkel"] :is(.knopf-symbol, .knopf-rund) { --text-fuell: #0b1d1a; }
/* Partnerlogos im Dunkeln: alle weissen Felder gleich gross (volle Kartenbreite, feste Höhe), Logo mittig */
:root[data-thema="dunkel"] .partner-logo { box-sizing: border-box; width: 100%; height: 5.25rem; display: grid; place-items: center; justify-items: center; padding: .6rem 1rem; }
/* Kundenlogos auch im Dunkeln farbig (11.10.): auf weissen Feldern statt grau invertiert */
:root[data-thema="dunkel"] :is(.logos, .beweis-logos) img,
:root[data-thema="dunkel"] .logos li:hover img { filter: none; mix-blend-mode: multiply; opacity: 1; }
:root[data-thema="dunkel"] .logos li { background: #fff; border-radius: var(--pille); }
:root[data-thema="dunkel"] :is(.logos, .beweis-logos) .logo-rahmen { background: #fff; }
/* Aufbau nach Kunden-Prototyp (11.10.): neue Bausteine im Dunkeln */
:root[data-thema="dunkel"] .vg-vorher .vg-rolle { background: rgb(242 194 48 / .16); color: #f2d47a; }
:root[data-thema="dunkel"] :is(.evaluation, .entscheidungshilfe) { background: #1d4740 !important; }
:root[data-thema="dunkel"] .evaluation .knopf { --grund: #fff; --text: #0b1d1a; }
:root[data-thema="dunkel"] .lk-fuehrung { background: rgb(199 171 208 / .16); color: #d9c3e0; }
:root[data-thema="dunkel"] .lk-kette .lk-kern { color: #0b1d1a; }
:root[data-thema="dunkel"] .kurs { --lotse: #c7abd0; }
:root[data-thema="dunkel"] :is(.kunden-logos, .branche-referenz .kunden-logos) li { padding: .5rem .8rem; border-radius: var(--r); background: #fff; }
:root[data-thema="dunkel"] .lsg-logo { width: fit-content; padding: .4rem .8rem; border-radius: var(--r); background: #fff; }
:root[data-thema="dunkel"] .lsg-logo:not(:has(img)) { display: none; }
:root[data-thema="dunkel"] .einstieg-dienste { border-color: rgb(255 255 255 / .25); }
/* Kundenlogos (13.10.): hell farbig, dunkel als weisse SVG-Logos ohne Schild (wo es eine negative Version gibt) */
.logo-neg { display: none; }
:root[data-thema="dunkel"] .kunden-logos li:has(.logo-neg) { padding: 0; background: none; }
:root[data-thema="dunkel"] .kunden-logos.raster li:has(.logo-neg) { padding: 1rem; background: #132b27; }
:root[data-thema="dunkel"] .kunden-logos li:has(.logo-neg) .logo-rahmen { display: none; }
:root[data-thema="dunkel"] .kunden-logos .logo-neg { display: block; max-width: 100%; height: auto; opacity: .92; }
/* Logos im Dunkeln in eigenen Feldern (sonst verschmelzen die weissen Zeichen mit dem Text) */
:root[data-thema="dunkel"] .kunden-logos li:has(.logo-neg) { padding: .75rem 1rem; background: #16302b; border-radius: var(--r-l); box-shadow: inset 0 0 0 1px rgb(234 245 241 / .08); }
:root[data-thema="dunkel"] .kunden-logos .logo-neg { opacity: .78; max-height: 2.4rem; width: auto; }
:root[data-thema="dunkel"] .kurs-weich { --ks-form: #53c1aa; --ks-rumpf: #eaf5f1; --ks-mast: #eaf5f1; --ks-segel1: #53c1aa; --ks-segel2: #1f5c50; --ks-segel3: #3a9d88; --ks-segel4: #173f37;
  --ks-schatten: rgb(83 193 170 / .25); }