/* === Weinprobe · Global Styles (Weinrot · Beige · Gold) =======================
   - Einheitliche Farb-/Typo-Token für Admin + Public + Landing
   - Gleichmäßige Seitenränder für header/main/footer via --page-pad-inline
   - Kompakter, aufgeräumter Ersatz für die alte styles.css
============================================================================== */

/* 0) Schrift */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* 1) Design Tokens */
:root{
  /* Flächen & Typo */
  --bg:           #F7F2EA;   /* Cream/Beige Hintergrund */
  --surface:      #FFFFFF;   /* Karten/Panele */
  --surface-muted:#FBF7F1;
  --text:         #1F1A17;   /* Espresso */
  --muted:        #6B5F57;   /* Sekundärtext warm */
  --border:       #E6DED5;

  /* Primär (Weinrot/Burgunder) */
  --wine-900:     #4E0E18;
  --wine-800:     #61121E;
  --wine-700:     #751826;
  --wine-600:     #8B1E30;   /* Hauptton */
  --wine-500:     #A1283C;

  /* Akzent (Gold) */
  --gold-500:     #C9A227;
  --gold-400:     #D8B657;

  /* System */
  --ring:         var(--wine-600);
  --radius:       14px;
  --shadow:       0 6px 20px rgba(0,0,0,0.06);

  /* Seiten-Innenabstand (links/rechts) */
  --page-pad-inline: clamp(16px, 8vw, 96px);
}

/* 2) Base + einheitliche Seitenränder */
*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}

/* Gleiche Ränder für Kopf/Content/Fuß */
header, main, footer,
.site-header, .site-footer{
  padding-inline: var(--page-pad-inline);
}

/* Mobile: etwas knapper */
@media (max-width: 768px){
  :root{ --page-pad-inline: clamp(12px, 5vw, 48px); }
}

/* 3) Layout-Helfer */
.container{ max-width: 1100px; margin: 32px auto; }
.grid{ display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.center{ text-align:center; }
.spread{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }

/* 4) Header / Footer (neutral, Farbakzent über admin/frontend CSS möglich) */
header.site, .header, .site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 10px;
}
header.site h1, .header h1{ font-size:1.3rem; font-weight:800; color:var(--wine-600); margin:0; }
header.site a, .header a{ text-decoration:none; color:var(--text); font-weight:600; padding:6px 10px; border-radius:8px; transition: background .15s, color .15s; }
header.site a:hover, .header a:hover{ background: color-mix(in srgb, var(--gold-400) 30%, #fff 70%); color:#231a0a; }

footer, .site-footer{
  text-align:center; color:var(--muted);
  font-size:.95rem; margin-top:32px; padding-block: 14px;
  border-top: 1px solid var(--border);
}

/* 5) Typografie */
h1,h2,h3{ line-height:1.25; color: var(--wine-900); }
h1{ font-size: clamp(1.9rem, 3.4vw, 2.4rem); margin:.4em 0 .2em; }
h2{ font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin:.6em 0 .3em; }
h3{ font-size: clamp(1.15rem, 1.8vw, 1.3rem); margin:.5em 0 .25em; }
.muted, .hint{ color: var(--muted); }

/* 6) Cards / Surfaces */
.card, .panel, .surface{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--gold-400) 50%, var(--border) 50%); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.card-hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.card-title{ margin:0; font-weight:800; font-size:1.05rem; color:#111; }

/* 7) Buttons / Pills */
.btn, .pill, button, [type="submit"], a.button{
  -webkit-appearance:none; appearance:none; border:0; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:999px; font-weight:700; text-decoration:none;
  background: var(--wine-600); color:#fff;
  box-shadow: 0 6px 16px rgba(139,30,48,.18);
  transition: transform .06s ease, background .2s ease, filter .15s ease, box-shadow .2s ease;
}
.btn:hover, .pill:hover, a.button:hover, button:hover{ background: linear-gradient(90deg, var(--wine-600), var(--wine-800)); transform: translateY(-1px); }
.btn.ghost, .pill.ghost{
  background:#fff; color:var(--wine-700); border:1px solid var(--border); box-shadow:none;
}
.btn.ghost:hover{ border-color: var(--gold-400); }

/* 8) Form Controls – Standard (weiß) */
.input, input[type="text"], input[type="number"], input[type="email"], input[type="search"], select, textarea{
  width:100%; background:#fff; color:#222;
  border:1px solid var(--border); border-radius:12px; padding:10px 12px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input:focus, input:focus, select:focus, textarea:focus{
  outline:none; border-color: color-mix(in srgb, var(--wine-600) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wine-600) 22%, transparent);
}
label{ font-weight:600; color:#222; }

/* 9) Badges */
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px; font-weight:700; font-size:.9rem;
  background: color-mix(in srgb, var(--gold-400) 35%, #fff 65%);
  border: 1px solid color-mix(in srgb, var(--gold-400) 55%, #fff 45%);
  color:#3a3a3a;
}

/* 10) Tables */
.table, table{
  width:100%; border-collapse:collapse; background:var(--surface);
  border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
}
.table th, .table td, table th, table td{ padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; }
.table th, table th{ background:#faf7f2; font-weight:700; color:var(--wine-900); }

/* 11) Hero / Intro (Landing + Public) */
.hero, main > section:first-child, .intro{
  background: linear-gradient(180deg, var(--surface) 0%, #f8f7f5 100%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 3vw, 40px);
  text-align: center;
  margin-block: 20px;
}
.hero h1, .intro h1{ color: var(--wine-700); letter-spacing:.2px; }
.hero p, .intro p{ color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.15rem); margin-top:.2em; }
.hero .actions, .intro .actions{ display:flex; justify-content:center; gap:14px; margin-top:10px; flex-wrap:wrap; }

/* 12) Stars / Ratings (rein optisch) */
.stars{ display:flex; gap:8px; align-items:center; }
.star{ font-size:26px; line-height:1; color:#c9c9c9; transition: transform .06s ease, color .15s ease; }
.star:hover{ color: var(--wine-700); transform: translateY(-1px) scale(1.05); }

/* 13) Alerts */
.alert{
  border:1px solid var(--border); border-left:4px solid var(--wine-600); background:#fff;
  padding:12px 14px; border-radius:12px; box-shadow: var(--shadow);
}
.alert.ok{ border-left-color: #2e7d32; }
.alert.warn{ border-left-color: #b33a3a; }

/* 14) Accessibility */
:focus-visible, a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid color-mix(in srgb, var(--gold-400), #ffffff 35%); outline-offset:2px; border-radius:10px;
}

/* 15) Soft Dark Mode (optional, nicht dominant) */
@media (prefers-color-scheme: dark){
  body{ background: linear-gradient(180deg, #1b1816 0%, #231f1c 100%); color:#e9e3df; }
  .card, .panel, .surface{ background:#26221f; border-color:#2f2a27; box-shadow:none; }
  .table, table{ background:#26221f; }
  .table th, table th{ background:#2a2623; }
  .input, input, select, textarea{ background:#2b2724; border-color:#3a3532; color:#eee; }
  header.site, .header, .site-header{ background: rgba(38,34,31,.9); border-color:#2f2a27; box-shadow:none; }
  .btn.ghost{ background:transparent; color:#eee; border-color:#3a3532; }
}

/* === 16) Formularfelder im Weinprobe-Style für RATE / RESULTS / ADMIN ===== */
/* Bordeaux-Hintergrund mit goldener Schrift – wie gewünscht */
body.rate input[type="text"],
body.rate input[type="number"],
body.rate input[type="email"],
body.rate input[type="password"],
body.rate input[type="search"],
body.rate textarea,
body.rate select,
body.results input[type="text"],
body.results input[type="number"],
body.results input[type="email"],
body.results input[type="password"],
body.results input[type="search"],
body.results textarea,
body.results select,
body.admin input[type="text"],
body.admin input[type="number"],
body.admin input[type="email"],
body.admin input[type="password"],
body.admin input[type="search"],
body.admin textarea,
body.admin select{
  background: var(--wine-700);
  color: var(--gold-400);
  border: 1px solid var(--wine-900);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.1);
}

body.rate input::placeholder,
body.rate textarea::placeholder,
body.results input::placeholder,
body.results textarea::placeholder,
body.admin input::placeholder,
body.admin textarea::placeholder{
  color: color-mix(in srgb, var(--gold-400) 75%, var(--wine-900) 25%);
  opacity: .95;
}

body.rate input:focus,
body.rate textarea:focus,
body.rate select:focus,
body.results input:focus,
body.results textarea:focus,
body.results select:focus,
body.admin input:focus,
body.admin textarea:focus,
body.admin select:focus{
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-500) 35%, transparent);
}

/* Buttons auf diesen Seiten */
body.rate .btn, body.rate button, body.rate [type="submit"],
body.results .btn, body.results button, body.results [type="submit"],
body.admin .btn, body.admin button, body.admin [type="submit"]{
  background: var(--wine-600);
  color:#fff;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight:700;
  box-shadow: 0 6px 16px rgba(139,30,48,.25);
}
body.rate .btn:hover, body.rate button:hover, body.rate [type="submit"]:hover,
body.results .btn:hover, body.results button:hover, body.results [type="submit"]:hover,
body.admin .btn:hover, body.admin button:hover, body.admin [type="submit"]:hover{
  background: linear-gradient(90deg,var(--wine-600),var(--wine-800));
}

/* Checkboxen/Radio in gold/bordeaux */
body.rate input[type="checkbox"], body.rate input[type="radio"],
body.results input[type="checkbox"], body.results input[type="radio"],
body.admin input[type="checkbox"], body.admin input[type="radio"]{
  accent-color: var(--gold-400);
}

/* Seitenhintergründe explizit angleichen (falls Templates eigene Klassen setzen) */
body.rate, body.results, body.admin{
  background: var(--bg);
  color: var(--text);
}
/* === Gemeinsamer App-Header (Logo links, Actions rechts) ================== */
.site-header {
  background: linear-gradient(180deg, var(--wine-900), var(--wine-700));
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  padding-block: 8px;
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand-logo img {
  display: block;
  height: clamp(28px, 5.2vw, 40px); /* mobil etwas kleiner, Desktop ~40px */
  width: auto;
}

/* Rechts: Navigation / Aktionen */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.header-actions a {
  text-decoration: none;
}

/* Mobile: lieber stapeln und zentrieren */
@media (max-width: 640px){
  .site-header .bar { flex-wrap: wrap; }
  .header-actions { width: 100%; justify-content: flex-end; }
}
/* === Gemeinsamer Header: Logo links, Actions rechts ===================== */
.site-header {
  background: linear-gradient(180deg, var(--wine-900), var(--wine-700));
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  padding-block: 8px;
}

.site-header .header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  /* gleichmäßige Seitenränder kommen bereits über padding-inline aus styles.css */
}

.brand-img {
  display: block;
  height: clamp(28px, 5.2vw, 40px);
  width: auto;
}

.header-spacer {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.header-spacer a { text-decoration: none; color: #FFEDEA; }
.header-spacer a:hover { background: rgba(255,255,255,.10); border-radius: 10px; padding: 6px 8px; }

/* === Einheitlicher Footer Weinprobe =============================== */
.site-footer{
  background: var(--wine-900);
  color: #E6ECFF;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 18px var(--page-pad-inline);
  box-shadow: 0 -2px 8px rgba(0,0,0,.05);
}

.footer-inner{
  max-width: 720px;
  margin: 0 auto;
  color: #F6EBDD;
}

/* Mobil etwas kleiner und dichter */
@media (max-width: 640px){
  .site-footer{
    font-size: 0.85rem;
    padding: 14px 5vw;
  }
}
/* Footer-Grundlayout */
.landing-footer{display:flex;align-items:center;padding:14px var(--page-pad-inline);box-shadow:0 -2px 8px rgba(0,0,0,.05)}
.landing-footer-inner{max-width:720px}

/* Variante A: Bordeaux hell auf dunkel */
.footer--red{background:var(--wine-900);color:#F6EBDD}
.footer--red a{color:#FFEDEA}

/* Variante B: Cream mit Weinrot-Text */
.footer--cream{background:var(--surface);color:var(--wine-800);border-top:1px solid var(--border)}
.footer--cream a{color:var(--wine-700)}

@media (max-width:640px){
  .landing-footer{justify-content:center;text-align:center;font-size:.85rem;padding:16px 5vw}
}
/* === Public-Header: sichere Seitenränder wie Hero/Footer ================ */
.site-header .bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-left: clamp(16px, 6vw, 40px);
  padding-right: clamp(16px, 6vw, 40px);
}

/* Mobil: notfalls erzwingen */
@media (max-width:640px){
  .site-header .bar{
    padding-left: clamp(16px, 6vw, 40px) !important;
    padding-right: clamp(16px, 6vw, 40px) !important;
  }
}