/* ============================================================
biga-net.at — Cassiopeia Child Template
Primärfarbe: #8eb733 (Grün)
Erstellt 2026-09 auf Basis Cassiopeia-Struktur (analog elektro-bieber.at)
HINWEIS ZU ANNAHMEN:
Diese Datei ist ein erster Entwurf auf Basis der Screenshots und
folgt denselben Cassiopeia-Klassennamen, die sich bei
elektro-bieber.at bereits bestätigt haben (.container-header,
.container-nav, .container-banner, .container-footer,
.mod-menu.mod-list.nav …). Sobald die Seite live ist, gleichen wir
das per DevTools ab und passen Selektoren/Werte gemeinsam an —
genau wie beim letzten Projekt.
============================================================ */
/* --- CSS-Variablen Override --- */
:root {
--cassiopeia-color-primary: #8eb733;
--cassiopeia-color-link: #8eb733;
}
/* Cassiopeia-Standardhintergrund entfernen, Basis: Weiß */
html,
body,
body.site,
.wrapper,
.site-grid,
#wrapper_r {
background-color: #ffffff !important;
background-image: none !important;
background: #ffffff !important;
}
.full-width {
background-image: none !important;
}
/* wrapper-static hat Cassiopeia-Standard max-width:1320px — aufheben
damit Header/Nav/Footer volle Breite bekommen können */
body.wrapper-static {
max-width: none !important;
width: 100% !important;
}
:root {
--cassiopeia-background-image: none;
--cassiopeia-background: #ffffff;
--hcb-bg: none;
}
/* ============================================================
HEADER — enthält lt. Live-DOM ALLES in einem Element:
Header, Logo und Nav sind also KEIN Full-Bleed-Fall wie bottom-a/
footer — selbst sitzt schon direkt unter (x=0) und
ist bereits die vollbreite Klammer um alles. Statt Header und Nav
einzeln auf 100vw zu ziehen (das hat sie auseinandergerissen),
wird jetzt NUR als Flex-Container behandelt: header.png
läuft als CSS-Hintergrundbild (Ebene 1) über dem Grün-Weiß-Verlauf
(Ebene 2) auf demselben Element — dadurch EIN durchgehender
Verlauf ohne Nahtstelle. Logo und Menü liegen als Flex-Kinder
nebeneinander in derselben Zeile.
============================================================ */
header.container-header,
header.container-header.full-width {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
width: 100vw !important;
max-width: 100vw !important;
left: 0 !important;
box-sizing: border-box !important;
border: none !important;
border-bottom: 2px solid #999999 !important;
background:
url('/images/header.png') top center / 100% auto no-repeat,
linear-gradient(to bottom, #eff2e2 0%, #ffffff 100%) !important;
background-origin: border-box !important;
padding: 30px max(24px, calc((100% - 1320px) / 2)) 35px !important;
}
/* Topbar-Modul (header.png als ![]()
) wird von euch deaktiviert —
falls es doch aktiv bleibt, hier zur Sicherheit ausblenden, damit
das Bild nicht doppelt erscheint (der CSS-Hintergrund oben reicht) */
.container-header .container-topbar {
display: none !important;
}
/* LOGO — Cassiopeia-Brand, jetzt größer (vorher 70px) */
.container-header .navbar-brand img,
.container-header img.logo,
.container-header .brand-logo img,
.container-header .site-name img {
height: 95px !important;
width: auto !important;
max-width: 280px !important;
object-fit: contain !important;
}
/* WICHTIG: Cassiopeia gibt .grid-child standardmäßig width:100% mit
(das hat Logo und Nav trotz display:flex auf zwei Zeilen
auseinandergerissen, weil ein Flex-Kind mit width:100% immer die
ganze Zeile für sich beansprucht). Deshalb hier explizit auf
width:auto zurücksetzen — flex allein reichte nicht. */
.container-header .grid-child:not(.container-nav) {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
margin-right: 24px !important;
}
.container-header .navbar-brand,
.container-header .brand-logo {
width: auto !important;
}
/* NAV — kein eigenes Full-Bleed mehr, ist jetzt Flex-Kind im Header
und nimmt den restlichen Platz neben dem Logo ein */
.container-header .container-nav,
.container-header .grid-child.container-nav {
position: static !important;
left: auto !important;
right: auto !important;
flex: 1 1 auto !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
.container-nav::after,
.container-nav::before {
display: none !important;
content: none !important;
}
/* Menüliste: füllt die Nav-Spalte, rechtsbündig neben dem Logo */
.container-nav .mod-menu.mod-list.nav {
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
height: auto !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: flex-end !important;
align-items: stretch !important;
list-style: none !important;
box-sizing: border-box !important;
}
.container-nav .mod-menu.mod-list.nav .nav-item {
display: flex !important;
align-items: stretch !important;
margin: 0 !important;
padding: 0 !important;
}
/* Nav-Links: dunkelgrau, bei Hover/Aktiv Grün mit weißer Schrift,
größere Schrift (vorher 16px) */
.container-nav .mod-menu.mod-list.nav .nav-item a {
color: #4a4a4a !important;
font-size: 19px !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: 0.4px;
padding: 18px 20px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
text-decoration: none;
border: none !important;
line-height: 1 !important;
transition: background 0.2s, color 0.2s;
}
.container-nav .mod-menu.mod-list.nav .nav-item a:hover {
color: #ffffff !important;
background: #8eb733 !important;
}
.container-nav .mod-menu.mod-list.nav .nav-item.active > a {
color: #ffffff !important;
background: #8eb733 !important;
}
/* Dropdown (Untermenü) */
.container-nav .mod-menu.mod-list.nav .mod-menu__sub {
background: #ffffff;
border: 1px solid #e0e0e0;
border-top: 3px solid #8eb733;
min-width: 200px;
box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.container-nav .mod-menu.mod-list.nav .mod-menu__sub .nav-item a {
color: #4a4a4a !important;
font-size: 15px !important;
font-weight: 400 !important;
text-transform: none;
padding: 10px 18px !important;
height: auto !important;
display: block !important;
}
.container-nav .mod-menu.mod-list.nav .mod-menu__sub .nav-item a:hover {
color: #ffffff !important;
background: #8eb733 !important;
}
/* ============================================================
BANNER — Bild direkt unter der Nav (später Bannerslider)
============================================================ */
.container-banner {
overflow: hidden;
}
.container-banner.full-width > .mod-banners.bannergroup > .mod-banners__item img,
.container-banner img {
width: 100%;
max-height: 420px;
object-fit: cover;
object-position: center;
display: block;
}
/* ============================================================
HAUPTINHALT — Linkfarbe/Überschriften in Hauptfarbe
============================================================ */
.container-main {
padding: 30px 0 40px;
background: #ffffff;
}
.container-main .container-fluid,
.site-grid .container-fluid {
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
}
h1.page-header,
.com-content-article h1,
h2, h3, h4 {
color: #333333;
}
a {
color: #8eb733;
transition: color 0.2s;
}
a:hover {
color: #6f9128;
}
/* ============================================================
FOOTER — Farbverlauf #f0f2e3 → Grün (oben nach unten), dunkler
Text, gepunktete Trennlinie oben (gleiche Full-Bleed-Technik wie
Header)
============================================================ */
.grid-child.container-footer,
.container-footer,
.container-footer.full-width {
max-width: none !important;
width: 100% !important;
background: linear-gradient(to bottom, #ffffff 0%, #f0f2e3 100%) !important;
border: none !important;
border-top: 1px dotted #999999 !important;
color: #333333;
padding: 36px 0 24px;
box-sizing: border-box !important;
}
.container-footer .grid-child {
max-width: 1320px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 24px !important;
box-sizing: border-box !important;
}
.container-footer a {
color: #4a4a4a;
text-decoration: none;
transition: color 0.2s;
}
.container-footer a:hover {
color: #1c1c1c !important;
}
.container-footer p {
line-height: 1.7;
font-size: 14px;
color: #333333;
}
/* Sponsoren-/Partnerlogos im Footer nicht zu groß werden lassen */
.container-footer img {
max-height: 60px;
width: auto;
object-fit: contain;
}
/* ============================================================
RESPONSIVE — MOBIL (max 767px)
============================================================ */
@media (max-width: 767.98px) {
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
}
.container-nav .mod-menu.mod-list.nav {
flex-direction: column !important;
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
}
.container-nav .mod-menu.mod-list.nav .nav-item {
width: 100% !important;
}
.container-nav .mod-menu.mod-list.nav .nav-item a {
font-size: 15px !important;
padding: 12px 20px !important;
border-bottom: 1px solid rgba(0,0,0,0.08) !important;
width: 100% !important;
box-sizing: border-box !important;
}
.container-header .container-fluid {
flex-wrap: wrap !important;
}
.container-footer .grid-child {
grid-template-columns: 1fr !important;
}
}
/* Horizontales Scrollen verhindern (100vw zählt die Scrollbar-Breite
mit — bekannter Nebeneffekt bei Full-Bleed-Elementen) */
html,
body {
overflow-x: hidden !important;
}