.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* Klaro Kiel Design. Quelle: elementor/kit-custom.src.css */
:root { --petrol: #0E4D5A; --petrol-hover: #0A3946; --petrol-dunkel: #0B3D47; --tiefsee: #082F37;
--mint: #CFE7E4; --mint-hell: #E5F1EF; --gelb: #F2C14E; --gelb-hover: #F5CD6B;
--weiss: #FFFFFF; --gischt: #F4F9F9; --text: #10343C; --text-2: #4A6870; --text-3: #24525C;
--label: #3D6A76; --linie: #DCEAE8; --linie-2: #C9DEDC; --rahmen: #B7D1D0;
--dunkel-linie: #23697A; --dunkel-text: #E3EFEE; --dunkel-feld: #12505D;
--kk-font: 'Outfit', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--shadow-lift: 0 18px 40px -20px rgba(8, 47, 55, 0.38);
--wrap: 1200px; --gutter: 24px;
--kk-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
--kk-i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M6 20V9l6-5 6 5v11'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
--kk-i-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3zM14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E");
--kk-i-coin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='5'/%3E%3Cpath d='M14.5 10.5a5 5 0 1 1-4 4'/%3E%3C/svg%3E");
--kk-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
--kk-i-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12l-8 8-9-9V4h7z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
--kk-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
--kk-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
--kk-i-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.4-4A8 8 0 1 1 8 18.6z'/%3E%3C/svg%3E");
--kk-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { background: var(--gischt); color: var(--text); font-family: var(--kk-font); -webkit-font-smoothing: antialiased; }
::selection { background: var(--gelb); color: var(--tiefsee); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.elementor-location-header { position: sticky; top: 0; z-index: 40; }
.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .elementor-location-header { top: 0; } }
.elementor-editor-active .kk-action-bar, .elementor-editor-preview .kk-action-bar { position: static !important; transform: none !important; opacity: 1 !important; }
body .elementor {
.e-div-block-base, .e-flexbox-base { padding: 0; min-width: 0; }
[class*="kk-"] { box-sizing: border-box; }
:is(.kk-header, .kk-hero, .kk-section, .kk-gebiet, .kk-footer, .kk-action-bar, .kk-legal) { font-family: var(--kk-font); color: var(--text); line-height: 1.5; font-size: 16px; }
:is(.kk-h1, .kk-h2, .kk-h2-small, .kk-h3, .kk-legal-h1, .kk-legal-h2) { display: block; text-wrap: balance; font-family: var(--kk-font); }
:is(.kk-text, .kk-lead, .kk-hero-text, .kk-legal-text) { display: block; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; border-radius: 6px; }
.kk-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.kk-section { padding-block: 96px; }
.kk-section-head { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.kk-kicker { display: block; font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.kk-on-dark .kk-kicker { color: var(--gelb); }
.kk-h2 { margin: 0; font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: inherit; }
.kk-lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--text-2); max-width: 62ch; }
.kk-on-dark { background: var(--petrol-dunkel); color: var(--weiss); }
.kk-on-dark .kk-lead { color: var(--mint); }
.kk-h3 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.25; color: inherit; }
.kk-text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.kk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; min-height: 48px; padding: 14px 24px; border-radius: 10px; border: 0; font-family: var(--kk-font); font-weight: 700; font-size: 17px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, transform 160ms var(--ease-out), box-shadow 220ms ease; }
.kk-btn:active { transform: scale(0.97); }
.kk-btn-primary { background: var(--petrol); color: var(--weiss); }
.kk-btn-primary:hover, .kk-btn-primary:focus-visible { background: var(--petrol-hover); color: var(--weiss); }
.kk-btn-gelb { background: var(--gelb); color: var(--text); }
.kk-btn-gelb:hover, .kk-btn-gelb:focus-visible { background: var(--gelb-hover); color: var(--text); }
.kk-btn-weiss { background: var(--weiss); color: var(--petrol); }
.kk-btn-weiss:hover, .kk-btn-weiss:focus-visible { background: var(--mint); color: var(--petrol); }
:is(.kk-btn-arrow, .kk-more)::after { content: ""; flex-shrink: 0; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--kk-i-arrow) center / contain no-repeat; mask: var(--kk-i-arrow) center / contain no-repeat; transition: transform 220ms var(--ease-out); }
:is(.kk-btn-call, .kk-btn-wa)::before { content: ""; flex-shrink: 0; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--kk-i-phone) center / contain no-repeat; mask: var(--kk-i-phone) center / contain no-repeat; }
.kk-btn-wa::before { -webkit-mask-image: var(--kk-i-wa); mask-image: var(--kk-i-wa); }
@media (hover: hover) and (pointer: fine) { .kk-btn:hover { box-shadow: 0 10px 24px -14px rgba(8, 47, 55, 0.55); }
.kk-btn-arrow:hover::after { transform: translateX(3px); } }
.kk-header { background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linie); transition: box-shadow 260ms ease, background-color 260ms ease; }
.kk-header.is-scrolled { box-shadow: 0 8px 24px -18px rgba(8, 47, 55, 0.45); background: rgba(255, 255, 255, 0.97); }
.kk-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.kk-brand { display: block; width: auto; flex-shrink: 0; }
.kk-brand, .kk-brand img, img.kk-brand { height: 40px; width: auto; max-width: none; transition: transform 260ms var(--ease-out); transform-origin: left center; }
.kk-header.is-scrolled :is(.kk-brand img, img.kk-brand) { transform: scale(0.92); }
.kk-nav { display: flex; align-items: center; gap: 28px; width: auto; }
.kk-nav-link { position: relative; display: inline-block; width: auto; padding: 6px 0; background: none; border-radius: 0; color: var(--petrol); font-family: var(--kk-font); font-size: 16px; font-weight: 500; line-height: 1.4; text-decoration: none; }
.kk-nav-link:hover, .kk-nav-link:focus-visible { background: none; color: var(--petrol); }
.kk-nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--gelb); transform: scaleX(0); transform-origin: right center; transition: transform 260ms var(--ease-out); }
.kk-nav-link:hover::after, .kk-nav-link.is-active::after { transform: scaleX(1); transform-origin: left center; }
.kk-nav .kk-btn { white-space: nowrap; min-height: 44px; padding: 10px 20px; font-size: 16px; font-weight: 600; }
@media (max-width: 860px) { .kk-nav-link { display: none; } }
@media (max-width: 400px) { .kk-brand, .kk-brand img, img.kk-brand { height: 34px; }
.kk-nav .kk-btn { padding: 10px 14px; font-size: 15px; } }
.kk-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--mint-hell); display: flex; flex-direction: column; min-height: clamp(640px, calc(100svh - 69px), 940px); }
.kk-hero-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.kk-hero-bg > .elementor-element, .kk-hero-bg .elementor-widget-container { width: 100%; height: 100%; }
.kk-hero-bg svg { display: block; width: 100%; height: 100%; }
.kk-hero-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 44% 40% at 50% 30%, rgba(229, 241, 239, 0.92), rgba(229, 241, 239, 0) 72%); }
.kk-hero-inner { flex: 1; display: flex; justify-content: center; align-items: center; padding-block: clamp(40px, 6vh, 72px) max(310px, 19vw); }
.kk-hero-copy { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 900px; text-align: center; }
.kk-hero-kicker { display: block; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }
.kk-h1 { margin: 0; font-size: clamp(48px, 5.6vw, 80px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--petrol); }
.kk-h1 .line { display: inline-block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; vertical-align: top; }
.kk-h1 .line > span { display: block; }
.kk-bar { height: 6px; width: 72px; background: var(--gelb); border-radius: 3px; transform-origin: center; }
.kk-hero-text { margin: 0; font-size: 20px; line-height: 1.55; color: var(--text-3); max-width: 600px; }
.kk-hero-actions { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: center; }
.kk-call-link { display: flex; flex-direction: column; justify-content: center; align-items: center; width: auto; min-height: 44px; text-decoration: none; color: var(--text); }
.kk-call-small { display: block; font-size: 14px; color: var(--text-2); }
.kk-call-number { display: block; font-size: 20px; font-weight: 700; color: var(--text); background: linear-gradient(var(--gelb), var(--gelb)) left 92% / 0% 3px no-repeat; transition: background-size 300ms var(--ease-out); }
.kk-call-link:hover .kk-call-number { background-size: 100% 3px; }
@media (max-width: 600px) { .kk-h1 .line { display: block; } .kk-hero-copy { gap: 20px; } .kk-hero-inner { padding-bottom: 350px; } }
@media (max-width: 520px) { .kk-hero-text { font-size: 18px; } }
.kk-rechner { background: var(--gischt); }
.kk-rechner .kk-section-inner { display: flex; flex-direction: column; gap: 40px; }
.kk-calc-host { font-family: var(--kk-font); color: var(--text); line-height: 1.5; }
.kk-calc-host .calc { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: stretch; }
.kk-calc-host .calc-form { background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 28px; min-width: 0; margin: 0; }
.kk-calc-host .field { display: flex; flex-direction: column; gap: 12px; }
.kk-calc-host .field[hidden], .kk-calc-host .option[hidden], .kk-calc-host .credit[hidden], .kk-calc-host [hidden] { display: none !important; }
.kk-calc-host fieldset.field { display: block; margin: 0; padding: 0; border: 0; min-width: 0; }
.kk-calc-host fieldset.field > legend { padding: 0; margin-bottom: 12px; float: none; width: auto; }
.kk-calc-host .field-label { font-size: 16px; font-weight: 700; color: var(--text); }
.kk-calc-host .pills { display: flex; flex-wrap: wrap; gap: 10px; }
.kk-calc-host .pill { position: relative; min-height: 48px; margin: 0; padding: 10px 18px; border-radius: 10px; border: 2px solid var(--rahmen); background: var(--weiss); color: var(--text); font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.25; cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out); }
.kk-calc-host .pill:hover, .kk-calc-host .pill:focus { border-color: var(--petrol); background: var(--weiss); color: var(--text); }
.kk-calc-host .pill:active { transform: scale(0.97); }
.kk-calc-host .pill[aria-pressed="true"], .kk-calc-host .pill[aria-pressed="true"]:hover { background: var(--petrol); border-color: var(--petrol); color: var(--weiss); }
.kk-calc-host .pill small { font-size: 14px; font-weight: 500; color: var(--text-2); margin-left: 4px; transition: color 200ms ease; }
.kk-calc-host .pill[aria-pressed="true"] small { color: var(--mint); }
.kk-calc-host .pill-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.kk-calc-host .pill-check { color: var(--rahmen); transition: color 200ms ease, transform 260ms var(--ease-out); }
.kk-calc-host .pill-toggle[aria-pressed="true"] .pill-check { color: var(--gelb); transform: scale(1.1); }
.kk-calc-host .hint { margin: 12px 0 0; min-height: 3em; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.kk-calc-host .range-head { display: flex; justify-content: space-between; align-items: baseline; }
.kk-calc-host .range-value { font-size: 22px; font-weight: 800; color: var(--petrol); font-variant-numeric: tabular-nums; }
.kk-calc-host .range-scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); }
.kk-calc-host input[type=range].slider { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; --fill: 0%; }
.kk-calc-host .slider::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(to right, var(--petrol) var(--fill), var(--mint) var(--fill)); }
.kk-calc-host .slider::-moz-range-track { height: 8px; border-radius: 99px; background: var(--mint); }
.kk-calc-host .slider::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--petrol); }
.kk-calc-host .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--gelb); border: 4px solid var(--weiss); box-shadow: 0 2px 10px rgba(8, 47, 55, 0.35); transition: transform 160ms var(--ease-out); }
.kk-calc-host .slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--gelb); border: 4px solid var(--weiss); box-shadow: 0 2px 10px rgba(8, 47, 55, 0.35); }
.kk-calc-host .slider:active::-webkit-slider-thumb { transform: scale(1.15); }
.kk-calc-host .stepper-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kk-calc-host .stepper-row small { display: block; font-size: 14px; color: var(--text-2); }
.kk-calc-host .stepper { display: flex; align-items: center; gap: 12px; }
.kk-calc-host .stepper button { width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 10px; border: 1px solid var(--rahmen); background: var(--gischt); color: var(--petrol); font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background-color 180ms ease, transform 140ms var(--ease-out); }
.kk-calc-host .stepper button:hover, .kk-calc-host .stepper button:focus { background: var(--mint); color: var(--petrol); border-color: var(--rahmen); }
.kk-calc-host .stepper button:active { transform: scale(0.94); }
.kk-calc-host .stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
.kk-calc-host .stepper output { min-width: 40px; text-align: center; font-size: 22px; font-weight: 800; color: var(--petrol); font-variant-numeric: tabular-nums; }
.kk-calc-host .options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 10px; }
.kk-calc-host .option { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 16px; border: 2px solid var(--linie-2); border-radius: 12px; background: var(--weiss); cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease, transform 160ms var(--ease-out); }
.kk-calc-host .option:active { transform: scale(0.985); }
.kk-calc-host .option input { width: 22px; height: 22px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--petrol); cursor: pointer; }
.kk-calc-host .option strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--text); }
.kk-calc-host .option small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.kk-calc-host .option:has(input:checked) { border-color: var(--petrol); background: var(--mint-hell); }
.kk-calc-host .option:has(input:focus-visible) { outline: 3px solid var(--gelb); outline-offset: 2px; }
.kk-calc-host .option input:focus-visible { outline: none; }
.kk-calc-host .option-wert { border-style: dashed; border-color: #E3C77E; background: #FFF9EA; }
.kk-calc-host .option-wert:has(input:checked) { border-style: solid; border-color: var(--gelb); background: #FDF0CC; }
@media (hover: hover) and (pointer: fine) { .kk-calc-host .option:hover { border-color: var(--petrol); }
.kk-calc-host .option-wert:hover { border-color: #D9AE3F; } }
.kk-calc-host .calc-result { background: var(--petrol-dunkel); color: var(--weiss); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 20px; min-width: 0; position: relative; overflow: hidden; }
.kk-calc-host .calc-result::before { content: ""; position: absolute; width: 260px; height: 260px; right: -110px; top: -110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(242, 193, 78, 0.22), transparent); pointer-events: none; transition: transform 600ms var(--ease-arrive); }
.kk-calc-host .calc-result.is-updated::before { transform: scale(1.25); }
.kk-calc-host .small-label { font-size: 15px; font-weight: 600; color: var(--mint); }
.kk-calc-host .price { font-size: clamp(36px, 4vw, 52px); font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--weiss); }
.kk-calc-host .price-sub { font-size: 15px; line-height: 1.5; margin-top: 8px; color: var(--mint); }
.kk-calc-host .calc-result hr { border: 0; height: 1px; background: var(--dunkel-linie); margin: 0; }
.kk-calc-host .ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--dunkel-text); }
.kk-calc-host .ticks li { display: flex; gap: 10px; }
.kk-calc-host .ticks svg { flex-shrink: 0; margin-top: 2px; }
.kk-calc-host .calc-result .btn { margin-top: auto; }
.kk-calc-host .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 24px; border-radius: 10px; border: 0; font-weight: 700; font-size: 17px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 180ms ease, transform 160ms var(--ease-out), box-shadow 220ms ease; }
.kk-calc-host .btn:active { transform: scale(0.97); }
.kk-calc-host .btn-gelb, .kk-calc-host .btn-gelb:visited { background: var(--gelb); color: var(--text); }
.kk-calc-host .btn-gelb:hover { background: var(--gelb-hover); color: var(--text); }
.kk-calc-host .btn .arrow { transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .kk-calc-host .btn:hover { box-shadow: 0 10px 24px -14px rgba(8, 47, 55, 0.55); } .kk-calc-host .btn:hover .arrow { transform: translateX(3px); } }
.kk-calc-host .disclaimer { font-size: 13px; line-height: 1.5; color: #B9D6D3; }
.kk-calc-host .credit { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: rgba(242, 193, 78, 0.14); color: var(--gelb); font-size: 15px; line-height: 1.45; }
.kk-calc-host .credit svg { flex-shrink: 0; margin-top: 1px; }
.kk-calc-host .credit > span { color: var(--dunkel-text); }
.kk-calc-host .credit strong { color: var(--weiss); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .kk-calc-host .calc { grid-template-columns: 1fr; } .kk-calc-host .calc-form, .kk-calc-host .calc-result { padding: 24px; } }
@media (min-width: 901px) { .kk-calc-host .calc { align-items: start; } .kk-calc-host .calc-result { position: sticky; top: 96px; } }
.kk-calc-host .calc-peek { display: none; }
@media (max-width: 900px) { .kk-calc-host .calc-peek { display: flex; position: fixed; z-index: 35; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; min-height: 52px; border-radius: 14px; background: var(--petrol-dunkel); color: var(--weiss); font-size: 15px; text-decoration: none; box-shadow: 0 12px 32px -12px rgba(8, 47, 55, 0.6); opacity: 0; transform: translateY(calc(100% + 24px)); pointer-events: none; transition: transform 320ms var(--ease-out), opacity 200ms ease; }
.kk-calc-host .calc-peek.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.kk-calc-host .calc-peek strong { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kk-calc-host .calc-peek .peek-go { display: inline-flex; align-items: center; gap: 6px; color: var(--gelb); font-weight: 700; white-space: nowrap; } }
@media (max-width: 600px) { .kk-calc-host .calc .pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kk-calc-host .calc .pill { width: 100%; padding-inline: 10px; }
.kk-calc-host .calc .pills > .pill:last-child:nth-child(odd) { grid-column: 1 / -1; }
.kk-calc-host .calc .pills[data-key="size"] { grid-template-columns: repeat(3, 1fr); }
.kk-calc-host .calc .pills[data-key="size"] > .pill:last-child { grid-column: auto; }
.kk-calc-host .calc .pills[data-key="size"] small { display: block; margin: 2px 0 0; } }
.kk-leistungen { background: var(--weiss); }
.kk-leistungen .kk-section-inner { display: flex; flex-direction: column; gap: 48px; }
.kk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.kk-card { position: relative; background: var(--gischt); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--linie); }
.kk-card-media { overflow: hidden; aspect-ratio: 960 / 560; background: var(--mint-hell); }
.kk-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-arrive); }
.kk-card-body { padding: 28px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.kk-more { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 44px; padding: 0; background: none; border-radius: 0; color: var(--petrol); font-family: var(--kk-font); font-size: 16px; font-weight: 600; text-decoration: none; }
.kk-more:hover, .kk-more:focus-visible { background: none; color: var(--petrol-hover); }
.kk-more::before { content: ""; position: absolute; inset: 0; z-index: 1; }
@media (hover: hover) and (pointer: fine) { .kk-card { transition: transform 420ms var(--ease-arrive), box-shadow 420ms var(--ease-arrive), border-color 300ms ease; }
.kk-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: transparent; }
.kk-card:hover .kk-card-media img { transform: scale(1.05); }
.kk-card:hover .kk-more::after { transform: translateX(4px); } }
.kk-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.kk-extra { background: var(--gischt); border-radius: 14px; padding: 22px; display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--linie); transition: background-color 260ms ease, border-color 260ms ease; }
.kk-extra-text { display: flex; flex-direction: column; gap: 4px; }
.kk-extra .kk-h3 { font-size: 18px; }
.kk-extra .kk-text { font-size: 15px; line-height: 1.5; }
.kk-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; background: var(--mint); color: var(--petrol); display: grid; place-items: center; transition: background-color 260ms ease, color 260ms ease, transform 360ms var(--ease-arrive); }
.kk-ic::before { content: ""; position: static; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--kk-i) center / contain no-repeat; mask: var(--kk-i) center / contain no-repeat; }
.kk-ic-home { --kk-i: var(--kk-i-home); }
.kk-ic-truck { --kk-i: var(--kk-i-truck); }
.kk-ic-coin { --kk-i: var(--kk-i-coin); }
.kk-ic-tag { --kk-i: var(--kk-i-tag); }
.kk-ic-shield { --kk-i: var(--kk-i-shield); }
.kk-ic-phone { --kk-i: var(--kk-i-phone); }
.kk-ic-wa { --kk-i: var(--kk-i-wa); }
.kk-ic-mail { --kk-i: var(--kk-i-mail); }
@media (hover: hover) and (pointer: fine) { .kk-extra:hover { background: var(--weiss); border-color: var(--rahmen); }
.kk-extra:hover .kk-ic { background: var(--petrol); color: var(--gelb); transform: rotate(-6deg) scale(1.06); } }
.kk-ablauf .kk-section-inner { display: flex; flex-direction: column; gap: 48px; }
.kk-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.kk-step { position: relative; padding: 32px 0; display: flex; flex-direction: column; gap: 14px; }
.kk-step::before, .kk-step::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: 2px; }
.kk-step::before { background: var(--dunkel-linie); }
.kk-step::after { background: var(--gelb); transform-origin: left center; transform: scaleX(1); }
.kk-step-num { display: block; font-size: 48px; font-weight: 800; color: var(--gelb); line-height: 1; font-variant-numeric: tabular-nums; transition: color 500ms ease; }
.kk-step .kk-h3 { font-size: 22px; color: var(--weiss); }
.kk-step .kk-text { color: var(--dunkel-text); }
@media (max-width: 860px) { .kk-steps { grid-template-columns: 1fr; } }
.kk-zielgruppen { background: var(--weiss); }
.kk-zielgruppen .kk-section-inner { display: flex; flex-direction: column; gap: 40px; }
.kk-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; }
.kk-panel { border-radius: 16px; padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.kk-panel .kk-h3 { font-size: 26px; }
.kk-panel-hell { background: var(--gischt); border: 1px solid var(--linie); }
.kk-panel-dunkel { background: var(--petrol); color: var(--weiss); }
.kk-panel-dunkel .kk-h3 { color: var(--weiss); }
.kk-panel-dunkel .kk-text { color: var(--dunkel-text); }
.kk-checks { display: flex; flex-direction: column; gap: 10px; }
.kk-check { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: inherit; }
.kk-check::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; background: var(--petrol); -webkit-mask: var(--kk-i-check) center / contain no-repeat; mask: var(--kk-i-check) center / contain no-repeat; }
.kk-panel-dunkel .kk-check::before { background: var(--gelb); }
.kk-panel .kk-btn { align-self: flex-start; }
@media (max-width: 520px) { .kk-panel { padding: 26px; } }
.kk-versprechen { background: var(--gischt); }
.kk-promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; }
.kk-promise { background: var(--weiss); border-radius: 16px; padding: 36px; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--linie); }
.kk-promise .kk-h3 { font-size: 26px; }
.kk-promise .kk-ic { width: 52px; height: 52px; border-radius: 12px; transition: transform 420ms var(--ease-arrive); }
.kk-promise .kk-ic::before { width: 26px; height: 26px; }
.kk-ic-gelb { background: var(--gelb); color: var(--petrol); }
.kk-ic-petrol { background: var(--petrol); color: var(--gelb); }
@media (hover: hover) and (pointer: fine) { .kk-promise:hover .kk-ic { transform: rotate(-8deg) scale(1.08); } }
@media (max-width: 520px) { .kk-promise { padding: 26px; } }
.kk-vergleich { background: var(--weiss); }
.kk-vergleich .kk-section-inner { display: flex; flex-direction: column; gap: 32px; }
.kk-ba { --pos: 50%; position: relative; width: 100%; max-width: 1000px; margin-inline: auto; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #DDEBE9; user-select: none; touch-action: pan-y; }
.kk-ba img, .kk-ba :is(.kk-ba-after, .kk-ba-before) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; pointer-events: none; }
.kk-ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.kk-tag { position: absolute; top: 16px; z-index: 2; border-radius: 6px; padding: 6px 12px; font-size: 14px; font-weight: 600; pointer-events: none; }
.kk-tag-before { left: 16px; background: var(--text); color: var(--weiss); }
.kk-tag-after { right: 16px; background: var(--gelb); color: var(--text); }
.kk-ba .ba-divider { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 4px; margin-left: -2px; background: var(--weiss); pointer-events: none; }
.kk-ba .ba-handle { position: absolute; top: 50%; left: var(--pos); z-index: 3; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--gelb); border: 4px solid var(--weiss); display: grid; place-items: center; pointer-events: none; box-shadow: 0 4px 14px rgba(6, 30, 36, 0.3); transition: transform 200ms var(--ease-out); }
.kk-ba .ba-range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.kk-ba:hover .ba-handle, .kk-ba .ba-range:focus-visible ~ .ba-handle { transform: scale(1.1); }
.kk-ba .ba-range:focus-visible ~ .ba-handle { outline: 3px solid var(--petrol); outline-offset: 3px; }
.kk-note { display: block; font-size: 14px; color: var(--text-2); text-align: center; }
.kk-gebiet { background: var(--mint); }
.kk-gebiet-inner { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; padding-block: 72px; }
.kk-gebiet-text { flex: 1 1 380px; width: auto; display: flex; flex-direction: column; gap: 10px; }
.kk-h2-small { margin: 0; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); }
.kk-gebiet-text .kk-text { font-size: 17px; color: var(--text-3); }
.kk-orte { flex: 1 1 520px; width: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.kk-ort { display: block; background: var(--weiss); border-radius: 8px; padding: 10px 16px; font-size: 16px; font-weight: 600; color: var(--petrol); cursor: default; transition: background-color 220ms ease, color 220ms ease, transform 260ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .kk-ort:hover { background: var(--petrol); color: var(--weiss); transform: translateY(-2px); } }
.kk-faq { background: var(--gischt); }
.kk-faq-wrap { max-width: 880px; display: flex; flex-direction: column; gap: 32px; }
.kk-faq-list { border-top: 1px solid var(--linie-2); gap: 0; }
.kk-faq-item { border-bottom: 1px solid var(--linie-2); interpolate-size: allow-keywords; }
.kk-faq-head { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; }
.kk-faq-head::-webkit-details-marker { display: none; }
.kk-faq-head::after { content: ""; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--mint) linear-gradient(var(--petrol), var(--petrol)) center / 14px 2.5px no-repeat; transition: background-color 260ms ease, transform 360ms var(--ease-out); }
.kk-faq-item[open] > .kk-faq-head::after { background-color: var(--petrol); background-image: linear-gradient(var(--gelb), var(--gelb)); }
.kk-faq-head::before { content: ""; position: absolute; left: auto; right: 15px; top: 50%; width: 2.5px; height: 14px; margin-top: -7px; border-radius: 2px; background: var(--petrol); z-index: 1; transition: transform 360ms var(--ease-out), opacity 260ms ease; }
.kk-faq-item[open] > .kk-faq-head::before { transform: rotate(90deg); opacity: 0; }
.kk-faq-title, .kk-faq-title p, .kk-faq-title .e-paragraph-base { display: block; font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--text); cursor: pointer; transition: color 200ms ease; }
.kk-faq-head:hover .kk-faq-title { color: var(--petrol); }
.kk-faq-body { padding: 0 52px 24px 0; }
.kk-faq-body .kk-text { color: var(--text-2); }
.kk-faq-item::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size 380ms var(--ease-out), opacity 300ms ease, content-visibility 380ms allow-discrete; }
.kk-faq-item[open]::details-content { block-size: auto; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .kk-faq-item::details-content { transition: none; } }
.kk-kontakt-inner { display: flex; flex-wrap: wrap; gap: 48px; }
.kk-kontakt-info { flex: 1 1 360px; width: auto; display: flex; flex-direction: column; gap: 20px; }
.kk-kontakt .kk-h2 { color: var(--weiss); }
.kk-channels { display: flex; flex-direction: column; gap: 12px; }
.kk-channel { display: flex; align-items: center; gap: 12px; width: auto; align-self: flex-start; color: var(--weiss); text-decoration: none; min-height: 44px; }
.kk-channel .kk-ic { border-radius: 50%; background: var(--dunkel-feld); color: var(--gelb); }
.kk-channel-txt { display: block; font-size: 18px; font-weight: 600; color: var(--weiss); padding-bottom: 2px; background: linear-gradient(var(--gelb), var(--gelb)) left 100% / 0% 2px no-repeat; transition: background-size 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .kk-channel:hover .kk-ic { background: var(--gelb); color: var(--petrol-dunkel); transform: scale(1.06); }
.kk-channel:hover .kk-channel-txt { background-size: 100% 2px; } }
.kk-form-box { flex: 1 1 480px; width: auto; background: var(--weiss); color: var(--text); border-radius: 16px; padding: 32px; }
.kk-form { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 16px; align-items: stretch; padding: 0; }
.kk-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.kk-form-field { display: flex; flex-direction: column; gap: 6px; }
.kk-form-label { display: block; font-family: var(--kk-font); font-size: 14px; font-weight: 600; color: var(--text); }
.kk-form :is(input[type=text], input[type=email], input[type=tel], select, textarea) { width: 100%; height: 50px; margin: 0; border: 1px solid var(--rahmen); border-radius: 10px; padding: 0 14px; background: var(--gischt); color: var(--text); font-family: var(--kk-font); font-size: 16px; caret-color: var(--petrol); transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.kk-form textarea { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.kk-form :is(input[type=text], input[type=email], input[type=tel], select, textarea):hover { border-color: #8FB8B6; }
.kk-form :is(input[type=text], input[type=email], input[type=tel], select, textarea):focus { outline: none; border-color: var(--petrol); background: var(--weiss); box-shadow: 0 0 0 4px rgba(14, 77, 90, 0.14); }
.kk-form ::placeholder { color: #6E8A90; }
.kk-form input[type=file] { width: 100%; height: auto; min-width: 0; border: 1px dashed #8FB8B6; border-radius: 10px; padding: 14px; background: var(--gischt); color: var(--text); font-family: var(--kk-font); font-size: 15px; }
.kk-form input[type=file]:hover { border-color: var(--petrol); background: var(--mint-hell); }
.kk-form-consent { display: flex; gap: 10px; align-items: flex-start; }
.kk-form-consent input[type=checkbox] { width: 20px; height: 20px; min-width: 20px; margin: 2px 0 0; accent-color: var(--petrol); appearance: auto; -webkit-appearance: auto; border: 0; background: none; }
.kk-form-consent .kk-form-label { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--text-2); }
.kk-form-consent a { color: var(--petrol); text-decoration: underline; }
.kk-form .kk-btn { width: 100%; height: 56px; font-size: 18px; }
.kk-form-msg { border-radius: 10px; padding: 14px 16px; font-size: 15px; font-weight: 600; text-align: left; }
.kk-form-note { margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--mint-hell); color: var(--petrol); font-size: 15px; font-weight: 600; line-height: 1.45; }
.kk-form-note[hidden] { display: none; }
@media (max-width: 520px) { .kk-form-box { padding: 22px; } }
.kk-footer { background: var(--tiefsee); color: var(--mint); }
.kk-footer-inner { padding-block: 40px 110px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; font-size: 15px; }
.kk-foot-brand { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; width: auto; }
.kk-foot-logo, .kk-foot-logo img { height: 32px; width: auto; max-width: none; display: block; }
.kk-foot-claim { display: block; font-size: 15px; color: var(--mint); }
.kk-foot-nav { display: flex; gap: 20px; width: auto; }
.kk-foot-link { display: inline-block; width: auto; padding: 0; background: none; border-radius: 0; font-family: var(--kk-font); font-size: 15px; font-weight: 400; color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.kk-foot-link:hover, .kk-foot-link:focus-visible { background: none; color: var(--weiss); }
.kk-action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 12px; justify-content: center; background: var(--tiefsee); border-top: 1px solid var(--dunkel-linie); padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.kk-action-bar .kk-btn { flex: 1 1 0; max-width: 360px; height: 52px; }
.kk-legal { background: var(--weiss); padding-block: 72px 96px; }
.kk-legal-wrap { max-width: 820px; display: flex; flex-direction: column; gap: 14px; }
.kk-legal-h1 { margin: 0 0 12px; font-size: clamp(36px, 5vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--petrol); }
.kk-legal-h2 { margin: 24px 0 0; font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--text); }
.kk-legal-text { margin: 0; font-size: 16px; line-height: 1.65; color: var(--text-3); }
.kk-legal-text a { color: var(--petrol); }
}/* End custom CSS */