/* Bausteine für Kauf und Anmeldung, seitenübergreifend (Start, Verkaufsseiten, Ratgeber).
   Eingebettete <style>-Blöcke blockiert die CSP (style-src 'self') – deshalb diese Datei. */

/* ---------- Paket-Schalter ----------
   <html data-paket="wartet">: Komplettpaket noch nicht von Digistore freigegeben.
   <html data-paket="frei">:   freigegeben. Umschalten mit werkzeuge/paket_schalter.py */
html[data-paket="wartet"] .nur-frei { display: none !important; }
html[data-paket="frei"] .nur-wartet { display: none !important; }

/* ---------- E-Mail-Anmeldung (Checkliste + Leseprobe) ---------- */
.leadbox { margin: 2rem 0; padding: 1.3rem 1.3rem 1.1rem; background: var(--card);
  border: 2px solid var(--accent); border-radius: 12px; }
.leadbox h2, .leadbox h3 { margin: 0 0 .45rem; padding: 0; border: 0; font-size: 1.2rem; }
.leadbox > p { margin: .3rem 0 .9rem; line-height: 1.55; }
.leadbox-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 46rem) { .leadbox-grid { grid-template-columns: 1fr 1fr; } }
.leadbox-grid ul { margin: .4rem 0 0; padding-left: 1.1rem; line-height: 1.55; }
.leadbox-grid li { margin: .25rem 0; }
.lead-form label { display: block; font-weight: 700; margin: 0 0 .35rem; }
.lead-form input[type=email] { width: 100%; box-sizing: border-box; font: inherit; padding: .75rem .8rem;
  border: 1px solid var(--muted); border-radius: 8px; background: var(--bg); color: var(--fg); }
.lead-form input[type=email]:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.lead-form .einw { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .86rem;
  line-height: 1.5; margin: .9rem 0; }
.lead-form .einw input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; flex: none; }
.lead-form .btn { width: 100%; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.lead-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form .klein { font-size: .84rem; color: var(--muted); line-height: 1.5; margin: .6rem 0 0; }

/* ---------- Vergleich Handbuch / Komplettpaket ---------- */
.vergleich { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.4rem 0; }
@media (min-width: 44rem) { .vergleich { grid-template-columns: 1fr 1fr; } }
.vergleich > div { position: relative; display: flex; flex-direction: column; padding: 1.3rem 1.3rem 1.2rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.vergleich > .empfohlen { border: 2px solid var(--accent); }
.vergleich .schild { position: absolute; top: -.75rem; left: 1rem; padding: .15rem .6rem; border-radius: 999px;
  background: var(--accent); color: var(--bg); font-size: .75rem; font-weight: 700; letter-spacing: .03em; }
.vergleich h3 { margin: 0 0 .2rem; font-size: 1.15rem; }
.vergleich .preis { font-size: 2rem; font-weight: 800; color: var(--accent); line-height: 1.1; margin: .3rem 0 .6rem; }
.vergleich ul { margin: 0 0 1rem; padding-left: 1.1rem; line-height: 1.55; flex: 1; }
.vergleich li { margin: .25rem 0; }
.vergleich .btn { text-align: center; }
.vergleich .klein { font-size: .84rem; color: var(--muted); margin: .6rem 0 0; line-height: 1.45; }

/* ---------- Hinweis: Paket wartet auf Freigabe ---------- */
.paket-hinweis { margin: 1rem auto; max-width: 60rem; padding: .9rem 1.2rem; border-radius: 10px;
  background: var(--warn-bg); border: 1px solid var(--warn-line); line-height: 1.55; font-size: .96rem; }
.paket-hinweis a { font-weight: 700; }

/* ---------- Ratgeber: Kapitel-Hinweis unter der Kurzantwort ---------- */
.kapitel-hinweis { display: flex; gap: .9rem; align-items: center; margin: 1.2rem 0 1.6rem; padding: .8rem 1rem;
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; background: var(--card);
  font-size: .95rem; line-height: 1.5; }
.kapitel-hinweis img { width: 3.2rem; height: auto; border-radius: 3px; flex: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.kapitel-hinweis a { font-weight: 700; }

/* ---------- Startseite ---------- */
.hero-home .hero-cover img { max-width: 17rem; }
.autor-kurz { display: flex; gap: 1.1rem; align-items: center; }
.autor-kurz img { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; flex: none; }
@media (max-width: 34rem) { .autor-kurz { flex-direction: column; align-items: flex-start; } }

/* ---------- 3D-Buch (freigestellt, transparenter Hintergrund) ----------
   Kein Rechteck-Schatten und kein Rahmen: beides würde als Kasten um das freigestellte Buch erscheinen.
   Die Bildunterschrift „E-Book (EPUB + PDF)" bleibt auch auf dem Handy sichtbar. */
img.buch3d { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; background: none; }
.hero-cover.buch3d-fig figcaption strong { color: var(--fg); }
@media (max-width: 56rem) {
  .hero-cover.buch3d-fig figcaption { display: block; font-size: .72rem; margin-top: .35rem; line-height: 1.3; }
  .hero-cover.buch3d-fig figcaption .nur-breit { display: none; }
}
.buybox-cover .buch3d-hinweis { display: block; margin-top: .35rem; font-size: .75rem; color: var(--muted); }

/* Bildschirmfoto einer Datei (z. B. Budget-Rechner): nie breiter als der Inhaltsbereich */
.bildschirmfoto { margin: 18px 0 0; }
.bildschirmfoto img { display: block; max-width: 100%; height: auto; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; background: #fff; }
.bildschirmfoto figcaption { margin-top: 8px; font-size: .92rem; opacity: .8; }

/* Hinweis-Kasten Planungs-Check (Startseite, /auswandern/, /monatskosten/, ausgewählte Ratgeber) */
.check-box { margin: 2rem 0; padding: 1.2rem 1.3rem 1.3rem; background: var(--card); border: 1px solid var(--accent);
  border-left-width: 5px; border-radius: 10px; }
.check-box .eyebrow { margin: 0 0 .35rem; }
.check-box h2 { margin: 0 0 .5rem; padding: 0; border: 0; font-size: 1.2rem; }
.check-box p { margin: .4rem 0 .8rem; line-height: 1.55; }
.check-box ul { margin: .2rem 0 .8rem 1.1rem; padding: 0; }
.check-box li { margin: .2rem 0; line-height: 1.5; }
.check-box .klein { font-size: .88rem; opacity: .85; }

/* Autorenzeile mit Foto unter der Überschrift (12.10.2026) */
.autor-zeile { display: flex; gap: .7rem; align-items: center; }
.autor-zeile .autor-bild { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid var(--accent); }