h2.h3 { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); margin: 0 0 8px; }
.kl-intro { color: var(--ash); max-width: 72ch; }
.kl-kopf { display: flex; align-items: center; gap: 16px; }
.kl-kopf img { width: 64px; height: 64px; border-radius: 10px; border: 1px solid var(--line); }
.kl-links { display: flex; flex-wrap: wrap; gap: 8px; }
.kl-links a { font-family: var(--mono); font-size: .85rem; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--bone); text-decoration: none; }
.kl-links a:hover { border-color: var(--zx-accent); }
.kl-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.kl-karte { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--iron); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--bone); }
.kl-karte:hover { border-color: var(--kf, var(--zx-accent)); }
.kl-karte img { width: 44px; height: 44px; border-radius: 8px; }
.kl-karte b { display: block; font-size: 1.15rem; color: var(--kf, var(--bone)); }
.kl-karte small { color: var(--ash); }
.tp-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-family: var(--mono); font-size: .9rem; color: var(--ash); }
.tp-leiste b { color: var(--bone); font-weight: 500; }
.tp-leiste button { font: inherit; padding: 6px 14px; border-radius: 4px; border: 1px solid var(--line); background: var(--iron); color: var(--bone); cursor: pointer; }
.tp-leiste button:hover { border-color: var(--zx-accent); }
.tp-baeume { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tp-baum { background: var(--iron); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.tp-baum h3 { margin: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; color: var(--bone); }
.tp-baum h3 span { font-family: var(--mono); font-size: .85rem; color: var(--zx-accent); }
.tp-gitter { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 58px; gap: 6px; justify-items: center; }
.tp-t { position: relative; width: 44px; height: 44px; border-radius: 6px; border: 2px solid #3a3f47; background: #05080c center / cover; cursor: pointer; padding: 0; filter: grayscale(1) brightness(.55); }
.tp-t.frei { filter: none; border-color: #2fae4d; }
.tp-t.teil { filter: none; border-color: #2fae4d; }
.tp-t.voll { filter: none; border-color: #ffd100; }
.tp-t span { position: absolute; right: -6px; bottom: -8px; font: 600 .7rem/1 var(--mono); background: #05080c; color: var(--bone); border: 1px solid #3a3f47; border-radius: 4px; padding: 2px 4px; }
.tp-t.voll span { color: #ffd100; }
.tp-t:focus-visible { outline: 2px solid var(--zx-accent); outline-offset: 2px; }
.tp-info { min-height: 92px; background: var(--iron); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.tp-info b { color: #ffd100; } .tp-info small { color: var(--ash); font-family: var(--mono); }
.tp-info p { margin: 6px 0 0; }
.fz { width: 100%; border-collapse: collapse; font-size: .95rem; }
.fz td, .fz th { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.fz th { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ash); font-weight: 500; }
.fz .z { font-family: var(--mono); color: var(--zx-accent); white-space: nowrap; }
.fz a { color: #ffd100; text-decoration: none; } .fz a:hover { text-decoration: underline; }
.fz small { color: var(--ash); }
.ico { display: inline-block; width: 22px; height: 22px; border-radius: 4px; background: #05080c center / cover; vertical-align: middle; margin-right: 8px; border: 1px solid #000; }
.tabwrap { overflow-x: auto; }
.zb-kopf { display: flex; align-items: center; gap: 14px; }
.zb-kopf .gross { width: 56px; height: 56px; border-radius: 8px; border: 1px solid #000; background: #05080c center / cover; flex: none; }
.zb-werte { display: flex; flex-wrap: wrap; gap: 8px; }
.zb-werte span { font-family: var(--mono); font-size: .85rem; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ash); }
.zb-werte b { color: var(--bone); font-weight: 500; }
.zb-text { font-size: 1.05rem; max-width: 70ch; }
.hinweis { color: var(--ash); font-size: .9rem; }
@media (max-width: 900px) { .tp-baeume { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .fz .s { display: none; } }