/* ============================================================
   about.css — About-Seite
   EIN Bildschirm, kein Scrollen (User 2026-09-25):

     ┌──────────┬──────────────────────────────┐
     │          │ ABOUT                        │
     │ Porträt  │ Vorstellung                  │   Zeile 1 (1fr)
     │          │ Eckdaten · Kontakt-Knöpfe    │
     ├──────────┴──────────────────────────────┤
     │ TOOLKIT — volle Breite, 2 Zeilen        │   Zeile 2 (auto)
     └─────────────────────────────────────────┘

   Das Toolkit liegt bewusst über die VOLLE Breite: nur so passt jeder
   Werkzeugname in eine Zeile (User: «alle schriften nicht in eine neue
   zeile»). Höhen hängen an `vh`, damit es auch bei 720px passt.
   Unter 860px wird gestapelt — dort darf gescrollt werden.
   ============================================================ */

.about-intro{
  --about-pad: clamp(18px, 3.4vh, 44px);
  height: 100svh;
  /* goldener Schnitt statt 12er-Raster: Porträt 38.2 % · Text 61.8 %
     (User 2026-09-25). Das Toolkit darunter läuft über beide. */
  grid-template-columns: 38.2fr 61.8fr;
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: clamp(18px, 3.4vh, 40px);
  padding-top: calc(var(--nav-h) + var(--about-pad));
  padding-bottom: var(--about-pad);
}

.about-portrait{
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  margin: 0;
}
.about-portrait .media{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.about-text{
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  padding-left: clamp(0px, 2.5vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* unten bündig mit dem Porträt */
  gap: clamp(12px, 2.4vh, 28px);
}

.about-title{
  margin: 0;
  font-family: var(--display-font);
  font-weight: var(--title-weight);   /* siehe styles/base.css, Rolle TITEL */
  font-size: clamp(2.2rem, min(5vw, 8vh), 4.6rem);
  line-height: 0.85;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.about-lead{
  margin: 0;
  /* KEINE Zeichengrenze: rechts bündig mit dem Toolkit darunter
     (User 2026-09-25) — Spalte und Toolkit enden am selben Rand */
  max-width: none;
  font-size: clamp(1.05rem, min(1.8vw, 3vh), 1.8rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* --- Eckdaten: vier Spalten, Etikett in der Zweitschrift ------------------ */
.about-facts{
  display: grid;
  /* Spalten so breit wie ihr Inhalt, Zeilen brechen nur am <br> */
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;   /* füllt die Breite, ragt nie darüber */
  gap: 12px 16px;
  margin: 0;
  padding-top: clamp(12px, 2vh, 20px);
  border-top: 1px solid var(--line);
}
.about-facts dt,
.about-label{
  margin: 0 0 6px;
  font-family: var(--text2-font);
  font-variation-settings: var(--axis-ui);
  font-size: var(--t-label);
  font-weight: var(--text2-weight);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.about-facts dd{
  margin: 0;
  white-space: nowrap;
  font-size: clamp(0.88rem, 1vw, 1rem);
  line-height: 1.4;
}

/* --- Kontakt: wie die Links in der Case-Study (.case-link, case.css) ------
   Symbol + Text, OHNE Kasten (User 2026-09-25). Rahmen immer reserviert,
   aber unsichtbar; Hover = Blau + Haarlinie. Die Reihe rückt um Polster +
   Rahmen nach links, damit die Textkante mit den Eckdaten fluchtet. */
.about-contact{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 2px;
  margin: 0 0 0 -11px;   /* Polster 10 + Rahmen 1 */
}
.about-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid transparent;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: var(--text2-font);
  font-variation-settings: var(--axis-ui);
  font-size: var(--t-label);
  font-weight: var(--text2-weight);
  letter-spacing: 0.14em;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.about-btn svg{
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
}
/* Mail-Symbol ist gestrichen, nicht gefüllt; die Adresse klein geschrieben */
.about-btn[href^="mailto:"]{ text-transform: none; letter-spacing: 0.04em; }
.about-btn[href^="mailto:"] svg{ fill: none; }
.about-btn:hover,
.about-btn:focus-visible{ color: var(--blue-text); border-color: var(--blue-text); }

/* --- Toolkit: volle Breite, Namen NIE umbrechen ----------------------------- */
.about-stack{
  grid-column: 1 / -1;
  grid-row: 2;
}
.about-label{ margin-bottom: 10px; }
.about-stack .stack-tool{ padding: clamp(10px, 1.6vh, 18px) 8px; }
.about-stack .stack-tool-name{ white-space: nowrap; overflow-wrap: normal; }
/* Linien als Rahmen je Kachel statt als 1px-Fuge über der Rasterfarbe:
   so bleibt eine leere Zelle (15 Werkzeuge, gerade Spaltenzahl) einfach
   leer statt als grauer Block — bei jeder Spaltenzahl. */
.about-stack .stack-tools{
  gap: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.about-stack .stack-tool{
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* --- Schmale Screens: stapeln, Scrollen erlaubt --------------------------- */
@media (max-width: 860px){
  .about-intro{ height: auto; grid-template-columns: 1fr; grid-template-rows: none; }
  .about-portrait,
  .about-text,
  .about-stack{ grid-column: 1 / -1; grid-row: auto; }
  .about-portrait{ max-width: 380px; }
  .about-portrait .media{ height: auto; aspect-ratio: 4 / 5; }
  .about-text{ padding-left: 0; }
  .about-facts{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-facts dd{ white-space: normal; }
  /* Handy: frei umbrechende Kacheln, breit genug für «AFTER EFFECTS» */
  .about-stack .stack-tools{ grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
}