/* ════════════════════════════════════════════════════════════════
   layout.css – Inhaltsabschnitte der DESKTOP-Komposition (V9)
   sowie der Buchungsblock (beide Kompositionen).
   ════════════════════════════════════════════════════════════════ */

/* ─── KAUFKARTE „Deine Einladung“ (v1.0.2) · beide Kompositionen ───
   Warmes Cremeweiß, feine Goldlinie, dezente Rundung, viel Luft.
   Der Buchungsblock darin ist unverändert (gleiche IDs, js/checkout.js). */
.offer-title { font-family: Oranienbaum, Georgia, serif; font-weight: 400; letter-spacing: -.04em; }
.offer-card {
  position: relative; box-sizing: border-box; width: 100%;
  background: #fdf9f3; color: #1e371a;
  border: 1px solid rgba(198,161,91,.6); border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 48px rgba(30,55,26,.05);
}
.offer-card .offer-price {
  margin: 0; text-align: center; color: #1e371a;
  font-family: Oranienbaum, Georgia, serif; font-weight: 400; line-height: 1; letter-spacing: -.04em;
}
.offer-card .offer-price small {
  display: block; margin-top: 12px;
  font: 500 11px/1.4 Quicksand, Arial, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: rgba(30,55,26,.6);
}
/* v1.0.5: Unterzeile über dem Preis und Benennung der Zahlungsknöpfe */
.offer-card .offer-sub {
  margin: 0 0 20px; text-align: center; color: #1e371a;
  font: 400 26px/1.2 Oranienbaum, Georgia, serif; letter-spacing: -.04em;
  text-wrap: balance; /* gleichmäßiger Umbruch auf schmalen Geräten */
}
.offer-card .checkout-label {
  margin: 0 0 14px; text-align: center; color: rgba(30,55,26,.6);
  font: 600 11px/1.4 Quicksand, Arial, sans-serif; letter-spacing: .22em;
}
/* v1.0.5: Begleitbuch-Knopf ohne Ziel, solange der Amazon-Link fehlt */
.quiet-link[aria-disabled="true"] { cursor: default; opacity: .55; }
.offer-card .offer-intro { margin: 40px 0 6px; font: 600 15px/1.5 Quicksand, Arial, sans-serif; color: #1e371a; }
.offer-list { list-style: none; margin: 0 0 36px; padding: 0; }
.offer-list li {
  margin: 0; padding: 14px 0; border-top: 1px solid rgba(198,161,91,.32);
  font: 400 16px/1.6 Quicksand, Arial, sans-serif; color: #1e371a;
}
.offer-list li:last-child { border-bottom: 1px solid rgba(198,161,91,.32); }
.offer-card .checkout { max-width: 380px; margin: 0 auto; }
.offer-card .checkout .juno-preis-raten { text-align: center; }

/* ─── BUCHUNG · aus der Live-Seite übernommen, ruhig in die Spalte gesetzt ─── */
.checkout { max-width: 352px; margin-top: 30px; }
.juno-pp-slot { width: 100%; min-width: 0; min-height: 54px; margin: 0; }
.juno-pp-laedt {
  display: flex; align-items: center; justify-content: center; min-height: 54px;
  font: 400 13px/1.4 Quicksand, Arial, sans-serif; letter-spacing: .06em; color: rgba(30,55,26,.55);
}
.juno-pp-fehler { font: 400 14px/1.75 Quicksand, Arial, sans-serif; color: #80000b; text-align: center; }
.juno-pp-fehler button {
  display: inline-block; margin: 10px 4px 0; padding: 12px 22px; border: 0; border-radius: 10rem; cursor: pointer;
  font: 600 11px Quicksand, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: #1e371a;
}
.juno-pp-mehr {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 48px; margin: 2px 0 0; padding: 0 16px;
  font: 600 15px -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  color: #fff; background: #000; border: 0; border-radius: 4px; cursor: pointer;
  transition: opacity .2s ease;
}
.juno-pp-mehr:hover { opacity: .88; }
.juno-pp-mehr-icon svg { display: block; width: 17px; height: 17px; margin-top: -2px; fill: #fff; }
.checkout .juno-preis-raten { margin: 16px 0 0; font-size: 12px; line-height: 1.6; opacity: .65; }
.juno-preis-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; }
.juno-preis-cards { height: 21px; width: auto; opacity: .75; }
.juno-preis-processor { display: flex; align-items: center; gap: 5px; font: 11px Quicksand, Arial, sans-serif; letter-spacing: .08em; color: rgba(30,55,26,.55); }
.juno-preis-pp { height: 12px; width: auto; opacity: .85; }

@media (orientation: landscape) {

  /* ─── Editorial-Abschnitte ───────────────────────────────── */
  .editorial-section {
    position: relative; overflow: hidden; isolation: isolate; min-height: 70vh;
    padding: clamp(85px, 11vw, 150px) max(5vw, 22px);
    background: #f6f3ee; color: #1a2419; border-top: 1px solid #e6ddd1;
  }
  .editorial-section.tone-2 { background: #eae3d9; }
  .editorial-section.offer { background: #ede4da; }
  #section-9 { z-index: 1; }

  .editorial-inner { position: relative; z-index: 4; max-width: 880px; margin: auto; }
  .offer .editorial-inner { max-width: 680px; }
  .editorial-inner h2 {
    font: normal clamp(45px, 5.3vw, 79px)/1.06 Oranienbaum, Georgia, serif;
    letter-spacing: -.025em; max-width: 870px; margin: 24px 0 40px;
  }
  /* V9 rendert den Fließtext mit 19 px / 1,85 (die V5-Vergrößerung wird dort von einer späteren Regel überschrieben) */
  .editorial-body { font: 19px/1.85 Quicksand, Arial, sans-serif; max-width: 700px; }
  .editorial-body p { margin: 0 0 22px; }
  .editorial-body .endnote { font: 24px/1.5 Oranienbaum, serif; color: #84232d; }
  .step + .endnote { margin-top: 52px; } /* v1.0.2: mehr Abstand nach Schritt 04 */

  .step { display: grid; grid-template-columns: 45px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid #cfc7ba; }
  .step > span { font-size: 13px; color: #8b3537; }
  .step h3 { font: normal 30px/1.25 Oranienbaum, serif; margin: 0 0 5px; }
  .step p { margin: 0; line-height: 1.65; }

  /* Kaufkarte (v1.0.2) – Desktop */
  .editorial-inner .offer-title { text-align: center; letter-spacing: -.04em; margin: 0 0 48px; max-width: none; }
  .offer-card { max-width: 640px; margin: 0 auto; padding: 56px 64px 44px; }
  .offer-price { font-size: 76px; }
  .offer-list li { font-size: 17px; }

  .purchase-btn {
    display: inline-block; margin-top: 20px; padding: 17px 30px; border-radius: 90px;
    background: #88000a; color: #fff; text-decoration: none;
    font: 600 13px Quicksand, sans-serif; letter-spacing: .05em;
  }
  .quiet-link { display: inline-block; margin-top: 10px; color: #81333c; border-bottom: 1px solid; }

  /* v1.0.5 · zusätzliche Buchungsknöpfe (gleiche Komponente .purchase-btn) */
  .section-cta, .cta-floral { margin-top: 18px; }
  .hz-cta {
    position: relative; z-index: 2; text-align: center; background: #eae3d9;
    padding: clamp(36px, 6vh, 72px) 5vw clamp(48px, 8vh, 88px);
  }
  .hz-cta .purchase-btn { margin-top: 0; }

  /* Early-Bird-Countdown */
  .early-countdown {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    width: 100%; margin: 10px 0 30px; padding: 12px 0 20px;
  }
  .early-countdown .count-label { font: 600 11px/1.4 Quicksand, Arial, sans-serif; letter-spacing: .12em; }
  .early-countdown strong {
    font: normal clamp(30px, 3.8vw, 52px)/1.1 Oranienbaum, Georgia, serif; color: #8a1e29;
    white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  .early-countdown small { font: 12px/1.4 Quicksand, Arial, sans-serif; color: #525149; }

  /* FAQ · feine goldene Plus/Minus-Linien */
  .faq-section details { border-top: 1px solid #cbbda9; padding: 20px 0; }
  .faq-section details:last-child { border-bottom: 1px solid #cbbda9; }
  .faq-section summary {
    position: relative; list-style: none; cursor: pointer; padding-right: 42px;
    font: 25px Oranienbaum, serif;
  }
  .faq-section summary::-webkit-details-marker { display: none; }
  .faq-section summary::marker { content: ''; }
  .faq-section summary::before, .faq-section summary::after {
    content: ''; position: absolute; right: 8px; top: 50%; background: #b89564;
    transition: transform .25s ease, opacity .25s ease;
  }
  .faq-section summary::before { width: 18px; height: 1px; transform: translateY(-50%); }
  .faq-section summary::after { width: 1px; height: 18px; right: 16.5px; transform: translateY(-50%); }
  .faq-section details[open] summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }
  .faq-section details p { margin-top: 13px; font-size: 16px; line-height: 1.65; }

  /* Randbilder */
  .margin-art { position: absolute; z-index: 1; height: auto; max-width: none; pointer-events: none; }
  .art-left  { width: 240px; left: -120px; bottom: 2%; }
  .art-right { width: 280px; right: -155px; top: 15%; }
  .art-paper { width: 220px; right: -80px; top: -40px; opacity: .6; }
  .art-peacock { width: 300px; right: -115px; top: 27%; }
  .art-scene3-left { left: -35px; top: 29%; width: clamp(125px, 13vw, 185px); transform: rotate(-12deg); }

  /* v1.0.1 · Randbilder bleiben im Seitenrand.
     --g = freier Rand neben der Textspalte. Ragt ein Randbild weiter in die
     Spalte als der Rand breit ist (schmale Querformate, z. B. Smartphone
     quer oder 4:3), rückt es um genau diese Differenz + 16 px nach außen.
     Bei 1440 px ist der Rand 280 px breit → Verschiebung 0 (unverändert). */
  .editorial-section { --g: max(5vw, 22px, 50vw - 440px); }
  .editorial-section.offer { --g: max(5vw, 22px, 50vw - 340px); }
  .art-scene3-left { translate: min(0px, calc(var(--g) - 16px - (clamp(125px, 13vw, 185px) - 25px))) 0; }
  .art-left  { translate: min(0px, calc(var(--g) - 16px - 120px)) 0; }
  .art-right { translate: max(0px, calc(140px + 16px - var(--g))) 0; }
  .art-paper { translate: max(0px, calc(140px + 16px - var(--g))) 0; }
  .art-peacock { translate: max(0px, calc(185px + 16px - var(--g))) 0; }

  /* Abschluss */
  .end-section { position: relative; padding: 120px 25px 150px; text-align: center; color: #f6f3ee; background: #182A20; } /* v1.0.4: JUNO-Grün (vorher #1d361b) */
  .end-inner { max-width: 960px; margin: auto; }
  .end-inner h2 { font: normal clamp(50px, 7vw, 112px)/1.04 Oranienbaum, serif; margin: 28px 0; }
  .end-inner p { font: 22px/1.5 Quicksand, sans-serif; }

  /* Footer (aus der Live-Seite) */
  .juno-footer {
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    padding: 55px 22px 0; text-align: center; background: #f6f2ee; color: #20351d;
  }
  .juno-orn { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 18rem; }
  .juno-orn-line { flex: 1; width: 115px; height: 1px; background: #c6aa97; }
  .juno-orn-diamond { width: 6px; height: 6px; background: #c6aa97; transform: rotate(45deg); }
  .juno-footer-icons { display: flex; justify-content: center; gap: 25px; }
  .juno-footer-icons a {
    display: inline-flex; align-items: center; gap: 8px; color: #20351d;
    font-size: 12px; text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
  }
  .juno-footer-icons svg { width: 15px; height: 15px; fill: currentColor; }
  .juno-footer-copy, .juno-footer-copy a { font-size: 11px; color: #6d7568; }
  .juno-footer-wordmark {
    margin-top: 18px; font: normal clamp(65px, 10vw, 140px)/.86 Oranienbaum, Georgia, serif;
    letter-spacing: -.08em; color: #e5dcd5;
  }
}