/* Eigene Seite pflegegradrechner.html (oeffentlich, Schnelltest). Tokens/Schriften aus basis.css,
   Kopfleiste/Footer/FAQ-Karten aus rechtstexte.css, Schnelltest-Styles (.et-*) aus schnelltest.css. */
.pgr{ padding:36px 0 72px; }
.pgr-wrap{ max-width:820px; margin:0 auto; padding:0 24px; }
@media (max-width:640px){ .pgr{ padding:24px 0 56px; } .pgr-wrap{ padding:0 16px; } }

/* Buttons: gleiche Werte wie auf der Startseite (rohbau.css .btn, mit 12px Rundung und 48px Mindesthoehe) */
.pgr .btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center; text-decoration:none;
  border:none; cursor:pointer; font-family:var(--font-sans); font-weight:600; font-size:1rem; line-height:1.3;
  padding:14px 26px; min-height:48px; border-radius:12px; transition:background .15s;
}
.pgr .btn-primary{ background:var(--teal); color:var(--card-bg); }
.pgr .btn-primary:hover{ background:var(--teal-deep); }
.pgr .btn-ghost{ background:transparent; color:var(--teal-deep); border:1px solid var(--teal-deep); }
.pgr .btn-ghost:hover{ background:var(--teal); color:#fff; border-color:var(--teal); }
.pgr .btn:focus-visible{ outline:3px solid var(--teal-deep); outline-offset:3px; }

/* Kopf */
.pgr-kopf{ padding:12px 0 8px; }
.pgr-kicker{
  display:inline-flex; background:#E6EEE6; color:var(--teal-deep); font-size:13px; font-weight:600;
  padding:5px 12px; border-radius:999px; line-height:1.4; margin-bottom:16px;
}
.pgr h1{ font-size:2.6rem; line-height:1.15; max-width:none; margin:0 0 18px; }
@media (max-width:640px){ .pgr h1{ font-size:1.95rem; } }
.pgr-einleitung{ font-size:1.15rem; color:var(--ink-soft); max-width:60ch; margin:0 0 28px; }

/* Test */
.pgr-test{ scroll-margin-top:16px; }
.pgr-test .et-status{ margin-top:0; }
/* Die Kopfleiste dieser Seite scrollt mit (nicht fest wie die Navigation der Startseite):
   Fortschrittsleiste deshalb ganz oben ankleben, Fragen nur unter der Leiste anspringen */
.pgr-test .et-status{ top:0; }
/* basis.css setzt overflow-x:hidden auf html/body, das schaltet position:sticky der Fortschrittsleiste aus.
   Gleiche Loesung wie rohbau.css auf der Startseite: clip verhindert den Ueberlauf, ohne Scroll-Container. */
html, body{ overflow-x:visible; }
@supports (overflow:clip){ html, body{ overflow-x:clip; } }
.pgr-test .et-frage, .pgr-test .et-akk{ scroll-margin-top:80px; }

/* Abschnitte darunter */
.pgr-abschnitt{ margin-top:56px; }
.pgr h2{ font-size:1.75rem; line-height:1.25; margin:0 0 14px; }
@media (max-width:640px){ .pgr h2{ font-size:1.5rem; } .pgr-abschnitt{ margin-top:44px; } }
.pgr-abschnitt p{ max-width:66ch; }
.pgr-liste{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:12px; }
.pgr-liste li{ position:relative; padding-left:30px; color:var(--ink); }
.pgr-liste li::before{
  content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%;
  background:#E6EEE6; color:var(--teal-deep); font-size:.8rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-top:3px;
}
.pgr-buttons{ display:flex; flex-wrap:wrap; gap:12px 16px; }
@media (max-width:640px){ .pgr-buttons .btn{ width:100%; } }

.pgr-karten{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
@media (max-width:640px){ .pgr-karten{ grid-template-columns:1fr; } }
.pgr-karte{ background:var(--card-bg); border:1px solid var(--line); border-radius:20px; padding:22px 22px 6px; }
.pgr-karte p{ font-size:.97rem; color:var(--ink-soft); max-width:none; }
.pgr-karte strong{ color:var(--ink); font-weight:600; }

.pgr .faq-item summary{ font-family:var(--font-sans); }
.pgr > .pgr-wrap > .et-disclaimer{ margin-top:48px; }