/* ============================================================
   LUKON Fresh-Signature · CTA-Band / Formular / Footer / Duo
   ============================================================ */

/* ---------- CTA-Band — dunkle Konsole mit Signal-Geometrie ---------- */

/* CTA-Band = ruhiges Konsolen-Finale: samtiger Verlauf + Orbit-Ringe
   (Design-Linie v2: kein Raster) — schwebt als Panel auf dem Canvas */
.cta-band {
  text-align: center;
  background:
    radial-gradient(ellipse 55% 80% at 25% 110%, #359e7326 0%, transparent 62%),
    linear-gradient(150deg, #083024, var(--forest-deep));
  border-radius: 16px;
  width: min(100% - 2rem, calc(var(--maxw) + 96px));
  box-shadow: 0 24px 60px -44px #05442f80;
  overflow: hidden;
}

.cta-band h2 { color: var(--text-on-dark); }

/* Konzentrische Orbit-Ringe (Kalibrier-Target) links unten —
   Modul-Chip rechts oben entfernt (User-Wunsch 2026-07-06: keine Vierecke) */
.cta-band::before {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 240px;
  height: 240px;
  left: 4%;
  bottom: -100px;
  border-radius: 50%;
  border: 1px solid #35e0a336;
  box-shadow: 0 0 0 34px #35e0a30d, 0 0 0 68px #35e0a308;
}

.cta-band {
  margin: var(--space-2) auto var(--space-4);
  padding: calc(var(--space-4) + 0.5rem) 0 calc(var(--space-4) + 1rem);
}
.cta-band h2, .cta-band .lead { position: relative; z-index: 1; }
.cta-band .lead { margin: var(--space-2) auto var(--space-3); color: var(--dim-on-dark); }

/* Final-CTA: exakt derselbe Primär-Stil wie überall, nur mit Dunkel-Bühnen-Schatten */
.cta-band .btn-primary {
  box-shadow: 0 0 0 1px #35e0a34d, 0 12px 30px -8px #000000a6;
  position: relative;
  z-index: 1;
}

.cta-band .btn-primary:hover { box-shadow: 0 0 0 1px #35e0a380, 0 16px 36px -10px #000000c4; }

/* ---------- Formular ---------- */

.form { display: grid; gap: var(--space-2); max-width: 34rem; }

.form label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-ink);
  display: block;
  margin-bottom: 0.35rem;
}

.form label::after { content: " _"; color: var(--green-mid); }

.form input, .form textarea, .form select {
  width: 100%;
  background: #fff;
  border: 1px solid #d5ddd4;
  border-radius: var(--radius-sm);
  padding: 0.78rem 0.95rem;
  color: var(--text);
  font-family: inherit;
  font-size: 0.98rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form input:focus, .form textarea:focus, .form select:focus {
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 4px #0e654322;
}

/* ---------- Footer ---------- */

.site-footer {
  background: linear-gradient(180deg, #ffffff00, #f1f7f3 34%);
  padding: var(--space-5) 0 var(--space-3);
  color: #33453b;   /* dunkler als text-dim (Judge R2: Footer-Kontrast) */
  font-size: 0.97rem;
}

/* Footer-Logo als bewusster weißer Marken-Chip (JPEG-Weißgrund wird Gestaltungselement) */
.footer-logo {
  height: 72px;
  width: auto;
  background: #ffffff;
  border: 1px solid #dfe8e1;
  border-radius: 8px;
  padding: 3px 10px;
  margin: 0 0 12px -4px;
  box-shadow: var(--shadow-soft);
}

/* Spalten 2+3 auf die h4-Zeile der Logo-Spalte ausrichten */
.footer-grid > div:nth-child(n+2) { padding-top: 94px; }

@media (max-width: 720px) {
  .footer-grid > div:nth-child(n+2) { padding-top: 0; }
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer h4 { color: var(--ink); font-size: 0.98rem; margin-bottom: var(--space-1); }
.site-footer ul { list-style: none; }
.site-footer li { padding: 0.22rem 0; }
.site-footer a:hover { color: var(--green-ink); }
.site-footer p { color: inherit; }

.footer-legal {
  border-top: 1px solid #dde5da;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: 0.9rem;
  color: #37423a;
}

/* ---------- Problem → Lösung Zweispalter ---------- */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 720px) { .duo { grid-template-columns: 1fr; } }

.duo .card:first-child { border-top: 3px solid #cfd8d2; }
.duo .card:last-child { border-top: 3px solid var(--emerald); }
.duo .card:first-child h3 { color: #5c6b62; }
.duo .card:last-child h3 { color: var(--green-ink); }

/* ---------- Sektions-Dramaturgie: Blueprint-Panels statt Sand-Nebel ----------
   Jede zweite Content-Sektion wird zum Blaupausen-Panel: Sand-Grund
   (Farbwert unverändert) + Millimeter-Raster in Sand-Deep — Werkbank statt Leinen. */

main > section:nth-of-type(even):not(.hero):not(.page-hero):not(.cta-band) {
  background:
    linear-gradient(180deg, #ffffff66, #ffffff00),
    var(--sand);   /* opak — Body-Raster scheint nicht mehr durch */
  border: 1px solid #e6d9c0;
  border-radius: 16px;
  width: min(100% - 2rem, calc(var(--maxw) + 96px));
  box-shadow: 0 24px 54px -46px #05442f38;
  overflow: hidden;
}

/* (Ecken-Wasserzeichen entfernt — User-Wunsch 2026-07-06: keine viereckigen Deko-Elemente) */

/* Weiße Zwischensektionen: klarer Grund — der Body-Raster trägt allein */
main > section:nth-of-type(odd):not(.hero):not(.page-hero):not(.cta-band) {
  background: none;
}

/* Asset-Slots überall in derselben Karten-Familie — kein Sand-Override
   (Judge R2: warmer Rahmen brach die Karten-Konsistenz) */

/* Seiten-Hero (Unterseiten): gleiche glatte Beam-Bühne wie Home-Hero */
.page-hero {
  background:
    conic-gradient(from 200deg at 85% -10%, transparent 42%, #359e7318 52%, transparent 60%),
    linear-gradient(180deg, #ffffff, #f2f8f4);
}

/* Platzhalter-Badges auf dunklen Bühnen sichtbar halten */
.trust .ph, .cta-band .ph { outline-color: #f3cd7466; }

/* Skelett-Sektionen mit Inline-padding-top:0 saßen auf den farbigen Bühnen
   gestaucht — einheitlicher Atem-Abstand (übersteuert bewusst das Inline-Style) */
main > section[style*="padding-top: 0"]:not(.cta-band) { padding-top: var(--space-4) !important; }

/* Hero: mehr Luft zwischen H1 und Sub-Satz */
.hero h1 { margin-bottom: 0.7rem; }

/* ---------- Per-Page-Bühnen (via aria-current, keine HTML-Änderung) ----------
   Jede Unterseite bekommt eine eigene Aurora-Mischung — Smaragd bleibt Anker. */

body:has(.nav-links a[aria-current="page"][href="/leistungen/hosting/"]) .page-hero {
  background:
    conic-gradient(from 200deg at 85% -10%, transparent 42%, #2a9d8f22 52%, transparent 60%),
    linear-gradient(180deg, #ffffff, #eef7f5);
}

body:has(.nav-links a[aria-current="page"][href="/leistungen/automatisierungen/"]) .page-hero {
  background:
    conic-gradient(from 200deg at 85% -10%, transparent 42%, #d9a44126 52%, transparent 60%),
    linear-gradient(180deg, #ffffff, #f6f3ea);
}

body:has(.nav-links a[aria-current="page"][href="/leistungen/saas/"]) .page-hero {
  background:
    conic-gradient(from 200deg at 85% -10%, transparent 42%, #05442f1c 52%, transparent 60%),
    linear-gradient(180deg, #ffffff, #eef4ef);
}

body:has(.nav-links a[aria-current="page"][href="/ueber-uns/"]) .page-hero {
  background:
    conic-gradient(from 200deg at 85% -10%, transparent 42%, #d9a4411f 52%, transparent 60%),
    linear-gradient(180deg, #ffffff, #f5eedf);
}

/* Kontakt: Direkt-Spalte als dunkles Forest-Panel — eigener Akzent-Moment */
body:has(.nav-links a[aria-current="page"][href="/kontakt/"]) main .grid-2 > div:last-child .card {
  background:
    var(--grain),
    radial-gradient(ellipse 60% 60% at 90% 0%, #359e7322 0%, transparent 60%),
    linear-gradient(150deg, var(--forest-deep-2), var(--forest-deep));
  border-color: #1c4a3a;
}

body:has(.nav-links a[aria-current="page"][href="/kontakt/"]) main .grid-2 > div:last-child .card h3 { color: #ffffff; }
body:has(.nav-links a[aria-current="page"][href="/kontakt/"]) main .grid-2 > div:last-child .card p { color: var(--dim-on-dark); }
body:has(.nav-links a[aria-current="page"][href="/kontakt/"]) main .grid-2 > div:last-child .card a { color: #7ee0b4 !important; font-family: var(--font-mono); }
body:has(.nav-links a[aria-current="page"][href="/kontakt/"]) main .grid-2 > div:last-child .card .ph::after { background: #ecca6b; border-color: #d9b95a; color: #4a3a10; }

/* Rechte Spalte auf die Oberkante des ersten Eingabefelds ausrichten (Label-Höhe ausgleichen) */
body:has(.nav-links a[aria-current="page"][href="/kontakt/"]) main .grid-2 > div:last-child .grid {
  margin-top: calc(var(--space-2) + 1.75rem) !important;
}

/* „Termin buchen" (mittleres Panel) als empfohlene Option hervorheben */
body:has(.nav-links a[aria-current="page"][href="/kontakt/"]) main .grid-2 > div:last-child .card:nth-child(2) {
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px #35e0a32e, var(--shadow-lift);
}

/* Sand-Segmente schweben als Panel auf dem Canvas — kein Überlappungs-Trick mehr.
   padding-top-!important übersteuert die Inline-padding-top:0-Normalisierung. */
main > section:nth-of-type(even):not(.hero):not(.page-hero):not(.cta-band) {
  margin: var(--space-2) auto;
  padding-top: var(--space-4) !important;
}

/* ---------- Mobile Feinschliff (bewusst am DATEIENDE — Kaskade) ---------- */

@media (max-width: 640px) {
  section { padding: var(--space-4) 0 calc(var(--space-4) + 10px); }
  .hero { padding: var(--space-5) 0 var(--space-4); }
  .trust-item + .trust-item { border-left: none; }

  main > section:nth-of-type(even):not(.hero):not(.page-hero):not(.cta-band) {
    padding-top: var(--space-4) !important;
  }

  main > section:nth-of-type(even):not(.hero):not(.page-hero):not(.cta-band)::before {
    width: 180px;
    height: 180px;
    right: -60px;
  }
}

/* ---------- Zentrierte Text-Achse (User-Wunsch 2026-07-04) ----------
   Alle Sektions-Textblöcke (Eyebrow, Überschriften, Leads, Schluss-Zeilen)
   sitzen mittig auf einer Zentralachse statt linksbündig an der Container-Kante.
   Karten-/Formular-INHALTE bleiben linksbündig (Lesbarkeit von Listen/Labels). */

.hero .container,
.page-hero .container { text-align: center; }

/* Rechtstexte (Impressum/Datenschutz): Karten im page-hero linksbündig lesen */
.page-hero .card { text-align: left; }

.hero .lead,
.page-hero .lead { margin-left: auto; margin-right: auto; }

.hero .eyebrow { justify-content: center; }

.hero-ctas { justify-content: center; }

/* Sektions-Köpfe: direkte Container-Kinder zentrieren (nicht in Karten hineinerben) */
main section .container > .eyebrow {
  display: flex;
  justify-content: center;
}

main section .container > h2,
main section .container > .lead,
main section .container > p { text-align: center; }

main section .container > .lead { margin-left: auto; margin-right: auto; }

/* Zentrierte Blöcke mit fester Maximalbreite mittig setzen */
main section .container > .steps { margin-left: auto; margin-right: auto; }