/* Teil 43 – Kostenlose Werkzeuge (ergänzt ratgeber.css) */
.tl-hero{background:radial-gradient(1100px 380px at 15% -10%,color-mix(in srgb,var(--p-primary) 9%,var(--p-bg)),transparent 60%),linear-gradient(180deg,color-mix(in srgb,var(--p-primary) 6%,var(--p-bg)),var(--p-bg));padding:34px 0 26px}
.tl-hero h1{font-size:clamp(2rem,1.5rem + 2vw,2.875rem);letter-spacing:-.025em;margin:0 0 12px;line-height:1.1}
.tl-hero .rg-lead{max-width:760px}
.tl-main{padding-top:10px;padding-bottom:40px}
.tl-tool{max-width:none}
.tl-card-box{background:var(--p-surface);border:1px solid var(--p-border);border-radius:20px;padding:22px 24px;box-shadow:0 20px 50px -34px rgba(15,23,42,.45)}
.tl-label{display:block;font-weight:750;font-size:.9375rem;margin-bottom:8px;color:var(--p-text)}
.tl-card-box textarea,.tl-field input,.tl-field select,.tl-field textarea{width:100%;box-sizing:border-box;font:inherit;font-size:.9688rem;color:var(--p-text);background:var(--p-surface);border:1px solid var(--p-border-strong);border-radius:12px;padding:11px 13px;transition:border-color .15s,box-shadow .15s}
.tl-card-box textarea{line-height:1.6;resize:vertical}
.tl-card-box textarea:focus,.tl-field input:focus,.tl-field select:focus,.tl-field textarea:focus{outline:none;border-color:var(--p-primary);box-shadow:0 0 0 3px var(--p-primary-light)}
.tl-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.tl-private{font-size:.8125rem;color:var(--p-text-muted);font-weight:600}
.tl-form{display:flex;flex-direction:column;gap:14px}
.tl-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tl-field{display:flex;flex-direction:column;gap:6px;font-size:.875rem;font-weight:650}
.tl-field input,.tl-field select,.tl-field textarea{font-weight:400}
.tl-field em{font-style:normal;font-weight:500;color:var(--p-text-muted)}
.tl-check{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.9063rem}
.tl-check input{width:18px;height:18px;accent-color:var(--p-primary)}
.tl-seg-field{border:0;margin:0;padding:0}
.tl-seg{display:inline-flex;background:var(--p-bg);border:1px solid var(--p-border);border-radius:12px;padding:3px;flex-wrap:wrap}
.tl-seg label{cursor:pointer}
.tl-seg input{position:absolute;opacity:0;pointer-events:none}
.tl-seg span{display:block;padding:8px 14px;border-radius:9px;font-size:.875rem;font-weight:700;color:var(--p-text-muted)}
.tl-seg input:checked+span{background:var(--p-surface);color:var(--p-primary);box-shadow:0 1px 3px rgba(17,21,39,.12)}
.tl-seg input:focus-visible+span{outline:2px solid var(--p-accent-text)}
.tl-more summary{cursor:pointer;font-weight:700;font-size:.875rem;color:var(--p-primary)}
.tl-more .tl-grid2{margin-top:12px}
.tl-result{margin-top:22px;display:flex;flex-direction:column;gap:14px;scroll-margin-top:90px}
/* Teil 671: „hidden“ wirkt sonst nicht (display aus der Klasse überschreibt es) – z. B. U1/U2-Felder im Brutto-Netto-Rechner */
.tl-result[hidden],.tl-grid2[hidden]{display:none}
.tl-result .box{margin:0}
.tl-article{max-width:none;margin-top:48px}
.tl-next{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 20px;border-radius:16px;background:linear-gradient(135deg,var(--p-primary-light),color-mix(in srgb,var(--p-primary) 8%,var(--p-bg)));border:1px solid var(--p-primary-border)}
.tl-next b{display:block;font-size:1rem}
.tl-next p{margin:2px 0 0;font-size:.875rem;color:var(--p-text-muted)}
.tl-next-actions{display:flex;gap:8px;flex-wrap:wrap}
.zg-disclaimer{font-size:.75rem;color:var(--p-text-subtle);margin:0}
.zg-note{margin:0;font-size:.875rem;color:var(--p-text-muted)}

/* Zeugnis */
.zg-summary{display:flex;align-items:center;gap:20px;padding:22px 24px;border-radius:20px;background:var(--p-surface);border:1px solid var(--p-border)}
.zg-summary h2{margin:0 0 4px;font-size:1.25rem;letter-spacing:-.01em}
.zg-summary p{margin:0;color:var(--p-text-muted);font-size:.9375rem}
.zg-ring{flex-shrink:0;width:96px;height:96px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
.zg-ring b{font-size:1.875rem;line-height:1}
.zg-ring span{font-size:.625rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.9;margin-top:3px}
.g1 .zg-ring{background:linear-gradient(145deg,#059669,#10b981)}.g2 .zg-ring{background:linear-gradient(145deg,#0d9488,#22c55e)}.g3 .zg-ring{background:linear-gradient(145deg,#d97706,#f59e0b)}.g4 .zg-ring{background:linear-gradient(145deg,#dc2626,#f97316)}
.zg-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.zg-part{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:16px;background:var(--p-surface);border:1px solid var(--p-border)}
.zg-part b{display:block;font-size:.9375rem;margin-bottom:2px}
.zg-part p{margin:0;font-size:.8438rem;color:var(--p-text-muted);line-height:1.5}
.zg-part q{display:block;margin-top:6px;font-size:.8125rem;font-style:italic;color:var(--p-text)}
.zg-badge{flex-shrink:0;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:800;color:#fff;background:#94a3b8}
.zg-part.g1 .zg-badge{background:#059669}.zg-part.g2 .zg-badge{background:#22a06b}.zg-part.g3 .zg-badge{background:#d97706}.zg-part.g4 .zg-badge{background:#dc2626}
.tl-result .box ul{margin:6px 0 0;padding-left:20px}
.tl-result .box li{margin:4px 0}
.tl-result q{font-style:italic}

/* Kündigungsfrist */
.kf-hero{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:24px 26px;border-radius:20px;color:var(--p-on-primary);background:linear-gradient(135deg,var(--p-primary),var(--p-primary));box-shadow:0 24px 50px -30px var(--p-primary)}
.kf-label{font-size:.8125rem;font-weight:700;opacity:.9}
.kf-date{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.125rem);letter-spacing:-.02em;line-height:1.15}
.kf-sub{font-size:.875rem;opacity:.9}
.kf-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.kf-rows>div{padding:16px;border-radius:16px;background:var(--p-surface);border:1px solid var(--p-border);display:flex;flex-direction:column;gap:3px}
.kf-rows span{font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--p-text-muted)}
.kf-rows b{font-size:1.0313rem}
.kf-rows small{font-size:.8125rem;color:var(--p-text-muted);line-height:1.45}
.kf-rows .kf-warn{background:color-mix(in srgb,#f59e0b 10%,var(--p-bg));border-color:color-mix(in srgb,#f59e0b 35%,transparent)}

/* Anschreiben */
.ag-letter{background:#fff;color:#1f2433;border:1px solid var(--p-border);border-radius:16px;padding:32px 36px;line-height:1.7;font-size:.9688rem;box-shadow:0 20px 44px -30px rgba(15,23,42,.4)}
.ag-letter p{margin:0 0 1em}.ag-letter p:last-child{margin:0}
.ag-subject{font-weight:800}
.ag-ph{color:#5b6170}
.ag-hint{margin:0;font-size:.875rem;color:#b45309;font-weight:600}
[data-theme="dark"] .ag-letter{background:#fafafa}
[data-theme="dark"] .ag-hint{color:#fbbf24}
[data-theme="dark"] .tl-seg input:checked+span,[data-theme="dark"] .tl-more summary{color:var(--p-primary-ink)}

/* Übersicht */
.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.tl-card{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:18px;border:1px solid var(--p-border);background:var(--p-surface);text-decoration:none;color:var(--p-text);transition:border-color .15s,transform .15s,box-shadow .15s}
.tl-card:hover{border-color:var(--p-primary-border);transform:translateY(-2px);box-shadow:0 16px 34px -24px rgba(15,23,42,.5)}
.tl-card b{display:block;font-size:1rem;margin-bottom:3px}
.tl-card small{display:block;font-size:.8438rem;color:var(--p-text-muted);line-height:1.5}
.tl-ico{width:44px;height:44px;flex-shrink:0;border-radius:13px;display:grid;place-items:center;color:var(--p-on-primary);background:linear-gradient(145deg,var(--p-primary),var(--p-primary))}
.tl-grid-big .tl-card{padding:22px}

@media (max-width:760px){
 .tl-grid2,.zg-parts{grid-template-columns:1fr}
 .tl-card-box{padding:18px 16px;border-radius:16px}
 .zg-summary{flex-direction:column;align-items:flex-start}
 .ag-letter{padding:22px 18px;font-size:.9063rem}
 .tl-row .btn{flex:1}
}

/* Teil 245 – Brutto-Netto-Rechner */
.bn-head{display:flex;flex-direction:column;gap:2px;background:var(--p-surface);border:1px solid var(--p-border);border-radius:18px;padding:18px 22px}
.bn-head span{font-size:.875rem;font-weight:700;color:var(--p-text-muted)}
.bn-head strong{font-size:clamp(2rem,1.6rem + 1.6vw,2.75rem);letter-spacing:-.02em;color:var(--p-primary-ink,var(--p-primary));line-height:1.1}
.bn-head small{font-size:.8125rem;color:var(--p-text-muted)}
.bn-table td:nth-child(n+2),.bn-table th:nth-child(n+2){text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.bn-table tr.bn-netto td{font-weight:800;border-top:2px solid var(--p-border-strong)}
.bn-h3{margin:8px 0 0;font-size:1.0625rem}
/* Teil 247: Auswahlfelder in Safari wie Eingabefelder (Safari ignoriert Höhe/Innenabstand bei nativen Selects) */
.tl-field select{-webkit-appearance:none;appearance:none;min-height:46px;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px}
/* Teil 251 – Kündigungsschreiben-Generator */
.kg-fs{border:0;margin:0 0 18px;padding:0;min-width:0}
.kg-fs legend{margin-bottom:8px}
.kg-fs .tl-check{display:flex;gap:8px;align-items:flex-start;margin:6px 0}
.kg-summary{margin-bottom:18px}
.kg-end{font-size:1.75rem;font-weight:800;margin:4px 0;color:var(--p-text)}
.kg-rule,.kg-meld{margin:4px 0;color:var(--p-text-muted);font-size:.9rem}
.kg-letter{background:#fff;color:#111;border:1px solid var(--p-border);border-radius:12px;box-shadow:var(--p-shadow-sm);padding:48px 56px;max-width:210mm;margin:0 0 18px;font-family:Arial,Helvetica,sans-serif;font-size:11pt;line-height:1.5;overflow-wrap:anywhere}
.kg-letter p{margin:0 0 12px;text-align:left}
.kg-abs{font-size:9pt;margin-bottom:28px;color:#333}
.kg-empf{margin-bottom:36px}
.kg-ruecks{display:none}
.kg-letter .kg-empfang{margin-top:28px;padding-top:14px;border-top:1px dashed #999}
.kg-letter .kg-empfang p{margin:0 0 8px}
.tl-hint-inline{color:var(--p-text-muted);font-size:.9em}
.kg-letter .kg-datum{text-align:right}
.kg-letter .kg-betreff{margin:18px 0}
.kg-sign{height:48px}
.kg-letter .kg-signname{margin:0;border-top:1px solid #999;display:inline-block;padding-top:4px;min-width:220px}
.kg-letter .kg-signhint{font-size:8pt;color:#666}
@media(max-width:640px){.kg-letter{padding:24px 20px}}
@media print{
 /* Teil 277: alles außer dem Brief und seinen Vorfahren ausblenden (vorher nur unsichtbar → zwei leere Folgeseiten) */
 body.kg-printing *:not(:has(#kg-letter,#zgen-letter)):not(#kg-letter,#zgen-letter):not(#kg-letter *,#zgen-letter *){display:none!important}
 body.kg-printing :has(#kg-letter,#zgen-letter){display:block!important;position:static!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;background:none!important;min-height:0!important;height:auto!important;width:auto!important;max-width:none!important;transform:none!important}
 body.kg-printing #kg-letter,body.kg-printing #zgen-letter{position:static;width:auto;max-width:none;border:0;box-shadow:none;border-radius:0;padding:20mm 20mm 20mm 25mm;margin:0}
 body.kg-printing .kg-signhint{display:none}
 /* Teil 278: Kündigung nach DIN 5008 Form B – Anschrift erscheint im Fenster eines DIN-lang-Umschlags (45–90 mm von oben, 20–25 mm von links), Falzmarken bei 105/210 mm */
 body.kg-printing #kg-letter{page:brief;position:relative;padding:0 20mm 0 25mm}
 body.kg-printing #kg-letter .kg-abs{height:45mm;box-sizing:border-box;padding-top:15mm;margin:0;overflow:hidden}
 body.kg-printing #kg-letter .kg-empf{height:45mm;width:85mm;box-sizing:border-box;margin:0;overflow:hidden;line-height:1.35}
 body.kg-printing #kg-letter .kg-ruecks{display:block;font-size:7pt;line-height:5mm;height:5mm;margin:0 0 12.7mm;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333}
 body.kg-printing #kg-letter .kg-datum{margin-top:8mm}
 body.kg-printing #kg-letter::before,body.kg-printing #kg-letter::after{content:"";position:absolute;left:5mm;width:5mm;border-top:.5pt solid #888}
 body.kg-printing #kg-letter::before{top:105mm}
 body.kg-printing #kg-letter::after{top:210mm}
}
@page brief{margin:0}
/* Teil 252 – Arbeitszeugnis-Generator */
.zgen-letter p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.zgen-letter .zgen-firma{font-weight:700;text-align:left;margin-bottom:28px}
.zgen-letter .zgen-titel{text-align:center;font-size:15pt;letter-spacing:.04em;margin:8px 0 24px;color:#111}
.zgen-letter ul{margin:0 0 12px;padding-left:22px}
.zgen-letter li{margin:0 0 4px}
.zgen-letter .kg-datum-l{text-align:left;margin-top:24px}
/* Teil 253: Handy – Brief linksbündig (Blocksatz reißt bei schmaler Spalte Lücken), Aktionen untereinander */
@media(max-width:640px){
 .kg-letter p,.zgen-letter p{text-align:left;hyphens:auto;-webkit-hyphens:auto}
 .kg-actions{flex-direction:column;align-items:stretch}
 .kg-actions .btn{width:100%}
}
/* Teil 256: Plausibilitätshinweis Monat/Jahr im Brutto-Netto-Rechner */
.bn-plaus{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:14px}
.bn-plaus p{margin:0;flex:1 1 260px}
/* Teil 256: Hinweisboxen in Tool-Ergebnissen sichtbar machen – .box war nur innerhalb von Ratgeber-Artikeln
   (.rg-content) gestaltet, in Ergebnissen standen Warn-/Infohinweise als nackter Text. */
.tl-result .box{border:1px solid;border-radius:14px;padding:14px 18px}
.tl-result .box p{margin:0}
.tl-result .box p+p{margin-top:8px}
.tl-result .box-warn{background:color-mix(in srgb,#f59e0b 11%,var(--p-bg));border-color:color-mix(in srgb,#f59e0b 35%,transparent)}
.tl-result .box-info{background:color-mix(in srgb,var(--p-primary) 6%,var(--p-bg));border-color:var(--p-primary-border,var(--p-border))}
/* Teil 262: Tool-Übersicht nach Anlass gruppiert */
.tl-group{margin:0 0 40px;scroll-margin-top:90px}
.tl-group h2{margin:0 0 4px;font-size:1.35rem;letter-spacing:-.01em}
.tl-group-lead{margin:0 0 16px;color:var(--p-text-muted);font-size:.95rem}
/* Teil 273: Hinweis unter Formularfeldern (z. B. Probezeit im Kündigungs-Generator) */
.tl-hint{margin:4px 0 8px;padding:8px 12px;border-radius:10px;font-size:.875rem;line-height:1.45;color:var(--p-text);background:color-mix(in srgb,#f59e0b 11%,var(--p-bg));border:1px solid color-mix(in srgb,#f59e0b 35%,transparent)}

/* Teil 280: Brutto-Netto-Tabelle (Posten/Monat/Jahr) passt ab 320 px ohne Querscrollen */
.rg-table table.bn-table{min-width:0}
@media(max-width:420px){.rg-table .bn-table th,.rg-table .bn-table td{padding:9px 7px;font-size:.84rem}.rg-table .bn-table td:first-child{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}}

/* Teil 302: [hidden] muss gegen display:flex der Felder gewinnen (sonst standen Zusatzbeitrag und PKV-Beitrag gleichzeitig da) */
.tl-field[hidden],.tl-hint[hidden],.tl-check[hidden],.tl-grid2>[hidden]{display:none!important}
.bn-quelle{font-size:.8125rem;color:var(--p-text-muted);margin:-4px 0 14px;line-height:1.5}
.bn-quelle[hidden]{display:none}