/* ═══════════════════════════════════════════════════════════════════════
   vscode.css — die Oberflaechenteile, die VS Code ausmachen

   Laedt nach style.css und ergaenzt beziehungsweise korrigiert dort, wo die
   erste Fassung von der echten Oberflaeche abwich.

   Leitgedanke: Die Huelle ist eine genaue Nachbildung, der Inhalt darin ist
   normaler, gut lesbarer Text. Umgekehrt — Huelle ungefaehr, Inhalt als
   Pseudo-Code — sieht zwar nach Programmieren aus, liest sich aber schlecht.
   Wer eine Bewerbung prueft, soll den Text lesen koennen, ohne ihn zu
   entziffern.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   1. GERUEST

   Echtes VS Code ordnet die Flaechen so an: Titelleiste ganz oben ueber
   alles, darunter links die Activity Bar, daneben die Sidebar, rechts der
   Editorbereich, und unten die Statusleiste ueber die volle Breite.

   Wichtig und in der ersten Fassung falsch: Die Tableiste gehoert NUR ueber
   den Editor, nicht ueber die Sidebar. Genau daran erkennt man auf einen
   Blick, ob eine Nachbildung stimmt.
   ═══════════════════════════════════════════════════════════════════════ */
.ide {
  display: grid;
  grid-template-columns: var(--w-activity) auto minmax(0, 1fr);
  grid-template-rows: var(--h-title) var(--h-tabs) minmax(0, 1fr) auto var(--h-status);
  grid-template-areas:
    'title    title   title'
    'activity sidebar tabs'
    'activity sidebar editor'
    'activity sidebar panel'
    'status   status  status';
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* .pane war der Kasten um Sidebar und Editor. Mit display:contents
   verschwindet er aus dem Layout, ohne aus dem HTML zu verschwinden —
   seine Kinder werden damit direkt zu Feldern des Rasters oben. So
   konnte die Oberflaeche neu angeordnet werden, ohne 600 Zeilen Inhalt
   im HTML zu verschieben. */
.pane { display: contents; }

.titlebar { grid-area: title; }
.activitybar { grid-area: activity; }
.sidebar { grid-area: sidebar; }
.tabbar { grid-area: tabs; }
.editor { grid-area: editor; }
.panel { grid-area: panel; }
.statusbar { grid-area: status; }

.editor {
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}

/* ═══════════════════════════════════════════════════════════════════════
   2. TITELLEISTE
   Im echten VS Code steht dort links ein Menue (Datei, Bearbeiten, …),
   mittig der Titel des Arbeitsbereichs.
   ═══════════════════════════════════════════════════════════════════════ */
.titlebar {
  background: var(--tb);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 8px;
  user-select: none;
  min-width: 0;
}

.tb-menu {
  display: flex;
  gap: 0;
  flex-shrink: 0;
}

.tb-menu button {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text);
  padding: 3px 8px;
  border-radius: 3px;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.tb-menu button:hover {
  background: var(--list-hover);
}

/* Suchfeld in der Titelleiste — im echten VS Code sitzt dort die
   Kommandopalette. Ein Klick oeffnet sie, genau wie Strg+P. */
.tb-search {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: min(560px, 38vw);
  height: 22px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 1;
  min-width: 0;
}

.tb-search:hover { border-color: var(--focus); }
.tb-search kbd {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--dim);
  border: 1px solid var(--border2);
  border-radius: 3px;
  padding: 0 4px;
}

.tb-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. ACTIVITY BAR
   Die 48 Pixel breite Icon-Leiste ganz links. Das wiedererkennbarste
   Element der ganzen Oberflaeche — und in der ersten Fassung nicht
   vorhanden. Der aktive Eintrag traegt links einen 2px-Strich und volle
   Deckkraft; das ist genau die Kennzeichnung, die VS Code verwendet.
   ═══════════════════════════════════════════════════════════════════════ */
.activitybar {
  background: var(--act-bg);
  border-right: 1px solid var(--act-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  user-select: none;
}

.act-btn {
  position: relative;
  width: var(--w-activity);
  height: 48px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--act-fg);
  transition: color 0.12s ease;
}

.act-btn svg { width: 24px; height: 24px; display: block; }
.act-btn:hover { color: var(--act-fg-active); }

.act-btn[aria-pressed='true'],
.act-btn.active {
  color: var(--act-fg-active);
}

.act-btn[aria-pressed='true']::before,
.act-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--act-fg-active);
}

/* Zaehler am Symbol (Anzahl Projekte, gesperrte Dateien) — im echten
   VS Code sitzt dort die Zahl der Aenderungen in der Quellcodeverwaltung. */
.act-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
}

.act-bottom { margin-top: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   4. SIDEBAR
   Geht jetzt ueber die volle Hoehe (unter der Titelleiste), nicht mehr nur
   neben dem Editor.
   ═══════════════════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--w-sidebar);
  background: var(--sb);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* Eingeklappt: die Spalte verschwindet, die Activity Bar bleibt stehen —
   dasselbe Verhalten wie beim Klick auf das Explorer-Symbol in VS Code.
   Nur auf breiten Fenstern: schmale benutzen die Schublade, und dort
   wuerde display:none sie unerreichbar machen. */
@media (min-width: 821px) {
  .ide[data-sidebar='hidden'] .sidebar {
    display: none;
  }
}

.sb-title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 20px 6px;
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.tree-folder,
.tree-file {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 22px;
  padding: 0 12px;
  height: 22px;
  border-radius: 0;
}

.tree-file { padding-left: 34px; }

.tree-file.active {
  background: var(--list-active);
  color: #fff;
}

[data-theme='light-plus'] .tree-file.active { color: #fff; }

.tree-file:hover,
.tree-folder:hover { background: var(--list-hover); }

/* ═══════════════════════════════════════════════════════════════════════
   5. TABLEISTE
   Aktive Datei: heller Hintergrund und ein farbiger Strich OBEN — nicht
   unten. Auch das ist ein Detail, an dem man eine Nachbildung erkennt.
   ═══════════════════════════════════════════════════════════════════════ */
.tabbar {
  background: var(--tabbar-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}

.tabbar::-webkit-scrollbar { display: none; }

.tab {
  height: var(--h-tabs);
  padding: 0 10px;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  background: var(--tab-bg);
  border-right: 1px solid var(--border);
  border-bottom: none;
  border-top: 1px solid transparent;
  position: relative;
}

.tab.active {
  background: var(--tab-active-bg);
  color: var(--text);
  border-bottom-color: transparent;
  border-top-color: var(--tab-active-border);
}

.tab:hover { background: var(--tab-active-bg); }

/* Ungespeicherte Datei: VS Code zeigt statt des Schliessen-Kreuzes einen
   Punkt. Hier markiert er die Datei, die man gerade liest. */
.tab.active .tab-x { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   6. STATUSLEISTE
   War in der ersten Fassung entfernt worden. Sie ist aber die zweite
   Haelfte des Wiedererkennungswerts — und ein guter Platz fuer Angaben,
   die sonst nirgends hinpassen: Theme, Sprache der Datei, Anmeldestatus.
   ═══════════════════════════════════════════════════════════════════════ */
.statusbar {
  background: var(--status-bg);
  color: var(--status-fg);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 4px;
  font-family: var(--sans);
  font-size: 12px;
  user-select: none;
  overflow: hidden;
}

.st-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--h-status);
  padding: 0 7px;
  white-space: nowrap;
  color: inherit;
  background: none;
  border: none;
  font: inherit;
  text-decoration: none;
}

button.st-item { cursor: pointer; }
button.st-item:hover { background: rgba(255, 255, 255, 0.14); }
[data-theme='github-dark'] button.st-item:hover,
[data-theme='dracula'] button.st-item:hover,
[data-theme='one-dark'] button.st-item:hover { background: rgba(255, 255, 255, 0.08); }

.st-right { margin-left: auto; display: flex; align-items: center; }
.st-item svg { width: 13px; height: 13px; }

@media (max-width: 900px) {
  .st-hide-sm { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   7. PANEL (Terminal)
   Faehrt unten aus dem Editorbereich aus, genau wie Strg+^ in VS Code.
   ═══════════════════════════════════════════════════════════════════════ */
.panel {
  background: var(--panel-bg);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-rows: 35px 1fr;
  height: 240px;
  min-height: 0;
}

.panel[hidden] { display: none; }

.panel-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border2);
}

.panel-tab {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 8px 0 6px;
  cursor: pointer;
}

.panel-tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
}

.panel-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.panel-close:hover { color: var(--text); }

.term {
  overflow-y: auto;
  padding: 8px 12px 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  min-height: 0;
}

.term-line { white-space: pre-wrap; word-break: break-word; }
.term-line.cmd { color: var(--text); }
.term-line.out { color: var(--muted); }
.term-line.err { color: var(--danger); }
.term-line.ok { color: var(--ok); }
.term-prompt { color: var(--ok); }
.term-path { color: var(--syn-var); }

.term-input-row { display: flex; gap: 6px; align-items: baseline; }

.term-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. KOMMANDOPALETTE
   Nachbildung des Quick Input von VS Code: schmaler Kasten, der oben aus
   der Titelleiste faellt.
   ═══════════════════════════════════════════════════════════════════════ */
.qi-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: transparent;
}

/* Ohne diese Zeile bleibt die Flaeche liegen, auch wenn das hidden-Attribut
   gesetzt ist: Ein display:flex aus dem Stylesheet schlaegt das display:none,
   das der Browser fuer [hidden] mitbringt. Die Palette lag dann unsichtbar
   ueber der ganzen Seite und hat jeden Klick abgefangen. */
.qi-backdrop[hidden] {
  display: none;
}

.qi {
  width: min(600px, 92vw);
  margin-top: 4px;
  background: var(--widget-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.qi-input {
  width: 100%;
  height: 26px;
  margin: 6px;
  width: calc(100% - 12px);
  padding: 0 6px;
  background: var(--bg);
  border: 1px solid var(--focus);
  border-radius: 2px;
  outline: none;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
}

.qi-list {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  max-height: min(44vh, 340px);
  overflow-y: auto;
}

.qi-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  text-align: left;
}

.qi-item[data-active='true'] { background: var(--list-active); color: #fff; }
.qi-item[data-active='true'] .qi-hint { color: rgba(255, 255, 255, 0.7); }
.qi-item .file-ic { flex-shrink: 0; }

.qi-hint {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--dim);
  white-space: nowrap;
}

.qi-group {
  padding: 6px 10px 2px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.qi-empty { padding: 10px; font-size: 13px; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════
   9. LESBARKEIT IM EDITOR

   Der eigentliche Punkt dieser Ueberarbeitung. Vorher lief der Fliesstext
   in Monospace mit Zeilenhoehe 1.95 neben einer Spalte mit erfundenen
   Zeilennummern. Das sah nach Editor aus, las sich aber muehsam.

   Jetzt: Der Inhalt ist gesetzt wie die Vorschau einer Markdown-Datei in
   VS Code — serifenlos, in ruhiger Groesse, mit begrenzter Zeilenlaenge.
   Monospace bleibt dort, wo tatsaechlich Code steht.
   ═══════════════════════════════════════════════════════════════════════ */

/* Die Spalte mit den erfundenen Zeilennummern faellt weg. Sie war nicht
   einmal wahrheitsgemaess: Die Zahlen wurden aus der Pixelhoehe des
   Inhalts geschaetzt und passten zu keiner Zeile. Echte Zeilennummern
   stehen jetzt in den Codebloecken, wo sie stimmen. */

.code-view {
  display: block;
  min-height: 100%;
}

.code-content {
  padding: 28px 40px 64px;
  line-height: 1.7;
  font-size: 18px;
  color: var(--text);
  /* Auf breiten Bildschirmen blieb rechts eine tote Flaeche stehen: der
     Inhalt hing bei 900px linksbuendig fest, der Rest war leer. Er darf
     jetzt bis 1700px mitwachsen — auf einem 2500 Pixel breiten Monitor
     macht das den Unterschied zwischen halb gefuellt und gefuellt. Der
     Fliesstext bleibt trotzdem begrenzt, dafuer sorgt .prose mit seinen
     80ch; Zeilen ueber die volle Breite liest niemand gern. Breiter
     werden vor allem die Raster, also Projektkarten und Tabellen. */
  max-width: 1700px;
  /* Nicht mittig, sondern leicht nach links versetzt: vom uebrigen Platz
     bekommt die linke Seite ein Viertel, die rechte drei. Das haelt den
     Text in der Naehe des Explorers — ein Editor liest sich von links —
     ohne dass rechts wieder eine tote Flaeche entsteht. Passt der Inhalt
     ohnehin nicht mehr ins Fenster, ist der Wert 0 und nichts verschiebt
     sich. */
  margin-left: max(0px, calc((100% - 1700px) / 4));
  margin-right: auto;
  min-width: 0;
}

.editor-scroll { background: var(--bg); }

/* Fliesstext: heller und groesser als vorher. --muted war fuer laengere
   Absaetze zu schwach. */
.prose {
  font-family: var(--sans);
  font-size: 18px;
  color: var(--text);
  line-height: 1.7;
  max-width: 80ch;
}

.prose p { margin-bottom: 0.85rem; }
.prose strong { color: var(--text); font-weight: 600; }

/* Ueberschriften: im Editor wirkt Monospace hier richtig, weil es
   Dateiueberschriften sind — aber groesser und mit mehr Luft. */
.ed-h1 {
  font-family: var(--sans);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 1.2rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.ed-h2 {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 2rem 0 0.7rem;
}

/* Das "##" davor bleibt — es ist die Markdown-Herkunft und faerbt sich
   in der Kommentarfarbe des Themes. */
.ed-h2::before {
  content: '##';
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--syn-comment);
  margin-right: 0.5rem;
}

/* Tabellen: 0.77rem war zu klein zum Lesen. */
.ed-table {
  font-family: var(--sans);
  font-size: 16.5px;
  margin: 0.6rem 0 1.8rem;
}

.ed-table th {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.5rem 0.8rem;
}

.ed-table td { padding: 0.55rem 0.8rem; color: var(--text); }
.ed-table tr:hover td { background: var(--list-hover); }

/* ── Skill-Liste ───────────────────────────────────────────────────────────
   Sechs Tabellen mit je drei Spalten waren auf der Skills-Seite zu viel:
   Kopfzeilen, Rahmen und eine Spalte, in der zwanzigmal fast dasselbe
   Wort stand. Geblieben sind zwei Spalten Eintraege — Name oben, Beleg
   klein darunter — und ein farbiger Punkt fuer die Einstufung.
   ───────────────────────────────────────────────────────────────────────── */
.sk-list {
  list-style: none;
  margin: 0.4rem 0 1.6rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
}

/* Eine Zeile pro Technologie: Punkt, Name, Projekt. Vorher stand unter
   jedem Namen noch ein Satz — bei achtzehn Eintraegen war das eine Wand
   aus Fliesstext, durch die man lesen statt schauen musste. */
.sk {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 0.6rem;
  align-items: center;
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--border2);
}

.sk-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  transform: translateY(-1px);
}

.d-proj { background: var(--ok); }
.d-base { background: var(--info); }
.d-new  { background: var(--warn); }

.sk-name {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Der Beleg: nur noch der Projektname, rechtsbuendig, damit alle
   Projekte einer Spalte untereinander auf einer Kante stehen. */
.sk-wo {
  display: flex;
  justify-content: flex-end;
  gap: 0.3rem;
  flex-shrink: 0;
}

.sk-chip {
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.sk-chip:hover { color: var(--accent); border-color: var(--accent); }

/* Kein Projekt dahinter, also auch nichts zum Anklicken. */
.sk-chip-still {
  cursor: default;
  color: var(--dim);
  background: none;
  border-color: var(--border2);
}

/* Legende: dieselben Punkte, aber ohne Rasterzeile darunter. */
.legend { gap: 0.4rem 1.6rem; margin-bottom: 1.4rem; }
.legend li { font-family: var(--sans); font-size: 12px; color: var(--muted); }

.sk-next {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin: 0.4rem 0 1rem;
}

/* Zwei Spalten brauchen Platz; darunter untereinander. */
@media (max-width: 900px) {
  .sk-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* Kommentarzeile am Anfang jeder Datei — echte Kommentarfarbe des Themes */
.cmt {
  color: var(--syn-comment);
  font-family: var(--mono);
  font-size: 13px;
  font-style: normal;
}

/* Codebloecke: hier gehoert Monospace hin, hier stimmen Zeilennummern. */
.cb {
  background: var(--sb);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  padding: 12px 14px 12px 0;
  counter-reset: cbline;
}

.cb::before { display: none; }

.cb .cl,
.cb > div:not(.cb-lang) {
  counter-increment: cbline;
  position: relative;
  padding-left: 52px;
}

/* Echte, fortlaufende Zeilennummern — im Gegensatz zu vorher stimmen sie. */
.cb .cl::before,
.cb > div:not(.cb-lang)::before {
  content: counter(cbline);
  position: absolute;
  left: 0;
  width: 38px;
  text-align: right;
  color: var(--ln);
  user-select: none;
}

.cb-lang {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  top: 8px;
  right: 12px;
}

/* Syntaxfarben aus dem aktiven Theme */
.kw { color: var(--syn-kw); }
.kw-b { color: var(--syn-kw2); }
.kw-g { color: var(--ok); }
.str { color: var(--syn-str); }
.fn { color: var(--syn-fn); }
.num { color: var(--syn-num); }
.type { color: var(--syn-type); }
.punct { color: var(--syn-punct); }

code {
  background: var(--sb);
  border-color: var(--border);
  color: var(--syn-str);
  white-space: normal;
}

/* Breadcrumb wie in VS Code: klein, ohne eigene Flaeche */
.breadcrumb {
  background: var(--bg);
  border-bottom: none;
  padding: 6px 40px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
}

.breadcrumb .bc-part { color: var(--muted); }

/* Gliederung: als ruhige Zeile, nicht als Kachelreihe */
.outline {
  background: var(--bg);
  border-bottom: 1px solid var(--border2);
  padding: 8px 40px;
  gap: 0.2rem 0.4rem;
}

.outline a {
  font-family: var(--sans);
  font-size: 12.5px;
  border-radius: 3px;
}

.outline a.current {
  color: var(--accent);
  background: var(--list-hover);
  border-color: transparent;
}

/* Karten und Kacheln an die Themefarben angleichen */
.proj-card,
.tech-card,
.dl-item,
.shot {
  background: var(--sb);
  border-color: var(--border);
}

/* ── Bilderstrecken (Interessen) ───────────────────────────────────────────
   Ein Streifen, den man mit den Knoepfen, dem Rad oder dem Finger
   verschiebt. Kein Selbstlauf, keine Ueberblendung: die Bilder sollen
   angeschaut werden koennen, nicht vorbeiziehen.
   ───────────────────────────────────────────────────────────────────────── */
.slider { margin: 0.7rem 0 1.9rem; }

/* Bereiche ohne eingetragene Bilder hinterlassen keine Luecke. */
.slider:empty { display: none; margin: 0; }

.sl-track {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  cursor: grab;
}

/* Waehrend des Ziehens stoert das Einrasten — es zerrt gegen die Maus.
   Es greift wieder, sobald man loslaesst. */
.sl-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.sl-dragging img { pointer-events: none; }

/* Querformat statt des Hochformats der Projekt-Screenshots — Fotos vom
   Regal, vom Bildschirm oder vom Schreibtisch sind meistens breiter. */
/* 16:9 statt 4:3 — Key-Art von Spielen ist quer, im hochformatigeren
   Rahmen ginge zu viel vom Bild verloren. */
.sl-track .shot {
  flex: 0 0 clamp(200px, 34%, 300px);
  aspect-ratio: 16 / 9;
  scroll-snap-align: start;
}

/* Albumcover sind quadratisch — im Querformat waere oben und unten
   jeweils ein Streifen abgeschnitten. */
.slider[data-slider="musik"] .shot {
  flex-basis: clamp(150px, 24%, 210px);
  aspect-ratio: 1;
}

/* ── Kontaktseite ──────────────────────────────────────────────────────────
   Vorher zwei schmale Zeilen mit Emoji und danach eine lange Impressum-
   Liste. Jetzt zwei grosse Karten als das, was man hier tun kann, und
   die Pflichtangaben eingeklappt darunter.
   ───────────────────────────────────────────────────────────────────────── */
.kontakt-karten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  max-width: 660px;
  margin: 0 0 0.9rem;
}

.kk {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  background: var(--sb);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.kk:hover { background: var(--list-hover); border-color: var(--accent); }

/* Die Mail ist der eigentliche Zweck der Seite und darf das zeigen. */
.kk-haupt {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--sb));
}

.kk-haupt:hover { background: color-mix(in srgb, var(--accent) 20%, var(--sb)); }

.kk-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 17px;
}

.kk-ic svg { width: 19px; height: 19px; }
.kk-ic .devicon-github-original { color: var(--text); }

.kk-txt { min-width: 0; }

.kk-t {
  display: block;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.kk-s {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kk-neben {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0 0 2rem;
}

.kk-hinweis {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
}

/* Schaltflaechen: ein Stil fuer die ganze Seite, zwei Groessen. */
.btn {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--text);
  background: var(--sb);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn:hover { background: var(--list-hover); border-color: var(--accent); }
.btn-klein { font-size: 11.5px; padding: 0.35rem 0.7rem; }

.btn-ok {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 55%, transparent);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}

/* Impressum */
.impressum {
  max-width: 660px;
  margin: 0 0 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border2);
  background: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
}

.impressum .fold-btn { font-family: var(--sans); font-size: 12.5px; }

.imp-list {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0;
  margin-top: 0.6rem;
}

/* Jede Angabe ist ein eigenes Raster aus Bezeichnung und Wert — so
   stehen die Werte aller Zeilen auf derselben Kante. */
.imp-list > div {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border2);
}

.imp-list > div:last-child { border-bottom: 0; }

.imp-list dt {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0;
}

.imp-list dd {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.imp-list a { color: var(--accent); }

@media (max-width: 760px) {
  .kontakt-karten { grid-template-columns: minmax(0, 1fr); }
  .imp-list { grid-template-columns: minmax(0, 1fr); }
  .imp-list > div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}

/* Herkunft der Bilder — Fussnote, keine Ueberschrift. */
.quellen {
  margin: 2.2rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border2);
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--dim);
  max-width: 640px;
}

/* Bandcover sind hochkant. */
.slider[data-slider="lesen"] .shot {
  flex-basis: clamp(130px, 20%, 180px);
  aspect-ratio: 2 / 3;
}

/* Im Streifen kein Anheben beim Ueberfahren: eine Verschiebung erzeugt
   eine eigene Zeichenebene, und die geriet mit der Gliederungsleiste
   darueber ins Gehege. Der Rahmen reicht als Rueckmeldung. */
.sl-track .shot:hover { transform: none; border-color: var(--accent); }

.sl-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.1rem;
}

.sl-btn {
  width: 32px;
  height: 32px;
  line-height: 1;
  font-size: 19px;
  color: var(--text);
  background: var(--sb);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
}

.sl-btn:hover { background: var(--list-hover); border-color: var(--accent); }

.sl-btn:disabled {
  opacity: 0.3;
  cursor: default;
  background: var(--sb);
  border-color: var(--border);
}

/* Die Bilder sollen beim Ziehen nicht als Verknuepfung am Mauszeiger
   haengen bleiben. */
.sl-track .shot img { -webkit-user-drag: none; user-select: none; }

.sl-count {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  margin-left: 0.3rem;
}

/* ── Verweis nach draussen (stats.fm) ─────────────────────────────────────
   Bewusst eine Karte und kein eingebettetes Fenster: stats.fm schickt
   x-frame-options: SAMEORIGIN, ein iframe bliebe leer.
   ───────────────────────────────────────────────────────────────────────── */
.ext-card {
  display: block;
  margin: 0.2rem 0 1.9rem;
  padding: 0.85rem 1.1rem;
  background: var(--sb);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.ext-card:hover { background: var(--list-hover); border-color: var(--accent); }

.ext-label {
  display: block;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.ext-text {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

.ext-host {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 0.35rem;
  word-break: break-all;
}

/* Leere Rahmen, solange fuer ein Thema noch keine Bilder eingetragen sind. */
.sl-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  cursor: default;
}

.sl-ph span {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--dim);
}

/* ── Hörstatistiken (stats.fm) ─────────────────────────────────────────── */
.statsfm { margin: 0.2rem 0 1.9rem; }

/* Bewusst schmal gehalten: die Statistik ist eine Randnotiz, kein
   zweiter Inhalt neben dem Text. */
.statsfm.sfm-geladen {
  max-width: 620px;
  background: var(--sb);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 3px;
  padding: 0.7rem 0.85rem;
}

.sfm-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border2);
}

.sfm-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.sfm-name {
  display: block;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.sfm-sub {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--muted);
}

.sfm-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem 1.4rem;
  margin-top: 0.6rem;
}

.sfm-col-t {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 0.3rem;
}

.sfm-list { list-style: none; margin: 0; padding: 0; }

.sfm-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.16rem 0;
  min-width: 0;
}

.sfm-pos {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
  width: 1ch;
  flex-shrink: 0;
}

.sfm-cover {
  width: 22px;
  height: 22px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
}

.sfm-txt { min-width: 0; }

.sfm-t1, .sfm-t2 {
  display: block;
  font-family: var(--sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sfm-t1 { font-size: 11.5px; color: var(--text); line-height: 1.35; }
.sfm-t2 { font-size: 10.5px; color: var(--muted); line-height: 1.3; }

.sfm-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--accent);
  text-decoration: none;
}

.sfm-link:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .sfm-cols { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
}

.proj-card:hover,
.tech-card:hover { background: var(--list-hover); }

.proj-abstract {
  font-size: 17.5px;
  color: var(--text);
  border-left-color: var(--accent);
}

/* "Abstract" ist eine Beschriftung, kein Satzanfang. Als eigene Zeile
   darueber braucht es keinen Gedankenstrich, der die beiden verbindet. */
.proj-abstract strong {
  display: block;
  color: var(--accent);
  margin-bottom: 0.35rem;
}
.proj-t { font-family: var(--sans); font-size: 1.3rem; font-weight: 600; }
.proj-body { font-size: 17px; color: var(--muted); line-height: 1.7; }
.proj-meta dd { font-size: 16.5px; }
.proj-type { font-family: var(--sans); font-size: 13px; }
.tech-name { font-family: var(--sans); font-size: 15.5px; }
.tech-cat { font-family: var(--sans); font-size: 12.5px; }
.fact dd { font-family: var(--sans); font-size: 16.5px; }
/* Sechs bis sieben Chips pro Karte, jeder mit eigenem Rahmen, lasen sich
   wie eine Reihe Schaltflaechen. Ohne Rahmen und mit ruhigerer Flaeche
   bleiben sie das, was sie sind: eine Aufzaehlung. */
.chip {
  font-size: 12.5px;
  background: color-mix(in srgb, var(--border2) 55%, transparent);
  border-color: transparent;
  color: var(--muted);
}

.badge { font-family: var(--sans); font-size: 11px; font-weight: 500; }
.bg { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.bb { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); }
.bo { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }

/* ── Startseite ────────────────────────────────────────────────────────────
   Vorher standen dieselben Angaben dreimal auf einer Seite: als JSON-Block
   oben, als Faktenleiste in der Mitte und als Python-Klasse unten. Geblieben
   ist die Faktenleiste, dafuer mit Angaben, die tatsaechlich etwas sagen.
   ─────────────────────────────────────────────────────────────────────── */

/* Statuszeile ueber dem Namen: das Erste, was jemand wissen will. */
.status-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  border-radius: 999px;
  padding: 4px 12px 4px 10px;
  margin-bottom: 1.4rem;
}

.status-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.status-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid currentColor;
  animation: statusPulse 2.4s ease-out infinite;
}

@keyframes statusPulse {
  0% { opacity: 0.9; transform: scale(0.6); }
  70%, 100% { opacity: 0; transform: scale(1.7); }
}

/* Faktenleiste: drei Spalten statt vier, damit sechs Angaben sauber
   aufgehen, und Werte gross genug zum Ueberfliegen. */
.fact-row {
  grid-template-columns: repeat(3, 1fr);
  max-width: 820px;
  margin: 2rem 0 1rem;
  border-radius: 4px;
  overflow: hidden;
}

.fact {
  background: var(--sb);
  padding: 0.85rem 1.1rem;
}

.fact dt {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.fact dd {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.4;
}

.fact dd a { color: var(--accent); text-decoration: none; }
.fact dd a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .fact-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
  .fact-row { grid-template-columns: 1fr; }
}

.hero-name { font-family: var(--sans); font-weight: 700; letter-spacing: -0.03em; }
.hero-name .acc { color: var(--accent); }
.hero-role { font-family: var(--mono); font-size: 0.9rem; color: var(--muted); }
.cta { font-family: var(--sans); font-size: 13px; background: var(--sb); border-color: var(--border); }
.cta:hover { border-color: var(--focus); background: var(--list-hover); }
.cta-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.cta-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; filter: brightness(1.12); }

/* ═══════════════════════════════════════════════════════════════════════
   10. SCHMALE BILDSCHIRME
   Activity Bar bleibt (sie ist schmal genug), die Sidebar wird zur
   Schublade — so wie VS Code sich auf einem kleinen Fenster verhaelt.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .ide {
    grid-template-columns: var(--w-activity) minmax(0, 1fr);
    grid-template-areas:
      'title    title'
      'activity tabs'
      'activity editor'
      'activity panel'
      'status   status';
  }

  .sidebar {
    position: fixed;
    top: var(--h-title);
    bottom: var(--h-status);
    left: var(--w-activity);
    z-index: 400;
    transform: translateX(-102%);
    transition: transform 0.22s ease;
    box-shadow: var(--shadow);
  }

  .sidebar.open { transform: none; }

  .sb-backdrop {
    display: block;
    position: fixed;
    inset: var(--h-title) 0 var(--h-status) 0;
    z-index: 390;
    background: rgba(0, 0, 0, 0.45);
  }

  .sb-backdrop[hidden] { display: none; }

  .code-content { padding: 20px 18px 56px; }
  .breadcrumb, .outline { padding-left: 18px; padding-right: 18px; }
  .tb-search { display: none; }
  .tb-menu { display: none; }
  .panel { height: 200px; }

  /* Die erste Fassung liess die Seite auf dem Handy mitwachsen, statt
     alles in 100dvh zu quetschen. Das war richtig und wird hier wieder
     hergestellt — meine Regel weiter oben haette es sonst ueberschrieben,
     weil sie spaeter im Stylesheet steht. */
  .ide {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: auto;
  }

  /* Die Statusleiste bleibt am unteren Rand sichtbar, auch waehrend die
     Seite scrollt — sonst waere sie auf dem Handy praktisch nie zu sehen. */
  .statusbar {
    position: sticky;
    bottom: 0;
    z-index: 300;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   11. DRUCK
   Die Druckregeln in style.css kennen die neuen Oberflaechenteile noch
   nicht — hier nachgezogen. Beim Ausdruck bleibt nur der Inhalt uebrig.
   ═══════════════════════════════════════════════════════════════════════ */
@media print {
  .activitybar,
  .statusbar,
  .panel,
  .qi-backdrop,
  .tb-menu,
  .tb-search,
  .outline,
  .read-bar {
    display: none !important;
  }

  .ide {
    display: block !important;
    height: auto !important;
    grid-template-areas: none !important;
  }

  .code-content { max-width: none; }
  .cb .cl::before,
  .cb > div:not(.cb-lang)::before { color: #999 !important; }
}

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