/* ========================================================= 3U REINIGUNG – RESPONSIVE (Runde 12) Die Website ist eine 1440-px-Bühne: jedes Element sitzt absolut auf seiner Figma-Koordinate. Das ist der Grund für die Genauigkeit – und der Grund, warum Responsive eine eigene Ebene braucht statt verstreuter Ausnahmen. DIE STUFEN STAMMEN AUS DER VORLAGE SELBST. Die Figma-Datei enthält zu jedem Abschnitt Responsive-Vorlagen in den Breiten 1885 / 1440 / 1275 / 898 / 788 / 555 / 320 px, mit roten Mass-Anmerkungen. Daraus abgelesen: Breite Seitenrand Textspalte H1 Abschnittstitel 320 21 278 34 34 555 89 377 34 34 788 89 610 55 34 898 144 610 55 34 1440 144 1152 89 55 Anmerkungen im File: "w=21–89px" (Rand 320→555), "w=89–144px" (Rand 788→898), "w=233–377px" / "w=377–610px" / "w=610–987px" (Textspalte). Daraus ergeben sich drei Ränder – 21, 89, 144 – und eine Textspalte, die einfach der Fensterbreite abzüglich der Ränder folgt, nach oben begrenzt auf 987. Genauso wichtig: die Vorlagen sind ab 898 px abwärts durchgehend EINSPALTIG. Genau so ist es hier gebaut – ein Element pro Zeile, keine halb gefüllten Reihen. ab 1276 px Bühne, die Vorlage 1:1 (1280 / 1366 / 1440 / 1920) 898–1275 Fluss, Rand 144 555–897 Fluss, Rand 89 bis 554 Fluss, Rand 21, kleinere Überschriftenstufe Grundsatz: NICHTS in diesem File wirkt oberhalb von 1275 px – ausser der einen Beschneidungs-Korrektur unten. Die geprüfte Desktop-Darstellung bleibt unangetastet. ========================================================= */ :root { --gutter: 144px; /* Seitenrand der Vorlage */ --col: 1152px; /* Breite der Inhaltsspalte */ } /* ========================================================= 0. DER ABSTANDS-TAKT (Runde 13) Die Masse stehen in den Vorlagen als graue Platzhalter-Rechtecke drin - man kann sie direkt ablesen. Gemessen an "T3 555 px" (Node 2:86566) und "T20 320 px" (Node 2:87111), den beiden Kalkulator-Vorlagen: Rechteck 555 320 ------------------------------------------------ Luft ueber dem ersten Inhalt 233 144 Luft unter dem letzten Inhalt 377 233 zwischen zwei Frageblöcken 89 89 Titel -> Auswahl darunter 8 8 Einleitungstext -> erster Block 144 144 letzter Block -> Schaltflaeche 144 144 Schaltflaeche 233x55 233x55 Daraus - und aus deiner Vorgabe "zwischen Abschnitten/Bereichen immer mindestens 233 px" - ergibt sich EIN Satz Variablen, der auf jeder Seite und in jeder Breite dieselbe Bedeutung hat. Alles Weitere im File greift nur noch auf diese Variablen zu; dadurch ist der Takt ueberall gleich, statt an 40 Stellen einzeln gesetzt zu sein. ========================================================= */ @media (max-width: 1275px) { :root { --sp-area: 233px; /* zwischen zwei BEREICHEN (Vorgabe: mind. 233) */ --sp-block: 89px; /* zwischen zwei Bausteinen EINES Bereichs */ --sp-title: 34px; /* Abschnittstitel -> erster Inhalt darunter */ --sp-kick: 13px; /* Titel/Wert -> zugehoerige Kleinzeile darunter (Desktop misst 12.6 - derselbe Eindruck) */ --sp-icon: 55px; /* Zeichen -> Titel (Desktop 55) */ --sp-text: 21px; /* Absatz -> Absatz */ --sp-link: 34px; /* Text -> Pfeil-Link */ --sp-top: 233px; /* Luft unter der Kopfzeile (Vorlage 555) */ --sp-bot: 377px; /* Luft vor dem Gold-Band (Vorlage 555) */ } } /* Unter 555 faehrt die Vorlage die beiden Seitenraender eine Fibonacci-Stufe herunter (144 statt 233 oben, 233 statt 377 unten). Der Abstand ZWISCHEN Bereichen bleibt bei 233 - so hast du es vorgegeben, und es ist auch der auffaelligere Wert. */ @media (max-width: 554px) { :root { --sp-top: 144px; --sp-bot: 233px; } } /* ========================================================= 0b. DIE "100 %" IM INTRO (Runde 15/16, Punkt 1) Nachgemessen im Figma-Rahmen "Intro" (2:21517), Gruppe 17322: x = -144 links angeschnitten, wie jede blasse Grafik Breite = 931 Hoehe = 377 dieselbe Hoehe wie "01", "1a", "Residential" ... Pfad "%" = 377 hoch, die Ziffern 374 und 367 -> das Prozentzeichen hat DENSELBEN Schriftgrad wie die Ziffern, nicht 0.62em wie auf dem Desktop Linie = y607 von 798 = 76.07 % und laeuft durch die Mitte der Gruppe (421..798) Groesse und Hoehenlage setzt effects.js, weil beides von der Schrift abhaengt und gemessen werden muss (siehe fitIntroPercent). Die Werte hier sind die Rueckfallebene, falls kein JavaScript laeuft. NUR im Fluss. Ab 1276 px bleibt das Intro unveraendert die Fassung aus v25; in effects.css ist keine Eigenschaft angefasst. ========================================================= */ /* Die Intro-Zahl steht jetzt vollstaendig in effects.css/effects.js - sie gilt auf allen Breiten gleich (Runde 17, Punkt 1). */ /* ========================================================= 1. BÜHNE (1276–1439) – eine Korrektur Die Unterseiten-, Kalkulator- und Services-Bühne stand mit "margin:0 auto" bei zu schmalem Fenster LINKS an und ragte rechts hinaus – das ergab einen waagrechten Scrollbalken. Sie wird jetzt wie die Startseiten-Bühne mittig beschnitten: der Inhalt (x144–x1296) bleibt vollständig sichtbar, nur der dekorative Rand geht. ========================================================= */ @media (max-width: 1439px) { /* hidden zuerst als Rueckfallebene fuer Browser ohne "clip" (Safari < 16), clip danach fuer alle anderen - clip schneidet gleich ab, macht die Seite aber nicht zum Scrollbereich und laesst position:sticky arbeiten. */ main.sub, main.pk, main.svc, main.blog { overflow-x: hidden; overflow-y: visible; } main.sub, main.pk, main.svc, main.blog { overflow-x: clip; overflow-y: visible; } .sub-hero, .sub-canvas, .pk-stage, .svc-canvas { margin-left: calc(50% - 720px); margin-right: calc(50% - 720px); } } /* ========================================================= 1b. BÜHNE (1296–1439) – Runde 17, Punkt 10 "ab 1440 px so belassen, dann unter 1440 px noch so belassen, bis der linke Rand/Einzug (144 px breit) erstmals schmäler wird, dann so lassen wie es jetzt ist." Mittig beschnitten schrumpft der linke Rand sofort unter 1440 mit (bei 1300 px bleiben statt 144 nur 74). Links angeschlagen bleibt er dagegen exakt 144, solange der Inhalt hineinpasst - er endet auf x1296, es reicht also bis 1296 px Fensterbreite. Beschnitten wird dann nur der rechte, rein dekorative Rand. Unterhalb von 1296 greift wieder die Regel darüber (mittig beschnitten), unterhalb von 1276 der Fluss - "dann so lassen wie es jetzt ist". ========================================================= */ @media (min-width: 1296px) and (max-width: 1439px) { .sub-hero, .sub-canvas, .pk-stage, .svc-canvas { margin-left: 0; margin-right: calc(100% - 1440px); } .home-stage { left: 0; transform: none; } /* Runde 37, Punkt 6.3: In diesem Band steht die Buehne links angeschlagen, rechts wird abgeschnitten. Die cremefarbene Spalte des Kalkulators reicht in der Vorlage bis x1440, also bis an die Buehnenkante - bei 1360 px Fensterbreite fielen davon 80 px weg, und mit ihnen der rechte Teil der Zusammenfassung samt Preiszahlen. Die Spalte haengt deshalb hier an der SICHTBAREN Kante statt an der Buehnenkante. Ihre Breite, ihr Inhalt und ihr Verhalten bleiben unveraendert; sie rueckt nur um den abgeschnittenen Betrag nach links. --klippe setzt effects.js (setzeDekoSkala). Ab 1440 px ist der Wert 0, dort aendert sich also nichts. */ .pk-rail, .pk-embed .pk-rail, .pk-stage .pk-rail { left: auto; right: var(--klippe, 0px); } } /* ========================================================= 1c. BÜHNE (1276–1295) – dieselbe Sache, andere Rechnung Unterhalb von 1296 wird die Buehne MITTIG beschnitten; rechts faellt also nur die Haelfte des Ueberschusses weg. Die Zusammenfassung des Kalkulators rueckt entsprechend um die halbe Klippe. ========================================================= */ @media (min-width: 1276px) and (max-width: 1295px) { .pk-rail, .pk-embed .pk-rail, .pk-stage .pk-rail { left: auto; right: calc(var(--klippe, 0px) / 2); } } /* ========================================================= 2. FLUSS (bis 1275) ========================================================= */ @media (max-width: 1275px) { :root { --col: min(100%, 987px); } /* ---------- Bühne wird Fluss ---------- Eine Spalte, mittig, ein Element pro Zeile. ZUERST die festen Rahmenhoehen aufloesen: .home-body ist auf der Buehne 4501 px hoch, .svc-canvas 1830. Im Fluss waechst der Inhalt darueber hinaus - der FAQ-Bereich darunter startete sonst weiterhin bei 4501 und lag damit UEBER den Bewertungen. */ .home-body { height: auto !important; } .home-hero, .sub-hero, .svc-canvas, .svc-row, .svc-photo, .home-tail { height: auto !important; } /* Im Fluss ragt nichts mehr seitlich heraus - deshalb hier KEIN overflow-Beschnitt. Wichtig: sobald eine Achse hidden/clip/auto ist, macht der Browser aus der anderen automatisch "auto" und das Element wird zum eigenen Scrollbereich. Genau das wollen wir hier nicht. */ main.sub, main.home, main.pk, main.svc, main.blog { overflow-x: visible; overflow-y: visible; } .sub-canvas, .home-stage { position: relative; left: auto; top: auto; transform: none; width: 100%; max-width: none; height: auto !important; margin: 0; padding: 0 var(--gutter); overflow: visible; display: flex; flex-direction: column; align-items: stretch; /* KEIN gap: der Takt kommt aus den Aussenabstaenden weiter unten, weil er je nach Nachbarschaft anders ist (Bereich 233, Baustein 89, Titel 34, Kleinzeile 8). Ein pauschales gap wuerde sich dazu addieren. */ gap: 0; /* Seiten ohne Foto-Hero beginnen direkt unter der festen Kopfzeile - sonst laege der erste Block darunter. */ padding-top: var(--sp-top); padding-bottom: var(--sp-bot); } /* Nach einem Foto-Hero hat der Hero die Luft schon selbst; der Abstand zum ersten Titel ist dann ein BEREICHS-Abstand. */ .sub-hero + .sub-canvas, .home-body .home-stage { padding-top: var(--sp-area); } /* Jedes Kind der Bühne rutscht in den Fluss. Die Reihenfolge im Quelltext entspricht der Reihenfolge in der Vorlage (auf allen Seiten geprüft), die Blöcke stehen also automatisch richtig. */ /* Diese Regel darf NICHT spezifischer werden. Sie steht vor den Regeln fuer Linien und blasse Grafiken, die ihr mit gleicher Spezifitaet und "!important" widersprechen - gewinnen soll dort die spaetere Regel. (Runde 22: ein ":not(.sub-numeral)" hier hat die Spezifitaet erhoeht; dadurch fielen die Rasterlinien in den Fluss, die senkrechte Linie wuchs bei jeder Nachmessung mit der Seite und die Seite schaukelte sich auf 640 000 px hoch. Die Vorlagenmasse der Grafiken setzt darum effects.js als Inline-Wert - siehe fitDekoGroesse().) */ .sub-canvas > *, .sub-canvas > .band > *, .home-stage > *, .home-stage > .band > * { position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto !important; max-width: var(--col); /* Ohne min-width:0 kann ein Flex-Kind nicht unter seine Inhaltsbreite schrumpfen - die 21 Bewertungskarten haetten die Seite sonst auf 6279 px aufgezogen, statt in ihrer Reihe zu scrollen. */ min-width: 0; height: auto !important; margin: 0; } /* Auch INNERHALB der Blöcke sitzt manches absolut auf Figma-Abständen. Das muss ebenso in den Fluss – sonst hat der Block die Höhe 0 und sein Inhalt überlagert den nächsten. */ /* Runde 20, Punkt 7 - HIER lag der Safari-Fehler auf /jobs. Der Link dort ist als ausgezeichnet - er ist also SELBST ein Baustein. Damit trifft diese Regel sein Pfeil-Feld (.arrow-icon) und setzt dessen Breite auf "auto". Das SVG darin hat "width: 100%" - eine Prozentangabe, deren Bezugsgroesse damit selbst unbestimmt ist. Die Browser loesen das verschieden auf: Chrome nimmt das Seitenverhaeltnis aus dem viewBox -> 21 px Safari nimmt die CSS-Vorgabe fuer ersetzte Elemente -> 300 px Bei 300 px Feldbreite wird der 21 px breite Pfeil darin MITTIG gezeichnet (preserveAspectRatio) - er steht dann 140 px vom linken Rand entfernt, und der Text beginnt erst 312 px weiter rechts und laeuft aus dem Bild. Genau dieses Bild zeigt der Screenshot; nachgerechnet stimmen beide Werte auf wenige Pixel. ":not(.arrow-icon)" nimmt das Pfeil-Feld aus der Regel heraus - damit gilt wieder ".arrow-link .arrow-icon { width: 21px }" aus effects.css. Zusaetzlich steht weiter unten ein Seitenverhaeltnis als zweite Absicherung, falls die Breite je wieder auf "auto" faellt. Dass es nur diesen einen Knopf betraf: er ist der einzige auf der ganzen Website, der zugleich .sub-block und .arrow-link ist. */ .sub-canvas .sub-block > *:not(.word):not(.word-grp):not(.arrow-icon), .sub-canvas .sub-sec > *:not(.word):not(.word-grp):not(.arrow-icon), .home-stage .home-svc > *:not(.word):not(.word-grp):not(.arrow-icon) { position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto !important; max-width: 100%; } /* Allgemeiner Abstand zwischen zwei aufeinanderfolgenden Kindern eines Blocks - ohne ihn stuenden sie im Fluss ohne jeden Abstand aneinander. */ /* Derselbe Takt INNERHALB eines Bausteins, mit denselben Variablen - damit ein h3 ueberall auf der Website denselben Abstand zu seinem Text hat und eine Kleinzeile ueberall denselben zu ihrem Titel. ":not(.word)" ist hier entscheidend (Runde 16, Punkt 6.4 / 6.5): Ist der Absatz SELBST ein .sub-block (z. B. die Einleitung ueber dem Kalkulator,

), dann sind seine direkten Kinder die Wortschachteln der Buchstaben-Animation. Ohne die Ausnahme bekam JEDE davon 21 px Abstand nach oben - und weil sie inline-block sind, wuchs damit jede Zeile: statt 30 px Zeilenabstand waren es 51. Auf dem Desktop fiel es nicht auf, weil die Regel dort nicht gilt. Genau das war gemeldet. */ .sub-canvas .sub-block > *:not(.word):not(.word-grp) + *:not(.word):not(.word-grp), .sub-canvas .sub-sec > *:not(.word):not(.word-grp) + *:not(.word):not(.word-grp), .home-stage .home-svc > *:not(.word):not(.word-grp) + *:not(.word):not(.word-grp) { margin-top: var(--sp-text); } /* Titel -> Kleinzeile: eng (Vorlage 8) */ .sub-canvas .sub-block > h2 + .sub-label, .sub-canvas .sub-sec > h2 + .sub-label, .sub-canvas .sub-block > h3 + .sub-label, .sub-canvas .sub-sec > h2.h-sektion + .sub-label, .sub-canvas .sub-sec > h3 + .sub-label, .home-stage .home-svc > h3 + .home-svc-label { margin-top: var(--sp-kick); } /* Kleinzeile -> Text. Runde 15, Punkt 6.6 / 9: hier standen 34 px, gemessen sind es auf dem Desktop aber 21 (Startseite) bzw. 22 (alle Unterseiten). Gemessen mit probe/lineheights.py, das jeden Untertitel-Abstand der Fluss-Ansicht dem der v25-Desktop-Fassung gegenueberstellt. */ .sub-canvas .sub-block > .sub-label + *, .sub-canvas .sub-sec > .sub-label + *, .sub-canvas > .sub-label + *, .sub-canvas > .sub-block.sub-label + * { margin-top: 22px !important; } /* 36: Beschriftung endet auf 209, Liste beginnt auf 245 (Figma). Seit Runde 55 heisst der dritte Block "Gewerbe & Bau" (vorher "Detailhandel & Gewerbe", zweizeilig, 21 px) - alle drei Beschriftungen sind jetzt auch auf dem Desktop einzeilig, ueberall 36 px. */ .home-stage .home-svc > .home-svc-label + * { margin-top: 36px; } /* Titel -> Text ohne Kleinzeile dazwischen. Runde 15, Punkt 6.6: auf dem Desktop sind das AUSNAHMSLOS 13 px - 25 von 25 Baustein-Titeln auf allen Unter- und Unter-Unterseiten (gemessen mit probe/h3dist.py gegen v25). Hier standen 21. */ .sub-canvas .sub-block > h2 + p, .sub-canvas .sub-sec > h2 + p, .sub-canvas .sub-block > h2 + div, .sub-canvas .sub-sec > h2 + div { margin-top: var(--sp-text); } .sub-canvas .sub-block > h2.h-sektion + p, .sub-canvas .sub-sec > h2.h-sektion + p, .sub-canvas .sub-block > h3 + p, .sub-canvas .sub-sec > h3 + p, .sub-canvas .sub-block > h3 + div, .sub-canvas .sub-sec > h3 + div { margin-top: var(--sp-kick); } .sub-canvas .sub-block > h2, .sub-canvas .sub-sec > h2, .sub-canvas .sub-block > h2.h-sektion, .sub-canvas .sub-sec > h2.h-sektion { margin-bottom: 0; } .sub-canvas .sub-block > h3, .sub-canvas .sub-sec > h3 { margin-bottom: 0; } .sub-canvas .sub-block > .sub-label, .sub-canvas .sub-sec > .sub-label { margin-bottom: 0; } .sub-canvas .sub-block > .arrow-link, .sub-canvas .sub-sec > .arrow-link, .home-stage .home-svc > .arrow-link { margin-top: var(--sp-link); } /* ---------- DER TAKT ---------- Grundregel: zwei aufeinanderfolgende Bausteine = --sp-block. Danach die Ausnahmen, von allgemein nach speziell. */ .sub-canvas > * + *, .home-stage > * + *, .sub-canvas > .band > * + *, .home-stage > .band > * + * { margin-top: var(--sp-block); } /* Ein Abschnittstitel EROEFFNET einen Bereich: darueber viel Luft, darunter wenig. Die Klassen (.home-h2, .sub-h1) stehen bewusst mit dran: home.css setzt "margin:0" ueber ".home-stage .home-h2" - das ist eine Klasse mehr als "> * + h2" und wuerde die Regel sonst schlagen. */ .sub-canvas > * + h2, .sub-canvas > * + .sub-h1, .home-stage > * + h2, .home-stage > * + .home-h2, .home-stage > * + .band, .sub-canvas > * + .band, .home-stage > .band + *, .sub-canvas > .band + * { margin-top: var(--sp-area); } .sub-canvas > h2 + *, .sub-canvas > .sub-h1 + *, .home-stage > h2 + *, .home-stage > .home-h2 + *, .sub-canvas > .band > h2 + *, .home-stage > .band > h2 + *, .home-stage > .band > .home-h2 + * { margin-top: var(--sp-title); } /* Auf den Unterseiten steckt der Abschnittstitel in einem Behaelter, er ist also kein direktes Kind der Buehne - "* + h2" greift dort nicht. Unterschieden wird am Titelrang: ein Behaelter mit h2 eroeffnet einen BEREICH, einer mit h3 ist ein Baustein darin. (Auf /kontakt tragen die drei Kontaktspalten dieselbe Klasse wie die Bereichstitel, nur eben ein h3 - die Klasse allein reicht als Unterscheidung also nicht.) BEWUSST ZWEI EIGENSTAENDIGE REGELN OHNE SELEKTORLISTE: kennt ein Browser :has() nicht (Safari vor 15.4), faellt genau diese eine Regel aus und der Abstand ist der normale Baustein-Abstand von 89 px. Stuende :has() in einer Liste, waere die GANZE Liste ungueltig. */ /* ":not(.h-sektion)" seit v48: Die aus einer h3 hervorgegangenen Abschnittstitel (siehe Abschnitt 33) sollen fuer die Takt-Logik weiterhin wie eine h3 zaehlen. Ohne diesen Ausschluss bekam der Baustein NACH einem solchen Titel 34 px statt 233 px. Fuer Seiten ohne "h-sektion" aendert der Zusatz nichts. */ .sub-canvas > * + *:has(> h2:not(.h-sektion)) { margin-top: var(--sp-area); } .sub-canvas > *:has(> h2:not(.h-sektion)) + * { margin-top: var(--sp-title); } /* ---------- Runde 15, Punkte 6.6 und 9 ---------- Ein Behaelter, in dem NICHTS ALS EIN TITEL steht, ist ein Abschnitts- kopf: darueber gehoert Bereichsluft, darunter ganz wenig. Auf dem Desktop nachgemessen (probe/gaps.py, /ueber-uns/preisliste): "Umzugsreinigung" -> Preiszeilen 13 (hier war 89) "Andere Reinigungsdienste" -> Text 13 (hier war 89) "Reinigungspreis berechnen" -> Einleitung 17 (hier war 34) Der Unterschied zu einem gewoehnlichen Baustein ist ":only-child" - auf /ueber-uns steht im selben Behaelter noch Kleinzeile und Text, dort bleibt es beim normalen Baustein-Abstand. EIGENSTAENDIGE REGELN OHNE SELEKTORLISTE: kennt ein Browser :has() nicht (Safari vor 15.4), faellt genau diese eine Regel aus und es bleibt beim bisherigen Abstand - nichts bricht. */ /* Ein h3-Abschnittskopf ist ein UNTER-Abschnitt, kein eigener Bereich: der Desktop misst davor 143-173 (Unter-Unterseiten), also 144. Die vollen 233 bleiben den echten Bereichen vorbehalten - dort, wo die Hintergrundfarbe wechselt, genau wie du es vorgegeben hast. */ .sub-canvas > * + *:has(> h3:only-child) { margin-top: 144px; } .sub-canvas > *:has(> h3:only-child) + * { margin-top: 13px; } /* Fuer h2 bleibt es beim Vorlagenwert 34: /ueber-uns misst dort genau 34. (Auf /preisliste sind es 17 - der kleinere der beiden Werte, 34 ist der haeufigere und der aus der Vorlage.) */ /* Ein alleinstehender h2-Kopf: Desktop misst darunter 11-17 auf den Unter-Unterseiten (Punkt 6.4) und 34 auf /ueber-uns - 21 ist der Fibonacci-Wert dazwischen und passt zu beiden. */ .sub-canvas > *:has(> h2:not(.h-sektion):only-child) + * { margin-top: 21px; } /* Ein .sub-sec mit eigenem Fliesstext ist ein BEREICH, kein Baustein - auf /ueber-uns misst der Desktop davor 212 bzw. 232. Die drei Kennzahlen dagegen (h3 + Kleinzeile, ohne Absatz) bleiben Bausteine. */ .sub-canvas > * + .sub-sec:has(p) { margin-top: var(--sp-area); } /* ---------- Runde 16, Punkt 6.6.2 ---------- "Der Abstand zwischen den einzelnen Abschnitten (von Titel+Text zum naechsten Titel+Text) sollte 144 px sein." Auf den Unter-Unterseiten besteht ein Abschnitt nur aus Titel und Text (h3 direkt gefolgt vom Textblock). Auf den Uebersichtsseiten steht dazwischen die gesperrte Kleinzeile - dort ist es ein echter Bereich. Der Desktop bestaetigt beides: /fensterreinigung 143 / 144 / 173 (Titel+Text) /reinigungsdienste 143 / 143 / 173 (Titel+Text) /services/residential 238 / 254 / 268 (mit Kleinzeile) /ueber-uns 184 / 232 (mit Kleinzeile) Unterschieden wird deshalb genau daran: folgt der Textblock UNMITTELBAR auf den Titel, ist es ein Baustein (144); liegt eine Kleinzeile dazwischen, bleibt es ein Bereich (233). EIGENSTAENDIGE REGEL OHNE SELEKTORLISTE (Safari vor 15.4 kennt :has() nicht; faellt sie aus, bleibt es beim bisherigen Abstand). */ .sub-canvas > * + .sub-sec:has(> h3 + .sub-text) { margin-top: 144px; } /* ---------- Der Seitentitel der Unter-Unterseiten ---------- Zwei der fuenf Seiten tragen ihn als h1 mit 55 px, die anderen drei als h2 mit 34 - "Der H1 Titel der anderen drei Unter-Unterseiten ist zu klein. Bitte alle Unter-Unterseiten gleich machen." Im Fluss bekommen alle fuenf denselben Grad und denselben Abstand zum Text darunter (13, wie bei jedem Untertitel dieser Seiten). Auf dem Desktop bleibt alles wie in der Vorlage. */ .sub-canvas .sub-pagetitle { font-size: 55px !important; line-height: 1.1 !important; } .sub-canvas > *:has(> .sub-pagetitle) + * { margin-top: 13px !important; } /* Zwei Preistabellen, die zusammengehoeren (Stundenansatz / Fixpreis): Desktop 7, hier der naechste Fibonacci-Wert. */ .sub-canvas > .pair + .pair, .sub-canvas > .price-grid + .price-grid, .sub-canvas > .sub-text + .price-grid, /* Runde 17, Punkt 6.6.2: auf /umzugsreinigung folgt die Preisauflistung als .pair auf den Text darueber - der Baustein-Abstand von 89 war dort zu gross, es gilt derselbe enge Wert wie bei den anderen Preislisten. */ .sub-canvas > .sub-text + .pair, .sub-canvas > .sub-text + .sub-text { margin-top: 13px; } /* Einleitungstext -> Formular: Desktop misst 126, die Vorlage 144. */ .sub-canvas > * + .kf { margin-top: 144px; } /* Die Deko-Elemente (Linien, blasse Ziffern) stehen im Quelltext VOR dem Inhalt, liegen aber absolut und damit ausserhalb des Flusses. Ohne diese Regel bekaeme der erste echte Baustein von ihnen einen Bereichs-Abstand ZUSAETZLICH zur Luft, die die Buehne oben ohnehin schon hat. */ .sub-canvas > .sub-line + *, .sub-canvas > .sub-numeral + *, .svc-canvas > .svc-line + * { margin-top: 0 !important; } .sub-canvas > .sub-line, .sub-canvas > .sub-numeral, .svc-canvas > .svc-line { margin-top: 0 !important; } /* Kleinzeile gehoert zum Baustein darueber, nicht zum naechsten. Die sechs Werte bekommen denselben Abstand zu ihrer Kleinzeile wie die drei Kennzahlen darueber - auf dem Desktop sind das 22 px. */ .home-stage > .home-values + .home-values-caption { margin-top: 22px; } .sub-canvas > * + .sub-label { margin-top: var(--sp-kick); } /* Die drei Kennzahlen stehen in der Vorlage zentriert NEBENEINANDER (drei 233er Spalten). Untereinander wirkt die Zentrierung wie ein Versehen - und auf der Startseite stehen dieselben drei Zahlen links. Im Fluss also ueberall links, wie der ganze Rest der Seite. */ .sub-canvas .sub-sec, .sub-canvas .sub-block { text-align: left !important; } /* ---------- Ortsseiten: die Abstandsklassen gelten auch im Fluss ---- Runde 38, Punkt 15.1: "Abstand zwischen Titel und Text ('Alle neun Leistungen, in jedem Ort') zu der Aufzaehlung unten zu gross auf mobile, auf Desktop stimmt sie." Nachgemessen auf /einsatzgebiet: Text -> Auflistung 13 px auf dem Desktop, 89 px im Fluss. Die Ortsseiten tragen fuer solche Faelle eigene Klassen (.ort-eng = Fortsetzung, .ort-nah = direkt unter dem Titel); sie galten bisher nur ab 1276 px, im Fluss griff der allgemeine Baustein-Abstand. Jetzt gelten sie ueberall. */ .sub-canvas.ort-canvas > .ort-eng { margin-top: 13px; } .sub-canvas.ort-canvas > .ort-nah { margin-top: 21px; } /* Pfeil-Link schliesst den Text ab, den er betrifft. */ .home-stage > * + .arrow-link, .sub-canvas > * + .arrow-link { margin-top: var(--sp-link); } /* Runde 54: Einleitungstext des Kalkulators -> erste Frage. Auf den Figma-Seiten (/unterhaltsreinigung, /fensterreinigung, /preisliste ...) stehen Titel und Text in zwei Bausteinen; der Kalkulator folgt dort mit dem Baustein-Abstand 89 - wie in der Vorlage (Desktop 81-89). Wo Titel und Text in EINEM Baustein stehen (Ortsseiten, /commercial, die Leistungsseiten), griff stattdessen die Regel "nach einem Titelbaustein 34" - der Kalkulator rueckte dort 55 px naeher an den Text als auf allen anderen Seiten. Jetzt ueberall 89. */ .sub-canvas > .ort-pk-kopf + .pk-embed, .sub-canvas > .pk-kopf-block + .pk-embed { margin-top: var(--sp-block); } /* Die Blaetter-Pfeile gehoeren zur Bewertungsreihe darueber. */ .home-stage > .home-testimonial-row + .home-testimonial-nav { margin-top: var(--sp-title); } /* Runde 24: Der FAQ-Bereich steht in einem eigenen Behaelter. Bis v38 lag darueber die Buehne, die ihren Abstand selbst mitbrachte - 34 px reichten. Seit dem Ratgeber-Bereich endet darueber ein eigener Abschnitt mit dem Knopf "alle Artikel lesen"; ohne Aenderung stuende der FAQ-Titel nur 34 px darunter (auf dem Desktop sind es 233). Jetzt gilt im Fluss dasselbe Mass wie auf dem Desktop. */ .home-tail { padding-top: var(--sp-area); padding-bottom: var(--sp-bot); } .home-body .home-stage { padding-bottom: 0; } /* Bilder dürfen nicht auf ihrer Figma-Höhe hängenbleiben */ .sub-canvas img, .home-stage img { max-width: 100%; height: auto; } /* Team-Kacheln: eine pro Zeile, Bild auf seinem Vorlagemass gedeckelt. Runde 17, Punkt 11: Foto und Name stehen mittig in der Spalte - vorher klebten sie links, waehrend die Kachel schmaler als die Spalte ist. */ /* v55: Kachel fest 233 px breit (= Foto, wie bisher im Endbild). Vorher richtete sich die Breite nach dem Inhalt: Solange ein Foto noch nicht geladen war (loading="lazy"), war es 0 px hoch - die Seite wuchs beim Scrollen um bis zu 3500 px, und der Inhalt sprang nach unten. */ .sub-team, .sub-canvas .sub-team { width: 233px !important; max-width: 100%; margin-left: auto !important; margin-right: auto !important; text-align: center; } .sub-canvas .sub-team figcaption, .sub-canvas .sub-team h3 { text-align: center; } /* Die Fluss-Regel oben setzt width:auto!important auf ALLE Kinder eines .sub-block (und ist genauer als jede Regel hier). Das Foto bekommt darum seine Hoehe fest, die Breite folgt aus dem Seitenverhaeltnis 1:1 - so steht der Platz schon vor dem Laden des Fotos fest (v55). */ .sub-canvas .sub-team > img { height: 233px !important; aspect-ratio: 1 / 1; object-fit: cover; } /* Gesperrte Grossbuchstaben-Zeilen brechen sonst aus der Spalte */ .sub-label, .home-label, .home-values-caption { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } /* ---------- Cremefarbene Baender ---------- Auf der Buehne sind das grosse Rechtecke auf festen Koordinaten; im Fluss traegt die Huelle .band die Farbe und laeuft dafuer ueber die volle Fensterbreite (negativer Aussenabstand gegen den Seitenrand). */ .band { display: flex; flex-direction: column; gap: 0; width: auto !important; max-width: none !important; } /* Runde 14, Punkt 5.2 – woertlich nach deiner Vorgabe: "alle Abstände bei allen Bereichen (Änderung Hintergrundfarbe) auf 233 px davor und 377 px danach stellen (also bspw. nach 377 px unterer Rand + Ende cremefarbener Hintergrund, kommt ein 233 px oberer Rand bei 'Wer wir sind und was uns auszeichnet')." Ergibt fuer jede Farbflaeche vier Werte: 233 Luft davor (ausserhalb, in der hellen Flaeche) 233 Luft oben INNEN, bevor der Inhalt beginnt 377 Luft unten INNEN, nachdem der Inhalt endet 233 Luft danach (ausserhalb), bevor der naechste Titel kommt */ .band-cream { background: var(--color-cream); /* Runde 17, Punkt 3.2c: Die senkrechten Rasterlinien liegen absolut auf der Buehne und lagen dadurch VOR dem cremefarbenen Band. Auf dem Desktop sind sie dahinter. Ein eigener Stapelkontext auf dem Band stellt das wieder her. */ position: relative; z-index: 1; margin-left: calc(-1 * var(--gutter)) !important; margin-right: calc(-1 * var(--gutter)) !important; padding: var(--sp-area) var(--gutter) var(--sp-bot); } .home-stage > * + .band-cream, .sub-canvas > * + .band-cream { margin-top: var(--sp-area); } .home-stage > .band-cream + *, .sub-canvas > .band-cream + * { margin-top: var(--sp-area) !important; } .band > * { max-width: var(--col); min-width: 0; } /* ---------- Preiszeilen ---------- In der Vorlage stehen Bezeichnung und Preis als ZWEI Textspalten nebeneinander (x144 und x377). Im Fluss wuerden daraus erst alle Bezeichnungen und darunter alle Preise - die Zuordnung waere weg. Die Huelle .pair haelt beide Spalten nebeneinander; sie ist auf der Buehne wirkungslos, weil die Bloecke dort absolut sitzen. */ .pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 21px; align-items: start; } .pair > * { position: static !important; left: auto !important; top: auto !important; width: auto !important; max-width: none !important; } .pair > *:last-child { text-align: right; } /* Zweite Bauart derselben Sache: EIN Block, in dem die Zeilen als absolut gesetzte Spans auf einem 30-px-Raster sitzen (Beschriftung x0, Preis x233). Im Fluss wird daraus ein zweispaltiges Raster; die erste Zeile ("Stundenansatz:", "Fixpreis:") laeuft ueber beide Spalten. */ .price-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 21px; /* Runde 17, Punkt 6.5: keine Rasterluecke - der Zeilenabstand der Preisauflistung ist derselbe wie im Fliesstext (30 px, wie auf dem Desktop). Mit 4 px Luecke waren es 34. */ row-gap: 0; height: auto !important; } /* Runde 17, Punkt 6.5: Eine Preisauflistung ist ein RASTER, keine Folge von Bausteinen. Ohne diese Ausnahme bekam jede Zelle den 21er-Takt aus dem Bausteinrhythmus - aus 30 px Zeilenabstand wurden 55. (Dieselbe Ursache wie beim Zeilenabstand in Runde 16, nur fuer Rasterzellen statt fuer Wortschachteln.) */ .sub-canvas .price-grid > * + *, .sub-canvas .pair > * + * { margin-top: 0 !important; } .price-grid > * { position: static !important; left: auto !important; top: auto !important; width: auto !important; } .price-grid > span:first-child { grid-column: 1 / -1; margin-bottom: 8px; } .price-grid > span:nth-child(odd):not(:first-child) { text-align: right; } /* ---------- Dekoration ---------- SENKRECHTE Rasterlinien haben im Fluss keinen Bezugspunkt mehr und entfallen. Die WAAGRECHTEN Linien und die grossen Wortmarken-Grafiken bleiben - sie gehoeren zur Handschrift der Seite und sind auch in den Responsive-Vorlagen vorhanden. */ /* Die grossen Creme-Rechtecke sitzen auf Figma-Koordinaten; im Fluss traegt die Huelle .band-cream die Farbe. */ .home-band-calc, .deco-band { display: none !important; } /* ---------- Punkt 3.2 und 8: die grauen Linien ---------- Vorher wurden die WAAGRECHTEN Linien im Fluss zu ganz normalen Block-Elementen gemacht. Damit standen sie nicht mehr dort, wo sie etwas trennen, sondern einfach an ihrer Stelle im Quelltext - auf der Startseite also als graues Doppelstrichlein direkt unter dem Seigaiha-Muster, und sonst nirgends. Genau das hast du gemeldet. Jetzt bleiben sie absolut positioniert (wie auf dem Desktop) und bekommen ihre Hoehe in effects.js zugewiesen: jede Linie legt sich mittig in die 233-px-Luft VOR einen Bereichsanfang. Dadurch trennt sie wieder etwas, sie ist auf jeder Breite sichtbar - und sie behaelt ihre Zeichen-Animation, weil is-drawn unveraendert greift. */ .sub-line-h, .home-line-h, .svc-line-h { position: absolute !important; left: 0 !important; right: auto !important; width: 100% !important; /* !important ist hier zwingend: auf den Unterseiten sind die Linien DIREKTE Kinder der Buehne, und die Fluss-Regel setzt "height: auto !important" auf alle direkten Kinder. Ohne !important war die Linie 0 px hoch - genau das war "waagerechte Linien fehlen komplett" (Runde 15, Punkt 6.2). Auf der Startseite fiel es nicht auf, weil .home-line-h nicht unter der Fluss-Regel steht. */ height: 1px !important; display: block; } /* SENKRECHTE Linien bleiben ebenfalls - sie sitzen im Seitenrand, auf derselben Stelle wie auf dem Desktop: 76 von 144 Rand = 52.8 %. Bei Rand 144 ergibt das exakt die Figma-Koordinate x76. Sie stehen auf den Unterseiten als direkte Kinder der Buehne und wuerden sonst von der Fluss-Regel weiter oben zu normalen Block-Elementen gemacht (position/height/top auf auto) - darum hier zurueckgesetzt. top und height setzt effects.js, mit !important, weil "top:auto !important" der Fluss-Regel sonst gewinnt. */ .home-line-v, .sub-line-v, .svc-line-v { display: block !important; position: absolute !important; left: calc(var(--gutter) * 0.528) !important; right: auto !important; width: 1px !important; } /* ---------- Punkt 1 und 3.2: die blassen Grafiken ---------- Sie waren im Fluss ausgeblendet. In den Vorlagen sind sie aber da, und zwar in IMMER DERSELBEN GROESSE - nachgemessen in drei Rahmen: Rahmen Grafik Hoehe T3 320 px Group 17941 377 (456 breit, ragt rechts raus) T3 555 px Group 17941 377 (456 breit, ragt rechts raus) Intro 1440x798 Group 17322 377 (931 breit, ragt links raus) 377 px hoch, unabhaengig von der Fensterbreite, und sie ragen bewusst ueber einen Rand hinaus. Genau so stehen sie jetzt auch hier. Und das Kreuz stimmt in allen drei Rahmen: die waagrechte Linie liegt auf 49.3-50.1 % der Grafikhoehe, die senkrechte auf 49.9-50.0 % ihrer Breite - beide gehen also MITTEN durch die Grafik. Die Hoehe der Linien setzt darum effects.js auf die Mitte der jeweiligen Grafik. */ /* Runde 22: Die blassen Grafiken behalten im Fluss ihre VORLAGENGROESSE. Bis v36 wurden sie hier auf eine einheitliche Zeichenhoehe von 377 px gebracht. Das war eine Vorgabe aus Runde 16, die der Auftraggeber in Runde 22 zurueckgenommen hat: "also '01' etc. gleich gross auf mobile wie Desktop und dasselbe fuer 'Residential' etc." Deshalb steht hier keine Groesse mehr. Es gelten die Masse aus dem Quelltext bzw. aus services.css - also genau die der Vorlage: Ziffern 377 hoch, Wortmarken 233, eine 500 und eine 798. Damit ist jede Grafik auf dem Handy so gross wie auf dem Desktop. */ .sub-numeral, .home-numeral { display: block !important; position: absolute !important; max-width: none !important; z-index: 1; } /* Wortmarken sind immer links angesetzt und laufen rechts hinaus. */ .sub-numeral.is-wordmark, .home-numeral.is-wordmark { left: 0 !important; right: auto !important; } /* Runde 16, Punkt 3.2: die Wortmarke ueber dem Kopfbild war im Fluss ausgeblendet ("'Residential'-SVG fehlt in /services/residential Foto ganz oben"). Sie steht jetzt wie auf dem Desktop am Fuss des Kopfbereichs, links angesetzt. */ .sub-hero-watermark { display: block !important; position: absolute !important; left: 0 !important; right: auto !important; top: auto !important; bottom: 0 !important; max-width: none !important; z-index: 2; } /* Damit das Herausragen keinen waagrechten Scrollbalken erzeugt, wird die Buehne seitlich beschnitten. "clip" schneidet ab, ohne die Buehne zu einem eigenen Scrollbereich zu machen; "hidden" davor als Rueckfall fuer Safari vor 16. */ /* .pk-stage steht mit dabei, seit dort die blasse "03" links hinausragt (Runde 17, Punkt 3.2a) - sonst entsteht auf 320 px ein waagrechter Scrollbalken. .home-ratgeber seit Runde 25 aus demselben Grund: die neue blasse "04" ist 340 px breit und ragt auf einem 320er Bildschirm rechts hinaus. */ .home-body, .sub-canvas, .svc-canvas, .pk-stage, .home-ratgeber { overflow-x: hidden; overflow-y: visible; } .home-body, .sub-canvas, .svc-canvas, .pk-stage, .home-ratgeber { overflow-x: clip; overflow-y: visible; } /* ---------- Schriftgrössen ---------- Werte aus den Vorlagen: H1 55 (788–1275) bzw. 34 (bis 787), Abschnittstitel 34, Fliesstext unverändert 15/30. Zeilenhöhe 1.1 wie in der ganzen Vorlage. */ /* Runde 19, Punkt 14: Die vier Abschnittstitel der Startseite ("Unsere Dienstleistungen", "Reinigungspreis berechnen und Offerte einholen", "Wer wir sind und was uns auszeichnet", "Fragen und Antworten über Reinigungen") haben in der Vorlage denselben Grad wie die Seitentitel der Unterseiten - 55 px. Im Fluss standen sie als einzige noch auf 34/30, weil sie als

ausgezeichnet sind. Sie laufen ab jetzt in derselben Reihe wie jeder Seitentitel. ".home-stage .home-h2" ist eine Klasse spezifischer als die h2-Regel darunter (und als die 30-px-Regel fuer ganz schmale Fenster) - damit gewinnt sie unabhaengig von der Reihenfolge. */ .sub-hero h1, .sub-canvas .sub-h1, .home-hero h1, .home-stage .home-h2, /* Runde 26: "Auf mobile ist der Titel auch kleiner, als er bei den anderen auf der Startseite ist." Stimmt - der Ratgeber-Titel stand als einziger auf festen 34 px, waehrend die uebrigen Abschnittstitel fliessend von 34 auf 55 px wachsen. Er steht jetzt in derselben Reihe. */ .home-ratgeber-kopf h2, .pk-h1 { font-size: 55px !important; line-height: 1.1 !important; } .sub-block h2, .home-h2, .sub-canvas h2, .svc-row h2 { font-size: 34px !important; line-height: 1.1 !important; } /* Runde 37, Punkt 6.2 (und 15.3): Der Titel, der den Kalkulator ankuendigt, stand im Fluss auf 34 px, auf der Startseite derselbe Titel aber auf 55 - gemeldet als "Schriftgroesse Titel von PK auf Mobile und Tablett vergroessern (siehe Startseite)". Er laeuft jetzt in derselben Reihe wie die Seitentitel, genau wie .home-stage .home-h2 darueber. Die Klasse setzt build/v51_pk_titel.py auf 15 Seiten. Auf dem Desktop stehen beide ohnehin auf 55 - dort aendert sich nichts. */ .sub-canvas h2.h-pk, .sub-block h2.h-pk { font-size: 55px !important; line-height: 1.1 !important; } /* "Reinigungs-Dienstleistungen" ist laenger als eine schmale Spalte - Ueberschriften duerfen im Notfall im Wort umbrechen. */ h1, h2, h3, .sub-h1, .home-h2, .pk-h1 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } /* Harte Zeilenumbrueche aus der Vorlage (sie sitzen auf der 610er-Spalte) ergeben im Fluss willkuerliche Bruchstellen - im Quelltext steht hinter ihnen ein Leerzeichen, hier verschwinden sie. */ br.lb-wide { display: none; } /* Die Buchstaben-Animation legt jedes Wort in ein eigenes, nicht umbrechendes Element. Hier stand "white-space: normal" als Sicherung gegen ueberlange Woerter - weil aber jeder Buchstabe eine eigene Schachtel ist, galt damit JEDE Stelle als Umbruchstelle und die Ueberschrift brach mitten im Wort um ("Reinigungs-Dienstleistu / ngen"). Die Umbruchstellen setzt jetzt effects.js an die richtige Stelle, naemlich hinter jeden Bindestrich; hier bleibt es deshalb bei "nowrap". Geprueft mit probe/audit.py auf 320/430/575/768/898 - kein Wort ragt aus dem Fenster. */ .word-reveal .word { white-space: nowrap; } /* Im Fluss darf die Zeile hinter dem Bindestrich einer Zusammensetzung umbrechen - dafuer ist die Klammer da (Runde 17). */ .word-reveal .word-grp { white-space: normal; } /* ---------- Hero der Unterseiten ---------- Der Titel steht weiss auf dem Foto. Auf der Bühne sitzt er im dunklen oberen Drittel; im Fluss rutscht er nach unten, wo die Fotos hell werden – darum unten ein weicher dunkler Verlauf. */ .sub-hero { margin-left: 0; margin-right: 0; width: auto; max-width: none; height: auto; min-height: min(72vh, 520px); display: flex; flex-direction: column; justify-content: flex-end; padding: 144px var(--gutter) 55px; } .sub-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: linear-gradient(to top, rgba(21, 21, 21, 0.66), rgba(21, 21, 21, 0)); z-index: 2; pointer-events: none; } /* Die Wortmarke ist Dekoration und bleibt absolut liegen - sie darf nicht in die Textspalte gefaltet werden (Runde 16, Punkt 3.2). */ .sub-hero > *:not(.sub-hero-photo):not(.sub-hero-watermark) { position: static !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; max-width: var(--col); } .sub-hero h1 { margin: 0; } /* Runde 15, Punkt 6.1: Die zweite Schaltflaeche im Foto-Hero springt nur zum Abschnitt weiter unten ("#leistungen"). Im Fluss steht ohnehin alles untereinander - dort ist der Sprung sinnlos und die Flaeche nimmt nur Platz weg. Ab 898 px aufwaerts ist sie wieder da. */ .sub-hero .sub-btn-secondary { display: none !important; } .sub-hero-btns { margin-top: var(--sp-link); display: flex; flex-direction: column; gap: var(--sp-text); align-items: flex-start; } .sub-btn { width: 100%; max-width: min(377px, 100%); } /* ========================================================= PUNKT 6.1 - EIN REGISTER FÜR DIE GANZE WEBSITE Gepruefte Abweichungen (Messung ueber alle 18 Seiten, siehe probe/typescale.py): dieselbe Rolle war an verschiedenen Stellen unterschiedlich gesetzt. Hier wird sie einmal festgelegt, damit ein H1 ueberall ein H1 ist und eine Kleinzeile ueberall eine Kleinzeile. ========================================================= */ /* Kleinzeile: auf den Unterseiten 15/16.5, auf der Startseite 15/15. */ .home-svc .home-svc-label, .home-stat-label, .home-values-caption, .sub-label { line-height: 16.5px !important; } /* Pfeil-Link: auf der Startseite 18/18, sonst 18/21. */ .arrow-link { line-height: 21px !important; } /* Runde 16, Punkt 7: "damit der gesamte Text auf eine Zeile passt, wenn man den Bildschirm so verkleinert." Der Text ist ein eigenes Flex-Kind und durfte bisher umbrechen. Am engsten wird es bei 320 px: dort bleiben nach dem Seitenrand 278 px Spalte, "-> jetzt spontan bewerben" braucht in Montserrat 18 aber rund 262 - jede etwas breitere Schriftwiedergabe brach die Zeile. Jetzt bricht der Text nicht mehr um, und der Link darf dafuer die Spaltenbreite verlassen (bis zum Seitenrand ist noch Platz). */ /* Runde 17, Punkt 7: Die Buehne ist im Fluss eine Flex-Spalte mit "align-items: stretch" - jedes Kind wird also auf die volle Spalten- breite gezogen, und aus dem "inline-flex" des Links wird ein block-artiges "flex". Dadurch war der Kasten des Links immer so breit wie die Spalte, und der Text konnte weit weg vom Pfeil landen. "align-self: flex-start" laesst den Kasten wieder an seinem Inhalt haengen: Pfeil, 12 px Abstand, Text - auf einer Zeile, buendig links. Reicht die Spalte nicht, darf er bis an den Bildrand laufen. */ /* Runde 19, Punkt 7: dieselbe Wirkung, aber ohne die drei Stellen, an denen Safari auf dem iPhone anders rechnet als Chrome: 1. "width: auto" laesst den Kasten in der Flex-Spalte auf volle Spaltenbreite ziehen, sobald "align-self" aus irgendeinem Grund nicht greift - dann steht der Text weit weg vom Pfeil. "fit-content" haengt den Kasten IMMER an seinem Inhalt, voellig unabhaengig vom Flex-Zusammenhang. Die Schreibweise mit "-webkit-" davor ist fuer aeltere Safari-Versionen. 2. "calc(100vw - var(--gutter))" war eine Rechnung mit einer Variablen, die selbst ein clamp() enthaelt - eine Verschachtelung, an der aeltere Safari-Versionen scheitern. Faellt die Angabe aus, steht dort kein Wert mehr, und der Text bricht um. Der Wert wird hier gar nicht gebraucht: der Link steht am Seitenrand, nach rechts ist bis zum Bildrand ohnehin Platz. 3. Der Abstand zum Pfeil kommt nicht mehr aus Flex-"gap" (siehe effects.css). "margin-right: auto" haelt den Kasten links, falls ein Browser "align-self" ignoriert. */ .arrow-link { white-space: nowrap; align-self: flex-start; width: -webkit-fit-content !important; width: fit-content !important; max-width: none !important; margin-right: auto; } /* Kalkulator-Antwort: Zahlenreihen standen auf 13 px, weil auf der Buehne bis zu sieben davon nebeneinander liegen. Im Fluss hat jede Antwort ihre eigene Zeile - dort gilt derselbe Wert wie ueberall sonst. */ .pk-row.is-numeric .pk-opt { font-size: 15px; } /* ---------- Kopfzeile ---------- Die Vorlage ist von 2019 und rechnet mit einem festen 1440er-Fenster. Auf heutigen Telefonen braucht die Kopfzeile: den Sicherheitsabstand oben (Notch), eine Tippflaeche von mindestens 44 px und ein Logo, das neben dem MENU-Knopf noch Platz laesst. Schriftgroessen bleiben. */ .site-header { padding-top: calc(21px + env(safe-area-inset-top, 0px)); padding-bottom: 21px; } .site-header .container { padding: 0 var(--gutter); max-width: none; } .nav-menu-btn { min-height: 44px; padding: 0; } .nav-logo img { height: 28px; width: auto; } .nav-logo-alt img { height: 42px; width: 42px; } /* ---------- Menü ---------- Auf der Bühne liegen Navigation, Untermenü, Kontaktblock und CTA nebeneinander auf festen Koordinaten, und das Untermenü erscheint erst beim Überfahren. Auf dem Handy gibt es kein Überfahren – dort steht alles untereinander, die Untermenüs sind dauerhaft offen, und die Karte lässt sich scrollen. */ .menu-card { overflow-y: auto; -webkit-overflow-scrolling: touch; } .menu-card-media { display: none !important; } .menu-card-canvas { position: relative; width: 100%; height: auto; min-height: 100%; display: flex; flex-direction: column; padding: 34px var(--gutter) 55px; } /* Punkt 4.1 im Fluss: dieselbe Zeile wie in der Kopfzeile - derselbe Seitenrand, derselbe Innenabstand, dieselbe Zeilenhoehe von 44 px (das Mindestmass einer Tippflaeche), beides mittig darin. Dadurch liegt die Wortmarke auf genau derselben Hoehe wie in der Kopfzeile. */ .menu-card-top { position: static; left: auto; right: auto; top: auto; /* Seitlich KEIN eigener Innenabstand: den setzt .menu-card-canvas bereits auf var(--gutter) - genau den Rand, auf dem auch die Kopfzeile steht. Mit einem zweiten Abstand stuende die Wortmarke doppelt so weit innen (gemessen: 288 statt 144 bei 1275 px). */ padding: 0; /* Senkrecht beginnt die Zeile in der Kopfzeile 21 px unter der Oberkante, die Karte setzt 34 - die Differenz wird hier abgezogen und gleich wieder angehaengt, damit darunter nichts verrutscht. */ margin-top: -13px; margin-bottom: 13px; align-items: center; min-height: 44px; box-sizing: border-box; } .menu-card-logo img { height: 28px; } .menu-card-tagline { display: none; } .menu-card-nav { position: static; left: auto; top: auto; margin-top: 55px; } .menu-card-nav li { height: auto; } .menu-nav-item { margin-bottom: 21px; } .menu-nav-link { font-size: 34px; line-height: 1.2; padding: 6px 0; } .menu-sub-divider { display: none !important; } .menu-sub { position: static; left: auto; top: auto; width: auto; margin: 6px 0 0 21px; opacity: 1 !important; visibility: visible !important; } .menu-sub li { height: auto; } .menu-sub-link { font-size: 21px; line-height: 1.3; padding: 7px 0; } /* BEWUSST OHNE :has() - in einer Selektorliste wuerde ein nicht unterstuetztes :has() (Safari vor 15.4) die GANZE Regel ungueltig machen; der Kontaktblock bliebe dann absolut auf x773/y321 stehen. */ .menu-card-contact { position: static; left: auto; top: auto; flex-direction: column; gap: 21px; margin-top: 55px; opacity: 1 !important; visibility: visible !important; } .menu-card-contact-col { width: auto; } .menu-card-contact p, .menu-card-contact a { white-space: normal; } .menu-card-cta { position: relative; left: auto; top: auto; width: 100%; max-width: 377px; margin-top: 34px; } .menu-card-bottom { position: static; left: auto; right: auto; bottom: auto; margin-top: 55px; } /* ---------- Startseite: Hero ---------- Punkt 2.1: das Seigaiha-Muster soll so hoch sein wie der Bildschirm. Vorher stand hier min(92vh, 720px) - bei einem 770 px hohen Fenster also 708 px, und unten blitzte der naechste Abschnitt durch. 100svh ist die "kleine" Fensterhoehe: sie rechnet die Adressleiste mobiler Browser mit ein, dadurch springt beim Scrollen nichts. 100vh steht als Rueckfall fuer aeltere Browser davor. */ .home-hero { height: auto; min-height: 100vh; min-height: 100svh; max-height: none; display: flex; flex-direction: column; justify-content: flex-start; /* --------------------------------------------------------------- Runde 38, Punkt 1.6: "Der erste Abschnitt der Startseite ist nun laenger als die Hoehe des Bildschirmes ... In diesem Fall muesste man den Beginn des Titels etc. etwas nach oben ziehen, oder?" Genau so. Die Mindesthoehe (100svh) stimmte, der INHALT war zu hoch: ueber dem Titel lagen 90 px Abschnittsrand plus 120 px Innenabstand der Buehne, darunter 89 plus 90 - zusammen 389 px Luft auf einem 667 px hohen Bildschirm. Der Kopfbereich wurde dadurch 701 px hoch. Die vier Werte sind jetzt nach oben gedeckelt: auf hohen Geraeten bleiben sie unveraendert, auf flachen schrumpfen sie mit der Fensterhoehe. svh ist dabei die "kleine" Fensterhoehe, also die mit eingeblendeter Adressleiste - gerechnet wird also mit dem ungünstigsten Fall. */ padding-top: min(90px, 11svh); padding-bottom: min(90px, 11svh); } .home-hero-stage { position: relative; left: auto; top: auto; transform: none; width: 100%; height: auto; padding: min(var(--sp-top), 16svh) var(--gutter) min(var(--sp-block), 12svh); display: flex; flex-direction: column; align-items: flex-start; box-sizing: border-box; } /* Die CTA-Schaltflaeche behaelt position:relative - sonst entkommt ihre goldene Fuellung der Schaltflaeche (siehe Kommentar beim Formular). */ .home-hero-stage > *:not(.home-hero-cta) { position: static !important; left: auto !important; top: auto !important; width: auto !important; max-width: var(--col); } /* relative statt static: die Schaltflaeche steht im Fluss UND behaelt den Bezugsrahmen fuer ihre goldene Fuellung. Punkt 2.2: vorher war sie "shrink to fit" - die Flaeche war also exakt so breit wie ihre Beschriftung, ohne jeden Rand. In der Vorlage ist sie 377 breit bei 55 hoch; genau das steht jetzt hier, mit 21 px Luft links und rechts als Untergrenze, falls die Spalte schmaler ist. */ .home-hero-stage > .home-hero-cta { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; max-width: min(377px, 100%); height: auto !important; min-height: 55px; padding: 13px 21px; box-sizing: border-box; } .home-hero-cta .btn-label { white-space: normal; text-align: center; } /* Runde 18, Punkt 13.3: "Auf Mobile/Tablett fehlt dieser gaenzlich - einfuegen!" Die Drei-Tropfen-Grafik war im Fluss ausgeblendet. Sie kommt an dieselbe Stelle wie in der Vorlage: in die rechte UNTERE Ecke des Kopfbereichs, rechts angeschnitten (die Datei ist dort schon beschnitten) und unten vom Kopfbereich abgeschnitten - dort hat sie in der Vorlage ihren Platz (x974..1440 von 1440, y332..942 von 798). Damit "unten" auch wirklich die Unterkante des Kopfbereichs ist und nicht die des Textblocks, fuellt die Buehne im Fluss die volle Kopfhoehe (flex: 1). Auf die Textlage hat das keinen Einfluss: die Buehne ist eine Spalte mit "justify-content: flex-start", der Text bleibt also oben stehen. z-index: -1 legt die Grafik hinter den Text, aber vor das Seigaiha-Muster: die Buehne bildet mit z-index:1 einen eigenen Stapelraum, -1 ist darin die unterste Ebene - und dieser Stapelraum liegt als Ganzes ueber dem Muster. Breite: 60 % der Bildbreite, hoechstens die 466 px der Vorlage. Bei 320 px sind das 192 px, bei 788 px die vollen 466 - dieselbe Wirkung wie im Entwurf, ohne den Text zu bedraengen. */ .home-hero-stage { flex: 1 1 auto; } /* Die Regel oben ("alle Kinder der Buehne in den Fluss") ist spezifischer als eine Klasse allein - deshalb hier derselbe Aufbau mit Kind-Auswahl, damit sie greift. */ .home-hero-stage > .home-hero-graphic { display: block !important; position: absolute !important; left: auto !important; right: 0 !important; top: auto !important; bottom: 0 !important; /* Der negative Rand hebt den unteren Innenabstand der Buehne auf - sonst schwebte die Grafik um diesen Betrag ueber der Unterkante des Kopfbereichs statt daran zu kleben. */ margin-bottom: calc(-1 * var(--sp-block)) !important; width: min(60%, 466px) !important; max-width: none !important; height: auto !important; z-index: -1; pointer-events: none; /* Runde 39, Punkt 1.6: "das blasse Drei-Tropfen-Logo sollte auf Mobile wie auf Desktop den rechten Rand schneiden (stimmt aktuell) sowie den unteren (aktuell nur auf Desktop so)". Auf dem Desktop ist die Grafik 610 px hoch und wird vom Kopfbereich 93 px vor ihrem Ende abgeschnitten - also 15.2 % ihrer Hoehe. Im Fluss stand sie buendig auf der Unterkante. Dieselben 15.2 % schieben sie jetzt auch hier ueber die Kante; abgeschnitten wird sie vom "overflow: hidden" des Kopfbereichs. */ transform: translateY(15.2%); } .home-hero h1 { margin: 0 0 var(--sp-text); } .home-hero .home-hero-lead { margin: 0 0 var(--sp-link); max-width: 42ch; } .home-hero-cta { align-self: flex-start; max-width: 100%; } /* Runde 37, Punkt 1.6: "'Scrollen'-Icon ganz oben auch auf Mobile/Tablett einbauen." Bis v50 war der Hinweis im Fluss ausgeblendet. Der Hero ist aber auch hier genau fensterhoch, und der Knopf endet deutlich darueber - es ist also Platz. Er steht nun wie auf dem Desktop unten mittig im Hero; nur der Abstand zur Unterkante ist kleiner (21 statt 38), damit er auch auf sehr flachen Fenstern nicht an den Knopf stoesst. */ .home-scroll-hint { display: flex; position: absolute; left: 50%; right: auto; top: auto; bottom: 21px; transform: translateX(-50%); margin: 0 !important; width: auto !important; z-index: 2; } /* ---------- Startseite: Bausteine (alle einspaltig) ---------- */ /* Dienstleistungs-Baustein: exakt der Desktop-Takt 55 / 13 / 36 / 21 (Figma-Koordinaten im Block: Zeichen 0-89, Titel 144, Kleinzeile 194, Liste 245, Link 359). */ .home-svc { width: auto !important; height: auto !important; } .home-svc > * { position: static !important; left: auto !important; top: auto !important; width: auto !important; } .home-stage .home-svc > .home-svc-icon + h3 { margin-top: var(--sp-icon); } .home-svc h3 { margin-bottom: 0; } .home-svc .home-svc-label { display: block; margin-bottom: 0; } .home-svc ul { margin: 0; padding: 0; } .home-svc .home-svc-links a, .home-svc .home-svc-link { display: block; margin-bottom: 8px; } .home-svc .home-svc-more { display: inline-flex; } .home-stats { display: flex; flex-direction: column; gap: var(--sp-link); } /* Runde 14, Punkt 5.1: Kein zusaetzliches gap - die Kleinzeile hat ihren Abstand schon selbst (.home-stat-label margin-top:22). Mit gap kamen 13 px obendrauf, die Kennzahlen standen also 35 px von ihrer Kleinzeile entfernt und die sechs Werte nur 13 - genau die Ungleichheit, die du gemeldet hast. Auf dem Desktop sind beide Abstaende 22, nachgemessen. */ /* Runde 37, Punkt 1.4: "alle Auflistungen (3 Keywords und 6 kulturellen Werte) auf Mobile und Tablett mittig zentrieren." Bis v50 standen sie hier links - eine Entscheidung aus Runde 14, als die Zentrierung untereinander wie ein Versehen wirkte. Auf der Vorlage SIND beide Listen zentriert (.home-stats > div hat text-align:center, .home-values-caption ueber die ganze Rasterbreite ebenso). Im Fluss gilt jetzt dasselbe. Betroffen ist nur dieser eine Abschnitt. */ .home-stats { align-items: center; } .home-stats > div { width: auto; text-align: center; display: flex; flex-direction: column; gap: 0; } .home-stat-value { line-height: 1.1 !important; } .home-values { width: auto !important; display: flex; flex-direction: column; gap: 8px; align-items: center; } /* Punkt 5: die Kleinzeile gehoert zu den sechs Werten darueber - derselbe enge Abstand wie "4.8 Sterne" -> "KUNDENBEWERTUNGEN". */ .home-values-caption { width: auto !important; text-align: center; } .home-text.home-about-text { width: auto !important; } /* FAQ */ .home-tail-stage { width: 100%; } /* Runde 24: Der FAQ-Titel stand bis v38 auf der Buehne und fiel damit unter die allgemeine Fluss-Regel fuer Buehnenkinder. Seit dem neuen Ratgeber-Bereich sitzt er im Fluss im .home-tail-stage und braucht seine eigene Regel - sonst behaelt er die 987 px Breite und die 144 px Aussenabstaende der Vorlage, und die Seite laesst sich auf dem Handy waagrecht schieben (auf 320 px: 464 statt 320). */ .home-faq-titel { width: auto !important; margin: 0 var(--gutter) var(--sp-title) !important; } .home-faq-question, .home-faq-answer, .home-faq-preview { width: auto !important; margin-left: var(--gutter) !important; margin-right: var(--gutter) !important; } /* Das Aufklapp-Zeichen sass auf der Figma-Koordinate x1267. Im Fluss rueckt es an den rechten Spaltenrand - und die Frage bekommt dort Innenabstand, sonst laeuft ihr Text hinein (Punkt 6.2). Auf dem Desktop ist die Spalte 1152 breit und der Text erreicht das Zeichen nie; im Fluss sind es noch 459 und jede zweite Frage stiess an. */ .home-faq-toggle { left: auto !important; right: 0 !important; } .home-faq-question { padding-right: 55px; } .home-faq-preview { padding-right: 55px; } .home-faq-link { margin-left: var(--gutter) !important; left: auto !important; } .home-faq-item + .home-faq-item { margin-top: var(--sp-text); } /* ---------- Bewertungen ---------- Auf der Bühne sitzen Name, Sterne und Text absolut auf den Figma- Abständen. Auf schmalen Karten wird daraus ein normaler Fluss mit Innenabstand; die Karte wächst mit ihrem Inhalt, "weiterlesen" bleibt. Eine Karte pro Zeile – gewischt wird weiterhin seitwärts. */ .home-testimonial-row { width: 100% !important; gap: 21px; } /* Die Hoehe setzt das Skript (alle geschlossenen Karten gleich hoch) - darum hier KEIN height:auto!important, das wuerde es ueberschreiben. */ /* KEIN display:flex auf der Karte: in einem Flex-Behaelter wird display:-webkit-box der Textabsatz "blockifiziert" - die Begrenzung auf drei Zeilen (-webkit-line-clamp) verliert damit ihre Wirkung und lange Zitate liefen aus der Karte heraus. Die Reihenfolge ergibt sich aus dem Quelltext: Name, Sterne, Text, "weiterlesen". */ .home-testimonial-card { flex: 0 0 100%; width: 100%; min-height: 233px; padding: 34px; display: block; } .home-testimonial-card > * { position: static !important; left: auto !important; top: auto !important; width: auto !important; } .home-testimonial-card h3 { margin: 0 0 8px; } .home-testimonial-stars { margin: 0 0 16px; } .home-testimonial-card p { margin: 0; } .home-testimonial-more { display: inline-block; margin-top: 21px; top: auto !important; } .home-testimonial-nav { align-self: flex-end; } .home-testimonial-hint { display: none; } /* ========================================================= /services – drei Bänder aus Goldfläche und Foto ========================================================= */ /* Runde 17, Punkt 6.6.1: "nun Bilder in /services fuer mobile ganz entfernen. Das Seigaiha-Muster durchgehend gestalten." Die Fotos entfallen, und das Muster traegt jetzt die BUEHNE statt der drei einzelnen Farbfelder - dadurch laeuft es ohne Ansatz durch. */ .svc-canvas { margin: 0; width: 100%; height: auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "r1" "r2" "r3"; background: #D0B084 url("../assets/img/seigaiha-tile-gold.svg") repeat 0 0; background-size: 65px 39px; } .svc-photo, .svc-photo-1, .svc-photo-2, .svc-photo-3 { display: none !important; } .svc-photo-1 { grid-area: p1; } .svc-r1 { grid-area: r1; } .svc-photo-2 { grid-area: p2; } .svc-r2 { grid-area: r2; } .svc-photo-3 { grid-area: p3; } .svc-r3 { grid-area: r3; } .svc-panel-1 { grid-area: r1; } .svc-panel-2 { grid-area: r2; } .svc-panel-3 { grid-area: r3; } /* Runde 15, Punkt 6.2: "relative" statt "static" - das Farbfeld ist der Bezugspunkt seiner Wortmarke. Als Rasterfeld aendert relative an der Lage nichts, ohne es haengen aber alle drei Wortmarken uebereinander am Seitenanfang. */ .svc-panel { position: relative !important; /* Die Vorlagen-Koordinaten (.svc-panel-2 { left: 542px; top: 610px }) galten nur, solange das Feld "static" war. Mit "relative" wuerden sie als Versatz wirken und das zweite Feld aus dem Bild schieben. */ left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto !important; height: auto !important; /* Runde 17, Punkt 6.6.1: Das Muster liegt jetzt auf der Buehne und laeuft dort ohne Ansatz durch - die Farbfelder selbst sind durchsichtig, sonst saesse in jedem ein neuer Musteranfang. */ background: none !important; } /* Runde 15, Punkt 6.2: Die Wortmarken ("Residential", "Office", "Commercial") gehoeren dazu - sie waren hier faelschlich ausgeblendet. Sie stehen am FUSS ihres Farbfeldes, auf dem Desktop nachgemessen (Feld 0..610, Wortmarke 377..610), 233 px hoch, links angesetzt und rechts ueberlaufend. Die waagrechte Linie laeuft durch ihre Mitte. */ /* Runde 18, Punkt 6.6.1: "SVG-Files mit Hintergrundtext (i.e. 'Residential' etc.) auf Hoehe Unterkante Buttons/Text setzen, wie auf anderen Seiten." Bisher BEGANN die Wortmarke an der Unterkante des Knopfes und fuellte den Abstand darunter. Jetzt ENDET sie dort - dieselbe Regel wie bei jeder anderen blassen Grafik der Seite ("Unterkante der Grafik = Unterkante des letzten Textes ihres Abschnitts"). Das Farbfeld ist so hoch wie sein Rasterfeld, also so hoch wie die Reihe daneben. Bei den ersten beiden Reihen endet die Reihe direkt unter dem Knopf (kein unterer Innenabstand mehr, siehe unten) - dort genuegt bottom:0. Die dritte Reihe hat den 377er-Abstand zum CTA-Band; dort wird um genau diesen Betrag angehoben. */ .svc-watermark { display: block !important; position: absolute !important; left: 0 !important; right: auto !important; top: auto !important; bottom: 0 !important; /* Runde 22: Vorlagengroesse, also 233 px hoch wie auf dem Desktop. */ max-width: none !important; z-index: 1; } .svc-photo { position: static !important; width: auto !important; height: clamp(220px, 34vw, 377px) !important; } /* Runde 16, Punkt 6.6.1 - woertlich: "Die Abstaende zwischen Ende Foto/Beginn Seigaiha-Muster und Titel ('Residential' etc.) muesste doch 233 px sein; sowie Abstand zwischen Ende Button 'mehr erfahren' und Ende Seigaiha-Muster/Beginn naechstes Foto bzw. Footer muesste doch 377 px sein." Hier standen 55 oben und 55 unten. Es gilt derselbe Takt wie bei jedem anderen Bereich der Seite: 233 hinein, 377 hinaus (unter 555 px 233, wie in der Vorlage T20 320). */ .svc-panel-3 .svc-watermark { bottom: var(--sp-bot) !important; } /* Runde 18, Punkt 6.6.1 - woertlich: "Bitte Abstaende zwischen den drei DL-Gruppen anpassen (233 px. dazwischen; nicht zuerst 377 px unterer Rand und dann 233 px oberer Rand)." Der untere Abstand entfaellt deshalb ZWISCHEN den Reihen; jede Reihe bringt nur noch ihren oberen 233er-Abstand mit. Damit ist der Abstand von Knopf zu naechstem Titel genau 233. Unveraendert bleiben die beiden Aussenmasse aus Runde 16: Beginn Muster -> erster Titel 233 letzter Knopf -> Ende Muster / CTA-Band 377 (unter 555 px 233) */ .svc-row { position: static !important; width: auto !important; height: auto !important; padding: var(--sp-area) var(--gutter) 0; z-index: 4; } .svc-r3 { padding-bottom: var(--sp-bot); } .svc-row > * { position: static !important; left: auto !important; top: auto !important; width: auto !important; } .svc-row h2 { margin: 0 0 21px; } .svc-icon { display: block; margin-bottom: 21px; } /* Runde 20, Punkt 6.6.1: "SVG-Grafiken deutlich kleiner als auf Startseite (bitte komplett gleich machen wie auf Startseite)." Stimmt - hier stand eine Verkleinerung auf 55 px Hoehe, waehrend die Startseite ihre Zeichen im Fluss unveraendert auf der Vorlagengroesse laesst (89 px, das schmale Office-Zeichen 55x89). Nachgemessen bei 375 / 900 / 1440 px: Startseite 89/55/89, hier vorher 55/34/55. Die Verkleinerung faellt damit weg; es gilt wieder die Vorlagengroesse aus services.css - also genau dasselbe Mass wie auf der Startseite. */ .svc-icon img { width: auto; height: auto; } /* Runde 23, Punkt 3: 34 statt 21 px unter dem Fliesstext. Auf der Startseite steht ueber der Liste nur eine EINZEILIGE Zeile ("Haus & Wohnung") - dort reichen 21 px. Hier steht ein zwei- bis vierzeiliger Absatz darueber, und 21 px sind fast genau der Zeilenabstand der Liste (31 px): Absatz und Liste lesen sich dann als ein einziger Block. 34 px ist die naechste Stufe der Abstandsreihe (13 / 21 / 34 / 55 / 89 / 233) und trennt beides sichtbar. Die Liste selbst bleibt unveraendert wie auf der Startseite (Zeilenhoehe 31, Schrift 15/16.5, danach 21 px bis "mehr erfahren"). */ .svc-lead { margin: 0 0 var(--sp-title); max-width: 50ch; } /* Runde 19, Punkt 6.6.1: "Wie auf Startseite die Unter-DL-Gruppen aufführen (unter Text, sonst absolut gleich wie auf Startseite, natürlich andere Schriftfarbe)." Die Masse sind an der Startseite nachgemessen (.home-svc ul im Fluss): Abstand zum Text darüber 21 Zeilenhöhe je Eintrag 31 Schrift 15 / 16.5, Schnitt 300 Abstand zu "mehr erfahren" 21 Einziger Unterschied: die Schriftfarbe ist hier Weiss, weil die Liste auf der goldenen Fläche steht. Die Hover-Unterstreichung übernimmt die Farbe automatisch (currentColor). */ .svc-row .svc-sub { display: block; list-style: none; margin: 0 0 21px; padding: 0; } .svc-row .svc-sub li { height: 31px; } .svc-row .svc-sub a { font-weight: 300; font-size: 15px; line-height: 16.5px; color: var(--color-white); } /* Der Desktop bringt seit Runde 24 einen eigenen Abstand von 21 px mit (.svc-col, siehe services.css). Im Fluss liefert ihn bereits der Aussenabstand der Liste darueber - sonst stuenden 42 px dort. */ .svc-more { display: inline-flex; margin-top: 0; } /* ========================================================= RATGEBER, ARTIKEL, GLOSSAR (Runde 23) Der Kopfbereich der Ratgeber-Uebersicht ist eine gewoehnliche .sub-canvas und faellt damit ohne Zutun in den Fluss - Rasterlinien und blasse Ziffer inbegriffen. Zu regeln sind nur die drei neuen Bausteine: Kartenliste, Artikelseite und Glossar. ========================================================= */ /* ---------- Kartenliste ---------- Auf dem Desktop stehen Foto und Text nebeneinander und tauschen beim Ueberfahren die Breite. Im Fluss gibt es kein "Ueberfahren" (Finger statt Zeiger), darum: Foto oben, Text darunter, keine Bewegung. Die abwechselnden Flaechenfarben (weiss / creme) bleiben - sie trennen die Karten voneinander. */ /* Runde 26: "Das Foto des zweiten Artikels schneidet den Button und teilweise auch Text des ersten Artikels." Ursache: Die Karte hat in der Vorlage eine feste Hoehe von 562 px und schneidet ab, was nicht hineinpasst. Nebeneinander (Desktop) geht das auf - untereinander braucht derselbe Inhalt 650 bis 763 px, also wurde die Fusszeile der ersten Karte vom Foto der zweiten verdeckt. Im Fluss waechst die Karte jetzt mit ihrem Inhalt. */ .blog-card { display: block; height: auto; overflow: visible; } .blog-card-photo, .blog-card-panel { width: 100% !important; transition: none; } .blog-card-photo { height: clamp(220px, 44vw, 377px); } .blog-card-action, .blog-card-scrim, .blog-card-over { display: none !important; } .blog-card-panel-inner { width: auto; padding: var(--sp-block) var(--gutter); } .blog-card-b .blog-card-panel-inner { margin-left: 0; } .blog-card-title, .blog-card-lead, .blog-card-foot { width: auto; max-width: var(--col); } .blog-card-title { font-size: 34px !important; line-height: 1.1 !important; } .blog-card-lead { margin-top: var(--sp-text); } /* Runde 24: Auf dem Desktop ist die Karte 562 px hoch, darum begrenzt die Vorlage Titel und Lauftext auf zwei bzw. drei Zeilen. Im Fluss waechst die Karte mit ihrem Inhalt - dort schnitt die Begrenzung den Titel mitten im Satz ab ("... Welcher Rhythmus passt zu"). Hier darf er vollstaendig umbrechen. */ .blog-card-title, .blog-card-lead, .art-nav-title { display: block; -webkit-line-clamp: none; overflow: visible; } /* "Artikel lesen" und das Datum stiessen auf schmalen Bildschirmen aneinander (das Datum wird per margin-left:auto nach rechts gedrueckt). Mit einem Mindestabstand von 21 px faellt es bei Platzmangel in die naechste Zeile, statt an den Knopf zu stossen. */ /* Runde 27: "MONAT JAHR auf Mobile und Tablet wie auf Desktop rechtsbuendig." Stimmt - die Fusszeile war nur so breit wie ihr eigener Inhalt (bei 1275 px endete sie bei x456, waehrend Titel und Lauftext bis x1131 liefen). Das Datum stand damit mitten in der Karte statt an ihrem rechten Rand. Jetzt spannt die Fusszeile dieselbe Breite auf wie der Text darueber; das Datum haengt an deren rechter Kante, und wenn der Platz nicht reicht, rutscht es rechtsbuendig in die naechste Zeile. */ /* Die Fusszeile traegt die Klasse "arrow-link" (Pfeil + Text), und die Regel dafuer weiter oben haengt jeden solchen Kasten mit "width: fit-content !important" an seinen Inhalt. Fuer einen Link allein ist das richtig - hier gehoert zur Zeile aber noch das rechtsbuendige Datum, und der Kasten muss darum die volle Textbreite aufspannen. */ .blog-card-foot.arrow-link { margin-top: var(--sp-title); width: 100% !important; max-width: var(--col) !important; align-self: stretch; margin-right: 0; white-space: normal; flex-wrap: wrap; row-gap: 13px; column-gap: 21px; } .blog-card-date { margin-left: auto; text-align: right; white-space: nowrap; } /* ---------- Artikelseite ---------- */ .art-stage { width: 100%; padding: var(--sp-area) var(--gutter) var(--sp-bot); } .art-title, .art-lead { width: auto; max-width: var(--col); } .art-lead { margin-top: var(--sp-title); } .art-figure { margin-top: var(--sp-block); } .art-figure img { height: clamp(220px, 44vw, 610px); } .art-body { margin-top: var(--sp-icon); } .art-body h2 { margin-top: var(--sp-block); } .art-body h3 { margin-top: var(--sp-icon); } /* Preistabellen sind bis zu drei Spalten breit - auf dem Handy duerfen sie waagrecht scrollen statt die Seite zu sprengen. */ .art-body table { display: block; width: 100%; overflow-x: auto; } .art-share { margin-top: var(--sp-block); } .art-nav-item { height: clamp(220px, 40vw, 377px); } .art-nav-text { left: var(--gutter); right: var(--gutter); } .art-nav-title { font-size: 21px; line-height: 27px; } /* ---------- Glossar ---------- */ .glo-head { padding: var(--sp-area) var(--gutter) var(--sp-block); } .glo-head h1, .glo-head-lead { width: auto; max-width: var(--col); } .glo-head-lead { margin-top: var(--sp-text); line-height: 21px; } .glo-search { width: 100%; max-width: var(--col); margin-top: var(--sp-icon); } .glo-body { padding: var(--sp-block) var(--gutter) var(--sp-bot); } .glo-index { margin-bottom: var(--sp-block); } .glo-group + .glo-group { margin-top: var(--sp-block); } .glo-group h2 { font-size: 34px !important; line-height: 1.1 !important; } .glo-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ---------- /impressum: zweiter Titel als

(Runde 23) ---------- "Datenschutzerklaerung" war bis v37 ein zweites

; die Seite hatte damit zwei Hauptueberschriften (Befund 6 der SEO-Analyse). Als

faellt der Titel unter ".sub-canvas h2 { font-size: 34px !important }" und waere kleiner als der erste. Diese Regel stellt sein frueheres Verhalten her; unter 788 px greift zusaetzlich die gemeinsame clamp-Regel, in deren Liste er ebenfalls steht. Nachgemessen bei 320 / 375 / 430 / 555 / 600 / 700 / 787 / 788 / 900 / 1100 / 1275 / 1440 px: ueberall identisch mit v37. */ .legal .legal-title { font-size: 55px !important; line-height: 60.5px !important; margin: 0 0 60.5px !important; } /* ---------- Startseite: "Tipps und Tricks fuer die Reinigung" ---------- Runde 24, Punkt 5.1: Der Bereich traegt jetzt dasselbe Artikel-Design wie /ratgeber. Die Karten selbst brauchen darum keine eigenen Regeln - sie stehen bereits unter .blog-card weiter oben. Zu regeln ist nur der Kopf (auf dem Desktop ein 144/233/377-Raster) und der Fussknopf. */ .home-ratgeber { padding: var(--sp-area) 0 0 !important; } .home-ratgeber-kopf { display: block; width: auto; margin: 0; padding: 0 var(--gutter); } .home-ratgeber-kopf h2 { width: auto; max-width: var(--col); /* Groesse kommt aus der gemeinsamen Reihe weiter unten. */ } .home-ratgeber-kopf p { width: auto; max-width: var(--col); margin: var(--sp-text) 0 0; } .home-ratgeber-liste { margin-top: var(--sp-block); } .home-ratgeber-fuss { padding: var(--sp-title) var(--gutter) 0; } .home-ratgeber-fuss .home-more { margin-left: 0; } /* ========================================================= PREISKALKULATOR Die Fragenspalte läuft über die volle Breite, eine Antwort pro Zeile. Die Preisspalte wird zur festen Leiste am unteren Rand – so bleibt der Preis beim Ausfüllen immer sichtbar, genau wie auf dem Desktop, nur mit dem Mittel, das auf dem Handy passt. ========================================================= */ /* Die Masse stammen jetzt aus den beiden Kalkulator-Vorlagen selbst, "T3 555 px" (2:86566) und "T20 320 px" (2:87111). Dort steht jeder Abstand als graues Rechteck eingezeichnet: Einleitung -> erster Frageblock 144 Frage-Label -> erste Antwort 8 Antwortbalken 89 (Punkt 4.2) Frageblock -> naechster Block 89 letzter Block -> Schaltflaeche 144 Schaltflaeche 233x55 */ .pk-stage { width: 100%; max-width: none; margin: 0; padding: var(--sp-top) var(--gutter) var(--sp-bot); min-height: 0 !important; } .pk-h1, .pk-intro { /* relativ statt statisch, damit der Text ueber der blassen Ziffer liegt (Runde 17, Punkt 3.2a) */ position: relative !important; z-index: 2; left: auto !important; top: auto !important; width: auto !important; max-width: var(--col); } .pk-h1 { margin-bottom: 13px; } .pk-intro { margin-bottom: 144px; } .pk-flow { position: static !important; margin-left: 0 !important; margin-top: 0 !important; top: auto !important; left: auto !important; width: 100% !important; max-width: var(--col); } .pk-block { margin-bottom: var(--sp-block); } .pk-q { margin-bottom: 8px; } /* Eine Antwort pro Zeile. Punkt 4.2: die Balken sind 89 px hoch - das ist der Wert aus beiden Vorlagen, bei 320 wie bei 555. */ .pk-row { width: 100% !important; height: auto; flex-wrap: wrap; } .pk-opt { flex: 1 1 100%; min-height: 89px; padding: 10px 21px; justify-content: flex-start; text-align: left; border-bottom: 1px solid var(--color-gray-200); } .pk-opt:last-child { border-bottom: 0; } .pk-opt span { white-space: normal; } /* Punkt 4.1: das Erklaerfenster stand rechts neben dem Info-Punkt und lief damit aus dem Bild. Im Fluss beginnt es am linken Spaltenrand, ist hoechstens so breit wie die Spalte und scrollt, wenn der Text hoeher als der halbe Bildschirm wird. Der Zeiger darunter wandert per JS unter den Info-Punkt (siehe place() in preiskalkulator.js). */ .pk-tip { left: 0 !important; right: auto !important; width: 100% !important; max-width: var(--col); } .pk-tip-inner { padding: 34px 21px; /* Obergrenze setzt place() auf den tatsaechlich vorhandenen Platz; der Wert hier ist nur die Rueckfallebene. */ max-height: min(58vh, 420px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .pk-tip-close { right: 13px; top: 13px; } /* Ist ueber dem Info-Punkt zu wenig Platz, klappt das Fenster nach unten - dann zeigt der Zeiger nach oben. */ .pk-tip.is-below .pk-tip-tail { bottom: auto; top: -13.7px; } /* Alle Bausteine der Fragenspalte sind in der Vorlage 808 breit (der Zaehler 766). Im Fluss folgen sie der Spaltenbreite. Wichtig: auch die Zwischenhuellen (.pk-cal, .pk-cal-head) - sonst rechnet das 100 % des Kalenderrasters gegen eine 808er Huelle. */ .pk-collapse, .pk-textarea, .pk-times, .pk-storen, .pk-cal, .pk-cal-grid, .pk-cal-head, .pk-cal-week, .pk-win { width: 100% !important; } /* Kalender: sieben gleich breite Spalten statt fester 115 px */ .pk-cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .pk-cal-week { grid-template-columns: repeat(7, minmax(0, 1fr)); } .pk-cal-head { display: flex; align-items: center; justify-content: space-between; height: auto; } .pk-cal-head > * { position: static !important; left: auto !important; top: auto !important; } .pk-cal-month { width: auto !important; text-align: center; } /* "Donnerstag" passt in keine 40-px-Spalte - ab hier die Kurzform */ .pk-cal-wd-long { display: none; } .pk-cal-wd-short { display: inline; } .pk-cal-rule-prev, .pk-cal-rule-next { display: none !important; } /* Zeiten: zwei feste 404er-Spalten der Vorlage werden zwei gleich breite */ .pk-times { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, 55px); grid-auto-flow: column; height: auto !important; } /* Fensterzähler: eine Kachel pro Zeile */ .pk-win { width: 100% !important; grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 34px; grid-auto-rows: auto; } .pk-win-cell { width: 200px; } /* ---------- Storenart: Bild und Beschriftung gehoeren zusammen ---------- Runde 37, Punkt 8.2: "Bei Auswahl Storentyp das Design fuer Mobile und Tablett so aendern wie bei Anzahl Fenstertyp." Bis v50 standen hier erst die vier Zeichnungen untereinander (zusammen 675 px hoch) und danach, 356 px weiter unten, die vier Beschriftungen als Liste - welches Bild zu welchem Wort gehoert, war nicht mehr zu sehen. Beim Fensterzaehler daneben ist es richtig: eine Kachel je Zeile, Bild und Bedienung beieinander. Genau das entsteht hier. Die beiden Huellen (.pk-storen und .pk-row) treten mit "display: contents" zurueck, ihre Kinder werden damit zu Feldern desselben Rasters, und die Zeilennummern setzen sie abwechselnd: Frage, Bild 1, Wort 1, Bild 2, Wort 2 ... Der Quelltext bleibt unveraendert, und auf dem Desktop greift nichts davon. */ .pk-block.has-pictos { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 13px; } .pk-block.has-pictos > .pk-q { grid-row: 1; justify-self: start; } .pk-block.has-pictos .pk-storen, .pk-block.has-pictos .pk-row { display: contents; } .pk-block.has-pictos .pk-storen-cell { justify-self: center; flex: none; width: 202px; height: 153px; } /* Die Beschriftung wird zur Kachelunterseite: weisse Karte wie sonst im Fluss, aber nur so breit wie das Bild darueber und mittig beschriftet. Die Trennlinie der Listendarstellung entfaellt - hier trennt der Abstand zur naechsten Kachel. */ .pk-block.has-pictos .pk-opt { justify-self: center; flex: none; width: 202px; min-height: 55px; margin-bottom: 21px; justify-content: center; text-align: center; background: var(--color-white); border-bottom: 0; border-radius: 5px; } .pk-block.has-pictos .pk-opt:last-child { margin-bottom: 0; } /* Zu "keine Storen" gibt es keine Zeichnung. Auf dem Desktop haelt die leere Zelle die Spalte frei, damit das Wort unter seiner Stelle bleibt; untereinander waeren es nur 153 px Leere - die Kachel besteht dort also nur aus dem Wort. */ .pk-block.has-pictos .pk-storen-cell:empty { display: none; } .pk-block.has-pictos .pk-storen-cell:nth-child(1) { grid-row: 2; } .pk-block.has-pictos .pk-row .pk-opt:nth-child(1) { grid-row: 3; } .pk-block.has-pictos .pk-storen-cell:nth-child(2) { grid-row: 4; } .pk-block.has-pictos .pk-row .pk-opt:nth-child(2) { grid-row: 5; } .pk-block.has-pictos .pk-storen-cell:nth-child(3) { grid-row: 6; } .pk-block.has-pictos .pk-row .pk-opt:nth-child(3) { grid-row: 7; } .pk-block.has-pictos .pk-storen-cell:nth-child(4) { grid-row: 8; } .pk-block.has-pictos .pk-row .pk-opt:nth-child(4) { grid-row: 9; } /* Hochladen. Punkt 4.6: "Bilder anhängen" stand neben "Mit wem haben wir das Vergnügen?" statt beim Nachrichtenfeld. Ursache: die Schaltflaeche ist in der Vorlage absolut am rechten Rand von .pk-upload gesetzt (right:0; top:0). Im Fluss wurde .pk-upload selbst static - damit hatte die Schaltflaeche keinen Bezugsrahmen mehr und sprang zum naechsten positionierten Vorfahren, und das ist .pk-block, also ganz an den Anfang des Formulars. Sie steht jetzt ebenfalls im Fluss und bleibt dadurch da, wo sie im Quelltext steht: direkt unter dem Nachrichtenfeld. */ .pk-upload, .pk-upload-list, .pk-upload-note, .pk-upload-btn { position: static !important; left: auto !important; top: auto !important; right: auto !important; width: auto !important; } .pk-upload { height: auto !important; margin-top: 21px; } .pk-upload-btn { display: inline-flex; } .pk-upload-note { text-align: left; max-width: none; margin-top: 8px; } .pk-upload-list { margin-top: 13px; flex-wrap: wrap; height: auto; } /* Runde 37, Punkt 8.1: "Button 'weiter' von PK mittig zentrieren fuer Mobile und Tablett." Die Schaltflaeche ist hoechstens 377 px breit; auf einem 768er Fenster blieben rechts davon 219 px frei, und sie stand linksbuendig. Der Behaelter ist jetzt eine Flex-Zeile mit mittiger Ausrichtung - das wirkt unabhaengig davon, ob die Schaltflaeche selbst "inline-flex" ist (bei "margin: auto" waere sie es nicht). */ .pk-next-wrap { height: auto; display: flex; justify-content: center; } .pk-next { position: relative !important; right: auto !important; width: 100% !important; max-width: 377px; } /* ---------- Preisleiste unten ---------- */ .pk-rail { position: fixed !important; left: 0 !important; right: 0 !important; /* Punkt 16.1: normalerweise 0 - sobald eine Browserleiste (Safari auf dem iPhone) ueber dem Fensterrand liegt, genau deren Hoehe. Den Wert setzt preiskalkulator.js aus window.visualViewport. */ bottom: var(--pk-unten, 0px) !important; top: auto !important; width: auto !important; height: auto !important; z-index: 400; pointer-events: none; transform: translateY(105%); transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1); } .pk-rail.is-near { transform: none; } .pk-rail-inner { position: static !important; width: auto !important; pointer-events: auto; box-shadow: 0 -6px 20px rgba(21, 21, 21, 0.18); background: var(--color-white); } .pk-side { width: auto !important; height: auto !important; max-height: 0; overflow: hidden; background: var(--color-cream) !important; transition: max-height 320ms cubic-bezier(0.16, 1, 0.3, 1); } .pk-rail.is-open .pk-side { max-height: min(52vh, 420px); overflow-y: auto; } /* Punkt 4.4, zweiter Teil: "kein Text innerhalb lesbar". Die Zusammenfassung stand mit 10 px auf einer 344er Spalte - das ist das Desktop-Mass fuer die schmale rechte Spalte. In der Leiste ist die volle Fensterbreite da; darum hier die Groesse der Vorlagen-Kleinzeile (11) und ein klarer Zeilenabstand. */ .pk-summary { position: relative !important; top: auto !important; left: auto !important; width: auto !important; height: auto !important; padding: 21px var(--gutter) 13px; } /* Runde 14: top/left MUESSEN zurueckgesetzt werden. Auf der Buehne sitzt jede Zeile absolut auf ihrer Rasterhoehe (top:144, 176, 208 ...), von updateSummary() als Inline-Stil gesetzt. Blieb dieser Wert stehen und die Zeile wurde nur von "absolute" auf "relative" umgestellt, schob ihn der Browser als VERSATZ obendrauf - die Zeilen rutschten dadurch komplett aus dem sichtbaren Feld heraus. Genau deshalb war im Feld "Ihre Angaben" kein Text zu sehen. */ .pk-sum-row { position: relative !important; top: auto !important; left: auto !important; bottom: auto !important; width: auto !important; height: auto !important; display: flex; gap: 13px; align-items: baseline; padding: 7px 0; margin-bottom: 0; border-bottom: 1px solid rgba(21, 21, 21, 0.08); } .pk-sum-row:last-child { border-bottom: 0; } .pk-sum-row > * { position: static !important; left: auto !important; top: auto !important; transform: none !important; width: auto !important; } .pk-sum-row > :last-child { margin-left: auto; text-align: right; } .pk-sum-key { font-size: 11px !important; line-height: 15px !important; color: var(--color-gray-600) !important; } .pk-sum-val { font-size: 12px !important; line-height: 15px !important; font-weight: 600 !important; color: var(--color-black) !important; } /* ---------- Punkt 4.4: der Preisbalken ---------- Vorlage "T3 555 px" (2:86566), Rechteck 8668: volle Breite, 93 px hoch, NAVY, 21 px Innenabstand links und rechts - auch auf 320 (T20, Rechteck 8669: identisch). Runde 14: die 93 der Vorlage auf das naechste Fibonacci-Mass 89 gelegt; mit der 55er Zeile "Ihre Angaben" darueber ergibt die Leiste damit genau 144. Die Beschriftung sitzt links (11 px, gesperrt), der Preis rechtsbuendig (25 px). Auf dem Desktop bleibt der Block gold und 144 px hoch, so wie es die Desktop-Frames zeigen. */ .pk-price { width: auto !important; } .pk-price-box { width: auto !important; height: auto !important; /* Punkt 16.1, zweiter Teil: Auf Geraeten mit Hausbalken (iPhone ohne Taste) liegt unten ein Schutzstreifen. Der Balken reicht weiterhin bis an die Kante - er waechst nur um diesen Streifen, und der Preis bleibt in den oberen 89 px, also darueber. */ min-height: calc(89px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 0 21px env(safe-area-inset-bottom, 0px); background: var(--color-navy) !important; box-sizing: border-box; } .pk-price-box > * { position: static !important; left: auto !important; top: auto !important; } .pk-price-key { font-size: 11px !important; line-height: 13px !important; letter-spacing: 0.144em !important; color: rgba(255, 255, 255, 0.66) !important; white-space: normal; } .pk-price-val { font-size: 25px !important; line-height: 28px !important; color: var(--color-white) !important; } .pk-price-or { display: none !important; } /* Zwei Preise (Stundenansatz ODER Fixpreis): die beiden Flaechen stehen untereinander und werden durch eine feine Linie getrennt. */ .pk-price.is-split .pk-price-box { min-height: 55px; } .pk-price.is-split .pk-price-box + .pk-price-box { border-top: 1px solid rgba(255, 255, 255, 0.22); } .pk-bar-toggle { display: flex; align-items: center; justify-content: space-between; gap: 13px; -webkit-appearance: none; appearance: none; width: 100%; min-height: 55px; padding: 13px 21px; border: 0; border-bottom: 1px solid rgba(21, 21, 21, 0.1); background: var(--color-cream); cursor: pointer; font-family: var(--font-label); font-weight: 500; font-size: 11px; letter-spacing: 0.144em; text-transform: uppercase; color: var(--color-gray-600); } .pk-bar-toggle-icon svg { display: block; width: 8px; height: 13px; transform: rotate(-90deg); transition: transform 300ms ease; } .pk-bar-toggle-icon svg path { stroke: var(--color-black); stroke-width: 1; stroke-linecap: round; fill: none; } .pk-rail.is-open .pk-bar-toggle-icon svg { transform: rotate(90deg); } /* Runde 15, Punkt 5.2: KEIN zusaetzlicher Innenabstand mehr. Die Leiste ist 144 hoch; darunter liegen ohnehin schon 377 px Luft (der Bereichs-Abstand des cremefarbenen Bandes bzw. der Buehne). Die 233 px, die hier standen, kamen oben drauf - zwischen "absenden" und dem Ende der Flaeche klafften dadurch rund 620 px. */ /* ---------- Kontaktformular ---------- Die Felder sitzen in der Vorlage absolut auf einem 103-px-Raster; im Fluss werden daraus gestapelte Zeilen, ein Feld pro Zeile. */ /* Punkt 4.8: "absenden ist ausserhalb des cremefarbenen Hintergrunds und schneidet den Titel des naechsten Abschnitts." Ursache: preiskalkulator.js setzt dem Formular die Figma-Hoehe fest ein (f.style.height = "1089px"), weil auf der Buehne alle Felder absolut sitzen und das Formular sonst die Hoehe 0 haette. Im Fluss stapeln sich die Felder aber und brauchen rund 1400 px - die letzten Zeilen samt Absenden-Schaltflaeche ragten damit aus dem Formular, aus der Fragenspalte und aus dem Cremeband heraus, und das Band wuchs nicht mit, weil es sich nach der (zu kleinen) Spalte richtet. height:auto gibt dem Formular seine echte Hoehe zurueck; alles darunter rueckt automatisch nach. */ .kf { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; max-width: var(--col); } .kf > * { left: auto !important; top: auto !important; width: auto !important; } /* Die Absenden-Schaltflaeche behaelt als einzige position:relative: ihre goldene Fuellung (.btn-fill) sitzt absolut IN ihr - waere sie static, bezoege sich die Fuellung auf die Seite und wuerde sie ueberdecken. */ .kf > *:not(.kf-submit) { position: static !important; } .kf > .kf-submit { position: relative; } .kf-label { display: block; margin: 34px 0 8px; white-space: normal; } .kf > .kf-label:first-child { margin-top: 0; } .kf-input { display: block; width: 100% !important; padding-right: 42px; } .kf-textarea { height: 144px !important; } .kf-error { display: block; margin-top: 6px; } /* Punkt 4.7: Haken und Kreuz waren ausgeblendet, weil sie in der Vorlage RECHTS NEBEN dem 610er-Feld sitzen (x1008) - dafuer ist im Fluss kein Platz. Sie stehen jetzt IM Feld, rechts innen; das Feld bekommt dafuer 42 px Innenabstand rechts. Die senkrechte Lage setzt fitMarks() in preiskalkulator.js bzw. kontakt-form (jeweils auf die Mitte des zugehoerigen Feldes). */ .kf > .kf-marks { display: block !important; position: absolute !important; left: auto !important; right: 15px !important; width: 13px !important; height: 13px; z-index: 4; pointer-events: none; } .kf-choice { flex-direction: column; gap: 13px; } .kf-choice-btn { width: 100%; min-width: 0; } .kf-check { width: auto !important; margin-top: 21px; align-items: flex-start; } .kf-check .kf-box { margin-top: 2px; } .kf-submit { width: 100% !important; max-width: 377px; margin-top: 34px; } .kf-sendstate, .pk-sendstate { position: static !important; width: auto !important; margin-top: 13px; } /* Solange keine Rueckmeldung dasteht, darf die Zeile auch keinen Abstand beanspruchen - sonst endet der cremefarbene Bereich 390 statt 377 px unter der Schaltflaeche (Punkt 5.2, nachgemessen). */ .kf-sendstate:empty, .pk-sendstate:empty { margin-top: 0; margin-bottom: 0; } /* ---------- Gold-Band über dem Footer ---------- Punkt 7: Wortmarke und Schaltflaeche standen nebeneinander; fuer "Reinigungstermin online buchen" blieben dann nur noch 244 px und der Text brach auf zwei Zeilen um. Jetzt steht die Wortmarke darueber - der Text hat die volle Spaltenbreite und passt auf eine Zeile. */ .home-footer-cta { height: auto; /* Punkt 2.5: Wortmarke und Schaltflaeche stehen im Fluss mittig. */ display: flex; flex-direction: column; align-items: center; gap: var(--sp-link); padding: 55px var(--gutter); } .home-footer-cta .footer-stage { width: 100%; height: auto; display: contents; } .home-footer-cta .home-footer-brand { position: static; } /* Punkt 2.5: Die Schaltflaeche steht im Fluss mittig - wie die Wortmarke darueber. Die allgemeine Fluss-Regel fuer .arrow-link haengt jeden Pfeil-Link mit "align-self: flex-start" und "margin-right: auto" an den linken Rand; fuer diese eine Schaltflaeche wird das hier aufgehoben. Das "nowrap" von dort faellt ebenfalls weg: "Reinigungstermin online buchen" braucht mit Pfeil rund 348 px, auf einem 320-px-Fenster stehen aber nur 278 zur Verfuegung - der Text lief rechts aus dem Bild. Jetzt darf er umbrechen. Eine kleinere Schrift waere die Alternative gewesen; sie haette aber von der Breite genau EINER Schriftwiedergabe abgehangen und waere auf jedem Geraet mit anderer Schrift wieder gerissen. Der Pfeil bleibt dabei unverkleinert in der ersten Zeile stehen. */ .home-footer-cta-link.arrow-link { position: static; align-self: center; margin-right: 0; max-width: 100%; white-space: normal; } .home-footer-cta-link.arrow-link .arrow-icon { flex: 0 0 auto; } /* ---------- Footer ---------- */ .site-footer { height: auto; padding: 55px var(--gutter); } .site-footer .footer-stage { width: 100%; height: auto; display: flex; flex-direction: column; gap: 42px; } .footer-col { position: static; width: auto; } .footer-social { position: static; margin-top: 21px; } .footer-bottom { position: static; white-space: normal; } .footer-bottom-r { margin-top: 8px; } /* Punkt 2.5: Im Fluss steht die Fusszeile mittig - Spaltentitel, Links, Icons und die beiden Zeilen ganz unten. Die Links sind Bloecke, darum reicht text-align nicht fuer die Hover-Linie: Sie ist so breit wie der Kasten, und der muss mittig sitzen statt links. */ .site-footer { text-align: center; } .site-footer .footer-stage { align-items: center; } .footer-col { display: flex; flex-direction: column; align-items: center; } .footer-col .link-underline { width: fit-content; } .footer-social { justify-content: center; } .footer-bottom-l, .footer-bottom-r { left: auto; right: auto; text-align: center; } .site-footer-pattern { width: 1440px; left: 50%; transform: translateX(-720px); } } /* ========================================================= 3. SEITENRAND – fliessend statt in Stufen Die Vorlage gibt drei Werte vor: 21 (320), 89 (555–788), 144 (ab 898). Als harte Stufen wirkt der 89er-Rand auf einem 575-px-Fenster jedoch zu gross - dort blieben von 575 px nur 397 px Inhalt. Der Rand waechst darum gleichmaessig mit: 21 px bei 320, 89 px bei 788 (beides Vorlagenwerte), dazwischen linear. Das ist die eine Stelle, an der die Vorlage bewusst ueberschrieben wird - sie stammt von 2019 und kennt die heutigen Telefonbreiten nicht. ========================================================= */ @media (max-width: 897px) { :root { --gutter: clamp(21px, calc(21px + (100vw - 320px) * 0.1456), 89px); } } /* ========================================================= 4. Rand 21 und kleinere Überschriften (bis 554) – Vorlagenwert Die 320er- und 555er-Vorlagen setzen H1 auf 34 px. ========================================================= */ /* Die Vorlagen setzen H1 bei 555 und 320 auf 34 px, bei 788 auf 55 - der Wechsel gehoert also zwischen 788 und 787. */ @media (max-width: 787px) { /* Runde 23: Die beiden Bilder "letzter / naechster Artikel" stehen auf dem Desktop nebeneinander (je 720 breit). Unter 788 px bleibt fuer zwei Titel kein Platz - sie stehen darum untereinander. */ .art-nav { flex-direction: column; } .art-nav-item { width: 100%; } /* Feedback-Runde 13, Punkt 6.1: "Schriftgroesse bei H1-Titeln auf Bildern (bspw. Über uns) viel zu klein" - und allgemein: gleiche Rolle, gleiche Groesse auf der ganzen Website. Nachgemessen war der H1 auf vier verschiedenen Werten unterwegs: 34 px auf /jobs, /kontakt, /preiskalkulator, /preisliste 55 px auf /impressum, /agb (aus .legal h1) 55 px auf /bueroreinigung, /unterhaltsreinigung (Inline-Stil) 34 px auf dem Foto-Hero - obwohl er dort am groessten sein muesste Ab jetzt EINE Regel fuer jeden H1 im Inhalt. Sie bewegt sich zwischen den beiden Vorlagenwerten 34 (320/555) und 55 (788) - nicht darueber hinaus, damit die Vorlage die Grenzen setzt und nicht ich. 575 px -> 51.8 430 px -> 38.7 320 px -> 34 main h1 steht mit dabei, weil zwei Seiten die Groesse als Inline-Stil im Quelltext tragen; ohne !important gewaenne der. */ main h1, .sub-hero h1, .home-hero h1, .sub-canvas .sub-h1, .sub-canvas .sub-pagetitle, .home-stage .home-h2, .home-ratgeber-kopf h2, .legal .legal-title, .pk-h1 { font-size: clamp(34px, 9vw, 55px) !important; line-height: 1.1 !important; } } @media (max-width: 554px) { .sub-block h2, .home-h2, .sub-canvas h2, .svc-row h2 { font-size: 30px !important; } /* Runde 23 */ .blog-card-title, .glo-group h2 { font-size: 30px !important; } .glo-group ul { grid-template-columns: minmax(0, 1fr); } /* Feld und Schaltflaeche passen nicht mehr nebeneinander: 843 px breit mit einer 233 px breiten Schaltflaeche laesst unter 555 px kein brauchbares Eingabefeld uebrig. */ .glo-search { flex-direction: column; background: transparent; } .glo-search input { background: var(--color-white); border-radius: 5px; } .glo-search button { flex: 0 0 auto; width: 100%; margin-top: 13px; } .art-nav-title { font-size: 18px; line-height: 23px; } /* Gemessen (probe/typescale.py bei 320): die Dienstleistungs-Titel der Startseite und die Kennzahlen standen als einzige noch auf 34, waehrend dieselbe Rolle auf allen anderen Seiten schon auf 26 war. */ .sub-block h2.h-sektion, .sub-sec > h2.h-sektion, .sub-canvas h2.h-sektion, .sub-block h3, .sub-sec > h3, .sub-canvas h3, .home-svc h3, .home-stat-value, .home-testimonial-card h3 { font-size: 26px !important; line-height: 1.15 !important; } /* Punkt 6.2: auch auf ganz schmalen Fenstern in der Reihe der Seitentitel. Steht bewusst NACH der Regel darueber: der Titel traegt auf manchen Seiten zusaetzlich ".h-sektion", beide Regeln sind gleich spezifisch, und dann gewinnt die spaetere. */ .sub-canvas h2.h-pk, .sub-block h2.h-pk { font-size: clamp(34px, 9vw, 55px) !important; line-height: 1.1 !important; } .sub-hero { padding-top: 120px; min-height: min(70vh, 460px); } .home-hero-stage, .pk-stage { padding-top: min(120px, 16svh); } /* Kleinzeilen: kleiner und weniger gesperrt, sonst brechen lange Wörter wie "UNTERNEHMENSGRÖSSE" mitten im Wort um. */ .sub-label, .home-values-caption, .home-stat-label, .home-svc .home-svc-label { font-size: 11px; letter-spacing: 0.08em; } .pk-day { font-size: 12px; } .pk-cal-grid { grid-auto-rows: 55px; } .home-testimonial-card { padding: 21px; } /* Kopfzeile: MENU-Wort weicht, das Zeichen bleibt */ .nav-menu-btn-label { display: none; } .nav-logo img, .menu-card-logo img { height: 26px; } } /* ========================================================= RUNDE 15, PUNKT 10 - RECHTSSEITEN OHNE TEXT-ANIMATION "Texte beginnen allg. zu spaet mit animieren (auch bei Desktop). Vielleicht sinnvoller hier Text nicht zu animieren (auch Impressum nicht)." Gilt bewusst auf ALLEN Breiten, also auch auf dem Desktop - das war der ausdrueckliche Wunsch. Damit die Desktop-Fassung dabei trotzdem Pixel fuer Pixel der v25 entspricht, bleibt die Buchstaben-Verpackung erhalten (.word/.letter/.letter-inner bestimmen Zeilenumbruch und Zeilenbreite); abgeschaltet wird nur die Bewegung. effects.js setzt dafuer body.no-typing. ========================================================= */ body.no-typing main .word-reveal { opacity: 1 !important; } body.no-typing main .word-reveal .letter-inner { transform: none !important; opacity: 1 !important; transition: none !important; animation: none !important; } /* ========================================================= BREITE BILDSCHIRME (ab 1441 px) - Runde 17, Punkt 13.1 und 13.2 Bis 1440 px bleibt alles exakt wie in der Vorlage. Darueber wuchsen bisher nur die Flaechen mit, nicht aber das Kopfbild und der cremefarbene Kasten des Kalkulators - beide endeten auf 1440 und liessen rechts und links eine leere Flaeche stehen. ========================================================= */ @media (min-width: 1441px) { /* ========================================================= 13 (Runde 25) – Verhalten ab 1441 px Runde 24 hat die Buehne zwar auf volle Breite gestellt, aber ALLES darauf mittig auf 1440 px festgehalten - auch die Farbflaechen, die Fotos und die Muster. Auf einem 1920er Bildschirm stand darum links und rechts ein leerer Streifen, auf /services rutschte der Text weit von seiner Farbflaeche weg, und im Preiskalkulator sass die Antwortspalte 240 px links neben ihrem eigenen Titel. Jetzt gilt die Aufteilung, die auch die meisten anderen Websites verwenden - in vier Schichten: FLAECHEN Farbfelder, Fotos, Muster, Baender und die grauen Rasterlinien fuellen das ganze Fenster. TEILUNGEN Wo eine Flaeche geteilt ist (Foto 542 / Muster 898 auf /services), wird die Teilung zum Prozentwert und behaelt damit ihr Verhaeltnis. INHALT Titel, Lauftext, Listen und Knoepfe bleiben auf dem 1440er-Raster und stehen mittig; die Seitenraender wachsen dadurch von 144 px bei 1440 auf 384 px bei 1920. DEKO Was in der Vorlage am Rahmen angeschnitten ist (die blassen Ziffern), haengt an der BILDSCHIRMkante. Bei genau 1440 px ist "calc(50% - 720px)" gleich null - der Uebergang ist stufenlos, an der Desktop-Darstellung aendert sich nichts. ========================================================= */ /* --- 13.1 Buehnen ueber die volle Fensterbreite --- */ .sub-canvas, .pk-stage, .svc-canvas, .home-body, .home-hero, .home-hero-stage, .home-stage, .home-tail-stage, .sub-hero { width: 100%; } /* --- 13.2 Inhalt auf dem mittigen 1440er-Raster --- Bei absolut gesetzten Bausteinen zaehlt der Aussenabstand zur left-Koordinate hinzu; er bezieht sich auf die Buehnenbreite und stimmt deshalb - anders als eine vw-Rechnung - auch mit Bildlaufleiste. "!important" ist hier noetig: einzelne Bausteine bringen eigene, hoeher gewichtete Regeln mit (".sub-canvas .sub-h1 { margin: 0 }" ist eine Klasse spezifischer als ".sub-canvas > *"). Ohne !important blieben die Titel auf /jobs, /kontakt und /ueber-uns/preisliste bei x144 stehen, waehrend alles andere mitwanderte. */ .sub-canvas > *, .pk-stage > *, .svc-canvas > *, .home-body > *, .home-hero > *, .home-hero-stage > *, .home-stage > *, .home-tail-stage > *, .sub-hero > *, .svc-row > *, .band > *, .pair > *, .pk-embed > *, .home-band-calc > *, .home-faq-list > * { margin-left: calc(50% - 720px) !important; } /* Drei Bausteine bringen einen eigenen Aussenabstand von 144 px mit - bei ihnen kommt der Versatz dazu, statt ihn zu ersetzen (144 + 50% - 720 = 50% - 576). */ .pk-stage > .pk-flow, .home-tail-stage > .home-faq-titel, .home-tail-stage > .home-faq-link { margin-left: calc(50% - 576px) !important; } /* Die unsichtbare Hauptueberschrift liegt ausserhalb des Bildes und darf nicht mitwandern. */ .nur-vorlesen { margin-left: -1px !important; } /* --- 13.3 Flaechen fuellen das Fenster --- */ .home-hero-pattern, .home-hero-stage, .home-band-calc, .home-stage, .home-tail-stage, .home-faq-list, .band, .deco-band, .pair, .pk-embed, .sub-hero-photo, .svc-row, .sub-line-h, .home-line-h, .svc-line-h { margin-left: 0 !important; left: 0 !important; right: auto !important; width: 100% !important; } /* --- 13.4 Angeschnittene Deko an der Bildschirmkante --- Runde 31: Hier stand bis v45 eine Ausnahme fuer die Wortmarken - sie blieben in Vorlagengroesse auf dem 1440er-Raster stehen, mit der Begruendung, ihre Schrift wuerde sonst mitwachsen. Das war falsch gedacht: Diese Grafiken sind in der Vorlage GENAU so breit wie der Rahmen und an beiden Kanten angeschnitten. Stehen sie auf 1440 still, bleibt auf einem 1920er Bildschirm links und rechts je ein 240 px breiter leerer Streifen - gemeldet an /services/residential/ fensterreinigung, gilt aber fuer jede Seite mit so einer Grafik. Jetzt gilt fuer ALLE angeschnittene Deko dasselbe: Sie haengt an der Bildschirmkante UND behaelt ihr Groessenverhaeltnis zum Fenster. --deko-skala ist 1 bei 1440 px und waechst linear mit (effects.js, setzeDekoSkala). Bei 1440 aendert sich dadurch nichts. */ [data-rand="links"], .home-numeral { margin-left: 0 !important; left: 0 !important; right: auto !important; transform-origin: 0 0; transform: scale(var(--deko-skala, 1)); } [data-rand="rechts"] { margin-left: 0 !important; left: auto !important; right: 0 !important; transform-origin: 100% 0; transform: scale(var(--deko-skala, 1)); } /* Die Drei-Tropfen-Grafik der Startseite ist in der Vorlage bei x1440 angeschnitten und gehoert damit ebenfalls an die Bildschirmkante. */ .home-hero-graphic { margin-left: 0 !important; left: auto !important; right: 0 !important; transform: none; } /* Die beiden Buehnen der Startseite zentrieren sich nicht ueber einen Aussenabstand, sondern ueber "left: 50%" plus "translateX(-720px)". Fuellen sie das Fenster, muss dieser Versatz weg - sonst stehen sie um 720 px zu weit links. Die senkrechte Zentrierung des Hero bleibt. */ .home-hero-stage { transform: translate(0, -50%) !important; } .home-stage { transform: none !important; } /* Der Scroll-Hinweis steht mittig im BILD, nicht mittig im Raster. */ .home-scroll-hint { margin-left: 0 !important; } /* Das Kundenstimmen-Karussell laeuft in der Vorlage rechts aus dem Rahmen - also jetzt bis an den Bildschirmrand: links 144 + Rasterversatz, Breite = Rest bis zur Bildkante. */ .home-stage > .home-testimonial-row { width: calc(50% + 576px) !important; } /* /services: Flaechen und Fotos stehen auf Prozentwerten (13.6) und duerfen den Rasterversatz nicht zusaetzlich bekommen. */ .svc-canvas > .svc-panel, .svc-canvas > .svc-photo { margin-left: 0 !important; } /* --- 13.5 Der Kopf der Ratgeber-Uebersicht ist ein Raster --- Statt eines Aussenabstands bekommt er eine fuehrende Rasterspalte: ein Prozentwert im Aussenabstand wuerde sich auf die Breite der Rasterzelle beziehen und nicht auf die des Fensters. */ .sub-canvas.blog-head { grid-template-columns: calc(50% - 720px) 144px 233px 377px 1fr; } .blog-head > * { margin-left: 0 !important; } .blog-head > .sub-h1 { grid-column: 3 / 5; } .blog-head > .sub-text { grid-column: 4; } /* Die senkrechte Rasterlinie liegt nicht IM Raster, sondern darueber - sie braucht den Versatz also weiterhin. */ .blog-head > .sub-line-v { margin-left: calc(50% - 720px) !important; } /* --- 13.6 /services: die Teilungen als Prozent --- Vorlage: Foto 542 von 1440 (Reihe 3: 543), Muster-Flaeche 898. 542/1440 = 37.6389 % 898/1440 = 62.3611 % 543/1440 = 37.7083 % 897/1440 = 62.2917 % Das Seigaiha-Muster wird in effects.js nachgefuehrt, damit es ueber die Flaechengrenzen hinweg durchlaeuft. */ .svc-panel-1 { left: 0; width: 62.3611%; } .svc-panel-2 { left: 37.6389%; width: 62.3611%; } .svc-panel-3 { left: 0; width: 62.3611%; } .svc-photo-1 { left: 62.3611%; width: 37.6389%; right: auto; } .svc-photo-2 { left: 0; width: 37.6389%; right: auto; } .svc-photo-3 { left: 62.2917%; width: 37.7083%; right: auto; } /* --- 13.7 Preiskalkulator: die cremefarbene und die goldene Flaeche reichen bis an den Bildrand. Verlaengert wird nur die FLAECHE ueber ein Anhaengsel - der Inhalt darin bleibt auf seinen Vorlagen-Koordinaten. */ .pk-side, .pk-price-box { position: relative; } .pk-side::after, .pk-price-box::after { content: ""; position: absolute; left: 100%; top: 0; bottom: 0; width: calc(50vw - 720px); pointer-events: none; } .pk-side::after { background: var(--color-cream); } .pk-price-box::after { background: var(--color-gold); } .pk-price.is-split .pk-price-box::after { background: var(--color-gold); } } /* ========================================================= 9. KOPFZEILE IM BAND 898–1275 – Runde 18, Punkt 10 Wörtlich: "So wie ich es sehe, bleibt der linke 'Rand'/'Einzug' auf der linken Seite bis ca. 900 px. Bildschirm 144 px. breit. So lange er so breit bleibt, Logo/Menu gleich lassen wie Desktop-Version (34/34...)." Nachgemessen stimmt das genau: --gutter ist von 1440 px bis hinunter zu 898 px konstant 144 px (die Figma-Leiter setzt dort den Sprung an, siehe Abschnitt 2). Erst ab 897 px wird der Einzug schmaler. Die Kopfzeile bleibt deshalb bis 898 px exakt die der Desktop-Version: 34 px Abstand von jeder Bildkante, Logo 34 px hoch, Drei-Tropfen-Zeichen 55x55. Die Handy-Anpassungen (21 px Luft + Notch-Abstand, kleineres Logo, 44-px-Tippflaeche) greifen damit erst ab 897 px - dort, wo sie gebraucht werden. Diese Regel steht bewusst NACH dem Fluss-Block: gleiche Spezifitaet, spaetere Stelle - sie ueberschreibt ihn also fuer dieses eine Band, ohne dass irgendwo ein !important noetig wird. Oberhalb von 1275 px gilt weiterhin site.css, unterhalb von 898 px weiterhin der Fluss-Block. ========================================================= */ @media (min-width: 898px) and (max-width: 1275px) { .site-header { padding-top: 34px; padding-bottom: 34px; } .site-header .container { max-width: none; padding-left: 34px; padding-right: 34px; } .nav-logo img { height: 34px; width: auto; } .nav-logo-alt img { height: 55px; width: 55px; } /* Runde 38, Punkt 4.1: Was fuer die Kopfzeile gilt, gilt in diesem Band auch fuer die Menuekarte - 34 px Rand, Wortmarke 34 px hoch. Sonst stuende sie hier auf dem Fluss-Rand (144) und waere 28 hoch. */ .menu-card-canvas { padding-left: 34px; padding-right: 34px; } .menu-card-logo img { height: 34px; } .menu-card-top { margin-top: 0; margin-bottom: 0; align-items: flex-start; min-height: 0; } /* "padding: revert" gibt dem Knopf die Browser-Vorgabe zurueck, die der Fluss-Block auf 0 setzt - damit steht das MENU-Wort im Band 898-1275 exakt so wie auf dem Desktop. Kennt ein Browser "revert" nicht, faellt die Zeile ersatzlos weg und es bleibt beim bisherigen Verhalten. */ .nav-menu-btn { min-height: 0; padding: revert; } } /* ========================================================= 10. UNSICHTBARE HAUPTUEBERSCHRIFT – Runde 21 /services und /kontakt/fragen haben von der Vorlage her keinen sichtbaren Seitentitel. Eine Seite ohne

ist fuer Suchmaschinen und fuer Vorleseprogramme eine Luecke; der Titel steht dort deshalb im Quelltext und wird nur optisch ausgeblendet. NICHT per display:none - das wuerde ihn auch fuer Vorleseprogramme entfernen. Gemeldet war: "auf Mobile und Tablett ganz unten oberhalb von Footer in navyblau und Bodoni sichtbar". Ursache: Die Regel stand in subpage.css, also VOR den Fluss-Regeln, die "position: static !important" auf alle direkten Kinder der Buehne setzen. Bei gleicher Spezifitaet gewinnt die spaeter notierte Regel - und das war die Fluss-Regel. Deshalb steht sie jetzt als ALLERLETZTE Regel der letzten Datei. Damit gewinnt sie in jedem Zusammenhang, ohne dass irgendwo eine kuenstlich hohe Spezifitaet noetig waere. ========================================================= */ /* ========================================================= BREITE SCHIRME (ab 1441) – Ratgeber und Glossar, Runde 23 Gleiche Regel wie auf /services (Runde 22): Das FOTO behaelt sein Vorlagenmass, die Flaeche daneben waechst. Ohne diese Regel wuerde das Foto proportional mitwachsen und auf einem 2560er Schirm 1084 px breit - das passt weder zum Entwurf noch zu /services. ========================================================= */ @media (min-width: 1441px) { /* Runde 25: Hier stand bis v39 ein Rest des alten Vorlagen-Hovers - die Karte zog beim Ueberfahren das Foto auf 987 px auf und blendete den Textteil ganz aus. Gemeldet und ersatzlos entfernt; die Karte ist jetzt nur noch ein Link, allein der "Artikel lesen"-Knopf hat einen Hover. Ebenfalls entfernt: die feste Fotobreite von 610 px. Seit Runde 25 gilt fuer alle Teilungen derselbe Grundsatz - sie bleiben prozentual (42.36 % Foto / 57.64 % Text, genau das Verhaeltnis der Vorlage). */ /* Das Glossar ist eine reine Textseite - sie laeuft nicht bis zum Rand, sondern bleibt auf der Vorlagenbreite stehen und rueckt in die Mitte. */ .glo-body { max-width: 1440px; margin-left: auto; margin-right: auto; } } /* ========================================================================== 33 · Abschnittstitel, die aus einer h3 hervorgegangen sind ========================================================================== Auf acht Seiten folgte auf die h1 direkt eine Reihe von h3 - die Stufe dazwischen fehlte. Diese Titel sind jetzt h2 mit der Klasse "h-sektion". Fuer ein Vorleseprogramm ist das eine Ebene hoeher, fuer das Auge soll sich NICHTS aendern. Darum wird hier alles, was ein h2 anders macht als ein h3, wieder auf die h3-Werte zurueckgeholt - Groesse wie Abstand, auf jeder Breite. Warum die Abstaende ueberhaupt betroffen sind: Unter 1276 px steuern die Regeln in Abschnitt 6 den Takt ueber :has(> h2) beziehungsweise :has(> h3:only-child). Mit der neuen Stufe wuerde ein Baustein in den h2-Takt rutschen (233/34 statt 144/13). Die Regeln unten fangen das ab. Zur Spezifitaet: ":has(> h2.h-sektion)" zaehlt (0,1,1) und schlaegt damit ":has(> h2)" mit (0,0,1); gleiche Stelle, spaeterer Platz in der Datei. ------------------------------------------------------------------ */ /* Grundform: Die Vorlage bindet Positionierung, Breite, Rand und Farbe an den Selektor "h3". Mit der neuen Stufe greift das nicht mehr, darum hier dieselben Werte noch einmal fuer h2.h-sektion. Ohne das rutschten die Titel in .sub-sec aus dem Fluss - nachgewiesen auf /fensterreinigung und /reinigungsdienste mit 103 121 beziehungsweise 147 727 abweichenden Pixeln, bevor diese Regel da war. */ .sub-block h2.h-sektion { margin: 0; font-size: 34px; color: var(--color-navy); } .sub-sec > h2.h-sektion { position: static; margin: 0 0 12.6px; width: 100%; font-size: 34px; line-height: 37.4px; color: var(--color-navy); } /* Groesse: ab 1276 px ist h2 55 px und h3 34 px. */ @media (min-width: 1276px) { .sub-canvas h2.h-sektion, h2.h-sektion { font-size: 34px; line-height: 37.4px; } } /* Unter 555 px ist h2 30 px und h3 26 px. Dazwischen sind beide gleich. */ @media (max-width: 554px) { .sub-canvas h2.h-sektion, h2.h-sektion { font-size: 26px !important; line-height: 1.15 !important; } } /* Takt im Fluss: wieder der h3-Takt (144 davor, 13 danach) statt des h2-Taktes (--sp-area davor, --sp-title danach). */ @media (max-width: 1275px) { /* ACHTUNG, hier lag der erste Anlauf daneben: Ohne ":only-child" fasste die Regel auch den Baustein NACH einem .sub-sec und gab der echten h2 darunter 13 px statt 233 px Abstand - die Seite wurde dadurch 220 px kuerzer. Die Vorlage unterscheidet genau zwei Faelle, und beide werden hier einzeln nachgebildet: Zeile 391/392 ein Titel ALLEIN im Baustein 144 davor, 13 danach Zeile 426 ein .sub-sec aus Titel + Text 144 davor */ .sub-canvas > * + *:has(> h2.h-sektion:only-child) { margin-top: 144px; } .sub-canvas > *:has(> h2.h-sektion:only-child) + * { margin-top: 13px; } .sub-canvas > * + .sub-sec:has(> h2.h-sektion + .sub-text) { margin-top: 144px; } .sub-canvas > * + .sub-sec:has(> h2.h-sektion + .sub-label) { margin-top: 144px; } .sub-canvas .sub-block > h2.h-sektion + div, .sub-canvas .sub-sec > h2.h-sektion + div { margin-top: var(--sp-kick); } /* Runde 55: Die Regel darueber verlor gegen den allgemeinen Takt ".sub-sec > *:not(.word):not(.word-grp) + *..." (Spezifitaet 0,6,0 gegen 0,3,2). Auf /fensterreinigung und /reinigungsdienste stand der Text darum 21 px unter seinem Abschnittstitel - auf allen anderen Seiten (und auf dem Desktop ueberall) sind es 13. Die beiden :not() heben die Spezifitaet ueber die allgemeine Regel. */ .sub-canvas .sub-sec > h2.h-sektion:not(.word):not(.word-grp) + .sub-text:not(.word):not(.word-grp) { margin-top: var(--sp-kick); } .sub-canvas .sub-block > h2.h-sektion, .sub-canvas .sub-sec > h2.h-sektion { margin-bottom: 0; } } .nur-vorlesen { position: absolute !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: 1px !important; height: 1px !important; min-width: 0 !important; max-width: none !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } /* ========================================================= SEHR FLACHE FENSTER (Fluss, unter 620 px Hoehe) Runde 38, Punkt 1.6, zweiter Teil: Auf einem 320 x 568 grossen Bildschirm (iPhone SE der ersten Reihe) und auf jedem quer gehaltenen Telefon passt der Kopfbereich auch mit gedeckelten Raendern nicht mehr auf eine Bildschirmhoehe - dort ist der Text selbst schon so hoch wie das Fenster. Hier ruecken darum zusaetzlich die Abstaende INNERHALB des Textblocks zusammen. Hohe Geraete sehen davon nichts. Der Block steht bewusst am DATEIENDE und nicht zwischen den anderen Abschnitten: Eine zusaetzliche Bedingung mitten in einem laufenden @media-Block schliesst diesen - alles danach haette sonst nur noch auf flachen Fenstern gegolten. ========================================================= */ @media (max-width: 1275px) and (max-height: 620px) { .home-hero { padding-top: min(90px, 6svh); padding-bottom: min(90px, 6svh); } .home-hero-stage { padding-top: min(var(--sp-top), 9svh) !important; padding-bottom: min(var(--sp-block), 7svh); } .home-hero h1 { margin-bottom: 13px; } .home-hero .home-hero-lead { margin-bottom: 21px; } .home-scroll-hint { bottom: 13px; } }