/* =========================================================
SMARTBOX: 1 SPALTE
Mehrsprachigkeit wird nativ von inCMS verwaltet.
========================================================= */
/* =========================================================
BEREICH
========================================================= */
.sb-one-column {
background-color: #ffffff;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
padding-left: 24px;
padding-right: 24px;
}
/* =========================================================
HINTERGRUND
========================================================= */
.sb-one-column.bg-white {
background-color: #ffffff;
}
.sb-one-column.bg-grey {
background-color: #ededed;
}
.sb-one-column.bg-color {
background-image: none !important;
}
.sb-one-column.bg-image {
background-image: var(--sb-one-column-bg-image);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.sb-one-column.bg-scroll {
background-attachment: scroll;
}
.sb-one-column.bg-fixed {
background-attachment: fixed;
}
/* =========================================================
INNER
========================================================= */
.sb-one-column__inner {
width: 100%;
max-width: 1100px;
margin: 0 auto;
box-sizing: border-box;
}
/* =========================================================
ÜBERSCHRIFT
========================================================= */
.sb-one-column
.title-wrapper:has(.sb-one-column__headline:empty) {
display: none;
}
.sb-one-column__headline.align-left {
text-align: left;
}
.sb-one-column__headline.align-center {
text-align: center;
}
.sb-one-column__headline.align-right {
text-align: right;
}
/* =========================================================
TEXT
========================================================= */
.sb-one-column__text:empty {
display: none;
}
.sb-one-column__text.align-left {
text-align: left;
}
.sb-one-column__text.align-center {
text-align: center;
}
.sb-one-column__text.align-right {
text-align: right;
}
/* =========================================================
BUTTON WRAPPER
========================================================= */
.sb-one-column__button-wrap {
margin-top: 35px;
display: flex;
}
.sb-one-column__button-wrap.align-left {
justify-content: flex-start;
}
.sb-one-column__button-wrap.align-center {
justify-content: center;
}
.sb-one-column__button-wrap.align-right {
justify-content: flex-end;
}
/* =========================================================
BUTTON AUSBLENDEN
========================================================= */
.sb-one-column__button-link.is-hidden,
.sb-one-column__button-link[class~="0"],
.sb-one-column__button-link:empty {
display: none;
}
.sb-one-column__button-wrap:has(
.sb-one-column__button-link.is-hidden
),
.sb-one-column__button-wrap:has(
.sb-one-column__button-link[class~="0"]
),
.sb-one-column__button-wrap:has(
.sb-one-column__button-link:empty
) {
display: none;
}
/* =========================================================
BUTTON LINKZUSTÄNDE
========================================================= */
.sb-one-column__button-wrap .custom__button,
.sb-one-column__button-wrap .custom__button:link,
.sb-one-column__button-wrap .custom__button:visited {
text-decoration: none;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 768px) {
.sb-one-column {
padding-left: 16px;
padding-right: 16px;
}
.sb-one-column.bg-fixed {
background-attachment: scroll;
}
}
.sb-two-col-media {
padding-left: 24px;
padding-right: 24px;
}
.sb-two-col-media.bg-white {
background: #ffffff;
}
.sb-two-col-media.bg-grey {
background: #ededed;
}
.sb-two-col-media__inner {
width: 100%;
max-width: 950px;
margin: 0 auto;
display: grid;
gap: 10px;
}
.sb-two-col-media__title-wrap {
width: 100%;
max-width: 800px;
display: grid;
gap: 10px;
}
.sb-two-col-media__title-wrap.align-left {
text-align: left;
margin-right: auto;
}
.sb-two-col-media__title-wrap.align-center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.sb-two-col-media__title-wrap.align-right {
text-align: right;
margin-left: auto;
}
.sb-two-col-media__columns {
display: grid;
/* Flexiblere Aufteilung (50/50), die sich an die 800px Gesamtbreite anpasst */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px; /* Etwas reduzierter Abstand, damit beide Spalten Platz haben */
}
.sb-two-col-media__columns.align-top {
align-items: start;
}
.sb-two-col-media__columns.align-center {
align-items: center;
}
.sb-two-col-media__columns.align-bottom {
align-items: end;
}
.sb-two-col-media__columns.media-right .sb-two-col-media__media {
order: 2;
}
.sb-two-col-media__columns.media-right .sb-two-col-media__content {
order: 1;
}
.sb-two-col-media__media {
min-width: 0;
}
.sb-two-col-media__media-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.sb-two-col-media__media-wrapper iframe,
.sb-two-col-media__media-wrapper video,
.sb-two-col-media__media-wrapper img {
width: 100%;
height: 100%;
display: block;
}
.sb-two-col-media__media-wrapper iframe {
border: 0;
}
.sb-two-col-media__media-wrapper img,
.sb-two-col-media__media-wrapper video {
object-fit: cover;
}
.sb-two-col-media__content {
min-width: 0;
max-width: 520px;
display: grid;
gap: 14px;
justify-items: start;
text-align: left;
}
.sb-two-col-media__content-title {
font-family: "robotoslab";
font-weight: 400;
text-align: left;
}
.sb-two-col-media__content-text {
text-align: left;
}
.sb-two-col-media__content-text {
min-width: 0;
}
.sb-two-col-media__content-text > :first-child {
margin-top: 0;
}
.sb-two-col-media__content-text > :last-child {
margin-bottom: 0;
}
.sb-two-col-media__button-wrap {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
gap: 12px;
}
.sb-two-col-media__button-wrap.align-left {
justify-content: flex-start;
}
.sb-two-col-media__button-wrap.align-center {
justify-content: center;
}
.sb-two-col-media__button-wrap.align-right {
justify-content: flex-end;
}
.sb-two-col-media__button-wrap .custom__button.is-hidden {
display: none;
}
.sb-two-col-media__button-wrap .custom__button:link,
.sb-two-col-media__button-wrap .custom__button:visited,
.sb-two-col-media__button-wrap .custom__button:hover,
.sb-two-col-media__button-wrap .custom__button:focus,
.sb-two-col-media__button-wrap .custom__button:active {
text-decoration: none;
}
.sb-two-col-media__content,
.sb-two-col-media__content-title,
.sb-two-col-media__content-text,
.sb-two-col-media__button-wrap {
justify-items: start;
justify-content: flex-start;
text-align: left;
}
@media (max-width: 900px) {
.sb-two-col-media__columns {
grid-template-columns: 1fr;
gap: 32px;
}
.sb-two-col-media__columns.media-right .sb-two-col-media__media,
.sb-two-col-media__columns.media-right .sb-two-col-media__content {
order: initial;
}
.sb-two-col-media__content {
max-width: 100%;
justify-items: start;
text-align: left;
}
}
@media (max-width: 768px) {
.sb-two-col-media {
padding-left: 16px;
padding-right: 16px;
}
.sb-two-col-media__inner {
gap: 32px;
}
}
/* Leere Inhaltsfelder erzeugen keinen Phantom-Abstand. */
.sb-two-col-media__title-wrap:has(.sb-two-col-media__headline:empty):has(.sb-two-col-media__subheadline:empty),
.sb-two-col-media__content-title:empty,
.sb-two-col-media__content-text:empty {
display: none;
}
.sb-two-cols {
padding-left: 24px;
padding-right: 24px;
}
.sb-two-cols__inner {
max-width: 1100px;
margin: 0 auto;
}
.sb-two-cols__headline.is-hidden {
display: none;
}
.sb-two-cols__grid {
display: grid;
}
.sb-two-cols__grid.ratio-50-50 {
grid-template-columns: 1fr 1fr;
}
.sb-two-cols__grid.ratio-30-70 {
grid-template-columns: 0.3fr 0.7fr;
}
.sb-two-cols__grid.ratio-40-60 {
grid-template-columns: 0.4fr 0.6fr;
}
.sb-two-cols__grid.ratio-60-40 {
grid-template-columns: 0.6fr 0.4fr;
}
.sb-two-cols__grid.ratio-70-30 {
grid-template-columns: 0.7fr 0.3fr;
}
.sb-two-cols__grid.gap-small {
gap: 20px;
}
.sb-two-cols__grid.gap-medium {
gap: 36px;
}
.sb-two-cols__grid.gap-large {
gap: 56px;
}
.sb-two-cols__grid.valign-top {
align-items: start;
}
.sb-two-cols__grid.valign-center {
align-items: center;
}
.sb-two-cols__grid.valign-bottom {
align-items: end;
}
.sb-two-cols__col {
min-width: 0;
}
.sb-two-cols__text,
.sb-two-cols__media {
display: none;
}
.sb-two-cols__text.col-type-text,
.sb-two-cols__media.col-type-image {
display: block;
}
.sb-two-cols__media-frame {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.sb-two-cols__media-image,
.sb-two-cols__media-image-right {
width: 100%;
height: 100%;
}
/* Leere Sprachinhalte erzeugen keine sichtbaren Elemente. */
.sb-two-cols__headline:empty,
.sb-two-cols__col-headline:empty,
.sb-two-cols__text-content:empty,
.sb-two-cols__text .custom__button:empty {
display: none;
}
@media (max-width: 768px) {
.sb-two-cols {
padding-left: 16px;
padding-right: 16px;
}
.sb-two-cols__grid {
grid-template-columns: 1fr !important;
}
.sb-two-cols__grid.mobile-left-first .sb-two-cols__col:nth-child(1) {
order: 1;
}
.sb-two-cols__grid.mobile-left-first .sb-two-cols__col:nth-child(2) {
order: 2;
}
.sb-two-cols__grid.mobile-right-first .sb-two-cols__col:nth-child(1) {
order: 2;
}
.sb-two-cols__grid.mobile-right-first .sb-two-cols__col:nth-child(2) {
order: 1;
}
}
/* =========================================================
SMARTBOX: BUTTON
========================================================= */
.sb-button {
padding-top: var(--sb-padding-top, 0px);
padding-bottom: var(--sb-padding-bottom, 0px);
padding-left: 24px;
padding-right: 24px;
box-sizing: border-box;
}
/* =========================================================
INNERER BEREICH
========================================================= */
.sb-button__inner {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: flex;
box-sizing: border-box;
}
/* =========================================================
AUSRICHTUNG
========================================================= */
.sb-button__inner.align-left {
justify-content: flex-start;
}
.sb-button__inner.align-center {
justify-content: center;
}
.sb-button__inner.align-right {
justify-content: flex-end;
}
/* =========================================================
BUTTON
Gestaltung über die bestehenden Theme-Klassen:
custom__button, primary_btn und secondary_btn
========================================================= */
.sb-button__link {
max-width: 100%;
box-sizing: border-box;
}
.sb-button__inner .custom__button,
.sb-button__inner .custom__button:link,
.sb-button__inner .custom__button:visited,
.sb-button__inner .custom__button:hover,
.sb-button__inner .custom__button:focus {
text-decoration: none;
}
/* =========================================================
AUSBLENDEN
Kein Button oder leerer Button-Text:
gesamte SmartBox inklusive Abständen ausblenden
========================================================= */
.sb-button__link.is-hidden,
.sb-button__link:empty {
display: none;
}
.sb-button:has(.sb-button__link.is-hidden),
.sb-button:has(.sb-button__link:empty) {
display: none;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 768px) {
.sb-button {
padding-left: 16px;
padding-right: 16px;
}
}
/* =========================================================
SMARTBOX: ERFOLGSGESCHICHTEN
========================================================= */
.sb-success-stories {
background-color: var(--sb-success-stories-bg-color, #eef2f5);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding-left: 24px;
padding-right: 24px;
}
.sb-success-stories.bg-color {
background-image: none !important;
}
/* =========================================================
INNER
========================================================= */
.sb-success-stories__inner {
width: 100%;
max-width: 1200px;
min-width: 0;
margin: 0 auto;
display: grid;
gap: 44px;
}
.sb-success-stories .text-content {
margin: 0 !important;
}
/* =========================================================
ÜBERSCHRIFT
========================================================= */
.sb-success-stories__title-wrap {
width: 100%;
max-width: 760px;
min-width: 0;
display: grid;
gap: 16px;
}
.sb-success-stories__title-wrap.align-left {
text-align: left;
margin-right: auto;
}
.sb-success-stories__title-wrap.align-center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.sb-success-stories__title-wrap.align-right {
text-align: right;
margin-left: auto;
}
.sb-success-stories__headline,
.sb-success-stories__subheadline {
margin: 0;
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
hyphens: auto;
}
/* =========================================================
SLIDER WRAPPER
========================================================= */
.sb-success-stories__slider-wrap {
width: 100%;
max-width: 100%;
min-width: 0;
}
/* =========================================================
SLIDER
========================================================= */
.sb-success-stories__slider {
position: relative;
width: 100%;
max-width: 920px;
min-width: 0;
margin: 0 auto;
padding: 0 86px 72px;
box-sizing: border-box;
opacity: 0;
}
.sb-success-stories__slider.is-ready {
opacity: 1;
transition: opacity 0.5s ease;
}
/* =========================================================
VIEWPORT
========================================================= */
.sb-success-stories__viewport {
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
}
/* =========================================================
TRACK
Explizit horizontal, damit hier auch keine andere
globale Flex-Regel dazwischenfunken kann.
========================================================= */
.sb-success-stories__track {
width: 100%;
min-width: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
will-change: transform;
transition: transform 0.45s ease;
}
/* =========================================================
SLIDES
========================================================= */
.sb-success-stories__slide {
flex: 0 0 100%;
width: 100%;
min-width: 100%;
max-width: 100%;
gap: 0;
row-gap: 0;
padding-top: 80px;
box-sizing: border-box;
}
/* =========================================================
KARTE
========================================================= */
.sb-success-stories__card {
position: relative;
width: min(100%, 600px);
max-width: 100%;
min-width: 0;
margin: 0 auto;
display: grid;
gap: 0;
row-gap: 0;
padding-bottom: 0;
box-sizing: border-box;
}
.sb-success-stories__card.is-without-customer {
padding-bottom: 0;
}
.sb-success-stories__card.is-without-image
.sb-success-stories__review {
margin-bottom: 0 !important;
padding-top: 72px;
}
/* =========================================================
BILD
========================================================= */
.sb-success-stories__image-wrap {
position: absolute;
top: 0;
left: 50%;
width: 160px;
height: 160px;
transform: translate(-50%, -50%);
border-radius: 50%;
overflow: hidden;
z-index: 2;
}
.sb-success-stories__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* =========================================================
ZITAT / TEXT
========================================================= */
.sb-success-stories__review {
min-width: 0;
min-height: 360px;
padding: 110px 60px 92px;
box-sizing: border-box;
background:
var(
--sb-success-stories-card-bg,
#ededed
);
text-align: center;
display: grid;
align-content: center;
overflow-wrap: anywhere;
box-shadow:
0 4px 20px
rgba(0, 0, 0, 0.1);
}
.sb-success-stories__card.is-without-customer
.sb-success-stories__review {
padding-bottom: 40px;
}
.sb-success-stories__review > :first-child {
margin-top: 0;
}
.sb-success-stories__review > :last-child {
margin-bottom: 0 !important;
}
/* =========================================================
KUNDENBEREICH
Kein eigener gelber Hintergrund mehr.
Der eigentliche Link benutzt den globalen Button.
========================================================= */
.sb-success-stories
.sb-success-stories__customer {
position: static;
width: 100%;
margin: 0;
padding: 0 !important;
background: transparent !important;
box-sizing: border-box;
display: block;
text-align: center;
}
/* =========================================================
KUNDEN-BUTTON
Nutzt weiterhin:
.custom__button
.primary_btn
Hier überschreiben wir nur die Breite.
========================================================= */
.sb-success-stories__customer-link.custom__button {
display: flex;
width: 100%;
max-width: none;
min-height:
var(--button-min-height);
margin: 0;
padding:
var(--button-padding-y)
var(--button-padding-x);
box-sizing: border-box;
justify-content: center;
align-items: center;
}
/* =========================================================
FALLBACK OHNE LINK
========================================================= */
.sb-success-stories__customer-name {
display: block;
width: 100%;
margin: 0;
padding: 12px 20px;
box-sizing: border-box;
background:
var(
--sb-success-stories-customer-bg,
#d8a229
);
color:
var(
--sb-success-stories-customer-color,
#111111
);
font-family:
"Roboto Slab",
serif;
font-size: 20px;
font-weight: 400;
line-height: 1.2;
text-align: center;
}
/* =========================================================
NAVIGATIONSPFEILE
========================================================= */
.sb-success-stories__nav {
position: absolute;
top: 50%;
bottom: auto;
transform: translateY(-50%);
width: 42px;
height: 42px;
padding: 0;
border: 0;
border-radius: 50%;
background:
var(
--sb-success-stories-nav-bg,
#ffffff
);
box-shadow:
0 2px 10px
rgba(0, 0, 0, 0.12);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
color: #000000;
line-height: 1;
transition:
transform 0.2s ease,
opacity 0.2s ease,
box-shadow 0.2s ease;
}
.sb-success-stories__nav--prev {
left: 16px;
}
.sb-success-stories__nav--next {
right: 16px;
}
.sb-success-stories__nav span {
display: block;
line-height: 1;
font-size: 28px;
font-weight: 400;
transform: translateY(-1px);
}
.sb-success-stories__nav:hover {
transform:
translateY(-50%)
scale(1.05);
box-shadow:
0 4px 14px
rgba(0, 0, 0, 0.16);
}
.sb-success-stories__nav:focus {
opacity: 1;
}
.sb-success-stories__nav:focus-visible {
outline: 2px solid #111111;
outline-offset: 3px;
}
/* =========================================================
PAGINATION
========================================================= */
.sb-success-stories__pagination {
position: relative;
margin-top: 18px;
display: flex;
justify-content: center;
align-items: center;
gap: 13px;
}
.sb-success-stories__pagination-button {
appearance: none;
-webkit-appearance: none;
display: block;
width: 9px;
min-width: 9px;
max-width: 9px;
height: 9px;
min-height: 9px;
max-height: 9px;
padding: 0;
margin: 0;
border: 0;
border-radius: 50%;
background:
var(
--sb-success-stories-pagination-inactive,
#000000
);
opacity: 1;
flex: 0 0 9px;
box-sizing: border-box;
cursor: pointer;
}
.sb-success-stories__pagination-button.is-active {
width: 13px;
min-width: 13px;
max-width: 13px;
height: 13px;
min-height: 13px;
max-height: 13px;
flex: 0 0 13px;
background: transparent;
border:
2px solid
var(
--sb-success-stories-pagination-active,
#000000
);
border-radius: 50%;
}
.sb-success-stories__pagination-button:hover {
opacity: 0.5;
}
/* =========================================================
PULSE
========================================================= */
.sb-success-stories__card.is-pulsing {
animation:
sb-success-stories-card-pulse
0.3s ease;
}
@keyframes sb-success-stories-card-pulse {
0% {
transform: scale(1.02);
}
100% {
transform: scale(1);
}
}
/* =========================================================
NUR EINE ERFOLGSGESCHICHTE
========================================================= */
.sb-success-stories__slider.is-single {
padding-left: 0;
padding-right: 0;
}
.sb-success-stories__slider.is-single
.sb-success-stories__nav,
.sb-success-stories__slider.is-single
.sb-success-stories__pagination {
display: none;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.sb-success-stories {
padding-left: 20px;
padding-right: 20px;
}
.sb-success-stories__slider {
padding:
0 72px 68px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 768px) {
.sb-success-stories {
padding-left: 20px;
padding-right: 20px;
}
.sb-success-stories__inner {
gap: 34px;
min-width: 0;
}
.sb-success-stories__title-wrap {
max-width: 100%;
min-width: 0;
}
.sb-success-stories__headline {
font-size: 32px !important;
line-height: 1.18 !important;
}
.sb-success-stories__subheadline {
font-size: 18px !important;
line-height: 1.45 !important;
}
.sb-success-stories__slider-wrap,
.sb-success-stories__slider,
.sb-success-stories__viewport {
min-width: 0;
max-width: 100%;
}
.sb-success-stories__slider {
padding:
0 0 72px;
}
.sb-success-stories__slide {
padding-top: 64px;
}
.sb-success-stories__image-wrap {
width: 120px;
height: 120px;
}
.sb-success-stories__review {
min-height: 300px;
padding:
84px 28px 76px;
}
.sb-success-stories__customer-name {
font-size: 18px;
}
.sb-success-stories__pagination {
display: none;
}
}
/* =========================================================
MOBILE – PFEILE UNTEN
========================================================= */
@media (max-width: 620px) {
.sb-success-stories__nav {
top: auto;
bottom: 8px;
transform: none;
}
.sb-success-stories__nav:hover {
transform: scale(1.05);
}
.sb-success-stories__nav--prev {
left: calc(50% - 50px);
right: auto;
}
.sb-success-stories__nav--next {
right: calc(50% - 50px);
left: auto;
}
}
/* =========================================================
KLEINES MOBILE
========================================================= */
@media (max-width: 550px) {
.sb-success-stories__slider {
padding-top: 0;
}
.sb-success-stories__slide {
padding-top: 52px;
}
.sb-success-stories__image-wrap {
width: 100px;
height: 100px;
top: 0;
}
.sb-success-stories__review {
min-height: 260px;
padding:
68px 20px 64px;
}
.sb-success-stories__customer-name {
font-size: 14px;
}
}
/* =========================================================
SEHR KLEINES MOBILE
========================================================= */
@media (max-width: 425px) {
.sb-success-stories {
padding-left: 16px;
padding-right: 16px;
}
.sb-success-stories__headline {
font-size: 28px !important;
}
.sb-success-stories__subheadline {
font-size: 16px !important;
}
.sb-success-stories__review {
padding-left: 18px;
padding-right: 18px;
}
}
/* =========================================================
LEERER TITELBLOCK
========================================================= */
.sb-success-stories__title-wrap:has(
.sb-success-stories__headline:empty
):has(
.sb-success-stories__subheadline:empty
) {
display: none;
}
/* =========================================================
SMARTBOX: HERO – EINSTIEGSBEREICH
Mehrsprachigkeit wird nativ von inCMS verwaltet.
========================================================= */
/* =========================================================
BASIS
========================================================= */
#main-content {
overflow: hidden;
}
/* =========================================================
HERO WRAPPER
========================================================= */
.sb-hero {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background-size: cover;
background-position: 0;
background-repeat: no-repeat;
height: 738px;
position: relative;
overflow: visible;
}
/* =========================================================
KLEINER DESKTOP
========================================================= */
@media screen and (max-width: 1440px) {
.sb-hero {
height: 550px;
}
}
/* =========================================================
MOBILE HERO
========================================================= */
@media (max-width: 860px) {
.sb-hero {
height: auto;
min-height: 520px;
}
}
/* =========================================================
PANEL
Das weiße Panel ist auf Desktop und Mobil transparent.
Nur der Hintergrund ist transparent.
Text und Button bleiben vollständig deckend.
========================================================= */
.sb-hero__panel {
position: absolute;
left: 60%;
top: 40%;
transform: translateY(-50%);
width: 100%;
max-width: 370px;
aspect-ratio: 1 / 1;
background-color: rgba(255, 255, 255, 0.62);
color: #000000;
padding: 30px;
box-shadow: 0 0 5px 0 #d1d1d1;
box-sizing: border-box;
}
/* =========================================================
PANEL – KLEINER DESKTOP
========================================================= */
@media (max-width: 1440px) {
.sb-hero__panel {
left: unset;
right: 200px;
top: 43%;
}
}
/* =========================================================
PANEL – DESKTOP
========================================================= */
@media (min-width: 861px) {
.sb-hero__panel {
height: 100%;
max-height: 370px;
}
}
/* =========================================================
PANEL – MOBILE
Mobil ist das Panel nicht mehr quadratisch.
Die Höhe ergibt sich automatisch aus dem Inhalt.
========================================================= */
@media (max-width: 860px) {
.sb-hero__panel {
bottom: clamp(16px, 5vw, 24px);
left: 50%;
right: auto;
top: auto;
transform: translateX(-50%);
width: calc(100% - 32px);
max-width: 320px;
height: auto;
max-height: none;
min-height: 0;
aspect-ratio: auto;
padding: clamp(18px, 5vw, 24px);
color: #000000;
box-shadow:
0 2px 10px
rgba(0, 0, 0, 0.12);
z-index: 2;
}
}
/* =========================================================
PANEL INNER
========================================================= */
.sb-hero__panel-inner {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 860px) {
.sb-hero__panel-inner {
height: auto;
min-height: 0;
justify-content: flex-start;
gap: 12px;
}
}
/* =========================================================
DESKTOP-DEKO – GELB
Dezente Transparenz nur auf Desktop.
========================================================= */
.sb-hero__panel-inner::before {
content: "";
position: absolute;
bottom: -115px;
right: -60px;
width: 80px;
height: 80px;
background: rgba(240, 179, 52, 0.85);
pointer-events: none;
}
@media screen and (max-width: 1440px) {
.sb-hero__panel-inner::before {
bottom: -85px;
right: -50px;
width: 50px;
height: 50px;
}
}
/* =========================================================
DESKTOP-DEKO – TÜRKIS
Dezente Transparenz nur auf Desktop.
========================================================= */
.sb-hero__panel-inner::after {
content: "";
position: absolute;
bottom: -30px;
right: -195px;
width: 160px;
height: 160px;
background: rgba(55, 192, 170, 0.85);
pointer-events: none;
}
@media screen and (max-width: 1440px) {
.sb-hero__panel-inner::after {
right: -135px;
width: 100px;
height: 100px;
}
}
/* =========================================================
TYPOGRAFIE
========================================================= */
.sb-hero__title {
margin-top: 0;
margin-bottom: 10px;
font-weight: 400;
}
.sb-hero__subtitle {
font-family: Lato, sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 150%;
}
@media (max-width: 860px) {
.sb-hero__title {
margin: 0;
font-size: clamp(29px, 8vw, 32px);
line-height: 1.12;
}
.sb-hero__subtitle {
margin: 0;
font-size: clamp(15px, 4vw, 16px);
line-height: 1.5;
}
}
/* =========================================================
BUTTON
"is-hidden" = regulärer Wert für "Kein Button"
Alte Hero-Instanzen können noch btn_class = 0 besitzen.
Deshalb behandeln wir auch die Klasse "0" als unsichtbar.
========================================================= */
.sb-hero .custom__button.is-hidden,
.sb-hero .custom__button[class~="0"] {
display: none;
}
/*
* Kein Button-Text = kein leerer Button.
*
* Wichtig:
* Im HTML steht {BTN_TEXT} direkt zwischen den Tags,
* damit :empty bei leerem Inhalt funktioniert.
*/
.sb-hero .custom__button:empty {
display: none;
}
/* =========================================================
BUTTON – MOBILE
Der Button nimmt mobil die komplette verfügbare Breite
innerhalb des Panels ein.
Langer Text darf umbrechen und bleibt innerhalb des Panels.
========================================================= */
@media (max-width: 860px) {
.sb-hero .custom__button:not(.is-hidden):not([class~="0"]) {
width: 100%;
max-width: none;
min-height: 44px;
margin: 4px 0 0;
padding: 8px 12px;
line-height: 1.15;
white-space: normal;
box-sizing: border-box;
}
}
/* =========================================================
MOBILE DEKO
========================================================= */
.sb-hero__mobile-decor {
display: none;
}
@media (max-width: 860px) {
/* Desktop-Deko aus */
.sb-hero__panel-inner::before,
.sb-hero__panel-inner::after {
display: none;
}
/* Mobile-Deko an */
.sb-hero__mobile-decor {
display: block;
position: absolute;
top: 28px;
right: 28px;
width: 110px;
height: 90px;
z-index: 3;
pointer-events: none;
}
.sb-hero__mobile-square {
position: absolute;
display: block;
}
.sb-hero__mobile-square--white {
width: 20px;
height: 20px;
background: #f2f2f2;
top: 40px;
left: 0;
}
.sb-hero__mobile-square--teal {
width: 60px;
height: 60px;
background: #37c0aa;
top: 0;
right: 0;
}
.sb-hero__mobile-square--yellow {
width: 40px;
height: 40px;
background: #f0b334;
top: 60px;
left: 20px;
}
}
/* =========================================================
BARRIEREFREIHEIT – TRANSPARENZ REDUZIEREN
Wenn ein Nutzer reduzierte Transparenz bevorzugt,
wird das Panel wieder vollständig weiß dargestellt.
========================================================= */
@media (prefers-reduced-transparency: reduce) {
.sb-hero__panel {
background-color: #ffffff;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
/* =========================================================
LEERE INHALTE
========================================================= */
.sb-hero__title:empty,
.sb-hero__subtitle:empty {
display: none;
}
html,
body {
overflow-x: clip;
}
.header.stickyheader {
transition: transform 0.7s ease, opacity 0.7s ease;
will-change: transform, opacity;
}
.header.stickyheader.sb-sticky-hidden {
transform: translate3d(0, -100%, 0);
opacity: 0;
pointer-events: none;
}
.header_wrap {
max-width: 100%;
}
/* =========================
IN-CMS FOOTER-SPRACHAUSWAHL AUSBLENDEN
========================= */
.footer #menulangbottom {
display: none !important;
}
/* =========================
HEADER BASIS
========================= */
.sb-il-header {
font-family: "lato-light", "Lato", Arial, sans-serif;
font-weight: 300;
}
.sb-il-header__inner {
min-height: 76px;
padding: 10px 6px 10px 60px;
display: flex;
box-sizing: border-box;
}
/* =========================
LINKE GRUPPE
========================= */
.sb-il-header__brand-group {
display: flex;
}
.sb-il-header__logo-link,
.sb-il-header__logo-link:link,
.sb-il-header__logo-link:visited {
display: inline-flex;
align-items: center;
}
.sb-il-header__logo-image {
height: 46px;
}
/* =========================
RECHTE HAUPTGRUPPE
========================= */
.sb-il-header__nav-group {
min-width: 0;
flex: 1 1 0;
display: flex;
align-items: center;
}
/* =========================
NAVIGATION / MENÜMODUL
========================= */
.sb-il-header__nav {
padding-left: 50px;
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 60px;
}
.sb-il-header__nav .menumod {
margin-left: auto;
}
.sb-il-header__nav #topmenu {
display: flex !important;
justify-content: flex-end;
gap: 5px;
}
.sb-il-header__nav #topmenu > li {
position: relative !important;
margin: 0;
}
.sb-il-header__nav #topmenu > li > a,
.sb-il-header__nav #topmenu > li > a:link,
.sb-il-header__nav #topmenu > li > a:visited {
font-family: "lato-light", "Lato", Arial, sans-serif;
font-weight: 300;
color: #111111;
text-decoration: none;
display: inline-flex;
align-items: center;
line-height: 1.2;
font-size: 14px;
white-space: nowrap;
}
.sb-il-header__nav #topmenu > li.active > a,
.sb-il-header__nav #topmenu > li > a:hover,
.sb-il-header__nav #topmenu > li > a:focus {
color: #111111;
text-decoration: none;
}
/* =========================
SUCHE
========================= */
.sb-il-header .sb-sun-sb__search-form {
flex: 0 0 auto;
}
.sb-il-header .sb-sun-sb__search-input {
font-family: "lato-light", "Lato", Arial, sans-serif;
font-weight: 300;
}
/* =========================
META RECHTS
Sprache + Button-Stack
========================= */
.sb-il-header__meta {
display: inline-flex;
align-items: center;
column-gap: 28px;
margin-left: 28px;
}
.sb-il-header__meta > * {
display: flex;
align-items: center;
}
/* =========================
BUTTONS RECHTS
========================= */
.sb-il-header__button-stack {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
min-width: 170px;
}
.sb-il-header__focus_btn,
.sb-il-header__focus_btn:link,
.sb-il-header__focus_btn:visited {
min-height: 28px;
padding: 0 15px;
border-radius: 999px;
text-decoration: none;
font-family: "lato", "Lato", Arial, sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
box-sizing: border-box;
color: #111111;
}
.sb-il-header__focus_btn--top,
.sb-il-header__focus_btn--top:link,
.sb-il-header__focus_btn--top:visited {
background: #f0b334;
}
.sb-il-header__focus_btn--top:hover,
.sb-il-header__focus_btn--top:focus,
.sb-il-header__focus_btn--top:active {
background: #e7a922;
color: #111111;
text-decoration: none;
}
.sb-il-header__focus_btn--bottom,
.sb-il-header__focus_btn--bottom:link,
.sb-il-header__focus_btn--bottom:visited {
background: #eeeeee;
}
.sb-il-header__focus_btn--bottom:hover,
.sb-il-header__focus_btn--bottom:focus,
.sb-il-header__focus_btn--bottom:active {
background: #e2e2e2;
color: #111111;
text-decoration: none;
}
/* =========================
SPRACHAUSWAHL
========================= */
.sb-il-header__lang-slot {
min-width: auto;
min-height: 42px;
display: flex;
align-items: center;
justify-content: flex-start;
}
/* Originales inCMS-Sprachmenü aus dem Hauptmenü herausnehmen */
.sb-il-header__nav #menulangtop {
visibility: hidden;
pointer-events: none;
}
/* Sprachmenü im vorgesehenen Slot anzeigen */
.sb-il-header__lang-slot #menulangtop {
visibility: visible;
pointer-events: auto;
position: relative;
display: inline-block;
}
/* Geschlossener Sprachbutton */
.sb-il-header #menulangtop .sb-lang-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 40px;
padding: 8px 14px;
border: 0 !important;
outline: 0;
box-shadow: none !important;
border-radius: 0;
background: #ffffff;
cursor: pointer;
font-family: "lato-light", "Lato", Arial, sans-serif;
font-weight: 300;
font-size: 16px;
color: #111111;
line-height: 1;
white-space: nowrap;
}
/* Flagge im geschlossenen Sprachbutton */
.sb-il-header #menulangtop .sb-lang-toggle-flag {
width: 16px;
height: 16px;
display: inline-block;
flex: 0 0 auto;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 16px 16px !important;
}
/* Pfeil */
.sb-il-header #menulangtop .sb-lang-toggle-caret {
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-1px);
transition: transform 0.2s ease;
}
.sb-il-header #menulangtop.is-open .sb-lang-toggle-caret {
transform: rotate(225deg) translateY(-1px);
}
/* Dropdown-Box */
.sb-il-header .sb-il-header__lang-slot #menulangtop > ul {
position: absolute !important;
top: calc(100% + 21px) !important;
left: 0 !important;
right: auto !important;
transform: none !important;
z-index: 1000;
width: 180px !important;
max-width: calc(100vw - 16px) !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 0 !important;
list-style: none !important;
background: #ffffff !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
filter: none !important;
border-radius: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Geschlossen ausblenden */
.sb-il-header .sb-il-header__lang-slot #menulangtop:not(.is-open) > ul {
display: none !important;
}
/* Geöffnet anzeigen */
.sb-il-header .sb-il-header__lang-slot #menulangtop.is-open > ul {
display: flex !important;
}
/* Dropdown-Listenelemente */
.sb-il-header .sb-il-header__lang-slot #menulangtop > ul > li {
display: block !important;
float: none !important;
clear: both !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* Dropdown-Links */
.sb-il-header .sb-il-header__lang-slot #menulangtop > ul > li > a {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 44px !important;
margin: 0 !important;
padding: 0 14px 0 42px !important;
box-sizing: border-box !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
background-repeat: no-repeat !important;
background-position: 14px center !important;
background-size: 16px 16px !important;
font-family: "lato-light", "Lato", Arial, sans-serif !important;
font-weight: 300 !important;
font-size: 16px !important;
line-height: 1.2 !important;
color: #111111 !important;
text-align: left !important;
text-decoration: none !important;
}
/* Aktiv + Hover */
.sb-il-header .sb-il-header__lang-slot #menulangtop > ul > li.active > a,
.sb-il-header .sb-il-header__lang-slot #menulangtop > ul > li > a:hover,
.sb-il-header .sb-il-header__lang-slot #menulangtop > ul > li > a:focus-visible {
background-color: #f3f3f3 !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
font-weight: 300 !important;
}
/* =========================
HAUPTMENÜ DROPDOWNS
Desktop
========================= */
.sb-il-header__nav #topmenu > li > ul.dropdown {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: auto !important;
transform: none !important;
z-index: 1000 !important;
width: 260px !important;
margin: 0 !important;
padding: 27px 0 0 0 !important;
display: none !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 0 !important;
list-style: none !important;
background: transparent !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
filter: none !important;
border-radius: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
.sb-il-header__nav #topmenu > li:hover > ul.dropdown,
.sb-il-header__nav #topmenu > li:focus-within > ul.dropdown {
display: flex !important;
}
.sb-il-header__nav #topmenu > li > ul.dropdown > li {
display: block !important;
float: none !important;
clear: both !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: #ffffff !important;
}
.sb-il-header__nav #topmenu > li > ul.dropdown > li > a,
.sb-il-header__nav #topmenu > li > ul.dropdown > li > a:link,
.sb-il-header__nav #topmenu > li > ul.dropdown > li > a:visited {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 44px !important;
height: auto !important;
margin: 0 !important;
padding: 0 14px !important;
box-sizing: border-box !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
background: #ffffff !important;
font-family: "lato-light", "Lato", Arial, sans-serif !important;
font-weight: 300 !important;
font-size: 16px !important;
line-height: 1.2 !important;
color: #111111 !important;
text-align: left !important;
text-decoration: none !important;
white-space: normal !important;
}
.sb-il-header__nav #topmenu > li > ul.dropdown > li.active > a,
.sb-il-header__nav #topmenu > li > ul.dropdown > li > a:hover,
.sb-il-header__nav #topmenu > li > ul.dropdown > li > a:focus-visible {
background-color: #f3f3f3 !important;
color: #111111 !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
font-weight: 300 !important;
text-decoration: none !important;
}
/* Alte inCMS-Pfeile im Desktop-Dropdown ausblenden */
.sb-il-header__nav #topmenu > li > ul.dropdown .sub_prev,
.sb-il-header__nav #topmenu > li > ul.dropdown .span_after,
.sb-il-header__nav #topmenu > li > ul.dropdown .span_before,
.sb-il-header__nav #topmenu > li > ul.dropdown .sub_next,
.sb-il-header__nav #topmenu > li > ul.dropdown .arrow-left,
.sb-il-header__nav #topmenu > li > ul.dropdown .arrow-right {
display: none !important;
}
/* Falls inCMS Trennlinien über Pseudo-Elemente setzt */
.sb-il-header__nav #topmenu > li > ul.dropdown > li::before,
.sb-il-header__nav #topmenu > li > ul.dropdown > li::after,
.sb-il-header__nav #topmenu > li > ul.dropdown > li > a::before,
.sb-il-header__nav #topmenu > li > ul.dropdown > li > a::after {
display: none !important;
content: none !important;
}
/* Alte inCMS-Indikatoren an den Hauptmenüpunkten ausblenden */
.sb-il-header__nav #topmenu > li > .span_before,
.sb-il-header__nav #topmenu > li > .span_after,
.sb-il-header__nav #topmenu > li > .sub_prev,
.sb-il-header__nav #topmenu > li > .sub_next,
.sb-il-header__nav #topmenu > li > .arrow-left,
.sb-il-header__nav #topmenu > li > .arrow-right,
.sb-il-header__nav #topmenu > li > a .span_before,
.sb-il-header__nav #topmenu > li > a .span_after,
.sb-il-header__nav #topmenu > li > a .sub_prev,
.sb-il-header__nav #topmenu > li > a .sub_next,
.sb-il-header__nav #topmenu > li > a .arrow-left,
.sb-il-header__nav #topmenu > li > a .arrow-right {
display: none !important;
}
/* =========================
RESPONSIVE DESKTOP/LAPTOP
========================= */
/* Große Laptops / kleinere Desktop-Bildschirme */
@media (max-width: 1700px) {
.sb-il-header__inner {
padding: 8px 18px 8px 28px;
gap: 16px;
}
.sb-il-header__logo-image {
height: 42px;
}
.sb-il-header__nav {
min-width: 0;
padding-left: 28px;
gap: 26px;
}
.sb-il-header__nav .menumod {
min-width: 0;
}
.sb-il-header__nav #topmenu {
gap: 4px;
}
.sb-il-header .sb-sun-sb__search-form {
width: 180px;
max-width: 180px;
min-width: 130px;
flex: 0 1 180px;
}
.sb-il-header .sb-sun-search-input-wrapper,
.sb-il-header .sb-sun-sb__search-input {
width: 100%;
box-sizing: border-box;
}
.sb-il-header__meta {
column-gap: 16px;
margin-left: 16px;
}
.sb-il-header #menulangtop .sb-lang-toggle {
padding-left: 10px;
padding-right: 10px;
gap: 8px;
font-size: 15px;
}
.sb-il-header__button-stack {
min-width: 148px;
}
.sb-il-header__focus_btn,
.sb-il-header__focus_btn:link,
.sb-il-header__focus_btn:visited {
padding-left: 12px;
padding-right: 12px;
}
}
/* Klassische Laptop-Auflösung */
@media (max-width: 1500px) {
.sb-il-header__inner {
padding: 8px 14px;
gap: 12px;
}
.sb-il-header__logo-image {
height: 38px;
}
.sb-il-header__nav {
padding-left: 18px;
gap: 16px;
}
.sb-il-header__nav #topmenu {
gap: 3px;
}
.sb-il-header__nav #topmenu > li > a,
.sb-il-header__nav #topmenu > li > a:link,
.sb-il-header__nav #topmenu > li > a:visited {
font-size: 13px;
}
.sb-il-header .sb-sun-sb__search-form {
width: 150px;
max-width: 150px;
min-width: 115px;
flex-basis: 150px;
}
.sb-il-header__meta {
column-gap: 11px;
margin-left: 11px;
}
.sb-il-header #menulangtop .sb-lang-toggle {
padding-left: 8px;
padding-right: 8px;
gap: 7px;
font-size: 14px;
}
.sb-il-header__button-stack {
min-width: 136px;
}
.sb-il-header__focus_btn,
.sb-il-header__focus_btn:link,
.sb-il-header__focus_btn:visited {
padding-left: 9px;
padding-right: 9px;
font-size: 12px;
}
}
/* Sehr schmaler Desktop / kleines Laptopfenster */
@media (max-width: 1320px) {
.sb-il-header__inner {
padding-left: 10px;
padding-right: 10px;
gap: 8px;
}
.sb-il-header__logo-image {
height: 34px;
}
.sb-il-header__nav {
padding-left: 10px;
gap: 10px;
}
.sb-il-header__nav #topmenu {
gap: 2px;
}
.sb-il-header__nav #topmenu > li > a,
.sb-il-header__nav #topmenu > li > a:link,
.sb-il-header__nav #topmenu > li > a:visited {
font-size: 12px;
}
.sb-il-header .sb-sun-sb__search-form {
width: 120px;
max-width: 120px;
min-width: 100px;
flex-basis: 120px;
}
.sb-il-header__meta {
column-gap: 8px;
margin-left: 8px;
}
.sb-il-header #menulangtop .sb-lang-toggle {
padding-left: 6px;
padding-right: 6px;
gap: 6px;
font-size: 13px;
}
.sb-il-header__button-stack {
min-width: 124px;
}
.sb-il-header__focus_btn,
.sb-il-header__focus_btn:link,
.sb-il-header__focus_btn:visited {
padding-left: 7px;
padding-right: 7px;
font-size: 11px;
}
}
/* Zwischenstufe vor dem mobilen Header */
@media (max-width: 1220px) {
.sb-il-header__inner {
flex-wrap: wrap;
row-gap: 14px;
}
.sb-il-header__nav-group {
width: 100%;
order: 3;
justify-content: space-between;
}
.sb-il-header__nav {
justify-content: flex-start;
overflow: visible;
padding-left: 0;
gap: 20px;
}
.sb-il-header__nav .menumod {
margin-left: 0;
}
.sb-il-header__nav .ym-hlist,
.sb-il-header__nav #topmenu {
justify-content: flex-start;
flex-wrap: wrap;
row-gap: 10px;
column-gap: 4px;
}
.sb-il-header__meta {
margin-left: 16px;
}
}
/* =========================
MOBILE SUBMENU TOGGLE
Desktop standardmaessig ausgeblendet
========================= */
.sb-il-mobile-submenu-toggle {
display: none;
}
/* =========================
MOBILE HEADER
========================= */
@media (max-width: 860px) {
.sb-il-header {
position: relative;
z-index: 1000;
background: #ffffff;
}
.sb-il-header__inner {
min-height: 64px;
padding: 12px 14px;
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 8px;
position: relative;
z-index: 1002;
background: #ffffff;
box-sizing: border-box;
}
/* 1. Logo */
.sb-il-header__brand-group {
order: 1;
flex: 0 0 auto;
width: auto;
display: flex;
align-items: center;
}
.sb-il-header__logo-image {
height: 28px;
max-width: 105px;
object-fit: contain;
}
/* Rechte Gruppe */
.sb-il-header__nav-group {
order: 2;
flex: 1 1 auto;
width: auto;
min-width: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
/* 2. Button */
.sb-il-header__meta {
order: 1;
width: auto;
margin-left: 0;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: flex-end;
gap: 0;
}
.sb-il-header__lang-switch {
display: none !important;
}
.sb-il-header__button-stack {
width: auto;
min-width: 0;
max-width: none;
display: flex;
flex-direction: row;
gap: 0;
}
.sb-il-header__focus_btn--top {
display: inline-flex !important;
min-height: 26px;
padding: 0 14px;
font-size: 11px;
white-space: nowrap;
}
.sb-il-header__focus_btn--bottom {
display: none !important;
}
/* 3 + 4 liegen in nav */
.sb-il-header__nav {
order: 2;
width: auto;
flex: 0 0 auto;
padding-left: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
/* Suche mobil als Icon */
.sb-il-header .sb-sun-sb__search-form {
order: 2;
width: 28px;
height: 28px;
min-width: 28px;
flex: 0 0 28px;
display: flex;
align-items: center;
justify-content: center;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.sb-il-header .sb-sun-search-input-wrapper {
width: 28px;
height: 28px;
position: relative;
background: transparent;
}
.sb-il-header .sb-sun-sb__search-input {
width: 28px;
height: 28px;
min-height: 28px;
padding: 0;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
font-size: 0;
color: transparent;
cursor: pointer;
}
/* Stabile mobile Lupe als ein zusammenhaengendes SVG-Icon */
.sb-il-header .sb-sun-search-input-wrapper::before {
display: none !important;
content: none !important;
}
.sb-il-header .sb-sun-search-input-wrapper::after {
content: "";
position: absolute;
left: 5px;
top: 5px;
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml;charset=utf-8,");
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
transform: none;
pointer-events: none;
}
/* Menü-Trigger/Burger */
.sb-il-header__nav #nav-trigger {
order: 1;
display: flex !important;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin: 0;
cursor: pointer;
position: relative;
z-index: 1003;
}
.sb-il-header__nav #nav-trigger span {
font-size: 0;
display: flex;
align-items: center;
justify-content: center;
}
.sb-il-header__nav #nav-trigger .border-menu {
display: block;
width: 22px;
height: 14px;
position: relative;
border-top: 2px solid #111111;
border-bottom: 2px solid #111111;
box-sizing: border-box;
}
.sb-il-header__nav #nav-trigger .border-menu::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 22px;
height: 2px;
background: #111111;
transform: translateY(-50%);
}
/* Desktop-Menü mobil geschlossen */
.sb-il-header__nav #topmenu {
display: none !important;
}
/* Mobile Menü geöffnet */
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu {
position: fixed !important;
top: 69px !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
margin: 0 !important;
padding: 18px 24px 22px !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0 !important;
background: #ffffff !important;
list-style: none !important;
box-sizing: border-box !important;
z-index: 9999 !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
height: auto !important;
max-height: calc(100vh - 69px) !important;
overscroll-behavior: contain;
}
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu > li {
position: relative !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
}
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu > li > a,
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu > li > a:link,
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu > li > a:visited {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 42px !important;
padding: 0 !important;
background: #ffffff !important;
font-family: "lato-light", "Lato", Arial, sans-serif !important;
font-weight: 300 !important;
font-size: 16px !important;
line-height: 1.2 !important;
color: #111111 !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu > li > a:hover,
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu > li > a:focus {
background: #f3f3f3 !important;
color: #111111 !important;
}
/* Hauptlink mit Untermenü: Platz für den separaten Pfeil-Button */
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu > li.has-mobile-submenu > a,
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu > li.has-mobile-submenu > a:link,
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu > li.has-mobile-submenu > a:visited {
padding-right: 48px !important;
}
/* Separater Button zum Öffnen und Schließen der Unterseiten */
.sb-il-header.is-mobile-menu-open .sb-il-mobile-submenu-toggle {
position: absolute !important;
top: 0 !important;
right: 0 !important;
width: 44px !important;
height: 42px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
color: #111111 !important;
-webkit-appearance: none !important;
appearance: none !important;
z-index: 2 !important;
}
.sb-il-header.is-mobile-menu-open .sb-il-mobile-submenu-toggle::before {
content: "";
display: block;
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transform-origin: center;
transition: transform 0.2s ease;
}
.sb-il-header.is-mobile-menu-open .has-mobile-submenu.is-mobile-submenu-open > .sb-il-mobile-submenu-toggle::before {
transform: rotate(225deg);
}
.sb-il-header.is-mobile-menu-open .sb-il-mobile-submenu-toggle:hover {
background: #f3f3f3 !important;
}
.sb-il-header.is-mobile-menu-open .sb-il-mobile-submenu-toggle:focus-visible {
outline: 2px solid #111111 !important;
outline-offset: -2px !important;
}
/* Unterseiten sind mobil ein echtes Accordion innerhalb des Hauptmenüs */
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu > li.has-mobile-submenu > ul.dropdown {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
z-index: auto !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 0 8px 18px !important;
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
max-height: 0 !important;
pointer-events: none !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 0 !important;
list-style: none !important;
background: #ffffff !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
filter: none !important;
border-radius: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu > li.has-mobile-submenu.is-mobile-submenu-open > ul.dropdown {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
pointer-events: auto !important;
}
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu > li.has-mobile-submenu > ul.dropdown > li {
display: block !important;
float: none !important;
clear: both !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: #ffffff !important;
}
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu > li.has-mobile-submenu > ul.dropdown > li > a,
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu > li.has-mobile-submenu > ul.dropdown > li > a:link,
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu > li.has-mobile-submenu > ul.dropdown > li > a:visited {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 40px !important;
height: auto !important;
margin: 0 !important;
padding: 0 12px !important;
box-sizing: border-box !important;
border: 0 !important;
border-radius: 0 !important;
background: #ffffff !important;
box-shadow: none !important;
font-family: "lato-light", "Lato", Arial, sans-serif !important;
font-weight: 300 !important;
font-size: 15px !important;
line-height: 1.3 !important;
color: #444444 !important;
text-align: left !important;
text-decoration: none !important;
white-space: normal !important;
}
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu > li.has-mobile-submenu > ul.dropdown > li.active > a,
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu > li.has-mobile-submenu > ul.dropdown > li > a:hover,
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu > li.has-mobile-submenu > ul.dropdown > li > a:focus-visible {
background: #f3f3f3 !important;
color: #111111 !important;
}
/* Alte inCMS-Pfeile mobil ausblenden */
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu .span_before,
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu .span_after,
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu .sub_prev,
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu .sub_next,
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu .arrow-left,
.sb-il-header.is-mobile-menu-open .sb-il-header__nav #topmenu .arrow-right {
display: none !important;
}
}
/* =========================
MOBILE SPRACHAUSWAHL IM HAMBURGER-MENÜ
========================= */
@media (max-width: 860px) {
/*
* Das echte inCMS-Sprachmenü wird per JavaScript als letzter
* Menüpunkt in #topmenu verschoben. Der Desktop-Slot bleibt
* im mobilen Header bewusst ausgeblendet.
*/
.sb-il-header__nav #topmenu > li.sb-il-header__mobile-lang {
display: block !important;
width: 100% !important;
margin: 10px 0 0 !important;
padding: 10px 0 0 !important;
border-top: 1px solid #e3e3e3 !important;
background: #ffffff !important;
box-sizing: border-box !important;
}
/* Die Desktop-Regel versteckt #menulangtop innerhalb der Navigation.
Im mobilen Sprach-Menüpunkt muss es wieder vollständig aktiv sein. */
.sb-il-header__nav #topmenu > li.sb-il-header__mobile-lang #menulangtop {
visibility: visible !important;
pointer-events: auto !important;
position: relative !important;
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Aktive Sprache als normale Menüzeile */
.sb-il-header__nav #topmenu > li.sb-il-header__mobile-lang #menulangtop .sb-lang-toggle {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
width: 100% !important;
min-height: 42px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: #ffffff !important;
box-shadow: none !important;
font-family: "lato-light", "Lato", Arial, sans-serif !important;
font-weight: 300 !important;
font-size: 16px !important;
line-height: 1.2 !important;
color: #111111 !important;
text-align: left !important;
cursor: pointer !important;
box-sizing: border-box !important;
}
.sb-il-header__nav #topmenu > li.sb-il-header__mobile-lang #menulangtop .sb-lang-toggle:hover,
.sb-il-header__nav #topmenu > li.sb-il-header__mobile-lang #menulangtop .sb-lang-toggle:focus-visible {
background: #f3f3f3 !important;
}
.sb-il-header__nav #topmenu > li.sb-il-header__mobile-lang #menulangtop .sb-lang-toggle:focus-visible {
outline: 2px solid #111111 !important;
outline-offset: 2px !important;
}
/* Caret an den rechten Rand der Zeile */
.sb-il-header__nav #topmenu > li.sb-il-header__mobile-lang #menulangtop .sb-lang-toggle-caret {
margin-left: auto !important;
margin-right: 4px !important;
}
/* Sprachliste mobil innerhalb des Menüs aufklappen statt als
absolut positioniertes Desktop-Dropdown darüberzulegen. */
.sb-il-header__nav #topmenu > li.sb-il-header__mobile-lang #menulangtop > ul {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
z-index: auto !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 0 0 26px !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 0 !important;
list-style: none !important;
background: #ffffff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
filter: none !important;
overflow: visible !important;
box-sizing: border-box !important;
}
.sb-il-header__nav #topmenu > li.sb-il-header__mobile-lang #menulangtop:not(.is-open) > ul {
display: none !important;
}
.sb-il-header__nav #topmenu > li.sb-il-header__mobile-lang #menulangtop.is-open > ul {
display: flex !important;
}
.sb-il-header__nav #topmenu > li.sb-il-header__mobile-lang #menulangtop > ul > li {
display: block !important;
float: none !important;
clear: both !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: #ffffff !important;
}
.sb-il-header__nav #topmenu > li.sb-il-header__mobile-lang #menulangtop > ul > li > a,
.sb-il-header__nav #topmenu > li.sb-il-header__mobile-lang #menulangtop > ul > li > a:link,
.sb-il-header__nav #topmenu > li.sb-il-header__mobile-lang #menulangtop > ul > li > a:visited {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 40px !important;
margin: 0 !important;
padding: 0 0 0 28px !important;
background-color: #ffffff !important;
background-repeat: no-repeat !important;
background-position: 0 center !important;
background-size: 16px 16px !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: "lato-light", "Lato", Arial, sans-serif !important;
font-weight: 300 !important;
font-size: 15px !important;
line-height: 1.2 !important;
color: #111111 !important;
text-align: left !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
.sb-il-header__nav #topmenu > li.sb-il-header__mobile-lang #menulangtop > ul > li.active > a,
.sb-il-header__nav #topmenu > li.sb-il-header__mobile-lang #menulangtop > ul > li > a:hover,
.sb-il-header__nav #topmenu > li.sb-il-header__mobile-lang #menulangtop > ul > li > a:focus-visible {
background-color: #f3f3f3 !important;
color: #111111 !important;
}
}
/* =========================================================
MOBILE SEARCH – OPEN STATE
========================================================= */
.sb-il-header .sb-il-mobile-search-submit,
.sb-il-header .sb-il-mobile-search-close {
display: none !important;
}
@media (max-width: 860px) {
/* Restlichen Header im Suchmodus ausblenden */
.sb-il-header.is-mobile-search-open .sb-il-header__brand-group,
.sb-il-header.is-mobile-search-open .sb-il-header__meta,
.sb-il-header.is-mobile-search-open .sb-il-header__nav #nav-trigger {
display: none !important;
}
/* Verfuegbaren Platz fuer die Suche freigeben */
.sb-il-header.is-mobile-search-open .sb-il-header__nav-group {
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
}
.sb-il-header.is-mobile-search-open .sb-il-header__nav {
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
gap: 0 !important;
}
/*
* Das Suchfeld endet 54 px vor dem rechten Rand.
* Dadurch bleibt rechts ausserhalb des Feldes Platz fuer das X.
*/
.sb-il-header.is-mobile-search-open .sb-sun-sb__search-form {
position: absolute !important;
top: 50% !important;
left: 14px !important;
right: 54px !important;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
background: #ffffff !important;
border: 1px solid #d8d8d8 !important;
box-sizing: border-box !important;
transform: translateY(-50%) !important;
z-index: 1010 !important;
overflow: visible !important;
}
.sb-il-header.is-mobile-search-open .sb-sun-sb__search-form:focus-within {
border-color: #a9a9a9 !important;
}
.sb-il-header.is-mobile-search-open .sb-sun-search-input-wrapper {
position: relative !important;
width: 100% !important;
height: 100% !important;
overflow: visible !important;
}
/* Eingabefeld - rechts bleibt nur noch Platz fuer die Lupe */
.sb-il-header.is-mobile-search-open .sb-sun-sb__search-input {
position: relative !important;
z-index: 1 !important;
width: 100% !important;
height: 100% !important;
min-height: 38px !important;
padding: 0 46px 0 14px !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
font-size: 15px !important;
line-height: 1.2 !important;
color: #111111 !important;
cursor: text !important;
box-sizing: border-box !important;
pointer-events: auto !important;
}
.sb-il-header.is-mobile-search-open .sb-sun-sb__search-input::placeholder {
color: #777777 !important;
opacity: 1 !important;
}
/* Die dekorative Lupe des geschlossenen Zustands ausblenden */
.sb-il-header.is-mobile-search-open .sb-sun-search-input-wrapper::before,
.sb-il-header.is-mobile-search-open .sb-sun-search-input-wrapper::after {
display: none !important;
content: none !important;
}
/* Gemeinsame Basis fuer die echten Bedienbuttons */
.sb-il-header.is-mobile-search-open .sb-il-mobile-search-submit,
.sb-il-header.is-mobile-search-open .sb-il-mobile-search-close {
position: absolute !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background-color: transparent !important;
box-shadow: none !important;
display: block !important;
cursor: pointer !important;
z-index: 20 !important;
pointer-events: auto !important;
touch-action: manipulation !important;
-webkit-appearance: none !important;
appearance: none !important;
font-size: 0 !important;
line-height: 0 !important;
}
/*
* Lupe IM Suchfeld.
* Das komplette Symbol ist ein SVG und kann daher nicht mehr
* zwischen Kreis und Griff auseinanderlaufen.
*/
.sb-il-header.is-mobile-search-open .sb-il-mobile-search-submit {
top: 0 !important;
right: 0 !important;
width: 40px !important;
height: 40px !important;
background-image: url("data:image/svg+xml;charset=utf-8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 18px 18px !important;
}
/* X AUSSERHALB des Suchfeldes */
.sb-il-header.is-mobile-search-open .sb-il-mobile-search-close {
top: 50% !important;
right: -40px !important;
width: 28px !important;
height: 28px !important;
transform: translateY(-50%) !important;
background-image: url("data:image/svg+xml;charset=utf-8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 16px 16px !important;
}
/* Alte Pseudo-Icons der Buttons sicher deaktivieren */
.sb-il-header.is-mobile-search-open .sb-il-mobile-search-submit::before,
.sb-il-header.is-mobile-search-open .sb-il-mobile-search-submit::after,
.sb-il-header.is-mobile-search-open .sb-il-mobile-search-close::before,
.sb-il-header.is-mobile-search-open .sb-il-mobile-search-close::after {
display: none !important;
content: none !important;
}
.sb-il-header.is-mobile-search-open .sb-il-mobile-search-submit:hover,
.sb-il-header.is-mobile-search-open .sb-il-mobile-search-close:hover {
background-color: #f3f3f3 !important;
}
.sb-il-header.is-mobile-search-open .sb-il-mobile-search-submit:focus-visible,
.sb-il-header.is-mobile-search-open .sb-il-mobile-search-close:focus-visible {
outline: 2px solid #111111 !important;
outline-offset: 2px !important;
}
/* Suchvorschlaege bleiben exakt unter dem Eingabefeld */
.sb-il-header.is-mobile-search-open .sb-sun-sb__search-suggestions {
top: calc(100% + 6px) !important;
left: -1px !important;
right: -1px !important;
width: auto !important;
z-index: 1020 !important;
}
}
.sb-five-cols {
overflow: hidden;
}
.sb-five-cols.bg-white {
background-color: #ffffff;
}
.sb-five-cols.bg-grey {
background-color: #ededed;
}
.sb-five-cols__inner {
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
padding-left: 24px;
padding-right: 24px;
}
.sb-five-cols__title-wrap {
max-width: 760px;
margin-left: auto;
margin-right: auto;
display: grid;
gap: 16px;
}
.sb-five-cols__title-wrap.align-left {
text-align: left;
margin-left: 0;
margin-right: auto;
}
.sb-five-cols__title-wrap.align-center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.sb-five-cols__title-wrap.align-right {
text-align: right;
margin-left: auto;
margin-right: 0;
}
/* Leere Felder erzeugen keinen Leerraum */
.sb-five-cols__headline:empty,
.sb-five-cols__subheadline:empty,
.sb-five-cols__intro:empty {
display: none;
}
/* Flexbox statt Grid: Karten zentrieren sich abhaengig von der Anzahl sichtbarer Spalten */
.sb-five-cols__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 40px;
margin-top: 48px;
}
/* Eine Spalte komplett ausblenden */
.sb-five-cols__item.sb-col--hidden {
display: none;
}
.sb-five-cols__item {
display: flex;
flex-direction: column;
min-width: 0;
/* Basis = bis zu 5 Karten pro Reihe (4 Luecken * 40px);
Wachstum gedeckelt auf 4er-Breite -> 4 und 5 Karten fuellen die Reihe,
weniger Karten werden zentriert. */
flex: 1 1 calc((100% - 160px) / 5);
max-width: calc((100% - 120px) / 4);
}
.sb-five-cols__media {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
box-sizing: border-box;
}
.sb-five-cols__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.sb-five-cols__img[src=""],
.sb-five-cols__img:not([src]) {
display: none;
}
.sb-five-cols__media:has(.sb-five-cols__img[src=""]),
.sb-five-cols__media:has(.sb-five-cols__img:not([src])) {
display: none;
}
.sb-five-cols__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
gap: 24px;
padding-top: 24px;
}
/* align-content:start -> Titel/Text sitzen oben buendig,
der Button wird per flex ans Kartenende geschoben */
.sb-five-cols__content {
display: grid;
align-content: start;
gap: 16px;
flex: 1 1 auto;
text-align: center;
}
/* Titel reserviert 2 Zeilen -> Text startet in allen Karten auf gleicher Hoehe,
auch wenn eine Ueberschrift umbricht */
.sb-five-cols__content .sb-five-cols__item-title {
margin: 0;
line-height: 1.3;
min-height: 2.6em;
}
/* Globale .text-content-Margin innerhalb der Karte neutralisieren */
.sb-five-cols__content .sb-five-cols__item-text {
margin: 0;
}
/* Leere Titel und Texte erzeugen keinen Leerraum */
.sb-five-cols__item-title:empty,
.sb-five-cols__content .sb-five-cols__item-text:empty {
display: none;
}
.sb-five-cols__button-wrap {
display: flex;
justify-content: center;
width: 100%;
}
/*
* Kein Button-Modus oder kein Buttontext in der aktuellen Sprache:
* kompletten Wrapper entfernen, damit auch kein Flex-Gap uebrig bleibt.
*/
.sb-five-cols__button-wrap:has(.custom__button.is-hidden),
.sb-five-cols__button-wrap:has(.custom__button:empty) {
display: none;
}
.sb-five-cols__button-wrap .custom__button.is-hidden,
.sb-five-cols__button-wrap .custom__button:empty {
display: none;
}
.sb-five-cols__button-wrap .custom__button:link,
.sb-five-cols__button-wrap .custom__button:visited,
.sb-five-cols__button-wrap .custom__button:hover,
.sb-five-cols__button-wrap .custom__button:focus,
.sb-five-cols__button-wrap .custom__button:active {
text-decoration: none;
}
/*
* Sprachschutz:
*
* Eine Karte wird komplett ausgeblendet, wenn sie in der aktuellen
* Sprache weder Titel noch Text noch einen sichtbaren Button besitzt.
*
* Ein gemeinsam genutztes Bild allein reicht damit nicht aus,
* um eine noch nicht uebersetzte Karte anzuzeigen.
*/
.sb-five-cols__item:
has(.sb-five-cols__item-title:empty):
has(.sb-five-cols__item-text:empty):
has(.custom__button:empty),
.sb-five-cols__item:
has(.sb-five-cols__item-title:empty):
has(.sb-five-cols__item-text:empty):
has(.custom__button.is-hidden) {
display: none;
}
.has-scroll-animation.delay-200 {
transition-delay: 0.2s;
}
.has-scroll-animation.delay-300 {
transition-delay: 0.3s;
}
.has-scroll-animation.delay-500 {
transition-delay: 0.5s;
}
.has-scroll-animation.delay-700 {
transition-delay: 0.7s;
}
.has-scroll-animation.delay-900 {
transition-delay: 0.9s;
}
.has-scroll-animation.delay-1100 {
transition-delay: 1.1s;
}
/* Tablet: bis zu 3 pro Reihe */
@media (max-width: 1100px) {
.sb-five-cols__item {
flex: 1 1 calc((100% - 80px) / 3);
max-width: calc((100% - 80px) / 3);
}
}
/* Kleines Tablet / grosses Smartphone: 2 pro Reihe */
@media (max-width: 768px) {
.sb-five-cols__inner {
padding-left: 16px;
padding-right: 16px;
}
.sb-five-cols__grid {
/* row-gap deutlich groesser: Button der Karte -> Bild der naechsten Karte */
gap: 56px 32px;
margin-top: 32px;
}
.sb-five-cols__item {
flex: 1 1 calc((100% - 32px) / 2);
max-width: calc((100% - 32px) / 2);
}
/*
* Fade-Fix mobil:
* 1) Die gestaffelten Delays sind fuer die Desktop-Reihe gedacht.
* 2) fade-left/fade-right/fade-down mobil auf vertikale Bewegung normalisieren.
*/
.sb-five-cols .sb-five-cols__item.has-scroll-animation {
transition-delay: 0s;
}
.sb-five-cols .sb-five-cols__item.has-scroll-animation.fade-left,
.sb-five-cols .sb-five-cols__item.has-scroll-animation.fade-right,
.sb-five-cols .sb-five-cols__item.has-scroll-animation.fade-down {
transform: translateY(24px);
}
.sb-five-cols .sb-five-cols__item.has-scroll-animation.is-visible {
transform: none;
}
}
/* Smartphone: 1 pro Reihe */
@media (max-width: 520px) {
.sb-five-cols__grid {
gap: 56px;
}
.sb-five-cols__item {
flex: 1 1 100%;
max-width: 100%;
}
/* Einspaltig gibt es nichts mehr auszurichten */
.sb-five-cols__content .sb-five-cols__item-title {
min-height: 0;
}
}
/* Ist der komplette Ueberschriftsbereich leer, reserviert er keinen Abstand. */
.sb-five-cols__title-wrap:
has(.sb-five-cols__headline:empty):
has(.sb-five-cols__subheadline:empty):
has(.sb-five-cols__intro:empty) {
display: none;
}
.sb-five-cols__title-wrap:
has(.sb-five-cols__headline:empty):
has(.sb-five-cols__subheadline:empty):
has(.sb-five-cols__intro:empty)
+ .sb-five-cols__grid {
margin-top: 0;
}
/* =========================================================
SMARTBOX: KONTAKTPERSON
Kompakte, flache Variante passend zum inlingua-Theme
========================================================= */
.sb-contact-person {
--sb-padding-top: 50px;
--sb-padding-bottom: 50px;
--contact-hover-color: var(--color-primary, #f0b334);
padding-left: 24px;
padding-right: 24px;
font-family: var(--font-body, "lato-light", "Lato", sans-serif);
color: var(--color-text, #000000);
}
/* =========================================================
HINTERGRUND
========================================================= */
.sb-contact-person.bg-white {
background: var(--color-white, #ffffff);
}
.sb-contact-person.bg-grey {
background: var(--color-bg-muted, #ededed);
}
/* =========================================================
INNERER BEREICH
========================================================= */
.sb-contact-person__inner {
width: 100%;
max-width: 900px;
margin: 0 auto;
display: grid;
row-gap: 24px;
}
/* =========================================================
ÜBERSCHRIFT + SUBHEADLINE
========================================================= */
.sb-contact-person__headline-wrap.title-wrapper {
width: 100%;
margin: 0;
display: grid;
gap: 8px;
}
.sb-contact-person__headline-wrap .sb-contact-person__headline {
margin: 0;
font-weight: 400 !important;
}
.sb-contact-person__subheadline {
margin: 0;
font-family: var(--font-body, "lato-light", "Lato", sans-serif);
font-size: 18px;
font-weight: 300;
line-height: 1.4;
}
.sb-contact-person__headline-wrap.align-left {
text-align: left;
}
.sb-contact-person__headline-wrap.align-center {
text-align: center;
}
.sb-contact-person__headline-wrap.align-right {
text-align: right;
}
.sb-contact-person__headline-wrap.is-hidden {
display: none;
}
.sb-contact-person__headline:empty,
.sb-contact-person__subheadline:empty {
display: none;
}
/*
* Nur wenn Überschrift UND Subheadline in der aktuellen
* Sprache leer sind, verschwindet der komplette Titelbereich.
*/
.sb-contact-person__headline-wrap:
has(.sb-contact-person__headline:empty):
has(.sb-contact-person__subheadline:empty) {
display: none;
}
/* =========================================================
KONTAKTPERSON
========================================================= */
.sb-contact-person__person {
display: grid;
justify-items: center;
gap: 10px;
}
.sb-contact-person__image-wrap {
width: 120px;
height: 120px;
overflow: hidden;
border-radius: 50%;
background: var(--color-bg-muted, #ededed);
}
.sb-contact-person__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.sb-contact-person__image[src=""] {
display: none;
}
.sb-contact-person__image-wrap.is-hidden {
display: none;
}
.sb-contact-person__name {
margin: 0;
font-family: var(--font-ui, "lato", "Lato", sans-serif);
font-size: 16px;
font-weight: 700;
line-height: 1.4;
text-align: center;
color: var(--color-text, #000000);
}
.sb-contact-person__name.is-hidden {
display: none;
}
/* =========================================================
KONTAKTMÖGLICHKEITEN
========================================================= */
.sb-contact-person__methods {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 18px;
}
/* =========================================================
EINZELNE KONTAKTKACHEL
========================================================= */
.sb-contact-person__method {
flex: 0 0 180px;
width: 180px;
min-height: 162px;
padding: 18px 14px 16px;
display: grid;
grid-template-rows:
50px
20px
minmax(42px, auto);
justify-items: center;
align-items: start;
align-content: center;
gap: 7px;
box-sizing: border-box;
border: 0;
border-radius: 0;
box-shadow: none;
text-align: center;
text-decoration: none;
color: var(--color-text, #000000);
transition:
background-color 0.3s ease,
box-shadow 0.3s ease,
color 0.3s ease;
}
/* =========================================================
KACHELHINTERGRUND
========================================================= */
.sb-contact-person.bg-white .sb-contact-person__method {
background-color: var(--color-bg-muted, #ededed);
}
.sb-contact-person.bg-grey .sb-contact-person__method {
background-color: var(--color-white, #ffffff);
}
/* =========================================================
LINKZUSTÄNDE
========================================================= */
.sb-contact-person__method:link,
.sb-contact-person__method:visited {
color: var(--color-text, #000000);
text-decoration: none;
}
/* =========================================================
HOVER
========================================================= */
.sb-contact-person.bg-white .sb-contact-person__method:hover,
.sb-contact-person.bg-grey .sb-contact-person__method:hover {
background-color: var(--color-bg-soft, #f5f5f5);
color: var(--color-text, #000000);
box-shadow:
inset 0 -3px 0 var(--contact-hover-color);
}
/* Tastatur-Fokus */
.sb-contact-person__method:focus-visible {
outline: 2px solid var(--contact-hover-color);
outline-offset: 3px;
}
/* Ausgeblendete Kontaktarten */
.sb-contact-person__method.is-hidden {
display: none;
}
/* =========================================================
ICONS
========================================================= */
.sb-contact-person__icon-wrap {
width: 50px;
height: 50px;
position: relative;
background: transparent;
}
.sb-contact-person__icon {
position: absolute;
inset: 0;
display: block;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.sb-contact-person__icon--phone {
background-image:
url("../../incms_files/filebrowser/ICON_CONTACT_TELEFON.png");
}
.sb-contact-person__icon--whatsapp {
background-image:
url("../../incms_files/filebrowser/ICON_CONTACT_WHATSAPP.png");
}
.sb-contact-person__icon--email {
background-image:
url("../../incms_files/filebrowser/ICON_CONTACT_E_MAIL.png");
}
/* =========================================================
TEXTE IN DEN KACHELN
========================================================= */
.sb-contact-person__method-title {
width: 100%;
font-family: var(--font-ui, "lato", "Lato", sans-serif);
font-size: 16px;
font-weight: 700;
line-height: 20px;
text-align: center;
}
.sb-contact-person__method-text {
width: 100%;
max-width: 100%;
min-height: 42px;
font-family: var(--font-body, "lato-light", "Lato", sans-serif);
font-size: 15px;
font-weight: 400;
line-height: 21px;
text-align: center;
overflow-wrap: anywhere;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 680px) {
.sb-contact-person {
--sb-padding-top: 40px;
--sb-padding-bottom: 40px;
padding-left: 16px;
padding-right: 16px;
}
.sb-contact-person__inner {
row-gap: 22px;
}
.sb-contact-person__methods {
width: 100%;
gap: 12px;
}
.sb-contact-person__method {
flex: 1 1 100%;
width: 100%;
max-width: 320px;
min-height: 92px;
padding: 14px 16px;
grid-template-columns: 48px 1fr;
grid-template-rows: auto auto;
grid-template-areas:
"icon title"
"icon text";
justify-items: start;
align-items: center;
align-content: center;
column-gap: 14px;
row-gap: 2px;
text-align: left;
}
.sb-contact-person__icon-wrap {
grid-area: icon;
width: 48px;
height: 48px;
}
.sb-contact-person__method-title {
grid-area: title;
width: auto;
line-height: 1.25;
text-align: left;
}
.sb-contact-person__method-text {
grid-area: text;
width: auto;
min-height: 0;
line-height: 1.4;
text-align: left;
}
.sb-contact-person__image-wrap {
width: 108px;
height: 108px;
}
.sb-contact-person__name {
font-size: 14px;
}
.sb-contact-person__subheadline {
font-size: 16px;
}
}
/* =========================================================
SMARTBOX: KONTAKTPERSONEN 2ER
Zwei Ansprechpartner, Desktop nebeneinander, mobil untereinander
========================================================= */
.sb-contact-persons {
--sb-padding-top: 50px;
--sb-padding-bottom: 50px;
--contact-hover-color: var(--color-primary, #f0b334);
padding-left: 24px;
padding-right: 24px;
font-family: var(--font-body, "lato-light", "Lato", sans-serif);
color: var(--color-text, #000000);
}
.sb-contact-persons.bg-white { background: var(--color-white, #ffffff); }
.sb-contact-persons.bg-grey { background: var(--color-bg-muted, #ededed); }
.sb-contact-persons__inner {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: grid;
row-gap: 28px;
}
/* Überschrift */
.sb-contact-persons__headline-wrap.title-wrapper {
width: 100%;
margin: 0;
display: grid;
gap: 8px;
}
.sb-contact-persons__headline-wrap .sb-contact-persons__headline {
margin: 0;
font-weight: 400 !important;
}
.sb-contact-persons__subheadline {
margin: 0;
font-family: var(--font-body, "lato-light", "Lato", sans-serif);
font-size: 18px;
font-weight: 300;
line-height: 1.4;
}
.sb-contact-persons__headline-wrap.align-left { text-align: left; }
.sb-contact-persons__headline-wrap.align-center { text-align: center; }
.sb-contact-persons__headline-wrap.align-right { text-align: right; }
.sb-contact-persons__headline-wrap.is-hidden { display: none; }
.sb-contact-persons__headline:empty,
.sb-contact-persons__subheadline:empty { display: none; }
.sb-contact-persons__headline-wrap:has(.sb-contact-persons__headline:empty):has(.sb-contact-persons__subheadline:empty) {
display: none;
}
/* Zwei Ansprechpartner */
.sb-contact-persons__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
align-items: start;
}
.sb-contact-persons__card {
min-width: 0;
display: grid;
gap: 18px;
align-content: start;
}
.sb-contact-persons__person {
display: grid;
justify-items: center;
gap: 10px;
}
.sb-contact-persons__image-wrap {
width: 120px;
height: 120px;
overflow: hidden;
border-radius: 50%;
background: var(--color-bg-muted, #ededed);
}
.sb-contact-persons__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.sb-contact-persons__image[src=""] { display: none; }
.sb-contact-persons__image-wrap.is-hidden { display: none; }
.sb-contact-persons__name {
margin: 0;
font-family: var(--font-ui, "lato", "Lato", sans-serif);
font-size: 16px;
font-weight: 700;
line-height: 1.4;
text-align: center;
color: var(--color-text, #000000);
}
.sb-contact-persons__name.is-hidden { display: none; }
/* Kontaktmethoden */
.sb-contact-persons__methods {
display: grid;
gap: 10px;
}
.sb-contact-persons__method {
width: 100%;
min-height: 74px;
padding: 12px 16px;
display: grid;
grid-template-columns: 46px minmax(0, 1fr);
align-items: center;
gap: 14px;
box-sizing: border-box;
border: 0;
border-radius: 0;
box-shadow: none;
text-align: left;
text-decoration: none;
color: var(--color-text, #000000);
transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.sb-contact-persons.bg-white .sb-contact-persons__method {
background-color: var(--color-bg-muted, #ededed);
}
.sb-contact-persons.bg-grey .sb-contact-persons__method {
background-color: var(--color-white, #ffffff);
}
.sb-contact-persons__method:link,
.sb-contact-persons__method:visited {
color: var(--color-text, #000000);
text-decoration: none;
}
.sb-contact-persons.bg-white .sb-contact-persons__method:hover,
.sb-contact-persons.bg-grey .sb-contact-persons__method:hover {
background-color: var(--color-bg-soft, #f5f5f5);
color: var(--color-text, #000000);
box-shadow: inset 0 -3px 0 var(--contact-hover-color);
}
.sb-contact-persons__method:focus-visible {
outline: 2px solid var(--contact-hover-color);
outline-offset: 3px;
}
.sb-contact-persons__method.is-hidden { display: none; }
.sb-contact-persons__icon {
width: 46px;
height: 46px;
display: block;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.sb-contact-persons__icon--phone {
background-image: url("../../incms_files/filebrowser/ICON_CONTACT_TELEFON.png");
}
.sb-contact-persons__icon--whatsapp {
background-image: url("../../incms_files/filebrowser/ICON_CONTACT_WHATSAPP.png");
}
.sb-contact-persons__icon--email {
background-image: url("../../incms_files/filebrowser/ICON_CONTACT_E_MAIL.png");
}
.sb-contact-persons__method-copy {
min-width: 0;
display: grid;
gap: 2px;
}
.sb-contact-persons__method-title {
font-family: var(--font-ui, "lato", "Lato", sans-serif);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
.sb-contact-persons__method-text {
min-width: 0;
font-family: var(--font-body, "lato-light", "Lato", sans-serif);
font-size: 15px;
font-weight: 400;
line-height: 1.4;
overflow-wrap: anywhere;
}
@media (max-width: 760px) {
.sb-contact-persons {
--sb-padding-top: 40px;
--sb-padding-bottom: 40px;
padding-left: 16px;
padding-right: 16px;
}
.sb-contact-persons__inner { row-gap: 24px; }
.sb-contact-persons__grid {
grid-template-columns: 1fr;
gap: 34px;
}
.sb-contact-persons__card {
width: 100%;
max-width: 520px;
margin: 0 auto;
}
.sb-contact-persons__image-wrap {
width: 108px;
height: 108px;
}
.sb-contact-persons__name { font-size: 14px; }
.sb-contact-persons__subheadline { font-size: 16px; }
.sb-contact-persons__method {
min-height: 72px;
padding: 12px 14px;
grid-template-columns: 44px minmax(0, 1fr);
gap: 12px;
}
.sb-contact-persons__icon {
width: 44px;
height: 44px;
}
}
.sb-event-table {
overflow: hidden;
}
.sb-event-table.bg-white { background-color: #ffffff; }
.sb-event-table.bg-grey { background-color: #f4f4f2; }
.sb-event-table__inner {
max-width: 1200px;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
box-sizing: border-box;
}
.sb-event-table__title-wrap {
max-width: 760px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
display: grid;
gap: 16px;
text-align: center;
}
.sb-event-table__headline:empty,
.sb-event-table__intro:empty { display: none; }
.sb-event-table__title-wrap:has(.sb-event-table__headline:empty):has(.sb-event-table__intro:empty) { display: none; }
.sb-event-table__head,
.sb-event-table__row {
display: grid;
grid-template-columns: minmax(80px,.8fr) minmax(220px,2.25fr) minmax(105px,1fr) minmax(125px,1.15fr) minmax(105px,1fr) minmax(110px,1fr) minmax(95px,.9fr);
gap: 18px;
align-items: center;
}
.sb-event-table__head {
padding: 0 20px 10px;
color: #767672;
font-size: .72rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
.sb-event-table__body {
display: grid;
gap: 10px;
}
.sb-event-table__row {
padding: 18px 20px;
background: #ffffff;
border: 1px solid #e7e7e4;
border-radius: 14px;
box-sizing: border-box;
transition: border-color 160ms ease, background-color 160ms ease, opacity 160ms ease;
}
.sb-event-table__row:hover {
border-color: #d4d4cf;
background-color: #fdfdfc;
}
.sb-event-table__cell {
min-width: 0;
line-height: 1.45;
overflow-wrap: anywhere;
}
.sb-event-table__cell--name { font-weight: 700; }
.sb-event-table__cell--start { font-weight: 650; }
.sb-event-table__language {
display: inline-flex;
width: fit-content;
max-width: 100%;
padding: 6px 10px;
border-radius: 999px;
background: #f0f0ee;
color: #555552;
font-size: .78rem;
font-weight: 650;
line-height: 1.2;
}
.sb-event-table__status {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
gap: 7px;
padding: 7px 11px;
border-radius: 999px;
background: #f0f0ee;
color: #555552;
font-size: .8rem;
font-weight: 650;
line-height: 1.2;
}
.sb-event-table__status::before {
content: "";
width: 7px;
height: 7px;
flex: 0 0 auto;
border-radius: 50%;
background: currentColor;
opacity: .72;
}
.sb-event-table__status.is-available { background: #eaf5ed; color: #27663b; }
.sb-event-table__status.is-waiting { background: #fbf1dc; color: #7b5a16; }
.sb-event-table__status.is-booked { background: #f8eaea; color: #963737; }
.sb-event-table__action {
display: inline-flex;
align-items: center;
gap: 7px;
width: fit-content;
color: inherit;
font-weight: 650;
text-decoration: none;
}
.sb-event-table__action::after {
content: "→";
transition: transform 160ms ease;
}
.sb-event-table__action:hover,
.sb-event-table__action:focus-visible {
text-decoration: underline;
text-underline-offset: 4px;
}
.sb-event-table__action:hover::after,
.sb-event-table__action:focus-visible::after { transform: translateX(3px); }
.sb-event-table__row.is-past { opacity: .56; }
.sb-event-table__row.is-past:hover { opacity: .72; }
.sb-event-table__row.is-past .sb-event-table__status { background: #f0f0ee; color: #686864; }
.sb-event-table__state {
margin: 0;
padding: 18px 20px;
border-radius: 12px;
background: #f4f4f2;
color: #5f5f5b;
text-align: center;
}
.sb-event-table.bg-grey .sb-event-table__state { background: #ffffff; }
.sb-event-table__state--error { color: #8b3434; }
.sb-event-table [hidden] { display: none !important; }
@media (max-width: 980px) {
.sb-event-table__head { display: none; }
.sb-event-table__body { gap: 16px; }
.sb-event-table__row {
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
gap: 18px 24px;
padding: 22px;
border-radius: 18px;
}
.sb-event-table__cell {
display: grid;
align-content: start;
gap: 4px;
}
.sb-event-table__cell::before {
content: attr(data-label);
color: #858581;
font-size: .7rem;
font-weight: 600;
letter-spacing: .035em;
line-height: 1.2;
text-transform: uppercase;
}
.sb-event-table__cell--name {
grid-column: 1 / -1;
font-size: 1.08rem;
}
.sb-event-table__cell--language,
.sb-event-table__cell--status,
.sb-event-table__cell--action { align-self: start; }
.sb-event-table__cell--action { grid-column: 1 / -1; }
.sb-event-table__cell--action::before { display: none; }
}
@media (max-width: 520px) {
.sb-event-table__inner { padding-left: 16px; padding-right: 16px; }
.sb-event-table__row {
grid-template-columns: 1fr;
gap: 16px;
padding: 20px;
}
.sb-event-table__cell--name,
.sb-event-table__cell--action { grid-column: auto; }
}
/* =========================================================
SMARTBOX: inlingua Lübeck – Kurstabelle aus CSV
========================================================= */
.sb-course-table {
padding-left: 24px;
padding-right: 24px;
color: var(--color-text, #000000);
font-family: var(--font-body, "Lato", Arial, sans-serif);
}
.sb-course-table *,
.sb-course-table *::before,
.sb-course-table *::after {
box-sizing: border-box;
}
.sb-course-table__inner {
width: 100%;
max-width: 1380px;
margin: 0 auto;
}
.sb-course-table__status {
padding: 14px 0;
}
.sb-course-table__scroll {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sb-course-table__table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
table-layout: auto;
}
.sb-course-table__table th,
.sb-course-table__table td {
padding: 14px 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
text-align: left;
vertical-align: middle;
}
.sb-course-table__table th {
font-family: var(--font-ui, "Lato", Arial, sans-serif);
font-weight: 700;
white-space: nowrap;
}
.sb-course-table__table td:nth-child(1),
.sb-course-table__table td:nth-child(3),
.sb-course-table__table td:nth-child(4),
.sb-course-table__table td:nth-child(5),
.sb-course-table__table td:nth-child(6) {
white-space: nowrap;
}
.sb-course-table__table td:nth-child(2) {
width: 100%;
}
.sb-course-table__table th:last-child,
.sb-course-table__table td:last-child {
text-align: right;
white-space: nowrap;
}
.sb-course-table__button,
.sb-course-table__button:link,
.sb-course-table__button:visited {
min-height: 42px;
padding: 9px 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 4px;
background: var(--color-primary, #f0b334);
color: var(--color-text, #000000);
font-family: var(--font-ui, "Lato", Arial, sans-serif);
font-size: 14px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
transition: opacity 0.2s ease;
}
.sb-course-table__button:hover,
.sb-course-table__button:focus-visible {
opacity: 0.82;
text-decoration: none;
}
.sb-course-table__button:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.sb-course-table__sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
@media (max-width: 767px) {
.sb-course-table {
padding-left: 16px;
padding-right: 16px;
}
.sb-course-table__scroll {
overflow: visible;
}
.sb-course-table__table,
.sb-course-table__table tbody,
.sb-course-table__table tr,
.sb-course-table__table td {
display: block;
width: 100%;
}
.sb-course-table__table thead {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.sb-course-table__table tr {
margin: 0 0 18px;
padding: 14px 16px;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 6px;
}
.sb-course-table__table td,
.sb-course-table__table td:nth-child(1),
.sb-course-table__table td:nth-child(2),
.sb-course-table__table td:nth-child(3),
.sb-course-table__table td:nth-child(4),
.sb-course-table__table td:nth-child(5),
.sb-course-table__table td:nth-child(6),
.sb-course-table__table td:last-child {
display: grid;
grid-template-columns: minmax(82px, 105px) minmax(0, 1fr);
gap: 10px;
width: 100%;
padding: 7px 0;
border: 0;
text-align: left;
white-space: normal;
}
.sb-course-table__table td::before {
content: attr(data-label);
font-weight: 700;
}
.sb-course-table__table td.sb-course-table__action {
display: block;
padding-top: 12px;
}
.sb-course-table__table td.sb-course-table__action::before {
content: none;
}
.sb-course-table__button {
width: 100%;
min-height: 44px;
}
}
/* =========================================================
SMARTBOX: inlingua Lübeck – Kurstabelle aus CSV
========================================================= */
.sb-il-luebeck-course-table {
padding-left: 24px;
padding-right: 24px;
color: var(--color-text, #000000);
font-family: var(--font-body, "Lato", Arial, sans-serif);
}
.sb-il-luebeck-course-table *,
.sb-il-luebeck-course-table *::before,
.sb-il-luebeck-course-table *::after {
box-sizing: border-box;
}
.sb-il-luebeck-course-table__inner {
width: 100%;
max-width: 1380px;
margin: 0 auto;
}
.sb-il-luebeck-course-table__status {
padding: 14px 0;
}
.sb-il-luebeck-course-table__scroll {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sb-il-luebeck-course-table__table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
table-layout: auto;
}
.sb-il-luebeck-course-table__table th,
.sb-il-luebeck-course-table__table td {
padding: 14px 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
text-align: left;
vertical-align: middle;
}
.sb-il-luebeck-course-table__table th {
font-family: var(--font-ui, "Lato", Arial, sans-serif);
font-weight: 700;
white-space: nowrap;
}
.sb-il-luebeck-course-table__table td:nth-child(1),
.sb-il-luebeck-course-table__table td:nth-child(3),
.sb-il-luebeck-course-table__table td:nth-child(4),
.sb-il-luebeck-course-table__table td:nth-child(5) {
white-space: nowrap;
}
.sb-il-luebeck-course-table__table td:nth-child(2) {
width: 100%;
}
.sb-il-luebeck-course-table__table td:nth-child(6) {
min-width: 190px;
}
.sb-il-luebeck-course-table__table th:last-child,
.sb-il-luebeck-course-table__table td:last-child {
text-align: right;
white-space: nowrap;
}
.sb-il-luebeck-course-table__button,
.sb-il-luebeck-course-table__button:link,
.sb-il-luebeck-course-table__button:visited {
min-height: 42px;
padding: 9px 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 4px;
background: var(--color-primary, #f0b334);
color: var(--color-text, #000000);
font-family: var(--font-ui, "Lato", Arial, sans-serif);
font-size: 14px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
transition: opacity 0.2s ease;
}
.sb-il-luebeck-course-table__button:hover,
.sb-il-luebeck-course-table__button:focus-visible {
opacity: 0.82;
text-decoration: none;
}
.sb-il-luebeck-course-table__button:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.sb-il-luebeck-course-table__sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
@media (max-width: 767px) {
.sb-il-luebeck-course-table {
padding-left: 16px;
padding-right: 16px;
}
.sb-il-luebeck-course-table__scroll { overflow: visible; }
.sb-il-luebeck-course-table__table,
.sb-il-luebeck-course-table__table tbody,
.sb-il-luebeck-course-table__table tr,
.sb-il-luebeck-course-table__table td {
display: block;
width: 100%;
}
.sb-il-luebeck-course-table__table thead {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.sb-il-luebeck-course-table__table tr {
margin: 0 0 18px;
padding: 14px 16px;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 6px;
}
.sb-il-luebeck-course-table__table td,
.sb-il-luebeck-course-table__table td:nth-child(1),
.sb-il-luebeck-course-table__table td:nth-child(2),
.sb-il-luebeck-course-table__table td:nth-child(3),
.sb-il-luebeck-course-table__table td:nth-child(4),
.sb-il-luebeck-course-table__table td:nth-child(5),
.sb-il-luebeck-course-table__table td:nth-child(6),
.sb-il-luebeck-course-table__table td:last-child {
display: grid;
grid-template-columns: minmax(90px, 110px) minmax(0, 1fr);
gap: 10px;
width: 100%;
min-width: 0;
padding: 7px 0;
border: 0;
text-align: left;
white-space: normal;
}
.sb-il-luebeck-course-table__table td::before {
content: attr(data-label);
font-weight: 700;
}
.sb-il-luebeck-course-table__table td.sb-il-luebeck-course-table__action {
display: block;
padding-top: 12px;
}
.sb-il-luebeck-course-table__table td.sb-il-luebeck-course-table__action::before { content: none; }
.sb-il-luebeck-course-table__button { width: 100%; min-height: 44px; }
}
.sb-il-luebeck-course-table__app {
--sb-csv-url: https://sunfiles.de/Webtool/csv-admin/public-data/inlingua-luebeck-termine.csv;
}
/* =========================================================
SMARTBOX: MEHRSPRACHIGER TEST
Deutsch / Englisch über die inCMS-Sprachklasse am body
========================================================= */
.sb-language-test {
--sb-padding-top: 50px;
--sb-padding-bottom: 50px;
padding-left: 24px;
padding-right: 24px;
background: var(--color-white, #ffffff);
}
/* =========================================================
INNER
========================================================= */
.sb-language-test__inner {
width: 100%;
max-width: 900px;
margin: 0 auto;
}
/* =========================================================
TEXT
========================================================= */
.sb-language-test__text {
font-family: var(
--font-body,
"lato-light",
"Lato",
sans-serif
);
font-size: var(--font-size-body, 18px);
line-height: 1.6;
color: var(--color-text, #000000);
}
/* =========================================================
SPRACHSTEUERUNG
========================================================= */
.sb-language-content {
display: none;
}
/* Deutsch */
body.lang-de .sb-language-content--de {
display: block;
}
/* Englisch */
body.lang-en .sb-language-content--en {
display: block;
}
/* =========================================================
FALLBACK
Wenn keine bekannte Sprachklasse vorhanden ist,
wird Deutsch angezeigt.
========================================================= */
body:not(.lang-de):not(.lang-en) .sb-language-content--de {
display: block;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 680px) {
.sb-language-test {
--sb-padding-top: 40px;
--sb-padding-bottom: 40px;
padding-left: 16px;
padding-right: 16px;
}
.sb-language-test__text {
font-size: var(--font-size-body-mobile, 16px);
}
}
.sb-multipane-test {
padding: 40px;
background: #eeeeee;
}
.sb-multipane-test h2 {
margin-top: 0;
}
.sb-sun-sb__search-form {
width: 184px;
min-width: 184px;
height: 34px;
display: flex;
align-items: center;
background: #e7e7e4;
border: 1px solid #e7e7e4;
border-radius: 0;
box-sizing: border-box;
flex-shrink: 0;
margin: 0;
}
.sb-sun-sb__search-form:focus-within {
background: #ffffff;
border-color: #cdcdc8;
}
.sb-sun-search-input-wrapper{
position: relative;
width: 100%;
}
.sb-sun-search-input-wrapper:after{
content: "";
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml;charset=utf-8,");
background-repeat: no-repeat;
background-size: contain;
z-index: 10;
}
.sb-sun-sb__search-input {
width: 100%;
min-width: 0;
height: 100%;
border: 0;
background: transparent;
color: #3a3a38;
outline: 0;
box-shadow: none;
padding: 0 8px 0 36px;
font-size: 14px;
line-height: 1;
box-sizing: border-box;
}
.sb-sun-sb__search-input::placeholder {
color: #7d7d78;
opacity: 1;
}
.sb-sun-sb__search-form {
position: relative;
}
.sb-sun-sb__search-suggestions {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
z-index: 200;
background: #fff;
border: 1px solid #d9d9d9;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
max-height: 420px;
overflow-y: auto;
}
.sb-sun-header__search-suggestion {
display: block;
padding: 14px 16px;
text-decoration: none;
color: inherit;
border-bottom: 1px solid #ececec;
}
.sb-sun-header__search-suggestion:last-child {
border-bottom: 0;
}
.sb-sun-header__search-suggestion:hover,
.sb-sun-header__search-suggestion:focus {
background: #f5f5f5;
}
.sb-sun-header__search-suggestion:focus {
background: #f5f5f5;
outline: none;
}
.sb-sun-header__search-suggestion-title {
display: block;
}
.sb-sun-header__search-suggestion-empty {
padding: 14px 16px;
}
.sb-search-page {
width: 100%;
padding: 48px 20px;
box-sizing: border-box;
}
.sb-search-page__inner {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.sb-search-page__form {
margin-top: 24px;
}
.sb-search-page__label {
display: block;
margin-bottom: 8px;
}
.sb-search-page__form-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: stretch;
}
.sb-search-page__input {
width: 100%;
min-height: 52px;
padding: 0 16px;
border: 1px solid #d0d0d0;
box-sizing: border-box;
}
.sb-search-page__button {
min-height: 52px;
white-space: nowrap;
}
.sb-search-page__meta {
margin-top: 20px;
}
.sb-search-page__results {
margin-top: 24px;
display: grid;
gap: 16px;
}
.sb-search-page__result {
border: 1px solid #e3e3e3;
padding: 20px;
box-sizing: border-box;
background: #fff;
}
/* Kleinere H2 in den Suchergebnissen */
.sb-search-page .sb-search-page__result-title {
margin: 0 0 8px;
font-size: 26px;
line-height: 1.3;
font-weight: 700;
}
.sb-search-page__result-link {
text-decoration: none;
}
.sb-search-page__result-excerpt {
margin: 0 0 10px;
}
.sb-search-page__result-url {
font-size: 14px;
opacity: 0.7;
word-break: break-word;
}
.sb-search-page__empty {
border: 1px solid #e3e3e3;
padding: 20px;
background: #fff;
}
@media (max-width: 767px) {
.sb-search-page .sb-search-page__result-title {
font-size: 22px;
}
.sb-search-page__form-row {
grid-template-columns: 1fr;
}
.sb-search-page__button {
width: 100%;
}
}
/* ============================================================
Smart Accordion v2.0
Scope: .smart-accordion | Vars: --sa-*
============================================================ */
/* --- inCMS Defaults neutralisieren ------------------------- */
.smart-accordion .flexi-accordion dt,
.smart-accordion .flexi-accordion dd,
.smart-accordion .flexi-accordionitem dt,
.smart-accordion .flexi-accordionitem dd {
border: none !important;
background: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* --- Item = Trennlinie unten ------------------------------- */
.smart-accordion .flexi-accordionitem {
font-family: "Lato", "lato", sans-serif;
margin-bottom: var(--sa-mb);
border-bottom: 1px solid var(--sa-lcolor);
}
.smart-accordion.no-line .flexi-accordionitem {
border-bottom: none;
}
/* --- Überschrift ------------------------------------------- */
.smart-accordion .flexi-accordionitem dt {
margin: 0;
}
.smart-accordion .flexi-accordionitem dt a,
.smart-accordion .flexi-accordionitem dt a:hover,
.smart-accordion .flexi-accordionitem dt a:focus,
.smart-accordion .flexi-accordionitem dt a:visited,
.smart-accordion .flexi-accordion dt a,
.smart-accordion .flexi-accordion dt a:hover,
.smart-accordion .flexi-accordion dt a:visited {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
height: auto;
margin: 0;
padding: var(--sa-pad) 0;
box-sizing: border-box;
font-family: "Lato", "lato", sans-serif;
font-weight: var(--sa-qweight);
font-size: clamp(calc(var(--sa-qsize) * 0.8), 1.55vw, var(--sa-qsize));
line-height: 1.35;
color: var(--sa-qcolor);
text-decoration: none;
}
/* --- Chevron rechts (reines CSS, kein FontAwesome) --------- */
.smart-accordion.arrow .flexi-accordionitem dt a:after,
.smart-accordion.arrow .flexi-accordion dt a:after {
content: "";
flex: 0 0 auto;
width: var(--sa-isize);
height: var(--sa-isize);
border-right: 2px solid var(--sa-icolor);
border-bottom: 2px solid var(--sa-icolor);
transform: translateY(-25%) rotate(45deg);
transition: transform 0.25s ease;
}
.smart-accordion.arrow .flexi-accordionitem dt.is-open a:after,
.smart-accordion.arrow .flexi-accordionitem dt.active a:after,
.smart-accordion.arrow .flexi-accordionitem dt a[aria-expanded="true"]:after,
.smart-accordion.arrow .flexi-accordion dt.is-open a:after,
.smart-accordion.arrow .flexi-accordion dt.active a:after {
transform: translateY(25%) rotate(-135deg);
}
/* Altes FontAwesome-Icon sicher abschalten */
.smart-accordion.arrow dt a:before {
content: none;
}
/* --- Inhalt ------------------------------------------------ */
.smart-accordion .flexi-accordionitem dd,
.smart-accordion .flexi-accordion dd {
margin: 0;
padding: 0 0 var(--sa-pad);
font-family: "Lato", "lato", sans-serif;
font-weight: 400;
font-size: clamp(calc(var(--sa-csize) * 0.85), 1.25vw, var(--sa-csize));
line-height: 1.6;
color: var(--sa-ccolor);
}
.smart-accordion .flexi-accordionitem dd > *:last-child {
margin-bottom: 0;
}
/* --- Responsiv --------------------------------------------- */
@media (max-width: 768px) {
.smart-accordion .flexi-accordionitem dt a {
gap: 16px;
padding: calc(var(--sa-pad) * 0.75) 0;
}
.smart-accordion .flexi-accordionitem dd {
padding-bottom: calc(var(--sa-pad) * 0.75);
}
.smart-accordion.arrow .flexi-accordionitem dt a:after {
width: calc(var(--sa-isize) * 0.8);
height: calc(var(--sa-isize) * 0.8);
border-width: 1.5px;
}
}
.smart-accordion {
--sa-qsize: 20px;
--sa-qweight: 700;
--sa-qcolor: #000000;
--sa-csize: 18px;
--sa-ccolor: #000000;
--sa-icolor: #000000;
--sa-isize: 10px;
--sa-lcolor: #D9D9D9;
--sa-pad: 20px;
--sa-mb: 20px;
}
.smart-mask{
position: absolute;
width: 100%;
top: 0px;
left: 0px;
bottom: 0;
display: none;
border-radius: inherit;
}
.smart-mask.active-mask{display:block;}
.smart-box-container{position:relative;}
.view-normal.onecol .smart-box.fullwidth.fullwidthcontent > .smart-box-container {
max-width: 100%;
}
.shadow{box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);z-index: 1;}
.text-center{text-align:center}
.smart-border{box-sizing: border-box;}
@media screen and (max-width: 768px) {
.hidebg-lg{background-image:none !important}
}
@media screen and (max-width: 568px) {
.hidebg-md{background-image:none !important}
}
@media screen and (max-width: 480px) {
.hidebg-sm{background-image:none !important}
}
.smartbox-main-inner {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
}
.smart-main {
background-size: auto;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
background-attachment: scroll;
}
.smart-border {
border-radius: 0px;
border-top-width: 0px;
border-top-style: none;
border-right-width: 0px;
border-right-style: none;
border-bottom-width: 0px;
border-bottom-style: none;
border-left-width: 0px;
border-left-style: none;
}
/*
* CSV-Suchhilfe / Zielgruppen-Navigator
* Bewusst neutral gehalten: Typografie und Button-Design kommen aus dem globalen Website-CSS.
* Eigene Regeln betreffen nur Layout und die beiden Auswahlfelder.
*/
.sb-guided-search {
overflow: visible;
}
.sb-guided-search.bg-white {
background-color: #ffffff;
}
.sb-guided-search.bg-grey {
background-color: #ededed;
}
.sb-guided-search__inner {
max-width: 1200px;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
box-sizing: border-box;
}
.sb-guided-search__title-wrap {
max-width: 760px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.sb-guided-search__headline,
.sb-guided-search__intro {
margin-left: auto;
margin-right: auto;
}
.sb-guided-search__intro {
margin-top: 16px;
}
.sb-guided-search__headline:empty,
.sb-guided-search__intro:empty {
display: none;
}
.sb-guided-search__form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 40px;
align-items: end;
max-width: 980px;
margin: 42px auto 0;
}
.sb-guided-search__field {
display: grid;
gap: 12px;
min-width: 0;
margin: 0;
}
.sb-guided-search__field-title {
display: block;
font-size: 1.1rem;
line-height: 1.35;
font-weight: 600;
}
.sb-guided-search__select-wrap {
display: block;
position: relative;
}
.sb-guided-search__select-wrap::after {
content: "";
position: absolute;
right: 20px;
top: 50%;
width: 9px;
height: 9px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
opacity: .72;
}
.sb-guided-search__select {
display: block;
width: 100%;
min-width: 0;
min-height: 58px;
margin: 0;
padding: 0 52px 0 18px;
box-sizing: border-box;
font: inherit;
line-height: 1.3;
color: inherit;
background-color: #ffffff;
border: 1px solid rgba(20, 28, 38, .16);
border-radius: 4px;
box-shadow: 0 2px 10px rgba(20, 28, 38, .04);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.sb-guided-search__select:hover:not(:disabled) {
border-color: rgba(20, 28, 38, .34);
}
.sb-guided-search__select:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.sb-guided-search__select:disabled {
opacity: .58;
cursor: not-allowed;
}
.sb-guided-search__select option {
color: #202833;
background: #ffffff;
}
.sb-guided-search__button-wrap {
grid-column: 1 / -1;
display: flex;
justify-content: center;
margin-top: 4px;
}
.sb-guided-search .sb-guided-search__button:disabled {
opacity: .52;
cursor: not-allowed;
}
.sb-guided-search__status {
max-width: 980px;
margin: 14px auto 0;
text-align: center;
font-size: .92rem;
}
.sb-guided-search__status:empty {
display: none;
}
.sb-guided-search__notice {
max-width: 980px;
margin: 36px auto 0;
text-align: center;
line-height: 1.6;
}
.sb-guided-search__notice.is-hidden {
display: none;
}
.sb-guided-search__notice-link {
text-underline-offset: 3px;
}
@media (max-width: 767px) {
.sb-guided-search__inner {
padding-left: 16px;
padding-right: 16px;
}
.sb-guided-search__form {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 30px;
}
.sb-guided-search__button-wrap {
grid-column: auto;
justify-content: stretch;
margin-top: 0;
}
.sb-guided-search .sb-guided-search__button {
width: 100%;
}
.sb-guided-search__notice {
margin-top: 28px;
}
}
/* =========================================================
SMARTBOX: Universal-CSV-Tabelle
Breite richtet sich nach dem Elternelement.
CSV-Kopf bestimmt automatisch die Tabellenspalten.
========================================================= */
.sb-universal-csv-table,
.sb-universal-csv-table.sb-section {
width: 100% !important;
max-width: 100% !important;
min-width: 0;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 24px;
padding-right: 24px;
box-sizing: border-box;
color: var(--color-text, #000000);
font-family: var(--font-body, "Lato", Arial, sans-serif);
}
.sb-universal-csv-table *,
.sb-universal-csv-table *::before,
.sb-universal-csv-table *::after {
box-sizing: border-box;
}
/* =========================================================
INNER / BREITENBEGRENZUNG
========================================================= */
.sb-universal-csv-table__inner {
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
}
.sb-universal-csv-table__app {
width: 100%;
max-width: 100%;
min-width: 0;
}
/* =========================================================
DATENQUELLE
========================================================= */
.sb-universal-csv-table__source {
display: none !important;
}
/* =========================================================
STATUS
========================================================= */
.sb-universal-csv-table__status {
padding: 14px 0;
}
/* =========================================================
SCROLLBEREICH
Tabelle darf breiter sein, aber nicht das Elternelement
vergrößern.
========================================================= */
.sb-universal-csv-table__scroll {
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
/* =========================================================
TABELLE
========================================================= */
.sb-universal-csv-table__table {
width: 100%;
max-width: 100%;
border-collapse: collapse;
border-spacing: 0;
table-layout: auto;
}
.sb-universal-csv-table__table th,
.sb-universal-csv-table__table td {
padding: 14px 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
text-align: left;
vertical-align: middle;
}
.sb-universal-csv-table__table th {
font-family: var(--font-ui, "Lato", Arial, sans-serif);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
}
.sb-universal-csv-table__table td {
line-height: 1.4;
}
.sb-universal-csv-table__table td[data-key="startdatum"],
.sb-universal-csv-table__table td[data-key="datum"],
.sb-universal-csv-table__table td[data-key="beginn"],
.sb-universal-csv-table__table td[data-key="startzeit"],
.sb-universal-csv-table__table td[data-key="uhrzeit"],
.sb-universal-csv-table__table td[data-key="zeit"],
.sb-universal-csv-table__table td[data-key="wochentage"],
.sb-universal-csv-table__table td[data-key="status"],
.sb-universal-csv-table__table td[data-key="standort"] {
white-space: nowrap;
}
/* =========================================================
STATUS-BADGES
========================================================= */
.sb-universal-csv-table__badge {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 5px 11px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.07);
font-size: 14px;
line-height: 1.2;
white-space: nowrap;
}
.sb-universal-csv-table__badge::before {
content: "•";
margin-right: 6px;
}
.sb-universal-csv-table__badge.is-positive {
background: #e4f3e4;
color: #08751a;
}
.sb-universal-csv-table__badge.is-negative {
background: #f8e5e5;
color: #9b1c1c;
}
.sb-universal-csv-table__badge.is-warning {
background: #fff2d8;
color: #8a5a00;
}
/* =========================================================
BUTTON
========================================================= */
.sb-universal-csv-table__button,
.sb-universal-csv-table__button:link,
.sb-universal-csv-table__button:visited {
min-height: 42px;
padding: 9px 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 4px;
background: var(--color-primary, #f0b334);
color: var(--color-text, #000000);
font-family: var(--font-ui, "Lato", Arial, sans-serif);
font-size: 14px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
transition: opacity 0.2s ease;
}
.sb-universal-csv-table__button:hover,
.sb-universal-csv-table__button:focus-visible {
opacity: 0.82;
text-decoration: none;
}
.sb-universal-csv-table__button:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.sb-universal-csv-table__action {
text-align: right !important;
white-space: nowrap;
}
/* =========================================================
SCREENREADER
========================================================= */
.sb-universal-csv-table__sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.sb-universal-csv-table,
.sb-universal-csv-table.sb-section {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 16px;
padding-right: 16px;
}
.sb-universal-csv-table__inner,
.sb-universal-csv-table__app {
width: 100%;
max-width: 100%;
min-width: 0;
}
.sb-universal-csv-table__scroll {
width: 100%;
max-width: 100%;
overflow: visible;
}
.sb-universal-csv-table__table,
.sb-universal-csv-table__table tbody,
.sb-universal-csv-table__table tr,
.sb-universal-csv-table__table td {
display: block;
width: 100%;
max-width: 100%;
}
.sb-universal-csv-table__table thead {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.sb-universal-csv-table__table tr {
margin: 0 0 18px;
padding: 14px 16px;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 6px;
}
.sb-universal-csv-table__table td,
.sb-universal-csv-table__table td[data-key] {
display: grid;
grid-template-columns:
minmax(100px, 120px)
minmax(0, 1fr);
gap: 10px;
width: 100%;
max-width: 100%;
min-width: 0;
padding: 7px 0;
border: 0;
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
}
.sb-universal-csv-table__table td::before {
content: attr(data-label);
font-weight: 700;
}
.sb-universal-csv-table__table td.sb-universal-csv-table__action {
display: block;
padding-top: 12px;
}
.sb-universal-csv-table__table td.sb-universal-csv-table__action::before {
content: none;
}
.sb-universal-csv-table__button {
width: 100%;
min-height: 44px;
}
}
.test-box {
display: flex;
gap: 24px;
align-items: center;
padding: 24px;
border: 1px solid #e5e5e5;
border-radius: 12px;
background: #ffffff;
box-sizing: border-box;
}
.test-box__image-wrap {
flex: 0 0 auto;
}
.test-box__image {
display: block;
max-width: 220px;
width: 100%;
height: auto;
border-radius: 10px;
}
.test-box__content {
flex: 1 1 auto;
}
.test-box__text {
font-size: 16px;
line-height: 1.6;
color: #222222;
margin-bottom: 16px;
}
.test-box__button {
display: inline-block;
padding: 12px 18px;
border-radius: 8px;
background: #0057ff;
color: #ffffff;
text-decoration: none;
font-weight: 600;
transition: background 0.2s ease;
}
.test-box__button:hover {
background: #0046cc;
}
@media screen and (max-width: 768px) {
.test-box {
flex-direction: column;
align-items: stretch;
}
.test-box__image {
max-width: 100%;
}
}