.elementor-kit-7{--e-global-color-primary:#020044;--e-global-color-secondary:#3055A0;--e-global-color-text:#020044;--e-global-color-accent:#F5C503;--e-global-color-aaf2722:#FFFFFF;--e-global-color-dc2d3f3:#F7F7F5;--e-global-color-c68a306:#B1C903;--e-global-typography-primary-font-family:"Noto Sans";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Noto Sans";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Instrument Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Instrument Sans";--e-global-typography-accent-font-weight:600;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================
GLOBALES CSS FÜR ASSESI.EU & ASSESI-LABEL.EU
- Farben: Gold (#F5C503), Navy (#020044), Blau (#3055A0), Lime (#B4CD00), Weiß (#FFFFFF)
- Fonts: Montserrat (Headings) + Open Sans (Body) – serifenlos, seriös, modern, lizenzfrei
- Ziel: Stilistische Einheitlichkeit mit klarer Unterscheidung der beiden Seiten
============================================ */
/* ============================================
1. CSS-VARIABLEN (GLOBALE FARBEN)
============================================ */
:root {
/* Primärfarben */
--color-gold: #F5C503;
--color-navy: #020044;
--color-blue: #3055A0;
--color-lime: #B4CD00;
--color-white: #FFFFFF;
/* Textfarben */
--text-primary: var(--color-navy); /* Standard-Textfarbe */
--text-secondary: var(--color-white); /* Für helle Hintergründe */
--text-accent: var(--color-blue); /* Für Links/ Akzente */
/* Hintergrundfarben */
--bg-primary: var(--color-white); /* Standard-Hintergrund */
--bg-secondary: var(--color-navy); /* Für assesi.eu Navi */
--bg-tertiary: var(--color-lime); /* Für Akzentbereiche */
/* Fonts */
--font-heading: 'Montserrat', sans-serif;
--font-body: 'Open Sans', sans-serif;
/* Abstände & Größen */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 3rem;
--spacing-xl: 4rem;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
/* Übergänge */
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
}
/* ============================================
2. FONT-EINBINDUNG (Google Fonts)
============================================ */
/* Füge dies in den deiner HTML/WordPress-Seite ein: */
/*
*/
/* ============================================
3. GRUNDLEGENDE STILE (BEIDE SEITEN)
============================================ */
/* Box Sizing & Reset */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--text-primary);
background-color: var(--bg-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Typografie */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.2;
margin-bottom: var(--spacing-sm);
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
p {
margin-bottom: var(--spacing-sm);
}
a {
color: var(--text-accent);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-gold);
}
/* Buttons */
.btn {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-sm);
font-family: var(--font-heading);
font-weight: 600;
text-align: center;
cursor: pointer;
transition: all var(--transition-normal);
border: none;
}
.btn-primary {
background-color: var(--color-gold);
color: var(--color-navy);
}
.btn-primary:hover {
background-color: #e6b100; /* Dunkleres Gold */
transform: translateY(-2px);
}
.btn-secondary {
background-color: var(--color-blue);
color: var(--color-white);
}
.btn-secondary:hover {
background-color: #254480; /* Dunkleres Blau */
}
.btn-lime {
background-color: var(--color-lime);
color: var(--color-navy);
}
.btn-lime:hover {
background-color: #9eb800; /* Dunkleres Lime */
}
/* Container */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
/* ============================================
4. SPEZIFISCHE STILE FÜR ASSESI.EU
(Navy als Navigationshintergrund)
============================================ */
/* Assesi.eu: Navigationsleiste */
.assesi-eu .site-header {
background-color: var(--color-navy);
padding: var(--spacing-sm) 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.assesi-eu .site-header .site-navigation {
display: flex;
justify-content: space-between;
align-items: center;
}
.assesi-eu .site-header .site-navigation a {
color: var(--color-white);
padding: var(--spacing-xs) var(--spacing-sm);
font-weight: 500;
}
.assesi-eu .site-header .site-navigation a:hover {
color: var(--color-gold);
}
/* Assesi.eu: Hero-Section */
.assesi-eu .hero {
background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-blue) 100%);
color: var(--color-white);
padding: var(--spacing-xl) 0;
text-align: center;
}
.assesi-eu .hero h1 {
color: var(--color-gold);
font-size: 3rem;
margin-bottom: var(--spacing-md);
}
.assesi-eu .hero .btn {
background-color: var(--color-lime);
color: var(--color-navy);
}
/* Assesi.eu: Akzente */
.assesi-eu .accent-bg {
background-color: var(--color-blue);
color: var(--color-white);
}
.assesi-eu .accent-text {
color: var(--color-blue);
}
/* ============================================
5. SPEZIFISCHE STILE FÜR ASSESI-LABEL.EU
(Weiß als Navigationshintergrund)
============================================ */
/* Assesi-label.eu: Navigationsleiste */
.assesi-label-eu .site-header {
background-color: var(--color-white);
padding: var(--spacing-sm) 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border-bottom: 1px solid #eee;
}
.assesi-label-eu .site-header .site-navigation {
display: flex;
justify-content: space-between;
align-items: center;
}
.assesi-label-eu .site-header .site-navigation a {
color: var(--color-navy);
padding: var(--spacing-xs) var(--spacing-sm);
font-weight: 500;
}
.assesi-label-eu .site-header .site-navigation a:hover {
color: var(--color-gold);
}
/* Assesi-label.eu: Hero-Section */
.assesi-label-eu .hero {
background-color: var(--color-white);
color: var(--color-navy);
padding: var(--spacing-xl) 0;
text-align: center;
border-bottom: 5px solid var(--color-lime);
}
.assesi-label-eu .hero h1 {
color: var(--color-blue);
font-size: 3rem;
margin-bottom: var(--spacing-md);
}
.assesi-label-eu .hero .btn {
background-color: var(--color-navy);
color: var(--color-white);
}
/* Assesi-label.eu: Akzente */
.assesi-label-eu .accent-bg {
background-color: var(--color-lime);
color: var(--color-navy);
}
.assesi-label-eu .accent-text {
color: var(--color-lime);
}
/* ============================================
6. GEMEINSAME MODULE (BEIDE SEITEN)
============================================ */
/* Karten (z. B. für Zertifikate/Produkte) */
.card {
background-color: var(--color-white);
border-radius: var(--radius-md);
padding: var(--spacing-md);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: var(--spacing-md);
border-left: 4px solid var(--color-gold);
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* Timeline (für beide Seiten anpassbar) */
.timeline {
position: relative;
padding-left: var(--spacing-lg);
list-style: none;
}
.timeline::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background-color: var(--color-blue);
}
.timeline-item {
position: relative;
padding-bottom: var(--spacing-lg);
}
.timeline-item::before {
content: '';
position: absolute;
left: -10px;
top: 5px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--color-gold);
border: 3px solid var(--color-white);
}
.timeline-item h3 {
color: var(--color-navy);
margin-bottom: var(--spacing-xs);
}
.timeline-item p {
color: var(--text-primary);
}
/* Footer (beide Seiten) */
.site-footer {
background-color: var(--color-navy);
color: var(--color-white);
padding: var(--spacing-xl) 0 var(--spacing-md);
}
.site-footer a {
color: var(--color-gold);
}
.site-footer a:hover {
color: var(--color-white);
}
/* ============================================
7. RESPONSIVE DESIGN
============================================ */
@media (max-width: 768px) {
.container {
padding: 0 var(--spacing-sm);
}
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
.site-header .site-navigation {
flex-direction: column;
gap: var(--spacing-sm);
}
.hero {
padding: var(--spacing-lg) 0;
}
.timeline {
padding-left: var(--spacing-sm);
}
.timeline::before {
left: var(--spacing-xs);
}
}
@media (max-width: 480px) {
h1 { font-size: 1.75rem; }
.btn {
width: 100%;
padding: var(--spacing-sm);
}
}
/* ============================================
8. UTILITY-KLASSEN (FÜR FLEXIBILITÄT)
============================================ */
/* Textfarben */
.text-navy { color: var(--color-navy); }
.text-gold { color: var(--color-gold); }
.text-blue { color: var(--color-blue); }
.text-lime { color: var(--color-lime); }
.text-white { color: var(--color-white); }
/* Hintergrundfarben */
.bg-navy { background-color: var(--color-navy); }
.bg-gold { background-color: var(--color-gold); }
.bg-blue { background-color: var(--color-blue); }
.bg-lime { background-color: var(--color-lime); }
.bg-white { background-color: var(--color-white); }
/* Abstände */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
/* Textausrichtung */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
/* ============================================
9. ELEMENTOR-SPEZIFISCHE KLASSEN
(Falls du Custom CSS in Elementor nutzt)
============================================ */
/* Beispiel für eine Elementor-Section */
.elementor-section.assesi-hero {
background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-blue) 100%);
color: var(--color-white);
padding: var(--spacing-xl) 0;
}
/* Beispiel für eine Elementor-Column */
.elementor-column.assesi-card {
background-color: var(--color-white);
border-radius: var(--radius-md);
padding: var(--spacing-md);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-left: 4px solid var(--color-gold);
}
/* Beispiel für einen Elementor-Button */
.elementor-button.assesi-btn-primary {
background-color: var(--color-gold);
color: var(--color-navy);
border-radius: var(--radius-sm);
font-family: var(--font-heading);
font-weight: 600;
transition: all var(--transition-normal);
}
.elementor-button.assesi-btn-primary:hover {
background-color: #e6b100;
transform: translateY(-2px);
}/* End custom CSS */