/* == lueftungstool.com: Handy und Tablet (SEO-Paket 10.10.2026, Fix 90; Vorlage: Mobil-Pruefung vom 10.10.2026) ========== Laedt als letztes Stylesheet (nach abspann.css), ergaenzt app.css, motion.css, sicherheit.css, preise.css, faq.css und abspann.css und aendert dort nichts. Befunde und Messungen: /root/website-pruefung-20261009/pruefung-mobil.md (Nummern M-xx dort und hier), Gesamtdokument S14 und S18; Nachmessung im Paket: AENDERUNGEN.md Abschnitt 8. Enthalten: M-01 (Vergleich als eine Karte), M-02 (Normen-Band), M-03 (Rundgang-Ende), M-04 (ein Innenrand fuer alle Karten, Menue buendig), M-07 (Tablet, Kapitel 02), M-08 (Hero-Rahmen), S14 (Testknopf in der Kopfzeile am Handy). Nicht enthalten (Woche 1, Kais Entscheidung E9/E10): M-05 Tippflaechen 48 px, M-06 Preiskarten am Tablet. CSP style-src 'self': keine Inline-Stile; keine neuen Texte; keine Bewegung; Kopfzeilenhoehe (--kopf) unveraendert. ============================================================================================================== */ /* -- Abstandsraster am Handy (360 bis 600 px). Werte, die app.css schon einheitlich setzt, bleiben dort: Abschnitte 72 px oben und unten (Tablet und Desktop 104 px), Kartenraster 16 px, Seitenrand 18 px (.wrap). Neu als Token fuer die Regeln unten: Seitenrand (--s-rand) und Innenrand jeder Karte (--s-karte, Handy 20 px, sonst 24 px). Das Normen-Band bekommt am Handy denselben Innenabstand wie am Tablet und Desktop (22 px). -- */ :root{--s-rand:24px;--s-karte:24px;} @media (max-width:600px){:root{--s-rand:18px;--s-karte:20px;}} /* -- M-01 Vergleich Abo und Kauflizenz am Handy (bis 680 px): EINE Karte mit den Spaltenkoepfen einmal oben, je Zeile der Titel darueber und die zwei Betraege darunter, getrennt durch duenne Linien, vor den Summen eine kraeftigere. Die Marke „günstiger“ steht im Fluss direkt hinter ihrem Betrag (vorher absolut oben rechts in der Zelle: in der linken Spalte 16 px vor dem Betrag der rechten Spalte, aber 42 px hinter dem eigenen) und ist 12,5 statt 11,5 px gross. Die Spaltenkoepfe stehen schon im HTML (, bisher nur fuer Screenreader); die zehn Etiketten aus content: attr(data-opt) entfallen dafuer. Die Tabelle bleibt eine Tabelle (role-Attribute im HTML), app.js schaltet die Marke weiter per hidden. -- */ @media (max-width:680px){ .vgl__tabwrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);} .vgl__tab thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal;display:block;} .vgl__tab thead tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;padding:10px var(--s-karte); background:var(--bg-alt);border-bottom:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;} .vgl__tab thead th{display:block;padding:0;border:0;background:none;font-size:14.5px;color:var(--ink);} .vgl__tab thead th.vgl__ecke{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;} .vgl__tab tbody{display:block;} .vgl__sum{margin-top:0;} .vgl__tab tbody tr{gap:6px 16px;padding:12px var(--s-karte) 14px;background:none;border:0;border-radius:0;box-shadow:none;} .vgl__tab tbody tr + tr{border-top:1px solid var(--line);} .vgl__tab .vgl__sum tr:first-child{border-top:1px solid var(--line-strong);} .vgl__tab tbody td::before{content:none;} .vgl__w{align-items:center;gap:4px 8px;} .vgl__pill{position:static;padding:1px 8px;font-size:12.5px;line-height:1.5;} .vgl__bed > div,.vgl__ent{padding-left:var(--s-karte);padding-right:var(--s-karte);} } /* -- M-02 Normen-Band unter dem Hero am Handy: Text und Chips klebten an der oberen bzw. unteren Linie (0 px Innenabstand). Ursache: „.wrap{padding:0 18px}“ (app.css, bis 600 px) setzt auch padding-top/-bottom von „.band__in“ auf 0, derselbe Mechanismus wie bei „.foot__bot“ (Baustein 10). Die Doppelklasse gewinnt unabhaengig von der Reihenfolge. -- */ @media (max-width:600px){ .wrap.band__in{padding-top:22px;padding-bottom:22px;} .band__claim{text-wrap:pretty;} } /* -- M-03 Rundgang: Das letzte Kapitel brachte seinen Trenner-Innenabstand unten mit (40 px Handy, 56 px ab 601 px), der zum Abschnittsrand dazukam: 187 statt 147 px Leerraum vor dem Abschnitt Ergebnis (Tablet und Desktop 267 statt 211). -- */ #rundgang .kap:last-of-type{padding-bottom:0;} /* -- M-04 Karten am Handy mit einem Innenrand: Text begann je nach Karte 16 bis 26 px von der Kartenkante (Kacheln 24, Preiskarten 26, Nutzer-Kasten 24, Rechner 20, Sicherheit 22, Vergleich 16, FAQ-Kasten 16 px). -- */ @media (max-width:600px){ .tile,.step-c,.pusers{padding:var(--s-karte);} .pcard{padding:28px var(--s-karte) var(--s-karte);} .roi__in,.roi__out{padding:var(--s-karte);} .sich__k,.sich__k:nth-child(3n){padding:24px var(--s-karte) 26px;} .sich__fuss{padding-left:var(--s-karte);padding-right:var(--s-karte);} .fq__mehr{padding:16px var(--s-karte);} /* Handy-Menue buendig mit Logo und Seitentext (vorher 20 px Rand plus 4 px Innenabstand = 24 px statt 18 px) */ .mobile-menu.is-open{padding-left:var(--s-rand);padding-right:var(--s-rand);} .mobile-menu a{padding-left:0;padding-right:0;} .mobile-menu a.btn{padding-left:18px;padding-right:18px;} } /* -- S14 Testknopf in der Kopfzeile auch am Handy (360 bis 600 px): Am Handy stand zwischen Hero und Preisen rund 21 Bildschirme lang kein sichtbarer Knopf „Kostenlos testen“ (Pruefung Aufbau 4.4). app.css blendet .nav__try bis 600 px aus; ab 601 px ist er schon sichtbar. Unter 360 px reicht die Breite nicht (Logo, Knopf und Menue brauchen dort mehr als die Zeile hat), dort bleibt er aus. -- */ @media (min-width:360px) and (max-width:600px){ .nav__try{display:inline-flex;} } /* 360 bis 380 px: Logo 144 + Knopf 136 + Menue 44 px plus Abstaende und Seitenraender waren 380,5 px (gemessen 10.10.2026, bei 360 px 2,5 px seitliches Scrollen). Etwas kleinere Wortmarke, schmalerer Knopf, engere Abstaende: rund 355 px. */ @media (min-width:360px) and (max-width:380px){ .nav__in{gap:8px;} .brand__wm{font-size:18px;} .nav__try{padding:0 10px;font-size:13px;} } /* -- Kleinste Handys (bis 340 px, etwa 320 x 568): Die H1 stand bei 32 px in 5 Zeilen, „für“ allein in einer Zeile (Satzspiegel 284 px, „Protokoll-Software für“ braucht bei 32 px rund 315 px; gemessen 10.10.2026). Bei 28 px steht sie in 3 Zeilen wie ab 360 px; der Hauptknopf rueckt dabei weiter ins erste Bild. -- */ @media (max-width:340px){ .hero h1{font-size:28px;} } /* -- M-07 Randleiste (seitliche Rahmen-Beschriftung) bei 601 bis 1199 px: Das Handy in Kapitel 02 ragte 18 px in den 24 px breiten Seitenrand und lag damit unter der Randleiste (768 px: 9,5 x 60 px Ueberdeckung). Es ragt jetzt 6 px hinaus wie am Handy. -- */ @media (min-width:601px) and (max-width:1199px){ #kap-reinigung .kap__bild .tel{right:-6px;} } /* -- M-08 Hero-Rahmen am Handy: Hoehe calc(100svh - 80px) (motion.css bis 600 px). Safari zeigt beim Laden Adress- und Werkzeugleiste, svh ist dann kleiner als der Bildschirm; nachgestellt mit 559 bzw. 548 px Fensterhoehe liefen untere Rahmenlinie und Ecken quer durch „Preise ansehen“. Mindesthoehe: der Rahmen umschliesst den Inhalt des Hero immer; reicht der Bildschirm nicht, liegt seine Unterkante unter dem Fensterrand und erscheint beim Scrollen. -- */ @media (max-width:600px){ .hero .reel{min-height:min(calc(100% - 20px),620px);} } /* -- Nachbesserung Runde 1 (10.10.2026), Befund darstellung 1: faq.css setzt fuer jeden Link im FAQ-Abschluss white-space:nowrap (gedacht fuer die Mailadresse). Der Verweis „Alle 108 Fragen nach 12 Themen, mit Suche“ (Fix 89) blieb dadurch einzeilig (291 px) und schob die Startseite bei 320 px um 13 px, bei 300 px um 33 px seitlich ueber den Rand (scrollWidth 333; in der Handy-Emulation wuchs der Layout-Viewport auf 333 px). Nur die Mailadresse bleibt in einer Zeile. Gilt fuer Startseite und /fragen/ (beide laden mobil.css nach faq.css). -- */ .fq__mehr a{white-space:normal;} .fq__mehr a[href^="mailto:"]{white-space:nowrap;} /* -- Nachbesserung Runde 1 (10.10.2026), Befund darstellung 2: Die Kopfzeile schaltet erst bis 820 px auf das Menue um, braucht nebeneinander aber 889 px Inhalt (Marke 156, Links 447, Anmelden 95, Testen 136, Abstaende 56) plus 48 px Seitenrand. Bei 821 bis 912 px lief die Seite seitlich ueber (834 px, iPad Pro 11 Zoll hochkant: 79 px), bei 913 bis 937 px klebte „Kostenlos testen“ am rechten Rand (bei 921 px 7,7 statt 24 px). Bis 940 px: „Anmelden“ ausgeblendet (wie bis 820 px; der Link steht weiter in der Fusszeile), Links mit 8 statt 12 px Innenabstand. Gemessen bei 821 px: Marke zu Links 50 px, Links zu Knopf 24 px, rechts 24 px. Ein laengeres Menue bis 940 px ginge nur auf der Startseite, /fragen/ hat kein Menue-Skript. -- */ @media (min-width:821px) and (max-width:940px){ .nav__login{display:none;} .nav__links a{padding:8px 8px;} } /* == Folgeschritt 11.10.2026, Fix 100 (AUFTRAG.md A6): Kauflizenz-Karte mit zwei Punkten und dem Verweis „Was passiert, wenn ich die Wartung beende?“ (fragen/#faq-wartung-beenden). Die Liste waechst nicht mehr (flex:none), der Verweis nimmt den Platz bis zum Knopf, damit die Knoepfe der drei Karten auf einer Hoehe bleiben. Ziel des Verweises mindestens 24 px hoch (WCAG 2.2, 2.5.8). == */ .pcard .list.pcard__liste{flex:none;margin-bottom:14px;} .pcard__mehr{flex:1;margin:0 0 24px;font-size:14px;line-height:1.45;} .pcard__mehr a{display:inline-block;padding:3px 0;color:var(--brand-strong);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;} .pcard__mehr a:hover{text-decoration-thickness:2px;} /* == Folgeschritt 11.10.2026, Fix 101 (AUFTRAG.md A7): Vergleich ohne graue Randhinweise. Zeilen „Einmalig“ und „Pro Monat“, darunter der schmale Zwischentitel „Gesamtkosten bis dahin“ (tr.vgl__zt), dann „Nach 1 Jahr“ bis „Nach 3 Jahren“. Am Laptop eine Tabellenzeile ueber alle drei Spalten, bis 680 px eine Zeile der Karte. == */ .vgl__tab .vgl__zt th{padding-top:12px;padding-bottom:4px;border-bottom:0;font-size:12.5px;font-weight:600;line-height:1.35;letter-spacing:.02em;color:var(--dim);} @media (max-width:680px){ .vgl__tab .vgl__zt{display:block;padding:11px var(--s-karte) 0;} .vgl__tab .vgl__zt th{display:block;padding:0;} .vgl__tab .vgl__zt + tr{border-top:0;padding-top:6px;} } /* == Folgeschritt 11.10.2026, Fix 102 (AUFTRAG.md A8): „Läuft auf Tablet, Handy und PC“ ist 40 px laenger als „Läuft auf Tablet & Handy“. Ab 1200 px (Hero zweispaltig, Fix 96) ist die Textspalte 508 px breit, die drei Haken brauchen mit 20 px Abstand 511 px, „Server in der EU“ rutschte in eine zweite Zeile (Hero 18 px hoeher). Mit 14 px Abstand bleiben sie wie bisher in einer Zeile (499 px). Darunter unveraendert. == */ @media (min-width:1200px){ .hero .ticks{column-gap:14px;} }