/* ============================================================================
   hochzwei.tech 2026 Rebrand: Erstgespraech page styles.
   Path-Switch: Direkt buchen (Microsoft Bookings) / Kurz anfragen (Formular).
   Depends on core.css (tokens, primitives, buttons, brackets, marker, grid,
   band, form fields) and index.css (hero, sec-head, faq).

   Green is a SEMANTIC status colour only (dots), never a surface or third brand
   accent: blue stays the page accent, lime stays the marker highlight.
   No em-dashes or en-dashes anywhere (brand rule), comments included.
   ========================================================================== */

/* ---- 0. STATUS TOKENS + dot ---------------------------------------------- */
:root {
  --c-status-ok:   #1A7F46;
  --c-status-warn: #B45309;
}
[data-theme="dark"] {
  --c-status-ok:   #34D17E;
  --c-status-warn: #F0A93B;
}

/* ---- 1. HERO-STEMPEL ----------------------------------------------------- */
.egb-hero__stamp { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--c-text-muted); }

/* ---- 3. HERO: copy + two path cards -------------------------------------- */
.egb-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
/* min-width:0 overrides the grid item's default min-width:auto, which would
   otherwise let the headline's longest word force the whole track to
   overflow instead of wrapping (font-size is fluid, so this isn't just a
   mobile risk). */
.egb-hero__inner .hero__copy { min-width: 0; }
.egb-hero__media { aspect-ratio: auto; background: transparent; display: flex; flex-direction: column; gap: var(--space-4); }
.path-card {
  position: relative;
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.path-card__lead { color: var(--c-text-muted); }
.path-card__title { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-head); }
.path-card__sub { font-size: var(--fs-body); color: var(--c-text-muted); }
.path-card__list { display: flex; flex-direction: column; gap: 0.35rem; margin: var(--space-2) 0 var(--space-3); }
.path-card__list li { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-body); }
.path-card .btn { align-self: flex-start; }
/* Buchen und Anfragen sind gleichwertig, keiner der beiden Wege ist die
   Empfehlung. Deshalb keine dauerhaft hervorgehobene Karte, sondern
   Hervorhebung nur im Hover. */
.path-card:hover {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 1px var(--c-brand) inset, var(--shadow-pop);
  transform: translateY(-2px);
}

/* ---- 3b. HERO DOORS (mobile-only path picker, shown <=1024px) ------------- */
/* Auf Desktop uebernehmen die zwei Vorschau-Karten dieselbe Rolle. */
.eg-doors { display: none; }
.eg-doors__q { color: var(--c-text-muted); margin-bottom: var(--space-3); }
.eg-door {
  position: relative;
  display: flex; align-items: center; gap: var(--space-4);
  min-height: 64px;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  color: var(--c-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.eg-door + .eg-door { margin-top: var(--space-3); }
.eg-door__main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.15rem; padding-right: 0.5rem; }
.eg-door__title { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-head); }
.eg-door__sub { font-size: var(--fs-label); color: var(--c-text-muted); }
.eg-door__arrow { flex: 0 0 auto; color: var(--c-brand); font-size: 1.25rem; }
/* Beide Tueren tragen ihren Pfeil und heben sich nur beim Antippen hervor. */
.eg-door:hover, .eg-door:focus-visible {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 1px var(--c-brand) inset;
}

/* ---- 4. PATHS ------------------------------------------------------------ */
/* Feste Reihenfolge Buchen, dann Anfragen. Vorher sortierte ein gespeicherter
   Modus die beiden Sektionen um, die Seite sah also je nach Vorbesuch anders
   aus. Eine stabile Seite ist mehr wert als die Anpassung. */
.paths { display: flex; flex-direction: column; }
/* Door / jump-link anchors land below the sticky header, not under it. */
.path { scroll-margin-top: 88px; }
.path-jump { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }

/* ---- 5. BUCHUNG (Direktlink zu Microsoft Bookings) ----------------------- */
/* Frueher ein consent-gegatetes Iframe, danach eine Karte mit eigenem Titel und
   Erklaertext um genau einen Button herum. Beides weg: der Sektions-Kopf sagt
   schon, worum es geht, also steht rechts im beside-Grid nur noch die Aktion
   und der Datenschutz-Hinweis dazu. */
.bookings-open { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
/* Normaler Absatz, KEIN flex: als Flex-Container wurde der Datenschutz-Link
   ein eigenes, nicht umbrechendes Item und ragte bei 360px aus dem Viewport
   (das Dot-Layout, fuer das das Flex mal da war, wird nicht mehr genutzt). */
.bookings-privacy {
  margin: 0; max-width: 52ch; color: var(--c-text-muted); line-height: 1.7;
  hyphens: auto; overflow-wrap: break-word;
}
.bookings-privacy a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }

/* ---- 6. KENNENLERNEN: Formular ------------------------------------------- */

.eg-form { max-width: 900px; }
.eg-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.eg-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); justify-content: space-between; }
.eg-form__privacy { flex: 1 1 320px; font-size: var(--fs-label); color: var(--c-text-muted); line-height: 1.6; }
.eg-form__privacy a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }
.eg-form__status { font-size: var(--fs-body); }
.eg-form__status[data-state="success"] { color: var(--c-status-ok); font-weight: 600; }
.eg-form__status[data-state="error"] { color: var(--c-status-warn); font-weight: 600; }

/* ---- 7. ABLAUF: jetzt die geteilte Handover-Komponente (index.css), siehe
   erstgespraech.html #ablauf. Keine eigenen Styles mehr noetig. ---- */

/* ---- 9. MENSCHEN (founder cards) ----------------------------------------- */
.eg-person {
  display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-5); align-items: center;
  padding: var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.eg-person:hover { border-color: var(--c-brand); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.eg-person__photo { --bk-size: 30px; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-surface-2); }
.eg-person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1); transition: filter 450ms ease; }
.eg-person:hover .eg-person__photo img { filter: grayscale(0); }
.eg-person__body { display: flex; flex-direction: column; gap: 0.3rem; }
.eg-person__name { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-head); }
.eg-person__bio { font-size: var(--fs-body); color: var(--c-text); }
.eg-person__tags { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin-top: var(--space-2); }

/* ---- 10. ANTWORTZEIT (SLA on plain background) --------------------------- */
.egb-sla { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.egb-sla__copy .sec-head__kicker { margin-bottom: var(--space-4); }
.egb-sla__hours { display: inline-block; margin-top: var(--space-4); color: var(--c-text-muted); }
.egb-sla__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.egb-sla__tile {
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  color: var(--c-brand);
  text-align: center;
}
.egb-sla__tile--soft { background: var(--c-surface-2); color: var(--c-text); }
.egb-sla__num { font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem); font-weight: 700; line-height: 1; display: inline-flex; align-items: baseline; }
.egb-sla__unit { font-size: 0.45em; margin-left: 0.15em; }
.egb-sla__label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 3px; text-transform: uppercase; margin-top: var(--space-3); color: var(--c-text-muted); }

/* ---- 11. SCHLUSS-CTA: jetzt die geteilte .recruit-Komponente (index.css),
   siehe erstgespraech.html #los. Keine eigenen Styles mehr noetig. ---- */

/* ---- 12. RESPONSIVE ------------------------------------------------------ */
@media (max-width: 1024px) {
  .egb-hero__inner { grid-template-columns: 1fr; }
  /* Der Mobil-Picker ersetzt die zwei Vorschau-Karten. Der Lead bleibt jetzt
     stehen: er beschreibt das Gespraech und doppelt die Tueren nicht mehr. */
  .egb-hero__media { display: none; }
  .eg-doors { display: block; margin-top: var(--space-6); }
  .egb-sla { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* The sub-page hero reuses .hero__copy, but index.css turns it into
     display:contents + flex order at this breakpoint. That order only covers
     kicker/title/lead, so egb-stamp + eg-doors fall to order:0 and jump above
     the headline. Keep this hero in normal source order instead.
     index.css nullt dabei auch die margin-bottom des Leads, weil der Home-Hero
     den Abstand dort ueber flex-gap loest. Dieser Hero bleibt block, also muss
     der Abstand zurueck, sonst kleben Lead, Stempel und Tuerfrage aneinander. */
  .egb-hero__inner .hero__copy { display: block; }
  .egb-hero__inner .hero__lead { margin-bottom: var(--space-6); }
  .eg-form__row { grid-template-columns: 1fr; }
  .eg-person { grid-template-columns: 1fr; }
  .eg-person__photo { width: 9rem; }
  .egb-sla__tiles { grid-template-columns: 1fr 1fr; }
}