:root {
  --ink: #171512;
  --muted: #6f6962;
  --paper: #f3f0ea;
  --paper-2: #e9e4dc;
  --line: rgba(23,21,18,.12);
  --cocoa: #211915;
  --cocoa-2: #392820;
  --clay: #c98f73;
  --clay-soft: #e7cdbf;
  --cream: #fbf8f2;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, svg { max-width: 100%; }
::selection { background: var(--clay-soft); }
.wrap { width: min(calc(100% - 44px), var(--max)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243,240,234,.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.wordmark {
  text-decoration: none;
  font-size: 17px;
  font-weight: 780;
  letter-spacing: .24em;
  white-space: nowrap;
}
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 13px;
}
.nav-links a, .lang a { text-decoration: none; color: var(--muted); }
.nav-links a:hover, .lang a:hover { color: var(--ink); }
.lang {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-left: 20px;
  border-left: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .1em;
}
.lang .active { color: var(--ink); font-weight: 750; }

.hero {
  min-height: 78vh;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  gap: clamp(46px, 7vw, 92px);
  align-items: center;
  padding-block: clamp(72px, 9vw, 128px);
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow, .kicker {
  color: #986246;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
h1 {
  margin: 0;
  max-width: 790px;
  font-size: clamp(58px, 7.8vw, 108px);
  line-height: .92;
  letter-spacing: -.055em;
}
.hero-copy p {
  max-width: 660px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.58;
}
.hero-actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.btn {
  min-height: 48px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.btn.primary { background: var(--ink); color: var(--paper); }
.btn:hover { transform: translateY(-1px); }
.btn:not(.primary):hover { background: rgba(23,21,18,.05); }

.hero-art {
  position: relative;
  min-height: 520px;
}
.hero-card {
  position: absolute;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 26px 70px rgba(50,34,25,.13);
}
.hero-card.one {
  inset: 0 18% 17% 0;
  background: linear-gradient(145deg, #d8a98f 0%, #b87959 54%, #8a5138 100%);
}
.hero-card.two {
  width: 56%;
  height: 54%;
  right: 0;
  bottom: 0;
  background: linear-gradient(145deg, #32231d, #171310);
  transform: rotate(5deg);
}
.hero-card.three {
  width: 43%;
  height: 38%;
  right: 3%;
  top: 2%;
  background: #e5ded2;
  transform: rotate(-5deg);
}
.hero-card.one::before {
  content: "V";
  position: absolute;
  right: -7%;
  bottom: -15%;
  font: 400 min(33vw, 430px)/.72 Georgia, serif;
  color: rgba(255,255,255,.12);
}
.hero-card.one::after {
  content: "INDEPENDENT · DÜSSELDORF";
  position: absolute;
  left: 26px;
  bottom: 24px;
  color: rgba(255,255,255,.86);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .16em;
}
.hero-card.two::after {
  content: "02";
  position: absolute;
  right: 20px;
  bottom: 13px;
  color: rgba(255,255,255,.17);
  font: 400 82px/1 Georgia, serif;
}
.hero-card.three::after {
  content: "01";
  position: absolute;
  right: 18px;
  bottom: 13px;
  color: rgba(23,21,18,.18);
  font: 400 64px/1 Georgia, serif;
}

.section { padding-block: clamp(82px, 9vw, 126px); border-top: 1px solid var(--line); }
.section-head {
  display: grid;
  grid-template-columns: minmax(130px,.7fr) minmax(0,2.3fr);
  gap: 42px;
  margin-bottom: 48px;
}
h2 {
  margin: 0;
  max-width: 860px;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.lead { max-width: 760px; color: var(--muted); font-size: 18px; line-height: 1.7; }

.fact-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fact { padding: 28px 28px 28px 0; }
.fact + .fact { border-left: 1px solid var(--line); padding-left: 28px; }
.fact strong { display: block; font: 400 30px/1.1 Georgia, serif; }
.fact span { display: block; margin-top: 7px; color: var(--muted); font-size: 13px; }

.brand-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.brand-card {
  position: relative;
  min-height: 470px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 30px;
  text-decoration: none;
  transition: transform .24s ease, box-shadow .24s ease;
}
.brand-card:hover { transform: translateY(-4px); box-shadow: 0 24px 64px rgba(41,28,21,.12); }
.brand-top { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.brand-no { font-size: 11px; font-weight: 760; letter-spacing: .15em; text-transform: uppercase; }
.brand-arrow { font-size: 24px; line-height: 1; }
.brand-logo-stage {
  margin: auto 0 34px;
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-logo-stage img { display: block; width: auto; max-width: 76%; max-height: 112px; object-fit: contain; }
.brand-copy { max-width: 480px; }
.brand-copy h3 { margin: 0 0 11px; font: 400 clamp(27px,3vw,36px)/1.05 Georgia, serif; letter-spacing: -.025em; }
.brand-copy p { margin: 0; font-size: 14px; line-height: 1.65; }
.brand-card.schoko {
  color: #f7f1ea;
  background:
    radial-gradient(circle at 75% 17%, rgba(201,143,115,.28), transparent 26%),
    linear-gradient(145deg, #31231d, #17120f 72%);
}
.brand-card.schoko .brand-no, .brand-card.schoko p { color: rgba(247,241,234,.68); }
.brand-card.schoko .brand-logo-stage img { filter: brightness(0) invert(1); }
.brand-card.choco {
  color: #251b17;
  background:
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.38), transparent 28%),
    linear-gradient(145deg, #e7cdbf, #c98f73);
}
.brand-card.choco .brand-no, .brand-card.choco p { color: rgba(37,27,23,.67); }
.brand-card.choco .brand-logo-stage img {
  max-width: 68%;
  max-height: 126px;
  mix-blend-mode: multiply;
}
.brand-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .07;
  right: -70px;
  bottom: -76px;
  pointer-events: none;
}

.contact-panel {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  padding: clamp(38px,6vw,72px);
  border-radius: 30px;
  background: linear-gradient(145deg, #1f1814, #11100e);
  color: var(--paper);
  box-shadow: 0 28px 70px rgba(38,25,18,.10);
}
.contact-panel .kicker { color: #d0a48c; }
.contact-panel h2 { max-width: 650px; }
.contact-panel p { color: rgba(246,245,241,.64); max-width: 560px; }
.contact-details { align-self: end; }
.contact-details a { display: inline-block; font-size: clamp(21px,2.5vw,30px); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.address { margin-top: 24px; color: rgba(246,245,241,.64); font-size: 14px; }

.site-footer { padding-block: 34px 44px; }
.footer-row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.footer-row nav { margin-left: auto; display: flex; gap: 20px; }
.footer-row a { text-decoration: none; }
.footer-row a:hover { color: var(--ink); }

.legal-main { padding-block: clamp(64px,8vw,110px); }
.legal-main h1 { font-size: clamp(50px,7vw,86px); margin-bottom: 46px; }
.legal { max-width: 820px; font-size: 16px; }
.legal h2 { margin-top: 46px; font-family: inherit; font-size: 22px; font-weight: 700; letter-spacing: -.015em; }
.legal h3 { margin-top: 30px; font-size: 17px; }
.legal p, .legal li { color: #4f4b46; }
.legal a { text-underline-offset: 3px; }
.legal-note { padding: 16px 18px; border-left: 3px solid #986246; background: var(--paper-2); color: var(--muted); font-size: 14px; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .lang { margin-left: auto; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-art { min-height: 430px; max-width: 620px; }
  .section-head { grid-template-columns: 1fr; gap: 18px; }
  .fact-grid { grid-template-columns: 1fr; }
  .fact + .fact { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .brand-grid { grid-template-columns: 1fr; }
  .brand-card { min-height: 420px; }
  .contact-panel { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .wrap { width: min(calc(100% - 28px), var(--max)); }
  .nav { min-height: 66px; }
  .wordmark { font-size: 14px; letter-spacing: .2em; }
  h1 { font-size: clamp(52px,16vw,76px); }
  .hero-copy p { font-size: 18px; }
  .hero-art { min-height: 340px; }
  .hero-card { border-radius: 22px; }
  .brand-card { min-height: 370px; padding: 24px; border-radius: 22px; }
  .brand-logo-stage { min-height: 145px; margin-bottom: 28px; }
  .contact-panel { border-radius: 22px; }
  .footer-row { align-items: flex-start; flex-direction: column; }
  .footer-row nav { margin-left: 0; }
}

/* Restore original SchokoLogo brand colors */
.brand-card.schoko .brand-logo-stage img {
  filter: none !important;
}