/* Grundlayout */
body { margin:24px; background:#111; color:#eee; font:16px/1.45 system-ui, Segoe UI, Roboto, Arial; }
a { color:#9fccff; text-decoration:none; }
a:hover { text-decoration:underline; }

/* Seitenrahmen */
.page { max-width: 980px; margin: 0 auto; }
.header { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.back { font-size:14px; color:#cfe2ff; }

.h1 { font-size:22px; margin:0; }
.case-thumb { margin:8px 0 10px; border:1px solid #2a2a2a; border-radius:10px; }

/* Algorithmus-Zeile */
.algo { margin:8px 0 16px; color:#bbb; }
.algo code { background:#1b1b1b; padding:2px 6px; border-radius:6px; }

/* ===========================
   Grundlayout & Farben
=========================== */
:root{
  --bg: #0f0f12;
  --panel: #14161a;
  --panel-2: #1a1d22;
  --text: #e6e6e6;
  --muted: #b7bcc4;

  /* deine Wunschfarben */
  --chip-fg: #66ccff;   /* Hellblau (Gruppen) */
  --chip-fg-hover: #cfeeff;
  --chip-bg: rgba(102,204,255,.12);
  --chip-bg-hover: rgba(102,204,255,.24);

  --oll-fg: #66ff99;    /* Hellgrün (OLL-Index) */
  --oll-fg-hover: #d7ffe9;
  --oll-bg: rgba(102,255,153,.12);
  --oll-bg-hover: rgba(102,255,153,.24);

  --card-border: #2a2f38;
  --card-border-hover: #39414c;
  --accent: #9fccff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  line-height:1.45;
}

/* Links – NIE Standard-Blau/Lila */
a, a:link, a:visited{ color: var(--accent); text-decoration:none; }
a:hover, a:focus-visible{ text-decoration: underline; }

/* Container */
.page{ max-width: 1080px; margin: 0 auto; padding: 20px; }

/* Überschriften */
.h1{ font-size: 24px; margin: 0 0 12px; }
h2{ font-size: 18px; margin: 26px 0 12px; color: var(--muted); }

/* Header / Zurück-Link */
.header{
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
}
a.back, a.back:visited{
  display:inline-block; padding:6px 10px; border:1px solid var(--card-border);
  border-radius:8px; background: var(--panel); color: var(--accent);
  text-decoration:none;
}
a.back:hover, a.back:focus-visible{
  border-color: var(--card-border-hover); background: var(--panel-2);
}

/* Fallbild & Algorithmus */
.case-thumb{
  display:block; width:220px; max-width:100%;
  border:1px solid var(--card-border); border-radius:10px; background: #0b0d10; padding:6px;
  margin-bottom:10px;
}
.algo{
  margin: 10px 0 16px;
  color: var(--muted);
}
.algo code{
  color: var(--text); background: #121418; padding: 2px 6px; border-radius:6px; border:1px solid var(--card-border);
}

/* Schrittleiste (horiz. + automatischer Umbruch) */
.steps{
  --stepW: 96px;                       /* Startwert, wird von JS gesetzt */
  --stepImg: calc(var(--stepW) * 0.75);

  display:flex; flex-wrap:wrap; gap:10px;
  background: var(--panel); border:1px solid var(--card-border);
  border-radius:12px; padding:12px;
}
.step{
  width: var(--stepW);                  /* dynamisch */
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:#101216; border:1px solid var(--card-border);
  border-radius:10px; padding:8px;
}
.step img{
  width: var(--stepImg);                /* dynamisch */
  height:auto; display:block;
}
.step .label{
  font-size:13px; color:#cfd6df; letter-spacing:.3px;
}


/* Kartenraster (Startseite) */
.group{ scroll-margin-top: 90px; } /* nicht unter die sticky Quicknav rutschen */
.grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.card{
  display:block; border:1px solid var(--card-border); border-radius:12px;
  background: var(--panel);
  transition: border-color .15s ease, transform .1s ease, background .15s ease;
}
.card:hover{ border-color: var(--card-border-hover); transform: translateY(-1px); background: var(--panel-2); }
.thumb{ display:block; width:100%; aspect-ratio: 1/1; object-fit:contain; background:#0b0d10; border-bottom:1px solid var(--card-border); border-top-left-radius:12px; border-top-right-radius:12px; }
.meta{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 10px; }
.badge{ font-size:12px; padding:3px 6px; border:1px solid var(--card-border); border-radius:6px; color:#cfd6df; }
.title{ font-size:14px; color: var(--text); }

=========================== */
/* Quick-Navi: NICHT sticky, überdeckt nichts */
.quicknav{
  position: static;      /* ← statt sticky */
  top: auto;
  z-index: auto;
  background: #111;      /* kann bleiben */
  border-bottom: 1px solid var(--card-border);
  padding: 12px 0 12px;
  backdrop-filter: none; /* kein Blur nötig */
  margin-bottom: 12px;   /* Luft nach unten, damit nichts klebt */
  text-align: left;      /* alles linksbündig */
}

.quicknav h3{ margin:0 0 8px; font-size:14px; color: var(--muted); }

.group-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }

/* Gruppen-Chips: Hellblau – inkl. :visited gleich einfärben */
.chip, .chip:link, .chip:visited{
  display:inline-block;
  padding:6px 10px;
  border:1px solid var(--card-border);
  border-radius:999px;
  font-size:13px;
  color: var(--chip-fg);
  background-color: var(--chip-bg);
  text-decoration:none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover, .chip:focus-visible{
  color: var(--chip-fg-hover);
  background-color: var(--chip-bg-hover);
  border-color: var(--card-border-hover);
  outline:none;
}
.chip:active{ background-color: rgba(102,204,255,.32); }

/* OLL-Index: Hellgrün – inkl. :visited gleich einfärben */
.oll-index{
  display:grid; gap:6px;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.oll-index a, .oll-index a:link, .oll-index a:visited{
  display:block; text-align:center;
  padding:6px 8px; border-radius:8px;
  border:1px solid var(--card-border);
  color: var(--oll-fg);
  background-color: var(--oll-bg);
  text-decoration:none;
  font-size:13px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.oll-index a:hover, .oll-index a:focus-visible{
  color: var(--oll-fg-hover);
  background-color: var(--oll-bg-hover);
  border-color: var(--card-border-hover);
  outline:none;
}
.oll-index a:active{ background-color: rgba(102,255,153,.32); }

/* ===========================
   Responsiv
=========================== */
@media (max-width: 720px){
  .page{ padding: 16px; }
  .steps{ gap:8px; }
  .step{ padding:7px; }
}

/* ===========================
   Druck (sauber abgeschlossen!)
=========================== */
@media print{
  body{ background:white; color:black; }
  .page{ max-width: none; }
  .quicknav{ display:none; }
  .card, .steps, .step{ border-color:#ccc; background:white; }
  .case-thumb{ border-color:#ccc; background:white; }
  a.back{ display:none; }
}
/* Highlight für das aktuell angesprungene OLL */
.card:target {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  background-color: rgba(159,204,255,.15);
  border-color: var(--accent);
}