/* ASTRA – Leseprobe der Atlanten (A4-Seiten, druckfähig) und Demo-Kaufablauf */

/* ---------- Leseprobe ---------- */
.lp-switch { display: inline-flex; gap: 6px; margin-top: 30px; padding: 5px; border: 1px solid var(--hair); border-radius: 999px; background: rgba(255, 253, 249, .5); }
.lp-switch a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; color: var(--ink-soft); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: background .3s, color .3s; }
.lp-switch a .i { width: 18px; height: 18px; }
.lp-switch a.is-on { background: var(--graphite); color: var(--ivory-hi); }
.lp-stage { background: #e9e1d3; box-shadow: inset 0 1px 0 var(--hair-soft); }
.lp-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-bottom: 32px; }
.lp-flag { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border: 1px dashed var(--hair-strong); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.lp-flag .i { width: 16px; height: 16px; color: var(--bronze); }
.lp-tools { display: flex; gap: 22px; }
.lp-pages { display: grid; justify-content: center; gap: 36px; }
.lp-page { position: relative; width: min(794px, calc(100vw - 2 * var(--gutter))); aspect-ratio: 210 / 297; background: #fbf8f2; color: var(--ink); box-shadow: 0 40px 80px -50px rgba(60, 40, 20, .55), 0 1px 0 rgba(111, 79, 39, .12); border-radius: 2px; overflow: hidden; container-type: inline-size; }
.lp-in { position: absolute; inset: 9cqw 10cqw 12cqw; display: flex; flex-direction: column; }
.lp-foot { position: absolute; left: 10cqw; right: 10cqw; bottom: 5cqw; display: flex; justify-content: space-between; gap: 2cqw; font-size: 1.5cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); border-top: 1px solid var(--hair-soft); padding-top: 1.6cqw; }
.lp-k { display: flex; align-items: center; gap: 1.4cqw; margin: 0; font-size: 1.7cqw; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--bronze); }
.lp-k .i { width: 3cqw; height: 3cqw; }
.lp-h { margin: 3cqw 0 0; font-size: 5.2cqw; font-weight: 500; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.lp-h3 { margin: 4cqw 0 0; font-size: 3cqw; font-weight: 500; letter-spacing: -.02em; }
.lp-p { margin: 2.6cqw 0 0; font-size: 2.15cqw; line-height: 1.62; color: var(--ink-soft); }
.lp-lead { margin: 3.4cqw 0 0; font-size: 2.8cqw; line-height: 1.5; color: var(--ink); letter-spacing: -.01em; }
.lp-basis { margin: 1.2cqw 0 0; font-size: 1.6cqw; font-weight: 500; color: var(--bronze); }
.lp-basis::before { content: "— "; }
.lp-facets { margin: 4cqw 0 0; border-top: 1px solid var(--hair); }
.lp-facets > div { display: grid; grid-template-columns: 22cqw 1fr; gap: 3cqw; padding: 2.2cqw 0; border-bottom: 1px solid var(--hair); }
.lp-facets dt { font-size: 1.9cqw; font-weight: 600; color: var(--bronze-deep); }
.lp-facets dd { margin: 0; font-size: 2.1cqw; line-height: 1.55; color: var(--ink-soft); }
.lp-meta { margin: 3cqw 0 0; font-size: 1.8cqw; color: var(--ink-mute); }
.lp-note { margin: auto 0 0; padding-top: 3cqw; font-size: 1.7cqw; line-height: 1.55; color: var(--ink-mute); font-style: italic; }
.lp-src { margin: 2cqw 0 0; font-size: 1.6cqw; color: var(--ink-mute); }
.lp-toc { list-style: none; margin: 4cqw 0 0; padding: 0; border-top: 1px solid var(--hair); }
.lp-toc li { display: flex; gap: 3cqw; padding: 1.75cqw 0; border-bottom: 1px solid var(--hair-soft); font-size: 2.2cqw; color: var(--ink); }
.lp-toc span { width: 4cqw; font-size: 1.6cqw; font-weight: 600; color: var(--bronze); padding-top: .4cqw; }
.lp-table { width: 100%; margin-top: 4cqw; border-collapse: collapse; font-size: 2cqw; font-variant-numeric: tabular-nums; }
.lp-table th, .lp-table td { padding: 1.3cqw 1cqw 1.3cqw 0; text-align: left; border-bottom: 1px solid var(--hair-soft); }
.lp-table thead th { font-size: 1.5cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.lp-table tbody th { font-weight: 500; }
.lp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 5cqw; margin-top: 4cqw; }
.lp-two h3 { margin: 0; font-size: 2.8cqw; font-weight: 500; }
.lp-three { margin: 2cqw 0 0; }
.lp-three > div { display: flex; justify-content: space-between; padding: 1.4cqw 0; border-bottom: 1px solid var(--hair-soft); font-size: 2cqw; }
.lp-three dt { color: var(--ink-mute); } .lp-three dd { margin: 0; font-weight: 500; }
/* Titelseite */
.lp-cover { background: radial-gradient(120% 90% at 60% 20%, #3b3229 0%, #221d19 50%, #161310 100%); color: var(--on-dark); }
.lp-cover .lp-in { align-items: center; text-align: center; justify-content: center; }
.lp-cover .lp-k { color: var(--gold); position: absolute; top: 0; left: 0; }
.lp-cover-wheel { width: 62cqw; color: var(--on-dark); }
.lp-cover-t { margin: 6cqw 0 0; font-size: 6cqw; font-weight: 500; letter-spacing: -.035em; color: #fbf1e0; }
.lp-cover-n { margin: 2.4cqw 0 0; font-size: 3cqw; font-weight: 500; color: var(--champagne); }
.lp-cover-m { margin: 1cqw 0 0; font-size: 2cqw; color: var(--on-dark-mute); }
.lp-cover .lp-foot { color: var(--on-dark-mute); border-color: var(--hair-dark); }

/* Druck = PDF (Browser-Druck „Als PDF sichern“): nur die Seiten, je eine A4-Seite */
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff !important; }
  .s-top, .s-sheet, .s-skip, .s-foot, .lp-hero, .lp-bar, #stage { display: none !important; }
  .lp-stage { padding: 0 !important; background: none !important; box-shadow: none !important; }
  .lp-pages { gap: 0; display: block; }
  .lp-page { width: 210mm; height: 297mm; aspect-ratio: auto; box-shadow: none; border-radius: 0; page-break-after: always; break-after: page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Demo-Kaufablauf ---------- */
.k-demo { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 30px; padding: 14px 18px; border: 1px dashed var(--bronze); border-radius: 16px; background: rgba(201, 166, 107, .1); font-size: 14px; line-height: 1.55; color: var(--ink); max-width: 760px; }
.k-demo .i { width: 20px; height: 20px; color: var(--bronze-deep); margin-top: 1px; }
.k-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.k-steps { list-style: none; margin: 0 0 30px; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.k-steps li { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border: 1px solid var(--hair); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-mute); }
.k-steps span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; font-size: 11px; font-weight: 600; }
.k-steps li.is-on { color: var(--ink); border-color: var(--bronze); }
.k-steps li.is-on span { background: var(--bronze); border-color: var(--bronze); color: var(--ivory-hi); }
.k-steps li.is-done { color: var(--ink-soft); }
.k-steps li.is-done span { background: var(--hair); border-color: transparent; }
.k-panel { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--hair-strong); border-radius: 26px; background: rgba(255, 253, 249, .6); outline: none; }
.k-h { margin: 0 0 18px; font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.03em; outline: none; }
.k-person { padding: 14px 0; border-top: 1px solid var(--hair); }
.k-person p { margin: 4px 0 0; font-size: 15px; color: var(--ink-soft); }
.k-person b { color: var(--ink); font-weight: 600; }
.k-hint { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-mute); }
.k-hint a { color: var(--bronze-deep); }
.k-field { display: flex; flex-direction: column; gap: 8px; }
.k-field span { font-size: 12.5px; font-weight: 600; color: var(--ink-mute); }
.k-field input { padding: 14px 18px; border: 1px solid var(--hair-strong); border-radius: 16px; background: #fffdf9; font: 400 16px/1.3 var(--sans); color: var(--ink); outline: none; }
.k-field input:focus { border-color: var(--bronze); box-shadow: 0 0 0 5px rgba(201, 166, 107, .12); }
.k-field input[aria-invalid="true"] { border-color: #a0482c; }
.k-pay { display: grid; gap: 10px; }
.k-pay label { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--hair); border-radius: 18px; cursor: pointer; transition: border-color .3s, background .3s; }
.k-pay label:has(input:checked) { border-color: var(--bronze); background: rgba(201, 166, 107, .08); }
.k-pay input, .k-check input { accent-color: #6f4f27; width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.k-pay b { display: block; font-size: 15px; font-weight: 600; }
.k-pay small { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-mute); }
.k-check { display: flex; gap: 12px; margin-top: 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); cursor: pointer; }
.k-check small { display: block; margin-top: 4px; color: var(--ink-mute); font-style: italic; }
.k-done-icon .i { width: 44px; height: 44px; color: var(--bronze); }
.k-side { position: sticky; top: 100px; }
.k-order { padding: 26px; border: 1px solid var(--hair); border-radius: 26px; background: var(--surface); }
.k-oname { margin: 14px 0 0; font-size: 28px; font-weight: 500; letter-spacing: -.03em; }
.k-sum { margin: 18px 0 18px; border-top: 1px solid var(--hair); }
.k-sum > div { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.k-sum dt { font-size: 12.5px; font-weight: 600; color: var(--ink-mute); }
.k-sum dd { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.k-sum dd b { font-size: 26px; font-weight: 500; color: var(--ink); letter-spacing: -.02em; }
.k-sum dd small { display: block; font-size: 12px; color: var(--ink-mute); }
@media (max-width: 960px) { .k-grid { grid-template-columns: 1fr; } .k-side { position: static; order: -1; } }
.lp-cover .wheel { color: var(--on-dark); }
.lp-cover .w-pl--b .w-pglyph { fill: var(--gold) !important; }
.k-hero { padding-bottom: 8px; }
.k-hero .s-h1 { font-size: clamp(34px, 3.6vw, 54px); }
.page-kasse .s-page-hero { padding-top: calc(var(--top) + 110px + env(safe-area-inset-top)); }
/* Leseprobe auf kleinen Bildschirmen: lesbarer Fließtext statt verkleinerter A4-Seite */
@media screen and (max-width: 700px) {
  .lp-page { aspect-ratio: auto; container-type: normal; }
  .lp-in { position: relative; inset: auto; padding: 32px 24px 64px; }
  .lp-foot { left: 24px; right: 24px; bottom: 18px; font-size: 9.5px; padding-top: 10px; }
  .lp-k { font-size: 10.5px; gap: 8px; } .lp-k .i { width: 16px; height: 16px; }
  .lp-h { margin-top: 14px; font-size: 26px; }
  .lp-h3 { margin-top: 22px; font-size: 18px; }
  .lp-p { margin-top: 12px; font-size: 15px; }
  .lp-lead { margin-top: 16px; font-size: 17px; }
  .lp-basis, .lp-meta, .lp-src { font-size: 12.5px; margin-top: 8px; }
  .lp-note { margin-top: 20px; padding-top: 0; font-size: 12.5px; }
  .lp-facets { margin-top: 18px; } .lp-facets > div { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .lp-facets dt { font-size: 13px; } .lp-facets dd { font-size: 14.5px; }
  .lp-toc { margin-top: 18px; } .lp-toc li { gap: 14px; padding: 10px 0; font-size: 14.5px; } .lp-toc span { width: 22px; font-size: 11px; }
  .lp-table { margin-top: 18px; font-size: 13.5px; } .lp-table th, .lp-table td { padding: 8px 6px 8px 0; } .lp-table thead th { font-size: 10px; }
  .lp-two { grid-template-columns: 1fr; gap: 20px; margin-top: 18px; } .lp-two h3 { font-size: 17px; }
  .lp-three > div { font-size: 14px; padding: 8px 0; }
  .lp-cover .lp-in { padding-top: 64px; } .lp-cover .lp-k { top: 28px; left: 24px; }
  .lp-cover-wheel { width: 100%; max-width: 300px; }
  .lp-cover-t { margin-top: 24px; font-size: 28px; } .lp-cover-n { font-size: 17px; margin-top: 10px; } .lp-cover-m { font-size: 13px; }
}
@media (max-width: 960px) { .k-side { order: 0; } }