/* Projekte — Übersicht und Detail
   Eigenes Bauteil, kein Aufwärmen des Kartenrasters: die Startseite
   (archiv-startseite-kapitel.html) zeigt die sechs Projekte schon als 3×2-Raster auf Navy.
   Ein zweites Kartenraster auf hell wäre dieselbe Grafik ein zweites Mal.

   Leseart „Register": eine Zeile je Projekt, Bild als schmaler Streifen,
   Fakten in festen Spalten, Haarlinien. Gleiche Grundform wie die
   Ausklappliste der Leistungsseiten (Entscheid 17.08. „Linien") — die
   Projektliste ist ein Verzeichnis, kein Schaufenster. */


/* Kopf und Titelband stehen jetzt in page.css — sie werden von projekte.html
   und impressum.html gebraucht (und später von der Kontaktseite). */

/* ---------- Filter ------------------------------------------------------ */
/* Form aus dem Handoff (ONE HP - Projekte (Übersicht).dc.html), entschieden
   19.08.: rechteckige Schaltflächen mit Kontur auf hellem Grund, die Auswahl
   als volle Navy-Fläche, darunter eine Haarlinie und 44px Abstand zur Liste.
   Sand kommt hier nicht vor — Sand ist die Hauptaktion (Button, Statement),
   ein Filter ist eine Zustandsanzeige.

   Drei Achsen, alle immer sichtbar: Nutzung · Bauart · Status. Status ist
   auf Wunsch eine Achse geworden (19.08.) — „woran arbeiten wir gerade" ist
   die Frage, die man an eine Projektliste stellt.
   Vom Handoff bewusst abgewichen: dort erschien Altbau/Neubau erst nach einem
   Klick auf „Wohnen" — die wichtigste Unterscheidung war die unsichtbarste.
   Trefferzahlen tragen die Schaltflächen nicht (wie im Handoff); leere
   Kombinationen werden stattdessen gesperrt, damit niemand in eine
   „keine Treffer"-Seite läuft. */

.flt { padding-bottom: 44px; }
/* Drei Gruppen in einer Zeile. Der Handoff verteilte zwei Gruppen auf links
   und rechts; bei drei würde die dritte allein in eine zweite Zeile fallen.
   Stattdessen alle links, Gruppen durch den größeren Abstand getrennt —
   innerhalb 8px, zwischen den Gruppen das Vierfache. */
.flt__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px clamp(24px, 2.6vw, 32px);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.flt__grp { display: flex; gap: 8px; flex-wrap: wrap; }
/* Bauart und Status als Paar — bleiben beim Umbruch zusammen in einer Zeile. */
.flt__pair { display: flex; gap: clamp(24px, 2.6vw, 32px); flex-wrap: wrap; }
.flt__btn {
  padding: 12px 18px;
  background: var(--sheet);
  border: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--f-text);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--muted);
  transition: border-color .15s, color .15s, background .15s;
}
.flt__btn:hover { border-color: var(--ink); color: var(--ink); }
.flt__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700; }
/* Sackgassen bleiben sichtbar, aber nicht klickbar — die Null ist die
   Information, ein verstecktes Feld wäre keine. */
.flt__btn:disabled { color: rgba(11,28,48,.26); border-color: var(--line-soft); cursor: default; }
.flt__btn:disabled:hover { border-color: var(--line-soft); color: rgba(11,28,48,.26); }

.flt__count {
  display: block;
  padding-top: 18px;
  text-align: right;
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(11,28,48,.5);
}

/* ---------- Register ---------------------------------------------------- */

.reg { border-top: 1px solid var(--line-hard); }
/* .reg__row ist ein Grid — hidden allein greift dagegen nicht. */
.reg__row[hidden] { display: none; }

.reg__row {
  display: grid;
  grid-template-columns: 44px 300px minmax(0, 1fr) 120px;
  gap: clamp(20px, 2.6vw, 40px);
  align-items: center;
  padding-block: clamp(20px, 2.2vw, 30px);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  transition: background .2s;
}
.reg__row:hover { background: var(--band); color: var(--ink); }

.reg__nr {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  color: rgba(11,28,48,.38);
  align-self: start;
  padding-top: 6px;
}

.reg__fr { aspect-ratio: 3 / 2; overflow: hidden; background: var(--band-2); }
.reg__fr img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.reg__row:hover .reg__fr img { transform: scale(1.04); }

.reg__name {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.015em;
}
.reg__meta {
  display: block;
  margin-top: 9px;
  font-size: var(--t-small);
  color: var(--muted);
}

/* Nicht mehr in der Übersicht verwendet (Entscheid 19.08.: „Leistung ONE"
   steht auf der Detailseite). Die Regel bleibt für die Detailseite stehen. */
.reg__role {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(11,28,48,.62);
  line-height: 1.6;
}

.reg__st {
  justify-self: end;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.reg__st--run { color: var(--accent); }
.reg__st--run::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 8px;
  vertical-align: 1px;
  background: var(--accent);
  border-radius: 50%;
}

/* Spaltenüberschriften in der Ausprägung der Leistungsseiten:
   zurückgenommenes Navy, Mono, kein Strich darüber (Entscheid 17.08.). */
.reg__head {
  display: grid;
  grid-template-columns: 44px 300px minmax(0, 1fr) 120px;
  gap: clamp(20px, 2.6vw, 40px);
  padding-bottom: 14px;
}
.reg__lbl {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,28,48,.62);
}
.reg__lbl--end { justify-self: end; }

/* ---------- Projektgitter (gewählte Darstellung, 19.08.) ---------------- */
/* Zwei Projekte je Reihe, Bild 16:9, Titel darunter, keine Karte und kein
   Schatten — nur eine Haarlinie unter der Textzeile. Gewählt gegen die
   Zeilenformen, weil das Bild fast doppelt so groß wird (536 × 301 px statt
   420 × 200 px bei 1440er Fenster) und die Seite dabei kaum länger ist:
   14 Projekte ergeben sieben Reihen.

   Kein Kartenraster: ohne Fläche, Rahmen und Schatten liest es sich als
   Aufteilung der Seite, nicht als Katalog — die Startseite trägt das
   Kartenraster auf Navy, hier ist es eine andere Grafik.

   Der Status steht in der Textzeile rechts, NICHT als Marke auf dem Bild:
   Platz ist da, und das Bild bleibt frei. Lesbar muss er sein, weil er
   filterbar ist.

   `auto-fit` statt zwei festen Spalten: bei genau einem Treffer — „Altbau"
   ergibt heute einen — fällt die leere Spur weg, statt eine halb leere Reihe
   stehen zu lassen. Damit die einzelne Kachel dann nicht auf 1112px anwächst
   und wie ein Aufmacher wirkt, ist ihre Breite gedeckelt (560px); im
   Zweispalter greift der Deckel nicht, dort sind die Spuren 536px breit.
   Im schmalen Fenster wird aus derselben Regel eine Spalte, ohne eigenen
   Umbruchpunkt. */

.pg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(26px, 3vw, 44px) clamp(24px, 2.6vw, 40px);
}
.pg__c[hidden] { display: none; }

.pg__c { display: grid; gap: 14px; align-content: start; color: var(--ink); max-width: 560px; }
.pg__fr { aspect-ratio: 16 / 9; overflow: hidden; background: var(--band-2); }
.pg__fr img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.pg__c:hover .pg__fr img { transform: scale(1.04); }

.pg__say { display: grid; gap: 7px; }
.pg__nr {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .16em;
  color: rgba(11,28,48,.38);
}
.pg__name {
  font-family: var(--f-display);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.018em;
}

/* Meta links, Status rechts, darunter die Haarlinie. */
.pg__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--line);
}
.pg__meta { font-size: var(--t-small); color: var(--muted); }
.pg__st {
  flex: 0 0 auto;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
/* Laufende Projekte sind der einzige Fall mit Farbe — „woran arbeiten wir
   gerade" soll auch ohne Filter ins Auge fallen. */
.pg__st--run { color: var(--accent); }

/* Die imopact-Referenzen (drei Objekte mit je zwei Prozentwerten) sind am
   19.08. durch das Kennzahlenband ersetzt worden — Bauteil und Stile stehen
   jetzt in imo.css. Die verworfene Form liegt in varianten-imopact.html. */

/* ---------- Detail: geteilter Aufmacher --------------------------------- */
/* Bild und Fakten nebeneinander, beides auf Navy. Der Vollbild-Aufmacher der
   Leistungsseiten (.ph) passt hier nicht: ein Projekt wird an seinen Zahlen
   gelesen, die müssen neben dem Bild stehen, nicht darunter. */

/* ---------- Detail-Aufmacher D1 (Entscheid 19.08.) ---------------------- */
/* Bildbanner über die volle Breite mit dem Projektnamen darauf, darunter ein
   Navy-Band mit den vier Angaben nebeneinander. Gewählt gegen den geteilten
   halb/halb-Aufmacher des Handoffs und gegen das Datenblatt als Karte:
   das Band ist immer lesbar, egal wie hell das Bild unten ausläuft, es
   verträgt später eine fünfte Kennzahl, und am Telefon wird es zu 2×2 statt
   den ersten Textabsatz um eine Kartenhöhe nach unten zu schieben.

   Anforderung an das Bildmaterial, die daraus folgt: der Aufmacher zeigt
   einen Streifen von etwa 2,6 : 1. Im oberen und unteren Fünftel des Motivs
   darf nichts Wichtiges liegen, und schmale Einzelhäuser (Altbau) brauchen
   eine Häuserzeile oder ein Ensemble statt einer Frontalaufnahme. */

.dh {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: clamp(400px, 50vw, 600px);
  padding-block: clamp(38px, 4vw, 60px);
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}
.dh__media { position: absolute; inset: 0; }
.dh__media img { width: 100%; height: 100%; object-fit: cover; }
/* Verlauf nach unten, damit Eyebrow und Titel auf jedem Motiv stehen können. */
.dh::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 78%;
  z-index: 2;
  background: linear-gradient(180deg, rgba(11,28,48,0) 0%, rgba(11,28,48,.34) 42%, rgba(11,28,48,.86) 100%);
}
.dh__say { position: relative; z-index: 3; }
.dh__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-quiet);
  margin-bottom: 18px;
}
.dh__eyebrow::before { content: ""; width: 36px; height: 2px; background: currentColor; flex: 0 0 auto; }
.dh h1 {
  font-size: clamp(32px, 4.2vw, 62px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.03em;
  max-width: 18ch;
}

/* Faktenband unter dem Bild */
.dfacts { background: var(--ink); color: var(--paper); }
.dfacts__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,.14);
}
.dfacts__f {
  padding: clamp(24px, 2.6vw, 36px) 24px clamp(24px, 2.6vw, 36px) 0;
  border-right: 1px solid rgba(255,255,255,.14);
}
.dfacts__f:last-child { border-right: 0; }
.dfacts__k {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(239,239,239,.5);
}
.dfacts__v {
  margin-top: 12px;
  font-family: var(--f-display);
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
}
/* Letzte Angabe ist „Leistung ONE" — der Anker der Lebenszyklus-Leiste
   weiter unten, deshalb in der Akzentfarbe. */
.dfacts__f:last-child .dfacts__v { color: var(--accent-quiet); }
/* Offene Werte bleiben sichtbar offen, statt stillschweigend gefüllt zu werden. */
.dfacts__v.is-open { font-weight: 500; color: rgba(239,239,239,.36); }
.dfacts__v.is-open span { border-bottom: 1px dashed rgba(239,239,239,.32); padding-bottom: 3px; }

@media (max-width: 900px) {
  .dfacts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dfacts__f { border-bottom: 1px solid rgba(255,255,255,.14); }
  .dfacts__f:nth-child(2n) { border-right: 0; }
  .dfacts__f:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Rücksprung, sitzt im Navy über dem Aufmacher */
.dback { background: var(--ink); padding-block: 12px; }
.dback a {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(239,239,239,.6);
}
.dback a:hover { color: #fff; }

/* ---------- Detail: Leistung ONE --------------------------------------- */
/* Entschieden 19.08. (Layout M1, Ausprägung c3): kurze Prosa plus kurze
   Aufzählung, zweispaltig — links die Überschrift, rechts die Punkte und der
   Projekttext darunter.

   Vorher stand hier die lineare Wertschöpfungskette mit EINER hervorgehobenen
   Station. Das war sachlich falsch: ONE erbringt in den meisten Projekten die
   ganze Kette, und eine Hervorhebung, die alles hervorhebt, sagt nichts.

   Ausprägung c3 — Hervorhebung ohne Fettung: der Begriff steht in der normalen
   Textfarbe, die Erläuterung dahinter ist zurückgenommen. Der Begriff steht
   immer vorn; die Kante der Begriffe ist die Marke, deshalb gibt es KEIN
   Aufzählungszeichen. Rückfall, falls die Kante bei realer Copy nicht trägt:
   Haarstrich 1px, 12px lang, Sand auf 55 % (Variante b1, siehe
   varianten-leistung.html#m1-fein). */

.wone { padding-block: clamp(50px, 5.5vw, 84px); }
.wone__in { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.wone__lead {
  margin-top: 14px;
  max-width: 20ch;
  font-family: var(--f-display);
  font-size: var(--t-state);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.02em;
}
.wone__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-hard); }
.wone__list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-lead);
  line-height: 1.45;
  color: rgba(11, 28, 48, .55);
}
.wone__list b { font-weight: 500; color: var(--ink); }
.wone__body { margin-top: 22px; font-size: var(--t-small); line-height: 1.65; color: var(--muted); max-width: 58ch; }
.wone__note { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* ---------- Detail: Detailbild, Nachbar --------------------------------- */

/* Die .dprosa-Regeln sind am 07.09.2026 entfernt: der Block "Das Projekt"
   steht nicht mehr in projekt.html und wird von keiner Seite mehr benutzt.
   Geprueft ueber alle HTML-, CSS- und JS-Dateien in Deploy/. */

.dshot { position: relative; height: clamp(300px, 46vw, 560px); overflow: hidden; background: var(--ink); }
.dshot img { width: 100%; height: 100%; object-fit: cover; }
.dshot::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(11,28,48,0) 0%, rgba(11,28,48,.55) 100%);
}
.dshot figcaption {
  position: absolute;
  left: var(--gut); bottom: 26px;
  z-index: 3;
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}

.dnext { background: var(--band-2); border-top: 1px solid var(--line-soft); padding-block: clamp(40px, 4.4vw, 60px); }
.dnext__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dnext__all {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.dnext__go { font-family: var(--f-display); font-size: clamp(18px, 1.7vw, 23px); font-weight: 700; color: var(--ink); }
.dnext__go:hover { color: var(--accent); }

/* ---------- CI strikt --------------------------------------------------- */
/* Im CI-Vergleich ist --accent das Grau-blau #55616f. Auf Navy trägt das
   nicht — dieselbe Korrektur, die base.css für .eyebrow schon vornimmt. */

:root[data-accent="ci"] .dh__eyebrow,
:root[data-accent="ci"] .dfacts__f:last-child .dfacts__v { color: var(--paper); }

/* ---------- Mobil ------------------------------------------------------- */

@media (max-width: 1080px) {
  .reg__head { display: none; }
  .reg__row { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
  .reg__nr { display: none; }
  .reg__role { grid-column: 2; margin-top: 4px; }
  .reg__st { grid-column: 2; justify-self: start; }
  .dh { height: clamp(320px, 58vw, 460px); }
  .wone__in { grid-template-columns: 1fr; gap: 26px; }
}

/* Am Telefon brauchte die Filterleiste vier Zeilen (239px). Kleinere
   Schaltflächen bringen sie auf drei, ohne die Tippfläche unter 40px zu
   drücken. */
@media (max-width: 700px) {
  /* 11px Polsterung ergab 42px Hoehe — zwei Pixel unter der Mindestgroesse
     fuer Tippflaechen (44px, Apple HIG und WCAG 2.5.5). Gemessen 03.09.2026. */
  .flt__btn { padding: 12px 14px; font-size: 13.5px; min-height: 44px; }
  .flt__bar { gap: 8px 14px; }
  .flt { padding-bottom: 30px; }
}

@media (max-width: 620px) {
  .reg__row { grid-template-columns: 1fr; }
  .reg__role, .reg__st { grid-column: 1; }
  .reg__fr { aspect-ratio: 16 / 10; }
}