/* landing-chrome.css — Seiten-Gerüst der Landing (Header/Nav/Footer/Grid/Reset).
   Quelle: build-landing.mjs BASE. Nur von landing.html geladen (nicht von Legal-Seiten). */

:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");}
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:var(--font);background:var(--paper-50);background-image:var(--grain);color:var(--ink-800);-webkit-font-smoothing:antialiased;padding:0}
  html{scroll-behavior:smooth}
  .lp-sec{scroll-margin-top:72px}   /* Anker landen UNTER dem Sticky-Header, nicht dahinter */

  /* Header — sticky */
  .lp-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper-50) 88%,transparent);backdrop-filter:blur(8px);border-bottom:var(--border-width-1) solid var(--paper-300)}
  .lp-header__inner{max-width:var(--landing-max-width);margin-inline:auto;padding:var(--spacing-3) var(--spacing-12);display:flex;align-items:center}
  .lp-brand{display:inline-flex;align-items:center;gap:var(--spacing-2);text-decoration:none}
  .lp-brand__wm{font-family:var(--font);font-weight:var(--font-weight-bold);font-size:var(--font-size-h3);color:var(--ink-800);letter-spacing:-.01em}
  .lp-brand__wm .accent{color:var(--terracotta-600)}
  .lp-beta{font-family:var(--mono);font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--terracotta-600);background:var(--terracotta-50);border-radius:var(--radius-pill);padding:2px 8px;margin-left:var(--spacing-1)}
  .lp-nav{display:flex;gap:var(--spacing-6);margin-left:auto}
  .lp-nav a{font-size:var(--font-size-label);font-weight:var(--font-weight-medium);color:var(--ink-700);text-decoration:none;transition:color var(--lp-dur-fast) var(--lp-ease-out)}
  .lp-nav a:hover{color:var(--terracotta-600)}
  .lp-header__actions{display:flex;align-items:center;gap:var(--spacing-5);margin-left:var(--spacing-8)}
  .lp-login{font-size:var(--font-size-label);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);text-decoration:none;transition:color var(--lp-dur-fast) var(--lp-ease-out)}
  .lp-login:hover{color:var(--color-primary)}
  /* Theme-Toggle (☀/☾) — verdrahtet sich über das #lp-theme-toggle-Script in landing_base.
     Eigene Farben dark-fähig (Semantic-Tokens), sitzt damit in beiden Modi. */
  .lp-theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-lg);border:none;background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:background var(--lp-dur-fast) var(--lp-ease-out),color var(--lp-dur-fast) var(--lp-ease-out);padding:0}
  .lp-theme-toggle:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}
  .lp-theme-toggle-icon{font-size:16px;line-height:1}
  .lp-header .btn-primary{font-size:var(--font-size-label);padding:8px 16px}

  /* Seiten-Gerüst — eine linke Achse, Haarlinien-Trenner, Token-Rhythmus */
  .lp-page{max-width:var(--landing-max-width);margin-inline:auto;padding-inline:var(--spacing-12)}
  .lp-page > section{padding-block:var(--spacing-16)}            /* mehr Luft zwischen Sektionen */
  .lp-page > section:first-child{padding-top:var(--spacing-12)}  /* unter dem Header */
  /* Sektions-Wrapper füllen die Seite linksbündig (eigene max-width/Zentrierung/Padding aus) */
  .lp-page .hero,.lp-page .section{max-width:none;margin-inline:0}
  .lp-page .mvergleich,.lp-page .beispiele{max-width:none;margin-inline:0;padding:0}
  .lp-page .hero .stmt-h{max-width:none}

  /* Footer */
  .lp-footer{border-top:var(--border-width-1) solid var(--paper-300);background:var(--paper-100)}
  .lp-footer__inner{max-width:var(--landing-max-width);margin-inline:auto;padding:var(--spacing-8) var(--spacing-12);display:flex;align-items:center;gap:var(--spacing-6);flex-wrap:wrap}
  .lp-footer__brand{display:inline-flex;align-items:center;gap:var(--spacing-2)}
  .lp-footer__wm{font-family:var(--font);font-weight:var(--font-weight-bold);font-size:var(--font-size-label);color:var(--ink-800)}
  .lp-footer__wm .accent{color:var(--terracotta-600)}
  .lp-footer__links{display:flex;gap:var(--spacing-5);margin-left:auto;flex-wrap:wrap}
  .lp-footer__links a{font-size:var(--font-size-label);color:var(--ink-700);text-decoration:none;transition:color var(--lp-dur-fast) var(--lp-ease-out)}
  .lp-footer__links a:hover{color:var(--terracotta-600)}
  .lp-footer__meta{font-family:var(--mono);font-size:var(--font-size-xs);color:var(--color-text-muted)}

  /* Nav-Mechanik */
  .lp-nav a.is-active{color:var(--terracotta-600)}
  .lp-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;will-change:transform;background:var(--terracotta-600);z-index:50;transition:transform var(--lp-dur-fast) linear}
  .lp-burger{display:none;margin-left:auto;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:9px;border:none;background:none;cursor:pointer}
  .lp-burger span{display:block;height:2px;border-radius:2px;background:var(--ink-800);transition:transform var(--lp-dur-base) var(--lp-ease-out),opacity var(--lp-dur-base) var(--lp-ease-out)}
  .lp-menu{position:fixed;inset:0;z-index:60;background:var(--paper-50);background-image:var(--grain);display:flex;flex-direction:column;gap:var(--spacing-5);padding:var(--spacing-16) var(--spacing-8);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity var(--lp-dur-base) var(--lp-ease-out),transform var(--lp-dur-base) var(--lp-ease-out),visibility var(--lp-dur-base)}
  .lp-menu.is-open{opacity:1;transform:none;visibility:visible}
  .lp-menu__close{position:absolute;top:var(--spacing-5);right:var(--spacing-6);width:42px;height:42px;border:none;background:none;font-size:28px;line-height:1;color:var(--ink-800);cursor:pointer}
  .lp-menu a:not(.btn-primary){font-size:var(--font-size-h2);font-weight:var(--font-weight-semibold);color:var(--ink-800);text-decoration:none}
  .lp-menu a.is-active:not(.btn-primary){color:var(--terracotta-600)}
  .lp-menu__sep{height:1px;background:var(--paper-300);margin:var(--spacing-2) 0}
  .lp-menu .btn-primary{align-self:flex-start;font-size:var(--font-size-body)}
  .lp-top{position:fixed;right:var(--spacing-6);bottom:var(--spacing-6);width:42px;height:42px;border-radius:50%;border:var(--border-width-1) solid var(--paper-300);background:var(--paper-50);color:var(--ink-700);font-size:18px;line-height:1;cursor:pointer;z-index:45;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity var(--lp-dur-base) var(--lp-ease-out),transform var(--lp-dur-base) var(--lp-ease-out);box-shadow:0 4px 14px -4px rgba(19,17,15,.25)}
  .lp-top.is-visible{opacity:1;transform:none;pointer-events:auto}
  .lp-top:hover{color:var(--terracotta-600)}

  /* Dot-Nav — vertikale Sektionsanzeige rechts im Margin */
  /* Dot-Nav — label [text] · [dot] immer sichtbar, text aus .eyebrow via JS */
  .lp-dotnav{position:fixed;right:var(--spacing-6);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:var(--spacing-4);z-index:35;align-items:flex-end}
  @media (max-width:1419px){.lp-dotnav{display:none}}
  .lp-dotnav__item{display:flex;align-items:center;gap:8px;text-decoration:none}
  .lp-dotnav__label{font-size:var(--font-size-label);font-weight:var(--font-weight-medium);color:var(--ink-600);opacity:.55;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis;line-height:1.35;padding-bottom:1px;transition:opacity var(--lp-dur-base) var(--lp-ease-out),color var(--lp-dur-base) var(--lp-ease-out);text-align:right}
  .lp-dotnav__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--ink-400);opacity:.35;transition:opacity var(--lp-dur-base) var(--lp-ease-out),transform var(--lp-dur-base) var(--lp-ease-spring),background var(--lp-dur-base) var(--lp-ease-out)}
  .lp-dotnav__item:hover .lp-dotnav__label{opacity:.8}
  .lp-dotnav__item:hover .lp-dotnav__dot{opacity:.7}
  .lp-dotnav__item.is-active .lp-dotnav__label{opacity:1;color:var(--ink-900);font-weight:var(--font-weight-semibold)}
  .lp-dotnav__item.is-active .lp-dotnav__dot{background:var(--terracotta-600);opacity:1;transform:scale(1.5)}

  /* Beleg-Lightbox — Seiten-Overlay, geteilt von Hero + Beispielen */
  .lightbox{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(19,17,15,.74);padding:var(--spacing-10);cursor:zoom-out}
  .lightbox[hidden]{display:none}
  .lightbox img{max-width:min(720px,92vw);max-height:90vh;border-radius:var(--radius-sm);box-shadow:0 24px 70px -18px rgba(0,0,0,.55);background:var(--white)}
  .lightbox__close{position:absolute;top:var(--spacing-5);right:var(--spacing-6);width:42px;height:42px;border-radius:50%;border:none;background:var(--paper-50);color:var(--ink-800);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 4px 14px -4px rgba(19,17,15,.3)}

  @media (max-width:820px){
    .lp-page,.lp-header__inner,.lp-footer__inner{padding-inline:var(--spacing-5)}
    .lp-nav,.lp-header__actions{display:none}
    .lp-burger{display:flex}
    .lp-footer__inner{flex-direction:column;align-items:flex-start;gap:var(--spacing-3)}
    .lp-footer__links{margin-left:0}
    .lp-page > section{padding-block:var(--spacing-10)}          /* Mobil: weniger Sektions-Luft → weniger Scrollen */
    .lp-page > section:first-child{padding-top:var(--spacing-8)}
  }

  /* ── Dark-Mode — Landing-Chrome auf warmes App-Anthrazit. Light bleibt unberührt;
     hier nur die Flächen/Akzente, die in der Landing fix auf Palette-Stufen liegen. ── */
  [data-theme="dark"] body{background:var(--color-bg-app);background-image:none}
  [data-theme="dark"] .lp-header{background:color-mix(in srgb,var(--color-bg-app) 86%,transparent);border-bottom-color:var(--color-border)}
  [data-theme="dark"] .lp-brand__wm,[data-theme="dark"] .lp-footer__wm,[data-theme="dark"] .lp-menu a:not(.btn-primary),[data-theme="dark"] .lp-menu__close{color:var(--color-text-primary)}
  [data-theme="dark"] .lp-burger span{background:var(--color-text-primary)}
  [data-theme="dark"] .lp-nav a,[data-theme="dark"] .lp-footer__links a{color:var(--color-text-secondary)}
  [data-theme="dark"] .lp-brand__wm .accent,[data-theme="dark"] .lp-footer__wm .accent,[data-theme="dark"] .lp-nav a:hover,[data-theme="dark"] .lp-nav a.is-active,[data-theme="dark"] .lp-footer__links a:hover,[data-theme="dark"] .lp-menu a.is-active:not(.btn-primary),[data-theme="dark"] .lp-top:hover{color:var(--color-text-accent)}
  [data-theme="dark"] .lp-progress{background:var(--color-primary)}
  [data-theme="dark"] .lp-beta{color:var(--color-text-accent);background:var(--color-primary-soft)}
  [data-theme="dark"] .lp-footer{background:var(--color-bg-card);border-top-color:var(--color-border)}
  [data-theme="dark"] .lp-footer__meta{color:var(--color-text-muted)}
  [data-theme="dark"] .lp-menu{background:var(--color-bg-app);background-image:none}
  [data-theme="dark"] .lp-menu__sep{background:var(--color-border)}
  [data-theme="dark"] .lp-top{background:var(--color-bg-card);border-color:var(--color-border);color:var(--color-text-secondary)}
  [data-theme="dark"] .lp-dotnav__label{color:var(--color-text-secondary)}
  [data-theme="dark"] .lp-dotnav__item.is-active .lp-dotnav__label{color:var(--color-text-primary)}
  [data-theme="dark"] .lp-dotnav__dot{background:var(--color-text-tertiary)}
  [data-theme="dark"] .lp-dotnav__item.is-active .lp-dotnav__dot{background:var(--color-primary)}

  /* ── Motion: Sektionen blenden sich beim Scrollen ein (Progressive Enhancement).
     Versteckt NUR mit JS (.lp-js) und ohne reduced-motion — ohne JS bleibt nichts
     unsichtbar. Der Hero (#start) trägt seine eigene Choreografie und ist ausgenommen. */
  @media (prefers-reduced-motion: no-preference){
    .lp-js .lp-page > .lp-sec:not([id="start"]){opacity:0;transform:translateY(18px);transition:opacity var(--lp-dur-slow) var(--lp-ease-out),transform var(--lp-dur-slow) var(--lp-ease-out)}
    .lp-js .lp-page > .lp-sec.is-revealed{opacity:1;transform:none}
    /* Schlüsselwort-Unterstrich zeichnet sich links→rechts ein (landing-nav.js setzt .is-drawn). */
    .lp-js .key svg{clip-path:inset(0 100% 0 0);transition:clip-path var(--lp-dur-slow) var(--lp-ease-out)}
    .lp-js .key.is-drawn svg{clip-path:inset(0 0 0 0)}
  }

  /* Reduced-Motion: globaler Aus-Schalter für die ganze Landing. Robuster als die
     punktuelle JS-Prüfung — neutralisiert auch Hover-Lifts, Dots, Karussell. */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  }