/* =================================================================== gos-grid.css — ein Raster fuer die Startseite, 13.09.2026 Joerg: "sie sieht voellig unuebersichtlich aus und alles hat verschiedene breiten." Gemessen bei 1440 Pixel standen sieben Breiten nebeneinander: 1368 Kopfzeile, 1200 Held und elf Abschnitte, 1180 Lagebild, 1120 Fuss, 1040 News-Teaser, 880 Newsletter und SEO-Text, 720 die drei Handlungskaesten. Jede Kante daneben ist ein Sprung, den das Auge beim Scrollen mitmacht. Ab jetzt zwei Spuren: Inhalt 1200 (Innenmass 1152 bei 24 Rand) Lesetext 760 Seitenrand 24 am Schreibtisch, 16 am Handy, ueberall derselbe Wert. Schritt 1 ist reine Geometrie: keine Farbe, kein Text, kein Inhalt veraendert sich. Alles hier ist auf `body.home-page` begrenzt, damit die uebrigen 420 Seiten unberuehrt bleiben; die Kopfzeile ist die einzige Ausnahme und auch dort nur auf der Startseite. =================================================================== */ body.home-page { --spur-inhalt: 1200px; --spur-text: 760px; --rand: 24px; } @media (max-width: 768px) { body.home-page { --rand: 16px; } } /* --- Die Inhaltsspur ---------------------------------------------- */ body.home-page main.home-main > section > .container, body.home-page main.home-main > .container, body.home-page .hero-inner, body.home-page footer.site-footer .container { max-width: var(--spur-inhalt) !important; margin-inline: auto !important; padding-inline: var(--rand) !important; box-sizing: border-box !important; } /* Das Lagebild bringt seine eigene Huelle mit, 1180 statt 1200. 20 Pixel Unterschied sieht man nicht bewusst, das Auge springt trotzdem. */ body.home-page .lagebild .lb-wrap { max-width: var(--spur-inhalt) !important; padding-inline: var(--rand) !important; } /* Der News-Teaser sitzt bereits in einem Container und braucht keine zweite, engere Begrenzung. */ body.home-page .news-teaser-wrap { max-width: none !important; padding-inline: 0 !important; } /* --- Die Lesespur -------------------------------------------------- */ /* Was Fliesstext ist, bleibt schmal, aber alle auf demselben Mass: die drei Handlungskaesten standen auf 720, der SEO-Text und die Newsletter-Karte auf 880. */ body.home-page .cta-bridge, body.home-page .faq-cta, body.home-page .seo-cta, body.home-page .seo-content-block, body.home-page .gos-nl-cards { max-width: var(--spur-text) !important; margin-inline: auto !important; box-sizing: border-box !important; } /* Der Held traegt am Handy 18 Pixel Seitenrand, seine Huelle nochmal 16. Zwei Pixel Unterschied zu den Karten daneben sieht niemand bewusst, die Kante ist trotzdem unruhig. Der Rand sitzt ab jetzt nur an einer Stelle, naemlich an der Huelle. */ body.home-page header.hero { padding-inline: 0 !important; } /* Die Newsletter-Karte sass am Handy 24 Pixel vom Rand, alle anderen Karten 16. */ body.home-page .gos-nl-cards { padding-inline: var(--rand) !important; } /* --- Die Kopfzeile ------------------------------------------------- */ /* Die Leiste bleibt randlos, ihr Inhalt rueckt aber auf dieselbe Kante wie der Seiteninhalt: bei 1440 Pixel stand das Logo auf 36, die Ueberschrift darunter auf 144. Die Formel haelt beide zusammen, ohne feste Werte je Bildschirmbreite. */ /* 18.09.2026: Die Formel presste den Inhalt der Leiste auf feste 1152 px. Die Leiste braucht aber rund 1510 px, deshalb stand der Haupt-CTA "Jetzt berechnen" auf jeder Desktop-Breite ausserhalb des Bildes (bei 1567 px rund 184 px daneben). Die Kante wird jetzt nur so weit nachgezogen, wie Platz bleibt, hoechstens bis zum Normalrand. */ body.home-page .uh-nav { padding-inline: max(16px, min(calc((100% - var(--spur-inhalt)) / 2 + var(--rand)), 36px)) !important; } /* =================================================================== Schritt 2: Abstandsleiter und drei Abschnittstypen, 13.09.2026 Nach Schritt 1 stimmen die Kanten, der senkrechte Rhythmus aber noch nicht: gemessen 120/120 bei den meisten Abschnitten, 80/80 beim News-Streifen, 0/80 bei den drei Handlungskaesten, dazu 16, 8 und 0 Pixel unter den Ueberschriften. Zwischen zwei Abschnitten lagen so 240 Pixel Leere, mehr als ein Drittel Bildschirm. Und: acht Abschnitte sahen gleich aus. Eyebrow, Ueberschrift in 40 Pixel, Kartenraster, immer derselbe Bau. Nichts sagte dem Auge, was wichtig ist. Die Baender halfen nicht, weil `--alt` und `--highlight` denselben Ton trugen (beide rgba(162,82,10,.035)). Ab jetzt vier Abstaende auf dem 8er-Raster und drei Typen: Beweis Zahlen mit Quelle. Ruhiges Band, grosse Ueberschrift. Das Lagebild. Handlung Eine Aufforderung, kein Kartenraster. Warmes Band mit Haarlinie. Der Rechner und die Handlungskaesten. Wegweiser Karten, die weiterfuehren. Heller Grund, kleinere Ueberschrift. Tipps, Fragen, Laender, Hintergrund. Kein Inhalt wird veraendert, nur Abstand, Flaeche und Schriftgrad. =================================================================== */ body.home-page { --raum-abschnitt: 72px; --raum-kopf: 32px; --raum-karten: 24px; /* Baender. Dunkel ist der Normalfall. */ --band-ruhig: rgba(255, 255, 255, .03); --band-warm: rgba(245, 158, 11, .06); --band-linie: rgba(255, 255, 255, .07); } /* Die Hell-Werte der drei Baender stehen in gos-theme.css, dort wo die Hell-Palette wohnt. Das Tor prueft die Tokenabdeckung nur gegen diese eine Datei, und das zu Recht: sonst haette die Palette zwei Orte. */ @media (max-width: 768px) { body.home-page { --raum-abschnitt: 44px; --raum-kopf: 24px; } } /* --- Die Abstandsleiter -------------------------------------------- */ body.home-page main.home-main > section { padding-block: var(--raum-abschnitt) !important; } /* Die Handlungskaesten und die Newsletter-Karte stehen ohne Abschnitt im Fluss. Ihren Abstand geben die Nachbarn, sonst addiert sich alles. */ body.home-page main.home-main > div.container, body.home-page main.home-main > .gos-nl-cards { padding-block: 0 !important; margin-block: var(--raum-abschnitt) 0 !important; } /* Ueberschrift zum Inhalt: vorher 16, 8 und 0 Pixel je nach Abschnitt. */ body.home-page main.home-main > section > .container > h2, body.home-page main.home-main > section .section-head, body.home-page main.home-main > section > .container > .section-title { margin-bottom: var(--raum-kopf) !important; } /* Kartenraster: ein Abstand fuer alle. */ body.home-page main.home-main .cards-grid, body.home-page main.home-main .tips-grid, body.home-page main.home-main .country-grid, body.home-page main.home-main .seo-country-grid, body.home-page main.home-main .cat-grid { gap: var(--raum-karten) !important; } /* Die Kennung steht doppelt (`#tips#tips`), und das mit Absicht: home-sections.css setzt die Baender mit `body.home-page #tips.page-section.page-section--highlight` und `!important`, also mit drei Klassen. Eine Kennung plus eine Klasse verliert dagegen. Zwei Kennungen gewinnen, ohne dass ich mich an die Klassenliste binde, die sich jederzeit aendern kann. /* --- Typ 1: Beweis -------------------------------------------------- */ body.home-page #lagebild#lagebild { background: var(--band-ruhig) !important; border-block: 1px solid var(--band-linie); } /* --- Typ 2: Handlung ------------------------------------------------ */ body.home-page #calculator#calculator { background: var(--band-warm) !important; border-block: 1px solid var(--band-linie); } /* --- Typ 3: Wegweiser ----------------------------------------------- */ /* Heller Grund und eine Stufe kleinere Ueberschrift, damit der Blick zuerst auf Beweis und Handlung faellt. */ body.home-page #tips#tips, body.home-page #faq#faq, body.home-page #countryHubTeaser#countryHubTeaser, body.home-page #seoContent#seoContent { background: transparent !important; } body.home-page #tips > .container > h2, body.home-page #faq > .container > h2, body.home-page #countryHubTeaser > .container > h2, body.home-page #seoContent > .container > h2 { font-size: clamp(26px, 2.4vw, 32px) !important; } /* Damit zwei Wegweiser hintereinander nicht ineinander laufen, trennt sie eine Haarlinie statt eines weiteren Bandes. */ body.home-page #faq#faq, body.home-page #countryHubTeaser#countryHubTeaser, body.home-page #seoContent#seoContent { border-top: 1px solid var(--band-linie); } /* Unter 380 Pixel setzt ux-rhythm.css eigene Polster je Kennung, ein Notbehelf vom 05.05. mit 28 statt der 44 der Leiter. Auf einem iPhone SE sah der Rhythmus dadurch anders aus als auf einem iPhone 15. Die Leiter gilt ab jetzt auf jeder Breite. */ body.home-page main.home-main > #lagebild#lagebild, body.home-page main.home-main > #calculator#calculator, body.home-page main.home-main > #tips#tips, body.home-page main.home-main > #faq#faq, body.home-page main.home-main > #countryHubTeaser#countryHubTeaser, body.home-page main.home-main > #seoContent#seoContent { padding-block: var(--raum-abschnitt) !important; } /* Der News-Streifen ist kein eigener Abschnitt, sondern eine Zeile. Er bekommt entsprechend wenig Raum. */ body.home-page main.home-main > #newsTeaser#newsTeaser, body.home-page #newsTeaser#newsTeaser { padding-block: calc(var(--raum-abschnitt) * .6) !important; background: transparent !important; }