/* ============================================================================ ⚠️ WER DIESE DATEI AENDERT, MUSS DIE VERSIONSNUMMER HOCHSETZEN. Sie wird ueber f:asset.css in ACHT Templates eingebunden (Resources/Private/Content/Templates/Container{2Cols,3Cols,4Cols,2Rows2Cols, Accordion,PhotoBento,Simple,Slider}.html), jeweils mit "?v=" und einem identifier derselben Zahl. Das "?v=" ist die EINZIGE Cache-Umgehung: f:uri.resource haengt von sich aus nichts an, und der Server liefert die Datei mit "cache-control: max-age=31536000" aus - ein JAHR. Bleibt die Zahl stehen, ist die Adresse unveraendert und ein wiederkehrender Besucher sieht die Aenderung nie, egal wie oft der TYPO3-Cache geleert wird. Vor dem 5.8.2026 gab es diesen Parameter gar nicht; der identifier sah zwar wie ein Zeitstempel aus, dient TYPO3 aber nur zum Entdoppeln und steht NICHT in der Adresse. Dieselbe Falle hat container.js noch immer. ============================================================================ */ :is(.frame-type-container2cols, .frame-type-container3cols, .frame-type-container4cols, .frame-type-container2rows2cols ) .grid-row { display: flex; justify-content: space-between; flex-wrap: wrap; } :is(.frame-type-container2cols, .frame-type-container3cols, .frame-type-container4cols, .frame-type-container2rows2cols ) .grid-column { margin: 0 0.75rem; } :is(.frame-type-container2cols, .frame-type-container3cols, .frame-type-container4cols, .frame-type-container2rows2cols ) .grid-row > .grid-column:first-child { margin-left: 0; } :is(.frame-type-container2cols, .frame-type-container3cols, .frame-type-container4cols, .frame-type-container2rows2cols ) .grid-row > .grid-column:last-child { margin-right: 0; } .frame-type-container2rows2cols .grid-column, .frame-type-container2cols .grid-column { flex: 1 1 calc(50% - 0.75rem); max-width: calc(50% - 0.75rem); } /* Die Breiten haengen an den Klassen, die Container2Cols.html aus dem Layout-Feld ableitet: 1 = 66/33, 2 = 33/66, 3 = 75/25, 4 = 25/75. Weil die Klassen die Position nicht kennen, bedienen dieselben vier Regeln alle vier Layouts - width-33 gilt links wie rechts. */ /* 10.8.2026 — zwei Aenderungen an diesen vier Regeln, beide gemessen auf /testseite-grid-elements-seitenleiste bei 1700px. (a) RASTERTREUE. Vorher zog hier JEDE Spalte 0.75rem ab, also die halbe Rinne - in der Summe richtig (100% - 1.5rem), aber nicht deckungsgleich mit den Spaltenrastern: die 25%-Spalte begann bei 849.3px, die vierte Kachel des Vierspalters daneben bei 855.3px. 6px Versatz, beim 66/33 gegen den Dreispalter 4px. Stehen zwei solche Elemente untereinander, knickt die senkrechte Kante. Die Rinne wird jetzt PROPORTIONAL zur Spannweite verteilt, wie im Kachelraster und bei container3cols/container4cols: dreispaltig 1 Spalte = 100%/3 - 1rem 2 Spalten = 200%/3 - 0.5rem vierspaltig 1 Spalte = 25% - 1.125rem 3 Spalten = 75% - 0.375rem Beide Paare ergeben weiterhin 100% - 1.5rem. (b) 75/25 GILT NUR NOCH AB 1600px. Darunter sind es dieselben Werte wie bei width-66/width-33 - ein 75/25-Container rendert dort pixelgleich wie ein 66/33-Container. Grund: die 25%-Spalte wurde sonst bis 1200px immer enger und stand bei 1201px Fensterbreite in einer Seite mit Seitenleiste mit nur noch 141px da, um im naechsten Pixel ohnehin zu stapeln. 1600px ist die Grenze, an der auch das Kachelraster von vier auf drei Spalten geht ([data-columns="4"] in custom_md2022/styles-defaultscreen.css) und an der seit heute content+aside von 75/25 auf 66/33 wechseln. Das Stapeln bleibt unveraendert bei 1200px (Block weiter unten). */ .frame-type-container2cols .grid-column.width-66, .frame-type-container2cols .grid-column.width-75 { flex: 1 1 calc(200% / 3 - 0.5rem); max-width: calc(200% / 3 - 0.5rem); } .frame-type-container2cols .grid-column.width-33, .frame-type-container2cols .grid-column.width-25 { flex: 1 1 calc(100% / 3 - 1rem); max-width: calc(100% / 3 - 1rem); } @media only screen and (min-width: 1600px) { .frame-type-container2cols .grid-column.width-75 { flex: 1 1 calc(75% - 0.375rem); max-width: calc(75% - 0.375rem); } .frame-type-container2cols .grid-column.width-25 { flex: 1 1 calc(25% - 1.125rem); max-width: calc(25% - 1.125rem); } } .frame-type-container2rows2cols .grid-row { margin: 1rem 0; } .frame-type-container3cols .grid-column { flex: 1 1 calc(100% / 3 - 1rem); max-width: calc(100% / 3 - 1rem); } .frame-type-container3cols .grid-column.width-50 { flex: 1 1 calc(50% - 1rem); max-width: calc(50% - 1rem); } .frame-type-container3cols .grid-column.width-25 { flex: 1 1 calc(25% - 1rem); max-width: calc(25% - 1rem); } .frame-type-container4cols .grid-column { flex:1 1 calc(25% - 1.125rem); width:calc(25% - 1.125rem); } /* grid2rows2cols.frame-layout-1 Highlights */ .frame-type-container2rows2cols.frame-layout-1 { padding:0; } .frame-type-container2rows2cols.frame-layout-1 > header { align-items: center; background: #f45e5e; cursor: pointer; display: flex; justify-content: flex-start; min-height: 45px; padding: 0 1rem; transition: 0.4s; } .no-touchevents .frame-type-container2rows2cols.frame-layout-1 > header:hover, .frame-type-container2rows2cols.frame-layout-1 > header:active { background: #f67e7e; } .frame-type-container2rows2cols.frame-layout-1 > header > h2 { color: #ffffff; font-size: 1.125rem; font-weight: 700; margin: 0; width: 100%; } .frame-type-container2rows2cols.frame-layout-1.opened > header h2:before { content: "\f0d7"; font-family: 'Font Awesome 6 Free'; font-size: 1rem; margin-right: 10px; } .frame-type-container2rows2cols.frame-layout-1.opened > header h2:after { content: "\f00d"; font-family: 'Font Awesome 6 Free'; font-size: 1.5rem; position: absolute; right: 1rem; top: 0.5rem } .frame-type-container2rows2cols.frame-layout-1.closed > header h2:before { content: "\f0da"; font-family: 'Font Awesome 6 Free'; font-size: 1rem; margin-right: 12px; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container { padding: 2rem; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container > div.grid-row { display:flex; justify-content:space-between; flex-wrap:wrap; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container > div.grid-row > div.grid-column { flex:1 1 calc(50% - 0.75rem); min-width:calc(50% - 0.75rem); } .frame-type-container2rows2cols.frame-layout-1 .toggle-container > div.grid-row > div:first-child { margin-right:0.75rem; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container > div.grid-row > div:last-child { margin-left:0.75rem; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container > div.grid-row > div.grid-column { } .frame-type-container2rows2cols.frame-layout-1 .toggle-container > div.grid-row:last-child > div.grid-column { border-bottom:none; padding-bottom:0; margin-bottom:0; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container .ce-gallery, .frame-type-container2rows2cols.frame-layout-1 .toggle-container .ce-bodytext { flex: 1 1 100%; margin-left:0; margin-right:0; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container .ce-textpic.ce-intext.ce-nowrap.ce-left { flex-direction:column; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container .frame-type-textmedia header a { color:#000000; text-decoration:none; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container .frame-type-textmedia header a:hover { color:#003567; text-decoration:underline; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container .grid-row-2 > .grid-column > .frame { border-top: 1px solid #cccccc; padding-top: 1rem; } /* 10.8.2026 — MIT SEITENLEISTE bricht frueher um. Alle Umbruchgrenzen hier messen das FENSTER, entscheidend ist aber die Breite der Content-Spalte - und die ist auf einer Seite mit Seitenleiste nur 66-75% davon. Gemessen auf /testseite-grid-elements-seitenleiste gegen /beispielseite/testseite-container: Fenster 4cols je Spalte mit Seitenleiste ohne 1601 232 px 323 px 1599 201 px 322 px 1201 135 px 223 px <- Umbruch 1199 (2+2) 500 px 500 px OHNE Seitenleiste wird eine Kachel nie schmaler als 223px, dann bricht das Element um - das ist die Schwelle, die der Entwurf offenbar fuer vertretbar haelt. MIT Seitenleiste unterschritt derselbe Vierspalter sie schon bei 1600 und lief dann noch 400 Pixel weiter bis auf 135px, bevor er umbrach. Bei 1200 sprang er dann von 135 auf 500px, weil dort die Seitenleiste nach unten rutscht und der Content schlagartig breiter wird - Faktor 3,7 in einem Pixel. Statt einen neuen Umbruchpunkt zu erfinden, gilt der vorhandene 1200er-Block hier einfach schon ab 1600 - derselben Grenze, an der die Content-Spalte von 75% auf 66% geht (custom_md2022/styles-defaultscreen.css) und das Kachelraster von vier auf drei Spalten. Die Werte sind wortgleich aus dem 1200er-Block darunter uebernommen. ⚠️ Die beiden Rand-Ruecknahmen muessen MIT, sonst reicht die Reihe nicht: die Basisregeln setzen :first-child{margin-left:0} / :last-child{margin-right:0} mit Spezifitaet (0,4,0), der Selektor hier hat dieselbe und steht spaeter - er wuerde sie also schlagen. Ohne die Ruecknahme brauchen zwei Kacheln 12px mehr als die Reihe breit ist und es wird 1+2+1 statt 2+2 (im Browser gemessen, nicht hergeleitet). ⚠️ Bewusst NUR .width-75/.width-25, NICHT 66/33: die 33%-Spalte liegt bei 1599 mit Seitenleiste bei 280px, also ueber der Schwelle. Ausserdem haengen daran 79 Elemente gegenueber 1 beim 75/25 (Abfrage auf dev, 10.8.2026). ⚠️ Greift nur auf .pagets__default, also mehr-demokratie.de. sprezu benutzt eigene Backend-Layouts (pagets__sprezu_*) und bleibt unberuehrt - dort liegt 1 Vierspalter. ⚠️⚠️ Das "min-width: 801px" ist KEIN Schoenheitsfehler, sondern noetig. Ohne die untere Grenze gilt dieser Block auch unter 800px weiter und schlaegt dort die Regel, die alles auf volle Breite setzt - wieder wegen Spezifitaet: die 800er-Regel ist ":is(...) .grid-column" (0,2,0), der Selektor hier (0,4,0). Der 1200er-Block darunter hat das Problem nicht, weil er dieselbe Spezifitaet wie die 800er-Regel hat und vor ihr steht - da entscheidet die Quellreihenfolge. Gemessen: ohne die Grenze standen die Kacheln bei 799px zwar untereinander (flex-direction:column greift), aber mit 340 statt 704px Breite. */ @media only screen and (max-width: 1600px) and (min-width: 801px) { .pagets__default .content .frame-type-container4cols .grid-column { flex: 1 1 calc(50% - 0.75rem); width: calc(50% - 0.75rem); max-width: calc(50% - 0.75rem); margin: 1rem 0.75rem; } .pagets__default .content .frame-type-container4cols .grid-row > .grid-column:first-child { margin-left: 0; } .pagets__default .content .frame-type-container4cols .grid-row > .grid-column:last-child { margin-right: 0; } .pagets__default .content .frame-type-container4cols .grid-row > div:nth-child(2) { margin-right: 0; } .pagets__default .content .frame-type-container4cols .grid-row > div:nth-child(3) { margin-left: 0; } } @media only screen and (max-width: 1200px) { /* ⚠️ Nachgetragen 5.8.2026: der ZWEISPALTER fehlte in diesem Block. Bei den Gridelements stapelten die ungleichen Zweispalter ab 1200px: @media (max-width:1200px) .frame-type-gridelements:is(.grid2cols6633,.grid2cols7525) > div.grid-row > div.grid-column { flex:1 1 100%; width:100%; margin:0 0 2em 0; } (styles-defaultscreen.css). Beim Umzug kamen container3cols und container4cols hier an, container2cols nicht - die 25%-Spalte blieb deshalb bis hinunter zu 800px neben der 75%-Spalte stehen. Sichtbar wurde es auf der Startseite bei 876px: die schmale Spalte stand noch daneben, und die Karte in der 75%-Spalte war entsprechend gequetscht (gemeldet 5.8.2026). Gezielt auf die Breitenklassen, damit der GLEICHE Zweispalter (50/50, ohne width-Klasse) wie bisher erst bei 800px stapelt - genau die alte Aufteilung, bei der grid2cols nicht in der 1200er-Regel stand. width-66/33 gehoeren zu Layout 1+2, width-75/25 zu 3+4. flex UND max-width UND margin muessen zurueck: die Grundregeln setzen alle drei (.grid-column { margin: 0 0.75rem } und je Breitenklasse flex/max-width). 10.8.2026 GEAENDERT: hier wird nicht mehr gestapelt, sondern auf 50/50 gegangen - also genau das, was ein Zweispalter ohne Breitenklasse in diesem Bereich ohnehin tut. Unterhalb von 1200px verhalten sich damit ALLE Zweispalter gleich und stapeln gemeinsam erst bei 800px. Die ungleiche Aufteilung ist dann sowieso nicht mehr sinnvoll: bei 1201px war die schmale Spalte mit Seitenleiste noch 188px breit. Der Rest der 5.8.-Begruendung oben bleibt gueltig - es geht weiterhin nur darum, dass die ungleichen Zweispalter hier ueberhaupt reagieren. Die Regeln dafuer stehen NICHT hier, sondern in einem eigenen Block direkt hinter diesem - sie brauchen eine untere Grenze, siehe die Begruendung dort. */ .frame-type-container3cols .grid-column.width-50 { flex: 1 1 100%; max-width: 100%; margin: 1rem 0; } .frame-type-container3cols .grid-column.width-25 { flex: 1 1 calc(50% - 0.75rem); max-width: calc(50% - 0.75rem); } .frame-type-container3cols .grid-column.first { flex: 1 1 calc(50% - 0.75rem); max-width: calc(50% - 0.75rem); margin-left: 0; margin-right: 0.75rem; } .frame-type-container3cols .grid-column.last { margin-left: 0.75rem; margin-right: 0; } .frame-type-container4cols .grid-column { flex: 1 1 calc(50% - 0.75rem); width: calc(50% - 0.75rem); /* 2026-07-29 SP: seitliche Abstaende behalten - "1rem 0" hat sie geloescht, die beiden Kacheln je Reihe stiessen dadurch ohne Luecke aneinander. Die Regeln fuer nth-child(2)/(3) darunter nullen die Innenkanten wie gehabt. */ margin: 1rem 0.75rem; } .frame-type-container4cols .grid-row > div:nth-child(3) { margin-left: 0; } .frame-type-container4cols .grid-row > div:nth-child(2) { margin-right: 0; } /* ⚠️ BEKANNTE LUECKE, bewusst so gelassen (geprueft 5.8.2026): die alte Gridelements-Fassung war NICHT auf Typen eingeschraenkt (".frame-type-gridelements > div.grid-row > div.grid-column:empty" plus dieselbe Regel unter ".gridelements_container"), galt also auch fuer grid2rows2cols. Hier fehlen container2rows2cols, containerslider, containerphotobento und containeraccordion. Eine leere Spalte behaelt dort ihre Raender. Nicht ergaenzt, weil auf 16 durchgesehenen Live-Seiten in diesen Typen KEINE leere Spalte vorkommt. Taucht doch eine auf, hier in die :is()-Liste aufnehmen. */ :is(.frame-type-container2cols, .frame-type-container3cols, .frame-type-container4cols ) .grid-column:empty { margin-top: 0 !important; margin-bottom: 0 !important; } } /* 10.8.2026 — die ungleichen Zweispalter gehen unter 1200px auf 50/50, statt zu stapeln. Damit verhalten sich ALLE Zweispalter in diesem Bereich gleich (der ohne Breitenklasse tut es laengst) und stapeln gemeinsam erst bei 800px. Gemessen mit Seitenleiste: 1199 -> 500|500, 1000 -> 401|401, 801 -> 301|301. ⚠️⚠️ Eigener Block mit "min-width: 801px" statt einfach oben im 1200er-Block, und das ist kein Stil, sondern noetig: der Selektor hier ist (0,4,2) und schlaegt damit sowohl die Basis-Randruecknahmen (0,4,0) als auch die 800er-Regel (0,3,0) - Spezifitaet gewinnt gegen Quellreihenfolge. Solange hier "flex: 1 1 100%" stand, fiel das nicht auf, weil die 800er-Regel dasselbe setzt; mit 50/50 standen die Spalten bei 799px ploetzlich auf 340 statt 704px (im Browser gemessen). ⚠️ Aus demselben Grund muessen die beiden Rand-Ruecknahmen mit: ohne sie braeuchten zwei Spalten 2 x (50% - 0.75rem) + 3rem Rand = 100% + 1.5rem, die zweite bricht um - 50/50 in der Breite, aber untereinander. */ @media only screen and (max-width: 1200px) and (min-width: 801px) { .frame-type-container2cols > div.grid-row > div.grid-column:is(.width-66, .width-33, .width-75, .width-25) { flex: 1 1 calc(50% - 0.75rem); max-width: calc(50% - 0.75rem); width: calc(50% - 0.75rem); margin: 0 0.75rem; } .frame-type-container2cols > div.grid-row > div.grid-column:is(.width-66, .width-33, .width-75, .width-25):first-child { margin-left: 0; } .frame-type-container2cols > div.grid-row > div.grid-column:is(.width-66, .width-33, .width-75, .width-25):last-child { margin-right: 0; } } @media only screen and (max-width: 800px) { /* 2026-07-29 SP: Die vier eigenstaendigen Zweispalter-CTypes fehlten in beiden Aufzaehlungen - unter 800px sind sie deshalb nebeneinander stehen geblieben. Im 1200px-Block waren sie bereits vollstaendig gelistet. */ :is(.frame-type-container2cols, .frame-type-container3cols, .frame-type-container4cols, .frame-type-container2rows2cols ) .grid-row { flex-direction: column; } :is(.frame-type-container2cols, .frame-type-container2cols.width-66, .frame-type-container2cols.width-33, .frame-type-container2cols.width-75, .frame-type-container2cols.width-25, .frame-type-container3cols, .frame-type-container3cols.width-50, .frame-type-container3cols.width-25, .frame-type-container4cols, .frame-type-container2rows2cols ) .grid-column { flex: 1 1 100%; max-width: 100%; width: 100%; margin: 1rem 0; } /* 2026-08-03: Hier stand eine Sonderregel, die den vier eigenstaendigen Zweispaltern (…6633/3366/7525/2575) ihre Breiten zurueckgenommen hat. Die CTypes sind entfallen; die Aufzaehlung oben deckt container2cols samt seiner width-Klassen bereits ab. */ /* 2026-07-29 SP: Der responsive Teil von container2rows2cols war nicht mitmigriert. Diese Regeln standen als .grid2rows2cols / .gridelements_container in styles-defaultscreen.css und fehlten hier komplett - deshalb blieben die Spalten unter 800px nebeneinander stehen. Wortlaut aus dem Altbestand uebernommen. */ .frame-type-container2rows2cols.frame-layout-1 .toggle-container { padding:1.5rem 1rem 2rem 1rem; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container .ce-bodytext { margin:0; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container .ce-textpic.ce-intext.ce-nowrap.ce-left { flex-direction:column; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container > div.grid-row > div.grid-column { margin-bottom:2rem; min-width:100%; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container > div.grid-row > div.grid-column:last-child { margin-bottom:0; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container > div.grid-row:last-child > div.grid-column { margin-bottom:2rem; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container > div.grid-row-2 > div.grid-column:last-child, .frame-type-container2rows2cols.frame-layout-1 .toggle-container > div.grid-row-2 > div.grid-column:last-child .ce-bodytext { margin-bottom:0; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container > div.grid-row > div:first-child, .frame-type-container2rows2cols.frame-layout-1 .toggle-container > div.grid-row > div:last-child { flex:1 1 100%; margin-left:0; margin-right:0; padding:0; } /* wegen der Auf-/Zuklappen-Schaltflaeche */ .pageContent .frame-bgcolor-white.frame-type-container2rows2cols.frame-layout-1 { padding:0; } } /* gridSlider */ .frame-type-containerslider { /*min-width:1400px;*/ background-color: #081935; } .frame-type-containerslider .grid-row-1 .grid-column-101 .ce-textpic { position: relative; } .frame-type-containerslider .grid-row-1 .grid-column-101 .ce-bodytext { position: absolute; top: 2em; left: 2em; width: calc(55% - 4em); margin-top: 0; background-color: transparent; } .frame-type-containerslider .swiper-horizontal > .swiper-pagination-bullets, .frame-type-containerslider .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 4px; } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { width: calc(100% - 2em); } .frame-type-containerslider .swiper-pagination-bullet { background: #1271ee; width: 14px/*var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 12px))*/; height:14px/*var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 12px))*/; border: 1px solid #1271ee; opacity: 1; } .frame-type-containerslider .swiper-pagination-bullet:hover { background: #2e92ff; border-color: #2e92ff; } .frame-type-containerslider .swiper-pagination-bullet-active, .frame-type-containerslider .swiper-pagination-bullet-active:hover { background: #003567; border-color: #003567; } /* gridAccordion */ .frame-type-containeraccordion > div.grid-row { display:block; justify-items:unset; flex-wrap: unset; } .frame-type-containeraccordion > div.grid-row { padding-left:40px; } .frame-type-containeraccordion > header > * { padding-left:40px; background-color:transparent; background-position:left center; background-repeat:no-repeat; background-size:23px; cursor:pointer; } .frame-type-containeraccordion > header > h2 { background-size:19px; } .frame-type-containeraccordion > header > h3 { background-size:14px; } .frame-type-containeraccordion.closed > header > * { background-image:url('../Icons/icon_faq-closed.svg'); } .frame-type-containeraccordion.opened > header > * { background-image:url('../Icons/icon_faq-opened.svg'); } /* gridFixedBackground */ .gridFixedBackground { position:relative; width:100%; min-height:1000px; background-image:url('https://neu.mehr-demokratie.de/fileadmin/img/2026/Slider/Aerial_2019-15-11_2500px.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed; } .gridFixedBackground > div.grid-row-1 { position:absolute; bottom:0; left:0; width:100%; max-width:1400px; padding:3em; background-color:rgb(0,15,41,0.8); } .gridFixedBackground > div.grid-row-1 h1 { font-size:2.25em; font-weight:300; line-height:120%; } .gridFixedBackground > div.grid-row-1 h1 a { color:inherit; font-weight:700/*600*/; text-decoration:underline; } .gridFixedBackground > div.grid-row-1 h1 a:hover{color:#2e92ff!important;} .gridFixedBackground > div.grid-row-1 .big-morelink-left a { margin-right:20px; } /* Spezialeinstellungen für Sechserfeld unter Parallaxkasten */ /* 2026-07-29 SP: ".pageContent" mit im Selektor, damit diese Regeln spezifischer sind als ".pageContent :is(.frame-bgcolor-gray, …) { padding:1em }" aus styles-defaultscreen.css. Beide waren mit 0,3,0 gleich spezifisch; im Altbestand stand unsere Regel spaeter in der Datei und gewann dadurch. container.css wird per f:asset.css priority="1" aber FRUEHER geladen - seitdem gewann das generische 1em und der graue Kasten verlor seine 3em. */ /* 2026-07-29 SP: Auf das direkte Kind eingegrenzt. Als Nachfahren-Selektor traf die Regel auch die erste Spalte des inneren container3cols und ersetzte dort deren margin-right durch "auto" - die Spalte wurde dadurch 12px breiter als ihre beiden Nachbarinnen. */ .homepage .pageContent .frame-type-containersimple > .grid-row > .grid-column-101 { width:100%; max-width:1400px; margin:0 auto; } .homepage .pageContent .frame-type-containersimple .frame-type-container3cols { padding:3em; } .homepage .pageContent .frame-type-containersimple .frame-type-container3cols.frame-padding-top-none { padding-top:0 !important; } .homepage .pageContent .frame-type-containersimple .frame-type-container3cols.frame-padding-bottom-none { padding-bottom:0 !important; } .homepage .pageContent .frame-type-containersimple .frame-type-container3cols .ce-textpic { font-size:1.25em; } .homepage .pageContent .frame-type-containersimple .frame-type-container3cols .ce-textpic a { color:inherit; text-decoration:inherit; } .homepage .pageContent .frame-type-containersimple .frame-type-container3cols .ce-gallery { max-width:100px; margin-right:40px; } .homepage .pageContent .frame-type-containersimple .frame-type-container3cols .ce-bodytext strong { font-size:125%; } @media only screen and (max-width:1200px) { /* Slider (frueher gridelements) */ .frame-type-containerslider { /*min-width:auto;*/ } .frame-type-containerslider .grid-row-1 .grid-column-101 .ce-gallery .imageWrapper { overflow: hidden; } .frame-type-containerslider .grid-row-1 .grid-column-101 .ce-gallery .imageWrapper img { position: relative; left: -100%; width: 200%; max-width: 2200px; } .frame-type-containerslider .grid-row-1 .grid-column-101 .ce-bodytext { position: static; width: 100%; margin-top: 0; padding: 2em; background-color: #081935; } } @media only screen and (max-width:1100px) { .homepage .pageContent .frame-type-containersimple .frame-type-container3cols > div.grid-row > div.grid-column { flex: 1 1 100%; /* 2026-07-29 SP: max-width mit zuruecknehmen - die Basisregel deckelt die Spalte auf calc(100% / 3 - 1rem), sonst bleiben Spalte 2 und 3 trotz flex-basis:100% schmal. */ max-width: 100%; margin: 1em 0 1em 0; } } @media only screen and (max-width:800px) { .gridFixedBackground { padding-top: 75%; background-position: top center; background-size: contain; background-attachment: unset; } .gridFixedBackground > div.grid-row-1 { position: static; } } @media only screen and (max-width:500px) { .homepage .pageContent .frame-type-containersimple .frame-type-container3cols { padding: 1em; } .homepage .pageContent .frame-type-containersimple .frame-type-container3cols > div.grid-row > div.grid-column { margin: 2em 0 2em 0; } .homepage .pageContent .frame-type-containersimple .frame-type-container3cols .grid-column .ce-textpic { flex-direction: column; align-items: center; font-size: 24px; } .homepage .pageContent .frame-type-containersimple .frame-type-container3cols .grid-column .ce-gallery { flex: 1 1 100%; align-self: center; max-width: 100%; margin-right: 0; width: 150px; } .homepage .pageContent .frame-type-containersimple .frame-type-container3cols .grid-column .ce-gallery img { width: 100%; } .homepage .pageContent .frame-type-containersimple .frame-type-container3cols .grid-column .ce-bodytext { flex: 1 1 100%; align-self: self-start; } } @media only screen and (min-width:1600px) { .gridFixedBackground > div.grid-row-1 { left: calc(50% - 700px); margin: 0 auto; } /* 2026-07-29 SP: ebenfalls nachgezogen, siehe Kommentar im 800px-Block. */ .frame-type-container2rows2cols.frame-layout-1 .toggle-container > div.grid-row { display:flex; justify-content:space-between; flex-wrap:wrap; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container .ce-textpic.ce-intext.ce-nowrap.ce-left { flex-direction:row; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container .ce-textpic.ce-intext.ce-nowrap.ce-left .ce-gallery { margin-right:1rem; } .frame-type-container2rows2cols.frame-layout-1 .toggle-container .ce-textpic.ce-intext.ce-nowrap.ce-left .ce-bodytext { margin-left:1rem; } } /* gridphotobento — Bento-Bildraster (7 Bilder) als Containerelement. Überträgt die Optik von ".photo-grid.photo-bento" (siehe "Foto-Bento-Grid") auf die 7 .grid-column des Containers: die Rasterzeile wird zum CSS-Grid, jede Spalte zu einer Bento-Zelle (blaue Platzhalterfläche + Cover-Bild). Das Bild- Inhaltselement in jeder Zelle wird über die verschachtelten ce-Wrapper hinweg auf 100% Höhe gestreckt. */ /* Das Backend-Layout liefert ZWEI Rasterzeilen (Bilder 1-4 in .grid-row-1, Bilder 5-7 in .grid-row-2, siehe TCA/Overrides/tt_content_container.php) — sieben Backend-Spalten nebeneinander würden das Seitenmodul sprengen. Der Umbruch ist eine reine Backend-Maßnahme: im Frontend werden die beiden Zeilen per display:contents aufgelöst, der Container selbst wird zum CSS-Grid und alle 7 Bilder werden explizit platziert — die Optik (inkl. der Verzahnung: Bild 6 ragt eine Rasterzeile nach oben) bleibt exakt die der statischen Vorlage. Da der Container die volle Breite behält (blauer Hintergrund), bilden die äußeren Grid-Spalten die Seitenränder: fester Randwert + Grid-Gap ergeben zusammen das übliche seitliche Padding (12+12=24px mobil, 48+16=64px ab 768px). Reihe 1 des Grids gehört dem Container-Header (Eyebrow/Überschrift), darunter folgen die Bento-Reihen. */ .frame-type-containerphotobento { display: grid; grid-template-columns: 12px repeat(2, minmax(0, 1fr)) 12px; grid-auto-rows: 130px; gap: 12px; } .frame-type-containerphotobento > div.grid-row { display: contents; } /* Header-Zeile: automatische Höhe, Inhaltsbreite ohne eigenes Padding (die Grid-Randspalten übernehmen die Einrückung). */ .frame-type-containerphotobento { grid-template-rows: auto; } .frame-type-containerphotobento > header { grid-column: 2 / -2; grid-row: 1; max-width: none; margin: 0; padding: 0; } .frame-type-containerphotobento > div.grid-row > div.grid-column { background: var(--color-blue); position: relative; overflow: hidden; border-radius: 4px; margin: 0; } /* Mobil (2 Bild-Spalten): explizite Plätze — identisch zum Ergebnis des früheren grid-auto-flow:dense auf einer einzelnen Rasterzeile. */ .frame-type-containerphotobento > div.grid-row-1 > div.grid-column:nth-child(1) { grid-column: 2 / 4; grid-row: 2 / 4; } .frame-type-containerphotobento > div.grid-row-1 > div.grid-column:nth-child(2) { grid-column: 2 / 3; grid-row: 4 / 6; } .frame-type-containerphotobento > div.grid-row-1 > div.grid-column:nth-child(3) { grid-column: 3 / 4; grid-row: 4 / 5; } .frame-type-containerphotobento > div.grid-row-1 > div.grid-column:nth-child(4) { grid-column: 3 / 4; grid-row: 5 / 6; } .frame-type-containerphotobento > div.grid-row-2 > div.grid-column:nth-child(1) { grid-column: 2 / 4; grid-row: 6 / 8; } .frame-type-containerphotobento > div.grid-row-2 > div.grid-column:nth-child(2) { grid-column: 2 / 3; grid-row: 8 / 10; } .frame-type-containerphotobento > div.grid-row-2 > div.grid-column:nth-child(3) { grid-column: 3 / 4; grid-row: 8 / 10; } /* Bild-Inhaltselement je Zelle vollflächig füllen (ce-Wrapperkette + figure). */ .frame-type-containerphotobento > div.grid-row > div.grid-column .frame, .frame-type-containerphotobento > div.grid-row > div.grid-column .ce-textpic, .frame-type-containerphotobento > div.grid-row > div.grid-column .ce-gallery, .frame-type-containerphotobento > div.grid-row > div.grid-column .ce-outer, .frame-type-containerphotobento > div.grid-row > div.grid-column .ce-inner, .frame-type-containerphotobento > div.grid-row > div.grid-column .ce-row, .frame-type-containerphotobento > div.grid-row > div.grid-column .ce-column, .frame-type-containerphotobento > div.grid-row > div.grid-column figure { height: 100%; margin: 0; } .frame-type-containerphotobento > div.grid-row > div.grid-column img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.4s ease; } @media (hover: hover) { .frame-type-containerphotobento > div.grid-row > div.grid-column:hover img { transform: scale(1.04); } } @media (min-width: 768px) { /* Randspalten 48px + Gap 16px = 64px seitliches Padding wie überall. */ .frame-type-containerphotobento { grid-template-columns: 48px repeat(2, minmax(0, 1fr)) 48px; grid-auto-rows: 160px; gap: 16px; } } @media (min-width: 1024px) { /* 4 Bild-Spalten à max. 306px = 1272px Inhaltsbreite (wie 1400px-Container minus 2×64px Padding); die flexiblen Randspalten zentrieren den Inhalt auf breiten Viewports exakt wie der frühere max-width-Container. */ .frame-type-containerphotobento { grid-template-columns: minmax(48px, 1fr) repeat(4, minmax(0, 306px)) minmax(48px, 1fr); grid-template-rows: auto repeat(6, 140px); grid-auto-rows: 140px; } /* Platzierung wie die statische Vorlage (Bild-Spalten = Grid-Linien 2-6, Reihe 1 = Header, Bento-Reihen 2-7) — inkl. Verzahnung: Bild 6 beginnt eine Rasterzeile über der unteren Gruppe (Reihe 5) und füllt damit die vierte Reihe der dritten Spalte unter Bild 2. */ .frame-type-containerphotobento > div.grid-row-1 > div.grid-column:nth-child(1) { grid-column: 2 / 4; grid-row: 2 / 6; } .frame-type-containerphotobento > div.grid-row-1 > div.grid-column:nth-child(2) { grid-column: 4 / 5; grid-row: 2 / 5; } .frame-type-containerphotobento > div.grid-row-1 > div.grid-column:nth-child(3) { grid-column: 5 / 6; grid-row: 2 / 4; } .frame-type-containerphotobento > div.grid-row-1 > div.grid-column:nth-child(4) { grid-column: 5 / 6; grid-row: 4 / 6; } .frame-type-containerphotobento > div.grid-row-2 > div.grid-column:nth-child(1) { grid-column: 2 / 4; grid-row: 6 / 8; } .frame-type-containerphotobento > div.grid-row-2 > div.grid-column:nth-child(2) { grid-column: 4 / 5; grid-row: 5 / 8; } .frame-type-containerphotobento > div.grid-row-2 > div.grid-column:nth-child(3) { grid-column: 5 / 6; grid-row: 6 / 8; } } /* =================================================================================== 2026-07-29 SP: Nachtrag aus dem Gridelements-Altbestand Beim Abgleich von styles-defaultscreen.css und styles-plugins.css gegen diese Datei waren diese Regeln nicht mitmigriert worden. Wortlaut uebernommen, nur Klassen umgesetzt (.grid4cols -> .frame-type-container4cols usw.). =================================================================================== */ /* Fussnavigation: Abstand unter den Spalten */ .footerNaviWrapper .frame-type-container4cols .grid-column { margin-bottom:2.5rem!important; } /* Veranstaltungskarte in einem Vierspalter: Breitenbegrenzungen aufheben */ .frame-type-container4cols .mdevents_map { flex-direction:column; } .frame-type-container4cols .map_container { max-width:none!important; min-width:none!important; } .frame-type-container4cols .bgcolor-white { max-width:none!important; min-width:none!important; } .frame-type-container4cols .mdevents_map > div:first-child { max-width:none!important; min-width:none!important; } .frame-type-container4cols .mdevents_map > div:nth-child(2) { max-width:none!important; min-width:none!important; } /* Schmale zweite Spalte im 75/25-Zweispalter verhaelt sich wie eine Seitenspalte. 3.8.2026: Der eigene CType container2cols7525 ist entfallen. "grid-column-102" plus "width-25" trifft genau denselben Fall - die rechte Spalte bei Layout 3. Bei Layout 4 liegt die 25%-Spalte LINKS (grid-column-101), die ist wie zuvor nicht gemeint; bei Layout 1 ist die rechte Spalte width-33, nicht width-25. */ .frame-type-container2cols .grid-column-102.width-25 :is( .frame.bgcolor-white, .frame-bgcolor-white, .frame.bgcolor-gray, .frame-bgcolor-gray, .frame.bgcolor-darkgray, .frame-bgcolor-darkgray, .frame.bgcolor-green, .frame-bgcolor-green, .frame.bgcolor-blue, .frame-bgcolor-blue, .frame.bgcolor-darkblue, .frame-bgcolor-darkblue, .frame.bgcolor-darkblue2, .frame-bgcolor-darkblue2, .frame.bgcolor-orange, .frame-bgcolor-orange ) { padding: 1.5em 1em 2em 1em; } @media print { .frame-type-container3cols > div.grid-row > div.grid-column { max-width:100%; margin-bottom:2rem; } }