:root {
    --color-void: #000000;
    --color-bone-white: #ffffff;
    --color-ash-gray: #9a9a9a;
    --color-silver-mist: #bdbdbd;
    --color-plasma-pink: #ff0068;
    --color-coral-amber: #ff4a36;
    --color-magenta-wine: #9f0142;
    --color-impuls-white: #ECECEC;
    --font: 'PPNeueMontreal', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --max: 1280px;
    --gutter: 36px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { overflow-x: clip; }
  body { margin: 0; }
  body { background: var(--color-void); color: var(--color-bone-white); font-family: var(--font); font-feature-settings: "ss01" on; -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

  /* ---------- Header ---------- */
  /* fest stehender Balken; beim Scrollen kompakter und mit Hintergrund */
  :root { --header-h: 160px; }
  body { padding-top: var(--header-h); }
  header { position: fixed; top: 0; left: 0; right: 0; z-index: 5; padding: 28px 0;
    background: rgba(0, 0, 0, 0); transition: padding .35s ease, background .35s ease; }
  header.scrolled { padding: 12px 0; background: rgba(0, 0, 0, 0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  header.scrolled .logo .wm { height: 64px; }
  /* Navigation bleibt oberhalb der Impulslinie (liegt bei ca. 57 % der Logohöhe) */
  header.scrolled nav { margin-top: 0; }
  header.scrolled nav .btn { padding: 8px 14px; font-size: 13px; }
  section { scroll-margin-top: 96px; }
  header .wrap { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px;
    clip-path: inset(-100vh var(--gutter) -100vh var(--gutter)); }
  .logo { position: relative; display: block; flex: none; }
  .logo .wm { display:block; aspect-ratio:730/328; height:104px; width:auto; transition:height .35s ease;} .logo img { display:none; transition: height .35s ease; }
  .logo .impuls { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  nav { display: flex; align-items: center; gap: 30px; margin-top: 10px; transition: margin .35s ease; }
  nav > a, .dd > a { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: var(--color-ash-gray); transition: color .2s; }
  nav > a:hover, .dd:hover > a, .dd:focus-within > a { color: var(--color-bone-white); }
  .dd { position: relative; }
  .dd ul { list-style: none; position: absolute; top: 100%; left: -16px; padding: 14px 16px; min-width: 220px; background: var(--color-void);
    opacity: 0; visibility: hidden; transform: translateY(4px); transition: .2s; }
  .dd:hover ul, .dd:focus-within ul { opacity: 1; visibility: visible; transform: none; }
  .dd li a { display: block; padding: 7px 0; font-size: 14px; color: var(--color-ash-gray); }
  .dd li a:hover { color: var(--color-bone-white); }
  .lang { font-size: 14px; color: var(--color-ash-gray); }
  .btn { display: inline-block; background: var(--color-plasma-pink); color: #fff; border-radius: 22.5px; padding: 14.4px 18px;
    font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; transition: background .2s, padding .35s ease, font-size .35s ease; }
  .btn:hover { background: var(--color-magenta-wine); }

  /* ---------- Hero ---------- */
  .hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: center; min-height: calc(100vh - 160px); padding: 40px 0 80px; }
  .eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0.35px; text-transform: uppercase; color: var(--color-coral-amber); margin-bottom: 24px; }
  h1 { font-weight: 400; font-size: clamp(40px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -0.04em; margin-bottom: 30px; }
  .lead { font-size: 18px; font-weight: 200; line-height: 1.5; max-width: 480px; margin-bottom: 36px; }
  .visual { position: relative; aspect-ratio: 1; width: 100%; }
  .visual canvas { position: absolute; inset: -6%; width: 112%; height: 112%; display: block; }

  /* ---------- Variante A: feste Bühne hinter der ganzen Seite (Scroll-Morph) ---------- */
  /* Bühne hinter allem Inhalt, aber über dem Seitenhintergrund (Verlauf) */
  canvas.stage { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: block; }
  .fullbleed .visual { display: none; }
  .fullbleed .lead, .fullbleed .section p, .fullbleed .section li { text-shadow: 0 0 18px #000, 0 0 6px #000; }

  /* ---------- Weitere Sektionen ---------- */
  .hero { min-height: calc(100vh - 160px); }
  .section { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: center; padding: 96px 0; }
  .section .text { grid-column: 2; max-width: 560px; }
  .section.left .text { grid-column: 1; }
  h2 { font-weight: 400; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -0.035em; margin-bottom: 24px; }
  .section p { font-size: 18px; font-weight: 200; line-height: 1.5; margin-bottom: 24px; }
  .section ul { list-style: none; margin: 8px 0 32px; }
  .section li { font-size: 18px; font-weight: 200; padding: 7px 0; }
  .section li b { font-weight: 400; color: var(--color-coral-amber); margin-right: 10px; font-size: 14px; letter-spacing: 0.025em; }
  .section.last { min-height: 70vh; padding-bottom: 160px; }

  /* ---------- Referenzen: horizontal scrollbare Logoleiste ---------- */
  .refs { padding: 96px 0 72px; }
  .refs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
  .refs-head h2 { margin-bottom: 0; }
  .refs-nav { display: flex; gap: 8px; flex: none; }
  .refs-nav button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #1e0313; color: var(--color-bone-white);
    font: 600 18px/1 var(--font); cursor: pointer; transition: background .2s, opacity .2s; }
  .refs-nav button:hover:not(:disabled) { background: var(--color-plasma-pink); }
  .refs-nav button:disabled { opacity: .35; cursor: default; }
  .refs-track { display: flex; gap: 56px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 8px 0 22px; /* endet rechts mit dem Inhaltsbereich */
    overscroll-behavior-x: contain; cursor: grab; outline: none;
    scrollbar-width: thin; scrollbar-color: var(--color-plasma-pink) #1e0313;
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent); }
  .refs-track:focus-visible { outline: 2px solid var(--color-coral-amber); outline-offset: 6px; }
  .refs-track.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
  .refs-track::-webkit-scrollbar { height: 4px; }
  .refs-track::-webkit-scrollbar-track { background: #1e0313; border-radius: 2px; }
  .refs-track::-webkit-scrollbar-thumb { background: var(--color-plasma-pink); border-radius: 2px; }
  .ref { flex: 0 0 auto; width: clamp(160px, 17vw, 230px); height: 110px; display: grid; place-items: center; scroll-snap-align: start; margin: 0; }
  /* einheitlich einfarbig weiß: SVG-Filter #logo-mono macht helle Flächen transparent (Deckkraft = Dunkelheit)
     → funktioniert auf jedem Hintergrund (Schwarz, Verlauf) */
  .ref img { max-width: 100%; max-height: 64px; width: auto; height: auto; filter: url(#logo-mono);
    opacity: .7; transition: opacity .25s; pointer-events: none; user-select: none; }
  .ref:hover img { opacity: 1; }

  /* ---------- Test: Hintergrundverlauf aus Website/index_kiro.html (oben schwarz, ab ca. 70 % konstant rot) ---------- */
  body.verlauf {
    background: linear-gradient(180deg,
      #000000 0%,
      #110201 20%,
      #300207 36%,
      #4F050F 50%,
      #6C0A18 64%,
      #730C1A 72%,
      #730C1A 100%);
  }

  /* ---------- Varianten-Umschalter (nur Vorschau) ---------- */
  .switch { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 10; display: flex; gap: 4px;
    padding: 4px; border-radius: 24px; background: #1e0313; }
  .switch a { padding: 9px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--color-ash-gray); white-space: nowrap; }
  .switch a:hover { color: var(--color-bone-white); }
  .switch a[aria-current] { background: var(--color-bone-white); color: #000; }
  .switch button { padding: 9px 16px; border-radius: 20px; border: 0; font: 600 13px var(--font); white-space: nowrap; cursor: pointer;
    background: transparent; color: var(--color-coral-amber); }
  .switch button[aria-pressed="true"] { background: var(--color-coral-amber); color: #000; }

  @media (max-width: 1220px) { nav > a:not(.btn), .dd, .lang { display: none; } }
  @media (max-width: 860px) {
    :root { --gutter: 16px; --header-h: 120px; }
    .logo .wm { height: 64px; }
    header.scrolled .logo .wm { height: 44px; }
    .hero { grid-template-columns: minmax(0,1fr); min-height: 0; padding-top: 24px; }
    h1 { font-size: clamp(30px, 8.6vw, 40px); }
    .btn { padding: 12px 14px; }
    .visual { order: -1; max-width: 520px; margin: 0 auto; }
    .fullbleed .visual { display: block; } /* Platzhalter – die Bühne liegt darüber */
    .section { grid-template-columns: minmax(0,1fr); }
    .section .text, .section.left .text { grid-column: 1; }
    
  }

  /* ---------- V3 ---------- */
  .page[hidden] { display: none; }
  nav a[aria-current="page"], .dd > a[aria-current="page"] { color: var(--color-bone-white); }
  @media (max-width: 1220px) { .burger { display: block; } }
  .burger { display: none; background: none; border: 0; color: #fff; font: 600 14px var(--font); letter-spacing: .025em; text-transform: uppercase; cursor: pointer; }
  .mobile { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.96); display: none; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: 0 var(--gutter); font-size: 30px; font-weight: 400; letter-spacing: -.04em; overflow-y: auto; }
  .mobile.open { display: flex; }
  .mobile small { font-size: 14px; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; color: var(--color-ash-gray); margin-top: 8px; }
  .mobile .btn { font-size: 14px; letter-spacing: .025em; margin-top: 12px; }
  .mclose { position: absolute; top: 28px; right: var(--gutter); background: none; border: 0; color: #fff; font: 600 14px var(--font); text-transform: uppercase; cursor: pointer; }

  /* Labels deutlich hervorgehoben */
  .eyebrow { display: flex; align-items: center; gap: 14px; font-size: clamp(18px, 1.7vw, 24px); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-coral-amber); margin-bottom: 28px; }
  .eyebrow::before { content: ""; flex: none; width: 15px; height: 17px; background: var(--color-coral-amber); clip-path: polygon(0 0, 100% 50%, 0 100%); }

  /* Claim */
  h2.claim { font-size: clamp(48px, 6.4vw, 92px); line-height: 1.0; letter-spacing: -.045em; margin-bottom: 36px; }

  /* Links statt Buttons */
  .more { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #fff; padding-bottom: 6px; border-bottom: 2px solid var(--color-coral-amber); transition: gap .2s, color .2s; }
  .more::after { content: "\2192"; font-size: 18px; letter-spacing: 0; }
  .more:hover { gap: 18px; color: var(--color-coral-amber); }
  .navlist { list-style: none; margin: 8px 0 36px; }
  .navlist a { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; font-size: 24px; font-weight: 400; letter-spacing: -.02em; transition: color .2s, padding .2s; }
  .navlist a b { font-weight: 600; font-size: 14px; letter-spacing: .025em; color: var(--color-coral-amber); min-width: 28px; }
  .navlist a:hover { color: var(--color-coral-amber); padding-left: 8px; }

  /* Seiten */
  .fullbleed .page p, .fullbleed .page li, .fullbleed .page summary { text-shadow: 0 0 18px #000, 0 0 6px #000; }
  .pbody { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; padding: 40px 0 120px; min-height: calc(100vh - 160px); align-content: start; }
  .pbody.shape-left .pcol { grid-column: 2; }
  .pbody.shape-right .pcol { grid-column: 1; }
  .pbody.full .pcol { grid-column: 1 / -1; max-width: 960px; }
  .pcol { min-width: 0; max-width: 600px; }
  .pbody.full .pcol { max-width: 980px; }
  .pcol h1.ph { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -.04em; margin-bottom: 28px; }
  .pcol .lead { font-size: 20px; max-width: none; margin-bottom: 28px; }
  .pcol p { font-size: 18px; font-weight: 200; line-height: 1.5; margin-bottom: 22px; }
  .pcol h3 { font-weight: 400; font-size: 28px; letter-spacing: -.03em; margin: 48px 0 16px; }
  .pcol h4 { font-weight: 400; font-size: 20px; letter-spacing: -.02em; margin: 6px 0 12px; color: #fff; }
  .plain { list-style: none; margin: 0 0 24px; }
  .plain li { position: relative; padding: 7px 0 7px 24px; font-size: 17px; font-weight: 200; line-height: 1.45; }
  .plain li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 9px; background: var(--color-coral-amber); clip-path: polygon(0 0, 100% 50%, 0 100%); }
  .steps { list-style: none; counter-reset: s; margin: 0 0 40px; }
  .steps li { counter-increment: s; display: flex; gap: 18px; align-items: baseline; padding: 9px 0; font-size: 22px; font-weight: 400; letter-spacing: -.02em; }
  .steps li::before { content: counter(s); font-size: 14px; font-weight: 600; color: var(--color-coral-amber); min-width: 20px; }
  .norms { list-style: none; margin: 0 0 24px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px 28px; }
  .norms li { padding: 8px 0; font-size: 16px; font-weight: 200; }
  .norms b { display: block; font-weight: 400; font-size: 20px; letter-spacing: -.02em; }
  .bigrows { list-style: none; margin: 0 0 36px; }
  .bigrows li { padding: 4px 0; }
  .bigrows a, .bigrows .row { display: grid; grid-template-columns: 40px minmax(0,1fr); column-gap: 8px; padding: 14px 0; align-items: baseline; transition: padding .2s; }
  .bigrows .row { grid-template-columns: minmax(0,1fr); }
  .bigrows b { grid-row: 1 / span 2; font-weight: 600; font-size: 14px; letter-spacing: .025em; color: var(--color-coral-amber); }
  .bigrows .t { font-size: 30px; font-weight: 400; letter-spacing: -.03em; line-height: 1.15; }
  .bigrows .d { font-size: 16px; font-weight: 200; color: var(--color-silver-mist); margin-top: 4px; }
  .bigrows a:hover { padding-left: 10px; }
  .bigrows a:hover .t { color: var(--color-coral-amber); }
  .scale { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; margin: 18px 0 8px; font-size: 26px; font-weight: 400; letter-spacing: -.03em; }
  .scale span:nth-child(n) { opacity: .45; } .scale span:nth-child(4), .scale span:nth-child(5), .scale span:nth-child(6), .scale span:nth-child(7) { opacity: 1; }
  .scale small { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-coral-amber); }
  .draft { display: inline-block; margin-bottom: 18px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-ash-gray); }
  .twocol { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; margin: 8px 0 24px; }
  .gf { display: flex; gap: 40px; flex-wrap: wrap; margin: 6px 0 28px; }
  .gf b { display: block; font-weight: 400; font-size: 27px; line-height: 1; letter-spacing: -.02em; }
  .gf small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-coral-amber); margin-bottom: 8px; }
  .faq details { padding: 6px 0; }
  .faq summary { cursor: pointer; list-style: none; font-size: 26px; font-weight: 400; letter-spacing: -.03em; padding: 12px 0; display: flex; gap: 16px; justify-content: space-between; align-items: baseline; transition: color .2s; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; color: var(--color-coral-amber); font-weight: 200; font-size: 32px; line-height: 1; }
  .faq details[open] summary::after { content: "\2212"; }
  .faq summary:hover { color: var(--color-coral-amber); }
  .faq details p { max-width: 640px; }
  #cform { display: flex; flex-direction: column; gap: 6px; }
  #cform label { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-ash-gray); margin-top: 12px; }
  #cform input[type=text], #cform input[type=email], #cform input[type=tel], #cform textarea { background: rgba(255,255,255,.08); color: #fff; border: 0; border-radius: 12px; padding: 14px 16px; font: 400 17px var(--font); width: 100%; }
  #cform label.chk { display: flex; gap: 12px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 200; color: var(--color-silver-mist); margin: 14px 0 10px; }
  #cform .btn { align-self: flex-start; margin-top: 8px; }
  .formnote { font-size: 13px !important; color: var(--color-ash-gray); margin: 10px 0 0 !important; }
  .sep { max-width: none; padding: 20px 0 40px; }
  .sep svg { width: 100%; height: 90px; display: block; }
  .sep polyline { fill: none; stroke: var(--color-impuls-white); stroke-width: 3; stroke-linejoin: miter; stroke-miterlimit: 10; stroke-dasharray: 1600; stroke-dashoffset: 1600; }
  .sep.in polyline { animation: draw 2.4s ease-out .1s forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }


  .pcol .sub { font-size: clamp(18px, 1.7vw, 24px); font-weight: 200; color: var(--color-silver-mist); margin: 22px 0 0; line-height: 1.35; }
  .pcol .pl .sub { margin-top: 22px; }
  .pcol h2.mini { font-size: clamp(24px, 2.2vw, 32px); font-weight: 400; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 20px; }
  .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
  .tags span { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-bone-white); border: 1px solid rgba(255,255,255,.28); border-radius: 99px; padding: 6px 13px; }
  .plain.num { counter-reset: n; }
  .plain.num li { counter-increment: n; padding-left: 44px; }
  .plain.num li::before { content: "0" counter(n); background: none; clip-path: none; width: auto; height: auto; top: 9px; font-size: 14px; font-weight: 600; letter-spacing: .025em; color: var(--color-coral-amber); }
  .steps li::before { content: "0" counter(s); min-width: 28px; }
  .bars { margin: 6px 0 20px; }
  .bars div { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: center; gap: 14px; padding: 5px 0; font-size: 15px; font-weight: 200; }
  .bars i { display: block; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--color-coral-amber), var(--color-plasma-pink)); transform-origin: left; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
  .bars div:nth-child(1) i { width: 100%; } .bars div:nth-child(2) i { width: 84%; } .bars div:nth-child(3) i { width: 68%; } .bars div:nth-child(4) i { width: 52%; } .bars div:nth-child(5) i { width: 38%; } .bars div:nth-child(6) i { width: 24%; } .bars div:nth-child(7) i { width: 12%; }
  .js-rv .bars i { transform: scaleX(0); } .js-rv .bars.in i { transform: scaleX(1); }
  .rsep { padding: 0 0 56px; } .rsep svg { height: 70px; }
  .rsep polyline { stroke-dasharray: 1600; stroke-dashoffset: 1600; }
  .ctaband { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; padding: 8px 0 0; }
  .ctaband h2 { font-size: clamp(30px, 3.4vw, 52px); font-weight: 400; letter-spacing: -.04em; line-height: 1.08; margin: 0 0 12px; }
  .ctaband p { font-size: 18px; font-weight: 200; margin: 0; }
  .btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; }
  .btn.ghost:hover { border-color: var(--color-plasma-pink); background: var(--color-plasma-pink); }
  .pcol .pr a:not(.more):not(.btn) { color: #fff; border-bottom: 1px solid rgba(255,255,255,.3); }
  #cform select { background: rgba(255,255,255,.08); color: #fff; border: 0; border-radius: 12px; padding: 14px 16px; font: 400 17px var(--font); width: 100%; }
  #cform select option { color: #000; }
  .gf a.more { margin-top: 8px; font-size: 14px; }

  .rule { height: 1px; background: rgba(255,255,255,.14); margin: 0 0 56px; position: relative; }
  .rule::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 11px; background: var(--color-coral-amber); clip-path: polygon(0 0, 100% 50%, 0 100%); }
  .pcol .pl .ill { margin: 36px 0 0; color: var(--color-impuls-white); max-width: 300px; }
  .ill svg { width: 100%; height: auto; display: block; overflow: visible; }
  .ill .a { fill: var(--color-coral-amber); stroke: none; }
  .ill .a2 { stroke: var(--color-coral-amber); }
  .pcol .pl h1.ph + .sub + .ill, .pcol .pl .sub + .ill { margin-top: 48px; }
  @media (max-width: 860px) { .pcol .pl .ill { max-width: 220px; margin-top: 20px; } }

  .sep polyline, .rsep polyline { stroke-dashoffset: 0 !important; animation: none !important; }
  .js-rv .bars i { transform: none !important; transition: none !important; }
  .pcol .pl .ill { max-width: 220px; opacity: .85; }
  .hero > div:first-child { max-width: 600px; }
  .section .text { max-width: 560px; }

  .prow.first { padding-bottom: 48px; }
  .page[data-page=qualitaet] .pcol .pl h1.ph { font-size: clamp(32px, 3.6vw, 54px); }
  .tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin: 0 0 24px; }
  .tile { background: rgba(8,0,5,.5); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 32px 34px; min-width: 0; display: block; transition: border-color .2s, background .2s; }
  .tile.wide { grid-column: 1 / -1; }
  .fullbleed .tile p, .fullbleed .tile li, .fullbleed .tile summary { text-shadow: none; }
  .pcol .tile h3 { font-size: 26px; margin: 0 0 18px; letter-spacing: -.03em; }
  .pcol .tile h4 { margin: 4px 0 10px; }
  .pcol .tile > :last-child { margin-bottom: 0; }
  .pcol .tile .plain { margin-bottom: 0; }
  .pcol .tile .steps { margin-bottom: 0; }
  .pcol .tile .steps li { font-size: 19px; padding: 7px 0; }
  .pcol .tile .norms { grid-template-columns: repeat(4, minmax(0,1fr)); margin-bottom: 0; }
  .pcol .tile .twocol { margin-bottom: 22px; }
  .pcol .tile .more { margin-top: 18px; }
  .tile.n b { display: block; font-size: 14px; font-weight: 600; letter-spacing: .03em; color: var(--color-coral-amber); margin-bottom: 14px; }
  .tile.n .tt { font-size: 26px; font-weight: 400; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 8px; }
  .pcol .tile.n .td { font-size: 16px; margin: 0; color: var(--color-silver-mist); }
  .pcol .tile.n .td.big { font-size: 20px; color: #fff; line-height: 1.35; }
  a.tile.n:hover { border-color: var(--color-coral-amber); background: rgba(8,0,5,.7); }
  a.tile.n:hover .tt { color: var(--color-coral-amber); }
  .pcol .tiles-h { font-size: 26px; margin: 0 0 20px; }
  .pcol .after { max-width: none; margin: 0 0 24px; }
  .pcol .pr .lead, .pcol .pr p { max-width: 680px; }
  @media (max-width: 860px) { .tiles { grid-template-columns: minmax(0,1fr); } .tile { padding: 24px; } .pcol .tile .norms { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  /* Footer, deutlich unterlegt */
  footer.site { background: #0b0207; color: var(--color-silver-mist); padding: 80px 0 36px; font-size: 15px; font-weight: 200; position: relative; z-index: 1; }
  footer.site .fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
  footer.site .fbrand .wm { height: 72px; width: auto; aspect-ratio: 730/328; display: block; }
  footer.site .fbrand p { margin-top: 22px; font-size: 22px; font-weight: 400; letter-spacing: -.03em; color: #fff; line-height: 1.2; }
  footer.site h3 { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-coral-amber); margin-bottom: 16px; }
  footer.site ul { list-style: none; }
  footer.site li, footer.site p.l { padding: 4px 0; line-height: 1.5; }
  footer.site a { color: #fff; transition: color .2s; }
  footer.site a:hover { color: var(--color-coral-amber); }
  footer.site .eu { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--color-ash-gray); max-width: 240px; }
  footer.site .copy { margin-top: 56px; font-size: 12px; color: var(--color-ash-gray); }
  .switch .v2 { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--color-coral-amber); }
  @media (max-width: 1100px) { footer.site .fgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (max-width: 860px) {
    .pbody { grid-template-columns: minmax(0,1fr); min-height: 0; padding-top: 24px; }
    .pbody.shape-left .pcol, .pbody.shape-right .pcol, .pbody.full .pcol { grid-column: 1; }
    .twocol, .norms { grid-template-columns: minmax(0,1fr); }
    footer.site .fgrid { grid-template-columns: minmax(0,1fr); gap: 32px; }
    nav .btn { display: none; }
    .bigrows .t { font-size: 24px; }
  }

  canvas.stage { transition: opacity .5s ease; }
  /* V2.1: Unterseiten im Zweispalten-Layout der Startseite, ohne 3D-Bühne */
  .pgrid { max-width: none !important; grid-column: 1 / -1; padding: 40px 0 110px; }
  .pbody { display: block; }
  .prow { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 24px 80px; padding: 0 0 80px; align-items: start; }
  .prow.first { padding-bottom: 96px; }
  .prow.solo { grid-template-columns: minmax(0,1fr); padding-bottom: 48px; }
  .prow.first .pl { padding-top: 0; }
  .pcol .pl h1.ph { font-size: clamp(40px, 5.2vw, 78px); line-height: 1.04; margin: 0; }
  .pcol .pl h3 { font-size: clamp(30px, 3vw, 44px); line-height: 1.1; letter-spacing: -.04em; margin: 0; }
  .pcol .pl .eyebrow { margin-bottom: 28px; }
  .pcol .pr { max-width: 660px; }
  .pcol .pr > :first-child { margin-top: 0; }
  .pcol .pr.wide { max-width: none; grid-column: 1 / -1; padding-bottom: 80px; }
  .pcol .pr .twocol { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
  .pcol .pr.wide .twocol { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 80px; }
  .pcol .pr .lead { font-size: 22px; line-height: 1.45; }
  .pcol .pr .more { margin-top: 12px; }

  /* Kunden hervorgehoben */
  .refs.band { background: rgba(0,0,0,.42); padding: 96px 0 72px; margin: 40px 0 0; }
  .refs.band .refs-head { margin-bottom: 56px; }
  .refs.band h2 { font-size: clamp(44px, 5.6vw, 80px); line-height: 1.02; }
  .refs.band .ref { width: clamp(220px, 22vw, 300px); height: 160px; }
  .refs.band .ref img { max-height: 100px; opacity: .95; }
  .refs.band .refs-track { gap: 64px; }
  .section.tight { min-height: 0; padding: 80px 0 24px; }
  @media (max-width: 860px) {
    .prow { grid-template-columns: minmax(0,1fr); gap: 20px; padding-bottom: 56px; }
    .pcol .pr.wide .twocol { grid-template-columns: minmax(0,1fr); gap: 32px; }
    .refs.band { padding: 64px 0 48px; }
    .refs.band .ref { width: 180px; height: 110px; }
    .refs.band .ref img { max-height: 70px; }
    .section.tight { padding: 56px 0 16px; }
  }

  /* V2.3 */
  .steps.row { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 0 20px; margin: 4px 0 0; counter-reset: s; }
  .steps.row li { display: block; padding: 18px 0 0; border-top: 2px solid rgba(255,255,255,.14); font-size: 17px; line-height: 1.25; }
  .steps.row li::before { display: block; margin-bottom: 10px; font-size: 14px; }
  .pcol .tile .steps.row li { font-size: 17px; padding: 18px 0 0; }
  .tiles.cols4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .tiles.cols4 .tile { padding: 28px 26px; }
  .tiles.cols4 .tile.n .tt { font-size: 34px; margin-bottom: 12px; }
  .plain.two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 40px; }
  .colchart { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 10px; align-items: end; height: 190px; margin: 6px 0 14px; }
  .colchart div { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; }
  .colchart i { display: block; height: var(--h); border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, var(--color-coral-amber), var(--color-plasma-pink)); }
  .colchart span { margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-align: center; color: var(--color-silver-mist); white-space: nowrap; }
  .pcol .tile .cap { font-size: 15px; color: var(--color-silver-mist); margin: 0; }
  .cols3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 40px; }
  .cols3 b { display: block; font-size: 14px; font-weight: 600; letter-spacing: .03em; color: var(--color-coral-amber); margin-bottom: 12px; }
  .pcol .tile .cols3 h4 { font-size: 22px; margin: 0 0 8px; letter-spacing: -.02em; }
  .pcol .tile .cols3 p { font-size: 16px; margin: 0; color: var(--color-silver-mist); }
  .jobs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin: 0 0 22px; }
  .jobs div { border-top: 2px solid rgba(255,255,255,.14); padding-top: 16px; }
  .jobs b { display: block; font-size: 24px; font-weight: 400; letter-spacing: -.03em; line-height: 1.15; }
  .jobs span { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-coral-amber); }
  .pcol .tile p.short { font-size: 16px; margin-bottom: 0; }
  .pcol .tile p.short a { border-bottom: 1px solid rgba(255,255,255,.3); }
  .pcol .tile p.fine { font-size: 13px; line-height: 1.45; color: var(--color-ash-gray); }
  .tile .draft { display: block; margin: 16px 0 0; }
  .pcol .pr .draft { margin: 8px 0 0; }
  /* Footer V2.3 */
  footer.site .fbrand .addr { margin-top: 26px; font-size: 15px; font-weight: 200; line-height: 1.55; color: var(--color-silver-mist); }
  footer.site .fbrand .addr p { margin: 0 0 14px; font-size: 15px; font-weight: 200; letter-spacing: 0; color: var(--color-silver-mist); line-height: 1.55; }
  footer.site .fbrand .addr .more { margin-top: 2px; font-size: 13px; }
  footer.site .fbottom { margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; font-size: 12px; color: var(--color-ash-gray); }
  footer.site .fbottom .copy { margin: 0; }
  footer.site .fbottom .eu { margin: 0; max-width: none; }
  @media (max-width: 1100px) { .tiles.cols4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .steps.row { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px 20px; } }
  @media (max-width: 860px) {
    .cols3, .jobs, .plain.two { grid-template-columns: minmax(0,1fr); }
    .cols3 { gap: 24px; }
    .colchart { height: 150px; gap: 6px; }
    .colchart span { font-size: 11px; }
    .tiles.cols4 .tile.n .tt { font-size: 28px; }
  }
  @media (max-width: 520px) { .tiles.cols4 { grid-template-columns: minmax(0,1fr); } .steps.row { grid-template-columns: repeat(2, minmax(0,1fr)); } }

  /* V2.3 Runde 2: rote Kacheln (Rot aus dem Hintergrundverlauf), Service untereinander */
  .tile.red { background: #7d0f1f; border-color: rgba(255,255,255,.28); }
  .pcol .tile.red.n .td { color: #f3d9dc; }
  .tile.red.n b { color: #ff9a8c; }
  .pcol .tiles-h.normh { margin: 0 0 20px; }
  .norm-tiles { margin-bottom: 20px; }
  .norm-tiles .tile { padding: 26px 24px; }
  .tiles.cols4.norm-tiles .tile.n .tt { font-size: 26px; margin-bottom: 6px; }
  .tiles.stack { grid-template-columns: minmax(0,1fr); }
  .tiles.stack .tile.n { display: flex; align-items: baseline; gap: 28px; padding: 28px 34px; }
  .tiles.stack .tile.n b { margin: 0; min-width: 32px; flex: none; }
  .pcol .tiles.stack .tile.n .td.big { font-size: 24px; letter-spacing: -.02em; }

  /* V2.3 Runde 3 */
  .btn.orange { background: var(--color-coral-amber); }
  .btn.orange:hover { background: #e03a28; }
  .applyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin: 4px 0 24px; }
  .applynote { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 200; color: var(--color-silver-mist); }
  .applynote span:first-child { font-size: 16px; font-weight: 400; color: #fff; }
  .ctarow { display: flex; flex-wrap: wrap; gap: 12px; margin: 36px 0 0; }
  .ctarow .btn { padding: 17px 26px; font-size: 15px; }
  .page[data-page=kontakt] .pcol .pl h1.ph { font-size: clamp(52px, 7vw, 104px); }
  /* Verlauf auf den Menü-Seiten etwas weiter nach oben gezogen */
  body.verlauf.sub { background: linear-gradient(180deg, #000000 0%, #110201 11%, #300207 22%, #4F050F 33%, #6C0A18 44%, #730C1A 52%, #730C1A 100%); }

  /* Runde 4: Kontakt untereinander, hellere Eingabefelder */
  .page[data-page=kontakt] .pcol .pr.wide .twocol { grid-template-columns: minmax(0,1fr); gap: 56px; max-width: 860px; }
  #cform input[type=text], #cform input[type=email], #cform input[type=tel], #cform textarea, #cform select { background: rgba(255,255,255,.16); }
  #cform input:focus, #cform textarea:focus, #cform select:focus { outline: 2px solid var(--color-coral-amber); outline-offset: 0; }

  /* Runde 5 */
  .logosep { position: relative; height: 96px; padding: 0 !important; margin: 8px 0 28px; --x: 46%; }
  .logosep .ln { position: absolute; top: 47.4px; height: 4px; background: var(--color-impuls-white); }
  .logosep .ln.l { left: 0; width: calc(var(--x) - 23.1px); }
  .logosep .ln.r { left: calc(var(--x) + 46.1px); right: 0; }
  .logosep svg { position: absolute; left: calc(var(--x) - 23.1px); top: 8px; width: 69px; height: 67.2px; overflow: visible; display: block; }
  .tiles.cols3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .tiles.cols3 .tile { padding: 28px 28px; }
  .tiles.cols3 .tile.n .tt { font-size: 24px; }
  .tags.big { margin-bottom: 8px; }
  .tags.big span { font-size: 15px; padding: 9px 18px; }
  @media (max-width: 860px) { .tiles.cols3 { grid-template-columns: minmax(0,1fr); } .logosep { --x: 40%; } }

  /* V2.5: Verlauf nur auf der Startseite: Schwarz → Rot (7° Richtung Magenta) → Teal → wieder Rot → ab Kontakt wieder Teal
     Hero → Rot bis Leistungen · Teal bei Legal Manufacturer/Referenzen · ab Über uns wieder Rot */
  body.verlauf:not(.sub) {
    background: linear-gradient(180deg,
      #000000 0%, #110102 12%, #30020C 21%, #4F0518 28%, #6C0A23 34%, #730C26 39%,
      #730C26 42%, #00303F 52%, #00303F 63%, #730C26 74%, #730C26 81%, #00303F 92%, #00303F 100%);
    background: linear-gradient(180deg in oklab,
      #000000 0%, #110102 12%, #30020C 21%, #4F0518 28%, #6C0A23 34%, #730C26 39%,
      #730C26 42%, #00303F 52%, #00303F 63%, #730C26 74%, #730C26 81%, #00303F 92%, #00303F 100%);
  }

  /* V2.5: Akzentfarbe Lachs statt Coral Amber (#ff4a36) – überall, wo --color-coral-amber verwendet wird
     (Labels, Normbezeichnungen, Linien, Nummern, Aufzählungszeichen …); abgeleitet von den beleuchteten Fabrik-Fenstern (#FF795F) */
  :root { --color-coral-amber: #FF8A66; } /* V2.6: Lachs #FF8A66 statt #FF7E75 (V2.5) */
  .eyebrow { font-weight: 700; }
  /* V2.5: gefüllte Buttons (abgerundete Schaltflächen) in mittlerem Teal statt Plasma Pink / Lachs; Ghost-Buttons unverändert */
  .btn:not(.ghost), .btn.orange { background: #0E6F86; }
  .btn:not(.ghost):hover, .btn.orange:hover { background: #0A5869; }
  /* V2.5: lachsfarbene Texte, die keine Überschriften sind, etwas fetter */
  .section li b { font-weight: 600; }
  .navlist a b, .steps li::before, .bigrows b, .scale small, .gf small, .plain.num li::before, .tile.n b, .cols3 b, .jobs span { font-weight: 700; }

  /* V2.5: Referenzen-Streifen 1:1 im Teal des Hintergrundverlaufs (deckend) */
  .refs.band { background: #00303F; }
  .refs.band h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; } /* V2.5: Größe wie „Lokal und international“ */
  /* V2.5: Pfeil-Buttons und Slider (Scrollleiste) der Referenzen in Lachs */
  .refs-nav button { background: var(--color-coral-amber); color: #00303F; }
  .refs-nav button:hover:not(:disabled) { background: #FFB9A3; }
  .refs-track { scrollbar-color: var(--color-coral-amber) rgba(255,138,102,.22); }
  .refs-track::-webkit-scrollbar-track { background: rgba(255,138,102,.22); }
  .refs-track::-webkit-scrollbar-thumb { background: var(--color-coral-amber); }

  /* V2.4: Claim Leistungen in zwei festen Zeilen */
  .page[data-page=leistungen] .pcol .pl h1.ph { white-space: nowrap; font-size: clamp(30px, 3.8vw, 54px); }

/* Wortmarke 2026: Schriftzug größer, Zacke dahinter versetzt (Rahmen 935×328 statt 730×328); beim Scrollen nur auf ca. 77 % verkleinern (vorher 62 %) */
.logo .wm { height: 120px; aspect-ratio: 934.89/328; }
header.scrolled .logo .wm { height: 92px; }
@media (max-width: 860px) { .logo .wm { height: 74px; } header.scrolled .logo .wm { height: 60px; } }
/* Wortmarke 2026: breiteres Logo → Navigation darf nicht umbrechen, bis 1320 px engere Abstände */
header nav a, header .lang, header .btn { white-space: nowrap; }
@media (max-width: 1320px) { nav { gap: 20px; } header .wrap { gap: 24px; } }
/* Wortmarke 2026 (Schriftzug 9,5 Einheiten über der Linie angehoben): Navigation tiefer, nah an der Mitte des Schriftzugs; Button behält ca. 7 px Abstand zur Impulslinie (vorher 10px / gescrollt 0) */
nav { margin-top: 30px; }
header.scrolled nav { margin-top: 20px; }
/* Wortmarke 2026: Button im Header niedriger (vorher ca. 46 / gescrollt 32 px hoch) */
header nav .btn { padding-top: 9px; padding-bottom: 9px; }
header.scrolled nav .btn { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 860px) { nav { margin-top: 22px; } header.scrolled nav { margin-top: 16px; } }
/* Fehlerkorrektur: „.burger { display: none }“ stand nach der Media-Regel und blendete das Burger-Menü immer aus */
@media (max-width: 1220px) { .burger { display: block; } }
/* Wortmarke 2026 – Demo: Footer-Logo ohne Impulslinie, größer */
footer.site .fbrand .wm.wm-solo { height: 32px; width: auto; margin: 4px 0 22px; aspect-ratio: 680.452/100; }