:root{
  --bg:#0f1014; --surface:#171821; --text:#eaeaea; --muted:#bdbfc7;
  --accent:#ff8a70; --accent-contrast:#1a1b22;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--text);text-decoration:none}
.container {
  width: 100%;
  max-width: 1200px;   /* oder 1100/1000px, je nachdem wie „schmal“ du es willst */
  margin: 0 auto;      /* sorgt für horizontale Zentrierung */
  padding: 0 20px;     /* Innenabstand links/rechts */
}

.todo{opacity:.75}

/* Hintergrund */
body {
  background: linear-gradient(180deg, #0d0d1a 0%, #000 100%);
  color: #ddd;
}


/* Grid */
.main-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.bonus-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

a.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}


/* Header */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(15,16,20,.7);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:"Playfair Display",serif;font-weight:700;font-size:1.15rem;letter-spacing:.2px}
.site-nav{display:flex;gap:18px}
.site-nav a{opacity:.9;padding:8px 10px;border-radius:8px}
.site-nav a:hover{background:rgba(255,255,255,.06)}
.nav-toggle{display:none;background:none;border:0;color:var(--text);font-size:1.25rem}

/* Hero */
.hero{padding:72px 0 48px}
.hero-bg{padding:96px 0 56px}
.hero-narrow{max-width:800px;margin:0 auto;text-align:center}
.hero h1,.hero-bg h1{
  font-family:"Playfair Display",serif;font-size:2.6rem;line-height:1.2;margin:.2rem 0 .6rem}
.lead{font-size:1.05rem;opacity:.92;margin:0 0 1rem}
.subtle{opacity:.9;margin:.2rem 0 1.2rem}

/* Sections */
.section{padding:56px 0}
.section-surface{background:var(--surface)}
.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:start}
.card{background:#111219;border:1px solid rgba(255,255,255,.06);border-radius:16px;
  padding:18px;box-shadow:var(--shadow)}
h1,h2,h3{font-family:"Playfair Display",serif}
h2{font-size:1.6rem;margin:0 0 14px}
h3{font-size:1.15rem;margin:0 0 14px}
.specs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.specs li{display:flex;justify-content:space-between;gap:16px;opacity:.95}
.portrait img{border-radius:14px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.06)}

/* Book page grid */
.book-page .book-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:start}

.book-info h1{font-size:2rem;margin:.2rem 0 .5rem}
.book-info p {
  font-size: 1.2rem;
  line-height: 1.8;
  max-width: 95%;
  margin-bottom: 1.5rem;
}

.book-cover {
  max-width: 100%;
}

.book-cover img {
  width: 100%;
  max-width: 100%; 
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: var(--shadow);
}


@media (max-width: 768px) {
  .book-cover img {
    max-width: 200px; /* auf Tablets/Phones kleiner */
  }
}

/* Editions */
.editions-grid{display:grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap:1.5rem;margin:10px 0 6px;
  }

.edition h3{display:flex;align-items:baseline;gap:10px;margin:0 0 8px}
.edition .price{font-weight:600;opacity:.95;white-space:nowrap}
.edition .bullets{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.edition.accent{border-color:rgba(255,138,112,.35);box-shadow:0 10px 30px rgba(255,138,112,.15)}
.badge{display:inline-block;background:var(--accent);color:var(--accent-contrast);
  padding:4px 10px;border-radius:999px;font-size:.8rem;margin-bottom:10px}
.badge-muted{background:rgba(255,255,255,.1);color:#d0d4dc}

/* Addon box */
.addon{margin-top:18px}

.price {
  font-size: 1.4rem;
  font-weight: 700;
  color: #f39c12;        /* gold/orange */
  display: block;
  margin-bottom: 0.8rem;
}

.edition-price {
  font-size: 1.2rem;
  font-weight: bold;
  color:  #f39c12;
  margin-bottom: 0.8rem;
  min-height: 2rem; /* sorgt für bündige Höhe */
  display: flex;
  justify-content: center;
  align-items: center;
}


/* Retailers */
.retailers h2 .muted{font-weight:400;opacity:.8;font-size:.95rem}
.retailer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:12px}
.retailer{display:block;padding:16px;border-radius:16px;border:1px solid rgba(255,255,255,.06);
  background:#0f1117;transition:transform .06s ease, background .2s ease}
.retailer:hover{transform:translateY(-1px);background:#10131a}
.retailer.disabled{opacity:.7;pointer-events:none}
.retailer-name{font-weight:600;margin-bottom:6px}
.retailer-meta{opacity:.9}

/* Compare table */
.table-wrap{overflow:auto;margin-top:10px}
/* Vergleichstabelle Styling */
.compare {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  background: #111; /* Grundhintergrund */
  border-radius: 8px;
  overflow: hidden;
  overflow-x: auto; /* für mobiles Scrollen */
  display: block;
}

/* Kopfzeile */
.compare thead th {
  background: linear-gradient(to bottom, #222, #111);
  padding: 0.75rem 1rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  border-bottom: 2px solid #d4af37; /* goldene Linie */
}

.compare thead th:first-child {
  text-align: left;
}

/* Zellen */
.compare td {
  padding: 0.75rem 1rem;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #222;
  color: #ddd;
}

.compare td:first-child {
  text-align: left;
  font-weight: 500;
  color: #fff;
}

/* Letzte Zeile (Preise hervorheben) */
.compare tr:last-child {
  background: #111;
  font-weight: 600;
}

.compare tr:last-child td {
  padding: 1rem;
}

.compare tr:last-child td:not(:first-child) {
  color: #d4af37; /* Gold für Preise */
  font-weight: 700;
}

/* Hover für bessere Lesbarkeit */
.compare tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}
.compare td:hover,
.compare th:hover {
  background: rgba(255, 215, 0, 0.05); /* leicht goldenes Highlight */
}

.compare table {
  border-collapse: collapse;
  width: 100%;
  min-width: 700px; /* falls es sehr schmal wird */
}

.compare th:first-child,
.compare td:first-child {
  position: sticky;
  left: 0;
  background-color: #111; /* Hintergrund, damit es sich nicht mit anderen überlappt */
  z-index: 2;
}


/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5ch;
  padding:10px 16px;border-radius:8px;border:1px solid rgba(255,255,255,.16);
  background:transparent;color:var(--text);
  transition:transform .06s ease, background .2s ease, border-color .2s ease}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.05)}
.btn:active{transform:translateY(0)}
.btn-accent{background:var(--accent);border-color:transparent;color:var(--accent-contrast);font-weight:600}
.btn-accent:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.24)}
.btn-disabled{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#9aa0a6;cursor:not-allowed}

/* Footer */
.site-footer{padding:28px 0;border-top:1px solid rgba(255,255,255,.06);background:#0e0f13}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:10px}
.footer-nav{display:flex;gap:16px}

/* Animations */
.fade-in{opacity:0;transform:translateY(8px);animation:fadeIn .7s ease .05s forwards}
@keyframes fadeIn{to{opacity:1;transform:none}}

/* Home background (only on start page) */
body.home{
  background: #0f1014;
  background-image: url('/assets/bg-home.jpg');
  background-position:center; background-size:cover; background-repeat:no-repeat; background-attachment:fixed;
}
.bg-overlay{
  position: fixed; inset: 0;
  background: radial-gradient(1200px 600px at 65% 35%, rgba(20,22,34,.35), rgba(15,16,20,.75) 55%, rgba(15,16,20,.9) 100%);
  pointer-events: none; z-index: -1;
}

/* Responsive */
@media (max-width: 920px){
  .hero,.hero-bg{padding-top:96px}
  .hero-bg h1{font-size:2.2rem}
  .two-col,.book-page .book-grid{grid-template-columns:1fr}
  .editions-grid{grid-template-columns:1fr}
  .retailer-grid{grid-template-columns:1fr 1fr}
}

/* Mobile nav (optional: simple collapse) */
@media (max-width: 920px){
  .site-nav{position:fixed;inset:64px 0 auto 0;background:rgba(15,16,20,.97);
    padding:14px 20px;display:none;flex-direction:column;border-bottom:1px solid rgba(255,255,255,.06)}
  .site-nav.open{display:flex}
  .nav-toggle{display:inline-block}
}

.btn-group {
  display: flex !important;
  flex-direction: row !important;
  gap: 0.5rem;
  justify-content: center;
}
.btn-group .btn {
  flex: 1 1 45%;   /* zwei Buttons nehmen je ca. 45% Platz */
  text-align: center;
}

/* Hauptprodukte = 3 Spalten */
.editions-grid.main-products {
  grid-template-columns: repeat(3, 1fr);
}

/* Add-ons = 2 Spalten */
.editions-grid.addons {
  grid-template-columns: repeat(2, 1fr);
}


.book-hero {
  max-width: 1200px;
  margin: 0 auto 3rem auto;
  padding: 2rem;
}


.book-hero-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 2rem;
  align-items: start;
}


.book-text h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.book-text p {
  font-size: 1.1rem;
  line-height: 1.6;
}
  
/* Mobile fallback */
@media (max-width: 768px) {
  .book-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .book-cover {
    margin-bottom: 1.5rem;
  }
}


/* Buttons differenzieren */
.btn-eur, .btn-chf {
  font-size: 1rem;
  padding: 0.6rem 1.2rem;
  min-width: 130px;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
}

.btn-eur:hover, .btn-chf:hover {
  opacity: 0.9;
}


/* Buttons */
.buttons {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

button {
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

.btn-eur {
  background: #ffd700;
  color: #000;           
  font-weight: 600;      
}

.btn-chf {
  background: #4a74c9;
  color: #fff;
}

.edition-card {
   background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  min-height: 280px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow:
    0 4px 8px rgba(0,0,0,0.6),   /* tiefer Hauptschatten */
    0 0 12px rgba(255, 180, 100, 0.15); /* subtiler Glow */
}


.edition-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem; 
}

.edition-details {
  flex-grow: 1;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.edition-card .buttons {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: auto;
  flex-wrap: wrap;
}

/* Einheitliche Höhe für Preiszeilen */
.edition-card .price {
  font-size: 1.2rem;
  font-weight: bold;
  color: #f4b942;  
  margin: 0.5rem 0 1rem 0;
  min-height: 2.5em; /* sorgt für gleiche Höhe */
  display: flex;
  align-items: center;
  justify-content: center;
}

.edition-card:hover {
    transform: translateY(-6px);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.7),
    0 0 16px rgba(255, 180, 100, 0.25);
}

/* Standard */
.edition-standard {
  border-top: 4px solid #d4a373; /* Gold-Braun */
}

/* Premium */
.edition-premium {
  border-top: 4px solid #ffb347; /* Helles Orange */
}

/* Premium++ */
.edition-premium-plus {
  border-top: 4px solid #ff6961; /* Rötlich */
}

/* Bonuskapitel */
.edition-bonus {
  border-top: 4px solid #9370db; /* Lila */
}

/* Bonuspaket */
.edition-bundle {
  border-top: 4px solid #4682b4; /* Blau */
}


/* Glow je nach Kategorie */
.edition-standard:hover {
  box-shadow: 0 0 12px rgba(255, 180, 80, 0.6), 0 6px 16px rgba(0,0,0,0.7);
}

.edition-premium:hover {
  box-shadow: 0 0 14px rgba(150, 100, 255, 0.7), 0 6px 18px rgba(0,0,0,0.75);
}

.edition-premium-plus:hover {
  box-shadow: 0 0 16px rgba(255, 80, 80, 0.7), 0 6px 20px rgba(0,0,0,0.8);
}

.edition-bonus:hover, .edition-bundle:hover {
  box-shadow: 0 0 12px rgba(80, 200, 255, 0.6), 0 6px 16px rgba(0,0,0,0.7);
}

.support-note {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.95rem;
  color: #f0c674; /* warm-goldener Ton, passend zu den Buttons */
  font-style: italic;
}

.book-details {
  max-width: 900px;     /* Breite begrenzen */
  margin: 40px auto;    /* zentrieren */
  padding: 30px;
  background: #1a1c22;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  line-height: 1.6;
}
.book-details h2 {
  font-size: 26px;
  margin-bottom: 18px;
  text-align: center;
}
.book-details p {
  margin-bottom: 16px;
}
.book-details ul {
  margin: 12px 0 0 20px;
  padding: 0;
}


/* Mobile-Ansicht */
@media (max-width: 768px) {
  .editions-grid {
    grid-template-columns: 1fr !important; /* nur 1 Spalte */
  }
  .edition-card {
    width: 100%;
    margin: 0 auto;
  }
  .edition-card .buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .edition-card .buttons button {
    width: 100%;
  }
}

/* Coming/disabled Zustand fürs Bonuspaket */
.edition-card.is-coming { position: relative; opacity: .85; }
.edition-card.is-coming .buttons .btn-eur,
.edition-card.is-coming .buttons .btn-chf,
.edition-card.is-coming a.btn-eur.disabled,
.edition-card.is-coming a.btn-chf.disabled {
  pointer-events: none; cursor: not-allowed; filter: grayscale(1) brightness(.9);
  border: 1px solid #ddd; background: #fafafa; color: #777;
}
.coming-badge {
  position:absolute; top:10px; right:10px;
  background:#111; color:#fff; font-size:.75rem; padding:.2rem .5rem;
  border-radius:999px; letter-spacing:.03em; text-transform:uppercase;
}
.coming-note { margin-top:.5rem; color:#666; font-size:.9rem; }

.trust-icons {
  display: flex;
  justify-content: center;   /* mittig ausrichten */
  align-items: center;
  flex-wrap: wrap;           /* umbrechen bei kleiner Breite */
  gap: 12px;                 /* Abstand zwischen Icons */
  margin: 20px 0 10px 0;
}

.trust-icons img {
  height: 28px;
  opacity: 0.85;             /* etwas dezenter */
  transition: opacity 0.2s ease;
}

.trust-icons img:hover {
  opacity: 1;                /* beim Hover stärker */
}

.trust-note {
  text-align: center;
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 25px;
}

.trustline {
  font-size: 0.85rem;
  color: #aaa;        /* dezentes Grau */
  margin: 6px 0 12px; /* Abstand zu Text & Buttons */
}