/* ═══════════════════════════════════════════════════════════════
   Hero-Foto, Über mich und durchgehende Symmetrie auf dem Handy
   Wird als letzte Datei geladen.
   ═══════════════════════════════════════════════════════════════ */

/* ══════════ Hero-Foto: Strahler oben und Hände vollständig ══════════
   Ausschnitt 3:4 ab 4 % Bildhöhe — damit sind Deckenleuchte und Hände
   (60–72 % der Bildhöhe) beide sichtbar. Die Namenszeile liegt nicht
   mehr über dem Foto, sondern darunter.                                  */
.hero__me img{aspect-ratio:3/4;object-position:50% 4%}
.hero__me .hero__cap{
  position:static;display:block;
  background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;
  border:0;border-top:1px solid var(--gline);border-radius:0;
  padding:.85rem 1rem;text-align:center;
  font-size:.92rem;color:var(--ink-3);
}
.hero__me .hero__cap b{
  display:inline;font-family:var(--serif);font-size:1.12rem;font-weight:600;color:var(--ink);
}

/* ══════════ Über mich: rundes Foto neben dem Text ══════════ */
.ueber__in{
  display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;
  gap:clamp(40px,6vw,90px);
  align-items:start;            /* Foto oben neben Name, nicht mittig am langen Text */
}
.ueber__in .port{margin-top:.6rem}

/* Formular-Schritte dürfen auf schmalen Schirmen nicht über den Rand ragen */
.wiz__steps li{min-width:0}
.wiz__steps li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ueber__studio{
  margin:clamp(48px,6vw,80px) 0 0;border-radius:22px;overflow:hidden;
  background:var(--linen);position:relative;
}
.ueber__studio img{display:block;width:100%;aspect-ratio:16/8;object-fit:cover;object-position:50% 55%}
.ueber__studio figcaption{
  padding:.85rem 1rem;text-align:center;background:var(--milk);
  font-size:.9rem;color:var(--ink-3);border-top:1px solid var(--gline);
}

/* ═══════════════════════════════════════════════════════════════
   HANDY — alles auf eine Mittelachse
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:760px){

  /* ── Hero ── */
  .hero__copy{text-align:center}
  .hero__kick{
    font-size:.68rem;letter-spacing:.1em;white-space:nowrap;
    padding:.6em 1.1em;margin-inline:auto;
  }
  .hero__lede{margin-inline:auto}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__trust{justify-content:center;align-items:center;text-align:center}
  .trust__stars,.trust__slots{justify-content:center}
  .hero__me img{aspect-ratio:3/4}

  /* ── Über mich ── */
  .ueber__in{grid-template-columns:1fr;gap:44px;text-align:center}
  .ueber__txt .kick{justify-content:center}
  .ueber__motto{
    border-left:0;padding:1.1rem 0;margin:1.5rem auto;
    border-top:1px solid var(--gline);border-bottom:1px solid var(--gline);
  }
  .ueber__studio img{aspect-ratio:4/3}

  /* ── Philosophie ── */
  .philo__txt{text-align:center}
  .philo__txt .kick{justify-content:center}
  .philo__pts{text-align:left;max-width:30rem;margin-inline:auto}

  /* ── Fragen ── */
  .faq__side{text-align:center}
  .faq__side .kick{justify-content:center}
  .faq__hint{margin-inline:auto}

  /* ── Buttons: in jeder Gruppe gleich breit, über die volle Breite ── */
  .ueber__act,.weg__cta,.quick,.revcta__act,.ft__cta,.phead__act,.pcta__act{
    display:flex;flex-direction:column;align-items:stretch;
  }
  .hero__cta .pill,.ueber__act .pill,.weg__cta .pill,.quick .pill,
  .revcta__act .pill,.ft__cta .pill,.faq__side .pill,.philo__txt .pill,
  .mobil__in .pill,.band__act .pill{width:100%}
  .step__nav .pill{flex:1}

  /* ── Footer ── */
  .ft__cols{text-align:center}
  .ft__live{margin-inline:auto}
}

/* ══════════ Hero mobil: Foto zwischen Überschrift und Text ══════════ */
@media (max-width:1080px){
  .hero__grid{display:flex;flex-direction:column;gap:0}
  .hero__copy{display:contents}
  .hero__kick{order:1}
  .hero__h1{order:2;margin-bottom:1.2rem}
  .hero__me{order:3;margin:0 auto 1.6rem;max-width:400px;width:100%}
  .hero__lede{order:4}
  .hero__cta{order:5}
  .hero__trust{order:6}
}