/* ============================================================
   werte2.css — die Werte-Seite (/ueberuns/werte) im Stil der
   Startseite v15. Angelegt 2026-09-28 (MacBook Air von Fabio).
   Auftrag Fabio: «Es soll darkmode haben und ein neues design mit
   besserem text (deutlich weniger und professioneller)».

   AUFBAU
   werte.html laedt start2.css (Marken --s15-* hell/dunkel, Grund,
   Knoepfe, Schluss, Fusszeile) und start2.js (Hell/Dunkel-Schalter in
   der Kopfzeile, Einblenden). Diese Datei bringt nur, was die
   Werte-Seite allein hat: den Aufmacher und die vier Werte als Zeilen.
   Groessen wie auf /panel und /domains (Titel, Einleitung) und wie die
   Zeilen «Enthalten» der Startseite — keine eigene Leiter.

   NAMEN
   Alles traegt `w15-`. Den Praefix kennt kein anderes Blatt des
   Auftritts (gezaehlt 28.09.2026 ueber alle 827 Live-Dateien).
   ============================================================ */

/* ── Grund ──────────────────────────────────────────────────── */
body.w15-seite{
  background:var(--s15-bg);
  color:var(--s15-text);
  -moz-osx-font-smoothing:grayscale;
  font-optical-sizing:auto;
  font-synthesis:none;
  overflow-x:clip;
  transition:background .5s,color .5s;
}

/* ── Aufmacher ──────────────────────────────────────────────── */
.w15-held{
  padding:clamp(56px,9vh,110px) 22px clamp(40px,5vw,72px);
  text-align:center;
}
.w15-held__innen{max-width:900px;margin:0 auto;}
/* Die Oberzeile fuehrt zurueck zu «Über uns» — sie bleibt grau wie jede
   Oberzeile (start2.css faerbt Links in .s15 sonst blau). */
.s15 a.w15-zurueck{color:var(--s15-text2);}
.s15 a.w15-zurueck:hover{color:var(--s15-text);text-decoration:underline;}
.w15-held__titel{
  margin:12px 0 0;
  font-size:clamp(44px,6.4vw,88px);line-height:1.02;
  font-weight:600;letter-spacing:-0.034em;text-wrap:balance;
}
/* balance statt pretty: die Einleitung steht mittig auf zwei Zeilen, und
   «pretty» liess «messen können.» allein in der zweiten stehen. */
.w15-held__text{
  margin:22px auto 0;max-width:620px;
  font-size:clamp(17px,1.5vw,21px);line-height:1.45;
  color:var(--s15-text2);letter-spacing:-0.01em;text-wrap:balance;
}

/* ── Die vier Werte ─────────────────────────────────────────── */
.w15-werte{padding:clamp(24px,3vw,40px) 22px clamp(88px,10vw,150px);}
.w15-liste{list-style:none;margin:0;padding:0;}
.w15-wert{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:10px 40px;align-items:baseline;
  padding:34px 0;border-top:1px solid var(--s15-line);
}
.w15-wert:last-child{border-bottom:1px solid var(--s15-line);}
.w15-wert__name{margin:0;font-size:clamp(28px,3.2vw,42px);line-height:1.1;font-weight:600;letter-spacing:-0.024em;}
.w15-wert__text{margin:0;max-width:600px;font-size:19px;line-height:1.45;color:var(--s15-text2);letter-spacing:-0.01em;text-wrap:pretty;}

/* ── Schluss: zwei Wege nebeneinander ───────────────────────── */
.w15-schluss__knoepfe{
  margin-top:32px;display:flex;gap:18px 28px;
  align-items:center;justify-content:center;flex-wrap:wrap;
}
.s15 .w15-schluss__knoepfe a.s15-schluss__knopf{margin-top:0;}

/* ── Telefon ────────────────────────────────────────────────── */
@media (max-width:640px){
  .w15-wert{padding:24px 0;}
  .w15-wert__text{font-size:17px;}
}