:root { --rot:#b8121b; --bg:#f6f6f7; --line:#e2e2e5; --ink:#1a1a1a; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Helvetica Neue",Arial,sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--rot); text-decoration:none; } a:hover { text-decoration:underline; }

.top { display:flex; align-items:center; gap:20px; background:#fff; border-bottom:3px solid var(--rot);
       padding:12px 24px; position:sticky; top:0; z-index:5; }
.brand { font-weight:700; font-size:16px; color:var(--ink); }
.search-mini { margin-left:auto; display:flex; gap:6px; }
.search-mini input { padding:7px 10px; border:1px solid var(--line); border-radius:6px; min-width:220px; }
.search-mini button, .search-big button { background:var(--rot); color:#fff; border:0; padding:8px 16px; border-radius:6px; cursor:pointer; }

main { max-width:1080px; margin:0 auto; padding:24px; }
.hero h1 { margin:8px 0; }
.hero p { color:#555; margin-top:0; }
.search-big { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 8px; }
.search-big input[type=search] { flex:1 1 340px; padding:11px 14px; border:1px solid var(--line); border-radius:8px; font-size:15px; }
.search-big select { padding:11px; border:1px solid var(--line); border-radius:8px; }

.results .count { color:#666; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; color:var(--ink); }
.card:hover { border-color:var(--rot); text-decoration:none; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.card img, .card .noimg { width:100%; height:150px; object-fit:contain; background:#fafafa; }
.card .noimg { display:flex; align-items:center; justify-content:center; color:#bbb; font-size:13px; }
.card-body { padding:10px 12px; display:flex; flex-direction:column; gap:3px; }
.card-body strong { font-size:14px; line-height:1.3; }
.card-body .artnr, .card-body .ean { font-size:12px; color:#777; }
.empty { color:#777; }

.detail .crumbs { color:#888; font-size:13px; margin-bottom:12px; }
.detail-head { display:flex; gap:24px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px; }
.hero-img { max-width:220px; max-height:200px; object-fit:contain; }
.detail-head h1 { margin:0 0 6px; }
.meta { color:#666; margin:0 0 10px; }
.desc { font-size:15px; }
.actions { margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.btn { border:1px solid var(--rot); color:var(--rot); padding:9px 16px; border-radius:8px; background:#fff; }
.btn.primary { background:var(--rot); color:#fff; }
.bullets { margin:16px 0; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:20px; }
.cols section { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 20px; }
.cols h2 { margin-top:0; font-size:16px; }
.cols table { width:100%; border-collapse:collapse; }
.cols th, .cols td { text-align:left; font-weight:400; padding:5px 6px; border-bottom:1px solid #f0f0f0; vertical-align:top; }
.cols th { color:#555; width:48%; }
.hint { color:#777; font-size:13px; font-style:italic; }
.foot { text-align:center; color:#999; font-size:12px; padding:24px; }
@media (max-width:720px){ .cols{grid-template-columns:1fr;} .detail-head{flex-direction:column;} }

/* --- Anmeldung ------------------------------------------------------- */
.login-wrap { display: flex; justify-content: center; padding: 3rem 1rem; }
.login-box {
  width: 100%; max-width: 22rem; display: flex; flex-direction: column;
  gap: .4rem; padding: 1.75rem; border: 1px solid #ddd; border-radius: 8px;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.login-box h1 { margin: 0 0 .25rem; font-size: 1.3rem; }
.login-hint { margin: 0 0 .75rem; color: #666; font-size: .9rem; }
.login-box label { font-size: .85rem; color: #444; margin-top: .5rem; }
.login-box input {
  padding: .55rem .6rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem;
}
.login-box button {
  margin-top: 1.1rem; padding: .6rem; border: 0; border-radius: 4px;
  background: #0b6; color: #fff; font-size: 1rem; cursor: pointer;
}
.login-box button:hover { background: #0a5; }
.login-fehler {
  margin: 0 0 .5rem; padding: .55rem .7rem; border-radius: 4px;
  background: #fdecea; color: #a3231a; font-size: .9rem;
}
.abmelden { margin-left: auto; padding-left: 1rem; font-size: .85rem; white-space: nowrap; }