/*
 * Cross-Subdomain Shell — gemeinsames CSS für die w3yh-Subdomains.
 * Spec: https://github.com/vibeY434/w3yh.xyz/blob/main/docs/cross-subdomain-shell.md
 *
 * Einbinden:
 *   <link rel="stylesheet" href="https://w3yh.xyz/cross-shell/cross-shell.css" />
 *
 * Oder CSS lokal duplizieren, falls keine Cross-Origin-Stylesheet gewünscht.
 */

/* ---------- Baustein 1: Back-Badge ---------- */

.cross-shell-badge-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0.5rem 1rem;
  background: rgba(14, 14, 12, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #232320;
}

.cross-shell-badge-wrap--inline {
  position: static;
  z-index: auto;
  padding: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
}

.cross-shell-badge {
  display: inline-flex;
  align-items: center;
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #a0a0a0;
  text-decoration: none;
  padding: 0.25rem 0;
  transition: color 180ms ease;
}

.cross-shell-badge:hover,
.cross-shell-badge:focus-visible {
  color: #ffaa00;
}

.cross-shell-badge--soft {
  color: #666666;
  letter-spacing: 0.14em;
}

/* ---------- Baustein 2: Footer-/Meta-Zeile ---------- */

.cross-shell-footer {
  margin-top: 4rem;
  border-top: 1px solid #232320;
  background: #161614;
  padding: 1.25rem 1rem;
  color: #a0a0a0;
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

.cross-shell-footer__inner {
  max-width: 60rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
  justify-content: space-between;
}

.cross-shell-footer__app {
  color: #a0a0a0;
}

.cross-shell-footer__brand {
  color: #ffaa00;
  text-decoration: none;
}

.cross-shell-footer__brand:hover,
.cross-shell-footer__brand:focus-visible {
  text-decoration: underline;
}

.cross-shell-footer__legal {
  color: #666666;
  flex-basis: 100%;
  text-align: center;
}

@media (min-width: 768px) {
  .cross-shell-footer__legal {
    flex-basis: auto;
    text-align: right;
  }
}

/* ---------- Baustein 3: Fokus-Stile ---------- */

:where(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgba(0, 255, 136, 0.7);
  outline-offset: 3px;
  border-radius: 0.25rem;
}