:root {
  --dbm-green: #14392a;
  --dbm-gold: #c79a2b;
  --dbm-cream: #f6f1e7;
  --dbm-paper: #fffdf8;
  --dbm-ink: #14392a;
  --dbm-muted: #626862;
  --dbm-line: #ded3bd;
  --dbm-line-soft: #e8e1d3;
  --dbm-max: 1200px;
}

.dbm-cocktail-page { margin: 0; background: var(--dbm-paper); color: var(--dbm-ink); }
.dbm-cocktail-page *, .dbm-cocktail-page *::before, .dbm-cocktail-page *::after { box-sizing: border-box; }
.dbm-shell { width: min(calc(100% - 48px), var(--dbm-max)); margin-inline: auto; }

.dbm-site-header {
  background: var(--dbm-paper);
  border-bottom: 1px solid var(--dbm-line-soft);
  position: relative;
  z-index: 20;
}
.dbm-header-row {
  min-height: 118px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
}
.dbm-brand { display: block; flex: 0 0 200px; }
.dbm-brand img { width: 200px; height: 108px; display: block; object-fit: contain; }
.dbm-nav { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.dbm-nav a {
  color: var(--dbm-green);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 700;
}
.dbm-nav a:hover, .dbm-nav a.is-current { color: var(--dbm-gold); }

.dbm-cocktail { background: var(--dbm-paper); }
.dbm-hero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(34px, 5vw, 70px);
  align-items: center;
  padding-top: 64px;
  padding-bottom: 64px;
}
.dbm-kicker, .dbm-eyebrow {
  color: var(--dbm-gold);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.dbm-hero-copy h1,
.dbm-card h2,
.dbm-more h2 {
  font-family: "Noto Serif Display", Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--dbm-green);
}
.dbm-hero-copy h1 {
  font-size: clamp(3.4rem, 7vw, 6rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 10px 0 20px;
}
.dbm-hero-facts {
  display: flex;
  align-items: flex-start;
  gap: clamp(34px, 5vw, 72px);
  flex-wrap: wrap;
  margin-top: 4px;
}
.dbm-hero-fact { min-width: 150px; }
.dbm-hero-fact span {
  display: block;
  color: var(--dbm-green);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.dbm-hero-fact strong {
  display: block;
  color: var(--dbm-green);
  font-size: .97rem;
  line-height: 1.35;
  font-weight: 600;
}
.dbm-hero-image { margin: 0; }
.dbm-hero-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  background: var(--dbm-paper);
  border: 1px solid var(--dbm-line);
}


.dbm-hero-placeholder {
  min-height: 0;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: #f4eee2;
  border: 1px solid var(--dbm-line);
  text-align: center;
}
.dbm-placeholder-inner {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: var(--dbm-green);
}
.dbm-placeholder-glass {
  width: 74px;
  height: 74px;
  border: 1px solid #cdbf9f;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: Georgia, serif;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--dbm-gold);
  background: rgba(255,255,255,.35);
}
.dbm-placeholder-inner span {
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--dbm-gold);
  font-weight: 700;
}
.dbm-placeholder-inner strong {
  font-family: Georgia, serif;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 500;
}

.dbm-section-divider {
  height: 24px;
  background: #efe7d8;
}

.dbm-content {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  gap: 24px;
  padding-top: 68px;
  padding-bottom: 28px;
}
.dbm-card {
  background: var(--dbm-paper);
  border: 1px solid var(--dbm-line);
  padding: clamp(28px, 3.5vw, 42px);
  box-shadow: none;
}
.dbm-card h2 {
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  margin: 7px 0 26px;
  line-height: 1.12;
}
.dbm-ingredient-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--dbm-line-soft);
}
.dbm-ingredient-row:last-child { border-bottom: 0; }
.dbm-ingredient-name { color: var(--dbm-green); font-weight: 600; }
.dbm-ingredient-amount { color: var(--dbm-green); font-weight: 700; white-space: nowrap; }
.dbm-facts { margin: 0; }
.dbm-facts > div { padding: 13px 0; border-bottom: 1px solid var(--dbm-line-soft); }
.dbm-facts > div:last-child { border-bottom: 0; }
.dbm-facts dt {
  color: var(--dbm-gold);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 3px;
  font-weight: 700;
}
.dbm-facts dd { margin: 0; color: var(--dbm-green); font-weight: 650; }
.dbm-source { padding: 0 0 62px; font-size: .86rem; color: var(--dbm-muted); }
.dbm-source a { color: var(--dbm-green); text-decoration-color: var(--dbm-gold); text-underline-offset: 3px; }
.dbm-empty { color: var(--dbm-muted); }
.dbm-service-empty { margin: 0; color: var(--dbm-muted); line-height: 1.55; font-size: .94rem; }

.dbm-more { background: var(--dbm-cream); border-top: 1px solid var(--dbm-line-soft); }
.dbm-more-inner {
  min-height: 260px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .5fr);
  align-items: center;
  gap: 44px;
  padding-top: 54px;
  padding-bottom: 54px;
}
.dbm-more h2 { margin: 8px 0 14px; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.12; }
.dbm-more p { margin: 0; color: var(--dbm-muted); font-size: 1.04rem; line-height: 1.6; }
.dbm-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.dbm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 18px;
  background: var(--dbm-green);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid var(--dbm-green);
}
.dbm-button-outline { background: transparent; color: var(--dbm-green); border-color: var(--dbm-gold); }
.dbm-button:hover { opacity: .9; }

.dbm-footer { background: var(--dbm-paper); border-top: 1px solid var(--dbm-line-soft); }
.dbm-footer-row {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--dbm-green);
  font-size: .82rem;
  font-weight: 600;
}
.dbm-footer-row span:last-child { color: #7a817b; font-weight: 400; }

@media (max-width: 900px) {
  .dbm-header-row { min-height: 96px; }
  .dbm-brand { flex-basis: 165px; }
  .dbm-brand img { width: 165px; height: auto; }
  .dbm-nav { gap: 16px; }
  .dbm-hero { grid-template-columns: 1fr; padding-top: 42px; padding-bottom: 44px; }
  .dbm-hero-image { order: -1; }
  .dbm-content { grid-template-columns: 1fr; }
  .dbm-more-inner { grid-template-columns: 1fr; }
  .dbm-actions { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .dbm-shell { width: min(calc(100% - 32px), var(--dbm-max)); }
  .dbm-header-row { display: block; padding-top: 12px; padding-bottom: 12px; }
  .dbm-brand img { width: 155px; }
  .dbm-nav { margin-top: 8px; gap: 12px 18px; }
  .dbm-nav a { font-size: .8rem; }
  .dbm-hero-copy h1 { font-size: clamp(2.75rem, 14vw, 4.25rem); }
  .dbm-hero-image img { aspect-ratio: 1 / 1; }
  .dbm-content { padding-top: 42px; }
  .dbm-card { padding: 24px 20px; }
  .dbm-footer-row { display: block; padding-top: 22px; padding-bottom: 22px; }
  .dbm-footer-row span { display: block; margin: 3px 0; }
}


/* Wissensstufen: Free / Basic / Meister */
.dbm-knowledge { padding-top: 34px; padding-bottom: 58px; display: grid; gap: 20px; }
.dbm-tier { border: 1px solid var(--dbm-line); padding: clamp(22px,3vw,30px); background: var(--dbm-paper); }
.dbm-tier-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.dbm-tier-head span { display:inline-block; padding:6px 10px; background:var(--dbm-green); color:#fff; font-size:.68rem; font-weight:800; letter-spacing:.12em; }
.dbm-tier-basic .dbm-tier-head span { background:var(--dbm-gold); }
.dbm-tier-master .dbm-tier-head span { background:#8a6c22; }
.dbm-tier-head small { color:var(--dbm-muted); font-size:.84rem; }
.dbm-tier h2, .dbm-tier h3 { font-family:"Noto Serif Display",Georgia,serif; color:var(--dbm-green); font-weight:400; }
.dbm-tier h2 { font-size:clamp(1.8rem,3vw,2.35rem); margin:8px 0 12px; }
.dbm-tier h3 { font-size:1.45rem; margin:0 0 9px; }
.dbm-tier p { margin:0; color:var(--dbm-muted); line-height:1.65; }
.dbm-knowledge-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:20px; }
.dbm-knowledge-facts > div { background:var(--dbm-cream); border:1px solid var(--dbm-line-soft); padding:16px; }
.dbm-knowledge-facts strong { display:block; color:var(--dbm-gold); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:5px; }
.dbm-knowledge-facts span { color:var(--dbm-green); line-height:1.45; }
.dbm-tier-master { background:var(--dbm-cream); }
.dbm-master-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.dbm-master-grid > div { background:var(--dbm-paper); border:1px solid var(--dbm-line); padding:22px; }
.dbm-tier-sources { background:#faf7f0; }
.dbm-tier-sources ul { margin:12px 0 0; padding-left:20px; color:var(--dbm-muted); line-height:1.65; }

@media (max-width: 760px) {
  .dbm-knowledge-facts { grid-template-columns:1fr; }
  .dbm-master-grid { grid-template-columns:1fr; }
}