/* ============================================
   Anew Studio — Vorschau "Kunst-Stil"
   Stylesheet des neuen Stils (Ordner studio-neu).
   Der alte Stand liegt unverändert im Ordner studio.

   Schrift: 'Whyte' (ABC Dinamo) wird verwendet, sobald die
   Dateien in /fonts liegen. Bis dahin springt die Seite auf
   Inter Tight (frei) zurück.
   ============================================ */

@font-face { font-family: 'Whyte'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('../fonts/Whyte-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Whyte'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('../fonts/Whyte-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Whyte'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/Whyte-Bold.woff2') format('woff2'); }

:root {
  --bg:    #FAFAF8;
  --ink:   #171714;
  --cream: #FFFFFF;
  --mute:  #8C8C8C;
  --line:  rgba(255, 255, 255, 0.2);
  --font:  'Whyte', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --gutter: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
video { display: block; max-width: 100%; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- top strip: info, navigation, place + time.
   Blend mode "difference": dark on the light hero, light on the dark sections. ---------- */
.k-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 16px var(--gutter);
  color: var(--ink);
  pointer-events: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  transition: opacity 0.3s ease, visibility 0s;
}
.k-top a, .k-top p { pointer-events: auto; }
/* once the section below has covered the whole top, the white bar takes over */
.k-top.is-hidden { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
.k-top a, .k-top p { pointer-events: auto; }
.k-top-info { display: none; }
.k-top-logo { display: block; flex: none; width: 40px; }
.k-top-logo svg { display: block; width: 100%; height: auto; fill: currentColor; }
.k-top-nav { display: flex; gap: 14px; }
.k-top-place { text-align: right; }
.k-top-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 860px) {
  .k-top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: 18px var(--gutter); }
  .k-top-logo { grid-column: 1; width: 66px; margin-top: -4px; }
  .k-top-logo { grid-row: 1; }
  .k-top-nav { grid-column: 7 / span 3; grid-row: 1; flex-direction: column; gap: 2px; }
  .k-top-place { grid-column: 12; grid-row: 1; }
  /* sentence sits under the navigation, left-aligned with it */
  .k-top-info { display: block; grid-column: 7 / span 4; grid-row: 2; margin-top: 75px; max-width: 30em; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
}

/* ---------- hero: big name, one image ---------- */
/* The stage stays pinned while the dark part rises from below and slides over the name. */
.k-hero { position: relative; height: 200vh; height: 200svh; }
.k-stage {
  position: sticky;
  top: 0;
  isolation: isolate;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}
.k-hero-info {
  position: absolute;
  top: 88px; left: var(--gutter); right: var(--gutter);
  max-width: 22em;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  z-index: 3;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}
@media (min-width: 860px) { .k-hero-info { display: none; } }


.k-wordmark {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  overflow: hidden;
  padding: 0 var(--gutter) 0.045em;
  font-size: 19.8vw;
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.055em;
  white-space: nowrap;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 2;
}
.k-wordmark span {
  display: block;
  transform: translateY(105%);
  animation: k-up 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}
@keyframes k-up { to { transform: translateY(0); } }
@media (max-width: 859px) { .k-wordmark { font-size: 18vw; } }

/* ---------- dark sections ---------- */
.k-dark { position: relative; z-index: 5; background: var(--ink); color: var(--cream); }
.k-about { margin-top: -100vh; margin-top: -100svh; }
.k-about, .k-index, .k-work, .k-outro {
  display: grid;
  grid-template-columns: 1fr;
  padding: 72px var(--gutter);
  row-gap: 28px;
}
.k-index, .k-work, .k-outro { padding-top: 0; }
.k-label { font-size: 14px; font-weight: 500; color: var(--cream); }

@media (min-width: 860px) {
  .k-about, .k-index, .k-work, .k-outro {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    padding: 120px var(--gutter);
  }
  .k-index, .k-work, .k-outro { padding-top: 0; }
  .k-label { grid-column: 1 / span 3; }
  .k-about > div, .k-rows, .k-outro > div { grid-column: 6 / -1; }
}

.k-statement {
  max-width: 22em;
  margin-bottom: 40px;
  font-size: clamp(26px, 3.4vw, 46px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #fff;
}
.k-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.k-btn:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* ---------- services as a list ---------- */
.k-rows { list-style: none; }
.k-rows li { border-top: 1px solid var(--line); }
.k-rows li:last-child { border-bottom: 1px solid var(--line); }
.k-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  column-gap: 8px;
  align-items: baseline;
  padding: 24px 0;
  transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s;
}
.k-row-num { grid-row: 1; font-size: 14px; color: var(--mute); }
.k-row-title {
  grid-column: 2; grid-row: 1;
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
}
.k-row-desc { grid-column: 2; grid-row: 2; margin-top: 10px; max-width: 34em; font-size: 15px; line-height: 1.45; color: var(--mute); }
.k-row::after {
  content: '→';
  grid-column: 3; grid-row: 1;
  font-size: 24px;
  opacity: 0.35;
  transition: opacity 0.25s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.k-row:hover { padding-left: 14px; }
.k-row:hover::after { opacity: 1; transform: translateX(-6px); }
.k-row:hover .k-row-desc { color: var(--cream); }

/* ---------- projects: two big, hard-edged images ---------- */
.k-work .k-label { margin-bottom: 4px; }
.k-grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 40px 24px; }
@media (min-width: 640px) { .k-grid { grid-template-columns: 1fr 1fr; } }
.k-tile { display: block; }
.k-tile-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #242424; }
@media (min-width: 860px) { .k-tile-img { aspect-ratio: 5 / 4; } }
.k-tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.k-tile:hover .k-tile-img img { transform: scale(1.035); }
.k-tile-name { display: block; margin-top: 14px; font-size: 14px; font-weight: 500; color: #fff; }
.k-tile-role { display: block; font-size: 14px; color: var(--mute); }
.k-more {
  grid-column: 1 / -1;
  justify-self: start;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.25s;
}
.k-more:hover { border-bottom-color: var(--cream); }
.k-outro .k-more { display: inline-block; margin-top: 28px; }

/* ---------- outro + footer ---------- */
.k-outro { padding-bottom: 96px; }
.k-outro-title {
  text-wrap: balance;
  margin-bottom: 24px;
  font-size: clamp(40px, 7vw, 104px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: #fff;
}
.k-outro-mail { display: block; font-size: clamp(18px, 2vw, 26px); font-weight: 500; }
.k-outro-mail:hover { text-decoration: underline; text-underline-offset: 4px; }

.k-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 24px var(--gutter) 32px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--mute);
}
.k-foot-links { display: flex; gap: 20px; }
.k-foot a:hover { color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  .k-wordmark span { animation: none; transform: none; }
  .k-row, .k-tile-img img { transition: none; }
}


/* ---------- folder card (same as on the real homepage) ---------- */
.k-hero-card { position: absolute; z-index: 1; right: 8vw; bottom: 9vw; }
@media (min-width: 860px) { .k-hero-card { right: 19vw; bottom: 6.5vw; } }
.scene-card-wrap { position: relative; width: fit-content; margin: 0 auto; }

.scene-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 11px;
  padding: 14px 21px 14px 16px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(23, 23, 20, 0.18);
  opacity: 0;
  transform: scale(0.4);
  transform-origin: left center;
  /* The "Apple pop": a spring easing that overshoots past 1 before
     settling, so the card feels like it bounces into place rather
     than just fading up. */
  transition: opacity 0.25s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.scene-card.in { opacity: 1; transform: scale(1); }
.scene-card.in:hover { transform: scale(1.06); }
.scene-card.in:active { transform: scale(0.94); }
/* Simulated click from the animated cursor (not a real :active, since
   no pointer is actually down) — synced to .scene-cursor.clicking via
   the same duration/keyframe timing below. */
.scene-card.tap-loop { animation: cardTap 1.6s ease-in-out infinite; }
@keyframes cardTap {
  0%, 35%, 100% { transform: scale(1); }
  47% { transform: scale(0.92); }
  60% { transform: scale(1); }
}
.scene-card-icon {
  width: clamp(23px, 3vw, 32px);
  height: auto;
  flex-shrink: 0;
}
.scene-card-icon path { fill: #fff; }
.scene-card-name { color: #fff; }
.scene-card-meta { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.scene-card-name {
  font-size: clamp(13px, 1.6vw, 16px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.scene-card-sub {
  font-size: clamp(10px, 1.2vw, 13px);
  color: #A8A8A8;
}

/* Anchored to the card's own wrapper (not the whole scene), so it stays
   pinned to the card's corner regardless of where the card ends up. */
.scene-cursor {
  position: absolute;
  right: -12px;
  bottom: -8px;
  width: clamp(18px, 2.6vw, 30px);
  height: auto;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  transform-origin: 20% 15%;
}
.scene-cursor.in { opacity: 1; }
/* Reads as a repeated click ON the card: cursor dips down slightly
   right as the card itself sinks (cardTap, above) — same 1.6s
   duration and keyframe percentages so both stay in lockstep. */
.scene-cursor.clicking { animation: cursorClick 1.6s ease-in-out infinite; }
@keyframes cursorClick {
  0%, 35%, 100% { transform: translate(0, 0) scale(1); }
  47% { transform: translate(1px, 2px) scale(0.92); }
  60% { transform: translate(0, 0) scale(1); }
}
.scene-card { background: var(--ink); color: var(--cream); }
.scene-card-icon { width: 32px; }
.scene-card-name { font-size: 16px; }
.scene-card-sub { font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .scene-card { opacity: 1; transform: none; }
  .scene-cursor { opacity: 1; }
}

/* ---------- call to action next to the intro sentence ---------- */
.k-cta {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 16px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  pointer-events: auto;
  transition: background 0.25s, color 0.25s;
}
.k-cta span { display: inline-block; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.k-cta:hover { background: #fff; color: #000; }
.k-cta:hover span { transform: translateX(4px); }


/* ==========================================================
   Gemeinsame Bausteine für alle Unterseiten
   ========================================================== */

:root { --soft: #888888; --ghost: #CECECE; --mid: #3A3A3A; --ease: cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------- header: the big one scrolls away; a small dark bar springs in from above ---------- */
.k-top { z-index: 4; }   /* below the sections (z-index 5): the content slides over the header, never under it */
.k-top-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

.k-bar {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(23, 23, 20, 0.06), 0 12px 32px rgba(23, 23, 20, 0.22);
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-150%) scale(0.94);
  transform-origin: 50% 0;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, visibility 0s linear 0.7s;
}
.k-bar.is-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, visibility 0s;
}
.k-bar-logo { display: block; flex: none; width: 28px; margin: 0 4px 0 2px; }
.k-bar-logo svg { display: block; width: 100%; height: auto; fill: var(--ink); }
.lg-s { fill: #fff; }
.k-bar-nav { display: flex; flex: 1; justify-content: space-around; gap: 4px; }
.k-bar-nav a, .k-bar-cta { padding: 8px 10px; border-radius: 4px; transition: background 0.2s, color 0.2s; }
.k-bar-nav a:hover { background: rgba(23, 23, 20, 0.07); }
.k-bar-nav a[aria-current="page"] { background: rgba(23, 23, 20, 0.07); }
.k-bar-cta { display: none; background: var(--ink); color: var(--cream); }
.k-bar-cta:hover { background: #2c2c2c; }
@media (min-width: 860px) {
  .k-bar { left: 50%; right: auto; justify-content: flex-start; gap: 4px; padding: 8px 8px 8px 12px; transform: translate(-50%, -150%) scale(0.94); }
  .k-bar.is-on { transform: translate(-50%, 0) scale(1); }
  .k-bar-nav { flex: none; justify-content: flex-start; gap: 2px; margin-right: 6px; }
  .k-bar-logo { margin-right: 10px; }
  .k-bar-cta { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) { .k-bar, .k-bar.is-on { transition: opacity 0.2s; transform: none; } .k-bar { transform: none; } @media (min-width: 860px) { .k-bar, .k-bar.is-on { transform: translateX(-50%); } } }

/* ---------- page hero: huge title, short sentence under the navigation ---------- */
.p-hero {
  position: sticky;
  top: 0;
  min-height: 82vh;
  min-height: 82svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 96px var(--gutter) 28px;
  overflow: hidden;
}
.p-intro { max-width: 30em; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.p-intro small { display: block; margin-top: 14px; font-size: 14px; font-weight: 500; color: var(--soft); letter-spacing: 0; }
.p-title {
  font-size: 22vw;
  font-weight: 500;
  line-height: 0.84;
  letter-spacing: -0.06em;
  padding-bottom: 0.06em;
}
.p-title--l { font-size: 15.5vw; }
.p-title--m { font-size: 12vw; line-height: 0.9; letter-spacing: -0.055em; }
.p-title--s { font-size: 9.6vw; line-height: 0.92; letter-spacing: -0.05em; }
@media (min-width: 860px) {
  .p-hero { padding: 0 var(--gutter) 24px; }
  .p-intro { width: calc((100% - 11 * 24px) / 12 * 4 + 3 * 24px); margin: 186px 0 0 calc((100% - 11 * 24px) / 12 * 6 + 6 * 24px); }
  .p-title { font-size: 19.5vw; }
  .p-title--l { font-size: 14vw; }
  .p-title--m { font-size: 10.5vw; }
  .p-title--s { font-size: 8vw; }
}

/* ---------- dark sections, label on the left, content on the right ---------- */
.k-sec {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 28px;
  padding: 72px var(--gutter);
  background: var(--ink);
  color: var(--cream);
}
.k-sec + .k-sec { border-top: 1px solid var(--line); }
.k-sec--light { background: var(--bg); color: var(--ink); }
.k-sec--light + .k-sec { border-top: 0; }
.k-sec-lab, .section-label { display: block; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: inherit; margin-bottom: 0; }
.k-sec-full { min-width: 0; }
@media (min-width: 860px) {
  .k-sec { grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: 120px var(--gutter); }
  .k-sec > .k-sec-lab { grid-column: 1 / span 3; }
  .k-sec > .k-sec-body { grid-column: 6 / -1; min-width: 0; }
  .k-sec > .k-sec-full { grid-column: 1 / -1; }
}
.k-p { max-width: 34em; font-size: 18px; font-weight: 400; line-height: 1.55; color: var(--cream); }
.k-p + .k-p { margin-top: 1.1em; }
.k-sec--light .k-p { color: var(--mid); }
.k-lede { margin-bottom: 0.7em; font-size: clamp(28px, 3.6vw, 52px); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; color: #fff; }
.k-h2 { max-width: 20ch; margin-bottom: 20px; font-size: clamp(32px, 4.4vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: #fff; }
.k-sec--light .k-h2, .k-sec--light .k-lede { color: var(--ink); }
.k-tag { display: inline-block; margin-left: 10px; padding: 2px 10px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 20px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--cream); vertical-align: middle; }

/* rows without link (what you get, principles) */
.k-row--static { cursor: default; }
.k-row--static::after { content: none; }
.k-row--static:hover { padding-left: 0; }
.k-row--static:hover .k-row-desc { color: var(--mute); }
.k-row--static .k-row-title { font-size: clamp(22px, 2.4vw, 34px); }
.k-row--big .k-row-title { font-size: clamp(32px, 5vw, 76px); letter-spacing: -0.045em; line-height: 1; }
.k-row--big { padding: 20px 0; }
@media (min-width: 860px) { .k-rows--wide { grid-column: 6 / -1; } }

/* ---------- project detail ---------- */
.k-video, .k-shot { display: block; width: 100%; height: auto; background: #000; }
.k-credit { margin-top: 14px; font-size: 13px; color: var(--soft); }
.k-credit a { color: var(--mid); border-bottom: 1px solid var(--ghost); }
.k-info { display: grid; }
.k-info-row { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line); }
.k-info-row:last-child { border-bottom: 1px solid var(--line); }
.k-info-label { font-size: 14px; color: var(--mute); }
.k-info-value { font-size: 18px; line-height: 1.4; color: #fff; }
@media (min-width: 860px) { .k-info-row { grid-template-columns: 180px 1fr; gap: 24px; } }
.k-gallery { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 860px) { .k-gallery { grid-template-columns: repeat(3, 1fr); align-items: center; } }
.k-gallery > * { display: block; width: 100%; height: auto; background: #000; }
.k-pn { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding: 32px var(--gutter); background: var(--ink); color: var(--cream); border-top: 1px solid var(--line); font-size: 15px; font-weight: 500; }
.k-pn a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 860px) { .k-pn { padding: 32px var(--gutter); } }

/* ---------- about ---------- */
.k-portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; background: #242424; }
.k-about-cols { display: grid; gap: 40px; }
@media (min-width: 860px) { .k-about-cols { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; } .k-about-cols .k-portrait { grid-column: 1 / span 5; } .k-about-cols .k-about-text { grid-column: 7 / -1; } }

/* ---------- contact form ---------- */
.k-form { display: grid; gap: 32px; max-width: 640px; }
.k-field label, .k-flabel { display: block; margin-bottom: 8px; font-size: 14px; color: var(--mute); }
.k-field input[type="text"], .k-field input[type="email"], .k-field textarea {
  width: 100%;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0;
  color: #fff;
  font: inherit;
  font-size: 20px;
  resize: vertical;
}
.k-field input:focus, .k-field textarea:focus { outline: none; border-bottom-color: #fff; box-shadow: 0 1px 0 #fff; }
.k-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.k-check { position: relative; cursor: pointer; }
.k-check input { position: absolute; opacity: 0; inset: 0; }
.k-check span { display: inline-block; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 4px; font-size: 15px; transition: background 0.2s, color 0.2s; }
.k-check input:checked + span { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.k-check input:focus-visible + span { outline: 2px solid #fff; outline-offset: 3px; }
.k-submit { justify-self: start; padding: 14px 22px; border: 1px solid var(--cream); border-radius: 4px; background: var(--cream); color: var(--ink); font-size: 15px; font-weight: 500; transition: background 0.2s, color 0.2s; }
.k-submit:hover { background: transparent; color: var(--cream); }
.k-mail-big { display: inline-block; margin-top: 8px; font-size: clamp(22px, 3vw, 40px); font-weight: 500; letter-spacing: -0.03em; color: #fff; }
.k-mail-big:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- service pages: interactive parts sit on a light band ---------- */
.k-sec--light .feed, .k-sec--light .gs { padding-left: 0; padding-right: 0; }
.feed-headline { font-weight: 500; letter-spacing: -0.04em; }
.service-refs { display: grid; gap: 24px; }
@media (min-width: 640px) { .service-refs { grid-template-columns: 1fr 1fr; } }

/* ---------- footer ---------- */
.k-foot { position: relative; z-index: 5; }

@media (prefers-reduced-motion: reduce) {
  .k-row, .k-check span, .k-cta span { transition: none; }
}


/* ============================================
   Custom cursor (desktop only)
   ============================================ */

@media (hover: hover) and (pointer: fine) {
  body.has-cursor, body.has-cursor a, body.has-cursor button {
    cursor: none;
  }
}

.cursor-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.cursor-dot {
  width: 11px;
  height: 11px;
  transition: width 0.2s var(--ease), height 0.2s var(--ease);
}
.cursor-ring {
  width: 22px;
  height: 22px;
  transition: width 0.25s var(--ease), height 0.25s var(--ease);
}
.cursor-ring { display: flex; align-items: center; justify-content: center; }
.cursor-ring.grow {
  width: 56px;
  height: 56px;
}
.cursor-wrap.is-link .cursor-dot { width: 0; height: 0; }
.cursor-arrow {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.35s var(--ease);
}
.cursor-ring.grow .cursor-arrow { opacity: 1; transform: translateX(0); }
.cursor-wrap.is-small .cursor-arrow { display: none; }
/* Tiny clickable targets (e.g. the numbered story rings): no big blob over
   them — a small dot plus a thin outline ring, so the number stays readable. */
.cursor-wrap.is-small .cursor-dot { width: 6px; height: 6px; }
.cursor-wrap.is-small .cursor-ring {
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1.5px solid #fff;
}

/* ---------- small additions ---------- */
.k-foot { background: var(--ink); }
.k-sec .k-more { display: inline-block; margin-top: 28px; grid-column: auto; justify-self: auto; }
.k-sec .k-outro-title { margin-bottom: 24px; }
.k-sec-body .k-statement { margin-bottom: 0; }
.k-teaser-wrap .cx-teaser { margin: 0; }

/* Handy: der Hinweis "Schritt x von 6" bei Service 02 nicht unter 14px */
@media (max-width: 859px) {
  .gs-panels .gs-panel .feed-kicker, .feed-kicker { font-size: 14px; }
}

/* ==========================================================
   Service pages: Ablauf (iPhone + Schritte), Browser + Handy,
   Beispiel-Film — im dunklen Stil statt auf heller Fläche
   ========================================================== */
.k-sec-flow { min-width: 0; }
@media (min-width: 860px) { .k-sec-flow { grid-column: 4 / -1; } }
.k-sec .feed, .k-sec .gs { padding: 0; }
.k-sec .feed { gap: 40px; }
@media (min-width: 900px) { .k-sec .feed { grid-template-columns: 284px minmax(0, 1fr); gap: 72px; align-items: start; } }

.k-sec .feed-headline { margin-bottom: 32px; font-size: clamp(32px, 4.4vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: #fff; }
.k-sec .feed-title { margin-bottom: 10px; font-size: clamp(24px, 2.6vw, 36px); font-weight: 500; letter-spacing: -0.03em; color: #fff; }
.k-sec .feed-text { max-width: 34em; font-size: 17px; font-weight: 400; line-height: 1.5; color: var(--cream); }
.k-sec .feed-kicker { margin-bottom: 8px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mute); }
.k-sec .gs-panels { min-height: 0; }
.feed-num { display: none; }

/* buttons: square-ish, thin outline, like everywhere else */
.k-sec .feed-nav button, .k-sec .gs-nav-btns button {
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cream);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.k-sec .feed-nav button:hover, .k-sec .gs-nav-btns button:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.k-sec .feed-arrow { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: var(--cream); }
.k-sec .gs-step { padding: 9px 14px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 4px; font-size: 14px; font-weight: 500; color: var(--cream); }
.k-sec .gs-step:hover { border-color: var(--cream); color: #fff; }
.k-sec .gs-step.is-active { background: var(--cream); border-color: var(--cream); color: var(--ink); }

/* desktop: the six steps read as a list, the chosen one opens up (click a row or a ring) */
@media (min-width: 860px) {
  .k-sec .feed-panels { min-height: 0; margin-top: 0; }
  .k-sec .feed-panel { display: block; padding: 16px 0; border-top: 1px solid var(--line); cursor: pointer; animation: none; }
  .k-sec .feed-panel:last-child { border-bottom: 1px solid var(--line); }
  .k-sec .feed-panel[hidden] { display: block; }
  .k-sec .feed-panel .feed-kicker { display: none; }
  .k-sec .feed-panel .feed-num { display: inline-block; min-width: 44px; font-size: 14px; font-weight: 500; color: var(--mute); }
  .k-sec .feed-panel .feed-title { display: inline; margin: 0; color: var(--mute); transition: color 0.25s; }
  .k-sec .feed-panel:not([hidden]) .feed-title { color: #fff; }
  .k-sec .feed-panel[hidden]:hover .feed-title { color: var(--cream); }
  .k-sec .feed-panel .feed-text { margin: 12px 0 0 44px; }
  .k-sec .feed-panel[hidden] .feed-text { display: none; }
  .k-sec .feed-nav { margin-top: 28px; }
}

/* Beispiel-Film */
.k-example { display: grid; gap: 32px; }
@media (min-width: 860px) { .k-example { grid-template-columns: 1fr 180px; gap: 56px; align-items: start; } }
.k-example .k-h2 { max-width: 16ch; }
.k-example .k-p { margin-bottom: 28px; }
.k-example .cx-thumb { border-radius: 4px; }

/* Service 02: the browser mock-up keeps dark text; the steps are the list (no pills on desktop) */
.gs-browser { color: var(--ink); }
@media (min-width: 860px) { .k-sec .gs-steps { display: none; } .k-sec .gs-panels { margin-top: 28px; } }

/* sections cover the pinned hero and the header */
.k-sec, .k-pn { position: relative; z-index: 5; }

.k-todo { background: #FFE14D; color: #171714; padding: 0 4px; font-style: normal; }

.k-foot-links { align-items: center; }
.k-soc { display: inline-flex; align-items: center; }
.k-soc svg { display: block; }