:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --accent:#0b63d6;
  --muted:#6b7280;
  --success:#159957;
  --radius:12px;
  --gap:14px;
  --maxwidth:1100px;
}

header {
  width: 100vw; /* volle Bildschirmbreite */
  margin: 0;    /* kein Abstand */
  padding: 20px;
  background: linear-gradient(135deg, #1e293b, #334155);
  color: #ffffff;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 1px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  border-bottom: 4px solid #facc15;
}



*{box-sizing:border-box}
body{
  margin:0;
  font-family: 'Roboto', Inter, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial;
  background:var(--bg);
  color:#0f1724;
  padding:0px;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
}

.container{ width:100%; max-width:var(--maxwidth); }


/* Header kompakter machen */
.site-header {
  width: 100%;
  margin: 0;
  padding: 0; /* entfernt unnötiges padding */
  background: linear-gradient(135deg, #1e293b, #334155);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  border-bottom: 4px solid #facc15;
}

/* Innenbereich schlanker */
.header-inner {
  max-width: var(--maxwidth, 1100px);
  margin: 0 auto;
  padding: 8px 16px; /* weniger Abstand */
  align-items: center;
 
}



/* Haupttitel */
.site-header h1 {
  font-family: 'ABeeZee', sans-serif;
  font-size: 1.6rem; 
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Untertitel */
.site-header .lead {
  font-family: 'Roboto', sans-serif;
  font-size: 0.9rem;
  margin: 4px 0 0 0;
  font-weight: 300;
  opacity: 0.9;
}

.site-header h1 a {
  color: inherit;       /* übernimmt die Schriftfarbe vom Header */
  text-decoration: none; /* entfernt die Unterstreichung */
}

.site-header h1 a:hover {
  text-decoration: underline; /* optional: Unterstreichung beim Hover */
}




.disclaimer {
  font-family: 'Roboto', sans-serif;
  margin-bottom:28px; 
  color:var(--muted); 
  text-align:center;
}


.status{ 
  margin-bottom:12px; 
  color:var(--muted); 
  text-align:center }

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:14px;
  margin-bottom:22px;
}

.item{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  padding:12px;
  border-radius:10px;
  text-align:center;
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  border:1px solid rgba(10,20,60,0.02);
  transition:transform .15s ease;
}
.item:hover{ transform:translateY(-4px); }

.item a{ text-decoration:none; color:inherit }

.item img{ width:160px; height:160px; object-fit:contain; border-radius:8px; background:#f7f9fc; }

.title{ font-weight:600; font-size:14px; min-height:42px; }

.prices{ display:flex; gap:8px; align-items:center; justify-content:center }
.prices del{ color:#9aa0ab; font-size:13px }
.prices .now{ font-weight:800; font-size:16px; }

.discount{
  padding:6px 10px;
  border-radius:999px;
  color:var(--success);
  font-weight:700;
  background:rgba(21,153,87,0.08);
}

.site-footer{ margin-top:auto; padding-top:16px; color:var(--muted); font-size:13px; text-align:center; width:100%; }