/* * KINDLINGER Classic design system v0.4 * Angelehnt an die bisherige Startseite (Navy, Gelb, helle Flächen), moderner umgesetzt. * Mobile-first, eine Datei; Schrift Figtree als eingebettete Variable-Font (17 KB). * Wortmarke bleibt Arial Black / Arial kursiv (Markenvorgabe). */ /* ---------- Tokens ---------- */ /* Figtree (SIL OFL 1.1, assets/fonts/Figtree-OFL.txt): variable 300–900, auf Deutsch/Latin-Zeichen reduziert (17 KB). Als data-URI in dieser Datei: kein zusätzlicher Request, kein Schriftwechsel beim Laden. */ @font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url(data:font/woff2;base64,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) format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+2013-2014, U+2018-201E, U+2022, U+2026, U+20AC, U+2122, U+2190-2193, U+2212; } :root { --k-bg: #ffffff; --k-canvas: #f3f4f6; /* Flächen, Bildhintergründe */ --k-surface: #ffffff; --k-ink: #111418; /* Text, Überschriften */ --k-ink-2: #2a3038; --k-navy: #0f3d77; /* KINDLINGER-Blau: Topbar, Buttons, Band, Footer */ --k-navy-2: #0a2d5a; --k-muted: #586273; --k-line: #e3e5e8; --k-green: #0f3d77; /* Aktions-Buttons (Weiß darauf 11:1) */ --k-green-2: #0a2d5a; --k-lime: #fcb900; /* Akzent auf dunklem Grund */ --k-lime-soft: #fff5d6; --k-yellow: #fcb900; /* Angebote, CTA (dunkle Schrift 9:1) */ --k-yellow-2: #e5a800; --k-sale: #b52e0e; --k-ok: #2f7a1f; --k-warn: #9a5800; --k-font: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --k-font-brand: "Arial Black", "Arial Bold", Gadget, Arial, sans-serif; --k-font-claim: Arial, Helvetica, sans-serif; --k-font-display: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --k-radius: 6px; --k-radius-sm: 4px; --k-pill: 6px; --k-shadow: 0 1px 2px rgb(21 35 59 / 6%), 0 8px 24px rgb(21 35 59 / 8%); --k-shadow-lg: 0 2px 4px rgb(21 35 59 / 6%), 0 18px 40px rgb(21 35 59 / 14%); --k-max: 1320px; --k-focus: 0 0 0 2px #fff, 0 0 0 4px var(--k-ink); --k-dock-h: 0px; --k-cp: 14px; /* Innenabstand Produktkarte */ --wc-highlight: var(--k-ink); --wc-highligh-text: #fff; --wc-primary: var(--k-green); --wc-primary-text: #fff; --wc-green: var(--k-ok); --wc-red: var(--k-sale); --wc-orange: var(--k-warn); --wc-blue: var(--k-ink-2); --wc-secondary: var(--k-canvas); --wc-secondary-text: var(--k-ink); --wc-subtext: var(--k-muted); } @media (max-width: 1023.98px) { :root { --k-dock-h: 64px; } } @media (max-width: 599px) { :root { --k-cp: 10px; } } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; } body { margin: 0; background: var(--k-bg); color: var(--k-ink); font: 16px/1.55 var(--k-font); -webkit-font-smoothing: antialiased; padding-bottom: calc(var(--k-dock-h) + env(safe-area-inset-bottom, 0px)); } img, svg, video { max-width: 100%; height: auto; } a { color: var(--k-green); text-underline-offset: 3px; } a:hover { color: var(--k-green-2); } :focus-visible { outline: none; box-shadow: var(--k-focus); border-radius: 6px; } h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--k-ink); font-family: var(--k-font); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; } h1 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); } h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); } h3 { font-size: 1.15rem; } p { margin: 0 0 1em; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--k-yellow); color: var(--k-ink); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .k-skip-link:focus { clip: auto; width: auto; height: auto; margin: 0; top: 8px; left: 8px; z-index: 1000; padding: 10px 14px; border-radius: var(--k-radius-sm); background: var(--k-yellow); color: var(--k-ink); font-weight: 700; } .k-container { width: 100%; max-width: var(--k-max); margin-inline: auto; padding-inline: 16px; } @media (min-width: 768px) { .k-container { padding-inline: 24px; } } .k-icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; } /* ---------- Buttons ---------- */ .k-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wp-element-button, .woocommerce a.button.alt, .woocommerce button.button.alt, .single_add_to_cart_button, .checkout-button { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 12px 22px; border: 0; border-radius: var(--k-pill); background: var(--k-green); color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, transform .1s, box-shadow .15s; } .k-button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--k-green-2); color: #fff; } .k-button:active, .woocommerce .button:active { transform: translateY(1px); } .k-button--yellow { background: var(--k-yellow); color: var(--k-ink); } .k-button--yellow:hover { background: var(--k-yellow-2); color: var(--k-ink); } .k-button--ghost { background: transparent; color: var(--k-ink); box-shadow: inset 0 0 0 2px var(--k-ink); } .k-button--ghost:hover { background: var(--k-ink); color: #fff; } .k-button--glass { background: rgb(255 255 255 / 12%); color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 70%); backdrop-filter: blur(6px); } .k-button--glass:hover { background: #fff; color: var(--k-ink); } .woocommerce .button.disabled, .woocommerce .button:disabled, .woocommerce button.button:disabled[disabled] { opacity: .5; cursor: not-allowed; background: var(--k-green); color: #fff; } .k-link-arrow { display: inline-flex; align-items: center; gap: .35em; color: var(--k-ink); font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap; } .k-link-arrow:hover { color: var(--k-green); } .k-link-arrow .k-icon { transition: transform .15s; } .k-link-arrow:hover .k-icon { transform: translateX(3px); } .k-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } /* ---------- Topbar ---------- */ .k-topbar { background: var(--k-navy); color: #fff; font-size: .8125rem; } .k-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 36px; } .k-topbar__usp { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; white-space: nowrap; overflow: hidden; } .k-topbar__usp li { display: inline-flex; align-items: center; gap: 6px; } .k-topbar__usp .k-icon { width: 16px; height: 16px; color: var(--k-lime); stroke-width: 2.4; } .k-topbar__phone { display: none; align-items: center; gap: 8px; color: #fff; text-decoration: none; white-space: nowrap; } .k-topbar__phone:hover { color: var(--k-yellow); } .k-topbar__phone .k-icon { width: 16px; height: 16px; } @media (max-width: 767px) { .k-topbar__inner { justify-content: center; } .k-topbar__usp li:not(:first-child) { display: none; } } @media (min-width: 768px) and (max-width: 1199px) { .k-topbar__usp li:nth-child(n+3) { display: none; } } @media (min-width: 1024px) { .k-topbar__phone { display: inline-flex; } } /* ---------- Header ---------- */ .k-header { position: sticky; top: 0; z-index: 50; background: var(--k-bg); transition: box-shadow .2s; } .k-header.is-stuck { box-shadow: 0 6px 24px rgb(18 21 19 / 10%); } .k-header__bar { display: grid; align-items: center; gap: 10px 8px; grid-template-columns: auto 1fr auto; grid-template-areas: "toggle brand actions" "search search search"; padding-block: 10px; } .k-nav-toggle { grid-area: toggle; } .k-brand { grid-area: brand; margin: 0; font-size: inherit; line-height: 1; } .k-header__search { grid-area: search; } .k-header__actions { grid-area: actions; display: flex; align-items: center; gap: 2px; } .k-nav-toggle, .k-nav-close, .k-sub-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--k-pill); background: transparent; color: var(--k-ink); cursor: pointer; } .k-nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .k-nav-toggle .k-icon { width: 26px; height: 26px; } .k-wordmark { display: inline-flex; flex-direction: column; color: var(--k-ink); text-decoration: none; line-height: 1; } .k-wordmark:hover { color: var(--k-ink); } .k-wordmark__name { font-family: var(--k-font-brand); font-weight: 900; font-size: 1.4rem; letter-spacing: .01em; } .k-wordmark__claim { margin-top: 3px; font-family: var(--k-font-claim); font-style: italic; font-size: .78rem; color: var(--k-green); } .custom-logo { display: block; max-height: 52px; width: auto; } .k-header-action { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: var(--k-pill); color: var(--k-ink); font-weight: 600; font-size: .9rem; text-decoration: none; } .k-header-action:hover { background: var(--k-canvas); color: var(--k-ink); } .k-header-action .k-icon { width: 24px; height: 24px; } .k-header-action__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .k-header__actions .k-header-action--contact { display: none; } .k-cart-count { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--k-yellow); color: var(--k-ink); font-size: .72rem; font-weight: 800; line-height: 20px; text-align: center; } .k-cart-count[data-count="0"] { background: var(--k-canvas); color: var(--k-muted); } .k-search { position: relative; display: flex; width: 100%; } .k-search__input { flex: 1; min-width: 0; height: 48px; padding: 0 64px 0 20px; border: 2px solid var(--k-ink); border-radius: var(--k-pill); background: #fff; font-size: 16px; /* kein iOS-Zoom */ -webkit-appearance: none; appearance: none; } .k-search__input::placeholder { color: var(--k-muted); opacity: 1; } .k-search__input:focus { outline: none; box-shadow: 0 0 0 4px rgb(252 185 0 / 55%); } .k-search__submit { position: absolute; top: 4px; right: 4px; bottom: 4px; width: 52px; border: 0; border-radius: var(--k-pill); background: var(--k-yellow); color: var(--k-ink); cursor: pointer; } .k-search__submit:hover { background: var(--k-yellow-2); } .k-search__submit .k-icon { width: 22px; height: 22px; stroke-width: 2.2; } @media (min-width: 1024px) { .k-header__bar { grid-template-columns: auto minmax(360px, 1fr) auto; grid-template-areas: "brand search actions"; gap: 40px; padding-block: 16px; } .k-nav-toggle { display: none; } .k-wordmark__name { font-size: 1.85rem; } .k-wordmark__claim { font-size: .9rem; } .k-search { max-width: 760px; } .k-search__input { height: 52px; } .k-header__actions { gap: 6px; } .k-header__actions .k-header-action--contact { display: inline-flex; } .k-header-action { flex-direction: column; gap: 2px; min-width: 72px; padding: 4px 10px; border-radius: var(--k-radius-sm); font-size: .78rem; font-weight: 600; } .k-header-action__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; } .k-cart-count { top: -2px; right: 14px; } } /* ---------- Navigation ---------- */ .k-menu, .k-menu .sub-menu { margin: 0; padding: 0; list-style: none; } .k-menu a { display: block; color: var(--k-ink); text-decoration: none; } @media (max-width: 1023.98px) { .k-nav { position: fixed; inset: 0 auto 0 0; z-index: 100; width: min(90vw, 400px); overflow-y: auto; overscroll-behavior: contain; background: var(--k-bg); box-shadow: var(--k-shadow-lg); transform: translateX(-102%); transition: transform .22s ease; visibility: hidden; } .k-nav-open .k-nav { transform: none; visibility: visible; } .k-nav-open { overflow: hidden; } .k-nav-open::after { content: ""; position: fixed; inset: 0; z-index: 90; background: rgb(18 21 19 / 55%); } .k-nav .k-container { padding: 0; } .k-nav__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 10px 16px; background: var(--k-navy); } .k-nav__head .k-wordmark, .k-nav__head .k-nav-close { color: #fff; } .k-nav__head .k-wordmark__claim { color: var(--k-lime); } .k-menu > .menu-item { border-bottom: 1px solid var(--k-line); } .k-menu .menu-item { position: relative; } .k-menu a { padding: 14px 56px 14px 18px; font-weight: 700; } .k-menu .sub-menu { display: none; padding-bottom: 8px; background: var(--k-canvas); } .k-menu .sub-menu a { padding: 10px 52px 10px 30px; font-weight: 500; } .k-menu .sub-menu .sub-menu { background: transparent; padding: 0; } .k-menu .sub-menu .sub-menu a { padding-left: 44px; color: var(--k-muted); } .k-menu .is-open > .sub-menu { display: block; } .k-sub-toggle { position: absolute; top: 3px; right: 6px; } .k-sub-toggle::before { content: ""; width: 9px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .15s; } .k-sub-toggle[aria-expanded="true"]::before { transform: rotate(-135deg); } .k-nav__service { display: grid; gap: 4px; padding: 16px; } .k-nav__service .k-header-action { justify-content: flex-start; gap: 12px; padding: 0 12px; border-radius: var(--k-radius-sm); background: var(--k-canvas); } .k-nav__service .k-header-action__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; } } /* Desktop: Sortimentsleiste mit Mega-Menü (Ebene 2 als Spalten, Ebene 3 als Listen). */ @media (min-width: 1024px) { .k-nav { position: relative; background: var(--k-bg); border-top: 1px solid var(--k-line); border-bottom: 1px solid var(--k-line); } .k-nav__inner { position: relative; } .k-nav__head, .k-nav__service, .k-sub-toggle { display: none; } .k-menu { display: flex; justify-content: space-between; gap: 0; } .k-menu > li > a { position: relative; padding: 13px 4px; font-weight: 700; font-size: .95rem; white-space: nowrap; } .k-menu > li > a::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--k-yellow); transform: scaleX(0); transition: transform .15s; } .k-menu > li:hover > a::after, .k-menu > li:focus-within > a::after, .k-menu > li.current-menu-item > a::after, .k-menu > li.current-menu-ancestor > a::after { transform: scaleX(1); } .k-menu > li > .sub-menu { position: absolute; top: 100%; left: 24px; right: 24px; z-index: 60; display: none; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 28px; max-height: min(70vh, 640px); overflow-y: auto; padding: 24px 28px 28px; background: var(--k-bg); border-radius: 0 0 var(--k-radius) var(--k-radius); box-shadow: var(--k-shadow-lg); } .k-menu > li:hover > .sub-menu, .k-menu > li:focus-within > .sub-menu { display: grid; } .k-menu > li > .sub-menu > li > a { padding: 6px 0; font-weight: 800; font-size: .95rem; } .k-menu > li > .sub-menu > li > a:hover { color: var(--k-green); } .k-menu .sub-menu .sub-menu { display: block; position: static; padding: 0 0 8px; } .k-menu .sub-menu .sub-menu a { padding: 4px 0; color: var(--k-muted); font-size: .9rem; } .k-menu .sub-menu .sub-menu a:hover { color: var(--k-ink); text-decoration: underline; } .k-menu .sub-menu .sub-menu .sub-menu { display: none; } /* Kurze Untermenüs ohne dritte Ebene: kompakte Liste statt leerer Fläche. */ .k-menu > li { position: static; } .k-menu > li > .sub-menu:not(:has(.sub-menu)) { left: auto; right: auto; min-width: 260px; grid-template-columns: 1fr; gap: 0; padding: 14px 22px; } .k-menu > li > .sub-menu:not(:has(.sub-menu)) > li > a { font-weight: 600; } } @media (min-width: 1024px) and (max-width: 1199px) { .k-menu > li > a { font-size: .85rem; } } /* ---------- Mobile Schnellleiste ---------- */ .k-dock { position: fixed; inset: auto 0 0 0; z-index: 80; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--k-dock-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--k-bg); border-top: 1px solid var(--k-line); box-shadow: 0 -6px 20px rgb(18 21 19 / 6%); } .k-dock__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--k-ink); font-size: .7rem; font-weight: 700; text-decoration: none; cursor: pointer; } .k-dock__item .k-icon { width: 24px; height: 24px; } .k-dock__item[aria-current="page"] { color: var(--k-green); } .k-dock__cart .k-cart-count { top: 6px; right: calc(50% - 22px); } @media (min-width: 1024px) { .k-dock { display: none; } } @media print { .k-dock, .k-buybar { display: none; } } /* ---------- Layout ---------- */ .k-main { display: block; min-height: 50vh; } .k-main:focus { outline: none; } .k-page { padding-block: 20px 56px; } .k-page--builder { padding: 0; } .k-page__title { margin-top: .2em; } .k-page__intro { max-width: 70ch; color: var(--k-muted); } .k-prose { max-width: 75ch; font-size: 1.0625rem; } .k-prose img { border-radius: var(--k-radius-sm); } .k-prose h2 { margin-top: 1.6em; } .k-breadcrumbs, .woocommerce-breadcrumb { margin: 0 0 14px; font-size: .85rem; color: var(--k-muted); } .k-breadcrumbs a { color: var(--k-muted); text-decoration: none; } .k-breadcrumbs a:hover { color: var(--k-ink); text-decoration: underline; } .k-breadcrumbs__sep { margin: 0 6px; } .k-section { padding-block: clamp(28px, 4.5vw, 56px); } .k-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 20px; } .k-section-head__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2.1rem); } .k-section-head__title .k-icon { width: 1em; height: 1em; color: var(--k-green); stroke-width: 2.2; } .k-section-head__sub { margin: 4px 0 0; color: var(--k-muted); } /* ---------- Home: Hero (Bento) ---------- */ .k-hero { display: grid; gap: 12px; padding-top: 16px; } .k-hero__main { position: relative; display: grid; align-items: end; min-height: 440px; overflow: hidden; isolation: isolate; border-radius: var(--k-radius); background: var(--k-ink); color: #fff; } .k-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .k-hero__main::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(12 14 13 / 92%) 0%, rgb(12 14 13 / 62%) 48%, rgb(12 14 13 / 10%) 100%); } .k-hero__main--plain::after { display: none; } .k-hero__content { padding: 28px 22px; } .k-hero__kicker { display: inline-block; margin: 0 0 14px; padding: 5px 12px; border-radius: var(--k-pill); background: var(--k-yellow); color: var(--k-ink); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .k-hero__title { max-width: 16ch; margin: 0 0 12px; color: #fff; font-size: clamp(2rem, 1.3rem + 3.4vw, 3.9rem); line-height: 1.02; letter-spacing: -.035em; } .k-hero__text { max-width: 46ch; color: #eef0ed; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); } .k-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; } .k-hero__side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .k-hero__main { min-height: 480px; } .k-hero__main::after { background: linear-gradient(90deg, rgb(12 14 13 / 90%) 0%, rgb(12 14 13 / 60%) 45%, rgb(12 14 13 / 5%) 85%); } .k-hero__content { padding: 48px; } } @media (min-width: 1024px) { .k-hero { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; padding-top: 20px; } .k-hero__main { min-height: 540px; } .k-hero__side { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 16px; } .k-hero__side .k-ptile__link { height: 100%; aspect-ratio: auto; } } /* Bildkacheln (Hero-Seite, Landingpages) */ .k-ptile { min-width: 0; } .k-ptile__link { position: relative; display: block; height: 100%; min-height: 170px; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 5; border-radius: var(--k-radius); background: var(--k-ink-2); color: #fff; text-decoration: none; } @media (min-width: 600px) { .k-ptile__link { aspect-ratio: 16 / 10; } } .k-ptile__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .k-ptile__link::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(12 14 13 / 85%) 0%, rgb(12 14 13 / 30%) 50%, rgb(12 14 13 / 0%) 75%); } .k-ptile__link:hover { color: #fff; } .k-ptile__link:hover .k-ptile__img { transform: scale(1.05); } .k-ptile__text { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 3px; } .k-ptile__title { font-weight: 800; font-size: clamp(1.1rem, .95rem + .7vw, 1.6rem); line-height: 1.1; letter-spacing: -.02em; } .k-ptile__sub { font-size: .85rem; color: #e8ebe6; } .k-ptile__arrow { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--k-yellow); color: var(--k-ink); transition: transform .15s; } .k-ptile__arrow .k-icon { width: 18px; height: 18px; stroke-width: 2.2; } .k-ptile__link:hover .k-ptile__arrow { transform: rotate(-45deg); } .k-ptile--plain .k-ptile__link::after { display: none; } @media (max-width: 599px) { .k-ptile__text { left: 12px; right: 12px; bottom: 12px; } .k-ptile__sub { font-size: .75rem; } .k-ptile__arrow { top: 10px; right: 10px; width: 32px; height: 32px; } } /* ---------- Home: Vorteile ---------- */ .k-trust { padding-top: 16px; } .k-trust__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block: 0; padding-block: 0; list-style: none; } .k-trust__item { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--k-radius-sm); background: var(--k-canvas); font-size: .875rem; line-height: 1.3; } .k-trust__item .k-icon { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--k-lime); color: var(--k-ink); stroke-width: 1.9; } .k-trust__item strong { display: block; font-weight: 800; } .k-trust__sub { color: var(--k-muted); font-size: .8rem; } @media (max-width: 767px) { .k-trust__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .k-trust__list::-webkit-scrollbar { display: none; } .k-trust__item { scroll-snap-align: start; padding: 12px; } .k-trust__item .k-icon { width: 36px; height: 36px; padding: 8px; } } @media (min-width: 768px) { .k-trust__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .k-trust__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } } /* ---------- Home: Sortimente ---------- */ .k-cats { display: grid; grid-auto-flow: column; grid-auto-columns: 34%; gap: 12px; margin: 0; padding: 0 0 6px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .k-cats::-webkit-scrollbar { display: none; } .k-cat { scroll-snap-align: start; min-width: 0; } .k-cat__link { display: flex; flex-direction: column; gap: 10px; color: var(--k-ink); text-decoration: none; } .k-cat__media { display: block; overflow: hidden; aspect-ratio: 1; border: 1px solid var(--k-line-2, #d5dae1); border-radius: var(--k-radius); background: #fff; } .k-cat__img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .k-cat__link:hover .k-cat__img { transform: scale(1.06); } .k-cat__title { font-weight: 800; font-size: .95rem; line-height: 1.25; } .k-cat__link:hover .k-cat__title { color: var(--k-green); } @media (min-width: 600px) { .k-cats { grid-auto-columns: 22%; } } @media (min-width: 1024px) { .k-cats { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 16px; overflow: visible; } } /* ---------- Home: Angebote ---------- */ .k-deals { margin-block: clamp(8px, 2vw, 24px); background: var(--k-yellow); } .k-deals .k-section-head__title .k-icon { color: var(--k-ink); } .k-deals .k-section-head__sub { color: var(--k-ink); } .k-deals .k-link-arrow:hover { color: var(--k-ink); text-decoration: underline; } .k-deals ul.products li.product { border-color: transparent; } /* Produkt-Rail */ .k-rail { position: relative; } .k-rail ul.products { display: grid !important; grid-auto-flow: column; grid-auto-columns: 46%; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .k-rail ul.products::-webkit-scrollbar { display: none; } .k-rail ul.products li.product { scroll-snap-align: start; } @media (min-width: 600px) { .k-rail ul.products { grid-auto-columns: 31%; } } @media (min-width: 1024px) { .k-rail ul.products { grid-auto-columns: calc((100% - 4 * 16px) / 5); } } .k-rail__nav { display: none; } @media (min-width: 1024px) { .k-rail__nav { position: absolute; top: -64px; right: 0; display: flex; gap: 8px; } .k-section-head:has(+ .k-rail) { padding-right: 120px; } } .k-rail__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--k-ink); color: #fff; cursor: pointer; } .k-rail__btn:hover { background: var(--k-green); } /* ---------- Home: Services ---------- */ .k-services { display: grid; gap: 16px; } @media (min-width: 1024px) { .k-services { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } } .k-service { position: relative; overflow: hidden; isolation: isolate; padding: clamp(24px, 4vw, 44px); border-radius: var(--k-radius); } .k-service__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.05; letter-spacing: -.03em; } .k-service--metal { display: grid; align-content: end; min-height: 380px; background: var(--k-ink); color: #eef0ed; } .k-service--metal .k-service__title { color: #fff; } .k-service--metal .k-eyebrow { color: var(--k-yellow); } .k-service__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .k-service--metal::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(12 14 13 / 92%) 10%, rgb(12 14 13 / 45%) 70%, rgb(12 14 13 / 25%) 100%); } .k-service__body { max-width: 52ch; } .k-service--advice { background: var(--k-lime-soft); } .k-service--advice .k-eyebrow { color: var(--k-green); } .k-service__actions { display: flex; flex-wrap: wrap; gap: 10px; } .k-service__note { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgb(18 21 19 / 12%); font-size: .9rem; } .k-service__note a { color: var(--k-ink); font-weight: 800; } .k-service__note .k-icon { margin-right: 6px; } /* ---------- Home: Marken ---------- */ .k-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } @media (min-width: 600px) { .k-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { .k-brands { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; } } .k-brands__item { display: grid; place-items: center; aspect-ratio: 2 / 1; padding: 14px 18px; border-radius: var(--k-radius-sm); background: var(--k-canvas); transition: background-color .15s, box-shadow .15s; } .k-brands__item:hover { background: #fff; box-shadow: var(--k-shadow); } .k-brands__item img { max-height: 46px; width: auto; object-fit: contain; mix-blend-mode: multiply; } /* ---------- Home: Bewertungen ---------- */ .k-reviews .wp-gr { max-width: 100%; } /* ---------- Produktkarten (Woo-Loop) ---------- */ .woocommerce ul.products, ul.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; } @media (min-width: 768px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 1200px) { .woocommerce ul.products.columns-4, ul.products.columns-4, .woocommerce ul.products.columns-5, ul.products.columns-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none; } .k-products ul.products, .k-products .woocommerce { margin: 0; } .woocommerce ul.products li.product, ul.products li.product, .products-module .products > .product { position: relative; display: flex; flex-direction: column; width: auto !important; margin: 0 !important; float: none !important; padding: 0 0 var(--k-cp); overflow: hidden; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); transition: box-shadow .18s, border-color .18s, transform .18s; } ul.products li.product:hover, .products-module .products > .product:hover { border-color: transparent; box-shadow: var(--k-shadow-lg); transform: translateY(-2px); } ul.products li.product a.woocommerce-LoopProduct-link, .products-module .products > .product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1; color: var(--k-ink); text-decoration: none; } .woocommerce ul.products li.product a img, ul.products li.product img, .products-module .products > .product img { display: block; width: calc(100% - 16px); aspect-ratio: 1; height: auto; margin: 8px 8px 12px; padding: 10px; object-fit: contain; border: 1px solid var(--k-line-2, #d5dae1); border-radius: var(--k-radius-sm); background: #fff; } .woocommerce ul.products li.product .woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-product__title, .products-module .woocommerce-loop-product__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(2.8em + 1px); margin: 0 var(--k-cp) 8px; padding: 0; color: var(--k-ink); font-family: var(--k-font); font-size: .925rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; } .woocommerce ul.products li.product .price, ul.products li.product .price, .products-module .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: auto var(--k-cp) 4px; color: var(--k-ink); font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; } .woocommerce .price del, .price del, .woocommerce ul.products li.product .price del { order: 2; opacity: 1; color: var(--k-muted); font-size: .8rem; font-weight: 500; } .woocommerce ul.products li.product .price ins, ul.products li.product .price ins, .products-module .price ins { order: 1; color: var(--k-sale); text-decoration: none; } .k-price-from { font-size: .8rem; font-weight: 600; color: var(--k-muted); } .k-stock { margin: 0 var(--k-cp) 10px; font-size: .78rem; font-weight: 700; } .k-stock--instock { color: var(--k-ok); } .k-stock--outofstock { color: var(--k-muted); } .k-stock--onbackorder { color: var(--k-warn); } .k-stock::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: currentColor; } .woocommerce ul.products li.product .button, ul.products li.product .button, .products-module .button { display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; min-height: 44px; margin: 0 var(--k-cp); padding: 10px 14px; font-size: .875rem; } .k-card__cta .k-icon { width: 20px; height: 20px; } ul.products li.product .button.k-card__cta:not(.add_to_cart_button), ul.products li.product .button.product_type_variable { background: var(--k-canvas); color: var(--k-ink); } ul.products li.product .button.k-card__cta:not(.add_to_cart_button):hover, ul.products li.product .button.product_type_variable:hover { background: var(--k-ink); color: #fff; } ul.products li.product .added_to_cart { display: block; margin: 6px var(--k-cp) 0; font-size: .8rem; font-weight: 700; text-align: center; } ul.products li.product .button.loading { opacity: .65; } ul.products li.product .button.added::after { display: none; } @media (max-width: 599px) { .woocommerce ul.products li.product .button, ul.products li.product .button { min-height: 42px; padding-inline: 8px; font-size: .8rem; } .k-card__cta .k-icon { width: 18px; height: 18px; } ul.products li.product .k-card__cta-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .woocommerce ul.products li.product .price, ul.products li.product .price { font-size: 1.05rem; } } .woocommerce span.onsale, span.onsale, .woocommerce ul.products li.product .onsale { position: absolute; top: 10px; left: 10px; right: auto; z-index: 2; min-width: 0; min-height: 0; margin: 0; padding: 4px 10px; border-radius: var(--k-pill); background: var(--k-yellow); color: var(--k-ink); font-size: .78rem; font-weight: 800; line-height: 1.4; } ul.products .ean_wrapper, .products-module .ean_wrapper { display: none; } .woocommerce ul.products li.product .star-rating { margin: 0 var(--k-cp) 6px; font-size: .75rem; color: var(--k-yellow-2); } /* ---------- Shop / Kategorie ---------- */ .k-shop { padding-block: 16px 56px; } .k-shop .woocommerce-products-header { margin-bottom: 4px; } .k-shop .woocommerce-products-header__title, .k-shop h1.page-title, .k-lp__title { margin: 0 0 6px; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); letter-spacing: -.03em; } .k-shop .term-description { max-width: 75ch; color: var(--k-muted); } .k-subcats { margin: 14px 0 22px; } .k-subcats__list { display: flex; gap: 8px; margin: 0; padding: 0 0 4px; list-style: none; overflow-x: auto; scrollbar-width: none; } .k-subcats__list::-webkit-scrollbar { display: none; } @media (min-width: 1024px) { .k-subcats__list { flex-wrap: wrap; overflow: visible; } } .k-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; white-space: nowrap; border-radius: var(--k-pill); background: var(--k-canvas); color: var(--k-ink); font-size: .9rem; font-weight: 700; text-decoration: none; transition: background-color .15s, color .15s; } .k-chip:hover { background: var(--k-ink); color: #fff; } .k-chip__count { padding: 1px 7px; border-radius: var(--k-pill); background: #fff; color: var(--k-muted); font-size: .72rem; font-weight: 700; } .k-chip:hover .k-chip__count { background: rgb(255 255 255 / 18%); color: #fff; } .woocommerce-result-count { margin: 0 0 12px; color: var(--k-muted); font-size: .9rem; } .woocommerce-ordering { margin: 0 0 16px; } .woocommerce-ordering select, .k-woo-page select, .woocommerce form .form-row select, .woocommerce div.product form.cart .variations select { min-height: 46px; padding: 0 40px 0 14px; border: 1px solid var(--k-line); border-radius: var(--k-radius-sm); background-color: #fff; font-size: 16px; } @media (min-width: 768px) { .woocommerce-result-count { float: left; margin-top: 12px; } .woocommerce-ordering { float: right; } .k-shop__main ul.products { clear: both; } } .k-filter-toggle { margin-bottom: 12px; } .k-shop__filters .k-filter { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--k-line); } .k-filter__title { margin-bottom: 10px; font-size: .95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .k-shop__filters ul { margin: 0; padding: 0; list-style: none; } .k-shop__filters li { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .k-shop__filters li a { flex: 1; min-width: 0; padding: 6px 0; color: var(--k-ink); text-decoration: none; } .k-shop__filters li a:hover { color: var(--k-green); } .k-shop__filters li .count { flex: none; padding: 1px 8px; border-radius: var(--k-pill); background: var(--k-canvas); color: var(--k-muted); font-size: .75rem; font-weight: 700; } .k-shop__filters li.chosen a { color: var(--k-green); font-weight: 700; } .k-shop__filters li.chosen a::before { content: "✓ "; } .k-shop__filters .woocommerce-widget-layered-nav-list { max-height: 264px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; } .k-filter--active ul { display: flex; flex-wrap: wrap; gap: 8px; } .k-filter--active li a { flex: none; padding: 6px 12px; border-radius: var(--k-pill); background: var(--k-ink); color: #fff; font-size: .85rem; } .k-filter--active li a::before { content: "× "; } .k-filter--active li a:hover { background: var(--k-green); color: #fff; } .k-filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .k-filters__title { margin: 0; font-size: 1.2rem; font-weight: 800; } .k-shop__filters .price_slider_amount { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .k-shop__filters .price_slider_amount input[type=text] { width: calc(50% - 4px); min-height: 42px; padding: 8px 12px; border: 1px solid var(--k-line); border-radius: 10px; font: inherit; } .k-shop__filters .price_slider_amount .button { order: 3; } .k-shop__filters .price_slider_amount .price_label { order: 2; flex: 1; color: var(--k-muted); font-size: .9rem; } .k-shop__filters .price_slider { margin: 6px 6px 16px; } /* Preisregler: WooCommerce färbt ihn mit höherer Spezifität lila (#35224c / #7f54b3), daher dieselbe Kette + Navy. */ .k-shop__filters .ui-slider, .woocommerce .k-shop__filters .widget_price_filter .price_slider_wrapper .ui-widget-content { position: relative; height: 4px; border: 0; border-radius: 4px; background: #c9d0d8; } .k-shop__filters .ui-slider-range, .woocommerce .k-shop__filters .widget_price_filter .ui-slider .ui-slider-range { position: absolute; top: 0; height: 100%; border-radius: 4px; background: var(--k-navy); } .k-shop__filters .ui-slider-handle, .woocommerce .k-shop__filters .widget_price_filter .ui-slider .ui-slider-handle { position: absolute; top: -10px; width: 24px; height: 24px; margin-left: -12px; border: 2px solid var(--k-navy); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(17 20 24 / 25%); cursor: grab; outline-offset: 2px; transition: background-color .15s, box-shadow .15s; } .woocommerce .k-shop__filters .widget_price_filter .ui-slider .ui-slider-handle:hover { background: #e7edf5; } .woocommerce .k-shop__filters .widget_price_filter .ui-slider .ui-slider-handle:focus-visible { outline: 3px solid var(--k-ink); box-shadow: 0 0 0 5px #fff; } .woocommerce .k-shop__filters .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active { background: var(--k-navy); cursor: grabbing; } /* 0.8.36 Preisfilter neutral/schwarz (Raphael): Balken, Griffe und Filter-Button in Schwarz statt Navy. */ .k-shop__filters .ui-slider-range, .woocommerce .k-shop__filters .widget_price_filter .ui-slider .ui-slider-range { background: #111418; } .k-shop__filters .ui-slider-handle, .woocommerce .k-shop__filters .widget_price_filter .ui-slider .ui-slider-handle { border-color: #111418; } .woocommerce .k-shop__filters .widget_price_filter .ui-slider .ui-slider-handle:hover { background: #eceef0; } .woocommerce .k-shop__filters .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active { background: #111418; } .woocommerce .k-shop__filters .widget_price_filter .price_slider_amount .button { border: 0; background: #111418; color: #fff; box-shadow: none; } .woocommerce .k-shop__filters .widget_price_filter .price_slider_amount .button:hover { background: #3a3f45; color: #fff; } .k-shop__filters .price_slider_amount .price_label { color: #3b4350; } @media (max-width: 1023.98px) { .k-shop__filters { position: fixed; inset: 0 0 0 auto; z-index: 100; width: min(90vw, 400px); padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--k-bg); transform: translateX(102%); transition: transform .22s; visibility: hidden; } .k-filters-open .k-shop__filters { transform: none; visibility: visible; } /* Im Filter-Panel nur eine Scrollfläche: verschachtelte Listen fingen den Wisch ab und das Panel blieb hängen. */ .k-shop__filters .woocommerce-widget-layered-nav-list { max-height: none; overflow: visible; padding-right: 0; } .k-filters-open { overflow: hidden; } .k-filters-open::after { content: ""; position: fixed; inset: 0; z-index: 90; background: rgb(18 21 19 / 55%); } } @media (min-width: 1024px) { .k-shop--filters { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; } .k-shop--filters .k-breadcrumbs, .k-shop--filters .woocommerce-breadcrumb { grid-column: 1 / -1; } .k-filter-toggle, .k-filters__head { display: none; } } .woocommerce nav.woocommerce-pagination ul, .k-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; border: 0; } .woocommerce nav.woocommerce-pagination ul li { border: 0; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span, .k-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; min-height: 46px; padding: 0 12px; border-radius: var(--k-pill); background: var(--k-canvas); color: var(--k-ink); font-weight: 700; text-decoration: none; } .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--k-ink); color: #fff; } .woocommerce nav.woocommerce-pagination ul li span.current, .k-pagination .page-numbers.current { background: var(--k-ink); color: #fff; } /* ---------- Produktseite ---------- */ .woocommerce div.product { position: relative; display: grid; gap: 24px; } @media (min-width: 900px) { .woocommerce div.product { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; } .woocommerce div.product > .woocommerce-product-gallery, .woocommerce div.product > .wcgs-woocommerce-product-gallery { grid-column: 1; grid-row: 1; min-width: 0; } .woocommerce div.product > .summary { grid-column: 2; grid-row: 1; } .woocommerce div.product > :not(.woocommerce-product-gallery):not(.wcgs-woocommerce-product-gallery):not(.summary):not(.onsale) { grid-column: 1 / -1; } } .woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce div.product > .wcgs-woocommerce-product-gallery { width: auto !important; max-width: 100%; float: none !important; margin: 0 !important; } .woocommerce div.product div.images img { border-radius: var(--k-radius); background: #fff; } .woocommerce div.product > span.onsale { top: 14px; left: 14px; z-index: 5; font-size: .9rem; padding: 6px 14px; } .woocommerce div.product .product_title { margin: 0 0 10px; font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.3rem); letter-spacing: -.025em; } .k-product__brand { margin: 0 0 6px; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .k-product__brand a { color: var(--k-green); text-decoration: none; } .k-product__brand--logo { margin-bottom: 10px; } .k-product__brand--logo a { display: inline-block; } .k-product__brand--logo img { display: block; width: auto; max-width: 160px; height: auto; max-height: 44px; object-fit: contain; } .k-product__ids { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; font-size: .8rem; color: var(--k-muted); } .k-product__ids div { display: flex; gap: 5px; padding: 3px 10px; border-radius: var(--k-pill); background: var(--k-canvas); } .k-product__ids dt { font-weight: 700; } .k-product__ids dd { margin: 0; } .woocommerce div.product p.price, .woocommerce div.product span.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 4px; color: var(--k-ink); font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; } .woocommerce div.product p.price ins { color: var(--k-sale); text-decoration: none; } .woocommerce div.product p.price del, .woocommerce div.product span.price del { opacity: 1; color: var(--k-muted); font-size: 1rem; font-weight: 500; } .k-tax-note { margin: 0 0 16px; color: var(--k-muted); font-size: .85rem; } .k-tax-note a { color: inherit; } .woocommerce div.product .woocommerce-product-details__short-description { margin-bottom: 16px; color: var(--k-ink-2); } .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 18px 0 16px; padding: 16px; border-radius: var(--k-radius); background: var(--k-canvas); } .woocommerce div.product form.cart .variations { width: 100%; margin: 0; } .woocommerce div.product form.cart .variations th, .woocommerce div.product form.cart .variations td { display: block; padding: 0 0 6px; text-align: left; } .woocommerce div.product form.cart .variations select { width: 100%; } .woocommerce div.product form.cart .single_variation_wrap { width: 100%; } .woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 10px; } .woocommerce .quantity .qty { width: 76px; min-height: 54px; border: 1px solid var(--k-line); border-radius: var(--k-pill); background: #fff; font-weight: 700; text-align: center; } .single_add_to_cart_button, .woocommerce div.product form.cart .button { flex: 1; min-height: 54px; font-size: 1.05rem; } .woocommerce div.product .stock { font-weight: 700; } .woocommerce div.product .stock.in-stock { color: var(--k-ok); } .woocommerce div.product .stock.out-of-stock { color: var(--k-muted); } .k-pdp-usp { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; font-size: .9rem; } .k-pdp-usp li { display: flex; align-items: center; gap: 12px; } .k-pdp-usp .k-icon { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--k-lime-soft); color: var(--k-green); } .k-pdp-usp strong { font-weight: 800; } .product_meta { display: grid; gap: 4px; color: var(--k-muted); font-size: .85rem; } .product_meta a { color: var(--k-ink); } .product_meta .sku_wrapper { display: none; } .woocommerce div.product .woocommerce-tabs { margin-top: 16px; } .woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: 6px; margin: 0 0 4px; padding: 0; overflow-x: auto; border: 0; list-style: none; scrollbar-width: none; } .woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; border-radius: var(--k-pill); background: var(--k-canvas); } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 11px 18px; color: var(--k-ink); font-weight: 700; white-space: nowrap; text-decoration: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--k-ink); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff; } .woocommerce div.product .woocommerce-tabs .panel { max-width: none; padding-top: 18px; } .woocommerce div.product .woocommerce-tabs h2, .related > h2, .upsells > h2, .cross-sells > h2 { font-size: 1.4rem; } .woocommerce div.product .related, .woocommerce div.product .upsells { margin-top: 24px; } /* Mobile Kaufleiste */ .k-buybar { position: fixed; inset: auto 0 calc(var(--k-dock-h) + env(safe-area-inset-bottom, 0px)) 0; z-index: 79; background: var(--k-bg); border-top: 1px solid var(--k-line); box-shadow: 0 -8px 24px rgb(18 21 19 / 10%); transform: translateY(110%); transition: transform .2s ease; visibility: hidden; } .k-buybar.is-visible { transform: none; visibility: visible; } .k-buybar__inner { display: flex; align-items: center; gap: 12px; padding-block: 10px; } .k-buybar__info { flex: 1; min-width: 0; } .k-buybar__title { margin: 0; overflow: hidden; font-size: .8rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .k-buybar__price { margin: 0; font-size: 1.05rem; font-weight: 800; } .k-buybar__price del { font-size: .75rem; font-weight: 500; color: var(--k-muted); } .k-buybar__price ins { color: var(--k-sale); text-decoration: none; } .k-buybar__btn { flex: none; min-height: 46px; padding-inline: 18px; font-size: .9rem; } @media (min-width: 1024px) { .k-buybar { display: none; } } /* ---------- Warenkorb / Kasse / Konto ---------- */ .k-woo-page { max-width: none; } .woocommerce form .form-row label { font-weight: 600; font-size: .9rem; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .k-woo-page input[type="text"], .k-woo-page input[type="email"], .k-woo-page input[type="tel"], .k-woo-page input[type="password"], .k-woo-page input[type="number"] { min-height: 48px; padding: 10px 14px; border: 1px solid #cfd2cc; border-radius: var(--k-radius-sm); background: #fff; font-size: 16px; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .k-woo-page input:focus { outline: none; border-color: var(--k-ink); box-shadow: 0 0 0 3px rgb(252 185 0 / 50%); } .woocommerce table.shop_table { border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); border-collapse: separate; overflow: hidden; } .woocommerce table.shop_table th { font-weight: 800; } .woocommerce table.shop_table td, .woocommerce table.shop_table th { padding: 14px 16px; border-color: var(--k-line); } .woocommerce table.cart img { width: 72px; border: 1px solid var(--k-line); border-radius: var(--k-radius-sm); background: #fff; } .woocommerce table.cart td.actions .coupon .input-text { min-height: 48px; border-radius: var(--k-pill); padding-inline: 16px; } .woocommerce a.remove { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--k-muted) !important; font-size: 1.2rem; } .woocommerce a.remove:hover { background: var(--k-sale); color: #fff !important; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout-review-order { padding: 20px; border-radius: var(--k-radius); background: var(--k-canvas); } .woocommerce .cart-collaterals .cart_totals table.shop_table { background: transparent; border: 0; } .woocommerce .cart-collaterals .cart_totals h2, #order_review_heading, .woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3 { font-size: 1.25rem; } .woocommerce .wc-proceed-to-checkout .checkout-button, #place_order { width: 100%; min-height: 56px; font-size: 1.1rem; } .woocommerce-checkout #payment { border-radius: var(--k-radius); background: #fff; } /* 0.8.32 Kasse: „An eine andere Adresse liefern?" nicht floaten (Woo-Standard float:left ließ „Zusätzliche Informationen" rechts daneben umbrechen). */ .woocommerce-checkout .col-2 h3#ship-to-different-address { float: none; clear: both; width: 100%; margin-bottom: 12px; } .woocommerce-checkout #ship-to-different-address label { display: flex; align-items: center; gap: 10px; font-size: 1rem; } .woocommerce-checkout .woocommerce-additional-fields { clear: both; padding-top: 8px; } /* Feldhinweise (z. B. UID-Nummer) dauerhaft als ruhiger Hilfetext unter dem Feld statt als blaue Sprechblase, die nur per JavaScript beim Fokus erscheint. */ .woocommerce form .form-row .woocommerce-input-wrapper .description { display: block !important; position: static; margin: 6px 0 0; padding: 0; border-radius: 0; background: none; color: var(--k-muted); font-size: .8125rem; line-height: 1.4; } .woocommerce form .form-row .woocommerce-input-wrapper .description::before { content: none; display: none; } .woocommerce-checkout #payment ul.payment_methods { border-color: var(--k-line); } .woocommerce-checkout #payment div.payment_box { border-radius: var(--k-radius-sm); background: var(--k-canvas); } .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--k-canvas); } .wc-empty-cart-message .cart-empty { font-size: 1.1rem; } .woocommerce .return-to-shop .button { margin-top: 8px; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews { border: 0; border-left: 4px solid var(--k-green); border-radius: var(--k-radius-sm); background: var(--k-lime-soft); color: var(--k-ink); } .woocommerce-info { border-left-color: var(--k-ink); background: var(--k-canvas); } .woocommerce-error { border-left-color: var(--k-sale); background: #fdeceb; } .woocommerce-message::before, .woocommerce-info::before { color: var(--k-ink); } .woocommerce-message .button, .woocommerce-info .button { min-height: 40px; padding: 8px 16px; font-size: .875rem; } .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; padding: 0; list-style: none; } .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 16px; border-radius: var(--k-pill); background: var(--k-canvas); color: var(--k-ink); font-weight: 700; text-decoration: none; } .woocommerce-MyAccount-navigation li a:hover { background: var(--k-line); } .woocommerce-MyAccount-navigation li.is-active a { background: var(--k-ink); color: #fff; } @media (min-width: 900px) { .woocommerce-account.logged-in .k-woo-page > .woocommerce { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; } .woocommerce-account .k-woo-page > .woocommerce > :not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) { grid-column: 1 / -1; } .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content { width: auto !important; float: none !important; } .woocommerce-MyAccount-navigation ul { flex-direction: column; } .woocommerce-MyAccount-navigation li a { border-radius: var(--k-radius-sm); } } .woocommerce form.login, .woocommerce form.register { padding: 24px; border: 1px solid var(--k-line); border-radius: var(--k-radius); } /* ---------- Beiträge ---------- */ .k-post-list { display: grid; gap: 16px; } @media (min-width: 768px) { .k-post-list { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .k-teaser { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); transition: box-shadow .18s, transform .18s; } .k-teaser:hover { box-shadow: var(--k-shadow-lg); transform: translateY(-2px); } .k-teaser__media { display: block; overflow: hidden; background: var(--k-canvas); } .k-teaser__media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .k-teaser__body { padding: 16px 18px 18px; } .k-teaser__title { margin-bottom: 6px; font-size: 1.1rem; line-height: 1.3; letter-spacing: -.01em; } .k-teaser__title a { color: var(--k-ink); text-decoration: none; } .k-teaser__title a::after { content: ""; position: absolute; inset: 0; } .k-teaser__meta { margin: 0 0 8px; color: var(--k-muted); font-size: .8rem; font-weight: 600; } .k-teaser__excerpt { color: var(--k-muted); font-size: .9rem; } .k-teaser__excerpt p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .k-page__media { margin: 0 0 24px; } .k-page__media img { width: 100%; border-radius: var(--k-radius); } .k-404 .k-search { max-width: 560px; margin-bottom: 20px; } /* ---------- Footer ---------- */ .k-footer { margin-top: 56px; background: var(--k-navy); color: #d6deea; font-size: .925rem; } .k-footer a { color: #fff; text-decoration: none; } .k-footer a:hover { color: var(--k-yellow); } .k-footer__usp { border-bottom: 1px solid rgb(255 255 255 / 10%); } .k-footer__usp-list { display: grid; grid-template-columns: 1fr; gap: 12px; margin-block: 0; padding-block: 22px; list-style: none; } @media (min-width: 600px) { .k-footer__usp-list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .k-footer__usp-list { grid-template-columns: repeat(4, 1fr); } } .k-footer__usp-list li { display: flex; align-items: center; gap: 12px; line-height: 1.35; } .k-footer__usp-list strong { display: block; color: #fff; } .k-footer__usp-list .k-icon { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: var(--k-lime); color: var(--k-ink); } .k-footer__grid { display: grid; gap: 32px; padding-block: 40px; } @media (min-width: 768px) { .k-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } } .k-footer .k-wordmark { color: #fff; } .k-footer .k-wordmark__claim { color: var(--k-lime); } .k-footer__about { max-width: 36ch; margin: 14px 0 0; } .k-footer__contact { display: grid; gap: 10px; margin-top: 18px; font-style: normal; } .k-footer__contact a, .k-footer__contact span { display: inline-flex; align-items: center; gap: 10px; } .k-footer__title { margin: 0 0 14px; color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .k-footer__menu { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .k-footer__menu a { color: #d6deea; } .k-footer__menu a:hover { color: #fff; text-decoration: underline; } .k-footer__legal { border-top: 1px solid rgb(255 255 255 / 14%); color: #c3cddc; font-size: .8rem; } .k-footer__legal p { margin: 0; padding-block: 16px; } .k-footer__legal .k-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; } .k-footer__a11y { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-weight: 600; cursor: pointer; } .k-footer__a11y:hover { text-decoration: underline; } .k-footer__a11y .k-icon { width: 20px; height: 20px; } /* ---------- Bestehende Landingpages (Machic-Elementor-Widgets) ---------- */ .site-module { margin: 0 0 24px; } .site-module .module-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; } .site-module .module-header .entry-title { margin: 0; font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem); } .site-module .btn.link { color: var(--k-ink); font-weight: 700; text-decoration: none; } .products-module .products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 768px) { .products-module .products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 1200px) { .products-module .products.column-4, .products-module .products.column-5, .products-module .products.column-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .banner-module .banner, .slider-module .banner { position: relative; display: grid; min-height: 240px; overflow: hidden; border-radius: var(--k-radius); background: var(--k-ink); color: #fff; } .banner-module .banner > *, .slider-module .banner > * { grid-area: 1 / 1; } .banner .banner-image { z-index: 0; } .banner .banner-image img { width: 100%; height: 100%; object-fit: cover; } .banner .banner-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(12 14 13 / 85%), rgb(12 14 13 / 15%)); } .banner .banner-content { position: relative; z-index: 1; align-self: center; max-width: 600px; padding: clamp(22px, 4vw, 52px); } .banner .entry-title { color: #fff; font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem); letter-spacing: -.03em; } .banner .entry-subtitle { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: var(--k-pill); background: var(--k-yellow); color: var(--k-ink); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .banner .entry-description p { color: #eef0ed; } .banner .btn { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 22px; border-radius: var(--k-pill); background: var(--k-yellow); color: var(--k-ink); font-weight: 800; text-decoration: none; } .banner .overlay-link { position: absolute; inset: 0; z-index: 2; } .banner.light { background: var(--k-canvas); color: var(--k-ink); } .slider-module .swiper-wrapper { display: grid; gap: 16px; } .slider-module .swiper-slide:not(:first-child) { display: none; } .logos-module .site-brands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (min-width: 768px) { .logos-module .site-brands { grid-template-columns: repeat(6, 1fr); } } .logos-module .brand-item a { display: grid; place-items: center; height: 84px; padding: 12px; border-radius: var(--k-radius-sm); background: var(--k-canvas); } .logos-module .brand-item img { max-height: 48px; width: auto; object-fit: contain; mix-blend-mode: multiply; } .coupon-banner { position: relative; padding: 22px; border: 2px dashed var(--k-ink); border-radius: var(--k-radius); background: var(--k-yellow); color: var(--k-ink); } .coupon-banner .entry-coupon strong { font-size: 1.25rem; letter-spacing: .06em; } .coupon-banner .overlay-link { position: absolute; inset: 0; } .module-title .entry-subtitle { color: var(--k-muted); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* Produktbeschreibung: Woo-Überschrift „Beschreibung“ steht schon im Tab; Überschriften im Text kleiner. */ .woocommerce-Tabs-panel--description > h2:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .woocommerce div.product .woocommerce-tabs .panel h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); } .woocommerce div.product .woocommerce-tabs .panel h3 { font-size: 1.1rem; } /* Bewertungs-Slider: Punkte entfallen (Autoplay + Pfeile), Pfeile mit Mindestgröße. */ .k-reviews .rpi-dots-wrap { display: none; } .k-reviews .rpi-ltgt { min-width: 32px; min-height: 32px; } .k-reviews a { display: inline-flex; align-items: center; min-height: 24px; } .k-footer__menu a, .k-breadcrumbs a { display: inline-block; padding-block: 3px; } /* Cookie-Banner (Complianz): Links mit Mindest-Tippfläche. */ .cmplz-cookiebanner .cmplz-links a, .cmplz-cookiebanner .cmplz-documents a { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 4px; } .cmplz-cookiebanner .cmplz-links ul { gap: 4px 12px; } /* ---------- Inhalte aus Elementor-Daten (inc/builder.php) ---------- */ .k-b { display: grid; gap: 28px; } .k-b-section { display: grid; gap: 18px; } .k-b-section--tint, .k-b-section--brand { padding: clamp(18px, 3vw, 32px); border-radius: var(--k-radius); background: var(--k-canvas); } .k-b-section--brand, .k-b-col--brand { background: var(--k-green); color: #fff; } .k-b-section--brand :is(h2, h3, h4, a), .k-b-col--brand :is(h2, h3, h4, a) { color: #fff; } .k-b-section--inner { padding: 0; background: none; } .k-b-row { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: flex-start; } .k-b-col { display: grid; flex: 1 1 100%; gap: 14px; min-width: 0; align-content: start; } .k-b-col--tint, .k-b-col--brand { padding: 20px; border-radius: var(--k-radius); } /* Spalten, die nur einen Button enthalten (z. B. Größenauswahl): mobil zweispaltig, Button füllt die Spalte. */ .k-b-row:has(> .k-b-col > .k-b-btn:only-child) { gap: 10px; } .k-b-col:has(> .k-b-btn:only-child) { flex: 1 1 calc(50% - 10px); } .k-b-col > .k-b-btn:only-child .k-button { width: 100%; } .k-b-col--tint { background: var(--k-canvas); } @media (min-width: 768px) { .k-b-col { flex: 1 1 calc(var(--k-w, 100%) - 28px); } .k-b-row:has(> .k-b-col:nth-child(4)) > .k-b-col { flex-basis: calc(50% - 28px); } } @media (min-width: 1024px) { .k-b-row:has(> .k-b-col:nth-child(4)) > .k-b-col { flex-basis: calc(var(--k-w, 100%) - 28px); } } .k-b-heading { margin: 0; } .k-b-heading a { color: inherit; text-decoration: none; } /* Landingpages: eine reine Überschriften-Zeile direkt unter der H1 ist die Unterzeile der Seite (bleibt H2), kein zweiter grauer Titelblock. */ .k-page__title + .k-landing > .k-b > .k-b-section--tint:first-child:has(> .k-b-row:only-child > .k-b-col:only-child > .k-b-heading:only-child) { margin-top: -18px; padding: 0; background: none; } .k-page__title + .k-landing > .k-b > .k-b-section--tint:first-child .k-b-heading:only-child { color: var(--k-muted); font-family: inherit; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); font-weight: 600; line-height: 1.4; text-align: left !important; } .k-b h2.k-b-heading { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); } .k-b :is(h3, h4, h5, h6).k-b-heading { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); } .k-b-text { max-width: 78ch; } .k-b-text[style*="center"] { margin-inline: auto; } .k-b-text > :first-child { margin-top: 0; } .k-b-text > :last-child { margin-bottom: 0; } .k-b-text ul { padding-left: 1.2em; } .k-b-text li + li { margin-top: .4em; } .k-b-text table { width: 100%; border-collapse: collapse; font-size: .95rem; } .k-b-text :is(td, th) { padding: 8px 10px; border-bottom: 1px solid var(--k-line); text-align: left; vertical-align: top; } .k-b-text :where(table) { display: block; overflow-x: auto; } .k-b-figure { margin: 0; } .k-b-img { display: block; width: 100%; height: auto; border-radius: var(--k-radius-sm); } .k-b-figure[style*="center"] .k-b-img { margin-inline: auto; } .k-b-img--logo { width: auto; max-width: 220px; max-height: 80px; object-fit: contain; border-radius: 0; } .k-b-btn { margin: 0; max-width: 100%; } /* Redaktionelles Rot (#ff0000, 4:1) auf lesbares Shop-Rot heben. */ .k-b [style*="color: #ff0000" i], .k-b [style*="color:#ff0000" i], .k-b [style*="color: #f00;" i], .k-b [style*="rgb(255, 0, 0)"] { color: var(--k-sale) !important; } .k-b-btn .k-button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; } .k-b-divider { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--k-line); } .k-b-html, .k-b-shortcode { min-width: 0; } .k-b-html iframe { max-width: 100%; border: 0; border-radius: var(--k-radius-sm); } .k-b-toggles { display: grid; gap: 10px; } .k-b-toggle { border: 1px solid var(--k-line); border-radius: var(--k-radius-sm); background: var(--k-bg); } .k-b-toggle summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 16px; font-weight: 700; cursor: pointer; list-style: none; } .k-b-toggle summary::-webkit-details-marker { display: none; } .k-b-toggle summary::after { content: "+"; flex: none; font-size: 1.4rem; line-height: 1; color: var(--k-green); } .k-b-toggle[open] summary::after { content: "–"; } .k-b-toggle__body { padding: 0 16px 14px; } .k-b-toggle__body > :first-child { margin-top: 0; } .k-b-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .k-b-gallery__img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--k-radius-sm); } .k-b-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0; padding: 0; list-style: none; } .k-b-logos li { display: flex; align-items: center; justify-content: center; width: 150px; height: 84px; padding: 12px; border: 1px solid var(--k-line); border-radius: var(--k-radius-sm); background: #fff; } .k-b-logos__img { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; } .k-b-tile .k-ptile__link { aspect-ratio: 4 / 3; } .k-b-note { display: grid; gap: 6px; padding: 18px 20px; border-radius: var(--k-radius); background: var(--k-lime-soft); color: var(--k-ink); text-decoration: none; } a.k-b-note:hover { background: #dcebd3; color: var(--k-ink); } .k-b-note__title { font-size: 1.05rem; } .k-b-note__text { color: var(--k-muted); } .k-b-textblock { display: grid; gap: 8px; } .k-b-products ul.products { margin: 0; } .k-b-slides { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 14px; margin: 0; padding: 0; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .k-b-slides::-webkit-scrollbar { display: none; } .k-b-slides.is-multi { grid-auto-columns: 92%; } .k-b-slide { scroll-snap-align: start; min-width: 0; } .k-b-slide__link { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(220px, 34vw, 380px); height: 100%; overflow: hidden; border-radius: var(--k-radius); background: var(--k-ink); color: #fff; text-decoration: none; } .k-b-slide__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .k-b-slide__link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(18 21 19 / 0) 30%, rgb(18 21 19 / 78%)); } .k-b-slide__body { display: grid; gap: 6px; justify-items: start; padding: clamp(18px, 3vw, 32px); } .k-b-slide__kicker { padding: 3px 10px; border-radius: var(--k-pill); background: var(--k-yellow); color: var(--k-ink); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .k-b-slide__title { max-width: 26ch; font-size: clamp(1.35rem, 1rem + 1.6vw, 2.2rem); font-weight: 900; line-height: 1.1; } .k-b-slide__text { max-width: 46ch; color: rgb(255 255 255 / 88%); } .k-b-slide__cta { margin-top: 6px; pointer-events: none; } .k-b-slide__link:hover .k-b-slide__img { transform: scale(1.03); transition: transform .4s ease; } /* Desktop: Banner im Seitenverhältnis des Bildes, volle Breite der Spalte. Steht nach der Grundregel, sonst erzwingt min-height (380 px) über das Seitenverhältnis eine Mindestbreite von 1.621 px und die Seite läuft über. */ @media (min-width: 1024px) { .k-b-slides, .k-b-slides.is-multi { grid-auto-flow: row; grid-auto-columns: minmax(0, 1fr); overflow: visible; } .k-b-slide__link { min-height: 0; aspect-ratio: var(--k-ar, 16 / 5); } } .k-b-iconbox h3 { margin: 0 0 6px; font-size: 1.1rem; } .k-landing { display: grid; gap: 28px; } .k-prose .k-b { gap: 22px; } .k-prose .k-b-text { max-width: none; } @media (max-width: 767.98px) { .k-hide-m { display: none !important; } } @media (min-width: 768px) and (max-width: 1023.98px) { .k-hide-t { display: none !important; } } @media (min-width: 1024px) { .k-hide-d { display: none !important; } } .k-b-article { max-width: 80ch; } .k-b-article h1 { margin: 0 0 .5em; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); line-height: 1.15; } .k-b-article header p { font-size: 1.1rem; } .k-b-article figure { margin: 1.4em 0; } .k-b-article figure img { display: block; width: 100%; height: auto; border-radius: var(--k-radius); } .k-b-article figcaption { margin-top: .5em; color: var(--k-muted); font-size: .9rem; } .k-b-article section + section { margin-top: 1.8em; } .k-b-article [class*="cta-box"] { padding: clamp(18px, 3vw, 28px); border-radius: var(--k-radius); background: var(--k-lime-soft); } .k-b-article [class*="related"] { padding-top: 1.2em; border-top: 1px solid var(--k-line); } .k-b-article [class*="related"] ul { padding-left: 1.1em; } .k-b-article [class*="highlight"] { font-weight: 700; } .k-b-article table { width: 100%; border-collapse: collapse; } .k-b-article :is(td, th) { padding: 8px 10px; border-bottom: 1px solid var(--k-line); text-align: left; vertical-align: top; } /* Kontaktformular (Toolbox-Modul, Markup .klk-*) */ .k-b-form { width: 100%; } .klk-form { position: relative; padding: clamp(20px, 4vw, 40px); border-radius: var(--k-radius); background: var(--k-canvas); } .klk-form__title { margin: 0 0 4px; font-size: clamp(1.4rem, 3vw, 1.9rem); } .klk-form__hint, .klk-form__privacy { margin: 0 0 18px; color: var(--k-muted); font-size: .9rem; } .klk-form__privacy { margin: 18px 0 0; } .klk-form__grid { display: grid; gap: 16px; } @media (min-width: 768px) { .klk-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .klk-field:not(.klk-field--half) { grid-column: 1 / -1; } } .klk-field { display: grid; gap: 6px; margin: 0; } .klk-field label { font-weight: 600; font-size: .9rem; } .klk-field input, .klk-field textarea, .klk-field select { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #cfd2cc; border-radius: var(--k-radius-sm); background: #fff; font-size: 16px; } .klk-field textarea { min-height: 150px; resize: vertical; } .klk-field input:focus, .klk-field textarea:focus, .klk-field select:focus { outline: none; border-color: var(--k-ink); box-shadow: 0 0 0 3px rgb(252 185 0 / 50%); } .klk-field--error input, .klk-field--error textarea, .klk-field--error select { border-color: var(--k-sale); } .klk-field__error { color: var(--k-sale); font-size: .85rem; font-weight: 600; } .klk-form__submit { margin: 20px 0 0; } .klk-form__submit .button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border: 0; border-radius: var(--k-pill); background: var(--k-green); color: #fff; font-weight: 800; cursor: pointer; } .klk-form__submit .button:hover { filter: brightness(1.08); } .klk-form__submit .button:focus-visible { outline: none; box-shadow: var(--k-focus); } .klk-notice { margin: 0 0 16px; padding: 14px 18px; border-radius: var(--k-radius-sm); font-weight: 600; } .klk-notice--ok { background: var(--k-lime-soft); color: var(--k-ok); } .klk-notice--error { background: #fdecec; color: var(--k-sale); } /* ========================================================================== Classic v0.4: Aufbau der bisherigen Startseite, moderner umgesetzt ========================================================================== */ /* ========================================================================== Design v0.5 nach Entwurf: weiß, schwarze kräftige Überschriften, KINDLINGER-Blau als Akzent, kaum Rundungen ========================================================================== */ /* Überschriften */ h1, h2, h3, h4, .k-section-head__title { color: var(--k-ink); } .k-display, .k-stage__title, .k-band__title { margin: 0 0 20px; color: var(--k-ink); font-family: var(--k-font-display); font-weight: 800; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); line-height: 1.05; letter-spacing: -.01em; } /* Buttons */ .k-button--navy { background: var(--k-navy); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%); } .k-button--navy:hover { background: var(--k-navy-2); color: #fff; } .k-button--white { background: #fff; color: var(--k-navy); } .k-button--white:hover { background: var(--k-canvas); color: var(--k-navy-2); } .k-button .k-icon { width: 20px; height: 20px; transition: transform .15s; } .k-button:hover .k-icon--arrow { transform: translateX(3px); } /* Topbar */ .k-topbar { background: var(--k-navy); } .k-topbar__inner { justify-content: center; min-height: 34px; } .k-topbar__msg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: 0; padding-block: 6px; font-size: .8125rem; line-height: 1.3; text-align: center; } .k-topbar__msg .k-icon { width: 16px; height: 16px; stroke-width: 2; } .k-topbar__sep { opacity: .75; } @media (max-width: 599px) { .k-topbar__msg { font-size: .75rem; } .k-topbar__sep { display: none; } .k-topbar__msg span:last-child { flex-basis: 100%; } .k-topbar__msg .k-icon { display: none; } } /* Kopfzeile */ .custom-logo { max-height: 40px; } .k-wordmark, .k-wordmark:hover { color: var(--k-navy); } .k-search__input { height: 44px; padding: 0 16px 0 46px; border: 1px solid var(--k-line); border-radius: 8px; background: var(--k-canvas); color: var(--k-ink); } .k-search__input:focus { border-color: var(--k-navy); background: #fff; box-shadow: 0 0 0 3px rgb(15 61 119 / 18%); } .k-search__submit { top: 0; right: auto; bottom: 0; left: 4px; width: 40px; background: transparent; color: var(--k-ink); } .k-search__submit:hover { background: transparent; color: var(--k-navy); } .k-search__submit .k-icon { width: 20px; height: 20px; stroke-width: 2; } .k-header-action:hover { background: transparent; color: var(--k-navy); } .k-cart-count { background: var(--k-navy); color: #fff; } .k-cart-count[data-count="0"] { display: none; } @media (min-width: 1024px) { .k-header__bar { grid-template-columns: auto minmax(360px, 1fr) auto; gap: 36px; padding-block: 14px; } .custom-logo { max-height: 56px; } .k-search { max-width: 760px; } .k-search__input { height: 46px; } .k-header-action { min-width: 76px; gap: 4px; font-size: .78rem; font-weight: 500; } .k-header-action .k-icon { width: 26px; height: 26px; stroke-width: 1.5; } .k-cart-count { top: -4px; right: 18px; min-width: 18px; height: 18px; line-height: 18px; font-size: .68rem; } .k-header.is-stuck .k-header__bar { padding-block: 8px; } } /* Sortimentsleiste: weiß, dunkle Schrift, Pfeil bei Untermenü */ @media (min-width: 1024px) { .k-nav { background: #fff; border-top: 1px solid var(--k-line); border-bottom: 1px solid var(--k-line); } .k-menu > li > a { display: flex; align-items: center; gap: 5px; padding: 12px 2px; color: var(--k-ink); font-weight: 600; font-size: .875rem; } .k-menu > li.menu-item-has-children > a::before { content: ""; order: 2; width: 6px; height: 6px; margin: -3px 0 0 3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s; } .k-menu > li:hover > a::before, .k-menu > li:focus-within > a::before { transform: rotate(-135deg); margin-top: 3px; } .k-menu > li > a::after { bottom: -1px; height: 2px; border-radius: 0; background: var(--k-navy); } .k-menu > li > a:hover { color: var(--k-navy); } .k-menu > li > .sub-menu { border-top: 1px solid var(--k-line); border-radius: 0 0 var(--k-radius) var(--k-radius); } .k-menu > li > .sub-menu > li > a:hover { color: var(--k-navy); } .k-menu > li > .sub-menu > li > a:has(.k-menu__icon) { display: flex; align-items: center; gap: 10px; } .k-menu__icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: var(--k-radius); background: transparent; color: var(--k-ink); transition: background-color .15s, color .15s; } .k-menu__icon svg { width: 22px; height: 22px; stroke-width: 2; } /* Icon färbt sich auch beim Berühren der Unterkategorien darunter. */ .k-menu > li > .sub-menu > li:hover > a .k-menu__icon, .k-menu > li > .sub-menu > li:focus-within > a .k-menu__icon { background: var(--k-c); color: var(--k-c-ink); } /* Unterkategorien: dunkle Schrift, beim Berühren Fläche in der Sortimentsfarbe mit weißer Schrift. */ .k-menu .sub-menu .sub-menu a { margin-inline: -8px; padding: 4px 8px; border-radius: var(--k-radius-sm); color: var(--k-ink); transition: background-color .15s, color .15s; } .k-menu .sub-menu .sub-menu a:hover, .k-menu .sub-menu .sub-menu a:focus-visible { background: var(--k-c); color: var(--k-c-ink); text-decoration: none; } } @media (max-width: 1023.98px) { .k-menu__icon { display: none; } } @media (min-width: 1024px) and (max-width: 1199px) { .k-menu > li > a { font-size: .8rem; } } /* Sortimentsfarben aus dem Logo-Streifen: der Menüpunkt färbt sich beim Drüberfahren, die Schrift wird immer weiß (Vorgabe Raphael). */ .k-menu > li { --k-c: var(--k-navy); --k-c-ink: #fff; } .k-menu > li.k-c-blue { --k-c: #463a82; } .k-menu > li.k-c-green { --k-c: #8cb414; } .k-menu > li.k-c-yellow { --k-c: #f6bf0a; } .k-menu > li.k-c-pink { --k-c: #e30d4b; } @media (min-width: 1024px) { .k-menu > li { padding-block: 5px; } .k-menu > li > a { padding: 8px 10px; border-radius: var(--k-radius); transition: background-color .15s, color .15s; } .k-menu > li > a::after { display: none; } .k-menu > li:hover > a, .k-menu > li:focus-within > a, .k-menu > li > a:hover { background: var(--k-c); color: var(--k-c-ink); } } @media (min-width: 1024px) and (max-width: 1199px) { .k-menu > li > a { padding-inline: 5px; } } @media (max-width: 1023.98px) { .k-menu > li > a:active { background: var(--k-c); color: var(--k-c-ink); } } @media (max-width: 1023.98px) { .k-nav__head .k-wordmark__claim { color: #fff; } .k-nav__head .custom-logo { max-height: 34px; padding: 4px; border-radius: var(--k-radius-sm); background: #fff; } } /* Bühne */ .k-stage { position: relative; display: grid; align-items: center; overflow: hidden; min-height: clamp(400px, 44vw, 640px); background: var(--k-navy-2); color: #fff; isolation: isolate; } .k-stage__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } /* 0.5.39: Schleier 20 % Schwarz über das ganze Bild, links etwas dichter für die Lesbarkeit. */ .k-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(0 0 0 / 32%) 0%, rgb(0 0 0 / 12%) 38%, rgb(0 0 0 / 0%) 55%), rgb(0 0 0 / 20%); } .k-stage__content { width: 100%; padding-block: 48px; } .k-stage__title span { display: block; } .k-stage__title { max-width: 12ch; margin-bottom: 18px; color: #fff; font-style: italic; font-weight: 500; font-size: clamp(2.4rem, 1rem + 4.6vw, 5rem); line-height: .98; text-shadow: 0 2px 18px rgb(0 0 0 / 28%); } .k-stage__text { max-width: 30ch; margin: 0 0 26px; color: #fff; font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem); line-height: 1.35; text-shadow: 0 1px 10px rgb(0 0 0 / 35%); } .k-stage__actions { margin: 0; } .k-stage__actions .k-button { min-height: 52px; padding-inline: 26px; font-size: 1.05rem; box-shadow: none; } @media (max-width: 767px) { .k-stage { align-items: end; min-height: 460px; } .k-stage::before { background: linear-gradient(0deg, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 0%) 55%), rgb(0 0 0 / 20%); } .k-stage__content { padding-block: 32px; } } /* Sortimente */ .k-sortiment { padding-top: clamp(32px, 4vw, 48px); } .k-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .k-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 14px; } } .k-tile__link { display: block; color: var(--k-ink); text-decoration: none; } .k-tile__link:hover { color: var(--k-navy); } .k-tile__media { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 2px; background: var(--k-canvas); } .k-tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .k-tile__link:hover .k-tile__img { transform: scale(1.04); } .k-tile__title { display: block; margin-top: 10px; font-weight: 700; font-size: clamp(.95rem, .9rem + .3vw, 1.125rem); line-height: 1.25; letter-spacing: -.01em; } /* Metall-Band */ .k-band { position: relative; overflow: hidden; margin-top: clamp(32px, 4vw, 48px); background: var(--k-navy); color: #fff; isolation: isolate; } .k-band__img { position: absolute; top: 0; right: 0; z-index: -2; width: 62%; height: 100%; object-fit: cover; } .k-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--k-navy) 0%, var(--k-navy) 38%, rgb(15 61 119 / 70%) 52%, rgb(15 61 119 / 0%) 78%); } .k-band__content { padding-block: clamp(32px, 4vw, 44px); } .k-band__title span { display: block; } .k-band__title { max-width: 52%; margin-bottom: 10px; color: #fff; font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.75rem); } .k-band__text { margin: 0 0 22px; color: #fff; font-size: clamp(1rem, .95rem + .4vw, 1.3rem); } .k-band__actions { margin: 0; } @media (max-width: 767px) { .k-band__title { max-width: none; } .k-band__img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; } .k-band::before { display: none; } .k-band { display: flex; flex-direction: column-reverse; } } /* Akzente auf Blau statt Gelb (Entwurf ohne Gelb) */ ::selection { background: var(--k-navy); color: #fff; } .k-button--yellow, .banner .btn { background: var(--k-navy); color: #fff; } .k-button--yellow:hover, .banner .btn:hover { background: var(--k-navy-2); color: #fff; } .k-footer .k-button--yellow, .k-contact .k-button--yellow, .k-service--metal .k-button--yellow { background: #fff; color: var(--k-navy); } .k-footer .k-button--yellow:hover, .k-contact .k-button--yellow:hover, .k-service--metal .k-button--yellow:hover { background: var(--k-canvas); color: var(--k-navy-2); } .k-hero__kicker, .banner .entry-subtitle, .k-b-slide__kicker { background: var(--k-navy); color: #fff; } .woocommerce span.onsale, span.onsale, .woocommerce ul.products li.product .onsale { background: var(--k-sale); color: #fff; } .k-ptile__arrow { background: #fff; color: var(--k-navy); } .k-trust__item .k-icon, .k-svc__item > .k-icon { background: var(--k-navy); color: #fff; } .k-contact .k-eyebrow, .k-contact__item .k-icon, .k-service--metal .k-eyebrow { color: #fff; } .k-footer a:hover { color: #fff; text-decoration: underline; } .k-footer__usp-list .k-icon { background: rgb(255 255 255 / 12%); color: #fff; } .k-footer .k-wordmark__claim { color: #fff; } .k-footer .custom-logo { max-height: 48px; } .k-sortiment + .k-band { margin-top: 0; } .home .k-footer { margin-top: 0; } /* Marken */ .k-brandrow { padding-block: clamp(32px, 4vw, 48px); } .k-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .k-logos li { display: flex; border-left: 1px solid var(--k-line); } .k-logos li:nth-child(4n+1) { border-left: 0; } .k-logos__item { display: grid; place-items: center; width: 100%; min-height: 64px; padding: 8px 12px; } .k-logos__item img { max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; transition: opacity .15s; } .k-logos__item:hover img { opacity: .75; } @media (max-width: 767px) { .k-logos li:nth-child(n+5) { border-top: 1px solid var(--k-line); } } @media (min-width: 768px) { .k-logos { grid-template-columns: repeat(8, minmax(0, 1fr)); } .k-logos li:nth-child(4n+1) { border-left: 1px solid var(--k-line); } .k-logos li:first-child { border-left: 0; } .k-logos__item { min-height: 72px; padding: 8px 16px; } .k-logos__item img { max-height: 46px; } } /* Produktreihen */ .k-row--tint { background: var(--k-canvas); } .k-row + .k-row { margin-top: 0; } /* Beratung & Kontakt */ .k-contact { padding-block: clamp(28px, 4.5vw, 56px); } .k-contact__inner { display: grid; gap: 24px; padding: clamp(22px, 4vw, 48px); border-radius: 18px; background: radial-gradient(120% 140% at 100% 0%, #2a5590 0%, var(--k-navy) 55%, var(--k-navy-2) 100%); color: #e6ecf5; } .k-contact .k-eyebrow { color: var(--k-yellow); } .k-contact__title { margin: 0 0 10px; color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); } .k-contact__text p:last-child { max-width: 52ch; margin: 0; } .k-contact__actions { display: grid; gap: 10px; align-content: center; } .k-contact__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--k-radius); background: rgb(255 255 255 / 9%); color: #fff; font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%); } a.k-contact__item:hover { background: rgb(255 255 255 / 16%); color: #fff; } .k-contact__item small { display: block; color: #c3cddc; font-weight: 500; font-size: .75rem; } .k-contact__item .k-icon { width: 22px; height: 22px; color: var(--k-yellow); } .k-contact__actions .k-button { justify-self: start; margin-top: 6px; } @media (min-width: 900px) { .k-contact__inner { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 48px; } } /* Services */ .k-svc { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } @media (min-width: 600px) { .k-svc { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .k-svc { grid-template-columns: repeat(4, 1fr); gap: 16px; } } .k-svc__item { padding: 20px; border-radius: var(--k-radius); background: var(--k-canvas); } .k-svc__item > .k-icon { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--k-yellow); color: var(--k-ink); stroke-width: 1.9; } .k-svc__title { margin: 12px 0 6px; color: var(--k-navy); font-size: 1.05rem; } .k-svc__item p { margin: 0; color: var(--k-muted); font-size: .9rem; } /* Footer */ .k-footer__title--spaced { margin-top: 20px; } .k-footer__contact { margin-top: 0; } .k-footer__hours li { color: #fff; } .k-footer__cta { margin: 18px 0 0; } .k-footer .k-footer__cta .k-button { color: var(--k-ink); } .k-footer .k-footer__cta .k-button:hover { color: var(--k-ink); } @media (min-width: 768px) { .k-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { .k-tile__link, .k-tile__img, .k-tile__cta .k-icon { transition: none; } .k-tile__link:hover { transform: none; } .k-tile__link:hover .k-tile__img { transform: none; } } .k-contact + .k-section { padding-top: 8px; } /* Feinschliff Startseite */ .k-tile__link:focus-visible, .k-logos__item:focus-visible, .k-stage .k-button:focus-visible, .k-band .k-button:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 3px; } .k-stage .k-button:focus-visible, .k-band .k-button:focus-visible { outline-color: #fff; } .k-tile__link:hover .k-tile__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .k-tile__media { position: relative; } .k-tile__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 5%); pointer-events: none; } .k-logos__item img { max-width: min(100%, 128px); } .k-sortiment { scroll-margin-top: 150px; } .k-display { text-wrap: balance; } .k-stage__text, .k-band__text { text-wrap: pretty; } .k-footer .custom-logo-link { display: inline-block; padding: 6px 8px; border-radius: var(--k-radius-sm); background: #fff; } .k-footer .custom-logo { max-height: 44px; } @media (min-width: 1440px) { .k-stage__content { padding-block: 64px; } } @media (max-width: 767px) { .k-display { margin-bottom: 16px; font-size: clamp(1.5rem, 1.1rem + 2vw, 1.9rem); } .k-stage__title { font-size: clamp(2.3rem, 1.4rem + 4.6vw, 3rem); } .k-stage__actions .k-button { width: 100%; } .k-band__actions .k-button { width: 100%; } .custom-logo { max-height: 36px; } } /* Verfügbarkeit + Lieferzeit (Produktseite) */ .k-availability { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 16px; font-size: .9375rem; } .k-availability:empty { display: none; } .k-stock { font-weight: 700; } .k-stock::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: middle; } .k-stock--instock { color: #1e7b34; } .k-stock--outofstock { color: #b3261e; } .k-stock--onbackorder { color: #8a5a00; } .k-delivery { color: var(--k-ink, #111418); } .k-delivery[hidden] { display: none; } /* Startseite: Service-Leiste unter der Bühne */ .k-servicebar { padding: 0; border-bottom: 1px solid var(--k-line); background: #fff; } .k-servicebar__list { display: grid; grid-template-columns: 1fr; margin-block: 0; padding-block: 8px; list-style: none; } .k-servicebar__item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 0; color: var(--k-ink, #111418); line-height: 1.3; text-decoration: none; } .k-servicebar__item strong { display: block; font-size: .9375rem; color: var(--k-ink, #111418); } .k-servicebar__item > span { font-size: .875rem; color: #4a5361; } .k-servicebar__item .k-icon { flex: none; width: 36px; height: 36px; padding: 7px; border-radius: 50%; background: #eaf0f7; color: var(--k-navy); } a.k-servicebar__item:hover strong { text-decoration: underline; } a.k-servicebar__item:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 2px; } @media (max-width: 599px) { .k-servicebar__list li + li { border-top: 1px solid var(--k-line); } } @media (min-width: 600px) { .k-servicebar__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-block: 14px; } .k-servicebar__list li { display: flex; justify-content: center; } } @media (min-width: 600px) and (max-width: 1023.98px) { .k-servicebar__list:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .k-servicebar__list:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .k-servicebar__item .klw-icon { flex: none; width: 36px; height: 36px; padding: 6px; border-radius: 50%; background: #e9f9ef; color: #1a9e4b; } .k-whatsapp-link { margin: 4px 0 16px; } /* Marken: Beratungs-Hinweis */ .k-brandrow__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin: 28px 0 0; font-weight: 700; text-align: center; } @media (max-width: 767px) { .k-brandrow__cta .k-button { width: 100%; } } /* Tippflächen im Footer (mind. 24 px) */ .k-footer__contact a { min-height: 32px; } .k-footer__menu a { min-height: 24px; } /* Warenkorb: Vorschaubild darf in der Tabelle nicht auf 0 schrumpfen; mobil als Karten */ .woocommerce table.cart img { max-width: none; height: auto; } .woocommerce table.cart td.product-thumbnail { width: 104px; } @media (max-width: 767px) { .woocommerce table.cart { display: block; } .woocommerce table.cart thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .woocommerce table.cart tbody { display: block; } .woocommerce table.cart tr.cart_item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "thumb name remove" "thumb qty sub"; gap: 10px 12px; align-items: center; padding: 14px; border-bottom: 1px solid var(--k-line); } /* Einzelpreis mobil ausblenden: Zwischensumme steht neben der Menge (sonst Preis doppelt) */ .woocommerce table.cart tr.cart_item td.product-price { display: none; } .woocommerce table.cart td.product-remove { justify-self: end; text-align: right; } .woocommerce table.cart td.product-remove a.remove { margin: 0; } .woocommerce table.cart td.product-subtotal { justify-self: end; white-space: nowrap; } .woocommerce table.cart td.product-subtotal del { display: block; margin: 0; font-size: .8125rem; } .woocommerce table.cart td.product-quantity .quantity { margin: 0; } /* Summen (Warenkorb + Kasse) mobil: Beschriftung nicht mitten im Wort umbrechen, weniger Doppelrand */ .woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout-review-order { padding: 12px; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { word-break: normal; overflow-wrap: normal; hyphens: manual; } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td, .woocommerce .cart_totals table.shop_table th, .woocommerce .cart_totals table.shop_table td { padding: 12px 8px; } .woocommerce-checkout-review-order-table { table-layout: fixed; width: 100%; } .woocommerce-checkout-review-order-table thead th { font-size: .875rem; } .woocommerce-checkout-review-order-table th:first-child, .woocommerce-checkout-review-order-table td:first-child { width: 55%; } .woocommerce-checkout-review-order-table td.product-name { overflow-wrap: anywhere; } .woocommerce table.cart tr.cart_item td { display: block; width: auto; padding: 0; border: 0; text-align: left; } .woocommerce table.cart td.product-thumbnail { grid-area: thumb; align-self: start; } .woocommerce table.cart td.product-name { grid-area: name; font-weight: 700; line-height: 1.3; } .woocommerce table.cart td.product-remove { grid-area: remove; align-self: start; } .woocommerce table.cart td.product-price { grid-area: price; color: var(--k-muted); font-size: .875rem; } .woocommerce table.cart td.product-quantity { grid-area: qty; } .woocommerce table.cart td.product-subtotal { grid-area: sub; font-weight: 800; text-align: right; } .woocommerce table.cart td.product-price::before, .woocommerce table.cart td.product-subtotal::before { content: none; } .woocommerce table.cart tr:not(.cart_item) { display: block; } .woocommerce table.cart td.actions { display: block; padding: 14px; } .woocommerce table.cart td.actions .coupon { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .woocommerce table.cart td.actions .coupon .input-text, .woocommerce table.cart td.actions .button { width: 100%; margin: 0; } } /* Startseite: Produktempfehlungen */ .k-picks .k-section-head { margin-bottom: 0; } .k-picks .k-display { margin-bottom: 20px; } @media (min-width: 1024px) { .k-picks .k-rail__nav { top: -68px; } } /* Produktgalerie ohne Slider: statisch, sofort sichtbar, kein Layoutsprung. Hauptbild oben, weitere Bilder als Vorschaureihe (Klick öffnet Lightbox). WooCommerce setzt bis zum (von FastPixel verzögerten) Script-Start opacity 0. */ .woocommerce div.product div.images.woocommerce-product-gallery { opacity: 1 !important; } .woocommerce div.product div.images .woocommerce-product-gallery__wrapper { display: flex; flex-wrap: wrap; gap: 10px; } .woocommerce div.product div.images .woocommerce-product-gallery__image:first-child { flex: 0 0 100%; } .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) { flex: 0 0 72px; width: 72px; display: block; } .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--k-line); border-radius: var(--k-radius-sm); background: #fff; } .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) a:hover img { border-color: var(--k-navy); } .woocommerce div.product div.images .woocommerce-product-gallery__image img { height: auto; } .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) img { height: 72px; } /* Galerie-Pfeile (navigation.js): Hauptbild wechseln, Vorschaubild macht sich zum Hauptbild. */ .woocommerce div.product div.images .woocommerce-product-gallery__image:first-child { position: relative; } .k-gallery-nav { position: absolute; inset: 50% 0 auto; display: flex; justify-content: space-between; padding: 0 10px; pointer-events: none; transform: translateY(-50%); } .k-gallery-nav button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--k-line); border-radius: 50%; background: rgba(255,255,255,.92); color: var(--k-ink); box-shadow: var(--k-shadow); cursor: pointer; pointer-events: auto; transition: background-color .15s, color .15s; } .k-gallery-nav button:hover, .k-gallery-nav button:focus-visible { background: var(--k-navy); border-color: var(--k-navy); color: #fff; } .k-gallery-nav svg { width: 22px; height: 22px; } /* Vollbild-Galerie: schwebende Widgets (WhatsApp, Barrierefreiheit, Kaufleiste) ausblenden. */ body:has(.pswp--open) :is(.ht-ctc, .ht_ctc_chat_style, #ht-ctc-chat, .uwy, .userway_buttons_wrapper, [class*="userway"], .k-buybar) { display: none !important; } /* Logo größer wie auf kindlinger.at */ .k-header__bar .custom-logo { max-height: 40px; max-width: 100%; } @media (min-width: 1024px) { .k-header__bar .custom-logo { max-height: 72px; max-width: none; } } /* Warenkorbsumme im Header */ .k-cart-total { display: none; font-weight: 700; color: var(--k-navy); white-space: nowrap; } .k-cart-total .amount { color: inherit; } @media (min-width: 1024px) { .k-cart-total:not([hidden]) { display: block; } .k-cart-link:has(.k-cart-total:not([hidden])) .k-header-action__label { display: none; } } /* Mini-Warenkorb (Seitenleiste) */ .k-minicart { position: fixed; inset: 0; z-index: 1000; } .k-minicart[hidden] { display: none; } /* Unsichtbare Klickfläche: Klick außerhalb schließt, die Seite wird nicht abgedunkelt. */ .k-minicart__backdrop { position: absolute; inset: 0; background: transparent; } /* Dropdown direkt unter dem Warenkorb-Button (Position aus navigation.js), nie am Rand abgeschnitten. */ .k-minicart__panel { position: absolute; top: var(--k-mc-top, 72px); right: var(--k-mc-right, 16px); display: flex; flex-direction: column; width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - var(--k-mc-top, 72px) - 16px); max-height: calc(100dvh - var(--k-mc-top, 72px) - 16px); border: 1px solid var(--k-line); border-radius: var(--k-radius); background: #fff; box-shadow: var(--k-shadow-lg); overflow-y: auto; overscroll-behavior: contain; } .k-minicart__caret { position: absolute; z-index: 2; top: calc(var(--k-mc-top, 72px) - 7px); left: calc(var(--k-mc-caret, 90vw) - 7px); width: 14px; height: 14px; border-top: 1px solid var(--k-line); border-left: 1px solid var(--k-line); background: #fff; transform: rotate(45deg); } .k-minicart__head { border-radius: var(--k-radius) var(--k-radius) 0 0; } .k-minicart__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--k-line); background: #fff; } .k-minicart__title { margin: 0; font-family: var(--k-font-display); font-weight: 800; font-size: 1.15rem; } .k-minicart__ship { margin: 12px 16px 0; padding: 10px 12px; border-left: 4px solid var(--k-navy); background: #f3f8fc; font-size: .875rem; line-height: 1.45; } .k-minicart__ship[hidden] { display: none; } .k-minicart .widget_shopping_cart_content { display: flex; flex: 1; flex-direction: column; padding: 8px 16px 16px; } #k-minicart .woocommerce-mini-cart { margin: 0; padding: 0; list-style: none; } #k-minicart .woocommerce-mini-cart-item { position: relative; display: block; min-height: 90px; padding: 12px 36px 12px 76px; border-bottom: 1px solid var(--k-line); font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; } /* Bild fest links (auch wenn ein Optimierer es in legt), Text immer rechts daneben. */ #k-minicart .woocommerce-mini-cart-item > a:not(.remove) { display: block; color: var(--k-ink); font-weight: 600; text-decoration: none; } #k-minicart .woocommerce-mini-cart-item > a:not(.remove):hover { text-decoration: underline; } #k-minicart .woocommerce-mini-cart-item :is(img, picture) { position: absolute; top: 12px; left: 0; width: 64px !important; height: 64px !important; max-width: none; margin: 0 !important; object-fit: contain; border: 1px solid var(--k-line); border-radius: var(--k-radius-sm); background: #fff; float: none !important; } #k-minicart .woocommerce-mini-cart-item picture img { position: static; border: 0; } #k-minicart .woocommerce-mini-cart-item .quantity { display: block; margin-top: 4px; color: var(--k-muted); } #k-minicart .woocommerce-mini-cart-item .variation { margin: 4px 0 0; font-size: .8rem; color: var(--k-muted); } #k-minicart .woocommerce-mini-cart-item .variation :is(dt, dd, p) { display: inline; margin: 0; } #k-minicart .woocommerce-mini-cart-item .variation dd { margin-left: 4px; } #k-minicart .woocommerce-mini-cart-item a.remove { position: absolute; top: 10px; right: 0; left: auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--k-muted) !important; font-size: 1.25rem; line-height: 1; text-decoration: none; } #k-minicart .woocommerce-mini-cart-item a.remove:hover { background: var(--k-canvas); color: var(--k-sale) !important; } .k-minicart .woocommerce-mini-cart__total { display: flex; justify-content: space-between; margin: 16px 0 12px; font-size: 1.05rem; } .k-minicart .woocommerce-mini-cart__buttons { display: grid; gap: 8px; margin: 0; } .k-minicart .woocommerce-mini-cart__buttons .button { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; border-radius: var(--k-radius-sm); background: #fff; color: var(--k-navy); box-shadow: inset 0 0 0 1px var(--k-navy); font-weight: 700; text-decoration: none; } .k-minicart .woocommerce-mini-cart__buttons .button.checkout { background: var(--k-navy); color: #fff; box-shadow: none; } .k-minicart .woocommerce-mini-cart__empty-message { margin: 24px 0; color: var(--k-muted); text-align: center; } body.k-minicart-open { overflow: hidden; } /* Live-Suchvorschläge */ .k-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 900; max-height: min(70vh, 520px); overflow-y: auto; padding: 6px; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: #fff; box-shadow: var(--k-shadow-lg); } .k-suggest[hidden] { display: none; } .k-suggest__cat { display: inline-flex; align-items: center; min-height: 32px; margin: 4px; padding: 4px 12px; border-radius: 16px; background: var(--k-canvas); color: var(--k-navy); font-size: .85rem; font-weight: 600; text-decoration: none; } .k-suggest__item { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; min-height: 56px; padding: 4px 8px; border-radius: var(--k-radius-sm); color: var(--k-ink); text-decoration: none; } .k-suggest__item img, .k-suggest__noimg { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--k-line); border-radius: var(--k-radius-sm); background: #fff; } .k-suggest__price del { display: block; color: var(--k-muted); font-size: .78rem; font-weight: 400; text-align: right; } .k-suggest__price ins { color: var(--k-sale, var(--k-navy)); text-decoration: none; } .k-suggest__name { font-size: .9rem; line-height: 1.3; } .k-suggest__price { font-weight: 700; font-size: .9rem; color: var(--k-navy); white-space: nowrap; } .k-suggest [role=option]:hover, .k-suggest [aria-selected=true] { background: #eef3f9; } .k-suggest__all { display: block; width: 100%; min-height: 44px; margin-top: 4px; border: 0; border-top: 1px solid var(--k-line); background: transparent; color: var(--k-navy); font-weight: 700; cursor: pointer; } .k-suggest__empty { margin: 0; padding: 12px; color: var(--k-muted); font-size: .9rem; } @media (max-width: 599px) { .k-suggest__item { grid-template-columns: 40px 1fr; } .k-suggest__item img, .k-suggest__noimg { width: 40px; height: 40px; } .k-suggest__price { grid-column: 2; } } /* Filter mit nur einer Option und Tab-Leiste mit nur einem Tab ausblenden */ .k-shop__filters .k-filter:has(.woocommerce-widget-layered-nav-list > li:only-child:not(.chosen)) { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs:has(> li:only-child) { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs:has(> li:only-child) + .panel { padding-top: 0; } /* Streichpreis in Warenkorb, Mini-Warenkorb und Kasse */ :is(.woocommerce-cart-form, .k-minicart, .woocommerce-checkout-review-order-table) del { margin-right: 4px; color: var(--k-muted); font-weight: 400; } :is(.woocommerce-cart-form, .k-minicart, .woocommerce-checkout-review-order-table) ins { text-decoration: none; color: var(--k-sale, inherit); font-weight: 700; } /* Topbar: dezente Google-Bewertung */ .k-topbar__rating { display: inline-flex; flex: none; align-items: center; gap: 6px; padding-block: 6px; color: #fff; font-size: .8125rem; text-decoration: none; white-space: nowrap; } .k-topbar__rating:hover span:last-child { text-decoration: underline; } .k-topbar__stars { --k-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.8 2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3-4.6-4.4 6.3-.9z'/%3E%3C/svg%3E"); display: inline-block; width: 70px; height: 14px; background: linear-gradient(90deg, #fbbc04 calc(var(--k-rating) / 5 * 100%), rgba(255,255,255,.35) 0); -webkit-mask: var(--k-star) 0 0 / 14px 14px repeat-x; mask: var(--k-star) 0 0 / 14px 14px repeat-x; } @media (max-width: 767px) { .k-topbar__inner { flex-wrap: wrap; gap: 0 16px; } .k-topbar__rating { font-size: .75rem; padding-block: 0 6px; } } /* Warenkorb und Kasse: Bewertungen oben, EU-Gewährleistungshinweis */ .k-reviews--cart { margin: 0 0 20px; min-width: 0; } .k-reviews--cart .grw-review-inner :is(.wp-google-name, .grw-img-wrap) { display: none !important; } .k-reviews--cart .rpi-stars { --star-color: #fbbc04; } /* Kasse: Bewertungen unter dem Formular, volle Breite, auch mobil */ .k-checkout-reviews { clear: both; width: 100%; margin: 40px 0 0; padding: 28px 0 0; border-top: 1px solid var(--k-line); } .k-checkout-reviews__title { margin: 0 0 16px; font-size: 1.25rem; } .k-reviews--checkout { min-width: 0; } /* Kasse bleibt in Lesebreite (800 px), nur die Bewertungen nutzen die ganze Inhaltsbreite. */ .k-woo-page .k-b-text:has(.k-checkout-reviews) { max-width: none; } .k-woo-page .k-b-text:has(.k-checkout-reviews) > :not(.woocommerce), .k-woo-page .k-b-text:has(.k-checkout-reviews) > .woocommerce > :not(.k-checkout-reviews) { max-width: 800px; } .k-reviews--checkout .klr { margin-bottom: 0; } .k-reviews--checkout .klr-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1023.98px) { .k-reviews--checkout .klr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .k-checkout-reviews { margin-top: 28px; padding-top: 20px; } .k-reviews--checkout .klr-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 85%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } } .k-eu-guarantee { margin: 0 0 24px; padding: 14px 18px; border: 1px solid var(--k-line); border-radius: var(--k-radius-sm); background: #fff; } .k-eu-guarantee summary { cursor: pointer; font-weight: 700; } .k-eu-guarantee img { display: block; width: 100%; max-width: 794px; height: auto; margin: 14px auto 0; } .k-eu-guarantee p { margin: 12px 0 0; } /* Suche: sichtbarer Button „Suchen" rechts im Feld (Gelb #FCB900, Weiß #FFFFFF auf Wunsch; Kontrast niedrig), Lupe links nur Deko */ .k-search__icon { position: absolute; top: 50%; left: 14px; display: flex; color: var(--k-muted); pointer-events: none; transform: translateY(-50%); } .k-search__icon .k-icon { width: 20px; height: 20px; stroke-width: 2; } .k-search__input { padding: 0 104px 0 44px; } .k-search__submit { top: 4px; right: 4px; bottom: 4px; left: auto; display: flex; align-items: center; justify-content: center; width: auto; min-width: 88px; padding: 0 18px; border: 0; border-radius: 6px; background: #FCB900; color: #FFFFFF; font-size: .95rem; font-weight: 700; letter-spacing: .01em; cursor: pointer; } .k-search__submit:hover { background: #FCB900; color: #FFFFFF; box-shadow: inset 0 0 0 99px rgb(0 0 0 / 8%); } .k-search__submit:focus-visible { outline: 3px solid var(--k-navy); outline-offset: 2px; } @media (max-width: 599px) { .k-search__input { padding-right: 92px; } .k-search__submit { min-width: 76px; padding: 0 14px; font-size: .9rem; } } /* Warenkorb: nur das Anzahl-Badge gelb mit weißer Zahl */ .k-cart-count { background: #FCB900; color: #FFFFFF; } /* Infoleiste oben: weiß mit Schatten, links Google-Bewertung, rechts Servicehinweis */ .k-topbar { position: relative; z-index: 51; background: #fff; color: var(--k-ink); box-shadow: 0 1px 6px rgb(16 24 40 / 10%); } .k-topbar__inner { flex-wrap: wrap; justify-content: space-between; gap: 0 16px; min-height: 34px; } .k-topbar__rating { gap: 6px; padding-block: 6px; color: var(--k-ink); } .k-topbar__rating strong { font-weight: 800; } .k-topbar__rating span:last-child { color: var(--k-muted); } .k-topbar__google { flex: none; } .k-topbar__stars { background: linear-gradient(90deg, #fbbc04 calc(var(--k-rating) / 5 * 100%), rgb(16 24 40 / 18%) 0); } .k-topbar__note { margin: 0; padding-block: 6px; color: var(--k-ink); font-size: .8125rem; font-weight: 600; line-height: 1.3; } @media (max-width: 767px) { .k-topbar__inner { justify-content: center; gap: 0 12px; min-height: 0; } .k-topbar__rating { padding-block: 5px 1px; font-size: .75rem; } .k-topbar__note { padding-block: 1px 5px; font-size: .72rem; text-align: center; } } /* Suchfeld grau (auch im Fokus), Button bündig in voller Feldhöhe */ .k-search__input, .k-search__input:focus { background: var(--k-canvas); } .k-search__submit { top: 0; right: 0; bottom: 0; border-radius: 0 8px 8px 0; } .k-search__submit:focus-visible { outline-offset: -3px; } @media (max-width: 399px) { .k-topbar__note { font-size: .66rem; letter-spacing: -.01em; } } /* Hauptmenü etwas größer, Aufklappmenü weniger fett */ @media (min-width: 1024px) { .k-menu > li > a { font-size: 1rem; } .k-menu > li > .sub-menu > li > a { font-weight: 600; } .k-menu .sub-menu .sub-menu a { font-weight: 400; } } @media (min-width: 1024px) and (max-width: 1199px) { .k-menu > li > a { font-size: .85rem; } } /* Footer: schwarz, Schriftzug statt Logo (Arial Black + „Einer wie keiner!" in Arial kursiv) */ .k-footer { background: #000; } .k-footer .k-wordmark, .k-footer .k-wordmark:hover { color: #fff; } .k-footer .k-wordmark__name { font-family: var(--k-font-brand); font-weight: 900; font-size: 1.75rem; } .k-footer .k-wordmark__claim { margin-top: 4px; font-family: var(--k-font-claim); font-style: italic; font-weight: 400; font-size: .95rem; color: #fff; } @media (min-width: 1200px) and (max-width: 1279px) { .k-menu > li > a { font-size: .9375rem; } } /* 0.5.30: Suchfeld immer weiß; Startseiten-Bühne niedriger. */ .k-search__input, .k-search__input:focus { background: #fff; } .k-stage { min-height: clamp(360px, 37vw, 540px); } @media (max-width: 767px) { .k-stage { min-height: 400px; } } @media (min-width: 1440px) { .k-stage__content { padding-block: 48px; } } /* 0.5.30: Oberste Zeile wie kindlinger.at (Machic header-top): weiß, 12px, Text #021523, links Versandhinweis, rechts Service-Hinweis; mobil nur rechts, zentriert, mit feiner Linie. */ .k-topbar { position: relative; z-index: 51; background: #fff; color: #021523; box-shadow: none; font-size: .75rem; } .k-topbar__inner { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 0 24px; min-height: 0; } .k-topbar__col--right { margin-left: auto; } .k-topbar__menu { display: flex; margin: 0; padding: 0; list-style: none; } .k-topbar__menu a { display: block; padding-block: .75rem; color: currentColor; font-weight: 500; line-height: 1.2; text-decoration: none; transition: color .1s cubic-bezier(.28,.12,.22,1); } .k-topbar__menu a:hover { color: #0070dc; } .k-topbar__menu a:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 2px; } @media (max-width: 1023px) { .k-topbar::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: currentColor; opacity: .12; } .k-topbar__inner { justify-content: center; } .k-topbar__col--left { display: none; } .k-topbar__col--right { margin-left: 0; text-align: center; } .k-topbar__menu a { padding-block: .4375rem; font-weight: 600; } } /* 0.5.30: EU-Widerrufsbutton gut sichtbar (Footer jeder Seite, Kundenbereich). */ .k-withdrawal { margin: 18px 0 0; } .k-withdrawal__button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 2px solid currentColor; border-radius: 8px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; } .k-footer .k-withdrawal__button, .k-footer .k-withdrawal__button:visited { background: #fff; border-color: #fff; color: #000; } .k-footer .k-withdrawal__button:hover { background: #000; color: #fff; } .k-footer .k-withdrawal__button:focus-visible { outline: 2px solid #FCB900; outline-offset: 3px; } .k-withdrawal--account { margin: 24px 0; } .k-withdrawal--account .k-withdrawal__button { color: var(--k-ink); } .k-withdrawal--account .k-withdrawal__button:hover { background: var(--k-ink); color: #fff; } /* 0.5.31: Oberste Zeile – links Versand, Mitte Google-Bewertung, rechts Service; Linien-Icons, keine Links. */ .k-topbar__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0 24px; } .k-topbar__item { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; padding-block: .625rem; font-weight: 500; line-height: 1.25; } .k-topbar__item .k-icon { flex: none; width: 18px; height: 18px; stroke-width: 1.6; } .k-topbar__item--right { justify-content: flex-end; text-align: right; } .k-topbar__center { display: flex; justify-content: center; } .k-topbar__center .k-topbar__rating { padding-block: .5rem; font-size: .75rem; } @media (max-width: 1279px) { .k-topbar__inner { gap: 0 16px; } .k-topbar__item { font-size: .7rem; } } @media (max-width: 1023px) { .k-topbar__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; } .k-topbar__item--left { display: none; } .k-topbar__center .k-topbar__rating { padding-block: 6px 0; } .k-topbar__item--right { justify-content: center; padding-block: 2px 6px; text-align: center; } } /* 0.5.32: Versandhinweis mit Fußnote, beide Hinweise wieder verlinkt. */ a.k-topbar__item { color: inherit; text-decoration: none; } a.k-topbar__item:hover { color: #0070dc; } a.k-topbar__item:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 2px; } .k-topbar__item--left > span { display: grid; } .k-topbar__item .k-topbar__note { margin: 0; padding: 0; color: var(--k-muted); font-size: .625rem; font-weight: 400; line-height: 1.2; text-align: left; } .k-topbar__item--left { padding-block: .375rem; } /* 0.5.35: Service-Hinweis rechts mit Zusatzzeile wie beim Versandhinweis. */ .k-topbar__item--right > span { display: grid; } .k-topbar__item--right { padding-block: .375rem; } .k-topbar__item--right .k-topbar__note { text-align: right; } @media (max-width: 1023px) { .k-topbar__item--right { padding-block: 2px 6px; } .k-topbar__item--right .k-topbar__note { text-align: center; } } /* 0.5.36: Hauptmenü mit Hover-Intent (navigation.js setzt .k-intent nur bei Maus). Öffnen/Schließen steuert .is-hover statt :hover; Tastatur weiter über :focus-within. Einblenden nur über Deckkraft, ohne Verschieben. */ @media (min-width: 1024px) { .k-menu.k-intent > li > .sub-menu { display: grid; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .12s ease, visibility 0s linear .12s; } .k-menu.k-intent > li.is-hover > .sub-menu, .k-menu.k-intent > li:has(:focus-visible) > .sub-menu { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .15s ease, visibility 0s; } /* 0.5.38: Wechsel zwischen offenen Untermenüs ohne Überblenden (kein Doppelbild). */ .k-menu.k-intent.k-switch > li > .sub-menu { transition: none; } .k-menu.k-intent > li:hover:not(.is-hover):not(:has(:focus-visible)) > a::before { transform: rotate(45deg); margin-top: -3px; } .k-menu.k-intent > li.is-hover > a::before { transform: rotate(-135deg); margin-top: 3px; } .k-menu.k-intent > li:hover:not(.is-hover):not(:has(:focus-visible)) > a:not(:hover) { background: transparent; color: var(--k-ink); } .k-menu.k-intent > li.is-hover > a { background: var(--k-c); color: var(--k-c-ink); } } @media (min-width: 1024px) and (prefers-reduced-motion: reduce) { .k-menu.k-intent > li > .sub-menu { transition: none; } } /* 0.5.37: Hauptnavigation schlanker (Raphael). */ @media (min-width: 1024px) { .k-menu > li > a { font-weight: 500; letter-spacing: .005em; } } /* 0.5.38: Navigation 550 (Raphael); Google-Badge wie Rich-Badge auf kindlinger.at. */ @media (min-width: 1024px) { .k-menu > li > a, .k-menu > li > .sub-menu > li > a { font-weight: 550; } } .k-topbar__rating { gap: 5px; min-width: 0; max-width: 100%; color: #202124; } .k-topbar__rating strong { color: #e8c23a; font-weight: 700; } .k-topbar__stars { background: linear-gradient(90deg, #e8c23a calc(var(--k-rating) / 5 * 100%), rgb(16 24 40 / 18%) 0); } .k-topbar__rating .k-topbar__count { color: #70757a; } .k-topbar__rating:hover span:last-child { text-decoration: none; } .k-topbar__rating:hover .k-topbar__count { text-decoration: underline; } .k-topbar__snippet { overflow: hidden; min-width: 0; max-width: 260px; margin-left: 2px; color: #202124; font-style: italic; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1279px) { .k-topbar__snippet { max-width: 150px; } } @media (max-width: 1023px) { .k-topbar__snippet { max-width: min(220px, 40vw); } } /* 0.5.38: Farb-Band im Gelb des Farben-Menüs, dunkle Schrift für Lesbarkeit. */ .k-band--paint { background: #f6bf0a; color: var(--k-ink); } .k-band--paint::before { background: linear-gradient(90deg, #f6bf0a 0%, #f6bf0a 38%, rgb(246 191 10 / 70%) 52%, rgb(246 191 10 / 0%) 78%); } .k-band--paint .k-band__title, .k-band--paint .k-band__text { color: var(--k-ink); } .k-band--paint .k-button:focus-visible { outline-color: var(--k-navy); } /* 0.5.40: Hauptnavigation und Hauptgruppen im Aufklappmenü 500 (Raphael); Unterkategorien beginnen direkt unter dem Text der Hauptgruppe (Icon 36px + 10px Abstand). */ @media (min-width: 1024px) { .k-menu > li > a { font-weight: 500; } .k-menu > li > .sub-menu > li > a, .k-menu > li > .sub-menu:not(:has(.sub-menu)) > li > a { font-weight: 500; } .k-menu > li > .sub-menu > li:has(> a .k-menu__icon) > .sub-menu { margin-top: -10px; padding-left: 46px; } } /* 0.5.41: Aufklappmenüs mit Gruppen als Spalten-Layout: Gruppen zuerst, einzelne Kategorien danach lückenlos untereinander (Reihenfolge aus inc/setup.php). */ @media (min-width: 1024px) { .k-menu > li:hover > .sub-menu:has(.sub-menu), .k-menu > li:focus-within > .sub-menu:has(.sub-menu), .k-menu.k-intent > li > .sub-menu:has(.sub-menu) { display: block; columns: 220px 5; column-gap: 28px; } .k-menu > li > .sub-menu:has(.sub-menu) > li { break-inside: avoid; } .k-menu > li > .sub-menu:has(.sub-menu) > li.menu-item-has-children { padding-bottom: 10px; } .k-menu > li > .sub-menu:has(.sub-menu) > li:not(.menu-item-has-children) > a { padding-block: 2px; } } /* 0.5.42: Aufklappmenü so breit wie sein Inhalt, direkt unter dem Hauptpunkt (Raphael). Spaltenzahl k-cols-N aus inc/setup.php; navigation.js schiebt es bei Platzmangel nach links. */ @media (min-width: 1024px) { .k-menu > li { position: relative; } .k-menu > li > .sub-menu { left: 0; right: auto; width: max-content; min-width: 260px; max-width: calc(100vw - 32px); } .k-menu > li.k-cols-2 { --k-cols: 2; } .k-menu > li.k-cols-3 { --k-cols: 3; } .k-menu > li.k-cols-4 { --k-cols: 4; } .k-menu > li.k-cols-5 { --k-cols: 5; } .k-menu > li:hover > .sub-menu:has(.sub-menu), .k-menu > li:focus-within > .sub-menu:has(.sub-menu), .k-menu.k-intent > li > .sub-menu:has(.sub-menu) { columns: var(--k-cols, 1); width: calc(var(--k-cols, 1) * 240px + (var(--k-cols, 1) - 1) * 28px + 56px); } } /* 0.8.37 Sortimentskacheln nach Redesign: Bento (2 groß · 4 klein · 2 groß), kein Schleier, Text unter dem Bild */ .k-tiles--bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; } .k-tiles--bento .k-tile--lg { grid-column: span 2; } .k-tiles--bento .k-tile__media { aspect-ratio: 600 / 340; border-radius: 0; border-bottom: 4px solid var(--k-tile-c, var(--k-navy)); } .k-tiles--bento .k-tile--sm .k-tile__media { aspect-ratio: 292 / 200; } .k-tiles--bento .k-tile__media::before { content: none; display: none; } .k-tiles--bento .k-tile--pink { --k-tile-c: #e30d4b; } .k-tiles--bento .k-tile--green { --k-tile-c: #2e9b45; } .k-tiles--bento .k-tile--blue { --k-tile-c: #1f6fd1; } .k-tiles--bento .k-tile--yellow { --k-tile-c: #f5c400; } .k-tiles--bento .k-tile__caption { position: static; inset: auto; z-index: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; padding: 10px 0 0; color: var(--k-ink); text-align: left; } .k-tiles--bento .k-tile--lg .k-tile__caption { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; } .k-tiles--bento .k-tile__title { margin: 0; color: var(--k-ink); font-family: var(--k-font-display); font-style: normal; font-weight: 800; font-size: clamp(1.1rem, .9rem + .7vw, 1.5rem); line-height: 1.15; letter-spacing: -.01em; text-shadow: none; } .k-tiles--bento .k-tile--lg .k-tile__title { font-size: clamp(1.25rem, .95rem + 1vw, 1.9rem); } .k-tiles--bento .k-tile__kicker { display: block; margin: 0; color: var(--k-muted); font-style: normal; font-size: .9rem; text-shadow: none; } .k-tiles--bento .k-tile__link:hover .k-tile__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } @media (max-width: 767.98px) { .k-tiles--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .k-tiles--bento .k-tile--lg .k-tile__caption { flex-direction: column; align-items: flex-start; gap: 2px; } } /* 0.8.35 Startseite (Redesign-Optik): Duo „Metall nach Maß" / „Farbe nach Wunsch" als blaue bzw. gelbe Karte (Platz unverändert) */ .k-hsc-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 0; } .k-hsc { position: relative; display: flex; align-items: flex-end; overflow: hidden; min-height: clamp(220px, 20vw, 280px); padding: clamp(20px, 2.2vw, 30px); border-radius: var(--k-radius); color: #fff; text-decoration: none; isolation: isolate; } .k-hsc--metal { background: #123f7a; } .k-hsc--paint { background: #f5c400; } .k-hsc, .k-hsc:hover, .k-hsc:visited, .k-hsc .k-hsc__title, .k-hsc .k-hsc__text, .k-hsc .k-hsc__eyebrow { color: #fff; } .k-hsc--paint, .k-hsc--paint:hover, .k-hsc--paint:visited, .k-hsc--paint .k-hsc__title, .k-hsc--paint .k-hsc__text, .k-hsc--paint .k-hsc__eyebrow { color: #111418; } .k-hsc__img { position: absolute; top: 0; right: 0; bottom: 0; left: auto; z-index: -2; width: 55%; height: 100%; object-fit: cover; } .k-hsc::before { content: ""; position: absolute; inset: 0; z-index: -1; } .k-hsc--metal::before { background: linear-gradient(90deg, #123f7a 0%, #123f7a 45%, rgb(18 63 122 / 55%) 62%, rgb(18 63 122 / 10%) 100%); } .k-hsc--paint::before { background: linear-gradient(90deg, #f5c400 0%, #f5c400 45%, rgb(245 196 0 / 55%) 62%, rgb(245 196 0 / 5%) 100%); } .k-hsc__body { display: grid; gap: 6px; max-width: 26ch; } .k-hsc__eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .k-hsc__title { font-family: var(--k-font-display); font-size: clamp(1.7rem, 1rem + 1.6vw, 2.5rem); font-weight: 800; line-height: 1; letter-spacing: -.01em; } .k-hsc__text { font-size: .98rem; line-height: 1.45; } .k-hsc__more { display: inline-flex; width: 36px; height: 36px; margin-top: 6px; align-items: center; justify-content: center; border-radius: 50%; background: rgb(255 255 255 / 18%); transition: transform .15s, background-color .15s; } .k-hsc--paint .k-hsc__more { background: rgb(17 20 24 / 12%); } .k-hsc__more .k-icon { width: 18px; height: 18px; } .k-hsc:hover .k-hsc__more, .k-hsc:focus-visible .k-hsc__more { transform: translateX(4px); background: rgb(255 255 255 / 30%); } .k-hsc--paint:hover .k-hsc__more { background: rgb(17 20 24 / 20%); } .k-hsc:hover .k-hsc__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .k-hsc:focus-visible { outline: 3px solid #FCB900; outline-offset: 3px; } .k-hsc--paint:focus-visible { outline-color: var(--k-navy); } @media (max-width: 599px) { .k-hsc-wrap { grid-template-columns: 1fr; gap: 12px; } .k-hsc { min-height: 150px; } .k-hsc__img { width: 50%; } } /* 0.8.34: Landingpage-Einstieg ins Sortiment (oben + Seitenende) */ .k-lp__cta { margin: 20px 0 0; } .k-button--lg { min-height: 52px; padding: 14px 26px; font-size: 1.05rem; } .k-lp__end { margin: 40px 0 8px; padding: 28px 24px; border-radius: var(--k-radius); background: var(--k-canvas); text-align: center; } .k-lp__end .k-lp__cta { margin: 0; } .k-lp__end-text { margin: 0 0 14px; font-size: 1.1rem; font-weight: 700; } @media (max-width: 599px) { .k-lp__cta .k-button { width: 100%; } } /* 0.8.32: „Alle Grillprodukte" / „Alle Farben" (Klasse k-menu-all) im Aufklappmenü hervorheben. */ .k-menu .sub-menu > li.k-menu-all > a { font-weight: 700; } /* 0.8.29: Hauptmenü 1024–1279 px: 8 Punkte passen nicht einzeilig (ragte bis 1039 px bei 1009 px Platz). Lange Bezeichnungen dürfen zweizeilig umbrechen statt aus dem Fenster zu laufen. */ @media (min-width: 1024px) and (max-width: 1279.98px) { .k-menu > li { min-width: 0; flex: 0 1 auto; } .k-menu > li > a { white-space: normal; text-align: center; line-height: 1.2; } } /* 0.5.43: Service unter der Bühne als runde Karten (Raphael); mobil wischbar statt gestapelt. */ .k-servicebar--cards { border-bottom: 0; background: var(--k-canvas); } .k-servicebar--cards .k-servicebar__list { gap: 12px; padding-block: 16px; } .k-servicebar--cards .k-servicebar__list li { display: block; border: 0; } .k-servicebar--cards .k-servicebar__item { height: 100%; min-height: 72px; padding: 14px 16px; border: 1px solid var(--k-line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 5%); transition: border-color .15s, box-shadow .15s; } .k-servicebar--cards .k-servicebar__item > span { flex: 1; min-width: 0; } .k-servicebar--cards .k-servicebar__item .k-icon, .k-servicebar--cards .k-servicebar__item .klw-icon { width: 44px; height: 44px; padding: 10px; } .k-servicebar--cards .k-servicebar__item > .k-icon--chevron { width: 18px; height: 18px; padding: 0; border-radius: 0; background: none; color: var(--k-muted); } .k-servicebar--cards a.k-servicebar__item:hover { border-color: var(--k-navy); box-shadow: 0 4px 14px rgb(16 24 40 / 10%); } .k-servicebar--cards a.k-servicebar__item:hover strong { text-decoration: none; } @media (max-width: 767.98px) { .k-servicebar--cards .k-servicebar__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 82%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .k-servicebar--cards .k-servicebar__list::-webkit-scrollbar { display: none; } .k-servicebar--cards .k-servicebar__list li { scroll-snap-align: start; } } @media (min-width: 768px) and (max-width: 1023.98px) { .k-servicebar--cards .k-servicebar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .k-servicebar--cards .k-servicebar__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } } /* 0.5.43: Empfehlungen mit Umschaltern (wie bisherige Startseite) und Textbereich. */ .k-tabs { display: flex; gap: 8px; margin: 0 0 18px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; } .k-tabs::-webkit-scrollbar { display: none; } .k-tabs__tab { flex: none; min-height: 44px; padding: 0 18px; border: 1px solid var(--k-line); border-radius: 999px; background: #fff; color: var(--k-ink); font: inherit; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } .k-tabs__tab:hover { border-color: var(--k-navy); } .k-tabs__tab[aria-selected="true"] { border-color: var(--k-navy); background: var(--k-navy); color: #fff; } .k-tabs__tab:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 2px; } .k-shelf__title { margin: 0 0 4px; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); } .k-shelf__text { max-width: 72ch; margin: 0 0 18px; color: var(--k-muted); } @media (min-width: 1024px) { .k-shelf__text { max-width: min(72ch, calc(100% - 120px)); } .k-shelf .k-rail__nav { top: -60px; } } .k-about { display: grid; gap: 8px 48px; padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--k-line); color: var(--k-muted); font-size: .95rem; } .k-about h2, .k-about h3 { color: var(--k-ink); } .k-about h3 { margin: 20px 0 6px; font-size: 1.05rem; } .k-about p { max-width: 70ch; } @media (min-width: 1024px) { .k-about { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k-about__col:last-child { padding-top: 6px; } } /* 0.5.44: Service-Zeile unter der Bühne als runde Pillen (Raphael: nicht überladen, Versand/Beratung stehen in der Topbar, Abholung im Footer). Mobil wischbar. */ .k-servicebar--pills { border-bottom: 0; background: #fff; } .k-servicebar__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto; padding-block: 16px; list-style: none; } .k-servicebar__pills a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 7px; border: 1px solid #d5d9df; border-radius: 8px; background: #fff; color: var(--k-ink); font-size: .8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .15s, box-shadow .15s; } .k-servicebar__pills a:hover { border-color: var(--k-navy); box-shadow: 0 2px 10px rgb(16 24 40 / 8%); } .k-servicebar__pills a:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 2px; } .k-servicebar__pills .k-icon, .k-servicebar__pills .klw-icon { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 6px; background: #eaf0f7; color: var(--k-navy); } .k-servicebar__pills .is-whatsapp .klw-icon { background: #e9f9ef; color: #1a9e4b; } @media (max-width: 1299.98px) { .k-servicebar__pills { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; } .k-servicebar__pills::-webkit-scrollbar { display: none; } .k-servicebar__pills li { flex: none; scroll-snap-align: start; } } .k-footer__pickup { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .k-footer__pickup .k-icon { flex: none; width: 18px; height: 18px; } /* 0.5.48: mehr Luft zwischen Logo, Hauptnavigation und Bühne */ @media (min-width: 1024px) { .k-header:not(.is-stuck) .k-header__bar { padding-block: 22px; } .k-menu > li { padding-block: 8px; } } .home .k-stage { margin-top: clamp(12px, 1.6vw, 24px); } /* 0.5.49: Startseiten-Kacheln mit Bild von kindlinger.at, 20 % Schleier und Namen im Bild */ .k-tiles .k-tile__media { aspect-ratio: 448 / 266; } .k-tiles .k-tile__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(0 0 0 / 20%); pointer-events: none; } .k-tile__caption { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgb(0 0 0 / 55%), 0 2px 14px rgb(0 0 0 / 35%); } .k-tiles .k-tile__title { margin: 0; color: #fff; font-family: "Arial Black", Arial, sans-serif; font-weight: 900; font-size: clamp(1.15rem, .8rem + 1.5vw, 1.9rem); line-height: 1.05; letter-spacing: 0; } .k-tile__sub { font-weight: 700; font-size: clamp(.85rem, .75rem + .45vw, 1.15rem); line-height: 1.2; } .k-tile__kicker { margin-top: 4px; font-style: italic; font-size: clamp(.75rem, .7rem + .25vw, .95rem); line-height: 1.2; } .k-tile__link:hover .k-tile__title { text-decoration: none; } @media (max-width: 479.98px) { .k-tile__kicker { display: none; } } /* 0.5.52: Hauptmotiv der Bühne liegt rechts der Mitte (siehe Customizer-Hinweis); am Handy dorthin ausrichten */ @media (max-width: 767px) { .k-stage__img { object-position: 68% center; } } /* 0.5.53: Google-Bewertungen in Warenkorb und Kasse nur am Computer (Raphael), am Handy direkt zu den Artikeln */ @media (max-width: 767.98px) { .k-reviews--cart { display: none; } } /* 0.5.54: Das Handy-Menü sitzt im Header (sticky, z-index 50 = eigene Ebene). Der Abdunkler (body::after, z-index 90) lag deshalb über dem Menü: grau und nicht klickbar. Bei offenem Menü den Header über den Abdunkler heben. */ @media (max-width: 1023.98px) { .k-nav-open .k-header { z-index: 95; } } /* 0.5.55: Am Handy in der Topbar nur die Google-Bewertung, die Beratungs-Info entfällt (Raphael: sonst überladen) */ @media (max-width: 767.98px) { .k-topbar__item--right { display: none; } .k-topbar__center .k-topbar__rating { padding-block: 6px; } } /* 0.5.56: Kopf des Handy-Menüs: Schriftzug „KINDLINGER – Einer wie keiner!" statt Bildlogo */ .k-nav__head .k-wordmark { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 6px; color: #fff; } .k-nav__head .k-wordmark__name { font-family: var(--k-font-brand); font-weight: 900; font-size: 1.25rem; } .k-nav__head .k-wordmark__claim { margin: 0; font-family: var(--k-font-claim); font-style: italic; font-size: .9rem; color: #fff; } .k-nav__head .k-wordmark__claim::before { content: "– "; } /* 0.5.57: Am Handy scrollt der Kopf mit (alle Aktionen stehen in Schnellleiste und Menü). Die Suche unten holt den Kopf (Logo, Konto, Warenkorb, Suchfeld) oben ins Bild, mit Abdunkler. */ .k-search-close { display: none; } @media (max-width: 1023.98px) { .k-header { position: static; } .k-search-open { overflow: hidden; } .k-search-open::after { content: ""; position: fixed; inset: 0; z-index: 105; background: rgb(18 21 19 / 55%); } .k-search-open .k-header { position: fixed; top: 0; right: 0; left: 0; z-index: 110; padding-top: env(safe-area-inset-top, 0px); box-shadow: var(--k-shadow-lg); } .k-search-open .k-header__search { display: flex; align-items: center; gap: 4px; } .k-search-open .k-header__search .k-search { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; } .k-search-open .k-search-close { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--k-ink); cursor: pointer; } } /* 0.5.59: Serviceleiste oben (Raphael, 0.5.61: #24272C wie der Footer), vier gleich breite Bereiche mit Aufklapptext. Die Texte schweben über dem Kopf (absolut), daher keine Layout-Verschiebung. */ .k-svcbar { position: relative; z-index: 60; background: #24272C; color: #fff; font-size: .8125rem; } .k-svcbar__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: 0; list-style: none; } .k-svcbar__item { position: relative; display: flex; min-width: 0; } .k-svcbar__item + .k-svcbar__item::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 0; width: 1px; background: rgb(255 255 255 / 22%); } .k-svcbar__btn { display: flex; flex: 1; align-items: center; justify-content: center; gap: 10px; min-width: 0; min-height: 44px; margin: 0; padding: 6px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .k-svcbar__btn > .k-icon { flex: none; width: 20px; height: 20px; stroke-width: 2; color: #FCB900; } .k-svcbar__btn > .k-icon--chevron-down { width: 14px; height: 14px; stroke-width: 2; color: rgb(255 255 255 / 70%); } .k-svcbar__btn[aria-expanded="true"] > .k-icon--chevron-down { transform: rotate(180deg); } .k-svcbar__btn:hover .k-svcbar__title, .k-svcbar__btn[aria-expanded="true"] .k-svcbar__title { text-decoration: underline; text-underline-offset: 3px; } .k-svcbar__btn:hover, .k-svcbar__btn:focus, .k-svcbar__btn:active { background: none; color: inherit; } .k-svcbar__btn[aria-expanded="true"] { background: rgb(255 255 255 / 10%); } .k-svcbar__btn:focus-visible { outline: 2px solid #fcb900; outline-offset: -2px; } .k-svcbar__text { display: grid; min-width: 0; line-height: 1.25; } .k-svcbar__title { font-weight: 700; white-space: nowrap; } .k-svcbar__short { display: none; font-weight: 700; white-space: nowrap; } .k-svcbar__sub { overflow: hidden; color: rgb(255 255 255 / 88%); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; } .k-svcbar__panel { position: absolute; top: 100%; left: 50%; z-index: 2; width: min(340px, calc(100vw - 32px)); padding: 16px 18px; border-radius: 8px; background: #fff; color: var(--k-ink); box-shadow: 0 12px 32px rgb(13 27 42 / 22%); font-size: .875rem; line-height: 1.5; transform: translateX(-50%); } .k-svcbar__panel[hidden] { display: none; } .k-svcbar__panel p { margin: 0 0 8px; } .k-svcbar__link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--k-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .k-svcbar__link:hover { color: var(--k-ink); } .k-svcbar__link .k-icon { width: 16px; height: 16px; } @media (min-width: 1024px) { .k-svcbar__item:first-child .k-svcbar__panel { left: 0; transform: none; } .k-svcbar__item:last-child .k-svcbar__panel { right: 0; left: auto; transform: none; } } @media (max-width: 1199.98px) { .k-svcbar__btn { gap: 8px; padding-inline: 8px; } .k-svcbar__sub { font-size: .6875rem; } } @media (max-width: 1023.98px) { .k-svcbar__sub { display: none; } .k-svcbar__item { position: static; } .k-svcbar__panel { left: 12px; right: 12px; width: auto; transform: none; } } @media (max-width: 767.98px) { .k-svcbar { font-size: .6875rem; } .k-svcbar__list { padding-inline: 2px; } .k-svcbar__item + .k-svcbar__item::before { top: 12px; bottom: 12px; } .k-svcbar__btn { gap: 4px; padding-inline: 2px; } .k-svcbar__btn > .k-icon { width: 16px; height: 16px; } .k-svcbar__btn > .k-icon--chevron-down { width: 11px; height: 11px; } .k-svcbar__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .k-svcbar__short { display: block; } } @media (max-width: 379.98px) { .k-svcbar__btn > .k-icon:not(.k-icon--chevron-down) { display: none; } .k-svcbar { font-size: .72rem; } } /* 0.5.59: Google-Bewertung im Kopf rechts der Suche (statt in der Topbar) */ .k-rating { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--k-ink); text-decoration: none; white-space: nowrap; } .k-rating__google { flex: none; } .k-rating__body { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 2px 5px; line-height: 1.2; } .k-rating__line { display: contents; } .k-rating__stars { grid-column: 1 / -1; grid-row: 2; } .k-rating__cta { grid-column: 1 / -1; } .k-rating__score { font-size: .95rem; font-weight: 800; } .k-rating__stars { --k-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.8 2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3-4.6-4.4 6.3-.9z'/%3E%3C/svg%3E"); display: inline-block; width: 75px; height: 15px; background: linear-gradient(90deg, #fbbc04 calc(var(--k-rating) / 5 * 100%), rgb(16 24 40 / 18%) 0); -webkit-mask: var(--k-star) 0 0 / 15px 15px repeat-x; mask: var(--k-star) 0 0 / 15px 15px repeat-x; } .k-rating__count { color: #5f6368; font-size: .8125rem; } .k-rating__cta { color: #5f6368; font-size: .75rem; } .k-rating:hover .k-rating__cta { color: var(--k-navy); text-decoration: underline; } .k-rating:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 2px; border-radius: 4px; } .k-header__rating { grid-area: rating; display: flex; justify-content: center; } @media (max-width: 767.98px) { .k-header__rating { display: none; } } /* Kompakt in zwei Zeilen (Wert + Anzahl, darunter Sterne), damit die Suche breit bleibt. „Google-Bewertungen ansehen" im Kopf nur für Screenreader, im Handy-Menü sichtbar. */ .k-rating--header .k-rating__cta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } @media (min-width: 768px) and (max-width: 1023.98px) { .k-header__bar { grid-template-columns: auto 1fr auto auto; grid-template-areas: "toggle brand rating actions" "search search search search"; } } @media (min-width: 1024px) { .k-header__bar { grid-template-columns: auto minmax(280px, 1fr) auto auto; grid-template-areas: "brand search rating actions"; gap: 24px; } .k-header__bar .k-brand { min-width: max-content; } } @media (min-width: 1024px) and (max-width: 1279.98px) { .k-header__bar .custom-logo { max-height: 56px; } } @media (min-width: 1440px) { .k-header__bar { gap: 32px; } } /* Handy-Menü: Bewertung als eigene Zeile über Konto und Kontakt */ .k-rating--nav .k-rating__body { grid-template-columns: auto auto auto; } .k-rating--nav .k-rating__stars { grid-column: auto; grid-row: auto; } .k-rating--nav { justify-content: flex-start; padding: 0 12px; border-radius: var(--k-radius-sm); background: var(--k-canvas); } @media (min-width: 1024px) { .k-rating--nav { display: none; } } /* 0.5.59/0.5.60: Service-Kacheln unter der Bühne mit Aufklapptext (WhatsApp steht oben bei Top Beratung) */ .k-servicebar--tiles { border-bottom: 0; background: #fff; } .k-servicebar__tiles { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto; padding-block: 18px; list-style: none; } .k-svc-item { position: relative; flex: 0 0 calc((100% - 20px) / 3); min-width: 0; } .k-svc-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; min-height: 104px; margin: 0; padding: 16px 8px 14px; border: 1px solid #e1e5ea; border-radius: 12px; background: linear-gradient(180deg, #fff 0%, #f7f9fb 100%); box-shadow: 0 1px 2px rgb(16 24 40 / 5%); color: var(--k-ink); font: inherit; font-size: .8125rem; font-weight: 700; line-height: 1.25; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .15s, box-shadow .15s; } .k-svc-tile:hover, .k-svc-tile:focus, .k-svc-tile:active, .k-svc-tile[aria-expanded="true"] { border-color: #24272C; box-shadow: 0 8px 22px rgb(16 24 40 / 10%); background: linear-gradient(180deg, #fff 0%, #f7f9fb 100%); color: var(--k-ink); } .k-svc-tile:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 2px; } .k-svc-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #24272C; color: #FCB900; } .k-svc-tile__icon .k-icon { width: 24px; height: 24px; stroke-width: 2; } .k-svc-tile__label { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 4px; overflow-wrap: anywhere; } .k-svc-tile__label .k-icon { flex: none; width: 14px; height: 14px; stroke-width: 2; color: var(--k-muted); transition: transform .15s; } .k-svc-tile[aria-expanded="true"] .k-svc-tile__label .k-icon { transform: rotate(180deg); } .k-svc-drop { position: absolute; top: calc(100% + 8px); left: 50%; z-index: 20; width: min(320px, calc(100vw - 32px)); padding: 16px 18px; border: 1px solid #e1e5ea; border-radius: 10px; background: #fff; color: var(--k-ink); box-shadow: 0 12px 32px rgb(16 24 40 / 16%); font-size: .875rem; line-height: 1.5; text-align: left; transform: translateX(-50%); } .k-svc-drop[hidden] { display: none; } .k-svc-drop p { margin: 0 0 8px; } .k-svcbar__link--wa { margin-left: 0; color: #1a7f3c; } .k-svcbar__link--wa .klw-icon { flex: none; width: 18px; height: 18px; } .k-svcbar__panel .k-svcbar__link { display: flex; width: fit-content; } @media (max-width: 1023.98px) { /* Handy und Tablet: Text unter der ganzen Kachelgruppe, volle Breite */ .k-svc-item { position: static; } .k-svc-drop { top: calc(100% - 10px); left: 12px; right: 12px; width: auto; transform: none; } } @media (min-width: 768px) { .k-servicebar__tiles { gap: 14px; } .k-svc-item { flex-basis: calc((100% - 28px) / 3); } .k-svc-tile { font-size: .875rem; } } @media (min-width: 1024px) { .k-servicebar__tiles { flex-wrap: nowrap; gap: 16px; padding-block: 22px; } .k-svc-item { flex: 1 1 0; } .k-svc-tile { min-height: 120px; } .k-svc-tile__icon { width: 52px; height: 52px; } .k-svc-item:first-child .k-svc-drop { left: 0; transform: none; } .k-svc-item:last-child .k-svc-drop { right: 0; left: auto; transform: none; } } @media (max-width: 389.98px) { .k-svc-tile { min-height: 92px; padding-inline: 4px; font-size: .75rem; } .k-svc-tile__icon { width: 40px; height: 40px; } } /* 0.5.61: Kopf scrollt mit (Raphael), dafür „Nach oben"-Knopf; Footer in #24272C wie die Serviceleiste, Widerrufs-Button im KINDLINGER-Blau, Kontakt-Button im Footer entfällt (steht direkt darüber). */ .k-header, .k-header.is-stuck { box-shadow: none; } @media (min-width: 1024px) { .k-header { position: relative; } } .k-footer { background: #24272C; } .k-footer .k-withdrawal__button, .k-footer .k-withdrawal__button:visited { background: var(--k-navy); border-color: var(--k-navy); color: #fff; } .k-footer .k-withdrawal__button:hover { background: var(--k-navy-2); border-color: var(--k-navy-2); color: #fff; } .k-totop { position: fixed; right: 16px; bottom: calc(var(--k-dock-h) + env(safe-area-inset-bottom, 0px) + 16px); z-index: 70; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #24272C; color: #fff; box-shadow: 0 6px 18px rgb(16 24 40 / 25%); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; -webkit-tap-highlight-color: transparent; } .k-totop.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s, visibility 0s; } .k-totop[hidden] { display: none; } .k-totop:hover { background: var(--k-navy); } .k-totop:focus-visible { outline: 2px solid #FCB900; outline-offset: 3px; } .k-totop .k-icon { width: 24px; height: 24px; stroke-width: 2.2; transform: rotate(180deg); } .k-buybar-on .k-totop { bottom: calc(var(--k-dock-h) + env(safe-area-inset-bottom, 0px) + 92px); } .k-nav-open .k-totop, .k-search-open .k-totop, .k-minicart-open .k-totop { visibility: hidden; opacity: 0; } @media (prefers-reduced-motion: reduce) { .k-totop, .k-totop.is-visible { transition: none; transform: none; } } @media print { .k-totop { display: none; } } /* 0.5.65 Sortiment-Überschrift: kursiv, schlanker, Zusatztext daneben */ .k-home-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 18px; row-gap: 4px; margin-bottom: 20px; } .k-home-head .k-display { margin: 0; font-style: italic; font-weight: 600; } .k-home-head__sub { margin: 0; color: var(--k-muted, #5b6170); font-style: italic; font-size: clamp(.95rem, .9rem + .3vw, 1.15rem); line-height: 1.3; } @media (min-width: 768px) { .k-home-head__sub { padding-left: 18px; border-left: 3px solid #FCB900; } } /* 0.5.66 Kacheln: Menünamen in kindlinger.at-Optik (Arial Black, Zusatz kursiv), runde Ecken */ .k-tiles .k-tile__media { border-radius: var(--k-radius); } .k-tiles .k-tile__title { font-size: clamp(.95rem, .7rem + 1.1vw, 1.6rem); line-height: 1.1; text-wrap: balance; } @media (max-width: 479.98px) { .k-tile__kicker { display: block; margin-top: 3px; } } /* 0.5.67 Kontaktseite (page-kontakt.php) */ .k-contact-page { padding-bottom: clamp(40px, 6vw, 72px); } .k-contact-page__head { max-width: 760px; margin-bottom: clamp(24px, 4vw, 40px); } .k-contact-page__head .k-page__title { margin-bottom: 10px; } .k-contact-page__intro { color: var(--k-ink-2); font-size: clamp(1rem, .95rem + .25vw, 1.15rem); line-height: 1.6; } .k-contact-page__intro > :last-child { margin-bottom: 0; } .k-contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; margin: 0 0 clamp(28px, 4vw, 48px); padding: 0; list-style: none; } .k-contact-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 20px 20px; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); box-shadow: var(--k-shadow); transition: box-shadow .2s, transform .2s; } .k-contact-card:hover { box-shadow: var(--k-shadow-lg); transform: translateY(-2px); } .k-contact-card__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 50%; background: #24272C; color: #FCB900; } .k-contact-card__icon .k-icon, .k-contact-card__icon svg { width: 24px; height: 24px; stroke-width: 2; } .k-contact-card__icon--wa { color: #25D366; } .k-contact-card__title { margin: 0; font-size: 1.1rem; font-weight: 800; } .k-contact-card__text { flex: 1; margin: 0; color: var(--k-muted); font-style: normal; font-size: .95rem; line-height: 1.5; } .k-contact-card__link { align-self: flex-start; margin-top: 8px; color: var(--k-navy); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: #FCB900; overflow-wrap: anywhere; } .k-contact-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--k-radius); } .k-contact-card__link:hover { color: var(--k-ink); } .k-contact-card__link:focus-visible { outline: none; } .k-contact-card:focus-within { box-shadow: var(--k-focus); } .k-contact-layout { display: grid; gap: clamp(20px, 3vw, 32px); align-items: start; } @media (min-width: 1024px) { .k-contact-layout { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); } } .k-contact-layout__form .klk-form { border: 1px solid var(--k-line); background: var(--k-surface); box-shadow: var(--k-shadow); } .k-contact-layout__aside { display: grid; gap: 20px; } @media (min-width: 1024px) { .k-contact-layout__aside { position: sticky; top: 24px; } } .k-contact-box { padding: 22px 20px; border-radius: var(--k-radius); background: var(--k-canvas); } .k-contact-box__title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.15rem; font-weight: 800; } .k-contact-box__title .k-icon { width: 22px; height: 22px; color: var(--k-navy); } .k-contact-hours { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-weight: 600; } .k-contact-hours li { padding: 10px 14px; border-radius: var(--k-radius-sm); background: var(--k-surface); } .k-contact-box__note { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; color: var(--k-ink-2); font-size: .92rem; line-height: 1.45; } .k-contact-box__note .k-icon { flex: none; width: 20px; height: 20px; color: var(--k-navy); } .k-contact-map__frame { position: relative; display: grid; place-content: center; justify-items: center; gap: 10px; aspect-ratio: 4 / 3; margin-bottom: 14px; padding: 16px; overflow: hidden; border-radius: var(--k-radius-sm); background: #e4e7eb linear-gradient(135deg, rgb(255 255 255 / 50%) 25%, transparent 25%, transparent 50%, rgb(255 255 255 / 50%) 50%, rgb(255 255 255 / 50%) 75%, transparent 75%) 0 0 / 24px 24px; text-align: center; } .k-contact-map__frame.is-loaded { padding: 0; background: var(--k-canvas); } .k-contact-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .k-contact-map__load { background: var(--k-surface); } .k-contact-map__hint { max-width: 26ch; margin: 0; color: var(--k-muted); font-size: .82rem; line-height: 1.4; } .k-contact-map__route { display: flex; width: 100%; justify-content: center; gap: 8px; } .k-contact-map__route .k-icon { width: 20px; height: 20px; } @media (prefers-reduced-motion: reduce) { .k-contact-card { transition: none; } .k-contact-card:hover { transform: none; } } .klk-field__optional { color: var(--k-muted); font-weight: 400; } @media (max-width: 599.98px) { .k-contact-cards { gap: 10px; } .k-contact-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 14px 16px; } .k-contact-card__icon { grid-row: 1 / span 3; width: 44px; height: 44px; margin: 0; } .k-contact-card__link { margin-top: 4px; } } /* 0.5.68 Rechtstexte (template-parts/legal.php): Impressum-Karten, AGB-Lesespalte */ .k-legal-page { padding-bottom: clamp(40px, 6vw, 72px); } .k-legal { max-width: 880px; color: var(--k-ink-2); line-height: 1.7; } .k-legal > h2 { margin: 2.4rem 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--k-line); font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); line-height: 1.35; scroll-margin-top: 24px; } .k-legal > h3 { margin: 1.5rem 0 .6rem; font-size: 1.08rem; } .k-legal ul { padding-left: 1.3em; } .k-legal li > p { margin: 0; } .k-legal a { color: var(--k-navy); text-decoration-color: #FCB900; text-decoration-thickness: 2px; text-underline-offset: 3px; } /* Rechtstexte: Buttons nicht wie Fließtext-Links färben (PDF-Button war Schrift = Hintergrund) */ .k-legal a.k-button, .k-legal a.k-button:visited { color: #fff; text-decoration: none; } .k-legal a.k-button:hover { color: #fff; } /* Widerruf: Online-Button (Plugin) als Hauptbutton, PDF-Formular als Umriss-Button daneben */ .k-legal .k-b-col:has(.eu-owb-order-withdraw-from-contract-button) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; } .k-legal .k-b-col:has(.eu-owb-order-withdraw-from-contract-button) > .k-b-text { flex: 1 1 100%; } .k-legal .eu-owb-order-withdraw-from-contract-button { margin: 0; text-align: left; } .k-legal .eu-owb-order-withdraw-from-contract-button a.button, .k-legal .eu-owb-order-withdraw-from-contract-button a.button:visited { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 12px 22px; border: 0; border-radius: var(--k-pill); background: var(--k-navy); color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; transition: background-color .15s; } .k-legal .eu-owb-order-withdraw-from-contract-button a.button:hover { background: var(--k-navy-2, var(--k-ink)); color: #fff; } .k-legal .eu-owb-order-withdraw-from-contract-button a.button:focus-visible, .k-legal a.k-button:focus-visible { outline: 2px solid #FCB900; outline-offset: 3px; } .k-legal .k-b-col:has(.eu-owb-order-withdraw-from-contract-button) .k-b-btn .k-button { background: transparent; color: var(--k-navy); box-shadow: inset 0 0 0 2px var(--k-navy); } .k-legal .k-b-col:has(.eu-owb-order-withdraw-from-contract-button) .k-b-btn .k-button:hover { background: var(--k-navy); color: #fff; } @media (max-width: 559px) { .k-legal .k-b-shortcode:has(.eu-owb-order-withdraw-from-contract-button), .k-legal .k-b-col:has(.eu-owb-order-withdraw-from-contract-button) .k-b-btn { flex: 1 1 100%; } .k-legal .eu-owb-order-withdraw-from-contract-button a.button, .k-legal .k-b-col:has(.eu-owb-order-withdraw-from-contract-button) .k-b-btn .k-button { width: 100%; } } .k-legal__lead { margin: 0 0 24px; font-size: 1.05rem; color: var(--k-muted); } .k-legal__card { margin: 0 0 16px; padding: 22px 24px; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); box-shadow: var(--k-shadow); } .k-legal__card h2 { margin: 0 0 14px; padding: 0; border: 0; font-size: 1.15rem; font-weight: 800; } .k-legal__card dl { display: grid; grid-template-columns: minmax(150px, 32%) minmax(0, 1fr); gap: 8px 20px; margin: 0; } .k-legal__card dt { color: var(--k-muted); font-weight: 600; } .k-legal__card dd { margin: 0; color: var(--k-ink); overflow-wrap: anywhere; } .k-legal__card p { margin: 14px 0 0; } @media (max-width: 599.98px) { .k-legal__card { padding: 18px 16px; } .k-legal__card dl { grid-template-columns: 1fr; gap: 2px; } .k-legal__card dd { margin-bottom: 10px; } } .k-legal__figure { margin: 24px 0 0; max-width: 360px; } .k-legal__figure img { display: block; width: 100%; height: auto; border: 1px solid var(--k-line); border-radius: var(--k-radius); } .k-legal .k-agb-intro { margin: 0 0 32px; padding: 20px 24px; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-canvas); } .k-legal .k-agb-intro > p { margin-top: 0; } .k-legal .k-agb-toc summary { padding: 6px 0; color: var(--k-ink); cursor: pointer; } .k-legal .k-agb-toc ol { columns: 2; column-gap: 32px; margin: 12px 0 0; padding-left: 1.4em; } .k-legal .k-agb-toc li { margin: 0 0 8px; break-inside: avoid; line-height: 1.45; } .k-legal .k-agb-toc a { color: var(--k-ink-2); text-decoration: none; } .k-legal .k-agb-toc a:hover, .k-legal .k-agb-toc a:focus-visible { color: var(--k-navy); text-decoration: underline; } @media (max-width: 699.98px) { .k-legal .k-agb-toc ol { columns: 1; } .k-legal .k-agb-intro { padding: 16px; } } /* 0.5.69 Liefer- und Zahlungsbedingungen: Kacheln */ .k-legal .k-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 0 0 8px; } .k-legal .k-terms .k-legal__card { margin: 0; } .k-legal .k-terms h3 { margin: 0 0 6px; font-size: 1.08rem; font-weight: 800; color: var(--k-ink); } .k-legal .k-terms ul { margin: 10px 0 0; } .k-legal .k-terms li + li { margin-top: 6px; } .k-legal .k-terms__price { display: inline-block; margin: 0; padding: 2px 10px; border-radius: var(--k-radius-sm); background: var(--k-lime-soft); color: var(--k-ink); font-weight: 700; } .k-legal .k-terms__more { margin-top: 32px; padding: 16px 20px; border-left: 4px solid #FCB900; background: var(--k-canvas); border-radius: var(--k-radius-sm); } /* 0.5.69 Über uns */ .k-about-page { padding-bottom: clamp(40px, 6vw, 72px); } .k-story { max-width: none; color: var(--k-ink-2); line-height: 1.7; } .k-story > section { margin: 0 0 clamp(40px, 6vw, 64px); } .k-story h2 { margin: 0 0 18px; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); font-style: italic; font-weight: 700; color: var(--k-ink); line-height: 1.25; } .k-story__intro { max-width: 820px; } .k-story__kicker { margin: 0 0 6px; color: var(--k-muted); font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .k-story__lead { margin: 0 0 14px; font-family: var(--k-font-brand); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); line-height: 1.2; color: var(--k-ink); text-wrap: balance; } .k-story__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .k-story__card { padding: 22px 24px; border: 1px solid var(--k-line); border-top: 4px solid #FCB900; border-radius: var(--k-radius); background: var(--k-surface); box-shadow: var(--k-shadow); } .k-story__card h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 800; color: var(--k-ink); } .k-story__card p { margin: 0; } .k-story__split { display: grid; gap: 24px; } .k-story__text p { margin: 0 0 1em; } .k-story__media { display: grid; gap: 16px; align-content: start; } .k-story__media figure { margin: 0; } .k-story__media img { display: block; width: 100%; height: auto; border-radius: var(--k-radius); } @media (min-width: 900px) { .k-story__split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; } } .k-story__timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; } .k-story__timeline li { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--k-radius); background: var(--k-ink); color: #fff; line-height: 1.4; } .k-story__timeline strong { color: #FCB900; font-family: var(--k-font-brand); font-size: 1.4rem; } .k-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; } .k-team__card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); box-shadow: var(--k-shadow); } .k-team__media { aspect-ratio: 600 / 398; background: var(--k-canvas); } .k-team__media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .k-team__initials { display: grid; place-items: center; height: 100%; color: var(--k-muted); font-family: var(--k-font-brand); font-size: 2.2rem; } .k-team__body { padding: 14px 16px 16px; } .k-team__area { margin: 0; color: var(--k-muted); font-size: .85rem; font-weight: 600; } .k-team__name { margin: 2px 0 8px; font-size: 1.1rem; font-weight: 800; color: var(--k-ink); } .k-team__links { display: grid; gap: 2px; margin: 0; font-size: .92rem; } .k-team__links a, .k-story__cta p a:not(.k-button) { color: var(--k-navy); text-decoration-color: #FCB900; text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; } .k-story__cta { padding: clamp(22px, 4vw, 36px); border-radius: var(--k-radius); background: var(--k-canvas); } .k-story__cta p { margin: 0 0 14px; } .k-story__cta p:last-child { margin: 0; } /* 0.5.70 Verkaufsteam: höchstens vier Kacheln pro Zeile, mehr Luft */ @media (min-width: 1100px) { .k-team { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } } /* 0.6.0 Markenwelt: Übersicht /marken/, Marken-Landingpages, Startseiten-Teaser */ .k-brandrow__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 16px; } .k-brandrow__head .k-display { margin: 0; } .k-brandrow__all { color: var(--k-navy); font-weight: 700; text-decoration-color: #FCB900; text-decoration-thickness: 2px; text-underline-offset: 4px; } .k-brandrow__all:hover { text-decoration-thickness: 3px; } .k-logos__item img { mix-blend-mode: multiply; } .k-brands-page { padding-bottom: clamp(40px, 6vw, 72px); } .k-brands-page__head { margin-bottom: 24px; } .k-brands-page__head .k-page__title { margin-bottom: 4px; } .k-brands-page__sub { margin: 0; color: var(--k-muted); font-size: 1.1rem; font-style: italic; } .k-brands-page__intro { margin-top: 12px; color: var(--k-ink-2); } .k-brandfilter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; border: 0; } .k-brandfilter__legend { width: 100%; margin: 0 0 8px; padding: 0; color: var(--k-muted); font-size: .9rem; font-weight: 600; } .k-brandfilter__input { position: absolute; opacity: 0; width: 1px; height: 1px; } .k-brandfilter__chip { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--k-line-2, #d5dae1); border-radius: 999px; background: #fff; color: var(--k-ink); font-size: .92rem; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s; } .k-brandfilter__chip:hover { border-color: var(--k-ink); } .k-brandfilter__input:checked + .k-brandfilter__chip { border-color: var(--k-ink); background: var(--k-ink); color: #fff; } .k-brandfilter__input:focus-visible + .k-brandfilter__chip { outline: 2px solid var(--k-navy); outline-offset: 2px; } .k-brandgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } @media (min-width: 640px) { .k-brandgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 1024px) { .k-brandgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1280px) { .k-brandgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .k-brandcard { display: flex; } .k-brandcard__link { display: flex; flex-direction: column; width: 100%; padding: 14px 16px 16px; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); color: var(--k-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; } .k-brandcard__link:hover { border-color: var(--k-line-2, #d5dae1); box-shadow: var(--k-shadow); } .k-brandcard__link:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 2px; } .k-brandcard__logo { display: grid; place-items: center; height: 96px; margin-bottom: 12px; border-radius: var(--k-radius-sm); background: #fff; } .k-brandcard__logo img { max-width: 100%; max-height: 72px; height: auto; object-fit: contain; mix-blend-mode: multiply; } .k-brandcard__wordmark { font-family: var(--k-font-brand); font-size: 1.15rem; color: var(--k-ink-2); text-align: center; } .k-brandcard__wordmark::before { content: attr(data-name); } .k-brandcard__name { font-weight: 800; font-size: 1.02rem; } .k-brandcard__desc { margin-top: 4px; color: var(--k-muted); font-size: .88rem; line-height: 1.45; } .k-brandcard__meta { margin-top: auto; padding-top: 8px; color: var(--k-muted); font-size: .82rem; } .k-brandcard__link:hover .k-brandcard__name { text-decoration: underline; text-decoration-color: #FCB900; text-decoration-thickness: 2px; text-underline-offset: 3px; } .k-brandcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(32px, 5vw, 56px); padding: clamp(20px, 3vw, 32px); border-radius: var(--k-radius); background: var(--k-canvas); } .k-brandcta__title { margin: 0 0 4px; font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); font-style: italic; } .k-brandcta__text { margin: 0; max-width: 60ch; color: var(--k-ink-2); } .k-brandcta__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } .k-brandcta__actions .k-button { gap: 8px; } @media (max-width: 599.98px) { .k-brandcta__actions, .k-brandcta__actions .k-button { width: 100%; } } .k-shop--brand .k-brandhero, .k-shop--brand .k-brandcats { grid-column: 1 / -1; } .k-brandhero { display: grid; gap: 20px; align-items: center; margin: 4px 0 18px; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); } @media (min-width: 1024px) { .k-brandhero--image { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } } .k-brandhero__logo { display: flex; align-items: center; min-height: 64px; margin-bottom: 10px; } .k-brandhero__logo img { max-width: 220px; max-height: 90px; height: auto; object-fit: contain; } .k-brandhero__title { margin: 0 0 8px; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); letter-spacing: -.03em; line-height: 1.1; } .k-brandhero__intro { max-width: 70ch; color: var(--k-ink-2); } .k-brandhero__intro p { margin: 0 0 .7em; } .k-brandhero__meta { margin: 6px 0 0; color: var(--k-muted); font-size: .92rem; } .k-brandhero__media img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; border-radius: var(--k-radius-sm); } .k-brandcats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 20px; } .k-brandcats__label { margin: 0; color: var(--k-muted); font-size: .9rem; font-weight: 600; } .k-brandcats__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .k-brandcats__list a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border-radius: 999px; background: var(--k-canvas); color: var(--k-ink); font-size: .9rem; font-weight: 600; text-decoration: none; } .k-brandcats__list a:hover { background: var(--k-lime-soft); } .k-brandcats__list a:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 2px; } .k-brandafter { padding-bottom: clamp(40px, 6vw, 72px); } .k-brandtext { max-width: 820px; margin-top: 8px; color: var(--k-ink-2); } .k-brandfaq { max-width: 820px; margin-top: 32px; } .k-brandfaq h2 { margin: 0 0 12px; font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); } .k-brandfaq__item { border-top: 1px solid var(--k-line); } .k-brandfaq__item:last-child { border-bottom: 1px solid var(--k-line); } .k-brandfaq__item summary { padding: 14px 0; font-weight: 700; cursor: pointer; } .k-brandfaq__answer { padding: 0 0 14px; color: var(--k-ink-2); } .k-brandfaq__answer p { margin: 0 0 .6em; } .k-brandafter__all { margin: 20px 0 0; } .k-brandafter__all a { color: var(--k-navy); font-weight: 700; text-decoration-color: #FCB900; text-decoration-thickness: 2px; text-underline-offset: 4px; } /* 0.6.0 Streichpreis als UVP: klein und zurückhaltend, aktueller Preis deutlich */ .k-uvp { display: inline-flex; flex-wrap: nowrap; align-items: baseline; gap: 0 4px; order: 2; color: var(--k-muted); font-size: .8rem; font-weight: 500; letter-spacing: 0; white-space: nowrap; } .k-uvp__label { font-weight: 600; text-decoration: none; cursor: help; } .k-uvp del { color: inherit; font-size: inherit; font-weight: inherit; } .woocommerce div.product p.price .k-uvp, .woocommerce div.product span.price .k-uvp { order: -1; flex-basis: 100%; font-size: 1rem; } .woocommerce div.product p.price .k-uvp del, .woocommerce div.product span.price .k-uvp del { font-size: inherit; } .k-buybar__price .k-uvp { font-size: .75rem; } /* 0.6.2 Startseite: Duo „Metall nach Maß" / „Farbe nach Wunsch", nur CSS */ .k-duo__grid { display: grid; gap: 16px; } @media (min-width: 900px) { .k-duo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } } .k-duo__card { position: relative; display: flex; flex-direction: column; min-height: clamp(260px, 22vw, 320px); padding: clamp(24px, 3.2vw, 44px); overflow: hidden; isolation: isolate; border-radius: var(--k-radius); color: #fff; background-size: 160% 160%; background-position: 0% 50%; transition: background-position 1.6s ease; } .k-duo__card::before, .k-duo__card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; } .k-duo__title { margin: 0 0 12px; color: #fff; font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.4rem); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; } .k-duo__title span { display: block; } .k-duo__title span + span { margin-top: 4px; font-size: .62em; font-weight: 600; letter-spacing: 0; opacity: .92; } .k-duo__text { max-width: 46ch; margin: 0 0 24px; color: rgb(255 255 255 / 90%); font-size: clamp(.98rem, .92rem + .25vw, 1.1rem); line-height: 1.5; text-wrap: pretty; } .k-duo__actions { margin: auto 0 0; } .k-duo__actions .k-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* Metall: Anthrazit bis helles Stahlgrau, deutlich sichtbarer Stahlschimmer, feine gebürstete Struktur */ .k-duo__card--metal { background-color: #2a2e34; background-image: linear-gradient(115deg, #181b1f 0%, #2b3036 28%, #59616b 52%, #8d959f 66%, #4d545d 82%, #23272c 100%); } .k-duo__card--metal::before { background-image: linear-gradient(90deg, rgb(16 18 21 / 55%) 0%, rgb(16 18 21 / 18%) 50%, transparent 75%), repeating-linear-gradient(0deg, rgb(255 255 255 / 3.5%) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgb(0 0 0 / 5%) 0 1px, transparent 1px 7px); } .k-duo__card--metal::after { background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / 9%) 46%, rgb(255 255 255 / 16%) 50%, rgb(255 255 255 / 5%) 56%, transparent 68%); transform: translateX(-12%); transition: transform 1.6s ease; } .k-duo__card--metal:hover::after, .k-duo__card--metal:focus-within::after { transform: translateX(10%); } .k-duo__card--metal .k-button { border: 1px solid #fff; background: linear-gradient(180deg, #f6f7f9 0%, #d3d8de 100%); color: #1b1e22; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(0 0 0 / 30%); } .k-duo__card--metal .k-button:hover { background: linear-gradient(180deg, #ffffff 0%, #bfc5cd 100%); color: #1b1e22; } /* Farbe: fließender, gedeckter Verlauf Petrol, Pflaume, Terrakotta, Ocker, dunkle Lesezone links */ .k-duo__card--paint { background-color: #2a4c55; background-image: linear-gradient(115deg, #1c4550 0%, #2f5c66 18%, #6a4a66 42%, #a8553f 66%, #d08a3a 86%, #dfa54c 100%); } .k-duo__card--paint::before { background: linear-gradient(90deg, rgb(20 24 28 / 50%) 0%, rgb(20 24 28 / 20%) 50%, transparent 75%), linear-gradient(0deg, rgb(20 24 28 / 18%) 0%, transparent 55%); } .k-duo__card--paint:hover, .k-duo__card--paint:focus-within { background-position: 100% 50%; } .k-duo__card--paint .k-button { border: 1px solid #f3c27a; background: linear-gradient(90deg, #e7b25a 0%, #d9784c 100%); color: #1d1a17; box-shadow: 0 1px 2px rgb(0 0 0 / 30%); } .k-duo__card--paint .k-button:hover { background: linear-gradient(90deg, #f0c06a 0%, #e0855a 100%); color: #1d1a17; } .k-duo__card--metal:hover, .k-duo__card--metal:focus-within { background-position: 30% 50%; } @media (prefers-reduced-motion: reduce) { .k-duo__card, .k-duo__card::after { transition: none; } } @media (max-width: 599.98px) { .k-duo__actions .k-button { width: 100%; } .k-duo__card { min-height: 0; } } /* 0.6.2 Startseite: alle Abschnittsüberschriften wie „Entdecke unsere Sortimente." */ .k-brandrow__head .k-home-head { margin: 0; } /* 0.6.3 Startseite: gleicher, kompakter Abstand vor jeder Abschnittsüberschrift */ .home .k-main > .k-section { padding-block: clamp(36px, 4.4vw, 60px) 0; } .home .k-main > .k-section:last-child { padding-bottom: clamp(40px, 5vw, 64px); } .home .k-main > .k-about { border-top: 0; } /* 0.6.4 Startseite: Textbereich vor dem Footer im Theme-Stil, Beratung darunter */ .k-about { gap: 16px; color: var(--k-ink-2); font-size: 1rem; line-height: 1.7; } .k-about .k-about__head, .k-about .k-about__cta { grid-column: 1 / -1; } .k-about .k-about__head { margin-bottom: 4px; } .k-about__col { padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--k-line); border-top: 4px solid #FCB900; border-radius: var(--k-radius); background: var(--k-surface); box-shadow: var(--k-shadow); } .k-about__col p { margin: 0 0 1em; } .k-about__col p:last-child { margin-bottom: 0; } .k-about__col h3 { margin: 22px 0 8px; color: var(--k-ink); font-size: 1.15rem; font-weight: 800; line-height: 1.3; } @media (min-width: 1024px) { .k-about { column-gap: 24px; } .k-about__col:last-child { padding-top: clamp(20px, 2.6vw, 30px); } } .k-about__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin: 20px 0 0; color: var(--k-ink); font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); font-style: italic; font-weight: 600; line-height: 1.3; text-align: center; } @media (max-width: 767px) { .k-about__cta .k-button { width: 100%; } } .k-about .k-about__cta { max-width: none; } .k-about__cta .k-button { font-style: normal; } /* 0.6.6 Startseite: Abstand Servicekacheln → „Entdecke unsere Sortimente." wie zwischen allen Abschnitten */ .home .k-servicebar--tiles .k-servicebar__tiles { padding-bottom: 0; } /* 0.6.7 Duo-Buttons einfarbig in Sortimentsfarbe (Menü: Metall blau, Farben gelb); Kachel- und Duo-Titel in Theme-Typografie wie die Abschnittsüberschriften */ .k-duo__card--metal .k-button, .k-duo__card--metal .k-button:hover { border: 0; background: #463a82; color: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 30%); } .k-duo__card--metal .k-button:hover { background: #3a2f6e; } .k-duo__card--paint .k-button, .k-duo__card--paint .k-button:hover { border: 0; background: #f6bf0a; color: #1d1a17; box-shadow: 0 1px 2px rgb(0 0 0 / 30%); } .k-duo__card--paint .k-button:hover { background: #e3ae00; } .k-duo__title { font-family: var(--k-font-display); font-style: italic; font-weight: 700; letter-spacing: -.01em; } .k-duo__title span + span { font-style: normal; } .k-tiles .k-tile__title { font-family: var(--k-font-display); font-style: italic; font-weight: 700; letter-spacing: -.01em; } /* 0.6.7 Markenlogos etwas größer (Startseite und /marken/) */ .k-logos__item { min-height: 80px; padding: 10px; } .k-logos__item img { max-width: min(100%, 150px); max-height: 52px; } @media (min-width: 768px) { .k-logos__item { min-height: 92px; padding: 10px 12px; } .k-logos__item img { max-height: 60px; } } .k-brandcard__logo { height: 112px; } .k-brandcard__logo img { max-height: 84px; } /* 0.6.8 Farbe nach Wunsch: kräftiger, fließender Farbverlauf, dunkle Lesezone links */ .k-duo__card--paint { background-color: #1d4f8c; background-image: linear-gradient(115deg, #0f5e7a 0%, #1f5fb4 18%, #6a3fb5 36%, #c2307f 54%, #e8533a 72%, #f39a1e 88%, #f6c21a 100%); } .k-duo__card--paint::before { background: linear-gradient(90deg, rgb(14 18 28 / 55%) 0%, rgb(14 18 28 / 28%) 45%, transparent 70%), linear-gradient(0deg, rgb(14 18 28 / 22%) 0%, transparent 55%); } .k-duo__card--paint { background-size: 125% 125%; } /* 0.6.9 Sortimentskacheln: größere Schrift, gleichmäßiger dunkler Schleier wie beim Hero */ .k-tiles .k-tile__media::before { background: radial-gradient(ellipse 70% 65% at 50% 50%, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 56%) 45%, rgb(0 0 0 / 50%) 100%); } .k-tiles .k-tile__title { font-size: clamp(1.2rem, .8rem + 1.7vw, 2.1rem); line-height: 1.08; } .k-tile__kicker { font-size: clamp(.82rem, .74rem + .35vw, 1.05rem); } /* 0.6.9 Textbereich: Zwischenüberschrift oben */ .k-about__col h3:first-child { margin-top: 0; } /* 0.6.9 Empfehlungen: Theme-Typografie */ .k-shelf__title { font-family: var(--k-font-display); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem); font-style: italic; font-weight: 700; letter-spacing: -.01em; } .k-shelf__text { color: var(--k-ink-2); line-height: 1.6; } .k-tabs__tab { font-weight: 700; } /* 0.7.0 Farbe nach Wunsch: Button-Schrift weiß (Raphael). Hinweis: Kontrast auf Gelb gering. */ .k-duo__card--paint .k-button, .k-duo__card--paint .k-button:hover { color: #fff; } /* 0.7.0 Footer: Anthrazit, ruhig, kompakt */ .k-footer { background: #1f2227; color: #c4c9d1; font-size: .95rem; } .k-footer a, .k-footer a:visited { color: #c4c9d1; text-decoration: none; } .k-footer a:hover, .k-footer a:focus-visible { color: #FCB900; text-decoration: none; } .k-footer a:focus-visible, .k-footer summary:focus-visible { outline: 2px solid #FCB900; outline-offset: 3px; border-radius: 4px; } .k-footer__grid { gap: 28px 40px; padding-block: 48px 36px; } @media (min-width: 768px) { .k-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .k-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .k-footer__contact { gap: 6px; margin-top: 20px; line-height: 1.45; } .k-footer__contact > span, .k-footer__contact > a { min-height: 32px; } .k-footer__contact span, .k-footer__contact a { align-items: flex-start; } .k-footer__contact .k-icon, .k-footer__pickup .k-icon { width: 18px; height: 18px; margin-top: 1px; color: #8b929c; } .k-footer__contact a:hover .k-icon { color: #FCB900; } .k-footer__acc { margin: 0; } .k-footer__acc > summary { list-style: none; } .k-footer__acc > summary::-webkit-details-marker { display: none; } .k-footer .k-footer__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; color: #fff; font-family: var(--k-font-display); font-size: 1rem; font-style: italic; font-weight: 700; letter-spacing: 0; text-transform: none; } .k-footer__title .k-icon { width: 18px; height: 18px; transition: transform .2s ease; } .k-footer__menu { gap: 8px; } .k-footer__menu a { color: #c4c9d1; } .k-footer__menu a:hover { color: #FCB900; text-decoration: none; } .k-footer__menu--more { margin-top: 8px; } .k-footer__hours li { color: #c4c9d1; } .k-footer__pickup { align-items: flex-start; margin-top: 4px; color: #fff; } @media (min-width: 768px) { .k-footer__acc > summary { pointer-events: none; cursor: default; } .k-footer__title .k-icon { display: none; } } @media (max-width: 767.98px) { .k-footer__grid { gap: 0; padding-block: 36px 8px; } .k-footer__brand { padding-bottom: 24px; } .k-footer__acc { border-top: 1px solid rgb(255 255 255 / 10%); } .k-footer .k-footer__title { min-height: 52px; margin: 0; cursor: pointer; } .k-footer__acc[open] > .k-footer__title .k-icon { transform: rotate(180deg); } .k-footer__acc > ul, .k-footer__acc > nav { padding-bottom: 18px; } .k-footer__menu a { display: flex; align-items: center; min-height: 40px; padding-block: 0; } } /* 0.7.0 Footer: drei gleichwertige Funktions-Buttons */ .k-footer__fns { display: grid; gap: 12px; padding-block: 0 32px; } @media (min-width: 768px) { .k-footer__fns { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .k-footer__fnwrap { margin: 0; } .k-footer .k-footer__fn, .k-footer .k-footer__fnwrap .k-withdrawal__button, .k-footer .k-footer__fnwrap .k-withdrawal__button:visited { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; margin: 0; padding: 0 18px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 8px; background: transparent; color: #e6e9ee; font: inherit; font-size: .95rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease; } .k-footer .k-footer__fn:hover, .k-footer .k-footer__fnwrap .k-withdrawal__button:hover { border-color: #FCB900; background: rgb(255 255 255 / 4%); color: #FCB900; } .k-footer .k-footer__fn:focus-visible, .k-footer .k-footer__fnwrap .k-withdrawal__button:focus-visible { outline: 2px solid #FCB900; outline-offset: 3px; } .k-footer__fn .k-icon { width: 20px; height: 20px; } .k-footer__fnwrap .k-withdrawal__button::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4.5 9.5 9 5'/%3E%3Cpath d='M4.5 9.5h10a5 5 0 0 1 0 10H11'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4.5 9.5 9 5'/%3E%3Cpath d='M4.5 9.5h10a5 5 0 0 1 0 10H11'/%3E%3C/svg%3E") center / contain no-repeat; } .k-footer__legal { border-top: 1px solid rgb(255 255 255 / 10%); color: #8b929c; font-size: .85rem; } .k-footer__legal .k-container { justify-content: center; } @media (max-width: 767.98px) { .k-footer__legal p { padding-bottom: 88px; } } /* 0.7.2 Textbereich: Beratung als eigene Karte über die volle Breite */ .k-about .k-about__col--wide { grid-column: 1 / -1; } .k-about .k-about__col--wide p { max-width: none; } /* 0.7.3 Footer (Raphael 10:32): alle Schriften weiß, Überschriften abgehoben, Buttons klar erkennbar, Copyright links */ .k-footer, .k-footer a, .k-footer a:visited, .k-footer__menu a, .k-footer__hours li, .k-footer__pickup, .k-footer__legal { color: #fff; } .k-footer a:hover, .k-footer__menu a:hover { color: #FCB900; } .k-footer__contact .k-icon, .k-footer__pickup .k-icon { color: #FCB900; } .k-footer .k-footer__title { margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid #FCB900; color: #fff; font-size: 1.15rem; font-weight: 800; } .k-footer__addr { display: block; } .k-footer .k-footer__fn, .k-footer .k-footer__fnwrap .k-withdrawal__button, .k-footer .k-footer__fnwrap .k-withdrawal__button:visited { border: 2px solid rgb(255 255 255 / 70%); background: rgb(255 255 255 / 8%); color: #fff; font-weight: 700; } .k-footer__fn .k-icon { color: #FCB900; } .k-footer__fnwrap .k-withdrawal__button::before { background-color: #FCB900; } .k-footer .k-footer__fn:hover, .k-footer .k-footer__fnwrap .k-withdrawal__button:hover { border-color: #FCB900; background: #FCB900; color: #1f2227; } .k-footer__fn:hover .k-icon { color: #1f2227; } .k-footer__fnwrap .k-withdrawal__button:hover::before { background-color: #1f2227; } .k-footer__legal .k-container { justify-content: flex-start; } @media (max-width: 767.98px) { .k-footer .k-footer__title { margin: 0; padding-bottom: 0; border-bottom: 0; } .k-footer__acc { border-top-color: rgb(255 255 255 / 18%); } } /* 0.7.5 Produktkarten: Bilder nie beschneiden, gleiche Bildfläche, Produkt füllt ca. 88 % */ .woocommerce ul.products li.product a img, ul.products li.product img, .products-module .products > .product img { box-sizing: border-box; aspect-ratio: 1 / 1; height: auto; padding: 6%; object-fit: contain; object-position: center; } .woocommerce ul.products li.product .woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-product__title { min-height: 2.8em; } /* 0.7.8 Bildgröße nach Produktklasse: groß ca. 94 %, kompakt ca. 78 %, Zubehör ca. 70 % der Bildfläche */ ul.products li.product.k-size--l img, .woocommerce ul.products li.product.k-size--l a img { padding: 3%; } ul.products li.product.k-size--m img, .woocommerce ul.products li.product.k-size--m a img { padding: 11%; } ul.products li.product.k-size--s img, .woocommerce ul.products li.product.k-size--s a img { padding: 15%; } /* 0.8.10 Metall & Schrauben: querformatige Fotos, Bild nutzt ca. 92 % der Breite (vorher 78 %). */ ul.products li.product.k-size--metal img, .woocommerce ul.products li.product.k-size--metal a img { padding: 4%; } /* 0.8.12 Vollbilder (Fotos mit Hintergrund) füllen die Bildfläche ganz aus, Freisteller bleiben eingepasst (Raphael 2026-10-14). */ ul.products li.product.k-img--photo img, .woocommerce ul.products li.product.k-img--photo a img { padding: 0; object-fit: cover; } /* 0.7.8 Cookie-Banner (Complianz) im Theme-Stil; „Zustimmung verwalten" unten rechts aus, der Dialog öffnet nur über „Cookie-Einstellungen" im Footer (Raphael 2026-10-14). Texte unverändert. */ #cmplz-manage-consent { display: none !important; } #cmplz-cookiebanner-container .cmplz-cookiebanner { --cmplz_banner_background_color: #fff; --cmplz_banner_border_color: var(--k-line); --cmplz_banner_border_width: 1px; --cmplz_banner_border_radius: 10px; --cmplz_text_color: var(--k-ink); --cmplz_hyperlink_color: var(--k-navy); --cmplz_category_body_font_color: var(--k-ink-2); --cmplz_button_accept_background_color: var(--k-navy); --cmplz_button_accept_border_color: var(--k-navy); --cmplz_button_accept_text_color: #fff; --cmplz_button_deny_background_color: #fff; --cmplz_button_deny_border_color: var(--k-ink); --cmplz_button_deny_text_color: var(--k-ink); --cmplz_button_settings_background_color: #fff; --cmplz_button_settings_border_color: var(--k-ink); --cmplz_button_settings_text_color: var(--k-ink); --cmplz_button_border_radius: 8px; --cmplz_slider_active_color: var(--k-navy); --cmplz_slider_inactive_color: #c4c9d1; --cmplz_slider_bullet_color: #fff; --cmplz_text_font_size: 14px; --cmplz_link_font_size: 13px; --cmplz_category_body_font_size: 13px; --cmplz_title_font_size: 18px; --cmplz_button_font_size: 15px; --cmplz_category_header_title_font_size: 15px; --cmplz_category_header_always_active_color: #3c6e14; border-top: 4px solid #FCB900 !important; box-shadow: 0 18px 50px rgb(17 20 24 / 22%) !important; font-family: var(--k-font) !important; } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title { color: var(--k-ink); font-family: var(--k-font-display); font-size: 1.15rem; font-style: italic; font-weight: 700; } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message { color: var(--k-ink-2); font-size: .9rem; line-height: 1.55; } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider { border-color: var(--k-line); } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close { color: var(--k-ink); } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { min-height: 44px; border: 2px solid var(--k-ink); border-radius: 8px; background: #fff; color: var(--k-ink); font-family: var(--k-font); font-size: .95rem; font-weight: 700; transition: background-color .15s, color .15s, border-color .15s; } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept { border-color: var(--k-navy); background: var(--k-navy); color: #fff; } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover { border-color: #FCB900; background: #FCB900; color: var(--k-ink); } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:focus-visible, #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:focus-visible, #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-link:focus-visible { outline: 2px solid #FCB900; outline-offset: 2px; } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-link { color: var(--k-navy); font-weight: 600; } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category { border-radius: 8px; background: var(--k-canvas, #f4f5f7); } #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title { color: var(--k-ink); font-weight: 700; } /* 0.7.9 Mobiles Menü: Kopfzeile Anthrazit wie Serviceleiste und Footer statt Blau */ @media (max-width: 1023.98px) { .k-nav__head { border-bottom: 3px solid #FCB900; background: #24272C; } } /* 0.8.0 Inhaltsseiten (z. B. Datenschutz): lange URLs umbrechen statt die Seite auf dem Handy zu verbreitern */ .k-b-text, .k-page .k-b-text p, .k-page .k-b-text li { min-width: 0; overflow-wrap: anywhere; } .k-b-text table { display: block; max-width: 100%; overflow-x: auto; } .k-page .k-b-text :is(h3, h4, h5) { margin: 1.6em 0 .5em; color: var(--k-ink); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); font-weight: 800; line-height: 1.3; } .k-page .k-b-text p:empty { display: none; } /* 0.8.1 Hinweise zur Batterieentsorgung: alte Inline-Formatierung (Mulish, Großbuchstaben) an das Theme angleichen, Text unverändert */ .k-page .battery-info { max-width: 78ch; margin: 0 0 clamp(40px, 5vw, 64px); padding: 0; color: var(--k-ink-2); font-family: var(--k-font); font-size: 1rem; line-height: 1.7; } .k-page .battery-info h1 { margin: .2em 0 .7em; color: var(--k-ink); font-family: var(--k-font-display); font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; text-transform: none; } .k-page .battery-info h2 { margin: 1.8em 0 .5em; color: var(--k-ink); font-family: var(--k-font-display); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 800; line-height: 1.3; } .k-page .battery-info p { margin: 0 0 1em; } .k-page .battery-info ul { margin: .4em 0 1.2em; padding-left: 1.3em; } .k-page .battery-info li { margin-bottom: .35em; } .k-page .battery-info li::marker { color: #FCB900; } .k-page .battery-info .legal-note { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--k-line); color: var(--k-muted); font-size: .875rem; opacity: 1; } @media (max-width: 768px) { .k-page .battery-info { padding: 0; font-size: 1rem; } .k-page .battery-info h1 { font-size: 1.75rem; } } /* 0.8.2 Kategorietexte im KINDLINGER-Stil: Einleitung über den Produkten, SEO-Text (Beschreibung nach ) als Karte wie „Über uns" auf der Startseite. */ .k-shop .term-description, .k-lp__intro { max-width: 75ch; color: var(--k-ink-2); font-size: 1.0625rem; line-height: 1.6; overflow-wrap: anywhere; } .k-shop .term-description p { margin: 0 0 .6em; } .k-shop .term-description p:last-child { margin-bottom: 0; } .k-shop .term-description a, .k-cat-text a { color: var(--k-navy); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; } .k-shop .term-description a:hover, .k-cat-text a:hover { text-decoration-thickness: 2px; } .k-cat-text { margin: clamp(32px, 4vw, 56px) 0 8px; padding: clamp(20px, 2.6vw, 34px); border: 1px solid var(--k-line); border-top: 4px solid #FCB900; border-radius: var(--k-radius); background: var(--k-surface); box-shadow: var(--k-shadow); color: var(--k-ink-2); line-height: 1.7; overflow-wrap: anywhere; } .k-cat-text > * { max-width: 75ch; } .k-cat-text h2 { margin: 1.4em 0 .45em; color: var(--k-ink); font-family: var(--k-font-display); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); font-style: italic; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; } .k-cat-text h2:first-child { margin-top: 0; } .k-cat-text h3 { margin: 1.2em 0 .4em; color: var(--k-ink); font-size: 1.15rem; font-weight: 800; line-height: 1.3; } .k-cat-text p { margin: 0 0 1em; } .k-cat-text p:last-child { margin-bottom: 0; } /* 0.8.3 Kategorie-Bausteine (inc/category-hub.php): Bildkacheln, Links, Beratung, FAQ. */ .k-hub { margin: 18px 0 6px; } .k-hub__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } @media (min-width: 600px) { .k-hub__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } } @media (min-width: 1100px) { .k-hub__list { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); } } .k-hub__tile { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); color: var(--k-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; } .k-hub__tile:hover { border-color: var(--k-navy); box-shadow: var(--k-shadow); transform: translateY(-2px); color: var(--k-ink); } .k-hub__tile:focus-visible { outline: 3px solid var(--k-navy); outline-offset: 2px; } .k-hub__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; } .k-hub__media img, .k-hub__img { position: absolute; inset: 8%; display: block; width: 84%; height: 84%; max-width: none; object-fit: contain; } .k-hub__label { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 3em; padding: 10px 10px 12px; border-top: 1px solid var(--k-line); font-size: .95rem; font-weight: 700; line-height: 1.25; text-align: center; overflow-wrap: anywhere; } .k-hub__tile:hover .k-hub__label { color: var(--k-navy); } .k-hub__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 14px 0 18px; } .k-hub__links .k-link-arrow { min-height: 44px; white-space: normal; } .k-link-arrow--back .k-icon { transform: scaleX(-1); } .k-link-arrow--back:hover .k-icon { transform: scaleX(-1) translateX(3px); } .k-hub__cta { margin: 1.4em 0 0; } .k-cat-text .k-hub__cta a.k-button, .k-cat-text .k-hub__cta a.k-button:hover { color: #fff; text-decoration: none; } .k-cat-faq { margin: 24px 0 8px; padding: clamp(20px, 2.6vw, 34px); border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); box-shadow: var(--k-shadow); } .k-cat-faq h2, .k-lp__h2 { margin: 0 0 12px; color: var(--k-ink); font-family: var(--k-font-display); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); font-style: italic; font-weight: 600; line-height: 1.2; } .k-cat-faq .k-faq__item { max-width: 75ch; border-top: 1px solid var(--k-line); } .k-cat-faq .k-faq__item:last-of-type { border-bottom: 1px solid var(--k-line); } .k-cat-faq summary { position: relative; display: block; padding: 14px 36px 14px 0; color: var(--k-ink); font-weight: 700; line-height: 1.4; cursor: pointer; list-style: none; } .k-cat-faq summary::-webkit-details-marker { display: none; } .k-cat-faq summary::after { content: ""; position: absolute; top: 50%; right: 6px; width: 9px; height: 9px; border-right: 2px solid var(--k-navy); border-bottom: 2px solid var(--k-navy); transform: translateY(-70%) rotate(45deg); transition: transform .15s; } .k-cat-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); } .k-cat-faq summary:focus-visible { outline: 3px solid var(--k-navy); outline-offset: 2px; } .k-cat-faq .k-faq__answer { padding: 0 0 14px; color: var(--k-ink-2); line-height: 1.7; } .k-cat-faq .k-faq__answer p { margin: 0 0 .6em; } /* 0.8.5 Startseiten-Marken wieder größer (Raphael 14.10.): mehr Logofläche, weniger Rand. */ .k-logos__item { min-height: 84px; padding: 8px 6px; } .k-logos__item img { max-width: min(100%, 170px); max-height: 56px; } @media (min-width: 768px) { .k-logos__item { min-height: 104px; padding: 12px 8px; } .k-logos__item img { max-height: 68px; } } /* 0.8.6 Kategorie-Bausteine: aktive Filterkachel, verwandte Kategorien, Hinweisbox. */ .k-hub__tile.is-current { border-color: var(--k-navy); box-shadow: inset 0 0 0 1px var(--k-navy); } .k-hub__tile.is-current .k-hub__label { color: var(--k-navy); } .k-hub__links { align-items: center; } .k-hub__more ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .k-hub__chip { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--k-line); border-radius: 999px; background: var(--k-surface); color: var(--k-ink); font-size: .92rem; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s; } .k-hub__chip:hover { border-color: var(--k-navy); color: var(--k-navy); } .k-hub__chip:focus-visible { outline: 3px solid var(--k-navy); outline-offset: 2px; } .k-hub__chip.is-current { border-color: var(--k-ink); background: var(--k-ink); color: #fff; } .k-cat-info { display: grid; gap: 4px 32px; margin: 24px 0 0; padding: clamp(18px, 2.2vw, 26px); border: 1px solid var(--k-line); border-left: 4px solid #FCB900; border-radius: var(--k-radius); background: var(--k-surface); color: var(--k-ink-2); font-size: .95rem; line-height: 1.6; } @media (min-width: 768px) { .k-cat-info { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } } .k-cat-info__title { margin: 0 0 6px; color: var(--k-ink); font-size: 1.05rem; font-weight: 800; line-height: 1.3; } .k-cat-info p { margin: 0 0 .5em; } .k-cat-info__col + .k-cat-info__col { padding-top: 12px; border-top: 1px solid var(--k-line); } @media (min-width: 768px) { .k-cat-info__col + .k-cat-info__col { padding-top: 0; border-top: 0; } } /* 0.8.7 Kategorie- und Marken-Landingpages: KINDLINGER-Akzent an der H1, gelb umrandete Kacheln, aktive Auswahl dunkel */ .k-shop .woocommerce-products-header__title::after, .k-shop h1.page-title::after, .k-brandhero__title::after, .k-lp__title::after { content: ""; display: block; width: 56px; height: 4px; margin-top: .32em; border-radius: 2px; background: var(--k-yellow); } .k-shop .woocommerce-products-header__title, .k-shop h1.page-title, .k-brandhero__title, .k-lp__title { margin-bottom: 14px; color: var(--k-ink); } .k-hub__tile { border-color: var(--k-yellow); background: #fff; transition: border-color .15s, box-shadow .15s, background-color .15s; } .k-hub__media { background: #fff; } .k-hub__label { border-top-color: rgb(252 185 0 / 35%); color: var(--k-ink); } .k-hub__tile:hover { border-color: var(--k-yellow-2); background: #fffcf2; box-shadow: inset 0 0 0 1px var(--k-yellow-2), 0 4px 14px rgb(15 23 42 / 7%); transform: none; color: var(--k-ink); } .k-hub__tile:hover .k-hub__label { color: var(--k-ink); } .k-hub__tile.is-current { border-color: var(--k-ink); box-shadow: inset 0 0 0 1px var(--k-ink); } .k-hub__tile.is-current .k-hub__label { border-top-color: var(--k-ink); background: var(--k-ink); color: #fff; } @media (prefers-reduced-motion: reduce) { .k-hub__tile { transition: none; } } /* 0.8.9 Landingpages (inc/landing.php): gleiche Bausteine wie die Kategorieseiten. */ .k-lp__intro p { margin: 0 0 .8em; } .k-lp__sec { margin-top: clamp(28px, 4vw, 48px); } .k-lp__h2::after { content: ""; display: block; width: 40px; height: 3px; margin-top: .4em; border-radius: 2px; background: var(--k-yellow); } .k-lp__text { max-width: 75ch; margin: -4px 0 4px; color: var(--k-ink-2); line-height: 1.6; } .k-hub__tile--logo .k-hub__media img { inset: 18% 14%; width: 72%; height: 64%; } .k-lp__chips { margin-top: clamp(24px, 3vw, 36px); } .k-lp__chips-title { margin: 0 0 8px; color: var(--k-ink); font-weight: 700; } .k-lp__teaser { margin-top: clamp(28px, 4vw, 48px); } .k-lp__teaser h2 { margin-top: 0; } .k-lp__advice .k-brandcta__text p { margin: 0 0 .5em; } .k-lp__advice .k-brandcta__text p:last-child { margin-bottom: 0; } .k-lp__advice .k-button { gap: 8px; } /* 0.8.9 Lieferzeit in der Produktkachel, Bildunterschrift in der Galerie. */ .k-stock:has(+ .k-card-delivery) { margin-bottom: 2px; } .k-card-delivery { margin: 0 var(--k-cp) 10px; color: var(--k-ink-2); font-size: .75rem; line-height: 1.35; } .k-gallery-cap { margin: 6px 0 0; color: var(--k-ink-2); font-size: .8rem; font-style: italic; line-height: 1.4; } .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) .k-gallery-cap { display: none; } /* Toolbox 0.8.3 Kontaktformular: Bestellnummer nur bei „Bestellung & Lieferung" (ohne JavaScript). */ .klk-form:has(#klk-thema) .klk-field--bestellnummer { display: none; } .klk-form:has(#klk-thema option[value="bestellung"]:checked) .klk-field--bestellnummer { display: grid; } /* Mähroboter-Anfrage (inc/automower-form.php) */ .k-lp__form .klk-form { border: 1px solid var(--k-line); background: var(--k-surface); box-shadow: var(--k-shadow); } .kam-choice { min-width: 0; padding: 0; border: 0; } .kam-choice legend { margin: 0 0 8px; padding: 0; font-weight: 600; font-size: .9rem; } .kam-choice__list { display: flex; flex-wrap: wrap; gap: 10px 28px; } .kam-choice__item { display: inline-flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: .95rem; line-height: 1.4; cursor: pointer; } .klk-field .kam-choice__item input { width: 20px; min-height: 0; height: 20px; margin: 0; padding: 0; flex: 0 0 20px; accent-color: var(--k-ink); } @media (min-width: 768px) { .kam-form .kam-field--plz { grid-column: auto; } } /* Nachricht nur bei „Sonstiges" (ohne JavaScript); bei Fehlermeldung immer sichtbar. */ .kam-form .kam-field--nachricht:not(.klk-field--error) { display: none; } .kam-form:has(input[name="anliegen"][value="sonstiges"]:checked) .kam-field--nachricht { display: grid; } /* Winterservice-Anmeldung ersetzt die Anliegen-Auswahl. */ .kam-form:has(#kam-winter:checked) .kam-field--anliegen, .kam-form:has(#kam-winter:checked) .kam-field--nachricht { display: none; } /* Landingpage-Galerie (z. B. Gartenmöbel-Ausstellung). */ .k-lp__gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .k-lp__gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; } @media (min-width: 900px) { .k-lp__gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } } /* Themenkarten (Ratgeber-Übersicht). */ .k-lp__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 600px) { .k-lp__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .k-lp__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .k-lp__card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-surface); } .k-lp__card-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .k-lp__card-body { padding: 16px 18px 18px; } .k-lp__card-title { margin: 0 0 10px; color: var(--k-ink); font-size: 1.1rem; font-weight: 800; line-height: 1.3; } .k-lp__card-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .k-lp__card-links a { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--k-line); color: var(--k-ink); font-weight: 600; line-height: 1.35; text-decoration: none; } .k-lp__card-links li:first-child a { border-top: 0; } .k-lp__card-links a:hover { color: var(--k-navy); text-decoration: underline; } .k-lp__card-links .k-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--k-yellow-2); } /* Ratgeber-Artikel (Seiteninhalt als HTML, früher Elementor). */ .k-article > h1:first-child, .k-article h1 { margin: 0 0 .6em; color: var(--k-ink); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); line-height: 1.15; } .k-article h2 { margin: 1.8em 0 .6em; padding-left: 12px; border-left: 4px solid var(--k-yellow); color: var(--k-ink); line-height: 1.25; } .k-article h3 { margin: 1.4em 0 .4em; color: var(--k-ink); font-size: 1.15rem; line-height: 1.35; } .k-article header > p:first-of-type, .k-article > p:first-of-type { font-size: 1.08em; } .k-article ul, .k-article ol { padding-left: 1.3em; } .k-article li { margin: .3em 0; } .k-article a { color: var(--k-navy); text-decoration: underline; text-underline-offset: 3px; } .k-article__hero { margin: 1.2em 0 1.6em; } .k-article__hero img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--k-radius); } .k-article__hero figcaption { margin-top: 6px; color: var(--k-muted); font-size: .9rem; } .k-article__facts, .k-article__box, .k-article__cta, .k-article__related, .k-article__index { margin: 1.8em 0; padding: clamp(16px, 2.2vw, 24px); border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-canvas); } .k-article__facts p { margin: .25em 0; } .k-article__cta { border-left: 4px solid var(--k-yellow); background: var(--k-lime-soft); } .k-article__facts > h2:first-child, .k-article__box > h2:first-child, .k-article__cta > h2:first-child, .k-article__related > h2:first-child { margin-top: 0; padding-left: 0; border-left: 0; font-size: 1.3rem; } .k-article__mark { padding: 0 .2em; border-radius: 3px; background: var(--k-lime-soft); } /* 0.8.38 (Raphael): Überschriften wieder aufrecht, nicht kursiv. Muss am Dateiende stehen (überschreibt frühere Stufen). */ .k-stage__title, .k-home-head .k-display, .k-display, .k-duo__title, .k-tiles .k-tile__title, .k-shelf__title, .k-story h2, .k-brandcta__title, .k-footer .k-footer__title, .k-cat-text h2, .k-cat-faq h2, .k-lp__h2, .k-lp__title, #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title { font-style: normal; } /* 0.8.38 Sortimentskacheln (Bento): Text unter dem Bild dunkel – überschreibt die alten Bild-Beschriftungen (weiß, Arial Black). */ .k-sortiment .k-tiles--bento .k-tile__media::before { content: none; display: none; } .k-sortiment .k-tiles--bento .k-tile__caption { position: static; inset: auto; z-index: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; padding: 10px 0 0; color: var(--k-ink); text-align: left; text-shadow: none; } .k-sortiment .k-tiles--bento .k-tile--lg .k-tile__caption { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; } .k-sortiment .k-tiles--bento .k-tile__title { margin: 0; color: var(--k-ink); font-family: var(--k-font-display); font-style: normal; font-weight: 800; font-size: clamp(1.1rem, .9rem + .7vw, 1.45rem); line-height: 1.15; letter-spacing: -.01em; text-shadow: none; text-wrap: balance; } .k-sortiment .k-tiles--bento .k-tile--lg .k-tile__title { font-size: clamp(1.25rem, .95rem + 1vw, 1.85rem); } .k-sortiment .k-tiles--bento .k-tile__kicker { display: block; margin: 0; color: var(--k-muted); font-style: normal; font-size: .9rem; line-height: 1.3; text-shadow: none; white-space: nowrap; } .k-sortiment .k-tiles--bento .k-tile__link:hover .k-tile__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } @media (max-width: 767.98px) { .k-sortiment .k-tiles--bento .k-tile--lg .k-tile__caption { flex-direction: column; align-items: flex-start; gap: 2px; } .k-sortiment .k-tiles--bento .k-tile__kicker { white-space: normal; } } /* 0.8.39 Sortimentskacheln: Zusatztext direkt neben dem Namen mit gelbem Trennstrich (wie .k-home-head__sub); leichter Schleier auf dem Bild, der beim Darüberfahren bzw. Fokus verschwindet. */ .k-sortiment .k-tiles--bento .k-tile__caption, .k-sortiment .k-tiles--bento .k-tile--lg .k-tile__caption { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 12px; } .k-sortiment .k-tiles--bento .k-tile__kicker { padding-left: 12px; border-left: 3px solid #FCB900; white-space: normal; line-height: 1.25; } .k-sortiment .k-tiles--bento .k-tile__media { position: relative; } .k-sortiment .k-tiles--bento .k-tile__media::after { content: ""; position: absolute; inset: 0; background: rgba(17, 20, 24, .28); opacity: 1; transition: opacity .25s ease; pointer-events: none; } .k-sortiment .k-tiles--bento .k-tile__link:hover .k-tile__media::after, .k-sortiment .k-tiles--bento .k-tile__link:focus-visible .k-tile__media::after { opacity: 0; } @media (prefers-reduced-motion: reduce) { .k-sortiment .k-tiles--bento .k-tile__media::after { transition: none; } } @media (max-width: 767.98px) { .k-sortiment .k-tiles--bento .k-tile__caption, .k-sortiment .k-tiles--bento .k-tile--lg .k-tile__caption { flex-direction: row; align-items: baseline; gap: 2px 10px; } .k-sortiment .k-tiles--bento .k-tile__kicker { padding-left: 10px; } } /* 0.8.39 Hauptnavigation (Desktop): Unterstrich in der Kategoriefarbe dauerhaft sichtbar. */ @media (min-width: 1024px) { .k-menu > li > a::after { display: block; left: 10px; right: 10px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--k-c); transform: scaleX(1); } .k-menu > li:hover > a::after, .k-menu > li:focus-within > a::after { opacity: 0; } } @media (min-width: 1024px) and (max-width: 1199px) { .k-menu > li > a::after { left: 5px; right: 5px; } } /* 0.8.40 Hauptnavigation wie im Redesign-Entwurf: Punkte füllen die Leiste, Unterstriche über die ganze Breite des Punkts, dazwischen nur 4px Abstand – die Striche berühren sich fast. */ @media (min-width: 1024px) { .k-menu { gap: 4px; } .k-menu > li { flex: 1 1 auto; } .k-menu > li > a { justify-content: center; border-radius: 0; } .k-menu > li > a::after, .k-menu > li:hover > a::after, .k-menu > li:focus-within > a::after { left: 0; right: 0; bottom: 0; height: 3px; border-radius: 0; opacity: 1; } } /* 0.8.40 Buttons und Bilder ohne runde Ecken (Vorgabe Raphael). Bewusst runde Elemente (Kreis-Pfeile, „nach oben", Icon-Kreise) bleiben rund. !important, weil viele ältere Einzelregeln Radien setzen. */ .k-button, .button, button:not(.k-rail__btn):not(.k-totop), input[type="submit"], input[type="button"], input[type="reset"], .wp-element-button, .wp-block-button__link, .wc-block-components-button, .k-svc-tile, .k-svc-drop, .k-tabs__tab, .k-withdrawal__button, .k-footer__fn, a[class*="button"], a[class*="btn"], .cmplz-btn, .k-menu > li > a, .k-menu .sub-menu a { border-radius: 0 !important; } img, picture, video, .k-tile__media, .k-hsc, .k-cat__media, .k-card__media, .k-stage, .k-stage__media, .k-prose img, .woocommerce-product-gallery, .woocommerce-product-gallery__image, .flex-control-thumbs img, [class*="__media"], [class*="__img"], [class*="__image"], [class*="__thumb"] { border-radius: 0 !important; } /* 0.8.40 Service-Kacheln: Kurztext aus dem Redesign-Entwurf fix unter dem Titel. */ .k-svc-tile { justify-content: flex-start; gap: 8px; } /* 0.8.41 Kachel ist ein Link (kein Aufklapptext mehr) */ a.k-svc-tile, a.k-svc-tile:hover, a.k-svc-tile:focus { text-decoration: none; color: var(--k-ink); } .k-svc-tile__text { display: block; max-width: 22ch; color: var(--k-muted); font-size: .8125rem; font-weight: 400; line-height: 1.35; } @media (max-width: 767.98px) { .k-svc-tile__text { font-size: .75rem; } } @media (max-width: 389.98px) { .k-svc-tile__text { font-size: .7rem; } } /* 0.8.42 Handy: ohne Kurztext, alle fünf Service-Punkte in einer Reihe */ @media (max-width: 767.98px) { .k-servicebar__tiles { flex-wrap: nowrap; gap: 6px; padding-block: 14px; } .k-svc-item { flex: 1 1 0; min-width: 0; } .k-svc-tile { min-height: 0; gap: 6px; padding: 10px 2px 8px; font-size: .66rem; line-height: 1.2; justify-content: flex-start; } .k-svc-tile__icon { width: 36px; height: 36px; } .k-svc-tile__icon .k-icon { width: 19px; height: 19px; } .k-svc-tile__label { overflow-wrap: normal; word-break: normal; hyphens: manual; } .k-svc-tile__text { display: none; } } @media (max-width: 359.98px) { .k-svc-tile { font-size: .6rem; } .k-svc-tile__icon { width: 32px; height: 32px; } } /* 0.8.42 Startseite Textbereich: drei gleich breite Felder im Theme-Stil – eckig, ohne Schatten, farbige Oberkante wie Navigation und Sortimentskacheln, Überschrift in der Display-Schrift. */ .k-about .k-about__col { --k-about-c: #FCB900; padding: clamp(20px, 2.4vw, 28px) 0 0; border: 0; border-top: 4px solid var(--k-about-c); border-radius: 0; background: transparent; box-shadow: none; } .k-about .k-about__col--green { --k-about-c: #2e9b45; } .k-about .k-about__col--blue { --k-about-c: #1f6fd1; } .k-about .k-about__col--yellow { --k-about-c: #f5c400; } .k-about .k-about__col h3 { margin: 0 0 10px; color: var(--k-ink); font-family: var(--k-font-display); font-style: normal; font-weight: 800; font-size: clamp(1.15rem, 1rem + .45vw, 1.4rem); line-height: 1.2; letter-spacing: -.01em; } .k-about .k-about__col p { max-width: none; } @media (min-width: 1024px) { .k-about { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 40px); row-gap: 20px; } .k-about .k-about__col, .k-about .k-about__col:last-child, .k-about .k-about__col--wide { grid-column: auto; padding-top: clamp(20px, 2.4vw, 28px); } } @media (max-width: 1023.98px) { .k-about { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } } /* 0.8.42 Handy-Menü: WhatsApp unter der Telefonnummer; Servicefelder eckig */ .k-nav__service .k-header-action { border-radius: 0; } .k-nav__service .k-header-action--wa .klw-icon { flex: none; width: 22px; height: 22px; color: #1a9e4b; } /* 0.8.42 Einheitliche Typografie: alle Überschriften (Bühne, Abschnitte, Landingpages, Seiten, Produkt, Karten-/Kacheltitel) in Figtree 800 aufrecht mit gleichem Buchstabenabstand; Unterzeilen nicht kursiv. Produktnamen in Kartenlisten bleiben bewusst 600 (Lesetext). */ :is(.k-stage__title, .k-display, .k-lp__title, .k-lp__h2, .k-page__title, .product_title, .k-shelf__title, .k-hsc__title, .k-tile__title, .k-brandcta__title, .k-about__col h3, .k-cat-text h2, .k-cat-faq h2, .k-main h1, .k-main h2:not(.woocommerce-loop-product__title), .k-main h3:not(.woocommerce-loop-product__title)) { font-family: var(--k-font-display); font-style: normal; font-weight: 800; letter-spacing: -.02em; } .k-home-head__sub, .k-about__cta, .k-about__cta span { font-style: normal; } /* 0.8.45 Textbereich unten: drei Blöcke untereinander über die volle Breite. Jeder Block mit farbiger Linie oben; ab Tablet Überschrift links (1/3), Text rechts (2/3). */ .k-about { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; } .k-about .k-about__col { padding: clamp(22px, 2.6vw, 32px) 0; } .k-about .k-about__col + .k-about__col { margin-top: 0; } .k-about .k-about__col:last-of-type { padding-bottom: 0; } @media (min-width: 768px) { .k-about .k-about__col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(24px, 4vw, 64px); align-items: start; } .k-about .k-about__col h3 { grid-column: 1; grid-row: 1 / span 4; margin: 0; } .k-about .k-about__col p { grid-column: 2; max-width: 75ch; } } /* 0.8.46 Startseite: optische Gliederung nach den Sortimentskacheln. Empfehlungen und Textbereich liegen auf hellgrauen Bändern über die volle Bildschirmbreite (weiß – grau – weiß – grau), damit die Abschnitte nicht wie eine lange Liste wirken. Volle Breite per box-shadow/clip-path, ohne horizontales Scrollen. */ .home .k-main > .k-shelf, .home .k-main > .k-about { margin-top: clamp(36px, 4.4vw, 60px); padding-block: clamp(40px, 5vw, 64px); border-top: 0; background: var(--k-canvas); box-shadow: 0 0 0 100vmax var(--k-canvas); clip-path: inset(0 -100vmax); } .home .k-main > .k-about { margin-bottom: 0; } .home .k-main > .k-shelf + .k-section { padding-top: clamp(40px, 5vw, 64px); } .home .k-main > .k-shelf .k-card, .home .k-main > .k-shelf li.product { background: #fff; } /* 0.8.47 Textbereich: keine bunten Linien mehr, nur dezente graue Trennlinie zwischen den Blöcken */ .k-about .k-about__col { border-top: 1px solid var(--k-line); } .k-about .k-about__head + .k-about__col { border-top: 0; padding-top: 8px; } /* 0.8.48 Icons zu den drei Textblöcken – gleicher Stil wie die Service-Kacheln (dunkler Kreis, gelbes Symbol) */ .k-about__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 50%; background: #24272C; color: #FCB900; } .k-about__icon .k-icon { width: 24px; height: 24px; stroke-width: 2; } @media (max-width: 767.98px) { .k-about__icon { width: 42px; height: 42px; margin-bottom: 10px; } .k-about__icon .k-icon { width: 21px; height: 21px; } } /* 0.8.48 Beratungszeile unter dem grauen Textband: weißer Hintergrund, mehr Abstand */ .k-about-cta { background: #fff; padding-block: clamp(36px, 4.5vw, 56px); } .k-about-cta .k-about__cta { margin: 0; } .home .k-main > .k-about:has(+ .k-about-cta) { padding-bottom: clamp(40px, 5vw, 64px); } /* 0.8.48 Hauptmenü 1024–1279 px: Punkte dürfen wieder schrumpfen und zweizeilig umbrechen (0.8.40 hatte flex: 1 1 auto ohne min-width gesetzt – Menü ragte bei 1265 px um 28 px hinaus). */ @media (min-width: 1024px) and (max-width: 1279.98px) { .k-menu > li { min-width: 0; flex: 1 1 auto; } .k-menu > li > a { padding-inline: 6px; white-space: normal; text-align: center; line-height: 1.2; } } /* 0.8.49 Auch ab 1280 px darf das Menü nie über den Rand ragen (bei 1280 px fehlten 28 px): schmalere Innenabstände bis 1399 px, und Punkte dürfen notfalls umbrechen statt hinauszuragen. */ @media (min-width: 1280px) { .k-menu > li { min-width: 0; } .k-menu > li > a { white-space: normal; text-align: center; line-height: 1.2; } } @media (min-width: 1280px) and (max-width: 1399.98px) { .k-menu > li > a { padding-inline: 6px; } } /* 0.8.44 Handy: Sortimentskacheln nur mit Namen, ohne kleinen Zusatztext */ @media (max-width: 767.98px) { .k-sortiment .k-tiles--bento .k-tile__kicker { display: none; } } /* 0.8.50 Textbereich unten: drei Punkte nebeneinander – großes Icon, Überschrift darunter; Text klappt per Klick/Tippen auf oder erscheint beim Darüberfahren (navigation.js [data-k-drop]). Die Textfelder liegen in einer zweiten Rasterzeile über die volle Breite, damit nichts überlappt oder abgeschnitten wird. */ .k-about__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(8px, 2vw, 24px); } .k-about__item { display: contents; } .k-about .k-about__h { grid-row: 1; margin: 0; } .k-about__btn { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; height: 100%; margin: 0; padding: 18px 8px 16px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--k-ink); font: inherit; text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; } .k-about__btn:hover, .k-about__btn[aria-expanded="true"] { border-bottom-color: #FCB900; background: #fff; } .k-about__btn:focus-visible { outline: 2px solid var(--k-navy); outline-offset: 2px; } .k-about__btn .k-icon--chevron-down { width: 18px; height: 18px; color: var(--k-muted); transition: transform .15s; } .k-about__btn[aria-expanded="true"] .k-icon--chevron-down { transform: rotate(180deg); } .k-about .k-about__icon { width: 88px; height: 88px; margin: 0; } .k-about .k-about__icon .k-icon { width: 42px; height: 42px; stroke-width: 1.8; } .k-about__label { display: block; max-width: 22ch; font-size: clamp(1.1rem, .95rem + .55vw, 1.45rem); line-height: 1.2; } .k-about__panel { grid-row: 2; grid-column: 1 / -1; padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 36px); border-top: 3px solid #FCB900; background: #fff; color: var(--k-ink-2); line-height: 1.7; } .k-about__panel[hidden] { display: none; } .k-about__panel p { max-width: 80ch; margin: 0 auto 1em; } .k-about__panel p:last-child { margin-bottom: 0; } @media (max-width: 767.98px) { .k-about__btn { gap: 10px; padding: 12px 2px 10px; } .k-about .k-about__icon { width: 60px; height: 60px; } .k-about .k-about__icon .k-icon { width: 30px; height: 30px; } .k-about__label { font-size: .875rem; hyphens: auto; } } @media (prefers-reduced-motion: reduce) { .k-about__btn, .k-about__btn .k-icon--chevron-down { transition: none; } } /* 0.8.54 Textbereich: mehr Abstand zwischen großem Icon und Überschrift */ .k-about__btn { gap: 26px; padding-top: 24px; } @media (max-width: 767.98px) { .k-about__btn { gap: 16px; padding-top: 14px; } } /* 0.8.51 Service-Kacheln: weißer Hintergrund, gelber Rahmen, Texte schwarz */ .k-svc-tile, a.k-svc-tile { border: 2px solid #FCB900; background: #fff; box-shadow: none; color: #111418; } .k-svc-tile:hover, .k-svc-tile:focus, .k-svc-tile:active, a.k-svc-tile:hover, a.k-svc-tile:focus { border-color: #FCB900; background: #fff; box-shadow: 0 6px 18px rgb(16 24 40 / 10%); color: #111418; } .k-svc-tile__label, .k-svc-tile__text { color: #111418; } /* 0.8.61 Such-Button wieder mit weißer Schrift (Vorgabe Raphael; Kontrast-Hinweis in PageSpeed bewusst in Kauf genommen) */ /* 0.8.58 Einheitlich eckig: auch Formularfelder (Suche, Preisfilter, Sortierung, Menge, Kontakt, Kasse) */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .select2-container .select2-selection, .woocommerce .quantity .qty { border-radius: 0 !important; } /* 0.8.57 Service-Kacheln ganz ohne Rahmen (Raphael); Hover nur mit leichtem Schatten */ .k-svc-tile, a.k-svc-tile, .k-svc-tile:hover, .k-svc-tile:focus, .k-svc-tile:active, a.k-svc-tile:hover, a.k-svc-tile:focus { border: 0; } /* 0.8.52 Überschriften der Service-Kacheln größer; am Handy (5 in einer Reihe) bleibt die Größe, damit nichts überläuft */ @media (min-width: 768px) { .k-svc-tile__label { font-family: var(--k-font-display); font-size: 1rem; font-weight: 800; letter-spacing: -.01em; } } @media (min-width: 1024px) { .k-svc-tile__label { font-size: clamp(1.05rem, .8rem + .4vw, 1.2rem); } } /* 0.8.50 Markenleiste: zwei Zeilen mit je vier Logos (auch am Desktop), Logos dafür größer */ @media (min-width: 768px) { .k-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } .k-logos li { border-left: 1px solid var(--k-line); } .k-logos li:nth-child(4n+1) { border-left: 0; } .k-logos li:nth-child(n+5) { border-top: 1px solid var(--k-line); } .k-logos__item { min-height: 120px; padding: 16px 20px; } .k-logos__item img { max-width: min(100%, 210px); max-height: 76px; } } /* 0.8.53 Markenleiste: zehn Logos, fünf pro Reihe (zwei Reihen) – am Handy kleiner, ebenfalls fünf pro Reihe */ @media (min-width: 768px) { .k-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); } .k-logos li, .k-logos li:nth-child(4n+1) { border-left: 1px solid var(--k-line); } .k-logos li:nth-child(5n+1) { border-left: 0; } .k-logos li:nth-child(n+5) { border-top: 0; } .k-logos li:nth-child(n+6) { border-top: 1px solid var(--k-line); } .k-logos__item { min-height: 110px; padding: 14px 16px; } .k-logos__item img { max-width: min(100%, 180px); max-height: 68px; } } @media (max-width: 767.98px) { .k-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); } .k-logos li { border-left: 1px solid var(--k-line); border-top: 0; } .k-logos li:nth-child(5n+1) { border-left: 0; } .k-logos li:nth-child(n+6) { border-top: 1px solid var(--k-line); } .k-logos__item { min-height: 64px; padding: 6px 4px; } .k-logos__item img { max-height: 40px; } } /* 0.8.64: Authorized-by – kein seitliches Siegel auf Startseite und Produktseiten, dort Inhalts-Siegel unter der Galerie */ body.home [data-authorizedby-rendered-badge="mid"] { display: none !important; } body.single-product [data-authorizedby-badge] > [data-authorizedby-rendered-badge="mid"] { visibility: hidden; } .k-authorized { min-width: 0; margin-top: 16px; } .k-authorized:not(:has([data-authorizedby-rendered-badge])) { display: none; } @media (min-width: 768px) { .woocommerce div.product > .k-authorized { grid-column: 1; grid-row: 2; margin-top: -24px; } .woocommerce div.product > .summary { grid-row: 1 / span 2; } } /* 0.8.62 (Livegang): Google-Bewertungen ohne Namen */ .klr-card__author { display: none; } /* 0.8.62: Kasse am Desktop zweispaltig – links Daten, rechts Bestellung (mitlaufend) */ @media (min-width: 1024px) { .woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); column-gap: 48px; align-items: start; max-width: none; } .k-woo-page .k-b-text:has(.k-checkout-reviews) > .woocommerce > form.checkout { max-width: none; } .woocommerce-checkout form.checkout > * { grid-column: 1; min-width: 0; } .woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; } .woocommerce-checkout form.checkout > #customer_details { grid-row: 1 / span 3; } .woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 24px; } .admin-bar.woocommerce-checkout form.checkout > #order_review { top: 56px; } .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { float: none; width: 100%; } }