/* ============================================================
   abschnitte.css - Die vier Inhaltsabschnitte der Startseite
   01 Allpackers · 02 Was ich mache · 03 Wer ich bin · Kontakt
   ============================================================ */

/* ============================================================
   01 - Projekt
   ============================================================ */

.projekt__kopf {
  margin-bottom: var(--raum-3);
}

.projekt__angaben {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1) var(--raum-4);
  margin-top: var(--raum-2);
  font-size: var(--text-meta);
  letter-spacing: var(--sperr-meta);
  text-transform: uppercase;
  color: var(--farbe-tinte-leise);
}

/* Der Status wird offen ausgewiesen, nicht versteckt. */
.projekt__status { color: var(--farbe-signal); }

.projekt__bild {
  margin-block: var(--raum-4);
  border: 1px solid var(--linie-stark);
  background-color: var(--farbe-flaeche-leicht);
}

.projekt__bild img {
  width: 100%;
  aspect-ratio: 1600 / 1099;
  object-fit: cover;
}

.projekt__text > p + p { margin-top: var(--raum-2); }

.projekt__verweis {
  display: inline-block;
  margin-top: var(--raum-3);
  font-family: var(--schrift-serife);
  font-size: 1.05rem;
}

/* ============================================================
   02 - Leistungen
   Keine Icon-Karten. Zeilen mit Haarlinie, Website doppelt
   gewichtet - das Layout zeigt die Positionierung, bevor ein
   Wort gelesen wird.
   ============================================================ */

.leistungen {
  margin-top: var(--raum-4);
  border-top: 1px solid var(--linie-stark);
}

.leistung {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: var(--raum-1) var(--raum-3);
  padding-block: var(--raum-3);
  border-bottom: 1px solid var(--linie);
}

.leistung__name {
  font-family: var(--schrift-serife);
  font-size: var(--text-h3);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--sperr-titel);
}

/* Die erste Leistung bekommt mehr Raum und größere Schrift. */
.leistung--haupt { padding-block: var(--raum-4); }

.leistung--haupt .leistung__name {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}

.leistung--haupt .leistung__text {
  font-size: var(--text-body);
}

.leistung__text {
  font-size: var(--text-klein);
  color: var(--farbe-tinte-leise);
  max-width: 54ch;
}

.leistungen__fussnote {
  margin-top: var(--raum-3);
  font-size: var(--text-klein);
  color: var(--farbe-tinte-leise);
  max-width: 58ch;
}

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

/* ============================================================
   03 - Studio
   Taupe-Band. Fläche für Ruhe: hier steht ausschließlich Tinte.
   ============================================================ */

.studio {
  display: grid;
  gap: var(--raum-4);
  margin-top: var(--raum-3);
}

.studio__bild {
  border: 1px solid var(--farbe-tinte);
  max-width: 16rem;
}

/* Ab Tablet wird das Portrait größer. Spaltenbreite und max-width
   müssen denselben Wert tragen, sonst entsteht eine Lücke. */
@media (min-width: 860px) {
  .studio {
    grid-template-columns: minmax(0, 18.5rem) minmax(0, 1fr);
    gap: var(--raum-5);
    align-items: start;
  }

  .studio__bild { max-width: 18.5rem; }
}

.studio__bild img {
  width: 100%;
  aspect-ratio: 1086 / 1192;
  object-fit: cover;
}

.studio__text > p + p { margin-top: var(--raum-2); }
.studio__text p { max-width: 58ch; }

/* ============================================================
   Kontakt
   ============================================================ */

.kontakt { padding-bottom: var(--raum-6); }

.kontakt__satz {
  max-width: 18ch;
  margin-bottom: var(--raum-3);
}

.kontakt__text { margin-bottom: var(--raum-4); }

.kontakt__wege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2) var(--raum-3);
  padding-top: var(--raum-3);
  border-top: 1px solid var(--linie);
}

.kontakt__frist {
  margin-top: var(--raum-2);
  font-size: var(--text-klein);
  color: var(--farbe-tinte-leise);
}