/* Knall & Kante: shared visual rhythm, compact typography, accessible motion. */
body.kk-refresh { --kk-edge:rgba(7,60,207,.14); --kk-pink:#f3a4c3; }
.kk-refresh .section--soft { background:radial-gradient(ellipse at 95% 0%,#f5e1ee 0,transparent 42%),#f1f3fa; }
.kk-refresh .section-head { position:relative; padding-bottom:1.4rem; border-bottom:1px solid var(--kk-edge); }
.kk-refresh .section-head::after { content:""; position:absolute; bottom:-1px; left:0; width:72px; height:3px; background:linear-gradient(90deg,var(--royal),var(--kk-pink)); }
.kk-refresh .eyebrow { display:flex; align-items:center; gap:.75rem; }
.kk-refresh .eyebrow::before { content:""; width:20px; height:2px; flex-shrink:0; background:currentColor; opacity:.7; }
.kk-refresh .page-hero { background:radial-gradient(ellipse at 85% 10%,#3c3266 0,transparent 42%),radial-gradient(ellipse at 100% 100%,#073ccf80,transparent 60%),#090e25; }
.kk-refresh .page-hero::after { width:44vw; height:44vw; right:-8vw; left:auto; bottom:-24vw; border-color:#f3a4c34a; box-shadow:0 0 0 50px #f3a4c308,0 0 0 100px #f3a4c305; }
.kk-refresh .page-hero__aside { border-left-color:#f3a4c366; }
.kk-refresh :is(.page-hero,.section--ink) .eyebrow { color:var(--kk-pink); }
.kk-refresh .page-hero .hero-number { color:#f3a4c3; opacity:.82; }
.kk-refresh .three-grid { gap:18px; background:transparent; border:0; }
.kk-refresh .three-grid article { position:relative; min-width:0; border:1px solid var(--kk-edge); border-radius:20px; background:linear-gradient(145deg,#fff,#fff9fa); box-shadow:0 8px 30px #080b1805; }
.kk-refresh :is(.service-card,.website-type-card,.web-package-card,.external-card,.combo-grid article,.values-grid article) { border-radius:20px; border-color:var(--kk-edge); box-shadow:0 8px 30px #080b1805; }
.kk-refresh .service-card { position:relative; overflow:hidden; }
.kk-refresh .service-card::before { content:""; position:absolute; left:0; top:0; width:4px; height:64px; background:linear-gradient(var(--royal),var(--kk-pink)); }
.kk-refresh .service-card:hover { box-shadow:0 18px 46px #073ccf22; }
.kk-refresh .website-type-card { border-color:#ffffff30; }
.kk-refresh .website-type-card:hover { box-shadow:0 14px 36px #0002; }
.kk-refresh .three-grid h3 { text-wrap:balance; }
.kk-refresh .three-grid article { color:var(--ink); }
.kk-refresh .three-grid article p { color:#4c5267; }
.kk-refresh :is(.three-grid,.service-grid,.combo-grid,.values-grid) p { line-height:1.7; }
.kk-refresh .service-row { padding-inline:1.25rem; border-radius:16px; transition:background .25s ease; }
.kk-refresh .service-row:hover { background:#073ccf06; }
.kk-refresh .circle-link { background:white; border-color:#073ccf30; }
.kk-refresh .circle-link:hover { background:var(--royal); }
.kk-refresh .feature-list { border-top:0; }
.kk-refresh .feature-list li { padding:1.25rem 1.4rem; margin-bottom:.6rem; border:1px solid var(--kk-edge); border-left:3px solid #f3a4c3; border-radius:0 14px 14px 0; background:linear-gradient(100deg,#f7f1fa,transparent); }
.kk-refresh :is(.showcase__image,.bridge__image,.markenstart-photo,.project-card__visual) { filter:drop-shadow(0 16px 26px #080b1818); }
.kk-refresh .bridge { background:radial-gradient(ellipse at 100% 0,#413774 0,transparent 55%),linear-gradient(120deg,#071342,#062a9f); }
.kk-refresh .bridge .eyebrow { color:var(--kk-pink); }
.kk-refresh .bridge__image { transform:rotate(1deg); }
.kk-refresh .bridge__image img { border:1px solid #f3a4c350; box-shadow:0 24px 60px #0003; }
.kk-refresh .data-flow__figure { border:1px solid #f3a4c34d; box-shadow:0 35px 90px #0005; border-radius:20px; overflow:hidden; }
.kk-refresh .data-flow__caption { background:#0c1429; }
.kk-refresh .process-strip { gap:12px; border:0; counter-reset:kk-step; }
.kk-refresh .process-strip li { border:1px solid var(--kk-edge); border-radius:18px; background:linear-gradient(145deg,#fff,#f5f1fa); padding:1.8rem 1.25rem; }
.kk-refresh .process-strip li:first-child { border-left:1px solid var(--kk-edge); }
.kk-refresh .process-strip span { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 .5rem; border-radius:50%; background:#e9edfc; color:var(--royal); }
.kk-refresh .process-strip li:nth-child(even) span { background:#f9ddea; color:#752b50; }
.kk-refresh .process-strip h3 { margin-top:1.8rem; }
.kk-refresh .timeline__item { position:relative; padding-inline:1rem; }
.kk-refresh .timeline__num { text-shadow:3px 3px 0 #f5d5e5; }
.kk-refresh .footer-cta { position:relative; background:radial-gradient(ellipse at 90% 20%,#563b6780,transparent 48%),linear-gradient(115deg,#090e25,#0a205a); color:white; border-top:1px solid #f3a4c34a; }
.kk-refresh .footer-cta .eyebrow { color:var(--kk-pink); }
.kk-refresh .footer-cta p:not(.eyebrow) { color:#dce1f0; }
.kk-refresh .footer-cta__inner::after { color:#f3a4c31a; }
.kk-refresh .footer-cta .button { background:var(--kk-pink); border-color:var(--kk-pink); color:#10152b; }
.kk-refresh .footer-cta .button:hover { background:#ffe3ec; box-shadow:0 14px 36px #f3a4c330; }
.kk-refresh .button { transition:transform .22s ease,box-shadow .22s ease,background .22s ease; }
.kk-refresh .button span[aria-hidden] { transition:transform .22s ease; }
.kk-refresh .button:hover span[aria-hidden] { transform:translate(2px,-2px); }
.kk-refresh .button:focus-visible,.kk-refresh .text-link:focus-visible { outline-color:#d64c83; }
.kk-refresh .onepager-example__disclosure { box-shadow:0 12px 32px #080b1808; border-color:#dbd4e6; }
.kk-refresh .onepager-example__disclosure>summary { background:linear-gradient(110deg,#fbe0ec,#edf0fc); }
.kk-refresh.page-home .ux-routes { background:radial-gradient(ellipse at 100% 0,#e8eafc,transparent 55%),#fff9fa; }
.kk-refresh.page-home .ux-route-grid>a { position:relative; border-color:#d9ddef; box-shadow:0 8px 24px #080b1806; overflow:hidden; }
.kk-refresh.page-home .ux-route-grid>a::after { content:"↗"; position:absolute; top:18px; right:20px; color:#073ccf; font-size:22px; }
.kk-refresh.page-home .ux-route-grid>a>span { padding-right:30px; }
.kk-refresh.page-home .ux-route-grid>a:nth-child(even) { background:linear-gradient(145deg,#fff,#fceaf2); }
.kk-refresh.page-home .ux-route-grid>a:hover { border-color:#073ccf; box-shadow:0 18px 38px #073ccf18; }
.kk-refresh.page-home #leistungen { background:radial-gradient(ellipse at 5% 0,#173780 0,transparent 50%),#0a1027; color:white; }
.kk-refresh.page-home #leistungen .section-head { border-color:#ffffff24; }
.kk-refresh.page-home #leistungen .eyebrow { color:#f3a4c3; }
.kk-refresh.page-home #leistungen .service-card { background:linear-gradient(145deg,#ffffff09,#ffffff03); border-color:#ffffff26; color:white; }
.kk-refresh.page-home #leistungen .service-card p { color:#d5dcee; }
.kk-refresh.page-home #leistungen .service-card span { color:#f3a4c3; }
.kk-refresh.page-home #leistungen .service-card:hover { background:#152752; border-color:#f3a4c38c; }
.kk-refresh.page-home #agentur-vorstellung { background:radial-gradient(ellipse at 0 100%,#f9e0eb,transparent 60%),#fff9fa; }
.kk-refresh.page-home #agentur-vorstellung .split { align-items:center; }
.kk-refresh.page-home #agentur-vorstellung .split>div:first-child { border-left:3px solid #f3a4c3; padding-left:1.5rem; }
.kk-reading-progress { position:fixed; z-index:110; inset:0 0 auto; height:3px; pointer-events:none; background:linear-gradient(90deg,#1456ff,#f3a4c3); transform:scaleX(0); transform-origin:0 50%; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 .kk-refresh .three-grid article { transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
 .kk-refresh .three-grid article:hover { transform:translateY(-4px); border-color:#073ccf45; box-shadow:0 16px 38px #073ccf10; }
}
@media(min-width:1100px) {
 .kk-refresh .three-grid article:nth-child(3n+2) { background:linear-gradient(145deg,#fff,#f1f3fc); }
}
@media(min-width:1321px) and (max-width:1599px) {
 .kk-refresh .site-header__inner { gap:1rem; }
 .kk-refresh .site-header .site-nav { gap:.45rem; }
 .kk-refresh .site-header .site-nav>a { padding:.65rem .65rem; font-size:.68rem; }
 .kk-refresh .site-header .site-nav>.nav-services>.nav-link { padding-left:.65rem; font-size:.68rem; }
 .kk-refresh .site-header .site-nav>.nav-services>.nav-services__toggle { width:36px; min-width:36px; }
}
@media(max-width:980px) {
 .kk-refresh .process-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .kk-refresh .bridge__image { transform:none; }
}
@media(max-width:600px) {
 .kk-refresh .three-grid { gap:12px; }
 .kk-refresh .three-grid article { padding:1.5rem; }
 .kk-refresh .service-row { padding-inline:0; }
 .kk-refresh .process-strip { grid-template-columns:1fr; }
 .kk-refresh .process-strip li { padding:1.4rem; }
 .kk-refresh .process-strip h3 { margin-top:1rem; }
 .kk-refresh .data-flow__figure { border-radius:12px; }
 .kk-refresh .section-head { padding-bottom:1rem; }
 .kk-refresh .footer-cta__inner::after { font-size:70vw; }
}
@media(prefers-reduced-motion:reduce) {
 .kk-refresh :is(.service-card,.website-type-card,.external-card,.button,.button span,.service-row,.circle-link,.ux-route-grid>a) { transition:none; }
 .kk-refresh :is(.button,.service-card,.website-type-card,.external-card,.ux-route-grid>a):hover { transform:none; }
 .kk-refresh .bridge__image { transform:none; }
}

/* Express delivery offering, shared home and webdesign treatment. */
.kk-refresh .express-section{padding-top:clamp(2rem,4vw,4rem);padding-bottom:clamp(3rem,5vw,5rem);background:#fff9fa}
.kk-refresh .express-panel{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(230px,.7fr);gap:clamp(2rem,5vw,5rem);padding:clamp(1.5rem,4vw,3.5rem);border:1px solid #073ccf26;border-radius:24px;background:radial-gradient(ellipse at 100% 0,#f6d9e8,transparent 55%),linear-gradient(120deg,#f0f3ff,#fff9fa)}
.kk-refresh .express-panel p{max-width:65ch}
.kk-refresh .express-note{font-size:.85rem;color:#454c64;line-height:1.65}
.kk-refresh .express-facts{display:flex;flex-direction:column;justify-content:center;border-left:1px solid #073ccf26;padding-left:clamp(1.5rem,3vw,3rem)}
.kk-refresh .express-facts p{margin:0;padding:1.2rem 0;border-bottom:1px solid #073ccf1f}
.kk-refresh .express-facts p:last-child{border-bottom:0}
.kk-refresh .express-facts strong{display:block;color:#062480;font-size:clamp(1.2rem,2vw,1.65rem);line-height:1.3;margin-bottom:.4rem}
.kk-refresh .express-facts span{display:block;color:#454c64;font-size:.9rem;line-height:1.5}
@media(max-width:760px){.kk-refresh .express-panel{grid-template-columns:1fr;gap:1.5rem}.kk-refresh .express-facts{border-left:0;border-top:1px solid #073ccf26;padding-left:0;padding-top:.5rem}.kk-refresh .express-panel .button{width:100%}}

.kk-refresh .express-team-graphic{width:min(100%,300px);height:auto;margin:0 auto .6rem;filter:drop-shadow(0 8px 16px #073ccf08)}
@media(max-width:760px){.kk-refresh .express-team-graphic{width:min(100%,250px);margin:.75rem auto}}

/* Small photographic team motif, below the Express action in the left column. */
.kk-refresh .express-office{width:min(100%,560px);margin:1.5rem 0 0;border-radius:14px;overflow:hidden;border:1px solid #073ccf26;box-shadow:0 10px 28px #080b1810}
.kk-refresh .express-office img{width:100%;height:auto;display:block}
@media(max-width:760px){.kk-refresh .express-office{margin-top:1.25rem;border-radius:10px}}

/* Express office panorama: approximately 15 x 4.5 cm, responsive. */
.kk-refresh .express-office{width:min(100%,15cm);aspect-ratio:10/3}
.kk-refresh .express-office img{width:100%;height:100%;aspect-ratio:10/3;object-fit:cover;object-position:center 35%}

/* Wider office panorama, directly below the Express action. */
.kk-refresh .express-office{width:min(100%,18cm);aspect-ratio:4/1;margin-top:1.5rem}
.kk-refresh .express-office img{aspect-ratio:4/1}

/* Office panorama enlarged to approximately 23 x 5.5 cm. */
.kk-refresh .express-office{width:min(100%,23cm);aspect-ratio:46/11;margin-top:1.5rem}
.kk-refresh .express-office img{aspect-ratio:46/11}
@media(min-width:1200px){.kk-refresh .express-panel{grid-template-columns:minmax(0,1.65fr) minmax(230px,.55fr)}}

.kk-refresh .express-process-link{display:block;width:fit-content;margin-top:16px;font-size:.86rem;font-weight:700;line-height:1.6;text-underline-offset:4px;color:#07318f}
.kk-refresh .express-process-link:hover{color:#6c2f54}

/* Discover the 28 steps: one large, fully clickable invitation. */
.kk-refresh .full-service-panel--steps{border:1px solid #f3a4c340;border-radius:24px;align-items:center;background:radial-gradient(ellipse at 100% 0,#66457566,transparent 60%),linear-gradient(120deg,#081c5d,#062d9b);gap:clamp(2rem,4vw,4rem)}
.kk-refresh .steps-panel-intro{max-width:42ch;color:#e0e6f7;line-height:1.75;margin-bottom:0}
.kk-refresh .steps-discovery{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;min-width:0;padding:clamp(24px,3vw,42px);border:1px solid #f3a4c38c;border-radius:20px;background:linear-gradient(135deg,#ffffff13,#f3a4c30b);color:white;text-decoration:none;box-shadow:0 15px 40px #0002;transition:background .25s,transform .25s,box-shadow .25s}
.kk-refresh .steps-discovery-number{font-family:var(--serif);font-size:clamp(80px,9vw,134px);font-weight:500;line-height:.95;letter-spacing:-.06em;color:#f3a4c3}
.kk-refresh .steps-discovery-copy{display:flex;flex-direction:column;gap:14px;min-width:0}
.kk-refresh .steps-discovery-kicker{font-size:10px;font-weight:800;letter-spacing:.12em;color:#f5cadd;line-height:1.6}
.kk-refresh .steps-discovery-copy>strong{font-size:clamp(20px,2vw,28px);line-height:1.25;text-wrap:balance}
.kk-refresh .steps-discovery-copy>span:not([class]){font-size:14px;line-height:1.65;color:#e0e6f7}
.kk-refresh .steps-discovery-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px;padding-top:16px;border-top:1px solid #f3a4c34d;font-size:14px;font-weight:800;color:#fff}
.kk-refresh .steps-discovery-cta>span{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:50%;background:#f3a4c3;color:#0b1941;font-size:22px;transition:transform .25s}
.kk-refresh .steps-discovery:hover{background:#ffffff21;transform:translateY(-3px);box-shadow:0 22px 45px #0003}
.kk-refresh .steps-discovery:hover .steps-discovery-cta>span{transform:translate(2px,-2px)}
.kk-refresh .steps-discovery:focus-visible{outline:3px solid #ffe3ec;outline-offset:5px}
@media(max-width:1100px){.kk-refresh .full-service-panel--steps{grid-template-columns:1fr}.kk-refresh .steps-panel-intro{max-width:65ch}}
@media(max-width:600px){.kk-refresh .full-service-panel--steps{padding:26px 22px;border-radius:18px}.kk-refresh .steps-discovery{grid-template-columns:1fr;gap:20px;padding:24px}.kk-refresh .steps-discovery-number{font-size:86px}.kk-refresh .steps-discovery-cta{font-size:13px}}
@media(prefers-reduced-motion:reduce){.kk-refresh .steps-discovery,.kk-refresh .steps-discovery-cta>span{transition:none}.kk-refresh .steps-discovery:hover,.kk-refresh .steps-discovery:hover .steps-discovery-cta>span{transform:none}}