/* ==========================================================================
   QuasselHeld - Landingpage (nur index.php)
   Baut auf den Tokens aus style.css (--ch-*) auf. Farben und Bilder der
   Marke bleiben unverändert. Präfix: lp-
   Radien: Flächen 24px, Chips und Buttons als Pille.
   ========================================================================== */

:root{
  --lp-r: 24px;
  --lp-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --lp-ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --lp-glass: rgba(27,34,51,.62);
  --lp-line: rgba(255,255,255,.09);
}

html{ color-scheme: dark; }

/* ---------- Gemeinsame Bausteine ---------- */
.lp-wrap{ width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.lp-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--ch-border-strong);
  background: var(--lp-glass);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ch-text-dim);
}

.lp-head{ max-width: 680px; margin: 0 0 52px; }
.lp-head h2{
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 18px 0 14px;
}
.lp-head p{ color: var(--ch-text-dim); font-size: 1.05rem; max-width: 56ch; margin: 0; }
.lp-head-noeyebrow h2{ margin-top: 0; }

.lp-section{ padding: 112px 0; position: relative; }

/* Buttons: Druckfeedback laut Emil-Regel (scale .97 auf :active) */
.lp-wrap .ch-btn{
  transition: transform 160ms var(--lp-ease), box-shadow 200ms var(--lp-ease), background-color 200ms ease, border-color 200ms ease;
}
.lp-wrap .ch-btn:active{ transform: scale(0.97); }
.lp-wrap .ch-btn-primary{ color: #10141d; }
.lp-wrap .ch-btn svg{ transition: transform 200ms var(--lp-ease); }
@media (hover: hover) and (pointer: fine){
  .lp-wrap .ch-btn-primary:hover svg{ transform: translateX(3px); }
}
.lp-wrap .ch-btn:focus-visible,
.lp-seg button:focus-visible,
.lp-link:focus-visible{
  outline: 2px solid var(--ch-blue);
  outline-offset: 3px;
}

/* ---------- Hero ---------- */
.lp-hero{
  position: relative;
  min-height: min(100dvh, 860px);
  display: flex;
  align-items: center;
  padding: calc(var(--ch-header-h) + 32px) 0 56px;
  overflow: clip;
}
.lp-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 48px;
  align-items: center;
}
.lp-hero h1{
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.lp-hero-lead{
  font-size: 1.18rem;
  color: var(--ch-text-dim);
  max-width: 34ch;
  margin: 0 0 34px;
}
.lp-hero-ctas{ display: flex; flex-wrap: wrap; gap: 14px; }

/* Hero-Bühne mit Kwassel */
.lp-stage{
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 540px;
  margin-left: auto;
}
.lp-stage-glow{
  position: absolute;
  inset: 8% 6%;
  border-radius: 50%;
  background: var(--ch-gradient);
  filter: blur(90px);
  opacity: .34;
}
.lp-stage-ring{
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 1px solid var(--lp-line);
  background: radial-gradient(closest-side, rgba(255,255,255,.05), transparent 70%);
}
.lp-stage-ring.lp-ring-2{ inset: 17%; border-color: rgba(255,255,255,.06); }
.lp-stage img{
  position: absolute;
  inset: 12%;
  width: 76%;
  height: 76%;
  object-fit: contain;
  filter: drop-shadow(0 28px 40px rgba(0,0,0,.5));
}

.lp-chip{
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px 11px 12px;
  border-radius: 999px;
  border: 1px solid var(--ch-border-strong);
  background: var(--lp-glass);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 40px -18px rgba(0,0,0,.7);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  font-size: .86rem;
  font-weight: 600;
  white-space: nowrap;
}
.lp-chip .ch-icon-badge{ width: 34px; height: 34px; border-radius: 50%; margin: 0; }
.lp-chip .ch-icon-badge svg{ width: 17px; height: 17px; }
.lp-chip-a{ top: 9%; left: -4%; }
.lp-chip-b{ top: 47%; right: -6%; }
.lp-chip-c{ bottom: 8%; left: 2%; }

/* ---------- Vertrauensleiste unter dem Hero ---------- */
.lp-trust{
  border-top: 1px solid var(--lp-line);
  border-bottom: 1px solid var(--lp-line);
  background: rgba(23,29,43,.6);
}
.lp-trust-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.lp-trust-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 22px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ch-text-dim);
}
.lp-trust-item + .lp-trust-item{ border-left: 1px solid var(--lp-line); }
.lp-trust-item svg{ width: 20px; height: 20px; color: var(--ch-orange); flex: none; }

/* ---------- Bento ---------- */
.lp-bento{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.lp-cell{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  padding: 34px;
  border-radius: var(--lp-r);
  border: 1px solid var(--lp-line);
  background: var(--ch-card);
  transition: transform 260ms var(--lp-ease), border-color 260ms ease;
}
@media (hover: hover) and (pointer: fine){
  .lp-cell:hover{ transform: translateY(-4px); border-color: var(--ch-border-strong); }
}
.lp-cell-wide{ grid-column: span 2; }
.lp-cell h3{ font-size: 1.35rem; letter-spacing: -.01em; margin: 0 0 10px; }
.lp-cell p{ color: var(--ch-text-dim); font-size: .98rem; margin: 0; max-width: 42ch; }
.lp-cell .ch-icon-badge{ margin-bottom: auto; }

/* Zellen mit eigener Fläche, damit nicht alles gleich aussieht */
.lp-cell-pfs{
  background:
    radial-gradient(520px 320px at 100% 0%, rgba(255,138,52,.28), transparent 70%),
    radial-gradient(420px 320px at 0% 100%, rgba(63,164,234,.18), transparent 70%),
    var(--ch-card);
}
.lp-cell-pfs::after{
  content: '';
  position: absolute;
  z-index: -1;
  right: -60px; top: -60px;
  width: 280px; height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 46px rgba(255,255,255,.025), 0 0 0 92px rgba(255,255,255,.02);
}
.lp-cell-num{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 14px),
    var(--ch-card);
}
.lp-cell-key{
  background:
    radial-gradient(360px 260px at 0% 0%, rgba(63,164,234,.22), transparent 70%),
    var(--ch-card);
}
.lp-cell-cal{
  background:
    radial-gradient(520px 300px at 0% 100%, rgba(255,138,52,.16), transparent 70%),
    var(--ch-card);
}
.lp-cell-cal img{
  position: absolute;
  z-index: -1;
  right: 16px; bottom: 0;
  width: 220px; height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.45));
}
.lp-cell-cal p{ max-width: 30ch; }
.lp-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-weight: 700;
  font-size: .92rem;
  color: var(--ch-blue);
}
.lp-link svg{ width: 16px; height: 16px; transition: transform 200ms var(--lp-ease); }
@media (hover: hover) and (pointer: fine){
  .lp-link:hover svg{ transform: translateX(3px); }
}

/* ---------- Kwassel stellt sich vor ---------- */
.lp-kw{
  background: var(--ch-bg-alt);
  border-top: 1px solid var(--lp-line);
  border-bottom: 1px solid var(--lp-line);
}
.lp-kw-grid{
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
}
.lp-kw-figure{ position: relative; display: flex; justify-content: center; }
.lp-kw-figure::before{
  content: '';
  position: absolute;
  width: 78%; aspect-ratio: 1;
  top: 10%;
  border-radius: 50%;
  background: var(--ch-gradient);
  filter: blur(90px);
  opacity: .3;
}
.lp-kw-figure img{
  position: relative;
  width: min(100%, 420px);
  height: auto;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.45));
}
.lp-kw h2{
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 0 0 28px;
}
.lp-bubble{
  position: relative;
  background: var(--ch-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  padding: 30px 32px;
  margin-bottom: 30px;
}
.lp-bubble::before{
  content: '';
  position: absolute;
  left: -9px; top: 44px;
  width: 18px; height: 18px;
  background: var(--ch-card);
  border-left: 1px solid var(--lp-line);
  border-bottom: 1px solid var(--lp-line);
  transform: rotate(45deg);
}
.lp-bubble p{ color: var(--ch-text-dim); font-size: 1rem; line-height: 1.65; margin: 0 0 14px; }
.lp-bubble p:last-child{ margin-bottom: 0; }

/* ---------- Stimmung: Ohne / Mit ---------- */
.lp-mood-top{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.lp-mood-top .lp-head{ margin: 0; }
.lp-seg{
  position: relative;
  display: none;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid var(--ch-border-strong);
  background: var(--ch-card);
}
.lp-js .lp-seg{ display: inline-flex; }
.lp-seg button{
  position: relative;
  z-index: 1;
  padding: 11px 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ch-text-dim);
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  transition: color 200ms ease, transform 160ms var(--lp-ease);
}
.lp-seg button:active{ transform: scale(0.97); }
.lp-seg button[aria-selected="true"]{ color: #10141d; }
.lp-seg-thumb{
  position: absolute;
  top: 5px; bottom: 5px; left: 5px;
  width: calc(50% - 5px);
  border-radius: 999px;
  background: var(--ch-gradient);
  transition: transform 280ms var(--lp-ease-io);
}
.lp-seg[data-state="bad"] .lp-seg-thumb{ transform: translateX(0); }
.lp-seg[data-state="good"] .lp-seg-thumb{ transform: translateX(100%); }
.lp-seg button{ flex: 1 1 0; }

.lp-mood-panels{ display: grid; }
.lp-mood-panel{
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  transition: opacity 240ms ease, transform 280ms var(--lp-ease), filter 240ms ease;
}
.lp-js .lp-mood-panel.is-off{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 200ms ease, transform 200ms ease, filter 200ms ease, visibility 0s linear 200ms;
}
.lp-mood-card{
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 30px;
  border-radius: var(--lp-r);
  border: 1px solid var(--lp-line);
  background: var(--ch-card);
}
.lp-mood-card img{ width: 112px; height: 112px; object-fit: contain; flex: none; filter: drop-shadow(0 12px 16px rgba(0,0,0,.4)); }
.lp-mood-card p{ margin: 0; color: var(--ch-text); font-size: 1.04rem; line-height: 1.5; }
.lp-mood-panel-bad .lp-mood-card{ border-color: rgba(255,90,90,.2); background: linear-gradient(160deg, rgba(255,90,90,.07), var(--ch-card) 60%); }
.lp-mood-panel-good .lp-mood-card{ border-color: rgba(70,210,140,.22); background: linear-gradient(160deg, rgba(70,210,140,.08), var(--ch-card) 60%); }
/* Ohne JavaScript beide Gruppen untereinander zeigen */
.lp-mood-label{ display: none; font-family: 'Outfit', sans-serif; font-weight: 700; margin: 0 0 12px; }
html:not(.lp-js) .lp-mood-panels{ gap: 36px; }
html:not(.lp-js) .lp-mood-panel{ grid-area: auto; }
html:not(.lp-js) .lp-mood-label{ display: block; }

/* ---------- Vergleich ---------- */
.lp-cmp-hint{ display: none; font-size: .8rem; color: var(--ch-text-faint); margin: 0 0 10px; }
.lp-section .ch-compare-wrap{
  border-radius: var(--lp-r);
  border-color: var(--lp-line);
}
.lp-section .ch-compare-table thead th{ position: sticky; top: 0; }
.lp-section .ch-compare-table th:first-child,
.lp-section .ch-compare-table td:first-child{
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--ch-card);
}
.lp-section .ch-compare-table thead th:first-child{ background: var(--ch-bg-alt); z-index: 2; }
.lp-section .ch-compare-table tbody tr{ transition: background-color 160ms ease; }
@media (hover: hover) and (pointer: fine){
  .lp-section .ch-compare-table tbody tr:hover td:not(.ch-compare-highlight){ background: rgba(255,255,255,.025); }
  .lp-section .ch-compare-table tbody tr:hover td:first-child{ background: var(--ch-card-hover); }
}

/* ---------- Abschluss-CTA ---------- */
.lp-cta{ padding: 40px 0 120px; }
.lp-cta-panel{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
  gap: 24px;
  padding: 64px 64px 64px 72px;
  border-radius: calc(var(--lp-r) + 8px);
  border: 1px solid var(--ch-border-strong);
  background:
    radial-gradient(620px 420px at 0% 0%, rgba(255,138,52,.3), transparent 68%),
    radial-gradient(620px 460px at 100% 100%, rgba(63,164,234,.3), transparent 68%),
    var(--ch-card);
}
.lp-cta-panel h2{
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: 0 0 16px;
  text-wrap: balance;
}
.lp-cta-panel p{ color: var(--ch-text-dim); font-size: 1.08rem; max-width: 40ch; margin: 0 0 32px; }
.lp-cta-art{ position: relative; display: flex; justify-content: center; }
.lp-cta-art img{ width: min(100%, 340px); height: auto; filter: drop-shadow(0 26px 34px rgba(0,0,0,.5)); }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference){
  @keyframes lp-rise{
    from{ opacity: 0; transform: translateY(18px); }
    to{ opacity: 1; transform: translateY(0); }
  }
  @keyframes lp-pop{
    from{ opacity: 0; transform: scale(.94); }
    to{ opacity: 1; transform: scale(1); }
  }
  @keyframes lp-float{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-9px); }
  }

  /* Hero-Auftritt: Text nacheinander, dann Bühne und Chips */
  .lp-hero h1, .lp-hero-lead, .lp-hero-ctas{ animation: lp-rise 700ms var(--lp-ease) both; }
  .lp-hero h1{ animation-delay: 60ms; }
  .lp-hero-lead{ animation-delay: 160ms; }
  .lp-hero-ctas{ animation-delay: 260ms; }
  .lp-stage img{ animation: lp-pop 800ms var(--lp-ease) 120ms both; }
  .lp-chip{ animation: lp-pop 600ms var(--lp-ease) both, lp-float 7s ease-in-out infinite; }
  .lp-chip-a{ animation-delay: 420ms, 1.2s; }
  .lp-chip-b{ animation-delay: 520ms, 2.4s; }
  .lp-chip-c{ animation-delay: 620ms, 0s; }

  /* Scroll-Einblendung, einmalig */
  .lp-js [data-reveal]{
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 640ms var(--lp-ease), transform 640ms var(--lp-ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .lp-js [data-reveal].is-in{ opacity: 1; transform: none; }
  /* nach dem Einblenden Hover-Transition der Zellen wieder freigeben */
  .lp-js .lp-cell[data-reveal].is-in{
    transition: transform 260ms var(--lp-ease), border-color 260ms ease, opacity 640ms var(--lp-ease);
    transition-delay: 0s;
  }
}

/* ---------- Responsiv ---------- */
@media (max-width: 1023.98px){
  .lp-section{ padding: 88px 0; }
  .lp-hero{ min-height: 0; padding-bottom: 40px; }
  .lp-hero-grid{ grid-template-columns: 1fr; gap: 12px; }
  .lp-hero-lead{ max-width: 46ch; }
  .lp-stage{ margin: 0 auto; max-width: 440px; }
  .lp-chip-a{ left: 0; }
  .lp-chip-b{ right: 0; }
  .lp-trust-row{ grid-template-columns: repeat(2, 1fr); }
  .lp-trust-item:nth-child(3){ border-left: 0; }
  .lp-trust-item:nth-child(n+3){ border-top: 1px solid var(--lp-line); }
  .lp-bento{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-cell-wide{ grid-column: span 2; }
  .lp-kw-grid{ grid-template-columns: 1fr; gap: 24px; }
  .lp-kw-figure img{ width: min(100%, 300px); }
  .lp-bubble::before{ display: none; }
  .lp-cta-panel{ grid-template-columns: 1fr; padding: 48px 36px 36px; }
  .lp-cta-art{ order: -1; }
  .lp-cta-art img{ width: 220px; }
}

@media (max-width: 767.98px){
  .lp-wrap{ padding: 0 16px; }
  .lp-section{ padding: 72px 0; }
  .lp-head{ margin-bottom: 36px; }
  .lp-bento{ grid-template-columns: 1fr; }
  .lp-cell, .lp-cell-wide{ grid-column: auto; min-height: 0; padding: 26px; }
  .lp-cell .ch-icon-badge{ margin-bottom: 40px; }
  .lp-cell-cal{ padding-bottom: 150px; }
  .lp-cell-cal img{ width: 150px; height: 150px; right: 10px; }
  .lp-mood-panel{ grid-template-columns: 1fr; }
  .lp-mood-card{ padding: 22px; gap: 18px; }
  .lp-mood-card img{ width: 84px; height: 84px; }
  .lp-seg{ width: 100%; }
  .lp-cmp-hint{ display: block; }
  .lp-cta{ padding-bottom: 80px; }
  .lp-cta-panel{ padding: 36px 24px 32px; }
}

@media (max-width: 559.98px){
  .lp-hero-ctas .ch-btn{ width: 100%; }
  .lp-chip{ font-size: .76rem; padding: 8px 14px 8px 9px; gap: 9px; }
  .lp-chip .ch-icon-badge{ width: 28px; height: 28px; }
  .lp-chip .ch-icon-badge svg{ width: 14px; height: 14px; }
  .lp-chip-a{ top: 4%; }
  .lp-chip-b{ top: 50%; }
  .lp-chip-c{ bottom: 2%; left: 0; }
  .lp-trust-item{ padding: 18px 14px; font-size: .84rem; gap: 9px; }
}