/* TechKalk Darstellung – ohne Sachdaten. Farben kommen aus dem Profil (techkalk.profil.js). */
:root { --akzent:#3b82f6; --bg:#0f1419; --panel:#171d25; --text:#e6edf3; --muted:#8b98a5; --rand:rgba(255,255,255,.12); --ok:#22c55e; --fehler:#f87171; --font:system-ui,'Segoe UI',Roboto,Arial,sans-serif; --mono:ui-monospace,'Cascadia Mono',Consolas,monospace; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:16px; line-height:1.5; }
.skip { position:absolute; left:-999px; top:0; background:var(--akzent); color:#fff; padding:.5rem 1rem; z-index:10; }
.skip:focus { left:0; }
a { color:var(--akzent); }
.kopf { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.9rem 1rem; border-bottom:1px solid var(--rand); background:var(--panel); }
.marke { display:flex; gap:.75rem; align-items:center; min-width:0; }
.marke img { border-radius:8px; flex:none; }
.name { font-weight:700; font-size:1.15rem; letter-spacing:.01em; }
.claim { color:var(--muted); font-size:.85rem; }
.tabs { display:flex; gap:.25rem; overflow-x:auto; padding:.5rem 1rem; border-bottom:1px solid var(--rand); background:var(--bg); position:sticky; top:0; z-index:5; }
.tab { flex:none; background:transparent; color:var(--muted); border:1px solid transparent; border-radius:8px; padding:.45rem .8rem; font:inherit; cursor:pointer; white-space:nowrap; }
.tab:hover { color:var(--text); }
.tab[aria-current="page"] { color:var(--text); border-color:var(--akzent); background:var(--panel); }
.inhalt { max-width:1100px; margin:0 auto; padding:1rem; outline:none; }
h1 { font-size:1.4rem; margin:.2rem 0 .8rem; } h2 { font-size:1.15rem; margin:1.2rem 0 .5rem; } h3 { font-size:1rem; margin:.8rem 0 .3rem; }
.knopf { background:var(--akzent); color:#fff; border:0; border-radius:8px; padding:.5rem .9rem; font:inherit; cursor:pointer; }
.knopf.zweit { background:transparent; color:var(--text); border:1px solid var(--rand); }
.knopf.klein { padding:.25rem .6rem; font-size:.85rem; }
.knopf:disabled { opacity:.5; cursor:default; }
.knopf:focus-visible, .tab:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; }
input, select, textarea { background:var(--bg); color:var(--text); border:1px solid var(--rand); border-radius:8px; padding:.5rem .6rem; font:inherit; max-width:100%; }
textarea { width:100%; min-height:5rem; font-family:var(--mono); font-size:.9rem; }
label { display:block; font-size:.85rem; color:var(--muted); margin-bottom:.2rem; }
.zeile { display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-end; margin:.5rem 0; }
.zeile > div { min-width:140px; flex:1 1 160px; }
.zeile input[type=search], .zeile input[type=text] { width:100%; }
.zeile select { width:100%; }
.kacheln { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.6rem; }
.kachel { background:var(--panel); border:1px solid var(--rand); border-radius:10px; padding:.7rem .8rem; text-align:left; color:var(--text); font:inherit; cursor:pointer; }
.kachel:hover { border-color:var(--akzent); }
.kachel .zahl { color:var(--akzent); font-weight:700; }
.karte { background:var(--panel); border:1px solid var(--rand); border-radius:10px; padding:.8rem 1rem; margin:.6rem 0; }
.karte h3 { margin:0 0 .3rem; }
.karte-kopf { display:flex; justify-content:space-between; gap:.6rem; align-items:flex-start; }
.chips { display:flex; flex-wrap:wrap; gap:.3rem; margin:.3rem 0; }
.chip { font-size:.75rem; border:1px solid var(--rand); border-radius:99px; padding:.05rem .55rem; color:var(--muted); }
.chip.akz { border-color:var(--akzent); color:var(--text); }
.stern { background:transparent; border:1px solid var(--rand); color:var(--muted); border-radius:8px; width:2.2rem; height:2.2rem; cursor:pointer; font-size:1.1rem; }
.stern[aria-pressed="true"] { color:#facc15; border-color:#facc15; }
.rechner { border-top:1px dashed var(--rand); margin-top:.6rem; padding-top:.6rem; }
.eingabe { display:grid; grid-template-columns:minmax(120px,1fr) 150px 90px; gap:.5rem; align-items:center; margin:.35rem 0; }
.eingabe .einh { color:var(--muted); font-size:.9rem; }
.eingabe input { width:100%; text-align:right; font-family:var(--mono); }
.ergebnis { margin:.8rem 0; padding:.7rem .9rem; border:1px solid var(--akzent); border-radius:10px; background:rgba(127,127,127,.08); font-family:var(--mono); font-size:1.1rem; word-break:break-word; }
.ergebnis.fehler { border-color:var(--fehler); color:var(--fehler); }
.formelzeile { font-family:var(--mono); font-size:.85rem; color:var(--muted); word-break:break-word; }
.hinweis { color:var(--muted); font-size:.9rem; }
.warn { border-left:3px solid #f59e0b; padding:.3rem .7rem; background:rgba(245,158,11,.08); border-radius:4px; font-size:.9rem; }
table { border-collapse:collapse; width:100%; font-size:.92rem; }
.tw { overflow-x:auto; }
th, td { border:1px solid var(--rand); padding:.35rem .55rem; text-align:left; vertical-align:top; }
th { background:var(--panel); }
ul.einfach { margin:.3rem 0; padding-left:1.2rem; }
.richtig { color:var(--ok); } .falsch { color:var(--fehler); }
.fuss { max-width:1100px; margin:2rem auto 1rem; padding:0 1rem; color:var(--muted); font-size:.82rem; }
.klein-text { font-size:.75rem; }
.fortschritt { height:8px; background:var(--panel); border-radius:99px; overflow:hidden; border:1px solid var(--rand); }
.fortschritt > div { height:100%; background:var(--akzent); }
@media (max-width:600px) { .eingabe { grid-template-columns:1fr 1fr; } .eingabe .einh { grid-column:2; } .eingabe label { grid-column:1 / span 2; } }
@media print { .tabs, .kopf-r, .knopf, .stern, .skip { display:none !important; } body { background:#fff; color:#000; } .karte { border-color:#999; background:#fff; } }