@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --bg:#F5F5F7;
  --surface:#FFFFFF;
  --ink:#1D1D1F;
  --ink-soft:#6E6E73;
  --accent:#0071E3;
  --accent-bright:#409CFF;
  --border:#D2D2D7;
  --font-display:'Manrope',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img,svg{display:block;max-width:100%;}

/* ---------- Utility bar ---------- */
.utility-bar{
  background:linear-gradient(180deg,#FFFFFF 0%,#F2F2F4 100%);
  color:var(--ink);
  border-bottom:1px solid var(--border);
  position:relative;
}
.utility-inner{
  max-width:1100px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  height:52px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand-mark{width:26px;height:26px;flex-shrink:0;}
.brand-word{font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:-0.01em;color:var(--ink);}
.nav-collapse{display:flex;align-items:center;gap:20px;}
.main-nav{display:flex;gap:28px;list-style:none;margin:0;padding:0;}
.main-nav a{
  font-size:13px;color:var(--ink-soft);text-decoration:none;font-weight:500;
  transition:color .15s ease;
}
.main-nav a:hover, .main-nav a:focus-visible{color:var(--ink);}
.nav-cta{
  font-size:13px;font-weight:600;color:#fff;background:var(--accent);
  padding:7px 14px;border-radius:20px;text-decoration:none;white-space:nowrap;
}
.nav-cta:hover{background:var(--accent-bright);}
.menu-toggle{
  display:none;background:none;border:none;color:var(--ink);cursor:pointer;
  padding:6px;margin:-6px;
}
.menu-toggle svg{display:block;width:22px;height:22px;}

/* ---------- Hero ---------- */
.hero{
  max-width:900px;margin:0 auto;padding:64px 24px 40px;text-align:center;
}
.hero-mark{width:64px;height:64px;margin:0 auto 22px;}
.hero-eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.hero h1{
  font-family:var(--font-display);font-weight:800;font-size:44px;line-height:1.1;
  letter-spacing:-0.02em;margin:0 0 18px;
}
.hero p{
  font-size:18px;line-height:1.6;color:var(--ink-soft);max-width:600px;margin:0 auto 30px;
}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-body);font-weight:600;font-size:15px;
  padding:12px 24px;border-radius:24px;text-decoration:none;
  transition:transform .1s ease, opacity .15s ease;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{opacity:.88;}
.btn-secondary{background:var(--surface);color:var(--ink);border:1px solid var(--border);}
.btn-secondary:hover{border-color:var(--ink-soft);}

/* ---------- Wave signature ---------- */
.wave-divider{width:100%;height:64px;margin:12px 0 8px;}
.wave-path{
  fill:none;stroke:var(--accent-bright);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:6 10;
  animation:wave-flow 5s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .wave-path{animation:none;} }
@keyframes wave-flow{ to{ stroke-dashoffset:-160; } }

/* ---------- Icon grid ---------- */
.section{max-width:1100px;margin:0 auto;padding:36px 24px;}
.section-wide{max-width:1600px;margin:0 auto;padding:36px 28px;}
.section-label{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);text-align:center;margin-bottom:8px;
}
.section-title{
  font-family:var(--font-display);font-weight:800;font-size:28px;text-align:center;
  letter-spacing:-0.01em;margin:0 0 32px;
}
.icon-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
.icon-tile{
  border-radius:28px;
  padding:44px 32px 0;
  min-height:460px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  text-decoration:none;position:relative;overflow:hidden;
  transition:transform .18s ease;
}
.icon-tile:hover{transform:translateY(-3px);}
.icon-tile:last-child:nth-child(odd){grid-column:1 / -1;}
.icon-tile .tile-text h3{
  font-family:var(--font-display);font-weight:800;font-size:28px;line-height:1.2;
  margin:0 0 6px;letter-spacing:-0.01em;
}
.icon-tile .tile-text p{font-size:17px;line-height:1.4;margin:0 0 20px;}
.tile-buttons{display:flex;gap:12px;justify-content:center;margin-bottom:8px;}
.tile-btn{
  padding:10px 22px;border-radius:20px;font-size:15px;font-weight:600;
  text-decoration:none;border:1.5px solid transparent;white-space:nowrap;
}
.tile-btn.filled{background:var(--accent);color:#fff;}
.tile-btn.filled:hover{background:var(--accent-bright);}
.tile-btn.outline{border-color:var(--accent);color:var(--accent);background:transparent;}
.tile-btn.outline:hover{background:rgba(0,113,227,0.08);}
.tile-media{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;min-height:120px;}
.tile-media img{width:auto;max-width:82%;max-height:100%;object-fit:contain;}
.icon-tile.blue .tile-media img{max-width:55%;}

.icon-tile.dark{background:linear-gradient(160deg,#2B2D31 0%,#0A0B0D 100%);color:#fff;}
.icon-tile.dark .tile-text p{color:#A1A1A6;}
.icon-tile.dark .tile-btn.outline{border-color:var(--accent-bright);color:var(--accent-bright);}

.icon-tile.blue{background:linear-gradient(160deg,#3B9CFF 0%,#0052B3 100%);color:#fff;}
.icon-tile.blue .tile-text p{color:#DCEEFF;}
.icon-tile.blue .tile-btn.filled{background:#fff;color:#0052B3;}
.icon-tile.blue .tile-btn.filled:hover{background:#EAF3FF;}
.icon-tile.blue .tile-btn.outline{border-color:#fff;color:#fff;}
.icon-tile.blue .tile-btn.outline:hover{background:rgba(255,255,255,0.12);}

.icon-tile.light{background:linear-gradient(160deg,#EAF3FF 0%,#FFFFFF 100%);color:var(--ink);border:1px solid var(--border);}
.icon-tile.light .tile-text p{color:var(--ink-soft);}

@media (max-width:720px){
  .icon-grid{grid-template-columns:1fr;}
  .icon-tile:last-child:nth-child(odd){grid-column:auto;}
  .icon-tile{min-height:400px;}
}

/* ---------- Feature tiles ---------- */
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.feature-tile{
  background:var(--surface);border:1px solid var(--border);border-radius:24px;
  padding:40px;display:flex;flex-direction:column;gap:12px;min-height:240px;justify-content:center;
}
.feature-tile.wide{
  grid-column:1 / -1;
  background:linear-gradient(160deg,#2B2D31 0%,#0A0B0D 100%);color:#fff;border:none;
  min-height:290px;
}
.feature-tile.wide p{color:#A1A1A6;}
.feature-tile.wide .tag{color:#5AB0FF;}
.feature-tile.wide a.link{color:#5AB0FF;}
.feature-tile .tag{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);
}
.feature-tile h3{font-family:var(--font-display);font-weight:800;font-size:26px;margin:0;letter-spacing:-0.01em;}
.feature-tile.wide h3{font-size:32px;max-width:520px;}
.feature-tile p{font-size:18px;line-height:1.6;color:var(--ink-soft);margin:0;max-width:520px;}
.feature-tile a.link{font-size:16px;font-weight:600;color:var(--accent);text-decoration:none;margin-top:4px;}
.feature-tile a.link:hover{color:var(--accent-bright);}

/* ---------- Teaser tile (Apple-Kachel-Stil) ---------- */
.teaser-tile{
  background:linear-gradient(160deg,#3B9CFF 0%,#0052B3 100%);border-radius:28px;color:#fff;
  display:flex;align-items:stretch;overflow:hidden;margin:8px 0 28px;min-height:320px;
  box-shadow:0 40px 70px -24px rgba(6,45,92,0.45), 0 14px 26px -10px rgba(6,45,92,0.28);
  transition:transform .25s ease, box-shadow .25s ease;
}
.teaser-tile:hover{
  transform:translateY(-6px);
  box-shadow:0 50px 80px -20px rgba(6,45,92,0.5), 0 18px 30px -8px rgba(6,45,92,0.32);
}
.teaser-content{flex:1 1 55%;padding:48px;display:flex;flex-direction:column;justify-content:center;gap:14px;}
.teaser-eyebrow{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:#CFE6FF;
}
.teaser-content h3{font-family:var(--font-display);font-weight:800;font-size:36px;line-height:1.15;margin:0;letter-spacing:-0.01em;max-width:460px;}
.teaser-content p{font-size:19px;line-height:1.55;color:#E4F0FF;margin:0 0 8px;max-width:440px;}
.teaser-courses{display:flex;flex-direction:column;gap:16px;margin:2px 0 6px;}
.teaser-course-item h4{font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.25;margin:0 0 4px;color:#fff;}
.teaser-course-item p{font-size:14.5px;line-height:1.55;color:#DCEEFF;margin:0;max-width:440px;}
.teaser-content .btn-primary{background:#fff;color:#0052B3;}
.teaser-content .btn-primary:hover{background:#EAF3FF;opacity:1;}
.teaser-visual{
  flex:0 0 42%;position:relative;overflow:hidden;
}
.teaser-visual img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.teaser-visual::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#0052B3 0%,rgba(0,82,179,0.35) 30%,rgba(0,82,179,0) 60%);
}
@media (max-width:720px){
  .teaser-tile{flex-direction:column;}
  .teaser-visual{flex:none;height:200px;}
  .teaser-visual::before{background:linear-gradient(0deg,#0052B3 0%,rgba(0,82,179,0.25) 35%,rgba(0,82,179,0) 70%);}
  .teaser-course-item h4{font-size:17px;}
}

/* ---------- Book teaser ---------- */
.book-tile{
  background:var(--surface);border:1px solid var(--border);border-radius:28px;
  display:flex;align-items:stretch;overflow:hidden;margin:8px 0 28px;
  box-shadow:0 30px 60px -26px rgba(20,20,22,0.22), 0 10px 22px -10px rgba(20,20,22,0.1);
}
.book-cover-wrap{
  flex:0 0 320px;display:flex;align-items:center;justify-content:center;padding:40px;
  background:linear-gradient(160deg,#F5F5F7 0%,#E8E8EA 100%);
}
.book-cover-wrap img, .book-cover-placeholder{
  max-width:190px;width:100%;border-radius:6px;
  box-shadow:0 24px 44px -14px rgba(0,0,0,0.4);
}
.book-cover-placeholder{
  aspect-ratio:2/3;background:linear-gradient(160deg,#2B2D31 0%,#0A0B0D 100%);
  display:flex;align-items:center;justify-content:center;color:#5AB0FF;
}
.book-cover-placeholder svg{width:52px;height:52px;}
.book-content{flex:1;padding:44px 52px;display:flex;flex-direction:column;justify-content:center;gap:12px;}
.book-eyebrow{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);
}
.book-content h3{font-family:var(--font-display);font-weight:800;font-size:30px;margin:0;letter-spacing:-0.01em;}
.book-content p{font-size:18px;line-height:1.6;color:var(--ink-soft);margin:0 0 6px;max-width:600px;}
.book-content .btn-primary{align-self:flex-start;}
@media (max-width:720px){
  .book-tile{flex-direction:column;}
  .book-cover-wrap{flex:none;padding:32px;}
  .book-content{padding:32px;}
}

/* ---------- Stats strip ---------- */
.stats{
  display:flex;justify-content:center;gap:56px;flex-wrap:wrap;
  padding:28px 24px;
}
.stat{text-align:center;}
.stat .num{font-family:var(--font-mono);font-weight:500;font-size:26px;color:var(--accent);}
.stat .lbl{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}

/* ---------- Footer ---------- */
footer{background:linear-gradient(180deg,#F2F2F4 0%,#FFFFFF 100%);color:var(--ink-soft);margin-top:40px;border-top:1px solid var(--border);}
.footer-inner{max-width:1100px;margin:0 auto;padding:48px 24px 24px;}
.footer-cols{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  padding-bottom:32px;border-bottom:1px solid var(--border);
}
.footer-col h4{font-size:13px;color:var(--ink);margin:0 0 12px;font-weight:600;}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin-bottom:9px;}
.footer-col a{font-size:13px;color:var(--ink-soft);text-decoration:none;}
.footer-col a:hover{color:var(--ink);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  padding-top:18px;font-size:12.5px;color:var(--ink-soft);
}
.footer-legal{display:flex;gap:18px;flex-wrap:wrap;}
.footer-legal a{color:var(--ink-soft);text-decoration:none;}
.footer-legal a:hover{color:var(--ink);}

/* ---------- Legal pages ---------- */
.legal-hero{max-width:760px;margin:0 auto;padding:48px 24px 8px;}
.legal-hero .section-label{text-align:left;}
.legal-hero h1{font-family:var(--font-display);font-weight:800;font-size:32px;margin:6px 0 0;}
.legal-body{max-width:760px;margin:0 auto;padding:24px 24px 80px;line-height:1.75;font-size:15px;color:var(--ink);}
.legal-body h2{font-family:var(--font-display);font-weight:700;font-size:19px;margin:34px 0 10px;}
.legal-body h3{font-size:15px;font-weight:600;margin:20px 0 6px;}
.legal-body p{margin:0 0 14px;color:#3A3A3C;}
.legal-body ul{margin:0 0 14px;padding-left:20px;color:#3A3A3C;}
.legal-body li{margin-bottom:6px;}
.legal-body a{color:var(--accent);}
.legal-address{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:18px 20px;margin:18px 0;font-size:14.5px;line-height:1.7;
}
.back-link{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-soft);
  text-decoration:none;margin-bottom:6px;
}
.back-link:hover{color:var(--ink);}

/* ---------- Responsive ---------- */
.utility-inner{flex-wrap:nowrap;}
.nav-collapse{flex-wrap:nowrap;}
.main-nav{flex-wrap:nowrap;}
@media (max-width:900px){
  .nav-collapse{
    display:none;
    position:absolute;
    top:52px;left:0;right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    background:#FFFFFF;
    padding:20px 24px 26px;
    border-bottom:1px solid var(--border);
    box-shadow:0 16px 28px rgba(20,20,22,0.1);
    z-index:60;
  }
  .nav-collapse.is-open{display:flex;}
  .main-nav{display:flex;flex-direction:column;gap:14px;}
  .menu-toggle{display:block;}
  .hero h1{font-size:32px;}
  .icon-grid{grid-template-columns:1fr 1fr;}
  .feature-grid{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .icon-grid{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:1fr;}
  .stats{gap:28px;}
}

:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;}

[data-parallax]{will-change:transform;}

.reveal{
  opacity:0;transform:translateY(46px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- Auth / Kundenbereich ---------- */
.auth-wrap{max-width:420px;margin:0 auto;padding:64px 24px 80px;}
.auth-card{
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:32px;
}
.auth-tabs{display:flex;gap:6px;background:var(--bg);border-radius:10px;padding:4px;margin-bottom:22px;}
.auth-tab{
  flex:1;text-align:center;padding:9px 0;border-radius:8px;font-size:13.5px;font-weight:600;
  cursor:pointer;color:var(--ink-soft);background:none;border:none;font-family:var(--font-body);
}
.auth-tab.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08);}
.auth-field label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
.auth-field input{
  width:100%;padding:11px 12px;border-radius:8px;border:1px solid var(--border);
  font-family:var(--font-body);font-size:15px;margin-bottom:16px;background:var(--bg);color:var(--ink);
}
.auth-field input:focus{outline:none;border-color:var(--accent-bright);}
.auth-error{color:#B3261E;font-size:13px;margin:-6px 0 14px;}
.auth-submit{
  width:100%;border:none;background:var(--accent);color:#fff;font-family:var(--font-body);
  font-weight:600;font-size:15px;padding:12px;border-radius:24px;cursor:pointer;
}
.auth-submit:hover{opacity:.9;}
.auth-hint{font-size:12.5px;color:var(--ink-soft);text-align:center;margin-top:16px;}

.kb-header{max-width:1100px;margin:0 auto;padding:40px 24px 8px;}
.kb-header .section-label{text-align:left;}
.kb-header h1{font-family:var(--font-display);font-weight:800;font-size:30px;margin:6px 0 0;}
.kb-card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:26px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:16px;
}
.kb-card .kb-card-text h3{font-family:var(--font-display);font-weight:700;font-size:18px;margin:0 0 4px;}
.kb-card .kb-card-text p{font-size:14px;color:var(--ink-soft);margin:0;max-width:480px;}

.data-table{width:100%;border-collapse:collapse;font-size:14px;}
.data-table th,.data-table td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--border);}
.data-table th{
  font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-soft);
}
.logout-link{font-size:13px;color:var(--ink-soft);text-decoration:none;}
.logout-link:hover{color:var(--ink);}