/* ==========================================================================
   Ladebildschirm „Wird gebrüht" — Konzept 03
   Quelle: design-export/canvas/design_handoff_page_loader/
           loader-referenz.html und README.md

   Eigenständige Übergabe des Kunden, ausdrücklich als high-fidelity
   gekennzeichnet: Farben, Typografie, Abstände und Timing sind
   verbindlich. Die Werte stehen deshalb so, wie die Referenz sie führt —
   nur die Hex-Werte sind gegen unsere Tokens getauscht, wie die Übergabe
   es selbst vorschlägt.

   Espresso läuft von unten ein und füllt den Schirm wie eine Tasse. Wo
   der Pegel die Wortmarke erreicht, kippt die Schrift von Espresso auf
   Cream — zwei deckungsgleiche Kopien, die helle per clip-path am Pegel
   beschnitten. Der Schnitt wird aus dem Layout gemessen, nicht gerechnet,
   siehe assets/js/loader.js.
   ========================================================================== */

/* Sichtbar nur, wenn der Kopf der Seite entschieden hat, dass er läuft:
   Startseite immer, sonst einmal je Besuch (Kunde, 16.09.2026). Ohne
   JavaScript wird die Klasse nie gesetzt — dann gibt es ihn nicht. */
.sg-loader { display: none; }

html.loader-an .sg-loader:not([hidden]) {
  position: fixed;
  inset: 0;
  /* Breiter als der Inhalt, um den freigehaltenen Streifen der
     Bildlaufleiste mitzudecken (siehe unten) — sonst bliebe dort helles
     Papier neben der dunklen Füllung stehen. 100vw hilft nicht: Bei
     stehendem Streifen rechnen die vw-Einheiten ihn selbst heraus.
     --sg-leiste setzt assets/js/loader.js, gemessen statt geraten; ohne
     JavaScript gibt es den Ladebildschirm ohnehin nicht. */
  width: calc(100% + var(--sg-leiste, 0px));
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--off-white);
  will-change: transform;
}

/* Solange er läuft, rollt die Seite darunter nicht.

   scrollbar-gutter hält dabei den Platz der Bildlaufleiste frei. Ohne
   das verschwindet sie mit `overflow: hidden`, die Seite wird 15px
   breiter — und in dem Bild, in dem der Ladebildschirm abfährt, springt
   alles wieder zusammen: Hero 1440 → 1424.7, das Hero-Bild 1388 →
   1372.7, und weil es im cover-Zuschnitt liegt, verschiebt sich dabei
   auch sein Ausschnitt. Dem Kunden am 16.09.2026 aufgefallen, gemessen
   und behoben. Auf Systemen mit überlagernder Leiste (Apple) gab es den
   Sprung nie, dort ist die Regel wirkungslos. */
html.loader-an {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.sg-loader__liquid {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--espresso);
  will-change: height;
}

/* Meniskus: flache Ellipse auf der Oberkante, verhindert die harte
   Linie — wie in der Vorlage. */
.sg-loader__liquid::before {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  top: -9px;
  height: 20px;
  border-radius: 50%;
  background: var(--espresso);
}

.sg-loader__drop {
  position: absolute;
  left: 50%;
  top: 6vh;
  width: 7px;
  height: 16px;
  border-radius: 50% / 62% 62% 38% 38%;
  background: var(--espresso);
  opacity: 0;
}

.sg-loader__type {
  position: relative;
  padding: 0 24px;
  text-align: center;
}

.sg-loader__type > div {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 128px);
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.sg-loader__type .is-dark { color: var(--espresso); }

/* Zweite, helle Kopie exakt deckungsgleich; clip-path folgt dem Pegel. */
.sg-loader__type .is-light {
  position: absolute;
  inset: 0;
  color: var(--cream);
  clip-path: inset(100% 0 0 0);
}

/* Die Sperrung schiebt die Zeile nach links; text-indent gleicht das
   Leerzeichen hinter dem letzten Buchstaben wieder aus. */
.sg-loader__type small {
  display: block;
  margin-top: clamp(12px, 1.6vw, 22px);
  font-size: clamp(13px, 1.7vw, 24px);
  line-height: 1;
  letter-spacing: .44em;
  text-indent: .44em;
}

.sg-loader__pct,
.sg-loader__tag {
  position: absolute;
  bottom: clamp(40px, 5vh, 60px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--amber);
}

.sg-loader__pct { left: clamp(20px, 4vw, 40px); }
.sg-loader__tag { right: clamp(20px, 4vw, 40px); }

.sg-loader__bar {
  position: absolute;
  left: clamp(20px, 4vw, 40px);
  right: clamp(20px, 4vw, 40px);
  bottom: clamp(26px, 3.2vh, 44px);
  height: 2px;
  background: rgba(30, 22, 16, .12);
}

.sg-loader__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--amber);
}

/* Abgang: die gefüllte Fläche fährt nach oben aus dem Bild. */
.sg-loader.is-leaving {
  transform: translateY(-100%);
  transition: transform 560ms var(--ease-out);
}

/* Abbestellte Bewegung: kein Tropfen, kein Fließen, kein Hochfahren —
   der Bildschirm blendet aus. So in der Übergabe vorgesehen. */
@media (prefers-reduced-motion: reduce) {
  .sg-loader__drop { display: none; }
  .sg-loader__liquid { transition: none; }
  .sg-loader.is-leaving {
    transform: none;
    opacity: 0;
    transition: opacity 200ms linear;
  }
}