/* ============================================================
   designed IT – designed-it.de
   Corporate Design nach Brand Guideline:
   Blau #2196F3 · Navy #1E293F · Hellblau #A5D7F9
   Verlauf blau  #1653BF → #2196F3
   Verlauf hell  #A5D7F9 → #5F9EC1
   Grauskala Cloud #EDEFF7 · Space #9DA2B3 · Phantom #1E1E24
   Schrift Manrope (lokal gehostet, keine externen Aufrufe)
   Der Winkel 59° stammt aus der Schräge des Emblems und trägt
   Hintergrundraster, Lichtimpulse und die Anflugrichtungen.
   ============================================================ */

/* ---- Schrift (lokal, DSGVO-konform) ---- */
@font-face{font-family:"Manrope";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/manrope-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/manrope-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/manrope-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/manrope-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/manrope-latin-800-normal.woff2") format("woff2")}

/* ---- Tokens ---- */
:root{
  --ground:#060A12;
  --ground-2:#0B1220;
  --panel:#0E1728;
  --panel-2:#111C31;
  --navy:#1E293F;
  --blue:#2196F3;
  --blue-deep:#1653BF;
  --sky:#A5D7F9;
  --ink:#EDEFF7;
  --muted:#9DA2B3;
  --muted-dim:#6E7180;
  --line:rgba(165,215,249,.13);
  --line-strong:rgba(165,215,249,.24);
  --pad:clamp(20px,5vw,64px);
  --wrap:1180px;
  --r:14px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--sky);text-decoration-color:rgba(165,215,249,.4);text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--blue);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}

/* ---- Hintergrund (auf allen Seiten) ---- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(58% 46% at 50% 20%, rgba(33,150,243,.18), transparent 70%),
    radial-gradient(38% 34% at 14% 72%, rgba(165,215,249,.08), transparent 72%),
    radial-gradient(46% 40% at 88% 8%, rgba(22,83,191,.20), transparent 74%),
    linear-gradient(180deg,var(--ground-2) 0%,var(--ground) 46%,#04070D 100%)}
.bg::after{content:"";position:absolute;inset:-20%;
  background:repeating-linear-gradient(121deg,
    rgba(165,215,249,0) 0 96px, rgba(165,215,249,.055) 96px 97px);
  -webkit-mask-image:radial-gradient(72% 58% at 50% 26%, #000 10%, transparent 80%);
          mask-image:radial-gradient(72% 58% at 50% 26%, #000 10%, transparent 80%)}
#field{position:fixed;inset:0;z-index:1;pointer-events:none}
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(126% 96% at 50% 40%, transparent 42%, rgba(4,7,13,.7) 100%)}
.page{position:relative;z-index:3;overflow-x:clip}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ---- Menüband ---- */
.nav{
  position:sticky;top:0;z-index:40;
  border-bottom:1px solid transparent;
  background:transparent;
  transition:background .35s ease,border-color .35s ease;
}
.nav.is-stuck{
  background:rgba(6,10,18,.98);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--wrap);margin-inline:auto;padding:14px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav__brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.nav__brand svg{height:26px;width:auto;display:block}
.nav__menu{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}
.nav__menu a{
  position:relative;color:var(--muted);text-decoration:none;
  font-size:14px;font-weight:500;letter-spacing:.06em;
  padding:6px 2px;transition:color .22s ease;white-space:nowrap;
}
.nav__menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:linear-gradient(90deg,var(--blue),var(--sky));
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.nav__menu a:hover{color:var(--ink)}
.nav__menu a:hover::after{transform:scaleX(1)}
.nav__menu a[aria-current="page"]{color:var(--ink)}
.nav__menu a[aria-current="page"]::after{transform:scaleX(1)}
.nav__cta{
  margin-left:6px;border:1px solid var(--line-strong);border-radius:999px;
  padding:9px 20px !important;color:var(--ink) !important;
  transition:background .25s ease,border-color .25s ease !important;
}
.nav__cta::after{display:none}
.nav__cta:hover{background:rgba(33,150,243,.14);border-color:rgba(33,150,243,.6)}
.nav__toggle{display:none;background:none;border:0;padding:10px 11px;margin-right:-3px;cursor:pointer;color:var(--ink);
  -webkit-tap-highlight-color:transparent}
.nav__toggle span{display:block;width:22px;height:1.6px;background:currentColor;margin:5px 0;
  transition:transform .3s ease,opacity .2s ease}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
/* Menüband auf der Startseite erst nach dem Intro */
.nav--intro{opacity:0;transform:translateY(-14px);
  animation:navIn .8s cubic-bezier(.16,1,.3,1) 2.35s forwards}
@keyframes navIn{to{opacity:1;transform:translateY(0)}}

/* Klappmenü bis 980 px: mit sieben Einträgen (seit "Über uns", 16.10.2026)
   passt das Menüband erst ab 970 px in eine Zeile. Grenze in site.js
   (matchMedia min-width: 981px) gleich mitziehen. */
@media (max-width:980px){
  .nav__toggle{display:block}
  .nav__menu{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(6,10,18,.99);
    border-bottom:1px solid var(--line);
    padding:8px var(--pad) 20px;
    max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);
    overflow-y:auto;overscroll-behavior:contain;
    display:none;
  }
  .nav__menu.is-open{display:flex}
  .nav__menu a{padding:14px 0;font-size:16px;border-bottom:1px solid rgba(165,215,249,.07)}
  .nav__menu a::after{display:none}
  .nav__cta{margin:14px 0 0;text-align:center;border-bottom:1px solid var(--line-strong) !important}
  /* Offenes Menue: Leiste auch ganz oben blickdicht */
  .nav.is-menu{background:rgba(6,10,18,.96);border-bottom-color:var(--line)}
}

/* ---- Typografie ---- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sky);margin:0 0 18px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--blue),transparent)}
h1,h2,h3{margin:0;font-weight:800;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(34px,5.6vw,64px)}
h2{font-size:clamp(27px,3.7vw,46px)}
h3{font-size:clamp(19px,1.7vw,23px);font-weight:700;letter-spacing:-.01em;line-height:1.25}
.lead{font-size:clamp(17px,1.55vw,21px);font-weight:300;line-height:1.62;
  color:rgba(237,239,247,.8);max-width:62ch;margin:20px 0 0}
p{margin:16px 0 0;color:rgba(237,239,247,.72);max-width:66ch}
.section{padding:clamp(64px,9vh,120px) 0}
.section--tight{padding:clamp(44px,6vh,76px) 0}
.hr{height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--line-strong) 30%,var(--line-strong) 70%,transparent)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font:inherit;font-size:15px;font-weight:600;letter-spacing:.02em;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease,background .25s ease,border-color .25s ease;
}
.btn--primary{background:linear-gradient(120deg,var(--blue-deep),var(--blue));color:#fff;
  box-shadow:0 8px 30px -12px rgba(33,150,243,.9)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(33,150,243,1);color:#fff}
.btn--ghost{border-color:var(--line-strong);color:var(--ink);background:rgba(255,255,255,.02)}
.btn--ghost:hover{border-color:rgba(33,150,243,.65);background:rgba(33,150,243,.10);color:var(--ink);transform:translateY(-2px)}
.btn__arrow{transition:transform .25s ease}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* ---- Startseite: Bühne + Intro ---- */
.stage{
  position:relative;min-height:calc(100vh - 62px);min-height:calc(100svh - 62px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--pad) var(--pad) calc(var(--pad) + 46px);
}
.mark{width:min(74vw,860px)}
.logo{width:100%;height:auto;display:block;overflow:visible}
.seg{opacity:0;transform-box:fill-box;transform-origin:center;
  animation:segIn .78s cubic-bezier(.16,1,.3,1) forwards}
.seg:nth-of-type(1){--dx:-118px;--dy:196px;--rot:-7deg;animation-delay:.10s}
.seg:nth-of-type(2){--dx:-176px;--dy:292px;--rot:-4deg;animation-delay:.20s}
.seg:nth-of-type(3){--dx:138px;--dy:-230px;--rot:6deg;animation-delay:.32s}
.seg:nth-of-type(4){--dx:202px;--dy:-336px;--rot:3deg;animation-delay:.42s}
@keyframes segIn{
  0%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.94)}
  60%{opacity:1}
  100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}
}
.shine rect{fill:url(#gShine);opacity:0;
  animation:shine .85s cubic-bezier(.4,0,.2,1) 1.02s 1 forwards}
@keyframes shine{
  0%{opacity:0;transform:translateX(-360px)}
  22%{opacity:.9}
  100%{opacity:0;transform:translateX(300px)}
}
.ltr{opacity:0;transform-box:fill-box;transform-origin:50% 100%;
  animation:ltrIn .62s cubic-bezier(.22,1,.32,1) forwards}
.ltr:nth-of-type(1){animation-delay:1.06s} .ltr:nth-of-type(2){animation-delay:1.11s}
.ltr:nth-of-type(3){animation-delay:1.16s} .ltr:nth-of-type(4){animation-delay:1.20s}
.ltr:nth-of-type(5){animation-delay:1.25s} .ltr:nth-of-type(6){animation-delay:1.30s}
.ltr:nth-of-type(7){animation-delay:1.35s} .ltr:nth-of-type(8){animation-delay:1.39s}
@keyframes ltrIn{
  from{opacity:0;transform:translateY(26px) scaleY(.86)}
  to{opacity:1;transform:translateY(0) scaleY(1)}
}
.it{opacity:0;transform-box:fill-box;transform-origin:0% 50%;
  animation:itIn .7s cubic-bezier(.16,1,.3,1) 1.5s forwards}
@keyframes itIn{
  0%{opacity:0;transform:translateX(-16px) scale(.9);filter:drop-shadow(0 0 0 rgba(33,150,243,0))}
  55%{opacity:1;filter:drop-shadow(0 0 22px rgba(33,150,243,.75))}
  100%{opacity:1;transform:translateX(0) scale(1);filter:drop-shadow(0 0 10px rgba(33,150,243,.28))}
}
.emblem{filter:drop-shadow(0 0 26px rgba(33,150,243,.22));
  transform-box:fill-box;transform-origin:center}
.rule{height:1px;width:min(64vw,700px);
  margin:clamp(26px,4.2vh,46px) 0 clamp(20px,3.2vh,32px);
  background:linear-gradient(90deg,transparent,var(--line) 18%,rgba(33,150,243,.55) 50%,var(--line) 82%,transparent);
  transform:scaleX(0);transform-origin:center;
  animation:ruleIn 1s cubic-bezier(.16,1,.3,1) 1.72s forwards}
@keyframes ruleIn{to{transform:scaleX(1)}}
.claim{
  margin:0;font-weight:300;font-size:clamp(15px,2.05vw,29px);
  letter-spacing:.085em;color:rgba(237,239,247,.78);text-align:center;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.42em;max-width:none}
.claim span{opacity:0;display:inline-block;
  animation:wordIn .8s cubic-bezier(.22,1,.32,1) forwards}
.claim span:nth-child(1){animation-delay:1.90s} .claim span:nth-child(2){animation-delay:1.99s}
.claim span:nth-child(3){animation-delay:2.08s} .claim span:nth-child(4){animation-delay:2.17s}
.claim span:nth-child(5){animation-delay:2.26s}
@keyframes wordIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
.claim .sep{color:var(--blue);text-shadow:0 0 18px rgba(33,150,243,.75);padding:0 .1em}
.scrollcue{
  position:absolute;left:50%;bottom:calc(var(--pad) * .6);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-dim);text-decoration:none;
  opacity:0;animation:fadeUp .9s ease 2.6s forwards}
.scrollcue:hover{color:var(--sky)}
.scrollcue i{display:block;width:1px;height:34px;
  background:linear-gradient(180deg,var(--line-strong),transparent);
  animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.35;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ---- Kopf der Unterseiten ---- */
.phead{padding:clamp(64px,12vh,132px) 0 clamp(34px,5vh,56px)}
.phead h1 span{background:linear-gradient(100deg,var(--sky),var(--blue) 55%,var(--blue-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- Karten ---- */
.grid{display:grid;gap:20px;margin-top:44px}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(276px,100%),1fr))}
.card{
  position:relative;padding:30px 28px 32px;border-radius:var(--r);
  background:linear-gradient(160deg,rgba(30,41,63,.6),rgba(11,18,32,.5));
  border:1px solid var(--line);overflow:hidden;
  transition:border-color .3s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(121deg,
    rgba(165,215,249,0) 0 40px, rgba(165,215,249,.07) 40px 41px);
  transition:opacity .35s ease}
.card:hover{border-color:rgba(33,150,243,.42);transform:translateY(-4px)}
.card:hover::before{opacity:1}
.card h3{margin-bottom:10px}
.card p{margin-top:0;font-size:15.5px;color:rgba(237,239,247,.68)}

/* ---- Zwei Spalten (Über uns: Partner-Tafeln) ---- */
.duo{display:grid;gap:clamp(28px,5vw,72px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  padding:clamp(40px,7vh,84px) 0}

/* ---- Tabellen (Prüfseite mail-test.php) ---- */
.tablewrap{overflow-x:auto;margin-top:40px;border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:15px}
caption{text-align:left;padding:18px 22px 0;color:var(--muted);font-size:14px}
th,td{text-align:left;padding:15px 22px;border-bottom:1px solid rgba(165,215,249,.08);
  vertical-align:top;color:rgba(237,239,247,.74)}
thead th{color:var(--ink);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(30,41,63,.5);border-bottom:1px solid var(--line-strong)}
tbody th{font-weight:600;color:var(--ink);width:32%}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}

/* ---- Bausteine-Chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;padding:0;list-style:none}
.chips li{
  font-size:13.5px;font-weight:500;letter-spacing:.02em;color:rgba(237,239,247,.78);
  border:1px solid var(--line);border-radius:999px;padding:9px 17px;
  background:rgba(30,41,63,.4)}
.chips li b{color:var(--blue);font-weight:700;margin-right:7px;font-variant-numeric:tabular-nums}

/* ---- Kontakt ---- */
.form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field .req{color:var(--blue)}
input,select,textarea{
  font:inherit;font-size:16px;color:var(--ink);
  background:rgba(11,18,32,.7);border:1px solid var(--line);border-radius:10px;
  padding:13px 15px;width:100%;
  transition:border-color .22s ease,background .22s ease}
textarea{min-height:150px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);background:rgba(11,18,32,.95)}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.row2{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media (max-width:600px){.row2{grid-template-columns:1fr}}
.consent{display:flex;gap:13px;align-items:flex-start;
  font-size:14.5px;color:rgba(237,239,247,.7);line-height:1.55}
.consent input{width:19px;height:19px;flex:0 0 auto;margin-top:2px;accent-color:var(--blue)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{font-size:13px;color:var(--muted-dim);margin-top:4px}
.alert{border-radius:10px;padding:15px 18px;font-size:15px;margin-bottom:26px;border:1px solid}
.alert--err{border-color:rgba(255,120,120,.45);background:rgba(255,80,80,.09);color:#FFC9C9}

.kontakt-erfolg{
  scroll-margin-top:110px;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,2.5vw,28px);align-items:center;
  margin:0 0 clamp(32px,5vh,54px);padding:clamp(24px,4vw,38px);
  border:1px solid rgba(33,150,243,.58);border-radius:var(--r);
  background:
    radial-gradient(90% 180% at 0 50%,rgba(33,150,243,.24),transparent 68%),
    linear-gradient(145deg,rgba(24,43,73,.92),rgba(11,18,32,.78));
  box-shadow:0 28px 72px -44px rgba(33,150,243,.95),inset 0 1px 0 rgba(255,255,255,.08)}
.kontakt-erfolg:focus{outline:2px solid var(--sky);outline-offset:5px}
.kontakt-erfolg__icon{
  width:clamp(54px,6vw,68px);height:clamp(54px,6vw,68px);display:grid;place-items:center;
  border-radius:50%;background:linear-gradient(135deg,var(--blue-deep),var(--blue));
  box-shadow:0 16px 36px -16px rgba(33,150,243,.95)}
.kontakt-erfolg__icon svg{width:62%;height:62%;stroke:#fff;stroke-width:3}
.kontakt-erfolg .eyebrow{margin:0 0 8px}
.kontakt-erfolg h2{margin:0;font-size:clamp(25px,3vw,38px);line-height:1.12}
.kontakt-erfolg p:last-child{margin:10px 0 0;max-width:none;color:rgba(237,239,247,.8);font-size:clamp(15px,1.4vw,18px)}
@media (max-width:560px){
  .kontakt-erfolg{grid-template-columns:1fr;align-items:start;scroll-margin-top:90px}
  .kontakt-erfolg__icon{width:54px;height:54px}
}

.infocard{border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;
  background:linear-gradient(160deg,rgba(30,41,63,.55),rgba(11,18,32,.45))}
.infocard h3{margin-bottom:18px}
.infolist{list-style:none;margin:0;padding:0;display:grid;gap:16px;font-size:15.5px}
.infolist dt,.infolist .k{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-dim);margin-bottom:3px}
.infolist dd{margin:0}
.infolist a{text-decoration:none}
.infolist a:hover{text-decoration:underline}

/* ---- Fußzeile ---- */
.foot{border-top:1px solid var(--line);margin-top:clamp(48px,8vh,96px);
  padding:38px 0 44px;font-size:14px;color:var(--muted-dim)}
.foot__inner{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between}
.foot__links{display:flex;flex-wrap:wrap;gap:22px}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--sky)}
.foot__claim{letter-spacing:.14em;font-size:12px;text-transform:uppercase}
/* Telefonnummer und E-Mail in der Fußzeile: kleines Icon aus dem eigenen
   Set, dahinter Nummer bzw. Adresse in derselben Schreibweise wie überall. */
.foot__tel,.foot__mail{display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--ink);
  text-decoration:none;white-space:nowrap}
.foot__tel svg,.foot__mail svg{width:17px;height:17px;flex:0 0 auto;overflow:visible}
.foot__tel .ink,.foot__mail .ink{stroke:rgba(237,239,247,.55)}
.foot__tel .accent,.foot__mail .accent{stroke:var(--blue)}
.foot__tel:hover,.foot__mail:hover{color:var(--sky)}
.foot__tel:hover .ink,.foot__mail:hover .ink{stroke:var(--sky)}
/* Telefon, E-Mail und Fernwartung bleiben als Gruppe zusammen. */
.foot__direct{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
/* Fernwartung: einen Tick deutlicher als die uebrigen Links - feine
   blaue Kontur als Pille, Monitor-Icon aus dem eigenen Set. Fuehrt
   extern zu TeamViewer QuickSupport (gewoehnlicher Link, laedt nichts). */
.foot a.foot__remote{display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px 7px 13px;border:1px solid rgba(33,150,243,.5);border-radius:999px;
  background:rgba(33,150,243,.09);color:var(--ink);
  font-size:14px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  transition:border-color .2s ease,background-color .2s ease,color .2s ease}
.foot__remote svg{width:17px;height:17px;flex:0 0 auto;overflow:visible}
.foot__remote .ink{stroke:rgba(237,239,247,.6);transition:stroke .2s ease}
.foot__remote .accent{stroke:var(--blue)}
.foot a.foot__remote:hover{color:var(--sky);border-color:rgba(165,215,249,.6);background:rgba(165,215,249,.1)}
.foot__remote:hover .ink{stroke:var(--sky)}
/* Bleibt die Jahreszeile als einzige in der zweiten Reihe uebrig,
   rueckt sie nach rechts - sonst haengt sie allein am linken Rand. */
@media (min-width:821px){.foot__copy{margin-left:auto}}

/* ---- Rechtstexte ---- */
.legal{max-width:78ch}
.legal h2{font-size:clamp(21px,2.2vw,27px);margin-top:44px}
.legal h3{margin-top:28px;font-size:17px}
.legal p,.legal li{font-size:15.5px;color:rgba(237,239,247,.72)}
.legal ul{padding-left:20px}
.legal li{margin:8px 0}
.todo{display:inline-block;background:rgba(255,193,7,.14);border:1px solid rgba(255,193,7,.42);
  color:#FFD86B;border-radius:6px;padding:1px 9px;font-size:13.5px;font-weight:600}

/* ---- Einflug beim Scrollen (nur mit aktivem JavaScript) ---- */
.js .reveal{opacity:0;transform:translateY(30px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.js .reveal--left{transform:translate3d(-56px,26px,0)}
.js .reveal--right{transform:translate3d(56px,26px,0)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal[data-d="1"]{transition-delay:.09s}
.js .reveal[data-d="2"]{transition-delay:.18s}
.js .reveal[data-d="3"]{transition-delay:.27s}
.js .reveal[data-d="4"]{transition-delay:.36s}

/* ---- Reduzierte Bewegung -------------------------------------
   Wenn im Betriebssystem "Animationen reduzieren" aktiv ist, wird
   das Intro nicht ersatzlos gestrichen, sondern durch ein ruhiges
   Aufblenden ersetzt: keine Bewegung, kein Dauerpuls, kein
   Hintergrundfeld - aber die Seite baut sich trotzdem sichtbar auf.
   -------------------------------------------------------------- */
@keyframes softIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .seg,.ltr,.it,.claim span,.scrollcue,.nav--intro,.rule{
    transform:none;filter:none;
    animation:softIn .55s ease-out both}
  .emblem{animation:none;filter:drop-shadow(0 0 26px rgba(33,150,243,.22))}
  /* Die gestaffelten Verzoegerungen der Segmente, Buchstaben und
     Claim-Woerter gelten weiter - nur eben als reines Aufblenden. */
  .rule{transform:scaleX(1)}
  .nav--intro{animation-delay:2.35s}
  .scrollcue{animation-delay:1.4s}
  .scrollcue i{animation:none;opacity:.5}
  .shine rect{display:none}
  #field{display:none}
  .js .reveal{transform:none;transition:opacity .6s ease}
  .js .reveal.is-in{opacity:1}
  .card:hover,.btn:hover{transform:none}
}

/* ---- Abstands-Hilfsklassen ---- */
.mt-l{margin-top:48px}
.mt-xl{margin-top:64px}

/* ---- Mobil: Logo großzügiger, Claim kompakter ---- */
@media (max-width:640px){
  .mark{width:86vw}
  .claim{font-size:clamp(13px,4.2vw,18px);letter-spacing:.06em}
  .duo{padding:clamp(28px,5vh,48px) 0}
}

/* ============================================================
   Startseite: Kurz gesagt + Philosophie
   Ohne Bildmaterial tragen die Aussagen selbst die Gestaltung.
   Die Ueberschriften fliegen wortweise ein, der Fließtext
   blendet versetzt nach. Der Akzentstrich steht im 59°-Winkel
   des Emblems und zieht sich mit auf.
   ============================================================ */

/* Container, dessen Kinder animieren – er selbst bleibt ruhig */
.js .reveal--words{opacity:1;transform:none;transition:none}

.say__text{
  font-size:clamp(21px,2.9vw,38px);font-weight:300;line-height:1.36;
  letter-spacing:-.015em;color:rgba(237,239,247,.72);max-width:30ch}
.say__text strong{color:var(--ink);font-weight:600}
.say__text .accent{
  background:linear-gradient(100deg,var(--sky),var(--blue) 60%);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}

.phil-list{margin-top:clamp(40px,7vh,88px)}
.phil{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(12px,2vw,28px);
  padding:clamp(46px,8vh,104px) 0;
  border-top:1px solid var(--line)}
.phil:first-child{border-top:0;padding-top:0}

.phil__mark{
  grid-column:1/-1;height:2px;width:56px;margin-bottom:clamp(20px,3vh,30px);
  background:linear-gradient(90deg,var(--blue),var(--sky));
  transform:skewX(-31deg) scaleX(0);transform-origin:left;
  transition:transform .75s cubic-bezier(.16,1,.3,1)}
.js .reveal.is-in .phil__mark{transform:skewX(-31deg) scaleX(1)}

.big{
  grid-column:1/span 10;margin:0;
  font-size:clamp(31px,6.1vw,82px);line-height:1.06;
  letter-spacing:-.032em;font-weight:800;text-wrap:balance}
.big .hw{
  display:inline-block;
  padding:.10em 0 .16em;margin:-.10em 0 -.16em;
  opacity:0;transform:translateY(.42em);
  transition:opacity .72s cubic-bezier(.16,1,.3,1),
             transform .72s cubic-bezier(.16,1,.3,1)}
.js .reveal.is-in .big .hw{opacity:1;transform:none}
.big .hw:nth-child(1){transition-delay:.02s}
.big .hw:nth-child(2){transition-delay:.09s}
.big .hw:nth-child(3){transition-delay:.16s}
.big .hw:nth-child(4){transition-delay:.23s}
.big .hw:nth-child(5){transition-delay:.30s}
.big .hw:nth-child(6){transition-delay:.37s}
.big .hw:nth-child(7){transition-delay:.44s}
.big .hw--blue{
  background:linear-gradient(100deg,var(--sky),var(--blue) 62%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.phil__body{
  grid-column:5/-1;margin-top:clamp(22px,3vh,36px);
  opacity:0;transform:translateY(22px);
  transition:opacity .85s ease .34s,transform .85s cubic-bezier(.16,1,.3,1) .34s}
.js .reveal.is-in .phil__body{opacity:1;transform:none}
.phil__body p{
  margin:0;max-width:56ch;
  font-size:clamp(16px,1.32vw,19px);line-height:1.68;color:rgba(237,239,247,.7)}

/* Zickzack: jede zweite Aussage rueckt nach rechts */
.phil:nth-child(even) .big{grid-column:3/-1;text-align:right}
.phil:nth-child(even) .phil__mark{margin-left:auto;transform-origin:right}
.phil:nth-child(even) .phil__body{grid-column:1/span 8}

.closing{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:24px;padding-top:clamp(40px,6vh,72px);border-top:1px solid var(--line)}
.closing p{margin:0;font-size:clamp(17px,1.6vw,21px);font-weight:300;color:rgba(237,239,247,.74)}
.closing .btn-row{margin-top:0}

@media (max-width:700px){
  .phil{grid-template-columns:1fr}
  .big,.phil:nth-child(even) .big{grid-column:1;text-align:left}
  .phil__body,.phil:nth-child(even) .phil__body{grid-column:1}
  .phil:nth-child(even) .phil__mark{margin-left:0;transform-origin:left}
  .say__text{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  /* Kein Versatz und kein Weichzeichner, aber die Woerter blenden
     weiterhin nacheinander auf - die Seite bleibt lebendig, ohne
     dass sich etwas bewegt. */
  .big .hw{transform:none;filter:none;transition:opacity .6s ease}
  .phil__body{transform:none;transition:opacity .7s ease .3s}
  .phil__mark{transform:skewX(-31deg) scaleX(1);transition:none}
}

/* ============================================================
   Leistungen im Zickzack
   ============================================================ */
.svc-list{counter-reset:svc;margin-top:clamp(40px,7vh,88px)}
.svc{
  counter-increment:svc;position:relative;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(12px,2vw,28px);
  padding:clamp(46px,8vh,104px) 0;
  border-top:1px solid var(--line)}
.svc:first-child{border-top:0;padding-top:0}
.svc > *{position:relative;z-index:1}

/* Geisterziffer in der freien Haelfte - zaehlt automatisch mit */
.svc::before{
  content:counter(svc,decimal-leading-zero);
  position:absolute;z-index:0;top:clamp(20px,4vh,56px);right:0;
  font-size:clamp(104px,15vw,230px);font-weight:800;line-height:.78;
  letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1px rgba(165,215,249,.11);
  pointer-events:none;-webkit-user-select:none;user-select:none}
.svc:nth-child(even)::before{right:auto;left:0}

/* Kopfzeile: Icon-Kachel und Bezeichnung */
.svc__lead{
  grid-column:1/-1;display:flex;align-items:center;
  gap:clamp(14px,1.6vw,20px);margin-bottom:clamp(20px,3vh,32px)}
.svc:nth-child(even) .svc__lead{flex-direction:row-reverse}
.svc__name{
  font-size:12px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--sky)}

.svc__ico{
  position:relative;flex:0 0 auto;overflow:hidden;
  width:clamp(60px,6.6vw,86px);aspect-ratio:1;border-radius:16px;
  display:grid;place-items:center;
  border:1px solid var(--line-strong);
  background:linear-gradient(150deg,rgba(30,41,63,.72),rgba(11,18,32,.5));
  opacity:0;transform:translateY(16px) scale(.9);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),
             transform .7s cubic-bezier(.16,1,.3,1)}
.svc__ico::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(121deg,
    rgba(165,215,249,0) 0 11px, rgba(165,215,249,.07) 11px 12px)}
.svc__ico::after{content:"";position:absolute;inset:-40%;
  background:radial-gradient(closest-side,rgba(33,150,243,.30),transparent 72%);
  opacity:0;transition:opacity .9s ease .35s}
.js .reveal.is-in .svc__ico{opacity:1;transform:none}
.js .reveal.is-in .svc__ico::after{opacity:1}
.svc__ico svg{position:relative;width:56%;height:auto;display:block;overflow:visible}
.svc__ico .ink{stroke:rgba(237,239,247,.88)}
.svc__ico .accent{stroke:var(--blue)}
.svc__ico .ink.solid{fill:rgba(237,239,247,.88)}
.svc__ico .accent.solid{fill:var(--blue)}

/* Die Konturen zeichnen sich beim Einflug. pathLength="100" im
   Markup macht die Dauer unabhaengig von der echten Pfadlaenge,
   sodass alle Striche gleich schnell laufen. */
.svc__ico path{
  stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset 1.15s cubic-bezier(.16,1,.3,1) .12s}
.svc__ico path.accent{transition-delay:.42s}
.svc__ico path.solid{fill-opacity:0;
  transition:stroke-dashoffset 1.15s cubic-bezier(.16,1,.3,1) .42s,
             fill-opacity .5s ease 1.15s}
.js .reveal.is-in .svc__ico path{stroke-dashoffset:0}
.js .reveal.is-in .svc__ico path.solid{fill-opacity:1}

/* Aussage und Text - Raster wie in der Philosophie, eine Spur kleiner,
   damit die H1 der Seite die groesste Schrift bleibt. */
.svc .big{font-size:clamp(28px,4.9vw,62px)}
.svc__body{
  grid-column:5/-1;margin-top:clamp(22px,3vh,36px);
  opacity:0;transform:translateY(22px);
  transition:opacity .85s ease .40s,
             transform .85s cubic-bezier(.16,1,.3,1) .40s}
.js .reveal.is-in .svc__body{opacity:1;transform:none}
.svc__body p{margin:0;max-width:56ch;
  font-size:clamp(16px,1.32vw,19px);line-height:1.68;color:rgba(237,239,247,.7)}

/* Zickzack: jede zweite Leistung rueckt nach rechts */
.svc:nth-child(even) .big{grid-column:3/-1;text-align:right}
.svc:nth-child(even) .svc__body{grid-column:1/span 8}

@media (max-width:700px){
  .svc{grid-template-columns:1fr}
  .svc::before{display:none}
  .svc .big,.svc:nth-child(even) .big{grid-column:1;text-align:left}
  .svc__body,.svc:nth-child(even) .svc__body{grid-column:1}
  .svc:nth-child(even) .svc__lead{flex-direction:row}
}

@media (prefers-reduced-motion:reduce){
  /* Kein Zeichnen, kein Versatz - die Kachel blendet nur auf. */
  .svc__ico{transform:none;transition:opacity .6s ease}
  .svc__ico path{stroke-dashoffset:0;transition:none}
  .svc__ico path.solid{fill-opacity:1;transition:none}
  .svc__body{transform:none;transition:opacity .7s ease .3s}
}

/* ============================================================
   Kontaktseite
   Angaben mit kleinen Icons in der Bildsprache des Icon-Sets,
   Standortblock mit freigestelltem Gebaeudefoto, Betreiber-Hinweisband.
   ============================================================ */

.alert--warn{border-color:rgba(255,193,7,.42);background:rgba(255,193,7,.09);color:#FFD86B}
.alert code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em;background:rgba(0,0,0,.3);padding:1px 7px;border-radius:5px}

.infoline{display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 14px;align-items:start}
.infoline__ico{display:block;margin-top:2px}
.infoline__ico svg{width:21px;height:21px;display:block;overflow:visible}
.infoline__ico .ink{stroke:rgba(237,239,247,.5)}
.infoline__ico .accent{stroke:var(--blue)}
.infoline .k{display:block}

/* Standort: Angaben links, freigestelltes Gebaeudefoto rechts, darunter
   der Verweis auf Google Maps. Das Foto ist eine PNG-/WebP-Freistellung
   mit weich auslaufender linker und unterer Kante - deshalb kein Rahmen
   und kein Hintergrund, nur ein Schlagschatten wie bei den Portraets. */
.standort{display:grid;gap:clamp(26px,4vw,56px);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  margin-top:clamp(24px,4vh,40px)}
@media (max-width:900px){.standort{grid-template-columns:1fr}}
.standort__ort{margin:0;display:grid;justify-items:start;gap:clamp(14px,2.4vh,24px)}
.standort__bild{width:100%;height:auto;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.45)) drop-shadow(0 0 38px rgba(33,150,243,.13))}
.standort__ort .btn-row{margin-top:0}
@media (max-width:900px){.standort__ort{justify-items:center}}
.protokoll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);
  background:rgba(11,18,32,.7);padding:18px 20px;font-size:13px;line-height:1.7;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:rgba(237,239,247,.78)}

/* ---- Motto unter dem Einleitungstext -----------------------
   Greift die Gestaltung des Claims aus dem Intro wieder auf:
   Sperrung, leichte Schrift, Trennpunkt in Blau.
   ------------------------------------------------------------ */
.say__motto{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.1em clamp(12px,1.4vw,20px);
  margin:clamp(26px,3.6vh,40px) 0 0;max-width:none}
.say__motto-lead{
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.say__motto-claim{
  font-size:clamp(17px,1.9vw,25px);font-weight:300;letter-spacing:.085em;
  color:rgba(237,239,247,.82)}
.say__motto-claim .sep{
  color:var(--blue);text-shadow:0 0 18px rgba(33,150,243,.75);padding:0 .12em}
@media (max-width:640px){
  .say__motto{flex-direction:column;gap:10px}
  .say__motto-lead{letter-spacing:.2em}
}

/* ============================================================
   managed360: Produktlogo im Seitenkopf
   Die Sperrung steht als H1. Beim Laden zieht das Logo auf,
   der Bogen dreht einmal im Uhrzeigersinn um das Emblem - in
   seiner eigenen Laufrichtung, vom hellen Auslauf angefuehrt -
   und kommt exakt in der Logoposition zur Ruhe. Danach atmet
   nur noch die blaue Glut wie auf der Startseite.
   Der Drehpunkt 256/256 ist die Emblemmitte im Signet-Raster.
   ============================================================ */
.phead__logo{
  margin:0;width:min(100%,560px);
  opacity:0;transform:translateY(18px);
  animation:m360up .85s cubic-bezier(.16,1,.3,1) .05s both}
@keyframes m360up{to{opacity:1;transform:none}}

.m360{width:100%;height:auto;display:block;overflow:visible}
.m360__ring{
  transform-origin:256px 256px;
  animation:m360ring 2.7s cubic-bezier(.16,1,.3,1) .30s both}
@keyframes m360ring{from{transform:rotate(-360deg)}to{transform:rotate(0)}}

.m360__word-in{
  opacity:0;transform:translateX(-22px);
  animation:m360word .9s cubic-bezier(.16,1,.3,1) .55s both}
@keyframes m360word{to{opacity:1;transform:none}}

.m360__emblem{filter:drop-shadow(0 0 14px rgba(33,150,243,.20))}

/* Nur fuer Vorlesegeraete und Suchmaschinen, optisch nicht vorhanden */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

@media (max-width:640px){.phead__logo{width:100%}}

@media (prefers-reduced-motion:reduce){
  /* Kein Umlauf und kein Versatz - das Logo blendet nur ruhig auf. */
  .phead__logo{transform:none;animation:softIn .6s ease-out both}
  .m360__ring{transform:none;animation:softIn .6s ease-out .15s both}
  .m360__word-in{transform:none;animation:softIn .6s ease-out .3s both}
  .m360__emblem{animation:none;filter:drop-shadow(0 0 14px rgba(33,150,243,.20))}
}

/* ============================================================
   Mobilgeraete und Tablets
   Ergaenzungen fuer Touch-Bedienung, Querformat am Handy und
   kleine Bildschirme. Alles hier greift nur, wenn das Geraet
   es braucht - am Desktop aendert sich nichts.
   ============================================================ */

/* Mailadressen nicht am Bindestrich umbrechen */
a[href^="mailto:"]{white-space:nowrap}

/* Seitlicher Anflug: auf schmalen Schirmen nur von unten, damit
   waehrend der Animation nichts ueber den Rand ragt */
@media (max-width:820px) and (prefers-reduced-motion:no-preference){
  .js .reveal--left,.js .reveal--right{transform:translate3d(0,26px,0)}
}

/* Touch: kein "haengender" Hover-Versatz nach dem Antippen,
   groessere Trefferflaechen in Fusszeile und Logo */
@media (hover:none){
  .card:hover,.btn:hover,.btn--ghost:hover{transform:none}
  .btn:hover .btn__arrow{transform:none}
}
@media (pointer:coarse){
  .nav__brand{padding-block:9px}
  .foot__links{gap:0 22px}
  .foot__links a{display:inline-block;padding-block:11px}
  .foot a.foot__remote{padding-block:10px}
  .foot__tel,.foot__mail{padding-block:10px}
}

/* Handy im Querformat: wenig Hoehe - Logo kleiner, Scroll-Hinweis weg */
@media (orientation:landscape) and (max-height:500px){
  .stage{padding-block:24px}
  .mark{width:min(58vw,560px)}
  .scrollcue{display:none}
  .phead{padding:48px 0 28px}
}

/* ============================================================
   Landingpage "Kostenloser IT-Sicherheits-Check"
   (sicherheitscheck.php - Ziel des QR-Codes auf dem Bauzaunbanner)

   Aufbau wie das Banner: Logo, Trennlinie, Claim - darunter
   Kopfzeile und Formular in einer schmalen Spalte. Die Seite wird
   fast immer am Handy geoeffnet, deshalb eine einzige Spalte und
   grosszuegige Eingabefelder.
   Logo, .rule und .claim uebernehmen die Animation der Startseite;
   hier wird nur die Groesse und der Abstand angepasst.
   ============================================================ */

.checkhead{padding:clamp(30px,6vh,64px) 0 0}
.checkhead__inner{display:flex;flex-direction:column;align-items:center}
.mark--check{width:min(76vw,460px)}
.checkhead .rule{width:min(70vw,520px);margin-bottom:0}
.checkhead .claim{font-size:clamp(12px,1.5vw,17px);letter-spacing:.11em}
@media (max-width:640px){
  .mark--check{width:74vw}
  .checkhead .claim{font-size:clamp(11px,3.4vw,14px);letter-spacing:.07em}
}

/* Schmale Lesespalte, mittig - der Kopf steht zentriert, das
   Formular linksbuendig, weil Eingabefelder sonst unruhig wirken. */
.checkwrap{max-width:calc(720px + var(--pad) * 2);margin-inline:auto}
.checkwrap .eyebrow{justify-content:center}
.checkwrap h1{text-align:center;font-size:clamp(30px,4.6vw,52px)}
.checkwrap h1 span{background:linear-gradient(100deg,var(--sky),var(--blue) 55%,var(--blue-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.checkwrap .lead{text-align:center;margin-inline:auto;margin-top:18px}

/* Formularkarte */
.checkcard{
  margin-top:clamp(28px,4vh,44px);
  border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3.4vw,38px);
  background:linear-gradient(180deg,rgba(17,28,49,.62),rgba(11,18,32,.42));
  position:relative;overflow:hidden}
.checkcard::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(140deg,rgba(33,150,243,.13),transparent 46%)}
.checkcard > *{position:relative}
.checkcard textarea{min-height:120px}

/* Sicherheitsfrage: leicht abgesetzt, damit sie nicht wie ein
   normales Feld aussieht und uebersehen wird. */
.field--frage{
  border:1px dashed var(--line-strong);border-radius:10px;
  padding:16px 18px;background:rgba(33,150,243,.05);gap:9px}
.field--frage label{text-transform:none;letter-spacing:0;font-size:15px;
  font-weight:400;color:rgba(237,239,247,.82);line-height:1.5}
.field--frage label strong{color:var(--ink);font-weight:700}
.field--frage input{max-width:190px}
.field--frage .note{margin-top:2px}

/* Drei kurze Zusagen unter dem Formular */
.checkpoints{list-style:none;margin:clamp(26px,4vh,40px) 0 0;padding:0;
  display:grid;gap:12px}
.checkpoints li{position:relative;padding-left:30px;font-size:15.5px;
  color:rgba(237,239,247,.7)}
.checkpoints li b{color:var(--ink);font-weight:600}
.checkpoints li::before{
  content:"";position:absolute;left:4px;top:.55em;width:11px;height:6px;
  border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(-45deg)}


/* Handy im Querformat: der Kopf darf die Seite nicht fuellen */
@media (orientation:landscape) and (max-height:500px){
  .checkhead{padding-top:18px}
  .mark--check{width:min(46vw,380px)}
}

/* Schmale Displays: die lange Zeile "Kostenloser IT-Sicherheits-Check"
   bricht um - dann stoert der Strich davor, er faellt weg. */
@media (max-width:560px){
  .checkwrap .eyebrow{text-align:center;flex-wrap:wrap}
  .checkwrap .eyebrow::before{display:none}
}

/* ============================================================
   managed 360 – Produktseite im Stil des Werbezettels
   Aufbau: Kopf mit Kreis -> Ansatz -> designed service (Zentrum)
   -> drei Schutzschichten -> Abschluss.

   Logos: Emblem, Signet-Formen und Wortmarken stehen einmal in der
   unsichtbaren Symbol-Bibliothek (.sprite) am Anfang von <main> und
   werden per <use> eingesetzt. Jedes Teil sitzt in einer eigenen
   Gruppe ohne transform-Attribut (lg__shape, lg__w, lg__b, lg__emb,
   lg__word, lg__sub) - nur diese Gruppen werden animiert.
   Drehpunkte liegen im 512er-Raster des Signets (256/256).

   Ringfarben wie im Werbezettel und Foliensatz:
   service #2196F3 (Haelfte) · rescue #A5D7F9 · secure Verlauf
   #2196F3 -> #1653BF · skills #EDEFF7
   ============================================================ */
.sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* Container, dessen Kinder animieren - er selbst bleibt ruhig */
.js .reveal--stage{opacity:1;transform:none;transition:none}

.grad{background:linear-gradient(100deg,var(--sky),var(--blue) 62%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Kleine Marke mit Ring-Symbol ("Die Haelfte des Kreises", "Schicht 1 ...") */
.tag{display:flex;align-items:center;gap:10px;margin:18px 0 0;max-width:none;
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.ring{width:18px;height:18px;flex:0 0 auto;display:block}
.ring__base{fill:none;stroke:rgba(165,215,249,.22);stroke-width:3.2}
.ring__on{fill:none;stroke-width:3.2;stroke-linecap:butt}
.ring__on--service{stroke:#2196F3}
.ring__on--rescue{stroke:#A5D7F9}
.ring__on--secure{stroke:#3A8CE8}
.ring__on--skills{stroke:#EDEFF7}

/* ---- Kopf ---------------------------------------------------- */
.hero360{padding:clamp(40px,8vh,96px) 0 clamp(40px,6vh,72px)}
.hero360__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:center}
.hero360 .phead__logo{width:min(100%,420px)}
.hero360__say{margin:clamp(26px,4vh,40px) 0 0;max-width:none;color:var(--ink);
  font-size:clamp(38px,4.3vw,62px);line-height:1.04}
/* Woerter erst nach dem Logo */
.hero360__say .hw:nth-child(1){transition-delay:.40s}
.hero360__say .hw:nth-child(2){transition-delay:.48s}
.hero360__say .hw:nth-child(4){transition-delay:.60s}
.hero360__say .hw:nth-child(5){transition-delay:.68s}
.hero360__say .hw:nth-child(6){transition-delay:.76s}
.js .hero360 .lead.reveal{transition-delay:.7s}
.js .hero360 .btn-row.reveal{transition-delay:.85s}

/* ---- Der Kreis ----------------------------------------------- */
.hero360__visual{position:relative}
.orb{position:relative;width:100%;max-width:560px;margin-inline:auto;
  --rx:0deg;--ry:0deg;
  transform:perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.js .orb.reveal{transform:perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry))}
.orb__svg{width:100%;height:auto;display:block;overflow:visible}
.orb__line{fill:none;stroke:rgba(165,215,249,.18);stroke-width:1}
.orb__track{fill:none;stroke:rgba(165,215,249,.26);stroke-width:1.4;stroke-dasharray:1.5 10;
  transform-origin:320px 320px}
.orb__seg{fill:none;stroke-width:52;transition:opacity .45s ease}
/* Segmentfarben stehen als stroke-Attribut im Markup (Verlauf per url(#orbSec)) */
.orb__label{font-family:inherit;font-size:13px;font-weight:700;letter-spacing:3.4px;
  fill:#fff;fill-opacity:.92;dominant-baseline:central;pointer-events:none}
.orb__pulse{transform-origin:320px 320px;opacity:0;pointer-events:none}
.orb__rim{fill:none;stroke:rgba(165,215,249,.16);stroke-width:1}
.orb__disk,.orb__rim{transform-origin:320px 320px}
.orb__gear,.orb__turn,.orb__emb{transform-origin:256px 256px}
.orb__hit circle{fill:transparent}
.orb__sat{transform-origin:320px 320px}
.orb__link{cursor:pointer}
.orb__sathov{transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .45s ease}
.orb__link:hover .orb__sathov{transform:scale(1.12)}
.orb__badge{fill:#0B1528;stroke-width:3}
.orb__sat--rescue .orb__badge{stroke:#A5D7F9}
.orb__sat--secure .orb__badge{stroke:#2A86EC}
.orb__sat--skills .orb__badge{stroke:#EDEFF7}
.orb__sat--rescue .orb__satin{--dx:110px;--dy:-150px}
.orb__sat--secure .orb__satin{--dx:175px;--dy:57px}
.orb__sat--skills .orb__satin{--dx:57px;--dy:175px}

/* Hervorheben: Legende oder Trabant unter dem Zeiger */
.orb[data-hl] .orb__seg{opacity:.22}
.orb[data-hl] .orb__sathov{opacity:.4}
.orb[data-hl="service"] .orb__seg--service,
.orb[data-hl="rescue"] .orb__seg--rescue,
.orb[data-hl="secure"] .orb__seg--secure,
.orb[data-hl="skills"] .orb__seg--skills{opacity:1}
.orb[data-hl="rescue"] .orb__sat--rescue .orb__sathov,
.orb[data-hl="secure"] .orb__sat--secure .orb__sathov,
.orb[data-hl="skills"] .orb__sat--skills .orb__sathov{opacity:1;transform:scale(1.12)}

/* Aufbau des Kreises (nur mit JavaScript; ohne steht er fertig da) */
.js .orb:not(.is-in) .orb__seg{stroke-dasharray:100;stroke-dashoffset:100}
.js .orb:not(.is-in) .orb__label,
.js .orb:not(.is-in) .orb__disk,
.js .orb:not(.is-in) .orb__gear,
.js .orb:not(.is-in) .orb__emb,
.js .orb:not(.is-in) .orb__sat,
.js .orb:not(.is-in) .orb__glow{opacity:0}
.js .orb.is-in .orb__glow{animation:softIn 1.4s ease .1s both}
.js .orb.is-in .orb__disk{animation:orbDisk 1s cubic-bezier(.16,1,.3,1) .2s both}
.js .orb.is-in .orb__seg{stroke-dasharray:100;
  animation:orbDraw .8s cubic-bezier(.65,0,.35,1) both}
.js .orb.is-in .orb__seg--service{animation-duration:1.25s;animation-delay:.35s}
.js .orb.is-in .orb__seg--rescue{animation-delay:1.25s}
.js .orb.is-in .orb__seg--secure{animation-delay:1.45s}
.js .orb.is-in .orb__seg--skills{animation-delay:1.65s;animation-duration:.55s}
.js .orb.is-in .orb__label{animation:softIn .9s ease 1.5s both}
.js .orb.is-in .orb__gear{animation:gearIn 1.7s cubic-bezier(.16,1,.3,1) .3s both}
.js .orb.is-in .orb__half--w{animation:halfW 1.2s cubic-bezier(.16,1,.3,1) .3s both}
.js .orb.is-in .orb__half--b{animation:halfB 1.2s cubic-bezier(.16,1,.3,1) .3s both}
.js .orb.is-in .orb__emb{animation:embIn .9s cubic-bezier(.34,1.56,.64,1) 1s both}
.js .orb.is-in .orb__turn{animation:gearTick 9s 3.2s infinite}
.js .orb.is-in .orb__track{animation:spin 150s linear infinite reverse}
.js .orb.is-in .orb__sat{animation:satSwirl 1.6s cubic-bezier(.16,1,.3,1) both}
.js .orb.is-in .orb__satin{animation:satIn 1.6s cubic-bezier(.16,1,.3,1) both}
.js .orb.is-in .orb__sat--rescue,.js .orb.is-in .orb__sat--rescue .orb__satin{animation-delay:1.2s}
.js .orb.is-in .orb__sat--secure,.js .orb.is-in .orb__sat--secure .orb__satin{animation-delay:1.42s}
.js .orb.is-in .orb__sat--skills,.js .orb.is-in .orb__sat--skills .orb__satin{animation-delay:1.64s}
.js .orb.is-in .orb__pulse{animation:spin 9s linear 3.1s infinite,pulseIn .8s ease 3.1s forwards}

@keyframes orbDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes orbDisk{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes gearIn{from{opacity:0;transform:rotate(-160deg) scale(.5)}to{opacity:1;transform:none}}
@keyframes halfW{from{transform:translate(120px,-120px)}to{transform:none}}
@keyframes halfB{from{transform:translate(-120px,120px)}to{transform:none}}
@keyframes embIn{from{opacity:0;transform:scale(.25) rotate(-25deg)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
/* Das Zahnrad ruht in Logostellung und macht in Abstaenden eine volle Umdrehung */
@keyframes gearTick{0%,66%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  100%{transform:rotate(360deg)}}
@keyframes satSwirl{0%{opacity:0;transform:rotate(-95deg)}35%{opacity:1}100%{opacity:1;transform:none}}
@keyframes satIn{from{transform:translate(var(--dx),var(--dy)) scale(.3) rotate(-300deg)}to{transform:none}}
@keyframes pulseIn{to{opacity:1}}

/* Legende unter dem Kreis */
.orb-legend{list-style:none;margin:clamp(14px,2.4vh,26px) auto 0;padding:0;max-width:560px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.orb-legend__item{display:flex;align-items:center;gap:11px;height:100%;
  padding:11px 14px;border-radius:12px;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);background:rgba(14,23,40,.55);
  transition:border-color .3s ease,background .3s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.orb-legend__item:hover,.orb-legend__item:focus-visible{border-color:rgba(33,150,243,.55);
  background:rgba(33,150,243,.10);color:var(--ink);transform:translateY(-2px)}
.orb-legend__item--service{border-color:rgba(33,150,243,.42);
  background:linear-gradient(140deg,rgba(33,150,243,.16),rgba(14,23,40,.55) 70%)}
.orb-legend__dot{width:8px;height:8px;flex:0 0 auto;transform:rotate(45deg)}
.orb-legend__item--service .orb-legend__dot{background:#2196F3}
.orb-legend__item--rescue .orb-legend__dot{background:#A5D7F9}
.orb-legend__item--secure .orb-legend__dot{background:linear-gradient(135deg,#1653BF,#2196F3)}
.orb-legend__item--skills .orb-legend__dot{background:#EDEFF7}
.orb-legend__sig{width:28px;height:28px;flex:0 0 auto;display:block}
.orb-legend__txt{display:flex;flex-direction:column;min-width:0}
.orb-legend__name{font-size:15px;font-weight:600;line-height:1.25;white-space:nowrap}
.orb-legend__name b{font-weight:800;color:var(--sky)}
.orb-legend__desc{font-size:12.5px;line-height:1.35;color:var(--muted);margin-top:2px}

/* ---- Abschnittskoepfe ---------------------------------------- */
.sechead{max-width:900px}
.sechead h2{margin-top:0}
.sechead .lead{margin-top:18px}

/* ---- Ansatz: drei Versprechen -------------------------------- */
.promise-grid{margin-top:clamp(28px,4vh,44px)}
.promise h3{margin:20px 0 10px}
.svc__ico--s{width:58px;border-radius:13px}
.svc__ico--s svg{width:60%}

/* ---- designed service: das Zentrum --------------------------- */
.core{position:relative;overflow:hidden;isolation:isolate;
  border-radius:calc(var(--r) + 8px);
  padding:clamp(26px,4.4vw,60px);
  background:
    radial-gradient(80% 70% at 0% 0%,rgba(33,150,243,.20),transparent 60%),
    linear-gradient(180deg,rgba(30,41,63,.64),rgba(11,18,32,.5));
  border:1px solid rgba(33,150,243,.34);
  box-shadow:0 40px 90px -50px rgba(33,150,243,.55),inset 0 1px 0 rgba(165,215,249,.10)}
/* Lichtkante, die einmal um die Tafel laeuft (360-Motiv) */
.core::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--edge,0deg),transparent 0 70%,rgba(165,215,249,.85) 80%,rgba(33,150,243,.9) 86%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:2;animation:edge 9s linear infinite}
@property --edge{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes edge{to{--edge:360deg}}
.core > *{position:relative;z-index:1}
.core__ghost{position:absolute !important;z-index:0 !important;
  width:clamp(380px,52vw,720px);height:auto;right:-14%;top:-22%;
  pointer-events:none;opacity:.9}
.core__ghost-turn{transform-origin:256px 256px;fill:none;stroke:rgba(165,215,249,.10);stroke-width:1.6}
.core__head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);
  gap:clamp(24px,4vw,64px);align-items:start}
.core__brand .eyebrow{margin-bottom:22px}
.core__brand .lg{width:min(100%,400px)}
.core__title{font-size:clamp(32px,4.2vw,58px);margin:0}
.core__lead{font-size:clamp(16.5px,1.4vw,19.5px);line-height:1.66;color:rgba(237,239,247,.78);
  margin-top:clamp(18px,2.6vh,26px)}

.feat-grid{list-style:none;margin:clamp(34px,5vh,56px) 0 0;padding:clamp(28px,4vh,44px) 0 0;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(24px,3.4vh,38px) clamp(24px,3vw,44px)}
.feat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
.feat h3{font-size:clamp(17px,1.4vw,19px);margin:4px 0 8px}
.feat p{margin:0;font-size:15.5px;line-height:1.62;color:rgba(237,239,247,.68)}

.core__flat{margin-top:clamp(34px,5vh,52px);position:relative;
  padding:clamp(20px,2.6vw,30px) clamp(20px,3vw,36px) clamp(20px,2.6vw,30px) clamp(26px,3.4vw,42px);
  border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(100deg,rgba(33,150,243,.16),rgba(14,23,40,.4) 70%)}
.core__flat::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:3px;
  background:linear-gradient(180deg,var(--blue),var(--blue-deep))}
.core__flat-title{margin:0;max-width:none;font-size:clamp(18px,1.7vw,23px);font-weight:800;
  letter-spacing:-.01em;color:var(--ink);line-height:1.3}
.core__flat p + p{margin-top:10px;max-width:90ch;font-size:15.5px}

/* Kreis in der Tafel: die service-Haelfte zeichnet sich ein */
.half{display:flex;align-items:center;gap:20px;margin-top:clamp(26px,4vh,40px);max-width:400px}
.half__svg{width:96px;height:96px;flex:0 0 auto;display:block;overflow:visible}
.half__seg{fill:none;stroke-width:13}
.half__seg--service{stroke:#2196F3}
.half__seg--rescue{stroke:rgba(165,215,249,.22)}
.half__seg--secure{stroke:rgba(33,150,243,.22)}
.half__seg--skills{stroke:rgba(237,239,247,.18)}
.half p{margin:0;font-size:14.5px;line-height:1.55;color:rgba(237,239,247,.66)}
.half__k{display:block;margin-bottom:4px;font-size:11.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sky)}
.js .half:not(.is-in) .half__seg--service{stroke-dasharray:100;stroke-dashoffset:100}
.js .half.is-in .half__seg--service{stroke-dasharray:100;animation:orbDraw 1.4s cubic-bezier(.65,0,.35,1) .5s both}
.js .half:not(.is-in) p{opacity:0}
.js .half.is-in p{animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .7s both}

/* ---- Drei Schutzschichten ------------------------------------ */
.layers{margin-top:clamp(36px,6vh,72px)}
.layer{position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.3fr);
  gap:clamp(24px,4vw,64px);padding:clamp(36px,6vh,64px) 0 clamp(36px,6vh,64px) clamp(22px,2.6vw,36px);
  border-top:1px solid var(--line)}
.layer:first-child{border-top:0}
.layer::before{content:"";position:absolute;left:0;top:clamp(36px,6vh,64px);bottom:clamp(36px,6vh,64px);
  width:4px;border-radius:3px;transform-origin:top;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1) .1s}
.layer--rescue::before{background:#A5D7F9}
.layer--secure::before{background:linear-gradient(180deg,#2196F3,#1653BF)}
.layer--skills::before{background:#EDEFF7}
.js .layer:not(.is-in)::before{transform:scaleY(0)}
.layer__head .tag{margin:0 0 22px}
@media (min-width:981px){
  .layer__head{position:sticky;top:108px;align-self:start}
}
.layer__head .lg{width:min(100%,330px)}
.layer__title{font-size:clamp(21px,2vw,27px);font-weight:800;letter-spacing:-.015em;line-height:1.22;
  margin-top:clamp(20px,3vh,28px);max-width:20ch}
.layer__gain{margin-top:20px}
.layer__k{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.layer__gain p{margin-top:6px;font-size:15.5px;color:rgba(237,239,247,.72)}
.layer__note{margin-top:16px;font-size:13.5px;color:var(--muted)}
.layer__lead{margin:0;font-size:clamp(16px,1.3vw,18.5px);line-height:1.68;color:rgba(237,239,247,.78);max-width:62ch}
.pts{list-style:none;margin:clamp(22px,3.4vh,32px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}
.pt{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start}
.pt b{display:block;font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.35;margin-bottom:3px}
.pt b em{font-style:normal;color:var(--sky);font-weight:800}
.pt > span:last-child{font-size:14.5px;line-height:1.55;color:rgba(237,239,247,.64)}
.pt__ico svg{width:36px;height:36px;display:block;overflow:visible}
.pt__ico .ink{stroke:rgba(237,239,247,.88)}
.pt__ico .accent{stroke:var(--blue)}
.pt__ico .ink.solid{fill:rgba(237,239,247,.88)}
.pt__ico .accent.solid{fill:var(--blue)}
.pt__ico path{stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1) .15s}
.pt__ico path.accent{transition-delay:.4s}
.pt__ico path.solid{fill-opacity:0;transition:stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1) .4s,fill-opacity .5s ease 1.1s}
.js .reveal.is-in .pt__ico path,.js .reveal.is-in.pt .pt__ico path{stroke-dashoffset:0}
.js .reveal.is-in .pt__ico path.solid{fill-opacity:1}
html:not(.js) .pt__ico path,html:not(.js) .svc__ico path{stroke-dashoffset:0}
html:not(.js) .svc__ico{opacity:1;transform:none}
/* Ohne JavaScript stehen auch die wortweise einfliegenden Ueberschriften
   und ihre Texte sofort da (Startseite, Leistungen, managed 360) */
html:not(.js) .big .hw{opacity:1;transform:none;filter:none}
html:not(.js) .phil__body,html:not(.js) .svc__body{opacity:1;transform:none}
html:not(.js) .phil__mark{transform:skewX(-31deg) scaleX(1)}
html:not(.js) .svc__ico path.solid{fill-opacity:1}
html:not(.js) .pt__ico path.solid{fill-opacity:1}
.opt{display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;align-items:start;
  margin-top:clamp(22px,3.4vh,30px);padding:16px 20px;border-radius:12px;
  border:1px solid rgba(165,215,249,.2);background:rgba(33,150,243,.09)}
.opt p{margin:0;font-size:15px;line-height:1.6;color:rgba(237,239,247,.74);max-width:none}
.opt b{color:var(--ink);font-weight:800}

/* ---- Logos: Einflug je Produkt ------------------------------- */
.lg{width:100%;height:auto;display:block;overflow:visible}
.lg__shape,.lg__spin,.lg__emb{transform-origin:256px 256px}
.lg--secure .lg__shape,.lg--secure .lg__emb{transform-origin:256px 254px}
.lg--skills .lg__shape,.lg--skills .lg__emb{transform-origin:256px 253px}
.lg--secure .lg__emb{transform-origin:260px 220px}
.js .lg:not(.is-in) .lg__shape,
.js .lg:not(.is-in) .lg__emb,
.js .lg:not(.is-in) .lg__word,
.js .lg:not(.is-in) .lg__sub{opacity:0}
.js .lg.is-in .lg__word{animation:lgWord .95s cubic-bezier(.16,1,.3,1) .35s both}
.js .lg.is-in .lg__sub{animation:lgSub 1s cubic-bezier(.16,1,.3,1) .6s both}
@keyframes lgWord{from{opacity:0;transform:translateX(-150px)}to{opacity:1;transform:none}}
@keyframes lgSub{from{opacity:0;transform:translateX(-90px)}to{opacity:1;transform:none}}
/* Emblem ploppt nach der Form auf */
.js .lg.is-in .lg__emb{animation:embIn .8s cubic-bezier(.34,1.56,.64,1) .7s both}

/* service: Zahnradhaelften fahren zusammen, das Rad dreht sich ein */
.js .lg--service.is-in .lg__shape{animation:gearIn 1.5s cubic-bezier(.16,1,.3,1) both}
.js .lg--service.is-in .lg__w{animation:halfW 1.1s cubic-bezier(.16,1,.3,1) both}
.js .lg--service.is-in .lg__b{animation:halfB 1.1s cubic-bezier(.16,1,.3,1) both}
/* rescue: Rettungsring wird zugeworfen und dreht aus */
.js .lg--rescue.is-in .lg__shape{animation:buoy 1.8s cubic-bezier(.16,1,.3,1) both}
@keyframes buoy{from{opacity:0;transform:translate(-160px,-60px) rotate(-560deg) scale(.45)}
  30%{opacity:1}to{opacity:1;transform:none}}
/* secure: Schild dreht sich wie eine Muenze um die Hochachse */
.js .lg--secure.is-in .lg__shape{animation:flip 1.5s cubic-bezier(.3,.7,.3,1) both}
@keyframes flip{0%{opacity:0;transform:scaleX(.04) translateY(-40px)}
  20%{opacity:1}45%{transform:scaleX(-1) translateY(0)}72%{transform:scaleX(.12)}100%{opacity:1;transform:none}}
/* skills: die beiden Buchhaelften kommen von links und rechts */
.js .lg--skills.is-in .lg__shape{animation:softIn .3s ease both}
.js .lg--skills.is-in .lg__b{animation:bookL 1.2s cubic-bezier(.16,1,.3,1) both}
.js .lg--skills.is-in .lg__w{animation:bookR 1.2s cubic-bezier(.16,1,.3,1) .08s both}
@keyframes bookL{from{opacity:0;transform:translateX(-170px) rotate(-14deg)}to{opacity:1;transform:none}}
@keyframes bookR{from{opacity:0;transform:translateX(170px) rotate(14deg)}to{opacity:1;transform:none}}

/* ---- Abschluss: der Kreis schliesst sich --------------------- */
.closing--ring{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,60px);
  align-items:center;justify-content:start;margin-top:clamp(40px,6vh,72px)}
.closing--ring .closing__text p:not(.eyebrow){margin-top:14px;font-size:clamp(16px,1.4vw,19px)}
.closing--ring .eyebrow{font-size:12px;font-weight:600;letter-spacing:.24em;color:var(--sky);margin:0 0 14px}
.closing--ring h2{font-size:clamp(28px,3.4vw,44px)}
.closing--ring .btn-row{margin-top:26px}
.cring{width:clamp(150px,17vw,220px);height:auto;display:block;overflow:visible}
.cring__seg{fill:none;stroke-width:26;transform-origin:120px 120px}
.cring__seg--service{stroke:#2196F3}
.cring__seg--rescue{stroke:#A5D7F9}
.cring__seg--secure{stroke:#2A86EC}
.cring__seg--skills{stroke:#EDEFF7}
.cring__emb{transform-origin:277px 226px}
.js .closing--ring:not(.is-in) .cring__seg,
.js .closing--ring:not(.is-in) .cring__emb,
.js .closing--ring:not(.is-in) .closing__text{opacity:0}
.js .closing--ring.is-in .cring__seg{animation:cringIn 1.3s cubic-bezier(.16,1,.3,1) both}
.js .closing--ring.is-in .cring__seg--service{--from:-140deg;animation-delay:.05s}
.js .closing--ring.is-in .cring__seg--rescue{--from:120deg;animation-delay:.2s}
.js .closing--ring.is-in .cring__seg--secure{--from:200deg;animation-delay:.32s}
.js .closing--ring.is-in .cring__seg--skills{--from:260deg;animation-delay:.44s}
.js .closing--ring.is-in .cring__emb{animation:embIn .8s cubic-bezier(.34,1.56,.64,1) 1.1s both}
.js .closing--ring.is-in .closing__text{animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .25s both}
@keyframes cringIn{from{opacity:0;transform:rotate(var(--from,-90deg)) scale(.7)}to{opacity:1;transform:none}}

/* ---- Schmale Bildschirme ------------------------------------- */
@media (max-width:980px){
  .hero360__grid{grid-template-columns:1fr}
  .hero360__visual{max-width:600px;width:100%;margin-inline:auto}
  .core__head{grid-template-columns:1fr}
  .layer{grid-template-columns:1fr}
}
@media (max-width:640px){
  .orb-legend{grid-template-columns:1fr}
  .pts{grid-template-columns:1fr}
  .closing--ring{grid-template-columns:1fr}
  .cring{width:150px}
  .core__ghost{width:520px;right:-60%;top:-8%}
  .feat{grid-template-columns:1fr;gap:14px}
  .feat h3{margin-top:0}
  .orb__label{font-size:14px}
}

/* ---- Reduzierte Bewegung -------------------------------------
   Kein Drehen, kein Fliegen: alles blendet nacheinander auf. */
@media (prefers-reduced-motion:reduce){
  .orb{transform:none !important;transition:none}
  .js .orb.is-in .orb__seg{animation:softIn .6s ease both;stroke-dashoffset:0}
  .js .orb.is-in .orb__gear,.js .orb.is-in .orb__half--w,.js .orb.is-in .orb__half--b,
  .js .orb.is-in .orb__sat,.js .orb.is-in .orb__satin,.js .orb.is-in .orb__disk{animation:softIn .6s ease .2s both}
  .js .orb.is-in .orb__emb{animation:softIn .6s ease .3s both}
  .js .orb.is-in .orb__turn,.js .orb.is-in .orb__track{animation:none}
  .js .orb.is-in .orb__pulse{animation:none;opacity:0}
  .js .lg.is-in .lg__shape,.js .lg.is-in .lg__w,.js .lg.is-in .lg__b,
  .js .lg.is-in .lg__emb,.js .lg.is-in .lg__word,.js .lg.is-in .lg__sub{animation:softIn .6s ease .1s both}
  .js .closing--ring.is-in .cring__seg,.js .closing--ring.is-in .cring__emb,
  .js .closing--ring.is-in .closing__text{animation:softIn .6s ease both}
  .js .half.is-in .half__seg--service,.js .half.is-in p{animation:softIn .6s ease both}
  .core::before{animation:none;opacity:.5}
  .pt__ico path{stroke-dashoffset:0;transition:none}
  .pt__ico path.solid{fill-opacity:1;transition:none}
  .layer::before{transition:none}
  .js .layer:not(.is-in)::before{transform:none}
  .orb-legend__item:hover{transform:none}
}

/* ============================================================
   Chaoslöser – interaktives Bild "Die wahre IT von heute" (lagebild.html,
   im Menü "Chaoslöser", bis 14.10.2026 "Lagebild")
   Szene: assets/img/lagebild-szene.svg (ohne Hintergrund, ohne
   Nummern, Texte als Pfade). Die Nummern sind Schaltflaechen
   (.lb-pin), ihre Lage steht unten in Prozent des Bildes.

   Zwei Darstellungen, die das Skript waehlt:
   .is-float  Rechner mit Maus: Karte schwebt neben dem Ausschnitt
   .is-dock   Handy und Tablet: Karte steht unter dem Bild, mit
              Pfeilen zum Blaettern
   Aktiver Punkt: das Bild dunkelt ab, nur der vergroesserte
   Ausschnitt (.lb-lens) bleibt hell.
   Signalrot #FF4D4F wie die Rauten im Marketingbild.
   ============================================================ */
.lb-head{padding-bottom:clamp(20px,3vh,36px)}
.lb-sec{padding:clamp(8px,2vh,20px) 0 clamp(28px,5vh,56px)}
.lb-wrap{width:100%;max-width:1520px;margin-inline:auto;padding-inline:var(--pad)}
.lb{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vh,34px) clamp(24px,2.6vw,40px);align-items:start}
.lb__main{min-width:0}

/* ---- Bühne ---------------------------------------------------- */
.lb-stage{position:relative;margin:0;aspect-ratio:1200/770;container-type:inline-size;scroll-margin-top:84px}
/* Blaue Glut unter der Insel (stand im Original als weichgezeichnete Ellipse im Bild) */
.lb-stage::before{content:"";position:absolute;inset:-10% -6% -16%;z-index:0;pointer-events:none;
  background:radial-gradient(48% 42% at 54% 63%,rgba(33,150,243,.22),rgba(33,150,243,.07) 58%,transparent 78%)}
.lb-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:1;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
  transition:filter .45s ease,opacity .45s ease}
.lb-img--lit{z-index:2;opacity:0;pointer-events:none;clip-path:inset(50% 50% 50% 50%)}
.lb.is-active .lb-img--base{filter:brightness(.4) saturate(.55)}
.lb.is-active .lb-img--lit{opacity:1}
.lb.is-ready .lb-img--lit{transition:opacity .45s ease,clip-path .5s cubic-bezier(.16,1,.3,1)}

/* Rahmen um den vergroesserten Ausschnitt */
.lb-lens{position:absolute;z-index:3;pointer-events:none;border-radius:12px;opacity:0;
  border:1.5px solid rgba(165,215,249,.85);
  box-shadow:0 0 0 1px rgba(33,150,243,.35),0 0 40px -6px rgba(33,150,243,.6),inset 0 0 24px -10px rgba(33,150,243,.5);
  transition:opacity .35s ease}
.lb.is-active .lb-lens{opacity:1}
.lb.is-ready .lb-lens{transition:opacity .35s ease,left .5s cubic-bezier(.16,1,.3,1),top .5s cubic-bezier(.16,1,.3,1),
  width .5s cubic-bezier(.16,1,.3,1),height .5s cubic-bezier(.16,1,.3,1)}

/* ---- Nummern ---------------------------------------------------
   Groesse folgt der Bildbreite (cqi), Trefferflaeche mind. 32 px */
.lb-pins{position:absolute;inset:0;z-index:4;pointer-events:none}
.lb-pin{--ps:clamp(17px,1.9vw,27px);
  position:absolute;width:max(32px,calc(var(--ps) * 1.7));aspect-ratio:1;
  transform:translate(-50%,-50%);padding:0;margin:0;border:0;background:none;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;pointer-events:auto;color:#fff;font:inherit;
  -webkit-tap-highlight-color:transparent;transition:opacity .3s ease}
@supports (width:1cqi){.lb-pin{--ps:clamp(16px,2.15cqi,28px)}}
.lb-pin__in{position:relative;display:grid;place-items:center;width:var(--ps);height:var(--ps);
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
/* Lichthof wie im Bild, dazu ein ruhiger Puls */
.lb-pin__in::before{content:"";position:absolute;left:50%;top:50%;width:175%;height:175%;margin:-87.5% 0 0 -87.5%;
  border-radius:50%;background:rgba(255,77,79,.24);animation:lbPulse 3.2s ease-out infinite}
.lb-pin__in::after{content:"";position:absolute;inset:0;transform:rotate(45deg);border-radius:18%;
  background:#FF4D4F;border:2px solid #fff;box-shadow:0 6px 16px -6px rgba(255,77,79,.9)}
.lb-pin__n{position:relative;z-index:1;font-size:calc(var(--ps) * .5);font-weight:800;line-height:1;letter-spacing:-.02em}
.lb-pin:nth-child(3n+2) .lb-pin__in::before{animation-delay:1.1s}
.lb-pin:nth-child(3n+3) .lb-pin__in::before{animation-delay:2.2s}
@keyframes lbPulse{0%{transform:scale(.7);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{transform:scale(1.25);opacity:0}}
.lb-pin:hover .lb-pin__in,.lb-pin:focus-visible .lb-pin__in{transform:scale(1.14)}
.lb-pin:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.lb.is-active .lb-pin{opacity:.32}
.lb.is-active .lb-pin.is-on{opacity:1;z-index:2}
.lb-pin.is-on .lb-pin__in{transform:scale(1.2)}
.lb-pin.is-on .lb-pin__in::before{animation:none;opacity:1;transform:scale(1.15);background:rgba(255,77,79,.34)}

/* Einflug: die Nummern ploppen nacheinander auf */
.js .lb-stage:not(.is-in) .lb-pin__in{opacity:0;transform:scale(.3)}
.js .lb-stage.is-in .lb-pin__in{animation:lbPinIn .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes lbPinIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
.js .lb-stage.is-in .lb-pin:nth-child(1) .lb-pin__in{animation-delay:.30s}
.js .lb-stage.is-in .lb-pin:nth-child(2) .lb-pin__in{animation-delay:.36s}
.js .lb-stage.is-in .lb-pin:nth-child(3) .lb-pin__in{animation-delay:.42s}
.js .lb-stage.is-in .lb-pin:nth-child(4) .lb-pin__in{animation-delay:.48s}
.js .lb-stage.is-in .lb-pin:nth-child(5) .lb-pin__in{animation-delay:.54s}
.js .lb-stage.is-in .lb-pin:nth-child(6) .lb-pin__in{animation-delay:.60s}
.js .lb-stage.is-in .lb-pin:nth-child(7) .lb-pin__in{animation-delay:.66s}
.js .lb-stage.is-in .lb-pin:nth-child(8) .lb-pin__in{animation-delay:.72s}
.js .lb-stage.is-in .lb-pin:nth-child(9) .lb-pin__in{animation-delay:.78s}
.js .lb-stage.is-in .lb-pin:nth-child(10) .lb-pin__in{animation-delay:.84s}
.js .lb-stage.is-in .lb-pin:nth-child(11) .lb-pin__in{animation-delay:.90s}
.js .lb-stage.is-in .lb-pin:nth-child(12) .lb-pin__in{animation-delay:.96s}
.js .lb-stage.is-in .lb-pin:nth-child(13) .lb-pin__in{animation-delay:1.02s}
.js .lb-stage.is-in .lb-pin:nth-child(14) .lb-pin__in{animation-delay:1.08s}
/* Nach dem Einflug uebernimmt wieder die Hover-Vergroesserung */
.js .lb-stage.is-in.is-settled .lb-pin__in{animation:none}

/* Lage der Nummern in Prozent des Bildes */
.lb-pin--1{left:70.79%;top:64.77%}
.lb-pin--2{left:63.4%;top:59.97%}
.lb-pin--3{left:62.91%;top:31.3%}
.lb-pin--4{left:73.66%;top:45.98%}
.lb-pin--5{left:82.38%;top:41.8%}
.lb-pin--6{left:41.69%;top:7.77%}
.lb-pin--7{left:46.69%;top:75.82%}
.lb-pin--8{left:36.68%;top:31.98%}
.lb-pin--9{left:25.66%;top:59.81%}
.lb-pin--10{left:33.98%;top:44.31%}
.lb-pin--11{left:88.4%;top:24.94%}
.lb-pin--12{left:47.84%;top:50.34%}
.lb-pin--13{left:53.91%;top:21.9%}
.lb-pin--14{left:66.71%;top:78.39%}

/* ---- Karte ---------------------------------------------------- */
.lb-card{position:relative;z-index:6;border-radius:18px;padding:10px;
  background:linear-gradient(160deg,rgba(26,38,60,.95),rgba(10,16,29,.97));
  border:1px solid rgba(33,150,243,.36);
  box-shadow:0 34px 80px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(165,215,249,.08)}
.lb:not(.is-float):not(.is-dock) .lb-card{display:none}
.lb-card__zoom{position:relative;overflow:hidden;border-radius:11px;aspect-ratio:16/10;
  background:radial-gradient(90% 90% at 50% 62%,#132a4d,#0A1322 80%);
  border:1px solid rgba(165,215,249,.16)}
.lb-card__img{position:absolute;left:0;top:0;max-width:none;width:500%;height:auto;
  -webkit-user-select:none;user-select:none;transition:opacity .14s ease}
.lb-card__badge{position:absolute;left:12px;top:12px;width:26px;height:26px;display:grid;place-items:center;
  font-size:12.5px;font-weight:800;color:#fff;isolation:isolate}
.lb-card__badge::before{content:"";position:absolute;inset:0;z-index:-1;transform:rotate(45deg);border-radius:5px;
  background:#FF4D4F;border:2px solid #fff;box-shadow:0 6px 14px -4px rgba(0,0,0,.6)}
.lb-card__zoomlbl{position:absolute;right:10px;top:10px;width:30px;height:30px;display:grid;place-items:center;
  border-radius:50%;color:var(--sky);background:rgba(6,10,18,.72);border:1px solid rgba(165,215,249,.22)}
.lb-card__zoomlbl svg{width:16px;height:16px;display:block}
.lb-card__body{padding:16px 12px 10px;transition:opacity .14s ease}
.lb-card.is-swap .lb-card__img,.lb-card.is-swap .lb-card__body{opacity:0}
.lb-card__eyebrow{margin:0;max-width:none;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#FF7B7D}
.lb-card__title{margin:7px 0 0;font-size:clamp(19px,1.5vw,22px);font-weight:800;letter-spacing:-.015em}
.lb-card__sub{margin:6px 0 0;max-width:none;font-size:15px;font-weight:600;line-height:1.45;color:var(--sky)}
.lb-card__text{margin:10px 0 0;max-width:none;font-size:14.5px;line-height:1.62;color:rgba(237,239,247,.74)}
.lb-card__intro{display:none}
.lb-card__nav{display:none}

/* Rechner: Karte schwebt neben dem Ausschnitt */
.lb.is-float .lb-card{position:absolute;left:0;top:0;width:clamp(300px,34cqi,380px);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.97);
  transition:opacity .22s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility 0s linear .3s}
.lb.is-float.is-active .lb-card{opacity:1;visibility:visible;transform:none;
  transition:opacity .22s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility 0s}
.lb.is-float.is-ready .lb-card{transition:opacity .22s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility 0s,
  left .45s cubic-bezier(.16,1,.3,1),top .45s cubic-bezier(.16,1,.3,1)}

/* Handy und Tablet: Karte unter dem Bild, mit Pfeilen */
.lb.is-dock .lb-card{margin-top:clamp(16px,2.6vh,24px);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:6px 20px;align-items:center}
.lb.is-dock .lb-card__body{padding:8px 8px 4px 0}
.lb.is-dock .lb-card__nav{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}
.lb.is-dock:not(.is-active) .lb-card__zoom,.lb.is-dock:not(.is-active) .lb-card__body{display:none}
.lb.is-dock:not(.is-active) .lb-card__intro{display:block;grid-column:1/-1;padding:8px 10px 2px}
.lb-card__intro p{margin:0;max-width:none;font-size:15.5px;line-height:1.6;color:rgba(237,239,247,.78)}
.lb-card__intro b{color:var(--ink);font-weight:700}
.lb-card__count{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--muted);font-variant-numeric:tabular-nums}
.lb.is-dock:not(.is-active) .lb-card__count,.lb.is-dock:not(.is-active) #lbPrev{visibility:hidden}
.lb-card__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:46px;height:46px;padding:0 14px;
  border-radius:999px;border:1px solid var(--line-strong);background:rgba(255,255,255,.03);color:var(--ink);
  font:inherit;font-size:16px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .25s ease,border-color .25s ease}
.lb-card__btn:hover{background:rgba(33,150,243,.12);border-color:rgba(33,150,243,.6)}
.lb-card__btnlbl{display:none;font-size:14.5px}
.lb.is-dock:not(.is-active) .lb-card__btn--next{background:linear-gradient(120deg,var(--blue-deep),var(--blue));
  border-color:transparent;padding:0 22px;box-shadow:0 8px 30px -12px rgba(33,150,243,.9)}
.lb.is-dock:not(.is-active) .lb-card__btnlbl{display:inline}

/* ---- Liste "Wo Angreifer ansetzen" ---------------------------- */
.lb-side{min-width:0}
.lb-side__title{font-size:12px;margin-bottom:10px}
.lb-side__hint{margin:0 0 16px;max-width:none;font-size:14px;color:var(--muted)}
.lb-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.lb-li{width:100%;height:100%;display:flex;align-items:flex-start;gap:12px;text-align:left;
  padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(14,23,40,.55);
  color:var(--ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color .25s ease,background .25s ease}
.lb-li:hover,.lb-li:focus-visible,.lb-li.is-on{border-color:rgba(255,77,79,.55);background:rgba(255,77,79,.08)}
.lb-li__no{position:relative;flex:0 0 auto;width:24px;height:24px;margin-top:1px;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#fff;isolation:isolate}
.lb-li__no::before{content:"";position:absolute;inset:3px;z-index:-1;transform:rotate(45deg);border-radius:4px;
  background:#FF4D4F;border:1.5px solid rgba(255,255,255,.92)}
.lb-li__txt{display:flex;flex-direction:column;min-width:0}
.lb-li__t{font-size:14.5px;font-weight:700;line-height:1.35}
.lb-li__s{font-size:13px;line-height:1.4;color:var(--muted);margin-top:2px}
.lb-li__d{display:none}
/* Ohne JavaScript ist die Liste die Erklaerung: alle Texte sichtbar */
html:not(.js) .lb-li{cursor:default}
html:not(.js) .lb-li__d{display:block;margin-top:8px;font-size:14px;line-height:1.6;color:rgba(237,239,247,.72)}
html:not(.js) .lb-list{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
html:not(.js) .lb-side__hint{display:none}

/* Breite Bildschirme: Liste rechts neben dem Bild, wie im Marketingbild */
@media (min-width:1360px){
  .lb{grid-template-columns:minmax(0,1fr) 268px}
  .lb-list{grid-template-columns:1fr;gap:6px}
  .lb-li{padding:8px 12px;align-items:center}
  .lb-li__s{display:none}
  .lb-side{padding-top:clamp(0px,1vh,12px)}
  html:not(.js) .lb{grid-template-columns:1fr}
  html:not(.js) .lb-list{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
  html:not(.js) .lb-li{align-items:flex-start;padding:10px 14px}
  html:not(.js) .lb-li__s{display:block}
}

/* ---- Text und Bausteine unter dem Bild ------------------------ */
.lb-fixhead{margin-top:clamp(56px,9vh,110px)}
.lb-fix{list-style:none;margin:clamp(28px,4vh,44px) 0 0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.lb-fix__item{position:relative;display:flex;flex-direction:column;height:100%;padding:24px 24px 22px;
  border-radius:var(--r);text-decoration:none;color:var(--ink);overflow:hidden;
  background:linear-gradient(160deg,rgba(30,41,63,.6),rgba(11,18,32,.5));border:1px solid var(--line);
  transition:border-color .3s ease,transform .3s cubic-bezier(.16,1,.3,1),background .3s ease}
.lb-fix__item::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;opacity:.9}
.lb-fix__item--service::before{background:#2196F3}
.lb-fix__item--rescue::before{background:#A5D7F9}
.lb-fix__item--secure::before{background:linear-gradient(90deg,#1653BF,#2196F3)}
.lb-fix__item--skills::before{background:#EDEFF7}
.lb-fix__item--service{border-color:rgba(33,150,243,.42);
  background:linear-gradient(150deg,rgba(33,150,243,.16),rgba(14,23,40,.55) 70%)}
.lb-fix__item:hover{border-color:rgba(33,150,243,.6);transform:translateY(-4px);color:var(--ink)}
.lb-fix__item .tag{margin:0}
.lb-fix__name{display:block;margin-top:16px;font-size:clamp(20px,1.7vw,23px);font-weight:600;letter-spacing:-.01em;line-height:1.2}
.lb-fix__name b{font-weight:800;color:var(--sky)}
.lb-fix__desc{display:block;margin-top:10px;font-size:15px;line-height:1.6;color:rgba(237,239,247,.7);flex:1 0 auto}
.lb-fix__nos{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.lb-fix__lbl{width:100%;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
/* Geschlossene Luecke: dieselbe Raute wie im Bild, aber in Blau */
.lb-nd{position:relative;width:24px;height:24px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;isolation:isolate}
.lb-nd::before{content:"";position:absolute;inset:3px;z-index:-1;transform:rotate(45deg);border-radius:4px;
  background:linear-gradient(135deg,var(--blue-deep),var(--blue));border:1.5px solid rgba(165,215,249,.9)}
/* Zwei Absaetze im Text unter einer grossen Aussage */
.lb-why .phil__body p+p{margin-top:1em}
.lb-closing{margin-top:clamp(48px,8vh,96px)}
.lb-closing strong{color:var(--ink);font-weight:600}

/* ---- Bande mit Schildern neben "IT ist kein Nebenjob mehr." --------- */
.phil--gang .phil__body{grid-column:6/-1}
.phil__gang{grid-column:1/span 5;grid-row:3;align-self:center;position:relative;z-index:0;
  margin-top:clamp(22px,3vh,36px);padding-right:clamp(0px,1.6vw,22px)}
.phil__gang::before{content:"";position:absolute;inset:6% -12% -14%;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 36% at 50% 62%,rgba(33,150,243,.24),rgba(33,150,243,.06) 60%,transparent 100%)}
.gang{display:block;width:100%;max-width:440px;height:auto;overflow:visible;margin-inline:auto}
.gang .rb,.gang .rb__sign,.gang .rb-isle{transform-box:fill-box;transform-origin:50% 100%}
.js .phil--gang:not(.is-in) .rb-isle,.js .phil--gang:not(.is-in) .rb{opacity:0}
.js .phil--gang.is-in .rb-isle{animation:rbIsle .9s cubic-bezier(.16,1,.3,1) .2s both}
.js .phil--gang.is-in .rb{animation:rbIn .75s cubic-bezier(.34,1.56,.64,1) both}
.js .phil--gang.is-in .rb--1{animation-delay:.60s}
.js .phil--gang.is-in .rb--2{animation-delay:.76s}
.js .phil--gang.is-in .rb--3{animation-delay:.92s}
.js .phil--gang.is-in .rb--4{animation-delay:1.08s}
.js .phil--gang.is-in .rb--5{animation-delay:1.24s}
@keyframes rbIsle{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes rbIn{from{opacity:0;transform:translateY(36px) scale(.82)}55%{opacity:1}to{opacity:1;transform:none}}
.js .phil--gang.is-in .rb__sign{animation:rbWave 2.6s ease-in-out 2s infinite}
.js .phil--gang.is-in .rb--2 .rb__sign{animation-duration:2.2s;animation-delay:2.3s}
.js .phil--gang.is-in .rb--3 .rb__sign{animation-duration:3s;animation-delay:2.15s}
.js .phil--gang.is-in .rb--4 .rb__sign{animation:rbBob 2.4s ease-in-out 2.5s infinite}
.js .phil--gang.is-in .rb--5 .rb__sign{animation:rbBob 2.8s ease-in-out 2.7s infinite}
@keyframes rbWave{0%,100%{transform:rotate(0)}25%{transform:rotate(-3.5deg) translateY(-2px)}75%{transform:rotate(3deg)}}
@keyframes rbBob{0%,100%{transform:none}50%{transform:translateY(-2.5px)}}

/* "Wir bringen Ordnung ins Chaos." steht allein am Ende und rueckt
   trotzdem nach rechts - der Zickzack der Seite bleibt erhalten */
.lb-why--end{margin-top:clamp(64px,10vh,120px)}
.phil--right .big{grid-column:3/-1;text-align:right}
.phil--right .phil__mark{margin-left:auto;transform-origin:right}
.phil--right .phil__body{grid-column:1/span 8}

@media (max-width:700px){
  .phil--gang .phil__body{grid-column:1}
  .phil__gang{grid-column:1;grid-row:auto;margin:30px 0 0;padding:0}
  .gang{max-width:340px;margin-inline:0}
  .phil--right .big{grid-column:1;text-align:left}
  .phil--right .phil__body{grid-column:1}
  .phil--right .phil__mark{margin-left:0;transform-origin:left}
}
@media (prefers-reduced-motion:reduce){
  .js .phil--gang.is-in .rb-isle,.js .phil--gang.is-in .rb{animation:softIn .6s ease both}
  .js .phil--gang.is-in .rb__sign,
  .js .phil--gang.is-in .rb--4 .rb__sign,.js .phil--gang.is-in .rb--5 .rb__sign{animation:none}
}

/* ---- Mitarbeiter am Schreibtisch neben "Wir bringen Ordnung ins Chaos." ---- */
.phil--desk .phil__body{grid-column:1/span 6}
.phil__desk{grid-column:7/-1;grid-row:3;align-self:center;position:relative;z-index:0;
  margin-top:clamp(22px,3vh,36px);padding-left:clamp(0px,1.6vw,22px)}
.phil__desk::before{content:"";position:absolute;inset:4% -10% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 40% at 50% 60%,rgba(33,150,243,.24),rgba(33,150,243,.06) 60%,transparent 100%)}
.desk{display:block;width:100%;max-width:520px;height:auto;overflow:visible;margin-inline:auto}
.desk .or-stage,.desk .or-person,.desk .or-desk,.desk .or-arms,.desk .or-msg{transform-box:fill-box;transform-origin:50% 100%}
.desk .or-arm,.desk .or-steam{transform-box:fill-box;transform-origin:50% 100%}
.desk .or-eyes{transform-box:fill-box;transform-origin:50% 50%}
/* ohne JavaScript: zwei Meldungen stehen fest, die anderen beiden fehlen */
.desk .or-msg--3,.desk .or-msg--4{display:none}
.js .desk .or-msg--3,.js .desk .or-msg--4{display:inline}
.js .phil--desk:not(.is-in) .or-stage,.js .phil--desk:not(.is-in) .or-person,
.js .phil--desk:not(.is-in) .or-desk,.js .phil--desk:not(.is-in) .or-arms,.js .desk .or-msg{opacity:0}
.js .phil--desk.is-in .or-stage{animation:rbIsle .9s cubic-bezier(.16,1,.3,1) .2s both}
.js .phil--desk.is-in .or-desk{animation:orDesk .8s cubic-bezier(.16,1,.3,1) .45s both}
.js .phil--desk.is-in .or-person,.js .phil--desk.is-in .or-arms{animation:rbIn .8s cubic-bezier(.34,1.56,.64,1) .75s both}
@keyframes orDesk{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* Tippen: kurze Phasen, dazwischen Pause */
.js .phil--desk.is-in .or-arm--l{animation:orType 2.8s ease-in-out 1.7s infinite}
.js .phil--desk.is-in .or-arm--r{animation:orType 2.8s ease-in-out 1.82s infinite}
@keyframes orType{0%,48%,100%{transform:none}6%,18%,30%,42%{transform:translateY(-1.1px)}12%,24%,36%{transform:translateY(.3px)}}
.js .phil--desk.is-in .or-eyes{animation:orBlink 5.2s ease-in-out 2.4s infinite}
@keyframes orBlink{0%,93%,100%{transform:none}96%{transform:scaleY(.12)}}
.js .phil--desk.is-in .or-steam{animation:orSteam 2.8s ease-in-out 1.4s infinite}
.js .phil--desk.is-in .or-steam--1{animation-delay:2.8s}
@keyframes orSteam{0%{opacity:0;transform:translateY(2px) scaleY(.7)}35%{opacity:.85}100%{opacity:0;transform:translateY(-5px) scaleY(1.1)}}
.js .phil--desk.is-in .or-msg{animation:orMsg 12s ease-in-out infinite}
.js .phil--desk.is-in .or-msg--1{animation-delay:1.8s}
.js .phil--desk.is-in .or-msg--2{animation-delay:4.8s}
.js .phil--desk.is-in .or-msg--3{animation-delay:7.8s}
.js .phil--desk.is-in .or-msg--4{animation-delay:10.8s}
@keyframes orMsg{0%{opacity:0;transform:translateY(9px) scale(.8)}5%{opacity:1;transform:none}
  24%{opacity:1;transform:translateY(-1.5px)}31%{opacity:0;transform:translateY(-9px)}100%{opacity:0;transform:translateY(-9px)}}

@media (max-width:700px){
  .phil--desk .phil__body{grid-column:1}
  .phil__desk{grid-column:1;grid-row:auto;margin:30px 0 0;padding:0}
  .desk{max-width:380px;margin-inline:0}
}
@media (prefers-reduced-motion:reduce){
  /* nur Aufblenden; tippen, blinzeln und dampfen entfallen, zwei Meldungen stehen fest */
  .js .phil--desk.is-in .or-stage,.js .phil--desk.is-in .or-desk,
  .js .phil--desk.is-in .or-person,.js .phil--desk.is-in .or-arms{animation:softIn .6s ease both}
  .js .phil--desk.is-in .or-arm--l,.js .phil--desk.is-in .or-arm--r,
  .js .phil--desk.is-in .or-eyes,.js .phil--desk.is-in .or-steam{animation:none}
  .js .phil--desk.is-in .or-msg--1,.js .phil--desk.is-in .or-msg--2{animation:softIn .6s ease 1s both}
  .js .phil--desk.is-in .or-msg--3,.js .phil--desk.is-in .or-msg--4{display:none}
}

/* ---- Schmale Bildschirme -------------------------------------- */
@media (max-width:640px){
  .lb-wrap{padding-inline:max(12px,calc(var(--pad) - 8px))}
  .lb.is-dock .lb-card{grid-template-columns:1fr;padding:8px}
  /* Pfeile direkt unter dem Ausschnitt - bleiben so im Blick, auch wenn
     der Text laenger ist als der Bildschirm */
  .lb.is-dock .lb-card__zoom{order:1}
  .lb.is-dock .lb-card__nav{order:2;margin-top:4px;padding:6px 2px 0;border-top:0}
  .lb.is-dock .lb-card__body{order:3;padding:6px 8px 4px;border-top:1px solid var(--line);margin-top:4px}
  .lb.is-dock:not(.is-active) .lb-card__nav{order:3;padding-top:10px;border-top:1px solid var(--line)}
  .lb-card__btn{min-width:44px;height:44px}
  .lb-card__title{font-size:20px}
  .lb-li__s{display:none}
  .lb-li{align-items:center;padding:9px 12px}
  html:not(.js) .lb-li__s{display:block}
  .lb-fix__item{padding:22px 20px 20px}
}
@media (max-width:420px){
  .lb-pin{width:30px}
}
/* Handy quer: wenig Hoehe - Bild und Karte nebeneinander */
@media (orientation:landscape) and (max-height:500px){
  .lb.is-dock .lb__main{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
  .lb.is-dock .lb-card{margin-top:0;grid-template-columns:1fr;padding:8px}
  .lb.is-dock .lb-card__zoom{order:1}
  .lb.is-dock .lb-card__nav{order:2;margin-top:4px;padding:6px 2px 0;border-top:0}
  .lb.is-dock .lb-card__body{order:3;padding:6px 8px 4px;border-top:1px solid var(--line);margin-top:4px}
  .lb.is-dock:not(.is-active) .lb-card__nav{order:3;padding-top:10px;border-top:1px solid var(--line)}
  .lb-card__btn{min-width:42px;height:42px}
}

/* ---- Reduzierte Bewegung --------------------------------------
   Kein Puls, kein Aufploppen, kein Gleiten: alles blendet nur. */
@media (prefers-reduced-motion:reduce){
  .lb-pin__in::before{animation:none}
  .js .lb-stage:not(.is-in) .lb-pin__in{transform:none}
  .js .lb-stage.is-in .lb-pin__in{animation:softIn .5s ease both}
  .lb-pin:hover .lb-pin__in,.lb-pin:focus-visible .lb-pin__in,.lb-pin.is-on .lb-pin__in{transform:none}
  .lb.is-ready .lb-img--lit{transition:opacity .3s ease}
  .lb.is-ready .lb-lens{transition:opacity .3s ease}
  .lb.is-float .lb-card,.lb.is-float.is-active .lb-card{transform:none}
  .lb.is-float.is-ready .lb-card{transition:opacity .22s ease,visibility 0s}
  .lb-fix__item:hover{transform:none}
}

/* ============================================================
   Check-up (sicherheitscheck.php)
   Drei Schritte auf einer Seite: Kontaktdaten, 24 Fragen in
   6 Gruppen, Ergebnis mit Ampel und Räuber.

   Grundsatz bei den Antwortknöpfen: Ja, Nein und „?" sehen
   gleich aus. Wer schon beim Klicken sieht, dass Rot „falsch"
   ist, antwortet nicht mehr ehrlich – und dann taugt die
   Auswertung nichts.
   ============================================================ */

.chk-schritt[hidden]{display:none}
.chk-schritt{scroll-margin-top:96px}
.chk-schritt{animation:chkRein .5s cubic-bezier(.16,1,.3,1) both}
@keyframes chkRein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Zusatz "freiwillig" am Feldnamen. Eigene Klasse: .opt ist der Optionskasten
   auf managed 360 und machte aus dem Zusatz einen Kasten (bis 17.10.2026). */
.field__opt{font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--muted-dim);font-size:11.5px}
.chk-fehler{margin-top:22px}
.btn.is-laeuft{opacity:.65;pointer-events:none}
.btn__arrow--links{display:inline-block;transition:transform .25s ease}
.btn:hover .btn__arrow--links{transform:translateX(-4px)}

/* ---- Fortschrittsleiste ---- */
.chk-leiste{margin-top:clamp(26px,4vh,40px)}
.chk-balken{height:4px;border-radius:2px;background:rgba(165,215,249,.14);overflow:hidden}
.chk-balken span{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue));
  transition:width .45s cubic-bezier(.16,1,.3,1)}
.chk-stand{margin:12px 0 0;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-dim)}
.chk-stand__titel{letter-spacing:.1em;color:var(--sky)}

/* ---- Fragengruppe ---- */
.chk-gruppe[hidden]{display:none}
.chk-gruppe{position:relative;padding-top:clamp(22px,3.5vh,34px);
  animation:chkRein .45s cubic-bezier(.16,1,.3,1) both}
.chk-gruppe__zahl{position:absolute;top:4px;right:0;margin:0;
  font-size:clamp(54px,9vw,96px);font-weight:800;line-height:1;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.4px rgba(165,215,249,.13);pointer-events:none;user-select:none}
.chk-gruppe__titel{position:relative;font-size:clamp(23px,3.1vw,34px);max-width:14ch}
.chk-gruppe__intro{position:relative;margin-top:12px;font-size:clamp(15px,1.4vw,17.5px);
  font-weight:300;color:rgba(237,239,247,.7);max-width:52ch}

.chk-fragen{list-style:none;margin:clamp(24px,4vh,38px) 0 0;padding:0;display:grid;gap:14px;counter-reset:chkf}
.chk-frage{border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(17,28,49,.5),rgba(11,18,32,.34));
  padding:clamp(16px,2.2vw,22px);transition:border-color .3s ease,background .3s ease}
.chk-frage.is-beantwortet{border-color:rgba(33,150,243,.3)}
.chk-frage.is-offen{border-color:rgba(255,120,120,.6);animation:chkStups .4s ease}
@keyframes chkStups{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.chk-frage fieldset{border:0;margin:0;padding:0;min-width:0}
.chk-frage legend{display:block;padding:0;width:100%}
.chk-frage__text{display:block;font-size:clamp(15.5px,1.45vw,17.5px);font-weight:600;
  color:var(--ink);line-height:1.42}
.chk-frage__hilfe{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--muted)}

/* ---- Ja / Nein / ? ---- */
.chk-wahl{display:grid;grid-template-columns:1fr 1fr .62fr;gap:8px;margin-top:16px}
.chk-wahl__feld{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chk-wahl__knopf{display:flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 10px;border:1px solid var(--line-strong);border-radius:10px;
  background:rgba(255,255,255,.02);color:rgba(237,239,247,.82);
  font-size:15px;font-weight:600;cursor:pointer;user-select:none;
  transition:border-color .2s ease,background .2s ease,color .2s ease,transform .2s ease}
.chk-wahl__knopf:hover{border-color:rgba(33,150,243,.55);background:rgba(33,150,243,.08);color:var(--ink)}
.chk-wahl__feld:focus-visible + .chk-wahl__knopf{outline:2px solid var(--blue);outline-offset:2px}
.chk-wahl__feld:checked + .chk-wahl__knopf{
  border-color:rgba(33,150,243,.75);background:rgba(33,150,243,.17);color:var(--ink);
  box-shadow:0 8px 22px -14px rgba(33,150,243,.9)}
.chk-wahl__knopf--unbekannt{font-size:17px}
@media (hover:none){.chk-wahl__knopf:hover{border-color:var(--line-strong);background:rgba(255,255,255,.02)}}

.chk-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:clamp(22px,3.4vh,32px)}
.chk-nav .btn{margin:0}
.chk-nav__hinweis{margin:0;font-size:13px;color:#FFC9C9}
.chk-nav [data-weiter]{margin-left:auto}
@media (max-width:520px){
  .chk-nav{flex-direction:column-reverse;align-items:stretch}
  .chk-nav .btn{justify-content:center}
  .chk-nav [data-weiter]{margin-left:0}
  .chk-nav__hinweis{text-align:center}
}

/* ============================================================
   Ergebnis: Ampel und Räuber
   ============================================================ */
.chk-ergebnis{text-align:center;padding-top:clamp(10px,2vh,22px)}
.chk-buehne{display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(14px,4vw,48px);margin-bottom:clamp(14px,2.5vh,26px)}
.chk-ampel{width:clamp(56px,7vw,78px);height:auto;display:block;flex:0 0 auto;overflow:visible}
.chk-raeuber{width:clamp(190px,30vw,270px);flex:0 0 auto}
.chk-figur{width:100%;height:auto;display:none;overflow:visible}

.chk-ampel__glas{fill:#1C2536}
.chk-ampel__schein{opacity:0;transition:opacity .6s ease}
[data-ampel="rot"]    .chk-ampel__lampe--rot    .chk-ampel__glas{fill:#EF4444}
[data-ampel="orange"] .chk-ampel__lampe--orange .chk-ampel__glas{fill:#F59E0B}
[data-ampel="gruen"]  .chk-ampel__lampe--gruen  .chk-ampel__glas{fill:#22C55E}
[data-ampel="rot"]    .chk-ampel__lampe--rot    .chk-ampel__schein,
[data-ampel="orange"] .chk-ampel__lampe--orange .chk-ampel__schein,
[data-ampel="gruen"]  .chk-ampel__lampe--gruen  .chk-ampel__schein{opacity:.3}

[data-ampel="gruen"]  .chk-figur--gruen,
[data-ampel="orange"] .chk-figur--orange,
[data-ampel="rot"]    .chk-figur--rot{display:block}

/* Grün: er lässt den Beutel fallen und rennt aus dem Bild.
   Lange Pause am Anfang, damit es nicht wie Dauerzappeln wirkt. */
.chk-ergebnis.is-da .chk-figur--gruen{animation:chkFlucht 5.4s cubic-bezier(.4,0,.6,1) .5s infinite}
@keyframes chkFlucht{
  0%,16%   {transform:translateX(0) scale(1);opacity:1}
  46%      {transform:translateX(78px) scale(.94);opacity:1}
  62%      {transform:translateX(150px) scale(.86);opacity:0}
  63%      {transform:translateX(-26px) scale(1);opacity:0}
  76%,100% {transform:translateX(0) scale(1);opacity:1}
}
/* Orange: er lehnt sich heran und zeigt. */
.chk-ergebnis.is-da .chk-figur--orange{animation:chkZeigen 3.4s ease-in-out infinite}
@keyframes chkZeigen{
  0%,100%{transform:translateX(0) rotate(0)}
  45%    {transform:translateX(7px) rotate(1.6deg)}
}
/* Rot: er rückt näher und die Glut atmet mit. */
.chk-ergebnis.is-da .chk-figur--rot{animation:chkNaeher 3.8s ease-in-out infinite;transform-origin:50% 92%}
@keyframes chkNaeher{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.065)}
}

.chk-ergebnis__auge{justify-content:center}
.chk-ergebnis__titel{font-size:clamp(26px,3.6vw,42px);text-align:center;margin-top:4px}
.chk-ergebnis__satz{margin:16px auto 0;max-width:54ch;text-align:center;
  font-size:clamp(16px,1.5vw,19px);font-weight:300;line-height:1.6;color:rgba(237,239,247,.78)}
.chk-ergebnis__zahlen{margin:18px auto 0;max-width:56ch;text-align:center;font-size:14px;color:var(--muted)}
.chk-ergebnis__knoepfe{justify-content:center}
.chk-ergebnis .note{text-align:center;max-width:52ch;margin-inline:auto}
[data-ampel="gruen"]  .chk-ergebnis__auge{color:#22C55E}
[data-ampel="orange"] .chk-ergebnis__auge{color:#F59E0B}
[data-ampel="rot"]    .chk-ergebnis__auge{color:#EF4444}
[data-ampel="gruen"]  .chk-ergebnis__auge::before{background:linear-gradient(90deg,#22C55E,transparent)}
[data-ampel="orange"] .chk-ergebnis__auge::before{background:linear-gradient(90deg,#F59E0B,transparent)}
[data-ampel="rot"]    .chk-ergebnis__auge::before{background:linear-gradient(90deg,#EF4444,transparent)}

/* ---- Befunde ---- */
.chk-befundliste{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;counter-reset:bef}
.chk-befund{position:relative;border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px 18px 46px;background:rgba(17,28,49,.4)}
.chk-befund::before{content:"";position:absolute;left:20px;top:23px;width:9px;height:9px;
  border-radius:50%;background:var(--muted)}
.chk-befund--kritisch{border-color:rgba(239,68,68,.34);background:rgba(239,68,68,.06)}
.chk-befund--kritisch::before{background:#EF4444}
.chk-befund__frage{margin:0;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.4}
.chk-befund__text{margin:7px 0 0;font-size:14.5px;line-height:1.58;color:rgba(237,239,247,.7);max-width:62ch}

.chk-probelauf .protokoll{white-space:pre-wrap;font-size:12.5px;line-height:1.5;
  padding:18px 20px;color:rgba(237,239,247,.72)}

@media (max-width:560px){
  .chk-buehne{gap:10px}
  .chk-raeuber{width:62vw}
  .chk-ampel{width:46px}
  .chk-gruppe__zahl{font-size:62px;top:0}
  .chk-gruppe__titel{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .chk-schritt,.chk-gruppe{animation:none}
  .chk-ergebnis.is-da .chk-figur--gruen,
  .chk-ergebnis.is-da .chk-figur--orange,
  .chk-ergebnis.is-da .chk-figur--rot{animation:none}
  .chk-frage.is-offen{animation:none}
  .chk-balken span{transition:none}
}

/* Sobald der Test läuft, tritt der Seitenkopf zurück: das Logo wird
   klein, Trennlinie und Claim verschwinden. Sonst schiebt die halbe
   Bildschirmhöhe Logo jede Fragengruppe nach unten – am Handy
   besonders lästig. */
.mark--check{transition:width .55s cubic-bezier(.16,1,.3,1)}
.checkhead{transition:padding .55s cubic-bezier(.16,1,.3,1)}
body.chk-laeuft .checkhead{padding-top:clamp(12px,2vh,22px)}
body.chk-laeuft .mark--check{width:min(46vw,214px)}
body.chk-laeuft .checkhead .rule,
body.chk-laeuft .checkhead .claim{display:none}
@media (prefers-reduced-motion:reduce){
  .mark--check,.checkhead{transition:none}
}

/* ============================================================
   Über uns
   ============================================================ */

/* ---- Logo-Schilder ------------------------------------------- */
/* Feste Höhe je Größe: beide Logos sitzen gleich hoch, egal welches */
.plate{display:inline-flex;align-items:center;justify-content:center;
  height:38px;padding:0 13px;border-radius:10px;color:#1E293F;
  background:linear-gradient(180deg,#FFFFFF 0%,#EEF2F9 100%);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.7)}
.plate__di{display:block;height:18px;width:auto;overflow:visible}
.plate__lt{display:block;height:22px;width:auto}
.plate--lg{height:56px;padding:0 18px;border-radius:12px}
.plate--lg .plate__di{height:24px}
.plate--lg .plate__lt{height:30px}
.plate--xl{height:clamp(62px,6vw,78px);padding:0 clamp(18px,2vw,26px);border-radius:14px}
.plate--xl .plate__di{height:clamp(25px,2.4vw,32px)}
.plate--xl .plate__lt{height:clamp(31px,3vw,40px)}

/* ---- Kopf ----------------------------------------------------- */
.about-hero{padding:clamp(52px,10vh,116px) 0 clamp(36px,5vh,64px)}
.about-hero__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:center}
.about-hero__h1{font-size:clamp(38px,5.4vw,74px);line-height:1.03;letter-spacing:-.03em}
.about-hero__h1 .hw,.member__name .hw{display:inline-block;
  padding:.1em 0 .16em;margin:-.1em 0 -.16em;
  transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1),filter .72s ease}
.js .about-hero__h1:not(.is-in) .hw,
.js .member:not(.is-in) .member__name .hw{opacity:0;transform:translateY(.42em)}
.about-hero__h1 .hw:nth-child(2),.member__name .hw:nth-child(2){transition-delay:.08s}
.about-hero__h1 .hw:nth-child(3),.member__name .hw:nth-child(3){transition-delay:.16s}
.about-hero__h1 .hw:nth-child(4){transition-delay:.26s}
.about-hero__h1 .hw:nth-child(5){transition-delay:.33s}
.about-hero__h1 .hw:nth-child(6){transition-delay:.40s}
.about-hero__h1 .hw--blue,.member__name .hw--blue{
  background:linear-gradient(100deg,var(--sky),var(--blue) 62%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Partner-Zeichen: zwei Schilder auf einer Tafel, verbunden im 59°-Winkel.
   Die Tafel nimmt Hintergrund und Rahmen der Porträts weiter unten vorweg. */
.lockup{position:relative;width:100%;max-width:560px;margin-left:auto;aspect-ratio:1/1;
  border-radius:26px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(70% 50% at 50% 100%,rgba(33,150,243,.18),transparent 70%),
    linear-gradient(172deg,#14233D 0%,#0C1628 55%,#070C16 100%);
  border:1px solid var(--line-strong);box-shadow:0 40px 80px -50px rgba(33,150,243,.55)}
.lockup__glow{position:absolute;inset:14%;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,rgba(33,150,243,.42),rgba(33,150,243,.1) 55%,transparent 100%);
  transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.16,1,.3,1)}
.lockup::before{content:"";position:absolute;inset:0;z-index:0;
  background:repeating-linear-gradient(121deg,rgba(165,215,249,0) 0 34px,rgba(165,215,249,.06) 34px 35px)}
/* Zwei Umlaufbahnen um den Knoten */
.lockup::after{content:"";position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;z-index:1;
  transform:translate(-50%,-50%);border-radius:50%;
  border:1px dashed rgba(165,215,249,.22);box-shadow:0 0 0 38px rgba(33,150,243,.035);
  animation:lkOrbit 60s linear infinite}
@keyframes lkOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
.lockup__wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
/* Die Tafel ist quadratisch, die Zeichenfläche 100 x 100: Strichstärken in diesen Einheiten */
.lockup__line{fill:none;stroke:rgba(165,215,249,.5);stroke-width:.42;
  stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1) .55s}
.lockup__pulse{fill:none;stroke:#DDF0FD;stroke-width:.9;stroke-linecap:round;
  stroke-dasharray:8 92;stroke-dashoffset:8;opacity:0;filter:drop-shadow(0 0 7px rgba(33,150,243,1))}
.lockup.is-in .lockup__pulse{opacity:1;animation:lkPulse 3.2s cubic-bezier(.45,0,.25,1) 1.6s infinite}
@keyframes lkPulse{0%{stroke-dashoffset:7;opacity:0}12%{opacity:1}88%{opacity:1}100%{stroke-dashoffset:-93;opacity:0}}
.lockup__node{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;z-index:2;
  display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#2A3D61,#0E1728 70%);
  border:1px solid rgba(165,215,249,.4);
  box-shadow:0 0 0 7px rgba(33,150,243,.08),0 0 36px rgba(33,150,243,.45);
  transition:transform .7s cubic-bezier(.34,1.56,.64,1) .95s,opacity .4s ease .95s}
.lockup__node span{font-size:28px;font-weight:300;line-height:1;color:var(--sky);margin-top:-2px}
.lockup__a,.lockup__b{position:absolute;z-index:3;display:flex;flex-direction:column;gap:12px;
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.lockup__a{left:8%;top:9%;align-items:flex-start}
.lockup__b{right:8%;bottom:9%;align-items:flex-end}
.lockup__b{transition-delay:.2s}
.lockup__cap{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);
  padding-inline:4px}
.js .lockup:not(.is-in) .lockup__a{opacity:0;transform:translate3d(-60px,36px,0)}
.js .lockup:not(.is-in) .lockup__b{opacity:0;transform:translate3d(60px,-36px,0)}
.js .lockup:not(.is-in) .lockup__line{stroke-dashoffset:100}
.js .lockup:not(.is-in) .lockup__node{opacity:0;transform:scale(.3)}
.js .lockup:not(.is-in) .lockup__glow{opacity:0;transform:scale(.7)}

/* ---- Konzept trifft Rückhalt: zwei Säulen --------------------- */
#partnerschaft .phil-list{margin-top:clamp(40px,6vh,72px)}
.duo{display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);align-items:stretch;
  margin-top:clamp(8px,2vh,24px)}
.pillar{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(28px,3vw,40px);border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,rgba(30,41,63,.62),rgba(11,18,32,.55));
  border:1px solid var(--line)}
.pillar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;transform-origin:left;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1) .35s}
.pillar--di::before{background:linear-gradient(90deg,#1653BF,#2196F3 55%,#A5D7F9)}
.pillar--lt::before{background:linear-gradient(90deg,#0B4A6B,#3B8ED4 60%,#A5D7F9);transform-origin:right}
.js .pillar:not(.is-in)::before{transform:scaleX(0)}
.pillar::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:repeating-linear-gradient(121deg,rgba(165,215,249,0) 0 40px,rgba(165,215,249,.045) 40px 41px);
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 60%);
          mask-image:linear-gradient(200deg,#000,transparent 60%)}
.pillar__k{margin:26px 0 0;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.pillar__title{margin-top:10px;font-size:clamp(21px,2vw,27px);font-weight:800;letter-spacing:-.015em}
.pillar__list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.pillar__list li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.55;color:rgba(237,239,247,.76)}
.pillar__list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--sky));transform:skewX(-31deg)}
.pillar__list a{color:var(--sky)}
.pillar__more{margin-top:auto;padding-top:22px;font-size:14.5px;font-weight:600;color:var(--sky);text-decoration:none}
.pillar__more:hover{color:var(--ink)}

/* Verbindung zwischen den Säulen */
.duo__link{position:relative;display:grid;place-items:center}
.duo__link::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,rgba(33,150,243,.0),rgba(165,215,249,.55),rgba(33,150,243,.0))}
.duo__node{position:relative;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;
  font-size:26px;font-weight:300;line-height:1;color:var(--sky);
  background:radial-gradient(circle at 35% 30%,#2A3D61,#0E1728 70%);
  border:1px solid rgba(165,215,249,.4);box-shadow:0 0 30px rgba(33,150,243,.45)}

/* Ergebnis */
.duo__result{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.4vw,30px);align-items:center;
  margin-top:clamp(22px,3vh,30px);padding:clamp(22px,2.6vw,32px) clamp(22px,3vw,40px);border-radius:18px;
  border:1px solid rgba(33,150,243,.32);
  background:radial-gradient(70% 140% at 0% 50%,rgba(33,150,243,.2),transparent 70%),rgba(14,23,40,.55)}
.duo__eq{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
  font-size:30px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--blue-deep),var(--blue));box-shadow:0 10px 30px -10px rgba(33,150,243,.9)}
.duo__result p{margin:0;max-width:none;font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:rgba(237,239,247,.8)}
.duo__result strong{color:var(--ink);font-weight:800}

/* Eckdaten */
.facts{list-style:none;margin:clamp(30px,5vh,52px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.facts li{padding-top:18px;border-top:1px solid var(--line-strong);position:relative}
.facts li::before{content:"";position:absolute;left:0;top:-1px;width:44px;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--sky))}
.facts b{display:block;font-size:clamp(19px,1.8vw,25px);font-weight:800;letter-spacing:-.015em;line-height:1.2;color:var(--ink)}
.facts span{display:block;margin-top:8px;font-size:14px;line-height:1.5;color:var(--muted)}

/* ---- Team ----------------------------------------------------- */
.team{margin-top:clamp(40px,7vh,84px)}
.js .reveal.member{opacity:1;transform:none;transition:none}
.member{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);
  align-items:start;padding:clamp(44px,8vh,96px) 0;border-top:1px solid var(--line)}
.member:first-child{border-top:0;padding-top:0}
.member__visual{grid-column:1/span 5}
.member__text{grid-column:7/-1}
.member:nth-child(even) .member__visual{grid-column:8/-1;grid-row:1}
.member:nth-child(even) .member__text{grid-column:1/span 6;grid-row:1}
/* Anker unter dem klebenden Menüband */
.member{scroll-margin-top:80px}

/* Person freigestellt auf einer Linie – kein Kasten.
   Das Feld (4:5) gibt nur Größe und Ausschnitt vor und schneidet das Bild
   unten an der Linie ab; sichtbar sind nur Person, Glut, Linie und Logo. */
.pf{position:relative;aspect-ratio:4/5;overflow:hidden;isolation:isolate;
  max-width:460px;margin-inline:auto}
/* Die Linie, auf der die Person steht – zieht sich von der Mitte aus auf */
.pf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(165,215,249,0),rgba(165,215,249,.85) 30%,#A5D7F9 50%,rgba(165,215,249,.85) 70%,rgba(165,215,249,0));
  box-shadow:0 0 14px rgba(33,150,243,.75);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1) .1s}
/* Licht, das von der Linie nach oben fällt */
.pf::before{content:"";position:absolute;left:6%;right:6%;bottom:0;height:22%;z-index:0;pointer-events:none;
  background:radial-gradient(50% 100% at 50% 100%,rgba(33,150,243,.32),rgba(33,150,243,0) 72%);
  transition:opacity 1.1s ease .2s}
.pf__glow{position:absolute;left:10%;right:10%;top:4%;aspect-ratio:1;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,rgba(33,150,243,.36),rgba(33,150,243,.1) 55%,transparent 100%);
  transition:opacity 1.1s ease .1s,transform 1.4s cubic-bezier(.16,1,.3,1) .1s}
.pf--lt .pf__glow{background:radial-gradient(closest-side,rgba(59,142,212,.34),rgba(59,142,212,.1) 55%,transparent 100%)}
.pf__img{position:absolute;left:0;right:0;bottom:0;margin-inline:auto;z-index:2;
  height:94%;width:auto;max-width:none;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.45));
  transition:opacity .9s cubic-bezier(.16,1,.3,1) .18s,transform 1.15s cubic-bezier(.16,1,.3,1) .18s,filter .9s ease .18s}
.pf--dennis .pf__img{height:104%;bottom:-8%}
/* Kopf und Schultern: Schultern laufen seitlich weich aus */
.pf--meixner .pf__img,.pf--rene .pf__img{height:72%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%)}
.pf--rene .pf__img{height:76%}
/* Illustrationsfigur: steht mit den Sneakern auf der Linie */
.pf--figur .pf__img{height:90%;bottom:1%;filter:drop-shadow(0 18px 24px rgba(0,0,0,.4))}
/* Logos oben links - dort verdecken sie weder Gesicht noch Laptop */
.pf__logos{position:absolute;left:16px;right:16px;top:16px;z-index:5;display:flex;flex-wrap:wrap;gap:8px;
  transition:opacity .8s cubic-bezier(.16,1,.3,1) .85s,transform .8s cubic-bezier(.16,1,.3,1) .85s}
.pf:hover .pf__glow{transform:scale(1.08)}

.js .member:not(.is-in) .pf__img{opacity:0;transform:translateY(9%) scale(.97);filter:drop-shadow(0 24px 30px rgba(0,0,0,.45))}
.js .member:not(.is-in) .pf__glow,.js .member:not(.is-in) .pf::before{opacity:0}
.js .member:not(.is-in) .pf__glow{transform:scale(.6)}
.js .member:not(.is-in) .pf::after{transform:scaleX(0)}
.js .member:not(.is-in) .pf__logos{opacity:0;transform:translateY(-14px)}

/* Text */
.member__text > *{transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js .member:not(.is-in) .member__text > :not(.member__name){opacity:0;transform:translateY(22px)}
.member__text > :nth-child(1){transition-delay:.05s}
.member__text > :nth-child(3){transition-delay:.3s}
.member__text > :nth-child(4){transition-delay:.4s}
.member__text > :nth-child(5){transition-delay:.5s}
.member__text > :nth-child(6){transition-delay:.6s}
.member__text > :nth-child(7){transition-delay:.7s}
.member__org{display:flex;align-items:center;gap:10px;margin:0;max-width:none;
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--sky)}
.member__org::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--blue),transparent)}
.member__name{margin-top:16px;font-size:clamp(32px,3.8vw,56px);line-height:1.04;letter-spacing:-.03em;font-weight:800}
.member__role{margin:14px 0 0;max-width:46ch;font-size:clamp(16px,1.35vw,18.5px);font-weight:600;line-height:1.45;color:var(--ink)}
.member__lead{margin-top:20px;max-width:60ch;font-size:clamp(16px,1.25vw,18px);line-height:1.68;color:rgba(237,239,247,.74)}
.member__quote{margin:24px 0 0;padding:4px 0 4px 22px;position:relative;max-width:56ch}
.member__quote::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--blue),var(--sky))}
.member__quote p{margin:0;font-size:clamp(17px,1.5vw,21px);font-weight:300;line-height:1.5;color:var(--ink)}
.member__skills{margin-top:26px}
.member__k{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.chips{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:7px 13px;border-radius:999px;font-size:13.5px;font-weight:500;line-height:1.3;color:rgba(237,239,247,.9);
  border:1px solid rgba(165,215,249,.2);background:rgba(33,150,243,.07);
  transition:border-color .25s ease,background .25s ease,opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.chips li:hover{border-color:rgba(33,150,243,.6);background:rgba(33,150,243,.16)}
.js .member:not(.is-in) .chips li{opacity:0;transform:translateY(10px)}
.chips li:nth-child(1){transition-delay:.55s}.chips li:nth-child(2){transition-delay:.61s}
.chips li:nth-child(3){transition-delay:.67s}.chips li:nth-child(4){transition-delay:.73s}
.chips li:nth-child(5){transition-delay:.79s}.chips li:nth-child(6){transition-delay:.85s}
.chips li:nth-child(7){transition-delay:.91s}.chips li:nth-child(8){transition-delay:.97s}
.chips li:hover{transition-delay:0s}
.member__gain{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:start;
  margin-top:24px;padding:16px 20px;border-radius:12px;max-width:62ch;
  border:1px solid rgba(165,215,249,.2);background:rgba(33,150,243,.09)}
.member__ico{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,var(--blue-deep),var(--blue))}
.member__ico svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.member__gain p{margin:0;max-width:none;font-size:15px;line-height:1.6;color:rgba(237,239,247,.78)}
.member__gain b{color:var(--ink);font-weight:800}

/* Ohne JavaScript steht alles sofort da */
html:not(.js) .lockup__pulse{animation:none;opacity:0}

/* ---- Schmalere Bildschirme ------------------------------------ */
@media (max-width:980px){
  .about-hero__grid{grid-template-columns:1fr}
  .lockup{margin-inline:auto;max-width:520px}
  .duo{grid-template-columns:1fr;grid-template-rows:auto 64px auto}
  .duo__link::before{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto;
    background:linear-gradient(180deg,rgba(33,150,243,0),rgba(165,215,249,.55),rgba(33,150,243,0))}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .member,.member:nth-child(even){grid-template-columns:1fr;row-gap:clamp(28px,4vh,40px)}
  .member__visual,.member:nth-child(even) .member__visual{grid-column:1;grid-row:1;width:100%;max-width:420px}
  .member__text,.member:nth-child(even) .member__text{grid-column:1;grid-row:2}
}
@media (max-width:560px){
  .facts{grid-template-columns:1fr}
  .duo__result{grid-template-columns:1fr}
  .duo__eq{width:46px;height:46px;font-size:25px}
  .lockup{aspect-ratio:10/9.4}
  .lockup__node{width:46px;height:46px;margin:-23px 0 0 -23px}
  .plate--xl{padding:12px 16px;border-radius:12px}
  .plate--xl .plate__di{height:22px}
  .plate--xl .plate__lt{height:28px}
  .member__visual,.member:nth-child(even) .member__visual{max-width:none}
}

/* ---- Reduzierte Bewegung --------------------------------------
   Nichts fliegt, nichts zieht durch - die Teile blenden nur
   nacheinander auf, die Seite baut sich trotzdem sichtbar auf. */
@media (prefers-reduced-motion:reduce){
  .about-hero__h1 .hw,.member__name .hw{transition:opacity .6s ease}
  .js .about-hero__h1:not(.is-in) .hw,.js .member:not(.is-in) .member__name .hw{transform:none;filter:none}
  .lockup__a,.lockup__b,.lockup__node,.lockup__glow,.pf__img,.pf__glow,.pf__logos,.member__text > *,.chips li{transition-property:opacity}
  .js .lockup:not(.is-in) .lockup__a,.js .lockup:not(.is-in) .lockup__b,
  .js .lockup:not(.is-in) .lockup__node,.js .lockup:not(.is-in) .lockup__glow,
  .js .member:not(.is-in) .pf__img,.js .member:not(.is-in) .pf__glow,.js .member:not(.is-in) .pf__logos,
  .js .member:not(.is-in) .member__text > :not(.member__name),.js .member:not(.is-in) .chips li{transform:none}
  .js .member:not(.is-in) .pf__img{filter:drop-shadow(0 24px 30px rgba(0,0,0,.45))}
  .js .member:not(.is-in) .pf::after{transform:none;opacity:0}
  .pf::after{transition:opacity 1s ease}
  .lockup__pulse,.lockup.is-in .lockup__pulse{animation:none;opacity:0}
  .lockup::after{animation:none}
  .pf:hover .pf__glow{transform:none}
}

/* ============================================================
   Startseite: Bühne mit vier Zuständen
   designed IT · managed 360 · Chaoslöser · Leistungen, danach
   von vorn.

   Übergänge
   ---------------------------------------
   Ein Wechsel ist eine Abfolge, keine Überblendung:
   1. Der alte Zustand bekommt .is-out – seine Teile gehen ab
      (Text steigt nach oben weg und verschwimmt, Kacheln und
      Bilder heben sich und blenden aus). Dauer gut 0,6 s.
   2. Nach 0,36 s (beim Verlassen des Logos 0,48 s) bekommt der
      neue Zustand .is-on – seine Teile kommen von unten herein.
   So liest sich jeder Wechsel als eine Bewegung nach oben, und
   es entsteht nie ein Doppelbild zweier Zustände.

   Das Logo ist die Klammer: beim Verlassen löst es sich auf (die
   vier Segmente fliegen in ihrer eigenen 59°-Achse auseinander,
   die Buchstaben verschwimmen nach oben), bei der Rückkehr baut
   es sich in kurzer Form wieder auf (Segmente fliegen zusammen,
   Wortmarke steigt auf, Lichtreflex, Haarlinie, Claim) – das
   Spiegelbild des Auflösens. Erkennbar an .hero--looped.

   Kurve der Abgänge: cubic-bezier(.4,0,1,1) – beschleunigt, beginnt
   aber sofort sichtbar. (Eine stärker verzögerte Kurve ließ alles eine
   Drittelsekunde stillstehen und dann schlagartig verschwinden.)

   Wichtig für alle Abgänge: jede Keyframe-Regel nennt ihren
   Startzustand ausdrücklich (from{opacity:1 …}). Viele Teile sind
   im Grundzustand unsichtbar (opacity:0) und werden erst durch
   ihre Einflug-Animation sichtbar – ohne ausdrücklichen Start
   würde der Abgang dort beginnen, also bei unsichtbar.

   Aufbau: alle Zustände liegen über dem gleichen Rasterfeld
   (`grid-area:1/1`), die Höhe ergibt sich aus dem höchsten.
   Ohne JavaScript stehen sie untereinander und sind alle lesbar.

   ============================================================ */

.hero{width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vh,30px)}
.hero__view{width:100%;max-width:1180px}
.js .hero__view{display:grid;align-items:center}

.hero__slide{
  grid-area:1/1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,1.6vh,18px);
  text-align:center;text-decoration:none;color:inherit;
  padding:clamp(8px,1.4vh,18px) 0}

/* Der Behälter schaltet nur um – die Bewegung machen seine Teile */
.js .hero__slide{opacity:0;visibility:hidden;pointer-events:none}
.js .hero__slide.is-on{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .2s ease}
/* Während des Abgangs bleibt er stehen und blendet erst am Ende aus –
   ein Sicherheitsnetz für alles, was keine eigene Abgangs-Animation hat */
.js .hero__slide.is-out{opacity:0;visibility:visible;pointer-events:none;
  transition:opacity .16s ease .46s}

/* Ohne JavaScript: Zustände untereinander, mit Trennlinie */
html:not(.js) .hero__slide + .hero__slide{
  margin-top:clamp(36px,6vh,72px);padding-top:clamp(36px,6vh,72px);
  border-top:1px solid var(--line)}

.hero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sky)}
.hero__eyebrow::before{content:"";width:26px;height:1px;
  background:linear-gradient(90deg,var(--blue),transparent)}
.hero__say{
  display:block;font-weight:800;line-height:1.06;letter-spacing:-.03em;
  font-size:clamp(26px,4.4vw,56px);color:var(--ink);text-wrap:balance}
.hero__say b{font-weight:800;
  background:linear-gradient(100deg,var(--sky),var(--blue) 62%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{display:block;max-width:52ch;font-size:clamp(15px,1.45vw,19px);
  font-weight:300;line-height:1.6;color:rgba(237,239,247,.72)}
.hero__more{
  display:inline-flex;align-items:center;gap:9px;margin-top:4px;
  font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--ink);
  border:1px solid var(--line-strong);border-radius:999px;padding:11px 22px;
  transition:background .25s ease,border-color .25s ease}
.hero__more i{font-style:normal;transition:transform .25s ease}
.hero__slide:hover .hero__more{background:rgba(33,150,243,.12);border-color:rgba(33,150,243,.6)}
.hero__slide:hover .hero__more i{transform:translateX(4px)}
.hero__slide:focus-visible{outline:2px solid var(--blue);outline-offset:6px;border-radius:18px}

/* ---- Zustand 1 · managed 360 ------------------------------- */
.hs-m360__wrap{display:block;width:min(74vw,440px)}
.hs-m360{width:100%;height:auto;display:block}
.hs-fam{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(10px,1.6vw,22px);margin-top:4px;width:100%}
.hs-fam__i{
  display:block;flex:0 1 auto;width:clamp(150px,19vw,228px);
  padding:12px 16px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(160deg,rgba(30,41,63,.5),rgba(11,18,32,.42));
  transition:border-color .3s ease}
.hs-fam__i .hs-lg{width:100%;height:auto;display:block;overflow:visible}
.hero__slide:hover .hs-fam__i{border-color:rgba(33,150,243,.34)}
/* Am Handy immer zwei Kacheln je Reihe: mit 44vw passten zwei erst ab etwa
   400 px nebeneinander, darunter standen alle vier untereinander (bis 17.10.2026) */
@media (max-width:620px){.hs-fam__i{width:min(calc(50% - 6px),180px);padding:9px 11px}}

/* ---- Zustand 2 · Chaoslöser -------------------------------- */
.hero__slide--chaos{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  align-items:center;gap:clamp(16px,3.4vw,52px);text-align:left}
.hs-art{display:block;min-width:0}
.hs-art .sz{width:100%;height:auto;display:block}
.hs-col{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(10px,1.6vh,18px);min-width:0}
@media (max-width:760px){
  .hero__slide--chaos{grid-template-columns:1fr;text-align:center}
  .hs-col{align-items:center;text-align:center}
  .hs-art{order:-1;width:min(90%,420px);margin-inline:auto}
}

/* ---- Zustand 3 · Leistungen -------------------------------- */
.hs-icons{
  display:grid;width:100%;margin-top:6px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(8px,1.4vw,16px)}
@media (max-width:760px){.hs-icons{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hs-ico{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:14px 8px 15px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(160deg,rgba(30,41,63,.46),rgba(11,18,32,.4));
  transition:border-color .3s ease}
.hero__slide:hover .hs-ico{border-color:rgba(33,150,243,.3)}
.hs-ico__b{display:block;width:clamp(30px,3.4vw,42px)}
.hs-ico__b svg{width:100%;height:auto;display:block}
.hs-ico__b .ink{stroke:var(--ink)}
.hs-ico__b .accent{stroke:var(--blue)}
.hs-ico__b .solid{fill:var(--blue);stroke:none}
.hs-ico__t{font-size:clamp(11px,1.02vw,13px);font-weight:600;letter-spacing:.03em;
  color:rgba(237,239,247,.72);text-align:center;line-height:1.3}

/* ---- Punkte und Pause -------------------------------------- */
.hero__dots{display:flex;align-items:center;gap:11px;
  opacity:0;animation:fadeUp .8s ease 2.9s forwards}
html:not(.js) .hero__dots{display:none}
.hero__dot{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(165,215,249,.26);
  transition:background .3s ease,transform .3s ease,box-shadow .3s ease}
.hero__dot:hover{background:rgba(165,215,249,.55);transform:scale(1.2)}
.hero__dot[aria-current="true"]{background:var(--blue);transform:scale(1.25);
  box-shadow:0 0 14px rgba(33,150,243,.75)}
.hero__dot:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.hero__pause{
  width:22px;height:22px;margin-left:5px;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);border-radius:50%;
  color:var(--muted);transition:color .25s ease,border-color .25s ease}
.hero__pause:hover{color:var(--ink);border-color:rgba(33,150,243,.6)}
.hero__pause:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.hero__pause svg{width:9px;height:9px;display:block;fill:currentColor}
.hero__pause .ic-play{display:none}
.hero__pause[aria-pressed="true"] .ic-play{display:block}
.hero__pause[aria-pressed="true"] .ic-pause{display:none}
/* Touch: Punkte und Pause behalten ihr Aussehen, bekommen aber eine
   unsichtbare Trefferflaeche (44 px hoch, ohne Ueberlappung) */
@media (pointer:coarse){
  .hero__dots{gap:20px}
  .hero__dot,.hero__pause{position:relative}
  .hero__dot::before,.hero__pause::before{content:"";position:absolute;left:50%;top:50%;
    width:29px;height:44px;transform:translate(-50%,-50%)}
  .hero__pause{margin-left:12px}
  .hero__pause::before{width:44px}
}
/* Handy quer: wenig Hoehe - Produktlogo und Szene kleiner, und jeder
   Zustand beginnt oben statt in der Mitte der (hoeheren) Buehne */
@media (orientation:landscape) and (max-height:500px){
  .js .hero__view{align-items:start}
  .hs-m360__wrap{width:min(44vw,300px)}
  .hero__slide--chaos .hs-art{width:min(100%,330px);justify-self:center}
}

/* ============================================================
   Einflug – Teile kommen von unten
   ============================================================ */
@keyframes hsIn{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}}
@keyframes hsPop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}

.js .hero__slide.is-on .hero__eyebrow,
.js .hero__slide.is-on .hero__say,
.js .hero__slide.is-on .hero__sub,
.js .hero__slide.is-on .hero__more{animation:hsIn .7s cubic-bezier(.16,1,.3,1) both}
.js .hero__slide.is-on .hero__eyebrow{animation-delay:.04s}
.js .hero__slide.is-on .hero__say{animation-delay:.14s}
.js .hero__slide.is-on .hero__sub{animation-delay:.24s}
.js .hero__slide.is-on .hero__more{animation-delay:.52s}
.js .hero__slide--m360.is-on .hero__say{animation-delay:.3s}
.js .hero__slide--m360.is-on .hero__more{animation-delay:.84s}
.js .hero__slide--svc.is-on .hero__more{animation-delay:1.0s}

/* managed 360: Logo ploppt auf, der Ring dreht bei jedem Erscheinen
   neu ein (eigene Keyframes, damit die Animation neu startet) */
.js .hero__slide--m360.is-on .hs-m360__wrap{animation:hsPop .85s cubic-bezier(.16,1,.3,1) .06s both}
.js .hero__slide--m360.is-on .m360__ring{animation:m360ringRe 1.8s cubic-bezier(.16,1,.3,1) .08s both}
@keyframes m360ringRe{from{transform:rotate(-360deg)}to{transform:rotate(0)}}
.js .hero__slide--m360.is-on .m360__word-in{animation:m360wordRe .8s cubic-bezier(.16,1,.3,1) .3s both}
@keyframes m360wordRe{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}

/* die vier Produktlogos fliegen gestaffelt von unten ein */
.js .hero__slide--m360.is-on .hs-fam__i{animation:famIn .8s cubic-bezier(.16,1,.3,1) both}
.js .hero__slide--m360.is-on .hs-fam__i--service{animation-delay:.42s}
.js .hero__slide--m360.is-on .hs-fam__i--rescue{animation-delay:.50s}
.js .hero__slide--m360.is-on .hs-fam__i--secure{animation-delay:.58s}
.js .hero__slide--m360.is-on .hs-fam__i--skills{animation-delay:.66s}
@keyframes famIn{from{opacity:0;transform:translateY(34px) scale(.92)}to{opacity:1;transform:none}}

/* Chaoslöser: Szene kommt von links, dann wird gewunken und gerannt */
.js .hero__slide--chaos.is-on .hs-art{animation:artIn .9s cubic-bezier(.16,1,.3,1) both}
@keyframes artIn{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
.js .hero__slide--chaos.is-on .sz-wave{
  transform-box:fill-box;transform-origin:20% 90%;
  animation:winken 1s ease-in-out .85s 3}
@keyframes winken{0%,100%{transform:rotate(0)}30%{transform:rotate(13deg)}65%{transform:rotate(-9deg)}}
.js .hero__slide--chaos.is-on .sz-dieb{animation:fliehen 1.05s ease-in-out .7s 3}
@keyframes fliehen{0%,100%{transform:translate(0,0)}40%{transform:translate(5px,-3px)}70%{transform:translate(1px,0)}}
.js .hero__slide--chaos.is-on .sz-speed{animation:speedy .55s ease-out .7s 5}
@keyframes speedy{0%{opacity:0;transform:translateX(12px)}40%{opacity:1}100%{opacity:.25;transform:translateX(-6px)}}
.js .hero__slide--chaos.is-on .sz-bang{
  transform-box:fill-box;transform-origin:50% 100%;
  animation:bangPop .5s cubic-bezier(.16,1,.3,1) .95s both}
@keyframes bangPop{0%{opacity:0;transform:scale(.3)}70%{transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}

/* Leistungen: Kacheln ploppen auf, die Icons zeichnen sich */
.js .hero__slide--svc.is-on .hs-ico{animation:icoIn .6s cubic-bezier(.16,1,.3,1) both}
@keyframes icoIn{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}
.js .hero__slide--svc.is-on .hs-ico:nth-child(1){animation-delay:.40s}
.js .hero__slide--svc.is-on .hs-ico:nth-child(2){animation-delay:.47s}
.js .hero__slide--svc.is-on .hs-ico:nth-child(3){animation-delay:.54s}
.js .hero__slide--svc.is-on .hs-ico:nth-child(4){animation-delay:.61s}
.js .hero__slide--svc.is-on .hs-ico:nth-child(5){animation-delay:.68s}
.js .hero__slide--svc.is-on .hs-ico:nth-child(6){animation-delay:.75s}
.js .hero__slide--svc.is-on .hs-ico:nth-child(7){animation-delay:.82s}
.js .hero__slide--svc.is-on .hs-ico:nth-child(8){animation-delay:.89s}
.js .hero__slide--svc .hs-ico__b path{stroke-dasharray:100;stroke-dashoffset:100}
.js .hero__slide--svc.is-on .hs-ico__b path{animation:zeichnen .9s ease-out both}
.js .hero__slide--svc.is-on .hs-ico:nth-child(1) path{animation-delay:.53s}
.js .hero__slide--svc.is-on .hs-ico:nth-child(2) path{animation-delay:.60s}
.js .hero__slide--svc.is-on .hs-ico:nth-child(3) path{animation-delay:.67s}
.js .hero__slide--svc.is-on .hs-ico:nth-child(4) path{animation-delay:.74s}
.js .hero__slide--svc.is-on .hs-ico:nth-child(5) path{animation-delay:.81s}
.js .hero__slide--svc.is-on .hs-ico:nth-child(6) path{animation-delay:.88s}
.js .hero__slide--svc.is-on .hs-ico:nth-child(7) path{animation-delay:.95s}
.js .hero__slide--svc.is-on .hs-ico:nth-child(8) path{animation-delay:1.02s}
@keyframes zeichnen{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.js .hero__slide--svc .hs-ico__b .solid{opacity:0}
.js .hero__slide--svc.is-on .hs-ico__b .solid{animation:solidIn .5s ease-out 1.3s both}
@keyframes solidIn{from{opacity:0}to{opacity:1}}

/* Rückkehr zum Logo: kurzer Wiederaufbau, Spiegelbild des Auflösens */
.js .hero--looped .hero__slide--logo.is-on .seg{animation:segRe .72s cubic-bezier(.16,1,.3,1) both}
.js .hero--looped .hero__slide--logo.is-on .seg:nth-of-type(1){animation-delay:.04s}
.js .hero--looped .hero__slide--logo.is-on .seg:nth-of-type(2){animation-delay:.11s}
.js .hero--looped .hero__slide--logo.is-on .seg:nth-of-type(3){animation-delay:.18s}
.js .hero--looped .hero__slide--logo.is-on .seg:nth-of-type(4){animation-delay:.25s}
@keyframes segRe{
  0%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.94)}
  60%{opacity:1}
  100%{opacity:1;transform:none}}
.js .hero--looped .hero__slide--logo.is-on .ltr{animation:ltrRe .52s cubic-bezier(.22,1,.32,1) both}
.js .hero--looped .hero__slide--logo.is-on .ltr:nth-of-type(1){animation-delay:.36s}
.js .hero--looped .hero__slide--logo.is-on .ltr:nth-of-type(2){animation-delay:.39s}
.js .hero--looped .hero__slide--logo.is-on .ltr:nth-of-type(3){animation-delay:.42s}
.js .hero--looped .hero__slide--logo.is-on .ltr:nth-of-type(4){animation-delay:.45s}
.js .hero--looped .hero__slide--logo.is-on .ltr:nth-of-type(5){animation-delay:.48s}
.js .hero--looped .hero__slide--logo.is-on .ltr:nth-of-type(6){animation-delay:.51s}
.js .hero--looped .hero__slide--logo.is-on .ltr:nth-of-type(7){animation-delay:.54s}
.js .hero--looped .hero__slide--logo.is-on .ltr:nth-of-type(8){animation-delay:.57s}
@keyframes ltrRe{from{opacity:0;transform:translateY(26px) scaleY(.86)}to{opacity:1;transform:none}}
.js .hero--looped .hero__slide--logo.is-on .it{animation:itRe .66s cubic-bezier(.16,1,.3,1) .62s both}
@keyframes itRe{
  0%{opacity:0;transform:translateX(-16px) scale(.9);filter:drop-shadow(0 0 0 rgba(33,150,243,0))}
  55%{opacity:1;filter:drop-shadow(0 0 22px rgba(33,150,243,.75))}
  100%{opacity:1;transform:none;filter:drop-shadow(0 0 10px rgba(33,150,243,.28))}}
.js .hero--looped .hero__slide--logo.is-on .shine rect{animation:shineRe .8s cubic-bezier(.4,0,.2,1) .56s both}
@keyframes shineRe{
  0%{opacity:0;transform:translateX(-360px)}
  22%{opacity:.9}
  100%{opacity:0;transform:translateX(300px)}}
.js .hero--looped .hero__slide--logo.is-on .rule{animation:ruleRe .8s cubic-bezier(.16,1,.3,1) .72s both}
@keyframes ruleRe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.js .hero--looped .hero__slide--logo.is-on .claim span{animation:wordRe .62s cubic-bezier(.22,1,.32,1) both}
.js .hero--looped .hero__slide--logo.is-on .claim span:nth-child(1){animation-delay:.84s}
.js .hero--looped .hero__slide--logo.is-on .claim span:nth-child(2){animation-delay:.90s}
.js .hero--looped .hero__slide--logo.is-on .claim span:nth-child(3){animation-delay:.96s}
.js .hero--looped .hero__slide--logo.is-on .claim span:nth-child(4){animation-delay:1.02s}
.js .hero--looped .hero__slide--logo.is-on .claim span:nth-child(5){animation-delay:1.08s}
@keyframes wordRe{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}}

/* ============================================================
   Abgang – Teile steigen nach oben weg
   Jede Regel nennt ihren Startzustand (siehe Kopf dieses Blocks).
   ============================================================ */
@keyframes hsOut{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-18px)}}
.js .hero__slide.is-out .hero__eyebrow,
.js .hero__slide.is-out .hero__say,
.js .hero__slide.is-out .hero__sub,
.js .hero__slide.is-out .hero__more{animation:hsOut .42s cubic-bezier(.4,0,1,1) both}
.js .hero__slide.is-out .hero__say{animation-delay:.03s}
.js .hero__slide.is-out .hero__sub{animation-delay:.06s}

/* Logo: löst sich auf */
.js .hero__slide--logo.is-out .seg{animation:segOut .6s cubic-bezier(.4,0,1,1) both}
.js .hero__slide--logo.is-out .seg:nth-of-type(1){animation-delay:0s}
.js .hero__slide--logo.is-out .seg:nth-of-type(2){animation-delay:.04s}
.js .hero__slide--logo.is-out .seg:nth-of-type(3){animation-delay:.08s}
.js .hero__slide--logo.is-out .seg:nth-of-type(4){animation-delay:.12s}
@keyframes segOut{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translate(calc(var(--dx) * -.55),calc(var(--dy) * -.55))
     rotate(calc(var(--rot) * -1)) scale(.9)}}
.js .hero__slide--logo.is-out .ltr{animation:ltrOut .46s cubic-bezier(.4,0,1,1) both}
.js .hero__slide--logo.is-out .ltr:nth-of-type(2){animation-delay:.025s}
.js .hero__slide--logo.is-out .ltr:nth-of-type(3){animation-delay:.05s}
.js .hero__slide--logo.is-out .ltr:nth-of-type(4){animation-delay:.075s}
.js .hero__slide--logo.is-out .ltr:nth-of-type(5){animation-delay:.1s}
.js .hero__slide--logo.is-out .ltr:nth-of-type(6){animation-delay:.125s}
.js .hero__slide--logo.is-out .ltr:nth-of-type(7){animation-delay:.15s}
.js .hero__slide--logo.is-out .ltr:nth-of-type(8){animation-delay:.175s}
@keyframes ltrOut{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-16px)}}
.js .hero__slide--logo.is-out .it{animation:itOut .46s cubic-bezier(.4,0,1,1) .16s both}
@keyframes itOut{
  from{opacity:1;transform:none;filter:drop-shadow(0 0 10px rgba(33,150,243,.28))}
  to{opacity:0;transform:translateY(-16px);filter:drop-shadow(0 0 0 rgba(33,150,243,0))}}
.js .hero__slide--logo.is-out .rule{animation:ruleOut .42s cubic-bezier(.4,0,1,1) both}
@keyframes ruleOut{from{transform:scaleX(1);opacity:1}to{transform:scaleX(0);opacity:0}}
.js .hero__slide--logo.is-out .claim span{animation:wordOut .38s cubic-bezier(.4,0,1,1) both}
.js .hero__slide--logo.is-out .claim span:nth-child(2){animation-delay:.02s}
.js .hero__slide--logo.is-out .claim span:nth-child(3){animation-delay:.04s}
.js .hero__slide--logo.is-out .claim span:nth-child(4){animation-delay:.06s}
.js .hero__slide--logo.is-out .claim span:nth-child(5){animation-delay:.08s}
@keyframes wordOut{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-12px)}}
.js .hero__slide--logo.is-out .shine rect{animation:none;opacity:0}

/* managed 360: Logo zieht sich zusammen, Kacheln heben ab */
.js .hero__slide--m360.is-out .hs-m360__wrap{animation:hsShrink .44s cubic-bezier(.4,0,1,1) both}
@keyframes hsShrink{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-14px) scale(.92)}}
.js .hero__slide--m360.is-out .m360__ring{animation:none;transform:none}
.js .hero__slide--m360.is-out .m360__word-in{animation:none;opacity:1;transform:none}
.js .hero__slide--m360.is-out .hs-fam__i{animation:famOut .4s cubic-bezier(.4,0,1,1) both}
.js .hero__slide--m360.is-out .hs-fam__i--rescue{animation-delay:.03s}
.js .hero__slide--m360.is-out .hs-fam__i--secure{animation-delay:.06s}
.js .hero__slide--m360.is-out .hs-fam__i--skills{animation-delay:.09s}
@keyframes famOut{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-16px) scale(.96)}}

/* Chaoslöser: der Dieb rennt aus dem Bild, die Szene hebt ab */
.js .hero__slide--chaos.is-out .hs-art{animation:artOut .46s cubic-bezier(.4,0,1,1) .06s both}
@keyframes artOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-14px)}}
.js .hero__slide--chaos.is-out .sz-dieb{animation:diebWeg .4s cubic-bezier(.55,0,.9,.4) both}
@keyframes diebWeg{from{opacity:1;transform:none}to{opacity:0;transform:translate(64px,-2px)}}

/* Leistungen: Kacheln heben in einer Welle ab, Icons bleiben gezeichnet */
.js .hero__slide--svc.is-out .hs-ico{animation:icoOut .36s cubic-bezier(.4,0,1,1) both}
.js .hero__slide--svc.is-out .hs-ico:nth-child(2){animation-delay:.02s}
.js .hero__slide--svc.is-out .hs-ico:nth-child(3){animation-delay:.04s}
.js .hero__slide--svc.is-out .hs-ico:nth-child(4){animation-delay:.06s}
.js .hero__slide--svc.is-out .hs-ico:nth-child(5){animation-delay:.08s}
.js .hero__slide--svc.is-out .hs-ico:nth-child(6){animation-delay:.10s}
.js .hero__slide--svc.is-out .hs-ico:nth-child(7){animation-delay:.12s}
.js .hero__slide--svc.is-out .hs-ico:nth-child(8){animation-delay:.14s}
@keyframes icoOut{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-12px) scale(.94)}}
.js .hero__slide--svc.is-out .hs-ico__b path{animation:none;stroke-dashoffset:0}
.js .hero__slide--svc.is-out .hs-ico__b .solid{animation:none;opacity:1}

/* ============================================================
   Reduzierte Bewegung: nur Auf- und Abblenden, gleiche Reihenfolge.
   Eigene Keyframe-Namen, damit die Animation bei jedem Wechsel
   neu startet (die Grundregeln nutzen dort bereits softIn).
   ============================================================ */
@keyframes hsFadeIn{from{opacity:0}to{opacity:1}}
@keyframes hsFadeOut{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .js .hero__slide.is-on .hero__eyebrow,
  .js .hero__slide.is-on .hero__say,
  .js .hero__slide.is-on .hero__sub,
  .js .hero__slide.is-on .hero__more,
  .js .hero__slide.is-on .hs-m360__wrap,
  .js .hero__slide.is-on .hs-fam__i,
  .js .hero__slide--chaos.is-on .hs-art,
  .js .hero__slide--svc.is-on .hs-ico,
  .js .hero--looped .hero__slide--logo.is-on .seg,
  .js .hero--looped .hero__slide--logo.is-on .ltr,
  .js .hero--looped .hero__slide--logo.is-on .it,
  .js .hero--looped .hero__slide--logo.is-on .claim span{
    animation-name:hsFadeIn;animation-duration:.45s;animation-timing-function:ease-out;
    transform:none;filter:none}
  .js .hero--looped .hero__slide--logo.is-on .rule{animation:none;transform:scaleX(1)}
  .js .hero--looped .hero__slide--logo.is-on .shine rect{animation:none;opacity:0}
  .js .hero__slide--m360.is-on .m360__ring,
  .js .hero__slide--m360.is-on .m360__word-in{animation:none;opacity:1;transform:none}
  .js .hero__slide--chaos.is-on .sz-wave,
  .js .hero__slide--chaos.is-on .sz-dieb,
  .js .hero__slide--chaos.is-on .sz-speed,
  .js .hero__slide--chaos.is-on .sz-bang{animation:none}
  .js .hero__slide--svc .hs-ico__b path{stroke-dasharray:none;stroke-dashoffset:0}
  .js .hero__slide--svc.is-on .hs-ico__b path{animation:none}
  .js .hero__slide--svc .hs-ico__b .solid{opacity:1}
  .js .hero__slide--svc.is-on .hs-ico__b .solid{animation:none}

  .js .hero__slide.is-out .hero__eyebrow,
  .js .hero__slide.is-out .hero__say,
  .js .hero__slide.is-out .hero__sub,
  .js .hero__slide.is-out .hero__more,
  .js .hero__slide.is-out .hs-m360__wrap,
  .js .hero__slide.is-out .hs-fam__i,
  .js .hero__slide.is-out .hs-art,
  .js .hero__slide.is-out .hs-ico,
  .js .hero__slide--logo.is-out .seg,
  .js .hero__slide--logo.is-out .ltr,
  .js .hero__slide--logo.is-out .it,
  .js .hero__slide--logo.is-out .claim span,
  .js .hero__slide--logo.is-out .rule{
    animation-name:hsFadeOut;animation-duration:.3s;animation-timing-function:ease-in;
    transform:none;filter:none}
  .js .hero__slide--logo.is-out .rule{transform:scaleX(1)}
  .js .hero__slide--chaos.is-out .sz-dieb{animation:none}
  .hero__dots{animation:softIn .5s ease-out 2.9s both}
}

/* ---- Kontaktabschnitt der Startseite ----------------------- */
.kontakt-kurz{
  display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
@media (max-width:900px){.kontakt-kurz{grid-template-columns:1fr}}
.kontakt-kurz h2 .accent{
  background:linear-gradient(100deg,var(--sky),var(--blue) 60%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.kontakt-kurz .lead{margin-top:18px}
.kontakt-kurz .note{margin-top:22px}
.kontakt-kurz .form{margin-top:0}

/* ============================================================
   Über uns – Gruppenbild „Und noch einige mehr."
   ============================================================ */
.crowd-sec{margin:clamp(56px,9vh,110px) 0 clamp(44px,7vh,80px);padding-top:clamp(48px,8vh,96px);border-top:1px solid var(--line)}
.crowd-sec__head{max-width:860px;margin-inline:auto;text-align:center}
.crowd-sec__head .lead{margin-inline:auto}
.crowd__h{font-size:clamp(36px,5.2vw,72px);line-height:1.04;letter-spacing:-.03em}
.crowd__h .hw{display:inline-block;padding:.1em 0 .16em;margin:-.1em 0 -.16em;
  transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1)}
.js .crowd__h:not(.is-in) .hw{opacity:0;transform:translateY(.42em)}
.crowd__h .hw:nth-child(2){transition-delay:.08s}
.crowd__h .hw:nth-child(3){transition-delay:.18s}
.crowd__h .hw:nth-child(4){transition-delay:.27s}
.crowd__h .hw--blue{background:linear-gradient(100deg,var(--sky),var(--blue) 62%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.crowd{position:relative;margin:clamp(26px,4vh,44px) auto 0;max-width:780px}
/* Glut hinter der Gruppe */
.crowd::before{content:"";position:absolute;left:8%;right:8%;top:4%;bottom:12%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(33,150,243,.34),rgba(33,150,243,.08) 60%,transparent 100%);
  transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.16,1,.3,1)}
.js .crowd:not(.is-in)::before{opacity:0;transform:scale(.8)}
.crowd__svg{position:relative;z-index:1;display:block;width:100%;height:auto;overflow:visible}
/* Handy: die volle Breite nutzen */
@media (max-width:640px){.crowd{margin-inline:calc(var(--pad) * -1)}}

/* Einflug: erst die Bühne, dann springen die Figuren von der Mitte nach außen hoch */
.tb-tier,.tb-f{transform-box:fill-box;transform-origin:50% 100%}
.js .crowd:not(.is-in) .tb-tier,.js .crowd:not(.is-in) .tb-f{opacity:0}
.js .crowd.is-in .tb-tier{animation:tbTier .8s cubic-bezier(.16,1,.3,1) both}
@keyframes tbTier{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js .crowd.is-in .tb-f{animation:tbIn .72s cubic-bezier(.34,1.56,.64,1) both}
@keyframes tbIn{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}

/* Winken: der Arm dreht um die Schulter, als Welle von links nach rechts.
   Die Bewegungsbögen erscheinen nur, solange gewunken wird. */
.tb-arm{transform-box:fill-box}
.tb-arm--l{transform-origin:100% 100%}
.tb-arm--r{transform-origin:0 100%}
.js .crowd.is-in .tb-arm--l{animation:tbWaveL 5.6s ease-in-out infinite}
.js .crowd.is-in .tb-arm--r{animation:tbWaveR 5.6s ease-in-out infinite}
.js .crowd.is-in .tb-wave{animation:tbArcs 5.6s ease-in-out infinite}
.js .crowd:not(.is-in) .tb-wave{opacity:0}
@keyframes tbWaveL{0%,34%,100%{transform:rotate(0)}6%{transform:rotate(-15deg)}13%{transform:rotate(9deg)}
  20%{transform:rotate(-13deg)}27%{transform:rotate(6deg)}}
@keyframes tbWaveR{0%,34%,100%{transform:rotate(0)}6%{transform:rotate(15deg)}13%{transform:rotate(-9deg)}
  20%{transform:rotate(13deg)}27%{transform:rotate(-6deg)}}
@keyframes tbArcs{0%,38%,100%{opacity:0}5%,30%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .crowd__h .hw{transition:opacity .6s ease}
  .js .crowd__h:not(.is-in) .hw{transform:none;filter:none}
  .js .crowd:not(.is-in)::before{transform:none}
  .js .crowd.is-in .tb-tier,.js .crowd.is-in .tb-f{animation-name:tbFade;animation-timing-function:ease}
  @keyframes tbFade{from{opacity:0}to{opacity:1}}
  .js .crowd.is-in .tb-arm--l,.js .crowd.is-in .tb-arm--r{animation:none}
  .js .crowd.is-in .tb-wave{animation:none;opacity:1}
}

/* Verzögerungen je Figur */
.js .crowd.is-in .tb-row--vorn .tb-f:nth-child(1){animation-delay:0.54s}
.js .crowd.is-in .tb-row--vorn .tb-f:nth-child(2){animation-delay:0.42s}
.js .crowd.is-in .tb-row--vorn .tb-f:nth-child(3){animation-delay:0.30s}
.js .crowd.is-in .tb-row--vorn .tb-f:nth-child(4){animation-delay:0.42s}
.js .crowd.is-in .tb-row--vorn .tb-f:nth-child(5){animation-delay:0.54s}
.js .crowd.is-in .tb-row--vorn .tb-f:nth-child(1) :is(.tb-arm,.tb-wave){animation-delay:2.00s}
.js .crowd.is-in .tb-row--vorn .tb-f:nth-child(2) :is(.tb-arm,.tb-wave){animation-delay:2.22s}
.js .crowd.is-in .tb-row--vorn .tb-f:nth-child(3) :is(.tb-arm,.tb-wave){animation-delay:2.44s}
.js .crowd.is-in .tb-row--vorn .tb-f:nth-child(4) :is(.tb-arm,.tb-wave){animation-delay:2.66s}
.js .crowd.is-in .tb-row--vorn .tb-f:nth-child(5) :is(.tb-arm,.tb-wave){animation-delay:2.88s}

/* ---- Laufzeitbudget -------------------------------------------------
   Abschnitte unterhalb des sichtbaren Bereichs werden erst gerendert,
   wenn sie näherkommen. Endlosanimationen pausieren außerhalb des
   Viewports und sobald der Browser-Tab im Hintergrund liegt. */
#main > section:not(:first-child),#main > article:not(:first-child){
  content-visibility:auto;
  contain-intrinsic-size:auto 760px;
}
.motion-paused *,html.page-hidden *{
  animation-play-state:paused !important;
}