/* Motion Estate — static rebuild
   Design tokens ported 1:1 from the original Lovable/Tailwind build.

   Schriften werden SELBST GEHOSTET (Ordner /fonts, SIL Open Font License).
   Grund: eine Einbindung über fonts.googleapis.com überträgt die IP-Adresse
   jedes Besuchers an Google — das LG München I hat das am 20.01.2022
   (Az. 3 O 17493/20) als DSGVO-Verstoß gewertet und Schadensersatz zugesprochen.
   Lokale Dateien vermeiden das komplett und laden zusätzlich schneller,
   weil die Kette CSS → @import → externer Server entfällt. */

/* Archivo — Fließtext/UI */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/archivo-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/archivo-ext-400.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/archivo-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/archivo-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/archivo-ext-500.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/archivo-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/archivo-ext-600.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/archivo-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/archivo-ext-700.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Big Shoulders Display — Headlines */
@font-face {
  font-family: "Big Shoulders Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/bigshoulders-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Big Shoulders Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/bigshoulders-ext-600.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/bigshoulders-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/bigshoulders-ext-700.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/bigshoulders-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/bigshoulders-ext-800.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Big Shoulders Display"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("../fonts/bigshoulders-900.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Big Shoulders Display"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("../fonts/bigshoulders-ext-900.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Zuerst Hex/RGBA, danach dieselben Werte in oklch.
     Grund: oklch und color-mix gibt es erst ab Chrome 111 / Safari 16.2 / Firefox 113.
     Ohne Rückfall wäre in älteren Browsern JEDES Farbtoken ungültig — die Seite
     stünde schwarz auf weiß ohne Hintergrund da. So bekommen alte Browser die
     Hex-Werte, neue überschreiben sie mit den exakteren oklch-Farben. */
  --background: #0b0c0e;
  --foreground: #fafafa;
  --card: #141619;
  --card-foreground: #fafafa;
  --popover: #101113;
  --primary: #dcdcdd;
  --primary-foreground: #0b0c0e;
  --secondary: #1a1c1f;
  --secondary-foreground: #fafafa;
  --muted: #1a1c1f;
  --muted-foreground: #92959a;
  --accent: #dcdcdd;
  --accent-foreground: #0b0c0e;
  --border: rgba(255, 255, 255, 0.1);
  --input: rgba(255, 255, 255, 0.12);
  --ring: #dcdcdd;

  --background: oklch(0.13 0.004 265);
  --foreground: oklch(0.98 0.002 265);
  --card: oklch(0.17 0.004 265);
  --card-foreground: oklch(0.98 0.002 265);
  --popover: oklch(0.15 0.004 265);
  --primary: oklch(0.88 0.002 265);
  --primary-foreground: oklch(0.13 0.004 265);
  --secondary: oklch(0.2 0.004 265);
  --secondary-foreground: oklch(0.98 0.002 265);
  --muted: oklch(0.2 0.004 265);
  --muted-foreground: oklch(0.64 0.005 265);
  --accent: oklch(0.88 0.002 265);
  --accent-foreground: oklch(0.13 0.004 265);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 12%);
  --ring: oklch(0.88 0.002 265);

  --font-sans: "Archivo", system-ui, sans-serif;
  --font-display: "Big Shoulders Display", "Archivo", system-ui, sans-serif;
  --gradient-gold: linear-gradient(100deg, #55585d 0%, #9ea2a8 45%, #ffffff 100%);
  --gold: #d3b164;
  --gold-soft: rgba(211, 177, 100, 0.45);
  --gold-faint: rgba(211, 177, 100, 0.22);
  --gold-soft: color-mix(in oklab, var(--gold) 45%, transparent);
  /* Zahlen sind Text und brauchen Mindestkontrast — Linien dürfen leiser bleiben */
  --gold-label: rgba(211, 177, 100, 0.78);
  --gold-label: color-mix(in oklab, var(--gold) 78%, transparent);
  --gold-faint: color-mix(in oklab, var(--gold) 22%, transparent);
  --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);

  --container: 1600px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@supports (scroll-behavior: auto) {
  html[data-luxury-scroll="true"] { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, textarea { font-family: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .wrap { padding: 0 48px; } }

/* Type utilities — ported from @utility display-xl / ghost-kicker / text-gold-gradient */
.display-xl {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.01em;
}
.ghost-kicker {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgba(250, 250, 250, 0.48);
  color: color-mix(in oklab, var(--foreground) 48%, transparent);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ghost-kicker::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: rgba(250, 250, 250, 0.42);
  background: color-mix(in oklab, var(--foreground) 42%, transparent);
}
.text-gold-gradient {
  background-image: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-title { margin: 20px 0 0; }
.section-title .thin { display: block; font-weight: 600; color: var(--muted-foreground); }
.section-title .bold { display: block; }

.muted { color: var(--muted-foreground); }

/* Buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 28px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .35s var(--ease-luxury), color .35s var(--ease-luxury),
    border-color .35s var(--ease-luxury), transform .45s var(--ease-luxury),
    box-shadow .45s var(--ease-luxury);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, transparent 20%, color-mix(in oklab, var(--gold) 55%, white 20%) 50%, transparent 80%);
  opacity: 0;
  transform: translateX(-120%);
  transition: transform .8s var(--ease-luxury), opacity .3s ease;
  pointer-events: none;
}
.btn:hover::before { opacity: .35; transform: translateX(120%); }
.btn > * { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -18px rgba(0,0,0,.55); }
.btn:active { transform: translateY(0) scale(.96); box-shadow: 0 4px 14px -10px rgba(0,0,0,.5); transition-duration: .12s; }
.btn-filled { background: var(--primary); color: var(--primary-foreground); }
.btn-filled:hover { background: var(--foreground); }
.btn-outline { background: transparent; border-color: color-mix(in oklab, var(--foreground) 30%, transparent); color: var(--foreground); }
.btn-outline:hover { border-color: var(--gold); }
.btn-block { width: 100%; }
.btn-ripple {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in oklab, var(--gold) 70%, white) 0%, transparent 70%);
  animation: btnRipple .7s var(--ease-luxury) forwards;
}
.btn-filled .btn-ripple { background: radial-gradient(circle, rgba(0,0,0,.28) 0%, transparent 70%); }
@keyframes btnRipple {
  to { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn::before, .btn-ripple { display: none; }
  .btn:hover, .btn:active { transform: none; }
}

/* ===========================================================
   Reveal-System
   Ein einziges Vokabular für alles, was beim Scrollen auftaucht.
   JS vergibt data-rev="<typ>" + --i (Reihenfolge im Block);
   ohne JS ist kein Attribut gesetzt → alles sofort sichtbar.
   Typen: kicker | mask | rise | image | group
   =========================================================== */
:root {
  --rev-dur: 1.05s;
  --rev-step: 85ms;
}
[data-rev] { --i: 0; }
[data-rev="group"] { opacity: 1; }

/* rise — Standard: Blöcke, Karten, Fließtext */
[data-rev="rise"] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--rev-dur) var(--ease-luxury), transform var(--rev-dur) var(--ease-luxury);
  transition-delay: calc(var(--i) * var(--rev-step));
}
[data-rev="rise"][data-visible="true"] { opacity: 1; transform: none; }

/* kicker — Haarlinie wächst nach rechts, Label blendet auf */
[data-rev="kicker"] {
  opacity: 0;
  transition: opacity .75s var(--ease-luxury);
  transition-delay: calc(var(--i) * var(--rev-step));
}
[data-rev="kicker"][data-visible="true"] { opacity: 1; }
[data-rev="kicker"]::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .95s var(--ease-luxury);
  transition-delay: calc(var(--i) * var(--rev-step));
}
[data-rev="kicker"][data-visible="true"]::before { transform: scaleX(1); }

/* mask — Headline-Zeile fährt hinter einer Kante hoch (Kernbewegung der Seite) */
[data-rev="mask"] {
  display: block;
  overflow: hidden;
  /* Platz für Unterlängen/Umlaute, damit die Kante nichts abschneidet */
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
[data-rev="mask"] .rev-line {
  display: block;
  transform: translateY(110%);
  transition: transform 1.15s var(--ease-luxury);
  transition-delay: calc(var(--i) * var(--rev-step));
}
[data-rev="mask"][data-visible="true"] .rev-line { transform: translateY(0); }

/* image — Bild beruhigt sich aus einer leichten Übergröße heraus */
[data-rev="image"] { opacity: 0; transition: opacity 1.2s var(--ease-luxury); transition-delay: calc(var(--i) * var(--rev-step)); }
[data-rev="image"][data-visible="true"] { opacity: 1; }
[data-rev="image"] img, [data-rev="image"] > span {
  transform: scale(1.06);
  transition: transform 1.6s var(--ease-luxury);
  transition-delay: calc(var(--i) * var(--rev-step));
}
[data-rev="image"][data-visible="true"] img, [data-rev="image"][data-visible="true"] > span { transform: scale(1); }

/* Sprachwechsel: neu gerenderte, bereits sichtbare Elemente ohne Nachanimation zeigen */
[data-rev][data-instant="true"],
[data-rev][data-instant="true"] .rev-line,
[data-rev][data-instant="true"] img,
[data-rev][data-instant="true"]::before { transition: none !important; }

/* Fortschritts-Haarlinie an der Header-Unterkante */
.scroll-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px; width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background-image: linear-gradient(90deg, transparent, var(--gold-soft) 40%, var(--gold));
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-rev], [data-rev] .rev-line, [data-rev] img, [data-rev] > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-rev="kicker"]::before { transform: scaleX(1) !important; }
  .scroll-progress { display: none; }
  html { scroll-behavior: auto; }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: rgba(11, 12, 14, 0.88);
  background: color-mix(in oklab, var(--background) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 1024px) { .site-header { padding: 24px 48px; } }
/* am Seitenanfang schwebt der Header rahmenlos über dem Bild, danach setzt er sich ab */
.site-header[data-scrolled="false"] { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.site-header { transition: background-color .6s var(--ease-luxury), border-color .6s var(--ease-luxury); }
.menu-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.menu-toggle .bars { display: inline-flex; flex-direction: column; gap: 4px; }
.menu-toggle .bars span { width: 20px; height: 1.5px; background: var(--foreground); display: block; }

/* Brand mark — emblem/crest treatment inspired by automotive badges (Ferrari shield / Lamborghini shield) */
.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  background:
    radial-gradient(circle at 50% 28%, color-mix(in oklab, var(--card) 92%, transparent) 0%, var(--background) 78%);
  overflow: hidden;
  transition: transform .5s var(--ease-luxury), border-color .5s var(--ease-luxury), box-shadow .5s var(--ease-luxury);
}
.brand::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(from 0deg, transparent 0%, var(--gold-faint) 15%, transparent 30%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .5s ease;
}
.brand::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(115deg, transparent, color-mix(in oklab, var(--gold) 60%, white 25%), transparent);
  opacity: 0;
  transform: skewX(-18deg);
  transition: transform .9s var(--ease-luxury), opacity .3s ease;
}
.brand:hover { transform: scale(1.07); border-color: var(--gold); box-shadow: 0 6px 22px -8px color-mix(in oklab, var(--gold) 45%, transparent); }
.brand:hover::before { opacity: 1; }
.brand:hover::after { left: 140%; opacity: .8; }
.brand img { position: relative; z-index: 1; height: 21px; width: auto; }
@media (min-width: 1024px) { .brand { width: 56px; height: 56px; } .brand img { height: 23px; } }
@media (prefers-reduced-motion: reduce) {
  .brand, .brand::after { transition: none; }
}
.lang-toggle { display: flex; gap: 10px; font-size: 12px; letter-spacing: 0.1em; }
.lang-toggle button { opacity: .4; text-transform: uppercase; }
.lang-toggle button.active { opacity: 1; }

/* Mobile nav overlay */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--background);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 48px;
  transform: translateY(-100%);
  transition: transform .35s ease;
}
.mobile-nav[data-open="true"] { transform: translateY(0); }
.mobile-nav .close-btn { position: absolute; top: 24px; right: 24px; font-size: 24px; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 20px; }
.mobile-nav a { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(32px, 8vw, 56px); }
/* Die Einträge laufen versetzt ein, statt schlagartig dazustehen */
.mobile-nav li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease-luxury), transform .5s var(--ease-luxury);
}
.mobile-nav[data-open="true"] li { opacity: 1; transform: translateY(0); }
.mobile-nav[data-open="true"] li:nth-child(1) { transition-delay: .16s; }
.mobile-nav[data-open="true"] li:nth-child(2) { transition-delay: .22s; }
.mobile-nav[data-open="true"] li:nth-child(3) { transition-delay: .28s; }
.mobile-nav[data-open="true"] li:nth-child(4) { transition-delay: .34s; }
.mobile-nav[data-open="true"] li:nth-child(5) { transition-delay: .40s; }
.mobile-nav a { display: inline-block; transition: color .35s var(--ease-luxury), transform .45s var(--ease-luxury); }
.mobile-nav a:hover { color: var(--gold); transform: translateX(10px); }

/* Feines Filmkorn über der ganzen Seite — nimmt Farbflächen das Digitale
   und passt zu einem Video-Geschäft. Bewusst sehr schwach dosiert. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav li { opacity: 1; transform: none; transition: none; }
  .mobile-nav a:hover { transform: none; }
}

/* Hero */
.hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  /* mittig: links Meer und Horizont, rechts Villa und Zypressen bleiben im Bild */
  object-position: 50% 50%;
  /* nur so viel Übergröße wie der Parallax-Versatz braucht — jedes Prozent mehr
     schneidet Meer und Zypressen ab */
  transform: scale(1.035);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .hero-media img { transform: none; } }
/* Zurückhaltender Abdunkler: das Foto soll sichtbar bleiben — Meer, Horizont und
   Terrasse inklusive. Die Lesbarkeit der Schrift übernimmt überwiegend die
   Schattenkante am Text selbst (siehe .hero-content), nicht ein flächiger Schleier.
   Nur direkt unter dem Textblock wird von unten sanft abgedunkelt. */
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  /* Rückfall für Browser ohne color-mix — ohne ihn läge die Headline
     ungeschützt auf dem hellen Foto */
  background:
    linear-gradient(90deg, rgba(11,12,14,.46) 0%, rgba(11,12,14,.22) 30%, rgba(11,12,14,0) 58%),
    linear-gradient(180deg, rgba(11,12,14,.30) 0%, rgba(11,12,14,0) 22%, rgba(11,12,14,0) 46%, rgba(11,12,14,.48) 82%, #0b0c0e 100%);
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--background) 46%, transparent) 0%,
      color-mix(in oklab, var(--background) 22%, transparent) 30%,
      transparent 58%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--background) 30%, transparent) 0%,
      transparent 22%,
      transparent 46%,
      color-mix(in oklab, var(--background) 48%, transparent) 82%,
      var(--background) 100%);
}
/* Schmale Bildschirme: das Bild füllt hochkant die ganze Höhe, die helle Fassade landet
   dadurch zwangsläufig hinter der Headline. Statt sie wegzudunkeln, bekommt das Bild
   die obere Hälfte und der Text einen ruhigen Grund darunter — Foto bleibt ganz sichtbar,
   Schrift steht sauber. */
@media (max-width: 700px) {
  .hero-media { bottom: auto; height: 52%; }
  .hero-media img { object-position: 50% 50%; }
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(11,12,14,.38) 0%, rgba(11,12,14,0) 26%, rgba(11,12,14,.55) 74%, #0b0c0e 100%);
    background:
      linear-gradient(180deg,
        color-mix(in oklab, var(--background) 38%, transparent) 0%,
        transparent 26%,
        color-mix(in oklab, var(--background) 55%, transparent) 74%,
        var(--background) 100%);
  }
  .hero-content { padding-bottom: 64px; }
  .hero-content .display-xl { margin: 14px 0 20px; }
  .hero-content .sub { margin-bottom: 32px; }
}
.hero-content { position: relative; z-index: 1; padding: 0 24px 96px; width: 100%; }
@media (min-width: 1024px) { .hero-content { padding: 0 48px 140px; } }
/* Schattenkante statt Schleier: hält die Schrift auch über hellen Bildstellen lesbar,
   ohne das Foto flächig zuzudecken */
.hero-content .ghost-kicker { text-shadow: 0 2px 18px rgba(0,0,0,.85); }
.hero-content .display-xl {
  font-size: clamp(40px, 8vw, 96px); margin: 16px 0 24px;
  text-shadow: 0 4px 34px rgba(0,0,0,.7), 0 1px 8px rgba(0,0,0,.55);
}
.hero-content .sub {
  max-width: 520px; color: var(--foreground); opacity: .88; font-size: 17px; margin-bottom: 40px;
  text-shadow: 0 2px 16px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.6);
}
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* Trust bar */
.trust-bar { border-top: 1px solid var(--border); }
.trust-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 700px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item { padding: 48px 32px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.trust-item .num { font-family: var(--font-display); font-weight: 800; color: var(--gold-label); font-size: 14px; }
.trust-item p { margin: 24px 0 0; text-transform: uppercase; font-size: 13px; letter-spacing: 0.04em; max-width: 16ch; }

/* Section shell */
.section { border-top: 1px solid var(--border); padding: 96px 0; }
@media (min-width: 1024px) { .section { padding: 140px 0; } }
.section-head { max-width: 720px; }

/* Process */
.process-grid { margin-top: 64px; display: grid; grid-template-columns: 1fr; }
@media (min-width: 700px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
.process-item { padding: 40px 0; border-top: 1px solid var(--border); }
.process-grid .process-item:nth-child(-n+2) { border-top: none; }
@media (min-width: 700px) { .process-item { padding: 40px 40px; } .process-grid .process-item:nth-child(odd) { padding-left: 0; } .process-grid .process-item:nth-child(even) { padding-right: 0; } }
.process-item .num { font-family: var(--font-display); font-size: 40px; font-weight: 800; color: var(--gold-label); }
.process-item h3 { margin: 16px 0 8px; text-transform: uppercase; font-size: 14px; letter-spacing: 0.06em; }
.process-item p { color: var(--muted-foreground); margin: 0; max-width: 34ch; }

/* Work / examples — echte Objektvideos im Reel-Format */
.work-note { color: var(--muted-foreground); margin-top: 16px; max-width: 46ch; }
/* Videos links, Spezifikation rechts — füllt die Breite mit Information
   statt mit Leere und bringt den Abschluss-CTA genau dorthin, wo der
   Besucher gerade die Arbeit gesehen hat. */
.work-layout {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}
@media (min-width: 1024px) {
  .work-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 80px; align-items: start; }
}
.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  justify-content: start;
}
@media (min-width: 700px) {
  /* zwei Reels nebeneinander, bewusst begrenzt — sonst werden sie auf großen
     Bildschirmen absurd hoch (9:16 skaliert schnell) */
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; max-width: 820px; }
}
.work-card { margin: 0; display: flex; flex-direction: column; gap: 18px; }

/* Nummerierung wie in Trust-Leiste und Ablauf — hält die Bildsprache zusammen */
.work-card-head { display: flex; align-items: center; gap: 16px; }
.work-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; color: var(--gold-label); letter-spacing: .04em;
}
.work-rule { flex: 1; height: 1px; background: var(--border); transition: background-color .5s var(--ease-luxury); }
.work-card:hover .work-rule { background: var(--gold-faint); }

/* Spezifikationsspalte */
.work-spec { display: flex; flex-direction: column; }
@media (min-width: 1024px) { .work-spec { position: sticky; top: 140px; } }
.work-spec ul { margin: 24px 0 36px; display: flex; flex-direction: column; gap: 14px; }
.work-spec li { display: flex; gap: 12px; font-size: 14px; color: var(--muted-foreground); line-height: 1.6; }
.work-spec .bullet-gradient { margin-top: 11px; }
.work-video {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--card);
  overflow: hidden;
  border: 1px solid transparent;
  transition: transform .6s var(--ease-luxury), box-shadow .6s var(--ease-luxury), border-color .5s var(--ease-luxury);
}
.work-video::before {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  border: 1px solid var(--gold-faint);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.work-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.work-card:hover .work-video {
  transform: translateY(-6px);
  box-shadow: 0 32px 70px -34px rgba(0,0,0,.7);
}
.work-card:hover .work-video::before { opacity: 1; }

/* Ton-Schalter */
.sound-toggle {
  position: absolute; z-index: 3;
  right: 14px; bottom: 14px;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in oklab, var(--foreground) 28%, transparent);
  background: color-mix(in oklab, var(--background) 62%, transparent);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  transition: border-color .35s var(--ease-luxury), background-color .35s var(--ease-luxury), transform .35s var(--ease-luxury);
}
.sound-toggle:hover { border-color: var(--gold); transform: scale(1.07); }
.sound-toggle:active { transform: scale(.94); }
/* Ton-Symbol als SVG — saubere Kanten in jeder Auflösung */
.sound-toggle svg { width: 17px; height: 17px; display: block; }
.sound-toggle svg .wave { transition: opacity .25s ease; }
.sound-toggle svg .slash { stroke: var(--gold); opacity: 0; transition: opacity .25s ease; }
.sound-toggle[data-sound="off"] .wave { opacity: 0; }
.sound-toggle[data-sound="off"] .slash { opacity: 1; }
.sound-toggle[data-sound="on"] { border-color: var(--gold-soft); }

.work-card figcaption { display: flex; flex-direction: column; gap: 10px; }
.work-card-title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 19px; letter-spacing: .01em; line-height: 1;
}
.work-card-meta {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 12px; color: var(--muted-foreground);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.work-card-meta .bullet-gradient { margin-top: 7px; }

@media (prefers-reduced-motion: reduce) {
  .work-video, .sound-toggle { transition: none; }
  .work-card:hover .work-video { transform: none; }
}

/* Pricing plan strip */
.plans-grid { margin-top: 64px; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); }
@media (min-width: 700px) { .plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .plans-grid { grid-template-columns: repeat(4, 1fr); } }
.plan-card {
  position: relative;
  background: var(--background);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid transparent;
  transition: background-color .5s var(--ease-luxury), transform .6s var(--ease-luxury),
    box-shadow .6s var(--ease-luxury), border-color .5s var(--ease-luxury);
}
.plan-card::before {
  /* fine hairline that brightens to gold on hover, echoing an emblem's edge */
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold-faint);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.plan-card::after {
  /* diagonal shine sweep.
     Careful with the skew: on a card-height element a steep angle shears the bottom
     edge back by ~(height/2 * tan(angle)), which is why a too-small translate leaves
     a wedge parked at the right edge. -8deg + 700% clears the card completely. */
  content: "";
  position: absolute;
  top: -20%; bottom: -20%; left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, color-mix(in oklab, var(--gold) 28%, white 12%), transparent);
  opacity: 0;
  transform: skewX(-8deg) translateX(0);
  transition: transform 1.2s var(--ease-luxury), opacity .35s ease;
  pointer-events: none;
}
.plan-card:hover {
  background: var(--card);
  transform: translateY(-8px);
  box-shadow: 0 32px 70px -32px rgba(0,0,0,.65);
}
.plan-card:hover::before { opacity: 1; }
.plan-card:hover::after { opacity: .5; transform: skewX(-8deg) translateX(700%); }
.plan-card h3 { font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 40px; font-weight: 500; font-family: var(--font-sans); }
.plan-card .price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  text-transform: uppercase;
  background-image: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.plan-card .unit { color: var(--muted-foreground); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin: 12px 0 40px; display: block; }
.plan-card ul { flex: 1; margin-bottom: 48px; display: flex; flex-direction: column; gap: 12px; }
.plan-card li { display: flex; gap: 12px; font-size: 14px; color: var(--muted-foreground); }
.bullet-gradient { display: inline-block; flex-shrink: 0; width: 16px; height: 1px; margin-top: 9px; background-image: var(--gradient-gold); transition: width .4s var(--ease-luxury); }
.plan-card:hover .bullet-gradient { width: 24px; }
.plan-card .btn { border-color: color-mix(in oklab, var(--foreground) 30%, transparent); text-align: center; }
.plan-card .btn:hover { border-color: var(--gold); background: var(--foreground); color: var(--background); }
@media (prefers-reduced-motion: reduce) {
  .plan-card, .plan-card::after { transition: none; }
  .plan-card:hover { transform: none; }
}

/* Calculator */
.calculator { border-top: 1px solid var(--border); margin-top: 96px; padding-top: 96px; }
.calc-grid { margin-top: 64px; display: grid; grid-template-columns: 1fr; background: var(--border); gap: 1px; }
@media (min-width: 1024px) { .calc-grid { grid-template-columns: 1fr 1fr; } }
.calc-inputs, .calc-summary { background: var(--background); padding: 40px 32px; }
@media (min-width: 1024px) { .calc-inputs, .calc-summary { padding: 56px; } }
.calc-summary { background: var(--card); }
.field-label { font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--muted-foreground); margin: 0; }
.videos-display { margin-top: 32px; display: flex; align-items: flex-end; gap: 24px; }
.videos-display .big-num { font-family: var(--font-display); font-weight: 800; font-size: 72px; line-height: 1; }
.videos-display .unit-note { margin-bottom: 12px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-foreground); }
input[type="range"] {
  width: 100%;
  margin-top: 32px;
  appearance: none;
  height: 1px;
  background: var(--border);
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--foreground);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--foreground); border: none; cursor: pointer;
}
.slider-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted-foreground); margin-top: 8px; }
.tiers { margin-top: 40px; }
.tiers .field-label { margin-bottom: 16px; }
.tier-row { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--border); font-size: 14px; }
.tier-row:first-of-type { border-top: none; }
.tier-row.active { color: var(--foreground); font-weight: 600; }
.tier-row:not(.active) { color: var(--muted-foreground); }
.tier-note { margin-top: 16px; color: var(--muted-foreground); font-size: 13px; }
.addons { margin-top: 40px; display: flex; flex-direction: column; gap: 1px; background: var(--border); }
.addon-row { background: var(--background); display: flex; align-items: center; justify-content: space-between; padding: 20px 0; cursor: pointer; }
.addon-row .addon-text strong { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: 0.02em; }
.addon-row .addon-text span { font-size: 12px; color: var(--muted-foreground); }
.toggle { position: relative; width: 40px; height: 22px; border: 1px solid var(--border); flex-shrink: 0; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--muted-foreground); transition: transform .2s ease, background .2s ease; }
.addon-row[data-on="true"] .toggle::after { transform: translateX(18px); background: var(--foreground); }

.calc-summary .eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); margin: 0; }
.calc-summary h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: 22px; margin: 12px 0 24px; }
.total-price { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 6vw, 72px); line-height: 1; }
.total-unit { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); }
.calc-divider { border: none; border-top: 1px solid var(--border); margin: 32px 0; }
.calc-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14px; }
.calc-row.total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 16px; font-weight: 700; }
.calc-row .lbl { color: var(--muted-foreground); }
.delivery-block { margin: 32px 0; }
.delivery-block .field-label { margin-bottom: 8px; }
.delivery-block .date { font-size: 18px; }
.plans-note { margin-top: 24px; color: var(--muted-foreground); font-size: 13px; max-width: 62ch; }
.calc-note { margin-top: 16px; color: var(--muted-foreground); font-size: 12px; }

/* About */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; } }
.about-photo { aspect-ratio: 4/5; background: var(--card); display: flex; align-items: center; justify-content: center; }
/* Solange kein Foto da ist: Monogramm statt "Foto folgt" — wirkt gewollt, nicht unfertig.
   Sobald assets/about-jannis.jpg existiert, blendet das onload am <img> dieses Element aus. */
.about-photo {
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(211, 177, 100, 0.07), transparent 60%),
    var(--card);
}
.about-monogram { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.about-monogram .mono {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(56px, 8vw, 96px); letter-spacing: 0.02em;
  width: 2em; height: 2em; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold-soft);
  color: var(--gold);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .about-monogram .mono {
    background: var(--gradient-gold);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
}
.about-monogram .mono-cap { color: var(--muted-foreground); font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-text p.body { color: var(--muted-foreground); margin: 24px 0 40px; max-width: 52ch; font-size: 17px; }
.about-signature { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: 22px; color: color-mix(in oklab, var(--foreground) 60%, transparent); }

/* FAQ */
.accordion { margin-top: 48px; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 24px 0; text-transform: uppercase; font-size: 14px; letter-spacing: 0.04em; text-align: left; }
.faq-q .chevron { transition: transform .2s ease; color: var(--muted-foreground); }
.faq-item[data-open="true"] .chevron { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item[data-open="true"] .faq-a { max-height: 240px; }
.faq-a p { margin: 0 0 24px; color: var(--muted-foreground); max-width: 60ch; }

/* Contact */
.contact-sub { color: var(--muted-foreground); margin-top: 16px; max-width: 48ch; }
.whatsapp-link { margin-top: 32px; }
form#contactForm { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 700px) { form#contactForm { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.field { border-bottom: 1px solid var(--border); padding: 20px 0; }
.field label { display: block; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 8px; }
.field input, .field textarea { width: 100%; background: transparent; border: none; color: var(--foreground); font-size: 16px; outline: none; }
/* outline:none oben nimmt Tastaturnutzern die Orientierung — hier gezielt zurückgeben */
.field:focus-within { border-bottom-color: var(--gold); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 4px;
}
.field textarea { resize: vertical; min-height: 80px; }
.field.full { grid-column: 1 / -1; }
.form-actions { grid-column: 1 / -1; margin-top: 32px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.form-hint { color: var(--muted-foreground); font-size: 13px; margin: 0; }

/* Spam-Falle: muss für Menschen unsichtbar, für Bots aber ausfüllbar bleiben */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* Einwilligung */
.consent { grid-column: 1 / -1; margin-top: 28px; }
.consent-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.consent-row input[type="checkbox"] {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--gold);
  cursor: pointer;
}
.consent-row span { font-size: 13px; color: var(--muted-foreground); line-height: 1.6; }
.consent-row a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
.consent-row a:hover { color: var(--gold); }

/* Rückmeldung nach dem Absenden */
.form-status { margin: 0; font-size: 14px; line-height: 1.6; max-width: 52ch; min-height: 1px; }
.form-status[data-state="pending"] { color: var(--muted-foreground); }
.form-status[data-state="success"] {
  color: var(--foreground);
  border-left: 2px solid var(--gold);
  padding-left: 14px;
}
.form-status[data-state="error"] {
  color: var(--foreground);
  border-left: 2px solid color-mix(in oklab, #e5484d 70%, transparent);
  padding-left: 14px;
}
.form-status a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* Footer-Rechtslinks */
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted-foreground);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease-luxury), border-color .3s var(--ease-luxury);
}
.footer-links a:hover { color: var(--foreground); border-bottom-color: var(--gold-soft); }
.footer-imprint a { color: inherit; border-bottom: 1px solid transparent; transition: border-color .3s ease; }
.footer-imprint a:hover { border-bottom-color: var(--gold-soft); }

/* ===== Rechtsseiten (Impressum, Datenschutz) ===== */
.legal-page { padding: 56px 0 120px; max-width: 820px; }
.legal-page h1 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(36px, 6vw, 64px); line-height: .9; margin: 0 0 12px;
}
.legal-page h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 22px; letter-spacing: .01em; margin: 48px 0 16px;
  padding-top: 24px; border-top: 1px solid var(--border);
}
.legal-page h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin: 28px 0 8px; }
.legal-page p, .legal-page li { color: var(--muted-foreground); font-size: 15px; line-height: 1.75; }
.legal-page ul { margin: 12px 0; padding-left: 0; }
.legal-page li { position: relative; padding-left: 26px; margin-bottom: 8px; list-style: none; }
.legal-page li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 14px; height: 1px; background-image: var(--gradient-gold);
}
.legal-page a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
.legal-page a:hover { color: var(--gold); }
.legal-page .lead { color: var(--foreground); font-size: 17px; max-width: 56ch; }
.legal-back {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 40px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground);
  transition: color .3s var(--ease-luxury), gap .3s var(--ease-luxury);
}
.legal-back:hover { color: var(--foreground); gap: 16px; }
.legal-table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 14px; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.legal-table th { color: var(--foreground); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }
.legal-table td { color: var(--muted-foreground); }
.legal-date { margin-top: 40px; font-size: 13px; color: var(--muted-foreground); }
.legal-note {
  margin-top: 56px; padding: 24px 28px;
  border: 1px solid var(--gold-faint);
  background: var(--card);
}
.legal-note p { color: var(--foreground); margin: 0; font-size: 14px; }
.legal-note strong { color: var(--gold); }
.todo { color: var(--gold); font-weight: 600; }

/* Footer */
footer { border-top: 1px solid var(--border); padding: 64px 0 32px; }
.footer-grid { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 700px) { .footer-grid { flex-direction: row; justify-content: space-between; align-items: flex-start; } }
.footer-logo { height: 30px; width: auto; opacity: .8; }
.footer-imprint p { margin: 4px 0; color: var(--muted-foreground); font-size: 14px; }
.footer-imprint .label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; color: var(--foreground); margin-bottom: 8px; }
.copyright { margin-top: 48px; color: var(--muted-foreground); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }

:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }