/* ---------------------------------------------------------------------------
   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;
}

/* Das Logo mit "SI" (assets/img/logo-*.png aus scripts/make-icons.ps1). Im
   Forum steht dasselbe Bild per CSS vor dem Titel (sheeps-header-ext/forum.css). */
.sheeps-brand-mark {
  flex: none;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.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;
}

/* --- Rechte Seite: Suche, Sprache, Glocke, Konto ------------------------
   Wie Flarums Header-secondary: Symbolknoepfe und Aufklappmenues. Gebaut aus
   <details>, damit die Menues auch ohne JavaScript aufgehen; site.js sorgt
   nur dafuer, dass immer eines offen ist und ein Klick daneben schliesst.
   Markup: si_header() in web/shared/kit.php. */

.sheeps-actions {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

.sheeps-drop { position: relative; }

.sheeps-drop > summary { list-style: none; cursor: pointer; }
.sheeps-drop > summary::-webkit-details-marker { display: none; }

.sheeps-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--si-radius-sm);
  color: var(--si-muted);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.sheeps-icon-btn:hover,
.sheeps-drop[open] > .sheeps-icon-btn { color: var(--si-text); background: var(--si-surface-hover); }
.sheeps-icon-btn svg { width: 18px; height: 18px; display: block; }

.sheeps-drop-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--si-border-strong);
  border-radius: 10px;
  background: #1c1c36;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.75);
}

.sheeps-menu a {
  display: block;
  padding: 8px 12px 8px 30px;
  border-radius: 7px;
  color: var(--si-text);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.3;
  white-space: nowrap;
}
.sheeps-menu a:hover { background: var(--si-surface-hover); }
/* Der Haken vor der aktiven Sprache - wie in Flarums Sprachmenue. */
.sheeps-menu a.is-active { position: relative; color: var(--si-accent); }
.sheeps-menu a.is-active::before { content: "\2713"; position: absolute; left: 11px; }

.sheeps-menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--si-border); }

.sheeps-menu-head {
  margin: 0 0 6px;
  padding: 6px 12px 10px;
  border-bottom: 1px solid var(--si-border);
  color: var(--si-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}
.sheeps-menu-head strong { color: var(--si-text); }

.sheeps-search-panel { min-width: 280px; padding: 8px; }
.sheeps-search-panel input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--si-border-strong);
  border-radius: 8px;
  background: var(--si-bg);
  color: var(--si-text);
  font: inherit;
  font-size: 0.9rem;
}
.sheeps-search-panel input:focus { outline: none; border-color: var(--si-accent); }

.sheeps-bell-count {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #e5534b;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

/* Nur fuer Bildschirmleser - Beschriftungen, die sichtbar doppelt waeren. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Posteingang hinter der Glocke (seit 15.09.) -------------------------
   Support-Tickets, Server-Tickets, wartende Tickets fuers Team, Forum. */
.sheeps-inbox-panel { width: 330px; }
.sheeps-inbox-list { max-height: 360px; overflow-y: auto; }
.sheeps-menu a.sheeps-inbox-item {
  padding: 8px 12px;
  white-space: normal;
}
.sheeps-inbox-subject {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheeps-inbox-meta {
  display: block;
  margin-top: 2px;
  color: var(--si-muted);
  font-size: 0.76rem;
}
.sheeps-inbox-staff,
.sheeps-inbox-forum { font-weight: 600; }
.sheeps-inbox-empty {
  margin: 0;
  padding: 10px 12px;
  color: var(--si-muted);
  font-size: 0.86rem;
}

/* Auf dem Telefon sitzt die Glocke zu weit links fuer 330px nach links -
   dann ueber die ganze Breite. */
@media (max-width: 520px) {
  .sheeps-inbox-panel {
    /* fixed bezieht sich hier auf die Kopfleiste (backdrop-filter macht sie
       zum Bezugsrahmen) - die liegt oben ueber die volle Breite, passt also. */
    position: fixed;
    top: calc(var(--si-nav-h) + 8px);
    left: 12px;
    right: 12px;
    width: auto;
  }
}

/* --- Anmeldebereich ------------------------------------------------------
   Standardzustand im HTML ist "Gast"; site.js setzt Glocke und Konto-Menue
   aus der Vorlage (#sheeps-user-template) ein, wenn die Sitzungsabfrage
   jemanden meldet. Die Kontoverwaltung zeigt beides gleich serverseitig. */

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

.sheeps-auth-link {
  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-auth-link:hover { color: var(--si-text); background: var(--si-surface-hover); }

/* Das Symbol ersetzt die Beschriftung erst auf dem Telefon. */
.sheeps-auth-icon { display: none; width: 17px; height: 17px; }

.sheeps-user {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  color: var(--si-text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sheeps-user:hover,
.sheeps-drop[open] > .sheeps-user { border-color: var(--si-accent-line); background: var(--si-surface-hover); }

/* Name oben, Freundeskennung darunter - dieselbe Anzeige wie im Launcher und
   im Forum (sheeps-header-ext/forum.css). */
.sheeps-user-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.sheeps-user-name {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheeps-user-fid {
  color: var(--si-muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.sheeps-user-fid:empty { display: none; }

.sheeps-user-avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.sheeps-user-initial {
  display: grid;
  place-items: center;
  background: var(--si-accent-soft);
  color: var(--si-accent);
  font-size: 0.72rem;
  font-weight: 800;
}

/* --- 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;
}

/* Umbrechen ist Pflicht: Seit es acht Links sind, war die Zeile auf einem
   375px-Telefon 454px breit. Die Seite wurde dadurch breiter als der
   Bildschirm, und die fixierte Kopfleiste schob Sprache und Anmelden rechts
   aus dem Bild (13.09.). */
.si-footer-links { display: flex; flex-wrap: wrap; gap: 8px 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; gap: 8px; }
  .sheeps-brand-mark { width: 30px; height: 30px; }
  .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; }

  /* Mit dem Anmeldebereich wird es trotzdem eng. Der Reiterstreifen darf
     deshalb seitlich scrollen - Marke und Anmeldung bleiben stehen, und kein
     Reiter wird unerreichbar, egal wie viele noch dazukommen. */
  .sheeps-tabs {
    flex: 1 1 auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sheeps-tabs::-webkit-scrollbar { display: none; }

  /* Anmeldebereich auf ein Symbol eindampfen. "Registrieren" faellt weg -
     Flarums Anmeldefenster bietet den Wechsel dorthin selbst an. */
  .sheeps-auth-signup { display: none; }
  .sheeps-auth-icon { display: block; }
  .sheeps-auth-label { display: none; }
  .sheeps-auth-link { padding: 7px 9px; }
  .sheeps-user { padding: 4px; gap: 0; }
  .sheeps-user-text { display: none; }

  /* Die Suche fuehrt ohnehin ins Forum - auf dem Telefon ist der Platz fuer
     Reiter und Konto wichtiger. */
  .sheeps-search { display: none; }
  .sheeps-icon-btn { width: 32px; height: 32px; }
}

/* 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; }
}

/* ---------------------------------------------------------------------------
   Cookie-Hinweis (cookie-notice.js)

   Unten angeheftet, aber NICHT bildschirmfuellend und ohne Abdunkelung: Er ist
   eine Auskunft, keine Huerde. Wer ihn ignoriert, kann die Seite trotzdem
   benutzen - genau das unterscheidet einen Hinweis von einer Einwilligung.
   --------------------------------------------------------------------------- */

.si-cookie {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 200;
  width: min(760px, calc(100vw - 32px));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid var(--si-border-strong);
  /* Deckend: --si-surface ist halbtransparent, und darunter schien die Seite
     durch ("Was hier entsteht" mitten im Hinweis, am 13.09. gesehen). */
  background: #1c1c36;
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .75);
}

.si-cookie-text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--si-muted);
}

.si-cookie-text a { color: var(--si-accent, #00aeff); }

.si-cookie-ok { flex: 0 0 auto; }

/* Auf schmalen Geraeten unter den Text, sonst wird der Text zum Streifen. */
@media (max-width: 560px) {
  .si-cookie { gap: 12px; }
  .si-cookie-ok { width: 100%; }
}