/* MONDO MEDIA Handbuch — Styles
   Brand: #F06603 (orange), #393939 (dark), #F9F9F9 (bg), #222 (text)
   Font: Helvetica Neue, system fallback */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222;
  background: #F9F9F9;
  line-height: 1.6;
}

a { color: #222; text-decoration: none; transition: color 0.2s; }
a:hover { color: #F06603; }

/* ─── Header ─── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 100px;
  background: #F9F9F9;
  border-bottom: 2px solid #393939;
  display: flex;
  align-items: center;
  padding: 1.5rem 2rem;
}

.site-header .logo img { height: 60px; width: auto; }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  margin-right: 1rem;
  color: #393939;
}

/* ─── Layout ─── */
.layout {
  display: flex;
  margin-top: 100px;
  min-height: calc(100vh - 100px);
}

/* ─── Sidebar ─── */
.sidebar {
  width: 280px;
  min-width: 280px;
  background: #fff;
  border-right: 1px solid #dee2e6;
  position: fixed;
  top: 100px;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.sidebar nav {
  flex: 1;
  overflow-y: auto;
  padding: 0 1rem 1rem;
}

/* ─── Search ─── */
.search-box {
  position: relative;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #dee2e6;
}

.search-box input {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  background: #f8f9fa;
  color: #222;
}

.search-box input:focus { outline: none; border-color: #F06603; }

.search-clear {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #999;
  cursor: pointer;
  display: none;
}

.search-clear:hover { color: #333; }

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 400px;
  max-height: 50vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 0.25rem 0.25rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 200;
  display: none;
}

.search-results.visible { display: block; }

.search-results a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0.75rem;
  gap: 1rem;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.875rem;
}

.search-results a:last-child { border-bottom: none; }
.search-results a:hover { background: #f8f9fa; }
.search-results .section { color: #aaa; font-size: 0.75rem; white-space: nowrap; flex-shrink: 0; }

/* ─── Navigation tree ─── */
.nav-tree, .nav-tree ul { list-style: none; padding: 0; margin: 0; }
.nav-tree ul { padding-left: 1rem; }

.nav-tree li { margin: 0; }

.nav-tree a {
  display: block;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  color: #393939;
  border-radius: 0.2rem;
}

.nav-tree a:hover { color: #F06603; background: #f8f9fa; }
.nav-tree a.active { color: #F06603; font-weight: 600; }

/* Details/summary for collapsible sections */
.nav-tree details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.nav-tree details > summary::-webkit-details-marker { display: none; }
.nav-tree details > summary::marker { display: none; content: ""; }

.nav-tree details > summary::before {
  content: "›";
  display: inline-block;
  width: 1rem;
  font-size: 0.9rem;
  color: #aaa;
  transition: transform 0.15s;
  flex-shrink: 0;
}

.nav-tree details[open] > summary::before { transform: rotate(90deg); }

.nav-tree details > summary a {
  display: inline;
  padding: 0.3rem 0;
}

/* ─── Content ─── */
.content {
  flex: 1;
  margin-left: 280px;
  padding: 2rem 3rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.content article {
  flex: 1;
  max-width: 900px;
}

.content article h1 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #222;
}

.content article h2 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid #dee2e6;
}

.content article h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.content article p { margin-bottom: 1rem; }

.content article img {
  max-width: 100%;
  height: auto;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  margin: 0.5rem 0;
}

.content article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.content article th, .content article td {
  padding: 0.5rem;
  border: 1px solid #dee2e6;
  text-align: left;
}

.content article th { background: #393939; color: #fff; }

.content article ul, .content article ol { margin: 0.5rem 0 1rem 1.5rem; }
.content article li { margin-bottom: 0.25rem; }

.content article a { color: #222; border-bottom: 1px solid #dee2e6; }
.content article a:hover { color: #F06603; border-bottom-color: #F06603; }

/* ─── Breadcrumb ─── */
.breadcrumb { margin-bottom: 1rem; }

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  font-size: 0.85rem;
}

.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li::after { content: "›"; margin: 0 0.5rem; color: #adb5bd; }
.breadcrumb li:last-child::after { display: none; }
.breadcrumb li.current { color: #666; }
.breadcrumb a { color: #393939; border: none; }
.breadcrumb a:hover { color: #F06603; }

/* ─── Child page cards ─── */
.child-pages { margin-top: 2rem; }
.child-pages h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; border: none; }

.child-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.child-card {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  height: 100%;
}

.child-card:hover { border-color: #F06603; box-shadow: 0 2px 8px rgba(0,0,0,0.08); color: #222; }
.child-title { font-weight: 500; font-size: 0.9rem; }
.child-count { font-size: 0.75rem; color: #999; margin-top: 0.25rem; }

/* ─── Search results page ─── */
.search-page-title { margin-bottom: 0.25rem; }
.search-page-title em { color: #F06603; font-style: normal; font-weight: 600; }

.result-count { color: #666; font-size: 0.85rem; margin-bottom: 1.5rem; }
.no-results { color: #666; }

.search-result {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.search-result a { font-size: 1.05rem; font-weight: 500; border: none; }
.search-result .result-section { display: block; font-size: 0.8rem; color: #999; margin-top: 0.15rem; }

/* Search dropdown "show all" link */
.search-results a.show-all {
  display: block;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.8rem;
  color: #F06603;
  border-top: 1px solid #dee2e6;
}

/* ─── Footer ─── */
.site-footer {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid #dee2e6;
  font-size: 0.8rem;
  color: #666;
  text-align: center;
}

.site-footer div { margin-top: 0.5rem; }
.site-footer a { color: #666; border: none; }
.site-footer a:hover { color: #F06603; }

/* ─── Overlay for mobile ─── */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 5;
}

.overlay.visible { display: block; }

/* ─── Mobile ─── */
@media (max-width: 768px) {
  .menu-toggle { display: block; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s;
    width: 280px;
  }

  .sidebar.open { transform: translateX(0); }

  .content { margin-left: 0; padding: 1.5rem; }

  .site-header { padding: 1rem; height: 70px; }
  .site-header .logo img { height: 40px; }
  .layout { margin-top: 70px; }
  .sidebar { top: 70px; }

  .search-results { width: 100%; }
}