:root {
  --bg: #238C8C;
  --primary: #6EC1E4;
  --secondary: #54595F;
  --accent: #7074AA;
  --text: #FFFFFF;
  --container: 1200px;
}
body {
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
  color: #222;
  background: #f7f9fa;
}
.container { max-width: var(--container); margin: 0 auto; padding: 0 1rem; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
.site-header { background: var(--bg); color: var(--text); padding: .8rem 0; }
.header-flex { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.logo img { height: 60px; }
.main-nav a { color: var(--text); margin-right: 1rem; font-weight: 600; }
.main-nav a:hover { color: var(--primary); }
.user-nav a { color: var(--text); margin-left: .8rem; font-weight: 500; }

/* Footer */
.site-footer { background: var(--secondary); color: var(--text); text-align: center; padding: 1rem 0; margin-top: 2rem; }
.footer-nav a { color: var(--text); margin: 0 .5rem; }

/* Rubriken-Kacheln */
.categories { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 1.5rem; margin-top: 2rem; }
.category-card {
  background: #fff; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,.05);
  overflow: hidden; transition: transform .2s;
}
.category-card:hover { transform: translateY(-4px); }
.category-card img { width: 100%; height: 200px; object-fit: cover; }
.category-card h3 { margin: .8rem; color: var(--secondary); }
.product-desc p { margin: .4rem 0; }
.product-desc ul { margin: .5rem 0 .5rem 1.1rem; }
.product-desc li { margin: .25rem 0; }

#shipDiff { accent-color:#238C8C; transform:scale(1.15); }
#shipFields { margin-top:.75rem; padding:.75rem; border-left:4px solid #6EC1E4; background:#fdfdf8; border-radius:8px; }

#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(30, 30, 30, 0.95);
  color: #fff;
  padding: 1.2rem;
  font-size: 0.95rem;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cookie-content {
  max-width: 900px;
  text-align: center;
}

#cookie-banner button {
  background: #6c5ce7;
  color: #fff;
  border: none;
  margin: 0 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
}

#cookie-banner button:hover {
  background: #a29bfe;
}