/* =========================================================================
   GAV-Rapport — Landingpage «Kostenlose Excel-Vorlage» (/vorlage)
   -------------------------------------------------------------------------
   ENTWICKLER-HINWEIS — TOKEN-MAPPING
   Alle Werte sind als benannte CSS-Variablen (Design-Tokens) definiert und
   im :root-Block unten gruppiert. Beim Integrieren ins bestehende Design-
   System bitte NUR diese Variablen auf die vorhandenen System-Tokens mappen
   — die Komponenten (.lp-*) referenzieren ausschliesslich diese Variablen.
   Die Werte entsprechen 1:1 dem bestehenden gav-rapport.ch (Archivo +
   Space Mono, Terracotta-Akzent, warmes Off-White). Namensschema: BEM-artig
   mit Prefix .lp- (landing page), damit keine Kollision mit der Hauptseite.
   ========================================================================= */

:root {
  /* ---- FARBEN · Flächen ------------------------------------------------ */
  --lp-color-bg:            oklch(0.987 0.004 75);   /* Seiten-Hintergrund (paper) */
  --lp-color-surface:       oklch(1 0 0);            /* Karten, Formular */
  --lp-color-surface-2:     oklch(0.972 0.006 72);   /* alternierende Sektion */
  --lp-color-surface-3:     oklch(0.955 0.008 70);   /* dezente Flächen, Chips */

  /* ---- FARBEN · Text --------------------------------------------------- */
  --lp-color-ink:           oklch(0.205 0.012 60);   /* Primärtext */
  --lp-color-ink-soft:      oklch(0.46 0.012 60);    /* Fliesstext sekundär */
  --lp-color-ink-faint:     oklch(0.60 0.010 60);    /* Labels, Meta */

  /* ---- FARBEN · Linien ------------------------------------------------- */
  --lp-color-line:          oklch(0.90 0.006 72);    /* Standard-Rahmen */
  --lp-color-line-strong:   oklch(0.84 0.008 70);    /* Inputs, betonte Rahmen */

  /* ---- FARBEN · Akzent (Bau-Terracotta) -------------------------------- */
  --lp-color-accent:        oklch(0.605 0.165 47);   /* Primär-CTA, Reisezeit */
  --lp-color-accent-hover:  oklch(0.545 0.155 44);   /* CTA Hover */
  --lp-color-accent-weak:   oklch(0.965 0.020 60);   /* heller Akzent-Grund */
  --lp-color-accent-ink:    oklch(0.40 0.13 42);     /* Text auf hellem Akzent */

  /* ---- FARBEN · Status ------------------------------------------------- */
  --lp-color-success:       oklch(0.55 0.095 150);
  --lp-color-success-weak:  oklch(0.95 0.035 150);
  --lp-color-work:          oklch(0.205 0.012 60);   /* Arbeitszeit = ink */
  --lp-color-error:         oklch(0.55 0.15 28);
  --lp-color-error-weak:    oklch(0.96 0.03 30);
  --lp-color-focus-ring:    oklch(0.605 0.165 47 / 0.28);

  /* ---- TYPOGRAFIE ------------------------------------------------------ */
  --lp-font-sans:  'Archivo', system-ui, -apple-system, sans-serif;
  --lp-font-mono:  'Space Mono', ui-monospace, monospace;

  /* Schriftgrössen — Fliesstext bewusst gross (Zielgruppe 40–60, abends am Handy) */
  --lp-text-xs:    13px;
  --lp-text-sm:    15px;
  --lp-text-base:  18px;   /* Grund-Fliesstext ≥ 17–18px */
  --lp-text-lg:    20px;
  --lp-text-xl:    24px;
  --lp-text-2xl:   30px;
  --lp-text-3xl:   clamp(30px, 6vw, 46px);  /* H1 */

  --lp-leading-tight: 1.12;
  --lp-leading-body:  1.6;
  --lp-weight-normal: 400;
  --lp-weight-medium: 500;
  --lp-weight-bold:   700;
  --lp-weight-black:  800;

  /* ---- ABSTÄNDE (4px-Raster) ------------------------------------------ */
  --lp-space-1:  4px;
  --lp-space-2:  8px;
  --lp-space-3:  12px;
  --lp-space-4:  16px;
  --lp-space-5:  20px;
  --lp-space-6:  24px;
  --lp-space-8:  32px;
  --lp-space-10: 40px;
  --lp-space-12: 48px;
  --lp-space-16: 64px;
  --lp-space-20: 80px;

  /* ---- RADIEN ---------------------------------------------------------- */
  --lp-radius-sm:   10px;
  --lp-radius-md:   14px;
  --lp-radius-lg:   20px;
  --lp-radius-pill: 100px;

  /* ---- SCHATTEN -------------------------------------------------------- */
  --lp-shadow-sm: 0 1px 2px oklch(0.2 0.01 60 / 0.06), 0 2px 6px oklch(0.2 0.01 60 / 0.05);
  --lp-shadow-md: 0 2px 8px oklch(0.2 0.01 60 / 0.07), 0 14px 40px oklch(0.2 0.01 60 / 0.10);
  --lp-shadow-lg: 0 12px 30px oklch(0.2 0.01 60 / 0.12), 0 40px 80px oklch(0.2 0.01 60 / 0.16);

  /* ---- LAYOUT ---------------------------------------------------------- */
  --lp-container-max: 1120px;
  --lp-container-pad: 20px;             /* mobil */
  --lp-touch-min:     52px;             /* Mindest-Touch-Ziel (gross, Handschuhe) */
  --lp-hit:           48px;             /* Buttons/Inputs Höhe mobil */
}

/* =========================================================================
   RESET / BASIS
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--lp-font-sans);
  font-size: var(--lp-text-base);
  line-height: var(--lp-leading-body);
  color: var(--lp-color-ink);
  background: var(--lp-color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { line-height: var(--lp-leading-tight); letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--lp-color-accent); color: #fff; }

.lp-container { width: 100%; max-width: var(--lp-container-max); margin-inline: auto; padding-inline: var(--lp-container-pad); }

.lp-eyebrow {
  display: inline-block;
  font-family: var(--lp-font-mono);
  font-size: var(--lp-text-xs);
  font-weight: var(--lp-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-color-accent-ink);
}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--lp-space-2);
  min-height: var(--lp-hit);
  padding: 14px 22px;
  font-family: var(--lp-font-sans);
  font-size: var(--lp-text-lg);
  font-weight: var(--lp-weight-black);
  letter-spacing: -0.01em;
  border: 2px solid transparent;
  border-radius: var(--lp-radius-pill);
  cursor: pointer;
  text-align: center;
  transition: background .16s ease, border-color .16s ease, box-shadow .2s ease, transform .1s ease;
}
.lp-btn:active { transform: translateY(1px); }
.lp-btn svg { width: 20px; height: 20px; flex: none; }

.lp-btn--primary { width: 100%; background: var(--lp-color-accent); color: #fff; box-shadow: var(--lp-shadow-sm); }
.lp-btn--primary:hover { background: var(--lp-color-accent-hover); box-shadow: var(--lp-shadow-md); }
.lp-btn--primary:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--lp-color-focus-ring); }

.lp-btn--ghost { background: var(--lp-color-surface); color: var(--lp-color-ink); border-color: var(--lp-color-line-strong); }
.lp-btn--ghost:hover { border-color: var(--lp-color-ink); background: var(--lp-color-surface-2); }

/* Button-Ladezustand */
.lp-btn__spinner { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid oklch(1 0 0 / 0.4); border-top-color: #fff; animation: lp-spin .7s linear infinite; }
.lp-btn.is-loading { pointer-events: none; }
.lp-btn.is-loading .lp-btn__label { opacity: 0.6; }
.lp-btn.is-loading .lp-btn__spinner { display: inline-block; }
@keyframes lp-spin { to { transform: rotate(360deg); } }

/* =========================================================================
   HEADER
   ========================================================================= */
.lp-header { background: var(--lp-color-bg); border-bottom: 1px solid var(--lp-color-line); }
.lp-header__inner { display: flex; align-items: center; min-height: 68px; }
.lp-brand { display: flex; align-items: center; gap: var(--lp-space-3); text-decoration: none; }
.lp-brand__mark { width: 36px; height: 36px; border-radius: 9px; flex: none; background: var(--lp-color-ink); color: var(--lp-color-bg); display: grid; place-items: center; position: relative; overflow: hidden; }
.lp-brand__mark::after { content: ""; position: absolute; inset: 0; top: 58%; background: var(--lp-color-accent); }
.lp-brand__mark span { position: relative; z-index: 1; font-weight: var(--lp-weight-black); font-size: 19px; }
.lp-brand__text { display: flex; flex-direction: column; line-height: 1.05; gap: 2px; }
.lp-brand__name { font-weight: var(--lp-weight-black); font-size: var(--lp-text-lg); letter-spacing: -0.02em; }
.lp-brand__sub { font-family: var(--lp-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-color-ink-faint); }

/* =========================================================================
   HERO
   ========================================================================= */
.lp-hero { padding: var(--lp-space-10) 0 var(--lp-space-12); }
.lp-hero__grid { display: block; }
.lp-hero__copy { max-width: 620px; }
.lp-hero__title { font-size: var(--lp-text-3xl); margin: var(--lp-space-4) 0 var(--lp-space-4); }
.lp-hero__subline { font-size: var(--lp-text-lg); color: var(--lp-color-ink-soft); margin-bottom: var(--lp-space-6); }

/* Excel-Mockup Sichtbarkeit: mobil inline, Desktop aside */
.lp-hero__visual--inline { display: block; margin-bottom: var(--lp-space-6); }
.lp-hero__visual--aside { display: none; }

/* =========================================================================
   EXCEL-MOCKUP
   ========================================================================= */
.lp-excel {
  background: var(--lp-color-surface);
  border: 1px solid var(--lp-color-line);
  border-radius: var(--lp-radius-md);
  box-shadow: var(--lp-shadow-md);
  overflow: hidden;
}
.lp-excel__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--lp-color-ink); border-bottom: 1px solid var(--lp-color-line); }
.lp-excel__dot { width: 10px; height: 10px; border-radius: 50%; background: oklch(1 0 0 / 0.25); flex: none; }
.lp-excel__dot:nth-child(1) { background: var(--lp-color-accent); }
.lp-excel__dot:nth-child(2) { background: oklch(1 0 0 / 0.35); }
.lp-excel__dot:nth-child(3) { background: oklch(1 0 0 / 0.25); }
.lp-excel__file { font-family: var(--lp-font-mono); font-size: var(--lp-text-xs); color: oklch(1 0 0 / 0.7); margin-left: 6px; }
.lp-excel__sheet { padding: var(--lp-space-5); }
.lp-excel__title { margin-bottom: var(--lp-space-4); }
.lp-excel__title strong { display: block; font-size: var(--lp-text-xl); letter-spacing: -0.02em; }
.lp-excel__title span { font-family: var(--lp-font-mono); font-size: var(--lp-text-xs); color: var(--lp-color-ink-faint); }

.lp-excel__table { width: 100%; border-collapse: collapse; }
.lp-excel__table th, .lp-excel__table td { padding: 10px 8px; text-align: right; font-size: var(--lp-text-sm); border-bottom: 1px solid var(--lp-color-line); font-variant-numeric: tabular-nums; }
.lp-excel__table thead tr { background: var(--lp-color-accent-weak); }
.lp-excel__table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lp-color-ink-soft); font-weight: var(--lp-weight-bold); }
.lp-excel__rowhead { text-align: left !important; font-weight: var(--lp-weight-bold); color: var(--lp-color-ink); }
.lp-excel__table .is-travel { color: var(--lp-color-accent); font-weight: var(--lp-weight-bold); }
.lp-excel__table .is-work { color: var(--lp-color-work); font-weight: var(--lp-weight-bold); }
.lp-excel__table thead th.is-travel { color: var(--lp-color-accent); }
.lp-excel__table .mono { font-family: var(--lp-font-mono); }
.lp-excel__table tfoot td { border-bottom: none; border-top: 2px solid var(--lp-color-line-strong); font-weight: var(--lp-weight-black); padding-top: 12px; }
.lp-excel__note { margin-top: var(--lp-space-4); padding: 10px 12px; background: var(--lp-color-accent-weak); border-radius: var(--lp-radius-sm); font-size: var(--lp-text-xs); font-weight: var(--lp-weight-bold); color: var(--lp-color-accent-ink); text-align: center; }

/* =========================================================================
   FORMULAR
   ========================================================================= */
.lp-form-card {
  background: var(--lp-color-surface);
  border: 1px solid var(--lp-color-line);
  border-radius: var(--lp-radius-lg);
  box-shadow: var(--lp-shadow-md);
  padding: var(--lp-space-6);
}
.lp-form { display: flex; flex-direction: column; gap: var(--lp-space-4); }
.lp-field { display: flex; flex-direction: column; gap: var(--lp-space-2); }
.lp-label { font-size: var(--lp-text-sm); font-weight: var(--lp-weight-bold); color: var(--lp-color-ink); }
.lp-label__opt { font-weight: var(--lp-weight-normal); color: var(--lp-color-ink-faint); }
.lp-input {
  width: 100%;
  min-height: var(--lp-hit);
  padding: 13px 16px;
  font-family: var(--lp-font-sans);
  font-size: var(--lp-text-base);
  color: var(--lp-color-ink);
  background: var(--lp-color-surface);
  border: 2px solid var(--lp-color-line-strong);
  border-radius: var(--lp-radius-md);
  transition: border-color .15s ease, box-shadow .2s ease;
}
.lp-input::placeholder { color: var(--lp-color-ink-faint); }
.lp-input:focus { outline: none; border-color: var(--lp-color-accent); box-shadow: 0 0 0 4px var(--lp-color-focus-ring); }
.lp-input.is-invalid { border-color: var(--lp-color-error); background: var(--lp-color-error-weak); }

.lp-error-msg { font-size: var(--lp-text-sm); font-weight: var(--lp-weight-medium); color: var(--lp-color-error); }

/* Checkbox */
.lp-checkbox { display: flex; align-items: flex-start; gap: var(--lp-space-3); cursor: pointer; padding: var(--lp-space-1) 0; }
.lp-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.lp-checkbox__box { width: 26px; height: 26px; flex: none; border: 2px solid var(--lp-color-line-strong); border-radius: 7px; background: var(--lp-color-surface); display: grid; place-items: center; transition: background .15s, border-color .15s; margin-top: 1px; }
.lp-checkbox__box svg { width: 16px; height: 16px; color: #fff; opacity: 0; }
.lp-checkbox input:checked + .lp-checkbox__box { background: var(--lp-color-accent); border-color: var(--lp-color-accent); }
.lp-checkbox input:checked + .lp-checkbox__box svg { opacity: 1; }
.lp-checkbox input:focus-visible + .lp-checkbox__box { box-shadow: 0 0 0 4px var(--lp-color-focus-ring); }
.lp-checkbox__text { font-size: var(--lp-text-sm); color: var(--lp-color-ink-soft); line-height: 1.45; }
.lp-checkbox__text a { color: var(--lp-color-accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.lp-checkbox.is-invalid .lp-checkbox__box { border-color: var(--lp-color-error); background: var(--lp-color-error-weak); }

.lp-trustline { font-size: var(--lp-text-sm); color: var(--lp-color-ink-faint); text-align: center; line-height: 1.45; }

/* Erfolgs-Zustand */
.lp-success { text-align: center; padding: var(--lp-space-4) var(--lp-space-2); }
.lp-success__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--lp-color-success-weak); color: var(--lp-color-success); display: grid; place-items: center; margin: 0 auto var(--lp-space-5); }
.lp-success__icon svg { width: 32px; height: 32px; }
.lp-success__title { font-size: var(--lp-text-xl); margin-bottom: var(--lp-space-3); }
.lp-success__text { font-size: var(--lp-text-base); color: var(--lp-color-ink-soft); margin-bottom: var(--lp-space-5); }
.lp-success .lp-btn { width: 100%; }

/* =========================================================================
   SEKTIONEN allgemein
   ========================================================================= */
.lp-section { padding: var(--lp-space-16) 0; }
.lp-section__title { font-size: var(--lp-text-2xl); margin-bottom: var(--lp-space-8); }

/* 2 · FEATURES */
.lp-features { background: var(--lp-color-surface-2); border-block: 1px solid var(--lp-color-line); }
.lp-feature-grid { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--lp-space-4); }
.lp-feature { background: var(--lp-color-surface); border: 1px solid var(--lp-color-line); border-radius: var(--lp-radius-lg); padding: var(--lp-space-6); }
.lp-feature__icon { width: 48px; height: 48px; border-radius: var(--lp-radius-md); background: var(--lp-color-accent-weak); color: var(--lp-color-accent); display: grid; place-items: center; margin-bottom: var(--lp-space-4); }
.lp-feature__icon svg { width: 24px; height: 24px; }
.lp-feature__title { font-size: var(--lp-text-lg); margin-bottom: var(--lp-space-2); }
.lp-feature__text { font-size: var(--lp-text-base); color: var(--lp-color-ink-soft); }

/* 3 · TRUST */
.lp-trust__grid { display: flex; flex-direction: column; gap: var(--lp-space-6); }
.lp-trust__portrait { display: flex; align-items: center; gap: var(--lp-space-4); }
.lp-portrait { width: 96px; height: 96px; flex: none; border-radius: var(--lp-radius-lg); background: var(--lp-color-surface-3); border: 1px solid var(--lp-color-line); display: grid; place-items: center; position: relative; color: var(--lp-color-ink-faint); overflow: hidden; }
.lp-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 36%; display: block; }
.lp-portrait__ph { width: 44px; height: 44px; }
.lp-portrait__hint { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-family: var(--lp-font-mono); font-size: 8px; line-height: 1.3; color: var(--lp-color-ink-faint); }
.lp-trust__name strong { display: block; font-size: var(--lp-text-lg); }
.lp-trust__name span { font-size: var(--lp-text-sm); color: var(--lp-color-ink-faint); }
.lp-trust__quote { font-size: var(--lp-text-xl); line-height: 1.45; color: var(--lp-color-ink); margin-top: var(--lp-space-3); }

/* 4 · BRIDGE — Akzent-Orange */
.lp-bridge { background: var(--lp-color-accent); color: #fff; }
.lp-bridge__inner { display: flex; flex-direction: column; gap: var(--lp-space-6); align-items: flex-start; }
.lp-eyebrow--onaccent { color: oklch(1 0 0 / 0.85); }
.lp-bridge__text { font-size: var(--lp-text-xl); line-height: 1.5; max-width: 640px; margin-top: var(--lp-space-2); }
.lp-bridge__links { display: flex; flex-direction: column; gap: var(--lp-space-3); width: 100%; }
.lp-btn--onaccent { background: #fff; color: var(--lp-color-accent-ink); width: 100%; }
.lp-btn--onaccent:hover { background: oklch(0.97 0.01 60); }
.lp-btn--onaccent-ghost { background: transparent; color: #fff; border-color: oklch(1 0 0 / 0.5); width: 100%; }
.lp-btn--onaccent-ghost:hover { border-color: #fff; background: oklch(1 0 0 / 0.12); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.lp-footer { background: var(--lp-color-bg); border-top: 1px solid var(--lp-color-line); padding: var(--lp-space-8) 0; }
.lp-footer__inner { display: flex; flex-direction: column; gap: var(--lp-space-3); align-items: center; text-align: center; }
.lp-footer__copy { font-size: var(--lp-text-sm); color: var(--lp-color-ink-faint); }
.lp-footer__links { display: flex; gap: var(--lp-space-5); }
.lp-footer__links a { font-size: var(--lp-text-sm); color: var(--lp-color-ink-soft); text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================================
   RESPONSIVE — Tablet ab 720px, Desktop ab 960px
   ========================================================================= */
@media (min-width: 720px) {
  :root { --lp-container-pad: 32px; }
  .lp-feature-grid { grid-template-columns: 1fr 1fr; gap: var(--lp-space-5); }
  .lp-trust__grid { flex-direction: row; align-items: center; gap: var(--lp-space-12); }
  .lp-trust__portrait { flex-direction: column; align-items: flex-start; flex: none; width: 200px; }
  .lp-portrait { width: 200px; height: 220px; }
  .lp-portrait__ph { width: 64px; height: 64px; }
  .lp-bridge__links { flex-direction: row; width: auto; }
  .lp-btn--onaccent,
  .lp-btn--onaccent-ghost { width: auto; }
  .lp-footer__inner { flex-direction: row; justify-content: space-between; }
}

@media (min-width: 960px) {
  .lp-hero { padding: var(--lp-space-16) 0; }
  .lp-hero__grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: var(--lp-space-12); align-items: center; }
  .lp-hero__copy { max-width: none; }
  .lp-hero__title { font-size: clamp(38px, 4vw, 50px); }
  /* Mockup: mobil inline ausblenden, Desktop rechts zeigen */
  .lp-hero__visual--inline { display: none; }
  .lp-hero__visual--aside { display: block; position: sticky; top: var(--lp-space-8); }
  .lp-form-card { max-width: 520px; }
  .lp-section__title { text-align: center; }
  .lp-feature-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Grosser Desktop: Excel-Mockup leicht angeschrägt (nur Deko, ab genug Platz) */
@media (min-width: 1120px) {
  .lp-hero__visual--aside .lp-excel { transform: perspective(1600px) rotateY(-7deg) rotateX(2deg); transform-origin: left center; transition: transform .4s ease; }
  .lp-hero__visual--aside .lp-excel:hover { transform: perspective(1600px) rotateY(-3deg) rotateX(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .lp-hero__visual--aside .lp-excel { transform: none !important; }
}