/* ══════════════════════════════════════════════════════════════════════════
   Skill-Verzeichnis — Stylesheet

   Von Hand geschrieben, KEIN Bauschritt. Die Vite-Fassung nutzte Tailwind;
   in einem PHP-Projekt hätte das bedeutet, dass für jede Klassenänderung
   wieder Node laufen muss. Diese Datei bearbeiten und neu laden, fertig.

   Design-System: Skill ui-ux-pro-max, Muster "Marketplace / Directory",
   Farbnotiz "Code dark + run green", Schriften JetBrains Mono + IBM Plex Sans.

   Bewusst NICHT übernommen: Glassmorphism. Frosted Glass täuscht Tiefe vor,
   wo Substanz stehen soll — auf einer Seite gegen Blendwerk ein Widerspruch
   in sich. Stattdessen Schichtung über abgestufte Flächen und klare Kanten.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Schriften, lokal ──────────────────────────────────────────────────────
   Nicht von Google. Ein Aufruf an fonts.googleapis.com überträgt die IP des
   Besuchers in die USA; das LG München hat das 2022 als Verstoß gewertet
   (Az. 3 O 17493/20), danach folgte eine Abmahnwelle.
   Nur die lateinischen Schnitte — kyrillisch und griechisch braucht die Seite
   nicht, das spart rund 800 KB.                                             */

@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('schriften/ibm-plex-sans-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('schriften/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('schriften/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('schriften/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('schriften/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('schriften/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('schriften/jetbrains-mono-latin-700-normal.woff2') format('woff2');
}

/* ── Werte ───────────────────────────────────────────────────────────────── */
:root {
  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --canvas:    #0f172a;
  --surface:   #161f33;
  --surface-2: #1c273e;
  --ink:       #f8fafc;
  --ink-2:     #94a3b8;
  --ink-3:     #64748b;
  --line:      #26324a;
  --line-2:    #33415c;
  --accent:    #22c55e;
  --warn:      #f59e0b;
  --stale:     #ef4444;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px;
}

/* ── Grundlagen ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
p { margin: 0; }
dl, dd { margin: 0; }

/* Fokusringe zu entfernen steht auf der Verbotsliste des Design-Systems
   (Priorität 1, Barrierefreiheit). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: rgb(34 197 94 / .3); }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Erster Tabstopp: sonst springt man durch die ganze Kopfzeile. */
.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 60;
}
.sprung:focus {
  left: var(--s-3); top: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--accent); color: var(--canvas);
  font-weight: 500; text-decoration: none;
}

.mitte { max-width: 960px; margin-inline: auto; padding-inline: var(--s-5); }
.mono  { font-family: var(--mono); }
.tabellenzahl { font-variant-numeric: tabular-nums; }

/* ── Kopfbereich ─────────────────────────────────────────────────────────── */
/* Das Raster liegt in einer EIGENEN Ebene hinter dem Inhalt.
   Zuerst stand die Ausblendung direkt auf .kopf -- eine Maske wirkt aber auf
   das gesamte Element samt Kindern. Damit verblassten Suchfeld, Filterknöpfe
   und die Standzeile mit. Am 03.08.2026 im Livebetrieb aufgefallen. */
.kopf {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}
.kopf::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgb(38 50 74 / .7) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(38 50 74 / .7) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 92%);
          mask-image: linear-gradient(to bottom, #000, transparent 92%);
}
.kopf-innen { padding-block: var(--s-14) var(--s-10); }

.marke {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid rgb(34 197 94 / .3);
  border-radius: 999px;
  background: rgb(34 197 94 / .08);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
}
.punkt {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: pulsieren 2s ease-in-out infinite;
}
@keyframes pulsieren { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.titel {
  margin-top: var(--s-5);
  max-width: 22ch;
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.titel em { font-style: normal; color: var(--accent); }

.vorspann {
  margin-top: var(--s-5);
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 1.05rem;
}

/* ── Suche: laut Design-System IST sie der Handlungsaufruf ───────────────── */
.suchfeld { position: relative; max-width: 34rem; margin-top: var(--s-8); }
.suchfeld svg {
  position: absolute; left: var(--s-4); top: 50%;
  translate: 0 -50%;
  width: 20px; height: 20px;
  color: var(--ink-3); pointer-events: none;
}
.suchfeld input {
  width: 100%;
  height: 52px;
  padding-left: 46px; padding-right: var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans); font-size: 1rem;
  transition: border-color .2s, background .2s;
}
.suchfeld input::placeholder { color: var(--ink-3); }
.suchfeld input:focus { border-color: var(--accent); background: var(--surface-2); outline: none; }

.zeile-klein {
  margin-top: 10px;
  color: var(--ink-3);
  font-family: var(--mono); font-size: 12px;
}

.filter { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.filter button {
  padding: 6px 14px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: transparent; color: var(--ink-2);
  font-family: var(--mono); font-size: 12px;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.filter button:hover { border-color: var(--ink-3); color: var(--ink); }
.filter button[aria-pressed="true"] {
  border-color: var(--accent); background: rgb(34 197 94 / .1); color: var(--accent);
}

/* ── Liste ───────────────────────────────────────────────────────────────── */
.listen-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5);
}
.listen-kopf h2 {
  color: var(--ink-3);
  font-family: var(--mono); font-size: 12px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .08em;
}
.listen-kopf label {
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--ink-3); font-family: var(--mono); font-size: 12px;
}
.listen-kopf select {
  padding: 6px 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font-family: var(--mono); font-size: 12px;
  cursor: pointer;
}
.listen-kopf select:focus { border-color: var(--accent); outline: none; }

.liste { display: grid; gap: var(--s-4); }

.karte {
  padding: var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color .2s;
}
.karte:hover { border-color: var(--line-2); }
.karte[hidden] { display: none; }

/* Sanftes Auftauchen. Der Inhalt ist von Anfang an im HTML — die Animation
   setzt nur den Startzustand. Inhalte unsichtbar vorzuhalten und per Skript
   einzublenden zeigt Suchmaschinen eine leere Seite. */
@media (prefers-reduced-motion: no-preference) {
  .karte { animation: auftauchen .3s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--i, 0) * 40ms); }
  @keyframes auftauchen { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0; } }
}

.karte-kopf {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: var(--s-3);
}
.karte h3 { font-size: 1.15rem; font-weight: 600; }

.repo-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 2px;
  color: var(--ink-2);
  font-family: var(--mono); font-size: 13px;
  text-decoration: none;
  transition: color .2s;
}
.repo-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.repo-link svg { width: 14px; height: 14px; }

.schild {
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--ink-2); font-family: var(--mono); font-size: 11px;
}

.beschreibung { margin-top: var(--s-4); color: var(--ink-2); }
.wofuer { margin-top: 10px; color: var(--ink-3); font-size: .9rem; }
.wofuer b { color: var(--ink-2); font-weight: 500; }

/* Die harten Zahlen. Ohne sie wäre das hier auch nur eine Linksammlung. */
.zahlen {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px;
}
.zahlen > div { display: flex; align-items: center; gap: 6px; }
.zahlen dt { color: var(--ink-3); }
.zahlen dd { color: var(--ink-2); }
.zahlen .stark { color: var(--ink); }
.zahlen .rechts { margin-left: auto; }

.frisch {
  padding: 4px 10px;
  border: 1px solid; border-radius: 999px;
  white-space: nowrap;
}
.frisch.aktiv     { color: var(--accent); border-color: rgb(34 197 94 / .4);  background: rgb(34 197 94 / .08); }
.frisch.ruhig     { color: var(--warn);   border-color: rgb(245 158 11 / .4); background: rgb(245 158 11 / .08); }
.frisch.ruht      { color: var(--stale);  border-color: rgb(239 68 68 / .4);  background: rgb(239 68 68 / .08); }
.frisch.unbekannt { color: var(--ink-3);  border-color: var(--line-2); }

.hinweis-archiv {
  margin-top: var(--s-3); padding: var(--s-2) var(--s-3);
  border: 1px solid rgb(239 68 68 / .4); border-radius: var(--r-sm);
  background: rgb(239 68 68 / .08);
  color: var(--stale); font-size: 12px;
}

/* ── Installationsbefehle ────────────────────────────────────────────────── */
.befehle { margin-top: var(--s-5); }
.befehle > p {
  margin-bottom: var(--s-2);
  color: var(--ink-3);
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em;
}
.befehl { display: flex; align-items: stretch; gap: var(--s-2); margin-bottom: 6px; }
.befehl:last-child { margin-bottom: 0; }
.befehl code {
  flex: 1; min-width: 0;
  overflow-x: auto;
  padding: 10px var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--mono); font-size: 13px;
  white-space: pre;
}
.befehl button {
  flex-shrink: 0;
  padding-inline: var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2);
  font-family: var(--mono); font-size: 11px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.befehl button:hover { border-color: var(--accent); color: var(--accent); }
.befehl button.fertig { border-color: var(--accent); color: var(--accent); }

.achtung {
  display: flex; gap: 10px;
  margin-top: var(--s-4); padding: 10px var(--s-3);
  border: 1px solid rgb(245 158 11 / .3); border-radius: var(--r-sm);
  background: rgb(245 158 11 / .06);
  color: var(--ink-2); font-size: 13px;
}
.achtung svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: var(--warn); }

.leer {
  padding: var(--s-8);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface);
  color: var(--ink-2); text-align: center;
}
.leer[hidden] { display: none; }

/* ── Fuß ─────────────────────────────────────────────────────────────────── */
.fuss { margin-top: var(--s-10); border-top: 1px solid var(--line); }
.fuss-innen { padding-block: var(--s-8); color: var(--ink-3); font-size: .9rem; }
.fuss-innen p { max-width: 64ch; }
.fuss-innen strong { color: var(--ink-2); font-weight: 500; }
.fuss-innen .klein { margin-top: var(--s-4); font-family: var(--mono); font-size: 12px; }

/* ── Schmale Displays ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .kopf-innen { padding-block: var(--s-10) var(--s-8); }
  .karte { padding: var(--s-5); }
  .zahlen .rechts { margin-left: 0; width: 100%; }
  .listen-kopf { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}