/* source: local font cache */
/* Local Google Fonts cache: 37e513aea532. */
/* cyrillic-ext */
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/cache/font-4956ec7b1979.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/cache/font-6276a2f5a555.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/cache/font-f626b95c1efa.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/cache/font-891951df5e8b.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cache/font-4956ec7b1979.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cache/font-6276a2f5a555.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cache/font-f626b95c1efa.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cache/font-891951df5e8b.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Exo';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/cache/font-6a1640e973eb.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Exo';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/cache/font-1da10029055b.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Exo';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/cache/font-18bbf39a4e69.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Exo';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cache/font-6a1640e973eb.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Exo';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cache/font-1da10029055b.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Exo';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cache/font-18bbf39a4e69.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/cache/font-c108681cba6a.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/cache/font-ef6446229b59.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/cache/font-42898ad49a6b.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/cache/font-e0c764a8e9e1.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cache/font-c108681cba6a.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cache/font-ef6446229b59.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cache/font-42898ad49a6b.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cache/font-e0c764a8e9e1.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/cache/font-a9d09ab6d1c4.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/cache/font-c86112704544.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/cache/font-3141288b0697.woff2') format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/cache/font-57e110b6d4ff.woff2') format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/cache/font-7db064fa5c5d.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/cache/font-dabae363ac0a.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cache/font-f6be9c668482.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cache/font-0cb2c5c2d575.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cache/font-b3d8897e85a2.woff2') format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cache/font-083fb2d0137a.woff2') format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cache/font-30073583012b.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cache/font-3658a0717e34.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Local Google Fonts cache: 50f706840c53. */
/* fallback */
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 400;
src: url('/fonts/cache/font-ef054651197a.woff2') format('woff2');
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
/* source: /app/components/Button/Button.css */
/* /app/components/Button/Button.css */
.btn-component {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
cursor: pointer;
line-height: 1.5;
width: max-content;
/* Theme-Variablen mit sicheren Komponenten-Fallbacks. */
font-family: var(--btn-font, inherit);
color: var(--btn-text-color, #ffffff);
background-color: var(--btn-bg-color, var(--color-primary));
border-width: var(--btn-border-width, 0px);
border-style: var(--btn-border-style, solid);
border-color: var(--btn-border-color, var(--btn-bg-color, transparent));
}
.btn-component:hover {
text-decoration: none;
}
/* Farbverlauf über der gewählten beziehungsweise vom Theme geerbten Farbe. */
.btn-gradient {
background-image: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%);
}
/* Ecken: Ohne Klasse bleibt die Einstellung vollständig beim Theme. */
.btn-corner-square { border-radius: 0; }
.btn-corner-rounded { border-radius: 6px; }
.btn-corner-pill { border-radius: 50px; }
/* Hover-Effekte */
.btn-hover-opacity:hover {
opacity: 0.85;
}
.btn-hover-lift:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.btn-hover-glow:hover {
box-shadow: 0 0 15px var(--btn-bg-color, var(--color-primary));
}
@keyframes rotateButton {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* source: /app/components/DefaultContainer/DefaultContainer.css */
/* Das Basis-Gerüst für den Container */
.default-container {
position: relative;
display: grid;
gap: 20px; /* Der Standard-Abstand zwischen den Spalten */
width: 100%;
margin: 0 auto; /* Zentriert den Container */
}
/*Abstand für Scroll to id definieren*/
.default-container-wrapper {
/* Wenn der Header z. B. 80px hoch ist, nimm 100px für etwas Luft zum Atmen */
scroll-margin-top: 100px;
}
/* Manueller Sprunganker des DefaultContainers. Absolut positioniert, damit
er weder eine zusätzliche Flex-Spalte noch einen Abstand erzeugt. */
.wb-scroll-anchor {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
scroll-margin-top: 100px;
pointer-events: none;
}
.default-container.layout-boxed {
/* Einheitliches Boxed-Verhalten für top-level und verschachtelte Container */
width: min(calc(100% - (2 * var(--layout-side-padding, 16px))), var(--layout-max-width, 1200px));
margin-left: auto;
margin-right: auto;
}
/* In verschachtelten Spalten soll "boxed" die volle Spaltenbreite nutzen */
.container-col > .default-container.layout-boxed {
width: min(100%, var(--layout-max-width, 1200px));
}
/* Verschachtelte Container nicht per Auto-Margin zentrieren – die horizontale
Position steuert die Spalte über align-items (Inhalt-Ausrichtung X). */
.container-col > .default-container,
.container-col > .default-container.layout-boxed,
.container-col > .default-container.container-depth-1.layout-boxed,
.container-col > .default-container.container-depth-2.layout-boxed,
.container-col > .default-container.container-depth-3.layout-boxed {
margin-left: unset;
margin-right: unset;
}
/* Ebene 2 bekommt wieder den normalen Boxed-Seitenabstand.
Tiefer verschachtelte Container bleiben volle Spaltenbreite, damit kein doppelter Abstand entsteht. */
.default-container.container-depth-1.layout-boxed {
width: min(
var(--layout-max-width, 1200px),
calc(100% - var(--layout-page-gap, 40px))
);
margin-left: auto;
margin-right: auto;
}
.default-container {
position: relative;
z-index: 0;
width: 100%;
display: flex; /* Flexbox aktivieren */
flex-direction: row;
flex-wrap: wrap; /* Wichtig für später auf Mobile! */
}
.wb-scroll-io-anchor {
display: block;
width: 100%;
height: 1px;
margin: 0;
padding: 0;
pointer-events: none;
visibility: hidden;
}
/* --- HORIZONTALE VERTEILUNG --- */
.default-container.align-x-start,
.wb-loop-anim-target.align-x-start { justify-content: flex-start; }
.default-container.align-x-center,
.wb-loop-anim-target.align-x-center { justify-content: center; }
.default-container.align-x-space-between,
.wb-loop-anim-target.align-x-space-between { justify-content: space-between; }
/* --- SPALTEN-VERHALTEN --- */
.default-container.col-width-equal .container-col,
.wb-loop-anim-target.col-width-equal .container-col {
flex: 1;
}
.default-container.col-width-auto .container-col,
.wb-loop-anim-target.col-width-auto .container-col {
flex: 0 1 auto;
}
.default-container.layout-2-col-1-2 > .container-col:nth-child(1),
.wb-loop-anim-target.layout-2-col-1-2 > .container-col:nth-child(1) { flex: 1 1 0; }
.default-container.layout-2-col-1-2 > .container-col:nth-child(2),
.wb-loop-anim-target.layout-2-col-1-2 > .container-col:nth-child(2) { flex: 2 1 0; }
.default-container.layout-2-col-2-1 > .container-col:nth-child(1),
.wb-loop-anim-target.layout-2-col-2-1 > .container-col:nth-child(1) { flex: 2 1 0; }
.default-container.layout-2-col-2-1 > .container-col:nth-child(2),
.wb-loop-anim-target.layout-2-col-2-1 > .container-col:nth-child(2) { flex: 1 1 0; }
.default-container.layout-2-col-1-3 > .container-col:nth-child(1),
.wb-loop-anim-target.layout-2-col-1-3 > .container-col:nth-child(1) { flex: 1 1 0; }
.default-container.layout-2-col-1-3 > .container-col:nth-child(2),
.wb-loop-anim-target.layout-2-col-1-3 > .container-col:nth-child(2) { flex: 3 1 0; }
.default-container.layout-2-col-3-1 > .container-col:nth-child(1),
.wb-loop-anim-target.layout-2-col-3-1 > .container-col:nth-child(1) { flex: 3 1 0; }
.default-container.layout-2-col-3-1 > .container-col:nth-child(2),
.wb-loop-anim-target.layout-2-col-3-1 > .container-col:nth-child(2) { flex: 1 1 0; }
.default-container.layout-3-col-2-1-1 > .container-col:nth-child(1),
.wb-loop-anim-target.layout-3-col-2-1-1 > .container-col:nth-child(1) { flex: 2 1 0; }
.default-container.layout-3-col-2-1-1 > .container-col:nth-child(2),
.wb-loop-anim-target.layout-3-col-2-1-1 > .container-col:nth-child(2) { flex: 1 1 0; }
.default-container.layout-3-col-2-1-1 > .container-col:nth-child(3),
.wb-loop-anim-target.layout-3-col-2-1-1 > .container-col:nth-child(3) { flex: 1 1 0; }
.default-container.layout-3-col-1-2-1 > .container-col:nth-child(1),
.wb-loop-anim-target.layout-3-col-1-2-1 > .container-col:nth-child(1) { flex: 1 1 0; }
.default-container.layout-3-col-1-2-1 > .container-col:nth-child(2),
.wb-loop-anim-target.layout-3-col-1-2-1 > .container-col:nth-child(2) { flex: 2 1 0; }
.default-container.layout-3-col-1-2-1 > .container-col:nth-child(3),
.wb-loop-anim-target.layout-3-col-1-2-1 > .container-col:nth-child(3) { flex: 1 1 0; }
.default-container.layout-3-col-1-1-2 > .container-col:nth-child(1),
.wb-loop-anim-target.layout-3-col-1-1-2 > .container-col:nth-child(1) { flex: 1 1 0; }
.default-container.layout-3-col-1-1-2 > .container-col:nth-child(2),
.wb-loop-anim-target.layout-3-col-1-1-2 > .container-col:nth-child(2) { flex: 1 1 0; }
.default-container.layout-3-col-1-1-2 > .container-col:nth-child(3),
.wb-loop-anim-target.layout-3-col-1-1-2 > .container-col:nth-child(3) { flex: 2 1 0; }
.wb-loop-anim-target {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
will-change: transform;
}
.wb-loop-anim-target.wb-loop-anim--rotate {
transform-origin: center center;
}
.container-content-align-x-center {
align-items: center;
text-align: center;
}
.container-content-align-x-left {
align-items: flex-start;
text-align: left;
}
.container-content-align-x-right {
align-items: flex-end;
text-align: right;
}
.container-content-align-y-top {
justify-content: flex-start;
}
.container-content-align-y-center {
justify-content: center;
}
.container-content-align-y-bottom {
justify-content: flex-end;
}
/* Die innere Spalte (kann später z.B. für Padding genutzt werden) */
.container-col {
display: flex;
flex-direction: column;
column-gap: 25px;
row-gap: 15px;
/* Wichtig als Bezugsrahmen für absolut positionierte Geschwister-Instanzen
innerhalb derselben Spalte, z.B. AnimatedBgContainer (siehe dessen CSS). */
position: relative;
}
/* ACHTUNG: ".container-col" ist KEIN nur für DefaultContainer reservierter
Klassenname - AnimatedBgContainer verwendet dieselbe Klasse. Deshalb nur
Direktkinder von .default-container (siehe DefaultContainer_error.css). */
/* Optionaler Inhaltsfluss innerhalb eines Slots. Die Komponenten behalten
ihre eigene Breite und wechseln erst dann in die naechste Zeile, wenn die
verfuegbare Slot-Breite nicht mehr ausreicht. */
.container-col.container-content-flow-row-wrap {
flex-direction: row;
flex-wrap: wrap;
}
.container-col.container-content-flow-row-wrap > * {
max-width: 100%;
}
/* Bei horizontalem Inhaltsfluss liegen X und Y auf den jeweils anderen
Flexbox-Achsen als im bisherigen Spaltenmodus. */
.container-col.container-content-flow-row-wrap.container-content-align-x-left {
justify-content: flex-start;
}
.container-col.container-content-flow-row-wrap.container-content-align-x-center {
justify-content: center;
}
.container-col.container-content-flow-row-wrap.container-content-align-x-right {
justify-content: flex-end;
}
.container-col.container-content-flow-row-wrap.container-content-align-y-top {
align-items: flex-start;
align-content: flex-start;
}
.container-col.container-content-flow-row-wrap.container-content-align-y-center {
align-items: center;
align-content: center;
}
.container-col.container-content-flow-row-wrap.container-content-align-y-bottom {
align-items: flex-end;
align-content: flex-end;
}
/* Der Hinzufuegen-Platzhalter soll im leeren Slot auch im Zeilenmodus die
komplette nutzbare Breite fuer den PageBuilder belegen. */
.container-col.container-content-flow-row-wrap > .wb-empty-slot {
flex-basis: 100%;
width: 100%;
}
.default-container > .container-col {
/* Ohne min-height: 0 nutzt die Spalte als Flex-Item min-height: auto und
lässt sich nicht unter die intrinsische Inhaltsgröße schrumpfen. Bei
Hochformat-Bildern in gestreckten Zeilen wird die Zeilenhöhe zu groß;
beim gestapelten Tablet/Mobile-Layout kann die umgekehrte Kombination
aus flex-basis: 0 (Spalten-Verhältnis-Regeln) dagegen zu kollabierten
Spaltenhöhen führen – der Inhalt ragt heraus und wirkt „verdeckt". */
min-height: 0;
min-width: 0;
}
/* --- DIE LAYOUT VARIANTEN --- */
.layout-1-col {
grid-template-columns: 1fr;
}
.layout-2-col-equal {
grid-template-columns: 1fr 1fr;
}
.layout-2-col-1-2 {
/* Linke Spalte schmal (1/3), Rechte Spalte breit (2/3) */
grid-template-columns: 1fr 2fr;
}
.layout-2-col-2-1 {
/* Linke Spalte breit (2/3), Rechte Spalte schmal (1/3) */
grid-template-columns: 2fr 1fr;
}
.layout-3-col {
grid-template-columns: repeat(3, 1fr);
}
.layout-4-col {
grid-template-columns: repeat(4, 1fr);
}
/* --- RESPONSIVE DESIGN (Für Smartphones) --- */
/* Auf kleinen Bildschirmen brechen wir alle Spalten untereinander um.
Hinweis: .default-container ist ein Flexbox-Container (siehe display: flex weiter oben),
daher muss hier flex-direction/flex-basis gesetzt werden statt grid-template-columns. */
/* --- SCROLL-ANIMATION (Intersection Observer + CSS) --- */
.default-container.wb-scroll-anim {
transition:
opacity var(--wb-scroll-duration, 600ms) ease,
transform var(--wb-scroll-duration, 600ms) ease;
}
.default-container.wb-scroll-anim.wb-scroll-anim--scrub {
transition: none !important;
}
.default-container.wb-scroll-anim.wb-scroll-anim--scrub.wb-scroll-anim--visibility-fade,
.default-container.wb-scroll-anim.wb-scroll-anim--scrub.wb-scroll-anim--visibility-both {
opacity: 0;
}
.default-container.wb-scroll-anim.wb-scroll-anim--from-up {
transform: translateY(var(--wb-scroll-distance, 40px));
}
.default-container.wb-scroll-anim.wb-scroll-anim--from-down {
transform: translateY(calc(-1 * var(--wb-scroll-distance, 40px)));
}
.default-container.wb-scroll-anim.wb-scroll-anim--from-up.wb-scroll-anim--invert-y:not(.wb-scroll-anim--in) {
transform: translateY(calc(-1 * var(--wb-scroll-distance, 40px)));
}
.default-container.wb-scroll-anim.wb-scroll-anim--from-down.wb-scroll-anim--invert-y:not(.wb-scroll-anim--in) {
transform: translateY(var(--wb-scroll-distance, 40px));
}
.default-container.wb-scroll-anim.wb-scroll-anim--from-left {
transform: translateX(var(--wb-scroll-distance, 40px));
}
.default-container.wb-scroll-anim.wb-scroll-anim--from-right {
transform: translateX(calc(-1 * var(--wb-scroll-distance, 40px)));
}
.default-container.wb-scroll-anim.wb-scroll-anim--visibility-fade,
.default-container.wb-scroll-anim.wb-scroll-anim--visibility-both {
opacity: 0;
}
.default-container.wb-scroll-anim.wb-scroll-anim--in {
transform: none;
}
.default-container.wb-scroll-anim.wb-scroll-anim--in.wb-scroll-anim--visibility-fade,
.default-container.wb-scroll-anim.wb-scroll-anim--in.wb-scroll-anim--visibility-both {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.default-container.wb-scroll-anim {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.default-container.wb-scroll-anim.wb-scroll-anim--scrub {
opacity: 1 !important;
}
.wb-loop-anim-target {
transform: none !important;
}
}
/* source: /app/components/HeaderBlock/HeaderBlock.css */
/* /app/components/HeaderBlock/HeaderBlock.css */
/* --- DER WRAPPER (Layout) --- */
.header-block-wrapper {
display: block;
width: 100%;
}
/* Steuerung der Ausrichtung (wie beim Button) */
.header-block-wrapper.align-left { --wb-align-desktop: left; }
.header-block-wrapper.align-center { --wb-align-desktop: center; }
.header-block-wrapper.align-right { --wb-align-desktop: right; }
/* --- DAS ELEMENT (Typografie) --- */
.header-element {
/* Setzt den Margin des Tags selbst zurück, da der Wrapper den Abstand regelt */
margin: 0;
word-break: break-word; /* Verhindert, dass ultralange Wörter auf Handys das Layout sprengen */
}
/* Optional: Optische Überschreibungen */
/* Wenn der Kunde sagt: "Es ist zwar ein SEO-H2, soll aber riesig wie ein H1 aussehen!" */
.header-element.look-h1 { --wb-font-size-desktop: 2.5rem; }
.header-element.look-h2 { --wb-font-size-desktop: 2rem; }
/* ... */
/* source: /app/components/IframeBlock/IframeBlock.css */
/* /app/components/IframeBlock/IframeBlock.css */
.iframe-block-wrapper {
display: block;
width: 100%;
position: relative;
overflow: hidden;
background-color: var(--color-bg-alt, #e9ecef);
border-radius: 8px; /* Lässt eingebettete Inhalte moderner wirken (optional) */
}
/* --- DAS IFRAME SELBST --- */
.iframe-element {
display: block;
width: 100%;
height: 100%;
border: none; /* Entfernt den hässlichen Standard-Rahmen älterer Browser */
}
/* --- RESPONSIVE SEITENVERHÄLTNISSE (Modernes CSS!) --- */
/* aspect-ratio sorgt dafür, dass die Box immer proportional wächst/schrumpft */
.iframe-ratio-16-9 {
aspect-ratio: 16 / 9; /* Perfekt für YouTube / Vimeo */
}
.iframe-ratio-4-3 {
aspect-ratio: 4 / 3; /* Ältere Formate */
}
.iframe-ratio-1-1 {
aspect-ratio: 1 / 1; /* Perfekt für Instagram-Posts oder quadratische Karten */
}
.iframe-ratio-9-16 {
aspect-ratio: 9 / 16; /* Perfekt für YouTube Shorts oder TikToks */
}
/* --- DER PLATZHALTER --- */
.iframe-placeholder {
width: 100%;
min-height: 250px; /* Falls aspect-ratio nicht greift */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted, #6c757d);
border: 2px dashed #ccc;
border-radius: 8px;
font-family: inherit;
text-align: center;
padding: 20px;
}
/* Google Maps wird erst nach einer ausdruecklichen Zustimmung geladen. */
.iframe-block-google-maps {
display: flex;
flex-direction: column;
/* Nutzt eine explizite Hoehe des umgebenden Containers. Ist dort keine
feste Hoehe vorhanden, bleibt das gewaehlte aspect-ratio wirksam. */
height: 100%;
}
.container-col > .iframe-block-google-maps.is-google-maps-loaded {
flex: 1 1 auto;
min-height: 0;
}
.iframe-google-maps-stage {
position: relative;
display: flex;
flex: 1 1 auto;
width: 100%;
min-height: 0;
overflow: hidden;
}
.iframe-google-maps-stage > .iframe-element {
flex: 1 1 auto;
}
.iframe-consent {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: clamp(18px, 4vw, 38px);
overflow-y: auto;
color: var(--wb-iframe-consent-text, var(--color-text, #212529));
background-color: var(--wb-iframe-consent-background, var(--color-bg-alt, #f8f9fa));
background-image:
linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.7)),
url('/media/global/5d/5df980ede8dda38cc202d4d80e8db23a207dcaefdcd4558f27f00009345cca10-large.webp');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
.iframe-consent[hidden],
.iframe-google-maps-status[hidden] {
display: none;
}
.iframe-consent-content {
width: min(100%, 680px);
margin: auto;
}
.iframe-consent-heading {
margin-bottom: 10px;
color: var(--wb-iframe-consent-heading-color, var(--color-text, #212529));
font-size: clamp(1.05rem, 2.5vw, 1.35rem);
font-weight: 700;
}
.iframe-consent p {
margin: 0 0 12px;
font-size: 0.92rem;
line-height: 1.5;
}
.iframe-consent-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 16px;
}
.iframe-consent-button {
min-height: 40px;
padding: 8px 16px;
color: var(--wb-iframe-consent-button-text, #ffffff);
font: inherit;
font-weight: 600;
cursor: pointer;
background: var(--wb-iframe-consent-button-background, var(--color-primary, #0055ff));
border: 1px solid var(--wb-iframe-consent-button-border, var(--color-primary, #0055ff));
border-radius: var(--wb-iframe-consent-button-radius, 6px);
}
.iframe-consent-button-secondary {
color: var(--wb-iframe-consent-secondary-text, var(--color-text, #212529));
background: var(--wb-iframe-consent-secondary-background, transparent);
border-color: var(--wb-iframe-consent-secondary-border, currentColor);
}
.iframe-consent-button:hover,
.iframe-consent-button:focus-visible {
filter: brightness(0.92);
}
.iframe-consent-privacy-link {
display: inline-block;
margin-top: 14px;
color: var(--wb-iframe-consent-link-color, var(--color-primary, #0055ff));
font-size: 0.86rem;
}
.iframe-consent-compact p {
margin-bottom: 14px;
}
.iframe-google-maps-status {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
gap: 10px;
padding: 7px 12px;
color: var(--wb-iframe-consent-status-text, var(--color-text-muted, #6c757d));
font-size: 0.78rem;
line-height: 1.35;
background: var(--wb-iframe-consent-status-background, var(--color-bg-alt, #f8f9fa));
border-top: 1px solid var(--wb-iframe-consent-status-border, #dee2e6);
}
.iframe-google-maps-status button {
padding: 0;
color: inherit;
font: inherit;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
background: none;
border: 0;
}
@media (max-width: 576px) {
.iframe-google-maps-status {
align-items: center;
flex-direction: column;
gap: 3px;
text-align: center;
}
}
@media (max-width: 768px) {
/* Die feste Kartenhoehe darf den noch nicht bestaetigten Hinweis nicht abschneiden. */
.iframe-block-google-maps:not(.is-google-maps-loaded) {
height: auto !important;
min-height: 0;
aspect-ratio: auto;
}
.iframe-block-google-maps:not(.is-google-maps-loaded) .iframe-google-maps-stage,
.iframe-block-google-maps:not(.is-google-maps-loaded) .iframe-consent {
height: auto;
overflow: visible;
}
.iframe-block-google-maps:not(.is-google-maps-loaded) .iframe-google-maps-stage {
flex: 0 0 auto;
}
.iframe-block-google-maps:not(.is-google-maps-loaded) .iframe-consent-actions {
align-items: stretch;
flex-direction: column;
}
}
/* source: /app/components/Image/Image.css */
/* /app/components/Image/Image.css */
.image-component-wrapper {
/* Standardmäßig passt sich der Wrapper dem Inhalt an,
außer es wird eine feste Höhe über den $styleString injiziert */
display: block;
width: 100%;
position: relative;
overflow: hidden; /* Verhindert, dass Ecken herausragen, falls border-radius genutzt wird */
/* Ist dieser Wrapper selbst ein Flex-Item (z.B. per "flex: 1" via styles
einer Spalte einer anderen angepasst, statt eine feste aspect-ratio zu
nutzen - siehe DefaultContainer.css), verhindert das browserseitige
Standard-"min-height: auto" sonst, dass er unter die intrinsische
Höhe des eingebetteten ![]()
schrumpft. Bei Hochformat-Bildern (großes
natürliches Höhe/Breite-Verhältnis) fällt das besonders stark auf. */
min-height: 0;
min-width: 0;
}
.image-element {
display: block;
width: 100%;
height: 100%; /* Wichtig, falls der Wrapper eine feste Höhe hat! */
}
/* --- DIE FIT-MODIFIER --- */
/* FÜLLEN: Das Bild füllt den ganzen Platz aus und wird notfalls beschnitten (wie ein Hintergrundbild) */
.img-fit-cover {
object-fit: cover;
}
/* EINPASSEN: Das Bild wird komplett angezeigt, auch wenn dadurch links/rechts oder oben/unten Leerräume entstehen */
.img-fit-contain {
object-fit: contain;
}
/* --- RAHMENFORM (Ecken-Presets) --- */
/* Ergänzt die manuell über "styles" setzbare border-radius um feste Presets.
Da ein per Styles gesetzter Radius als Inline-Style ausgegeben wird und
Inline-Styles CSS-Klassen immer schlagen, brauchen die Presets hier
!important - sonst hätte eine früher gesetzte manuelle border-radius
trotz aktiver Auswahl von Pill/Circle/Ellipse weiterhin Vorrang. */
/* PILL: Stark abgerundete Enden, ideal für schmale/breite Bildboxen (z.B. Badges, Tags) */
.img-corner-pill {
border-radius: 999px !important;
}
/* CIRCLE: Erzwingt ein 1:1-Seitenverhältnis, das Bild wird per object-fit: cover zum Kreis zugeschnitten */
.img-corner-circle {
aspect-ratio: 1 / 1;
border-radius: 50% !important;
/* In Flex-Spalten darf min-height: 0 am Wrapper sonst den Kreis unter die
aspect-ratio-Höhe schrumpfen; overflow:hidden schneidet dann unten ab. */
flex-shrink: 0;
min-height: auto;
}
/* ELLIPSE: Behält die vorhandene Breite/Höhe der Box bei und rundet komplett ab -> ovale Form */
.img-corner-ellipse {
border-radius: 50% !important;
}
/* --- DER PLATZHALTER (Für den Editor) --- */
.image-placeholder {
width: 100%;
min-height: 250px;
background-color: var(--color-bg-alt, #e9ecef);
color: var(--color-text-muted, #6c757d);
display: flex;
align-items: center;
justify-content: center;
font-family: inherit;
border: 2px dashed #ccc;
border-radius: 4px;
}
/* --- DIE NEUEN POSITIONS-MODIFIER --- */
/* --- VERTIKALE AUSRICHTUNG (Y-Achse) --- */
.img-pos-center-top { object-position: var(--custom-img-pos-x, center) var(--custom-img-pos-y, top); }
.img-pos-center-center { object-position: var(--custom-img-pos-x, center) var(--custom-img-pos-y, center); }
.img-pos-center-bottom { object-position: var(--custom-img-pos-x, center) var(--custom-img-pos-y, bottom); }
/* --- HORIZONTALE AUSRICHTUNG (X-Achse) --- */
.img-pos-left-center { object-position: var(--custom-img-pos-x, left) var(--custom-img-pos-y, center); }
.img-pos-right-center { object-position: var(--custom-img-pos-x, right) var(--custom-img-pos-y, center); }
/* --- KOMBINIERTE ECKEN --- */
.img-pos-left-top { object-position: var(--custom-img-pos-x, left) var(--custom-img-pos-y, top); }
.img-pos-right-bottom { object-position: var(--custom-img-pos-x, right) var(--custom-img-pos-y, bottom); }
.img-pos-left-bottom { object-position: var(--custom-img-pos-x, left) var(--custom-img-pos-y, bottom); }
.img-pos-right-top { object-position: var(--custom-img-pos-x, right) var(--custom-img-pos-y, top); }
/* --- RESPONSIVE FALLBACK für "position: absolute" via styles ---
Der "Höhe an Nachbar-Spalte anpassen"-Trick (styles: {"position":"absolute",
"inset":"0"}, siehe DefaultContainer-Instanzen mit mehreren Bildspalten)
funktioniert nur, SOLANGE die Spalten nebeneinander stehen - dann "leiht"
sich die Spalte über align-items:stretch die Höhe der Nachbar-Spalte.
Sobald DefaultContainer.css bei max-width:768px auf gestapelte Spalten
umschaltet, gibt es diese Nachbar-Höhe nicht mehr: Der (absolut positionierte,
damit aus dem Fluss genommene) Bild-Wrapper trägt dann nichts mehr zur
Spaltenhöhe bei, die Spalte kollabiert auf 0px.
WICHTIG: Der Fallback-Wert darf NICHT direkt als "aspect-ratio" mit in
dieselben "styles" geschrieben werden! Bei absolut positionierten Elementen
mit inset:0 auf allen 4 Seiten überschreibt ein gesetztes aspect-ratio das
"auf allen Seiten strecken"-Verhalten wieder und erzwingt stattdessen exakt
dieses Verhältnis als Größe - das würde den Desktop-Trick sofort wieder
kaputt machen. Stattdessen wird der Fallback nur als (auf Desktop völlig
wirkungsloser) CSS-Variablen-Wert mitgegeben, z.B.:
{"--fallback-aspect-ratio": "1 / 1", "position": "absolute", "inset": "0"}
und erst HIER, ausschließlich innerhalb dieser Media Query, tatsächlich als
aspect-ratio "scharf geschaltet". !important ist nötig, weil position/inset
als Inline-Style (höhere Prio als jede Klasse) ausgegeben werden.
WICHTIG: Der Attribut-Selektor "[style*=\"position: absolute\"]" ist bewusst
kein bloßes ".image-component-wrapper", sondern trifft NUR Wrapper, die
diesen Trick per "styles" tatsächlich aktiviert haben! Ohne diese
Einschränkung hätte "aspect-ratio: ... !important" hier JEDES Bild auf
Mobile getroffen - auch ganz normale Rahmenform-Presets wie "Circle"
(.img-corner-circle, erzwingt aspect-ratio:1/1 OHNE !important). Deren
Verhältnis wäre dann auf Mobile durch den (nicht zutreffenden) Fallback
"auto" überschrieben worden - aus dem Kreis wäre eine verzerrte Ellipse
geworden, weil border-radius:50% dann auf eine nicht-quadratische Box
trifft. */
@media (max-width: 768px) {
.image-component-wrapper[style*="position: absolute"] {
position: static !important;
inset: auto !important;
aspect-ratio: var(--fallback-aspect-ratio, auto) !important;
}
}
/* --- Image Animation --- */
/* Der Grundzustand des Bildes */
.image-element-zoom-in {
/* Bestimmt, WIE weich die Animation abläuft:
- transform: gibt an, dass wir nur die Skalierung animieren wollen (besser für die Performance)
- 0.3s: Dauer der Animation (300 Millisekunden)
- ease: Sorgt für ein sanftes Anfahren und Abbremsen der Bewegung */
transition: transform 0.5s ease;
}
/* Der Zustand, wenn die Maus über dem Bild schwebt */
.image-element-zoom-in:hover {
/* transform: scale(1.05) vergrößert das Bild auf 105% der Originalgröße.
Ein Wert von 1.1 wäre 110%, was oft schon etwas zu aggressiv wirkt. */
transform: scale(1.05);
}
/* source: /app/components/Line/Line.css */
/* /app/components/Line/Line.css */
.line-component-wrapper {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: var(--line-spacing-y, 40px) 0;
}
.line-component-wrapper.align-left { justify-content: flex-start; }
.line-component-wrapper.align-center { justify-content: center; }
.line-component-wrapper.align-right { justify-content: flex-end; }
.line-component-wrapper.overflow-hidden {
overflow: hidden;
}
.line-element {
width: var(--line-width, 100%);
margin: 0;
/* Standard-Browser-Styles vom
killen! */
border: none;
background: transparent;
/* Unsere Custom-Variablen mit sicheren Fallbacks anwenden */
border-top-width: var(--line-thickness, 2px);
border-top-color: var(--line-color, var(--color-text-muted));
/* Die Drehung anwenden */
transform: rotate(var(--line-angle, 0deg));
transform-origin: center center;
}
/* --- DIE TYPEN-MODIFIER --- */
.line-style-solid { border-top-style: solid; }
.line-style-dashed { border-top-style: dashed; }
.line-style-dotted { border-top-style: dotted; }
/* source: /app/components/NavMenu/NavMenu.css */
.nav-menu-wrapper {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.nav-menu-inner {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.nav-list,
.nav-submenu {
list-style: none;
margin: 0;
padding: 0;
}
.nav-list {
display: flex;
align-items: center;
gap: var(--nav-menu-gap, 30px);
}
.nav-menu-layout-horizontal .nav-list {
flex-direction: row;
}
.nav-menu-layout-vertical .nav-menu-inner {
flex-direction: column;
align-items: flex-start;
}
.nav-menu-layout-vertical .nav-list {
align-items: flex-start;
flex-direction: column;
}
.nav-menu-align-start .nav-menu-inner {
justify-content: flex-start;
}
.nav-menu-align-center .nav-menu-inner {
justify-content: center;
}
.nav-menu-align-end .nav-menu-inner {
justify-content: flex-end;
}
.nav-menu-align-space-between .nav-menu-inner {
justify-content: space-between;
}
.nav-menu-align-space-between .nav-list {
width: 100%;
justify-content: space-between;
}
.nav-menu-layout-vertical.nav-menu-align-center .nav-menu-inner,
.nav-menu-layout-vertical.nav-menu-align-center .nav-list {
align-items: center;
}
.nav-menu-layout-vertical.nav-menu-align-end .nav-menu-inner,
.nav-menu-layout-vertical.nav-menu-align-end .nav-list {
align-items: flex-end;
}
.nav-menu-layout-vertical.nav-menu-align-space-between .nav-list {
width: auto;
justify-content: flex-start;
}
.nav-item {
position: relative;
}
.nav-link {
color: var(--color-text);
font-weight: 500;
text-decoration: none;
}
.nav-submenu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
min-width: 180px;
padding: 10px 0;
background-color: var(--color-secondary);
border-radius: 6px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}
.nav-submenu .nav-link {
display: block;
padding: 8px 14px;
white-space: nowrap;
}
.nav-item--has-children:hover > .nav-submenu,
.nav-item--has-children:focus-within > .nav-submenu {
display: block;
}
.nav-menu-layout-vertical .nav-submenu {
top: 0;
left: 100%;
}
.mobile-toggle-btn {
display: none;
flex-direction: column;
gap: 6px;
margin-inline: var(--wb-nav-menu-mobile-toggle-margin-inline, auto 0);
cursor: pointer;
padding: 0;
background: transparent;
border: 0;
}
.hamburger-line {
width: 30px;
height: 3px;
background-color: var(--wb-nav-menu-mobile-toggle-color, #212529);
border-radius: 2px;
transition: 0.3s ease;
}
@media (max-width: 576px) {
.nav-menu-breakpoint-sm.nav-menu-mobile-collapse .mobile-toggle-btn {
display: flex;
}
.nav-menu-breakpoint-sm.nav-menu-mobile-collapse .nav-list {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-inline: var(--wb-nav-menu-mobile-panel-margin-inline, auto 0);
z-index: 999;
width: var(--wb-nav-menu-mobile-width, 250px);
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: var(--wb-nav-menu-mobile-padding, 18px);
background-color: var(--wb-nav-menu-mobile-background, #ffffff);
border-radius: var(--wb-nav-menu-mobile-border-radius, 8px);
box-shadow: var(--wb-nav-menu-mobile-box-shadow, 0 10px 20px rgba(0, 0, 0, 0.1));
}
.nav-menu-breakpoint-sm.nav-menu-mobile-collapse .nav-link {
color: var(--wb-nav-menu-mobile-link-color, #212529);
}
.nav-menu-breakpoint-sm.nav-menu-mobile-collapse .nav-link:hover,
.nav-menu-breakpoint-sm.nav-menu-mobile-collapse .nav-link:focus-visible {
color: var(--wb-nav-menu-mobile-link-hover-color, #0055ff);
}
.nav-menu-breakpoint-sm.nav-menu-mobile-collapse.is-open .nav-list {
display: flex;
}
.nav-menu-breakpoint-sm.nav-menu-mobile-collapse .nav-submenu {
position: static;
display: block;
min-width: 0;
padding: 8px 0 0 12px;
background: transparent;
box-shadow: none;
}
}
@media (max-width: 768px) {
.nav-menu-breakpoint-md.nav-menu-mobile-collapse .mobile-toggle-btn {
display: flex;
}
.nav-menu-breakpoint-md.nav-menu-mobile-collapse .nav-list {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-inline: var(--wb-nav-menu-mobile-panel-margin-inline, auto 0);
z-index: 999;
width: var(--wb-nav-menu-mobile-width, 250px);
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: var(--wb-nav-menu-mobile-padding, 18px);
background-color: var(--wb-nav-menu-mobile-background, #ffffff);
border-radius: var(--wb-nav-menu-mobile-border-radius, 8px);
box-shadow: var(--wb-nav-menu-mobile-box-shadow, 0 10px 20px rgba(0, 0, 0, 0.1));
}
.nav-menu-breakpoint-md.nav-menu-mobile-collapse .nav-link {
color: var(--wb-nav-menu-mobile-link-color, #212529);
}
.nav-menu-breakpoint-md.nav-menu-mobile-collapse .nav-link:hover,
.nav-menu-breakpoint-md.nav-menu-mobile-collapse .nav-link:focus-visible {
color: var(--wb-nav-menu-mobile-link-hover-color, #0055ff);
}
.nav-menu-breakpoint-md.nav-menu-mobile-collapse.is-open .nav-list {
display: flex;
}
.nav-menu-breakpoint-md.nav-menu-mobile-collapse .nav-submenu {
position: static;
display: block;
min-width: 0;
padding: 8px 0 0 12px;
background: transparent;
box-shadow: none;
}
}
@media (max-width: 992px) {
.nav-menu-breakpoint-lg.nav-menu-mobile-collapse .mobile-toggle-btn {
display: flex;
}
.nav-menu-breakpoint-lg.nav-menu-mobile-collapse .nav-list {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-inline: var(--wb-nav-menu-mobile-panel-margin-inline, auto 0);
z-index: 999;
width: var(--wb-nav-menu-mobile-width, 250px);
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: var(--wb-nav-menu-mobile-padding, 18px);
background-color: var(--wb-nav-menu-mobile-background, #ffffff);
border-radius: var(--wb-nav-menu-mobile-border-radius, 8px);
box-shadow: var(--wb-nav-menu-mobile-box-shadow, 0 10px 20px rgba(0, 0, 0, 0.1));
}
.nav-menu-breakpoint-lg.nav-menu-mobile-collapse .nav-link {
color: var(--wb-nav-menu-mobile-link-color, #212529);
}
.nav-menu-breakpoint-lg.nav-menu-mobile-collapse .nav-link:hover,
.nav-menu-breakpoint-lg.nav-menu-mobile-collapse .nav-link:focus-visible {
color: var(--wb-nav-menu-mobile-link-hover-color, #0055ff);
}
.nav-menu-breakpoint-lg.nav-menu-mobile-collapse.is-open .nav-list {
display: flex;
}
.nav-menu-breakpoint-lg.nav-menu-mobile-collapse .nav-submenu {
position: static;
display: block;
min-width: 0;
padding: 8px 0 0 12px;
background: transparent;
box-shadow: none;
}
}
/* Full-Ansicht und transparente Panel-Hintergründe */
.mobile-nav-close-btn {
position: fixed;
top: max(16px, env(safe-area-inset-top));
right: max(16px, env(safe-area-inset-right));
z-index: 10001;
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
color: var(--wb-nav-menu-mobile-toggle-color, #212529);
font: inherit;
font-size: 38px;
font-weight: 300;
line-height: 1;
cursor: pointer;
background: transparent;
border: 0;
}
body.wb-nav-menu-full-open {
overflow: hidden;
}
@media (max-width: 576px) {
.nav-menu-breakpoint-sm:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list {
background-color: transparent;
isolation: isolate;
}
.nav-menu-breakpoint-sm:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list::before {
position: absolute;
inset: 0;
z-index: -1;
content: "";
pointer-events: none;
background-color: var(--wb-nav-menu-mobile-background, #ffffff);
border-radius: inherit;
opacity: var(--wb-nav-menu-mobile-background-opacity, 1);
}
.nav-menu-breakpoint-sm.nav-menu-mobile-full .mobile-toggle-btn {
display: flex;
}
.nav-menu-breakpoint-sm.nav-menu-mobile-full .nav-list {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
box-sizing: border-box;
width: 100vw;
max-width: none;
height: 100vh;
height: 100dvh;
margin: 0;
overflow-y: auto;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: max(var(--wb-nav-menu-mobile-padding, 18px), 72px) var(--wb-nav-menu-mobile-padding, 18px) var(--wb-nav-menu-mobile-padding, 18px);
border-radius: 0;
box-shadow: none;
}
.nav-menu-breakpoint-sm.nav-menu-mobile-full.is-open .nav-list {
display: flex;
}
.nav-menu-breakpoint-sm.nav-menu-mobile-full.is-open .mobile-nav-close-btn {
display: flex;
}
.nav-menu-breakpoint-sm.nav-menu-mobile-full .nav-link {
color: var(--wb-nav-menu-mobile-link-color, #212529);
}
.nav-menu-breakpoint-sm.nav-menu-mobile-full .nav-link:hover,
.nav-menu-breakpoint-sm.nav-menu-mobile-full .nav-link:focus-visible {
color: var(--wb-nav-menu-mobile-link-hover-color, #0055ff);
}
.nav-menu-breakpoint-sm.nav-menu-mobile-full .nav-submenu {
position: static;
display: block;
min-width: 0;
padding: 8px 0 0 12px;
background: transparent;
box-shadow: none;
}
}
@media (max-width: 768px) {
.nav-menu-breakpoint-md:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list {
background-color: transparent;
isolation: isolate;
}
.nav-menu-breakpoint-md:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list::before {
position: absolute;
inset: 0;
z-index: -1;
content: "";
pointer-events: none;
background-color: var(--wb-nav-menu-mobile-background, #ffffff);
border-radius: inherit;
opacity: var(--wb-nav-menu-mobile-background-opacity, 1);
}
.nav-menu-breakpoint-md.nav-menu-mobile-full .mobile-toggle-btn {
display: flex;
}
.nav-menu-breakpoint-md.nav-menu-mobile-full .nav-list {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
box-sizing: border-box;
width: 100vw;
max-width: none;
height: 100vh;
height: 100dvh;
margin: 0;
overflow-y: auto;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: max(var(--wb-nav-menu-mobile-padding, 18px), 72px) var(--wb-nav-menu-mobile-padding, 18px) var(--wb-nav-menu-mobile-padding, 18px);
border-radius: 0;
box-shadow: none;
}
.nav-menu-breakpoint-md.nav-menu-mobile-full.is-open .nav-list {
display: flex;
}
.nav-menu-breakpoint-md.nav-menu-mobile-full.is-open .mobile-nav-close-btn {
display: flex;
}
.nav-menu-breakpoint-md.nav-menu-mobile-full .nav-link {
color: var(--wb-nav-menu-mobile-link-color, #212529);
}
.nav-menu-breakpoint-md.nav-menu-mobile-full .nav-link:hover,
.nav-menu-breakpoint-md.nav-menu-mobile-full .nav-link:focus-visible {
color: var(--wb-nav-menu-mobile-link-hover-color, #0055ff);
}
.nav-menu-breakpoint-md.nav-menu-mobile-full .nav-submenu {
position: static;
display: block;
min-width: 0;
padding: 8px 0 0 12px;
background: transparent;
box-shadow: none;
}
}
@media (max-width: 992px) {
.nav-menu-breakpoint-lg:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list {
background-color: transparent;
isolation: isolate;
}
.nav-menu-breakpoint-lg:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list::before {
position: absolute;
inset: 0;
z-index: -1;
content: "";
pointer-events: none;
background-color: var(--wb-nav-menu-mobile-background, #ffffff);
border-radius: inherit;
opacity: var(--wb-nav-menu-mobile-background-opacity, 1);
}
.nav-menu-breakpoint-lg.nav-menu-mobile-full .mobile-toggle-btn {
display: flex;
}
.nav-menu-breakpoint-lg.nav-menu-mobile-full .nav-list {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
box-sizing: border-box;
width: 100vw;
max-width: none;
height: 100vh;
height: 100dvh;
margin: 0;
overflow-y: auto;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: max(var(--wb-nav-menu-mobile-padding, 18px), 72px) var(--wb-nav-menu-mobile-padding, 18px) var(--wb-nav-menu-mobile-padding, 18px);
border-radius: 0;
box-shadow: none;
}
.nav-menu-breakpoint-lg.nav-menu-mobile-full.is-open .nav-list {
display: flex;
}
.nav-menu-breakpoint-lg.nav-menu-mobile-full.is-open .mobile-nav-close-btn {
display: flex;
}
.nav-menu-breakpoint-lg.nav-menu-mobile-full .nav-link {
color: var(--wb-nav-menu-mobile-link-color, #212529);
}
.nav-menu-breakpoint-lg.nav-menu-mobile-full .nav-link:hover,
.nav-menu-breakpoint-lg.nav-menu-mobile-full .nav-link:focus-visible {
color: var(--wb-nav-menu-mobile-link-hover-color, #0055ff);
}
.nav-menu-breakpoint-lg.nav-menu-mobile-full .nav-submenu {
position: static;
display: block;
min-width: 0;
padding: 8px 0 0 12px;
background: transparent;
box-shadow: none;
}
}
/* Optionale Aufdeck-Animation der mobilen Navigation. */
.nav-menu-animation-direction-right {
--wb-nav-menu-mobile-closed-clip: inset(0 100% 0 0);
}
.nav-menu-animation-direction-left {
--wb-nav-menu-mobile-closed-clip: inset(0 0 0 100%);
}
.nav-menu-animation-direction-down {
--wb-nav-menu-mobile-closed-clip: inset(0 0 100% 0);
}
.nav-menu-animation-direction-up {
--wb-nav-menu-mobile-closed-clip: inset(100% 0 0 0);
}
@media (max-width: 576px) {
.nav-menu-breakpoint-sm.nav-menu-mobile-animate.nav-menu-animation-spread:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list {
display: flex;
visibility: hidden;
pointer-events: none;
clip-path: var(--wb-nav-menu-mobile-closed-clip, inset(0 0 100% 0));
transition:
clip-path var(--wb-nav-menu-mobile-animation-duration, 350ms) cubic-bezier(0.4, 0, 0.2, 1),
visibility 0s linear var(--wb-nav-menu-mobile-animation-duration, 350ms);
will-change: clip-path;
}
.nav-menu-breakpoint-sm.nav-menu-mobile-animate.nav-menu-animation-spread:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full).is-open .nav-list {
visibility: visible;
pointer-events: auto;
clip-path: inset(0);
transition-delay: 0s;
}
}
@media (max-width: 768px) {
.nav-menu-breakpoint-md.nav-menu-mobile-animate.nav-menu-animation-spread:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list {
display: flex;
visibility: hidden;
pointer-events: none;
clip-path: var(--wb-nav-menu-mobile-closed-clip, inset(0 0 100% 0));
transition:
clip-path var(--wb-nav-menu-mobile-animation-duration, 350ms) cubic-bezier(0.4, 0, 0.2, 1),
visibility 0s linear var(--wb-nav-menu-mobile-animation-duration, 350ms);
will-change: clip-path;
}
.nav-menu-breakpoint-md.nav-menu-mobile-animate.nav-menu-animation-spread:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full).is-open .nav-list {
visibility: visible;
pointer-events: auto;
clip-path: inset(0);
transition-delay: 0s;
}
}
@media (max-width: 992px) {
.nav-menu-breakpoint-lg.nav-menu-mobile-animate.nav-menu-animation-spread:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list {
display: flex;
visibility: hidden;
pointer-events: none;
clip-path: var(--wb-nav-menu-mobile-closed-clip, inset(0 0 100% 0));
transition:
clip-path var(--wb-nav-menu-mobile-animation-duration, 350ms) cubic-bezier(0.4, 0, 0.2, 1),
visibility 0s linear var(--wb-nav-menu-mobile-animation-duration, 350ms);
will-change: clip-path;
}
.nav-menu-breakpoint-lg.nav-menu-mobile-animate.nav-menu-animation-spread:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full).is-open .nav-list {
visibility: visible;
pointer-events: auto;
clip-path: inset(0);
transition-delay: 0s;
}
}
@media (prefers-reduced-motion: reduce) {
.nav-menu-mobile-animate.nav-menu-animation-spread .nav-list {
transition: none !important;
}
}
/* Zeilenabstand, Ausrichtung und optionale Trennlinien der mobilen Navigation. */
@media (max-width: 576px) {
.nav-menu-breakpoint-sm.nav-menu-mobile-items-left:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item,
.nav-menu-breakpoint-sm.nav-menu-mobile-items-center:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item,
.nav-menu-breakpoint-sm.nav-menu-mobile-items-right:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
box-sizing: border-box;
width: 100%;
margin-block: var(--wb-nav-menu-mobile-gap, 12px);
}
.nav-menu-breakpoint-sm.nav-menu-mobile-items-left:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
text-align: left;
}
.nav-menu-breakpoint-sm.nav-menu-mobile-items-center:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
text-align: center;
}
.nav-menu-breakpoint-sm.nav-menu-mobile-items-right:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
text-align: right;
}
.nav-menu-breakpoint-sm.nav-menu-mobile-separators .nav-list > .nav-item {
box-sizing: border-box;
width: 100%;
}
.nav-menu-breakpoint-sm.nav-menu-mobile-separators .nav-list > .nav-item:not(:last-child)::after {
position: absolute;
inset-inline: 0;
bottom: calc(0px - var(--wb-nav-menu-mobile-gap, 12px));
height: 0;
content: "";
pointer-events: none;
border-block-start-width: var(--wb-nav-menu-mobile-separator-width, 1px);
border-block-start-style: var(--wb-nav-menu-mobile-separator-style, solid);
border-block-start-color: var(--wb-nav-menu-mobile-separator-color, #dee2e6);
}
}
@media (max-width: 768px) {
.nav-menu-breakpoint-md.nav-menu-mobile-items-left:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item,
.nav-menu-breakpoint-md.nav-menu-mobile-items-center:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item,
.nav-menu-breakpoint-md.nav-menu-mobile-items-right:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
box-sizing: border-box;
width: 100%;
margin-block: var(--wb-nav-menu-mobile-gap, 12px);
}
.nav-menu-breakpoint-md.nav-menu-mobile-items-left:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
text-align: left;
}
.nav-menu-breakpoint-md.nav-menu-mobile-items-center:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
text-align: center;
}
.nav-menu-breakpoint-md.nav-menu-mobile-items-right:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
text-align: right;
}
.nav-menu-breakpoint-md.nav-menu-mobile-separators .nav-list > .nav-item {
box-sizing: border-box;
width: 100%;
}
.nav-menu-breakpoint-md.nav-menu-mobile-separators .nav-list > .nav-item:not(:last-child)::after {
position: absolute;
inset-inline: 0;
bottom: calc(0px - var(--wb-nav-menu-mobile-gap, 12px));
height: 0;
content: "";
pointer-events: none;
border-block-start-width: var(--wb-nav-menu-mobile-separator-width, 1px);
border-block-start-style: var(--wb-nav-menu-mobile-separator-style, solid);
border-block-start-color: var(--wb-nav-menu-mobile-separator-color, #dee2e6);
}
}
@media (max-width: 992px) {
.nav-menu-breakpoint-lg.nav-menu-mobile-items-left:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item,
.nav-menu-breakpoint-lg.nav-menu-mobile-items-center:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item,
.nav-menu-breakpoint-lg.nav-menu-mobile-items-right:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
box-sizing: border-box;
width: 100%;
margin-block: var(--wb-nav-menu-mobile-gap, 12px);
}
.nav-menu-breakpoint-lg.nav-menu-mobile-items-left:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
text-align: left;
}
.nav-menu-breakpoint-lg.nav-menu-mobile-items-center:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
text-align: center;
}
.nav-menu-breakpoint-lg.nav-menu-mobile-items-right:is(.nav-menu-mobile-collapse, .nav-menu-mobile-full) .nav-list > .nav-item {
text-align: right;
}
.nav-menu-breakpoint-lg.nav-menu-mobile-separators .nav-list > .nav-item {
box-sizing: border-box;
width: 100%;
}
.nav-menu-breakpoint-lg.nav-menu-mobile-separators .nav-list > .nav-item:not(:last-child)::after {
position: absolute;
inset-inline: 0;
bottom: calc(0px - var(--wb-nav-menu-mobile-gap, 12px));
height: 0;
content: "";
pointer-events: none;
border-block-start-width: var(--wb-nav-menu-mobile-separator-width, 1px);
border-block-start-style: var(--wb-nav-menu-mobile-separator-style, solid);
border-block-start-color: var(--wb-nav-menu-mobile-separator-color, #dee2e6);
}
}
/* source: /app/components/ScrollTopButton/ScrollTopButton.css */
/* /app/components/ScrollTopButton/ScrollTopButton.css */
.scroll-top-btn {
--scroll-top-height: 55px;
--scroll-top-icon-size: 32px;
--scroll-top-margin-x: calc(var(--layout-page-gap, 40px) / 2);
--scroll-top-margin-y: 30px;
--scroll-top-translate-x: 0;
--scroll-top-translate-y: 0;
--scroll-top-width: 55px;
align-items: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
color: #ffffff;
display: flex;
height: var(--scroll-top-height);
justify-content: center;
position: fixed;
text-decoration: none;
transform: translate(var(--scroll-top-translate-x), var(--scroll-top-translate-y));
transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
width: var(--scroll-top-width);
z-index: 9998;
}
.scroll-top-btn .scroll-top-icon {
font-size: var(--scroll-top-icon-size);
font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 32;
line-height: 1;
}
.scroll-top-btn:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
text-decoration: none;
transform: translate(var(--scroll-top-translate-x), calc(var(--scroll-top-translate-y) - 5px));
}
.scroll-top-v-top { top: var(--scroll-top-margin-y); }
.scroll-top-v-center { --scroll-top-translate-y: -50%; top: 50%; }
.scroll-top-v-bottom { bottom: var(--scroll-top-margin-y); }
.scroll-top-h-left { left: var(--scroll-top-margin-x); }
.scroll-top-h-center { --scroll-top-translate-x: -50%; left: 50%; }
.scroll-top-h-right { right: var(--scroll-top-margin-x); }
.scroll-top-size-tiny {
--scroll-top-height: 34px;
--scroll-top-icon-size: 18px;
--scroll-top-width: 34px;
}
.scroll-top-size-small {
--scroll-top-height: 44px;
--scroll-top-icon-size: 24px;
--scroll-top-width: 44px;
}
.scroll-top-size-large {
--scroll-top-height: 66px;
--scroll-top-icon-size: 36px;
--scroll-top-width: 66px;
}
.scroll-top-size-huge {
--scroll-top-height: 82px;
--scroll-top-icon-size: 44px;
--scroll-top-width: 82px;
}
.scroll-top-shape-circle {
border-radius: 50%;
}
.scroll-top-shape-rounded-square {
border-radius: var(--scroll-top-radius, 12px);
}
.scroll-top-shape-pill {
--scroll-top-width: 76px;
border-radius: 999px;
}
.scroll-top-shape-pill.scroll-top-size-tiny {
--scroll-top-width: 48px;
}
.scroll-top-shape-pill.scroll-top-size-small {
--scroll-top-width: 62px;
}
.scroll-top-shape-pill.scroll-top-size-large {
--scroll-top-width: 92px;
}
.scroll-top-shape-pill.scroll-top-size-huge {
--scroll-top-width: 112px;
}
/* source: /app/components/Shortcode/Shortcode.css */
/**
* Umschließt IMMER die komplette Ausgabe der Shortcode-Komponente (siehe
* Shortcode.php). Bewusst ohne Layout-Eingriff (display: block ist der
* Standard für ) - dient nur dazu, dem Editor-Overlay im iframe ein
* verlässliches Ziel-Element zu geben, damit Bearbeiten-/Hinzufügen-Buttons
* auch bei fehlerhaftem/leerem Inhalt zuverlässig erscheinen.
*/
.wb-shortcode-wrapper {
display: block;
}
/**
* Fehler-Hinweis, wenn ein ShortCode nicht korrekt formatiert ist, ein
* referenziertes Plugin/eine ID nicht existiert, oder das Rendern fehlschlägt.
* Siehe wbRenderShortcodeError() in Shortcode.php.
*/
.wb-shortcode-error {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 1rem 0;
padding: 12px 16px;
border: 1px dashed rgba(220, 53, 69, 0.55);
border-radius: 6px;
background: rgba(220, 53, 69, 0.08);
color: #842029;
font: 500 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
text-align: left;
}
.wb-shortcode-error__icon {
flex: 0 0 auto;
font-size: 16px;
line-height: 1.5;
}
.wb-shortcode-error__text code {
display: inline-block;
margin-left: 2px;
padding: 1px 5px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.08);
color: inherit;
font-size: 0.85em;
}
/* source: /app/components/TextBlock/TextBlock.css */
/* /app/components/TextBlock/TextBlock.css */
.text-block-wrapper {
/* Nutzt die Standard-Textfarbe */
color: var(--color-text);
padding: 0px 0px;
}
/* Innerhalb einer Container-Spalte darf "boxed" nicht erneut den globalen
Seitenabstand abziehen. Der Text nutzt seine natürliche Breite und bricht
erst um, wenn die verfügbare Spaltenbreite erreicht ist. */
.container-col > .text-block-wrapper.layout-boxed {
width: auto;
max-width: 100%;
margin-inline: 0;
}
.text-block-wrapper .subtitle {
/* Unwichtigere Texte nutzen die abgeschwächte Farbe */
color: var(--color-text-muted);
font-size: 0.9rem;
}
/* --- DIE MODIFIER FÜR DIE AUSRICHTUNG --- */
.text-block-wrapper.align-left {
--wb-align-desktop: left;
}
.text-block-wrapper.align-center {
--wb-align-desktop: center;
}
.text-block-wrapper.align-right {
--wb-align-desktop: right;
}
/* Optionale Ausnahmen von den globalen Linkvorgaben aus base.css. */
.text-block-wrapper.wb-text-links-inherit-color a,
.text-block-wrapper.wb-text-links-inherit-color a:hover,
.text-block-wrapper.wb-text-links-inherit-color a:focus-visible {
color: inherit;
}
.text-block-wrapper.wb-text-links-no-hover-underline a:hover {
text-decoration: none;
}
/* Inline-Icons sitzen wie ein Schriftzeichen in der Textzeile. Groesse und
Farbe werden vom streng validierten Server-Renderer gesetzt. */
.text-block-wrapper .wb-inline-svg-icon {
color: var(--wb-inline-svg-color, inherit);
display: inline-block;
flex: 0 0 auto;
height: var(--wb-inline-svg-size, 1em);
line-height: 1;
overflow: visible;
vertical-align: -0.125em;
width: var(--wb-inline-svg-size, 1em);
}
.text-block-wrapper .wb-inline-svg-icon > svg {
display: block;
height: 100%;
overflow: visible;
width: 100%;
}
.text-block-wrapper .wb-inline-svg-icon--fill > svg {
fill: currentColor;
}
.text-block-wrapper .wb-inline-svg-icon--fill > svg [fill]:not([fill="none"]):not([fill="transparent"]) {
fill: currentColor !important;
}
.text-block-wrapper .wb-inline-svg-icon--fill > svg [stroke]:not([stroke="none"]):not([stroke="transparent"]) {
stroke: currentColor !important;
}
.text-block-wrapper .wb-inline-svg-icon--stroke > svg {
fill: none;
stroke: currentColor;
}
.text-block-wrapper .wb-inline-svg-icon--stroke > svg [stroke]:not([stroke="none"]):not([stroke="transparent"]) {
stroke: currentColor !important;
}
/* source: /app/plugins/WebbaseGallery/WebbaseGallery.css */
/* =========================================
1. STANDARD GALERIE (GRID)
========================================= */
/* Wird nur angewendet, wenn type="grid" ist */
.cmp-media-grid {
--wb-gallery-current-columns: var(--wb-gallery-columns-desktop, 3);
--wb-gallery-current-gap: var(--wb-gallery-gap-desktop, 16px);
--wb-gallery-current-radius: var(--wb-gallery-radius-desktop, 0px);
}
.cmp-media-grid[data-layout-type="grid"] {
display: grid;
grid-template-columns: repeat(var(--wb-gallery-current-columns), 1fr);
gap: var(--wb-gallery-current-gap);
margin: 2rem 0;
}
.cmp-media-grid[data-layout-type="grid"] .cmp-media-grid__item {
aspect-ratio: 1 / 1; /* Perfekte Quadrate */
}
.cmp-media-grid[data-layout-type="grid"] img {
height: 100%;
object-fit: cover;
}
/* =========================================
2. NEU: MASONRY LAYOUT (PINTEREST STYLE)
========================================= */
/* Ändere diesen Block in deiner gallery.css */
.cmp-media-grid[data-layout-type="masonry"] {
display: grid;
grid-template-columns: repeat(var(--wb-gallery-current-columns), 1fr);
/* Feine Zeilen für JS-gesteuertes Masonry */
grid-auto-rows: 1px;
grid-auto-flow: dense;
/* Masonry reserviert den vertikalen Abstand per JS im Grid-Span */
column-gap: var(--wb-gallery-current-gap);
row-gap: 0;
margin: 2rem 0;
align-items: start;
}
.cmp-media-grid[data-layout-type="masonry"] .cmp-media-grid__item {
margin-bottom: 0;
}
.cmp-media-grid[data-layout-type="masonry"] img {
height: auto;
width: 100%;
display: block;
object-fit: contain;
}
/* =========================================
3. GEMEINSAME STYLES FÜR BILDER (BEIDE LAYOUTS)
========================================= */
.cmp-media-grid__item {
width: 100%;
overflow: hidden;
border-radius: var(--wb-gallery-current-radius);
background-color: #1a1a1a;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cmp-media-grid__item:hover {
transform: scale(1.02);
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.cmp-media-grid__item img {
width: 100%;
display: block;
}
/* =========================================
4. EINZEILIGES KARUSSELL
========================================= */
.cmp-media-carousel {
--wb-carousel-current-height: var(--wb-carousel-height-desktop, 200px);
--wb-carousel-current-width: var(--wb-carousel-width-desktop, auto);
--wb-carousel-current-gap: var(--wb-carousel-gap-desktop, 16px);
position: relative;
width: 100%;
margin: 2rem 0;
overflow: hidden;
background: var(--wb-carousel-background, transparent);
}
.cmp-media-carousel__viewport {
position: relative;
}
.cmp-media-carousel__track {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
gap: var(--wb-carousel-current-gap);
width: 100%;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.cmp-media-carousel__track.is-content-centered {
justify-content: center;
}
.cmp-media-carousel__track::-webkit-scrollbar {
display: none;
}
.cmp-media-carousel__item {
flex: 0 0 var(--wb-carousel-current-width);
width: var(--wb-carousel-current-width);
height: var(--wb-carousel-current-height);
aspect-ratio: var(--wb-gallery-image-ratio, 1 / 1);
margin: 0;
overflow: hidden;
border-radius: var(--wb-carousel-border-radius, 0px);
scroll-snap-align: start;
scroll-snap-stop: always;
background: transparent;
}
.cmp-media-carousel__item img {
display: block;
width: 100%;
height: 100%;
object-fit: var(--wb-carousel-object-fit, contain);
user-select: none;
-webkit-user-drag: none;
}
.cmp-media-carousel__item img.js-lightbox-trigger {
cursor: pointer;
}
.cmp-media-carousel__arrow {
position: absolute;
top: 50%;
z-index: 4;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
color: #fff;
background: rgba(0, 0, 0, 0.62);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.24);
transform: translateY(-50%);
transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
cursor: pointer;
}
.cmp-media-carousel__arrow:hover:not(:disabled),
.cmp-media-carousel__arrow:focus-visible {
background: rgba(0, 0, 0, 0.86);
transform: translateY(-50%) scale(1.06);
}
.cmp-media-carousel__arrow:disabled {
opacity: 0.28;
cursor: default;
}
.cmp-media-carousel__arrow[hidden] {
display: none;
}
.cmp-media-carousel__arrow--prev {
left: 12px;
}
.cmp-media-carousel__arrow--next {
right: 12px;
}
.cmp-media-carousel__dots {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
padding: 12px 12px 10px;
}
.cmp-media-carousel__dots[hidden] {
display: none;
}
.cmp-media-carousel__dot {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(127, 127, 127, 0.45);
transition: transform 0.2s ease, background-color 0.2s ease;
cursor: pointer;
}
.cmp-media-carousel__dot.is-active {
background: currentColor;
transform: scale(1.3);
}
/* =========================================
4. RESPONSIVE RETTUNGSANKER (FÜR BEIDE LAYOUTS)
========================================= */
@media (max-width: 991.98px) {
.cmp-media-grid {
--wb-gallery-current-columns: var(--wb-gallery-columns-tablet, var(--wb-gallery-columns-desktop, 3));
--wb-gallery-current-gap: var(--wb-gallery-gap-tablet, var(--wb-gallery-gap-desktop, 16px));
--wb-gallery-current-radius: var(--wb-gallery-radius-tablet, var(--wb-gallery-radius-desktop, 0px));
}
.cmp-media-carousel {
--wb-carousel-current-height: var(--wb-carousel-height-tablet, var(--wb-carousel-height-desktop, 200px));
--wb-carousel-current-width: var(--wb-carousel-width-tablet, var(--wb-carousel-width-desktop, auto));
--wb-carousel-current-gap: var(--wb-carousel-gap-tablet, var(--wb-carousel-gap-desktop, 16px));
}
}
@media (max-width: 767.98px) {
.cmp-media-grid {
--wb-gallery-current-columns: var(--wb-gallery-columns-mobile, var(--wb-gallery-columns-desktop, 3));
--wb-gallery-current-gap: var(--wb-gallery-gap-mobile, var(--wb-gallery-gap-desktop, 16px));
--wb-gallery-current-radius: var(--wb-gallery-radius-mobile, var(--wb-gallery-radius-desktop, 0px));
}
.cmp-media-carousel {
--wb-carousel-current-height: var(--wb-carousel-height-mobile, var(--wb-carousel-height-tablet, var(--wb-carousel-height-desktop, 200px)));
--wb-carousel-current-width: var(--wb-carousel-width-mobile, var(--wb-carousel-width-tablet, var(--wb-carousel-width-desktop, auto)));
--wb-carousel-current-gap: var(--wb-carousel-gap-mobile, var(--wb-carousel-gap-tablet, var(--wb-carousel-gap-desktop, 16px)));
}
.cmp-media-carousel__arrow {
width: 40px;
height: 40px;
}
.cmp-media-carousel__arrow--prev {
left: 8px;
}
.cmp-media-carousel__arrow--next {
right: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.cmp-media-carousel__track {
scroll-behavior: auto;
}
.cmp-media-carousel__arrow,
.cmp-media-carousel__dot {
transition: none;
}
}
/* =========================================
2. LIGHTBOX OVERLAY
========================================= */
.cmp-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.95);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
/* Standardmäßig unsichtbar */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
body.wb-lightbox-open {
overflow: hidden;
}
/* Wird per JS hinzugefügt */
.cmp-lightbox.is-active {
opacity: 1;
visibility: visible;
}
.cmp-lightbox--light {
background-color: rgba(255, 255, 255, 0.96);
}
.cmp-lightbox--light .cmp-lightbox__loader,
.cmp-lightbox--light .cmp-lightbox__close {
color: #111111;
}
.cmp-lightbox__download {
position: absolute;
top: 24px;
left: 24px;
display: none;
align-items: center;
min-height: 40px;
padding: 8px 14px;
border-radius: 4px;
color: #ffffff;
background: rgba(0, 0, 0, 0.7);
text-decoration: none;
}
.cmp-lightbox__download:hover {
color: #ffffff;
background: rgba(0, 0, 0, 0.9);
}
.cmp-lightbox__image {
max-width: 90vw;
max-height: 90vh;
object-fit: contain; /* Bild komplett anzeigen, nicht beschneiden! */
border-radius: 4px;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.cmp-lightbox__close {
position: absolute;
top: 20px;
right: 30px;
color: white;
font-size: 40px;
cursor: pointer;
user-select: none;
line-height: 1;
padding: 0;
border: 0;
background: transparent;
}
.cmp-lightbox__close:hover {
color: #cccccc;
}
.cmp-lightbox__loader {
position: absolute;
color: white;
font-size: 1.2rem;
font-family: sans-serif;
}
/* Verhindert das Standard-Ziehen von Bildern durch den Browser (Wichtig für Maus-Swipe!) */
.cmp-lightbox__image {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
user-select: none;
-webkit-user-drag: none;
}
/* Die neuen Navigations-Pfeile */
.cmp-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.7);
font-size: 24px;
line-height: 1;
cursor: pointer;
user-select: none;
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
padding: 0;
border: 0;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: rgba(0, 0, 0, 0.4);
border-radius: 50%;
transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
z-index: 10000;
}
.cmp-lightbox__nav[hidden] {
display: none;
}
.cmp-lightbox__nav:hover {
color: #ffffff;
background: rgba(0, 0, 0, 0.8);
transform: translateY(-50%) scale(1.1);
}
.cmp-lightbox__nav--prev {
left: 20px;
}
.cmp-lightbox__nav--next {
right: 20px;
}
/* Auf kleinen Handys die Pfeile etwas näher an den Rand rücken */
@media (max-width: 768px) {
.cmp-lightbox__nav--prev { left: 10px; }
.cmp-lightbox__nav--next { right: 10px; }
}
/* source: /app/plugins/WebbaseSlider/WebbaseSlider.css */
/* /app/plugins/WebbaseSlider/WebbaseSlider.css */
.webbase-slider {
position: relative;
width: 100%;
height: var(--webbase-slider-height, min(72vh, 760px));
min-height: var(--webbase-slider-min-height, 420px);
overflow: hidden;
background: #111;
color: #fff;
isolation: isolate;
}
.webbase-slider.is-full-height {
/* Fallback für ältere Browser */
height: 100vh;
min-height: 100vh;
/* svh bleibt auf Android stabil, während vh/dvh beim Ein-/Ausblenden
der Browser-Leiste neu berechnet werden (Scroll-Ruckler). */
height: 100svh;
min-height: 100svh;
}
.webbase-slider__viewport,
.webbase-slider__slides,
.webbase-slider__slide,
.webbase-slider__background,
.webbase-slider__overlay {
position: absolute;
inset: 0;
}
.webbase-slider__viewport {
z-index: 0;
}
.webbase-slider__slide {
opacity: 0;
visibility: hidden;
transform: scale(1.02);
transition:
opacity var(--webbase-slider-transition-duration, 850ms) ease,
visibility var(--webbase-slider-transition-duration, 850ms) ease,
transform calc(var(--webbase-slider-transition-duration, 850ms) * 1.25) ease;
z-index: 0;
}
.webbase-slider[data-transition="slide"] .webbase-slider__slide {
transform: translateX(3%) scale(1.01);
}
.webbase-slider__slide.is-active {
opacity: 1;
visibility: visible;
transform: translateX(0) scale(1);
z-index: 2;
}
.webbase-slider__background {
background-repeat: no-repeat;
z-index: 0;
}
.webbase-slider__overlay {
z-index: 1;
pointer-events: none;
}
.webbase-slider__layers,
.webbase-slider__global-layers {
position: absolute;
top: 0;
right: calc(var(--layout-page-gap, 40px) / 2);
bottom: 0;
left: calc(var(--layout-page-gap, 40px) / 2);
height: 100%;
z-index: 3;
pointer-events: none;
}
.webbase-slider__global-layers {
z-index: 5;
}
.webbase-slider__layer {
position: absolute;
width: auto;
--wb-layer-transform: translate(var(--wb-layer-translate-x, -50%), var(--wb-layer-translate-y, -50%));
--wb-layer-current-max-width: var(--wb-layer-max-width, 100%);
transform: var(--wb-layer-transform, translate(-50%, -50%));
opacity: 0;
margin: 0;
max-width: min(var(--wb-layer-current-max-width), 100%);
pointer-events: none;
will-change: transform, opacity;
}
.webbase-slider__headline,
.webbase-slider__text,
.webbase-slider__eyebrow {
--wb-layer-natural-width: max-content;
display: inline-block;
width: max-content;
max-width: min(var(--wb-layer-current-max-width), 100%);
overflow: visible;
white-space: normal;
text-wrap: auto;
}
.webbase-slider__headline.has-wrap-boundary,
.webbase-slider__text.has-wrap-boundary,
.webbase-slider__eyebrow.has-wrap-boundary {
max-width: min(var(--wb-layer-current-max-width), 100%);
white-space: normal;
text-wrap: auto;
}
.webbase-slider.is-in-view .webbase-slider__slide.is-active .webbase-slider__layer,
.webbase-slider.is-in-view .webbase-slider__global-layers .webbase-slider__layer {
animation-name: var(--wb-layer-animation, wb-slider-fade-up);
animation-duration: var(--wb-layer-duration, 900ms);
animation-delay: var(--wb-layer-delay, 0ms);
animation-timing-function: cubic-bezier(.2, .75, .25, 1);
animation-fill-mode: both;
}
.webbase-slider__eyebrow {
font-size: clamp(0.75rem, 1.2vw, 0.95rem);
font-weight: 700;
text-transform: uppercase;
}
.webbase-slider__headline {
--wb-layer-default-line-height: 1.2;
font-size: clamp(2.2rem, 5vw, 4rem);
font-weight: 800;
line-height: var(--wb-layer-line-height, var(--wb-layer-default-line-height));
}
.webbase-slider__headline.has-wrap-boundary {
text-wrap: balance;
}
.webbase-slider__text {
--wb-layer-default-line-height: 1.45;
font-size: clamp(1rem, 2vw, 1.35rem);
line-height: var(--wb-layer-line-height, var(--wb-layer-default-line-height));
}
.webbase-slider__button {
pointer-events: auto;
width: max-content;
max-width: min(var(--wb-layer-current-max-width), 100%);
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
border-radius: 999px;
background: var(--color-primary, #d02b2b);
color: #fff;
font-weight: 700;
text-decoration: none;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
.webbase-slider__button:hover {
text-decoration: none;
transform: var(--wb-layer-transform, translate(-50%, -50%)) translateY(-2px);
}
.webbase-slider__layer {
top: var(--wb-layer-top);
right: var(--wb-layer-right);
bottom: var(--wb-layer-bottom);
left: var(--wb-layer-left);
width: var(--wb-layer-width, var(--wb-layer-natural-width, auto));
min-width: var(--wb-layer-min-width);
height: var(--wb-layer-height);
z-index: var(--wb-layer-z-index);
color: var(--wb-layer-color);
background: var(--wb-layer-background);
background-color: var(--wb-layer-background-color);
border: var(--wb-layer-border);
border-radius: var(--wb-layer-border-radius);
box-shadow: var(--wb-layer-box-shadow);
font-size: var(--wb-layer-font-size);
font-weight: var(--wb-layer-font-weight);
line-height: var(--wb-layer-line-height, var(--wb-layer-default-line-height, 1.2));
letter-spacing: var(--wb-layer-letter-spacing);
text-align: var(--wb-layer-text-align);
padding: var(--wb-layer-padding);
margin: var(--wb-layer-margin);
text-transform: var(--wb-layer-text-transform);
opacity: var(--wb-layer-opacity, 0);
}
.webbase-slider__layer-image {
object-fit: contain;
}
.webbase-slider .wb-inline-svg-icon {
color: var(--wb-inline-svg-color, inherit);
display: inline-block;
height: var(--wb-inline-svg-size, 1em);
line-height: 1;
vertical-align: -0.125em;
width: var(--wb-inline-svg-size, 1em);
}
.webbase-slider .wb-inline-svg-icon > svg {
display: block;
height: 100%;
overflow: visible;
width: 100%;
}
.webbase-slider .wb-inline-svg-icon--fill > svg {
fill: currentColor;
}
.webbase-slider .wb-inline-svg-icon--fill > svg [fill]:not([fill="none"]):not([fill="transparent"]) {
fill: currentColor !important;
}
.webbase-slider .wb-inline-svg-icon--fill > svg [stroke]:not([stroke="none"]):not([stroke="transparent"]),
.webbase-slider .wb-inline-svg-icon--stroke > svg [stroke]:not([stroke="none"]):not([stroke="transparent"]) {
stroke: currentColor !important;
}
.webbase-slider .wb-inline-svg-icon--stroke > svg {
fill: none;
stroke: currentColor;
}
.webbase-slider__arrow,
.webbase-slider__dot,
.webbase-slider__play-toggle {
pointer-events: auto;
border: 0;
}
.webbase-slider__arrow {
position: absolute;
top: 50%;
z-index: 8;
width: 44px;
height: 44px;
display: grid;
place-items: center;
transform: translateY(-50%);
border-radius: 50%;
background: rgba(0, 0, 0, 0.35);
color: #fff;
font-size: 22px;
line-height: 1;
transition: background 0.2s ease, transform 0.2s ease;
}
.webbase-slider__arrow:hover {
background: rgba(0, 0, 0, 0.65);
transform: translateY(-50%) scale(1.06);
}
.webbase-slider__arrow--prev {
left: calc(var(--layout-page-gap, 40px) / 2);
}
.webbase-slider__arrow--next {
right: calc(var(--layout-page-gap, 40px) / 2);
}
.webbase-slider__controls {
position: absolute;
left: 50%;
bottom: 22px;
z-index: 8;
display: flex;
align-items: center;
gap: 14px;
transform: translateX(-50%);
}
.webbase-slider__dots {
display: flex;
align-items: center;
gap: 10px;
}
.webbase-slider__play-toggle {
width: 30px;
height: 30px;
padding: 0;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.22);
color: #fff;
transition: background 0.2s ease, transform 0.2s ease;
}
.webbase-slider__play-toggle:hover {
background: rgba(255, 255, 255, 0.36);
transform: scale(1.08);
}
.webbase-slider__play-toggle-icon {
width: 11px;
height: 12px;
display: block;
position: relative;
}
.webbase-slider__play-toggle.is-playing .webbase-slider__play-toggle-icon::before,
.webbase-slider__play-toggle.is-playing .webbase-slider__play-toggle-icon::after {
content: "";
position: absolute;
top: 0;
width: 4px;
height: 12px;
border-radius: 1px;
background: currentColor;
}
.webbase-slider__play-toggle.is-playing .webbase-slider__play-toggle-icon::before {
left: 0;
}
.webbase-slider__play-toggle.is-playing .webbase-slider__play-toggle-icon::after {
right: 0;
}
.webbase-slider__play-toggle.is-paused .webbase-slider__play-toggle-icon {
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 11px solid currentColor;
margin-left: 2px;
}
.webbase-slider__dot {
width: 11px;
height: 11px;
padding: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.45);
transition: transform 0.2s ease, background 0.2s ease;
}
.webbase-slider__dot.is-active {
background: #fff;
transform: scale(1.25);
}
@keyframes wb-slider-fade-up {
from {
opacity: 0;
transform: var(--wb-layer-transform, translate(-50%, -50%)) translateY(28px);
}
to {
opacity: 1;
transform: var(--wb-layer-transform, translate(-50%, -50%)) translateY(0);
}
}
@keyframes wb-slider-fade-in {
from {
opacity: 0;
transform: var(--wb-layer-transform, translate(-50%, -50%));
}
to {
opacity: 1;
transform: var(--wb-layer-transform, translate(-50%, -50%));
}
}
@keyframes wb-slider-slide-left {
from {
opacity: 0;
transform: var(--wb-layer-transform, translate(-50%, -50%)) translateX(48px);
}
to {
opacity: 1;
transform: var(--wb-layer-transform, translate(-50%, -50%)) translateX(0);
}
}
@keyframes wb-slider-zoom-in {
from {
opacity: 0;
transform: var(--wb-layer-transform, translate(-50%, -50%)) scale(0.9);
}
to {
opacity: 1;
transform: var(--wb-layer-transform, translate(-50%, -50%)) scale(1);
}
}
@media (max-width: 991.98px) {
.webbase-slider__layer {
--wb-layer-transform: translate(
var(--wb-layer-translate-x-tablet, var(--wb-layer-translate-x, -50%)),
var(--wb-layer-translate-y-tablet, var(--wb-layer-translate-y, -50%))
);
--wb-layer-current-max-width: var(--wb-layer-max-width-tablet, var(--wb-layer-max-width, 100%));
top: var(--wb-layer-top-tablet, var(--wb-layer-top));
right: var(--wb-layer-right-tablet, var(--wb-layer-right));
bottom: var(--wb-layer-bottom-tablet, var(--wb-layer-bottom));
left: var(--wb-layer-left-tablet, var(--wb-layer-left));
width: var(--wb-layer-width-tablet, var(--wb-layer-width, var(--wb-layer-natural-width, auto)));
min-width: var(--wb-layer-min-width-tablet, var(--wb-layer-min-width));
height: var(--wb-layer-height-tablet, var(--wb-layer-height));
z-index: var(--wb-layer-z-index-tablet, var(--wb-layer-z-index));
color: var(--wb-layer-color-tablet, var(--wb-layer-color));
background: var(--wb-layer-background-tablet, var(--wb-layer-background));
background-color: var(--wb-layer-background-color-tablet, var(--wb-layer-background-color));
border: var(--wb-layer-border-tablet, var(--wb-layer-border));
border-radius: var(--wb-layer-border-radius-tablet, var(--wb-layer-border-radius));
box-shadow: var(--wb-layer-box-shadow-tablet, var(--wb-layer-box-shadow));
font-size: var(--wb-layer-font-size-tablet, var(--wb-layer-font-size));
font-weight: var(--wb-layer-font-weight-tablet, var(--wb-layer-font-weight));
line-height: var(--wb-layer-line-height-tablet, var(--wb-layer-line-height, var(--wb-layer-default-line-height, 1.2)));
letter-spacing: var(--wb-layer-letter-spacing-tablet, var(--wb-layer-letter-spacing));
text-align: var(--wb-layer-text-align-tablet, var(--wb-layer-text-align));
padding: var(--wb-layer-padding-tablet, var(--wb-layer-padding));
margin: var(--wb-layer-margin-tablet, var(--wb-layer-margin));
text-transform: var(--wb-layer-text-transform-tablet, var(--wb-layer-text-transform));
opacity: var(--wb-layer-opacity-tablet, var(--wb-layer-opacity, 0));
}
.webbase-slider__headline:not(.has-wrap-boundary),
.webbase-slider__text:not(.has-wrap-boundary),
.webbase-slider__eyebrow:not(.has-wrap-boundary) {
max-width: min(var(--wb-layer-current-max-width), 100%);
white-space: normal;
text-wrap: auto;
}
.webbase-slider__headline:not(.has-wrap-boundary) {
text-wrap: balance;
}
}
@media (max-width: 767.98px) {
.webbase-slider {
height: var(--webbase-slider-mobile-height, 72vh);
min-height: 460px;
}
.webbase-slider.is-full-height {
height: 100vh;
min-height: 100vh;
height: 100svh;
min-height: 100svh;
}
.webbase-slider__arrow {
width: 38px;
height: 38px;
font-size: 18px;
}
.webbase-slider__layer {
--wb-layer-transform: translate(
var(--wb-layer-translate-x-mobile, var(--wb-layer-translate-x-tablet, var(--wb-layer-translate-x, -50%))),
var(--wb-layer-translate-y-mobile, var(--wb-layer-translate-y-tablet, var(--wb-layer-translate-y, -50%)))
);
--wb-layer-current-max-width: var(--wb-layer-max-width-mobile, var(--wb-layer-max-width-tablet, var(--wb-layer-max-width, 100%)));
top: var(--wb-layer-top-mobile, var(--wb-layer-top-tablet, var(--wb-layer-top)));
right: var(--wb-layer-right-mobile, var(--wb-layer-right-tablet, var(--wb-layer-right)));
bottom: var(--wb-layer-bottom-mobile, var(--wb-layer-bottom-tablet, var(--wb-layer-bottom)));
left: var(--wb-layer-left-mobile, var(--wb-layer-left-tablet, var(--wb-layer-left)));
width: var(--wb-layer-width-mobile, var(--wb-layer-width-tablet, var(--wb-layer-width, var(--wb-layer-natural-width, auto))));
min-width: var(--wb-layer-min-width-mobile, var(--wb-layer-min-width-tablet, var(--wb-layer-min-width)));
height: var(--wb-layer-height-mobile, var(--wb-layer-height-tablet, var(--wb-layer-height)));
z-index: var(--wb-layer-z-index-mobile, var(--wb-layer-z-index-tablet, var(--wb-layer-z-index)));
color: var(--wb-layer-color-mobile, var(--wb-layer-color-tablet, var(--wb-layer-color)));
background: var(--wb-layer-background-mobile, var(--wb-layer-background-tablet, var(--wb-layer-background)));
background-color: var(--wb-layer-background-color-mobile, var(--wb-layer-background-color-tablet, var(--wb-layer-background-color)));
border: var(--wb-layer-border-mobile, var(--wb-layer-border-tablet, var(--wb-layer-border)));
border-radius: var(--wb-layer-border-radius-mobile, var(--wb-layer-border-radius-tablet, var(--wb-layer-border-radius)));
box-shadow: var(--wb-layer-box-shadow-mobile, var(--wb-layer-box-shadow-tablet, var(--wb-layer-box-shadow)));
font-size: var(--wb-layer-font-size-mobile, var(--wb-layer-font-size-tablet, var(--wb-layer-font-size)));
font-weight: var(--wb-layer-font-weight-mobile, var(--wb-layer-font-weight-tablet, var(--wb-layer-font-weight)));
line-height: var(--wb-layer-line-height-mobile, var(--wb-layer-line-height-tablet, var(--wb-layer-line-height, var(--wb-layer-default-line-height, 1.2))));
letter-spacing: var(--wb-layer-letter-spacing-mobile, var(--wb-layer-letter-spacing-tablet, var(--wb-layer-letter-spacing)));
text-align: var(--wb-layer-text-align-mobile, var(--wb-layer-text-align-tablet, var(--wb-layer-text-align)));
padding: var(--wb-layer-padding-mobile, var(--wb-layer-padding-tablet, var(--wb-layer-padding)));
margin: var(--wb-layer-margin-mobile, var(--wb-layer-margin-tablet, var(--wb-layer-margin)));
text-transform: var(--wb-layer-text-transform-mobile, var(--wb-layer-text-transform-tablet, var(--wb-layer-text-transform)));
opacity: var(--wb-layer-opacity-mobile, var(--wb-layer-opacity-tablet, var(--wb-layer-opacity, 0)));
}
}
@media (prefers-reduced-motion: reduce) {
.webbase-slider__slide,
.webbase-slider__layer {
transition: none !important;
animation: none !important;
}
.webbase-slider__slide.is-active .webbase-slider__layer,
.webbase-slider__global-layers .webbase-slider__layer {
opacity: 1;
}
}
/* source: /public/assets/base.css */
/* ==========================================================================
1. BOX-SIZING & GRUNDLAGEN (Überlebenswichtig für Pagebuilder!)
========================================================================== */
/* Versteckt die Warnung, wenn die CSS-Datei erfolgreich geladen wurde */
.css-debugger {
display: none !important;
}
html {
scroll-behavior: smooth;
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
/*Globale Randabstand aller Boxed-Elemente*/
:root {
--layout-page-gap: 40px;
/* Mobile Navigation: neutrale Systemwerte fuer alle Themes */
--wb-nav-menu-mobile-width: 250px;
--wb-nav-menu-mobile-gap: 12px;
--wb-nav-menu-mobile-padding: 18px;
--wb-nav-menu-mobile-background: #ffffff;
--wb-nav-menu-mobile-background-opacity: 1;
--wb-nav-menu-mobile-link-color: #212529;
--wb-nav-menu-mobile-link-hover-color: #0055ff;
--wb-nav-menu-mobile-toggle-color: #212529;
--wb-nav-menu-mobile-border-radius: 8px;
--wb-nav-menu-mobile-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
--wb-nav-menu-mobile-separator-color: #dee2e6;
--wb-nav-menu-mobile-separator-width: 1px;
--wb-nav-menu-mobile-separator-style: solid;
/* links: 0 auto | zentriert: auto | rechts: auto 0 */
--wb-nav-menu-mobile-toggle-margin-inline: auto 0;
--wb-nav-menu-mobile-panel-margin-inline: auto 0;
}
/*
* Webbase Responsive-Vertrag
* --------------------------
* Desktop: ab 992px
* Tablet: 768px bis 991.98px
* Smartphone: bis 767.98px
*
* Komponenten geben nur CSS-Variablen aus. Die Breakpoints selbst werden hier
* zentral ausgewertet, damit sie nicht in jeder Komponente wiederholt werden.
*/
.wb-responsive-text {
text-align: var(--wb-align-desktop, inherit);
font-size: var(--wb-font-size-desktop);
}
.wb-responsive-width {
max-width: var(--wb-max-width-desktop, 100%);
}
/*
* Responsive Spaltensteuerung fuer DefaultContainer. Die Kombination aus
* Element- und Modusklasse ist absichtlich spezifischer als die Basisregeln
* in DefaultContainer.css, das nach base.css geladen wird.
*/
.default-container.wb-columns-break-none,
.default-container.wb-columns-break-tablet,
.default-container.wb-columns-break-mobile,
.wb-loop-anim-target.wb-columns-break-none,
.wb-loop-anim-target.wb-columns-break-tablet,
.wb-loop-anim-target.wb-columns-break-mobile {
flex-wrap: nowrap;
}
/*OLD: 991.98px*/
@media (max-width: 991.98px) {
.wb-responsive-text {
text-align: var(--wb-align-tablet, var(--wb-align-desktop, inherit));
font-size: var(--wb-font-size-tablet, var(--wb-font-size-desktop));
}
.wb-responsive-width {
max-width: var(--wb-max-width-tablet, var(--wb-max-width-desktop, 100%));
}
.default-container.wb-columns-break-tablet,
.wb-loop-anim-target.wb-columns-break-tablet {
flex-direction: column;
}
.default-container.wb-columns-break-tablet > .container-col,
.wb-loop-anim-target.wb-columns-break-tablet > .container-col {
flex: 0 0 auto !important;
width: 100% !important;
/* Gestapelte Spalten brauchen wieder min-height: auto, sonst kollabiert
die Höhe (flex-basis: 0 aus Desktop-Verhältnis-Regeln) und der Inhalt
überlappt optisch mit der nächsten Sektion darunter. */
min-height: auto !important;
min-width: auto !important;
}
}
@media (max-width: 767.98px) {
.wb-responsive-text {
text-align: var(--wb-align-mobile, var(--wb-align-tablet, var(--wb-align-desktop, inherit)));
font-size: var(--wb-font-size-mobile, var(--wb-font-size-tablet, var(--wb-font-size-desktop)));
}
.wb-responsive-width {
max-width: var(--wb-max-width-mobile, var(--wb-max-width-tablet, var(--wb-max-width-desktop, 100%)));
}
.default-container.wb-columns-break-mobile,
.wb-loop-anim-target.wb-columns-break-mobile {
flex-direction: column;
}
.default-container.wb-columns-break-mobile > .container-col,
.wb-loop-anim-target.wb-columns-break-mobile > .container-col {
flex: 0 0 auto !important;
width: 100% !important;
min-height: auto !important;
min-width: auto !important;
}
}
/* Standard: Auf 1200px begrenzen und mittig zentrieren */
.layout-boxed {
width: min(var(--layout-max-width, 1200px), calc(100% - var(--layout-page-gap, 40px)));
max-width: var(--layout-max-width, 1200px);
margin-left: auto;
margin-right: auto;
}
.layout-boxed:not(.layout-full) {
width: min(var(--layout-max-width, 1200px), calc(100% - var(--layout-page-gap, 40px)));
max-width: var(--layout-max-width, 1200px);
margin-left: auto;
margin-right: auto;
}
.site-content > .layout-boxed:not(.layout-full) {
width: 100%;
}
/* Fullscreen: Nimmt den gesamten Platz ein */
.layout-full {
width: 100%;
max-width: 100%;
}
/* Das ist der Haupt-Container in deiner master.php, der alle Komponenten umschließt */
.site-content {
display: grid;
/* Bezugsrahmen für absolut positionierte Top-Level-Instanzen (z.B. AnimatedBgContainer
direkt auf Seitenebene, ohne umgebenden Container) - siehe deren CSS. */
position: relative;
/*
Die geniale 3-Spalten-Formel:
1fr = flexibler Rand links
min(...) = Die Mitte ist maximal 1200px breit, auf Handys 100% minus 40px Rand
1fr = flexibler Rand rechts
*/
grid-template-columns:
1fr
min(var(--layout-max-width, 1200px), calc(100% - var(--layout-page-gap, 40px)))
1fr;
}
/* REGEL 1: ALLE direkten Kinder landen standardmäßig in der mittleren (2.) Spalte! */
.site-content > * {
grid-column: 2;
}
/* REGEL 2: Nur Komponenten mit dieser Klasse dürfen von Rand zu Rand (Spalte 1 bis Ende) gehen! */
.site-content > .layout-full {
grid-column: 1 / -1;
}
.site-header {
position: relative;
z-index: var(--site-header-z-index, 10001);
}
.site-header--overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
}
.site-header--fixed {
position: fixed;
top: 0;
right: 0;
left: 0;
width: 100%;
}
/* Sorgt dafür, dass Rahmen (Border) und Innenabstände (Padding)
die Elemente nicht breiter machen als definiert.
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/*Test*/
/* Entfernt Standard-Abstände aller gängigen HTML-Elemente */
body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
margin: 0;
padding: 0;
}
/* Sanftes Scrollen für Anker-Links (z.B. von Navigation zu Sektion) */
html {
scroll-behavior: smooth;
}
/* ==========================================================================
2. BODY & GLOBALE TYPOGRAFIE
========================================================================== */
body {
/* Wir greifen hier auf unsere Theme-Variablen zu!
Falls die Datenbank nichts liefert, nutzen wir moderne Systemschriften als Fallback.
*/
font-family: var(--font-primary, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
color: var(--color-text, #1a1a1a);
background-color: var(--color-bg, #ffffff);
/* Bessere Lesbarkeit für Texte */
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Verhindert horizontales Scrollen, falls ein Element ausbricht */
overflow-x: hidden;
width: 100%;
max-width: 100%;
min-height: 100vh;
}
@supports (overflow: clip) {
html,
body {
overflow-x: clip;
}
}
/* Überschriften heben sich oft optisch ab */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-header, var(--font-primary, sans-serif));
line-height: 1.2;
font-weight: bold;
/* Kleiner Standard-Abstand nach unten, den Komponenten überschreiben können */
margin-bottom: 0.5em;
}
h1 { font-family: var(--font-header-h1, var(--font-header, var(--font-primary, sans-serif))); }
h2 { font-family: var(--font-header-h2, var(--font-header, var(--font-primary, sans-serif))); }
h3 { font-family: var(--font-header-h3, var(--font-header, var(--font-primary, sans-serif))); }
h4 { font-family: var(--font-header-h4, var(--font-header, var(--font-primary, sans-serif))); }
h5 { font-family: var(--font-header-h5, var(--font-header, var(--font-primary, sans-serif))); }
h6 { font-family: var(--font-header-h6, var(--font-header, var(--font-primary, sans-serif))); }
.font-highlight {
font-family: var(--font-highlight, var(--font-primary, sans-serif));
}
/* ==========================================================================
3. MEDIA SAFEGUARDS (Bilder & Videos bändigen)
========================================================================== */
/* Verhindert, dass Bilder oder Videos über ihre Container (Spalten/Rows)
hinausragen. Sie passen sich maximal der Breite an.
*/
img,
picture,
video,
canvas,
svg,
iframe {
display: block;
max-width: 100%;
height: auto;
}
/* ==========================================================================
4. FORMULARE & BUTTONS
========================================================================== */
/* Buttons und Inputs erben im Browser standardmäßig KEINE Schriften.
Hiermit zwingen wir sie dazu, sich dem Theme anzupassen.
*/
input,
button,
textarea,
select {
font-family: inherit;
font-size: inherit;
color: inherit;
}
button,
[role="button"] {
cursor: pointer;
}
/* Verhindert, dass Textareas über das Layout hinausgezogen werden können */
textarea {
resize: vertical;
}
/* ==========================================================================
5. LISTEN & LINKS
========================================================================== */
/* Entfernt Standard-Punkte von Listen, wenn sie keine normale Text-Liste sind */
ul[class],
ol[class] {
list-style: none;
}
/* Links bekommen standardmäßig die Theme-Primärfarbe (falls nicht anders definiert) */
a {
color: var(--primary-color, #0055ff);
text-decoration: none;
transition: color 0.2s ease, opacity 0.2s ease;
}
a:hover {
text-decoration: underline;
}
/* ==========================================================================
6. ACCESSIBILITY (Barrierefreiheit) & UTILITIES
========================================================================== */
/* Respektiert das HTML5 [hidden] Attribut (sonst wird es oft von CSS überschrieben) */
[hidden] {
display: none !important;
}
/* Respektiert Nutzer, die in ihrem Betriebssystem "Animationen reduzieren" aktiviert haben */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.legal-document-content {
width: min(var(--layout-max-width, 1200px), calc(100% - var(--layout-page-gap, 40px)));
max-width: var(--layout-max-width, 1200px);
margin-left: auto;
margin-right: auto;
padding: 2rem 0 3rem;
}
.legal-document-content h1,
.legal-document-content h2 {
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.legal-document-content p {
margin-bottom: 1rem;
}
/*DEBUG FRAME**********************************/
/*
.default-container {
border: 3px solid red !important;
}
.cover-component-wrapper {
border: 3px solid blue !important;
}*/
/* source: /app/themes/default-light/theme.css */
/* /app/themes/sushi-express/theme.css */
:root {
--layout-max-width: 1200px;
/* ==========================================================================
1. PRIMÄRFARBEN (Die Marken-Identität)
Einsatz: Haupt-Buttons, wichtige Links, Header-Hintergrund
========================================================================== */
--color-primary: #e63946;
--color-primary-alt: #d62828; /* Meistens etwas dunkler für Button-Hover-Effekte */
/* ==========================================================================
2. SEKUNDÄRFARBEN (Die unterstützende Identität)
Einsatz: Zweite Button-Art ("Abbrechen"), Footer-Hintergrund, Rahmen
========================================================================== */
--color-secondary: #457b9d;
--color-secondary-alt: #1d3557;
/* ==========================================================================
3. AKZENTFARBEN (Der Blickfang)
Einsatz: Badges, Icons, Checkboxen, Call-to-Action Details
========================================================================== */
--color-accent: #f4a261;
--color-accent-alt: #e76f51;
/* ==========================================================================
4. HINTERGRUNDFARBEN (Die Leinwand)
Einsatz: Body-Background, Sections, Cards
========================================================================== */
--color-bg: #f8f9fa; /* Ein sehr helles Grau ist oft besser als reines Weiß */
--color-bg-alt: #ffffff; /* Für Boxen/Cards, die auf dem grauen Body liegen */
/* ==========================================================================
5. TEXTFARBEN (Lesbarkeit)
Einsatz: Fließtext, Überschriften, Meta-Daten
========================================================================== */
--color-text: #212529; /* Ein weiches, dunkles Anthrazit (reines #000 ist zu hart für die Augen) */
--color-text-muted: #6c757d; /* Grau für Untertitel, Datumsangaben, Platzhalter */
/* FONTSSSSSSS ==========================================================================*/
--font-primary: 'Ubuntu', sans-serif;
--font-header: 'Exo', sans-serif;
--font-highlight: 'Caveat', cursive;
/* 3. Spezifische Überschriften (Optional, hier nur als Beispiel für h1 aktiviert) */
--font-header-h1: 'Playfair Display', serif;
--font-header-h2: 'Playfair Display', serif;
/* --font-header-h3: ... */
/* 4. Für Hervorhebungen (z. B. Badges, Zitate oder spezielle Spans) */
--font-highlight: 'Caveat', cursive;
/* Mobile Navigation: Theme-Ebene (ueberschreibt public/assets/base.css) */
--wb-nav-menu-mobile-width: 250px;
--wb-nav-menu-mobile-gap: 12px;
--wb-nav-menu-mobile-padding: 18px;
--wb-nav-menu-mobile-background: var(--color-bg-alt);
--wb-nav-menu-mobile-background-opacity: 1;
--wb-nav-menu-mobile-link-color: var(--color-text);
--wb-nav-menu-mobile-link-hover-color: var(--color-primary);
--wb-nav-menu-mobile-toggle-color: var(--color-text);
--wb-nav-menu-mobile-border-radius: 8px;
--wb-nav-menu-mobile-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
--wb-nav-menu-mobile-separator-color: var(--color-text-muted);
--wb-nav-menu-mobile-separator-width: 1px;
--wb-nav-menu-mobile-separator-style: solid;
/* links: 0 auto | zentriert: auto | rechts: auto 0 */
--wb-nav-menu-mobile-toggle-margin-inline: auto 0;
--wb-nav-menu-mobile-panel-margin-inline: auto 0;
}
/* Button Style START **********************************************/
.btn-component {
border-radius: 50px;
border-color: var(--color-primary);
border-style: solid;
background-color: var(--color-primary);
}
/* Button Style END ************************************************/
/* Image Style START **********************************************/
.image-component-wrapper {
border-radius: 999px;
}
/* Image Style END ************************************************/