/* Thailand-Seite: eigenes Theme. Ausgelagert, weil die CSP
   (style-src 'self') eingebettete <style>-Bloecke blockiert. */
/* ---- Thailand-Theme: gilt NUR auf dieser Seite, ueberschreibt die
       globalen Tokens aus /assets/style.css. Meer-Tuerkis + Tempelgold. ---- */
:root{
  --bg:#f6faf9; --fg:#10201d; --muted:#4f6763; --line:#d7e4e0; --card:#ffffff;
  --accent:#0d6b5c; --accent-bg:#e6f2ef;
  --warn-bg:#fdf4e4; --warn-line:#d4a03c;
  --ok:#1e7a56; --bad:#a4342b;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c1614; --fg:#e6efec; --muted:#9ab3ad; --line:#22332f; --card:#12201d;
    --accent:#56c9ac; --accent-bg:#0f241f;
    --warn-bg:#241d10; --warn-line:#8a6a2c;
    --ok:#6fc9a3; --bad:#e0796d;
  }
  .btn-primary,.buybox-btn,.nav-cta{ color:#08201b !important; }
}

/* Weicher Meer-Verlauf hinter dem Kopfbereich */
.hero{
  background:
    radial-gradient(90rem 30rem at 78% -12%, var(--accent-bg) 0%, transparent 62%),
    linear-gradient(180deg, var(--accent-bg) 0%, transparent 55%);
}

/* ---- Hero mit Cover ---- */
.hero-split{
  display:grid; grid-template-columns: minmax(0,1fr) 19rem;
  gap:2.5rem; align-items:center; max-width:64rem;
}
.hero-copy{ min-width:0 }
.hero-cover{ margin:0 }
.hero-cover img{
  display:block; width:100%; height:auto; border-radius:8px;
  box-shadow:0 18px 44px -14px rgba(6,40,35,.55), 0 2px 6px rgba(6,40,35,.18);
}
.hero-cover figcaption{
  margin-top:.7rem; font-size:.82rem; color:var(--muted); text-align:center;
}
@media (max-width: 56rem){
  .hero-split{ grid-template-columns:1fr; gap:1rem; }
  /* Auf dem Handy zuerst das Cover, aber klein genug, dass die
     Ueberschrift im ersten Bildschirm mit sichtbar bleibt. */
  .hero{ padding-top:1.2rem; padding-bottom:.6rem; }
  .hero-cover{ order:-1; justify-self:center; width:min(34vw, 8.6rem); }
  .hero-cover figcaption{ display:none }
  .hero h1{ font-size:clamp(1.55rem, 6.4vw, 2rem); margin-bottom:.7rem; }
  .hero .sub{ font-size:1.02rem; margin-bottom:1.1rem; }
  .hero .eyebrow{ font-size:.68rem; letter-spacing:.08em; }
}

/* =====================================================================
   Conversion-Umbau 22.09.2026 — alle neuen Bausteine. Keine Inline-Styles,
   weil die CSP (style-src 'self') sie blockiert.
   ===================================================================== */

/* ---- Kopfbereich: Nutzenliste und Kleingedrucktes unter dem Kaufknopf ---- */
.hero-bullets{ list-style:none; margin:0 0 1.3rem; padding:0; display:grid; gap:.45rem; }
.hero-bullets li{ position:relative; padding-left:1.7rem; font-size:1.02rem; line-height:1.45; }
.hero-bullets li::before{
  content:"✓"; position:absolute; left:0; top:0; font-weight:700; color:var(--ok);
}
.hero-micro{ margin:.9rem 0 0; font-size:.86rem; color:var(--muted); line-height:1.5; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.7rem; }

/* ---- Kennzahlenleiste ---- */
.statstrip{
  list-style:none; margin:0; padding:0; display:grid; gap:0;
  grid-template-columns:repeat(4, minmax(0,1fr));
  border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden;
}
.statstrip li{ padding:.9rem .6rem; text-align:center; border-left:1px solid var(--line); }
.statstrip li:first-child{ border-left:0; }
.statstrip strong{ display:block; font-size:1.35rem; line-height:1.15; color:var(--accent);
  font-variant-numeric:tabular-nums; }
.statstrip span{ display:block; margin-top:.15rem; font-size:.8rem; color:var(--muted); }

/* ---- Fünf Zahlen ---- */
.zahlen{ display:grid; gap:1rem; margin:1.4rem 0 .4rem;
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); }
.zahl{ display:flex; flex-direction:column; padding:1.1rem 1.2rem; background:var(--card);
  border:1px solid var(--line); border-radius:10px; }
.zahl strong{ font-size:1.55rem; line-height:1.15; color:var(--accent);
  font-variant-numeric:tabular-nums; }
.zahl p{ margin:.55rem 0 .8rem; font-size:.97rem; line-height:1.5; }
.zahl span{ margin-top:auto; font-size:.76rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); }

/* ---- Inhaltsverzeichnis ---- */
.toc{ margin:1.2rem 0 .4rem; border:1px solid var(--line); border-radius:12px;
  background:var(--card); padding:.2rem 1.2rem; }
.toc details:last-child{ border-bottom:0; }
.toc ol, .toc ul{ margin:.1rem 0 1rem; padding-left:1.6rem; display:grid; gap:.3rem; }
.toc li{ line-height:1.45; }
.cta-row{ display:flex; flex-wrap:wrap; gap:.7rem; margin:1.3rem 0 0; }

/* ---- Für wen / für wen nicht ---- */
.fit{ display:grid; gap:1rem; margin-top:1.3rem; grid-template-columns:repeat(auto-fit, minmax(17rem,1fr)); }
.fit-col{ padding:1.1rem 1.3rem 1.2rem; background:var(--card); border:1px solid var(--line);
  border-radius:10px; }
.fit-col h3{ margin:0 0 .6rem; font-size:1.05rem; }
.fit-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.fit-col li{ position:relative; padding-left:1.6rem; line-height:1.45; font-size:.98rem; }
.fit-yes li::before{ content:"✓"; position:absolute; left:0; font-weight:700; color:var(--ok); }
.fit-no li::before{ content:"✕"; position:absolute; left:0; font-weight:700; color:var(--bad); }

/* ---- Preisvergleich über der Kaufbox ---- */
.anchor{ margin:0 0 -1rem; padding:.9rem 1.2rem; background:var(--warn-bg);
  border-left:4px solid var(--warn-line); border-radius:0 8px 8px 0; font-size:1rem; line-height:1.5; }

/* ---- Drei Schritte nach dem Kauf ---- */
.steps{ list-style:none; counter-reset:schritt; margin:0; padding:0; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(14rem,1fr)); }
.steps li{ counter-increment:schritt; position:relative; padding:.2rem 0 0 2.6rem; }
.steps li::before{
  content:counter(schritt); position:absolute; left:0; top:.1rem; width:1.9rem; height:1.9rem;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--accent); color:#fff; font-weight:700; font-size:.95rem;
}
.steps strong{ display:block; font-size:1.02rem; }
.steps span{ display:block; margin-top:.15rem; font-size:.92rem; line-height:1.5; color:var(--muted); }

/* ---- Feste Kaufleiste, nur auf schmalen Bildschirmen ---- */
.stickybar{ display:none; }
@media (max-width: 56rem){
  .stickybar{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:flex; align-items:center; justify-content:space-between; gap:.8rem;
    padding:.65rem .9rem calc(.65rem + env(safe-area-inset-bottom, 0px));
    background:var(--card); border-top:1px solid var(--line);
    box-shadow:0 -6px 20px -10px rgba(6,40,35,.35);
  }
  .stickybar[hidden]{ display:none; }
  .stickybar-text{ min-width:0; line-height:1.25; }
  .stickybar-text strong{ display:block; font-size:.95rem; }
  .stickybar-text span{ display:block; font-size:.76rem; color:var(--muted); }
  .stickybar-btn{
    flex:0 0 auto; padding:.7rem 1rem; border-radius:9px; background:var(--accent); color:#fff;
    font-weight:700; font-size:.98rem; text-decoration:none; white-space:nowrap;
  }
  body.has-stickybar{ padding-bottom:6.5rem; }
  .statstrip{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .statstrip li:nth-child(3){ border-left:0; }
  .statstrip li:nth-child(n+3){ border-top:1px solid var(--line); }
  .hero-cta .btn{ flex:1 1 100%; text-align:center; }
  .cta-row .btn{ flex:1 1 100%; text-align:center; }
  .anchor{ margin-bottom:0; }
}
@media (prefers-color-scheme: dark){
  .stickybar-btn, .steps li::before{ color:#08201b; }
}
@media (prefers-reduced-motion: no-preference){
  .btn-primary, .buybox-btn, .stickybar-btn{ transition:filter .15s ease; }
  .btn-primary:hover, .buybox-btn:hover, .stickybar-btn:hover{ filter:brightness(1.08); }
}
.btn:focus-visible, .buybox-btn:focus-visible, .stickybar-btn:focus-visible, summary:focus-visible{
  outline:3px solid var(--warn-line); outline-offset:2px;
}

/* ---- Handy: erster Bildschirm straffen, damit Überschrift, Nutzen und
       Kaufknopf ohne Scrollen sichtbar sind ---- */
@media (max-width: 56rem){
  .nav-links a:not(.nav-cta){ display:none; }
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:nowrap; }
  .nav-logo{ font-size:1rem; white-space:nowrap; }
  .nav-cta{ font-size:.85rem; padding:.35rem .6rem; }
  .hero-cover{ width:min(26vw, 6.4rem); }
  .hero h1{ font-size:clamp(1.4rem, 5.9vw, 1.85rem); margin-bottom:.6rem; }
  .hero .sub{ display:none; }
  .hero-bullets{ margin-bottom:1rem; gap:.35rem; }
  .hero-bullets li{ font-size:.97rem; }
  .hero-micro{ font-size:.8rem; }
}
@media (max-width: 56rem){
  .nav-logo{ font-size:.9rem; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .nav-links{ flex:0 0 auto; }
  .nav-cta{ font-size:.8rem; padding:.35rem .55rem; }
}
@media (max-width: 56rem){
  .nav-logo{ flex:1 1 0; white-space:nowrap; }
}
@media (max-width: 56rem){
  /* style.css setzt .nav-links hier auf width:100% — das drückte das Logo auf Breite 0 */
  .nav-links{ width:auto; margin-left:auto; }
}

/* ---- Autor ---- */
.autor{ display:flex; gap:1.2rem; align-items:center; margin-top:1.6rem; padding:1.2rem 1.3rem;
  background:var(--card); border:1px solid var(--line); border-radius:10px; }
.autor img{ width:6rem; height:6rem; border-radius:50%; object-fit:cover; flex:none; }
.autor h3{ margin:0 0 .4rem; font-size:1.05rem; }
.autor p{ margin:0; font-size:.98rem; line-height:1.5; }
@media (max-width:36rem){ .autor{ flex-direction:column; align-items:flex-start; } }