/* ──────────────────────────────────────────────────────────────────────────
   Immo Studio: Seite „Über uns", Neuaufbau 11.10.2026 nach Phils Auftrag
   „Über uns komplett überarbeiten" (Aufbau aus tmp/codex/ueber-uns.md).
   Nur Ergänzungen zu stil.css, alle Klassen mit Präfix .ue-, nur Farb-
   variablen aus stil.css. Produktseite: ein Gedanke je Abschnitt, Bild und
   Text teilen sich die Höhe, die Bildseite wechselt, Weiß und Hellblau
   wechseln. Kein Bild höher als rund 75 % des Bildschirms.
   1 Auftakt: Text links, Webseite und PDF desselben Exposés rechts.
   2 Herkunft (Band): Werkstatt links, Text rechts.
   3 Software: Kopfzeile, darunter ein großes Bildschirmfoto.
   4 Grundriss und Modell (Band): Text links, beide Ansichten rechts.
   5 Werkzeuge: zwei Ansichten links, Text rechts.
   6 Aufbereitung (Band): Text links, Bildbereich eines Exposés rechts.
   Firma: Zeilen mit Haarlinie (stil.css). 7 Gespräch (Band): Text, kleines Bild.
   ────────────────────────────────────────────────────────────────────────── */

/* Bildrahmen wie auf der Startseite: 6 px Ecke, feiner Rahmen. */
.ue-rahmen { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--linie); background: var(--weiss); }
.ue-auftakt figure, .ue-teil figure, .ue-schluss figure { margin: 0; }

/* ── 1 Auftakt ─────────────────────────────────────────────────────────── */
.ue-auftakt {
  min-height: 0; align-items: center; background: var(--weiss);
  padding: calc(var(--kopf) + clamp(28px, 4.4vw, 84px)) 0 clamp(56px, 6vw, 112px);
}
.ue-auftakt__innen {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(32px, 4.4vw, 96px); row-gap: 40px; align-items: center;
}
.ue-auftakt__text .t-gross { margin-top: clamp(14px, 1.6vw, 26px); }
.ue-auftakt__text .t-aussage { margin-top: clamp(18px, 2vw, 30px); max-width: 24em; }
/* Die Webseite oben rechts, das PDF davor unten links. Die Breite hängt auch an
   der Bildschirmhöhe, damit die Bühne nie höher als rund 70 % wird
   (Höhe der Bühne = 0,57 × Breite). */
.ue-buehne { position: relative; justify-self: end; width: min(100%, 122svh); padding-bottom: 14%; }
.ue-buehne__web { width: 82%; margin-left: auto; box-shadow: 0 40px 90px -60px rgba(16, 24, 32, .45); }
.ue-buehne__pdf { position: absolute; left: 0; bottom: 0; width: 44%; box-shadow: 0 30px 60px -28px rgba(16, 24, 32, .38); }

/* ── Bild und Text nebeneinander (2, 4, 5, 6) ──────────────────────────── */
.ue-teil {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 48px); row-gap: 32px; align-items: center;
}
.ue-teil__text, .ue-teil__bild { grid-row: 1; min-width: 0; }
.ue-teil__text .t-gross { margin-top: clamp(14px, 1.6vw, 26px); }
.ue-teil__text .t-aussage { margin-top: clamp(18px, 2vw, 30px); }
.ue-teil__knopf { margin-top: clamp(24px, 2.6vw, 40px); }
.ue-teil--bild-links .ue-teil__bild { grid-column: 1 / span 6; }
.ue-teil--bild-links .ue-teil__text { grid-column: 8 / span 5; }
.ue-teil--bild-rechts .ue-teil__text { grid-column: 1 / span 5; }
.ue-teil--bild-rechts .ue-teil__bild { grid-column: 7 / span 6; }
/* Querbilder: Breite an die Bildschirmhöhe gebunden (Seitenverhältnis 1,6 bis 1,8,
   also höchstens rund 75 % Bildschirmhöhe). */
.ue-teil__bild > .ue-rahmen { width: min(100%, 128svh); }
.ue-teil--bild-rechts .ue-teil__bild > .ue-rahmen { margin-left: auto; }

/* ── 3 Software ────────────────────────────────────────────────────────── */
.ue-kopf {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 48px); row-gap: 22px; align-items: end;
}
.ue-kopf > div { grid-column: 1 / span 7; }
.ue-kopf > div .t-gross { margin-top: clamp(14px, 1.6vw, 26px); }
.ue-kopf > .t-aussage { grid-column: 9 / span 4; }
/* Seitenverhältnis 1,4: Breite höchstens 105 svh, also rund 75 % Höhe. */
.ue-gross { margin: clamp(36px, 4.4vw, 80px) 0 0; }
.ue-gross .ue-rahmen { width: min(100%, 105svh, 1320px); margin-inline: auto; box-shadow: 0 60px 120px -80px rgba(16, 24, 32, .5); }

/* ── 4 Grundriss und Modell ────────────────────────────────────────────── */
.ue-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 28px); width: min(100%, 108svh); justify-self: end; }
.ue-paar__stueck { margin: 0; display: grid; gap: 10px; min-width: 0; }
/* Beide Bilder liegen absolut im Feld, sonst bringt das SVG seine Eigenhöhe
   als Mindesthöhe mit und wird im quadratischen Handy-Feld abgeschnitten. */
.ue-paar__feld { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; }
.ue-paar__feld > img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
/* Das Standbild hat viel leeren Rand und ist unten angeschnitten: Ausschnitt
   genau auf das Modell (Pixel 187 bis 673 waagerecht, 147 bis 801 senkrecht). */
/* Unten läuft das Modell weich aus, weil das Standbild dort hart abgeschnitten ist. */
.ue-modell {
  position: absolute; top: 8%; left: 50%; height: 84%; width: auto; aspect-ratio: 486 / 654; transform: translateX(-50%); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent); mask-image: linear-gradient(180deg, #000 86%, transparent);
}
.ue-modell img { position: absolute; max-width: none; width: 139.71%; height: auto; left: -38.48%; top: -22.48%; }
.ue-paar__stueck figcaption { display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--akzent); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte); }

/* ── 5 Werkzeuge: zwei Ansichten, die Raumliste fast quadratisch, das Exposé quer ── */
.ue-zwei { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(14px, 1.6vw, 28px); align-items: end; width: min(100%, 150svh); }
.ue-zwei__expose { margin-bottom: clamp(24px, 4vw, 72px); }
/* Zwei Bilder brauchen mehr Fläche als eins: hier sieben Spalten Bild. */
@media (min-width: 901px) { .ue-teil--bild-links .ue-teil__bild.ue-zwei { grid-column: 1 / span 7; } }

/* ── Firma ─────────────────────────────────────────────────────────────── */
.ue-firma__hinweis { margin-top: 22px; }

/* ── 7 Gespräch ────────────────────────────────────────────────────────── */
.ue-schluss {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 48px); row-gap: 32px; align-items: center;
}
.ue-schluss__text { grid-column: 1 / span 6; }
.ue-schluss__text .t-gross { margin-top: clamp(14px, 1.6vw, 26px); }
.ue-schluss__text .t-aussage { margin-top: clamp(18px, 2vw, 30px); }
.ue-schluss__knopf { margin-top: clamp(24px, 2.6vw, 40px); }
.ue-schluss__bild { grid-column: 9 / span 4; }

/* ── Mittlere Breiten: Text bekommt mehr Platz ─────────────────────────── */
@media (max-width: 1240px) and (min-width: 901px) {
  .ue-kopf > div { grid-column: 1 / span 7; }
  .ue-kopf > .t-aussage { grid-column: 8 / span 5; }
}

/* ── Handy: eine Spalte, 16 px Rand (stil.css), Text vor dem Bild, Bilder quer ── */
@media (max-width: 900px) {
  .ue-auftakt { padding: calc(var(--kopf) + 28px) 0 48px; }
  .ue-auftakt__innen, .ue-teil, .ue-kopf, .ue-schluss { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .ue-auftakt__text, .ue-buehne,
  .ue-teil .ue-teil__text, .ue-teil .ue-teil__bild,
  .ue-kopf > div, .ue-kopf > .t-aussage,
  .ue-schluss__text, .ue-schluss__bild { grid-column: 1 / -1; grid-row: auto; }
  .ue-teil .ue-teil__bild { grid-row: 2; }
  .ue-kopf { row-gap: 16px; }
  .ue-buehne { width: 100%; justify-self: stretch; }
  .ue-teil__bild > .ue-rahmen, .ue-gross .ue-rahmen { width: 100%; }
  .ue-gross { margin-top: 28px; }
  .ue-paar { width: 100%; gap: 12px; }
  /* Am Handy quadratisch, damit das Paar zusammen quer liegt. */
  .ue-paar__feld { aspect-ratio: 1 / 1; }
  .ue-paar__stueck figcaption { font-size: .6875rem; letter-spacing: .14em; }
  /* Raumliste quer zugeschnitten (oberer Teil mit Grundriss), Exposé darüber. */
  .ue-zwei { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ue-zwei__expose { order: -1; margin-bottom: 0; }
  .ue-zwei__liste { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
  .ue-schluss__bild { max-width: none; }
}
@media (max-width: 560px) {
  .ue-teil__knopf .knopf, .ue-kontakt__knopf { width: 100%; }
}

/* Aus dem Aufmaß: Text, Raumliste, Handy (11.10.2026, 13:55) */
.ue-aufmass__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 48px); row-gap: 32px; align-items: start; }
.ue-aufmass__wort { grid-column: 1 / span 4; }
.ue-aufmass__wort .t-gross { margin: 12px 0 16px; }
.ue-aufmass__wort .t-text { margin-top: 14px; }
.ue-aufmass__tabelle { grid-column: 6 / span 7; padding-top: 6px; }
.ueberzeile--ohne::before { display: none; }
.ue-raumliste { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .9375rem; }
.ue-raumliste th, .ue-raumliste td { text-align: left; padding: 11px 10px 11px 0; border-bottom: 1px solid #c6d2e1; vertical-align: top; }
.ue-raumliste thead th { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); padding-top: 0; }
.ue-raumliste tbody th { font-weight: 550; color: var(--tinte); }
.ue-raumliste td { color: var(--text); }
.ue-raumliste__leer { color: var(--leise); }
.ue-raumliste tfoot th, .ue-raumliste tfoot td { border-bottom: 0; font-weight: 600; color: var(--tinte); padding-top: 12px; }
.ue-aufmass__tabelle .t-klein { margin-top: 14px; }
.ue-handy { grid-column: 11 / span 2; justify-self: end; width: 100%; max-width: 236px; border-radius: 26px; padding: 9px; background: #101820; box-shadow: 0 18px 48px rgba(16, 24, 32, .18); }
.ue-handy__kopf { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px; background: #fff; border-radius: 18px 18px 0 0; }
.ue-handy__kreis { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--akzent); color: #fff; font-size: .75rem; font-weight: 600; }
.ue-handy__kopf b { display: block; font-size: .875rem; color: var(--tinte); } .ue-handy__kopf small { display: block; font-size: .6875rem; color: var(--leise); }
.ue-handy__chat { display: grid; gap: 8px; padding: 12px 10px 200px; background: var(--band); border-radius: 0 0 18px 18px; }
.ue-handy__blase { position: relative; padding: 10px 12px 18px; background: #fff; border-radius: 12px; font-size: .8125rem; line-height: 1.4; color: var(--tinte); }
.ue-handy__blase time { position: absolute; right: 10px; bottom: 5px; font-size: .625rem; color: var(--leise); }
.ue-handy__blase--datei { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding-bottom: 10px; }
.ue-handy__pdf { display: grid; place-items: center; width: 34px; height: 40px; border-radius: 4px; background: var(--band); color: var(--akzent); font-size: .5625rem; font-weight: 700; letter-spacing: .06em; }
.ue-handy__blase--datei b { display: block; font-size: .75rem; line-height: 1.3; } .ue-handy__blase--datei small { display: block; margin-top: 3px; font-size: .6875rem; color: var(--leise); }
@media (max-width: 1040px) { .ue-aufmass__wort, .ue-aufmass__tabelle { grid-column: 1 / -1; } .ue-handy { display: none; } }
@media (max-width: 640px) { .ue-raumliste { font-size: .875rem; } .ue-raumliste th:nth-child(3), .ue-raumliste td:nth-child(3) { display: none; } }

/* Team (14.10.2026): Gruppenfoto im Hochformat in Abschnitt 2, darunter zwei Porträts, das rechte versetzt. */
.ue-teil__bild--hoch { align-self: center; }
.ue-hoch { position: relative; width: min(100%, 62svh, 560px); }
.ue-hoch .ue-rahmen { width: 100%; }
.ue-personen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 80px);
  max-width: 1040px; margin: clamp(32px, 3.6vw, 56px) auto 0; align-items: start;
}
.ue-person:nth-child(2) { margin-top: clamp(48px, 7vw, 120px); }
.ue-person__bild { position: relative; }
.ue-person__bild .ue-rahmen { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ue-person__rolle { margin-top: clamp(16px, 1.6vw, 24px); }
.ue-person__name { margin: 8px 0 0; font-weight: 600; font-size: clamp(1.375rem, 1.1rem + .6vw, 1.875rem); line-height: 1.15; letter-spacing: -.01em; }
.ue-person .t-text { margin-top: 14px; max-width: 34em; }
@media (max-width: 900px) {
  .ue-hoch { width: min(100%, 440px); margin: 0 auto; }
  .ue-personen { column-gap: 14px; }
  .ue-person:nth-child(2) { margin-top: 32px; }
  .ue-person .t-text { font-size: .9375rem; }
}
@media (max-width: 560px) {
  .ue-personen { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .ue-person:nth-child(2) { margin-top: 0; }
}