/* style.css — vollständiges, abgestimmtes Stylesheet für das Parfüm-Portal ... (siehe vorherige Nachricht für kompletten Inhalt) */
:root{
  --bg: #f6f6fb;
  --card: #ffffff;
  --muted: #6b6f77;
  --accent: #6c63ff;
  --accent-contrast: #ffffff;
  --panel-border: #eef2ff;
  --glass-stroke: #cfdfff;
  --soft: rgba(108,99,255,0.08);
  --radius: 10px;
  --shadow: 0 8px 20px rgba(12,18,40,0.06);
  --mono: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0;
  font-family: var(--mono);
  background: linear-gradient(180deg, var(--bg) 0%, #eef1ff 100%);
  color:#111;
  padding:20px;
}
.container { max-width:1200px; margin:0 auto; }
.card { background: var(--card); border-radius: var(--radius); padding:16px; box-shadow: var(--shadow); border: 1px solid var(--panel-border); }
header h1 { margin:0 0 12px 0; font-size:20px; letter-spacing:0.2px; }
footer.muted { margin-top:18px; color:var(--muted); font-size:13px; }
.form-row { margin-bottom:12px; }
.form-row label { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
input[type="text"], input[type="email"], select { width:100%; padding:10px 12px; border-radius:8px; border:1px solid #e6e9ff; background: linear-gradient(180deg,#fff 0%, #fbfbff 100%); font-size:14px; outline:none; }
input[type="text"]:focus, input[type="email"]:focus, select:focus { box-shadow: 0 0 0 4px var(--soft); border-color: var(--accent); }
button { font: inherit; cursor:pointer; border: none; border-radius:8px; padding:8px 12px; background: var(--accent); color: var(--accent-contrast); box-shadow: none; }
.actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.top-actions button { background:#fff; color:var(--accent); border:1px solid var(--panel-border); padding:8px 10px; border-radius:8px; }
.layout { display:flex; gap:16px; align-items:flex-start; margin-top:12px; }
.panel { width:320px; max-width:32%; }
#recipesList { padding:14px; }
#listContainer { margin-top:8px; }
.recipe-item { display:flex; justify-content:space-between; align-items:center; padding:10px; border-radius:8px; border:1px solid #eef2ff; background: linear-gradient(180deg,#fff 0%, #fbfbff 100%); margin-bottom:10px; }
.recipe-item strong { display:block; font-size:15px; }
.recipe-item .muted { font-size:13px; color:var(--muted); margin-top:4px; }
.recipe-actions button { background: var(--accent); color: var(--accent-contrast); padding:6px 8px; border-radius:8px; border: none; font-size:13px; margin-left:6px; }
.editor { flex:1; min-width:0; padding:14px; }
.editor-header { display:flex; gap:20px; align-items:flex-start; margin-bottom:12px; }
.editor-header h3 { margin:0; font-size:16px; }
.flacon-wrap { width:220px; height:360px; display:block; position:relative; }
.flacon-wrap svg { width:220px; height:360px; display:block; }
@media (max-width:980px) { .layout { flex-direction:column; } .panel { width:100%; max-width:100%; } .flacon-wrap { width:160px; height:260px; } .flacon-wrap svg { width:160px; height:260px; } }
.grid-wrap { margin-top:12px; }
.grid-row { display:flex; gap:12px; }
.duft-kategorie { flex:1; min-width:0; }
.duft-kategorie h4 { margin:0 0 8px 0; font-size:14px; color:var(--muted); }
.duft-grid { display:flex; flex-direction:column; gap:8px; max-height:420px; overflow:auto; padding-right:6px; }
.duft-slot { background:#fbfbff; padding:8px; border-radius:8px; border:1px solid #f0f3ff; display:flex; flex-direction:column; gap:8px; }
.slot-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.slot-name { display:flex; gap:8px; align-items:center; min-width:0; }
.slot-name input[type="text"] { padding:8px; border-radius:8px; border:1px solid #e8ebff; min-width:0; width:140px; font-size:13px; }
.slot-name img { width:34px; height:34px; object-fit:cover; border-radius:6px; border:1px solid #eee; display:block; }
.slot-actions button { background:#fff; color:var(--muted); border:1px solid #eef2ff; padding:6px 8px; border-radius:8px; }
.range-wrap { display:flex; gap:8px; align-items:center; }
.range-wrap input[type="range"] { -webkit-appearance:none; width:100%; height:6px; background: linear-gradient(90deg, var(--soft), rgba(0,0,0,0)); border-radius:6px; outline:none; }
.range-wrap input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; background:var(--accent); border-radius:50%; box-shadow:0 2px 6px rgba(108,99,255,0.28); border:2px solid #fff; }
.value-badge { min-width:48px; text-align:center; background:#f1f1ff; border-radius:6px; padding:6px; font-size:13px; color:var(--muted); border:1px solid #eef2ff; }
.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(8,12,30,0.35); z-index:60; }
.modal.hidden { display:none; }
.modal-card { max-width:420px; width:92%; background: #fff; padding:16px; border-radius:10px; box-shadow: 0 12px 40px rgba(7,12,40,0.25); border:1px solid #e9eefc; }
.modal-card h4 { margin:0 0 8px 0; font-size:16px; }
.modal-card p { margin:0 0 12px 0; color:var(--muted); font-size:14px; }
.hidden { display:none !important; }
.muted { color:var(--muted); font-size:13px; }
@media (max-width:720px) { .duft-grid { max-height:300px; } .flacon-wrap { margin-bottom:12px; } }