/* ============================================================
   Startseite (index.php) — Vorlage 1:1 übertragen.
   Page-scoped: wird NUR von index.php geladen, nach app.css (Tokens + .modal- und .mt-Klassen für das Einstiegs-Popover).
   Farben ausschließlich var(--token) aus app.css :root (die Landing-Tokens --ds-text-soft/--ds-chip-* dort).
   Präfix .ld-  — keine Regel greift in app.js-Views. Bilder: public/landing/, Roadbook-Stack = public/roadbook-teaser-stack.png
   (byte-gleich mit dem Mock-Asset, EINE Datei mit dem Trip-Pass-Popover).
   ============================================================ */

/* Newsreader Italic 500 (goldene Kursiv-Zeilen). Lokal (OFL, fonts/newsreader-OFL.txt), kein Google-Fonts-Call. */
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 500; font-display: swap;
             src: url('fonts/newsreader-italic-500-latin.woff2') format('woff2');
             unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 500; font-display: swap;
             src: url('fonts/newsreader-italic-500-latin-ext.woff2') format('woff2');
             unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

.ld * { box-sizing: border-box; }
.ld { min-height: 100vh; display: flex; flex-direction: column; background: var(--ds-cream); color: var(--ds-ink);
      font-family: var(--ds-font); -webkit-font-smoothing: antialiased; }
/* KEINE generische .ld a-Regel: sie würde (0,1,1) die Button-/Footer-Farben (0,1,0 bzw. .site-footer a) überstimmen —
   CTA-Text war orange auf orange. Links färben sich je Element. */
.ld-serif { font: italic 500 1em/1 'Newsreader', Georgia, serif; }
.ld-gold { color: var(--ds-gold); }
.ld-orange { color: var(--ds-orange); }

/* ---- Header ---- */
.ld-head { padding: 18px clamp(20px, 5vw, 64px); background: var(--ds-green); position: sticky; top: 0; z-index: 20; }
/* Navi auf Contentbreite: gleiche max-width + Seitenränder wie Hero/Sektionen */
.ld-head-in { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.ld a.ld-brand { display: flex; text-decoration: none; align-items: center; gap: 14px; color: var(--ds-cream); }
.ld a.ld-brand:hover { color: var(--ds-cream); }
.ld-brand img { height: 34px; width: auto; display: block; }
.ld-brand span { font: 600 12.5px var(--ds-font); letter-spacing: .1em;   /* 12.5px = Navi-Links (alle gleich groß) */ text-transform: uppercase; color: var(--ds-cream);
                 border-left: 1px solid rgba(242, 237, 225, .25); padding-left: 14px; white-space: nowrap; }
.ld-nav { display: flex; align-items: center; gap: 22px; font: 700 12.5px var(--ds-font); letter-spacing: .06em;
          text-transform: uppercase; white-space: nowrap; }
.ld-nav a { color: rgba(242, 237, 225, .85); text-decoration: none; }
.ld-nav a:hover { color: var(--ds-cream); }
.ld a.ld-cta-sm { text-decoration: none; background: var(--ds-orange); color: #fff; border: 0; cursor: pointer; border-radius: 12px; padding: 11px 16px;
             letter-spacing: .02em; text-transform: none; font: 800 13.5px var(--ds-font); display: inline-block; }
.ld a.ld-cta-sm, .ld a.ld-cta { transition: filter .15s ease, transform .15s ease; }
.ld a.ld-cta-sm:hover, .ld a.ld-cta:hover { color: #fff; filter: brightness(.9); transform: translateY(-1px); }   /* Mouse-Over, ohne neues Hex */

/* ---- Hero ---- */
.ld-hero { padding: clamp(40px, 7vw, 88px) clamp(20px, 5vw, 64px) clamp(48px, 7vw, 96px); display: grid;
           grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 5vw, 64px);
           align-items: center; max-width: 1280px; width: 100%; margin: 0 auto; }
.ld-hero-txt { display: flex; flex-direction: column; gap: 26px; }
.ld-kicker { font: 700 11.5px var(--ds-font); letter-spacing: .12em; text-transform: uppercase; color: var(--ds-orange); }
.ld-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 800 20px/1 var(--ds-font);
           letter-spacing: -.01em; color: var(--ds-green); margin: 14px 0 10px; }
.ld-acts span { display: inline-flex; align-items: center; gap: 7px; }
.ld-acts img { width: 22px; height: 22px; display: block; }
.ld-acts i { width: 4px; height: 4px; border-radius: 50%; background: var(--ds-orange); display: inline-block; }
.ld-h1 { margin: 0; font: 800 clamp(38px, 4.6vw, 60px)/1.03 var(--ds-font); letter-spacing: -.025em; color: var(--ds-ink); text-wrap: balance; }
.ld-lead { margin: 0; font: 400 clamp(17px, 1.4vw, 19px)/1.55 var(--ds-font); color: var(--ds-text-soft); text-wrap: pretty; max-width: 560px; }
.ld-lead p { margin: 0; }
.ld a.ld-cta { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; background: var(--ds-orange); color: #fff; border: 0; cursor: pointer;
          border-radius: 14px; padding: 17px 26px; font: 800 16px var(--ds-font); box-shadow: 0 16px 34px -16px rgba(194, 88, 31, .8);
          align-self: flex-start; }
.ld a.ld-cta svg { width: 18px; height: 18px; }
.ld-trust { display: flex; flex-wrap: wrap; gap: 6px 22px; font: 800 15px var(--ds-font); color: var(--ds-success); margin-top: -6px; }
.ld-hero-img { display: flex; align-items: center; justify-content: center; min-width: 0; }
.ld-hero-img img { width: 100%; max-width: 678px; height: auto; display: block; margin-top: -40px; }

/* ---- 3 Schritte ---- */
.ld-steps { padding: clamp(40px, 5vw, 64px) clamp(20px, 5vw, 64px); scroll-margin-top: 90px; background: #fff; }
.ld-steps-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 30px; }
.ld-step { display: flex; flex-direction: column; gap: 14px; }
.ld-step-h { display: flex; align-items: center; gap: 14px; font: 800 19px/1.2 var(--ds-font); letter-spacing: -.01em; }
.ld-step-n { width: 44px; height: 44px; border-radius: 50%; background: var(--ds-green); color: #fff; display: grid; place-items: center;
             font: 800 17px var(--ds-font); flex: none; }
.ld-step-p { font: 400 15px/1.55 var(--ds-font); color: var(--ds-text-soft); padding-left: 58px; }

/* ---- Ergebnisse (dunkel) ---- */
.ld-dark { background: var(--ds-green); color: #fff; padding: clamp(40px, 5vw, 72px) clamp(20px, 5vw, 64px); overflow: hidden; }
.ld-dark-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
              gap: clamp(24px, 3vw, 44px); align-items: center; margin-top: 20px; }
.ld-dark-img { display: flex; align-items: center; justify-content: center; min-width: 0; }
.ld-dark-img img { width: 100%; max-width: 739px; height: auto; display: block; }
.ld-dark-txt { display: flex; flex-direction: column; gap: 22px; }
.ld-h2 { margin: 0; font: 800 clamp(30px, 3.6vw, 46px)/1.05 var(--ds-font); letter-spacing: -.02em; text-wrap: balance; }
.ld-dark .ld-h2 { font-size: clamp(32px, 3.8vw, 50px); letter-spacing: -.025em; }
.ld-dark-quote { margin: 0; font: italic 500 24px/1.3 'Newsreader', Georgia, serif; color: var(--ds-gold); text-wrap: pretty; max-width: 560px; }
.ld-dark-p { margin: 20px 0; font: 400 17px/1.6 var(--ds-font); color: rgba(255, 255, 255, .82); text-wrap: pretty; max-width: 520px; }
.ld-dark-p .ld-serif { font-size: 21px; color: var(--ds-gold); }

/* ---- Fertig gedacht ---- */
.ld-feat { padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px) 0; max-width: 1280px; width: 100%; margin: 0 auto;
           display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.ld-feat .ld-h2 { text-align: center; margin-bottom: 30px; }
.ld-feat-img { display: flex; justify-content: center; min-width: 0; margin-bottom: 40px; }
.ld-feat-img img { width: 100%; height: auto; display: block; border-radius: 22px; box-shadow: 0 34px 80px -40px rgba(40, 44, 20, .45); margin-bottom: 40px; }
.ld-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 20px; }
.ld-card { background: #fff; border: 1px solid var(--ds-line); border-radius: 22px; padding: clamp(24px, 3vw, 32px);
           display: flex; flex-direction: column; gap: 18px; }
.ld-chip { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; }
.ld-chip svg { width: 24px; height: 24px; }
.ld-chip.water { background: var(--ds-chip-water); color: var(--ds-chip-water-fg); }
.ld-chip.sand  { background: var(--ds-chip-sand);  color: var(--ds-chip-sand-fg); }
.ld-chip.leaf  { background: var(--ds-chip-leaf);  color: var(--ds-success); }
.ld-chip.clay  { background: var(--ds-chip-clay);  color: var(--ds-orange); }
.ld-card-body { display: flex; flex-direction: column; gap: 10px; }
.ld-card-h { font: 800 21px/1.25 var(--ds-font); letter-spacing: -.01em; color: var(--ds-ink); text-wrap: balance; }
.ld-card-p { font: 400 15.5px/1.6 var(--ds-font); color: var(--ds-text-soft); text-wrap: pretty; }

/* ---- Trip-Pass ---- */
.ld-tp { padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px) 0; max-width: 1280px; width: 100%; margin: 80px auto; }
.ld-tp-box { position: relative; background: linear-gradient(160deg, var(--ds-green) 0%, color-mix(in srgb, var(--ds-green) 78%, #000) 55%, color-mix(in srgb, var(--ds-green) 58%, #000) 100%);   /* Mock: #2C3018/#23261a — aus dem Token abgeleitet statt neuer Hexwerte (Reviewer W1) */ color: var(--ds-cream);
             border-radius: 28px; padding: clamp(32px, 4.5vw, 64px); overflow: hidden; display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }
.ld-tp-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 80% 0%, rgba(231, 201, 121, .18), transparent 70%); }
.ld-tp-line { position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
              background: linear-gradient(90deg, transparent, var(--ds-gold) 30%, var(--ds-gold-2) 70%, transparent); }
.ld-tp-head { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.ld-tp-headtxt { display: flex; flex-direction: column; gap: 16px; max-width: 760px; flex: 1 1 420px; min-width: 0; }
.ld-tp-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 9px; font: 800 10.5px var(--ds-font); letter-spacing: .14em;
               text-transform: uppercase; color: var(--ds-gold-ink); background: linear-gradient(135deg, var(--ds-gold), var(--ds-gold-2));
               border-radius: 999px; padding: 8px 13px 8px 10px; box-shadow: 0 8px 20px -8px rgba(201, 154, 58, .6); }
.ld-tp-badge svg { width: 14px; height: 14px; }
.ld-tp-p { margin: 0; font: 400 17px/1.6 var(--ds-font); color: rgba(242, 237, 225, .8); text-wrap: pretty; max-width: 640px; }
.ld-tp-price { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; text-align: right; margin-top: 46px; padding-right: 30px; }
.ld-tp-price b { font: 800 clamp(44px, 5vw, 64px)/1 var(--ds-font); letter-spacing: -.03em; color: var(--ds-cream); }
.ld-tp-price span { font: 600 15px var(--ds-font); color: rgba(242, 237, 225, .6); }
.ld-tp-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 18px; }
.ld-tp-tile { background: rgba(242, 237, 225, .06); border: 1px solid rgba(231, 201, 121, .22); border-radius: 22px;
              padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 32px) 0; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.ld-tp-k { font: 800 10px var(--ds-font); letter-spacing: .14em; text-transform: uppercase; color: var(--ds-gold); }
.ld-tp-h { font: 800 23px/1.2 var(--ds-font); letter-spacing: -.01em; }
.ld-tp-t { font: 400 15.5px/1.6 var(--ds-font); color: rgba(242, 237, 225, .78); text-wrap: pretty; }
.ld-tp-img { margin-top: auto; padding-top: 10px; display: flex; justify-content: center; }
.ld-tp-img img { height: auto; display: block; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .5)); }
.ld-tp-img.rb img { width: 95%; max-width: 400px; margin-bottom: -14%; }
.ld-tp-img.pk img { width: 72%; max-width: 360px; margin-bottom: -38%; }
.ld-tp-img.ok img { width: 86%; max-width: 400px; margin-bottom: -10%; }   /* Offline-Kartensatz: quadratisch + freigestellt, weniger Überstand als die hochkante Packliste */
.ld-tp-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 22px; align-items: start;
             background: rgba(242, 237, 225, .06); border: 1px solid rgba(231, 201, 121, .22); border-radius: 22px;
             padding: clamp(22px, 3vw, 28px) clamp(24px, 3vw, 32px); }
.ld-tp-row-ic { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--ds-gold), var(--ds-gold-2));
                color: var(--ds-gold-ink); display: grid; place-items: center; }
.ld-tp-row-ic svg { width: 24px; height: 24px; }
.ld-tp-row-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px 40px; align-items: start; }
.ld-tp-row-in > div:first-child { display: flex; flex-direction: column; gap: 6px; }
.ld-tp-foot { position: relative; display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap;
              border-top: 1px solid rgba(231, 201, 121, .2); padding-top: clamp(20px, 3vw, 28px); text-align: center; }
.ld-tp-foot svg { width: 20px; height: 20px; flex: none; color: var(--ds-gold); }
.ld-tp-foot span { font: 600 clamp(18px, 1.6vw, 21px)/1.45 var(--ds-font); color: rgba(242, 237, 225, .9); text-wrap: pretty; }

/* ---- CTA-Band ---- */
.ld-band { padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px); max-width: 1280px; width: 100%; margin: 0 auto 100px; }
.ld-band-box { background: var(--ds-orange); color: #fff; border-radius: 26px; padding: clamp(32px, 5vw, 60px); display: flex; flex-wrap: wrap;
               align-items: center; justify-content: space-between; gap: 24px; }
.ld-band-txt { display: flex; flex-direction: column; gap: 8px; max-width: 620px; }
.ld-band-h { font: 800 clamp(26px, 3vw, 38px)/1.1 var(--ds-font); letter-spacing: -.02em; text-wrap: balance; }
.ld-band-p { font: 400 16px/1.5 var(--ds-font); color: rgba(255, 255, 255, .88); }
.ld-band-meta { font: 400 19px/1.4 var(--ds-font); color: #fff; margin-top: 6px; }
.ld a.ld-cta.dark { background: var(--ds-green); box-shadow: none; padding: 16px 24px; font-size: 15px; flex: none; }

/* ---- FAQ ---- */
.ld-faq { padding: 0 clamp(20px, 5vw, 64px) clamp(48px, 7vw, 96px); max-width: 1280px; width: 100%; margin: 0 auto; display: grid;
          grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 4vw, 64px); scroll-margin-top: 90px; }
.ld-faq-side { display: flex; flex-direction: column; gap: 14px; align-self: start; position: sticky; top: 100px; }
.ld-faq-side .ld-kicker { font-size: 16px; }
.ld-faq-side p { margin: 0; font: 400 16px/1.6 var(--ds-font); color: var(--ds-text-soft); }
.ld-faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--ds-line); grid-column: span 2; max-width: 760px; }
.ld-faq-list details { border-bottom: 1px solid var(--ds-line); }
.ld-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer;
                       font: 800 17px/1.3 var(--ds-font); list-style: none; }
.ld-faq-list summary::-webkit-details-marker { display: none; }
.ld-faq-chev { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(60, 66, 34, .2); display: grid; place-items: center;
               flex: none; color: var(--ds-orange); transition: transform .2s; }
.ld-faq-chev svg { width: 14px; height: 14px; }
.ld-faq-list details[open] .ld-faq-chev { transform: rotate(45deg); }
.ld-faq-a { padding: 0 44px 20px 0; font: 400 15.5px/1.6 var(--ds-font); color: var(--ds-text-soft); }
@media (max-width: 720px) { .ld-faq-list { grid-column: auto; } }