/* Zahnarztpraxis Dr. Arndt — concept dental site (kit variant "practice", split hero).
   Type: Schibsted Grotesk (display, 600, tight) + Hanken Grotesk. Colour 60-30-10: clean white / navy ink / clear blue (actions). */

@font-face { font-family: "Schibsted Grotesk"; src: url("media/schibsted.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --bg: #f6f7f5;
  --bg-rgb: 246, 247, 245;
  --band: #e7ecf3;
  --ink: #0f1d2c;
  --muted: #4c5a68;
  --line: rgba(15, 29, 44, .13);
  --accent: #2448c2;
  --accent-hi: #1b3a9f;
  --on-accent: #ffffff;
  --live: #2f9e6e;
  --live-halo: rgba(47, 158, 110, .22);
  --warn: #b3412e;
  --hero-text: #ffffff;
  --hero-bg: #1c2a38;
  --scrim: 12, 22, 34;
  --bar-solid: rgba(246, 247, 245, .92);
  --paper: #fbfcfd;
  --paper-ink: #0f1d2c;
  --paper-field: #ffffff;
  --paper-line: #d3d9e2;
  --ink-soft: #46535f;
  --ink-faint: #56636f;
  --ink-off: #9aa3ad;
  --radius: 8px;
}

em { font-style: normal; color: var(--accent); }
.h2, .h3, .hero-h, .sheet-h, .done-h, .foot-h, .logo { font-weight: 600; letter-spacing: -.035em; }
.h2 { line-height: 1; }
.logo { font-size: var(--t-md); }
.logo span { font-weight: 400; opacity: .7; }

/* hero: full-bleed video on phones, split (words left, framed video right) on desktop */
.hero { --dim: .12; }
.hero-h { font-size: clamp(var(--t-2xl), 10vw, var(--t-4xl)); line-height: .98; }
.hero-h em { color: #b9c9ff; }
.hero .today { margin-bottom: 24px; }
.hero .today::before { background: #6fe0aa; box-shadow: 0 0 0 4px rgba(111, 224, 170, .25); }
.hero .btn-main { background: #ffffff; color: var(--ink); }
@media (min-width: 960px) {
  .bar { --hero-text: var(--ink); }
  .hero {
    --hero-text: var(--ink);
    background: var(--bg);
    align-items: center;
    padding-top: 96px; padding-bottom: 48px;
  }
  .hero-video {
    left: 50%; top: 96px;
    width: calc(50% - var(--gutter)); height: calc(100% - 128px); border-radius: 12px;
    object-position: 70% 35%;
  }
  .hero-shade { display: none; }
  .hero-in { max-width: calc(50% - 64px); }
  .hero-h em { color: var(--accent); }
  .hero .today::before { background: var(--live); box-shadow: 0 0 0 4px var(--live-halo); }
  .hero .btn-main { background: var(--accent); color: var(--on-accent); }
  .hero .btn-ghost { color: var(--ink); }
  .hero-lead { color: var(--muted); }
}
@media (min-width: 960px) and (hover: hover) {
  .hero .btn-main:hover { background: var(--accent-hi); }
  .hero .btn-ghost:hover { background: var(--band); }
}

/* pain strip */
.pain { background: var(--ink); color: #ffffff; }
.pain-in { display: grid; gap: 16px; align-items: center; padding-top: 24px; padding-bottom: 24px; }
.pain p { margin: 0; max-width: 60ch; }
.pain strong { font-weight: 600; }
.pain .btn-main { justify-self: start; background: #ffffff; color: var(--ink); }
@media (min-width: 760px) { .pain-in { grid-template-columns: 1fr auto; gap: 32px; } }

/* first visit */
.first-head { max-width: 760px; }
.first-grid { display: grid; gap: 48px; margin-top: 64px; align-items: start; }
.first-media video { aspect-ratio: 4 / 3; }
@media (min-width: 960px) { .first-grid { grid-template-columns: 6fr 5fr; gap: 80px; } }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 28px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.step-n {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--band); color: var(--accent); font: 600 var(--t-base)/1 var(--display);
}
.steps p { margin: 8px 0 0; color: var(--muted); font-size: var(--t-md); line-height: 1.45; }

/* calm statement */
.calm { background: var(--band); }
.calm-in { padding-top: var(--section); padding-bottom: var(--section); }
.calm-big { margin: 0; max-width: 18ch; font: 600 clamp(var(--t-2xl), 6.4vw, var(--t-5xl))/.98 var(--display); letter-spacing: -.04em; text-wrap: balance; }
.calm-small { margin: 32px 0 0; max-width: 46ch; color: var(--muted); }

/* services */
.services { display: grid; gap: 64px; align-items: center; }
.services-media video { aspect-ratio: 4 / 5; }
@media (min-width: 960px) {
  .services { grid-template-columns: 7fr 5fr; gap: 96px; }
  .services-media { max-width: 520px; justify-self: end; width: 100%; }
}
.svc { list-style: none; margin: 48px 0 0; padding: 0; }
.svc li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.svc li:last-child { border-bottom: 1px solid var(--line); }
.svc-t { display: block; font: 600 var(--t-md)/1.25 var(--display); letter-spacing: -.02em; }
.svc-d { display: block; margin-top: 4px; color: var(--muted); }
.svc-b {
  flex: 0 0 auto; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px; background: none; cursor: pointer;
  color: var(--accent); font-weight: 500;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
@media (hover: hover) { .svc-b:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } }

/* hours band */
.hours-band { padding: var(--section) 0; border-top: 1px solid var(--line); }
.hours-in { display: grid; gap: 64px; }
.today-band { margin: 24px 0 0; }
.hours-band .lead { margin: 16px 0 32px; max-width: 36ch; }
.after { margin: 32px 0 0; max-width: 44ch; }
@media (min-width: 960px) { .hours-in { grid-template-columns: 1fr 1fr; gap: 96px; align-items: end; } }

.chips-list .chip > span { align-items: center; }