/* =====================================================================
   Füeß Steuerberatung · Übergangs-Startseite („Neue Website in Kürze“)
   Farben und Schriften wie brand/tokens/tokens.json. Keine eingebetteten Stile,
   weil die Sicherheitsregel (Content-Security-Policy) nur eigene Dateien erlaubt.

   Ablauf der Animation (ca. 3 Sekunden, danach Ruhe):
     0,0 s  Rahmen-Ecken gleiten von außen heran
     0,2 s  Ecken des Signets zeichnen sich
     0,75 s Balken des F wachsen
     1,0 s  „Füeß“ erscheint, die Ü-Punkte setzen sich
     1,35 s Trennstrich, dann „STEUERBERATUNG“ Buchstabe für Buchstabe
     2,0 s  Leitsatz, 2,6 s Hinweis mit Pixel-Paar
   Wer in den Systemeinstellungen „Bewegung reduzieren“ gewählt hat, sieht alles sofort.
   ===================================================================== */

@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/IBMPlexSans-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/SpaceGrotesk-Medium.woff2') format('woff2'); }

:root {
  --petrol: #1F6E7E;
  --petrol-dunkel: #0F4C5C;
  --sand: #B8955E;
  --papier: #F7F3EC;
  --hinweis: #5B6B70;

  --font-text: 'IBM Plex Sans', Arial, Helvetica, sans-serif;
  --font-titel: 'Space Grotesk', 'IBM Plex Sans', Arial, sans-serif;

  /* weiche Kurven: schnell los, sanft ankommen */
  --aus: cubic-bezier(0.16, 1, 0.3, 1);
  --rein-raus: cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font-text);
  color: var(--petrol-dunkel);
  background-color: var(--papier);
  /* heller Lichtschein in der Mitte, zu den Rändern Papier */
  background-image: radial-gradient(120% 90% at 50% 44%, #FFFFFF 0%, #FFFFFF 18%, var(--papier) 70%);
  overflow: hidden;
}

/* ---------- Bühne und Rahmen ---------- */
.buehne {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 16px;
}
.kasten {
  position: relative;
  padding: clamp(44px, 8vw, 96px) clamp(32px, 8vw, 112px);
}
.rahmen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Maus-Tiefe (setzt startseite.js) */
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  animation: atmen 7s var(--rein-raus) 3.2s infinite;
}
.ecke {
  position: absolute;
  width: clamp(26px, 4.2vw, 46px);
  height: clamp(26px, 4.2vw, 46px);
  overflow: visible;
  fill: none;
  stroke: var(--sand);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  animation: heran 1.25s var(--aus) both;
}
.ecke path { vector-effect: non-scaling-stroke; }
.ecke--ol { top: 0; left: 0;     --dx: -34vw; --dy: -34vh; }
.ecke--or { top: 0; right: 0;    --dx: 34vw;  --dy: -34vh; rotate: 90deg; }
.ecke--ur { bottom: 0; right: 0; --dx: 34vw;  --dy: 34vh;  rotate: 180deg; }
.ecke--ul { bottom: 0; left: 0;  --dx: -34vw; --dy: 34vh;  rotate: 270deg; }

@keyframes heran {
  from { translate: var(--dx) var(--dy); opacity: 0; }
  30%  { opacity: 1; }
}
@keyframes atmen {
  0%, 100% { scale: 1; }
  50%      { scale: 1.018; }
}

/* ---------- Inhalt ---------- */
.inhalt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translate3d(calc(var(--mx, 0px) * -0.3), calc(var(--my, 0px) * -0.3), 0);
}
.logo { margin: 0; line-height: 0; }
.logo svg { display: block; width: min(400px, 72vw); height: auto; overflow: visible; }

.leitsatz {
  margin: clamp(30px, 4.5vw, 44px) 0 0;
  font-family: var(--font-titel);
  font-weight: 500;
  font-size: clamp(21px, 2.5vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--petrol-dunkel);
}
.leitsatz__teil { display: inline-block; animation: auftauchen 0.9s var(--aus) both; }
.leitsatz__teil--1 { animation-delay: 2s; }
.leitsatz__teil--2 { animation-delay: 2.25s; color: var(--petrol); }

.hinweis {
  margin: clamp(18px, 2.4vw, 24px) 0 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hinweis);
  animation: auftauchen 0.9s var(--aus) 2.6s both;
}
/* Pixel-Paar (Petrol + Sand) atmet ruhig im Wechsel */
.pixel { display: inline-flex; gap: 4px; }
.pixel i { display: block; width: 8px; height: 8px; border-radius: 2px; background: var(--petrol); animation: pulsieren 2.8s var(--rein-raus) 3.4s infinite; }
.pixel i + i { background: var(--sand); animation-delay: 4.8s; }

@keyframes auftauchen {
  from { opacity: 0; transform: translateY(10px); }
}
@keyframes pulsieren {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.55); }
}

/* ---------- Logo-Animation (Klassen setzt tools/website/build_hochladen.py) ---------- */
/* Bezugspunkt für Skalieren = das Teil selbst. Nicht für die Ecken: Die tragen eine eigene Positionsangabe (transform),
   die sonst verrutschen würde. */
.l-balken, .l-wort, .l-punkt, .l-strich { transform-box: fill-box; }

/* Ecken des Signets: zeichnen sich nacheinander im Uhrzeigersinn */
.l-ecke { stroke-dasharray: 1; animation: zeichnen 0.75s var(--rein-raus) both; }
.l-e1 { animation-delay: 0.2s; }
.l-e2 { animation-delay: 0.3s; }
.l-e3 { animation-delay: 0.4s; }
.l-e4 { animation-delay: 0.5s; }
@keyframes zeichnen {
  from { stroke-dashoffset: 1; opacity: 0; }
  8%   { opacity: 1; }
  to   { stroke-dashoffset: 0; }
}

/* Balken des F: erst der senkrechte, dann die beiden waagerechten */
.l-balken { animation: wachsen-x 0.5s var(--aus) both; transform-origin: 0 50%; }
.l-senkrecht { animation-name: wachsen-y; transform-origin: 50% 0; animation-delay: 0.75s; }
.l-b2 { animation-delay: 0.92s; }
.l-b3 { animation-delay: 1.02s; }
@keyframes wachsen-x { from { transform: scaleX(0); } }
@keyframes wachsen-y { from { transform: scaleY(0); } }

/* „Füeß“ */
.l-wort { animation: aufsteigen 0.7s var(--aus) both; }
.l-w1 { animation-delay: 1.0s; }
.l-w2 { animation-delay: 1.07s; }
.l-w3 { animation-delay: 1.14s; }
.l-w4 { animation-delay: 1.21s; }
@keyframes aufsteigen { from { opacity: 0; transform: translateY(14%); } }

/* Ü-Punkte setzen sich mit kleinem Federn */
.l-punkt { transform-origin: 50% 50%; animation: setzen 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.l-p1 { animation-delay: 1.45s; }
.l-p2 { animation-delay: 1.52s; }
@keyframes setzen { from { opacity: 0; transform: scale(0); } }

/* Trennstrich (zwei Hälften) wächst von links */
.l-strich { transform-origin: 0 50%; animation: wachsen-x 0.4s linear both; }
.l-s1 { animation-delay: 1.35s; animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
.l-s2 { animation-delay: 1.75s; animation-timing-function: var(--aus); animation-duration: 0.6s; }

/* „STEUERBERATUNG“ Buchstabe für Buchstabe */
.l-zeile { animation: einblenden 0.5s ease-out both; }
@keyframes einblenden { from { opacity: 0; } }
.l-z1 { animation-delay: 1.55s; } .l-z2 { animation-delay: 1.58s; } .l-z3 { animation-delay: 1.61s; }
.l-z4 { animation-delay: 1.64s; } .l-z5 { animation-delay: 1.67s; } .l-z6 { animation-delay: 1.70s; }
.l-z7 { animation-delay: 1.73s; } .l-z8 { animation-delay: 1.76s; } .l-z9 { animation-delay: 1.79s; }
.l-z10 { animation-delay: 1.82s; } .l-z11 { animation-delay: 1.85s; } .l-z12 { animation-delay: 1.88s; }
.l-z13 { animation-delay: 1.91s; } .l-z14 { animation-delay: 1.94s; }

/* ---------- Handy ---------- */
@media (max-width: 540px) {
  .leitsatz__teil { display: block; }
  .hinweis { font-size: 11.5px; letter-spacing: 0.16em; }
}
@media (max-height: 520px) and (orientation: landscape) {
  body { overflow: auto; }
  .kasten { padding-block: 32px; }
  .logo svg { width: min(300px, 50vw); }
}

/* ---------- Bewegung reduzieren: alles sofort sichtbar ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .rahmen, .inhalt { transform: none; }
}