/* obs-mk-handy.css -- Was die Marketingseiten auf einem Handy brauchen. 06.09.2026, Kai: "Ueberpruefe alle seiten ob sie auch auf einem Handy laufen. also marketing meine ich." Gemessen wurde jede der 37 Marketingseiten in einem Rahmen von 390px, 360px und 320px Breite: gesucht war, ob das Dokument breiter wird als der Schirm -- also ob man seitlich wischen muss, um den Text zu Ende zu lesen. Vier Stellen sind dabei aufgefallen, jede aus einem eigenen Grund. Sie stehen unten, jeweils mit der Seite, auf der sie zuerst auffiel. Eine eigene Datei und kein Anhang an obs-mk2.css: dort steht das Aussehen, hier steht nur, was der schmale Schirm daran aendert. Wer wissen will, warum eine Seite auf dem Handy anders aussieht, muss dann nur hier suchen. -------------------------------------------------------------------------- */ @media (max-width: 760px) { /* ------------------------------------------------------------------------ 1. LANGE WOERTER (zuerst auf /avv). Die Ueberschrift dort heisst "Auftragsverarbeitungsvertrag": 28 Buchstaben, ein Wort. Bei 375px Textbreite passt es in keine Zeile, und weil nichts es brechen durfte, ragte es hinaus und schob das ganze Dokument 74px nach rechts -- auf jeder Seite dieser Datei musste man wischen. Deutsch baut solche Woerter am laufenden Band, deshalb eine Regel fuer alle Ueberschriften statt eines Handgriffs an dieser einen. WARUM "anywhere" UND NICHT "break-word": beide brechen ein Wort erst, wenn es sonst nicht passt. Aber nur anywhere zaehlt dabei auch die Mindestbreite des Kastens herunter. Mit break-word blieb die Startseite bei 360px genau 13px zu breit: das Gitter um die Schlagzeile mass sich weiter am ungebrochenen laengsten Wort (257px), obwohl die Schrift selbst umbrach. Gemessen am 06.09.2026, beide Fassungen nacheinander. ------------------------------------------------------------------------ */ h1, h2, h3, h4, .mk2-riese, .mk2-gross, .mk2-kachel-kopf, .mk2-gegen-kopf { overflow-wrap: anywhere; } /* Ein Trennstrich ist schoener als ein harter Bruch. hyphens braucht das lang-Attribut, und das steht in der Huelle (html lang="de"). NUR die Ueberschrift, nicht der Absatz darunter: dort stehen die langen Woerter, die sonst die Seite schieben. Im Vorspann dagegen trifft hyphens jedes zweite gewoehnliche Wort -- auf /von-null-auf-live las sich das am 07.09.2026 wie eine Zeitungsspalte ("zei-gen", "Zah-len"). Ein Vorspann darf ausfransen, eine Ueberschrift darf nicht ueberlaufen. */ .obs-mk-seitenkopf h1 { hyphens: auto; } /* ------------------------------------------------------------------------ 2. BREITE TABELLEN (zuerst auf /preise). Die Vergleichstabelle dort ist 510px breit und hatte -- anders als die Tabellen auf /avv, die in einem .obs-u-scrollx stehen -- keinen Kasten zum Schieben um sich. display:block macht die Tabelle selbst zu dieser Box. Das kostet die Tabellenbreitenrechnung, die Spalten richten sich dann nach ihrem Inhalt -- bei drei Spalten mit kurzen Zellen ist das genau das Gewuenschte, und es spart ein zusaetzliches div in jeder Seite, die eine Tabelle hat. ------------------------------------------------------------------------ */ .mk2-band table, .obs-mk-band table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 560px) { /* ------------------------------------------------------------------------ 2b. DIE ZUSATZLISTE AUF /preise WIRD ZUR LISTE. Der Schiebekasten von oben behebt zwar den Querlauf, taugt hier aber trotzdem nichts: sichtbar bleiben Name und ein angeschnittener Satz, der PREIS steht ausserhalb. Auf einer Preisseite ausgerechnet die Preisspalte wegzuschieben ist die falsche Rettung. Deshalb wird aus jeder Zeile ein kleiner Block: Name, Beschreibung, Preis untereinander. Die Kopfzeile faellt weg -- ueber "Eigene Domain / Deine Domain zeigt auf die Instanz / 5 EUR" muss niemand "Zusatz, Was er tut, Preis" lesen, um zu verstehen, was er sieht. Deshalb aria-hidden nicht noetig: display:none nimmt die Zeile auch fuer Vorleseprogramme heraus, und die Zellen bleiben in ihrer Reihenfolge lesbar. ------------------------------------------------------------------------ */ .obs-mk-vergleich { display: block; overflow: visible; } .obs-mk-vergleich thead { display: none; } .obs-mk-vergleich tbody, .obs-mk-vergleich tr { display: block; } .obs-mk-vergleich tr { padding: .95rem 0; border-bottom: 1px solid var(--color-border, #e6e6ea); } .obs-mk-vergleich tr:last-child { border-bottom: 0; } .obs-mk-vergleich td { display: block; border: 0; padding: 0; text-align: left; } .obs-mk-vergleich td:first-child { font-weight: 600; } .obs-mk-vergleich td.ist-still { margin: .2rem 0 .45rem; } .obs-mk-vergleich td.obs-num { text-align: left; font-weight: 600; font-variant-numeric: tabular-nums; } } @media (max-width: 480px) { /* ------------------------------------------------------------------------ 3. DER RAND DER STARTSEITE. .obs-hero-main traegt 56px Polster links und rechts. Das sind 112px, die nie kleiner werden -- auf einem 360px-Schirm bleiben fuer die Schlagzeile 233px uebrig, und die braucht mehr. Auf breiten Schirmen ist das Polster richtig, hier nicht: also erst ab dieser Breite kleiner. ------------------------------------------------------------------------ */ .obs-hero-main { padding-left: 24px; padding-right: 24px; } } @media (max-width: 380px) { /* ------------------------------------------------------------------------ 4. DAS CAPTCHA AUF /kontakt. Der Kasten von Google ist 304px breit und laesst sich nicht verkleinern -- er kommt als fremder Rahmen mit fester Groesse. Bei 320px Schirm bleiben nach dem Seitenrand 249px, also ragte er 27px hinaus. Verkleinern statt abschneiden: der Kasten bleibt vollstaendig bedienbar, nur eben etwas kleiner. Die Hoehe muss von Hand nach: eine Skalierung aendert die Zeichnung, nicht den Platz, den das Element im Fluss belegt -- ohne die Zeile stuende unter dem Captcha ein Loch von 14px. ------------------------------------------------------------------------ */ .g-recaptcha { transform: scale(.8); transform-origin: left top; height: 62px; } }