/* Startseite im Loyalty-Lab-Look (Entwurf 2026-10-27): Kopf mit Wortmarke, großer Titel,
   Laptop-Motiv rechts bündig, vier Vorteile, Formular im Popup, auf dem Handy feste Leiste unten. */
.seite-lp {
  --lp-navy: #0d1b4c;
  --lp-rot: #e5261d;
  --lp-rot-tief: #bf1c14;
  --lp-rot-hell: #fdeceb;
  --lp-grau: #5b6478;
  --lp-grund: #f5f7f9;
  --lp-schrift: "Avenir Next", "Avenir", "Montserrat", "Segoe UI", system-ui, sans-serif;
  --lp-rand: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  /* Formular und Links im Popup in der Markenfarbe */
  --marke: var(--lp-rot);
  --marke-tief: var(--lp-rot-tief);
  --marke-hell: var(--lp-rot-hell);
  background: #fff;
  color: var(--lp-navy);
}
main.lp-main { max-width: none; padding: 0; }

/* Kopf */
.lp-kopf { background: #fff; position: relative; z-index: 2; }
.lp-kopf-innen { max-width: 80rem; margin: 0 auto; padding: 1rem var(--lp-rand); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lp-marke { display: grid; gap: 0.15rem; text-decoration: none; color: var(--lp-navy); min-width: 0; }
.lp-marke:hover { color: var(--lp-navy); }
.lp-marke-name { font: 800 clamp(1.45rem, 1rem + 1.6vw, 2.35rem)/1 var(--lp-schrift); letter-spacing: 0.02em; white-space: nowrap; }
.lp-marke-zeile { font: 500 clamp(0.68rem, 0.6rem + 0.25vw, 0.85rem)/1.3 var(--text); color: var(--lp-navy); }

/* Knöpfe */
.lp-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  background: var(--lp-rot); color: #fff; text-decoration: none; border: 0; cursor: pointer;
  font: 600 1.05rem/1.2 var(--lp-schrift); padding: 0.85rem 1.5rem; border-radius: 14px; white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(229, 38, 29, 0.75);
  transition: background-color var(--dauer), transform var(--dauer), box-shadow var(--dauer);
}
.lp-knopf:hover { background: var(--lp-rot-tief); color: #fff; box-shadow: 0 12px 28px -12px rgba(191, 28, 20, 0.85); }
.lp-knopf:active { transform: translateY(1px); }
.lp-knopf:focus-visible { outline: 3px solid var(--lp-navy); outline-offset: 3px; }
.lp-pfeil { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dauer); }
.lp-knopf:hover .lp-pfeil { transform: translateX(3px); }
.lp-knopf--gross { font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem); padding: 1.05rem 2.3rem; border-radius: 16px; }
.lp-knopf--form { width: 100%; font-size: 1.1rem; padding: 0.95rem 1.5rem; margin-top: 0.25rem; }

/* Held */
.lp-held { background: linear-gradient(180deg, var(--lp-grund) 0%, #f8fafb 70%, #fff 100%); overflow: hidden; }
.lp-held-innen { max-width: 80rem; margin: 0 auto; padding: clamp(2rem, 1rem + 4vw, 4.5rem) var(--lp-rand) clamp(1.5rem, 1rem + 2vw, 3rem);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
.lp-zeile { margin: 0 0 1.1rem; font: 500 clamp(0.8rem, 0.7rem + 0.35vw, 1.05rem)/1.3 var(--lp-schrift); letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-grau); }
.lp-held h1 { margin: 0 0 1.4rem; font: 700 clamp(2.4rem, 1rem + 4.4vw, 4.75rem)/1.04 var(--lp-schrift); letter-spacing: -0.03em; color: var(--lp-navy); }
.lp-held h1 span, .lp-held h1 em { display: block; }
.lp-held h1 em { font-style: normal; color: var(--lp-rot); }
.lp-unter { margin: 0 0 2rem; max-width: 34rem; font-size: clamp(1.08rem, 0.95rem + 0.5vw, 1.4rem); line-height: 1.45; color: var(--lp-grau); }
/* bis an den rechten Bildschirmrand, auch wenn der Inhalt schmaler ist (wie im Entwurf) */
.lp-held-bild { display: block; margin-right: calc(-1 * (var(--lp-rand) + max(0px, (100vw - 80rem) / 2))); }
.lp-held-bild img { display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%), linear-gradient(0deg, transparent 0, #000 9%), linear-gradient(180deg, transparent 0, #000 6%);
  -webkit-mask-composite: source-in, source-in; mask-image: linear-gradient(90deg, transparent 0, #000 7%), linear-gradient(0deg, transparent 0, #000 9%), linear-gradient(180deg, transparent 0, #000 6%); mask-composite: intersect; }

/* Vorteile */
.lp-vorteile { max-width: 80rem; margin: 0 auto; padding: clamp(1.5rem, 1rem + 2vw, 3rem) var(--lp-rand) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.lp-vorteile ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem 2rem; }
.lp-vorteile li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.lp-symbol { width: 4.5rem; height: 4.5rem; border-radius: 18px; background: var(--lp-rot-hell); display: grid; place-items: center; }
.lp-symbol svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: var(--lp-rot); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-vorteile h2 { margin: 0.2rem 0 0.35rem; font: 700 clamp(1.12rem, 1rem + 0.3vw, 1.25rem)/1.25 var(--lp-schrift); color: var(--lp-navy); letter-spacing: -0.01em; }
.lp-vorteile p { margin: 0; color: var(--lp-grau); font-size: 1.05rem; line-height: 1.5; }

/* Datenschutzerklärung, Impressum */
.lp-recht { max-width: 48rem; margin: 0 auto; padding: clamp(2rem, 1.2rem + 3vw, 4rem) var(--lp-rand) clamp(3rem, 2rem + 3vw, 5rem); color: var(--lp-grau); line-height: 1.65; }
.lp-recht h1 { margin: 0 0 1.5rem; font: 700 clamp(2rem, 1.4rem + 2.4vw, 3rem)/1.1 var(--lp-schrift); letter-spacing: -0.025em; color: var(--lp-navy); }
.lp-recht h2 { margin: 2rem 0 0.6rem; font: 700 1.25rem/1.3 var(--lp-schrift); color: var(--lp-navy); }

/* Popup */
.lp-dialog { border: 0; padding: 0; width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); border-radius: 20px; color: var(--lp-navy);
  box-shadow: 0 30px 80px -20px rgba(13, 27, 76, 0.45); }
.lp-dialog::backdrop { background: rgba(13, 27, 76, 0.55); backdrop-filter: blur(3px); }
.lp-dialog[open] { animation: lp-auf 220ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes lp-auf { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.lp-dialog-innen { position: relative; padding: clamp(1.4rem, 1rem + 2vw, 2.2rem); }
.lp-dialog h2 { margin: 0 2.5rem 0.6rem 0; font: 800 clamp(1.5rem, 1.2rem + 1vw, 1.9rem)/1.15 var(--lp-schrift); letter-spacing: -0.02em; }
.lp-dialog-text { margin: 0 0 1.4rem; color: var(--lp-grau); font-size: 1rem; line-height: 1.5; }
.lp-schliessen { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; color: var(--lp-navy); background: var(--lp-grund); }
.lp-schliessen:hover { background: #e7ebf0; color: var(--lp-navy); }
.lp-schliessen:focus-visible { outline: 3px solid var(--lp-rot); outline-offset: 2px; }
.lp-schliessen svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* Ohne JavaScript: Sprung auf #anfrage zeigt das Formular als Overlay */
.lp-dialog:target { display: block; position: fixed; inset: 1rem; margin: auto; height: fit-content; z-index: 10; }

/* Feste Leiste unten (nur schmale Bildschirme) */
.lp-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); box-shadow: 0 -8px 24px -12px rgba(13, 27, 76, 0.3); }
.lp-knopf--leiste { width: 100%; font-size: 1.1rem; padding: 0.95rem 1.5rem; }
body.seite-lp:has(.lp-leiste) { padding-bottom: 5.5rem; }
body.seite-lp:has(.lp-dialog[open]) .lp-leiste { display: none; }

@media (min-width: 640px) {
  .lp-vorteile ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .lp-kopf-innen { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .lp-marke-name { font-size: 1.3rem; }
  .lp-knopf--kopf { padding: 0.6rem 0.9rem; font-size: 0.9rem; border-radius: 11px; box-shadow: none; }
  .lp-knopf--kopf .lp-pfeil { display: none; }
  .lp-marke-zeile { display: none; }
}
@media (min-width: 900px) {
  .lp-held-innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
  .lp-held h1 span, .lp-held h1 em { white-space: nowrap; }
  .lp-held-text { padding-bottom: 2rem; }
  .lp-leiste { display: none; }
  body.seite-lp:has(.lp-leiste) { padding-bottom: 0; }
}
@media (min-width: 1100px) {
  .lp-vorteile ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lp-vorteile ul { gap: 1.6rem 1.5rem; }
  .lp-vorteile li { grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; }
  .lp-symbol { width: 4rem; height: 4rem; border-radius: 16px; }
  .lp-symbol svg { width: 2rem; height: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-dialog[open] { animation: none; }
  .lp-knopf, .lp-pfeil { transition: none; }
}

/* Bestätigung nach dem Formular */
.lp-bestaetigt { background: linear-gradient(180deg, var(--lp-grund) 0%, #fff 100%); padding: clamp(3rem, 2rem + 6vw, 7rem) var(--lp-rand); }
.lp-bestaetigt-karte { max-width: 38rem; margin: 0 auto; text-align: center; background: #fff; border-radius: 24px; padding: clamp(2rem, 1.4rem + 3vw, 3.2rem);
  box-shadow: 0 24px 60px -30px rgba(13, 27, 76, 0.35); }
.lp-bestaetigt-karte .lp-symbol { margin: 0 auto 1.4rem; width: 5rem; height: 5rem; border-radius: 22px; }
.lp-bestaetigt-karte .lp-symbol svg { width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--lp-rot); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-bestaetigt h1 { margin: 0 0 1rem; font: 700 clamp(1.8rem, 1.3rem + 2vw, 2.6rem)/1.12 var(--lp-schrift); letter-spacing: -0.025em; color: var(--lp-navy); }
.lp-bestaetigt p { margin: 0; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.55; color: var(--lp-grau); overflow-wrap: anywhere; }
.lp-bestaetigt strong { color: var(--lp-navy); }
@media (min-width: 560px) { .lp-bestaetigt strong { white-space: nowrap; } }