/* styleIn.css */ .button-menu .fa{color:#ffc412}.overlay-menu ul.level_1 > li > a.active,.overlay-menu ul.level_1 > li > span.active,.overlay-menu ul.level_1 > li > span.trail,.overlay-menu ul.level_1 > li > a.trail,.overlay-menu ul.level_1 > li > a:hover,.overlay-menu ul.level_1 > li > span:hover,.overlay-menu ul.level_2 > li > a.active,.overlay-menu ul.level_2 > li > span.active,.overlay-menu ul.level_2 > li > span.trail,.overlay-menu ul.level_2 > li > a.trail,.overlay-menu ul.level_2 > li > a:hover,.overlay-menu ul.level_2 > li > span:hover,.overlay-menu ul.level_2 > .forward > span,.ce_downloads a:hover .downloadicon{color:#ffc412}.ce_accordion .toggler{border-top:1px solid #ffc412}#footer .submit{color:#ffc412}.light-bg{background-color:#dedfdf}.redborder figure{border-bottom:4px solid #ffc412}.fa-white .fa:hover,.home #newsletter .submit,#slider .page-scroll em,.dark-bg,footer .footercontainer,footer .footercontainer .container,#slider .slider-control a.slider-prev:before,#slider .slider-control a.slider-next:after,.slider-control a.slider-prev:before,.slider-control a.slider-next:after,.pagination li span:hover,.pagination li a:hover,.overlay-menu,.fixedTop .topbar,.topbar{background-color:#000000}.rightblock h3,h1:before,h1:after{border-bottom:1px solid #ffc412}table thead tr{border-bottom:2px solid #ffc412}table.calendar td.active,.iconTrans img,.fa-white .fa,p.more a:hover,p.back:hover,#willkommen .image_container,.mod_quicknav select,#footer .submit,#header .mainnavi ul.level_2,#header .mainnavi ul.level_3,.submit:hover,.btn:hover,.ce_accordion .toggler:hover,.ui-accordion-icons.active,p.footerIcons a:hover:after,a.btn,.submit:hover,.mod_eventlist div.header a,p.more a,p.back a,p.info a,.newstxt p.more a,p.back,.submit:before{background-color:#ffc412}footer .mod_navigation li a:hover,footer .mod_navigation li span:hover,footer .mod_navigation li a.active,footer .mod_navigation li span.active,footer .mod_navigation li span.trail,footer .mod_navigation li a.trail,.mainnavi .level_1 a:hover,.mainnavi .level_1 span:hover,.topnavi a:hover,.topnavi a:focus,header .submit,a:active,a:hover,.level_1 > li:hover,#slider .slider-control a.slider-prev:hover:before,#slider .slider-control a.slider-next:hover:after,.slider-control a.slider-prev:hover:before,.slider-control a.slider-next:hover:after,.orange,.scrolltop a:hover:after,.slider-control .slider-menu b.active{color:#ffc412;text-shadow: none}.button-menu .fa:hover,.fa-lila .fa,footer a:hover,.mod_newslist h2 a:hover,.mod_eventlist h2 a:hover,.mod_eventlist a:hover,.event-icon,.date{color:#ffc412;text-shadow: none}.white-bg:hover,a.btn:before,.submit,div.overlay-textinput .submit:hover,p.socialIcons a:hover:after,.mod_eventlist div.header a:hover,p.more a:hover,p.back a:hover,p.info a:hover,.newstxt p.more a:before,p.back a:before,.submit,p.error{background-color:#ffc412}figure.image_container figcaption,h1,h2,h4,#footer .submit:hover,.fa{color:#000000}a{color:#353535;text-shadow: none}.OutsideIn,.OutsideIn p,.OutsideIn h2{color:#000000}.InsideOut{background-color:#fff;color:#000000}.slider-Bg{background-image:url("/files/577-outdoor/img/header-pic.jpg");background-size: cover;background-attachment: fixed}.areaBg-2{background-image:url("/files/578-patio/img/banner1.jpg");background-size: cover;background-attachment: fixed}.areaBg-3{background-image:url("/files/578-patio/raster/liegestuhl_6G3A2518_1920x933.jpg");background-size: cover;background-attachment: fixed}.areaBg-4grau{background-image:url("/files/578-patio/img/banner_grau.jpg");background-size: cover;background-attachment: fixed}.areaBg-Tasse{background-image:url("/files/578-patio/raster/tassen_6G3A1729_1920x933.jpg");background-size: cover;background-attachment: fixed}.areaBg-projekte{background-image:url("/files/578-patio/raster/obst_6G3A1812_1920x500.jpg");background-position:center top;background-repeat:no-repeat}.areaBg-start{background-image:url("/files/578-patio/raster/buch_6G3A1690_1920x933_2.jpg");background-repeat:no-repeat;background-attachment: fixed;background-size: cover}.areaBg-schuhe{background-image:url("/files/578-patio/raster/schuhe_6G3A2480_1920x933.jpg");background-repeat:no-repeat;background-attachment: fixed;background-size: cover}.areaBg-kunden{background-image:url("/files/578-patio/raster/buch_6G3A1832_1920x933.jpg");background-repeat:no-repeat;background-attachment: fixed;background-size: cover}.overlay-menu ul.level_2 > .forward > span{color:#ffc412}.box-wrapper{display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 40px;flex-grow: 1} /* ------------------------------------------------------------------ */ /* Eigene Anpassungen NAB, ergaenzt 06.09.2026 */ /* ------------------------------------------------------------------ */ /* --- 1. Logo in der Kopfleiste vom oberen Rand loesen (Wunsch Nicole) --- Gestaffelt, weil die Leiste je nach Breite unterschiedlich hoch ist: - ab 992px (Ansicht mit Menue) ist die Leiste hoeher als das Logo, 15px oben stellen es optisch mittig; - zwischen 768 und 991px ist die Leiste exakt so hoch wie das Logo, dort oben UND unten 10px, damit sie symmetrisch mitwaechst statt das Logo nach unten zu druecken; - am Handy sitzt das Logo bereits 10px tiefer, dort bleibt alles. */ @media (min-width: 768px) and (max-width: 991px) { .topbar .logo { padding-top: 10px; padding-bottom: 10px; } } @media (min-width: 992px) { .topbar .logo { padding-top: 15px; } } /* --- 2. Zahlen-Block "DAS KONZEPT in Zahlen" ueberall gleich gross --- Die Redaktion hat die Zahl damals unterschiedlich angelegt: auf der Fakten-Seite als h1 (54px, schmaler Schnitt), auf der Startseite als h2 (22px, fett). Nicole moechte ueberall die Fakten-Darstellung. Bewusst NICHT das Element im Backend umgestellt: vier h1 auf einer Seite waeren schlecht fuer Suchmaschinen. Stattdessen greift die Regel ueber die Klasse a-fid - also unabhaengig davon, in welcher Ueberschriften-Ebene die Zahl steht. Damit sieht es auf beiden Seiten gleich aus, und auch ein kuenftiger Block erbt die Darstellung automatisch. Die Werte sind exakt die der Live-Fakten-Seite (auch am Handy 54px). */ .numbers .a-fid { font-size: 54px; line-height: 1.2; font-weight: 300; } /* --- 3. Zwischenueberschriften (h2) etwas groesser (Wunsch Nicole) --- Sie standen im ganzen Theme auf 22px und wirkten neben den grossen Zahlen zu klein - betrifft z. B. "STARTEN. Mit neuer Werbung." und die Beschriftung unter den Zahlen. Die Zahl selbst bleibt bei 54px, weil ".numbers .a-fid" die spezifischere Regel ist. */ h2 { font-size: 28px; line-height: 1.15; } /* --- 4. Neue Huellen-Klassen von Contao 5.6 nachziehen --- Contao 5.6 rendert Inhaltselemente ohne eigenes Template mit neuen Klassen: aus "ce_text ... block" wurde "content-text", aus "ce_image" wurde "content-image". Betrifft 330 der 404 Huellen auf der Seite. Geprueft, woran die Theme-CSS ueberhaupt haengt: nur drei .ce_text- und sechs .ce_image-Regeln. Davon greifen nur die Bildkacheln unter ".home-pics" (Seiten "daskonzept" und "guck-bei-buck-de"); ".multicell" kommt auf keiner Seite vor, ".fullwidth .content-slider" ebenfalls nicht. ".block" ist im ganzen Theme keine gestaltende Klasse. Deshalb reichen diese vier Regeln - kein Eingriff in die Inhalte und keine 524 Datenbank-Aenderungen. */ .home-pics .content-image { padding: 0; } #main .home-pics .content-image figure.image_container figcaption { color: #50505A; font-size: 17px; font-weight: 500; opacity: 0; padding: 0 15px; position: absolute; text-transform: uppercase; top: 20%; } #main .home-pics .content-image figure.image_container:hover figcaption { position: absolute; top: 46%; opacity: 1; text-align: center; transition: all .5s; } #main .home-pics .content-image figure.image_container img:hover { opacity: 0.3; } /* --- 5. Sicherheitsnetz fuer kuenftig neu angelegte Elemente --- Legt die Redaktion ein neues Inhaltselement an, hat es kein Template und Contao 5.6 rendert es mit den neuen Klassen - ohne "img-responsive", also ohne die Bootstrap-Regel max-width:100%. Bilder koennten dann ueber ihren Platz hinauswachsen. Diese Regel faengt das ab. Wer ein neues Bild- oder Textelement anlegt, waehlt im Backend am besten trotzdem das Theme-Template aus, dann sieht es genau wie der Bestand aus. */ .content-image img, .content-gallery img { max-width: 100%; height: auto; } /* ========================================================================== GALERIEN (07.09.2026) Befund: Contao 5.6 rendert Galerien ueber neue Twig-Vorlagen. Die Huelle heisst dort .content-gallery statt .ce_gallery, und die Listeneintraege tragen die Bootstrap-Rasterklassen nicht mehr (col-lg-3 col-sm-3 col-xs-6). Alle Theme-Regeln hoeren aber auf .ce_gallery und griffen deshalb ins Leere. Folge, mit blossem Auge gesehen im Vergleich mit Live: Die Galerien auf zeitplan, highlights, jobs, direkt und innovativ liefen als EINE senkrechte Spalte mit Aufzaehlungspunkten statt als Raster. Statuscodes waren gruen, die Bilderzahl stimmte - nur das Aussehen war kaputt. Diese Regeln bauen den Live-Zustand nach: Raster, entfaerbte Kacheln, Farbe beim Ueberfahren, Lupensymbol. Bewusst NUR CSS - am Inhalt der Galerien wird nichts angefasst (der Versuch mit customTpl hatte am 06.09. schon einmal 73 Bilder verschwinden lassen). ========================================================================== */ .content-gallery ul { margin: 0; padding: 0; list-style-type: none; } /* Floats einfangen, sonst rutscht der folgende Inhalt hoch. */ .content-gallery ul:before, .content-gallery ul:after { content: " "; display: table; } .content-gallery ul:after { clear: both; } /* Das Raster. Wie auf Live: unter 768 px zwei Spalten, darueber so viele, wie das Element vorgibt (content-gallery--cols-3 / --cols-4). */ .content-gallery li { float: left; position: relative; width: 50%; min-height: 1px; /* Kein Innenabstand - wie auf Live (.ce_gallery .img-responsive {padding:0}). Mit 15 px schrumpften die Bilder von 276 auf 255 px und der Abstand wuchs von 9 auf 30 px. Gemessen 08.09.2026, Klon gegen Live. */ padding: 0; box-sizing: border-box; list-style: none; } @media (min-width: 768px) { .content-gallery--cols-2 li { width: 50%; } .content-gallery--cols-3 li { width: 33.33333333%; } .content-gallery--cols-4 li { width: 25%; } .content-gallery--cols-5 li { width: 20%; } .content-gallery--cols-6 li { width: 16.66666667%; } } /* Die Kachel selbst. position:relative, damit die Lupe darin sitzt. */ .content-gallery figure { position: relative; line-height: 0; margin: 0; } .content-gallery figure a { display: block; } /* Entfaerbt, beim Ueberfahren in Farbe - der Look der Live-Seite. */ .content-gallery img { display: block; max-width: 100%; height: auto; margin: 5px; padding: 0; opacity: 1; filter: saturate(20%); -webkit-filter: saturate(20%); -webkit-transition: all .5s; transition: all .5s; } .content-gallery img:hover { filter: saturate(100%); -webkit-filter: saturate(100%); -webkit-transition: all .8s; transition: all .8s; } /* Die Lupe. Verschwindet beim Ueberfahren, damit das Bild frei liegt. */ .content-gallery figure:after { font-family: FontAwesome; content: "\f002"; color: #fff; position: absolute; top: 47%; right: 42%; font-size: 23px; text-indent: 5px; padding: 22px 18px; cursor: pointer; pointer-events: none; -webkit-transition: all .5s ease 0s; transition: all .5s ease 0s; } .content-gallery figure:hover:after { opacity: 0; -webkit-transition: all .5s; transition: all .5s; } /* ========================================================================== HINTERGRUNDBILDER FUER HANDYS UND KLEINE TABLETS (08.09.2026) Gemessen am 08.09. im Handy-Format (375 x 812): Die Startseite lud 3,2 MB Bilder, die Referenzen-Seite 3,7 MB - dieselben Dateien wie an einem 27-Zoll-Monitor. Die -Bilder sind in Ordnung, die rechnet Contao passend klein. Das Gewicht kommt fast vollstaendig aus DIESEN acht Hintergrundbildern mit 1920 Pixel Breite. Sieben davon werden mit "background-size: cover" ausgeliefert. Bei "cover" fuellt das Bild den Block unabhaengig von seiner eigenen Groesse - eine kleinere Datei ist dort optisch folgenlos. Sie liegen als "-mobil.jpg" daneben (1280 Pixel, Qualitaet 78): 2.125.468 -> 470.846 Bytes, also 78 % weniger. Ein Handy mit 375 CSS-Pixeln und dreifacher Punktdichte will rund 1125 echte Pixel, 1280 deckt das ab. BEWUSST NICHT DABEI: .areaBg-projekte (obst_...jpg) - hat KEIN background-size, das Bild liegt in Originalgroesse. Kleiner hiesse: anderer Bildausschnitt. body (back.jpg) - ist eine "repeat"-Kachel. Kleiner hiesse: oefter gekachelt, also sichtbar anders. .slider-Bg - dessen Bild (files/577-outdoor/...) existiert gar nicht, schon auf Live nicht. Die Originale bleiben liegen und werden ab 992 Pixel Fensterbreite weiter ausgeliefert. Zum Zuruecknehmen genuegt es, diesen Block zu loeschen. ========================================================================== */ @media (max-width: 991px) { .areaBg-2 { background-image: url("/files/578-patio/img/banner1-mobil.jpg"); } .areaBg-4grau { background-image: url("/files/578-patio/img/banner_grau-mobil.jpg"); } .areaBg-start { background-image: url("/files/578-patio/raster/buch_6G3A1690_1920x933_2-mobil.jpg"); } .areaBg-kunden { background-image: url("/files/578-patio/raster/buch_6G3A1832_1920x933-mobil.jpg"); } .areaBg-3 { background-image: url("/files/578-patio/raster/liegestuhl_6G3A2518_1920x933-mobil.jpg"); } .areaBg-schuhe { background-image: url("/files/578-patio/raster/schuhe_6G3A2480_1920x933-mobil.jpg"); } .areaBg-Tasse { background-image: url("/files/578-patio/raster/tassen_6G3A1729_1920x933-mobil.jpg"); } /* Feststehende Hintergruende ("background-attachment: fixed") auf Handys abschalten. Zwei Gruende: 1. Auf iPhones ist das seit Jahren kaputt - Safari rechnet das Bild auf die Hoehe des ganzen Dokuments und zeigt dann einen verzerrten oder voellig falschen Ausschnitt. 2. Auch wo es geht, muss der Browser den Hintergrund bei JEDEM Scroll-Schritt neu zeichnen. Das ruckelt auf schwachen Geraeten. Mit "scroll" scrollt das Bild einfach mit. Der Parallax-Effekt entfaellt auf dem Handy, dafuer ist es ueberall gleich und fluessig. */ .slider-Bg, .areaBg-2, .areaBg-3, .areaBg-4grau, .areaBg-Tasse, .areaBg-start, .areaBg-schuhe, .areaBg-kunden { background-attachment: scroll; } } /* ========================================================================== KOPFLEISTE: LUFT ZUM RAND (21.09.2026) Zwei Dinge in einem, beide von Nicole beim Abnehmen angemerkt ("Logo und Navi haengen jeweils zu sehr am Rand"): 1. RUECKSCHRITT. Auf Live sitzt das Logo 40 px vom linken Rand entfernt - im Klon sass es bei 0. Ursache: Contao 4.13 hatte je Bild einen Aussenabstand (Feld "imagemargin") und gab ihn als style="margin-left:40px;" am Bildrahmen aus. Contao 5 kennt das Feld nicht mehr, und contao:migrate --with-deletes hat die Spalte am 06.09.2026 aus der Datenbank entfernt. Der Wert ist weg, kein Template kann ihn nachlesen - deshalb hier per CSS nachgebaut. 2. WUNSCH. Nicole moechte mehr Luft als auf Live. Ab 992 px Fensterbreite bekommen Logo UND Navigation deshalb je 60 px - vorher waren es 40 links und 15 rechts, also auch ungleich. Jetzt ist es symmetrisch. Aendern laesst sich das an genau zwei Zahlen: den beiden 60px unten. ========================================================================== */ /* Grundwert wie auf Live - gilt auch auf schmalen Schirmen. */ .topbar .logo figure.image_container { margin-left: 40px; } @media (min-width: 992px) { .topbar .logo figure.image_container { margin-left: 60px; } /* Die Navigation sitzt in einer Bootstrap-Spalte mit 15 px Innenabstand. 45 zusaetzlich ergibt dieselben 60 px wie beim Logo. */ .topbar .mainnavi { padding-right: 45px; } } /* ========================================================================== HEADER-BILD UEBER DIE VOLLE BREITE (21.09.2026) .areaBg-projekte war die einzige der acht Hintergrund-Regeln OHNE background-size - auf Live genauso wie im Klon. Das Bild (1920x500) lag dadurch in Originalgroesse mittig im Block: Ab rund 1920 px Fensterbreite blieb links und rechts heller Grund stehen. Auf einem breiten Schirm faellt das sofort auf, auf einem 1463er gar nicht. Mit "cover" fuellt das Bild den Block bei jeder Fensterbreite. Der Bildausschnitt verschiebt sich dabei minimal (bei 1448 px rund 2 % Vergroesserung), die Ausrichtung bleibt oben-mittig wie bisher. ERST DADURCH ist auch die Handy-Fassung moeglich: Ohne background-size haette ein kleineres Bild einen anderen Ausschnitt gezeigt - deshalb war dieses eine Bild von der Optimierung am 08.09. ausgenommen. ========================================================================== */ .areaBg-projekte { background-size: cover; } @media (max-width: 991px) { .areaBg-projekte { background-image: url("/files/578-patio/raster/obst_6G3A1812_1920x500-mobil.jpg"); } } /* ========================================================================== BILD-AUSSENABSTAENDE NACHGEBAUT (Fund 8, 21.09.2026) BEFUND: Auf Live tragen 44 Bildrahmen einen Aussenabstand, im Klon trug ihn KEIN einziger. Im echten Chrome bei gleicher Fensterbreite gemessen: /referenzen.html hat auf Live 30 von 30 Rahmen mit Abstand (zusammen 1500 px), im Klon waren es 0 von 30. Ueber alle betroffenen Seiten: 88 Abstandsangaben auf Live, 0 im Klon. URSACHE: dieselbe wie beim Logo weiter oben. Contao 4.13 kannte je Bild das Feld "imagemargin" und gab es als style="margin-..." am Bildrahmen aus; contao:migrate --with-deletes hat die Spalte am 06.09.2026 aus der Datenbank entfernt. WICHTIG - das stand vorher zu duester in der Akte: Die WERTE sind nicht verloren. Sie stehen vollstaendig in backups/dk_db_2026-09-06_1018_start. sql.gz (Spalte tl_content.imagemargin) und auf der Live-Seite selbst. Weg sind sie nur in der Klon-Datenbank. Von dort sind die Werte unten abgelesen und gegen den Live-Quelltext geprueft. WARUM UEBER DIE ARTIKEL-ID: Der body traegt keine Seitenklasse, aber jeder Artikel steht als id="article-N" im Markup. In den acht Artikeln unten tragen ALLE Bildrahmen denselben Abstand - eine Regel je Artikel ist damit genauso treffsicher wie der fruehere Inline-Stil und erwischt kein fremdes Bild. BEWUSST NICHT ENTHALTEN: - article-152 (das Logo). Es haengt an der KOPFLEISTE-Regel weiter oben und bekommt dort auf Nicoles Wunsch 60 px statt der 40 von Live. Eine ID-Regel haette hoehere Spezifitaet und wuerde diesen Wunsch wieder ueberstimmen. - Drei Einzelbilder, bei denen nur EIN Rahmen von mehreren im selben Artikel einen Abstand hat: article-307 (daskonzept.html, 1 von 4) und article-331 (guck-bei-buck-de.html, 2 von 5). Die liessen sich nur ueber eine bruechige Regel treffen. Bleiben offen, siehe CLAUDE.md. ========================================================================== */ /* referenzen.html - 30 Kundenlogos. Der mit Abstand groesste Posten, und genau die Seite, die Nicole beim Abnehmen "total unuebersichtlich" nannte. */ #article-367 .image_container { margin-top: 10px; margin-bottom: 40px; } /* projekte.html - zwei Bloecke mit je kleinem Abstand nach unten */ #article-319 .image_container, #article-361 .image_container { margin-bottom: 5px; } /* ideentraum.html, esslinger-marktplatz.html, steinehunger.html */ #article-348 .image_container, #article-359 .image_container, #article-512 .image_container { margin-left: 25px; margin-right: 25px; } /* freizeit.html */ #article-363 .image_container { margin-left: 25px; } /* referenzen_nellingen.html */ #article-378 .image_container { margin-top: 20px; } /* ========================================================================== HANDY: MENUEKNOPF MITTIG, UEBERSCHRIFTEN KLEINER (21.09.2026) Beides von Nicole gewuenscht ("Hamburgermenue z. B. von der Hoehe her mittig und die Headlines etwas kleiner"). 1. MENUEKNOPF. Im Handy-Format (375 px) ist die Kopfleiste 130 px hoch, ihre Mitte liegt also bei 65 px. Der Knopf sass mit "top: 15px" bei Mitte 42 - also 23 px zu hoch. Statt einer festen Zahl wird er jetzt echt zentriert: top 50 % der Leiste, dann um die halbe eigene Hoehe zurueck. Das haelt auch, wenn die Leiste spaeter mal anders hoch ist. Dafuer braucht die Leiste einen Bezugspunkt (position: relative). Das ist hier gefahrlos, weil unterhalb von 979 px die Hauptnavigation ohnehin ausgeblendet ist - die einzigen anderen absolut gesetzten Elemente in der Leiste sind deren Untermenues, und die sind auf dem Handy nicht sichtbar. Am Desktop aendert sich nichts. 2. UEBERSCHRIFTEN. Das Theme setzt die grosse Schlagzeile auf 54 px - eine Zahl fuer breite Schirme. Auf 375 px Breite bricht "DAS KONZEPT ist Leben." damit ueber drei Zeilen. Zwei Stufen statt eines harten Schnitts, damit Tablets nicht leiden. Zum Nachjustieren genuegen die Zahlen unten - groesser oder kleiner, ohne dass am Desktop etwas passiert. ========================================================================== */ @media (max-width: 979px) { .topbar { position: relative; } .button-menu { top: 50%; transform: translateY(-50%); } } /* Tablet und schmale Notebooks */ @media (max-width: 991px) { .ce_sliderStart h1, .InsideOut h1 { font-size: 42px; } .ce_sliderStart h3, .ce_sliderStart a, .InsideOut h3 { font-size: 20px; } h2 { font-size: 24px; } } /* Handy */ @media (max-width: 767px) { .ce_sliderStart h1, .InsideOut h1 { font-size: 32px; line-height: 1.15; } .ce_sliderStart h3, .ce_sliderStart a, .InsideOut h3 { font-size: 17px; } h2 { font-size: 22px; } } /* ========================================================================== FUND 10: DIE RUNDBILD-GALERIE IM RECHTEN BLOCK (21.09.2026) Befund: Auf /jobs.html zeigt Live neun RUNDE Bilder mit 100 x 100 Pixeln, die sich beim Ueberfahren einmal drehen. Der Klon zeigte eckige mit 120 x 120. Alle Zahlenpruefungen waren gruen: neun Bilder hier wie dort, drei je Zeile, kein Text fehlte. Ursache, und das ist eine NEUE Spielart des Contao-5-Musters: Contao 4.13 hatte fuer Galerien ein EIGENES Feld "galleryTpl", getrennt von "customTpl". Element 1273 steht dort auf "gallery_default_right", und dieses Theme-Template legt um jedes Bild eine Huelle
. Daran haengen zwei Regeln in resetbs.css (Zeile 124 und 132). Contao 5 rendert Galerien ueber Twig und wertet "galleryTpl" nicht mehr aus, die Huelle faellt weg, und beide Regeln greifen ins Leere. Warum die Elementtypen-Pruefung das uebersehen hat: Sie sah nur "customTpl" an, und dort steht bei ALLEN acht Galerien "kein Template". Der Wert sass eine Spalte weiter. Die Werte sind NICHT verloren. "galleryTpl" steht in der Klon-Datenbank vollstaendig drin, anders als "imagemargin" bei Fund 8. Es wird nur nicht mehr ausgewertet. Bewusst NUR CSS, wie bei Fund 4: "customTpl" bei Galerien zu setzen hat am 06.09. schon einmal 73 Bilder gekostet. Betroffen ist GENAU EINE Seite, /jobs.html, Artikel 293. Die beiden anderen Rundbild-Galerien (Element 987 und 1304) liegen auf der Baukastenseite __res__ und werden nirgends eingebunden. Gemessen ueber alle 54 Seiten: "right-pic" kommt nur auf jobs.html vor. Sollwerte von Live, im echten Chrome bei 1400 px gemessen: Bild 100 x 100, border-radius 50%, Abstand 0 6px 6px 0, drei Bilder je Zeile. Der Entfaerbungsfilter (saturate 0.2) und die fehlende Lupe stimmten schon vorher ueberein, die ruehrt diese Regel deshalb nicht an. ========================================================================== */ #article-293 .content-gallery li { /* Live macht die Kachel so breit wie das Bild, statt sie auf ein Drittel der Spalte zu ziehen (das tut die Fund-4-Regel weiter oben). Ohne diese Zeile stuenden die Rundbilder zu weit auseinander. */ width: auto; } #article-293 .content-gallery img { width: 100px; height: 100px; border-radius: 50%; display: inline-block; margin: 0 6px 6px 0; } #article-293 .content-gallery img:hover { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } /* ========================================================================== HANDY-NAVIGATION: UNTERMENUES AUFKLAPPBAR (21.09.2026) Nicoles Wunsch: "kann man die 5 Menuepunkte zum Aufklappen machen?" Gemessen vorher, im Handy-Format 375 x 812: Das Overlay-Menue zeigte 42 Eintraege am Stueck (5 Hauptpunkte und 37 Unterpunkte, davon allein 30 Referenz-Seiten) und war 1.806 Pixel hoch. Das sind gut zwei Bildschirmlaengen Scrollen, um das Menue zu ueberblicken. Nur ZWEI Punkte haben ueberhaupt Unterseiten: SICHTBAR. (30) und KOMPETENT. (7). Die tragen am li die Klasse "submenu", daran haengt alles hier. Die uebrigen drei bleiben schlichte Links ohne Pfeil. Bedienung, von Nicole gewaehlt: Der NAME oeffnet weiter die Seite, der PFEIL rechts klappt auf. Den Pfeil setzt nab-handynavi.js ein, er steht NICHT im ausgelieferten Quelltext - damit bleibt der Nachweis "Klon = Live im Markup" unberuehrt. Der Desktop merkt von alldem nichts: .overlay-menu ist ausschliesslich das Handy-Menue, am grossen Bildschirm laeuft die Navigation ueber .mainnavi. Deshalb braucht es hier auch keine Medienabfrage. ========================================================================== */ /* Zu, bis jemand den Pfeil antippt. Die Regeln haengen an .nab-navi-bereit, und die setzt nab-handynavi.js erst, wenn die Pfeile wirklich stehen. Ohne JavaScript bleibt damit alles offen wie vor dem Umbau. Sonst waeren 37 Unterseiten ueber das Menue nicht mehr erreichbar - es gaebe ja auch keine Pfeile zum Aufklappen. Gefunden beim Gegenlesen mit Codex am 21.09.2026. */ .nab-navi-bereit .overlay-menu ul.level_1 > li > ul.level_2 { display: none; } .nab-navi-bereit .overlay-menu ul.level_1 > li.nab-offen > ul.level_2 { display: block; } /* Der Pfeil. Bewusst ein Rahmen-Dreieck statt eines FontAwesome-Zeichens: keine Abhaengigkeit von der Symbolschrift, deren fuenf Dateien im Theme ohnehin fehlen (siehe Merkzettel, tote Verweise). */ .overlay-menu .nab-aufklapp { position: absolute; top: 0; right: 0; width: 48px; height: 44px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; } .overlay-menu .nab-aufklapp:before { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; margin: -3px 0 0 -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #ffc412; -webkit-transition: -webkit-transform .25s; transition: transform .25s; } /* Aufgeklappt zeigt der Pfeil nach oben. */ .overlay-menu li.nab-offen > .nab-aufklapp:before { -webkit-transform: rotate(180deg); transform: rotate(180deg); } /* Tastaturbedienung sichtbar machen - der Knopf ist ein echtes