/* ============================================================
   PROJEKTSEITE (Referenzen unter /projekte/)
   Eigener Seitentyp: liest sich als Artikel, nicht als
   Verkaufsseite. Bewusst OHNE das hero-curve-Muster der
   uebrigen Seiten, damit hinter Logo und Navigation kein
   hochskaliertes Foto liegt.

   Zusatzdatei zu style.css, wird auf den Projektseiten NACH
   style.css eingebunden und nutzt deren Variablen. Bewusst als
   eigene Datei, damit die 40 KB grosse style.css nicht komplett
   neu geschrieben werden muss. Kann bei Gelegenheit von Hand in
   style.css uebernommen werden, dann diese Datei und die
   Einbindungen entfernen.

   Die Kacheln unter "Weitere Projekte" kommen aus
   css/projekt-kacheln.css, das auf diesen Seiten zusaetzlich
   eingebunden wird. Hier stehen sie deshalb NICHT nochmal.
   ============================================================ */

/* --- STELLSCHRAUBEN -----------------------------------------
   Alles, was man an diesem Seitentyp sinnvoll verstellen will.
   Weiter unten muss nichts angefasst werden.
   ------------------------------------------------------------ */
:root {
  --projekt-textbreite: 760px;      /* Lesebreite des Fliesstexts */
  --projekt-schriftgroesse: 1rem;   /* EINE Groesse fuer allen Fliesstext */
  --projekt-linie: #e3e3e3;         /* Trennlinien im Steckbrief */
  --projekt-galerie-format: 4 / 3;  /* Seitenverhaeltnis der Galeriebilder */
}

/* --- KOPFBEREICH ------------------------------------------------
   Der Kasten, in dem Logo und Navigation stehen. Erzwingt weissen
   Grund, damit der Header auch dann sauber sitzt, wenn seine Klasse
   hero-site-header auf einen Bildhintergrund ausgelegt ist. */
.projektseite-kopfbereich {
  background: var(--color-white);
}

/* --- 1. PROJEKTKOPF: Text links, Bild rechts -------------------
   Das Bild sitzt in einer eigenen Spalte und wird nicht auf
   Fensterbreite hochgezogen. */
.projekt-kopf {
  background: var(--color-bg-light);
  padding: var(--space-l) var(--space-m);
}
.projekt-kopf-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 981px) {
  .projekt-kopf-inner { grid-template-columns: 1fr 1fr; }
}
.projekt-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.5rem;
}
.projekt-kopf h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 300;
}
.projekt-kopf h1 strong { font-weight: 600; }
/* Der Anreisser im Kopf darf groesser sein als der Artikel: er steht
   ausserhalb des Fliesstexts und gehoert optisch zur Ueberschrift. */
.projekt-kopf p { font-size: 1.1rem; margin: 0 0 var(--space-m); }
.projekt-kopf-bild img {
  width: 100%;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.12);
}

/* --- 2. STECKBRIEF ---------------------------------------------
   Die harten Fakten in einer Zeile. Fuer Leser eine schnelle
   Einordnung, fuer Suchmaschinen und KI-Antworten gut auslesbar. */
.projekt-steckbrief { border-bottom: 1px solid var(--projekt-linie); }
.projekt-steckbrief dl {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-m);
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .projekt-steckbrief dl { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 981px) { .projekt-steckbrief dl { grid-template-columns: repeat(4, 1fr); } }
.projekt-steckbrief dt {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-grey);
  margin-bottom: 0.35rem;
}
.projekt-steckbrief dd { margin: 0; font-size: 0.95rem; }

/* --- 3. FLIESSTEXT --------------------------------------------
   Schmalere Spalte als der Rest der Seite. Das ist der sichtbarste
   Unterschied zu den anderen Seitentypen.
   WICHTIG: Im ganzen Artikel gilt genau eine Schriftgroesse.
   Unterschiede entstehen nur durch Ueberschriften, nie durch
   verschieden grosse Absaetze. */
.projekt-text { padding: var(--space-l) var(--space-m); }
.projekt-text-inner { max-width: var(--projekt-textbreite); margin: 0 auto; }
.projekt-text p,
.projekt-text li { font-size: var(--projekt-schriftgroesse); }
.projekt-abschnitt { margin-bottom: var(--space-l); }
.projekt-abschnitt h2 {
  font-size: 1.5rem;
  font-weight: 300;
  display: flex;
  gap: 0.7em;
  align-items: baseline;
}
/* Die Ziffer steht im HTML als data-nr am h2 und wird hier davor
   gesetzt, damit sie nicht als Text im Dokument mitgelesen wird. */
.projekt-abschnitt h2::before {
  content: attr(data-nr);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.08em;
}
.projekt-abschnitt p { margin: 0 0 1em; }

/* Kundenstimme: hebt sich durch Linie, Schriftschnitt und Farbe ab,
   NICHT durch eine andere Schriftgroesse. */
.projekt-fazit {
  margin: var(--space-l) 0;
  padding: var(--space-m) 0 var(--space-m) var(--space-m);
  border-left: 4px solid var(--color-accent);
}
.projekt-fazit p {
  font-family: var(--font-heading);
  font-weight: 300;
  color: var(--color-black);
  margin: 0 0 0.4em;
}
.projekt-fazit footer { font-size: 0.85rem; color: var(--color-grey); }

/* Galerie: drei Screenshots nebeneinander mit Bildunterschrift.
   Alle Bilder werden auf dasselbe Seitenverhaeltnis gebracht, damit
   die Reihe nicht ausfranst, wenn ein Bild anders zugeschnitten ist
   als die anderen. Ueberstehendes wird beschnitten, nicht verzerrt. */
.projekt-galerie {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: 1fr;
  margin: var(--space-l) 0;
}
@media (min-width: 700px) { .projekt-galerie { grid-template-columns: repeat(3, 1fr); } }
.projekt-galerie figure { margin: 0; }
.projekt-galerie img {
  width: 100%;
  aspect-ratio: var(--projekt-galerie-format);
  object-fit: cover;
}
.projekt-galerie figcaption {
  font-size: 0.82rem;
  color: var(--color-grey);
  margin-top: 0.4rem;
}
/* Leerer Rahmen fuer noch fehlende Screenshots. Faellt weg, sobald
   die Bilder da sind. */
.projekt-platzhalter {
  aspect-ratio: var(--projekt-galerie-format);
  border: 2px dashed #c9c9c9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-grey);
  padding: 1rem;
}

/* --- 4. AUTORENBLOCK am Ende des Artikels --------------------- */
.projekt-autor {
  max-width: var(--projekt-textbreite);
  margin: var(--space-l) auto 0;
  padding: var(--space-m);
  background: var(--color-bg-light);
  display: flex;
  gap: var(--space-m);
  align-items: flex-start;
  flex-wrap: wrap;
}
.projekt-autor img {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
}
/* Ersatz fuer das Portraet, solange kein Foto vorliegt: die
   Initialen in einem Kreis in der Akzentfarbe. Wird im HTML
   anstelle des img eingesetzt, gleiche Groesse. */
.projekt-autor-initialen {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.5rem;
}
.projekt-autor-text { flex: 1 1 260px; }
.projekt-autor-name {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-black);
  margin: 0;
}
.projekt-autor-rolle {
  font-size: 0.85rem;
  color: var(--color-grey);
  margin: 0 0 0.5rem;
}
.projekt-autor-text p { margin: 0 0 0.5rem; }
.projekt-autor-datum { font-size: 0.8rem; color: var(--color-grey); }