/* ============================================================================
   FUNKT. – Coming-Soon-Seite
   Eigenständig (lädt funkt.css nicht), damit die Seite auch dann sauber
   aussieht, wenn alle anderen Pfade per .htaccess umgeleitet werden.
   Keine Cookies, kein Tracking, keine externen Abrufe.
   ========================================================================= */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --ink:      #0b1220;
  --ink-2:    #111c31;
  --hair:     #24314c;
  --signal:   #ff5470;
  --signal-l: #ff90a4;
  --received: #35e0a1;
  --hi:       #f4f1ee;
  --lo:       #93a0b8;
  --display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(255, 84, 112, .13), transparent 70%),
    var(--ink);
  color: var(--hi);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.cs {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 16px 32px;
}

.cs-logo { display: block; margin-bottom: clamp(40px, 8vh, 72px); }
.cs-logo img { display: block; width: 150px; height: auto; }

/* ---------------------------------------------------------- Sendesignal */
.cs-radar {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto 36px;
}
.cs-radar span {
  position: absolute;
  inset: 0;
  border: 2px solid var(--signal);
  border-radius: 50%;
  opacity: 0;
  animation: welle 3.6s cubic-bezier(.2, .6, .35, 1) infinite;
}
.cs-radar span:nth-child(2) { animation-delay: 1.2s; }
.cs-radar span:nth-child(3) { animation-delay: 2.4s; }
.cs-radar i {
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 6px rgba(255, 84, 112, .18), 0 0 28px 4px rgba(255, 84, 112, .55);
}

@keyframes welle {
  0%   { transform: scale(.15); opacity: .9; }
  100% { transform: scale(1);   opacity: 0; }
}

/* ---------------------------------------------------------------- Text */
.cs-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--ink-2);
  font: 600 .8125rem/1 var(--body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lo);
}
.cs-status::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--received);
  box-shadow: 0 0 10px var(--received);
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: .35; } }

h1 {
  margin: 0 auto 20px;
  max-width: 14ch;
  font: 700 clamp(2.25rem, 7vw, 4.25rem)/1.04 var(--display);
  letter-spacing: -.025em;
  text-wrap: balance;
}
h1 em {
  font-style: normal;
  color: var(--signal);
}

.cs-lede {
  margin: 0 auto;
  max-width: 34rem;
  color: var(--lo);
  text-wrap: pretty;
}
.cs-lede strong { color: var(--hi); font-weight: 600; }

.cs-foot {
  padding: 24px 16px 32px;
  text-align: center;
  font-size: .875rem;
  color: var(--lo);
}

@media (prefers-reduced-motion: reduce) {
  .cs-radar span { animation: none; opacity: .5; }
  .cs-radar span:nth-child(1) { transform: scale(.4); }
  .cs-radar span:nth-child(2) { transform: scale(.7); opacity: .3; }
  .cs-radar span:nth-child(3) { transform: scale(1);  opacity: .15; }
  .cs-status::before { animation: none; }
}