/* KERN colours on top of the template variables: template accent (light green) -> KERN yellow,
   template greens -> KERN greens. Everything else stays as in the template. */
:root {
  --_colors---core-neutral-color--accent: #FDF21E;
  --_colors---core-neutral-color--black: #062C22;
  --_colors---core-neutral-color--dark-green: #04382A;
  --_colors---core-neutral-color--green: #017153;
  --_colors---core-neutral-color--whitesmoke: #EDF0EE;
  --_colors---text-color--text-on-accent-primary: #04382A;
}
/* yellow surfaces carry dark text (yellow on white or white on yellow is unreadable) */
.stats-number-wrap { color: #04382A; }
/* the KERN logo is a square, not a wide wordmark */
.logo-brand .image, .logo-brand.footer .image, .image.floating { width: auto; height: 100%; aspect-ratio: auto; object-fit: contain; }
.logo-brand.footer { width: auto; }
/* founder avatar slot shows the logo instead of a portrait */
.img-founder .image { object-fit: contain; background: #fff; }
/* no Webflow badge on a client draft */
.w-webflow-badge { display: none !important; }
/* square logo needs more height than the template's wide wordmark */
.logo-brand.hero { height: 4.2vw; gap: .8vw; }
.logo-brand.footer { height: 4vw; }
@media (max-width: 767px) { .logo-brand.hero, .logo-brand { height: 2.8rem; } .logo-brand.footer { height: 3.2rem; } }
/* hero background is the video from draft 1 */
.wrapper-image-background video.image { object-fit: cover; object-position: 50% 0%; width: 100%; height: 100%; display: block; }
/* when the phone blocks autoplay (iPhone low power mode, data saver) iOS draws a play button over the poster; hide it so only the calm still shows */
.wrapper-image-background video::-webkit-media-controls,
.wrapper-image-background video::-webkit-media-controls-panel,
.wrapper-image-background video::-webkit-media-controls-overlay-play-button,
.wrapper-image-background video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; opacity: 0 !important; }
/* no floating round menu after the hero (Gianni, 15.09.2026); the normal navigation and the mobile menu stay */
.menu-navbar-floating { display: none !important; }

/* ---------- Footer taken over from draft 2 (Expreship layout), typeset in Instrument Sans ---------- */
.kf{position:relative;margin-top:var(--_sizes---section--section-padding-vertical);padding:80px 0 32px;background:linear-gradient(180deg,#007153 0%,#04382A 70%);color:#fff;font-family:var(--_typography---font--body-font);font-size:16px;line-height:1.62;letter-spacing:0}
.kf::before{content:"";position:absolute;inset:0;background:url(../bilder/karte-weiss.png) 50% 60px/60% auto no-repeat;opacity:.12}
.kf *{box-sizing:border-box}
.kf-wrap{width:min(1280px,100% - 32px);margin-inline:auto;position:relative}
.kf-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.15fr;gap:40px;margin-bottom:64px}
.kf .kf-blurb{max-width:34ch;margin-top:26px;color:#C1C1CB}
.kf h2{font-family:var(--_typography---font--heading-font);font-size:20px;line-height:1.4;letter-spacing:-.3px;font-weight:600;color:#fff;margin:0 0 24px}
.kf p{margin:0;color:#C1C1CB;font-size:16px}
.kf a{color:inherit;text-decoration:none}
.kf ul{list-style:none;margin:0;padding:0}
.kf-links li{display:flex;align-items:center;gap:12px}
.kf-links li+li{margin-top:12px}
.kf-links li::before{content:"";width:7px;height:7px;background:#FDF21E;border-radius:1.5px;flex:none;transition:transform .25s}
.kf-links li:hover::before{transform:rotate(45deg)}
.kf-links a{color:#C1C1CB;font-size:16px;transition:color .25s}
.kf-links a:hover{color:#FDF21E}
.kf-logo{display:flex;align-items:center;gap:12px;color:#fff}
.kf-logo img{height:44px;width:auto;border-radius:0}
.kf-logo b{font-family:var(--_typography---font--heading-font);font-weight:700;font-size:22px;letter-spacing:-.5px;line-height:1;display:block}
.kf-logo small{display:block;font-weight:500;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:#E2E2E7;margin-top:3px}
.kf-follow{margin-top:40px}
.kf-follow span{display:block;font-size:16px;font-weight:600;margin-bottom:18px}
.kf-social{display:flex;gap:7px}
.kf-social a{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;background:rgba(4,56,42,.48);border:1px solid rgba(255,255,255,.31);transition:.25s}
.kf-social a:first-child,.kf-social a:hover{background:#FDF21E;border-color:#FDF21E;color:#04382A}
.kf-ic{width:14px;height:14px;display:inline-block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.kf-contact li{display:flex;align-items:flex-start;gap:14px;color:#C1C1CB}
.kf-contact li+li{margin-top:16px}
.kf-contact li>a,.kf-contact li>span:last-child{padding-top:6px}
.kf-contact a:hover{color:#FDF21E}
.kf-cico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;color:#FDF21E;background:rgba(4,56,42,.48);border:1px solid rgba(255,255,255,.31)}
.kf-cico .kf-ic{width:16px;height:16px}
.kf-bottom{display:grid;grid-template-columns:1fr 2fr 1fr;height:70px;border-radius:10px;background:rgba(4,56,42,.48);border:1px solid rgba(255,255,255,.18)}
.kf-bottom>*{display:flex;align-items:center;justify-content:center;font-size:14px;color:#C1C1CB;text-align:center;padding:0 16px}
.kf-bottom>*+*{border-left:1px solid rgba(255,255,255,.18)}
.kf-bottom a:hover{color:#FDF21E}
.kf-bottom b{color:#fff;font-weight:600}
@media (max-width:1280px){
  .kf{padding-top:64px}
  .kf-grid{grid-template-columns:1fr 1fr;gap:36px}
  .kf-follow{margin-top:24px}
}
@media (max-width:767px){
  .kf-grid{grid-template-columns:1fr}
  .kf-bottom{grid-template-columns:1fr;height:auto;padding:8px 0}
  .kf-bottom>*{padding:12px 16px}
  .kf-bottom>*+*{border-left:0;border-top:1px solid rgba(255,255,255,.18)}
}
/* six service cards instead of three: same card width, wrapped into two rows of three */
@media (min-width: 992px) { .solution-group-wrap { flex-wrap: wrap; row-gap: var(--_sizes---gap--xxs-gap); } .solution-card-wrap { width: calc((100% - 2 * var(--_sizes---gap--xxs-gap)) / 3); } }

/* ---------- Image marquee section between "Ablauf" and "Zahlen" (Gianni, 16.09.2026) ----------
   two rows of rounded photos drifting slowly, top row left to right, bottom row right to left */
.kb-section{padding-left:0;padding-right:0;overflow:hidden;display:flex;flex-direction:column;gap:var(--_sizes---gap--xxs-gap)}
.kb-row{width:100%;overflow:hidden}
.kb-track{display:flex;gap:var(--_sizes---gap--xxs-gap);width:max-content;will-change:transform;animation:kb-scroll 90s linear infinite}
.kb-row.kb-ltr .kb-track{animation-direction:reverse}
.kb-row:hover .kb-track{animation-play-state:paused}
.kb-item{flex:none;width:30vw;height:19vw;border-radius:var(--_sizes---radius--md-radius);overflow:hidden}
.kb-item img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
@keyframes kb-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--_sizes---gap--xxs-gap) / 2))}}
@media (max-width:991px){.kb-item{width:48vw;height:31vw}.kb-track{animation-duration:60s}}
@media (max-width:479px){.kb-item{width:64vw;height:42vw}}
@media (prefers-reduced-motion:reduce){.kb-track{animation:none}}
/* the template pulls the numbers block 18vw up over the previous section; not wanted after the marquee */
.kb-section + .usp-section, .kb-section + .usp-section.margin-minus { margin-top: 0 !important; }
/* start page marquee on the same green gradient as the service page Einblicke (kern-leistung.css):
   #034B38 edges, full Kern green band behind the photos; stops moved to 34/73% so the band sits
   in the same proportion to the two photo rows as on the one-row service pages (Gianni, 22.09.2026) */
.main-section.dark.kb-section:not(.kl-einblicke) { background: linear-gradient(180deg, #034B38 0%, #017153 34%, #017153 73%, #034B38 100%); }

/* marquee section header, same tag/title styling as the template's dark sections */
.kb-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--_sizes---gap--tiny-gap);padding:0 var(--_sizes---container--container-padding-horizontal);margin-bottom:var(--_sizes---gap--xs-gap)}
.kb-tag{display:flex;justify-content:center}
.kb-title{color:#fff;max-width:18ch;margin:0}
.kb-desc{color:#C1C1CB;max-width:52ch}

/* dotted map of Switzerland in the left column of the about section, above the numbers row */
.kb-about-left{display:flex;flex-direction:column;align-items:flex-start;gap:var(--_sizes---gap--xs-gap);flex:none}
/* map a bit larger and with brighter grey dots for more contrast, yellow Zurich dots unchanged (Gianni, 18.09.2026) */
.kb-about-map{width:clamp(290px,32vw,520px);aspect-ratio:940/614;background:url(../bilder/karte-schweiz-zuerich-gelb-kontrast.png) center/contain no-repeat}
@media (max-width:767px){.kb-about-map{width:min(380px,84vw)}}
/* service-card hover is green (the Webflow bundle is patched from accent to green for this action); title turns white */
.title-solution-card { transition: color .3s; }
.solution-card-wrap:hover .title-solution-card { color: #fff; }

/* sticky logo top left, same spot and size as the hero logo; appears once the hero logo has scrolled away */
.kb-sticky-logo{position:fixed;top:.55vw;left:6vw;z-index:900;height:4.2vw;display:flex;align-items:center;gap:.8vw;text-decoration:none;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .35s ease,transform .35s ease}
.kb-sticky-logo img{height:100%;width:auto;display:block;border-radius:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.18))}
.kb-sticky-logo.is-visible{opacity:1;transform:none;pointer-events:auto}
@media (max-width:991px){.kb-sticky-logo{top:.4rem;left:1rem;height:2.8rem;gap:.6rem}}

/* hero video: almost no darkening, and what is left is a KERN green tint instead of black (Gianni, 16.09.2026) */
.wrapper-image-background { filter: none; }
.gradient-wrap.hero { background-image: linear-gradient(105deg, rgba(4,56,42,.6) 0%, rgba(4,56,42,.3) 26%, rgba(4,56,42,.06) 52%, rgba(4,56,42,0) 70%, rgba(4,56,42,.18) 100%); }
/* header stays readable on bright video frames */
.navigation-bar .text-nav-menu, .navigation-bar .menu-button { text-shadow: 0 1px 6px rgba(0,0,0,.35); }

/* company name next to the logo (hero navigation and sticky logo) */
.kb-logo-text{display:flex;flex-direction:column;justify-content:center;line-height:1.1;color:#fff;white-space:nowrap;font-family:var(--_typography---font--heading-font);text-shadow:0 1px 6px rgba(0,0,0,.35)}
.kb-logo-text b{font-weight:600;font-size:1.25vw;letter-spacing:-.02em}
.kb-logo-text small{font-weight:400;font-size:.8vw;opacity:.85;margin-top:.25vw;letter-spacing:.01em}
@media (max-width:991px){.kb-logo-text b{font-size:1rem}.kb-logo-text small{font-size:.7rem;margin-top:.15rem}}
/* sticky logo text: dark on light sections, white on dark ones */
.kb-sticky-logo .kb-logo-text{color:#04382A;text-shadow:none;transition:color .3s}
.kb-sticky-logo.on-dark .kb-logo-text{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35)}

/* real association logos in the hero strip: shown as they are (no invert, no crop), text-only logos as white versions */
.logo-wrap.dark { filter: none; opacity: .92; }
.logo-wrap.dark .logo-image { filter: none; object-fit: contain; }
.logo-wrap.dark .logo-image.kb-logo-white { filter: brightness(0) invert(1); }
/* one common height for all association logos; wide wordmarks are capped in width */
.logo-wrap.dark { width: auto; height: 3.6vw; max-width: 12vw; display: flex; align-items: center; justify-content: center; }
.logo-wrap.dark .logo-image { width: auto; height: 100%; max-width: 100%; }
@media (max-width: 991px) { .logo-wrap.dark { height: 2.6rem; max-width: 9rem; } }
/* all association logos whitish: wordmarks as white silhouettes, filled logos with inverted luminance */
.logo-wrap.dark { opacity: .85; }
.logo-wrap.dark .logo-image.kb-logo-light { filter: grayscale(1) brightness(1.6); }

/* hero title, text and button sit a bit higher (Gianni, 16.09.2026) */
@media (min-width: 992px) { .left-content-wrap.hero { margin-bottom: 4vw; } }
/* start page hero at 70% of the screen height instead of the full screen (Gianni, 23.09.2026);
   the text block moves closer to the bottom edge so the title keeps its distance to the navigation */
.main-section.hero-homepage:not(.kh-nav) { min-height: 70vh; }
.main-section.hero-homepage:not(.kh-nav) .hero-background { height: 70vh; }
/* the 16:9 video is cropped top and bottom at this height: keep the middle so the machines stay fully visible */
.main-section.hero-homepage:not(.kh-nav) .wrapper-image-background video { object-position: 50% 50%; }
@media (min-width: 992px) {
  .main-section.hero-homepage:not(.kh-nav) .bottom-content-wrap.vertical.hero { bottom: 3vw; }
  .main-section.hero-homepage:not(.kh-nav) .left-content-wrap.hero { margin-bottom: 0; }
}
@media (max-width: 767px) { .main-section.hero-homepage:not(.kh-nav) .hero-content-wrapper { min-height: 70vh; } }
@media (max-width: 991px) { .left-content-wrap.hero { margin-bottom: 2rem; } }
/* buttons without the thin outline */
.button-wrap { border-color: transparent; }

/* ---------- Referenzen: the six picture cards from draft 2 (Expreship layout) instead of the template's
   carousel, on the section's dark green (Gianni, 16.09.2026). Sizes as in draft 2: 365px cards, 20px gaps,
   15px/10px radii, label box in dark green at 80 %, yellow arrow tab in the corner ---------- */
.kb-proj-grid{position:relative;margin-top:var(--_sizes---gap--xs-gap)}
.kb-proj-row{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.kb-proj-row:last-child{margin-bottom:0}
.kb-proj-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.kb-proj-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:365px;border-radius:15px;padding:20px;background-size:cover;background-position:center;text-decoration:none;color:#fff}
.kb-proj-label{position:relative;width:250px;max-width:100%;border-radius:10px;padding:20px}
.kb-proj-label::before{content:"";position:absolute;inset:0;border-radius:10px;background:#04382A;opacity:.8}
.kb-proj-label>*{position:relative}
.kb-proj-label h4{margin:0 0 5px;font-family:var(--_typography---font--heading-font);font-size:25px;line-height:1.4;letter-spacing:-.5px;font-weight:600;color:#fff}
.kb-proj-label h5{margin:0;font-family:var(--_typography---font--body-font);font-size:16px;line-height:1.6;font-weight:400;color:#E2E2E7}
.kb-proj-arrow{position:absolute;top:-22px;right:-22px;width:49px;height:49px;border-radius:10px;background:#FDF21E;color:#04382A;display:grid;place-items:center;transition:transform .3s}
.kb-proj-arrow svg{width:24px;height:24px}
.kb-proj-card:hover .kb-proj-arrow{transform:scale(1.1)}
.kb-proj-pair .kb-proj-label{width:240px}
/* entrance animation as in draft 2: fade in from the side, 1.25s, delays in 240ms steps */
.kb-anim{visibility:hidden}
.kb-anim.kb-animated{visibility:visible;animation-duration:1.25s;animation-fill-mode:both}
.kb-animated[data-anim="fadeInUp"]{animation-name:kb-fadeInUp}
.kb-animated[data-anim="fadeInLeft"]{animation-name:kb-fadeInLeft}
.kb-animated[data-anim="fadeInRight"]{animation-name:kb-fadeInRight}
@keyframes kb-fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
@keyframes kb-fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}
@keyframes kb-fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kb-anim{visibility:visible}.kb-anim.kb-animated{animation:none}}
@media (max-width:991px){.kb-proj-row{grid-template-columns:1fr}}
@media (max-width:640px){.kb-proj-pair{grid-template-columns:1fr}.kb-proj-card{height:300px}}

/* partner logos as their own band right below the hero instead of inside it */
.kb-logostrip{padding-top:var(--_sizes---gap--xs-gap);padding-bottom:var(--_sizes---gap--xs-gap);background-color:var(--_colors---core-neutral-color--dark-green)}
.kb-logostrip .partner-content.ceo-section{margin-top:0}
.kb-logostrip .logo-wrap-overflow{visibility:visible!important;border-left:0;border-right:0;width:100%}
.kb-logostrip .partner-logo-wrap{width:100%}

/* follower cursor always solid black instead of inverting the background (Gianni, 17.09.2026) */
.cursor-pointer { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: #000; }

/* blog card hover shimmer in KERN green instead of yellow, and softer; the category tag stays yellow */
.gradient-wrap.blog-image{background-image:linear-gradient(180deg,rgba(0,113,83,0) 35%,rgba(0,113,83,.68) 100%)}
/* slow zoom on the photo while the card is hovered */
.blog-image{overflow:hidden}
.blog-image .image{transition:transform .6s cubic-bezier(.22,.61,.36,1);will-change:transform}
.link-blog-wrap:hover .blog-image .image{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.blog-image .image{transition:none}.link-blog-wrap:hover .blog-image .image{transform:none}}

/* keep the services title on one line on desktop */
@media (min-width:768px){#leistungen .top-content-wrap .title-wrap .text-xl{white-space:nowrap;font-size:min(52px,5.2vw)}}

/* hero: company name as a big, bold H1, a tradition line under it, then two sentences and the button */
.kb-hero-title{font-size:clamp(2.4rem,4.8vw,4.3rem);font-weight:700;letter-spacing:-.035em;line-height:1.02}
@media (min-width:992px){.kb-hero-title{white-space:nowrap}}
/* the yellow claim stays hidden during the green intro and fades in right after the hero title (Gianni, 17.09.2026) */
.kb-hero-claim{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);color:#FDF21E;font-family:var(--_typography---font--heading-font);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.4rem);letter-spacing:-.01em;margin-top:14px}
.kb-hero-claim.kb-claim-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.kb-hero-claim{transition:none}}
.left-content-wrap.hero .description-wrap.hero{margin-top:18px;max-width:48ch}
.left-content-wrap.hero .description-wrap.hero .text-sm{font-size:17px;line-height:1.62}
.left-content-wrap.hero .cta-hero-wrap{margin-top:30px;align-self:flex-start;width:auto}
.left-content-wrap.hero .cta-hero-wrap .button-wrap{width:auto}

/* process section: the template pins the block for about a full screen while the cards barely move, which feels
   like the page is stuck. The scroll area now only adds a short pinned stretch after the content (Gianni, 17.09.2026) */
@media (min-width: 480px) {
  .process-scroll.secondary { height: auto; }
  .process-scroll.secondary::after { content: ""; display: block; height: 30vh; }
}
@media (min-width:992px){.left-content-wrap.hero{width:72%;max-width:960px;overflow:visible}.right-content-wrap.bottom.right.hero{width:28%}}
/* hero button in KERN green instead of yellow (Gianni, 17.09.2026) */
.left-content-wrap.hero .cta-hero-wrap .button-wrap,
.left-content-wrap.hero .cta-hero-wrap .button-wrap:hover{background-color:#007153;color:#fff}
.left-content-wrap.hero .cta-hero-wrap .button-wrap .text-xs{color:#fff}

/* numbers section: title block sits higher, KERN logo centred below the title (Gianni, 17.09.2026) */
.kb-usp-logo{display:flex;justify-content:center;margin-top:2.6vw}
.kb-usp-logo img{height:7.5vw;width:auto;display:block;border-radius:0}
@media (min-width:480px){.usp-section-title{transform:translateY(-2vw)}}
@media (max-width:991px){.kb-usp-logo{margin-top:1.2rem}.kb-usp-logo img{height:5.5rem}}
@media (max-width:479px){.kb-usp-logo img{height:4.5rem}}
/* short screens: smaller logo and tighter spacing so the title block keeps clear of the four picture cards */
@media (min-width:480px) and (max-height:820px){.kb-usp-logo{margin-top:1.6vw}.kb-usp-logo img{height:5.4vw}.usp-section-title{transform:translateY(-1vw)}}

/* custom follower cursor removed (Gianni, 18.09.2026): native cursor only */
.cursor-wrap, .cursor-core, .cursor-pointer { display: none !important; }

/* green sections (about, logo strip, insights) on #017153 instead of the dark green (Gianni, 18.09.2026);
   circles and separator inside switch to dark green so they stay visible on the new background */
.main-section.dark, .kb-logostrip { background-color: #017153; }
.main-section.dark .bg-counter, .main-section.dark .separator-line { background-color: #04382A; }

/* less space between the counters and the logo strip below (Gianni, 18.09.2026) */
#ueber-uns { padding-bottom: var(--_sizes---gap--xxs-gap); }

/* numbers section: the stat pills sit on KERN green with white text instead of yellow (Gianni, 18.09.2026) */
.usp-stats .stats-number-wrap { background-color: #017153; color: #fff; }

/* service cards: icon top right, same style as the counter icons (yellow Material Icon on a green circle);
   on hover the card turns green, so the circle flips to yellow with a dark icon */
.title-card-solution { position: relative; }
.kb-card-icon { position: absolute; top: var(--_sizes---gap--tiny-gap); right: var(--_sizes---gap--tiny-gap); z-index: 2; width: clamp(2.75rem, 3vw, 3.25rem); height: clamp(2.75rem, 3vw, 3.25rem); border-radius: var(--_sizes---radius--round); background-color: var(--_colors---core-neutral-color--green); color: var(--_colors---core-neutral-color--accent); display: flex; justify-content: center; align-items: center; transition: background-color .3s, color .3s; }
.kb-card-icon span { font-family: var(--_typography---font--icon-font); font-size: clamp(1.4rem, 1.55vw, 1.7rem); line-height: 1; }
.solution-card-wrap:hover .kb-card-icon { background-color: var(--_colors---core-neutral-color--accent); color: #04382A; }

/* small canton of Zurich coat of arms in a round dark green badge with a white ring (white badge hid the white half of the shield), pinned on the yellow Zurich area of the map (Gianni, 18.09.2026);
   position measured from the map image: centre of the yellow dots at 58.7% / 22% */
.kb-about-map { position: relative; }
.kb-about-wappen { position: absolute; left: 58.7%; top: 22%; width: 5.5%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #04382A; box-shadow: 0 0 0 1.5px #fff, 0 2px 6px rgba(4, 56, 42, .45); display: grid; place-items: center; pointer-events: none; }
/* shield sits inside the round badge */
.kb-about-wappen img { width: 52%; height: auto; display: block; border-radius: 0; margin-top: 4%; }

/* about page (ueber-uns.html): the template's navigation there is dark text on white, so the company name next
   to the logo and the menu links drop the white colour and the shadow meant for the hero video (Gianni, 18.09.2026) */
.navbar-logo-wrap.dark-text .kb-logo-text { color: #04382A; text-shadow: none; }
.navigation-bar .dark-text .text-nav-menu, .navigation-bar .menu-button.dark-text { text-shadow: none; }
/* about page: surfaces in KERN green #017153 like on the home page, not the dark #04382A of the template
   (story card 01 with its photo tint, icon squares, hover fill and image shade in vision/mission; Gianni, 18.09.2026) */
.block-our-story.dark-green, .effect-blend, .icon-vision, .bg-card-vision, .shadow-image-vision { background-color: #017153; }
/* contact page (kontakt.html): the photo fades into a light KERN green #017153 at the bottom instead of the
   template's dark green, only enough to keep the "Zum Kontaktformular" button readable (Gianni, 18.09.2026) */
.img-hero-contact .shadow-gradient { background-image: linear-gradient(180deg, rgba(1,113,83,0) 45%, rgba(1,113,83,.7) 100%); }
.image-contact .navigation-animation { background-color: rgba(1,113,83,.75); border-color: rgba(255,255,255,.35); }

/* ---------- header: "Startseite", "Mehr" dropdown and yellow "Jobs" button (Gianni, 18.09.2026) ---------- */
.kb-more { position: relative; display: flex; align-items: center; }
.kb-more::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.kb-more-caret { font-family: "Material Icons"; font-weight: 400; font-size: 1.15em; line-height: 1; display: inline-block; vertical-align: -.22em; margin-left: .1em; transition: transform .25s ease; text-transform: none; letter-spacing: normal; }
.kb-more:hover .kb-more-caret, .kb-more.is-open .kb-more-caret { transform: rotate(180deg); }
.kb-more-panel { position: absolute; top: 100%; left: 50%; z-index: 60; min-width: 190px; padding: 8px; background: #fff; border-radius: 12px; box-shadow: 0 14px 34px rgba(4, 56, 42, .18); opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.kb-more:hover .kb-more-panel, .kb-more:focus-within .kb-more-panel, .kb-more.is-open .kb-more-panel { opacity: 1; visibility: visible; transform: translate(-50%, 12px); }
.kb-more-item { display: block; padding: 10px 14px; border-radius: 8px; color: #04382A; font-family: var(--_typography---font--body-font); font-size: 16px; font-weight: 500; line-height: 1.3; text-decoration: none; text-shadow: none; white-space: nowrap; transition: background-color .2s, color .2s; }
.kb-more-item:hover, .kb-more-item:focus-visible { background: #EDF0EE; color: #017153; }
.navbar-menus .cta-get-started { display: flex; align-items: center; gap: .6vw; flex: none; }
.navbar-menus .cta-get-started .button-wrap { width: auto; flex: none; white-space: nowrap; }
.cta-get-started .button-wrap.kb-btn-jobs, .cta-get-started .button-wrap.kb-btn-jobs:hover { background-color: #FDF21E; }
.cta-get-started .kb-btn-jobs .text-xs { color: #04382A; }
/* seven header items: never wrap a label, and tighter spacing on small laptops before the burger menu takes over at 991px */
.navbar-menus .text-nav-menu { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1279px) {
  .navbar-menus { grid-column-gap: 1.6vw; }
  .navbar-menus .dropdown-menu { grid-column-gap: 1.8vw; }
  .navbar-menus .text-nav-menu { font-size: 15px; }
  .navbar-menus .cta-get-started .button-wrap { padding-left: 1.3vw; padding-right: 1.3vw; }
}

/* service card icons pop in after the card has built up (js/kern-cards.js; Gianni, 19.09.2026) */
.kb-card-icon.kb-icon-wait { opacity: 0; transform: scale(.3) rotate(-60deg); }
.kb-card-icon.kb-icon-in { opacity: 1; transform: none; transition: opacity .35s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1), background-color .3s, color .3s; }

/* hero: yellow claim removed, second yellow button next to the green one (Gianni, 19.09.2026) */
.left-content-wrap.hero .cta-hero-wrap{display:flex;flex-wrap:wrap;gap:12px}
.left-content-wrap.hero .cta-hero-wrap .button-wrap.kb-btn-yellow,
.left-content-wrap.hero .cta-hero-wrap .button-wrap.kb-btn-yellow:hover{background-color:#FDF21E}
.left-content-wrap.hero .cta-hero-wrap .kb-btn-yellow .text-xs{color:#04382A}
/* hero buttons hover: the template wipe (white fill driven by the Webflow runtime) left white labels on white
   and sometimes stuck after a quick mouse-out. Replaced by a plain colour change: both buttons turn white
   with a KERN green label, so fill and label always contrast (Gianni, 23.09.2026) */
.left-content-wrap.hero .cta-hero-wrap .button-wrap .bg-primary-btn{display:none!important}
.left-content-wrap.hero .cta-hero-wrap .button-wrap{transition:background-color .25s ease}
.left-content-wrap.hero .cta-hero-wrap .button-wrap .primary-text-wrap{color:inherit!important;transform:none!important}
.left-content-wrap.hero .cta-hero-wrap .button-wrap .text-xs{transition:color .25s ease}
.left-content-wrap.hero .cta-hero-wrap .button-wrap:hover,
.left-content-wrap.hero .cta-hero-wrap .button-wrap.kb-btn-yellow:hover{background-color:#fff}
.left-content-wrap.hero .cta-hero-wrap .button-wrap:hover .text-xs{color:#007153}
.left-content-wrap.hero .cta-hero-wrap .button-wrap:focus-visible{outline:2px solid #FDF21E;outline-offset:3px}
/* hero buttons move up towards the text: 22px less above, 22px more below, so the bottom-aligned text keeps its place (Gianni, 19.09.2026) */
.left-content-wrap.hero .cta-hero-wrap{margin-top:8px;margin-bottom:22px}

/* CTA above the footer: the template multiplies the photo into the green surface, which drowns it.
   The photo now sits untinted, with a soft dark green veil that only keeps the white text readable
   and fades out to the right (Gianni, 19.09.2026) */
.main-section.cta .cta-image { mix-blend-mode: normal; }
.main-section.cta .cta-image::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(4,56,42,.74) 0%, rgba(4,56,42,.5) 38%, rgba(1,113,83,.24) 70%, rgba(1,113,83,.12) 100%);
}

/* Service cards: the photo docks to the bottom edge, so cards with shorter text
   (two lines on wide screens) keep the same gap below the photo as the others */
#leistungen .solution-card-wrap .title-card-solution { padding-bottom: var(--_sizes---gap--super-tiny-gap); }
#leistungen .solution-card-wrap .solution-image-wrap { margin-top: auto; }

/* about page, section "Unsere Haltung" (Gianni, 22.09.2026): action photo in the left column
   below the text. The button of the template is moved out of the column below the two-column
   block. The photo is exactly as tall as the second card (measured by js/kern-haltung.js), keeps its
   16:10 proportion and shares top and bottom edge with that card. */
.kb-haltung-bild { flex: none; align-self: flex-start; margin-top: auto; height: calc((100% - var(--_sizes---gap--xxxs-gap)) / 2); /* fallback, js/kern-haltung.js sets the exact card height */ width: auto; aspect-ratio: 16 / 10; max-width: 100%; border-radius: var(--_sizes---radius--md-radius); overflow: clip; }
.kb-haltung-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vision-mission-content + .bottom-content-wrap.vision-mission { position: static; margin-top: var(--_sizes---gap--xxs-gap); }
/* card thumbnails: square (side = former width), rounded corners, no green overlay */
.card-vision .image-vision { width: 6.6vw; height: 6.6vw; }
.card-vision .shadow-image-vision { display: none; }
@media screen and (max-width: 991px) {
  .card-vision .image-vision { width: 2.9rem; height: 2.9rem; }
}
@media screen and (max-width: 479px) {
  .kb-haltung-bild { height: auto; width: 100%; margin-top: 0; }
}

/* about block on the start page: no rule above the counters, counters sit 10px higher (Gianni, 22.09.2026) */
#ueber-uns .separator-line { display: none; }
#ueber-uns .about-counter { margin-top: 0; }

/* mobile header taller with a larger logo (Gianni, 23.09.2026): more air above and below the logo,
   logo and company name scaled up; sticky logo and the logo in the open burger menu follow */
@media (max-width: 767px) {
  .navigation-bar .navbar-wrapper-padding { padding-top: 12px; padding-bottom: 12px; }
  .logo-brand.hero, .logo-brand { height: 3.6rem; gap: .75rem; }
  .kb-logo-text b { font-size: 1.15rem; }
  .kb-logo-text small { font-size: .8rem; margin-top: .2rem; }
  .kb-sticky-logo { top: 12px; height: 3.6rem; gap: .75rem; }
  /* start page: the vertically centred hero text keeps its gap below the taller header */
  /* start page hero: second sentence only on larger screens (Gianni, 23.09.2026) */
  .kb-hero-desc-more { display: none; }
  /* start page hero: title, text and buttons centred horizontally and vertically in the photo area below the header;
     the empty right column and the bottom spacing no longer push the block upwards */
  .main-section.hero-homepage:not(.kh-nav) .hero-content-wrapper { padding-top: 82px; }
  .left-content-wrap.hero { margin-bottom: 0; }
  .right-content-wrap.bottom.right.hero { display: none; }
  .left-content-wrap.hero .cta-hero-wrap { justify-content: center; align-self: stretch; margin-bottom: 0; }
}

/* open burger menu (Gianni, 23.09.2026): company name next to the logo like in the header,
   and a clean yellow cross instead of the template's small yellow dot with a dark cross */
@media (max-width: 991px) {
  .wrapper-close-menu .div-close-btn { width: auto; height: auto; }
  .wrapper-close-menu .menu-button.close,
  .wrapper-close-menu .menu-button.close.w--open { width: 44px; height: 44px; padding: 0; margin-right: -8px; background-color: transparent; border-radius: 0; display: flex; align-items: center; justify-content: center; }
  .wrapper-close-menu .close-icon-wrapper { position: relative; width: 28px; height: 28px; }
  .wrapper-close-menu .close-line,
  .wrapper-close-menu .close-line.line-2 { position: absolute; left: 0; top: 50%; width: 100%; height: 3px; margin-top: -1.5px; background-color: #FDF21E; border-radius: 2px; }
  .wrapper-close-menu .kb-logo-text { color: #fff; text-shadow: none; text-align: left; align-items: flex-start; }
  .wrapper-close-menu .logo-brand { gap: .75rem; }
}

/* burger menu, "Dienstleistungen" (Gianni, 23.09.2026): tapping it unfolds the six services as a full-width
   list right below its row; the wrapper dissolves into the two-column grid so the toggle keeps its template cell */
.kb-sub { display: contents; }
button.kb-sub-toggle { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.kb-sub-toggle .kb-more-caret { color: #007153; }
.kb-sub.is-open .kb-more-caret { transform: rotate(180deg); }
.kb-sub-panel { display: none; grid-column: 1 / -1; padding: 6px; background: #EDF0EE; border-radius: 12px; }
.kb-sub.is-open .kb-sub-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; animation: kb-sub-in .25s ease; }
.kb-sub-item { display: block; padding: 10px 12px; border-radius: 8px; color: #04382A; font-family: var(--_typography---font--body-font); font-size: 15px; font-weight: 500; line-height: 1.25; text-align: left; text-decoration: none; }
.kb-sub-item:hover, .kb-sub-item:focus-visible { background: #fff; color: #007153; }
@media (max-width: 479px) { .kb-sub.is-open .kb-sub-panel { grid-template-columns: 1fr; } }
@keyframes kb-sub-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kb-sub.is-open .kb-sub-panel { animation: none; } }

/* phones and tablets (Gianni, 24.09.2026): frosted glass bar with logo and burger once the hero is scrolled past
   (js/kern-nav.js); it replaces the free-floating sticky logo that collided with the sections below */
.kb-mbar { display: none; }
@media (max-width: 991px) {
  .kb-sticky-logo { display: none !important; }
  .kb-mbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: calc(68px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; box-sizing: border-box;
    background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    border-bottom: 1px solid rgba(4, 56, 42, .08); box-shadow: 0 6px 24px rgba(4, 56, 42, .08);
    transform: translateY(-110%); visibility: hidden; transition: transform .4s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .4s; }
  .kb-mbar.is-visible { transform: none; visibility: visible; transition: transform .4s cubic-bezier(.22, .61, .36, 1), visibility 0s; }
  .kb-mbar-logo { display: flex; align-items: center; gap: .7rem; height: 46px; text-decoration: none; min-width: 0; }
  .kb-mbar-logo img { height: 100%; width: auto; display: block; border-radius: 0; }
  .kb-mbar .kb-logo-text { color: #04382A; text-shadow: none; }
  .kb-mbar .kb-logo-text b { font-size: 1.05rem; }
  .kb-mbar .kb-logo-text small { font-size: .75rem; }
  .kb-mbar-burger { flex: none; width: 44px; height: 44px; margin-right: -6px; padding: 0 6px; background: none; border: 0; cursor: pointer;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 7px; }
  .kb-mbar-burger span { display: block; height: 3px; border-radius: 2px; background: #007153; width: 30px; }
  .kb-mbar-burger span + span { width: 21px; }
  .kb-mbar-burger:focus-visible, .kb-mbar-logo:focus-visible { outline: 2px solid #007153; outline-offset: 2px; border-radius: 6px; }
  /* the open menu covers the whole screen; the bar steps aside so it never sits on top of the menu's close cross */
  body:has(.w-nav-button.w--open) .kb-mbar { visibility: hidden; transition: none; }
}
@media (max-width: 991px) and (prefers-reduced-motion: reduce) { .kb-mbar, .kb-mbar.is-visible { transition: none; } }
/* phones (Gianni, 28.09.2026): the scroll bar matches the header at the top of the page in size
   (82px high, logo 3.6rem, same company name and burger lines), so nothing shrinks when it slides in */
@media (max-width: 767px) {
  .kb-mbar { height: calc(82px + env(safe-area-inset-top)); }
  .kb-mbar-logo { height: 3.6rem; gap: .75rem; }
  .kb-mbar .kb-logo-text b { font-size: 1.15rem; }
  .kb-mbar .kb-logo-text small { font-size: .8rem; margin-top: .2rem; }
  .kb-mbar-burger { gap: 5px; }
  .kb-mbar-burger span { height: 2px; width: 32px; }
  .kb-mbar-burger span + span { width: 22px; }
}

/* clean line breaks on phones (Gianni, 28.09.2026): headings and short titles break into even lines,
   so no single word ("AG", "Baustelle") is left alone on the last line */
@media (max-width: 767px) {
  h1, h2, h3, h4, .counter-title .text-sm, .stats-title, .kt-role { text-wrap: balance; }
  /* "Zahlen, die zählen": a title on two lines stays centred like the one-line titles */
  .stats-title-wrap { text-align: center; }
}
.kf-nowrap { white-space: nowrap; }
/* start page counters on small phones: two equal columns (the long "Leistungsbereiche" made the right one
   wider and squeezed "Jahre Erfahrung" onto two lines) and slightly smaller titles so it fits in one line, down to 360px wide phones */
@media (max-width: 479px) {
  #ueber-uns .number-group-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #ueber-uns .counter-title .text-sm { font-size: min(16px, 4.2vw); }
  /* number right below the icon, so the numbers of both columns sit on one line even if a title wraps */
  #ueber-uns .number-card-wrap { justify-content: flex-start; }
}