/* Ratgeber-Artikel, Ratgeber-Übersicht und Beispiel-Anschreiben auf den Berufsseiten. Baut auf style.css und beruf.css auf. */

/* Artikel: schmale Lesespalte */
.r-schmal{max-width:760px}
.r-kopf{padding-bottom:28px}
.r-kopf h1{font-size:clamp(32px,4.6vw,48px);line-height:1.12;margin:6px 0 12px}
.r-meta{color:var(--muted);font-size:15px;margin-bottom:28px}

/* „Kurz gesagt“: die zitierfähige Antwort, wie ein Notizzettel auf der Mappe */
.r-kurz{background:#fff;border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:var(--radius);padding:22px 26px}
.r-kurz b{display:block;font-family:var(--sans);font-size:14px;color:var(--accent-d);margin-bottom:6px}
.r-kurz p{font-size:18px;line-height:1.6;color:var(--ink)}
.r-kurz .r-angebot{margin-top:12px;font-size:16px}
.r-kurz a,.r-text a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.18em}

/* Fließtext */
.r-text{padding-bottom:40px}
.r-text section{padding:28px 0 0}
.r-text h2{font-size:clamp(24px,3vw,30px);margin-bottom:14px}
.r-text p,.r-text li{font-size:17.5px;line-height:1.7;color:var(--ink-2)}
.r-text p+p{margin-top:12px}
.r-text ul,.r-text ol{margin:12px 0 0 22px;display:grid;gap:8px}
.r-text b{color:var(--ink)}

/* Tabellen: auf dem Handy waagerecht scrollbar statt gequetscht */
.r-text table{width:100%;border-collapse:collapse;margin:14px 0;font-size:16px;display:block;overflow-x:auto}
.r-text th,.r-text td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--line);min-width:140px}
.r-text thead th{font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--soft)}
.r-text tbody th{color:var(--ink);font-weight:600}

/* Checklisten mit Haken statt Punkten */
.r-text ul.r-check{list-style:none;margin-left:0}
.r-check li{position:relative;padding-left:32px}
.r-check li::before{content:"";position:absolute;left:2px;top:.42em;width:18px;height:18px;border-radius:5px;background:var(--accent-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23A9500F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* Vorlagen und Beispiel-Anschreiben: wie ein Blatt Papier */
.r-vorlage{background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);padding:28px 30px;margin:16px 0;font-family:var(--serif);font-size:16.5px;line-height:1.65;color:var(--ink)}
.r-vorlage p{font-size:inherit;color:inherit}
.r-vorlage p+p{margin-top:12px}

/* Handlungsaufforderung im Artikel */
.r-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--soft);border-radius:var(--radius);padding:24px 26px;margin:36px 0 8px}
.r-cta b{font-family:var(--serif);font-size:21px;color:var(--ink)}
.r-cta p{font-size:15.5px;margin-top:4px;max-width:46ch}

/* Weiterlesen */
.r-verwandt{display:flex;flex-direction:column;gap:8px;margin-top:36px;padding-top:22px;border-top:1px solid var(--line)}
.r-verwandt b{font-family:var(--sans);font-size:14px;color:var(--muted)}
.r-verwandt a{font-weight:600;text-decoration:none;color:var(--ink)}
.r-verwandt a:hover{text-decoration:underline;text-decoration-color:var(--accent)}

/* Glossar */
.r-glossar{display:grid;gap:0;margin-top:26px;border-top:1px solid var(--line)}
.r-glossar div{padding:18px 0;border-bottom:1px solid var(--line);scroll-margin-top:90px}
.r-glossar dt{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink);margin-bottom:4px}
.r-glossar dd{font-size:17px;line-height:1.65;color:var(--ink-2)}
.r-glossar div:target{background:var(--accent-2);margin:0 -14px;padding:18px 14px;border-radius:8px}

/* Übersicht */
.r-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.r-karte{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-decoration:none;color:var(--ink);transition:border-color .2s}
.r-karte:hover,.r-karte:focus-visible{border-color:var(--ink)}
.r-karte h3{font-size:21px}
.r-karte p{color:var(--ink-2);font-size:16px;flex:1}
.r-karte .more{font-weight:600;color:var(--accent-d)}
.r-weitere{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.r-weitere a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;text-decoration:none;font-size:15px}
.r-weitere a:hover{border-color:var(--ink)}

@media(max-width:560px){
  .r-kurz{padding:18px 18px}
  .r-vorlage{padding:20px 18px}
  .r-cta{padding:20px}
}
@media(prefers-reduced-motion:reduce){.r-karte{transition:none}}
.b-zwei .lead+p{margin-top:12px}
.r-passend{margin:26px 0 0;padding:14px 18px;background:var(--soft);border-radius:12px;font-size:16px}

.b-lesetipps{margin-top:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px}.b-lesetipps b{grid-column:1 / -1}
@media(max-width:700px){.b-lesetipps{grid-template-columns:1fr}}
/* Prüfung 21.10.2026 (optik A6): Knöpfe im Ratgeber-Kasten wie alle Hauptknöpfe, Streichpreis lesbar */
.r-text a.btn,.r-kurz a.btn{text-decoration:none}
.r-text a.btn-primary,.r-kurz a.btn-primary{color:#fff}
.r-cta .preis-alt{font-size:.85em}

/* Bildvorschau von Unterlagen (03.11.2026, Bewerbung auf Englisch): drei A4-Seiten nebeneinander, am Handy untereinander */
.b-intro{max-width:62ch;margin:0 0 24px;font-size:17px;color:var(--muted)}
.unterlagen-bilder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.unterlagen-bilder figure{margin:0}
.unterlagen-bilder img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid rgba(12,27,51,.1);box-shadow:0 12px 32px rgba(12,27,51,.12);background:#fff}
.unterlagen-bilder figcaption{margin-top:10px;font-size:15px;color:var(--muted)}
@media (max-width:760px){.unterlagen-bilder{grid-template-columns:minmax(0,1fr);max-width:420px;margin:0 auto;gap:28px}}

/* ================= Lücken-Helfer (luecken-im-lebenslauf-formulieren.html, js/luecken.js), 13.11.2026 ================= */
.lh-form{display:grid;gap:26px;max-width:860px}
.lh-form fieldset{border:0;min-width:0}
.lh-form legend{font-family:var(--serif);font-size:20px;color:var(--ink);margin-bottom:12px;padding:0}
.lh-form legend span{display:block;font-family:var(--sans);font-size:15px;line-height:1.4;color:var(--muted);font-weight:400;margin-top:4px}
.lh-wahl{display:flex;flex-wrap:wrap;gap:10px}
.lh-wahl label{position:relative;cursor:pointer}
.lh-wahl input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.lh-wahl span{display:block;padding:11px 16px;border:1px solid #C9CFDA;border-radius:999px;background:#fff;font-size:15px;line-height:1.3;color:var(--ink)}
.lh-wahl label:hover span{border-color:var(--ink)}
.lh-wahl input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.lh-wahl input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.lh-privat{font-size:15px;color:var(--muted);max-width:60ch}
.lh-ergebnis{max-width:860px;margin-top:44px;padding-top:36px;border-top:1px solid var(--line);scroll-margin-top:90px}
.lh-ergebnis h2{font-size:clamp(24px,3vw,30px);margin-bottom:6px}
.lh-fuellen{font-size:15px;color:var(--muted);margin-bottom:8px}
.lh-karte{margin-top:26px}
.lh-karte-kopf{display:flex;align-items:center;justify-content:space-between;gap:14px}
.lh-karte h3{font-family:var(--sans);font-size:17px;color:var(--ink)}
.lh-kopieren{font:600 15px/1 var(--sans);color:var(--ink);background:#fff;border:1px solid #C9CFDA;border-radius:999px;padding:9px 16px;cursor:pointer;white-space:nowrap}
.lh-kopieren:hover{border-color:var(--ink)}
.lh-kopieren:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.lh-vorab{font-size:15px;color:var(--ink-2);margin-top:8px}
.lh-karte .r-vorlage{margin:10px 0 0}
.lh-karte .r-vorlage p{font-size:17px}
.lh-ergebnis mark,.lh-tabelle mark{background:#FFF1C2;color:inherit;border-radius:3px;padding:0 2px}
.lh-hinweise{margin-top:32px;background:var(--soft);border-radius:var(--radius);padding:22px 26px}
.lh-hinweise h3{font-family:var(--sans);font-size:17px;color:var(--ink);margin-bottom:10px}
.lh-hinweise ul{margin-left:20px;display:grid;gap:8px}
.lh-hinweise li{font-size:15px;line-height:1.6;color:var(--ink-2)}
.lh-hinweise a{color:var(--ink)}
.lh-weiter{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:26px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:22px 26px}
.lh-weiter b{font-family:var(--serif);font-size:20px;color:var(--ink)}
.lh-weiter p{font-size:15px;margin-top:4px;max-width:46ch;color:var(--ink-2)}
.lh-tabelle{width:100%;border-collapse:collapse;font-size:15px}
.lh-tabelle th,.lh-tabelle td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line);line-height:1.55;color:var(--ink-2);min-width:170px}
.lh-tabelle thead th{font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--soft)}
.lh-tabelle tbody th{color:var(--ink);font-weight:600;min-width:130px}
.lh-tabelle-huelle{overflow-x:auto}
@media(max-width:620px){
  .lh-wahl span{padding:10px 14px}
  .lh-hinweise,.lh-weiter{padding:20px}
  .lh-karte-kopf{align-items:flex-start}
}