/* A calmer clinic visual system layered after the existing site stylesheet. */
:root {
  --clinic-ink: #142c3b;
  --clinic-muted: #4d6573;
  --clinic-accent: #0b7580;
  --clinic-page: #f5f8f9;
  --clinic-surface: #fff;
  --clinic-soft: #ebf3f5;
  --clinic-line: #d9e4e8;
}

body { background: var(--clinic-page); color: var(--clinic-ink); }
.bg-ivory { background-color: var(--clinic-page); }
.bg-paper, .bg-white { background-color: var(--clinic-surface); }
.bg-sand, .bg-blush { background-color: var(--clinic-soft); }
.border-line { border-color: var(--clinic-line); }
.text-muted, .lede { color: var(--clinic-muted); }
.text-gold, .accent { color: var(--clinic-accent); }

.display {
  font-family: 'Manrope', system-ui, sans-serif;
  font-style: normal;
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1.16;
}
.display .accent { font-style: normal; font-weight: inherit; }
h1.display { font-size: clamp(2.35rem, 4.5vw, 4rem); }
h2.display { font-size: clamp(2rem, 3.3vw, 2.85rem); }
.lede { font-size: 1rem; font-weight: 400; line-height: 1.75; }
.eyebrow { letter-spacing: .16em; font-weight: 700; }

header#nav {
  background: rgba(255,255,255,.97);
  border-bottom-color: var(--clinic-line);
  box-shadow: 0 1px 0 rgba(20,44,59,.03);
}
header#nav .navlink { font-weight: 600; }
header#nav a.lang, header#nav .lang { font-weight: 700; }

main#top > section:first-child > .max-w-6xl {
  padding-top: clamp(3.25rem, 6vw, 5rem);
  padding-bottom: clamp(4rem, 7vw, 6rem);
}
main section[class~="py-24"] {
  padding-top: clamp(4.25rem, 7vw, 6rem);
  padding-bottom: clamp(4.25rem, 7vw, 6rem);
}
main .shadow-soft, main .shadow-lift {
  box-shadow: 0 14px 38px rgba(20,44,59,.08);
}
main .frame::after { box-shadow: inset 0 0 0 1px rgba(20,44,59,.09); }
main a.rounded-full, main button.rounded-full, header#nav a.rounded-full {
  border-radius: .9rem;
}

/* The original entrance blur delayed readable text on real screens. */
body .reveal, body .reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}
body .lift:hover { transform: none; }

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--clinic-accent);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  header#nav > div { min-height: 68px; height: auto; padding-top: .7rem; padding-bottom: .7rem; }
  header#nav a[href*="#beratung"] { padding: .7rem .9rem; font-size: .8rem; }
  main#top > section:first-child > .max-w-6xl { padding-top: 2.75rem; }
  .display { letter-spacing: -.035em; }
}

/* Grid items must fit the viewport; body overflow hiding cannot prove that. */
main#top > section:first-child > .grid > * { min-width: 0; }
main#top > section:first-child > .grid > div:first-child > .inline-flex {
  max-width: 100%;
  flex-wrap: wrap;
  row-gap: .25rem;
}
main#top > section:first-child > .grid > div:first-child > .flex { flex-wrap: wrap; }
main#top > section:first-child h1,
main#top > section:first-child .lede,
main#top > section:first-child .grid > * { overflow-wrap: break-word; }

/* The three new article templates postdate the compiled utility stylesheet. */
main > article > [class~="max-w-[760px]"] { max-width: 760px; }
main > article h1.display { font-size: clamp(2.05rem, 4vw, 3rem); }
main .bg-navy .lede, main .bg-navy2 .lede { color: #cbdbe2; }
main .bg-navy .accent, main .bg-navy2 .accent,
main .bg-navy .eyebrow, main .bg-navy2 .eyebrow { color: #82ced0; }

header#nav > div:first-child { gap: 1.25rem; }
header#nav > div:first-child > a { flex-shrink: 0; }
header#nav > div:first-child > div { margin-left: auto; flex-shrink: 0; }
header#nav .group:focus-within > div { display: block; }
header#nav #mob-panel {
  max-height: calc(100vh - 7.5rem);
  max-height: calc(100dvh - 7.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 1279px) {
  header#nav > div:first-child > nav { display: none; }
  header#nav > div:first-child > a > span { display: none; }
  header#nav #mob-btn { display: flex; }
  header#nav #mob-panel:not(.hidden) { display: block; }
}
@media (max-width: 480px) {
  header#nav > div:first-child { gap: .5rem; padding-inline: 1rem; }
  header#nav > div:first-child > a img { height: 28px; }
  header#nav a[href*="#beratung"] { padding: .65rem .7rem; font-size: .75rem; }
}

/* Keep consultation actions inside narrow cards, including the final step. */
@media (max-width: 480px) {
  #lead > .flex { flex-wrap: wrap; gap: 1rem; }
  #lead > .flex > .flex { width: 100%; flex-wrap: wrap; }
  #lead > .flex > .flex > a,
  #lead > .flex > .flex > button {
    flex: 1 1 10rem;
    max-width: 100%;
    justify-content: center;
  }
  #lead #back.invisible { display: none; }
}