/* 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(--color-text-primary);-webkit-font-smoothing:antialiased;padding:0}
  html{scroll-behavior:smooth}
  .lp-sec{scroll-margin-top:calc(var(--lp-header-h,61px) + var(--lp-kapnav-h,0px) + var(--spacing-3))}   /* Anker landen UNTER dem Sticky-Header, nicht dahinter */

  /* Skip-Link — Tastatur-Einstieg, springt den Header über. Ausserhalb des
     Viewports bis :focus, dann oben links sichtbar über dem Header. */
  .lp-skip{position:absolute;left:-999px;top:var(--spacing-2)}
  .lp-skip:focus{left:var(--spacing-2);background:var(--color-bg-card);color:var(--color-text-primary);padding:var(--spacing-2) var(--spacing-3);z-index:50}

  /* 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)}
  /* Vier Bereiche + Login + Schalter + Knopf brauchen einzeilig ~1000 px: enge
     Abstaende, kein Umbruch in den Links; unter 1100 px uebernimmt das Burger-Menue. */
  .lp-nav{display:flex;gap:var(--spacing-4);margin-left:auto}
  .lp-nav a{white-space:nowrap;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-3);margin-left:var(--spacing-4)}
  .lp-header__actions a{white-space:nowrap}
  .lp-login{font-size:var(--font-size-label);font-weight:var(--font-weight-medium);color:var(--color-text-accent);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);overflow-y:auto;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 */
  /* Kapitel-Leiste — klebt unter dem Kopf, Ankerlinks auf die Kapitel, Scroll-Spy
     setzt is-active und schiebt den Indikator (Vorbild: Apple Local Nav; Muster im Haus:
     .help-topnav). Auf jeder Breite sichtbar, schmal: waagerecht scrollbar. */
  .lp-kapnav{position:sticky;top:var(--lp-header-h,61px);z-index:39;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-kapnav__list{position:relative;list-style:none;margin:0 auto;padding:0 var(--spacing-12);max-width:var(--landing-max-width);display:flex;align-items:stretch;gap:var(--spacing-4);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .lp-kapnav.is-scrollable .lp-kapnav__list{mask-image:linear-gradient(to right,transparent,#000 var(--spacing-8),#000 calc(100% - var(--spacing-8)),transparent)}
  .lp-kapnav__list::-webkit-scrollbar{display:none}
  .lp-kapnav__item{flex:0 0 auto;display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3) 0;font-size:var(--font-size-hint);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);text-decoration:none;white-space:nowrap;transition:color var(--lp-dur-fast) var(--lp-ease-out)}
  .lp-kapnav__item:hover,.lp-kapnav__item.is-active{color:var(--color-text-primary)}
  .lp-kapnav__item:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:var(--radius-sm)}
  .lp-kapnav__nr{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--color-border-warm);color:var(--color-text-secondary);font-family:var(--mono);font-size:10px;font-weight:var(--font-weight-semibold);transition:background var(--lp-dur-fast) var(--lp-ease-out),color var(--lp-dur-fast) var(--lp-ease-out)}
  .lp-kapnav__item.is-active .lp-kapnav__nr{background:var(--color-primary-edge);color:var(--color-on-accent)}
  .lp-kapnav__ind{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--color-primary);transition:transform var(--lp-dur-base) var(--lp-ease-out),width var(--lp-dur-base) var(--lp-ease-out)}
  @media (prefers-reduced-motion:reduce){.lp-kapnav__ind,.lp-kapnav__item,.lp-kapnav__nr{transition:none}}
  @media (max-width:860px){.lp-kapnav__list{padding-inline:var(--spacing-5);gap:var(--spacing-4)}}

  /* 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:1099px){
    .lp-nav,.lp-header__actions{display:none}
    .lp-burger{display:flex}
  }
  @media (max-width:820px){
    .lp-page,.lp-header__inner,.lp-footer__inner{padding-inline:var(--spacing-5)}
    .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-kapnav{background:color-mix(in srgb,var(--color-bg-app) 86%,transparent);border-bottom-color:var(--color-border)}

  /* ── Motion: Sektionen blenden sich beim Scrollen ein (Progressive Enhancement).
     Versteckt NUR mit .lp-reveal — die setzt landing-nav.js erst, wenn der Beobachter
     steht. Ohne JS oder nach einem Skript-Fehler bleibt nichts unsichtbar. Der Hero
     (#start) trägt seine eigene Choreografie und ist ausgenommen. */
  @media (prefers-reduced-motion: no-preference){
    .lp-reveal .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-reveal .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}
  }

/* Exponat-Belege (Hero + Karussell) öffnen die Lightbox — ohne zoom-in-Cursor
   existiert die Funktion für den Besucher nicht. */
.stage .beleg{cursor:zoom-in}

/* Stempel unten rechts — dieselbe Wirkung wie .app-stamp in shell.css: Multiply wie
   Tinte auf Papier, hinter dem Inhalt; auf dem Handy kein Platz fürs Eck-Wasserzeichen. */
.lp-stamp{position:fixed;right:var(--spacing-8);bottom:var(--spacing-6);width:210px;height:auto;z-index:-1;
  opacity:.82;pointer-events:none;user-select:none;filter:url(#lp-stamp-ink);mix-blend-mode:multiply;transform:rotate(16deg)}
[data-theme="dark"] .lp-stamp{mix-blend-mode:screen;opacity:.3}
@media (max-width:768px){.lp-stamp{display:none}}