/* studio | 3 architekten – Basis-Stylesheet
   Design-Werte aus Original-CSS extrahiert, siehe 00_Doku/DESIGN_REFERENZ.md */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: #fff;
  color: #111;
  font-family: helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.site-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */

.site-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 40px 0 20px;
}

.logo-link img {
  max-width: 260px;
}

.site-nav {
  display: flex;
  gap: 32px;
}

.site-nav a {
  font-family: helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #aaa;
  transition: color 0.2s ease;
}

.site-nav a:hover,
.site-nav a.active {
  color: #111;
}

/* Projekt-Detailseite */

.project-title {
  font-size: 18px;
  font-weight: 700;
  margin: 20px 0 24px;
}

.project-gallery-first,
.project-gallery-rest {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.project-gallery-rest {
  margin-top: 40px;
  margin-bottom: 48px;
}

.project-gallery-first img,
.project-gallery-rest img {
  width: 100%;
}

.project-meta {
  max-width: 700px;
  font-size: 14px;
  line-height: 1.3;
  margin-top: 20px;
}

.project-meta .meta-label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 400;
  margin: 0 0 2px;
}

.project-meta .meta-text {
  margin: 0 0 14px;
}

.meta-facts {
  margin-top: 10px;
}

.meta-fact-row {
  display: flex;
  margin-bottom: 2px;
}

.meta-fact-label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  width: 190px;
  flex-shrink: 0;
}

/* Pattern B: fetter Untertitel, keine Unterstreichung (Mehrheit der Projekte) */

.meta-subtitle {
  font-weight: 700;
  margin: 0 0 12px;
}

.meta-fact-label.plain {
  text-decoration: none;
}

.meta-facts-plain {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Projektübersicht (Grid mit Rollover) */

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0 40px;
}

.project-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eee;
}

.project-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.project-tile:hover img {
  transform: scale(1.06);
}

.tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  padding: 24px;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
}

.project-tile:hover .tile-overlay {
  background: rgba(0, 0, 0, 0.35);
}

.tile-title {
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-tile:hover .tile-title {
  opacity: 1;
}

/* Touch-Geräte (Smartphone/Tablet) kennen kein :hover — Titel dauerhaft
   sichtbar machen statt auf Hover zu warten */
@media (hover: none) {
  .tile-overlay {
    align-items: flex-end;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%);
  }

  .tile-title {
    opacity: 1;
  }
}

/* Zurück-Link */

.back-link {
  display: block;
  text-align: center;
  color: #aaa;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.02em;
  margin: 60px 0 20px;
}

.back-link:hover {
  color: #111;
}

/* Impressum / Datenschutz */

.legal-section {
  margin-bottom: 60px;
}

.legal-heading {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 24px;
}

.legal-block {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 24px;
}

.legal-block p {
  margin: 0 0 4px;
}

.legal-subheading {
  font-weight: 700;
  font-size: 14px;
  margin: 20px 0 8px;
}

.legal-text {
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 16px;
}

/* Footer */

.site-footer {
  text-align: center;
  color: #999;
  font-size: 16px;
  padding: 20px 0 60px;
}

/* Startseite: 2-spaltiges Mosaik-Raster aus Foto- und Text-Bild-Kacheln
   (nach ueberarbeiteter Vorlage Hero_test_V3.pdf, Konst-Ordner). Die
   Texte ("Architektur/Planung/Realisierung" etc.) sind vom Nutzer als
   fertige JPEGs geliefert und werden als Bild eingebunden statt als
   Live-Text - dadurch skaliert der Text als proportionale Bildkachel
   mit, statt auf kleinen Bildschirmen nur als schmale Zeile zu
   erscheinen. Zeilenhoehe ist in der Vorlage fuer alle vier Zeilen
   identisch, nur die Spaltenbreite wechselt zwischen zwei Vorlagen
   (aus dem PDF pixelgenau vermessen). */

.hero-mosaic {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 40px 0 60px;
}

.hero-mosaic-row {
  display: flex;
  gap: 2.6%;
}

.hero-mosaic-cell {
  display: block;
  min-width: 0;
  overflow: hidden;
}

.hero-mosaic-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Zeilentyp A (Zeile 1 + 3): schmale Kachel (~25,5%) + breite Kachel
   (~72%), dazwischen der einheitliche Zeilenabstand (~2,6%, s.o.) */
.hero-mosaic-row--a .hero-mosaic-cell:first-child {
  flex: 0 0 25.5%;
  aspect-ratio: 262 / 328;
}

/* Text-Bild-Kacheln (Architektur/Planung/Realisierung, Idee und Raum):
   Quellbild ist etwas schmaler/hoeher als die Zielspalte, object-fit:cover
   schneidet daher oben/unten etwas ab. Der Text sitzt im unteren Drittel
   des Bildes - Zuschnitt bewusst an der Unterkante verankern, damit
   garantiert oben (leere Flaeche) statt am Text beschnitten wird. */
.hero-mosaic-row--a .hero-mosaic-cell:first-child img {
  object-position: bottom;
}

.hero-mosaic-row--a .hero-mosaic-cell:last-child {
  flex: 0 0 71.8%;
  aspect-ratio: 737 / 329;
}

/* Bildausschnitt des Schaefer-Fotos an die Original-PDF-Vorlage
   angeglichen (Nutzer hatte dort einen bewussten, nicht zentrierten
   Ausschnitt gewaehlt - Position per Bildvergleich mit der Vorlage
   ermittelt statt zentriert zuzuschneiden). Das Tangshan-Foto liegt
   inzwischen bereits vom Nutzer passend zugeschnitten vor, braucht
   daher keine object-position-Korrektur mehr. */
.hero-mosaic-cell--schaefer img {
  object-position: center 59%;
}

/* Zeilentyp B (Zeile 2 + 4): mittelbreite Kachel (~41%) + breite Kachel
   (~56%), dazwischen derselbe Zeilenabstand wie Typ A */
.hero-mosaic-row--b .hero-mosaic-cell:first-child {
  flex: 0 0 41.3%;
  aspect-ratio: 424 / 329;
}

.hero-mosaic-row--b .hero-mosaic-cell:last-child {
  flex: 0 0 56.1%;
  aspect-ratio: 576 / 328;
}

/* Text sitzt in diesen Bildern (Weiterbauen & Weiterdenken, Qualitaet
   vor Ort) unten rechts mit wenig Rand zur Kante. Zuschnitt deshalb
   explizit an dieser Ecke verankert statt zentriert (Browser-Default) -
   so trifft ein eventueller Zuschnitt durch Rundungsunterschiede
   zwischen Geraeten/Engines immer nur die leere Flaeche oben/links,
   nie den Text. */
.hero-mosaic-row--b .hero-mosaic-cell:last-child img {
  object-position: right bottom;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  border: 1px solid #6884a3;
  color: #6884a3;
  background-color: #fff;
  border-radius: 5px;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 40px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.hero-btn:hover {
  background-color: #6884a3;
  color: #fff;
}

/* Büro-Seite */

.buro-content {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}

.buro-intro p {
  margin: 0;
  font-size: 16px;
}

.buro-bullets {
  margin-top: 16px;
}

.buro-bullets p {
  margin: 0;
  font-size: 16px;
}

.team-row {
  display: flex;
  gap: 40px;
  margin-top: 40px;
}

.team-col {
  flex: 1;
}

.team-col img {
  width: 65%;
}

.team-name {
  margin: 16px 0 8px;
  font-size: 16px;
}

.team-info {
  font-size: 16px;
  margin: 0 0 8px;
}

.buro-photos-row {
  display: flex;
  gap: 24px;
  margin-top: 80px;
}

.buro-photo-col {
  flex: 1;
  min-width: 0;
}

.buro-photos-row img {
  width: 100%;
  aspect-ratio: 1920 / 2648;
  object-fit: cover;
}

.impressum-btn-wrap {
  text-align: center;
  margin-top: 40px;
}

/* Tablet */
@media (max-width: 932px) {
  .site-container {
    padding: 0 16px;
  }

  .site-header {
    padding: 24px 0 16px;
  }

  .logo-link img {
    max-width: 200px;
  }

  .site-nav {
    gap: 20px;
  }

  .site-nav a {
    font-size: 16px;
  }

  .project-title {
    font-size: 18px;
  }

  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .tile-title {
    font-size: 16px;
  }

  .buro-content {
    width: 100%;
    max-width: none;
  }

  .tile-overlay {
    padding: 16px;
  }

  .hero-mosaic {
    gap: 16px;
    margin: 24px 0 40px;
  }

  .hero-mosaic-row {
    gap: 16px;
  }
}

/* Mobile */
@media (max-width: 540px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .site-nav {
    gap: 16px;
  }

  .hero-mosaic {
    gap: 12px;
    margin: 20px 0 32px;
  }

  .hero-mosaic-row {
    flex-direction: column;
    gap: 12px !important;
  }

  .hero-mosaic-row--a .hero-mosaic-cell:first-child,
  .hero-mosaic-row--a .hero-mosaic-cell:last-child,
  .hero-mosaic-row--b .hero-mosaic-cell:first-child,
  .hero-mosaic-row--b .hero-mosaic-cell:last-child {
    flex-basis: auto;
    width: 100%;
  }

  /* Reihenfolge auf dem Smartphone (Nutzerwunsch): Foto immer vor der
     zugehoerigen Textkachel, damit der Text wie eine Bildunterschrift
     wirkt statt vorab gelesen zu werden. Zeile 1+3 (Typ A) haben im
     Code die Textkachel zuerst (fuer die Desktop-Zickzack-Optik) -
     auf Mobile per order getauscht. Zeile 2+4 (Typ B) haben im Code
     bereits Foto zuerst, bleiben unveraendert - damit folgen jetzt
     alle vier Zeilen einheitlich demselben Muster (Foto, dann Text). */
  .hero-mosaic-row--a .hero-mosaic-cell:first-child {
    order: 2;
  }

  .hero-mosaic-row--a .hero-mosaic-cell:last-child {
    order: 1;
  }

  /* Querformat-Textkacheln (Weiterbauen & Weiterdenken, Qualität vor
     Ort) sind auf dem Desktop bewusst breit/flach - auf dem
     Smartphone macht dieselbe Breite wie alle anderen Kacheln sie nur
     etwa halb so hoch wie die Hochkant-Kacheln, der Text wirkt dadurch
     deutlich kleiner. Seitenverhaeltnis hier gezielt enger (hoeher),
     das Bild wird per object-fit:cover automatisch mehr hineingezoomt
     - Zuschnitt rechtsbuendig, da der Text in beiden Kacheln rechts
     sitzt und so nicht abgeschnitten wird. */
  .hero-mosaic-row--b .hero-mosaic-cell:last-child {
    aspect-ratio: 4 / 3;
  }

  .hero-mosaic-row--b .hero-mosaic-cell:last-child img {
    object-position: right;
  }

  /* Hochkant-Textkacheln (Architektur/Planung/Realisierung, Idee und
     Raum) auf dieselbe Hoehe wie die Querformat-Textkacheln oben
     zugeschnitten - dadurch sind auf dem Smartphone alle vier grauen
     Kacheln gleich hoch statt mal hoch, mal flach. object-position
     bleibt bottom (siehe oben), der Zuschnitt entfernt daher nur die
     leere Flaeche oben, der Text bleibt vollstaendig sichtbar. */
  .hero-mosaic-row--a .hero-mosaic-cell:first-child {
    aspect-ratio: 4 / 3;
  }

  .project-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .site-nav a {
    font-size: 14px;
  }

  .project-title {
    font-size: 17px;
  }

  .project-gallery-first,
  .project-gallery-rest {
    gap: 16px;
  }

  .project-gallery-rest {
    margin-top: 24px;
    margin-bottom: 32px;
  }

  .meta-fact-row {
    flex-direction: column;
  }

  .team-row {
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
  }

  .team-col img {
    width: 50%;
  }

  .buro-photos-row {
    flex-direction: column;
    gap: 16px;
    margin-top: 40px;
  }

  .meta-fact-label {
    width: auto;
  }
}