:root{
  --navy:#0A1628;
  --card:#111F36;
  --card2:#16283F;
  --border:#233350;
  --blue:#5BA4F5;
  --text:#D7E0EE;
  --muted:#9CAAC4;
  --green:#3ECF7A;
  --amber:#F0B942;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--navy);color:var(--text);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Syne','Plus Jakarta Sans',sans-serif;color:#fff;line-height:1.2;}
a{color:var(--blue);}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px;}

/* Kopf */
header.top{
  position:sticky;top:0;z-index:20;background:rgba(10,22,40,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
}
.top .wrap{display:flex;align-items:center;gap:28px;padding-top:16px;padding-bottom:16px;}
.top img{height:26px;}
.top nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap;}
.top nav a{color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:600;}
.top nav a:hover,.top nav a.on{color:#fff;}

/* Hero */
.hero{padding:64px 0 34px;}
.pill{
  display:inline-block;color:var(--blue);border:1px solid var(--blue);
  font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:8px 18px;border-radius:999px;margin-bottom:22px;
}
.hero h1{font-size:2.5rem;font-weight:800;margin:0 0 20px;max-width:760px;}
.hero p.lead{max-width:680px;font-size:1.08rem;color:var(--muted);margin:0;}

/* Karten */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:40px 0 20px;}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;
  display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;
  transition:border-color .18s ease,transform .18s ease;
}
a.card:hover{border-color:var(--blue);transform:translateY(-3px);}
.card h3{margin:0;font-size:1.3rem;}
.card p{margin:0;color:var(--muted);font-size:.97rem;}
.num{
  font-family:'Syne',sans-serif;font-size:.78rem;font-weight:800;letter-spacing:.14em;
  color:var(--blue);text-transform:uppercase;
}
.badge{
  align-self:flex-start;margin-top:6px;font-size:.74rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 12px;border-radius:999px;border:1px solid;
}
.badge.ready{color:var(--green);border-color:rgba(62,207,122,.5);background:rgba(62,207,122,.08);}
.badge.wait{color:var(--amber);border-color:rgba(240,185,66,.5);background:rgba(240,185,66,.08);}

/* Inhalt */
section.block{padding:26px 0 8px;}
section.block h2{font-size:1.75rem;margin:34px 0 14px;}
section.block h3{font-size:1.15rem;margin:26px 0 8px;}
p,li{font-size:1rem;}
ul,ol{padding-left:22px;}
li{margin:6px 0;}
.panel{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:26px 28px;margin:22px 0;}
.panel.note{border-left:3px solid var(--blue);}
.panel.warn{border-left:3px solid var(--amber);}
.panel h3{margin-top:0;}
table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.95rem;}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:top;}
th{color:#fff;font-weight:700;background:var(--card2);}
code{background:var(--card2);padding:2px 6px;border-radius:5px;font-size:.88em;}

/* Videoplätze */
.video{
  background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin:18px 0;
}
.video .thumb{
  aspect-ratio:16/9;background:linear-gradient(140deg,#16283F,#0d1b30);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.video .play{
  width:66px;height:66px;border-radius:50%;background:var(--blue);
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.video .play::before{
  content:"";width:0;height:0;border-top:13px solid transparent;border-bottom:13px solid transparent;
  border-left:20px solid var(--navy);margin-left:5px;
}
.video .thumb .soon{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);font-weight:700;
}
.video .meta{padding:18px 22px;}
.video .meta strong{color:#fff;display:block;font-size:1.05rem;}
.video .meta span{color:var(--muted);font-size:.9rem;}

/* Schritte */
.steps{counter-reset:s;list-style:none;padding:0;margin:20px 0;}
.steps li{
  counter-increment:s;position:relative;padding:16px 0 16px 56px;border-bottom:1px solid var(--border);
}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:14px;width:34px;height:34px;border-radius:10px;
  background:var(--card2);border:1px solid var(--border);color:var(--blue);
  font-family:'Syne',sans-serif;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.steps li strong{color:#fff;}

/* Kette */
.chain{display:grid;gap:10px;margin:22px 0;}
.chain div{
  background:var(--card);border:1px solid var(--border);border-left:3px solid var(--blue);
  border-radius:12px;padding:14px 18px;
}
.chain div b{color:#fff;}
.chain div span{color:var(--muted);display:block;font-size:.93rem;}

footer{border-top:1px solid var(--border);margin-top:70px;padding:28px 0 60px;color:var(--muted);font-size:.86rem;}
footer a{color:var(--muted);}
@media(max-width:640px){
  .hero h1{font-size:1.9rem;}
  .top nav{gap:14px;}
}

/* Knopf-Kacheln */
a.card{position:relative;}
a.card .go{
  margin-top:14px;display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  background:var(--blue);color:#07182c;font-weight:800;font-size:.95rem;
  padding:11px 20px;border-radius:10px;box-shadow:0 8px 20px rgba(91,164,245,.18);
}
a.card .go::after{content:"→";font-size:1.05rem;}
a.card:hover .go{background:#7ab6ff;}

/* Screenshots */
figure.shot{margin:22px 0;background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
figure.shot img{width:100%;display:block;}
figure.shot figcaption{padding:13px 18px;color:var(--muted);font-size:.88rem;border-top:1px solid var(--border);}
.shots{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.shots figure{margin:0;}

/* Wer macht was */
.tag{
  display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 10px;border-radius:6px;margin-right:8px;vertical-align:middle;
}
.tag.auto{background:rgba(62,207,122,.14);color:var(--green);}
.tag.hand{background:rgba(91,164,245,.14);color:var(--blue);}
.tag.flo{background:rgba(240,185,66,.14);color:var(--amber);}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 26px;color:var(--muted);font-size:.9rem;}

/* Ablauf-Skizze */
.flow{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px;margin:24px 0;overflow-x:auto;}
.flow svg{display:block;min-width:680px;width:100%;height:auto;}

/* Schritt-Block */
.step{
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px 26px;margin:18px 0;
}
.step .kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px;}
.step .nr{
  width:36px;height:36px;border-radius:10px;background:var(--card2);border:1px solid var(--border);
  color:var(--blue);font-family:'Syne',sans-serif;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.step h3{margin:0;font-size:1.2rem;}
.step p{margin:8px 0 0;}
.step p.was{color:var(--muted);}

a.card .go{margin-top:auto;}
a.card p{margin-bottom:6px;}