/* dld/dev – gemeinsame Komponenten. Diese Datei ist die verbindliche Basis für neue Seiten. */
:root {
  --site-bg: #07080d;
  --site-text: #f7f7fb;
  --site-muted: #a8adbd;
  --site-border: rgba(255, 255, 255, .12);
  --site-card: rgba(255, 255, 255, .07);
  --brand-slash: #21d4fd;
  --site-radius-card: 28px;
  --site-content-width: 1180px;
}

body {
  min-width: 320px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: 12px;
  color: var(--site-bg);
  background: var(--accent, #21d4fd);
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform .2s ease;
}

.skip-link:focus { transform: translateY(0); }

.nav-inner {
  min-height: 79px;
  max-width: var(--site-content-width);
  padding: 18px 22px;
}

.nav-links a[aria-current="page"] {
  color: var(--site-text, #f7f7fb);
  font-weight: 750;
}

.lang,
.mobile-nav-lang {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
}

.lang button,
.mobile-nav-lang button {
  min-width: 38px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: var(--site-muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.lang button.active,
.mobile-nav-lang button.active {
  color: #071018;
  background: var(--brand-slash);
}

.mobile-nav-lang { margin-top: 24px; width: fit-content; }

/* Die Marke dld/dev ist unabhängig vom jeweiligen App-Akzent immer Cyan. */
.brand .slash { color: var(--brand-slash) !important; }

/* Vertikale App-Screenshots bleiben auf der gesamten Projektseite gleich groß. */
body[data-project-i18n="sp-designer"] main .frame {
  width: min(100%, 432px);
  padding: 18px;
  justify-self: center;
  margin-inline: auto;
}

#related-projects .related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

#related-projects .related-item {
  min-height: 186px;
  padding: 24px;
  border: 1px solid var(--border, var(--card-border, var(--site-border)));
  border-radius: 24px;
  background: var(--card, var(--site-card));
}

#related-projects .related-item strong {
  display: block;
  margin-bottom: 8px;
  color: var(--accent, #21d4fd);
  font-size: 19px;
  letter-spacing: -.02em;
}

#related-projects .related-item p + p { margin-top: 14px; }

#related-projects .related-item a {
  color: var(--accent, #21d4fd);
  font-weight: 850;
}

.footer { min-height: 120px; }

@media (max-width: 980px) {
  .nav-inner { min-height: 68px; padding: 14px 16px; }
  .nav-inner > .lang { display: none; }
  #related-projects .related-grid { grid-template-columns: 1fr; }
  #related-projects .related-item { min-height: 0; }
}

@media (min-width: 981px) { .mobile-nav-lang { display: none; } }