/* ============================================================================
   ÜBER MICH — /ueber-mich/ · Dunkler Hero + dunkle CTA-Section im FAQ-Muster.
   Tokens aus colors_and_type.css, Gerüst aus faq.css/site.css. Unterseiten-
   Verlauf: Ocean läuft ins Deep Sea (Startseite behält als einzige das
   Teal-Leuchten). Die CTA-Section nutzt die .cta-*-Klassen aus site.css.
   ============================================================================ */

/* ---------- Hero: Ocean→Deep-Sea-Verlauf, volle Bildschirmhöhe
   (min-height: auf kleinen Geräten darf er wachsen) ---------- */
.um-hero {
  position: relative;
  background: linear-gradient(118deg, #2D4A5E 0%, #2D4A5E 26%, #18273A 102%);
  min-height: 100svh;
  display: flex; flex-direction: column;
}
.um-hero-inner {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 1200px; width: 100%; margin: 0 auto;
  padding: calc(96px + env(safe-area-inset-top, 0px)) 40px 48px;
  box-sizing: border-box;
}
.um-hero-eyebrow {
  margin: 0;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(248,246,242,0.68);
}
.um-hero-h1 {
  margin: 26px 0 0;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: clamp(40px, 3.4vw + 12px, 64px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: #F8F6F2;
  max-width: 720px;
  text-wrap: balance;
}
.um-hero-intro { max-width: 38em; }
.um-hero-intro p {
  margin: 22px 0 0;
  font-size: clamp(16px, 0.5vw + 12px, 20px);
  line-height: 1.6;
  color: rgba(248,246,242,0.84);
  text-wrap: pretty;
}
.um-hero-intro p:first-child { margin-top: clamp(28px, 4vh, 40px); }
html.js .um-hero-eyebrow[data-anim] { animation: sl-fade 500ms var(--ease-out) 0.15s both; }
html.js .um-hero-h1[data-anim] { animation: sl-fade 600ms var(--ease-out) 0.25s both; }
html.js .um-hero-intro p[data-anim] { animation: sl-fade 500ms var(--ease-out) 0.5s both; }
html.js .um-hero-intro p + p[data-anim] { animation-delay: 0.65s; }

/* ---------- CTA: langer Aussage-Satz statt Punchline ----------
   .cta-h2 aus site.css ist auf kurze Zeilen zugeschnitten (16ch, bis 68px);
   der Über-mich-Satz braucht die ruhigeren Proportionen der alten hellen
   CTA (war live bewährt), sonst wächst die Section über eine Bildschirmhöhe. */
#erstgespraech .cta-h2 {
  font-size: clamp(28px, 2vw + 8px, 44px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  max-width: 24em;
  text-wrap: balance;
}

/* ---------- Mitnahme-Karten im CTA (OnePager + Pitch) ----------
   Das Karten-Gerüst (.cta-cards, .cta-pitch-thumb) steht in site.css. Hier
   bleiben nur die zwei Abweichungen dieser Seite. */
#erstgespraech .cta-eyebrow { margin: 0; } /* p-Eigenmarge raus, sonst starten die Karten über der Textkante */
@media (min-width: 1100px) {
  /* span 4 statt span 5 (site.css/FAQ): dieser CTA hat kein .cta-sub, in
     Spalte 1 stehen nur eyebrow, h2, action, alt. Gleiche Spezifität wie die
     Basis-Regel, gewinnt weil ueber-mich.css nach site.css lädt. */
  .cta-content .cta-cards { grid-row: 1 / span 4; }
}

/* ---------- Mobil ---------- */
@media (max-width: 700px) {
  .um-hero-inner { padding: calc(88px + env(safe-area-inset-top, 0px)) 20px 40px; }
  .um-hero-h1 { margin-top: 22px; }
  .um-hero-intro p { font-size: 16px; line-height: 1.62; }
  .um-hero-intro p:first-child { margin-top: 22px; }
  #erstgespraech .cta-h2 { font-size: 24px; line-height: 1.25; }
}