/* ===== Ergänzungen für die statische Version ===== */

@media (max-width: 480px) {
  #ss-tab-label { display: none; }
  #ss-duty-badge { max-width: 11ch; padding: 0.3rem 0.5rem; }
  #ss-duty-badge p:first-child { font-size: 9.5px; }
  #ss-duty-badge p:last-child { font-size: 8px; }
}

@media (min-width: 768px) {
  #ss-image-layer { max-height: 440px; }
}

.js-accordion-trigger svg.lucide-chevron-down {
  transition: transform 0.2s ease;
}
.js-accordion-trigger[aria-expanded="true"] svg.lucide-chevron-down {
  transform: rotate(180deg);
}

/* FAQ chevron rotation (native <details>) */
details[open] > summary .faq-plus {
  transform: rotate(45deg);
}
summary {
  -webkit-tap-highlight-color: transparent;
}
summary::-webkit-details-marker {
  display: none;
}

/* Lightbox for zoomable diagrams */
.dfi-switcher [data-dfi-state] {
  display: none;
}
.dfi-switcher [data-dfi-state].dfi-active {
  display: flex;
}

.dark\:hidden:is(.dark *) {
  display: none;
}
.dark\:block:is(.dark *) {
  display: block;
}

.brand-logo-pill {
  background-color: var(--background);
}
.brand-logo-pill:is(.dark *) {
  background-color: #fff;
}

#zoomable-0 .min-h-0.flex-1 {
  aspect-ratio: 1560 / 970;
  flex: 0 1 auto;
  min-height: 0;
  height: auto;
  align-self: center;
  width: 100%;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--ink);
  display: none;
  flex-direction: column;
}
.lightbox-overlay.open {
  display: flex;
}
.lightbox-stage {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.lightbox-stage.dragging {
  cursor: grabbing;
}
.lightbox-stage-inner {
  transform-origin: center center;
  transition: transform 0.05s linear;
  padding: 2rem;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 2px;
  border: 1px solid rgb(255 255 255 / 0.3);
  background: rgb(9 21 36 / 0.8);
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: white;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.lightbox-close:hover {
  border-color: rgb(255 255 255 / 0.6);
  background: rgb(255 255 255 / 0.1);
}
.lightbox-controls {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 2px;
  border: 1px solid rgb(255 255 255 / 0.25);
  background: rgb(9 21 36 / 0.85);
  padding: 0.25rem;
  backdrop-filter: blur(4px);
}
.lightbox-controls button {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  color: rgb(255 255 255 / 0.85);
  background: transparent;
  border: none;
  cursor: pointer;
}
.lightbox-controls button:hover {
  background: rgb(255 255 255 / 0.1);
}
.lightbox-controls .reset-label {
  padding-inline: 0.75rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgb(255 255 255 / 0.8);
  text-transform: uppercase;
  cursor: pointer;
  background: none;
  border: none;
}
body.lightbox-open {
  overflow: hidden;
}

/* Mobile nav */
.mobile-nav-toggle {
  display: none;
}
.mobile-nav-panel {
  display: none;
}
@media (max-width: 1023px) {
  .mobile-nav-toggle {
    display: inline-flex;
  }
  .mobile-nav-panel {
    position: fixed;
    inset: 4rem 0 0 0;
    z-index: 39;
    background: var(--color-background);
    border-top: 1px solid var(--color-border-soft);
    padding: 1.5rem 1.25rem;
    overflow-y: auto;
  }
  .mobile-nav-panel:not(.open) {
    display: none;
  }
  .mobile-nav-panel.open {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .mobile-nav-panel a {
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-foreground);
  }
}