/* londoncitypass.com — Bausteine der WordPress-Fassung (design-system/
   lcp-global.css, Stand 07/2026), übernommen am 09.10.2026 für die statische
   Site. Kopf, Fuss, Karten, Vergleichstabelle und Kaufleisten kommen aus
   assets/site.css (rp-…, eingefärbt in Petrol und Orange). Ergänzungen für
   die statische Fassung stehen am Dateiende (Abschnitt 50). */
/* =============================================================
   LondonCityPass.com – Globales Design-System
   ------------------------------------------------------------
   Version: 1.0
   Stand:   18.05.2026
   Stack:   WordPress + GeneratePress (Custom-HTML-Blocks)
   Sprache: DE (Root), TranslatePress für weitere Sprachen

   Header, Hauptnavigation und Footer kommen von GeneratePress.
   Diese Datei liefert Tokens + alle wiederverwendbaren Inline-
   Komponenten für die Unterseiten-Inhalte.

   Einsatz:
   1) Inhalte komplett in „Erscheinungsbild → Customizer →
      Zusätzliches CSS" einfügen ODER
   2) Im Child-Theme als style.css-Erweiterung laden.

   Alle Klassen sind mit `lcp-` präfigiert und kollidieren
   nicht mit GeneratePress- oder Plugin-Klassen.
   ============================================================= */


/* =============================================================
   1. DESIGN-TOKENS (CSS Custom Properties)
   ============================================================= */
:root {
  /* Brand-Farben */
  --lcp-brand:           #1E8375;   /* Primär (Petrol/Teal) */
  --lcp-brand-dark:      #1a6b5f;   /* Promo-Banner Verlauf links */
  --lcp-brand-light:     #24997e;   /* Promo-Banner Verlauf rechts */
  --lcp-brand-tint-08:   rgba(30,131,117,0.08);
  --lcp-brand-tint-06:   rgba(30,131,117,0.06);
  --lcp-brand-tint-04:   rgba(30,131,117,0.04);
  --lcp-brand-tint-03:   rgba(30,131,117,0.03);
  --lcp-brand-tint-12:   rgba(30,131,117,0.12);
  --lcp-brand-link-line: rgba(30,131,117,0.3);

  /* CTA-Akzent */
  --lcp-cta:             #d9661a;   /* Orange für Primär-CTAs (statische Fassung: dunkler als #EF7F2C für lesbare weisse Schrift) */
  --lcp-cta-shadow:      rgba(239,127,44,0.35);
  --lcp-cta-tint-06:     rgba(239,127,44,0.06);
  --lcp-cta-tint-05:     rgba(239,127,44,0.05);
  --lcp-cta-tint-03:     rgba(239,127,44,0.03);

  /* Pass-Badges (Attraktionen-Karten und Tabellen) */
  --lcp-pass-lp: #1E8375;  /* London Pass */
  --lcp-pass-ep: #2BA8A0;  /* Explorer Pass */
  --lcp-pass-hp: #9B59B6;  /* Headout Pass */
  --lcp-pass-tp: #E67E22;  /* Turbopass */
  --lcp-pass-mm: #3498DB;  /* Merlin Multi */

  /* Hintergründe */
  --lcp-bg-page:    #ffffff;
  --lcp-bg-soft:    #f0f7f6;   /* Light Petrol – Trust Bar, Quiz-Result */
  --lcp-bg-muted:   #f5f5f5;   /* Tabellen-Header, Footer-CTA */
  --lcp-bg-card:    #ffffff;

  /* Linien */
  --lcp-border:        #e0e0e0;
  --lcp-border-soft:   #eeeeee;
  --lcp-border-strong: #dddddd;
  --lcp-border-tint:   #d8ebe9;  /* Trust Bar */

  /* Text */
  --lcp-text:        #222222;
  --lcp-text-body:   #444444;
  --lcp-text-muted:  #555555;
  --lcp-text-light:  #777777;
  --lcp-text-faint:  #888888;

  /* Radien */
  --lcp-r-sm:  4px;
  --lcp-r-md:  6px;   /* Buttons */
  --lcp-r-lg:  8px;
  --lcp-r-xl:  10px;
  --lcp-r-2xl: 12px;  /* Cards */
  --lcp-r-pill: 20px; /* Filter-Chips, Badges */

  /* Schatten */
  --lcp-shadow-sm:    0 2px 12px rgba(30,131,117,0.12);
  --lcp-shadow-card:  0 4px 16px rgba(0,0,0,0.08);
  --lcp-shadow-card-hover: 0 4px 20px rgba(0,0,0,0.08);
  --lcp-shadow-cta:   0 6px 20px rgba(0,0,0,0.25);
  --lcp-shadow-bar:   0 -2px 12px rgba(0,0,0,0.12);

  /* Container */
  --lcp-container:        1200px;
  --lcp-container-narrow: 800px;
  --lcp-container-tools:  720px;

  /* Spacing */
  --lcp-space-section-y: 48px;
  --lcp-space-section-x: 20px;

  /* Typo-Skala (responsive über clamp) */
  --lcp-font-h1: clamp(1.8rem, 3.5vw, 2.6rem);   /* Hero-H1 */
  --lcp-font-h2: clamp(1.3rem, 2.5vw, 1.7rem);   /* Section-Headlines */
  --lcp-font-h3: 1.2rem;
  --lcp-font-h4: 1.05rem;
  --lcp-font-body: 1rem;
  --lcp-font-small: 0.9rem;
  --lcp-font-xs: 0.82rem;

  /* Transitions */
  --lcp-t-fast: 0.2s;
  --lcp-t-med:  0.3s;
}


/* =============================================================
   2. TYPOGRAFIE-HELFER (optional pro Section nutzbar)
   ------------------------------------------------------------
   GeneratePress liefert die Basis-Typo (h1–h6, p, Listen).
   Diese Klassen werden in Komponenten verwendet, nicht global
   auf alle Headings angewendet.
   ============================================================= */
.lcp-h1 {
  font-size: var(--lcp-font-h1);
  font-weight: 700;
  line-height: 1.2;
  color: var(--lcp-text);
  margin: 0 0 16px;
}
.lcp-h2 {
  font-size: var(--lcp-font-h2);
  font-weight: 700;
  line-height: 1.25;
  color: var(--lcp-text);
  margin: 0 0 8px;
}
.lcp-h3 {
  font-size: var(--lcp-font-h3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--lcp-text);
  margin: 0 0 8px;
}
.lcp-lead {
  font-size: var(--lcp-font-body);
  color: var(--lcp-text-muted);
  line-height: 1.55;
  margin: 0 0 24px;
}
.lcp-muted {
  color: var(--lcp-text-muted);
}
.lcp-text-center {
  text-align: center;
}


/* =============================================================
   3. SECTION-WRAPPER (für alle Unterseiten)
   ------------------------------------------------------------
   Standard-Wrapper für Content-Sections. Wahl der Container-
   Breite per Modifier.
   ============================================================= */
.lcp-section {
  max-width: var(--lcp-container);
  margin: 0 auto;
  padding: var(--lcp-space-section-y) var(--lcp-space-section-x) 40px;
}
.lcp-section--narrow   { max-width: var(--lcp-container-narrow); }
.lcp-section--tools    { max-width: var(--lcp-container-tools); }

/* Vollbreite-Section mit farbigem Hintergrund (Promo, Closing CTA) */
.lcp-band {
  padding: 56px 20px;
}
.lcp-band--brand { background: var(--lcp-brand); color: #fff; }
.lcp-band--soft  { background: var(--lcp-bg-soft); }

/* Section-Header (Headline + Sub) */
.lcp-section-head {
  text-align: center;
  margin-bottom: 32px;
}
.lcp-section-head .lcp-h2 {
  margin-bottom: 8px;
}
.lcp-section-head .lcp-lead {
  margin-bottom: 0;
}


/* =============================================================
   4. BREADCRUMBS (GeneratePress liefert keine – eigene Komponente)
   ------------------------------------------------------------
   Einsatz: ganz oben auf jeder Unterseite, vor dem Hero/H1.
   Markup-Beispiel inkl. Schema.org BreadcrumbList siehe
   pattern-library.html.
   ============================================================= */
.lcp-breadcrumbs {
  max-width: var(--lcp-container);
  margin: 0 auto;
  padding: 14px var(--lcp-space-section-x) 0;
  font-size: var(--lcp-font-xs);
  color: var(--lcp-text-light);
  line-height: 1.4;
}
.lcp-breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
}
.lcp-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lcp-breadcrumbs a {
  color: var(--lcp-brand);
  text-decoration: none;
}
.lcp-breadcrumbs a:hover {
  text-decoration: underline;
}
.lcp-breadcrumbs li + li::before {
  content: '›';
  color: var(--lcp-text-light);
  font-size: 0.95rem;
  line-height: 1;
}
.lcp-breadcrumbs li[aria-current="page"] {
  color: var(--lcp-text-muted);
}


/* =============================================================
   5. BUTTONS
   ------------------------------------------------------------
   Schriftfarbe/Hintergrund immer explizit – GeneratePress sonst
   überschreibt mit Theme-Defaults.
   ============================================================= */
.lcp-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--lcp-r-md);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  transition: opacity var(--lcp-t-fast), transform var(--lcp-t-fast), box-shadow var(--lcp-t-fast);
  cursor: pointer;
  border: 0;
}
/* Primary (CTA-Orange, höchste Aufmerksamkeit) */
.lcp-btn--primary {
  background: var(--lcp-cta) !important;
  color: #fff !important;
}
.lcp-btn--primary:hover {
  opacity: 0.88;
  color: #fff !important;
}
/* Secondary (Outline auf farbigem Untergrund / dunklem Hero) */
.lcp-btn--secondary {
  background: transparent;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.75);
  padding: 11px 22px;
  font-weight: 500;
  font-size: 0.95rem;
}
.lcp-btn--secondary:hover {
  border-color: #fff;
  color: #fff !important;
}
/* Ghost (Outline in Brand-Farbe auf hellem Hintergrund) */
.lcp-btn--ghost {
  background: transparent;
  color: var(--lcp-brand) !important;
  border: 2px solid var(--lcp-brand);
  padding: 11px 22px;
  font-weight: 600;
  font-size: 0.95rem;
}
.lcp-btn--ghost:hover {
  background: var(--lcp-brand);
  color: #fff !important;
}
/* Inverse (weißer Button auf Brand-Hintergrund) */
.lcp-btn--inverse {
  background: #fff !important;
  color: var(--lcp-brand) !important;
}
.lcp-btn--inverse:hover {
  opacity: 0.88;
  color: var(--lcp-brand) !important;
}
/* Größen */
.lcp-btn--sm { padding: 10px 16px; font-size: 0.82rem; }
.lcp-btn--lg { padding: 16px 32px; font-size: 1rem; font-weight: 700; }
.lcp-btn--block { display: block; width: 100%; }
/* Lift-Effekt für Closing-CTAs */
.lcp-btn--lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--lcp-shadow-cta);
}


/* =============================================================
   6. LINKS (Inline-Brand-Links in Content)
   ============================================================= */
.lcp-link {
  color: var(--lcp-brand);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--lcp-brand-link-line);
}
.lcp-link:hover {
  border-bottom-color: var(--lcp-brand);
}


/* =============================================================
   7. BADGES (Hervorhebungen über Karten/Spalten)
   ============================================================= */
.lcp-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: var(--lcp-r-2xl);
  white-space: nowrap;
  color: #fff;
}
.lcp-badge--popular { background: var(--lcp-brand); }
.lcp-badge--cheap   { background: var(--lcp-cta); }

/* Karten-Tag (über Card-Kante schwebend) */
.lcp-card-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--lcp-brand);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: var(--lcp-r-2xl);
  white-space: nowrap;
}

/* Pass-spezifische Badges (für Attraktions-Karten) */
.lcp-pass-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--lcp-r-sm);
  white-space: nowrap;
  color: #fff;
}
.lcp-pass-badge--lp { background: var(--lcp-pass-lp); }
.lcp-pass-badge--ep { background: var(--lcp-pass-ep); }
.lcp-pass-badge--hp { background: var(--lcp-pass-hp); }
.lcp-pass-badge--tp { background: var(--lcp-pass-tp); }
.lcp-pass-badge--mm { background: var(--lcp-pass-mm); }

/* Hero-Badge (transparenter Pill auf farbigem Hero) */
.lcp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--lcp-r-pill);
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  align-self: flex-start;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lcp-hero-badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* =============================================================
   8. CARDS (Pass-Empfehlungen, Attraktions-Karten, etc.)
   ============================================================= */
.lcp-card {
  background: var(--lcp-bg-card);
  border: 1px solid var(--lcp-border);
  border-radius: var(--lcp-r-2xl);
  padding: 28px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--lcp-t-fast);
}
.lcp-card:hover {
  box-shadow: var(--lcp-shadow-card);
}
.lcp-card--highlight {
  border-color: var(--lcp-brand);
  box-shadow: var(--lcp-shadow-sm);
}

/* Card-Header: Logo + Tagline */
.lcp-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.lcp-card-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.lcp-card-for {
  font-size: 0.95rem;
  color: var(--lcp-brand);
  font-weight: 600;
  line-height: 1.35;
}
.lcp-card-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--lcp-text);
  margin: 0 0 6px;
}
.lcp-card-price {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--lcp-text);
  margin-bottom: 4px;
}
.lcp-card-price small {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--lcp-text-light);
}
.lcp-card-discount {
  font-size: 0.82rem;
  color: var(--lcp-brand);
  font-weight: 500;
  margin-bottom: 16px;
}

/* Feature-Liste mit Häkchen */
.lcp-card-features,
.lcp-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lcp-card-features li,
.lcp-checklist li {
  font-size: 0.9rem;
  color: var(--lcp-text-body);
  padding-left: 22px;
  position: relative;
  line-height: 1.4;
}
.lcp-card-features li::before,
.lcp-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--lcp-brand);
  font-weight: 700;
}

/* Card-CTA: nutzt .lcp-btn--primary mit margin-top:auto */
.lcp-card .lcp-btn {
  margin-top: auto;
}

/* Attraktions-Karte (Bild oben, Text unten) */
.lcp-attr-card {
  background: var(--lcp-bg-card);
  border: 1px solid var(--lcp-border);
  border-radius: var(--lcp-r-xl);
  overflow: hidden;
  transition: box-shadow var(--lcp-t-fast);
}
.lcp-attr-card:hover {
  box-shadow: var(--lcp-shadow-card-hover);
}
.lcp-attr-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.lcp-attr-body {
  padding: 14px 16px 16px;
}
.lcp-attr-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--lcp-text);
  margin: 0 0 4px;
}
.lcp-attr-price {
  font-size: 0.88rem;
  color: var(--lcp-text-light);
  margin-bottom: 10px;
}
.lcp-attr-passes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}


/* =============================================================
   9. GRID-HELFER (für Card-Reihen)
   ============================================================= */
.lcp-grid {
  display: grid;
  gap: 20px;
}
.lcp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.lcp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lcp-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .lcp-grid--3,
  .lcp-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .lcp-grid--2 { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .lcp-grid--3,
  .lcp-grid--4 {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin: 0 auto;
  }
}


/* =============================================================
   10. PROSE-WRAPPER (für lange Content-Seiten)
   ------------------------------------------------------------
   Authority-Seiten wie /lohnt-sich/, /3-tage-london/,
   /london-mit-kindern/ haben viel Fließtext. GeneratePress
   liefert ordentliche Defaults; .lcp-prose ergänzt nur die
   Site-spezifischen Abstände und Listen-Stile.
   ============================================================= */
.lcp-prose {
  max-width: var(--lcp-container-narrow);
  margin: 0 auto;
  padding: var(--lcp-space-section-y) var(--lcp-space-section-x) 40px;
  color: var(--lcp-text-body);
  font-size: 1rem;
  line-height: 1.7;
}
.lcp-prose h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--lcp-text);
  margin: 40px 0 14px;
  line-height: 1.3;
}
.lcp-prose h2:first-child {
  margin-top: 0;
}
.lcp-prose h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--lcp-text);
  margin: 32px 0 10px;
}
.lcp-prose p {
  margin: 0 0 18px;
}
.lcp-prose ul,
.lcp-prose ol {
  margin: 0 0 18px;
  padding-left: 22px;
}
.lcp-prose li {
  margin-bottom: 6px;
}
.lcp-prose a {
  color: var(--lcp-brand);
  text-decoration: none;
  border-bottom: 1px solid var(--lcp-brand-link-line);
}
.lcp-prose a:hover {
  border-bottom-color: var(--lcp-brand);
}


/* =============================================================
   11. CALLOUTS / HIGHLIGHT-BOXES
   ------------------------------------------------------------
   Für Spar-Tipps, Hinweise, Warnungen innerhalb von Content.
   Label und Body bewusst als getrennte Block-Elemente –
   wegen TranslatePress (siehe Skill-Regel).
   ============================================================= */
.lcp-callout {
  border: 1px solid var(--lcp-border);
  border-left: 4px solid var(--lcp-brand);
  background: var(--lcp-bg-soft);
  border-radius: var(--lcp-r-lg);
  padding: 18px 22px;
  margin: 24px 0;
}
.lcp-callout--tip     { border-left-color: var(--lcp-brand); background: var(--lcp-bg-soft); }
.lcp-callout--warn    { border-left-color: var(--lcp-cta);   background: #fff7ef; }
.lcp-callout--neutral { border-left-color: var(--lcp-border-strong); background: var(--lcp-bg-muted); }

.lcp-callout-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--lcp-brand);
  margin-bottom: 6px;
}
.lcp-callout--warn .lcp-callout-label { color: var(--lcp-cta); }
.lcp-callout--neutral .lcp-callout-label { color: var(--lcp-text-muted); }
.lcp-callout p:last-child { margin-bottom: 0; }


/* =============================================================
   12. TRUST BAR (Vertrauenselemente unter Hero)
   ============================================================= */
.lcp-trust-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding: 18px 16px;
  background: var(--lcp-bg-soft);
  border-bottom: 1px solid var(--lcp-border-tint);
}
.lcp-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #333;
}
.lcp-trust-item svg {
  width: 20px;
  height: 20px;
  color: var(--lcp-brand);
  flex-shrink: 0;
}
@media (max-width: 680px) {
  .lcp-trust-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
  }
}


/* =============================================================
   13. TABELLEN (für Mobile horizontal scrollbar)
   ============================================================= */
.lcp-tablecontainer {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--lcp-border-strong);
  border-radius: var(--lcp-r-xl);
}
.lcp-tablecontainer table {
  min-width: 720px;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.lcp-tablecontainer thead th {
  background: var(--lcp-bg-muted);
  padding: 16px 12px;
  text-align: center;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--lcp-text);
  border-bottom: 2px solid var(--lcp-border-strong);
  vertical-align: bottom;
}
.lcp-tablecontainer thead th:first-child {
  text-align: left;
}
.lcp-tablecontainer tbody td {
  padding: 11px 12px;
  text-align: center;
  border-bottom: 1px solid var(--lcp-border-soft);
  color: var(--lcp-text-body);
  vertical-align: middle;
  line-height: 1.4;
}
.lcp-tablecontainer tbody td:first-child {
  text-align: left;
  font-weight: 600;
  color: #333;
}
.lcp-tablecontainer tbody tr:nth-child(even) td {
  background: rgba(0,0,0,0.015);
}
.lcp-tablecontainer tbody tr:last-child td {
  border-bottom: none;
}

/* Highlight-Spalten (z.B. London Pass / Headout) */
.lcp-col-highlight    { background: var(--lcp-brand-tint-04) !important; }
thead .lcp-col-highlight,
.lcp-tablecontainer tbody tr:nth-child(even) .lcp-col-highlight {
  background: var(--lcp-brand-tint-06) !important;
}
.lcp-col-headout      { background: var(--lcp-cta-tint-03) !important; }
thead .lcp-col-headout,
.lcp-tablecontainer tbody tr:nth-child(even) .lcp-col-headout {
  background: var(--lcp-cta-tint-05) !important;
}

/* Zellen-Helfer */
.lcp-price-cell {
  font-weight: 700;
  color: var(--lcp-text) !important;
  font-size: 0.95rem;
}
.lcp-code-cell {
  font-weight: 700;
  color: var(--lcp-brand) !important;
  font-family: monospace;
  font-size: 0.82rem;
  letter-spacing: 0.3px;
}
.lcp-yes { color: var(--lcp-brand); }
.lcp-no  { color: #ccc; }

/* Scroll-Hinweis auf Mobile */
.lcp-scroll-hint {
  display: none;
  text-align: center;
  font-size: 0.82rem;
  color: var(--lcp-text-faint);
  margin-bottom: 8px;
}
@media (max-width: 960px) {
  .lcp-scroll-hint { display: block; }
}


/* =============================================================
   14. FAQ-AKKORDEON
   ============================================================= */
.lcp-faq {
  max-width: var(--lcp-container-narrow);
  margin: 0 auto;
  padding: var(--lcp-space-section-y) var(--lcp-space-section-x) 56px;
}
.lcp-faq-headline {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--lcp-text);
  margin: 0 0 32px;
}
.lcp-faq-item {
  border-bottom: 1px solid #e8e8e8;
}
.lcp-faq-item:first-of-type {
  border-top: 1px solid #e8e8e8;
}
.lcp-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 18px 14px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--lcp-text);
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
  gap: 16px;
  border-radius: var(--lcp-r-md);
  transition: background var(--lcp-t-fast), color var(--lcp-t-fast);
}
.lcp-faq-q:hover {
  background: var(--lcp-brand);
  color: #fff !important;
}
.lcp-faq-q:hover svg {
  color: #fff !important;
}
.lcp-faq-q:focus-visible {
  outline: 2px solid var(--lcp-brand);
  outline-offset: 2px;
}
.lcp-faq-q svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #999;
  transition: transform var(--lcp-t-med), color var(--lcp-t-med);
}
/* Wrapper-Span fuer den Fragetext: haelt den Satz als EIN Flex-Item
   zusammen, damit translate=no-Spans im Fragetext nicht jeweils zu
   eigenen Flex-Items mit gap-Luecke werden. */
.lcp-faq-q-text {
  flex: 1 1 auto;
  min-width: 0;
}
.lcp-faq-q[aria-expanded="true"] svg {
  transform: rotate(180deg);
  color: var(--lcp-brand);
}
.lcp-faq-a {
  display: none;
  padding: 0 4px 20px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--lcp-text-muted);
}
.lcp-faq-a p {
  margin: 0 0 12px;
}
.lcp-faq-a p:last-child {
  margin-bottom: 0;
}
.lcp-faq-a ul,
.lcp-faq-a ol {
  margin: 0 0 12px;
  padding-left: 22px;
}
.lcp-faq-a.open {
  display: block;
}
@media (max-width: 600px) {
  .lcp-faq { padding: 36px 16px 44px; }
  .lcp-faq-headline { font-size: 1.3rem; margin-bottom: 24px; }
  .lcp-faq-q { font-size: 0.93rem; padding: 16px 10px; }
  .lcp-faq-a { font-size: 0.88rem; }
}


/* =============================================================
   15. FILTER-CHIPS (Pill-Buttons – z.B. Attraktions-Filter)
   ============================================================= */
.lcp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.lcp-filter {
  padding: 6px 14px;
  border: 1px solid var(--lcp-border);
  border-radius: var(--lcp-r-pill);
  background: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--lcp-text-muted);
  cursor: pointer;
  transition: all var(--lcp-t-fast);
  white-space: nowrap;
}
.lcp-filter:hover {
  border-color: var(--lcp-brand);
  color: var(--lcp-brand);
}
.lcp-filter.active {
  background: var(--lcp-brand);
  border-color: var(--lcp-brand);
  color: #fff;
}
@media (max-width: 600px) {
  .lcp-filters { gap: 6px; }
  .lcp-filter { font-size: 0.72rem; padding: 5px 10px; }
}


/* =============================================================
   16. RABATTCODE-ANZEIGE (z.B. im Closing CTA)
   ============================================================= */
.lcp-code-display {
  font-family: monospace;
  background: rgba(255,255,255,0.15);
  padding: 2px 8px;
  border-radius: var(--lcp-r-sm);
  color: #fff;
  font-size: 0.88rem;
  letter-spacing: 0.5px;
  font-weight: 700;
}

/* Code-Feld mit Copy-Button (Promo-Banner-Variante) */
.lcp-code-copy {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.12);
  border: 1px dashed rgba(255,255,255,0.4);
  border-radius: var(--lcp-r-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--lcp-t-fast);
}
.lcp-code-copy:hover {
  border-color: rgba(255,255,255,0.7);
}
.lcp-code-copy-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.6);
  padding: 6px 10px;
  white-space: nowrap;
}
.lcp-code-copy-value {
  font-family: monospace;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1.5px;
  padding: 6px 12px 6px 0;
}
.lcp-code-copy-btn {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background var(--lcp-t-fast);
}
.lcp-code-copy-btn:hover {
  background: rgba(255,255,255,0.25);
}


/* =============================================================
   17. STICKY MOBILE BAR
   ============================================================= */
.lcp-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  box-shadow: var(--lcp-shadow-bar);
  padding: 10px 16px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lcp-sticky-bar.visible {
  display: flex;
}
@media (min-width: 900px) {
  .lcp-sticky-bar { display: none !important; }
}


/* =============================================================
   18. HERO (Brand-Hintergrund, 2-Spalten Text + Bild)
   ============================================================= */
.lcp-hero {
  background: var(--lcp-brand);
  overflow: hidden;
}
.lcp-hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 440px;
  max-width: var(--lcp-container);
  margin: 0 auto;
}
.lcp-hero-text {
  padding: 56px 48px 56px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}
.lcp-hero-image {
  background-size: cover;
  background-position: center;
  min-height: 380px;
}
.lcp-hero-title {
  font-size: var(--lcp-font-h1);
  font-weight: 700;
  line-height: 1.2;
  margin: 20px 0 16px;
  color: #fff;
}
.lcp-hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  margin: 0 0 32px;
  opacity: 0.92;
  line-height: 1.55;
  color: #fff;
}
.lcp-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 768px) {
  .lcp-hero-content { grid-template-columns: 1fr; }
  .lcp-hero-image   { min-height: 220px; order: -1; }
  .lcp-hero-text    { padding: 32px 20px; }
  .lcp-hero-ctas    { flex-direction: column; }
  .lcp-hero-ctas .lcp-btn { align-self: stretch; text-align: center; }
}


/* =============================================================
   19. PROMO-BANNER (zeitlich begrenzte Aktion mit Code)
   ============================================================= */
.lcp-promo {
  background: linear-gradient(135deg, var(--lcp-brand-dark) 0%, var(--lcp-brand) 50%, var(--lcp-brand-light) 100%);
  position: relative;
  overflow: hidden;
}
.lcp-promo::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
  pointer-events: none;
}
.lcp-promo-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 36px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative;
  z-index: 1;
}
.lcp-promo-badge {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--lcp-cta);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 20px var(--lcp-cta-shadow);
}
.lcp-promo-badge-pct {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}
.lcp-promo-badge-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}
.lcp-promo-text {
  flex: 1;
  color: #fff;
}
.lcp-promo-overline {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
}
.lcp-promo-headline {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
  color: #fff;
}
.lcp-promo-details {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
  margin: 0 0 4px;
}
.lcp-promo-expire {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  margin-top: 6px;
}
.lcp-promo-expire svg {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 4px;
}
.lcp-promo-action {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
@media (max-width: 768px) {
  .lcp-promo-inner   { flex-direction: column; text-align: center; padding: 32px 20px; gap: 20px; }
  .lcp-promo-badge   { width: 90px; height: 90px; }
  .lcp-promo-badge-pct { font-size: 1.8rem; }
  .lcp-promo-action  { width: 100%; }
  .lcp-promo-action .lcp-btn { width: 100%; max-width: 320px; text-align: center; }
}


/* =============================================================
   20. STICKY MOBILE BAR – Inhalte
   ------------------------------------------------------------
   Layout-Wrapper steht oben in Abschnitt 17.
   ============================================================= */
.lcp-sticky-bar-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lcp-sticky-bar-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--lcp-text) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lcp-sticky-bar-code {
  font-size: 0.72rem;
  color: var(--lcp-brand) !important;
  font-weight: 500;
}
.lcp-sticky-bar-code strong {
  font-family: monospace;
  letter-spacing: 0.3px;
}
.lcp-sticky-bar-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  background: var(--lcp-cta) !important;
  color: #fff !important;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: var(--lcp-r-lg);
  text-decoration: none !important;
  white-space: nowrap;
}


/* =============================================================
   21. MINI-QUIZ (Lead-Quiz mit 2–3 Fragen + Ergebnis)
   ------------------------------------------------------------
   Für mehrstufige Quizze auf Money-Pages. Vollständige
   Pass-Finder-Variante (5 Fragen) bekommt eine eigene Komponente.
   ============================================================= */
.lcp-quiz {
  max-width: var(--lcp-container-tools);
  margin: 0 auto;
  padding: var(--lcp-space-section-y) var(--lcp-space-section-x);
}
.lcp-quiz-step { margin-bottom: 28px; }
.lcp-quiz-step[data-step="2"],
.lcp-quiz-step[data-step="3"],
.lcp-quiz-step[data-step="4"],
.lcp-quiz-step[data-step="5"] {
  display: none;
}
.lcp-quiz-question {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--lcp-text);
  margin: 0 0 14px;
}
.lcp-quiz-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.lcp-quiz-opt {
  background: #fff;
  border: 2px solid var(--lcp-border);
  border-radius: var(--lcp-r-lg);
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--lcp-t-fast), background var(--lcp-t-fast);
  font-size: 0.95rem;
  font-weight: 500;
  color: #333;
}
.lcp-quiz-opt:hover {
  border-color: var(--lcp-brand);
  background: var(--lcp-bg-soft);
}
.lcp-quiz-opt.selected {
  border-color: var(--lcp-brand);
  background: var(--lcp-brand);
  color: #fff;
}
.lcp-quiz-result {
  display: none;
  background: var(--lcp-bg-soft);
  border: 2px solid var(--lcp-brand);
  border-radius: var(--lcp-r-2xl);
  padding: 28px 24px;
  margin-top: 12px;
}
.lcp-quiz-result-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--lcp-brand);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.lcp-quiz-result-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--lcp-text);
  margin-bottom: 6px;
}
.lcp-quiz-result-price {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--lcp-text-body);
  margin-bottom: 16px;
}
.lcp-quiz-result-reasons {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lcp-quiz-result-reasons li {
  font-size: 0.9rem;
  color: var(--lcp-text-body);
  padding-left: 22px;
  position: relative;
  line-height: 1.4;
}
.lcp-quiz-result-reasons li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--lcp-brand);
  font-weight: 700;
}
.lcp-quiz-alt {
  font-size: 0.88rem;
  color: var(--lcp-text-muted);
  margin-top: 8px;
}
.lcp-quiz-reset {
  display: none;
  text-align: center;
  margin-top: 16px;
}
.lcp-quiz-reset a {
  color: var(--lcp-text-faint);
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
}
.lcp-quiz-reset a:hover {
  color: var(--lcp-text-muted);
}
@media (max-width: 520px) {
  .lcp-quiz-options { grid-template-columns: 1fr; }
}


/* =============================================================
   22. TABELLEN-ZUSATZ: Vergleichstabelle (großer Footer-CTA)
   ============================================================= */
.lcp-tablecontainer tfoot td {
  padding: 16px 10px;
  text-align: center;
  border-top: 2px solid var(--lcp-border-strong);
  background: var(--lcp-bg-muted);
}
.lcp-table-cta {
  display: inline-block;
  background: var(--lcp-cta) !important;
  color: #fff !important;
  padding: 10px 16px;
  border-radius: var(--lcp-r-sm);
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none !important;
  transition: opacity var(--lcp-t-fast);
  white-space: nowrap;
}
.lcp-table-cta:hover { opacity: 0.88; color: #fff !important; }

/* Tabellen-Header-Helfer (Logo + Name + Badge im Header) */
.lcp-th-badge {
  display: inline-block;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--lcp-r-lg);
  margin-bottom: 6px;
  white-space: nowrap;
}
.lcp-th-badge--popular { background: var(--lcp-brand); }
.lcp-th-badge--cheap   { background: var(--lcp-cta); }
.lcp-th-logo {
  display: block;
  height: 28px;
  margin: 0 auto 4px;
  object-fit: contain;
}
.lcp-th-name {
  display: block;
  font-size: 0.85rem;
}

/* Inline-Attraktions-Link in Tabellen-Zellen */
.lcp-attr-link {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--lcp-brand) !important;
  text-decoration: none;
  margin-top: 3px;
}
.lcp-attr-link:hover { text-decoration: underline; }


/* =============================================================
   23. AUFKLAPPBARE TABELLE (Top-30 mit Kategorie-Filter)
   ============================================================= */
.lcp-attr-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: 2px solid var(--lcp-brand);
  border-radius: var(--lcp-r-lg);
  padding: 14px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lcp-brand);
  cursor: pointer;
  transition: background var(--lcp-t-fast), color var(--lcp-t-fast);
}
.lcp-attr-toggle:hover {
  background: var(--lcp-brand);
  color: #fff;
}
.lcp-attr-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform var(--lcp-t-med);
}
.lcp-attr-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Zwei Label-Spans: per aria-expanded umschalten (TranslatePress sieht beide) */
.lcp-attr-toggle .lcp-attr-toggle-hide { display: none; }
.lcp-attr-toggle[aria-expanded="true"] .lcp-attr-toggle-show { display: none; }
.lcp-attr-toggle[aria-expanded="true"] .lcp-attr-toggle-hide { display: inline; }

.lcp-attr-table-wrap {
  display: none;
  margin-top: 24px;
}
.lcp-attr-table-wrap.open { display: block; }

/* Kategorie-Zeile in Aufklapp-Tabelle */
.lcp-attr-cat td {
  background: var(--lcp-bg-muted);
  font-weight: 700 !important;
  color: var(--lcp-brand) !important;
  font-size: 0.82rem;
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--lcp-border) !important;
}
.lcp-attr-y { color: var(--lcp-brand); font-weight: 700; }
.lcp-attr-n { color: #ddd; }

/* Anbieter-Links unter Aufklapp-Tabelle */
.lcp-attr-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e8e8e8;
}
.lcp-attr-links a {
  color: var(--lcp-brand);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--lcp-brand-link-line);
}
.lcp-attr-links a:hover { border-bottom-color: var(--lcp-brand); }


/* =============================================================
   24. CLOSING CTA-BAND (großer Schlussabschnitt mit Brand-BG)
   ============================================================= */
.lcp-closing {
  background: var(--lcp-brand);
  padding: 56px 20px;
  text-align: center;
}
.lcp-closing-inner {
  max-width: 700px;
  margin: 0 auto;
}
.lcp-closing-headline {
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff !important;
  margin: 0 0 12px;
  line-height: 1.3;
}
.lcp-closing-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.88) !important;
  margin: 0 0 32px;
  line-height: 1.5;
}
.lcp-closing-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.lcp-closing-codes {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.lcp-closing-code {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75) !important;
}
.lcp-closing-code strong {
  font-family: monospace;
  background: rgba(255,255,255,0.15);
  padding: 2px 8px;
  border-radius: var(--lcp-r-sm);
  color: #fff !important;
  font-size: 0.88rem;
  letter-spacing: 0.5px;
}
.lcp-closing-quiz {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.7) !important;
}
.lcp-closing-quiz a {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lcp-closing-quiz a:hover { color: rgba(255,255,255,0.9) !important; }

@media (max-width: 600px) {
  .lcp-closing { padding: 40px 16px; }
  .lcp-closing-headline { font-size: 1.35rem; }
  .lcp-closing-sub { font-size: 0.92rem; margin-bottom: 24px; }
  .lcp-closing-buttons { flex-direction: column; align-items: center; }
  .lcp-closing-buttons .lcp-btn { width: 100%; max-width: 320px; }
  .lcp-closing-codes { flex-direction: column; gap: 8px; }
}


/* =============================================================
   25. „Mehr"-Link unter einer Section (z.B. „Alle 6 Pässe → ↓")
   ============================================================= */
.lcp-more-link {
  text-align: center;
  margin-top: 28px;
}
.lcp-more-link a {
  color: var(--lcp-brand);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid var(--lcp-brand-link-line);
}
.lcp-more-link a:hover { border-bottom-color: var(--lcp-brand); }


/* =============================================================
   26. PREIS-BOX (Pass-Detailseiten – interaktiver Tagesvarianten-Selector)
   ============================================================= */
.lcp-price-box {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--lcp-border);
  border-radius: var(--lcp-r-2xl);
  padding: 32px;
  box-shadow: var(--lcp-shadow-sm);
}
.lcp-price-box-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 4px;
}
.lcp-price-box-amount {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--lcp-text);
  line-height: 1;
  letter-spacing: -1px;
}
.lcp-price-box-meta {
  font-size: 0.95rem;
  color: var(--lcp-text-muted);
  font-weight: 500;
}
.lcp-price-box-discount {
  font-size: 0.88rem;
  color: var(--lcp-brand);
  font-weight: 600;
  margin-bottom: 20px;
}
.lcp-price-box-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
  padding: 4px;
  background: var(--lcp-bg-muted);
  border-radius: var(--lcp-r-lg);
}
.lcp-price-box-tab {
  flex: 1 1 auto;
  min-width: 44px;
  padding: 10px 8px;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: var(--lcp-r-md);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--lcp-text-body);
  cursor: pointer;
  transition: background var(--lcp-t-fast), color var(--lcp-t-fast);
}
.lcp-price-box-tab:hover {
  color: var(--lcp-brand);
}
.lcp-price-box-tab.active {
  background: var(--lcp-brand);
  color: #fff;
}
.lcp-price-box-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
.lcp-price-box-features li {
  font-size: 0.92rem;
  color: var(--lcp-text-body);
  padding-left: 22px;
  position: relative;
  line-height: 1.4;
}
.lcp-price-box-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--lcp-brand);
  font-weight: 700;
}
.lcp-price-box-cta {
  display: block;
  text-align: center;
}
.lcp-price-box-foot {
  text-align: center;
  font-size: 0.82rem;
  color: var(--lcp-text-light);
  margin: 12px 0 0;
}
@media (max-width: 600px) {
  .lcp-price-box { padding: 24px 20px; }
  .lcp-price-box-amount { font-size: 2rem; }
  .lcp-price-box-features { grid-template-columns: 1fr; }
}


/* =============================================================
   27. PRO & CONTRA (Zwei-Spalten-Liste)
   ============================================================= */
.lcp-procon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.lcp-procon-col {
  background: #fff;
  border: 1px solid var(--lcp-border);
  border-radius: var(--lcp-r-2xl);
  padding: 24px 28px;
}
.lcp-procon-col--pro { border-top: 4px solid var(--lcp-brand); }
.lcp-procon-col--con { border-top: 4px solid #d97706; }
.lcp-procon-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--lcp-text);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lcp-procon-title svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.lcp-procon-col--pro .lcp-procon-title svg { color: var(--lcp-brand); }
.lcp-procon-col--con .lcp-procon-title svg { color: #d97706; }
.lcp-procon-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lcp-procon-list li {
  font-size: 0.92rem;
  color: var(--lcp-text-body);
  line-height: 1.5;
  padding-left: 24px;
  position: relative;
}
.lcp-procon-col--pro .lcp-procon-list li::before {
  content: '+';
  position: absolute;
  left: 4px;
  top: -1px;
  color: var(--lcp-brand);
  font-weight: 700;
  font-size: 1.2rem;
}
.lcp-procon-col--con .lcp-procon-list li::before {
  content: '−';
  position: absolute;
  left: 4px;
  top: -1px;
  color: #d97706;
  font-weight: 700;
  font-size: 1.2rem;
}
@media (max-width: 700px) {
  .lcp-procon { grid-template-columns: 1fr; }
}


/* =============================================================
   28. PERSONA-CARDS (Für-wen-Szenarien)
   ============================================================= */
.lcp-persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* 4-Card-Layout: 2x2 auf Tablet, 4x1 auf großen Bildschirmen */
.lcp-persona-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1100px) {
  .lcp-persona-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.lcp-persona {
  background: #fff;
  border: 1px solid var(--lcp-border);
  border-radius: var(--lcp-r-2xl);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
}
.lcp-persona-icon {
  width: 44px;
  height: 44px;
  background: var(--lcp-bg-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.lcp-persona-icon svg {
  width: 22px;
  height: 22px;
  color: var(--lcp-brand);
}
.lcp-persona-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lcp-text);
  margin: 0 0 6px;
}
.lcp-persona-rec {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--lcp-brand);
  margin-bottom: 10px;
}
.lcp-persona-text {
  font-size: 0.9rem;
  color: var(--lcp-text-body);
  line-height: 1.55;
  margin: 0 0 14px;
}
.lcp-persona-text:last-child { margin-bottom: 0; }

/* Rechnungs-Block innerhalb einer Persona-Card (Szenarien mit
   Einzelpreis vs. Pass vs. Ersparnis). Optisch klar abgesetzt,
   Ersparnis-Zeile farblich betont. */
.lcp-persona-result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 14px 0;
  padding: 12px 14px;
  background: var(--lcp-bg-soft);
  border-radius: var(--lcp-r-md);
  font-size: 0.9rem;
}
.lcp-persona-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  color: var(--lcp-text-body);
}
.lcp-persona-result-row > span:last-child {
  font-weight: 600;
  color: var(--lcp-text);
  white-space: nowrap;
}
.lcp-persona-result-row--save {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--lcp-border-tint);
}
.lcp-persona-result-row--save > span:first-child {
  color: var(--lcp-brand);
  font-weight: 600;
}
.lcp-persona-result-row--save > span:last-child {
  color: var(--lcp-brand);
  font-size: 1.05rem;
}

@media (max-width: 900px) {
  .lcp-persona-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}


/* =============================================================
   29. SCHRITTE-BLOCK (Wie funktioniert's?)
   ============================================================= */
.lcp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  counter-reset: lcp-step;
}
.lcp-step {
  position: relative;
  padding: 24px 22px 24px 70px;
  background: var(--lcp-bg-soft);
  border-radius: var(--lcp-r-2xl);
  counter-increment: lcp-step;
}
.lcp-step::before {
  content: counter(lcp-step);
  position: absolute;
  top: 24px;
  left: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lcp-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
}
.lcp-step-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lcp-text);
  margin: 0 0 6px;
}
.lcp-step-text {
  font-size: 0.9rem;
  color: var(--lcp-text-body);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 900px) {
  .lcp-steps { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}


/* =============================================================
   30. CALCULATOR (Lohnt-Sich + Sparrechner)
   ------------------------------------------------------------
   Wiederverwendbarer Mini-/Voll-Rechner für Pass-Empfehlungen.
   Eingesetzt auf:
   - /de/lohnt-london-pass/  (Mini-Rechner, 13 Top-Attraktionen)
   - /de/sparrechner/        (volle Liste aller Attraktionen, später)
   JS-Logik kommt aus dem Code-Snippets-Plugin (snippets/lcp-calculator.js).
   ============================================================= */

/* i18n-Template-Div: visuell versteckt, aber für TranslatePress
   sichtbar (das HTML-`hidden`-Attribut nimmt Elemente aus dem
   Übersetzungsindex; `display:none` via Klasse nicht). */
.lcp-i18n {
  display: none;
}

/* Lokale Status-Tokens für den Calculator (Saving = Grün, Loss = Rot,
   Bonus = Gelb). Bewusst lokal definiert, um keine globalen
   Status-Tokens einzuführen, bevor das Design-System sie braucht. */
.lcp-calc,
.lcp-tldr-list {
  --lcp-calc-save-bg:     #ecfdf5;
  --lcp-calc-save-border: #a7f3d0;
  --lcp-calc-save-text:   #065f46;
  --lcp-calc-loss-bg:     #fef2f2;
  --lcp-calc-loss-border: #fecaca;
  --lcp-calc-loss-text:   #991b1b;
  --lcp-calc-bonus-bg:    #fef3c7;
  --lcp-calc-bonus-text:  #92400e;
  --lcp-calc-soft-bg:     #f8fafc;
  --lcp-calc-soft-border: #cbd5e1;
  --lcp-calc-input-text:  #0f172a;
  --lcp-calc-meta-text:   #475569;
  --lcp-calc-border:      #e5e7eb;
}

/* TL;DR-Liste (3-Status-Box mit farbiger Akzent-Leiste links) */
.lcp-tldr-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lcp-tldr-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: var(--lcp-r-lg);
  border-left: 4px solid var(--lcp-calc-soft-border);
  background: var(--lcp-calc-soft-bg);
}
.lcp-tldr-item--yes   { border-left-color: var(--lcp-brand); }
.lcp-tldr-item--maybe { border-left-color: var(--lcp-cta); }
.lcp-tldr-item--no    { border-left-color: #94a3b8; }
.lcp-tldr-label {
  font-weight: 600;
  color: var(--lcp-calc-input-text);
  font-size: var(--lcp-font-body);
}
.lcp-tldr-text {
  color: var(--lcp-calc-meta-text);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Calculator-Layout: zweispaltig (Inputs links, Ergebnis rechts) */
.lcp-calc {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .lcp-calc { grid-template-columns: 1fr; }
}

.lcp-calc-inputs {
  background: var(--lcp-bg-card);
  border: 1px solid var(--lcp-calc-border);
  border-radius: var(--lcp-r-2xl);
  padding: 24px;
}
.lcp-calc-section + .lcp-calc-section { margin-top: 28px; }
.lcp-calc-h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--lcp-calc-input-text);
}

/* Attraktions-Checkboxen */
.lcp-calc-attractions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lcp-calc-attr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--lcp-calc-border);
  border-radius: var(--lcp-r-lg);
  cursor: pointer;
  transition: all var(--lcp-t-fast);
}
.lcp-calc-attr:hover {
  border-color: var(--lcp-brand);
  background: var(--lcp-calc-soft-bg);
}
.lcp-calc-attr input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--lcp-brand);
  flex-shrink: 0;
}
.lcp-calc-attr-name {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.4;
}
.lcp-calc-attr-price {
  font-weight: 600;
  color: var(--lcp-calc-input-text);
  flex-shrink: 0;
}
.lcp-calc-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--lcp-r-pill);
  background: var(--lcp-calc-bonus-bg);
  color: var(--lcp-calc-bonus-text);
  margin-left: 6px;
  vertical-align: middle;
}

/* Ergebnis-Box (rechte Spalte, sticky auf Desktop) */
.lcp-calc-result {
  background: var(--lcp-bg-card);
  border: 1px solid var(--lcp-calc-border);
  border-radius: var(--lcp-r-2xl);
  padding: 24px;
  align-self: start;
  position: sticky;
  top: 24px;
}
@media (max-width: 860px) {
  .lcp-calc-result { position: static; }
}
.lcp-calc-result-empty {
  text-align: center;
  padding: 48px 16px;
}

/* Singles-Anzeige (Einzeltickets-Summe) als Referenz oben */
.lcp-calc-singles {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--lcp-calc-soft-bg);
  border-radius: var(--lcp-r-md);
  font-size: 0.95rem;
}
.lcp-calc-singles-label { color: var(--lcp-calc-meta-text); }
.lcp-calc-singles-value {
  font-weight: 600;
  color: var(--lcp-calc-input-text);
}

/* 2-Karten-Vergleich (London Pass® vs. Explorer Pass) */
.lcp-calc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) {
  .lcp-calc-compare { grid-template-columns: 1fr; }
}

.lcp-calc-card {
  position: relative;
  padding: 16px 14px 14px;
  border: 1px solid var(--lcp-calc-border);
  border-radius: var(--lcp-r-lg);
  background: var(--lcp-bg-card);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all var(--lcp-t-fast);
}
.lcp-calc-card--winner {
  border-color: var(--lcp-brand);
  background: var(--lcp-calc-save-bg);
  box-shadow: 0 0 0 1px var(--lcp-brand);
}
.lcp-calc-card--disabled {
  opacity: 0.55;
  background: var(--lcp-calc-soft-bg);
}

.lcp-calc-card-badge {
  position: absolute;
  top: -10px;
  left: 12px;
  background: var(--lcp-brand);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--lcp-r-pill);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.lcp-calc-card-name {
  font-weight: 700;
  color: var(--lcp-calc-input-text);
  font-size: 0.95rem;
  line-height: 1.3;
}
.lcp-calc-card-meta {
  font-size: 0.78rem;
  color: var(--lcp-calc-meta-text);
  line-height: 1.3;
}
/* Meta-Zeile bei kombiniertem Preis (z.B. Explorer Pass + Windsor-Einzelticket):
   farbig hervorgehoben, mit Info-Icon davor und Hover-Cursor für Tooltip */
.lcp-calc-card-meta--combined {
  color: var(--lcp-calc-bonus-text);
  font-weight: 500;
  background: var(--lcp-calc-bonus-bg);
  padding: 4px 8px;
  border-radius: var(--lcp-r-sm);
  cursor: help;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
}
.lcp-calc-card-meta--combined::before {
  content: 'ⓘ';
  font-size: 0.9rem;
  line-height: 1;
  flex-shrink: 0;
}
.lcp-calc-card-price {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--lcp-calc-input-text);
  margin: 4px 0 2px;
}
.lcp-calc-card-saving {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--lcp-calc-save-text);
}
.lcp-calc-card-saving--loss { color: var(--lcp-calc-loss-text); }
.lcp-calc-card-saving--na {
  color: var(--lcp-calc-meta-text);
  font-weight: 500;
  font-style: italic;
}

/* Tage aus der Auswahl (seit 15.10.2026 statt Tage-Buttons) */
.lcp-calc-tage {
  font-size: 0.9rem;
  color: var(--lcp-calc-meta-text);
  line-height: 1.5;
  margin: 0 0 16px;
}

.lcp-calc-reason {
  font-size: 0.9rem;
  color: var(--lcp-calc-meta-text);
  line-height: 1.5;
  margin: 16px 0;
  padding: 12px 14px;
  background: var(--lcp-calc-soft-bg);
  border-left: 3px solid var(--lcp-brand);
  border-radius: var(--lcp-r-sm);
}
.lcp-calc-bonus {
  font-size: 0.85rem;
  color: var(--lcp-calc-bonus-text);
  line-height: 1.5;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--lcp-calc-bonus-bg);
  border-radius: var(--lcp-r-md);
}

/* Itinerary-Definitionsliste (Block C — Tag-Labels in Szenarien,
   TranslatePress-konform statt Inline-Fett-Tags).
   Default: einspaltig (dt als fetter Header, dd direkt darunter) —
   funktioniert in jeder Spaltenbreite, auch in engen Card-Layouts.
   Optionaler Zweispalter via .lcp-itinerary--cols, nur wenn dt
   garantiert kurz ist (z.B. „Tag 1", „Tag 2"). */
.lcp-itinerary {
  margin: 0 0 14px;
  font-size: 0.9rem;
}
.lcp-itinerary dt {
  font-weight: 600;
  color: var(--lcp-text);
  margin-top: 8px;
  line-height: 1.4;
}
.lcp-itinerary dt:first-child { margin-top: 0; }
.lcp-itinerary dd {
  margin: 2px 0 0;
  color: var(--lcp-text-body);
  line-height: 1.55;
}

/* Variante: zwei Spalten (nur sinnvoll bei kurzen dt-Labels) */
.lcp-itinerary--cols {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
}
.lcp-itinerary--cols dt {
  white-space: nowrap;
  margin-top: 0;
}
.lcp-itinerary--cols dd { margin: 0; }
@media (max-width: 540px) {
  .lcp-itinerary--cols { display: block; }
  .lcp-itinerary--cols dt { margin-top: 8px; }
  .lcp-itinerary--cols dt:first-child { margin-top: 0; }
  .lcp-itinerary--cols dd { margin: 2px 0 0; }
}


/* =============================================================
   31. STICKY WIDGETS — Desktop Rabattcode-Box + Mobile Sparbar
   ------------------------------------------------------------
   Site-weit eingeblendet (via PHP-Snippet lcp-sticky-widget.php).
   Desktop-Widget: rechts unten, erscheint nach Scroll über Hero.
   Mobile-Bar: sticky am unteren Bildschirmrand.
   Beide sessionsbasiert dismissbar.
   ============================================================= */

/* === Desktop-Widget === */
#lcp-sticky-widget {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 290px;
  background: var(--lcp-bg-card);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
  overflow: hidden;
  z-index: 9999;
  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
#lcp-sticky-widget.lcp-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#lcp-sticky-widget.lcp-hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}
/* Auf Mobile/Tablet versteckt — dort übernimmt die Mobile-Bar */
@media (max-width: 1023px) {
  #lcp-sticky-widget { display: none !important; }
}
.lcp-widget-header {
  background: var(--lcp-brand);
  padding: 13px 16px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lcp-widget-header-text {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lcp-tag-icon {
  width: 18px;
  height: 18px;
  fill: #fff;
  opacity: 0.9;
  flex-shrink: 0;
}
.lcp-widget-title {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}
.lcp-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: rgba(255,255,255,0.75);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  width: 22px;
  height: 22px;
}
.lcp-close-btn:hover { color: #fff; }
.lcp-widget-body { padding: 14px 16px 16px; }
.lcp-widget-desc {
  font-size: 13px;
  color: var(--lcp-text-body);
  line-height: 1.45;
  margin: 0 0 12px;
}
.lcp-widget-desc strong { color: var(--lcp-brand); }

/* Klickbare Code-Box (Clipboard-Copy) */
.lcp-code-box {
  display: flex;
  align-items: center;
  border: 2px dashed var(--lcp-cta);
  border-radius: var(--lcp-r-lg);
  background: #fff8f3;
  padding: 10px 12px;
  margin-bottom: 13px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  gap: 10px;
}
.lcp-code-box:hover {
  background: #fff0e4;
  border-color: #d96d1a;
}
.lcp-code-text {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--lcp-cta);
  flex: 1;
  user-select: all;
  line-height: 1;
}
.lcp-copy-hint {
  font-size: 11px;
  color: var(--lcp-text-light);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
  flex-shrink: 0;
}
.lcp-copy-hint svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}
.lcp-code-box:hover .lcp-copy-hint { color: #d96d1a; }
/* Feedback-State nach Kopieren */
.lcp-code-box.lcp-copied {
  background: #edfaf6;
  border-color: var(--lcp-brand);
}
.lcp-code-box.lcp-copied .lcp-code-text { color: var(--lcp-brand); }
.lcp-code-box.lcp-copied .lcp-copy-hint { color: var(--lcp-brand); }

/* CTA-Button im Widget */
.lcp-cta-btn {
  display: block;
  width: 100%;
  background: var(--lcp-cta);
  color: #fff;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: var(--lcp-r-lg);
  letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.15s;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
  line-height: 1.3;
}
.lcp-cta-btn:hover {
  background: #d96d1a;
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}
.lcp-cta-btn:active { transform: translateY(0); }

/* === Mobile-Sticky-Bar (≤1023px) === */
#lcp-mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  display: none;
  background: var(--lcp-bg-card);
  border-top: 1px solid var(--lcp-border);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  transform: translateY(100%);
  transition: transform 0.35s ease;
}
@media (max-width: 1023px) {
  #lcp-mobile-bar { display: flex; align-items: center; gap: 8px; }
}
#lcp-mobile-bar.lcp-visible { transform: translateY(0); }
#lcp-mobile-bar.lcp-hidden { transform: translateY(100%); }

.lcp-mobile-code {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 10px;
  border: 1.5px dashed var(--lcp-cta);
  border-radius: var(--lcp-r-md);
  background: #fff8f3;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  line-height: 1.15;
}
.lcp-mobile-code:active { background: #fff0e4; }
.lcp-mobile-code.lcp-copied {
  background: #edfaf6;
  border-color: var(--lcp-brand);
}
.lcp-mobile-code-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--lcp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lcp-mobile-code.lcp-copied .lcp-mobile-code-label { color: var(--lcp-brand); }
.lcp-mobile-code-text {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--lcp-cta);
}
.lcp-mobile-code.lcp-copied .lcp-mobile-code-text { color: var(--lcp-brand); }

.lcp-mobile-cta {
  flex: 0 0 auto;
  background: var(--lcp-cta);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 14px;
  border-radius: var(--lcp-r-md);
  white-space: nowrap;
  transition: background 0.2s;
}
.lcp-mobile-cta:hover,
.lcp-mobile-cta:focus { background: #d96d1a; color: #fff; }
.lcp-mobile-cta:active { background: #c25f15; }

.lcp-mobile-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--lcp-text-light);
  font-size: 20px;
  line-height: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  transition: background 0.2s;
}
.lcp-mobile-close:hover { background: var(--lcp-bg-muted); }


/* =============================================================
   32. VS-COMPARISON (Direktvergleichs-Komponenten)
   ------------------------------------------------------------
   Verwendet auf: /de/london-pass-vs-explorer-pass/
   Hero mit Side-by-Side-Pass-Bildern, Vergleichstabelle mit
   farblich differenzierten Spalten, kompakte Preistabellen
   in Cards.
   ============================================================= */

/* === Hero im Vergleichs-Layout: Brand-Hintergrund mit zentriertem Text + Side-by-Side-Mockups === */
.lcp-hero--vs {
  text-align: center;
  padding: 36px 24px 40px;
}
.lcp-hero-content--vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 880px;
  margin: 0 auto;
  /* Reset des klassischen 2-Spalten-Hero-Grids */
  grid-template-columns: none;
  min-height: 0;
}
.lcp-hero-text--center {
  text-align: center;
  max-width: 720px;
  padding: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lcp-hero-text--center .lcp-hero-title {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  margin: 10px 0 12px;
}
.lcp-hero-text--center .lcp-hero-sub {
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  margin: 0 0 20px;
}
.lcp-hero-text--center .lcp-hero-ctas {
  justify-content: center;
  width: auto;
}
.lcp-hero-text--center .lcp-hero-badge {
  margin: 0 auto 8px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
}
.lcp-hero-text--center .lcp-hero-badge svg { color: #fff; }

/* Side-by-Side-Bilder als Phone-Mockup-Reihe */
.lcp-hero-vs-images {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 16px;
  width: 100%;
  max-width: 600px;
}
.lcp-hero-vs-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.lcp-hero-vs-card img {
  width: 100%;
  height: auto;
  max-width: 220px;
  border-radius: var(--lcp-r-2xl);
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  display: block;
  background: var(--lcp-bg-card);
}
.lcp-hero-vs-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  text-align: center;
}
.lcp-hero-vs-divider {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--lcp-brand);
  background: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .lcp-hero--vs { padding: 28px 16px 32px; }
  .lcp-hero-vs-images {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    max-width: 240px;
    gap: 8px;
  }
  .lcp-hero-vs-divider {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
    margin: -8px auto;
    z-index: 1;
  }
  .lcp-hero-vs-card img { max-width: 180px; }
}

/* === Side-by-Side-Vergleichstabelle === */
.lcp-vs-table th {
  text-align: center;
}
.lcp-vs-table th.lcp-vs-col-lp,
.lcp-vs-table td:nth-child(2) {
  background: var(--lcp-brand-tint-08);
  border-left: 3px solid var(--lcp-brand);
}
.lcp-vs-table th.lcp-vs-col-ep,
.lcp-vs-table td:nth-child(3) {
  background: var(--lcp-cta-tint-06);
  border-left: 3px solid var(--lcp-cta);
}
.lcp-vs-table th.lcp-vs-col-lp {
  color: var(--lcp-brand);
  font-weight: 700;
}
.lcp-vs-table th.lcp-vs-col-ep {
  color: var(--lcp-cta);
  font-weight: 700;
}

/* Mini-Preistabelle in Vergleichs-Cards */
.lcp-mini-price-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 0;
}
.lcp-mini-price-table td {
  padding: 10px 14px;
  font-size: 0.92rem;
  color: var(--lcp-text-body);
  border-bottom: 1px solid var(--lcp-border-soft);
}
.lcp-mini-price-table td:first-child { padding-left: 4px; }
.lcp-mini-price-table td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--lcp-text);
  padding-right: 4px;
}
.lcp-mini-price-table tr:last-child td {
  border-bottom: none;
}


/* =============================================================
   33. ATTRAKTIONEN-FILTER (Suchfeld, Filter-Gruppen, Treffer-Zeile)
   Ergaenzt Abschnitt 15 (Filter-Chips) und 23 (Aufklapp-Tabelle)
   fuer die Seite /de/attraktionen/ mit 124 Eintraegen.
   ============================================================= */

/* Filter-Gruppe: kleines Label ueber einer Chip-Reihe */
.lcp-filter-group {
  margin-bottom: 14px;
}
.lcp-filter-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lcp-text-muted);
  margin-bottom: 7px;
}

/* Such-Eingabefeld ueber der Tabelle */
.lcp-attr-search {
  position: relative;
  margin-bottom: 18px;
}
.lcp-attr-search input.lcp-attr-search-input {
  width: 100%;
  box-sizing: border-box;
  /* Linkes Padding mit !important, damit Theme-Input-Styles (GeneratePress)
     die Lupe nicht ueberlagern. */
  padding: 12px 16px 12px 44px !important;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--lcp-text);
  border: 1px solid var(--lcp-border);
  border-radius: var(--lcp-r-md);
  background: #fff;
  transition: border-color var(--lcp-t-fast), box-shadow var(--lcp-t-fast);
}
.lcp-attr-search input.lcp-attr-search-input:focus {
  outline: none;
  border-color: var(--lcp-brand);
  box-shadow: 0 0 0 3px var(--lcp-brand-link-line);
}
.lcp-attr-search input.lcp-attr-search-input::placeholder { color: var(--lcp-text-muted); }
.lcp-attr-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--lcp-text-muted);
  pointer-events: none;
  z-index: 2;
}

/* Treffer-Zaehler unter den Filtern */
.lcp-attr-count {
  font-size: 0.82rem;
  color: var(--lcp-text-muted);
  margin: 0 0 12px;
}

/* Leerzustand: keine Treffer */
.lcp-attr-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--lcp-text-muted);
  font-size: 0.95rem;
}

/* Top-Attraktion-Badge in der Namensspalte */
.lcp-top-badge {
  display: inline-block;
  vertical-align: middle;
  background: var(--lcp-cta);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: var(--lcp-r-pill);
  margin-right: 6px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}


/* =============================================================
   34. UTILITIES
   ============================================================= */
.lcp-hidden     { display: none !important; }
.lcp-flex       { display: flex; }
.lcp-flex-center{ display: flex; align-items: center; justify-content: center; }
.lcp-mt-sm  { margin-top: 8px; }
.lcp-mt-md  { margin-top: 16px; }
.lcp-mt-lg  { margin-top: 24px; }
.lcp-mb-sm  { margin-bottom: 8px; }
.lcp-mb-md  { margin-bottom: 16px; }
.lcp-mb-lg  { margin-bottom: 24px; }

/* Dynamische Werte vor TranslatePress schützen:
   im HTML translate="no" setzen; diese Klasse ist optional
   für visuelles Debugging / Konsistenz */
.lcp-value { white-space: nowrap; }


/* =============================================================
   35. ATTRAKTIONS-KARTE — Beschreibung + Altersempfehlung
   ------------------------------------------------------------
   Erweitert die Attraktions-Karte (Abschnitt 8) um eine kurze
   Begründung und eine Altersempfehlung. Eingesetzt auf
   /de/london-mit-kindern/ (Block B). Beide Elemente sind eigene
   Block-Elemente wegen TranslatePress.
   ============================================================= */
.lcp-attr-desc {
  font-size: 0.86rem;
  color: var(--lcp-text-body);
  line-height: 1.5;
  margin: 0 0 10px;
}
.lcp-attr-age {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--lcp-brand);
  margin: 0 0 12px;
}


/* =============================================================
   36. TRANSPORT-ENTSCHEIDUNGS-WIDGET (/de/london-pass-transport/)
   Back-Link in Schritt 2 + Neu-Starten-Link im Ergebnis.
   Das generische .lcp-quiz-reset ist global display:none; hier
   werden die kontextbezogenen Links sichtbar gemacht.
   ============================================================= */
.lcp-quiz-back {
  text-align: center;
  margin-top: 16px;
}
.lcp-quiz-back a,
.lcp-quiz-result .lcp-quiz-reset a {
  color: var(--lcp-text-faint);
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
}
.lcp-quiz-back a:hover,
.lcp-quiz-result .lcp-quiz-reset a:hover {
  color: var(--lcp-text-muted);
}
/* Neu-Starten-Link sichtbar machen, sobald das Ergebnis angezeigt wird
   (das Ergebnis selbst wird per JS via style.display eingeblendet). */
.lcp-quiz-result .lcp-quiz-reset {
  display: block;
  margin-top: 16px;
}


/* =============================================================
   37. TRANSPORT-OPTIONS-KARTEN + WIDGET-POLITUR
   Gekapselt für /de/london-pass-oyster-card/. Behebt ungleiche
   Karten-Höhen, Leerraum und nüchterne Widget-Optik.
   ============================================================= */

/* --- Mode-Karte (vier Transport-Optionen) --- */
.lcp-mode-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.lcp-mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--lcp-bg-card);
  border: 1px solid var(--lcp-border);
  border-radius: var(--lcp-r-2xl);
  padding: 26px 22px 24px;
  transition: box-shadow var(--lcp-t-fast), transform var(--lcp-t-fast), border-color var(--lcp-t-fast);
}
.lcp-mode-card:hover {
  box-shadow: var(--lcp-shadow-card);
  transform: translateY(-3px);
}
.lcp-mode-card--featured {
  border-color: var(--lcp-brand);
  box-shadow: var(--lcp-shadow-sm);
  background:
    linear-gradient(180deg, var(--lcp-brand-tint-06), transparent 120px),
    var(--lcp-bg-card);
}

/* Schwebendes Badge oben */
.lcp-mode-badge {
  position: absolute;
  top: -12px;
  left: 22px;
  background: var(--lcp-brand);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--lcp-r-pill);
  box-shadow: 0 4px 10px var(--lcp-shadow-sm);
}

/* Icon-Kreis */
.lcp-mode-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lcp-brand-tint-08);
  color: var(--lcp-brand);
  margin-bottom: 16px;
}
.lcp-mode-card--featured .lcp-mode-icon {
  background: var(--lcp-brand);
  color: #fff;
}
.lcp-mode-icon svg { width: 26px; height: 26px; }

.lcp-mode-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--lcp-text-light);
  margin: 0 0 2px;
}
.lcp-mode-name {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--lcp-text);
  margin: 0 0 10px;
  line-height: 1.25;
}
.lcp-mode-price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lcp-brand);
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--lcp-border-soft);
}
.lcp-mode-price small {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--lcp-text-light);
  margin-top: 2px;
}
.lcp-mode-features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex-grow: 1;          /* drückt CTA bündig nach unten, gleiche Höhe */
}
.lcp-mode-features li {
  font-size: 0.88rem;
  color: var(--lcp-text-body);
  padding-left: 24px;
  position: relative;
  line-height: 1.4;
}
.lcp-mode-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 3px;
  width: 16px; height: 16px;
  background: var(--lcp-brand-tint-12);
  border-radius: 50%;
}
.lcp-mode-features li::after {
  content: '';
  position: absolute;
  left: 5px; top: 7px;
  width: 5px; height: 8px;
  border: solid var(--lcp-brand);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lcp-mode-card .lcp-btn { margin-top: auto; }

/* --- Foto-Rahmen in 2-Spalten-Abschnitten --- */
.lcp-media-figure {
  margin: 0;
  border-radius: var(--lcp-r-2xl);
  overflow: hidden;
  box-shadow: var(--lcp-shadow-card);
  line-height: 0;
}
.lcp-media-figure img {
  width: 100%;
  height: auto;
  display: block;
}
/* Hochformat-Foto (z. B. Bus vor Big Ben) auf sinnvolle Höhe begrenzen,
   damit es die nebenstehende Textspalte nicht überragt. */
.lcp-media-figure--portrait {
  max-width: 420px;
  margin-inline: auto;
}
.lcp-media-figure--portrait img {
  max-height: 460px;
  width: 100%;
  object-fit: cover;
}
.lcp-media-oyster {
  position: relative;
  border-radius: var(--lcp-r-2xl);
  overflow: hidden;
  box-shadow: var(--lcp-shadow-card);
  background: linear-gradient(135deg, #0d3b35, #1E8375);
  padding: 0;
  line-height: 0;
}
.lcp-media-oyster .lcp-media-photo { width: 100%; height: auto; display: block; }
/* freigestellte Oyster-Karte schwebend über dem Foto */
.lcp-media-oyster .lcp-media-overlay {
  position: absolute;
  right: 16px; bottom: 16px;
  width: 46%;
  max-width: 210px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35));
}

/* --- Widget-Politur --- */
.lcp-trans-widget-wrap {
  max-width: 760px;
  margin: 0 auto;
  background: var(--lcp-bg-card);
  border: 1px solid var(--lcp-border);
  border-radius: var(--lcp-r-2xl);
  box-shadow: var(--lcp-shadow-card);
  padding: 32px 30px;
}
.lcp-trans-widget-wrap .lcp-quiz {
  max-width: none;
  margin: 0;
  padding: 0;
}
.lcp-trans-widget-wrap .lcp-quiz-options {
  grid-template-columns: repeat(3, 1fr);
}
.lcp-trans-widget-wrap .lcp-quiz-step[data-step="2"] .lcp-quiz-options {
  grid-template-columns: repeat(2, 1fr);
  max-width: 460px;
}
/* Fix: ausgewählter Button muss beim Hover lesbar bleiben.
   Die globale :hover-Regel setzt sonst einen hellen Hintergrund, während
   .selected weißen Text behält -> unlesbar. Hier Petrol + weiß erzwingen. */
.lcp-trans-widget-wrap .lcp-quiz-opt.selected:hover {
  background: var(--lcp-brand);
  border-color: var(--lcp-brand);
  color: #fff;
}
/* Nicht ausgewählter Button: beim Hover dunkler Text auf hellem Grund sicherstellen */
.lcp-trans-widget-wrap .lcp-quiz-opt:hover {
  color: var(--lcp-text);
}

/* Abstand für einen CTA-Wrapper direkt nach einem 2-Spalten-Grid
   (verhindert, dass der Button am unteren Bildrand klebt). */
.lcp-grid--2 + .lcp-text-center {
  margin-top: 28px;
}

/* Abstand nach einem Media-Bereich (lcp-media-oyster / lcp-media-figure)
   zur nächsten Überschrift im Mobile-Layout, wenn die zweite Spalte
   unter das Bild rutscht. */
.lcp-media-oyster,
.lcp-media-figure {
  margin-bottom: 24px;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .lcp-mode-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .lcp-mode-grid { grid-template-columns: 1fr; }
  .lcp-trans-widget-wrap { padding: 24px 18px; }
  .lcp-media-oyster .lcp-media-overlay { width: 52%; right: 10px; bottom: 10px; }

  /* Wichtig: meine spezifische Regel überschreibt sonst die globale
     Mobile-1-Spalten-Regel der Quiz-Optionen -> alle Schritte auf 1 Spalte. */
  .lcp-trans-widget-wrap .lcp-quiz-options,
  .lcp-trans-widget-wrap .lcp-quiz-step[data-step="2"] .lcp-quiz-options {
    grid-template-columns: 1fr;
    max-width: none;
  }
  /* Buttons im Widget mobil etwas kompakter */
  .lcp-trans-widget-wrap .lcp-quiz-opt {
    padding: 14px 16px;
    text-align: left;
  }
}


/* =============================================================
   38. CODE-KARTEN (/de/rabattcodes/)
   ------------------------------------------------------------
   Karten-Huelle fuer die Standard-Rabattcode-Karten. Nutzt die
   bestehende klickbare Code-Box aus Abschnitt 31 (lcp-code-box,
   lcp-code-text, lcp-copy-hint) auf hellem Karten-Grund.
   ============================================================= */
.lcp-codecard {
  display: flex;
  flex-direction: column;
  background: var(--lcp-bg-card);
  border: 1px solid var(--lcp-border);
  border-radius: var(--lcp-r-2xl);
  padding: 26px 24px 24px;
  transition: box-shadow var(--lcp-t-fast);
}
.lcp-codecard:hover {
  box-shadow: var(--lcp-shadow-card);
}
.lcp-codecard-eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--lcp-text-light);
  margin: 0 0 4px;
}
.lcp-codecard-discount {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--lcp-text);
  margin: 0 0 10px;
  line-height: 1.2;
}
.lcp-codecard-for {
  font-size: 0.9rem;
  color: var(--lcp-text-body);
  line-height: 1.5;
  margin: 0 0 18px;
}
/* Code-Box innerhalb der Karte: bewusst etwas groesser, Abstand nach unten,
   per flex-grow oben gehalten, damit der CTA in beiden Karten buendig sitzt */
.lcp-codecard .lcp-code-box {
  margin-bottom: 18px;
  padding: 14px 16px;
}
.lcp-codecard .lcp-code-text {
  font-size: 20px;
}
.lcp-codecard .lcp-btn {
  margin-top: auto;
}
/* Reiner JS-Hook fuer das wechselnde Kopier-Label (Kopieren / Kopiert!).
   Erbt die Optik von lcp-copy-hint (Abschnitt 31); keine eigenen Styles noetig. */
.lcp-copy-hint-text { display: inline; }
/* Hinweis-Zeile unter dem Karten-Paar */
.lcp-codecard-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--lcp-text-light);
  line-height: 1.5;
  margin: 18px 0 0;
}

/* =================================================================
   39. CROSS-LINK CARD (lcp-card--link)
   Verlinkende Variante der Standard-Karte: ganze Karte ist ein Link-Element,
   subtiler Hover-Hebel, Pfeil-Zeile am Fuss. Verwendet in
   Cross-Link-Sektionen (FAQ, Landing-Page) zum Verlinken auf Money-
   und Authority-Pages.
   ================================================================= */
.lcp-card--link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lcp-card--link:hover,
.lcp-card--link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  border-color: var(--lcp-brand-petrol, #1E8375);
}
.lcp-card--link h3 {
  margin: 6px 0 8px;
  color: var(--lcp-text, #1d1d1f);
}
.lcp-card--link p {
  flex: 1 1 auto;
  font-size: 0.95rem;
  color: var(--lcp-text-body, #404040);
  line-height: 1.5;
  margin: 0 0 14px;
}
.lcp-card-link-arrow {
  display: inline-block;
  margin-top: auto;
  font-weight: 600;
  color: var(--lcp-brand-petrol, #1E8375);
  font-size: 0.95rem;
}
.lcp-card--link:hover .lcp-card-link-arrow,
.lcp-card--link:focus-visible .lcp-card-link-arrow {
  color: var(--lcp-cta-orange, #EF7F2C);
}


/* =================================================================
   40. PROMO-BANNER — ZWEI-CTA-VARIANTE + KOPIERBARER CODE
   ------------------------------------------------------------
   Erweitert Abschnitt 19 (lcp-promo) fuer Aktionen mit zwei
   Produkten bzw. zwei unterschiedlichen Rabatthoehen.
   Verwendet auf: Ads-Landing-Page (Block 01b), Startseite (Block A2),
   Rabattcodes-Seite (Block B).
   ================================================================= */

/* Der Promo-Innenraum darf umbrechen: in schmalen Containern
   (z. B. lcp-section--narrow) rutscht die Aktionsspalte unter den
   Text, statt die Headline auf vier Zeilen zu quetschen. */
.lcp-promo-inner {
  flex-wrap: wrap;
}
.lcp-promo-text {
  flex: 1 1 360px;
}

/* Aktionsspalte mit zwei Buttons + Code-Feld darueber */
.lcp-promo-action--dual {
  flex: 1 1 240px;
  gap: 10px;
  box-sizing: border-box;
}
.lcp-promo-action--dual .lcp-btn {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.lcp-promo-action--dual .lcp-btn--inverse {
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.6);
  padding: 12px 26px;
}
.lcp-promo-action--dual .lcp-btn--inverse:hover {
  background: #fff !important;
  color: var(--lcp-brand) !important;
  opacity: 1;
}

/* Kopierbares Code-Feld (Button-Element, Styles aus Abschnitt 16
   lcp-code-copy; hier nur Button-Reset + Klick-Feedback) */
.lcp-code-copy {
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  font-family: inherit;
  text-align: left;
  padding: 0;
}
.lcp-code-copy .lcp-code-copy-btn {
  border-radius: 0;
}
.lcp-code-copy.lcp-copied {
  border-color: #fff;
  background: rgba(255,255,255,0.22);
}

/* Zweizeilige Headline im Promo darf umbrechen, ohne zu gedraengt zu wirken */
.lcp-promo-headline {
  text-wrap: balance;
}

/* Ab hier stapelt der Promo-Block komplett (Abschnitt 19 macht das
   erst ab 768px – bei zwei CTAs wird es schon frueher eng). */
@media (max-width: 900px) {
  .lcp-promo-inner {
    flex-direction: column;
    text-align: center;
    padding: 32px 20px;
    gap: 20px;
  }
  .lcp-promo-badge {
    width: 90px;
    height: 90px;
  }
  .lcp-promo-badge-pct {
    font-size: 1.8rem;
  }
  .lcp-promo-text {
    flex: 0 0 auto;
  }
  .lcp-promo-action--dual {
    flex: 0 0 auto;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
}


/* =================================================================
   41. AKTIONSBANNER SITE-WEIT (lcp-announce)
   ------------------------------------------------------------
   Schmaler Balken ganz oben, eingebunden per GeneratePress-Element
   (Hook: wp_body_open). Markup + JS: snippets/lcp-announcement-bar.html
   Session-basiert wegklickbar.

   STICKY-VARIANTE: die auskommentierte Regel am Ende dieses
   Abschnitts aktivieren, falls der Balken beim Scrollen oben
   kleben soll. Vorher pruefen, ob das GP-Sticky-Menue kollidiert.
   ================================================================= */
.lcp-announce {
  background: linear-gradient(135deg, var(--lcp-brand-dark) 0%, var(--lcp-brand) 55%, var(--lcp-brand-light) 100%);
  color: #fff;
  position: relative;
  z-index: 500;
}
.lcp-announce[hidden],
.lcp-announce.lcp-announce--dismissed {
  display: none !important;
}
.lcp-announce-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 44px 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.lcp-announce-icon {
  display: inline-flex;
  flex-shrink: 0;
}
.lcp-announce-icon svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}
.lcp-announce-text {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.35;
  color: #fff;
}
.lcp-announce-strong {
  font-weight: 700;
}
.lcp-announce-sub {
  color: rgba(255,255,255,0.82);
  font-weight: 400;
}
.lcp-announce-sep {
  color: rgba(255,255,255,0.5);
  padding: 0 6px;
}

/* Code-Chip (kopierbar) */
.lcp-announce-code {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.14);
  border: 1px dashed rgba(255,255,255,0.5);
  border-radius: var(--lcp-r-md);
  padding: 5px 12px;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  transition: background var(--lcp-t-fast), border-color var(--lcp-t-fast);
  flex-shrink: 0;
}
.lcp-announce-code:hover {
  background: rgba(255,255,255,0.24);
  border-color: #fff;
}
.lcp-announce-code.lcp-copied {
  background: rgba(255,255,255,0.28);
  border-style: solid;
  border-color: #fff;
}
.lcp-announce-code-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.72);
}
.lcp-announce-code-value {
  font-family: monospace;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.2px;
}
.lcp-announce-code-hint {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
}

/* CTA */
.lcp-announce-cta {
  background: var(--lcp-cta);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 8px 18px;
  border-radius: var(--lcp-r-md);
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity var(--lcp-t-fast);
}
.lcp-announce-cta:hover {
  opacity: 0.88;
  color: #fff !important;
}

/* Schliessen */
.lcp-announce-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
  transition: color var(--lcp-t-fast);
}
.lcp-announce-close:hover {
  color: #fff;
}

/* Mittlere Breiten: Text zweizeilig, damit Code-Chip und CTA in
   derselben Zeile bleiben statt umzubrechen. */
@media (max-width: 1100px) {
  .lcp-announce-text {
    font-size: 0.85rem;
  }
  .lcp-announce-sep {
    display: none;
  }
  .lcp-announce-sub {
    display: block;
  }
}

@media (max-width: 900px) {
  .lcp-announce-inner {
    gap: 10px;
    padding: 9px 40px 9px 14px;
  }
  .lcp-announce-text {
    font-size: 0.85rem;
    flex: 1 1 100%;
    text-align: center;
  }
  .lcp-announce-sep {
    display: none;
  }
  .lcp-announce-sub {
    display: block;
  }
  .lcp-announce-icon {
    display: none;
  }
}
@media (max-width: 480px) {
  .lcp-announce-code-hint {
    display: none;
  }
  .lcp-announce-cta {
    font-size: 0.82rem;
    padding: 7px 14px;
  }
}

/* STICKY-VARIANTE — bei Bedarf die naechsten vier Zeilen aktivieren:
.lcp-announce {
  position: sticky;
  top: 0;
}
*/


/* =============================================================
   50. STATISCHE FASSUNG (09.10.2026)
   ============================================================= */
.lcp-seite { font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--lcp-text-body); }
.lcp-seite h1, .lcp-seite h2, .lcp-seite h3 { font-family: inherit; color: var(--lcp-text); }
/* Überschriften auf farbigem Grund bleiben weiß (Patrick 15.10.2026: kein schwarzer Text auf Grün). */
.lcp-seite .lcp-hero h1, .lcp-seite .lcp-hero h2, .lcp-seite .lcp-hero-title,
.lcp-seite .lcp-band--brand h2, .lcp-seite .lcp-band--brand h3,
.lcp-seite .lcp-promo h2, .lcp-seite .lcp-promo h3,
.lcp-seite .lcp-closing h2, .lcp-seite .lcp-closing h3 { color: #fff; }
.lcp-preis { white-space: nowrap; }
.lcp-code, .rp-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700;
  background: #fff7ef; color: #9a4a10; padding: 1px 6px; border-radius: 4px; border: 1px dashed var(--lcp-cta); letter-spacing: .02em; white-space: nowrap; }

/* Pass-Finder: Schritte über das hidden-Attribut statt über data-step */
.lcp-quiz .lcp-quiz-step[data-step] { display: block; }
.lcp-quiz [hidden] { display: none !important; }
.lcp-quiz .lcp-quiz-result { display: block; }
.lcp-quiz-result-reason { margin: 0 0 20px; line-height: 1.55; }
.lcp-quiz-result-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.lcp-quiz-link { background: none; border: 0; padding: 0; color: var(--lcp-brand); text-decoration: underline; cursor: pointer; font: inherit; font-size: .9rem; }
.lcp-quiz-reset { margin-top: 14px; text-align: center; }
@media (max-width: 640px) { .lcp-quiz-options { grid-template-columns: 1fr; } }

/* FAQ als <details> */
.lcp-faq-liste { max-width: var(--lcp-container-narrow); margin: 0 auto; border-top: 1px solid var(--lcp-border); }
.lcp-faq-liste .lcp-faq-item { border-bottom: 1px solid var(--lcp-border); }
.lcp-faq-frage { cursor: pointer; list-style: none; padding: 18px 36px 18px 4px; font-weight: 600; color: var(--lcp-text); position: relative; }
.lcp-faq-frage::-webkit-details-marker { display: none; }
.lcp-faq-frage::after { content: "+"; position: absolute; right: 8px; top: 14px; font-size: 1.4rem; color: var(--lcp-brand); font-weight: 400; }
details[open] > .lcp-faq-frage::after { content: "–"; }
.lcp-faq-antwort { padding: 0 4px 18px; color: var(--lcp-text-body); line-height: 1.6; }
.lcp-faq-antwort p:last-child { margin-bottom: 0; }

/* Rechner: Hinweiszeile */
.lcp-calc-hint { font-size: .9rem; margin-bottom: 16px; }
.lcp-calc-result-empty[hidden], .lcp-calc-result-content[hidden], .lcp-calc-card-badge[hidden] { display: none !important; }

/* Tabellenhinweis unter Preistabellen */
.lcp-table-note { font-size: .82rem; color: var(--lcp-text-light); max-width: 900px; margin: 10px auto 0; }

/* Engine-Bausteine auf LCP-Seiten mit Abstand und Breite der Sections */
.lcp-seite .rp-wrap { max-width: var(--lcp-container); }
.lcp-engine { max-width: var(--lcp-container); margin: 0 auto; padding: 0 var(--lcp-space-section-x); }

/* Hero-Bild als <img> statt Hintergrund */
.lcp-hero-image img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* 51. Startseite und Attraktionskarten (09.10.2026) */
.lcp-attr-img { aspect-ratio: 5 / 3; height: auto; }
.lcp-attr-passes { display: block; font-size: 0.85rem; line-height: 1.5; color: var(--lcp-text-light); }
.lcp-attr-passes a { color: var(--lcp-text); }
.lcp-card-logo--gc { width: auto; height: 28px; }
.lcp-h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 10px; }