/* =========================================================
   Familia Aurea — Verfeinerungs-Layer (nur Design)
   Ziel: ruhiger, edler, harmonischer.
   Inhalte, URLs, Struktur bleiben unverändert.
   ========================================================= */

:root{
  /* Weichere, wärmere Ergänzungen zum bestehenden Palette */
  --fa-ink:            #2a2520;
  --fa-ink-soft:       #4a4238;      /* etwas dunkler & wärmer als #534b41 */
  --fa-muted:          #6d6458;      /* leicht wärmer für Fließtext */
  --fa-paper:          #fbf7ef;
  --fa-paper-2:        #f5efe2;
  --fa-cream:          #fffdf7;

  --fa-gold:           #96690f;
  --fa-gold-deep:      #7c5409;
  --fa-gold-warm:      #b98a2a;

  /* Weichere, ruhigere Goldtöne für Linien und Rahmen */
  --fa-gold-line:      rgba(150,105,15,0.18);
  --fa-gold-line-2:    rgba(150,105,15,0.28);
  --fa-gold-wash:      rgba(150,105,15,0.06);
  --fa-gold-glow:      rgba(150,105,15,0.10);

  /* Sanfte, warme Schatten (mehrschichtig, würdig) */
  --fa-shadow-1:       0 1px 2px rgba(74,54,17,0.05),
                       0 8px 22px rgba(74,54,17,0.06);
  --fa-shadow-2:       0 1px 2px rgba(74,54,17,0.05),
                       0 14px 34px rgba(74,54,17,0.09),
                       0 30px 60px rgba(74,54,17,0.06);
  --fa-shadow-cta:     0 1px 1px rgba(74,54,17,0.10),
                       0 10px 22px rgba(150,105,15,0.22);

  --fa-radius:         22px;
  --fa-radius-sm:      14px;
  --fa-radius-pill:    999px;
}

/* ---------------------------------------------------------
   Grundton, Rendering, Ruhe
   --------------------------------------------------------- */
html { scroll-behavior: smooth; }
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01","liga","kern";
  color: var(--fa-ink);
}

/* Ruhige Absätze in wärmerem Ton, bessere Lesetiefe */
p{
  color: var(--fa-muted);
  line-height: 1.72;
  text-wrap: pretty;
}

/* Überschriften: klarer, gesetzter, ruhig gebalanced */
h1, h2, h3, h4{
  color: var(--fa-ink);
  text-wrap: balance;
  letter-spacing: -0.012em;
}
h1.display{
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.06;
}
h2.head{
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.14;
}
h3{
  font-weight: 500;
  color: var(--fa-ink);
}

/* Lead-Text: warm, ruhig, gut lesbar */
.lead{
  color: var(--fa-ink-soft);
  line-height: 1.62;
  font-weight: 400;
  text-wrap: pretty;
}

/* Ruhige Auswahlfarbe */
::selection{ background: rgba(150,105,15,0.18); color: var(--fa-ink); }

/* ---------------------------------------------------------
   Statischer Zustand: keine Scroll-Animationen (Wunsch)
   --------------------------------------------------------- */
.reveal,
.reveal.in{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Reduzierte Bewegung generell respektieren */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------------------------------------------------------
   Header — ruhiger, klarer, aufgeräumter
   --------------------------------------------------------- */
.site-header{
  transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.site-header.scrolled{
  background: rgba(251,247,239,0.88);
  box-shadow: 0 1px 0 var(--fa-gold-line), 0 10px 30px rgba(74,54,17,0.05);
}
.header-inner{
  height: 84px;
  gap: 24px;
}
.brand-mark{
  flex-shrink: 0;
  min-width: 0;
}
.brand-mark img{
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 2px 6px rgba(150,105,15,0.14));
}
.brand-mark .bn{
  color: var(--fa-gold-deep);
  font-size: 1.34rem;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.brand-mark .bs{
  color: #857a68;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  margin-top: 4px;
  white-space: nowrap;
}

/* Nav: bessere Abstände, kein Umbruch, ruhige Hover */
.nav-desktop{ gap: 2px; }
.nav-desktop a{
  color: #4d4438;
  font-size: 0.86rem;
  font-weight: 550;
  padding: 10px 14px;
  border-radius: 10px;
  white-space: nowrap;
  transition: color .25s ease, background-color .25s ease;
}
.nav-desktop a:hover,
.nav-desktop a.active{
  background: rgba(150,105,15,0.07);
  color: var(--fa-gold-deep);
}

/* CTA im Header: kompakter, präziser, kein Umbruch */
.nav-cta{
  white-space: nowrap;
  font-size: 0.9rem !important;
  padding: 11px 22px !important;
  min-height: 44px !important;
  border-radius: var(--fa-radius-pill) !important;
  background: var(--fa-gold) !important;
  color: #fff !important;
  box-shadow: var(--fa-shadow-cta) !important;
  letter-spacing: 0.005em;
  margin-left: 10px;
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.nav-cta:hover{
  background: var(--fa-gold-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 3px rgba(74,54,17,0.10), 0 14px 26px rgba(150,105,15,0.28) !important;
}

/* Mobile-Drawer — ruhiger, edler */
.mobile-drawer{
  background: rgba(251,247,239,0.97);
}
.mobile-drawer a{
  border-bottom: 1px solid var(--fa-gold-line);
  font-size: 1.35rem;
  padding: 16px 6px;
}

/* ---------------------------------------------------------
   Buttons — würdig, ruhig, ohne Aggressivität
   --------------------------------------------------------- */
.btn{
  min-height: 52px;
  padding: 14px 28px;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: var(--fa-radius-pill);
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.btn-primary{
  background: var(--fa-gold);
  color: #fff;
  box-shadow: var(--fa-shadow-cta);
  border: 1.5px solid transparent;
}
.btn-primary:hover{
  background: var(--fa-gold-deep);
  transform: translateY(-1px);
  box-shadow: 0 2px 3px rgba(74,54,17,0.10), 0 14px 26px rgba(150,105,15,0.26);
}
.btn-ghost{
  background: rgba(255,255,255,0.72);
  color: var(--fa-ink);
  border: 1.5px solid var(--fa-gold-line-2);
  box-shadow: 0 1px 2px rgba(74,54,17,0.04);
}
.btn-ghost:hover{
  background: #fff;
  border-color: var(--fa-gold);
  color: var(--fa-gold-deep);
  transform: translateY(-1px);
}
.btn-link{
  color: var(--fa-gold-deep);
  font-weight: 600;
  transition: color .25s ease, gap .25s ease;
}
.btn-link:hover{
  color: var(--fa-gold);
  gap: 12px;
}
.actions{ gap: 14px; row-gap: 12px; }

/* ---------------------------------------------------------
   Karten — sanfte Schatten, feine Goldlinien, mehr Ruhe
   --------------------------------------------------------- */
.card{
  background: linear-gradient(180deg, rgba(255,253,247,0.94), rgba(255,251,242,0.88));
  border: 1px solid var(--fa-gold-line);
  border-radius: var(--fa-radius);
  box-shadow: var(--fa-shadow-1);
  padding: clamp(28px, 3.6vw, 44px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease;
  position: relative;
}

/* Feine goldene Trennlinie oben auf jeder Karte – dezent, edel */
.card::before{
  content: "";
  position: absolute;
  top: 0;
  left: clamp(28px, 3.6vw, 44px);
  right: clamp(28px, 3.6vw, 44px);
  height: 1px;
  background: linear-gradient(90deg,
              transparent,
              rgba(150,105,15,0.22) 20%,
              rgba(150,105,15,0.22) 80%,
              transparent);
  pointer-events: none;
}
.card.hover:hover{
  border-color: var(--fa-gold-line-2);
  box-shadow: var(--fa-shadow-2);
  transform: translateY(-3px);
}

.card-num{
  width: 44px;
  height: 44px;
  font-size: 1.02rem;
  background: var(--fa-gold);
  color: #fff;
  box-shadow: 0 1px 2px rgba(74,54,17,0.10), 0 8px 18px rgba(150,105,15,0.22);
  margin-bottom: 22px;
}
.price-tag{
  color: var(--fa-gold-deep);
  font-size: 1.02rem;
  margin-top: 6px;
}

/* Zitat-Karte — würdig, ruhig */
.quote-card{
  background:
    radial-gradient(circle at 12% 14%, var(--fa-gold-wash), transparent 44%),
    linear-gradient(180deg, rgba(255,253,247,0.96), rgba(255,251,242,0.90));
  border-left: 2px solid var(--fa-gold);
}
.pullquote{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--fa-ink);
  line-height: 1.42;
  letter-spacing: -0.005em;
}

/* Notice / Hinweisbox — weicher */
.notice{
  background: rgba(255,255,255,0.66);
  border: 1px solid var(--fa-gold-line);
  border-radius: var(--fa-radius-sm);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: 0 1px 2px rgba(74,54,17,0.04);
}
.notice p{ color: var(--fa-ink-soft); }
.safety-note{ color: var(--fa-muted); font-style: italic; }

/* Pills */
.pill{
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--fa-gold-line);
  color: var(--fa-ink-soft);
  font-weight: 550;
  letter-spacing: 0.01em;
  padding: 8px 16px;
}

/* Kicker / Eyebrow — ruhiger, feiner */
.kicker{
  color: var(--fa-gold-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  margin-bottom: 20px;
}
.kicker::before{
  background: var(--fa-gold);
  height: 1.5px;
  width: 28px;
}
.eyebrow{
  color: #7a715f;
  font-weight: 650;
  letter-spacing: 0.26em;
}

/* Feine goldene Zentraltrennlinie — ruhiger Verlauf */
.gold-rule{
  height: 1px;
  background: linear-gradient(90deg, var(--fa-gold), rgba(150,105,15,0));
  border: 0;
  margin: 0;
  width: 96px;
}
.gold-rule.center{
  background: linear-gradient(90deg,
                              transparent 0%,
                              rgba(150,105,15,0.16) 22%,
                              var(--fa-gold) 50%,
                              rgba(150,105,15,0.16) 78%,
                              transparent 100%);
  margin: 0 auto;
  width: 140px;
}

/* ---------------------------------------------------------
   Sections — vertikale Ruhe, klare Führung
   --------------------------------------------------------- */
.section       { padding: clamp(64px, 9.5vw, 116px) 0; }
.section-tight { padding: clamp(44px, 6.5vw, 72px) 0; }

.grid{
  gap: clamp(22px, 2.8vw, 32px);
}

/* ---------------------------------------------------------
   Hero — großzügiger, ruhiger Rahmen
   --------------------------------------------------------- */
.hero{
  padding-top: clamp(48px, 7.5vw, 88px);
  padding-bottom: clamp(72px, 10vw, 128px);
}
.hero-bg::after{
  background: linear-gradient(180deg,
              rgba(251,247,239,0.62) 0%,
              rgba(251,247,239,0.86) 55%,
              var(--fa-paper) 100%);
}
.trust-line{
  color: var(--fa-gold-deep);
  font-weight: 550;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------
   Bilder / Rahmen — ruhige, sanfte Rahmung
   --------------------------------------------------------- */
.img-frame{
  border: 1px solid var(--fa-gold-line);
  border-radius: var(--fa-radius);
  box-shadow: var(--fa-shadow-2);
  overflow: hidden;
}
.cover-img{
  border: 1px solid var(--fa-gold-line);
  border-radius: var(--fa-radius-sm);
  box-shadow: var(--fa-shadow-1);
}

/* ---------------------------------------------------------
   Footer — würdig, warm, dunkel-samten
   --------------------------------------------------------- */
.site-footer{
  background: #221d17;
  color: #e5dccb;
  padding: clamp(56px, 8vw, 96px) 0 40px;
  position: relative;
}
.site-footer::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
                              transparent,
                              rgba(184,140,60,0.35) 20%,
                              rgba(184,140,60,0.35) 80%,
                              transparent);
}
.site-footer a{
  color: #d6c7a4;
  transition: color .25s ease;
}
.site-footer a:hover{ color: #f0e4c8; }
.footer-col h4{
  color: #b79b62;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  margin-bottom: 18px;
}
.footer-col a{ padding: 7px 0; font-size: 0.94rem; }
.footer-bottom{
  border-top: 1px solid rgba(216,201,168,0.16);
  color: #ac9d83;
  padding-top: 26px;
  margin-top: 44px;
}

/* ---------------------------------------------------------
   Formulare — weich, ruhig, freundlich
   --------------------------------------------------------- */
.field{ margin-bottom: 20px; }
.field label{
  color: var(--fa-ink);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea{
  background: rgba(255,255,255,0.88);
  border: 1.25px solid var(--fa-gold-line-2);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  color: var(--fa-ink);
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  background: #fff;
  border-color: var(--fa-gold);
  box-shadow: 0 0 0 3px rgba(150,105,15,0.10);
}
.consent{
  color: var(--fa-ink-soft);
  font-size: 0.9rem;
}

/* ---------------------------------------------------------
   Focus — deutlich, aber ruhig-golden
   --------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--fa-gold);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------------------------------------------------------
   Mobile & Tablet — ruhige, saubere Anpassung
   --------------------------------------------------------- */
@media (max-width: 1099px){
  .header-inner{ height: 72px; }
  .brand-mark .bs{ display: none; }        /* auf schmalen Screens weniger Zeilen */
  .brand-mark .bn{ font-size: 1.22rem; }
  .brand-mark img{ width: 38px; height: 38px; }
}

@media (max-width: 760px){
  .header-inner{ height: 68px; }
  .brand-mark img{ width: 34px; height: 34px; }
  .brand-mark .bn{ font-size: 1.12rem; }

  .btn{
    min-height: 50px;
    padding: 13px 22px;
    font-size: 0.96rem;
  }

  .card{
    padding: clamp(22px, 5.2vw, 30px);
    border-radius: 20px;
  }
  .card::before{
    left: clamp(22px, 5.2vw, 30px);
    right: clamp(22px, 5.2vw, 30px);
  }

  .section       { padding: clamp(52px, 12vw, 84px) 0; }
  .section-tight { padding: clamp(38px, 9vw, 60px) 0; }

  .hero{
    padding-top: clamp(36px, 9vw, 60px);
    padding-bottom: clamp(56px, 12vw, 92px);
  }

  h1.display{
    font-size: clamp(2.15rem, 8.4vw, 3.1rem);
    line-height: 1.08;
  }
  h2.head{
    font-size: clamp(1.72rem, 6.6vw, 2.4rem);
    line-height: 1.16;
  }
  .lead{ font-size: 1.06rem; line-height: 1.62; }

  .actions{ gap: 12px; }
  .actions .btn{ width: 100%; }
}

@media (max-width: 420px){
  .header-inner{ height: 64px; }
  .container{ padding: 0 18px; }
  .brand-mark .bn{ font-size: 1.02rem; }
  h1.display{ font-size: clamp(1.9rem, 9vw, 2.4rem); }
  h2.head{ font-size: clamp(1.5rem, 7.4vw, 1.9rem); }
  .card{ padding: 22px 20px; }
  .card::before{ left: 20px; right: 20px; }
}

/* ---------------------------------------------------------
   Ergänzungen für die HTML-Leseproben (aurea.css-Umgebung)
   Feinschliff nur, wo aurea.css aktiv ist.
   --------------------------------------------------------- */
.hero,
.card,
.section-panel,
.trust-box,
.quote-box{
  box-shadow: var(--fa-shadow-1);
  border-color: var(--fa-gold-line-2);
}
.hero{
  box-shadow: var(--fa-shadow-2);
}

/* Leseproben-Buchcover ruhiger rahmen */
.book-cover{
  box-shadow: var(--fa-shadow-2);
  border: 1px solid var(--fa-gold-line-2);
}

/* Blockquotes / Zitate — ruhige Serifen-Anmutung */
.quote,
.pullquote{
  font-style: italic;
  letter-spacing: -0.005em;
}

/* ---------------------------------------------------------
   Ruhige Details: Trennlinien vor größeren Blöcken
   --------------------------------------------------------- */
.section + .section > .container > .kicker.centered{
  margin-top: 4px;
}

/* ---------------------------------------------------------
   Direkter Kurs-Bestellweg und Online-Rücktrittsfunktion
   --------------------------------------------------------- */
#bestellung,
#lebensbuch{
  scroll-margin-top: 100px;
}
.fa-check{
  align-items: center;
  border: 1px solid var(--fa-gold-line-2);
  border-radius: 50%;
  color: var(--fa-gold-deep);
  display: inline-flex;
  flex: 0 0 24px;
  font-size: 0.82rem;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  margin-top: 2px;
  width: 24px;
}
.price-display{
  color: var(--fa-gold-deep);
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size: clamp(2.5rem, 7vw, 4.2rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 8px 0 20px;
}
.order-card{
  padding: clamp(24px, 4vw, 46px);
}
.order-form{
  display: grid;
  gap: 26px;
}
.form-grid{
  display: grid;
  gap: 0 18px;
  grid-template-columns: 1fr 1fr;
}
.form-span-2{
  grid-column: 1 / -1;
}
.payment-fieldset{
  border: 0;
  margin: 0;
  padding: 0;
}
.payment-fieldset legend{
  color: var(--fa-ink);
  font-size: 0.94rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.payment-options{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
.payment-option{
  align-items: flex-start;
  background: rgba(255,255,255,0.68);
  border: 1.25px solid var(--fa-gold-line-2);
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  min-height: 94px;
  padding: 16px;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.payment-option:hover,
.payment-option:focus-within{
  background: rgba(255,255,255,0.94);
  border-color: var(--fa-gold);
  box-shadow: 0 0 0 3px rgba(150,105,15,0.08);
}
.payment-option input{
  flex: 0 0 auto;
  margin-top: 5px;
}
.payment-option span{
  display: grid;
  gap: 4px;
}
.payment-option strong{
  color: var(--fa-ink);
}
.payment-option small{
  color: var(--fa-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}
.order-summary{
  background: rgba(255,255,255,0.72);
  border: 1.25px solid var(--fa-gold-line-2);
  border-radius: 18px;
  padding: clamp(18px, 3vw, 26px);
}
.order-summary > div{
  align-items: flex-start;
  border-bottom: 1px solid var(--fa-gold-line-1);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(120px, .8fr) minmax(0, 1.7fr);
  padding: 10px 0;
}
.order-summary > div:last-child{
  border-bottom: 0;
}
.order-summary span{
  color: var(--fa-muted);
  font-size: 0.9rem;
}
.order-summary strong{
  color: var(--fa-ink);
  text-align: right;
}
.order-summary .order-total{
  margin-top: 6px;
  padding-top: 15px;
}
.order-summary .order-total span,
.order-summary .order-total strong{
  color: var(--fa-gold-deep);
  font-size: 1.08rem;
}
.order-summary.compact{
  margin: 18px 0;
}
.legal-checks{
  display: grid;
  gap: 16px;
}
.legal-checks .consent{
  background: rgba(255,255,255,0.58);
  border: 1px solid var(--fa-gold-line-1);
  border-radius: 14px;
  padding: 14px 16px;
}
.privacy-link,
.legal-draft-note{
  font-size: 0.88rem;
  margin: 0;
}
.legal-draft-note{
  background: rgba(255,255,255,0.62);
  border-left: 3px solid var(--fa-gold);
  color: var(--fa-muted);
  padding: 10px 13px;
}
.text-link{
  color: var(--fa-gold-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.text-link:hover{
  color: var(--fa-gold);
}
.final-order-info{
  background: rgba(255,255,255,0.72);
  border: 1.5px solid var(--fa-gold);
  border-radius: 16px;
  padding: 18px;
}
.final-order-info strong{
  color: var(--fa-ink);
  display: block;
  margin-bottom: 6px;
}
.final-order-info p{
  color: var(--fa-ink-soft);
  margin: 0;
}
.order-submit{
  justify-self: stretch;
  width: 100%;
}
.btn:disabled{
  cursor: not-allowed;
  opacity: .68;
  transform: none;
}
.form-error{
  background: rgba(255,255,255,0.82);
  border: 1.5px solid var(--fa-gold-deep);
  border-radius: 14px;
  color: var(--fa-ink);
  padding: 14px 16px;
}
.payment-instructions{
  background: rgba(255,255,255,0.72);
  border-left: 3px solid var(--fa-gold);
  margin: 18px 0;
  padding: 16px 18px;
}
.payment-instructions h4{
  color: var(--fa-ink);
  margin: 0 0 10px;
}
.payment-instructions p{
  margin: 0 0 5px;
  overflow-wrap: anywhere;
}
.order-confirmation .btn{
  margin: 4px 0 20px;
}
.hp-field{
  height: 1px !important;
  left: -10000px !important;
  overflow: hidden !important;
  position: absolute !important;
  top: auto !important;
  width: 1px !important;
}

@media (max-width: 680px){
  .form-grid,
  .payment-options{
    grid-template-columns: 1fr;
  }
  .form-span-2{
    grid-column: auto;
  }
  .order-summary > div{
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .order-summary strong{
    text-align: left;
  }
}

/* ---------------------------------------------------------
   Gezielter Navigations-Feinschliff fuer das Hauptprodukt
   --------------------------------------------------------- */
.header-inner{
  max-width: 1480px;
}
.nav-desktop a[href="/kurs"],
.mobile-drawer a[href="/kurs"]{
  color: var(--fa-gold-deep);
  font-weight: 650;
}

/* Die laengere Bezeichnung "Zurueck zu dir" soll nicht in eine
   gedrängte Desktop-Navigation gezwungen werden. Unterhalb 1360 px
   bleibt deshalb der bereits vorhandene, getestete Menue-Drawer aktiv. */
@media (min-width: 1100px) and (max-width: 1359px){
  .nav-desktop{ display: none; }
  .menu-btn{ display: inline-flex; }
}
@media (min-width: 1360px){
  .nav-desktop{ display: flex; }
  .menu-btn{ display: none; }
}

/* Direkter PayPal-Checkout */
.paypal-live-box{
  background: rgba(255,255,255,0.72);
  border: 1.5px solid var(--fa-gold-line-2);
  border-radius: 18px;
  display: grid;
  gap: 14px;
  padding: clamp(18px, 3vw, 24px);
}
.paypal-live-heading{
  display: grid;
  gap: 6px;
}
.paypal-live-heading strong{
  color: var(--fa-ink);
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size: 1.18rem;
}
.paypal-live-heading p,
.paypal-status{
  color: var(--fa-muted);
  margin: 0;
}
.paypal-button-container{
  min-height: 48px;
  position: relative;
  width: 100%;
  z-index: 0;
}
.paypal-live-box iframe{
  border-radius: 10px;
}
@media (max-width: 680px){
  .paypal-live-box{
    padding: 16px;
  }
}