/* Gotthilf — the green is sampled from the 1080px logo PNG, so the site matches
   the printed packaging rather than an approximation of it. */
:root {
  --green: #1b6446;
  --green-dark: #11442f;
  --green-light: #2d8560;
  --blue: #1f7fa8;        /* the digital half */
  --ink: #16211c;
  --body: #46514b;
  --line: #e2e0d8;
  --cream: #f8f6f0;
  --cream-deep: #efece2;
  --white: #fff;
  --radius: 18px;
  --wrap: 1180px;
  --shadow: 0 1px 2px rgba(22, 33, 28, .04), 0 12px 32px -12px rgba(22, 33, 28, .14);
  --shadow-lift: 0 2px 4px rgba(22, 33, 28, .05), 0 22px 44px -16px rgba(22, 33, 28, .22);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0; color: var(--body); background: var(--white);
  font: 400 17px/1.7 var(--sans); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); }
h1, h2, h3, h4 { color: var(--ink); font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1.1; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.2; }
h3 { font-size: 1.25rem; line-height: 1.3; }
p { margin: 0 0 1.1em; }
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.center { text-align: center; max-width: 42ch; margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--white); padding: .6rem 1rem; z-index: 99; }

.kicker {
  font: 600 .74rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--green-light); margin: 0 0 1rem;
}
.kicker--light { color: rgba(255,255,255,.85); }
.eyebrow {
  font: 600 .7rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--body); opacity: .7; margin: 0 0 .6rem;
}
.lead { font-size: 1.12rem; max-width: 62ch; }

/* ---------------------------------------------------------------- header */
.header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line);
}
.header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 92px; }
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
/* The printed lockup, unaltered: emblem over "Dr. Gotthilf" over "Since 1927".
   Its artwork is 470x475, so height drives the width and the header has to be
   tall enough that the 1927 rule is still legible. */
.brand img { height: 68px; width: auto; object-fit: contain; display: block; }
.nav { display: flex; gap: 1.6rem; }
.nav a {
  text-decoration: none; color: var(--body); font-size: .94rem; font-weight: 500;
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--green); }
.nav a.active { color: var(--green); border-bottom-color: var(--green); }
.header__heart { width: 36px; height: 37px; object-fit: contain; flex: none; }
.navtoggle, .navburger { display: none; }

/* EN/DE. Deliberately not next to the quality badge: the badge is a flag, and a
   flag beside a language control reads as "the site is in German". */
.langs { display: flex; gap: .4rem; flex: none; align-items: center; }
.langs a {
  text-decoration: none; color: var(--muted); font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; padding: .25rem .45rem; border-radius: 6px; line-height: 1;
}
.langs a:hover { color: var(--green); background: var(--cream); }
.langs a.active { color: var(--white); background: var(--green); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-block; background: var(--green); color: var(--white);
  text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: .85rem 1.6rem; border-radius: 999px; border: 2px solid var(--green);
  transition: background .22s var(--ease), color .22s var(--ease),
              transform .22s var(--ease), box-shadow .22s var(--ease);
}
.btn:hover {
  background: var(--green-dark); border-color: var(--green-dark);
  transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(27,100,70,.6);
}
.btn--small { padding: .6rem 1.2rem; font-size: .88rem; }
.btn--ghost { background: transparent; color: var(--green); }
.btn--ghost:hover { background: var(--green); color: var(--white); }
.btn--light { background: var(--white); color: var(--green); border-color: var(--white); }
.btn--light:hover { background: var(--cream); border-color: var(--cream); color: var(--green-dark); }
.btn--ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn--ghost-light:hover { background: var(--white); color: var(--green); border-color: var(--white); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ---------------------------------------------------------------- heroes */
.hero {
  position: relative; color: var(--white); background: var(--green-dark) center/cover no-repeat;
  padding: clamp(5rem, 14vw, 9.5rem) 0;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(14,46,33,.93) 0%, rgba(14,46,33,.78) 45%, rgba(14,46,33,.35) 100%);
}
.hero__inner { position: relative; max-width: 42rem; }
.hero h1 { color: var(--white); }
.hero .lead { color: rgba(255,255,255,.9); margin-bottom: 2rem; }

.pagehero { background: var(--cream); padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--line); }
.pagehero .lead { color: var(--body); }
.pagehero--image { position: relative; color: var(--white); background: var(--green-dark) center/cover no-repeat; border-bottom: 0; }
.pagehero--image::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(14,46,33,.92), rgba(14,46,33,.62));
}
.pagehero--image .wrap { position: relative; }
.pagehero--image h1 { color: var(--white); }
.pagehero--image .lead { color: rgba(255,255,255,.88); }
.pagehero--image .kicker { color: rgba(255,255,255,.8); }

/* ---------------------------------------------------------------- bands */
.band { padding: clamp(3.2rem, 7vw, 5.5rem) 0; }
.band--tint { background: var(--cream); }

/* ---------------------------------------------------------------- split */
.split { padding: clamp(3.2rem, 7vw, 5.5rem) 0; text-align: center; }
.split h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 500; color: var(--body); }
.split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3rem; text-align: left; }
.split__half { border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.split__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--cream-deep); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body { padding: 2rem; flex: 1; display: flex; flex-direction: column; }
.split__body h3 { font-size: 1.7rem; }
.split__half--trad { background: var(--cream); }
.split__half--digital { background: var(--green-dark); color: rgba(255,255,255,.82); }
.split__half--digital h3, .split__half--digital .eyebrow { color: var(--white); }
.split__half--digital .eyebrow { opacity: .65; }
.split__half--digital .btn { background: var(--white); color: var(--green-dark); border-color: var(--white); }
.split__half--digital .btn:hover { background: var(--cream); border-color: var(--cream); }
.ticks { list-style: none; padding: 0; margin: 0 0 1.6rem; }
.ticks li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; font-size: .95rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: .5rem; height: .28rem;
  border-left: 2px solid var(--green-light); border-bottom: 2px solid var(--green-light);
  transform: rotate(-45deg);
}
.split__half--digital .ticks li::before { border-color: #7fd6ae; }
.split__body .btn { align-self: flex-start; margin-top: auto; }

/* ---------------------------------------------------------------- pillars */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.pillar { border-top: 3px solid var(--green); padding-top: 1.2rem; }
.pillar p { font-size: .95rem; margin: 0; }

/* ---------------------------------------------------------------- cards */
.cards { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; text-decoration: none; color: inherit;
  transition: box-shadow .26s var(--ease), transform .26s var(--ease), border-color .26s var(--ease);
  display: flex; flex-direction: column; box-shadow: var(--shadow);
}
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); border-color: #cfe0d6; }
/* A fixed height, not an aspect-ratio: as a flex item an aspect-ratio box
   resolves against the wrong width when the picture is much wider than tall
   (the Best 4 carton), which pushed one card's heading out of line. */
/* Size the image itself instead of clamping it with max-height: as a grid item
   the percentage never resolved, so a square carton rendered 300px tall in the
   210px box and overlapped the heading below it. */
.card__img { height: 210px; flex: none; overflow: hidden; margin-bottom: 1.2rem; }
.card__img img { width: 100%; height: 100%; object-fit: contain; }
/* App icons are square marks, not product photography. Absolute sizes, not
   percentages — as a centred grid item a percentage resolves against the
   padding box and clips the icon (same trap as .dp__shot--icon). */
.card__icon {
  height: 150px; flex: none; margin-bottom: 1.2rem; border-radius: var(--radius);
  background: var(--cream); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.card__icon img { width: 108px; height: 108px; object-fit: contain; border-radius: 22px; }
.card p { font-size: .93rem; }
.card__more { margin-top: auto; color: var(--green); font-weight: 600; font-size: .88rem; }
.card__more::after { content: " →"; }

/* ---------------------------------------------------------------- feature */
.feature { padding: clamp(3.2rem, 7vw, 5.5rem) 0; }
.feature--tint { background: var(--cream); }
.feature__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.feature__media img { border-radius: var(--radius); width: 100%; }

/* ---------------------------------------------------------------- items */
.items { display: flex; flex-direction: column; gap: clamp(2.5rem, 6vw, 4.5rem); }
.item { display: grid; grid-template-columns: 380px 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.item--flip .item__media { order: 2; }
.item__media {
  background: var(--cream); border-radius: var(--radius); padding: 1.8rem;
  aspect-ratio: 4 / 3; overflow: hidden;
}
.item__media img { width: 100%; height: 100%; object-fit: contain; }
.item__body p { margin-bottom: 0; }

/* ---------------------------------------------------------------- prose */
.prose { max-width: 70ch; }
.prose blockquote {
  margin: 2rem 0; padding: .4rem 0 .4rem 1.6rem; border-left: 3px solid var(--green);
  font-family: var(--serif); font-size: 1.25rem; color: var(--ink); font-style: italic;
}
.prose .note { font-weight: 600; color: var(--ink); }
.prose__figure { margin: 2.5rem 0 0; }
.prose__figure img { border-radius: var(--radius); }

/* ---------------------------------------------------------------- timeline */
.tl { list-style: none; margin: 0; padding: 0; max-width: 54rem; }
.tl__item { display: grid; grid-template-columns: 7.5rem 1fr; gap: 2rem; padding-bottom: 2.5rem; position: relative; }
.tl__item::before {
  content: ""; position: absolute; left: 7.5rem; top: .6rem; bottom: 0;
  border-left: 2px solid var(--line); margin-left: -1rem;
}
.tl__item:last-child::before { display: none; }
.tl__item::after {
  content: ""; position: absolute; left: 7.5rem; top: .45rem; width: .72rem; height: .72rem;
  margin-left: -1.31rem; border-radius: 50%; background: var(--green);
}
.tl__year { font-family: var(--serif); font-size: 1.35rem; color: var(--green); font-weight: 600; }
.tl__body p { margin-bottom: 0; }

/* ---------------------------------------------------------------- digital */
.dps { display: flex; flex-direction: column; gap: 1.5rem; }
.dp {
  border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--white); box-shadow: var(--shadow);
  display: grid; grid-template-columns: 1fr 340px; gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  transition: box-shadow .26s var(--ease), transform .26s var(--ease);
}
.dp:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.dp__head { display: flex; gap: 1.3rem; align-items: center; margin-bottom: 1.2rem; }
.dp__head h3 { margin: 0; font-size: 1.5rem; }
.dp__logo { width: 72px; height: 72px; border-radius: 16px; object-fit: contain; background: var(--cream); padding: .4rem; flex: none; }
.dp__claim { margin: .2rem 0 0; color: var(--green-light); font-weight: 600; font-size: .95rem; }
.dp__shot {
  height: 260px; border-radius: var(--radius); overflow: hidden;
  display: grid; place-items: center;
}
.dp__shot img { width: 100%; height: 100%; object-fit: cover; }
.dp__shot--icon { background: var(--cream); border: 1px solid var(--line); }
/* Absolute size, not a percentage: as a centred grid item the img resolved
   100% against the padding box and rendered 202px inside a 200px panel, so the
   icon came out clipped flat along the bottom edge. */
.dp__shot--icon img { width: 160px; height: 160px; object-fit: contain; border-radius: 22px; }
.dp p { max-width: 72ch; }
.dp .actions { margin-bottom: 0; }

/* ---------------------------------------------------------------- subnav */
.subnav { display: flex; flex-wrap: wrap; gap: .6rem; }
.subnav a {
  text-decoration: none; background: var(--white); border: 1px solid var(--line);
  padding: .55rem 1.1rem; border-radius: 999px; font-size: .9rem; color: var(--body);
}
.subnav a:hover { border-color: var(--green); color: var(--green); }
.subnav a.active { background: var(--green); border-color: var(--green); color: var(--white); }

/* ---------------------------------------------------------------- contact */
.contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.contact__card { background: var(--cream); border-radius: var(--radius); padding: 2rem; }
.contact__card p { margin-bottom: .4rem; font-size: .96rem; }

/* ---------------------------------------------------------------- cta */
.cta { background: var(--green); color: rgba(255,255,255,.88); padding: clamp(3rem, 6vw, 4.5rem) 0; }
.cta h2 { color: var(--white); margin-bottom: .35rem; }
.cta p { margin: 0; }
.cta__inner { display: flex; gap: 2rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--ink); color: rgba(255,255,255,.62); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; font-size: .92rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 2rem; }
.footer h4 { color: var(--white); font-family: var(--sans); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; }
.footer a { display: block; color: rgba(255,255,255,.62); text-decoration: none; margin-bottom: .45rem; }
.footer a:hover { color: var(--white); }
.footer__logo { width: 120px; background: var(--white); border-radius: 10px; padding: .7rem; box-sizing: border-box; }
.footer__claim { margin-top: 1rem; font-family: var(--serif); font-style: italic; color: rgba(255,255,255,.75); }
.footer__group {
  font-size: .82rem; line-height: 1.6; color: rgba(255,255,255,.5);
  border-top: 1px solid rgba(255,255,255,.14); padding-top: .9rem; margin-top: .2rem;
}
.footer__legal {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .84rem;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 960px) {
  .split__grid, .feature__grid, .pillars, .cards--4, .contact { grid-template-columns: 1fr 1fr; }
  .item { grid-template-columns: 1fr; }
  .item--flip .item__media { order: 0; }
  .dp { grid-template-columns: 1fr; }
  .dp__shot { order: -1; height: 200px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  /* The text fills the full width on a phone, so the gradient's light end no
     longer falls on empty photo — it falls behind the copy and the buttons. */
  .hero::before { background: linear-gradient(180deg, rgba(14,46,33,.92), rgba(14,46,33,.82)); }
  .navburger {
    display: block; width: 28px; height: 20px; position: relative; cursor: pointer;
  }
  .navburger span, .navburger::before, .navburger::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--ink);
    transition: transform .2s, opacity .2s;
  }
  .navburger::before { top: 0; }
  .navburger span { top: 9px; }
  .navburger::after { bottom: 0; }
  .navtoggle:checked ~ .navburger::before { transform: translateY(9px) rotate(45deg); }
  .navtoggle:checked ~ .navburger span { opacity: 0; }
  .navtoggle:checked ~ .navburger::after { transform: translateY(-9px) rotate(-45deg); }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    gap: 0; background: var(--white); border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1.25rem;
  }
  .navtoggle:checked ~ .nav { display: flex; }
  /* The burger follows the nav in source order, so it would land right of the
     heart without this. */
  .navburger { order: 2; }
  .header__heart { width: 30px; height: 31px; }
  .header__inner { min-height: 76px; gap: 1rem; }
  .brand img { height: 54px; }
  .nav a { padding: .75rem 0; border-bottom: 1px solid var(--line); }
  .nav a.active { border-bottom-color: var(--line); }
  .split__grid, .pillars, .cards--4, .cards--2, .contact, .footer__grid { grid-template-columns: 1fr; }
  .feature__grid { grid-template-columns: 1fr; }
  .tl__item { grid-template-columns: 1fr; gap: .25rem; }
  .tl__item::before, .tl__item::after { display: none; }
  .dp__head { flex-direction: column; align-items: flex-start; gap: .9rem; }
}