/* ==========================================================================
   TWCC – Premium & Luxury Redesign
   Zwei Design-Welten über CSS-Variablen gesteuert:
   body[data-theme="cellar"]  -> Start, Luxury, Luxury-Detail  (dunkel, Gold)
   body[data-theme="ledger"]  -> Premium, Premium-Detail        (hell, Ledger)
   ========================================================================== */

:root{
  --radius: 2px;
  --maxw: 1180px;
  --gap: 24px;
}

/* ---------- Cellar (dunkel) ---------- */
body[data-theme="cellar"]{
  --ink: #0F1512;
  --ink-deep: #0B100E;
  --paper: #EDE7DC;
  --muted: #9A9791;
  --gold: #C9A15E;
  --line: rgba(201,161,94,0.25);
  --card-bg: #141B17;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Karla", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Ledger (hell) ---------- */
body[data-theme="ledger"]{
  --ink: #171310;
  --ink-soft: #403830;
  --paper: #F3EFE6;
  --paper-2: #EDE6D8;
  --oxblood: #8C3A2B;
  --brass: #B08D4F;
  --line: rgba(23,19,16,0.14);
  --card-bg: #FFFFFF;
  --serif: "Libre Baskerville", Georgia, serif;
  --sans: "Karla", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  background: var(--paper);
  color: var(--ink);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{ font-family: var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ max-width: var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow{ font-family: var(--mono, var(--sans)); text-transform:uppercase; letter-spacing:.12em; font-size:12px; opacity:.75; }
h1,h2,h3{ font-family: var(--serif); font-weight:400; margin:0 0 .4em; }
p{ margin:0 0 1em; }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:50; backdrop-filter: blur(8px); border-bottom:1px solid var(--line); }
body[data-theme="cellar"] .site-header{ background: rgba(15,21,18,0.9); }
body[data-theme="ledger"] .site-header{ background: rgba(243,239,230,0.92); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.logo{ font-family: var(--serif); font-size:20px; letter-spacing:.04em; display:flex; align-items:center; gap:10px; }
.logo-mark{ height:40px; width:40px; display:block; flex-shrink:0; }
body[data-theme="cellar"] .logo-mark{ filter: invert(1) brightness(1.15); }
.logo small{ display:block; font-family: var(--sans); font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.6; }
.nav{ display:flex; gap:28px; align-items:center; font-size:14px; }
.nav a{ opacity:.85; }
.nav a.active, .nav a:hover{ opacity:1; border-bottom:1px solid var(--gold, var(--oxblood)); padding-bottom:3px; }
.nav .cta{ border:1px solid var(--gold, var(--brass)); padding:8px 18px; border-radius: var(--radius); }

/* ---------- Hero split ---------- */
.hero-split{ display:grid; grid-template-columns: 1.1fr .9fr; gap:48px; align-items:center; padding:72px 0; }
.hero-split .kicker{ margin-bottom:16px; }
.hero-split h1{ font-size:46px; line-height:1.1; }
.hero-split .lead{ max-width:46ch; opacity:.9; font-size:16px; }
.hero-figures{ display:flex; gap:32px; margin-top:28px; }
.hero-figures div{ font-family: var(--serif); font-size:28px; }
.hero-figures span{ display:block; font-family: var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:.08em; opacity:.6; }
.img-placeholder{ aspect-ratio: 3/4; border-radius: var(--radius); display:flex; align-items:center; justify-content:center; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
body[data-theme="cellar"] .img-placeholder{ background: repeating-linear-gradient(45deg, #1b2420, #1b2420 10px, #202a25 10px, #202a25 20px); color: var(--muted); border:1px solid var(--line); }
body[data-theme="ledger"] .img-placeholder{ background: repeating-linear-gradient(45deg, #E6E0D2, #E6E0D2 10px, #DED7C6 10px, #DED7C6 20px); color: var(--ink-soft); border:1px solid var(--line); }
.img-placeholder.square{ aspect-ratio:1/1; }

.btn{ display:inline-block; padding:12px 26px; border-radius: var(--radius); font-size:14px; letter-spacing:.02em; border:1px solid transparent; }
body[data-theme="cellar"] .btn-primary{ background: var(--gold); color: var(--ink-deep); }
body[data-theme="cellar"] .btn-ghost{ border-color: var(--gold); color: var(--paper); }
body[data-theme="ledger"] .btn-primary{ background: var(--oxblood); color:#fff; }
body[data-theme="ledger"] .btn-ghost{ border-color: var(--brass); color: var(--ink); }

/* ---------- Tier duo (Premium/Luxury Auswahl auf Start) ---------- */
.tier-duo{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); padding:48px 0 80px; }
.tier-card{ border:1px solid var(--line); padding:40px; border-radius: var(--radius); }
.tier-card h3{ font-size:28px; }
.tier-card .range{ font-family: var(--mono, var(--sans)); font-size:13px; opacity:.7; margin-bottom:10px; }

/* ---------- Card grid ---------- */
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; gap:16px; flex-wrap:wrap; }
.card-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.product-card{ background: var(--card-bg); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.product-card .img-placeholder{ aspect-ratio:3/4; }
.product-card .pc-body{ padding:16px; }
.product-card .pc-tier{ font-size:10px; text-transform:uppercase; letter-spacing:.1em; opacity:.6; margin-bottom:6px; }
.product-card h4{ font-family: var(--serif); font-size:19px; margin:0 0 4px; }
.product-card .pc-meta{ font-size:12px; opacity:.7; margin-bottom:10px; }
.product-card .pc-row{ display:flex; justify-content:space-between; font-size:12px; padding:4px 0; border-top:1px solid var(--line); }
.product-card .pc-price{ margin-top:12px; font-family: var(--serif); font-size:18px; }
.filter-bar{ display:flex; gap:10px; font-size:13px; }
.filter-bar button{ background:none; border:1px solid var(--line); padding:6px 14px; border-radius: var(--radius); cursor:pointer; color:inherit; font-family:inherit; }
.filter-bar button.active{ border-color: var(--gold, var(--oxblood)); }

/* ---------- Filter-Toolbar (Premium/Luxury) ---------- */
.filter-toolbar{ display:flex; gap:12px; flex-wrap:wrap; margin:20px 0 32px; }
.filter-toolbar input[type="text"]{ flex:1; min-width:220px; padding:10px 14px; border:1px solid var(--line); background:transparent; color:inherit; border-radius:var(--radius); font-family:inherit; font-size:14px; }
.filter-toolbar select{ padding:10px 14px; border:1px solid var(--line); border-radius:var(--radius); font-family:inherit; font-size:14px; color:inherit; }
body[data-theme="ledger"] .filter-toolbar select{ background:#fff; }
body[data-theme="cellar"] .filter-toolbar select{ background:var(--card-bg); }
.filter-toolbar input::placeholder{ color:inherit; opacity:.55; }

/* ---------- Register table (Premium/Ledger) ---------- */
.register-table{ width:100%; border-collapse:collapse; font-size:13px; }
.register-table th{ text-align:left; font-family: var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:11px; padding:10px 12px; border-bottom:1px solid var(--ink); opacity:.7; }
.register-table td{ padding:14px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.register-table tr:hover{ background: var(--paper-2); }
.register-table .no{ font-family: var(--mono); opacity:.5; }
.register-table .title{ font-family: var(--serif); font-size:16px; }
.register-table .price{ font-family: var(--mono); text-align:right; }

/* ---------- Flavour groups ---------- */
.flavour-groups{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); padding:56px 0; }
.flavour-card{ border:1px solid var(--line); padding:24px; border-radius: var(--radius); }
.flavour-card h4{ font-family: var(--serif); font-size:20px; }
.flavour-card .count{ font-size:12px; opacity:.65; }

/* ---------- Detail page ---------- */
.detail-layout{ display:grid; grid-template-columns: .9fr 1.1fr; gap:56px; padding:56px 0; }
.detail-facts{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin:24px 0; font-size:13px; }
.detail-facts dt{ opacity:.6; }
.detail-facts dd{ margin:0; font-family: var(--serif); font-size:16px; }
.flavour-bars{ margin:24px 0; }
.flavour-bars .bar-row{ display:grid; grid-template-columns: 140px 1fr 32px; align-items:center; gap:10px; font-size:12px; margin-bottom:8px; }
.flavour-bars .bar-track{ height:6px; background: var(--line); border-radius:4px; overflow:hidden; }
.flavour-bars .bar-fill{ height:100%; }
body[data-theme="cellar"] .bar-fill{ background: var(--gold); }
body[data-theme="ledger"] .bar-fill{ background: var(--oxblood); }

/* ---------- Bands ---------- */
.cta-band, .newsletter-band{ padding:56px 0; text-align:center; border-top:1px solid var(--line); }
.newsletter-form{ display:flex; gap:10px; justify-content:center; margin-top:20px; }
.newsletter-form input{ padding:12px 16px; border:1px solid var(--line); background:transparent; color:inherit; min-width:280px; border-radius: var(--radius); }

/* ---------- Philosophy (Über uns) ---------- */
.philosophy-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); padding:32px 0 56px; }
.philosophy-card .num{ font-family: var(--serif); font-size:36px; opacity:.4; }

/* ---------- Partner grid ---------- */
.partner-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); padding:24px 0 56px; }
.partner-card{ border:1px solid var(--line); padding:20px; border-radius: var(--radius); font-size:13px; }

/* ---------- Footer ---------- */
footer{ padding:48px 0; border-top:1px solid var(--line); font-size:13px; opacity:.8; }
.footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; }

/* ---------- Utility / state ---------- */
.state-msg{ padding:60px 24px; text-align:center; opacity:.7; font-size:14px; }
.hidden{ display:none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .hero-split, .detail-layout, .tier-duo{ grid-template-columns:1fr; }
  .card-grid{ grid-template-columns:repeat(2,1fr); }
  .flavour-groups, .philosophy-grid, .partner-grid{ grid-template-columns:1fr 1fr; }
  .nav{ display:none; }
}