/* ==========================================================================
   The Gallery Hair and More — Design Entwurf v2
   Palette 1:1 von der Live-Seite gemessen: Weiß / Anthrazit #242424 / Beige #e1e1da
   Kein Grün. Typografie: Italiana (Display) + Manrope (Text)
   Editorial, asymmetrisch, EIN Signature-Scroll-Effekt statt vieler kleiner
   ========================================================================== */

:root{
  --c-white: #ffffff;
  --c-beige: #e9e5da;
  --c-beige-deep: #ddd7c8;
  --c-ink: #242424;
  --c-ink-soft: rgba(36,36,36,.66);
  --c-ink-faint: rgba(36,36,36,.34);
  --c-line: rgba(36,36,36,.14);
  --c-line-strong: rgba(36,36,36,.28);
  --c-paper: #f7f5f0;

  --font-display: 'Italiana', 'Times New Roman', serif;
  --font-body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;

  --space-1: 0.618rem;
  --space-2: 1rem;
  --space-3: 1.618rem;
  --space-4: 2.618rem;
  --space-5: 4.236rem;
  --space-6: 6.854rem;
  --space-7: 9rem;

  --fs-xs: .78rem;
  --fs-sm: clamp(0.92rem, 0.88rem + 0.2vw, 1rem);
  --fs-md: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-lg: clamp(1.8rem, 1.4rem + 1.8vw, 2.9rem);
  --fs-xl: clamp(2.6rem, 1.8rem + 3.4vw, 4.8rem);
  --fs-hero: clamp(2.05rem, 0.8rem + 5.7vw, 5.9rem);

  --ease: cubic-bezier(.16,.84,.44,1);
  --dur: .9s;

  --container: min(90vw, 1440px);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body{
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .005em;
  margin: 0;
}
h2{ font-size: var(--fs-xl); }
h3{ font-size: var(--fs-lg); }

em, .accent-serif{
  font-family: var(--font-display);
  font-style: italic;
  color: inherit;
}

.eyebrow{
  font-family: var(--font-body);
  font-weight: 500;
  font-style: normal;
  font-size: var(--fs-xs);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0 0 var(--space-2);
}
.eyebrow--on-dark{ color: rgba(255,255,255,.68); }

.body-lg{ font-size: var(--fs-md); font-weight: 300; line-height: 1.75; color: var(--c-ink-soft); }

/* ---------- progress line ---------- */
.progress-line{
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--c-ink);
  z-index: 999; transition: width .08s linear;
}

/* ---------- reveal (bidirectional scroll reveal) ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}
[data-reveal].in-view{ opacity: 1; transform: translateY(0); }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .95em 2.1em;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.btn--solid{ background: var(--c-ink); color: var(--c-white); }
.btn--solid:hover{ background: #000; transform: translateY(-2px); }
.btn--outline{ border-color: var(--c-line-strong); color: var(--c-ink); }
.btn--outline:hover{ border-color: var(--c-ink); background: var(--c-ink); color: var(--c-white); }
.btn--text{ padding: .3em 0; letter-spacing: .1em; opacity: .8; border-bottom: 1px solid var(--c-line-strong); border-radius: 0; }
.btn--text:hover{ opacity: 1; border-color: var(--c-ink); }

/* ==========================================================================
   HEADER — dunkler Streifen, wie im Original
   ========================================================================== */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 500;
  background: var(--c-ink);
  padding: 1.15rem 0;
  transition: padding .5s var(--ease);
}
.site-header.is-scrolled{ padding: .7rem 0; box-shadow: 0 8px 30px rgba(0,0,0,.12); }
.site-header__inner{
  width: var(--container); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  color: var(--c-white);
}

.logo{ display: flex; flex-direction: column; line-height: 1; }
.logo__main{
  font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + 0.9vw, 1.55rem);
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-white);
}
.logo__sub{
  font-family: var(--font-body); font-weight: 200; font-size: .6em;
  letter-spacing: .38em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: .4em;
}

.main-nav ul{ display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.main-nav a{
  position: relative; font-size: var(--fs-sm); letter-spacing: .05em;
  padding-bottom: .3em; color: rgba(255,255,255,.82);
}
.main-nav a::after{
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--c-white); transition: right .45s var(--ease);
}
.main-nav a:hover{ color: var(--c-white); }
.main-nav a:hover::after{ right: 0; }

.nav-toggle{ display: none; }

@media (max-width: 920px){
  .main-nav{
    position: fixed; inset: 0; z-index: 400;
    background: var(--c-ink);
    display: flex; align-items: center; justify-content: center;
    transform: translateY(-100%);
    transition: transform .5s var(--ease);
  }
  .main-nav.is-open{ transform: translateY(0); }
  .main-nav ul{ flex-direction: column; text-align: center; gap: var(--space-4); }
  .main-nav a{ font-size: var(--fs-lg); font-family: var(--font-display); letter-spacing: .02em; }
  .nav-toggle{
    display: flex; flex-direction: column; gap: 6px; z-index: 401;
    background: none; border: 0; padding: 8px; cursor: pointer;
  }
  .nav-toggle span{ width: 24px; height: 1px; background: var(--c-white); transition: transform .35s var(--ease), opacity .35s var(--ease); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

/* ==========================================================================
   HERO — dunkel, zentriert, nächstes Abteil scrollt optisch drüber
   ========================================================================== */
.hero{
  position: fixed; inset: 0;
  height: 100vh; height: 100svh;
  z-index: 0;
  background: var(--c-ink);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* muss exakt der Hero-Höhe entsprechen -> reserviert genau so viel Scrollstrecke,
   wie der fixierte Hero groß ist, bevor das nächste Abteil ihn optisch überdeckt */
.hero-spacer{ height: 100vh; height: 100svh; }

/* chaotisch verstreute Foto-Collage im Hintergrund — Mitte bleibt für den
   Inhalt frei, ein radialer Verlauf sichert das zusätzlich ab */
.hero__gallery{ position: absolute; inset: 0; z-index: 0; }

.hero__scatter{ position: absolute; margin: 0; }

.hero__scatter-media{
  position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden;
  box-shadow: 0 25px 50px -18px rgba(0,0,0,.6);
  will-change: transform;
}
.hero__scatter-media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(.2) contrast(1.05) brightness(.82);
  will-change: transform;
}

/* Bauhaus-Kasten hinter ausgewählten Bildern — beige Variante der Signature,
   Struktur bereit für einen späteren Parallax-Zoom-Out beim Scrollen */
.hero__scatter-box{
  position: absolute; top: 10%; left: -10%; width: 100%; height: 100%;
  background: var(--c-beige); z-index: 0; will-change: transform;
}
.hero__scatter-box--right{ left: auto; right: -10%; }

.hero__scatter--1{ top: 3%;  left: 4%;  width: 15vw; aspect-ratio: 4/5; transform: rotate(-9deg); z-index: 3; }
.hero__scatter--2{ top: 6%;  left: 76%; width: 12vw; aspect-ratio: 3/4; transform: rotate(8deg);  z-index: 2; }
.hero__scatter--3{ top: 58%; left: 3%;  width: 14vw; aspect-ratio: 4/5; transform: rotate(6deg);  z-index: 4; }
.hero__scatter--4{ top: 62%; left: 78%; width: 15vw; aspect-ratio: 4/5; transform: rotate(-5deg); z-index: 2; }
.hero__scatter--5{ top: 1%;  left: 34%; width: 10vw; aspect-ratio: 1/1; transform: rotate(4deg);  z-index: 1; }
.hero__scatter--6{ top: 75%; left: 40%; width: 11vw; aspect-ratio: 4/5; transform: rotate(-3deg); z-index: 1; }
.hero__scatter--7{ top: 26%; left: 0%;  width: 11vw; aspect-ratio: 4/5; transform: rotate(-11deg);z-index: 2; }
.hero__scatter--8{ top: 30%; left: 86%; width: 12vw; aspect-ratio: 4/5; transform: rotate(9deg);  z-index: 3; }
.hero__scatter--10{ top: 81%; left: 20%; width: 12vw; aspect-ratio: 4/5; transform: rotate(-7deg); z-index: 2; }
.hero__scatter--11{ top: 84%; left: 58%; width: 10vw; aspect-ratio: 4/5; transform: rotate(5deg);  z-index: 1; }
.hero__scatter--13{ top: 46%; left: 91%; width: 8vw;  aspect-ratio: 1/1; transform: rotate(13deg); z-index: 2; }
.hero__scatter--15{ top: 17%; left: 62%; width: 8vw;  aspect-ratio: 3/4; transform: rotate(-8deg); z-index: 2; }
.hero__scatter--17{ top: 9%;  left: 46%; width: 7vw;  aspect-ratio: 1/1; transform: rotate(-6deg); z-index: 1; }
.hero__scatter--18{ top: 40%; left: 16%; width: 9vw;  aspect-ratio: 4/5; transform: rotate(8deg);  z-index: 1; }
.hero__scatter--19{ top: 66%; left: 72%; width: 8vw;  aspect-ratio: 4/5; transform: rotate(-8deg); z-index: 1; }

.hero__gallery-overlay{
  position: absolute; inset: 0; z-index: 10;
  background: radial-gradient(48% 46% at 50% 50%, rgba(20,20,19,.97) 0%, rgba(20,20,19,.75) 55%, rgba(20,20,19,0) 100%);
}

@media (max-width: 860px){
  .hero__scatter{ width: 26vw !important; }
  .hero__scatter--5, .hero__scatter--6,
  .hero__scatter--11, .hero__scatter--13,
  .hero__scatter--15, .hero__scatter--17,
  .hero__scatter--18, .hero__scatter--19{ display: none; }
}

.hero__content{
  position: relative; z-index: 1;
  width: min(90vw, 46rem); margin: 0 auto;
  text-align: center; color: var(--c-white);
  padding: 0 var(--space-3);
  will-change: transform, filter;
}

.hero__logo{ display: inline-flex; align-items: center; margin-bottom: var(--space-5); }
.hero__logo .logo__main{ font-size: clamp(1.6rem, 1.3rem + 1.8vw, 2.6rem); }
.hero__logo .logo__sub{ margin-top: .55em; }

.hero__title{
  font-size: var(--fs-hero);
  line-height: .95;
  margin-bottom: var(--space-5);
}
.hero__title .line{ display: block; overflow: hidden; }
.hero__title span{ display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); }
.hero.is-ready .hero__title span{ transform: translateY(0); }
.hero__title .line:nth-child(2) span{ transition-delay: .08s; }
.hero__title em{ font-style: italic; }

.hero__actions{ display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
.hero__cta.btn--solid{ background: var(--c-white); color: var(--c-ink); }
.hero__cta.btn--solid:hover{ background: var(--c-beige); }

/* ==========================================================================
   INTRO — rastet komplett oben ein (Text + Bild-Collage), hält einen
   Bildschirm lang, danach scrollt die Galerie optisch drüber
   ========================================================================== */
.intro{ position: relative; z-index: 1; }
.intro__stage{
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--c-white);
  display: flex; align-items: center;
}
.intro__pin-wrap{
  width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 6fr 5fr; gap: var(--space-6);
  align-items: center;
}
.intro__visual{ position: relative; }
/* kleine chaotische Bild-Collage rechts, gleiche Bauhaus-Box-Signatur wie im Hero */
.intro__gallery{ position: relative; width: 100%; aspect-ratio: 853/986; }
.intro__scatter{ position: absolute; margin: 0; }
.intro__scatter-media{
  position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.35);
  will-change: transform;
}
.intro__scatter-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.intro__scatter-box{
  position: absolute; top: 10%; left: -10%; width: 100%; height: 100%;
  background: var(--c-beige); z-index: 0; will-change: transform;
}
.intro__scatter-box--right{ left: auto; right: -10%; }

.intro__scatter--1{ top: 0%;  left: 4%;  width: 40%; aspect-ratio: 4/5; transform: rotate(-4deg); z-index: 2; }
.intro__scatter--2{ top: 4%;  left: 54%; width: 40%; aspect-ratio: 3/4; transform: rotate(5deg);  z-index: 3; }
.intro__scatter--3{ top: 48%; left: 0%;  width: 38%; aspect-ratio: 4/5; transform: rotate(4deg);  z-index: 3; }
.intro__scatter--4{ top: 52%; left: 58%; width: 36%; aspect-ratio: 4/5; transform: rotate(-5deg); z-index: 2; }
.intro__scatter--5{ top: 32%; left: 33%; width: 34%; aspect-ratio: 1/1; transform: rotate(7deg);  z-index: 4; }

.intro__scroll-col{ display: flex; flex-direction: column; justify-content: center; padding: var(--space-5) 0; }
.intro__scroll-col h2{ margin-bottom: var(--space-3); max-width: 14ch; }
.intro__scroll-col p{ margin: 0 0 var(--space-3); }

.stat-row{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
  margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--c-line);
}
.stat{ display: flex; flex-direction: column; gap: .3em; }
.stat__num{ font-family: var(--font-display); font-size: var(--fs-md); }
.stat__label{ font-size: .82rem; letter-spacing: .02em; color: var(--c-ink-soft); }

@media (max-width: 860px){
  /* auf kleinen Screens kein Pin — Text ist zu lang, um in einen Bildschirm zu passen */
  .intro__stage{ position: static; height: auto; overflow: visible; padding: var(--space-6) 0; }
  .intro__pin-wrap{ grid-template-columns: 1fr; }
  .intro__visual{ margin-top: var(--space-5); max-width: 20rem; }
}

/* ==========================================================================
   LEISTUNGEN — sticky, fixe Überschrift oben; darunter lösen sich die drei
   Punkte per Wisch-Linie ab, die direkt (ohne Timer) an die Scroll-Position
   gekoppelt ist — hoch und runter scrubbar, wie die Maske im Galerie-Abteil
   ========================================================================== */
.services{ position: relative; z-index: 3; }
.services__pin{
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--c-white);
}
.services__split{ display: flex; height: 100%; }

/* linke Hälfte: vertikal zentriert — Fortschrittsleiste, daneben Master-
   Überschrift + der eine aktive Punkt */
.services__left{
  position: relative;
  width: 50%; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 4rem clamp(2rem, 5vw, 5rem);
}
.services__master{ margin-bottom: var(--space-5); }
.services__master h2{ max-width: 13ch; }

/* gestapelte Vorhänge: jede Übergangs-Ebene steigt für sich von unten hoch,
   nie umgekehrt — dunkel deckt weiß, danach deckt ein zweiter, heller
   Vorhang den dunklen wieder zu. Beide immer bottom-up, nie top-down. */
.services__left-curtain{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 4rem clamp(2rem, 5vw, 5rem);
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
  overflow: hidden;
  pointer-events: none;
}

.services__left-curtain--dark{ z-index: 2; background: var(--c-ink); }
.services__left-curtain--dark .eyebrow{ color: rgba(255,255,255,.68); }
.services__left-curtain--dark h2{ color: var(--c-white); }
.services__left-curtain--dark .services__item h3{ color: var(--c-white); }
.services__left-curtain--dark .services__item p{ color: rgba(255,255,255,.82); }
.services__left-curtain--dark .services__progress{ background: rgba(255,255,255,.25); }
.services__left-curtain--dark .services__progress-fill{ background: var(--c-white); }

.services__left-curtain--light{ z-index: 3; background: var(--c-white); }

/* Fortschrittsleiste links, genau so hoch wie der Inhalt (Master + Punkt)
   rechts daneben — kein eigener Stretch auf die ganze Boxhöhe */
.services__body{ display: flex; gap: var(--space-4); align-items: stretch; }
.services__progress{
  position: relative; flex: none; width: 2px;
  background: var(--c-line-strong);
}
.services__progress-fill{
  position: absolute; left: 0; bottom: 0; width: 100%; height: 0%;
  background: var(--c-ink);
}
.services__content{ flex: 1; }

/* nur EIN Punkt gleichzeitig sichtbar, ohne Zahl — alle Items liegen
   absolut übereinander (wie die Bilder rechts), der aktive blendet ein */
.services__list{ position: relative; min-height: 9rem; list-style: none; margin: 0; padding: 0; }
.services__item{
  position: absolute; inset: 0 0 auto 0; margin: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease;
}
.services__item.is-active{ opacity: 1; pointer-events: auto; }
.services__item h3{ font-size: var(--fs-lg); margin: 0 0 .4em; color: var(--c-ink); }
.services__item p{ color: var(--c-ink-soft); max-width: 38ch; margin: 0; }

/* rechte Hälfte: randloses Vollbild, kein Kasten, 3 Bilder lösen sich per Wisch-Linie ab */
.services__right{ position: relative; width: 50%; height: 100%; overflow: hidden; }
.services__image{ position: absolute; inset: 0; margin: 0; overflow: hidden; }
.services__image img{ width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }
.services__image:nth-child(1){ z-index: 1; }
.services__image:nth-child(2){ z-index: 2; opacity: 0; will-change: opacity; }
.services__image:nth-child(3){ z-index: 3; opacity: 0; will-change: opacity; }

@media (max-width: 860px){
  .services__split{ flex-direction: column; }
  .services__left, .services__right{ width: 100%; }
  .services__right{ height: 42vh; }
  .services__left{ height: 58vh; padding: 2rem clamp(1.2rem, 5vw, 2rem); }
  .services__left-curtain{ padding: 2rem clamp(1.2rem, 5vw, 2rem); }
}

/* ==========================================================================
   GALERIE — gepinnte Quer-Scroll-Sektion (Signature-Effekt)
   ========================================================================== */
.hslider{ position: relative; z-index: 2; background: var(--c-beige); }
.hslider__pin{
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  padding: 8rem 0 5.5rem;
  display: flex; flex-direction: column; justify-content: center;
}
.hslider__head{
  position: absolute; top: 8rem; left: 0; z-index: 2;
  width: var(--container); margin: 0 auto; left: 50%; transform: translateX(-50%);
}
.hslider__track{
  display: flex; align-items: center; gap: var(--space-5);
  padding: 0 0 0 24vw;
  will-change: transform;
}

/* jede Unterabteilung: großes Bild + Headline/Textfeld, immer gleiche Reihenfolge (Bild links, Text rechts) */
.hslider__slide{
  position: relative; flex: 0 0 auto; width: min(58vw, 900px);
  display: flex; align-items: center; gap: var(--space-5);
}

/* Bauhaus-Element: dunkler Kasten rechts vom Bild — eigene, langsamere Tempo-Ebene */
.hslider__slide-visual{ position: relative; flex: 0 0 46%; aspect-ratio: 853/986; }

.hslider__slide-frame{
  position: absolute; top: 20%; left: 18%; width: 100%; height: 100%;
  background: var(--c-ink); z-index: 0;
  will-change: transform;
}

.hslider__slide-media{
  position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden;
  will-change: transform;
}
.hslider__slide-media img{ width: 100%; height: 100%; object-fit: cover; }

/* Stapelreihenfolge: Kasten unten (0) < Bild (1) < Schrift oben (2) */
.hslider__slide-content{ position: relative; z-index: 2; flex: 1; will-change: transform; }
.hslider__slide-cap{
  font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.4vw, 4.2rem);
  line-height: .92; margin: 0; color: var(--c-ink);
}
.hslider__slide-text{ font-size: var(--fs-sm); color: var(--c-ink-soft); max-width: 30ch; margin: 0; }

/* Pixelgenaue Farbmaske: eine helle Textkopie liegt exakt über der dunklen und
   wird per clip-path nur dort sichtbar, wo sie wirklich auf dem Kasten liegt. */
.hslider__mask{ position: relative; }
.hslider__mask--cap{ margin: 0 0 var(--space-3); }

.hslider__slide-cap--light,
.hslider__slide-text--light{
  position: absolute; inset: 0; margin: 0;
  pointer-events: none;
  clip-path: inset(0 100% 100% 0);
  will-change: clip-path;
}
.hslider__slide-cap--light{ color: var(--c-white); }
.hslider__slide-text--light{ color: rgba(255,255,255,.8); }

.hslider__slide:nth-child(even){ margin-top: var(--space-3); }

@media (max-width: 860px){
  .hslider__slide{
    width: min(86vw, 480px); flex-direction: column; align-items: flex-start; gap: var(--space-3);
  }
  .hslider__slide-visual{ flex-basis: auto; width: 100%; }
  .hslider__slide-frame{ top: auto; left: auto; bottom: -8%; right: -8%; width: 55%; height: 55%; }
}

/* ==========================================================================
   PHILOSOPHY — pinned Zitat, hell
   ========================================================================== */
.philosophy{ height: 240vh; position: relative; z-index: 4; background: var(--c-white); }
.philosophy__pin{
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--space-4);
}
.philosophy__text{
  max-width: 22ch; margin: 0 auto; text-align: center;
  font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.2;
}
.philosophy__text .word{ color: var(--c-ink-faint); transition: color .25s ease; }
.philosophy__text .word.is-lit{ color: var(--c-ink); }
.philosophy__text .word.is-accent{ font-style: italic; }

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.contact{ position: relative; z-index: 5; padding: var(--space-6) 0; background: var(--c-paper); }
.contact__inner{
  width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
}
.hours{ width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: var(--fs-md); }
.hours td{ padding: .7em 0; border-bottom: 1px solid var(--c-line); }
.hours td:last-child{ text-align: right; font-family: var(--font-display); font-size: 1.2em; }
.fine-print{ font-size: .85rem; color: var(--c-ink-soft); line-height: 1.6; }

address{ font-style: normal; margin: var(--space-3) 0; font-size: var(--fs-md); line-height: 1.7; }
.contact-link{ display: inline-block; border-bottom: 1px solid var(--c-line-strong); padding-bottom: .1em; transition: border-color .3s; }
.contact-link:hover{ border-color: var(--c-ink); }
.socials{ display: flex; gap: var(--space-3); margin: var(--space-3) 0 var(--space-4); }
.socials a{ font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; opacity: .68; }
.socials a:hover{ opacity: 1; }

@media (max-width: 860px){
  .contact__inner{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ position: relative; z-index: 6; background: var(--c-ink); color: var(--c-white); padding: var(--space-5) 0 var(--space-4); }
.site-footer__inner{
  width: var(--container); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.logo--footer{ opacity: .95; }
.footer-nav{ display: flex; flex-wrap: wrap; gap: var(--space-3); }
.footer-nav a{ font-size: .85rem; letter-spacing: .04em; color: rgba(255,255,255,.7); }
.footer-nav a:hover{ color: var(--c-white); }
.site-footer__copy{ width: 100%; margin-top: var(--space-4); font-size: .78rem; color: rgba(255,255,255,.4); }

/* ==========================================================================
   Section container helper
   ========================================================================== */
.intro__pin-wrap, .contact__inner, .site-header__inner, .site-footer__inner{
  max-width: 1440px;
}