:root{
  --bg: #0b0f14;
  --surface: #111827;
  --muted: #6b7280;
  --text: #e5e7eb;
  --brand: #60a5fa;
  --brand-2: #a78bfa;
  --accent: #34d399;
  --card: #0f172a;
  --ring: #94a3b8;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 10% -20%, rgba(96,165,250,.10), transparent 50%),
              radial-gradient(1000px 500px at 110% 10%, rgba(167,139,250,.10), transparent 40%),
              var(--bg);
  color:var(--text);
  font: 16px/1.65 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
}

.container{max-width:1100px;margin:0 auto;padding:24px}
.header {
  background: #f0f0f0;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  color: #111;
}

.header .nav .muted,
.header .nav strong {
  color: #111;
}

.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 24px}
.nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);font-weight:700}
.badge{font-size:.75rem;padding:2px 8px;border:1px solid rgba(148,163,184,.3);border-radius:999px;color:var(--muted)}
.actions a{margin-left:12px;padding:10px 14px;border-radius:12px;text-decoration:none;border:1px solid rgba(148,163,184,.25);color:var(--text)}
.actions a.primary{background:linear-gradient(90deg, var(--brand), var(--brand-2));border:none;color:#0b1020;font-weight:700}

.hero{padding:64px 24px;text-align:center}
.hero h1{font-size:clamp(28px, 4vw, 46px);line-height:1.1;margin:0 0 12px}
.hero p{max-width:850px;margin:0 auto;color:var(--muted);font-size:1.1rem}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:32px}
.card{grid-column: span 12;background:linear-gradient(180deg, rgba(15,23,42,.9), rgba(15,23,42,.7));border:1px solid rgba(148,163,184,.18);border-radius:18px;overflow:hidden}
@media(min-width:860px){ .card{grid-column: span 6} }
.card .card-hd{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px dashed rgba(148,163,184,.2)}
.card .card-bd{padding:20px}
.card h3{margin:0;font-size:1.1rem}
.card p{margin:0;color:var(--muted)}

.content{
  background: linear-gradient(180deg, rgba(2,6,23,.8), rgba(2,6,23,.6));
  border:1px solid rgba(148,163,184,.2);
  border-radius:18px;
  padding:26px;
  margin:40px 0;
}
.content :is(h1,h2,h3){scroll-margin-top:84px}
.content h1,.content h2,.content h3{color:#fff}
.content h1{font-size:2rem;margin-top:0}
.content h2{font-size:1.5rem;margin-top:2rem}
.content h3{font-size:1.2rem;margin-top:1.5rem}
.content p{color:var(--text)}
.content a{color:var(--brand);text-decoration:none;border-bottom:1px dashed rgba(96,165,250,.5)}
.content a:hover{border-bottom-style:solid}
.content img, .content video{max-width:100%;height:auto;border-radius:12px;border:1px solid rgba(148,163,184,.2)}
.content pre{
  overflow:auto;background:#0b1220;border:1px solid rgba(148,163,184,.2);
  padding:14px;border-radius:12px
}
.content code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.content blockquote{margin:1em 0;padding:1em;border-left:4px solid var(--brand);background:rgba(96,165,250,.06);border-radius:8px}

.kicker{font-size:.85rem;color:var(--muted)}

.btn-inline{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:1px solid rgba(148,163,184,.3);
  text-decoration:none;color:var(--text)
}
.btn-inline:hover{border-color:var(--ring)}

.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table thead th{font-size:.85rem;color:var(--muted);text-align:left}
.table tbody tr{background:rgba(17,24,39,.6)}
.table td, .table th{padding:12px 14px}
.table tbody tr{border:1px solid rgba(148,163,184,.18);border-radius:12px;overflow:hidden}
hr{border:none;border-top:1px solid rgba(148,163,184,.2);margin:24px 0}

@media(prefers-color-scheme: light){
  :root{--bg:#f6f7fb;--surface:#ffffff;--text:#0b0f14;--muted:#475569;--card:#ffffff}
  body{background: radial-gradient(1200px 600px at 10% -20%, rgba(59,130,246,.10), transparent 50%),
                 radial-gradient(1000px 500px at 110% 10%, rgba(167,139,250,.10), transparent 40%), var(--bg);}
  .content{background:#fff}
}

/* Action link buttons */
.link-buttons{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px}
.btn-action{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:600;color:#fff;background:linear-gradient(90deg, var(--brand), var(--brand-2));transition:all .25s ease;box-shadow:0 2px 6px rgba(59,130,246,.25)}
.btn-action:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(59,130,246,.35);filter:brightness(1.08)}
.btn-action:active{transform:translateY(0);filter:brightness(1.02)}
.btn-action svg{display:inline-block}

/* Feature cards with CTA buttons */
.feature-list{margin-top:28px;display:grid;gap:18px}
.feature-list h2{margin-bottom:8px}
.feature-card{
  display:grid;grid-template-columns: 48px 1fr auto;gap:16px;align-items:center;
  background:linear-gradient(180deg, rgba(15,23,42,.9), rgba(15,23,42,.7));
  border:1px solid rgba(148,163,184,.18);
  border-radius:18px;padding:18px;
}
@media(max-width:720px){
  .feature-card{grid-template-columns:48px 1fr;grid-auto-rows:auto}
  .feature-card .feature-cta{grid-column: 1 / -1}
}
.feature-icon{
  display:grid;place-items:center;
  width:48px;height:48px;border-radius:14px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(96,165,250,.25), rgba(167,139,250,.15));
  color:var(--brand);
  border:1px solid rgba(148,163,184,.25);
}
.feature-body h3{margin:0 0 4px}
.feature-body p{margin:0;color:var(--muted)}
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:999px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#0b1020; font-weight:700; text-decoration:none;
  border:none; box-shadow:0 2px 6px rgba(59,130,246,.25); transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(59,130,246,.35);filter:brightness(1.05)}
.btn-primary:active{transform:translateY(0);filter:brightness(1.02)}

    footer {
      border-top: 1px solid var(--border);
      margin-top: 28px;
      padding: 16px 0;
      font-size: .95rem;
      color: var(--muted);
      display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
    }
    footer a { color: inherit; }
    
/* Einheitliche Darstellung für den unteren "Konto wechseln"-Block */
.feature-card.feature-stack {
  display: flex;
  flex-direction: column;
  align-items: center;        /* horizontal zentriert */
  justify-content: center;    /* vertikal zentriert */
  text-align: center;
  padding: 32px 24px;
}

.feature-card.feature-stack .feature-body {
  max-width: 640px;           /* angenehme Zeilenbreite */
  width: 100%;
}

.feature-card.feature-stack .feature-body h3 {
  margin-bottom: 6px;
}

.feature-card.feature-stack .feature-body p {
  margin: 6px 0 18px;
  font-size: 1rem;
}

/* Einheitliche Buttons (primär & sekundär) */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #5ea0ff 0%, #9b6bff 100%);
  color: #0b1020;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: filter 0.15s ease;
}

.btn-primary:hover,
.btn-secondary:hover {
  filter: brightness(1.05);
}