/* ============================================================
   SYSTEMGEMISCH – gemeinsames Stylesheet für alle Seiten
   Grundlage: SYSTEMGEMISCH Design System
   Radius 0 · keine Schatten · keine Verläufe · fünf Markenfarben
   ============================================================ */

@font-face{font-family:'Rubik';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/rubik-300.woff2') format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/rubik-400.woff2') format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/rubik-500.woff2') format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/rubik-700.woff2') format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/rubik-800.woff2') format('woff2')}

:root{
  --taubenblau:#677e92;
  --taubenblau-700:#54677a;
  --taubenblau-800:#455565;
  --tiefblau:#3a4652;
  --tiefblau-900:#2b343d;
  --himmelblau:#99bbd9;
  --hellblau:#dfe8f0;
  --gelb:#ffff50;
  --gelb-600:#e6e600;
  --ink:#3a4652;
  --ink-muted:#55636f;
  --paper:#fff;

  /* Sechs Bereiche = sechs Tonwerte derselben Palette */
  --b-core:#3a4652;
  --b-shield:#4f6272;
  --b-recover:#677e92;
  --b-connect:#8099ac;
  --b-cloud:#99bbd9;
  --b-secure:#b8d0e4;

  --wrap:1180px;
  --section-py:96px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Rubik',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--paper);
  font-weight:400;font-size:16px;line-height:1.55;text-wrap:pretty;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

a{color:var(--taubenblau)}
a:hover{color:var(--tiefblau)}
:focus-visible{outline:3px solid var(--gelb);outline-offset:1px}

.skip{position:absolute;left:-9999px;top:0;background:var(--gelb);color:var(--tiefblau);
  padding:12px 20px;font-weight:700;z-index:100}
.skip:focus{left:0}

/* ---------- Kopfzeile: weiß, Logo links ---------- */
.site-head{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--hellblau)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:28px;width:auto}
.mainnav ul{display:flex;align-items:center;gap:28px;list-style:none}
.mainnav a{color:var(--taubenblau);text-decoration:none;font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;display:block;padding:6px 0;white-space:nowrap}
.mainnav a:hover{color:var(--tiefblau)}
.btn-cta{background:var(--gelb);color:var(--tiefblau)!important;padding:13px 20px;font-weight:700;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;display:inline-block;white-space:nowrap}
.btn-cta:hover{background:var(--gelb-600)}
.btn-cta:active{background:var(--gelb-600);transform:translateY(1px)}

/* Mobile Navigation (ohne JavaScript) */
.mobnav{display:none;position:relative}
.mobnav>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  min-height:44px;padding:0 4px;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tiefblau)}
.mobnav>summary::-webkit-details-marker{display:none}
.mobnav>summary::after{content:"";width:16px;height:12px;flex:none;
  border-top:2px solid var(--tiefblau);border-bottom:2px solid var(--tiefblau);
  background:linear-gradient(var(--tiefblau),var(--tiefblau)) center/100% 2px no-repeat}
.mobnav[open]>summary::after{background:none;border-bottom:none}
.mobnav-panel{position:absolute;right:0;top:calc(100% + 12px);width:min(84vw,320px);
  background:#fff;border:1px solid var(--hellblau);padding:8px 0}
.mobnav-panel ul{list-style:none}
.mobnav-panel a{display:block;padding:14px 22px;min-height:44px;color:var(--tiefblau);
  text-decoration:none;font-weight:500;border-bottom:1px solid var(--hellblau)}
.mobnav-panel li:last-child a{border-bottom:none}
.mobnav-panel a:hover{background:var(--hellblau)}
@media (max-width:1120px){
  .mainnav{display:none}
  .mobnav{display:block}
}

/* ---------- Typografie ---------- */
h1{font-weight:800;text-transform:uppercase;letter-spacing:-0.01em;line-height:1.05;
  font-size:clamp(2.1rem,5vw,3.6rem)}
h2{font-weight:800;text-transform:uppercase;letter-spacing:-0.01em;line-height:1.12;
  font-size:clamp(1.5rem,3.2vw,2.3rem);color:var(--tiefblau)}
h3{font-weight:700;line-height:1.25;color:var(--tiefblau)}
.kicker{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--taubenblau);margin-bottom:14px}
.sec-head{max-width:62ch;margin-bottom:52px}
.sec-head p{margin-top:16px;color:var(--ink-muted);max-width:66ch}

.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;padding:16px 28px}
.btn-y{background:var(--gelb);color:var(--tiefblau)}
.btn-y:hover{background:var(--gelb-600);color:var(--tiefblau)}
.btn-y:active{transform:translateY(1px)}
.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.btn-ghost:active{transform:translateY(1px)}

/* ---------- Hero ---------- */
.hero{background:var(--tiefblau);color:#fff}
.hero .wrap{padding-top:88px;padding-bottom:0}
.hero .eyebrow{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gelb);margin-bottom:24px}
.hero h1{max-width:15ch}
.hero h1 .y{color:var(--gelb)}
.hero p{max-width:52ch;margin-top:26px;font-size:1.1rem;color:var(--hellblau)}
.hero-actions{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap;padding-bottom:88px}
.bands{display:grid;grid-template-columns:repeat(6,1fr);height:14px}
.bands span{display:block;background:var(--ac)}

/* ---------- Bereichsakzente ----------
   Ersetzen die frueheren style-Attribute im HTML. Notwendig, damit die
   Content-Security-Policy ohne 'unsafe-inline' fuer style-src auskommt. */
.a-core{--ac:var(--b-core)}
.a-shield{--ac:var(--b-shield)}
.a-recover{--ac:var(--b-recover)}
.a-connect{--ac:var(--b-connect)}
.a-cloud{--ac:var(--b-cloud)}
.a-secure{--ac:var(--b-secure)}

/* ---------- Bereiche ---------- */
.bereiche{padding:var(--section-py) 0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--hellblau);padding:0 0 28px;transition:border-color .18s cubic-bezier(.2,0,.2,1)}
.card:hover{border-color:var(--taubenblau)}
.card .bar{height:6px;background:var(--ac)}
.card .body{padding:26px 26px 0}
.tag{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--taubenblau);margin-bottom:12px}
.card h3{font-size:1.3rem}
.card h3 small{display:block;font-size:.92rem;font-weight:400;color:var(--taubenblau);margin-top:4px}
.card p{margin-top:14px;font-size:.95rem;color:var(--ink-muted)}
.card ul{margin-top:18px;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.card li{font-size:.74rem;font-weight:500;background:var(--hellblau);color:var(--tiefblau);padding:5px 10px;white-space:nowrap}

/* ---------- Methode ---------- */
.methode{background:var(--hellblau);padding:var(--section-py) 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;counter-reset:step}
@media (max-width:840px){.steps{grid-template-columns:1fr}}
.step{background:#fff;padding:32px 28px;border-top:6px solid var(--taubenblau)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  display:block;font-weight:800;font-size:2.2rem;line-height:1;color:var(--taubenblau);margin-bottom:16px}
.step h3{text-transform:uppercase;letter-spacing:.02em;font-size:1.05rem}
.step p{margin-top:12px;font-size:.95rem;color:var(--ink-muted)}

/* ---------- Mehrwert ---------- */
.mehrwert{padding:var(--section-py) 0}
.mw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 36px;margin-top:52px}
@media (max-width:980px){.mw-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.mw-grid{grid-template-columns:1fr;gap:34px}}
.mw{border-top:3px solid var(--gelb);padding-top:20px}
.mw h3{font-size:1.05rem}
.mw p{margin-top:10px;font-size:.93rem;color:var(--ink-muted);max-width:46ch}
.mw .fact{display:inline-block;margin-top:14px;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tiefblau);background:var(--hellblau);padding:6px 12px}

/* ---------- Referenzen ---------- */
.refs{background:var(--hellblau);padding:var(--section-py) 0}
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
@media (max-width:900px){.ref-grid{grid-template-columns:1fr}}
.ref{background:#fff;padding:30px 28px;display:flex;flex-direction:column}
.ref::before{content:"\201E";display:block;font-weight:800;font-size:3.4rem;line-height:.6;
  color:var(--taubenblau);margin-bottom:20px}
.ref blockquote{font-size:.97rem;color:var(--ink-muted);flex:1}
.ref.short blockquote{font-size:1.15rem;line-height:1.45;display:flex;align-items:center}
.ref figcaption{margin-top:20px;font-size:.74rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--taubenblau)}
.stats{display:flex;gap:2px;flex-wrap:wrap;margin-top:32px}
.stat{background:var(--tiefblau);color:#fff;padding:12px 20px;font-size:.82rem;font-weight:500}
.stat b{color:var(--gelb);font-weight:800;margin-right:8px}

/* ---------- Über uns ---------- */
.about{padding:var(--section-py) 0}
.about-inner{max-width:760px;border-left:5px solid var(--gelb);padding-left:34px}
@media (max-width:640px){.about-inner{padding-left:20px}}
.about p{margin-top:16px;color:var(--ink-muted);max-width:66ch}
.about .sig{margin-top:26px;font-weight:700;color:var(--tiefblau)}
.about .sig small{display:block;font-weight:400;color:var(--taubenblau);margin-top:2px}

/* ---------- FAQ ---------- */
.faq{background:var(--hellblau);padding:var(--section-py) 0}
.faq-list{margin-top:44px;max-width:860px;display:grid;gap:2px}
.faq details{background:#fff;border-left:4px solid transparent}
.faq details[open]{border-left-color:var(--gelb)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
  gap:18px;padding:20px 24px;min-height:44px;font-weight:500;color:var(--tiefblau)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-weight:700;font-size:1.4rem;line-height:1;color:var(--taubenblau)}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--taubenblau-800);background:var(--hellblau)}
.faq .answer{padding:0 24px 22px;color:var(--ink-muted);font-size:.95rem;max-width:66ch}

/* ---------- Check / CTA ---------- */
.check{background:var(--tiefblau);color:#fff;padding:var(--section-py) 0}
.check-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
@media (max-width:900px){.check-grid{grid-template-columns:1fr}}
.check .kicker{color:var(--gelb)}
.check h2{color:#fff}
.check .lead{margin-top:18px;color:var(--himmelblau);font-size:1.05rem;max-width:48ch}
.check .btn-y{margin-top:32px}
.checklist{list-style:none;display:grid;gap:2px}
.checklist li{display:flex;gap:14px;align-items:flex-start;background:var(--taubenblau-800);
  padding:16px 18px;font-size:.97rem}
.checklist li::before{content:"";flex:none;width:10px;height:10px;background:var(--gelb);margin-top:7px}
.micro{margin-top:20px;font-size:.85rem;color:var(--himmelblau);max-width:52ch}
.micro a{color:var(--gelb)}
.micro a:hover{color:#fff}

/* ---------- Fußzeile: Taubenblau-Balken ---------- */
.site-foot{background:var(--taubenblau);color:#fff;padding:52px 0 36px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:36px}
@media (max-width:840px){.foot{grid-template-columns:1fr;gap:28px}}
.site-foot img{height:26px;width:auto}
.site-foot p{font-size:.88rem;color:var(--hellblau);margin-top:14px;line-height:1.75}
.site-foot a{color:#fff}
.site-foot a:hover{color:var(--hellblau)}
.foot-label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.legal{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.25);
  display:flex;gap:24px;flex-wrap:wrap;align-items:center;font-size:.8rem;color:var(--hellblau)}
.legal a{color:var(--hellblau);text-decoration:none}
.legal a:hover{color:#fff}
.remote-btn{background:var(--gelb);color:var(--tiefblau)!important;font-weight:700;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;padding:12px 18px;margin-left:auto}
.remote-btn:hover{background:var(--gelb-600);color:var(--tiefblau)!important}
@media (max-width:640px){.remote-btn{margin-left:0}}

/* ---------- Rechtliche Seiten ---------- */
.page-hero{background:var(--tiefblau);color:#fff;padding:64px 0 56px}
.page-hero .kicker{color:var(--gelb)}
.doc{padding:64px 0 90px}
.doc .wrap{max-width:860px}
.doc h2{font-size:1.05rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--tiefblau);margin:42px 0 12px;padding-top:18px;border-top:3px solid var(--gelb);display:inline-block}
.doc h2:first-of-type{margin-top:0}
.doc h3{font-weight:500;font-size:1rem;margin:22px 0 8px}
.doc p,.doc ul{margin-bottom:12px;max-width:68ch;line-height:1.7}
.doc ul{padding-left:22px}
.doc address{font-style:normal}
.crumbs{font-size:.8rem;color:var(--hellblau);margin-bottom:16px}
.crumbs a{color:var(--hellblau)}
.crumbs a:hover{color:#fff}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}