/* =============================================================================
   Studio — Layout Module
   Konzept: Werkstatt-Editorial. Bild schwer, Text präzise.
   Rhythm: BREATHING → DENSE → SPLIT → LOUD → DENSE → BREATHING
   REGEL: NUR Layout + Spacing via CSS Variables. Keine Typografie. Keine Farben direkt.
   ============================================================================= */


/* =============================================================================
   PAGE WRAPPER
   ============================================================================= */

.studio-page {
  width:      100%;
  overflow-x: hidden;
  padding-top: calc(3rem + var(--space-md));
}


/* =============================================================================
   S1 — HERO (BREATHING · WHITE · HUGE)
   Text-only. Kein Bild. Uppercase-Statement.
   ============================================================================= */

.studio-hero {
  padding-inline:  var(--page-margin);
  padding-block:   var(--space-lg);
  min-height:      calc(100vh - 3rem - var(--space-md));
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
  gap:             var(--space-xl);
  border-bottom:   var(--border-hairline) solid var(--color-border);
}

.studio-hero__text {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
}

.studio-hero__eyebrow {
  display: block;
  color:   var(--color-fg-muted);
}

.studio-hero__statement {
  font-size: clamp(2.5rem, 5.5vw, 6rem);
}

.studio-hero__sub {
  max-width: 55ch;
}


/* =============================================================================
   S2 — STUDIO-INTRO (DENSE · 3/7 Asymmetrie)
   Label links, Fließtext rechts.
   ============================================================================= */

.studio-intro {
  padding-inline:  var(--page-margin);
  padding-block:   var(--space-xl);
  display:         grid;
  grid-template-columns: 3fr 7fr;
  gap:             var(--space-xl);
  border-bottom:   var(--border-hairline) solid var(--color-border);
}

.studio-intro__label {
  padding-top: 0.2em;
}

.studio-intro__body {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-md);
}


/* =============================================================================
   S3 — GRÜNDER (SPLIT · 50/50)
   Zwei Portraits nebeneinander.
   ============================================================================= */

.studio-founders {
  padding-inline: var(--page-margin);
  padding-block:  var(--space-xl);
  border-bottom:  var(--border-hairline) solid var(--color-border);
}

.studio-founders__heading {
  margin-bottom: var(--space-lg);
}

.studio-founders__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-md);
}

.studio-founders__item {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
}

.studio-founders__photo-wrap {
  aspect-ratio: 3 / 4;
  overflow:     hidden;
  background:   var(--color-bg-elevated);
}

.studio-founders__photo {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center top;
}

.studio-founders__meta {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
  padding-top:    var(--space-xs);
  border-top:     var(--border-hairline) solid var(--color-border);
}

.studio-founders__name {
  color: var(--color-fg);
}

.studio-founders__role {
  color: var(--color-fg-muted);
}

.studio-team__list {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   0;
  margin-top:            var(--space-lg);
  border-top:            var(--border-hairline) solid var(--color-border);
  list-style:            none;
}

.studio-team__person {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
  padding:        var(--space-md);
  border-right:   var(--border-hairline) solid var(--color-border);
  border-bottom:  var(--border-hairline) solid var(--color-border);
}

.studio-team__person:nth-child(3n) {
  border-right: none;
}

.studio-team__name {
  color: var(--color-fg);
}

.studio-team__role {
  color: var(--color-fg-muted);
}


/* =============================================================================
   S4 — WERKSTATT (LOUD · 4-Spalten-Grid)
   Werkstatt-Fotos in dichtem Portrait-Grid.
   ============================================================================= */

.studio-werkstatt {
  padding-inline: var(--page-margin);
  padding-block:  var(--space-xl);
  border-bottom:  var(--border-hairline) solid var(--color-border);
}

.studio-werkstatt__head {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  margin-bottom:   var(--space-lg);
}

.studio-werkstatt__location {
  color: var(--color-fg-muted);
}

.studio-werkstatt__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-sm);
}

.studio-werkstatt__img-wrap {
  aspect-ratio: 2 / 3;
  overflow:     hidden;
  background:   var(--color-bg-elevated);
}

.studio-werkstatt__img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center;
}


/* =============================================================================
   S5 — PROZESS (DENSE · Nummerierte Liste)
   5 Schritte. Kein sticky — schlichter als Restauration.
   ============================================================================= */

.studio-prozess {
  padding-inline: var(--page-margin);
  padding-block:  var(--space-xl);
  border-bottom:  var(--border-hairline) solid var(--color-border);
  display:        grid;
  grid-template-columns: 3fr 7fr;
  gap:            var(--space-xl);
}

.studio-prozess__label {
  padding-top: 0.2em;
}

.studio-prozess__steps {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-md);
}

.studio-prozess__step {
  display:    grid;
  grid-template-columns: 3rem 1fr;
  gap:        var(--space-sm);
  padding-bottom: var(--space-md);
  border-bottom:  var(--border-hairline) solid var(--color-border);
}

.studio-prozess__step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.studio-prozess__number {
  color:     var(--color-fg-muted);
  padding-top: 0.1em;
}

.studio-prozess__content {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
}

.studio-prozess__step-title {
  color: var(--color-fg);
}

.studio-prozess__step-body {
  color: var(--color-fg-muted);
}


/* =============================================================================
   S6 — STANDORT + KONTAKT (BREATHING)
   Adresse links — CTA rechts.
   ============================================================================= */

.studio-standort {
  padding-inline: var(--page-margin);
  padding-block:  var(--space-xl);
  display:        grid;
  grid-template-columns: 1fr 1fr;
  gap:            var(--space-xl);
  align-items:    end;
}

.studio-standort__heading {
  margin-bottom: var(--space-lg);
  grid-column:   1 / -1;
}

.studio-standort__address {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
}

.studio-standort__addr-line {
  color: var(--color-fg-muted);
}

.studio-standort__addr-separator {
  display:      block;
  height:       var(--border-hairline);
  background:   var(--color-border);
  margin-block: var(--space-sm);
}

.studio-standort__contact {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
}

.studio-standort__contact-link {
  color: var(--color-fg);
}

.studio-standort__contact-link:hover {
  color: var(--color-fg-muted);
}

.studio-standort__cta-col {
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  justify-content: flex-end;
  gap:             var(--space-sm);
}

.studio-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-xs);
  padding-block:   0.7em;
  padding-inline:  1.4em;
  border:          var(--border-hairline) solid var(--color-fg);
  cursor:          pointer;
  transition:      background var(--dur-quick) var(--ease-material),
                   color     var(--dur-quick) var(--ease-material);
}

.studio-btn:hover {
  background: var(--color-fg);
  color:      var(--color-bg);
}

.studio-link {
  color:       var(--color-fg-muted);
  transition:  color var(--dur-quick) var(--ease-material);
}

.studio-link:hover {
  color: var(--color-fg);
}


/* =============================================================================
   FOOTER
   ============================================================================= */

.studio-footer {
  padding-inline: var(--page-margin);
  padding-block:  var(--space-lg);
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  gap:            var(--space-md);
  border-top:     var(--border-hairline) solid var(--color-border);
}

.studio-footer__copy {
  color: var(--color-fg-muted);
}

.studio-footer__nav {
  display:    flex;
  gap:        var(--space-md);
  list-style: none;
}

.studio-footer__nav-link {
  color:      var(--color-fg-muted);
  transition: color var(--dur-quick) var(--ease-material);
}

.studio-footer__nav-link:hover {
  color: var(--color-fg);
}


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1024px) {
  .studio-werkstatt__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .studio-intro,
  .studio-prozess {
    grid-template-columns: 1fr;
    gap:                   var(--space-md);
  }

  .studio-standort {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .studio-founders__grid {
    grid-template-columns: 1fr;
  }

  .studio-team__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .studio-team__person:nth-child(3n) {
    border-right: var(--border-hairline) solid var(--color-border);
  }

  .studio-team__person:nth-child(2n) {
    border-right: none;
  }

  .studio-werkstatt__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .studio-standort {
    grid-template-columns: 1fr;
  }

  .studio-prozess__step {
    grid-template-columns: 2.5rem 1fr;
  }
}

@media (max-width: 480px) {
  .studio-werkstatt__grid {
    grid-template-columns: 1fr 1fr;
  }
}