/* Layout der Ratgeberseiten.
   Eigene Datei statt legal.css: Rechtstexte sind kurze Absatzfolgen, die
   Ratgeberseiten tragen Fristen, Tabellen, Listen und ein Inhaltsverzeichnis.
   Tokens identisch zum Brand Guide; Akzentfarbe kommt je Seite über
   data-strecke auf <body> — teal für die Ärzte-Strecke, blau für Kliniken. */

:root{
  --canvas:#F4F6F9;--surface:#FFFFFF;--surface-2:#EDF1F6;--hairline:#DCE3EC;
  --navy:#0E2A47;--navy-deep:#0A1F36;--ink:#15212E;--slate:#4B5A6B;--slate-2:#6C7B8C;
  --blue:#1C5A9E;--blue-deep:#15436F;--blue-wash:#E7EEF7;
  --teal:#126E6A;--teal-deep:#0C524E;--teal-wash:#E1EEEC;
  --font-display:'Libre Franklin','Helvetica Neue',Arial,sans-serif;
  --font-label:'Archivo','Libre Franklin',sans-serif;
  --font-wordmark:'Archivo','Libre Franklin',sans-serif;
  --gutter:clamp(1.25rem,4vw,4rem);
  --akzent:var(--teal);--akzent-deep:var(--teal-deep);--akzent-wash:var(--teal-wash);
}
body[data-strecke="klinik"]{--akzent:var(--blue);--akzent-deep:var(--blue-deep);--akzent-wash:var(--blue-wash)}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-display);font-size:1.0625rem;line-height:1.65;color:var(--ink);
  background:var(--canvas);min-height:100vh;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:820px;margin:0 auto;padding:0 var(--gutter)}

/* Sprungmarke: nur sichtbar, solange sie den Tastaturfokus hat. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:#fff;
  padding:12px 18px;border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}

/* ── Kopf ──────────────────────────────────────────────────────────────── */
.nav{background:rgba(244,246,249,.92);border-bottom:1px solid var(--hairline);
  position:sticky;top:0;z-index:20;backdrop-filter:saturate(140%) blur(8px)}
.nav .wrap{height:70px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.pm-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.pm-logo .mark{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:20%;background:var(--navy)}
.pm-logo .mark svg{width:24px;height:24px}
.pm-logo .word{font-family:var(--font-wordmark);font-weight:700;font-size:22px;color:var(--navy)}
.pm-logo .word .accent{color:var(--blue)}
.nav-rechts{display:flex;align-items:center;gap:1.25rem}
.lang{display:inline-flex;background:var(--surface-2);border-radius:8px;padding:3px}
.lang a{font-family:var(--font-label);font-size:.75rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--slate);text-decoration:none;padding:5px 10px;border-radius:6px}
.lang a.active{background:var(--surface);color:var(--navy);box-shadow:0 1px 2px rgba(14,42,71,.08)}
.zurueck{font-size:.875rem;color:var(--slate);text-decoration:none;white-space:nowrap}
.zurueck:hover{color:var(--ink)}

/* ── Artikel ───────────────────────────────────────────────────────────── */
main{flex:1;padding:3.5rem 0 5rem}
.kicker{font-family:var(--font-label);font-size:.75rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;color:var(--akzent);margin-bottom:.9rem;display:block}
h1{font-size:clamp(1.9rem,4.4vw,2.6rem);font-weight:800;letter-spacing:-.018em;color:var(--navy);
  line-height:1.15;margin-bottom:1.1rem}
.lead{font-size:1.1875rem;line-height:1.6;color:var(--slate);margin-bottom:2rem}

/* Inhaltsverzeichnis — bei langen Seiten der schnellste Weg zur Antwort */
.toc{background:var(--surface);border:1px solid var(--hairline);border-radius:12px;
  padding:1.25rem 1.5rem;margin-bottom:3rem}
.toc h2{font-family:var(--font-label);font-size:.75rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--slate-2);margin-bottom:.75rem}
.toc ol{list-style:none;counter-reset:toc;display:grid;gap:.4rem}
.toc li{counter-increment:toc;padding-left:1.9rem;position:relative}
.toc li::before{content:counter(toc);position:absolute;left:0;top:.1rem;font-family:var(--font-label);
  font-size:.75rem;font-weight:600;color:var(--akzent);background:var(--akzent-wash);
  width:1.4rem;height:1.4rem;border-radius:50%;display:grid;place-items:center}
.toc a{color:var(--ink);text-decoration:none;font-size:.9375rem}
.toc a:hover{color:var(--akzent-deep);text-decoration:underline}

article section{margin-bottom:3rem;scroll-margin-top:90px}
article h2{font-size:1.4rem;font-weight:700;letter-spacing:-.01em;color:var(--navy);margin-bottom:.85rem}
article h3{font-size:1.0625rem;font-weight:700;color:var(--navy);margin:1.75rem 0 .5rem}
article p{color:var(--slate);margin-bottom:1rem}
article p strong,article li strong{color:var(--ink);font-weight:600}
article a{color:var(--akzent-deep);text-decoration:underline;text-underline-offset:2px}
article ul,article ol{color:var(--slate);margin:0 0 1rem 1.2rem}
article li{margin-bottom:.45rem}
article li::marker{color:var(--akzent)}

/* Fristen und Zuständigkeiten: Struktur über Weißraum und feine Linien, kein Gitter */
.tabelle{width:100%;border-collapse:collapse;margin:0 0 1.25rem;font-size:.9375rem}
.tabelle th{text-align:left;font-family:var(--font-label);font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;color:var(--slate-2);
  padding:0 1rem .5rem 0;border-bottom:1px solid var(--hairline)}
.tabelle td{padding:.7rem 1rem .7rem 0;border-bottom:1px solid var(--hairline);
  color:var(--slate);vertical-align:top}
.tabelle td:first-child{color:var(--ink);font-weight:600;width:38%}
.tabelle tr:last-child td{border-bottom:none}
.tabelle-scroll{overflow-x:auto;margin-bottom:1.25rem}
.tabelle-scroll .tabelle{margin-bottom:0;min-width:420px}

.merke{background:var(--akzent-wash);border-left:3px solid var(--akzent);border-radius:0 8px 8px 0;
  padding:1rem 1.25rem;margin:1.5rem 0}
.merke p{color:var(--akzent-deep);margin-bottom:0}
.merke p+p{margin-top:.6rem}

.karte{background:var(--surface);border:1px solid var(--hairline);border-radius:12px;
  padding:1.25rem 1.5rem;margin:1.5rem 0}
.karte h3{margin-top:0}
.karte p:last-child,.karte ul:last-child{margin-bottom:0}

/* ── Abschluss des Artikels ────────────────────────────────────────────── */
.stand{font-size:.875rem;color:var(--slate-2);border-top:1px solid var(--hairline);
  padding-top:1.25rem;margin-top:3rem}
.stand p{color:var(--slate-2);font-size:.875rem;margin-bottom:.5rem}
.stand p:last-child{margin-bottom:0}

.weiter{margin-top:3rem}
.weiter h2{font-size:1.1rem;font-weight:700;color:var(--navy);margin-bottom:1rem}
.weiter ul{list-style:none;margin:0;display:grid;gap:.5rem}
.weiter a{display:block;background:var(--surface);border:1px solid var(--hairline);border-radius:10px;
  padding:.85rem 1.1rem;text-decoration:none;color:var(--ink);font-weight:600;font-size:.9375rem}
.weiter a:hover{border-color:var(--akzent);color:var(--akzent-deep)}

.cta-band{background:var(--navy);border-radius:14px;padding:2rem;margin-top:3rem;color:#E9EFF7}
.cta-band h2{color:#fff;font-size:1.3rem;font-weight:700;margin-bottom:.6rem}
.cta-band p{color:#9CAEC3;margin-bottom:1.25rem}
.cta-band a{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;
  font-weight:600;font-size:.9375rem;padding:.8rem 1.5rem;border-radius:10px}
.cta-band a:hover{background:#3A78C0}

/* ── Fuß ───────────────────────────────────────────────────────────────── */
footer{background:var(--navy-deep);color:#9CAEC3;font-size:.8125rem}
footer .wrap{padding:1.5rem var(--gutter);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:1rem}
footer .wrap span:last-child{display:flex;gap:1.4rem;flex-wrap:wrap}
footer a{color:#E9EFF7;text-decoration:none}
footer a:hover{text-decoration:underline}

@media (max-width:640px){
  main{padding:2.5rem 0 3.5rem}
  .nav .wrap{height:62px}
  .pm-logo .word{font-size:20px}
  .zurueck{display:none}
  .cta-band{padding:1.5rem}
}