/* ---------- HIER WIRD DER FOOTER ENTFERNT ---------- */
.df-footer {
opacity: 0% !important; /* Footer unsichtbar machen */
position: fixed; /* Position immer an Bildschirm heften */
top: 100%; /* jetzt in eine untere linke Ecke verschieben und eine Größe von 0px festlegen */
bottom: 0%:
right: 100%;
left: 0%;
}
.cs-panel-flat {
border-radius: 16px;
border: 2px solid rgb(0,149,166);
box-shadow: none;
}
.Panel_title {
text-align: center;
/* background-image: linear-gradient(to right, rgba(0,149,166,1), rgba(255,0,0,1))!important; */
}
/* ----- Youtube-Video -----*/
.circle {
box-shadow: 0px 0px 5px rgba(0,0,0,1);
width: 100%;
height: 360px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 16px;
overflow:hidden;
position:relative;
}
iframe {
border-radius: 16px;
box-shadow: 0px 0px 5px rgba(0,0,0,1);
display: flex;
justify-self: right;
background-color: rgb(31,31,31);
width: 89%;
height: 360px;
}
/* =========================================================
KOMSA-Style Theme
========================================================= */
/* System-Footer (CSOD) entfernen */
.df-footer{ display:none !important; }
/* Design Tokens */
:root{
--komsa-teal: #0096aa;
--komsa-teal-dark:#007b8a;
--komsa-navy:#007E8D; /* dunkle Flächen (Footer/Topbar) */
--komsa-navy-2:#0f2a35; /* leicht heller */
--bg:#f4f7f8; /* Seitenhintergrund */
--surface:#ffffff; /* Karten/Flächen */
--border: rgba(15, 23, 42, .10);
--text:#0f172a;
--muted:#475569;
--radius: 12px;
--shadow: 0 14px 35px rgba(2,6,23,.10);
--shadow-soft: 0 10px 25px rgba(2,6,23,.08);
--fs-p: 16px;
--fs-h1: 28px;
--fs-h2: 24px;
}
/* Schriften */
body p{
font-size: var(--fs-p) !important;
line-height: 1.6;
}
body h1{
font-size: var(--fs-h1) !important;
line-height: 1.25;
}
body h2{
font-size: var(--fs-h2) !important;
line-height: 1.3;
}
.container p,
.container h1,
.container h2{
font-family: "Source Sans 3","Source Sans Pro", Arial, sans-serif;
}
.container p{ font-size: var(--fs-p) !important; }
.container h1{ font-size: var(--fs-h1) !important; }
.container h2{ font-size: var(--fs-h2) !important; }
/* Banner Grundlayout */
.banner {
position: relative;
max-width: 1240px;
width: 100%;
height: auto;
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
/* Hover-Schatten */
.banner:hover {
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
transform: translateY(-4px);
}
/* Banner Bild */
.banner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Textfeld */
.banner-text {
position: absolute;
bottom: 16px;
top: 16px;
right: 16px;
max-width: 45%;
background: rgba(255, 255, 255, 0.85); /* leicht transparent */
color: #000;
padding: 20px 24px;
border-radius: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
text-align: justify;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Textfeld sichtbar beim Hover */
.banner:hover .banner-text {
opacity: 1;
transform: translateY(0);
}
/* Text Styling */
.banner-text h2 {
margin: 0 0 10px;
font-size: 1.4rem;
font-weight: 600;
}
.banner-text p {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
}
/* Responsive */
@media (max-width: 768px) {
.banner img {
height: 240px;
}
.banner-text {
right: 16px;
left: 16px;
bottom: 16px;
max-width: 100%;
text-align: left; /* besser lesbar mobil */
}
}
/* Touch-Geräte: Text immer sichtbar */
@media (hover: none) {
.banner-text {
opacity: 1;
transform: none;
}
}
/* Klappbarer Container */
.accordion {
width: 100%;
border: 1px solid #ccc;
border-radius: 6px;
overflow: hidden;
font-family: Arial, sans-serif;
margin: 10px 0;
}
/* Checkbox verstecken */
.accordion input {
display: none;
}
/* Header */
.accordion label {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
cursor: pointer;
font-weight: bold;
background-color: #f2f2f2;
user-select: none;
}
/* Pfeil */
.arrow {
transition: transform 0.4s ease;
}
/* Inhalt */
.content {
max-height: 0;
overflow: hidden;
padding: 0 16px;
opacity: 0;
transition: max-height 0.5s ease, opacity 0.4s ease;
}
/* Offen */
.accordion input:checked + label .arrow {
transform: rotate(90deg);
}
.accordion input:checked ~ .content {
max-height: 100%;
padding: 16px;
opacity: 1;
}
/* Nach oben Button – KOMSA final */
a.toTop{
position: fixed;
right: 20px;
bottom: 20px;
width: 52px;
height: 52px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
/* KOMSA Farben */
background: linear-gradient(
135deg,
var(--komsa-teal),
var(--komsa-teal-dark)
);
color: #fff;
text-decoration: none;
box-shadow: 0 10px 22px rgba(2,6,23,.25);
/* immer sichtbar & über allem */
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 999999;
/* Interaktion */
transform: translateY(0);
transition:
transform .12s ease,
box-shadow .12s ease,
filter .12s ease;
}
a.toTop i{
font-size: 20px;
line-height: 1;
}
/* Hover: leicht angehoben */
a.toTop:hover{
transform: translateY(-2px);
filter: brightness(1.05);
}
/* Active / gedrückt */
a.toTop:active{
transform: translateY(1px);
box-shadow: 0 6px 12px rgba(2,6,23,.35);
filter: brightness(.95);
}
/* Active / darkmode */
@media (prefers-color-scheme: dark){
a.toTop{
background: linear-gradient(
135deg,
var(--komsa-teal-dark),
#055a64
);
box-shadow: 0 8px 18px rgba(0,0,0,.55);
}
a.toTop:hover{
filter: brightness(1.02);
}
a.toTop:active{
filter: brightness(.92);
}
}
/* Base */
*,
*::before,
*::after { box-sizing: border-box; }
body{
margin: 0;
font-family: "Source Sans 3","Source Sans Pro", Arial, sans-serif;
font-size: 14px;
color: var(--text);
background: var(--bg);
/* CSOD offsets – falls nötig behalten */
margin-top: -25px;
margin-left: -11px;
margin-right: -11px;
margin-bottom: 0;
}
/* Smooth scroll für die ganze Seite */
html {
scroll-behavior: smooth;
}
/* Optional: Wenn du einen fixed Header hast */
:target {
scroll-margin-top: 70px; /* Höhe des Headers */
}
section {
padding: 80px 16px; /* Platz, damit man das Scrollen sieht */
}
/* =========================================================
Top Navigation (dunkel, clean)
========================================================= */
.topbar{
position: ;
top: 0;
z-index: 9999;
background: linear-gradient(135deg, var(--komsa-navy), var(--komsa-navy-2));
border-bottom: 1px solid rgba(255,255,255,.10);
}
.topbar__inner{
overflow: visible !important;
max-width: 1240px;
margin: 0 auto;
padding: 14px 16px;
display:flex;
align-items:center;
justify-content: flex-end; /* du hast kein Brand-Logo drin */
gap: 12px;
}
.navlinks{
display:flex;
align-items:center;
gap: 10px;
flex-wrap: wrap;
}
.navbtn{
display:inline-flex;
align-items:center;
gap: 10px;
padding: 10px 14px;
border-radius: 999px;
text-decoration:none;
font-weight: 600;
letter-spacing: .2px;
color: rgba(255,255,255,.92);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.navbtn i{ color: rgba(255,255,255,.85); }
.navbtn:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.18);
}
.navbtn--primary{
background: linear-gradient(135deg, var(--komsa-teal), #19b6c8);
color:#fff;
border-color: transparent;
}
.navbtn--primary:hover{
background: linear-gradient(135deg, var(--komsa-teal-dark), #12a7b8);
}
.menu-toggle{
display:none;
align-items:center;
justify-content:center;
width: 44px;
height: 44px;
border-radius: 999px;
cursor:pointer;
color:#fff;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
transition: transform .15s ease, background .15s ease;
}
.menu-toggle:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.10);
}
.mobile-panel{
display:none;
padding: 0 16px 16px;
}
.mobile-panel__inner{
max-width: 1240px;
margin: 0 auto;
border: 1px solid rgba(255,255,255,.12);
border-radius: var(--radius);
background: rgba(11,31,42,.92);
box-shadow: var(--shadow-soft);
padding: 10px;
display:grid;
gap: 10px;
}
.mobile-panel .navbtn{
width: 100%;
justify-content:flex-start;
}
/* Responsive */
@media (max-width: 760px){
.navlinks{ display:none; }
.menu-toggle{ display:inline-flex; }
.mobile-panel{ display:block; }
}
#nav-open{ display:none; }
#nav-open:not(:checked) ~ .mobile-panel{ display:none; }
#nav-open:checked ~ .mobile-panel{ display:block; }
.navbtn:focus-visible,
.menu-toggle:focus-visible{
outline: 3px solid rgba(0,150,170,.40);
outline-offset: 2px;
}
/* Submenü (FIXED) – KOMSA-Style, Overlay über allem */
.submenu{
position: fixed;
top: 130px; /* wird per JS sauber gesetzt (Fallback bleibt 125px) */
/* wird per JS sauber gesetzt (Fallback) */
min-width: 260px;
padding: 10px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.14);
border-radius: 18px;
box-shadow: 0 14px 34px rgba(0,0,0,.28);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
z-index: 99999;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: transform .15s ease, opacity .15s ease, visibility .15s ease;
display: grid;
gap: 10px;
}
/* Links wie navbtn (Pill-Style) */
.submenu a{
display:flex;
align-items:center;
gap: 20px;
padding: 10px 14px;
border-radius: 999px;
text-decoration:none;
font-weight: 600;
letter-spacing: .2px;
color: rgba(255,255,255,.92);
color: #0b1f2a;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
/* kleine “Spitze” optional im gleichen Look */
.submenu::before{
content:"";
position:absolute;
top:-8px;
left: 26px;
width: 14px;
height: 14px;
background: rgba(255,255,255,.07);
border-left: 1px solid rgba(255,255,255,.14);
border-top: 1px solid rgba(255,255,255,.14);
transform: rotate(45deg);
border-top-left-radius: 3px;
}
.submenu a i{ color: rgba(255,255,255,.85); }
.submenu a:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.18);
}
/* Öffnen */
.has-submenu:hover .submenu,
.has-submenu.is-open .submenu{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Mobile: kein Hover */
@media (max-width: 760px){
.submenu{ display:none; }
}
/* =========================================================
Layout
========================================================= */
.container{
max-width: 1240px;
margin: 2px auto;
padding: 0 18px 24px;
}
/* =========================================================
Header Hero
========================================================= */
.hero-intro{
padding: 0 0 24px;
}
/* HERO Textfarbe – erzwingen */
section.hero-intro{
color: var(--text) !important;
}
section.hero-intro h1,
section.hero-intro p{
color: var(--text) !important;
}
/* HERO Typo erzwingen */
section.hero-intro h1{
font-size: 28px !important;
line-height: 1.25 !important;
margin: 0 0 12px 0 !important;
}
section.hero-intro p{
font-size: 16px !important;
line-height: 1.6 !important;
margin: 0 !important;
}
body section.hero-intro h1{ font-size: 28px !important; }
body section.hero-intro p{ font-size: 16px !important; }
/* =========================
TRAININGSWERBUNG: HERO
========================= */
.training-promo{
padding: 10px 0 20px;
}
.training-promo__inner{
max-width: 1240px;
margin: 0 auto;
border-radius: var(--radius);
overflow: hidden;
background: linear-gradient(135deg, var(--komsa-navy), var(--komsa-navy-2));
border: 1px solid rgba(255,255,255,.12);
box-shadow: var(--shadow);
display: grid;
grid-template-columns: 1.35fr .65fr;
gap: 0;
}
.training-promo__content{
padding: 22px 22px 20px;
color: rgba(255,255,255,.92);
}
.training-promo__tag{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 999px;
font-weight: 700;
font-size: 12px;
letter-spacing: .3px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.16);
}
.training-promo__title{
margin: 14px 0 10px;
color: #fff;
}
.training-promo__text{
margin: 0 0 14px;
color: rgba(255,255,255,.82);
}
.training-promo__bullets{
list-style: none;
padding: 0;
margin: 0 0 16px;
display: grid;
gap: 8px;
}
.training-promo__bullets li{
display: flex;
align-items: center;
gap: 10px;
color: rgba(255,255,255,.90);
}
.training-promo__bullets i{
color: #7dd3fc; /* passt zum blauen/teal Look */
}
.training-promo__actions{
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.training-promo__btn{
white-space: nowrap;
}
.training-promo__link{
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
font-weight: 700;
color: rgba(255,255,255,.92);
border-bottom: 1px solid rgba(255,255,255,.28);
}
.training-promo__link:hover{
border-bottom-color: rgba(0,150,170,.85);
color: #fff;
}
.training-promo__media{
display: grid;
place-items: center;
padding: 22px;
background: rgba(255,255,255,.04);
}
.training-promo__media img{
max-width: 220px;
width: 100%;
height: auto;
filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
/* Responsive */
@media (max-width: 980px){
.training-promo__inner{
grid-template-columns: 1fr;
}
.training-promo__media{
padding-top: 0;
}
.training-promo__media img{
max-width: 180px;
}
}
/* =========================
BRAND PROMO CARD
========================= */
.brand-card--promo{
background: linear-gradient(135deg, var(--komsa-teal), #19b6c8) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.20);
}
.brand-card--promo .promo-icon{
font-size: 44px;
margin: 12px 0 10px;
filter: drop-shadow(0 8px 14px rgba(0,0,0,.25));
}
.brand-card--promo .promo-title{
display:block;
font-weight: 800;
font-size: 18px;
margin-top: 6px;
}
.brand-card--promo .promo-sub{
display:block;
font-weight: 600;
opacity: .92;
margin-top: 6px;
}
/* =========================================================
TRAININGSWERBUNG: GRID (3–6 Karten)
========================================================= */
.training-ads{
padding: 2px 0;
}
.training-ads__head{
margin-bottom: 16px;
}
.training-ads__head p{
color: var(--muted);
margin-top: 6px;
}
.training-ads__grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
}
/* Card */
.tcard{
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
padding: 18px 18px 16px;
display:flex;
flex-direction: column;
min-height: 100%;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tcard:hover{
transform: translateY(-8px);
box-shadow: 0 20px 45px rgba(2,6,23,.22);
border-color: rgba(0,150,170,.45);
}
.tcard__top{
display:flex;
align-items:center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.tbadge{
display:inline-flex;
align-items:center;
gap: 8px;
padding: 7px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
color: #fff;
background: linear-gradient(135deg, var(--komsa-teal), #19b6c8);
box-shadow: 0 10px 20px rgba(2,6,23,.10);
white-space: nowrap;
}
.tbadge--new{ background: linear-gradient(135deg, #16a34a, #22c55e); }
.tbadge--hot{ background: linear-gradient(135deg, #ff7a00, #ff3d3d); }
.tbadge--soon{ background: linear-gradient(135deg, #6b7280, #9ca3af); }
.tmeta{
display:inline-flex;
align-items:center;
gap: 8px;
color: var(--muted);
font-weight: 700;
font-size: 13px;
white-space: nowrap;
}
.tcard__title{
margin: 0 0 8px 0;
font-size: 18px;
}
.tcard__desc{
margin: 0 0 12px 0;
color: var(--muted);
}
.tcard__list{
list-style:none;
padding:0;
margin: 0 0 14px 0;
display:grid;
gap: 8px;
}
.tcard__list li{
display:flex;
align-items:center;
gap: 10px;
font-weight: 600;
}
.tcard__list i{
color: var(--komsa-teal);
}
.tcard__actions{
margin-top: auto;
display:flex;
align-items:center;
justify-content: space-between;
gap: 12px;
}
.tbtn{
display:inline-flex;
align-items:center;
gap: 10px;
padding: 10px 14px;
border-radius: 999px;
text-decoration:none;
font-weight: 800;
color: #fff;
background: linear-gradient(135deg, var(--komsa-teal), #19b6c8);
transition: transform .12s ease, filter .12s ease;
white-space: nowrap;
}
.tbtn:hover{
transform: translateY(-1px);
filter: brightness(.95);
}
.tlink{
text-decoration:none;
font-weight: 800;
color: var(--komsa-teal);
border-bottom: 1px solid rgba(0,150,170,.30);
}
.tlink:hover{
border-bottom-color: rgba(0,150,170,.80);
}
.training-ads__foot{
margin-top: 16px;
display:flex;
gap: 10px;
flex-wrap: wrap;
}
/* Responsive */
@media (max-width: 980px){
.training-ads__grid{ grid-template-columns: 1fr; }
}
/* =========================================================
Hersteller Grid / Cards (clean, hell, KOMSA-like)
========================================================= */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 25px; padding: 34px 18px; }
.brand-card { background: rgba(255,255,255,0.9); border-radius: 12px; padding: 20px; text-align: center; text-decoration: none; color: #000; transition: transform 0.3s, box-shadow 0.3s; }
.brand-card img { max-width: 160px; margin-bottom: 15px; align: center; filter: drop-shadow(2px 2px 4px #222); }
.brand-card span { font-weight: 600; }
.brand-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.25); }
.brand-grid-dark{
background: linear-gradient(135deg, var(--komsa-navy), var(--komsa-navy-2));
color: rgba(255,255,255,.88);
padding: 34px 18px;
font-size: 14px;
border-radius: 12px;
}
.brand-grid-light{
padding: 34px 18px;
font-size: 14px;
border-radius: 12px;
}
/* =========================================================
Buttons
========================================================= */
.btn{
background: linear-gradient(135deg, var(--komsa-teal), #19b6c8);
color:#fff;
padding: 12px 16px;
border-radius: 999px;
text-decoration:none;
display:inline-flex;
gap: 10px;
align-items:center;
transition: transform .15s ease, filter .15s ease;
}
.btn:hover{
transform: translateY(-1px);
filter: brightness(.95);
}
/* =========================================================
Video / iframe – scoped (nicht global!)
========================================================= */
.circle{
width: 100%;
height: 360px;
border-radius: var(--radius);
overflow:hidden;
position:relative;
background: #0b0f14;
box-shadow: var(--shadow-soft);
}
.circle iframe{
width: 100%;
height: 100%;
border: 0;
display:block;
}
/* =========================================================
Footer
========================================================= */
.footer-grow{
background: linear-gradient(135deg, var(--komsa-navy), var(--komsa-navy-2));
color: rgba(255,255,255,.88);
padding: 34px 18px;
font-size: 14px;
margin-bottom: -10px;
}
.footer-main{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 26px;
max-width: 1240px;
margin: 0 auto;
}
.footer-section h4{
margin: 0 0 10px 0;
font-size: 15px;
color: #fff;
}
.footer-logo-img{
max-width: 240px;
height:auto;
filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}
.footer-contact a,
.footer-map a,
.footer-faq a,
.footer-bottom a{
color: rgba(255,255,255,.92);
text-decoration:none;
border-bottom: 1px solid rgba(255,255,255,.22);
}
.footer-contact a:hover,
.footer-map a:hover,
.footer-faq a:hover,
.footer-bottom a:hover{
border-bottom-color: rgba(0,150,170,.85);
color: #fff;
}
.footer-faq ul{
list-style:none;
padding:0;
margin:0;
}
.footer-faq li{ margin-bottom: 6px; }
.footer-bottom{
max-width: 1240px;
margin: 18px auto 0;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,.12);
text-align:center;
font-size: 13px;
color: rgba(255,255,255,.75);
}
/* =========================================================
Eck-Banner (45°)
========================================================= */
.brand-card{
position: relative;
overflow: hidden;
}
/* Grundbanner */
.card-badge{
position: absolute;
top: 18px;
right: -45px;
width: 160px;
text-align: center;
padding: 6px 0;
font-size: 11px;
font-weight: 500;
letter-spacing: .5px;
text-transform: uppercase;
color: #fff;
background: linear-gradient(135deg, #0096aa, #19b6c8);
transform: rotate(45deg);
box-shadow: 0 4px 12px rgba(0,0,0,.35);
z-index: 5;
}
/* Variante: Coming Soon */
.card-badge--soon{
background: linear-gradient(135deg, #6b7280, #9ca3af);
}
/* Variante: Neu */
.card-badge--new{
background: linear-gradient(135deg, #16a34a, #22c55e);
}
/* =========================================================
CSOD: 3 Widgets nebeneinander
Container: #container3 > .bgColor
========================================================= */
/* 1) bgColor auf 1210px begrenzen & zentrieren */
#container1 > .bgColor,
#container5 > .bgColor {
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-right:15px !important;
padding-left:15px !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 14px !important;
float: none !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* 2) Nur die gewünschten Widgets ins Grid zwingen */
#container3 > .bgColor > .widgetDropped#1,
#container3 > .bgColor > .widgetDropped#3,
#container3 > .bgColor > .widgetDropped#0
{
width: auto !important;
float: none !important;
margin: 0 !important;
overflow: visible !important;
}
/* 3) Sicherheit: Widgets füllen ihre Grid-Zelle */
#container1 > .bgColor > .widgetDropped > .widgetToMove,
#container5 > .bgColor > .widgetDropped > .widgetToMove
{
width: 100% !important;
}
/* =========================================================
Mobile: Widgets untereinander
========================================================= */
@media (max-width: 980px){
#container1 > .bgColor,
#container5 > .bgColor
{
display: block !important;
a, td, th{
word-break: break-word;
overflow-wrap: anywhere;
}
}
#container1 > .bgColor > .widgetDropped,
#container5 > .bgColor > .widgetDropped
{
width: 100% !important;
margin-bottom: 16px !important;
}
}
.bgColor { width:100% }
.widgetDropped { width:100% }.
.bgColor { width:100% }
.widgetDropped { width:100% }
/* =========================================================
GLEICHE HÖHE für die Widgets (nur container3)
========================================================= */
/* Grid-Zeile darf gleich hoch werden */
#container1 > .bgColor,
#container5 > .bgColor
{
align-items: stretch !important;
}
/* Widget selbst füllt die Grid-Zelle */
#container1 > .bgColor > .widgetDropped,
#container5 > .bgColor > .widgetDropped
{
display: flex !important;
}
/* Inhalt des Widgets ebenfalls strecken */
#container1 > .bgColor > .widgetDropped > .widgetToMove,
#container5 > .bgColor > .widgetDropped > .widgetToMove
{
display: flex !important;
width: 100% !important;
}
/* CSOD Panel auf volle Höhe ziehen */
#container1 > .bgColor > .widgetDropped .Panel,
#container5 > .bgColor > .widgetDropped .Panel
{
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
/* Panel-Content wächst, Footer bleibt unten */
#container1 > .bgColor > .widgetDropped .Panel_content,
#container5 > .bgColor > .widgetDropped .Panel_content
{
flex: 1 1 auto !important;
}
/* Launch als Button-Optik */
div[data-tag="pnlMyTraining"] a[title="Launch"],
div[data-tag="pnlMyTraining"] a[aria-label^="Launch "]{
/* Farben nur als Beispiel */
display:inline-flex;
align-items:center;
gap: 10px;
padding: 10px 14px;
border-radius: 999px;
text-decoration:none;
font-weight: 600;
letter-spacing: .2px;
background: linear-gradient(135deg, var(--komsa-teal), #19b6c8);
color:#fff;
border-color: transparent;
border: 1px solid rgba(255,255,255,.10);
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.Launch:hover{
background: linear-gradient(135deg, var(--komsa-teal-dark), #12a7b8);
}
/* Optional: "Mark Complete" verstecken (falls ihr das nicht wollt) */
div[data-tag="pnlMyTraining"] a[href^="javascript:__doPostBack"][id$="_UserAction"]{
display: none !important;
}
/* Das Trennzeichen | verstecken */
table.CsList[sp-root="MyTraining"] td:nth-child(3) b{
display: none !important;
}
/* ===== MARKETING / 3-SÄULEN ===== */
.komsa-offers{
padding: 10px 0px;
}
.offers-wrap{
max-width: 1240px;
margin: 0 auto;
}
.offers-head{
text-align: center;
margin-bottom: 22px;
}
.offers-head h2{
margin: 0 0 8px 0;
}
.offers-head p{
margin: 0;
color: var(--muted);
}
/* Grid */
.offers-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
align-items: stretch;
}
/* Card */
.offer-card{
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 100%;
position: relative;
}
/* farblich absetzen */
.offer-card--basic{
border-top: 8px solid #2563eb; /* blau */
}
.offer-card--pro{
border-top: 8px solid var(--komsa-teal); /* KOMSA teal */
}
.offer-card--premium{
border-top: 8px solid #16a34a; /* grün */
}
.offer-body{
padding: 20px 20px 14px;
flex: 1 1 auto;
}
.offer-body h3{
margin: 0 0 10px 0;
font-size: 20px;
}
.offer-body p{
margin: 0 0 14px 0;
color: var(--muted);
}
.offer-list{
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 8px;
}
.offer-list li{
display: flex;
gap: 10px;
align-items: center;
}
.offer-list i{
color: var(--komsa-teal);
}
/* Footer mit Preis + Link */
.offer-footer{
padding: 14px 20px 18px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.offer-price{
display: flex;
align-items: baseline;
gap: 8px;
}
.offer-price .from{
color: var(--muted);
font-size: 13px;
}
.offer-price .amount{
font-weight: 700;
font-size: 20px;
}
.offer-link{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, var(--komsa-teal), #19b6c8);
transition: transform .12s ease, filter .12s ease;
white-space: nowrap;
}
.offer-link:hover{
transform: translateY(-1px);
filter: brightness(.95);
}
/* ===== Hover-Hervorhebung für Marketing-Säulen ===== */
.offer-card{
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease;
}
/* Hover-Effekt */
.offer-card:hover{
transform: translateY(-8px);
box-shadow: 0 20px 45px rgba(2,6,23,.22);
border-color: var(--komsa-teal);
}
/* Footer-Link beim Hover leicht betonen */
.offer-card:hover .offer-link{
filter: brightness(1.05);
}
/* Mittlere (Featured) Säule: stärkerer Hover */
.offer-card.is-featured:hover{
transform: translateY(-16px);
box-shadow: 0 26px 60px rgba(2,6,23,.28);
}
/* Optional: farbige Akzentlinie beim Hover */
.offer-card:hover::after{
content:"";
position:absolute;
inset:0;
border-radius: var(--radius);
/* box-shadow: inset 0 0 0 2px rgba(0,150,170,.35); */
pointer-events:none;
}
/* Mittlere Karte höher */
/*
.offer-card.is-featured{
transform: translateY(-12px);
box-shadow: var(--shadow);
border-color: rgba(0,150,170,.35);
}
.offer-card.is-featured{
border-width: 2px;
box-shadow: 0 18px 40px rgba(0,150,170,.25);
background: linear-gradient(
180deg,
rgba(0,150,170,.06),
var(--surface)
);
*/
.offer-badge{
position: absolute;
top: 14px;
right: 14px;
padding: 6px 10px;
font-size: 12px;
font-weight: 700;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, #ff7a00, #ff3d3d);
box-shadow: 0 10px 22px rgba(2,6,23,.18);
}
/* Responsive */
@media (max-width: 980px){
.offers-grid{
grid-template-columns: 1fr;
}
.offer-card.is-featured{
transform: none;
}
}
/* ===== CTA Full Width ===== */
.komsa-cta{
margin-top: 26px;
padding: 26px 18px;
border-radius: 12px;
background: linear-gradient(135deg, var(--komsa-navy), var(--komsa-navy-2));
color: rgba(255,255,255,.92);
}
.cta-inner{
max-width: 1240px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.cta-text h2{
margin: 0 0 8px 0;
color: #fff;
}
.cta-text p{
margin: 0;
color: rgba(255,255,255,.82);
}
.cta-actions{
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.cta-btn{
align-items: center;
gap: 10px;
}
.cta-btn--ghost{
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.18);
}
@media (max-width: 980px){
.cta-inner{
flex-direction: column;
align-items: flex-start;
}
}
/* ===== MICRO CTA ===== */
.micro-cta{
margin-top: 16px;
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 14px;
color: var(--komsa-teal);
opacity: 0;
transform: translateY(6px);
transition:
opacity .18s ease,
transform .18s ease,
gap .18s ease;
}
/* Pfeil leicht animiert */
.micro-cta i{
font-size: 12px;
transition: transform .18s ease;
}
/* Beim Hover der Säule sichtbar */
.offer-card:hover .micro-cta{
opacity: 1;
transform: translateY(0);
gap: 14px;
}
/* Pfeil bewegt sich leicht */
.offer-card:hover .micro-cta i{
transform: translateX(3px);
}
/* kleine Delays */
section:nth-of-type(1){ animation-delay: .05s; }
section:nth-of-type(2){ animation-delay: .15s; }
section:nth-of-type(3){ animation-delay: .25s; }
section:nth-of-type(4){ animation-delay: .35s; }
section:nth-of-type(5){ animation-delay: .45s; }
@media (prefers-reduced-motion: reduce){
section{
animation: none !important;
}
}
/* =========================================================
VERTIKALER SLIDER – FINAL
6 Cards | 3 sichtbar | Sprung um 3
Kein Clipping | Hover & Schatten frei | Darkmode-safe
========================================================= */
/* ---------------------------------------------------------
1) State (Radio Buttons) – unsichtbar
--------------------------------------------------------- */
#trainings-werbung .vcar-state{
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
/* ---------------------------------------------------------
2) Slider Wrapper – schafft Platz für Hover & Schatten
--------------------------------------------------------- */
#trainings-werbung .vcar{
position: relative;
width: 100%;
overflow: visible;
padding: 40px 0; /* Luft oben & unten */
}
/* ---------------------------------------------------------
3) Viewport – KEIN Clipping!
--------------------------------------------------------- */
#trainings-werbung .vcar-viewport{
position: relative;
overflow: visible;
}
/* ---------------------------------------------------------
4) Pages (je 3 Cards) – Grid bleibt original
--------------------------------------------------------- */
#trainings-werbung .vcar-page{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
}
/* Mobile */
@media (max-width: 980px){
#trainings-werbung .vcar-page{
grid-template-columns: 1fr;
}
}
/* ---------------------------------------------------------
5) Seitenumschaltung (ohne JS)
--------------------------------------------------------- */
/* Seite 1 sichtbar */
#vcar-p1:checked ~ .vcar .vcar-page--1{ display: grid; }
#vcar-p1:checked ~ .vcar .vcar-page--2{ display: none; }
/* Seite 2 sichtbar */
#vcar-p2:checked ~ .vcar .vcar-page--1{ display: none; }
#vcar-p2:checked ~ .vcar .vcar-page--2{ display: grid; }
/* ---------------------------------------------------------
6) Cards – Hover & Schatten NICHT abschneiden
--------------------------------------------------------- */
#trainings-werbung .vcar .tcard{
overflow: visible;
position: relative;
transform: translateZ(0);
backface-visibility: hidden;
will-change: transform;
}
/* Schatten auslagern */
#trainings-werbung .vcar .tcard::after{
content:"";
position: absolute;
inset: 0;
border-radius: inherit;
z-index: -1;
box-shadow: var(--shadow-soft);
transition: box-shadow .18s ease;
}
/* Hover-Effekt */
#trainings-werbung .vcar .tcard:hover{
transform: translateY(-12px);
border-color: rgba(0,150,170,.6) !important;
box-shadow: inset 0 1px 0 rgba(0,150,170,.55) !important;
}
#trainings-werbung .vcar .tcard:hover::after{
box-shadow: 0 22px 55px rgba(2,6,23,.25);
}
/* ---------------------------------------------------------
7) Navigation – Pfeile
--------------------------------------------------------- */
#trainings-werbung .vcar-nav{
position: absolute;
/* horizontal exakt mittig */
left: 50%;
transform: translateX(-50%);
z-index: 999999;
width: 48px;
height: 48px;
border-radius: 999px;
display: grid;
place-items: center;
color: #fff;
background: linear-gradient(135deg, var(--komsa-teal), #19b6c8);
box-shadow: 0 14px 30px rgba(2,6,23,.28);
cursor: pointer;
user-select: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .15s ease,
transform .15s ease,
filter .15s ease,
visibility .15s ease;
}
/* Pfeilpositionen */
#trainings-werbung .vcar-nav--up{
top: 10px;
}
#trainings-werbung .vcar-nav--down{
bottom: 10px;
}
/* Einblenden beim Hover */
#trainings-werbung .vcar:hover .vcar-nav{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Hover-Effekt */
#trainings-werbung .vcar-nav:hover{
transform: translateX(-50%) translateY(-2px);
filter: brightness(.95);
}
/* ---------------------------------------------------------
8) Pfeile je Seite deaktivieren
--------------------------------------------------------- */
#vcar-p1:checked ~ .vcar .vcar-nav--up{
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
#vcar-p2:checked ~ .vcar .vcar-nav--down{
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* =========================================================
DARK MODE (KOMSA-Style) – Auto + Optional per Klasse
========================================================= */
/* 1) Auto-Darkmode über System-Einstellung */
@media (prefers-color-scheme: dark){
:root{
--bg:#0b1220;
--surface:#0f1b2a;
--border: rgba(255,255,255,.10);
--text:#e6edf5;
--muted:#a8b3c2;
--shadow: 0 14px 35px rgba(0,0,0,.45);
--shadow-soft: 0 10px 25px rgba(0,0,0,.35);
}
body{
background: var(--bg) !important;
color: var(--text) !important;
}
/* Cards/Flächen */
.brand-card,
.brand-grid-light,
.accordion,
.banner-text,
.cs-panel-flat,
.Panel,
.cs-panel-flat .Panel_contentMiddle,
.cs-panel-plain .Panel_contentMiddle,
.cs-panel-gradient .Panel_contentMiddle,
.cs-panel-flat .Panel_content,
.cs-panel-plain .Panel_content,
.cs-panel-gradient .Panel_content,
.Panel_footer,
.body{
background: var(--surface) !important;
color: var(--text) !important;
border-color: var(--border) !important;
box-shadow: var(--shadow-soft) !important;
}
/* Accordion Header */
.accordion label{
background: rgba(255,255,255,.06) !important;
color: var(--text) !important;
border-bottom: 1px solid var(--border) !important;
}
/* Banner-Overlay dunkler + readable */
.banner-text{
background: rgba(15,27,42,.88) !important;
}
.banner-text h2{ color: var(--text) !important; }
.banner-text p{ color: rgba(230,237,245,.90) !important; }
/* Links allgemein */
a { color: #6ee7f3; }
a:hover{ color: #a5f3fc; }
/* Tabellen / CSOD Listen */
table,
th, td, a{
color: var(--text) !important;
border-color: var(--border) !important;
}
/* Submenu im Darkmode: nicht mehr weißer Text auf weißer Fläche */
.submenu{
background: rgba(15,27,42,.92) !important;
border-color: rgba(255,255,255,.12) !important;
}
.submenu a{
color: var(--text) !important;
background: rgba(255,255,255,.06) !important;
border-color: rgba(255,255,255,.10) !important;
}
.submenu a:hover{
background: rgba(255,255,255,.10) !important;
}
/* Iframes/Video */
.circle{ background: #05080f !important; }
iframe{ background-color: #05080f !important; }
}
/* 2) Optional: manueller Toggle per Klasse (falls du später einen Schalter willst)
Einfach setzen
*/
body.darkmode{
--bg:#0b1220;
--surface:#0f1b2a;
--border: rgba(255,255,255,.10);
--text:#e6edf5;
--muted:#a8b3c2;
--shadow: 0 14px 35px rgba(0,0,0,.45);
--shadow-soft: 0 10px 25px rgba(0,0,0,.35);
background: var(--bg) !important;
color: var(--text) !important;
}
body.darkmode .brand-card,
body.darkmode .brand-grid-light,
body.darkmode .accordion,
body.darkmode .banner-text,
body.darkmode .cs-panel-flat,
body.darkmode .Panel{
background: var(--surface) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
body.darkmode .accordion label{
background: rgba(255,255,255,.06) !important;
color: var(--text) !important;
}
body.darkmode .banner-text{ background: rgba(15,27,42,.88) !important; }
body.darkmode .submenu{
background: rgba(15,27,42,.92) !important;
border-color: rgba(255,255,255,.12) !important;
}
body.darkmode .submenu a{
color: var(--text) !important;
background: rgba(255,255,255,.06) !important;
}
section{
animation: komsaFadeUp .9s ease-out both;
}
/* ===== Sanfte Lade-Animation für Sections ===== */
@keyframes komsaFadeUp {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}