/* ===================================================================
   BASIC64  -  Materialebene
   -------------------------------------------------------------------
   Liegt additiv ueber den seiteneigenen Stilen und aendert kein Layout.
   Drei Dinge: Koernung auf dem Gehaeuse, eingelassene Bildschirme und
   Tastenkappen-Kanten (Tiefe), sowie die 16 C64-Farben mit Bedeutung:
   Gruen = geschafft/Ausgabe, Rot = Fehler/Stolperfalle, Gelb = Tipp.
   =================================================================== */

:root {
  --c64-black:  #000000;  --c64-white:  #ffffff;
  --c64-red:    #883932;  --c64-cyan:   #67b6bd;
  --c64-purple: #8b3f96;  --c64-green:  #55a049;
  --c64-blue:   #40318d;  --c64-yellow: #bfce72;
  --c64-orange: #8b5429;  --c64-brown:  #574200;
  --c64-lred:   #b86962;  --c64-dgrey:  #505050;
  --c64-grey:   #787878;  --c64-lgreen: #94e089;
  --c64-lblue:  #7869c4;  --c64-lgrey:  #9f9f9f;

  /* feine Koernung, wie leicht rauer Kunststoff (SVG-Rauschen, 6 % Deckkraft) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.13 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== 1) Material: das Gehaeuse ===== */
body { background-image: var(--grain); }

/* Leisten (Kopf, Fuss, Befehlsleiste) bekommen eine leichte Fase */
header, footer, #course-header, #editor-header, #cmdbar, #sub-footer {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.16);
}

/* Eingelassene Bildschirme: dunkle Boxen wirken in das Gehaeuse gesenkt,
   mit hauchfeinen Zeilen wie auf einer Roehre */
.lex-example, .bp-code-wrap, .codebox, .about-card, .lp-code, .lp-status, .lp-explain {
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 0, rgba(255, 255, 255, 0.028) 1px, transparent 1px, transparent 3px);
}

/* Karten wie Tastenkappen: heller Grat oben, feste Kante unten */
.path-card, .block, .ref-card, .lex-card, .bp-card, .game-card, .tip-card, .callout, .toc, .addr-block, .lo-block-body {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 0 rgba(0, 0, 0, 0.10), 0 3px 6px rgba(0, 0, 0, 0.06);
}
.lo-block-body { box-shadow: none; }

/* Knoepfe: druecken sich beim Klick ins Gehaeuse */
.btn-primary, .header-cta, .eh-btn-primary, .lp-ack, .cf-nav, .lex-chip.is-active, .game-chip.is-active, .ch-block-btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 0 rgba(0, 0, 0, 0.28);
}
.btn-primary:active, .header-cta:active, .eh-btn-primary:active, .lp-ack:active, .cf-nav:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 0 rgba(0, 0, 0, 0.28);
}
.btn-secondary, .eh-btn, .lex-chip, .game-chip, .bp-copy {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
.bp-cmd, .chip { box-shadow: 0 1px 0 rgba(64, 49, 141, 0.28); }

/* Pixel-Icons auf der Startseite bleiben scharf */
.path-icon, .ref-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ===== Hauptnavigation im Kopf =====
   Sechs Ziele, eine Zeile. Wird es zu eng, rutscht die Navigation als
   eigene Zeile unter das Logo. Die aktuelle Seite ist markiert, deshalb
   traegt das Logo ueberall dasselbe Label. */
.mainnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 20px;
  font-size: 14px;
  line-height: 1.5;
}
.mainnav a {
  color: var(--dim);
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.mainnav a:hover { color: var(--accent); border-bottom-color: var(--line); }
.mainnav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.mainnav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Passt die Zeile nicht mehr, faellt die Navigation als Ganzes nach unten */
.header-inner { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 919px) {
  .mainnav { order: 3; flex-basis: 100%; }
}
/* Schmale Geraete: der Kopf scrollt mit, statt zwei Zeilen festzuhalten */
@media (max-width: 759px) {
  header { position: static; }
  .mainnav { gap: 2px 15px; font-size: 13.5px; }
}

/* ===== 2) Die 16 Farben mit Bedeutung ===== */

/* Gruen: geschafft, Programmausgabe, kopiert */
.lp-status.is-success { border-color: var(--c64-green); color: var(--c64-lgreen); }
.codebox .out { color: var(--c64-lgreen); }
.bp-copy.is-copied { color: var(--c64-lgreen); border-color: var(--c64-green); }
.lo-item.is-done .lo-marker, .cf-dot.is-done { background: var(--c64-green); border-color: var(--c64-green); }

/* Rot: Fehler und Stolperfallen */
.callout-warn { border-left-color: var(--c64-red); }
.callout-warn h3 { color: var(--c64-red); }
.err-head code {
  background: var(--c64-red);
  color: #fff;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.82em;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 0 rgba(0, 0, 0, 0.22);
}

/* Gelb: Tipps und Hinweise */
.lp-hint { border-left: 3px solid var(--c64-yellow); padding-left: 10px; }
.tip-card { border-top: 3px solid var(--c64-yellow); }
.callout-tip { border-left-color: var(--c64-yellow); }

/* ===== Druck: Material weglassen ===== */
@media print {
  body { background-image: none; }
  * { box-shadow: none !important; }
}