/*
Theme Name: Avada Child
Theme URI: https://zuke-green.de
Description: Child Theme für ZUKE Green Hauptseite (zuke-green.de). Brand-Fonts Oswald + Roboto, sachliche Editorial-Komponenten analog zur Kongress-Site.
Author: Jan Schumann
Author URI: https://zuke-green.de
Template: Avada
Version: 1.27.1
Text Domain: avada-child
*/
/* =====================================================================
WP-7.0-Kompatibilität: Core liefert neu (wp-block-library inline)
html :where([style*=border-color]) { border-style: solid }
Der Substring-Selektor trifft auch Elemente, die nur CSS-Variablen wie
--awb-menu-border-color inline definieren (Avada-Menü-nav, Testimonials,
Separatoren …) → sichtbare Kästen in Default-Breite, obwohl nie ein
Rahmen gemeint war. Dieses Reset stellt das 6.9-Verhalten wieder her:
gleiche Spezifität (0,0,1), spätere Quelle gewinnt. Echte Borders
(Klassen-CSS oder inline border-style) bleiben unberührt; Gutenberg-
Blöcke mit Border-Support sind ausgenommen.
===================================================================== */
html :where([style*="border-color"]:not([class*="wp-block-"])) {
border-style: none;
}
/* =====================================================================
Brand-Variablen — analog Kongress-Site, leicht reduzierter Set für Hauptseite
===================================================================== */
:root {
--zk-green-900: #0f2b0f;
--zk-green-800: #1a4d1a;
--zk-green-700: #236b23;
--zk-green-600: #2d8a2d;
--zk-green-500: #4CAF50;
--zk-green-300: #81C784;
--zk-green-200: #A5D6A7;
--zk-green-100: #C8E6C9;
--zk-green-50: #E8F5E9;
--zk-lime: #8BC34A;
--zk-lime-bright: #C6FF00;
--zk-lime-dark: #689F38;
--zk-ink: #0a2010;
--zk-text: #1a2e1a;
--zk-muted: #4b5563;
--zk-soft: #6b7280;
--zk-paper: #fafcf8;
--zk-paper-2: #f8faf5;
--zk-line: #e5e7eb;
/* v1.19.0: Hover/Active im Hauptmenü (Block am Dateiende) */
--zk-menu-active: #2A712B;
--zk-font-display: 'Oswald', 'Helvetica Neue', sans-serif;
--zk-font-body: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* =====================================================================
Body / Avada Reset für Hauptseite
===================================================================== */
body {
font-family: var(--zk-font-body);
color: var(--zk-text);
background: var(--zk-paper);
line-height: 1.7;
}
/* Avada-Reset: 100%-Width-Container ohne ungewolltes Sidebar-Padding */
.fusion-content-tb #content,
.fusion-content-tb-cb #content { padding: 0 !important; max-width: none !important; }
/* v1.2.0: Custom-Header-Injection vom Plugin entfernt — Header wird via
Avada Theme Builder (Library → Header) global gepflegt. Die alten
.zk-header*-Selektoren stehen nicht mehr in der gerenderten DOM. */
/* =====================================================================
Reusable Editorial-Komponenten (analog Kongress-Site, kompakter)
===================================================================== */
/* Overlines */
.zk-overline {
font-family: var(--zk-font-body);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--zk-lime-dark);
display: block;
margin-bottom: 12px;
}
.zk-overline--lime { color: var(--zk-lime-bright); }
/* Section Heads (left, center, invert) */
.zk-section-head { margin-bottom: 56px; max-width: 760px; }
.zk-section-head--left { text-align: left; }
.zk-section-head--center { text-align: center; margin-left: auto; margin-right: auto; }
.zk-section-head__sub {
font-family: var(--zk-font-body);
font-size: 1.05rem;
line-height: 1.7;
color: var(--zk-muted);
margin: 16px 0 0;
}
.zk-section-head__sub--invert { color: rgba(255,255,255,0.7); }
.zk-section-h2,
h2.zk-section-h2 {
font-family: var(--zk-font-display) !important;
font-weight: 600 !important;
font-size: clamp(1.9rem, 3.6vw, 2.8rem) !important;
line-height: 1.1 !important;
letter-spacing: -0.005em !important;
color: var(--zk-ink) !important;
margin: 0 0 16px !important;
}
.zk-section-h2--invert,
h2.zk-section-h2--invert { color: #ffffff !important; }
/* Prose */
.zk-prose {
font-family: var(--zk-font-body);
font-size: 1.05rem;
line-height: 1.75;
color: var(--zk-muted);
margin: 0 0 16px;
max-width: 720px;
}
.zk-prose-block { max-width: 800px; }
/* Page Hero (sub-pages) */
.zk-page-hero {
max-width: 920px;
padding: 56px 0 32px;
}
.zk-page-hero--compact { padding: 40px 0 16px; }
.zk-page-hero__overline {
font-family: var(--zk-font-body);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--zk-lime-dark);
display: block;
margin-bottom: 14px;
}
.zk-page-hero__title {
font-family: var(--zk-font-display);
font-weight: 600;
font-size: clamp(2.4rem, 5.5vw, 4rem);
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--zk-ink);
margin: 0 0 20px;
}
.zk-page-hero__lead {
font-family: var(--zk-font-body);
font-size: 1.15rem;
line-height: 1.7;
color: var(--zk-muted);
max-width: 720px;
margin: 0 0 24px;
}
.zk-page-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
font-family: var(--zk-font-body);
font-size: 0.92rem;
color: var(--zk-muted);
margin-top: 16px;
}
.zk-page-hero__meta span { white-space: nowrap; }
/* =====================================================================
Home Hero
===================================================================== */
.zk-hero { max-width: 600px; }
.zk-hero__overline {
font-family: var(--zk-font-body);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--zk-lime-dark);
display: block;
margin-bottom: 16px;
}
.zk-hero__title {
font-family: var(--zk-font-display);
font-weight: 600;
font-size: clamp(2.6rem, 6vw, 4.4rem);
line-height: 1.02;
letter-spacing: -0.01em;
color: var(--zk-ink);
margin: 0 0 22px;
}
.zk-hero__lead {
font-family: var(--zk-font-body);
font-size: 1.18rem;
line-height: 1.7;
color: var(--zk-muted);
margin: 0 0 28px;
max-width: 540px;
}
/* Home Hero Card (rechts) */
.zk-hero-card {
background: linear-gradient(135deg, var(--zk-green-50), #f0f7e6);
border-radius: 4px;
padding: 36px 32px;
border-left: 6px solid var(--zk-lime);
}
.zk-hero-card__num {
font-family: var(--zk-font-display);
font-weight: 700;
font-size: clamp(3rem, 7vw, 5rem);
line-height: 1;
color: var(--zk-green-700);
margin: 0 0 12px;
letter-spacing: -0.02em;
}
.zk-hero-card__lead {
font-family: var(--zk-font-body);
font-size: 1rem;
line-height: 1.6;
color: var(--zk-muted);
margin: 0 0 20px;
}
.zk-hero-card__facts {
list-style: none;
margin: 0;
padding: 16px 0 0;
border-top: 1px solid rgba(35,107,35,0.15);
display: grid;
gap: 8px;
}
.zk-hero-card__facts li {
font-family: var(--zk-font-body);
font-size: 0.92rem;
color: var(--zk-text);
}
.zk-hero-card__facts strong {
font-family: var(--zk-font-display);
font-weight: 600;
color: var(--zk-green-700);
margin-right: 4px;
}
/* =====================================================================
Challenge Card (Home)
===================================================================== */
.zk-challenge-card {
background: linear-gradient(135deg, var(--zk-green-50), #f0f7e6);
border-radius: 4px;
padding: 44px 40px;
position: relative;
overflow: hidden;
}
.zk-challenge-card::after {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 180px;
height: 180px;
background: var(--zk-lime);
border-radius: 50%;
opacity: 0.15;
pointer-events: none;
}
.zk-challenge-card__num {
font-family: var(--zk-font-display);
font-weight: 700;
font-size: clamp(3.6rem, 8vw, 5.6rem);
line-height: 1;
color: var(--zk-green-700);
margin: 0 0 12px;
letter-spacing: -0.02em;
position: relative;
z-index: 1;
}
.zk-challenge-card__num span {
font-size: 0.55em;
color: var(--zk-lime-dark);
margin-left: 4px;
}
.zk-challenge-card > p {
font-family: var(--zk-font-body);
font-size: 1.05rem;
color: var(--zk-muted);
margin: 0 0 24px;
position: relative;
z-index: 1;
}
.zk-challenge-card__facts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
position: relative;
z-index: 1;
}
.zk-challenge-card__facts > div {
background: #ffffff;
border-radius: 4px;
padding: 18px 16px;
text-align: center;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.zk-challenge-card__facts strong {
display: block;
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.5rem;
color: var(--zk-green-700);
}
.zk-challenge-card__facts span {
font-family: var(--zk-font-body);
font-size: 0.78rem;
color: var(--zk-soft);
}
/* =====================================================================
Pillars Grid (3 Säulen Home + Ökosystem invert)
===================================================================== */
/* Avada rendert content-boxes so:
Direkte Grid-Children sind die `.content-box-column`-Boxes. Wir
forcieren echtes CSS-Grid auf der OUTER-Section (analog Kongress
`.fusion-content-boxes.zk-tracks-grid`-Pattern). */
/* Avada-Bootstrap Defensive: keine row::before/::after Slots im Grid füllen */
.fusion-content-boxes.zk-pillars-grid::before,
.fusion-content-boxes.zk-pillars-grid::after,
.fusion-content-boxes.zk-feature-grid::before,
.fusion-content-boxes.zk-feature-grid::after,
.fusion-content-boxes.zk-steps-grid::before,
.fusion-content-boxes.zk-steps-grid::after {
display: none !important;
}
.fusion-content-boxes.zk-pillars-grid,
.fusion-content-boxes.zk-feature-grid,
.fusion-content-boxes.zk-steps-grid {
display: grid !important;
gap: 24px !important;
margin: 0 !important;
}
.fusion-content-boxes.zk-pillars-grid,
.fusion-content-boxes.zk-steps-grid { grid-template-columns: repeat(3, 1fr) !important; }
.fusion-content-boxes.zk-feature-grid { grid-template-columns: repeat(2, 1fr) !important; }
/* Avadas trailing `.fusion-clearfix` würde sonst eine leere Grid-Zelle belegen */
.fusion-content-boxes.zk-pillars-grid > .fusion-clearfix,
.fusion-content-boxes.zk-feature-grid > .fusion-clearfix,
.fusion-content-boxes.zk-steps-grid > .fusion-clearfix {
display: none !important;
}
@media (max-width: 900px) {
.fusion-content-boxes.zk-pillars-grid,
.fusion-content-boxes.zk-feature-grid,
.fusion-content-boxes.zk-steps-grid { grid-template-columns: 1fr !important; }
}
/* Avada Bootstrap col override: direkte Children full-width im Grid-Cell */
.fusion-content-boxes.zk-pillars-grid > .content-box-column,
.fusion-content-boxes.zk-feature-grid > .content-box-column,
.fusion-content-boxes.zk-steps-grid > .content-box-column,
.zk-pillars-grid .fusion-column-wrapper,
.zk-feature-grid .fusion-column-wrapper,
.zk-steps-grid .fusion-column-wrapper {
width: auto !important;
max-width: none !important;
flex: initial !important;
margin: 0 !important;
float: none !important;
}
.zk-pillar-card,
.zk-feature-card,
.zk-step-card {
background: #ffffff !important;
border: 1px solid var(--zk-line) !important;
border-radius: 4px !important;
padding: 32px 28px !important;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
position: relative;
}
.zk-pillar-card:hover,
.zk-feature-card:hover,
.zk-step-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(15,43,15,0.08);
border-color: var(--zk-green-200);
}
.zk-pillar-card .heading h2,
.zk-pillar-card .heading h3,
.zk-feature-card .heading h2,
.zk-feature-card .heading h3,
.zk-step-card .heading h2,
.zk-step-card .heading h3 {
font-family: var(--zk-font-display) !important;
font-weight: 600 !important;
font-size: 1.2rem !important;
color: var(--zk-ink) !important;
margin: 0 0 12px !important;
line-height: 1.2 !important;
}
.zk-pillar-card .content-container,
.zk-feature-card .content-container,
.zk-step-card .content-container {
font-family: var(--zk-font-body) !important;
font-size: 0.95rem !important;
color: var(--zk-muted) !important;
line-height: 1.65 !important;
}
.zk-pillar-card .content-container a,
.zk-feature-card .content-container a {
color: var(--zk-green-700);
font-weight: 600;
font-size: 0.88rem;
text-decoration: none;
display: inline-block;
margin-top: 12px;
letter-spacing: 0.02em;
}
.zk-pillar-card .content-container a:hover,
.zk-feature-card .content-container a:hover { color: var(--zk-lime-dark); }
/* Step-Card Nummern */
.zk-step-card__num {
display: inline-block;
font-family: var(--zk-font-display);
font-weight: 700;
font-size: 0.85rem;
color: var(--zk-lime-dark);
background: var(--zk-green-50);
padding: 4px 10px;
border-radius: 4px;
letter-spacing: 0.06em;
margin-bottom: 12px;
}
/* Pillars Invert (Ökosystem dark) */
.zk-pillars-grid--invert .zk-pillar-card--invert {
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
}
.zk-pillars-grid--invert .zk-pillar-card--invert:hover {
background: rgba(255,255,255,0.09) !important;
border-color: rgba(198,255,0,0.25) !important;
}
.zk-pillars-grid--invert .zk-pillar-card--invert .heading h2,
.zk-pillars-grid--invert .zk-pillar-card--invert .heading h3 {
color: var(--zk-lime-bright) !important;
}
.zk-pillars-grid--invert .zk-pillar-card--invert .content-container {
color: rgba(255,255,255,0.75) !important;
}
/* =====================================================================
Vision/Mission Cards (Home)
===================================================================== */
.zk-vm-card {
border-radius: 4px;
padding: 48px 40px;
height: 100%;
position: relative;
overflow: hidden;
}
.zk-vm-card__overline {
font-family: var(--zk-font-body);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
display: block;
margin-bottom: 16px;
}
.zk-vm-card__title {
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.6rem;
line-height: 1.2;
margin: 0 0 16px;
letter-spacing: -0.005em;
}
.zk-vm-card p {
font-family: var(--zk-font-body);
font-size: 1rem;
line-height: 1.75;
margin: 0;
}
.zk-vm-card--vision {
background: linear-gradient(135deg, var(--zk-green-700), var(--zk-green-900));
color: #ffffff;
border-left: 6px solid var(--zk-lime-bright);
}
.zk-vm-card--vision .zk-vm-card__overline { color: var(--zk-lime-bright); }
.zk-vm-card--vision .zk-vm-card__title { color: #ffffff; }
.zk-vm-card--vision p { color: rgba(255,255,255,0.85); }
.zk-vm-card--mission {
background: linear-gradient(135deg, #f0f7e6, var(--zk-green-50));
color: var(--zk-ink);
border-left: 6px solid var(--zk-green-700);
}
.zk-vm-card--mission .zk-vm-card__overline { color: var(--zk-lime-dark); }
.zk-vm-card--mission .zk-vm-card__title { color: var(--zk-green-900); }
.zk-vm-card--mission p { color: var(--zk-muted); }
/* =====================================================================
Kongress Teaser (Home + Events-Page)
- Avadas h3-Default-Color überschreiben mit !important.
- Kompaktes Layout: Teaser + Stats in max-width-Box, Lücke in der Mitte
reduziert, Stats-Boxen nicht mehr riesig.
===================================================================== */
.zk-kongress-teaser {
color: #ffffff;
max-width: 560px;
}
.zk-kongress-teaser__title,
h3.zk-kongress-teaser__title {
font-family: var(--zk-font-display) !important;
font-weight: 600 !important;
font-size: clamp(1.6rem, 2.6vw, 2rem) !important;
color: var(--zk-lime-bright) !important;
margin: 0 0 18px !important;
line-height: 1.15 !important;
}
.zk-kongress-teaser__badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.zk-badge {
background: rgba(139,195,74,0.15);
border: 1px solid rgba(139,195,74,0.3);
color: var(--zk-lime-bright);
padding: 5px 12px;
border-radius: 4px;
font-family: var(--zk-font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.zk-kongress-teaser__lead {
font-family: var(--zk-font-body);
color: rgba(255,255,255,0.78);
font-size: 1rem;
line-height: 1.65;
margin: 0 0 12px;
max-width: 540px;
}
.zk-kongress-teaser__sub {
font-family: var(--zk-font-body);
color: rgba(255,255,255,0.6);
font-size: 0.9rem;
font-style: italic;
margin: 0;
max-width: 540px;
}
.zk-kongress-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
max-width: 480px;
margin-left: auto;
}
.zk-kongress-stat {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 4px;
padding: 18px 14px;
text-align: center;
}
.zk-kongress-stat__num {
font-family: var(--zk-font-display);
font-weight: 700;
font-size: 1.7rem;
color: var(--zk-lime-bright);
line-height: 1;
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.zk-kongress-stat__label {
font-family: var(--zk-font-body);
font-size: 0.72rem;
color: rgba(255,255,255,0.65);
letter-spacing: 0.06em;
text-transform: uppercase;
}
@media (max-width: 900px) {
.zk-kongress-teaser,
.zk-kongress-stats { max-width: 100%; margin-left: 0; }
}
/* =====================================================================
Team Grid (Home)
===================================================================== */
.zk-team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 920px;
margin: 0 auto;
}
.zk-team-card { text-align: center; }
.zk-team-card__avatar {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 2rem;
color: #ffffff;
letter-spacing: 0.02em;
overflow: hidden; /* damit das ![]()
innerhalb der runden Maske geclippt wird */
}
/* v1.14.1: Foto im Avatar-Kreis — füllt den 120×120-Container randscharf
(object-fit:cover croppt nicht-quadratische Fotos mittig). Selektor greift
sowohl für die alte v1.0.0-Markup (![]()
direkt im __avatar) als auch für
den hand-eingefügten ![]()
-Fall, den der WP-Editor bei Bild-Insert
gerne produziert. */
.zk-team-card__avatar img,
.zk-team-card__avatar p img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 50% !important;
display: block !important;
margin: 0 !important;
max-width: none !important;
/* WP-Defaults wie srcset/sizes können vertikale Verzerrung verursachen */
aspect-ratio: 1 / 1;
}
.zk-team-card__avatar p {
margin: 0 !important;
padding: 0 !important;
width: 100%;
height: 100%;
}
.zk-team-card__avatar--a { background: linear-gradient(135deg, var(--zk-green-600), var(--zk-green-800)); }
.zk-team-card__avatar--b { background: linear-gradient(135deg, var(--zk-lime-dark), var(--zk-green-700)); }
.zk-team-card__avatar--c { background: linear-gradient(135deg, var(--zk-green-700), var(--zk-green-900)); }
.zk-team-card__avatar--d { background: linear-gradient(135deg, var(--zk-green-800), var(--zk-green-900)); }
.zk-team-card__name {
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.1rem;
color: var(--zk-ink);
margin-bottom: 4px;
}
.zk-team-card__role {
font-family: var(--zk-font-body);
font-size: 0.85rem;
color: var(--zk-soft);
}
@media (max-width: 768px) {
.zk-team-grid { grid-template-columns: repeat(2, 1fr); }
}
/* =====================================================================
Quote Block
===================================================================== */
.zk-quote { max-width: 820px; margin: 0 auto; }
.zk-quote__mark {
font-family: var(--zk-font-display);
font-weight: 700;
font-size: 4rem;
color: var(--zk-lime-bright);
line-height: 0.5;
margin-bottom: 16px;
opacity: 0.6;
}
.zk-quote__text {
font-family: var(--zk-font-display);
font-weight: 400;
font-size: clamp(1.2rem, 2.4vw, 1.7rem);
line-height: 1.45;
color: #ffffff;
margin: 0 0 24px;
letter-spacing: -0.005em;
}
.zk-quote__author {
font-family: var(--zk-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--zk-lime-bright);
margin: 0;
letter-spacing: 0.02em;
}
/* =====================================================================
Timeline (Ökosystem)
===================================================================== */
.zk-timeline {
display: flex;
flex-direction: column;
position: relative;
padding-left: 0;
}
.zk-timeline::before {
content: '';
position: absolute;
left: 21px;
top: 0;
bottom: 0;
width: 2px;
background: var(--zk-green-200);
}
.zk-timeline__item {
display: flex;
gap: 24px;
padding: 18px 0;
position: relative;
}
.zk-timeline__dot {
width: 44px;
height: 44px;
min-width: 44px;
border-radius: 50%;
background: #ffffff;
border: 3px solid var(--zk-green-500);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--zk-font-display);
font-weight: 700;
font-size: 0.78rem;
color: var(--zk-green-700);
z-index: 2;
}
.zk-timeline__body { padding-top: 4px; }
.zk-timeline__body h4 {
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.1rem;
color: var(--zk-green-800);
margin: 0 0 6px;
}
.zk-timeline__body p {
font-family: var(--zk-font-body);
font-size: 0.95rem;
color: var(--zk-muted);
line-height: 1.65;
margin: 0;
}
/* =====================================================================
Checklist (Community)
===================================================================== */
.zk-checklist {
list-style: none;
margin: 16px 0 24px;
padding: 0;
}
.zk-checklist li {
padding: 8px 0 8px 28px;
position: relative;
font-family: var(--zk-font-body);
font-size: 0.98rem;
color: var(--zk-muted);
}
.zk-checklist li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--zk-green-500);
font-weight: 700;
}
/* =====================================================================
Ambassador Grid (Community)
===================================================================== */
.zk-ambassador-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 32px;
}
.zk-ambassador-card {
background: #ffffff;
border-radius: 4px;
padding: 28px 20px;
text-align: center;
border: 1px solid var(--zk-line);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.zk-ambassador-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(15,43,15,0.08);
border-color: var(--zk-green-200);
}
.zk-ambassador-card__avatar {
width: 64px;
height: 64px;
border-radius: 50%;
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.1rem;
color: #ffffff;
background: var(--zk-green-700);
}
.zk-ambassador-card:nth-child(2n) .zk-ambassador-card__avatar { background: var(--zk-green-800); }
.zk-ambassador-card:nth-child(3n) .zk-ambassador-card__avatar { background: var(--zk-lime-dark); }
.zk-ambassador-card__name {
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 0.98rem;
color: var(--zk-green-900);
margin-bottom: 4px;
}
.zk-ambassador-card__org {
font-family: var(--zk-font-body);
font-size: 0.82rem;
color: var(--zk-soft);
font-weight: 500;
}
.zk-ambassador-card__role {
font-family: var(--zk-font-body);
font-size: 0.78rem;
color: var(--zk-soft);
margin-top: 2px;
}
@media (max-width: 1024px) { .zk-ambassador-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .zk-ambassador-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .zk-ambassador-grid { grid-template-columns: 1fr; } }
/* Testimonials (Community) */
.zk-testimonials .reviews,
.zk-testimonials .fusion-testimonials {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 24px !important;
margin: 24px 0 0 !important;
}
.zk-testimonials .review {
background: #ffffff !important;
border: 1px solid var(--zk-line) !important;
border-radius: 4px !important;
padding: 32px 28px !important;
position: relative;
}
.zk-testimonials .review::before {
content: '„';
font-family: var(--zk-font-display);
font-weight: 700;
font-size: 3.5rem;
color: var(--zk-green-200);
position: absolute;
top: 8px;
left: 16px;
line-height: 1;
}
.zk-testimonials .testimonial-author,
.zk-testimonials .author-info,
.zk-testimonials .author {
font-family: var(--zk-font-body) !important;
font-weight: 600 !important;
color: var(--zk-green-800) !important;
font-size: 0.92rem !important;
margin-top: 14px !important;
}
.zk-testimonials .company,
.zk-testimonials .author-info span {
color: var(--zk-soft) !important;
font-weight: 400 !important;
font-size: 0.85rem !important;
}
.zk-testimonials .content,
.zk-testimonials blockquote,
.zk-testimonials p {
font-family: var(--zk-font-body) !important;
font-size: 0.98rem !important;
line-height: 1.7 !important;
color: var(--zk-muted) !important;
font-style: italic;
padding-top: 16px;
}
@media (max-width: 768px) {
.zk-testimonials .reviews,
.zk-testimonials .fusion-testimonials { grid-template-columns: 1fr !important; }
}
/* CTA Box (Community + others) */
.zk-cta-box {
background: var(--zk-green-50);
border: 1px solid var(--zk-green-200);
border-radius: 4px;
padding: 40px 32px;
text-align: center;
max-width: 600px;
margin: 0 auto 24px;
}
.zk-cta-box__title {
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.5rem;
color: var(--zk-green-800);
margin: 0 0 12px;
}
.zk-cta-box__lead {
font-family: var(--zk-font-body);
font-size: 1rem;
color: var(--zk-muted);
margin: 0;
}
/* =====================================================================
Partner Page
===================================================================== */
.zk-stat-panel {
background: linear-gradient(135deg, var(--zk-green-50), #f0f7e6);
border-radius: 4px;
padding: 44px 36px;
text-align: center;
border-left: 6px solid var(--zk-lime);
}
.zk-stat-panel__big {
font-family: var(--zk-font-display);
font-weight: 700;
font-size: clamp(3.4rem, 7vw, 5rem);
color: var(--zk-green-700);
line-height: 1;
letter-spacing: -0.02em;
}
.zk-stat-panel__big-label {
font-family: var(--zk-font-body);
font-weight: 600;
font-size: 1rem;
color: var(--zk-muted);
margin-top: 4px;
letter-spacing: 0.02em;
}
.zk-stat-panel__row {
display: flex;
justify-content: center;
gap: 32px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(35,107,35,0.15);
}
.zk-stat-panel__row > div { text-align: center; }
.zk-stat-panel__row strong {
display: block;
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.4rem;
color: var(--zk-green-700);
}
.zk-stat-panel__row span {
font-family: var(--zk-font-body);
font-size: 0.78rem;
color: var(--zk-soft);
}
.zk-featured-partner {
background: var(--zk-green-900);
border-radius: 4px;
padding: 36px;
display: grid;
grid-template-columns: 200px 1fr;
gap: 32px;
align-items: center;
color: #ffffff;
border-left: 6px solid var(--zk-lime-bright);
}
.zk-featured-partner__logo {
background: #ffffff;
border-radius: 4px;
padding: 28px 20px;
display: flex;
align-items: center;
justify-content: center;
min-height: 140px;
}
/* v1.9.0: echtes Logo-Image (Featured Image vom CPT) */
.zk-featured-partner__logo-img {
max-width: 100%;
max-height: 100px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.zk-featured-partner__logo-fallback {
font-family: var(--zk-font-display);
font-weight: 700;
font-size: 1.4rem;
color: var(--zk-green-700);
letter-spacing: 0.02em;
text-align: center;
}
.zk-featured-partner__title {
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.7rem;
/* !important nötig, weil Avadas globale h3-Regel im [fusion_text] greift
und sonst den Default-Heading-Color (dunkles Blau) zieht — auf dem
Dark-Hero unlesbar. */
color: #ffffff !important;
margin: 8px 0 8px;
}
.zk-featured-partner__body p {
font-family: var(--zk-font-body);
font-size: 0.95rem;
color: rgba(255,255,255,0.78);
margin: 0 0 12px;
line-height: 1.7;
}
.zk-featured-partner__body p:last-child { margin-bottom: 0; }
.zk-featured-partner__text { margin-bottom: 4px; }
/* v1.9.0: "Zur Webseite"-CTA-Button im Neuzugang-Block
v1.24.0: weiße Schrift wie alle Buttons */
.zk-featured-partner__cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--zk-lime);
color: #ffffff !important;
font-family: var(--zk-font-body);
font-weight: 600;
font-size: 0.85rem;
text-decoration: none;
padding: 12px 22px;
border-radius: 4px;
margin-top: 18px;
letter-spacing: 0.02em;
transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.zk-featured-partner__cta:hover,
.zk-featured-partner__cta:focus-visible {
background: var(--zk-lime-dark);
color: #ffffff !important;
outline: none;
transform: translateY(-1px);
}
/* v1.23.0: wie im Partner-Modal — Lösung im Navigator + Webseite. */
.zk-featured-partner__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 28px;
margin-top: 18px;
}
.zk-featured-partner__actions .zk-featured-partner__cta { margin-top: 0; }
.zk-featured-partner__link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #ffffff !important;
font-family: var(--zk-font-body);
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.02em;
text-decoration: underline;
text-underline-offset: 3px;
}
.zk-featured-partner__link:hover,
.zk-featured-partner__link:focus-visible {
color: var(--zk-lime-bright) !important;
}
@media (max-width: 768px) {
.zk-featured-partner { grid-template-columns: 1fr; text-align: center; }
.zk-featured-partner__cta { align-self: center; }
.zk-featured-partner__actions { justify-content: center; }
}
.zk-partner-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
margin-top: 32px;
}
.zk-partner-logo {
background: #ffffff;
border-radius: 4px;
padding: 28px 20px;
display: flex;
align-items: center;
justify-content: center;
min-height: 90px;
border: 1px solid var(--zk-line);
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 0.85rem;
color: var(--zk-soft);
text-align: center;
letter-spacing: 0.04em;
transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.zk-partner-logo:hover {
border-color: var(--zk-green-300);
color: var(--zk-green-700);
box-shadow: 0 6px 16px rgba(15,43,15,0.06);
}
@media (max-width: 1024px) { .zk-partner-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .zk-partner-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .zk-partner-grid { grid-template-columns: repeat(2, 1fr); } }
/* Final-CTA (Partner / Newsletter) */
.zk-final-cta {
max-width: 760px;
margin: 0 auto 24px;
text-align: center;
}
.zk-final-cta__lead {
font-family: var(--zk-font-body);
font-size: 1.1rem;
color: rgba(255,255,255,0.8);
margin: 12px 0 24px;
line-height: 1.7;
}
.zk-final-cta__lead a { color: var(--zk-lime-bright); }
.zk-final-cta__fineprint {
font-family: var(--zk-font-body);
font-size: 0.85rem;
color: rgba(255,255,255,0.55);
margin: 16px 0 0;
}
/* =====================================================================
Events Page
===================================================================== */
.zk-navigator-card {
display: grid;
grid-template-columns: 96px 1fr;
gap: 24px;
align-items: center;
background: #ffffff;
border: 1px solid var(--zk-green-100);
border-left: 6px solid var(--zk-lime);
border-radius: 4px;
padding: 28px;
margin-top: 32px;
}
.zk-navigator-card__icon {
width: 80px;
height: 80px;
background: var(--zk-green-50);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--zk-font-display);
font-size: 2rem;
color: var(--zk-green-700);
}
.zk-navigator-card__body h4 {
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.2rem;
color: var(--zk-green-800);
margin: 6px 0 6px;
}
.zk-navigator-card__body p {
font-family: var(--zk-font-body);
font-size: 0.95rem;
color: var(--zk-muted);
line-height: 1.65;
margin: 0;
}
@media (max-width: 768px) {
.zk-navigator-card { grid-template-columns: 1fr; text-align: center; }
.zk-navigator-card__icon { margin: 0 auto; }
}
.zk-events-list {
display: grid;
gap: 16px;
margin-top: 32px;
}
.zk-event-row {
display: grid;
grid-template-columns: 110px 1fr;
gap: 24px;
align-items: center;
background: #ffffff;
border: 1px solid var(--zk-line);
border-radius: 4px;
padding: 22px 26px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.zk-event-row:hover {
border-color: var(--zk-green-200);
box-shadow: 0 6px 16px rgba(15,43,15,0.06);
}
.zk-event-row--highlight {
border-color: var(--zk-lime);
background: linear-gradient(135deg, #ffffff, var(--zk-green-50));
}
.zk-event-row__date {
text-align: center;
border-right: 1px solid var(--zk-line);
padding-right: 16px;
}
.zk-event-row__day {
font-family: var(--zk-font-display);
font-weight: 700;
font-size: 1.6rem;
color: var(--zk-green-700);
line-height: 1;
}
.zk-event-row__month {
font-family: var(--zk-font-body);
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--zk-lime-dark);
margin-top: 4px;
}
.zk-event-row__body h4 {
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.1rem;
color: var(--zk-green-900);
margin: 0 0 4px;
}
.zk-event-row__body p {
font-family: var(--zk-font-body);
font-size: 0.9rem;
color: var(--zk-muted);
margin: 0;
line-height: 1.6;
}
.zk-event-row__loc {
font-family: var(--zk-font-body);
font-size: 0.82rem;
color: var(--zk-soft);
margin-top: 6px;
}
/* v1.17.0: Body + optionales Logo nebeneinander in der zweiten Spalte. */
.zk-event-row__main {
display: flex;
gap: 24px;
align-items: center;
}
.zk-event-row__body { flex: 1 1 auto; min-width: 0; }
.zk-event-row__logo {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
max-width: 130px;
}
.zk-event-row__logo-img {
max-width: 130px;
max-height: 64px;
width: auto;
height: auto;
object-fit: contain;
}
/* v1.17.0: pflegbarer Link zur Veranstaltung. */
.zk-event-row__link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
font-family: var(--zk-font-body);
font-size: 0.85rem;
font-weight: 600;
color: var(--zk-green-700);
text-decoration: none;
transition: gap 0.18s ease, color 0.18s ease;
}
.zk-event-row__link:hover,
.zk-event-row__link:focus-visible {
color: var(--zk-lime-dark);
gap: 9px;
}
@media (max-width: 768px) {
.zk-event-row { grid-template-columns: 80px 1fr; padding: 18px 20px; }
.zk-event-row__day { font-size: 1.3rem; }
.zk-event-row__main { flex-direction: column; align-items: flex-start; gap: 14px; }
.zk-event-row__logo { max-width: 110px; }
}
/* =====================================================================
News / Blog Grid
===================================================================== */
.zk-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}
.zk-blog-card {
background: #ffffff;
border-radius: 4px;
overflow: hidden;
border: 1px solid var(--zk-line);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.zk-blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(15,43,15,0.08);
}
.zk-blog-card__thumb {
height: 180px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--zk-font-display);
font-size: 3.4rem;
color: var(--zk-green-700);
letter-spacing: -0.02em;
}
.zk-blog-card__thumb--a { background: linear-gradient(135deg, var(--zk-green-100), var(--zk-green-200)); }
.zk-blog-card__thumb--b { background: linear-gradient(135deg, #e8f0e0, #d4e8c0); }
.zk-blog-card__thumb--c { background: linear-gradient(135deg, var(--zk-green-50), #f0f7e6); }
.zk-blog-card__body { padding: 26px; }
.zk-blog-card__tag {
font-family: var(--zk-font-body);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--zk-lime-dark);
display: block;
margin-bottom: 10px;
}
.zk-blog-card__body h4 {
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.05rem;
color: var(--zk-green-900);
margin: 0 0 10px;
line-height: 1.3;
}
.zk-blog-card__body p {
font-family: var(--zk-font-body);
font-size: 0.88rem;
color: var(--zk-soft);
line-height: 1.65;
margin: 0;
}
.zk-blog-card__date {
font-family: var(--zk-font-body);
font-size: 0.78rem;
color: var(--zk-soft);
margin-top: 12px;
}
@media (max-width: 1024px) { .zk-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .zk-blog-grid { grid-template-columns: 1fr; } }
.zk-linkedin-hint {
font-family: var(--zk-font-body);
font-size: 0.95rem;
color: var(--zk-soft);
margin: 0;
}
.zk-linkedin-hint a {
color: var(--zk-green-700);
font-weight: 600;
text-decoration: none;
}
.zk-linkedin-hint a:hover { text-decoration: underline; }
/* =====================================================================
Kontakt
===================================================================== */
.zk-contact-list {
list-style: none;
margin: 24px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.zk-contact-list li {
display: flex;
align-items: center;
gap: 16px;
font-family: var(--zk-font-body);
font-size: 0.95rem;
color: var(--zk-text);
}
.zk-contact-list__icon {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 4px;
background: var(--zk-green-50);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.2rem;
color: var(--zk-green-700);
}
.zk-contact-list a {
color: var(--zk-green-700);
font-weight: 600;
text-decoration: none;
}
.zk-contact-list a:hover { text-decoration: underline; }
.zk-contact-list small {
display: block;
font-size: 0.75rem;
color: var(--zk-soft);
font-weight: 400;
margin-top: 2px;
}
.zk-contact-form {
background: var(--zk-paper-2);
border: 1px solid var(--zk-line);
border-radius: 4px;
padding: 36px 32px;
}
.zk-contact-form__title {
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.4rem;
color: var(--zk-ink);
margin: 0 0 16px;
}
.zk-contact-form__note {
font-family: var(--zk-font-body);
font-size: 0.95rem;
color: var(--zk-muted);
line-height: 1.7;
margin: 0 0 12px;
}
.zk-contact-form__note a {
color: var(--zk-green-700);
font-weight: 600;
text-decoration: none;
}
.zk-contact-form__note a:hover { text-decoration: underline; }
/* Kontaktformular-Felder (v1.21.0 mu-plugin · Theme v1.18.0) */
.zk-contact-form__form {
margin-top: 22px;
}
.zk-contact-form__fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.zk-contact-form__field--wide,
.zk-contact-form__consent {
grid-column: 1 / -1;
}
.zk-contact-form__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.zk-contact-form__label {
font-family: var(--zk-font-body);
font-size: 0.85rem;
font-weight: 600;
color: var(--zk-text);
letter-spacing: 0.01em;
}
.zk-contact-form__label em {
color: var(--zk-lime-dark);
font-style: normal;
}
.zk-contact-form__field input,
.zk-contact-form__field textarea {
font-family: var(--zk-font-body);
font-size: 1rem;
color: var(--zk-ink);
background: #ffffff;
border: 1.5px solid var(--zk-line);
border-radius: 8px;
padding: 12px 14px;
transition: border-color 0.15s ease, background 0.15s ease;
width: 100%;
box-sizing: border-box;
}
.zk-contact-form__field input:focus,
.zk-contact-form__field textarea:focus {
outline: none;
border-color: var(--zk-green-500);
}
.zk-contact-form__field textarea {
resize: vertical;
min-height: 110px;
}
.zk-contact-form__consent {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 4px;
font-family: var(--zk-font-body);
font-size: 0.9rem;
color: var(--zk-muted);
line-height: 1.55;
cursor: pointer;
}
.zk-contact-form__consent input {
margin-top: 3px;
accent-color: var(--zk-green-500);
}
.zk-contact-form__consent a {
color: var(--zk-green-700);
text-decoration: underline;
}
.zk-contact-form__consent em { color: var(--zk-lime-dark); font-style: normal; }
.zk-contact-form__honeypot {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
.zk-contact-form__submit {
margin-top: 22px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
font-family: var(--zk-font-body);
font-size: 1rem;
font-weight: 700;
color: #ffffff;
/* v1.24.0: ZUKE-Grün mit weißer Schrift wie alle Buttons (vorher #4CAF50). */
background: var(--zk-lime);
border: none;
border-radius: 4px;
cursor: pointer;
transition: transform 0.15s ease, background 0.15s ease;
}
.zk-contact-form__submit:hover {
transform: translateY(-2px);
background: var(--zk-lime-dark);
}
.zk-contact-form__submit:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.zk-contact-form__submit-arrow {
transition: transform 0.15s ease;
font-weight: 700;
}
.zk-contact-form__submit:hover .zk-contact-form__submit-arrow {
transform: translateX(3px);
}
.zk-contact-form__status {
margin: 14px 0 0;
font-family: var(--zk-font-body);
font-size: 0.92rem;
color: var(--zk-muted);
min-height: 1.4em;
}
.zk-contact-form__success {
text-align: center;
padding: 18px 8px 8px;
}
.zk-contact-form__success-icon {
width: 60px;
height: 60px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.9rem;
font-weight: 700;
color: #ffffff;
background: var(--zk-green-500);
border-radius: 50%;
}
.zk-contact-form__success-title {
font-family: var(--zk-font-display);
font-size: 1.4rem;
font-weight: 600;
color: var(--zk-ink);
margin: 0 0 10px;
}
.zk-contact-form__success-text {
font-family: var(--zk-font-body);
font-size: 0.98rem;
color: var(--zk-muted);
line-height: 1.6;
margin: 0;
}
/* v1.20.0: Variante „Botschafter:in werden" (mu-plugin v1.23.0) im dunklen
Final-CTA auf /klinik/ — helle Karte, mittig, ohne eigenen Titel. Der
Container zentriert seinen Text, das Formular bleibt linksbündig.
v1.23.0: ebenso der Antrag auf Nachhaltigkeitspartnerschaft (mu-plugin
v1.25.0) auf /nachhaltigkeitspartnerschaft/. */
.zk-contact-form--botschafter,
.zk-contact-form--partnerschaft {
max-width: 760px;
margin: 32px auto 0;
text-align: left;
}
.zk-contact-form--botschafter .zk-contact-form__form,
.zk-contact-form--partnerschaft .zk-contact-form__form {
margin-top: 0;
}
@media (max-width: 600px) {
.zk-contact-form__fields { grid-template-columns: 1fr; }
}
/* =====================================================================
Legal Prose (Impressum / Datenschutz)
===================================================================== */
.zk-legal-prose {
max-width: 760px;
font-family: var(--zk-font-body);
font-size: 1rem;
line-height: 1.7;
color: var(--zk-text);
}
.zk-legal-prose h2 {
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.5rem;
color: var(--zk-ink);
margin: 32px 0 12px;
}
.zk-legal-prose h2:first-child { margin-top: 0; }
.zk-legal-prose h3 {
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.15rem;
color: var(--zk-green-800);
margin: 24px 0 8px;
}
.zk-legal-prose p { margin: 0 0 14px; color: var(--zk-muted); }
.zk-legal-prose a { color: var(--zk-green-700); text-decoration: underline; }
/* =====================================================================
Avada-spezifische Korrekturen — Buttons
===================================================================== */
.fusion-button.button-large {
font-family: var(--zk-font-body) !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
}
/* WP-Pseudo-Element Slot-Capture (.row::before/after) bei Grid-Containern */
.zk-pillars-grid .row::before,
.zk-pillars-grid .row::after,
.zk-feature-grid .row::before,
.zk-feature-grid .row::after,
.zk-steps-grid .row::before,
.zk-steps-grid .row::after { display: none !important; }
/* Avada Responsive Typography Override für Hero + Section Heads */
h1.zk-page-hero__title.zk-page-hero__title,
h1.zk-hero__title.zk-hero__title {
font-size: clamp(2.4rem, 5.5vw, 4rem) !important;
line-height: 1.05 !important;
}
/* Pre-empt wpautop wrapping in fusion_text */
.zk-page-hero p:empty,
.zk-hero p:empty { display: none; }
/* Avada padding overrides für Builder-Spalten */
.zk-pillars-grid .fusion-layout-column .fusion-column-wrapper,
.zk-feature-grid .fusion-layout-column .fusion-column-wrapper,
.zk-steps-grid .fusion-layout-column .fusion-column-wrapper { padding: 0 !important; }
/* =====================================================================
Footer (basic)
===================================================================== */
.fusion-footer-widget-area {
background: var(--zk-green-900) !important;
color: rgba(255,255,255,0.7) !important;
}
.fusion-footer-copyright-area {
background: #0a1f0a !important;
color: rgba(255,255,255,0.6) !important;
padding: 24px 0 !important;
}
.fusion-footer a { color: var(--zk-lime-bright) !important; }
/* Branded Copyright — wird via Avada-Theme-Option `footer_copyright_content`
gesetzt (zuke_main_apply_avada_brand_options) und ersetzt damit die Default-
Attribution "Avada Website Builder by Avada | Powered by WordPress". */
.fusion-footer-copyright-area .zk-footer-brand,
.fusion-footer-copyright-area p.zk-footer-brand {
font-family: var(--zk-font-body) !important;
font-size: 0.85rem !important;
color: rgba(255,255,255,0.6) !important;
text-align: center !important;
letter-spacing: 0.04em !important;
margin: 0 !important;
}
.fusion-footer-copyright-area .zk-footer-brand a { color: var(--zk-lime-bright) !important; text-decoration: none !important; }
.fusion-footer-copyright-area .zk-footer-brand a:hover { text-decoration: underline !important; }
.fusion-footer-copyright-area .zk-footer-brand__sep { color: rgba(255,255,255,0.3); margin: 0 10px; }
/* =====================================================================
Pillar/Feature/Step Cards — robust gegen Avadas Wrapper-Struktur.
`class="zk-pillar-card"` wird von Avada auf die Outer-Column gesetzt;
die visuelle Card-Kachel ist aber `.content-box-percentage` / `.fusion-content-box`
tiefer im DOM. Daher zusätzliche Selektoren. Greift NUR via .zk-pillars-grid
etc. — keine Lecks in andere Avada-Sites.
===================================================================== */
.zk-pillars-grid .content-box-column,
.zk-feature-grid .content-box-column,
.zk-steps-grid .content-box-column {
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
}
.zk-pillars-grid .content-box-column .content-box-percentage,
.zk-pillars-grid .fusion-content-box,
.zk-feature-grid .content-box-column .content-box-percentage,
.zk-feature-grid .fusion-content-box,
.zk-steps-grid .content-box-column .content-box-percentage,
.zk-steps-grid .fusion-content-box {
background: #ffffff !important;
border: 1px solid var(--zk-line) !important;
border-radius: 4px !important;
padding: 32px 28px !important;
height: 100%;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
.zk-pillars-grid .content-box-column .content-box-percentage:hover,
.zk-pillars-grid .fusion-content-box:hover,
.zk-feature-grid .content-box-column .content-box-percentage:hover,
.zk-feature-grid .fusion-content-box:hover,
.zk-steps-grid .content-box-column .content-box-percentage:hover,
.zk-steps-grid .fusion-content-box:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(15,43,15,0.08);
border-color: var(--zk-green-200);
}
.zk-pillars-grid .heading h2,
.zk-pillars-grid .heading h3,
.zk-feature-grid .heading h2,
.zk-feature-grid .heading h3,
.zk-steps-grid .heading h2,
.zk-steps-grid .heading h3 {
font-family: var(--zk-font-display) !important;
font-weight: 600 !important;
font-size: 1.2rem !important;
color: var(--zk-ink) !important;
margin: 0 0 12px !important;
line-height: 1.25 !important;
}
.zk-pillars-grid .content-container,
.zk-feature-grid .content-container,
.zk-steps-grid .content-container {
font-family: var(--zk-font-body) !important;
font-size: 0.95rem !important;
color: var(--zk-muted) !important;
line-height: 1.65 !important;
}
/* Invert-Variante (Ökosystem dunkel) */
.zk-pillars-grid--invert .content-box-column .content-box-percentage,
.zk-pillars-grid--invert .fusion-content-box {
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
}
.zk-pillars-grid--invert .content-box-column .content-box-percentage:hover,
.zk-pillars-grid--invert .fusion-content-box:hover {
background: rgba(255,255,255,0.09) !important;
border-color: rgba(198,255,0,0.25) !important;
transform: translateY(-4px);
}
.zk-pillars-grid--invert .heading h2,
.zk-pillars-grid--invert .heading h3 { color: var(--zk-lime-bright) !important; }
.zk-pillars-grid--invert .content-container { color: rgba(255,255,255,0.78) !important; }
/* =====================================================================
Testimonials — robust gegen Avadas Slider-Default
Avada rendert design="clean" als Container mit `.fusion-clean-testimonials`
und einer Liste `.reviews > .review`. Manche Builds wickeln den
gesamten Block in einen Slider mit `.flexslider`/`.slides` — dann ist
nur ein Item sichtbar. Wir zwingen Grid + zeigen alle Items.
===================================================================== */
.zk-testimonials,
.zk-testimonials .fusion-testimonials,
.zk-testimonials .reviews {
background: transparent !important;
box-shadow: none !important;
}
.zk-testimonials .flexslider,
.zk-testimonials .flex-viewport {
background: transparent !important;
border: 0 !important;
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
.zk-testimonials .slides {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 24px !important;
transform: none !important;
width: 100% !important;
margin: 24px 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
.zk-testimonials .slides > li,
.zk-testimonials .slides > .review,
.zk-testimonials > .review,
.zk-testimonials .reviews > .review {
display: block !important;
width: auto !important;
float: none !important;
background: #ffffff !important;
border: 1px solid var(--zk-line) !important;
border-radius: 4px !important;
padding: 36px 30px 28px !important;
margin: 0 !important;
position: relative !important;
opacity: 1 !important;
transform: none !important;
}
.zk-testimonials .slides > li::before,
.zk-testimonials .slides > .review::before,
.zk-testimonials > .review::before,
.zk-testimonials .reviews > .review::before {
content: '„';
font-family: var(--zk-font-display);
font-weight: 700;
font-size: 3.4rem;
color: var(--zk-green-200);
position: absolute;
top: 6px;
left: 18px;
line-height: 1;
}
.zk-testimonials .review-content,
.zk-testimonials .testimonial-content,
.zk-testimonials .review p,
.zk-testimonials blockquote,
.zk-testimonials q {
font-family: var(--zk-font-body) !important;
font-size: 0.98rem !important;
line-height: 1.7 !important;
color: var(--zk-text) !important;
font-style: italic !important;
margin: 0 0 14px !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
quotes: none !important;
}
.zk-testimonials .review-content::before,
.zk-testimonials .review-content::after { content: '' !important; }
.zk-testimonials .author,
.zk-testimonials .review-name,
.zk-testimonials cite {
display: block !important;
font-family: var(--zk-font-body) !important;
font-weight: 600 !important;
font-size: 0.92rem !important;
font-style: normal !important;
color: var(--zk-green-800) !important;
margin-top: 12px !important;
}
.zk-testimonials .company,
.zk-testimonials .review-company {
display: block !important;
font-family: var(--zk-font-body) !important;
font-weight: 400 !important;
font-size: 0.85rem !important;
color: var(--zk-soft) !important;
font-style: normal !important;
}
.zk-testimonials .flex-direction-nav,
.zk-testimonials .flex-control-nav,
.zk-testimonials .fusion-testimonials-nav {
display: none !important;
}
/* v1.21.1: Fusion Builder 3.14 rendert das Zitat als
blockquote > .awb-quote > .awb-quote-content und gibt .awb-quote den
Element-Hintergrund (--awb-color2, dunkelblau), 2 px Laufweite,
Zentrierung und eine Sprechblasen-Spitze — dunkle Schrift auf Blau.
Außerdem setzt fusion-testimonials.js beim Durchwechseln eine feste
Höhe auf .reviews (Höhe der aktiven Karte); im Raster ragte die zweite
Reihe dann in die nächste Section (CTA lag über der letzten Karte). */
.zk-testimonials .reviews {
height: auto !important;
min-height: 0 !important;
}
.zk-testimonials .awb-quote,
.zk-testimonials .awb-quote-content {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
color: var(--zk-text) !important;
font-family: var(--zk-font-body) !important;
font-size: 0.98rem !important;
line-height: 1.7 !important;
font-style: italic !important;
letter-spacing: normal !important;
text-align: left !important;
}
/* Platz unter dem großen „ der Karte (.review::before), sonst liegt es auf dem ersten Buchstaben. */
.zk-testimonials .awb-quote { padding-top: 24px !important; }
.zk-testimonials .awb-quote::before,
.zk-testimonials .awb-quote::after,
.zk-testimonials blockquote::before,
.zk-testimonials blockquote::after {
content: none !important;
display: none !important;
}
.zk-testimonials .author,
.zk-testimonials .company-name,
.zk-testimonials .company-name * {
font-family: var(--zk-font-body) !important;
letter-spacing: normal !important;
text-align: left !important;
}
.zk-testimonials .company-name strong { font-weight: 600 !important; color: var(--zk-green-800) !important; }
.zk-testimonials .company-name > span { font-weight: 400 !important; font-size: 0.85rem !important; color: var(--zk-soft) !important; }
@media (max-width: 768px) {
.zk-testimonials .slides,
.zk-testimonials .reviews { grid-template-columns: 1fr !important; }
}
/* =====================================================================
Mobile/Narrow Spacing — bessere Sektion-Rhythmik unter 900px
===================================================================== */
@media (max-width: 900px) {
.zk-section-head { margin-bottom: 36px; }
.zk-page-hero { padding: 36px 0 24px; }
.zk-hero { max-width: 100%; }
.zk-vm-card { padding: 36px 28px; }
.zk-challenge-card { padding: 32px 26px; }
.zk-stat-panel { padding: 32px 24px; }
.zk-featured-partner { padding: 28px 24px; }
.zk-cta-box { padding: 32px 24px; }
.zk-contact-form { padding: 28px 24px; }
}
/* =====================================================================
Stat-Card: subtile Inner-Border-Reduktion (siehe v1.12.2)
sowie etwas mehr Atmungsraum innerhalb der Counter-Boxen.
===================================================================== */
.zk-challenge-card__facts > div { padding: 20px 14px; }
.zk-challenge-card__facts strong { letter-spacing: -0.01em; }
/* Section-Heads bekommen unten konsistent Atmung, wenn direkt ein Grid folgt */
.zk-section-head + .fusion-content-boxes,
.zk-section-head + .zk-blog-grid,
.zk-section-head + .zk-ambassador-grid,
.zk-section-head + .zk-team-grid,
.zk-section-head + .zk-events-list,
.zk-section-head + .zk-partner-grid { margin-top: 8px; }
/* =====================================================================
v1.4.0: Person-Cards (Team + Botschafter:innen) als native
[fusion_content_box]-Renderings.
v1.14.0: Avatar-Initialen werden NICHT mehr im Body gepflegt, sondern
via team-initials.js aus dem heading-Namen abgeleitet und als erster
Child der content-box-percentage eingehängt. Wenn ein Foto via
image="…" am content_box hochgeladen ist, rendert Avada stattdessen
in der heading-Spalte und das JS
überspringt die Initials-Injektion.
Gerendertes Layout (ohne Foto):
Mit Foto (Avada-Output):
…content-box-percentage…
In beiden Fällen ist der Avatar oben (80×80, rund, top:-40px halb
über die Card-Kante geschoben).
===================================================================== */
/* Grid-Layout — display:grid + Spalten + clearfix-fix
(analog .zk-pillars-grid-Pattern) */
.fusion-content-boxes.zk-team-grid,
.fusion-content-boxes.zk-ambassador-grid {
display: grid !important;
/* v1.20.0: Zeilenabstand 64px — der Avatar ragt 40px über die Karte und
lag mit 20px auf der Unterkante der Karte darüber. */
gap: 64px 20px !important;
margin: 0 !important;
}
.fusion-content-boxes.zk-team-grid {
grid-template-columns: repeat(4, 1fr) !important;
}
.fusion-content-boxes.zk-ambassador-grid {
grid-template-columns: repeat(4, 1fr) !important;
}
.fusion-content-boxes.zk-team-grid::before,
.fusion-content-boxes.zk-team-grid::after,
.fusion-content-boxes.zk-ambassador-grid::before,
.fusion-content-boxes.zk-ambassador-grid::after,
.fusion-content-boxes.zk-team-grid > .fusion-clearfix,
.fusion-content-boxes.zk-ambassador-grid > .fusion-clearfix {
display: none !important;
}
.fusion-content-boxes.zk-team-grid > .content-box-column,
.fusion-content-boxes.zk-ambassador-grid > .content-box-column {
width: auto !important;
max-width: none !important;
flex: initial !important;
margin: 0 !important;
float: none !important;
padding: 0 !important;
background: transparent !important;
}
@media (max-width: 1024px) {
.fusion-content-boxes.zk-ambassador-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
.fusion-content-boxes.zk-team-grid { grid-template-columns: repeat(2, 1fr) !important; }
.fusion-content-boxes.zk-ambassador-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
.fusion-content-boxes.zk-team-grid,
.fusion-content-boxes.zk-ambassador-grid { grid-template-columns: 1fr !important; }
}
/* Avatar sticht halb oben aus dem Card heraus → Section-Padding-Top für Luft */
.fusion-content-boxes.zk-team-grid,
.fusion-content-boxes.zk-ambassador-grid {
margin-top: 48px !important;
}
/* Person-Card Inner — Card-Visual mit Border + Padding-Top so dass Name +
Body NICHT vom Avatar überlagert werden (Avatar half above card edge).
v1.20.0: Avada rendert die Innenfläche inzwischen als .content-box-wrapper.
Ohne diesen Selektor blieb es bei Avadas 30px Padding, und der Avatar
(bis 48px in die Karte hinein) lag auf dem Namen. */
.fusion-content-boxes.zk-team-grid > .content-box-column > .fusion-column-wrapper,
.fusion-content-boxes.zk-ambassador-grid > .content-box-column > .fusion-column-wrapper {
padding: 0 !important;
overflow: visible !important;
}
.fusion-content-boxes.zk-team-grid > .content-box-column,
.fusion-content-boxes.zk-ambassador-grid > .content-box-column {
overflow: visible !important;
}
.fusion-content-boxes.zk-team-grid > .content-box-column .content-box-percentage,
.fusion-content-boxes.zk-team-grid > .content-box-column .fusion-content-box,
.fusion-content-boxes.zk-team-grid > .content-box-column .content-wrapper-clean-vertical,
.fusion-content-boxes.zk-team-grid > .content-box-column .content-wrapper,
.fusion-content-boxes.zk-team-grid > .content-box-column .content-box-wrapper,
.fusion-content-boxes.zk-ambassador-grid > .content-box-column .content-box-percentage,
.fusion-content-boxes.zk-ambassador-grid > .content-box-column .fusion-content-box,
.fusion-content-boxes.zk-ambassador-grid > .content-box-column .content-wrapper-clean-vertical,
.fusion-content-boxes.zk-ambassador-grid > .content-box-column .content-wrapper,
.fusion-content-boxes.zk-ambassador-grid > .content-box-column .content-box-wrapper {
position: relative;
padding-top: 56px !important;
padding-right: 20px !important;
padding-bottom: 24px !important;
padding-left: 20px !important;
text-align: center;
background: #ffffff !important;
border: 1px solid var(--zk-line) !important;
border-radius: 4px !important;
height: 100%;
overflow: visible !important;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
/* Defensive: Avadas Inline-Styles auf .content-box-percentage können das
padding-top überschreiben → wir setzen margin-top auf den ersten Child
(.image / .heading), damit der Avatar-Slot in jedem Fall freigeräumt wird. */
.fusion-content-boxes.zk-team-grid .content-box-percentage > *:first-child,
.fusion-content-boxes.zk-ambassador-grid .content-box-percentage > *:first-child,
.fusion-content-boxes.zk-team-grid .content-wrapper-clean-vertical > *:first-child,
.fusion-content-boxes.zk-ambassador-grid .content-wrapper-clean-vertical > *:first-child,
.fusion-content-boxes.zk-team-grid .content-box-wrapper > *:first-child,
.fusion-content-boxes.zk-ambassador-grid .content-box-wrapper > *:first-child {
margin-top: 0 !important;
}
.fusion-content-boxes.zk-team-grid .heading,
.fusion-content-boxes.zk-ambassador-grid .heading,
.fusion-content-boxes.zk-team-grid .image + .heading,
.fusion-content-boxes.zk-ambassador-grid .image + .heading,
.fusion-content-boxes.zk-team-grid .content-box-heading-wrapper,
.fusion-content-boxes.zk-ambassador-grid .content-box-heading-wrapper {
margin-top: 56px !important;
padding-top: 0 !important;
}
/* Wenn ein Bild gerendert wird, ist es .image und steht VOR dem heading
im DOM. Heading bekommt dann reset margin-top und das image-wrapper
hat top:-40px (nicht im Flow). Heading kommt natürlich nach unten. */
.fusion-content-boxes.zk-team-grid .image-wrapper + .heading,
.fusion-content-boxes.zk-ambassador-grid .image-wrapper + .heading {
margin-top: 56px !important;
}
/* Initials-Avatar: 50% oberhalb der Card-Kante, 50% innerhalb (klassisches
pop-up-Avatar-Pattern). 80px Höhe → top:-40px = halb drüber. */
.zk-person-card .zk-person-card__initials,
.fusion-content-boxes.zk-team-grid .zk-person-card__initials,
.fusion-content-boxes.zk-ambassador-grid .zk-person-card__initials {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.4rem;
color: #ffffff;
letter-spacing: 0.02em;
background: var(--zk-green-700);
z-index: 2;
margin: 0 !important;
padding: 0 !important;
border: 4px solid #ffffff;
box-sizing: content-box;
}
/* Avada-image-Container für hochgeladenes Bild — selbe Position wie
Initials-Span, ersetzt diesen visuell wenn vorhanden. */
.fusion-content-boxes.zk-team-grid .image-wrapper,
.fusion-content-boxes.zk-ambassador-grid .image-wrapper,
.fusion-content-boxes.zk-team-grid .image,
.fusion-content-boxes.zk-ambassador-grid .image {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
z-index: 3;
background: #ffffff;
border: 4px solid #ffffff !important;
box-sizing: content-box;
box-shadow: 0 2px 8px rgba(15,43,15,0.12);
}
.fusion-content-boxes.zk-team-grid .image-wrapper img,
.fusion-content-boxes.zk-ambassador-grid .image-wrapper img,
.fusion-content-boxes.zk-team-grid .image img,
.fusion-content-boxes.zk-ambassador-grid .image img {
width: 80px !important;
height: 80px !important;
object-fit: cover !important;
border-radius: 50% !important;
display: block !important;
margin: 0 !important;
max-width: none !important;
}
/* Wenn Bild gerendert ist, Initials-Span verstecken (modernes :has()) */
.zk-person-card:has(.image-wrapper img) .zk-person-card__initials,
.zk-person-card:has(.image img) .zk-person-card__initials {
display: none !important;
}
/* Team-Varianten — distinkte Gradients (nur wenn KEIN Bild da). Größe und
top-Position kommen aus dem Default-Block oben (80px / -40px). */
.zk-person-card--a .zk-person-card__initials { background: linear-gradient(135deg, var(--zk-green-600), var(--zk-green-800)); }
.zk-person-card--b .zk-person-card__initials { background: linear-gradient(135deg, var(--zk-lime-dark), var(--zk-green-700)); }
.zk-person-card--c .zk-person-card__initials { background: linear-gradient(135deg, var(--zk-green-700), var(--zk-green-900)); }
.zk-person-card--d .zk-person-card__initials { background: linear-gradient(135deg, var(--zk-green-800), var(--zk-green-900)); }
/* Ambassador-Variante: alternierende Avatar-Farben */
.fusion-content-boxes.zk-ambassador-grid > .content-box-column:nth-child(3n+2) .zk-person-card__initials { background: var(--zk-green-800); }
.fusion-content-boxes.zk-ambassador-grid > .content-box-column:nth-child(3n) .zk-person-card__initials { background: var(--zk-lime-dark); }
/* Heading (Name) — Styling */
.fusion-content-boxes.zk-team-grid .heading,
.fusion-content-boxes.zk-ambassador-grid .heading {
margin: 0 0 6px !important;
}
.fusion-content-boxes.zk-team-grid .heading h2,
.fusion-content-boxes.zk-team-grid .heading h3,
.fusion-content-boxes.zk-team-grid .content-box-heading,
.fusion-content-boxes.zk-ambassador-grid .heading h2,
.fusion-content-boxes.zk-ambassador-grid .heading h3,
.fusion-content-boxes.zk-ambassador-grid .content-box-heading {
font-family: var(--zk-font-display) !important;
font-weight: 600 !important;
font-size: 1.05rem !important;
color: var(--zk-green-900) !important;
margin: 0 0 6px !important;
line-height: 1.25 !important;
text-align: center !important;
}
.fusion-content-boxes.zk-team-grid .heading h2,
.fusion-content-boxes.zk-team-grid .heading h3,
.fusion-content-boxes.zk-team-grid .content-box-heading {
font-size: 1.1rem !important;
}
/* Content-Container (Initials-Span + Role/Org-Text) */
.fusion-content-boxes.zk-team-grid .content-container,
.fusion-content-boxes.zk-ambassador-grid .content-container {
font-family: var(--zk-font-body) !important;
font-size: 0.84rem !important;
color: var(--zk-soft) !important;
line-height: 1.5 !important;
text-align: center;
}
.fusion-content-boxes.zk-team-grid .content-container p,
.fusion-content-boxes.zk-ambassador-grid .content-container p {
margin: 0 0 2px !important;
}
.fusion-content-boxes.zk-team-grid .content-container p:last-child,
.fusion-content-boxes.zk-ambassador-grid .content-container p:last-child {
margin-bottom: 0 !important;
}
/* v1.20.0: Bestandskarten tragen den Initialen-Span noch im Body, gefolgt
von einem
. Der Span ist absolut positioniert, der Umbruch erzeugte
eine Leerzeile zwischen Name und Klinik. */
.fusion-content-boxes.zk-team-grid .content-container > .zk-person-card__initials + br,
.fusion-content-boxes.zk-ambassador-grid .content-container > .zk-person-card__initials + br {
display: none;
}
/* Hover-Lift für Person-Cards */
.fusion-content-boxes.zk-team-grid > .content-box-column .content-box-percentage:hover,
.fusion-content-boxes.zk-team-grid > .content-box-column .fusion-content-box:hover,
.fusion-content-boxes.zk-team-grid > .content-box-column .content-box-wrapper:hover,
.fusion-content-boxes.zk-ambassador-grid > .content-box-column .content-box-percentage:hover,
.fusion-content-boxes.zk-ambassador-grid > .content-box-column .fusion-content-box:hover,
.fusion-content-boxes.zk-ambassador-grid > .content-box-column .content-box-wrapper:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(15,43,15,0.08);
border-color: var(--zk-green-200) !important;
}
/* =====================================================================
v1.25.0 — Botschafter:innen-Grid aus dem eigenen Admin-Reiter
(mu-plugin zuke-botschafter, Shortcode [zuke_botschafter_grid]).
Löst auf /community/ die Content-Boxen (.zk-ambassador-grid oben) ab
und sieht genauso aus — Maße am 10.10.2026 von der Stage gemessen:
Avatar 80px + 4px weißer Rand, halb über der Kartenkante, Initialen
oder Foto, Farbwechsel im 3er-Takt. Die 44px unten = 24px Padding +
20px, die Avada unter dem Content-Box-Text lässt.
Avadas `.post-content h3` / `.post-content p` (0,1,1) laden nach
diesem Stylesheet → Text-Selektoren hier mit zwei Klassen (0,2,0).
-
AE (oder --foto mit
![]()
)
Name
Klinik
Funktion
===================================================================== */
.zk-botschafter-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 64px 20px;
width: 100%;
margin: 48px 0 0;
padding: 0;
list-style: none;
}
.zk-botschafter-grid .zk-botschafter-card {
position: relative;
margin: 0;
padding: 56px 20px 44px;
text-align: center;
background: #ffffff;
border: 1px solid var(--zk-line);
border-radius: 4px;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.zk-botschafter-grid .zk-botschafter-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(15,43,15,0.08);
border-color: var(--zk-green-200);
}
.zk-botschafter-grid .zk-botschafter-card__avatar {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
box-sizing: content-box;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 4px solid #ffffff;
border-radius: 50%;
background: var(--zk-green-700);
color: #ffffff;
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.4rem;
line-height: 1.5;
letter-spacing: 0.02em;
}
.zk-botschafter-grid .zk-botschafter-card:nth-child(3n+2) .zk-botschafter-card__avatar { background: var(--zk-green-800); }
.zk-botschafter-grid .zk-botschafter-card:nth-child(3n) .zk-botschafter-card__avatar { background: var(--zk-lime-dark); }
/* Doppelte Klasse: muss gegen die :nth-child-Farben oben gewinnen. */
.zk-botschafter-grid .zk-botschafter-card .zk-botschafter-card__avatar.zk-botschafter-card__avatar--foto {
background: #ffffff;
box-shadow: 0 2px 8px rgba(15,43,15,0.12);
}
.zk-botschafter-grid .zk-botschafter-card__avatar img {
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
object-fit: cover;
border-radius: 50%;
}
.zk-botschafter-grid .zk-botschafter-card__name {
margin: 0 0 12px;
font-family: var(--zk-font-display);
font-weight: 600;
font-style: normal;
font-size: 1.05rem;
line-height: 1.25;
letter-spacing: normal;
text-transform: none;
color: var(--zk-green-900);
}
.zk-botschafter-grid .zk-botschafter-card__einrichtung,
.zk-botschafter-grid .zk-botschafter-card__funktion {
margin: 0;
font-family: var(--zk-font-body);
font-size: 0.84rem;
line-height: 1.5;
color: var(--zk-soft);
}
.zk-botschafter-empty {
margin-top: 32px;
text-align: center;
color: var(--zk-soft);
}
@media (max-width: 1024px) { .zk-botschafter-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .zk-botschafter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .zk-botschafter-grid { grid-template-columns: 1fr; } }
/* =====================================================================
v1.6.0 — Globaler Footer (Avada Library Element "ZUKE Footer")
Vier Spalten via native Avada-Spalten (2_5 + 1_5 × 3).
Layout liefert Avadas Row — wir stylen nur Inhalte + Container-BG.
===================================================================== */
.zk-footer {
background: #0a2010;
color: rgba(255, 255, 255, 0.78);
font-family: var(--zk-font-body);
font-size: 0.95rem;
line-height: 1.7;
}
.zk-footer .fusion-text,
.zk-footer .fusion-text p,
.zk-footer p {
color: rgba(255, 255, 255, 0.78);
}
.zk-footer a {
color: rgba(255, 255, 255, 0.78);
text-decoration: none;
transition: color 0.2s, border-color 0.2s;
}
.zk-footer a:hover {
color: var(--zk-lime-bright);
}
/* v1.11.0: hundred_percent="no" auf den Footer-Containern — Avada wickelt
den Content automatisch in `.fusion-row` mit globaler site_width (matched
Header-Logo-/Kontakt-Kante). Kein manueller max-width-Override mehr nötig. */
/* Brand-Block (Spalte 2_5) ----------------------------------------- */
.zk-footer__brand {
max-width: 360px;
}
.zk-footer__brand-overline {
font-family: var(--zk-font-body);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--zk-lime);
margin-bottom: 14px;
display: block;
}
.zk-footer__brand-title {
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.55rem;
line-height: 1.18;
color: #ffffff;
margin: 0 0 14px;
letter-spacing: 0.005em;
}
.zk-footer .zk-footer__brand-title { color: #ffffff; }
.zk-footer__brand-tagline {
margin: 0 0 24px;
color: rgba(255, 255, 255, 0.65);
font-size: 0.95rem;
line-height: 1.65;
}
.zk-footer .fusion-text .zk-footer__brand-tagline {
color: rgba(255, 255, 255, 0.65);
}
/* Social-Icons */
.zk-footer__social {
display: flex;
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
}
.zk-footer__social-link {
display: inline-flex;
width: 38px;
height: 38px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(198, 255, 0, 0.18);
font-family: var(--zk-font-body);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.85) !important;
text-decoration: none !important;
transition: background 0.2s, border-color 0.2s, color 0.2s;
line-height: 1;
}
.zk-footer__social-link i {
font-size: 0.95rem;
line-height: 1;
display: inline-block;
}
.zk-footer__social-link:hover {
background: var(--zk-lime);
border-color: var(--zk-lime);
color: var(--zk-ink) !important;
}
.zk-footer__social-link:hover i {
color: var(--zk-ink);
}
/* Nav-Spalten ----------------------------------------------------- */
.zk-footer__col-title {
font-family: var(--zk-font-body);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--zk-lime);
margin: 0 0 18px;
}
.zk-footer .zk-footer__col-title { color: var(--zk-lime); }
.zk-footer__nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.zk-footer__nav a {
font-size: 0.95rem;
border-bottom: 1px solid transparent;
padding-bottom: 1px;
}
.zk-footer__nav a:hover {
color: var(--zk-lime-bright);
border-bottom-color: rgba(198, 255, 0, 0.4);
}
/* Newsletter ------------------------------------------------------ */
.zk-footer__newsletter-title {
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.25rem;
line-height: 1.2;
color: #ffffff;
margin: 0 0 12px;
}
.zk-footer .zk-footer__newsletter-title { color: #ffffff; }
.zk-footer__newsletter-text {
margin: 0 0 18px;
color: rgba(255, 255, 255, 0.65);
font-size: 0.92rem;
line-height: 1.6;
}
.zk-footer .fusion-text .zk-footer__newsletter-text {
color: rgba(255, 255, 255, 0.65);
}
/* v1.12.0: Inline-Form raus, CTA-Button rein. Klick triggert Rapidmail-Popup
(js/newsletter-popup.js → injiziert popup.js dynamisch). */
.zk-footer__newsletter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: var(--zk-lime);
color: #ffffff; /* v1.24.0: weiße Schrift wie alle Buttons */
border: none;
font-family: var(--zk-font-body);
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 14px 22px;
border-radius: 3px;
cursor: pointer;
transition: background 0.2s, color 0.2s, transform 0.15s;
margin: 0 0 14px;
text-decoration: none;
line-height: 1.2;
}
.zk-footer__newsletter-btn:hover,
.zk-footer__newsletter-btn:focus {
background: var(--zk-lime-dark);
color: #ffffff;
outline: none;
transform: translateY(-1px);
}
.zk-footer__newsletter-btn:focus-visible {
box-shadow: 0 0 0 3px rgba(198, 255, 0, 0.4);
}
.zk-footer__newsletter-btn:active {
transform: translateY(0);
}
.zk-footer__newsletter-fineprint {
margin: 0;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.45);
line-height: 1.55;
}
.zk-footer .fusion-text .zk-footer__newsletter-fineprint {
color: rgba(255, 255, 255, 0.45);
}
.zk-footer__newsletter-fineprint a {
color: rgba(255, 255, 255, 0.7);
border-bottom: 1px solid rgba(198, 255, 0, 0.25);
}
/* Bottom-Bar ------------------------------------------------------ */
.zk-footer--bottom {
border-top: 1px solid rgba(198, 255, 0, 0.08);
}
.zk-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.55);
}
.zk-footer .fusion-text .zk-footer__copyright,
.zk-footer__copyright {
margin: 0;
color: rgba(255, 255, 255, 0.55);
font-size: 0.82rem;
}
.zk-footer__legal {
display: flex;
flex-wrap: wrap;
gap: 6px 22px;
list-style: none;
padding: 0;
margin: 0;
}
.zk-footer__legal a {
color: rgba(255, 255, 255, 0.7);
font-size: 0.82rem;
}
/* wpautop-Schutz: keine leeren ausgeben */
.zk-footer p:empty,
.zk-footer__brand > p:empty,
.zk-footer__newsletter > p:empty,
.zk-footer__bottom > p:empty {
display: none;
}
/* Responsive — Spalten collapsen schon via type_medium/type_small im
Shortcode (1_2 / 1_1). Hier nur Feintuning der Inhalte. */
@media (max-width: 800px) {
.zk-footer--top {
padding-top: 56px !important;
padding-bottom: 32px !important;
}
.zk-footer__brand {
max-width: none;
}
.zk-footer__brand-title {
font-size: 1.4rem;
}
}
@media (max-width: 600px) {
.zk-footer__bottom {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.zk-footer__newsletter-btn {
width: 100%;
padding: 14px 18px;
font-size: 0.78rem;
}
}
/* =====================================================================
v1.8.0 — Partner CPT Grid + Modal
Klick auf eine Karte öffnet das Modal mit Logo, Beschreibung und CTA.
Markup kommt aus [zuke_partner_grid] (mu-plugin v1.8.0).
===================================================================== */
.zk-partner-collection {
position: relative;
}
.zk-partner-grid-v2 {
list-style: none;
margin: 32px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
.zk-partner-card {
margin: 0;
}
.zk-partner-card__trigger {
appearance: none;
background: #ffffff;
border: 1px solid var(--zk-line);
border-radius: 4px;
padding: 20px 14px 16px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
cursor: pointer;
font: inherit;
color: inherit;
text-align: center;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.zk-partner-card__trigger:hover {
border-color: var(--zk-green-300);
box-shadow: 0 6px 16px rgba(15,43,15,0.08);
transform: translateY(-1px);
}
.zk-partner-card__trigger:focus-visible {
outline: 2px solid var(--zk-lime);
outline-offset: 2px;
border-color: var(--zk-green-300);
}
.zk-partner-card__logo {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 80px;
}
.zk-partner-card__logo-img {
max-width: 100%;
max-height: 70px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
/* v1.21.0: Logos optisch angeglichen. Die Breite kommt aus dem
Seitenverhältnis (mu-plugin v1.24.0, zuke_main_partner_logo_width), damit
breite Wortmarken nicht winzig und quadratische Logos nicht riesig wirken.
max-width hält jedes Logo in seiner Karte. */
.zk-partner-card__logo-img--sized {
width: var(--zk-logo-w);
max-height: none;
}
.zk-partner-card__logo-fallback {
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 0.9rem;
color: var(--zk-soft);
letter-spacing: 0.04em;
}
.zk-partner-card__more {
font-family: var(--zk-font-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--zk-green-700);
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
transition: color 0.18s ease;
}
.zk-partner-card__trigger:hover .zk-partner-card__more,
.zk-partner-card__trigger:focus-visible .zk-partner-card__more {
color: var(--zk-green-800);
}
@media (max-width: 1024px) { .zk-partner-grid-v2 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .zk-partner-grid-v2 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .zk-partner-grid-v2 { grid-template-columns: repeat(2, 1fr); } }
/* Modal */
.zk-partner-modal {
position: fixed;
inset: 0;
z-index: 100000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.zk-partner-modal.is-open {
display: flex;
}
.zk-partner-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 32, 16, 0.78);
backdrop-filter: blur(4px);
animation: zk-partner-fade 0.22s ease both;
}
.zk-partner-modal__dialog {
position: relative;
background: #ffffff;
border-radius: 6px;
width: 100%;
max-width: 640px;
max-height: calc(100vh - 48px);
overflow-y: auto;
padding: 56px 48px 48px;
box-shadow: 0 28px 80px rgba(0,0,0,0.32);
animation: zk-partner-pop 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
outline: none;
}
.zk-partner-modal__close {
position: absolute;
top: 12px;
right: 12px;
width: 38px;
height: 38px;
border-radius: 50%;
background: transparent;
border: 1px solid var(--zk-line);
color: var(--zk-text);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.zk-partner-modal__close:hover,
.zk-partner-modal__close:focus-visible {
background: var(--zk-paper);
border-color: var(--zk-green-300);
color: var(--zk-green-700);
outline: none;
}
.zk-partner-modal__content {
display: flex;
flex-direction: column;
}
.zk-partner-modal__logo {
margin: 0 0 24px;
display: flex;
justify-content: center;
align-items: center;
min-height: 90px;
}
.zk-partner-modal__logo-img {
max-height: 120px;
max-width: 280px;
width: auto;
height: auto;
object-fit: contain;
}
.zk-partner-modal__logo-fallback {
font-family: var(--zk-font-display);
font-weight: 700;
font-size: 1.8rem;
color: var(--zk-green-700);
letter-spacing: 0.03em;
text-align: center;
}
.zk-partner-modal__title {
font-family: var(--zk-font-display);
font-weight: 600;
font-size: 1.6rem;
color: var(--zk-ink);
margin: 0 0 18px;
text-align: center;
letter-spacing: 0.01em;
}
.zk-partner-modal__body {
font-family: var(--zk-font-body);
font-size: 0.95rem;
line-height: 1.7;
color: var(--zk-text);
margin-bottom: 28px;
}
.zk-partner-modal__body p { margin: 0 0 12px; }
.zk-partner-modal__body p:last-child { margin-bottom: 0; }
.zk-partner-modal__body a {
color: var(--zk-green-700);
text-decoration: underline;
}
.zk-partner-modal__body ul,
.zk-partner-modal__body ol { margin: 0 0 12px 20px; padding: 0; }
/* v1.24.0: weiße Schrift wie alle Buttons */
.zk-partner-modal__cta {
align-self: center;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--zk-lime);
color: #ffffff !important;
font-family: var(--zk-font-body);
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
padding: 14px 28px;
border-radius: 4px;
letter-spacing: 0.02em;
transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.zk-partner-modal__cta:hover,
.zk-partner-modal__cta:focus-visible {
background: var(--zk-lime-dark);
color: #ffffff !important;
outline: none;
transform: translateY(-1px);
}
/* v1.23.0: Partner mit Lösung im Navigator (mu-plugin v1.25.0) — Button zur
Lösungsseite, die Webseite als Textlink daneben. */
.zk-partner-modal__actions {
align-self: center;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px 28px;
}
.zk-partner-modal__link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--zk-green-700) !important;
font-family: var(--zk-font-body);
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.02em;
text-decoration: underline;
text-underline-offset: 3px;
}
.zk-partner-modal__link:hover,
.zk-partner-modal__link:focus-visible {
color: var(--zk-ink) !important;
}
body.zk-partner-modal-open {
overflow: hidden;
}
.zk-partner-empty {
font-family: var(--zk-font-body);
color: var(--zk-muted);
text-align: center;
padding: 40px 0;
margin: 32px 0 0;
}
/* SR-only — wir reuse den Avada/WP-Standard, falls vorhanden; fallback hier. */
.zk-partner-collection .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
@media (max-width: 600px) {
.zk-partner-modal {
padding: 12px;
}
.zk-partner-modal__dialog {
padding: 48px 22px 32px;
max-height: calc(100vh - 24px);
}
.zk-partner-modal__title { font-size: 1.3rem; }
.zk-partner-modal__logo-img { max-height: 90px; }
}
@keyframes zk-partner-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes zk-partner-pop {
from { opacity: 0; transform: translateY(12px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.zk-partner-modal__backdrop,
.zk-partner-modal__dialog {
animation: none;
}
.zk-partner-card__trigger:hover {
transform: none;
}
}
/* =====================================================================
v1.15.0 — Partner-Filter-Leiste
Vier Dropdowns + Reset über dem Logo-Grid. Markup kommt aus dem
[zuke_partner_grid]-Shortcode (mu-plugin v1.18.0+). JS dazu:
js/partner-filters.js — client-seitige Filterung über data-Attribute.
===================================================================== */
.zk-partner-filters {
margin: 0 0 24px;
padding: 16px 18px;
background: #f5f8f4;
border: 1px solid var(--zk-line);
border-radius: 6px;
}
.zk-partner-filters__row {
display: grid;
grid-template-columns: repeat(4, 1fr) auto;
gap: 12px 14px;
align-items: end;
}
.zk-partner-filters__field {
display: flex;
flex-direction: column;
gap: 4px;
font-family: var(--zk-font-body);
min-width: 0; /* Verhindert overflow im CSS-Grid */
}
.zk-partner-filters__label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--zk-soft);
}
.zk-partner-filters__select {
appearance: none;
-webkit-appearance: none;
background: #ffffff url("data:image/svg+xml;utf8,") no-repeat right 12px center;
background-size: 10px 7px;
border: 1px solid var(--zk-line);
border-radius: 4px;
padding: 9px 32px 9px 12px;
font: inherit;
color: var(--zk-ink);
width: 100%;
cursor: pointer;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.zk-partner-filters__select:hover {
border-color: var(--zk-green-300);
}
.zk-partner-filters__select:focus-visible {
outline: 2px solid var(--zk-lime);
outline-offset: 1px;
border-color: var(--zk-green-300);
}
.zk-partner-filters__select:disabled {
background-color: #f0f0f0;
color: var(--zk-muted);
cursor: not-allowed;
}
.zk-partner-filters__reset {
appearance: none;
background: transparent;
border: 1px solid var(--zk-green-700);
border-radius: 4px;
padding: 9px 14px;
font-family: var(--zk-font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--zk-green-700);
cursor: pointer;
white-space: nowrap;
transition: background-color 0.18s ease, color 0.18s ease;
align-self: end;
}
.zk-partner-filters__reset:hover,
.zk-partner-filters__reset:focus-visible {
background-color: var(--zk-green-700);
color: #ffffff;
outline: none;
}
.zk-partner-filters__reset[hidden] {
display: none;
}
/* Empty-State, wenn kein Partner zu den Filtern passt */
.zk-partner-grid__empty {
margin: 32px 0 0;
padding: 24px 20px;
text-align: center;
background: #fafbf9;
border: 1px dashed var(--zk-line);
border-radius: 6px;
color: var(--zk-soft);
font-family: var(--zk-font-body);
}
.zk-partner-grid__empty[hidden] {
display: none;
}
.zk-partner-grid__empty-reset {
appearance: none;
background: transparent;
border: 0;
padding: 0;
margin: 0 0 0 4px;
font: inherit;
color: var(--zk-green-700);
text-decoration: underline;
cursor: pointer;
}
.zk-partner-grid__empty-reset:hover,
.zk-partner-grid__empty-reset:focus-visible {
color: var(--zk-green-800);
outline: none;
}
/* Karten, die per JS herausgefiltert wurden (hidden-Attribut) */
.zk-partner-card[hidden] {
display: none;
}
/* Tablet: Reset rutscht in eigene Zeile, Selects bleiben in 4 Spalten
solange Platz ist; ab < 900px nur noch 2 Spalten für die Selects. */
@media (max-width: 1024px) {
.zk-partner-filters__row {
grid-template-columns: repeat(2, 1fr);
}
.zk-partner-filters__reset {
grid-column: 1 / -1;
justify-self: start;
}
}
@media (max-width: 540px) {
.zk-partner-filters {
padding: 14px 14px;
}
.zk-partner-filters__row {
grid-template-columns: 1fr;
gap: 10px;
}
}
/* v1.20.0: Nur noch ein Filter (Produkt / Warengruppe, mu-plugin v1.23.0) —
kompakte, zentrierte Leiste statt einer Viererreihe mit drei leeren Spalten. */
.zk-partner-filters--single {
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.zk-partner-filters--single .zk-partner-filters__row {
grid-template-columns: minmax(0, 1fr) auto;
}
@media (max-width: 540px) {
.zk-partner-filters--single .zk-partner-filters__row {
grid-template-columns: 1fr;
}
}
/* =====================================================================
Ready-Check Lead-Funnel (Theme v1.16.0 / Plugin v1.19.0)
===================================================================== */
.zk-readycheck {
max-width: 760px;
margin: 0 auto;
}
.zk-readycheck__form { display: block; }
.zk-readycheck__questions {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.zk-readycheck__question {
background: #ffffff;
border: 1px solid var(--zk-line);
border-radius: 14px;
padding: 28px 28px 22px;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.zk-readycheck__question.is-answered {
border-color: var(--zk-green-200);
box-shadow: 0 6px 24px -16px rgba(15, 43, 15, 0.18);
}
.zk-readycheck__question.is-yes { border-color: var(--zk-green-500); }
.zk-readycheck__question.is-no { border-color: var(--zk-line); }
.zk-readycheck__qnum {
font-family: var(--zk-font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--zk-lime-dark);
margin: 0 0 10px 0;
}
.zk-readycheck__qnum span { color: var(--zk-ink); }
.zk-readycheck__qtext {
font-family: var(--zk-font-display);
font-size: 1.3rem;
font-weight: 500;
line-height: 1.3;
color: var(--zk-ink) !important;
margin: 0 0 8px 0;
}
.zk-readycheck__qhint {
font-family: var(--zk-font-body);
font-size: 0.93rem;
color: var(--zk-muted);
margin: 0 0 18px 0;
line-height: 1.5;
}
.zk-readycheck__toggle {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.zk-readycheck__option {
flex: 1 1 calc(50% - 5px);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 10px 18px;
font-family: var(--zk-font-body);
font-size: 1rem;
font-weight: 600;
color: var(--zk-text);
background: var(--zk-paper-2);
border: 1.5px solid var(--zk-line);
border-radius: 10px;
cursor: pointer;
user-select: none;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.zk-readycheck__option:hover { border-color: var(--zk-green-300); }
.zk-readycheck__option input {
position: absolute;
inset: 0;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
margin: 0;
}
.zk-readycheck__option-label { pointer-events: none; }
.zk-readycheck__option input:focus-visible + .zk-readycheck__option-label {
outline: 2px solid var(--zk-lime-dark);
outline-offset: 4px;
border-radius: 4px;
}
/* v1.26.0: ausgewählte Antwort in ZUKE-Grün statt Schwarz (Feedback 12.10.). */
.zk-readycheck__option:has(input:checked) {
background: var(--zk-lime);
border-color: var(--zk-lime);
color: #ffffff;
}
/* Progress-Bar */
.zk-readycheck__progress {
margin: 28px 0 0;
padding: 18px 22px;
background: var(--zk-paper-2);
border-radius: 12px;
border: 1px solid var(--zk-line);
}
.zk-readycheck__progress-bar {
width: 100%;
height: 8px;
background: var(--zk-line);
border-radius: 999px;
overflow: hidden;
}
.zk-readycheck__progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--zk-green-500), var(--zk-lime));
transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.zk-readycheck__progress-text {
margin: 12px 0 0;
font-family: var(--zk-font-body);
font-size: 0.92rem;
color: var(--zk-muted);
}
.zk-readycheck__progress-text span {
color: var(--zk-ink);
font-weight: 700;
}
/* Result-Section */
.zk-readycheck__result {
margin-top: 40px;
padding: 40px 36px 36px;
background: var(--zk-ink);
color: #ffffff;
border-radius: 16px;
box-shadow: 0 20px 60px -30px rgba(15, 43, 15, 0.6);
}
.zk-readycheck__result--ready { background: linear-gradient(135deg, #143b16 0%, #1a4d1a 100%); }
.zk-readycheck__result--on_the_way { background: linear-gradient(135deg, #0f2b0f 0%, #236b23 100%); }
.zk-readycheck__result--potential { background: linear-gradient(135deg, #0a2010 0%, #1a2e1a 100%); }
.zk-readycheck__result-overline {
font-family: var(--zk-font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--zk-lime-bright);
margin: 0 0 10px 0;
}
.zk-readycheck__result-title {
font-family: var(--zk-font-display) !important;
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
font-weight: 600;
line-height: 1.15;
color: #ffffff !important;
margin: 0 0 6px 0;
}
.zk-readycheck__result-score {
font-family: var(--zk-font-body);
font-size: 1rem;
color: rgba(255, 255, 255, 0.78);
margin: 0 0 22px 0;
}
.zk-readycheck__result-score span {
font-family: var(--zk-font-display);
font-size: 1.4rem;
font-weight: 600;
color: var(--zk-lime-bright);
}
.zk-readycheck__result-text {
font-family: var(--zk-font-body);
font-size: 1.02rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.92);
margin: 0 0 28px 0;
}
/* Contact-Block im Result-Container */
.zk-readycheck__contact {
background: #ffffff;
color: var(--zk-text);
padding: 32px 30px 30px;
border-radius: 12px;
margin-top: 4px;
}
.zk-readycheck__contact-title {
font-family: var(--zk-font-display);
font-size: 1.4rem;
font-weight: 600;
color: var(--zk-ink);
margin: 0 0 8px 0;
line-height: 1.2;
}
.zk-readycheck__contact-lead {
font-family: var(--zk-font-body);
font-size: 0.98rem;
color: var(--zk-muted);
line-height: 1.55;
margin: 0 0 24px 0;
}
.zk-readycheck__fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.zk-readycheck__field--wide,
.zk-readycheck__consent {
grid-column: 1 / -1;
}
.zk-readycheck__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.zk-readycheck__label {
font-family: var(--zk-font-body);
font-size: 0.85rem;
font-weight: 600;
color: var(--zk-text);
letter-spacing: 0.01em;
}
.zk-readycheck__label em {
color: var(--zk-lime-dark);
font-style: normal;
}
.zk-readycheck__field input,
.zk-readycheck__field textarea {
font-family: var(--zk-font-body);
font-size: 1rem;
color: var(--zk-ink);
background: var(--zk-paper-2);
border: 1.5px solid var(--zk-line);
border-radius: 8px;
padding: 12px 14px;
transition: border-color 0.15s ease, background 0.15s ease;
width: 100%;
}
.zk-readycheck__field input:focus,
.zk-readycheck__field textarea:focus {
outline: none;
border-color: var(--zk-green-500);
background: #ffffff;
}
.zk-readycheck__field textarea {
resize: vertical;
min-height: 100px;
font-family: var(--zk-font-body);
}
.zk-readycheck__consent {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 4px;
font-family: var(--zk-font-body);
font-size: 0.9rem;
color: var(--zk-muted);
line-height: 1.55;
cursor: pointer;
}
.zk-readycheck__consent input {
margin-top: 3px;
accent-color: var(--zk-green-500);
}
.zk-readycheck__consent a {
color: var(--zk-lime-dark);
text-decoration: underline;
}
.zk-readycheck__consent em { color: var(--zk-lime-dark); font-style: normal; }
.zk-readycheck__honeypot {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* v1.26.0: ZUKE-Grün mit weißer Schrift wie alle Buttons der Hauptseite
(Feedback 12.10.), vorher Neon #C6FF00 mit dunkler Schrift. */
.zk-readycheck__submit {
margin-top: 24px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
font-family: var(--zk-font-body);
font-size: 1rem;
font-weight: 700;
color: #ffffff;
background: var(--zk-lime);
border: none;
border-radius: 999px;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
box-shadow: 0 8px 24px -10px rgba(139, 195, 74, 0.6);
}
.zk-readycheck__submit:hover {
transform: translateY(-2px);
background: var(--zk-lime-dark);
}
.zk-readycheck__submit:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.zk-readycheck__submit-arrow {
transition: transform 0.15s ease;
font-weight: 700;
}
.zk-readycheck__submit:hover .zk-readycheck__submit-arrow {
transform: translateX(3px);
}
.zk-readycheck__status {
margin: 14px 0 0;
font-family: var(--zk-font-body);
font-size: 0.92rem;
color: var(--zk-muted);
min-height: 1.4em;
}
/* Success-State */
.zk-readycheck__success {
margin-top: 40px;
padding: 60px 40px 56px;
text-align: center;
background: linear-gradient(135deg, #143b16 0%, #1a4d1a 100%);
color: #ffffff;
border-radius: 16px;
}
.zk-readycheck__success-icon {
width: 64px;
height: 64px;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 700;
color: var(--zk-ink);
background: var(--zk-lime-bright);
border-radius: 50%;
}
.zk-readycheck__success-title {
font-family: var(--zk-font-display) !important;
font-size: clamp(1.6rem, 3vw, 2.1rem);
font-weight: 600;
color: #ffffff !important;
margin: 0 0 12px 0;
}
.zk-readycheck__success-text {
font-family: var(--zk-font-body);
font-size: 1rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.9);
margin: 0 auto;
max-width: 480px;
}
.zk-readycheck__success-text a {
color: var(--zk-lime-bright);
text-decoration: underline;
}
@media (max-width: 700px) {
.zk-readycheck__question { padding: 22px 20px 18px; }
.zk-readycheck__qtext { font-size: 1.15rem; }
.zk-readycheck__qhint { font-size: 0.88rem; }
.zk-readycheck__option { min-height: 48px; font-size: 0.95rem; }
.zk-readycheck__result { padding: 32px 22px 26px; }
.zk-readycheck__contact { padding: 26px 20px 24px; }
.zk-readycheck__fields { grid-template-columns: 1fr; }
.zk-readycheck__success { padding: 48px 22px 44px; }
}
/* Fallback wenn :has() nicht supported (sehr alte Browser):
die Checked-Variante kommt via JS-Klasse zur Frage. */
.zk-readycheck__question.is-yes .zk-readycheck__option:first-of-type,
.zk-readycheck__question.is-no .zk-readycheck__option:last-of-type {
background: var(--zk-lime);
border-color: var(--zk-lime);
color: #ffffff;
}
/* =====================================================================
v1.19.0 — Hauptmenü: Hover/Active in Grün #2A712B statt Grau
Das Avada-Menü-Element im Header verweist für alle Hover-/Active-
Zustände auf Palettenfarbe 6 (--awb-color6 = #6b7280, Grau): Schrift
und Unterstrich des aktiven Top-Level-Punkts, die Fläche des aktiven
bzw. gehoverten Dropdown-Eintrags und die aktive Zeile im Mobilmenü.
Die Werte sitzen inline am