/* Landingpages AI Operator & Urban Data Add-on
   Figma „📨 Landing Page – AI Operator“ (3823:46864) und „– Urban Data Add-On“ (11966:9794).
   Formulare: pages/formular.css */

/* Abschnitte: Figma 180 px oben/unten, darunter wie --section-y */
.lp-section { padding-block: 180px; }
.lp-section__title { margin: 0 auto 48px; max-width: 900px; }
.lp-section__head { display: grid; gap: 16px; justify-items: center; text-align: center; margin: 0 auto 48px; max-width: 900px; }
.lp-section__head p { max-width: 720px; }
.lp-section__buttons { margin-top: 48px; }
@media (max-width: 1279px) { .lp-section { padding-block: var(--section-y); } }
@media (max-width: 767px) { .lp-section__title, .lp-section__head { margin-bottom: 40px; } .lp-section__buttons { margin-top: 40px; } }

/* Hero (Text links, schwarze Videofläche rechts bis an den Rand) und Formular-Abschnitt teilen das Raster */
.lp-hero__inner,
.lp-contact__inner {
  display: grid; grid-template-columns: minmax(0, 532fr) minmax(0, 773fr); column-gap: 25px;
  padding-left: max(var(--gutter), (100% - 1220px) / 2);
}
.lp-hero__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 48px; padding-block: 48px; }
.lp-hero__intro { display: grid; gap: 14px; max-width: 532px; }
.lp-hero__lead { max-width: 518px; }
.lp-hero__buttons { gap: 12px; }
.lp-hero__buttons .btn { padding-inline: 36px; }

/* Haken-Liste */
.lp-checks { display: grid; gap: 24px; }
.lp-checks li { display: flex; align-items: center; gap: 14px; font-size: 20px; line-height: 22px; }
.lp-checks__icon { width: 18.5px; height: 18.5px; flex: none; }

/* Videobox: [data-video] – Klick auf den Button blendet Poster und Button aus und startet das Video (main.js) */
.lp-video {
  background: var(--ink); color: var(--white); min-height: 677px; padding: 48px;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
}
.lp-video__frame {
  position: relative; width: 100%; max-width: 800px; aspect-ratio: 677 / 381; overflow: hidden;
  background: var(--ink); border: 1px solid var(--grey-700);
}
.lp-video__poster, .lp-video__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-video__video { display: none; background: var(--ink); object-fit: contain; }
.lp-video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 88px; height: 88px; padding-left: 6px; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--white); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
  transition: background-color .2s ease;
}
.lp-video__play svg { width: 26px; height: 30px; }
.lp-video__play:hover, .lp-video__play:focus-visible { background: var(--cyan); }
/* Aufmerksamkeit (Klasse setzt main.js, sobald der Button sichtbar ist): drei kurze Wackler mit cyanfarbenem Puls,
   zusammen knapp 5 Sekunden, danach Ruhe. Bei „Bewegung reduzieren“ greift die globale Regel in main.css. */
.lp-video__play.is-wackeln { animation: lp-play-wackeln 1.6s ease-in-out .3s 3, lp-play-puls 1.6s ease-out .3s 3; }
.lp-video__play.is-wackeln:hover, .lp-video__play.is-wackeln:focus-visible { animation: none; }
@keyframes lp-play-wackeln {
  0%, 45%, 100% { transform: translate(-50%, -50%) rotate(0) scale(1); background-color: var(--ink); }
  6%  { transform: translate(-50%, -50%) rotate(-12deg) scale(1.14); background-color: var(--cyan); }
  14% { transform: translate(-50%, -50%) rotate(10deg) scale(1.14); background-color: var(--cyan); }
  22% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.12); background-color: var(--cyan); }
  30% { transform: translate(-50%, -50%) rotate(6deg) scale(1.1); background-color: var(--cyan); }
  38% { transform: translate(-50%, -50%) rotate(-3deg) scale(1.05); background-color: var(--cyan); }
}
@keyframes lp-play-puls {
  0%   { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24), 0 0 0 0 rgba(34, 168, 199, 0.75); }
  60%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24), 0 0 0 30px rgba(34, 168, 199, 0); }
}
.lp-video__frame.is-playing .lp-video__poster,
.lp-video__frame.is-playing .lp-video__play { display: none; }
.lp-video__frame.is-playing .lp-video__video { display: block; }
.lp-video__caption { font-size: 18px; line-height: 20px; font-weight: 700; }

@media (min-width: 1441px) { .lp-video__frame { max-width: 677px; } }
@media (max-width: 1279px) {
  .lp-hero__inner, .lp-contact__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .lp-video { min-height: 0; padding: 40px; }
}
@media (max-width: 991px) {
  .lp-hero__inner, .lp-contact__inner { grid-template-columns: 1fr; padding-left: 0; row-gap: 0; }
  .lp-hero__text { padding: 64px var(--gutter) 64px; }
  .lp-hero__intro, .lp-hero__lead { max-width: 640px; }
  .lp-video { padding: 40px var(--gutter); }
  .lp-video__frame { max-width: none; }
}
@media (max-width: 767px) {
  .lp-hero__text { padding-block: 48px; gap: 32px; }
  .lp-checks { gap: 16px; }
  .lp-checks li { font-size: 18px; align-items: flex-start; }
  .lp-checks__icon { margin-top: 2px; }
  .lp-hero__buttons .btn { width: 100%; }
  .lp-video { padding: 24px var(--gutter) 32px; }
  .lp-video__play { width: 64px; height: 64px; }
  .lp-video__play svg { width: 20px; height: 23px; }
}

/* „Kompatibel mit“ – Technologie-Logos (src/assets/img/technologie/) */
.lp-tech img { width: 174px; height: 40px; object-fit: contain; }
.lp-tech img[src*="keycloak"] { height: 30px; }
@media (max-width: 991px) {
  .lp-tech img { width: 140px; height: 34px; object-position: left center; }
  .lp-tech img[src*="keycloak"] { height: 26px; }
}

/* Karten mit Illustration (2 × 2) */
.lp-expert__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 29px; }
.lp-expert__card {
  background: var(--grey-50); min-height: 600px; padding: 56px 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; text-align: center;
}
.lp-expert__media { height: 286px; display: flex; align-items: center; justify-content: center; }
.lp-expert__media img { max-height: 100%; width: auto; }
.lp-expert__text { display: grid; gap: 12px; max-width: 449px; }
@media (max-width: 991px) {
  .lp-expert__grid { grid-template-columns: 1fr; }
  .lp-expert__card { min-height: 0; }
}
@media (max-width: 767px) {
  .lp-expert__card { padding: 40px 20px; gap: 32px; }
  .lp-expert__media { height: auto; }
  .lp-expert__media img { width: 100%; max-width: 394px; height: auto; }
}

/* Feature-Karten (3er-Reihe, Figma 402 px hoch) */
.lp-stack__title { max-width: 600px; }
.lp-stack__cards { align-items: stretch; }
.lp-stack__cards .feature-card { min-height: 402px; justify-content: center; }
@media (max-width: 991px) { .lp-stack__cards .feature-card { min-height: 0; } .lp-stack__cards .feature-card--dark { grid-column: 1 / -1; } }
@media (max-width: 767px) { .lp-stack__cards .feature-card--dark { grid-column: auto; } }

/* Vier Layer (Ergänzung aus dem Deck) */
.lp-layers__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.lp-layers .process-card { min-height: 450px; }
@media (max-width: 1279px) { .lp-layers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .lp-layers__grid { grid-template-columns: 1fr; } .lp-layers .process-card { min-height: 320px; } }

/* Schwarzer CTA mit Illustration */
.lp-cta { padding-block: 20px; }
.lp-cta__band { background: var(--ink); color: var(--white); overflow: hidden; }
.lp-cta__inner {
  max-width: 1440px; margin-inline: auto;
  display: grid; grid-template-columns: 792px 451px; column-gap: 87px; align-items: center;
}
.lp-cta__media { height: 560px; }
.lp-cta__media img { width: 804px; max-width: none; height: 558px; margin-top: 1px; }
.lp-cta__content { display: grid; gap: 48px; justify-items: start; }
@media (max-width: 1439px) {
  .lp-cta__inner { grid-template-columns: minmax(0, 792fr) minmax(0, 451fr); column-gap: 56px; padding-right: var(--gutter); }
  .lp-cta__media { height: auto; }
  .lp-cta__media img { width: 100%; height: auto; max-width: 804px; }
}
@media (max-width: 991px) {
  .lp-cta__inner { grid-template-columns: 1fr; padding-right: 0; }
  .lp-cta__media img { max-width: 640px; }
  .lp-cta__content { padding: 16px var(--gutter) 64px; gap: 32px; }
}

/* Kundenstimme / Aus der Praxis */
.lp-testimonial__inner { width: min(1012px, 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; gap: 48px; }
.lp-testimonial .slider-arrow[hidden] { display: none; }  /* nur eine Stimme: main.js blendet die Pfeile aus */
.lp-praxis .project-feature__media, .lp-praxis .project-feature__card { min-height: 492px; }
.lp-praxis .project-feature__card { padding: 56px 48px; gap: 32px; }
.lp-praxis .card-arrow { top: 40px; right: 40px; width: 44px; height: 44px; }
.lp-praxis__head { gap: 24px; padding-right: 56px; }
.lp-praxis__kunde { font-size: 24px; line-height: 34px; font-weight: 700; }
@media (max-width: 991px) { .lp-praxis .project-feature__card { padding: 48px 32px; } }
@media (max-width: 767px) {
  .lp-testimonial__inner { gap: 32px; }
  .lp-praxis .project-feature__media { min-height: 0; aspect-ratio: 4 / 3; }
  .lp-praxis .project-feature__card { min-height: 0; padding: 40px 20px; }
}

/* Referenzen-Karussell (AI Operator) */
.lp-refs__head { margin-bottom: 48px; }
.lp-refs__head .section-head__title { max-width: 900px; }
.lp-refs__head .section-intro { margin-top: 16px; }
.lp-refs__track {
  display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; margin: 0; padding: 0;
}
.lp-refs__track::-webkit-scrollbar { display: none; }
.lp-refs__item { flex: 0 0 calc((100% - 56px) / 3); scroll-snap-align: start; display: flex; }
.lp-ref {
  position: relative; width: 100%; min-height: 440px; padding: 40px 32px;
  display: flex; flex-direction: column; gap: 24px; background: var(--grey-50); transition: background-color .2s ease;
}
.lp-ref:hover { background: var(--grey-100); }
.lp-ref:hover .card-arrow { color: var(--cyan); }
.lp-ref .card-arrow { top: 36px; right: 32px; width: 40px; height: 40px; }
.lp-ref__kunde { min-height: 40px; padding-right: 56px; display: flex; align-items: center; font-size: 24px; line-height: 34px; font-weight: 700; }
.lp-ref__kunde img { height: 36px; width: auto; max-width: 180px; object-fit: contain; object-position: left center; }
.lp-ref__titel { min-height: calc(3 * var(--lh-display-4) * var(--fs-display-4)); }
.lp-ref__zahlen { margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lp-ref__wert { display: block; font-size: clamp(28px, 2.78vw, 40px); line-height: 1.13; font-weight: 700; white-space: nowrap; }
.lp-ref__label { display: block; margin-top: 6px; font-size: 16px; line-height: 22px; color: var(--grey-600); overflow-wrap: break-word; }
@media (max-width: 1279px) { .lp-refs__item { flex-basis: calc((100% - 28px) / 2); } }
@media (max-width: 767px) {
  .lp-refs__head { margin-bottom: 32px; }
  .lp-refs__track { gap: 16px; }
  .lp-refs__item { flex-basis: 86%; }
  .lp-ref { min-height: 400px; padding: 32px 24px; }
  .lp-ref .card-arrow { top: 28px; right: 24px; }
}

/* So starten wir (Aufbau wie Home „Jedes Projekt ist anders“) */
.lp-steps__row { display: grid; gap: 28px; align-items: center; }
.lp-steps__row--1 { grid-template-columns: 492fr 335fr 335fr; }
.lp-steps__row--2 { grid-template-columns: 335fr 335fr 492fr; margin-top: 30px; }
.lp-steps__intro { display: grid; gap: 12px; }
.lp-steps__intro h2 { max-width: 450px; }
@media (max-width: 991px) {
  .lp-steps__row--1, .lp-steps__row--2 { grid-template-columns: 1fr 1fr; }
  .lp-steps__intro { grid-column: 1 / -1; margin-bottom: 8px; }
  .lp-steps__row--2 .contact-card { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .lp-steps__row--1, .lp-steps__row--2 { grid-template-columns: 1fr; }
  .lp-steps .contact-card__content { max-width: 230px; }
}

/* Formular-Abschnitt (Figma Urban Data „Contact Section“ 11971:10185) */
.lp-contact { padding-bottom: 120px; }
.lp-contact__text { padding: 140px 0 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 48px; }
.lp-contact__panel { background: var(--ink); min-height: 677px; padding: 81px 67px; }
.lp-contact__panel .form { max-width: 600px; }
.lp-contact__direkt { font-size: 16px; line-height: 24px; color: var(--grey-600); }
.lp-contact__direkt a { color: var(--ink); font-weight: 700; border-bottom: 1px solid currentColor; white-space: nowrap; transition: color .2s ease; }
.lp-contact__direkt a:hover { color: var(--cyan); }
@media (max-width: 1279px) { .lp-contact__panel { padding: 64px 40px; min-height: 0; } .lp-contact__text { padding-top: 104px; } }
@media (max-width: 991px) {
  .lp-contact { padding-bottom: 0; }
  .lp-contact__text { padding: 0 var(--gutter) 56px; }
  .lp-contact__panel { padding: 56px var(--gutter) 64px; }
  .lp-contact__panel .form { max-width: 640px; }
}
@media (max-width: 767px) { .lp-contact__text { padding-bottom: 40px; gap: 32px; } .lp-contact__panel { padding-block: 40px 48px; } }

/* Kontakt-Panel (partials/kontakt-panel.njk): Termin über Calendly, E-Mail, Telefon – ersetzt das Formular */
.kontakt-panel { color: var(--white); display: grid; justify-items: start; gap: 16px; max-width: 520px; }
.kontakt-panel__text { color: rgba(255, 255, 255, .78); }
.kontakt-panel__btn { margin-top: 12px; }
.kontakt-panel__trenner { width: 100%; margin: 32px 0 8px; border: 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.kontakt-panel__label { font-size: 18px; line-height: 20px; }
.kontakt-panel__link { font-size: var(--fs-display-4); line-height: 38px; font-weight: 700; }
.kontakt-panel__hinweis { margin-top: 8px; color: rgba(255, 255, 255, .78); }
@media (max-width: 767px) { .kontakt-panel__link { font-size: 21px; line-height: 32px; } }