/*
Theme Name: Child of Hello Elementor
Template: hello-elementor
*/
/*
=====================================================
KREATIVBOX DESIGN SYSTEM
=====================================================
Ein modulares CSS-System für Elementor.
Kombiniere Klassen nach Bedarf.
INHALT:
1. Variablen
2. Farben (Hintergrund & Text)
3. Typografie (Schriftarten & Größen)
4. Border-Radius
5. Abstände (Spacing)
6. Glass-Effekte
7. Buttons
VERWENDUNG:
class="bg-website text-white fs-lg radius-24 mb-md"
=====================================================
*/
/*
=====================================================
1. VARIABLEN
=====================================================
*/
:root {
/* ===== FARBEN ===== */
/* Bereichsfarben */
--kb-design: #FDE962;
--kb-content: #00e962;
--kb-marke: #234BFF;
--kb-kreativbox: #e51f75;
--kb-website: #8221D8;
--kb-strategie: #ff9648;
--kb-somedia: #DD4342;
/* Grautöne */
--kb-gray-900: #0A0A0A;
--kb-gray-800: #343838;
--kb-gray-700: #525453;
--kb-gray-500: #8a8b89;
--kb-gray-300: #c4c2c0;
--kb-gray-200: #e0dedb;
--kb-gray-100: #fdf9f6;
--kb-white: #ffffff;
/* Glass Basis */
--glass-blur: 12px;
--glass-radius: 24px;
/* Weiß-Abstufungen für Glass */
--white-0: hsla(0, 0%, 100%, 0);
--white-5: hsla(0, 0%, 100%, 0.05);
--white-10: hsla(0, 0%, 100%, 0.1);
--white-20: hsla(0, 0%, 100%, 0.2);
--white-30: hsla(0, 0%, 100%, 0.3);
--white-40: hsla(0, 0%, 100%, 0.4);
--white-50: hsla(0, 0%, 100%, 0.5);
--white-100: hsla(0, 0%, 100%, 1);
/* Standard Akzentfarbe (kann überschrieben werden) */
--glass-accent: var(--white-50, #e0dedb);
/* ===== TYPOGRAFIE ===== */
/* Schriftarten */
--font-body: 'Avenir', 'Montserrat', 'Poppins', Arial, sans-serif;
--font-headline: 'Brown', 'Avenir', Arial, sans-serif;
/* Schriftgrößen mit Clamp (responsive) */
/* ===== SCHRIFTGRÖSSEN ===== */
/* XXXL - Hero Headlines (180px max → 48px min) */
/* 11.25rem auf Desktop, ~3rem auf Mobile */
--fs-xxxl: clamp(3rem, 1.5rem + 7.5vw, 11.25rem);
/* XXL - Große Section Headlines (120px max → 36px min) */
/* 7.5rem auf Desktop, ~2.25rem auf Mobile */
--fs-xxl: clamp(2.25rem, 1rem + 5vw, 7.5rem);
/* XL - Section Headlines (80px max → 28px min) */
/* 5rem auf Desktop, ~1.75rem auf Mobile */
--fs-xl: clamp(1.75rem, 0.875rem + 3.5vw, 5rem);
/* LG - Subheadlines (48px max → 22px min)
Vorher 60px max: als H2 neben 19px-Fließtext zu plakatig. */
--fs-lg: clamp(1.375rem, 0.85rem + 2vw, 3rem);
/* MD - Lead Text / große Absätze (24px max → 18px min)
Vorher 36px max: Lead soll ~1.25x Fließtext sein, keine Headline. */
--fs-md: clamp(1.125rem, 1rem + 0.55vw, 1.5rem);
/* BASE - Fließtext Standard (19px max → 16px min)
Bewusst flache Kurve: Lesetext soll auf Desktop nicht über
~19px wachsen (vorher 24px, das war zu viel). */
--fs-base: clamp(1rem, 0.93rem + 0.3vw, 1.1875rem);
/* SM - Kleinerer Text (17px max → 15px min)
Vorher 16-18px: kollidierte mit dem neuen fs-base (16-19px). */
--fs-sm: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
/* XS - Captions, Labels (14px max → 12px min) */
/* 0.875rem auf Desktop, ~0.75rem auf Mobile */
--fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
/* ===== BORDER RADIUS ===== */
--radius-sm: 8px;
--radius-12: 12px;
--radius-24: 24px;
--radius-32: 32px;
--radius-full: 100vmax;
/* ===== SPACING ===== */
--space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
--space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
--space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
--space-lg: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
--space-xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
--space-xxl: clamp(3rem, 2.5rem + 2.5vw, 5rem);
--space-xxxl: clamp(5rem, 4rem + 5vw, 8rem);
/* ===== GLASS EFFEKTE ===== */
--glass-blur: 12px;
--glass-bg: rgba(255, 255, 255, 0.12);
--glass-border: rgba(255, 255, 255, 0.3);
--glass-shine: rgba(255, 255, 255, 0.5);
/* ===== GLOBALE EINSTELLUNGEN ===== */
/* Akzentfarbe für Selektion, Links, etc. */
--kb-accent: var(--kb-kreativbox);
--kb-accent-hover: var(--kb-gray-300);
/* Link-Farben */
--kb-link-color: var(--kb-kreativbox);
--kb-link-hover: var(--kb-gray-300);
--kb-link-underline: currentColor;
/* Selektion */
--kb-selection-bg: var(--kb-kreativbox);
--kb-selection-text: var(--kb-white);
/* Cursor */
--kb-cursor-color: var(--kb-kreativbox);
}
/* ============================================
GLOBALE BASIS-STYLES
============================================ */
/* ===== TEXT SELECTION / MARKIERUNG ===== */
::selection {
background-color: var(--kb-selection-bg);
color: var(--kb-selection-text);
}
::-moz-selection {
background-color: var(--kb-selection-bg);
color: var(--kb-selection-text);
}
/* Varianten für verschiedene Bereiche */
.selection-design::selection,
.selection-design ::-moz-selection {
background-color: var(--kb-design);
color: var(--kb-gray-900);
}
.selection-content::selection,
.selection-content ::-moz-selection {
background-color: var(--kb-content);
color: var(--kb-gray-900);
}
.selection-marke::selection,
.selection-marke ::-moz-selection {
background-color: var(--kb-marke);
color: var(--kb-white);
}
.selection-website::selection,
.selection-website ::-moz-selection {
background-color: var(--kb-website);
color: var(--kb-white);
}
.selection-strategie::selection,
.selection-strategie ::-moz-selection {
background-color: var(--kb-strategie);
color: var(--kb-gray-900);
}
.selection-somedia::selection,
.selection-somedia ::-moz-selection {
background-color: var(--kb-somedia);
color: var(--kb-white);
}
html {
scrollbar-gutter: stable;
}
/* ============================================
KB ICON (Leistungs-Icons als Inline-SVG)
============================================
Wird vom Shortcode [kb_leistung_icon] gerendert. Farbe steuert das ACF-Feld
"icon_color" via Modifier-Klasse, SVG erbt sie über currentColor. */
.kb-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
color: currentColor; /* erbt von Eltern, falls keine Farbklasse gesetzt */
}
.kb-icon svg {
width: 100%;
height: 100%;
display: block;
}
.kb-icon--marke { color: var(--kb-marke); }
.kb-icon--website { color: var(--kb-website); }
.kb-icon--design { color: var(--kb-design); }
.kb-icon--content { color: var(--kb-content); }
.kb-icon--strategie { color: var(--kb-strategie); }
.kb-icon--somedia { color: var(--kb-somedia); }
.kb-icon--kreativbox { color: var(--kb-kreativbox); }
.kb-icon--black { color: var(--kb-gray-900, #101414); }
.kb-icon--white { color: var(--kb-white, #ffffff); }
/* ============================================
Z-INDEX SCALE (Single Source of Truth)
============================================
Statt verstreuter 99999-Werte ein klares Layer-System.
Reihenfolge: niedrig (unten) → hoch (oben).
Lokale z-index Werte (1, 2, 3) für Stacking innerhalb
einer Komponente bleiben wie sie sind. */
:root {
--z-base: 0; /* normaler Content */
--z-raised: 10; /* leichte Erhebungen */
--z-floating: 100; /* tooltips, popovers */
--z-dropdown-bg: 105; /* filter click-outside overlay (unter dropdown!) */
--z-dropdown: 110; /* filter container mit dropdown */
--z-badge: 200; /* floating badges, sticky indicators */
--z-nav-overlay: 300; /* dimming-overlay für mobile menu */
--z-section-fly: 390; /* mitfliegende Section-Elemente knapp unter Nav */
--z-nav: 400; /* Hauptnav, Tabbar, Tabsheet */
--z-nav-top: 410; /* Hamburger, liegt über der Nav */
/* Cursor liegt über ALLEM, auch über Plugin-Overlays (Borlabs-Dialog
rendert mit z-index 999999 und würde die Maus sonst verdecken).
Werte nahe int-max, damit kein Overlay je darüber landet. */
--z-cursor: 2147483644; /* Custom Cursor Follower */
--z-cursor-top: 2147483646; /* Custom Cursor (Pointer-Spitze) */
}
/* ===== GLOBALE LINK STYLES ===== */
a {
color: var(--kb-link-color);
text-decoration: none;
transition: color 0.3s ease, opacity 0.3s ease;
}
a:hover {
color: var(--kb-link-hover);
}
/* Link mit Underline Animation */
.kb-link {
position: relative;
color: var(--kb-link-color);
text-decoration: none;
}
.kb-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--kb-link-hover);
transition: width 0.3s ease;
}
.kb-link:hover::after {
width: 100%;
}
/* Link Varianten */
.kb-link-white {
--kb-link-color: var(--kb-white);
--kb-link-hover: var(--kb-gray-200);
}
.kb-link-subtle {
--kb-link-color: var(--kb-gray-300);
--kb-link-hover: var(--kb-white);
}
.kb-link-design { --kb-link-color: var(--kb-design); --kb-link-hover: var(--kb-design); }
.kb-link-content { --kb-link-color: var(--kb-content); --kb-link-hover: var(--kb-content); }
.kb-link-marke { --kb-link-color: var(--kb-marke); --kb-link-hover: var(--kb-marke); }
.kb-link-website { --kb-link-color: var(--kb-website); --kb-link-hover: var(--kb-website); }
.kb-link-strategie { --kb-link-color: var(--kb-strategie); --kb-link-hover: var(--kb-strategie); }
.kb-link-somedia { --kb-link-color: var(--kb-somedia); --kb-link-hover: var(--kb-somedia); }
/* Underline immer sichtbar */
.kb-link-underline::after {
width: 100%;
opacity: 0.3;
}
.kb-link-underline:hover::after {
opacity: 1;
}
/* ===== CURSOR STYLES ===== */
/* Standard Cursor anpassen */
body {
cursor: default;
}
/* Pointer für interaktive Elemente */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
.kb-clickable,
.kb-pointer {
cursor: pointer;
}
/* Custom Cursor (optional - aktivieren mit Klasse auf body) */
body.kb-custom-cursor {
cursor: none;
}
body.kb-custom-cursor * {
cursor: none !important;
}
/* Cursor Element für Custom Cursor (via JS) */
/* mix-blend-mode: difference invertiert die Farbe je nach Hintergrund */
/* Weiß auf dunklem Hintergrund → bleibt weiß */
/* Weiß auf hellem Hintergrund → wird schwarz */
.kb-cursor {
position: fixed;
top: 0;
left: 0;
width: 26px;
height: 26px;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath fill='white' stroke='rgba(0,0,0,0.5)' stroke-width='0.75' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
border-radius: 0;
pointer-events: none;
z-index: var(--z-cursor-top);
transform: translate(0, 0);
/* Wichtig: KEINE Transition auf transform. JS setzt die Position auf jedem
mousemove, die CSS-Transition würde 120ms hinterherschwimmen und die Maus
wirkt träge. Width/Height/Filter dürfen weiter animieren (Hover-States). */
transition: width 0.2s ease, height 0.2s ease, filter 0.2s ease, opacity 0.15s ease;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
mix-blend-mode: normal;
}
.kb-cursor.is-hovering {
width: 30px;
height: 30px;
filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.35));
}
.kb-cursor.is-clicking {
transform: scale(0.85);
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
/* Cursor Follower (zweiter Kreis) */
.kb-cursor-follower {
position: fixed;
top: 0;
left: 0;
width: 36px;
height: 36px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
pointer-events: none;
z-index: var(--z-cursor);
transform: translate(-50%, -50%);
/* KEINE Transition auf transform. Der Follower hat schon eine JS-lerp-
basierte Verzögerung in cursor.js. Eine zusätzliche CSS-Transition oben
drauf würde das zu einem doppelten Lag machen. */
transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
opacity: 0.6;
mix-blend-mode: normal;
}
.kb-cursor-follower.is-hovering {
width: 50px;
height: 50px;
opacity: 0.2;
border-color: rgba(255, 255, 255, 0.3);
}
/* ===== LOGO MARQUEE Shortcode [kb_logo_marquee] =====
Eigenständige Marquee, unabhängig vom Elementor Loop-Carousel.
Wird via Shortcode in PHP gerendert und in kb-logo-marquee.js (Funktion
runEngine) animiert. CSS-Variablen werden aus dem Shortcode gesetzt:
--kb-mq-h Slide-Höhe
--kb-mq-w Logo-Breite Default
--kb-mq-w-mob, --kb-mq-w-desk Breakpoint-Varianten
--kb-mq-gap, --kb-mq-gap-mob, --kb-mq-gap-desk Abstand */
.kb-logo-marquee {
overflow: hidden;
width: 100%;
position: relative;
height: var(--kb-mq-h, 120px);
cursor: grab;
touch-action: pan-y;
}
.kb-logo-marquee:active { cursor: grabbing; }
.kb-logo-marquee__track {
display: flex;
align-items: center;
width: max-content;
height: 100%;
will-change: transform;
}
.kb-logo-marquee__slide {
flex: 0 0 auto;
width: var(--kb-mq-w, 220px);
height: 100%;
margin-right: var(--kb-mq-gap, 220px);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: inherit;
-webkit-user-drag: none;
user-select: none;
}
.kb-logo-marquee__img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
pointer-events: none; /* Klick fängt der umschließende */
-webkit-user-drag: none;
}
@media (max-width: 767px) {
.kb-logo-marquee__slide {
width: var(--kb-mq-w-mob, 150px);
margin-right: var(--kb-mq-gap-mob, 150px);
}
}
@media (min-width: 1200px) {
.kb-logo-marquee__slide {
width: var(--kb-mq-w-desk, 260px);
margin-right: var(--kb-mq-gap-desk, 260px);
}
}
/* ===== LOGO MARQUEE (Legacy: Elementor Loop-Carousel Takeover) =====
Sobald .kb-marquee gesetzt ist, hat kb-logo-marquee.js Swiper
zerstört. Wir stellen Flex-Layout + Overflow sicher, damit die
rAF-translate-Animation sauber durch den Container scrollt. */
.swiper.kb-marquee {
overflow: hidden;
cursor: grab;
touch-action: pan-y; /* vertikales Page-Scroll erhalten, horizontal wir */
}
.swiper.kb-marquee:active { cursor: grabbing; }
.swiper.kb-marquee .swiper-wrapper {
display: flex !important;
width: max-content;
transform: translate3d(0, 0, 0);
transition: none !important;
}
.swiper.kb-marquee .swiper-slide {
flex: 0 0 auto !important;
/* Slide-Breite je Breakpoint normiert — sonst greift Swiper's inline
width:auto und Logos werden viewport-abhängig zu breit (war 1032px).
!important nötig, weil Swiper inline styles setzt. */
width: 220px !important;
/* Spacing zwischen Logos = Logo-Breite (1:1 visuelles Atmen). Wird in
kb-logo-marquee.js via slideFootprint() im Wrap-Modulo mitgerechnet. */
margin-right: 220px !important;
/* Bilder im Slide gegen unbeabsichtigtes Browser-Drag schützen */
-webkit-user-drag: none;
user-select: none;
}
/* Größere Logos auf Tablet/Desktop, kleinere auf Mobile.
margin-right immer = width (1:1 Spacing). */
@media (max-width: 767px) {
.swiper.kb-marquee .swiper-slide {
width: 150px !important;
margin-right: 150px !important;
}
}
@media (min-width: 1200px) {
.swiper.kb-marquee .swiper-slide {
width: 260px !important;
margin-right: 260px !important;
}
}
.swiper.kb-marquee .swiper-slide img {
-webkit-user-drag: none;
pointer-events: none; /* Klick fängt das umschließende */
}
/* ===== SWIPE CURSOR =====
Auf swipebaren Containern (kb-slider, kb-collage, Elementor Swiper):
Pfeil-Cursor ausblenden, Follower wird zu schlankem Outline-Kreis mit
zwei kb-Pfeilen drin (links + rechts), beide weiß. Logik via
.is-swipe in animationen.js (initCustomCursor). */
.kb-cursor.is-swipe {
opacity: 0;
}
.kb-cursor-follower.is-swipe {
width: 62px;
height: 62px;
opacity: 1;
background: transparent;
border: 1px solid #fff;
/* Ein einzelner kb-Arrow nach rechts, weiß, mittig. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='13' viewBox='0 0 15 13' fill='%23ffffff'%3E%3Cpath d='M8.378 0C8.378 3.159 10.934 5.743 14.121 5.743V6.743C10.378 6.743 7.378 3.708 7.378 0H8.378Z'/%3E%3Cpath d='M14.121 6.775C10.962 6.775 8.378 9.331 8.378 12.518H7.378C7.378 8.775 10.413 5.775 14.121 5.775V6.775Z'/%3E%3Cpath d='M14.121 5.743V6.743L0 6.744V5.744L14.121 5.743Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 22px auto;
mix-blend-mode: normal;
}
/* is-hovering soll den Swipe-Cursor nicht überschreiben, falls man ein
Kind- im Slider berührt. */
.kb-cursor-follower.is-swipe.is-hovering {
width: 62px;
height: 62px;
opacity: 1;
border-color: #fff;
}
/* Alternative: Fester schwarzer Cursor (ohne Blend-Mode) */
.kb-cursor-black .kb-cursor {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath fill='%23101414' stroke='rgba(255,255,255,0.3)' stroke-width='0.75' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z'/%3E%3C/svg%3E");
}
.kb-cursor-black .kb-cursor-follower {
border-color: rgba(16, 20, 20, 0.4);
}
/* Alternative: Fester weißer Cursor */
.kb-cursor-white .kb-cursor {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath fill='white' stroke='rgba(0,0,0,0.4)' stroke-width='0.75' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z'/%3E%3C/svg%3E");
}
.kb-cursor-white .kb-cursor-follower {
border-color: rgba(255, 255, 255, 0.3);
}
/* Alternative: Akzentfarbe Cursor */
.kb-cursor-accent .kb-cursor {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath fill='%23e51f75' stroke='rgba(0,0,0,0.3)' stroke-width='0.75' d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z'/%3E%3C/svg%3E");
filter: drop-shadow(0 2px 6px rgba(229, 31, 117, 0.5));
}
.kb-cursor-accent .kb-cursor-follower {
border-color: rgba(229, 31, 117, 0.4);
}
/* ===== FOCUS STYLES (Accessibility) ===== */
:focus-visible {
outline: 2px solid var(--kb-accent);
outline-offset: 3px;
}
/* Focus ring für dunkle Hintergründe */
.focus-light :focus-visible,
.bg-gray-900 :focus-visible,
.bg-gray-800 :focus-visible {
outline-color: var(--kb-white);
}
/* ===== SCROLLBAR STYLING ===== */
/* Webkit Scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--kb-gray-900);
}
::-webkit-scrollbar-thumb {
background: var(--kb-gray-700);
border-radius: 5px;
border: 2px solid var(--kb-gray-900);
}
::-webkit-scrollbar-thumb:hover {
background: var(--kb-gray-500);
}
/* Firefox Scrollbar */
* {
scrollbar-width: thin;
scrollbar-color: var(--kb-gray-700) var(--kb-gray-900);
}
/* Scrollbar Varianten */
.scrollbar-accent::-webkit-scrollbar-thumb {
background: var(--kb-accent);
}
.scrollbar-hidden::-webkit-scrollbar {
display: none;
}
.scrollbar-hidden {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* ===== SMOOTH SCROLL ===== */
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* ===== BODY RESET & DEFAULTS ===== */
body {
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: 1.6;
color: var(--kb-white);
background-color: var(--kb-gray-900);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ===== HEADLINE DEFAULTS ===== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--font-headline);
font-weight: 700;
line-height: 1.25;
margin: 0;
}
/* ===== IMAGE DEFAULTS ===== */
img {
max-width: 100%;
height: auto;
display: block;
}
/* ===== HORIZONTAL RULE ===== */
hr {
border: none;
height: 1px;
background: var(--kb-gray-800);
margin: var(--space-lg) 0;
}
hr.hr-accent {
background: var(--kb-accent);
}
hr.hr-gradient {
height: 2px;
background: linear-gradient(90deg, transparent, var(--kb-accent), transparent);
}
/*
=====================================================
2. FARBEN - HINTERGRUND
=====================================================
*/
/* Bereichsfarben */
.bg-design { background-color: var(--kb-design) !important; }
.bg-content { background-color: var(--kb-content) !important; }
.bg-marke { background-color: var(--kb-marke) !important; }
.bg-kreativbox { background-color: var(--kb-kreativbox) !important; }
.bg-website { background-color: var(--kb-website) !important; }
.bg-strategie { background-color: var(--kb-strategie) !important; }
.bg-somedia { background-color: var(--kb-somedia) !important; }
/* Grautöne */
.bg-gray-900 { background-color: var(--kb-gray-900) !important; }
.bg-gray-800 { background-color: var(--kb-gray-800) !important; }
.bg-gray-700 { background-color: var(--kb-gray-700) !important; }
.bg-gray-500 { background-color: var(--kb-gray-500) !important; }
.bg-gray-300 { background-color: var(--kb-gray-300) !important; }
.bg-gray-200 { background-color: var(--kb-gray-200) !important; }
.bg-gray-100 { background-color: var(--kb-gray-100) !important; }
.bg-white { background-color: var(--kb-white) !important; }
.bg-transparent { background-color: transparent !important; }
/* Alias für Dark/Light */
.bg-dark { background-color: var(--kb-gray-900) !important; }
.bg-light { background-color: var(--kb-gray-100) !important; }
/* ============================================================
SECTION-CURVE: Manuelle Top-/Bottom-Rundung für Sektionen
============================================================
Manuell per Klasse setzen. Keine Auto-Erkennung mehr — die hat
bei Bild-Sektionen und Edge-Cases zu Inkonsistenzen geführt.
.kb-curve-top → obere Ecken runden
.kb-curve-bottom → untere Ecken runden
============================================================ */
.kb-curve-top {
border-top-left-radius: var(--radius-32, 32px) !important;
border-top-right-radius: var(--radius-32, 32px) !important;
}
.kb-curve-bottom {
border-bottom-left-radius: var(--radius-32, 32px) !important;
border-bottom-right-radius: var(--radius-32, 32px) !important;
}
@media (max-width: 640px) {
.kb-curve-top {
border-top-left-radius: var(--radius-24, 24px) !important;
border-top-right-radius: var(--radius-24, 24px) !important;
}
.kb-curve-bottom {
border-bottom-left-radius: var(--radius-24, 24px) !important;
border-bottom-right-radius: var(--radius-24, 24px) !important;
}
}
/*
=====================================================
2. FARBEN - TEXT
=====================================================
*/
/* Bereichsfarben */
.text-design { color: var(--kb-design) !important; }
.text-content { color: var(--kb-content) !important; }
.text-marke { color: var(--kb-marke) !important; }
.text-kreativbox { color: var(--kb-kreativbox) !important; }
.text-website { color: var(--kb-website) !important; }
.text-strategie { color: var(--kb-strategie) !important; }
.text-somedia { color: var(--kb-somedia) !important; }
/* Grautöne */
.text-gray-900 { color: var(--kb-gray-900) !important; }
.text-gray-800 { color: var(--kb-gray-800) !important; }
.text-gray-700 { color: var(--kb-gray-700) !important; }
.text-gray-500 { color: var(--kb-gray-500) !important; }
.text-gray-300 { color: var(--kb-gray-300) !important; }
.text-gray-200 { color: var(--kb-gray-200) !important; }
.text-gray-100 { color: var(--kb-gray-100) !important; }
.text-white { color: var(--kb-white) !important; }
/* Alias für Dark/Light */
.text-dark { color: var(--kb-gray-900) !important; }
.text-light { color: var(--kb-gray-100) !important; }
/*
=====================================================
3. TYPOGRAFIE - SCHRIFTARTEN
=====================================================
*/
/* Fließtext - Avenir Normal */
.font-body,
.text-body {
font-family: var(--font-body) !important;
font-weight: 400 !important;
}
/* Fließtext mit Auszeichnung - Avenir Fett */
.font-body-bold,
.text-body-bold,
.text-bold {
font-family: var(--font-body) !important;
font-weight: 700 !important;
}
/* Headlines - Brown Bold */
.font-headline,
.text-headline {
font-family: var(--font-headline) !important;
font-weight: 700 !important;
}
/* Für Elementor Widgets */
.kb-body .elementor-widget-container,
.kb-body .elementor-widget-container p,
.kb-body .elementor-widget-container span {
font-family: var(--font-body) !important;
font-weight: 400 !important;
}
.kb-body-bold .elementor-widget-container,
.kb-body-bold .elementor-widget-container p,
.kb-body-bold .elementor-widget-container span {
font-family: var(--font-body) !important;
font-weight: 700 !important;
}
.kb-headline .elementor-widget-container,
.kb-headline .elementor-heading-title,
.kb-headline h1,
.kb-headline h2,
.kb-headline h3,
.kb-headline h4,
.kb-headline h5,
.kb-headline h6 {
font-family: var(--font-headline) !important;
font-weight: 700 !important;
}
/*
=====================================================
3. TYPOGRAFIE - SCHRIFTGRÖSSEN
=====================================================
*/
/*
=====================================================
TYPOGRAFIE - SCHRIFTGRÖSSEN (für Elementor)
=====================================================
*/
/* Extra Small */
.fs-xs,
.fs-xs p,
.fs-xs a,
.fs-xs span,
.fs-xs div,
.elementor-widget .elementor-widget-text-editor .fs-xs p,
.fs-xs.elementor-widget .elementor-widget-text-editor p,
.fs-xs.elementor-widget .elementor-widget-container,
.fs-xs.elementor-widget .elementor-widget-container p,
.fs-xs.elementor-widget .elementor-widget-container span,
.fs-xs.elementor-widget .elementor-heading-title,
.fs-xs.elementor-widget h1.elementor-heading-title,
.fs-xs.elementor-widget h2.elementor-heading-title,
.fs-xs.elementor-widget h3.elementor-heading-title,
.fs-xs.elementor-widget h4.elementor-heading-title,
.fs-xs.elementor-widget h5.elementor-heading-title,
.fs-xs.elementor-widget h6.elementor-heading-title,
.elementor-widget.fs-xs .elementor-heading-title {
font-size: var(--fs-xs) !important;
}
/* Small */
.fs-sm,
.fs-sm p,
.fs-sm a,
.fs-sm span,
.fs-sm div,
.elementor-widget.elementor-widget .fs-sm p,
.elementor-widget .elementor-widget-text-editor .fs-sm p
.fs-sm.elementor-widget .elementor-widget-text-editor p,
.fs-sm.elementor-widget .elementor-widget-container,
.fs-sm.elementor-widget .elementor-widget-container p,
.fs-sm.elementor-widget .elementor-widget-container span,
.fs-sm.elementor-widget .elementor-heading-title,
.fs-sm.elementor-widget h1.elementor-heading-title,
.fs-sm.elementor-widget h2.elementor-heading-title,
.fs-sm.elementor-widget h3.elementor-heading-title,
.fs-sm.elementor-widget h4.elementor-heading-title,
.fs-sm.elementor-widget h5.elementor-heading-title,
.fs-sm.elementor-widget h6.elementor-heading-title,
.elementor-widget.fs-sm .elementor-heading-title {
font-size: var(--fs-sm) !important;
}
/* Base */
.fs-base,
.fs-base p,
.fs-base a,
.fs-base span,
.fs-base div,
.elementor-widget.elementor-widget .fs-base p,
.elementor-widget .elementor-widget-text-editor .fs-base p
.fs-base.elementor-widget .elementor-widget-text-editor p,
.fs-base.elementor-widget .elementor-widget-container,
.fs-base.elementor-widget .elementor-widget-container p,
.fs-base.elementor-widget .elementor-widget-container span,
.fs-base.elementor-widget .elementor-heading-title,
.fs-base.elementor-widget h1.elementor-heading-title,
.fs-base.elementor-widget h2.elementor-heading-title,
.fs-base.elementor-widget h3.elementor-heading-title,
.fs-base.elementor-widget h4.elementor-heading-title,
.fs-base.elementor-widget h5.elementor-heading-title,
.fs-base.elementor-widget h6.elementor-heading-title,
.elementor-widget.fs-base .elementor-heading-title {
font-size: var(--fs-base) !important;
}
/* Medium */
.fs-md.elementor-widget .elementor-widget-container,
.fs-md.elementor-widget .elementor-widget-container p,
.fs-md.elementor-widget .elementor-widget-container span,
.fs-md.elementor-widget .elementor-heading-title,
.fs-md.elementor-widget h1.elementor-heading-title,
.fs-md.elementor-widget h2.elementor-heading-title,
.fs-md.elementor-widget h3.elementor-heading-title,
.fs-md.elementor-widget h4.elementor-heading-title,
.fs-md.elementor-widget h5.elementor-heading-title,
.fs-md.elementor-widget h6.elementor-heading-title,
.elementor-widget.fs-md .elementor-heading-title {
font-size: var(--fs-md) !important;
}
/* Large */
.fs-lg.elementor-widget .elementor-widget-container,
.fs-lg.elementor-widget .elementor-widget-container p,
.fs-lg.elementor-widget .elementor-widget-container span,
.fs-lg.elementor-widget .elementor-heading-title,
.fs-lg.elementor-widget h1.elementor-heading-title,
.fs-lg.elementor-widget h2.elementor-heading-title,
.fs-lg.elementor-widget h3.elementor-heading-title,
.fs-lg.elementor-widget h4.elementor-heading-title,
.fs-lg.elementor-widget h5.elementor-heading-title,
.fs-lg.elementor-widget h6.elementor-heading-title,
.elementor-widget.fs-lg .elementor-heading-title {
font-size: var(--fs-lg) !important;
}
/* XL */
.fs-xl.elementor-widget .elementor-widget-container,
.fs-xl.elementor-widget .elementor-widget-container p,
.fs-xl.elementor-widget .elementor-widget-container span,
.fs-xl.elementor-widget .elementor-heading-title,
.fs-xl.elementor-widget h1.elementor-heading-title,
.fs-xl.elementor-widget h2.elementor-heading-title,
.fs-xl.elementor-widget h3.elementor-heading-title,
.fs-xl.elementor-widget h4.elementor-heading-title,
.fs-xl.elementor-widget h5.elementor-heading-title,
.fs-xl.elementor-widget h6.elementor-heading-title,
.elementor-widget.fs-xl .elementor-heading-title {
font-size: var(--fs-xl) !important;
line-height: 0.95 !important;
}
/* XXL */
.fs-xxl.elementor-widget .elementor-widget-container,
.fs-xxl.elementor-widget .elementor-widget-container p,
.fs-xxl.elementor-widget .elementor-widget-container span,
.fs-xxl.elementor-widget .elementor-heading-title,
.fs-xxl.elementor-widget h1.elementor-heading-title,
.fs-xxl.elementor-widget h2.elementor-heading-title,
.fs-xxl.elementor-widget h3.elementor-heading-title,
.fs-xxl.elementor-widget h4.elementor-heading-title,
.fs-xxl.elementor-widget h5.elementor-heading-title,
.fs-xxl.elementor-widget h6.elementor-heading-title,
.elementor-widget.fs-xxl .elementor-heading-title {
font-size: var(--fs-xxl) !important;
line-height: 0.9 !important;
}
/* XXXL */
.fs-xxxl.elementor-widget .elementor-widget-container,
.fs-xxxl.elementor-widget .elementor-widget-container p,
.fs-xxxl.elementor-widget .elementor-widget-container span,
.fs-xxxl.elementor-widget .elementor-heading-title,
.fs-xxxl.elementor-widget h1.elementor-heading-title,
.fs-xxxl.elementor-widget h2.elementor-heading-title,
.fs-xxxl.elementor-widget h3.elementor-heading-title,
.fs-xxxl.elementor-widget h4.elementor-heading-title,
.fs-xxxl.elementor-widget h5.elementor-heading-title,
.fs-xxxl.elementor-widget h6.elementor-heading-title,
.elementor-widget.fs-xxxl .elementor-heading-title {
font-size: var(--fs-xxxl) !important;
line-height: 0.85 !important;
}
/*
=====================================================
TYPOGRAFIE - SCHRIFTARTEN (korrigiert)
=====================================================
*/
/* Fließtext - Avenir Normal */
.kb-body.elementor-widget .elementor-widget-container,
.kb-body.elementor-widget .elementor-widget-container p,
.kb-body.elementor-widget .elementor-widget-container span,
.elementor-widget.kb-body .elementor-widget-container {
font-family: var(--font-body) !important;
font-weight: 400 !important;
}
/* Fließtext mit Auszeichnung - Avenir Fett */
.kb-body-bold.elementor-widget .elementor-widget-container,
.kb-body-bold.elementor-widget .elementor-widget-container p,
.kb-body-bold.elementor-widget .elementor-widget-container span,
.elementor-widget.kb-body-bold .elementor-widget-container {
font-family: var(--font-body) !important;
font-weight: 700 !important;
}
/* Headlines - Brown Bold */
.kb-headline.elementor-widget .elementor-widget-container,
.kb-headline.elementor-widget .elementor-heading-title,
.kb-headline.elementor-widget h1.elementor-heading-title,
.kb-headline.elementor-widget h2.elementor-heading-title,
.kb-headline.elementor-widget h3.elementor-heading-title,
.kb-headline.elementor-widget h4.elementor-heading-title,
.kb-headline.elementor-widget h5.elementor-heading-title,
.kb-headline.elementor-widget h6.elementor-heading-title,
.elementor-widget.kb-headline .elementor-heading-title {
font-family: var(--font-headline) !important;
font-weight: 700 !important;
}
/*
=====================================================
TEXT-FARBEN (korrigiert für Elementor)
=====================================================
*/
/* Bereichsfarben */
.text-design.elementor-widget .elementor-widget-container,
.text-design.elementor-widget .elementor-widget-container *,
.text-design.elementor-widget .elementor-heading-title,
.elementor-widget.text-design .elementor-heading-title {
color: var(--kb-design) !important;
}
.text-content.elementor-widget .elementor-widget-container,
.text-content.elementor-widget .elementor-widget-container *,
.text-content.elementor-widget .elementor-heading-title,
.elementor-widget.text-content .elementor-heading-title {
color: var(--kb-content) !important;
}
.text-marke.elementor-widget .elementor-widget-container,
.text-marke.elementor-widget .elementor-widget-container *,
.text-marke.elementor-widget .elementor-heading-title,
.elementor-widget.text-marke .elementor-heading-title {
color: var(--kb-marke) !important;
}
.text-kreativbox.elementor-widget .elementor-widget-container,
.text-kreativbox.elementor-widget .elementor-widget-container *,
.text-kreativbox.elementor-widget .elementor-heading-title,
.elementor-widget.text-kreativbox .elementor-heading-title {
color: var(--kb-kreativbox) !important;
}
.text-website.elementor-widget .elementor-widget-container,
.text-website.elementor-widget .elementor-widget-container *,
.text-website.elementor-widget .elementor-heading-title,
.elementor-widget.text-website .elementor-heading-title {
color: var(--kb-website) !important;
}
.text-strategie.elementor-widget .elementor-widget-container,
.text-strategie.elementor-widget .elementor-widget-container *,
.text-strategie.elementor-widget .elementor-heading-title,
.elementor-widget.text-strategie .elementor-heading-title {
color: var(--kb-strategie) !important;
}
.text-somedia.elementor-widget .elementor-widget-container,
.text-somedia.elementor-widget .elementor-widget-container *,
.text-somedia.elementor-widget .elementor-heading-title,
.elementor-widget.text-somedia .elementor-heading-title {
color: var(--kb-somedia) !important;
}
/* ============================================================
A11Y: Akzentfarben-Override auf hellen Section-BGs
------------------------------------------------------------
Pink/Lila/Blau-Eyebrows liegen auf Sand (`--kb-gray-200`) bzw.
weißem BG bei ~3:1 Kontrast (WCAG 1.4.3 AA fail). Auf hellen
Bereichen ersetzen wir die Akzent-Textfarben durch
`--kb-gray-900` (Contrast ≥ 16:1 auf #e0dedb → AAA).
Markenfarben bleiben dort als Hover/Bg/Hervorhebungs-
Akzent erhalten (nur reiner Text wird dunkel).
============================================================ */
:is(.bg-white, .bg-gray-100, .bg-gray-200, .bg-light)
:is(.text-kreativbox, .text-marke, .text-website, .text-strategie, .text-somedia, .text-content),
:is(.bg-white, .bg-gray-100, .bg-gray-200, .bg-light)
:is(.text-kreativbox, .text-marke, .text-website, .text-strategie, .text-somedia, .text-content) *,
:is(.bg-white, .bg-gray-100, .bg-gray-200, .bg-light)
:is(.text-kreativbox, .text-marke, .text-website, .text-strategie, .text-somedia, .text-content) .elementor-heading-title {
color: var(--kb-gray-900) !important;
}
/* Icon-Box-Beschreibungen auf hellem BG: harter schwarzer Body-Text
(gleicher Grund: durchgereichte Akzentfarbe / dünnes Grau bricht
sonst AA-Kontrast). */
:is(.bg-white, .bg-gray-100, .bg-gray-200, .bg-light)
.elementor-icon-box-description {
color: var(--kb-gray-900) !important;
}
/* ============================================================
A11Y: Bereichsfarben als Section-/Card-BG mit zu hellem Wert
------------------------------------------------------------
Pink (#e51f75), Rot (#dd4342) und Orange (#ff9648) ergeben mit
weißem Text < 4.5:1 → WCAG 1.4.3 AA fail. Daher: wenn diese
drei Farben als BG-Klasse verwendet werden, läuft der Text
(Headings, Buttons, Body) auf `--kb-gray-900` (≥ 4.79:1 AA ✓).
Marke-Blau (5.51:1) und Website-Lila (5.65:1) bleiben weiß.
============================================================ */
/* Spezifität bewusst auf 4 Classes erhöht, weil `.text-white.elementor-widget
.elementor-heading-title` (Spec 0,3,0) in Z. ~1170 später steht und sonst
bei gleicher Spez+Important gewinnen würde. 4 Classes garantieren Override. */
:is(.bg-kreativbox, .bg-somedia, .bg-strategie),
:is(.bg-kreativbox, .bg-somedia, .bg-strategie) .elementor-element.elementor-widget .elementor-heading-title,
:is(.bg-kreativbox, .bg-somedia, .bg-strategie) .elementor-element.elementor-widget .elementor-heading-title *,
:is(.bg-kreativbox, .bg-somedia, .bg-strategie) .elementor-element.elementor-widget .elementor-widget-container *,
:is(.bg-kreativbox, .bg-somedia, .bg-strategie) .elementor-element.elementor-widget .elementor-button-text,
:is(.bg-kreativbox, .bg-somedia, .bg-strategie) .elementor-element.elementor-widget .elementor-icon-box-description,
:is(.bg-kreativbox, .bg-somedia, .bg-strategie) p,
:is(.bg-kreativbox, .bg-somedia, .bg-strategie) li {
color: var(--kb-gray-900) !important;
}
/* Ausnahme: Outline-/Ghost-Buttons invertieren beim Hover ihre Pille auf
dunkel. Der obige Schwarz-Fix würde den Text schwarz-auf-schwarz lassen
(unsichtbar). Beim Hover folgt der Button-Text daher wieder seiner eigenen
--btn-text-Logik (weiß auf dunkler Füllung). Nur Hover, nur Outline/Ghost,
höhere Spezifität als der Fix oben. Filled-Buttons bleiben unberührt. */
:is(.bg-kreativbox, .bg-somedia, .bg-strategie) :is(.kb-btn.outline, .kb-btn.ghost) .elementor-button:hover .elementor-button-text {
color: var(--btn-text) !important;
}
/* Dunkle Akzentflächen (Marke-Blau, Website-Lila) tragen helle Schrift.
Neutrale Outline-/Ghost-Buttons müssen dort WEISS sein statt schwarz
(Blau/Lila sind zu dunkel für schwarzen Text). Idle: weißer Rahmen +
weißer Text; Hover: weisse Füllung + schwarzer Text (wie .outline.dark). */
:is(.bg-marke, .bg-website) .kb-btn.outline,
:is(.bg-marke, .bg-website) .kb-btn.ghost {
--btn-text: var(--kb-white);
--btn-border: var(--kb-white);
--btn-accent: var(--kb-white);
--icon-fill: var(--kb-gray-900);
--btn-glow: rgba(255, 255, 255, 0.22);
}
:is(.bg-marke, .bg-website) .kb-btn.outline .elementor-button:hover,
:is(.bg-marke, .bg-website) .kb-btn.ghost .elementor-button:hover {
--btn-bg: var(--kb-white);
--btn-text: var(--kb-gray-900);
--btn-border: var(--kb-white);
--btn-accent: var(--kb-gray-900);
}
/* Primary-CTA-Buttons (`.kb-btn.kreativbox` etc.) bleiben bewusst mit
weißem Text auf Pink/Rot/Orange-BG — Brand-Konsistenz wichtiger als
die letzten 0.12 Punkte zur AA-Schwelle (Pink: 4.38:1 vs Soll 4.5:1).
Card-/Section-BGs (`.bg-kreativbox` etc.) sind dagegen oben gefixt. */
/* ============================================================
KB WEBGL HEADING — Liquid-Pull-Shader auf Display-Headlines
============================================================
Klasse .kb-webgl-heading auf das Heading-Widget setzen.
Das JS rendert den Text in ein WebGL-Canvas und wendet einen
Custom-Shader an, der Pixel zum Cursor zieht.
Original-Text bleibt im DOM (color:transparent) → Screen-Reader
und SEO sehen weiterhin den Text.
============================================================ */
.kb-webgl-heading .elementor-heading-title {
position: relative;
/* Wenn JS noch nicht initialisiert hat, zeigt der Browser den
normalen Text — kein FOUC-Flash mit transparentem Loch. */
}
.kb-webgl-heading__canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: auto;
}
/* ============================================================
KB MAGNETIC HEADING — Cursor zieht Buchstaben-für-Buchstaben
============================================================
Klasse .kb-magnetic-heading auf ein Heading-Widget setzen.
Das JS (assets/js/magnetic-heading.js) splittet den Text in
einzelne und animiert deren
Position abhängig von der Cursor-Distanz.
============================================================ */
.kb-magnetic-heading,
.kb-magnetic-heading .elementor-heading-title {
display: inline-block;
}
.kb-mag-letter {
display: inline-block;
/* Kein will-change: transform. Würde jeden Letter-Span in einen
Compositing-Layer schieben und Firefox' Subpixel-Antialiasing für
den Text deaktivieren. Der Browser entscheidet das selbst bei Bedarf. */
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ============================================================
KB ATOMIC LIQUID — Display-Headline mit Wisch- und Liquid-FX
============================================================
Klasse .kb-atomic-liquid auf ein Heading-Widget setzen.
Kombiniert:
1) Background-Clip-Text mit Marke-Gelb-Shine, der diagonal wischt
2) SVG-Turbulence-Distortion (subtiles Liquid-Wobble)
Default-Highlight = Marke-Gelb (kontrastiert auf weißer Schrift gut).
Override pro Element via --liquid-shine: .
============================================================ */
.kb-atomic-liquid .elementor-heading-title,
.kb-atomic-liquid.elementor-widget .elementor-heading-title {
--liquid-shine: var(--kb-marke, #ffd84d);
background-image: linear-gradient(
110deg,
currentColor 22%,
color-mix(in srgb, var(--liquid-shine) 70%, currentColor) 40%,
var(--liquid-shine) 50%,
color-mix(in srgb, var(--liquid-shine) 70%, currentColor) 60%,
currentColor 78%
) !important;
background-size: 220% 100% !important;
background-position: 200% 0;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
display: inline-block;
filter: url(#kb-liquid);
animation: kb-atomic-liquid-shine 4.5s ease-in-out infinite;
-webkit-font-smoothing: antialiased;
will-change: background-position, filter;
}
/* Wipe-Direction: Highlight zieht von rechts nach links durch den Text */
@keyframes kb-atomic-liquid-shine {
0% { background-position: 220% 0; }
100% { background-position: -120% 0; }
}
/* Reduced-Motion: Effekt beruhigen, statisches Highlight */
@media (prefers-reduced-motion: reduce) {
.kb-atomic-liquid .elementor-heading-title,
.kb-atomic-liquid.elementor-widget .elementor-heading-title {
animation: none !important;
filter: none !important;
background-position: 50% 0;
}
}
/* Grautöne */
.text-gray-900.elementor-widget .elementor-widget-container,
.text-gray-900.elementor-widget .elementor-widget-container *,
.text-gray-900.elementor-widget .elementor-heading-title,
.elementor-widget.text-gray-900 .elementor-heading-title {
color: var(--kb-gray-900) !important;
}
.text-gray-800.elementor-widget .elementor-widget-container,
.text-gray-800.elementor-widget .elementor-widget-container *,
.text-gray-800.elementor-widget .elementor-heading-title,
.elementor-widget.text-gray-800 .elementor-heading-title {
color: var(--kb-gray-800) !important;
}
.text-gray-700.elementor-widget .elementor-widget-container,
.text-gray-700.elementor-widget .elementor-widget-container *,
.text-gray-700.elementor-widget .elementor-heading-title,
.elementor-widget.text-gray-700 .elementor-heading-title {
color: var(--kb-gray-700) !important;
}
.text-gray-500.elementor-widget .elementor-widget-container,
.text-gray-500.elementor-widget .elementor-widget-container *,
.text-gray-500.elementor-widget .elementor-heading-title,
.elementor-widget.text-gray-500 .elementor-heading-title {
color: var(--kb-gray-500) !important;
}
.text-gray-300.elementor-widget .elementor-widget-container,
.text-gray-300.elementor-widget .elementor-widget-container *,
.text-gray-300.elementor-widget .elementor-heading-title,
.elementor-widget.text-gray-300 .elementor-heading-title {
color: var(--kb-gray-300) !important;
}
.text-gray-200.elementor-widget .elementor-widget-container,
.text-gray-200.elementor-widget .elementor-widget-container *,
.text-gray-200.elementor-widget .elementor-heading-title,
.elementor-widget.text-gray-200 .elementor-heading-title {
color: var(--kb-gray-200) !important;
}
.text-gray-100.elementor-widget .elementor-widget-container,
.text-gray-100.elementor-widget .elementor-widget-container *,
.text-gray-100.elementor-widget .elementor-heading-title,
.elementor-widget.text-gray-100 .elementor-heading-title {
color: var(--kb-gray-100) !important;
}
.text-white.elementor-widget .elementor-widget-container,
.text-white.elementor-widget .elementor-widget-container *,
.text-white.elementor-widget .elementor-heading-title,
.elementor-widget.text-white .elementor-heading-title {
color: var(--kb-white) !important;
}
.text-dark.elementor-widget .elementor-widget-container,
.text-dark.elementor-widget .elementor-widget-container *,
.text-dark.elementor-widget .elementor-heading-title,
.elementor-widget.text-dark .elementor-heading-title {
color: var(--kb-gray-900) !important;
}
.text-light.elementor-widget .elementor-widget-container,
.text-light.elementor-widget .elementor-widget-container *,
.text-light.elementor-widget .elementor-heading-title,
.elementor-widget.text-light .elementor-heading-title {
color: var(--kb-gray-100) !important;
}
/*
=====================================================
4. BORDER RADIUS
=====================================================
*/
.radius-none { border-radius: 0 !important; }
.radius-sm { border-radius: var(--radius-sm) !important; }
.radius-12 { border-radius: var(--radius-12) !important; }
.radius-24 { border-radius: var(--radius-24) !important; }
.radius-32 { border-radius: var(--radius-32) !important; }
.radius-full { border-radius: var(--radius-full) !important; }
/* Alias */
.rounded { border-radius: var(--radius-12) !important; }
.rounded-lg { border-radius: var(--radius-24) !important; }
.rounded-xl { border-radius: var(--radius-32) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }
/* Für Elementor Container/Sections */
.kb-radius-12 > .elementor-widget-container,
.kb-radius-12 > .elementor-container {
border-radius: var(--radius-12) !important;
overflow: hidden;
}
.kb-radius-24 > .elementor-widget-container,
.kb-radius-24 > .elementor-container {
border-radius: var(--radius-24) !important;
overflow: hidden;
}
.kb-radius-32 > .elementor-widget-container,
.kb-radius-32 > .elementor-container {
border-radius: var(--radius-32) !important;
overflow: hidden;
}
/*
=====================================================
5. SPACING - MARGIN BOTTOM
=====================================================
*/
.mb-0 { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: var(--space-xs) !important; }
.mb-sm { margin-bottom: var(--space-sm) !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.mb-lg { margin-bottom: var(--space-lg) !important; }
.mb-xl { margin-bottom: var(--space-xl) !important; }
.mb-xxl { margin-bottom: var(--space-xxl) !important; }
.mb-xxxl { margin-bottom: var(--space-xxxl) !important; }
/*
=====================================================
5. SPACING - MARGIN TOP
=====================================================
*/
.mt-0 { margin-top: 0 !important; }
.mt-xs { margin-top: var(--space-xs) !important; }
.mt-sm { margin-top: var(--space-sm) !important; }
.mt-md { margin-top: var(--space-md) !important; }
.mt-lg { margin-top: var(--space-lg) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }
.mt-xxl { margin-top: var(--space-xxl) !important; }
.mt-xxxl { margin-top: var(--space-xxxl) !important; }
/*
=====================================================
5. SPACING - MARGIN LEFT
=====================================================
*/
.ml-0 { margin-left: 0 !important; }
.ml-xs { margin-left: var(--space-xs) !important; }
.ml-sm { margin-left: var(--space-sm) !important; }
.ml-md { margin-left: var(--space-md) !important; }
.ml-lg { margin-left: var(--space-lg) !important; }
.ml-xl { margin-left: var(--space-xl) !important; }
.ml-xxl { margin-left: var(--space-xxl) !important; }
.ml-xxxl { margin-left: var(--space-xxxl) !important; }
/*
=====================================================
5. SPACING - MARGIN RIGHT
=====================================================
*/
.mr-0 { margin-right: 0 !important; }
.mr-xs { margin-right: var(--space-xs) !important; }
.mr-sm { margin-right: var(--space-sm) !important; }
.mr-md { margin-right: var(--space-md) !important; }
.mr-lg { margin-right: var(--space-lg) !important; }
.mr-xl { margin-right: var(--space-xl) !important; }
.mr-xxl { margin-right: var(--space-xxl) !important; }
.mr-xxxl { margin-right: var(--space-xxxl) !important; }
/*
=====================================================
5. SPACING - MARGIN X (Links + Rechts)
=====================================================
*/
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-xs { margin-left: var(--space-xs) !important; margin-right: var(--space-xs) !important; }
.mx-sm { margin-left: var(--space-sm) !important; margin-right: var(--space-sm) !important; }
.mx-md { margin-left: var(--space-md) !important; margin-right: var(--space-md) !important; }
.mx-lg { margin-left: var(--space-lg) !important; margin-right: var(--space-lg) !important; }
.mx-xl { margin-left: var(--space-xl) !important; margin-right: var(--space-xl) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
/*
=====================================================
5. SPACING - MARGIN Y (Oben + Unten)
=====================================================
*/
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-xs { margin-top: var(--space-xs) !important; margin-bottom: var(--space-xs) !important; }
.my-sm { margin-top: var(--space-sm) !important; margin-bottom: var(--space-sm) !important; }
.my-md { margin-top: var(--space-md) !important; margin-bottom: var(--space-md) !important; }
.my-lg { margin-top: var(--space-lg) !important; margin-bottom: var(--space-lg) !important; }
.my-xl { margin-top: var(--space-xl) !important; margin-bottom: var(--space-xl) !important; }
/*
=====================================================
5. SPACING - PADDING
=====================================================
*/
/* Padding All */
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--space-xs) !important; }
.p-sm { padding: var(--space-sm) !important; }
.p-md { padding: var(--space-md) !important; }
.p-lg { padding: var(--space-lg) !important; }
.p-xl { padding: var(--space-xl) !important; }
.p-xxl { padding: var(--space-xxl) !important; }
/* Padding Top */
.pt-0 { padding-top: 0 !important; }
.pt-xs { padding-top: var(--space-xs) !important; }
.pt-sm { padding-top: var(--space-sm) !important; }
.pt-md { padding-top: var(--space-md) !important; }
.pt-lg { padding-top: var(--space-lg) !important; }
.pt-xl { padding-top: var(--space-xl) !important; }
.pt-xxl { padding-top: var(a--space-xxl) !important; }
/* Padding Bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-xs { padding-bottom: var(--space-xs) !important; }
.pb-sm { padding-bottom: var(--space-sm) !important; }
.pb-md { padding-bottom: var(--space-md) !important; }
.pb-lg { padding-bottom: var(--space-lg) !important; }
.pb-xl { padding-bottom: var(--space-xl) !important; }
.pb-xxl { padding-bottom: var(--space-xxl) !important; }
/* Padding Left */
.pl-0 { padding-left: 0 !important; }
.pl-xs { padding-left: var(--space-xs) !important; }
.pl-sm { padding-left: var(--space-sm) !important; }
.pl-md { padding-left: var(--space-md) !important; }
.pl-lg { padding-left: var(--space-lg) !important; }
.pl-xl { padding-left: var(--space-xl) !important; }
/* Padding Right */
.pr-0 { padding-right: 0 !important; }
.pr-xs { padding-right: var(--space-xs) !important; }
.pr-sm { padding-right: var(--space-sm) !important; }
.pr-md { padding-right: var(--space-md) !important; }
.pr-lg { padding-right: var(--space-lg) !important; }
.pr-xl { padding-right: var(--space-xl) !important; }
/* Padding X */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-xs { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; }
.px-sm { padding-left: var(--space-sm) !important; padding-right: var(--space-sm) !important; }
.px-md { padding-left: var(--space-md) !important; padding-right: var(--space-md) !important; }
.px-lg { padding-left: var(--space-lg) !important; padding-right: var(--space-lg) !important; }
.px-xl { padding-left: var(--space-xl) !important; padding-right: var(--space-xl) !important; }
/* Padding Y */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-xs { padding-top: var(--space-xs) !important; padding-bottom: var(--space-xs) !important; }
.py-sm { padding-top: var(--space-sm) !important; padding-bottom: var(--space-sm) !important; }
.py-md { padding-top: var(--space-md) !important; padding-bottom: var(--space-md) !important; }
.py-lg { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; }
.py-xl { padding-top: var(--space-xl) !important; padding-bottom: var(--space-xl) !important; }
/*
=====================================================
GLASS BASIS
=====================================================
*/
.glass {
--accent: var(--glass-accent);
position: relative;
border-radius: var(--glass-radius);
/* Backdrop Blur */
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
/* Gradient Background: links heller, rechts dunkler */
background-image: linear-gradient(
135deg,
var(--white-20),
var(--white-5)
);
/* Schatten für Tiefe */
box-shadow: 0 0.5em 1.5em hsla(0, 0%, 0%, 0.1);
/* Overflow für Border-Effekt */
overflow: hidden;
}
/* Maskierter Rahmen - Weiß (oben links) */
.glass::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid var(--white-100);
mask-image: linear-gradient(
135deg,
var(--white-100),
var(--white-0) 50%
);
-webkit-mask-image: linear-gradient(
135deg,
var(--white-100),
var(--white-0) 50%
);
pointer-events: none;
}
/* Maskierter Rahmen - Akzentfarbe (unten rechts) */
.glass::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid var(--accent);
mask-image: linear-gradient(
135deg,
var(--white-0) 50%,
var(--white-100)
);
-webkit-mask-image: linear-gradient(
135deg,
var(--white-0) 50%,
var(--white-100)
);
pointer-events: none;
}
/* Content muss über den Pseudo-Elementen sein */
.glass > * {
position: relative;
z-index: 1;
}
/*
=====================================================
AKZENTFARBEN
=====================================================
*/
.glass-design { --accent: var(--kb-design, #FDE962); }
.glass-content { --accent: var(--kb-content, #00e962); }
.glass-marke { --accent: var(--kb-marke, #234BFF); }
.glass-kreativbox { --accent: var(--kb-kreativbox, #e51f75); }
.glass-website { --accent: var(--kb-website, #8221D8); }
.glass-strategie { --accent: var(--kb-strategie, #ff9648); }
.glass-somedia { --accent: var(--kb-somedia, #DD4342); }
.glass-white { --accent: var(--white-100); }
.glass-gray { --accent: var(--kb-gray-500, #8a8b89); }
/*
=====================================================
BLUR VARIANTEN
=====================================================
*/
.glass-blur-sm { --glass-blur: 6px; }
.glass-blur-md { --glass-blur: 12px; }
.glass-blur-lg { --glass-blur: 20px; }
.glass-blur-xl { --glass-blur: 30px; }
/*
=====================================================
RADIUS VARIANTEN
=====================================================
*/
.glass-radius-sm { --glass-radius: 12px; border-radius: 12px; }
.glass-radius-md { --glass-radius: 24px; border-radius: 24px; }
.glass-radius-lg { --glass-radius: 32px; border-radius: 32px; }
.glass-radius-xl { --glass-radius: 48px; border-radius: 48px; }
.glass-radius-full { --glass-radius: 100vmax; border-radius: 100vmax; }
/*
=====================================================
BACKGROUND VARIANTEN
=====================================================
*/
/* Stärker sichtbar */
.glass-strong {
background-image: linear-gradient(
135deg,
var(--white-30),
var(--white-10)
);
}
/* Sehr subtle */
.glass-subtle {
background-image: linear-gradient(
135deg,
var(--white-10),
var(--white-5)
);
}
/* Dunkles Glass */
.glass-dark {
background-image: linear-gradient(
135deg,
hsla(0, 0%, 0%, 0.3),
hsla(0, 0%, 0%, 0.1)
);
}
.glass-dark::before {
border-color: var(--white-30);
}
/*
=====================================================
GLASS MIT FARBIGEM HINTERGRUND
Glass-Effekt mit transparenter Markenfarbe als Basis
=====================================================
*/
/* Design (Gelb) */
.glass-bg-design {
background-image: linear-gradient(
135deg,
hsla(54, 98%, 69%, 0.25),
hsla(54, 98%, 69%, 0.1)
) !important;
}
.glass-bg-design::before {
border-color: hsla(54, 98%, 69%, 0.4) !important;
}
/* Content (Grün) */
.glass-bg-content {
background-image: linear-gradient(
135deg,
hsla(151, 100%, 46%, 0.25),
hsla(151, 100%, 46%, 0.1)
) !important;
}
.glass-bg-content::before {
border-color: hsla(151, 100%, 46%, 0.4) !important;
}
/* Marke (Blau) */
.glass-bg-marke {
background-image: linear-gradient(
135deg,
hsla(228, 100%, 57%, 0.25),
hsla(228, 100%, 57%, 0.1)
) !important;
}
.glass-bg-marke::before {
border-color: hsla(228, 100%, 57%, 0.4) !important;
}
/* Kreativbox (Pink) */
.glass-bg-kreativbox {
background-image: linear-gradient(
135deg,
hsla(333, 78%, 51%, 0.25),
hsla(333, 78%, 51%, 0.1)
) !important;
}
.glass-bg-kreativbox::before {
border-color: hsla(333, 78%, 51%, 0.4) !important;
}
/* Website (Lila) - Default */
.glass-bg-website {
background-image: linear-gradient(
135deg,
hsla(268, 74%, 49%, 0.25),
hsla(268, 74%, 49%, 0.1)
) !important;
}
.glass-bg-website::before {
border-color: hsla(268, 74%, 49%, 0.4) !important;
}
/* Strategie (Orange) */
.glass-bg-strategie {
background-image: linear-gradient(
135deg,
hsla(30, 100%, 64%, 0.25),
hsla(30, 100%, 64%, 0.1)
) !important;
}
.glass-bg-strategie::before {
border-color: hsla(30, 100%, 64%, 0.4) !important;
}
/* Somedia (Rot) */
.glass-bg-somedia {
background-image: linear-gradient(
135deg,
hsla(1, 69%, 56%, 0.25),
hsla(1, 69%, 56%, 0.1)
) !important;
}
.glass-bg-somedia::before {
border-color: hsla(1, 69%, 56%, 0.4) !important;
}
/* Stärkere Varianten (-strong) */
.glass-bg-design-strong {
background-image: linear-gradient(135deg, hsla(54, 98%, 69%, 0.4), hsla(54, 98%, 69%, 0.2)) !important;
}
.glass-bg-content-strong {
background-image: linear-gradient(135deg, hsla(151, 100%, 46%, 0.4), hsla(151, 100%, 46%, 0.2)) !important;
}
.glass-bg-marke-strong {
background-image: linear-gradient(135deg, hsla(228, 100%, 57%, 0.4), hsla(228, 100%, 57%, 0.2)) !important;
}
.glass-bg-kreativbox-strong {
background-image: linear-gradient(135deg, hsla(333, 78%, 51%, 0.4), hsla(333, 78%, 51%, 0.2)) !important;
}
.glass-bg-website-strong {
background-image: linear-gradient(135deg, hsla(268, 74%, 49%, 0.4), hsla(268, 74%, 49%, 0.2)) !important;
}
.glass-bg-strategie-strong {
background-image: linear-gradient(135deg, hsla(30, 100%, 64%, 0.4), hsla(30, 100%, 64%, 0.2)) !important;
}
.glass-bg-somedia-strong {
background-image: linear-gradient(135deg, hsla(1, 69%, 56%, 0.4), hsla(1, 69%, 56%, 0.2)) !important;
}
/* Dezentere Varianten (-subtle) */
.glass-bg-design-subtle {
background-image: linear-gradient(135deg, hsla(54, 98%, 69%, 0.12), hsla(54, 98%, 69%, 0.05)) !important;
}
.glass-bg-content-subtle {
background-image: linear-gradient(135deg, hsla(151, 100%, 46%, 0.12), hsla(151, 100%, 46%, 0.05)) !important;
}
.glass-bg-marke-subtle {
background-image: linear-gradient(135deg, hsla(228, 100%, 57%, 0.12), hsla(228, 100%, 57%, 0.05)) !important;
}
.glass-bg-kreativbox-subtle {
background-image: linear-gradient(135deg, hsla(333, 78%, 51%, 0.12), hsla(333, 78%, 51%, 0.05)) !important;
}
.glass-bg-website-subtle {
background-image: linear-gradient(135deg, hsla(268, 74%, 49%, 0.12), hsla(268, 74%, 49%, 0.05)) !important;
}
.glass-bg-strategie-subtle {
background-image: linear-gradient(135deg, hsla(30, 100%, 64%, 0.12), hsla(30, 100%, 64%, 0.05)) !important;
}
.glass-bg-somedia-subtle {
background-image: linear-gradient(135deg, hsla(1, 69%, 56%, 0.12), hsla(1, 69%, 56%, 0.05)) !important;
}
/* Horizontaler Gradient (statt diagonal) */
.glass-horizontal {
background-image: linear-gradient(
90deg,
var(--white-20),
var(--white-5)
);
}
.glass-horizontal::before {
mask-image: linear-gradient(
90deg,
var(--white-100),
var(--white-0) 50%
);
-webkit-mask-image: linear-gradient(
90deg,
var(--white-100),
var(--white-0) 50%
);
}
.glass-horizontal::after {
mask-image: linear-gradient(
90deg,
var(--white-0) 50%,
var(--white-100)
);
-webkit-mask-image: linear-gradient(
90deg,
var(--white-0) 50%,
var(--white-100)
);
}
/* Vertikaler Gradient */
.glass-vertical {
background-image: linear-gradient(
180deg,
var(--white-20),
var(--white-5)
);
}
.glass-vertical::before {
mask-image: linear-gradient(
180deg,
var(--white-100),
var(--white-0) 50%
);
-webkit-mask-image: linear-gradient(
180deg,
var(--white-100),
var(--white-0) 50%
);
}
.glass-vertical::after {
mask-image: linear-gradient(
180deg,
var(--white-0) 50%,
var(--white-100)
);
-webkit-mask-image: linear-gradient(
180deg,
var(--white-0) 50%,
var(--white-100)
);
}
/*
=====================================================
BORDER VARIANTEN
=====================================================
*/
/* Dickerer Rahmen */
.glass-border-2::before,
.glass-border-2::after {
border-width: 2px;
}
/* Kein weißer Rahmen (nur Akzent) */
.glass-border-accent-only::before {
display: none;
}
/* Kein Akzent-Rahmen (nur weiß) */
.glass-border-white-only::after {
display: none;
}
/* Vollständiger Rahmen (nicht maskiert) */
.glass-border-full::before {
mask-image: none;
-webkit-mask-image: none;
border-color: var(--white-30);
}
.glass-border-full::after {
display: none;
}
/*
=====================================================
SCHATTEN VARIANTEN
=====================================================
*/
.glass-shadow-none {
box-shadow: none;
}
.glass-shadow-sm {
box-shadow: 0 0.25em 0.5em hsla(0, 0%, 0%, 0.08);
}
.glass-shadow-lg {
box-shadow:
0 1em 2em hsla(0, 0%, 0%, 0.12),
0 0.5em 1em hsla(0, 0%, 0%, 0.08);
}
.glass-shadow-glow {
box-shadow:
0 0.5em 1.5em hsla(0, 0%, 0%, 0.1),
0 0 30px color-mix(in srgb, var(--accent) 20%, transparent);
}
/*
=====================================================
HOVER EFFEKTE
=====================================================
*/
.glass-hover {
/* Spring-Easing: leichter Overshoot beim Hover ("Pop"-Gefühl) */
transition:
transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.4s ease,
background-image 0.3s ease;
}
.glass-hover:hover {
transform: translateY(-4px);
box-shadow:
0 1em 2.5em hsla(0, 0%, 0%, 0.15),
0 0 40px color-mix(in srgb, var(--accent) 25%, transparent);
}
/* Active/Click feedback – schnelles Einsinken */
.glass-hover:active {
transform: translateY(-1px) scale(0.98);
transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Hover mit verstärktem Background */
.glass-hover-strong:hover {
background-image: linear-gradient(
135deg,
var(--white-30),
var(--white-10)
);
}
/* Scale Hover */
.glass-hover-scale {
transition:
transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.4s ease;
}
.glass-hover-scale:hover {
transform: scale(1.04);
}
.glass-hover-scale:active {
transform: scale(0.98);
transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}
/*
=====================================================
ICON-BOUNCE in Glass-Elementen
Wenn ein Icon (z. B. Pfeil) in einem .glass-hover oder
.glass-hover-scale steckt, bekommt es eine eigene
Spring-Bewegung diagonal nach oben-rechts (typischer
"Outgoing-Link"-Move). Funktioniert mit Elementor Icon-
Widgets und einfachen