/* ==========================================================================
   NFC-TATTOO – MAIN STYLES
   Aufbau: 1 Reset/Basis · 2 Layout · 3 Typo · 4 Buttons · 5 Header ·
           6 Hero · 7 Produkt · 8 So funktioniert's · 9 Zielgruppen ·
           10 Anwendungen · 11 Technologie · 12 Designs · 13 Individuell ·
           14 Vorteile · 15 Über uns · 16 FAQ · 17 Kontakt · 18 Footer ·
           19 Lightbox/Video · 20 Reveal & Motion · 21 Rechtsseiten
   Alle Werte kommen aus tokens.css.
   ========================================================================== */

/* 1 ── Reset / Basis ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[id] { scroll-margin-top: var(--anchor-offset); }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: 4px; }
.section--dark :focus-visible, .site-footer :focus-visible { outline-color: var(--lime-300); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: var(--sp-4); top: -5rem; z-index: 200; background: var(--ink-900); color: #fff; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill); transition: top var(--dur-fast) var(--ease-out); }
.skip-link:focus { top: var(--sp-4); }

/* 2 ── Layout ----------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); margin-inline: auto; }
.section { padding-block: var(--sp-section); position: relative; }
.section--alt { background: var(--c-bg-alt); }
.section--dark { background: var(--c-bg-dark); color: var(--c-text-on-dark); }
.section--darker { background: var(--c-bg-darker); color: var(--c-text-on-dark); }
.section--dark .lead, .section--darker .lead, .section--dark p, .section--darker p { color: var(--c-text-on-dark-soft); }
.section__head { max-width: 52rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--wide { max-width: none; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

/* 3 ── Typografie ------------------------------------------------------- */
.eyebrow { display: inline-flex; align-items: center; gap: 0.7em; font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--c-accent-text); margin-bottom: var(--sp-5); }
.eyebrow::before { content: ""; width: 2rem; height: 2px; background: currentColor; }
.section--dark .eyebrow, .section--darker .eyebrow, .site-footer .eyebrow { color: var(--lime-400); }
.h-display, .h-section, .h-sub { font-family: var(--font-display); letter-spacing: var(--tracking-display); font-weight: 600; text-wrap: balance; }
.h-display { font-size: var(--fs-h1); line-height: var(--lh-tight); }
.h-section { font-size: var(--fs-h2); line-height: 1.04; }
.h-sub { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.02em; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--c-text-soft); max-width: 40rem; text-wrap: pretty; }
.h-section + .lead, .h-section + p { margin-top: var(--sp-5); }
.mark { color: var(--c-accent-text); }
.section--dark .mark, .section--darker .mark, .hero .mark-lime { color: var(--lime-400); }
.note { font-size: var(--fs-small); color: var(--c-text-soft); }
.section--dark .note, .section--darker .note { color: var(--c-text-on-dark-soft); }

/* 4 ── Buttons ---------------------------------------------------------- */
.btn { --b-bg: var(--ink-900); --b-fg: #fff; --b-bd: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: var(--btn-h); padding: 0 var(--btn-px);
  border-radius: var(--btn-radius); border: 1.5px solid var(--b-bd); background: var(--b-bg); color: var(--b-fg);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn:active { transform: scale(0.97); }
.btn svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-base) var(--ease-out); }
.btn--lime { --b-bg: var(--lime-400); --b-fg: var(--ink-950); --b-bd: var(--lime-400); }
.btn--ghost { --b-bg: transparent; --b-fg: var(--c-text); --b-bd: var(--c-line); border-color: rgba(17,20,13,.35); }
.btn--ghost-dark { --b-bg: transparent; --b-fg: var(--c-text-on-dark); border-color: rgba(243,243,236,.4); }
.btn--sm { --btn-h: 2.6rem; --btn-px: 1.15rem; font-size: 0.9375rem; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover svg { transform: translateX(3px); }
  .btn:not(.btn--lime):not(.btn--ghost):not(.btn--ghost-dark):hover { --b-bg: var(--ink-700); --b-bd: var(--ink-700); }
  .btn--lime:hover { --b-bg: var(--lime-300); --b-bd: var(--lime-300); box-shadow: 0 8px 30px -8px rgba(178,221,76,.6); }
  .btn--ghost:hover { --b-bg: var(--ink-900); --b-fg: #fff; --b-bd: var(--ink-900); }
  .btn--ghost-dark:hover { --b-bg: var(--paper-50); --b-fg: var(--ink-900); --b-bd: var(--paper-50); }
}
.link-arrow { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-display); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.link-arrow svg { width: 1em; height: 1em; transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover svg { transform: translateX(4px); } }

/* 5 ── Header ----------------------------------------------------------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); background: rgba(247,246,241,.78); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid transparent; transition: border-color var(--dur-base) ease, background-color var(--dur-base) ease; }
.site-header.is-scrolled { border-bottom-color: var(--c-line); background: rgba(247,246,241,.9); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--sp-5); }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 2.5rem; width: auto; }
.nav { margin-left: auto; }
.nav__list { display: flex; gap: clamp(.9rem, 1.6vw, 1.9rem); }
.nav__link { position: relative; display: inline-block; padding: .5rem 0; font-family: var(--font-display); font-weight: 500; font-size: .9375rem; text-decoration: none; color: var(--c-text-soft); transition: color var(--dur-fast) ease; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px; background: var(--lime-600); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.nav__link[aria-current="true"] { color: var(--c-text); }
.nav__link[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav__link:hover { color: var(--c-text); } .nav__link:hover::after { transform: scaleX(1); } }
.header-actions { display: flex; align-items: center; gap: var(--sp-4); }
.lang { display: inline-flex; font-family: var(--font-display); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; border: 1px solid var(--c-line); border-radius: var(--r-pill); padding: 2px; }
.lang a { padding: .3rem .7rem; border-radius: var(--r-pill); text-decoration: none; color: var(--c-text-soft); }
.lang a[aria-current="true"] { background: var(--ink-900); color: #fff; }
.menu-toggle { display: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--c-line); background: transparent; align-items: center; justify-content: center; }
.menu-toggle span, .menu-toggle span::before { display: block; width: 1.1rem; height: 2px; background: currentColor; position: relative; transition: transform var(--dur-base) var(--ease-out); }
.menu-toggle span::before { content: ""; position: absolute; top: -6px; left: 0; }
.menu-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(-90deg); top: -6px; }
@media (max-width: 63.99rem) {
  .menu-toggle { display: inline-flex; }
  .header-actions .header-cta { display: none; }
  .js .nav { position: fixed; inset: var(--header-h) 0 0 0; margin: 0; background: var(--ink-950); color: var(--c-text-on-dark); padding: var(--sp-6) var(--gutter) var(--sp-7); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
  .js .nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .js .nav__list { flex-direction: column; gap: 0; }
  .js .nav__link { font-size: clamp(1.7rem, 7vw, 2.4rem); padding: .55rem 0; color: var(--c-text-on-dark); letter-spacing: -0.03em; font-weight: 600; }
  .js .nav__link[aria-current="true"] { color: var(--lime-400); }
  .js .nav__link::after { display: none; }
  .nav__cta-mobile { display: inline-flex; margin-top: var(--sp-6); }
  .no-js .menu-toggle { display: none; }
  .no-js .site-header { height: auto; position: absolute; }
  .no-js .site-header__inner { flex-wrap: wrap; padding-block: var(--sp-3); }
  .no-js .nav { order: 3; width: 100%; margin: 0; }
  .no-js .nav__list { flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
  .no-js .nav__cta-mobile { display: none; }
}
@media (min-width: 64rem) { .nav__cta-mobile { display: none; } }
.menu-open { overflow: hidden; }

/* 6 ── Hero ------------------------------------------------------------- */
.hero { position: relative; min-height: 0; padding-top: calc(var(--header-h) + var(--sp-6)); padding-bottom: var(--sp-5); display: flex; align-items: center; overflow: clip; background: var(--paper-50); }
.hero__grid { display: grid; gap: var(--sp-6); align-items: center; width: min(100% - 2 * var(--gutter), var(--container-wide)); margin-inline: auto; }
.hero__copy { position: relative; z-index: 2; }
.hero__copy .lead { margin-top: var(--sp-5); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--c-text-soft); }
.hero__facts li { display: inline-flex; align-items: center; gap: .55em; }
.hero__facts li::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--lime-400); box-shadow: 0 0 0 4px rgba(178,221,76,.28); }
.hero__media { position: relative; z-index: 1; aspect-ratio: 5/4; border-radius: var(--r-xl); overflow: hidden; background: #f4f4f2; box-shadow: var(--shadow-soft); }
.hero__stage { position: absolute; top: 0; bottom: 0; left: 50%; aspect-ratio: 16/9; transform: translateX(-55.5%); }
.hero__stage img, .hero__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__stage img { object-fit: cover; }
.fx-ring { fill: none; stroke: var(--lime-600); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ring 3.2s var(--ease-out) infinite; }
.fx-ring:nth-child(2) { animation-delay: 1.05s; } .fx-ring:nth-child(3) { animation-delay: 2.1s; }
.fx-link { fill: none; stroke: var(--lime-600); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 16; animation: dash 1.6s linear infinite; }
.fx-dot { fill: var(--lime-400); stroke: #fff; stroke-width: 4; }
@keyframes ring { 0% { opacity: .9; transform: scale(.25); } 80%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes dash { to { stroke-dashoffset: -36; } }
.hero__chip { position: absolute; z-index: 3; left: var(--sp-4); bottom: var(--sp-4); display: inline-flex; align-items: center; gap: .6em; padding: .55rem .95rem; border-radius: var(--r-pill); background: rgba(17,20,13,.86); color: #fff; font-size: var(--fs-small); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero__chip i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--lime-400); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sp-7); }
  .hero__media { aspect-ratio: 1/.92; margin-right: calc(-1 * var(--gutter)); border-radius: var(--r-xl) 0 0 var(--r-xl); }
}
@media (min-width: 90rem) { .hero__media { margin-right: 0; border-radius: var(--r-xl); } }

/* 7 ── Produkt (What is) ------------------------------------------------ */
.what__grid { display: grid; gap: var(--sp-8); align-items: center; }
.what__visual { position: relative; align-self: start; justify-self: center; width: min(100%, 26rem); aspect-ratio: 4/5; background: var(--paper-200); border-radius: 50% 50% var(--r-xl) var(--r-xl) / 38% 38% var(--r-xl) var(--r-xl); overflow: hidden; display: grid; place-items: end center; }
.what__visual::before { content: ""; position: absolute; inset: 8% 8% auto auto; width: 62%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--lime-600); opacity: .55; }
.what__visual::after { content: ""; position: absolute; inset: 20% 20% auto auto; width: 38%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--lime-600); opacity: .9; }
.what__visual img { position: absolute; z-index: 1; left: 50%; bottom: 0; height: 94%; width: auto; max-width: none; transform: translateX(-50%); }
.what__tag { position: absolute; z-index: 2; left: 6%; top: 52%; display: flex; align-items: center; gap: .5rem; padding: .4rem .8rem; background: var(--lime-400); color: var(--ink-950); border-radius: var(--r-pill); font-family: var(--font-display); font-size: .8125rem; font-weight: 600; }
.facts { display: grid; gap: 0; margin-top: var(--sp-7); border-top: 1px solid var(--c-line); }
.facts > div { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--sp-3) var(--sp-4); padding-block: var(--sp-5); border-bottom: 1px solid var(--c-line); }
.facts dt { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); letter-spacing: -0.02em; grid-column: 2; }
.facts dd { grid-column: 2; color: var(--c-text-soft); }
.facts .facts__n { grid-column: 1; grid-row: 1 / span 2; font-family: var(--font-display); font-weight: 600; color: var(--c-accent-text); font-size: .9rem; padding-top: .35rem; }
@media (min-width: 64rem) { .what__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-9); align-items: start; } .what__visual { justify-self: start; position: sticky; top: calc(var(--header-h) + 2rem); } }

/* 8 ── So funktioniert's ------------------------------------------------ */
.how__grid { display: grid; gap: var(--sp-7); align-items: start; }
.steps { display: grid; gap: var(--sp-2); }
.step { position: relative; width: 100%; text-align: left; display: grid; grid-template-columns: 3rem 1fr; gap: var(--sp-1) var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-4); background: transparent; border: 0; border-radius: var(--r-md); color: var(--c-text-on-dark-soft); transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) ease, transform var(--dur-press) var(--ease-out); }
.step:active { transform: scale(.985); }
.step__n { grid-row: 1 / span 2; font-family: var(--font-display); font-size: 2rem; font-weight: 600; letter-spacing: -.04em; color: var(--ink-400); transition: color var(--dur-base) ease; }
.step__t { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--c-text-on-dark); }
.step__d { grid-column: 2; font-size: 1rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur-base) ease; }
.step::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-line-on-dark); }
.step__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--lime-400); transform: scaleX(0); transform-origin: left; z-index: 1; }
.step[aria-current="step"] { background: rgba(243,243,236,.06); }
.step[aria-current="step"] .step__n { color: var(--lime-400); }
.step[aria-current="step"] .step__d { max-height: 14rem; opacity: 1; }
.step[aria-current="step"] .step__bar { transform: scaleX(1); transition: transform var(--step-dur, 5200ms) linear; }
.no-js .step__d { max-height: none; opacity: 1; }
@media (hover: hover) and (pointer: fine) { .step:hover { background: rgba(243,243,236,.04); } }

.stage { position: relative; aspect-ratio: 1/1; max-height: 40rem; width: 100%; border-radius: var(--r-xl); background: radial-gradient(120% 90% at 30% 20%, #232a1a 0%, var(--ink-950) 70%); border: 1px solid var(--c-line-on-dark); overflow: hidden; --px: 0; }
.stage__badge { position: absolute; z-index: 5; top: var(--sp-4); left: var(--sp-4); padding: .35rem .8rem; border-radius: var(--r-pill); border: 1px solid var(--c-line-on-dark); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-on-dark-soft); background: rgba(10,12,8,.6); }
.stage__designs { position: absolute; left: 6%; right: 6%; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.stage__designs > * { padding: 0; border: 2px solid transparent; border-radius: var(--r-md); overflow: hidden; background: #fff; aspect-ratio: 16/10; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-fast) ease, opacity var(--dur-base) ease; opacity: .55; }
.stage__designs img { width: 100%; height: 100%; object-fit: cover; }
.stage[data-step="1"] .stage__designs > *:nth-child(2) { border-color: var(--lime-400); opacity: 1; transform: translateY(-6px) scale(1.04); }
.stage:not([data-step="1"]) .stage__designs { opacity: 0; transform: translateY(-56%); pointer-events: none; }
.stage__arm { position: absolute; left: 6%; bottom: 0; height: 92%; background: var(--paper-200); border-radius: 1.25rem 1.25rem 0 0; overflow: hidden; aspect-ratio: 497/971; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.stage__arm img { width: 100%; height: 100%; object-fit: contain; }
.stage:not([data-step="1"]) .stage__arm { opacity: 1; transform: none; }
.stage[data-step="1"] .stage__designs ~ .stage__arm { opacity: 0; }
.stage__spot { position: absolute; left: 29%; top: 74%; width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.stage__spot i { position: absolute; inset: 0; border: 3px solid var(--lime-600); border-radius: 50%; opacity: 0; }
.stage[data-step="3"] .stage__spot i, .stage[data-step="4"] .stage__spot i { animation: ring2 2.4s var(--ease-out) infinite; }
.stage[data-step="3"] .stage__spot i:nth-child(2), .stage[data-step="4"] .stage__spot i:nth-child(2) { animation-delay: .8s; }
.stage[data-step="3"] .stage__spot i:nth-child(3), .stage[data-step="4"] .stage__spot i:nth-child(3) { animation-delay: 1.6s; }
@keyframes ring2 { 0% { opacity: .9; transform: scale(.2); } 85%, 100% { opacity: 0; transform: scale(1.7); } }
.stage[data-step="2"] .stage__spot::before { content: ""; position: absolute; inset: 8%; border-radius: 12px; border: 2px dashed var(--lime-400); animation: blink 1.6s ease-in-out infinite; }
.phone { position: absolute; z-index: 4; right: 6%; bottom: 8%; width: 34%; aspect-ratio: 9/18.5; background: #05060a; border-radius: 1.6rem; padding: .5rem; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), inset 0 0 0 1.5px #3a3f33; transform: translate(130%, 6%) rotate(10deg); transition: transform 900ms var(--ease-drawer); }
.stage[data-step="3"] .phone { transform: translate(-60%, 4%) rotate(-6deg); }
.stage[data-step="4"] .phone { transform: translate(-82%, 0) rotate(-4deg); }
.phone__screen { position: relative; height: 100%; border-radius: 1.2rem; overflow: hidden; background: linear-gradient(180deg, #1c2316, #0d100a); color: #fff; display: grid; place-items: center; text-align: center; padding: .6rem; }
.phone__screen > * { grid-area: 1/1; transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out); }
.ps-idle, .ps-read, .ps-card { opacity: 0; }
.stage[data-step="1"] .ps-idle, .stage[data-step="2"] .ps-idle { opacity: 1; }
.stage[data-step="3"] .ps-read { opacity: 1; }
.stage[data-step="4"] .ps-card { opacity: 1; }
.ps-idle svg, .ps-read svg { width: 38%; margin-inline: auto; color: var(--lime-400); }
.ps-read svg { animation: blink 1s ease-in-out infinite; }
.ps-txt { font-size: .62rem; line-height: 1.3; color: #cfd4c4; margin-top: .4rem; }
.ps-card { width: 100%; align-self: stretch; display: flex !important; flex-direction: column; justify-content: center; gap: .45rem; text-align: left; }
.ps-card b { display: block; font-family: var(--font-display); font-size: .8rem; line-height: 1.15; letter-spacing: -.02em; }
.ps-card i { display: block; height: .38rem; border-radius: 3px; background: rgba(255,255,255,.18); }
.ps-card i:nth-of-type(2) { width: 70%; }
.ps-card span { margin-top: .3rem; align-self: flex-start; background: var(--lime-400); color: #0a0c08; font-size: .6rem; font-weight: 700; padding: .3rem .7rem; border-radius: 99px; }
.ps-card small { font-size: .5rem; color: #98a08a; }
.stage__cap { position: absolute; z-index: 5; top: var(--sp-4); right: var(--sp-4); text-align: right; font-size: .75rem; color: var(--c-text-on-dark-soft); max-width: 42%; }
@media (min-width: 64rem) { .how__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-8); } .stage { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.video { margin-top: clamp(3rem, 6vw, 6rem); display: grid; gap: var(--sp-6); align-items: center; }
.video__frame { position: relative; aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; background: #000; box-shadow: var(--shadow-lift); }
.video__frame img, .video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video__frame img { filter: brightness(.72); }
.video__consent { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,12,8,.82), rgba(10,12,8,.35)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--sp-4); padding: var(--sp-5); color: #fff; }
.video__consent p { font-size: var(--fs-small); max-width: 30rem; color: #e8eadf !important; }
.video__play { width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--lime-400); color: var(--ink-950); border: 0; transition: transform var(--dur-press) var(--ease-out); }
.video__play:active { transform: scale(.95); }
.video__play svg { width: 1.6rem; margin-left: .2rem; }
@media (min-width: 64rem) { .video { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); } }

/* 9 ── Zielgruppen ------------------------------------------------------ */
.aud { display: grid; gap: var(--sp-5); }
.aud__panel { position: relative; isolation: isolate; border-radius: var(--r-xl); overflow: hidden; padding: clamp(1.75rem, 4vw, 3.5rem); min-height: 34rem; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.aud__panel > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.aud__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.aud__panel--ind { color: var(--ink-900); background: var(--paper-0); }
.aud__panel--ind::before { background: linear-gradient(0deg, rgba(247,246,241,.96) 0%, rgba(247,246,241,.92) 45%, rgba(247,246,241,0) 85%); }
.aud__panel--biz::before { background: linear-gradient(0deg, rgba(10,12,8,.94) 0%, rgba(10,12,8,.82) 50%, rgba(10,12,8,.15) 100%); }
.aud__panel h3 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1; letter-spacing: var(--tracking-display); font-weight: 600; margin-bottom: var(--sp-3); }
.aud__panel .tag-line { font-size: var(--fs-lead); max-width: 28rem; margin-bottom: var(--sp-5); }
.aud__panel--ind .tag-line { color: var(--c-text-soft); }
.aud__panel--biz .tag-line { color: #e4e7da; }
.aud__list { display: grid; gap: .45rem; margin-bottom: var(--sp-6); }
.aud__list li { display: flex; gap: .7rem; align-items: baseline; }
.aud__list li::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--lime-600); transform: translateY(-1px); }
.aud__panel--biz .aud__list li::before { background: var(--lime-400); }
.aud__panel .fine { font-size: .75rem; margin-top: var(--sp-4); opacity: .75; max-width: 34rem; }
@media (min-width: 64rem) { .aud { grid-template-columns: 1fr 1fr; } .aud__panel { min-height: 44rem; } }

/* 10 ── Anwendungen ----------------------------------------------------- */
.apps { display: grid; gap: var(--sp-4); }
.app { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--paper-0); border: 1px solid var(--c-line); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.app h3 { font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: -0.025em; line-height: 1.1; font-weight: 600; }
.app p { color: var(--c-text-soft); max-width: 30rem; }
.app__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: .5em; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .7rem; border-radius: var(--r-pill); }
.app__badge--doc { background: rgba(108,154,20,.16); color: var(--lime-700); }
.app__badge--idea { background: transparent; color: var(--c-text-soft); border: 1px dashed rgba(17,20,13,.4); }
.app__ico { width: 2.5rem; height: 2.5rem; color: var(--lime-700); margin-bottom: var(--sp-3); }
.app--photo { padding: 0; background: var(--ink-900); color: #fff; min-height: 24rem; }
.app--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,12,8,.92), rgba(10,12,8,.1) 65%); }
.app--photo .app__body { position: relative; z-index: 1; margin-top: auto; padding: var(--sp-6); display: grid; gap: var(--sp-3); justify-items: start; }
.app--photo p { color: #e4e7da; }
.app--photo .app__badge--doc { background: var(--lime-400); color: var(--ink-950); }
.app--dark { background: var(--ink-900); color: #fff; border-color: var(--ink-900); } .app--dark p { color: var(--c-text-on-dark-soft); } .app--dark .app__ico { color: var(--lime-400); } .app--dark .app__badge--idea { color: var(--c-text-on-dark-soft); border-color: rgba(243,243,236,.4); }
.app--lime { background: var(--lime-400); border-color: var(--lime-400); } .app--lime p { color: #1f2a08; } .app--lime .app__ico { color: var(--ink-950); } .app--lime .app__badge--doc { background: rgba(10,12,8,.14); color: var(--ink-950); }
@media (min-width: 48rem) { .apps { grid-template-columns: repeat(6, 1fr); } .app { grid-column: span 3; } .app--wide { grid-column: span 4; } .app--narrow { grid-column: span 2; } }
@media (min-width: 64rem) { .apps { grid-auto-rows: minmax(15rem, auto); } .app--photo { grid-row: span 2; } }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--c-text-soft); }

/* 11 ── Technologie ----------------------------------------------------- */
.tech__grid { display: grid; gap: var(--sp-8); align-items: center; }
.xv-wrap { position: relative; aspect-ratio: 1/1; width: min(100%, 32rem); margin-inline: auto; display: grid; place-items: center; perspective: 1400px; }
.xv { --gap: 0px; position: relative; width: 56%; aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(62deg) rotateZ(-38deg); }
.xv__layer { position: absolute; inset: 0; border-radius: 1rem; transition: transform 1100ms var(--ease-drawer); display: grid; place-items: center; }
.xv__layer--film { transform: translateZ(calc(var(--gap) * -1)); background: rgba(178,221,76,.18); border: 1.5px solid rgba(178,221,76,.7); box-shadow: 0 0 0 1px rgba(178,221,76,.2) inset; }
.xv__layer--tag { transform: translateZ(0); background: rgba(243,243,236,.06); border: 1.5px solid rgba(243,243,236,.7); }
.xv__layer--tag svg { width: 80%; height: 80%; color: var(--lime-400); }
.xv__layer--design { transform: translateZ(var(--gap)); background: #fff url("../images/designs/nfc-tattoo-sample-1.webp") center/cover; border: 1.5px solid #fff; box-shadow: 0 30px 50px -10px rgba(0,0,0,.6); }
.xv-wrap.is-in .xv { --gap: 90px; }
.xv-wrap:not(.is-in) .xv { --gap: 0px; }
.tech__list { display: grid; gap: 0; border-top: 1px solid var(--c-line-on-dark); counter-reset: t; }
.tech__list > div { padding: var(--sp-5) 0; border-bottom: 1px solid var(--c-line-on-dark); display: grid; grid-template-columns: 2.25rem 1fr; gap: .15rem var(--sp-4); }
.tech__list dt { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); color: var(--c-text-on-dark); grid-column: 2; }
.tech__list dd { grid-column: 2; color: var(--c-text-on-dark-soft); font-size: 1rem; }
.tech__list .sw { grid-column: 1; grid-row: 1 / span 2; width: .85rem; height: .85rem; border-radius: 50%; margin-top: .45rem; border: 2px solid var(--lime-400); }
.tech__list .sw--2 { background: var(--lime-400); } .tech__list .sw--3 { border-color: #fff; } .tech__list .sw--1 { border-color: #fff; background: #fff; }
.nfc-flow { display: grid; gap: var(--sp-4); margin-top: clamp(3rem, 6vw, 5rem); counter-reset: f; }
.nfc-flow li { position: relative; padding: var(--sp-5); border-radius: var(--r-md); background: rgba(243,243,236,.05); border: 1px solid var(--c-line-on-dark); counter-increment: f; }
.nfc-flow li::before { content: counter(f, decimal-leading-zero); display: block; font-family: var(--font-display); color: var(--lime-400); font-weight: 600; margin-bottom: var(--sp-2); }
.nfc-flow h3 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; color: #fff; margin-bottom: .35rem; letter-spacing: -0.02em; }
.nfc-flow p { font-size: .95rem; }
.tech__foot { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); font-size: var(--fs-small); color: var(--c-text-on-dark-soft); }
.tech__foot img { width: 2.75rem; height: 2.75rem; border-radius: .5rem; flex: none; }
@media (min-width: 48rem) { .nfc-flow { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .tech__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sp-9); } }

/* 12 ── Designs / Galerie ------------------------------------------------ */
.gallery { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); grid-auto-rows: 11rem; }
.g-item { position: relative; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden; background: var(--paper-200); isolation: isolate; text-align: left; -webkit-tap-highlight-color: transparent; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.g-item--dark { background: var(--paper-200); } .g-item--dark img { object-fit: contain; padding: 4% 0 0; }
.g-item figcaption, .g-item .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-6) var(--sp-4) var(--sp-3); color: #fff; font-size: .8125rem; font-family: var(--font-display); font-weight: 500; background: linear-gradient(0deg, rgba(10,12,8,.78), transparent); transform: translateY(8px); opacity: 0; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.g-item:focus-visible .cap, .g-item:active .cap { opacity: 1; transform: none; }
.g-item .plus { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--ink-900); display: grid; place-items: center; opacity: 0; transform: scale(.9); transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out); }
.g-item:focus-visible .plus { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .g-item:hover img { transform: scale(1.045); } .g-item:hover .cap, .g-item:hover .plus { opacity: 1; transform: none; } }
@media (hover: none) { .g-item .cap { opacity: 1; transform: none; } }
.g1 { grid-column: span 2; grid-row: span 2; } .g4 { grid-row: span 2; } .g8 { grid-column: span 2; }
.g8 img { object-position: 0 50%; } .g8 { background: #fff; } .g8 .cap { opacity: 1; transform: none; color: var(--ink-900); background: none; left: auto; text-align: right; }
@media (min-width: 48rem) {
  .gallery { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 9.5rem; gap: var(--sp-4); }
  .g1 { grid-column: 1 / 8; grid-row: 1 / 4; }
  .g2 { grid-column: 8 / 13; grid-row: 1 / 3; }
  .g3 { grid-column: 8 / 13; grid-row: 3 / 5; }
  .g4 { grid-column: 1 / 4; grid-row: 4 / 8; }
  .g5 { grid-column: 4 / 8; grid-row: 4 / 6; }
  .g6 { grid-column: 4 / 8; grid-row: 6 / 8; }
  .g7 { grid-column: 8 / 13; grid-row: 5 / 8; }
  .g8 { grid-column: 1 / 13; grid-row: 8 / 9; }
}
.gallery__note { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); justify-content: space-between; align-items: center; }

/* 13 ── Individuell ------------------------------------------------------ */
.custom { background: var(--lime-400); color: var(--ink-950); overflow: hidden; }
.custom .eyebrow { color: var(--ink-950); }
.custom .lead { color: #223009; }
.custom__grid { display: grid; gap: var(--sp-8); align-items: center; }
.custom__claim { display: grid; gap: .1em; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: 1; letter-spacing: var(--tracking-display); margin-top: var(--sp-4); }
.custom__claim span:nth-child(2) { opacity: .8; } .custom__claim span:nth-child(3) { opacity: .62; }
.custom__steps { display: grid; gap: var(--sp-3); counter-reset: c; }
.custom__steps li { counter-increment: c; display: grid; grid-template-columns: 3rem 1fr; gap: 0 var(--sp-4); padding: var(--sp-5); border-radius: var(--r-md); background: rgba(10,12,8,.9); color: #fff; }
.custom__steps li::before { content: counter(c, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--font-display); color: var(--lime-400); font-weight: 600; font-size: 1.25rem; }
.custom__steps h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); letter-spacing: -.02em; }
.custom__steps p { color: var(--c-text-on-dark-soft); font-size: .95rem; }
.custom .btn { --b-bg: var(--ink-950); --b-bd: var(--ink-950); --b-fg: #fff; margin-top: var(--sp-6); }
@media (hover: hover) and (pointer: fine) { .custom .btn:hover { --b-bg: var(--ink-700); --b-bd: var(--ink-700); } }
@media (min-width: 64rem) { .custom__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sp-9); } }

/* 14 ── Vorteile --------------------------------------------------------- */
.benefits { display: grid; border-top: 1px solid var(--c-line); }
.benefit { display: grid; grid-template-columns: 3rem 1fr; gap: var(--sp-1) var(--sp-5); padding-block: var(--sp-6); border-bottom: 1px solid var(--c-line); align-items: start; }
.benefit svg { width: 2.5rem; height: 2.5rem; color: var(--lime-700); grid-row: 1 / span 2; transition: transform var(--dur-base) var(--ease-out); }
.benefit h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.benefit p { color: var(--c-text-soft); grid-column: 2; max-width: 32rem; }
@media (hover: hover) and (pointer: fine) { .benefit:hover svg { transform: translateY(-3px) rotate(-4deg); } }
@media (min-width: 48rem) { .benefits { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); } }

/* 15 ── Über uns --------------------------------------------------------- */
.about__grid { display: grid; gap: var(--sp-8); align-items: start; }
.about__body { display: grid; gap: var(--sp-4); color: var(--c-text-soft); max-width: 38rem; }
.about__panel { background: var(--paper-0); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-6); display: grid; gap: var(--sp-5); }
.about__panel img { height: 4.5rem; width: auto; }
.about__data { display: grid; gap: 0; }
.about__data > div { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: .85rem; border-top: 1px solid var(--c-line); font-size: .95rem; }
.about__data dt { color: var(--c-text-soft); } .about__data dd { font-weight: 600; text-align: right; font-family: var(--font-display); }
@media (min-width: 64rem) { .about__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-9); } }

/* 16 ── FAQ -------------------------------------------------------------- */
.faq { max-width: 56rem; margin-inline: auto; border-top: 1px solid var(--c-line); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding-block: var(--sp-5); font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; -webkit-tap-highlight-color: transparent; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: none; position: relative; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1.5px solid var(--c-line); transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: .8rem; height: 2px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--dur-base) var(--ease-out); }
.faq summary .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .pm { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.faq details[open] .pm::after { transform: translate(-50%, -50%) rotate(0); }
.faq .ans { padding: 0 0 var(--sp-6); max-width: 44rem; color: var(--c-text-soft); display: grid; gap: var(--sp-3); }
@media (prefers-reduced-motion: no-preference) { .faq details[open] .ans { animation: fadeUp var(--dur-base) var(--ease-out); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(-6px); } }

/* 17 ── Kontakt ---------------------------------------------------------- */
.contact { overflow: hidden; }
.contact__bg { position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(60% 50% at 85% 10%, rgba(178,221,76,.2), transparent 70%); }
.contact__grid { position: relative; display: grid; gap: var(--sp-8); }
.contact__claim { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 6rem); }
.contact__list { display: grid; gap: var(--sp-4); margin-top: var(--sp-7); font-style: normal; }
.contact__list dt { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lime-400); font-family: var(--font-display); font-weight: 600; }
.contact__list dd { color: var(--c-text-on-dark); font-size: 1.05rem; }
.contact__list a { text-decoration-color: rgba(178,221,76,.6); }
.form { display: grid; gap: var(--sp-4); background: rgba(243,243,236,.05); border: 1px solid var(--c-line-on-dark); border-radius: var(--r-xl); padding: clamp(1.5rem, 3.5vw, 2.75rem); }
.form__row { display: grid; gap: var(--sp-4); align-items: start; }
.field .err:empty { display: none; }
.field { display: grid; gap: .4rem; }
.field label, .field legend { font-size: .875rem; font-weight: 500; color: var(--c-text-on-dark); }
.field .opt { color: var(--c-text-on-dark-soft); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-height: 3.25rem; padding: .8rem 1rem; border-radius: var(--r-md); border: 1.5px solid rgba(243,243,236,.28); background: rgba(10,12,8,.55); color: #fff; font-size: 1rem; transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease; }
.field textarea { min-height: 9rem; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23b2dd4c' stroke-width='2'%3E%3Cpath d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.field select option { color: #111; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(243,243,236,.5); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--lime-400); box-shadow: 0 0 0 3px rgba(178,221,76,.3); }
.field [aria-invalid="true"] { border-color: #ff8a80; }
.field .err { color: #ffb4ab; font-size: .8125rem; min-height: 0; }
.check { display: grid; grid-template-columns: 1.5rem 1fr; gap: .75rem; align-items: start; font-size: .9rem; color: var(--c-text-on-dark-soft); }
.check input { width: 1.4rem; height: 1.4rem; min-height: 0; accent-color: var(--lime-400); margin-top: .1rem; }
.check a { color: var(--lime-300); }
.form__status { padding: var(--sp-4); border-radius: var(--r-md); font-size: .95rem; border: 1px solid var(--c-line-on-dark); background: rgba(178,221,76,.1); color: #e8f4c4; }
.form__status[hidden] { display: none; }
.form__status.is-error { background: rgba(255,138,128,.1); color: #ffcdc8; border-color: rgba(255,138,128,.4); }
.form__hint { font-size: .8125rem; color: var(--c-text-on-dark-soft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 40rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-9); } }

/* 18 ── Footer ----------------------------------------------------------- */
.site-footer { background: var(--ink-950); color: var(--c-text-on-dark-soft); padding-block: var(--sp-8) var(--sp-6); font-size: .95rem; border-top: 1px solid var(--c-line-on-dark); }
.footer__grid { display: grid; gap: var(--sp-7); }
.footer__grid h2 { font-family: var(--font-display); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lime-400); margin-bottom: var(--sp-4); font-weight: 600; }
.footer__grid ul { display: grid; gap: .5rem; }
.footer__grid a { text-decoration: none; color: var(--c-text-on-dark); }
@media (hover: hover) and (pointer: fine) { .footer__grid a:hover { color: var(--lime-400); } }
.footer__brand img { height: 2rem; width: auto; margin-bottom: var(--sp-4); }
.footer__brand p { max-width: 24rem; }
.site-footer .lang { border-color: var(--c-line-on-dark); } .site-footer .lang a { color: var(--c-text-on-dark-soft); } .site-footer .lang a[aria-current="true"] { background: var(--lime-400); color: var(--ink-950); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); justify-content: space-between; margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--c-line-on-dark); font-size: .8125rem; }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

/* 19 ── Lightbox --------------------------------------------------------- */
.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100%; height: 100%; color: #fff; }
.lightbox::backdrop { background: rgba(6,8,4,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lightbox[open] { display: grid; grid-template-rows: 1fr auto; place-items: center; padding: var(--sp-5); }
.lightbox__img { max-width: min(100%, 78rem); max-height: 78dvh; width: auto; height: auto; border-radius: var(--r-md); box-shadow: var(--shadow-lift); background: #fff; }
.lightbox__cap { margin-top: var(--sp-4); text-align: center; max-width: 40rem; font-size: .95rem; color: #d7dac9; }
.lightbox__btn { position: absolute; top: 50%; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(10,12,8,.6); color: #fff; display: grid; place-items: center; transform: translateY(-50%); transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) ease; }
.lightbox__btn:active { transform: translateY(-50%) scale(.94); }
.lightbox__btn--prev { left: var(--sp-4); } .lightbox__btn--next { right: var(--sp-4); }
.lightbox__btn--close { top: var(--sp-4); right: var(--sp-4); transform: none; } .lightbox__btn--close:active { transform: scale(.94); }
.lightbox__btn svg { width: 1.25rem; height: 1.25rem; }
@media (prefers-reduced-motion: no-preference) { .lightbox[open] .lightbox__img { animation: lbIn var(--dur-base) var(--ease-out); } .lightbox[open]::backdrop { animation: fadeIn var(--dur-base) ease; } }
@keyframes lbIn { from { opacity: 0; transform: scale(.96); } }
@keyframes fadeIn { from { opacity: 0; } }

/* 20 ── Reveal & Motion -------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .hero [data-hero] { opacity: 0; transform: translateY(26px); animation: heroIn 1000ms var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
.js .hero__media[data-hero] { transform: scale(.97); animation-name: heroMedia; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes heroMedia { to { opacity: 1; transform: none; } }
.to-top { display: inline-flex; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-reveal], .js .hero [data-hero] { opacity: 1; transform: none; }
  .fx-ring, .fx-link { animation: none; } .fx-ring { opacity: .5; transform: scale(.7); }
  .xv-wrap .xv { --gap: 90px; }
}

/* 21 ── Rechtsseiten ----------------------------------------------------- */
.legal { padding-top: calc(var(--header-h) + var(--sp-8)); padding-bottom: var(--sp-9); }
.legal .container { max-width: var(--container-narrow); }
.legal h1 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.05; letter-spacing: var(--tracking-display); margin-bottom: var(--sp-5); }
.legal h2 { font-family: var(--font-display); font-size: var(--fs-h3); margin: var(--sp-7) 0 var(--sp-3); letter-spacing: -.02em; }
.legal h3 { font-family: var(--font-display); font-size: var(--fs-h4); margin: var(--sp-5) 0 var(--sp-2); }
.legal p, .legal address { margin-bottom: var(--sp-4); color: var(--c-text-soft); font-style: normal; }
.legal p strong, .legal address strong { color: var(--c-text); }
.legal a { color: var(--c-accent-text); }
.legal .back { display: inline-flex; margin-bottom: var(--sp-6); }

/* Hero → erste Sektion: engerer Übergang */
.hero + .section { padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }