@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--bg:#06111f;--panel:#0a1a2e;--line:rgba(137,190,255,.2);--text:#edf5ff;--muted:#9bb1ca;--blue:#4aa6ff;--blue2:#79c7ff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 80% 5%,#0e2947 0,transparent 30%),var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;line-height:1.6}
.topbar{height:84px;max-width:1240px;margin:auto;padding:10px 28px;display:flex;align-items:center;justify-content:space-between}.brand img{height:62px;width:auto;object-fit:contain}.topbar nav{display:flex;align-items:center;gap:28px}.topbar a{color:var(--muted);text-decoration:none;font-size:14px}.topbar a:hover{color:white}.topbar .nav-cta{background:#147fd7;color:#fff;padding:10px 17px;border-radius:9px}.menu-btn{display:none;background:none;border:0;color:white;font-size:27px}
.hero{min-height:670px;max-width:1240px;margin:auto;padding:90px 28px 80px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}.eyebrow{color:var(--blue2);font-size:12px;font-weight:700;letter-spacing:2.2px;margin:0 0 12px}.hero h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;line-height:1.1}.hero h1{font-size:clamp(48px,6vw,82px);margin:0 0 25px;letter-spacing:-3px}.hero h1 span{color:var(--blue2)}.lead{font-size:19px;max-width:650px;color:var(--muted)}.actions,.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:10px;text-decoration:none;font-weight:700}.primary{background:linear-gradient(135deg,#198ce9,#55b5ff);color:white;box-shadow:0 10px 30px #147fd740}.secondary{border:1px solid var(--line);color:var(--text);background:#0b1a2b}.trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;font-size:13px;color:#afc3d9}.hero-card{position:relative;min-height:460px;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:linear-gradient(145deg,#0b2039,#06111f 65%);display:flex;align-items:center;justify-content:center}.hero-card img{width:82%;z-index:2;filter:drop-shadow(0 0 30px #248de966)}.hero-card p{position:absolute;bottom:25px;color:var(--muted);font-size:12px;letter-spacing:1px}.glow{position:absolute;width:300px;height:300px;border-radius:50%;background:#168ff855;filter:blur(60px)}
.emergency{max-width:1184px;margin:0 auto 100px;padding:38px 44px;border:1px solid #2d8fdf55;border-radius:18px;background:linear-gradient(100deg,#0b2c4d,#09182a);display:flex;align-items:center;justify-content:space-between;gap:30px}.emergency h2{font-size:36px;margin:0}.emergency p:not(.eyebrow){margin:8px 0 0;color:var(--muted)}.phone{white-space:nowrap;background:white;color:#09203a;text-decoration:none;padding:16px 25px;border-radius:10px;font-weight:800}
.section{max-width:1184px;margin:0 auto;padding:80px 28px}.section h2,.contact h2{font-size:clamp(36px,5vw,58px);margin:0 0 18px;letter-spacing:-2px}.intro{max-width:700px;color:var(--muted);font-size:17px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:42px}.grid article{padding:25px;border:1px solid var(--line);background:#081829;border-radius:15px;min-height:220px;transition:.2s}.grid article:hover{transform:translateY(-4px);border-color:#4aa6ff88}.grid h3{margin:18px 0 10px;font-size:19px}.grid p{color:var(--muted);font-size:14px}.icon{color:var(--blue2);font-size:28px}
.split{max-width:1184px;margin:20px auto 60px;padding:0 28px;display:grid;grid-template-columns:1fr 1fr;gap:18px}.panel{padding:48px;border-radius:20px;border:1px solid var(--line)}.business{background:linear-gradient(140deg,#0b2742,#071422)}.private{background:linear-gradient(140deg,#10233a,#091321)}.panel h2{font-size:36px;margin:0 0 16px}.panel p:not(.eyebrow),.panel li{color:var(--muted)}.panel ul{padding-left:20px}.panel a{color:var(--blue2);font-weight:700;text-decoration:none}
.about{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;border-top:1px solid var(--line)}.about>div:last-child>p{color:var(--muted);font-size:17px}.stats{display:flex;flex-direction:column;gap:14px;margin-top:25px}.stats strong{color:var(--blue2);margin-right:7px}
.contact{text-align:center;padding:100px 28px;background:radial-gradient(circle at center,#123b6388,transparent 55%);border-top:1px solid var(--line)}.contact>p:not(.eyebrow){color:var(--muted);max-width:650px;margin:0 auto}.contact-actions{justify-content:center}.small{font-size:12px;margin-top:30px!important;opacity:.7}
footer{max-width:1184px;margin:auto;padding:35px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);color:#7189a2;font-size:12px}footer img{height:46px;width:auto}footer div{display:flex;gap:20px}footer a{color:#91a8c0;text-decoration:none}
.legal{max-width:850px;margin:80px auto;padding:0 28px;color:var(--muted)}.legal h1,.legal h2{color:var(--text)}
@media(max-width:850px){.topbar nav{display:none}.menu-btn{display:block}.menu-open .topbar nav{display:flex;position:absolute;top:78px;left:0;right:0;padding:25px;background:#081625;flex-direction:column;align-items:flex-start;z-index:5}.hero{grid-template-columns:1fr;padding-top:55px}.hero-card{min-height:350px}.grid{grid-template-columns:repeat(2,1fr)}.split,.about{grid-template-columns:1fr}.emergency{margin:0 20px 50px;padding:30px;flex-direction:column;align-items:flex-start}.about{gap:20px}footer{flex-direction:column;text-align:center}.hero h1{letter-spacing:-2px}}
@media(max-width:520px){.grid{grid-template-columns:1fr}.section{padding:60px 20px}.hero{padding:40px 20px 60px}.panel{padding:30px}.topbar{padding:10px 18px}.brand img{height:55px}.hero-card{min-height:280px}.emergency{margin-left:15px;margin-right:15px}.phone{width:100%;text-align:center}}

.quick-links{max-width:1184px;margin:-35px auto 85px;padding:0 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;position:relative;z-index:2}.quick-links a{padding:22px;border:1px solid var(--line);border-radius:13px;background:#09192a;text-decoration:none;color:var(--text)}.quick-links strong{display:block;font-family:"Space Grotesk";font-size:16px}.quick-links span{display:block;color:var(--blue2);font-size:12px;margin-top:4px}
.hero-badges{position:absolute;bottom:30px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;z-index:3}.hero-badges span,.tag{font-size:11px;letter-spacing:1px;padding:7px 10px;border:1px solid #69b8ff55;border-radius:20px;background:#061728cc;color:#9bd4ff}
.microsoft-band{padding:95px max(28px,calc((100% - 1128px)/2));display:grid;grid-template-columns:1fr 1fr;gap:65px;background:linear-gradient(135deg,#0a2440,#07111e)}.ms-intro p:not(.eyebrow){color:var(--muted);font-size:17px;max-width:620px}.ms-intro h2{font-size:clamp(38px,5vw,60px);margin:0 0 20px;line-height:1.05}.ms-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ms-grid>div{padding:26px;background:#0b1b2d;border:1px solid var(--line);border-radius:15px}.ms-grid h3{margin:15px 0 8px}.ms-grid p{color:var(--muted);font-size:14px}.ms-mark{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:11px;background:linear-gradient(135deg,#167dd1,#6ac2ff);font-size:12px;font-weight:800}
.usecases h2 span,.trainer-copy span{color:var(--blue2)}.process{display:grid;grid-template-columns:repeat(4,1fr);margin-top:45px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.process>div{padding:28px 24px;border-right:1px solid var(--line)}.process>div:last-child{border:0}.process b{font-size:12px;color:var(--blue2);letter-spacing:2px}.process h3{margin:14px 0 8px}.process p{font-size:14px;color:var(--muted)}
.training{max-width:1184px;margin:0 auto;padding:95px 28px}.training-head{max-width:760px}.training-head h2{font-size:clamp(40px,5vw,62px);margin:0 0 18px}.training-head p:not(.eyebrow){color:var(--muted);font-size:17px}.training-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}.training-grid article{border:1px solid var(--line);background:#091827;padding:30px;border-radius:17px;min-height:330px;display:flex;flex-direction:column}.training-grid .featured{background:linear-gradient(145deg,#103458,#091a2c);border-color:#55aeff88}.training-grid h3{font-size:24px;margin:18px 0 10px}.training-grid p,.training-grid li{font-size:14px;color:var(--muted)}.training-grid ul{padding-left:18px;flex:1}.training-grid a{color:var(--blue2);font-weight:700;text-decoration:none;margin-top:18px}
.trainer-section{max-width:1184px;margin:20px auto 80px;padding:65px 55px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at 85% 10%,#1c6eaf44,transparent 35%),#081625;display:grid;grid-template-columns:1fr 1fr;gap:70px}.trainer-copy h2{font-size:clamp(38px,5vw,58px);margin:0 0 20px}.trainer-copy p:not(.eyebrow){color:var(--muted);font-size:17px}.trainer-points{display:grid;grid-template-columns:1fr 1fr;gap:14px}.trainer-points>div{padding:23px;border:1px solid var(--line);border-radius:13px;background:#0a1b2d}.trainer-points strong,.trainer-points span{display:block}.trainer-points strong{margin-bottom:7px}.trainer-points span{color:var(--muted);font-size:13px}
.faq{max-width:900px}.faq details{padding:19px 0;border-bottom:1px solid var(--line)}.faq summary{font-family:"Space Grotesk";font-size:18px;font-weight:600;cursor:pointer}.faq details p{color:var(--muted);margin:12px 0 0}
@media(max-width:850px){.quick-links{grid-template-columns:1fr 1fr;margin:0 auto 45px}.microsoft-band{grid-template-columns:1fr;padding:70px 28px}.process{grid-template-columns:1fr 1fr}.process>div:nth-child(2){border-right:0}.process>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.training-grid{grid-template-columns:1fr 1fr}.trainer-section{margin:20px;padding:40px;grid-template-columns:1fr;gap:30px}}
@media(max-width:520px){.quick-links{grid-template-columns:1fr;padding:0 20px}.ms-grid,.training-grid,.trainer-points,.process{grid-template-columns:1fr}.process>div{border-right:0;border-bottom:1px solid var(--line)}.process>div:last-child{border-bottom:0}.trainer-section{padding:28px 22px}.training{padding:70px 20px}}


/* =========================================================
   MOBILE-FIRST OPTIMIERUNG
   ========================================================= */
@media (max-width: 700px) {
  html { scroll-padding-top: 74px; }
  body { overflow-x: hidden; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 72px;
    padding: 7px 16px;
    background: rgba(6,17,31,.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }

  .brand img { height: 54px; max-width: 220px; object-fit: contain; }
  .menu-btn {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #0a1a2c;
  }

  .menu-open .topbar nav {
    top: 71px;
    padding: 18px 20px 24px;
    gap: 4px;
    background: #081625;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(0,0,0,.28);
  }
  .menu-open .topbar nav a {
    width: 100%;
    padding: 12px 8px;
    font-size: 15px;
  }
  .menu-open .topbar nav .nav-cta {
    text-align: center;
    margin-top: 8px;
  }

  .hero {
    min-height: auto;
    padding: 42px 20px 48px;
    gap: 32px;
  }
  .hero h1 {
    font-size: clamp(42px, 12vw, 58px);
    line-height: 1.02;
    letter-spacing: -2px;
  }
  .lead { font-size: 16px; line-height: 1.65; }
  .actions, .contact-actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .btn { width: 100%; min-height: 52px; font-size: 15px; }
  .trust { gap: 10px; flex-direction: column; margin-top: 22px; }

  .hero-card {
    min-height: 300px;
    border-radius: 18px;
  }
  .hero-card img { width: 90%; }
  /* Das Logo enthält bereits die Beschriftung im unteren Bereich.
     Mobile Zusatz-Badges würden diese Schrift überdecken. */
  .hero-badges { display: none; }
  .hero-card img {
    width: min(92%, 440px);
    max-height: 270px;
    object-fit: contain;
  }
  .hero-card { padding: 14px; }
  .hero-card p { display: none; }

  .quick-links {
    padding: 0 16px;
    margin: 0 auto 52px;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .quick-links a { padding: 17px 14px; min-height: 92px; }

  .emergency {
    margin: 0 16px 58px;
    padding: 28px 22px;
    border-radius: 16px;
    gap: 22px;
  }
  .emergency h2 { font-size: 32px; }
  .phone { width: 100%; min-height: 54px; display:flex; align-items:center; justify-content:center; }

  .section, .training { padding: 62px 20px; }
  .section h2, .contact h2, .training-head h2 {
    font-size: clamp(34px, 10vw, 46px);
    letter-spacing: -1.5px;
  }
  .intro, .training-head p:not(.eyebrow) { font-size: 16px; }

  .grid, .training-grid, .ms-grid, .process, .trainer-points {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .grid article { min-height: auto; padding: 22px; }
  .training-grid article { min-height: auto; padding: 24px; }
  .training-grid h3 { font-size: 22px; }

  .microsoft-band {
    padding: 65px 20px;
    gap: 34px;
  }
  .ms-grid > div { padding: 22px; }

  .process {
    margin-top: 30px;
    border-top: 1px solid var(--line);
  }
  .process > div,
  .process > div:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 24px 4px;
  }
  .process > div:last-child { border-bottom: 0; }

  .trainer-section {
    margin: 0 16px 55px;
    padding: 38px 22px;
    border-radius: 18px;
  }
  .trainer-copy h2 { font-size: 40px; }
  .trainer-points > div { padding: 20px; }

  .split {
    padding: 0 16px;
    gap: 12px;
    margin-bottom: 45px;
  }
  .panel { padding: 30px 23px; border-radius: 17px; }
  .panel h2 { font-size: 32px; }

  .faq { padding-left: 20px; padding-right: 20px; }
  .faq summary { font-size: 16px; padding-right: 18px; }

  .about { gap: 20px; }
  .about > div:last-child > p { font-size: 16px; }

  .contact { padding: 72px 20px; }
  .contact .small { font-size: 11px; }

  footer {
    padding: 30px 20px calc(34px + env(safe-area-inset-bottom));
    gap: 18px;
  }
  footer img { height: 42px; max-width: 190px; object-fit: contain; }
  footer div { flex-wrap: wrap; justify-content: center; }

  .legal {
    margin: 42px auto;
    padding: 0 20px 45px;
  }
  .legal h1 { font-size: 40px; }
}

/* Extra small smartphones */
@media (max-width: 390px) {
  .hero { padding-left: 16px; padding-right: 16px; }
  .hero h1 { font-size: 40px; }
  .quick-links { padding: 0 12px; }
  .quick-links a { padding: 14px 11px; }
  .hero-card { min-height: 260px; }
  .section, .training { padding-left: 16px; padding-right: 16px; }
  .section h2, .contact h2, .training-head h2 { font-size: 34px; }
}

/* Touch usability */
@media (hover: none) and (pointer: coarse) {
  a, button, summary { -webkit-tap-highlight-color: transparent; }
  .grid article:hover { transform: none; }
  .btn, .phone, .quick-links a { touch-action: manipulation; }
}

/* Kontaktformular */
.contact-form{max-width:760px;margin:34px auto 0;text-align:left;padding:24px;border:1px solid var(--line);border-radius:18px;background:#081829}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-form label{display:flex;flex-direction:column;gap:7px;color:#c9d8e8;font-size:14px;font-weight:600}.contact-form label.full{grid-column:1/-1}.contact-form input,.contact-form select,.contact-form textarea{width:100%;box-sizing:border-box;border:1px solid #294762;background:#06111f;color:var(--text);border-radius:10px;padding:13px 14px;font:inherit;outline:none}.contact-form textarea{resize:vertical;min-height:130px}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:#55b5ff;box-shadow:0 0 0 3px #198ce922}.consent{margin:18px 0!important;display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px;line-height:1.45;font-size:12px!important;font-weight:400!important;color:var(--muted)!important}.consent input{width:auto;min-width:16px;margin-top:3px}.consent a{color:var(--blue2)}.submit-btn{border:0;cursor:pointer;width:100%;font-size:16px}.form-honeypot{position:absolute!important;left:-9999px!important;opacity:0!important;pointer-events:none!important}@media(max-width:600px){.contact-form{padding:18px 14px}.form-grid{grid-template-columns:1fr}.contact-form label.full{grid-column:auto}}