/* ===================================================================
COGNIFIT – GLOBALES CUSTOM CSS FÜR AVADA
Einfügen unter: Avada → Theme Options → Advanced → Custom CSS
=================================================================== */
/* ——————————————————————-
1. FARBVARIABLEN
Diese Variablen einmal hier definiert, kannst du in allen
weiteren Blöcken per var(–cf-green) etc. wiederverwenden.
——————————————————————- */
:root {
–cf-cream: #F7F6F1;
–cf-ink: #1F2A1A;
–cf-green: #6FA12E;
–cf-green-bright: #9ACD32;
–cf-teal-deep: #2D4A3E;
–cf-text-warm: #54534A;
–cf-line: #DEDACE;
–cf-white: #FFFFFF;
}
/* ——————————————————————-
2. SCHRIFTART-ZUWEISUNG FÜR SPACE MONO
Space Mono wird NICHT global gesetzt (das macht Avada Typography
für Headlines/Body), sondern gezielt über diese Klasse.
Diese Klasse manuell im Text-Element unter “Custom Class” eintragen.
——————————————————————- */
.cf-mono {
font-family: ‘Space Mono’, monospace !important;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* Falls Space Mono nicht über Avada Typography geladen wird,
hier zusätzlich per @import einbinden: */
@import url(‘https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap’);
/* ===================================================================
3. TOPBAR (Sektion 1)
=================================================================== */
.cf-topbar {
background-color: var(–cf-ink) !important;
}
.cf-topbar, .cf-topbar a {
color: rgba(247, 246, 241, 0.65) !important;
font-size: 0.78rem !important;
}
.cf-topbar a:hover {
color: var(–cf-green-bright) !important;
}
/* ===================================================================
4. HERO (Sektion 3)
Nur relevant falls Weg B (native Avada-Elemente) genutzt wird.
Bei Weg A (Code-Block) ist das CSS bereits im Code-Block enthalten.
=================================================================== */
.cf-hero {
background-color: var(–cf-ink) !important;
min-height: 82vh;
position: relative;
overflow: hidden;
/* Schräger unterer Abschluss */
clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
margin-bottom: ‑4vw;
}
.cf-hero h1 {
color: var(–cf-cream) !important;
font-size: clamp(2.6rem, 5.5vw, 4rem) !important;
line-height: 1.08 !important;
font-weight: 700 !important;
letter-spacing: ‑0.02em;
}
.cf-hero h1 em {
font-style: italic;
color: var(–cf-green-bright) !important;
font-weight: 500;
}
.cf-hero .eyebrow {
font-family: ‘Space Mono’, monospace !important;
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(–cf-green-bright) !important;
display: flex;
align-items: center;
gap: 0.75rem;
}
.cf-hero .eyebrow::before {
content: ”;
width: 2rem;
height: 2px;
background: var(–cf-green-bright);
}
/* Hero-Button als Pill-Form mit Hover-Bewegung */
.cf-hero-cta.fusion-button {
background-color: var(–cf-green) !important;
color: var(–cf-ink) !important;
border-radius: 100px !important;
padding: 1rem 2.3rem !important;
font-weight: 700 !important;
transition: background 0.2s, transform 0.2s;
}
.cf-hero-cta.fusion-button:hover {
background-color: var(–cf-green-bright) !important;
transform: translateY(-2px);
}
/* Slide-Dots Navigation */
.cf-hero-dots {
position: absolute;
bottom: 3rem;
left: 3rem;
display: flex;
gap: 0.7rem;
z‑index: 3;
}
.cf-hero-dot {
width: 2.2rem;
height: 3px;
background: rgba(247, 246, 241, 0.25);
cursor: pointer;
transition: background 0.3s;
}
.cf-hero-dot.active {
background: var(–cf-green-bright) !important;
}
/* Animierte Bewegungsspur (SVG) im Hero-Hintergrund */
.hero-track {
position: absolute;
inset: 0;
pointer-events: none;
z‑index: 1;
}
.track-path {
fill: none;
stroke: var(–cf-green-bright);
stroke-width: 2.5;
stroke-linecap: round;
opacity: 0.55;
stroke-dasharray: 900;
stroke-dashoffset: 900;
animation: cf-draw 2.8s ease forwards 0.3s;
}
.track-node {
fill: var(–cf-green-bright);
opacity: 0;
animation: cf-pop 0.4s ease forwards;
}
@keyframes cf-draw {
to { stroke-dashoffset: 0; }
}
@keyframes cf-pop {
to { opacity: 1; }
}
/* ===================================================================
5. LOGO-STREIFEN (Sektion 4)
=================================================================== */
.cf-logos {
background-color: var(–cf-white) !important;
padding-top: 4rem !important;
padding-bottom: 3rem !important;
}
.cf-logos-label {
text-align: center;
font-family: ‘Space Mono’, monospace !important;
font-size: 0.72rem !important;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(–cf-text-warm) !important;
}
.cf-logos-sub {
text-align: center;
margin-top: 2rem;
font-size: 0.88rem;
color: var(–cf-text-warm) !important;
}
.cf-logos-sub strong {
color: var(–cf-green) !important;
}
/* Falls KEIN Avada-Hover-Effekt “Grayscale to Color” genutzt wird,
diesen Effekt alternativ hier per CSS erzwingen: */
.cf-logos img {
filter: grayscale(100%);
opacity: 0.65;
transition: filter 0.2s, opacity 0.2s, transform 0.2s;
}
.cf-logos img:hover {
filter: grayscale(0%);
opacity: 1;
transform: scale(1.05);
}
/* ===================================================================
6. DREI-BLOCK-ANGEBOT (Sektion 5)
=================================================================== */
.cf-offers {
background-color: var(–cf-cream) !important;
}
/* Avada Content-Boxes innerhalb dieser Sektion stylen */
.cf-offers .fusion-content-boxes‑1 .content-boxes,
.cf-offers .fusion-content-box {
background-color: var(–cf-white) !important;
border-radius: 16px !important;
padding: 2.4rem 2.1rem !important;
transition: transform 0.25s, box-shadow 0.25s;
}
.cf-offers .fusion-content-box:hover {
transform: translateY(-6px) rotate(-0.3deg);
box-shadow: 0 16px 40px rgba(31, 42, 26, 0.1);
}
.cf-offers h3 {
font-family: ‘Fraunces’, serif !important;
font-weight: 700 !important;
font-size: 1.35rem !important;
}
.cf-offers p {
color: var(–cf-text-warm) !important;
font-size: 0.94rem !important;
}
/* Mittlere Karte leicht höher versetzt – diese Custom Class
auf die MITTLERE Column anwenden */
.cf-offer-middle {
margin-top: ‑0.8rem !important;
}
.cf-offer-middle:hover {
margin-top: ‑6.8rem !important;
}
/* Link-Farbe innerhalb der Content Boxes */
.cf-offers a {
color: var(–cf-teal-deep) !important;
font-weight: 700 !important;
text-decoration: none !important;
}
.cf-offers a:hover {
color: var(–cf-green) !important;
}
/* ===================================================================
7. ZAHLEN-LEISTE / STATS (Sektion 6)
=================================================================== */
.cf-stats {
background-color: var(–cf-teal-deep) !important;
/* Schräger Abschluss oben */
clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%);
padding-top: 4rem !important;
padding-bottom: 4.5rem !important;
margin-top: 1rem;
}
.cf-stat-num {
font-family: ‘Fraunces’, serif !important;
font-size: 2.6rem !important;
font-weight: 700 !important;
color: var(–cf-green-bright) !important;
text-align: center;
}
.cf-stat-label {
font-family: ‘Space Mono’, monospace !important;
font-size: 0.7rem !important;
letter-spacing: 0.08em;
color: rgba(247, 246, 241, 0.6) !important;
text-align: center;
}
/* ===================================================================
8. WARUM BEWEGUNG (Sektion 7)
=================================================================== */
.cf-why {
background-color: var(–cf-white) !important;
padding: 6rem 3rem !important;
}
.cf-why-visual {
aspect-ratio: 1/1;
border-radius: 24px;
background: var(–cf-ink);
overflow: hidden;
transform: rotate(-2deg);
}
.cf-why h2 {
font-family: ‘Fraunces’, serif !important;
font-weight: 700 !important;
font-size: clamp(1.9rem, 3.2vw, 2.5rem) !important;
}
.cf-why p {
color: var(–cf-text-warm) !important;
font-size: 1.02rem !important;
line-height: 1.85 !important;
}
/* Animierte Bewegungslinie innerhalb der Visual-Box */
.move-line {
fill: none;
stroke: var(–cf-green-bright);
stroke-width: 2.5;
stroke-linecap: round;
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: cf-draw2 3s ease infinite;
}
@keyframes cf-draw2 {
0% { stroke-dashoffset: 600; }
50% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: ‑600; }
}
/* ===================================================================
9. TESTIMONIALS (Sektion 8)
=================================================================== */
.cf-testimonials {
background-color: var(–cf-cream) !important;
}
.cf-testimonials .fusion-testimonial {
background-color: var(–cf-white) !important;
border-radius: 18px !important;
padding: 2.3rem !important;
}
/* Zweite Testimonial-Karte leicht versetzt –
diese Custom Class auf die zweite Karte anwenden */
.cf-quote-offset {
margin-top: 1.2rem !important;
}
.cf-testimonials .fusion-testimonial-text {
font-style: italic !important;
font-size: 1.02rem !important;
}
.cf-testimonials .fusion-testimonial-name {
font-family: ‘Space Mono’, monospace !important;
font-size: 0.78rem !important;
color: var(–cf-green) !important;
}
/* ===================================================================
10. AKTUELLE TERMINE (Sektion 9)
=================================================================== */
.cf-dates {
background-color: var(–cf-white) !important;
}
.cf-date-card {
border: 2px solid var(–cf-line) !important;
border-radius: 16px !important;
padding: 1.7rem 1.2rem !important;
text-align: center;
transition: border-color 0.2s, transform 0.2s;
}
.cf-date-card:hover {
border-color: var(–cf-green) !important;
transform: translateY(-3px);
}
.cf-date-month {
font-family: ‘Space Mono’, monospace !important;
font-size: 0.68rem !important;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(–cf-green) !important;
}
.cf-date-day {
font-family: ‘Fraunces’, serif !important;
font-size: 2.2rem !important;
font-weight: 700 !important;
}
.cf-date-price {
font-size: 0.82rem;
color: var(–cf-text-warm) !important;
}
/* ===================================================================
11. ÜBER MICH (Sektion 10)
=================================================================== */
.cf-about {
background-color: var(–cf-cream) !important;
}
.cf-about-photo img {
border-radius: 50% !important;
aspect-ratio: 1/1;
object-fit: cover;
}
.cf-about h2 {
font-family: ‘Fraunces’, serif !important;
font-weight: 700 !important;
font-size: 1.7rem !important;
}
.cf-about p {
color: var(–cf-text-warm) !important;
line-height: 1.85 !important;
}
/* ===================================================================
12. FINALER CTA (Sektion 11)
=================================================================== */
.cf-final-cta {
background-color: var(–cf-green) !important;
clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%);
padding: 5rem 3rem !important;
text-align: center;
}
.cf-final-cta h2 {
font-family: ‘Fraunces’, serif !important;
font-weight: 700 !important;
color: var(–cf-ink) !important;
}
.cf-final-cta p {
color: var(–cf-ink) !important;
opacity: 0.85;
}
.cf-final-cta-btn.fusion-button {
background-color: var(–cf-ink) !important;
color: var(–cf-cream) !important;
border-radius: 100px !important;
padding: 1rem 2.5rem !important;
font-weight: 700 !important;
transition: transform 0.2s;
}
.cf-final-cta-btn.fusion-button:hover {
transform: translateY(-2px) scale(1.03);
}
/* ===================================================================
13. NEWSLETTER-STREIFEN
=================================================================== */
.cf-newsletter {
background-color: var(–cf-ink) !important;
color: rgba(247, 246, 241, 0.65) !important;
padding: 1.5rem 3rem !important;
text-align: center;
font-size: 0.85rem !important;
}
.cf-newsletter a {
color: var(–cf-green-bright) !important;
text-decoration: none !important;
}
/* ===================================================================
14. RESPONSIVE ANPASSUNGEN
Avada nutzt eigene Breakpoints – diese ergänzen die Standard-
Responsive-Einstellungen aus dem Builder für die Custom-Elemente.
=================================================================== */
@media (max-width: 900px) {
.cf-topbar, .cf-hero, .cf-offers, .cf-why,
.cf-dates, .cf-about, .cf-stats, .cf-final-cta,
.cf-logos, .cf-testimonials {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
.cf-offer-middle,
.cf-offer-middle:hover {
margin-top: 0 !important;
}
.cf-quote-offset {
margin-top: 0 !important;
}
.cf-about-photo {
margin: 0 auto;
max-width: 140px;
}
}
/* Bewegungsreduzierung für Nutzer mit entsprechender Systemeinstellung */
@media (prefers-reduced-motion: reduce) {
.track-path, .track-node, .move-line {
animation: none !important;
}
}
/* ===================================================================
ENDE DES CUSTOM CSS =================================================================== */
