*{box-sizing:border-box}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  margin:0;background:#0b0b0b;color:#eee
}

a{color:#8bdcff;text-decoration:none}
a:hover{text-decoration:underline}

header{position:sticky;top:0;z-index:10;background:#111;border-bottom:1px solid #222}
.header-inner{display:flex;align-items:center;gap:16px;max-width:1100px;margin:0 auto;padding:10px 14px}
.header-inner img{height:42px;border-radius:8px}
.header-title{font-weight:700;letter-spacing:.3px}

main{max-width:1100px;margin:0 auto;padding:18px 14px 40px}

/* === Einheitliche Buttons (für <a> und <button>) === */
a.btn, button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  padding:0 16px;
  box-sizing:border-box;
  border-radius:10px;
  border:1px solid #2c2c2c;
  background:#1b1b1b;
  color:#fff;
  font:inherit;
  line-height:1;
  text-decoration:none;
}
a.btn:hover, button.btn:hover{ background:#222 }

/* Browser-Default bei Buttons neutralisieren */
button.btn{-webkit-appearance:none;appearance:none}
button.btn::-moz-focus-inner{border:0;padding:0}

/* Ghost-Variante (z. B. Reset) */
a.btn.ghost, button.btn.ghost{ background:transparent }

/* Karten & Badges */
.card{background:#141414;border:1px solid #242424;border-radius:14px;padding:14px;margin-bottom:14px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:#1e1e1e;border:1px solid #333;font-size:12px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}

/* Inputs */
.input, select, textarea{
  width:100%;padding:8px;border-radius:8px;border:1px solid #333;background:#0f0f0f;color:#eee
}
label{font-size:13px;color:#bbb}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
hr{border:none;border-top:1px solid #282828;margin:14px 0}

footer{max-width:1100px;margin:0 auto;padding:24px 14px;color:#999}
.tag{padding:4px 8px;border-radius:8px;background:#1e1e1e;border:1px solid #333;margin-right:6px}

/* Sterne */
.stars{display:flex;gap:4px}
.star{cursor:pointer;font-size:20px;color:#facc15}
.star.off{opacity:.35}

/* Topbar + Actions */
.topbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}

/* Chips (Typ-Filter & Icons) – funktionieren für <a> und <button> */
.chips .btn{
  border:1px solid #333;
  background:#171717;
  color:#fff;
  border-radius:999px;
  padding:0 12px;
  height:44px;
}
.chips .btn.active{background:#2a2a2a}

/* Galerie & Lightbox */
.gallery{display:flex;gap:6px;flex-wrap:wrap}
.gallery img{height:80px;border-radius:8px;border:1px solid #333;cursor:pointer}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center}
.lightbox img{max-width:95vw;max-height:90vh;border-radius:12px;border:1px solid #333}

/* Stati */
.status-red{background:#8b0b0b;color:#fff;padding:6px 10px;border-radius:8px}


/* --- Ratings --- */
.stars-avg{display:inline-block; position:relative; font-size:16px; line-height:1; letter-spacing:2px; vertical-align:middle}
.stars-avg .bg{color:#999; opacity:.4}
.stars-avg .fg{position:absolute; inset:0 auto 0 0; overflow:hidden; white-space:nowrap; color:#f5b301}
.stars-avg + .avg{margin-left:6px; font-size:12px; opacity:.8}

.rating-form .rate-row{display:flex; align-items:center; gap:8px; margin:.35rem 0}
.rating-form .rate-stars{display:inline-flex; gap:4px}
.rating-form .rate-stars button{border:0; background:none; font-size:20px; cursor:pointer; padding:0; line-height:1; color:#999}
.rating-form .rate-stars button.active{color:#f5b301}
.rating-agg{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px}
.notes .note{background:#f7f7f7; padding:.5rem .75rem; border-radius:8px; margin:.5rem 0}
.notes .who{font-weight:600; margin-bottom:2px}

/* Ensure ratings section uses full width like other cards */
#ratings.card{width:100%}