:root {
  --blau: #1E5AA8;
  --blau-dunkel: #164680;
  --amber: #F5A623;
  --text: #1a2230;
  --text-leise: #55617a;
  --bg: #ffffff;
  --bg-alt: #f4f7fb;
  --karte: #ffffff;
  --rand: #e2e8f2;
  --radius: 14px;
  --breite: 960px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #e8eef6;
    --text-leise: #9aa8bf;
    --bg: #0f1420;
    --bg-alt: #151c2b;
    --karte: #1a2233;
    --rand: #2a3448;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blau); }
@media (prefers-color-scheme: dark) { a { color: #6ea8ec; } }

.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 20px; }

/* Header */
header.top {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rand);
}
header.top .wrap {
  display: flex; align-items: center; gap: 12px;
  height: 62px;
}
header.top img { width: 34px; height: 34px; border-radius: 8px; }
header.top .name { font-weight: 700; font-size: 1.1rem; }
header.top nav { margin-left: auto; display: flex; gap: 20px; }
header.top nav a { text-decoration: none; color: var(--text-leise); font-size: .95rem; }
header.top nav a:hover { color: var(--text); }

/* Hero */
.hero { text-align: center; padding: 72px 0 56px; }
.hero img.logo {
  width: 108px; height: 108px; border-radius: 24px;
  box-shadow: 0 12px 32px rgba(30,90,168,.28);
}
.hero h1 { font-size: 2.5rem; margin: 24px 0 8px; letter-spacing: -.5px; }
.hero .claim { font-size: 1.2rem; color: var(--text-leise); max-width: 620px; margin: 0 auto 8px; }
.hero .daten { color: var(--amber); font-weight: 600; margin-top: 14px; }

.badges { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 11px;
  background: #000; color: #fff; text-decoration: none;
  padding: 10px 18px; border-radius: 12px; border: 1px solid #000;
  min-width: 190px;
}
.store-badge svg { width: 26px; height: 26px; flex: none; fill: #fff; }
.store-badge .txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-badge .txt small { font-size: .68rem; opacity: .85; font-weight: 400; }
.store-badge .txt span { font-size: 1.15rem; font-weight: 600; letter-spacing: .2px; }
.store-badge.disabled { opacity: .55; cursor: default; pointer-events: none; }
@media (prefers-color-scheme: dark) {
  .store-badge { background: #fff; color: #000; border-color: var(--rand); }
  .store-badge svg { fill: #000; }
}

/* Features */
section { padding: 56px 0; }
section h2 { font-size: 1.7rem; margin: 0 0 32px; text-align: center; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.feature {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 24px;
}
.feature .ico {
  width: 44px; height: 44px; border-radius: 11px;
  background: color-mix(in srgb, var(--blau) 14%, transparent);
  display: grid; place-items: center; font-size: 22px; margin-bottom: 14px;
}
.feature h3 { margin: 0 0 6px; font-size: 1.1rem; }
.feature p { margin: 0; color: var(--text-leise); font-size: .95rem; }

.alt { background: var(--bg-alt); }

/* Screenshots */
.shots {
  display: flex; gap: 18px; overflow-x: auto; padding: 8px 4px 16px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.shots img {
  width: 240px; flex: none; border-radius: 20px;
  border: 1px solid var(--rand); scroll-snap-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* Support */
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.support-card {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 24px;
}
.support-card h3 { margin: 0 0 8px; }
.support-card p { margin: 0 0 4px; color: var(--text-leise); }

/* Legal / Content pages */
.content { padding: 48px 0 72px; max-width: 760px; }
.content h1 { font-size: 2rem; margin: 0 0 8px; }
.content h2 { text-align: left; font-size: 1.3rem; margin: 36px 0 10px; }
.content h3 { font-size: 1.05rem; margin: 24px 0 6px; }
.content p, .content li { color: var(--text); }
.content .leise { color: var(--text-leise); font-size: .9rem; }
.content ul { padding-left: 22px; }
.content .box {
  background: var(--bg-alt); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 16px 20px; margin: 20px 0;
}
.zurueck { display: inline-block; margin-bottom: 24px; text-decoration: none; color: var(--text-leise); }

/* Footer */
footer {
  border-top: 1px solid var(--rand); padding: 32px 0;
  color: var(--text-leise); font-size: .9rem;
}
footer .wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
footer nav { margin-left: auto; display: flex; gap: 18px; }
footer a { color: var(--text-leise); text-decoration: none; }
footer a:hover { color: var(--text); }

@media (max-width: 560px) {
  .hero h1 { font-size: 2rem; }
  header.top nav { display: none; }
}