@charset "UTF-8";

/*

#######\                      ##\                  ##\
##  __##\                     ## |                 ## |
## |  ## | ######\   #######\ ## |  ##\  ######\ ######\
#######  |##  __##\ ##  _____|## | ##  |##  __##\\_##  _|
##  __##< ## /  ## |## /      ######  / ######## | ## |
## |  ## |## |  ## |## |      ##  _##<  ##   ____| ## |##\
## |  ## |\######  |\#######\ ## | \##\ \#######\  \####  |
\__|  \__| \______/  \_______|\__|  \__| \_______|  \____/


Du interessierst dich für Code und was hinter einer Website steckt?
Dann bist du bei uns genau richtig! Melde dich: info@rocket.ch

Rocket - Advertising
Neuweg 10
6003 Luzern
Switzerland

├── child.css                ← Haupt-Stylesheet (wird eingebunden)
├── css/
│   ├── base.css             ← Root-Variablen, Resets
│   ├── layout.css           ← Grid, Container, etc.
│   ├── components.css       ← Buttons, Cards, etc.
│   ├── blocks.css           ← Gutenberg-spezifische Anpassungen
│   ├── utilities.css        ← Utility-Klassen

/* Basis-Dateien laden */
@import url("css/base.css");
@import url("css/layout.css");
@import url("css/components.css");
@import url("css/blocks.css");
@import url("css/utilities.css");


/* ----------------------------------- */
/* Dummy-Regel für Editor-Ladung   */
/* ----------------------------------- */

/*
* WICHTIG: Diese Regel sorgt dafür, dass dieses Stylesheet
* im WordPress Site Editor (Gutenberg) korrekt geladen wird.
*
* Hintergrund: Wenn das Stylesheet nur :root-Variablen enthält,
* kann es vom Editor als „leer“ betrachtet und ignoriert werden.
*
* Durch diesen selektorbezogenen Block-Stil bleibt die Datei aktiv.
*
* NICHT ENTFERNEN!
*/
.wp-block-group {}


/* FIX: Breite direkt im Editor funktioniert nicht */

.wp-block-site-logo img {
    width: 165px;
}

.wp-block-cover .wp-block-cover__inner-container {
    width: 100% !important;
}

.wp-block-cover-image.is-position-bottom-left,
.wp-block-cover.is-position-bottom-left {
    align-items: flex-end !important;
}

/* .hero-cover {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.hero-cover::after {
    content: '';
    position: relative;
    height: 100vh;
    width: 100vw;
} */


/***
Mega Menu
***/

body.mega-menu-active.mega-menu-white-bg {}


body.mega-menu-active.mega-menu-white-bg #site-header {
    background-color: white;
}

body:not(.home) #site-header {
    background-color: black;
}

body:not(.home) #site-header {}

body.mega-menu-active.mega-menu-white-bg nav.has-white-color ul li a {
    color: black;
}

body.mega-menu-active.mega-menu-white-bg .mega-menu-link::after {
    color: black;
}

body:not(.block-editor-iframe__body) .mega-menu-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.mega-menu-header {}

body:not(.block-editor-iframe__body) .mega-menu-content {
    display: none;
    position: absolute;
    width: 100%;
    align-items: space-between;
    justify-content: space-between;
    padding-bottom: 0;
    margin: 0;
    padding-top: 160px !important;
    /* background-color: var(--wp--preset--color--grey-light) !important; */
    /* background-color: var( --theme-color-primary) !important; */
    /* background-color: white !important; */

}

body:not(.block-editor-iframe__body) .mega-menu-panel {
    display: none;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.mega-menu-link {}

.mega-menu-link::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    font-family: "Font Awesome 6 Pro";
    content: '\f078';
    margin-left: 5px;
    background-color: var(--color-border);
    font-size: 12px;
    margin-top: 5px;
}

.wrapper-logo figure:nth-child(2) {
    margin-top: 0;
}

.mega-menu-container h3 {
    /* font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem; */
}

.mega-menu-content .links {
    background-color: var(--theme-color-primary) !important;
}

.mega-menu-content .links a {
    color: white !important;
}


.mega-menu-content .links::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateX(-100%);
    z-index: 10;
    background-color: var(--theme-color-primary) !important;
}

.mega-menu-content .links::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transform: translateX(100%);
    z-index: 10;
    background-color: var(--theme-color-primary) !important;
}

/* TODO: add responsiveness to image size */

.wp-nav-thumbnail {
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    /* border-radius: 4px; */
}

.mega-menu-content .links .icon-verfahren::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    color: white !important;
    font-family: "Font Awesome 6 Pro";
    content: '\f03a';
    margin-left: 5px;
    background-color: var(--color-border);
    font-size: 15px;
    margin-top: 10px;
}

.mega-menu-content .links .icon-dienstleistungen::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    color: white !important;
    font-family: "Font Awesome 6 Pro";
    content: '\f4df';
    margin-left: 5px;
    background-color: var(--color-border);
    font-size: 15px;
    margin-top: 10px;
}

.mega-menu-content .links .icon-grundwerkstoffe::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    color: white !important;
    font-family: "Font Awesome 6 Pro";
    content: '\f1b2';
    margin-left: 5px;
    background-color: var(--color-border);
    font-size: 15px;
    margin-top: 10px;
}

.mega-menu-content .links .icon-vorbehandlungen::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    color: white !important;
    font-family: "Font Awesome 6 Pro";
    content: '\e1c0';
    margin-left: 5px;
    background-color: var(--color-border);
    font-size: 15px;
    margin-top: 10px;
}

.mega-menu-content .links .icon-leistungen::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    color: white !important;
    font-family: "Font Awesome 6 Pro";
    content: '\e1c0';
    margin-left: 5px;
    background-color: var(--color-border);
    font-size: 15px;
    margin-top: 10px;
}

.mega-menu-content .links .icon-downloads::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    color: white !important;
    font-family: "Font Awesome 6 Pro";
    content: '\f019';
    margin-left: 5px;
    background-color: var(--color-border);
    font-size: 15px;
    margin-top: 10px;
}

.mega-menu-content .links .icon-kontakt::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    color: white !important;
    font-family: "Font Awesome 6 Pro";
    content: '\e1c0';
    margin-left: 5px;
    background-color: var(--color-border);
    font-size: 15px;
    margin-top: 10px;
}


.mega-menu-content .wp-block-navigation-item__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.menu-menu-content a {
    background-color: red !important;
}


.mega-menu-content .panel-1 .wp-block-group.navigation {
    margin-bottom: 100px !important;
}


.mega-menu-content .panel-1 .navigation li a .wp-block-navigation-item__label {
    white-space: nowrap;
}

/* .mega-menu-content .panel-1 h3 {
    font-weight: normal !important;
} */

.mega-menu-content .panel-1 .box-beschichtungen,
.mega-menu-content .panel-1 .box-veredelung {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    padding-left: 45px;
}

.mega-menu-content .panel-1 .box-lackierverfahren a h2,
.mega-menu-content .panel-1 .box-beschichtungen a h2,
.mega-menu-content .panel-1 .box-veredelung a h2 {
    font-weight: normal !important;
    color: black;
    padding-top: 9px;
    display: flex;
    white-space: pre;
}

.mega-menu-content .panel-1 .box-lackierverfahren a h2::after,
.mega-menu-content .panel-1 .box-beschichtungen a h2::after,
.mega-menu-content .panel-1 .box-veredelung a h2::after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    font-family: "Font Awesome 6 Pro";
    content: '\f054';
    font-weight: 300;
    margin-left: 5px;
}

.mega-menu-content .panel-1 .box-lackierverfahren {}

.mega-menu-content .panel-1 .box-beschichtungen {}

.mega-menu-content .panel-1 .box-veredelung {}


/* 
.menu-menu-content li a::after {
    position: absolute;
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    color: white !important;
    font-family: "Font Awesome 6 Pro";
    content: '\e1c0';
    margin-left: 5px;
    background-color: var(--color-border);
    font-size: 15px;
    margin-top: 10px;
}

.menu-menu-content li.icon-ausbildung a::after {
    content: '\e533';
}

.menu-menu-content li.icon-leitbild a::after {
    content: '\f080';
}

.menu-menu-content li.icon-zukunft a::after {
    content: '\f336';
}

.menu-menu-content li.icon-neuigkeiten a::after {
    content: '\f1ea';
} */

/* gap: var(--wp--preset--spacing--20); */

.mega-menu-content .panel-2 .navigation ul.wp-block-navigation {
    gap: 0rem 3rem;
    grid-auto-rows: 1fr;
    align-items: start;
}

.mega-menu-content .panel-2 .navigation ul.wp-block-navigation li {
    position: relative;
}

.mega-menu-content .panel-2 .navigation ul.wp-block-navigation li a {
    position: relative;
    border-radius: var(--rounded-lg);
    padding: 4rem 1rem 2rem 1rem;
}

.mega-menu-content .panel-2 .navigation ul.wp-block-navigation li:hover a {
    background-color: var(--theme-color-gray-50);
}


.mega-menu-content li.icon-ausbildung a,
.mega-menu-content li.icon-leitbild a,
.mega-menu-content li.icon-zukunft a,
.mega-menu-content li.icon-neuigkeiten a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mega-menu-content .panel-2 .navigation li a .wp-block-navigation-item__label {
    font-weight: bold;
    font-size: var(--wp--preset--font-size--xl);
}

.mega-menu-content .panel-2 .navigation li a .wp-block-navigation-item__description {
    /* font-size: var(--theme-font-size-md); */
    font-size: 15px !important;
    color: #555;
}

.mega-menu-content li.icon-ausbildung a::before,
.mega-menu-content li.icon-leitbild a::before,
.mega-menu-content li.icon-zukunft a::before,
.mega-menu-content li.icon-neuigkeiten a::before {
    content: '';
    position: absolute;
    display: flex;
    top: 1rem;
    justify-content: center;
    align-items: center;
    border-radius: var(--rounded-md);
    width: 30px;
    height: 30px;
    padding: 5px;
    /* background-color: var(--theme-color-primary) !important; */
    background-color: oklch(98.5% .002 247.839);
    color: #555 !important;
}

.mega-menu-content .panel-2 .navigation ul.wp-block-navigation li:hover,
.mega-menu-content .panel-2 .navigation ul.wp-block-navigation li a:hover {
    color: inherit !important;
}

.mega-menu-content .panel-2 .navigation ul.wp-block-navigation li:hover a::before {
    background-color: white;
    color: var(--theme-color-primary) !important;
}

.mega-menu-content li.icon-ausbildung a::before {
    font-family: "Font Awesome 6 Pro";
    content: '\e533';
}

.mega-menu-content li.icon-leitbild a::before {
    font-family: "Font Awesome 6 Pro";
    content: '\f080';
}

.mega-menu-content li.icon-zukunft a::before {
    font-family: "Font Awesome 6 Pro";
    content: '\f336';
}

.mega-menu-content li.icon-neuigkeiten a::before {
    font-family: "Font Awesome 6 Pro";
    content: '\f1ea';
}

/* 
icon-ausbildung
icon-leitbild
icon-zukunft
icon-neuigkeiten
*/


nav.col2>ul {
    /* flex box, break after two cols */
    display: flex;
    width: 100%;
    gap: 0;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;
    justify-content: space-between;
}

nav.col2>ul>li {
    flex-basis: 48%;
    box-sizing: border-box;
}

nav.col2>ul>li>a {
    padding: .5rem 0;
}

.wp-block-navigation .wp-block-navigation-item__description {
    display: block;
}


.wp-block-navigation.is-horizontal.is-layout-flex.wp-block-navigation-is-layout-flex.cols ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));


}

.wp-block-navigation.is-horizontal.is-layout-flex.wp-block-navigation-is-layout-flex ul li a {
    justify-content: flex-start;
    align-items: flex-start;
}