/* ==========================================================================
ZXD ILC - USER.CSS (CASSIOPEIA)
========================================================================== */
/* ==========================================================================
1. LOCAL FONT FACES (DSGVO-konform)
========================================================================== */
@font-face {
font-family: 'fuse_regular';
src: url('../fonts/fuse-regular.woff2') format('woff2'),
url('../fonts/fuse-regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'fuse_bold';
src: url('../fonts/fuse-bold.woff2') format('woff2'),
url('../fonts/fuse-bold.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'fuse_extrabold';
src: url('../fonts/fuse-extrabold.woff2') format('woff2'),
url('../fonts/fuse-extrabold.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Source Sans 3';
src: url('/media/templates/site/cassiopeia/fonts/source-sans-3_5.3.1_latin-wght-normal.woff2') format('woff2');
font-style: normal;
font-weight: 200 900;
font-display: swap;
}
/* ==============================================================================================================
2. CASSIOPEIA CLEANUP & RESET (Radius, Borders & Spalten-Gaps)
============================================================================================================== */
/* Global Rahmen, Schatten & Ecken an spezifischen Containern entfernen */
.card,
.sidebar-right,
.mod-custom,
.container-bottom-a,
.container-bottom-b,
.container-footer {
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
}
/* Header-Layout & Reset */
.container-header,
header.header {
z-index: 100;
background-color: #ffffff !important;
background-image: none !important;
position: relative;
box-shadow: none !important;
border-bottom: none !important;
}
/* Abstände/Lücken (Gaps) zwischen den Cassiopeia-Grid-Containern entfernen */
.site-grid {
gap: 0 !important;
padding: 0 !important;
}
/* Bottom & Footer auf volle Breite schalten */
.container-bottom-a,
.container-bottom-b,
.container-footer {
grid-column: full-start / full-end !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
width: 100% !important;
}
/* Footer - eigener Hintergrund statt Cassiopeia Standardfarbe */
.container-footer {
background-color: #000000 !important;
background-image: none !important;
color: #ffffff !important;
}
/* ::selection Text-Hervorhebung */
::selection {
background-color: #e9040e;
color: #ffffff;
}
/* ================================================================================================================
3. GLOBAL TYPOGRAPHY & LAYOUT (DESKTOP & MOBIL)
============================================================================================================== */
/* Fließtext */
body {
font-family: 'Source Sans 3', sans-serif;
font-weight: 400;
font-size: 1.375rem; /* 22px */
line-height: 1.5;
color: #434357;
background-color: #ffffff;
}
/* Überschriften – gemeinsame Abstände */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
margin-top: 0;
margin-bottom: 1.875rem; /* 30px */
}
/* Große Überschriften etwas kompakter */
h1, .h1 {
line-height: 1.1;
}
h2, .h2 {
line-height: 1.1;
}
/* Kleinere Überschriften */
h3, .h3,
h4, .h4,
h5, .h5 {
line-height: 1.1;
}
h1, .h1 {
font-family: 'Source Sans 3', sans-serif; /* 'fuse_extrabold', sans-serif; */
font-size: 4rem; /* 64px */
color: #727281;
text-align: center;
font-weight: 800;
letter-spacing: -0.03em;
}
h2, .h2 {
font-family: 'Source Sans 3', sans-serif; /* 'fuse_extrabold', sans-serif; */
font-size: 3rem; /* 48px */
color: #727281;
text-align: center;
font-weight: 800;
letter-spacing: -0.02em;
}
h3, .h3 {
font-family: 'Source Sans 3', sans-serif; /* 'fuse_extrabold', sans-serif; */
font-size: 2rem; /* 32px orig*/
color: #727281;
text-align: center;
font-weight: 800;
letter-spacing: -0.02em;
}
h4, .h4,
h5, .h5 {
font-family: 'Source Sans 3', sans-serif; /* 'fuse_extrabold', sans-serif; */
font-size: 1.75rem; /* 28px orig*/
color: #727281;
text-align: center;
font-weight: 700;
}
/* Fließtext */
p {
margin-top: 0;
margin-bottom: 1.25rem; /* 20px */
}
b,
strong {
font-family: 'Source Sans 3', sans-serif; /* 'fuse_bold', sans-serif; */
font-weight: 700;
color: #2c2c42;
}
/* Links */
a,
a:focus,
a:active,
a:hover {
font-family: 'Source Sans 3', sans-serif; /* 'fuse_bold', sans-serif; */
color: #e9040e;
font-weight: 700;
text-decoration: none !important;
}
@media(hover:hover) and (pointer:fine) {
a:hover {
text-decoration: underline !important;
}
}
/* Listen */
ul,
ol {
margin-bottom: 1rem; /* 16px - 1.25 rem vorher20px */
}
/* -------------------------------------------------------------------------------------------------------
Mobil
---------------------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
body {
font-size: 1.125rem; /* 18px */
}
h1, .h1 {
font-size: 2rem; /* 32px */
}
h2, .h2 {
font-size: 1.75rem; /* 28px */
}
h3, .h3 {
font-size: 1.5rem; /* 24px */
}
h4, .h4,
h5, .h5 {
font-size: 1.25rem; /* 20px */
}
}
/* ===============================================================================================================
4. CASSIOPEIA FARBSCHEMA & LAYOUT-BEREICHE
============================================================================================================ */
/* --- 4.1 Topbar --- */
.container-topbar {
background-color: #333333;
color: #aaaaaa;
}
/* --- 4.2 Hauptinhaltsbereich ------------------------------------------------------- */
.container-component {
padding-top: 30px !important;
padding-bottom: 30px !important;
background-color: #ffffff;
}
@media (max-width: 767.98px) {
.container-component {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
}
/* Cassiopeia-Abstand innerhalb des Hauptinhalts entfernen */
.container-component > main {
margin-top: 0;
}
/* --- 4.3 Bottom-A (Hellgrau) ------------------------------------------------------ */
.container-bottom-a {
background-color:transparent !important;
color:#000000 !important;
padding: 50px 0;
font-size: inherit; /* vorher 1.25rem */
line-height: 1.2;
position:relative;
z-index:0;
}
.container-bottom-a::before {
content:"";
position:absolute;
top:0;
bottom:0;
left:50%;
width:100vw;
transform:translateX(-50%);
background:#E7E7EA;
z-index:-1;
}
.container-bottom-a.grid-child {
grid-column: main-start / main-end !important;
width: 100% !important;
max-width: 1140px;
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 767.98px) {
.container-bottom-a.grid-child {
padding-left: 25px !important;
padding-right: 25px !important;
box-sizing: border-box;
}
}
.container-bottom-a .mod-title,
.container-bottom-a .card-title,
.container-bottom-a h1,
.container-bottom-a h2,
.container-bottom-a h3,
.container-bottom-a h4 {
font-family: 'Source Sans 3', sans-serif; /* vorher 'fuse_bold', sans-serif !important */
font-size: 1.375rem !important; /* 22px */
font-weight: 700;
text-align: left !important;
line-height: 1.2 !important;
color: #14142d !important;
border: 0 !important;
margin: 0 0 30px !important;
}
/* Bewusst zentrierte Elemente in Bottom A */
.container-bottom-a .ilc-text-center {
text-align: center !important;
}
/* Bottom A – normale Modulabsätze */
.container-bottom-a p:not(.trainingsplan) {
font-size: inherit; /* vorher 1.25rem */
line-height: 1.2;
margin-bottom: 16px;
}
/* --- 4.4 Bottom-B (Dunkelgrau Basis & Typo) ---------------------------------------- */
.container-bottom-b {
background-color: transparent !important;
background-image: none !important;
color: #ffffff !important;
padding: 50px 0 !important;
font-family: 'Source Sans 3', sans-serif; /* 'fuse_regular', sans-serif !important */
font-size: inherit !important; /* vorher 1.25rem !important 20px */
line-height: 1.2;
font-weight: 400;
position: relative;
z-index: 0;
}
/* Mobile vertikale Abstände – Bottom A und B */
@media (max-width: 767.98px) {
.container-bottom-a,
.container-bottom-b {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
}
/* Bottom-B Hintergrund über die komplette Browserbreite */
.container-bottom-b::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 100vw;
transform: translateX(-50%);
background: #171717;
z-index: -1;
}
/* Bottom-b Modultitel Styling */
.container-bottom-b .mod-title,
.container-bottom-b .card-title,
.container-bottom-b h1,
.container-bottom-b h2,
.container-bottom-b h3,
.container-bottom-b h4 {
font-family: 'Source Sans 3', sans-serif; /* 'fuse_bold', sans-serif !important */
font-size: 1.375rem !important; /* 22px */
font-weight: 700;
color: #ffffff !important;
text-align: left !important;
line-height: 1.2 !important;
margin: 0 0 30px !important;
border: 0 !important;
display: block !important;
width: 100% !important;
}
/* Weiße Dekolinie unter den Modultiteln vollständig entfernen */
.container-bottom-b .mod-title::after,
.container-bottom-b .card-title::after,
.container-bottom-b h1::after,
.container-bottom-b h2::after,
.container-bottom-b h3::after,
.container-bottom-b h4::after {
display: none !important;
content: none !important;
border: none !important;
}
/* Texte / Absätze & Listen-Abstände im Modul */
.container-bottom-b p,
.container-bottom-b ul,
.container-bottom-b ol {
font-family: 'Source Sans 3', sans-serif; /* 'fuse_regular', sans-serif !important */
font-size: inherit !important; /* vorher 1.25rem !important 20px */
font-weight: 400;
line-height:1.2 !important;
color: #ffffff !important;
margin: 0 0 16px 0 !important;
}
/* Graue Hintergründe und Rahmen von Bootstrap Cards in Bottom-B auflösen */
.container-bottom-b .card,
.container-bottom-b .card-body,
.container-bottom-b .mod-custom,
.container-bottom-b div[class*="card"] {
background-color: transparent !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
display: block !important; /* Erzwingt, dass Titel oben und Inhalt darunter steht */
width: 100% !important;
text-align: left !important;
}
/* Linkfarben in Bottom-B */
.container-bottom-b a:not(.ilc-btn):not(.btn) {
color: #a2a2a2 !important;
text-decoration: none;
}
.container-bottom-b a:not(.ilc-btn):not(.btn):hover,
.container-bottom-b a:not(.ilc-btn):not(.btn):focus {
color: #ffffff !important;
text-decoration: underline;
}
/* Globales Cleanup für Bottom-A & Bottom-B Modul-Hintergründe & Listen */
div[class*="container-bottom-a"],
div[class*="container-bottom-a"] *,
[class*="container-bottom-b"],
div[class*="container-bottom-b"] * {
background-image: none !important;
}
.container-bottom-a .mod-list > li {
display:inline-block !important;
margin-bottom:1rem !important;
margin-right:1rem !important;
}
.container-bottom-b .mod-list {
list-style:none !important;
padding:0 !important;
margin:0 !important;
}
.container-bottom-b .mod-list > li {
display:block !important;
margin:0 0 15px !important;
padding:0 !important;
}
.container-bottom-b .mod-list > li:last-child {
margin-bottom:0 !important;
}
div[class*="container-bottom-a"] .card,
div[class*="container-bottom-a"] .card-body,
div[class*="container-bottom-b"] .card,
div[class*="container-bottom-b"] .card-body {
background-color: transparent !important;
background: transparent !important;
}
/* --- 4.5 Bottom-B: Container + 3-Spalten-Grid ---------------------------------------------------------- */
/* Bottom-B bleibt mit seinem Inhalt im normalen Cassiopeia-Container */
.container-bottom-b.grid-child {
grid-column: main-start / main-end !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 30px !important;
width: 100% !important;
max-width: 1140px;
margin-left: auto !important;
margin-right: auto !important;
}
/* Modul 1 – Spalte 1 */
.container-bottom-b.grid-child > :nth-child(1) {
grid-column: 1 !important;
grid-row: 1 !important;
}
/* Modul 2 – Spalte 2 */
.container-bottom-b.grid-child > :nth-child(2) {
grid-column: 2 !important;
grid-row: 1 !important;
}
/* Modul 3: Spalte 3 (Oben) */
.container-bottom-b.grid-child > :nth-child(3) {
grid-column: 3 !important;
grid-row: auto !important;
}
/* Modul 4: Spalte 3 (Unten) */
.container-bottom-b.grid-child > :nth-child(4) {
grid-column: 3 !important;
grid-row: auto !important;
margin-top: -128px !important;
}
/* Modul 4 auf Mobil: Spalte 3 (Unten) */
@media (max-width: 767px) {
.container-bottom-b.grid-child > :nth-child(4) {
margin-top: 2rem !important;
}
}
/* Responsive Anpassung für Bottom-B */
@media (max-width: 991px) {
.container-bottom-b.grid-child {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
.container-bottom-b.grid-child > * {
width: 100% !important;
grid-column: auto !important;
grid-row: auto !important;
}
}
@media (max-width: 767.98px) {
.container-bottom-b.grid-child {
padding-left: 25px !important;
padding-right: 25px !important;
box-sizing: border-box;
}
}
/* --- 4.6 Footer ----------------------------------------------------------------------------------- */
/* Footer Höhe und Innenabstände */
.container-footer {
background-color:#000000 !important;
background-image: none !important;
color: #ffffff !important;
padding: 0 !important;
}
/* Footer-Inhalt bleibt im normalen Cassiopeia-Container
und wird horizontal mittig ausgerichtet */
.container-footer .grid-child {
width: 100% !important;
max-width: 1140px;
margin: 0 auto !important;
padding: 30px 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
@media (max-width: 767.98px) {
.container-footer .grid-child {
padding-left: 25px !important;
padding-right: 25px !important;
box-sizing: border-box;
}
}
/* Copyright-Modul */
.container-footer .mod-footer {
font-family: 'Source Sans 3', sans-serif; /* 'fuse_regular',sans-serif !important */
font-size: inherit !important; /* vorher 1.25rem !important 20px */
font-weight: 400;
line-height: 1.2 !important;
text-align: center !important;
color: #ffffff !important;
margin: 0 !important;
padding: 0 !important;
}
.container-footer .mod-footer > :last-child {
margin-bottom: 0 !important;
}
.container-footer a {
color: #a2a2a2 !important;
text-decoration: none;
}
.container-footer a:hover,
.container-footer a:focus,
.container-footer a:active {
color: #ffffff !important;
text-decoration: none;
}
/* ========================================================================================================
5. NAVIGATION (DESKTOP & DROPDOWNS)
===================================================================================================== */
/* Gesamte Menüzeile */
.container-header .container-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 100%;
padding: 0 15px;
background-color: #ffffff;
}
/* Navbar innerhalb der bisherigen 1140px Inhaltsbreite */
.container-header .container-nav .navbar {
position: relative;
width: 100%;
max-width: 1140px;
min-height: 56px;
margin: 0 auto;
padding: 0;
}
/* --------------------------------------------------------------------------
5.1 DESKTOP-NAVIGATION
-------------------------------------------------------------------------- */
@media (min-width: 992px) {
/* Burger auf Desktop ausblenden */
.container-header .container-nav .navbar-toggler {
display: none !important;
}
/* Hauptmenü zentrieren */
.container-header .container-nav .navbar-collapse {
display: flex !important;
flex-basis: auto !important;
flex-grow: 1;
justify-content: center;
align-items: center;
}
.container-header .container-nav .mod-menu {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
justify-content: center !important;
width: auto;
margin: 0 auto !important;
padding: 0 !important;
}
/* Hauptmenüpunkte */
.container-header .container-nav .mod-menu > li {
position: relative;
display: flex !important;
align-items: stretch !important;
margin: 0 !important;
padding: 0 !important;
}
/* Alle möglichen Hauptmenü-Elemente gleich behandeln.
Dadurch sitzt auch "Wissen" auf derselben Höhe. */
.container-header .container-nav .mod-menu > li > a,
.container-header .container-nav .mod-menu > li > button,
.container-header .container-nav .mod-menu > li > span,
.container-header .container-nav .mod-menu > li > .nav-header {
display: flex !important;
align-items: center !important;
justify-content: center;
min-height: 56px;
margin: 0 !important;
padding: 0 15px !important;
border: 0 !important;
background: transparent !important;
appearance: none;
-webkit-appearance: none;
font-family: 'Source Sans 3', sans-serif; /* 'fuse_regular', sans-serif !important */
font-size: 22px !important;
font-weight: 400 !important;
line-height: 1.2 !important;
color: #252525 !important;
-webkit-text-fill-color: #252525 !important;
opacity: 1 !important;
visibility: visible !important;
text-decoration: none !important;
white-space: nowrap;
}
/* Falls Cassiopeia innerhalb von "Wissen"
noch weitere Elemente verwendet. */
.container-header .container-nav .mod-menu > li > button *,
.container-header .container-nav .mod-menu > li > span *,
.container-header .container-nav .mod-menu > li > .nav-header * {
color: inherit !important;
-webkit-text-fill-color: inherit !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Hover / Fokus / aktiver Menüpunkt */
.container-header .container-nav .mod-menu > li:hover > a,
.container-header .container-nav .mod-menu > li:hover > button,
.container-header .container-nav .mod-menu > li:hover > span,
.container-header .container-nav .mod-menu > li:hover > .nav-header,
.container-header .container-nav .mod-menu > li.active > a,
.container-header .container-nav .mod-menu > li.active > button,
.container-header .container-nav .mod-menu > li.current > a {
color: #e9040e !important;
-webkit-text-fill-color: #e9040e !important;
text-decoration: none !important;
}
/* Dropdown-Pfeil schwarz */
.container-header .container-nav .mod-menu .icon-chevron-down,
.container-header .container-nav .mod-menu .mm-toggler-link {
color: #000000 !important;
-webkit-text-fill-color: #000000 !important;
}
/* Dropdown-Chevron ohne Font Awesome – als SVG-Maske */
.container-header .container-nav .mod-menu .icon-chevron-down {
display: inline-block;
width: 0.7em;
height: 0.7em;
margin-left: 8px;
vertical-align: middle;
background-color: currentColor;
-webkit-mask:
url('data:image/svg+xml;utf8,')
no-repeat center / contain;
mask:
url('data:image/svg+xml;utf8,')
no-repeat center / contain;
}
/* ursprüngliche Joomla-/Font-Awesome-Glyphe unterdrücken */
.container-header .container-nav .mod-menu .icon-chevron-down::before {
content: none !important;
}
/* ---------------------------------------------------------------------------------------------
5.2 DESKTOP-DROPDOWN
--------------------------------------------------------------------------------------------- */
.container-header .container-nav .mod-menu > li > ul,
.container-header .container-nav .mod-menu > li > .mod-menu__sub,
.container-header .container-nav .mod-menu > li > .dropdown-menu {
position: absolute !important;
top: 100%;
left: 0;
z-index: 2000;
display: none;
width: 240px;
min-width: 240px;
height: auto !important;
margin: 0 !important;
padding: 10px 0 !important;
background-color: #ffffff !important;
border: 0 !important;
border-radius: 0;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
opacity: 1 !important;
visibility: visible !important;
}
/* Dropdown automatisch bei Hover öffnen */
.container-header .container-nav .mod-menu > li:hover > ul,
.container-header .container-nav .mod-menu > li:focus-within > ul,
.container-header .container-nav .mod-menu > li:hover > .mod-menu__sub,
.container-header .container-nav .mod-menu > li:hover > .dropdown-menu {
display: block !important;
}
/* Untermenüpunkte */
.container-header .container-nav .mod-menu > li > ul > li {
display: block;
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.container-header .container-nav .mod-menu > li > ul > li > a {
display: block;
width: 100%;
padding: 8px 18px;
font-family: 'Source Sans 3', sans-serif; /* 'fuse_regular', sans-serif */
font-size: 22px;
font-weight: 400;
line-height: 1.3;
color: #252525 !important;
background-color: #ffffff !important;
text-decoration: none !important;
white-space: nowrap;
}
.container-header .container-nav .mod-menu > li > ul > li > a:hover,
.container-header .container-nav .mod-menu > li > ul > li.active > a,
.container-header .container-nav .mod-menu > li > ul > li.current > a {
color: #e9040e !important;
background-color: #ffffff !important;
}
}
/* =============================================================================================================
6. MOBILE NAVIGATION & BURGER-MENÜ
========================================================================================================== */
@media (max-width: 991.98px) {
/* Menüzeile */
.container-header .container-nav {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
min-height: 60px;
padding: 0 15px;
}
.container-header .container-nav .navbar {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
min-height: 60px;
margin: 0;
padding: 0;
}
/* -------------------------------------------------------------------------------------------------
6.1 BURGER
---------------------------------------------------------------------------------------------- */
.container-header .container-nav .navbar-toggler {
display: flex !important;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 0 0 0 auto !important;
padding: 0 !important;
color: #000000 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0;
box-shadow: none !important;
}
/* Burger-Icon ohne Font Awesome */
.container-header .container-nav .navbar-toggler .icon-menu {
position: relative;
display: block;
width: 28px;
height: 18px;
color: #000000 !important;
font-family: inherit !important;
font-size: 0 !important;
}
/* Drei Burger-Linien */
.container-header .container-nav .navbar-toggler .icon-menu::before {
content: "" !important;
position: absolute;
top: 1px;
left: 0;
width: 28px;
height: 2px;
background: currentColor;
box-shadow:
0 7px 0 currentColor,
0 14px 0 currentColor;
}
.container-header .container-nav .navbar-toggler:focus {
outline: none;
box-shadow: none !important;
}
/* ------------------------------------------------------------------------------------------------
6.2 AUFGEKLAPPTES MOBILES MENÜ
---------------------------------------------------------------------------------------------- */
/* Absolut über dem Seiteninhalt:
Der Hero wird beim Öffnen nicht nach unten geschoben. */
.container-header .container-nav .navbar-collapse {
position: absolute !important;
top: 100%;
left: -15px;
right: -15px;
z-index: 2000;
width: auto;
padding: 15px 25px 20px;
background-color: #ffffff !important;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
/* Geschlossen */
.container-header .container-nav .navbar-collapse:not(.show):not(.collapsing) {
display: none !important;
}
/* Geöffnet */
.container-header .container-nav .navbar-collapse.show,
.container-header .container-nav .navbar-collapse.collapsing {
display: block !important;
}
/* -------------------------------------------------------------------------------------------------
6.3 MOBILE HAUPTMENÜPUNKTE
---------------------------------------------------------------------------------------------- */
.container-header .container-nav .mod-menu {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.container-header .container-nav .mod-menu > li {
display: block !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
/* Alle möglichen Hauptmenüelemente gleich behandeln.
Dadurch bleibt auch "Wissen" mobil sichtbar. */
.container-header .container-nav .mod-menu > li > a,
.container-header .container-nav .mod-menu > li > button,
.container-header .container-nav .mod-menu > li > span,
.container-header .container-nav .mod-menu > li > .nav-header {
display: flex !important;
align-items: center !important;
width: 100%;
min-height: 0;
margin: 0 !important;
padding: 10px 0 !important;
border: 0 !important;
background: transparent !important;
appearance: none;
-webkit-appearance: none;
font-family: 'Source Sans 3', sans-serif; /* 'fuse_regular', sans-serif !important */
font-size: 20px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
text-align: left !important;
color: #252525 !important;
-webkit-text-fill-color: #252525 !important;
opacity: 1 !important;
visibility: visible !important;
text-decoration: none !important;
}
/* Auch eventuell innere Elemente von "Wissen" sichtbar halten */
.container-header .container-nav .mod-menu > li > button *,
.container-header .container-nav .mod-menu > li > span *,
.container-header .container-nav .mod-menu > li > .nav-header * {
color: inherit !important;
-webkit-text-fill-color: inherit !important;
opacity: 1 !important;
visibility: visible !important;
}
/* --------------------------------------------------------------------------------------------
6.4 UNTERMENÜS MOBIL IMMER SICHTBAR
------------------------------------------------------------------------------------------ */
.container-header .container-nav .navbar-collapse .mod-menu > li > ul,
.container-header .container-nav .navbar-collapse .mod-menu__sub,
.container-header .container-nav .navbar-collapse .mm-collapse,
.container-header .container-nav .navbar-collapse .dropdown-menu {
display: block !important;
position: static !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 0 0 20px !important;
background-color: #ffffff !important;
border: 0 !important;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/* Untermenüpunkte */
.container-header .container-nav .navbar-collapse
.mod-menu > li > ul > li {
display: block;
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.container-header .container-nav .navbar-collapse
.mod-menu > li > ul > li > a {
display: block;
width: 100%;
padding: 6px 0;
font-family: 'Source Sans 3', sans-serif; /* 'fuse_regular', sans-serif */
font-size: 20px;
font-weight: 400;
line-height: 1.4;
color: #252525 !important;
-webkit-text-fill-color: #252525 !important;
background: transparent !important;
text-decoration: none !important;
}
/* Aktuelle Seite rot markieren */
.container-header .container-nav .navbar-collapse
.mod-menu li.active > a,
.container-header .container-nav .navbar-collapse
.mod-menu li.current > a {
color: #e9040e !important;
-webkit-text-fill-color: #e9040e !important;
}
}
/* Sehr kleine Displays etwas kompakter */
@media (max-width: 575.98px) {
.container-header .container-nav,
.container-header .container-nav .navbar {
min-height: 50px;
}
.container-header .container-nav .navbar-toggler {
width: 42px;
height: 42px;
}
}
/* =====================================================================================================
7. HERO BANNER - GEMEINSAME BASIS
================================================================================================== */
.ilc-fullwidth-hero {
width: 100vw;
margin-left: calc(-50vw + 50%);
position: relative;
}
.ilc-hero-section {
position: relative;
width: 100%; /* oder 100vw */
min-height: 430px;
overflow: hidden;
margin: 0;
padding: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media (max-width:768px) {
.ilc-hero-section {
min-height: 380px;
}
}
/* Hintergrundbild */
.ilc-hero-image {
position: absolute;
width: 100vw;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Hero Grid */
.ilc-ss-grid-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
display: grid;
grid-template-areas: "cover";
}
.ilc-ss-slider-inner {
grid-area: cover;
place-self: center;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 0; /* vorher 0 10px 5px 10px */
}
.ilc-ss-layer {
width: 100%;
display: flex;
justify-content: center;
}
.ilc-ss-layer img {
display: block;
max-width: 100%;
height: auto;
}
/* ---------------------------------------------------------------------------------------------------
7.1 HERO STANDARD (SW1)
------------------------------------------------------------------------------------------------- */
.ilc-logo-desktop-var1 {
width: 565px;
}
.ilc-logo-desktop-var1 picture,
.ilc-logo-desktop-var1 img {
display: block;
width: 100%;
height: auto;
}
.ilc-logo-mobile-var1 {
width: calc(100% - 20px);
max-width: 380px;
margin: 0 auto;
}
.ilc-logo-mobile-var1 picture,
.ilc-logo-mobile-var1 img {
display: block;
width: 100%;
height: auto;
}
@media (min-width:768px) {
.ilc-logo-mobile-var1 {
display: none;
}
}
@media (max-width:767px) {
.ilc-logo-desktop-var1 {
display: none;
}
}
.ilc-hero-animation-var1 {
opacity: 0;
animation: heroZoomIn .6s cubic-bezier(0.22,1,0.36,1) .2s forwards;
}
@keyframes heroZoomIn {
0% {
opacity: 0;
transform: scale(1.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* -----------------------------------------------------------------------------------------------------
7.2 HERO PROBEMONAT (SW2)
-------------------------------------------------------------------------------------------------- */
.ilc-hero-probemonat {
min-height: 430px;
}
.ilc-logo-desktop-var2 {
max-width: 490px;
margin-bottom: 10px;
}
.ilc-button-layer {
max-width: 295px;
}
.ilc-button-layer a {
display: block;
width: 100%;
transition: transform .2s ease;
}
.ilc-button-layer a:hover {
transform: scale(1.03);
}
@media (min-width:768px) {
.ilc-logo-mobile-var2 {
display: none;
}
}
@media (max-width:767px) {
.ilc-logo-desktop-var2 {
display: none;
}
.ilc-logo-mobile-var2 {
width:calc(100% - 20px);
max-width:380px;
margin:0 auto 20px auto;
display:flex;
}
.ilc-button-layer {
max-width: 260px;
margin-top: -5px;
}
}
.ilc-hero-animation-var2 {
opacity: 0;
animation: heroFadeInVar2 .6s cubic-bezier(0.22,1,0.36,1) .2s forwards;
}
@keyframes heroFadeInVar2 {
0% {
opacity: 0;
transform: scale(1.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.ilc-probemonat-animation-var2 {
opacity: 0;
animation: smartSliderSwingVar2 700ms cubic-bezier(0.5,0,0.75,0) 550ms forwards;
transform-origin: center center;
}
@keyframes smartSliderSwingVar2 {
0% {
opacity: 0;
transform: rotate(-15deg);
}
25% {
transform: rotate(10deg);
}
50% {
transform: rotate(-5deg);
}
75% {
transform: rotate(5deg);
}
100% {
opacity: 1;
transform: rotate(0deg);
}
}
/* =====================================================================================================
8.1 INHALTS-ELEMENTE (TEXT, ZITATE, BLOG & ACCORDIONS)
================================================================================================== */
/* Eigene Utility-Klassen */
.trainingsplan {
border-left: 5px solid #e9040e;
padding-left: 0.4375rem; /* 7px */
}
/* Trainingsplan Modul */
.ilc-trainingsplan-modul {
width:100%;
padding:0; /* vorher 50px 0 */
box-sizing:border-box;
}
.ilc-trainingsplan-heading {
margin-top:0;
margin-bottom:30px;
color:#777;
text-align:left;
}
.ilc-trainingsplan-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
column-gap: 30px;
row-gap: 30px;
}
.ilc-trainingsplan-card {
min-width: 0;
}
.ilc-trainingsplan-card[hidden] {
display: none !important;
}
.ilc-trainingsplan-card .trainingsplan {
margin-bottom: 0;
line-height: 1.4;
}
.ilc-trainingsplan-card-title {
display: flex;
align-items: center;
gap:.4rem;
margin-bottom:.15rem;
color:#c9040c;
}
@media(max-width:991.98px) {
.ilc-trainingsplan-grid {
grid-template-columns:1fr;
}
}
.titelrot {
color: #E9040E;
padding: 0;
background: none;
}
.pre-footer {
border-left: 3px solid #e9040e;
padding-left: 1.25rem; /* 20px */
padding-bottom: 0.625rem; /* 10px */
}
/* Blockquotes */
blockquote {
box-sizing: border-box;
width: 100%;
margin: 30px 0;
padding: 1.2em 1.875rem 1.2em 4.6875rem;
position: relative;
border-left: 5px solid #e9040e;
background-color: #e7e7ea;
color: #727281;
font-size: 1.4em;
font-style: italic;
line-height: 1.6;
}
/* Großes Anführungszeichen */
blockquote::before {
/* font-family: Arial, sans-serif; */
font-family: 'Source Sans 3', sans-serif; /* 'fuse_regular', Arial, sans-serif */
content: "\201C";
color: #727281;
font-size: 3em;
font-weight: 800;
position: absolute;
left: 0.625rem;
top: -10px;
}
/* Zitattext */
blockquote p {
display: inline;
font-style: italic;
font-size: 1.5rem; /* 24px */
color: #727281;
}
/* Name unter dem Zitat */
blockquote footer {
display: block;
margin-top: 12px;
font-size: 1.125rem;
line-height: 1.4;
font-style: normal;
color: #434357;
}
blockquote footer cite {
font-style: normal;
color: inherit;
}
/* Mobil */
@media (max-width: 767.98px) {
blockquote {
padding: 20px 15px 20px 55px;
}
blockquote::before {
font-size: 2.5em;
left: 8px;
top: 8px;
}
blockquote p {
font-size: 1.25rem;
}
blockquote footer {
font-size: 1rem;
}
}
/* Joomla Blog & Main Content (Cassiopeia)------------------------------------------------ */
.main-content {
padding: 50px 0;
}
/* Blog-Beitragstitel & Links */
.com-content-category .item-title a,
.blog .item-title a {
color: #727281;
text-decoration: none;
}
.com-content-category .item-title a:hover,
.com-content-category .item-title a:active,
.com-content-category .item-title a:focus,
.blog .item-title a:hover,
.blog .item-title a:active,
.blog .item-title a:focus {
color: #e9040e;
}
/* Intro-Bilder im Cassiopeia-Blog */
.com-content-category .item-image,
.blog .item-image {
margin-bottom: 1.25rem; /* 20px */
border-radius: 10px 10px 0 0;
overflow: hidden;
}
.com-content-category .item-image img,
.blog .item-image img {
border-radius: 10px 10px 0 0;
width: 100%;
height: auto;
}
.card-header {
padding: 0;
color: var(--card-cap-color);
background-color: transparent;
border-bottom: var(--card-border-width) solid var(--card-border-color);
margin-bottom: 0;
}
/* Sprungmarken: Abstand für Sticky Header */
html {
scroll-padding-top:75px;
}
/* Zeilenumbruch nur auf Desktop */
.ilc-br-desktop {
display: block;
}
@media (max-width: 767.98px) {
.ilc-br-desktop {
display: none;
}
}
.ilc-br-mobile {
display: none;
}
@media (max-width: 767.98px) {
.ilc-br-mobile {
display: block;
}
}
/* ===================================================================================================
8.2 ALLGEMEINE ILC BUTTON-KLASSEN
================================================================================================= */
/* Allgemeine Basis-Buttonklasse */
a.ilc-btn,
button.ilc-btn,
.ilc-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
background-color: #e9040e !important;
color: #ffffff !important;
padding: 10px 20px !important;
font-size: 1.25rem !important; /* 20px */
font-weight: 400 !important;
line-height: 1.3 !important;
text-decoration: none !important;
border: none !important;
border-radius: 5px !important;
cursor: pointer;
transition: opacity 0.2s ease-in-out !important;
box-sizing: border-box !important;
}
/* Hover & Focus State: Hintergrund bleibt rot, Text wird schwarz */
a.ilc-btn:hover,
a.ilc-btn:focus,
button.ilc-btn:hover,
button.ilc-btn:focus,
.ilc-btn:hover,
.ilc-btn:focus {
background-color: #e9040e !important;
color: #000000 !important;
text-decoration: none !important;
}
/* Newsletter-Icon Zusatzklasse (Zeitung) */
.ilc-btn-newsletter::before {
content: "" !important;
display: inline-block !important;
width: 18px !important;
height: 18px !important;
background-color: currentColor !important;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain !important;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain !important;
flex-shrink: 0;
}
/* ======================================================================================================
8.3 ALLGEMEINE ILC ICONS
==================================================================================================== */
/* Allgemeine Basis für kleine Inline-Icons */
.ilc-icon {
display: inline-block;
width: 1em;
height: 1em;
flex: 0 0 auto;
vertical-align: -0.125em;
}
/* E-Mail / Briefumschlag */
.ilc-icon-mail,
.ilc-kontakt-bg .postbox-button::before {
background-color: currentColor;
-webkit-mask:
url('data:image/svg+xml;utf8,')
no-repeat center / contain;
mask:
url('data:image/svg+xml;utf8,')
no-repeat center / contain;
}
/* PDF / Dokument */
.ilc-icon-pdf {
width: 1em;
height: 1em;
background-color: currentColor;
--ilc-pdf-icon:
url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202.5h7.2L18%207.3v14.2H6z%22%2F%3E%3Cpath%20d%3D%22M13.2%202.5v4.8H18%22%2F%3E%3Cpath%20d%3D%22M8.2%2017.8c1.8-2.9%203.1-6.2%203.8-9.8.7%203.2%202.3%205.9%204.8%208-3-.6-5.9%200-8.6%201.8z%22%2F%3E%3C%2Fsvg%3E");
-webkit-mask: var(--ilc-pdf-icon) no-repeat center / contain;
mask: var(--ilc-pdf-icon) no-repeat center / contain;
}
/* Kalender */
.ilc-icon-calendar {
width: 1.1em;
height: 1.1em;
flex: 0 0 auto;
background-color: currentColor;
--ilc-calendar-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012C2%208.22876%202%206.34315%203.17157%205.17157C4.34315%204%206.22876%204%2010%204H14C17.7712%204%2019.6569%204%2020.8284%205.17157C22%206.34315%2022%208.22876%2022%2012V14C22%2017.7712%2022%2019.6569%2020.8284%2020.8284C19.6569%2022%2017.7712%2022%2014%2022H10C6.22876%2022%204.34315%2022%203.17157%2020.8284C2%2019.6569%202%2017.7712%202%2014V12Z%22%2F%3E%3Cpath%20d%3D%22M7%204V2.5%22%2F%3E%3Cpath%20d%3D%22M17%204V2.5%22%2F%3E%3Cpath%20d%3D%22M2.5%209H21.5%22%2F%3E%3Cpath%20d%3D%22M17%2013H17.0001%22%2F%3E%3Cpath%20d%3D%22M12%2013H12.0001%22%2F%3E%3Cpath%20d%3D%22M7%2013H7.0001%22%2F%3E%3Cpath%20d%3D%22M17%2017.0234H17.0001%22%2F%3E%3Cpath%20d%3D%22M12%2017.0234H12.0001%22%2F%3E%3Cpath%20d%3D%22M7%2017.0234H7.0001%22%2F%3E%3C%2Fsvg%3E");
-webkit-mask: var(--ilc-calendar-icon) no-repeat center / contain;
mask: var(--ilc-calendar-icon) no-repeat center / contain;
}
/* Personen / Gruppe */
.ilc-icon-group {
background-color: currentColor;
--ilc-group-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2011c1.66%200%202.99-1.34%202.99-3S17.66%205%2016%205s-3%201.34-3%203%201.34%203%203%203zm-8%200c1.66%200%202.99-1.34%202.99-3S9.66%205%208%205%205%206.34%205%208s1.34%203%203%203zm0%202c-2.33%200-7%201.17-7%203.5V19h14v-2.5C15%2014.17%2010.33%2013%208%2013zm8%200c-.29%200-.62.02-.97.05%201.16.84%201.97%201.97%201.97%203.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z%22%2F%3E%3C%2Fsvg%3E");
-webkit-mask: var(--ilc-group-icon) no-repeat center / contain;
mask: var(--ilc-group-icon) no-repeat center / contain;
}
/* Stern */
.ilc-icon-star {
position: relative;
background-color: transparent;
--ilc-star-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.5l2.9%205.88%206.49.94-4.7%204.58%201.11%206.46L12%2017.31l-5.8%203.05%201.11-6.46-4.7-4.58%206.49-.94L12%202.5z%22%2F%3E%3C%2Fsvg%3E");
}
.ilc-icon-star::before {
content: "";
position: absolute;
inset: 0;
background-color: currentColor;
-webkit-mask: var(--ilc-star-icon) no-repeat center / contain;
mask: var(--ilc-star-icon) no-repeat center / contain;
}
/* Bewertungssterne */
.ilc-stars {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-bottom: 40px;
}
.ilc-stars .ilc-icon-star {
width: 3rem;
height: 3rem;
color: #f5b301;
filter: drop-shadow(1px 1px 2px #000000);
}
/* ====================================================================================================
9. COOKIE CONSENT & UTILITIES
================================================================================================= */
span.cc-cookie-settings-toggler {
display: none;
}
/* Schalter für Cookie-Einstellungen */
span.cc-message span.cc-cookie-settings-toggle {
padding: 0.2em 0.4em; /* em hält das Padding proportional zur Button-Schriftgröße */
font-size: 0.9em;
border-width: 2px;
border-style: solid;
text-align: center;
white-space: nowrap;
display: block;
margin-top: 0.25rem; /* rem hält den Abstand zum Fließtext im globalen Raster (4px) */
}
/* Button zur Zustimmung */
div.cc-compliance > a.cc-btn {
margin-right: 0;
margin-top: 0.2em;
}
/* Cookie-Dialog stabil zentrieren – ohne nachträglichen Margin-Shift */
div.cc-window.cc-floating.cc-center {
position: fixed !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
transform: translate(-50%, -50%) !important;
max-height: calc(100dvh - 30px) !important;
overflow: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* Mobil: Dialog mit sicherem Scrollbereich */
@media (max-width: 767.98px) {
div.cc-window.cc-floating.cc-center {
top: 50% !important;
bottom: auto !important;
left: 50% !important;
right: auto !important;
width: calc(100% - 30px) !important;
max-width: 32em !important;
max-height: calc(100dvh - 30px) !important;
transform: translate(-50%, -50%) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-y;
}
}
/* Logo im Cookie-Dialog */
.cc-window .ilc-cookie-logo-picture {
width: 300px !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
.cc-window .ilc-cookie-logo {
display: block !important;
width: 100% !important;
height: auto !important;
}
/* Mobil kleiner */
@media (max-width: 767.98px) {
.cc-window .ilc-cookie-logo-picture {
width: 150px !important;
}
}
/* =============================================================================================================
10. Neues Allgemeines
=========================================================================================================== */
/* Erzwingen voller Breite Workaround.
Verhindert das Feststecken im Boxed-Layout.
Im SPPB / Beitrag einfach der Sektion die Klasse "force-full-width" zuweisen. */
.force-full-width {
width: 100vw !important;
position: relative !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
}
/* -----------------------------------------------------------------------------------------------
10.1 ILC SEKTIONEN
--------------------------------------------------------------------------------------------- */
/* Allgemeine Inhaltssektion.
- Inhalt maximal 1140px breit.
- Horizontaler Innenabstand: 15px Desktop, 25px Mobil.
- Der Abstand ZWISCHEN zwei Sektionen wird über margin-bottom erzeugt.
- Innenabstände von Bereichen mit sichtbarem Hintergrund werden separat
über .ilc-bg-sektion geregelt. */
.ilc-sektion {
position: relative;
width: 100%;
max-width: 1140px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
padding-left: 15px;
padding-right: 15px;
}
@media (max-width: 767.98px) {
.ilc-sektion {
margin-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
}
.ilc-sektion > .ilc-media-block:last-child {
margin-bottom: 0;
}
.ilc-container {
padding-left: 25px;
padding-right: 25px;
}
}
/* Innerer Inhaltscontainer für Fullwidth-Bereiche.
Hintergrund darf über die gesamte Browserbreite laufen,
Inhalt bleibt auf maximal 1140px begrenzt. */
.ilc-container {
width: 100%;
max-width: 1140px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
/* Fullwidth-Sektionen selbst nicht auf 1140px begrenzen */
.ilc-sektion.force-full-width {
max-width: none;
padding-left: 0;
padding-right: 0;
}
/* Ganze Sektion zentrieren */
.ilc-sektion-center {
text-align: center;
}
/* Zentrierter Überschriften-/Kopfbereich */
.ilc-heading-center {
margin-bottom: 30px;
text-align: center;
}
.ilc-heading-center > :first-child {
margin-top: 0;
}
.ilc-heading-center > :last-child {
margin-bottom: 0;
}
/* Kopfbereich am Anfang einer Inhaltsseite */
.ilc-sektion-top > .ilc-heading-center,
.ilc-sektion-top > h1 {
margin-bottom: 50px;
}
@media (max-width: 767.98px) {
.ilc-sektion-top > .ilc-heading-center,
.ilc-sektion-top > h1 {
margin-bottom: 30px;
}
}
/* Brush-Hintergrund für hervorgehobene Überschriften */
.ilc-brush-bg {
background-image: url('/images/home/Brush.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
background-attachment: inherit;
padding: 2rem 0;
z-index: 0;
}
@media (max-width: 767.98px) {
.ilc-brush-bg {
position: relative;
background-image: none;
}
.ilc-brush-bg::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 100vw;
transform: translateX(-50%);
background: url('/images/home/Brush.jpg') no-repeat center center;
background-size: cover;
z-index: -1;
}
}
.ilc-brush-bg > :first-child {
margin-top: 0;
}
.ilc-brush-bg > :last-child {
margin-bottom: 0;
}
/* Hintergrundsektion mit Parallax-Effekt.
Diese Klasse definiert nur das gemeinsame Verhalten:
gleichmäßiger Innenabstand oben/unten, Cover-Darstellung,
zentrierte Bildposition und Parallax auf Desktop.
Das konkrete Hintergrundbild wird separat z. B. über .ilc-bg-grau gewählt. */
.ilc-bg-sektion {
padding-top: 50px;
padding-bottom: 50px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
/* Tablet: etwas kompakterer, weiterhin symmetrischer Innenabstand. */
@media (max-width: 991.98px) {
.ilc-bg-sektion {
padding-top: 40px;
padding-bottom: 40px;
}
}
/* Mobil: kompakterer Innenabstand.
background-attachment: scroll verhindert Probleme mit fixed backgrounds
auf mobilen Browsern. */
@media (max-width: 767.98px) {
.ilc-bg-sektion {
padding-top: 30px;
padding-bottom: 30px;
background-attachment: scroll;
}
}
/* Graue Hintergrundvariante.
JPG dient als klassischer Browser-Fallback.
Moderne Browser können über image-set() die kleinere WebP-Datei verwenden.
background-color bleibt sichtbar, falls kein Bild geladen werden kann. */
.ilc-bg-grau {
background-color: #e7e7ea;
background-image: url('/images/website_pics/hg_grau_quer.jpg');
background-image: image-set(
url('/images/website_pics/hg_grau_quer.webp') type('image/webp'),
url('/images/website_pics/hg_grau_quer.jpg') type('image/jpeg')
);
}
/* --------------------------------------------------------------------------------------------------
10.2 ILC GRID-SYSTEM
------------------------------------------------------------------------------------------------ */
/* 3 / 9 Spalten */
.ilc-grid-3-9 {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
align-items: start;
gap: 30px;
}
/* 9 / 3 Spalten */
.ilc-grid-9-3 {
display: grid;
grid-template-columns: minmax(0, 9fr) minmax(0, 3fr);
align-items: start;
gap: 30px;
}
/* 4 / 8 Spalten */
.ilc-grid-4-8 {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
align-items: center;
gap: 30px;
}
.ilc-grid-4-8 > * {
min-width: 0;
}
@media(max-width:767.98px) {
.ilc-grid-4-8 {
grid-template-columns: 1fr;
}
}
/* 6 / 6 Spalten */
.ilc-grid-6-6 {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: 30px;
}
/* 4 / 4 / 4 – drei gleich große Spalten */
.ilc-grid-3 {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
align-items: start;
gap: 30px;
}
/* 3 / 3 / 3 / 3 – vier gleich große Spalten */
.ilc-grid-4 {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 30px;
}
/* Grid-Inhalte dürfen sauber schrumpfen */
.ilc-grid-3-9 > *,
.ilc-grid-9-3 > *,
.ilc-grid-6-6 > *,
.ilc-grid-3 > *,
.ilc-grid-4 > * {
min-width: 0;
}
/* Bildspalten */
.ilc-grid-media {
width: 100%;
text-align: center;
}
/* Überschrift innerhalb eines Grid-Textblocks */
.ilc-grid-title {
margin-top: 0;
margin-bottom: 1rem; /*16px*/
text-align: left;
}
.ilc-grid-text > :last-child {
margin-bottom: 0;
}
/* Responsive */
@media(max-width:991.98px) {
.ilc-grid-6-6,
.ilc-grid-3 {
grid-template-columns: 1fr;
}
.ilc-grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Gestapelte 6/6-Blöcke: auf Tablet/Mobil Text vor Bild */
@media(max-width:991.98px) {
.ilc-grid-text-zuerst-mobil > .ilc-grid-text {
order: 1;
}
.ilc-grid-text-zuerst-mobil > .ilc-grid-media {
order: 2;
}
}
@media(max-width:767.98px) {
.ilc-grid-3-9,
.ilc-grid-9-3,
.ilc-grid-4 {
grid-template-columns: 1fr;
}
}
/* Inhalt innerhalb einer Grid-Spalte */
.ilc-grid-media,
.ilc-grid-text {
min-width: 0;
}
/* Zentrierte 6er und 8er-Spalten – entspricht 3/6/3 oder 2/8/2 */
.ilc-content-6 {
width: 50%;
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
.ilc-content-8 {
width: 66.6667%;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 767.98px) {
.ilc-content-6,
.ilc-content-8 {
width: 100%;
max-width: none;
}
}
/* Standardbreite für längere Fließtexte */
.ilc-content-text {
width: 100%;
max-width: 850px;
margin-left: auto;
margin-right: auto;
}
/* ---------------------------------------------------------------------------------------------------
10.3 ILC BILDER & MEDIEN
------------------------------------------------------------------------------------------------ */
.ilc-picture {
display: block;
width: 100%;
}
/* Standardbild */
.ilc-bild {
display: block;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
/* Feste maximale Bildgrößen */
.ilc-bild-240 {
width: 100%;
max-width: 240px;
border-radius: 0;
}
.ilc-bild-480 {
width: 100%;
max-width: 480px;
}
/* Mediencontainer für Inhaltsbilder */
.ilc-media-600,
.ilc-media-850 {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.ilc-media-600 {
max-width: 600px;
}
.ilc-media-850 {
max-width: 850px;
}
/* Bilder füllen ihren definierten Mediencontainer vollständig aus */
.ilc-media-600 .ilc-bild,
.ilc-media-850 .ilc-bild {
width: 100%;
}
/* Medienblock innerhalb normaler Inhalte */
.ilc-media-block {
width: 100%;
margin-top: 30px;
margin-bottom: 30px;
text-align: center;
}
@media(max-width:767.98px) {
.ilc-media-block > a {
-webkit-tap-highlight-color: transparent;
}
}
.ilc-bild-eckig {
border-radius: 0;
}
/* -------------------------------------------------------------------------------------------------
10.4 ILC VIDEOS
----------------------------------------------------------------------------------------------- */
/* Standard-Container für normale lokale Videos und YouTube-Videos.
Der spezielle Startseiten-/Hero-Videobereich bleibt davon unberührt. */
.ilc-video {
width: 100%;
max-width: 850px;
margin-left: auto;
margin-right: auto;
}
/* Responsiver 16:9 Videorahmen */
.ilc-video-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 10px;
background-color: #000000;
}
/* Lokales Video und iframe füllen den Rahmen vollständig */
.ilc-video-frame iframe,
.ilc-video-frame video {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* Lokale Videos */
.ilc-video-frame video {
object-fit: cover;
}
/* Beschriftung unter Videos */
.ilc-caption {
width: 100%;
max-width: 850px;
margin: 10px auto 0;
font-size: 1.125rem; /* 18px */
font-weight: 400;
line-height: 1.4;
color: #727281;
text-align: center;
}
/* Mobil */
@media (max-width: 767.98px) {
.ilc-caption {
font-size: 1rem; /* 16px */
}
}
/* ----------------------------------------------------------------------------------------
10.5 DIVIDER
------------------------------------------------------------------------------------- */
.ilc-divider {
width: 100%;
max-width: 850px;
height: 0;
margin-top: 60px;
margin-bottom: 60px;
margin-right: auto;
margin-left: auto;
border: 0;
border-top: 3px solid #e9040e;
border-radius: 0;
opacity: 1;
}
/* Tablet */
@media (max-width: 1199.98px) {
.ilc-divider {
max-width: 550px;
margin-top: 50px;
margin-bottom: 50px;
}
}
/* Mobil */
@media (max-width: 767.98px) {
.ilc-divider {
max-width: 300px;
margin-top: 40px;
margin-bottom: 40px;
}
}
/* Divider direkt am Anfang einer Sektion:
oberen Abstand übernimmt die Sektion selbst */
.ilc-sektion > .ilc-divider:first-child {
margin-top: 0;
}
/* ===================================================================================================
10.6 TEXT, AUSRICHTUNG, LISTEN & CTA
================================================================================================ */
/* --------------------------------------------------------------------------
Textblock
-------------------------------------------------------------------------- */
.ilc-textblock h2 {
margin-top: 1.875rem; /* 30px */
margin-bottom: 1.875rem; /* 30px */
}
.ilc-textblock > h2:first-child {
margin-top: 0;
}
.ilc-textblock h3 {
margin-top: 1.875rem; /* 30px */
margin-bottom: 1.875rem; /* 30px */
}
.ilc-textblock > :last-child {
margin-bottom: 0;
}
/* ----------------------------------------------------------------------------------------
Ausrichtung
------------------------------------------------------------------------------------- */
.ilc-text-left {
text-align: left;
}
.ilc-text-left :is(h1, h2, h3, h4, h5, h6) {
text-align: left;
}
.ilc-text-center {
text-align: center;
}
.ilc-text-center :is(h1, h2, h3, h4, h5, h6) {
text-align: center;
}
/* Nur mobil linksbündig */
@media(max-width:767.98px) {
.ilc-text-left-mobil {
text-align: left;
}
.ilc-text-left-mobil :is(h1, h2, h3, h4, h5, h6) {
text-align: left;
}
}
/* --------------------------------------------------------------------------
Akzentlinie
-------------------------------------------------------------------------- */
/* Allgemeine rote Seitenlinie für hervorgehobene Textbereiche */
.ilc-akzentlinie {
border-left: 4px solid #e9040e;
padding-left: 25px;
}
.ilc-akzentlinie > :last-child {
margin-bottom: 0;
}
@media(max-width:767.98px) {
.ilc-akzentlinie {
padding-left: 15px;
}
}
/* --------------------------------------------------------------------------
Termin-/Zeit-Badge
-------------------------------------------------------------------------- */
.ilc-zeit-badge {
display: inline-block;
margin-top: 4px;
padding: 2px 7px;
background-color: #e9040e;
color: #ffffff;
line-height: 1.4;
}
/* Überschrift mit Icon */
.ilc-heading-with-icon {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0.625rem; /* 10px */
}
.ilc-heading-icon {
width: 1em;
height: 1em;
flex: 0 0 auto;
margin-top: 0.1em;
color: #e9040e;
fill: currentColor;
}
.ilc-heading-text {
display: block;
text-align: center;
}
@media(max-width:767.98px) {
.ilc-heading-with-icon {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
justify-content: center;
gap: 8px;
}
.ilc-heading-with-icon .ilc-heading-text {
min-width: 0;
text-align: center;
}
}
/* --------------------------------------------------------------------------
Checkliste
-------------------------------------------------------------------------- */
.ilc-checkliste {
margin-top: 0;
margin-bottom: 30px;
padding-left: 18px;
list-style: none;
}
.ilc-checkliste li {
position: relative;
padding-left: 38px;
}
.ilc-checkliste li::before {
content: "";
position: absolute;
top: 0.08em;
left: 0;
width: 26px;
height: 26px;
background-color: #28a745;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5 9 17.5 20 6.5' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5 9 17.5 20 6.5' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / contain no-repeat;
}
.ilc-checkliste li:last-child {
margin-bottom: 0;
}
/* --------------------------------------------------------------------------
CTA
-------------------------------------------------------------------------- */
.ilc-cta {
width: 100%;
text-align: center;
}
.ilc-cta h3 {
margin-top: 0;
margin-bottom: 15px;
font-size: 2.25rem; /* 36px */
line-height: 3rem; /* 48px */
}
.ilc-cta p {
margin-bottom: 30px;
font-size: inherit; /* vorher 1.125rem 18px */
line-height: inherit; /* vorher 1.625rem 26px */
}
/* Tablet */
@media (max-width: 1199.98px) {
.ilc-cta h3 {
font-size: 2rem; /* 32px */
line-height: 2.25rem; /* 36px */
}
}
/* Mobil */
@media (max-width: 767.98px) {
.ilc-textblock h2 {
margin-bottom: 20px;
}
.ilc-textblock h3 {
margin-top: 30px;
margin-bottom: 12px;
}
.ilc-cta h3 {
font-size: 1.5rem; /* 24px */
line-height: 2rem; /* 32px */
}
.ilc-cta p {
font-size: inherit; /* vorher 1rem 16px */
line-height: inherit; /* vorher 1.5rem 24px */
}
}
/* ==================================================================================================
10.7 STARTSEITE – SPEZIFISCHE AUSNAHMEN
=============================================================================================== */
/* --------------------------------------------------------------------------
Balance
-------------------------------------------------------------------------- */
/* Etwas mehr Abstand zwischen Brush-Überschrift und erster Balance-Reihe */
#balance > .ilc-heading-center {
margin-bottom: 45px;
}
/* Abstand nur zwischen den Balance-Reihen */
#balance > :is(.ilc-grid-3-9, .ilc-grid-9-3)
+ :is(.ilc-grid-3-9, .ilc-grid-9-3) {
padding-top: 55px;
}
@media (max-width: 1199.98px) {
#balance .ilc-grid-3-9,
#balance .ilc-grid-9-3 {
grid-template-columns: 1fr;
}
/* In der gestapelten Darstellung immer Bild vor Text */
#balance .ilc-grid-media {
order: 1;
}
#balance .ilc-grid-text {
order: 2;
padding-left: 10px;
padding-right: 10px;
}
}
@media (max-width: 767.98px) {
#balance .ilc-grid-text {
padding-left: 0;
padding-right: 0;
}
}
/* --------------------------------------------------------------------------
Vorteile
-------------------------------------------------------------------------- */
#vorteile .ilc-grid-title {
margin-bottom: 30px;
padding-left: 18px;
}
/* --------------------------------------------------------------------------
Training wichtig – Mobil
-------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
#training-wichtig > .ilc-media-block:first-child {
margin-top: 0;
}
}
/* ===========================================================================================================
10.8 TESTIMONIALS / ERFAHRUNGSBERICHTE
======================================================================================================== */
/* --------------------------------------------------------------------------
Testimonial Sektion
-------------------------------------------------------------------------- */
/* Einführung */
.ilc-testimonial-intro {
margin-bottom: 30px;
}
.ilc-testimonial-link {
margin-top: 1.25rem; /* 20px */
margin-bottom: 30px;
}
/* --------------------------------------------------------------------------
Testimonial Karussell
-------------------------------------------------------------------------- */
.ilc-testimonials {
position: relative;
width: 100%;
padding-left: 65px;
padding-right: 65px;
}
.ilc-testimonial-viewport {
width: 100%;
overflow: hidden;
}
.ilc-testimonial-track {
display: flex;
align-items: flex-start;
gap: 25px;
transition: transform 0.6s ease;
will-change: transform;
}
/* Einzelne Karte */
.ilc-testimonial-card {
flex: 0 0 calc((100% - 50px) / 3);
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
text-align: center;
}
/* Textbox */
.ilc-testimonial-text {
width: 100%;
/* NICHT wachsen oder auf gleiche Höhe strecken */
flex-grow: 0;
flex-shrink: 0;
margin-bottom: 2.5rem; /* 40px */
padding: 30px;
background-color: #f8f8f8;
font-size: 1.25rem; /* 20px */
line-height: 1.5;
}
/* Profilbild */
.ilc-testimonial-bild {
display: block;
width: 80px;
height: 80px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
/* Name */
.ilc-testimonial-name {
margin-top: 10px;
color: #6d7175;
text-align: center;
}
/* --------------------------------------------------------------------------
Navigation
-------------------------------------------------------------------------- */
.ilc-testimonial-nav {
position: absolute;
top: 50%;
z-index: 2;
width: 60px;
height: 60px;
padding: 0;
border: 0;
border-radius: 0;
background-color: #f8f8f8;
color: #888d92;
font-size: 2.25rem; /* 36px */
line-height: 1;
cursor: pointer;
transform: translateY(-50%);
}
.ilc-testimonial-prev {
left: 0;
}
.ilc-testimonial-next {
right: 0;
}
.ilc-testimonial-nav:hover,
.ilc-testimonial-nav:focus {
color: #e9040e;
}
/* --------------------------------------------------------------------------
Tablet
-------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
.ilc-testimonial-card {
flex-basis: calc((100% - 25px) / 2);
}
.ilc-testimonial-text {
padding: 20px;
}
}
/* --------------------------------------------------------------------------
Mobil
-------------------------------------------------------------------------- */
@media(max-width:767.98px) {
.ilc-testimonials {
padding-left:55px;
padding-right:55px;
}
.ilc-testimonial-card {
flex-basis:100%;
}
.ilc-testimonial-text {
margin-bottom:25px;
padding:15px;
}
.ilc-testimonial-nav {
width:48px;
height:48px;
font-size:2rem; /*32px*/
}
}
/* ====================================================================================
10.10 WEITERFÜHRENDES WISSEN auf Startseite
================================================================================= */
.ilc-info-card {
text-align: center;
}
.ilc-info-bild {
margin-bottom: 30px;
}
.ilc-info-card h3 {
margin-bottom: 30px;
}
.ilc-info-card h3 a {
color: #e9040e;
}
.ilc-info-card p {
margin-bottom: 0;
}
/* ==========================================================================
10.11 ALLGEMEINE INHALTSKOMPONENTEN
========================================================================== */
/* --------------------------------------------------------------------------
Abstand für Folgeblöcke innerhalb derselben Sektion
-------------------------------------------------------------------------- */
.ilc-block-abstand {
margin-top: 50px;
}
@media(max-width:767.98px) {
.ilc-block-abstand {
margin-top: 30px;
}
}
.ilc-block-abstand-gross {
margin-top: 80px;
}
@media(max-width:767.98px) {
.ilc-block-abstand-gross {
margin-top: 30px;
}
}
/* Kleiner Abstand für Folgeblöcke */
.ilc-block-abstand-klein {
margin-top: 30px;
}
@media(max-width:767.98px) {
.ilc-block-abstand-klein {
margin-top: 20px;
}
}
/* --------------------------------------------------------------------------
Bild / Text mit überlappendem Farbblock
Grundlage bleibt das normale .ilc-grid-6-6.
Desktop: Textblock überlappt das Bild.
Tablet / Mobil: normales einspaltiges Layout ohne Überlagerung.
-------------------------------------------------------------------------- */
.ilc-bildtext-overlap {
gap: 0;
}
.ilc-bildtext-media {
position: relative;
z-index: 1;
}
.ilc-bildtext-card {
position: relative;
z-index: 2;
align-self: center;
padding: 35px 40px;
color: #ffffff;
background-color: #6a7685;
border-radius: 10px;
}
.ilc-bildtext-card h2,
.ilc-bildtext-card h3,
.ilc-bildtext-card h4 {
color: #ffffff;
font-size: 32px;
text-align: left;
}
@media(max-width:767.98px) {
.ilc-bildtext-card h2,
.ilc-bildtext-card h3,
.ilc-bildtext-card h4 {
color: #ffffff;
font-size: 28px;
text-align: left;
}
}
.ilc-bildtext-card strong {
color: #ffffff;
}
.ilc-bildtext-card > :last-child {
margin-bottom: 0;
}
/* Desktop – Bild links / Text rechts */
@media(min-width:992px) {
.ilc-bildtext-overlap .ilc-bildtext-media {
grid-column: 1;
grid-row: 1;
}
.ilc-bildtext-overlap .ilc-bildtext-card {
grid-column: 2;
grid-row: 1;
margin-left: -45px;
}
/* Gespiegelte Variante – Text links / Bild rechts */
.ilc-bildtext-overlap.ilc-bildtext-reverse .ilc-bildtext-media {
grid-column: 2;
grid-row: 1;
}
.ilc-bildtext-overlap.ilc-bildtext-reverse .ilc-bildtext-card {
grid-column: 1;
grid-row: 1;
margin-left: 0;
margin-right: -45px;
}
}
/* Tablet / Mobil – normales Layout ohne Überlagerung */
@media(max-width:991.98px) {
.ilc-bildtext-overlap {
gap: 30px;
}
.ilc-bildtext-overlap .ilc-bildtext-media,
.ilc-bildtext-overlap .ilc-bildtext-card,
.ilc-bildtext-overlap.ilc-bildtext-reverse .ilc-bildtext-media,
.ilc-bildtext-overlap.ilc-bildtext-reverse .ilc-bildtext-card {
grid-column: auto;
grid-row: auto;
margin-left: 0;
margin-right: 0;
}
}
@media(max-width:767.98px) {
.ilc-bildtext-overlap {
gap: 20px;
}
.ilc-bildtext-card {
padding: 25px;
}
}
/* --------------------------------------------------------------------------
FAQ – vollständig offene, allgemein wiederverwendbare Variante
-------------------------------------------------------------------------- */
.ilc-faq {
width: 100%;
max-width: 850px;
margin-left: auto;
margin-right: auto;
}
.ilc-faq-item {
padding-top: 26px;
padding-bottom: 26px;
border-top: 1px solid #d7d7dc;
}
.ilc-faq-item:last-child {
border-bottom: 1px solid #d7d7dc;
}
.ilc-faq-frage {
position: relative;
margin: 0 0 12px;
padding-left: 18px;
font-family: 'Source Sans 3', sans-serif; /* 'fuse_bold', sans-serif */
font-size: 1.375rem;
font-weight: 700;
line-height: 1.3;
color: #2c2c42;
text-align: left;
}
.ilc-faq-frage::before {
content: "";
position: absolute;
top: 0.12em;
bottom: 0.12em;
left: 0;
width: 4px;
background-color: #e9040e;
}
.ilc-faq-antwort > :last-child {
margin-bottom: 0;
}
@media(max-width:767.98px) {
.ilc-faq-item {
padding-top: 22px;
padding-bottom: 22px;
}
.ilc-faq-frage {
font-size: 1.25rem;
padding-left: 15px;
}
}
/* ==========================================================================
10.12 SYSTEM LOGOS
========================================================================== */
.ilc-system-logos {
width: 100%;
max-width: 600px;
}
@media (max-width: 1199.98px) {
.ilc-system-logos {
max-width: 400px;
}
}
@media (max-width: 767.98px) {
.ilc-system-logos {
max-width: 320px;
}
}
/* ==========================================================================
10.13 SCROLL-REVEAL
========================================================================== */
/* Die Inhalte bleiben ohne JavaScript immer sichtbar.
Erst user.js setzt am -Element die Klasse .ilc-js. */
.ilc-reveal {
transition:
opacity 0.6s ease,
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
html.ilc-js .ilc-reveal {
opacity: 0;
}
html.ilc-js .ilc-reveal-left {
transform: translateX(-50px);
}
html.ilc-js .ilc-reveal-right {
transform: translateX(50px);
}
html.ilc-js .ilc-reveal-up {
transform: translateY(35px);
}
html.ilc-js .ilc-reveal.is-visible {
opacity: 1;
transform: none;
}
/* Scrollgebundener 3D-Effekt für einzelne Bilder */
.ilc-scroll-depth {
transform-origin: center center;
backface-visibility: hidden;
will-change: transform;
}
/* Auf Tablet/Mobil und bei reduzierter Bewegung deaktivieren */
@media(max-width:991.98px) {
.ilc-scroll-depth {
transform: none !important;
will-change: auto;
}
}
@media(prefers-reduced-motion:reduce) {
.ilc-scroll-depth {
transform: none !important;
will-change: auto;
}
}
/* Auf Tablet/Mobil keine Einfluganimation */
@media(max-width:991.98px) {
html.ilc-js .ilc-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* Barrierefreiheit */
@media(prefers-reduced-motion:reduce) {
html.ilc-js .ilc-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* ==========================================================================
10.14 ÜBER UNS
========================================================================== */
/* --------------------------------------------------------------------------
Instruktoren
-------------------------------------------------------------------------- */
.ilc-profil-name {
margin-top: 0;
margin-bottom: 40px;
font-family: 'Source Sans 3', sans-serif; /* 'fuse_regular', sans-serif */
font-size: 3.75rem; /* 60px – entspricht dem bisherigen Design */
font-weight: 400;
line-height: 1.17;
text-align: left;
color: rgba(20, 20, 45, 0.6);
}
.ilc-profil-meta {
margin-bottom: 20px;
}
.ilc-profil-zitat {
font-style: italic;
}
.ilc-profil-rolle {
margin-top: 25px;
margin-bottom: 0;
}
.ilc-profil-rolle strong {
display: block;
font-family: 'Source Sans 3', sans-serif; /* 'fuse_bold', sans-serif */
font-size: 1.5rem;
font-weight: 700;
line-height: 1.3;
}
.ilc-profil-status {
display: block;
margin-top: 3px;
color: #e9040e;
font-size: 1rem;
line-height: 1.4;
text-transform: uppercase;
}
@media(max-width:1199.98px) {
.ilc-profil-name {
margin-bottom: 30px;
font-size: 2.375rem; /* 38px */
}
}
@media(max-width:767.98px) {
.ilc-profil-name {
margin-bottom: 25px;
font-size: 1.875rem; /* 30px */
}
.ilc-profil-rolle strong {
font-size: 1.25rem;
}
.ilc-profil-status {
font-size: 0.875rem;
}
}
/* --------------------------------------------------------------------------
Preise
-------------------------------------------------------------------------- */
/* Hintergrundwerte bewusst wie auf der Startseite:
hg_grau_quer + cover + fixed + left top + 50/80. */
#preise-wien {
padding-top: 50px;
padding-bottom: 80px;
background-position: left top;
}
.ilc-preis-grid {
margin-top: 50px;
margin-bottom: 50px;
}
.ilc-preis-card {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
height: 100%;
padding: 40px 45px 50px;
background-color: #ffffff;
border: 1px solid transparent;
border-radius: 7px;
text-align: center;
box-sizing: border-box;
transition: border-color 0.25s ease;
}
.ilc-preis-card h3 {
margin-top: 0;
margin-bottom: 20px;
font-family: 'Source Sans 3', sans-serif; /* 'fuse_bold', sans-serif */
font-size: 1.125rem; /* 18px */
font-weight: 700;
line-height: 1.35;
color: #777777;
}
.ilc-preis-card--ermaessigt h3 {
color: #e9040e;
}
.ilc-preis-wert {
display: block;
font-family: 'Source Sans 3', sans-serif; /* 'fuse_regular', sans-serif */
font-size: 2.25rem; /* 36px */
font-weight: 400;
line-height: 1.2;
color: rgba(20, 20, 45, 0.9);
}
.ilc-preis-symbol {
font-size: 0.75em;
margin-right: 2px;
}
.ilc-preis-zeitraum {
display: block;
margin-top: 5px;
font-size: 1rem;
line-height: 1.4;
}
.ilc-preis-info {
margin-top: 50px;
}
@media(hover:hover) and (pointer:fine) {
.ilc-preis-card:hover {
border-color: #e9040e;
}
}
@media(max-width:767.98px) {
#preise-wien {
padding-top: 30px;
padding-bottom: 30px;
background-position: left top;
}
.ilc-preis-grid {
margin-top: 30px;
margin-bottom: 30px;
}
.ilc-preis-card {
padding: 30px 25px 35px;
}
.ilc-preis-info {
margin-top: 30px;
}
}
/* --------------------------------------------------------------------------
Standorte
-------------------------------------------------------------------------- */
.ilc-standort + .ilc-standort {
margin-top: 50px;
}
@media(max-width:767.98px) {
.ilc-standort + .ilc-standort {
margin-top: 30px;
}
}
/* ==========================================================================
11. CUSTOM SOCIAL MEDIA ICONS (Inline-SVG)
========================================================================== */
.custom-social-media {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 15px;
list-style: none;
padding: 0;
margin: 0;
}
.custom-social-media li {
margin: 0 !important;
padding: 0;
}
.custom-social-media a {
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff !important;
text-decoration: none !important;
transition: color .2s ease-in-out;
}
/* Social Icon-Größe */
.custom-social-media .social-icon {
width: 2.5rem; /* 40px */
height: 2.5rem; /* 40px */
fill: currentColor;
}
.container-bottom-b .custom-social-media a {
color: #ffffff !important;
}
/* Markenfarben bei Hover */
.container-bottom-b .custom-social-media a[aria-label="Facebook"]:hover {
color: #1877f2 !important;
}
.container-bottom-b .custom-social-media a[aria-label="Instagram"]:hover {
color: #e4405f !important;
}
.container-bottom-b .custom-social-media a[aria-label="YouTube"]:hover,
.container-bottom-b .custom-social-media a[aria-label="Youtube"]:hover {
color: #ff0000 !important;
}
.container-bottom-b .custom-social-media a[aria-label="TikTok"]:hover {
color: #25f4ee !important;
}
.container-bottom-b .custom-social-media a:hover {
text-decoration: none !important;
}
/* Social Icons optisch auf eine einheitliche Größe bringen */
.container-bottom-b .custom-social-media a[aria-label="Facebook"] .social-icon {
transform: scale(1.10);
}
.container-bottom-b .custom-social-media a[aria-label="Instagram"] .social-icon {
transform: scale(0.95);
}
.container-bottom-b .custom-social-media a[aria-label="YouTube"] .social-icon,
.container-bottom-b .custom-social-media a[aria-label="Youtube"] .social-icon {
transform: scale(1.05);
}
.container-bottom-b .custom-social-media a[aria-label="TikTok"] .social-icon {
transform: scale(0.95);
}
/* ==========================================================================
12. JOOMLA KATEGORIEBLOGS – GEMEINSAME DARSTELLUNG
========================================================================== */
/* 12.0 Kategorieblog – einheitliche Inhaltsbreite */
.com-content-category-blog {
width: 100%;
max-width: 1140px;
margin-left: auto;
margin-right: auto;
}
/* 12.0a Kategorieblogs – mobiler Seitenabstand */
@media (max-width: 767.98px) {
.com-content-category-blog {
box-sizing: border-box;
padding-left: 25px;
padding-right: 25px;
}
}
/* 12.1 Zwei führende Beiträge nebeneinander */
@media (min-width: 992px) {
.com-content-category-blog .blog-items.items-leading.cols-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px;
max-width: 100%;
}
.com-content-category-blog .blog-items.items-leading.cols-2 > .blog-item {
width: 100%;
min-width: 0;
max-width: none;
margin: 0;
}
}
/* 12.2 Führende Beiträge auf Tablet und Mobil untereinander */
@media (max-width: 991.98px) {
.com-content-category-blog .blog-items.items-leading.cols-2 {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 30px;
}
}
/* 12.3 Vorschaubilder */
.com-content-category-blog .blog-item .item-image img,
.com-content-category-blog .blog-item .article-intro-image img {
display: block;
max-width: 100%;
height: auto;
border-radius: 10px 10px 0 0;
}
/* 12.4 Artikelüberschriften – kompakte Blogtitel */
.com-content-category-blog .blog-item h2 {
font-family: 'Source Sans 3', sans-serif; /* 'fuse_extrabold', sans-serif */
font-size: 1.5rem; /* 24px */
font-weight: 800;
line-height: 1.2;
text-align: left;
margin-bottom: 30px;
}
/* 12.5 Artikeltitel-Links */
.com-content-category-blog .blog-item h2 a,
.com-content-category-blog .blog-item h2 a:visited {
display: block;
font-family: inherit;
font-weight: inherit;
color: #727281 !important;
text-align: left;
text-decoration: none !important;
}
/* 12.6 Hover und Tastaturfokus */
.com-content-category-blog .blog-item h2 a:hover,
.com-content-category-blog .blog-item h2 a:focus-visible {
color: #e9040e !important;
text-decoration: none !important;
}
/* 12.7 Mobile Artikelüberschriften */
@media (max-width: 767.98px) {
.com-content-category-blog .blog-item h2 {
font-size: 1.25rem; /* 20px */
}
}
/* 12.8 Abstände der Vorschaubilder */
.com-content-category-blog .blog-item .item-image,
.com-content-category-blog .blog-item .article-intro-image {
margin-bottom: 20px;
overflow: hidden;
border-radius: 10px 10px 0 0;
}
/* 12.9 Textbereich in Blogkarten linksbündig */
.com-content-category-blog .blog-item .article-body,
.com-content-category-blog .blog-item .article-introtext,
.com-content-category-blog .blog-item p,
.com-content-category-blog .blog-item .readmore {
text-align: left;
}
/* 12.10 Events und Wissens-Kategorien – 3-Spalten-Blog */
.com-content-category-blog .blog-items.columns-3 {
column-gap: 30px;
row-gap: 30px;
}
/* 12.11 Blogkarten – Rahmen und Schatten entfernen */
.com-content-category-blog .blog-items.columns-3 .blog-item,
.com-content-category-blog .blog-items.columns-3 .blog-item .item-content {
border: none !important;
box-shadow: none !important;
}
/* =========================================================
13. POSTBOX – KONTAKTFORMULAR
========================================================= */
/* Grauer Hintergrund ohne Bild */
.ilc-kontakt-bg {
background-color: #e7e7ea;
background-image: none;
border-radius: 10px;
}
/* PostBox-Hintergründe entfernen */
.ilc-kontakt-bg .postbox-form,
.ilc-kontakt-bg .postbox-form-header {
background: transparent;
}
/* Globale Schrift und linksbündige Feldbeschriftungen */
.ilc-kontakt-bg .postbox-field label,
.ilc-kontakt-bg .postbox-field legend {
font-family: inherit;
font-size: inherit;
text-align: left;
}
/* Globale Schrift für Eingabefelder */
.ilc-kontakt-bg .postbox-field input,
.ilc-kontakt-bg .postbox-field textarea {
font-family: inherit;
font-size: inherit;
text-align: left;
}
/* Platzhalter erben die Schriftgröße */
.ilc-kontakt-bg .postbox-field input::placeholder,
.ilc-kontakt-bg .postbox-field textarea::placeholder {
font-size: inherit;
}
.ilc-kontakt-bg .postbox-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: #e9040e;
color: #ffffff;
font-family: inherit;
font-size: inherit;
font-weight: 400;
border-radius: 5px;
}
/* Briefumschlag im Postbox-Senden-Button */
.ilc-kontakt-bg .postbox-button::before {
content: "";
display: block;
width: 18px;
height: 18px;
flex: 0 0 18px;
}
.ilc-kontakt-bg .postbox-button:hover,
.ilc-kontakt-bg .postbox-button:focus {
background-color: #e9040e;
color: #000000;
}
/* Cloudflare Turnstile zentrieren */
.ilc-kontakt-bg .postbox-captcha {
display: flex;
justify-content: center;
}
/* Senden-Button zentrieren */
.ilc-kontakt-bg .postbox-submit {
text-align: center;
}
/* PostBox – Erfolgsmeldung und Fehlermeldung */
.ilc-kontakt-bg .postbox-message {
font-size: inherit;
}
/* =========================================================
14. ILC TABELLE – RESPONSIVE VERGLEICHSTABELLEN
Beispiel: Kampfsport vs. Kampfkunst
========================================================= */
.ilc-tabelle {
width: 100%;
max-width: 850px;
margin: 30px auto;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ilc-tabelle table {
width: 100%;
min-width: 680px;
margin: 0;
border-collapse: collapse;
table-layout: fixed;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
background-color: #ffffff;
}
/* Gemeinsame Zellenformatierung */
.ilc-tabelle th,
.ilc-tabelle td {
padding: 12px 14px;
border: 1px solid #cccccc;
vertical-align: top;
text-align: left;
font-family: inherit;
font-size: inherit;
line-height: inherit;
overflow-wrap: break-word;
}
/* Erste Tabellenzeile */
.ilc-tabelle thead th {
background-color: #e7e7ea;
color: #e9040e;
font-weight: 700;
}
/* Erste Spalte: normale Schriftfarbe und Schriftstärke */
.ilc-tabelle tbody th {
background-color: #ffffff;
color: inherit;
font-weight: 400;
}
/* Restliche Tabellenzellen */
.ilc-tabelle tbody td {
background-color: #ffffff;
color: inherit;
font-weight: 400;
}
/* =========================================================
15. ILC INHALTSVERZEICHNIS – TOC
========================================================= */
.ilc-toc {
width: 100%;
max-width: 850px;
margin: 30px auto;
padding: 25px 30px;
background-color: #e7e7ea;
border: 1px solid #cccccc;
border-radius: 10px;
}
.ilc-toc > p {
margin: 0 0 15px;
font-weight: 700;
color: #434357;
}
.ilc-toc ul {
margin: 0;
padding-left: 25px;
}
.ilc-toc li {
margin-bottom: 10px;
line-height: 1.5;
}
.ilc-toc li:last-child {
margin-bottom: 0;
}
.ilc-toc a {
color: #434357;
text-decoration: none;
}
.ilc-toc a:hover,
.ilc-toc a:focus-visible {
color: #e9040e;
text-decoration: underline;
}
@media (max-width: 767px) {
.ilc-toc {
padding: 20px;
}
}