/* Human Capital Group — Auftritt.
   Ruhig und sachlich: Personaldienstleistung lebt von Vertrauen, nicht von
   Effekten. Viel Weissraum, klare Typografie.

   Palette seit 18.09.2026 = Logo „Human Capital by Feldmann": Verlauf
   Magenta #F20DFF → Violett #A80BFF → Blau #2B5BFA → Cyan #00E5FB auf
   dunklem Violettschwarz #1B0433→#05010F.

   ⚠ Die Neontöne gelten NUR auf dunklem Grund. Gegen Weiss erreicht Magenta
   #F20DFF 3,35:1 und Cyan #00E5FB 1,54:1 — beides weit unter der Norm. Für
   Text und Bedienelemente auf Weiss stehen deshalb abgedunkelte Geschwister:
   Violett #7C2BE0 (6,4:1), Magenta #BE10C4 (5,2:1), Cyan #00788E (5,2:1),
   Alarm #C81E55 (5,6:1). Alle gegen Weiss gemessen, nicht geschaetzt. */

:root {
  --neon-magenta:  #F20DFF;
  --neon-violett:  #A80BFF;
  --neon-blau:     #2B5BFA;
  --neon-cyan:     #00E5FB;
  --grund:        #ffffff;
  --grund-sanft:  #F6F3FC;
  --grund-tief:   #1B0433;
  --grund-tief-2: #05010F;
  --text:         #14101F;
  --text-sanft:   #57506B;
  --text-still:   #7C7590;
  --linie:        #E9E3F5;
  --linie-stark:  #CFC5E4;
  --akzent:       #7C2BE0;
  --akzent-hell:  #F1E8FE;
  --akzent-text:  #6B21C8;
  --rot:          #BE10C4;
  --rot-dunkel:   #A8149B;
  --rot-hell:     #FBE8FD;
  --knopf-text:   #ffffff;
  --breite:       1120px;
  --radius:       6px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund:       #0E0A1C;
    --grund-sanft: #181233;
    --grund-tief:  #1B0433;
    --grund-tief-2:#05010F;
    --text:        #F3F0FF;
    --text-sanft:  #B9AEDC;
    --text-still:  #8B82AD;
    --linie:       #2C2450;
    --linie-stark: #453A6E;
    /* auf Dunkel darf das Neon selbst leuchten */
    --akzent:      #A80BFF;
    --akzent-hell: #241046;
    --akzent-text: #D8A6FF;
    --rot:         #F20DFF;
    --rot-dunkel:  #C800D8;
    --rot-hell:    #2E0B33;
    --knopf-text:  #ffffff;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}

.mitte { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.12rem; }
p  { margin: 0 0 1em; }
a  { color: var(--akzent-text); }

/* ---------------------------------------------------------------- Kopf */
header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linie);
}
.kopf { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.marke { display: flex; align-items: center; gap: 11px; font-weight: 680; letter-spacing: -.02em;
         text-decoration: none; color: var(--text); font-size: 1.05rem; }
/* Wortmarke: das Bildzeichen des Logos plus „HUMAN CAPITAL". Zwei Dateien,
   benannt nach dem Untergrund — im Kopf (weiss) die abgedunkelte Fassung, im
   Fuss (dunkel) die Neonfassung. */
.wortmarke { display: inline-flex; align-items: center; gap: 9px; flex: none; line-height: 1; }
.wortmarke img { width: 34px; height: 34px; display: block; }
.wortmarke .wort { font-size: 15px; font-weight: 300; letter-spacing: 2.2px; color: var(--text); white-space: nowrap; }
.wortmarke .wort em { font-style: normal; color: var(--rot-dunkel); }
footer .wortmarke .wort { color: #fff; }
footer .wortmarke .wort em { color: var(--neon-magenta); }
.marke .name { font-weight: 600; letter-spacing: -.01em; }
.kopf nav { display: flex; gap: 26px; align-items: center; }
.kopf nav a { color: var(--text-sanft); text-decoration: none; font-size: .93rem; font-weight: 520; }
.kopf nav a:hover { color: var(--akzent-text); }
/* ⚠ Auf schmalen Bildschirmen die Navigation NICHT einfach ausblenden — dann
   kommt vom Handy aus niemand mehr zu den Abschnitten. Stattdessen wandert sie
   unter das Logo und wird waagerecht scrollbar. Ohne JavaScript, damit sie
   auch dann funktioniert, wenn sonst etwas klemmt. */
@media (max-width: 820px) {
  header { position: static; }
  .kopf { height: auto; flex-direction: column; align-items: stretch; gap: 0; padding-top: 12px; }
  .kopf nav {
    gap: 20px; overflow-x: auto; padding: 12px 0 11px;
    margin: 10px -24px 0; padding-left: 24px; padding-right: 24px;
    border-top: 1px solid var(--linie);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .kopf nav::-webkit-scrollbar { display: none; }
  .kopf nav a { white-space: nowrap; }
  .aufmacher { padding: 52px 0 48px; }
  section { padding: 52px 0; }
}

/* -------------------------------------------------------------- Aufmacher */
.aufmacher { padding: 84px 0 72px; border-bottom: 1px solid var(--linie); }
.aufmacher .schild {
  display: inline-block; margin-bottom: 20px; padding: 5px 13px; border-radius: 100px;
  background: var(--akzent-hell); color: var(--akzent-text);
  font-size: .8rem; font-weight: 600; letter-spacing: .02em;
}
.aufmacher p.fuehrung {
  font-size: clamp(1.05rem, 2.2vw, 1.28rem); color: var(--text-sanft);
  max-width: 62ch; margin-bottom: 32px;
}
.knopfreihe { display: flex; gap: 12px; flex-wrap: wrap; }
.knopf {
  display: inline-block; padding: 12px 24px; border-radius: 4px;
  text-decoration: none; font-weight: 600; font-size: .95rem; border: 1px solid transparent;
}
.knopf.voll   { background: var(--rot); color: var(--knopf-text); }
.knopf.voll:hover { background: var(--rot-dunkel); }
.knopf.leer   { border-color: var(--linie-stark); color: var(--text); }
.knopf.leer:hover { border-color: var(--akzent); color: var(--akzent-text); }
.knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ------------------------------------------------------------- Abschnitte */
section { padding: 72px 0; border-bottom: 1px solid var(--linie); }
section.sanft { background: var(--grund-sanft); }
.abschnittskopf { max-width: 68ch; margin-bottom: 44px; }
.abschnittskopf .ueber {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--akzent-text); margin-bottom: 10px;
}
.abschnittskopf p { color: var(--text-sanft); margin-bottom: 0; }

/* ---------------------------------------------------------------- Raster */
.raster { display: grid; gap: 20px; }
.raster.zwei  { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.raster.drei  { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.raster.vier  { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.karte {
  background: var(--grund); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 26px;
}
section.sanft .karte { border-color: transparent; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
section.sanft .karte { background: var(--grund); }
.karte h3 { display: flex; align-items: center; gap: 10px; margin-bottom: .5em; }
.karte h3 .sinnbild {
  width: 32px; height: 32px; border-radius: 6px; flex: none;
  background: var(--akzent-hell); color: var(--akzent-text);
  display: grid; place-items: center; font-size: .95rem;
}
.karte h3 .sinnbild .sb { width: 19px; height: 19px; display: block; }
.karte p { color: var(--text-sanft); font-size: .94rem; margin-bottom: 0; }
.karte ul { margin: 12px 0 0; padding-inline-start: 18px; color: var(--text-sanft); font-size: .91rem; }
.karte ul li { margin-bottom: 5px; }

/* -------------------------------------------------------------- Kennzahlen */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px;
          background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius);
          overflow: hidden; }
.zahl { background: var(--grund); padding: 26px 22px; text-align: center; }
.zahl .wert { font-size: 2.1rem; font-weight: 700; color: var(--akzent); line-height: 1.1;
              font-variant-numeric: tabular-nums; }
.zahl .was  { font-size: .86rem; color: var(--text-sanft); margin-top: 5px; }

/* ------------------------------------------------------------- Modulliste */
.module { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 44px; }
.modul { padding: 20px 0; border-bottom: 1px solid var(--linie); }
.modul:last-child { border-bottom: none; }
.modul h3 { margin-bottom: .3em; font-size: 1.02rem; }
.modul p  { color: var(--text-sanft); font-size: .92rem; margin: 0; }

/* ---------------------------------------------------------------- Hinweis */
.hinweis {
  border-inline-start: 3px solid var(--akzent); background: var(--akzent-hell);
  padding: 18px 22px; border-radius: 0 6px 6px 0; margin: 28px 0 0;
}
.hinweis p { margin: 0; font-size: .93rem; color: var(--akzent-text); }

/* ------------------------------------------------------------------ Fuss */
footer { background: linear-gradient(160deg, var(--grund-tief), var(--grund-tief-2));
         color: #b9c4d3; padding: 52px 0 34px; }
footer a { color: #b9c4d3; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }
footer .marke { color: #fff; margin-bottom: 12px; }
.fussraster { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 34px; }
@media (max-width: 980px) { .fussraster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .fussraster { grid-template-columns: 1fr; gap: 26px; } }
.fussraster h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
                 color: #8a97a6; margin: 0 0 12px; font-weight: 700; }
.fussraster ul { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.fussraster ul li { margin-bottom: 7px; }
.fussraster > div:first-child p { color: #b9c4d3; font-size: .92rem; max-width: 42ch; }
.fusszeile { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; font-size: .86rem; color: #8a97a6;
             display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* =====================================================================
   Schaubilder
   Alle Grafiken sind inline-SVG und nehmen ihre Farben aus denselben
   Variablen wie die Seite — damit sie in Hell und Dunkel stimmen, ohne
   dass zwei Fassungen gepflegt werden muessen. Rasterbilder koennten das
   nicht und waeren in einem der beiden Modi immer falsch.
   ===================================================================== */

.schaubild {
  background: var(--grund); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 30px 26px; margin: 0 0 22px;
}
section.sanft .schaubild { background: var(--grund); }
.schaubild figcaption {
  margin-top: 16px; font-size: .88rem; color: var(--text-sanft);
  text-align: center; line-height: 1.55;
}
/* Breite Diagramme duerfen scrollen — aber nur sie selbst, nie die Seite. */
.schaubild .rollfeld { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.schaubild svg { display: block; max-width: 100%; height: auto; }
.schaubild svg text { font-family: inherit; }

/* Farbrollen im SVG */
.sv-flaeche  { fill: var(--akzent-hell); }
.sv-rand     { stroke: var(--linie); }
.sv-akzent   { fill: var(--akzent); }
.sv-linie    { stroke: var(--akzent); }
.sv-titel    { fill: var(--text); font-weight: 640; }
.sv-text     { fill: var(--text-sanft); }
.sv-auf      { fill: var(--akzent-text); font-weight: 600; }
.sv-blass    { stroke: var(--linie); fill: none; }
.sv-rot      { fill: var(--rot); }
.sv-rot-linie{ stroke: var(--rot); }
.sv-grau     { fill: var(--text-still); }
.sv-grau-linie { stroke: var(--text-still); }

/* ------------------------------------------------------------ Ablauf */
.ablauf { counter-reset: schritt; display: grid; gap: 0;
          grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.schritt { position: relative; padding: 0 22px 26px 0; }
.schritt .nr {
  counter-increment: schritt; width: 34px; height: 34px; border-radius: 50%;
  background: var(--akzent); color: var(--knopf-text);
  display: grid; place-items: center; font-weight: 700; font-size: .92rem;
  margin-bottom: 13px;
}
.schritt .nr::before { content: counter(schritt); }
.schritt h3 { font-size: 1rem; margin-bottom: .35em; }
.schritt p  { color: var(--text-sanft); font-size: .92rem; margin: 0; }

/* ----------------------------------------------------------- Tabelle */
.matrix { width: 100%; border-collapse: collapse; font-size: .9rem; }
.matrix th, .matrix td { padding: 11px 12px; text-align: left;
                         border-bottom: 1px solid var(--linie); }
.matrix thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
                   color: var(--text-sanft); font-weight: 700; }
.matrix tbody th { font-weight: 620; color: var(--text); white-space: nowrap; }
.matrix td { text-align: center; color: var(--text-sanft); }
.matrix .ja   { color: var(--akzent-text); font-weight: 700; }
.matrix .teil { color: var(--text-sanft); }
.matrix .nein { color: var(--linie-stark); }
.tabellenfeld { overflow-x: auto; }

/* --------------------------------------------------------- Zweispalt */
.zweispalt { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
@media (max-width: 860px) { .zweispalt { grid-template-columns: 1fr; gap: 28px; } }
.zweispalt h3 { margin-top: 0; }
.liste-haken { list-style: none; margin: 0; padding: 0; }
.liste-haken li { position: relative; padding-inline-start: 28px; margin-bottom: 11px;
                  color: var(--text-sanft); font-size: .94rem; }
.liste-haken li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .45em;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--akzent-hell);
  box-shadow: inset 0 0 0 1.5px var(--akzent);
}

/* ------------------------------------------------------------- Fragen */
.frage { border-bottom: 1px solid var(--linie); padding: 20px 0; }
.frage:last-child { border-bottom: none; }
.frage summary {
  cursor: pointer; font-weight: 620; font-size: 1rem; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: "+"; color: var(--akzent-text); font-size: 1.3rem; flex: none; }
.frage[open] summary::after { content: "−"; }
.frage p { color: var(--text-sanft); font-size: .94rem; margin: 12px 0 0; max-width: 72ch; }

/* ------------------------------------------------- Fließtext und Lücken */
.fliess { max-width: 70ch; }
.fliess h3 { margin-top: 1.8em; }

.luecke {
  background: var(--rot-hell); border-inline-start: 3px solid var(--rot); color: var(--text);
  padding: 18px 22px; border-radius: 0 6px 6px 0; margin: 0 0 32px;
}
.luecke p { margin: 0; font-size: .93rem; }
.luecke a { color: inherit; }

.platzhalter {
  background: var(--akzent-hell); color: var(--akzent-text);
  padding: 1px 7px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em;
}

/* Die gerade geöffnete Seite in der Navigation hervorheben — ohne das rät
   man auf einer Mehrseiten-Site, wo man sich befindet. */
.kopf nav a[aria-current="page"] {
  color: var(--akzent-text); font-weight: 640;
  box-shadow: inset 0 -2px 0 var(--akzent);
  padding-bottom: 3px;
}

/* ------------------------------------------- Diagramm oder Textfassung
   Ein achtstufiges Ablaufbild passt nicht auf ein Telefon. Heruntergerechnet
   wäre die Schrift 3 Pixel groß, seitliches Wischen zeigte nie das Ganze.
   Unterhalb von 760px tritt deshalb eine Textfassung an seine Stelle. */
.nur-schmal { display: none; }
@media (max-width: 760px) {
  .nur-breit  { display: none; }
  .nur-schmal { display: block; }
  .schaubild  { padding: 22px 18px; }
}

.folge { list-style: none; counter-reset: f; margin: 0; padding: 0; }
.folge li {
  counter-increment: f; position: relative; padding-block: 0 15px; padding-inline: 40px 0;
  border-inline-start: 2px solid var(--linie); margin-inline-start: 13px;
}
.folge li:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
.folge li::before {
  content: counter(f); position: absolute; inset-inline-start: -14px; top: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--akzent); color: var(--knopf-text);
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}
.folge li strong { display: block; font-size: .96rem; margin-bottom: 2px; }
.folge li span   { display: block; color: var(--text-sanft); font-size: .89rem; line-height: 1.5; }
.ampelzeile { margin: 14px 0 0; font-size: .89rem; color: var(--text-sanft); }

.gruppe { padding: 12px 0; border-bottom: 1px solid var(--linie); }
.gruppe:last-child { border-bottom: none; }
.gruppe h4 { margin: 0 0 4px; font-size: .95rem; color: var(--akzent-text); }
.gruppe p  { margin: 0; font-size: .88rem; color: var(--text-sanft); line-height: 1.55; }

/* =====================================================================
   Bewegung (Startseite)
   Alles CSS-Animation und SMIL im SVG; bewegung.js schaltet nur Klassen
   und zaehlt Zahlen hoch. Wer Bewegung abgeschaltet hat, bekommt die
   Grafiken still — unten im Block prefers-reduced-motion.
   ===================================================================== */

/* ------------------------------------------------------------- Einblenden
   Nur wenn JavaScript laeuft (html.js) starten Abschnitte unsichtbar —
   sonst bliebe die Seite ohne Skript leer. */
html.js section, html.js .protokoll, html.js .schaubild, html.js .zahlen {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
html.js .zeig, html.js .zeig .protokoll, html.js .zeig .schaubild, html.js .zeig .zahlen {
  opacity: 1; transform: none;
}
html.js section .karte { transition: transform .5s ease, opacity .5s ease, box-shadow .3s ease;
                         opacity: 0; transform: translateY(14px); }
html.js section.zeig .karte { opacity: 1; transform: none; }
html.js section.zeig .karte:nth-child(2) { transition-delay: .08s; }
html.js section.zeig .karte:nth-child(3) { transition-delay: .16s; }
html.js section.zeig .karte:nth-child(4) { transition-delay: .24s; }
.karte:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 34px rgba(0,0,0,.10); }
.karte h3 .sinnbild { transition: transform .3s ease, background .3s ease, color .3s ease; }
.karte:hover h3 .sinnbild { transform: rotate(-8deg) scale(1.08); background: var(--akzent); color: #fff; }

/* -------------------------------------------------------------- Aufmacher */
.aufmacher.held { position: relative; overflow: hidden; padding: 64px 0 60px; }
.held-raster { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center;
               position: relative; }
.held-text h1 { max-width: 16ch; }
/* ⚠ min-width: 0 — sonst zwingt die Mindestbreite des SVG die Spalte
   auf dem Telefon ueber den Bildschirmrand, und der Text wird abgeschnitten. */
.held-raster > * { min-width: 0; }
.held-grafik { display: flex; justify-content: center; }
.held-grafik svg { width: 100%; max-width: min(480px, 100%); height: auto; }
@media (max-width: 900px) {
  .held-raster { grid-template-columns: 1fr; gap: 28px; }
  .held-text h1 { max-width: none; }
  .held-grafik svg { max-width: 360px; }
}

/* Weich wandernde Farbflaechen hinter dem Aufmacher */
.held-hintergrund { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fleck { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .2;
         will-change: transform; }
.fleck-1 { width: 460px; height: 460px; right: 40px; top: -140px; background: var(--akzent);
           animation: treiben-1 22s ease-in-out infinite alternate; }
.fleck-2 { width: 340px; height: 340px; right: 24%; bottom: -170px; background: var(--rot);
           opacity: .13; animation: treiben-2 26s ease-in-out infinite alternate; }
.fleck-3 { width: 300px; height: 300px; left: -140px; top: 30%; background: var(--akzent);
           opacity: .18; animation: treiben-3 30s ease-in-out infinite alternate; }
@keyframes treiben-1 { to { transform: translate(-90px, 70px) scale(1.12); } }
@keyframes treiben-2 { to { transform: translate(120px, -60px) scale(.9); } }
@keyframes treiben-3 { to { transform: translate(70px, -80px) scale(1.15); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fleck { opacity: .22; }
  :root:not([data-theme="light"]) .fleck-2 { opacity: .14; }
}

/* -------------------------------------------------------------- Kreislauf */
.kreislauf { overflow: visible; }
.kreislauf text { font-family: inherit; }
.kl-ring { fill: none; stroke: var(--linie-stark); stroke-width: 1; transform-box: fill-box;
           transform-origin: center; }
.kl-ring-1 { stroke-dasharray: 3 6; animation: drehen 40s linear infinite reverse; }
.kl-ring-2 { stroke: var(--akzent); opacity: .35; stroke-dasharray: 1 0; }
.kl-ring-3 { stroke-dasharray: 8 10; animation: drehen 70s linear infinite; }
.kl-impuls { fill: var(--akzent); filter: drop-shadow(0 0 4px var(--akzent)); }
.kl-impuls-rot { fill: var(--rot); filter: drop-shadow(0 0 4px var(--rot)); }
.kl-orbit { transform-box: fill-box; transform-origin: center; animation: drehen 48s linear infinite; }
.kl-speiche { stroke: var(--linie); stroke-width: 1; }
.kl-station { transform-box: fill-box; transform-origin: center; }
.kl-zurueck { transform-box: fill-box; transform-origin: center;
              animation: drehen 48s linear infinite reverse; }
.kl-station rect { fill: var(--grund); stroke: var(--akzent); stroke-width: 1.5;
                   filter: drop-shadow(0 6px 14px rgba(0,0,0,.10)); }
.kl-station text { fill: var(--akzent-text); font-size: 13px; font-weight: 650; }
.kl-rot rect { stroke: var(--rot); }
.kl-rot text { fill: var(--rot); }
.kl-station { animation: atmen 7.8s ease-in-out infinite; }
.kl-mitte { fill: #fff; stroke: var(--linie-stark); stroke-width: 1;
            filter: drop-shadow(0 10px 28px rgba(0,0,0,.14)); }
.kl-mitte-puls { fill: none; stroke: var(--akzent); stroke-width: 2; transform-box: fill-box;
                 transform-origin: center; animation: pulsring 3.6s ease-out infinite; }
.kl-marke { font-size: 44px; font-weight: 800; letter-spacing: .5px; }
.kl-hc { fill: var(--akzent); }
.kl-g  { fill: var(--rot); }
@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes atmen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes pulsring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.75); opacity: 0; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kl-station rect { fill: var(--grund-sanft); }
}

/* ------------------------------------------------------- Prozesskette lebt */
.pk-puls { fill: var(--akzent); filter: drop-shadow(0 0 6px var(--akzent)); }
.pk-station { animation: aufleuchten 9s ease-out infinite; transform-box: fill-box;
              transform-origin: center; }
@keyframes aufleuchten {
  0%, 100% { stroke: var(--linie); fill: var(--akzent-hell); transform: scale(1); }
  2%       { stroke: var(--akzent); fill: var(--akzent-hell); transform: scale(1.05); }
  14%      { stroke: var(--linie); transform: scale(1); }
}

/* ----------------------------------------------------- Kennzahlen mit Ring */
.zahl { position: relative; padding-top: 22px; }
.ring { width: 60px; height: 60px; display: block; margin: 0 auto 6px; transform: rotate(-90deg); }
.ring-spur { fill: none; stroke: var(--linie); stroke-width: 5; }
.ring-wert { fill: none; stroke: var(--akzent); stroke-width: 5; stroke-linecap: round;
             stroke-dashoffset: 163.4; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1); }
.zeig .ring-wert { stroke-dashoffset: var(--voll); }
.zahl .wert { font-size: 2.3rem; }

/* ---------------------------------------------------------- Prüfprotokoll */
.protokoll { display: grid; grid-template-columns: 1fr 1.4fr; gap: 36px; align-items: center;
             background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius);
             padding: 30px; margin: 0 0 28px; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
@media (max-width: 860px) { .protokoll { grid-template-columns: 1fr; gap: 22px; padding: 22px; } }
.pp-links h3 { margin-top: 14px; }
.pp-links p { color: var(--text-sanft); font-size: .94rem; margin: 0; }
.pp-schild { width: 96px; height: 96px; display: block; overflow: visible; }
.pp-ring { fill: none; stroke: var(--akzent); stroke-width: 1.5; opacity: .5; transform-box: fill-box;
           transform-origin: center; animation: pulsring 3s ease-out infinite; }
.pp-ring-2 { animation-delay: 1.5s; }
.pp-form { fill: var(--akzent-hell); stroke: var(--akzent); stroke-width: 2; stroke-linejoin: round; }
.pp-haken { fill: none; stroke: var(--akzent-text); stroke-width: 4; stroke-linecap: round;
            stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50;
            animation: haken 3s ease-out infinite; }
@keyframes haken { 0% { stroke-dashoffset: 50; } 25%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 50; } }
.pp-rechts { background: var(--grund-sanft); border: 1px solid var(--linie); border-radius: 6px;
             padding: 14px 16px 10px; overflow: hidden; }
.pp-kopf { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700;
           letter-spacing: .08em; text-transform: uppercase; color: var(--text-sanft); margin-bottom: 8px; }
.pp-kopf em { font-style: normal; color: var(--rot); }
.pp-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--rot);
            animation: blinken 1.6s ease-in-out infinite; }
@keyframes blinken { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.pp-liste { list-style: none; margin: 0; padding: 0; font-size: .82rem;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pp-liste li { display: grid; grid-template-columns: 62px 1.05fr 1.6fr .8fr; gap: 10px; align-items: baseline;
               padding: 7px 0; border-top: 1px solid var(--linie); max-height: 60px;
               transition: opacity .4s ease, transform .4s ease, max-height .4s ease, padding .4s ease; }
.pp-liste li:first-child { border-top: none; }
.pp-liste time { color: var(--text-still); }
.pp-objekt { color: var(--akzent-text); font-weight: 600; white-space: nowrap; }
.pp-was { color: var(--text); }
.pp-wer { color: var(--text-sanft); text-align: end; }
.pp-liste li.pp-neu { opacity: 0; transform: translateY(10px); }
.pp-liste li.pp-weg { opacity: 0; transform: translateY(-8px); max-height: 0; padding: 0; overflow: hidden; }
@media (max-width: 560px) {
  .pp-liste li { grid-template-columns: 58px 1fr; }
  .pp-wer { display: none; }
  .pp-was { grid-column: 2; }
}

/* ----------------------------------------------------- Bewegung abgeschaltet */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .001ms !important; }
  html.js section, html.js .protokoll, html.js .schaubild, html.js .zahlen, html.js section .karte {
    opacity: 1; transform: none; }
  .kl-impuls, .kl-impuls-rot, .pk-puls { display: none; }
  .ring-wert { stroke-dashoffset: var(--voll); }
  .pp-haken { stroke-dashoffset: 0; }
}

/* ---------------------------------------------- Bewegung auf den Unterseiten */

/* Aufmacher: Inhalt gleitet beim Laden herein, Farbflecke dahinter */
.aufmacher.belebt { position: relative; overflow: hidden; }
.aufmacher.belebt .fleck-1 { width: 380px; height: 380px; right: -60px; top: -180px; opacity: .16; }
.aufmacher.belebt .fleck-2 { width: 280px; height: 280px; right: 30%; bottom: -180px; opacity: .1; }
.aufmacher.belebt .mitte { position: relative; }
.aufmacher .schild, .aufmacher h1, .aufmacher .fuehrung, .aufmacher .knopfreihe {
  animation: hereingleiten .7s cubic-bezier(.2,.7,.2,1) both;
}
.aufmacher h1 { animation-delay: .08s; }
.aufmacher .fuehrung { animation-delay: .16s; }
.aufmacher .knopfreihe { animation-delay: .24s; }
.held-grafik { animation: hereingleiten 1s cubic-bezier(.2,.7,.2,1) .2s both; }
@keyframes hereingleiten { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Ablauf-Schritte (Für Unternehmen): gestaffelt, Nummer springt auf */
html.js .schritt { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
html.js section.zeig .schritt { opacity: 1; transform: none; }
html.js section.zeig .schritt:nth-child(2) { transition-delay: .1s; }
html.js section.zeig .schritt:nth-child(3) { transition-delay: .2s; }
html.js section.zeig .schritt:nth-child(4) { transition-delay: .3s; }
html.js section.zeig .schritt:nth-child(5) { transition-delay: .4s; }
.schritt .nr { transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.schritt:hover .nr { transform: scale(1.15); }
/* Haken-Listen und Fragen: nacheinander */
html.js .liste-haken li { opacity: 0; transform: translateX(-8px); transition: opacity .45s ease, transform .45s ease; }
html.js section.zeig .liste-haken li { opacity: 1; transform: none; }
html.js section.zeig .liste-haken li:nth-child(2) { transition-delay: .08s; }
html.js section.zeig .liste-haken li:nth-child(3) { transition-delay: .16s; }
html.js section.zeig .liste-haken li:nth-child(4) { transition-delay: .24s; }
html.js section.zeig .liste-haken li:nth-child(5) { transition-delay: .32s; }
.liste-haken li::before { transition: background .3s ease, transform .3s ease; }
.liste-haken li:hover::before { background: var(--akzent); transform: scale(1.15); }

/* AÜG-Zeitstrahl: laufende Monatsmarke */
.az-fuellung { fill: var(--akzent); opacity: .35; animation: fuellen 14s linear infinite; }
@keyframes fuellen { from { transform: scaleX(0); } 85.7% { transform: scaleX(1); } to { transform: scaleX(1); } }
.az-marke { animation: wandern 14s linear infinite; }
@keyframes wandern { from { transform: translateX(0); } to { transform: translateX(var(--weg)); } }
.az-marke line { stroke: var(--text); stroke-width: 1.5; opacity: .6; }
.az-marke circle { fill: var(--grund); stroke: var(--text); stroke-width: 2; }
.az-puls { transform-box: fill-box; transform-origin: center; fill: none; stroke-width: 2;
           animation: pulsring-klein 14s ease-out infinite; }
.az-blau { stroke: var(--akzent); }
.az-rot  { stroke: var(--rot); }
@keyframes pulsring-klein { 0% { transform: scale(1); opacity: .9; } 8% { transform: scale(4); opacity: 0; } 100% { opacity: 0; } }
.az-warnung { fill: var(--rot); opacity: 0; animation: warnen 14s ease-in-out infinite; }
@keyframes warnen { 0%, 100% { opacity: 0; } 3%, 10% { opacity: .35; } 6% { opacity: .1; } 14% { opacity: 0; } }

/* Modullandkarte: Welle ueber die Bausteine */
.ml-punkt { opacity: .35; transform-box: fill-box; transform-origin: center;
            animation: aufblitzen 6s ease-out infinite; }
@keyframes aufblitzen { 0%, 100% { opacity: .35; transform: scale(1); } 6% { opacity: 1; transform: scale(2); }
                        18% { opacity: .35; transform: scale(1); } }
.ml-kopf { fill: var(--akzent); opacity: 0; animation: kopfglanz 6s ease-out infinite; }
@keyframes kopfglanz { 0%, 100% { opacity: 0; } 5% { opacity: .18; } 22% { opacity: 0; } }

/* Freigabeweg: Verbinder laufen, erteilt pulsiert, offen blinkt */
.fw-lauf { animation: laufen 1.2s linear infinite; }
@keyframes laufen { to { stroke-dashoffset: -12; } }
.fw-ring { fill: none; stroke-width: 2; transform-box: fill-box; transform-origin: center;
           animation: pulsring 2.4s ease-out infinite; }
.fw-offen { animation: blinken 1.8s ease-in-out infinite; }

/* Tabelle der Rollen: Zeilen erscheinen nacheinander */
html.js .matrix tbody tr { opacity: 0; transform: translateX(-6px); transition: opacity .4s ease, transform .4s ease; }
html.js section.zeig .matrix tbody tr { opacity: 1; transform: none; }
html.js section.zeig .matrix tbody tr:nth-child(2) { transition-delay: .07s; }
html.js section.zeig .matrix tbody tr:nth-child(3) { transition-delay: .14s; }
html.js section.zeig .matrix tbody tr:nth-child(4) { transition-delay: .21s; }
html.js section.zeig .matrix tbody tr:nth-child(5) { transition-delay: .28s; }
html.js section.zeig .matrix tbody tr:nth-child(n+6) { transition-delay: .35s; }
.matrix tbody tr { transition: background .2s ease; }
.matrix tbody tr:hover { background: var(--akzent-hell); }

/* Fragen: Antwort klappt weich auf */
.frage summary::after { transition: transform .25s ease; display: inline-block; }
.frage[open] summary::after { transform: rotate(180deg); }
.frage[open] p { animation: hereingleiten .35s ease both; }

@media (prefers-reduced-motion: reduce) {
  html.js .schritt, html.js .liste-haken li, html.js .matrix tbody tr { opacity: 1; transform: none; }
  .az-marke, .az-warnung, .az-puls { display: none; }
  .az-fuellung { transform: scaleX(1); }
  .ml-punkt { opacity: 1; }
}


/* ------------------------------------------------------------- Anmelden */
.kopf { gap: 18px; }
.kopf nav { margin-inline-start: auto; }
.anmelden { position: relative; flex: none; }
.anmelden summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border: 1px solid var(--linie-stark); border-radius: 4px;
  font-size: .88rem; font-weight: 600; color: var(--text); user-select: none;
  transition: border-color .2s ease, color .2s ease;
}
.anmelden summary::-webkit-details-marker { display: none; }
.anmelden summary svg { width: 16px; height: 16px; }
.anmelden summary:hover, .anmelden[open] summary { border-color: var(--akzent); color: var(--akzent-text); }
.anmelden-menue {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 280px; z-index: 30;
  background: var(--grund); border: 1px solid var(--linie); border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18); padding: 6px; animation: hereingleiten .18s ease both;
}
.anmelden-menue a { display: block; padding: 10px 12px; border-radius: 4px; text-decoration: none; color: var(--text); }
.anmelden-menue a:hover { background: var(--akzent-hell); }
.anmelden-menue a strong { display: block; font-size: .92rem; font-weight: 650; }
.anmelden-menue a span { display: block; font-size: .8rem; color: var(--text-sanft); }
@media (max-width: 820px) {
  .kopf { position: relative; }
  .kopf-rechts { position: absolute; inset-inline-end: 24px; top: 12px; }
  .anmelden summary span { display: none; }
  .anmelden summary { padding: 8px 9px; }
  .anmelden-menue { inset-inline-end: 0; }
}

/* --------------------------------------------------------- Offene Stellen */
.stellen-raster { align-items: stretch; }
.karte.stelle { display: flex; flex-direction: column; gap: 10px; }
.karte.stelle h3 { display: block; font-size: 1.08rem; margin: 0; }
.stelle-art { align-self: flex-start; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
              text-transform: uppercase; color: var(--akzent-text); background: var(--akzent-hell);
              padding: 3px 9px; border-radius: 100px; }
.stelle-fakten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px;
                 font-size: .86rem; color: var(--text-sanft); }
.stelle-fakten li::before { content: "·"; margin-right: 6px; color: var(--linie-stark); }
.stelle-fakten li:first-child::before { content: none; margin: 0; }
.karte.stelle .stelle-anf { margin: 2px 0 0; padding-inline-start: 18px; font-size: .9rem; color: var(--text-sanft); }
.karte.stelle .knopf { margin-top: auto; align-self: flex-start; }
.stellen-fuss { margin-top: 22px; }
.karte.leer p { margin: 0; }
html.js .stellenliste .karte { transition-delay: 0s; }


/* ------------------------------------------------------ Sprachen und RTL */
.kopf-rechts { display: flex; align-items: center; gap: 8px; flex: none; }
.sprachwahl { position: relative; }
.sprachwahl summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 4px; font-size: .88rem; font-weight: 600; color: var(--text-sanft);
  user-select: none; transition: color .2s ease, background .2s ease;
}
.sprachwahl summary::-webkit-details-marker { display: none; }
.sprachwahl summary svg { width: 16px; height: 16px; }
.sprachwahl summary:hover, .sprachwahl[open] summary { color: var(--akzent-text); background: var(--akzent-hell); }
.anmelden-menue.sprachen { min-width: 180px; }
.anmelden-menue.sprachen a { font-size: .92rem; padding: 8px 12px; }
.anmelden-menue.sprachen a[aria-current="true"] { color: var(--akzent-text); font-weight: 650; background: var(--akzent-hell); }
.sprachhinweis { margin: 14px 0 0; padding: 10px 14px; border-radius: 6px; background: var(--akzent-hell);
                 color: var(--akzent-text); font-size: .88rem; }
.leise { color: var(--text-sanft); font-size: .94rem; }
@media (max-width: 820px) {
  .sprachwahl summary span { display: none; }
  .sprachwahl summary { padding: 8px 9px; }
}
/* Stellenkarten bleiben deutsch und laufen auch auf der arabischen Seite von links */
[dir="rtl"] .karte.stelle[lang="de"] { direction: ltr; text-align: left; }
[dir="rtl"] .karte.stelle[lang="de"] .knopf { direction: rtl; }
[dir="rtl"] .kreislauf { direction: ltr; }
/* ⚠ Die Wortmarke ist ein Zeichen, kein Text: bleibt HCG, auch von rechts nach links */
[dir="rtl"] .wortmarke { direction: ltr; }
[dir="rtl"] body, [dir="rtl"] { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.45; }
[dir="rtl"] .aufmacher .schild { letter-spacing: 0; }
[dir="rtl"] .abschnittskopf .ueber { letter-spacing: 0; }
[dir="rtl"] .frage summary::after { transform: none; }


/* --------------------------------------------------------------- Formular */
.formular { max-width: 760px; background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius);
            padding: 26px; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.formular .felder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
@media (max-width: 640px) { .formular .felder { grid-template-columns: 1fr; } }
.formular .feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.formular .feld.breit { grid-column: 1 / -1; }
.formular label { font-size: .86rem; font-weight: 600; color: var(--text-sanft); }
.formular .pflicht { color: var(--rot); }
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular textarea {
  width: 100%; padding: 10px 11px; border: 1px solid var(--linie-stark); border-radius: 4px;
  font: inherit; font-size: .95rem; color: var(--text); background: var(--grund);
}
.formular input:focus, .formular textarea:focus { outline: 2px solid var(--akzent); outline-offset: -1px; border-color: var(--akzent); }
.formular textarea { resize: vertical; min-height: 120px; }
.formular .artwahl { border: 1px solid var(--linie); border-radius: 4px; padding: 10px 14px 12px; margin: 0;
                     display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }
.formular .artwahl legend { padding: 0 6px; font-size: .86rem; font-weight: 600; color: var(--text-sanft); }
.formular .artwahl label { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--text); font-size: .93rem; cursor: pointer; }
.formular .artwahl input { accent-color: var(--akzent); width: 16px; height: 16px; }
.formular .einwilligung { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; font-weight: 400; font-size: .86rem; color: var(--text-sanft); }
.formular .einwilligung input { accent-color: var(--akzent); width: 16px; height: 16px; flex: none; margin-top: 2px; }
.formular .einwilligung a { color: var(--akzent-text); }
.formular-fuss { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.formular button.knopf { border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: .95rem; }
.formular button.knopf[disabled] { opacity: .6; cursor: wait; }
.pflichthinweis { font-size: .8rem; color: var(--text-still); }
.formular-antwort { margin: 16px 0 0; padding: 12px 14px; border-radius: 6px; font-size: .93rem; }
.formular-antwort.gut { background: var(--akzent-hell); color: var(--akzent-text); }
.formular-antwort.schlecht { background: var(--rot-hell); color: var(--text); border-inline-start: 3px solid var(--rot); }
.formular .feld.fehlt input, .formular .feld.fehlt textarea { border-color: var(--rot); }
/* Honigtopf: aus dem Blickfeld, aber nicht display:none (manche Roboter pruefen das) */
/* ⚠ kein left:-9999px — auf der arabischen Seite (RTL) zaehlt das als Ueberlauf und macht die Seite querscrollbar */
.hpt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }