/* tommypowerz.de — Werkstatt (unverlinkter Bereich).
 *
 * Andere Tür, anderer Raum: die Startseite ist ein C64-Einschaltbild, hier
 * drinnen zitiert das Chrom die Workbench 1.3 — Titelbalken mit Griffleiste,
 * abgesetzte Kanten, die vier Farben Blau/Weiß/Schwarz/Orange. Alles auf
 * dunklen Grund gelegt, weil hier gelesen wird und nicht gestaunt.
 *
 * Fließtext steht in einer normalen Systemschrift. Die Pixelanmutung bleibt
 * dem Chrom und den Beschriftungen; ein Blogbeitrag in 8x8-Pixeln wäre eine
 * Zumutung.
 */

:root {
  --tisch:  #0a0d14;   /* der Schreibtisch, auf dem die Fenster liegen */
  --blech:  #12161f;   /* Fensterfläche */
  --kante:  #232c3d;
  --licht:  #37435c;   /* obere/linke Kante */
  --wb:     #0055aa;   /* Workbench-Blau, im Original */
  --weiss:  #ffffff;
  --text:   #b6becd;
  --dim:    #7b869a;
  --orange: #ff8800;   /* Workbench-Orange, sparsam: TODO, Entwurf, Fokus */
  color-scheme: dark;
}

* { box-sizing: border-box; }

body.werkstatt {
  margin: 0;
  background: var(--tisch);
  color: var(--text);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* --- Kopfleiste im Geist einer Workbench-Titelzeile -------------------- */

.leiste {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--blech);
  border-bottom: 2px solid var(--kante);
}

/* Die Griffleiste: waagerechte Striche, an denen man ein Fenster anfasst.
   Hier fasst niemand etwas an, aber sie sagt sofort, aus welchem Haus die
   Oberfläche kommt. */
.griff {
  flex: none;
  width: 34px;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--wb) 0 2px,
      transparent 2px 5px);
  background-position: 0 9px;
  border-right: 2px solid var(--kante);
}

.schild {
  flex: 1;
  min-width: 0;
  padding: 12px 18px;
}

.schild h1 {
  margin: 0;
  font: 600 12.5px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--weiss);
}

.schild p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--dim);
}

.leiste .sprachen {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 12px;
  font: 400 11.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .12em;
}

.leiste .sprachen a {
  padding: .5em .65em;
  color: var(--dim);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
}

.leiste .sprachen a:hover { color: var(--weiss); border-color: var(--kante); }
.leiste .sprachen a[aria-current] { color: var(--tisch); background: var(--text); }

.leiste .sprachen a[data-original]::after {
  content: "";
  display: block;
  width: 3px; height: 3px;
  margin: 3px auto 0;
  border-radius: 50%;
  background: currentColor;
  opacity: .75;
}

/* Hinweiszeile auf übersetzten Seiten: da, aber nicht laut. */
.uebersetzt {
  margin: 0;
  padding: 7px 18px;
  background: color-mix(in srgb, var(--wb) 14%, var(--tisch));
  border-bottom: 1px solid var(--kante);
  font: 400 12px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: color-mix(in srgb, var(--orange) 72%, var(--text));
}

/* --- Fenster ----------------------------------------------------------- */

.raum {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 34px) clamp(14px, 4vw, 28px) 10px;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3.5vw, 30px);
}

.scheibe {
  background: var(--blech);
  border: 2px solid var(--kante);
  border-top-color: var(--licht);
  border-left-color: var(--licht);
  border-radius: 2px;
}

.balken {
  margin: 0;
  padding: 9px 16px;
  background: var(--wb);
  color: var(--weiss);
  font: 600 11.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.text {
  padding: clamp(16px, 3vw, 26px) clamp(16px, 3vw, 28px);
}

.text > p { margin: 0 0 1.05em; max-width: 64ch; }
.text > p:last-child { margin-bottom: 0; }

.text a { color: var(--weiss); text-decoration-color: var(--wb); }
.text a:hover { color: var(--orange); text-decoration-color: var(--orange); }

.anriss { color: var(--dim); }
.klein { font-size: 12.5px; color: var(--dim); }

.todo {
  margin-top: 1.4em !important;
  padding: 9px 12px;
  border-left: 3px solid var(--orange);
  background: color-mix(in srgb, var(--orange) 9%, transparent);
  font: 400 12.5px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--orange);
}

/* --- Blogliste --------------------------------------------------------- */

.beitraege {
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0;
  border-top: 1px solid var(--kante);
}

.eintrag {
  display: grid;
  grid-template-columns: 7.4rem 1fr;
  gap: 1.1rem;
  padding: 15px 0;
  border-bottom: 1px solid var(--kante);
}

.eintrag .datum {
  padding-top: 3px;
  font: 400 12px/1.8 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.eintrag .titel {
  font-size: 17.5px;
  font-weight: 600;
  color: var(--weiss);
  text-decoration: none;
}

a.titel:hover { color: var(--orange); }

.eintrag .teaser,
.eintrag .hinweis {
  display: block;
  margin-top: 3px;
  font-size: 14.5px;
  color: var(--dim);
}

.eintrag.fehlt .titel { color: var(--dim); }

.marke-entwurf {
  display: inline-block;
  margin-left: .6em;
  padding: 1px 6px;
  border: 1px solid var(--orange);
  border-radius: 2px;
  font: 400 10.5px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
  vertical-align: 2px;
}

.marke-entwurf.gross { margin: 0 0 1.4em; vertical-align: baseline; }

.leer { color: var(--dim); }

/* --- Knöpfe ------------------------------------------------------------ */

.knopf {
  display: inline-block;
  padding: 9px 16px;
  background: var(--tisch);
  border: 2px solid var(--kante);
  border-top-color: var(--licht);
  border-left-color: var(--licht);
  border-radius: 2px;
  font: 600 12px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}

.knopf:hover { color: var(--weiss); border-color: var(--wb); }
.knopf:active { border-top-color: var(--kante); border-left-color: var(--kante); }

.knopf.start { background: var(--wb); color: var(--weiss); border-color: #0a6fd4; }
.knopf.start:hover { background: #0a6fd4; border-color: var(--weiss); }

.zurueck {
  font: 400 12.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--dim) !important;
  text-decoration: none;
}
.zurueck::before { content: "◀ "; }
.zurueck:hover { color: var(--weiss) !important; }

/* --- Spielhalle -------------------------------------------------------- */

.maschinen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 16px;
  margin: 1.5em 0;
}

.maschine {
  padding: 16px;
  background: var(--tisch);
  border: 1px solid var(--kante);
  border-radius: 2px;
}

.maschine h3 {
  margin: 0;
  font: 600 15px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .1em;
  color: var(--weiss);
}

.maschine .kennung {
  margin: 2px 0 12px;
  font-size: 12.5px;
  color: var(--wb);
  filter: brightness(1.7);
}

.maschine p { margin: 0 0 1em; font-size: 15px; }

/* --- Beitrag ----------------------------------------------------------- */

.beitrag .text { max-width: 40rem; }
.beitrag .text h3 { margin: 1.9em 0 .5em; font-size: 19px; color: var(--weiss); }
.beitrag .text blockquote {
  margin: 1.5em 0;
  padding-left: 1.1em;
  border-left: 3px solid var(--wb);
  color: var(--dim);
}
.beitrag .text code {
  padding: 1px 5px;
  background: var(--tisch);
  border: 1px solid var(--kante);
  border-radius: 2px;
  font: 400 .87em/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* --- Fuß --------------------------------------------------------------- */

.fuss {
  max-width: 62rem;
  margin: 0 auto;
  padding: 22px clamp(14px, 4vw, 28px) 40px;
  border-top: 1px solid var(--kante);
  margin-top: clamp(18px, 3.5vw, 30px);
}

.fuss p {
  margin: 0;
  font: 400 12px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--dim);
}

.fuss .klein { font-size: 11px; opacity: .72; margin-top: 5px; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

@media (max-width: 34rem) {
  .eintrag { grid-template-columns: 1fr; }
  .eintrag .datum { grid-row: auto; }
  .eintrag .teaser, .eintrag .hinweis { grid-column: 1; }
  .griff { width: 22px; }
}

/* --- Vorschau (seit 02.09.2026) ---------------------------------------- */
/* Steht auf jeder Seite eines Vorschau-Baus (./build.py --preview), damit
   niemand den Arbeitsstand für die Seite hält. */
.vorschau-banner {
  margin: 0;
  padding: 8px 18px;
  background: color-mix(in srgb, var(--orange) 16%, var(--tisch));
  border-bottom: 1px solid var(--orange);
  font: 400 12px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .06em;
  color: var(--orange);
}

/* --- Beitragstypografie, Rohfassung ------------------------------------ */
/* Das hier ist bewusst schlicht: Es macht die Bauteile eines Beitrags
   sichtbar (siehe Musterbeitrag), damit die Gestaltung sie in die Hand
   nehmen kann. Christoph gestaltet das neu; nichts davon ist gesetzt. */

.beitrag .text h4 { margin: 1.5em 0 .4em; font-size: 16.5px; color: var(--weiss); }

.beitrag .text .datumszeile {
  margin: 0 0 1.2em;
  font: 400 12px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--dim);
}

.beitrag .text .kurzfassung {
  margin: 0 0 1.6em;
  padding: 12px 14px;
  border: 1px solid var(--kante);
  border-left: 3px solid var(--wb);
  background: var(--tisch);
  font-size: 15.5px;
  color: var(--weiss);
}

.beitrag .text blockquote footer {
  margin-top: .4em;
  font: 400 12px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.beitrag .text ul, .beitrag .text ol { margin: 0 0 1.1em; padding-left: 1.4em; max-width: 64ch; }
.beitrag .text li { margin-bottom: .35em; }

.beitrag .text figure { margin: 1.6em 0; }
.beitrag .text figure svg, .beitrag .text figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--kante);
  border-radius: 2px;
}
.beitrag .text figcaption {
  margin-top: .5em;
  font-size: 13px;
  color: var(--dim);
}
.beitrag .text figure.ton audio { width: 100%; }

.beitrag .text table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.2em 0 1.6em;
  font-size: 15px;
}
.beitrag .text th, .beitrag .text td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--kante);
  text-align: left;
  vertical-align: top;
}
.beitrag .text th {
  font: 600 11.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}

.beitrag .text pre {
  margin: 1.2em 0;
  padding: 12px 14px;
  overflow-x: auto;
  background: var(--tisch);
  border: 1px solid var(--kante);
  border-radius: 2px;
  font: 400 13.5px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.beitrag .text pre code { padding: 0; border: 0; background: none; font-size: inherit; }

.beitrag .text kbd {
  padding: 1px 6px;
  border: 1px solid var(--licht);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--blech);
  font: 400 .85em/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--weiss);
}
.beitrag .text mark { background: color-mix(in srgb, var(--orange) 35%, transparent); color: var(--weiss); }
.beitrag .text abbr { text-decoration: underline dotted var(--dim); }

.beitrag .text hr {
  border: 0;
  border-top: 1px solid var(--kante);
  margin: 2em 0;
}

.beitrag .text .nachtrag {
  padding: 10px 14px;
  border-left: 3px solid var(--orange);
  background: color-mix(in srgb, var(--orange) 8%, transparent);
}

.beitrag .text sup { font-size: .75em; line-height: 0; }
.beitrag .text sup a { text-decoration: none; padding: 0 2px; }

.beitrag .text .beweis,
.beitrag .text .fussnoten {
  margin-top: 2.2em;
  padding-top: 1em;
  border-top: 1px dashed var(--kante);
  font-size: 14.5px;
  color: var(--dim);
}
.beitrag .text .beweis h3, .beitrag .text .fussnoten h3 {
  margin: 0 0 .5em;
  font: 600 11.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
}
.beitrag .text .pruefsumme code { color: var(--dim); }

.beitrag .text .nachbarn {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid var(--kante);
  font-size: 14.5px;
}
.beitrag .text .nachbarn p { margin: 0 0 .3em; }
.beitrag .text .nachbarn .richtung {
  display: inline-block;
  min-width: 4.5em;
  font: 400 11.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.beitrag .text .nachbarn .leer { color: var(--dim); }