/* ============================================================
   kontakt2.css — /kontakt im Stil der Startseite v15.
   Angelegt 2026-10-05 (CrackBookAir/Fabrizio, techq-83). Auftrag Fabrizio:
   die Kontaktseite «hat noch teils altes Design» — Kennzahlen in Rahmen,
   Strichzeichnungen, schwarze Knöpfe, Etiketten in Grossbuchstaben.
   Freigegebene Richtung: Texte und Funktionen bleiben, die Bausteine kommen
   von der Startseite.

   AUFBAU
   <main class="t15"> wie alle Unterseiten; der Kopf (.about-sub-hero) kommt
   aus unterseite2.css. Die Abschnitte darunter tragen selbst `s15` — wie
   /ueberuns —, damit .s15-ueber, .s15-knopf, .s15-frage und .s15-schluss
   aus start2.css unverändert gelten. Einblenden: `data-s15-ein` (start2.js),
   dieselbe Bewegung wie auf den anderen v15-Seiten.
   Hier steht nur, was die Seite allein hat: Kennzahlen, das Raster der
   Kapitel, der Adressblock. Präfix k15- (gezählt 05.10.2026: kein anderes
   Blatt nutzt ihn).

   KASTENMODELL
   In `.s15` gilt content-box (start2.css). Raster-Kinder füllen ihre Spur
   trotzdem samt Polster; wo ein Element eine feste Breite braucht, steht
   box-sizing am Element.
   ============================================================ */

/* ── Kennzahlen: ruhige Kacheln ohne Rahmen ─────────────────── */
/* Fläche, Rundung und Polster wie .s15-kachel; der Wert in der Grösse der
   Zeilennamen der Startseite (.s15-zeile__name). */
.k15-zahlen-block{padding:clamp(8px,2vw,24px) 22px clamp(72px,8vw,120px);}
.k15-zahlen{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
}
.k15-zahl{
  background:var(--s15-card);border-radius:24px;padding:30px;
  display:flex;flex-direction:column;gap:10px;
}
.k15-zahl__wert{
  font-size:clamp(28px,3.2vw,42px);line-height:1.05;font-weight:600;
  letter-spacing:-0.024em;color:var(--s15-text);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.k15-zahl__einheit{margin-left:.1em;}
.k15-zahl__text{margin:0;font-size:17px;line-height:1.42;color:var(--s15-text2);text-wrap:pretty;}

/* ── Kapitel: links der Weg, rechts die Fragen ──────────────── */
.k15-raster{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,6vw,96px);align-items:start;
}
/* Titelgrösse wie der Text neben dem Laptop der Startseite
   (.s15-seite__titel): vier Kapitel untereinander, keins soll den Kopf
   der Seite (44–88 px) überstimmen. */
.k15-titel{
  margin:12px 0 0;font-size:clamp(34px,3.8vw,56px);line-height:1.04;
  font-weight:600;letter-spacing:-0.03em;color:var(--s15-text);text-wrap:balance;
}
/* v15-Titel sind einfarbig (wie im Kopf, unterseite2.css). */
.k15-titel em{font-style:normal;color:inherit;}
.k15-text{
  margin:20px 0 0;max-width:560px;
  font-size:19px;line-height:1.45;letter-spacing:-0.01em;
  color:var(--s15-text2);text-wrap:pretty;
}
.k15-text + .k15-text{margin-top:14px;}
.k15-text strong{color:var(--s15-text);font-weight:600;}
/* Verweise im Fliesstext bleiben unterstrichen: im grauen Text wären sie
   sonst nur an der Farbe zu erkennen (#0066cc gegen #6e6e73). */
.s15 .k15-text a,
.s15 .k15-fragen .s15-frage__antwort a{text-decoration:underline;text-underline-offset:3px;}
/* Adressen im Text: dieselbe Schrift wie der Satz, nur kräftiger. Die
   Mono-Marke zeigt am Mac SF Pro, auf Windows aber JetBrains Mono. */
.k15-kapitel .mono{font-family:inherit;font-weight:500;color:var(--s15-text);}

/* Adressblock: die Adresse ist die Hauptsache des Kapitels. */
.k15-adresse{margin-top:32px;padding-top:24px;border-top:1px solid var(--s15-line);}
.k15-adresse__lab{display:block;font-size:15px;line-height:1.4;color:var(--s15-text2);}
/* Mindestens 44 px hoch: am Telefon (28 px Schrift) war der Verweis 31 px
   hoch, gemessen 06.10.2026 (Fingerziel). Am Rechner (42 px) ändert sich nichts. */
.s15 a.k15-adresse__wert{
  display:inline-flex;align-items:center;min-height:44px;margin-top:6px;
  font-size:clamp(28px,3.2vw,42px);line-height:1.1;font-weight:600;letter-spacing:-0.024em;
  color:var(--s15-text);overflow-wrap:anywhere;
  transition:color .2s ease;
}
.s15 a.k15-adresse__wert:hover{color:var(--s15-link);text-decoration:none;}

/* Handlungen: Hauptknopf als blaue Pille (.s15-knopf), Nebenhandlung als
   Textverweis wie «Mehr erfahren ›» der Startseite. */
.k15-aktionen{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;}
.k15-aktionen:empty{display:none;}
/* Die Knöpfe, die kontakt.js anlegt, sind <button> — .s15-knopf gilt nur
   für Verweise. Gleiche Form, gleiche Farben. */
.k15-knopf{
  display:inline-block;border:0;border-radius:980px;padding:12px 22px;
  background:var(--s15-cta);color:#fff;font:inherit;font-size:17px;line-height:inherit;
  cursor:pointer;transition:background-color .2s ease;
}
.k15-knopf:hover{background:var(--s15-ctah);}
.k15-neben{
  display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;
  font:inherit;font-size:17px;color:var(--s15-link);cursor:pointer;
}
.k15-neben:hover{text-decoration:underline;text-underline-offset:3px;}
.k15-knopf:focus-visible,
.k15-neben:focus-visible{outline:2px solid var(--s15-link);outline-offset:3px;}
.k15-neben:focus-visible{border-radius:6px;}
/* Rückmeldung des Kopierens — eigenes Feld mit aria-live (kontakt.js). */
.k15-meldung{font-size:15px;color:var(--s15-text2);}
.k15-meldung:empty{display:none;}
/* Gedrückt: kurz kleiner, wie eine echte Taste. Nur mit Maus/Finger und
   nur, wenn Bewegung erlaubt ist. */
@media (prefers-reduced-motion:no-preference){
  .k15-knopf,.s15 a.s15-knopf{transition:background-color .2s ease,transform .16s cubic-bezier(.23,1,.32,1);}
  .k15-knopf:active,.s15 .k15-aktionen a.s15-knopf:active{transform:scale(.97);}
}

/* Fragen: Aufklapper der Startseite (.s15-frage). Die Antwort hat hier
   mehrere Absätze. Die letzte Zeile schliesst mit einer Linie ab. */
.k15-fragen{border-bottom:1px solid var(--s15-line);}
.k15-fragen .s15-frage__antwort p{margin:0 0 12px;}
.k15-fragen .s15-frage__antwort p:last-child{margin:0;}
.k15-fragen .s15-frage__antwort strong{color:var(--s15-text);font-weight:600;}
/* Erste Linie auf Höhe des Titels: die Oberzeile (17 px × 1.4) plus 12 px. */
@media (min-width:960px){
  .k15-fragen{margin-top:36px;}
}

/* ── Schluss: zwei Wege nebeneinander (wie /ueberuns/werte) ── */
.k15-schluss{margin-top:clamp(24px,4vw,56px);}
.k15-schluss__knoepfe{
  margin-top:32px;display:flex;gap:18px 28px;
  align-items:center;justify-content:center;flex-wrap:wrap;
}
/* Im Schlussfeld die Umkehrpille wie auf Startseite, /domains, /panel, /ueberuns
   und /ueberuns/werte (.s15-schluss__knopf), nicht die blaue: Das Schlussfeld
   sieht auf allen v15-Seiten gleich aus (techq-83, 06.10.2026). Ihr Abstand oben
   kommt hier aus der Gruppe, wie in werte2.css. */
.s15 .k15-schluss__knoepfe a.s15-schluss__knopf{margin-top:0;}

/* ── Schmaler ───────────────────────────────────────────────── */
@media (max-width:1099.98px){
  .k15-zahlen{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:959.98px){
  .k15-raster{grid-template-columns:minmax(0,1fr);gap:36px;}
}
@media (max-width:640px){
  .k15-zahlen{grid-template-columns:minmax(0,1fr);gap:12px;}
  .k15-zahl{padding:24px;}
  .k15-text{font-size:17px;}
  .k15-fragen .s15-frage__kopf{font-size:18px;}
  .k15-fragen .s15-frage__antwort{padding-right:0;}
}

/* [hidden] je Klasse (Standard §4) */
.k15-aktionen[hidden],.k15-zahl[hidden],.k15-meldung[hidden]{display:none;}