/* ==========================================================================
   Andrea Nusser lighting & interior design – Gestaltung
   Idee: Die Seite ist eine Bühne bei Nacht, das Licht spielt die Hauptrolle.
   Zwei Stimmungen: „nacht“ (Standard) und „tag“ (Schalter oben rechts).
   Farben: Nachtblau-Schwarz, warmes Licht, dazu das Blau und Gelb aus ihrem Logo.
   Schriften: Instrument Serif (Überschriften), Jost (Text), La Belle Aurore (Unterschrift) – lokal eingebunden.
   ========================================================================== */

/* Schriften lokal eingebunden (keine Verbindung zu Google) */
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-regular-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-regular-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/jost-variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/jost-variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "La Belle Aurore"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/la-belle-aurore-regular-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "La Belle Aurore"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/la-belle-aurore-regular-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@property --akzent { syntax: "<color>"; inherits: true; initial-value: #2D5BFF; }
@property --dim { syntax: "<number>"; inherits: true; initial-value: 1; }

:root {
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Century Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "La Belle Aurore", "Bradley Hand", "Segoe Script", cursive;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-b: cubic-bezier(.34, 1.56, .64, 1);
  --r: 22px;
  --breite: 1240px;
  --rand: clamp(1.15rem, 4vw, 2.5rem);
  --logo-blau: #1E3FCB;
  --logo-gelb: #FFD21F;
  --mx: 72%;
  --my: 16%;
  interpolate-size: allow-keywords;
}

:root, [data-theme="nacht"] {
  color-scheme: dark;
  --bg: #090B10;
  --bg-2: #0D1017;
  --card: #12161F;
  --card-2: #181D29;
  --ink: #F5F0E6;
  --ink-2: #B9B4A9;
  --ink-3: #807C75;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .17);
  --licht: #FFC873;
  --akzent-text: #FFC873;
  --btn-bg: #FFC873;
  --btn-ink: #1B1404;
  --glow: 255, 200, 115;
  --raster: rgba(255, 255, 255, .07);
  --schatten: 0 40px 80px -40px rgba(0, 0, 0, .8);
}

[data-theme="tag"] {
  color-scheme: light;
  --bg: #F5F2EA;
  --bg-2: #ECE8DC;
  --card: #FFFEFA;
  --card-2: #F7F3E9;
  --ink: #12151C;
  --ink-2: #474B56;
  --ink-3: #74767D;
  --line: rgba(18, 21, 28, .1);
  --line-2: rgba(18, 21, 28, .2);
  --licht: #E9A80F;
  --akzent-text: #1E3FCB;
  --btn-bg: #12151C;
  --btn-ink: #FFF8E8;
  --glow: 233, 168, 15;
  --raster: rgba(18, 21, 28, .08);
  --schatten: 0 40px 80px -46px rgba(40, 32, 10, .45);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
::selection { background: var(--licht); color: #1B1404; }
:focus-visible { outline: 2px solid var(--licht); outline-offset: 3px; border-radius: 6px; }
.zeichen { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprung { position: fixed; left: 1rem; top: -4rem; z-index: 200; background: var(--btn-bg); color: var(--btn-ink); padding: .7rem 1rem; border-radius: 10px; transition: top .2s; }
.sprung:focus { top: 1rem; }

/* Hintergrund: feines Planraster, das nur im Lichtkegel des Mauszeigers sichtbar wird */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; }
body::before {
  background-image: linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(460px circle at var(--mx) var(--my), #000 0%, transparent 72%);
  mask-image: radial-gradient(460px circle at var(--mx) var(--my), #000 0%, transparent 72%);
}
body::after { background: radial-gradient(560px circle at var(--mx) var(--my), rgba(var(--glow), .085), transparent 68%); }
main, .footer, .band { position: relative; z-index: 1; }

.wrap { width: min(var(--breite), 100% - 2 * var(--rand)); margin-inline: auto; }
.wrap--schmal { width: min(760px, 100% - 2 * var(--rand)); }
.section { padding-block: clamp(4.5rem, 10vw, 8.5rem); position: relative; }
.section--band { background: linear-gradient(var(--bg-2), var(--bg-2)); border-block: 1px solid var(--line); }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico--links { rotate: 180deg; }

/* ---------- Schrift ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; text-wrap: balance; }
.display { font-size: clamp(2.85rem, 7.1vw, 6.3rem); line-height: .97; letter-spacing: -.022em; }
h2 { font-size: clamp(2.15rem, 4.7vw, 3.9rem); line-height: 1.03; }
h3 { font-size: 1.55rem; line-height: 1.15; }
.lead, .gross { font-size: clamp(1.1rem, 1.5vw, 1.28rem); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.hand { font-family: var(--hand); }

.eyebrow { display: inline-flex; align-items: center; gap: .8rem; font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--akzent-text); margin-bottom: 1.4rem; }
.eyebrow i { width: 2.4rem; height: 1px; background: linear-gradient(90deg, transparent, var(--licht)); flex: none; }
.eyebrow--c i:last-child { rotate: 180deg; }

/* Hervorgehobene Wörter glimmen wie eine Leuchte */
.glimmen { font-style: italic; color: var(--akzent-text); padding-right: .06em;
  background: linear-gradient(90deg, rgba(var(--glow), 0), rgba(var(--glow), .95) 30%, rgba(var(--glow), .95) 70%, rgba(var(--glow), 0)) left 100% / 0% 1.5px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1.4s var(--ease) .35s; }
[data-theme="nacht"] .glimmen { text-shadow: 0 0 34px rgba(var(--glow), .5), 0 0 90px rgba(var(--glow), .28); }
.is-in .glimmen, .is-loaded .display .glimmen, .no-js .glimmen { background-size: 100% 1.5px; }

/* ---------- Knöpfe ---------- */
.btn { --h: 3.35rem; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: var(--h); padding: 0 1.55rem; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink);
  font-weight: 500; font-size: 1rem; letter-spacing: .01em; white-space: nowrap; position: relative; isolation: isolate;
  box-shadow: 0 0 0 0 rgba(var(--glow), 0), 0 14px 34px -16px rgba(var(--glow), .7); transition: box-shadow .5s var(--ease), translate .4s var(--ease), background-color .3s, color .3s, border-color .3s; }
.btn .ico { transition: translate .4s var(--ease); }
.btn:hover { translate: 0 -2px; box-shadow: 0 0 0 5px rgba(var(--glow), .16), 0 22px 46px -16px rgba(var(--glow), .85); }
.btn:hover .ico { translate: 4px 0; }
.btn--linie { background: transparent; color: var(--ink); border: 1px solid var(--line-2); box-shadow: none; }
.btn--linie:hover { border-color: var(--licht); box-shadow: 0 0 0 5px rgba(var(--glow), .1); }
.btn--klein { --h: 2.7rem; padding: 0 1.15rem; font-size: .93rem; }
.link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--akzent-text); }
.link .ico { transition: translate .4s var(--ease); }
a:hover > .link .ico, .link:hover .ico { translate: 4px 0; }
.tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.tags li { font-size: .8rem; letter-spacing: .03em; padding: .28rem .75rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); }

/* Rand, der unter dem Mauszeiger aufleuchtet */
[data-leuchte] { position: relative; }
[data-leuchte]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .5s; z-index: 2;
  background: radial-gradient(280px circle at var(--px, 50%) var(--py, 0%), rgba(var(--glow), 1), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
[data-leuchte]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s; z-index: 0;
  background: radial-gradient(420px circle at var(--px, 50%) var(--py, 0%), rgba(var(--glow), .1), transparent 62%); }
[data-leuchte]:hover::before, [data-leuchte]:hover::after { opacity: 1; }

/* ---------- Kopfzeile ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; padding: .85rem var(--rand) 0; pointer-events: none; }
.nav__innen { pointer-events: auto; width: min(var(--breite), 100%); margin-inline: auto; display: flex; align-items: center; gap: 1.2rem; padding: .5rem .55rem .5rem 1rem; border-radius: 999px;
  border: 1px solid transparent; transition: background-color .5s, border-color .5s, box-shadow .5s, backdrop-filter .5s; }
.nav.is-stuck .nav__innen, .menu-open .nav__innen { background: color-mix(in srgb, var(--bg) 74%, transparent); border-color: var(--line); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: var(--schatten); }
.marke { display: inline-flex; align-items: center; gap: .75rem; margin-right: auto; }
.marke__zeichen { width: 2.3rem; height: 2.3rem; border-radius: 9px; overflow: hidden; flex: none; display: grid; place-items: center;
  background: repeating-linear-gradient(90deg, var(--logo-blau) 0 12.5%, #F6F3EA 12.5% 25%); box-shadow: 0 0 0 1px var(--line-2), 0 0 22px -4px rgba(255, 210, 31, .55); }
.marke__zeichen i { width: 74%; height: 74%; border-radius: 50%; background: var(--logo-gelb); }
.marke__text { display: grid; line-height: 1.05; }
.marke__text strong { font-family: var(--serif); font-weight: 400; font-size: 1.42rem; letter-spacing: -.01em; }
.marke__text small { font-size: .66rem; letter-spacing: .21em; text-transform: uppercase; color: var(--ink-2); margin-top: .12rem; }
.nav__links { display: flex; gap: .2rem; }
.nav__links a { padding: .5rem .85rem; border-radius: 999px; font-size: .95rem; color: var(--ink-2); transition: color .3s, background-color .3s; }
.nav__links a:hover, .nav__links a.is-aktiv { color: var(--ink); background: var(--line); }
.nav__rechts { display: flex; align-items: center; gap: .6rem; }

/* Lichtschalter Tag/Nacht */
.schalter { padding: .35rem; border-radius: 999px; }
.schalter__bahn { display: block; width: 3.5rem; height: 1.95rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); position: relative; transition: background-color .5s, border-color .5s; }
.schalter__knopf { position: absolute; top: 2px; left: 2px; width: calc(1.95rem - 6px); height: calc(1.95rem - 6px); border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center;
  transition: translate .6s var(--ease-b), background-color .5s, box-shadow .5s; }
.schalter__knopf .ico { grid-area: 1 / 1; width: .95rem; height: .95rem; transition: opacity .4s, rotate .6s var(--ease); }
.schalter .ico--sonne { opacity: 0; rotate: -90deg; }
[data-theme="tag"] .schalter__bahn { background: #FFE9A8; border-color: #E9C766; }
[data-theme="tag"] .schalter__knopf { translate: 1.55rem 0; background: var(--logo-gelb); color: #4A3600; box-shadow: 0 0 16px 2px rgba(255, 210, 31, .9); }
[data-theme="tag"] .schalter .ico--sonne { opacity: 1; rotate: 0deg; }
[data-theme="tag"] .schalter .ico--mond { opacity: 0; rotate: 90deg; }

.burger { display: none; width: 2.7rem; height: 2.7rem; border-radius: 50%; border: 1px solid var(--line-2); position: relative; }
.burger i { position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 1.5px; background: var(--ink); translate: -50% -4px; transition: translate .4s var(--ease), rotate .4s var(--ease); }
.burger i + i { translate: -50% 4px; }
.menu-open .burger i { translate: -50% 0; rotate: 45deg; }
.menu-open .burger i + i { rotate: -45deg; }

.menu { position: fixed; inset: 0; z-index: 55; background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  display: flex; flex-direction: column; justify-content: space-between; padding: 6.5rem var(--rand) 2rem; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.menu-open .menu { opacity: 1; visibility: visible; }
.menu__links { display: grid; }
.menu__links a { font-family: var(--serif); font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1.25; padding: .35rem 0; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 1rem;
  opacity: 0; translate: 0 18px; transition: opacity .5s var(--ease), translate .6s var(--ease), color .3s; }
.menu__links a i { font: 500 .72rem var(--sans); letter-spacing: .18em; color: var(--akzent-text); font-style: normal; }
.menu-open .menu__links a { opacity: 1; translate: 0 0; }
.menu__links a:nth-child(1) { transition-delay: .05s; } .menu__links a:nth-child(2) { transition-delay: .1s; } .menu__links a:nth-child(3) { transition-delay: .15s; }
.menu__links a:nth-child(4) { transition-delay: .2s; } .menu__links a:nth-child(5) { transition-delay: .25s; } .menu__links a:nth-child(6) { transition-delay: .3s; } .menu__links a:nth-child(7) { transition-delay: .35s; }
.menu__fuss { display: grid; gap: .7rem; color: var(--ink-2); }
.menu__fuss a { display: inline-flex; align-items: center; gap: .7rem; }

/* ---------- Auftakt ---------- */
.hero { position: relative; min-height: min(100svh, 62rem); display: grid; align-items: center; padding: 7.5rem 0 3.5rem; overflow: clip; }
.hero__strahl { position: absolute; inset: -10% -10% 0 20%; pointer-events: none; opacity: 0; transition: opacity 2.4s ease .2s;
  background:
    radial-gradient(60% 55% at 68% 0%, rgba(var(--glow), .3), transparent 70%),
    conic-gradient(from 168deg at 70% -6%, transparent 0deg, rgba(var(--glow), .16) 12deg, rgba(var(--glow), .03) 26deg, transparent 34deg),
    conic-gradient(from 196deg at 46% -8%, transparent 0deg, rgba(76, 116, 255, .13) 10deg, transparent 24deg); }
.is-loaded .hero__strahl { opacity: 1; animation: atmen 9s ease-in-out 2.6s infinite alternate; }
[data-theme="tag"] .hero__strahl { background: radial-gradient(60% 60% at 76% -6%, rgba(255, 210, 31, .5), transparent 70%), radial-gradient(40% 40% at 20% 10%, rgba(30, 63, 203, .08), transparent 70%); }
@keyframes atmen { to { opacity: .72; } }

.hero__raster { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; position: relative; }
.hero__text { position: relative; z-index: 2; }
.display .ln { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
.is-fertig .display .ln { overflow: visible; }
.display .ln > span { display: block; }
.js .display .ln > span { transform: translateY(108%); transition: transform 1.25s var(--ease); transition-delay: calc(var(--d) * 110ms + 150ms); }
.js.is-loaded .display .ln > span { transform: none; }
.js [data-auftakt] { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d) * 110ms + 150ms); }
.js.is-loaded [data-auftakt] { opacity: 1; transform: none; }
.js.is-loaded .display .glimmen { animation: anknipsen 1.5s linear .75s both; }
@keyframes anknipsen { 0% { opacity: .18; } 9% { opacity: .95; } 13% { opacity: .3; } 21% { opacity: 1; } 27% { opacity: .5; } 34%, 100% { opacity: 1; } }
.hero .lead { max-width: 34rem; margin-top: 1.7rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.hero__fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem 2.2rem; margin-top: 2.9rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.hero__fakten li { display: grid; gap: .1rem; }
.hero__fakten strong { font-family: var(--serif); font-weight: 400; font-size: 1.22rem; line-height: 1.2; }
.hero__fakten span { font-size: .84rem; color: var(--ink-3); }

/* Bilderwand: drei Spalten Projektfotos, die langsam aneinander vorbeiziehen */
.hero__buehne { position: relative; height: min(41rem, 76svh); }
.wand { position: absolute; inset: -14% -22% -14% -4%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; rotate: -7deg;
  -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 26%, #000 74%, transparent 96%); mask-image: linear-gradient(to bottom, transparent 4%, #000 26%, #000 74%, transparent 96%); }
.wand__spalte { min-width: 0; }
.wand__lauf { display: flex; flex-direction: column; gap: 14px; padding-bottom: 14px; animation: wandern calc(64s + var(--s) * 9s) linear infinite; will-change: transform; }
.wand__spalte:nth-child(2) .wand__lauf { animation-direction: reverse; }
.wand:hover .wand__lauf { animation-play-state: paused; }
.wand a { display: block; border-radius: 14px; overflow: hidden; position: relative; background: var(--card); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .5s, scale .6s var(--ease); }
.wand img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: brightness(.82) saturate(1.06); transition: filter .5s, scale 1.2s var(--ease); }
.wand a:hover { box-shadow: 0 0 0 1px rgba(var(--glow), .9), 0 0 50px -6px rgba(var(--glow), .6); scale: 1.03; z-index: 2; }
.wand a:hover img { filter: brightness(1.12) saturate(1.1); scale: 1.06; }
[data-theme="tag"] .wand img { filter: none; }
@keyframes wandern { to { transform: translateY(-50%); } }

.siegel { position: absolute; left: -2.2rem; bottom: 1.2rem; width: 8.6rem; height: 8.6rem; border-radius: 50%; z-index: 3; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line-2); box-shadow: var(--schatten); }
.siegel svg { position: absolute; inset: 0; animation: drehen 32s linear infinite; }
.siegel text { font: 500 13.5px var(--sans); letter-spacing: .13em; fill: var(--ink-2); }
.siegel__mitte { width: 2.5rem; height: 2.5rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: repeating-linear-gradient(90deg, var(--logo-blau) 0 12.5%, #F6F3EA 12.5% 25%); box-shadow: 0 0 34px 2px rgba(255, 210, 31, .5); }
.siegel__mitte i { width: 72%; height: 72%; border-radius: 50%; background: var(--logo-gelb); }
@keyframes drehen { to { rotate: 360deg; } }

/* ---------- Laufband ---------- */
.band { display: flex; align-items: center; border-block: 1px solid var(--line); background: var(--bg-2); overflow: hidden; }
.band__kopf { flex: none; padding: 1.25rem 1.6rem 1.25rem var(--rand); font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--akzent-text); border-right: 1px solid var(--line); background: var(--bg-2); position: relative; z-index: 1; }
.band__bahn { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.band__lauf { display: flex; align-items: center; flex: none; animation: laufen 52s linear infinite; }
.band:hover .band__lauf { animation-play-state: paused; }
.band__lauf span { font-family: var(--serif); font-size: 1.5rem; font-style: italic; white-space: nowrap; color: var(--ink-2); padding: 0 1.5rem; }
.band__lauf i { width: 6px; height: 6px; border-radius: 50%; background: var(--licht); box-shadow: 0 0 12px 2px rgba(var(--glow), .8); flex: none; }
@keyframes laufen { to { transform: translateX(-100%); } }

/* ---------- Abschnittsköpfe ---------- */
.shead { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.shead > p:not(.eyebrow) { color: var(--ink-2); max-width: 30rem; justify-self: end; text-wrap: balance; }
.shead .eyebrow { margin-bottom: 1.1rem; }
.shead--c { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.shead--c > p:not(.eyebrow) { justify-self: center; max-width: 40rem; margin-top: .4rem; }
.shead--c h2 { max-width: 20ch; }

/* ---------- Büro ---------- */
.buero { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(2.5rem, 7vw, 6.5rem); align-items: start; }
.buero__bild { position: sticky; top: 7.5rem; }
.portrait { display: grid; justify-items: center; gap: 1.4rem; position: relative; }
.portrait::before { content: ""; position: absolute; top: -12%; left: 50%; width: 150%; aspect-ratio: 1; translate: -50% 0; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--glow), .2), transparent); }
.portrait__rahmen { width: min(19rem, 76vw); aspect-ratio: 4 / 4.7; border-radius: 999px 999px 20px 20px; overflow: hidden; position: relative; background: #E9E9E9;
  box-shadow: 0 0 0 1px var(--line-2), 0 0 0 10px color-mix(in srgb, var(--card) 70%, transparent), 0 0 0 11px var(--line), 0 50px 90px -40px rgba(var(--glow), .55); }
.portrait__rahmen img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 30%; }
.portrait figcaption { display: grid; justify-items: center; text-align: center; gap: .1rem; position: relative; }
.portrait .hand { font-size: 2.5rem; line-height: 1.1; color: var(--akzent-text); rotate: -4deg; }
[data-theme="nacht"] .portrait .hand { text-shadow: 0 0 26px rgba(var(--glow), .5); }
.portrait small { font-size: .82rem; letter-spacing: .04em; color: var(--ink-3); }
.buero__text h2 { margin-bottom: 1.6rem; }
.haltung { display: grid; gap: 1.5rem; margin-top: 2.6rem; }
.haltung li { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; }
.haltung .ico { width: 3rem; height: 3rem; padding: .78rem; border-radius: 50%; border: 1px solid var(--line-2); color: var(--akzent-text); background: var(--card); stroke-width: 1.4; }
.haltung strong { font-family: var(--serif); font-weight: 400; font-size: 1.42rem; line-height: 1.2; display: block; margin-bottom: .2rem; }
.haltung p { color: var(--ink-2); }
.team { margin-top: 2.8rem; border-top: 1px solid var(--line); }
.team li { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); gap: 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.team strong { font-family: var(--serif); font-weight: 400; font-size: 1.32rem; }
.team span { color: var(--ink-2); font-size: .96rem; }

.zahlen { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(3.5rem, 8vw, 6rem); border-top: 1px solid var(--line); }
.zahlen > div { padding: 2rem 1.6rem 0 0; position: relative; }
.zahlen > div + div { padding-left: 1.6rem; border-left: 1px solid var(--line); }
.zahlen dt { font-family: var(--serif); font-size: clamp(3rem, 6.2vw, 5.1rem); line-height: 1; letter-spacing: -.02em; color: var(--akzent-text); font-variant-numeric: tabular-nums; }
[data-theme="nacht"] .zahlen dt { text-shadow: 0 0 44px rgba(var(--glow), .45); }
.zahlen dd { color: var(--ink-2); margin-top: .7rem; font-size: .98rem; max-width: 17rem; }

/* ---------- Lichtprobe ---------- */
.probe { --akzent: #2D5BFF; --dim: 1; border-radius: 30px; overflow: hidden; border: 1px solid var(--line-2); background: #06080E; position: relative;
  box-shadow: 0 70px 130px -70px color-mix(in srgb, var(--akzent) calc(var(--dim) * 85%), transparent), var(--schatten); transition: --akzent 1.1s var(--ease), box-shadow 1.2s var(--ease); }
.probe.is-wechsel { animation: farbwechsel 14s linear infinite; }
@keyframes farbwechsel { 0%, 100% { --akzent: #2D5BFF; } 20% { --akzent: #A54BFF; } 40% { --akzent: #FF3B26; } 60% { --akzent: #FF9A2A; } 80% { --akzent: #1FD67A; } }
.probe__bild { position: relative; }
.tor { width: 100%; height: auto; }
.tor__stein { fill: #151A27; }
.tor__kante { stroke: #6C80B8; stroke-opacity: .32; stroke-width: 1.4; }
.tor__licht, .tor__gewoelbe, .tor__punkte { opacity: var(--dim); transition: opacity .35s linear; }
.is-schalten .tor__punkte { transition: opacity .2s linear; }
.is-schalten .tor__licht { transition: opacity 1.5s var(--ease) .15s; }
.is-schalten .tor__gewoelbe { transition: opacity 1.6s var(--ease) .75s; }
.tor__farbe { fill: var(--akzent); }
.tor__dunkel { fill: #080B14; }
.tor__sterne circle { animation: funkeln 4.6s ease-in-out infinite; }
.tor__sterne circle:nth-child(3n) { animation-delay: -1.7s; animation-duration: 3.3s; }
.tor__sterne circle:nth-child(4n + 1) { animation-delay: -2.9s; animation-duration: 5.8s; }
@keyframes funkeln { 50% { opacity: .25; } }
.probe__hinweis { position: absolute; left: 1.2rem; right: 1.2rem; top: 1.1rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; color: rgba(245, 240, 230, .62); }
.probe__hinweis a { display: inline-flex; align-items: center; gap: .4rem; color: #FFC873; }
.probe__hinweis a:hover .ico { translate: 3px 0; }
.probe__hinweis .ico { transition: translate .3s var(--ease); }
.probe__regler { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(12rem, .5fr); gap: 1rem 2.4rem; align-items: center; padding: 1.3rem 1.6rem; background: #0C0F17; border-top: 1px solid rgba(255, 255, 255, .1); color: #F5F0E6; }
.probe__zeile { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.probe__name { font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(245, 240, 230, .55); white-space: nowrap; }
.kipp { display: inline-flex; align-items: center; gap: .6rem; color: #F5F0E6; }
.kipp span { width: 3.1rem; height: 1.75rem; border-radius: 999px; background: #1C2130; border: 1px solid rgba(255, 255, 255, .18); position: relative; transition: background-color .4s, box-shadow .4s; }
.kipp span::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.75rem - 6px); height: calc(1.75rem - 6px); border-radius: 50%; background: #8A8F9C; transition: translate .5s var(--ease-b), background-color .4s; }
.kipp[aria-checked="true"] span { background: #5A4416; box-shadow: 0 0 22px -2px rgba(255, 200, 115, .7); }
.kipp[aria-checked="true"] span::after { translate: 1.35rem 0; background: #FFD9A0; }
.kipp b { font-weight: 500; font-size: .92rem; min-width: 1.8rem; text-align: left; }
.farben { display: flex; flex-wrap: wrap; gap: .45rem; }
.farben button { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .85rem .4rem .5rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); font-size: .9rem; color: rgba(245, 240, 230, .78); transition: border-color .3s, background-color .3s, color .3s; }
.farben i { width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--f); box-shadow: 0 0 12px 0 var(--f); }
.farben__wechsel i { background: conic-gradient(#2D5BFF, #A54BFF, #FF3B26, #FF9A2A, #1FD67A, #2D5BFF); box-shadow: none; }
.farben button:hover { border-color: rgba(255, 255, 255, .4); color: #fff; }
.farben button[aria-checked="true"] { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .55); color: #fff; }
.dimmer { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 1.75rem; background: transparent; cursor: pointer; }
.dimmer::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #2A2F3D, #FFD9A0); }
.dimmer::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #2A2F3D, #FFD9A0); }
.dimmer::-webkit-slider-thumb { -webkit-appearance: none; width: 1.3rem; height: 1.3rem; margin-top: calc(-.65rem + 2px); border-radius: 50%; background: #FFF3DC; border: 0; box-shadow: 0 0 0 4px rgba(255, 217, 160, .18), 0 0 18px 2px rgba(255, 217, 160, .7); }
.dimmer::-moz-range-thumb { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #FFF3DC; border: 0; box-shadow: 0 0 0 4px rgba(255, 217, 160, .18), 0 0 18px 2px rgba(255, 217, 160, .7); }
.probe output { font-size: .9rem; font-variant-numeric: tabular-nums; min-width: 3.2rem; text-align: right; color: rgba(245, 240, 230, .78); }

/* ---------- Leistungen ---------- */
.lst { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.15rem; }
.lk { grid-column: span 3; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: translate .6s var(--ease), box-shadow .6s var(--ease), opacity .9s var(--ease), transform 1s var(--ease); }
.lk--breit { grid-column: span 6; }
.lk:hover { translate: 0 -5px; box-shadow: var(--schatten); }
.lk__szene { height: 11.5rem; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, var(--card-2), var(--card)); }
.lk__text { padding: 1.5rem 1.55rem 1.65rem; display: grid; gap: .7rem; align-content: start; flex: 1; position: relative; z-index: 1; }
.lk__nr { font-size: .74rem; font-weight: 500; letter-spacing: .2em; color: var(--akzent-text); }
.lk p { color: var(--ink-2); font-size: 1rem; }
.lk .tags { margin-top: .5rem; }

/* 01 Lichtkegel */
.sz-kegel__lampe { position: absolute; top: 0; left: 50%; width: 2.3rem; height: .95rem; translate: -50% 0; background: var(--ink-3); border-radius: 0 0 6px 6px; z-index: 2; }
.sz-kegel__lampe::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -3px; height: 5px; border-radius: 50%; background: #FFF3DC; box-shadow: 0 0 16px 4px rgba(var(--glow), .9); }
.sz-kegel__licht { position: absolute; top: .7rem; left: 50%; width: 24rem; height: 13rem; margin-left: -12rem; transform-origin: 50% 0; clip-path: polygon(47.5% 0, 52.5% 0, 82% 100%, 18% 100%);
  background: linear-gradient(rgba(var(--glow), .78), rgba(var(--glow), .1) 78%, transparent); animation: schwenken 7s ease-in-out infinite alternate; animation-play-state: paused; }
.sz-kegel__boden { position: absolute; left: 8%; right: 8%; bottom: 1.5rem; height: 1px; background: var(--line-2); }
@keyframes schwenken { from { rotate: -24deg; } to { rotate: 24deg; } }
/* 02 Tageslicht */
.sz-tag__fenster { position: absolute; left: 14%; top: 1.6rem; width: 4.6rem; height: 6.6rem; border: 1.5px solid var(--ink-3); border-radius: 3px; background: linear-gradient(var(--ink-3), var(--ink-3)) 50% 0 / 1.5px 100% no-repeat, linear-gradient(var(--ink-3), var(--ink-3)) 0 50% / 100% 1.5px no-repeat, rgba(var(--glow), .12); }
.sz-tag__sonne { position: absolute; left: 14%; top: 1.6rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--logo-gelb); box-shadow: 0 0 26px 6px rgba(255, 210, 31, .6); offset-path: path("M 10 96 Q 37 -30 64 96"); offset-rotate: 0deg; animation: sonnenlauf 9s ease-in-out infinite alternate; animation-play-state: paused; z-index: 0; }
.sz-tag__fleck { position: absolute; left: calc(14% + 2.3rem); bottom: 1.5rem; width: 7rem; height: 2rem; transform-origin: 0 100%; background: linear-gradient(90deg, rgba(var(--glow), .7), rgba(var(--glow), .06)); clip-path: polygon(0 100%, 30% 0, 100% 0, 78% 100%); animation: schatten 9s ease-in-out infinite alternate; animation-play-state: paused; }
.sz-tag::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 1.5rem; height: 1px; background: var(--line-2); }
@keyframes sonnenlauf { from { offset-distance: 12%; } to { offset-distance: 88%; } }
@keyframes schatten { from { transform: skewX(34deg) scaleX(1.25); opacity: .55; } 50% { transform: skewX(0deg) scaleX(.8); opacity: 1; } to { transform: skewX(-34deg) scaleX(1.25); opacity: .55; } }
/* 03 Lichtkunst */
.sz-kunst { display: flex; align-items: center; justify-content: center; gap: .78rem; }
.sz-kunst i { width: 5px; height: 6.4rem; border-radius: 5px; background: hsl(calc(205 + var(--n) * 17) 95% 62%); box-shadow: 0 0 18px 2px hsl(calc(205 + var(--n) * 17) 95% 62% / .75); animation: welle 3.2s ease-in-out calc(var(--n) * -.28s) infinite, farblauf 10s linear infinite; animation-play-state: paused; }
.sz-kunst i:nth-child(1) { --n: 0; } .sz-kunst i:nth-child(2) { --n: 1; } .sz-kunst i:nth-child(3) { --n: 2; } .sz-kunst i:nth-child(4) { --n: 3; } .sz-kunst i:nth-child(5) { --n: 4; }
.sz-kunst i:nth-child(6) { --n: 5; } .sz-kunst i:nth-child(7) { --n: 6; } .sz-kunst i:nth-child(8) { --n: 7; } .sz-kunst i:nth-child(9) { --n: 8; }
@keyframes welle { 0%, 100% { scale: 1 .42; opacity: .6; } 50% { scale: 1 1; opacity: 1; } }
@keyframes farblauf { to { filter: hue-rotate(360deg); } }
/* 04 Farbfächer */
.sz-farbe { display: grid; place-items: center; }
.sz-farbe i { grid-area: 1 / 1; width: 3.2rem; height: 6.2rem; border-radius: 9px; background: var(--c); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 26px -12px rgba(0, 0, 0, .7); transform-origin: 50% 118%; rotate: calc((var(--n) - 2) * 5deg); transition: rotate .9s var(--ease-b); margin-top: 1rem; }
.sz-farbe i:nth-child(1) { --n: 0; } .sz-farbe i:nth-child(2) { --n: 1; } .sz-farbe i:nth-child(3) { --n: 2; } .sz-farbe i:nth-child(4) { --n: 3; } .sz-farbe i:nth-child(5) { --n: 4; }
.is-live .sz-farbe i { rotate: calc((var(--n) - 2) * 19deg); transition-delay: calc(var(--n) * 70ms); }
.lk:hover .sz-farbe i { rotate: calc((var(--n) - 2) * 25deg); }
/* 05 Grundriss, 06 Visualisierung */
.sz-plan, .sz-visu { display: grid; place-items: center; }
.sz-plan svg, .sz-visu svg { width: min(17rem, 82%); height: auto; overflow: visible; }
.sz-plan path, .sz-visu path[pathLength] { stroke: var(--ink-2); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease) .2s; }
.sz-plan path:nth-child(2) { transition-delay: .9s; stroke: var(--ink-3); }
.sz-plan path:nth-child(3) { transition-delay: 1.6s; stroke: var(--akzent-text); }
.is-in .sz-plan path, .is-in .sz-visu path[pathLength], .no-js .sz-plan path, .no-js .sz-visu path[pathLength] { stroke-dashoffset: 0; }
.sz-visu svg { width: min(15rem, 60%); }
.sz-visu__flaechen { opacity: 0; transition: opacity 1.6s ease 2.2s; }
.is-in .sz-visu__flaechen { opacity: 1; }
.sz-visu__balken { position: absolute; left: 1.3rem; bottom: 1.1rem; width: 8rem; display: grid; gap: .3rem; }
.sz-visu__balken b { height: 3px; border-radius: 3px; background: var(--line-2); position: relative; overflow: hidden; }
.sz-visu__balken b::after { content: ""; position: absolute; inset: 0; background: var(--licht); transform-origin: 0 50%; scale: 0 1; transition: scale 3.4s var(--ease) .5s; }
.is-in .sz-visu__balken b::after { scale: 1 1; }
.sz-visu__balken em { font-style: normal; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.is-live .sz-kegel__licht, .is-live .sz-tag__sonne, .is-live .sz-tag__fleck, .is-live .sz-kunst i { animation-play-state: running; }

/* ---------- Projekte ---------- */
.fall { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(1.4rem, 3vw, 2.6rem); border-radius: 28px; border: 1px solid var(--line); background: var(--card); margin-bottom: 2.6rem; overflow: hidden; }
.fall__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; position: relative; z-index: 1; }
.fall__bilder img { border-radius: 16px; width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 0 0 1px var(--line); transition: rotate .8s var(--ease), translate .8s var(--ease); }
.fall__bilder img:first-child { rotate: -3deg; translate: 0 6%; }
.fall__bilder img:last-child { rotate: 3deg; translate: 0 -6%; }
.fall:hover .fall__bilder img { rotate: 0deg; translate: 0 0; }
.fall__text { display: grid; gap: 1.1rem; justify-items: start; position: relative; z-index: 1; }
.fall__text small { font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--akzent-text); }
.fall__text > strong { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.02; letter-spacing: -.015em; }
.fall__text > strong em { color: var(--akzent-text); }
.fall__zahlen { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); width: 100%; }
.fall__zahlen span { display: grid; font-size: .9rem; color: var(--ink-2); }
.fall__zahlen b { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.15; color: var(--ink); }

.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.filter button { padding: .55rem 1.05rem; border-radius: 999px; border: 1px solid var(--line-2); font-size: .95rem; color: var(--ink-2); transition: background-color .3s, color .3s, border-color .3s; }
.filter sup { font-size: .68rem; margin-left: .2rem; color: var(--ink-3); transition: color .3s; }
.filter button:hover { border-color: var(--licht); color: var(--ink); }
.filter button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.filter button[aria-pressed="true"] sup { color: inherit; opacity: .6; }

.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.3rem; }
.pk { display: grid; gap: .95rem; align-content: start; position: relative; }
.pk[hidden] { display: none; }
.pk__bild { display: block; position: relative; border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .5s; }
.pk__bild img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: brightness(.9); transition: scale 1.3s var(--ease), filter .6s; }
[data-theme="tag"] .pk__bild img { filter: none; }
.pk:hover .pk__bild { box-shadow: 0 0 0 1px rgba(var(--glow), .9), 0 24px 60px -24px rgba(var(--glow), .65); }
.pk:hover .pk__bild img { scale: 1.07; filter: brightness(1.08); }
.pk__zahl { position: absolute; left: .7rem; bottom: .7rem; font-size: .72rem; letter-spacing: .06em; padding: .22rem .6rem; border-radius: 999px; background: rgba(6, 8, 14, .68); color: #F5F0E6; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; translate: 0 6px; transition: opacity .4s, translate .5s var(--ease); }
.pk:hover .pk__zahl { opacity: 1; translate: 0 0; }
.pk__text { display: grid; gap: .12rem; padding-right: 2.6rem; }
.pk__text small { font-size: .7rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--akzent-text); }
.pk__text strong { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.15; }
.pk__text em { font-style: normal; font-size: .9rem; color: var(--ink-3); }
.pk__pfeil { position: absolute; right: 0; bottom: .3rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink-2); transition: background-color .4s, color .4s, border-color .4s, rotate .5s var(--ease); rotate: -45deg; }
.pk:hover .pk__pfeil { background: var(--btn-bg); color: var(--btn-ink); border-color: transparent; rotate: 0deg; }

/* ---------- Ablauf ---------- */
.ablauf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; position: relative; padding-top: 2.6rem; counter-reset: schritt; }
.ablauf::before, .ablauf::after { content: ""; position: absolute; left: 0; right: 0; top: .55rem; height: 1px; background: var(--line-2); }
.ablauf::after { height: 2px; top: calc(.55rem - .5px); background: linear-gradient(90deg, var(--licht), rgba(var(--glow), .5)); box-shadow: 0 0 16px 1px rgba(var(--glow), .7); transform-origin: 0 50%; scale: 0 1; transition: scale 3s var(--ease) .3s; }
.ablauf.is-in::after, .no-js .ablauf::after { scale: 1 1; }
.ablauf li { position: relative; counter-increment: schritt; }
.ablauf__punkt { position: absolute; left: 0; top: -2.6rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-2); z-index: 1; transition: background-color .6s, box-shadow .6s, border-color .6s; transition-delay: calc(var(--i) * .72s + .5s); }
.ablauf.is-in .ablauf__punkt { background: var(--licht); border-color: transparent; box-shadow: 0 0 0 5px rgba(var(--glow), .16), 0 0 24px 4px rgba(var(--glow), .8); }
.ablauf li::before { content: "0" counter(schritt); display: block; font-family: var(--serif); font-size: 3.4rem; line-height: 1; color: var(--ink-3); opacity: .5; margin-bottom: .9rem; }
.ablauf small { font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--akzent-text); }
.ablauf h3 { margin: .35rem 0 .6rem; }
.ablauf p { color: var(--ink-2); font-size: 1rem; }

/* ---------- Referenzen: Die Namen liegen im Halbdunkel, der Mauszeiger leuchtet sie an ---------- */
.ref { position: relative; }
.ref__ebene { columns: 3; column-gap: 3.2rem; }
.ref__gruppe { break-inside: avoid; padding: 0 0 2rem; }
.ref__gruppe h3 { font: 500 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; margin-bottom: .6rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.ref__gruppe li { font-family: var(--serif); font-size: 1.34rem; line-height: 1.32; }
.ref__ebene--dunkel { color: var(--ink-2); }
.ref__ebene--dunkel h3 { color: var(--akzent-text); }
.ref__ebene--hell { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ref__ebene--dunkel { color: var(--ink-3); opacity: .62; }
  .ref__ebene--dunkel h3 { color: var(--ink-3); }
  .ref__ebene--hell { display: block; position: absolute; inset: 0; pointer-events: none; color: var(--ink); opacity: 0; transition: opacity .6s;
    -webkit-mask-image: radial-gradient(300px circle at var(--rx, 50%) var(--ry, 30%), #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%); mask-image: radial-gradient(300px circle at var(--rx, 50%) var(--ry, 30%), #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%); }
  [data-theme="nacht"] .ref__ebene--hell { text-shadow: 0 0 26px rgba(var(--glow), .45); }
  .ref__ebene--hell h3 { color: var(--akzent-text); border-color: rgba(var(--glow), .5); }
  .ref.is-in .ref__ebene--hell { opacity: 1; }
}
.nur-tippen { display: none; }
@media not ((hover: hover) and (pointer: fine)) { .nur-maus { display: none; } .nur-tippen { display: inline; } }

/* ---------- Presse ---------- */
.presse { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.presse__kopf { position: sticky; top: 7.5rem; }
.presse__kopf h2 { margin-bottom: 1.3rem; }
.presse__kopf > p:not(.eyebrow) { color: var(--ink-2); max-width: 28rem; }
.preis { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; align-items: center; margin-top: 2.2rem; padding: 1.3rem 1.4rem; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); }
.preis__kranz { width: 4.4rem; height: 4.4rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(var(--glow), .6); box-shadow: 0 0 34px -4px rgba(var(--glow), .7), inset 0 0 18px -4px rgba(var(--glow), .6); position: relative; z-index: 1; }
.preis__kranz::before { content: "2010"; font-family: var(--serif); font-size: 1.25rem; color: var(--akzent-text); }
.preis__kranz i { position: absolute; inset: -7px; border-radius: 50%; border: 1px dashed rgba(var(--glow), .45); animation: drehen 40s linear infinite; }
.preis > span:last-child { display: grid; gap: .1rem; position: relative; z-index: 1; }
.preis small { font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--akzent-text); }
.preis strong { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.15; }
.preis em { font-style: normal; font-size: .88rem; color: var(--ink-2); }
.pr { border-top: 1px solid var(--line); }
.pr li.mehr { display: none; }
.pr.is-offen li.mehr { display: block; }
.pr a { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto auto; gap: 1.2rem; align-items: center; padding: 1.05rem .8rem; border-bottom: 1px solid var(--line); border-radius: 12px; transition: background-color .4s, padding .5s var(--ease); }
.pr a:hover { background: var(--card); padding-left: 1.3rem; }
.pr time { font-family: var(--serif); font-size: 1.3rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pr__titel { display: grid; font-family: var(--serif); font-size: 1.28rem; line-height: 1.2; }
.pr__titel small { font: 500 .7rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--akzent-text); margin-bottom: .2rem; }
.pr__medium { font-size: .84rem; color: var(--ink-2); text-align: right; max-width: 11rem; }
.pr .ico { color: var(--ink-3); transition: color .3s, translate .4s var(--ease); }
.pr a:hover .ico { color: var(--akzent-text); translate: 0 3px; }
.presse__liste .btn { margin-top: 1.6rem; }

/* ---------- Kontakt ---------- */
.kontakt { overflow: clip; }
.kontakt__schein { position: absolute; left: 50%; bottom: -34rem; width: 78rem; height: 56rem; translate: -50% 0; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--glow), .2), rgba(var(--glow), .06) 55%, transparent); }
.kontakt__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; position: relative; }
.kontakt h2 { margin-bottom: 1.4rem; }
.kanal { margin-top: 2.4rem; display: grid; gap: .3rem; }
.kanal a { display: flex; align-items: center; gap: 1.1rem; padding: .85rem .6rem; border-radius: 16px; transition: background-color .4s, translate .5s var(--ease); }
.kanal a:hover { background: var(--card); translate: 6px 0; }
.kanal .ico { width: 3rem; height: 3rem; padding: .85rem; border-radius: 50%; border: 1px solid var(--line-2); color: var(--akzent-text); background: var(--card); }
.kanal span { display: grid; font-family: var(--serif); font-size: 1.42rem; line-height: 1.2; }
.kanal small { font: 500 .7rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .15rem; }

.form { background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: clamp(1.4rem, 3vw, 2.4rem); display: grid; gap: 1.1rem; box-shadow: var(--schatten); }
.form h3 { font-size: 1.9rem; margin-bottom: .3rem; }
.form__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form label > span, .form legend { display: block; font-size: .84rem; color: var(--ink-2); margin-bottom: .4rem; }
.form label > span i { font-style: normal; color: var(--ink-3); }
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form textarea { width: 100%; padding: .85rem 1rem; border-radius: 13px; border: 1px solid var(--line-2); background: var(--bg); outline: none; transition: border-color .3s, box-shadow .3s; }
.form textarea { resize: vertical; min-height: 7rem; }
.form input:focus, .form textarea:focus { border-color: var(--licht); box-shadow: 0 0 0 4px rgba(var(--glow), .16), 0 0 30px -8px rgba(var(--glow), .5); }
.form__wahl { display: flex; flex-wrap: wrap; gap: .5rem; }
.form__wahl legend { width: 100%; }
.form__wahl input { position: absolute; opacity: 0; pointer-events: none; }
.form__wahl label span { margin: 0; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); cursor: pointer; font-size: .93rem; transition: background-color .3s, color .3s, border-color .3s; }
.form__wahl input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.form__wahl input:focus-visible + span { outline: 2px solid var(--licht); outline-offset: 3px; }
.form .btn { justify-self: start; margin-top: .4rem; }
.form__msg { font-size: .95rem; min-height: 0; }
.form__msg.is-ok { color: var(--akzent-text); }
.form__msg.is-err { color: #FF7A6B; }
.form__klein { font-size: .82rem; color: var(--ink-3); }
.form__klein a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Fuß ---------- */
.footer { padding: 4.5rem 0 2rem; border-top: 1px solid var(--line); background: var(--bg); }
.footer__raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr) minmax(0, .9fr); gap: 3rem; }
.footer__marke p { color: var(--ink-2); max-width: 26rem; margin: 1.3rem 0 1.4rem; }
.footer h3 { font: 500 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--akzent-text); margin-bottom: 1rem; }
.footer__raster > nav a, .footer__raster > div:not(.footer__marke) > a { display: block; padding: .22rem 0; color: var(--ink-2); transition: color .3s, translate .4s var(--ease); }
.footer__raster > nav a:hover, .footer__raster > div:not(.footer__marke) > a:hover { color: var(--ink); translate: 4px 0; }
.footer__raster > div:not(.footer__marke) > p { color: var(--ink-2); margin-top: .7rem; }
.sozial { display: flex; gap: .5rem; }
.sozial a { width: 2.7rem; height: 2.7rem; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink-2); transition: color .3s, border-color .3s, box-shadow .4s; }
.sozial a:hover { color: var(--akzent-text); border-color: var(--licht); box-shadow: 0 0 24px -4px rgba(var(--glow), .7); }
.footer__ende { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .86rem; color: var(--ink-3); }
.footer__ende a { margin-right: 1.3rem; transition: color .3s; }
.footer__ende a:hover { color: var(--ink); }
.footer__von a { margin: 0; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Projektansicht ---------- */
.pd { width: min(1180px, 100vw - 2rem); max-width: none; height: min(46rem, 100dvh - 2rem); max-height: none; padding: 0; border: 1px solid var(--line-2); border-radius: 28px; background: var(--bg-2); color: var(--ink); overflow: hidden; box-shadow: 0 60px 140px -40px #000; }
.pd:focus { outline: none; }
.pd::backdrop { background: rgba(3, 4, 8, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pd[open] { animation: pdAuf .6s var(--ease); }
.pd[open]::backdrop { animation: pdHinten .5s ease; }
@keyframes pdAuf { from { opacity: 0; transform: translateY(26px) scale(.975); } }
@keyframes pdHinten { from { opacity: 0; } }
.pd__innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 100%; position: relative; }
.pd__zu { position: absolute; right: 1rem; top: 1rem; z-index: 5; width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: rotate .5s var(--ease), border-color .3s; }
.pd__zu:hover { rotate: 90deg; border-color: var(--licht); }
.pd__bilder { padding: 1.6rem; display: grid; grid-template-rows: auto auto; gap: .9rem; align-content: center; background: #05070C; min-height: 0; }
.pd__gross { position: relative; border-radius: 18px; overflow: hidden; width: min(100%, 31rem); aspect-ratio: 1; margin-inline: auto; background: #0B0E15; }
.pd__gross img { width: 100%; height: 100%; object-fit: cover; }
.pd__gross img.is-neu { animation: bildNeu .7s var(--ease); }
@keyframes bildNeu { from { opacity: 0; scale: 1.05; filter: brightness(1.6); } }
.pd__nav { position: absolute; top: 50%; translate: 0 -50%; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: rgba(6, 8, 14, .6); color: #F5F0E6; border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .3s, scale .3s var(--ease); }
.pd__nav:hover { background: rgba(6, 8, 14, .9); scale: 1.08; }
.pd__nav--l { left: .7rem; } .pd__nav--r { right: .7rem; }
.pd__zaehler { position: absolute; left: .8rem; bottom: .8rem; font-size: .76rem; letter-spacing: .08em; padding: .22rem .65rem; border-radius: 999px; background: rgba(6, 8, 14, .66); color: #F5F0E6; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-variant-numeric: tabular-nums; }
.pd__klein { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; width: min(100%, 31rem); margin-inline: auto; }
.pd__klein button { width: 2.85rem; height: 2.85rem; border-radius: 9px; overflow: hidden; opacity: .5; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); transition: opacity .3s, box-shadow .3s, scale .3s var(--ease); }
.pd__klein button:hover { opacity: .9; scale: 1.06; }
.pd__klein button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px #FFC873, 0 0 18px -2px rgba(255, 200, 115, .8); }
.pd__klein img { width: 100%; height: 100%; object-fit: cover; }
.pd__text { padding: 2.6rem clamp(1.4rem, 3vw, 2.8rem) 2rem; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 1rem; align-content: start; }
.pd__text .eyebrow { margin-bottom: 0; }
.pd__text h2 { font-size: clamp(2rem, 3.6vw, 3rem); padding-right: 2.5rem; }
.pd__meta { color: var(--ink-3); font-size: .95rem; }
.pd__satz { font-family: var(--serif); font-size: 1.42rem; line-height: 1.32; color: var(--ink); text-wrap: pretty; }
.pd__fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .7rem; }
.pd__fakten:empty { display: none; }
.pd__fakten div { padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.pd__fakten dt { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; color: var(--akzent-text); }
.pd__fakten dd { font-size: .82rem; color: var(--ink-2); margin-top: .2rem; }
.pd__lang { display: grid; gap: .8rem; color: var(--ink-2); font-size: 1rem; padding-top: .4rem; border-top: 1px solid var(--line); margin-top: .3rem; }
.pd__lang h3 { font-size: 1.3rem; color: var(--ink); margin-top: .5rem; }
.pd__mit { font-size: .86rem; color: var(--ink-3); }
.pd__film { display: grid; gap: .5rem; justify-items: start; }
.pd__film small { font-size: .78rem; color: var(--ink-3); }
.pd__film iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; }
.pd__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); margin-top: .4rem; }

/* ---------- Leiste am Handy ---------- */
.dock { display: none; }

/* ---------- Einblenden beim Scrollen ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .95s var(--ease), transform 1.05s var(--ease), translate .6s var(--ease), box-shadow .6s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="left"] { transform: translateX(-38px); }
.js [data-reveal="right"] { transform: translateX(38px); }
.js [data-reveal="zoom"] { transform: scale(.955); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Rechtstexte ---------- */
.rechtstext { padding: 9.5rem 0 5rem; position: relative; z-index: 1; }
.rechtstext h1 { font-size: clamp(2.8rem, 7vw, 4.6rem); line-height: 1; margin-bottom: 2rem; }
.rechtstext h2 { font-size: 1.6rem; margin: 2.2rem 0 .5rem; }
.rechtstext p { color: var(--ink-2); max-width: 44rem; }
.rechtstext p a:not(.link) { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.rechtstext__hinweis { padding: .9rem 1.1rem; border-radius: 14px; border: 1px dashed rgba(var(--glow), .6); color: var(--ink) !important; font-size: .95rem; }
.rechtstext__zurueck { margin-top: 3rem; }
.recht .nav__innen { background: color-mix(in srgb, var(--bg) 74%, transparent); border-color: var(--line); }

/* ---------- Wechsel zwischen Tag und Nacht ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }

/* ==========================================================================
   Kleinere Bildschirme
   ========================================================================== */
@media (max-width: 1180px) {
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav__links a { padding-inline: .6rem; }
}
@media (max-width: 1020px) {
  .nav__links { display: none; }
  .burger { display: block; }
  .lk, .lk--breit { grid-column: span 6; }
  .ref__ebene { columns: 2; }
  .zahlen { grid-template-columns: repeat(2, 1fr); }
  .zahlen > div { padding-bottom: 2rem; }
  .zahlen > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .zahlen > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .ablauf { grid-template-columns: repeat(2, 1fr); row-gap: 3rem; }
  .ablauf::before, .ablauf::after, .ablauf__punkt { display: none; }
  .ablauf { padding-top: 0; }
  .probe__regler { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero { padding-top: 6.6rem; min-height: 0; }
  .hero__raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero__text { display: contents; }
  .hero__buehne { height: auto; margin: 2.6rem calc(-1 * var(--rand)) 0; order: 5; }
  .hero__fakten { order: 6; margin-top: 2.4rem; }
  .wand { position: relative; inset: auto; rotate: none; grid-template-columns: 1fr; gap: 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); overflow: hidden; }
  .wand__spalte:nth-child(3) { display: none; }
  .wand__lauf { flex-direction: row; width: max-content; gap: 10px; padding: 0 10px 0 0; animation-name: wandernQuer; animation-duration: calc(46s + var(--s) * 8s); }
  .wand a { width: 9.4rem; border-radius: 12px; }
  @keyframes wandernQuer { to { transform: translateX(-50%); } }
  .siegel { left: auto; right: var(--rand); bottom: -3.4rem; width: 6.4rem; height: 6.4rem; }
  .siegel text { font-size: 14.5px; }
  .siegel__mitte { width: 1.9rem; height: 1.9rem; }
  .hero__fakten { grid-template-columns: 1fr 1fr; padding-right: 0; }
  .shead { grid-template-columns: 1fr; }
  .shead > p:not(.eyebrow) { justify-self: start; }
  .buero, .presse, .kontakt__raster, .fall { grid-template-columns: 1fr; }
  .buero__bild, .presse__kopf { position: static; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; }
  .footer__raster { grid-template-columns: 1fr 1fr; }
  .footer__marke { grid-column: 1 / -1; }
  .pd { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .pd__innen { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .pd__bilder { padding: .8rem 1rem; position: sticky; top: 0; z-index: 2; min-height: auto; gap: .6rem; }
  .pd__gross { width: min(100%, 37dvh); }
  .pd__klein { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; padding: 2px; }
  .pd__klein::-webkit-scrollbar { display: none; }
  .pd__klein button { flex: none; width: 2.6rem; height: 2.6rem; }
  .pd__text { overflow: visible; padding: 1.6rem var(--rand) 6rem; }
  .pd__zu { position: fixed; }
  .dock { display: flex; gap: .5rem; position: fixed; left: .7rem; right: .7rem; bottom: calc(.7rem + env(safe-area-inset-bottom)); z-index: 50; padding: .4rem; border-radius: 999px; background: color-mix(in srgb, var(--bg) 78%, transparent); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--schatten); translate: 0 140%; transition: translate .7s var(--ease); }
  .dock.is-on { translate: 0 0; }
  .dock a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.9rem; border-radius: 999px; font-weight: 500; font-size: .95rem; }
  .dock__haupt { background: var(--btn-bg); color: var(--btn-ink); flex: 1.5 !important; }
  .footer { padding-bottom: 6rem; }
}
@media (max-width: 640px) {
  .nav__cta { display: none; }
  .marke__text small { letter-spacing: .09em; font-size: .58rem; white-space: nowrap; }
  .marke { gap: .6rem; }
  .nav__innen { gap: .5rem; padding-left: .7rem; }
  .ab-m { display: none; }
  .eyebrow { letter-spacing: .16em; font-size: .72rem; gap: .6rem; }
  .eyebrow i { width: 1.6rem; }
  .pk__text small { letter-spacing: .1em; font-size: .64rem; }
  .hero__fakten li:last-child { padding-right: 7rem; }
  .marke__text strong { font-size: 1.28rem; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__fakten { grid-template-columns: 1fr; gap: .9rem; }
  .lk, .lk--breit { grid-column: 1 / -1; }
  .ref__ebene { columns: 1; }
  .ablauf { grid-template-columns: 1fr; row-gap: 2.2rem; }
  .ablauf li::before { font-size: 2.6rem; margin-bottom: .5rem; }
  .team li { grid-template-columns: 1fr; gap: .1rem; }
  .form__zeile { grid-template-columns: 1fr; }
  .pr a { grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .8rem; padding-inline: .2rem; }
  .pr__medium { grid-column: 2; grid-row: 2; text-align: left; max-width: none; margin-top: -.6rem; }
  .pr .ico { grid-column: 3; grid-row: 1; }
  .band__kopf { padding-right: 1rem; letter-spacing: .14em; }
  .band__lauf span { font-size: 1.25rem; padding: 0 1.1rem; }
  .probe { border-radius: 20px; }
  .probe__regler { padding: 1.1rem; }
  .probe__zeile--farben { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .probe__hinweis { position: static; padding: .8rem 1.1rem 0; background: #06080E; flex-wrap: wrap; }
  .pk__text strong { font-size: 1.22rem; }
  .pk__text { padding-right: 0; }
  .pk__pfeil { display: none; }
  .fall__bilder { max-width: 22rem; }
  .footer__raster { grid-template-columns: 1fr; gap: 2.2rem; }
  .zahlen > div { padding-right: .8rem; }
  .zahlen > div + div { padding-left: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .wand__lauf, .band__lauf, .siegel svg { animation: none !important; }
  .js [data-reveal], .js [data-auftakt], .js .display .ln > span { opacity: 1; transform: none; }
}