/* ============================================================
   Deep5 — Bausteine
   Teile, die an mehreren Stellen der Seite vorkommen:
   Wortmarke, Pfeil, Knopf, Tiefenlink, Label, Markierung,
   Belegrahmen und Figur.

   Die Wege beim Überfahren stehen nicht hier, sondern in
   css/bewegung.css. Hier steht, wie ein Baustein aussieht,
   dort, wie er sich bewegt.
   ============================================================ */

/* ============================================================
   Wortmarke
   ============================================================ */
.wordmark{ display:block; height:24px; width:auto; color:var(--tinte); }

/* ============================================================
   Pfeil — steht in Knöpfen, Tief- und Schienenlinks, in den Zellen
   der Betriebsleiste und in den Industriezeilen.
   inline-block, weil transform an einem inline-Kasten nichts tut;
   für einen einzeiligen Textlauf ist der Umbruch der einzige
   Unterschied, und ein Pfeil bricht nicht um.
   ============================================================ */
.arw{ display:inline-block; }

/* ============================================================
   Knopf
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:13px var(--raum-22) var(--raum-14);
  background:var(--bordeaux); color:var(--weiss);
  font-family:var(--body); font-weight:600; font-size:var(--grad-text-2);
  text-decoration:none;
  border:var(--strich) solid var(--bordeaux); border-radius:var(--radius);
  cursor:pointer;
  transition:background var(--zeit-zustand) var(--kurve-zustand),
             border-color var(--zeit-zustand) var(--kurve-zustand),
             color var(--zeit-zustand) var(--kurve-zustand);
}
.btn:hover{ background:var(--bordeaux-tief); border-color:var(--bordeaux-tief); }

.btn--ghost{ background:transparent; color:var(--text-1); border-color:var(--linie-stark); }
.btn--ghost:hover{ background:transparent; border-color:var(--bordeaux); color:var(--bordeaux); }

.btn--light{ background:var(--hellblau); border-color:var(--hellblau); color:var(--tinte); }
.btn--light:hover{ background:var(--weiss); border-color:var(--weiss); }

.btn--outline-light{ background:transparent; color:var(--text-hell-1); border-color:var(--hellblau-34); }
.btn--outline-light:hover{ background:transparent; border-color:var(--hellblau); color:var(--hellblau); }

.btn--sm{ padding:var(--raum-10) var(--raum-16) var(--raum-11); font-size:.88rem; }

/* ============================================================
   Tiefenlink — führt eine Ebene tiefer
   ============================================================ */
.tief-link{
  display:inline-flex; align-items:baseline; gap:.5em;
  text-decoration:none; font-weight:600; font-size:var(--grad-text-1); color:var(--text-1);
  border-bottom:var(--strich) solid var(--linie-stark); padding-bottom:3px;
  align-self:flex-start;
  transition:color var(--zeit-zustand) var(--kurve-zustand),
             border-color var(--zeit-zustand) var(--kurve-zustand);
}
.tief-link:hover{ color:var(--bordeaux); border-color:var(--bordeaux); }
.sec--dark .tief-link{ color:var(--text-hell-1); border-color:var(--hellblau-30); }
.sec--dark .tief-link:hover{ color:var(--hellblau); border-color:var(--hellblau); }

/* ============================================================
   Label — beschriftet einen Abschnitt
   ============================================================ */
.label{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--mono); font-weight:500;
  font-size:var(--grad-mono-5); letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3);
}
.label::before{
  content:""; width:var(--punkt); height:var(--punkt); flex:0 0 var(--punkt);
  background:var(--bordeaux);
}
.sec--dark .label{ color:var(--text-hell-3); }
.sec--dark .label::before{ background:var(--hellblau); }

/* ============================================================
   Markierung — der gelbe Strich im Text
   ============================================================ */
.mark{
  background:var(--vanille);
  padding:.02em .3em .1em;
  color:var(--tinte);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ============================================================
   Belegrahmen — jede Behauptung kommt auf einem beschrifteten Blatt
   ============================================================ */
.beleg{
  background:var(--tinte-lift);
  border:var(--strich) solid var(--linie-hell);
  border-radius:var(--radius);
  overflow:hidden;
}
.beleg__bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--raum-8) var(--raum-18);
  padding:var(--raum-12) var(--raum-16);
  border-bottom:var(--strich) solid var(--linie-hell);
  font-family:var(--mono); font-size:var(--grad-mono-4); letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-hell-2);
}
.beleg__bar .tag{
  display:inline-flex; align-items:center; gap:.6em;
  color:var(--hellblau);
}
.beleg__bar .tag::before{ content:""; width:var(--punkt); height:var(--punkt); background:var(--hellblau); }
.beleg__bar .what{ color:var(--text-hell-2); letter-spacing:.05em; text-transform:none; font-size:var(--grad-mono-7); }

/* Das leere Feld, in das der Screenshot kommt. 34px ist die Rasterweite. */
.beleg__field{
  position:relative;
  aspect-ratio:16/10;
  background-color:var(--tinte-tief);
  background-image:
    linear-gradient(var(--hellblau-06) var(--strich), transparent var(--strich)),
    linear-gradient(90deg, var(--hellblau-06) var(--strich), transparent var(--strich));
  background-size:100% 34px, 34px 100%;
  background-position:0 0, 0 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--raum-8); text-align:center; padding:var(--raum-24);
}
.beleg__note{
  font-family:var(--mono); font-size:var(--grad-mono-7); letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-hell-3);
}
.beleg__sub{
  font-family:var(--mono); font-size:var(--grad-mono-6); line-height:1.7; letter-spacing:.03em;
  color:var(--text-hell-5); text-transform:none; max-width:48ch;
}

/* Registermarken: vier Ecken. 16px ist die Schenkellänge. */
.beleg__field .mk{ position:absolute; inset:0; pointer-events:none; }
.beleg__field::before,
.beleg__field::after,
.beleg__field .mk::before,
.beleg__field .mk::after{
  content:""; position:absolute; width:16px; height:16px; pointer-events:none;
  border-color:var(--hellblau-30); border-style:solid; border-width:0;
}
.beleg__field::before{ left:var(--raum-12); top:var(--raum-12); border-left-width:var(--strich); border-top-width:var(--strich); }
.beleg__field::after{ right:var(--raum-12); top:var(--raum-12); border-right-width:var(--strich); border-top-width:var(--strich); }
.beleg__field .mk::before{ left:var(--raum-12); bottom:var(--raum-12); border-left-width:var(--strich); border-bottom-width:var(--strich); }
.beleg__field .mk::after{ right:var(--raum-12); bottom:var(--raum-12); border-right-width:var(--strich); border-bottom-width:var(--strich); }

/* Maßlinie: die Geometrie, die der echte Screenshot braucht */
.dim{
  position:absolute; left:44px; right:44px; bottom:var(--raum-22);
  display:flex; align-items:center; gap:var(--raum-12);
}
.dim__line{ position:relative; flex:1 1 auto; height:var(--strich); background:var(--hellblau-22); }
.dim__line::before,.dim__line::after{
  content:""; position:absolute; top:-3px; width:var(--strich); height:var(--punkt); background:var(--hellblau-34);
}
.dim__line::before{ left:0; }
.dim__line::after{ right:0; }
.dim__val{
  font-family:var(--mono); font-size:var(--grad-mono-2); letter-spacing:.1em;
  color:var(--text-hell-4); white-space:nowrap;
}

.beleg__foot{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--raum-6) var(--raum-20);
  padding:var(--raum-12) var(--raum-16); border-top:var(--strich) solid var(--linie-hell);
  font-family:var(--mono); font-size:var(--grad-mono-3); letter-spacing:.04em;
  color:var(--text-hell-3);
}

/* Liegt der Beleg als Bild vor, füllt es den Rahmen.
   height:auto ist nötig, sonst zieht das height-Attribut des Bildes. */
.beleg__bild{ width:100%; height:auto; }

/* Motiv statt Artefakt.
   „Artefakt" heißt auf dieser Seite: das ist aus dem laufenden System des
   Kunden. Die meisten Cases im Portfolio sind anonym und haben keinen
   freigegebenen Screenshot — ein Stimmungsbild unter derselben Beschriftung
   würde diese Zusage brechen und alle echten Artefakte mit entwerten.
   Deshalb ein eigener Typ mit eigener Beschriftung: `.beleg--motiv` trägt
   in der Kopfleiste „Motiv" und in der Fußleiste den Hinweis, dass es sich
   um eine Veranschaulichung handelt. Wer das ändert, muss erklären, woran
   ein Leser künftig Beleg von Bild unterscheidet. */
.beleg--motiv .beleg__bar .tag{ color:var(--text-hell-3); }
.beleg--motiv .beleg__bar .tag::before{ background:var(--text-hell-3); }
.beleg--motiv .beleg__bild{
  height:clamp(160px,20vw,300px);
  object-fit:cover; object-position:center;
  filter:grayscale(1) contrast(1.04) brightness(.92);
}
.beleg--motiv .beleg__foot{ font-style:italic; }

/* Zuschnitt: Der Beleg zeigt einen Streifen statt des ganzen Bildes.
   `height` muss fest sein, sonst skaliert `max-height` nur und schneidet
   nicht; `object-position:top`, weil oben die Kennzahlenreihe steht.

   Ab welcher Breite wirklich beschnitten wird, entscheidet das Seiten-
   verhältnis: Das Bild ist 1456 × 830 (1,754). Ist der Kasten breiter als
   das, schneidet `cover` in der Höhe — bei 1440 px misst er 978 × 340 und
   zeigt 61 % der Bildhöhe: Kennzahlenreihe und die beiden oberen Karten,
   lesbar. Die Nullreihe im unteren Drittel fällt dabei weg, und ein
   Beweisbild mit lauter Nullen beweist ohnehin nur, dass die Software
   existiert, nicht dass sie benutzt wird.

   Auf dem Telefon geht das nicht auf. Der Kasten misst dort 348 × 190
   (1,83) und liegt damit über dem Bildverhältnis — es wird nicht
   beschnitten, sondern gestaucht, und 1456 px Inhalt auf 348 px sind
   unlesbar, egal wie man schneidet. Dort ist der Beleg ein Daumennagel:
   Er zeigt, dass es echte Software gibt, nicht was drinsteht. Wer die
   Zahlen auch mobil lesbar will, braucht einen eigenen, enger
   geschnittenen Bildausschnitt als zweite Datei — nicht mehr CSS. */
.beleg--zuschnitt .beleg__bild{
  height:clamp(190px,24vw,340px);
  object-fit:cover;
  object-position:top center;
}

/* ============================================================
   Figur — Bild mit Beschriftung
   ============================================================ */
.figure{ position:relative; }
.figure img{
  width:100%; height:auto; object-fit:cover;
  border-radius:var(--radius);
  filter:saturate(.86) contrast(1.02);
}
.figure--tall img{ aspect-ratio:2/2.62; }
.figure__cap{
  margin-top:var(--raum-12); color:var(--text-3);
  font-family:var(--mono); font-size:var(--grad-mono-5); letter-spacing:.05em; line-height:1.55;
}

@media (max-width:1023px){
  .figure--tall{ aspect-ratio:16/9; }
}

@media (max-width:719px){
  .beleg__field{ padding:var(--raum-18); }
  .beleg__note{ font-size:var(--grad-mono-5); }
  /* Die Produktionsanweisung ist fuer Deep5 gedacht, nicht fuers Telefon. */
  .beleg__sub{ display:none; }
  .dim{ left:var(--raum-24); right:var(--raum-24); bottom:var(--raum-14); }
  .dim__val{ font-size:var(--grad-mono-1); letter-spacing:.06em; }
}

@media (max-width:400px){
  .beleg__bar{ font-size:.64rem; gap:var(--raum-6) var(--raum-12); }
  .beleg__foot{ font-size:.62rem; }
}

/* ============================================================
   Motiv ohne Leiste
   Ein Motiv trug bisher oben „MOTIV · Werkstatt und Fuhrpark" und
   unten „Veranschaulichung, kein Bild aus dem System des Kunden".
   Zwei Leisten, um zu sagen, dass ein Foto ein Foto ist. Das ist
   ein Dementi, das niemand verlangt hat, und es kostet die halbe
   Höhe des Belegs.

   Die Unterscheidung selbst bleibt: Ein ARTEFAKT behält seine
   Leiste und seine Herkunftszeile, weil es etwas behauptet. Ein
   Motiv behauptet nichts, also muss es auch nichts belegen. Was
   auf dem Bild zu sehen ist, steht jetzt im alt-Text, wo es für
   Screenreader hingehört, statt als Aufdruck über dem Bild.
   ============================================================ */
.beleg--motiv{
  background:transparent;
  border:0;
  border-radius:var(--radius);
}
.beleg--motiv .beleg__bar,
.beleg--motiv .beleg__foot{ display:none; }
.beleg--motiv .beleg__bild{
  border-radius:var(--radius);
  /* Ohne Rahmen ringsum darf das Bild etwas mehr Fläche nehmen. */
  height:clamp(180px,23vw,340px);
}

/* Der Artefakt-Rahmen wird leiser: Der Strich zwischen Leiste und
   Bild trennte zwei dunkle Flächen und war deshalb nur laut, nicht
   nützlich. Der Außenrahmen bleibt, er hält das Belegblatt zusammen. */
.beleg--zuschnitt .beleg__bar{ border-bottom-color:var(--anthrazit-16); }
.beleg--zuschnitt .beleg__foot{ border-top-color:var(--anthrazit-16); }

/* ============================================================
   B — Team
   Steht auf der Startseite und auf „Über uns“, deshalb hier und nicht
   in unterseiten.css: die Startseite lädt jene Datei nicht.
   Drei Personen nebeneinander. Wer kein Portrait hat, bekommt
   auch keinen Platzhalter mit Silhouette: Ein leerer grauer
   Kreis sagt „hier fehlt was", ein fehlendes Bild sagt gar
   nichts, und gar nichts ist hier die ehrlichere Aussage.
   ============================================================ */
.team{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  /* Vier Zeilen, geteilt von allen Kacheln: Bild, Name, Rolle, Satz. Ohne das
     rutscht bei der einen Person mit Foto der Name unter das Bild, während er
     bei den anderen oben steht, und drei Kacheln nebeneinander fluchten nicht
     mehr. Dasselbe Mittel wie im Wandel-Block der Startseite. */
  grid-template-rows:auto auto auto auto;
  gap:clamp(24px,3vw,44px) var(--steg);
  padding-block:clamp(30px,3.6vw,52px);
  border-top:var(--strich) solid var(--linie-stark);
}
.kopf-mensch{
  display:grid; grid-row:span 4; grid-template-rows:subgrid;
  align-content:start; gap:0;
}
.kopf-mensch__bild{
  width:100%; height:auto; aspect-ratio:4/5; align-self:start;
  object-fit:cover; object-position:center 22%;
  filter:grayscale(1) contrast(1.04) brightness(.96);
  border-radius:var(--radius);
  margin-bottom:var(--raum-16);
}
.kopf-mensch h3{
  margin:0; align-self:start; font-size:clamp(1.05rem,1.5vw,1.28rem);
}
.kopf-mensch__rolle{
  margin-top:var(--raum-8); align-self:start;
  font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
}
.kopf-mensch p{
  margin-top:var(--raum-14); align-self:start; max-width:38ch;
  font-size:var(--grad-text-2); line-height:1.6; color:var(--text-2);
  text-wrap:pretty;
}
/* Der Zusatz unter dem Team auf der Startseite. Zwei Köpfe stehen dort,
   fünf weitere Menschen arbeiten mit, und das gehört dazu gesagt. */
.team__zusatz{
  margin:var(--raum-24) 0 0; max-width:56ch;
  font-size:var(--grad-text-2); line-height:1.6; color:var(--text-2);
}

@media (max-width:719px){
  .team{ grid-template-columns:minmax(0,1fr); }
  .kopf-mensch__bild{ max-width:240px; }
}