/* =========================
   Hero-Bereich
   ========================= */
.hero-image {
  position: relative;
  height: 20vh;
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
}
.hero-image { padding-top: var(--header-h, 0px); }

header.is-fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}

/* Hauptinhalt */
main {
  padding: 2rem;
  z-index: 4;
  position: relative;
  background: white;
}

/* =========================
   Subnavigation / Scroller
   ========================= */
.tools-nav {
  width: 100%;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  gap: 12px;
  align-items: center;
  margin: 1.25rem 0 1.5rem;
}

/* Farbwerte */
:root {
  --blue: #1e6fd9;
  --blue-strong: #1e6fd9; /* "fett" = typografisch fett + ggf. 2px-Rand */
  --grey: #bdbdbd;
  --text: #333;
  --white: #fff;
  --orange: #FFA500;
}

/* Pfeil-Buttons – immer sichtbar, aktiv/deaktiviert über :disabled */
.tools-nav-btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--blue);
  background: var(--white);
  font-size: 22px;
  line-height: 1;
  transition: background .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease, border-color .15s ease, border-width .15s ease;
  user-select: none;
  text-decoration: none;
  color: var(--blue);
}

/* Aktiviert (Standard) = blauer Rand & Icon auf weißem Hintergrund */
.tools-nav-btn:not(:disabled):hover {
  border-width: 2px;               /* "fetter" Rand im Hover */
  font-weight: 700;                /* "fettes" Icon */
  transform: translateY(-1px);
}
.tools-nav-btn.is-pressed {
  background: var(--orange) !important;  /* Klick: 1 Sekunde Orange (per JS-Klasse) */
  border-width: 2px;
  font-weight: 700;
}

/* Deaktiviert = grau, nicht klickbar */
.tools-nav-btn:disabled {
  background: var(--white);
  border: 1px solid var(--grey);
  color: var(--grey);
  cursor: default;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

/* Scroller */
.tools-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
.tools-scroller::-webkit-scrollbar { height: 8px; }
.tools-scroller::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .15);
  border-radius: 8px;
}

/* =========================
   Tool Chips – Subnavigation Buttons
   ========================= */
.tool-chip {
  display: inline-grid;
  grid-template-columns: 28px auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #3a7cd4;               /* Blau Standard (nicht aktiv) */
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  text-decoration: none;
  color: #fff;                        /* Weiß Standard */
  white-space: nowrap;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tool-chip:not(.active):hover {
  background: #3a7cd4;
  color: var(--orange);               /* Orange Hover */
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  text-decoration: none;
}
.tool-chip.active {
  background: var(--orange);          /* Orange Active */
  color: #3a7cd4;                     /* Blau Active */
}
.tool-chip.active:hover {
  transform: none;
  text-decoration: none;
}

/* Icons in den Chips folgen der Textfarbe */
.chip-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.chip-icon img,
.tool-chip svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  fill: currentColor;
  stroke: currentColor;
}

.chip-label { font-weight: 600; }

/* =========================
   Viewer
   ========================= */
.tools-viewer {
  width: 100%;
  min-height: 50vh;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
  overflow: hidden;
}
.tools-viewer iframe {
  display: block;
  width: 100%;
  height: min(72vh, 820px);
  border: 0;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 640px) {
  .tools-nav {
    grid-template-columns: 40px 1fr 40px;
  }
  .tools-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 10px;
  }
  .tool-chip {
    padding: 8px 12px;
    gap: 8px;
    border-radius: 12px;
  }
  .chip-icon { width: 24px; height: 24px; }
  .tools-viewer iframe { height: min(70vh, 720px); }
}