/* ============================================================================
   gestaltung.css — die Bildsprache von 2026-09-22
   ============================================================================
   Zusammengesetzt aus zwei Teilen, die in der Vorschau getrennt lagen:
   `v/flow.css` (Grundform) und `v/a.css` (Bewegung).
   Entwurfsstaende: ~/Projects/techq/preview-startseite-2026-09-21/

   > [!danger] Diese Datei ERSETZT `startseite.css` NICHT, sie liegt DARUEBER.
   > Sie ueberschreibt Token, Schriften, Abstaende und ein paar Bausteine —
   > alles Uebrige (`.tqs-hero__photo{position:absolute}`, `.tqs-faq`,
   > `.tqs-btn`, `.svc-card`, …) kommt weiter aus `startseite.css`. Wer sie
   > zusammenlegt, verliert genau diese Regeln: am 22.09.2026 stand das
   > Rechenzentrumsfoto danach im Fluss, 1000 px hoch, und schob den Aufmacher
   > unter den Bildschirmrand.
   >
   > Ladereihenfolge: fonts -> … -> startseite.css -> shop-mobil.css ->
   > **gestaltung.css**. Sie muss die letzte sein.

   Geladen von `index.html` UND `webmail.html`. Wer hier etwas aendert, hebt
   die `?v=`-Nummer in BEIDEN Seiten — `tools/cachebust.py techq.ch
   assets/gestaltung.css` erledigt das und nennt die auszuliefernden Dateien.

   STAND 06.10.2026 (gezählt): nur noch `webmail.html` lädt dieses Blatt, und
   nach ihm kommen hell-dunkel.css, start2.css und unterseite2.css. Die zwei
   Absätze oben gelten so nicht mehr. Die Schicht «v15 (Runde 4)» am Ende
   hebt sich darum mit `:not(#_)` über die später geladenen Blätter.
   ============================================================================ */

/* ============================================================================
   flow.css — gemeinsame Bildsprache der drei Entwürfe (Runde 2)
   ----------------------------------------------------------------------------
   Auftrag Fabio, 21.09.2026: «Weniger diese versprechen wie ms zahlen etc.
   orientiere dich an https://Flow.swiss»

   AM 21.09.2026 AN flow.swiss GEMESSEN (nicht geschätzt):

     Schrift      Avenir Next LT Pro, Gewicht 400 — auch in h1, h2 und Knöpfen
     h1           55.5 px · Zeilenhöhe 1.30 · Laufweite +0.5 px
     h2           40 px   · Zeilenhöhe 1.35 · Laufweite +0.6 px
     Fliesstext   24 px   · Zeilenhöhe 1.46 · Laufweite +0.36 px
     Farbe        reines Schwarz auf Weiss, schwarze Vollbreitbänder mit Weiss
     Blau         #276EF1, EIN Akzent, sonst nichts
     Karte        weiss, Radius 25 px, KEIN Schatten
     Knopf        Pille (Radius 24), 13/24 px, 20 px, Gewicht 400

   WAS ÜBERNOMMEN IST
     Der Satz: leichtes Gewicht, grosse Grade, POSITIVE Laufweite, luftige
     Zeilen. Das ist das Gegenteil des bisherigen techQ-Satzes (Gewicht 500,
     -0.028em, Zeilenhöhe 1.03) und der sichtbarste Unterschied.
     Dazu: Schwarz/Weiss-Wechsel statt getönter Flächen, Karten ohne Schatten,
     Zeilenlisten mit langem Pfeil, der gepunktete Schrittzeiger, Pillenknöpfe.

   WAS NICHT ÜBERNOMMEN IST
     Flows Blau. techQ behält #1E5FBF — die Markenfarbe ist ein Entscheid der
     Inhaber, keine Gestaltungsfrage.
     Avenir Next. Dafür 'Nunito Sans' im Gewicht 400: liegt schon selbst
     gehostet im Repo (variabel, 400–800), ist geometrisch-humanistisch wie
     Avenir und kostet keine einzige neue Datei.

   ABWEICHUNGEN VOM STANDARD §4 — bewusst, bitte gegenlesen
     · Knopfradius: Standard sagt 10 px, hier Pille. Flows Signatur.
     · Kartenradius: Standard sagt 14 px, hier 22 px.
     · Grössenleiter: die Startseite fährt schon länger eigene clamp()-Grade;
       hier sind sie an Flows Verhältnisse angeglichen.
     Farben, Kontrastregeln und die Flächenregel («gerahmt wird ein Werkzeug,
     nicht ein Text») bleiben unangetastet.
   ========================================================================== */

/* ── Token ─────────────────────────────────────────────────────────────────
   Graustufen neutral (Entscheid Fabrizio 20.09.2026: «eher schwarz weiss
   orientiert»). Jeder Wert hier hat R = G = B. --text-muted misst 5.33:1 auf
   Weiss, --fw-muted-dunkel 5.6:1 auf Schwarz. */
:root, :root[data-theme="light"] {
  --text:        #000000;
  --text-body:   #1D1D1D;
  --text-muted:  #6B6B6B;
  --text-faint:  #6B6B6B;
  --border:        #E3E3E3;
  --border-strong: #C9C9C9;
  --border-faint:  #EDEDED;
  --bg:      #FFFFFF;
  --bg-alt:  #F2F2F2;
  --surface: #FFFFFF;
  --row-hover: #F7F7F7;

  --accent:       #1E5FBF;
  --accent-hover: #17509F;
  --accent-text:  #1c4f9e;
  --accent-lt:    rgba(30, 95, 191, 0.07);

  --fw-schwarz:  #000000;      /* Vollbreitband */
  --fw-auf-schwarz: rgba(255,255,255,.72);

  --tqs-r-btn:  999px;         /* Pille — Flow */
  --tqs-r-card: 22px;

  /* Fabio, 22.09.2026: «Ich will unsere jetzige TechQ schriftart drauf haben.»
     Also zurück auf den Markenstapel aus `fonts.css` — SF Pro auf Apple-
     Geräten, Inter als Rückfall. Nunito Sans ist damit wieder raus.
     Was von Flow BLEIBT, ist nicht die Schrift, sondern ihr Verhalten:
     Gewicht 400 statt 500, luftige Zeilen, grosse Grade. Die Laufweite steht
     auf 0 — Flows +0.5 px gehört zu Avenir; SF Pro wirkt damit auseinander-
     gezogen, und techQs eigener Wert (-0.028em) zieht sie wieder zu. */
  --fw-anzeige: var(--tq-ui);
}

/* ── Satz ─────────────────────────────────────────────────────────────────── */
body { color: var(--text-body); font-family: var(--tq-ui); }

h1, h2, h3,
.fw-anzeige,
.tqs-name, .tqs-price__num {
  font-family: var(--fw-anzeige);
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0;
}
h1 { line-height: 1.16; }
h2 { line-height: 1.22; }
h3 { line-height: 1.3; }

/* Der Aufmacher trägt seine Grade INLINE (so steht es im Standard §4.2).
   `bauen.py` schreibt sie beim Bauen um — hier steht nur, was sich nicht
   inline regeln lässt. */
.hero-slide h1, .hero-slide h2 { font-family: var(--fw-anzeige); }

/* ── Überzeile: klein, grau, ohne Versalien — wie Flows «Insights» ────────── */
.tqs-eyebrow, .fw-ueberzeile {
  font-family: var(--tq-ui);
  font-size: 0.94rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  margin: 0 0 1.1rem;
}
.tqs-eyebrow--mono { font-family: var(--tq-ui); text-transform: none; letter-spacing: 0; font-size: 0.94rem; }

/* ── Knöpfe: Pille, Gewicht 400 ──────────────────────────────────────────── */
.btn-dark, .btn-textlink, .tqs-btn, .btn, .btn-primary, .btn-ghost {
  border-radius: var(--tqs-r-btn);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.btn-dark {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: 0.78rem 1.6rem; font-size: 1.02rem;
}
.btn-dark:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-textlink {
  background: transparent; color: var(--text); border: 1px solid var(--border-strong);
  padding: 0.78rem 1.6rem; font-size: 1.02rem;
}
.btn-textlink:hover { border-color: var(--text); color: var(--text); background: transparent; }

/* Textverweis mit Haarlinie — Flows «Learn more» */
.fw-mehr {
  display: inline-block; font-size: 1.02rem; color: var(--text);
  border-bottom: 1px solid var(--border-strong); padding-bottom: 3px;
  transition: border-color .18s ease, color .18s ease;
}
.fw-mehr:hover { color: var(--accent-text); border-color: var(--accent); }

/* ── Aufmacher: nur noch EINE Hintergrundschicht ──────────────────────────
   Von den vier Schichten der bisherigen Seite (Verlauf, Punktraster, blauer
   Radialschein, abgeblendetes Foto) bleibt das **Foto**. Raster und Schein
   sind aus — Flow legt keine Muster hinter Text.

   Fabio, 22.09.2026: «Das Hintergrundbild auf unserer jetzigen Website soll
   dort auch drauf kommen aber etwas schärfer.» Bisher lief es auf
   `opacity: .30` und `saturate(.55)`; hier auf **.68** bei voller Sättigung
   und leicht angehobenem Kontrast (1.12). Die
   Maske bleibt: das Bild endet, bevor der Text beginnt, sonst steht die
   Überschrift auf Serverschränken. */
.tqs-hero { background: #fff; border-bottom: 1px solid var(--border); }
.tqs-hero::before { display: none; }
.tqs-hero__photo { display: block; width: 54%; }
.tqs-hero__photo img {
  opacity: 0.68;
  filter: saturate(1) contrast(1.12);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 34%, transparent 96%);
          mask-image: linear-gradient(to left, rgba(0,0,0,1) 34%, transparent 96%);
}
/* Der untere Verlauf lief auf `--bg-alt`; der Aufmacher steht jetzt auf
   Weiss, also muss er dorthin ausklingen. */
.tqs-hero__photo::after {
  background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0) 26%);
}
@media (max-width: 900px) { .tqs-hero__photo { display: none; } }

/* ── Schrittzeiger statt Punktreihe ───────────────────────────────────────
   Flow führt unter dem Aufmacherbild eine Haarlinie mit Punkten und
   Beschriftung. Die Folien und ihre Schaltflächen bleiben, wie sie sind —
   es ändert sich nur, wie sie aussehen. */
.hero-prog {
  height: 1px; background: var(--border);
  border-radius: 0; margin: clamp(26px, 3.4vw, 42px) auto 0 0; max-width: min(780px, 100%);
}
/* Der Balken läuft nicht mehr über die ganze Breite, sondern von Punkt zu
   Punkt — `v/schrittzeiger.js` setzt die Breite. Die Keyframe-Animation der
   Seite (`techq-progress`, scaleX 0 → 1) muss dafür still sein. */
.hero-prog > span {
  background: var(--accent); border-radius: 0; height: 1px;
  animation: none; transform: none; width: 0;
}

/* Die Punkte sitzen MITTIG auf der Linie darüber: die Reihe wird um die halbe
   Punkthöhe hochgezogen (-4 px bei 9 px Punkt). Vorher zog ein -18-px-Rand am
   ::before den Punkt aus seiner eigenen Schaltfläche heraus — auf dem Telefon
   landete er dadurch mitten in der Häkchenzeile darüber (gemessen 21.09.2026:
   Schaltfläche 14 px hoch, Beschriftung ausserhalb). */
.hero-dots {
  max-width: min(780px, 100%); margin: -5px auto 0 0; gap: 0; padding-top: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: start;
}

/* WICHTIG: die Schaltfläche ist KEIN Flex-Behälter.
   `<button>` presst seinen Inhalt in einen anonymen Block; mit
   `display:flex` und zwei Pseudo-Elementen kam Chrome auf eine Höhe von
   12 px, obwohl Punkt (9) + Abstand (11) + Beschriftung (18) drinsteckten —
   die Beschriftung stand ausserhalb der Schaltfläche und landete auf dem
   Telefon in der Häkchenzeile darüber (gemessen 22.09.2026).
   Und auch als reiner Block half ein `::after` nicht: in einem <button> wird
   ein Pseudo-Element zwar gezeichnet, trägt aber NICHTS zur Höhe bei —
   21 px gemessen, also nur das Polster. Deshalb steht die Beschriftung
   jetzt in einem echten <span>, das `bauen.py` einsetzt. */
.hero-dot {
  position: relative; display: block; width: 100%; height: auto; transform: none;
  background: none; border: none; border-radius: 0; padding: 21px 12px 8px 0;
  text-align: left; color: var(--text-muted);
  font-family: var(--tq-ui); font-size: 0.86rem; line-height: 1.3;
  transition: color .2s ease;
}
.hero-dot::before {
  content: ""; position: absolute; top: 0; left: 0; margin-left: -4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border-strong);
  transition: background .2s ease, border-color .2s ease;
}
.hero-dot-text { display: block; }
.hero-dot:hover { color: var(--text); }
.hero-dot.is-active { color: var(--text); transform: none; background: none; border: none; }
.hero-dot.is-active::before,
.hero-dot.ist-vorbei::before { background: var(--accent); border-color: var(--accent); }
.hero-dot:focus-visible { outline-offset: 4px; }

/* Unter 560 px greift `shop-mobil.css` mit `html`-präfixierten Selektoren
   ((0,1,1) schlägt (0,1,0)) und baut die Punkte wieder zur alten 12-px-Pille
   um — samt einem unsichtbaren `::before` als 28x44-Trefferfläche
   (Barrierefreiheit, 02.09.2026). Gemessen am 22.09.2026: die Schaltfläche
   stand dadurch auf 12 px Höhe, der Schrittzeiger war auf dem Telefon kaputt.

   shop-mobil.css wird NICHT angefasst — die Datei hängt an vielen Seiten.
   Stattdessen hier dieselbe Spezifität, später geladen.

   Die 44-px-Trefferfläche geht dabei nicht verloren, im Gegenteil: die
   Schaltfläche ist jetzt rund ein Drittel der Zeile breit und mit Polster
   47 px hoch — die Beschriftung gehört mit dazu. */
@media (max-width: 560px) {
  html .hero-dots { gap: 0; }
  html .hero-dot {
    width: 100%; height: auto; transform: none; position: relative;
    padding: 21px 8px 8px 0; background: none; border: none; border-radius: 0;
  }
  html .hero-dot.is-active { width: 100%; transform: none; background: none; }
  html .hero-dot::before {
    content: ""; position: absolute;
    top: 0; right: auto; bottom: auto; left: 0; margin-left: -4px;
    width: 9px; height: 9px; border-radius: 50%;
    background: #fff; border: 1px solid var(--border-strong);
  }
  html .hero-dot.is-active::before,
  html .hero-dot.ist-vorbei::before { background: var(--accent); border-color: var(--accent); }
}

/* ── Flächen ─────────────────────────────────────────────────────────────── */
.fw-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.fw-abschnitt { padding: clamp(64px, 9vw, 132px) 0; }
.fw-hell { background: var(--bg-alt); }
.fw-schwarz-band { background: var(--fw-schwarz); color: #fff; }
.fw-schwarz-band h2, .fw-schwarz-band h3 { color: #fff; }
.fw-schwarz-band p { color: var(--fw-auf-schwarz); }
.fw-schwarz-band .fw-ueberzeile { color: rgba(255,255,255,.62); }
.fw-schwarz-band .fw-mehr { color: #fff; border-color: rgba(255,255,255,.45); }
.fw-schwarz-band .fw-mehr:hover { color: #fff; border-color: #fff; }
.fw-schwarz-band a:focus-visible { outline-color: #fff; }

.fw-h2 { font-size: clamp(27px, 3.4vw, 42px); margin: 0; text-wrap: balance; }
.fw-h3 { font-size: clamp(21px, 2vw, 26px); margin: 0; }
.fw-lead {
  margin: 1.1rem 0 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55;
  color: var(--text-muted); max-width: 56ch; letter-spacing: 0.004em;
}
.fw-schwarz-band .fw-lead { color: var(--fw-auf-schwarz); }
.fw-kopf { max-width: 44ch; margin-bottom: clamp(36px, 5vw, 64px); }
.fw-knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 2.2rem; }

/* ── Preiskarte im Flow-Muster ───────────────────────────────────────────── */
.fw-karten { display: grid; gap: clamp(16px, 2vw, 24px); }
.fw-karte {
  background: #fff; border-radius: var(--tqs-r-card); border: 1px solid var(--border);
  padding: clamp(26px, 3.4vw, 44px);
}
.fw-karte-kopf {
  display: grid; grid-template-columns: 1fr auto; gap: 18px 32px; align-items: start;
  padding-bottom: clamp(22px, 2.6vw, 32px); border-bottom: 1px solid var(--border-faint);
}
@media (max-width: 640px) { .fw-karte-kopf { grid-template-columns: 1fr; } }
.fw-karte-name {
  font-family: var(--fw-anzeige); font-weight: 400; font-size: clamp(24px, 2.6vw, 34px);
  color: var(--accent-text); margin: 0; letter-spacing: 0; line-height: 1.15;
}
.fw-karte-unter { margin: 8px 0 0; font-size: 1rem; color: var(--text-muted); }
.fw-karte-preis { text-align: right; }
@media (max-width: 640px) { .fw-karte-preis { text-align: left; } }
.fw-preis-ab { display: block; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 2px; }
.fw-preis-zahl {
  font-family: var(--fw-anzeige); font-weight: 400; font-size: clamp(28px, 3vw, 40px);
  color: var(--text); letter-spacing: 0; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.fw-preis-fuss { display: block; font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; }

.fw-haken {
  list-style: none; margin: clamp(22px, 2.6vw, 32px) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px clamp(24px, 4vw, 56px);
}
@media (max-width: 680px) { .fw-haken { grid-template-columns: 1fr; } }
.fw-haken li {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  font-size: 1rem; line-height: 1.5; color: var(--text-body);
}
.fw-haken svg { color: var(--accent); margin-top: 2px; flex: 0 0 auto; }

.fw-marken { display: flex; flex-wrap: wrap; gap: 9px; margin: clamp(22px, 2.6vw, 30px) 0 0; padding: 0; list-style: none; }
.fw-marken li > * , .fw-marke {
  display: inline-block; border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 6px 15px; font-size: 0.86rem; color: var(--text-body);
  font-variant-numeric: tabular-nums; transition: border-color .15s ease, color .15s ease;
}
a.fw-marke:hover { border-color: var(--accent); color: var(--accent-text); }
.fw-marke--stark { border-color: var(--accent); color: var(--accent-text); }
.fw-karte-fuss { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3vw, 36px); }

/* ── Zeilenliste mit langem Pfeil — Flows Fusszeilen-Muster ───────────────── */
.fw-zeilen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.fw-zeile > a, .fw-zeile > div {
  display: grid; grid-template-columns: minmax(180px, 0.42fr) 1fr auto;
  gap: 8px clamp(20px, 3vw, 44px); align-items: baseline;
  padding: clamp(20px, 2.2vw, 28px) 0; border-bottom: 1px solid var(--border);
  color: inherit;
}
@media (max-width: 720px) {
  .fw-zeile > a, .fw-zeile > div { grid-template-columns: 1fr auto; }
  .fw-zeile-text { grid-column: 1 / -1; }
}
.fw-zeile-name { font-size: clamp(17px, 1.6vw, 20px); color: var(--text); font-family: var(--fw-anzeige); letter-spacing: 0; }
.fw-zeile-text { font-size: 1rem; line-height: 1.55; color: var(--text-muted); }
.fw-pfeil { color: var(--accent); font-size: 1.1rem; transition: transform .22s cubic-bezier(.22,1,.36,1); }
.fw-zeile > a:hover .fw-pfeil { transform: translateX(6px); }
.fw-zeile > a:hover .fw-zeile-name { color: var(--accent-text); }
.fw-schwarz-band .fw-zeilen, .fw-schwarz-band .fw-zeile > a { border-color: rgba(255,255,255,.16); }
.fw-schwarz-band .fw-zeile-name { color: #fff; }
.fw-schwarz-band .fw-zeile-text { color: var(--fw-auf-schwarz); }
.fw-schwarz-band .fw-pfeil { color: #7ab3ff; }

/* ── Zwei Spalten mit Bild ───────────────────────────────────────────────── */
.fw-zwei { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (max-width: 960px) { .fw-zwei { grid-template-columns: 1fr; } }
.fw-bildrahmen { border-radius: var(--tqs-r-card); overflow: hidden; }

/* ── FAQ: Haarlinien statt Kästen ────────────────────────────────────────── */
.tqs-faq { max-width: 860px; gap: 0; border-top: 1px solid var(--border); }
.tqs-faq__item { border: none; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
.tqs-faq__item[open] { border-color: var(--border); }
.tqs-faq__q {
  padding: clamp(19px, 2.1vw, 26px) 0; font-weight: 400; font-size: clamp(17px, 1.5vw, 19px);
  font-family: var(--fw-anzeige); letter-spacing: 0;
}
.tqs-faq__q svg { color: var(--text-muted); }
.tqs-faq__item[open] .tqs-faq__q svg { color: var(--accent); }
.tqs-faq__a { padding: 0 0 clamp(20px, 2.2vw, 26px); font-size: 1rem; line-height: 1.62; max-width: 62ch; }
.tqs-faq__morewrap { margin-top: 2.2rem; }
.tqs-faq__morewrap .tqs-btn {
  width: auto; border-radius: 999px; font-weight: 400; padding: 0.78rem 1.6rem;
  border-color: var(--border-strong); font-size: 1.02rem;
}
.tqs-faq__morewrap .tqs-btn:hover { border-color: var(--text); color: var(--text); }

/* ── Schlussband ─────────────────────────────────────────────────────────── */
.fw-schluss { text-align: left; }
.fw-schluss .fw-h2 { max-width: 20ch; }

/* ── Fusszeile bleibt unangetastet (Auftrag). Nur der Grundton zieht mit. ── */

/* ── Tastaturfokus ───────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px;
}

/* Die bildlose erste Folie zentriert sich in einer Höhe, die auf den alten
   grossen Grad gerechnet war. Steht im Inline-<style> der Seite, nicht am
   Element — deshalb hier und nicht in `bauen.py`. */
.hero-solo { min-height: clamp(300px, 30vw, 400px); }

/* ── Unterstreichung: nur da, wo sie etwas trennt ─────────────────────────
   Der Bestand unterstreicht jeden Verweis in `p` und `li` (SHOP-22,
   WCAG 1.4.1) — Spezifität (0,3,2). Pillen, Zeilenlisten und die Preisleiste
   sind ganzflächige Ziele mit Rahmen, Fläche und eigenem Zustand beim
   Überfahren; dort erfüllt nicht die Farbe allein die Regel. Alle drei
   Selektoren stehen hier auf GENAU (0,3,2) und werden später geladen —
   deshalb ohne !important. */
.fw-wrap .fw-marken li a.fw-marke,
.fw-wrap .fw-marken li a.fw-marke:hover,
.fw-wrap .fw-zeilen li.fw-zeile > a,
.fw-wrap .fw-zeilen li.fw-zeile > a:hover,
.fw-wrap .vc-raster .vc-leiste li a,
.fw-wrap .vc-raster .vc-leiste li a:hover { text-decoration: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Seite /webmail — dieselbe Bildsprache, eigene Bausteine
   ══════════════════════════════════════════════════════════════════════════ */
.wm-kopf { padding-top: clamp(44px, 6vw, 84px); border-bottom: 1px solid var(--border); }
.wm-h1 {
  font-family: var(--fw-anzeige); font-weight: 400; letter-spacing: 0;
  font-size: clamp(33px, 4.6vw, 54px); line-height: 1.16; margin: 0; color: var(--text);
  text-wrap: balance;
}
.wm-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 30px); }
@media (max-width: 820px) { .wm-zwei { grid-template-columns: 1fr; } }
.wm-tafel {
  background: #fff; border: 1px solid var(--border); border-radius: var(--tqs-r-card);
  padding: clamp(26px, 3.2vw, 40px);
}
.wm-tafel-nr {
  margin: 0 0 14px; font-family: var(--fw-anzeige); font-weight: 400;
  font-size: 1.5rem; color: var(--accent-text); line-height: 1;
}
.wm-tafel-text { margin: 12px 0 22px; font-size: 1rem; line-height: 1.62; color: var(--text-muted); max-width: 46ch; }
.wm-fussnote { margin: clamp(26px, 3vw, 38px) 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); }

/* Zeilen ohne Verweis: gleiche Form, aber kein Pfeil und kein Zustand */
.fw-zeile > div { cursor: default; }


/* ============================================================================
   Variante A — „Bewegt"
   ----------------------------------------------------------------------------
   Gleiche Seite wie B, gleiche Bildsprache (`flow.css`). Unterschied ist NUR
   die Bewegung. So lässt sich vergleichen, was die Bewegung tut, statt zwei
   Sachen auf einmal.

   Massstab ist Flow: dort bewegt sich wenig, aber weich und lang. Nichts
   hüpft, nichts blitzt, nichts dreht sich.

   Jeder blasse oder versetzte Anfangszustand hängt an `.fw-an` auf <html>,
   das `v/a.js` setzt. Ohne JavaScript und bei `prefers-reduced-motion` steht
   die Seite vollständig da.
   ========================================================================== */

/* Aufmacher: der Text staffelt, statt als Block einzufahren. */
.fw-an .hero-slide.is-active { animation: none; }
.fw-an .hero-slide.is-active .tqs-eyebrow,
.fw-an .hero-slide.is-active h1,
.fw-an .hero-slide.is-active h2,
.fw-an .hero-slide.is-active > div > div > p,
.fw-an .hero-slide.is-active > div > div > div,
.fw-an .hero-slide.is-active .hero-visual {
  animation: fw-auf .72s cubic-bezier(.22, 1, .36, 1) both;
}
.fw-an .hero-slide.is-active h1,
.fw-an .hero-slide.is-active h2                { animation-delay: .06s; }
.fw-an .hero-slide.is-active > div > div > p   { animation-delay: .15s; }
.fw-an .hero-slide.is-active > div > div > div { animation-delay: .24s; }
.fw-an .hero-slide.is-active .hero-visual      { animation-delay: .12s; }

@keyframes fw-auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Abschnitte klaren beim Hereinscrollen auf. 16 px Versatz, nicht mehr —
   bei Flow rutscht nichts sichtbar, es wird nur hell. */
.fw-an [data-fw-teil] .fw-wrap > * { transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.fw-an [data-fw-teil]:not(.ist-da) .fw-wrap > * { opacity: 0; transform: translateY(16px); }
.fw-an [data-fw-teil].ist-da .fw-wrap > * { opacity: 1; transform: none; }
.fw-an [data-fw-teil].ist-da .fw-wrap > *:nth-child(2) { transition-delay: .08s; }
.fw-an [data-fw-teil].ist-da .fw-wrap > *:nth-child(3) { transition-delay: .16s; }

/* Karten heben sich eine Spur, wenn man darüberfährt. */
.fw-an .fw-karte { transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease; }
.fw-an .fw-karte:hover { transform: translateY(-3px); border-color: var(--border-strong); }

/* Bilder klaren auf, statt aufzublitzen. */
.fw-an .kc-mockup { opacity: .001; filter: blur(7px); transition: opacity .85s ease, filter .85s ease; }
.fw-an .kc-mockup.ist-da { opacity: 1; filter: none; }

/* Der aktive Punkt im Schrittzeiger wächst kurz. */
.fw-an .hero-dot::before { transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22,1,.36,1); }
.fw-an .hero-dot.is-active::before { transform: scale(1.35); }

@media (prefers-reduced-motion: reduce) {
  .fw-an .hero-slide.is-active *,
  .fw-an [data-fw-teil] .fw-wrap > *,
  .fw-an .kc-mockup,
  .fw-an .hero-dot::before {
    animation: none !important; transition: none !important;
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
}

/* «Bewegung reduzieren» (06.10.2026, Entscheid Fabrizio, WE-266): statt
   still nur Deckkraft. seiten-bewegung.js setzt dann `.fw-sanft` statt
   `.fw-an`; was beim Laden im Bild steht, zeigt es sofort (wie bewegt), der
   Rest klart beim Scrollen auf — ohne Versatz, ohne Unschärfe. */
@media (prefers-reduced-motion: reduce) {
  .fw-sanft [data-fw-teil] .fw-wrap > * { transition: opacity .6s ease; }
  .fw-sanft [data-fw-teil]:not(.ist-da) .fw-wrap > * { opacity: 0; }
  .fw-sanft [data-fw-teil].ist-da .fw-wrap > *:nth-child(2) { transition-delay: .08s; }
  .fw-sanft [data-fw-teil].ist-da .fw-wrap > *:nth-child(3) { transition-delay: .16s; }
  .fw-sanft .kc-mockup { opacity: .001; transition: opacity .6s ease; }
  .fw-sanft .kc-mockup.ist-da { opacity: 1; }
}
@media print {
  .fw-sanft [data-fw-teil] .fw-wrap > *, .fw-sanft .kc-mockup { opacity: 1 !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   v15 (Runde 4, 06.10.2026) — /webmail in der Sprache der Startseite v15
   ══════════════════════════════════════════════════════════════════════════
   Entscheid Fabrizio, 06.10.2026: «/webmail — Ja, als Entwurf». Bis hierher
   trug die Seite die Flow-Bildsprache vom 22.09. (dünne Titel, schwarzes
   Vollbreitband, gerahmte Karten). Jetzt dieselben Bausteine wie Startseite,
   /panel, /domains, /kontakt und /entdecken:
     Oberzeile  wie .s15-ueber: 17 px, halbfett, grau
     Titel      halbfett, enge Laufweite. Aufmacher 44–88 wie /panel und /mail,
                Abschnitte 40–72 wie .s15-h2, Fragen 38–56 wie
                .s15-fragen__titel, Band und Schluss 38–68 wie das Schlussfeld
     Zeilen     wie «Enthalten» auf /panel (.p15-zeile)
     Karten     ohne Rahmen auf --s15-card, Rundung 28 (.s15-karte)
     Knöpfe     blaue Pille; die Nebenhandlung als blauer Textverweis mit ›,
                im Schlussfeld die Umkehrpille (.s15-schluss__knopf)
     Fragen     wie .s15-frage: Linien, 20 px halbfett, das Plus dreht zum Kreuz
     Band       ein dunkles Feld in der Form des Schlussfelds (Variante a)
   Das Markup bleibt, ebenso die Texte und die Einblendung (.fw-an).
   Das › und das + sind Schmuck: `content: … / ""` hält sie aus dem Namen,
   den Vorleseprogramme ansagen. Browser, die diese Form nicht kennen, nehmen
   die Zeile davor: das Zeichen steht da, wird aber mitgelesen.

   SPEZIFITÄT: webmail.html lädt dieses Blatt VOR hell-dunkel.css, start2.css
   und unterseite2.css. `:not(#_)` hebt jede Regel hier über deren Regeln
   (hell-dunkel bis (0,3,1), unterseite2 bis (1,2,0)), ohne !important.
   Farben aus den --s15-Marken (start2.css), die hell und dunkel tragen. Nur
   das dunkle Band setzt die dunklen Werte fest, weil es auch hell dunkel ist.
   ========================================================================== */

/* ── Flächen: Breite 1180 wie .s15-innen, Abstände wie .s15-abschnitt ────── */
.t15 .fw-wrap:not(#_){max-width:1224px;padding:0 22px;}
.t15 .fw-abschnitt:not(#_){padding:clamp(88px,10vw,150px) 0;}
.t15 .fw-hell:not(#_){background:var(--s15-bg2);}

/* ── Satz ───────────────────────────────────────────────────────────────── */
.t15 .fw-ueberzeile:not(#_){
  margin:0;font-size:17px;line-height:normal;font-weight:600;letter-spacing:-0.01em;
  color:var(--s15-text2);
}
.t15 .fw-h2:not(#_){
  margin:12px 0 0;font-size:clamp(40px,5.6vw,72px);line-height:1.04;
  font-weight:600;letter-spacing:-0.03em;color:var(--s15-text);text-wrap:balance;
}
.t15 .fw-lead:not(#_){
  margin:20px 0 0;font-size:19px;line-height:1.45;letter-spacing:-0.01em;
  color:var(--s15-text2);text-wrap:pretty;
}
.t15 .fw-kopf:not(#_){max-width:760px;margin-bottom:clamp(40px,5vw,64px);}
.t15 .fw-knopfreihe:not(#_){margin-top:32px;gap:18px 26px;}

/* ── Knöpfe und Textverweise ───────────────────────────────────────────── */
/* Blaue Pille wie .s15-knopf. Das Inline-<style> im <head> von webmail.html
   gibt .btn-dark inline-flex; die Höhe kommt so auf 44 px. */
.t15 .fw-wrap .btn-dark:not(#_){
  padding:12px 22px;border:0;border-radius:980px;
  background:var(--s15-cta);color:#fff;
  font-size:17px;font-weight:400;line-height:normal;letter-spacing:normal;
  transition:background-color .2s ease;
}
.t15 .fw-wrap .btn-dark:not(#_):hover{background:var(--s15-ctah);color:#fff;}
/* Nebenhandlung wie «Mehr erfahren ›» der Startseite: blau, ohne Haarlinie. */
.t15 .fw-wrap .fw-mehr:not(#_){
  padding:0;border:0;font-size:17px;letter-spacing:normal;color:var(--s15-link);
  transition:none;
}
.t15 .fw-wrap .fw-mehr:not(#_)::after{content:"\00a0\203A";content:"\00a0\203A" / "";}
.t15 .fw-wrap .fw-mehr:not(#_):hover{color:var(--s15-link);text-decoration:underline;}
.t15 .fw-abschnitt a:not(#_):focus-visible,
.t15 .fw-abschnitt summary:not(#_):focus-visible{
  outline:2px solid var(--s15-link);outline-offset:3px;border-radius:6px;
}

/* ── Aufmacher: mittig wie /panel, das Laptop-Abbild darunter ──────────────
   Er füllt den ersten Bildschirm wie auf /domains und /ueberuns: «Was es
   kann» kommt erst beim Scrollen. Höhe = Fenster minus Kopfzeile
   (--kz-h-voll + 1 px Linie, kopfzeile.css), svh mit vh davor. Das Abbild ist
   900 px breit: die Datei hat 1700 px, auf Retina also keine Vergrösserung
   über ~6 %. */
.t15 .wm-kopf:not(#_){
  min-height:calc(100vh - var(--kz-h-voll, 64px) - 1px);
  min-height:calc(100svh - var(--kz-h-voll, 64px) - 1px);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(56px,9vh,110px) 0 clamp(88px,10vw,150px);
  border-bottom:0;text-align:center;
}
/* Als Flex-Kind würde der Innenteil sonst nur so breit wie sein Inhalt. */
.t15 .wm-kopf > .fw-wrap:not(#_){width:100%;}
.t15 .wm-kopf .fw-zwei:not(#_){
  grid-template-columns:minmax(0,1fr);justify-items:center;gap:clamp(48px,6vw,80px);
}
.t15 .wm-kopf .fw-zwei > div:not(#_){width:100%;max-width:900px;}
.t15 .wm-h1:not(#_){
  margin:12px 0 0;font-size:clamp(44px,6.4vw,88px);line-height:1.02;
  font-weight:600;letter-spacing:-0.034em;color:var(--s15-text);text-wrap:balance;
}
.t15 .wm-kopf .fw-lead:not(#_){margin:22px auto 0;max-width:680px;font-size:clamp(17px,1.5vw,21px);}
.t15 .wm-kopf .fw-knopfreihe:not(#_){justify-content:center;}
.t15 .wm-kopf .btn-dark:not(#_){padding:12px 23px;}

/* ── Zeilen wie «Enthalten» auf /panel (.p15-zeile) ─────────────────────── */
.t15 .fw-zeilen:not(#_){border-top:0;border-bottom:1px solid var(--s15-line);}
.t15 .fw-zeile:not(#_) > div{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:10px 40px;align-items:baseline;padding:28px 0;
  border-top:1px solid var(--s15-line);border-bottom:0;
}
/* Die dritte Spalte trug bei Flow den Pfeil; hier ist sie leer. */
.t15 .fw-zeile:not(#_) > div > span:empty{display:none;}
.t15 .fw-zeile-name:not(#_){
  font-size:clamp(26px,3vw,38px);line-height:1.1;font-weight:600;letter-spacing:-0.024em;
  color:var(--s15-text);
}
.t15 .fw-zeile-text:not(#_){
  font-size:19px;line-height:1.45;letter-spacing:-0.01em;color:var(--s15-text2);text-wrap:pretty;
}
.t15 .wm-fussnote:not(#_){margin:28px 0 0;font-size:15px;line-height:1.5;color:var(--s15-text2);}

/* ── Zwei Wege hinein: Karten wie .s15-karte ────────────────────────────── */
.t15 .wm-zwei:not(#_){gap:20px;}
.t15 .wm-tafel:not(#_){
  display:flex;flex-direction:column;align-items:flex-start;
  border:0;border-radius:28px;background:var(--s15-card);
  padding:clamp(28px,3.4vw,40px) clamp(24px,3vw,34px) clamp(26px,3vw,34px);
}
/* Die Ziffer wie auf /reseller (.rs-nr), aber auf dem Seitengrund statt auf
   der Tönung: Blau auf Tönung über #f5f5f7 hätte 4.48:1 (gerechnet),
   auf Weiss 5.57:1. */
.t15 .wm-tafel-nr:not(#_){
  display:inline-grid;place-items:center;width:28px;height:28px;margin:0;border-radius:50%;
  background:var(--s15-bg);color:var(--s15-link);
  font-size:14px;font-weight:600;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums;
}
.t15 .wm-tafel .fw-h3:not(#_){
  margin:20px 0 0;font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-0.022em;
  color:var(--s15-text);text-wrap:balance;
}
.t15 .wm-tafel-text:not(#_){margin:12px 0 24px;max-width:none;font-size:17px;line-height:1.5;color:var(--s15-text2);}
.t15 .wm-tafel .fw-mehr:not(#_){margin-top:auto;}

/* ── Band «Warum wir es selbst betreiben» — Variante a ─────────────────────
   Bisher ein schwarzes Vollbreitband. Jetzt ein dunkles Feld in der Form des
   Schlussfelds (Rundung 36, mittig, Schein von unten), hell und dunkel in
   #1d1d1f: hell --s15-inv, dunkel --s15-card2 (--s15-inv wird dort hell).
   Schrift wie auf dunklen v15-Flächen: #f5f5f7, #a1a1a6, Verweis #2997ff. */
.t15 .fw-abschnitt.fw-schwarz-band:not(#_){
  --wm-band-grund:var(--s15-inv);
  --wm-band-text:#f5f5f7;
  --wm-band-text2:#a1a1a6;
  --wm-band-link:#2997ff;
  --wm-band-schein:rgba(41,151,255,.32);
  padding:clamp(88px,10vw,150px) 22px 0;background:var(--s15-bg);color:var(--wm-band-text);
}
html[data-theme="dark"] .t15 .fw-abschnitt.fw-schwarz-band:not(#_){--wm-band-grund:var(--s15-card2);}
.t15 .fw-schwarz-band > .fw-wrap:not(#_){
  max-width:1400px;padding:clamp(72px,9vw,120px) 22px;border-radius:36px;text-align:center;
  background:radial-gradient(60% 55% at 50% 125%, var(--wm-band-schein), transparent 72%), var(--wm-band-grund);
}
.t15 .fw-schwarz-band .fw-ueberzeile:not(#_){color:var(--wm-band-text2);}
.t15 .fw-schwarz-band .fw-h2:not(#_){
  margin:12px auto 0;font-size:clamp(38px,5.4vw,68px);color:var(--wm-band-text);
}
.t15 .fw-schwarz-band .fw-lead:not(#_){margin:20px auto 0;color:var(--wm-band-text2);}
.t15 .fw-schwarz-band .fw-knopfreihe:not(#_){justify-content:center;}
.t15 .fw-schwarz-band .fw-mehr:not(#_),
.t15 .fw-schwarz-band .fw-mehr:not(#_):hover{color:var(--wm-band-link);}
.t15 .fw-schwarz-band a:not(#_):focus-visible{outline-color:var(--wm-band-link);}

/* ── Fragen wie auf der Startseite (.s15-fragen, .s15-frage) ────────────── */
.t15 .fw-abschnitt:has(.tqs-faq) .fw-kopf:not(#_){max-width:820px;margin:0 auto 40px;}
.t15 .fw-abschnitt:has(.tqs-faq) .fw-h2:not(#_){font-size:clamp(38px,5vw,56px);line-height:1.05;letter-spacing:-0.028em;}
.t15 .tqs-faq:not(#_){display:block;max-width:820px;margin:0 auto;border-top:0;}
.t15 .tqs-faq__item:not(#_){
  border:0;border-top:1px solid var(--s15-line);border-radius:0;background:transparent;overflow:visible;
}
.t15 .tqs-faq__q:not(#_){
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:24px 0;font-size:20px;line-height:normal;font-weight:600;letter-spacing:-0.012em;
  color:var(--s15-text);
}
.t15 .tqs-faq__q:not(#_) svg{display:none;}
.t15 .tqs-faq__q:not(#_)::after{
  content:"+";content:"+" / "";flex:none;
  font-size:28px;font-weight:300;line-height:1;color:var(--s15-text3);transition:transform .3s;
}
.t15 .tqs-faq__item[open] .tqs-faq__q:not(#_)::after{transform:rotate(45deg);}
.t15 .tqs-faq__a:not(#_){
  margin:0;padding:0 48px 26px 0;max-width:none;font-size:17px;line-height:1.5;color:var(--s15-text2);
}
/* «Weitere Fragen ›» wie .s15-fragen__mehr: Linie darüber, Textverweis. */
.t15 .tqs-faq__morewrap:not(#_){display:block;max-width:820px;margin:0 auto;padding-top:24px;border-top:1px solid var(--s15-line);}
.t15 .tqs-faq__morewrap a.tqs-btn:not(#_){
  display:inline-flex;align-items:center;gap:0;width:auto;padding:0;border:0;border-radius:0;background:none;
  font-size:17px;font-weight:400;line-height:normal;letter-spacing:normal;color:var(--s15-link);
}
.t15 .tqs-faq__morewrap a.tqs-btn:not(#_)::after{content:"\00a0\203A";content:"\00a0\203A" / "";}
.t15 .tqs-faq__morewrap a.tqs-btn:not(#_):hover{border:0;background:none;color:var(--s15-link);text-decoration:underline;}

/* ── Schluss: das Schlussfeld der v15-Seiten (.s15-schluss__feld) ───────── */
.t15 .fw-abschnitt:has(> .fw-schluss):not(#_){padding:0 22px;background:var(--s15-bg);}
.t15 .fw-wrap.fw-schluss:not(#_){
  max-width:1400px;padding:clamp(90px,11vw,150px) 22px;border-radius:36px;text-align:center;
  background:radial-gradient(60% 70% at 50% 120%, var(--s15-glow), transparent 72%), var(--s15-bg2);
}
.t15 .fw-schluss .fw-h2:not(#_){margin:0 auto;max-width:800px;font-size:clamp(38px,5.4vw,68px);}
.t15 .fw-schluss .fw-lead:not(#_){margin:20px auto 0;max-width:520px;}
.t15 .fw-schluss .fw-knopfreihe:not(#_){gap:18px 28px;justify-content:center;}
.t15 .fw-schluss .btn-dark:not(#_){
  padding:13px 26px;background:var(--s15-inv);color:var(--s15-invtext);transition:opacity .2s ease;
}
.t15 .fw-schluss .btn-dark:not(#_):hover{background:var(--s15-inv);color:var(--s15-invtext);opacity:.88;}

/* ── Telefon ────────────────────────────────────────────────────────────── */
@media (max-width:700px){
  /* Fingerziel 44 px wie .s15-textlink am Telefon (start2.css §21). Die
     übrigen Verweise («.fw-mehr») hebt unterseite2.css schon auf 44 px. */
  .t15 .tqs-faq__morewrap a.tqs-btn:not(#_){min-height:44px;}
}
@media (max-width:640px){
  .t15 .fw-zeile:not(#_) > div{padding:22px 0;}
  .t15 .fw-zeile-text:not(#_){font-size:17px;}
  /* Fragen am Telefon 18 px wie /kontakt (kontakt2.css .k15-fragen). */
  .t15 .tqs-faq__q:not(#_){font-size:18px;}
  .t15 .tqs-faq__a:not(#_){padding-right:0;}
}

/* ── Bewegung reduziert: das Plus springt, die Pillen wechseln ohne Übergang ── */
@media (prefers-reduced-motion: reduce){
  .t15 .tqs-faq__q:not(#_)::after,
  .t15 .fw-wrap .btn-dark:not(#_),
  .t15 .fw-schluss .btn-dark:not(#_){transition:none;}
}

/* ── Laptop im Dunkeln (06.10.2026, SHOP-64, Entscheid Fabrizio «Blauer Schein») ──
   Das Abbild gibt es nur in einer Fassung; sein dunkler Rahmen stand auf
   Schwarz bei rund 1.6:1. Ein leiser Schein in der Markenfarbe dahinter (wie im
   Schlussfeld) und eine feine helle Kante loesen ihn vom Grund. `isolation`
   haelt den Schein ueber dem Abschnittsgrund und unter dem Bild. Hell bleibt
   alles, wie es ist. */
@media screen{
  html[data-theme="dark"] .t15 .wm-kopf .fw-zwei > div:has(.kc-mockup):not(#_){position:relative;isolation:isolate;}
  html[data-theme="dark"] .t15 .wm-kopf .fw-zwei > div:has(.kc-mockup):not(#_)::before{
    content:"";position:absolute;top:-14%;right:-12%;bottom:-18%;left:-12%;z-index:-1;pointer-events:none;
    background:radial-gradient(62% 50% at 50% 58%, rgba(41,151,255,.30), rgba(41,151,255,.12) 50%, transparent 80%);
  }
  html[data-theme="dark"] .t15 .wm-kopf .kc-mockup:not(#_){filter:drop-shadow(0 0 .6px rgba(255,255,255,.5));}
}