.kernkant-ready,
html,
body { background-color:#0b0d0c; }
body { color:var(--kk-white)!important; }
main#top { width:100%; max-width:none!important; margin:0!important; }
.site-header a:not(.nav-cta) { color:inherit!important; }
/* Keep the CTA readable in normal, visited, hover and keyboard-focus states. */
.site-header a.nav-cta { color:var(--kk-white); }
.site-header a.nav-cta:hover,
.site-header a.nav-cta:focus-visible { background:var(--kk-white); color:var(--kk-black); }
.site-header a.nav-cta:focus-visible { outline:2px solid var(--kk-white); outline-offset:4px; }

.admin-bar .site-header { top:32px; }
.project > a { display:block; color:inherit; }
.brand .custom-logo { width:clamp(170px,17vw,250px); height:auto; display:block; }
.content-page,.single-project { min-height:75vh; padding:clamp(10rem,15vw,14rem) var(--kk-pad) clamp(6rem,10vw,10rem); }
.content-page article,.single-project>header,.single-project-copy { max-width:980px; margin-inline:auto; }
.content-page h1,.single-project h1 { font:700 clamp(4rem,10vw,9rem)/.84 'Barlow Condensed',sans-serif; letter-spacing:-.025em; margin:1rem 0 3rem; text-transform:uppercase; }
.content-copy,.single-project-copy { font-size:1.05rem; line-height:1.8; color:#d1d1cc; }
.content-copy a,.single-project-copy a { text-decoration:underline; text-underline-offset:.2em; }
.post-item { padding:2rem 0; border-top:1px solid var(--kk-line); }
.post-item h2 { font:600 2.2rem 'Barlow Condensed',sans-serif; }
.single-project-image { max-width:1200px; aspect-ratio:16/9; margin:4rem auto; overflow:hidden; border:1px solid var(--kk-line); }
.single-project-image img { width:100%; height:100%; object-fit:cover; display:block; }
.project-link,.back-link { display:inline-block; border:1px solid var(--kk-white); padding:1rem 1.25rem; text-transform:uppercase; font-size:.75rem; letter-spacing:.14em; text-decoration:none!important; transition:.25s; }
.project-link:hover,.back-link:hover { background:var(--kk-white); color:var(--kk-black); }
.back-link { margin:4rem max(var(--kk-pad),calc((100% - 980px)/2)); }
body:not(.home) .site-header { height:72px; background:rgba(11,13,12,.9); backdrop-filter:blur(18px); border-color:var(--kk-line); }

/* Kinetischer Hero: ruhig, hochwertig und ohne schweres Hintergrundvideo. */
.hero { --mx:68%; --my:32%; }
.hero-grid { animation:grid-drift 18s linear infinite alternate; }
.hero-motion { position:absolute; inset:-12%; overflow:hidden; pointer-events:none; }
.hero-motion::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.12),transparent 23%); transition:background-position .2s ease; }
.hero-motion span { position:absolute; display:block; border:1px solid rgba(255,255,255,.09); border-radius:50%; }
.hero-motion span:nth-child(1) { width:74vw; height:74vw; right:-17vw; top:-25vw; animation:hero-orbit 24s linear infinite; }
.hero-motion span:nth-child(2) { width:46vw; height:46vw; right:4vw; top:-8vw; border-color:rgba(255,255,255,.14); animation:hero-orbit-reverse 17s linear infinite; }
.hero-motion span:nth-child(3) { width:55vw; height:1px; border:0; border-radius:0; right:-10vw; top:52%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); transform-origin:center; animation:hero-scan 10s ease-in-out infinite alternate; }
.hero-title,.hero-bottom,.eyebrow { z-index:2; }
@keyframes grid-drift { to { background-position:2.5vw 0,0 3vh; } }
@keyframes hero-orbit { to { transform:rotate(360deg) translate(12px) rotate(-360deg); } }
@keyframes hero-orbit-reverse { to { transform:rotate(-360deg) translate(18px) rotate(360deg); } }
@keyframes hero-scan { from { transform:rotate(-13deg) translateY(-9vh); opacity:.25; } to { transform:rotate(8deg) translateY(10vh); opacity:.8; } }

/* Das Porträt bleibt bewusst Teil der Komposition statt klassisches Profilfoto. */
.about-identity { position:relative; min-height:clamp(28rem,48vw,47rem); display:flex; align-items:center; overflow:hidden; }
.about-identity .about-title { position:relative; z-index:2; }
.about-portrait { position:absolute; z-index:1; right:0; bottom:0; width:min(58%,30rem); height:94%; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.12); opacity:.42; mix-blend-mode:luminosity; border:0; outline:0; box-shadow:none; -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 32%,rgba(0,0,0,.88) 50%,rgba(0,0,0,.4) 74%,transparent 100%); mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 32%,rgba(0,0,0,.88) 50%,rgba(0,0,0,.4) 74%,transparent 100%); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
@media(max-width:782px){.admin-bar .site-header{top:46px}}
@media(max-width:800px){.about-identity{min-height:34rem}.about-portrait{right:0;width:64%;opacity:.34}}
@media(max-width:600px){.admin-bar .site-header{top:0}.content-page,.single-project{padding-top:9rem}.about-identity{min-height:27rem}.about-portrait{width:68%;height:88%;right:0}}
@media(prefers-reduced-motion:reduce){.hero-grid,.hero-motion span{animation:none}.hero-motion::before{display:none}}

/* Project titles: compact scale, readable wraps and space below fixed navigation. */
.single-project h1 {
  font-size:clamp(2.25rem,4.5vw,4.5rem);
  line-height:1.08;
  letter-spacing:-.015em;
  margin:1rem 0 1.5rem;
  overflow-wrap:anywhere;
}

/* Half the free space below the 72px project navigation. */
.single-project { padding-top:calc(36px + clamp(5rem,7.5vw,7rem)); }
@media(max-width:600px) { .single-project { padding-top:calc(36px + 4.5rem); } }

/* Original brand assets retain their aspect ratio at every viewport size. */
.site-header .brand img{max-height:58px;width:clamp(170px,17vw,235px);object-fit:contain}
.footer-brand{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.footer-brand img{display:block;width:180px;max-width:100%;height:auto}

/* Leave enough vertical space for umlauts in the portfolio heading. */
.work .section-head h2{line-height:1.05;min-width:0;overflow-wrap:normal}

/* Spacious editorial footer in warm white, using the studio type system. */
footer.kk-footer{display:block;background:var(--kk-white);color:var(--kk-black);padding:clamp(3.5rem,7vw,7rem) var(--kk-pad) 2.5rem;border:0;text-transform:none;letter-spacing:0;font-size:1rem}
.kk-footer div{display:block}
.kk-footer .kk-footer-grid,.kk-footer .kk-footer-bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,5rem)}
.kk-footer h2,.kk-footer-primary>a:not(.kk-footer-top){font:700 clamp(2.6rem,4.5vw,5rem)/1.08 'Barlow Condensed',sans-serif;letter-spacing:-.02em}
.kk-footer h2{margin:0 0 1.8rem}
.kk-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.kk-footer li{margin:0;font-weight:500;line-height:1.45;font-size:clamp(.95rem,1.3vw,1.15rem)}
.kk-footer a{color:var(--kk-black);text-decoration:none;overflow-wrap:anywhere}
.kk-footer a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.kk-footer a:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.kk-footer-primary{display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem}
.kk-footer-top{margin-top:1rem}
.kk-footer .kk-footer-bottom{margin-top:clamp(3.5rem,7vw,7rem);padding-top:2rem;border-top:1px solid rgba(11,13,12,.2);align-items:end;font-size:.85rem}
.kk-footer-signature img{display:block;width:190px;max-width:100%;height:auto;margin-bottom:1.1rem}
.kk-footer-legal,.kk-footer-social{display:flex;flex-wrap:wrap;gap:1rem;line-height:1.6}
.service[id]{scroll-margin-top:110px}
@media(max-width:800px){.kk-footer .kk-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kk-footer-primary{grid-column:1/-1}.kk-footer .kk-footer-bottom{grid-template-columns:1fr;gap:1.5rem}}
@media(max-width:480px){.kk-footer .kk-footer-grid{grid-template-columns:1fr;gap:2.5rem}.kk-footer-primary{grid-column:auto}.kk-footer h2{margin-bottom:1rem}}

.kk-footer-legal,.kk-footer-social{align-items:center;gap:.8rem 1.25rem}
.kk-footer-unlinked{color:inherit;opacity:.65;cursor:default}

.project-meta .kk-project-client,.single-project .kk-project-client{font-size:.85rem;line-height:1.5;color:var(--kk-white);margin:.6rem 0;overflow-wrap:anywhere}
.kk-project-client span{color:var(--kk-gray);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;margin-right:.65rem}
.single-project .kk-project-client{margin:1rem 0 1.5rem;font-size:1rem}
/* Project stories: shared layout for photography, websites and film. */
.kk-case{padding-top:calc(72px + clamp(2rem,4vw,4rem));min-height:70vh}
.kk-case-intro{padding:0 var(--kk-pad) 2.5rem}
.kk-case-intro h1{font:700 clamp(2.6rem,5.5vw,6rem)/1.06 'Barlow Condensed',sans-serif;letter-spacing:-.02em;margin:1.3rem 0 2rem;overflow-wrap:anywhere}
.kk-case-intro h1 span{display:block;color:var(--kk-gray)}
.kk-case-sub{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
.kk-case-sub>p{font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.6;max-width:650px;margin:0}
.kk-case-button{display:inline-block;background:var(--kk-white);color:var(--kk-black);padding:1rem 1.5rem;font-weight:600;flex-shrink:0;border:1px solid var(--kk-white)}
.kk-case-button:hover{background:transparent;color:var(--kk-white)}
.kk-case-cover{position:relative;margin:0 var(--kk-pad)}
.kk-case-cover>img{display:block;width:100%;max-height:85vh;object-fit:contain;background:#080a09}
.kk-case-cover>video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#080a09}
.kk-case-preview-toggle{position:absolute;right:1.2rem;bottom:1.2rem;padding:.8rem 1rem;color:#fff;background:rgba(11,13,12,.85);border:1px solid #aaa;cursor:pointer}
.kk-case-preview-toggle[hidden]{display:none}
.kk-case-story{padding:clamp(3rem,6vw,6rem) var(--kk-pad);display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(2rem,6vw,7rem)}
.kk-case-story h2,.kk-case-film h2,.kk-case-gallery h2{font:700 clamp(2.2rem,4vw,4rem)/1.08 'Barlow Condensed',sans-serif;margin:0 0 1.7rem;letter-spacing:-.01em;overflow-wrap:anywhere}
.kk-case-copy{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.75;color:#d1d1cc}
.kk-case-copy p:first-child{margin-top:0}.kk-case-copy a{text-decoration:underline}
.kk-case-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.7rem;border-top:1px solid var(--kk-line);padding-top:1.7rem;margin:2rem 0 0}
.kk-case-facts dt{text-transform:uppercase;letter-spacing:.13em;font-size:.7rem;color:var(--kk-gray);margin-bottom:.6rem}
.kk-case-facts dd{margin:0;line-height:1.6;overflow-wrap:anywhere}
.kk-case-film{padding:clamp(2.5rem,5vw,5rem) var(--kk-pad);background:var(--kk-white);color:var(--kk-black);scroll-margin-top:90px}
.kk-case-film video{width:100%;display:block;max-height:85vh;background:#000}
.kk-case-credits{max-width:850px;line-height:1.7;margin-top:1.5rem}.kk-case-film-info{font-size:.85rem;color:#555}
.kk-case-credits-standalone{margin:0 var(--kk-pad) 2rem}
.kk-case-return{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding:2.5rem var(--kk-pad)}
.kk-case a:focus-visible,.kk-case button:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.kk-case-gallery{padding:0 var(--kk-pad) clamp(3rem,6vw,6rem)}
.kk-case-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;align-items:start}
.kk-case-gallery figure{margin:0;min-width:0}.kk-case-gallery img{display:block;width:100%;height:auto}.kk-case-gallery figcaption{color:var(--kk-gray);font-size:.85rem;line-height:1.5;margin-top:.7rem}
@media(max-width:700px){.kk-case-sub{align-items:flex-start;flex-direction:column}.kk-case-story{grid-template-columns:1fr}.kk-case-gallery-grid{grid-template-columns:1fr}.kk-case-preview-toggle{right:.6rem;bottom:.6rem;font-size:.8rem}}
@media(max-width:400px){.kk-case-facts{grid-template-columns:1fr}}