/*
 * Gemeinsame Design-Tokens & Komponenten-Styles fuer alle Studio-Hausie-Seiten.
 * Einmal in _layout_top.php (und den layoutfreien Auth-Seiten) eingebunden.
 * Einzelne Templates behalten nur noch seitenspezifische Regeln in ihrem
 * eigenen <style>-Block -- alles Wiederkehrende (Card, Formularfelder,
 * Buttons, Status-Meldungen, Chips) lebt ab jetzt hier an einer Stelle.
 */

:root{
  --ink:#201D19;
  --paper:#F4F0E8;
  --paper-dim:#ECE6DB;
  --sheet:#FBF9F4;
  --line:#D8D0C2;
  --muted:#746E65;
  --wine:#6D1F2B;
  --accent:#6D1F2B;
  --accent-soft:#EEE0E1;
  --yellow:#BD9B61;
  --green:#66715B;
  --green-soft:#E5E8E0;
  --danger-soft:#F2E2E2;
  --font-serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}

a{ color: inherit; text-decoration: none; }
h1,h2,h3{font-family:var(--font-serif);font-weight:500;letter-spacing:-.025em}

.page-kicker,.journal-id{
  color:var(--muted);font-family:var(--font-mono);font-size:10px;line-height:1.5;
  letter-spacing:.1em;text-transform:uppercase;
}
.journal-id{color:var(--wine)}
.vintage-scale{display:flex;gap:18px;align-items:flex-start;margin-top:9px}
.vintage-attribute{display:grid;gap:4px}
.vintage-attribute-label{color:var(--muted);font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.vintage-dots{display:flex;gap:4px}
.vintage-dots i{display:block;width:6px;height:6px;border-radius:50%;background:var(--wine);opacity:.5}
.vintage-dots i.active{opacity:1}
.page-title{font-size:clamp(38px,10vw,58px);line-height:.95;margin:10px 0 28px}
.section-label{
  border-bottom:1px solid var(--line);padding-bottom:9px;margin:30px 0 5px;
  color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- Cards ---------- */

.card{
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 20px;
  margin-bottom: 16px;
}
.card h2{ font-size: 21px; margin: 0 0 12px; font-weight: 500; }

/* ---------- Formulare ---------- */

label{
  display:block;font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted);margin:18px 0 7px;
}
label:first-child{ margin-top: 0; }

input[type=text], input[type=number], input[type=date], input[type=email],
input[type=password], select, textarea{
  width:100%;padding:13px 0;border:0;border-bottom:1px solid #AAA095;border-radius:0;
  font-size:16px;background:transparent;color:var(--ink);font-family:var(--font-sans);
}
textarea{min-height:90px;resize:vertical;font-family:var(--font-serif);font-size:18px}
input:focus, select:focus, textarea:focus{ outline: none; border-color: var(--accent); }

.hint{ font-size: 12px; color: var(--muted); margin-top: 4px; }
.fieldset-disabled{ opacity: 0.4; pointer-events: none; }

/* ---------- Buttons ---------- */

button.primary{
  width:100%;padding:15px;background:var(--ink);color:white;border:none;
  border-radius:0;font-size:14px;font-weight:600;margin-top:8px;cursor:pointer;
}
button.primary:disabled{ opacity: 0.5; }

.new-btn{
  display:block;text-align:center;background:var(--ink);color:white;
  padding:14px;border-radius:0;font-weight:600;margin-bottom:22px;
}

.delete-btn{
  width: 100%; padding: 12px; background: var(--danger-soft); color: var(--wine);
  border: none; border-radius: 10px; font-weight: 700; margin-top: 10px; cursor: pointer;
}

.action-link{ color: var(--accent); font-weight: 700; }

/* ---------- Status-Meldungen ---------- */

.status{ text-align: center; padding: 14px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.status.success{ background: var(--green-soft); }
.status.error{ background: var(--danger-soft); }

/* ---------- Autocomplete (Vanilla-Variante, z.B. Keller-Formular) ---------- */

.autocomplete{ position: relative; }
.autocomplete-results{
  position: absolute; z-index: 20; background: white; border: 1px solid var(--line);
  border-radius: 8px; margin-top: 2px; max-height: 220px; overflow-y: auto; width: 100%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); display: none;
}
.autocomplete-results.open{ display: block; }
.autocomplete-results div{ padding: 10px 12px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--line); }
.autocomplete-results div:hover{ background: var(--paper-dim); }
.autocomplete-results .add-new{ color: var(--accent); font-weight: 700; }

.chip{
  display: inline-flex; align-items: center; gap: 8px; background: var(--green-soft); color: var(--green);
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; margin-top: 6px;
}
.chip button{ background: none; border: none; color: var(--green); cursor: pointer; font-size: 14px; }

/* ---------- Tag-Chips (Aromen, Rebsorten, Flags) ---------- */

.tag-chip{ display: inline-block; background: var(--paper-dim); padding: 5px 11px; border-radius: 999px; font-size: 12px; margin: 0 6px 6px 0; }
.flag{ display: inline-block; background: var(--green-soft); color: var(--green); padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; margin-right: 6px; }

/* ---------- Listen (Admin-Datenqualitaet) ---------- */

.list-item{
  display: flex; justify-content: space-between; align-items: center; background: white;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; font-size: 13px;
}
.list-item a{ font-weight: 700; color: var(--accent); font-size: 12px; }

.dup-group{ background: #FFF7E0; border: 1px solid #E8CE8A; border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.dup-group .title{ font-weight: 800; font-size: 13px; margin-bottom: 8px; }
.dup-row{ display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; }
.dup-row button{ background: var(--ink); color: white; border: none; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; }