/* About unter dem Seitenkopf (Thomas 18.10.2026: „bitte gern vorschlag“, „wir machen 10+ draus, auch unten“, „01 · Andriyan Febriyanto … es gibt nur ihn?“ → ohne Nummer).
   Gleiche Sprache wie Work/Contact: Kante 45 px innen (= Schrift im Seitenkopf), Spalten 1,15fr / 1fr wie die Projekte, feine Linien, Fraunces-Titel.
   1 Vorstellung: Foto links bündig mit dem Seitenkopf-Rahmen (150 px bei 1440), deckt sich beim Hereinscrollen von unten auf; Text rechts in der Spalte
     der Projekt-Beschreibungen; am Handy linksbündig (vorher als einzige Seite mittig).
   2 Experience / Approach / Philosophy als Linien-Liste (Thomas 18.10.: „A“; B drei Spalten verworfen): je Zeile Nummer + Titel links, Text rechts,
     Linie zeichnet sich, alle Zeilen gleich hoch
   Blocs erzwingt Textfarben mit !important → eigene Farben ebenfalls mit !important. */
.ue-bloc { --ue-gruen: var(--swatch-var-2425); --ue-text: var(--swatch-var-5803); --ue-linie: rgba(28, 25, 23, .14); --ue-innen: 45px; }
@media (max-width: 991.98px) { .ue-bloc { --ue-innen: 33px; } }
@media (max-width: 575.98px) { .ue-bloc { --ue-innen: 21px; } }

/* ---------- 1 Vorstellung ---------- */
#bloc-8.ue-bloc { padding: 0 0 120px; }
.ue-person { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 64px; align-items: center; padding-right: var(--ue-innen); }
.ue-foto { margin: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; }
.ue-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.ue-vorstellung { padding: 24px 0; }
.ue-name { margin: 0 !important; font-family: "FrauncesFein", Georgia, serif !important; font-weight: 250 !important; font-size: clamp(38px, 1.5rem + 2.4vw, 64px) !important;
	line-height: 1.04 !important; color: var(--swatch-var-5657) !important; text-wrap: balance; }
.ue-rolle { margin: 18px 0 0 !important; font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif !important; font-size: 12.5px !important; letter-spacing: .09em;
	text-transform: uppercase; line-height: 1.6 !important; color: var(--ue-gruen) !important; }
.ue-text { margin: 26px 0 34px !important; font-size: 18px !important; line-height: 1.65 !important; color: var(--ue-text) !important; text-wrap: pretty; max-width: 34em; }
@media (max-width: 991.98px) {
	#bloc-8.ue-bloc { padding-bottom: 88px; }
	.ue-person { grid-template-columns: minmax(0, 1fr); row-gap: 36px; padding-right: 0; }
	.ue-foto { aspect-ratio: 4 / 3.4; }
	.ue-vorstellung { padding: 0 var(--ue-innen); }
}
@media (max-width: 575.98px) { .ue-foto { aspect-ratio: 1 / 1; } .ue-text { font-size: 17px !important; margin: 22px 0 30px !important; } }
/* Foto deckt sich von unten auf (statt nur einblenden); seiten-bewegung.js markiert auch das Bild selbst → dort keine zweite Bewegung */
html.bew .ue-foto[data-bw] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round 6px); transition: clip-path 1.4s var(--bw-kurve); }
html.bew .ue-foto[data-bw].da { clip-path: inset(0 0 0 0 round 6px); }
html.bew .ue-foto img { transform: scale(1.08); transition: transform 1.8s var(--bw-kurve); }
html.bew .ue-foto.da img { transform: none; }
html.bew .ue-foto img[data-bw] { opacity: 1 !important; }
html.bew .ue-foto:not(.da) img[data-bw] { transform: scale(1.08) !important; }
html.bew .ue-foto.da img[data-bw] { transform: none !important; }

/* ---------- 2 Werte (gemeinsam) ---------- */
#bloc-10.ue-bloc { padding: 0 0 128px; }
.ue-wert { position: relative; }
.ue-linie { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ue-linie); }
.ue-nr { font-family: "FrauncesFein", Georgia, serif; font-weight: 300; font-size: 16px; line-height: 1; color: var(--ue-gruen) !important; }
.ue-titel { margin: 0 !important; font-family: "FrauncesFein", Georgia, serif !important; font-weight: 250 !important; font-size: clamp(28px, 1.1rem + 1.4vw, 42px) !important;
	line-height: 1.1 !important; color: var(--swatch-var-5657) !important; }
.ue-wtext { margin: 0 !important; font-size: 18px !important; line-height: 1.65 !important; color: var(--ue-text) !important; text-wrap: pretty; }
html.bew .ue-wert[data-bw] { transform: translateY(18px); } html.bew .ue-wert[data-bw].da { transform: none; }
@media (max-width: 575.98px) { .ue-wtext { font-size: 17px !important; } #bloc-10.ue-bloc { padding-bottom: 96px; } }

/* A Linien-Liste (Thomas 18.10.: „A. Aber die 3 bereiche sind … nicht gleich gross“ → alle drei Zeilen so hoch wie die höchste, Inhalt oben) */
.ue-werte { display: grid; grid-auto-rows: 1fr; border-bottom: 1px solid var(--ue-linie); }
.ue-wert { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 64px; align-items: baseline; align-content: start; padding: 40px var(--ue-innen) 42px; }
.ue-kopf { display: flex; align-items: baseline; gap: 22px; }
@media (max-width: 991.98px) {
	.ue-wert { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding-top: 32px; padding-bottom: 34px; }
}

/* Rahmen bündig mit dem Seitenkopf (Blocs: .bloc .container ohne Seitenabstand, der Kopf hat 20 px) */
@media (max-width: 1199.98px) { .ue-bloc .container { padding-left: 20px; padding-right: 20px; } }

/* ---------- 3 Abschluss: „Ready to work together?“ + Newsletter gleich breit untereinander (Thomas 18.10.: Fassung 1). Feld-Gestaltung gemeinsam mit
   Startseite + Work in css/abschluss.css, Newsletter in css/newsletter.css. ---------- */
.ab-bloc.nl-bloc { padding: 0 0 120px; }
.abschluss { display: grid; row-gap: 32px; }
@media (max-width: 991.98px) { .ab-bloc.nl-bloc { padding-bottom: 88px; } }