/* Kinetik · Fett — only what differs from kinetik.css */
.k-fett-front{z-index:3}
.k-fett .k-name{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.k-fett .k-name.is-grabbing{cursor:grabbing}
/* The name scales with the viewport height too, so both lines and the intro line stay
   above the fold on short windows (REVIEW-FINAL Ergänzung, Critique-Befund 1). */
.k-fett .k-name h1{font-size:min(19vw,26vh,278px)}
/* A real lowercase i, with optical space on both sides. Keep the established face
   and the other capitals. Only the native i/Ä dots take the existing orange. */
.k-fett .name-i{letter-spacing:0;padding-inline:.08em .06em}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .k-fett .name-i,.k-fett .name-umlaut{
    /* Hard colour split in the clear gap between dot and stem, not a colour fade.
       Bricolage 750 / wdth 85 / opsz 96 has a 1.2em inline box. */
    background-image:linear-gradient(to bottom,var(--accent) var(--dot-cut),var(--ink) var(--dot-cut));
    background-clip:text;-webkit-background-clip:text;color:transparent;
  }
  .k-fett .name-i{--dot-cut:32%}
  .k-fett .name-umlaut{--dot-cut:20.75%}
}
@media(forced-colors:active){.k-fett .name-i,.k-fett .name-umlaut{background:none;color:CanvasText}}
.k-fett .k-name{padding:clamp(16px,3vh,45px) 0}
.k-fett .k-name h1>span+span{margin-top:clamp(20px,4vh,60px)}
.k-fett .k-sculpture{width:clamp(320px,56vw,760px);max-width:100vw}
.k-fett-static{position:absolute;inset:0;width:100%;height:100%;display:block}
.k-fett-hint{letter-spacing:.08em;text-transform:uppercase;visibility:hidden}
.k-fett-hint[data-ready]{visibility:visible}
.k-fett-hint[hidden]{display:none}
/* Touch targets: 44 px as the design goal for menu, footer and draft nav, without bigger type. */
.k-fett .k-header nav a,.k-fett .footer a,.k-fett .footer nav a,.k-fett .draft-nav a{min-height:44px;display:inline-flex;align-items:center}
/* Card 06 keeps the regular preview height in the even six-card grid. */
.k-fett .k-card .project-preview{height:355px}
/* Fixed control group: form action and automatic motion, two real buttons, the upper
   limit. Touch-sized, safe-area aware, and the footer reserves room so nothing is covered. */
.k-fett-controls{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:5;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:calc(100vw - 36px)}
.k-fett-controls button{min-height:44px;font:12px/1 monospace;padding:12px 16px;border:1px solid var(--line);background:color-mix(in srgb,var(--paper) 88%,transparent);color:var(--ink);border-radius:999px;cursor:pointer;backdrop-filter:blur(6px)}
.k-fett-controls button:hover{border-color:var(--ink)}
.k-fett-controls button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.k-fett-controls button[hidden]{display:none}
.k-fett-controls[hidden]{display:none}
/* Native focus/anchor scrolling leaves the fixed controls clear. No scroll handler. */
html:has(.k-fett){scroll-padding-bottom:140px}
.k-fett a,.k-fett button{scroll-margin-bottom:140px}
.k-fett .footer{padding-bottom:calc(28px + 62px)}
/* Focus ring on the terracotta panel: the accent only reaches 2.2:1 there, ink 6.1:1. */
.k-fett .contact-section :focus-visible{outline-color:var(--ink)}
/* Leave room for ring A, not just its arrow, including perspective and breathing. */
.k-fett .contact-main>span{margin-right:clamp(64px,7vw,112px);flex-shrink:0}
.k-fett-about{min-height:78vh;align-items:center}
.k-fett .k-card{display:flex;flex-direction:column;min-width:0;background:color-mix(in srgb,#fff 60%,var(--paper));border:1px solid var(--line);border-radius:3px;box-shadow:0 1px 0 rgb(0 0 0/.03)}
.k-fett .k-card-link{padding:20px 20px 26px;flex:1}
.k-fett .k-card-has-external .k-card-link{padding-bottom:4px}
.k-fett .k-card-cta{min-height:44px;align-items:center}
.k-fett .k-card-heading{grid-template-columns:25px minmax(0,1fr) auto}
.k-fett .k-card-heading h3{overflow-wrap:anywhere}
.k-fett .k-card-link:hover .k-card-heading>span:last-child{transform:translateX(4px)}
.k-card-detail{margin:0 20px 20px 57px}
.k-card-detail .visit{margin:0;font-size:14px}
@media(min-width:1500px){.k-fett .k-card .project-preview{height:410px}}
@media(max-width:1100px){.k-fett .k-note{display:block;text-align:left}}
@media(max-width:1100px){.k-fett .k-card .project-preview{height:310px}}
/* The smaller mobile arrow already leaves enough room for its ring and keeps the
   contact heading on three lines at 390 px. */
@media(max-width:700px){.k-fett .contact-main>span{margin-right:44px}}
@media(max-width:700px){.k-fett-about{min-height:70vh}.k-fett .k-name h1{font-size:min(21vw,22vh)}.k-fett .k-card-link{padding:14px 14px 22px}.k-card-detail{margin:0 14px 18px 51px}.k-fett-controls{gap:6px}.k-fett-controls button{padding:12px 13px;font-size:11px}.k-fett .footer{padding-bottom:calc(28px + 122px)}}
@media(max-width:380px){.k-fett .k-meta{font-size:11px;flex-wrap:wrap}.k-fett .k-header nav{flex-wrap:wrap}}
@media(max-width:360px){
  .k-fett .k-card-heading{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .k-fett .k-card-heading .k-number{grid-column:1/-1}
  .k-fett .k-card-category,.k-fett .k-card-description,.k-fett .k-card-cta{margin-left:0}
  .k-card-detail{margin-left:14px}
  .k-fett .contact-main{flex-wrap:wrap;gap:24px}
  .k-fett .contact-main h2{font-size:clamp(40px,18vw,71px);overflow-wrap:anywhere}
  .k-fett .contact-main>span{margin-left:auto;margin-right:48px}
  .k-fett .contact-bottom>a{max-width:100%;overflow-wrap:anywhere}
}