/* ============================================================
   Ventega Kontaktbereich · V24
   Nur auf der Startseite geladen (index.html, en/index.html).

   Der Bereich entwickelt den bestehenden Stil weiter und erfindet
   nichts neu: Karten, Radien, Farben und Abstaende stammen aus
   site-ui / refinement-v11, das Kurzformular selbst benutzt
   unveraendert die .pc-* Bausteine des Projekt-Checks.

   Aufbau
     1 · Direktkontakt  – Telefon und E-Mail als grosse Tap-Ziele
     2 · Zwei Wege      – kurze Anfrage (hervorgehoben) vs. Projekt-Check
     3 · Kurzformular   – .pc-* Komponenten, vier Schritte
   ============================================================ */

.kontakt-section{padding-top:0}
.kontakt-shell{width:min(100%,980px);margin:0 auto}

/* ---------- 1 · Direktkontakt ----------
   Der Kopfbereich bleibt die bekannte .final-cta Flaeche; darin stehen
   jetzt Telefon und E-Mail statt eines einzelnen Fliesstext-Links. */
.kontakt-hero{margin-bottom:40px}
.kontakt-hero p{margin-bottom:0}
.kontakt-hero .kontakt-direct{margin:26px auto 0;text-align:left;max-width:760px}

.kontakt-direct{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  margin:0 auto 34px;
}
.kontakt-tile{
  display:flex;align-items:center;gap:16px;
  padding:20px 22px;min-height:88px;
  border:1px solid var(--border);border-radius:18px;
  background:linear-gradient(150deg,rgba(109,63,224,.14),color-mix(in srgb,var(--surface) 92%,transparent));
  color:var(--text);text-decoration:none;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.kontakt-tile:hover{
  border-color:rgba(178,154,255,.6);
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(109,63,224,.16);
}
.kontakt-tile:focus-visible{outline:2px solid var(--violet-bright);outline-offset:3px}
.kontakt-tile-icon{
  flex:0 0 auto;width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--violet-deep),var(--magenta));
  box-shadow:0 0 22px rgba(139,92,246,.32);
}
.kontakt-tile-icon svg{width:21px;height:21px;display:block;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kontakt-tile-body{min-width:0}
.kontakt-tile-label{
  display:block;font:600 10.5px/1.4 'IBM Plex Mono',monospace;
  letter-spacing:.18em;text-transform:uppercase;color:var(--violet-bright);margin-bottom:5px;
}
.kontakt-tile-value{
  display:block;font:650 clamp(17px,2.4vw,21px)/1.25 'Sora',sans-serif;
  letter-spacing:-.01em;word-break:break-word;
}
.kontakt-tile-hint{display:block;margin-top:4px;font-size:12.5px;color:var(--faint)}

/* ---------- 2 · Zwei Wege ---------- */
.kontakt-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:40px}
.kontakt-path{
  position:relative;display:flex;flex-direction:column;
  padding:26px 26px 24px;
  border:1px solid var(--border);border-radius:20px;
  background:var(--surface);
}
/* Der schnelle Weg wird bewusst hervorgehoben. */
.kontakt-path-quick{
  border-color:rgba(178,154,255,.46);
  background:linear-gradient(155deg,rgba(109,63,224,.16),color-mix(in srgb,var(--surface) 90%,transparent));
  box-shadow:0 20px 52px rgba(109,63,224,.14);
}
.kontakt-path-badge{
  position:absolute;top:-11px;left:26px;
  padding:4px 11px;border-radius:99px;
  background:linear-gradient(92deg,var(--violet-deep),var(--magenta));
  color:#fff;font:600 10px/1.5 'IBM Plex Mono',monospace;
  letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 6px 18px rgba(109,63,224,.4);
}
.kontakt-path h3{font:700 20px/1.25 'Sora',sans-serif;letter-spacing:-.015em;margin:6px 0 10px}
.kontakt-path p{margin:0 0 16px;color:var(--muted);font-size:15px;line-height:1.65}
.kontakt-path ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.kontakt-path li{position:relative;padding-left:20px;font-size:14px;line-height:1.6;color:var(--muted)}
.kontakt-path li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;background:var(--violet-bright);
}
.kontakt-path .btn,.kontakt-path .btn-ghost{margin-top:auto;align-self:flex-start}

/* ---------- 3 · Kurzformular ---------- */
.kontakt-form-wrap{scroll-margin-top:90px}
/* Das Kurzformular ist schmaler als der Projekt-Check – es hat weniger Felder. */
.kontakt-form-wrap .pc-shell{width:min(100%,820px)}
.kontakt-form-wrap .pc-step{padding:clamp(24px,4.2vw,44px)}
.kontakt-form-wrap .pc-step h2{font-size:clamp(22px,3.2vw,30px)}
/* Auswahlkarten des ersten Schritts: kompakter als im Projekt-Check. */
.kontakt-form-wrap .pc-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.kontakt-form-wrap .pc-choice small{font-size:12.8px}

/* Zusammenfassung im letzten Schritt */
.kontakt-form-wrap .pc-summary-group{margin-bottom:14px}

/* ---------- Helles Design ---------- */
html[data-theme="light"] .kontakt-tile{
  background:linear-gradient(150deg,rgba(109,63,224,.08),var(--surface));
  box-shadow:0 10px 26px rgba(40,25,90,.08);
}
html[data-theme="light"] .kontakt-tile:hover{box-shadow:0 16px 34px rgba(40,25,90,.14)}
html[data-theme="light"] .kontakt-path-quick{
  background:linear-gradient(155deg,rgba(109,63,224,.09),var(--surface));
  box-shadow:0 16px 40px rgba(40,25,90,.10);
}

/* ---------- Tablet ---------- */
@media(max-width:860px){
  .kontakt-paths{grid-template-columns:minmax(0,1fr)}
  .kontakt-path .btn,.kontakt-path .btn-ghost{align-self:stretch;text-align:center}
}

/* ---------- Smartphone ---------- */
@media(max-width:640px){
  .kontakt-direct{grid-template-columns:minmax(0,1fr);gap:12px}
  .kontakt-tile{padding:18px;min-height:76px;gap:14px}
  .kontakt-tile-icon{width:42px;height:42px;border-radius:12px}
  .kontakt-path{padding:22px 20px 20px}
  .kontakt-form-wrap .pc-choice-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Reduzierte Bewegung ---------- */
@media(prefers-reduced-motion:reduce){
  .kontakt-tile,.kontakt-path{transition:none}
  .kontakt-tile:hover{transform:none}
}
html.motion-reduce .kontakt-tile,
html.motion-reduce .kontakt-path{transition:none}
html.motion-reduce .kontakt-tile:hover{transform:none}