.download-element a{padding:3px 6px 3px 22px;background:url(../../assets/contao/images/iconPLAIN.svg) left center no-repeat}ul.enclosure{padding-left:0}li.download-element{list-style-type:none}.ext-xl a{background-image:url(../../assets/contao/images/iconXL.svg)}.ext-xls a{background-image:url(../../assets/contao/images/iconXLS.svg)}.ext-xlsx a{background-image:url(../../assets/contao/images/iconXLSX.svg)}.ext-hqx a{background-image:url(../../assets/contao/images/iconHQX.svg)}.ext-cpt a{background-image:url(../../assets/contao/images/iconCPT.svg)}.ext-bin a{background-image:url(../../assets/contao/images/iconBIN.svg)}.ext-doc a{background-image:url(../../assets/contao/images/iconDOC.svg)}.ext-docx a{background-image:url(../../assets/contao/images/iconDOCX.svg)}.ext-word a{background-image:url(../../assets/contao/images/iconWORD.svg)}.ext-cto a{background-image:url(../../assets/contao/images/iconCTO.svg)}.ext-dms a{background-image:url(../../assets/contao/images/iconDMS.svg)}.ext-lha a{background-image:url(../../assets/contao/images/iconLHA.svg)}.ext-lzh a{background-image:url(../../assets/contao/images/iconLZH.svg)}.ext-exe a{background-image:url(../../assets/contao/images/iconEXE.svg)}.ext-class a{background-image:url(../../assets/contao/images/iconCLASS.svg)}.ext-so a{background-image:url(../../assets/contao/images/iconSO.svg)}.ext-sea a{background-image:url(../../assets/contao/images/iconSEA.svg)}.ext-dll a{background-image:url(../../assets/contao/images/iconDLL.svg)}.ext-oda a{background-image:url(../../assets/contao/images/iconODA.svg)}.ext-pdf a{background-image:url(../../assets/contao/images/iconPDF.svg)}.ext-ai a{background-image:url(../../assets/contao/images/iconAI.svg)}.ext-eps a{background-image:url(../../assets/contao/images/iconEPS.svg)}.ext-ps a{background-image:url(../../assets/contao/images/iconPS.svg)}.ext-pps a{background-image:url(../../assets/contao/images/iconPPS.svg)}.ext-ppt a{background-image:url(../../assets/contao/images/iconPPT.svg)}.ext-pptx a{background-image:url(../../assets/contao/images/iconPPTX.svg)}.ext-smi a{background-image:url(../../assets/contao/images/iconSMI.svg)}.ext-smil a{background-image:url(../../assets/contao/images/iconSMIL.svg)}.ext-mif a{background-image:url(../../assets/contao/images/iconMIF.svg)}.ext-odc a{background-image:url(../../assets/contao/images/iconODC.svg)}.ext-odf a{background-image:url(../../assets/contao/images/iconODF.svg)}.ext-odg a{background-image:url(../../assets/contao/images/iconODG.svg)}.ext-odi a{background-image:url(../../assets/contao/images/iconODI.svg)}.ext-odp a{background-image:url(../../assets/contao/images/iconODP.svg)}.ext-ods a{background-image:url(../../assets/contao/images/iconODS.svg)}.ext-odt a{background-image:url(../../assets/contao/images/iconODT.svg)}.ext-wbxml a{background-image:url(../../assets/contao/images/iconWBXML.svg)}.ext-wmlc a{background-image:url(../../assets/contao/images/iconWMLC.svg)}.ext-dmg a{background-image:url(../../assets/contao/images/iconDMG.svg)}.ext-dcr a{background-image:url(../../assets/contao/images/iconDCR.svg)}.ext-dir a{background-image:url(../../assets/contao/images/iconDIR.svg)}.ext-dxr a{background-image:url(../../assets/contao/images/iconDXR.svg)}.ext-dvi a{background-image:url(../../assets/contao/images/iconDVI.svg)}.ext-gtar a{background-image:url(../../assets/contao/images/iconGTAR.svg)}.ext-inc a{background-image:url(../../assets/contao/images/iconINC.svg)}.ext-php a{background-image:url(../../assets/contao/images/iconPHP.svg)}.ext-php3 a{background-image:url(../../assets/contao/images/iconPHP3.svg)}.ext-php4 a{background-image:url(../../assets/contao/images/iconPHP4.svg)}.ext-php5 a{background-image:url(../../assets/contao/images/iconPHP5.svg)}.ext-phtml a{background-image:url(../../assets/contao/images/iconPHTML.svg)}.ext-phps a{background-image:url(../../assets/contao/images/iconPHPS.svg)}.ext-js a{background-image:url(../../assets/contao/images/iconJS.svg)}.ext-psd a{background-image:url(../../assets/contao/images/iconPSD.svg)}.ext-rar a{background-image:url(../../assets/contao/images/iconRAR.svg)}.ext-fla a{background-image:url(../../assets/contao/images/iconFLA.svg)}.ext-swf a{background-image:url(../../assets/contao/images/iconSWF.svg)}.ext-sit a{background-image:url(../../assets/contao/images/iconSIT.svg)}.ext-tar a{background-image:url(../../assets/contao/images/iconTAR.svg)}.ext-tgz a{background-image:url(../../assets/contao/images/iconTGZ.svg)}.ext-xhtml a{background-image:url(../../assets/contao/images/iconXHTML.svg)}.ext-xht a{background-image:url(../../assets/contao/images/iconXHT.svg)}.ext-zip a{background-image:url(../../assets/contao/images/iconZIP.svg)}.ext-m4a a{background-image:url(../../assets/contao/images/iconM4A.svg)}.ext-mp3 a{background-image:url(../../assets/contao/images/iconMP3.svg)}.ext-wma a{background-image:url(../../assets/contao/images/iconWMA.svg)}.ext-mpeg a{background-image:url(../../assets/contao/images/iconMPEG.svg)}.ext-wav a{background-image:url(../../assets/contao/images/iconWAV.svg)}.ext-ogg a{background-image:url(../../assets/contao/images/iconOGG.svg)}.ext-mid a{background-image:url(../../assets/contao/images/iconMID.svg)}.ext-midi a{background-image:url(../../assets/contao/images/iconMIDI.svg)}.ext-aif a{background-image:url(../../assets/contao/images/iconAIF.svg)}.ext-aiff a{background-image:url(../../assets/contao/images/iconAIFF.svg)}.ext-aifc a{background-image:url(../../assets/contao/images/iconAIFC.svg)}.ext-ram a{background-image:url(../../assets/contao/images/iconRAM.svg)}.ext-rm a{background-image:url(../../assets/contao/images/iconRM.svg)}.ext-rpm a{background-image:url(../../assets/contao/images/iconRPM.svg)}.ext-ra a{background-image:url(../../assets/contao/images/iconRA.svg)}.ext-bmp a{background-image:url(../../assets/contao/images/iconBMP.svg)}.ext-gif a{background-image:url(../../assets/contao/images/iconGIF.svg)}.ext-jpeg a{background-image:url(../../assets/contao/images/iconJPEG.svg)}.ext-jpg a{background-image:url(../../assets/contao/images/iconJPG.svg)}.ext-jpe a{background-image:url(../../assets/contao/images/iconJPE.svg)}.ext-png a{background-image:url(../../assets/contao/images/iconPNG.svg)}.ext-tiff a{background-image:url(../../assets/contao/images/iconTIFF.svg)}.ext-tif a{background-image:url(../../assets/contao/images/iconTIF.svg)}.ext-svg a{background-image:url(../../assets/contao/images/iconSVG.svg)}.ext-svgz a{background-image:url(../../assets/contao/images/iconSVGZ.svg)}.ext-webp a{background-image:url(../../assets/contao/images/iconWEBP.svg)}.ext-avif a{background-image:url(../../assets/contao/images/iconAVIF.svg)}.ext-heic a{background-image:url(../../assets/contao/images/iconHEIC.svg)}.ext-jxl a{background-image:url(../../assets/contao/images/iconJXL.svg)}.ext-eml a{background-image:url(../../assets/contao/images/iconEML.svg)}.ext-asp a{background-image:url(../../assets/contao/images/iconASP.svg)}.ext-css a{background-image:url(../../assets/contao/images/iconCSS.svg)}.ext-scss a{background-image:url(../../assets/contao/images/iconSCSS.svg)}.ext-less a{background-image:url(../../assets/contao/images/iconLESS.svg)}.ext-html a{background-image:url(../../assets/contao/images/iconHTML.svg)}.ext-htm a{background-image:url(../../assets/contao/images/iconHTM.svg)}.ext-md a{background-image:url(../../assets/contao/images/iconMD.svg)}.ext-shtml a{background-image:url(../../assets/contao/images/iconSHTML.svg)}.ext-txt a{background-image:url(../../assets/contao/images/iconTXT.svg)}.ext-text a{background-image:url(../../assets/contao/images/iconTEXT.svg)}.ext-log a{background-image:url(../../assets/contao/images/iconLOG.svg)}.ext-rtx a{background-image:url(../../assets/contao/images/iconRTX.svg)}.ext-rtf a{background-image:url(../../assets/contao/images/iconRTF.svg)}.ext-xml a{background-image:url(../../assets/contao/images/iconXML.svg)}.ext-xsl a{background-image:url(../../assets/contao/images/iconXSL.svg)}.ext-mp4 a{background-image:url(../../assets/contao/images/iconMP4.svg)}.ext-m4v a{background-image:url(../../assets/contao/images/iconM4V.svg)}.ext-mov a{background-image:url(../../assets/contao/images/iconMOV.svg)}.ext-wmv a{background-image:url(../../assets/contao/images/iconWMV.svg)}.ext-webm a{background-image:url(../../assets/contao/images/iconWEBM.svg)}.ext-qt a{background-image:url(../../assets/contao/images/iconQT.svg)}.ext-rv a{background-image:url(../../assets/contao/images/iconRV.svg)}.ext-avi a{background-image:url(../../assets/contao/images/iconAVI.svg)}.ext-ogv a{background-image:url(../../assets/contao/images/iconOGV.svg)}.ext-movie a{background-image:url(../../assets/contao/images/iconMOVIE.svg)} /* * Spaltenraster, uebernommen aus pct_autogrid 1.10.3 * (system/modules/pct_autogrid/assets/css/grid.css), unveraendert. * * Das Modul ist entfernt, sein Raster nicht: es traegt die Spalten der * eigenen Rasterzeile (grid_start_ext) und ausserdem die fest in den * Layout-Templates verdrahteten Spalten von Offcanvas und Footer. * * Ausgeliefert wird die Datei ueber assets:install nach web/bundles/app/; * eingebunden wird sie in App\EventListener\GridStylesheetListener. */ /** clearing **/ .clear {clear: both; font-size: 0.1px; height: 0.1px; line-height: 0.1px; float: none; display: table;} /** block grid **/ .autogrid, .autogrid:before,.autogrid:after {-moz-box-sizing: border-box; box-sizing:border-box;} .autogrid {padding-left: 1%; padding-right: 1%; position: relative; display: block; float: left;overflow: hidden;} /** block grid wrapper **/ .autogrid_wrapper {margin-left: -1%; margin-right: -1%;} /** non block **/ .autogrid:not(.block) {padding-left: 0; padding-right: 0; margin-left: 1%; margin-right: 1%;} /* .block.autogrid.first, .block.autogrid:first-child {margin-left: -1%;} */ /* .block.autogrid.last, .block.autogrid:last-child {margin-right: -1%;} */ /** Non block grid **/ .full {width: 98%;} .one_half {width: 48%;} .one_third {width: 31.3333%;} .one_fourth {width: 23%;} .one_fifth {width: 18%;} .one_sixth {width: 14.6667%;} /** Block grid **/ .block.full {width: 100%;} .block.one_half {width: 50%;} .block.one_third {width: 33.3333%;} .block.one_fourth {width: 25%;} .block.one_fifth {width: 20%;} .block.one_sixth {width: 16.6667%;} .block.two_third {width: 66.6667%;} .block.two_fourth {width: 50%;} .block.three_fourth {width: 75%;} .block.two_fifth {width: 40%;} .block.three_fifth {width: 60%;} .block.four_fifth {width: 80%;} .block.two_sixth {width: 33.3333%;} .block.three_sixth {width: 49.9999%;} .block.four_sixth {width: 66.6667%;} .block.five_sixth {width: 83.3333%;} /** Non block grid system **/ /** odd split: 2 elements per row **/ .n2:not(.block).one_third {width: 32%;} .n2:not(.block).two_third {width: 64%;} .n2:not(.block).one_fourth {width: 24%;} .n2:not(.block).two_fourth {width: 48%;} .n2:not(.block).three_fourth {width: 72%;} .n2:not(.block).one_fifth {width: 19.2%;} .n2:not(.block).two_fifth {width: 38.4%;} .n2:not(.block).three_fifth {width: 57.6%;} .n2:not(.block).four_fifth {width: 76.8%;} .n2:not(.block).one_sixth {width: 16%;} .n2:not(.block).two_sixth {width: 32%;} .n2:not(.block).three_sixth {width: 48%;} .n2:not(.block).four_sixth {width: 64%;} .n2:not(.block).five_sixth {width: 80%;} /** odd split: 3 elements per row **/ .n3:not(.block).one_half {width: 47%;} .n3:not(.block).two_third {width: 62.6667%;} .n3:not(.block).one_fourth {width: 23.5%;} .n3:not(.block).two_fourth {width: 47%;} .n3:not(.block).three_fourth {width: 70.5%;} .n3:not(.block).one_fifth {width: 18.8%;} .n3:not(.block).two_fifth {width: 37.6%;} .n3:not(.block).three_fifth {width: 56.4%;} .n3:not(.block).four_fifth {width: 75.2%;} .n3:not(.block).one_sixth {width: 15.6667%;} .n3:not(.block).two_sixth {width: 31.3333%;} .n3:not(.block).three_sixth {width: 47%;} .n3:not(.block).four_sixth {width: 62.6667%;} .n3:not(.block).five_sixth {width: 78.3333%;} /** odd split: 4 elements per row **/ .n4:not(.block).one_half {width: 46%;} .n4:not(.block).one_third {width: 30.6667%;} .n4:not(.block).two_third {width: 61.3333%;} .n4:not(.block).two_fourth {width: 46%;} .n4:not(.block).three_fourth {width: 69%;} .n4:not(.block).one_fifth {width: 18.4%;} .n4:not(.block).two_fifth {width: 36.8%;} .n4:not(.block).three_fifth {width: 55.2%;} .n4:not(.block).four_fifth {width: 73.6%;} .n4:not(.block).one_sixth {width: 15.3333%;} .n4:not(.block).two_sixth {width: 30.6667%;} .n4:not(.block).three_sixth {width: 46%;} .n4:not(.block).four_sixth {width: 61.3333%;} .n4:not(.block).five_sixth {width: 76.6667%;} /** odd split: 5 elements per row **/ .n5:not(.block).one_half {width: 45%;} .n5:not(.block).one_third {width: 30%;} .n5:not(.block).two_third {width: 60%;} .n5:not(.block).one_fourth {width: 22.5%;} .n5:not(.block).two_fourth {width: 45%;} .n5:not(.block).three_fourth {width: 67.5%;} .n5:not(.block).two_fifth {width: 36%;} .n5:not(.block).three_fifth {width: 54%;} .n5:not(.block).four_fifth {width: 72%;} .n5:not(.block).one_sixth {width: 15%;} .n5:not(.block).two_sixth {width: 30%;} .n5:not(.block).three_sixth {width: 45%;} .n5:not(.block).four_sixth {width: 60%;} .n5:not(.block).five_sixth {width: 75%;} /** odd split: 6 elements per row **/ .n6:not(.block).one_half {width: 44%;} .n6:not(.block).one_third {width: 29.3333%;} .n6:not(.block).two_third {width: 58.6667%;} .n6:not(.block).one_fourth {width: 22%;} .n6:not(.block).two_fourth {width: 44%;} .n6:not(.block).three_fourth {width: 66%;} .n6:not(.block).one_fifth {width: 17.6%;} .n6:not(.block).two_fifth {width: 35.2%;} .n6:not(.block).three_fifth {width: 52.8%;} .n6:not(.block).four_fifth {width: 70.4%;} .n6:not(.block).two_sixth {width: 29.3333%;} .n6:not(.block).three_sixth {width: 44%;} .n6:not(.block).four_sixth {width: 58.6667%;} .n6:not(.block).five_sixth {width: 73.3333%;} .border-inner {border-left: 1px solid #ddd;} .border-inner.first, .border-inner:first-child {border-left: 0;} .border-inner.last, .border-inner:last-child {border-right: 0;} /** optical correction **/ /* .autogrid.block.border-inner {margin-left: -0.75%; padding-left: 1.75%;} */ /** grid options **/ .autogrid.break {clear:left; margin-left: 0;} .autogrid.full.break {width: 100%;clear:both;float: none;padding-left: 0;padding-right: 0;} /** same height **/ .autogrid.same-height {display: table-cell; float: none; vertical-align: top;} /** flexible same height **/ .autogrid_wrapper.same-height, .autogrid_wrapper .inner.same-height, .ce_autogridWrapperStart.same-height .inside {display: flex; display: -webkit-flex; display: -ms-flexbox; height: 100%; clear: both;} /** autogrid full **/ .autogrid.full {padding-left: 0; padding-right: 0;} .autogrid_wrapper .autogrid.full {padding-left: 1%; padding-right: 1%;} /** no gutter **/ .autogrid_wrapper.no_gutter {margin-left: 0; margin-right: 0;} .autogrid_wrapper.no_gutter_left {margin-left: 0;} .autogrid_wrapper.no_gutter_right {margin-right: 0;} .autogrid.no_gutter {padding-left: 0; padding-right: 0;} .autogrid.no_gutter_left {padding-left: 0;} .autogrid.no_gutter_right {padding-right: 0;} /** tablets **/ @media only screen and (min-width: 768px) and (max-width: 990px) { .autogrid.adjust_mobile {width: 50% !important} } /** phones **/ @media only screen and (max-width: 767px) { .autogrid {width: 100%!important;} .autogrid.same-height, .autogrid_wrapper.same-height, .autogrid_wrapper .inner.same-height {display: block;} .border-inner {border-left: 0;} .ce_autogridSpacer {margin: 0!important; line-height: 0!important;} } /* * Kernelemente: dieselben Regeln, neue Klassennamen. * * Contao 5 hat sechs Kern-Inhaltselemente auf Fragmente mit Twig-Templates * umgestellt; ihre Wrapper heissen seither content-text, content-table, * content-gallery und so fort statt ce_text, ce_table, ce_gallery. Das * Theme-CSS kennt nur die alten Namen, die betroffenen Regeln greifen also * nicht mehr. * * Diese Datei traegt sie unter den neuen Namen nach. Ausgewaehlt wurde nicht * pauschal: von 160 Vorkommen der sechs Klassen im Theme-CSS koennen nur 26 * ueberhaupt greifen. Der Rest verlangt Klassen, die in diesem Projekt nicht * vorkommen - Elementvarianten des Themes, die niemand benutzt, und die nicht * installierte CustomCatalog-Erweiterung. Fuenf weitere sprechen ein ce_image * innerhalb der Iconbox an; diesen PCT-Wrapper gibt unser eigenes Element * nicht mehr aus. * * Die Reihenfolge folgt den Quelldateien, damit die Kaskade erhalten bleibt. * Die alten Regeln stehen weiter im Theme-CSS und laufen ins Leere; sie * verschwinden, wenn es als Ganzes ueberarbeitet wird - erst dann wird auch * diese Datei ueberfluessig. */ /* aus framework.css */ .content-table { position: relative; overflow: visible; } .content-table table { margin-bottom: 10px; width: 99.9%; text-align: center; white-space: nowrap; position: relative; } .content-table table td { border-top: solid 1px #E3E3E3; padding: 12px; text-align: left; } .content-table table td p { margin: 0; } .content-table table th { text-align: left; padding: 12px; color: rgb(255,255,255); font-weight: bold; background: rgb(152,152,152); } .content-table table tfoot td { color: rgb(152,152,152); font-weight: bold; } .content-table table a { text-decoration: underline; } @media only screen and (min-width: 600px) { .content-table.table_small { display: none; } } @media only screen and (max-width: 600px) { .content-table.table_big { display: none; } .content-table.table_small { display: block; } } .content-text ul, .content-text ol { margin-bottom: 15px; padding-left: 26px; } .content-text li, .content-text ol { line-height: 1.5em; } .content-text ul li { list-style-type: disc; list-style-position: outside; } .content-text ol { list-style: decimal; padding-left: 26px; } .content-text ol ol { list-style: upper-alpha; } .content-text ol ol ol { list-style: lower-roman; } .content-gallery a { width: 100%; height: auto; display: block; } .content-gallery .content { position: absolute; left: 0; top: 0; bottom: 0; right: 0; height: 100%; background: rgba(152,152,152,0.8); opacity: 0; transition: All 0.5s ease; -webkit-transition: All 0.5s ease; } .content-gallery li:hover .content { opacity: 1; } .content-gallery li img { transition: All 0.5s ease; -webkit-transition: All 0.5s ease; } .content-downloads a { text-decoration:none; } .content-downloads li { margin-bottom: 10px; padding-bottom: 10px; vertical-align: middle; border-bottom: 1px solid #eee; } @media only screen and (max-width: 767px) { .content-gallery li { width: 49.8%; } } /* aus styles.css */ .content-table table th { background: rgb(30,136,210); } .content-gallery .content { background: rgba(30,136,210,0.8); } .content-table table td { border-top: 0; border-bottom: solid 1px rgb(227,227,227); } /* * Feinschliff an den Inhaltselementen. * * Betrifft die eigenen Elemente und jene Kernelemente, die das Theme-CSS * nicht mehr erreicht. * * Das Theme-CSS stammt aus einer Zeit vor Flexbox und loest Nebeneinander * durchgaengig mit float. Wo das im Alltag stoert - etwa weil ein Icon * dadurch nicht mittig zum Text steht oder ein Block auf dem Telefon * auseinanderfaellt - stehen die Korrekturen hier. * * Zur Spezifitaet: diese Datei wird ueber TL_CSS eingebunden und landet damit * im gemeinsamen Stylesheet, das Contao *vor* den Theme-Dateien ausliefert. * Bei gleicher Spezifitaet gewaenne also das Theme. Die Regeln haengen * deshalb zusaetzlich am Attributselektor [class*="ce_infobox_"] - das hebt * sie eine Stufe hoeher als die Theme-Regeln und bleibt zugleich unabhaengig * davon, welche Variante gerade gesetzt ist. */ /* ============================================================================= * Infobox * ========================================================================== */ /* * Das Altmarkup stellte Icon und Text mit float nebeneinander und gab dem * Icon eine feste line-height von 25px. Sobald der Text groesser ist - im * Bestand steht ein Absatz mit 40px - sitzt das Icon dadurch am oberen Rand * der ersten Zeile statt mittig, und der Text laeuft um den Float herum. * * Als Flex-Zeile stehen beide nebeneinander, das Icon mittig zum gesamten * Text, und der Umbruch bleibt sauber unter sich. */ .content-infobox-ext[class*="ce_infobox_"] { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 18px; } .content-infobox-ext[class*="ce_infobox_"] > i { float: none; width: auto; margin: 0; line-height: 1; flex: 0 0 auto; } .content-infobox-ext[class*="ce_infobox_"] > p { display: block; margin: 0; text-align: center; /* Ohne min-width bricht ein langes Wort in einer Flex-Zeile nicht um, sondern sprengt den Kasten. */ min-width: 0; overflow-wrap: break-word; } @media only screen and (max-width: 767px) { /* * Auf dem Telefon nur die Abweichungen: Flex-Zeile, mittiges Icon und * die Zentrierung kommen aus den Regeln oben. */ .content-infobox-ext[class*="ce_infobox_"] { gap: 10px; padding: 12px 14px; /* Randlos: styles.css rueckt unter 768px jeden Artikel um 20px ein (#main .mod_article, padding-left und -right mit !important). Der Warnhinweis laeuft darueber hinaus - nicht durch Entfernen des Artikel-Paddings, das betraefe auch jedes andere Element dort. Der Wert haengt an der Einrueckung des Themes: aendert sich die, muss er hier mitgehen. */ margin-left: -20px; margin-right: -20px; /* Randlos heisst auch ohne Ecken: die 3px Radius des Themes wuerden am Bildschirmrand als Aussparungen sichtbar. */ border-radius: 0; } .content-infobox-ext[class*="ce_infobox_"] > i { /* Das Icon soll auf schmalen Schirmen nicht mitwachsen. */ font-size: 1.4rem; } .content-infobox-ext[class*="ce_infobox_"] > p { /* Die Schriftgroesse steht als Inline-Angabe im Inhalt und laesst sich nur mit !important uebersteuern. 40px sind auf einem Telefon zu gross. Sauberer waere, die Inline-Angabe im Backend zu entfernen - dann kann diese Regel weg. */ font-size: 1.375rem !important; line-height: 1.3; } } /* ============================================================================= * Slider im Kopfbereich * ========================================================================== */ /* * Der Revolutionslider hat seine Folien als Hintergrundbild mit bgfit cover * ausgegeben: das Bild fuellte die Flaeche immer aus, egal wie breit der * Schirm war. Contaos Slider zeigt statt dessen ein img in seiner * Naturgroesse. Daraus folgen zwei Fehler: * * Der Bereich #slider laeuft randlos - .inside hat dort keine * Breitenbegrenzung. Jenseits der Bildbreite von 1920px blieb rechts * deshalb ein leerer Streifen stehen. * * Die drei Folien haben unterschiedliche Bildgroessen hinterlegt: zwei die * Groesse "Background-Image" (1920x1080, proportional, ergibt bei den * 3008x2000-Quellen 1920x1277) und eine einen festen Zuschnitt von * 1905x900. Die Slider-Hoehe sprang dadurch von Folie zu Folie, und auf * dem Telefon war das Ergebnis nicht mehr zu gebrauchen. * * Beides loest ein fester Bildbereich, den die Bilder mit object-fit cover * ausfuellen - das Gegenstueck zu bgfit cover. Die Hoehe folgt der Breite im * Verhaeltnis 16:9 wie beim Vorgaenger (der war auf 1600x900 eingestellt) und * ist bei 700px gedeckelt, wie es das Theme fuer diesen Bereich vorsah. * * Die beiden Werte - 56.25vw und der Deckel - sind die Stellschrauben. * * swipe.js setzt Breiten der Folien inline in Pixel, aber keine Hoehen; die * Hoehe hier kommt ihm also nicht in die Quere. */ #slider .ce_sliderStart .slider-wrapper { /* Erst als Paar, dann als min(): faellt min() aus, bleibt die Hoehe ueber max-height gedeckelt statt ganz zu verschwinden. */ height: 56.25vw; max-height: 700px; height: min(56.25vw, 700px); } #slider .ce_sliderStart .slider-wrapper > * { height: 100%; } #slider .ce_sliderStart .content-image, #slider .ce_sliderStart .content-image figure { height: 100%; margin: 0; } #slider .ce_sliderStart .content-image img { display: block; width: 100%; height: 100%; object-fit: cover; /* Der Bildausschnitt der Vorlage lag mittig; bei Bedarf je Folie ueber object-position nachjustieren. */ object-position: center center; } @media only screen and (max-width: 767px) { /* * Auf dem Telefon waere ein 16:9-Band nur rund 210px hoch und damit ein * Streifen. Ein hochformatigerer Ausschnitt zeigt mehr vom Motiv. */ #slider .ce_sliderStart .slider-wrapper { height: 70vw; } } /* * Iconbox mit Bild - im Bestand nur die drei Boxen "Tae", "Kwon", "Do" auf * /taekwon-do, alle in der Variante default. * * Das Altmarkup schachtelte das Bild in *
*
. Daran hingen zwei sichtbare Regeln: * .ce_iconbox .image_container { text-align: center } zentrierte das Bild, und * .ce_iconbox.default .ce_image.attribute setzte padding-top 5px, position * relative und eine Transition, die beim Hover ueber top: -5px das Bild anhebt. * Das eigene Element gibt das ohne Wrapper aus, deshalb liegen beide * Effekte hier direkt am Bild. Zentriert wird ueber margin, nicht ueber * text-align am Container - text-align wuerde auch Ueberschrift und Text * erfassen, die im Bestand linksbuendig blieben. */ .ce_iconbox.default .ce_iconbox_inside > img, .ce_iconbox.default .ce_iconbox_inside > a > img { display: block; margin: 0 auto; max-width: 100%; height: auto; padding-top: 5px; position: relative; top: 0; transition: all 0.3s ease; } .ce_iconbox.default:hover .ce_iconbox_inside > img, .ce_iconbox.default:hover .ce_iconbox_inside > a > img { top: -5px; } /* * Bildabstaende aus dem Contao-4-Feld imagemargin. * * Contao 5 kennt das Feld nicht mehr und gibt keinen Inline-Style an der * figure aus. ImageMarginMigration rettet die Werte als Klasse an das * Element, die Regel dazu steht hier. Im Bestand gibt es genau einen Fall - * das Bild ueber dem Text auf "Ueber uns" hatte 40px Abstand nach unten. * * Die Klasse sitzt am Elementwrapper, nicht an der figure, weil das * CSS-Klassen-Feld von Contao dort landet. */ .image-mb-40px .image_container { margin-bottom: 40px; } /* * Die beiden Karten auf der Kontaktseite (Hoechberg und Wuerzburg). * * Das Theme macht #container_maps zum Flex-Container, laesst dabei aber drei * Dinge offen, die zusammen dafuer sorgen, dass sich die Karten ueberlappen: * * 1. Die Spalten haben weder Breite noch flex. Sie sind inhaltsbreit, und * justify-content: space-between schiebt sie an die Raender, statt sie die * Zeile fuellen zu lassen. * 2. Das min-width von 550px steht an einem Nachfahren-Selektor und trifft * deshalb nicht nur den Container, sondern auch den Kasten INNERHALB jeder * Spalte. Der kann damit nicht mitschrumpfen: sobald eine Spalte schmaler * als 550px wird, quillt ihr Inhalt heraus und legt sich ueber die * Nachbarspalte. Gemessen kippt es bei 1584px Fensterbreite - da ist die * Spalte noch 544px breit, ihr Innenkasten aber schon auf seine 550px * festgenagelt. Darunter waechst der Ueberstand weiter, ab rund 1000px * bekommt die Seite zusaetzlich einen horizontalen Scrollbalken. * 3. .iframe_container ist 350px hoch, waehrend die Karte selbst 450px hoch * ist - die Hoehe kommt aus dem Einbettungscode und steht per !important * am iframe. Die fehlenden 100px laufen nach unten ueber die Adresse. * * Dagegen: jede Spalte bekommt eine Wunschbreite von 300px und darf wachsen * und schrumpfen, die Untergrenze faellt an beiden Stellen weg, und der * Kartencontainer richtet sich nach seinem Inhalt. Damit stehen die Karten * nebeneinander, solange beide 300px bekommen, und rutschen darunter von * selbst untereinander - ohne feste Bildschirmgrenze. * * Die Selektoren tragen body davor, weil das eigene Stylesheet vor dem * Theme-CSS geladen wird und bei Gleichstand das spaeter geladene Theme * gewaenne. */ body #container_maps > .ce_frame_start_inside { display: flex; flex-wrap: wrap; gap: 1rem; min-width: 0; } body #container_maps > .ce_frame_start_inside > .ce_frame_start { /* min-width: 0 erlaubt das Schrumpfen unter die Inhaltsbreite - ohne das waere ein Flex-Element nie schmaler als sein laengstes Wort. */ flex: 1 1 300px; min-width: 0; } /* * Unterhalb von 768px immer untereinander. * * Ohne diese Ausnahme kippt die Anordnung zweimal statt einmal. Das Theme * ersetzt bei 767px das Artikel-Padding .menu-width (15 Prozent je Seite) * durch feste 20px. Die nutzbare Breite springt dadurch nach oben - gemessen * von 537px bei 768px Fensterbreite auf 726px bei 766px - und reicht auf * einmal wieder fuer zwei Spalten. Die Karten standen deshalb zwischen 767px * und 727px erneut nebeneinander, jede nur rund 310px breit, und darunter * wieder untereinander. * * Die Grenze ist bewusst dieselbe, an der das Theme ohnehin auf sein * Mobil-Layout wechselt. Damit ist die Reihenfolge durchgaengig: nebeneinander * oberhalb von rund 980px Fensterbreite, darunter untereinander. */ @media only screen and (max-width: 767px) { body #container_maps > .ce_frame_start_inside > .ce_frame_start { flex-basis: 100%; } } /* * Der Kasten in der Spalte. Nur dieser Selektor ist staerker als der des * Themes: #container_maps .ce_frame_start meint eine Rahmenebene unterhalb * von #container_maps, also genau die Spalte - der aeussere Kasten faellt * nicht darunter, weil #container_maps kein Nachfahre von sich selbst ist. */ body #container_maps .ce_frame_start .ce_frame_start_inside { min-width: 0; } /* * Hoehe aus dem Inhalt statt der festen 350px des Themes, sonst laeuft die * 450px hohe Karte unten heraus. * * Der Abstand zur Adresse darunter lag bei 0px: das Element traegt zwar * mb-default, aber diese Klasse hat im Theme keine Regel. 20px entspricht der * Stufe mb-20, die auch die Ueberschrift ueber der Karte benutzt. */ body #container_maps .iframe_container { height: auto; margin-bottom: 20px; } /* * Cookiebanner auf dem Telefon. * * styles.css positioniert .cookiebar_inside absolut mit left: 0, gibt ihm aber * weder right noch width. Ein absolut positionierter Kasten ohne beides nimmt * nicht die Breite seines Elternelements, sondern seine min-content-Breite. * Das Popup schrumpfte also korrekt - gemessen auf 288px bei 320px * Fensterbreite -, sein Inhalt blieb bei 427px stehen und lief rechts aus dem * Bild. Betroffen war jedes Fenster unter rund 477px, also jedes Telefon: * Ueberschrift, Optionstexte, Knopfbeschriftung und die Links zu * Datenschutzerklaerung und Impressum waren angeschnitten. * * Die 427px kamen vom Absenden-Knopf, der ein input war - dessen Beschriftung * kann nicht umbrechen. Er ist jetzt ein button, siehe * templates/layout/mod_html_cookiebar.html5. Damit reicht hier right: 0. */ body .mod_cookiebar_optin .cookiebar_inside { right: 0; } /* * Danach blieb ein einziges Wort uebrig: die Ueberschrift * "Datenschutzeinstellungen" braucht bei 26px Schriftgroesse 339px, der * Inhaltsbereich hat auf einem 320px-Telefon aber nur 238px. Da das Dokument * lang="de" traegt, kann der Browser an den richtigen Stellen trennen - * "Daten-schutz-ein-stellungen" statt eines harten Schnitts mitten im Wort. * overflow-wrap steht als Rueckfall daneben, falls eine Silbentrennung fehlt. */ body .mod_cookiebar_optin .cookiebar_content { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } #colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center} table.sortable thead th{background-image:url(../../assets/tablesorter/images/default.svg);background-repeat:no-repeat;background-position:center right}table.sortable thead th.tablesorter-headerAsc{background-image:url(../../assets/tablesorter/images/asc.svg)}table.sortable thead th.tablesorter-headerDesc{background-image:url(../../assets/tablesorter/images/desc.svg)} .content-slider{overflow:hidden;visibility:hidden;position:relative}.slider-wrapper{overflow:hidden;position:relative}.slider-wrapper>*{float:left;width:100%;position:relative}.slider-control{height:30px;position:relative}.slider-control a,.slider-control .slider-menu{position:absolute;top:9px;display:inline-block}.slider-control .slider-prev{left:0}.slider-control .slider-next{right:0}.slider-control .slider-menu{top:0;width:50%;left:50%;margin-left:-25%;font-size:27px;text-align:center}.slider-control .slider-menu b{color:#bbb;cursor:pointer}.slider-control .slider-menu b.active{color:#666}