/*
 * page-kontakt.css — v1.0 (2026-09-16, Phase 3). Kontakt FORM PANEL + its
 * success/invalid/error states (Konzept B `Kontakt.dc.html` `L55`–`L93`), plus the
 * plain desktop ratio for the Formular split. Built by lead-builder; the hero,
 * the 3 sidebar cards and the "So geht es weiter" panel are appended by
 * template-builder below.
 *
 * Auto-enqueued by basename AFTER responsive.css (inc/enqueue.php). Per the
 * mobile-rules.md §1 cascade contract this file:
 *   • sets the `.icc-split` desktop ratio with a PLAIN single-class selector
 *     (.icc-split--kontakt, 0,1,0) — never `.icc-page`-prefixed — so responsive.css's
 *     `.icc-page .icc-split { 1fr }` (0,2,0) still collapses it to 1 col ≤768;
 *   • NEVER declares `grid-template-columns` on `.icc-form__grid` (owned by
 *     responsive.css: 1fr 1fr desktop → 1fr ≤768).
 *
 * Box-model (R1): the form panel is a SPLIT TRACK (width auto, no fixed width),
 * so its `padding:46px 44px` is copied VERBATIM — no arithmetic. The inputs and
 * textarea are form controls (border-box by UA default in the export too); their
 * `padding:14px 16px` / `border-radius:14px` live in components.css verbatim, with
 * font-size raised to 16px (R11, no iOS zoom) — the documented R1 exception, no
 * arithmetic here either. One-off design shadow carries a `/* design *​/` note;
 * every other value is an --icc-* token.
 */

/* ---------- Formular split (desktop ratio only; responsive owns the collapse) ---------- */
.icc-split--kontakt {
  grid-template-columns: 1.25fr 1fr;
  gap: 22px;
  align-items: start;
}

/* ---------- Form panel (white card) ---------- */
.icc-form__panel {
  background: var(--icc-white);
  border: 1px solid var(--icc-border);
  border-radius: var(--icc-r-xl);
  padding: 46px 44px; /* R1: split track, width auto → verbatim, no arithmetic */
  box-shadow: 0 24px 60px -30px rgba(29, 81, 129, .3); /* design L55 */
}

.icc-form__title {
  font-family: var(--icc-font-head);
  font-size: 26px;
  font-weight: 720;
  letter-spacing: var(--icc-ls-h2);
  line-height: 1.15;
  color: var(--icc-navy);
  margin: 0 0 8px;
}
.icc-form__sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--icc-body);
  margin: 0 0 30px;
}

/* Telefon "(optional)" hint inside its label */
.icc-label__optional {
  font-weight: 500;
  color: var(--icc-muted);
}

/* Required consent (real checkbox; replaces the design's L82 privacy paragraph) */
.icc-form__panel .icc-consent {
  margin-top: 22px;
}

/* Submit row: primary button + "Antwort innerhalb eines Werktags" reassurance */
.icc-form__submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.icc-form__assure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--icc-primary);
}
.icc-form__assure svg { stroke: currentColor; }

/* ---------- Success state (design L85–L92) ---------- */
.icc-form__success {
  text-align: center;
  padding: 40px 20px;
}
.icc-form__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--icc-tint-2);
  color: var(--icc-primary);
  margin-bottom: 24px;
}
.icc-form__title--success {
  font-size: 28px;
  margin: 0 0 12px;
}
.icc-form__success-text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--icc-body);
  max-width: 400px;
  margin: 0 auto 28px;
}

/* ==========================================================================
   1. Hero (design L44–50). Centred intro, no scene — same pattern as
   single-fallstudie.css's `.icc-hero--fallstudie`. `.icc-hero` (chrome.css)
   already gives 150/32/0; the design's 56px bottom padding is added here with
   a PLAIN class (mobile-rules.md §1: responsive.css owns the ≤768/≤480
   `.icc-hero` shorthand and will zero this again on mobile — Phase 5).
   ========================================================================== */
.icc-hero--kontakt {
  padding-bottom: 56px; /* design 150 32 56 — .icc-hero already gives 150 32 0 */
}
.icc-hero__intro {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  animation: fadeUpB .7s ease both;
}
.icc-hero--kontakt .icc-eyebrow { margin-bottom: 24px; }

.icc-hero__title {
  font-family: var(--icc-font-head);
  font-size: var(--icc-h1-kontakt);
  font-weight: 750;
  letter-spacing: var(--icc-ls-h1);
  line-height: 1.04;
  color: var(--icc-navy);
  margin: 0 0 22px;
}
.icc-hero__accent { position: relative; white-space: nowrap; }
.icc-hero__accent-word { position: relative; z-index: 1; }
.icc-hero__swash {
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 14px;
  z-index: 0;
}
.icc-hero__swash path {
  stroke: var(--icc-accent);
  stroke-width: 6;
  fill: none;
  stroke-linecap: round;
  opacity: .55;
}
.icc-hero__lead {
  font-size: 17.5px;
  line-height: var(--icc-lh-body);
  max-width: 560px;
  margin: 0 auto;
}

/* ==========================================================================
   2. Formular — sidebar (design L95–130). 3 cards, gap 22, in a plain flex
   column (not `.icc-split`: the split already tracks form-panel/sidebar).
   R1: every card is a flex/split TRACK (width auto) — padding copied verbatim,
   no arithmetic. The donut is a fixed 96px bordered/conic circle (spec K note)
   — no arithmetic either.
   ========================================================================== */
.icc-kontakt-sidebar {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---- Card 1: "Direkter Draht" ---- */
.icc-kontakt-card {
  background: var(--icc-white);
  border: 1px solid var(--icc-border);
  border-radius: var(--icc-r-xl);
  padding: 36px 36px 30px; /* R1: flex track, width auto → verbatim */
}
.icc-kontakt-card__title {
  font-family: var(--icc-font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--icc-navy);
  margin: 0 0 22px;
}
.icc-kontakt-rows { display: flex; flex-direction: column; }
.icc-kontakt-row {
  padding: 14px 0;
  border-bottom: 1px solid #EDF3F8; /* design one-off divider grey, reused elsewhere as a literal (front-page.css .icc-hero__ki-line) */
}
.icc-kontakt-row--last { border-bottom: none; }
.icc-kontakt-row__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--icc-muted);
  margin-bottom: 5px;
}
a.icc-kontakt-row__value {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  color: var(--icc-primary);
  text-decoration: none;
}
a.icc-kontakt-row__value:hover { color: var(--icc-accent); }
div.icc-kontakt-row__value {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--icc-navy);
  line-height: 1.55;
}

/* ---- Card 2: gradient donut ---- */
.icc-kontakt-donut-card {
  background: var(--icc-panel-gradient);
  border: 1px solid var(--icc-panel-border);
  border-radius: var(--icc-r-xl);
  padding: 32px 36px; /* R1: flex track, width auto → verbatim */
  display: flex;
  align-items: center;
  gap: 24px;
}
.icc-kontakt-donut {
  position: relative;
  width: 96px;   /* R1 note: fixed circle per spec, not a copied box — no arithmetic */
  height: 96px;
  flex-shrink: 0;
}
.icc-kontakt-donut__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* --icc-donut-pct set inline per instance from icc_setting('success_rate'). */
  background: conic-gradient(var(--icc-primary) 0% var(--icc-donut-pct, 95%), var(--icc-donut-track) var(--icc-donut-pct, 95%) 100%);
}
.icc-kontakt-donut__face {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--icc-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--icc-font-head);
  font-size: 23px;
  font-weight: 780;
  color: var(--icc-navy);
}
.icc-kontakt-donut-card__text {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
  color: var(--icc-navy);
}
.icc-kontakt-donut-card__text strong { font-weight: 700; }

/* ---- Card 3: navy "innerhalb eines Werktags" (reuses global .icc-blob) ---- */
.icc-kontakt-navy-card {
  background: var(--icc-primary);
  border-radius: var(--icc-r-xl);
  padding: 32px 36px; /* R1: flex track, width auto → verbatim */
  position: relative;
  overflow: hidden;
}
.icc-kontakt-navy-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.icc-kontakt-navy-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--icc-success);
  display: block;
}
.icc-kontakt-navy-card__title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--icc-white);
}
.icc-kontakt-navy-card__text {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: rgba(255, 255, 255, .8);
}

/* ==========================================================================
   3. "So geht es weiter" (design L134–157). Tinted panel, 3 numbered steps.
   `.icc-panel` base radius is page-scoped (mirrors front-page.css / page-geo.css
   / single-fallstudie.css); responsive.css owns the ≤768/≤480 `.icc-page
   .icc-panel` padding overrides and the `.icc-grid-3` column collapse.
   ========================================================================== */
.icc-weiter-section {
  padding-top: 96px; /* design 96 32 110 — .icc-section gives 110/110, override top only */
}
.icc-panel { border-radius: var(--icc-r-panel); }
.icc-panel--weiter {
  background: var(--icc-tint);
  padding: 64px; /* R1: panel is a container track (width auto via .icc-container) → verbatim */
}
.icc-section-head { text-align: center; }
.icc-section-head--weiter { margin: 0 auto 48px; }
.icc-grid-3--weiter { gap: 22px; }

.icc-kontakt-step {
  background: var(--icc-white);
  border-radius: 24px; /* design value, not on the --icc-r-* scale (18/22/26/30/44) */
  padding: 30px 30px 28px; /* R1: grid track, width auto → verbatim */
  box-shadow: 0 14px 36px -22px rgba(29, 81, 129, .25); /* design L140 */
}
.icc-kstep-n {
  font-family: var(--icc-font-head);
  font-size: 26px;
  font-weight: 750;
  color: var(--icc-accent);
  margin-bottom: 12px;
}
.icc-kstep-h {
  font-family: var(--icc-font-head);
  font-size: 19px;
  font-weight: 700;
  color: var(--icc-navy);
  margin: 0 0 8px;
}
.icc-kstep-p {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
  color: var(--icc-body);
}