-Buttons beim Hover/Visited blau. Hier setzen
wir für alle Kaiser-Buttons die richtige Textfarbe in JEDEM
Zustand fest.
============================================================ */
.kai-btn--cta, .kai-btn--cta:link, .kai-btn--cta:visited, .kai-btn--cta:hover, .kai-btn--cta:focus, .kai-btn--cta:active,
.kai-btn--solid, .kai-btn--solid:link, .kai-btn--solid:visited, .kai-btn--solid:hover, .kai-btn--solid:focus, .kai-btn--solid:active,
.kai-btn--ghost, .kai-btn--ghost:link, .kai-btn--ghost:visited, .kai-btn--ghost:hover, .kai-btn--ghost:focus, .kai-btn--ghost:active{
color:var(--kai-creme,#F6F0E4) !important;
}
.kai-btn--line, .kai-btn--line:link, .kai-btn--line:visited, .kai-btn--line:hover, .kai-btn--line:focus, .kai-btn--line:active{
color:var(--kai-walnuss,#3A2C20) !important;
}
/* Ausnahme: Button im grünen CTA-Band ist creme-farben mit dunkler Schrift */
.kai-cta .kai-btn--cta, .kai-cta .kai-btn--cta:link, .kai-cta .kai-btn--cta:visited,
.kai-cta .kai-btn--cta:hover, .kai-cta .kai-btn--cta:focus, .kai-cta .kai-btn--cta:active{
color:var(--kai-walnuss,#3A2C20) !important;
}
/* Sprung-Chips (Unterseiten): Standard dunkel, Hover creme */
.kai-jump a:link, .kai-jump a:visited{ color:var(--kai-walnuss,#3A2C20) !important; }
.kai-jump a:hover, .kai-jump a:focus{ color:var(--kai-creme,#F6F0E4) !important; }
/* ============================================================
THEME-PINK BEI LINKS/TEXTEN ENTFERNEN (Formular + Textfelder)
------------------------------------------------------------
„Normale" Links (ohne eigene kai-Klasse) bekommen Kaiser-Grün.
Eigene gestylte Block-Links bleiben unberührt (haben Klassen).
============================================================ */
/* Formular: Einwilligungs-/Checkbox-Texte in Kaiser-Braun */
.elementor-widget-form .elementor-field-type-acceptance,
.elementor-widget-form .elementor-field-type-acceptance label,
.elementor-widget-form .elementor-field-subgroup label{
color:var(--kai-text-soft,#6B5B4B) !important;
}
/* NUR der Datenschutz-Link in der Einwilligung (Kontaktformular):
Waldgrün + Unterstrich. Sonst nichts. */
.elementor-widget-form .elementor-field-type-acceptance a,
.elementor-widget-form .elementor-field-type-acceptance a:visited{
color:var(--kai-waldgruen,#2D4A38) !important; text-decoration:underline; text-underline-offset:2px;
}
.elementor-widget-form .elementor-field-type-acceptance a:hover,
.elementor-widget-form .elementor-field-type-acceptance a:focus{
color:var(--kai-moos,#3C6049) !important;
}
/* ============================================================
BEWEGUNG · „ALLES WIRD EINGEPASST"
------------------------------------------------------------
Drei Gesten, mehr nicht:
1. AUFSTEIGEN – Texte/Karten steigen gestaffelt ein
2. EINPASSEN – Bilder werden von oben nach unten gesetzt
3. ZIEHEN – die Maßlinie zeichnet sich (Signatur)
SICHERHEITSNETZ: Versteckt wird ausschließlich innerhalb von
`html.kai-motion`. Diese Klasse setzt das Skript im Header —
und NUR, wenn JS läuft und der Nutzer Bewegung erlaubt.
Ohne JS / bei „Bewegung reduzieren" ist alles sofort sichtbar.
Niemals eine Regel hier ohne `.kai-motion` davor schreiben.
============================================================ */
:root{
--kai-ease: cubic-bezier(.22,1,.36,1); /* entschlossen, setzt sich sauber */
--kai-dur: .9s;
}
/* !!! SPEZIFITÄT !!!
Alle Versteck-Selektoren stehen in :where(), damit sie die Spezifität
von `.kai-motion` (0,1,0) NICHT erhöhen. Sonst schlägt z. B.
`.kai-motion .kai-row__text p` (0,2,1) die Einblend-Regel
`.kai-motion .is-in` (0,2,0) – und der Absatz bleibt für immer
unsichtbar. Genau das ist hier schon einmal passiert.
Neue Selektoren IMMER in :where() ergänzen. */
/* --- 1. AUFSTEIGEN ------------------------------------------ */
.kai-motion :where(
.kai-eyebrow, .kai-endcta__eyebrow, .kai-h2,
.kai-hero__lead, .kai-hero__actions, .kai-hero__meta,
.kai-areas__intro, .kai-area,
.kai-trust__lead, .kai-trust__points, .kai-trust__text .kai-btn,
.kai-gallery__head .kai-btn,
.kai-cta__title, .kai-cta__lead, .kai-cta__actions,
.kai-endcta__title, .kai-endcta__lead, .kai-endcta__actions,
.kai-sub__title, .kai-sub__lead, .kai-jump,
.kai-row__title, .kai-row__text p, .kai-row__list,
.kai-cinfo__title, .kai-cinfo__lead, .kai-cinfo__list, .kai-cinfo__impressum
){
opacity:0; transform:translateY(14px);
transition:opacity var(--kai-dur) var(--kai-ease), transform var(--kai-dur) var(--kai-ease);
transition-delay:calc(var(--kai-i,0) * 55ms);
}
/* --- 2. EINPASSEN (Bilder) ---------------------------------- */
.kai-motion :where(.kai-hero__media, .kai-trust__media, .kai-row__media, .kai-gitem){
opacity:0; transform:translateY(10px);
transition:opacity var(--kai-dur) var(--kai-ease), transform var(--kai-dur) var(--kai-ease);
transition-delay:calc(var(--kai-i,0) * 55ms);
}
/* Das Bild selbst wird wie ein Paneel von oben nach unten gesetzt.
Reines clip-path – KEIN scale, damit nichts beschnitten wird. */
.kai-motion :where(.kai-hero__media, .kai-trust__media, .kai-row__media, .kai-gitem) img{
clip-path:inset(0 0 100% 0);
transition:clip-path .95s var(--kai-ease);
transition-delay:calc(var(--kai-i,0) * 55ms + 90ms);
}
.kai-motion .is-in img{ clip-path:inset(0 0 0 0); }
/* --- Sichtbarer Endzustand (für 1 + 2) ---------------------- */
.kai-motion .is-in{ opacity:1; transform:none; }
/* --- Hero-Headline: Wort für Wort --------------------------- */
.kai-motion .kai-hero__title{ opacity:0; transition:opacity .5s linear; }
.kai-motion .kai-hero__title.is-in{ opacity:1; }
.kai-motion .kai-hero__title .kai-word{
display:inline-block; opacity:0; transform:translateY(.55em);
transition:opacity .9s var(--kai-ease), transform .9s var(--kai-ease);
transition-delay:calc(var(--kai-i,0) * 110ms + 120ms);
}
.kai-motion .kai-hero__title.is-in .kai-word{ opacity:1; transform:none; }
/* ============================================================
MATERIAL · FEINE KÖRNUNG
------------------------------------------------------------
Lässt Creme wie Papier/Holz wirken statt wie flaches CSS.
Das wird vom Header-Skript eingehängt (auch bei
reduzierter Bewegung – Körnung ist keine Animation).
============================================================ */
.kai-grain{
position:fixed; inset:0; z-index:3; pointer-events:none;
opacity:.05; mix-blend-mode:overlay;
background-repeat:repeat; background-size:180px 180px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 300;
font-display: auto;
src: url('https://kaiser-innenausbau.de/wp-content/uploads/2026/06/work-sans-300.woff2') format('woff2');
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
font-display: auto;
src: url('https://kaiser-innenausbau.de/wp-content/uploads/2026/06/work-sans-400.woff2') format('woff2');
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 500;
font-display: auto;
src: url('https://kaiser-innenausbau.de/wp-content/uploads/2026/06/work-sans-500.woff2') format('woff2');
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 600;
font-display: auto;
src: url('https://kaiser-innenausbau.de/wp-content/uploads/2026/06/work-sans-600.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 400;
font-display: auto;
src: url('https://kaiser-innenausbau.de/wp-content/uploads/2026/06/spectral-400.woff2') format('woff2');
}
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 500;
font-display: auto;
src: url('https://kaiser-innenausbau.de/wp-content/uploads/2026/06/spectral-500.woff2') format('woff2');
}
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 600;
font-display: auto;
src: url('https://kaiser-innenausbau.de/wp-content/uploads/2026/06/spectral-600.woff2') format('woff2');
}
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 700;
font-display: auto;
src: url('https://kaiser-innenausbau.de/wp-content/uploads/2026/06/spectral-700.woff2') format('woff2');
}
/* End Custom Fonts CSS */