:root {
  --gold: #D4AF37;
  --purple: #9D4EDD;
  --bg: #0A0A0A;
  --card: #161A23;
  --text: #FFFFFF;
  --text-dim: rgba(255, 255, 255, 0.7);
  --text-faint: rgba(255, 255, 255, 0.45);
  --border: rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Nav */
/* GEÄNDERT: die Nav-Leiste hat jetzt auf jeder Seite dieselbe, kompakte
   Höhe - unabhängig davon, ob eine Seite das große Logo zeigt oder nicht
   (vorher machte das große Logo die Leiste auf den anderen Seiten viel
   höher als auf der Startseite, wo das Logo entfernt wurde). Das Logo hängt
   dafür optisch über den unteren Rand der Leiste hinaus (siehe .nav-brand
   img), statt die Leiste selbst aufzublähen. */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(6px);
  z-index: 10;
  overflow: visible;
}

.nav-brand {
  position: relative;
  width: 70px;
  height: 1px;
}

/* GEÄNDERT: zeigt wieder das komplette Original-Logo (Icon + Schriftzug
   "SeitenWechsel"), dafür deutlich größer als vorher, damit der Schriftzug
   auch tatsächlich lesbar ist - nur der separate HTML-Text daneben bleibt
   entfernt. Auf der Startseite (die schon das Hero-Phone hat) ist das Logo
   ganz raus, auf den übrigen Seiten bekommt es hier denselben weichen
   Rand-Verlauf wie das Hero-Phone-Bild, statt hart abzuschneiden - damit
   es optisch mit dem dunklen Hintergrund verschmilzt. Absolut positioniert,
   damit die große Bildgröße nicht die Höhe der Nav-Leiste selbst bestimmt
   (siehe .nav/.nav-brand oben).*/
.nav-brand img {
  position: absolute;
  left: 0;
  top: -14px;
  width: 220px;
  height: 220px;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, black 55%, transparent 85%);
  mask-image: radial-gradient(ellipse at center, black 55%, transparent 85%);
}

.nav-links {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}

.nav-links a { color: var(--text-dim); font-size: 14px; font-weight: 600; }
.nav-links a:hover { color: var(--gold); text-decoration: none; }

.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 30px;
  font-weight: bold;
  font-size: 14px;
  border: none;
  cursor: pointer;
}

.btn-gold { background: var(--gold); color: #000; }
.btn-gold:hover { background: #e2c14f; text-decoration: none; }

.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; }

.btn-sm { padding: 8px 18px; font-size: 13px; border-radius: 20px; }

/* Hero */
.hero {
  text-align: center;
  padding: 70px 20px 50px;
}

.hero img.logo {
  width: 110px;
  height: 110px;
  border-radius: 24px;
  object-fit: cover;
  margin-bottom: 24px;
  box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15);
}

/* GEÄNDERT: der reine Alpha-Verlauf (mask-image) allein reichte nicht - das
   Bild hat selbst einen dunkelblauen statt schwarzen Hintergrund, wodurch
   am Rand trotz sanftem Ausblenden ein sichtbarer bläulicher "Hof" gegen
   das echte Schwarz der Seite stehen blieb. Der zusätzliche Verlauf im
   Wrapper (::after) dunkelt den Bildrand zuerst auf echtes Schwarz ab,
   bevor die Maske ihn ausblendet - dadurch verschwindet die Kante
   komplett statt nur weicher zu werden. */
.hero-visual-wrapper {
  position: relative;
  width: 100%;
  max-width: 427px;
  margin: 0 auto 24px;
}

.hero-visual-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 52%, var(--bg) 96%);
  pointer-events: none;
}

.hero img.hero-visual {
  display: block;
  width: 100%;
  margin: 0;
  -webkit-mask-image: radial-gradient(ellipse at center, black 58%, transparent 98%);
  mask-image: radial-gradient(ellipse at center, black 58%, transparent 98%);
}

.hero h1 {
  font-size: 34px;
  margin: 0 0 12px;
  background: linear-gradient(90deg, var(--gold), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p.tagline {
  color: var(--text-dim);
  font-size: 17px;
  max-width: 520px;
  margin: 0 auto 30px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Sections */
section.block {
  padding: 50px 20px;
  border-top: 1px solid var(--border);
}

section.block h2 {
  text-align: center;
  font-size: 26px;
  margin-bottom: 8px;
  color: var(--text);
}

section.block p.lead {
  text-align: center;
  color: var(--text-dim);
  max-width: 560px;
  margin: 0 auto 36px;
}

/* Feature grid - fest 3 Spalten x 2 Reihen für die 6 Kacheln, zentriert */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 780px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width: 641px) and (max-width: 860px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
}

.card .icon {
  font-size: 26px;
  margin-bottom: 10px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--gold);
}

.card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 13.5px;
}

/* Buch-Vorschau */
/* NEU: eigenes, klar abgegrenztes "Fenster" um die Vorschau, statt die
   Buchkarten offen auf den Seitenhintergrund zu setzen - wirkt wie ein
   eigenständiges Schaufenster statt endlos weiterzuwachsen. */
.vorschau-fenster {
  max-width: 1000px;
  margin: 0 auto;
  padding: 22px;
  background: linear-gradient(160deg, #14161d, #0d0f14);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* GEÄNDERT: von Grid auf Flexbox umgestellt - bei Grid blieb eine
   unvollständige letzte Reihe (z.B. nur 3 von 7 Karten) immer linksbündig,
   mit Flexbox + justify-content:center wird jede Zeile für sich zentriert,
   auch die letzte, unvollständige. */
.buch-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.vorschau-mehr {
  text-align: center;
  margin-top: 22px;
}

.buch-card {
  flex: 1 1 108px;
  max-width: 150px;
  background: linear-gradient(160deg, #1c2029, var(--card));
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 9px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* GEÄNDERT: vorher translateY(-3px) - das leichte Hochspringen ließ die
   Karte kurz unter den Mauszeiger wandern, was beim Überfahren dichter
   Reihen ein Geruckel aus schnell wechselnden hover/mouseleave-Events
   auslöste. Jetzt wächst die Karte stattdessen an Ort und Stelle (scale),
   liegt dabei per z-index über den Nachbarn statt mit ihnen zu kollidieren. */
.buch-card:hover {
  transform: scale(2);
  z-index: 5;
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

/* "Bilderrahmen"-Effekt: eine dünne, dunklere Mattenfläche zwischen
   Kartenrand und Buchcover statt das Bild randlos anzuschneiden. */
.buch-card .rahmen {
  padding: 3px;
  background: #05060a;
}

.buch-card .cover {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: #0e1016;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 15px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.buch-card .kategorie-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--text);
  font-size: 8.5px;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 5px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.buch-card .cover img { width: 100%; height: 100%; object-fit: cover; }

.buch-card .info { padding: 7px 8px 9px; }

.buch-card .titel {
  font-size: 12px;
  font-weight: bold;
  color: var(--text);
  margin: 0 0 2px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.buch-card .autor {
  font-size: 10.5px;
  color: var(--text-faint);
  margin: 0 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.buch-card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 4px; }

.buch-card .preis {
  color: var(--gold);
  font-weight: bold;
  font-size: 10.5px;
  background: rgba(212, 175, 55, 0.14);
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}

.buch-card .zustand {
  color: var(--text-faint);
  font-size: 9.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.buch-card .sterne {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--text-faint);
}

.buch-card .sterne .stern-icon { color: #f5b942; font-size: 11px; }

.buch-card .alter {
  margin: 4px 0 0;
  font-size: 9px;
  color: var(--text-faint);
  font-style: italic;
}

.buch-hinweis { text-align: center; color: var(--text-faint); font-size: 13px; }

/* Steps */
.steps {
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 700px;
  margin: 0 auto;
}

.step {
  display: flex;
  gap: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  align-items: flex-start;
}

.step .num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--purple));
  color: #000;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.step h3 { margin: 0 0 6px; font-size: 15.5px; color: var(--text); }
.step p { margin: 0; color: var(--text-dim); font-size: 13.5px; }

/* FAQ */
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 12px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.faq-item h3 { margin: 0 0 8px; font-size: 15px; color: var(--gold); }
.faq-item p { margin: 0; color: var(--text-dim); font-size: 13.5px; }

/* Legal pages */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 50px 20px 70px;
  color: var(--text-dim);
  font-size: 14px;
  white-space: pre-line;
}

.legal h1 { color: var(--gold); font-size: 24px; margin-bottom: 20px; white-space: normal; }
.legal h2 { color: var(--text); font-size: 16px; margin-top: 28px; white-space: normal; }
.legal p { margin: 0 0 6px; }

/* Footer */
footer {
  border-top: 1px solid var(--border);
  padding: 36px 20px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12.5px;
}

footer .footer-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

footer a { color: var(--text-faint); }
footer a:hover { color: var(--gold); }

@media (max-width: 640px) {
  .hero h1 { font-size: 27px; }
  .nav-links { gap: 14px; }
}