/* ============================================================
   mobil.css — Handy- und Tabletregeln fuer techq.ch (Shop)
   Angelegt 2026-08-09 (CrackBookAir, Fabrizio), nach dem Muster
   von my.techq.ch/assets/mobil.css. Wird als LETZTES Stylesheet
   geladen — auch auf index/pakete, deren uebrige Stile inline
   im <head> stehen.

   Zwei Regeln, die hier ausnahmslos gelten:

   1. KEINE Regel ausserhalb einer @media-Bedingung. Der Desktop
      kann sich durch diese Datei nicht aendern.
   2. Jeder Selektor beginnt mit `html`. Die Inline-<style>-
      Bloecke von index/pakete/domains stehen im Dokument NACH
      diesem <link> und gewinnen sonst bei gleicher Spezifitaet.

   Breakpoints: 900 / 560 — dieselben wie im Kundencenter.
   Alle Werte am 2026-08-09 im echten Chrome bei 390 px gemessen
   (Geraeteemulation, matchMedia geprueft).
   ============================================================ */


/* ── 900px: die Bedienelemente der Kopfzeile ────────────────
   Gemessen: #navToggle 36x36 (einziger Weg zur Navigation),
   #cartBtn 36x36, "Anmelden" 94x33, Logo-Link 103x30.
   Richtwert Apple/Google: 44 px. Der Header ist 64 px hoch,
   44er-Ziele passen ohne Layoutaenderung hinein. */
@media (max-width: 900px) {
  /* flex: none wie bei my: ein Flex-Kind darf sonst unter
     seine Breite schrumpfen. */
  html .nav-toggle,
  html #navToggle { width: 44px; height: 44px; flex: none; }
  html #cartBtn { width: 44px; height: 44px; }
  /* Der Behaelter heisst auf allen Seiten .nav-auth-area
     (id navAuthArea) — es gibt KEINE .nav-actions im Markup. */
  html .nav-auth-area .btn { min-height: 44px; }
  /* Der Logo-Link traegt keine Klasse, nur aria-label; sein
     Inline-Stil setzt display:inline-flex. Klickflaeche
     waechst per Polster, der Header zentriert vertikal. */
  html header a[aria-label="techQ"] { padding-top: 7px; padding-bottom: 7px; }
}


/* ── 560px: Eingabefelder auf 16px ──────────────────────────
   Unter 16px zoomt iOS Safari beim Fokus hinein und verschiebt
   die Seite. .form-field steht in site.css auf 15px (Kontakt-
   formular, Kasse). Das Koederfeld gegen Bots traegt
   aria-hidden/tabindex=-1 und bleibt unberuehrt — die Regel
   aendert nur die Schriftgroesse, keine Flaechen. */
@media (max-width: 560px) {
  html .form-field input,
  html .form-field select,
  html .form-field textarea { font-size: 16px; }
}


/* ── 560px: Touch-Ziele auf 44px ────────────────────────────
   Gemessen am 09.08.: .tq-pill 75x35 (Laufzeit-Wahl auf
   /pakete), .billing-toggle button 75x35 (/vergleich),
   .tab-btn 72x32 (Home/Meine Produkte auf der Startseite),
   #wzReset 99x31 und #wzNext 100x36 (/paket-finder),
   .btn teils 33-43 hoch. Nur die Trefferflaeche waechst,
   Schriftgroessen bleiben.

   Die Fusszeile stand hier frueher mit `.soc 38x38` drin. Sie ist am
   12.08.2026 nach `assets/fusszeile.css` gewandert, samt der 44px-Regel —
   die Fusszeile hat jetzt EINEN Besitzer, und eine Regel, die auf eine
   Klasse zeigt, die es nicht mehr gibt, faellt niemandem auf. */
@media (max-width: 560px) {
  html .btn,
  html .tq-pill,
  html .billing-toggle button,
  html .tab-btn,
  html .wizard-head button,
  html .wizard-foot button { min-height: 44px; }

  /* Domainsuche: die fokussierbare Zeile (www. + Eingabe) war
     22 px hoch — ein Tipp in den grossen weissen Kasten daneben
     tat nichts. Die Zeile selbst waechst auf 44. */
  html .dm-search-feld { min-height: 44px; align-items: center; }

  /* Zeilen-Links der Leistungsliste (Startseite): 342x19.
     Polster + negativer Rand vergroessern die Trefferflaeche,
     ohne die Zeilenhoehe zu aendern. */
  html a.svc-spec-name { padding-block: 12px; margin-block: -12px; }

  /* Brotkrume "Start": 44x16. */
  html .hdr-link { padding-block: 12px; margin-block: -12px; }
}


/* ── 560px: Hero-Punkte des Startseiten-Sliders ─────────────
   Visuell 9x9 px und damit praktisch untreffbar. Die Quelle
   baut die Punkte als 26px-Pille mit transform:scaleX(0.346) —
   ein Polster-Ansatz wuerde mitskaliert (in site.css:544 steht
   genau so ein Fix, die Startseite laedt site.css aber nicht).
   Hier: Skalierung weg, Punkt ehrlich 12 px, unsichtbare
   Trefferflaeche 28x44 als Pseudo-Element, Abstand so, dass
   sich die Flaechen der Nachbarn nicht ueberlappen. */
@media (max-width: 560px) {
  html .hero-dots { gap: 16px; }
  html .hero-dot {
    transform: none;
    width: 12px; height: 12px;
    position: relative;
  }
  html .hero-dot.is-active { transform: none; width: 32px; }
  /* 12 px Punkt plus 2x16 ergibt rechnerisch genau 44 — abgetastet kamen am
     02.09.2026 aber 42 heraus. Zwei Pixel gehen an den Rundungen der
     Trefferpruefung verloren; mit 17 px liegt die Flaeche sicher darueber und
     bleibt bei `gap:16px` ueberlappungsfrei (12 + 2x17 = 46 gegen 16 Abstand
     waagrecht, senkrecht steht nichts daneben). */
  html .hero-dot::before {
    content: '';
    position: absolute;
    top: -17px; bottom: -17px; left: -8px; right: -8px;
  }
}


/* ── 560px: Schrift-Untergrenze 11.5px ──────────────────────
   Dieselbe Politik wie im Kundencenter: nur was UNTER 11px
   liegt, geht auf 11.5 — die bewusste Hierarchie (11.5er-
   Eyebrows gegen 14er-Fliesstext) bleibt.
   Gemessen unter 11px: .stage__kicker 10.5 (/ueberuns),
   .founder-photo-tag 10.5 (/ueberuns/team). */
@media (max-width: 560px) {
  html .stage__kicker,
  html .founder-photo-tag { font-size: 11.5px; }
}

/* Die Tastaturkuerzel-Chips des Paket-Finders (.wz-opt-key,
   10.5px, "1"-"5") beschreiben Tasten, die es auf dem Telefon
   nicht gibt. Auf Geraeten ohne Mauszeiger verschwinden sie,
   statt vergroessert zu werden. */
@media (hover: none) {
  html .wz-opt-key { display: none; }
}


/* ── 980px: Vergleichstabelle — Featurespalte bleibt stehen ──
   Bei 390 px zeigte /vergleich nur die Featurespalte, alle
   Wertespalten lagen unsichtbar hinter dem Scroller; einziger
   Hinweis war eine Textzeile. Die erste Spalte haftet jetzt
   links (position: sticky), die Wertespalten wischen darunter
   durch — man sieht immer, WAS man vergleicht. 980px ist die
   Schwelle, ab der site.css den Wisch-Hinweis einblendet.
   Die Gruppenzeilen (colspan=6) haften als Ganzes; begrenzte
   Breite, damit neben der Featurespalte immer die naechste
   Wertespalte anschneidet. */
@media (max-width: 980px) {
  html .compare th:first-child,
  html .compare tr:not(.group) td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface, #fff);
    text-align: left;
    max-width: 45vw;
    box-shadow: 1px 0 0 var(--border, #E4E8EE);
    /* Lange Featurenamen brechen um, statt ueber die haftende
       Kante in die Wertespalten zu laufen. */
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* Kopfzelle haftet in beiden Achsen. */
  html .compare thead th:first-child { z-index: 3; }
  /* Die Gruppenzeilen (colspan=6) koennen NICHT haften: die
     Zelle fuellt ihre Zeile vollstaendig, sticky hat keinen
     Spielraum. Ihr Titel steht in der Quelle links und ist
     damit in Ausgangslage sichtbar — beim Wischen wandert er
     mit, das ist der akzeptierte Kompromiss. */
}


/* ── 759px / Touch: Fusszeilen-Verweise auf 44px ────────────
   Am 02.09.2026 mit echter Trefferflaechen-Abtastung gemessen
   (`elementFromPoint`, nicht `getBoundingClientRect`): jeder
   `a.tqf-link` traf 38 px. Es sind 21 Verweise auf JEDER der
   21 Shop-Seiten — die groesste einzelne Fundstelle der Runde.

   `fusszeile.css:213` setzt dort `padding: 9px 0` und kommt zu
   38,3 px. Dieselbe Bedingung wie dort, damit das iPad hochkant
   (768 px, aber ein Finger) nicht durch die Maschen faellt. */
@media (max-width: 759px), (hover: none) {
  html .tqf-link { padding-block: 12px; }
}


/* ── 700px: Inhaltsverzeichnisse der Rechtstexte ────────────
   /agb 21, /avv 24, /datenschutz 21, /nutzungsrichtlinie 17
   Verweise mit 17 px Zeilenhoehe; `site.css:261` gibt der
   Zeile 3 px Polster, gemessen wurden 28 px Trefferflaeche.
   Das ist eine Navigationsliste, kein Fliesstext — die
   WCAG-Ausnahme 2.5.5 gilt hier nicht. */
@media (max-width: 700px) {
  html .legal-toc li { padding: 0; }
  html .legal-toc a { display: block; padding-block: 14px; }
}


/* ── 700px: /webspace ──────────────────────────────────────
   Die Seite entstand am 26.08.2026, nach der Mobilrunde vom
   09.08. — sie band `shop-mobil.css` nie ein und hatte am
   02.09. als einzige Shop-Seite gar keine Mobil-Schicht.
   Gemessen bei 390 px: 17 Stellen unter 11 px, der einzige
   Bestellknopf 30 px hoch, die Massstab-Pillen 51x39. */
@media (max-width: 700px) {
  /* Der Bestellknopf in der klebenden Leiste ist der einzige
     Weg von dieser Seite in die Kasse. `webspace.css:1770`
     setzt ihn unter 620 px auf 30 px Hoehe. */
  html .wsp-leiste__cta { height: 44px; padding-inline: 14px; }

  /* Die GB-Zahlen sind die Aussage des Massstabs, nicht seine
     Beschriftung — 10,5 px sind dafuer zu klein.
     UNTER 381 px bleibt es bei 10,5: dort stehen die fuenf
     Pillen 70 px auseinander, und 11,5 px liessen «150 GB»
     und «300 GB» ineinanderlaufen. Das ist in webspace.css
     ab Zeile 1780 schon einmal gemessen worden. */
  html .wsp-augenbraue,
  html .wsp-tipp__nr { font-size: 11.5px; }

  /* Die Pille ist das Bedienelement der ganzen Seite. */
  html .wsp-mass__stopp { min-height: 44px; justify-content: center; }
  html .wsp-seq__schalter-weg { display: inline-block; padding-block: 13px; }

  /* HIER STAND EINE KUERZUNG DER SZENENABSTAENDE — sie ist wieder
     draussen. Die vermeintlichen «460 px Leere» ueber dem ersten
     Titel sind der Aufmacher: `.wsp-auf` steht auf `min-height:
     100svh` mit `justify-content: center`, der Kopf beginnt bei
     y 243 und der Massstab liegt bei y 475–633 — also im ersten
     Bild. Ein voller Aufmacherschirm ist Absicht, kein Mangel.
     Nachgemessen am 02.09.2026, nachdem der Screenshot etwas
     anderes nahegelegt hatte. */
}

@media (min-width: 381px) and (max-width: 700px) {
  html .wsp-mass__gb { font-size: 11.5px; }
}

/* Unter 381 px stehen die fuenf Pillen nur noch 70 px auseinander
   (`webspace.css:1785` setzt die Zahl dort auf 9,5 px). 11,5 px
   liessen «150 GB» und «300 GB» ineinanderlaufen — gemessen. Also
   11 px, dafuer weniger Polster an der Pille: bei 320 px bleiben
   damit rund 18 px Luft zwischen den Nachbarn. */
@media (max-width: 380px) {
  html .wsp-mass__gb { font-size: 11px; letter-spacing: 0; }
  html .wsp-mass__stopp { padding-inline: 6px; }
}


/* ── 980px: die Vergleichstabelle auf /webspace ─────────────
   720 px breit in einem 348-px-Rahmen; die letzte Spalte
   «Web-XL» lag bei x 633–741, also weit ausserhalb. Der
   Rahmen scrollt zwar (`overflow-x:auto`), aber ohne haftende
   erste Spalte weiss man beim Wischen nicht mehr, WELCHE
   Zeile man liest. Dieselbe Loesung wie auf /vergleich. */
@media (max-width: 980px) {
  html .wsp-tab th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--w-papier, #fff);
    max-width: 45vw;
    min-width: 132px;
    box-shadow: 1px 0 0 var(--w-linie-f, #E4E8EE);
  }
  html .wsp-tab thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--w-papier, #fff);
    box-shadow: 1px 0 0 var(--w-linie-f, #E4E8EE);
  }
}


/* ── 700px: die letzten Kleinschriften auf /webspace ────────
   `webspace.css` verkleinert diese fünf Stellen in eigenen
   Handy-Bloecken auf 9,5–10 px (Z. 1441, 1474, 1559, 1751).
   Das ist unter der Grenze, ab der Text auf einem Telefon
   noch sicher lesbar ist; sie tragen Aussagen («Unsere
   Empfehlung», «Quin», «eine Website mit Bildern»), nicht
   blosse Verzierung. Auf 11,5 px angehoben und bei 320/360/
   390 px auf Querlauf nachgemessen. */
@media (max-width: 700px) {
  html .wsp-mass__klammer-text,
  html .wsp-seq__bedarf-wort,
  html .wsp-seq__grenze-links,
  html .wsp-seq__grenze-rechts,
  html .wsp-seq__zaehler,
  html .wsp-seq__zaehler span { font-size: 11.5px; }
}

/* Die Achsenbeschriftung derselben Grafik (0/60/120/180/240 —
   Gigabyte auf dem Massstab) stand auf 10 px. Sie steht als
   Zahlenreihe unter der Achse, `webspace.css:1438` verteilt sie
   per `transform` — die Breite der Zahl aendert die Verteilung
   nicht, nur ihre Lesbarkeit. */
@media (max-width: 700px) {
  html .wsp-seq__haupt span { font-size: 11.5px; }
}


/* Zwei weitere Stellen derselben Grafik, die erst beim Scrollen in
   Sicht kommen und darum in der ersten Runde nicht auffielen:
   der Fenstername («Web-M · Speicher», 10 px) und die Beschriftung
   des Umschalters («Messen nach», 10,5 px). */
@media (max-width: 700px) {
  html .wsp-seq__fenster-name,
  html .wsp-seq__schalter-wort { font-size: 11.5px; }
}


/* ── 900px: die Handy-Navigation ist eine Schublade ─────────
   Bis zum 02.09.2026 klappte `#navMobile` im Kopf auf: ohne
   Verdunkler, ohne `Escape`, ohne Riegel — die Seite scrollte
   unter dem offenen Menue weg — und ohne Wischgeste, waehrend
   beide Portale seit dem 08.08. eine haben.

   `nav.js` haengt die Leiste an den `<body>`, weil `<header>`
   ein `backdrop-filter` traegt und damit zum Bezugsrahmen fuer
   `position: fixed` wird; darin waere die Schublade 74 px hoch.

   `visibility` statt `display`, weil `display` nicht
   uebergangsfaehig ist: die geschlossene Leiste steht links
   ausserhalb und ist fuer Tastatur und Vorleser unsichtbar,
   faehrt aber weich herein. Die Verzoegerung auf `visibility`
   laeuft erst NACH der Fahrt ab. */
@media (max-width: 900px) {
  html .nav-mobile,
  html .nav-mobile.open {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(84vw, 320px);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: 1px solid var(--border);
    box-shadow: 0 0 40px rgba(0, 0, 0, .25);
    padding: max(18px, env(safe-area-inset-top)) 22px
             calc(22px + env(safe-area-inset-bottom));
  }
  html .nav-mobile {
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .24s ease, visibility 0s linear .24s;
  }
  html .nav-mobile.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .24s ease, visibility 0s;
  }
  /* Der Verdunkler liegt darunter und wird von nav.js erzeugt. */
  html .nav-verdunkler {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, visibility 0s linear .24s;
  }
  html .nav-verdunkler.open { opacity: 1; visibility: visible; transition: opacity .24s ease, visibility 0s; }
  /* 45 px waren es schon; hier nur der sichere Boden. */
  html .nav-mobile a { min-height: 44px; display: flex; align-items: center; }
  /* Kopfzeile der Schublade mit dem Kreuz — von nav.js erzeugt. */
  html .nav-mobile-kopf {
    display: flex;
    justify-content: flex-end;
    margin: -4px -6px 2px 0;
    flex: none;
  }
  html .nav-mobile-zu {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    border-radius: 8px;
  }
  html .nav-mobile-zu:focus-visible { outline: none; box-shadow: var(--ring); }
}

/* Ueber 900 px gibt es die Schublade nicht — sie steht am
   `<body>` und wuerde sonst als leerer Kasten mitzaehlen.

   `.open` MUSS mitgenannt werden: `.nav-mobile.open{display:flex}`
   steht in site.css und in den Inline-Bloecken der Startseite mit
   (0,2,0) und schlaegt ein blosses `html .nav-mobile` (0,1,1).
   Gemessen: bei 1440 px klappte die Leiste als 1440x461-Kasten
   auf, wenn die Klasse gesetzt war. Erreichbar war das zwar nicht
   (der Burger ist dort `display:none`) — aber eine Regel, die nur
   deshalb nicht auffaellt, weil niemand hinkommt, ist keine. */
@media (min-width: 901px) {
  html .nav-mobile,
  html .nav-mobile.open,
  html .nav-verdunkler,
  html .nav-verdunkler.open { display: none; }
}


/* ── 700px / Touch: was die korrigierte Abtastung noch fand ─
   Am 02.09.2026 hatte die erste Fassung des Prueftands zwei
   Fehler — sie zaehlte einen Schritt zu wenig (44 galt als 43)
   und lief ueber `e.contains(el)` bis zum Anschlag, weil
   `body.contains(link)` immer wahr ist. Nach der Korrektur
   blieben diese Stellen uebrig, alle bei 390 px gemessen: */
@media (max-width: 759px), (hover: none) {
  /* Das Logo in der Fusszeile, auf jeder Seite: 89 x 26. */
  html .tqf-logo { min-height: 44px; }
}

@media (max-width: 700px) {
  /* Brotkrume der Rechtstexte: «Start» 46 x 15. */
  html .breadcrumbs a { display: inline-block; padding-block: 15px; }
  /* Kopfzeilenverweise: 46 x 39 — 12 px Polster reichten nicht. */
  html .hdr-link { padding-block: 15px; margin-block: -15px; }
  /* /faq: die Sprungleiste ueber die neun Themen, 33 px. */
  html .hfr-sprung a { display: inline-flex; align-items: center; min-height: 44px; }
  /* /domains: Suchfeld 20 px hoch in einer 44-px-Huelle — wer
     neben die Zeile tippt, trifft nichts. Reiter 38, «alle 204» 30. */
  html .dm-search-feld input { align-self: stretch; min-height: 44px; }
  html .dm-tab { min-height: 44px; }
  html .dm-chip-mehr { display: inline-flex; align-items: center; min-height: 44px; }
  /* /webspace: Logo der eigenen Leiste 72 x 21, die drei
     Umschalter der Sequenz 34 px. */
  html .wsp-leiste__logo { min-height: 44px; align-items: center; }
  html .wsp-seq__schalter button { min-height: 44px; }
}


/* ── 700px: die letzten neun Stellen (02.09.2026) ───────────
   Alle mit abgetasteter Trefferflaeche gemessen, nicht mit
   `getBoundingClientRect`. Wo die Zeile im Fluss steht, waechst
   nur die Flaeche — negativer Rand haelt das Layout still,
   dieselbe Technik wie oben bei `.hdr-link`. */
@media (max-width: 700px) {
  /* /domains: «Suchen» am Ende jeder Endungszeile, 334 x 29. */
  html .dm-row-cta { display: inline-flex; align-items: center; min-height: 44px; }

  /* /webspace: «Alle Zahlen in der Tabelle», 42 px — zwei fehlten. */
  html .wsp-seq__schalter-weg { padding-block: 15px; }

  /* Mail-Adressen, die ALLEIN in ihrem Absatz stehen (Rechtstexte:
     «Missbrauch melden», Behoerdenauskunft). Im Fliesstext bleiben sie,
     wie sie sind — dort greift die WCAG-Ausnahme 2.5.5. */
  html .legal p > a[href^="mailto:"],
  html .legal p > strong > a[href^="mailto:"] {
    display: inline-block;
    padding-block: 14px;
    margin-block: -14px;
  }

  /* /status: «Melden Sie es uns» in der Zeile unter dem Verlauf, 16 px. */
  html #stVerlauf ~ div a { display: inline-block; padding-block: 14px; margin-block: -14px; }

  /* /vergleich: «Quin, der Assistent» in der Merkmalspalte, 17 px.
     Negativer Rand, damit die Tabellenzeile ihre Hoehe behaelt. */
  html .compare .feature-name a { display: inline-block; padding-block: 14px; margin-block: -14px; }
}

/* Die /ueberuns-Seiten lagen bis zum 02.09.2026 ausserhalb jeder
   Mobilmessung: `mobil_einhaengen.py` und `mobil_pruefstand.mjs`
   sahen nur die oberste Ebene. Beide gehen jetzt rekursiv, und
   dabei fielen drei eigenstaendige Verweise auf — keiner davon
   steht im Fliesstext. */
@media (max-width: 700px) {
  html .partner-link,
  html .founder-mail,
  html .partner-ghost-mail { display: inline-flex; align-items: center; min-height: 44px; }
}

/* /status: der Aufklapper «Verlauf als Tabelle» ist ein
   `<summary>` — kein Knopf, kein Verweis, kein Feld, und
   deshalb bis zum 02.09.2026 durch jede Selektorliste
   gefallen. Gemessen 342 x 16. Er ist der einzige Weg zur
   Tabellenansicht des Verlaufs. */
@media (max-width: 700px) {
  html #stVerlauf ~ * summary,
  html details > summary { min-height: 44px; display: flex; align-items: center; }
}
