/* Projekt-Seite: bewusst anders als der Rest - ein Terminal. Monospace, Phosphor-Gruen auf Tinte, Scanlines, Zahlen laufen wie im Matrix-Regen zusammen (projekt.js). */
:root { --t-bg: #07090f; --t-fl: #0c1018; --t-linie: #1f2a36; --t-text: #c9d6c7; --t-leise: #7c8a7a; --t-gruen: #7CFF9B; --t-gruen-d: #1f8a46; --t-violett: #A78BFA; --t-gelb: #F59E0B; --t-koralle: #FF4365; }
body.terminal { background: var(--t-bg); color: var(--t-text); font-family: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", "Roboto Mono", monospace; font-size: 15px; line-height: 1.55; min-height: 100vh; }
body.terminal::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.35;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px); }
.terminal .regen { position: fixed; inset: 0; z-index: 0; opacity: 0.22; pointer-events: none; }
.terminal .konsole { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: 24px 18px 60px; }
/* Fensterrahmen oben wie ein Terminal */
.fenster { border: 1px solid var(--t-linie); border-radius: 10px; background: rgba(12, 16, 24, 0.92); box-shadow: 0 0 0 1px rgba(124, 255, 155, 0.06), 0 30px 60px -30px rgba(0, 0, 0, 0.9); overflow: hidden; }
.titelzeile { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--t-linie); background: #0a0e15; color: var(--t-leise); font-size: 12px; }
.titelzeile > span:first-child { display: inline-flex; gap: 8px; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.titelzeile i { width: 11px; height: 11px; border-radius: 50%; background: #FF4365; } .titelzeile i:nth-child(2) { background: #F59E0B; } .titelzeile i:nth-child(3) { background: #34D399; }
.titelzeile span { margin-left: 8px; } .titelzeile a { margin-left: auto; color: var(--t-leise); text-decoration: none; } .titelzeile a:hover { color: var(--t-gruen); }
.inhalt { padding: 18px 18px 26px; }
/* Prompt-Zeilen */
.prompt { color: var(--t-leise); margin: 22px 0 8px; white-space: pre-wrap; }
.prompt::before { content: "yannic@trayde:~$ "; color: var(--t-gruen-d); }
.prompt b { color: var(--t-gruen); font-weight: 600; }
.inhalt > .prompt:first-child { margin-top: 0; }
.ausgabe { margin: 0 0 6px; color: var(--t-text); }
.ausgabe.leise { color: var(--t-leise); }
.cursor::after { content: "▌"; color: var(--t-gruen); animation: blink 1s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
/* Zahlen: grosse Ziffern, die aus dem Regen zusammenlaufen */
.zahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 18px; margin: 6px 0 4px; }
.zahl { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--t-linie); border-radius: 6px; background: rgba(0, 0, 0, 0.25); }
.zahl b { font-size: 30px; line-height: 1.1; color: var(--t-gruen); font-weight: 700; letter-spacing: 0.02em; text-shadow: 0 0 10px rgba(124, 255, 155, 0.35); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zahl b.circa::before { content: "~"; color: var(--t-leise); margin-right: 2px; }
.zahl b .roh, .tab b .roh { color: var(--t-gruen-d); text-shadow: none; font-size: 1em; }
.zahl span { font-size: 13px; color: var(--t-text); } .zahl small { font-size: 12px; color: var(--t-leise); } .zahl small em { font-style: normal; color: var(--t-text); }
/* Tabellen wie ls -la / Listen */
.tab { width: 100%; border-collapse: collapse; margin: 4px 0 2px; font-size: 14px; }
.tab td { padding: 3px 14px 3px 0; vertical-align: top; } .tab td:first-child { color: var(--t-violett); white-space: nowrap; } .tab td b { color: var(--t-gruen); font-weight: 600; }
.liste { list-style: none; margin: 4px 0 0; padding: 0; }
.liste li { padding: 2px 0 2px 18px; position: relative; }
.liste li::before { content: "-"; position: absolute; left: 4px; color: var(--t-gruen-d); }
.liste b { color: var(--t-text); font-weight: 600; } .liste a { color: var(--t-violett); text-decoration: none; border-bottom: 1px dotted var(--t-violett); } .liste a:hover { color: var(--t-gruen); border-color: var(--t-gruen); }
.liste .pfad { color: var(--t-leise); }
.kommentar { color: var(--t-leise); } .kommentar::before { content: "# "; }
.befehl { display: inline-block; margin-top: 8px; padding: 8px 14px; border: 1px solid var(--t-gruen-d); border-radius: 6px; color: var(--t-gruen); text-decoration: none; background: rgba(31, 138, 70, 0.12); }
.befehl:hover { background: rgba(31, 138, 70, 0.28); }
.befehl::before { content: "$ "; color: var(--t-gruen-d); }
.fussnote { margin-top: 28px; color: var(--t-leise); font-size: 12px; max-width: 80ch; }
.fussnote a { color: var(--t-leise); }
@media (prefers-reduced-motion: reduce) { .cursor::after { animation: none; } .terminal .regen { display: none; } }
@media (max-width: 560px) { .zahl b { font-size: 24px; } .tab td { display: block; padding: 0; } .tab td:first-child { margin-top: 6px; } }