/* Theme Name: KLEE Environmental Equipment Theme URI: https://www.klee.gmbh Author: KLEE Environmental Equipment GmbH Description: Modernes Block-Theme für die KLEE Environmental Equipment GmbH — Solids Control Equipment: Herstellung, Vermietung & Service. DSGVO-konform (lokale Schriften, keine externen Dienste, OpenStreetMap per Zwei-Klick), SEO- und mobiloptimiert, mit dezenten Scroll-Animationen. Version: 1.3.9 Requires at least: 6.4 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: klee-theme Tags: block-patterns, block-styles, editor-style, full-site-editing, one-column, custom-colors, custom-logo */ /* ========================================================= 1. Basis ========================================================= */ :root { --k-blau: var(--wp--preset--color--klee-blau, #0e75ba); --k-blau-dunkel: var(--wp--preset--color--blau-dunkel, #0a5a94); --k-navy: var(--wp--preset--color--navy, #0a2e4c); --k-navy-tief: var(--wp--preset--color--navy-tief, #071e33); --k-tinte: var(--wp--preset--color--tinte, #0f1d29); --k-schiefer: var(--wp--preset--color--schiefer, #3f5468); --k-nebel: var(--wp--preset--color--nebel, #eff4f8); --k-linie: #d9e3ec; --k-radius: 6px; --k-ease: cubic-bezier(0.22, 1, 0.36, 1); /* z-index scale */ --z-sticky: 100; --z-overlay: 200; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Schutz gegen horizontales Überlaufen NICHT auf legen: ein Clip-Kontext dort hebt das Kleben (position: sticky) des Headers auf. Stattdessen nur auf den Inhaltsbereich. */ .wp-site-blocks > main { overflow-x: clip; } img { max-width: 100%; height: auto; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } .entry-content > p, .entry-content li { max-width: 72ch; } ::selection { background: var(--k-blau); color: #fff; } /* ========================================================= Sprachumschaltung DE/EN (In-Place) Blöcke mit .k-de bzw. .k-en zeigen sich nur in der jeweiligen Sprache. Blöcke ohne diese Klassen sind sprachneutral und immer sichtbar (dient zugleich als Rückfall für Unübersetztes). ========================================================= */ html[data-lang="de"] .k-en { display: none !important; } html[data-lang="en"] .k-de { display: none !important; } /* Sprach-Button mit Typewriter-Text */ .klee-lang { display: inline-flex; align-items: center; gap: 0.5rem; height: 40px; padding: 0 0.9rem; border: 1.5px solid var(--k-linie); border-radius: 999px; background: #fff; color: var(--k-tinte); font: inherit; font-weight: 600; font-size: 0.9rem; line-height: 1; cursor: pointer; flex: none; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .klee-lang:hover { border-color: var(--k-blau); color: var(--k-blau); } .klee-lang__icon { flex: none; display: block; } .klee-lang__text { display: inline-block; min-width: 8.6em; text-align: left; white-space: nowrap; } /* blinkender Cursor am Ende des Typewriter-Texts */ .klee-lang__text::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 2px; background: currentColor; vertical-align: -0.15em; animation: klee-caret 1s steps(1) infinite; } @keyframes klee-caret { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .klee-lang__text { min-width: 0; } .klee-lang__text::after { display: none; } } @media (max-width: 767px) { .klee-lang__text { min-width: 7.6em; font-size: 0.8rem; } .klee-lang { padding: 0 0.7rem; gap: 0.35rem; height: 38px; } } /* Sehr schmale Displays: nur Globus + Kürzel, damit Logo und Burger genug Platz behalten. */ @media (max-width: 400px) { .klee-lang__text { display: none; } .klee-lang { padding: 0; width: 38px; justify-content: center; } } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .wp-block-button__link:focus-visible { outline: 3px solid var(--k-blau); outline-offset: 2px; border-radius: 2px; } /* Zertifikats-Raster der Startseite: Die letzte Reihe hat nur 2 Kacheln. Sie behalten die Drittel-Breite der oberen Reihe und stehen mittig — statt sich unruhig über die volle Breite zu strecken. */ @media (min-width: 782px) { /* Spezifität: Core setzt „…columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis:0; flex-grow:1 }" — das muss hier geschlagen werden, sonst strecken sich die 2 Kacheln wieder. Die Kacheln stehen bündig unter den Spalten der oberen Reihe. */ .wp-block-columns.k-zert-rest:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-grow: 0 !important; flex-basis: calc((100% - 2 * var(--wp--style--block-gap, 2em)) / 3) !important; } } /* ========================================================= 2. Header ========================================================= */ /* Der Template-Part

muss das klebende Element sein: ein sticky-Element klebt nur innerhalb seines Elternelements, und das innere .klee-header ist nur so hoch wie der Header selbst. */ .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: var(--z-sticky); } .klee-header { position: relative; /* Kein backdrop-filter direkt auf dem Header: das würde einen Bezugsrahmen für position:fixed erzeugen und das mobile Vollbild-Menü auf die Headerhöhe einsperren. Daher liegt die Milchglas-Fläche auf ::before. */ background: transparent; border-bottom: 1px solid transparent; transition: border-color 0.3s var(--k-ease), box-shadow 0.3s var(--k-ease); } .klee-header::before { content: ""; position: absolute; inset: 0; z-index: -1; /* Deckendes Weiß (nicht transparent): Der Hintergrund der Seite würde sonst durchschimmern und den weißen Rand der Logo-Grafik sichtbar machen. */ background: #ffffff; } .klee-header.is-scrolled { border-bottom-color: var(--k-linie); box-shadow: 0 6px 24px -18px rgba(7, 30, 51, 0.45); } .klee-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 1240px; margin-inline: auto; padding: 0.65rem clamp(1rem, 4vw, 2rem); } .klee-header__logo { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; min-width: 0; } .klee-header__logo img { display: block; width: 62px; height: 62px; flex: none; } /* Firmenname ausgeschrieben neben dem Logo */ .klee-header__name { display: flex; flex-direction: column; font-family: var(--wp--preset--font-family--heading, inherit); line-height: 1.1; white-space: nowrap; } .klee-header__name strong { font-size: 1.45rem; font-weight: 700; letter-spacing: 0.04em; color: var(--k-blau); } .klee-header__name em { font-style: normal; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--k-schiefer); } @media (max-width: 767px) { .klee-header__logo img { width: 46px; height: 46px; } .klee-header__logo { gap: 0.65rem; } .klee-header__name strong { font-size: 1.15rem; } .klee-header__name em { font-size: 0.68rem; } } /* Schmale Displays: Der Name bleibt sichtbar (das Emblem trägt keinen Schriftzug mehr) — nur der Untertitel weicht, wenn es eng wird. */ @media (max-width: 480px) { .klee-header__name strong { font-size: 1.02rem; } .klee-header__name em { display: none; } } /* Rechte Kopfgruppe: Navigation + Sprach-Button (Button ganz außen rechts) */ .klee-header__actions { display: flex; align-items: center; gap: 1.25rem; } /* Mobil: Burger-Menü bleibt ganz außen rechts (Konvention), der Sprach-Button rückt davor. */ @media (max-width: 767px) { .klee-header__actions { gap: 0.5rem; } .klee-header__actions .klee-lang { order: -1; } } /* Navigation */ .klee-header .wp-block-navigation a { font-weight: 600; font-size: 1rem; color: var(--k-tinte); text-decoration: none; padding: 0.35rem 0; position: relative; } .klee-header .wp-block-navigation a:hover { color: var(--k-blau); } .klee-header .wp-block-navigation .wp-block-navigation-item.current-menu-item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--k-blau); border-radius: 2px; } /* Burger-Button: klar sichtbar und gut tippbar (min. 48px) */ .wp-block-navigation__responsive-container-open { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -6px; border-radius: 8px; color: var(--k-blau); background: transparent; transition: background 0.2s ease; } .wp-block-navigation__responsive-container-open:hover { background: rgba(14, 117, 186, 0.1); } .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; } /* Mobiles Overlay-Menü: echtes Vollbild, große Links */ .wp-block-navigation__responsive-container.is-menu-open { position: fixed; inset: 0; box-sizing: border-box; width: auto; height: auto; background: var(--k-navy-tief); padding: clamp(1.5rem, 7vw, 3rem); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { width: 100%; margin-top: 3rem; } .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container { width: 100%; flex-direction: column; align-items: flex-start !important; justify-content: flex-start; gap: 0.35rem; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; } .wp-block-navigation__responsive-container.is-menu-open a { display: block; width: 100%; padding: 0.55rem 0; color: #fff; font-family: var(--wp--preset--font-family--heading, inherit); font-size: clamp(1.75rem, 8vw, 2.5rem); font-weight: 700; line-height: 1.15; text-decoration: none; } .wp-block-navigation__responsive-container.is-menu-open a:hover, .wp-block-navigation__responsive-container.is-menu-open a:focus-visible { color: #9cc9e8; } /* Aktive Seite im Overlay markieren – aber ohne die Unterstreichung des Desktop-Menüs (die liefe hier über die volle Breite). */ .klee-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a::after { display: none; } .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a { color: #9cc9e8; } /* Schließen-Button ebenfalls groß genug */ .wp-block-navigation__responsive-container-close { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--k-tinte); } .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: #fff; } /* ========================================================= 3. Hero ========================================================= */ .klee-hero { position: relative; isolation: isolate; } .klee-hero .wp-block-cover__inner-container { max-width: 1240px; margin-inline: auto; padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem); } .klee-hero__services { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; font-weight: 600; letter-spacing: 0.02em; } .klee-hero__services span { display: inline-flex; align-items: center; gap: 0.6rem; } .klee-hero__services span::before { content: ""; width: 10px; height: 10px; background: var(--k-blau); border-radius: 2px; transform: rotate(45deg); flex: none; } /* ========================================================= 4. Sektionen & Kompositionen ========================================================= */ /* Zeilen-Liste (Leistungen) — bewusst keine Cards */ .k-rows > .wp-block-columns { position: relative; padding-block: clamp(1.5rem, 4vw, 2.5rem); margin-block: 0 !important; transition: padding-left 0.35s var(--k-ease); } .k-rows > .wp-block-columns::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--k-linie); } .k-rows > .wp-block-columns:last-child { border-bottom: 1px solid var(--k-linie); } .k-rows h3 { margin-top: 0; transition: color 0.25s ease, transform 0.4s var(--k-ease); } /* Trennlinie zeichnet sich beim Hereinscrollen von links nach rechts */ @media (prefers-reduced-motion: no-preference) { html.k-motion .k-row::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--k-ease) 0.1s; } html.k-motion .k-row.k-in::before { transform: scaleX(1); } } /* Zeilen-Hover: Titel färbt sich und rückt nach rechts */ @media (hover: hover) { .k-rows > .wp-block-columns:hover h3 { color: var(--k-blau); transform: translateX(10px); } .k-rows > .wp-block-columns:hover::before { background: var(--k-blau); } } /* Staffel-Verzögerungen für Reveal-Klassen (im Editor zuweisbar) */ .k-delay-1 { --k-delay: 160ms; } .k-delay-2 { --k-delay: 320ms; } .k-delay-3 { --k-delay: 480ms; } /* Produkt-Übersicht: kleine quadratische Vorschaubilder mit Namen darunter. Eigenes Grid statt Core-Galerie-Flex, damit die Kacheln auf allen Bildschirmgrößen klein bleiben. */ .wp-block-gallery.has-nested-images.k-uebersicht { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; margin-top: var(--wp--preset--spacing--40); } @media (max-width: 899px) { .wp-block-gallery.has-nested-images.k-uebersicht { grid-template-columns: repeat(4, 1fr); gap: 12px; } } .wp-block-gallery.has-nested-images.k-uebersicht figure.wp-block-image { width: auto !important; margin: 0 !important; display: block; border-radius: var(--k-radius); overflow: visible; } .wp-block-gallery.has-nested-images.k-uebersicht figure.wp-block-image img { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: cover; border-radius: var(--k-radius); } .wp-block-gallery.has-nested-images.k-uebersicht figure.wp-block-image figcaption { position: static; background: none; padding: 0.45rem 0 0; margin: 0; color: #c3d6e6; font-family: var(--wp--preset--font-family--heading, inherit); font-weight: 600; font-size: 0.78rem; line-height: 1.25; text-align: center; overflow-wrap: anywhere; } .k-uebersicht .wp-block-image a:focus-visible img { outline: 3px solid var(--k-blau); outline-offset: -3px; } /* Zertifikats-Dokumente: klickbar für Großansicht */ .k-dokument img { cursor: zoom-in; } /* Marquee-Band */ .k-marquee { overflow: hidden; white-space: nowrap; padding-block: 0.9rem; border-block: 1px solid rgba(255, 255, 255, 0.14); } .k-marquee__track { display: inline-block; padding-left: 0; animation: k-marquee 38s linear infinite; will-change: transform; } .k-marquee span { display: inline-block; margin-right: 3.5rem; font-family: var(--wp--preset--font-family--heading, inherit); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); } .k-marquee span::after { content: "✦"; margin-left: 3.5rem; color: var(--k-blau); font-size: 0.8em; } @keyframes k-marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .k-marquee__track { animation: none; } .k-marquee { white-space: normal; } .k-marquee span { margin-right: 1.5rem; } .k-marquee span::after { margin-left: 1.5rem; } } /* Galerie-Kacheln: einheitlich beschnitten, gerundet */ .k-galerie.wp-block-gallery { --wp--style--unstable-gallery-gap: 10px; } .k-galerie .wp-block-image { border-radius: var(--k-radius); overflow: hidden; } .k-galerie .wp-block-image img { transition: transform 0.6s var(--k-ease); } @media (hover: hover) { .k-galerie .wp-block-image:hover img { transform: scale(1.04); } } /* Diashow (Galerie mit Klasse k-slider — JS baut sie zum Karussell um). Ohne JavaScript bleibt die Galerie ein normales, kompaktes Raster. */ .wp-block-gallery.k-slider--ready { position: relative; display: block; aspect-ratio: 4 / 3; max-height: 520px; overflow: hidden; border-radius: var(--k-radius); background: var(--k-navy-tief); box-shadow: 0 24px 48px -32px rgba(7, 30, 51, 0.55); } /* WICHTIG — Spezifität: Das Core-CSS setzt mit „.wp-block-gallery.has-nested-images figure.wp-block-image { position: relative }" (0,3,1) die Slides zurück in den Textfluss. Ein schwächerer Selektor verliert dann: Die Slides stapeln sich NICHT übereinander, sondern liegen untereinander — Slide 2 ff. sitzen unterhalb des Rahmens und werden von overflow: hidden abgeschnitten (sichtbar bleibt nur die blaue Fläche). Deshalb hier bewusst hohe Spezifität + !important auf position. */ .wp-block-gallery.has-nested-images.k-galerie.k-slider--ready > figure.wp-block-image { position: absolute !important; inset: 0; height: 100%; margin: 0 !important; width: 100% !important; max-width: 100% !important; opacity: 0; /* Unsichtbare Slides dürfen keine Klicks abfangen — sonst trifft ein Klick (oder Rechtsklick) immer den obersten statt des sichtbaren. */ pointer-events: none; transition: opacity 0.6s var(--k-ease); } .wp-block-gallery.has-nested-images.k-galerie.k-slider--ready > figure.wp-block-image.is-active { opacity: 1; pointer-events: auto; } /* !important + hohe Spezifität nötig: Das Core-Galerie-CSS (.is-cropped … img { object-fit: cover }) gewinnt sonst und zoomt kleinere Fotos formatfüllend auf — sie wirken dann wie einfarbige Flächen. contain zeigt immer das ganze Foto (ggf. mit Rand). */ .wp-block-gallery.has-nested-images.k-galerie.k-slider--ready > figure.wp-block-image img { width: 100% !important; height: 100% !important; object-fit: contain !important; transform: none; border-radius: 0; } .k-slider__dots { position: absolute; left: 14px; bottom: 12px; z-index: 2; display: flex; gap: 8px; } .k-slider__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.45); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .k-slider__dot:hover { background: rgba(255, 255, 255, 0.75); } .k-slider__dot.is-active { background: var(--k-blau); transform: scale(1.25); } .k-slider__nav { position: absolute; right: 12px; bottom: 8px; z-index: 2; display: flex; gap: 6px; } .k-slider__arrow { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.2s ease; } .k-slider__arrow:hover { background: rgba(255, 255, 255, 0.3); } @media (prefers-reduced-motion: reduce) { .wp-block-gallery.has-nested-images.k-galerie.k-slider--ready > figure.wp-block-image { transition: none; } } /* Ohne JS: Galerie bleibt Raster, aber kompakt gedeckelt */ .wp-block-gallery.k-slider:not(.k-slider--ready) .wp-block-image { max-height: 220px; overflow: hidden; } /* Gerahmte Zertifikats-Dokumente */ .k-dokument img { background: #fff; border: 1px solid var(--k-linie); border-radius: 4px; box-shadow: 0 18px 40px -28px rgba(7, 30, 51, 0.5); padding: 8px; } /* Produkt-Sektionen */ .k-produkt { scroll-margin-top: 104px; } .k-produkt .k-spec li { margin-bottom: 0.4rem; } .k-spec { list-style: none; padding-left: 0 !important; } .k-spec li { padding-left: 1.6rem; position: relative; } .k-spec li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; background: var(--k-blau); border-radius: 2px; transform: rotate(45deg); } .k-dark .k-spec li::before { background: var(--k-blau); } /* Team */ .k-person { display: flex; flex-direction: column; border-top: 3px solid var(--k-blau); padding-top: 1.1rem; /* Kein height:100% — eine gesetzte Höhe würde das automatische Strecken der Spalten auf gleiche Höhe (align-items:stretch) deaktivieren; genau das brauchen wir, damit margin-top:auto die Kontaktzeile bei allen bündig nach unten schiebt. */ } .k-person h3 { margin: 0 0 0.2rem; } .k-person a { color: var(--k-blau-dunkel); text-decoration: none; font-weight: 600; } .k-person a:hover { text-decoration: underline; } /* Kontaktzeile bei allen Personen bündig unten ausrichten */ .k-person > p:last-child { margin-top: auto; padding-top: 0.6rem; } /* Profilbild (Platzhalter, im Editor per „Ersetzen“ austauschbar) */ .k-person__foto { margin: 0 0 1rem; } .k-person__foto img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 3px solid var(--k-nebel); box-shadow: 0 10px 24px -16px rgba(7, 30, 51, 0.5); } /* Dunkle Sektionen: Linkfarben */ .k-dark a:not(.wp-block-button__link) { color: #cfe6f7; } .k-dark a:not(.wp-block-button__link):hover { color: #fff; } /* ========================================================= 5. Formular ========================================================= */ .klee-form { display: grid; gap: 1rem; } .klee-form .k-feld { display: grid; gap: 0.35rem; } .klee-form label { font-weight: 600; font-size: 0.95rem; color: var(--k-tinte); } .klee-form input[type="text"], .klee-form input[type="email"], .klee-form input[type="tel"], .klee-form textarea { width: 100%; font: inherit; color: var(--k-tinte); background: #fff; border: 1.5px solid var(--k-linie); border-radius: var(--k-radius); padding: 0.75rem 0.9rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .klee-form input:focus, .klee-form textarea:focus { outline: none; border-color: var(--k-blau); box-shadow: 0 0 0 3px rgba(14, 117, 186, 0.18); } .klee-form ::placeholder { color: var(--k-schiefer); opacity: 1; } .klee-form .k-checkbox { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; color: var(--k-schiefer); } .klee-form .k-checkbox input { margin-top: 0.3rem; width: 1.05rem; height: 1.05rem; accent-color: var(--k-blau); flex: none; } .klee-form button[type="submit"] { font: inherit; font-weight: 700; cursor: pointer; border: none; border-radius: var(--k-radius); background: var(--k-blau); color: #fff; padding: 0.85rem 2.2rem; justify-self: start; transition: background 0.2s ease, transform 0.2s var(--k-ease); } .klee-form button[type="submit"]:hover { background: var(--k-blau-dunkel); } .klee-form button[type="submit"]:active { transform: translateY(1px); } /* Honeypot unsichtbar (nicht display:none — Bots erkennen das) */ .k-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .k-form-status { display: none; border-radius: var(--k-radius); padding: 0.9rem 1.1rem; font-weight: 600; } .k-form-status.is-visible { display: block; } .k-form-status--ok { background: #e6f1fa; color: #0a4a7a; border: 1px solid #b7d6ee; } .k-form-status--fehler { background: #fdeaea; color: #8c1c1c; border: 1px solid #f3b8b8; } /* ========================================================= 6. OpenStreetMap (Zwei-Klick, DSGVO) ========================================================= */ .klee-map { position: relative; border-radius: var(--k-radius); overflow: hidden; background: var(--k-navy); min-height: 380px; display: grid; } .klee-map__consent { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; padding: 2rem; color: #fff; background: linear-gradient(rgba(7, 30, 51, 0.82), rgba(7, 30, 51, 0.82)), repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px); } .klee-map__consent p { max-width: 46ch; margin: 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); } .klee-map__consent strong { font-family: var(--wp--preset--font-family--heading, inherit); font-size: 1.25rem; letter-spacing: 0.01em; } .klee-map__button { font: inherit; font-weight: 700; cursor: pointer; border: none; border-radius: var(--k-radius); background: var(--k-blau); color: #fff; padding: 0.75rem 1.8rem; transition: background 0.2s ease; } .klee-map__button:hover { background: #3390cc; } .klee-map iframe { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 380px; border: 0; display: block; } /* ========================================================= 6a. „Nach oben“-Pfeil ========================================================= */ .klee-top { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 150; /* über Inhalt/Sticky-Header, unter dem Video-Overlay */ width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--k-blau); color: #fff; cursor: pointer; box-shadow: 0 12px 28px -12px rgba(7, 30, 51, 0.6); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.35s var(--k-ease), transform 0.35s var(--k-ease), visibility 0.35s, background 0.2s ease; } .klee-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .klee-top:hover { background: var(--k-blau-dunkel); } .klee-top:active { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .klee-top { transition: none; transform: none; } } /* ========================================================= 6b. Unternehmensvideo-Overlay (lädt erst beim Klick) ========================================================= */ .klee-video-btn .wp-block-button__link { cursor: pointer; } .klee-video-btn .wp-block-button__link::before { content: "▶"; display: inline-block; margin-right: 0.55em; font-size: 0.7em; transform: translateY(-1px); } .klee-video-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: none; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(7, 30, 51, 0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .klee-video-overlay.is-open { display: flex; } @media (prefers-reduced-motion: no-preference) { .klee-video-overlay.is-open { animation: klee-overlay-in 0.3s var(--k-ease); } @keyframes klee-overlay-in { from { opacity: 0; } to { opacity: 1; } } } .klee-video-overlay .klee-video-player { width: min(1100px, 100%); margin: 0; } /* Ohne gewähltes Video nimmt der leere Player-Block keinen Platz ein (sonst schiebt er den Hinweis aus der Mitte) */ .klee-video-overlay .klee-video-player:not(:has(video)) { display: none; } .klee-video-overlay video { display: block; width: 100%; height: auto; max-height: 82vh; border-radius: var(--k-radius); background: #000; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8); } .klee-video-close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; transition: background 0.2s ease; } .klee-video-close:hover { background: rgba(255, 255, 255, 0.3); } .klee-video-empty { color: #fff; text-align: center; font-family: var(--wp--preset--font-family--heading, inherit); font-weight: 600; font-size: 1.4rem; padding: clamp(2rem, 6vw, 4rem); border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: var(--k-radius); } /* Editor-Hinweis auf der Website ausblenden */ .klee-video-note { display: none; } /* Seite hinter dem Overlay nicht scrollbar */ html.k-noscroll, html.k-noscroll body { overflow: hidden; } /* ========================================================= 7. Footer ========================================================= */ .klee-footer { background: var(--k-navy-tief); color: rgba(255, 255, 255, 0.82); } .klee-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; } .klee-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--k-blau); text-underline-offset: 4px; } .klee-footer .klee-footer__wordmark { font-family: var(--wp--preset--font-family--heading, inherit); font-weight: 700; font-size: 1.6rem; line-height: 1.1; color: #fff; letter-spacing: 0.01em; } .klee-footer .klee-footer__wordmark em { font-style: normal; color: #c3d6e6; } .klee-footer__meta { border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); } /* ========================================================= 8. Buttons (Verfeinerung) ========================================================= */ .wp-block-button__link { transition: transform 0.25s var(--k-ease), box-shadow 0.25s var(--k-ease), background-color 0.2s ease, color 0.2s ease; } .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(7, 30, 51, 0.55); } .wp-block-button__link:active { transform: translateY(0); } .is-style-outline .wp-block-button__link, .is-style-outline > .wp-block-button__link { border-width: 2px; } @media (prefers-reduced-motion: reduce) { .wp-block-button__link, .k-galerie .wp-block-image img { transition: none; } .wp-block-button__link:hover { transform: none; } } /* ========================================================= 9. Scroll-Reveals (nur aktiv wenn JS + Motion erlaubt) ========================================================= */ @media (prefers-reduced-motion: no-preference) { html.k-motion .k-up, html.k-motion .k-fade, html.k-motion .k-left, html.k-motion .k-right, html.k-motion .k-zoom, html.k-motion .k-stagger > * { opacity: 0; transition: opacity 0.8s var(--k-ease), transform 0.8s var(--k-ease); transition-delay: var(--k-delay, 0ms); will-change: opacity, transform; } html.k-motion .k-up, html.k-motion .k-stagger > * { transform: translateY(30px); } html.k-motion .k-left { transform: translateX(-36px); } html.k-motion .k-right { transform: translateX(36px); } html.k-motion .k-zoom { transform: scale(0.94); } html.k-motion .k-in.k-up, html.k-motion .k-in.k-fade, html.k-motion .k-in.k-left, html.k-motion .k-in.k-right, html.k-motion .k-in.k-zoom, html.k-motion .k-stagger.k-in > * { opacity: 1; transform: none; } /* Hero-Parallax */ html.k-motion .k-parallax img.wp-block-cover__image-background { will-change: transform; transform: translateY(var(--k-parallax, 0px)) scale(1.12); } } /* ========================================================= 10. Sonstiges ========================================================= */ /* Anker-Ziel-Abstand unter Sticky-Header */ :target, [id] { scroll-margin-top: 104px; } /* Tabellen (falls im Editor genutzt) */ .entry-content table { border-collapse: collapse; width: 100%; } .entry-content td, .entry-content th { border: 1px solid var(--k-linie); padding: 0.6rem 0.8rem; } /* Lange Wörter mobil umbrechen */ h1, h2 { overflow-wrap: break-word; hyphens: manual; }