/* Gallery tiles, copied unchanged from skills/arsenal/gallery by store-work/tiles.cjs; edit there, not here. */
/* typo-glanz */
.k-typo-glanz { --k-gold-62: oklch(.62 .09 75); --k-gold-98: oklch(.98 .04 85); display: grid; place-items: center; }
.k-typo-glanz p {
  font: italic 600 20cqmin/1.15 "Liberation Serif", Georgia, "Times New Roman", serif; letter-spacing: -.02em; color: transparent;
  background: linear-gradient(105deg, var(--k-gold-62) 42%, var(--k-gold-98) 50%, var(--k-gold-62) 58%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; animation: k-typo-glanz-licht 6s var(--gb-ease) infinite;
}
.k-typo-glanz:hover p { animation-duration: 2s; }
@keyframes k-typo-glanz-licht { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .k-typo-glanz p { animation: none; background-position: 50% 0; }
}

/* artstyle-swiss */
.k-artstyle-swiss { --k-grau-12: oklch(.12 0 0); --k-grau-97: oklch(.97 0 0); --k-rot: oklch(.58 .22 27); background: var(--k-grau-97); color: var(--k-grau-12); font-family: "Helvetica Neue", Arial, "Liberation Sans", sans-serif; }
.k-artstyle-swiss b { position: absolute; left: 6cqw; top: 2cqh; font-size: 58cqmin; font-weight: 700; letter-spacing: -.07em; line-height: .9; }
.k-artstyle-swiss i { position: absolute; left: 6cqw; top: 66cqh; width: 22cqw; height: 5cqh; background: var(--k-rot); transition: translate .6s var(--gb-aus); }
.k-artstyle-swiss:hover i { translate: 44cqw 0; }
.k-artstyle-swiss p { position: absolute; top: 76cqh; left: 6cqw; font-size: max(10px, 3.6cqmin); font-weight: 700; line-height: 1.15; }
.k-artstyle-swiss p + p { left: 50cqw; font-weight: 400; }
@media (prefers-reduced-motion: reduce) {
  .k-artstyle-swiss i { transition: none; }
}

/* knoepfe-taste */
.k-knoepfe-taste { --k-gold-55: oklch(.55 .12 60); --k-gold-78: oklch(.78 .14 72); --k-gold-86: oklch(.86 .13 80); display: grid; place-items: center; font-size: clamp(14px, 5.6cqmin, 32px); }
.k-knoepfe-taste button {
  height: 3em; padding: 0 1.9em; border-radius: .7em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(var(--k-gold-86), var(--k-gold-78)); color: var(--gb-licht-text);
  box-shadow: 0 .38em 0 var(--k-gold-55), 0 .38em 1.2em color-mix(in oklch, var(--gb-tief) 50%, transparent), inset 0 1px 0 color-mix(in oklch, var(--gb-text) 50%, transparent);
  transition: translate .08s, box-shadow .08s;
}
.k-knoepfe-taste button:hover { filter: brightness(1.05); }
.k-knoepfe-taste button:active { translate: 0 .32em; box-shadow: 0 .06em 0 var(--k-gold-55), 0 .1em .4em color-mix(in oklch, var(--gb-tief) 50%, transparent), inset 0 1px 0 color-mix(in oklch, var(--gb-text) 40%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .k-knoepfe-taste button { transition: none; }
}

/* artstyle-neumorphismus */
.k-artstyle-neumorphismus { --k-grau-55: oklch(.55 .02 250); --k-gruen-60: oklch(.6 .16 150); --k-gruen-60-a35: oklch(.6 .16 150 / .35); --k-f: oklch(.86 .01 250); --k-hell: oklch(.97 .005 250); --k-dunkel: oklch(.7 .02 250); display: flex; align-items: center; justify-content: center; gap: 10cqmin; background: var(--k-f); }
.k-artstyle-neumorphismus label { cursor: pointer; }
.k-artstyle-neumorphismus input { position: absolute; opacity: 0; }
.k-artstyle-neumorphismus span { display: grid; place-items: center; width: 30cqmin; height: 30cqmin; border-radius: 50%; color: var(--k-grau-55);
  box-shadow: 2.6cqmin 2.6cqmin 5cqmin var(--k-dunkel), -2.6cqmin -2.6cqmin 5cqmin var(--k-hell); transition: box-shadow .35s var(--gb-ease), color .35s; }
.k-artstyle-neumorphismus svg { width: 34%; }
.k-artstyle-neumorphismus input:checked + span { color: var(--k-gruen-60); box-shadow: inset 2cqmin 2cqmin 4cqmin var(--k-dunkel), inset -2cqmin -2cqmin 4cqmin var(--k-hell); }
.k-artstyle-neumorphismus input:focus-visible + span { outline: 2px solid var(--k-grau-55); outline-offset: 2cqmin; }
.k-artstyle-neumorphismus i { width: 18cqmin; height: 44cqmin; border-radius: 99px; box-shadow: inset 1.6cqmin 1.6cqmin 3cqmin var(--k-dunkel), inset -1.6cqmin -1.6cqmin 3cqmin var(--k-hell);
  background: linear-gradient(transparent 55%, var(--k-gruen-60-a35) 55%) content-box; padding: 2.4cqmin; }
@media (prefers-reduced-motion: reduce) {
  .k-artstyle-neumorphismus span { transition: none; }
}

/* typo-schriftzug */
.k-typo-schriftzug { display: grid; place-items: center; }
/* the pen runs from left to right (mask), then the shape fills */
.k-typo-schriftzug svg { width: 82%; overflow: visible; animation: k-typo-schriftzug-feder 7s var(--gb-ease) infinite; }
.k-typo-schriftzug path { fill: var(--gb-licht); fill-opacity: 0; stroke: var(--gb-licht); stroke-width: 1.4; stroke-linejoin: round;
  animation: k-typo-schriftzug-fuellung 7s var(--gb-ease) infinite; }
.k-typo-schriftzug:hover svg, .k-typo-schriftzug:hover path { animation-play-state: paused; }
@keyframes k-typo-schriftzug-feder { 0% { clip-path: inset(-10% 100% -10% 0); opacity: 1; } 42%, 90% { clip-path: inset(-10% 0 -10% 0); opacity: 1; } 100% { clip-path: inset(-10% 0 -10% 0); opacity: 0; } }
@keyframes k-typo-schriftzug-fuellung { 0%, 42% { fill-opacity: 0; } 58%, 100% { fill-opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .k-typo-schriftzug svg, .k-typo-schriftzug path { animation: none; }
  .k-typo-schriftzug path { fill-opacity: 1; }
}

/* wireframe-blaupause */
.k-wireframe-blaupause { --k-blau-42: oklch(.42 .1 255); --k-grau-95: oklch(.95 .02 250);
  --k-blau: oklch(.36 .09 255); --k-netz: oklch(.55 .09 250 / .28);
  display: grid; place-items: center; color: var(--k-grau-95);
  background:
    linear-gradient(var(--k-netz) 1px, transparent 1px) 0 0 / 5cqmin 5cqmin,
    linear-gradient(90deg, var(--k-netz) 1px, transparent 1px) 0 0 / 5cqmin 5cqmin,
    radial-gradient(90% 70% at 50% 40%, var(--k-blau-42), var(--k-blau));
}
.k-wireframe-blaupause svg { width: 92%; height: 92%; overflow: visible; }
.k-wireframe-blaupause text { font-family: var(--gb-mono); }
/* Dimension lines: no dash pattern, the mask reveals them from the left */
.k-wireframe-blaupause__m path { clip-path: inset(0 100% 0 0); transition: clip-path .7s var(--gb-aus); }
.k-wireframe-blaupause__m path + path { clip-path: inset(0 0 100% 0); transition-delay: .12s; }
.k-wireframe-blaupause__z { opacity: 0; transition: opacity .3s .35s; }
.k-wireframe-blaupause:hover .k-wireframe-blaupause__m path { clip-path: inset(0); }
.k-wireframe-blaupause:hover .k-wireframe-blaupause__z { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .k-wireframe-blaupause__m path, .k-wireframe-blaupause__z { transition: none; }
}

/* animation-morph */
.k-animation-morph { display: grid; place-items: center; }
.k-animation-morph svg { width: 66cqmin; overflow: visible; }
.k-animation-morph path { fill: var(--gb-licht); filter: drop-shadow(0 0 4cqmin color-mix(in oklch, var(--gb-licht) 35%, transparent)); animation: k-animation-morph-form 9s var(--gb-ease) infinite; }
.k-animation-morph:hover path { animation-duration: 3s; }
/* same command sequence (M, 4 C, Z) in every shape */
@keyframes k-animation-morph-form {
  0%, 100% { d: path("M100 30C140 30 170 60 170 100C170 140 140 170 100 170C60 170 30 140 30 100C30 60 60 30 100 30Z"); }
  33% { d: path("M100 18C122 60 168 84 162 120C156 154 128 176 100 176C72 176 44 154 38 120C32 84 78 60 100 18Z"); }
  66% { d: path("M150 40C176 90 150 150 110 166C80 178 40 170 32 150C24 120 60 90 82 72C104 54 130 40 150 40Z"); }
}
@media (prefers-reduced-motion: reduce) {
  .k-animation-morph path { animation: none; }
}

/* artstyle-bauhaus */
.k-artstyle-bauhaus { --k-grau-20: oklch(.2 .01 80); --k-grau-93: oklch(.93 .025 85); --k-rot: oklch(.58 .2 28); --k-gelb: oklch(.86 .16 90); --k-blau: oklch(.45 .15 262); background: var(--k-grau-93); }
.k-artstyle-bauhaus i { position: absolute; transition: translate .9s var(--gb-feder), rotate .9s var(--gb-feder), scale .9s var(--gb-feder); }
.k-artstyle-bauhaus__k { left: 14cqw; top: 16cqh; width: 40cqmin; height: 40cqmin; border-radius: 50%; background: var(--k-rot); }
.k-artstyle-bauhaus__q { right: 16cqw; top: 24cqh; width: 30cqmin; height: 30cqmin; background: var(--k-blau); rotate: 12deg; }
.k-artstyle-bauhaus__d {
  left: 40cqw; bottom: 8cqh; width: 0; height: 0;
  border-left: 18cqmin solid transparent; border-right: 18cqmin solid transparent; border-bottom: 30cqmin solid var(--k-gelb);
}
.k-artstyle-bauhaus__s { left: 8cqw; right: 8cqw; top: 62cqh; height: 1.4cqmin; background: var(--k-grau-20); }
/* new arrangement on hover */
.k-artstyle-bauhaus:hover .k-artstyle-bauhaus__k { translate: 38cqw 18cqh; scale: .7; }
.k-artstyle-bauhaus:hover .k-artstyle-bauhaus__q { translate: -46cqw -6cqh; rotate: 45deg; }
.k-artstyle-bauhaus:hover .k-artstyle-bauhaus__d { translate: 22cqw -40cqh; rotate: 180deg; }
.k-artstyle-bauhaus:hover .k-artstyle-bauhaus__s { rotate: -8deg; }
@media (prefers-reduced-motion: reduce) {
  .k-artstyle-bauhaus i { transition: none; }
}

/* typo-zeilen-auftritt */
.k-typo-zeilen-auftritt { display: grid; align-content: center; padding: 0 8cqw; }
.k-typo-zeilen-auftritt p { margin: 0; font-size: 12.6cqw; line-height: .92; font-weight: 600; letter-spacing: -.047em; }
/* each line is its own mask */
.k-typo-zeilen-auftritt__z { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.k-typo-zeilen-auftritt__z > span { display: block; animation: k-typo-zeilen-auftritt-auf 5.2s var(--gb-aus) infinite both; }
.k-typo-zeilen-auftritt__z + .k-typo-zeilen-auftritt__z { color: var(--gb-leise); }
.k-typo-zeilen-auftritt__z + .k-typo-zeilen-auftritt__z > span { animation-delay: .09s; }
.k-typo-zeilen-auftritt:hover .k-typo-zeilen-auftritt__z > span { animation-play-state: paused; }
@keyframes k-typo-zeilen-auftritt-auf {
  0% { translate: 0 108%; }
  20%, 82% { translate: 0 0; }
  100% { translate: 0 -108%; }
}
@media (prefers-reduced-motion: reduce) {
  .k-typo-zeilen-auftritt__z > span { animation: none; }
}

/* artstyle-synthwave */
.k-artstyle-synthwave { --k-gold-92: oklch(.92 .17 95); --k-rosa-30: oklch(.3 .14 330); --k-rot-68-a60: oklch(.68 .26 350 / .6); --k-violett-12: oklch(.12 .05 290); --k-violett-16: oklch(.16 .08 300); --k-pink: oklch(.68 .26 350); --k-cyan: oklch(.85 .14 200); overflow: hidden; background: linear-gradient(var(--k-violett-16), var(--k-rosa-30) 58%, var(--k-violett-12) 58%); }
.k-artstyle-synthwave__s { position: absolute; left: 50%; top: 12cqh; width: 44cqmin; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: linear-gradient(var(--k-gold-92), var(--k-pink) 75%);
  -webkit-mask-image: linear-gradient(#000 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82%);
  mask-image: linear-gradient(#000 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82%);
  filter: drop-shadow(0 0 6cqmin var(--k-rot-68-a60)); }
.k-artstyle-synthwave__b { position: absolute; left: -50%; right: -50%; top: 58cqh; height: 90cqh; transform-origin: top; transform: perspective(40cqmin) rotateX(62deg);
  background: linear-gradient(90deg, var(--k-cyan) 1px, transparent 1px) 0 0 / 8cqmin 8cqmin, linear-gradient(var(--k-cyan) 1px, transparent 1px) 0 0 / 8cqmin 8cqmin;
  animation: k-artstyle-synthwave-fahrt 1.2s linear infinite; opacity: .8; }
.k-artstyle-synthwave:hover .k-artstyle-synthwave__b { animation-duration: .5s; }
@keyframes k-artstyle-synthwave-fahrt { to { background-position: 0 8cqmin, 0 8cqmin; } }
@media (prefers-reduced-motion: reduce) {
  .k-artstyle-synthwave__b { animation: none; }
}

/* artstyle-memphis */
.k-artstyle-memphis { --k-gold-96: oklch(.96 .03 90); --k-rosa: oklch(.83 .1 350); --k-gelb: oklch(.9 .14 95); --k-tuerkis: oklch(.78 .12 190); --k-tinte: oklch(.2 .02 280); overflow: hidden; background: var(--k-gold-96); }
.k-artstyle-memphis > * { position: absolute; animation: k-artstyle-memphis-wackeln 1.4s ease-in-out infinite alternate paused; }
.k-artstyle-memphis:hover > * { animation-play-state: running; }
.k-artstyle-memphis__p { left: 6cqw; top: 10cqh; width: 34cqmin; height: 26cqmin; background: radial-gradient(var(--k-tinte) 22%, transparent 24%) 0 0 / 4cqmin 4cqmin; }
.k-artstyle-memphis__k { right: 10cqw; top: 14cqh; width: 28cqmin; height: 28cqmin; border-radius: 50%; background: var(--k-rosa); box-shadow: 2cqmin 2cqmin 0 var(--k-tinte); animation-delay: -.4s; }
.k-artstyle-memphis__d { left: 36cqw; bottom: 8cqh; width: 0; height: 0; border-left: 14cqmin solid transparent; border-right: 14cqmin solid transparent; border-bottom: 22cqmin solid var(--k-gelb); animation-delay: -.9s; }
.k-artstyle-memphis svg:nth-of-type(1) { left: 8cqw; bottom: 12cqh; width: 40cqmin; stroke: var(--k-tuerkis); animation-delay: -.2s; }
.k-artstyle-memphis svg:nth-of-type(2) { right: 8cqw; bottom: 16cqh; width: 30cqmin; stroke: var(--k-tinte); animation-delay: -.7s; }
@keyframes k-artstyle-memphis-wackeln { from { rotate: -7deg; } to { rotate: 7deg; } }
@media (prefers-reduced-motion: reduce) {
  .k-artstyle-memphis > * { animation: none; }
}

/* knoepfe-zellrand */
.k-knoepfe-zellrand { display: grid; place-items: center; font-size: clamp(14px, 5.4cqmin, 30px); }
.k-knoepfe-zellrand button {
  height: 3.3em; padding: 0 1.9em; color: var(--gb-licht); font-weight: 600; border: 2px solid currentColor; border-radius: 1.65em;
  background: color-mix(in oklch, var(--gb-licht) 6%, transparent); transition: scale .25s var(--gb-feder), background-color .3s;
}
.k-knoepfe-zellrand button:hover { animation: k-knoepfe-zellrand-wabern 2.4s ease-in-out infinite; background: color-mix(in oklch, var(--gb-licht) 14%, transparent); }
.k-knoepfe-zellrand button:active { scale: 1.07 .88; }
@keyframes k-knoepfe-zellrand-wabern {
  0%, 100% { border-radius: 1.65em; }
  25% { border-radius: 46% 54% 42% 58% / 62% 44% 56% 38%; }
  50% { border-radius: 56% 44% 58% 42% / 40% 60% 40% 60%; }
  75% { border-radius: 42% 58% 50% 50% / 58% 42% 62% 38%; }
}
@media (prefers-reduced-motion: reduce) {
  .k-knoepfe-zellrand button, .k-knoepfe-zellrand button:hover { animation: none; transition: none; }
}

/* artstyle-risograph */
.k-artstyle-risograph { --k-grau-95: oklch(.95 .02 85); --k-pink: oklch(.68 .21 0); --k-blau: oklch(.55 .17 255); overflow: hidden; background: var(--k-grau-95); isolation: isolate; }
.k-artstyle-risograph > * { position: absolute; mix-blend-mode: multiply; transition: translate .8s var(--gb-aus); }
/* Halftone dots instead of solid color */
.k-artstyle-risograph__a { left: 14cqw; top: 12cqh; width: 50cqmin; height: 50cqmin; border-radius: 50%; background: radial-gradient(var(--k-blau) 46%, transparent 50%) 0 0 / 1.6cqmin 1.6cqmin; translate: -1.4cqmin 1cqmin; }
.k-artstyle-risograph__b { right: 12cqw; bottom: 10cqh; width: 46cqmin; height: 46cqmin; background: radial-gradient(var(--k-pink) 46%, transparent 50%) 0 0 / 1.6cqmin 1.6cqmin; rotate: 15deg; translate: 1.2cqmin -1cqmin; }
.k-artstyle-risograph b { left: 8cqw; bottom: 6cqh; font: 900 20cqmin/1 var(--gb-schrift); letter-spacing: -.05em; color: var(--k-pink); text-shadow: -1.2cqmin .8cqmin 0 var(--k-blau); }
.k-artstyle-risograph:hover > * { translate: 0 0; }
.k-artstyle-risograph:hover b { text-shadow: 0 0 0 var(--k-blau); }
@media (prefers-reduced-motion: reduce) {
  .k-artstyle-risograph > * { transition: none; }
}

/* assets-icons */
.k-assets-icons { display: grid; place-items: center; }
.k-assets-icons ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqmin; }
.k-assets-icons li { display: grid; place-items: center; width: 20cqmin; height: 20cqmin; border-radius: 3cqmin; background: var(--gb-flaeche); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--gb-text) 6%, transparent);
  color: var(--gb-text); transition: color .3s, background-color .3s; }
.k-assets-icons svg { width: 52%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.k-assets-icons path, .k-assets-icons circle { stroke-dasharray: 1; stroke-dashoffset: 0; }
.k-assets-icons li:hover { color: var(--gb-licht); background: color-mix(in oklch, var(--gb-licht) 10%, transparent); }
.k-assets-icons li:hover path, .k-assets-icons li:hover circle { animation: k-assets-icons-zug .9s var(--gb-aus) both; }
.k-assets-icons li:hover svg > :nth-child(2) { animation-delay: .25s; }
@keyframes k-assets-icons-zug { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .k-assets-icons li, .k-assets-icons li:hover path, .k-assets-icons li:hover circle { animation: none; transition: none; }
}

/* animation-federn */
.k-animation-federn { display: grid; align-content: center; gap: 9cqh; padding: 0 8cqw; }
/* path on the right, name on the left in its own column */
.k-animation-federn__b { position: relative; height: 1px; margin-left: 22cqw; background: var(--gb-linie); }
.k-animation-federn__b span { position: absolute; right: calc(100% + 3cqw); top: 50%; translate: 0 -50%; font: 500 max(10px, 3.2cqmin)/1 var(--gb-mono); color: var(--gb-leise); white-space: nowrap; }
.k-animation-federn__b i {
  position: absolute; left: 0; top: -3cqmin; width: 6cqmin; height: 6cqmin; border-radius: 50%;
  background: var(--gb-text); animation: k-animation-federn-weg 3.6s infinite;
}
.k-animation-federn__b:nth-child(1) i { animation-timing-function: linear; background: var(--gb-still); }
.k-animation-federn__b:nth-child(2) i { animation-timing-function: var(--gb-aus); }
/* Spring as a linear() curve with overshoot */
.k-animation-federn__b:nth-child(3) i {
  background: var(--gb-licht); box-shadow: 0 0 3cqmin color-mix(in oklch, var(--gb-licht) 55%, transparent);
  animation-timing-function: linear(0, .32 8%, .86 17%, 1.1 26%, 1.12 31%, 1.04 41%, .98 52%, 1 66%, 1);
}
/* there, pause, back, pause */
@keyframes k-animation-federn-weg {
  0%, 8% { translate: 0 0; }
  42%, 58% { translate: calc(62cqw - 6cqmin) 0; }
  92%, 100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .k-animation-federn__b i { animation: none; }
}

/* layout-bento */
.k-layout-bento { display: grid; padding: 7cqmin; }
.k-layout-bento__r {
  display: grid; gap: 2.4cqmin; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr;
  transition: grid-template-columns .7s var(--gb-aus), grid-template-rows .7s var(--gb-aus);
}
.k-layout-bento b {
  display: flex; align-items: flex-end; padding: 2.6cqmin; border-radius: 1.6cqmin; background: var(--gb-flaeche-2);
  font: 500 max(10px, 3.4cqmin)/1 var(--gb-mono); color: var(--gb-leise); transition: background-color .4s;
}
/* first tile spans two rows; the weight shifts depending on the pointer */
.k-layout-bento b:first-child { grid-row: span 2; background: var(--gb-licht); color: var(--gb-licht-text); }
.k-layout-bento b:nth-child(4) { grid-column: span 2; }
.k-layout-bento__r:has(b:nth-child(2):hover) { grid-template-columns: 1fr 2fr 1fr; }
.k-layout-bento__r:has(b:nth-child(3):hover) { grid-template-columns: 1fr 1fr 2fr; }
.k-layout-bento__r:has(b:nth-child(4):hover) { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 2fr; }
.k-layout-bento__r:has(b:not(:first-child):hover) b:first-child { background: var(--gb-flaeche-2); color: var(--gb-leise); }
.k-layout-bento b:not(:first-child):hover { background: var(--gb-licht); color: var(--gb-licht-text); }
@media (prefers-reduced-motion: reduce) {
  .k-layout-bento__r, .k-layout-bento b { transition: none; }
}

/* typo-laufweite */
.k-typo-laufweite { display: grid; place-content: center; justify-items: center; gap: 4cqmin; }
.k-typo-laufweite p { font-size: 19cqmin; font-weight: 700; line-height: 1; letter-spacing: -.04em; margin-right: -.04em;
  transition: letter-spacing .9s var(--gb-aus), margin-right .9s var(--gb-aus), font-weight .9s, color .9s; }
.k-typo-laufweite:hover p { letter-spacing: .42em; margin-right: -.42em; font-weight: 300; color: var(--gb-licht); }
.k-typo-laufweite span { font: 500 max(10px, 3cqmin)/1 var(--gb-mono); color: var(--gb-leise); }
@media (prefers-reduced-motion: reduce) {
  .k-typo-laufweite p { transition: none; }
}

/* artstyle-brutalismus */
.k-artstyle-brutalismus { --k-rosa-75: oklch(.75 .17 340); --k-weiss: #fff; --k-papier: oklch(.95 .01 95); --k-tinte: oklch(.15 0 0); --k-gelb: oklch(.9 .19 105); display: grid; place-items: center; background: var(--k-papier);
  font-family: var(--gb-mono); color: var(--k-tinte); }
.k-artstyle-brutalismus__k { display: grid; gap: 3cqmin; width: 70cqw; padding: 4cqmin; border: .9cqmin solid var(--k-tinte); background: var(--k-weiss); box-shadow: 2.4cqmin 2.4cqmin 0 var(--k-tinte); }
.k-artstyle-brutalismus span { font-size: max(10px, 3cqmin); }
.k-artstyle-brutalismus b { font: 800 10cqmin/.95 var(--gb-schrift); letter-spacing: -.04em; }
.k-artstyle-brutalismus button { justify-self: start; padding: 2cqmin 4cqmin; border: .7cqmin solid var(--k-tinte); background: var(--k-gelb); font: 700 max(11px, 3.6cqmin)/1 var(--gb-mono);
  box-shadow: 1.4cqmin 1.4cqmin 0 var(--k-tinte); transition: translate .06s, box-shadow .06s; }
.k-artstyle-brutalismus button:hover { background: var(--k-rosa-75); }
.k-artstyle-brutalismus button:active { translate: 1.4cqmin 1.4cqmin; box-shadow: 0 0 0 var(--k-tinte); }
@media (prefers-reduced-motion: reduce) {
  .k-artstyle-brutalismus button { transition: none; }
}

/* effekte-unterstrich */
.k-effekte-unterstrich { display: grid; place-items: center; }
.k-effekte-unterstrich nav { display: grid; gap: 3cqmin; justify-items: start; }
.k-effekte-unterstrich a { color: var(--gb-text); text-decoration: none; cursor: pointer; font-size: 8cqmin; font-weight: 600; letter-spacing: -.03em; padding-bottom: .08em;
  background: linear-gradient(var(--gb-licht), var(--gb-licht)) right bottom / 0% .08em no-repeat; transition: background-size .45s var(--gb-aus), color .3s; }
/* in from the left, out to the right: the anchor point changes on hover */
.k-effekte-unterstrich a:hover, .k-effekte-unterstrich a:focus-visible { background-position: left bottom; background-size: 100% .08em; color: var(--gb-licht); }
.k-effekte-unterstrich a:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .k-effekte-unterstrich a { transition: none; }
}

/* wireframe-ebenen */
/* Hub of the layers in cqmin: already staggered at rest, further apart on hover */
.k-wireframe-ebenen { --z2: 9; --z3: 18; display: grid; place-items: center; perspective: 300cqmin; }
.k-wireframe-ebenen:hover { --z2: 15; --z3: 30; }
/* Surface about 70 cqmin wide, shifted slightly left and down so the hub and labels have room */
.k-wireframe-ebenen__w { position: relative; width: 66cqmin; height: 46cqmin; margin: 16cqmin 18cqmin 0 0; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-38deg); }
.k-wireframe-ebenen__e { position: absolute; inset: 0; display: block; transition: transform .8s var(--gb-aus);
  border: 1px solid color-mix(in oklch, var(--gb-licht) 55%, transparent); border-radius: 1.6cqmin; background: color-mix(in oklch, var(--gb-licht) 7%, transparent); }
.k-wireframe-ebenen__e:nth-child(2) { transform: translateZ(calc(var(--z2) * 1cqmin)); border-color: color-mix(in oklch, var(--gb-licht) 85%, transparent); background: color-mix(in oklch, var(--gb-licht) 4%, transparent); }
.k-wireframe-ebenen__e:nth-child(3) { transform: translateZ(calc(var(--z3) * 1cqmin)); border-color: var(--gb-text); background: none; }
.k-wireframe-ebenen b { position: absolute; top: 26%; width: 27%; height: 52%; left: 5%; border: 1px solid color-mix(in oklch, var(--gb-licht) 75%, transparent); border-radius: 1.2cqmin; }
.k-wireframe-ebenen b + b { left: 36.5%; } .k-wireframe-ebenen b + b + b { left: 68%; }
.k-wireframe-ebenen u { position: absolute; left: 5%; right: 5%; top: 7%; height: 10%; border: 1px solid var(--gb-text); border-radius: 99px; }
/* Label flat next to the right corner of each layer, rises with it (hub times sin 56°), so it stays readable without distortion */
.k-wireframe-ebenen p { position: absolute; left: calc(50% + 34cqmin); top: calc(50% + 7cqmin); }
.k-wireframe-ebenen span { position: absolute; left: 0; top: 0; translate: 0 -50%; transition: translate .8s var(--gb-aus);
  font: 500 max(10px, 3.2cqmin)/1 var(--gb-mono); letter-spacing: .04em; color: var(--gb-leise); white-space: nowrap; }
.k-wireframe-ebenen span:nth-child(2) { translate: 0 calc(-50% - var(--z2) * .83cqmin); }
.k-wireframe-ebenen span:nth-child(3) { translate: 0 calc(-50% - var(--z3) * .83cqmin); color: var(--gb-text); }
@media (prefers-reduced-motion: reduce) {
  .k-wireframe-ebenen__e, .k-wireframe-ebenen span { transition: none; }
}

/* farbe-glas */
.k-farbe-glas { --k-blau-55: oklch(.55 .14 255); --k-gold-75: oklch(.75 .15 70); --k-rot-60: oklch(.6 .17 25); overflow: hidden; }
.k-farbe-glas > i { position: absolute; width: 46cqmin; aspect-ratio: 1; border-radius: 50%; animation: k-farbe-glas-treiben 14s ease-in-out infinite alternate; }
.k-farbe-glas > i:nth-child(1) { left: 12cqw; top: 8cqh; background: var(--k-gold-75); }
.k-farbe-glas > i:nth-child(2) { right: 10cqw; top: 30cqh; background: var(--k-rot-60); animation-delay: -5s; }
.k-farbe-glas > i:nth-child(3) { left: 38cqw; bottom: -10cqh; background: var(--k-blau-55); animation-delay: -9s; }
.k-farbe-glas__k { position: absolute; inset: 22cqh 16cqw; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.4cqmin; padding: 4cqmin;
  border-radius: 3cqmin; background: linear-gradient(135deg, color-mix(in oklch, var(--gb-text) 22%, transparent), color-mix(in oklch, var(--gb-text) 6%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--gb-text) 30%, transparent), 0 3cqmin 8cqmin color-mix(in oklch, var(--gb-tief) 30%, transparent);
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); transition: translate .5s var(--gb-aus); }
.k-farbe-glas:hover .k-farbe-glas__k { translate: 0 -2cqmin; }
.k-farbe-glas b { font-size: 7cqmin; letter-spacing: -.03em; line-height: 1; }
.k-farbe-glas span { font: 500 max(10px, 3cqmin)/1 var(--gb-mono); color: color-mix(in oklch, var(--gb-text) 85%, transparent); }
@keyframes k-farbe-glas-treiben { to { translate: 14cqw 10cqh; scale: 1.15; } }
@media (prefers-reduced-motion: reduce) {
  .k-farbe-glas > i { animation: none; }
  .k-farbe-glas__k { transition: none; }
}

/* animation-staffel */
.k-animation-staffel { display: grid; align-content: center; padding: 0 12cqw; }
.k-animation-staffel ul { display: grid; gap: 2.4cqmin; }
.k-animation-staffel li { display: flex; align-items: center; gap: 3cqmin; height: 9cqmin; padding: 0 2.4cqmin; border-radius: 1.6cqmin; background: var(--gb-flaeche-2);
  animation: k-animation-staffel-auf 5s var(--gb-aus) infinite both; }
.k-animation-staffel b { width: 4.4cqmin; height: 4.4cqmin; border-radius: 50%; background: var(--gb-licht); }
.k-animation-staffel i { flex: 1; height: 1.6cqmin; border-radius: 1cqmin; background: var(--gb-linie-stark); }
.k-animation-staffel li:nth-child(2) { animation-delay: .07s; } .k-animation-staffel li:nth-child(3) { animation-delay: .14s; }
.k-animation-staffel li:nth-child(4) { animation-delay: .21s; } .k-animation-staffel li:nth-child(5) { animation-delay: .28s; }
.k-animation-staffel li:nth-child(even) i { margin-right: 14cqw; }
.k-animation-staffel:hover li { animation-play-state: paused; }
@keyframes k-animation-staffel-auf {
  0% { opacity: 0; translate: 0 3cqmin; } 12%, 78% { opacity: 1; translate: 0 0; } 90%, 100% { opacity: 0; translate: 0 -3cqmin; }
}
@media (prefers-reduced-motion: reduce) {
  .k-animation-staffel li { animation: none; }
}

/* wireframe-skizze */
.k-wireframe-skizze { --k-rot-60: oklch(.6 .17 30); --k-papier: oklch(.96 .015 90); --k-blei: oklch(.32 .01 260); display: grid; place-items: center; background: var(--k-papier); }
.k-wireframe-skizze svg { width: 94%; height: 94%; stroke: var(--k-blei); stroke-width: 2; }
.k-wireframe-skizze path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: k-wireframe-skizze-zug 8s var(--gb-ease) infinite; }
.k-wireframe-skizze path:nth-child(2) { animation-delay: .3s; } .k-wireframe-skizze path:nth-child(3) { animation-delay: .5s; }
.k-wireframe-skizze path:nth-child(4) { animation-delay: .8s; } .k-wireframe-skizze path:nth-child(5) { animation-delay: 1.1s; }
.k-wireframe-skizze path:nth-child(6) { animation-delay: 1.4s; } .k-wireframe-skizze path:nth-child(7) { animation-delay: 1.7s; stroke: var(--k-rot-60); }
.k-wireframe-skizze:hover path { animation-play-state: paused; }
@keyframes k-wireframe-skizze-zug { 0% { stroke-dashoffset: 1; opacity: 1; } 20%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .k-wireframe-skizze path { animation: none; stroke-dashoffset: 0; }
}

/* typo-umriss */
.k-typo-umriss { display: grid; place-items: center; }
.k-typo-umriss p {
  font-size: 22cqmin; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; color: transparent;
  /* Room left and right: the “r” extends beyond the letter spacing, the fill has to paint there too */
  padding: 0 .12em;
  -webkit-text-stroke: max(1px, .35cqmin) var(--gb-text);
  background: linear-gradient(90deg, var(--gb-licht), var(--gb-licht)) left / 0% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; transition: background-size .8s var(--gb-aus);
}
.k-typo-umriss:hover p { background-size: 100% 100%; -webkit-text-stroke-color: var(--gb-licht); }
@media (prefers-reduced-motion: reduce) {
  .k-typo-umriss p { transition: none; }
}

/* farbe-korn */
.k-farbe-korn { --k-gold-72: oklch(.72 .14 65); --k-grau-97-a90: oklch(.97 .02 80 / .9); --k-rot-45: oklch(.45 .12 35); --k-violett-18: oklch(.18 .04 280); overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(90% 90% at 25% 15%, var(--k-gold-72), var(--k-rot-45) 45%, var(--k-violett-18)); }
.k-farbe-korn svg { position: absolute; inset: -20%; width: 140%; height: 140%; mix-blend-mode: overlay; opacity: .55;
  animation: k-farbe-korn-flimmern .5s steps(3) infinite; transition: opacity .4s, scale .4s; }
.k-farbe-korn:hover svg { opacity: .95; scale: 1.6; }
.k-farbe-korn b { position: relative; font-size: 16cqmin; font-weight: 700; letter-spacing: -.05em; color: var(--k-grau-97-a90); mix-blend-mode: overlay; }
@keyframes k-farbe-korn-flimmern { 0% { translate: 0 0; } 33% { translate: -3% 2%; } 66% { translate: 2% -3%; } 100% { translate: -1% 1%; } }
@media (prefers-reduced-motion: reduce) {
  .k-farbe-korn svg { animation: none; transition: none; }
}

/* layout-geteilt */
.k-layout-geteilt { --k-blau-26: oklch(.26 .04 255); --k-blau-45: oklch(.45 .06 240); --k-gold-50: oklch(.5 .1 60); --k-kupfer-30: oklch(.3 .06 40); display: flex; gap: 1.5cqmin; padding: 6cqmin; }
.k-layout-geteilt__h {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: 4cqmin; border-radius: 1.6cqmin; text-align: left; overflow: hidden;
  background: linear-gradient(160deg, var(--k-gold-50), var(--k-kupfer-30)); transition: flex-grow .7s var(--gb-aus), opacity .5s;
}
.k-layout-geteilt__h + .k-layout-geteilt__h { background: linear-gradient(160deg, var(--k-blau-45), var(--k-blau-26)); }
.k-layout-geteilt span { font: 500 max(10px, 3cqmin)/1 var(--gb-mono); color: color-mix(in oklch, var(--gb-text) 70%, transparent); }
.k-layout-geteilt b { font-size: 8cqmin; font-weight: 600; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.k-layout-geteilt__h:hover, .k-layout-geteilt__h:focus-visible { flex-grow: 2.4; }
.k-layout-geteilt:has(.k-layout-geteilt__h:hover) .k-layout-geteilt__h:not(:hover) { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  .k-layout-geteilt__h { transition: none; }
}

/* animation-bahn */
.k-animation-bahn { --bahn: inset(18cqh 14cqw round 14cqmin); }
.k-animation-bahn__s { position: absolute; inset: 18cqh 14cqw; border-radius: 14cqmin; border: 1.5px dashed color-mix(in oklch, var(--gb-licht) 35%, transparent); }
/* Size via width and height, never scale: scale acts before the offset on the path and would pull the tail away from it */
.k-animation-bahn b { --i: 0; --g: 1; position: absolute; left: 0; top: 0; width: calc(6cqmin * var(--g)); height: calc(3cqmin * var(--g)); border-radius: 99px; background: var(--gb-licht);
  offset-path: var(--bahn); offset-rotate: auto; animation: k-animation-bahn-fahrt 5s linear infinite; animation-delay: calc(var(--i) * .08s - .32s);
  box-shadow: 0 0 3cqmin color-mix(in oklch, var(--gb-licht) 80%, transparent); }
.k-animation-bahn b:nth-child(3) { --i: 1; --g: .85; opacity: .7; }
.k-animation-bahn b:nth-child(4) { --i: 2; --g: .7; opacity: .45; }
.k-animation-bahn b:nth-child(5) { --i: 3; --g: .55; opacity: .25; }
.k-animation-bahn b:nth-child(6) { --i: 4; --g: .4; opacity: .12; }
.k-animation-bahn:hover b { animation-duration: 2.2s; }
@keyframes k-animation-bahn-fahrt { from { offset-distance: 0%; } to { offset-distance: 100%; } }
/* At rest: head in the curve at the top right, the tail behind it on the path */
@media (prefers-reduced-motion: reduce) {
  .k-animation-bahn b { animation: none; offset-distance: calc(28% - var(--i) * 1.8%); }
}