/* ==========================================================================
   Über mich – nur, was es außerhalb dieser Seite nicht gibt.
   Maße aus docs/konzept/vermessung/unterseiten.md (Bild 8, CSS-px bei 1280 px).
   Textwand, Seitenleiste (.spalten), Kennzahlenband, Datenliste und CTA-Kasten
   kommen aus main.css.
   ========================================================================== */

/* Hero: Text links, Porträt rechts (370 × 360), Text mittig zum Porträt ------- */

.person-hero { padding-block: var(--a-18); }
.person-hero__raster { display: grid; gap: var(--a-10); align-items: center; }
.person-hero .lead { max-width: 36.5rem; }
/* Am Handy füllt das Porträt die Inhaltsbreite, wird aber nie größer als am Desktop (370 px) */
.person-hero__foto {
    width: 100%;
    max-width: 23.125rem;
    aspect-ratio: 370 / 360;
    object-fit: cover;
    border: var(--kasten-rand);
    border-radius: var(--r-3);
}
/* Ab Tabletbreite steht das Porträt neben dem Text, sonst bliebe die rechte Hälfte leer */
@media (min-width: 720px) {
    .person-hero__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); }
    .person-hero__foto { max-width: none; }
}
@media (min-width: 960px) {
    .person-hero__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 23.125rem); gap: var(--a-16); }
}


/* Geschichte: Label, zweizeilige Überschrift, Textwand; rechts Bilder und Kurzfassung */

.geschichte__label { display: block; margin-bottom: var(--a-3); }
.geschichte h2 { margin-bottom: var(--a-6); }

/* Demo 1 in a plain browser frame like the demo cards (address bar and 16:9 screenshot from
   beispiel-karten.css), with the caption under the screenshot. Role tokens only, so the frame
   works in every theme. */
.geschichte__beispiel {
    margin: 0;
    overflow: hidden;
    background: var(--karte);
    border: var(--rand-breite) solid var(--rand);
    border-radius: var(--r-3);
}
.geschichte__beispiel figcaption {
    padding: var(--a-3) var(--a-4);
    border-top: var(--rand-breite) solid var(--rand);
    font-size: var(--gr-klein);
    line-height: 1.5;
    color: var(--tx2);
}

/* The PC photo is a portrait cut-out with transparency (dev/bilder.php keeps the alpha channel):
   it stands whole, never cropped sideways, on a tile in the card colour with the card border, like
   the summary card below. No black box behind it. */
.geschichte__bild { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-3); }
.geschichte__bild--pc {
    aspect-ratio: 4 / 3;
    background: var(--karte);
    border: var(--rand-breite) solid var(--rand);
}
.geschichte__bild--pc picture { position: absolute; inset: var(--a-3); }
.geschichte__bild--pc img { width: 100%; height: 100%; object-fit: contain; }

.kurz { gap: var(--a-3); padding: var(--a-5) var(--a-6); }
.kurz p { line-height: 1.6; color: var(--tx2); }

/* Below 960 px the side column sits under the text. From 640 px the demo frame and the PC tile
   stand side by side; the tile takes the height of the frame. On phones all three stack, the
   PC tile in a flat 4:3 so it does not fill a whole screen. */
@media (min-width: 640px) and (max-width: 959px) {
    .geschichte__seite { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .geschichte__bild--pc { aspect-ratio: auto; }
    .geschichte__seite .kurz { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
    .geschichte__bild--pc { aspect-ratio: 4 / 5; }
}


/* Warum das einen Unterschied macht: 2 × 2 weiße Karten mit Lavendelrahmen ------- */

.unterschied .karte { padding: var(--a-7); }
.unterschied p { font-size: 1rem; line-height: 1.6; }


/* Was ich kann: zwei Listen und die Werkzeug-Chips auf Tinte ----------------------- */

.koennen .karte, .werkzeug { padding: var(--a-7); }
.koennen h3.label { margin-bottom: var(--a-1); }
.koennen__liste { display: grid; gap: var(--a-1); font-size: 1rem; line-height: 1.6; color: var(--tx2); }
.werkzeug { margin-top: var(--a-5); }


/* Das Unternehmen: Text links, Karte mit Datenliste rechts --------------------------- */

.unternehmen { display: grid; gap: var(--a-10); align-items: start; }
.unternehmen h2 { margin-bottom: var(--a-4); }
.unternehmen .lead { line-height: 1.65; }
/* Team sentence (only with TEAM_* set): continues the lead in its type, above the small print */
.unternehmen__team { max-width: 41rem; margin-top: var(--a-4); font-size: var(--gr-lead); line-height: 1.65; color: var(--tx2); }
.unternehmen__klein { max-width: 41rem; margin-top: var(--a-5); color: var(--tx3); }
.unternehmen__karte { gap: var(--a-6); padding: var(--a-7); }
.unternehmen__karte .daten { gap: var(--a-4); }
.unternehmen__karte .daten dd { font-weight: 400; line-height: 1.3; }
/* Label und Wert auf einer Grundlinie, auch wenn der Wert mehrzeilig ist */
.unternehmen__karte .daten--zeilen > div { align-items: baseline; }
.unternehmen__karte .daten--zeilen dt { padding-top: 0; }
/* Die Auflösung von GISA steht im title; ohne Punktlinie, die es in keinem anderen Label gibt */
.unternehmen__karte dt abbr { text-decoration: none; }
.unternehmen__zusatz { color: var(--tx3); }
.unternehmen__karte > a { align-self: start; }
@media (min-width: 960px) {
    .unternehmen { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: var(--a-12); }
}