/* =========================================================
   ResQ Header – normaler Seitenheader (ca. 11vh)
   ========================================================= */

/* ---------- Basis-Variablen ---------- */
:root {
  --header-h: 11vh;        /* Zielhöhe Header = 11% */
  --scale-w: 1;            /* skaliert bei schmalen Screens runter */
  --global-filter: none;

  --rsq-bg: #efefef;
  --rsq-fg: #111111;
  --rsq-sep: #c7c7c7;
  --rsq-muted: #7a7a7a;
  --rsq-accent: rgb(5, 15, 50);
}

/* Themes (falls du per data-theme arbeitest) */
:root[data-theme="dark"] {
  --rsq-bg: #444444;
  --rsq-fg: #ffffff;
  --rsq-sep: #9a9a9a;
  --rsq-muted: #cfcfcf;
}
:root[data-theme="light"] {
  --rsq-bg: #ffffff;
  --rsq-fg: #111111;
  --rsq-sep: #dedede;
  --rsq-muted: #6b6b6b;
}
:root[data-theme="comfort"] {
  --rsq-bg: #ffffff;
  --rsq-fg: #1c1c1c;
  --rsq-sep: #d9d9d9;
  --rsq-muted: #747474;
  --global-filter: brightness(0.9) saturate(0.95);
}

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

.rsq-header a {
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   Header Layout
   ========================================================= */

.rsq-header {
  height: var(--header-h);
  max-height: 11vh;
  min-height: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 clamp(12px, 2vw, 24px);
  background: var(--rsq-bg);
  color: var(--rsq-fg);
  border-bottom: 5px solid var(--rsq-accent);

  filter: var(--global-filter);
  overflow: hidden;
  white-space: nowrap;
}

/* linke + rechte Seite */
.rsq-side {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: calc(var(--header-h) * 0.12 * var(--scale-w));
  min-width: 0;
}

.rsq-right {
  flex: 1 1 auto;
  justify-content: flex-end;
}

/* Trennstrich */
.rsq-sep {
  width: 2px;
  height: calc(var(--header-h) * 0.8);
  background: var(--rsq-sep);
  margin: 0 calc(var(--header-h) * 0.08 * var(--scale-w));
}

/* =========================================================
   Icons & Labels
   ========================================================= */

.rsq-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--header-h) * 0.05 * var(--scale-w));
  color: inherit;
  cursor: pointer;
}

.rsq-icon-label {
  font-size: calc(var(--header-h) * 0.11 * var(--scale-w));
  line-height: 1;
}

/* Standard-Icons */
.rsq-icon img {
  width:  calc(var(--header-h) * 0.36 * var(--scale-w));
  height: calc(var(--header-h) * 0.36 * var(--scale-w));
  display: block;
}

/* Linke Haupt-Icons etwas größer */
.rsq-left .rsq-icon img {
  width:  calc(var(--header-h) * 0.44 * var(--scale-w));
  height: calc(var(--header-h) * 0.44 * var(--scale-w));
}

/* Kleine Status-Icons (rechts, gestapelt) */
.rsq-small img {
  width:  calc(var(--header-h) * 0.2 * var(--scale-w));
  height: calc(var(--header-h) * 0.2 * var(--scale-w));
}

.rsq-plain {
  background: none;
  border: none;
  padding: 0;
}

/* Dark-Theme: weiße Piktogramme */
:root[data-theme="dark"] .rsq-icon img {
  filter: brightness(0) invert(1);
}
:root[data-theme="light"] .rsq-icon img,
:root[data-theme="comfort"] .rsq-icon img {
  filter: none;
}

/* Rechte Spalte: kleine Icons-Stapel */
.rsq-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--header-h) * 0.08 * var(--scale-w));
}

/* =========================================================
   Uhr & Datum
   ========================================================= */

.rsq-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: calc(var(--header-h) * 1.1);
}

.rsq-clock-time {
  font-size: calc(var(--header-h) * 0.32 * var(--scale-w));
  font-weight: 800;
  line-height: 1.05;
}

.rsq-clock-date {
  font-size: calc(var(--header-h) * 0.15 * var(--scale-w));
  margin-top: 2px;
  color: var(--rsq-muted);
}

/* =========================================================
   Crew – 2×2
   ========================================================= */

.rsq-crew {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;

  gap: calc(var(--header-h) * 0.08 * var(--scale-w))
       calc(var(--header-h) * 0.16 * var(--scale-w));
}

.rsq-crew-item {
  white-space: nowrap;
  text-align: left;
  min-width: 0;
}

.rsq-crew-qual {
  font-size: calc(var(--header-h) * 0.13 * var(--scale-w));
}

.rsq-crew-name {
  font-size: calc(var(--header-h) * 0.16 * var(--scale-w));
  text-overflow: ellipsis;
  overflow: hidden;
}

/* =========================================================
   Breiten-Skalierung
   ========================================================= */

@media (max-width: 1600px) { :root { --scale-w: 0.95; } }
@media (max-width: 1400px) { :root { --scale-w: 0.90; } }
@media (max-width: 1250px) { :root { --scale-w: 0.85; } }
@media (max-width: 1120px) { :root { --scale-w: 0.80; } }
@media (max-width: 1000px) { :root { --scale-w: 0.75; } }
@media (max-width: 900px)  { :root { --scale-w: 0.70; } }
@media (max-width: 820px)  { :root { --scale-w: 0.66; } }
@media (max-width: 760px)  { :root { --scale-w: 0.62; } }

/* Schmale Screens: Labels ausblenden, um Kollisionen zu vermeiden */
@media (max-width: 1100px) {
  .rsq-icon-label {
    display: none;
  }
  .rsq-sep {
    margin: 0 calc(var(--header-h) * 0.05);
  }
}

/* Sehr schmal: Crew kompakter – aber Qualifikation UND Name bleiben sichtbar */
@media (max-width: 720px) {
  .rsq-crew {
    gap: calc(var(--header-h) * 0.06)
         calc(var(--header-h) * 0.10);
  }
  .rsq-crew-qual {
    font-size: calc(var(--header-h) * 0.11 * var(--scale-w));
  }
  .rsq-crew-name {
    font-size: calc(var(--header-h) * 0.13 * var(--scale-w));
  }
}