/* ============================================================
   MONACO — Design-System "Monte Carlo"
   Art déco trifft Neon. Gold und Pink auf Schwarz.
   Grundregel: kein einziger runder Radius. Kanten sind gefast.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --void:   #000000;
  --ink:    #050308;
  --pitch:  #0a0710;
  --coal:   #100b18;

  --gold:      #c9a227;
  --gold-hi:   #f2dfa0;
  --gold-deep: #6d5210;
  --gold-leaf: linear-gradient(112deg, #6d5210 0%, #c9a227 18%, #f2dfa0 38%, #fffbe8 48%, #e2c667 60%, #8a6a17 82%, #c9a227 100%);

  --pink:      #ff1e7a;
  --pink-hi:   #ff7ab0;
  --pink-deep: #9c0243;
  --neon:      0 0 4px rgba(255,30,122,.9), 0 0 18px rgba(255,30,122,.6), 0 0 48px rgba(255,30,122,.35);
  --neon-gold: 0 0 4px rgba(242,223,160,.85), 0 0 20px rgba(201,162,39,.5), 0 0 54px rgba(109,82,16,.4);

  --bone:  #ece4d4;
  --dust:  rgba(236,228,212,.58);
  --ash:   rgba(236,228,212,.34);
  --rule:  rgba(201,162,39,.28);
  --rule-2:rgba(236,228,212,.10);

  /* Wortmarke: bleibt klassisch, trägt den Hero und das Logo */
  --wordmark: "Marcellus", "Trajan Pro", Georgia, serif;
  /* Überschriften: moderne Displayschrift */
  --display: "Syne", "Jost", system-ui, sans-serif;
  --text:    "Jost", "Futura", system-ui, sans-serif;
  --script:  "Monsieur La Doulaise", cursive;
}

/* Alternative Anzeigeschriften */
html[data-font="syne"]      { --display: "Syne", sans-serif; }
html[data-font="unbounded"]  { --display: "Unbounded", sans-serif; }
html[data-font="marcellus"] { --display: "Marcellus", Georgia, serif; }
html[data-font="tenor"]     { --display: "Tenor Sans", "Optima", sans-serif; }

:root {

  --shell: 1560px;
  --gut:   clamp(18px, 4.5vw, 68px);
  --bar:   78px;

  --notch:    polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  --notch-sm: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);

  --ease:  cubic-bezier(.19, 1, .22, 1);
  --slow:  1.05s;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--text);
  font-weight: 300;
  font-size: clamp(15px, .5vw + 13.5px, 16.5px);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--pink); color: #fff; }

:focus-visible { outline: 1px solid var(--gold-hi); outline-offset: 4px; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--gold-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ---------- Typografie ---------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  margin: 0 0 .45em;
  letter-spacing: -.025em;
}

.d1 { font-family: var(--wordmark); font-weight: 400; font-size: clamp(2.6rem, 7.6vw, 7.6rem); letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
.d2 { font-size: clamp(1.9rem, 4.2vw, 3.7rem); letter-spacing: -.03em; line-height: 1.02; }
.d3 { font-size: clamp(1.3rem, 2.1vw, 2rem);   letter-spacing: -.02em; }

/* Kapitälchen-Marke über Abschnitten */
.kicker {
  font-family: var(--text);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 1.5rem;
}
.kicker--rule { display: flex; align-items: center; gap: 18px; }
.kicker--rule::after {
  content: "";
  flex: 0 0 auto;
  width: clamp(30px, 6vw, 90px);
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.kicker--mid { justify-content: center; text-align: center; }
.kicker--mid::before {
  content: "";
  width: clamp(30px, 6vw, 90px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.lede { font-size: clamp(1rem, 1.05vw, 1.15rem); color: var(--dust); max-width: 60ch; }
.dim  { color: var(--dust); }

.leaf {
  background: var(--gold-leaf);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: leafShift 9s linear infinite;
}
@keyframes leafShift { to { background-position: 300% center; } }

/* Neon-Schriftzug */
.sign {
  font-family: var(--script);
  color: var(--pink-hi);
  text-shadow: var(--neon);
  line-height: .9;
  display: inline-block;
  padding: .12em .1em .2em;
}
.sign--gold { color: var(--gold-hi); text-shadow: var(--neon-gold); }
.sign[data-flicker] { opacity: 0; }
.sign.lit { animation: flicker 1.8s var(--ease) both; }
@keyframes flicker {
  0%   { opacity: 0; text-shadow: none; }
  8%   { opacity: 1; text-shadow: var(--neon); }
  12%  { opacity: .2; text-shadow: none; }
  19%  { opacity: 1; text-shadow: var(--neon); }
  24%  { opacity: .35; text-shadow: none; }
  31%  { opacity: 1; text-shadow: var(--neon); }
  38%  { opacity: .6; }
  46%  { opacity: 1; }
  100% { opacity: 1; text-shadow: var(--neon); }
}
.sign.lit.breathe { animation: flicker 1.8s var(--ease) both, breathe 4.5s ease-in-out 1.8s infinite; }
@keyframes breathe {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.35); }
}

/* ---------- Raster ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }

.band { position: relative; padding-block: clamp(78px, 10vw, 176px); }
.band--slim { padding-block: clamp(52px, 6vw, 104px); }
.band--pitch { background: var(--pitch); }
.band--edge { border-top: 1px solid var(--rule-2); }

.head { max-width: 760px; margin-bottom: clamp(38px, 5vw, 78px); }
.head--mid { margin-inline: auto; text-align: center; }

.cols { display: grid; gap: clamp(18px, 2vw, 30px); }
.cols--2 { grid-template-columns: repeat(2, 1fr); }
.cols--3 { grid-template-columns: repeat(3, 1fr); }
.cols--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .cols--4 { grid-template-columns: repeat(2, 1fr); } .cols--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .cols--2, .cols--3, .cols--4 { grid-template-columns: 1fr; } }

/* ---------- Déco-Bausteine ---------- */

/* Eckwinkel: acht Haarlinien, keine Rahmenbox */
.corners {
  position: relative;
  background-image:
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold));
  background-size: 22px 1px, 1px 22px, 22px 1px, 1px 22px, 22px 1px, 1px 22px, 22px 1px, 1px 22px;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
}

/* Doppelte Haarlinie als Rahmen */
.plate {
  position: relative;
  border: 1px solid var(--rule);
  background: linear-gradient(170deg, rgba(201,162,39,.05), rgba(0,0,0,0) 62%);
}
.plate::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(236,228,212,.08);
  pointer-events: none;
  transition: border-color .6s var(--ease);
}
.plate:hover::before { border-color: rgba(201,162,39,.4); }

/* Rautenzeichen als Trenner */
.lozenge {
  display: block;
  width: 9px; height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
  margin-inline: auto;
}
.rule-deco {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold);
  margin-block: 20px;
}
.rule-deco::before, .rule-deco::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule), transparent);
}

/* Strahlenfächer */
.rays {
  position: absolute;
  pointer-events: none;
  opacity: .3;
  animation: turn 120s linear infinite;
}
@keyframes turn { to { transform: rotate(360deg); } }

/* ---------- Schaltflächen ---------- */
.act {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  clip-path: var(--notch);
  background: var(--gold-leaf);
  background-size: 250% auto;
  color: var(--gold-hi);
  font-size: .69rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .55s var(--ease), background-position .8s var(--ease);
  isolation: isolate;
}
.act::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--ink);
  clip-path: var(--notch);
  transform-origin: right center;
  transition: transform .6s var(--ease);
}
.act:hover { color: var(--void); background-position: 100% center; }
.act:hover::before { transform: scaleX(0); }
.act:active { transform: translateY(1px); }
.act i, .act .glyph { font-size: .8em; transition: transform .5s var(--ease); }
.act:hover .glyph { transform: translateX(6px); }

.act--pink {
  background: linear-gradient(112deg, #9c0243, #ff1e7a 42%, #ff7ab0 58%, #ff1e7a 100%);
  background-size: 250% auto;
  color: var(--pink-hi);
}
.act--pink:hover { color: #fff; }

.act--bare {
  background: rgba(236,228,212,.22);
  color: var(--bone);
}
.act--bare:hover { color: var(--void); background: var(--gold-hi); }

/* Textlink mit Rautenspitze */
.thin {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  transition: color .4s, border-color .4s;
}
.thin::after {
  content: "";
  width: 6px; height: 6px;
  background: currentColor;
  transform: rotate(45deg);
  transition: transform .5s var(--ease);
}
.thin:hover { color: var(--gold-hi); border-color: var(--gold); }
.thin:hover::after { transform: rotate(45deg) translate(3px, -3px); }

/* ---------- Kopfleiste ---------- */
.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--bar);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 40px);
  padding-inline: clamp(14px, 3vw, 44px);
  transition: height .6s var(--ease), background .6s var(--ease);
  background: linear-gradient(to bottom, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 55%, transparent 100%);
}
.bar::after {
  content: "";
  position: absolute;
  left: clamp(14px, 3vw, 44px); right: clamp(14px, 3vw, 44px); bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule) 25%, var(--rule) 75%, transparent);
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.bar.fixed {
  height: 64px;
  background: rgba(5,3,8,.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.bar.fixed::after { opacity: 1; }

.mark { display: flex; flex-direction: column; line-height: 1; flex-shrink: 0; }
.mark__word {
  font-family: var(--wordmark);
  font-size: clamp(1.1rem, 1.5vw, 1.55rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  padding-left: .42em;
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
}
.mark__tag {
  font-size: .5rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ash);
  margin-top: 7px;
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
}

.bar__info {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 34px);
  margin-left: auto;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dust);
}
.bar__info a { transition: color .35s; }
.bar__info a:hover { color: var(--gold-hi); }
.bar__info .sep { width: 5px; height: 5px; background: var(--pink); transform: rotate(45deg); }
@media (max-width: 1150px) { .bar__info .opt { display: none; } }
@media (max-width: 720px)  { .bar__info { display: none; } }

/* Menüschalter: drei Goldlinien, keine Kreise */
.toggle {
  width: 44px; height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 7px;
  flex-shrink: 0;
}
.toggle span {
  display: block;
  height: 1px;
  background: var(--gold-hi);
  transition: width .5s var(--ease), transform .5s var(--ease), opacity .3s;
}
.toggle span:nth-child(1) { width: 26px; }
.toggle span:nth-child(2) { width: 18px; }
.toggle span:nth-child(3) { width: 22px; background: var(--pink); }
.toggle:hover span { width: 26px; }
.toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); width: 26px; }
.toggle.open span:nth-child(2) { opacity: 0; }
.toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); width: 26px; }

/* ---------- Menü ---------- */
.veil {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  background: var(--void);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s var(--ease);
  pointer-events: none;
}
.veil.open { clip-path: inset(0 0 0 0); pointer-events: auto; }
@media (max-width: 940px) { .veil { grid-template-columns: 1fr; } }

.veil__nav { align-self: center; width: 100%; max-height: 100svh; overflow-y: auto; padding: 104px var(--gut) 44px; }
.veil__nav li { overflow: hidden; border-bottom: 1px solid var(--rule-2); }
.veil__nav a {
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding-block: clamp(7px, .95vw, 13px);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.8rem);
  letter-spacing: -.02em;
  transform: translateY(115%);
  transition: transform .9s var(--ease), color .4s, letter-spacing .5s var(--ease);
}
.veil.open .veil__nav a { transform: none; }
.veil__nav li:nth-child(1) a { transition-delay: .12s; }
.veil__nav li:nth-child(2) a { transition-delay: .17s; }
.veil__nav li:nth-child(3) a { transition-delay: .22s; }
.veil__nav li:nth-child(4) a { transition-delay: .27s; }
.veil__nav li:nth-child(5) a { transition-delay: .32s; }
.veil__nav li:nth-child(6) a { transition-delay: .37s; }
.veil__nav li:nth-child(7) a { transition-delay: .42s; }
.veil__nav li:nth-child(8) a { transition-delay: .47s; }
.veil__nav a:hover { color: var(--gold-hi); letter-spacing: 0; }
.veil__nav .no {
  font-family: var(--text);
  font-size: .58rem;
  letter-spacing: .3em;
  color: var(--pink);
}

.veil__side {
  border-left: 1px solid var(--rule-2);
  background: var(--pitch);
  padding: 110px var(--gut) 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 34px;
}
@media (max-width: 940px) { .veil__side { display: none; } }
.veil__side h5 {
  font-family: var(--text);
  font-size: .6rem;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
}
.veil__side p, .veil__side a { color: var(--dust); font-size: .92rem; }
.veil__side a:hover { color: var(--gold-hi); }

/* ---------- Seitliche Sozialleiste ---------- */
.flank {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rule);
}
.flank a {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  color: var(--ash);
  font-size: .9rem;
  border-bottom: 1px solid var(--rule-2);
  transition: color .35s, background .35s, letter-spacing .35s;
}
.flank a:first-child { border-top: 1px solid var(--rule-2); }
.flank a:hover { color: var(--void); background: var(--gold); }
@media (max-width: 1100px) { .flank { display: none; } }

/* ---------- Bewegung ---------- */
.rise { opacity: 0; transform: translateY(34px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rise.on { opacity: 1; transform: none; }
.rise[data-lag="1"] { transition-delay: .1s; }
.rise[data-lag="2"] { transition-delay: .2s; }
.rise[data-lag="3"] { transition-delay: .3s; }
.rise[data-lag="4"] { transition-delay: .4s; }

/* Überschrift steigt auf */
.spread { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.spread.on { opacity: 1; transform: none; }

/* Zeilenaufbau */
.stack .ln { display: block; overflow: hidden; padding-bottom: .05em; }
.stack .ln > i { display: block; font-style: inherit; transform: translateY(108%); transition: transform 1.1s var(--ease); }
.stack.on .ln > i { transform: none; }
.stack.on .ln:nth-child(2) > i { transition-delay: .1s; }
.stack.on .ln:nth-child(3) > i { transition-delay: .2s; }

/* Goldblende schiebt vom Bild */
.wipe { position: relative; overflow: hidden; }
.wipe::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--gold-leaf);
  transform-origin: right;
  transition: transform 1.2s var(--ease);
  z-index: 2;
}
.wipe.on::after { transform: scaleX(0); }
.wipe img { transform: scale(1.15); transition: transform 1.8s var(--ease); }
.wipe.on img { transform: none; }

/* ---------- Ladefortschritt ---------- */
.tick {
  position: fixed;
  inset: 0 auto auto 0;
  height: 1px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-hi) 55%, var(--pink));
  z-index: 70;
}

/* ---------- Eintrittsprüfung (geteilter Schirm) ---------- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--void);
  transition: opacity .8s var(--ease), visibility .8s;
}
.gate.done { opacity: 0; visibility: hidden; }
@media (max-width: 860px) { .gate { grid-template-columns: 1fr; } }

.gate__art { position: relative; overflow: hidden; }
@media (max-width: 860px) { .gate__art { display: none; } }
.gate__art img, .gate__art video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.55) brightness(.5); }
.gate__art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(5,3,8,.95));
}

.gate__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 6vw, 90px);
  max-width: 640px;
}
.gate__body p { color: var(--dust); font-size: .88rem; line-height: 1.75; }
.gate__acts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* ---------- Fuß ---------- */
.foot { position: relative; background: var(--void); border-top: 1px solid var(--rule); }
.foot__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(26px, 3.5vw, 58px);
  padding-block: clamp(56px, 7vw, 104px);
}
@media (max-width: 1000px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .foot__grid { grid-template-columns: 1fr; } }

.foot h5 {
  font-family: var(--text);
  font-size: .6rem;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 20px;
}
.foot li + li { margin-top: 10px; }
.foot a { color: var(--dust); font-size: .9rem; transition: color .35s, letter-spacing .35s; }
.foot a:hover { color: var(--gold-hi); letter-spacing: .04em; }
.foot__times { display: flex; justify-content: space-between; gap: 14px; font-size: .87rem; color: var(--dust); }
.foot__times b { font-weight: 400; color: var(--bone); }
.foot__times.now b, .foot__times.now span { color: var(--pink-hi); }

.foot__crest {
  text-align: center;
  padding-block: clamp(26px, 4vw, 56px);
  border-top: 1px solid var(--rule-2);
}
.foot__crest span {
  font-family: var(--wordmark);
  font-size: clamp(1.6rem, 5vw, 3.4rem);
  letter-spacing: .7em;
  text-transform: uppercase;
  padding-left: .7em;
  color: var(--gold-deep);
}

.foot__legal {
  border-top: 1px solid var(--rule-2);
  padding-block: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--ash);
}
.foot__legal a:hover { color: var(--gold); }

/* ---------- Formularfelder ---------- */
.slot { position: relative; }
.slot input, .slot textarea, .slot select {
  width: 100%;
  padding: 17px 14px;
  background: rgba(236,228,212,.03);
  border: 1px solid var(--rule-2);
  color: var(--bone);
  font-family: var(--text);
  font-size: .96rem;
  transition: border-color .4s, background .4s;
}
.slot input::placeholder, .slot textarea::placeholder { color: var(--ash); }
.slot input:focus, .slot textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(201,162,39,.05);
}
.slot textarea { min-height: 130px; resize: vertical; }

/* ---------- Hinweise ---------- */
.note {
  padding: 16px 22px;
  border: 1px solid var(--rule-2);
  background: rgba(236,228,212,.03);
  font-size: .9rem;
}
.note.alert-success, .note-ok   { border-color: var(--rule); background: rgba(201,162,39,.07); }
.note.alert-error, .note.alert-danger, .note-bad { border-color: rgba(255,30,122,.5); background: rgba(255,30,122,.08); }
.alert { padding: 16px 22px; border: 1px solid var(--rule-2); background: rgba(236,228,212,.03); font-size: .9rem; }
.alert-success { border-color: var(--rule); }
.alert-error, .alert-danger { border-color: rgba(255,30,122,.5); }

/* ---------- Zugänglichkeit ---------- */
.hidden-note {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.jump {
  position: absolute; top: -100px; left: 14px;
  z-index: 300;
  padding: 12px 22px;
  background: var(--gold);
  color: var(--void);
  transition: top .3s;
}
.jump:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rise, .stack .ln > i, .spread, .wipe img { opacity: 1 !important; transform: none !important; letter-spacing: .12em !important; }
  .wipe::after { display: none; }
  .rays { animation: none; }
}

/* Menü gegen fremde nav-Regeln absichern (Altbestand setzt nav ul auf flex) */
.veil nav, .veil nav ul, .veil__nav, .veil__nav ul {
  display: block !important;
  position: static !important;
  width: auto;
  height: auto;
  background: none;
  flex-direction: column;
  transform: none;
}
.veil__nav li { display: block !important; width: 100%; float: none; }
.veil__nav a {
  display: flex !important;
  width: 100%;
  text-transform: uppercase;
  opacity: 1;
}

/* ---------- Altbestand bändigen ----------
   Unterseiten laden weiterhin global.css. Element-Regeln daraus
   wuerden Kopf und Fuss zerlegen; theme.css laeuft danach. */
header.bar { padding: 0 clamp(14px, 3vw, 44px); border-bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,.85), transparent); }
header.bar.fixed { background: rgba(5,3,8,.9); }
footer.foot { padding: 0; margin: 0; background: var(--void); }
.veil nav ul, .foot ul { padding: 0; margin: 0; list-style: none; }
.veil nav ul li, .foot ul li { display: block; margin: 0; }
.veil nav ul li a::after, .foot ul li a::after { display: none; }
.foot li + li { margin-top: 10px; }

/* ============================================================
   17 · BLING — Gold und Pink auf voller Lautstärke
   Farbe, Chrom und Glut. Bewegung nur beim Scrollen und Zeigen.
   ============================================================ */

:root {
  --gold:      #f0cd4e;
  --gold-hi:   #fff3c4;
  --gold-deep: #8a6410;

  /* Echtes Chrom: viele Stopps, harte Kanten zwischen hell und dunkel */
  --chrome: linear-gradient(100deg,
    #6b4c0a 0%, #c9a227 12%, #fff6d2 24%, #e8c55a 32%,
    #8a6410 44%, #ffeaa0 56%, #f0cd4e 68%, #fffbe8 78%,
    #b98f1e 88%, #6b4c0a 100%);
  --chrome-pink: linear-gradient(100deg,
    #6b0130 0%, #d4005f 14%, #ff6fae 26%, #ff1e7a 38%,
    #99003f 50%, #ff8cc0 62%, #ff1e7a 76%, #ffd0e6 86%, #7d0138 100%);

  --burn-gold: 0 0 14px rgba(240,205,78,.55), 0 0 46px rgba(240,205,78,.28);
  --burn-pink: 0 0 16px rgba(255,30,122,.6), 0 0 52px rgba(255,30,122,.32);
}

/* Die Seite liegt in farbigem Licht, nicht im Nichts */
body {
  background:
    radial-gradient(80vw 60vh at 88% -6%, rgba(255,30,122,.16), transparent 62%),
    radial-gradient(70vw 55vh at 4% 104%, rgba(240,205,78,.12), transparent 62%),
    radial-gradient(90vw 70vh at 50% 50%, rgba(96,20,140,.14), transparent 70%),
    var(--ink);
  background-attachment: fixed;
}

/* Chrom-Schrift */
.leaf {
  background: var(--chrome);
  background-size: 260% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(240,205,78,.35));
}

/* Akzentwort in Überschriften */
.hl {
  background: linear-gradient(96deg, var(--gold-hi) 0%, var(--gold) 32%, var(--pink-hi) 68%, var(--pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(255,30,122,.4));
}

/* Kapitälchen glühen */
.kicker {
  color: var(--gold-hi);
  text-shadow: 0 0 16px rgba(240,205,78,.5);
}
.kicker--rule::after, .kicker--mid::before {
  height: 2px;
  background: var(--chrome);
  box-shadow: var(--burn-gold);
}

/* ---------- Schaltflächen: Chrom mit Glut ---------- */
.act {
  padding: 17px 34px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  background: var(--chrome);
  background-size: 260% auto;
  color: var(--gold-hi);
  box-shadow: 0 0 0 1px rgba(255,243,196,.25), 0 18px 44px -22px rgba(240,205,78,.9);
}
.act::before { background: linear-gradient(160deg, #150d02, #0a0710); }
.act:hover {
  color: #1a1200;
  box-shadow: 0 0 0 1px rgba(255,243,196,.6), 0 22px 60px -18px rgba(240,205,78,1), var(--burn-gold);
}
.act--pink {
  background: var(--chrome-pink);
  background-size: 260% auto;
  color: var(--pink-hi);
  box-shadow: 0 0 0 1px rgba(255,140,192,.3), 0 18px 44px -22px rgba(255,30,122,.9);
}
.act--pink:hover {
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,140,192,.7), 0 22px 60px -18px rgba(255,30,122,1), var(--burn-pink);
}
.act--bare {
  background: linear-gradient(100deg, rgba(255,243,196,.5), rgba(255,140,192,.5));
  color: var(--bone);
  box-shadow: 0 14px 36px -26px rgba(255,30,122,.8);
}
.act--bare:hover { color: #1a1200; background: var(--chrome); }

/* ---------- Raute und Zierlinien glühen ---------- */
.lozenge { background: var(--chrome); box-shadow: var(--burn-gold); }
.rule-deco::before, .rule-deco::after {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 12px rgba(240,205,78,.5);
}

/* ---------- Neon bleibt Neon ---------- */
.sign { text-shadow: 0 0 6px #fff, 0 0 18px var(--pink), 0 0 44px var(--pink), 0 0 90px rgba(255,30,122,.6); }
.sign--gold { text-shadow: 0 0 6px #fff, 0 0 20px var(--gold), 0 0 48px var(--gold), 0 0 96px rgba(240,205,78,.5); }

/* ---------- Kopfleiste und Fuß ---------- */
.bar.fixed::after { height: 2px; background: var(--chrome); box-shadow: var(--burn-gold); }
.mark__word { filter: drop-shadow(0 0 20px rgba(240,205,78,.45)); }
.tick { height: 3px; box-shadow: 0 0 14px rgba(255,30,122,.8); }

.foot { border-top: 2px solid transparent; border-image: var(--chrome) 1; }
.foot h5 { color: var(--gold-hi); text-shadow: 0 0 14px rgba(240,205,78,.45); }
.foot__crest span {
  background: var(--chrome);
  background-size: 240% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 34px rgba(240,205,78,.4));
}

/* ---------- Seitliche Leiste ---------- */
.flank a:hover { background: var(--chrome-pink); color: #fff; box-shadow: var(--burn-pink); }

/* ---------- Menü ---------- */
.veil {
  background:
    radial-gradient(70vw 60vh at 90% 0%, rgba(255,30,122,.2), transparent 62%),
    radial-gradient(60vw 50vh at 0% 100%, rgba(240,205,78,.14), transparent 62%),
    var(--void);
}
.veil__nav a:hover {
  background: linear-gradient(96deg, var(--gold-hi), var(--pink-hi));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(255,30,122,.5));
}
.veil__nav .no { color: var(--pink); text-shadow: 0 0 12px rgba(255,30,122,.8); }
.toggle span:nth-child(3) { box-shadow: 0 0 10px rgba(255,30,122,.9); }

/* ---------- Eintritt ---------- */
.gate { background: radial-gradient(80vw 70vh at 80% 0%, rgba(255,30,122,.14), transparent 62%), var(--void); }