/*
 * infopage.css
 * Stile für das infopage.html-Template
 * Enthält: Hero-Eyebrow, TOC-Button, Overlay-Backdrop, Panel, Baum-Struktur
 */

/* ═══════════════════════════════════════════════════════════════
   1. HERO-BEREICH
   ═══════════════════════════════════════════════════════════════ */

/* Eyebrow-Zeile im infopage-Hero (goldgelb, Versalien) */
.infopage-hero .infopage-eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-1, #f3b700);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(0, 0, 0, 0.2);
}


/* ═══════════════════════════════════════════════════════════════
   2. TOC-TRIGGER-BUTTON
   ═══════════════════════════════════════════════════════════════ */

.ipt-toc-bar {
  margin-bottom: 1.75rem;
}

.ipt-toc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.1rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ani-blue, #3a71b1);
  background: var(--bg-section-light, #fff);
  border: 1.5px solid var(--ani-blue, #3a71b1);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ipt-toc-btn:hover,
.ipt-toc-btn:focus-visible,
.ipt-toc-btn[aria-expanded="true"] {
  background: var(--ani-blue, #3a71b1);
  color: #fff;
}

.ipt-toc-btn:focus-visible {
  outline: 3px solid var(--focus-ring, #ff9800);
  outline-offset: 2px;
}

.ipt-toc-btn-icon {
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   3. OVERLAY-BACKDROP
   ═══════════════════════════════════════════════════════════════ */

.ipt-toc-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(18, 33, 49, 0.5);   /* --ani-black mit Alpha */
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5rem 1rem 2rem;

  /* Einblend-Animation */
  animation: ipt-fade-in 0.18s ease;
}

/*
 * Das [hidden]-Attribut setzt display:none im Browser-Stylesheet, aber
 * display:flex oben wuerde es ueberschreiben.  Diese Regel verhindert das.
 */
.ipt-toc-overlay[hidden] {
  display: none !important;
}

@keyframes ipt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Animation deaktivieren wenn Nutzer das bevorzugt */
@media (prefers-reduced-motion: reduce) {
  .ipt-toc-overlay {
    animation: none;
  }
}


/* ═══════════════════════════════════════════════════════════════
   4. INHALTSVERZEICHNIS-PANEL
   ═══════════════════════════════════════════════════════════════ */

.ipt-toc-panel {
  background: var(--bg-section-light, #fff);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  width: 100%;
  max-width: 700px;
  max-height: calc(80vh - 4rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Eingleit-Animation */
  animation: ipt-slide-down 0.2s ease;
}

@keyframes ipt-slide-down {
  from { transform: translateY(-12px); opacity: 0.6; }
  to   { transform: translateY(0);     opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
  .ipt-toc-panel {
    animation: none;
  }
}

/* Panel-Kopfzeile */
.ipt-toc-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border-soft, rgba(0, 0, 0, 0.08));
  flex-shrink: 0;
  background: var(--bg-section-neutral, #f0f2f5);
}

.ipt-toc-panel-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
}

/* Schließen-Button (✕) */
.ipt-toc-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 4px);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text-muted, #444);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.ipt-toc-close-btn:hover,
.ipt-toc-close-btn:focus-visible {
  background: var(--border-soft, rgba(0, 0, 0, 0.1));
  color: var(--text-main);
}

.ipt-toc-close-btn:focus-visible {
  outline: 3px solid var(--focus-ring, #ff9800);
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════
   5. BAUMSTRUKTUR (Explorer-Stil)
   ═══════════════════════════════════════════════════════════════ */

/* Scrollbarer Baum-Container */
.ipt-toc-tree {
  overflow-y: auto;
  padding: 0.5rem 0;
  flex: 1 1 auto;
}

.ipt-toc-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ipt-toc-tree li {
  margin: 0;
  padding: 0;
  position: relative;
}

/*
 * Einrückung je Hierarchie-Tiefe.
 * depth-0 = h2-Ebene (oberstes Level im Baum)
 * depth-1 = h3, depth-2 = h4, depth-3 = h5+
 * Das padding wirkt auf .ipt-node-row innerhalb des li.
 */
.ipt-depth-0 > .ipt-node-row { padding-left: 0.75rem; }
.ipt-depth-1 > .ipt-node-row { padding-left: 2.1rem;  }
.ipt-depth-2 > .ipt-node-row { padding-left: 3.45rem; }
.ipt-depth-3 > .ipt-node-row { padding-left: 4.8rem;  }

/*
 * Vertikale Verbindungslinie (Explorer-Stil) für eingerückte Ebenen.
 * Wird als :before-Pseudo-Element des li gezeichnet.
 */
.ipt-depth-1::before,
.ipt-depth-2::before,
.ipt-depth-3::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-soft, rgba(0, 0, 0, 0.12));
  pointer-events: none;
}

.ipt-depth-1::before { left: 1.5rem;  }
.ipt-depth-2::before { left: 2.75rem; }
.ipt-depth-3::before { left: 4rem;    }

/* Zeile (Pfeil + Symbol + Link) */
.ipt-node-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding-top: 0.22rem;
  padding-right: 0.75rem;
  padding-bottom: 0.22rem;
  border-radius: 4px;
  margin: 0 0.35rem;
  cursor: default;
  transition: background 0.1s;
}

.ipt-node-row:hover {
  background: var(--bg-section-neutral, #f0f2f5);
}

/* Aufklapp-Pfeil */
.ipt-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: none;
  border: none;
  border-radius: 3px;
  padding: 0;
  font-size: 0.6rem;
  line-height: 1;
  color: var(--text-muted, #666);
  cursor: pointer;
  transition: transform 0.15s, background 0.1s;
}

.ipt-expand-btn:hover,
.ipt-expand-btn:focus-visible {
  background: var(--border-soft, rgba(0, 0, 0, 0.1));
  outline: none;
}

.ipt-expand-btn:focus-visible {
  outline: 2px solid var(--focus-ring, #ff9800);
  outline-offset: 1px;
}

/* Pfeil dreht sich bei geöffnetem Zustand */
.ipt-expand-btn.is-open {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .ipt-expand-btn {
    transition: none;
  }
}

/* Platzhalter ohne Pfeil (Blattknoten) */
.ipt-expand-placeholder {
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* Ordner- / Dokument-Symbol */
.ipt-node-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 20px;
  font-size: 0.9rem;
  line-height: 1;
}

/* Navigations-Link */
.ipt-node-link {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-main);
  text-decoration: none;
  flex: 1;
  cursor: pointer;
}

.ipt-node-link:hover,
.ipt-node-link:focus-visible {
  color: var(--ani-blue, #3a71b1);
  text-decoration: underline;
}

.ipt-node-link:focus-visible {
  outline: 2px solid var(--focus-ring, #ff9800);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Kindliste — eingeklappt */
.ipt-children.is-collapsed {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════
   6. RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 48rem) {
  .ipt-toc-overlay {
    padding: 4rem 0.75rem 1.5rem;
  }

  .ipt-toc-panel {
    max-height: 72vh;
  }

  .ipt-node-link {
    font-size: 0.9rem;      /* etwas größer auf Touch-Geräten */
  }
}