/* ==========================================================================
   Pulheimer Zuckerkiste – Theme "neo"
   Ziel: clean, modern, leicht candy – aber nicht peinlich.
   Nur Overrides, nichts kaputtmachen.
   ========================================================================== */

/* -------------------- Farb- & Typo-Variablen -------------------- */
:root {
  --pz-bg: #ffffff;
  --pz-text: #111318;
  --pz-muted: #5e6775;

  /* Akzentfarben: Orange als Hauptakzent, Honey als Support */
  --pz-accent: #FF6B35;
  --pz-accent-600: #E85A22;
  --pz-accent-100: #FFF0EA;

  --pz-honey: #F59E0B;

  --pz-card: #ffffff;
  --pz-border: #eceef2;
  --pz-shadow: 0 8px 24px rgba(17, 19, 24, .08);

  --pz-radius: 16px;
  --pz-radius-lg: 20px;

  --pz-btn-text: #0a0b0e;
}

html, body {
  background: var(--pz-bg);
  color: var(--pz-text);
}

/* -------------------- Header / Navigation -------------------- */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--pz-border);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

.header-inner { padding: 14px 18px; }

/* Logo größer, ohne lächerlich zu wirken */
.brand .logo {
  height: clamp(62px, 7.5vw, 96px) !important;
}

/* Nav-Links als Pillen */
.main-nav a {
  padding: 10px 12px !important;
  border-radius: 999px !important;
  color: var(--pz-text) !important;
  transition: background .15s ease, color .15s ease, transform .05s ease;
}
.main-nav a:hover,
.main-nav a:focus {
  background: #f4f6f8 !important;
  text-decoration: none;
}
.main-nav .cart-link { padding-left: 4px !important; }
.cart-ico { opacity: .9; }

/* -------------------- Layout / Typo -------------------- */
.content {
  padding-bottom: 48px;
}

h1, h2, h3 {
  letter-spacing: -.015em;
  color: var(--pz-text);
}
h1 { font-size: clamp(1.8rem, 2.6vw, 2.6rem); margin: .25rem 0 .5rem; }
h2 { font-size: clamp(1.4rem, 2vw, 2rem);   margin: 1.25rem 0 .5rem; }
h3 { font-size: clamp(1.1rem, 1.3vw, 1.35rem); margin: 0 0 .35rem; }

p, .muted { color: var(--pz-muted); }

/* -------------------- Hero aus vorhandener .notice bauen -------------------- */
.notice {
  position: relative;
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-lg);
  background:
    radial-gradient(20px 20px at 20% 10%, rgba(255,107,53,.07), transparent 60%),
    radial-gradient(24px 24px at 85% 30%, rgba(245,158,11,.10), transparent 60%),
    linear-gradient(180deg, #fff, #fdfdff);
  padding: clamp(18px, 3vw, 28px);
  box-shadow: var(--pz-shadow);
}
.notice .row { gap: .75rem; }

/* -------------------- Buttons -------------------- */
.btn {
  border-radius: 12px !important;
  background: var(--pz-accent) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 10px 14px !important;
  font-weight: 700 !important;
  transition: transform .04s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(255,107,53,.22);
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }

.btn.secondary {
  background: #fff !important;
  color: var(--pz-text) !important;
  border: 1px solid var(--pz-border) !important;
  box-shadow: none;
}
.btn.ok { background: var(--pz-accent-600) !important; }

/* -------------------- Karten / Grid -------------------- */
.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(12, 1fr);
}
.grid > .card { grid-column: span 4; }
@media (max-width: 980px){ .grid > .card { grid-column: span 6; } }
@media (max-width: 640px){ .grid > .card { grid-column: span 12; } }

.card {
  background: var(--pz-card);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius);
  overflow: hidden;
  box-shadow: var(--pz-shadow);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(17,19,24,.12);
  border-color: #e7eaf0;
}

.img-frame {
  aspect-ratio: 4/3;
  background: #f6f7f9;
  overflow: hidden;
}
.img-frame img {
  width: 100%; height: 100%; object-fit: cover; display:block;
}

.pad { padding: 14px 14px 16px; }

.desc {
  color: var(--pz-muted);
  line-height: 1.45;
  margin: .35rem 0 .6rem;
}

.price {
  margin: .25rem 0 .65rem;
  font-weight: 700;
  color: var(--pz-text);
}
.price br { content: ""; }

.badge {
  border-radius: 999px;
  background: var(--pz-accent-100);
  color: var(--pz-accent-600);
  padding: 2px 8px;
  font-size: 12px;
  border: 1px solid rgba(255,107,53,.25);
}

/* -------------------- Tabellen / Formulare dezent angleichen -------------------- */
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  border-radius: 10px;
  border: 1px solid var(--pz-border);
  padding: 10px 12px;
}

/* -------------------- Footer Feinschliff -------------------- */
.site-footer.ftr {
  background: #0f1114 !important;
  color: #dfe6ee !important;
}
.ftr a { color: #cfd6de !important; }
.ftr__bottom { border-top: 1px solid rgba(255,255,255,.08) !important; }

/* -------------------- Lieferkosten-UI / Modals -------------------- */
#dlv_modal .card { border-radius: var(--pz-radius-lg); }
#dlv_result .row > div strong { color: var(--pz-text); }

/* -------------------- Kalender-/Link-Buttons in Karten -------------------- */
.card .row .btn { padding: 9px 12px !important; }

/* -------------------- Kleinkram -------------------- */
.mt-3 { margin-top: 1.25rem !important; }
.mb-2 { margin-bottom: .75rem !important; }

/* Wenn jemand unbedingt eine Honignote will */
.mark-honey { background: linear-gradient(90deg, rgba(245,158,11,.28), rgba(245,158,11,0)); }