* { font-family:"open_sans", Verdana, Arial, Helvetica, sans-serif; text-shadow:none !important; } html, body { font-size:1em; height:100%; margin:0; padding:0; } /* Fliesstext des Portals. Bis zum 17.8.2026 reines Schwarz; kanonisch ist jetzt der dunkle Schiefer der Tokenebene (`--text`, #1f2d3a) - Entscheidung des Nutzers. Es waren DREI Fliesstextfarben im Umlauf: #000000 hier, #2d4156 in `forms.css` (9x) und #1f2d3a als Token. Die beiden anderen ziehen nach. */ body, div.ui-page { color:var(--text); height:100%; } body>#body-div { height:100%; margin:0; padding:0; {{if ((isset($smarty.session.force_browser_view_override) && $smarty.session.force_browser_view_override == "desktop"))}} min-width:1200px; {{/if}} } .wrapper { margin:0 auto; min-height:100%; height:auto !important; height:100%; padding:0; position:relative; max-width:100%; display:flex; flex-flow: column; background-color:var(--bg); } .wrapper > main { flex-grow: 1; margin:0 auto; width:100%; max-width:1200px; background-color:var(--bg); } .shadow { -moz-box-shadow:0 0 2px 2px #A1A1A1; -webkit-box-shadow:0 0 2px 2px #A1A1A1; box-shadow:0 0 2px 2px #A1A1A1; } table tr th, .tablehead { font-weight:bold; border-bottom:1px solid black; text-align:left; } .table_oddeven>tbody>tr:nth-child(odd), .oddeven >*:nth-child(odd){background-color:var(--surface);} .table_oddeven>tbody>tr:nth-child(even), .oddeven >*:nth-child(even){background-color:var(--surface-zebra); } .table_oddeven>tbody>tr:hover td, .table_oddeven>tbody>tr:hover td *, .oddeven >*:hover, .oddeven >*:hover * {color:var(--on-accent) !important;background-color:var(--accent) !important;} a, .ui-widget-content a { color:var(--accent); text-decoration:none; } a:hover { color:var(--accent); text-decoration:underline; } a.usermenu { font-weight: bold; white-space:nowrap; min-width: 150px !important } form { margin:0px; } form input,textarea,select { border:1px solid var(--line-strong); background-color:var(--surface); } form input:focus,textarea:focus,select:focus { background-color:#ddd; } #tooltip { font-size:10px; position:absolute; z-index:3000; border:1px solid #111; background-color:#eee; padding:5px; opacity:0.85; } #tooltip h3, #tooltip div { font-size:10px; margin:0; } .portlet { margin:0 0 1em } .portlet-header { padding:0.2em; margin:0.2em; cursor:move } .portlet-header .ui-icon { float:right; } .portlet-content { padding:0.2em; margin:0.2em; } .ui-sortable-placeholder { border:1px dotted black; visibility:visible !important; } .ui-sortable-placeholder * { visibility:hidden; } /* HEADER */ header { background:var(--bg); } .portal-header { clear:both; position:relative; padding:0; margin:auto; width:100%; max-width:1200px; border:none; } .portal-header .links { position:relative; width:auto; float:right; text-align:right; font-size:0.9em; } .portal-header .links ul.float { list-style:none; padding:0; margin:0; float:right; } .portal-header .links ul.float li { float:left; display:inline-block; *display:inline; zoom:1; } .portal-header .links ul.float li:first-child { padding-left:0; } .portal-header .links ul.float li:last-child { padding-right:0; } .portal-header .links a { color:var(--accent); text-decoration: none; display:inline-block; } .portal-header .links a:hover, .portal-header .links a.ui-state-highlight, .portal-header .links a.nlf-highlight { color:#FFFFFF; background-color:#3399CC; border:none; } .portal-header .links a { line-height:20px; min-height:20px; } .search-container form { position:relative; display:flex; z-index:10; width:100%; padding:0.2em; border:0.1em solid var(--accent); border-radius:0.1em 0 0 0.1em; } .search-container form input[type="text"] { padding:0.1em; font-size:90%; border:1px solid var(--line-strong); background-color:#EEEEEE; outline:none; } .search-container form input[type="text"]:focus { border:1px solid #777777; background-color:none; } .search-container form button { float:right; cursor:pointer; margin:0; border:none; text-align:center; color:#FFFFFF; background:#CCCCCC; } .search-container form button:hover { border:none; color:var(--accent); Background:#CCCCCC; } .navigation { position:relative; z-index:12; border:none; } .navigation .toolbar { float:left; padding:0; margin:0; } /* MAIN */ main { } .content_container { clear:both; position:relative; margin: auto; padding:0; width:100%; max-width:1200px; } #content_main { position:relative; display:block; min-height:1px; padding:0; } #content_left { position:relative; padding:0 0.5em 0 0.5em; min-height:1px; } #content_right { position:relative; padding:0 0.5em 0 0.5em; min-height:1px; } /* FOOTER */ footer { } .portal-footer { color:var(--text-muted); clear:both; position:relative; padding:0; margin:auto; width:100%; max-width:1200px; } .portal-footer a { color:var(--accent); text-decoration:none; } .portal-footer a:hover { color:var(--accent-hover); text-decoration:none } .portal-footer ul.float { list-style:none; padding:0; margin:0; } .portal-footer ul.float>li { float:left; display:inline-block; *display:inline; zoom:1; } .portal-footer div.sitemap ul { list-style:none; margin:0; padding:0; padding-right:2px; } .portal-footer div.sitemap ul li { text-overflow: ellipsis; overflow:hidden; max-width:inherit; } .portal-footer div.sitemap>ul>li:first-child>a { font-weight:bold; } .portal-footer div.sitemap>ul li.sep {text-align:left;line-height:0;height:100%;padding:0;} .portal-footer div.sitemap>ul li.sep span{float:none;padding-right:0;width:3px;height:100%;display:inline-block;background-color:#A6A6A6;background-image:none;} .portal-footer .content { background:transparent !important; } .blockquote { display:block; width:100%; margin:0; color: #999999; font-family: "Georgia", serif; font-size: 2.2em; font-style: italic; padding-top: 0.75em; padding-bottom: 0.5em; text-align: center; } .cite { display:block; width:100%; margin:0; color: #999999; font-family: "Titillium Web", "Arial", sans-serif; font-size: 1.1em; font-style: normal; text-align: right; } .portal-header-full { padding:0; margin:0; max-width:100%; } .portal-footer-full { padding:0; margin:0; max-width:100%; } .nlf-highlight { font-weight:bold; } .ui-state-hover .nlf-highlight, .ui-widget-content .ui-state-hover .nlf-highlight, .ui-widget-header .ui-state-hover .nlf-highlight, .ui-state-focus .nlf-highlight, .ui-widget-content .ui-state-focus .nlf-highlight, .ui-widget-header .ui-state-focus .nlf-highlight { color:var(--ui-hover-text); } .ui-state-hover a .nlf-highlight, .ui-state-hover a:hover .nlf-highlight { color:var(--ui-hover-text); } .nlf-gradient { background-image:linear-gradient(bottom, #003776 33%, #3465A4 50%, #003776 84%); background-image:-o-linear-gradient(bottom, #003776 33%, #3465A4 50%, #003776 84%); background-image:-moz-linear-gradient(bottom, #003776 33%, #3465A4 50%, #003776 84%); background-image:-webkit-linear-gradient(bottom, #003776 33%, #3465A4 50%, #003776 84%); background-image:-ms-linear-gradient(bottom, #003776 33%, #3465A4 50%, #003776 84%); background-image:-webkit-gradient( linear, left bottom, left top, color-stop(0.33, #003776), color-stop(0.5, #3465A4), color-stop(0.84, #003776) ); filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#003776', endColorstr='#3465A4'); /* IE6 & IE7 */ -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#003776', endColorstr='#3465A4')"; /* IE8 */ zoom:1; } .alpha { background:rgb(255, 255, 255); zoom:1; filter:alpha(opacity=50); opacity:0.5; } .bx-wrapper{position:relative;zoom:1;margin:0 auto;padding:0;min-width:inherit;min-height:inherit;} .bx-wrapper .bx-viewport{-webkit-transform:translatez(0);-moz-transform:translatez(0);-ms-transform:translatez(0);-o-transform:translatez(0);transform:translatez(0);width:inherit !important;} .bx-wrapper .bx-pager,.bx-wrapper .bx-controls-auto{position:absolute;z-index:1000;} .bx-wrapper .bx-loading{min-height:50px;background:url({{substr($IMAGE_DIR, strlen($smarty.const.PORTAL_PATH_REL)+1)}}/loading.gif) center center no-repeat var(--surface);height:100%;width:100%;position:absolute;top:0;left:0;z-index:2000;} .bxPager{position:absolute;display:block;text-align:center;font-size:.85em;color:#666;top:10px;width:100%;} .bxPager .bx-pager .bx-pager-item{float:left;} .bxPager .bx-pager.bx-default-pager{display:inline-block;} .bxPager .bx-pager.bx-default-pager a{ display:block;background:#CCCCCC;border:none;text-indent:-9999px;outline:0; width:10px;height:10px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;margin:0 3px; } .bxPager .bx-pager.bx-default-pager a:hover{background:#0d4769;} .bxPager .bx-pager.bx-default-pager a.active{background:#0d4769;} .bxControl {position:absolute;display:block;text-align:center;bottom:10px;width:100%;} /* background images */ .bxPrev .bx-prev,.bxNext .bx-next { position:absolute;display:block;z-index:1000;width:37px;height:37px;overflow:hidden; } .bxPrev .bx-prev,.bxNext .bx-next { position:absolute;display:block;z-index:1000;width:32px;height:32px;overflow:hidden; background-image:url({{substr($TEMPLATE_DIR, strlen($smarty.const.PORTAL_PATH_REL)+1)}}/imgs/slidesjs-next-prev.png);background-repeat:no-repeat;text-indent:-9999px; } .bxControl .bx-start,.bxControl .bx-stop { position:absolute;display:block;z-index:1000;width:32px;height:32px;overflow:hidden; background-image:url({{substr($TEMPLATE_DIR, strlen($smarty.const.PORTAL_PATH_REL)+1)}}/imgs/slidesjs-next-prev.png);background-repeat:no-repeat;text-indent:-9999px; } .bxPrev .bx-prev{left:10px;top:50%;background-position:0px 0px;} .bxPrev .bx-prev:hover{cursor:pointer;background-position:0px -32px;} .bxNext .bx-next{right:10px;top:50%;background-position:-32px 0px;} .bxNext .bx-next:hover{cursor:pointer;background-position:-32px -32px;} .bxControl .bx-start{margin:0 auto;background-position:-64px 0px;} .bxControl .bx-start:hover,.bxControl .bx-start.active{cursor:pointer;background-position:-64px -32px;} .bxControl .bx-stop{margin:0 auto;background-position:-96px 0px;} .bxControl .bx-stop:hover,.bxControl .bx-stop.active{cursor:pointer;background-position:-96px -32px;} /* text "images" */ .bxPrev .bx-prev.text,.bxNext .bx-next.text,.bxControl .bx-start.text,.bxControl .bx-stop.text {font-size:20px;font-weight:bold;background:none !important;text-indent:0;} .bxPrev .bx-prev.text{left:10px;top:50%;width:auto;height:auto;color:#CCCCCC !important;} .bxPrev .bx-prev.text:hover{color:#000000 !important;cursor:pointer;} .bxNext .bx-next.text{right:10px;top:50%;width:auto;height:auto;color:#CCCCCC !important;} .bxNext .bx-next.text:hover{color:#000000 !important;cursor:pointer;} .bxControl .bx-start.text{margin:0 auto;width:auto;height:auto;color:#CCCCCC !important;} .bxControl .bx-start.text:hover,.bxControl .bx-start.text.active{color:#000000 !important;} .bxControl .bx-stop.text{margin:0 auto;width:auto;height:auto;color:#CCCCCC !important;} .bxControl .bx-stop.text:hover,.bxControl .bx-stop.text.active{color:#000000 !important;} .slides-parent { position:relative; } .slides-container { z-index:10; position:relative; border:0; padding:0; margin:0; text-align:center; line-height:0; height:inherit; } .slides-container .slide { margin:0 auto; width:inherit; height:inherit; max-width:100%; background-position:center; text-align:left; margin:0 auto; line-height:0; } .slides-container .slide .slide-content { position:relative; margin:0 auto; } .slides-container .slide img { max-width:100% !important; height:auto; } .slides-container .slide .caption { -moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; position:absolute; z-index:500; background:#000000; background:rgba(0,0,0,.8); color:#FFFFFF; width:400px; height:auto; line-height:2em; font-size:1em; display:none; } .slides-container .slide .caption.active { display:block; padding:0.5em; text-align:right; } .bookmarkicon { border: 1px solid var(--line-strong); } .portal-footer, .portal-footer-full { font-size:0.9em; } .portal-footer .portal-footer1, .portal-footer .portal-footer1 *, .portal-footer .portal-footer1 a:hover, /* Halb tokenisiert: `background-color:var(--bg)` stand hier neben `color:#444444`. Im Dunkeln ergab das 1,7:1 - gemessen am 18.8.2026, nachdem der Farbmodus-Pruefstand um Links erweitert worden war. Vorher sah ihn keiner, weil er nur Bedienelemente mass. */ .portal-footer.portal-footer1, .portal-footer.portal-footer1 *, .portal-footer.portal-footer1 a:hover { color:var(--text-muted); background-color:var(--bg); } .portal-footer .portal-footer2, .portal-footer .portal-footer2 *, .portal-footer .portal-footer2 a:hover, .portal-footer.portal-footer2, .portal-footer.portal-footer2 *, .portal-footer.portal-footer2 a:hover { color:var(--on-accent); background-color:var(--accent); } .fancybox-close, .fancybox-prev, .fancybox-next, .fancybox-close:hover, .fancybox-prev:hover, .fancybox-next:hover { text-decoration:none; z-index:9999; } .fancybox-close, .fancybox-prev span, .fancybox-next span { background:none; } .fancybox-close:after { content: "\00D7"; color:#AAAAAA !important; font-size:2em; font-weight:bold; text-decoration:none; } .fancybox-close:hover:after { color:#000000 !important; } .fancybox-prev span:after { content: "\276E"; color:#000000 !important; font-size:2em; font-weight:bold; } .fancybox-next span:after { content: "\276F"; color:#000000 !important; font-size:2em; font-weight:bold; } .imagezoom { position:relative; overflow:hidden !important; } .imagezoom a { position:relative; display:block; overflow:hidden !important; } /* Seit dem 19.8.2026 steckt jedes eigene Bild in einem `` (WebP-/AVIF-Fassungen). Ein direkter Kindselektor fragt nach dem BAUM und nicht nach dem Layout - `display:contents` auf `picture` (browser-defaults.css) hilft hier also NICHT. Deshalb steht neben jeder `> img`-Regel dieselbe Regel mit `> picture > img`. */ .imagezoom a > img, .imagezoom a > picture > img { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .imagezoom:hover a > img, .imagezoom:hover a > picture > img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .imagezoom a > span { position:absolute;height:100%;width:100%;padding:0;margin:0;display:flex;align-items:flex-end;justify-content:center;z-index:101; } .imagezoom a > span > span { text-align:center;padding:0.5em;background:rgba(255,255,255,.5);color:#000000; } .jqx-tooltip-main { text-align:left !important; } .hover>*:nth-child(odd) *, .hover1 * {background-color:var(--surface)} .hover>*:nth-child(even) *, .hover2 * {background-color:var(--surface-zebra)} .hover>*:hover *, .hover>*:hover a, .hover1:hover *, .hover2:hover *, .hover1:hover a, .hover2:hover a {color:#FFFFFF !important;background-color:#0864B7 !important;} .hover-reverse>*:nth-child(odd) * {background-color:var(--surface-zebra)} .hover-reverse>*:nth-child(even) * {background-color:var(--surface)} .hover-reverse>*:hover *, .hover-reverse>*:hover a {color:#FFFFFF !important;background-color:#0864B7 !important;} @media (min-width: 1281px) { header > .header > .header-left { display:block; } header > .header > .header-center { display:block; } header > .header > .header-right { display:block; } header .header-logo-responsive { display:none; } } @media (max-width: 1280px) { header > .header > .header-left { display:none; } header > .header > .header-center { display:block; width:100%; margin:0 auto; } header > .header > .header-right { display:none; } header .header-logo-responsive { display:block; } } @media (max-width: 1152px) { header > .header > .header-center { font-size:0.9em; } } @media (max-width: 1024px) { header > .header > .header-center { font-size:0.8em; } } table.nlf-table { width:100%;border-collapse:collapse;border:1px solid #777; } table.nlf-table th, table.nlf-table td { padding:0.3em; } table.nlf-table tr.header2 td, table.nlf-table tr.Header td { font-weight:bold; } table.nlf-table tr.info td, table.nlf-table tr.Info td { background-color:var(--accent); color:var(--on-accent); } @media (max-width: 767px) { .hide-small { display:none; } table.nlf-table {font-size:0.9em; } } @media (min-width: 1025px) { table.nlf-table {font-size:1em; } } @media (max-width: 479px) { .columns { -webkit-columns: 1; -moz-columns: 1; columns: 1; } } @media (min-width: 480px) { .columns { -webkit-columns: 2; -moz-columns: 2; columns: 2; } } @media (min-width: 768px) { .columns { -webkit-columns: 3; -moz-columns: 3; columns: 3; } } @media (min-width: 1025px) { .columns { -webkit-columns: 4; -moz-columns: 4; columns: 4; } } .nlf-active { padding-left: 18px; background-image: url("{{substr($IMAGE_DIR, strlen($smarty.const.PORTAL_PATH_REL)+1)}}/traffic_green.png"); background-size:16px 16px; background-repeat:no-repeat; background-position:center left; } .nlf-inactive { padding-left: 18px; background-image: url("{{substr($IMAGE_DIR, strlen($smarty.const.PORTAL_PATH_REL)+1)}}/traffic_yellow.png"); background-size:16px 16px; background-repeat:no-repeat; background-position:center left; } .nlf-blocked { color:red; padding-left: 18px; background-image: url("{{substr($IMAGE_DIR, strlen($smarty.const.PORTAL_PATH_REL)+1)}}/traffic_red.png"); background-size:16px 16px; background-repeat:no-repeat; background-position:center left; } .date-highlight, .date-highlight * { font-weight: bold !important; } .date-highlight > a { background:var(--accent) !important; color:var(--on-accent) !important; } .marquee { width:100%; overflow:hidden; margin:auto; white-space:nowrap; } .marquee div.marque-content { display: inline-block; animation: marquee 90s linear infinite; } .marquee div.marque-content:hover { animation-play-state: paused; } .marquee div.marquee-collection-1 { position: relative; left: 0%; animation: swap 90s linear infinite; } .marquee div.marque-item { display: inline-block; /* Lay items in a horizontal line */ padding: 0 1em; } @keyframes marquee { 0% { transform: translateX(0) } 100% { transform: translateX(-100%) } } @keyframes swap { 0%, 50% { left: 0%; } 50.01%, 100% { left: 100%; } } /* ── Nachrichtenkopf: Titel links, Datum rechts (17.8.2026) ───────────────────────────────────── * * Das Datum stand als `` im Markup. Beim Einklappen * schrumpfte der Kopf von 1200 auf 254 Pixel, und das gefloatete Datum rutschte direkt an den * Titel - „Sommerpause 202614.07.2026". Ein `float` braucht einen Elternteil mit Breite; hat der * keine, klebt es am Inhalt. * * Flexbox statt Float: Der Titel nimmt den Platz, das Datum sitzt am Ende, und der Abstand ist * eine Zusicherung statt einer Nebenwirkung. Das haelt auch, wenn der Kopf schmal wird. * * `width: 100%` am Accordion ist der Gürtel zum Hosenträger: Der Kopf schrumpfte, WEIL sein * Elternteil schrumpfte. * ────────────────────────────────────────────────────────────────────────────────────────────── */ #news-layout { width: 100%; } /* * ── Der Kopf ist seit dem 18.8.2026 ein `` ────────────────────────────────────────── * Vorher `> .title` - ein DIREKTES Kind von `#news-layout`. Der Beitrag steckt jetzt in einem * `
`, der Kopf ist damit ein Enkel, und der alte Selektor traefe ins Leere. Ein * Layout, das lautlos ausfaellt, sieht nicht nach einem Fehler aus - es sieht nach schlechtem * Satz aus. * * `display:flex` nimmt dem `` seine `list-item`-Darstellung und damit das Dreieck des * Browsers. Es kommt weiter unten als eigenes Zeichen zurueck. */ /* Gestalt und Ausrichtung kommen jetzt vom Bauteil `.nlf-accordion__item > summary`. News behaelt nur den etwas groesseren Abstand zwischen Titel und Datum. */ #news-layout .title { gap: 0.75rem; } /* Der Titelverweis nimmt den freien Platz, damit das Datum wirklich am Ende sitzt. */ #news-layout .title > a { flex: 1 1 auto; min-width: 0; } #news-layout .title > .time { flex: 0 0 auto; font-size: 0.85em; font-weight: normal; white-space: nowrap; } /* ── Terminticker der Startseite (17.8.2026) ──────────────────────────────────────────────────── * * Der Ticker zeigt die naechsten Termine und kodiert ihre Herkunft farblich (Kreis, Bezirk, Liga, * Pokal, Rangliste). Die Farben kommen aus `events_calendars.color` - sie sind DATEN, keine * Gestaltung, und stehen deshalb weiterhin inline am Element. Alles andere steht hier. * * Vorher trug der ganze Termintext die Kategoriefarbe. Gesaettigte Unterscheidungsfarben taugen * als Flaeche, nicht als Schrift: Vier von sechs lagen auf weissem Grund unter 4,5:1, die Liga mit * `#00FF00` bei **1,37:1**. Jetzt traegt eine Marke die Farbe, der Text steht in `--text`. * ────────────────────────────────────────────────────────────────────────────────────────────── */ #vdh-ticker .nlf-ticker__item { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.3rem; line-height: 1.45; } /* Die Marke traegt die Kategoriefarbe. `flex-shrink: 0`, sonst quetscht sie der lange Termintext zusammen, bis der Kategoriename umbricht. */ #vdh-ticker .nlf-ticker__badge { flex: 0 0 auto; /* * Feste Mindestbreite - sonst franst der linke Rand aus. * * Die Kategorienamen sind verschieden lang („Rangliste" 73px, „Bezirk" 54px, „Kreis" 47px), * und ohne diese Zeile beginnt jeder Termintext an einer anderen Stelle: gemessen bei 965, * 973 und 992 Pixel. Die Liste sieht dann verrutscht aus, obwohl nichts verrutscht ist. * * `min-width`, nicht `width`: Ein laengerer Kalendername darf die Marke wachsen lassen, statt * abgeschnitten zu werden. Die Ausrichtung geht dann fuer diese eine Zeile verloren - das ist * besser als ein unlesbarer Name. */ min-width: 5.5rem; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em; text-align: center; white-space: nowrap; } /* * Der Termintext ist ein Verweis, sieht aber nicht wie einer aus - er soll sich lesen lassen. * * Die Id im Selektor ist noetig, nicht schmueckend: Der Ticker steht in `.ui-widget-content`, und * `.ui-widget-content a { color: var(--accent) }` (0,1,1) schlaegt eine blosse Klasse (0,1,0). */ #vdh-ticker .nlf-ticker__text { color: var(--text); text-decoration: none; } #vdh-ticker .nlf-ticker__text:hover, #vdh-ticker .nlf-ticker__text:focus-visible { color: var(--accent); text-decoration: underline; } /* ── Aus dem Markup geholt (Stufe 4, 17.8.2026) ───────────────────────────────────────────────── * * Inline-`style=` schlaegt JEDE Stilblattregel und folgt niemals einem Token. Der Rahmen trug 29 * davon; drei enthielten eine Farbe, und nur die blockierten den Farbmodus. Die uebrigen 26 sind * Groessen und Positionen - unschoen, aber kein Hindernis. * ────────────────────────────────────────────────────────────────────────────────────────────── */ /* * Die Partner-Buehne bleibt SCHWARZ, und zwar ausdruecklich. * * Sie traegt die Logos der Partner, und die sind fuer schwarzen Grund gemacht - ein Logo mit * weisser Schrift verschwindet auf heller Flaeche. Diese Flaeche folgt dem Farbmodus deshalb * NICHT. Das ist der Unterschied zwischen „vergessen zu tokenisieren" und „hier waere ein Token * falsch"; ohne diesen Hinweis raeumt es der Naechste weg. */ .nlf-partner-stage { background: #000; } .nlf-partner-stage--fixed { position: absolute; right: 0; z-index: 999; width: 288px; height: 96px; } /* Trennlinie ueber dem Fuss - eine Linie, also `--line-strong` (zeichengleich zum bisherigen #CCCCCC). Sie SOLL dem Farbmodus folgen. */ .nlf-footer { border-top: 1px solid var(--line-strong); } /* ── Tokenfassung der Regeln, die auf dem PDF-Weg fest bleiben MÜSSEN (Stufe 2c) ──────────────── * * mPDF 8.3.1 kennt weder `var()` noch `--eigenschaften`. Gemessen am 17.8.2026 an gerenderten * PDFs - und zwar in ALLEN Schreibweisen: * * color:#0233ff → 0.008 0.200 1.000 rg * color:var(--accent) → KEIN Farboperator * color:var(--accent,#0233ff) → KEIN Farboperator ← der Rückfall rettet nichts * color:#0233ff;color:var(--accent) → KEIN Farboperator ← die Doppelung auch nicht * * Die letzte Zeile ist die überraschende: mPDF überschreibt den festen Wert mit dem ungültigen * und behält am Ende gar nichts. Das gängige Muster „erst Hex, dann var()" ist hier also KEINE * Lösung. * * Deshalb behalten die drei betroffenen Regeln in `public/css/default.css` reine Farbwerte - * `pages/modules/league/formular.php` verlinkt diese Datei direkt an mPDF. Die Tokenfassung steht * stattdessen HIER: Diese Datei kommt ausschliesslich über das Bündel (`css.php:204`), mPDF sieht * sie nie, und sie wird NACH `public/css/default.css` eingelesen - überschreibt also. * * Im Hellmodus zeichengleich (`--surface` = #ffffff, `--surface-zebra` = #dddddd, * `--line-strong` = #cccccc), nachgehalten von `check-tokens.mjs`. * ────────────────────────────────────────────────────────────────────────────────────────────── */ table tbody tr.even { background-color: var(--surface); } table tbody tr.odd { background-color: var(--surface-zebra); } .preferences > table { border-color: var(--line-strong); } /* * ── Druckregeln: nur das, was es hier NICHT schon gibt (17.8.2026) ────────────────────────────── * `public/css/default.css` trägt denselben Druckblock und wird im Bündel VOR dieser Datei * eingelesen (`css.php:183` gegen `css.php:204`). Vier Regeln standen wortgleich zweimal drin: * `header.printHeader` und `footer.printFooter` in `@media screen`, `div.printPage` und * `div.printPage > div, …` in `@media print`. Sie sind hier entfernt. * * Pixelneutral, und zwar nachprüfbar: Zwischen den beiden Dateien liegen nur `forms.css` und die * Modul-Stilblätter, und KEINES davon nennt einen dieser Selektoren. Die frühere Fassung ist * zeichengleich, also entscheidet die Reihenfolge über nichts. * * Was hier BLEIBT, steht in `public/css/default.css` nicht: `body{margin:0}`, die aktiven * `div.printPortrait`/`div.printLandscape` (dort sind sie auskommentiert) und `div.printHide` * (dort ohne `div`, also mit anderer Spezifität). * * NICHT umgekehrt aufräumen: `public/css/default.css` hängt am PDF-Weg - `league/formular.php:56` * verlinkt `/css/default.css` direkt, ohne Bündel. Wer dort kürzt, entfärbt die Liga-Formulare, * und zwar sichtbar erst beim Drucken. * ────────────────────────────────────────────────────────────────────────────────────────────── */ @media print { body { margin: 0 0 0 0; } div.printPortrait { position: relative; size: a4; /* width: 210mm !important; height: 297mm !important; */ } div.printLandscape { position: relative; size: a4 landscape; /* width: 297mm !important; height: 210mm !important; */ } div.printHide { display: none; } } /* @media (prefers-color-scheme: dark) { html, body, header, .wrapper, .wrapper > main, .ui-widget-content, .cms .cms-menu .cms-navigation-link, .portal-footer .portal-footer1, .portal-footer .portal-footer1 *, .portal-footer .portal-footer1 a:hover, .portal-footer.portal-footer1, .portal-footer.portal-footer1 *, .portal-footer.portal-footer1 a:hover { color:#CCCCCC; background:#333333; } } */ /* Der Ticker selbst oder sein direkter Wrapper */ #vdh-ticker { display: flex; flex-direction: column; /* Falls die Items untereinander stehen */ /* WICHTIG: Flex-Basis auf 0 und grow auf 1, damit er den verfügbaren Platz nutzt, aber nicht erzwingt */ flex: 1 1 auto; /* Ermöglicht das Scrollen */ overflow-y: auto; /* Verhindert, dass der Flex-Item größer als sein Parent wird */ min-height: 0; /* Optionale feste Höhe, falls der Parent keine vorgibt */ max-height: 300px; } /* ── Das Accordion ──────────────────────────────────────────────────────────────────────────── * `news` und `faq` liefern ihre Beitraege als `
`. Das Aussehen kam bis zum * 18.8.2026 von jQuery UI (`.ui-accordion-header`, `.ui-state-default`); diese Regeln ersetzen * es - mit Tokens, also in beiden Modi. * * Kein `overflow`, keine feste Hoehe: Ein `
` waechst und schrumpft von selbst, und * genau das war der Grund fuer `heightStyle: "content"` im alten Widgetaufruf. * ────────────────────────────────────────────────────────────────────────────────────────── */ .nlf-accordion__item + .nlf-accordion__item { margin-top: 0.35rem; } .nlf-accordion__item > summary { /* * `display:flex` steht hier und NICHT bei `#news-layout`, wo es zuerst stand. * * Es ist keine Zierde: Ein `` ist von Haus aus `display:list-item`, und darin * ist `::before` ein INLINE-Kasten. Auf einen nicht ersetzten Inline-Kasten wirkt * `transform` nicht - der Pfeil traegt dann zwar einen gedrehten BERECHNETEN Wert, dreht * sich aber nicht. Genau so gemeldet am 18.8.2026: „Die Pfeile in der FAQ aendern sich * nicht wenn aufgeklappt." Auf der Startseite ging es, weil dort eine eigene Regel * (`#news-layout .title`) den Kopf zum Flex-Behaelter machte. * * Im Flex-Behaelter wird jedes Kind blockartig - damit greifen `width` und `transform`. */ display: flex; /* * ── `flex-start`, nicht `baseline` (19.8.2026) ──────────────────────────────────────── * Gemeldet: „Die Chevron in der mobilen Ansicht sind nicht korrekt ausgerichtet." * Mit `baseline` sitzt der Pfeil auf der GRUNDLINIE der ersten Zeile. Buchstaben füllen * von dort nach oben bis zur Versalhöhe, ein geometrisches Zeichen dagegen liegt mittig * im Geviert - es erscheint dadurch tiefer als der Text neben ihm. Auf dem Schreibtisch * mit einzeiligen Köpfen fällt das kaum auf, mobil bricht fast jede Frage auf zwei oder * drei Zeilen, und der Versatz steht dann neben einem hohen Textblock. * * `flex-start` plus eine FESTE Zeilenhöhe gibt dem Pfeil denselben Zeilenkasten wie der * ersten Textzeile; die Form wird darin mittig gesetzt (siehe `::before`). */ align-items: flex-start; line-height: 1.4; gap: 0.5rem; cursor: pointer; padding: 0.4em 0.6em; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-raised); font-weight: bold; /* Das Dreieck des Browsers weicht dem eigenen Zeichen - `display:flex` oben nimmt es ohnehin, in Safari braucht es zusaetzlich diese Zeile. */ list-style: none; } .nlf-accordion__item > summary::-webkit-details-marker { display: none; } .nlf-accordion__item > summary::before { content: "\25B8"; flex: 0 0 auto; width: 1em; line-height: inherit; text-align: center; color: var(--text-muted); transition: transform var(--motion, 160ms) var(--ease, ease); } /* * ── Die Form statt des Zeichens ─────────────────────────────────────────────────────────────── * Ein Schriftzeichen sitzt dort, wo die Schrift es vorsieht - und `\25B8` kommt je nach System * aus einer ANDEREN Schrift als der Text daneben, mit anderen Metriken. Genau zentrieren lässt * sich das nicht. Eine Maske schon: der Kasten ist exakt eine Zeile hoch, die Form sitzt mittig * darin, und beides hängt nur noch an `line-height` - nicht mehr an der Schrift. * * Das Zeichen oben bleibt als Rückfall stehen. Masken kennen alle Zielbrowser seit Jahren, * aber ein Rückfall, der einen Pfeil zeigt, ist besser als einer, der ein Rechteck zeigt. */ @supports ((mask-image: none) or (-webkit-mask-image: none)) { .nlf-accordion__item > summary::before { content: ""; width: 0.7em; height: 1.4em; background: var(--text-muted); -webkit-mask: var(--nlf-chevron) center / 0.62em 0.62em no-repeat; mask: var(--nlf-chevron) center / 0.62em 0.62em no-repeat; } } .nlf-accordion__item[open] > summary::before { transform: rotate(90deg); } /* * ── Überfahren kehrt den Kopf UM ─────────────────────────────────────────────────────────────── * Gemeldet am 19.8.2026: „Hover war invertiert auf Title." Und so war es - bis zur Ablösung von * jQuery UI am 18.8.2026 kam das Aussehen von dessen `.ui-state-hover`: * * .ui-state-hover { border:1px solid #0233FF; background:#818181; color:#fff } * .ui-state-hover a { color:#fff } * * Beim Umbau auf `
` blieb davon nur `border-color` übrig; die Umkehrung ging verloren. * * Das feste `#818181` kommt NICHT zurück: Es kennt keinen Farbmodus und stünde im Dunkeln als * hellgrauer Block. Genommen wird der Akzent - dieselbe Umkehrung, die das Menü für die aktive * Zeile schon benutzt, und damit eine Gestalt statt zweier. * * Der Pfeil ist eine MASKE, keine Schrift: Er hängt an `background`, nicht an `color`, und muss * eigens mitgenommen werden. Wer das vergisst, hat einen gedämpft-grauen Pfeil auf blauem Grund. */ .nlf-accordion__item > summary:hover { border-color: var(--accent); background: var(--accent); color: var(--on-accent); } .nlf-accordion__item > summary:hover a, .nlf-accordion__item > summary:hover .time { color: var(--on-accent); } .nlf-accordion__item > summary:hover::before { background: var(--on-accent); } /* Der Fokusrahmen sitzt am Kopf - er ist das Bedienelement. */ .nlf-accordion__item > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .nlf-accordion__item > .content { padding: 0.6em 0.6em 0.2em; } /* * ── Aufgeklappt bilden Kopf und Rumpf EINE Karte ─────────────────────────────────────────────── * Gemeldet am 19.8.2026: „Akkordion Content ohne Rahmen." Und so war es: Die Kopfzeile trug einen * vollständigen Rahmen mit 4 px Radius, der aufgeklappte Rumpf darunter gar keinen. Auf der * Startseite stand der Nachrichtenbeitrag dadurch rahmenlos zwischen lauter eingefassten Kästen. * * Dieselbe Gestalt setzt `pages/modules/cms/css/default.css` bereits für die CMS-Blöcke * (`.header:has(+ .content)`): Kopf oben gerundet ohne Boden, Rumpf unten gerundet ohne Deckel - * zusammen EIN Rahmen je Karte. Das Akkordion ist nur ein anderer Aufbau (`summary` statt * `.header`) und war von jener Regel nie erfasst. * * ── Warum `[open]` ───────────────────────────────────────────────────────────────────────────── * Bei `
` steht der Rumpf AUCH ZUGEKLAPPT im DOM. Ohne `[open]` verlöre die Kopfzeile also * immer ihren unteren Rahmen und die untere Rundung - der geschlossene Eintrag sähe aus wie ein * unten offener Kasten. Der Zustand muss deshalb Teil des Selektors sein, nicht nur die Nachbarschaft. * * ── Warum `:has()` in BEIDEN Regeln ──────────────────────────────────────────────────────────── * Ein Browser ohne `:has()` verwirft eine Regel mit ungültigem Selektor - aber nur diese eine. * Stünde `:has()` nur oben, fiele die Kopfregel weg und die Rumpfregel bliebe: Rahmen unten, nichts * oben, ein oben offener Kasten. Also kein Rückfall auf das alte Bild, sondern ein kaputtes. Mit * `:has()` in beiden stehen sie gemeinsam oder fallen gemeinsam. (Dieselbe Begründung steht bei der * CMS-Regel; sie gilt hier unverändert.) */ .nlf-accordion__item[open] > summary:has(+ .content) { border-bottom: 0; border-radius: 4px 4px 0 0; } .nlf-accordion__item[open] > summary:has(+ .content) + .content { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 4px 4px; background: var(--surface); } /* * ── Überfahren: auch die VIERTE Kante ────────────────────────────────────────────────────────── * Gemeldet am 19.8.2026: „Bei Hover auf Titel Accordion sollen 4 Seiten Rahmen blau werden, unten * fehlt." Und so war es - eine Folge der Karte darüber: Dem aufgeklappten Kopf fehlt der untere * Rahmen, also konnte `border-color` ihn beim Überfahren auch nicht einfärben. Beim ZUGEKLAPPTEN * Fach waren alle vier Kanten schon immer blau; betroffen war nur der offene Zustand. * * ── Warum ein innerer Schatten und kein Rahmen ───────────────────────────────────────────────── * `border-bottom: 1px` erst beim Überfahren zu setzen macht das Element 1 px höher - der ganze * Rumpf darunter rutschte beim Überfahren nach unten und beim Verlassen zurück. Ein innerer * Schatten liegt IM Element, ändert also keine Masse. Er zeichnet dieselbe 1-px-Linie an * derselben Stelle. * * Eine dauerhaft transparente Kante wäre die Alternative gewesen - sie hinterliesse aber eine * 1 px hohe Naht in der Kopffarbe zwischen Kopf und Rumpf, weil der Rahmenbereich den Hintergrund * des Elements zeigt. */ .nlf-accordion__item[open] > summary:has(+ .content):hover { box-shadow: inset 0 -1px 0 var(--accent); } /* ── Reiter (public/js/tabs.js) ─────────────────────────────────────────────────────────────── * Loest jQuery UIs `.tabs()` ab. Das Aussehen kam bis zum 18.8.2026 aus `jquery-ui.theme.css` * (`.ui-tabs-nav`, `.ui-state-default`, `.ui-state-active`); hier steht es mit Tokens, also in * beiden Modi. * * Die Leiste liegt AUF dem Rand des Faches: Der aktive Reiter hat unten keinen Rand und * dieselbe Flaeche wie das Fach - so lesen Reiter und Fach als ein Bauteil, und nicht als * Knopfreihe ueber einem Kasten. * ────────────────────────────────────────────────────────────────────────────────────────── */ .nlf-tabs__list { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 -1px; padding: 0; list-style: none; } .nlf-tabs__list > li { margin: 0; padding: 0; list-style: none; } .nlf-tabs__tab { display: block; padding: 0.4em 0.9em; border: 1px solid var(--line); border-radius: 4px 4px 0 0; background: var(--surface-raised); color: var(--text-muted); text-decoration: none; white-space: nowrap; } .nlf-tabs__tab:hover { color: var(--text); border-color: var(--accent); } .nlf-tabs__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* Der aktive Reiter oeffnet sich nach unten zum Fach hin. */ .nlf-tabs__list > li.is-active > .nlf-tabs__tab { background: var(--surface); border-bottom-color: var(--surface); color: var(--text); font-weight: bold; } .nlf-tabs__panel { border: 1px solid var(--line); border-radius: 0 4px 4px 4px; background: var(--surface); padding: 0.8em; } /* Ein Fach, das gerollt werden kann, braucht keinen Fokusrahmen um den ganzen Kasten - der Rahmen stoert beim Klicken. Sichtbar wird er nur bei Tastaturbedienung. */ .nlf-tabs__panel:focus { outline: none; } .nlf-tabs__panel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* ── Sprechblase (public/js/tooltip.js) ─────────────────────────────────────────────────────── * Genau EINE im Dokument, umgehaengt statt vervielfacht. `position:absolute` mit * Seitenkoordinaten, damit sie beim Rollen nicht stehen bleibt; `pointer-events:none`, damit * sie den Zeiger nicht abfaengt und dadurch ihr eigenes `mouseleave` ausloest. * ────────────────────────────────────────────────────────────────────────────────────────── */ .nlf-tooltip { position: absolute; z-index: 10000; max-width: 22rem; padding: .5em .7em; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-2); pointer-events: none; } .nlf-tooltip[hidden] { display: none; } /* Die Fussleiste der Dialoge - leer bleibt sie unsichtbar. */ .nlf-dialog__foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .6em .8em; border-top: 1px solid var(--line); } .nlf-dialog__foot:empty { display: none; } /* * ── Der Slider braucht seinen Platz, BEVOR das erste Bild da ist ──────────────────────────────── * Die Höhe des Sliders setzt bxSlider erst, wenn das erste Bild geladen ist. Bis dahin ist die Box * 0 hoch, und alles darunter springt beim Eintreffen um die volle Sliderhöhe nach unten - am * 20.8.2026 der grösste Einzelposten beim Layoutversatz. * * Die Sliderbilder sind BESCHNITTEN, nicht skaliert: 1200x400, 1600x400 und 2000x400 - also drei * verschiedene Seitenverhältnisse. Welches gewählt wird, entscheidet `sizes="100vw"` nach der * Fensterbreite. Deshalb drei Stufen statt eines Verhältnisses; sie treffen die spätere Höhe * genau (bei 1400 px Fensterbreite: 1400 / 4 = 350 px, gemessen ebenfalls 350 px). * * Sobald bxSlider eine feste Höhe setzt, gewinnt die - `aspect-ratio` wirkt nur, solange keine * Höhe dasteht. Die Reservierung gilt also genau für das Zeitfenster, um das es geht. */ /* * ── Warum hier KEINE `aspect-ratio` mehr steht ──────────────────────────────────────────── * Bis zum 20.8.2026 reservierten drei Haltepunkte (3:1, 4:1, 5:1) den Platz des Sliders. Das * passte zu drei Stufen. Seit dem Umbau sind es NEUN, und ihre Verhaeltnisse reichen von * 4,8:1 (1920x400) bis 1,78:1 (256x144) - neun Haltepunkte im Stilblatt waeren eine zweite * Wahrheit neben `sfSliderStufen()`, und die beiden liefen frueher oder spaeter auseinander. * * Schlimmer: Die EINGEPASSTEN Stufen sind je Bild verschieden hoch. Eine 4:3-Vorlage wird in * `640x360` zu 480x360, eine 16:9-Vorlage zu 640x360. Ein fester Wert im Stilblatt waere fuer * das eine zu hoch und fuer das andere zu niedrig. * * Der Versuch, das ganz den ``-Attributen zu ueberlassen, ist GESCHEITERT: Gemessen am * 20.8.2026 stieg der Layoutversatz von 0,070 auf 1,551. Grund: Nur die erste Folie traegt * eine echte Adresse; die uebrigen zeigen bis zum Nachladen auf `pixel.gif`, und ein 1x1-Bild * reserviert nichts. `width`/`height` an der `` bleiben trotzdem stehen - sie helfen * der ersten Folie und kosten nichts. * * Also doch Haltepunkte - aber genau die der Stufen aus `sfSliderStufen()`, nicht drei frei * gewaehlte. Wer die Sliderhoehe in `portal_config` aendert, muss diese Liste nachziehen; * `check-slider.mjs` misst Datei- gegen Kastenverhaeltnis und faellt um, wenn sie auseinander * laufen. */ /* * Unterhalb von 641 px steht ABSICHTLICH keine `aspect-ratio`: Dort sind die Stufen * eingepasst, nicht zugeschnitten, und ihr Verhaeltnis haengt am einzelnen Bild - eine * 4:3-Vorlage wird in `640x360` zu 480x360 (1,33), eine breite zu 480x221 (2,17). Ein fester * Wert waere fuer das eine zu hoch und fuer das andere zu niedrig; gemessen am 20.8.2026 lag * 16:9 um bis zu 34 % daneben. * * Den Platz reserviert dort die erste Folie ueber `width`/`height` an ihrer `` - * die traegt eine echte Adresse und damit echte Masse. Die uebrigen Folien liegen * uebereinander und bestimmen die Hoehe nicht. */ @media (min-width: 641px) { .slides-parent { aspect-ratio: 960 / 400; } } @media (min-width: 961px) { .slides-parent { aspect-ratio: 1024 / 400; } } @media (min-width: 1025px) { .slides-parent { aspect-ratio: 1280 / 400; } } @media (min-width: 1281px) { .slides-parent { aspect-ratio: 1366 / 400; } } @media (min-width: 1367px) { .slides-parent { aspect-ratio: 1600 / 400; } } @media (min-width: 1601px) { .slides-parent { aspect-ratio: 1920 / 400; } } /* ── Der Kopf auf dem Telefon ─────────────────────────────────────────────────────────────────── Vorher: das Logo in einer 80-%-Spalte mit 1em Polster (165 px hoch), darüber gelegt ein `position:absolute`-Block mit `float:right`, und darin ein 75×50 grosser grauer Kasten als Hamburger. Zusammen ein Drittel des ersten Bildschirms für ein Logo und drei Striche - und für Sprache und Hell/Dunkel war kein Platz vorgesehen. Jetzt EINE Zeile: Logo links, Werkzeuge und Hamburger rechts. Das aufklappbare Menü bleibt absolut positioniert und deckt weiter die volle Breite. */ .nlf-mobilkopf__rechts { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 0.5rem 0.75rem; } /* Der Hamburger als Bedienelement, nicht als Fläche: 44 px sind die kleinste Berührungsfläche, die sich sicher treffen lässt - der graue 75×50-Kasten war grösser als nötig und trug eine Farbe, die im Dunkelmodus nichts mehr bedeutete. */ @media (max-width: 63.9375rem) { label.mobileMenu { width: 2.75rem; height: 2.75rem; margin: 0; background: none; border: 1px solid var(--line); border-radius: 8px; } label.mobileMenu .line { left: 0.6875rem; width: 1.375rem; height: 2px; background: var(--text); } label.mobileMenu .line:nth-child(1) { top: 0.9375rem; } label.mobileMenu .line:nth-child(2) { top: 1.3125rem; } label.mobileMenu .line:nth-child(3) { top: 1.6875rem; } input.mobileMenu:checked + label.mobileMenu .line:nth-child(1) { transform: translateY(0.375rem) rotate(-45deg); } input.mobileMenu:checked + label.mobileMenu .line:nth-child(3) { transform: translateY(-0.375rem) rotate(45deg); } /* Das Logo braucht keine 128 px Höhe, um erkannt zu werden. */ .nlf-mobilkopf__logo { padding: 0.5rem 0.75rem !important; } .nlf-mobilkopf__logo img { max-height: 3.5rem; width: auto; } } /* ── Die Partnerbühne auf dem Telefon ────────────────────────────────────────────────────────── Sie war 288 px hoch für ein Logo von 96 px - 192 px leere Fläche direkt unter dem Kopf, auf einem Telefonbildschirm fast ein Viertel des ersten Eindrucks. Die Höhe stammt von bxSlider, das sie inline in den Ansichtsbereich schreibt; deshalb `!important`, sonst gewinnt der Inline-Stil. 96 px ist kein geratener Wert: Alle fünf Partnerdateien messen exakt 288×96. Auf dem Schreibtisch steht die Bühne ohnehin in einem festen 288×96-Kasten (`--fixed`) und bleibt unberührt. */ @media (max-width: 63.9375rem) { .nlf-partner-stage:not(.nlf-partner-stage--fixed), .nlf-partner-stage:not(.nlf-partner-stage--fixed) .bx-wrapper, .nlf-partner-stage:not(.nlf-partner-stage--fixed) .bx-viewport { height: 96px !important; overflow: hidden; } /* Das Logo mittig statt links am schwarzen Rand. */ .nlf-partner-stage:not(.nlf-partner-stage--fixed) .slide { display: flex; align-items: center; justify-content: center; } } /* ── Der Mobilkopf als Raster ─────────────────────────────────────────────────────────────────── Zwei Zeilen, zwei Spalten - das Logo gibt die Höhe vor: [ Logo ] [ Menü ] [ Sprache · Ansicht ] [ Benutzermenü ] Vorher lagen Menü (`position:absolute`) und Benutzermenü (`float:right`) übereinander, und für Sprache und Ansicht war gar kein Platz vorgesehen. Das aufklappbare Menü bleibt absolut - es soll den Inhalt überdecken und nicht die Zeile aufziehen; `position:relative` hier gibt ihm den Bezug über die volle Breite. */ /* Der Innenabstand steht an den RASTERFELDERN, nicht am Raster. Das Rasterwerk (`legacy-grid.css`) setzt auf `[class*="mobile-grid-"]` ein `padding: 0 !important` - dagegen kommt keine Spezifität an, und ein zweites `!important` wäre nur der nächste Zug im selben Spiel. Die Felder tragen ihren Abstand selbst. */ .nlf-mobilkopf { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.25rem 0.5rem; } .nlf-mobilkopf__logo { grid-column: 1; grid-row: 1; display: flex; align-items: center; padding: 0.5rem 0 0.25rem 0.75rem; } .nlf-mobilkopf__logo img { max-height: 3.5rem; width: auto; display: block; } .nlf-mobilkopf__menue { grid-column: 2; grid-row: 1; justify-self: end; padding: 0.5rem 0.75rem 0.25rem 0; } /* Sprache und Ansicht unter das Logo - linksbündig darunter, nicht mittig. */ .nlf-mobilkopf .nlf-tools--mobil { grid-column: 1; grid-row: 2; justify-self: start; padding: 0 0 0.5rem 0.75rem; } /* Das Benutzermenü rechts unten, auf einer Linie mit den Werkzeugen daneben. */ .nlf-mobilkopf__benutzer { grid-column: 2; grid-row: 2; justify-self: end; min-width: 0; padding: 0 0.75rem 0.5rem 0; } .nlf-mobilkopf__benutzer .navigation { display: flex; justify-content: flex-end; }