/* Seitenpanel zur Orientierung. */
:root { --sp-breite: 248px; }

.sp-panel {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 190;
  width: var(--sp-breite);
  box-sizing: border-box;
  padding: 104px var(--space-5) var(--space-7);
  overflow-y: auto;
  background: var(--bg-alt);
  border-right: 1px solid var(--border-soft);
  font-family: var(--font-sans, inherit);
  font-size: 0.9375rem;
  line-height: 1.35;
  text-align: left;
}
.sp-kopf {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sp-panel ul { list-style: none; margin: 0; padding: 0; }
.sp-panel a { color: var(--text-body); text-decoration: none; }
.sp-bereich { margin-bottom: var(--space-2); }
.sp-bereich summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  list-style: none;
}
.sp-bereich summary::-webkit-details-marker { display: none; }
.sp-bereich summary::after {
  content: "";
  margin-left: auto;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}
.sp-bereich[open] summary::after { transform: rotate(45deg); }
.sp-bereich summary a { font-weight: 600; color: var(--text-strong); }
.sp-bereich summary:hover { background: var(--surface-card); }
.sp-bereich--aktiv > summary { background: var(--surface-card); box-shadow: inset 3px 0 0 var(--terra-500); }
.sp-bereich ul { margin: var(--space-2) 0 var(--space-3) var(--space-3); border-left: 1px solid var(--border-soft); }
.sp-bereich li a {
  display: block;
  margin-left: -1px;
  padding: 6px var(--space-3);
  border-left: 2px solid transparent;
  color: var(--text-muted);
}
.sp-bereich li a:hover { color: var(--text-strong); }
.sp-bereich li a.an { color: var(--terra-600); border-left-color: var(--terra-500); font-weight: 600; }
.sp-weitere { margin-top: var(--space-5) !important; padding-top: var(--space-4) !important; border-top: 1px solid var(--border-soft); }
.sp-weitere a { display: block; padding: 6px var(--space-3); font-size: 0.875rem; }
.sp-weitere a:hover, .sp-weitere a.an { color: var(--terra-600); }

.sp-knopf, .sp-schleier { display: none; }

/* Breite Bildschirme: Panel steht fest links, Seite rückt nach rechts. */
@media (min-width: 1200px) {
  html.mit-seitenpanel body { padding-left: var(--sp-breite); }
  html.mit-seitenpanel .mock-header { left: var(--sp-breite); }
}

/* Schmal: Panel als Schublade hinter dem Knopf «Inhalt». */
@media (max-width: 1199px) {
  .sp-panel {
    width: min(84vw, 320px);
    padding-top: var(--space-7);
    transform: translateX(-102%);
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    box-shadow: none;
    visibility: hidden;
    z-index: 260;
  }
  html.sp-offen .sp-panel { transform: none; box-shadow: var(--shadow-soft); visibility: visible; transition: transform 0.25s ease; }
  .sp-knopf {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 250;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--bg-dark);
    color: var(--text-on-terra, #fff);
    font: 600 0.875rem/1 var(--font-sans, inherit);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
  }
  html.sp-offen .sp-schleier { display: block; position: fixed; inset: 0; z-index: 255; background: rgba(20, 16, 12, 0.35); }
}

/* Keine Kopfzeile mehr: das Panel trägt Logo, Navigation und Kontakt (Philip, 11.10.2026). */
html.mit-seitenpanel .mock-header,
html.mit-seitenpanel .mock-mobile-nav { display: none !important; }

/* Unter 1200 px öffnet ein runder Knopf oben links das Panel. */
@media (max-width: 1199px) {
  html.mit-seitenpanel .sp-knopf {
    display: inline-flex !important;
    flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    top: 12px; left: 12px; bottom: auto;
    width: 46px; height: 46px; padding: 0;
    border: 1px solid var(--sand-300); border-radius: 999px;
    background: var(--cream-50);
    box-shadow: var(--shadow-soft);
  }
  html.mit-seitenpanel .sp-knopf span { display: block; width: 18px; height: 2px; border-radius: 999px; background: var(--terra-500); }
  html.sp-offen .sp-knopf { visibility: hidden; }
  /* Erstanalyse: die klebende Fortschrittsleiste macht dem Knopf Platz. */
  html.mit-seitenpanel .ea-progress-inner { padding-left: 70px; }
}
@media (min-width: 1200px) {
  html.mit-seitenpanel .sp-knopf { display: none !important; }
}

/* Farbe: Creme (cream-50) mit dunkler Schrift, Terracotta als Markierung (Philip, 11.10.2026). */
:root { --sp-farbe: var(--cream-50); }
.sp-panel { background: var(--sp-farbe); border-right: 1px solid var(--sand-300); color: var(--ink-900); }
.sp-panel a, .sp-bereich summary a, .sp-weitere a { color: var(--ink-900); }
.sp-kopf { color: var(--brown-600); }
.sp-bereich summary::after { border-color: var(--brown-600); }
.sp-bereich summary:hover { background: rgba(28, 22, 19, 0.05); }
.sp-bereich--aktiv > summary { background: var(--peach-100, var(--cream-100)); box-shadow: inset 3px 0 0 var(--terra-500); }
.sp-bereich ul { border-left-color: var(--sand-300); }
.sp-bereich li a { color: var(--brown-600); }
.sp-bereich li a:hover { color: var(--ink-900); }
.sp-bereich li a.an { color: var(--terra-600); border-left-color: var(--terra-500); font-weight: 700; }
.sp-weitere { border-top-color: var(--sand-300); }
.sp-weitere a:hover, .sp-weitere a.an { color: var(--terra-600); text-decoration: underline; text-underline-offset: 3px; }
.sp-panel a:focus-visible, .sp-bereich summary:focus-visible { outline: 2px solid var(--terra-500); outline-offset: 2px; }

/* Logo oben im Panel; auf breiten Bildschirmen ersetzt es das Logo der Kopfzeile. */
.sp-panel { padding-top: 0; }
.sp-logo { display: flex; align-items: center; min-height: 82px; margin: 0 0 var(--space-5); padding-left: var(--space-3); }
.sp-logo img { width: 180px; height: auto; display: block; }
@media (min-width: 1200px) {
  html.mit-seitenpanel .mock-header__logo { display: none; }
}
@media (max-width: 1199px) {
  .sp-panel { padding-top: 0; }
  .sp-logo { min-height: 72px; }
  .sp-logo img { width: 160px; }
}


/* Überthemen klar abheben: Terracotta-Schattierung, kräftige Schrift (Philip, 11.10.2026). */
.sp-bereich { margin-bottom: 6px; }
.sp-bereich > summary { background: var(--peach-150); }
.sp-bereich > summary a { color: var(--terra-700); font-weight: 700; }
.sp-bereich > summary::after { border-color: var(--terra-500); }
.sp-bereich > summary:hover { background: var(--peach-200); }
.sp-bereich--aktiv > summary { background: var(--peach-200); box-shadow: none; }