@font-face {
  font-family: 'Absans';
  src: url('/fonts/Absans-Regular.woff2') format('woff2'),
       url('/fonts/Absans-Regular.woff') format('woff');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Markona';
  src: url('/fonts/Markona.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Initial loader styles — shown before JS bundle parses, replaced when React mounts */
:root { --loader-bg: #F5F1E8; }
html[data-theme="dark"] { --loader-bg: #2A2A27; }
/* Fixed + inset:0 pins the loader to the actual viewport regardless of the
   browser's default body margin (no reset stylesheet has loaded yet at this
   point) or scroll position — without it, the box centers inside whatever
   offset/height the unstyled document happens to have, which is why this
   drifted off-center inconsistently. The vh fallback + dvh line handles the
   matching mobile bug: 100vh is the browser chrome hidden height, taller
   than what's actually visible while the address bar is showing; dvh tracks
   the real visible viewport. */
#initial-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  background: var(--loader-bg);
}
.il-wrap {
  width: 80px;
  height: 200px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
.il-shape {
  position: relative;
  width: 44px;
  height: 44px;
}
.il-shape svg {
  display: block;
  width: 100%;
  height: 100%;
}
.il-shape svg rect,
.il-shape svg polygon,
.il-shape svg circle {
  fill: none;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
/* German flag colors: black, red, gold */
.il-shape:nth-child(1) svg circle  { stroke: #000000; }
.il-shape:nth-child(2) svg polygon { stroke: #DD0000; }
.il-shape:nth-child(3) svg rect    { stroke: #FFCE00; }
.il-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.il-shape:nth-child(1) .il-dot { background: #000000; }
.il-shape:nth-child(2) .il-dot { background: #DD0000; }
.il-shape:nth-child(3) .il-dot { background: #FFCE00; }
@keyframes il-draw {
  0%, 20%  { stroke-dashoffset: 100; }
  50%, 80% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 100; }
}
@keyframes il-dot-pulse {
  0%, 20%  { opacity: 0; transform: translate(-50%,-50%) scale(0.5); }
  40%, 60% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  80%, 100%{ opacity: 0; transform: translate(-50%,-50%) scale(0.5); }
}
.il-shape:nth-child(1) svg circle  { animation: il-draw 2s ease-in-out infinite; }
.il-shape:nth-child(2) svg polygon { animation: il-draw 2s ease-in-out infinite 0.3s; }
.il-shape:nth-child(3) svg rect    { animation: il-draw 2s ease-in-out infinite 0.6s; }
.il-shape:nth-child(1) .il-dot     { animation: il-dot-pulse 2s ease-in-out infinite; }
.il-shape:nth-child(2) .il-dot     { animation: il-dot-pulse 2s ease-in-out infinite 0.3s; }
.il-shape:nth-child(3) .il-dot     { animation: il-dot-pulse 2s ease-in-out infinite 0.6s; }