/* Vay Software – Richtung „Bento" · Farbwelt „Glut & Tinte"
   Lebendes Kachel-Raster. Hell und dunkel über Tokens; Bewegung nur über transform/opacity. */

/* ───────────────────────── Tokens ───────────────────────── */
:root{
  color-scheme: light;
  /* Flächen */
  --grund:#F4F4F7; --grund-2:#ECECF2;
  --kachel:#FFFFFF; --kachel-2:#F6F6FA; --kachel-3:#E9E9F1;
  --rand:rgba(16,20,43,.085); --rand-2:rgba(16,20,43,.15); --linie:rgba(16,20,43,.18);
  /* Text */
  --text:#10142B; --text-2:#454A63; --text-3:#5C617C;
  --link:#B8331C; --fokus:#C2185B;
  /* Glut: Himbeere → Koralle → Bernstein */
  --a1:#FF3D6E; --a2:#FF6A3D; --a3:#FFB23E;
  --verlauf:linear-gradient(105deg,#FF3D6E 0%,#FF6A3D 48%,#FFB23E 100%);
  --verlauf-text:linear-gradient(100deg,#D4145A 0%,#E2401F 55%,#C4520A 100%);
  --ok:#14B87F; --ok-text:#0E7A55; --warm:#F59E0B;
  /* Tinte: dunkle Kacheln in beiden Modi */
  --tinte:#10142B; --tinte-2:#1A1F3D; --tinte-3:#272D52; --tinte-rand:rgba(255,255,255,.08);
  --tinte-text:#FFFFFF; --tinte-text-2:#C9CBE0; --tinte-text-3:#A3A7C6;
  /* Code-Farben (auf Tinte) */
  --c-kw:#FF7AA0; --c-fn:#FFC56B; --c-pr:#5EE6B5; --c-com:#9297BC; --c-var:#E9EAF6; --c-nr:#8A8FB2;
  /* Knopf */
  --knopf-text:#10142B;
  /* feste Farben (in beiden Modi gleich) und Schattenfarbe */
  --weiss:#FFFFFF; --schwarz:#000000; --geraet:#0B0E1F; --sf:#10142B;
  --tinte-ok:#2EE6A6; --tinte-ok-text:#4BE8B0; --tinte-fokus:#FF8FB0; --tinte-feldrand:#5A6090; --tinte-feld:rgba(7,9,23,.55);
  --tinte-gut:#4ADE80; --tinte-schlecht:#FDA4AF;
  /* Tiefe */
  --schatten:0 1px 2px rgba(16,20,43,.05), 0 14px 34px -18px rgba(16,20,43,.22);
  --schatten-tinte:0 1px 2px rgba(16,20,43,.1), 0 22px 44px -20px rgba(16,20,43,.45);
  --kachel-glanz:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 30%);
  --hof:.30;           /* Stärke des Aurora-Leuchtens */
  --aur2:var(--a3);    /* zweite Aurora-Kugel (dunkel: Koralle statt Bernstein, sonst olivbraun) */
  --fuge:22%;          /* Glut zwischen den Kacheln */
  --ic-grund:linear-gradient(135deg,#FFE6EC,#FFF0DE); --ic-rand:rgba(226,64,31,.18); --ic-strich:#D9361C;
  --licht:rgba(255,106,61,.2); --licht-rand:rgba(255,61,110,1);
  --punkt:rgba(16,20,43,.09);
  --feldrand:#8A8EA8;
  --gut:#166534; --schlecht:#9F1239;
  /* Maße */
  --r:26px; --r-klein:16px; --spalt:16px; --kp:24px;
  --sans:"Instrument Sans","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ar:"Noto Sans Arabic","Noto Kufi Arabic",system-ui,sans-serif;
  --ar-kopf:"Noto Kufi Arabic","Noto Sans Arabic",system-ui,sans-serif;
  --weich:cubic-bezier(.22,.8,.24,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --grund:#090C1A; --grund-2:#0C1022;
    --kachel:#121630; --kachel-2:#191E3A; --kachel-3:#242A4A;
    --rand:rgba(255,255,255,.075); --rand-2:rgba(255,255,255,.14); --linie:rgba(255,255,255,.2);
    --text:#F7F4F2; --text-2:#C6C6D6; --text-3:#A2A3BA;
    --link:#FF9378; --fokus:#FF8FB0;
    --a1:#FF4D7D; --a2:#FF7A4D; --a3:#FFC55A;
    --verlauf:linear-gradient(105deg,#FF4D7D 0%,#FF7A4D 48%,#FFC55A 100%);
    --verlauf-text:linear-gradient(100deg,#FF5C8A 0%,#FF8A5C 50%,#FFCB6B 100%);
    --ok:#2EE6A6; --ok-text:#4BE8B0; --warm:#FFC55A;
    --tinte:#070917; --tinte-2:#121734; --tinte-3:#1E2447; --tinte-rand:rgba(255,122,77,.22);
    --tinte-text:#FFFFFF; --tinte-text-2:#CACBDE; --tinte-text-3:#A6A8C4;
    --schatten:0 1px 0 rgba(255,255,255,.07) inset, 0 18px 40px -24px rgba(0,0,0,.7);
    --schatten-tinte:0 0 0 1px rgba(255,122,77,.16), 0 24px 60px -24px rgba(255,61,110,.35);
    --kachel-glanz:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 38%);
    --hof:.5;
    --aur2:#FF5C45;
    --fuge:40%;
    --ic-grund:linear-gradient(135deg,rgba(255,77,125,.2),rgba(255,197,90,.14)); --ic-rand:rgba(255,122,77,.3); --ic-strich:#FF8A5C;
    --licht:rgba(255,106,61,.14); --licht-rand:rgba(255,122,77,.95);
    --punkt:rgba(255,255,255,.07);
    --feldrand:#6E7299;
    --gut:#4ADE80; --schlecht:#FDA4AF;
    --sf:#000000;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --grund:#090C1A; --grund-2:#0C1022;
  --kachel:#121630; --kachel-2:#191E3A; --kachel-3:#242A4A;
  --rand:rgba(255,255,255,.075); --rand-2:rgba(255,255,255,.14); --linie:rgba(255,255,255,.2);
  --text:#F7F4F2; --text-2:#C6C6D6; --text-3:#A2A3BA;
  --link:#FF9378; --fokus:#FF8FB0;
  --a1:#FF4D7D; --a2:#FF7A4D; --a3:#FFC55A;
  --verlauf:linear-gradient(105deg,#FF4D7D 0%,#FF7A4D 48%,#FFC55A 100%);
  --verlauf-text:linear-gradient(100deg,#FF5C8A 0%,#FF8A5C 50%,#FFCB6B 100%);
  --ok:#2EE6A6; --ok-text:#4BE8B0; --warm:#FFC55A;
  --tinte:#070917; --tinte-2:#121734; --tinte-3:#1E2447; --tinte-rand:rgba(255,122,77,.22);
  --tinte-text:#FFFFFF; --tinte-text-2:#CACBDE; --tinte-text-3:#A6A8C4;
  --schatten:0 1px 0 rgba(255,255,255,.07) inset, 0 18px 40px -24px rgba(0,0,0,.7);
  --schatten-tinte:0 0 0 1px rgba(255,122,77,.16), 0 24px 60px -24px rgba(255,61,110,.35);
  --kachel-glanz:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 38%);
  --hof:.5;
  --aur2:#FF5C45;
  --fuge:40%;
  --ic-grund:linear-gradient(135deg,rgba(255,77,125,.2),rgba(255,197,90,.14)); --ic-rand:rgba(255,122,77,.3); --ic-strich:#FF8A5C;
  --licht:rgba(255,106,61,.14); --licht-rand:rgba(255,122,77,.95);
  --punkt:rgba(255,255,255,.07);
  --feldrand:#6E7299;
  --gut:#4ADE80; --schlecht:#FDA4AF;
  --sf:#000000;
}

/* ───────────────────────── Grundlagen ───────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
html[lang="ar"] body{font-family:var(--ar);line-height:1.8}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--link);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
strong{font-weight:600;color:var(--text)}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:8px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.innen{width:100%;max-width:1288px;margin-inline:auto;padding-inline:clamp(16px,3.6vw,40px)}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.025em;line-height:1.08;color:var(--text);text-wrap:balance}
html[lang="ar"] :is(h1,h2,h3,h4){font-family:var(--ar-kopf);letter-spacing:0;line-height:1.35}
html[lang="ru"] :is(h1,h2){letter-spacing:-.03em}
p{text-wrap:pretty}

.sprunglink{position:absolute;inset-inline-start:16px;top:-60px;z-index:100;background:var(--tinte);color:var(--tinte-text);padding:10px 16px;border-radius:12px;font-weight:600;text-decoration:none;transition:top .2s}
.sprunglink:focus{top:12px}

.etikett,.k-etikett{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
html[lang="ar"] :is(.etikett,.k-etikett){font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:.86rem;font-weight:600}
html[lang="ru"] :is(.etikett,.k-etikett){letter-spacing:.05em}

/* ───────────────────────── Kopf ───────────────────────── */
.kopf{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--grund) 78%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);
  border-bottom:1px solid var(--rand)}
.kopf-innen{display:flex;align-items:center;gap:20px;min-height:68px}
.marke{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;flex:none}
.marke svg{width:38px;height:auto;fill:url(#g-vay)}
.marke b{font-weight:600;font-size:1.12rem;letter-spacing:-.02em;white-space:nowrap}
.marke b span{color:var(--text-3);font-weight:500}
.menu{display:flex;gap:4px;margin-inline:auto}
.menu a{color:var(--text-2);text-decoration:none;font-weight:500;font-size:.96rem;padding:8px 14px;border-radius:999px;transition:color .2s,background-color .2s}
.menu a:hover{color:var(--text);background:var(--kachel)}
.menu a[aria-current="page"]{color:var(--text);background:var(--kachel);box-shadow:inset 0 0 0 1px var(--rand)}
.werkzeuge{display:flex;align-items:center;gap:8px;flex:none}
.sprache{display:flex;background:var(--kachel);border:1px solid var(--rand);border-radius:999px;padding:3px}
.sprache button{border:0;background:none;cursor:pointer;font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.04em;color:var(--text-2);padding:6px 9px;border-radius:999px;min-width:34px;min-height:30px}
.sprache button:hover{color:var(--text)}
.sprache button[aria-pressed="true"]{background:var(--tinte);color:var(--tinte-text)}
.thema{width:40px;height:40px;border-radius:999px;border:1px solid var(--rand);background:var(--kachel);cursor:pointer;display:grid;place-items:center;color:var(--text);flex:none}
.thema svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .5s var(--weich)}
.thema .halb{fill:currentColor;stroke:none}
.thema[aria-pressed="true"] svg{transform:rotate(180deg)}
.menu-schalter{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--rand);background:var(--kachel);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.menu-schalter span{display:block;width:18px;height:2px;border-radius:2px;background:var(--text);transition:transform .25s,opacity .2s}
.menu-schalter[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-schalter[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-schalter[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ───────────────────────── Knöpfe ───────────────────────── */
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.knopf{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;border:0;cursor:pointer;
  background:var(--verlauf);color:var(--knopf-text);font-weight:600;font-size:1rem;text-decoration:none;isolation:isolate;overflow:hidden;
  box-shadow:0 10px 28px -12px color-mix(in srgb,var(--a1) 70%,transparent),inset 0 1px 0 color-mix(in srgb,var(--weiss) 35%,transparent);transition:transform .25s var(--weich)}
.knopf::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--weiss) 55%,transparent) 50%,transparent 70%);transform:translateX(-120%);animation:glanz 7s var(--weich) infinite 2s}
.knopf:hover{transform:translateY(-2px)}
.knopf:active{transform:translateY(0) scale(.98)}
.knopf svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.knopf.zweit{background:var(--kachel);color:var(--text);box-shadow:inset 0 0 0 1px var(--rand-2)}
.knopf.zweit::after{display:none}
.knopf.zweit:hover{box-shadow:inset 0 0 0 1px var(--text-3)}
.pfeil{transition:transform .25s var(--weich)}
a:hover .pfeil{transform:translateX(3px)}
[dir="rtl"] .pfeil{transform:scaleX(-1)}
[dir="rtl"] a:hover .pfeil{transform:scaleX(-1) translateX(3px)}
@keyframes glanz{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* ───────────────────────── Kopfbereich (Held) ───────────────────────── */
.held{position:relative;isolation:isolate;padding:clamp(32px,4.4vw,58px) 0 clamp(26px,2.8vw,36px);overflow:hidden}
.held::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(var(--punkt) 1.1px,transparent 1.4px);background-size:24px 24px;
  -webkit-mask-image:linear-gradient(to bottom,#000 20%,transparent 92%);mask-image:linear-gradient(to bottom,#000 20%,transparent 92%)}
.aurora{position:absolute;inset:-10% -5% 0;z-index:-2;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.aurora i{position:absolute;border-radius:50%;opacity:var(--hof)}
.aurora .o1{width:52vw;height:52vw;max-width:760px;max-height:760px;inset-inline-start:-8%;top:-30%;background:radial-gradient(closest-side,var(--a1),transparent);animation:drift1 26s ease-in-out infinite alternate}
.aurora .o2{width:46vw;height:46vw;max-width:680px;max-height:680px;inset-inline-end:-6%;top:-26%;background:radial-gradient(closest-side,var(--aur2),transparent);animation:drift2 30s ease-in-out infinite alternate}
.aurora .o3{width:40vw;height:40vw;max-width:600px;max-height:600px;inset-inline-start:34%;top:10%;background:radial-gradient(closest-side,var(--a2),transparent);opacity:calc(var(--hof) * .7);animation:drift3 22s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(9%,12%) scale(1.12)}}
@keyframes drift2{to{transform:translate(-10%,14%) scale(.92)}}
@keyframes drift3{to{transform:translate(-14%,-8%) scale(1.15)}}
.pille{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;border-radius:999px;background:var(--kachel);border:1px solid var(--rand);
  font-family:var(--mono);font-size:.78rem;color:var(--text-2);box-shadow:var(--schatten);margin-bottom:22px}
html[lang="ar"] .pille{font-family:var(--ar);font-size:.9rem;padding:6px 10px 6px 14px}
.pille i{position:relative;width:9px;height:9px;border-radius:50%;background:var(--ok)}
.pille i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--ok);animation:puls 2.6s ease-out infinite}
@keyframes puls{0%{transform:scale(.4);opacity:.9}80%,100%{transform:scale(1.5);opacity:0}}
.held h1{font-size:clamp(2.5rem,1.1rem + 4.9vw,5.25rem);letter-spacing:-.048em;line-height:.98;max-width:15em}
html[lang="ru"] .held h1{font-size:clamp(2.3rem,1.1rem + 4.3vw,4.65rem)}
html[lang="ar"] .held h1{font-size:clamp(2.3rem,1.2rem + 3.9vw,4.25rem);line-height:1.3}
.held h1 .z2{display:block}
.held h1 em,.verlaufswort{font-style:normal;background:var(--verlauf-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  padding-inline-end:.04em}
.held-unter{display:grid;grid-template-columns:minmax(0,1.45fr) auto;gap:24px 48px;align-items:end;margin-top:26px}
.lead{font-size:clamp(1.06rem,1rem + .3vw,1.2rem);line-height:1.6;color:var(--text-2);max-width:42em}
.held-unter .knopfreihe{justify-content:flex-end}
/* einmaliges Auftauchen beim Laden */
@media (prefers-reduced-motion: no-preference){
  .js .auf{animation:auf .9s var(--weich) both;animation-delay:calc(var(--n) * 90ms + 60ms)}
}
@keyframes auf{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ───────────────────────── Bento-Raster ───────────────────────── */
.bento{position:relative;isolation:isolate;display:grid;gap:var(--spalt)}
/* Glut zwischen den Fugen: ruhendes Leuchten hinter dem Raster, scheint durch die Spalten (nur transform bewegt) */
.bento::before{content:"";position:absolute;inset:-64px -48px;z-index:-1;pointer-events:none;
  background:radial-gradient(34% 42% at 18% 26%,color-mix(in srgb,var(--a1) var(--fuge),transparent),transparent 72%),
    radial-gradient(32% 40% at 74% 58%,color-mix(in srgb,var(--a2) var(--fuge),transparent),transparent 72%),
    radial-gradient(30% 34% at 46% 92%,color-mix(in srgb,var(--aur2) calc(var(--fuge) * .8),transparent),transparent 72%),
    radial-gradient(26% 30% at 90% 12%,color-mix(in srgb,var(--a1) calc(var(--fuge) * .7),transparent),transparent 72%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect;
  animation:fuge 22s ease-in-out infinite alternate}
@keyframes fuge{to{transform:translate3d(2.5%,-2%,0) scale(1.04)}}
.bento-bereich{padding-bottom:clamp(56px,7vw,100px)}
.bento-start{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(5,minmax(236px,auto));
  grid-template-areas:"web web app code" "web web app code" "mon mon srv bkp" "fak netz netz sup" "cta cta cta sup"}
.bento-start .k-web{grid-area:web}.bento-start .k-app{grid-area:app}.bento-start .k-code{grid-area:code}.bento-start .k-mon{grid-area:mon}.bento-start .k-srv{grid-area:srv}
.bento-start .k-bkp{grid-area:bkp}.bento-start .k-fakt{grid-area:fak}.bento-start .k-netz{grid-area:netz}.bento-start .k-sup{grid-area:sup}.bento-start .k-cta{grid-area:cta}

.kachel{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;padding:var(--kp);border-radius:var(--r);
  background:var(--kachel-glanz),var(--kachel);border:1px solid var(--rand);box-shadow:var(--schatten);overflow:hidden;
  transition:transform .5s var(--weich)}
.kachel > *{position:relative;z-index:1}
.kachel h3{font-size:1.3rem;letter-spacing:-.022em;line-height:1.15;margin-top:8px}
html[lang="ar"] .kachel h3{font-size:1.2rem;line-height:1.45}
.kachel .k-text p:not(.k-etikett):not(.fall-meta):not(.daten-titel){color:var(--text-2);font-size:.97rem;line-height:1.5;margin-top:6px}
.k-etikett{display:flex;align-items:center;gap:8px}
.k-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--ic-grund);border:1px solid var(--ic-rand);flex:none}
.k-ic svg{width:15px;height:15px;fill:none;stroke:var(--ic-strich);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.k-bild{position:relative;flex:1;min-height:0;margin-bottom:18px}
.k-text{flex:none}
.beispiel{position:absolute;inset-inline-end:0;top:0;z-index:5;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);
  background:color-mix(in srgb,var(--kachel) 82%,transparent);border:1px solid var(--rand);padding:3px 8px;border-radius:999px}
html[lang="ar"] .beispiel{font-family:var(--ar);letter-spacing:0;font-size:.72rem}

/* breite Kacheln: Text neben dem Bild */
.k-netz{--sp:minmax(0,.66fr) minmax(0,1.34fr)}
.k-mon,.k-netz{display:grid;grid-template-columns:var(--sp,minmax(0,.82fr) minmax(0,1.18fr));grid-template-rows:1fr;column-gap:22px;align-items:stretch}
.k-mon .k-bild,.k-netz .k-bild{grid-column:2;grid-row:1;margin:0}
.k-mon .k-text,.k-netz .k-text{grid-column:1;grid-row:1;align-self:end}

/* dunkle „Tinte"-Kacheln */
.kachel.tinte{background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--a1) 14%,transparent),transparent 55%),var(--tinte);border-color:var(--tinte-rand);color:var(--tinte-text);box-shadow:var(--schatten-tinte)}
.tinte h2,.tinte h3,.tinte strong{color:var(--tinte-text)}
.kachel.tinte .k-text p:not(.k-etikett):not(.fall-meta):not(.daten-titel),.tinte .unter,.tinte .cta-text p:not(.k-etikett){color:var(--tinte-text-2)}
.tinte :is(.etikett,.k-etikett){color:var(--tinte-text-3)}
.tinte .k-ic{background:var(--tinte-2);border-color:var(--tinte-rand)}
.tinte a:not(.knopf){color:var(--tinte-text)}
.tinte :focus-visible{outline-color:var(--tinte-fokus)}

/* Glut-Kachel (Verlauf) */
.verlauf-kachel{background:var(--verlauf);border-color:transparent;color:var(--knopf-text);box-shadow:0 18px 40px -20px color-mix(in srgb,var(--a1) 75%,transparent)}
.verlauf-kachel .k-etikett{color:var(--knopf-text);opacity:.86}
.verlauf-kachel::before{content:"";position:absolute;inset:-40%;z-index:0;background:linear-gradient(100deg,transparent 40%,color-mix(in srgb,var(--weiss) 38%,transparent) 50%,transparent 60%);transform:translateX(-60%);animation:streif 8s ease-in-out infinite}
@keyframes streif{0%,55%{transform:translateX(-60%)}100%{transform:translateX(60%)}}

/* Zeiger-Licht (von bewegung.js eingesetzt) */
.licht,.rand-licht{position:absolute;pointer-events:none}
.licht{z-index:0;left:0;top:0;width:440px;height:440px;margin:-220px 0 0 -220px;border-radius:50%;background:radial-gradient(closest-side,var(--licht),transparent);opacity:0;transition:opacity .35s}
.rand-licht{inset:-1px;z-index:6;border-radius:inherit;padding:2px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);overflow:hidden;opacity:0;transition:opacity .35s}
.rand-licht i{position:absolute;left:0;top:0;width:380px;height:380px;margin:-190px 0 0 -190px;border-radius:50%;background:radial-gradient(closest-side,var(--licht-rand),color-mix(in srgb,var(--licht-rand) 40%,transparent) 45%,transparent)}
.bento.zeigt .licht,.bento.zeigt .rand-licht{opacity:1}
.kachel.tinte .licht{background:radial-gradient(closest-side,color-mix(in srgb,var(--a2) 22%,transparent),transparent)}

/* Auftauchen beim Scrollen */
@media (prefers-reduced-motion: no-preference){
  .js [data-zeige]{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .8s var(--weich),transform .9s var(--weich);transition-delay:calc(var(--i,0) * 70ms)}
  .js [data-zeige].da{opacity:1;transform:none}
  .js [data-zeige].da.fertig{transition:transform .45s var(--weich),opacity .3s;transition-delay:0s}
}

/* ───────── Kachel: Web-Anwendung (Browser baut sich auf) ───────── */
.browser{position:absolute;inset:4px 0 0;border-radius:16px;background:var(--kachel);border:1px solid var(--rand-2);overflow:hidden;
  box-shadow:0 22px 50px -26px color-mix(in srgb,var(--sf) 35%,transparent);--t:9s}
.b-leiste{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-bottom:1px solid var(--rand);background:var(--kachel-2)}
.b-leiste > i{width:9px;height:9px;border-radius:50%;background:var(--kachel-3)}
.b-leiste > i:nth-child(1){background:var(--a1)}.b-leiste > i:nth-child(2){background:var(--a3)}.b-leiste > i:nth-child(3){background:var(--ok)}
.b-url{display:flex;align-items:center;gap:6px;margin-inline:auto;width:min(46%,240px);height:20px;border-radius:999px;background:var(--kachel);border:1px solid var(--rand);padding:0 8px}
.b-url svg{width:11px;height:11px;fill:none;stroke:var(--ok);stroke-width:2.4}
.b-url b{flex:1;height:5px;border-radius:3px;background:var(--kachel-3)}
.b-koerper{display:flex;height:calc(100% - 34px)}
.b-seite{width:22%;max-width:120px;padding:14px 10px;display:flex;flex-direction:column;gap:9px;border-inline-end:1px solid var(--rand);background:var(--kachel-2)}
.b-logo{width:28px;height:28px;border-radius:9px;background:var(--verlauf);margin-bottom:6px}
.b-nav{height:9px;border-radius:5px;background:var(--kachel-3)}
.b-nav.aktiv{background:color-mix(in srgb,var(--a2) 55%,var(--kachel-3))}
.b-nav.kurz{width:60%}
.b-haupt{flex:1;min-width:0;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.b-kopf{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;height:30px}
.b-titel{height:12px;width:38%;border-radius:6px;background:var(--text);opacity:.85}
.b-titel.sk{position:absolute;inset-inline-start:0;top:9px;background:var(--kachel-3);opacity:1}
.b-knopf{display:inline-flex;align-items:center;height:28px;padding:0 14px;border-radius:999px;background:var(--verlauf);color:var(--knopf-text);font-size:.72rem;font-weight:600;white-space:nowrap}
html[lang="ar"] .b-knopf{font-family:var(--ar)}
.b-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.b-karte{position:relative;height:70px;border-radius:12px;background:var(--kachel-2);border:1px solid var(--rand);padding:10px;overflow:hidden}
.b-karte .sk{position:absolute;inset:10px;border-radius:8px;background:var(--kachel-3)}
.b-saeulen{display:flex;align-items:flex-end;gap:5px;height:100%}
.b-saeulen i{flex:1;height:calc(var(--h) * 100%);border-radius:4px 4px 2px 2px;background:var(--verlauf);transform-origin:bottom}
.b-saeulen i:nth-child(even){opacity:.55}
.b-kreis{display:flex;align-items:center;gap:8px;height:100%}
.b-kreis svg{width:44px;height:44px;flex:none;fill:none;stroke-width:5}
.b-kreis circle{stroke:var(--kachel-3)}
.b-kreis .b-kreis-teil{stroke:var(--ok);stroke-dasharray:68 100;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transform-box:fill-box}
.b-kreis span{flex:1;height:8px;border-radius:4px;background:var(--kachel-3)}
.b-welle svg{width:100%;height:100%}
.b-welle path{fill:none;stroke:var(--a1);stroke-width:2.2;vector-effect:non-scaling-stroke}
.b-welle path.f{fill:url(#g-flaeche);stroke:none}
.b-tabelle{display:flex;flex-direction:column;gap:7px;flex:1;min-height:0}
.b-zeile{position:relative;flex:0 1 30px;min-height:22px;border-radius:9px;background:var(--kachel-2);border:1px solid var(--rand)}
.b-zeile .sk{position:absolute;inset:10px 12px;border-radius:5px;background:var(--kachel-3)}
.b-zeile .inh{position:absolute;inset:0;display:flex;align-items:center;gap:12px;padding:0 12px}
.b-zeile .p{width:8px;height:8px;border-radius:50%;background:var(--a3);flex:none}
.b-zeile .p.ok{background:var(--ok)}
.b-zeile b{height:7px;border-radius:4px;background:var(--text-3);opacity:.45;width:var(--w)}
.b-zeile b + b{opacity:.25}
.b-zeile em{margin-inline-start:auto;width:46px;height:16px;border-radius:999px;background:color-mix(in srgb,var(--ok) 26%,transparent)}
.b-zeile em.warm{background:color-mix(in srgb,var(--a3) 36%,transparent)}
.b-zeiger{position:absolute;width:22px;height:22px;top:57px;right:44px;z-index:4;fill:var(--text);stroke:var(--kachel);stroke-width:1.3;opacity:0;filter:drop-shadow(0 2px 3px color-mix(in srgb,var(--sf) 25%,transparent))}
.b-toast{position:absolute;right:16px;bottom:14px;z-index:4;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:12px;background:var(--tinte);color:var(--tinte-text);font-size:.78rem;font-weight:600;opacity:0;box-shadow:0 12px 26px -12px color-mix(in srgb,var(--sf) 50%,transparent)}
.b-toast svg{width:18px;height:18px;fill:none;stroke:var(--ok);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
html[lang="ar"] .b-toast{font-family:var(--ar)}
/* Ablauf: Gerüst → Inhalt → Zeiger → Klick → Meldung */
.k-web .sk{opacity:0;animation:b-sk var(--t) ease infinite}
.k-web .inh{animation:b-ein var(--t) var(--weich) infinite;animation-delay:var(--d,0s)}
.b-saeulen i{animation:b-saeule var(--t) var(--weich) infinite}
.b-zeiger{animation:b-zeiger var(--t) cubic-bezier(.5,0,.2,1) infinite}
.b-knopf{position:relative;overflow:hidden}
.b-knopf::after{content:"";position:absolute;inset:0;background:var(--weiss);opacity:0;animation:b-druck var(--t) ease infinite}
.b-toast{animation:b-toast var(--t) var(--weich) infinite}
@keyframes b-sk{0%,15%{opacity:1}22%,93%{opacity:0}99%,100%{opacity:1}}
@keyframes b-ein{0%,16%{opacity:0;transform:translateY(8px)}25%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes b-saeule{0%,20%{transform:scaleY(.15)}34%,90%{transform:scaleY(1)}96%,100%{transform:scaleY(.15)}}
@keyframes b-zeiger{0%,34%{opacity:0;transform:translate(150px,190px)}40%{opacity:1}54%{transform:translate(0,0)}56.5%{transform:translate(0,0) scale(.82)}59%,74%{transform:translate(0,0) scale(1);opacity:1}86%,100%{opacity:0;transform:translate(-90px,120px)}}
@keyframes b-druck{0%,55.5%{opacity:0}57.5%{opacity:.55}63%,100%{opacity:0}}
@keyframes b-toast{0%,59%{opacity:0;transform:translateY(12px) scale(.96)}63%,80%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateY(-4px)}}

/* ───────── Kachel: App (Bildschirme gleiten) ───────── */
.k-app .k-bild{display:grid;place-items:center;grid-template-columns:minmax(0,1fr)}
.handy-hof{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--a2) 42%,transparent),transparent);opacity:.75;animation:hof 7s ease-in-out infinite alternate}
@keyframes hof{to{transform:scale(1.15)}}
.handy{position:relative;width:min(150px,58%);aspect-ratio:9/18.4;border-radius:28px;background:var(--geraet);padding:7px;
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--weiss) 12%,transparent) inset,0 26px 50px -20px color-mix(in srgb,var(--sf) 55%,transparent),0 0 0 1px var(--rand-2);animation:schweben 7s ease-in-out infinite}
@keyframes schweben{0%,100%{transform:translateY(-5px)}50%{transform:translateY(6px)}}
.h-insel{position:absolute;top:13px;left:50%;width:34%;height:12px;margin-left:-17%;border-radius:999px;background:var(--schwarz);z-index:3}
.h-fenster{position:relative;height:calc(100% - 30px);border-radius:21px 21px 8px 8px;overflow:hidden;background:var(--kachel)}
.h-bahn{display:flex;width:400%;height:100%;animation:h-gleiten 12s cubic-bezier(.7,0,.2,1) infinite}
.h-schirm{width:25%;height:100%;padding:30px 12px 10px;display:flex;flex-direction:column;gap:8px}
.h-zeit{width:38%;height:7px;border-radius:4px;background:var(--text);opacity:.8;margin-bottom:4px}
.h-ring{position:relative;width:74%;aspect-ratio:1;margin:2px auto 6px}
.h-ring svg{width:100%;height:100%;fill:none;stroke-width:7}
.h-ring circle{stroke:var(--kachel-3)}
.h-ring .h-ring-bogen{stroke:url(#g-vay);stroke-dasharray:62 100;stroke-linecap:round;transform-origin:center;transform-box:fill-box;animation:drehen 6s linear infinite}
.h-ring i{position:absolute;inset:34%;border-radius:50%;background:var(--kachel-2)}
.h-liste{display:flex;align-items:center;gap:7px;height:22px;padding:0 7px;border-radius:7px;background:var(--kachel-2)}
.h-liste i{width:10px;height:10px;border-radius:4px;background:var(--a1);flex:none}
.h-liste i.b{background:var(--a3)}.h-liste i.c{background:var(--ok)}
.h-liste b{height:5px;flex:1;border-radius:3px;background:var(--kachel-3)}
.h-liste b.k{flex:.6}
.h-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:2px}
.h-kacheln i{aspect-ratio:1;border-radius:11px;background:var(--verlauf)}
.h-kacheln i:nth-child(2){background:var(--tinte)}
.h-kacheln i:nth-child(3){background:color-mix(in srgb,var(--ok) 70%,var(--kachel))}
.h-kacheln i:nth-child(4){background:var(--kachel-3)}
.h-schalt{display:flex;align-items:center;gap:8px;height:26px;padding:0 7px;border-radius:8px;background:var(--kachel-2)}
.h-schalt b{flex:1;height:5px;border-radius:3px;background:var(--kachel-3)}
.h-schalt b.k{flex:.6}
.h-schalt i{position:relative;width:24px;height:14px;border-radius:999px;background:var(--kachel-3);flex:none}
.h-schalt i::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--weiss);box-shadow:0 1px 2px color-mix(in srgb,var(--sf) 30%,transparent)}
.h-schalt.an i::after{transform:translateX(10px)}
.h-schalt i::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ok);opacity:0}
.h-schalt.an i::before{opacity:1}
.h-schalt:nth-of-type(3) i::after{animation:schalt 4s ease-in-out infinite}
.h-schalt:nth-of-type(3) i::before{animation:schalt-farbe 4s ease-in-out infinite}
@keyframes schalt{0%,40%{transform:none}50%,90%{transform:translateX(10px)}100%{transform:none}}
@keyframes schalt-farbe{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
.h-knopf{margin-top:auto;height:24px;border-radius:999px;background:var(--verlauf)}
.h-tabs{position:relative;display:flex;justify-content:space-around;align-items:center;height:23px;padding:0 10%}
.h-tabs i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--weiss) 35%,transparent)}
.h-tab-punkt{position:absolute;left:10%;top:8px;width:calc(80% / 3);height:6px;display:flex;justify-content:center;animation:h-tab 12s cubic-bezier(.7,0,.2,1) infinite}
.h-tab-punkt::after{content:"";width:18px;height:6px;border-radius:999px;background:var(--a2)}
@keyframes h-gleiten{0%,22%{transform:translateX(0)}27%,47%{transform:translateX(-25%)}52%,72%{transform:translateX(-50%)}77%,100%{transform:translateX(-75%)}}
@keyframes h-tab{0%,22%{transform:translateX(0)}27%,47%{transform:translateX(100%)}52%,72%{transform:translateX(200%)}77%,100%{transform:translateX(0)}}
@keyframes drehen{to{transform:rotate(360deg)}}

/* ───────── Kachel: Code (tippt sich) ───────── */
.editor{position:absolute;inset:0;border-radius:16px;background:var(--tinte-2);border:1px solid var(--tinte-rand);overflow:hidden;--eb:var(--tinte-2)}
.e-leiste{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:color-mix(in srgb,var(--tinte-2) 70%,var(--schwarz));border-bottom:1px solid var(--tinte-rand)}
.e-leiste > i{width:8px;height:8px;border-radius:50%;background:var(--tinte-3)}
.e-reiter{margin-inline-start:12px;display:flex;align-items:center;height:100%;padding:0 12px;border-inline:1px solid var(--tinte-rand);background:var(--tinte-2)}
.e-reiter b{width:52px;height:6px;border-radius:3px;background:var(--a2);opacity:.7}
.e-code{display:grid;grid-template-columns:auto 1fr;grid-auto-rows:1.75em;column-gap:10px;row-gap:3px;padding:14px 10px 14px 8px;font-family:var(--mono);font-size:clamp(.62rem,.45rem + .3vw,.7rem);line-height:1.75;color:var(--c-var);white-space:pre;font-variant-ligatures:none}
.e-nr{color:var(--c-nr);text-align:right;user-select:none}
.e-code .z{position:relative;justify-self:start;overflow:hidden;padding-right:4px}
.e-code .c > span{unicode-bidi:isolate}
.e-code .kw{color:var(--c-kw)}.e-code .fn{color:var(--c-fn)}.e-code .pr{color:var(--c-pr)}.e-code .c{color:var(--c-com)}
.e-code .z::after{content:"";position:absolute;top:1px;bottom:1px;left:-4px;width:calc(100% + 12px);background:var(--eb);border-left:2px solid var(--a2);transform:translateX(100%)}
.e-code .z0::after{animation:tip0 12s steps(var(--n)) infinite}
.e-code .z1::after{animation:tip1 12s steps(var(--n)) infinite}
.e-code .z2::after{animation:tip2 12s steps(var(--n)) infinite}
.e-code .z3::after{animation:tip3 12s steps(var(--n)) infinite}
.e-code .z4::after{animation:tip4 12s steps(var(--n)) infinite}
.e-code .z5::after{animation:tip5 12s steps(var(--n)) infinite}
.e-code .z6::after{animation:tip6 12s steps(var(--n)) infinite}
.e-code{animation:code-blende 12s ease infinite}
@keyframes code-blende{0%,88%{opacity:1}92%,95%{opacity:0}98%,100%{opacity:1}}
@keyframes tip0{0%,2%{transform:translateX(0)}2.01%{transform:translateX(4px)}6%{transform:translateX(calc(100% - 12px))}6.01%,93%{transform:translateX(100%)}93.01%,100%{transform:translateX(0)}}
@keyframes tip1{0%,7%{transform:translateX(0)}7.01%{transform:translateX(4px)}17%{transform:translateX(calc(100% - 12px))}17.01%,93%{transform:translateX(100%)}93.01%,100%{transform:translateX(0)}}
@keyframes tip2{0%,18%{transform:translateX(0)}18.01%{transform:translateX(4px)}25.5%{transform:translateX(calc(100% - 12px))}25.51%,93%{transform:translateX(100%)}93.01%,100%{transform:translateX(0)}}
@keyframes tip3{0%,26.5%{transform:translateX(0)}26.51%{transform:translateX(4px)}35%{transform:translateX(calc(100% - 12px))}35.01%,93%{transform:translateX(100%)}93.01%,100%{transform:translateX(0)}}
@keyframes tip4{0%,36%{transform:translateX(0)}36.01%{transform:translateX(4px)}43%{transform:translateX(calc(100% - 12px))}43.01%,93%{transform:translateX(100%)}93.01%,100%{transform:translateX(0)}}
@keyframes tip5{0%,44%{transform:translateX(0)}44.01%{transform:translateX(4px)}45%{transform:translateX(calc(100% - 12px))}45.01%,93%{transform:translateX(100%)}93.01%,100%{transform:translateX(0)}}
@keyframes tip6{0%,46.5%{transform:translateX(0)}46.51%{transform:translateX(4px)}52.5%{transform:translateX(calc(100% - 12px))}52.51%,93%{transform:translateX(calc(100% - 12px))}93.01%,100%{transform:translateX(0)}}
.e-code .z6::after{border-left-color:var(--a2)}
/* Ausgabe-Leiste: wird gebaut → läuft (zum Satz „am Laufen") */
.e-lauf{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-top:1px solid var(--tinte-rand);
  background:color-mix(in srgb,var(--tinte-2) 70%,var(--schwarz));font-family:var(--mono);font-size:.72rem;color:var(--tinte-text-2);white-space:nowrap}
html[lang="ar"] .e-lauf{font-family:var(--ar);font-size:.78rem}
.e-punkt{position:relative;width:8px;height:8px;border-radius:50%;background:var(--a3);flex:none}
.e-punkt::after{content:"";position:absolute;inset:-1px;border-radius:50%;background:var(--tinte-ok);box-shadow:0 0 10px var(--tinte-ok);opacity:0;animation:e-ok 12s ease infinite}
.e-zustand{display:grid;flex:none}
.e-zustand > span{grid-area:1/1}
.e-baut{animation:e-baut 12s ease infinite}
.e-laeuft{color:var(--tinte-ok-text);opacity:0;animation:e-ok 12s ease infinite}
.e-balken{position:relative;flex:1;height:4px;border-radius:2px;background:var(--tinte-3);overflow:hidden}
.e-balken i{position:absolute;inset:0;border-radius:inherit;background:var(--verlauf);transform-origin:left;animation:e-balken 12s linear infinite}
@keyframes e-balken{0%,2%{transform:scaleX(0)}52%{transform:scaleX(.9)}55%,92%{transform:scaleX(1)}93%,100%{transform:scaleX(0)}}
@keyframes e-baut{0%,54%{opacity:1}56%,93%{opacity:0}95%,100%{opacity:1}}
@keyframes e-ok{0%,54%{opacity:0}56%,92%{opacity:1}94%,100%{opacity:0}}

/* ───────── Kachel: Überwachung (Kurve) ───────── */
.k-mon .k-bild{display:flex;flex-direction:column;gap:12px;padding-top:30px}
.kurve{position:relative;flex:1;min-height:96px;border-radius:14px;background:var(--kachel-2);border:1px solid var(--rand);overflow:hidden}
.kurve-raster{position:absolute;inset:0;background-image:linear-gradient(var(--rand) 1px,transparent 1px);background-size:100% 25%;opacity:.9}
.kurve-fenster{position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 75%,transparent 75.5%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 75%,transparent 75.5%)}
.kurve-bahn{position:absolute;inset:0;width:200%;animation:kurve 14s linear infinite}
.kurve-bahn svg{width:100%;height:100%}
.kurve-bahn .l{fill:none;stroke:url(#g-linie);stroke-width:2.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kurve-bahn .f{fill:url(#g-flaeche)}
@keyframes kurve{to{transform:translateX(-50%)}}
.kurve-stift{position:absolute;top:0;bottom:0;left:75%;width:0;border-left:1px dashed var(--linie)}
.kurve-y{position:absolute;inset:0;transform:translateY(45.45%);animation:kurve-y 14s linear infinite}
.kurve-punkt{position:absolute;left:calc(75% - 6px);top:0;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--a2);box-shadow:0 0 0 4px color-mix(in srgb,var(--a2) 28%,transparent),0 0 16px var(--a2)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips li{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 8px;border-radius:999px;background:var(--kachel-2);border:1px solid var(--rand);font-size:.74rem;color:var(--text-2);font-weight:500}
.chips i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:atmen 3s ease-in-out infinite}
.chips li:nth-child(2) i{animation-delay:-1s}.chips li:nth-child(3) i{animation-delay:-2s}
@keyframes atmen{0%,100%{opacity:1}50%{opacity:.35}}
[dir="rtl"] .kurve{transform:scaleX(-1)}
/* Punkt: Höhe der Kurve an der Stift-Stelle (75 %), je 1/24 des Umlaufs */
@keyframes kurve-y{0.000%{transform:translateY(45.45%)}4.167%{transform:translateY(60.00%)}8.333%{transform:translateY(54.55%)}12.500%{transform:translateY(65.45%)}16.667%{transform:translateY(61.82%)}20.833%{transform:translateY(72.73%)}25.000%{transform:translateY(67.27%)}29.167%{transform:translateY(63.64%)}33.333%{transform:translateY(70.91%)}37.500%{transform:translateY(56.36%)}41.667%{transform:translateY(60.00%)}45.833%{transform:translateY(47.27%)}50.000%{transform:translateY(52.73%)}54.167%{transform:translateY(36.36%)}58.333%{transform:translateY(43.64%)}62.500%{transform:translateY(54.55%)}66.667%{transform:translateY(49.09%)}70.833%{transform:translateY(63.64%)}75.000%{transform:translateY(58.18%)}79.167%{transform:translateY(41.82%)}83.333%{transform:translateY(45.45%)}87.500%{transform:translateY(30.91%)}91.667%{transform:translateY(38.18%)}95.833%{transform:translateY(50.91%)}100.000%{transform:translateY(45.45%)}}

/* ───────── Kachel: Server ───────── */
.srv{display:flex;align-items:center;gap:16px;height:100%}
.rack{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.ein{display:flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:9px;background:var(--kachel-2);border:1px solid var(--rand);box-shadow:inset 0 -2px 0 var(--rand)}
.ein b{flex:none;width:8px;height:15px;border-radius:2.5px;background:var(--kachel-3);box-shadow:inset 0 -5px 0 color-mix(in srgb,var(--text-3) 22%,transparent)}
.ein b:first-of-type{margin-inline-start:6px}
.ein b:last-child{position:relative;flex:1;width:auto;height:6px;border-radius:3px;margin-inline-start:6px;overflow:hidden;box-shadow:none}
.ein b:last-child::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--verlauf);transform-origin:left;animation:last 4.2s ease-in-out infinite alternate}
.ein:nth-child(2) b:last-child::after{animation-duration:5.4s;animation-delay:-2s}
.ein:nth-child(3) b:last-child::after{animation-duration:3.6s;animation-delay:-1s}
[dir="rtl"] .ein b:last-child::after{transform-origin:right}
@keyframes last{0%{transform:scaleX(.22)}45%{transform:scaleX(.66)}100%{transform:scaleX(.38)}}
.led{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);flex:none;animation:atmen 3.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.led.a{background:var(--a3);box-shadow:0 0 8px var(--a3);animation:flackern 1.6s steps(1) infinite;animation-delay:var(--d,0s)}
@keyframes flackern{0%{opacity:1}35%{opacity:.25}50%{opacity:1}70%{opacity:.4}85%{opacity:1}}
.ring{width:80px;flex:none}
.ring svg{width:100%;fill:none;stroke-width:5}
.r-bahn{stroke:var(--kachel-3)}
.r-bogen{stroke:url(#g-vay);stroke-dasharray:30 70;stroke-linecap:round;transform-origin:center;transform-box:fill-box;animation:drehen 5s linear infinite}
.r-haken{stroke:var(--ok-text);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}

/* ───────── Kachel: Datensicherung ───────── */
.k-bkp .k-bild{display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.k-bkp .beispiel{position:static;margin-inline-start:auto}
.sich{display:flex;flex-direction:column;gap:12px;--t:8s;padding-bottom:4px}
.sich-kopf{display:flex;align-items:center;gap:8px;min-height:26px}
.sich-status{position:relative;min-width:0;display:grid;font-size:.86rem;font-weight:600;color:var(--text)}
.sich-status > span{grid-area:1/1}
.sich-status .laeuft{opacity:0;animation:s-laeuft var(--t) ease infinite}
.sich-status .fertig{color:var(--ok-text);animation:s-fertig var(--t) ease infinite}
.sich-haken{width:26px;height:26px;flex:none;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:s-haken var(--t) var(--weich) infinite}
.sich-haken circle{fill:var(--ok);stroke:none}
.sich-haken path{stroke:var(--weiss)}
.sich-balken{position:relative;height:14px;border-radius:999px;background:var(--kachel-3);overflow:hidden}
.sich-balken i{position:absolute;inset:0;border-radius:inherit;background:var(--verlauf);transform-origin:left;animation:s-fuell var(--t) cubic-bezier(.45,.05,.4,1) infinite}
[dir="rtl"] .sich-balken i{transform-origin:right}
.sich-balken b{position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--weiss) 65%,transparent),transparent);animation:s-schimmer 1.8s linear infinite}
.sich-ziele{display:flex;gap:8px}
.sz{flex:1;height:22px;border-radius:7px;background:var(--kachel-2);border:1px solid var(--rand);display:flex;align-items:center;padding:0 7px}
.sz i{width:100%;height:5px;border-radius:3px;background:var(--ok);opacity:.85;transform-origin:left;animation:s-ziel var(--t) ease infinite}
.sz:nth-child(2) i{animation-delay:.35s}.sz:nth-child(3) i{animation-delay:.7s}
[dir="rtl"] .sz i{transform-origin:right}
@keyframes s-fuell{0%{transform:scaleX(0);opacity:1}62%{transform:scaleX(1)}91%{transform:scaleX(1);opacity:1}95%{opacity:0;transform:scaleX(1)}96%{transform:scaleX(0);opacity:0}100%{transform:scaleX(0);opacity:1}}
@keyframes s-schimmer{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@keyframes s-laeuft{0%,61%{opacity:1}64%,97%{opacity:0}100%{opacity:1}}
@keyframes s-fertig{0%,62%{opacity:0;transform:translateY(5px)}66%,91%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes s-haken{0%,62%{opacity:0;transform:scale(.4)}67%{opacity:1;transform:scale(1.15)}71%,91%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(.8)}}
@keyframes s-ziel{0%,64%{transform:scaleX(0)}72%,91%{transform:scaleX(1)}95%,100%{transform:scaleX(0)}}

/* ───────── Kachel: Kurz gesagt ───────── */
.k-fakt{justify-content:space-between}
.fakten{position:relative;flex:1;margin-top:12px}
.fakten li{position:absolute;inset:0 0 auto;font-size:clamp(1.45rem,1rem + 1vw,1.95rem);font-weight:600;letter-spacing:-.03em;line-height:1.12;color:var(--knopf-text);
  opacity:0;animation:fakt 12s var(--weich) infinite;animation-delay:calc(var(--f) * 4s - 12s)}
html[lang="ar"] .fakten li{font-family:var(--ar-kopf);letter-spacing:0;line-height:1.45;font-size:1.25rem}
@keyframes fakt{0%{opacity:0;transform:translateY(22px)}5%,30%{opacity:1;transform:none}35%,100%{opacity:0;transform:translateY(-18px)}}
.fakt-takt{display:flex;gap:6px}
.fakt-takt i{width:22px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--sf) 22%,transparent);overflow:hidden;position:relative}
.fakt-takt i::after{content:"";position:absolute;inset:0;background:var(--knopf-text);transform:scaleX(0);transform-origin:left;animation:takt 12s linear infinite;animation-delay:calc(var(--f) * 4s - 12s)}
[dir="rtl"] .fakt-takt i::after{transform-origin:right}
@keyframes takt{0%{transform:scaleX(0)}33%{transform:scaleX(1)}33.4%,100%{transform:scaleX(0)}}

/* ───────── Kachel: Netzwerk ───────── */
.k-netz .k-bild{display:flex;align-items:center}
.netz{width:100%;height:100%;max-height:210px}
.leitungen path{fill:none;stroke:var(--linie);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.leitungen.glut path{stroke:url(#g-linie);stroke-width:2;opacity:.35;stroke-dasharray:4 10}
.nk{fill:var(--kachel-2);stroke:var(--rand-2);stroke-width:1.2}
.ni{fill:none;stroke:var(--text-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nl{fill:var(--ok);animation:atmen 3s ease-in-out infinite;animation-delay:var(--d,0s)}
.funk path{fill:none;stroke:var(--a2);stroke-width:2.4;stroke-linecap:round;opacity:.2;animation:funk 2.4s ease-in-out infinite}
.funk .w2{animation-delay:.3s}.funk .w3{animation-delay:.6s}
@keyframes funk{0%,100%{opacity:.15}30%{opacity:1}60%{opacity:.15}}
.paket circle{fill:var(--a1)}
.paket .hof{opacity:.22}
.paket.q2 circle,.paket.r2 circle{fill:var(--a3)}
.paket.q3 circle{fill:var(--a2)}
.paket.q4 circle{fill:var(--ok)}
.paket{opacity:0}
.q1{animation:q1 3.4s linear infinite}
.q2{animation:q2 3s linear infinite;animation-delay:-1.1s}
.q3{animation:q3 3.8s linear infinite;animation-delay:-2.2s}
.q4{animation:q4 2.8s linear infinite;animation-delay:-.6s}
@keyframes q1{0%{transform:translate(76px,100px);opacity:0}6%{opacity:1}62%{transform:translate(250px,100px)}84%{transform:translate(250px,36px)}96%{transform:translate(290px,36px);opacity:1}100%{transform:translate(290px,36px);opacity:0}}
@keyframes q2{0%{transform:translate(290px,100px);opacity:0}8%{opacity:1}92%{transform:translate(76px,100px);opacity:1}100%{transform:translate(76px,100px);opacity:0}}
@keyframes q3{0%{transform:translate(76px,100px);opacity:0}6%{opacity:1}58%{transform:translate(250px,100px)}82%{transform:translate(250px,164px)}96%{transform:translate(290px,164px);opacity:1}100%{transform:translate(290px,164px);opacity:0}}
@keyframes q4{0%{transform:translate(290px,36px);opacity:0}8%{opacity:1}30%{transform:translate(250px,36px)}66%{transform:translate(250px,100px)}92%{transform:translate(214px,100px);opacity:1}100%{transform:translate(214px,100px);opacity:0}}

/* ───────── Kachel: Support (Chat) ───────── */
.chat{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:16px;background:var(--kachel-2);border:1px solid var(--rand);overflow:hidden;--t:11s}
.c-kopf{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;padding:11px 12px;border-bottom:1px solid var(--rand);background:var(--kachel)}
.c-kopf b{font-size:.84rem;font-weight:600}
.c-kopf .beispiel{position:static;margin-inline-start:auto}
.c-zeichen{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--verlauf);color:var(--knopf-text);font-weight:700;font-size:.85rem;flex:none}
.c-verlauf{flex:1;min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 14px);mask-image:linear-gradient(transparent,#000 14px);display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:12px}
.blase{max-width:86%;padding:8px 12px;border-radius:16px;font-size:.82rem;line-height:1.38}
.blase.kunde{align-self:flex-start;background:var(--kachel);border:1px solid var(--rand);color:var(--text);border-end-start-radius:5px}
.blase.vay{align-self:flex-end;background:var(--tinte);color:var(--tinte-text);border-end-end-radius:5px}
.c-platz{position:relative;display:flex;flex-direction:column}
.tippt{position:absolute;inset-inline-end:0;bottom:0;display:flex;gap:4px;padding:10px 12px;border-radius:14px;border-end-end-radius:5px;background:var(--tinte);opacity:0;animation:c3 var(--t) ease infinite}
@keyframes c3{0%,27%{opacity:0;transform:translateY(8px)}31%,42%{opacity:1;transform:none}45%,100%{opacity:0}}
.tippt i{width:6px;height:6px;border-radius:50%;background:var(--tinte-text-2);animation:tippt 1.2s ease-in-out infinite}
.tippt i:nth-child(2){animation-delay:.15s}.tippt i:nth-child(3){animation-delay:.3s}
@keyframes tippt{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.c1{animation:c1 var(--t) var(--weich) infinite}
.c2{animation:c2 var(--t) var(--weich) infinite}
.c4{animation:c4 var(--t) var(--weich) infinite}
.c5{animation:c5 var(--t) var(--weich) infinite}
@keyframes c1{0%,4%{opacity:0;transform:translateY(12px) scale(.96)}9%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes c2{0%,17%{opacity:0;transform:translateY(12px) scale(.96)}22%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes c4{0%,44%{opacity:0;transform:translateY(12px) scale(.96)}49%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes c5{0%,60%{opacity:0;transform:translateY(12px) scale(.96)}65%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
html[lang="ar"] .blase,html[lang="ar"] .c-kopf b{font-family:var(--ar)}
@media (min-width:1001px) and (max-width:1240px),(max-width:400px){.k-sup .c5{display:none}}
@media (min-width:1001px) and (max-width:1240px){.k-sup .c-kopf b{display:none}.k-sup .blase{font-size:.78rem;max-width:94%;padding:7px 10px}.k-sup .c-verlauf{padding:10px}}

/* ───────── Kachel: Aufruf ───────── */
.k-cta{flex-direction:row;align-items:center;justify-content:space-between;gap:28px;padding:clamp(24px,3vw,40px)}
.cta-text{max-width:34em}
.k-cta h3{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.2rem);letter-spacing:-.035em}
.cta-text p:not(.k-etikett){margin-top:10px}
.cta-aktion{display:flex;flex-direction:column;align-items:flex-start;gap:12px;flex:none}
.cta-mail{font-family:var(--mono);font-size:.86rem;color:var(--tinte-text-2)!important;text-decoration:none}
.cta-mail:hover{text-decoration:underline}
.glut{position:absolute!important;inset:0;z-index:0!important;pointer-events:none;overflow:hidden;border-radius:inherit}
.glut i{position:absolute;border-radius:50%}
.glut .g1{width:420px;height:420px;right:-120px;top:-220px;background:radial-gradient(closest-side,color-mix(in srgb,var(--a1) 70%,transparent),transparent);animation:glut1 16s ease-in-out infinite alternate}
.glut .g2{width:380px;height:380px;right:18%;bottom:-260px;background:radial-gradient(closest-side,color-mix(in srgb,var(--a3) 55%,transparent),transparent);animation:glut2 19s ease-in-out infinite alternate}
.glut .g3{width:300px;height:300px;left:-120px;top:-120px;background:radial-gradient(closest-side,color-mix(in srgb,var(--a2) 40%,transparent),transparent);animation:glut3 14s ease-in-out infinite alternate}
@keyframes glut1{to{transform:translate(-160px,90px) scale(1.2)}}
@keyframes glut2{to{transform:translate(140px,-60px) scale(.85)}}
@keyframes glut3{to{transform:translate(90px,60px) scale(1.25)}}

/* Glut-Würfel: vorgezeichnete Glanz-Objekte (Vektor, feste Beleuchtung), schweben nur */
.wuerfel{position:absolute!important;z-index:1;top:50%;inset-inline-end:clamp(262px,22vw,300px);width:170px;height:150px;margin-top:-80px;pointer-events:none;transform:scale(.88);transform-origin:center}
@media (min-width:1241px){.bento-start .k-cta .cta-text{max-width:min(34em,54%)}}
.abschnitt-schluss .wuerfel{inset-inline-end:clamp(300px,30vw,420px);transform:none}
.wuerfel .w{position:absolute;filter:drop-shadow(0 18px 22px color-mix(in srgb,var(--sf) 35%,transparent))}
.wuerfel .w1{width:84px;left:40px;top:28px;animation:w-schweben 7s ease-in-out infinite}
.wuerfel .w2{width:50px;left:116px;top:4px;animation:w-schweben 6s ease-in-out infinite -2s}
.wuerfel .w3{width:34px;left:8px;top:2px;animation:w-schweben 8s ease-in-out infinite -4s}
.w-schatten{position:absolute;left:30px;bottom:-6px;width:110px;height:18px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--a2) 45%,transparent),transparent);animation:w-schatten 7s ease-in-out infinite}
@keyframes w-schweben{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes w-schatten{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.8);opacity:.6}}
@media (max-width:1240px){.wuerfel{display:none}}

/* ───────────────────────── Abschnitte ───────────────────────── */
.abschnitt{padding-block:clamp(48px,6vw,96px)}
.abschnitt-kopf{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(24px,3vw,40px);max-width:52em}
.abschnitt-kopf h2,.kk-text h2{font-size:clamp(2rem,1.2rem + 2.8vw,3.5rem);letter-spacing:-.04em;line-height:1.02}
html[lang="ar"] :is(.abschnitt-kopf h2,.kk-text h2){line-height:1.35}
.abschnitt-kopf .etikett{display:inline-flex;align-items:center;gap:10px}
.abschnitt-kopf .etikett::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--verlauf)}

/* Praxis */
.bento-praxis{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"gleis gleis gleis gleis" "platt platt fern fern"}
.k-gleis{grid-area:gleis}.k-platt{grid-area:platt}.k-fern{grid-area:fern}
.fall-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
html[lang="ar"] .fall-meta{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:.84rem}
.fall-meta .lauf{display:inline-flex;align-items:center;gap:7px;padding:3px 10px 3px 8px;border-radius:999px;color:var(--ok-text);background:color-mix(in srgb,var(--ok) 14%,transparent);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
.fall-meta .lauf i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:atmen 2.6s ease-in-out infinite}
.bento-praxis .kachel h3{font-size:clamp(1.35rem,1.1rem + .7vw,1.75rem);margin-top:14px}
.daten{display:grid;gap:0;margin-top:18px;border-top:1px solid var(--rand)}
.daten > div{display:grid;grid-template-columns:minmax(90px,.36fr) 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--rand)}
.daten dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding-top:3px}
html[lang="ar"] .daten dt{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:.84rem}
.daten dd{font-size:.94rem;color:var(--text)}
.daten-titel{margin-top:18px;font-weight:600;font-size:.92rem;color:var(--text)}
.k-gleis{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(22px,3vw,44px);align-items:stretch;padding:clamp(24px,2.6vw,36px)}
.k-gleis .k-text{align-self:center}
.skizze{display:flex;flex-direction:column;gap:10px;flex:1}
.skizze figcaption{font-size:.8rem;color:var(--text-3)}
.app{position:relative;flex:1;min-height:330px;border-radius:16px;background:var(--kachel);border:1px solid var(--rand-2);overflow:hidden;box-shadow:0 22px 50px -30px color-mix(in srgb,var(--sf) 40%,transparent)}
.app-leiste{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:var(--kachel-2);border-bottom:1px solid var(--rand)}
.app-leiste i{width:8px;height:8px;border-radius:50%;background:var(--kachel-3)}
.app-leiste span{margin-inline:auto;width:34%;height:14px;border-radius:999px;background:var(--kachel);border:1px solid var(--rand)}
.app-koerper{display:flex;height:calc(100% - 30px)}
.app-seite{width:20%;max-width:110px;background:var(--tinte);padding:12px 10px;display:flex;flex-direction:column;gap:9px}
.app-seite .logo{width:24px;height:24px;border-radius:7px;background:var(--verlauf);margin-bottom:6px}
.app-seite .nav{height:7px;border-radius:4px;background:var(--tinte-3)}
.app-seite .nav.a{background:var(--a2)}
.app-haupt{flex:1;min-width:0;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.app-kopf{display:flex;justify-content:space-between;align-items:center}
.app-kopf .t{width:34%;height:10px;border-radius:5px;background:var(--text);opacity:.8}
.app-kopf .kn{width:64px;height:22px;border-radius:999px;background:var(--verlauf)}
.app-filter{display:flex;gap:6px}
.app-filter span{width:56px;height:18px;border-radius:999px;border:1px solid var(--rand-2)}
.app-filter span.a{background:var(--tinte);border-color:var(--tinte)}
.app-tab{position:relative;display:flex;flex-direction:column;gap:5px}
.az{position:relative;z-index:1;display:flex;align-items:center;gap:12px;height:26px;padding:0 10px;border-radius:8px}
.az.kopfz{height:20px}
.az.kopfz b{height:5px;border-radius:3px;background:var(--text-3);opacity:.4;width:var(--w)}
.az b{height:6px;border-radius:3px;background:var(--text-3);opacity:.45;width:var(--w)}
.az b + b{opacity:.25}
.az .punkt{width:7px;height:7px;border-radius:50%;background:var(--a2);flex:none}
.az .pill{position:relative;margin-inline-start:auto;width:52px;height:15px;border-radius:999px;background:color-mix(in srgb,var(--ok) 28%,transparent);overflow:hidden}
.az .pill.warm{background:color-mix(in srgb,var(--a3) 40%,transparent)}
.az .pill.wechsel{background:color-mix(in srgb,var(--a3) 40%,transparent)}
.az .pill.wechsel em{position:absolute;inset:0;background:color-mix(in srgb,var(--ok) 40%,var(--kachel));animation:pill-wechsel 9s ease infinite}
@keyframes pill-wechsel{0%,48%{opacity:0}54%,92%{opacity:1}98%,100%{opacity:0}}
.az:not(.kopfz){animation:az-ein 9s var(--weich) infinite;animation-delay:calc(var(--r) * 120ms)}
@keyframes az-ein{0%,3%{opacity:0;transform:translateX(-10px)}10%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
.auswahl{position:absolute;z-index:0;left:0;right:0;top:25px;height:26px;border-radius:8px;background:color-mix(in srgb,var(--a2) 14%,transparent);box-shadow:inset 3px 0 0 var(--a2);animation:auswahl 9s cubic-bezier(.6,0,.2,1) infinite}
@keyframes auswahl{0%,14%{transform:translateY(0)}20%,34%{transform:translateY(31px)}40%,62%{transform:translateY(62px)}68%,84%{transform:translateY(31px)}90%,100%{transform:translateY(0)}}

.k-platt,.k-fern{display:flex;flex-direction:column;gap:20px}
.k-platt .k-text,.k-fern .k-text{order:2}
.stapel{position:relative;height:300px;border-radius:18px;background:radial-gradient(60% 70% at 40% 55%,color-mix(in srgb,var(--a2) 12%,transparent),transparent),var(--kachel-2);border:1px solid var(--rand)}
.platte{position:absolute;inset-inline-start:calc(50% - 150px);width:170px;top:calc(176px - var(--p) * 50px)}
.pl-inn{animation:platte 6s ease-in-out infinite;animation-delay:calc(var(--p) * -1.2s)}
@keyframes platte{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.platte svg{width:100%;overflow:visible;filter:drop-shadow(0 14px 18px color-mix(in srgb,var(--sf) 16%,transparent))}
.pl-o{fill:var(--kachel);stroke:var(--rand-2);stroke-width:1}
.pl-l{fill:var(--kachel-3)}
.pl-r{fill:color-mix(in srgb,var(--kachel-3) 70%,var(--text-3))}
.pl-rille{fill:none;stroke:var(--rand-2);stroke-width:1.2}
.pl-led{fill:var(--ok)}
.platte.oben .pl-rille{stroke:color-mix(in srgb,var(--weiss) 55%,transparent)}
.platte.oben .pl-led{fill:var(--weiss)}
.platte.oben .pl-o{fill:url(#g-vay);stroke:none}
.platte.oben .pl-l{fill:color-mix(in srgb,var(--a1) 75%,var(--schwarz))}
.platte.oben .pl-r{fill:color-mix(in srgb,var(--a2) 70%,var(--schwarz))}
.pl-name{position:absolute;inset-inline-start:calc(100% + 24px);top:22%;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);background:var(--kachel);border:1px solid var(--rand);padding:4px 10px 4px 6px;border-radius:999px;white-space:nowrap;box-shadow:var(--schatten)}
.pl-name::before{content:"";position:absolute;inset-inline-end:100%;top:50%;width:20px;border-top:1px dashed var(--linie)}
.pl-name svg{width:16px;height:16px;fill:none;stroke:var(--a2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[lang="ar"] .pl-name{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:.74rem}

.fern{width:100%;height:auto;max-height:300px;padding:22px 18px;border-radius:18px;background:var(--kachel-2);border:1px solid var(--rand)}
.f-laptop rect,.f-laptop > path:not(.f-zeilen){fill:var(--kachel-2);stroke:var(--text-2);stroke-width:1.6;stroke-linejoin:round}
.f-zeilen{fill:none;stroke:var(--a2);stroke-width:2.4;stroke-linecap:round}
.f-weg{fill:none;stroke:var(--linie);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f-weg.glut{stroke:url(#g-linie);opacity:.4;stroke-dasharray:4 9}
.f-pc rect,.f-pc > path{fill:var(--kachel-2);stroke:var(--text-2);stroke-width:1.6;stroke-linejoin:round}
.f-ok{fill:var(--ok)}
.f-hk{fill:none;stroke:var(--weiss);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.f-pc .f-ok,.f-pc .f-hk{transform-origin:39px 19px;animation:f-ok 6s var(--weich) infinite}
.f-pc.p2 .f-ok,.f-pc.p2 .f-hk{animation-delay:.6s}
.f-pc.p3 .f-ok,.f-pc.p3 .f-hk{animation-delay:1.2s}
@keyframes f-ok{0%,30%{opacity:0;transform:scale(.4)}36%{opacity:1;transform:scale(1.15)}40%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:scale(.6)}}
.r1{animation:r1 6s linear infinite}.r2{animation:r2 6s linear infinite}.r3{animation:r3 6s linear infinite}
@keyframes r1{0%{transform:translate(106px,75px);opacity:0}3%{opacity:1}14%{transform:translate(170px,75px)}22%{transform:translate(170px,27px)}32%{transform:translate(236px,27px);opacity:1}35%,100%{transform:translate(236px,27px);opacity:0}}
@keyframes r2{0%,10%{transform:translate(106px,75px);opacity:0}13%{opacity:1}24%{transform:translate(170px,75px)}42%{transform:translate(236px,75px);opacity:1}45%,100%{transform:translate(236px,75px);opacity:0}}
@keyframes r3{0%,20%{transform:translate(106px,75px);opacity:0}23%{opacity:1}34%{transform:translate(170px,75px)}42%{transform:translate(170px,123px)}52%{transform:translate(236px,123px);opacity:1}55%,100%{transform:translate(236px,123px);opacity:0}}

/* Ablauf */
.schiene{position:relative;height:28px;margin-bottom:6px}
.s-linie{position:absolute;left:calc(100% / 6);right:calc(100% / 6);top:13px;height:2px;border-radius:2px;background:var(--rand-2)}
.s-lauf{position:absolute;left:calc(100% / 6);right:calc(100% / 6);top:13px;height:2px;border-radius:2px;background:var(--verlauf);transform-origin:left;animation:s-lauf 7s cubic-bezier(.6,0,.3,1) infinite}
[dir="rtl"] .s-lauf{transform-origin:right}
@keyframes s-lauf{0%{transform:scaleX(0);opacity:1}62%,86%{transform:scaleX(1);opacity:1}96%,100%{transform:scaleX(1);opacity:0}}
.schiene b{position:absolute;top:6px;inset-inline-start:calc(100% / 6 + var(--s) * 100% / 3 - 8px);width:16px;height:16px;border-radius:50%;background:var(--grund);border:2px solid var(--rand-2)}
.schiene b::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--verlauf);opacity:0;animation:s-knoten 7s ease infinite;animation-delay:calc(var(--s) * 2.15s)}
@keyframes s-knoten{0%{opacity:0;transform:scale(.4)}6%,60%{opacity:1;transform:none}75%,100%{opacity:0}}
.bento-ablauf{grid-template-columns:repeat(3,minmax(0,1fr))}
.bento-ablauf.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.k-schritt{min-height:300px;padding-top:20px}
.k-schritt .nr{font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--text-3);letter-spacing:.06em}
.k-schritt h3{font-size:1.5rem;margin-top:6px;overflow-wrap:break-word}
html[lang="ru"] :is(.k-schritt h3,.held.klein h1){-webkit-hyphens:auto;hyphens:auto}
.k-schritt p{color:var(--text-2);margin-top:8px;font-size:.98rem;line-height:1.5}
.s-bild{position:relative;height:118px;margin-bottom:18px;border-radius:16px;background:var(--kachel-2);border:1px solid var(--rand);overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px}
.sb{display:flex;flex-direction:column;gap:5px;padding:8px 10px;border-radius:12px;background:var(--kachel);border:1px solid var(--rand);width:58%}
.sb b{height:5px;border-radius:3px;background:var(--text-3);opacity:.4}
.sb b.k{width:60%}
.sb.b{align-self:flex-end;background:var(--tinte);border-color:var(--tinte)}
.sb.b b{background:var(--tinte-text-2)}
.sb.c{width:36%}
.s-reden .sb{animation:sb 7s var(--weich) infinite}
.s-reden .sb.b{animation-delay:.9s}.s-reden .sb.c{animation-delay:1.8s}
@keyframes sb{0%,4%{opacity:0;transform:translateY(10px)}12%,86%{opacity:1;transform:none}94%,100%{opacity:0}}
.sl{display:flex;align-items:center;gap:10px}
.sl i{position:relative;width:18px;height:18px;border-radius:6px;border:2px solid var(--rand-2);flex:none}
.sl i::after{content:"";position:absolute;inset:-2px;border-radius:6px;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;animation:sl 7s var(--weich) infinite}
.sl:nth-child(2) i::after{animation-delay:.8s}.sl:nth-child(3) i::after{animation-delay:1.6s}
.sl b{flex:1;height:6px;border-radius:3px;background:var(--text-3);opacity:.35}
.sl b.k{flex:.6}
@keyframes sl{0%,10%{opacity:0;transform:scale(.4)}16%,86%{opacity:1;transform:none}94%,100%{opacity:0}}
.s-fort{height:6px;border-radius:3px;background:var(--kachel-3);overflow:hidden;margin-top:4px}
.s-fort em{display:block;height:100%;background:var(--verlauf);transform-origin:left;animation:s-fort 7s var(--weich) infinite}
[dir="rtl"] .s-fort em{transform-origin:right}
@keyframes s-fort{0%,8%{transform:scaleX(.05)}50%,86%{transform:scaleX(1)}94%,100%{transform:scaleX(.05)}}
.s-takt{justify-content:center;padding:0}
.st-bahn{display:flex;align-items:center;gap:14px;width:max-content;padding-inline:14px;animation:st-bahn 9s linear infinite}
.st-bahn i{width:34px;height:34px;border-radius:10px;background:var(--kachel);border:1px solid var(--rand-2);flex:none;position:relative}
.st-bahn i::after{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--ok)}
.st-bahn i.w::after{background:var(--a2);border-radius:3px;inset:12px 8px}
@keyframes st-bahn{to{transform:translateX(-50%)}}
[dir="rtl"] .st-bahn{animation-direction:reverse}
.st-jetzt{position:absolute;top:10px;bottom:10px;left:50%;width:2px;border-radius:2px;background:var(--verlauf)}
.s-takt::before,.s-takt::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2}
.s-takt::before{left:0;background:linear-gradient(90deg,var(--kachel-2),transparent)}
.s-takt::after{right:0;background:linear-gradient(270deg,var(--kachel-2),transparent)}
.fort{display:inline-flex;align-items:center;gap:8px;margin-top:14px;align-self:flex-start;padding:4px 12px 4px 9px;border-radius:999px;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ok-text);background:color-mix(in srgb,var(--ok) 14%,transparent);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
html[lang="ar"] .fort{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:.84rem}
.fort i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:atmen 2.4s ease-in-out infinite}

/* Kontakt */
.k-kontakt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);padding:clamp(24px,4vw,56px);align-items:start}
.kk-text{display:flex;flex-direction:column;gap:16px}
.kk-text .unter{font-size:1.08rem;line-height:1.6;max-width:30em}
.direkt{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.direkt a{font-family:var(--mono);font-size:1.02rem;font-weight:500;text-decoration:none;color:var(--tinte-text)}
.direkt a:hover{text-decoration:underline}
.kk-form{position:relative;background:color-mix(in srgb,var(--tinte-2) 82%,transparent);border:1px solid var(--tinte-rand);border-radius:20px;padding:clamp(18px,2.4vw,28px);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.kform{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kform label{display:flex;flex-direction:column;gap:7px;font-size:.88rem;font-weight:500;color:var(--tinte-text-2)}
.kform .voll{grid-column:1/-1}
.kform input,.kform textarea{width:100%;border-radius:12px;border:1px solid var(--tinte-feldrand);background:var(--tinte-feld);color:var(--tinte-text);padding:12px 14px;font-size:1rem;min-height:48px;transition:border-color .2s}
.kform textarea{resize:vertical;min-height:132px}
.kform input:focus-visible,.kform textarea:focus-visible{outline:3px solid var(--tinte-fokus);outline-offset:1px;border-color:transparent}
.kform .knopf{grid-column:1/-1;justify-self:start}
.hpt{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.kstatus{grid-column:1/-1;min-height:1.4em;font-size:.92rem;color:var(--tinte-text-2)}
.kstatus.gut{color:var(--tinte-gut)}.kstatus.schlecht{color:var(--tinte-schlecht)}

/* ───────────────────────── Fuß ───────────────────────── */
.fuss{margin-top:clamp(24px,4vw,48px);background:var(--grund-2);border-top:1px solid var(--rand)}
.fuss-raster{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,.7fr));gap:32px;padding-block:48px 32px}
.fuss-marke{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.fuss-marke p{color:var(--text-2);max-width:30em;font-size:.98rem}
.fuss .mail{font-family:var(--mono);font-size:.92rem;color:var(--text);text-decoration:none}
.fuss .mail:hover{text-decoration:underline}
.fuss nav{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.fuss nav .etikett{margin-bottom:4px}
.fuss nav a{color:var(--text-2);text-decoration:none;font-weight:500}
.fuss nav a:hover,.fuss nav a[aria-current="page"]{color:var(--text);text-decoration:underline}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center;padding-block:18px 28px;border-top:1px solid var(--rand);font-size:.88rem;color:var(--text-3)}
.zeichen{display:flex;align-items:center;gap:10px}
.zeichen svg{width:12px;height:26px;fill:url(#g-vay)}
.herkunft{color:var(--text-3)}

/* ───────────────────────── Unterseiten ───────────────────────── */
.held.klein{padding-bottom:clamp(28px,3vw,40px)}
.held.klein h1{font-size:clamp(2.3rem,1.2rem + 4.2vw,4.6rem);max-width:16em}
html[lang="ar"] .held.klein h1{font-size:clamp(2.1rem,1.2rem + 3.4vw,3.9rem)}
html[lang="ru"] .held.klein h1{font-size:clamp(1.9rem,1rem + 4vw,4.2rem)}
.held h1{overflow-wrap:break-word}
.held.klein .lead{margin-top:22px}
.held .etikett-kopf{margin-bottom:18px;display:inline-flex;align-items:center;gap:10px}
.held .etikett-kopf::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--verlauf)}

/* Rechtstexte: ruhig */
.recht{max-width:820px;display:flex;flex-direction:column;gap:14px;padding-bottom:clamp(40px,6vw,80px)}
.recht section{background:var(--kachel);border:1px solid var(--rand);border-radius:20px;padding:clamp(20px,3vw,32px);box-shadow:var(--schatten)}
.recht h2{margin-bottom:10px}
.recht p{color:var(--text-2);line-height:1.7}
.recht p + p{margin-top:12px}
.recht .stand{font-family:var(--mono);font-size:.82rem;color:var(--text-3);padding-inline:6px}
html[lang="ar"] .recht .stand{font-family:var(--ar)}

/* ───────────────────────── Über ───────────────────────── */
.bento-ueber{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,226px);grid-template-areas:"team team stat ort" "team team arb arb" "post post arb arb"}
.k-team{grid-area:team}.k-status{grid-area:stat}.k-ort{grid-area:ort}.k-arbeit{grid-area:arb}.k-post{grid-area:post}
.k-team .k-bild{display:flex;align-items:center;justify-content:center}
.team{width:100%;height:100%;max-height:300px}
.t-kanten path{fill:none;stroke:var(--linie);stroke-width:2;stroke-linecap:round}
.t-kanten.glut path{stroke:url(#g-linie);opacity:.5;stroke-dasharray:4 10}
.t-grund{fill:var(--kachel);stroke:var(--rand-2);stroke-width:1.5}
.t-kern{fill:url(#g-vay)}
.t-ring{fill:none;stroke:var(--a2);stroke-width:2.6;stroke-dasharray:22 78;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:drehen 7s linear infinite}
.k2 .t-ring{animation-duration:9s;animation-direction:reverse}.k3 .t-ring{animation-duration:8s}
.t-welle{fill:none;stroke:var(--a1);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:t-welle 3.6s ease-out infinite}
.k2 .t-welle{animation-delay:1.2s}.k3 .t-welle{animation-delay:2.4s}
@keyframes t-welle{0%{opacity:.6;transform:scale(.9)}100%{opacity:0;transform:scale(1.75)}}
.t1{animation:t1 3.2s linear infinite}.t2{animation:t2 3.6s linear infinite;animation-delay:-1.2s}
.t3{animation:t3 3.4s linear infinite;animation-delay:-2s}.t4{animation:t4 4s linear infinite;animation-delay:-.6s}
.paket.t2 circle{fill:var(--a3)}.paket.t3 circle{fill:var(--a2)}.paket.t4 circle{fill:var(--ok)}
@keyframes t1{0%{transform:translate(200px,50px);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translate(84px,196px);opacity:0}}
@keyframes t2{0%{transform:translate(84px,196px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(316px,196px);opacity:0}}
@keyframes t3{0%{transform:translate(316px,196px);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translate(200px,50px);opacity:0}}
@keyframes t4{0%{transform:translate(200px,50px);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translate(316px,196px);opacity:0}}
.k-status .k-bild{display:flex;align-items:center}
.aufbau{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;width:100%}
.aufbau i{position:relative;aspect-ratio:1;border-radius:7px;background:var(--kachel-2);border:1px dashed var(--rand-2);overflow:hidden}
.aufbau i::after{content:"";position:absolute;inset:-1px;border-radius:7px;background:var(--verlauf);animation:aufbau 7s var(--weich) infinite;animation-delay:calc(var(--k) * .24s)}
.aufbau i:nth-child(3n)::after{background:var(--tinte)}
.aufbau i:nth-child(4n+2)::after{background:color-mix(in srgb,var(--ok) 78%,var(--kachel))}
.aufbau i:nth-child(n+11)::after{display:none}
@keyframes aufbau{0%,3%{opacity:0;transform:translateY(-60%) scale(.8)}11%,78%{opacity:1;transform:none}90%,100%{opacity:0;transform:scale(.9)}}
.k-ort .k-bild{display:grid;place-items:center;grid-template-columns:minmax(0,1fr);background-image:radial-gradient(var(--punkt) 1.1px,transparent 1.4px);background-size:14px 14px;border-radius:14px;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.ort{position:relative;width:110px;height:100px;display:grid;place-items:center}
.ort svg{position:relative;z-index:2;width:48px;height:48px;fill:url(#g-vay);animation:ort-huepf 3.6s var(--weich) infinite}
.ort svg circle{fill:var(--kachel)}
.ort i{position:absolute;left:50%;bottom:12px;width:90px;height:32px;margin-left:-45px;border-radius:50%;border:2px solid var(--a2);opacity:0;animation:ort-welle 3.6s ease-out infinite}
.ort i.w2{animation-delay:1.8s}
@keyframes ort-welle{0%{opacity:.8;transform:scale(.15)}100%{opacity:0;transform:scale(1.3)}}
@keyframes ort-huepf{0%,46%,100%{transform:translateY(0)}18%{transform:translateY(-9px)}}
.k-arbeit .k-bild{display:flex;align-items:center;border-radius:18px;background:radial-gradient(50% 70% at 50% 50%,color-mix(in srgb,var(--a2) 10%,transparent),transparent),var(--kachel-2);border:1px solid var(--rand);padding:0 10px}
.k-arbeit .k-bild::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(var(--punkt) 1.1px,transparent 1.4px);background-size:18px 18px}
.kette{position:relative;display:flex;justify-content:space-between;width:100%;padding:0 3%}
.kette-linie,.kette-lauf{position:absolute;left:calc(3% + 42px);right:calc(3% + 42px);top:41px;height:3px;border-radius:2px}
.kette-linie{background:var(--rand-2)}
.kette-lauf{background:var(--verlauf);transform-origin:left;animation:kette-lauf 6s cubic-bezier(.6,0,.3,1) infinite}
[dir="rtl"] .kette-lauf,[dir="rtl"] .ak-lauf{transform-origin:right}
@keyframes kette-lauf{0%{transform:scaleX(0);opacity:1}55%,85%{transform:scaleX(1);opacity:1}95%,100%{transform:scaleX(1);opacity:0}}
.glied{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;width:96px}
.g-ic{position:relative;display:grid;place-items:center;width:84px;height:84px;border-radius:24px;background:var(--kachel);border:1px solid var(--rand-2);box-shadow:var(--schatten);overflow:hidden}
.g-ic::before{content:"";position:absolute;inset:0;background:var(--verlauf);opacity:0;animation:glied 6s ease infinite;animation-delay:calc(var(--g) * 1.65s)}
.g-ic svg{position:relative;width:34px;height:34px;fill:none;stroke:var(--text);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes glied{0%,3%{opacity:0}10%,72%{opacity:1}86%,100%{opacity:0}}
.glied b{font-size:.92rem;font-weight:600;color:var(--text-2);text-align:center}
.k-post{flex-direction:row;align-items:center;gap:clamp(18px,3vw,36px)}
.post-bild{flex:none;display:grid;place-items:center;width:128px;height:128px;border-radius:30px;background:var(--tinte-2);border:1px solid var(--tinte-rand)}
.umschlag{position:relative;width:76px;height:52px;border-radius:7px;background:var(--tinte-3);margin-top:16px}
.brief{position:absolute;left:8px;right:8px;top:4px;height:48px;border-radius:5px;background:var(--weiss);display:flex;flex-direction:column;gap:5px;padding:9px 8px;animation:brief 5s var(--weich) infinite}
.brief b{height:4px;border-radius:2px;background:var(--tinte-text-2)}
.brief b.k{width:60%;background:var(--a2)}
.umschlag svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.u-hinten{display:none}
.u-vorn{fill:var(--tinte-2);stroke:color-mix(in srgb,var(--a2) 65%,transparent);stroke-width:1.4;stroke-linejoin:round}
@keyframes brief{0%,10%{transform:translateY(0)}34%,70%{transform:translateY(-30px)}90%,100%{transform:translateY(0)}}
.post-text{display:flex;flex-direction:column;gap:8px;min-width:0}
.post-mail{font-family:var(--mono);font-size:clamp(1.05rem,.7rem + 1vw,1.55rem);font-weight:500;color:var(--tinte-text)!important;text-decoration:none;overflow-wrap:anywhere}
.post-mail:hover{text-decoration:underline}
.post-text p:not(.k-etikett){color:var(--tinte-text-2)}
.bento-drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.k-grund h3{font-size:1.45rem;margin-top:2px}
.k-grund p{color:var(--text-2);margin-top:8px;font-size:.98rem;line-height:1.55}
.g-bild{position:relative;height:150px;margin-bottom:20px;border-radius:18px;background:var(--kachel-2);border:1px solid var(--rand);display:grid;place-items:center;grid-template-columns:minmax(0,1fr);overflow:hidden}
.g-schloss svg{width:136px;height:136px}
.gs-ring{fill:none;stroke:url(#g-vay);stroke-width:3;stroke-dasharray:18 82;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:drehen 6s linear infinite}
.gs-buegel{fill:none;stroke:var(--text-2);stroke-width:6;stroke-linecap:round;animation:buegel 5s var(--weich) infinite}
.gs-koerper{fill:url(#g-vay)}
.gs-loch{stroke:var(--knopf-text);stroke-width:4;stroke-linecap:round}
@keyframes buegel{0%,12%{transform:translateY(-10px)}28%,84%{transform:none}100%{transform:translateY(-10px)}}
.gb-fenster{position:relative;width:76%;height:122px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent)}
.gb-bahn{display:flex;flex-direction:column;gap:8px;animation:gb 8s cubic-bezier(.7,0,.25,1) infinite}
.gb-karte{display:flex;align-items:center;gap:10px;height:34px;flex:none;padding:0 12px;border-radius:10px;background:var(--kachel);border:1px solid var(--rand)}
.gb-karte i{width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none}
.gb-karte i.w{background:var(--a2)}
.gb-karte b{height:6px;flex:1;border-radius:3px;background:var(--text-3);opacity:.35}
.gb-karte b.k{flex:.5}
@keyframes gb{0%,20%{transform:translateY(0)}25%,45%{transform:translateY(-42px)}50%,70%{transform:translateY(-84px)}75%,100%{transform:translateY(-126px)}}
.g-klar svg{width:86%}
.gk-wirr{fill:none;stroke:var(--text-2);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.75;animation:gk-wirr 6s ease infinite}
.gk-gerade{stroke:var(--a2);stroke-width:4;stroke-linecap:round;transform-box:fill-box;transform-origin:left;animation:gk-gerade 6s var(--weich) infinite}
[dir="rtl"] .g-klar svg{transform:scaleX(-1)}
.gk-a,.gk-b{fill:var(--text)}
.gk-haken circle{fill:var(--ok)}
.gk-haken path{fill:none;stroke:var(--weiss);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.gk-haken{transform-box:fill-box;transform-origin:center;animation:gk-haken 6s var(--weich) infinite}
@keyframes gk-wirr{0%,30%{opacity:.75}42%,86%{opacity:0}96%,100%{opacity:.75}}
@keyframes gk-gerade{0%,32%{opacity:0;transform:scaleX(.15)}46%,86%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes gk-haken{0%,46%{opacity:0;transform:scale(.4)}52%{opacity:1;transform:scale(1.15)}56%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:scale(.6)}}
.bento-name{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
.k-name{flex-direction:row;align-items:center;gap:clamp(24px,4vw,56px);padding:clamp(24px,3.4vw,44px)}
.turm-rahmen{position:relative;flex:none;width:clamp(92px,9vw,120px);aspect-ratio:260/560;border-radius:20px;background:var(--kachel-2);border:1px solid var(--rand);padding:14px 10px;overflow:hidden}
.turm-rahmen::before{content:"";position:absolute;left:-40%;right:-40%;bottom:-30%;height:60%;background:radial-gradient(closest-side,color-mix(in srgb,var(--a2) 45%,transparent),transparent);animation:atmen 6s ease-in-out infinite}
.turm-tusche{position:relative;display:block;width:100%;height:100%;background:var(--verlauf-text);-webkit-mask:url(/bilder/turm-tusche.svg) center/contain no-repeat;mask:url(/bilder/turm-tusche.svg) center/contain no-repeat}
.name-text{display:flex;flex-direction:column;gap:12px}
.name-text h2{font-size:clamp(1.8rem,1.2rem + 1.8vw,2.6rem);letter-spacing:-.035em}
.name-text p:not(.etikett){color:var(--text-2);max-width:38em}
.k-band{flex-direction:column;align-items:flex-start;justify-content:space-between}

/* ───────────────────────── Schwerpunkte ───────────────────────── */
.sprung{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:32px}
.sprung a{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:var(--kachel);border:1px solid var(--rand);box-shadow:var(--schatten);color:var(--text);text-decoration:none;transition:transform .3s var(--weich)}
.sprung a:hover{transform:translateY(-3px)}
.sp-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--verlauf);flex:none}
.sp-ic svg{width:20px;height:20px;fill:none;stroke:var(--knopf-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sp-t{display:flex;flex-direction:column;min-width:0;flex:1}
.sp-t b{font-weight:600;font-size:1rem;line-height:1.3}
.sp-t b{overflow-wrap:break-word}
html[lang="ru"] .sp-t b{-webkit-hyphens:auto;hyphens:auto}
.sp-t small{font-size:.8rem;color:var(--text-3);line-height:1.35}
.sp-pfeil{width:18px;height:18px;fill:none;stroke:var(--text-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .3s var(--weich)}
.sprung a:hover .sp-pfeil{transform:translateY(3px)}
.abschnitt-eng{padding-top:clamp(24px,3vw,48px)}
.bento-gruppe{grid-template-columns:repeat(4,minmax(0,1fr));scroll-margin-top:96px}
.bento-gruppe + .bento-gruppe{margin-top:var(--spalt)}
.g-links{grid-template-areas:"kopf haupt haupt neben"}
.g-rechts{grid-template-areas:"haupt haupt neben kopf"}
.bento-gruppe .k-gkopf{grid-area:kopf}.bento-gruppe .k-dienst.breit{grid-area:haupt}.bento-gruppe .k-dienst:not(.breit){grid-area:neben}
.k-gkopf{justify-content:flex-end;gap:10px;min-height:440px}
.gk-ic{position:absolute!important;top:var(--kp);inset-inline-start:var(--kp);display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:color-mix(in srgb,var(--weiss) 30%,transparent);border:1px solid color-mix(in srgb,var(--weiss) 45%,transparent)}
.gk-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.k-gkopf h3{font-size:clamp(1.9rem,1.3rem + 1.3vw,2.6rem);letter-spacing:-.04em;color:inherit}
html[lang="ru"] .k-gkopf h3{font-size:clamp(1.45rem,.6rem + 1.45vw,1.85rem);letter-spacing:-.03em}
.k-gkopf h3{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.k-gkopf p{font-size:1rem;line-height:1.5}
.verlauf-kachel h3,.verlauf-kachel p{color:var(--knopf-text)}
.k-gkopf.tinte p{color:var(--tinte-text-2)}
.k-gkopf.tinte .gk-ic{background:var(--tinte-2);border-color:var(--tinte-rand);color:var(--a2)}
.k-gkopf.weiss .gk-ic{background:var(--verlauf);border:0;color:var(--knopf-text)}
.k-gkopf.weiss p{color:var(--text-2)}
.gk-orbit{position:absolute!important;z-index:1;inset-inline:0;top:0;bottom:42%;display:grid;place-items:center;pointer-events:none;--gk-ring:var(--rand-2);--gk-punkt:var(--a1)}
.gk-orbit .gk-ic{position:relative!important;top:auto;inset-inline-start:auto;width:84px;height:84px;border-radius:24px;z-index:2;box-shadow:0 18px 40px -16px color-mix(in srgb,var(--sf) 35%,transparent)}
.gk-orbit .gk-ic svg{width:38px;height:38px}
.gk-orbit > i{position:absolute;left:50%;top:50%;width:var(--o);height:var(--o);margin:calc(var(--o) / -2) 0 0 calc(var(--o) / -2);border-radius:50%;border:1px solid var(--gk-ring);animation:drehen var(--t) linear infinite}
.gk-orbit > i::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--gk-punkt);box-shadow:0 0 12px var(--gk-punkt)}
.gk-orbit .o1{--o:148px;--t:16s}
.gk-orbit .o2{--o:216px;--t:26s;border-style:dashed;animation-direction:reverse}
.gk-orbit .o2::after{top:auto;bottom:-4px;width:6px;height:6px;margin-left:-3px}
.gk-orbit .o3{--o:284px;--t:38s}
.gk-orbit .o3::after{top:50%;left:-4px;margin:-4px 0 0}
.verlauf-kachel .gk-orbit{--gk-ring:color-mix(in srgb,var(--sf) 20%,transparent);--gk-punkt:var(--knopf-text)}
.verlauf-kachel .gk-orbit .gk-ic{background:color-mix(in srgb,var(--weiss) 34%,transparent);border-color:color-mix(in srgb,var(--weiss) 60%,transparent)}
.k-gkopf.tinte .gk-orbit{--gk-ring:color-mix(in srgb,var(--weiss) 13%,transparent);--gk-punkt:var(--a2)}
.k-gkopf.tinte .gk-orbit .gk-ic{box-shadow:0 0 0 1px var(--tinte-rand),0 0 44px -6px color-mix(in srgb,var(--a1) 55%,transparent)}
.k-dienst{gap:20px}
.d-bild{position:relative;height:240px;border-radius:18px;background:var(--kachel-2);border:1px solid var(--rand);overflow:hidden;display:grid;place-items:center;grid-template-columns:minmax(0,1fr)}
.d-text h4{font-size:1.3rem;letter-spacing:-.022em;line-height:1.2}
html[lang="ar"] .d-text h4{font-family:var(--ar-kopf);letter-spacing:0;line-height:1.45;font-size:1.2rem}
.d-text p{color:var(--text-2);font-size:.97rem;line-height:1.55;margin-top:8px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tags li{padding:4px 11px;border-radius:999px;font-size:.78rem;font-weight:500;color:var(--text-2);background:var(--kachel-2);border:1px solid var(--rand)}
.knoten-bild{width:100%;height:100%;padding:12px}
.kb-fenster{fill:var(--kachel);stroke:var(--rand-2);stroke-width:1.2}
.kb-leiste{stroke:var(--rand-2);stroke-width:1}
.kb-p1{fill:var(--a1)}.kb-p2{fill:var(--a3)}.kb-p3{fill:var(--ok)}
.kb-logo,.kb-knopf{fill:url(#g-vay)}
.kb-z{fill:var(--text-3);opacity:.45}.kb-z.k{opacity:.25}
.kb-app{filter:drop-shadow(0 12px 16px color-mix(in srgb,var(--sf) 14%,transparent))}
.kb-k .ni{fill:none;stroke:var(--text-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u1{animation:u1 3s linear infinite}.u2{animation:u2 3.4s linear infinite;animation-delay:-1.4s}
.u3{animation:u3 3.2s linear infinite;animation-delay:-.7s}.u4{animation:u4 3.6s linear infinite;animation-delay:-2.1s}
.paket.u2 circle{fill:var(--a3)}.paket.u3 circle{fill:var(--a2)}.paket.u4 circle{fill:var(--ok)}
@keyframes u1{0%{transform:translate(104px,52px);opacity:0}8%{opacity:1}35%{transform:translate(150px,52px)}65%{transform:translate(150px,92px)}92%{opacity:1}100%{transform:translate(196px,92px);opacity:0}}
@keyframes u2{0%{transform:translate(196px,120px);opacity:0}8%{opacity:1}35%{transform:translate(150px,120px)}65%{transform:translate(150px,158px)}92%{opacity:1}100%{transform:translate(104px,158px);opacity:0}}
@keyframes u3{0%{transform:translate(416px,52px);opacity:0}8%{opacity:1}35%{transform:translate(370px,52px)}65%{transform:translate(370px,92px)}92%{opacity:1}100%{transform:translate(324px,92px);opacity:0}}
@keyframes u4{0%{transform:translate(324px,120px);opacity:0}8%{opacity:1}35%{transform:translate(370px,120px)}65%{transform:translate(370px,158px)}92%{opacity:1}100%{transform:translate(416px,158px);opacity:0}}
.mini-handy{position:relative;width:132px;height:214px;border-radius:26px;background:var(--tinte);padding:7px;box-shadow:0 0 0 1px var(--rand-2),0 22px 40px -18px color-mix(in srgb,var(--sf) 50%,transparent);animation:schweben 7s ease-in-out infinite}
.mh-insel{position:absolute;top:12px;left:50%;width:36px;height:9px;margin-left:-18px;border-radius:9px;background:var(--schwarz);z-index:3}
.mh-schirm{position:relative;height:100%;border-radius:19px;background:var(--kachel);overflow:hidden;padding:30px 10px 12px;display:flex;flex-direction:column}
.mh-banner{position:absolute;left:6px;right:6px;top:26px;z-index:2;display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:11px;background:var(--tinte-2);color:var(--tinte-text);font-size:.62rem;font-weight:600;line-height:1.2;box-shadow:0 8px 18px -8px color-mix(in srgb,var(--sf) 50%,transparent);animation:mh-banner 6s var(--weich) infinite}
html[lang="ar"] .mh-banner{font-family:var(--ar)}
.mh-ic{width:16px;height:16px;border-radius:5px;background:var(--verlauf);flex:none}
.mh-text{flex:1;min-width:0}
.mh-banner svg{width:13px;height:13px;flex:none;fill:none;stroke:var(--ok);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@keyframes mh-banner{0%,10%{opacity:0;transform:translateY(-70%)}18%,64%{opacity:1;transform:none}74%,100%{opacity:0;transform:translateY(-70%)}}
.mh-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:40px}
.mh-raster i{aspect-ratio:1;border-radius:9px;background:var(--kachel-3)}
.mh-raster i:nth-child(1){background:var(--verlauf);animation:mh-app 6s var(--weich) infinite}
.mh-raster i:nth-child(2),.mh-raster i:nth-child(6){background:var(--tinte)}
.mh-raster i:nth-child(5){background:color-mix(in srgb,var(--ok) 75%,var(--kachel))}
@keyframes mh-app{0%,56%{transform:none}62%{transform:scale(.82)}70%,100%{transform:none}}
.mh-fort{margin-top:auto;height:6px;border-radius:3px;background:var(--kachel-3);overflow:hidden}
.mh-fort em{display:block;height:100%;background:var(--verlauf);transform-origin:left;animation:mh-fort 6s var(--weich) infinite}
@keyframes mh-fort{0%,16%{transform:scaleX(0)}56%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.ablaufkette{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:20px;padding:36px clamp(16px,3vw,30px) 18px}
.ablaufkette .beispiel{top:12px;inset-inline-end:12px}
.ak-reihe{position:relative;display:flex;justify-content:space-between}
.ak-linie,.ak-lauf{position:absolute;left:36px;right:36px;top:26px;height:3px;border-radius:2px}
.ak-linie{background:var(--rand-2)}
.ak-lauf{background:var(--verlauf);transform-origin:left;animation:kette-lauf 7s cubic-bezier(.6,0,.3,1) infinite}
.ak-schritt{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;width:72px}
.ak-ic{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--kachel);border:1px solid var(--rand-2);overflow:hidden}
.ak-ic::before{content:"";position:absolute;inset:0;background:var(--verlauf);opacity:0;animation:glied 7s ease infinite;animation-delay:calc(var(--a) * 1.28s)}
.ak-ic svg{position:relative;width:24px;height:24px;fill:none;stroke:var(--text);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ak-schritt b{font-size:.74rem;font-weight:600;color:var(--text-2);text-align:center;line-height:1.25}
.ak-log{display:flex;flex-direction:column;gap:6px}
.ak-log span{display:flex;align-items:center;gap:10px;height:22px;padding:0 10px;border-radius:7px;background:var(--kachel);border:1px solid var(--rand);animation:ak-log 7s var(--weich) infinite;animation-delay:calc(var(--l) * 1.28s + 1.28s)}
.ak-log i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.ak-log b{height:5px;border-radius:3px;background:var(--text-3);opacity:.35;flex:1}
.ak-log b.k{flex:.5}
@keyframes ak-log{0%,4%{opacity:0;transform:translateY(6px)}12%,80%{opacity:1;transform:none}92%,100%{opacity:0}}
.verlauf-graph{height:88%;width:auto}
.vg-haupt{fill:none;stroke:var(--linie);stroke-width:4;stroke-linecap:round}
.vg-zweig{fill:none;stroke:var(--a2);stroke-width:4;stroke-linecap:round;opacity:.85;animation:vg-zweig 8s ease infinite}
.vg-c{fill:var(--kachel);stroke:var(--text-2);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:vg 8s var(--weich) infinite}
.vg-c.z{stroke:var(--a2)}
.vg-c.c5{fill:url(#g-vay);stroke:none}
.vg-tag{fill:color-mix(in srgb,var(--a2) 32%,transparent);transform-box:fill-box;transform-origin:left;animation:vg 8s var(--weich) infinite}
.vg-tag.ok{fill:color-mix(in srgb,var(--ok) 38%,transparent)}
.verlauf-graph .c2{animation-delay:.8s}.verlauf-graph .c3{animation-delay:1.6s}.verlauf-graph .c4{animation-delay:2.4s}.verlauf-graph .c5{animation-delay:3.2s}.verlauf-graph .c6{animation-delay:4s}
@keyframes vg{0%,3%{opacity:0;transform:scale(.3)}9%,80%{opacity:1;transform:none}90%,100%{opacity:0;transform:scale(.6)}}
@keyframes vg-zweig{0%,18%{opacity:0}26%,80%{opacity:.85}90%,100%{opacity:0}}
.grundriss{width:100%;height:100%;padding:10px}
.gr-wand{fill:none;stroke:var(--text-3);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;opacity:.45}
.gr-kabel path{fill:none;stroke:var(--linie);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.gr-kabel.glut path{stroke:url(#g-linie);stroke-dasharray:4 9;opacity:.5}
.gr-switch rect{fill:var(--tinte)}
.gr-tisch{fill:var(--kachel);stroke:var(--rand-2);stroke-width:1.2}
.gr-schirm{fill:var(--tinte)}
.gr-funk{fill:none;stroke:var(--a2);stroke-width:2;stroke-dasharray:3 6;opacity:.45}
.gr-welle{fill:none;stroke:var(--a2);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:gr-welle 3.6s ease-out infinite}
.gr-welle.w2{animation-delay:1.2s}.gr-welle.w3{animation-delay:2.4s}
@keyframes gr-welle{0%{opacity:.8;transform:scale(.25)}100%{opacity:0;transform:scale(1.7)}}
.gr-ap-k{fill:var(--kachel);stroke:var(--a2);stroke-width:2}
.gr-ap-p{fill:url(#g-vay)}
.v1{animation:v1 3.2s linear infinite}.v2{animation:v2 3.6s linear infinite;animation-delay:-1.5s}.v3{animation:v3 2.6s linear infinite;animation-delay:-.8s}
.paket.v2 circle{fill:var(--a3)}.paket.v3 circle{fill:var(--ok)}
@keyframes v1{0%{transform:translate(68px,182px);opacity:0}8%{opacity:1}40%{transform:translate(120px,182px)}92%{opacity:1}100%{transform:translate(120px,64px);opacity:0}}
@keyframes v2{0%{transform:translate(68px,182px);opacity:0}8%{opacity:1}75%{transform:translate(262px,182px)}92%{opacity:1}100%{transform:translate(262px,142px);opacity:0}}
@keyframes v3{0%{transform:translate(262px,128px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(340px,64px);opacity:0}}
.eingang{position:absolute;inset:14px;display:flex;flex-direction:column;border-radius:14px;background:var(--kachel);border:1px solid var(--rand);overflow:hidden}
.ei-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--rand)}
.ei-kopf b{font-size:.84rem}
html[lang="ar"] .ei-kopf b{font-family:var(--ar)}
.ei-kopf .beispiel{position:static}
.ei-liste{display:flex;flex-direction:column;gap:7px;padding:12px}
.ei{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border-radius:9px;background:var(--kachel-2);border:1px solid var(--rand);animation:ei 9s var(--weich) infinite;animation-delay:calc(var(--e) * .9s)}
.ei i{width:8px;height:8px;border-radius:50%;background:var(--a2);flex:none}
.ei b{height:5px;flex:1;border-radius:3px;background:var(--text-3);opacity:.35}
.ei b.k{flex:.55}
.ei em{position:relative;width:40px;height:14px;flex:none;border-radius:999px;background:color-mix(in srgb,var(--a3) 42%,transparent);overflow:hidden}
.ei em::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--ok) 48%,var(--kachel));animation:ei-ok 9s ease infinite;animation-delay:calc(var(--e) * .9s)}
@keyframes ei{0%,4%{opacity:0;transform:translateY(-10px)}10%,84%{opacity:1;transform:none}92%,100%{opacity:0}}
@keyframes ei-ok{0%,40%{opacity:0}48%,84%{opacity:1}92%,100%{opacity:0}}
.s-angebot{display:grid;place-items:center}
.sa-blatt{position:relative;width:112px;height:86px;border-radius:10px;background:var(--kachel);border:1px solid var(--rand-2);padding:13px 12px;display:flex;flex-direction:column;gap:7px;box-shadow:0 12px 20px -14px color-mix(in srgb,var(--sf) 40%,transparent);animation:sa-blatt 7s var(--weich) infinite}
.sa-blatt b{height:5px;border-radius:3px;background:var(--text-3);opacity:.4}
.sa-blatt b.k{width:70%}.sa-blatt b.k2{width:45%}
.sa-stempel{position:absolute;right:-13px;bottom:-13px;width:36px;height:36px;border-radius:50%;background:var(--ok);display:grid;place-items:center;animation:sa-stempel 7s var(--weich) infinite}
.sa-stempel svg{width:18px;height:18px;fill:none;stroke:var(--weiss);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@keyframes sa-blatt{0%,6%{opacity:0;transform:translateY(14px) rotate(-4deg)}16%,86%{opacity:1;transform:rotate(-2deg)}94%,100%{opacity:0;transform:rotate(-2deg)}}
@keyframes sa-stempel{0%,40%{opacity:0;transform:scale(1.8)}46%{opacity:1;transform:scale(.9)}50%,86%{opacity:1;transform:none}94%,100%{opacity:0}}
.schiene.vier .s-linie,.schiene.vier .s-lauf{left:12.5%;right:12.5%}
.schiene.vier b{inset-inline-start:calc(12.5% + var(--s) * 25% - 8px)}
.schiene.vier b::after{animation-delay:calc(var(--s) * 1.45s)}
.nachsatz{display:flex;align-items:center;gap:14px;margin-top:var(--spalt);padding:16px 20px;border-radius:18px;background:var(--kachel);border:1px dashed var(--rand-2);color:var(--text-2);font-size:.98rem}
.ns-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--verlauf);flex:none}
.ns-ic svg{width:18px;height:18px;fill:none;stroke:var(--knopf-text);stroke-width:2;stroke-linecap:round}
.k-cta .cta-h{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.2rem);letter-spacing:-.035em;color:var(--tinte-text)}
.abschnitt-schluss{padding-top:0}
.recht h2.etikett{margin-bottom:10px}

@media (max-width:1000px){
  .bento-ueber{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;grid-template-areas:"team team" "stat ort" "arb arb" "post post"}
  .k-team{min-height:420px}.k-status,.k-ort{min-height:230px}.k-arbeit{min-height:340px}
  .g-links,.g-rechts{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"kopf neben" "haupt haupt"}
  .k-gkopf{min-height:0}
  .bento-ablauf.vier{grid-template-columns:repeat(2,minmax(0,1fr))}
  .schiene.vier{display:none}
  .bento-drei{grid-template-columns:1fr}
  .bento-name{grid-template-columns:1fr}
  .sprung{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .g-links,.g-rechts{grid-template-columns:1fr;grid-template-areas:"kopf" "haupt" "neben"}
  .k-gkopf{padding-top:96px}
  .gk-orbit{inset:auto;top:var(--kp);inset-inline-start:var(--kp);display:block}
  .gk-orbit > i{display:none}
  .gk-orbit .gk-ic{width:60px;height:60px;border-radius:18px}
  .gk-orbit .gk-ic svg{width:28px;height:28px}
  .d-bild{height:220px}
  .k-team{min-height:360px}
  .k-status .k-text p,.k-ort .k-text p{font-size:.9rem}
  .k-arbeit{min-height:0}.k-arbeit .k-bild{min-height:150px}
  .g-ic{width:64px;height:64px;border-radius:18px}.g-ic svg{width:28px;height:28px}
  .glied{width:76px}.glied b{font-size:.8rem}
  .kette-linie,.kette-lauf{top:31px;left:calc(3% + 32px);right:calc(3% + 32px)}
  .k-post{flex-direction:column;align-items:flex-start}
  .post-bild{width:96px;height:96px;border-radius:24px}
  .k-name{flex-direction:column;align-items:flex-start}
  .sprung a{padding:12px;gap:10px}
  .sp-pfeil{display:none}
  .sp-ic{width:34px;height:34px;border-radius:10px}
  .ak-schritt{width:60px}.ak-ic{width:46px;height:46px}.ak-linie,.ak-lauf{top:22px;left:30px;right:30px}
}

/* ───────────────────────── Bewegung: ruhen, reduzieren ───────────────────────── */
.ruht,.ruht::before,.ruht::after,.ruht *,.ruht *::before,.ruht *::after,
.versteckt *,.versteckt *::before,.versteckt *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .knopf::after,.verlauf-kachel::before,.licht,.rand-licht{display:none}
  /* Endzustände zeigen */
  .b-zeiger,.b-toast,.sich-status .laeuft,.paket,.tippt,.gk-wirr{opacity:0}
  .fakten{display:flex;flex-direction:column;gap:10px}
  .fakten li{position:static;opacity:1;font-size:1.08rem}
  .fakt-takt{display:none}
  .h-bahn{transform:none}
  .schiene b::after{opacity:1}
  .e-baut{opacity:0}
  .e-laeuft,.e-punkt::after{opacity:1}
}

/* ───────────────────────── Anpassung an Breiten ───────────────────────── */
@media (max-width:1120px){
  .bento-start{grid-template-rows:repeat(5,minmax(228px,auto))}
  .k-mon{--sp:minmax(0,.9fr) minmax(0,1.1fr)}
}
@media (max-width:1000px){
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:2px;padding:12px clamp(16px,3.6vw,40px) 18px;background:var(--grund);border-bottom:1px solid var(--rand);box-shadow:0 24px 40px -24px color-mix(in srgb,var(--sf) 30%,transparent)}
  .menu.offen{display:flex}
  .menu a{padding:12px 14px;font-size:1.05rem}
  .menu-schalter{display:flex}
  .werkzeuge{margin-inline-start:auto}
  .held-unter{grid-template-columns:1fr;gap:24px}
  .held-unter .knopfreihe{justify-content:flex-start}
  .bento-start{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;
    grid-template-areas:"web web" "app code" "mon mon" "srv bkp" "netz netz" "fak sup" "cta cta"}
  .k-web{min-height:480px}
  .k-app,.k-code{min-height:470px}
  .k-mon,.k-netz{min-height:250px}
  .k-srv,.k-bkp{min-height:236px}
  .k-sup{min-height:460px}
  .k-fakt{min-height:260px}
  .k-cta{flex-direction:column;align-items:flex-start}
  .bento-praxis{grid-template-columns:1fr;grid-template-areas:"gleis" "platt" "fern"}
  .k-gleis{grid-template-columns:1fr}
  .k-kontakt{grid-template-columns:1fr}
  .fuss-raster{grid-template-columns:1fr 1fr}
  .fuss-marke{grid-column:1/-1}
}
@media (max-width:760px){
  .bento-ablauf,.bento-ablauf.vier{grid-template-columns:1fr}
  .schiene{display:none}
  .k-schritt{min-height:0}
}
@media (max-width:640px){
  :root{--r:22px;--kp:18px;--spalt:12px}
  .kopf-innen{gap:10px;min-height:62px}
  .marke svg{width:32px}
  .kopf .marke b span{display:none}
  .sprache button{min-width:30px;padding:6px 6px;font-size:.7rem}
  .thema{width:38px;height:38px}
  .held h1{letter-spacing:-.042em}
  .knopf{min-height:50px;padding:0 20px}
  .bento-start{grid-template-areas:"web web" "app srv" "app bkp" "code code" "mon mon" "netz netz" "sup sup" "fak fak" "cta cta"}
  .k-web{min-height:430px}
  .k-app{min-height:0}
  .handy{width:min(132px,82%)}
  .k-code{min-height:372px}
  .k-code .k-bild{min-height:244px}
  .k-app .k-etikett{letter-spacing:.03em}
  .k-srv,.k-bkp{min-height:0}
  .k-srv .k-bild,.k-bkp .k-bild{min-height:96px}
  .k-bkp .beispiel{position:absolute;top:0;inset-inline-end:0;margin:0}
  .srv{flex-direction:column;align-items:stretch;gap:10px}
  .ring{display:none}
  .k-mon,.k-netz{display:flex;min-height:0}
  .k-mon .k-text,.k-netz .k-text{align-self:stretch}
  .k-mon .k-bild,.k-netz .k-bild{margin-bottom:16px}
  .k-mon .k-bild{padding-top:32px;min-height:170px}
  .k-netz .k-bild{min-height:170px}
  .k-sup{min-height:400px}
  .k-fakt{min-height:172px}
  .bento::before{inset:-24px 0;animation:none}
  .kachel h3{font-size:1.16rem}
  .b-seite{display:none}
  .b-karten{grid-template-columns:repeat(2,1fr)}
  .b-karte:nth-child(3){display:none}
  .b-zeile:nth-child(n+3){display:none}
  .stapel{height:260px}
  .platte{width:140px;inset-inline-start:calc(50% - 128px);top:calc(150px - var(--p) * 42px)}
  .k-gleis{grid-template-columns:1fr}
  .kform{grid-template-columns:1fr}
  .daten > div{grid-template-columns:1fr;gap:2px}
  .fuss-raster{grid-template-columns:1fr 1fr;gap:24px}
  /* auf dem Handy leiser: Hintergrund-Leuchten steht */
  .aurora i,.handy-hof,.glut i{animation:none!important}
  .knopf::after{display:none}
}
@media (max-width:380px){
  .sprache button{min-width:28px;padding:6px 5px}
  .k-srv .k-text p:not(.k-etikett),.k-bkp .k-text p:not(.k-etikett){display:none}
}