/* ========================================================= EINSATZGEBIET UND ORTSSEITEN (Runde 29) Sechs neue Seiten: /einsatzgebiet als Übersicht und fünf Ortsseiten (/reinigung-sursee, -luzern, -sempach, -hochdorf, -willisau). Zwei Grundentscheide, die hinter allen Regeln hier stehen: 1. KEINE FIGMA-KOORDINATEN, WEIL ES KEINE VORLAGE GIBT. Für diese Seiten existiert kein Entwurf. Sie wären auf erfundenen y-Werten gebaut – und jeder dieser Werte hinge an einer Zeilenzahl, die sich mit der echten Schrift anders ergibt als hier gemessen (derselbe Fehler, der in v38 die Ratgeber-Übersicht zerschossen hat). Die Bühne ist deshalb auch auf dem Desktop eine Spalte: dieselben Bausteine, dieselbe Typografie, dieselben Abstände wie überall (Bereich 233, Baustein 89, Titel 34, eng 21) – nur eben im Fluss gestapelt statt absolut gesetzt. Unterhalb von 1276 übernimmt dann ohne Umweg die bestehende Fluss-Logik aus responsive.css. 2. KEIN EINZIGER NEUER BAUSTEIN. Titel, Kleinzeile, Fliesstext, Pfeil-Link, Rasterlinien, blasse Ziffer, Bewertungskarten, Fragen-und-Antworten-Liste und der Preiskalkulator sind alle schon da. Hier stehen nur die wenigen Regeln, die eine gestapelte Bühne zusätzlich braucht. ALLES in diesem Abschnitt gilt NUR ab 1276 px. Darunter darf nichts davon greifen, sonst schlägt es die Fluss-Regeln in responsive.css (die stehen dort mit geringerer Spezifität und müssen gewinnen). ========================================================= */ @media (min-width: 1276px) { /* ---------- Die Bühne als Spalte ---------- */ .sub-canvas.ort-canvas { height: auto; padding: 233px 0 0; display: flex; flex-direction: column; align-items: flex-start; } /* Jedes Inhaltskind rückt in den Fluss und steht auf dem Raster 144 … 1296. Linien, blasse Ziffer und der Kalkulator bleiben, was sie sind: Dekoration beziehungsweise eigene Bühne. */ /* Zur Spezifitaet, weil hier schon zweimal etwas daran gescheitert ist: - :where() statt :not(.a):not(.b) - sonst zaehlten die drei Klassen in den :not()-Klammern voll mit (0,4,0) und diese Regel schluege jede nachfolgende Korrektur weiter unten. - dafuer die Huelle doppelt (.sub-canvas.ort-canvas), damit die Regel auf (0,2,0) kommt. Sie muss ".sub-canvas .sub-h1" aus subpage.css schlagen (ebenfalls (0,2,0), aber frueher geladen) - sonst bliebe der grosse Titel absolut gesetzt und ohne Einzug am linken Rand kleben. Die Korrekturen weiter unten stehen damit ebenfalls auf (0,2,0) und gewinnen, weil sie spaeter in DIESER Datei stehen. */ .sub-canvas.ort-canvas > *:not(:where(.sub-line, .sub-numeral, .pk-embed)) { position: static; left: auto; top: auto; width: 1152px; margin-left: 144px; } /* ---------- Takt. Jedes Kind trägt genau eine dieser Klassen, damit kein Geschwister-Selektor nötig ist – die beiden absolut gesetzten Dekorationskinder stünden sonst mit in der Kette. Die vier Werte sind in v48 nachgemessen und angepasst worden. Vorher standen hier die Masse des Flusses (233/89/34/21) - die gelten aber unter 1276 px, wo die Schrift kleiner ist. Auf dem Desktop atmen die uebrigen Seiten deutlich weiter. Gemessen ueber 13 Seiten bei 1440 px, Abstand vom letzten Text zum naechsten Titel: vor einem 55-px-Titel 349 … 495 px, Median 412 -> 377 vor einem 34-px-Titel haeufigster Wert 143/144 -> 144 nach einem 55-px-Titel 11 / 17 / 22 -> 21 nach einem 34-px-Titel 13 (26 von 44 Faellen) -> 13 Alle vier Zielwerte sind Hausmasse der Website (13-21-34-55-89-144- 233-377) und liegen in der gemessenen Spanne der uebrigen Seiten. Im Fluss unter 1276 px bleibt alles wie es war - dort stimmten die Abstaende schon vorher aufs Pixel mit /ueber-uns/preisliste und /services/residential/fensterreinigung ueberein. ---------- */ .ort-canvas > .ort-bereich { margin-top: 233px; } /* neuer Bereich, vor einem 55er-Titel */ /* 377 war zu viel (Rueckmeldung v50, Punkt 15.2). 233 ist das Hausmass fuer einen Bereichswechsel und deckt sich mit dem ersten Bereich. */ .ort-canvas > .ort-block { margin-top: 144px; } /* neuer Baustein, vor einem 34er-Titel */ .ort-canvas > .ort-nah { margin-top: 21px; } /* direkt unter einem 55er-Titel */ .ort-canvas > .ort-eng { margin-top: 13px; } /* unter einem 34er-Titel, Fortsetzung */ .ort-canvas > .ort-erstbereich { margin-top: 233px; } /* erster Bereich nach der Einleitung */ .ort-canvas > .ort-erst { margin-top: 0; } /* Abstand von der Ueberschrift zum Einleitungstext. Die Geschichte dieses einen Wertes, damit sie nicht noch einmal passiert: v49 Der Titelblock bekam eine Mindesthoehe von drei Zeilen, damit der Text immer auf Zeile 661 beginnt - wie auf /jobs. Bei einem zweizeiligen Titel blieb dadurch eine leere Zeile stehen. v50 Ersetzt durch einen echten Abstand von 134 px, gemessen an der Vorlage von /jobs (Titel 233..527, Text ab 661). v52 Auch das war noch falsch, und zwar aus einem Grund, den man nur mit der RICHTIGEN Schrift sieht: Auf /jobs ist der Titel so lang, dass er aus seinem 294 px hohen Kasten herauslaeuft - vom Kastenabstand 134 bleiben dort sichtbar nur rund 34 px. Auf den Ortsseiten waechst der Kasten dagegen mit dem Text, dort waren die 134 voll sichtbar. Gleicher Wert im Stylesheet, doppelt so grosser Abstand im Bild. Massgebend ist deshalb der Abstand, den man SIEHT, und das ist das Hausmass --sp-title = 34 px: derselbe Wert, den der Fluss auf jeder Seite zwischen Titel und Text setzt (nachgemessen auf /jobs, /einsatzgebiet, /kontakt und den Ortsseiten bei 375 und 768 px). */ .sub-canvas.ort-canvas > .ort-lead { margin-top: var(--sp-title, 34px); } /* Die senkrechte Rasterlinie spannt ueber die ganze Buehne. Deren Hoehe ergibt sich erst aus dem Inhalt - ein fester Wert im style-Attribut waere hier geraten und bei jeder Textaenderung falsch. */ .sub-canvas.ort-canvas > .sub-line-v { top: 0; bottom: 0; height: auto; } /* ---------- Die Spalten der übrigen Unterseiten ---------- Nachgemessen auf /ueber-uns, /jobs, /preisliste und /services/residential. Dort steht nicht alles an einer Kante, sondern auf vier wiederkehrenden Spalten: 144 … 754 (610 breit) Titel und Haupttext, linke Hälfte 377 … 754 (377 breit) die eingerückte Einleitung unter dem Titel 377 … 987 (610 breit) eingerückter Fliesstext 686 … 1296 (610 breit) rechte Hälfte 144 … 1296 (1152 breit) volle Breite (Bewertungen, Fragen) Genau diese Spalten gelten jetzt auch hier. Jeder Baustein trägt eine dieser Klassen; ohne Klasse steht er auf 144 über die volle Breite. */ .ort-canvas > .sub-h1 { width: 610px; } .ort-canvas > .ort-lead { width: 377px; margin-left: 377px; } .ort-canvas > .ort-links { width: 610px; margin-left: 144px; } .ort-canvas > .ort-sp2 { width: 610px; margin-left: 377px; } .ort-canvas > .ort-breit { width: 1152px; margin-left: 144px; } /* Runde 32: Hier stand bis v46 eine vierte Spalte auf 686 px, und jeder zweite Abschnitt sass darin. Gedacht war das als derselbe Wechsel wie auf /ueber-uns - dort gibt es tatsaechlich zwei Bausteine auf 686. In Serie gelesen ergibt das aber ein Zickzack: Ein Abschnitt steht am linken Rand, der naechste faengt in der Mitte an, der uebernaechste wieder links. Auf /ueber-uns faellt das nicht auf, weil es dort die Ausnahme ist und nicht die Regel. Alle Abschnitte stehen jetzt in einer Spalte - Titel auf 144, Fliesstext eingerueckt auf 377, genau wie auf /jobs, /ueber-uns/preisliste und /kontakt/fragen. */ /* HIER STAND IN v47 eine Regel, die jeden Abschnittstitel auf 34 px gesetzt hat. Sie ist raus, und zwar ersatzlos. Die Geschichte dazu, damit sie niemand (ich eingeschlossen) wiederholt: In v46 hiess die Rueckmeldung, auf grossen Bildschirmen seien "die ersten paar Titel gross und die anderen dann wieder normal klein". Ich habe das als Groessenproblem gelesen und alle h2 auf 34 gesetzt. Falsch. Die Groessen waren schon richtig - h2 55, h3 34, das Hausmass jeder anderen Seite. Was wirklich stoerte, war der Zickzack daneben: Die Bausteine sprangen zwischen linker und rechter Haelfte, und in diesem Durcheinander las sich der normale Wechsel 55-34-34-55 wie ein Fehler. Mit dem Zickzack ist auch der Eindruck verschwunden. Es gilt also wieder ohne Ausnahme das Hausmass aus subpage.css: h2 55 px / h3 34 px ab 1276 px, beide 34 px im Fluss, 30/26 unter 555 px. Keine Sonderregel fuer die Ortsseiten. */ } /* ========================================================= LEISTUNGSSEITEN (Runde 54) /services/office/bueroreinigung und -praxisreinigung, /services/commercial/baureinigung, -gebaeudereinigung und -veranstaltungsreinigung stehen auf DERSELBEN Spalten-Buehne wie die Ortsseiten (.ort-canvas): Jeder Baustein steht im Fluss, jeder Abstand ist ein echter Abstand vom Ende des einen zum Anfang des naechsten. Bis v53 stand /bueroreinigung auf festen Figma-Koordinaten. Als der Titel "Bueroreinigung und Praxisreinigung" zu "Bueroreinigung" wurde, war er eine Zeile kuerzer - der Text darunter blieb aber auf seiner Zeile stehen, und die Luecke wuchs von 57 auf 117 px (beim Titel "Kosten ..." von 13 auf 51). Das passiert jetzt nicht mehr. Die Werte sind die der Figma-Vorlage von /bueroreinigung (Frame 2:39022), nachgemessen an den Textkaesten - nicht an einer Zeilenzahl: Titel -> Einleitung 57 (Kasten +34, der Kasten traegt unter der letzten Zeile 24 Luft) Einleitung -> erster Abschnitt 232 (Vorlage 233 ab dem Textkasten, der 1 px kuerzer ist als n x 30) Abschnittstitel -> Text 12.6 (37.4 Zeile + 12.6 = 50) Text -> Preisraster, Raster -> Raster 7 Raster -> naechster Titel 144 Text -> naechster Titel 143 (Vorlage 144 ab dem Textkasten) Text -> Pfeil-Link 39 (wie in .sub-sec, laut Vorlage) Im Fluss unter 1276 px gelten die Regeln aus responsive.css, die schon bisher fuer /bueroreinigung galten - der Aufbau der Bausteine ist derselbe geblieben (Titel in eigener
, Text, Preisraster). ========================================================= */ @media (min-width: 1276px) { .ort-canvas > .leist-einl { margin-top: 57px; } .ort-canvas > .leist-erst { margin-top: 232px; } .ort-canvas > .leist-text { margin-top: 12.6px; } .ort-canvas > .leist-paar { margin-top: 7px; } .ort-canvas > .leist-block { margin-top: 143px; } .ort-canvas > .leist-knopf { margin-top: 39px; } /* Die Preisraster setzen ihre Zeilen absolut (Beschriftung x0, Betrag x233, Raster 30 px). Im Fluss der Spalte muss der Raster selbst darum der Bezugsrahmen sein - sonst saessen die Zeilen auf der Buehne. */ .sub-canvas.ort-canvas > .price-grid { position: relative; } } /* Zwei Pfeil-Links untereinander gehoeren zusammen (Desktop und Fluss). */ .sub-canvas.ort-canvas > .leist-eng { margin-top: 13px; } /* ========================================================= Ab hier: Regeln, die auf ALLEN Breiten gelten (Bausteine, nicht Layout). ========================================================= */ /* ---------- Blasser Ortsname ---------- Runde 32: Der Ortsname war bis v46 Live-Text in der Kopfschrift. Jetzt ist er eine SVG-Datei wie jede andere blasse Grafik der Website - nachgezeichnet aus den gelieferten Vorlagen (build/ortgrafik.py), in Cremefarbe, 300 px Tintenhoehe und mitten durch den ersten Buchstaben angeschnitten, genau wie "2a" bis "2d". Damit braucht es hier keine eigene Regel mehr: Er ist ein .sub-numeral mit data-rand="links" und verhaelt sich auf jeder Breite wie die Ziffern. */ /* ---------- Leistungsliste ---------- */ .ort-liste { list-style: none; margin: 0; padding: 0; } .ort-liste li { margin: 0 0 13px; font-weight: 300; font-size: 15px; line-height: 30px; color: var(--color-black); } .ort-liste li:last-child { margin-bottom: 0; } .ort-liste a { color: var(--color-navy); } /* ---------- Fahrzeiten-Tabelle (/einsatzgebiet) ---------- Kein : drei Rasterspalten, damit die Zeilen im Fluss ohne waagrechtes Scrollen umbrechen können. */ .ort-tabelle { display: grid; grid-template-columns: 233px 144px 1fr; column-gap: 21px; row-gap: 13px; font-weight: 300; font-size: 15px; line-height: 30px; color: var(--color-black); } .ort-tabelle > span { min-width: 0; } /* Orte MIT eigener Seite stehen navyblau und unterstreichen sich beim Ueberfahren, Orte OHNE eigene Seite in der normalen Textfarbe - sonst sehen beide gleich aus und man weiss nicht, was anklickbar ist. */ .ort-tabelle .ort-tabelle-ort { font-weight: 500; color: var(--color-black); } .ort-tabelle .ort-tabelle-ort a { color: var(--color-navy); } .ort-tabelle .ort-tabelle-zeit { white-space: nowrap; } .ort-tabelle .ort-tabelle-fokus { color: var(--color-gray-600); } .ort-tabelle a { color: var(--color-navy); } @media (max-width: 787px) { .ort-tabelle { grid-template-columns: 1fr auto; row-gap: 0; } .ort-tabelle .ort-tabelle-fokus { grid-column: 1 / -1; margin-bottom: 13px; font-size: 13px; line-height: 21px; } } /* ---------- Preisangaben: zwei Spalten wie auf /preisliste ---------- */ /* Spalten exakt wie auf /ueber-uns/preisliste: Bezeichnung ab 144, Betrag ab 377. Darum 233 + 233 OHNE Zwischenraum - 144 + 233 = 377. */ .ort-preis { display: grid; grid-template-columns: 233px 233px; column-gap: 0; row-gap: 0; font-weight: 300; font-size: 15px; line-height: 30px; color: var(--color-black); } .ort-preis .ort-preis-kopf { font-weight: 500; color: var(--color-navy); } .ort-preis > span { min-width: 0; } @media (max-width: 787px) { .ort-preis { grid-template-columns: 1fr auto; column-gap: 21px; } } /* ---------- Bewertungen auf den Ortsseiten ---------- Dieselben Karten wie auf der Startseite (.home-testimonial-*, siehe home.css). Dort hängen sie an .home-stage und sind absolut gesetzt – hier stehen sie in der Spalte, darum nur die Lage neu. */ @media (min-width: 1276px) { .ort-canvas > .home-testimonial-row { position: static; width: 1296px; margin-left: 144px; } .ort-canvas > .home-testimonial-nav { position: static; width: 1152px; margin-left: 144px; justify-content: flex-end; } } @media (max-width: 1275px) { .ort-canvas > .home-testimonial-nav { align-self: flex-end; } } /* ---------- Fragen und Antworten ---------- Dieselbe Liste wie auf der Startseite (.home-faq-*). Deren Bausteine tragen ihren Einzug (144) und ihre Breite (1152) selbst, hier muss also nur die Hülle in der Spalte stehen – und im Fluss der Einzug weg, den responsive.css dort über den Gutter regelt. */ @media (min-width: 1276px) { .ort-canvas > .ort-faq { width: 1440px; margin-left: 0; } } /* ---------- Kalkulator-Bühne ---------- Zweite .sub-canvas derselben Seite, auf den Koordinaten von /ueber-uns/preisliste (Cremefeld +0, Titel +233, Text +371, Frage +601, Gesamthöhe +1175). Doppelte Klasse, damit die Regel die gleichnamigen Regeln in responsive.css schlägt, egal in welcher Reihenfolge die Dateien geladen werden. */ .sub-canvas.ort-canvas { padding-bottom: 0 !important; } /* Titel und Einleitung der Kalkulator-Buehne stehen in EINEM Block: der Text haengt am tatsaechlichen Ende des Titels statt auf einer festen Hoehe. Braucht der Titel mit der echten Schrift eine Zeile mehr als hier gemessen, rutscht die Einleitung mit - genau der Fehler, der in v38 die Ratgeber-Uebersicht zerschossen hat. Bis zur Fragespalte (+601) bleibt auch bei drei Titelzeilen Luft. */ @media (min-width: 1276px) { .sub-canvas.ort-pk > .ort-pk-kopf { left: 144px; top: 466px; width: 689px; } .ort-pk-kopf > p { width: 610px; } } .ort-pk-kopf > h2 { margin: 0; } .ort-pk-kopf > p { margin: 34px 0 0; } @media (max-width: 1275px) { .sub-canvas.ort-pk { padding-top: var(--sp-area) !important; } } /* ========================================================================= AB 1441 px - der Fehler aus v44/v45 responsive.css Abschnitt 13 schiebt jeden Baustein einer Buehne auf das mittige 1440er-Raster: .sub-canvas > * { margin-left: calc(50% - 720px) !important; } Dieses "!important" ERSETZT den Aussenabstand des Bausteins, es addiert ihn nicht. Auf einem 1920er Bildschirm wurde aus meinen 144 px damit 240 px Rasterversatz und NULL Rand - der Inhalt klebte am linken Rand, und die senkrechte Rasterlinie stand rechts davon statt links. (Derselbe Fehler wie in Runde 25 bei .pk-flow; dort steht die Loesung schon: den eigenen Abstand in die Rechnung hineinziehen.) 144 + 50% - 720 = 50% - 576 377 + 50% - 720 = 50% - 343 686 + 50% - 720 = 50% - 34 Gegengeprueft gegen /jobs und /ueber-uns/preisliste: dort steht der Titel bei 1920 px auf x384 (= 240 + 144). Genau dort steht er jetzt auch hier. ========================================================================= */ @media (min-width: 1441px) { .sub-canvas.ort-canvas > .sub-h1, .sub-canvas.ort-canvas > .ort-links, .sub-canvas.ort-canvas > .ort-breit, .sub-canvas.ort-canvas > .home-testimonial-nav { margin-left: calc(50% - 576px) !important; } .sub-canvas.ort-canvas > .ort-lead, .sub-canvas.ort-canvas > .ort-sp2 { margin-left: calc(50% - 343px) !important; } /* Die Bewertungsreihe laeuft wie auf der Startseite rechts bis an die Bildschirmkante. */ .sub-canvas.ort-canvas > .home-testimonial-row { margin-left: calc(50% - 576px) !important; width: calc(50% + 576px) !important; } /* Die Fragenliste traegt ihren Einzug in ihren eigenen Bausteinen (.home-faq-question und Geschwister, je 144 px). Die Huelle darf deshalb keinen zweiten Versatz bekommen - den setzt ".home-faq-list > *" aus responsive.css. */ .sub-canvas.ort-canvas > .ort-faq { margin-left: 0 !important; width: 100% !important; } /* Die Kalkulator-Buehne: Titel und Einleitung sitzen absolut auf 144. */ .sub-canvas.ort-pk > .ort-pk-kopf { margin-left: calc(50% - 720px) !important; } } /* ========================================================= Senkrechte Rasterlinie im Fluss (Runde 34) ========================================================= Auf dem Desktop stehen die Ortsseiten auf ZWEI Buehnen, und jede traegt ein Stueck der senkrechten Linie - sonst endete sie dort, wo der Preisrechner anfaengt, statt bei der Fusszeile. Unter 1276 px braucht es das zweite Stueck nicht: Dort zieht fitVerticalToFooter() in effects.js die erste Linie ohnehin bis zur Fusszeile. Das zweite Stueck laege dann doppelt darueber und bekaeme in der Buehne des Rechners ausserdem keine brauchbare Hoehe. Es wird darum im Fluss ausgeblendet; effects.js ueberspringt ausgeblendete Linien von sich aus. */ @media (max-width: 1275px) { .sub-canvas.ort-pk > .sub-line-v { display: none; } }