/* =====================================================================
 * Öffentliche Startseite „Margenkalkulator" (AP3, 24.09.2026)
 * Design-System 1:1 von nordstern42.de. Alles unter body.landing, damit
 * die App-Seiten (layouts/application) unberührt bleiben.
 * ===================================================================== */

/* Inter, selbst gehostet (@fontsource-variable/inter 5.3.0, OFL-1.1) —
   kein Google Fonts: Besucher-IPs gehen nicht an Google. Variable Font,
   deckt 400–800 ab. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/inter-latin-wght-normal-1f021a24.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/inter-latin-ext-wght-normal-65edaaef.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body.landing {
  --night: #070a14;
  --night-card: #111729;
  --night-raised: #0c1120;
  --night-deep: #04060d;
  --ink: #f2f5fb;
  --ink-soft: #a6b1c8;
  --ink-muted: #6d7a94;
  --line: #1b2338;
  --line-strong: #2a3550;
  --brand: #1e40ff;
  --brand-soft: #3d5bff;
  --brand-bright: #7d97ff;
  --positive-bright: #34d399;
  --caution: #f59e0b;

  margin: 0;
  background: var(--night);
  color: var(--ink-soft);
  font-family: "Inter", var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.landing h1,
.landing h2,
.landing h3 { color: var(--ink); margin: 0; }
.landing h1 { font-size: 52px; font-weight: 700; letter-spacing: -1.5px; line-height: 1.1; }
.landing h2 { font-size: 34px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 16px; }
.landing h3 { font-size: 19px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; }
.landing p { margin: 0; }
.landing a { color: var(--brand-bright); }
.landing :focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 3px; border-radius: 4px; }

.lp-container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.lp-narrow { max-width: 760px; }
.lp-center { text-align: center; margin-top: 40px; }
.lp-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Buttons ── */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease;
}
.lp-btn:hover { background: var(--brand-soft); }
.lp-btn--sm { padding: 10px 18px; font-size: 15px; }
.lp-btn--lg { padding: 16px 28px; font-size: 17px; }
.lp-btn--ghost { background: transparent; border: 1px solid var(--line-strong); color: var(--ink) !important; }
.lp-btn--ghost:hover { background: var(--night-raised); border-color: var(--brand-bright); }
.lp-link-quiet { color: var(--ink-soft) !important; text-decoration: none; font-weight: 500; }
.lp-link-quiet:hover { color: var(--ink) !important; }

/* ── Header ── */
.lp-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(7, 10, 20, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.lp-header__inner { display: flex; align-items: center; gap: 32px; height: 68px; }
.lp-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.lp-brand__star { display: block; }
.lp-brand__name { color: var(--ink); font-weight: 700; font-size: 20px; letter-spacing: -0.3px; }
.lp-brand__name span { color: var(--brand-bright); }
.lp-nav { display: flex; gap: 28px; margin-left: auto; }
.lp-nav a { color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: 15px; }
.lp-nav a:hover { color: var(--ink); }
.lp-header__actions { display: flex; align-items: center; gap: 20px; }
.lp-menu { display: none; }

/* ── Meldungen (Flash) ── */
.lp-flash-wrap { padding-top: 24px; }
.lp-flash {
  margin: 0 0 8px !important;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--night-card);
  color: var(--ink);
  font-weight: 500;
}
.lp-flash--notice { border-color: rgba(52, 211, 153, .5); }
.lp-flash--alert { border-color: rgba(245, 158, 11, .6); }

/* ── Hero ── */
.lp-hero { position: relative; overflow: hidden; padding: 96px 0 88px; text-align: center; isolation: isolate; }
.lp-hero__inner { position: relative; max-width: 860px; }
/* Nordstern über dem Horizont ganz dezent hinter dem Claim: blass und
   nach unten in den Seitenhintergrund ausgeblendet. */
.lp-hero__bg {
  position: absolute; z-index: -1;
  /* nach unten verschoben: Horizont-Glühen liegt hinter dem Button */
  top: 110px; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 75%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 75%, transparent 100%);
  pointer-events: none;
  user-select: none;
}
.lp-pill {
  display: inline-block;
  margin-bottom: 28px !important;
  padding: 6px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--night-raised);
  color: var(--positive-bright);
  font-size: 14px; font-weight: 600;
}
/* Variante A: h1 = Suchbegriff (klein, blau), Claim = große Zeile. */
.landing .lp-hero__title {
  font-size: 22px; font-weight: 600; letter-spacing: .02em; line-height: 1.3;
  color: var(--brand-bright); margin-bottom: 14px;
}
.lp-hero__claim {
  color: var(--ink); margin: 0 !important;
  font-size: 52px; font-weight: 700; letter-spacing: -1.5px; line-height: 1.1;
}
.lp-lead { font-size: 19px; max-width: 700px; margin: 24px auto 36px !important; }
.lp-micro { margin-top: 16px !important; font-size: 14px; color: var(--ink-muted); }

/* ── Sections ── */
.lp-section { padding: 96px 0; scroll-margin-top: 68px; } /* Anker nicht unter dem festen Header */
.lp-section--deep { background: var(--night-deep); }
.lp-eyebrow {
  margin-bottom: 12px !important;
  color: var(--brand-bright);
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.lp-text { font-size: 17px; margin-bottom: 32px !important; max-width: 640px; }
.lp-center .lp-text { margin-left: auto; margin-right: auto; }

.lp-grid { display: grid; gap: 24px; margin: 40px 0 0; padding: 0; list-style: none; }
.lp-grid--2 { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
.lp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lp-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--night-card);
}
.lp-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--night-raised);
  color: var(--brand-bright);
}
.lp-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-right: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--brand-bright);
  font-size: 13px; font-weight: 700;
  vertical-align: 2px;
}
.lp-badge {
  display: inline-block;
  margin-bottom: 16px !important;
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--night-raised);
  color: var(--brand-bright);
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* Was der Rechner einrechnet */
.lp-costs { margin-top: 0; }
.lp-checklist { list-style: none; margin: 12px 0 0; padding: 0; }
.lp-checklist li { position: relative; padding: 6px 0 6px 30px; }
.lp-checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 6px;
  color: var(--positive-bright); font-weight: 700;
}
.lp-costs__excluded { margin-top: 28px !important; max-width: 760px; font-size: 16px; }
.lp-costs__excluded strong { color: var(--ink); }

.lp-card__link { margin-top: 14px !important; font-size: 15px; }
.lp-card__link a { font-weight: 600; text-decoration: none; }
.lp-card__link a:hover { text-decoration: underline; }

/* ── Tool + Screenshot ── */
.lp-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.lp-shot { margin: 0; text-align: center; }
.lp-shot__card {
  max-width: 380px; margin: 0 auto;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .04);
}
.lp-shot__card img { display: block; width: 100%; height: auto; border-radius: 10px; }
.lp-shot figcaption { margin-top: 14px; font-size: 14px; color: var(--ink-muted); }

/* ── Hinweis „Wichtig" ── */
.lp-note {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 8px 0 32px;
  padding: 20px 22px;
  border: 1px solid rgba(245, 158, 11, .45);
  border-radius: 16px;
  background: rgba(245, 158, 11, .08);
  color: var(--ink-soft);
}
.lp-note svg { flex: none; color: var(--caution); margin-top: 2px; }
.lp-note__title { color: var(--caution); font-weight: 700; margin-bottom: 4px !important; }
.lp-note strong { color: var(--ink); }

/* ── Closing ── */
.lp-closing { background: radial-gradient(ellipse at top, rgba(30, 64, 255, .18), transparent 60%); }

/* ── FAQ ── */
.lp-faq details {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--night-card);
  margin-bottom: 12px;
}
.lp-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 24px;
  color: var(--ink); font-weight: 600; cursor: pointer;
  list-style: none;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: var(--brand-bright); font-size: 22px; font-weight: 400; }
.lp-faq details[open] summary::after { content: "−"; }
.lp-faq details p { padding: 0 24px 20px; }

/* ── Platzhalter (vor Launch ersetzen) — absichtlich auffällig ── */
.lp-placeholder {
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(245, 158, 11, .2);
  color: var(--caution);
  font-weight: 600;
}

/* ── Footer ── */
.lp-footer { padding: 48px 0 32px; border-top: 1px solid var(--line); background: var(--night); }
.lp-footer__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.lp-footer__brand .lp-brand__name { font-size: 17px; }
.lp-footer__brand p { margin-top: 8px !important; font-size: 14px; color: var(--ink-muted); }
.lp-footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: 14px; }
.lp-footer__links a,
.lp-footer__button { color: var(--ink-soft); text-decoration: none; }
.lp-footer__links a:hover,
.lp-footer__button:hover { color: var(--ink); }
.lp-footer__button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.lp-footer__legal { margin-top: 32px !important; font-size: 13px; color: var(--ink-muted); }

/* ── Mobil ── */
@media (max-width: 900px) {
  .lp-split { grid-template-columns: 1fr; gap: 48px; }
  .lp-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .landing h1 { font-size: 36px; letter-spacing: -1px; }
  .landing .lp-hero__title { font-size: 18px; letter-spacing: .02em; }
  .lp-hero__claim { font-size: 36px; letter-spacing: -1px; }
  .landing h2 { font-size: 27px; }
  .lp-hero { padding: 64px 0 56px; }
  .lp-hero__bg { top: 180px; opacity: .4; }
  .lp-lead { font-size: 17px; }
  .lp-section { padding: 64px 0; }
  .lp-grid--2 { grid-template-columns: 1fr; }
  .lp-nav, .lp-header__actions { display: none; }
  .lp-header__inner { justify-content: space-between; }

  .lp-menu { display: block; }
  .lp-menu summary { list-style: none; cursor: pointer; color: var(--ink); padding: 8px; }
  .lp-menu summary::-webkit-details-marker { display: none; }
  .lp-menu__panel {
    position: absolute; left: 0; right: 0; top: 68px;
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px 24px 24px;
    background: var(--night);
    border-bottom: 1px solid var(--line);
  }
  .lp-menu__panel a:not(.lp-btn) { padding: 10px 0; color: var(--ink); text-decoration: none; font-weight: 500; }
  .lp-menu__panel .lp-btn { margin-top: 8px; }
  .lp-btn--lg { width: 100%; }
  .lp-footer__inner { flex-direction: column; }
}