/* ============================================================
   Lead-Generierung: Formular, WhatsApp, PPF-Konfigurator
   ============================================================ */

/* ---------- Angebots-Formular ---------- */
.lead-form-wrap {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 991px) {
  .lead-form-wrap { grid-template-columns: 1fr; }
}

.lead-form-card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 18px 44px -20px rgba(15, 23, 42, .16);
}

.lead-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 575px) {
  .lead-form .form-row { grid-template-columns: 1fr; }
}

.lead-form label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink-700);
  margin-bottom: .35rem;
}
.lead-form label .optional {
  font-weight: 400;
  color: var(--ink-500);
}

.lead-form input[type="text"],
.lead-form input[type="email"],
.lead-form input[type="tel"],
.lead-form select,
.lead-form textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--ink-300);
  border-radius: 12px;
  font: inherit;
  color: var(--ink-800);
  background: #fff;
  margin-bottom: 1.1rem;
  min-height: 48px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lead-form textarea { min-height: 120px; resize: vertical; }
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.lead-form .consent {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .85rem;
  color: var(--ink-600);
  margin-bottom: 1.2rem;
}
.lead-form .consent input {
  margin-top: .2rem;
  width: 18px; height: 18px;
  flex: none;
}
.lead-form .consent a { color: var(--brand-600); }

.lead-form .btn[type="submit"] { width: 100%; }

.form-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin-top: 1rem;
  font-size: .85rem;
  color: var(--ink-500);
}
.form-trust i { color: var(--brand-500); margin-right: .35rem; }

/* Honeypot: fuer Menschen unsichtbar */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status {
  display: none;
  padding: .9rem 1.1rem;
  border-radius: 12px;
  font-weight: 600;
  margin-bottom: 1rem;
}
.form-status.success { display: block; background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.form-status.error   { display: block; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* Alternative Kontaktwege neben dem Formular */
.lead-alt h3 { margin-bottom: .75rem; }
.lead-alt p  { color: var(--ink-600); }
.lead-alt-list { display: grid; gap: .8rem; margin-top: 1.4rem; }
.lead-alt-item {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.2rem;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  color: var(--ink-800);
  text-decoration: none;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease;
}
.lead-alt-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -14px rgba(15, 23, 42, .22);
  color: var(--ink-900);
}
.lead-alt-item i {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--brand-500);
  flex: none;
}
.lead-alt-item.whatsapp i { background: #25d366; }
.lead-alt-item small { display: block; font-weight: 400; color: var(--ink-500); }

/* ---------- Schwebender WhatsApp-Button ---------- */
.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 20px;
  z-index: 1041;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  box-shadow: 0 14px 30px -8px rgba(37, 211, 102, .55);
  transition: transform .2s ease;
}
.whatsapp-float:hover { transform: scale(1.08); color: #fff; }
@media (max-width: 768px) {
  /* ueber der Sticky-CTA-Leiste platzieren */
  .whatsapp-float { bottom: 88px; right: 14px; width: 54px; height: 54px; }
  /* erst nach dem ersten Scroll einblenden, damit der Hero-CTA nicht verdeckt wird */
  .whatsapp-float {
    opacity: 0;
    transform: scale(.6);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .whatsapp-float.wa-sichtbar {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* ---------- PPF-Konfigurator ---------- */
.cfg-card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 22px;
  padding: 2.2rem;
  box-shadow: 0 20px 50px -24px rgba(15, 23, 42, .2);
  max-width: 880px;
  margin: 0 auto;
}
.cfg-step { margin-bottom: 1.8rem; }
.cfg-step > h4 {
  font-size: 1rem;
  margin-bottom: .8rem;
  color: var(--ink-800);
}
.cfg-step > h4 span {
  display: inline-flex;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--brand-500);
  color: #fff;
  font-size: .85rem;
  align-items: center;
  justify-content: center;
  margin-right: .55rem;
}
.cfg-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.cfg-chip {
  border: 1.5px solid var(--ink-300);
  background: #fff;
  color: var(--ink-700);
  border-radius: 999px;
  padding: .55rem 1.1rem;
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  transition: all .15s ease;
  min-height: 44px;
}
.cfg-chip:hover { border-color: var(--brand-400); }
.cfg-chip.active {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}
.cfg-summary {
  background: var(--bg-soft, #f7f9fc);
  border: 1px dashed var(--ink-300);
  border-radius: 16px;
  padding: 1.3rem 1.5rem;
  margin-top: .5rem;
}
.cfg-summary .cfg-price {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink-900);
}
.cfg-summary .cfg-price small { font-size: .95rem; font-weight: 500; color: var(--ink-500); }
.cfg-summary p { margin: .3rem 0 0; color: var(--ink-600); font-size: .9rem; }
.cfg-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
.btn-whatsapp {
  background: #25d366;
  border: none;
  color: #fff !important;
  font-weight: 700;
}
.btn-whatsapp:hover { background: #1fb959; color: #fff; }

/* ============================================================
   Design-Feinschliff (ui-ux-pro-max + frontend-design Review)
   ============================================================ */

/* --- Accessibility: sichtbarer Tastatur-Fokus (WCAG 2.4.7) --- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
.cfg-chip:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--brand-400);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn:focus-visible, .cfg-chip:focus-visible { border-radius: 999px; }

/* --- Anker-Ziele: nicht hinter der fixen Navbar verschwinden --- */
section[id], header[id], [id="angebot"], [id="ppf-konfigurator"] {
  scroll-margin-top: 96px;
}

/* --- Touch: 300ms-Tap-Delay vermeiden, Press-Feedback --- */
a, button, .btn, .cfg-chip, summary { touch-action: manipulation; }
.btn:active, .cfg-chip:active, .lead-alt-item:active, .whatsapp-float:active {
  transform: scale(.97);
}

/* --- Typografie: ausgewogene Zeilenumbrüche für Titel --- */
.hero-title, .section-title, .cta-title { text-wrap: balance; }
.section-subtitle, .hero-subtitle { text-wrap: pretty; }

/* --- Formular: Inline-Validierung erst nach Interaktion --- */
.lead-form input:user-invalid,
.lead-form textarea:user-invalid {
  border-color: #dc2626;
}

/* --- Markenkonforme Textauswahl --- */
::selection { background: var(--brand-500); color: #fff; }

/* --- iOS: Safe-Area für Gesten-Leiste --- */
.whatsapp-float { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 768px) {
  .whatsapp-float { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .mobile-cta { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  /* Hero-CTAs: volle Breite = größere Tap-Fläche, ruhigeres Layout */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
}

/* --- Reduced Motion: auch Smooth-Scroll und Press-Feedback aus --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active, .cfg-chip:active, .lead-alt-item:active, .whatsapp-float:active {
    transform: none;
  }
}

/* ============================================================
   Level-Up: sichtbares Redesign (Hero, Karten, Rhythmus)
   ============================================================ */

/* --- Hero: linksbündig auf Desktop, editorialer Look --- */
@media (min-width: 992px) {
  .hero-section { justify-content: flex-start; text-align: left; }
  .hero-section .hero-content { max-width: 1140px; width: 100%; margin-inline: auto; }
  .hero-section .hero-title { max-width: 15ch; }
  .hero-section .hero-subtitle { margin-inline: 0; max-width: 620px; }
  .hero-section .hero-cta,
  .hero-section .hero-trust { justify-content: flex-start; }
}
.hero-section .hero-title {
  font-size: clamp(2.6rem, 6.5vw, 5.4rem);
  line-height: 1.02;
}

/* Signatur-Element: grosses konturiertes BREMEN im Hintergrund */
.hero-watermark {
  position: absolute;
  right: -1%;
  bottom: 4%;
  z-index: -1;
  font-size: clamp(5rem, 17vw, 16rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .12);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Trust-Badges als Glas-Chips */
.hero-trust span {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: .55rem 1rem;
  border-radius: 999px;
}

/* --- Service-Karten: Akzentkante + kraftvolleres Hover --- */
.service-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity .35s ease;
}
.service-card:hover::after { opacity: 1; }
.service-card:hover { transform: translateY(-8px); }
.service-card:hover .service-icon { transform: scale(1.08) rotate(-4deg); }
.service-icon { transition: transform .35s ease; }
.service-card .btn { margin-top: auto; align-self: flex-start; }

/* --- Marquee: weiche Kanten, mehr Präsenz --- */
.marquee-section {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* --- Primär-Button: Glow + Shine --- */
.btn-primary {
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 34px -10px rgba(37, 99, 235, .55);
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.btn-primary:hover::after { transform: translateX(120%); }

/* --- Dunkle Sektion: weisse Karten poppen --- */
.section--dark .highlight-card {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
}
.section--dark .highlight-card h4 { color: #fff; }
.section--dark .highlight-card p { color: rgba(255, 255, 255, .72); }
.section--dark .highlight-icon { filter: brightness(1.2); }

/* --- Sektionstitel: engere, markantere Setzung --- */
.section-title { letter-spacing: -.035em; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary::after { display: none; }
  .service-card:hover { transform: none; }
  .service-card:hover .service-icon { transform: none; }
}

/* Dunkle Sektion: Sekundär-Button sichtbar machen */
.section--dark .btn-secondary {
  background: rgba(255, 255, 255, .08);
  border: 2px solid rgba(255, 255, 255, .28);
  color: #fff;
}
.section--dark .btn-secondary:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

/* ============================================================
   Detail-Fixes (Nutzer-Feedback)
   ============================================================ */

/* Häkchen exakt mittig im Kreis: ein Pseudo-Element statt zwei versetzter */
.service-features li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: .5rem;
  width: 17px;
  height: 17px;
  font-size: .64rem;
  font-weight: 900;
  color: var(--brand-600);
  line-height: 1;
}
.service-features li::after { content: none; }

/* Shine-Effekt entfernt - erzeugte eine harte, unrunde Kante im Button */
.btn-primary { overflow: visible; }
.btn-primary::after { content: none; }

/* Select: natives Styling ersetzen, damit es zu den Eingabefeldern passt */
.lead-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.05rem center;
  background-size: 14px 9px;
  padding-right: 2.8rem;
  cursor: pointer;
}

/* Buttons: Gradient über die volle Border-Box zeichnen.
   Sonst wiederholt sich der Verlauf unter dem transparenten 2px-Rand
   und hinterlässt eckige Farbkanten an den runden Kappen. */
.btn, .cta-nav { background-origin: border-box; }

/* Navbar-CTA "Anrufen": Kontrast + Abstände reparieren.
   .navbar-custom .nav-link überschrieb Farbe/Padding mit höherer Spezifität. */
.navbar-custom .nav-link.cta-nav {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--brand-600) !important;
  color: #fff !important;
  font-weight: 700;
  line-height: 1;
  padding: .68rem 1.35rem !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px -4px rgba(37, 99, 235, .45);
}
.navbar-custom .nav-link.cta-nav i {
  color: #fff;
  font-size: .85em;
}
.navbar-custom .nav-link.cta-nav:hover,
.navbar-custom .nav-link.cta-nav:focus {
  background: var(--brand-700) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(37, 99, 235, .55);
}

/* ============================================================
   Give-away-Berater (3 Fragen -> Empfehlung)
   ============================================================ */
.berater-card { max-width: 780px; }

.berater-progress {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.6rem;
}
.berater-dot {
  width: 34px;
  height: 5px;
  border-radius: 999px;
  background: var(--ink-200);
  transition: background .25s ease;
}
.berater-dot.aktiv { background: var(--brand-500); }
.berater-dot.fertig { background: var(--brand-300); }

.berater-step > h3 {
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
}

.berater-optionen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}
@media (max-width: 575px) { .berater-optionen { grid-template-columns: 1fr; } }

.berater-option {
  display: flex;
  align-items: center;
  gap: .95rem;
  padding: 1.05rem 1.2rem;
  background: #fff;
  border: 1.5px solid var(--ink-200);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  min-height: 64px;
}
.berater-option:hover {
  border-color: var(--brand-500);
  box-shadow: 0 10px 24px -14px rgba(37, 99, 235, .35);
  transform: translateY(-2px);
}
.berater-option i {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 1.05rem;
}
.berater-option strong { display: block; color: var(--ink-900); font-size: .98rem; }
.berater-option small { color: var(--ink-500); font-size: .84rem; line-height: 1.35; display: block; margin-top: .1rem; }

.berater-zurueck {
  background: none;
  border: none;
  color: var(--ink-500);
  font-size: .88rem;
  cursor: pointer;
  padding: .5rem 0 0;
  min-height: 40px;
}
.berater-zurueck:hover { color: var(--brand-600); }

/* Ergebnis */
.berater-kontext {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--brand-600);
  margin-bottom: .4rem;
}
.berater-warum { color: var(--ink-600); margin-bottom: 1.2rem; }
.berater-picks { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.berater-pick {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--bg-soft, #f7f9fc);
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  padding: .85rem 1.1rem;
  font-weight: 600;
  color: var(--ink-800);
}
.berater-pick .pick-nr {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-500);
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.berater-hinweis { font-size: .86rem; color: var(--ink-500); margin: 1rem 0 0; }
.berater-neu {
  background: none;
  border: none;
  color: var(--ink-500);
  font-size: .86rem;
  cursor: pointer;
  text-decoration: underline;
  min-height: 40px;
  padding: 0;
}
.berater-neu:hover { color: var(--brand-600); }

/* ============================================================
   Berater: Empfehlung per E-Mail
   ============================================================ */
.berater-mail {
  margin-top: 1.4rem;
  padding: 1.1rem 1.2rem;
  background: var(--bg-soft, #f7f9fc);
  border: 1px solid var(--ink-200);
  border-radius: 14px;
}
.berater-mail > label {
  display: block;
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink-800);
  margin-bottom: .6rem;
}
.berater-mail .optional { font-weight: 400; color: var(--ink-500); }
.berater-mail-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.berater-mail-row input {
  flex: 1 1 220px;
  padding: .7rem 1rem;
  border: 1px solid var(--ink-300);
  border-radius: 999px;
  font: inherit;
  min-height: 48px;
}
.berater-mail-row input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.berater-mail-status { margin: .6rem 0 0; font-size: .88rem; font-weight: 600; display: none; }
.berater-mail-status.ok { display: block; color: #047857; }
.berater-mail-status.fehler { display: block; color: #b91c1c; }
.berater-mail-small { margin: .6rem 0 0; font-size: .78rem; color: var(--ink-500); }
.berater-mail-small a { color: var(--brand-600); }

/* ============================================================
   Ansprechpartner-Karte am Formular
   ============================================================ */
.lead-person {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.4rem;
}
.lead-person img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.lead-person strong { display: block; color: var(--ink-900); font-size: 1.02rem; }
.lead-person small { color: var(--ink-600); font-size: .86rem; line-height: 1.45; display: block; margin-top: .15rem; }

/* Unterseiten-Header: Level-Up (Watermark + Typo) */
.page-header .hero-watermark {
  font-size: clamp(4rem, 12vw, 9rem);
  bottom: 3%;
  right: 0;
}
.page-header h1 {
  letter-spacing: -.03em;
  text-wrap: balance;
}

/* ============================================================
   Referenz-Karten: Cover-Fotos mit Crossfade
   (vervollständigt das im Markup angelegte cover-slider-Muster)
   ============================================================ */
.cover-slider {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.cover-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
.cover-slide.aktiv { opacity: 1; }
.cover-slider .cover-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .4));
}
/* Foto vorhanden -> Icon ausblenden */
.cover-slider:has(.cover-slide) .cover-icon { display: none; }
.reference-card:hover .cover-slide.aktiv { transform: scale(1.04); }
.cover-slide { transition: opacity 1s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) {
  .cover-slide { transition: none; }
  .reference-card:hover .cover-slide.aktiv { transform: none; }
}

/* Referenz-Cover mit transparentem Logo: weisser Hintergrund */
.reference-cover.cover-weiss { background: #fff; }
.reference-cover.cover-weiss::before { display: none; }