/* Die Textschiene — eine linke Kante für die ganze Seite. * =========================================================================== * * Gemessen mit verify/gutter.mjs bei 1440px: der Fließtext begann an acht * verschiedenen Stellen — 32, 64, 68, 144, 190, 208, 224, 653. Auf 768px * waren es immer noch drei (24 / 40 / 60). * * Die Ursache ist nicht Schlamperei in einzelnen Abschnitten, sondern dass * zwei Container-Systeme nebeneinander laufen, die zufällig gleich breit sind * und deshalb nicht auffallen, bis man die Kanten misst: * * Webflow .container-large 90rem = 1440 + .padding-global 4rem * Frontier .fr-container 1440px + --fr-gutter 2rem * * Beide deckeln bei 1440. Der Text der einen beginnt bei 64, der anderen bei * 32. Ein Abschnitt aus dem Bestand über einem neu gebauten ergibt so einen * Versatz von 32px auf halber Seitenhöhe. * * Maßgeblich ist Webflows Wert, nicht meiner: er steckt in jeder noch nicht * umgebauten Section, in beiden Rechtstexten, im Kontaktformular und im Fuß. * Ihn zu ändern hieße, die halbe Seite anzufassen; --fr-gutter zu ändern * betrifft nur den Frontier-Aufbau. Die Schiene übernimmt deshalb exakt * Webflows Staffelung, Haltepunkt für Haltepunkt: * * >= 992px 4rem 64px * <= 991px 2.5rem 40px * <= 767px 2rem 32px * <= 479px 1.5rem 24px * * --fr-gutter behält damit nur noch eine Aufgabe: den Abstand des Hero-Fotos * zum Fensterrand. Das ist ein Rahmen, keine Textkante, und darf enger sein. * * Nach dem Umbau: node verify/gutter.mjs 1440 */ /* Auf :root, nicht auf [data-mode]: [data-hero="framed"] sitzt am und damit oberhalb des Seiten-Wrappers — dort muss der Wert schon gelten. */ :root { --fr-rail: 4rem; } @media (max-width: 991px) { :root { --fr-rail: 2.5rem; } } @media (max-width: 767px) { :root { --fr-rail: 2rem; } } /* Webflow hat hier einen vierten Haltepunkt, der leicht zu uebersehen ist — er steht 300 Zeilen unter den anderen in dronivo.css (Zeile 7398). Ohne ihn blieben die neuen Abschnitte auf dem Telefon bei 32px stehen, waehrend Kontaktseite, Rechtstexte und Fuss auf 24 gingen. */ @media (max-width: 479px) { :root { --fr-rail: 1.5rem; } } /* --- Frontier-Abschnitte --------------------------------------------------- */ /* Gewinnt gegen frontier.css (0,1,0) über das Attribut, unabhängig von der Ladereihenfolge — auch gegen die Regel im 991er-Block dort. */ [data-mode="frontier"] .fr-container { padding-left: var(--fr-rail); padding-right: var(--fr-rail); } /* --- Unterseiten-Hero ------------------------------------------------------ */ /* .fr-hero-inner ist dasselbe Element wie .fr-container und trug bisher Rahmen + 2.25rem = 68px: vier Pixel neben allem anderen auf der Seite. Vier Pixel sieht niemand einzeln, aber sie sind der Grund, warum die Überschrift im Hero nie ganz über der Überschrift darunter steht. */ [data-mode="frontier"] .fr-hero-inner { padding-left: var(--fr-rail); padding-right: var(--fr-rail); } /* Der Fotorahmen der Unterseiten stand bei 24px, der der Startseite bei 16 — beide Heros nebeneinander gelegt sprangen um 8px. Jetzt derselbe Rahmen, und damit auch derselbe Abstand von Text zu Bildkante (24px). */ @media (max-width: 991px) { [data-mode="frontier"] .fr-hero { --fr-gutter: 1rem; } } /* --- Startseiten-Hero ------------------------------------------------------ */ /* Anders als die Unterseiten-Hero traegt hier die Section selbst den Rahmenabstand als Polster — und damit steht ihr .container-large in einem um 2x--hero-gutter schmaleren Raum als der jeder anderen Section. Unterhalb 1440px faellt das nicht auf, weil der Container dort ohnehin die volle Restbreite fuellt. Oberhalb schon: bei 1920 zentriert sich ein 1440er Container in 1856 statt in 1920 und beginnt 32px zu weit links. Gemessen lag der Hero-Text dort auf 272, der Rest der Seite auf 304. Ein fester Abzug repariert deshalb nur einen der beiden Bereiche. Statt dessen wird der Container um genau den Betrag verschmaelert, den die Section als Polster hinzugefuegt hat — dann faellt seine Zentrierung mit der eines normalen .container-large zusammen, bei jeder Fensterbreite. */ [data-hero="framed"] .section_home-hero > .container-large { max-width: calc(90rem - 2 * var(--hero-gutter)); padding-left: calc(var(--fr-rail) - var(--hero-gutter)); padding-right: calc(var(--fr-rail) - var(--hero-gutter)); } /* --- Rechtstexte ----------------------------------------------------------- */ /* AGB und Cookie-Einstellungen schoben ihren Inhalt durch ein zusätzliches .container-medium (1024px, mittig) auf 208px — während die Überschrift im Kopf derselben Seite bei 64 stand. Das Impressum hat dieses Wrapper-Div nicht und lag längst richtig; die beiden anderen ziehen nach. Das Lesemaß geht dabei nicht verloren: .terms_content-wrapper deckelt in legal.css ohnehin bei 74ch. */ [data-mode="frontier"] .terms_section-content .container-medium { max-width: none; } /* --- Abschnittskopf -------------------------------------------------------- */ /* .fr-head war mittig gesetzt (max-width 62rem, margin-inline auto). Auf einem Abschnitt, der nur aus Kopf besteht, faellt das nicht auf — er ist ja symmetrisch. Steht darunter aber ein Kachelraster ueber die volle Breite, beginnt die Ueberschrift 160px rechts von den Kacheln, die sie ueberschreibt: gemessen bei 34 von 45 Abschnittskoepfen der Seite. Das Lesemass bleibt — 62rem verhindert weiterhin eine Ueberschrift ueber 1312px Breite. Nur die Position wechselt von mittig auf die Schiene. */ [data-mode="frontier"] .fr-head { margin-inline: 0; } /* --- CTA-Block ------------------------------------------------------------- */ /* Der Kopf im CTA ist kein Seitenkopf, sondern die linke von zwei Spalten — die Zeichnung steht rechts daneben. .fr-head brachte aus dem Seitenaufbau aber `max-width: 62rem; margin-inline: auto` mit und wurde in seiner 848px breiten Spalte auf 595px zusammengezogen und mittig gesetzt. Ergebnis: der Text begann bei 190 — einem Wert, der sich aus keinem Raster der Seite ergibt, sondern nur aus der halben Restbreite. */ [data-mode="frontier"] .fr-cta .fr-head { max-width: none; margin-inline: 0; justify-self: stretch; }