:root {
  --brand: #1a1a1a;
  --brand-light: #333333;
  --accent: #d32027;
  --accent-light: #e8434a;
  --accent-dark: #a91920;
  --bg: #f0f0ee;
  --card: #ffffff;
  --text: #222;
  --muted: #666;
  --danger: #b3261e;
  --success: #1e7d32;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 2px 4px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.09);
  --shadow-lg: 0 4px 10px rgba(0,0,0,.10), 0 16px 32px rgba(0,0,0,.14);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin:0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); }

.site-header {
  background: linear-gradient(180deg, #262626, #111 85%);
  color: #fff; padding: 24px 16px; text-align:center;
  border-bottom: 4px solid var(--accent);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  position: relative; z-index: 2;
}
.site-header .brand-row { display:flex; flex-direction:column; align-items:center; gap:12px; }
.site-header .logo {
  width:78px; height:78px; border-radius:50%; background:#fff; padding:4px;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 6px 16px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
}
.site-header h1 { margin:0; font-size: 1.35rem; letter-spacing:.02em; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.site-header p { margin: 2px 0 0; opacity: .85; font-size:.9rem; }

.container { max-width: 640px; margin: 0 auto; padding: 32px 16px 40px; width:100%; }
.intro { color: var(--muted); margin-top:0; }

.anfrage-form { display:flex; flex-direction:column; gap:18px; }
.anfrage-form label { display:flex; flex-direction:column; gap:5px; font-size:.9rem; color:var(--muted); font-weight:500; }
.anfrage-form input, .anfrage-form textarea, .anfrage-form select {
  padding:11px 12px; border:1px solid #d5d5d2; border-radius:8px; font-size:1rem; font-family:inherit;
  background:#fff; color:var(--text);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.07);
  transition: border-color .15s, box-shadow .15s;
}
.anfrage-form input:focus, .anfrage-form textarea:focus, .anfrage-form select:focus {
  outline:none; border-color: var(--accent);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.07), 0 0 0 3px rgba(211,32,39,.16);
}
.anfrage-form select { cursor:pointer; }

.anfrage-form > button[type="submit"] {
  background: linear-gradient(180deg, var(--accent-light), var(--accent) 55%, var(--accent-dark));
  color:#fff; border:none; padding:15px; border-radius:10px; font-size:1.05rem; font-weight:600; cursor:pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 3px 8px rgba(211,32,39,.35), 0 1px 2px rgba(0,0,0,.15);
  transition: transform .1s, box-shadow .15s, filter .15s;
  letter-spacing:.01em;
}
.anfrage-form > button[type="submit"]:hover { filter:brightness(1.05); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 5px 14px rgba(211,32,39,.4), 0 2px 4px rgba(0,0,0,.15); }
.anfrage-form > button[type="submit"]:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 2px 4px rgba(211,32,39,.3); }

.konfig-block {
  background: var(--card); border-radius: 14px; padding: 20px 22px; display:flex; flex-direction:column; gap:14px;
  border:1px solid rgba(0,0,0,.04); margin:0;
  box-shadow: var(--shadow-md);
}
.konfig-block legend {
  font-weight:700; padding:0 0 4px; font-size:1.05rem; color:var(--text);
  border-left: 4px solid var(--accent); padding-left:10px; margin-left:-2px;
}
.toggle-label {
  flex-direction:row !important; align-items:center; gap:10px !important; font-weight:700 !important;
  font-size:1.05rem !important; color:var(--text) !important; cursor:pointer;
  border-left: 4px solid #ddd; padding:6px 10px; margin-left:-2px; transition: border-color .15s;
}
.konfig-block:has(.toggle-label input:checked) .toggle-label { border-left-color: var(--accent); }
.toggle-label input[type="checkbox"] {
  width:20px; height:20px; accent-color: var(--accent); cursor:pointer;
  box-shadow: var(--shadow-sm); border-radius:4px;
}

.form-row { display:grid; grid-template-columns: 2fr 2fr 1fr; gap:14px; }
.form-row-4 { grid-template-columns: repeat(4, 1fr); }
.form-row-3 { grid-template-columns: repeat(3, 1fr); }
.form-row-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 640px) {
  .form-row-4, .form-row-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .form-row, .form-row-3, .form-row-4, .form-row-5 { grid-template-columns: 1fr; }
  .konfig-block { padding: 16px 16px; border-radius: 12px; }
  .container, .admin-container { padding-left: 12px; padding-right: 12px; }
  .anfrage-form > button[type="submit"] { padding: 16px; font-size: 1.1rem; }
}
.form-status { min-height: 1.2em; font-size:.9rem; font-weight:600; }
.form-status.erfolg { color: var(--success); }
.form-status.fehler { color: var(--danger); }

.admin-container { max-width: 900px; margin:0 auto; padding:32px 16px 40px; width:100%; }
.admin-section {
  background: var(--card); border-radius:14px; padding:22px; margin-bottom:22px;
  border:1px solid rgba(0,0,0,.04); box-shadow: var(--shadow-md);
}
.admin-section h2 { margin-top:0; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin: 0 -4px; }
table { width:100%; border-collapse: collapse; min-width: 620px; }
@media (max-width: 680px) {
  .admin-section { padding: 16px; }
}
thead th { text-align:left; padding:10px 8px; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-bottom:2px solid #eee; }
td { text-align:left; padding:12px 8px; border-bottom:1px solid #f0f0f0; font-size:.9rem; vertical-align:top; }
tbody tr:hover { background: #fafafa; }

.btn {
  background: linear-gradient(180deg, var(--brand-light), var(--brand));
  color:#fff; border:none; padding:9px 16px; border-radius:8px; cursor:pointer; font-size:.85rem; font-weight:600;
  text-decoration:none; display:inline-block;
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 2px 6px rgba(0,0,0,.2);
  transition: transform .1s, filter .15s;
}
.btn:hover { filter:brightness(1.15); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: linear-gradient(180deg, #999, #7a7a7a); }
.btn.danger { background: linear-gradient(180deg, #d4433b, var(--danger)); }
.inline-form { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-top:12px; }
.inline-form label { display:flex; flex-direction:column; font-size:.8rem; color:var(--muted); gap:3px; font-weight:500; }
.inline-form input {
  padding:9px 10px; border:1px solid #d5d5d2; border-radius:8px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.07);
}

.login-box {
  max-width:340px; margin:60px auto; background:var(--card); padding:28px; border-radius:16px;
  box-shadow: var(--shadow-lg); text-align:center; border:1px solid rgba(0,0,0,.04);
}
.login-box .logo {
  width:90px; height:90px; border-radius:50%; margin-bottom:14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 6px 16px rgba(0,0,0,.2);
}
.login-box form { text-align:left; }
.login-box label { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; font-size:.9rem; font-weight:500; }
.login-box input {
  padding:11px 12px; border:1px solid #d5d5d2; border-radius:8px; width:100%;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.07);
}
.login-box .btn {
  background: linear-gradient(180deg, var(--accent-light), var(--accent) 55%, var(--accent-dark));
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 3px 8px rgba(211,32,39,.35);
}
.login-box .btn:hover { filter:brightness(1.05); }
.error-msg { color: var(--danger); font-size:.85rem; font-weight:600; }

/* --- Footer / Kontakt --- */
.site-footer {
  background: linear-gradient(180deg, #111, #050505);
  color:#eee; padding: 32px 16px 24px; border-top: 4px solid var(--accent);
  margin-top: 48px; box-shadow: 0 -4px 16px rgba(0,0,0,.25);
}
.footer-inner { max-width: 640px; margin:0 auto; display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center; }
.footer-brand { font-weight:700; letter-spacing:.02em; font-size:1.05rem; }
.footer-kontakt { display:flex; flex-direction:column; gap:7px; font-size:.9rem; color:#ddd; }
.footer-kontakt a { color:#fff; text-decoration:none; }
.footer-kontakt a:hover { text-decoration:underline; }
.footer-links { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.footer-btn {
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px;
  text-decoration:none; font-size:.85rem; font-weight:700; color:#fff; background: var(--accent);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 3px 8px rgba(0,0,0,.35);
  transition: transform .1s, filter .15s;
}
.footer-btn:hover { filter:brightness(1.1); transform: translateY(-1px); }
.footer-btn:active { transform: translateY(1px); }
.footer-btn.whatsapp { background: linear-gradient(180deg, #35a044, #256428); }
.footer-btn.instagram { background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4); }
.footer-btn svg { width:16px; height:16px; fill:currentColor; flex-shrink:0; }
.footer-copy { font-size:.75rem; color:#999; }