/* ============================================================
   hauser-kommunikation.de — Seitenspezifische Styles
   Referenz: HK-Spec/web/<seite>.spec.json (Canvas 1920 px)
   Abschnitte: 1) Home  2) Leistungen  3) Über mich  4) Referenzen
               5) Impressum/Datenschutz
   ============================================================ */

html, body { overflow-x: clip; } /* Rays bluten kontrolliert über den Rand */

/* ============================================================
   1 — HOME
   ============================================================ */

/* 1.2 Hero */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 665fr) minmax(0, 665fr);
  column-gap: 2.2%;
  align-items: start;
}
.hero__copy h1 {
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-top: clamp(24px, 13.39vw, 257px);
}
.hero__link { display: inline-block; margin-top: 20px; }
.hero__media {
  position: relative;
  margin-top: clamp(0px, 5.16vw, 99px);
}
/* XD-Rohdaten: Pfad 218 bbox x1114…2060 / y289…993 (Foto 975/186, 665×753) */
.hero__ray {
  position: absolute;
  left: 20.9%;
  top: 13.7%;
  width: 142.2%;
  max-width: none;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.hero__cta { display: none; margin-top: 24px; }

@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); position: relative; }
  .hero__copy h1 { margin-top: 20px; }
  .hero__media { margin-top: 25px; }
  .hero__media picture img { width: 100%; } /* CTA liegt vollständig auf dem Foto (768) */
  /* XD Mobile: Kontakt-Button liegt auf dem Hero-Foto unten rechts (158×42) */
  .hero__cta {
    display: inline-flex;
    position: absolute;
    right: 19px;
    bottom: 32px;
    min-width: 158px;
  }
}

/* 1.3 Intro */
.intro { margin-top: clamp(64px, 13.2vw, 253px); }
.intro__title {
  /* Entscheidung 24.08.: schwarz (Desktop-XD zeigte blau, Mobile-XD/Spec schwarz — Kunde will schwarz) */
  color: var(--hk-black);
  max-width: 674px;
  margin-left: clamp(-139px, -7.24vw, 0px);
}
.intro__grid { margin-top: 0; }
.intro__media { margin-top: clamp(24px, 8.54vw, 164px); }
.intro__body { padding-top: 0; }
.intro__more { display: inline-block; margin-top: clamp(24px, 3.07vw, 59px); }

@media (max-width: 1024px) {
  .intro__title { margin-left: 0; }
  .intro__media { margin-top: 0; }
}
@media (max-width: 768px) {
  /* Mobile-Reihenfolge lt. XD: Headline → Foto → Bio → mehr */
  .intro__grid { display: flex; flex-direction: column; gap: 32px; }
  .intro__media { order: -1; }
  /* Sektions-Trennlinien lt. Mobile-XD (Linien 441–444/452, 326 px = Innenbreite) */
  .intro, .services, .referenzen-home, .einblicke, .team {
    border-top: 1px solid var(--hk-black);
    padding-top: 40px;
  }
}

/* 1.4 Was ich mache */
.services { margin-top: clamp(64px, 11.1vw, 213px); }
.services__title { margin-left: 50.9%; max-width: 804px; }
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 387fr));
  column-gap: 10.26%;
  max-width: 91.4%;
  margin-top: clamp(40px, 8.33vw, 160px);
}
.card__label { margin-top: 34px; }
.card__title { margin-top: 10px; }
.card__text {
  margin-top: 27px;
  line-height: var(--lh-list);
}
.card__arrow { margin-top: 40px; }

@media (max-width: 1024px) {
  .services__title { margin-left: 0; }
  /* Horizontale Scroll-Reihe (XD Mobile: Karten 214 px breit) */
  .services__grid {
    display: flex;
    gap: 24px;
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
    margin-top: 40px;
  }
  .services__grid > * {
    flex: 0 0 214px;
    scroll-snap-align: start;
  }
  /* Kartenreihenfolge mobil lt. XD: Moderation → Science Slam → Coaching */
  .services__grid .card:nth-child(2) { order: 3; }
  .services__grid .card:nth-child(3) { order: 2; }
  .card__label { margin-top: 17px; }
  .card__text { margin-top: 14px; }
  .card__arrow { margin-top: 24px; }
}

/* 1.5 Referenzen (statisch, KEIN Marquee auf Home) */
.referenzen-home { margin-top: clamp(64px, 10.4vw, 200px); }
.referenzen-home__grid { margin-top: clamp(40px, 7.19vw, 138px); }
.referenzen-home__grid img { width: 100%; }

/* 1.6 Einblicke in meine Arbeit */
.einblicke { margin-top: clamp(64px, 14.7vw, 283px); }
.einblicke__collage {
  position: relative;
  aspect-ratio: 1638 / 1718;
  margin-top: clamp(32px, 5.16vw, 99px);
}
.einblicke__collage picture { position: absolute; }
.einblicke__collage picture img { width: 100%; }
.einblicke__collage picture:nth-child(1) { left: 8.49%;  top: 0;      width: 40.6%;  }
.einblicke__collage picture:nth-child(2) { left: 59.4%;  top: 0;      width: 32.11%; }
.einblicke__collage picture:nth-child(3) { left: 0;      top: 32.71%; width: 32.23%; }
.einblicke__collage picture:nth-child(4) { left: 33.94%; top: 32.71%; width: 23.63%; }
.einblicke__collage picture:nth-child(5) { left: 67.9%;  top: 50.58%; width: 32.11%; }
.einblicke__collage picture:nth-child(6) { left: 8.36%;  top: 63.04%; width: 57.69%; }

@media (max-width: 1024px) {
  /* Horizontale Galerie 270×270 (XD Mobile) */
  .einblicke__collage {
    aspect-ratio: auto;
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
    margin-top: 36px;
  }
  .einblicke__collage picture {
    position: static;
    flex: 0 0 270px;
    width: 270px !important;
    scroll-snap-align: start;
  }
  .einblicke__collage picture img {
    width: 270px;
    height: 270px;
    object-fit: cover;
  }
}

/* 1.7 Team */
.team { margin-top: clamp(64px, 13.3vw, 255px); }
.team__quote { margin-left: 16.97%; max-width: 943px; }
.team__grid {
  display: grid;
  grid-template-columns: minmax(0, 665fr) minmax(0, 665fr);
  column-gap: 10.32%;
  max-width: 91.5%;
  margin-top: clamp(48px, 8.33vw, 160px);
}
.profile {
  display: grid;
  grid-template-columns: minmax(0, 248fr) minmax(0, 387fr);
  column-gap: 4.5%;
  align-items: start;
}
.profile__label { padding-top: clamp(0px, 2.81vw, 54px); }
.profile__name { margin-top: 4px; }
.profile__bio {
  margin-top: 16px;
  line-height: var(--lh-list);
}
.profile__more { display: inline-block; margin-top: 16px; }

@media (max-width: 1024px) {
  .team__quote { margin-left: 0; }
  /* Mobile: Profile nebeneinander scrollbar, Foto oben (XD Mobile) */
  .team__grid {
    display: flex;
    gap: 36px;
    max-width: none;
    overflow-x: auto;
    margin-top: 48px;
    padding-bottom: 16px;
  }
  .profile {
    display: block;
    flex: 0 0 270px;
  }
  .profile__media { width: 269px; }
  .profile__media img { width: 100%; }
  .profile__label { padding-top: 20px; }
}

/* ============================================================
   5 — IMPRESSUM / DATENSCHUTZ (schlichte Textseiten im Seitenstil)
   ============================================================ */
.legal { margin-top: clamp(40px, 6vw, 115px); }
.legal__body { max-width: 800px; }
.legal h1 { margin-bottom: clamp(32px, 4vw, 72px); }
.legal h2 {
  font-size: var(--fs-h3);
  margin-top: clamp(40px, 3.5vw, 64px);
  margin-bottom: 16px;
}
.legal h3 {
  font-size: var(--fs-list-title);
  margin-top: clamp(32px, 3vw, 48px);
  margin-bottom: 12px;
}
.legal p { margin-bottom: 1em; }
.legal ul { margin: 0 0 1em; padding-left: 1.2em; }
.legal li { line-height: var(--lh-body); }
.legal a { color: var(--hk-blue); font-weight: 700; }
.legal a:hover { color: var(--hk-black); }
.legal address { font-style: normal; }

/* ============================================================
   4 — REFERENZEN
   ============================================================ */

/* 4.1 Hero (XD x280/y174, 1360×746 — volle Contentbreite) */
.ref-hero { margin-top: clamp(24px, 4.53vw, 87px); }
.ref-hero img { width: 100%; }

/* 4.2 Logo-Marquee (XD y948, H 100; Streifen 7505×100) —
   einzige Marquee-Stelle der Website (HK-Spec/02, Interaktion 3).
   prefers-reduced-motion: base.css stoppt .marquee__track
   (animation: none) → der Streifen steht statisch. */
.ref-marquee {
  position: relative;
  margin-top: clamp(16px, 1.46vw, 28px);
}
.marquee { overflow: hidden; }
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 90s linear infinite;
}
.marquee__track picture { flex: 0 0 auto; }
.marquee__track img {
  height: 100px;
  width: auto;
  max-width: none;
}
@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

/* 4.3 Referenzliste (H1 x279/y1162; Liste x975, w665 → .split 526|665) */
.ref-liste { margin-top: clamp(56px, 5.94vw, 114px); }
.ref-liste__items {
  list-style: none;
  margin: 0;
  padding: clamp(0px, 6.72vw, 129px) 0 0; /* Listen-Top y1291 vs. H1 y1162 */
  line-height: var(--lh-list);
}
/* Design-Update 24.08.: Eintraege luftig gesetzt (wie Über-uns-Listen) */
.ref-liste__items li + li { margin-top: clamp(18px, 2.4vw, 46px); }

@media (max-width: 1024px) {
  .marquee__track img { height: 64px; }
  /* Liste einspaltig unter der Überschrift (.split kollabiert in base.css);
     mobil keine Kürzung — alle Einträge untereinander */
  .ref-liste__items { padding-top: 0; }
}

/* ============================================================
   2 — LEISTUNGEN
   Referenz: HK-Spec/web/2-leistungen.spec.json (Canvas 1920×6558)
   ============================================================ */

/* 2.1 Hero — H1 y344 (3 Anker-Zeilen), Absatz y589 (w526),
   Button y737, Bild 804×537 @ x836/y173 (30 px über die
   x975-Spalte hinaus → Spalten 526 | 804, Gap 30/1360 = 2.2%) */
.l-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 526fr) minmax(0, 804fr);
  column-gap: 2.2%;
  align-items: start;
}
.l-hero__copy h1 {
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-top: clamp(24px, 13.39vw, 257px); /* y344 − Header 87 */
}
.l-hero__copy h1 a { display: block; color: inherit; }
.l-hero__copy h1 a:hover { color: var(--hk-blue); }
.l-hero__intro {
  max-width: 526px;
  margin-top: clamp(24px, 2.45vw, 47px);   /* y589 */
}
.l-hero__cta { margin-top: clamp(24px, 1.46vw, 28px); } /* y737 */
.l-hero__media {
  position: relative;
  margin-top: clamp(0px, 4.48vw, 86px);    /* y173 − Header 87 */
}
.l-hero__media picture img { margin-left: auto; } /* rechtsbündig bis x1640 */

/* 2.2 / 2.3 / 2.5 Leistungs-Detailsektionen */
/* y1053: Abstand zum Hero-Flussende (~y779: Button-Unterkante) */
/* Sektions-Trennlinien lt. aktualisiertem Design (Screenshots 24.08.):
   Hairline fast über die volle Breite (24px Randabstand), zwischen allen
   Leistungs-Sektionen. Auf ≤1024 laufen die Linien in Contentbreite. */
.svc-detail::before,
.svc-list::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--hk-black);
  margin-bottom: clamp(40px, 4.16vw, 80px);
}
.svc-detail::before { margin-inline: calc(24px - var(--pad-content)); }
.svc-list::before { margin-inline: calc(24px - var(--pad-wide)); }

/* Letzte Linie unterhalb Science Slam (vor der Kontakt-Sektion) — Feedback 24.08. */
.svc-detail--science + .kontakt::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--hk-black);
  margin-inline: calc(24px - var(--pad-content));
  margin-bottom: clamp(40px, 4.16vw, 80px);
}
@media (max-width: 768px) {
  /* mobil hat .kontakt bereits die Standard-Trennlinie (border-top) */
  .svc-detail--science + .kontakt::before { display: none; }
}

.svc-detail--moderation { margin-top: clamp(80px, 14.27vw, 274px); }
/* y1769 (Bild): Abstand zum 2.2-Flussende ~y1596 */
.svc-detail--coaching { margin-top: clamp(64px, 9vw, 173px); }
/* y4359 (Bild): Abstand zum Listen-Flussende ~y4181 */
.svc-detail--science { margin-top: clamp(64px, 9.27vw, 178px); }

/* 2.2/2.5: Bild links (665) | Text rechts (665), Gap 30/1360 */
.svc-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 665fr) minmax(0, 665fr);
  column-gap: 2.2%;
  align-items: start;
}
/* Text beginnt 69/70 px unter der Bildoberkante (H2 y1122 vs. Bild y1053) */
.svc-detail__body { padding-top: clamp(0px, 3.59vw, 69px); }
/* 2.3 spiegelverkehrt via .split (526 | 665, Gap 169):
   Bild-Top y1769 = 28 px ÜBER Text-Top y1797 */
.svc-detail--coaching .svc-detail__body { padding-top: clamp(0px, 1.46vw, 28px); }

.svc-detail__label { margin: 10px 0 0; }
.svc-detail__text { margin-top: clamp(16px, 2.08vw, 40px); }  /* Body y1260 */
.svc-detail--coaching .svc-detail__text { margin-top: 20px; } /* Body y1915 */
.svc-detail--science .svc-detail__text { margin-top: clamp(16px, 2.55vw, 49px); } /* Body y4576 */

/* 2.4 Leistungsliste — Wide-Raster x141…1779 (1638):
   Nummer x141 (139) | Titel x280 (526 von 695 inkl. 169 Gap) |
   Beschreibung x975 (664 von 804, Ende bündig Content-Kante x1640) */
.svc-list { margin-top: clamp(64px, 7vw, 135px); } /* Row 1 y2441 vs. 2.3-Bildunterkante y2306 */
.svc-list__items { list-style: none; margin: 0; padding: 0; }
.svc-list__row {
  display: grid;
  grid-template-columns: minmax(0, 139fr) minmax(0, 695fr) minmax(0, 804fr);
  align-items: start;
}
.svc-list__row + .svc-list__row { margin-top: clamp(40px, 4.7vw, 90px); } /* XD-Row-Rhythmus */
.svc-list__num {
  font-family: var(--font-head);
  font-weight: 600; /* Cormorant Garamond SemiBold */
  font-size: var(--fs-num);
  line-height: 1;
}
.svc-list__title {
  font-size: var(--fs-list-title);
  line-height: 1.3;
  padding-right: 24.3%; /* 169/695 → Titelbreite 526 */
}
.svc-list__text {
  padding-top: clamp(0px, 3.9vw, 75px); /* XD: Beschreibung startet ~75px unter Row-Top */
  margin: 0;
  padding-right: 17.4%; /* 140/804 → Textbreite 664 */
}

/* Responsive Leistungen: ≤1024 einspaltig, Bild über Text */
@media (max-width: 1024px) {
  .l-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .l-hero__copy h1 { margin-top: 20px; }
  .l-hero__intro { margin-top: 20px; max-width: none; }
  .l-hero__cta { margin-top: 24px; }
  .l-hero__media { margin-top: 32px; }

  .svc-detail__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .svc-detail .svc-detail__body { padding-top: 0; }
  .svc-detail--coaching .svc-detail__media { order: -1; } /* Bild über Text */

  .svc-detail__media img { width: 100%; } /* einheitliche rechte Kante wie Hero */
  .svc-list__row { grid-template-columns: minmax(0, 1fr); }
  .svc-list__title { margin-top: 8px; padding-right: 0; }
  .svc-list__text { padding-top: 0; margin-top: 12px; padding-right: 0; }
  .svc-list__row + .svc-list__row { margin-top: 40px; }
}

/* ============================================================
   3 — ÜBER MICH
   Referenz: HK-Spec/web/3-ueber-mich.spec.json (Canvas 1920×5828)
   ============================================================ */

/* 3.1 Hero: Porträt links (526, x280/y186), H1 + Bio rechts (665, x975) */
.um-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 526fr) minmax(0, 665fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 8.8vw, 169px);
  align-items: start;
}
.um-hero__grid h1 {
  grid-column: 2;
  grid-row: 1;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-top: clamp(24px, 14.375vw, 276px); /* XD y363 − Header 87 */
}
.um-hero__media {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-top: clamp(0px, 5.16vw, 99px); /* XD y186 − Header 87 */
}
.um-hero__bio {
  grid-column: 2;
  grid-row: 2;
  margin-top: clamp(24px, 2.97vw, 57px); /* XD y485 − H1-Block */
  line-height: var(--lh-list);            /* XD 26/18 */
}

/* 3.2–3.4 Zweispalter: H2 links (666, x280), Liste rechts (665, x975) */
.um-row {
  display: grid;
  grid-template-columns: minmax(0, 666fr) minmax(0, 665fr);
  column-gap: clamp(24px, 1.51vw, 29px);
  align-items: start;
}
.um-row__title {
  text-transform: uppercase;
  letter-spacing: .03em;
}
/* Stil-Mix im XD: „(Auswahl)“ in Roboto 20 innerhalb der Larken-H2 */
.um-row .h2-annex {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: clamp(14px, 1.042vw, 20px);
  letter-spacing: .03em;
}
.um-row__body { line-height: var(--lh-list); }
/* Liste beginnt in XD an der H2-Unterkante: 2-zeilige H2 → +129, 1-zeilige → +64 */
.um-row__body--deep    { margin-top: clamp(0px, 6.72vw, 129px); }
.um-row__body--shallow { margin-top: clamp(0px, 3.33vw, 64px); }

.um-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Aktualisiertes Design (Screenshot 24.08.): Listeneinträge luftig gesetzt (~1 Leerzeile) */
.um-list li + li { margin-top: clamp(18px, 2.4vw, 46px); }
.um-list-intro { margin: 0 0 clamp(18px, 2.4vw, 46px); }

/* Sektionsabstände aus XD-Deltas (Flow-Unterkante → nächste Sektion) */
.um-preise   { margin-top: clamp(64px, 8.5vw, 163px); } /* Rhythmus lt. Design-Update 24.08. */
.um-projekte { margin-top: clamp(56px, 8.5vw, 163px); }
.um-formate  { margin-top: clamp(64px, 8.5vw, 163px); } /* vorher 467px XD-Leerraum */

/* 3.5 Team: wide-Raster, H2 x280, Fotos 387×478 ab x419, Text ab x975 */
.um-team { margin-top: clamp(64px, 8.5vw, 163px); }
.um-team__title {
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-left: 8.49%;  /* (280−141)/1638 */
}
.um-team__grid {
  display: grid;
  row-gap: clamp(48px, 6.25vw, 120px);
  margin-top: clamp(24px, 1.67vw, 32px);
}
.um-profile {
  display: grid;
  grid-template-columns: minmax(0, 387fr) minmax(0, 804fr);
  column-gap: 12.43%;   /* 169/1360 */
  margin-left: 16.97%;  /* Foto-Einzug (419−141)/1638 */
  align-items: start;
}
.um-profile__label { padding-top: clamp(0px, 2.6vw, 50px); } /* Label y3284 − Foto y3234 */
.um-profile__name { margin-top: 4px; }
.um-profile__bio {
  margin-top: 16px;
  max-width: 526px;
  line-height: var(--lh-list);
}

/* ---------- Responsive ≤1024: einspaltig nach Home-Muster ---------- */
@media (max-width: 1024px) {
  /* Hero-Reihenfolge mobil: H1 → Foto → Bio (wie Home-Intro) */
  .um-hero__grid { display: flex; flex-direction: column; }
  .um-hero__grid h1 { order: 1; margin-top: 20px; }
  .um-hero__media { order: 2; margin-top: 25px; }
  .um-hero__bio { order: 3; margin-top: 32px; }

  .um-row { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .um-row__body--deep,
  .um-row__body--shallow { margin-top: 0; }

  .um-preise, .um-projekte, .um-formate, .um-team { margin-top: 64px; }

  /* Team: Profile untereinander, Foto über Text (keine Scroll-Reihe) */
  .um-team__title { margin-left: 0; }
  .um-team__grid { row-gap: 48px; margin-top: 24px; }
  .um-profile { display: block; margin-left: 0; }
  .um-profile__media { max-width: 387px; }
  .um-profile__label { padding-top: 20px; }
}

@media (max-width: 768px) {
  .um-preise, .um-projekte, .um-formate, .um-team { margin-top: 48px; }
  .um-hero__bio { margin-top: 24px; }
}