/* DATEI: signalkompass/dashboard/static/css/landing.css
   BESCHREIBUNG:
     Oeffentliche Landingpage-Vorlage mit Consent-Banner. Nutzt das zentrale
     Design-System und bleibt von Dashboard-spezifischen Klassen getrennt. */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--txt);font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:var(--font-size-md);-webkit-font-smoothing:antialiased;}
a{color:inherit;}

.lp-page{min-height:100vh;background:var(--bg);}
/* Header-Padding deckungsgleich mit .lp-hero (gleiche clamp-Werte) -> Logo links und Nav/Schalter
   rechts fluchten vertikal mit dem Hero-Content (Kicker „Betaphase…", Signal-Board). */
.lp-header{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:var(--space-10);padding:22px clamp(18px,6vw,82px);}
.lp-brand-cluster{display:flex;align-items:center;gap:var(--space-8);min-width:0;}
.lp-brand{display:flex;align-items:center;gap:var(--space-5);text-decoration:none;font-weight:var(--font-weight-bold);font-size:calc(var(--font-size-lg) * 1.25);letter-spacing:0;}
/* Logo +1/3 (30->40px). --logo-filter invertiert das weisse Signet in hellen Themes (Light/Sepia),
   damit es nicht weiss-auf-hell verschwindet — dieselbe Mechanik wie im Dashboard-/Auth-Header. */
.lp-brand img{width:40px;height:40px;flex:0 0 auto;filter:var(--logo-filter);}
.lp-nav{display:flex;align-items:center;gap:var(--space-5);}
.lp-nav a:not(.ui-btn){color:var(--mut);text-decoration:none;font-size:13px;font-weight:var(--font-weight-medium);}
.lp-nav a:not(.ui-btn):hover{color:var(--txt);}
/* Burger: traegt unterhalb von 840px die Navigationslinks, die dann aus der Header-Reihe weichen.
   Oberhalb ueberfluessig -> erst der Breakpoint unten blendet ihn ein. */
.lp-menu-wrap{display:none;position:relative;}
.lp-burger{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:var(--radius-md);background:transparent;color:var(--txt);cursor:pointer;}
.lp-burger:hover{background:var(--panel-hover);}
.lp-menu{position:absolute;top:calc(100% + var(--space-4));right:0;z-index:30;display:flex;flex-direction:column;gap:var(--space-5);min-width:180px;padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);box-shadow:0 8px 24px var(--shadow-menu);}
/* Pflicht: display:flex oben wuerde das hidden-Attribut sonst aushebeln -> Panel stuende immer offen. */
.lp-menu[hidden]{display:none;}
/* Der Burger zeigt den naechsten Schritt: geschlossen die Striche, geoeffnet das X. */
.lp-burger[aria-expanded="true"] .lp-burger__ico--menu{display:none;}
.lp-burger__ico--x{display:none;}
.lp-burger[aria-expanded="true"] .lp-burger__ico--x{display:flex;}
/* Der CTA im Panel ist die Reserve fuer den Fall, dass er aus der Header-Reihe weicht (<=540px). */
.lp-menu-cta{display:none;}

.lp-hero{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);align-items:center;gap:clamp(28px,5vw,72px);padding:104px clamp(18px,6vw,82px) 64px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--bg),var(--overview-bg));}
.lp-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--overview-line);}
.lp-copy{position:relative;z-index:1;max-width:650px;}
.lp-kicker{margin:0 0 var(--space-9);color:var(--status-halten);font-size:13px;font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.08em;}
.lp-copy h1{margin:0;color:var(--white);font-size:clamp(46px,7vw,92px);line-height:.94;font-weight:750;letter-spacing:0;}
.lp-copy h1 span{display:block;color:var(--mut);font-size:clamp(28px,3.9vw,54px);font-weight:var(--font-weight-semibold);line-height:1.03;margin-top:var(--space-5);}
.lp-lead{margin:var(--space-14) 0 0;max-width:540px;color:var(--overview-subtle);font-size:18px;line-height:var(--line-relaxed);}
.lp-actions{display:flex;flex-wrap:wrap;gap:var(--space-6);margin-top:34px;}
.lp-note{margin:var(--space-9) 0 0;color:var(--mut);font-size:var(--font-size-sm);line-height:1.5;max-width:520px;}

.lp-signal-plane{position:relative;z-index:1;min-width:0;min-height:520px;display:flex;align-items:center;justify-content:center;}
.lp-signal-gallery{width:min(100%,540px);min-width:0;}
.lp-signal-viewport{overflow:hidden;border-radius:var(--radius-lg);background:transparent;box-shadow:var(--shadow-card);transition:height var(--duration-slow) var(--ease-standard);}
.lp-signal-track{display:flex;align-items:flex-start;transition:transform var(--duration-slow) var(--ease-standard);}
.lp-signal-slide{flex:0 0 100%;min-width:0;}
.lp-signal-gallery,.lp-signal-track,.lp-signal-slide{background:transparent;}
.lp-signal-board{width:min(100%,540px);border:1px solid var(--overview-line);background:var(--panel);box-shadow:none;border-radius:var(--radius-lg);overflow:hidden;}
.lp-board-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);padding:var(--space-9) var(--space-10);border-bottom:1px solid var(--line);background:var(--overview-panel);}
.lp-board-title{display:flex;flex-direction:column;gap:var(--space-2);}
.lp-board-title strong{font-size:var(--font-size-lg);}
.lp-board-title span{color:var(--mut);font-size:12px;}
.lp-board-table-wrap{overflow-x:auto;}
.lp-board-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px;}
.lp-board-table th,.lp-board-table td{padding:var(--space-7) var(--space-5);border-bottom:1px solid var(--line);vertical-align:middle;}
.lp-board-table thead th{color:var(--mut);background:var(--th-bg);font-size:10.5px;font-weight:var(--font-weight-semibold);letter-spacing:.04em;text-align:right;text-transform:uppercase;}
.lp-board-table thead th:first-child,.lp-board-table tbody th{text-align:left;}
.lp-board-table thead th:first-child{width:31%;}
.lp-board-table thead th:nth-child(2){width:23%;}
.lp-board-table thead th:nth-child(3){width:28%;}
.lp-board-table thead th:nth-child(4){width:18%;}
.lp-board-table tbody th{font-weight:var(--font-weight-regular);}
.lp-board-table tbody td{text-align:right;font-variant-numeric:tabular-nums;}
.lp-board-table tbody tr:last-child>*{border-bottom:0;}
.lp-name{display:flex;flex-direction:column;gap:3px;min-width:0;}
.lp-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lp-name small{overflow:hidden;color:var(--mut);font-size:var(--font-size-xs);text-overflow:ellipsis;white-space:nowrap;}
.lp-performance{color:var(--txt);font-weight:var(--font-weight-semibold);white-space:nowrap;}
.lp-score{color:var(--status-kaufen);font-weight:var(--font-weight-bold);}
.lp-score--watch{color:var(--status-warnung);}
.lp-score--hold{color:var(--status-halten);}
.lp-score--avoid{color:var(--status-verkaufen);}
.lp-signal-body{padding:var(--space-9) var(--space-10) var(--space-8);}
.lp-signal-ident{display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);}
.lp-signal-company{display:flex;flex-direction:column;gap:var(--space-2);}
.lp-signal-company strong{font-size:18px;color:var(--txt);}
.lp-signal-company small{color:var(--mut);font-size:var(--font-size-xs);}
.lp-signal-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);margin:var(--space-9) 0;}
.lp-signal-kpis .ui-kpi{min-width:0;padding:var(--space-6);background:var(--overview-bg);box-shadow:none;transform:none;}
.lp-signal-kpis .ui-kpi:hover{transform:none;border-color:var(--kpi-border);box-shadow:none;}
.lp-signal-kpis .ui-kpi::before{display:none;}
.lp-signal-kpis .ui-kpi__label{font-size:11px;}
.lp-signal-kpis .ui-kpi__value{font-size:20px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.lp-signal-facts{margin:0;border-top:1px solid var(--line);}
.lp-signal-facts div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:var(--space-6);padding:var(--space-6) 0;border-bottom:1px solid var(--line);}
.lp-signal-facts dt{color:var(--mut);font-size:12px;font-weight:var(--font-weight-semibold);}
.lp-signal-facts dd{margin:0;color:var(--txt);font-size:12.5px;line-height:1.45;}
.lp-signal-disclaimer{margin:var(--space-6) 0 0;color:var(--mut);font-size:11px;line-height:1.45;}
.lp-signal-disclaimer--table{margin:0;padding:var(--space-6) var(--space-10) var(--space-7);border-top:1px solid var(--line);}

/* Strategie-Performance: SVG bleibt ein Daten-Visual und bezieht alle Farben aus dem DS. */
.lp-performance-body{padding-bottom:var(--space-7);}
.lp-performance-kpis{margin-top:0;margin-bottom:var(--space-6);}
.lp-performance-kpis .ui-kpi:first-child .ui-kpi__value,.lp-performance-kpis .ui-kpi:last-child .ui-kpi__value{color:var(--status-kaufen);}
.lp-performance-kpis .ui-kpi__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lp-performance-chart{margin:0;}
.lp-performance-chart svg{display:block;width:100%;height:auto;}
.lp-chart-grid line{stroke:var(--line);stroke-width:1;}
.lp-chart-labels{fill:var(--mut);font-size:9px;}
.lp-chart-line{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.lp-chart-line--strategy{stroke:var(--chart-pos);stroke-width:3;}
.lp-chart-line--hold{stroke:var(--chart-neutral);stroke-width:2;stroke-dasharray:5 5;}
.lp-chart-point{fill:var(--panel);stroke:var(--chart-pos);stroke-width:2.5;}
.lp-chart-legend{display:flex;align-items:center;gap:var(--space-8);margin-top:var(--space-2);color:var(--mut);font-size:10.5px;}
.lp-chart-legend span{display:flex;align-items:center;gap:var(--space-3);}
.lp-chart-key{display:block;width:20px;height:2px;background:var(--chart-pos);}
.lp-chart-key--hold{height:0;border-top:2px dashed var(--chart-neutral);background:none;}
.lp-performance-facts{margin:var(--space-6) 0 0;border-top:1px solid var(--line);}
.lp-performance-facts div{display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);padding:var(--space-5) 0;border-bottom:1px solid var(--line);}
.lp-performance-facts dt{font-size:12px;font-weight:var(--font-weight-semibold);}
.lp-performance-facts dd{margin:0;font-size:14px;font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums;}

/* Signalverlauf: eine einzige vertikale Sequenz statt zusätzlicher Karten. */
.lp-timeline-body{padding-bottom:var(--space-7);}
.lp-monitoring-note{display:flex;align-items:center;gap:var(--space-5);margin:var(--space-7) 0;padding:var(--space-5) var(--space-6);border-radius:var(--radius-md);background:var(--overview-bg);color:var(--mut);font-size:11.5px;}
.lp-monitoring-note .ui-icon{color:var(--status-warnung);font-size:17px;}
.lp-signal-timeline{position:relative;list-style:none;margin:0;padding:0;}
.lp-signal-timeline::before{content:"";position:absolute;top:9px;bottom:23px;left:72px;width:1px;background:var(--line);}
.lp-timeline-event{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:28px;min-height:72px;padding-bottom:var(--space-6);}
.lp-timeline-event::before{content:"";position:absolute;z-index:1;top:3px;left:65px;width:14px;height:14px;border:4px solid var(--panel);border-radius:50%;background:var(--status-neutral);box-shadow:0 0 0 1px var(--line);}
.lp-timeline-event--hold::before{background:var(--status-halten);}
.lp-timeline-event--buy::before{background:var(--status-kaufen);}
.lp-timeline-event--watch::before{background:var(--status-warnung);}
.lp-timeline-event time{padding-top:2px;color:var(--mut);font-size:10.5px;line-height:1.35;}
.lp-timeline-event>div{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);min-width:0;}
.lp-timeline-event .ui-badge{min-width:100%;justify-content:center;}
.lp-timeline-event p{margin:0;color:var(--mut);font-size:11.5px;line-height:1.4;}

/* Strategie-Check: Score-Zusammenfassung plus flache Regelliste. */
.lp-strategy-body{padding-bottom:var(--space-7);}
.lp-strategy-summary{display:grid;grid-template-columns:82px minmax(0,1fr);gap:var(--space-7);align-items:center;margin:var(--space-7) 0;padding:var(--space-6);border-radius:var(--radius-lg);background:var(--overview-bg);}
.lp-strategy-score{position:relative;display:grid;width:72px;height:72px;place-items:center;border-radius:50%;background:conic-gradient(var(--chart-neutral) 0 74%,var(--line) 74% 100%);}
.lp-strategy-score::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--overview-bg);}
.lp-strategy-score span{position:relative;display:flex;align-items:baseline;}
.lp-strategy-score strong{font-size:20px;}
.lp-strategy-score small{margin-left:2px;color:var(--mut);font-size:9px;}
.lp-strategy-summary>div:last-child>strong{display:block;font-size:13.5px;}
.lp-strategy-summary p{margin:var(--space-3) 0 0;color:var(--mut);font-size:11.5px;line-height:1.45;}
.lp-strategy-rules{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.lp-strategy-rules li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);padding:var(--space-5) 0;border-bottom:1px solid var(--line);}
.lp-strategy-rules li>span:last-child{color:var(--mut);font-size:11px;}
.lp-rule-name{display:flex;align-items:center;gap:var(--space-5);font-size:12.5px;font-weight:var(--font-weight-semibold);}
.lp-rule-icon{display:grid;width:21px;height:21px;place-items:center;border-radius:50%;font-size:12px;}
.lp-rule-icon--ok{background:var(--badge-kaufen-bg);color:var(--badge-kaufen-txt);}
.lp-rule-icon--wait{background:var(--badge-reduzieren-bg);color:var(--badge-reduzieren-txt);}
.lp-strategy-trigger{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-7);margin-top:var(--space-6);color:var(--mut);font-size:11px;line-height:1.4;}
.lp-strategy-trigger strong{max-width:64%;color:var(--txt);font-weight:var(--font-weight-semibold);text-align:right;}

.lp-signal-controls{display:flex;align-items:center;justify-content:center;gap:var(--space-6);margin-top:var(--space-7);}
.lp-signal-nav{flex:none;width:40px;height:40px;border-color:transparent;background:transparent;color:var(--mut);font-size:20px;box-shadow:none;}
.lp-signal-nav:hover{border-color:transparent;background:var(--btn-bg-hover);color:var(--txt);box-shadow:none;}
.lp-signal-nav:focus-visible{outline:none;background:var(--btn-bg-hover);box-shadow:var(--focus-ring);}
.lp-signal-nav--prev .ui-icon{transform:rotate(180deg);}
.lp-signal-status{min-width:180px;color:var(--mut);font-size:12px;font-weight:var(--font-weight-medium);text-align:center;}

.lp-band{padding:62px clamp(18px,6vw,82px);background:var(--bg);}
.lp-band-inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-14);}
.lp-point{border-top:1px solid var(--line);padding-top:var(--space-9);}
.lp-point h2{margin:0 0 var(--space-5);font-size:18px;font-weight:650;}
.lp-point p{margin:0;color:var(--mut);line-height:1.65;}

.lp-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-9);flex-wrap:wrap;padding:28px clamp(18px,6vw,82px);border-top:1px solid var(--line);color:var(--mut);font-size:var(--font-size-sm);}
.lp-footer-links{display:flex;align-items:center;gap:var(--space-7);flex-wrap:wrap;}
.lp-footer a,.lp-footer button{color:var(--mut);text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer;}
.lp-footer a:hover,.lp-footer button:hover{color:var(--txt);}

/* ===== Best-Practice-Ausbau: Schritte · Funktionen · Preise · Vergleich · Vertrauen · FAQ · CTA =====
   Alle Flaechen rein ueber Semantic/Component-Tokens (Dark + Light automatisch korrekt). Akzent ueber
   die neutrale Accent-Achse — Ampelfarben (gruen/rot/amber) bleiben der Signal-Semantik vorbehalten. */
.lp-how,.lp-features,.lp-pricing,.lp-trust,.lp-faq{max-width:1180px;margin:0 auto;padding:clamp(54px,8vw,92px) clamp(18px,6vw,40px);}
.lp-section-head{max-width:680px;margin:0 auto clamp(30px,4vw,50px);text-align:center;}
.lp-eyebrow{margin:0 0 var(--space-5);color:var(--accent);font-size:13px;font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.08em;}
.lp-section-head h2{margin:0;color:var(--white);font-size:clamp(28px,4vw,40px);line-height:1.1;font-weight:700;letter-spacing:-.01em;}
.lp-section-sub{margin:var(--space-7) auto 0;max-width:600px;color:var(--mut);font-size:17px;line-height:var(--line-relaxed);}

/* So funktioniert's */
.lp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,28px);}
.lp-step{padding:var(--space-12) var(--space-11);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xl);}
.lp-step-num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font-weight:var(--font-weight-bold);font-size:17px;margin-bottom:var(--space-9);}
.lp-step h3{margin:0 0 var(--space-5);font-size:19px;font-weight:650;color:var(--txt);}
.lp-step p{margin:0;color:var(--mut);line-height:var(--line-relaxed);}

/* Funktionen */
.lp-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,24px);}
.lp-feature{padding:var(--space-12) var(--space-11);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xl);}
.lp-feature-ic{width:30px;height:30px;color:var(--accent);margin-bottom:var(--space-9);display:block;}
.lp-feature-ic .ui-icon{width:100%;height:100%;}
.lp-feature h3{margin:0 0 var(--space-5);font-size:18px;font-weight:650;color:var(--txt);}
.lp-feature p{margin:0;color:var(--mut);line-height:var(--line-relaxed);font-size:14.5px;}

/* Preise */
.lp-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,24px);align-items:start;}
.lp-price{position:relative;display:flex;flex-direction:column;padding:clamp(22px,2.6vw,30px);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);}
.lp-price--featured{border-color:var(--accent);box-shadow:var(--shadow-accent);}
.lp-price-flag{position:absolute;top:0;right:clamp(22px,2.6vw,30px);transform:translateY(-50%);background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:var(--font-weight-bold);padding:4px 12px;border-radius:var(--radius-pill);letter-spacing:.02em;}
.lp-price-head h3{margin:0;font-size:21px;font-weight:700;color:var(--txt);}
.lp-price-claim{margin:var(--space-2) 0 0;color:var(--mut);font-size:13.5px;}
.lp-price-amount{margin:var(--space-8) 0 0;display:flex;align-items:baseline;gap:var(--space-3);}
.lp-price-num{color:var(--white);font-size:38px;font-weight:750;line-height:1;}
.lp-price-per{color:var(--mut);font-size:14px;}
.lp-price-cta{width:100%;justify-content:center;margin:var(--space-12) 0 var(--space-11);}
.lp-price-vorteil{margin:0 0 var(--space-7);color:var(--txt);font-size:13.5px;font-weight:600;}
.lp-price-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-6);}
.lp-price-list li{display:flex;align-items:flex-start;gap:var(--space-5);color:var(--mut);font-size:14px;line-height:1.5;}
.lp-price-list li>.ui-icon{width:16px;height:16px;margin-top:2px;color:var(--accent);flex:none;}
.lp-soon{display:inline-block;margin-left:var(--space-3);padding:1px 7px;border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--mut);font-size:11px;font-weight:600;}
.lp-price-disclaimer{margin:clamp(20px,3vw,28px) auto 0;max-width:560px;text-align:center;color:var(--mut);font-size:13px;line-height:1.5;}

/* Vergleichstabelle (aufklappbar) */
.lp-compare{margin:clamp(28px,4vw,44px) auto 0;max-width:880px;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--panel);overflow:hidden;}
.lp-compare>summary{list-style:none;cursor:pointer;padding:var(--space-10) var(--space-12);font-weight:600;color:var(--txt);display:flex;align-items:center;gap:var(--space-6);}
.lp-compare>summary::-webkit-details-marker{display:none;}
.lp-compare>summary>.ui-disclosure__icon{color:var(--accent);}
.lp-compare[open]>summary{border-bottom:1px solid var(--line);}
.lp-compare-wrap{overflow-x:auto;}
.lp-compare-table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px;}
.lp-compare-table thead th{padding:var(--space-8);font-weight:var(--font-weight-bold);color:var(--txt);text-align:center;border-bottom:2px solid var(--line);}
.lp-compare-table thead th:first-child{text-align:left;}
.lp-compare-table tbody th[scope=row]{text-align:left;font-weight:var(--font-weight-regular);color:var(--mut);padding:var(--space-6) var(--space-9);border-bottom:1px solid var(--line);}
.lp-compare-table tbody td{text-align:center;padding:var(--space-6) var(--space-8);border-bottom:1px solid var(--line);width:15%;}
.lp-compare-group th{background:var(--bg-darker);color:var(--txt);font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:var(--font-weight-bold);padding:var(--space-5) var(--space-9)!important;border-bottom:1px solid var(--line);}
.lp-compare-table thead .lp-compare-featured,.lp-compare-table tbody .lp-compare-featured{background:var(--selected-bg);}
.lp-yes{color:var(--accent);font-weight:var(--font-weight-bold);font-size:15px;}
.lp-no{color:var(--mut);opacity:.5;}
.lp-val{color:var(--txt);font-size:13px;}

/* Vertrauen & Transparenz */
.lp-trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,24px);}
.lp-trust-item{padding:var(--space-12) var(--space-11);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xl);}
.lp-trust-item h3{margin:0 0 var(--space-5);font-size:17px;font-weight:650;color:var(--txt);}
.lp-trust-item p{margin:0;color:var(--mut);line-height:var(--line-relaxed);font-size:14.5px;}

/* FAQ */
.lp-faq{max-width:820px;}
.lp-faq-list{display:flex;flex-direction:column;gap:var(--space-5);}
.lp-faq-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
.lp-faq-item>summary{list-style:none;cursor:pointer;padding:var(--space-9) var(--space-11);font-weight:600;color:var(--txt);font-size:15.5px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);text-align:left;}
.lp-faq-item>summary::-webkit-details-marker{display:none;}
.lp-faq-icon{display:inline-flex;color:var(--accent);flex:none;transition:transform var(--duration-normal) var(--ease-standard);}
.lp-faq-icon .ui-icon{width:20px;height:20px;}
.lp-faq-item[open]>summary .lp-faq-icon{transform:rotate(45deg);}
.lp-faq-body{padding:0 var(--space-11) var(--space-10);color:var(--mut);line-height:1.65;text-align:left;}
.lp-faq-body p{margin:0;}

/* Abschluss-CTA */
.lp-final{padding:clamp(36px,6vw,60px) clamp(18px,6vw,40px) clamp(64px,9vw,96px);}
.lp-final-inner{max-width:720px;margin:0 auto;text-align:center;padding:clamp(36px,5vw,56px) clamp(22px,4vw,48px);background:linear-gradient(135deg,var(--overview-bg),var(--panel));border:1px solid var(--overview-line);border-radius:var(--radius-2xl);}
.lp-final-inner h2{margin:0;color:var(--white);font-size:clamp(26px,3.6vw,38px);font-weight:700;line-height:1.1;letter-spacing:-.01em;}
.lp-final-inner>p{margin:var(--space-8) auto 0;max-width:480px;color:var(--overview-subtle);font-size:17px;line-height:var(--line-relaxed);}
.lp-actions--center{justify-content:center;margin-top:var(--space-12);}
.lp-final-inner .lp-note{margin:var(--space-9) auto 0;text-align:center;}

/* Beta-Phase: nicht-ampeliger Akzent-Kicker + prominenter Block direkt unter dem Hero (nur bei beta_bewerbung.offen). */
.lp-kicker--beta{color:var(--accent);}
.lp-beta{padding:clamp(28px,5vw,52px) clamp(18px,6vw,82px) 0;}
.lp-beta-inner{max-width:1080px;margin:0 auto;padding:clamp(28px,4vw,44px) clamp(22px,4vw,48px);background:linear-gradient(135deg,var(--overview-bg),var(--panel));border:1px solid var(--overview-line);border-radius:var(--radius-2xl);}
.lp-beta-inner h2{margin:var(--space-3) 0 0;color:var(--white);font-size:clamp(24px,3.2vw,34px);font-weight:700;line-height:1.12;letter-spacing:-.01em;}
.lp-beta-lead{margin:var(--space-8) 0 0;max-width:660px;color:var(--overview-subtle);font-size:17px;line-height:var(--line-relaxed);}
.lp-beta-points{margin:var(--space-10) 0 0;padding:0;list-style:none;display:grid;gap:var(--space-5);max-width:660px;}
.lp-beta-points li{display:flex;align-items:flex-start;gap:var(--space-5);color:var(--mut);font-size:15px;line-height:1.5;}
.lp-beta-points li>.ui-icon{width:17px;height:17px;margin-top:2px;color:var(--accent);flex:none;}
.lp-beta .lp-actions{margin-top:var(--space-11);}

.consent-backdrop{position:fixed;inset:0;z-index:1100;display:flex;align-items:flex-end;justify-content:center;padding:var(--space-8);background:var(--shadow-strong);backdrop-filter:blur(5px);}
.consent-backdrop[hidden]{display:none;}
.consent-panel{width:min(100%,860px);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 24px 80px var(--shadow-strong);overflow:hidden;}
.consent-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0;}
.consent-copy{padding:var(--space-12) 26px;}
.consent-copy h2{margin:0 0 var(--space-5);font-size:19px;font-weight:var(--font-weight-bold);}
.consent-copy p{margin:0;color:var(--mut);line-height:var(--line-relaxed);}
.consent-actions{display:flex;flex-direction:column;gap:9px;padding:var(--space-12);background:var(--bg-lighter);border-left:1px solid var(--line);}
.consent-settings{display:none;border-top:1px solid var(--line);padding:0 26px var(--space-11);}
.consent-backdrop.is-configuring .consent-settings{display:block;}
.consent-settings .consent-actions{padding:0;background:transparent;border:0;align-items:flex-end;}
.consent-option{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-6);padding:var(--space-8) 0;border-bottom:1px solid var(--line);}
.consent-option:last-child{border-bottom:0;}
.consent-option input{margin-top:3px;width:17px;height:17px;accent-color:var(--accent);}
.consent-option strong{display:block;margin-bottom:var(--space-2);}
.consent-option span{display:block;color:var(--mut);font-size:var(--font-size-sm);line-height:1.5;}
.consent-meta{margin-top:var(--space-6);color:var(--mut);font-size:var(--font-size-xs);line-height:1.5;}

.lp-reveal{opacity:0;transform:translateY(16px);animation:lpIn .58s ease forwards;}
.lp-copy{animation-delay:.04s;}
.lp-signal-plane{animation-delay:.12s;}
@keyframes lpIn{to{opacity:1;transform:translateY(0);}}

@media (max-width: 840px){
  .lp-header{position:relative;background:var(--bg);border-bottom:1px solid var(--line);}
  .lp-hero{min-height:auto;grid-template-columns:1fr;padding-top:var(--space-24);}
  .lp-signal-plane{min-height:360px;align-items:flex-start;}
  .lp-band-inner{grid-template-columns:1fr;}
  /* Ab hier reicht die Breite fuer die Textreihe nicht mehr: die Links wandern ins Burger-Panel.
     Der Kind-Selektor trifft bewusst nur die Header-Reihe, nicht die identischen Links im Panel. */
  .lp-nav>a:not(.ui-btn){display:none;}
  .lp-menu-wrap{display:block;}
  .lp-steps,.lp-price-grid,.lp-trust-grid{grid-template-columns:1fr;}
  .lp-feature-grid{grid-template-columns:1fr 1fr;}
  .consent-main{grid-template-columns:1fr;}
  .consent-actions{border-left:0;border-top:1px solid var(--line);}
}

@media (max-width: 540px){
  .lp-actions .ui-btn{width:100%;}
  .lp-feature-grid{grid-template-columns:1fr;}
  .lp-board-head{padding:var(--space-7) var(--space-6);}
  .lp-board-table th,.lp-board-table td{padding:var(--space-6) var(--space-3);}
  .lp-board-table{font-size:12px;}
  .lp-board-table thead th{font-size:9px;letter-spacing:0;}
  .lp-board-table .ui-badge{padding-inline:var(--space-3);font-size:10px;}
  .lp-signal-body{padding:var(--space-7) var(--space-6);}
  .lp-signal-disclaimer--table{padding-inline:var(--space-6);}
  .lp-signal-status{min-width:150px;}
  .lp-signal-facts div{grid-template-columns:1fr;gap:var(--space-2);}
  .lp-performance-kpis .ui-kpi{padding:var(--space-5) var(--space-3);}
  .lp-performance-kpis .ui-kpi__label{font-size:9px;}
  .lp-performance-kpis .ui-kpi__value{font-size:17px;}
  .lp-performance-facts{margin-top:var(--space-4);}
  .lp-chart-legend{gap:var(--space-6);}
  .lp-timeline-event{grid-template-columns:48px minmax(0,1fr);gap:24px;}
  .lp-signal-timeline::before{left:60px;}
  .lp-timeline-event::before{left:53px;}
  .lp-strategy-summary{grid-template-columns:72px minmax(0,1fr);gap:var(--space-5);padding:var(--space-5);}
  .lp-strategy-score{width:64px;height:64px;}
  .lp-strategy-summary p{font-size:11px;}
  .lp-strategy-trigger strong{max-width:60%;}
  .consent-backdrop{padding:0;align-items:flex-end;}
  .consent-panel{border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-left:0;border-right:0;border-bottom:0;}
}

@media (prefers-reduced-motion: reduce){
  .lp-signal-track{transition:none;}
  .lp-signal-viewport{transition:none;}
}

/* --- Track-Record-Schaufenster (B-8) ----------------------------------------------- */
.lp-track{padding:var(--space-12) var(--space-6);max-width:1100px;margin:0 auto;}
.lp-track-legend{display:flex;gap:var(--space-6);justify-content:center;margin-bottom:var(--space-7);color:var(--mut);font-size:13px;}
.lp-track-legend-item{display:inline-flex;align-items:center;gap:var(--space-2);}
.lp-track-swatch{width:18px;height:3px;border-radius:var(--radius-pill);display:inline-block;}
/* Swatch und Linie teilen sich dieselben Tokens (tokens.css) — die Legende kann so nicht von der
   Kurve abweichen. */
.lp-track-swatch--eq{background:var(--track-line-eq);}
.lp-track-swatch--bench{background:var(--track-line-bench);}
.lp-track-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6);}
.lp-track-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xl);padding:var(--space-6);}
.lp-track-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4);}
.lp-track-head h3{margin:0;font-size:16px;color:var(--txt);}
.lp-track-tage{color:var(--mut);font-size:12px;white-space:nowrap;}
.lp-track-chart{width:100%;height:120px;display:block;}
.lp-track-null{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3;}
.lp-track-bench{fill:none;stroke:var(--track-line-bench);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;opacity:.85;}
.lp-track-eq{fill:none;stroke:var(--track-line-eq);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;}
.lp-track-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin:var(--space-5) 0 0;}
.lp-track-metrics div{text-align:center;}
.lp-track-metrics dt{color:var(--mut);font-size:11px;margin-bottom:2px;}
.lp-track-metrics dd{margin:0;color:var(--txt);font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums;}
.lp-track-disclaimer{margin:var(--space-7) auto 0;max-width:760px;text-align:center;color:var(--mut);font-size:12px;line-height:var(--line-relaxed);}

/* --- Header-Schalter (Darstellung Hell/Dunkel + Design Signalkompass/Aktienampel Neu) -----------
   Wiederverwendung der DS-Komponente .ui-switch (components.css). Die Marken-Umschaltung nutzt
   dieselben .marke-name--std/--ampel-Klassen wie der Dashboard-Header (aktienampel.css ist auf der
   Landingpage geladen). Die generische `.lp-copy h1 span{display:block}`-Regel wuerde sonst die
   Sichtbarkeitslogik der Marke aushebeln -> hier per hoeherer Spezifitaet explizit setzen. */
.lp-prefs{display:flex;align-items:center;gap:var(--space-7);}
.lp-pref{font-size:12.5px;color:var(--mut);white-space:nowrap;}
.lp-brand-ampel svg{display:block;}
.lp-brandword .marke-name--std{display:inline;}
.lp-brandword .marke-name--ampel{display:none;}
[data-design="aktienampel"] .lp-brandword .marke-name--std{display:none;}
[data-design="aktienampel"] .lp-brandword .marke-name--ampel{display:inline;}
[data-design="aktienampel"] .lp-brandword .marke-name--std{display:none;}
[data-design="aktienampel"] .lp-brandword .marke-name--ampel{display:inline;}

/* Der neue Aktienampel-Skin trennt Boxen durch Fläche und Abstand statt durch umlaufende Outlines.
   Innere Tabellen-/Zeilentrenner bleiben erhalten, weil sie der Leseführung dienen. */
[data-design="aktienampel"] :is(
  .lp-signal-board,.lp-step,.lp-feature,.lp-price,.lp-compare,.lp-trust-item,.lp-faq-item,
  .lp-track-card,.lp-beta-inner,.lp-final-inner
){border:0;}
/* Der Skin hält Karten global flach. Das Key Visual erhält als bewusste Ausnahme nur einen
   sehr leichten, aus dem vorhandenen Schatten-Token abgeleiteten Tiefenhinweis. */
[data-design="aktienampel"] .lp-signal-viewport{box-shadow:0 4px 6px color-mix(in srgb,var(--shadow-strong) 35%,transparent);}
/* Die beiden CTA-Blocks („Beta-Phase", „Bereit … zu testen?") tragen exakt dieselbe Glasflaeche wie
   die Karten (siehe Mesh-Abschnitt unten) — sonst stuenden sie als Volltoninseln auf dem Mesh.
   Der frueher hier liegende Verlaufs-Schimmer (linear-gradient aus --kpi-header-bg) ist bewusst
   ENTFALLEN: Er stammt aus der Zeit vor dem Mesh-Grund und deckte ihn wieder zu — in Pergament als
   graue Toenung ueber die volle Blockbreite, in Espresso sogar vollflaechig, weil --kpi-header-bg
   dort ein DECKENDER Wert ist (var(--bg)). Die Wolken sind jetzt der Schimmer. */
[data-design="aktienampel"] :is(.lp-beta-inner,.lp-final-inner){
  background-color:var(--mesh-card-bg);
  background-image:none;
  backdrop-filter:blur(var(--mesh-kpi-blur)) saturate(1.3);
  -webkit-backdrop-filter:blur(var(--mesh-kpi-blur)) saturate(1.3);
}
[data-design="aktienampel"] .lp-signal-kpis .ui-kpi{background:var(--kpi-header-bg);}

/* ===== Mesh-Grund auf der Landingpage (Nutzerwunsch 2026-07-15) =====
   Die Landingpage zeigt jetzt denselben Wolken-Grund wie das Dashboard dahinter. Die Ebene selbst
   liegt in aktienampel.css (F-84) an `body::before`; hier geben nur die deckenden Flaechen der
   Seite ihren Volltongrund ab, sonst waere der Mesh verdeckt. Der Grund haengt fix am Viewport —
   die Seite scrollt darueber hinweg, statt den Verlauf mitzuziehen. */
[data-design="aktienampel"] :is(.lp-page,.lp-hero,.lp-band){background:transparent;}
/* Die Hero-Kante trennte zwei Volltonflaechen voneinander. Auf dem durchlaufenden Mesh zerschneidet
   sie die Wolken — und der Skin trennt Zonen ohnehin ueber Flaeche und Abstand statt ueber Linien
   (siehe Karten-Regel oben). */
[data-design="aktienampel"] .lp-hero::after{display:none;}
/* Karten liegen als Glas auf dem Mesh — exakt die Technik der Dashboard-Kacheln (F-84): halb
   deckende Flaeche plus backdrop-filter, damit die Farbwolken darunter erkennbar bleiben, ohne die
   Lesbarkeit zu stoeren. Die Massen-Glasflaechen-Sorge aus dem Dashboard (dort traefe es hunderte
   Tabellenzellen) greift hier nicht: die Landingpage ist statisch und zaehlt gut zwei Dutzend
   Karten. `.lp-compare` bleibt bewusst aussen vor — die Vergleichstabelle setzt mit ihren
   getoenten Gruppen-/Spaltenflaechen einen deckenden Grund voraus. */
[data-design="aktienampel"] :is(
  .lp-signal-board,.lp-step,.lp-feature,.lp-price,.lp-trust-item,.lp-faq-item,.lp-track-card
){
  background:var(--mesh-card-bg);
  backdrop-filter:blur(var(--mesh-kpi-blur)) saturate(1.3);
  -webkit-backdrop-filter:blur(var(--mesh-kpi-blur)) saturate(1.3);
}
@media (max-width: 840px){
  .lp-prefs{gap:var(--space-5);}
}
@media (max-width: 540px){
  /* Logo + beide Schalter + Burger fuellen den Header hier bereits randvoll aus. Der Haupt-CTA
     weicht deshalb ins Burger-Panel (.lp-menu-cta) — der Hero direkt darunter traegt denselben
     Button, waehrend die Darstellungssteuerung im Header eindeutig erreichbar bleibt. */
  .lp-brand-cluster,.lp-nav{flex:none;}
  .lp-nav>.ui-btn{display:none;}
  .lp-menu-cta{display:inline-flex;}
  /* Die Wortmarke bleibt mobil stehen (Signet allein traegt die Marke nicht): der entfallene CTA
     gibt den Platz frei, die gestrafften Abstaende holen den Rest. Damit stehen Logo + Wortmarke +
     beide Schalter + Burger bis 360px ohne Ueberlauf nebeneinander. */
  .lp-header{gap:var(--space-5);}
  .lp-brand-cluster{gap:var(--space-4);}
  .lp-nav{gap:var(--space-4);}
}
@media (max-width: 359px){
  /* Darunter reicht die Breite fuer den laengeren der beiden Schriftzuege („Signalkompass", 140px)
     nicht mehr — hier fuehrt das Signet wieder allein. */
  .lp-brand-cluster .lp-brandword{display:none;}
}