/* Rahmen: Kopfzeile, Fusszeile, Sprunglink und Farbschema-Schalter fuer
   alle Seiten. Eine Quelle (scripts/partials/), ein Stilblatt. Die Token
   kommen aus assets/tokens.css, das der Build davor einsetzt. */

/* Ein Fokusring fuer alle Seiten: Handlungsfarbe, zwei Pixel Abstand. */
:focus-visible {
  outline: 2px solid var(--zr2-action);
  outline-offset: 2px;
}

.zr-skip-link {
  position: fixed;
  z-index: 1000;
  left: 16px;
  top: 12px;
  padding: var(--zr2-space-3) var(--zr2-space-4);
  border: 2px solid var(--zr2-action);
  border-radius: var(--zr2-radius-control);
  background: var(--zr2-surface);
  color: var(--zr2-ink);
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-180%);
}

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

/* --- Kopfzeile ---------------------------------------------------------- */
.zr-kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--zr2-nav);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--zr2-line);
  box-shadow: 0 1px 0 var(--zr2-surface-tint);
}

.zr-header-top {
  max-width: var(--zr2-content);
  margin: 0 auto;
  padding: var(--zr2-space-2) var(--zr2-space-6);
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--zr2-space-2) var(--zr2-space-6);
  flex-wrap: wrap;
}

.zr-brand-lockup {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--zr2-space-2);
  margin: 0;
  color: var(--zr2-ink);
  font-family: 'Archivo', 'Instrument Sans', system-ui, sans-serif;
  font-size: var(--zr2-type-lead);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  text-decoration: none;
}

.zr-brand-lockup svg {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid var(--zr2-trust-tint);
  border-radius: var(--zr2-radius-control);
  box-shadow: 0 8px 24px var(--zr2-shadow-color);
}

.zr-brand-word > span {
  color: var(--zr2-trust);
}

.zr-header-nav {
  display: flex;
  gap: var(--zr2-space-2) var(--zr2-space-4);
  margin-left: auto;
  align-items: center;
  flex-wrap: wrap;
}

.zr-desktop-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--zr2-type-small);
  font-weight: 600;
  color: var(--zr2-body);
  text-decoration: none;
  padding: var(--zr2-space-2) 0;
}

.zr-desktop-link:hover {
  color: var(--zr2-trust);
}

.zr-desktop-link[aria-current="page"] {
  color: var(--zr2-ink);
  text-decoration: underline;
  text-decoration-color: var(--zr2-action);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.zr-theme-button {
  display: inline-flex;
  align-items: center;
  gap: var(--zr2-space-2);
  min-height: 44px;
  padding: 0 var(--zr2-space-3);
  background: none;
  border: 1.5px solid var(--zr2-line-strong);
  border-radius: var(--zr2-radius-control);
  color: var(--zr2-ink);
  font: inherit;
  font-size: var(--zr2-type-caption);
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
}

.zr-theme-button:hover {
  border-color: var(--zr2-trust);
  color: var(--zr2-trust);
}

.zr-theme-icon {
  font-size: var(--zr2-type-body);
}

.zr-header-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zr2-space-2);
  padding: var(--zr2-space-2) var(--zr2-space-4);
  border: 0;
  border-radius: var(--zr2-radius-control);
  background: var(--zr2-action);
  color: var(--zr2-action-ink);
  font: inherit;
  font-size: var(--zr2-type-small);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.zr-header-cta:hover {
  background: var(--zr2-action-hover);
  color: var(--zr2-action-ink);
}

.zr-cta-short {
  display: none;
}

.zr-mobile-nav {
  display: none;
}

/* --- Fusszeile ---------------------------------------------------------- */
.zr-fuss {
  background: var(--zr2-panel-gruen);
  color: var(--zr2-panel-gruen-text);
  overflow-wrap: anywhere;
}

.zr-fuss-oben {
  max-width: var(--zr2-content);
  margin: 0 auto;
  padding: var(--zr2-space-8) var(--zr2-space-6) var(--zr2-space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--zr2-space-4) var(--zr2-space-7);
  align-items: center;
  justify-content: space-between;
}

.zr-brand-lockup.is-footer {
  color: var(--zr2-licht);
  margin-bottom: var(--zr2-space-2);
}

/* Die Fusszeile bleibt in beiden Themen dunkelgruen; der Akzent der
   Wortmarke braucht deshalb den panelfesten Ton, nicht den des Themas
   (hell: 2,66:1 gemessen, Phase 2). */
.zr-brand-lockup.is-footer .zr-brand-word > span {
  color: var(--zr2-panel-gruen-akzent);
}

.zr-fuss-claim {
  font-size: var(--zr2-type-caption);
  line-height: 1.6;
  color: var(--zr2-panel-gruen-leise);
  margin: 0;
  max-width: 40ch;
}

.zr-fuss-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zr2-space-1) var(--zr2-space-4);
  font-size: var(--zr2-type-small);
}

.zr-fuss-nav a {
  color: var(--zr2-panel-gruen-text);
  text-decoration: none;
  padding: var(--zr2-space-2) 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.zr-fuss-nav a:hover {
  color: var(--zr2-licht);
  text-decoration: underline;
}

.zr-fuss-rolle {
  max-width: var(--zr2-content);
  margin: 0 auto;
  padding: 0 var(--zr2-space-6) var(--zr2-space-7);
  font-size: var(--zr2-type-label);
  line-height: 1.6;
  color: var(--zr2-panel-gruen-rolle);
}

.zr-fuss-rolle span {
  display: inline-block;
  margin-right: var(--zr2-space-2);
}

/* --- Schmale Schirme ---------------------------------------------------- */
@media (max-width: 760px) {
  .zr-header-top {
    min-height: 58px;
    padding: var(--zr2-space-2) var(--zr2-space-4);
    gap: var(--zr2-space-2);
    flex-wrap: nowrap;
  }

  .zr-header-nav {
    gap: var(--zr2-space-2);
    flex-wrap: nowrap;
  }

  .zr-desktop-link {
    display: none;
  }

  .zr-header-cta {
    font-size: var(--zr2-type-caption);
    padding: var(--zr2-space-2) var(--zr2-space-3);
    min-height: 44px;
  }

  .zr-theme-button {
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--zr2-space-2);
  }

  .zr-theme-label {
    display: none;
  }

  .zr-mobile-nav {
    display: block;
    position: relative;
    background: transparent;
  }

  .zr-mobile-nav > summary {
    cursor: pointer;
    list-style: none;
    min-width: 52px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--zr2-type-caption);
    font-weight: 700;
    color: var(--zr2-body);
    border-radius: var(--zr2-radius-control);
  }

  .zr-mobile-nav > summary::-webkit-details-marker {
    display: none;
  }

  .zr-mobile-nav > summary::after {
    content: ' +';
    color: var(--zr2-trust);
  }

  .zr-mobile-nav[open] > summary::after {
    content: ' −';
  }

  .zr-mobile-nav > div {
    position: absolute;
    z-index: 60;
    right: 0;
    top: calc(100% + 6px);
    min-width: 190px;
    display: grid;
    padding: var(--zr2-space-2);
    background: var(--zr2-surface);
    border: 1px solid var(--zr2-line);
    border-radius: var(--zr2-radius-control);
  }

  .zr-mobile-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--zr2-space-2) var(--zr2-space-2);
    font-size: var(--zr2-type-caption);
    font-weight: 650;
    color: var(--zr2-ink);
    text-decoration: none;
    border-radius: var(--zr2-radius-control);
  }

  .zr-mobile-nav a:hover {
    background: var(--zr2-line);
  }

  .zr-fuss-oben {
    padding: var(--zr2-space-7) var(--zr2-space-4) var(--zr2-space-2);
  }

  .zr-fuss-rolle {
    padding: 0 var(--zr2-space-4) var(--zr2-space-7);
  }
}

@media (max-width: 390px) {
  .zr-header-cta {
    padding: var(--zr2-space-2) var(--zr2-space-3);
  }

  /* Der lange Text bleibt der zugaengliche Name des Links (axe link-name,
     Befund Phase 4 bei 390 px); sichtbar ist nur die Kurzform. */
  .zr-cta-long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .zr-cta-short {
    display: inline;
  }
}