/* ---------------------------------------------------------------------------
   Shutter Island - gemeinsames Design fuer die statischen Seiten.

   Diese Datei ist die EINZIGE Quelle fuer Landingpage (shutter-island.eu) und
   Shop (shop.shutter-island.eu); sie wird auf beide Vhosts byte-identisch nach
   /assets/site.css deployt (scripts/deploy-web.ps1).

   Das Forum laeuft auf Flarum und kann diese Datei nicht einbinden - seine
   Kopie der Tokens und der .sheeps-tab-Regeln liegt in
   flarum/forum.shutter-island.eu/sheeps-header-ext/forum.css. Aendert sich hier
   etwas an Palette oder Reiter-Optik, dort nachziehen.

   Die Palette ist bewusst identisch zu launcher/qml/style/Theme.qml, damit
   Web und Launcher zusammenpassen.
   --------------------------------------------------------------------------- */

:root {
  /* Flaechen */
  --si-bg:            #12122a;
  --si-bg-raised:     #1a1a2e;
  --si-surface:       rgba(255, 255, 255, 0.035);
  --si-surface-hover: rgba(255, 255, 255, 0.055);
  --si-border:        rgba(255, 255, 255, 0.08);
  --si-border-strong: #2a2a4a;

  /* Akzent */
  --si-accent:        #00aeff;
  --si-accent-soft:   rgba(0, 174, 255, 0.12);
  --si-accent-line:   rgba(0, 174, 255, 0.35);
  --si-on-accent:     #06111f;

  /* Text */
  --si-text:          #ffffff;
  --si-muted:         #a0a0b8;

  /* Raster. Die Kopfleisten-Masse sind aus Flarum uebernommen
     (--header-height: 52px, .container: 1200px breit mit 15px Innenabstand),
     damit der Wechsel zwischen Landingpage, Shop und Forum die Leiste nicht
     verspringen laesst. Der Inhalt darunter ist bewusst schmaler. */
  --si-nav-h:         52px;
  --si-nav-maxw:      1200px;
  --si-nav-pad:       15px;
  --si-radius:        14px;
  --si-radius-sm:     9px;
  --si-maxw:          1040px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Grundfarbe auf dem html-Element, damit beim Laden und beim Ueberscrollen
     nie Weiss durchblitzt. */
  background: var(--si-bg);
  /* Platz fuer die Scrollleiste immer reservieren. Ohne das ist der
     Inhaltsbereich auf kurzen Seiten (Shop, Downloads) 15px breiter als auf
     langen, und die zentrierte Kopfleiste springt beim Wechsel zwischen den
     Bereichen um gut 7px. Im Forum steht dieselbe Regel. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  padding-top: var(--si-nav-h);
  background: linear-gradient(180deg, var(--si-bg-raised) 0%, var(--si-bg) 100%);
  color: var(--si-text);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Der Schein oben haengt am Viewport, nicht am Dokument. Bewusst als fixiertes
   Pseudo-Element statt background-attachment: fixed - letzteres liess in
   Chromium beim Scrollen weisse Flaechen stehen und ist auf iOS ohnehin
   wirkungslos. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(1100px 620px at 50% -8%, #262649 0%, rgba(38, 38, 73, 0) 62%);
}

a { color: var(--si-accent); }

:focus-visible {
  outline: 2px solid var(--si-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.si-wrap {
  width: 100%;
  max-width: var(--si-maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Kopfleiste ---------------------------------------------------------
   Struktur und .sheeps-tab-Regeln spiegeln die Flarum-Erweiterung, damit die
   Reiter auf allen drei Domains gleich aussehen und gleich sitzen. */

.sheeps-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--si-nav-h);
  background: rgba(18, 18, 42, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--si-border);
}

/* Eigener Container statt .si-wrap: gleiche Breite und gleicher Innenabstand
   wie Flarums .container in der Kopfzeile. */
.sheeps-nav-inner {
  height: 100%;
  max-width: var(--si-nav-maxw);
  margin: 0 auto;
  padding: 0 var(--si-nav-pad);
  display: flex;
  align-items: center;
  gap: 15px;
}

.sheeps-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--si-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.sheeps-brand-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--si-accent-line);
  background: var(--si-accent-soft);
  color: var(--si-accent);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.sheeps-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Gleiche Regel im Forum: das Innen-Padding erzeugt den Abstand zwischen den
   Reitern, damit sie auch in Flarums <ul class="Header-controls"> (dort ohne
   eigenen gap) nicht aneinanderkleben. */
.sheeps-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: var(--si-radius-sm);
  color: var(--si-muted);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.sheeps-tab:hover { color: var(--si-text); background: var(--si-surface-hover); }

.sheeps-tab.active { color: var(--si-accent); background: var(--si-accent-soft); }

.sheeps-tab-badge {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--si-border-strong);
  color: var(--si-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Bausteine ---------------------------------------------------------- */

.si-eyebrow {
  margin: 0 0 14px;
  color: var(--si-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.si-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.si-btn:hover { transform: translateY(-1px); }

.si-btn-primary {
  background: var(--si-accent);
  color: var(--si-on-accent);
}
.si-btn-primary:hover { background: #2bbcff; }

.si-btn-ghost {
  border-color: var(--si-border-strong);
  background: var(--si-surface);
  color: var(--si-text);
}
.si-btn-ghost:hover { border-color: var(--si-accent-line); background: var(--si-surface-hover); }

.si-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  border: 1px solid var(--si-border-strong);
  border-radius: 999px;
  background: var(--si-accent-soft);
  color: var(--si-accent);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Der Punkt pulsiert dezent - fuer alle, die das nicht wollen, steht er still. */
.si-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: si-pulse 2.4s ease-in-out infinite;
}

@keyframes si-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

.si-footer {
  margin-top: 88px;
  padding: 26px 0 40px;
  border-top: 1px solid var(--si-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--si-muted);
  font-size: 0.82rem;
}

.si-footer-links { display: flex; gap: 18px; }
.si-footer a { color: var(--si-muted); text-decoration: none; }
.si-footer a:hover { color: var(--si-accent); }

/* 46px = Flarums --header-height-phone. */
@media (max-width: 767px) {
  :root { --si-nav-h: 46px; --si-nav-pad: 15px; }
  .sheeps-brand { font-size: 16px; }
  .sheeps-nav-inner { gap: 10px; }
  .sheeps-tab { padding: 6px 9px; font-size: 0.82rem; }
  .si-wrap { padding: 0 18px; }

  /* Die Abzeichen kosten je rund 46px. Mit vier Reitern lief die Leiste auf
     einem 375px-Telefon auf 395px Inhalt und schnitt "Shop" rechts ab - der
     Reiter war dort nicht mehr erreichbar. Der Status steht ohnehin gross auf
     der jeweiligen Seite, der Reiter selbst ist wichtiger.
     In Flarums Schublade bleiben sie sichtbar: dort sind die Reiter volle
     Zeilen, da ist Platz (sheeps-header-ext/forum.css). */
  .sheeps-tab-badge { display: none; }
}

/* Ganz schmal bleibt nur das Zeichen stehen, damit die Reiter Platz haben. */
@media (max-width: 430px) {
  .sheeps-brand-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .si-dot { animation: none; }
  .si-btn:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}