/* Gemeinsame Basis für die Varianten von Entwurf 08 („Bewusst leer").
   Mechanik überall gleich: Startanimation, Masken-Einzug, Punkt (.blau),
   blaue Seite (.bp) mit sofortiger Schrift. Das Layout macht jede Datei selbst. */

/* ═══ STARTANIMATION — 1:1 wie weissraum-studio.de ═══ */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  background: var(--snow);
  pointer-events: none;
  animation: preOut 0.55s var(--ease) 1.3s forwards;
}
.preloader__bar {
  flex: 1; background: #e7eaea;
  transform: translateX(-101%); will-change: transform;
  animation: barIn 0.85s var(--ease) forwards;
}
.preloader__bar:nth-child(1) { animation-delay: 0.05s; }
.preloader__bar:nth-child(2) { transform: translateX(101%); animation-delay: 0.18s; }
.preloader__bar:nth-child(3) { animation-delay: 0.31s; }
@keyframes barIn { to { transform: translateX(0); } }
@keyframes preOut { to { opacity: 0; visibility: hidden; } }

/* Masken-Einzug: jedes Element mit [data-rise] steigt nach dem Vorhang auf.
   Verzögerung per style="--d: 1.4s" (Standard 1,25 s). */
[data-rise] {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 100%, 0);
  animation: aufsteigen 0.95s var(--ease) forwards;
  animation-delay: var(--d, 1.25s);
}
@keyframes aufsteigen { to { clip-path: inset(-1rem -1rem -1rem -1rem); transform: none; } }

/* ═══ PUNKT ═══ */
.ruhe { position: absolute; width: 18px; height: 18px; }
.blau { mix-blend-mode: multiply; opacity: 0; animation: punktRein 0.6s var(--ease) 1.95s forwards; }
.blau.scrollt { mix-blend-mode: normal; }
@keyframes punktRein { to { opacity: 1; } }
/* Satzpunkt nach der Logo-Regel: 30 % der Versalhöhe groß, 15 % Abstand.
   Genaue Werte je Punkt rechnet shared/punkt-abstand.js aus — das hier ist die Näherung. */
.dot { display: inline-block; width: 0.213em; height: 0.213em; background: #071fa9; margin-left: 0.04em; }

.hint { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); opacity: calc(1 - var(--p, 0) * 8); }
.label { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 0.3rem; }
.linie { background: linear-gradient(#071fa9, #071fa9) 0 100% / 0 2px no-repeat; transition: background-size 0.5s var(--ease); }
.linie:hover, .linie:focus-visible { background-size: 100% 2px; }
.rechtlich { display: flex; gap: 1.2rem; }
.rechtlich button:hover { color: #071fa9; }

/* ═══ BLAUE SEITE ═══ */
.bp {
  position: absolute; inset: 0; z-index: 6;
  color: #fff; --logo-grund: #071fa9;
  opacity: var(--t, 0);
}
.bp :focus-visible { outline-color: #fff; }
.bp .dot { background: #fff; }
.bp .label, .bp .klein { color: rgba(255, 255, 255, 0.82); }
.bp .klein { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
.bp .klein button { text-transform: inherit; letter-spacing: inherit; }
.bp .rechtlich button:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.bp .linie { background-image: linear-gradient(#fff, #fff); }
.bp [data-logo] { color: #fff; }
.bp [data-logo] rect { fill: #fff; }

/* CTA „Unsere Produkte" — weiß gefüllt, eckig, Pfeil im blauen Quadrat */
.cta {
  display: inline-flex; align-items: center; gap: 1.1rem;
  padding: 0.45rem 0.45rem 0.45rem 1.4rem;
  background: #fff; color: #071fa9;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem); font-weight: 600; letter-spacing: 0.01em;
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease);
}
.cta__pfeil {
  display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem;
  background: #071fa9; color: #fff; font-size: 1.1rem;
  transition: transform 0.5s var(--ease), background-color 0.45s, color 0.45s;
}
.cta:hover, .cta:focus-visible { background: #080f0f; color: #fff; }
.cta:hover .cta__pfeil, .cta:focus-visible .cta__pfeil { background: #fff; color: #080f0f; transform: translateX(0.25rem); }

/* Rückkehr von der Produktseite (?ende): ohne Startanimation direkt aufs Blau */
.ende .preloader { display: none; }
.ende [data-rise] { animation: none; clip-path: none; transform: none; }
.ende .blau { opacity: 1; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
  [data-rise] { clip-path: none; transform: none; animation: none; }
  .blau { opacity: 1; animation: none; }
}

/* ═══ BLAUE SEITE „A · Karte" als Baustein (.pa) ═══ */
.pa {
  position: absolute; inset: 0; display: grid;
  grid-template: auto 1fr auto / 1fr auto;
  padding: clamp(1.5rem, 6vw, 5.5rem) clamp(1.5rem, 6.5vw, 6rem) clamp(1.1rem, 2.5vw, 1.8rem);
}
.pa-signet { width: clamp(3.4rem, 6.5vw, 5.6rem); }
.pa-tel { font-size: clamp(1rem, 1.9vw, 1.5rem); font-weight: 500; align-self: start; }
.pa-mitte { grid-column: 1 / -1; place-self: center; text-align: center; display: grid; justify-items: center; }
.pa-mitte h2 { font-size: clamp(3.8rem, 13vw, 13rem); font-weight: 250; letter-spacing: -0.06em; line-height: 0.9; }
.pa-mitte .klein { margin: 1rem 0 clamp(1.8rem, 4vw, 2.8rem); }
.pa-fuss { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem; }
.pa-mail { font-size: clamp(0.95rem, 1.7vw, 1.35rem); font-weight: 500; text-transform: uppercase; letter-spacing: 0.01em; }
.pa-fuss .rechtlich { justify-self: end; }
@media (max-width: 640px) {
  .pa-fuss { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pa-fuss .rechtlich { justify-self: center; }
}

/* Blättern zwischen den Varianten — nur im Entwurf */
.v-nav {
  position: fixed; left: 50%; top: 3.1rem; transform: translateX(-50%); z-index: 95;
  display: flex; align-items: center; gap: 0.9rem;
  background: #fff; color: #080f0f; border: 1px solid var(--dust); border-radius: 999px;
  padding: 0.35rem 0.9rem; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.v-nav a:hover { color: #071fa9; }

/* Große, eng gesetzte Überschriften: Wortabstand etwas öffnen, sonst
   laufen „Mehr Wirkung" / „uns an" optisch zusammen */
.stage h1, .stage h2 { word-spacing: 0.08em; }
.linie { white-space: nowrap; }