/* Berufsratgeber: Ergänzungen zu Variante A. Gleiche Schrift-Skala (Variablen aus stil-variante-a.css), gleiche Farben.
   Regeln aus dem Entscheid ~19:05: alle Knöpfe und Pillen halbrund (999px), Menü mittig. */

/* Halbrunde Knöpfe und Pillen überall */
.knopf,.kopf__login,.kopf__menue,.kopf__punkt,.vdialog__zu,.rg-fakten li,.rg-pille{border-radius:999px}
@media (max-width:700px){.kopf__tel,.kopf__login,.kopf__menue{border-radius:999px}}

/* Kopf: Logo links, Menü mittig, Telefon und Login rechts */
.kopf__innen{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:16px;align-items:center}
.kopf__logo{justify-self:start}
.kopf__nav{margin:0}
.kopf__rechts{justify-self:end}
@media (max-width:1180px){.kopf__innen{grid-template-columns:auto 1fr}}

/* Sprungziele nicht unter dem klebenden Kopf verstecken */
[id]{scroll-margin-top:96px}
@media (max-width:700px){[id]{scroll-margin-top:80px}}

/* Seitenkopf des Ratgebers: Pfad, dann direkt die H1 (keine Etikettenzeile, feste Regel Inhaber 25.10. ~20:10) */
.rg-kopf{background:var(--grau);border-bottom:1px solid var(--linie);padding:36px 0 44px}
.rg-kopf__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.rg-kopf h1{margin-bottom:16px}
.rg-kopf .lead{max-width:560px}
.rg-fakten{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.rg-fakten li{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;background:#fff;border:1px solid var(--linie);font-size:var(--klein);color:var(--text)}
.rg-fakten .sym{color:var(--akzent)}
.rg-held{margin:0}
.rg-held img{width:100%;height:auto;aspect-ratio:1310/780;object-fit:cover;border-radius:var(--radius);border:1px solid var(--linie)}

/* Inhalt mit Seitenleiste */
.rg-haupt{padding:56px 0 var(--abstand)}
.rg-raster{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"inhalt leiste";column-gap:64px;align-items:start}
.rg-inhalt{grid-area:inhalt;max-width:720px;min-width:0}
.rg-leiste{grid-area:leiste;position:sticky;top:100px;display:grid;gap:16px}

/* Steckbrief */
.steckbrief{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:20px 22px 8px;box-shadow:var(--schatten)}
.steckbrief__titel{font-size:var(--klein);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text2);margin-bottom:6px}
.steckbrief dl{margin:0}
.steckbrief div{padding:11px 0;border-top:1px solid var(--linie)}
.steckbrief div:first-child{border-top:0}
.steckbrief dt{font-size:var(--klein);line-height:18px;color:var(--text3)}
.steckbrief dd{margin:2px 0 0;font-size:var(--klein);line-height:22px;font-weight:500;color:var(--tinte)}

/* Inhaltsverzeichnis */
.toc{background:var(--grau2);border:1px solid var(--linie);border-radius:var(--radius);padding:18px 22px}
.toc__titel{font-size:var(--klein);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text2);margin-bottom:8px}
.toc ol{counter-reset:toc;display:grid;gap:2px}
.toc li{counter-increment:toc}
.toc a{display:flex;gap:10px;padding:5px 0;font-size:var(--klein);line-height:21px;color:var(--text);text-decoration:none}
.toc a::before{content:counter(toc);flex:none;width:18px;color:var(--text3);font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--akzent-text)}

/* Textabschnitte */
.rg-abschnitt{padding-top:44px;margin-top:44px;border-top:1px solid var(--linie)}
.rg-abschnitt:first-child{padding-top:0;margin-top:0;border-top:0}
.rg-abschnitt h2{margin-bottom:14px}
.rg-abschnitt h3{margin:28px 0 8px}
.rg-abschnitt p{margin:0 0 14px}
.rg-abschnitt .rg-einl{font-size:var(--h3);line-height:var(--lead-z);color:var(--text2);margin-bottom:18px}
.rg-abschnitt a{color:var(--tinte);text-decoration:underline;text-decoration-color:var(--linie2);text-underline-offset:3px}
.rg-abschnitt a:hover{text-decoration-color:var(--akzent)}
.rg-liste{display:grid;gap:10px;margin:4px 0 18px}
.rg-liste li{position:relative;padding-left:22px}
.rg-liste li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--akzent)}
.rg-liste strong{font-weight:500;color:var(--tinte)}
.rg-bild{margin:24px 0 26px}
.rg-bild img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--linie)}
.rg-bild figcaption{margin-top:8px;font-size:var(--klein);line-height:20px;color:var(--text3)}

/* Tabelle Berufsfachschulen: Bildschirm als Tabelle, Handy als Liste */
.rg-tabelle{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:var(--klein);line-height:22px}
.rg-tabelle th,.rg-tabelle td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--linie)}
.rg-tabelle thead th{font-size:var(--klein);font-weight:500;color:var(--text2);background:var(--grau2);border-bottom:1px solid var(--linie2)}
.rg-tabelle tbody th{font-weight:500;color:var(--tinte);width:38%}
.rg-tabelle small{display:block;font-size:var(--klein);color:var(--text3);font-weight:400}
.rg-gebiete{display:grid;gap:4px}
.rg-gebiete li{padding-left:0}

/* Hinweis auf iPersonal: dezent, eine Zeile Text und zwei Textlinks */
.rg-marke{margin:24px 0 4px;padding-top:18px;border-top:1px solid var(--linie)}
.rg-marke p{margin:0 0 8px;color:var(--text)}
.rg-marke p strong{font-weight:500;color:var(--tinte)}
.rg-marke ul{display:flex;flex-wrap:wrap;gap:6px 22px}
.rg-marke a.pfeillink{text-decoration:none;font-size:var(--klein)}

/* FAQ volle Breite, Antworten mit lesbarer Zeilenlänge */
.rg-faq .faq{max-width:none;grid-template-columns:1fr 1fr;align-items:start}
.rg-faq .faq details p{max-width:72ch}

/* Verwandte Berufe */
.verwandt{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--luecke)}
.verwandt__karte{display:flex;flex-direction:column;gap:6px;padding:22px 24px;background:#fff;border:1px solid var(--linie);border-radius:var(--radius);text-decoration:none;transition:border-color .15s}
a.verwandt__karte:hover{border-color:var(--linie2)}
.verwandt__name{font-size:var(--h3);line-height:var(--h3-z);font-weight:500;color:var(--tinte)}
.verwandt__kurz{font-size:var(--klein);line-height:22px;color:var(--text2)}
.verwandt__dauer{margin-top:auto;padding-top:8px;font-size:var(--klein);color:var(--text3)}
.rg-alle{margin-top:24px}

/* Quellen */
.quellen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 40px}
.quellen__gruppe{break-inside:avoid;margin-bottom:18px}
.quellen__titel{font-size:var(--klein);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text2);margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--linie)}
.quellen li{padding:6px 0;font-size:var(--klein);line-height:22px}
.quellen a{color:var(--tinte);text-decoration:none;font-weight:500}
.quellen a:hover{color:var(--akzent-text);text-decoration:underline}
.quellen span{display:block;font-size:var(--klein);color:var(--text3)}

@media (max-width:1180px){
  .rg-raster{grid-template-columns:minmax(0,1fr) 280px;column-gap:40px}
}
@media (max-width:960px){
  .rg-kopf__raster{grid-template-columns:1fr;gap:28px}
  .rg-raster{grid-template-columns:1fr;grid-template-areas:"leiste" "inhalt"}
  .rg-leiste{position:static;margin-bottom:36px}
  .rg-leiste .toc{order:-1}
  .rg-inhalt{max-width:none}
  .verwandt{grid-template-columns:1fr 1fr}
  .rg-faq .faq{grid-template-columns:1fr}
}
@media (max-width:700px){
  .rg-kopf{padding:24px 0 28px}
  .rg-haupt{padding-top:28px}
  .rg-fakten li{height:32px;padding:0 12px;font-size:var(--klein)}
  .rg-abschnitt{padding-top:32px;margin-top:32px}
  .rg-abschnitt h3{margin-top:22px}
  .steckbrief{padding:14px 18px 4px}
  .steckbrief div{display:grid;grid-template-columns:42% 1fr;gap:12px;padding:9px 0}
  .steckbrief dd{margin:0;font-size:var(--klein);line-height:20px}
  .steckbrief dt{line-height:20px}
  .quellen li{padding:5px 0}
  .toc{padding:16px 18px}
  .verwandt,.quellen{grid-template-columns:1fr}
  .rg-tabelle thead{display:none}
  .rg-tabelle,.rg-tabelle tbody,.rg-tabelle tr,.rg-tabelle th,.rg-tabelle td{display:block;width:auto}
  .rg-tabelle tr{padding:12px 0;border-bottom:1px solid var(--linie)}
  .rg-tabelle th,.rg-tabelle td{padding:0;border:0}
  .rg-tabelle tbody th{width:auto;margin-bottom:4px}
}

/* Pfad im Ratgeber ohne die aktuelle Seite (die H1 nennt sie schon) */
.rg-kopf .pfad li:last-child{display:none}
.rg-kopf .pfad li:nth-last-child(2)::after{display:none}
.rg-lead2{margin-top:12px;font-size:var(--fliess);line-height:var(--fliess-z)}
.rg-kopf__raster--ohne-bild{grid-template-columns:minmax(0,760px)}

/* MediPersonal (Runde 5): Blau und Grün aus dem Logo (gemeinsam/bilder/logo-medipersonal.png: #009FE3, #2FAC66) für Punkte und Häkchen.
   Text und Links bleiben im dunkleren Blau aus Variante A, damit der Kontrast reicht. Nie Rot. */
.marke-medipersonal{--logo-blau:#009FE3;--logo-gruen:#2FAC66}
.marke-medipersonal .rg-liste li::before{background:var(--logo-gruen)}
.marke-medipersonal .rg-fakten .sym{color:var(--logo-gruen)}

/* Runde W2w (Punkt 29): Seite teilen, ruhiger Block am Ende des Artikels */
.rg-teilen{display:grid;gap:14px;margin-top:40px;padding:22px 24px;background:var(--grau2,#FAFAFA);border:1px solid var(--linie);border-radius:var(--radius)}
.rg-teilen__titel{font-size:var(--fliess);line-height:24px;font-weight:500;color:var(--tinte)}
.rg-teilen__einl{margin-top:2px;font-size:var(--klein);line-height:22px;color:var(--text2)}
.rg-teilen__knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.rg-teilen .knopf{min-height:40px;padding:0 16px;font-size:var(--klein);border-radius:999px}
.rg-teilen__wa .sym{color:#1F8F4E}
.rg-teilen [hidden]{display:none!important}
@media (max-width:700px){ .rg-teilen{padding:16px} .rg-teilen .knopf{flex:1 1 calc(50% - 8px)} }