/* ============================================================
   start2.css — die Startseite von techq.ch nach dem Entwurf
   «techQ Startseite v15» (Claude Design, Projekt 9728b3de).
   Angelegt 2026-09-27 (MacBook Air von Fabio). Nur index.html laedt
   diese Datei. Auftrag Fabio: «der rest bitte 1:1 übernehmen», die
   Schriften bleiben (fonts.css, selbst gehostet).

   HERKUNFT DER WERTE
   Der Entwurf ist eine Vorlage mit Inline-Stilen; Werte, die sein
   Skript je nach Breite einsetzte ({{ hAlign }}, {{ h1Size }} …),
   stehen hier als Medienbedingung mit SEINEN Schwellen: 860 px fuer
   den Aufmacher (`mobile = innerWidth < 860`), 900 px fuer die
   Laptop-Buehne (start2.js). Alle Zahlen sind aus dem Entwurf
   abgeschrieben, nicht gerundet.

   NAMEN
   Alles traegt `s15-` (Klassen, data-Attribute, Farbmarken). Grund:
   site.css blendet jedes [data-reveal] aus, und Marken wie --bg,
   --text, --line gibt es dort schon mit anderen Werten — die
   Kopfzeile und nav-auth.js leben davon.

   KASTENMODELL
   site.css setzt `*{box-sizing:border-box}`. Der Entwurf rechnet
   ohne (Suchfeld 600 px + Polster = 626 px). Innerhalb von `.s15`
   gilt deshalb wieder `content-box`; wo der Entwurf ausdruecklich
   border-box schreibt, steht es am Element.

   HELL UND DUNKEL
   Marken hell am :root, dunkel an [data-theme="dark"]. Standard ist
   hell (start2-thema.js). Die Kopfzeile zieht ueber kopfzeile.css mit.

   ABWEICHUNGEN VOM ENTWURF — nur, wo Inhalt, Zugaenglichkeit oder
   Technik es verlangten; Liste in der Vault-Notiz vom 27.09.2026.
   ============================================================ */

/* ── 1 · Farbmarken ─────────────────────────────────────────── */
:root{
  --s15-bg:#fff;
  --s15-bg2:#f5f5f7;
  --s15-tile:#fff;
  --s15-card:#f5f5f7;
  --s15-card2:#e8e8ed;
  --s15-text:#1d1d1f;
  --s15-text2:#6e6e73;
  --s15-text3:#6e6e73;
  --s15-muted:#86868b;
  --s15-line:#d2d2d7;
  --s15-chip:#d2d2d7;
  --s15-link:#0066cc;
  --s15-new:#b64400;
  --s15-cta:#0071e3;
  --s15-ctah:#0077ed;
  --s15-inv:#1d1d1f;
  --s15-invtext:#fff;
  --s15-glow:rgba(0,113,227,.18);
  --s15-glass:rgba(255,255,255,.7);
  --s15-dot:rgba(0,0,0,.2);
  --s15-doth:rgba(0,0,0,.36);
  --s15-phf:none;
  --s15-segon:#fff;
  --s15-segsh:0 1px 3px rgba(0,0,0,.12);
  --s15-mac-lid:#2e2f31;
  --s15-mac-edge:#3d3e41;
  --s15-mac-base1:#37383b;
  --s15-mac-base2:#161618;
  --s15-kc-bg:#fff;
  --s15-kc-side:#f5f5f7;
  --s15-kc-card:#f5f5f7;
  --s15-kc-line:#e5e5ea;
  --s15-kc-active:#e3e3e8;
  --s15-kc-inset:#fff;
  --s15-kc-seg:#ececef;
  --s15-kc-tint:rgba(0,113,227,.1);
  --s15-kc-hell-bg:#fff;
  --s15-kc-hell-fg:#1d1d1f;
  --s15-kc-hell-sh:0 1px 3px rgba(0,0,0,.12);
  --s15-kc-dunkel-bg:transparent;
  --s15-kc-dunkel-fg:#6e6e73;
  --s15-kc-dunkel-sh:none;
  --s15-ok:#30d158;
  --s15-okbg:rgba(48,209,88,.16);
  --s15-logo-l:block;
  --s15-logo-d:none;
  /* Rand der Eingabefelder: Standard §4.5 verlangt 3:1 gegen den Grund.
     Der Entwurf nahm --line (#d2d2d7 = 1.5:1). #8e8e8e = 3.28:1 auf Weiss,
     3.02:1 auf #f5f5f7 (gerechnet) — derselbe Wert wie auf der bisherigen
     Startseite. */
  --s15-feld-rand:#8e8e8e;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --s15-bg:#000;
  --s15-bg2:#0b0b0c;
  --s15-tile:#161617;
  --s15-card:#161617;
  --s15-card2:#1d1d1f;
  --s15-text:#f5f5f7;
  --s15-text2:#a1a1a6;
  --s15-text3:#86868b;
  --s15-muted:#86868b;
  --s15-line:#2c2c2e;
  --s15-chip:#3a3a3c;
  --s15-link:#2997ff;
  --s15-new:#ff9f0a;
  --s15-inv:#f5f5f7;
  --s15-invtext:#000;
  --s15-glow:rgba(41,151,255,.32);
  --s15-glass:rgba(44,44,46,.6);
  --s15-dot:rgba(255,255,255,.28);
  --s15-doth:rgba(255,255,255,.45);
  --s15-phf:grayscale(1) brightness(.55) contrast(1.08);
  --s15-segon:#636366;
  --s15-segsh:0 1px 2px rgba(0,0,0,.3);
  --s15-mac-lid:#d9dadc;
  --s15-mac-edge:#c4c5c8;
  --s15-mac-base1:#e6e7e9;
  --s15-mac-base2:#aeafb2;
  --s15-kc-bg:#1c1c1e;
  --s15-kc-side:#141415;
  --s15-kc-card:#2a2a2c;
  --s15-kc-line:#38383a;
  --s15-kc-active:#2c2c2e;
  --s15-kc-inset:#1c1c1e;
  --s15-kc-seg:#2a2a2c;
  --s15-kc-tint:rgba(41,151,255,.16);
  --s15-kc-hell-bg:transparent;
  --s15-kc-hell-fg:#a1a1a6;
  --s15-kc-hell-sh:none;
  --s15-kc-dunkel-bg:#636366;
  --s15-kc-dunkel-fg:#f5f5f7;
  --s15-kc-dunkel-sh:0 1px 2px rgba(0,0,0,.3);
  --s15-logo-l:none;
  --s15-logo-d:block;
  --s15-feld-rand:rgba(255,255,255,.37);
  color-scheme:dark;
}

/* ── 2 · Grund ──────────────────────────────────────────────── */
/* Schrift, Glaettung und Zeichenformen kommen aus site.css (body) —
   so wie auf allen Seiten. Vom Entwurf dazu nur, was die Schrift
   nicht aendert. */
html{background:var(--s15-bg);}
body.s15-startseite{
  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;
}
.s15,.s15 *,.s15 *::before,.s15 *::after{box-sizing:content-box;}
.s15 a{color:var(--s15-link);text-decoration:none;}
.s15 a:hover{color:var(--s15-link);text-decoration:underline;}
::selection{background:rgba(41,151,255,.35);color:inherit;}
.s15 input::placeholder{color:var(--s15-text3);opacity:1;}
.s15 :focus-visible{outline:2px solid var(--s15-link);outline-offset:3px;border-radius:6px;}
.s15 img{max-width:none;}
@keyframes s15-puls{0%,100%{opacity:.35}50%{opacity:1}}

.s15-unsichtbar{
  position:absolute !important;width:1px !important;height:1px !important;
  margin:-1px !important;padding:0 !important;overflow:hidden !important;
  clip:rect(0 0 0 0) !important;white-space:nowrap !important;border:0 !important;
}

/* Sprungmarke — sichtbar erst mit der Tastatur */
.s15-sprung{
  position:fixed;left:12px;top:-60px;z-index:1100;
  background:var(--s15-inv);color:var(--s15-invtext);
  padding:10px 16px;border-radius:10px;font-size:14px;text-decoration:none;
}
.s15-sprung:focus,.s15-sprung:focus-visible{top:12px;color:var(--s15-invtext);outline:2px solid var(--s15-link);outline-offset:3px;}

/* Die Kopfzeile liegt auf der Startseite UEBER dem Aufmacher (Entwurf:
   `position:fixed`). Auf allen anderen Seiten klebt sie im Fluss. */
html body.s15-startseite > header{position:fixed !important;top:0;left:0;right:0;}

/* ── 3 · Wiederkehrende Bausteine ───────────────────────────── */
.s15-ueber{font-size:17px;font-weight:600;color:var(--s15-text2);letter-spacing:-0.01em;}
.s15-ueber--neu{color:var(--s15-new);}
.s15-leise2{color:var(--s15-text2);}
.s15-leise3{color:var(--s15-text3);}
.s15-muted{color:var(--s15-muted);}
.s15-blau{color:var(--s15-link);}
.s15-mono{font-family:var(--tq-mono);font-weight:500;}
.s15-rechts{text-align:right;}
.s15-ausgewogen{text-wrap:balance;}

.s15-h2{margin:12px 0 0;font-size:clamp(40px,5.6vw,72px);line-height:1.04;font-weight:600;letter-spacing:-0.03em;}
.s15-h2--zeilen{margin:12px 0 52px;}
.s15-lead{margin:20px 0 0;font-size:19px;line-height:1.45;color:var(--s15-text2);letter-spacing:-0.01em;text-wrap:pretty;}

.s15 a.s15-knopf{
  display:inline-block;
  background:var(--s15-cta);color:#fff;
  font-size:17px;padding:12px 22px;border-radius:980px;
  transition:background-color .2s ease;
}
.s15 a.s15-knopf:hover{background:var(--s15-ctah);color:#fff;text-decoration:none;}
.s15 a.s15-knopf--held{padding:12px 23px;}
.s15 a.s15-knopf--klein{font-size:15px;padding:10px 20px;}
.s15-textlink{font-size:17px;}
.s15-textlink--klein{font-size:15px;}

.s15-abschnitt{padding:clamp(88px,10vw,150px) 22px;}
.s15-abschnitt--grau{background:var(--s15-bg2);}
.s15-innen{max-width:1180px;margin:0 auto;}
.s15-innen--1000{max-width:1000px;}
.s15-kopf{max-width:760px;}

/* ── 4 · Buehne (Aufmacher + Laptop) ────────────────────────── */
.s15-held{position:relative;}
.s15-bewegt .s15-held{height:440vh;}
.s15-held__buehne{position:relative;overflow:hidden;background:var(--s15-bg);transition:background .5s;}
.s15-bewegt .s15-held__buehne{position:sticky;top:0;height:100vh;}

.s15-held__schein{
  position:absolute;left:50%;top:55%;
  width:min(1200px,110vw);height:70vh;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,var(--s15-glow),transparent);
  filter:blur(30px);opacity:0;pointer-events:none;
}

/* ── 5 · Fotos ──────────────────────────────────────────────── */
.s15-fotos{
  position:absolute;top:0;bottom:0;right:0;
  /* 100% statt 100vw (06.10.2026): Prozent beziehen sich auf die Buehne, also auf die Breite
     OHNE Bildlaufleiste. Auf Windows steht die Leiste fest (17 px) — mit 100vw sass alles 8.5 px
     rechts von der Logo-Flucht. Am Mac ueberlagert die Leiste, dort ist beides gleich. */
  left:max(38%, calc(max(22px, (100% - 1180px) / 2) + 560px));
  z-index:0;overflow:hidden;
  filter:var(--s15-phf);transition:filter .6s;
}
.s15-foto{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;
  transition:opacity 1.8s cubic-bezier(.4,0,.2,1);
}
.s15-foto.is-an{opacity:1;pointer-events:auto;}
.s15-foto__kb{
  position:absolute;inset:0;
  transform:scale(1.02);
  transition:transform 11s cubic-bezier(.3,0,.5,1);
}
.s15-foto.is-an .s15-foto__kb{transform:scale(1.09) translate3d(-1.2%,0,0);}
.s15-foto__kb img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;display:block;
}
.s15-fotos__schleier{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, var(--s15-bg) 0%, color-mix(in srgb, var(--s15-bg) 94%, transparent) 6%, color-mix(in srgb, var(--s15-bg) 80%, transparent) 12%, color-mix(in srgb, var(--s15-bg) 58%, transparent) 19%, color-mix(in srgb, var(--s15-bg) 36%, transparent) 26%, color-mix(in srgb, var(--s15-bg) 18%, transparent) 33%, color-mix(in srgb, var(--s15-bg) 6%, transparent) 40%, transparent 48%),
    linear-gradient(0deg, var(--s15-bg) 0%, color-mix(in srgb, var(--s15-bg) 85%, transparent) 6%, color-mix(in srgb, var(--s15-bg) 55%, transparent) 13%, color-mix(in srgb, var(--s15-bg) 25%, transparent) 21%, color-mix(in srgb, var(--s15-bg) 7%, transparent) 29%, transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--s15-bg) 55%, transparent) 0%, color-mix(in srgb, var(--s15-bg) 15%, transparent) 9%, transparent 16%);
}
@media (max-width:859.98px){
  .s15-fotos{left:0;}
  .s15-fotos__schleier{
    background:linear-gradient(180deg, var(--s15-bg) 0%, color-mix(in srgb, var(--s15-bg) 92%, transparent) 30%, color-mix(in srgb, var(--s15-bg) 78%, transparent) 50%, color-mix(in srgb, var(--s15-bg) 50%, transparent) 66%, color-mix(in srgb, var(--s15-bg) 28%, transparent) 80%, color-mix(in srgb, var(--s15-bg) 55%, transparent) 90%, var(--s15-bg) 100%);
  }
}

/* ── 6 · Aufmacher-Text ─────────────────────────────────────── */
.s15-held__text{
  position:absolute;left:0;right:0;
  top:max(calc(64px + 3.5vh), calc(52vh - 240px));
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  padding:0 max(22px, calc((100% - 1180px) / 2));   /* 100%: siehe .s15-fotos */
  pointer-events:none;z-index:2;will-change:transform,opacity;
}
/* Nur die Bedienteile nehmen Klicks an (Entwurf: [data-pe]). Beim
   Ausblenden (start2.js setzt `s15-weg`) auch diese nicht mehr. */
.s15-held__text a,.s15-held__text button,.s15-held__text input,.s15-held__text form{pointer-events:auto;}
.s15-held__text.s15-weg a,.s15-held__text.s15-weg button,.s15-held__text.s15-weg input,.s15-held__text.s15-weg form{pointer-events:none;}

.s15-folien{position:relative;width:100%;max-width:640px;display:grid;justify-items:flex-start;}
.s15-folie{
  grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;width:100%;
  opacity:0;transform:translateY(28px);filter:blur(8px);pointer-events:none;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1) 0s,transform 1.1s cubic-bezier(.16,1,.3,1) 0s,filter .8s 0s;
}
.s15-folie.is-vorher{transform:translateY(-14px);}
.s15-folie.is-an{
  opacity:1;transform:none;filter:none;pointer-events:auto;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1) .45s,transform 1.1s cubic-bezier(.16,1,.3,1) .45s,filter .8s .45s;
}
.s15-folie__titelbox{position:relative;display:inline-block;margin-top:10px;}
.s15-folie__titel{
  margin:0;max-width:1000px;
  font-size:clamp(34px,min(5vw,7.6vh),76px);
  line-height:1.02;font-weight:600;letter-spacing:-0.032em;text-wrap:balance;
}
.s15 a.s15-sticker{
  position:absolute;
  right:clamp(-150px,-12vw,-56px);top:clamp(-18px,-1.5vh,-6px);
  width:clamp(92px,min(9.5vw,14vh),130px);aspect-ratio:1;border-radius:50%;
  background:var(--s15-cta);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  transform:rotate(-10deg) scale(.4);
  transition:transform .8s cubic-bezier(.34,1.56,.64,1) .25s;
  box-shadow:0 14px 40px rgba(0,113,227,.4);
}
.s15 a.s15-sticker:hover{color:#fff;text-decoration:none;}
.s15-folie.is-an .s15-sticker{transform:rotate(-10deg) scale(1);}
.s15-sticker__klein{font-size:clamp(11px,1vw,13px);font-weight:500;}
.s15-sticker__klein--unten{font-size:clamp(10px,.9vw,12px);}
.s15-sticker__preis{font-size:clamp(28px,min(3vw,4.4vh),42px);font-weight:600;letter-spacing:-0.03em;margin:3px 0 4px;}
.s15-folie__text{
  margin:clamp(10px,2vh,20px) 0 0;max-width:620px;
  font-size:clamp(16px,min(1.5vw,2.3vh),20px);line-height:1.45;
  color:var(--s15-text2);letter-spacing:-0.01em;text-wrap:pretty;
}

/* Spieler */
.s15-spieler{margin-top:clamp(14px,2.2vh,22px);display:flex;gap:10px;align-items:center;align-self:flex-start;}
/* Rand von Ring und Pille: 1 px statt .5 px (06.10.2026, Meldung Fabrizio «der Rand
   fehlt manchmal»). Eine Halbpixel-Linie auf der backdrop-filter-Ebene wird je nach
   Lage (Pille bei y=563.09) und bei skalierter Auflösung weggeglättet; 1 px fuellt
   immer ganze Bildpunkte. Gemessen dpr1 und dpr2, hell und dunkel. */
.s15-ring{
  position:relative;width:40px;height:40px;border:0;border-radius:50%;
  background:var(--s15-glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:inset 0 0 0 1px var(--s15-line);
  color:var(--s15-text);cursor:pointer;display:grid;place-items:center;padding:0;
  font:inherit;
}
.s15-ring:hover{color:var(--s15-link);}
.s15-ring__kreis{position:absolute;inset:0;transform:rotate(-90deg);}
.s15-ring__spur{stroke:var(--s15-dot);}
.s15-ring__play{margin-left:2px;display:none;}
.s15-ring.is-pause .s15-ring__play{display:block;}
.s15-ring.is-pause .s15-ring__halt{display:none;}
.s15-pille{
  display:flex;align-items:center;height:40px;padding:0 4px;border-radius:980px;
  background:var(--s15-glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:inset 0 0 0 1px var(--s15-line);
}
.s15-pille__knopf{
  width:32px;height:32px;border:0;border-radius:50%;background:none;
  color:var(--s15-text);cursor:pointer;display:grid;place-items:center;padding:0;font:inherit;
}
.s15-pille__knopf:hover{background:var(--s15-dot);}
.s15-pille__stand{
  min-width:108px;padding:0 6px;display:flex;align-items:baseline;justify-content:center;gap:8px;
  font-size:14px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;
}
.s15-pille__zahl{font-size:12px;font-weight:500;color:var(--s15-text3);font-variant-numeric:tabular-nums;}

.s15-held__knoepfe{
  margin-top:clamp(12px,2.6vh,26px);
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;justify-content:flex-start;
}

/* Domainsuche im Aufmacher */
.s15-suche{
  margin-top:clamp(12px,2.6vh,26px);width:100%;max-width:600px;
  display:flex;align-items:center;gap:6px;padding:6px 6px 6px 20px;
  border-radius:980px;background:var(--s15-card);
  box-shadow:0 0 0 1px var(--s15-feld-rand);
}
.s15-suche__lupe{color:var(--s15-text3);flex:none;}
.s15 .s15-suche__feld{
  flex:1;min-width:0;height:44px;border:0;background:none;outline:none;
  font:inherit;font-size:17px;color:var(--s15-text);padding:0;margin:0;
}
.s15-suche__knopf{
  flex:none;height:44px;padding:0 20px;border:0;border-radius:980px;
  background:var(--s15-cta);color:#fff;font:inherit;font-size:16px;cursor:pointer;
  transition:background-color .2s ease;
}
.s15-suche__knopf:hover{background:var(--s15-ctah);}
/* Hier stand die Trefferliste der Domainsuche (.s15-treffer*). Seit dem
   28.09.2026 schickt das Formular nach /domains (WE-237); entfernt am
   03.10.2026 (CLEAN-41). @keyframes s15-puls bleibt: domains2.css nutzt sie. */

.s15-endungen{
  margin-top:10px;display:flex;gap:6px 10px;flex-wrap:wrap;justify-content:flex-start;
  font-size:13px;color:var(--s15-text2);
}

@media (max-width:859.98px){
  .s15-held__text{align-items:center;text-align:center;padding:0 22px;}
  .s15-folien{max-width:1100px;justify-items:center;}
  .s15-folie{align-items:center;}
  .s15-folie__titel{font-size:clamp(34px,min(8vw,7vh),60px);}
  .s15-spieler{align-self:center;}
  .s15-held__knoepfe,.s15-endungen{justify-content:center;}
}

/* ── 7 · Laptop ─────────────────────────────────────────────── */
.s15-mac{
  position:absolute;left:50%;bottom:0;
  width:min(1000px,88vw,calc((100vh - 90px) * 1.36));
  transform:translate(-50%,80%) scale(.82);transform-origin:50% 100%;
  will-change:transform;z-index:1;
}
.s15-deckel{
  position:relative;width:94%;margin:0 auto;
  transform-origin:50% 100%;transform:rotateX(-88deg);
  transform-style:preserve-3d;will-change:transform;
}
.s15-aus{position:absolute;inset:0;background:#000;z-index:4;pointer-events:none;}
.s15-glanz{
  position:absolute;inset:-10% -30%;z-index:5;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.14) 48%,rgba(255,255,255,.04) 56%,transparent 66%);
  opacity:0;will-change:transform,opacity;
}
/* Der Schalter Hell/Dunkel in der Attrappe schaltet wirklich (wie im
   Entwurf) — mit der Maus; fuer die Tastatur gibt es den in der Kopfzeile. */
[data-s15-kc-thema]{cursor:pointer;}

/* ── 8 · Text neben dem Laptop ──────────────────────────────── */
.s15-seite{
  position:absolute;left:0;top:50%;width:420px;
  opacity:0;z-index:2;pointer-events:none;will-change:transform,opacity;
}
.s15-seite__titel{
  margin:12px 0 0;font-size:clamp(34px,3.8vw,56px);line-height:1.04;
  font-weight:600;letter-spacing:-0.03em;text-wrap:balance;
}
.s15-seite__text{
  margin:20px 0 0;font-size:clamp(17px,1.4vw,19px);line-height:1.45;
  color:var(--s15-text2);letter-spacing:-0.01em;text-wrap:pretty;
}
.s15-seite__knoepfe{margin-top:28px;display:flex;gap:22px;align-items:center;flex-wrap:wrap;}

/* ── 9 · Prepaid ────────────────────────────────────────────── */
.s15-laufzeit{
  margin-top:clamp(36px,5vw,56px);
  background:var(--s15-tile);border-radius:32px;padding:clamp(24px,4.4vw,56px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
  gap:clamp(32px,5vw,72px);align-items:center;
}
.s15-laufzeit__links,.s15-laufzeit__rechts{min-width:0;}
.s15-segment{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:3px;
  border-radius:12px;background:var(--s15-card2);
}
.s15-segment__knopf{
  height:40px;border:0;border-radius:9px;background:transparent;box-shadow:none;
  color:var(--s15-text);font:inherit;font-size:clamp(13px,1.3vw,15px);font-weight:400;
  cursor:pointer;white-space:nowrap;padding:0 4px;
  transition:background .25s,box-shadow .25s;
}
.s15-segment__knopf[aria-checked="true"]{background:var(--s15-segon);box-shadow:var(--s15-segsh);font-weight:600;}
.s15-laufzeit__beispiel{margin-top:clamp(28px,3.4vw,40px);font-size:15px;color:var(--s15-text2);}
.s15-laufzeit__preiszeile{margin-top:6px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.s15-laufzeit__preis{font-size:clamp(48px,6vw,76px);font-weight:600;letter-spacing:-0.04em;line-height:1;font-variant-numeric:tabular-nums;}
.s15-laufzeit__pro{font-size:17px;color:var(--s15-text2);}
.s15-laufzeit__zeilen{margin-top:28px;display:flex;flex-direction:column;font-size:15px;}
.s15-laufzeit__zeile{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--s15-line);}
.s15-laufzeit__zeile--ende{border-bottom:1px solid var(--s15-line);}
.s15-laufzeit__wert{font-weight:600;font-variant-numeric:tabular-nums;}
.s15-balken{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(3px,.5vw,6px);}
.s15-balken__monat{display:flex;flex-direction:column;gap:10px;align-items:center;min-width:0;}
/* Schlanke, runde Säulen (06.10.2026, Startseite «passt noch nicht ganz»): vorher
   volle Blöcke über die ganze Spaltenbreite, bei «12 Monate» eine satt blaue Fläche
   aus zwölf Blöcken, im Dunkeln noch stärker. Gleiche Aussage, ein Bruchteil der
   Farbfläche, wie die Säulen in Apples Fitness- und Gesundheitsgrafiken. */
.s15-balken__saeule{
  display:block;width:min(14px,52%);margin:0 auto;height:clamp(90px,12vw,160px);border-radius:999px;
  background:var(--s15-card2);
  transition:background .35s cubic-bezier(.2,.7,.2,1);
}
.s15-balken__saeule.is-an{background:var(--s15-text);}
.s15-balken--zwoelf .s15-balken__saeule.is-an{background:var(--s15-link);}
.s15-balken__name{font-size:clamp(9px,1vw,12px);color:var(--s15-text3);overflow:hidden;max-width:100%;}
.s15-laufzeit__spar{margin-top:22px;min-height:22px;font-size:15px;color:var(--s15-text2);}
.s15-laufzeit__spartext{color:var(--s15-link);font-weight:600;}
.s15-laufzeit__spartext[hidden]{display:none;}

/* ── 10 · Produkte ──────────────────────────────────────────── */
.s15-karten{
  margin-top:clamp(36px,5vw,56px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:20px;
}
.s15-karte{
  background:var(--s15-card);border-radius:28px;
  padding:clamp(28px,3.4vw,40px) clamp(24px,3vw,34px) clamp(26px,3vw,34px);
  display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:28px;
}
.s15-karte__titel{margin:0;font-size:28px;font-weight:600;letter-spacing:-0.022em;}
.s15-karte__unter{margin:8px 0 0;font-size:17px;line-height:1.4;color:var(--s15-text2);}
.s15-preis{display:flex;flex-direction:column;gap:2px;}
.s15-preis__klein{font-size:14px;color:var(--s15-text3);}
.s15-preis__betrag{font-size:48px;font-weight:600;letter-spacing:-0.03em;line-height:1.05;}
.s15-liste{display:flex;flex-direction:column;font-size:15px;line-height:1.4;}
.s15-liste__zeile{padding:12px 0;border-top:1px solid var(--s15-line);}
.s15-liste__zeile--ende{border-bottom:1px solid var(--s15-line);}
.s15-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;}
.s15-chip{font-size:13px;border:1px solid var(--s15-chip);padding:5px 12px;border-radius:980px;}
.s15 a.s15-chip--link{color:var(--s15-text);transition:border-color .15s ease;}
.s15 a.s15-chip--link:hover{border-color:var(--s15-text);color:var(--s15-text);text-decoration:none;}
.s15-chip--rest{border:0;color:var(--s15-text3);padding:6px 4px;}
.s15-karte__fuss{align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:14px;}

/* ── 11 · Domains & DNS ─────────────────────────────────────── */
.s15-abschnitt--domains{padding:clamp(8px,2vw,40px) 22px clamp(88px,10vw,150px);}
.s15-domains{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));
  gap:clamp(40px,6vw,80px);align-items:center;
}
.s15-domains__titel{margin:12px 0 0;font-size:clamp(40px,5.4vw,68px);line-height:1.04;font-weight:600;letter-spacing:-0.03em;}
.s15-domains__text{margin:22px 0 0;max-width:520px;font-size:19px;line-height:1.45;color:var(--s15-text2);letter-spacing:-0.01em;text-wrap:pretty;}
/* Seit 06.10.2026 dieselbe Suche wie im Aufmacher (.s15-suche): Lupe, Ring, «Prüfen».
   Vorher eine zweite Bauart (.s15-suche2) mit anderem Knopf und Platzhalter. */
/* border-box: in der schmalen Spalte haette width:100% plus 26 px Polster (content-box,
   siehe KASTENMODELL) 4 px Querlauf gegeben (390 px gemessen). 526 = alte Gesamtbreite. */
.s15-suche--domains{box-sizing:border-box;margin-top:32px;max-width:526px;}
.s15-domains__weiter{margin-top:18px;}
.s15-dns{
  background:var(--s15-card);border:1px solid var(--s15-line);border-radius:22px;overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.18);
}
.s15-dns__kopf{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--s15-line);}
.s15-dns__ampel{display:flex;gap:7px;}
.s15-dns__ampel span{width:11px;height:11px;border-radius:50%;}
.s15-dns__titel{font-size:13px;color:var(--s15-text3);}
.s15-dns__koerper{padding:6px 22px 18px;font-size:14px;}
.s15-dns__raster{display:grid;grid-template-columns:70px 70px minmax(0,1fr);gap:12px;}
.s15-dns__raster--kopf{padding:12px 0;color:var(--s15-text3);font-size:12px;border-bottom:1px solid var(--s15-line);}
.s15-dns__zeile{
  padding:14px 0;border-bottom:1px solid var(--s15-line);align-items:center;
  transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1);
}
.s15-dns__typ{font-weight:600;font-size:12px;justify-self:start;padding:3px 9px;border-radius:6px;background:var(--s15-card2);}
.s15-dns__wert{font-family:var(--tq-mono);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.s15-dns__fuss{display:flex;justify-content:space-between;align-items:center;padding-top:16px;gap:12px;flex-wrap:wrap;}
.s15-dns__hinweis{font-size:13px;color:var(--s15-text3);}
.s15-dns__plus{font-size:13px;font-weight:500;color:#fff;background:var(--s15-cta);padding:7px 14px;border-radius:980px;}

/* ── 12 · Kundencenter (Woerter) ────────────────────────────── */
.s15-kc-titel{margin:12px 0 0;font-size:clamp(40px,6vw,76px);line-height:1.04;font-weight:600;letter-spacing:-0.03em;text-wrap:balance;}
.s15-woerter{margin:36px 0 0;font-size:clamp(26px,3.4vw,44px);line-height:1.22;font-weight:600;letter-spacing:-0.022em;}
.s15-wort{display:inline-block;margin-right:.24em;transition:opacity .4s ease;}
/* Abgedunkelt nur mit `s15-bewegt` (start2-thema.js, blockierend im Kopf): ohne Skript, oder
   wenn start2.js nicht laedt, blieben die Woerter sonst bei 18 % Deckkraft stehen (1.44:1) —
   entgegen der Zusage «ohne Klasse steht die Seite ruhig und vollstaendig da» (04.10.2026). */
.s15-bewegt .s15-wort{opacity:.18;}
.s15-wort.is-an{opacity:1;}
.s15-kc-knoepfe{margin-top:44px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;}

/* ── 13 · Enthalten ─────────────────────────────────────────── */
.s15 a.s15-zeile{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:10px 40px;align-items:baseline;padding:30px 0;border-top:1px solid var(--s15-line);
  color:var(--s15-text);transition:padding .4s cubic-bezier(.2,.7,.2,1);
}
.s15 a.s15-zeile:hover{padding-left:14px;text-decoration:none;color:var(--s15-text);}
.s15-zeile__name{font-size:clamp(28px,3.2vw,42px);font-weight:600;letter-spacing:-0.024em;}
.s15-zeile__text{display:flex;justify-content:space-between;gap:20px;font-size:19px;line-height:1.45;color:var(--s15-text2);}
.s15-zeile__pfeil{color:var(--s15-text3);}
.s15-zeilen-ende{border-top:1px solid var(--s15-line);}

/* ── 14 · Ueber techQ ───────────────────────────────────────── */
.s15-abschnitt--ueber{padding:clamp(8px,2vw,40px) 22px clamp(88px,10vw,150px);}
.s15-ueberuns{max-width:980px;margin:0 auto;text-align:center;}
.s15-ueberuns__titel{margin:12px 0 0;font-size:clamp(42px,7vw,96px);line-height:1.02;font-weight:600;letter-spacing:-0.034em;text-wrap:balance;}
.s15-ueberuns__text{margin:26px auto 0;max-width:640px;font-size:19px;line-height:1.5;color:var(--s15-text2);letter-spacing:-0.01em;text-wrap:pretty;}
.s15-kacheln{
  max-width:1080px;margin:64px auto 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px;
}
.s15 a.s15-kachel{
  background:var(--s15-card);border-radius:24px;padding:30px;color:var(--s15-text);
  display:flex;flex-direction:column;gap:8px;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.s15 a.s15-kachel:hover{transform:scale(1.02);text-decoration:none;color:var(--s15-text);}
.s15-kachel__titel{font-size:21px;font-weight:600;letter-spacing:-0.012em;}
.s15-kachel__text{font-size:17px;line-height:1.42;color:var(--s15-text2);}
.s15-kachel__mehr{font-size:15px;color:var(--s15-link);margin-top:10px;}

/* ── 15 · Fragen ────────────────────────────────────────────── */
.s15-abschnitt--fragen{padding:0 22px clamp(88px,10vw,150px);}
.s15-fragen{max-width:820px;margin:0 auto;}
.s15-fragen__titel{margin:12px 0 40px;font-size:clamp(38px,5vw,56px);line-height:1.05;font-weight:600;letter-spacing:-0.028em;}
.s15-frage{border-top:1px solid var(--s15-line);}
.s15-frage__kopf{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:24px 0;font-size:20px;font-weight:600;letter-spacing:-0.012em;
}
.s15-frage__kopf::-webkit-details-marker{display:none;}
.s15-frage__plus{font-size:28px;font-weight:300;color:var(--s15-text3);transition:transform .3s;line-height:1;}
.s15-frage[open] .s15-frage__plus{transform:rotate(45deg);}
.s15-frage__antwort{margin:0;padding:0 48px 26px 0;font-size:17px;line-height:1.5;color:var(--s15-text2);}
.s15-fragen__mehr{border-top:1px solid var(--s15-line);padding-top:24px;}

/* ── 16 · Schluss ───────────────────────────────────────────── */
.s15-schluss{padding:0 22px;}
.s15-schluss__feld{
  max-width:1400px;margin:0 auto;border-radius:36px;
  padding:clamp(90px,11vw,150px) 22px;text-align:center;
  background:var(--s15-bg2);position:relative;overflow:hidden;
}
.s15-schluss__schein{
  position:absolute;left:50%;bottom:-40%;width:80%;height:90%;
  transform:translateX(-50%);
  background:radial-gradient(closest-side,var(--s15-glow),transparent);
  filter:blur(20px);pointer-events:none;
}
.s15-schluss__innen{position:relative;}
.s15-schluss__titel{margin:0 auto;max-width:800px;font-size:clamp(38px,5.4vw,68px);line-height:1.04;font-weight:600;letter-spacing:-0.03em;text-wrap:balance;}
.s15-schluss__text{margin:20px auto 0;max-width:520px;font-size:19px;line-height:1.45;color:var(--s15-text2);letter-spacing:-0.01em;}
.s15 a.s15-schluss__knopf{
  display:inline-block;margin-top:32px;background:var(--s15-inv);color:var(--s15-invtext);
  font-size:17px;padding:13px 26px;border-radius:980px;transition:opacity .2s ease;
}
.s15 a.s15-schluss__knopf:hover{opacity:.88;text-decoration:none;color:var(--s15-invtext);}

/* ── 17 · Fusszeile ─────────────────────────────────────────── */
.s15-fuss{
  margin-top:80px;padding:40px 22px 28px;font-size:12px;color:var(--s15-text3);
  border-top:1px solid var(--s15-line);background:var(--s15-bg2);
}
.s15-fuss__innen{max-width:1180px;margin:0 auto;}
.s15-fuss__oben{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid var(--s15-line);
}
.s15-fuss__marke img{height:20px;width:auto;}
.s15-logo-hell{display:var(--s15-logo-l);}
.s15-logo-dunkel{display:var(--s15-logo-d);}
.s15-fuss__kontakt{display:flex;gap:20px;flex-wrap:wrap;}
.s15-fuss a{color:var(--s15-text2);}
.s15-fuss a:hover{color:var(--s15-text2);}
/* Badge neben dem Logo (13.10.2026, Auftrag Fabrizio): Logo, feine Linie, Blatt und Text, ohne Verweis.
   Nur Grau, kein Gruen (Gestaltung Regel 5). Am Telefon steht der Badge unter dem Logo.
   Kein Tippziel, daher keine 44-px-Regel. Wortlaut: SHOP-71 — Nachweis offen. */
.s15-fuss__kopf{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;}
.s15-fuss .s15-fuss__satz{
  display:inline-flex;align-items:center;gap:7px;color:var(--s15-text2);
  font-size:13px;line-height:1.4;letter-spacing:-0.005em;text-wrap:balance;
  padding-left:16px;border-left:1px solid var(--s15-line);
}
.s15-fuss__satz svg{flex:none;}
@media (max-width:700px){
  .s15-fuss .s15-fuss__satz{flex-basis:100%;padding-left:0;border-left:0;}
}
.s15-fuss__spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:28px;padding:26px 0;}
.s15-fuss__spalte{display:flex;flex-direction:column;gap:10px;}
.s15-fuss__titel{color:var(--s15-text);font-weight:600;}
.s15-fuss__unten{padding-top:18px;border-top:1px solid var(--s15-line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.s15 a.s15-fuss__status{color:var(--s15-text2);display:flex;gap:7px;align-items:center;}
.s15-fuss__punkt{width:6px;height:6px;border-radius:50%;background:#30d158;}

/* ── 18 · Einblenden (start2.js) ────────────────────────────── */
/* Beim Laden: die fuenf Teile des Aufmachers (Entwurf [data-intro]).
   Der Anfangszustand steht schon im CSS, damit nichts aufblitzt, bevor
   das Skript (defer) laeuft. Laeuft es nie, gibt nach 6 s eine
   Animation alles frei (Vorspann bis 3 s + Einblenden 0.7 s passt davor) — eine leere Startseite darf es nicht geben.
   Seit 04.10.2026 (Entscheid Fabrizio «Per CSS sofort starten») gilt die Verdeckung nur noch,
   solange der Vorhang liegt (`tqv-…` am <html>, gesetzt von vorspann.js im Kopf). Ohne Vorhang
   blendet die Animation `s15-ein` unten ein — ab dem ersten Bild, nicht erst, wenn start2.js
   geladen ist. Gemessen vorher: LCP Startseite 4.0 s (Telefon gedrosselt), davon ~2.6 s Warten
   auf das Skript. */
.s15-bewegt[class*="tqv-"] [data-s15-intro]:not(.s15-da){
  opacity:0;transform:translateY(26px);filter:blur(8px);
  animation:s15-notfall .01s linear 6s forwards;
}
@keyframes s15-notfall{to{opacity:1;transform:none;filter:none;}}
.s15-bewegt [data-s15-intro].s15-da{
  transition:opacity 1.2s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1),filter 1.2s cubic-bezier(.2,.7,.2,1);
}
/* Ohne Vorhang: dieselbe Bewegung wie start2.js (200 ms + 120 ms je Teil, 1.2 s), aber in CSS.
   Nur `backwards`: nach dem Ende gilt wieder der normale Stil, und start2.js darf spaeter
   `s15-da` setzen, ohne dass etwas springt. Die Staffelung folgt der Dokumentreihenfolge der
   vier Seiten mit Aufmacher (index, domains, panel, ueberuns/werte); ein neuer Teil ohne
   Eintrag blendet mit dem ersten ein. Endet der Vorhang, beginnt die Animation in dem Moment,
   in dem die letzte `tqv-`-Klasse geht — wie bisher `nachVorhang()`. */
html.s15-bewegt:not([class*="tqv-"]) [data-s15-intro]{
  animation:s15-ein 1.2s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--s15-i, 0) * .12s) backwards;
}
@keyframes s15-ein{from{opacity:0;transform:translateY(26px);filter:blur(8px);}}
[data-s15-intro].s15-spieler,[data-s15-intro].d15-held__text,[data-s15-intro].p15-held__text,[data-s15-intro].w15-held__text{--s15-i:1;}
[data-s15-intro].s15-held__knoepfe,[data-s15-intro].d15-adresse,[data-s15-intro].p15-held__knoepfe{--s15-i:2;}
[data-s15-intro].s15-suche,[data-s15-intro].d15-held__unten,[data-s15-intro].p15-held__bild{--s15-i:3;}
[data-s15-intro].s15-endungen{--s15-i:4;}

/* ── 19 · Dunkel: Kopfzeile ueber dem Aufmacher ─────────────── */
/* Die Farben der Kopfzeile stehen in kopfzeile.css (dort auch dunkel). */
/* SHOP-43 Anfang — Konto-Menue dunkel wie auf den uebrigen 192 Seiten
   (hell-dunkel.css, Fabio 29.09.2026). kopfzeile.css setzt den Hover von
   «Abmelden» fest auf #C2410C (auf der dunklen Karte 3.05:1) und den Rand von
   «Konto» auf --kz-trenner #3a3a3c (1.68:1 auf der Leiste). Werte wie dort:
   --danger #ff6961 auf rgba(255,105,97,.12) und der Feldrand
   rgba(255,255,255,.37) (= --s15-feld-rand dunkel). Gemessen und bewacht von
   tools/v15_konto_dunkel_pruefstand.mjs (03.10.2026). */
html[data-theme="dark"] body > header .konto-item-danger:hover{background:rgba(255,105,97,.12);color:#ff6961;}
html[data-theme="dark"] body > header #kontoBtn{--kz-trenner:var(--s15-feld-rand);}
/* SHOP-43 Ende */

/* ── 20 · Ruhige Fassung (kein Skript / «Bewegung reduzieren») ─ */
/* Der Entwurf sprang hier auf den Endzustand der Buehne — und dort ist
   der Aufmacher AUSGEBLENDET: Ueberschrift, Knoepfe und Suche sah man
   nie. Deshalb steht die Buehne hier untereinander: oben der Aufmacher
   mit Foto (so hoch wie das Fenster, im Polster der Buehne), darunter der
   offene Laptop mit dem Text daneben — dieselbe Endlage wie im Entwurf. */
html:not(.s15-bewegt) .s15-held__buehne{
  display:grid;grid-template-columns:minmax(0,57fr) minmax(0,43fr);
  column-gap:48px;align-items:center;
  padding:max(100vh,640px) max(22px, calc((100% - 1180px) / 2)) clamp(88px,10vw,150px);   /* 100%: siehe .s15-fotos */
}
html:not(.s15-bewegt) .s15-held__schein{display:none;}
html:not(.s15-bewegt) .s15-fotos{bottom:auto;height:max(100vh,640px);}
html:not(.s15-bewegt) .s15-mac{
  position:relative;left:auto;bottom:auto;width:100%;
  transform:none;will-change:auto;grid-column:1;
}
html:not(.s15-bewegt) .s15-deckel{transform:none;will-change:auto;}
html:not(.s15-bewegt) .s15-aus,
html:not(.s15-bewegt) .s15-ruecken{display:none;}
html:not(.s15-bewegt) .s15-glanz{opacity:.08;transform:translateX(60%);}
html:not(.s15-bewegt) .s15-seite{
  position:relative;left:auto;top:auto;width:auto;grid-column:2;
  opacity:1;pointer-events:auto;will-change:auto;
}
@media (max-width:899.98px){
  html:not(.s15-bewegt) .s15-held__buehne{grid-template-columns:minmax(0,1fr);row-gap:40px;}
  html:not(.s15-bewegt) .s15-seite{grid-column:1;}
}

/* ── 21 · Telefon: Fingerziele 44 px (SHOP-46) ────────────────────────────
   Entscheid Fabrizio, 03.10.2026: am Telefon zwei Spalten, jeder Link eine
   Zeile mit 44 px Fingerhöhe. Gemessen mit tools/mobil_pruefstand.mjs (390 px):
   die Links der Fusszeile waren 15 px hoch (12 px Schrift, 10 px Abstand) —
   die alte Fusszeile `tqf` hatte 44 px. «Rechtliches» über die ganze Breite,
   die fünf Verweise nebeneinander. Dazu das Logo-Feld der Kopfzeile (39 px,
   ohne Klasse — darum der Selektor über aria-label). Ab 701 px unverändert. */
@media (max-width:700px){
  .s15-fuss__spalten{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;}
  .s15-fuss__spalte{gap:0;}
  .s15-fuss__titel{padding-bottom:4px;}
  .s15-fuss__spalte > a,
  .s15-fuss__kontakt > a,
  .s15 a.s15-fuss__status{display:flex;align-items:center;min-height:44px;}
  .s15-fuss__kontakt{gap:0 20px;}
  .s15-fuss__spalte:last-child{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;column-gap:20px;}
  .s15-fuss__spalte:last-child .s15-fuss__titel{flex-basis:100%;}
  body > header a[aria-label="techQ"]{min-height:44px;}
  /* SHOP-47, Entscheid Fabrizio 04.10.2026 («Umsetzen»): auch die Bedienelemente der
     v15-Seiten am Telefon 44 px — Umschalter und kleiner Knopf waren 38 px hoch, die
     Textverweise 20 px (gemessen mit tools/mobil_pruefstand.mjs, 390 px). */
  .s15-segment__knopf{height:44px;}
  .s15 a.s15-knopf--klein{padding-top:13px;padding-bottom:13px;}
  .s15 a.s15-textlink{display:inline-flex;align-items:center;min-height:44px;}
  /* SHOP-48, Entscheid Fabrizio 04.10.2026 («Ja, 44 px»): die Paket-Chips der Startseite
     («Web-XXS» … «Web-XL», Verweise auf /pakete) waren 28 px hoch. */
  .s15 a.s15-chip--link{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font-size:15px;}
  /* SHOP-63 (06.10.2026): die zweite Domainsuche ist seit dem Abend dieselbe Komponente
     wie die Suche im Aufmacher (.s15-suche, 44/44); eigene Regeln entfallen. */
}

/* ── 22 · Fusszeile auf Tablets und unter Quin (04.10.2026) ─────────────────
   Gefunden in der Code-Durchsicht von 20f1b1b0 (techq-05), gemessen:
   - Tablets ohne Maus (hover: none, ab 701 px — iPad hochkant 768, quer 1024):
     die Verweise der Fusszeile waren 15 px hoch. Die alte Fusszeile `tqf` hatte
     dafür eine eigene Regel (fusszeile.css: `(max-width: 759px), (hover: none)`);
     §21 galt nur bis 700 px. Hier dieselben 44-px-Zeilen, das Raster bleibt.
   - Quins Knopf (fest unten rechts, 20 px Abstand, rund 52 px hoch) lag am Ende
     der Seite über «Status» unten rechts (Treffhöhe 0 px bei 768 und 1024).
     Unten 88 px Polster statt 28: die letzte Zeile scrollt über den Knopf.
     Seit 06.10.2026 ersetzt: «Status» steht nicht mehr in der Ecke, unten 40 px (§24). */
@media (hover:none) and (min-width:701px){
  .s15-fuss__spalte{gap:0;}
  .s15-fuss__spalte > a,
  .s15-fuss__kontakt > a,
  .s15 a.s15-fuss__status{display:flex;align-items:center;min-height:44px;}
}

/* ── 23 · Preis-Sticker bis 899 px (04.10.2026) ─────────────────────────────
   Entscheid Fabrizio 04.10.2026 («A2 übernehmen»), gemeldet von techq-f6, gemessen:
   bei 320–768 px hing der Sticker rechts über das Ende des Titels («Webhostin|g»)
   und ragte aus dem Fenster (390 px: 41 px draussen). Bis 899 px ist er kleiner
   (78 px) und sitzt im freien Bild über der Oberzeile, rechts oben. Am Rechner
   unverändert. Bewacht von tools/start_fotogroesse_pruefstand.mjs (Fotofläche).
   A3b (Entscheid Fabrizio 04.10.2026, SHOP-51): A2 hing 70 px über der Titelbox
   und brauchte so mindestens 832 px Fensterhöhe; darunter lag er unter der
   Kopfzeile (iPhone SE 375×667: 82 px verdeckt), auf echten Telefonen fast immer.
   Jetzt misst er von der Oberzeile aus: Titelbox ohne Position, Bezug ist
   .s15-folien, deren Oberkante die Textoberkante T aus §6 ist. Er sitzt mittig
   zwischen Kopfzeile (65 px) und Oberzeile, mit 12–40 px Luft
   (143 px = Kopfzeile 65 + Sticker 78). Unter 783 px Höhe (T < 167 px) fehlt der
   Platz: ausgeblendet, der Preis steht weiter unten bei den Paketen. Wer `top`
   von .s15-held__text (§6) ändert, rechnet beide Stellen hier neu. */
@media (max-width:899.98px){
  .s15-folie__titelbox{position:static;}
  .s15 a.s15-sticker{
    width:78px;right:4px;bottom:auto;
    top:calc(-78px - clamp(12px, (max(calc(64px + 3.5vh), calc(52vh - 240px)) - 143px) / 2, 40px));
  }
  .s15-sticker__preis{font-size:24px;margin:2px 0 3px;}
  .s15-sticker__klein{font-size:10px;}
  .s15-sticker__klein--unten{font-size:9.5px;}
}
@media (max-width:899.98px) and (max-height:782.98px){
  .s15 a.s15-sticker{display:none;}
}

/* ── 24 · Fusszeile: unten wie oben, am Telefon aufklappbar (06.10.2026) ─────
   Wunsch Fabrizio: «unten zu grosser Abstand, wie oben» und am Telefon
   «kompakter, aber professionell und übersichtlich». Abgenommen mit Bildern:
   - Unten 40 px wie oben (vorher 88). Damit Quins Knopf (106 × 52 px, 20 px vom
     Rand, gemessen) am Ende der Seite nichts zudeckt, steht «Status» nicht mehr
     rechts in der Ecke, sondern neben dem Vermerk; am Telefon über ihm.
     Treffbar gemessen bei 1440, 1024, 768 und 390.
   - Am Telefon Fassung B wie apple.com: start2.js macht jeden Gruppentitel zu
     einem Knopf, die Verweise klappen auf (932 → 475 px). Ohne Skript fehlt
     `s15-fuss--klappbar`, dann gilt §21 wie bisher. Jedes Ziel 44 px. */
.s15-fuss{padding-bottom:40px;}
.s15-fuss__unten{justify-content:flex-start;column-gap:28px;}
@media (max-width:700px){
  .s15-fuss__unten{flex-direction:column;align-items:flex-start;gap:0;}
  .s15-fuss__unten > span{order:1;}

  .s15-fuss--klappbar .s15-fuss__spalten{grid-template-columns:minmax(0,1fr);gap:0;padding:6px 0 0;}
  .s15-fuss--klappbar .s15-fuss__spalte,
  .s15-fuss--klappbar .s15-fuss__spalte:last-child{
    grid-column:auto;flex-direction:column;flex-wrap:nowrap;border-bottom:1px solid var(--s15-line);
  }
  .s15-fuss--klappbar .s15-fuss__titel,
  .s15-fuss--klappbar .s15-fuss__spalte:last-child .s15-fuss__titel{flex-basis:auto;padding:0;}
  .s15-fuss--klappbar .s15-fuss__spalte:not(.ist-offen) > a{display:none;}
  .s15-fuss--klappbar .s15-fuss__spalte.ist-offen{padding-bottom:8px;}
  /* Die letzte Gruppe trägt schon eine Linie; eine zweite darunter wäre doppelt. */
  .s15-fuss--klappbar .s15-fuss__unten{border-top:0;}
  .s15-fuss__auf{
    all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
    width:100%;min-height:44px;font:inherit;font-weight:600;color:var(--s15-text);cursor:pointer;
  }
  .s15-fuss__auf:focus-visible{outline:2px solid var(--s15-link);outline-offset:2px;border-radius:6px;}
  /* Das Plus ist Schmuck: `/ ""` hält es aus dem Namen, den Vorleseprogramme
     ansagen (Zustand sagt aria-expanded). Offen dreht es zum Kreuz. */
  .s15-fuss__auf::after{
    content:"+";content:"+" / "";flex:none;font-size:20px;font-weight:300;line-height:1;
    color:var(--s15-text3);transition:transform .2s ease;
  }
  .s15-fuss__auf[aria-expanded="true"]::after{transform:rotate(45deg);}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){
  .s15-fuss__auf::after{transition:none;}
}

/* ── 25 · Sanft einblenden bei «Bewegung reduzieren» (06.10.2026) ─────────
   Entscheid Fabrizio (WE-266): Wer «Bewegung reduzieren» eingestellt hat
   (Windows: «Animationseffekte» aus), sah techq.ch bisher völlig still. Jetzt
   blenden der Aufmacher und, beim Scrollen, die Abschnitte nur über die
   Deckkraft ein — ohne Versatz, ohne Unschärfe, ohne Bühne, wie Apple es bei
   reduzierter Bewegung macht. Bühne, Diashow und Wörter bleiben ruhig (§20).
   `s15-sanft` setzt start2-thema.js im Kopf; ohne Skript fehlt die Klasse, und
   die Seite steht fertig da. Alles mit !important: site.css schaltet bei
   «reduzieren» global `transition` und `animation` ab (`*{…!important}`);
   diese Regeln sind spezifischer und gelten nur hier. Die Notbremse aus §18
   (`s15-notfall` nach 6 s) gilt auch hier. */
@media (prefers-reduced-motion: reduce){
  html.s15-sanft[class*="tqv-"] [data-s15-intro]:not(.s15-da){
    opacity:0 !important;
    animation:s15-notfall .01s linear 6s forwards !important;
  }
  html.s15-sanft:not([class*="tqv-"]) [data-s15-intro]{
    animation:s15-sanft-ein .6s ease calc(.15s + var(--s15-i, 0) * .08s) backwards !important;
  }
  html.s15-sanft .s15-sanft-wartet{opacity:0 !important;}
  html.s15-sanft .s15-sanft-kommt{transition:opacity .6s ease var(--s15-sanft-d, 0s) !important;}
}
@keyframes s15-sanft-ein{from{opacity:0;}}
@media print{
  html.s15-sanft .s15-sanft-wartet{opacity:1 !important;}
}