/* Page structure from the approved mockup B2 «Grille 49»:
 * compliance strip · floating centred-split header · sections · dark angled band · footer · mobile tab bar.
 */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ── compliance strip ─────────────────────────────────────────────────── */
.strip { font-size: .8rem; color: var(--color-muted); }
.strip__in { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 38px; text-align: center; }
.age-badge {
  display: inline-grid; place-items: center; height: 22px; padding: 0 .45rem; flex: none;
  border-radius: var(--radius-pill); background: var(--color-text); color: #fff;
  font: 700 .7rem/1 var(--font-body);
}

/* ── floating centred-split header (mockup .hdr) ──────────────────────── */
.site-header { position: sticky; top: 10px; z-index: var(--z-header); padding: 0 clamp(8px, 2vw, 24px); }
.site-header__in {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  height: var(--header-h); padding: 0 10px 0 18px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-surface) 80%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-2);
}
.site-header ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; align-items: center; }
.site-header__right ul { justify-content: flex-end; }
.nav-link {
  display: inline-flex; align-items: center; gap: .4rem; height: 40px; padding: 0 .85rem;
  border-radius: var(--radius-pill); text-decoration: none;
  font: 500 .92rem/1 var(--font-body); color: var(--color-text-2); white-space: nowrap;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.nav-link:hover { background: var(--color-surface-2); color: var(--color-text); }
.nav-link[aria-current="page"] { background: var(--color-brand-soft); color: var(--color-brand); }
.nav-link .icon { width: 1.05em; height: 1.05em; }

.logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--color-text); font: 800 1.35rem/1 var(--font-display); font-stretch: 118%; letter-spacing: -.03em; }
.logo__mark { width: 30px; height: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; flex: none; }
.logo__mark i { border-radius: 4px; background: var(--color-text); }
.logo__mark i:nth-child(1) { border-radius: 50%; background: var(--color-brand); }
.logo__mark i:nth-child(4) { background: var(--color-sun); }

.lang { display: flex; padding: 3px; border-radius: var(--radius-pill); background: var(--color-surface-2); }
.lang a {
  min-width: 34px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-pill);
  text-decoration: none; font: 600 .72rem/1 var(--font-mono); color: var(--color-muted);
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.lang a:hover { color: var(--color-text); }
.lang a[aria-current="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-1); }

.site-header .burger { display: none; }

/* ── sections ─────────────────────────────────────────────────────────── */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section__head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.section__head h2, .h2 { font: 800 var(--fs-h2)/1 var(--font-display); font-stretch: 112%; letter-spacing: -.04em; margin: .7rem 0 0; }
.section__head p { margin: 0; max-width: 44ch; color: var(--color-text-2); }

/* dark band with angled cuts (signature 1) */
.band-ink {
  position: relative; isolation: isolate;
  background: var(--color-ink-bg); color: var(--color-on-ink);
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  margin-block: calc(var(--cut) * -1); padding-block: calc(var(--cut) + 72px);
}
.band-ink::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(36rem 20rem at 10% 20%, oklch(50% .2 268 / .35), transparent 70%),
              radial-gradient(30rem 20rem at 95% 90%, oklch(86% .16 88 / .12), transparent 70%);
}
.band-ink .eyebrow { color: var(--color-sun); }
.band-ink .section__head p { color: var(--color-on-ink-muted); }
.band-ink--end { margin-bottom: 0; clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); }

/* page head of inner pages: compact diagonal hero */
.page-head { --plane: polygon(68% 0, 100% 0, 100% 100%, 52% 100%); position: relative; isolation: isolate; padding: calc(var(--header-h) + clamp(40px, 5vw, 72px)) 0 calc(var(--cut) + 40px); margin-top: calc((var(--header-h) + 10px) * -1); overflow: hidden; }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--grad-hero); clip-path: var(--plane); }
.page-head::after {
  content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--plane);
  background-image: linear-gradient(oklch(100% 0 0 / .07) 1px, transparent 1px), linear-gradient(90deg, oklch(100% 0 0 / .07) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask: linear-gradient(180deg, #000, transparent 85%); mask: linear-gradient(180deg, #000, transparent 85%);
}
.page-head__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.page-head h1 { font: 800 clamp(2.4rem, 4.8vw, 4.2rem)/.98 var(--font-display); font-stretch: 115%; letter-spacing: var(--track-display); margin: 1rem 0 1rem; }
.page-head .lead { max-width: 48ch; }
.page-head__aside { justify-self: end; width: 100%; max-width: 440px; }
.page-head--plain { --plane: polygon(82% 0, 100% 0, 100% 100%, 74% 100%); }
/* photo inside the diagonal plane: photo below, cobalt multiplied over it, grid on top */
.page-head.has-photo { --plane: polygon(60% 0, 100% 0, 100% 100%, 46% 100%); }
.has-photo::before { mix-blend-mode: multiply; opacity: .92; }
.plane-photo { position: absolute; inset: 0; z-index: -3; clip-path: var(--plane); overflow: hidden; }
.plane-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 70% 50%); filter: grayscale(.35) contrast(1.08); }
.plane-photo--right img { object-position: var(--focus, 100% 50%); }

/* breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); color: var(--color-muted); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--color-border-strong); }
.crumbs a { color: var(--color-text-2); text-decoration: none; position: relative; }
.crumbs a:hover { color: var(--color-brand); }

/* ── footer ───────────────────────────────────────────────────────────── */
.site-footer { position: relative; background: var(--color-ink-bg); color: var(--color-on-ink-muted); padding: calc(var(--cut) + 56px) 0 calc(40px + env(safe-area-inset-bottom)); margin-top: calc(var(--cut) * -1); clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); font-size: var(--fs-small); }
.site-footer a { color: var(--color-on-ink); text-decoration: none; }
.site-footer a:hover { color: var(--color-sun); }
.site-footer__top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid oklch(100% 0 0 / .1); }
.site-footer .logo { color: var(--color-on-ink); }
.site-footer .logo__mark i { background: var(--color-on-ink); }
.site-footer .logo__mark i:nth-child(1) { background: var(--color-brand-light); }
.site-footer .logo__mark i:nth-child(4) { background: var(--color-sun); }
.site-footer__brand { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; gap: 1rem 2rem; flex-wrap: wrap; }
.site-footer__brand p { margin: 0; max-width: 46ch; }
.site-footer__title { font: 600 .75rem/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--color-sun); margin: 0 0 1rem; }
.site-footer__list { display: grid; gap: .55rem; margin: 0; padding: 0; }
.site-footer__list a { position: relative; }
.helpline-band { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 1.5rem; align-items: center; padding: 1.25rem 1.4rem; margin: 2rem 0; border-radius: var(--radius-md); background: oklch(100% 0 0 / .05); border: 1px solid oklch(100% 0 0 / .1); }
.helpline-band .icon { width: 28px; height: 28px; color: var(--color-sun); }
.helpline-band b { display: block; color: var(--color-on-ink); font-size: 1rem; }
.helpline-band a.tel { font: 600 1.15rem/1 var(--font-mono); color: var(--color-on-ink); white-space: nowrap; }
.site-footer__data { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem 2rem; padding: 1.5rem 0; border-top: 1px solid oklch(100% 0 0 / .1); }
.site-footer__data p { margin: 0; max-width: 70ch; }
.pay { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.pay li { height: 34px; padding: 0 .55rem; display: grid; place-items: center; border-radius: 8px; background: #fff; }
.pay img { height: 18px; width: auto; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; border-top: 1px solid oklch(100% 0 0 / .1); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; }

/* ── mobile tab bar (mockup .tabbar) ──────────────────────────────────── */
.tabbar { display: none; }

/* ── back to top ──────────────────────────────────────────────────────── */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: var(--z-header);
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-2); cursor: pointer;
  display: grid; place-items: center; transition: transform var(--dur-base) var(--ease-spring);
}
.to-top:hover { transform: translateY(-3px); }
.to-top .icon { width: 20px; height: 20px; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .site-header__left .nav-link { padding: 0 .6rem; }
  .page-head__grid { grid-template-columns: 1fr; }
  .page-head__aside { justify-self: start; }
  /* the diagonal becomes a strip under the text, never behind it */
  .page-head { padding-bottom: calc(var(--cut) + 72px); }
  .page-head, .page-head--plain, .page-head.has-photo { --plane: polygon(0 calc(100% - 28px), 100% calc(100% - 96px), 100% 100%, 0 100%); }
  .page-head.has-photo { --plane: polygon(0 calc(100% - 40px), 100% calc(100% - 190px), 100% 100%, 0 100%); padding-bottom: calc(var(--cut) + 170px); }
}
@media (max-width: 960px) {
  .site-header__in { grid-template-columns: auto 1fr auto; padding: 0 8px 0 14px; }
  .site-header__left { display: none; }
  .site-header__right .nav-link, .site-header__right .lang, .site-header__right .hide-md { display: none; }
  .site-header .burger { display: inline-flex; width: 44px; padding: 0; }
  .site-header .logo { grid-column: 1; }
  .site-header__right { grid-column: 3; }
}
@media (max-width: 560px) {
  .strip__in { font-size: .72rem; }
  .site-header__right .hide-sm { display: none; }
  .helpline-band { grid-template-columns: auto 1fr; }
  .helpline-band a.tel { grid-column: 1 / -1; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .to-top { bottom: 96px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: var(--z-tabbar);
    padding: 6px; border-radius: 22px;
    background: color-mix(in oklch, var(--color-surface) 85%, transparent);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid var(--color-border); box-shadow: var(--shadow-3);
  }
  .tabbar a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; border-radius: 16px; text-decoration: none; font: 500 .7rem/1.2 var(--font-body); color: var(--color-muted); transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
  .tabbar a .icon { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: var(--color-brand); background: var(--color-brand-soft); }
}
@media (max-width: 389px) {
  .site-header__in { gap: .5rem; }
  .logo { font-size: 1.15rem; }
}
/* header items share one height, so the row reads (and measures) as one line */
.site-header__left li, .site-header__right li { display: flex; align-items: center; height: 44px; }
@media (max-width: 768px) { .pay { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .pay li { min-width: 0; } .pay img { max-width: 100%; object-fit: contain; } }
@media (max-width: 560px) { .site-footer__legal { display: grid; gap: .5rem; } }