/* =========================================================
   HABO Kuchenorganisation – öffentliche Seite + gemeinsame Basics
   Farbthema: Rot/Weiß (Sportverein), mit Dark-Mode
   ========================================================= */

:root {
  --c-primary:        #c8102e;   /* HABO-Rot */
  --c-primary-dark:   #9b0a23;
  --c-accent:         #f4c430;   /* warmer Akzent (für Highlights) */
  --c-bg:             #ffffff;
  --c-bg-alt:         #f6f7f9;
  --c-card:           #ffffff;
  --c-text:           #1f2329;
  --c-text-muted:     #5b6471;
  --c-border:         #e1e5ea;
  --c-success:        #2f9e44;
  --c-warn:           #d97706;
  --c-error:          #c8102e;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.06);
  --maxw: 1100px;
}
[data-theme="dark"] {
  --c-primary:        #ef4054;
  --c-primary-dark:   #c8102e;
  --c-bg:             #0e1014;
  --c-bg-alt:         #161a21;
  --c-card:           #181c24;
  --c-text:           #e8ebf0;
  --c-text-muted:     #9aa3b0;
  --c-border:         #2a3140;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 22px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== Header / Footer =================================== */
.site-header, .admin-header {
  background: var(--c-card);
  border-bottom: 1px solid var(--c-border);
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow-sm);
}
.header-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding: 12px 20px;
}
.brand { display:flex; align-items:center; gap:12px; color:var(--c-text); }
.brand:hover { text-decoration:none; }
.brand-mark {
  width:40px; height:40px; border-radius:50%;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  position:relative;
}
.brand-mark::after{
  content:""; position:absolute; inset:8px;
  background: var(--c-card); border-radius:50%;
}
.brand-text { display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong { font-size:1rem; }
.brand-text small { color: var(--c-text-muted); font-size:.78rem; }

.theme-toggle {
  background: transparent; border: 1px solid var(--c-border);
  color: var(--c-text); width:40px; height:40px; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size: 1.05rem;
}
.theme-toggle:hover { background: var(--c-bg-alt); }
[data-theme="light"] .ico-moon { display:none; }
[data-theme="dark"]  .ico-sun  { display:none; }

.site-footer {
  margin-top: 60px;
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-alt);
}
.footer-row {
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 20px; color: var(--c-text-muted); font-size:.9rem;
}
.footer-links a { margin-left: 16px; color: var(--c-text-muted); }

/* ===== Cards / Sektionen ================================= */
.card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.card h1, .card h2, .card h3 { margin-top: 0; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
.muted { color: var(--c-text-muted); }
.lead  { font-size: 1.05rem; color: var(--c-text-muted); }

.kpi-grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap:12px; margin: 12px 0;
}
.kpi {
  background: var(--c-bg-alt); border:1px solid var(--c-border);
  border-radius: var(--r-md); padding: 14px 16px;
}
.kpi b { font-size: 1.4rem; display:block; }
.kpi span { color: var(--c-text-muted); font-size: .85rem; }

/* ===== Hero (Aktionsseite) =============================== */
.hero {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c-primary) 14%, var(--c-bg)),
    var(--c-bg) 60%);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 28px;
  margin: 24px 0;
  display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start;
}
.hero h1 { margin: 0 0 6px; }
.hero .meta { color: var(--c-text-muted); margin-bottom: 12px; }
.hero .info-grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 12px; width: 100%; margin-top: 12px;
}
.hero .info-grid .item {
  background: var(--c-card); border:1px solid var(--c-border);
  border-radius: var(--r-md); padding: 12px 14px;
}
.hero .info-grid b { display:block; font-size:.78rem;
  color: var(--c-text-muted); text-transform: uppercase; letter-spacing:.04em; }
.hero .info-grid span { font-size:1rem; }

/* ===== Bedarfsliste / Fortschritt ======================== */
.needs {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:12px;
}
.need {
  border:1px solid var(--c-border); background: var(--c-card);
  border-radius: var(--r-md); padding: 14px;
}
.need .top { display:flex; justify-content:space-between; gap:10px; }
.need .name { font-weight:600; }
.need .qty {
  font-size: .85rem; color: var(--c-text-muted);
}
.bar {
  margin-top: 8px;
  position: relative;
  height: 12px; border-radius: 99px;
  background: var(--c-bg-alt);
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.bar > span {
  position: absolute; top:0; left:0; bottom:0;
  background: var(--c-success);
}
.bar > .pending {
  background: repeating-linear-gradient(
    45deg,
    var(--c-accent), var(--c-accent) 8px,
    color-mix(in srgb, var(--c-accent) 70%, var(--c-bg-alt)) 8px,
    color-mix(in srgb, var(--c-accent) 70%, var(--c-bg-alt)) 16px
  );
}
.legend { font-size:.8rem; color: var(--c-text-muted); margin-top:8px;
  display:flex; gap:14px; flex-wrap:wrap;}
.legend i { display:inline-block; width:10px; height:10px; border-radius:99px;
  margin-right:6px; vertical-align:middle; border:1px solid var(--c-border);}
.legend i.ok { background: var(--c-success);}
.legend i.pend { background: var(--c-accent);}
.legend i.miss { background: var(--c-bg-alt);}

.full-pill {
  display:inline-block; font-size:.75rem; padding:2px 8px;
  background: var(--c-success); color: #fff; border-radius: 99px;
  margin-left: 6px;
}

/* ===== Formular ========================================== */
.form-grid {
  display:grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
}
label { display:block; font-weight:600; margin-bottom: 6px; }
label small { font-weight: 400; color: var(--c-text-muted); }
input[type=text], input[type=email], input[type=tel],
input[type=password], input[type=number], input[type=date],
input[type=datetime-local], select, textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-bg); color: var(--c-text);
  font: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--c-primary) 35%, transparent);
  outline-offset: 1px;
  border-color: var(--c-primary);
}
textarea { min-height: 96px; resize: vertical; }

.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; cursor:pointer; font: inherit;
  padding: 10px 18px;
  border: 1px solid var(--c-primary);
  border-radius: var(--r-sm);
  background: var(--c-primary); color: #fff;
  text-decoration: none;
}
.btn:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); text-decoration: none;}
.btn.secondary { background: transparent; color: var(--c-primary); }
.btn.secondary:hover { background: color-mix(in srgb, var(--c-primary) 8%, transparent); color: var(--c-primary); }
.btn.ghost { background: transparent; color: var(--c-text); border-color: var(--c-border); }
.btn.ghost:hover { background: var(--c-bg-alt); }
.btn.danger { background: #b91c1c; border-color:#b91c1c; }
.btn.danger:hover { background: #991b1b; border-color:#991b1b; }
.btn.sm { padding: 6px 12px; font-size: .9rem; }

/* Honeypot: für Menschen unsichtbar, von Bots ggf. ausgefüllt */
.hp {
  position:absolute !important;
  left:-10000px; top:auto; width:1px; height:1px;
  overflow:hidden;
}

/* ===== Hinweise / Alerts ================================= */
.alert {
  padding: 14px 16px; border-radius: var(--r-md);
  border:1px solid var(--c-border);
  margin: 14px 0;
  background: var(--c-bg-alt);
}
/* Fallback-Farben (ohne color-mix) für ältere Browser */
.alert.success { background: #e8f5ec; border-color: #b7e2c2; color: #1f6f30; }
.alert.warn    { background: #fdf4e1; border-color: #f1d99a; color: #8a5a00; }
.alert.error   { background: #fdecee; border-color: #f4b2bb; color: #b1132a; }
/* Modernere Browser überschreiben: */
@supports (background: color-mix(in srgb, red 10%, white)) {
  .alert.success { background: color-mix(in srgb, var(--c-success) 12%, var(--c-bg)); border-color: color-mix(in srgb, var(--c-success) 30%, var(--c-border)); color: inherit; }
  .alert.warn    { background: color-mix(in srgb, var(--c-warn) 12%, var(--c-bg));    border-color: color-mix(in srgb, var(--c-warn) 30%, var(--c-border));    color: inherit; }
  .alert.error   { background: color-mix(in srgb, var(--c-error) 12%, var(--c-bg));   border-color: color-mix(in srgb, var(--c-error) 30%, var(--c-border));   color: inherit; }
}

.contacts {
  display:flex; flex-wrap:wrap; gap:12px;
}
.contact {
  background: var(--c-bg-alt); border:1px solid var(--c-border);
  border-radius: var(--r-md); padding: 10px 14px; min-width: 220px;
}
.contact b { display:block; }
.contact small { color: var(--c-text-muted); }

.privacy-note {
  background: var(--c-bg-alt);
  border-radius: var(--r-md);
  padding: 12px 14px; font-size:.92rem;
  color: var(--c-text-muted);
  margin: 12px 0 8px;
}

.center { text-align:center; }
hr.sep { border:0; border-top: 1px solid var(--c-border); margin: 24px 0; }