/* DosisPilot Website: Packungsbeilage in der Welt des Wochendosierers (siehe DESIGN.md). */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("app/fonts/atkinson-next.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
}
:root {
  --papier: #f5efe3; --flaeche: #fffaf0; --fach: #e9e0cf; --linie: #cfc4ae;
  --tinte: #22302a; --leise: #55605a; --tanne: #1c4a3b; --auf-tanne: #fffaf0;
  --schatten-fach: inset 0 2px 5px rgb(70 55 25 / .16);
  --tippen: 56px; --rand: clamp(1.25rem, 5vw, 4.5rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #141d1a; --flaeche: #1d2925; --fach: #0f1714; --linie: #3a4a43;
    --tinte: #efe9dc; --leise: #b3b4a8; --tanne: #8fd1b5; --auf-tanne: #10211b;
    --schatten-fach: inset 0 2px 6px rgb(0 0 0 / .45);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 112.5%; scroll-behavior: smooth; scroll-padding-top: 1.5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-variant-numeric: tabular-nums; line-height: 1.55;
}
h1, h2, h3 { line-height: 1.12; text-wrap: balance; margin: 0; }
p, dd { text-wrap: pretty; }
a { color: var(--tanne); text-underline-offset: .18em; }
a:focus-visible { outline: 3px solid var(--tanne); outline-offset: 3px; border-radius: 4px; }
img { display: block; width: 100%; height: auto; }

.sprung { position: absolute; left: -999px; top: .5rem; background: var(--flaeche); padding: .6rem 1rem; }
.sprung:focus { left: .5rem; z-index: 2; }

.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem var(--rand); max-width: 76rem; margin: 0 auto;
}
.marke { font-weight: 800; font-size: 1.15rem; color: var(--tinte); text-decoration: none; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tippen); padding: .5rem 1.6rem; border-radius: 14px;
  background: var(--tanne); color: var(--auf-tanne);
  font-weight: 700; font-size: 1.1rem; text-decoration: none;
}
.knopf:hover { background: color-mix(in srgb, var(--tanne) 88%, var(--tinte)); }
.knopf.klein { font-size: 1rem; padding-inline: 1.1rem; }
@media (max-width: 51.99rem) { .start .kopf .knopf { display: none; } }

.fach { background: var(--fach); box-shadow: var(--schatten-fach); border-radius: 18px; margin: 0; padding: 1rem 1rem .8rem; }
.fach img { border-radius: 10px; }
figcaption { color: var(--leise); font-size: .9rem; margin-top: .7rem; line-height: 1.4; }

.titel {
  display: grid; gap: 2.5rem; max-width: 76rem; margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 4rem) var(--rand) clamp(2.5rem, 6vw, 5rem);
}
h1 { font-size: clamp(2.9rem, 7.6vw, 5.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.02; }
h1 span { display: block; font-size: .46em; font-weight: 500; letter-spacing: 0; line-height: 1.2; margin-bottom: .25em; color: var(--leise); }
.lead { font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.35; margin: 1.4rem 0 0; max-width: 28em; }
.hinweis { margin: 1.1rem 0 0; max-width: 32em; color: var(--leise); }
.aktion { margin: 1.8rem 0 0; }
.klar { margin: .8rem 0 0; font-weight: 700; }
.bild-hoch { width: 100%; max-width: 24rem; }

.blatt { max-width: 76rem; margin: 0 auto; padding: 0 var(--rand); display: grid; gap: 2.5rem; }
.inhalt { border-top: 1px dashed var(--linie); padding-top: 1.5rem; }
.inhalt h2 { font-size: 1rem; font-weight: 700; }
.inhalt ol { margin: .7rem 0 0; padding: 0 0 0 1.5rem; }
.inhalt li { padding: .1rem 0; }
.inhalt li::marker { color: var(--leise); }
.inhalt a { display: inline-block; padding: .3rem 0; color: var(--tinte); text-decoration: none; }
.inhalt a:hover { color: var(--tanne); text-decoration: underline; }

.text { min-width: 0; max-width: 40rem; }
.text section { border-top: 1px dashed var(--linie); padding: 2.6rem 0 2.8rem; }
.text h2 { font-size: clamp(1.75rem, 3.6vw, 2.3rem); font-weight: 800; letter-spacing: -.01em; margin-bottom: 1.1rem; }
.nr { color: var(--tanne); }
.text p { margin: 0 0 1rem; }
.text p:last-child { margin-bottom: 0; }
.kernsatz { font-size: clamp(1.6rem, 3.4vw, 2rem); font-weight: 800; line-height: 1.2; }

.teile, .grenzen { margin: 1.6rem 0 0; }
.teile > div, .grenzen > div { padding: .9rem 0; border-top: 1px solid var(--linie); }
.grenzen { margin-top: 0; }
.grenzen > div:first-child { border-top: 0; padding-top: 0; }
dt { font-weight: 700; }
dd { margin: .15rem 0 0; }
.bild-quer { margin-top: 1.8rem; max-width: 24rem; }

.warnung { list-style: none; margin: 0; padding: 1.25rem 1.35rem; background: var(--fach); box-shadow: var(--schatten-fach); border-radius: 14px; }
.warnung li + li { margin-top: .9rem; }

.schritte { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.schritte li { counter-increment: s; position: relative; padding: 0 0 1.5rem 3.1rem; }
.schritte li:last-child { padding-bottom: 0; }
.schritte li::before {
  content: counter(s); position: absolute; left: 0; top: -.1rem;
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 8px;
  background: var(--flaeche); border: 1px solid var(--linie); border-bottom-width: 3px; font-weight: 700;
}
.schritte h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .25rem; }

.fuss {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  max-width: 76rem; margin: 0 auto; padding: 1.6rem var(--rand) 2.4rem;
  color: var(--leise); font-size: .95rem;
}
.fuss p { margin: 0; }
.fuss a { display: inline-block; padding: .35rem 0; margin-right: 1.2rem; color: inherit; }

.recht { max-width: 40rem; margin: 0 auto; padding: 1.5rem var(--rand) 3rem; box-sizing: content-box; }
.recht h1 { font-size: clamp(2.2rem, 6vw, 3rem); margin-bottom: 1.4rem; }
.recht h2 { font-size: 1.25rem; font-weight: 700; margin: 1.8rem 0 .4rem; }
.recht p { margin: 0 0 1rem; }

@media (min-width: 52rem) {
  .titel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 4rem; }
  .bild-hoch { justify-self: end; }
  .blatt { grid-template-columns: 15rem minmax(0, 1fr); gap: 4.5rem; align-items: start; }
  .inhalt { position: sticky; top: 1.5rem; padding-top: 2.6rem; }
  .inhalt ol { padding-left: 1.4rem; }
}
@media print {
  .knopf, .sprung { display: none; }
}