/* ==============================================================
   theme.css · gemeinsames Farb- und Stil-Overlay für alle Seiten
   © 2026 Christin.Kuen
   ..............................................................
   Wird NACH dem seiteneigenen <style> geladen und überschreibt
   nur die Palette und ein paar Details. Zwei Themes:
     · dunkel  = Anthrazit, angelehnt an das Windows-11-Dark-Theme
     · hell    = warme Beige-Töne
   Umschalten über den Knopf in der Navigation (theme.js), die
   Wahl bleibt im Browser gespeichert (localStorage, kein Cookie).
   ============================================================== */

/* ---------- Dunkel (Standard) ---------- */
:root{
  color-scheme:dark;
  --bg:#202020;          /* Mica-Grau, Win11 Fensterhintergrund */
  --bg2:#262626;
  --panel:#2b2b2b;       /* Kartenfläche */
  --panel2:#333333;
  --ink:#f0efec;
  --ink-dim:#a8a6a0;
  --accent:#5fcfd8;      /* Cyan, etwas ruhiger als vorher */
  --accent-hover:#7fdde5;
  --accent2:#e9c46a;     /* Gold */
  --accent2-hover:#f2d488;
  --green:#7bd88f;
  --red:#ff6b7a;
  --purple:#b899ff;
  --orange:#ffa759;
  --border:#3f3f3f;
  --shadow:#000;
  --topbar:rgba(32,32,32,.9);
  --term-bg:#1a1a1a;     /* Terminal bleibt immer dunkel */
  --term-bar:#2d2d2d;
  --term-ink:#dcdcd7;
  --lb-bg:rgba(16,16,16,.92);
  --grid:rgba(255,255,255,.035);
  --btn-ink:#161616;
}

/* ---------- Hell (Beige) ---------- */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#efe8da;
  --bg2:#e6ddcc;
  --panel:#f8f4eb;
  --panel2:#ebe3d2;
  --ink:#2a2723;
  --ink-dim:#6b645a;
  --accent:#0f7f89;
  --accent-hover:#0c6a73;
  --accent2:#9a6a12;
  --accent2-hover:#7d5510;
  --green:#2f7d3e;
  --red:#b23440;
  --purple:#6a4cb8;
  --orange:#bf6318;
  --border:#cdc2ab;
  --shadow:#8f8474;
  --topbar:rgba(239,232,218,.92);
  --term-bg:#1e1e1e;
  --term-bar:#2d2d2d;
  --term-ink:#dcdcd7;
  --lb-bg:rgba(60,52,40,.9);
  --grid:rgba(60,50,30,.06);
  --btn-ink:#fbf8f1;
}

/* ---------- Grundfläche: feines Punktraster statt glatter Fläche ---------- */
body{
  background-color:var(--bg);
  background-image:radial-gradient(var(--grid) 1px, transparent 1px);
  background-size:22px 22px;
}
.crt{background:none;}
.topbar{background:var(--topbar);}

/* Hardcodierte Dunkelfarben der Einzelseiten auf Variablen umbiegen */
.term, .pipeline{background:var(--term-bg);}
.term-bar, .term-head{background:var(--term-bar);}
.term pre{color:var(--term-ink);}
.lb{background:var(--lb-bg);}
.site-banner::after{background:linear-gradient(to bottom, transparent, var(--bg));}
.site-footimg::before{background:linear-gradient(to top, transparent, var(--bg));}
.btn.primary{color:var(--btn-ink);}
.btn.primary:hover{background:var(--accent-hover);}
.card-actions a.open{color:var(--btn-ink);}
.card-actions a.open:hover{background:var(--accent-hover);}
.card.gold .card-actions a.open{color:var(--btn-ink);}
.card.gold .card-actions a.open:hover{background:var(--accent2-hover);}
.card-actions a.dl:hover{color:var(--btn-ink);}
.status.live, .status.wip, .status.idea{color:var(--btn-ink);}

/* ---------- Weniger „Baukasten“: harte Kanten, versetzter Schatten ---------- */
.card, .case, .feature, .catbox, .lern-note, .note,
.gallery figure, .term, .pipeline{
  border-radius:3px;
}
.case, .card, .feature{
  box-shadow:4px 4px 0 var(--border);
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.case:hover, .card:hover, .feature:hover{
  transform:translate(-1px,-1px);
  box-shadow:5px 5px 0 var(--accent);
  border-color:var(--accent);
}
.term{box-shadow:6px 6px 0 var(--border);}
:root[data-theme="light"] .term{box-shadow:6px 6px 0 var(--shadow);}
.btn, .backlink, .case .links a, .card-actions a, .topnav a, .chip, .sb, .to-top{border-radius:2px;}
.btn{box-shadow:3px 3px 0 var(--border);}
.btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--border);}

/* Eyebrow: kleines Quadrat statt „//“ */
.eyebrow::before{
  content:""; display:inline-block; width:9px; height:9px;
  background:var(--accent2); margin-right:9px; vertical-align:1px;
}
/* Abschnittslinie unter Sec-Head */
.sec-head{border-bottom:1px solid var(--border); padding-bottom:10px;}
.sec-head h2{position:relative;}

/* ---------- Terminal: Linux-Optik (GNOME-Terminal-artig) ---------- */
.term-bar{gap:0; padding:0; border-bottom:1px solid var(--border);}
.term-bar .dot{display:none;}
.term-bar .term-title{
  flex:1; margin:0; padding:8px 12px; text-align:center;
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--term-ink);
}
.term-bar .wm{
  display:flex; gap:2px; padding:0 8px;
  font-family:'JetBrains Mono',monospace; font-size:12px; color:#9a9a9a;
}
.term-bar .wm span{width:28px; text-align:center; line-height:30px; user-select:none;}
.term-bar .wm span:last-child{color:#d0d0d0;}
.term-bar .tux{padding:0 12px; font-size:13px; color:#e0e0e0; line-height:30px; letter-spacing:.5px; user-select:none;}
/* Gleiche Kopfleiste für die kleinen Terminals auf den Projektseiten */
.term-head{gap:0; padding:0; border-bottom:1px solid var(--border);}
.term-head .dot{display:none;}
.term-head .t{flex:1; margin:0; padding:8px 12px; text-align:center; font-size:12px; color:var(--term-ink); letter-spacing:0;}
.term-head .wm{display:flex; gap:2px; padding:0 8px; font-family:'JetBrains Mono',monospace; font-size:12px; color:#9a9a9a;}
.term-head .wm span{width:28px; text-align:center; line-height:30px; user-select:none;}
.term-head .wm span:last-child{color:#d0d0d0;}
.term-head .tux{padding:0 12px; font-size:13px; color:#e0e0e0; line-height:30px; letter-spacing:.5px; user-select:none;}
.term-body .pr{color:#8ae234;}     /* user@host, Ubuntu-Grün */
.term-body .pr .path{color:#729fcf;} /* Pfad, Ubuntu-Blau */
.term-body .cmd{color:var(--term-ink);}
.term-body .out{color:var(--accent);}
.term-body .dim{color:#9a9a9a;}
.cursor{background:var(--term-ink);}

/* ---------- Theme-Umschalter in der Navigation ---------- */
.theme-toggle{
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700;
  color:var(--ink-dim); background:transparent; border:1px solid var(--border);
  border-radius:2px; padding:5px 9px; cursor:pointer; line-height:1.4;
  margin-left:4px;
}
.theme-toggle:hover{color:var(--accent); border-color:var(--accent);}
.theme-toggle .ico{display:inline-block; width:10px; height:10px; border:2px solid currentColor; border-radius:50%; vertical-align:-1px; margin-right:6px; background:linear-gradient(90deg, currentColor 50%, transparent 50%);}
:root[data-theme="light"] .theme-toggle .ico{background:linear-gradient(90deg, transparent 50%, currentColor 50%);}
.theme-toggle .lbl-dark{display:none;}
.theme-toggle .lbl-light{display:inline;}
:root[data-theme="light"] .theme-toggle .lbl-dark{display:inline;}
:root[data-theme="light"] .theme-toggle .lbl-light{display:none;}
@media(max-width:720px){.theme-toggle .lbl-dark,.theme-toggle .lbl-light{display:none !important;} .theme-toggle .ico{margin-right:0;}}

/* Logo-Pfeil (alt → neu) auf der Stillfeed-Seite */
.logo-swap{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.logo-swap .arrow{font-family:'JetBrains Mono',monospace; font-size:28px; color:var(--accent2); line-height:1;}
.logo-swap .old{opacity:.55; filter:grayscale(.4);}
.logo-swap figure{margin:0; text-align:center;}
.logo-swap figcaption{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-dim); margin-top:6px;}

/* Screenshot-Galerie für Desktop-Bilder (Querformat) */
.gallery.wide{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.lb img.wide{max-width:min(96vw,1100px);}

/* ---------- Lernhefte (ap1/ap2): Seitenleiste, Code, farbige Boxen ---------- */
.sidebar.crt{background:var(--bg2);}
pre, .ascii, p code, li code, td code{background:var(--term-bg);}
pre{color:#b5e8a3;}
.ascii{color:var(--accent);}
:root[data-theme="light"] pre{color:#c8e6b8;}
.box-merke{background:color-mix(in srgb, var(--green) 14%, var(--panel));}
.box-frage, .box-note{background:color-mix(in srgb, var(--purple) 14%, var(--panel));}
.box-warn, .box-exam{background:color-mix(in srgb, var(--red) 14%, var(--panel));}
.home-info{background:color-mix(in srgb, var(--accent2) 16%, var(--panel));}
.exam-tag{border-color:var(--border);}
.sidebar .theme-toggle{
  display:block; margin:12px 16px 0; text-align:center; width:calc(100% - 32px);
}
/* Harter Pixel-Textschatten (Lernheft-Überschriften) ist im hellen Theme unleserlich: komplett aus */
:root[data-theme="light"] *{text-shadow:none !important;}
/* AP2: der feste ÜBERSICHT-Knopf hatte nie eine vollständige Regel */
#homeBtnFixed{
  display:block; margin:4px 16px; padding:9px 12px;
  font-family:'JetBrains Mono','Consolas',monospace; font-weight:700; font-size:12px;
  letter-spacing:.5px; text-align:center; cursor:pointer; text-decoration:none;
  color:var(--accent2); background:var(--panel);
  border:2px solid var(--accent2); border-radius:2px; border-bottom-width:2px;
}
#homeBtnFixed:hover, #homeBtnFixed.active{background:var(--accent2); color:var(--btn-ink);}