/* ============================================================
   ueberuns2.css — /ueberuns im Stil der Startseite v15.
   Angelegt 2026-09-28 (MacBook Air von Fabio). Auftrag Fabio: «nun
   über uns. Die partikel sollten aber bleiben».

   SEIT 05.10.2026 (Entscheid Fabrizio «Partikel nur oben», techq-83)
   - Aufmacher (.u15-held): fuellt den ersten Bildschirm, Text links, rechts
     formen die Partikel das techQ-Logo (ueberuns2.js zeichnet in #field;
     die Lage des Logos gibt [data-u15-ziel] vor). Kein 560vh-Scrollweg mehr,
     keine feste Buehne hinter dem Inhalt, kein Fortschrittsbalken.
   - Die fuenf Kapitel, die vorher als Partikel-Stufen 02–06 nacheinander
     durchs Bild fuhren (Text halb ausgeblendet, solange die Form wechselte),
     stehen als Kacheln in einem ruhigen Abschnitt (.u15-kapitel).
   - ueberuns-exp.css laedt diese Seite nicht mehr; .u15-vorhang ist weg —
     ohne feste Buehne gibt es nichts mehr zuzudecken.
   ============================================================ */

/* ── Grund ──────────────────────────────────────────────────── */
body.u15-seite{
  background:var(--s15-bg);
  color:var(--s15-text);
  -moz-osx-font-smoothing:grayscale;
  font-optical-sizing:auto;
  font-synthesis:none;
  overflow-x:clip;
}
/* Marken-Blau fuer das hervorgehobene Wort, wie bisher in den Stufen und in
   der Wolke (hell #3f7fdf, dunkel #8bb2ea). Nur in Schrift ab 26 px:
   #3f7fdf hat auf Weiss 3.95:1 — fuer Grossschrift reichen 3:1, fuer
   Fliesstext nicht (Standard §4.1). */
.u15-akzent{color:#3f7fdf;}
html[data-theme="dark"] .u15-akzent{color:#8bb2ea;}

/* ── Aufmacher ──────────────────────────────────────────────── */
/* Hoehe wie /domains: Fenster minus Kopfzeile (--kz-h-voll 64 px + 1 px
   Linie), svh mit vh davor fuer Browser ohne svh. */
.u15-held{
  position:relative;overflow:hidden;isolation:isolate;
  box-sizing:border-box;
  min-height:calc(100vh - var(--kz-h-voll, 64px) - 1px);
  min-height:calc(100svh - var(--kz-h-voll, 64px) - 1px);
  display:flex;align-items:center;
  padding:clamp(48px,8vh,96px) max(22px, calc((100vw - 1180px) / 2));
  background:var(--s15-bg);
}
.u15-held__feld{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:0;pointer-events:none;
}
.u15-held__innen{
  position:relative;z-index:1;width:100%;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.u15-held__text{max-width:560px;}
.u15-held__titel{
  margin:12px 0 0;
  font-size:clamp(48px,6.4vw,88px);line-height:1.02;
  font-weight:600;letter-spacing:-0.034em;
}
.u15-held__unter{
  margin:22px 0 0;max-width:30em;
  font-size:clamp(17px,1.5vw,21px);line-height:1.45;
  color:var(--s15-text2);letter-spacing:-0.01em;text-wrap:pretty;
}
.u15-held__unter b{color:var(--s15-text);font-weight:600;}
/* Hier formen die Partikel das Logo — Seitenverhaeltnis des Logos
   (viewBox 308.2 x 90.3). Ohne Skript (oder bevor es laeuft) steht hier das
   Logo als Bild; ueberuns2.js setzt `u15-held--partikel`, dann nur noch Wolke. */
.u15-held__logo{
  width:100%;max-width:620px;justify-self:center;
  aspect-ratio:308.2 / 90.3;
  background:url(/assets/img/techq-logo-light.svg?v=4) center / contain no-repeat;
}
html[data-theme="dark"] .u15-held__logo{background-image:url(/assets/img/techq-logo-dark.svg?v=4);}
/* Nur das Bild weg, nicht die Kurzform: `background:none` setzte auch Wiederholung
   und Groesse zurueck, und die Dunkel-Regel darueber (0,2,1) brachte das Bild
   wieder — gekachelt (05.10.2026 im Abzug gesehen). Deshalb beide Themen hier. */
html .u15-held--partikel .u15-held__logo,
html[data-theme="dark"] .u15-held--partikel .u15-held__logo{background-image:none;}
/* Einblenden beim Laden (start2.css §18): Reihenfolge der drei Teile. */
[data-s15-intro].u15-held__titel{--s15-i:1;}
[data-s15-intro].u15-held__unter{--s15-i:2;}

@media (max-width:899.98px){
  .u15-held__innen{grid-template-columns:minmax(0,1fr);gap:clamp(28px,6vh,56px);}
  .u15-held__text{max-width:none;}
  .u15-held__logo{max-width:520px;}
}

/* ── Wofuer wir stehen (die fuenf Kapitel) ──────────────────── */
/* Drei oben, zwei unten auf einem Sechser-Raster: beide Reihen fuellen die
   Breite, keine Luecke am Ende. Kacheln wie die Karten der Startseite
   (.s15-karte): Grund --s15-tile auf dem grauen Abschnitt, 28 px Rundung,
   kein Rand (Standard §4.1: gerahmt wird ein Werkzeug, kein Text). */
.u15-kacheln{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;
}
.u15-kachel{
  grid-column:span 2;
  background:var(--s15-tile);border-radius:28px;
  padding:clamp(28px,3.2vw,40px) clamp(24px,2.8vw,36px);
  display:flex;flex-direction:column;
}
.u15-kachel:nth-child(n+4){grid-column:span 3;}
.u15-kachel__titel{
  margin:12px 0 0;
  font-size:clamp(26px,2.4vw,32px);line-height:1.1;
  font-weight:600;letter-spacing:-0.022em;text-wrap:balance;
}
.u15-kachel__text{
  margin:16px 0 0;
  font-size:17px;line-height:1.47;
  color:var(--s15-text2);letter-spacing:-0.01em;text-wrap:pretty;
}
.u15-kachel__text b{color:var(--s15-text);font-weight:600;}
.u15-kapitel__knoepfe{
  margin-top:clamp(36px,4vw,56px);
  display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;
}
@media (max-width:1023.98px){
  .u15-kacheln{grid-template-columns:repeat(2,minmax(0,1fr));}
  .u15-kachel,.u15-kachel:nth-child(n+4){grid-column:auto;}
  .u15-kachel:last-child{grid-column:1 / -1;}
}
@media (max-width:640px){
  .u15-kacheln{grid-template-columns:minmax(0,1fr);gap:14px;}
  .u15-kachel:last-child{grid-column:auto;}
  .u15-kachel{border-radius:24px;}
}

/* ── Schluss und Fusszeile ──────────────────────────────────── */
.u15-schluss{padding-top:clamp(64px,8vw,110px);padding-bottom:clamp(64px,8vw,110px);}
.u15-seite .s15-fuss{margin-top:0;}

/* ── Vier Perspektiven ──────────────────────────────────────── */
.u15-zeilen{margin-top:clamp(40px,5vw,64px);}

/* ── Warum eigentlich techQ? ────────────────────────────────── */
.u15-name{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(40px,7vw,96px);align-items:start;
}
.u15-name__intro{position:sticky;top:110px;}
/* In der halben Spalte brach die volle Groesse auf drei Zeilen um. */
.u15-name__intro .s15-h2{font-size:clamp(36px,4.4vw,56px);}
.u15-name__liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--s15-line);}
.u15-buchstabe{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:24px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--s15-line);
}
.u15-buchstabe__zeichen{
  width:64px;height:64px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--s15-inv);color:var(--s15-invtext);
  font-size:30px;font-weight:600;letter-spacing:-0.03em;line-height:1;
}
/* Das Q wie im Logo: Marken-Blau. Weiss darauf 3.7:1 — bei 30 px fett genug (3:1). */
.u15-buchstabe__zeichen--q{background:#3f7fdf;color:#fff;}
.u15-buchstabe__titel{margin:0;font-size:21px;font-weight:600;letter-spacing:-0.015em;line-height:1.25;}
.u15-buchstabe__text{margin:6px 0 0;font-size:17px;line-height:1.5;color:var(--s15-text2);}

@media (max-width:860px){
  .u15-name{grid-template-columns:1fr;}
  .u15-name__intro{position:static;}
}

/* ── Telefon ────────────────────────────────────────────────── */
@media (max-width:760px){
  .u15-buchstabe{grid-template-columns:52px minmax(0,1fr);gap:18px;}
  .u15-buchstabe__zeichen{width:52px;height:52px;border-radius:13px;font-size:25px;}
}