/* ==========================================================================
   shiftq.one · Stylesheet · Relaunch Oktober 2026
   Aus dem Design-System v1.1 (Claude-Design-Canvas). Schriften lokal: Space Grotesk
   und Manrope (SIL Open Font License, siehe /assets/fonts/OFL-*.txt).
   ========================================================================== */

@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

.sq{
  /* Marke */
  --q-blue:#034EF0;          /* Logo-Blau, exakt aus dem Logo gemessen */
  --q-blue-hover:#0343D1;
  --q-blue-edge:#022C8A;     /* Tastenkante */
  --q-blue-300:#7AA2FF;      /* Blau auf dunklem Grund (Text) */
  --q-blue-100:#DCE6FE;
  --q-blue-50:#F1F5FF;
  /* Neutrale */
  --black:#000000;           /* Logo-Schwarz: nur Logo und shift-Taste */
  --ink:#0B0D12;
  --ink-2:#12151C;
  --ink-3:#1B1F28;
  --ink-4:#2A2F3B;
  --paper:#FFFFFF;
  --mist:#F5F6F8;
  --fog:#ECEEF2;
  --sky:#F3F6FF;             /* Fläche mit Blaustich: Farbwechsel für das Auge */
  --sky-2:#E8EEFF;
  --line:#E3E6EB;
  --line-2:#C9CED7;
  --slate:#5A6375;
  --slate-2:#3D4554;
  --muted-ui:#6B7487;
  --on-dark-2:rgba(255,255,255,.7);
  --line-dark:rgba(255,255,255,.12);
  --signal:#B93A0B;          /* Fehlerzustand, immer mit Icon und Text */
  --ok:#0E9F6E;              /* geprüft: Q-Gate bestanden, immer mit Haken */
  --ok-ink:#046C4E;
  --ok-50:#E9F8F1;
  /* Schrift */
  --f-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --f-text:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Form & Bewegung */
  --r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:28px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --gutter:clamp(20px,4.4cqi,64px);

  container:sq / inline-size;
  position:relative;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.sq *,.sq *::before,.sq *::after{box-sizing:border-box}
.sq ::selection{background:var(--q-blue);color:#fff}
:where(.sq) a{color:inherit;text-decoration:none}
:where(.sq) :focus-visible{outline:2px solid var(--q-blue);outline-offset:3px;border-radius:6px}
:where(.sq) img{max-width:100%;display:block}
:where(.sq) h1,:where(.sq) h2,:where(.sq) h3,:where(.sq) h4,:where(.sq) p,:where(.sq) ul,:where(.sq) ol,:where(.sq) dl,:where(.sq) dd,:where(.sq) figure,:where(.sq) blockquote{margin:0}
:where(.sq) ul,:where(.sq) ol{padding:0;list-style:none}
:where(.sq) button{font:inherit;color:inherit}
:where(.sq) table{border-collapse:collapse}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Typografie ---------- */
.t-hero{font-family:var(--f-display);font-weight:600;font-size:clamp(42px,7.2cqi,112px);line-height:.95;letter-spacing:-.045em}
.t-d1{font-family:var(--f-display);font-weight:600;font-size:clamp(36px,5.4cqi,80px);line-height:.98;letter-spacing:-.04em;text-wrap:balance}
.t-d2{font-family:var(--f-display);font-weight:600;font-size:clamp(29px,3.6cqi,52px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.t-h3{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.1cqi,30px);line-height:1.14;letter-spacing:-.025em}
.t-h4{font-family:var(--f-display);font-weight:600;font-size:20px;line-height:1.28;letter-spacing:-.015em}
.t-lead{font-size:clamp(17px,1.45cqi,20px);line-height:1.6;color:var(--slate);text-wrap:pretty}
.t-body{font-size:16px;line-height:1.65;text-wrap:pretty}
.t-small{font-size:14.5px;line-height:1.55}
.t-muted{color:var(--slate)}
/* Label: Manrope, halbfett, normale Schreibweise – keine Versalien, keine Sperrung */
.t-label{font-family:var(--f-text);font-size:13.5px;font-weight:700;line-height:1.4;letter-spacing:0;text-transform:none}
.t-num{font-family:var(--f-display);font-weight:600;font-variant-numeric:tabular-nums}
.t-mono{font-family:var(--f-text);font-variant-numeric:tabular-nums}
.t-blue{color:var(--q-blue)}
.t-strong{font-weight:700}
/* Der Q-Punkt: Überschriften enden mit der blauen Q-Taste */
.qp{display:inline-block;width:.19em;height:.19em;margin-left:.055em;border-radius:.05em;background:var(--q-blue);color:transparent;overflow:hidden;vertical-align:baseline;user-select:none}
.qp-white{background:#fff}
.qp-ink{background:var(--ink)}

/* ---------- Kontexte ---------- */
.dark{background:var(--ink);color:#fff}
.dark .t-lead,.dark .t-muted{color:var(--on-dark-2)}
.dark .t-blue{color:var(--q-blue-300)}
.bg-mist{background:var(--mist)}
.bg-blue{background:var(--q-blue);color:#fff}
.bg-blue .t-lead,.bg-blue .t-muted{color:rgba(255,255,255,.9)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:calc(1280px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.sec{position:relative;padding-block:clamp(72px,9cqi,136px)}
.sec-tight{position:relative;padding-block:clamp(56px,6cqi,96px)}
.rule-t{border-top:1px solid var(--line)}
.rule-b{border-bottom:1px solid var(--line)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.auto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,260px)),1fr));gap:var(--gap,16px)}
.split{display:flex;flex-wrap:wrap;gap:40px 72px}
.split>.l{flex:1 1 520px;min-width:0}
.split>.r{flex:1 1 380px;min-width:0}

.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:26px;color:var(--slate)}
.eyebrow .t-label{font-size:14.5px}
.dark .eyebrow{color:var(--on-dark-2)}
.bg-blue .eyebrow{color:#fff}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 72px;margin-bottom:clamp(40px,5cqi,72px)}
.sec-head>.sh-l{flex:1 1 600px;min-width:0}
.sec-head>.sh-r{flex:1 1 320px;max-width:440px}

/* Technische Zeichnung: Spaltenraster und Passermarken */
.gridlines{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 96%);mask-image:linear-gradient(to bottom,#000 50%,transparent 96%)}
.gridlines>.wrap{height:100%}
.gridlines .gl{height:100%;background-image:linear-gradient(to right,var(--fog) 1px,transparent 1px);background-size:calc(100% / 12) 100%;border-right:1px solid var(--fog)}
.dark .gridlines .gl{background-image:linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px);border-right-color:rgba(255,255,255,.055)}
.reg{position:absolute;width:11px;height:11px;pointer-events:none}
.reg::before,.reg::after{content:"";position:absolute;background:var(--line-2)}
.reg::before{left:5px;top:0;width:1px;height:11px}
.reg::after{left:0;top:5px;width:11px;height:1px}
.dark .reg::before,.dark .reg::after{background:rgba(255,255,255,.28)}

/* ---------- Tasten (Grundform aus dem Logo) ---------- */
.kc{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-width:28px;height:28px;padding:0 8px;border-radius:7px;font-family:var(--f-display);font-size:13px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--paper);color:var(--ink);border:1px solid var(--line-2);box-shadow:0 2px 0 var(--line-2)}
.kc-sm{min-width:22px;height:22px;padding:0 6px;border-radius:6px;font-size:11.5px}
.kc-lg{min-width:40px;height:40px;padding:0 12px;border-radius:10px;font-size:15px}
.kc-xl{min-width:56px;height:56px;padding:0 16px;border-radius:13px;font-size:20px}
.kc-blue{background:var(--q-blue);color:#fff;border-color:var(--q-blue-hover);box-shadow:0 2px 0 var(--q-blue-edge)}
.kc-black{background:var(--black);color:#fff;border-color:var(--black);box-shadow:0 2px 0 rgba(11,13,18,.32)}
.kc-dark{background:var(--ink-3);color:#fff;border-color:var(--ink-4);box-shadow:0 2px 0 #000}
.kc-white{background:#fff;color:var(--q-blue);border-color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.22)}

/* ---------- Buttons: jeder Button ist eine Taste ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 22px;border-radius:13px;border:1px solid transparent;font-family:var(--f-text);font-size:16px;font-weight:700;line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;transition:transform .14s var(--ease),box-shadow .14s var(--ease),background-color .2s ease,border-color .2s ease,color .2s ease}
.btn svg{flex:none}
.btn-sm{height:42px;padding:0 16px;border-radius:11px;font-size:15px}
.btn-primary{background:var(--q-blue);border-color:var(--q-blue-hover);color:#fff;box-shadow:0 3px 0 var(--q-blue-edge)}
.btn-ink{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 3px 0 #000}
.btn-ghost{background:var(--paper);border-color:var(--line-2);color:var(--ink);box-shadow:0 3px 0 var(--line-2)}
.btn-white{background:#fff;border-color:#fff;color:var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.24)}
.btn-line-light{background:transparent;border-color:rgba(255,255,255,.45);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.24)}
.btn-dark{background:var(--ink-3);border-color:var(--ink-4);color:#fff;box-shadow:0 3px 0 #000}
@media (hover:hover){
  .btn:hover{transform:translateY(1px)}
  .btn-primary:hover{background:var(--q-blue-hover);color:#fff;box-shadow:0 2px 0 var(--q-blue-edge)}
  .btn-ink:hover{color:#fff;box-shadow:0 2px 0 #000}
  .btn-ghost:hover{color:var(--ink);border-color:var(--ink);box-shadow:0 2px 0 var(--ink)}
  .btn-white:hover{color:var(--ink);box-shadow:0 2px 0 rgba(0,0,0,.24)}
  .btn-line-light:hover{color:#fff;border-color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.24)}
  .btn-dark:hover{color:#fff;box-shadow:0 2px 0 #000}
}
.btn:active{transform:translateY(3px);box-shadow:none}
/* statische Zustände für das Design-System-Board */
.btn-primary.is-hover{background:var(--q-blue-hover);transform:translateY(1px);box-shadow:0 2px 0 var(--q-blue-edge)}
.btn-ghost.is-hover{border-color:var(--ink);transform:translateY(1px);box-shadow:0 2px 0 var(--ink)}
.btn-ink.is-hover{transform:translateY(1px);box-shadow:0 2px 0 #000}
.btn.is-active{transform:translateY(3px);box-shadow:none}
.btn.is-focus{outline:2px solid var(--q-blue);outline-offset:3px}
.btn.is-disabled,.btn:disabled{background:var(--fog);border-color:var(--line);color:#7A8394;box-shadow:none;cursor:not-allowed;transform:none}

.lnk{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);transition:color .2s ease}
.lnk .ar{transition:transform .2s var(--ease)}
@media (hover:hover){.lnk:hover{color:var(--q-blue)}.lnk:hover .ar{transform:translateX(3px)}}
.dark .lnk{color:#fff}
@media (hover:hover){.dark .lnk:hover{color:var(--q-blue-300)}}

.tag{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:8px;background:var(--mist);border:1px solid var(--line);font-family:var(--f-text);font-size:13px;font-weight:600;color:var(--slate-2);white-space:nowrap}
.dark .tag{background:var(--ink-3);border-color:var(--ink-4);color:#D5D9E2}
.tags{display:flex;flex-wrap:wrap;gap:6px}

.status{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:8px;font-family:var(--f-text);font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;white-space:nowrap}
.status::before{content:"";flex:none;width:7px;height:7px;border-radius:2px}
.st-live{background:var(--q-blue-50);color:var(--q-blue)}
.st-live::before{background:var(--q-blue)}
.st-pilot{background:var(--mist);color:var(--ink);border:1px solid var(--line)}
.st-pilot::before{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);border:1px solid var(--ink)}
.st-dev{background:transparent;color:var(--slate-2);border:1px dashed var(--line-2)}
.st-dev::before{border:1px dashed var(--slate-2)}
.dark .st-live{background:rgba(122,162,255,.14);color:var(--q-blue-300)}
.dark .st-live::before{background:var(--q-blue-300)}
.dark .st-pilot{background:rgba(255,255,255,.08);color:#fff;border-color:transparent}
.dark .st-pilot::before{background:linear-gradient(90deg,#fff 50%,transparent 50%);border-color:#fff}
.dark .st-dev{color:var(--on-dark-2);border-color:rgba(255,255,255,.3)}
.dark .st-dev::before{border-color:var(--on-dark-2)}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.nav-logo{display:flex;align-items:center;flex:none}
.nav-logo img{height:28px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-a{position:relative;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:10px;font-size:15px;font-weight:600;color:var(--slate-2);white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.nav-a svg{opacity:.65;transition:transform .2s var(--ease)}
@media (hover:hover){.nav-a:hover{background:var(--mist);color:var(--ink)}}
.nav-a[aria-current="page"]{color:var(--ink)}
.nav-a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-16px;height:2px;background:var(--q-blue)}
.nav-r{display:flex;align-items:center;gap:8px}
.nav-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 2px 0 var(--line-2)}
.nav-dd{position:relative}
.mega-wrap{position:absolute;left:-14px;top:100%;padding-top:16px;display:none;z-index:60}
.nav-dd:hover .mega-wrap,.nav-dd:focus-within .mega-wrap{display:block}
.nav-dd:hover>.nav-a svg,.nav-dd:focus-within>.nav-a svg{transform:rotate(180deg)}
.mega{width:min(900px,calc(100cqi - 48px));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.95fr);gap:6px;padding:12px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:0 30px 60px -30px rgba(11,13,18,.35)}
.mega-col{display:flex;flex-direction:column;gap:2px}
.mega-col-alt{padding:14px;border-radius:14px;background:var(--mist);gap:6px}
.mega-i{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:14px;transition:background-color .2s ease}
@media (hover:hover){.mega-i:hover{background:var(--mist)}.mega-col-alt .mega-i:hover{background:#fff}}
.mega-i b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.mega-i span.d{display:block;margin-top:2px;font-size:13.5px;line-height:1.45;color:var(--slate)}
/* Sprachumschalter: in der Leiste nur am Desktop, sonst im mobilen Menü */
.nav-lang{padding:0 10px;gap:7px}
.mnav-lang svg{width:22px;height:22px;color:var(--slate)}
@container sq (max-width:1080px){.nav-links,.nav-contact,.nav-lang{display:none}.nav-burger{display:inline-flex}}
@container sq (max-width:520px){.nav-cta{display:none}}

/* Mobiles Menü (geöffneter Zustand) */
.mnav{display:flex;flex-direction:column;min-height:100%;background:#fff}
.mnav-sec{padding:8px var(--gutter) 0}
.mnav-a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;border-bottom:1px solid var(--line);font-family:var(--f-display);font-weight:600;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.mnav-sub{display:flex;align-items:center;gap:12px;min-height:48px;font-size:16px;font-weight:600;color:var(--slate-2)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding-top:clamp(36px,4.6cqi,68px);padding-bottom:clamp(48px,6cqi,96px)}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;color:var(--slate)}
.hero-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.hero-tags li+li::before{content:"";display:inline-block;width:5px;height:5px;margin:0 12px 2px;border-radius:1.5px;background:var(--line-2)}
.hero-title{margin-top:clamp(32px,4.4cqi,68px)}
.hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 64px;margin-top:clamp(28px,3cqi,44px)}
.hero-row>.t-lead{flex:1 1 440px;max-width:560px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-fig{margin-top:clamp(48px,5.4cqi,80px)}

/* ---------- Figur: Q-Pipeline ---------- */
.fig{position:relative;border:1px solid var(--line);border-radius:var(--r-xl);background:#fff;overflow:hidden}
.fig-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:14px 16px 14px 22px;border-bottom:1px solid var(--line)}
.fh-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.fh-title b{font-family:var(--f-display);font-weight:600;font-size:18px;letter-spacing:-.015em;color:var(--ink)}
.fh-title .s{font-size:14.5px;color:var(--slate)}
.fig-ctl{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--line-2);background:#fff;color:var(--ink);font-size:13.5px;font-weight:700;cursor:pointer;box-shadow:0 2px 0 var(--line-2);transition:transform .12s ease,box-shadow .12s ease}
.fig-ctl:active{transform:translateY(2px);box-shadow:none}
.fig-body{padding:26px 24px 24px;overflow-x:auto}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:13.5px;font-weight:700;color:var(--slate)}
.legend-i{display:inline-flex;align-items:center;gap:8px}
.lg-agent{width:16px;height:12px;border:1.5px dashed var(--slate);border-radius:4px}
.lg-eng{width:16px;height:12px;background:var(--ink);border-radius:4px}

.pipe{position:relative;display:grid;grid-template-columns:104px repeat(6,minmax(112px,1fr));grid-template-rows:repeat(4,auto);row-gap:14px}
.pipe.no-lane{grid-template-columns:repeat(var(--n,6),minmax(112px,1fr))}
.lane{display:grid;grid-row:1 / span 4;grid-column:1;grid-template-rows:subgrid;padding-right:14px}
.lane>span{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--slate)}
.lane .la::before{content:"";flex:none;width:14px;height:11px;border:1.5px dashed var(--slate);border-radius:3px}
.lane .le::before{content:"";flex:none;width:14px;height:11px;background:var(--ink);border-radius:3px}
.ps{position:relative;display:grid;grid-row:1 / span 4;grid-template-rows:subgrid;padding:0 10px;min-width:0}
.ps-head{display:flex;align-items:baseline;gap:8px;min-width:0;color:var(--ink);transition:color .3s ease}
.ps-num{font-family:var(--f-display);font-weight:600;font-size:13px;color:var(--q-blue);font-variant-numeric:tabular-nums}
.ps-name{font-family:var(--f-display);font-weight:600;font-size:18px;letter-spacing:-.015em;white-space:nowrap}
.chip-a{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;min-height:50px;padding:9px 12px;border:1.5px dashed var(--line-2);border-radius:12px;background:#fff;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--slate-2);transition:border-color .3s ease,background-color .3s ease,color .3s ease}
.chip-a::before{content:"";flex:none;width:10px;height:10px;border:1.5px solid currentColor;border-radius:3px;opacity:.75;transition:all .25s var(--ease)}
.chip-a .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--q-blue)}
.chip-e{display:flex;align-items:center;gap:10px;min-height:50px;padding:9px 12px;border-radius:12px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:700;line-height:1.3;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease}
.chip-e::before{content:"";flex:none;width:10px;height:10px;background:currentColor;border-radius:3px}
.ps-track{position:relative;height:40px;margin:0 -10px}
.ps-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--line);transition:background-color .4s ease}
.ps-node{position:absolute;z-index:2;left:22px;top:50%;width:12px;height:12px;margin-top:-6px;border:2px solid var(--line-2);border-radius:3px;background:#fff;transition:background-color .3s ease,border-color .3s ease}
.ps-gate{position:absolute;right:-17px;top:50%;z-index:4;width:34px;height:34px;min-width:34px;padding:0;border-radius:9px;font-size:15px;transform:translateY(-50%);color:var(--muted-ui);transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .15s ease,box-shadow .15s ease}
.gk{position:absolute;right:-8px;top:-8px;display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--ok);color:#fff;box-shadow:0 0 0 2px #fff,0 3px 8px -2px rgba(14,159,110,.55);opacity:0;transform:scale(.3);transition:opacity .2s ease,transform .3s var(--ease)}
.ps-loop{position:absolute;right:6px;top:50%;width:24px;height:24px;margin-top:-12px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:var(--slate);box-shadow:0 0 0 1.5px var(--line-2)}
/* Zustände: is-wait · is-agent · is-eng · is-gate · is-done */
.ps.is-wait .ps-head{color:var(--muted-ui)}
.ps.is-wait .ps-num{color:var(--muted-ui)}
.ps.is-wait .chip-a{color:var(--muted-ui)}
.ps.is-wait .chip-e{background:var(--fog);color:var(--muted-ui)}
.ps.is-agent .chip-a{border-color:var(--q-blue);border-style:solid;background:var(--q-blue-50);color:var(--ink)}
.ps.is-agent .chip-a .bar{animation:q-work .9s linear forwards}
.ps.is-agent .chip-e{background:var(--fog);color:var(--muted-ui)}
.ps.is-eng .chip-e{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--q-blue)}
.ps.is-eng .chip-a::before,.ps.is-gate .chip-a::before,.ps.is-done .chip-a::before{width:10px;height:6px;border:0;border-left:2px solid var(--q-blue);border-bottom:2px solid var(--q-blue);border-radius:0;opacity:1;transform:rotate(-45deg) translate(1px,-2px)}
.ps.is-agent .ps-node,.ps.is-eng .ps-node,.ps.is-gate .ps-node,.ps.is-done .ps-node{background:var(--ink);border-color:var(--ink)}
.ps.is-done .ps-track::before,.ps.is-gate .ps-track::before{background:var(--q-blue)}
.ps.is-gate .ps-gate{background:var(--q-blue);border-color:var(--q-blue-hover);color:#fff;transform:translateY(calc(-50% + 2px));box-shadow:0 0 0 var(--q-blue-edge),0 0 0 7px rgba(3,78,240,.14)}
.ps.is-done .ps-gate{background:var(--q-blue);border-color:var(--q-blue-hover);color:#fff;box-shadow:0 2px 0 var(--q-blue-edge)}
.ps.is-done .gk{opacity:1;transform:scale(1)}
@keyframes q-work{from{width:0}to{width:100%}}
/* Läufer: das Feature wandert durch die Pipeline */
/* absolut positioniert: liegt über Zeile 3, belegt aber keine Grid-Zellen –
   sonst schiebt das Auto-Placement die Phasen in zusätzliche Spalten */
.pipe-run{grid-column:2 / -1;grid-row:3 / 4;position:absolute;inset:0;pointer-events:none}
.pipe.no-lane .pipe-run{grid-column:1 / -1}
.pr-fill{position:absolute;z-index:1;left:0;top:50%;height:2px;margin-top:-1px;background:var(--q-blue);transition:width .7s var(--ease),opacity .3s ease}
.pr-token{position:absolute;z-index:5;left:0;top:50%;display:flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 8px;border-radius:8px;background:var(--q-blue);color:#fff;font-family:var(--f-display);font-weight:600;font-size:12.5px;white-space:nowrap;transform:translate(-50%,-50%);box-shadow:0 2px 0 var(--q-blue-edge),0 10px 24px -10px rgba(3,78,240,.7);transition:left .7s var(--ease),opacity .3s ease}
.pr-token::before{content:"";width:8px;height:8px;border-radius:2px;background:#fff}
.pipe-run.is-reset .pr-token,.pipe-run.is-reset .pr-fill{transition:none;opacity:0}
.pipe-run.is-out .pr-token,.pipe-run.is-out .pr-fill{opacity:0}
@container sq (max-width:960px){
  .pipe{grid-template-columns:repeat(6,minmax(100px,1fr))}
  .lane{display:none}
  .pipe-run{grid-column:1 / -1}
  .chip-a,.chip-e{font-size:12.5px;padding:8px 10px}
}
@container sq (max-width:720px){
  .fig-body{padding:22px 18px 18px}
  .pipe,.pipe.no-lane{grid-template-columns:1fr;grid-template-rows:none;row-gap:0}
  .lane,.pipe-run{display:none}
  .ps{grid-row:auto;grid-column:auto;grid-template-columns:34px minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:8px;padding:0 0 28px}
  .ps-head{grid-column:2 / 4;grid-row:1}
  .ps .chip-a,.ps .art{grid-column:2;grid-row:2}
  .ps + .ps::before{display:none}
  .ps .chip-e{grid-column:3;grid-row:2}
  .ps-track{grid-column:1;grid-row:1 / 3;height:auto;margin:0 0 -28px}
  .ps-track::before{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto;margin:0 0 0 -1px}
  .ps-node{left:50%;top:7px;margin:0 0 0 -6px}
  .ps-gate{right:auto;top:auto;left:50%;bottom:0;transform:translateX(-50%)}
  .ps.is-gate .ps-gate{transform:translate(-50%,2px)}
  .ps-loop{right:auto;left:50%;top:auto;bottom:-4px;margin:0 0 0 -12px}
  .ps:last-child .ps-track{margin-bottom:0}
}

/* ---------- Q-Pipeline: Artefakte der Agenten ----------
   Zustände kommen als Klasse aus dem Seiten-Script (is-wait · is-agent ·
   is-eng · is-gate · is-done). Pro Phase liefert der Agent einen Entwurf,
   der Engineer prüft, das Q-Gate gibt frei – dann steht „geprüft“ dran. */
.art{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:11px 11px 12px;border-radius:12px;border:1px solid var(--line);background:#fff;transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease,opacity .3s ease}
.art-h{display:flex;align-items:center;gap:7px;min-width:0}
.art-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:var(--q-blue-50);color:var(--q-blue)}
.art-h b{min-width:0;font-size:13px;font-weight:800;line-height:1.2;color:var(--ink)}
.art-f{display:flex;margin-top:auto}
.art-st{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:800;line-height:1;white-space:nowrap}
.art-st.s-draft{border:1px dashed var(--line-2);color:var(--slate)}
.art-st.s-ok{display:none;background:var(--ok-50);color:var(--ok-ink)}
.art-st.s-ok::before{content:"";width:8px;height:4px;margin-top:-3px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.art-v{display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:30px}
.art-v.lines i{display:block;height:5px;width:var(--w,100%);border-radius:3px;background:var(--fog);transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--ease)}
.art-v.lines i:nth-child(2){transition-delay:.1s}
.art-v.lines i:nth-child(3){transition-delay:.2s}
.art-v.diff i.add{background:rgba(3,78,240,.3)}
.art-v.diff i.del{background:var(--line-2)}
.art-v.ab{flex-direction:row;gap:6px}
.art-v.ab span{flex:1;display:flex;align-items:center;justify-content:center;height:30px;border-radius:7px;border:1px dashed var(--line-2);background:#fff;font-family:var(--f-display);font-weight:600;font-size:13px;color:var(--muted-ui);transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.art-v.tests{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}
.art-v.tests i{display:block;aspect-ratio:1;border-radius:2px;background:var(--fog);transition:background-color .25s ease}
.art-v.tests i:nth-child(n+5){transition-delay:.1s}
.art-v.tests i:nth-child(n+9){transition-delay:.2s}
.art-v.tests i:nth-child(n+13){transition-delay:.3s}
.art-v.spark svg{display:block;width:100%;height:auto}
.art-v.spark polyline{stroke:var(--line-2);transition:stroke .4s ease}
.art .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--q-blue)}
.ps.is-wait .art{opacity:.55}
.ps.is-agent .art{border-color:var(--q-blue);background:var(--q-blue-50);box-shadow:0 0 0 3px rgba(3,78,240,.1)}
.ps.is-agent .art .bar{animation:q-work .7s linear forwards}
.ps.is-agent .art-v.lines i,.ps.is-eng .art-v.lines i,.ps.is-gate .art-v.lines i,.ps.is-done .art-v.lines i{transform:scaleX(1)}
.ps.is-agent .art-v.ab span,.ps.is-eng .art-v.ab span,.ps.is-gate .art-v.ab span,.ps.is-done .art-v.ab span{border-color:var(--q-blue-100);color:var(--slate-2)}
.ps.is-gate .art-v.ab span:last-child,.ps.is-done .art-v.ab span:last-child{border-style:solid;border-color:var(--q-blue);background:var(--q-blue);color:#fff}
.ps.is-agent .art-v.tests i,.ps.is-eng .art-v.tests i,.ps.is-gate .art-v.tests i,.ps.is-done .art-v.tests i{background:var(--q-blue)}
.ps.is-agent .art-v.spark polyline,.ps.is-eng .art-v.spark polyline,.ps.is-gate .art-v.spark polyline,.ps.is-done .art-v.spark polyline{stroke:var(--q-blue)}
.ps.is-gate .art .s-draft,.ps.is-done .art .s-draft{display:none}
.ps.is-gate .art .s-ok,.ps.is-done .art .s-ok{display:inline-flex}
.lane>span{flex-wrap:wrap;row-gap:0;align-content:center}
.lane>span small{display:block;flex-basis:100%;margin:2px 0 0 22px;font-size:12px;font-weight:600;color:var(--muted-ui)}
.lane>.lq small{margin-left:30px}
/* Übergabe zwischen den Entwürfen – wird blau, sobald die Phase davor freigegeben ist.
   Absolut im Grid-Bereich, damit der Pfeil keine Zelle belegt. */
.ps + .ps::before{content:"";position:absolute;grid-row:2 / 3;grid-column:1 / 2;left:-15px;top:50%;width:7px;height:7px;margin-top:-5px;border-top:2px solid var(--line-2);border-right:2px solid var(--line-2);transform:rotate(45deg);transition:border-color .3s ease}
.ps.is-done + .ps::before{border-color:var(--q-blue)}

/* ---------- Lichtfeld: blauer Schimmer mit Körnung ----------
   Hinter Heros und Abschlussflächen. Drei weiche Lichtquellen im Logo-Blau,
   langsam driftend, darüber eine feine Körnung. Nie hinter Fließtext-Spalten
   allein, nie als Textverlauf. */
.has-aura{position:relative;overflow:hidden;isolation:isolate}
.has-aura>.wrap,.has-aura>.gridlines{position:relative;z-index:1}
.has-aura>.gridlines{position:absolute}
/* Ränder laufen weich aus: keine harte Kante zum Nachbarabschnitt */
.aura{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 74%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 74%,transparent 100%)}
.aura.open-top{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 100%)}
.aura i{position:absolute;display:block;border-radius:50%;will-change:transform}
.aura .l1{width:min(1180px,92cqi);aspect-ratio:1;right:-20%;top:-34%;background:radial-gradient(closest-side,rgba(3,78,240,.22),rgba(3,78,240,.09) 46%,rgba(3,78,240,0));animation:aura-a 26s ease-in-out infinite alternate}
.aura .l2{width:min(920px,72cqi);aspect-ratio:1;left:-24%;top:-14%;background:radial-gradient(closest-side,rgba(122,162,255,.26),rgba(122,162,255,0));animation:aura-b 34s ease-in-out infinite alternate}
.aura .l3{width:min(760px,58cqi);aspect-ratio:1;left:34%;bottom:-26%;background:radial-gradient(closest-side,rgba(52,110,255,.17),rgba(52,110,255,0));animation:aura-c 40s ease-in-out infinite alternate}
.aura .gr{inset:0;border-radius:0;background:url(/assets/img/grain.png) repeat;background-size:180px 180px;opacity:.5;will-change:auto}
.aura-dark .l1{background:radial-gradient(closest-side,rgba(3,78,240,.55),rgba(3,78,240,.18) 50%,rgba(3,78,240,0))}
.aura-dark .l2{background:radial-gradient(closest-side,rgba(122,162,255,.22),rgba(122,162,255,0))}
.aura-dark .l3{background:radial-gradient(closest-side,rgba(3,78,240,.35),rgba(3,78,240,0))}
.aura-dark .gr{opacity:.42}
.aura-blue .l1{background:radial-gradient(closest-side,rgba(255,255,255,.26),rgba(255,255,255,0))}
.aura-blue .l2{background:radial-gradient(closest-side,rgba(2,30,110,.55),rgba(2,30,110,0))}
.aura-blue .l3{background:radial-gradient(closest-side,rgba(122,162,255,.5),rgba(122,162,255,0))}
.aura-blue .gr{opacity:.5}
.aura.still i{animation:none}
.aura.mirror{transform:scaleX(-1)}
@keyframes aura-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-7%,9%,0) scale(1.14)}}
@keyframes aura-b{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(11%,-7%,0) scale(1.1)}}
@keyframes aura-c{from{transform:translate3d(0,0,0) scale(1.06)}to{transform:translate3d(-9%,-12%,0) scale(.94)}}
.bg-sky{background:var(--sky)}
.bg-sky-fade{background:linear-gradient(180deg,var(--sky) 0%,#fff 92%)}
/* Sky-Flächen ohne harte Kante: oben (und unten) weich aus dem Weiß heraus */
.bg-sky-soft{background:linear-gradient(180deg,#fff 0,var(--sky) 200px,var(--sky) calc(100% - 200px),#fff 100%)}
.bg-sky-in{background:linear-gradient(180deg,#fff 0,var(--sky) 200px,var(--sky) 100%)}

/* ---------- Fakten-Leiste ---------- */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{padding:26px 24px 28px;border-left:1px solid var(--line)}
.fact:first-child{border-left:0;padding-left:0}
.fact-k{font-family:var(--f-display);font-weight:600;font-size:clamp(21px,2cqi,28px);line-height:1.1;letter-spacing:-.025em}
.fact-v{margin-top:10px;font-size:16.5px;line-height:1.5;color:var(--slate)}
.fact-ic{display:flex;align-items:center;gap:8px;height:44px;margin-bottom:20px}
.fact-ic .kc-lg{min-width:44px;height:44px;border-radius:12px;font-size:19px}
.fact-ic .kc-lg svg{width:23px;height:23px}
.fact-apps{gap:0}
.fact-apps .kc-lg{padding:0;box-shadow:0 0 0 3px #fff,0 2px 0 3px var(--line-2)}
.fact-apps .kc+.kc{margin-left:-10px}
.fact-apps img{display:block;width:26px;height:26px}
.flag{display:block;width:42px;height:28px;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px rgba(11,13,18,.14),0 2px 0 var(--line-2)}
.flag svg{display:block;width:100%;height:100%}
@container sq (max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.fact:nth-child(3){border-left:0;padding-left:0}.fact:nth-child(n+3){border-top:1px solid var(--line)}}
@container sq (max-width:520px){.facts{grid-template-columns:1fr}.fact{border-left:0;padding-left:0}.fact+.fact{border-top:1px solid var(--line)}}

/* ---------- Leistungs-Index ---------- */
.svc-list{border-top:1px solid var(--ink)}
.svc{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.05fr) 44px;gap:18px 32px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);color:var(--ink);transition:background-color .25s ease,padding .3s var(--ease)}
.svc-name{display:block;font-family:var(--f-display);font-weight:600;font-size:clamp(25px,2.7cqi,38px);line-height:1.06;letter-spacing:-.03em;transition:color .2s ease}
.svc-b{display:block}
.svc-desc{display:block;font-size:16px;line-height:1.55;color:var(--slate)}
.svc-b .tags{margin-top:12px}
.svc-go{justify-self:end;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);color:var(--ink);transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s var(--ease)}
@media (hover:hover){
  .svc:hover{background:var(--mist);padding-inline:20px}
  .svc:hover .svc-name{color:var(--q-blue)}
  .svc:hover .svc-go{background:var(--q-blue);border-color:var(--q-blue);color:#fff;transform:rotate(-45deg)}
}
@container sq (max-width:860px){
  .svc{grid-template-columns:44px minmax(0,1fr) 40px;gap:12px 16px;padding:22px 0;align-items:start}
  .svc>.kc{grid-column:1;grid-row:1}
  .svc-h{grid-column:2;grid-row:1}
  .svc-b{grid-column:2 / 4;grid-row:2}
  .svc-go{grid-column:3;grid-row:1;width:40px;height:40px}
}
@container sq (max-width:520px){.svc-b{grid-column:1 / 4}}

.offers{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:40px}
.offers-h{display:flex;flex-direction:column;justify-content:center;gap:10px}
.offer{display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;color:var(--ink);transition:border-color .2s ease,transform .25s var(--ease)}
@media (hover:hover){.offer:hover{border-color:var(--ink);transform:translateY(-2px)}}
.offer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;color:var(--slate)}
.offer-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:auto;padding-top:14px;border-top:1px dashed var(--line-2);color:var(--slate)}
@container sq (max-width:900px){.offers{grid-template-columns:repeat(2,minmax(0,1fr))}.offers-h{grid-column:1 / -1}}
@container sq (max-width:600px){.offers{grid-template-columns:1fr}}

/* ---------- shift + Q (Maßzeichnung des Logos) ---------- */
.spec{position:relative;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);padding:clamp(28px,5cqi,80px) clamp(20px,5cqi,80px)}
.spec .reg-tl{left:16px;top:16px}.spec .reg-tr{right:16px;top:16px}.spec .reg-bl{left:16px;bottom:16px}.spec .reg-br{right:16px;bottom:16px}
.spec-in{max-width:820px;margin:0 auto}
.spec-logo img{width:100%;height:auto}
.spec-ann{display:grid;grid-template-columns:63.1fr 30.7fr;column-gap:1.6%;margin:18px 2.4% 0 2.2%}
.dim{position:relative;height:15px;border-left:1.5px solid var(--ink);border-right:1.5px solid var(--ink)}
.dim::before{content:"";position:absolute;left:0;right:0;top:7px;height:1.5px;background:var(--ink)}
.dim>span{position:absolute;left:50%;top:-2px;transform:translateX(-50%);padding:0 10px;background:#fff;font-family:var(--f-display);font-weight:600;font-size:14px;line-height:18px;color:var(--ink)}
.ann{padding-top:22px}
.ann h3{margin-bottom:8px}
.ann p{color:var(--slate);font-size:16px;line-height:1.55;max-width:420px}
.ann .kc{display:none;margin-bottom:14px}
@container sq (max-width:700px){
  .spec-ann{grid-template-columns:1fr;margin:24px 0 0;row-gap:28px}
  .dim{display:none}
  .ann{padding-top:0}
  .ann .kc{display:inline-flex}
}
.principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);margin-top:clamp(48px,5cqi,72px)}
.pr{padding:24px 24px 4px 0}
.pr+.pr{padding-left:24px;border-left:1px solid var(--line)}
.pr-n{display:block;font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--q-blue)}
.pr h3{margin-top:14px}
.pr p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--slate)}
@container sq (max-width:980px){.principles{grid-template-columns:repeat(2,minmax(0,1fr))}.pr:nth-child(3){padding-left:0;border-left:0}.pr:nth-child(n+3){border-top:1px solid var(--line);padding-top:24px;margin-top:12px}}
@container sq (max-width:560px){.principles{grid-template-columns:1fr}.pr,.pr+.pr{padding-left:0;border-left:0}.pr+.pr{border-top:1px solid var(--line);margin-top:12px}}

/* ---------- Rollen: Mensch + Agent als Spur ---------- */
.roles{border-top:1px solid var(--ink)}
.roles-h,.role{display:grid;grid-template-columns:200px minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,.85fr);align-items:center;column-gap:0}
.roles-h{padding:16px 0 12px;font-size:13.5px;font-weight:700;color:var(--slate)}
.roles-h>span{display:inline-flex;align-items:center;gap:8px}
.role{padding:12px 0;border-top:1px solid var(--line)}
.role-t{font-family:var(--f-display);font-weight:600;font-size:20px;letter-spacing:-.015em}
.role .chip-a,.role .chip-e{min-height:46px}
.role-ar{position:relative;height:2px;margin:0 8px;background:var(--line-2)}
.role-ar::after{content:"";position:absolute;right:-1px;top:50%;width:7px;height:7px;margin-top:-4px;border-top:2px solid var(--line-2);border-right:2px solid var(--line-2);transform:rotate(45deg)}
.role-q{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700}
.dark .roles{border-top-color:#fff}
.dark .roles-h{color:var(--on-dark-2)}
.dark .role{border-top-color:var(--line-dark)}
.dark .chip-a{background:transparent;border-color:rgba(255,255,255,.34);color:#E7EAF0}
.dark .chip-e{background:#fff;color:var(--ink)}
.dark .role-ar{background:rgba(255,255,255,.3)}
.dark .role-ar::after{border-color:rgba(255,255,255,.3)}
.dark .lg-agent{border-color:rgba(255,255,255,.7)}
.dark .lg-eng{background:#fff}
@container sq (max-width:860px){
  .roles-h{display:none}
  .role{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:18px 0}
  .role-t{grid-column:1 / -1}
  .role-ar{display:none}
  .role-q{grid-column:1 / -1}
}
@container sq (max-width:480px){.role{grid-template-columns:1fr}}

/* ---------- Zusagen: große Zahlen statt Textblöcke ---------- */
.promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #fff}
.pm{padding:30px 28px 6px 0}
.pm+.pm{padding-left:28px;border-left:1px solid var(--line-dark)}
.pm-n{display:block;font-family:var(--f-display);font-weight:600;font-size:clamp(60px,8.4cqi,128px);line-height:.88;letter-spacing:-.055em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pm-n .u{color:var(--q-blue-300)}
.pm p{margin-top:18px;max-width:300px;font-size:18px;line-height:1.45;color:var(--on-dark-2)}
.pm p b{color:#fff}
@container sq (max-width:760px){.promises{grid-template-columns:1fr}.pm,.pm+.pm{padding:26px 0 18px}.pm+.pm{border-left:0;border-top:1px solid var(--line-dark)}}

/* ---------- Matrix (Tabelle, für Detailseiten) ---------- */
.mx{width:100%;border-collapse:collapse}
.mx th,.mx td{text-align:left;vertical-align:top}
.mx thead th{padding:0 24px 14px 0;border-bottom:1px solid var(--line-dark);font-size:13.5px;font-weight:700;color:var(--on-dark-2);white-space:nowrap}
.mx thead th>span{display:inline-flex;align-items:center;gap:9px}
.mx tbody th,.mx tbody td{padding:20px 24px 20px 0;border-bottom:1px solid var(--line-dark);font-size:15px;line-height:1.5}
.mx-task{font-family:var(--f-display);font-weight:600;font-size:20px!important;letter-spacing:-.015em;color:#fff;white-space:nowrap;width:18%}
.mx-agent{color:var(--on-dark-2);width:30%}
.mx-eng{color:#fff;font-weight:700;width:30%}
.mx-gate{width:22%}
.mx-gate>span{display:inline-flex;align-items:center;gap:10px;color:#fff}
.mx-k{display:inline-block;width:14px;height:11px;border-radius:3px}
.mx-k.agent{border:1.5px dashed rgba(255,255,255,.6)}
.mx-k.eng{background:#fff}
.mx-note{display:flex;align-items:center;gap:12px;margin-top:26px;color:var(--on-dark-2);font-size:15px}
@container sq (max-width:760px){
  .mx thead{display:none}
  .mx,.mx tbody,.mx tr,.mx th,.mx td{display:block;width:100%!important}
  .mx tr{padding:18px 0;border-bottom:1px solid var(--line-dark)}
  .mx tbody th,.mx tbody td{border:0;padding:5px 0}
  .mx td[data-l]::before{content:attr(data-l);display:block;margin-bottom:2px;font-size:13px;font-weight:700;color:var(--on-dark-2)}
}

/* ---------- Vorgehen ---------- */
.phases{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.ph{padding-right:22px}
.ph-top{display:flex;align-items:center;margin-bottom:22px}
.ph-line{flex:1;height:2px;margin:0 10px;background:var(--line)}
.ph:last-child .ph-line,.ph:last-child .ph-top>.kc-blue{display:none}
.ph p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--slate)}
.ph .tag{margin-top:16px}
@container sq (max-width:980px){.phases{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));row-gap:36px}.ph-line,.ph-top>.kc-blue{display:none}}

/* ---------- Modelle der Zusammenarbeit ---------- */
.models{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.model{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:10px;padding:28px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.model-ic{justify-self:start;align-self:start;min-width:48px;height:48px;padding:0;border-radius:12px;margin-bottom:12px}
.model-ic svg{width:24px;height:24px}
.model p{color:var(--slate);font-size:16px;line-height:1.55}
.model-fit{padding-top:16px;border-top:1px solid var(--line);font-size:15px}
.model p:has(+ .model-fit){margin-bottom:8px}
.model-fit b{color:var(--ink);font-weight:600}
/* „Der Code gehört Ihnen“: Q-Taste + Aussage, schließt das Modell-Raster ab */
.own{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:16px;padding:22px 28px;border-radius:var(--r-lg);border:1px solid rgba(3,78,240,.16);background:radial-gradient(120% 160% at 0% 50%,rgba(3,78,240,.12),rgba(3,78,240,0) 55%),var(--q-blue-50);color:var(--ink)}
.own-key{display:inline-flex;align-items:center;justify-content:center;flex:none;width:58px;height:58px;border-radius:15px;background:var(--q-blue);border:1px solid var(--q-blue-hover);box-shadow:0 4px 0 var(--q-blue-edge),0 16px 26px -14px rgba(3,78,240,.7);color:#fff;font-family:var(--f-display);font-size:27px;font-weight:600;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.own-t{display:flex;flex-direction:column;gap:2px;flex:1 1 220px;margin:0}
.own-t b{font-family:var(--f-display);font-size:clamp(21px,2.4cqi,28px);font-weight:600;line-height:1.15;letter-spacing:-.02em}
.own-t span{font-size:15.5px;color:var(--slate)}
.own .tags{margin:0}
.own .tag{background:#fff}
@media (hover:hover){.own:hover .own-key{transform:translateY(3px);box-shadow:0 1px 0 var(--q-blue-edge),0 8px 16px -12px rgba(3,78,240,.7)}}
@media (prefers-reduced-motion:reduce){.own-key{transition:none}}
/* Startseite: sechs Modelle im 3er-Raster */
.models-6{grid-template-columns:repeat(3,minmax(0,1fr))}
@container sq (max-width:980px){.models-6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container sq (max-width:600px){.models-6{grid-template-columns:1fr}}
/* Referenzen (dunkler Abschnitt, weiße Kundenlogos) */
.refs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@container sq (max-width:1080px){.refs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container sq (max-width:600px){.refs{grid-template-columns:1fr}}
.ref{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:var(--r-lg);background:var(--ink-2);border:1px solid var(--line-dark)}
.ref-logo{height:38px;width:auto;max-width:190px;margin-bottom:14px;object-fit:contain;object-position:left center}
.ref .t-label{color:var(--q-blue-300)}
.ref p{font-size:16.5px;line-height:1.55;color:var(--on-dark-2)}
.ref .tags{margin-top:auto;padding-top:6px}
/* Kundenlogos als Laufband über die volle Breite, an den Rändern ein- und ausgeblendet */
.logos{position:relative;margin-top:clamp(48px,6cqi,80px)}
.logos-l{margin-bottom:26px;text-align:center;font-size:15px;font-weight:600;color:var(--on-dark-2)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 68s linear infinite}
.marquee-group{display:flex;flex:none;align-items:center;gap:clamp(48px,6cqi,88px);padding-right:clamp(48px,6cqi,88px)}
.marquee-group img{flex:none;height:clamp(28px,3cqi,38px);width:auto;opacity:.8}
.marquee-group img.is-tall{height:clamp(42px,4.4cqi,54px)}
.marquee-group img.is-sm{height:clamp(22px,2.4cqi,30px)}
@media (hover:hover){.marquee:hover .marquee-track{animation-play-state:paused}}
@keyframes marquee{to{transform:translateX(calc(-100% / 3))}}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{display:block;animation:none;width:auto}
  .marquee-group{flex-wrap:wrap;justify-content:center;gap:28px 48px;padding:0 var(--gutter)}
  .marquee-group[aria-hidden]{display:none}
}
/* Eigene Produkte: kompakte Reihe */
.prod-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@container sq (max-width:980px){.prod-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.prod-row .prod-cat{font-size:15.5px}
.prod-row .prod-stage{padding:12px}

/* ---------- Produkte ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.prod-grid>.prod{grid-column:span 2}
.prod-grid>.prod:nth-child(-n+2){grid-column:span 3}
@container sq (max-width:980px){.prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.prod-grid>.prod,.prod-grid>.prod:nth-child(-n+2){grid-column:span 1}}
@container sq (max-width:560px){.prod-grid{grid-template-columns:1fr}}
.prod{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-2);border:1px solid var(--line-dark);color:#fff;transition:border-color .25s ease,transform .3s var(--ease)}
@media (hover:hover){a.prod:hover{border-color:rgba(255,255,255,.4);transform:translateY(-3px)}}
.prod-img{aspect-ratio:16 / 11;overflow:hidden;background:var(--ink-3);border-bottom:1px solid var(--line-dark)}
.prod-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.prod-typo{display:flex;flex-direction:column;justify-content:space-between;padding:18px}
.prod-typo ul{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--on-dark-2)}
.prod-typo ul li{display:flex;align-items:center;gap:8px}
.prod-typo ul li::before{content:"";width:7px;height:7px;border:1.5px dashed var(--on-dark-2);border-radius:2px}
.prod-b{display:flex;flex-direction:column;gap:8px;flex:1;padding:18px 18px 20px}
.prod-name{font-family:var(--f-display);font-weight:600;font-size:22px;line-height:1.1;letter-spacing:-.02em}
.prod-cat{font-size:14px;line-height:1.45;color:var(--on-dark-2)}
.prod-b .status{align-self:flex-start;margin-top:auto}
.prod-l{background:#fff;border-color:var(--line);color:var(--ink)}
.prod-l .prod-img{background:var(--mist);border-bottom-color:var(--line)}
.prod-l .prod-cat{color:var(--slate)}
/* Bühne mit Browserfenster: Screenshots immer vollständig, nie beschnitten */
.prod-stage{padding:16px;background:radial-gradient(120% 90% at 50% 0%,rgba(3,78,240,.30),rgba(3,78,240,0) 72%),var(--ink-3);border-bottom:1px solid var(--line-dark)}
.prod-l .prod-stage{background:radial-gradient(120% 90% at 50% 0%,rgba(3,78,240,.13),rgba(3,78,240,0) 72%),var(--sky);border-bottom-color:var(--line)}
.shot{position:relative;display:block;overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(11,13,18,.08),0 22px 44px -26px rgba(11,13,18,.45)}
.shot-bar{display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;background:#F1F3F6;border-bottom:1px solid var(--line)}
.shot-bar>i{flex:none;width:7px;height:7px;border-radius:2px;background:#C9CED7}
.shot-bar>span{flex:1;max-width:60%;height:14px;margin:0 auto;display:flex;align-items:center;justify-content:center;border-radius:5px;background:#fff;font-size:9.5px;font-weight:700;line-height:1;color:var(--slate);white-space:nowrap;overflow:hidden}
.shot>img{display:block;width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover}
.shot-sm .shot-bar{height:18px;padding:0 8px;gap:4px}
.shot-sm .shot-bar>i{width:5px;height:5px}
.shot-sm .shot-bar>span{height:10px;font-size:7.5px}
/* Produktbilder im Duoton der Marke (Blau 100 → Navy), beim Hover die Originalfarben.
   Nur auf Geräten mit Hover – Touch zeigt immer die Originalfarben.
   z-index:1 legt die Ebenen über das Bild, das durch filter eine eigene Ebene bildet. */
.shot{--bar:24px}
.shot-sm{--bar:18px}
@media (hover:hover){
  .shot:has(>img){isolation:isolate}
  .shot:has(>img)::before,.shot:has(>img)::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;top:var(--bar);pointer-events:none;transition:opacity .5s var(--ease)}
  .shot:has(>img)::before{background:var(--q-blue-100);mix-blend-mode:multiply}
  .shot:has(>img)::after{background:#0B1F5C;mix-blend-mode:screen}
  .shot>img{filter:grayscale(1) contrast(1.08);transition:filter .5s var(--ease)}
  a.prod:hover .shot::before,a.prod:hover .shot::after,a.prod:focus-visible .shot::before,a.prod:focus-visible .shot::after,
  .prow:hover .shot::before,.prow:hover .shot::after,.shot:hover::before,.shot:hover::after{opacity:0}
  a.prod:hover .shot>img,a.prod:focus-visible .shot>img,.prow:hover .shot>img,.shot:hover>img{filter:none}
}
.dark .shot,.prod .shot{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 26px 50px -24px rgba(0,0,0,.85)}
.prod-l .shot{box-shadow:0 0 0 1px rgba(11,13,18,.08),0 22px 44px -26px rgba(11,13,18,.45)}
.prod:not(.prod-l) .shot-bar{background:#1B1F28;border-bottom-color:rgba(255,255,255,.08)}
.prod:not(.prod-l) .shot-bar>i{background:#3A404D}
.prod:not(.prod-l) .shot-bar>span{background:#0B0D12;color:rgba(255,255,255,.62)}
.shot-typo{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:16 / 10;padding:9% 8% 8%;background:radial-gradient(90% 80% at 80% 0%,rgba(3,78,240,.4),rgba(3,78,240,0) 70%),#0B0D12;color:#fff}
.shot-typo b{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.2cqi,32px);line-height:1;letter-spacing:-.04em}
.shot-typo .mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.shot-typo .mods>span{display:flex;align-items:center;height:24px;padding:0 8px;border-radius:7px;border:1px dashed rgba(255,255,255,.32);font-size:11px;font-weight:700;color:rgba(255,255,255,.78)}

/* ---------- Technologie ---------- */
.tech{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.tech-col{padding:22px 22px 0 0}
.tech-col+.tech-col{padding-left:22px;border-left:1px solid var(--line)}
.tech-col h3{margin-bottom:14px;font-family:var(--f-display);font-weight:600;font-size:18px;letter-spacing:-.01em}
@container sq (max-width:900px){.tech{grid-template-columns:repeat(2,minmax(0,1fr))}.tech-col:nth-child(3){padding-left:0;border-left:0}.tech-col:nth-child(n+3){padding-top:32px}}
@container sq (max-width:520px){.tech{grid-template-columns:1fr}.tech-col,.tech-col+.tech-col{padding-left:0;border-left:0}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--ink)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;background:none;border:0;text-align:left;cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:clamp(18px,1.6cqi,22px);line-height:1.3;letter-spacing:-.015em;color:var(--ink);transition:color .2s ease}
@media (hover:hover){.faq-q:hover{color:var(--q-blue)}}
.faq-q .kc svg{transition:transform .25s var(--ease)}
.faq-a{padding:0 64px 24px 0;max-width:760px;color:var(--slate);font-size:16.5px;line-height:1.65}
.dark .faq{border-top-color:#fff}
.dark .faq-i{border-bottom-color:var(--line-dark)}
.dark .faq-q{color:#fff}
.dark .faq-a{color:var(--on-dark-2)}

/* ---------- CTA ---------- */
.cta-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:40px 64px}
.cta-in>.l{flex:1 1 640px;min-width:0}
.cta-in .t-lead{margin-top:20px;max-width:560px}
.cta-in .row{margin-top:32px}
/* Ansprechpartner: Glaskarte mit Tastatur-Ausschnitt statt Foto */
.cta-card{position:relative;isolation:isolate;overflow:hidden;flex:0 1 400px;min-height:176px;display:flex;align-items:flex-end;border-radius:var(--r-lg);background:linear-gradient(155deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.04) 100%);border:1px solid rgba(255,255,255,.24);border-top-color:rgba(255,255,255,.48);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 30px 60px -30px rgba(2,24,90,.6);color:#fff}
.cta-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 32%);pointer-events:none}
.cc-b{position:relative;z-index:2;display:flex;flex-direction:column;gap:3px;max-width:60%;padding:20px 22px}
.cc-b .cc-l{margin-bottom:6px;font-size:13px;font-weight:700;color:var(--q-blue-100)}
.cc-b b{font-family:var(--f-display);font-size:19px;font-weight:600;line-height:1.15;letter-spacing:-.02em}
.cc-b .r{font-size:14px;color:var(--q-blue-100)}
.cc-kb{position:absolute;z-index:1;left:58%;top:34px;pointer-events:none}
.cc-kb .kb-r:first-child{display:none}

/* Glas-Tastatur: shift + Q drücken sich abwechselnd */
.kb{--u:56px;--g:8px;display:flex;flex-direction:column;gap:var(--g);transform:rotate(-12deg);transform-origin:0 0}
.kb-r{display:flex;gap:var(--g)}
.kb-r:nth-child(1){margin-left:calc(var(--u) * -.4)}
.kb i{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:var(--u);height:var(--u);border-radius:14px;background:linear-gradient(155deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.09) 42%,rgba(255,255,255,.04) 100%);border:1px solid rgba(255,255,255,.24);border-top-color:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -10px 18px -12px rgba(255,255,255,.3),0 4px 0 rgba(2,30,110,.22),0 16px 26px -16px rgba(2,24,90,.6);font-style:normal}
.kb i::before{content:"";position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 38%);pointer-events:none}
.kb .w15{width:calc(var(--u) * 1.5 + var(--g) * .5)}
.kb .w18{width:calc(var(--u) * 1.8 + var(--g) * .8)}
.kb .w23{width:calc(var(--u) * 2.3 + var(--g) * 1.3)}
.kb .kb-s{--up:inset 0 1px 0 rgba(255,255,255,.24),0 var(--edge,6px) 0 var(--ink-4),0 22px 34px -14px rgba(2,24,90,.75);--down:inset 0 1px 0 rgba(255,255,255,.24),0 1px 0 var(--ink-4),0 12px 22px -12px rgba(2,24,90,.6);justify-content:flex-start;padding-left:16px;background:linear-gradient(160deg,#2A2F3B 0%,#0B0D12 46%,#000 100%);border-color:#000;border-top-color:#3A404D;font-family:var(--f-display);font-size:20px;font-weight:600;letter-spacing:-.02em;color:#fff;box-shadow:var(--up);animation:kb-s 3.8s ease-in-out infinite}
.kb .kb-s::before{background:linear-gradient(135deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 34%)}
.kb .kb-q{--up:inset 0 1px 0 #fff,inset 0 -8px 14px -8px rgba(3,78,240,.22),0 var(--edge,6px) 0 #AFC3F7,0 22px 34px -14px rgba(2,24,90,.75);--down:inset 0 1px 0 #fff,inset 0 -8px 14px -8px rgba(3,78,240,.22),0 1px 0 #AFC3F7,0 12px 22px -12px rgba(2,24,90,.6);background:linear-gradient(160deg,#fff 0%,#F3F6FF 55%,#DCE6FE 100%);border-color:#fff;font-family:var(--f-display);font-size:30px;font-weight:600;color:var(--q-blue);box-shadow:var(--up);animation:kb-q 3.8s ease-in-out infinite}
.kb .kb-q::before{background:linear-gradient(135deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 40%)}
.kb .kb-q::after{content:"";position:absolute;inset:-2px;border-radius:inherit;box-shadow:0 0 0 2px #fff,0 0 34px 8px rgba(255,255,255,.45);opacity:0;animation:kb-ring 3.8s ease-out infinite}
@keyframes kb-s{0%,8%,62%,100%{transform:none;box-shadow:var(--up)}13%,57%{transform:translateY(var(--press,5px));box-shadow:var(--down)}}
@keyframes kb-q{0%,24%,60%,100%{transform:none;box-shadow:var(--up)}29%,55%{transform:translateY(var(--press,5px));box-shadow:var(--down)}}
@keyframes kb-ring{0%,27%{opacity:0;transform:scale(1)}31%{opacity:1;transform:scale(1)}58%,100%{opacity:0;transform:scale(1.45)}}
@media (prefers-reduced-motion:reduce){.kb .kb-s,.kb .kb-q,.kb .kb-q::after{animation:none}}
.kb-sm{--u:40px;--g:6px}
.kb-sm i{border-radius:11px}
.kb-sm .kb-s{--edge:4px;--press:3px;padding-left:11px;font-size:15px}
.kb-sm .kb-q{--edge:4px;--press:3px;font-size:22px}

/* ---------- Footer ---------- */
.foot{background:#fff;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:40px 32px;padding-block:64px 52px}
.foot-brand img{height:30px;width:auto}
.foot-brand p{margin-top:18px;font-size:15px;line-height:1.6;color:var(--slate);max-width:300px}
.foot h4{margin-bottom:16px;font-size:14px;font-weight:700;color:var(--ink)}
.foot li+li{margin-top:10px}
.foot li a{font-size:15px;color:var(--slate-2);transition:color .2s ease}
@media (hover:hover){.foot li a:hover{color:var(--q-blue)}}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:22px;border-top:1px solid var(--line);font-size:14px;color:var(--slate)}
.foot-bottom nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-bottom a:hover{color:var(--ink)}
@container sq (max-width:980px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1 / -1}}
@container sq (max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* ---------- Unterseiten ---------- */
.phero{position:relative;overflow:hidden;padding-top:clamp(28px,3.4cqi,48px);padding-bottom:clamp(56px,7cqi,104px)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;font-weight:600;color:var(--slate)}
.crumbs a{transition:color .2s ease}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{color:var(--line-2)}
.dark .crumbs{color:var(--on-dark-2)}
.dark .crumbs a:hover{color:#fff}
.dark .crumbs .sep{color:rgba(255,255,255,.3)}
.phero-grid{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:40px 72px;margin-top:clamp(40px,5cqi,80px)}
.phero-grid>.l{flex:1 1 640px;min-width:0}
.phero-grid>.r{flex:1 1 320px;max-width:420px}
.phero .t-lead{margin-top:24px;max-width:600px}
.phero .row{margin-top:32px}

.glance{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:18px 22px 6px}
.glance dl>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.glance dl>div:first-child{border-top:0}
.glance dt{font-size:14px;font-weight:600;color:var(--slate);white-space:nowrap}
.glance dd{text-align:right;font-weight:700}
.dark .glance{background:var(--ink-2);border-color:var(--line-dark)}
.dark .glance dl>div{border-top-color:var(--line-dark)}
.dark .glance dt{color:var(--on-dark-2)}

/* Leistungslandkarte */
.lc{border:1px solid var(--line);border-radius:var(--r-xl);background:#fff;padding:22px 24px 26px;overflow-x:auto}
.lc-grid{display:grid;grid-template-columns:230px repeat(5,minmax(112px,1fr));row-gap:10px;min-width:840px;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);background-size:calc((100% - 230px) / 5) 100%;background-position:230px 0;background-repeat:repeat-x}
.lc-h{padding:0 12px 14px;border-bottom:1px solid var(--line);font-size:14px;font-weight:700;color:var(--slate)}
.lc-h:first-child{padding-left:0}
.lc-name{display:flex;align-items:center;gap:10px;padding-right:16px;font-weight:700;font-size:15px;line-height:1.25}
.lc-bar{display:flex;align-items:center;gap:8px;height:40px;margin:0 6px;padding:0 14px;border-radius:10px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden}
.lc-bar.b{background:var(--q-blue)}
.lc-bar.g{background:var(--mist);color:var(--slate-2);border:1.5px dashed var(--line-2)}

/* Service-Blöcke (Leistungsübersicht) */
.sblock{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.9fr);gap:32px 48px;padding:44px 0 48px;border-top:1px solid var(--line)}
.sblock:first-child{border-top-color:var(--ink)}
.sblock-h .kc{margin-bottom:22px}
.sblock-h p{margin-top:14px;color:var(--slate);font-size:16.5px;line-height:1.6;max-width:440px}
.sblock-h .lnk{margin-top:22px}
.cap-list li{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px;font-weight:600;line-height:1.45}
.cap-list li:first-child{border-top:1px solid var(--line)}
.cap-list li::before{content:"";flex:none;width:7px;height:7px;margin-top:8px;border-radius:2px;background:var(--q-blue)}
.fit{border-radius:var(--r-lg);background:var(--mist);padding:22px}
.fit .t-label{display:block;margin-bottom:12px;color:var(--slate)}
.fit li{position:relative;padding-left:22px;font-size:15px;line-height:1.5}
.fit li+li{margin-top:10px}
.fit li::before{content:"";position:absolute;left:0;top:6px;width:11px;height:6px;border-left:1.8px solid var(--q-blue);border-bottom:1.8px solid var(--q-blue);transform:rotate(-45deg)}
@container sq (max-width:1000px){.sblock{grid-template-columns:repeat(2,minmax(0,1fr))}.sblock-h{grid-column:1 / -1}}
@container sq (max-width:620px){.sblock{grid-template-columns:1fr}}

/* Detailseite */
.persp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.persp-card{border-radius:var(--r-xl);padding:clamp(26px,3.4cqi,44px);border:1px solid var(--line);background:#fff}
.persp-card.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.persp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
.persp-card h3{margin-bottom:10px}
.persp-card>p{color:var(--slate);font-size:16px;line-height:1.55;max-width:480px}
.dark.persp-card>p{color:var(--on-dark-2)}
.feat{margin-top:26px;border-top:1px solid var(--line)}
.dark .feat{border-top-color:var(--line-dark)}
.feat li{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:700}
.dark .feat li{border-bottom-color:var(--line-dark)}
@container sq (max-width:860px){.persp{grid-template-columns:1fr}}

.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
.case{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.case-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line);color:var(--slate)}
.case-b{display:flex;flex-direction:column;gap:14px;padding:22px}
.case-flow{display:flex;flex-direction:column;gap:8px}
.case-flow .role-ar{width:2px;height:16px;margin:0 0 0 22px}
.case-flow .role-ar::after{right:auto;left:50%;top:auto;bottom:-1px;margin:0 0 0 -4px;transform:rotate(135deg)}

.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.step{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff}
.step p{color:var(--slate);font-size:15px;line-height:1.55}
.step .tag{align-self:flex-start;margin-top:auto}
@container sq (max-width:980px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container sq (max-width:560px){.steps4{grid-template-columns:1fr}}

.nots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid #fff}
.nots li{padding:22px 24px 4px 0;font-size:16px;line-height:1.55}
.nots li+li{padding-left:24px;border-left:1px solid var(--line-dark)}
.nots b{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-family:var(--f-display);font-weight:600;font-size:20px;letter-spacing:-.015em}
.nots span{color:var(--on-dark-2)}
@container sq (max-width:860px){.nots{grid-template-columns:1fr}.nots li+li{padding-left:0;border-left:0;border-top:1px solid var(--line-dark)}}

/* Produkte-Seite */
.prow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px 56px;align-items:center;padding-block:clamp(40px,5cqi,72px);border-top:1px solid var(--line)}
.prow:first-child{border-top-color:var(--ink)}
.prow.flip>.prow-img,.prow.flip>.prow-stage{order:2}
.prow-stage{padding:clamp(18px,2.6cqi,36px);border-radius:var(--r-xl);background:radial-gradient(110% 90% at 50% 0%,rgba(3,78,240,.16),rgba(3,78,240,0) 72%),var(--sky);box-shadow:inset 0 0 0 1px #E2EAFF}
.prow-img{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);background:var(--mist);aspect-ratio:16 / 10}
.prow-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.prow-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
.prow h3{margin-bottom:6px}
.prow .cat{font-size:15px;font-weight:600;color:var(--slate)}
.prow p.d{margin-top:16px;color:var(--slate);font-size:16.5px;line-height:1.6;max-width:500px}
.prow .tags{margin-top:20px}
.prow .lnk{margin-top:24px}
@container sq (max-width:860px){.prow{grid-template-columns:1fr}.prow.flip>.prow-img,.prow.flip>.prow-stage{order:0}}

/* Über uns */
.tl{border-top:1px solid var(--ink)}
.tl li{display:grid;grid-template-columns:160px minmax(0,1fr) minmax(0,1.2fr);gap:12px 32px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.tl .yr{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--q-blue)}
.tl p{color:var(--slate);font-size:15.5px;line-height:1.55}
@container sq (max-width:760px){.tl li{grid-template-columns:1fr}}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.val{padding:26px;border-radius:var(--r-lg);border:1px solid var(--line-dark);background:var(--ink-2)}
.val .kc{margin-bottom:22px}
.val p{margin-top:8px;color:var(--on-dark-2);font-size:15px;line-height:1.55}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:16px}
.tm{border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;overflow:hidden}
.tm-ph{display:flex;align-items:flex-end;justify-content:space-between;aspect-ratio:4 / 4.4;padding:16px;background:var(--mist);background-image:linear-gradient(to right,var(--fog) 1px,transparent 1px),linear-gradient(to bottom,var(--fog) 1px,transparent 1px);background-size:24px 24px}
.tm-ph .ini{font-family:var(--f-display);font-weight:600;font-size:56px;letter-spacing:-.04em;line-height:.8;color:var(--ink)}
.tm-b{padding:16px 18px 18px}
.tm-b b{display:block;font-size:16px}
.tm-b span{display:block;margin-top:2px;font-size:14px;color:var(--slate)}

/* Formular */
.form-card{border:1px solid var(--line);border-radius:var(--r-xl);background:#fff;padding:clamp(22px,3cqi,40px)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form-grid .full{grid-column:1 / -1}
@container sq (max-width:620px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.field-l{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;font-weight:700;color:var(--ink)}
.field-l .opt{font-weight:500;color:var(--slate)}
.input{width:100%;min-height:50px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--ink);font:inherit;font-size:16px;transition:border-color .2s ease,box-shadow .2s ease}
.input::placeholder{color:var(--muted-ui)}
.input:focus,.input.is-focus{outline:none;border-color:var(--q-blue);box-shadow:0 0 0 3px rgba(3,78,240,.18)}
.input.is-error{border-color:var(--signal);box-shadow:0 0 0 3px rgba(185,58,11,.14)}
textarea.input{min-height:150px;resize:vertical;line-height:1.55}
.field-err{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--signal)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg-b{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--ink);font-family:var(--f-text);font-size:14.5px;font-weight:700;cursor:pointer;box-shadow:0 2px 0 var(--line-2);transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .12s ease}
@media (hover:hover){.seg-b:hover{border-color:var(--ink)}}
.seg-b.on{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 2px 0 #000}
.check{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.5;color:var(--slate)}
.check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--q-blue)}
.check a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.next-steps{border-top:1px solid var(--ink)}
.next-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 14px;padding:16px 0;border-bottom:1px solid var(--line)}
.next-steps li .kc{grid-row:span 2}
.next-steps b{font-size:16px}
.next-steps span.d{grid-column:2;font-size:14.5px;line-height:1.5;color:var(--slate)}


/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .ps .chip-a .bar{animation:none!important}
  .ps,.ps *,.pr-token,.pr-fill{transition:none!important}
  .btn,.svc,.svc-go,.offer,.prod,.lnk .ar,.faq-q .kc svg,.nav-a svg{transition:none!important}
  .aura i,.art .bar{animation:none!important}
  .art,.art *{transition:none!important}
  .shot::before,.shot::after,.shot>img{transition:none!important}
}

/* ==========================================================================
   Produktion: Seitengerüst, mobiles Menü, Akkordeon, Formular, Rechtstexte
   ========================================================================== */
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:#fff}
[hidden]{display:none!important}
.nw{white-space:nowrap}
html.nav-open{overflow:hidden}
.skip{position:absolute;left:16px;top:-64px;z-index:300;display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:12px;background:var(--q-blue);color:#fff;font-weight:700;transition:top .15s ease}
.skip:focus{top:12px}

/* Mobiles Menü: eigene Ebene über der Seite (eigener .sq-Container) */
.mnav-layer{position:fixed;inset:0;z-index:100;overflow-y:auto;overscroll-behavior:contain}
.mnav-layer .mnav{min-height:100%}
.mnav-head{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;padding:0 var(--gutter);border-bottom:1px solid var(--line)}
.mnav-head .nav-burger{display:inline-flex}
.mnav-a[aria-current="page"]{color:var(--q-blue)}
.mnav-subs{padding:6px 0 10px;border-bottom:1px solid var(--line)}
.mnav-foot{margin-top:auto;padding:24px var(--gutter) 32px;display:flex;flex-direction:column;gap:10px}
.mnav-foot .btn{width:100%}

/* Q-Pipeline: Bedienknopf */
.fig-ctl>span{display:inline-flex;align-items:center;gap:8px}
/* Q-Pipeline: Feature und Füllung gleiten per Script (transform) ohne Zwischenstopps.
   Das Feature fährt unter den Q-Gates hindurch, die beim Durchfahren gedrückt werden. */
.pr-token{z-index:3;transition:opacity .4s ease;will-change:transform}
.pr-fill{width:100%;transform:scaleX(0);transform-origin:0 50%;transition:opacity .4s ease;will-change:transform}
.ps.is-agent .art .bar{animation:none;width:calc(var(--work,0) * 100%)}
/* Spur, Knoten, Gates und Läufer teilen sich dieselbe Mitte (die Zeile kann höher als 40 px sein) */
.ps-track{align-self:stretch;height:auto;min-height:40px}
/* Das Feature fährt links herein und rechts hinaus */
.pipe-run{overflow:hidden}
.ps-loop{z-index:4}
/* Das Feature zeigt in jeder Phase, was dort entsteht. Jedes Q-Gate scannt die nächste
   Form hinein: rechts vom Q ist sie schon da, links noch nicht (clip-path aus site.js).
   Alle Formen teilen denselben Symbol-Platz (18 px), damit der Text nie verrutscht. */
.pr-token{gap:5px;padding:0 10px 0 6px}
.pr-l{position:absolute;inset:0;display:flex;align-items:center;gap:5px;padding:0 10px 0 6px;border-radius:inherit;white-space:nowrap}
.pr-ic{display:flex;align-items:center;justify-content:center;flex:none;width:18px;height:14px}
.pr-ic svg{display:block;overflow:visible}
/* 01 Anforderung: transparent geriffelt, gestrichelter Rand – mit deckendem Grund, damit die Linie nicht durch den Text läuft */
.pr-token{background:repeating-linear-gradient(-45deg,rgba(3,78,240,.2) 0 1.5px,transparent 1.5px 5px),#fff;color:var(--q-blue);box-shadow:none;outline:1.5px dashed var(--q-blue-300);outline-offset:-1.5px}
.pr-token::before{content:"";flex:none;width:8px;height:8px;margin:0 5px;border-radius:2px;background:none;box-shadow:inset 0 0 0 1.5px currentColor}
/* 02 Architektur: Bauplan-Raster, die Varianten A und B wechseln sich ab */
.pr-arch{background:linear-gradient(rgba(3,78,240,.16) 1px,transparent 1px) 0 0/6px 6px,linear-gradient(90deg,rgba(3,78,240,.16) 1px,transparent 1px) 0 0/6px 6px,#fff;color:var(--q-blue);box-shadow:inset 0 0 0 1.5px var(--q-blue-300);opacity:var(--arch,0);clip-path:inset(0 calc(100% - var(--s-impl,100%)) 0 0)}
.pr-ab{gap:2px}
.pr-ab i{display:flex;align-items:center;justify-content:center;width:8px;height:13px;border-radius:2px;background:#fff;font-family:var(--f-display);font-size:8px;font-style:normal;font-weight:700;line-height:1;color:var(--q-blue);box-shadow:inset 0 0 0 1px var(--q-blue-300);animation:pr-ab 1s steps(1) infinite}
.pr-ab i+i{animation-delay:-.5s}
/* aktiv in der ersten Hälfte, B ist um eine halbe Periode versetzt */
@keyframes pr-ab{0%{background:var(--q-blue);color:#fff;box-shadow:inset 0 0 0 1px var(--q-blue)}50%,100%{background:#fff;color:var(--q-blue);box-shadow:inset 0 0 0 1px var(--q-blue-300)}}
/* 03 Umsetzung: fester Rahmen, Code wird getippt */
.pr-impl{background:#fff;color:var(--q-blue);box-shadow:inset 0 0 0 1.5px var(--q-blue);clip-path:inset(0 calc(100% - var(--s-test,100%)) 0 var(--s-impl,100%))}
.pr-code path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;animation:pr-type 1.6s linear infinite}
.pr-code path:nth-child(2){animation-delay:.2s}
.pr-code path:nth-child(3){animation-delay:.4s}
@keyframes pr-type{0%,14%{opacity:.2}15%,80%{opacity:1}81%,100%{opacity:.2}}
/* 04 Test: Tests laufen durch, das Feature füllt sich hellblau */
.pr-test{background:linear-gradient(90deg,var(--q-blue-100) calc(var(--tp,0) * 100%),#fff 0);color:var(--q-blue);box-shadow:inset 0 0 0 1.5px var(--q-blue);clip-path:inset(0 calc(100% - var(--s-rel,100%)) 0 var(--s-test,100%))}
.pr-tests rect{fill:#fff;stroke:var(--q-blue);stroke-width:1.2}
.pr-token[data-t="1"] .pr-tests rect:nth-child(-n+1),.pr-token[data-t="2"] .pr-tests rect:nth-child(-n+2),.pr-token[data-t="3"] .pr-tests rect:nth-child(-n+3),.pr-token[data-t="4"] .pr-tests rect:nth-child(-n+4),.pr-token[data-t="5"] .pr-tests rect:nth-child(-n+5),.pr-token[data-t="6"] .pr-tests rect:nth-child(-n+6){fill:var(--q-blue)}
/* 05 Release: komplett blau, nach dem Deploy der blaue Haken */
.pr-rel{background:var(--q-blue);color:#fff;clip-path:inset(0 calc(100% - var(--s-ops,100%)) 0 var(--s-rel,100%))}
.pr-deploy path{fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pr-ok{position:absolute;right:-6px;top:-6px;z-index:1;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px var(--q-blue),0 3px 8px -3px rgba(3,78,240,.6);transform:scale(var(--ok-s,0));transition:transform .35s var(--ease)}
.pr-ok::after{content:"";position:absolute;left:4.4px;top:4.6px;width:6.4px;height:3.4px;border-left:1.9px solid var(--q-blue);border-bottom:1.9px solid var(--q-blue);transform:rotate(-45deg)}
/* 06 Betrieb: grün, Monitoring als Herzschlag */
.pr-ops{background:var(--ok);color:#fff;clip-path:inset(0 0 0 var(--s-ops,100%))}
.pr-beat polyline{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pr-beat .b0{opacity:.45}
.pr-beat .b1{opacity:0;stroke-width:2;stroke-dasharray:8 28}
.pr-token.is-live .pr-beat .b1{opacity:1;animation:pr-beat 1.3s linear infinite}
@keyframes pr-beat{from{stroke-dashoffset:8}to{stroke-dashoffset:-28}}
@media (prefers-reduced-motion:reduce){
  .pr-beat .b1{display:none}
  .pr-beat .b0{opacity:1}
  .pr-ab i,.pr-code path{animation:none}
}

/* Akkordeon: Antworten gleiten auf und zu, die Liste behält ihre Höhe (min-height aus site.js) */
.faq-q[aria-expanded="true"] .kc svg{transform:rotate(45deg)}
.faq-q .kc svg{transition:transform .55s var(--ease)}
.faq-a-wrap{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .55s var(--ease),visibility 0s linear .55s}
.faq-a-wrap.is-open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .55s var(--ease),visibility 0s}
.faq-a-wrap>.faq-a{min-height:0;overflow:hidden;padding-bottom:0;opacity:0;transition:opacity .3s ease}
.faq-a-wrap>.faq-a::after{content:"";display:block;height:24px}
.faq-a-wrap.is-open>.faq-a{opacity:1;transition:opacity .5s ease .12s}

/* Team: echtes Foto statt Initialen */
.tm-ph{position:relative;overflow:hidden}
.tm-ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tm-ph>.kc{position:relative;z-index:1;margin-left:auto}

/* Formular: Auswahl als echte Radio-Buttons */
.seg-b{position:relative}
.seg-b input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg-b:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 2px 0 #000}
.seg-b:has(input:focus-visible){outline:2px solid var(--q-blue);outline-offset:3px}
.form-note{padding:14px 16px;border-radius:12px;background:var(--q-blue-50);color:var(--ink);font-size:15px;line-height:1.55}
/* Honeypot gegen Spam-Bots: für Menschen unsichtbar */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-note a{color:var(--q-blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Rechtstexte */
.legal-hero{padding-block:clamp(48px,6cqi,96px) clamp(24px,3cqi,40px)}
.legal{max-width:780px;padding-block:clamp(16px,2.4cqi,32px) clamp(64px,8cqi,120px)}
.legal h2{margin:52px 0 14px;font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.4cqi,30px);line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.legal>h2:first-child{margin-top:0}
.legal h3{margin:28px 0 8px;font-size:17px;font-weight:800;color:var(--ink)}
.legal p,.legal li{font-size:16.5px;line-height:1.7;color:var(--slate-2)}
.legal p+p{margin-top:12px}
.legal ul{margin:12px 0;padding-left:22px;list-style:disc}
.legal li+li{margin-top:6px}
.legal a{color:var(--q-blue);text-decoration:underline;text-underline-offset:3px}
.legal strong,.legal b{color:var(--ink)}

/* Mini-Diagramme der Leistungsseite: bleiben auch in schmalen Spalten einzeilig */
.mini .keys{flex-wrap:nowrap}
/* Pfeile im Ablauf-Diagramm bleiben sichtbar (die Rollen-Tabelle blendet .role-ar schmal aus) */
.mini .flow3 .role-ar{display:block}
.mini .keys .kc-xl{flex:0 1 56px;min-width:0;padding:0}
@container sq (max-width:960px){
  .mini .flow3{grid-template-columns:minmax(0,1fr) 16px auto 16px minmax(0,1fr)}
  .mini .flow3 .chip-a,.mini .flow3 .chip-e{gap:8px;padding:8px 10px;font-size:12.5px}
}

/* ---------- Bewegung ----------
   Startbereiche steigen beim Laden gestaffelt auf. Weiter unten setzt site.js
   die Klasse .rv und blendet beim Scrollen ein. Alles nur ohne „Bewegung reduzieren“. */
@keyframes rise{from{opacity:0;transform:translate3d(0,26px,0)}}
@media (prefers-reduced-motion:no-preference){
  :is(.hero,.phero,.legal-hero)>.wrap>*{animation:rise .9s var(--ease) both}
  :is(.hero,.phero,.legal-hero)>.wrap>:nth-child(2){animation-delay:.09s}
  :is(.hero,.phero,.legal-hero)>.wrap>:nth-child(3){animation-delay:.18s}
  :is(.hero,.phero,.legal-hero)>.wrap>:nth-child(4){animation-delay:.27s}
  :is(.hero,.phero,.legal-hero)>.wrap>:nth-child(n+5){animation-delay:.36s}
  .mnav-layer:not([hidden]) .mnav-sec>*{animation:rise .5s var(--ease) both}
  .mnav-layer:not([hidden]) .mnav-sec>:nth-child(2){animation-delay:.04s}
  .mnav-layer:not([hidden]) .mnav-sec>:nth-child(3){animation-delay:.08s}
  .mnav-layer:not([hidden]) .mnav-sec>:nth-child(4){animation-delay:.12s}
  .mnav-layer:not([hidden]) .mnav-sec>:nth-child(n+5){animation-delay:.16s}
}
.rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--rv,0) * 80ms)}
.rv.is-in{opacity:1;transform:none}
.lc-bar.rv{transform:scaleX(.08);transform-origin:0 50%}
.lc-bar.rv.is-in{transform:none}

/* ---------- Glas ----------
   Sparsam, nur wo etwas über dem Lichtfeld schwebt: Navigation, Pipeline-Karte,
   Q-Gates und das Feature. Ohne backdrop-filter bleiben die Flächen deckend. */
/* Jede Form zeigt nur ihren Abschnitt; die Grundform verschwindet, sobald die Architektur sie deckt */
.pr-token.is-covered{background:transparent;color:transparent;outline-color:transparent}
.pr-token.is-covered::before{opacity:0}
/* Glanzkante auf den farbigen Formen */
.pr-rel,.pr-ops{background-image:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 60%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hero-fig{background:rgba(255,255,255,.58);border-color:rgba(255,255,255,.85);-webkit-backdrop-filter:saturate(1.4) blur(22px);backdrop-filter:saturate(1.4) blur(22px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 40px 90px -50px rgba(3,40,140,.45)}
  .hero-fig .fig-head{border-bottom-color:rgba(11,13,18,.07)}
  /* Q-Gate als Glastaste: gedrückt blaues Glas, das Feature schimmert beim Scannen durch */
  .pipe .ps-gate{background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .pipe .ps.is-gate .ps-gate,.pipe .ps.is-done .ps-gate{background:rgba(3,78,240,.8);-webkit-backdrop-filter:saturate(1.6) blur(3px);backdrop-filter:saturate(1.6) blur(3px)}
  /* Feature: mattes Glas, die Linie dahinter verschwimmt */
  .pr-token{background:repeating-linear-gradient(-45deg,rgba(3,78,240,.2) 0 1.5px,transparent 1.5px 5px),rgba(255,255,255,.68);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
  .pr-arch{background:linear-gradient(rgba(3,78,240,.16) 1px,transparent 1px) 0 0/6px 6px,linear-gradient(90deg,rgba(3,78,240,.16) 1px,transparent 1px) 0 0/6px 6px,rgba(255,255,255,.7)}
  .pr-impl{background:rgba(255,255,255,.76)}
  .pr-test{background:linear-gradient(90deg,rgba(220,230,254,.92) calc(var(--tp,0) * 100%),rgba(255,255,255,.76) 0)}
  .pr-rel{background-color:rgba(3,78,240,.9)}
  .pr-ops{background-color:rgba(14,159,110,.92)}
}

/* ---------- Feinschliff ---------- */
/* Leistungen und Mega-Menü: ruhigere Hover-Übergänge */
.svc{transition:background-color .6s var(--ease),padding .7s var(--ease)}
.svc-name{transition:color .45s ease}
.svc-go{transition:background-color .5s ease,border-color .5s ease,color .5s ease,transform .6s var(--ease)}
.mega-i{transition:background-color .45s ease}
/* Zusagen: Zählwerk – die Ziffern rollen nach oben, ohne Text im Sekundentakt zu tauschen */
.odo{display:inline-flex;vertical-align:top}
.odo-col{display:inline-block;height:1em;margin-block:-.06em;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent)}
.odo-strip{display:flex;flex-direction:column;transform:translate3d(0,0,0);transition:transform 3.2s cubic-bezier(.65,0,.35,1)}
.odo-strip>span{display:block;height:1em;line-height:1em}
.odo.is-rolling .odo-strip{transform:translate3d(0,calc(var(--steps) * -1em),0)}
/* die vordere Stelle springt erst gegen Ende auf 1 – wie bei einem echten Zählwerk */
.odo-col:first-child .odo-strip{transition-duration:1.2s;transition-delay:2s}
/* Technologie-Pillen heben sich vom hellen Grund ab */
.tech .tag{background:var(--q-blue-50);border-color:#D3E0FF;color:#0B2A7A}
/* Produktbilder: Originalfarben erst nach kurzem Verweilen, damit beim Scrollen nichts aufflackert */
@media (hover:hover){
  a.prod:hover,a.prod:hover .shot>img,.prow:hover .shot>img,.shot:hover>img{transition-delay:.18s}
  a.prod:hover .shot::before,a.prod:hover .shot::after,.prow:hover .shot::before,.prow:hover .shot::after,.shot:hover::before,.shot:hover::after{transition-delay:.18s}
}
/* Glasscheibe über dem shiftQ-Logo: folgt der Maus (site.js) */
.spec{overflow:hidden}
.lens{position:absolute;left:0;top:0;z-index:2;width:240px;height:160px;margin:-80px 0 0 -120px;border-radius:32px;pointer-events:none;opacity:0;scale:.88;transition:opacity .45s ease,scale .6s var(--ease);background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.06) 45%,rgba(255,255,255,.22));box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -14px 28px rgba(3,78,240,.1),0 24px 50px -24px rgba(3,40,140,.45);-webkit-backdrop-filter:blur(6px) saturate(1.8) brightness(1.06);backdrop-filter:blur(6px) saturate(1.8) brightness(1.06)}
.spec.has-lens .lens{opacity:1;scale:1}
/* Solange die Glasscheibe da ist, ist sie der Mauszeiger */
.spec.has-lens,.spec.has-lens *{cursor:none}
@media (prefers-reduced-motion:reduce){.svc,.svc-name,.svc-go,.mega-i,.faq-a-wrap,.faq-a-wrap>.faq-a,.faq-q .kc svg{transition:none}}
/* Barrierefreiheit: Pause hält alle Animationen der Pipeline an, Esc schließt das Mega-Menü */
.fig.is-paused *,.fig.is-paused *::before,.fig.is-paused *::after{animation-play-state:paused!important}
.nav-dd.is-closed .mega-wrap{display:none!important}
.nav-dd.is-closed>.nav-a svg{transform:none!important}
/* Kontrast: wartende Pipeline-Phasen bleiben gedämpft, aber lesbar (mind. 4,5 : 1) */
.ps.is-wait .ps-head,.ps.is-wait .ps-num,.ps.is-wait .chip-e,.ps.is-agent .chip-e{color:var(--slate)}
.ps.is-wait .art{opacity:1;filter:grayscale(1)}
.ps.is-wait .art-h b{color:var(--slate)}
/* Lange Wörter in großen Überschriften brechen notfalls um statt überzustehen */
.svc-name,.t-hero,.t-d1,.t-d2{overflow-wrap:break-word}
/* Kontrast in der gläsernen Navigation: auch über dunklen Abschnitten mind. 4,5 : 1 */
.nav .nav-a{color:var(--ink)}
/* Zielgrößen mind. 24 px (WCAG 2.5.8) */
.foot li a{display:inline-block;padding-block:2px}
.foot li+li{margin-top:6px}
.check input{width:24px;height:24px;margin:0}
.foot-bottom a,.crumbs a{display:inline-block;padding-block:2px}

/* ---------- Navigation aus Glas ----------
   Oben liegt die Leiste unsichtbar auf dem Hero (der erste Abschnitt reicht
   unter sie). Beim Scrollen wird sie zu ruhigem Milchglas, über dunklen
   Abschnitten zu dunklem Glas mit heller Schrift – site.js setzt .is-scrolled
   und .on-dark. Die Unschärfe sitzt auf ::before, damit das Dropdown sein
   eigenes Glas haben kann. */
.sq{--nav-h:72px}
.nav{background:transparent;border-bottom:0}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;border-bottom:1px solid transparent;transition:background-color .45s ease,border-color .45s ease,-webkit-backdrop-filter .45s ease,backdrop-filter .45s ease}
.nav.is-scrolled::before{background:rgba(255,255,255,.94);border-bottom-color:rgba(11,13,18,.07)}
.nav.on-dark.is-scrolled::before{background:rgba(14,17,24,.94);border-bottom-color:rgba(255,255,255,.08)}
.nav .nav-a{transition:background-color .3s ease,color .45s ease}
.nav.on-dark .nav-a{color:#fff}
.nav-a[aria-current="page"]::after{bottom:4px;left:14px;right:14px}
@media (hover:hover){
  .nav .nav-a:hover{background:rgba(3,78,240,.07);color:var(--ink)}
  .nav.on-dark .nav-a:hover{background:rgba(255,255,255,.1);color:#fff}
}
.nav.on-dark .nav-logo img{filter:drop-shadow(0 0 1px rgba(255,255,255,.45))}
.nav.on-dark .nav-burger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:none}
/* Der erste Abschnitt reicht unter die Navigation */
main>.hero:first-child{margin-top:calc(-1 * var(--nav-h));padding-top:calc(var(--nav-h) + clamp(36px,4.6cqi,68px))}
main>.phero:first-child{margin-top:calc(-1 * var(--nav-h));padding-top:calc(var(--nav-h) + clamp(28px,3.4cqi,48px))}
main>.legal-hero:first-child{margin-top:calc(-1 * var(--nav-h));padding-top:calc(var(--nav-h) + clamp(48px,6cqi,96px))}
/* Dropdown und mobiles Menü: ruhiges, fast weißes Glas ohne graue Schlieren */
.mega{border-color:rgba(11,13,18,.06);box-shadow:0 30px 70px -30px rgba(11,13,18,.35)}
.mega-col-alt{background:var(--sky)}
.mega-i span.d{color:var(--slate-2)}
@media (hover:hover){.mega-i:hover,.mega-col-alt .mega-i:hover{background:rgba(232,238,255,.9)}}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav.is-scrolled::before{background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px)}
  .nav.on-dark.is-scrolled::before{background:rgba(14,17,24,.55)}
  .mega{background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.6) blur(30px);backdrop-filter:saturate(1.6) blur(30px)}
  .mega-col-alt{background:rgba(243,246,255,.8)}
  .nav-burger{background:rgba(255,255,255,.7)}
  .mnav-layer{background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.6) blur(30px);backdrop-filter:saturate(1.6) blur(30px)}
  .mnav-layer .mnav{background:transparent}
}
/* Dropdown blendet langsam und weich ein. Die Opazität sitzt auf .mega selbst –
   läge sie auf dem Elternelement, ginge das Glas des Dropdowns beim Einblenden verloren. */
.mega-wrap{display:block;visibility:hidden;pointer-events:none;transition:visibility 0s linear .35s}
.mega{opacity:0;transform:translate3d(0,8px,0) scale(.985);transform-origin:50% 0;transition:opacity .3s ease,transform .35s var(--ease)}
.nav-dd:hover .mega-wrap,.nav-dd:focus-within .mega-wrap{visibility:visible;pointer-events:auto;transition:visibility 0s linear .06s}
.nav-dd:hover .mega,.nav-dd:focus-within .mega{opacity:1;transform:none;transition:opacity .6s ease .06s,transform .7s var(--ease) .06s}
.nav-dd>.nav-a svg{transition:transform .5s var(--ease)}
@media (prefers-reduced-motion:reduce){.mega{transform:none!important}}
/* Hover in der Navigation als kleine Glasfläche (blendet weich ein) */
.nav .nav-a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;pointer-events:none;transition:opacity .35s ease;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(220,230,254,.55));box-shadow:inset 0 0 0 1px rgba(3,78,240,.12),inset 0 1px 0 rgba(255,255,255,.95),0 6px 16px -10px rgba(3,78,240,.45);-webkit-backdrop-filter:blur(8px) saturate(1.6);backdrop-filter:blur(8px) saturate(1.6)}
.nav.on-dark .nav-a::before{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(122,162,255,.14));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.3)}
.mega-i{position:relative;isolation:isolate}
.mega-i::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;pointer-events:none;transition:opacity .35s ease;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(220,230,254,.62));box-shadow:inset 0 0 0 1px rgba(3,78,240,.1),inset 0 1px 0 #fff,0 10px 24px -14px rgba(3,78,240,.45)}
@media (hover:hover){
  .nav .nav-a:hover,.nav.on-dark .nav-a:hover,.mega-i:hover,.mega-col-alt .mega-i:hover{background:transparent}
  .nav .nav-a:hover::before,.nav-dd:hover>.nav-a::before,.mega-i:hover::before{opacity:1}
}
.nav-dd:focus-within>.nav-a::before{opacity:1}
/* Vier Produkte: 2 × 2 auf breiten, eine Spalte pro Karte auf schmalen Containern */
.prod-grid>.prod,.prod-grid>.prod:nth-child(-n+2){grid-column:span 3}
@container sq (max-width:980px){.prod-grid>.prod,.prod-grid>.prod:nth-child(-n+2){grid-column:span 1}}
/* Menü-Knopf im selben Glas wie die Hover-Flächen der Navigation (statt grauer Taste) */
.nav-burger{border:0;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(220,230,254,.62));box-shadow:inset 0 0 0 1px rgba(3,78,240,.14),inset 0 1px 0 rgba(255,255,255,.95),0 8px 20px -12px rgba(3,78,240,.5);color:var(--ink);transition:transform .2s var(--ease),box-shadow .3s ease}
.nav-burger:active{transform:scale(.96)}
.nav.on-dark .nav-burger{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(122,162,255,.14));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.3);color:#fff}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.nav-burger{-webkit-backdrop-filter:blur(8px) saturate(1.6);backdrop-filter:blur(8px) saturate(1.6)}}