@layer reset, tokens, base, layout, components, motion, utilities;

/* ============================================================
   TOKENS — das Designsystem. Alles andere leitet sich hieraus ab.
   ============================================================ */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* --- Farbe: Marke --- */
    --brand-copper: #9a7b4f;
    --brand-brass:  #b08d57;

    /* --- Farbe: semantisch (hell / dunkel) --- */
    --surface:      light-dark(#f5f3ee, #101315);
    --surface-2:    light-dark(#ebe7de, #161a1d);
    --surface-3:    light-dark(#fffdf8, #1b2126);
    --surface-deep: light-dark(#16191c, #0a0d0f);
    --surface-deep-2: light-dark(#1d2125, #12161a);

    --line:      light-dark(#ddd7ca, #272d33);
    --line-deep: light-dark(#2c3137, #232a30);

    --ink:       light-dark(#16191c, #ecebe5);
    --ink-soft:  light-dark(#5c6269, #a3a9b0);
    --ink-faint: light-dark(#686e75, #7c828a);
    --ink-on-deep:       #f1efe9;
    --ink-on-deep-soft:  #b5bac0;
    --ink-on-deep-faint: #848a91;

    --accent:      light-dark(#9a7b4f, #c89c60);
    --accent-hover:light-dark(#8a6c42, #dcb178);
    --accent-on:   light-dark(#fffdf8, #14171a);
    --accent-text: light-dark(#7d6039, #d8ae74);
    --accent-wash: light-dark(rgb(154 123 79 / .09), rgb(200 156 96 / .12));

    --ok:  light-dark(#4d7044, #8fc17f);
    --err: light-dark(#93494a, #e0908f);

    --scrim-1: light-dark(rgb(245 243 238 / .95), rgb(16 19 21 / .93));
    --scrim-2: light-dark(rgb(245 243 238 / .82), rgb(16 19 21 / .80));
    --scrim-3: light-dark(rgb(245 243 238 / .40), rgb(16 19 21 / .38));
    --scrim-4: light-dark(rgb(245 243 238 / .06), rgb(16 19 21 / .05));
    --header-bg: light-dark(rgb(245 243 238 / .72), rgb(16 19 21 / .72));

    /* --- Typografie --- */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    --text-xs:   .6875rem;              /* 11px — Label, Eyebrow */
    --text-sm:   .8125rem;              /* 13px */
    --text-base: clamp(.9375rem, .9rem + .2vw, 1rem);
    --text-md:   clamp(1rem, .95rem + .3vw, 1.125rem);
    --text-lg:   clamp(1.125rem, 1rem + .5vw, 1.25rem);
    --text-xl:   clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem);
    --text-2xl:  clamp(1.75rem, 1.2rem + 2.6vw, 3.125rem);
    --text-3xl:  clamp(2rem, 1rem + 4.4vw, 4rem);

    --tracking-wide:  .14em;
    --tracking-wider: .28em;
    --tracking-tight: -.015em;

    /* --- Raster & Abstand --- */
    --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
    --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
    --space-7: 2.75rem; --space-8: 4rem;    --space-9: 6rem;
    --space-10: clamp(5rem, 9vw, 8.25rem);

    --measure: 46ch;
    --container: 76rem;
    --gutter: clamp(1.25rem, 4vw, 2.25rem);

    /* --- Form & Tiefe --- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-full: 999px;

    --shadow-sm: 0 1px 2px light-dark(rgb(22 25 28 / .05), rgb(0 0 0 / .3));
    --shadow-md: 0 2px 4px light-dark(rgb(22 25 28 / .04), rgb(0 0 0 / .25)),
                 0 8px 24px -8px light-dark(rgb(22 25 28 / .10), rgb(0 0 0 / .45));
    --shadow-lg: 0 4px 8px light-dark(rgb(22 25 28 / .04), rgb(0 0 0 / .25)),
                 0 24px 56px -16px light-dark(rgb(22 25 28 / .16), rgb(0 0 0 / .6));

    /* --- Bewegung --- */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-fast: .18s;
    --dur: .3s;
    --dur-slow: .5s;

    --header-h: 4.75rem;
  }

  /* Manuelle Umschaltung überschreibt die Systemeinstellung */
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
}

/* ============================================================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-block-size: 100svh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, svg, video, picture { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  ul[class] { list-style: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3, h4 { text-wrap: balance; font-weight: 700; }
  p { text-wrap: pretty; }
  :target { scroll-margin-block-start: calc(var(--header-h) + var(--space-5)); }
}

/* ============================================================ */
@layer base {
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.55;
    background: var(--surface);
    color: var(--ink);
    overflow-x: clip;
    accent-color: var(--accent);
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }
  .on-deep :focus-visible { outline-color: var(--brand-brass); }

  ::selection { background: var(--accent); color: var(--accent-on); }

  .skip-link {
    position: absolute; inset-block-start: var(--space-3); inset-inline-start: var(--space-3);
    z-index: 999; padding: var(--space-3) var(--space-5);
    background: var(--accent); color: var(--accent-on);
    border-radius: var(--radius-md); font-family: var(--font-mono); font-size: var(--text-sm);
    letter-spacing: .08em; text-transform: uppercase;
    translate: 0 -200%;
  }
  .skip-link:focus-visible { translate: 0; }
}

/* ============================================================ */
@layer layout {
  .wrap {
    inline-size: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
  }
  .block { padding-block: var(--space-10); position: relative; }
  .block.alt { background: var(--surface-2); }

  .stack > * + * { margin-block-start: var(--flow, var(--space-4)); }

  /* Eine Linie statt vier Rahmen: Grid-Gap zeigt die Hintergrundfarbe */
  .hairline-grid {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: clip;
  }
  .hairline-grid.on-deep { background: var(--line-deep); border-color: var(--line-deep); }
}

/* ============================================================ */
@layer components {

  /* ---------- Typo-Bausteine ---------- */
  .eyebrow {
    font-family: var(--font-mono); font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider); text-transform: uppercase;
    color: var(--accent-text);
  }
  .on-deep .eyebrow { color: var(--brand-brass); }
  .meta {
    font-family: var(--font-mono); font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide); text-transform: uppercase;
    color: var(--ink-faint);
  }

  .section-head {
    display: flex; flex-wrap: wrap; gap: var(--space-5);
    align-items: flex-end; justify-content: space-between;
  }
  .section-head h2 {
    font-size: var(--text-2xl); line-height: 1.04; letter-spacing: var(--tracking-tight);
  }
  .section-head .meta { text-align: end; }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
    font-family: var(--font-mono); font-size: var(--text-sm);
    letter-spacing: .1em; text-transform: uppercase;
    padding: var(--space-4) var(--space-6);
    border: 1px solid transparent; border-radius: var(--radius-full);
    transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out), translate var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
  }
  .btn svg { inline-size: 1rem; block-size: 1rem; }
  .btn-primary { background: var(--accent); color: var(--accent-on); box-shadow: var(--shadow-sm); }
  .btn-primary:hover { background: var(--accent-hover); translate: 0 -2px; box-shadow: var(--shadow-md); }
  .btn-ghost { border-color: var(--line); color: var(--ink); }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-wash); }
  .btn[disabled] { opacity: .6; pointer-events: none; }

  /* ---------- Header ---------- */
  .header {
    position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
    padding-block: var(--space-4);
    border-block-end: 1px solid transparent;
    transition: padding var(--dur) var(--ease-out), background var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
  }
  .header::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to bottom, var(--scrim-1), var(--scrim-3) 60%, transparent);
    transition: opacity var(--dur) var(--ease-out);
  }
  .header[data-stuck] {
    padding-block: var(--space-3);
    background: var(--header-bg);
    border-block-end-color: var(--line);
    backdrop-filter: blur(14px) saturate(1.4);
  }
  .header[data-stuck]::before { opacity: 0; }

  .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

  .brand { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); }
  .brand-symbol { inline-size: 2.25rem; block-size: 2.25rem; flex: none; }
  .brand .lockup { display: flex; flex-direction: column; gap: 2px; }
  .brand .mark {
    font-weight: 700; font-size: 1.1875rem; line-height: 1;
    letter-spacing: .3em; text-transform: uppercase;
  }
  .brand .mark .dot { color: var(--accent); }
  .brand .sub {
    font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-soft);
  }

  .nav-links { display: flex; align-items: center; gap: var(--space-6); }
  .nav-links a {
    font-family: var(--font-mono); font-size: var(--text-sm);
    letter-spacing: .12em; text-transform: uppercase;
    padding-block: var(--space-2);
    transition: color var(--dur-fast);
  }
  .nav-links a:not(.nav-cta) { position: relative; }
  .nav-links a:not(.nav-cta)::after {
    content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
    block-size: 1px; inline-size: 100%; background: var(--accent);
    scale: 0 1; transform-origin: left; transition: scale var(--dur) var(--ease-out);
  }
  .nav-links a:hover { color: var(--accent-text); }
  .nav-links a:hover::after,
  .nav-links a[aria-current="true"]::after { scale: 1 1; }
  .nav-links a[aria-current="true"] { color: var(--accent-text); }
  .nav-cta {
    border: 1px solid var(--accent); border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-5) !important; color: var(--accent-text);
    transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  }
  .nav-cta:hover { background: var(--accent); color: var(--accent-on); }

  /* über dem Off-Canvas-Panel, damit beide Schalter erreichbar bleiben */
  .nav-tools { display: flex; align-items: center; gap: var(--space-2); position: relative; z-index: 110; }
  .icon-btn {
    display: grid; place-items: center;
    inline-size: 2.5rem; block-size: 2.5rem;
    border: 1px solid var(--line); border-radius: var(--radius-full);
    color: var(--ink-soft);
    transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
  }
  .icon-btn:hover { color: var(--accent-text); border-color: var(--accent); background: var(--accent-wash); }
  .icon-btn svg { inline-size: 1.125rem; block-size: 1.125rem; }
  .theme-toggle .moon { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
    :root:not([data-theme="light"]) .theme-toggle .moon { display: block; }
  }
  :root[data-theme="dark"] .theme-toggle .sun { display: none; }
  :root[data-theme="dark"] .theme-toggle .moon { display: block; }
  :root[data-theme="light"] .theme-toggle .sun { display: block; }
  :root[data-theme="light"] .theme-toggle .moon { display: none; }

  .nav-toggle { display: none; }
  /* place-content statt nur place-items: sonst dehnen sich die drei Grid-Zeilen
     auf die Buttonhöhe und das X geht beim Umschalten nicht auf. */
  .nav-toggle .bar {
    display: block; inline-size: 1.125rem; block-size: 1.5px; background: currentColor;
    transition: translate var(--dur) var(--ease-out), rotate var(--dur) var(--ease-out), opacity var(--dur-fast);
  }
  .nav-toggle .bar + .bar { margin-block-start: 5px; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(1) { translate: 0 6.5px; rotate: 45deg; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(3) { translate: 0 -6.5px; rotate: -45deg; }

  .nav-backdrop {
    position: fixed; inset: 0; z-index: 90;
    background: light-dark(rgb(22 25 28 / .4), rgb(0 0 0 / .6));
    backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur) var(--ease-out);
  }
  body:has(.nav-toggle[aria-expanded="true"]) .nav-backdrop { opacity: 1; pointer-events: auto; }
  body:has(.nav-toggle[aria-expanded="true"]) { overflow: hidden; }

  /* ---------- Hero ---------- */
  .hero {
    position: relative; display: flex; align-items: center;
    min-block-size: 100svh; overflow: clip;
    padding-block: calc(var(--header-h) + var(--space-8)) var(--space-9);
  }
  .hero .layer { position: absolute; inset: 0; }
  .hero-anim { background: #12161a; }
  .shk-scene { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }


  .hero-scrim {
    background:
      linear-gradient(100deg, var(--scrim-1) 0%, var(--scrim-2) 34%, var(--scrim-3) 62%, var(--scrim-4) 100%),
      radial-gradient(circle at 78% 40%, var(--accent-wash), transparent 52%);
  }
  /* Schmale Viewports: der diagonale Verlauf lässt zu wenig Deckung hinter
     der Subline — hier deckt der Scrim von oben nach unten ab. */
  @media (width <= 55rem) {
    .hero-scrim {
      background:
        linear-gradient(to bottom, var(--scrim-1) 0%, var(--scrim-1) 62%, var(--scrim-2) 80%, var(--scrim-3) 100%),
        radial-gradient(circle at 70% 78%, var(--accent-wash), transparent 55%);
    }
  }

  .wave-wrap { display: flex; align-items: center; justify-content: flex-end; padding-inline-end: 3%; opacity: .5; }
  .waves { inline-size: 41rem; block-size: 41rem; max-inline-size: 92vw; max-block-size: 92vw; }
  .waves circle { fill: none; transform-origin: 330px 330px; }

  .hero-content { position: relative; z-index: 5; max-inline-size: 48rem; }
  .hero h1 {
    font-size: var(--text-3xl); line-height: 1.02; letter-spacing: -.02em;
    margin-block-start: var(--space-5); max-inline-size: 18ch;
  }
  .hero h1 .akzent { color: var(--accent); }
  .hero-sub {
    margin-block-start: var(--space-5); font-size: var(--text-md);
    color: var(--ink-soft); max-inline-size: 32ch;
  }
  .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-start: var(--space-7); }

  .ticker {
    position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 6;
    border-block-start: 1px solid var(--line);
    background: var(--header-bg); backdrop-filter: blur(8px);
  }
  /* Statische Leiste über die volle Breite: die Begriffe stehen fest und
     verteilen sich bis an beide Ränder. */
  .ticker-track {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-5);
    padding-block: var(--space-4);
    padding-inline: var(--gutter);
  }
  .ticker-track li {
    display: inline-flex; align-items: center; gap: var(--space-3);
    font-family: var(--font-mono); font-size: var(--text-sm);
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
    white-space: nowrap;
  }
  .ticker-track li::before {
    content: ""; inline-size: 5px; block-size: 5px; border-radius: var(--radius-full);
    background: var(--accent); flex: none;
  }

  /* ---------- Leistungen (native <details>) ---------- */
  .index { margin-block-start: var(--space-7); border-block-start: 1px solid var(--line); }
  .row { border-block-end: 1px solid var(--line); position: relative; }
  .row > summary {
    display: grid; grid-template-columns: 4.5rem 1fr auto auto;
    align-items: center; gap: var(--space-5);
    padding: var(--space-6) var(--space-3);
    cursor: pointer; list-style: none;
    border-radius: var(--radius-md);
    position: relative; z-index: 1;
  }
  .row > summary::-webkit-details-marker { display: none; }
  .row::after {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
    inline-size: 0; background: var(--accent); opacity: .07;
    border-radius: var(--radius-md);
    transition: inline-size var(--dur-slow) var(--ease-out);
  }
  .row:hover::after, .row[open]::after { inline-size: 100%; }
  .rnum {
    font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .16em;
    color: var(--ink-faint); transition: color var(--dur);
  }
  .row:hover .rnum, .row[open] .rnum { color: var(--accent-text); }
  .rtitle {
    font-size: var(--text-xl); font-weight: 700; letter-spacing: -.01em;
    transition: translate var(--dur) var(--ease-out);
  }
  .row:hover .rtitle { translate: .625rem 0; }
  .rtag {
    font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-soft);
    border: 1px solid var(--line); border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-3); white-space: nowrap;
  }
  .plus { inline-size: 1rem; block-size: 1rem; position: relative; flex: none; justify-self: end; }
  .plus::before, .plus::after {
    content: ""; position: absolute; background: var(--ink-soft);
    transition: rotate var(--dur) var(--ease-out), background var(--dur);
  }
  .plus::before { inset-block-start: 7px; inset-inline-start: 0; inline-size: 1rem; block-size: 2px; }
  .plus::after  { inset-block-start: 0; inset-inline-start: 7px; inline-size: 2px; block-size: 1rem; }
  .row[open] .plus::after { rotate: 90deg; }
  .row[open] .plus::before, .row[open] .plus::after { background: var(--accent); }

  .row-body { position: relative; z-index: 1; padding-inline-start: 6rem; padding-block-end: var(--space-6); }
  .row-body ul { columns: 2; column-gap: var(--space-8); }
  .row-body li {
    break-inside: avoid; padding-block: var(--space-2);
    padding-inline-start: var(--space-5); position: relative;
  }
  .row-body li::before {
    content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 1.05em;
    inline-size: 6px; block-size: 6px; border-radius: 2px; background: var(--accent);
  }
  .row-cta { margin-block-start: var(--space-4); }
  .row-cta a {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent-text);
    border-block-end: 1px solid currentColor; padding-block-end: 3px;
    transition: color var(--dur-fast), gap var(--dur-fast);
  }
  .row-cta a:hover { color: var(--accent-hover); gap: var(--space-3); }

  /* ---------- Dunkles Band (Kontakt) ---------- */
  .deep { position: relative; overflow: clip; background: var(--surface-deep); color: var(--ink-on-deep); }
  .deep .layer { position: absolute; inset: -12% 0; }
  .deep .deep-inner { position: relative; z-index: 5; }
  .deep .section-head h2 { color: var(--ink-on-deep); }
  .deep .section-head .meta { color: var(--ink-on-deep-faint); }
  .deep-glow { background: radial-gradient(circle at var(--gx, 22%) 40%, rgb(154 123 79 / .22), transparent 54%); }
  .deep-grid {
    background-image:
      linear-gradient(var(--line-deep) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-deep) 1px, transparent 1px);
    background-size: 4.5rem 4.5rem; opacity: .4;
    -webkit-mask-image: radial-gradient(circle at var(--gx, 22%) 40%, #000, transparent 66%);
            mask-image: radial-gradient(circle at var(--gx, 22%) 40%, #000, transparent 66%);
  }

  /* ---------- Für wen ---------- */
  .who { grid-template-columns: repeat(3, 1fr); margin-block-start: var(--space-7); }
  .who-cell {
    background: var(--surface); padding: var(--space-6);
    transition: background var(--dur) var(--ease-out);
  }
  .block.alt .who-cell { background: var(--surface-2); }
  .who-cell:hover, .block.alt .who-cell:hover { background: var(--surface-3); }
  .who-cell h3 { font-size: var(--text-lg); margin-block: var(--space-3) var(--space-2); }
  .who-cell p { color: var(--ink-soft); }

  /* ---------- Kontakt ---------- */
  .contact-inner {
    display: grid; grid-template-columns: 1fr 1.15fr;
    gap: clamp(2rem, 5vw, 4rem); align-items: start;
  }
  .contact-intro h2 {
    font-size: var(--text-2xl); line-height: 1.02; letter-spacing: var(--tracking-tight);
    margin-block-start: var(--space-3); color: var(--ink-on-deep);
  }
  .contact-intro p { color: var(--ink-on-deep-soft); margin-block-start: var(--space-4); max-inline-size: 38ch; }

  .quick { margin-block-start: var(--space-6); grid-auto-rows: auto; }
  .quick a {
    background: var(--surface-deep); display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4) var(--space-5); transition: background var(--dur-fast);
  }
  .quick a:hover { background: var(--surface-deep-2); }
  .quick .qi { inline-size: 1.375rem; block-size: 1.375rem; flex: none; color: var(--brand-brass); }
  .quick .qt strong { display: block; color: var(--ink-on-deep); }
  .quick .qt span {
    font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-on-deep-faint);
  }
  .quick .qarrow {
    margin-inline-start: auto; color: var(--ink-on-deep-faint);
    transition: translate var(--dur-fast), color var(--dur-fast);
  }
  .quick a:hover .qarrow { translate: 4px 0; color: var(--brand-brass); }

  /* ---------- Formular ---------- */
  .form-card {
    background: var(--surface); color: var(--ink);
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  }
  .form-card h3 { font-size: var(--text-lg); letter-spacing: -.01em; }
  .fc-sub {
    font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-soft); margin-block: var(--space-1) var(--space-6);
  }
  .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .field { display: flex; flex-direction: column; gap: var(--space-2); margin-block-end: var(--space-4); }
  .field.full { grid-column: 1 / -1; }
  .field > label, .fieldset-label {
    font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-soft);
  }
  .req { color: var(--accent); }
  .field input, .field select, .field textarea {
    font-size: var(--text-base); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4); inline-size: 100%;
    transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
  }
  .field textarea { resize: vertical; min-block-size: 7rem; }
  .field :is(input, select, textarea):focus-visible {
    outline: none; border-color: var(--accent); background: var(--surface-3);
    box-shadow: 0 0 0 3px var(--accent-wash);
  }
  .field :is(input, textarea):user-invalid { border-color: var(--err); }
  .field select {
    appearance: none; padding-inline-end: var(--space-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a7b4f' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right var(--space-4) center;
  }

  .urgency { display: flex; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: clip; }
  .urgency > div { flex: 1; display: flex; }
  .urgency > div + div { border-inline-start: 1px solid var(--line); }
  .urgency input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
  .urgency label {
    flex: 1; text-align: center; padding: var(--space-3) var(--space-2);
    font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-soft); cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
  }
  .urgency label:hover { background: var(--accent-wash); }
  .urgency input:checked + label { background: var(--accent); color: var(--accent-on); }
  .urgency input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; }

  .consent { font-size: var(--text-sm); color: var(--ink-soft); margin-block-start: var(--space-4); }
  .consent a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
  .form-submit { inline-size: 100%; margin-block-start: var(--space-2); }

  .form-msg {
    display: none; padding: var(--space-4); font-size: var(--text-sm);
    margin-block-start: var(--space-4);
    border-inline-start: 3px solid; border-radius: var(--radius-sm);
  }
  .form-msg[data-state] { display: block; }
  .form-msg[data-state="ok"]  { background: light-dark(rgb(77 112 68 / .1), rgb(143 193 127 / .12)); border-color: var(--ok); color: var(--ok); }
  .form-msg[data-state="err"] { background: light-dark(rgb(147 73 74 / .1), rgb(224 144 143 / .12)); border-color: var(--err); color: var(--err); }
  .form-msg a { color: inherit; text-decoration: underline; }

  .noscript-note {
    margin-block-start: var(--space-4); padding: var(--space-4);
    border: 1px dashed var(--line); border-radius: var(--radius-md);
    font-size: var(--text-sm); color: var(--ink-soft);
  }

  /* ---------- Footer ---------- */
  .footer { border-block-start: 1px solid var(--line); padding-block: var(--space-8) var(--space-6); }
  .foot-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-7); margin-block-end: var(--space-8);
  }
  .foot-brand { display: inline-flex; align-items: center; gap: var(--space-3); }
  .foot-brand .brand-symbol { inline-size: 2rem; block-size: 2rem; }
  .foot-brand .mark { font-weight: 700; font-size: 1.1875rem; letter-spacing: .3em; text-transform: uppercase; }
  .foot-brand .mark .dot { color: var(--accent); }
  .foot-grid p { color: var(--ink-soft); font-size: var(--text-sm); margin-block-start: var(--space-4); max-inline-size: 34ch; }
  .foot-col h4 {
    font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .18em;
    text-transform: uppercase; color: var(--accent-text); margin-block-end: var(--space-4);
  }
  .foot-col li { margin-block-end: var(--space-2); }
  .foot-col :is(a, span) { color: var(--ink-soft); font-size: var(--text-sm); transition: color var(--dur-fast); }
  .foot-col a:hover { color: var(--ink); }
  .foot-bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
    border-block-start: 1px solid var(--line); padding-block-start: var(--space-5);
  }
  .foot-bottom :is(span, a) {
    font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; color: var(--ink-soft);
  }
  .foot-bottom a:hover { color: var(--ink); }
}

/* ============================================================
   MOTION — vollständig hinter prefers-reduced-motion gekapselt
   ============================================================ */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {

    /* Hero-Einlauf */
    .hero h1, .hero .eyebrow, .hero-sub, .hero-actions {
      opacity: 0; animation: fade-up .8s var(--ease-out) forwards;
    }
    .hero .eyebrow { animation-delay: .25s; }
    .hero h1 { animation-delay: .35s; }
    .hero-sub { animation-delay: .5s; }
    .hero-actions { animation-delay: .65s; }
    @keyframes fade-up { from { opacity: 0; translate: 0 1rem; } to { opacity: 1; translate: 0 0; } }

    /* Wellen */
    .waves .ring { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 2.2s var(--ease-in-out) forwards; }
    .waves .r2 { animation-delay: .18s; } .waves .r3 { animation-delay: .36s; } .waves .r4 { animation-delay: .54s; }
    .waves .pulse { animation: draw 2.2s var(--ease-in-out) forwards, pulse 5.5s var(--ease-in-out) infinite; }
    .waves .p2 { animation-delay: .18s, 1.1s; } .waves .p3 { animation-delay: .36s, 2.2s; } .waves .p4 { animation-delay: .54s, 3.3s; }
    .waves .core { opacity: 0; animation: fade-in .6s ease .7s forwards; }
    @keyframes draw { to { stroke-dashoffset: 0; } }
    @keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 1.025; } }
    @keyframes fade-in { to { opacity: 1; } }

    /* Wärmefeld: ein einziges, sehr langsames Atmen. Die inneren Ringe
       bewegen sich etwas stärker als die äußeren — das Feld wirkt dadurch
       lebendig, ohne dass eine einzelne Linie auffällt. */
    .feld { transform-origin: 1010px 455px; animation: atmen 30s var(--ease-in-out) infinite; }
    @keyframes atmen {
      0%, 100% { scale: 1; }
      50%      { scale: 1.018; }
    }
    .iso { transform-origin: 1010px 455px; }
    .i0, .i1, .i2, .i3 { animation: atmen-innen 30s var(--ease-in-out) infinite; }
    @keyframes atmen-innen {
      0%, 100% { scale: 1; }
      50%      { scale: 1.05; }
    }
    .quelle { transform-origin: 1010px 455px; animation: puls 30s var(--ease-in-out) infinite; }
    @keyframes puls {
      0%, 100% { opacity: .85; }
      50%      { opacity: 1; }
    }

    /* Aufklapp-Animation, wo unterstützt */
    @supports (interpolate-size: allow-keywords) {
      :root { interpolate-size: allow-keywords; }
      .row::details-content {
        block-size: 0; overflow: clip;
        transition: block-size var(--dur-slow) var(--ease-out), content-visibility var(--dur-slow) allow-discrete;
      }
      .row[open]::details-content { block-size: auto; }
    }

    /* Scroll-getriebene Effekte: kein Scroll-Listener, läuft im Compositor */
    @supports (animation-timeline: view()) {
      .reveal {
        animation: reveal-in linear both;
        animation-timeline: view();
        animation-range: entry 8% cover 26%;
      }
      @keyframes reveal-in { from { opacity: 0; translate: 0 2rem; } to { opacity: 1; translate: 0 0; } }

      .parallax {
        animation: parallax linear both;
        animation-timeline: view();
        animation-range: cover;
      }
      @keyframes parallax { from { translate: 0 -5%; } to { translate: 0 5%; } }
    }

    /* Fallback für Browser ohne Scroll-Timelines: IntersectionObserver setzt .in */
    @supports not (animation-timeline: view()) {
      .reveal { opacity: 0; translate: 0 2rem; transition: opacity .8s var(--ease-out), translate .8s var(--ease-out); }
      .reveal.in { opacity: 1; translate: 0 0; }
      .reveal.d1 { transition-delay: .08s; }
      .reveal.d2 { transition-delay: .16s; }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* Kein Autoplay-Video, keine Scroll- oder Endlosanimationen — der
       Scrim bleibt derselbe, damit Kontrast und Lesbarkeit identisch sind. */
  }
}

/* ============================================================ */
@layer utilities {
  .visually-hidden:not(:focus-visible) {
    position: absolute; inline-size: 1px; block-size: 1px;
    padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  @media (width <= 60rem) {
    .contact-inner { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
  }

  @media (width <= 55rem) {
    .nav-links {
      position: fixed; inset: 0 0 0 auto; z-index: 95;
      inline-size: min(82%, 22rem);
      flex-direction: column; align-items: flex-start; justify-content: center;
      gap: var(--space-6); padding-inline: var(--space-7);
      background: var(--surface); border-inline-start: 1px solid var(--line);
      /* visibility hält geschlossene Links aus der Tab-Reihenfolge heraus */
      translate: 100% 0; visibility: hidden;
      transition: translate var(--dur) var(--ease-out), visibility var(--dur);
    }
    .nav-links[data-open] { translate: 0 0; visibility: visible; }
    .nav-links a { font-size: var(--text-md); }
    .nav-toggle { display: grid; place-content: center; place-items: center; position: relative; z-index: 110; }
    .who { grid-template-columns: 1fr; }
    .row > summary { grid-template-columns: 3rem 1fr auto; gap: var(--space-4); padding-inline: var(--space-2); }
    .rtag { display: none; }
    .row-body { padding-inline-start: 4rem; }
    .row-body ul { columns: 1; }
    .fgrid { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .brand .sub { display: none; }

    /* Der Bildausschnitt ist auf dem Telefon schmal und zeigt nur die Mitte der
       viewBox. Das Wärmefeld sitzt aber rechts — Transforms auf SVG-Elementen
       rechnen in viewBox-Einheiten, also lässt es sich exakt hineinschieben
       und unter den Textblock legen. */
    .shk-scene .feld,
    .shk-scene .quelle { translate: -290px 268px; }
  }

  @media (width <= 30rem) {
    .hero-actions .btn { flex: 1 1 100%; }
  }

  /* Leistungsleiste: die Begriffe haben feste Breiten (Mono, 13px), also
     lässt sich exakt staffeln, ab wann einer nicht mehr passt. Gemessene
     Breiten inkl. Lücken und Seitenrand: 6 → 1234px, 5 → 1033, 4 → 879,
     3 → 735, 2 → 478. Von hinten nach vorn ausgeblendet, damit die
     wichtigsten Gewerke am längsten stehen bleiben. */
  @media (width <= 78rem) { .ticker-track li:nth-child(n+6) { display: none; } }
  @media (width <= 65rem) { .ticker-track li:nth-child(n+5) { display: none; } }
  @media (width <= 56rem) { .ticker-track li:nth-child(n+4) { display: none; } }
  @media (width <= 46rem) { .ticker-track li:nth-child(n+3) { display: none; } }
  @media (width <= 30rem) { .ticker { display: none; } }

  @media (prefers-contrast: more) {
    :root { --ink-soft: var(--ink); --line: currentColor; }
  }
}

/* ============================================================
   NACHTRAG — Cookie-Hinweis, Fragen, Rechtstexte
   ============================================================ */
@layer components {

  /* ---------- Cookie-/Speicherhinweis ---------- */
  .cookie-note {
    position: fixed; z-index: 200;
    inset-block-end: var(--space-4);
    inset-inline: var(--space-4);
    margin-inline: auto;
    max-inline-size: 34rem;
    display: grid; gap: var(--space-4);
    padding: var(--space-5);
    background: var(--surface-3); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  .cookie-note[hidden] { display: none; }
  .cookie-note h2 {
    font-family: var(--font-mono); font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider); text-transform: uppercase;
    color: var(--accent-text); font-weight: 400;
  }
  .cookie-note p { font-size: var(--text-sm); color: var(--ink-soft); }
  .cookie-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
  .cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
  .cookie-actions .btn { padding-block: var(--space-3); }

  /* ---------- Häufige Fragen ---------- */
  .faq .row > summary { grid-template-columns: 1fr auto; padding-block: var(--space-5); }
  .faq .rtitle { font-size: var(--text-lg); }
  .faq .row:hover .rtitle { translate: 0 0; }
  .faq .row-body { padding-inline-start: var(--space-3); max-inline-size: var(--measure); }
  .faq .row-body p + p { margin-block-start: var(--space-3); }

  /* ---------- Fließtext (Impressum, Datenschutz) ---------- */
  .page-head { padding-block: calc(var(--header-h) + var(--space-8)) var(--space-6); }
  .page-head h1 {
    font-size: var(--text-2xl); line-height: 1.04; letter-spacing: var(--tracking-tight);
    margin-block-start: var(--space-3);
  }
  .page-head p { color: var(--ink-soft); margin-block-start: var(--space-4); max-inline-size: var(--measure); }

  .prose { max-inline-size: 42rem; padding-block-end: var(--space-9); }
  .prose > * + * { margin-block-start: var(--space-4); }
  .prose h2 {
    font-size: var(--text-lg); margin-block-start: var(--space-8);
    padding-block-start: var(--space-5); border-block-start: 1px solid var(--line);
  }
  .prose h3 { font-size: var(--text-base); margin-block-start: var(--space-6); }
  .prose p, .prose li { color: var(--ink-soft); }
  .prose strong { color: var(--ink); font-weight: 700; }
  .prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
  .prose ul { list-style: none; }
  .prose li { padding-inline-start: var(--space-5); position: relative; padding-block: var(--space-1); }
  .prose li::before {
    content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 1em;
    inline-size: 6px; block-size: 6px; border-radius: 2px; background: var(--accent);
  }
  .prose dl { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: var(--space-2) var(--space-5); }
  .prose dt { color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; padding-block-start: .3em; }
  .prose dd { color: var(--ink-soft); margin: 0; }
  .prose .note {
    padding: var(--space-4); border-inline-start: 3px solid var(--accent);
    background: var(--accent-wash); border-radius: var(--radius-sm);
  }
  .prose .note p { color: var(--ink); }
}

@layer utilities {
  @media (width <= 40rem) {
    .prose dl { grid-template-columns: 1fr; gap: var(--space-1); }
    .prose dt { margin-block-start: var(--space-3); }
    .cookie-actions .btn { flex: 1 1 100%; }
  }
}

@layer components {
  .section-intro {
    max-inline-size: var(--measure);
    color: var(--ink-soft);
    margin-block-start: var(--space-5);
  }
}

@layer motion {
  /* Ohne Bewegung stehen Strang und Wärmeschleier still, aber ruhig */
  @media (prefers-reduced-motion: reduce) {
    .feld, .iso, .quelle { scale: 1; }
  }
}