/**
* Site-level styles. Nach dem Ausbau von bootstrap_custom.min.css,
* Basics.css und Rte.css übernimmt diese Datei Reset, Typografie-Basis
* und Button-Defaults — alles, was Screen.css implizit voraussetzt.
*/
/* Produktseite: Demos-Tab Audio-Player */
#audio-player { user-select: none; }
.demo-controls {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.5rem 0 1.25rem; margin-bottom: 0.5rem;
border-bottom: 2px solid #000;
}
.demo-play-btn {
flex: 0 0 auto; appearance: none; background: #000; border: none;
color: #fff; width: 2.5rem; height: 2.5rem; border-radius: 50%;
cursor: pointer; font-size: 1rem; display: flex; align-items: center;
justify-content: center; line-height: 1;
}
.demo-play-btn:hover { background: #1db682; }
.demo-controls-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.demo-now-playing { font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-scrubber { height: 4px; background: #ddd; cursor: pointer; position: relative; }
.demo-progress { height: 100%; background: #1db682; transition: width 0.1s linear; }
.demo-time { flex: 0 0 auto; font-size: 1.1rem; font-family: monospace; white-space: nowrap; }
.audio-playlist { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.audio-playlist li { padding: 0.35rem 0; }
.audio-playlist li.li-description { padding-top: 1.2rem; }
/* Hängeeinzug der Content-Listen (.news-text-wrap ol li, s. u.) hier aufheben:
#playlist ol li (Screen.css) nullt das padding, das negative text-indent
blieb aber stehen und schob die Zwischenüberschrift links aus dem Panel. */
.news-text-wrap .audio-playlist li { text-indent: 0; }
/* Grau via Token — #87888a lag bei 3,55:1 und riss WCAG 1.4.3 (11px bold). */
.audio-playlist .track-description { font-size: 1.1rem; font-weight: 700; text-transform: uppercase; color: var(--color-brand-grey, #606060); margin-bottom: 0.2rem; }
.demo-track-btn {
appearance: none; background: none; border: none; cursor: pointer;
display: flex; align-items: center; gap: 1rem;
width: 100%; padding: 0.55rem 0.75rem; text-align: left;
font: inherit; color: inherit; border-radius: 3px;
}
.demo-track-btn:hover { color: #127857; background: rgba(0,0,0,0.04); }
.demo-track-icon { flex: 0 0 1.4rem; font-size: 0.75rem; color: #87888a; }
.demo-track-btn:hover .demo-track-icon { color: #127857; }
.audio-playlist li.playing .demo-track-btn { color: #127857; font-weight: 700; }
.audio-playlist li.playing .demo-track-icon { color: #127857; }
/* Die „Neues zu" / „Das passt zu"-Überschriften sind jetzt echte h3 (vorher
h4 mit h3-Optik, was die Gliederung h2 → h4 springen ließ) und erben ihre
Optik damit direkt von der h3-Regel weiter unten. */
/*
* Reset: ersetzt Basics.css `* { margin:0; padding:0 }` und Bootstraps
* Normalize. Minimal gehalten, nur das was Screen.css erwartet.
*/
*, *::before, *::after { box-sizing: border-box; }
/*
* Root-Font-Size auf 10 px (bzw. 62.5 % des Browser-Defaults) — kam
* vorher aus bootstrap_custom.css. Screen.css rechnet durchgehend in
* rem (1.3rem = 13 px, 6.1rem = 61 px etc.). Ohne diese Zeile wird
* alles 1.6× zu groß. User-Browser-Settings bleiben respektiert, weil
* % statt hartem 10 px.
*
* scroll-behavior + scroll-padding-top: ersetzt den jQuery-
* html/body-animate mit 100-px-Offset bei URL-Hash-Navigation.
* Respektiert reduced-motion automatisch (Chrome/Safari).
*/
html {
font-size: 62.5%;
overflow-y: scroll;
scroll-behavior: smooth;
scroll-padding-top: 100px;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body { margin: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/*
* Screen.css (TYPO3-Altlast) hängt global an JEDES `li` ein Icon-Font-Bullet
* (`ul li:before { content: "\e607" }`) und nimmt einzelne Komponenten dann
* per Hand wieder aus (.ce-uploads, .page-navigation). Karten-Raster wurden
* dabei nie erfasst → Punkt über jeder Produktkachel. Hier einmal zentral
* zurückgenommen; die Fließtext-Bereiche weiter unten setzen ihren Punkt selbst.
*
* Dazu gehört `ul li { margin-left: 1rem }` (Screen.css:89) — der Hängeeinzug,
* auf den das Bullet negativ zurückragte. Ohne Bullet ist er nur noch ein
* 10-px-Versatz, der in Karten-Rastern jede Kachel aus ihrer Grid-Spalte
* schiebt. Der zweite Selektor matcht die Verschachtelungsregel aus
* Screen.css:91 spezifitätsgleich, sonst bliebe sie stehen.
*/
ul li::before { content: none; }
ul li, ul li > ul > li { margin-left: 0; }
img, svg { max-width: 100%; }
img { border: 0; }
figure { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
body { line-height: 1.4; }
/*
* Tagline unter dem Logo (sub-header + Home-topheader). Als statt h1
* (eine h1 pro Seite), Optik 1:1 wie die frühere #logo h1 aus Screen.css:
* schwarz auf dem hellen Home-Header, weiß auf Unterseiten und – per .light
* aus main.js – sobald der Home-Header beim Scrollen dunkel wird.
*/
#logo .site-tagline {
margin: 15px 0 0;
font-family: 'montserrat', 'Montserrat Fallback', 'Helvetica Neue', Arial, sans-serif;
font-size: 1.1rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: 3px;
text-transform: uppercase;
text-align: center;
color: #000;
transition: color 1s;
}
#mainmenu.sub #logo .site-tagline,
#logo .site-tagline.light { color: #fff; }
@media (prefers-reduced-motion: reduce) {
#logo .site-tagline { transition: none; }
}
/*
* Typografie-Basis (ersetzt Rte.css). Screen.css setzt Spezifika (hero h1,
* news h2 etc.) — hier nur die globalen Defaults für font-family + Größen.
*/
h1, h2, h3, h4, .grey-color-text, .h3-style, .h2-style {
font-family: 'montserrat', 'Montserrat Fallback', 'Helvetica Neue', Arial, sans-serif;
font-weight: 500;
}
h1 a, h2 a, h3 a, h4 a,
.grey-color-text a, .h3-style a, .h2-style a { color: inherit; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover,
.grey-color-text a:hover, .h3-style a:hover, .h2-style a:hover {
color: #127857; text-decoration: none;
}
h2, .h2-style {
font-size: 1.8rem; font-weight: 600; text-transform: none;
text-align: left; margin-top: 15px; margin-bottom: 10px;
}
/*
* Grau auf #606060 statt #87888a: letzteres liegt bei 3,55:1 auf Weiß und
* reißt WCAG 1.4.3 (4,5:1). Die 3:1-Ausnahme für große Schrift greift nicht,
* dafür müsste fetter Text >= 18,66px sein — hier sind es 13px. Gleiche
* Entscheidung wie bei .grey-color-text weiter unten, die h3-Regel war
* damals übersehen worden.
*/
h3, .h3-style {
font-size: 1.3rem; font-weight: 700; color: var(--color-brand-grey, #606060);
text-transform: uppercase; margin-bottom: 17px;
}
h3::before, .h3-style::before { content: none; }
h5, h6 {
font-family: 'Open Sans', 'Open Sans Fallback', Arial, sans-serif;
font-weight: 700; font-size: 13px; margin-bottom: 0.4rem;
}
h5 a, h6 a { color: inherit; }
h6 { font-weight: 500; margin-bottom: 20px; }
p { margin-bottom: 20px; color: #000; }
/*
* Listen in Fließtext-Bereichen.
*
* Bewusst OHNE .frame-type-list: die TYPO3-Altlast-Klasse ist ein reiner
* Layout-Wrapper und umschließt Karten-Raster (Produkt-/Händlerliste), den
* Paginator und Download-Listen — dort sind ul/li Struktur, kein Fließtext.
* Redaktioneller Text unterhalb eines .frame-type-list liegt immer zusätzlich
* in .news-text-wrap bzw. [itemprop="description"] und wird darüber erfasst.
*/
.frame-type-text ol, .news-text-wrap ol,
[itemprop="description"] ol, .error-content__text ol {
list-style: decimal inside; padding-left: 0; margin-bottom: 20px;
}
.frame-type-text ol li, .news-text-wrap ol li,
[itemprop="description"] ol li, .error-content__text ol li {
margin: 0 0 0.3em 0;
/* Hängeeinzug, siehe ul li unten. Wert = gemessene Breite des Markers
„1. " (1.1em); längste ol im Content hat 5 Einträge, also einstellig.
Ab 10 Einträgen wird der Marker breiter als der Einzug und die
Folgezeilen stehen minimal links vom Text der ersten Zeile. */
padding-left: 1.1em; text-indent: -1.1em;
}
.frame-type-text ul, .news-text-wrap ul,
[itemprop="description"] ul, .error-content__text ul,
ul.related-products-list {
list-style: none; padding-left: 0; margin-bottom: 20px;
}
.frame-type-text ul li, .news-text-wrap ul li,
[itemprop="description"] ul li, .error-content__text ul li,
ul.related-products-list li {
margin: 0 0 0.3em 0;
/*
* Hängeeinzug: padding-left rückt die Folgezeilen ein, das negative
* text-indent zieht die erste Zeile (inkl. Bullet) wieder heraus. Die
* Liste bleibt damit bündig zum umgebenden Text — kein Listeneinzug,
* wie in 3671a13 gewollt —, umbrechende Zeilen stehen aber unter dem
* Text statt unter dem Punkt. Wert = feste Bullet-Breite unten.
*/
padding-left: 0.75em; text-indent: -0.75em;
}
.frame-type-text ul li::before, .news-text-wrap ul li::before,
[itemprop="description"] ul li::before, .error-content__text ul li::before,
ul.related-products-list li::before {
content: "•"; position: static; top: auto;
/* Feste Breite statt margin-right: der Bullet belegt exakt den Betrag,
um den die Folgezeilen eingerückt sind → Text bündig ab Zeile 2.
text-indent zurücksetzen: der negative Einzug vom li wird sonst in
diese inline-block-Box vererbt und schiebt das Glyph aus ihr heraus. */
display: inline-block; width: 0.75em; text-indent: 0;
margin-left: 0; margin-right: 0;
font-family: inherit; font-size: 1em;
}
/*
* Verschachtelte Listen.
*
* Ohne diesen Block erbt die innere Liste padding-left: 0 von der Regel oben
* und steht dann nur um den Hängeeinzug der äußeren Ebene (0.75em) versetzt —
* ihre Bullets sitzen exakt dort, wo der Text der äußeren Ebene beginnt. Mit
* identischem „•" auf beiden Ebenen liest sich das wie ein Ausrichtungsfehler
* statt wie eine Hierarchie. Zusätzlich schleppt die innere Liste das
* margin-bottom: 20px der Top-Level-Regel mit und reißt eine Lücke.
*
* :is() statt der ausgeschriebenen Kombinatorik — bei vier Kontexten × zwei
* Listentypen × zwei Ebenen wären das sonst dutzende Selektoren. Spezifität
* bleibt bei (0,1,x) und damit im Rahmen der Regeln oben.
*/
:is(.frame-type-text, .news-text-wrap, [itemprop="description"], .error-content__text)
:is(ul, ol) :is(ul, ol) {
padding-left: 1.25em;
margin-bottom: 0;
}
/* Marker je Ebene unterscheiden — die feste Breite oben hält die Ausrichtung. */
:is(.frame-type-text, .news-text-wrap, [itemprop="description"], .error-content__text)
:is(ul, ol) ul > li::before {
content: "◦";
}
:is(.frame-type-text, .news-text-wrap, [itemprop="description"], .error-content__text)
:is(ul, ol) :is(ul, ol) ul > li::before {
content: "▪";
}
/* Verschachtelte Nummerierung konventionell auf Buchstaben. */
:is(.frame-type-text, .news-text-wrap, [itemprop="description"], .error-content__text)
:is(ul, ol) ol {
list-style-type: lower-alpha;
}
.frame-type-text table thead:not(:has(th:not(:empty))),
.frame-type-list table thead:not(:has(th:not(:empty))),
.news-text-wrap table thead:not(:has(th:not(:empty))),
[itemprop="description"] table thead:not(:has(th:not(:empty))),
.error-content__text table thead:not(:has(th:not(:empty))) { display: none; }
.frame-type-text table, .frame-type-list table, .news-text-wrap table,
[itemprop="description"] table, .error-content__text table { border-collapse: collapse; width: 100%; }
.frame-type-text table tr, .frame-type-list table tr, .news-text-wrap table tr,
[itemprop="description"] table tr, .error-content__text table tr { border-bottom: 1px solid #ccc; }
.frame-type-text table td, .frame-type-list table td, .news-text-wrap table td,
[itemprop="description"] table td, .error-content__text table td,
.frame-type-text table th, .frame-type-list table th, .news-text-wrap table th,
[itemprop="description"] table th, .error-content__text table th { padding: 0.4em 0.6em 0.4em 0; }
/* Tag-Buttons in der News-Liste: sehen aus wie Links, stoppen den Card-Klick */
.news-tag-btn {
appearance: none; background: none; border: none; padding: 0;
font: inherit; color: inherit; cursor: pointer; text-decoration: underline;
}
.news-tag-btn:hover { color: #127857; }
.news-tag-btn + .news-tag-btn::before { content: ', '; text-decoration: none; display: inline; }
/* Teaser-Bilder in News-Liste und Detailseite: 16:9-Zuschnitt per CSS */
.news-img-outer-wrap img {
width: 100%; height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
figcaption, .image-description {
display: block; max-width: 41rem;
margin: 0 auto 2.5rem; text-align: left; font-style: italic;
}
/*
* Text-Highlights (aus Rte.css migriert). Werden in Content-HTML für
* Einzelwörter innerhalb von Fließtext verwendet (z.B. Slider-Pretext).
*/
.text-highlight-turkis { color: #1db682; }
.text-highlight-blue { color: #74a6fd; }
.text-highlight-yellow { color: #ffcd2a; }
/*
* Button-Defaults (aus Rte.css migriert, Kontrast-Fix bleibt erhalten).
* Screen.css gibt dem Submit/Reset keine eigene Basisklasse; ohne diese
* Regel würden alle Submit-Buttons browser-default rendern.
*/
input[type="submit"], input[type="reset"], a.button, button.button {
display: inline-block;
margin-top: 10px;
padding: 5px 10px;
text-align: left;
text-transform: uppercase;
font-weight: 700;
color: #fff;
background-color: #127857;
border: none;
-moz-appearance: none;
-webkit-appearance: none;
}
input[type="submit"]:hover, input[type="reset"]:hover,
a.button:hover, button.button:hover {
background-color: #000;
text-decoration: none;
}
/*
* Bootstrap-Navbar-Toggle war transparent-framelos. Ohne Bootstrap
* bekommt der Button Browser-Defaults (grauer Button). Zurücksetzen.
*/
.navbar-toggle {
background: transparent;
border: none;
padding: 0;
}
/* Clearfix-Kompat für Legacy-Markup (home.php news-grid). */
.cleaner { clear: both; }
/*
* „Mehr"-Block der Produktseite, Spalte „Neues zu …": semantisch eine Liste
* (ul/li), soll aber keine Listenoptik haben. „Das passt zu …" nutzt dagegen
* .related-products-list mit den Fließtext-Bullets oben. list-style/padding erledigt
* der Reset oben; hier nur der Einzug aus Screen.css:89 (`ul li {
* margin-left: 1rem }`), der den zentrierten Text sonst nach rechts schiebt.
*/
.related .news-list-view > li { margin-left: 0; }
/*
* Error-Page: zentrierter Inhalt mit Zurück-zur-Startseite-Button
* und Quick-Nav zu den Hauptbereichen.
*/
.error-content {
max-width: 60rem;
margin: 4rem auto;
text-align: center;
}
.error-content__text {
font-size: 1.5rem;
margin-bottom: 2rem;
}
.error-content__home {
margin-bottom: 3rem;
}
.error-quicknav__intro {
margin-bottom: 1rem;
font-family: 'montserrat', 'Montserrat Fallback', sans-serif;
text-transform: uppercase;
letter-spacing: 0.2rem;
font-size: 1.2rem;
}
.error-quicknav ul {
display: flex;
flex-wrap: wrap;
gap: 1rem 2rem;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
}
.error-quicknav a {
font-family: 'montserrat', 'Montserrat Fallback', sans-serif;
font-size: 1.3rem;
letter-spacing: 0.1rem;
}
/* Footer-Adressspalte: kein eigenes Heading → padding-top = h3-Höhe (1.3rem × 1.4) + margin-bottom (1rem), damit Text auf Linienhöhe der Links beginnt. */
@media (min-width: 768px) {
body > footer .grid > div:last-child { padding-top: 2.82rem; }
}
/*
* Footer-Copyright: abschließende Zeile unter dem Footer-Grid.
* Jahr wird per date('Y') in PHP generiert, passt sich automatisch an.
*/
.footer-copyright {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-brand-grey-light, #c6c6c6);
text-align: center;
font-size: 1.1rem;
color: var(--color-brand-grey, #606060);
}
/*
* .grey-color-text: Screen.css setzt #87888a (3.4:1 auf Weiß) → WCAG
* 1.4.3 fail. Auf #606060 ziehen (6:1), immer noch deutlich grau,
* aber lesbar. Betrifft u. a. News-Listen-Tags auf Händler-Seiten.
*/
.grey-color-text { color: #606060; }
/*
* Home: sticky Main-Menu (ersetzt jquery.sticky-Plugin mit topSpacing 130).
* 130 px entspricht #topHeader-Höhe (fixed oben).
*/
@media (min-width: 768px) {
body.bel-layout1 #mainmenu {
position: sticky;
top: 130px;
}
}
/*
* Mobile-Menü: #topHeader über #mainmenu (dessen z-index: 110 deckt sonst
* Logo + Language ab). #mainmenu wird auf 0 kollabiert — die Nav erscheint
* als Fixed-Overlay unterhalb des topHeaders wenn geöffnet.
*/
@media (max-width: 767px) {
#topHeader { z-index: 200; }
/* Mobile zeigt immer den Dark-State (#first/Hero ist display:none, kein
Space-Background mehr sichtbar sonst). Repliziert #topHeader.dark-Regeln. */
#topHeader {
height: 17.8rem;
background-color: transparent;
}
#topHeader #space { opacity: 1; }
#topHeader #logo .logo {
background-image: url('../vermona/Images/logo_w2.svg');
}
#topHeader #language a { color: #fff; }
#topHeader #logo .site-tagline { color: #fff; }
/* Inhalt unter den Dark-topHeader schieben */
#front-page { padding-top: 17.8rem; }
/* mainmenu nimmt keinen Platz weg, nav bleibt im DOM für den Toggle */
#mainmenu { height: 0; min-height: 0; margin: 0; overflow: visible; }
/* Hamburger-Button immer weiß (Dark-Hintergrund) */
.navbar-toggle-mobile { color: #fff; }
.navbar-toggle-mobile {
position: absolute;
bottom: 1.2rem;
right: 1.5rem;
background: transparent;
border: none;
padding: 0.4rem 0.5rem;
font-family: "montserrat", sans-serif;
font-weight: 700;
font-size: 1.3rem;
letter-spacing: 0.1rem;
text-transform: uppercase;
cursor: pointer;
line-height: 1.6rem;
}
.navbar-toggle-mobile::after {
padding-left: 0.6rem;
font-family: "icons";
font-size: 2.1rem;
content: "\e120";
vertical-align: middle;
}
/* Nav als Fixed-Overlay unterhalb topHeader */
#mainmenu nav#navbar { margin-top: 0; }
#mainmenu nav#navbar.is-open {
position: fixed;
top: 17.8rem;
left: 0;
width: 100%;
z-index: 300;
display: block;
background-color: #fff;
border-bottom: 2px solid #000;
}
}
/*
* Home: "Dark"-Theme beim Scrollen. JS (custom.js) addet beim scroll
* die Klassen `.dark` an #topHeader, `.no-background` an #mainmenu und
* `.light` an die Tagline-H1. Die eigentlichen Regeln (Logo-Swap,
* Space-Tile-Bg, Language-Switcher-Farbe) stecken bereits in Screen.css
* (#topHeader.dark, header.dark #language a, #logo h1.light etc.).
*/
/*
* Language-Switcher: bleibt beim Scrollen an seiner Position. Der alte
* jQuery-Slide auf top: 148 war visuell hektisch. Original-Top aus
* Screen.css (1.2 rem) wird beibehalten.
*/
/*
* Hero auf Home: ersetzt background-image-inline (nicht preloadbar, 1.6 MB
* unresponsiv) durch ein ![]()
mit srcset + object-fit:
* cover. Position absolute ins .image-container, damit .wrapper und
* #scroll-down-button darüber liegen. Höhe via CSS statt JS → kein CLS
* durch den alten $('#first').css('height', …)-Hop.
*/
#first { height: calc(100vh - 130px); min-height: 500px; }
#first .image-container { position: relative; overflow: hidden; }
#first .hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0;
z-index: 0;
}
#first .wrapper,
#first .scroll-down-button-wrapper { z-index: 2; }
@media only screen and (max-width: 767px) {
#first .hero-image { display: none; }
}
/*
* Scroll-Down-Button: Screen.css setzt position:fixed → Button bleibt an
* der Viewport-Position kleben, scrollt nie weg. Auf absolute (zum
* Wrapper) umstellen, damit er mit dem Hero scrollt und beim Verlassen
* des Hero-Bereichs aus dem Viewport verschwindet.
*/
#first .scroll-down-button-wrapper #scroll-down-button {
position: absolute;
animation: scroll-down-color-cycle 7.5s ease-in-out infinite;
}
/*
* Headline-Frame im Hero: Screen.css setzt .frame-default auf position:
* fixed → das Wort bleibt beim Scrollen am Viewport und erscheint mitten
* im normalen Inhalt. Zurück auf normalen Flow.
*/
#first .wrapper .frame-default {
position: static;
}
/*
* Farb-Cycle blau → gelb → grün → blau — ersetzt die jQuery-setTimeout-
* Kaskade in custom.js (addClassesToElementWithDelay, 2,5 s-Takt).
* Reduced-motion: User deaktiviert Animation.
*/
@keyframes scroll-down-color-cycle {
0%, 33% { background-color: #74a6fd; }
40%, 63% { background-color: #ffcd2a; }
70%, 93% { background-color: #1db682; }
100% { background-color: #74a6fd; }
}
@media (prefers-reduced-motion: reduce) {
#first .scroll-down-button-wrapper #scroll-down-button {
animation: none;
}
}
/*
* Font-display: swap für alle Web-Fonts. Screen.css/Rte.css deklarieren
* die @font-faces ohne font-display → FOIT bis 3 s. Wir re-deklarieren
* (Cascade: last wins) mit swap + nur noch woff2/woff (EOT/SVG/TTF raus,
* IE9/Legacy-iOS sind 2026 tot). Liegt bewusst hier statt in main.css,
* damit Vite die URLs nicht mit Content-Hash umschreibt.
*/
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local(''),
url('../vermona/Fonts/open-sans-v29-latin-300.woff2') format('woff2'),
url('../vermona/Fonts/open-sans-v29-latin-300.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local(''),
url('../vermona/Fonts/open-sans-v29-latin-regular.woff2') format('woff2'),
url('../vermona/Fonts/open-sans-v29-latin-regular.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: local(''),
url('../vermona/Fonts/open-sans-v29-latin-500.woff2') format('woff2'),
url('../vermona/Fonts/open-sans-v29-latin-500.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local(''),
url('../vermona/Fonts/open-sans-v29-latin-700.woff2') format('woff2'),
url('../vermona/Fonts/open-sans-v29-latin-700.woff') format('woff');
}
@font-face {
font-family: 'montserrat';
font-weight: 500;
font-display: swap;
src: url('../vermona/Fonts/montserrat-regular-webfont.woff') format('woff');
}
@font-face {
font-family: 'montserrat';
font-weight: 700;
font-display: swap;
src: url('../vermona/Fonts/montserrat-bold-webfont.woff') format('woff');
}
@font-face {
font-family: 'icons';
font-display: block;
src: url('../vermona/Fonts/icomoon.woff') format('woff');
}
/*
* Fallback-Fonts mit size-adjust/ascent-override matchen die Metriken
* von Open Sans / Montserrat. Während der Webfont lädt, zeigt der Browser
* Arial mit angepassten Metriken — swap in den Webfont verursacht dann
* keine Zeilen-Verschiebung mehr. Behebt CLS (0.72 → <0.1), Font-Shifts
* waren laut Lighthouse Haupt-Culprit. Werte aus Capsize/Fontaine-Tabellen.
*/
@font-face {
font-family: 'Open Sans Fallback';
src: local('Arial');
size-adjust: 106.44%;
ascent-override: 101.53%;
descent-override: 27.77%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Montserrat Fallback';
src: local('Arial');
size-adjust: 111.4%;
ascent-override: 86.7%;
descent-override: 22.5%;
line-gap-override: 0%;
}
/* Font-Stack-Überschreibungen — Fallback vor dem Webfont einsetzen. */
body {
font-family: 'Open Sans', 'Open Sans Fallback', Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, .grey-color-text, .h3-style, .h2-style {
font-family: 'montserrat', 'Montserrat Fallback', 'Helvetica Neue', Arial, sans-serif;
}
/* Section heading (seperator) — original CSS hides it on bel-onecolumn except for specific TYPO3 page IDs; our pages use slug-based IDs so re-enable it. */
.bel-onecolumn .seperator { display: block; }
/* Pagination: original news-extension CSS ships `float:left` on li (not in Screen.css) — port the essentials here. */
.page-navigation p { float: left; }
.page-navigation ul { float: right; list-style: none; padding: 0; margin: 0; }
.page-navigation ul li { float: left; display: block; padding: 0 2px; background: none; }
.page-navigation ul li a { display: block; }
.news-clear { clear: both; }
/* Home news grid: Bild füllt volle Breite des Rahmens → Höhe ergibt sich aus dem natürlichen Seitenverhältnis → 0.7rem-Rahmen gleichmäßig auf allen Seiten.
Artikel/Teaser-Höhen und .more-Positionierung waren auf die alte fixe 30.5rem-Artikelhöhe abgestimmt — alles auf auto/static umgestellt. */
.bel-layout1 .news .layout1 .article { height: auto; display: flex; flex-direction: column; }
.bel-layout1 .news .layout1 .article .news-card-link { display: flex; flex-direction: column; flex: 1; }
.bel-layout1 .news .layout1 .article .news-img-wrap.special-vermona-border { height: auto; }
.bel-layout1 .news .layout1 .article .news-img-wrap.special-vermona-border img { width: 100%; height: auto; max-height: none; display: block; }
.bel-layout1 .news .layout1 .article .teaser-text { flex: 1; height: auto; overflow: visible; }
.bel-layout1 .news .layout1 .article .more { position: static; margin-top: 0.5rem; }
/* Product category grid (layout2): float-based grid breaks row packing when article heights differ.
Switch to flexbox so uneven heights don't leave gaps. */
/* layout2 grid now handled via Tailwind utilities in category.php template. */
/* Home invasion slider: self-built fade slider (original's TYPO3 cswiper wrapper wasn't ported).
Slides stack on top of each other; only .is-active is visible via opacity transition.
Original Screen.css already styles .slide-text (35% right), .cswiper-button-* (icon font), .swiper-pagination-bullet (#fff, active #74a6fd) — we only add what's missing. */
.invasion-container .swiper { max-width: 1400px; margin: 0 auto; }
.invasion-container .swiper-container { max-width: 1400px; margin: 0 auto; height: 500px; position: relative; overflow: hidden; }
@media only screen and (max-width: 1400px) { .invasion-container .swiper-container { height: 32vw !important; } }
/* Bootstrap sets fixed .container widths (1170px at ≥1200vw); override inside slides so inner-wrapper spans full 1400px slide width. */
.invasion-container .inner-wrapper.container { width: 100%; max-width: 1400px; padding: 0; }
.invasion-container .swiper-wrapper { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.invasion-container .swiper-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 600ms ease; float: none; width: auto; height: auto; }
.invasion-container .swiper-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.invasion-container .swiper-slide figure { margin: 0; position: absolute; inset: 0; z-index: 0; }
.invasion-container .swiper-slide picture { display: block; width: 100%; height: 100%; }
.invasion-container .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.invasion-container .swiper-slide .inner-wrapper { position: relative; z-index: 2; height: 100%; padding: 0; }
.invasion-container .slide-text { position: absolute; }
.invasion-container .swiper-slide .slide-text a { color: #fff; text-decoration: none; display: block; }
.invasion-container .swiper-slide .slide-text a:hover { text-decoration: none; }
/* Prev/next buttons: simple arrows, no background circle. */
.invasion-container .cswiper-button-prev,
.invasion-container .cswiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; cursor: pointer; user-select: none; padding: 1rem; color: #fff; line-height: 1; background: none; }
.invasion-container .cswiper-button-prev { left: 0.5rem; }
.invasion-container .cswiper-button-next { right: 0.5rem; }
.invasion-container .cswiper-button-prev .control-icon,
.invasion-container .cswiper-button-next .control-icon { display: inline-block; font-style: normal; font-weight: 400; line-height: 1; font-size: 4.5rem; text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); }
.invasion-container .cswiper-button-prev .control-icon::before { content: '‹'; font-family: inherit; }
.invasion-container .cswiper-button-next .control-icon::before { content: '›'; font-family: inherit; }
/* Pagination container + bullet base sizing (vermona only sets bg color) */
.invasion-container .swiper-pagination { position: absolute; bottom: 1.5rem; left: 0; right: 0; text-align: center; z-index: 10; }
.invasion-container .swiper-pagination-bullet { display: inline-block; width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; cursor: pointer; }
/*
* Background-Overrides auf WebP (−230 KB: space.jpg 91→15 KB,
* space_tile_brighter.jpg 181→27 KB). Screen.css bleibt unangetastet,
* site.css lädt später und gewinnt im Cascade. WebP-Support >96 % —
* 2026 kein Fallback mehr nötig.
*/
#mainmenu {
background: url('../vermona/Images/space.webp') 50% 0;
}
#topHeader #space,
#topHeader.dark #space {
background-image: url('../vermona/Images/space_tile_brighter.webp');
}
/* Sub-page sticky: collapse header to nav-only on scroll */
@media only screen and (min-width: 767px) {
body.scrolled #mainmenu.sub {
height: auto;
padding-bottom: 0.8rem;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: url('../vermona/Images/space.webp') 50% 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
/*
* Auf Scroll nur noch Nav zeigen: Logo + Language-Container verstecken.
* Der Alpine-Wrapper
bleibt sichtbar — er ist der direkte
* Container von