:root{
  --white:#e5e5e5;
  --black:#1a1a1a;

  /* Ruhige Timings */
  --t-line: 1094ms;
  --t-blocks-in: 969ms;
  --t-blocks-away: 813ms;
  --t-color: 900ms;

  /* Horizon / Ticker */
  --t-pair-in: 560ms;
  --t-pair-out: 500ms;

  --block-h: clamp(64px, 16vh, 140px);
  --font: system-ui,-apple-system,Inter,Roboto,Segoe UI,sans-serif;

  /* Dünne technische Schrift */
  --ticker-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Roboto Mono", monospace;
}

/* Transitions global kurz killen (Reset) */
.no-anim, .no-anim *{ transition:none !important; animation:none !important; }

#loader-overlay{
  position:fixed; inset:0; z-index:99999;
  background:var(--white); color:#111;
  display:grid; place-items:center;
  transition:opacity .45s ease, visibility .45s ease;
  font:500 16px/1.5 var(--font);
}
#loader-overlay.is-done{opacity:0;visibility:hidden}
.loader-wrap{width:100vw;height:100vh;display:grid;place-items:center}

/* Bühne */
.seq{
  position:absolute; inset:0; overflow:hidden; background:var(--white);
  transition: background-color var(--t-color) ease;
}
.cam{ position:absolute; inset:0; }

/* ===== Segmentierte Linie (7 Segmente, mit Gaps) ===== */
.hline{
  position:absolute; left:6vw; right:6vw; top:50%;
  height:1px; transform:translateY(-50%);
  display:grid; grid-template-columns:repeat(7,1fr); gap:10px; z-index:3;
  opacity:1; transition:opacity 220ms ease;
}
.hline .hl{
  height:1px; background:var(--black);
  transform-origin:left center; transform:scaleX(0);
  animation: hl-draw var(--t-line) ease forwards;
}
.hline .hl:nth-child(1){ animation-delay:  0ms }
.hline .hl:nth-child(2){ animation-delay: 90ms }
.hline .hl:nth-child(3){ animation-delay:180ms }
.hline .hl:nth-child(4){ animation-delay:270ms }
.hline .hl:nth-child(5){ animation-delay:360ms }
.hline .hl:nth-child(6){ animation-delay:450ms }
.hline .hl:nth-child(7){ animation-delay:540ms }
@keyframes hl-draw{ to{ transform:scaleX(1); } }

/* Linie ausblenden, sobald Blöcke stehen */
.seq.stage-line-hide .hline{ opacity:0; }
.seq.stage-line-gone .hline{ display:none; }

/* ===== Blöcke (7 Stück) ===== */
.blocks{
  position:absolute; left:6vw; right:6vw;
  top:calc(50% - var(--block-h)/2);
  height:var(--block-h);
  display:grid; grid-template-columns:repeat(7,1fr); gap:10px;
  z-index:4; pointer-events:none;
}
.block{
  background:var(--black);
  transform: scaleY(0) translateX(0);
  transform-origin:50% 50%;
  border-radius:0;
  transition: transform var(--t-blocks-in) cubic-bezier(.55,.1,.2,1), opacity .25s linear;
}
/* wachsen L→R */
.stage-blocks-in .blocks .b1{ transform:scaleY(1) translateX(0); transition-delay:  0ms }
.stage-blocks-in .blocks .b2{ transform:scaleY(1) translateX(0); transition-delay: 90ms }
.stage-blocks-in .blocks .b3{ transform:scaleY(1) translateX(0); transition-delay:180ms }
.stage-blocks-in .blocks .b4{ transform:scaleY(1) translateX(0); transition-delay:270ms }
.stage-blocks-in .blocks .b5{ transform:scaleY(1) translateX(0); transition-delay:360ms }
.stage-blocks-in .blocks .b6{ transform:scaleY(1) translateX(0); transition-delay:450ms }
.stage-blocks-in .blocks .b7{ transform:scaleY(1) translateX(0); transition-delay:540ms }

/* weit raus – erste 3 nach links, rest nach rechts */
.stage-blocks-away .blocks .b1,
.stage-blocks-away .blocks .b2,
.stage-blocks-away .blocks .b3{
  transform: scaleY(1) translateX(-300vw);
  transition: transform var(--t-blocks-away) cubic-bezier(.55,.1,.2,1), opacity .25s linear;
}
.stage-blocks-away .blocks .b4,
.stage-blocks-away .blocks .b5,
.stage-blocks-away .blocks .b6,
.stage-blocks-away .blocks .b7{
  transform: scaleY(1) translateX(300vw);
  transition: transform var(--t-blocks-away) cubic-bezier(.55,.1,.2,1), opacity .25s linear;
}
.stage-blocks-hide .blocks{ visibility:hidden; }

/* ===== LOADING-Wort (7 Spalten) ===== */
.letters{
  position:absolute; left:6vw; right:6vw;
  top:calc(50% - var(--block-h)/2);
  height:var(--block-h);
  display:grid; grid-template-columns:repeat(7,1fr); gap:10px;
  z-index:2; align-items:center;
  color:#1a1a1a; opacity:0; transform:translateY(2px);
  clip-path: inset(0 0 0 0);
  transition:
    color var(--t-color) ease,
    opacity .25s linear,
    transform .25s ease,
    clip-path var(--t-pair-in) ease;
}
.stage-letters-on .letters{ opacity:1; transform:translateY(0); }

.letter{
  display:grid; place-items:center; user-select:none;
  font-weight:900; font-size: clamp(32px, 9.8vw, 102px);
  letter-spacing:-0.035em; line-height:1;
}
.letter.L::after{ content:"L"; } .letter.O::after{ content:"O"; }
.letter.A::after{ content:"A"; } .letter.D::after{ content:"D"; }
.letter.I::after{ content:"I"; } .letter.N::after{ content:"N"; }
.letter.G::after{ content:"G"; }

/* Farbwechsel synchron */
.seq.stage-invert{ background-color: var(--black); }
.stage-invert .letters{ color:#e5e5e5; }

/* LOADING per Clip zur Mitte ausblenden (ohne Linie) */
.seq.stage-letters-hide .letters{ clip-path: inset(50% 0 50% 0); }

/* Weißer Screen */
.seq.stage-white{ background:#e5e5e5; }

/* ===== Ticker (zwei Zeilen gleichzeitig) ===== */
.ticker{
  position:absolute; inset:0; background:#e5e5e5; color:#1a1a1a;
  display:grid; align-content:center; gap:22px; padding:6vh 6vw;
  opacity:0; overflow:hidden; z-index:6; visibility:hidden;
}
.stage-ticker .ticker{ opacity:1; visibility:visible; transition:opacity .12s linear; }

.tline-wrap{
  position:relative; overflow:hidden;
  height: clamp(44px, 6.4vh, 72px);
}
.tline{
  position:absolute; left:0; right:0; top:50%;
  opacity:0;
  font-family: var(--ticker-font);
  font-weight:200;
  font-size: clamp(12px, 2.4vw, 26px);
  line-height:1.74;
  letter-spacing:.01em;
  white-space:nowrap;
  transform: translateY(-50%);
  will-change: transform, opacity;
  text-align:left;
}
.tline.r{ text-align:right; }

/* Eintritts-Richtungen */
.tline.dir-b{ transform: translateY(150%);} /* von unten */
.tline.dir-t{ transform: translateY(-150%);}/* von oben */

/* Sichtbar auf der Horizontlinie */
.tline.show{
  opacity:1;
  transition: transform var(--t-pair-in) ease, opacity var(--t-pair-in) ease;
  transform: translateY(-50%);
}

/* Raus in entgegengesetzte Richtung */
.tline.outUp{
  opacity:0;
  transform: translateY(-150%);
  transition: transform var(--t-pair-out) ease, opacity var(--t-pair-out) ease;
}
.tline.outDown{
  opacity:0;
  transform: translateY(150%);
  transition: transform var(--t-pair-out) ease, opacity var(--t-pair-out) ease;
}

/* ===== Kontakt & Brand & Imprint – IMMER sichtbar ===== */
.contact,
.brand-badge,
.imprint-link{
  position:fixed; left:50%; transform:translateX(-50%);
  font-family: var(--ticker-font);
  font-weight:200; color:#1a1a1a;
  text-decoration: underline;
  user-select:text; -webkit-user-select:text;
  opacity:1;
  z-index:50;
}
.contact{ top: calc(var(--vh, 100dvh) - var(--contact-clear, 42px));  /* unten, aber via top — so ist’s animierbar */
bottom: auto; text-decoration: none;
font-size:12px;cursor:text; }
.contact a { text-decoration: underline; color: inherit; display: inline-block; }
.imprint-link{ bottom:20px; font-size:12px; cursor:pointer;}
.brand-badge{ top:16px; font-size:12px; letter-spacing:.02em; text-decoration:none; white-space: nowrap;}

.contact, .contact a, .contact .ctxt {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Farbe passt sich an Schwarz/Weiß an */
.seq.stage-invert ~ .contact,
.seq.stage-invert ~ .brand-badge,
.seq.stage-invert ~ .imprint-link{ color:#e5e5e5; }

/* Dark-Mode für Ticker */
.seq.stage-invert .ticker { background:#1a1a1a; color:#e5e5e5; }

/* Subtiles technisches Grid nur im Dark-Part (unter den Inhalten) */
.seq.stage-invert::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,.04) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 20px);
  /* kein z-index -> bleibt unter deinen z-index:2/3/4/6 Ebenen */
}

/* Typo-Microeffekt im Dark-Part */
.seq.stage-invert .ticker .tline { letter-spacing: 0em; }

/* Sehr leichte Y-Drift, nur während .show aktiv ist */
.tline.drift {
  animation: tline-drift 2.6s ease-in-out infinite alternate;
}
@keyframes tline-drift {
  from { transform: translateY(-50%); }
  to   { transform: translateY(calc(-50% - 3px)); }
}

/* Optional Barrierefreiheit: Drift aus bei Reduced Motion */
@media (prefers-reduced-motion: reduce){
  .tline.drift { animation: none; }
}

/* Sanfte Transition für Brand/Contact */
.brand-badge,
.contact {
  transition:
    top .42s cubic-bezier(.55,.1,.2,1),
    bottom .42s cubic-bezier(.55,.1,.2,1),
    transform .42s cubic-bezier(.55,.1,.2,1),
    opacity .28s ease;
}

/* PRELUDE: beides mittig stapeln */
#loader-overlay.prelude-center .brand-badge,
#loader-overlay.prelude-center .contact {
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
}

#loader-overlay.prelude-center .brand-badge { top: calc(50% - 22px); bottom: auto; }
#loader-overlay.prelude-center .contact     { top: calc(50% + 22px); bottom: auto; }

/* Nach dem Docking zurück in deine Standard-Layout-Positionen (Top/Bottom) */
#loader-overlay.prelude-dock .brand-badge { transform: translateX(-50%); }
#loader-overlay.prelude-dock .contact     { transform: translateX(-50%); }

:root{
  /* ... deine Variablen ... */
  --t-dock: 1200ms; /* langsames Andocken */
}

/* Sanfte, lange Transition fürs Docking */
.brand-badge,
.contact {
  transition:
    top var(--t-dock) cubic-bezier(.55,.1,.2,1),
    bottom var(--t-dock) cubic-bezier(.55,.1,.2,1),
    transform var(--t-dock) cubic-bezier(.55,.1,.2,1),
    opacity .28s ease;
}

/* Start: beide wirklich mittig (ohne vorherige Bewegung) */
#loader-overlay.prelude-center .brand-badge,
#loader-overlay.prelude-center .contact {
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
}

#loader-overlay.prelude-center .brand-badge { top: calc(50% - 22px); bottom: auto; }
#loader-overlay.prelude-center .contact     { top: calc(50% + 22px); bottom: auto; }

/* Nach dem Docking zurück in deine Standard-Positionen (Top/Bottom) */
#loader-overlay.prelude-dock .brand-badge { transform: translateX(-50%); }
#loader-overlay.prelude-dock .contact     { transform: translateX(-50%); }

/* Clip als 'Mauer' im Center-Start */
#loader-overlay.prelude-center .brand-badge,
#loader-overlay.prelude-center .contact {
  -webkit-clip-path: inset(50% 0 50% 0);
          clip-path: inset(50% 0 50% 0);
  transition:
    top var(--t-dock) cubic-bezier(.55,.1,.2,1),
    bottom var(--t-dock) cubic-bezier(.55,.1,.2,1),
    transform var(--t-dock) cubic-bezier(.55,.1,.2,1),
    opacity .28s ease,
    -webkit-clip-path var(--t-pair-in) ease,
            clip-path var(--t-pair-in) ease;
}

/* Aufclippen (sichtbar machen) */
#loader-overlay.prelude-center.prelude-reveal .brand-badge,
#loader-overlay.prelude-center.prelude-reveal .contact {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}

#loader-overlay.prelude-lock .brand-badge,
#loader-overlay.prelude-lock .contact{
  transition: none !important;
}