/* ============================================================
   KLARWERK — Design-System-Basis
   Rekonstruiert aus Design-Katalog_dc__1_.html (shared/klarwerk.css).
   Enthält: Tokens · 8 Presets · Primitive · Maßlinie · Bild-Platzhalter
            · Reveals · wiederverwendbare Effekte.
   Blöcke referenzieren ausschließlich die hier definierten Tokens/Klassen.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- 1 · Tokens (Basis = Preset „stein") ----------
   Hinweis: Falls dein Original andere stein-Werte hat, hier im :root anpassen —
   Struktur bleibt gleich. */
:root {
  /* Schriften */
  --f-disp: "Space Grotesk", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Bewegung */
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Radien */
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;

  /* Schatten */
  --sh-1: 0 6px 24px rgba(27, 24, 20, .10);
  --sh-2: 0 14px 40px rgba(27, 24, 20, .16);

  /* Label-Basisgröße */
  --fs-lab: .62rem;

  /* Farbwelt „stein" (Kalkstein & Licht) */
  --c-bg:         #E8E4DB;
  --c-surface:    #F4F1EA;
  --c-ink:        #1B1814;
  --c-ink-soft:   #5D564C;
  --c-line:       #D7D0C4;
  --c-accent:     #A47E4A;
  --c-accent-deep:#7E5C30;
  --c-dark:       #211E17;
  --c-dark-soft:  #A49C8B;
}

/* Abgeleitete Töne, für alle Presets gültig */
[data-preset], :root {
  --c-accent-lift: color-mix(in srgb, var(--c-accent) 62%, white);
  --c-dark-line:   color-mix(in srgb, var(--c-dark-soft) 26%, transparent);
}

/* ---------- 2 · Die 8 Presets ----------
   stein = :root (Basis). data-preset="stein" setzt explizit zurück. */
[data-preset="stein"]    { --c-bg:#E8E4DB; --c-surface:#F4F1EA; --c-ink:#1B1814; --c-ink-soft:#5D564C; --c-line:#D7D0C4; --c-accent:#A47E4A; --c-accent-deep:#7E5C30; --c-dark:#211E17; --c-dark-soft:#A49C8B; }
[data-preset="hellgruen"]{ --c-bg:#F0F2EC; --c-surface:#FAFBF7; --c-ink:#191C17; --c-ink-soft:#59604F; --c-line:#D5DACC; --c-accent:#4F7F5C; --c-accent-deep:#3C6448; --c-dark:#1E231D; --c-dark-soft:#9AA491; }
[data-preset="mineral"]  { --c-bg:#F3F0EB; --c-surface:#FCFAF7; --c-ink:#1C1915; --c-ink-soft:#5E574D; --c-line:#DCD4C9; --c-accent:#A9764F; --c-accent-deep:#82573A; --c-dark:#242019; --c-dark-soft:#A69D90; }
[data-preset="steel"]    { --c-bg:#EFF1F3; --c-surface:#FAFBFC; --c-ink:#171A1E; --c-ink-soft:#535B64; --c-line:#D5DAE0; --c-accent:#3D6B99; --c-accent-deep:#2F547A; --c-dark:#1B2026; --c-dark-soft:#97A0AB; }
[data-preset="teal"]     { --c-bg:#EDF2F1; --c-surface:#F9FBFB; --c-ink:#151B1A; --c-ink-soft:#4F5B59; --c-line:#D3DBD9; --c-accent:#2F7A74; --c-accent-deep:#255F5A; --c-dark:#1A2120; --c-dark-soft:#93A19E; }
[data-preset="terra"]    { --c-bg:#F3EFEA; --c-surface:#FCFAF7; --c-ink:#1D1814; --c-ink-soft:#60564E; --c-line:#DDD3C9; --c-accent:#B4532E; --c-accent-deep:#8F4023; --c-dark:#251F1A; --c-dark-soft:#A79C91; }
[data-preset="nacht"]    { --c-bg:#101216; --c-surface:#181B21; --c-ink:#EDEAE4; --c-ink-soft:#A29C91; --c-line:#2B2F37; --c-accent:#D89A4E; --c-accent-deep:#E7B876; --c-dark:#0A0C0F; --c-dark-soft:#8F8A80; }
[data-preset="luxe"]     { --c-bg:#F4F1EA; --c-surface:#FCFAF5; --c-ink:#1B1812; --c-ink-soft:#5D574A; --c-line:#DED6C5; --c-accent:#8E7B4F; --c-accent-deep:#6E5F3B; --c-dark:#211E17; --c-dark-soft:#A49C8B; }

/* ---------- 3 · Reset & Grundtypografie ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--f-disp);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .4em;
  color: var(--c-ink);
}
h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.4rem; }
p  { margin: 0 0 1em; }
a  { color: var(--c-accent-deep); text-decoration: none; }
a:hover { color: var(--c-accent); }
img { max-width: 100%; display: block; }

/* ---------- 4 · Primitive ---------- */

/* Eyebrow-/Mono-Label */
.lab {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-weight: 600; font-size: var(--fs-lab);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-accent-deep);
}
.lab.soft { color: var(--c-ink-soft); }

/* Lead-Absatz */
.lead { font-size: 1.05rem; line-height: 1.6; color: var(--c-ink-soft); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-weight: 600; font-size: var(--fs-lab);
  letter-spacing: .12em; text-transform: uppercase;
  padding: 13px 20px; border-radius: var(--r-m);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .25s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--c-accent-deep); color: #FBFAF7; }
.btn--primary:hover { background: var(--c-accent); color: #FBFAF7; }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent-deep); }
.btn--light { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-line); }

/* Karte */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-l);
  padding: 22px;
}

/* Textlink mit animiertem Unterstrich */
.tlink {
  position: relative; display: inline-block;
  font-family: var(--f-mono); font-weight: 600; font-size: var(--fs-lab);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-accent-deep); padding-bottom: 4px;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--c-accent-deep); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.tlink:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 5 · Signatur: Maßlinie ---------- */
.mline {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-weight: 600; font-size: var(--fs-lab);
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-soft);
}
.mline__idx {
  font-family: var(--f-mono); font-weight: 600; color: var(--c-accent-deep);
  border: 1px solid var(--c-line); border-radius: var(--r-s);
  padding: 2px 6px; font-size: .9em;
}
.mline__line { flex: 1; height: 1px; background: var(--c-line); position: relative; }
.mline__line i {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent);
}
.mline--dark { color: var(--c-dark-soft); }
.mline--dark .mline__idx { border-color: var(--c-dark-line); color: var(--c-accent); }
.mline--dark .mline__line { background: var(--c-dark-line); }

/* ---------- 6 · Bild-Platzhalter ---------- */
.ph {
  position: relative; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-l); min-height: 200px;
  display: flex; align-items: center; justify-content: center;
}
.ph__inner {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--c-ink) 4%, transparent) 0 2px,
      transparent 2px 10px),
    var(--c-surface);
}
.ph__lab {
  position: relative; z-index: 1;
  font-family: var(--f-mono); font-weight: 600; font-size: var(--fs-lab);
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-soft);
  background: color-mix(in srgb, var(--c-surface) 82%, transparent);
  padding: 5px 9px; border: 1px solid var(--c-line); border-radius: var(--r-s);
}
/* Seitenverhältnis-Helfer */
.r45  { aspect-ratio: 4 / 5; min-height: 0; }
.r34  { aspect-ratio: 3 / 4; min-height: 0; }
.r169 { aspect-ratio: 16 / 9; min-height: 0; }

/* ---------- 7 · Reveals (Scroll-In) ----------
   Startzustände greifen NUR unter html.js (setzt klarwerk-motion.js).
   Ohne JS / bei Fehler ist jeder Inhalt vollständig sichtbar. */
html.js .rv { opacity: 0; transform: translateY(18px);
      transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .rv.in { opacity: 1; transform: none; }

html.js .kw-words .w { display: inline-block; opacity: 0;
      transform: translateY(.55em) rotate(2deg);
      transition: opacity .55s var(--ease), transform .55s var(--ease); }
html.js .kw-words.in .w { opacity: 1; transform: none; }
.kw-words .w { display: inline-block; }

html.js .fx-clip { clip-path: inset(0 100% 0 0); }
html.js .fx-clip.in { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease); }

html.js .stag > * { opacity: 0; transform: translateY(16px); }
html.js .stag.in > * { opacity: 1; transform: none;
      transition: opacity .55s var(--ease), transform .55s var(--ease); }

/* Scale-In (Karten/Bilder) */
html.js .fx-scale-in { opacity: 0; transform: scale(.94);
      transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .fx-scale-in.in { opacity: 1; transform: none; }

/* Maßlinie zeichnet sich (Draw) — auf <i> im .mline__line */
html.js .fx-line-draw .mline__line i,
html.js .fx-line-draw.mline__line i { transform: scaleX(0); transform-origin: left;
      transition: transform 1.1s var(--ease) .15s; }
html.js .fx-line-draw.in .mline__line i,
html.js .fx-line-draw.in.mline__line i { transform: scaleX(1); }

/* Reduced-Motion / manueller Schalter — Inhalt immer sichtbar, keine Bewegung */
html.kw-nomotion * { animation: none !important; transition: none !important; }
html.kw-nomotion .rv,
html.kw-nomotion .stag > *,
html.kw-nomotion .fx-scale-in,
html.kw-nomotion .kw-words .w { opacity: 1 !important; transform: none !important; }
html.kw-nomotion .fx-clip { clip-path: inset(0 0 0 0) !important; }
html.kw-nomotion .fx-line-draw .mline__line i,
html.kw-nomotion .fx-line-draw.mline__line i { transform: scaleX(1) !important; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .rv, .stag > *, .fx-scale-in, .kw-words .w { opacity: 1 !important; transform: none !important; }
  .fx-clip { clip-path: inset(0 0 0 0) !important; }
  .fx-line-draw .mline__line i, .fx-line-draw.mline__line i { transform: scaleX(1) !important; }
}

/* ---------- 7c · Motion-Tokens (Easing & Timing — keine Magic-Numbers) ---------- */
:root {
  --mo-ease-out: cubic-bezier(.16,1,.3,1);
  --mo-ease-in-out: cubic-bezier(.65,0,.35,1);
  --mo-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --mo-dur-fast: 180ms;
  --mo-dur-base: 360ms;
  --mo-dur-slow: 640ms;
  --mo-dur-scene: 900ms;
  --mo-stagger-step: 60ms;
}

/* ---------- 7d · Motion-Toolbox (fx-Verhaltensschichten) ---------- */
/* Underline-Draw-on-Hover — Maßlinie als Unterstreichung */
.fx-underline { position: relative; text-decoration: none; }
.fx-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: var(--c-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--mo-dur-base) var(--mo-ease-out); }
.fx-underline:hover::after, .fx-underline:focus-visible::after { transform: scaleX(1); }

/* Icon-Morph (Plus→X, CSS-only; reagiert auch auf aria-expanded) */
.fx-morph { display: inline-flex; transition: transform var(--mo-dur-base) var(--mo-ease-in-out); }
.fx-morph:hover, [aria-expanded="true"] .fx-morph { transform: rotate(45deg); }

/* Pulsierender Live-Indikator */
@keyframes kwpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 11px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.fx-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent);
  animation: kwpulse 2.2s var(--mo-ease-in-out) infinite; flex-shrink: 0; }

/* Cursor-Effekte — NUR Desktop mit echtem Zeiger */
@media (hover: hover) and (pointer: fine) {
  .fx-spot { position: relative; }
  .fx-spot::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    opacity: 0; transition: opacity var(--mo-dur-base) var(--mo-ease-out); border-radius: inherit;
    background: radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 50%),
      color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 70%); }
  .fx-spot:hover::before { opacity: 1; }
  .fx-tilt { transition: transform var(--mo-dur-fast) var(--mo-ease-out); will-change: transform; }
  .kw-trail-dot { position: fixed; z-index: 90; width: 9px; height: 9px; border-radius: 50%;
    background: var(--c-accent); pointer-events: none; opacity: 0;
    transition: opacity var(--mo-dur-base) var(--mo-ease-out); }
}

/* Odometer (rollende Ziffern) */
.kw-odo { display: inline-flex; overflow: hidden; }
.kw-odo .kw-odo-col { display: flex; flex-direction: column;
  transition: transform var(--mo-dur-scene) var(--mo-ease-out); }
.kw-odo .kw-odo-col > span { display: block; line-height: 1.1; }

/* Kreis-Ring (SVG-Fortschritt) */
.kw-ring .kw-ring-fill { transition: stroke-dashoffset var(--mo-dur-scene) var(--mo-ease-out); }

/* Motion-Toolbox: reduced-motion / kw-nomotion — pro Typ definierter Endzustand */
html.kw-nomotion .fx-pulse { animation: none !important; }
html.kw-nomotion .fx-tilt, html.kw-nomotion .fx-magnet { transform: none !important; }
html.kw-nomotion .fx-spot::before, html.kw-nomotion .kw-trail-dot { display: none !important; }
html.kw-nomotion .fx-underline::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .fx-pulse { animation: none !important; }
  .fx-tilt, .fx-magnet { transform: none !important; }
  .fx-spot::before, .kw-trail-dot { display: none !important; }
  .fx-underline::after { transform: scaleX(1); }
}

/* ---------- 7b · Textur & Typo-FX (statisch, token-basiert) ---------- */
/* Feines CSS-Grain als Tiefe — dezent, ohne Bild */
.fx-grain { position: relative; }
.fx-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .05; mix-blend-mode: multiply;
  background-image: repeating-radial-gradient(circle at 17% 32%, var(--c-ink) 0 .6px, transparent .6px 3px),
                    repeating-radial-gradient(circle at 73% 64%, var(--c-ink) 0 .5px, transparent .5px 2.6px);
  background-size: 7px 7px, 5px 5px; }

/* Weiches Gradient-Mesh aus Preset-Farben */
.fx-mesh { background-image:
  radial-gradient(42% 55% at 18% 20%, color-mix(in srgb, var(--c-accent) 22%, transparent), transparent 70%),
  radial-gradient(50% 60% at 85% 12%, color-mix(in srgb, var(--c-accent-deep) 14%, transparent), transparent 72%),
  radial-gradient(55% 65% at 70% 90%, color-mix(in srgb, var(--c-accent) 12%, transparent), transparent 75%); }

/* Animierter Gradient-Text — statischer Fallback: Accent-Farbe */
.fx-gradtext { color: var(--c-accent-deep); }
@supports (-webkit-background-clip: text) {
  html.js .fx-gradtext { background: linear-gradient(90deg, var(--c-ink), var(--c-accent-deep), var(--c-accent), var(--c-ink));
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: kwgrad 7s linear infinite; }
}
@keyframes kwgrad { to { background-position: -250% 0; } }
html.kw-nomotion .fx-gradtext { animation: none !important; background: none !important; color: var(--c-accent-deep) !important; }
@media (prefers-reduced-motion: reduce) { .fx-gradtext { animation: none !important; background: none !important; color: var(--c-accent-deep) !important; } }

/* Sanftes Schweben (Badges) — nur transform, aus bei nomotion/reduced-motion */
@keyframes kwfloat { from { transform: translateY(0); } to { transform: translateY(-10px); } }
html.js .fx-float { animation: kwfloat 3.6s ease-in-out infinite alternate; }
html.js .fx-float2 { animation: kwfloat 4.4s ease-in-out .6s infinite alternate; }

/* Atome: Skeleton, Spinner, Tooltip */
@keyframes kwskel { to { background-position: -200% 0; } }
.kw-skel { background: linear-gradient(90deg, var(--c-line) 25%, color-mix(in srgb, var(--c-line) 45%, var(--c-surface)) 50%, var(--c-line) 75%);
  background-size: 200% 100%; animation: kwskel 1.5s linear infinite; }
html.kw-nomotion .kw-skel { animation: none !important; background: var(--c-line); }
@keyframes kwspin { to { transform: rotate(360deg); } }
.kw-spin { animation: kwspin .9s linear infinite; }
.kw-tip:hover .kw-tip-box, .kw-tip:focus-within .kw-tip-box { opacity: 1 !important; visibility: visible !important; }
.fx-magnet { transition: transform .25s var(--ease); display: inline-block; }

/* ---------- 8 · Wiederverwendbare Effekte ---------- */
/* Ken-Burns (nur auf .ph__inner) */
@keyframes kwkb { from { transform: scale(1) translate(0,0); }
                  to   { transform: scale(1.14) translate(2%,-2%); } }
.fx-kb .ph__inner { animation: kwkb 15s ease-in-out infinite alternate; }

/* Zoom bei Hover */
.fx-zoom .ph__inner { transition: transform .8s var(--ease); }
.fx-zoom:hover .ph__inner { transform: scale(1.06); }

/* Anheben */
.fx-lift { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.fx-lift:hover { transform: translateY(-4px); box-shadow: var(--sh-1); }

/* Button-Sweep */
.fx-sweep { position: relative; overflow: hidden; z-index: 0; }
.fx-sweep::before {
  content: ""; position: absolute; inset: 0; background: var(--c-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease); z-index: -1;
}
.fx-sweep:hover::before { transform: scaleX(1); }
.fx-sweep:hover { color: var(--c-surface); border-color: var(--c-accent); }

/* Outline-Typo */
.fx-out { -webkit-text-stroke: 1.5px var(--c-ink); color: transparent;
          transition: color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease); }
.fx-out:hover { color: var(--c-accent); -webkit-text-stroke-color: var(--c-accent); }

/* CTA-Invert (Kreis-Wipe) */
.fx-inv { position: relative; overflow: hidden; }
.fx-inv::before {
  content: ""; position: absolute; inset: 0; background: var(--c-accent-deep);
  clip-path: circle(0% at 50% 118%); transition: clip-path .8s var(--ease);
}
.fx-inv:hover::before { clip-path: circle(150% at 50% 118%); }
.fx-inv > * { position: relative; }

/* ---------- 9 · Interaktive Komponenten ---------- */

/* Akkordion */
.acc__item { border-bottom: 1px solid var(--c-line); }
.acc__q {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; padding: 16px 2px; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--f-disp); font-weight: 600; font-size: 1rem; color: var(--c-ink);
  transition: color .3s, padding-left .35s var(--ease);
}
.acc__q:hover { color: var(--c-accent-deep); padding-left: 8px; }
.acc__q .ic { font-family: var(--f-mono); font-weight: 400; color: var(--c-accent-deep);
              transition: transform .4s var(--ease); flex-shrink: 0; }
.acc__q[aria-expanded="true"] .ic { transform: rotate(45deg); }
.acc__p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.acc__p.is-open { grid-template-rows: 1fr; }
.acc__p > div { overflow: hidden; }
.acc__p p { padding: 0 2px 16px; color: var(--c-ink-soft); font-size: .92rem; }

/* Preiszeile */
.prow {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 14px 4px; border-bottom: 1px solid var(--c-line);
  transition: padding-left .35s var(--ease), background .35s;
}
.prow:hover { padding-left: 14px; background: var(--c-surface); }

/* Vorher/Nachher-Slider */
.ba { position: relative; overflow: hidden; border-radius: var(--r-l);
      border: 1px solid var(--c-line); --pos: 50%; }
.ba__layer { position: absolute; inset: 0; }
.ba__top { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__bar { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px;
           background: #FBFAF7; box-shadow: 0 0 0 1px rgba(27,24,20,.25);
           pointer-events: none; z-index: 2; }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%;
            opacity: 0; cursor: ew-resize; margin: 0; }
.ba .lab { position: absolute; top: 10px; z-index: 1;
           background: color-mix(in srgb, var(--c-surface) 85%, transparent);
           padding: 4px 8px; border-radius: var(--r-s); border: 1px solid var(--c-line);
           font-size: .62rem; }

/* Marquee (Logo-/Referenzband) */
@keyframes kwmarq { to { transform: translateX(-100%); } }
.marq { overflow: hidden; display: flex; user-select: none; }
.marq__row { display: flex; align-items: center; gap: 26px; flex-shrink: 0;
             padding-right: 26px; animation: kwmarq 16s linear infinite; will-change: transform; }
.marq--slow .marq__row { animation-duration: 28s; }
.marq:hover .marq__row { animation-play-state: paused; }
.marq i { width: 6px; height: 6px; background: var(--c-accent); border-radius: 2px; flex-shrink: 0; }
.mq-card { width: 290px; background: var(--c-surface); border: 1px solid var(--c-line);
           border-radius: var(--r-l); padding: 16px 18px; flex-shrink: 0; }

/* ---------- 10 · Layout-Helfer ---------- */
.kw-section { padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 48px); }
.kw-wrap { max-width: 1120px; margin-inline: auto; }

/* ============================================================
   11 · Responsive Utilities (Breakpoint-Helfer für die Blöcke)
   ============================================================ */
.k-only-sm { display: none !important; }
@media (max-width: 780px) {
  .k-stack   { grid-template-columns: 1fr !important; }
  .k-hide-sm { display: none !important; }
  .k-only-sm { display: flex !important; }
  .k-nav-menu { display: none !important; }
  .k-burger  { display: inline-flex !important; }
}
.k-burger { display: none; }