/* ============================================================ css/04-layout.css Raster -- welche Spalte wie breit, Reihenfolge auf Mobile Vierte der fünf CSS-Dateien, nach 01-reset, 02-variables, 03-typography, vor 05-components. Wird asynchron nachgeladen; was beim ersten Bild sichtbar ist, steht zusätzlich in partials/critical.css (Abschnitte 5, 10 und 11). REGELN - Hier steht nur das Raster: Spaltenbreiten, Platzierung, Reihenfolge auf Mobile. Aussehen der Kästen und Bausteine gehört in 05-components.css. - WAS IN partials/critical.css STEHT, MUSS HIER GENAUSO STEHEN. Neues Raster = drei Stellen: hier, critical.css Abschnitt 10 (Desktop) und, falls nötig, Abschnitt 11 (Mobile). - Neues Seitenraster: eigene Variante .page-layout-- im Block @media (min-width: 992px), mit Kommentar (Seite, Datum, Spaltenbreiten in Zwölfteln). Stand 01.11.2026. GLIEDERUNG Zum Springen den Abschnittstitel suchen. 1. CONTAINER + RESTBESTAND DES ALTEN RASTERS 2. SEITEN-GRID (
) artist | contact | agentur | start | agenda | footer 3. KÜNSTLERSEITE: REIHENFOLGE AUF MOBILE 4. KONTAKTSEITE: REIHENFOLGE AUF MOBILE 5. KALENDERSEITE: REIHENFOLGE AUF MOBILE ============================================================ */ /* ============================================ CONTAINER + RESTBESTAND DES ALTEN RASTERS Seiteninhalt und Footer laufen seit dem Umbau ueber das Seiten-Grid weiter unten. Vom alten Bootstrap-Raster ist nichts mehr uebrig: .row, .row--gutter, .col-1 bis .col-12 und alle .col-md-* sind entfallen. Zuletzt hing nur noch die Agenda-Liste an .row -- allerdings ohne Wirkung: .event-list setzt in 05-components.css sowohl display: block als auch margin: 0 und hat damit beides ueberschrieben, was .row beigesteuert haette. ============================================ */ /* --grid-gutter = Seitenrand des Containers (bleibt immer) --col-gutter = Abstand zwischen den Spalten (auf Mobile 0) */ :root { --col-gutter: var(--grid-gutter); } @media (max-width: 767px) { :root { --col-gutter: 0px; } } .container { margin-right: auto; margin-left: auto; padding-left: var(--grid-gutter); padding-right: var(--grid-gutter); max-width: var(--container-max-width); } .container-fluid { margin-right: auto; margin-left: auto; padding-left: var(--grid-gutter); padding-right: var(--grid-gutter); width: 100%; } /* Utility Classes */ @media (max-width: 991px) { .d-md-block { display: none !important; } } @media (min-width: 992px) { .d-md-block { display: block !important; } .d-md-inline { display: inline !important; } .d-md-flex { display: flex !important; } } /* ============================================================ ============================================================ SEITEN-GRID (
) Ersetzt .row/.col-md-* für den Seiteninhalt. Ein Grid-Container, die Spalten sind direkte Kinder -- kein Wrapper-
mehr pro Spalte. Spaltenbreiten wie vorher, gerechnet in Zwölfteln: Künstlerseite 2 | 3 | 5 | 2 Kontaktseite 2 | 7 | 3 Agentur-Seiten 2 | 7 | 3 Startseite 2 | 5 | 3 | 2 (01.11., Berichte angeglichen 06.11.) gap ist bewusst 0 und die negativen Aussenabstände bleiben: zusammen ergibt das exakt die alte Optik -- die weissen Boxen liegen Kante an Kante, die äusseren ragen einen halben Gutter über das Container-Padding hinaus. ============================================================ ============================================================ */ .page-layout { display: grid; grid-template-columns: 1fr; /* Mobile: alles untereinander */ margin-left: calc(var(--col-gutter) * -0.5); margin-right: calc(var(--col-gutter) * -0.5); } .page-layout > * { min-width: 0; /* sonst sprengt ein langes Wort die Spur */ } @media (min-width: 992px) { /* --- Künstlerseite: Navi | Inhalt (Bio + Shows) | Spotlight/Agenda --- */ .page-layout--artist { grid-template-columns: 2fr 8fr 2fr; } /* Der Inhaltsblock teilt sich intern in Bio (3) und Shows (5). Beide bleiben eigene Boxen -- zwei unterschiedlich hohe Spalten lassen sich mit vollständig flachem DOM nicht bündig stapeln (CSS kennt kein Masonry). Für Safari Reader ist das kein Problem: entscheidend ist nicht, dass Bio und Shows Geschwister sind, sondern dass sie sich EINEN Elternknoten teilen, in dem sonst nichts Linklastiges steht. Genau dafür gibt es .artist-content -- Künstler-Navi und Agenda liegen bewusst ausserhalb. */ .artist-content { display: grid; grid-template-columns: 3fr 5fr; } .artist-content > * { min-width: 0; } /* --- Kontaktseite: Navi | Titel+Formular | Direktkontakt --- Spalte 2 besteht aus zwei Elementen (Begruessung, Formular), damit auf Mobile die Direkt-Karte dazwischen passt. Auf Desktop werden sie deshalb ausdruecklich platziert: Navi und Direkt-Karte ueberspannen beide Zeilen. Beide sind kuerzer als Begruessung + Formular zusammen, darum verteilt das Grid hier keine Ueberhoehe auf die Zeilen. */ .page-layout--contact { grid-template-columns: 2fr 7fr 3fr; } .page-layout--contact > .artist-sidebar { grid-column: 1; grid-row: 1 / span 2; } .page-layout--contact > .contact-intro { grid-column: 2; grid-row: 1; } .page-layout--contact > .contact-form-col { grid-column: 2; grid-row: 2; } .page-layout--contact > .contact-info-col { grid-column: 3; grid-row: 1 / span 2; } /* Naht: Begruessung und Formular sollen wie ein durchgehender Kasten wirken -- gemeinsame Aussenkante, keine Trennlinie, kein Abstand dazwischen. Die 50px Luft unter dem Lead-Absatz kommen weiterhin aus dessen eigenem margin-bottom und bleiben INNERHALB des Kastens: Grid-Items sind eigene Formatierungskontexte, da faellt kein Rand heraus. Zwei Klassen (0,2,0) -- schlaegt .grid-box (0,1,0). */ .page-layout--contact > .contact-intro { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; } .page-layout--contact > .contact-form-col { padding-top: 0; border-top: 0; border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm); } /* --- Agentur-Seiten: Navi | Inhalt | Direkt (22.10.) --- nathalie-buchli.html, ueber-uns.html, freunde-familie.html, angebote.html. Gleiche Breiten wie Kontakt, aber nur drei Kinder in DOM-Reihenfolge -- das Grid fuellt sie von selbst ein, keine Platzierung noetig. Mobile: untereinander, Navi ausgeblendet; dafuer braucht es weder order noch eine eigene Regel. */ .page-layout--agentur { grid-template-columns: 2fr 7fr 3fr; } /* --- Startseite: Navi | Bericht gross | Bericht klein | Aktuell (01.11.) --- 2 | 5 | 3 | 2 (06.11.: grosse Spalte 6 → 5, kleine 2 → 3). Rechte Spalte so schmal wie Spalte 4 der Kuenstlerseiten; die alte Seite hatte 2 | 5 | 2 plus ein leeres Zwoelftel vor der rechten Spalte, das jetzt dem kleinen Bericht zugute kommt. Die Einfuehrung ueber beiden Berichten bleibt gleich breit (5 + 3 = 6 + 2). Fuenf Kinder, ausdruecklich platziert wie auf der Kontaktseite: der Einfuehrungstext steht in Zeile 1 ueber BEIDEN Berichten, die Navi ueberspannt beide Zeilen, die rechte Spalte (Aktuell, Termine) beginnt wie die Berichte in Zeile 2 -- rechts neben der Einfuehrung bleibt frei, wie auf der alten Seite. Die Einfuehrung ist kein Kasten (transparent, Rahmen unsichtbar): so steht sie frei wie auf der alten Seite, ihr Text aber buendig mit dem Text der Berichte darunter. grid-template-rows: auto 1fr -- Zeile 1 so hoch wie die Einfuehrung, sonst nichts. Ohne diese Angabe verteilt das Grid die Hoehe der Navi (sie ueberspannt beide Zeilen) auch auf Zeile 1, und unter der Einfuehrung klafft eine Luecke -- so geschehen, als die rechte Spalte noch beide Zeilen ueberspannte (01.11.). */ .page-layout--start { grid-template-columns: 2fr 5fr 3fr 2fr; grid-template-rows: auto 1fr; } .page-layout--start > .artist-sidebar { grid-column: 1; grid-row: 1 / span 2; } .page-layout--start > .start-intro { grid-column: 2 / span 2; grid-row: 1; } .page-layout--start > .start-haupt { grid-column: 2; grid-row: 2; } .page-layout--start > .start-zweit { grid-column: 3; grid-row: 2; } .page-layout--start > .start-side { grid-column: 4; grid-row: 2; } /* --- Kalenderseite: Filter | Termine --- Links die Filterknoepfe, rechts die Termine. Die Aufteilung ist keine Geschmacksfrage: .event-list ist in 05-components.css ein container-type: inline-size, und die grosse Agenda-Ansicht (Tageszahl 36px, Titel in --font-size-big) greift erst ab 720px Containerbreite. 9/12 von 1460px sind rund 1095px -- auf einem 1280er-Laptop bleiben noch rund 900px, die grosse Ansicht ist also ueberall sicher. Volle Breite waere technisch auch in Ordnung, nur liefe der Veranstaltungstitel dann ueber 1400px Zeilenlaenge, und die Filter haetten keinen festen Platz. */ /* --- Kalenderseite: Filter | Titel + Termine --- Gebaut wie .page-layout--contact weiter oben, und zwar ausdruecklich so: die drei Elemente werden PLATZIERT, nicht der Reihe nach eingefuellt. Der Unterschied ist nicht kosmetisch. Bei automatischer Platzierung wandert jedes Element, das aus seinem Kasten faellt, in die naechste freie Zelle -- Datumsmarker und Terminblock landen dann abwechselnd links und rechts. Mit fester Platzierung kann das nicht passieren, und die Auffangregel darunter faengt selbst unerwartete Kinder in Spalte 2 ab. Spaltenbreiten in Zwoelfteln: 2 | 10. Die Terminspalte ist damit rund 1200px breit -- .event-list ist ein container-type: inline-size, und die grosse Agenda-Ansicht braucht 720px Containerbreite. */ .page-layout--agenda { grid-template-columns: 2fr 10fr; } /* Auffangregel: alles landet in Spalte 2, solange es nicht ausdruecklich woanders platziert ist. Ein Selektor (0,1,0) plus Universalselektor -- die drei Regeln darunter (0,2,0) schlagen ihn. */ .page-layout--agenda > * { grid-column: 2; } .page-layout--agenda > .agenda-filter-box { grid-column: 1; grid-row: 1 / span 2; } .page-layout--agenda > .agenda-intro { grid-column: 2; grid-row: 1; } .page-layout--agenda > .agenda-list-col { grid-column: 2; grid-row: 2; } /* Naht wie auf der Kontaktseite: Titelblock und Liste sollen wie ein durchgehender Kasten wirken -- gemeinsame Aussenkante, keine Trennlinie, kein Abstand dazwischen. */ .page-layout--agenda > .agenda-intro { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; } .page-layout--agenda > .agenda-list-col { padding-top: 0; border-top: 0; border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm); } /* Die Filterspalte ist nur Laufstrecke, der Kasten sitzt im