body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  padding: 0 1rem 3rem;
  background: #111;
  color: #f5f5f5;
  line-height: 1.5;
  max-width: 900px;
  margin-inline: auto;
}

main { display: block; }

header {
  position: sticky;
  top: 0;
  background: rgba(17, 17, 17, 0.97);
  padding: 0.7rem 0 0.4rem;
  backdrop-filter: blur(6px);
  z-index: 10;
}
header h1 { font-size: 1.2rem; margin: 0; }
header .subtitle { font-size: 0.8rem; color: #aaa; }

.filter-hinweis { font-size: 0.75rem; color: #888; margin-top: 0.3rem; }
#filter-bar { margin-top: 0.4rem; display:flex; flex-direction:column; gap:0.45rem; align-items:flex-start; }
#filter-info { font-size: 0.75rem; color: #ccc; }
.filter-row { display:flex; flex-wrap:wrap; gap:0.35rem; align-items:center; }
.filter-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:#888; margin-right:0.2rem; }
.filter-buttons { display:flex; flex-wrap:wrap; gap:0.35rem; align-items:center; }
#belt-subfilter-row { display:none; }
#belt-subfilter-row.is-visible { display:flex; }

.tag,.tag-filter,.tag-reset {
  padding: 0.1rem 0.45rem; border-radius:999px; border:1px solid #444; color:#ccc;
  background:#101010; white-space:nowrap; font-size:0.75rem;
}
.tag-filter,.tag-reset,.belt-badge{ cursor:pointer; }
.tag-filter.filter-active,.belt-badge.filter-active { border-color:#4caf50; color:#e8f5e9; background:#16321a; }
.tag-filter.belt-filter { display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .55rem; }
.tag-reset { border-color:#666; color:#eee; }

.gruppe { border-radius:.7rem; border:1px solid #333; padding:.9rem .95rem; margin-top:1rem; background:#181818; }
.gruppen-header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem .7rem; align-items:baseline; margin-bottom:.4rem; }
.gruppen-titel { font-size:1rem; font-weight:600; }
.gruppen-tags { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; font-size:.75rem; }
.gruppen-beschreibung { font-size:.8rem; color:#ccc; margin-bottom:.5rem; }

.technik-liste { margin:.3rem 0 0; padding-left:1.2rem; font-size:.86rem; }
.technik-item { margin-bottom:.9rem; }
.technik-item:last-child { margin-bottom:0; }
.technik-name { font-weight:600; margin-bottom:.2rem; }
video { width:100%; max-height:260px; border-radius:.5rem; border:1px solid #333; background:#000; display:block; }
.technik-media img { max-width:100%; max-height:250px; width:auto; height:auto; margin:0 auto; border-radius:.5rem; border:1px solid #333; display:block; object-fit:contain; }
.technik-beschreibung { padding-left:1rem; margin:.1rem 0 0; font-size:.8rem; color:#ccc; }
.technik-beschreibung li { margin-bottom:.15rem; }
.media-fallback { font-size:.75rem; color:#888; border:1px dashed #444; border-radius:8px; padding:.4rem .6rem; }
.media-missing::after { content:'Datei nicht gefunden'; display:block; font-size:.72rem; color:#999; }
.klein { font-size:.75rem; color:#777; margin-top:1.2rem; }
.media-links a { color:#ddd; margin-left:.2rem; }
.nav-inline a { color:#ddd; margin-right:.5rem; font-size:.8rem; }

.belt-badge { display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .45rem; border-radius:999px; border:1px solid #444; background:#101010; font-size:.75rem; color:#ddd; }
.belt-label { white-space:nowrap; }
.belt-bar { display:grid; grid-template-columns:repeat(5,5px); gap:2px; }
.belt-col { width:5px; height:13px; border-radius:1px; background:transparent; }

.belt-8-kup .belt-col{background:#e0c14b}.belt-7-kup .belt-col{background:#e0c14b}.belt-7-kup .belt-col:nth-child(3){background:#3f51b5}
.belt-6-kup .belt-col{background:#3f51b5}.belt-5-kup .belt-col{background:#3f51b5}.belt-5-kup .belt-col:nth-child(3){background:#d32f2f}
.belt-4-kup .belt-col{background:#3f51b5}.belt-4-kup .belt-col:nth-child(2),.belt-4-kup .belt-col:nth-child(4){background:#d32f2f}
.belt-3-kup .belt-col{background:#d32f2f}.belt-2-kup .belt-col{background:#d32f2f}.belt-2-kup .belt-col:nth-child(3){background:#000}
.belt-1-kup .belt-col{background:#d32f2f}.belt-1-kup .belt-col:nth-child(2),.belt-1-kup .belt-col:nth-child(4){background:#000}
.belt-1-dan .belt-col{background:#000}.belt-1-dan .belt-col:nth-child(3){background:#d4af37}
.belt-2-dan .belt-col{background:#000}.belt-2-dan .belt-col:nth-child(2),.belt-2-dan .belt-col:nth-child(4){background:#d4af37}

.site-header { padding: 1rem 0 .2rem; position: static; background: transparent; }
.site-header nav a { color:#ddd; margin-right:.7rem; }
.card { background:#181818; padding:1rem 1.2rem; border-radius:8px; border:1px solid #333; }
.field,.actions { margin-bottom:.8rem; }
input,button { background:#101010; color:#eee; border:1px solid #444; border-radius:4px; padding:.3rem .5rem; }
.messages { list-style:none; padding:0; }
.message { padding:.5rem .7rem; border-radius:4px; margin-bottom:.4rem; }
.message.success { background:#133018; color:#d6ffd9; }
.message.error { background:#3c1616; color:#ffd8d8; }
table{ width:100%; border-collapse:collapse; } th,td{ padding:.5rem; border-bottom:1px solid #333; }

@media (min-width:700px){ header h1{font-size:1.4rem}.gruppe{padding:1rem 1.15rem} }
@media (max-width:700px){ header{position:static} body{padding-top:.5rem} }